flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Improve visual styling for transmitting/triggering (#2490)

Browse Source
This commit is contained in:
Dermot Duffy
2026-06-30 17:45:13 -07:00
committed by dermotduffy
parent 090138a01e
commit f21a46297a
5 changed files with 87 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/live-grid.scss
-53
View File
@@ -1,61 +1,8 @@
@use 'basic-block.scss';
@use 'locked.scss';
@keyframes warning-pulse {
0% {
border-color: var(--trigger-border-color-base);
}
50% {
border-color: var(--trigger-border-color);
}
100% {
border-color: var(--trigger-border-color-base);
}
}
advanced-camera-card-live-carousel {
--trigger-border-color: var(--advanced-camera-card-trigger-border-color);
--trigger-border-color-base: var(
--advanced-camera-card-trigger-border-color-base,
black
);
transition: border-color 0.3s ease-out;
}
// `:host >` matches the carousel only in single display mode (in grid mode it
// is nested inside `media-grid`). The single-mode carousel has no border of its
// own, so reserve a transparent one so border changes (e.g. trigger) only
// recolour. In grid mode the border is supplied (already width-reserved) by
// `media-grid`.
:host > advanced-camera-card-live-carousel {
box-sizing: border-box;
border: solid 2px transparent;
}
advanced-camera-card-live-carousel[triggered] {
animation: warning-pulse 5s infinite;
}
// The `:host` prefix raises specificity to (0,2,1), above `media-grid`'s
// `::slotted([selected])` border (0,1,1). In grid mode that rule lives in an
// inner shadow tree and would otherwise win the cross-tree cascade tie,
// leaving the transmitting border the wrong colour. `[triggered]` needs no
// such treatment — animated values always beat the regular cascade.
:host advanced-camera-card-live-carousel[transmitting] {
// `animation: none` cancels any concurrent trigger pulse to ensure
// transmitting takes precedence.
animation: none;
border-color: var(--advanced-camera-card-transmitting-border-color);
}
// While locked, dim and disable interaction on the non-selected cameras in the
// grid so input stays on the selected camera (e.g. during a call).
:host([locked]) advanced-camera-card-live-carousel[unselected] {
@include locked.style;
}
advanced-camera-card-live-carousel[selected] {
--trigger-border-color-base: var(
--advanced-camera-card-trigger-border-color-base,
var(--advanced-camera-card-foreground-primary)
);
}