diff --git a/docs/configuration/view.md b/docs/configuration/view.md
index b241dc8f..52d31abe 100644
--- a/docs/configuration/view.md
+++ b/docs/configuration/view.md
@@ -114,6 +114,8 @@ Allows overriding of any CSS value, can be used to tweak theming parameters.
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
| Any CSS key. Overriding the [Advanced Camera Card](https://github.com/dermotduffy/advanced-camera-card/blob/main/src/scss/themes/base.scss) CSS variables allows changing individual theming parameters, e.g. `--advanced-camera-card-menu-override-background` | Any CSS value, e.g. `red` or `rgba(10, 11, 12, 0.64)`. |
+> [!WARNING] Changes to CSS keys are not considered breaking changes and may not have an associated [major version change](../developing.md?id=release-philosophy).
+
## `triggers`
The `triggers` block controls how the card reacts when a camera is triggered
diff --git a/src/components/live/carousel.ts b/src/components/live/carousel.ts
index bbcd5f49..83a860de 100644
--- a/src/components/live/carousel.ts
+++ b/src/components/live/carousel.ts
@@ -445,6 +445,8 @@ export class AdvancedCameraCardLiveCarousel extends LitElement {
${this._renderNextPrevious('right', neighbors)}
+
+
` 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)
- );
-}
diff --git a/src/scss/themes/base.scss b/src/scss/themes/base.scss
index 9c55bd4d..41c27520 100644
--- a/src/scss/themes/base.scss
+++ b/src/scss/themes/base.scss
@@ -245,15 +245,16 @@
/*********
* Trigger
*********/
- --advanced-camera-card-trigger-border-color: var(--advanced-camera-card-warning-color);
- --advanced-camera-card-trigger-border-color-base: unset;
+ --advanced-camera-card-trigger-glow-color: var(--advanced-camera-card-active-color);
+ --advanced-camera-card-trigger-glow-size: 16px;
/**************
* Transmitting
**************/
- --advanced-camera-card-transmitting-border-color: var(
+ --advanced-camera-card-transmitting-glow-color: var(
--advanced-camera-card-warning-color
);
+ --advanced-camera-card-transmitting-glow-size: 28px;
/*****
* Grid