diff --git a/frontend/src/components/Dashboard/ui/glass/glass.css b/frontend/src/components/Dashboard/ui/glass/glass.css index 8c23b93..ce34197 100644 --- a/frontend/src/components/Dashboard/ui/glass/glass.css +++ b/frontend/src/components/Dashboard/ui/glass/glass.css @@ -26,6 +26,9 @@ --gl-radius: 1.25rem; --gl-track: rgb(255 255 255 / 0.16); --gl-blob-opacity: 0.5; + /* A round face's press, which has no card behind it. See below. */ + --gl-press: var(--gl-bg); + --gl-press-shadow: var(--gl-inset); } [data-look="glass"].light { @@ -37,6 +40,8 @@ --gl-track: rgb(0 0 0 / 0.1); /* Diluted by the white it mixes into, so it takes more of it to show. */ --gl-blob-opacity: 0.6; + --gl-press: color-mix(in srgb, var(--primary) 14%, rgb(255 255 255 / 0.85)); + --gl-press-shadow: var(--gl-shadow), var(--gl-inset); } /* --- the ground ---------------------------------------------------------- */ @@ -238,6 +243,19 @@ pointer-events: none; } +/* + * A Switch's or a Button's face on a round dashboard is one large press with + * only the ground behind it. A tile's button has a card for contrast; this has + * none, so in light the white wash all but disappears into the ground. The + * look's root states the press's own wash, so a dashboard keeps its own when + * a round panel draws it beside one in another look or theme. + */ +.dui-face-press +> .gl-button:not([data-variant="filled"], [aria-pressed="true"]) { + background: var(--gl-press); + box-shadow: var(--gl-press-shadow); +} + .gl-switch { position: relative; display: inline-flex;