马一丁

Optimize the performance of the SWOT block in light mode

@@ -2563,6 +2563,10 @@ class HTMLRenderer: @@ -2563,6 +2563,10 @@ class HTMLRenderer:
2563 --swot-weakness: #c0392b; 2563 --swot-weakness: #c0392b;
2564 --swot-opportunity: #1f5ab3; 2564 --swot-opportunity: #1f5ab3;
2565 --swot-threat: #b36b16; 2565 --swot-threat: #b36b16;
  2566 + --swot-on-light: #0f1b2b;
  2567 + --swot-on-dark: #f7fbff;
  2568 + --swot-muted: rgba(0,0,0,0.65);
  2569 + --swot-surface: rgba(255,255,255,0.86);
2566 }} 2570 }}
2567 * {{ box-sizing: border-box; }} 2571 * {{ box-sizing: border-box; }}
2568 body {{ 2572 body {{
@@ -3008,8 +3012,9 @@ table th {{ @@ -3008,8 +3012,9 @@ table th {{
3008 padding: 18px 18px 14px; 3012 padding: 18px 18px 14px;
3009 border-radius: 16px; 3013 border-radius: 16px;
3010 border: 1px solid var(--border-color); 3014 border: 1px solid var(--border-color);
3011 - background: linear-gradient(135deg, rgba(76,132,255,0.06), rgba(28,127,110,0.06)), var(--card-bg); 3015 + background: linear-gradient(135deg, rgba(76,132,255,0.06), rgba(28,127,110,0.08)), var(--card-bg);
3012 box-shadow: 0 12px 30px var(--shadow-color); 3016 box-shadow: 0 12px 30px var(--shadow-color);
  3017 + color: var(--swot-on-light);
3013 }} 3018 }}
3014 .swot-card__head {{ 3019 .swot-card__head {{
3015 display: flex; 3020 display: flex;
@@ -3038,7 +3043,8 @@ table th {{ @@ -3038,7 +3043,8 @@ table th {{
3038 padding: 6px 12px; 3043 padding: 6px 12px;
3039 border-radius: 999px; 3044 border-radius: 999px;
3040 font-weight: 700; 3045 font-weight: 700;
3041 - color: #fff; 3046 + color: var(--swot-on-light);
  3047 + border: 1px solid rgba(255,255,255,0.18);
3042 box-shadow: 0 4px 10px rgba(0,0,0,0.12); 3048 box-shadow: 0 4px 10px rgba(0,0,0,0.12);
3043 }} 3049 }}
3044 .swot-legend__item.strength {{ background: var(--swot-strength); }} 3050 .swot-legend__item.strength {{ background: var(--swot-strength); }}
@@ -3076,7 +3082,8 @@ table th {{ @@ -3076,7 +3082,8 @@ table th {{
3076 height: 36px; 3082 height: 36px;
3077 border-radius: 12px; 3083 border-radius: 12px;
3078 font-weight: 800; 3084 font-weight: 800;
3079 - color: #fff; 3085 + color: var(--swot-on-light);
  3086 + border: 1px solid rgba(255,255,255,0.2);
3080 box-shadow: 0 6px 16px rgba(0,0,0,0.14); 3087 box-shadow: 0 6px 16px rgba(0,0,0,0.14);
3081 }} 3088 }}
3082 .swot-pill.strength {{ background: var(--swot-strength); }} 3089 .swot-pill.strength {{ background: var(--swot-strength); }}
@@ -3103,8 +3110,8 @@ table th {{ @@ -3103,8 +3110,8 @@ table th {{
3103 .swot-item {{ 3110 .swot-item {{
3104 padding: 10px 12px; 3111 padding: 10px 12px;
3105 border-radius: 12px; 3112 border-radius: 12px;
3106 - background: rgba(0,0,0,0.02);  
3107 - border: 1px dashed rgba(0,0,0,0.05); 3113 + background: var(--swot-surface);
  3114 + border: 1px dashed rgba(0,0,0,0.06);
3108 }} 3115 }}
3109 .swot-item-title {{ 3116 .swot-item-title {{
3110 display: flex; 3117 display: flex;
@@ -3123,7 +3130,7 @@ table th {{ @@ -3123,7 +3130,7 @@ table th {{
3123 padding: 4px 8px; 3130 padding: 4px 8px;
3124 border-radius: 10px; 3131 border-radius: 10px;
3125 background: rgba(0,0,0,0.06); 3132 background: rgba(0,0,0,0.06);
3126 - color: var(--text-color); 3133 + color: var(--swot-on-light);
3127 line-height: 1.2; 3134 line-height: 1.2;
3128 }} 3135 }}
3129 .swot-tag.neutral {{ 3136 .swot-tag.neutral {{
@@ -3132,7 +3139,7 @@ table th {{ @@ -3132,7 +3139,7 @@ table th {{
3132 .swot-item-desc {{ 3139 .swot-item-desc {{
3133 margin-top: 4px; 3140 margin-top: 4px;
3134 color: var(--text-color); 3141 color: var(--text-color);
3135 - opacity: 0.92; 3142 + opacity: 0.94;
3136 }} 3143 }}
3137 .swot-item-evidence {{ 3144 .swot-item-evidence {{
3138 margin-top: 4px; 3145 margin-top: 4px;
@@ -3144,7 +3151,7 @@ table th {{ @@ -3144,7 +3151,7 @@ table th {{
3144 border-radius: 12px; 3151 border-radius: 12px;
3145 border: 1px dashed var(--border-color); 3152 border: 1px dashed var(--border-color);
3146 text-align: center; 3153 text-align: center;
3147 - color: var(--text-color); 3154 + color: var(--swot-muted);
3148 opacity: 0.7; 3155 opacity: 0.7;
3149 }} 3156 }}
3150 .callout {{ 3157 .callout {{
@@ -3369,10 +3376,10 @@ pre.code-block {{ @@ -3369,10 +3376,10 @@ pre.code-block {{
3369 .engine-quote, 3376 .engine-quote,
3370 .chart-card, 3377 .chart-card,
3371 .kpi-grid, 3378 .kpi-grid,
3372 - .swot-card,  
3373 - .table-wrap,  
3374 - figure,  
3375 - blockquote {{ 3379 +.swot-card,
  3380 +.table-wrap,
  3381 +figure,
  3382 +blockquote {{
3376 break-inside: avoid; 3383 break-inside: avoid;
3377 page-break-inside: avoid; 3384 page-break-inside: avoid;
3378 max-width: 100%; 3385 max-width: 100%;
@@ -3400,6 +3407,9 @@ pre.code-block {{ @@ -3400,6 +3407,9 @@ pre.code-block {{
3400 break-inside: avoid; 3407 break-inside: avoid;
3401 page-break-inside: avoid; 3408 page-break-inside: avoid;
3402 }} 3409 }}
  3410 + .swot-card {{
  3411 + color: var(--swot-on-dark);
  3412 + }}
3403 .table-wrap {{ 3413 .table-wrap {{
3404 overflow-x: auto; 3414 overflow-x: auto;
3405 max-width: 100%; 3415 max-width: 100%;
@@ -3425,6 +3435,27 @@ img, canvas, svg {{ @@ -3425,6 +3435,27 @@ img, canvas, svg {{
3425 max-width: 100%; 3435 max-width: 100%;
3426 }} 3436 }}
3427 }} 3437 }}
  3438 +
  3439 +/* 颜色模式自适应:在暗色环境下提升SWOT文本对比度 */
  3440 +@media (prefers-color-scheme: dark) {{
  3441 + .swot-card,
  3442 + .swot-legend__item,
  3443 + .swot-pill,
  3444 + .swot-item,
  3445 + .swot-tag {{
  3446 + color: var(--swot-on-dark);
  3447 + }}
  3448 + .swot-item {{
  3449 + background: rgba(255,255,255,0.04);
  3450 + border-color: rgba(255,255,255,0.16);
  3451 + }}
  3452 + .swot-tag {{
  3453 + background: rgba(255,255,255,0.08);
  3454 + }}
  3455 + .swot-item-evidence {{
  3456 + color: color-mix(in srgb, var(--secondary-color) 75%, #ffffff 25%);
  3457 + }}
  3458 +}}
3428 """ 3459 """
3429 3460
3430 def _hydration_script(self) -> str: 3461 def _hydration_script(self) -> str: