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
+2 -2
View File
@@ -94,8 +94,8 @@ Configure the theming/colors applied to the card.
Allows overriding of any CSS value, can be used to tweak theming parameters. Allows overriding of any CSS value, can be used to tweak theming parameters.
| Option | Description | | 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)`. | | 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` ## `triggers`
src/scss/live-grid.scss
+15 -4
View File
@@ -2,19 +2,30 @@
@keyframes warning-pulse { @keyframes warning-pulse {
0% { 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% { 50% {
border: solid 2px var(--advanced-camera-card-triggered-color-2, var(--warning-color)); border: solid 2px var(--trigger-border-color);
} }
100% { 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] { advanced-camera-card-live-carousel[triggered] {
animation: warning-pulse 5s infinite; animation: warning-pulse 5s infinite;
} }
advanced-camera-card-live-carousel[selected] { 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-message-overlay-color: var(
--advanced-camera-card-control-foreground --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;
} }