daniel-c-harvey
25 lines
1.0 KiB
CSS
25 lines
1.0 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);
|
|
} |