daniel-c-harvey
4410132409
The [b-xxx] Blazor scope attribute is a fifth class/attribute simple selector; the prior count dropped it.
36 lines
1.7 KiB
CSS
36 lines
1.7 KiB
CSS
.icon-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-content: center;
|
|
background-color: var(--deepdrft-play-chip);
|
|
border-radius: 50%;
|
|
height: 60px;
|
|
width: 60px;
|
|
transition: background-color 1s ease-in-out;
|
|
}
|
|
|
|
.icon-container:hover {
|
|
background-color: color-mix(in srgb, var(--deepdrft-play-chip), var(--deepdrft-navy-mid) 25%);
|
|
}
|
|
|
|
/* In dark mode the chip is moss-green and MudIconButton's Color.Primary/Secondary green
|
|
glyph would vanish against it, so pin the glyph to --deepdrft-play-glyph (navy) in dark
|
|
only. In light mode the token also resolves to navy, but applying it there overrides
|
|
Color.Secondary (green-accent) on hero/row mounts — a visible regression. Scoping to
|
|
.deepdrft-theme-dark preserves the MudBlazor Color prop in light and fixes only dark.
|
|
::deep reaches the portaled-in-scope MudIconButton icon, which doesn't carry this
|
|
component's scope attribute. */
|
|
.deepdrft-theme-dark .icon-container ::deep .mud-icon-button {
|
|
color: var(--deepdrft-play-glyph);
|
|
}
|
|
|
|
/* PlayStateIcon is authoritative over its own glyph colour — a surrounding .dd-accent-icon
|
|
must NOT recolor the play-chip glyph in dark. The consolidation rule is:
|
|
.dd-accent-icon .mud-icon-button .mud-icon-root (0,3,0) !important
|
|
After Blazor scoped-CSS compilation this rule becomes:
|
|
.deepdrft-theme-dark .icon-container[b-xxx] .mud-icon-button .mud-icon-root (0,5,0) !important
|
|
(0,5,0) beats (0,3,0) — wins on specificity; !important parity is irrelevant.
|
|
Dark only: light already renders the navy glyph via the MudBlazor Color prop. */
|
|
.deepdrft-theme-dark .icon-container ::deep .mud-icon-button .mud-icon-root {
|
|
color: var(--deepdrft-play-glyph) !important;
|
|
} |