Scope weather effects
Scope objects
Scope selection changes
This commit is contained in:
fraxle
2026-06-07 01:44:53 +01:00
parent f22833ee63
commit 1459740d96
7 changed files with 411 additions and 72 deletions
+6 -6
View File
@@ -252,7 +252,7 @@
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.scope-play:hover {
background: rgba(200, 146, 42, 0.18);
background: rgba(16, 10, 3, 0.8);
border-color: rgba(200, 146, 42, 0.85);
color: #f5edd6;
}
@@ -263,19 +263,19 @@
color: #ffd98a;
}
.scope-play.is-playing:hover {
background: #2e1d0a;
background: #160d03;
color: #ffe6b0;
}
.scope-play-icon { font-size: 9px; line-height: 1; }
/* While playing, the simulated clock is the main readout — big, bright and
monospaced so the digits don't jitter as they tick. */
/* While playing, the simulated clock is the readout — same size as the idle
label, but monospaced + tabular so the digits don't jitter as they tick. */
.scope-play.is-playing .scope-play-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 15px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
font-variant-numeric: tabular-nums;
min-width: 52px;
min-width: 40px;
text-align: center;
color: #ffd98a;
}
+22 -4
View File
@@ -103,10 +103,28 @@
border-left: none;
}
/* Each tab's background is an inline per-day weather gradient, so we darken
the whole tab with a filter on hover (!important to beat the inline filter). */
.utci-day-tab:hover {
filter: brightness(0.93) !important;
/* The selected-tab background is a different gradient (radial vs linear), and
CSS can't tween between gradients — so we paint the active gradient as an
overlay pseudo-element behind the tab content and fade its opacity on hover.
z-index:-1 keeps it above the tab's own background but below the labels. */
.utci-day-tab::before {
content: '';
position: absolute;
inset: 0;
background: var(--w-bg-active);
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
z-index: -1;
}
/* On hover, a non-active tab fades in the selected gradient + filter so it
previews the selected shade (!important to beat the inline filter). */
.utci-day-tab:hover:not(.active)::before {
opacity: 1;
}
.utci-day-tab:hover:not(.active) {
filter: saturate(1.1) brightness(1.04) !important;
}
.utci-day-tab.active {