Improved day tab selection and icons
Tweaked at a glance panel
This commit is contained in:
Fraxle
2026-06-23 17:28:47 +01:00
parent c090367f7c
commit 87907f50d6
5 changed files with 52 additions and 48 deletions
+5 -23
View File
@@ -103,33 +103,15 @@
border-left: none;
}
/* 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:hover:not(.active):not(.locked) {
filter: brightness(1.14) !important;
}
.utci-day-tab.active {
color: #c8922a;
border-bottom-color: #c8922a;
outline: 3px solid #c8922a;
outline-offset: -2px;
z-index: 1;
}
/* The "Mon 12 May" date underneath each tab name */