Give a Glass Switch or Button face a stronger press in light
A face has no card behind its disc, so the tile button's white wash all but vanished into a light ground. The look's root states the press's own wash, tinted with the primary and casting the pane's shadow. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WgBfkm4rCmtd1T4vHWjEPx
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user