2.9
Scope weather effects Scope objects Scope selection changes
This commit is contained in:
@@ -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
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user