OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

feat: Update bright panel styles to use theme variables for improved readability and consistency

Browse Source
This commit is contained in:
Matt Batchelder
2026-04-06 05:59:45 -04:00
parent 1b4da5bbe3
commit 974e048f76
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
theme/assets/css/main.css
View File

@@ -9446,13 +9446,14 @@ p:last-child { margin-bottom: 0; }
/* Dim (indoor) screen — content washed out by sunlight */
.bright-panel__screen--dim { background: rgba(30,30,40,0.6); }
.bright-panel__screen--dim .bright-panel__content { filter: blur(0.5px); opacity: 0.2; }
/* opacity 0.48: still clearly "washed out" vs the vivid panel, but text remains legible */
.bright-panel__screen--dim .bright-panel__content { opacity: 0.48; }
.bright-panel__screen--dim .bright-panel__eyebrow,
.bright-panel__screen--dim .bright-panel__title,
.bright-panel__screen--dim .bright-panel__sub { color: rgba(255,255,255,0.6); }
.bright-panel__screen--dim .bright-panel__sub { color: rgba(255,255,255,0.75); }
.bright-panel__glare {
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, transparent 60%);
background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, transparent 60%);
pointer-events: none;
}
@@ -9465,22 +9466,23 @@ p:last-child { margin-bottom: 0; }
.bright-panel__screen--vivid .bright-panel__title { color: #fff; }
.bright-panel__screen--vivid .bright-panel__sub { color: rgba(255,255,255,0.7); }
/* Spec row under each panel */
/* Spec row under each panel — uses theme tokens so it reads on any page background */
.bright-panel__spec { padding: 0 2px; }
.bright-panel__nits { font-size: 13px; font-weight: 800; color: #fff; margin-bottom: 2px; }
.bright-panel__label { font-size: 10px; color: rgba(255,255,255,0.4); margin-bottom: 5px; }
.bright-panel__nits { font-size: 13px; font-weight: 800; color: var(--color-text); margin-bottom: 2px; }
.bright-panel__label { font-size: 10px; color: var(--color-text-muted); margin-bottom: 5px; }
.bright-panel__bar {
height: 3px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden;
height: 3px; border-radius: 2px; background: var(--color-border); overflow: hidden;
}
.bright-panel__bar-fill { height: 100%; border-radius: 2px; }
.bright-panel__bar-fill--low { width: 14%; background: rgba(255,255,255,0.25); }
.bright-panel__bar-fill--low { width: 14%; background: var(--color-text-muted); }
.bright-panel__bar-fill--high {
width: 100%; background: var(--color-primary);
animation: bright-bar-enter 1.5s ease forwards;
}
/* "vs" separator — theme-aware so it shows on both light and dark pages */
.bright-vs {
font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.25);
font-size: 11px; font-weight: 700; color: var(--color-text-muted);
align-self: center; flex-shrink: 0; margin-top: -24px;
}