Dermot Duffy
abcba884e5
Draws significant inspiration (and direct styling) from https://github.com/dermotduffy/advanced-camera-card/pull/2447 . Thank you @Maudfer ! BREAKING CHANGE: The microphone condition previously bundled two unrelated signals — whether a two-way-audio session was connected and whether the microphone was muted. Connection state is now its own dedicated call condition, and microphone is reserved purely for mute state. Configs are upgraded automatically (the card rewrites affected conditions under overrides, elements, and automations). If you maintain config by hand, convert as follows: If you only used connected: # Before ```yaml condition: microphone connected: true ``` # After ```yaml condition: call call: true ``` If you used both connected and muted — they must be split into two conditions, since they no longer live together: # Before ```yaml condition: microphone connected: true muted: false ``` # After ```yaml condition: and conditions: - condition: call call: true - condition: microphone muted: false ```
43 lines
1.1 KiB
SCSS
43 lines
1.1 KiB
SCSS
:host {
|
|
display: flex;
|
|
flex-direction: row;
|
|
box-sizing: border-box;
|
|
gap: 2px;
|
|
|
|
// Position control icons relative to the thumbnail, and `isolation: isolate`
|
|
// to keep their `z-index` scoped here. Without a stacking context an
|
|
// unhovered gallery tile (which has no `transform`) lets its feature icons'
|
|
// z-index leak into the card's stacking context and paint over the `elements`
|
|
// overlay.
|
|
position: relative;
|
|
isolation: isolate;
|
|
overflow: hidden;
|
|
|
|
transition: transform 0.2s linear;
|
|
}
|
|
|
|
:host(:not([details])) {
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
:host([details]) {
|
|
border: 1px solid var(--advanced-camera-card-thumbnail-border-color);
|
|
border-radius: var(--advanced-camera-card-border-radius-final);
|
|
padding: 2px;
|
|
|
|
// Additional padding on the right to match the gap specified above.
|
|
padding-right: 4px;
|
|
|
|
// When details are enabled, use a background color so that the details have
|
|
// contrast with the background.
|
|
background-color: var(--advanced-camera-card-thumbnail-background);
|
|
}
|
|
|
|
:host(:hover) {
|
|
transform: scale(1.04);
|
|
}
|
|
|
|
advanced-camera-card-thumbnail-details {
|
|
flex: 1;
|
|
}
|