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

feat: Allow trigger border color to be overridden for theming (#2085)

Browse Source 
- Closes: #2047
This commit is contained in:
Dermot Duffy
2025-06-04 20:39:42 -07:00
committed by GitHub
parent 13e43b8747
commit 5b9187f8c9
3 changed files with 24 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/configuration/view.md
+3 -3
View File
@@ -93,9 +93,9 @@ Configure the theming/colors applied to the card.
Allows overriding of any CSS value, can be used to tweak theming parameters.
| Option | Description |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
| Any CSS key. Overriding the [Advanced Camera Card](https://github.com/dermotduffy/advanced-camera-card/tree/main/src/scss/themes/base.scss) CSS variables allows changing individual theming paramters, e.g. `--advanced-camera-card-menu-override-background` | Any CSS value, e.g. `red` or `rgba(10, 11, 12, 0.64)`. |
| Option | Description |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
| Any CSS key. Overriding the [Advanced Camera Card](https://github.com/dermotduffy/advanced-camera-card/tree/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)`. |
## `triggers`
src/scss/live-grid.scss
+15 -4
View File
@@ -2,19 +2,30 @@
@keyframes warning-pulse {
0% {
border: solid 2px var(--advanced-camera-card-triggered-color-1, rgba(0, 0, 0, 0));
border: solid 2px var(--trigger-border-color-base);
}
50% {
border: solid 2px var(--advanced-camera-card-triggered-color-2, var(--warning-color));
border: solid 2px var(--trigger-border-color);
}
100% {
border: solid 2px var(--advanced-camera-card-triggered-color-1, rgba(0, 0, 0, 0));
border: solid 2px 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
);
}
advanced-camera-card-live-carousel[triggered] {
animation: warning-pulse 5s infinite;
}
advanced-camera-card-live-carousel[selected] {
--advanced-camera-card-triggered-color-1: var(--primary-color);
--trigger-border-color-base: var(
--advanced-camera-card-trigger-border-color-base,
var(--advanced-camera-card-foreground-primary)
);
}
src/scss/themes/base.scss
+6
View File
@@ -172,4 +172,10 @@
--advanced-camera-card-message-overlay-color: var(
--advanced-camera-card-control-foreground
);
/*********
* Trigger
*********/
--advanced-camera-card-trigger-border-color: var(--advanced-camera-card-warning-color);
--advanced-camera-card-trigger-border-color-base: unset;
}