diff --git a/templates/bigscreen.html b/templates/bigscreen.html index 16e5ec3..e1e0a07 100644 --- a/templates/bigscreen.html +++ b/templates/bigscreen.html @@ -191,6 +191,8 @@ color: #bd6718; font-size: 1.7rem; font-weight: 600; + padding: 0.1rem 0.35rem; + border-radius: var(--radius-1); } /* 预警时:pastAccuracySummary 字体稍微变大,颜色保持 #bcd0ff */ .summary-panel.alert-on .summary-sub { @@ -209,6 +211,8 @@ color: #b81f1f; font-size: 1.7rem; font-weight: 600; + padding: 0.1rem 0.35rem; + border-radius: var(--radius-1); } .summary-panel.alert-red .summary-sub { color: #bcd0ff; @@ -220,17 +224,74 @@ box-shadow: inset 0 0 20rem var(--orange-shadow-3), inset 0 0 20rem var(--orange-shadow-1); + animation: screenGlowOrange 1.8s ease-in-out infinite; + } + @keyframes screenGlowOrange { + 0%, 100% { box-shadow: + inset 0 0 20rem var(--orange-shadow-3), + inset 0 0 20rem var(--orange-shadow-1); + } + 50% { box-shadow: none; } } .screen.alert-red { box-shadow: inset 0 0 20rem rgba(255, 107, 107, 0.25), inset 0 0 20rem rgba(255, 107, 107, 0.35); + animation: screenGlowRed 1.8s ease-in-out infinite; + } + @keyframes screenGlowRed { + 0%, 100% { box-shadow: + inset 0 0 20rem rgba(255, 107, 107, 0.25), + inset 0 0 20rem rgba(255, 107, 107, 0.35); + } + 50% { box-shadow: none; } } /* 减少动画偏好时关闭动画(目前无动画,但作为扩展) */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; } } + + /* Panel 与文字整体闪烁:橙色 */ + .summary-panel.alert-on { animation: panelGlowOrange 1.8s ease-in-out infinite; } + .summary-panel.alert-on .summary-title, + .summary-panel.alert-on .summary-sub { animation: textPulseOrange 1.8s ease-in-out infinite; } + @keyframes panelGlowOrange { + 0%, 100% { + background: linear-gradient(180deg, var(--orange-bg-1), var(--orange-bg-2)); + border-color: var(--orange-border); + box-shadow: 0 0.375rem 1.125rem var(--orange-shadow-1), 0 0 0 1px var(--orange-shadow-2) inset, 0 0 1.5rem var(--orange-shadow-3) inset; + } + 50% { + background: var(--color-bg); + border-color: var(--panel-border); + box-shadow: none; + } + } + @keyframes textPulseOrange { + 0%, 100% { /* 使用各自定义色 */ } + 50% { color: var(--color-fg); } + } + /* Panel 与文字整体闪烁:红色 */ + .summary-panel.alert-red { animation: panelGlowRed 1.8s ease-in-out infinite; } + .summary-panel.alert-red .summary-title, + .summary-panel.alert-red .summary-sub { animation: textPulseRed 1.8s ease-in-out infinite; } + @keyframes panelGlowRed { + 0%, 100% { + background: linear-gradient(180deg, rgba(255, 107, 107, 0.22), rgba(255, 107, 107, 0.12)); + border-color: rgba(200, 40, 40, 0.6); + box-shadow: 0 0.375rem 1.125rem rgba(255, 107, 107, 0.35), 0 0 0 1px rgba(255,107,107,0.10) inset, 0 0 1.5rem rgba(255, 107, 107, 0.25) inset; + } + 50% { + background: var(--color-bg); + border-color: var(--panel-border); + box-shadow: none; + } + } + @keyframes textPulseRed { + 0%, 100% { /* 使用各自定义色 */ } + 50% { color: var(--color-fg); } + }