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

feat: Rename the card to advanced-camera-card (#1873)

Browse Source 
Whilst the Frigate support in this card is the best among camera
engines, the name incorrectly suggests that Frigate is a requirement.
Instead, to broaden the appeal, change to more camera agnostic name.
This does not suggest any change in priority, role or support for
Frigate.

This change is likely to be bug prone, due to the size of the rename --
the code contains 1500+ references to "Frigate" most of which make sense
to rename, some which do not, all of which needed human assessment.

- Closes #1298


BREAKING CHANGE: References to `frigate-card` in all kinds of
configuration need to be updated to `advanced-camera-card`. An automated
config upgrade should take care of the majority of usecases (click `Edit
-> Upgrade -> Save`), though may not be perfect.
This commit is contained in:
Dermot Duffy
2025-02-06 19:32:32 -08:00
committed by GitHub
parent 43947b49dc
commit cc376a8be1
305 changed files with 4270 additions and 3686 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/themes/base.scss
+83 -55
View File
@@ -7,141 +7,169 @@
* General
*********/
--frigate-card-exterior: var(--secondary-background-color, black);
--frigate-card-background: var(--primary-background-color, white);
--advanced-camera-card-exterior: var(--secondary-background-color, black);
--advanced-camera-card-background: var(--primary-background-color, white);
--frigate-card-foreground-primary: var(--primary-color, black);
--advanced-camera-card-foreground-primary: var(--primary-color, black);
--frigate-card-active-color: var(--accent-color, orange);
--frigate-card-warning-color: var(--error-color, red);
--advanced-camera-card-active-color: var(--accent-color, orange);
--advanced-camera-card-warning-color: var(--error-color, red);
--frigate-card-text-color: var(--primary-text-color);
--frigate-card-divider-color: var(--divider-color);
--advanced-camera-card-text-color: var(--primary-text-color);
--advanced-camera-card-divider-color: var(--divider-color);
--frigate-card-control-background: var(--app-header-background-color);
--frigate-card-control-background-transparent: color-mix(
--advanced-camera-card-control-background: var(--app-header-background-color);
--advanced-camera-card-control-background-transparent: color-mix(
in oklab,
var(--frigate-card-control-background),
var(--advanced-camera-card-control-background),
transparent 60%
);
--frigate-card-control-foreground: var(--app-header-text-color);
--advanced-camera-card-control-foreground: var(--app-header-text-color);
/*********
* Buttons
*********/
// The color of buttons (in general, menu or otherwise).
--frigate-card-button-color: var(--frigate-card-control-foreground);
--advanced-camera-card-button-color: var(--advanced-camera-card-control-foreground);
// The color of button background "circles".
--frigate-card-button-background: var(--frigate-card-control-background-transparent);
--advanced-camera-card-button-background: var(
--advanced-camera-card-control-background-transparent
);
/******
* Menu
******/
// The color of an active icon in the menu.
--frigate-card-menu-button-active-color: var(--frigate-card-active-color);
--advanced-camera-card-menu-button-active-color: var(
--advanced-camera-card-active-color
);
// The color of an inactive icon in the menu.
--frigate-card-menu-button-inactive-color: var(--frigate-card-button-color);
--advanced-camera-card-menu-button-inactive-color: var(
--advanced-camera-card-button-color
);
// The color of a critical icon in the menu.
--frigate-card-menu-button-critical-color: var(
--advanced-camera-card-menu-button-critical-color: var(
--error-color,
var(--frigate-card-warning-color)
var(--advanced-camera-card-warning-color)
);
// The background color of the button "circles" in the menu.
--frigate-card-menu-button-background: color-mix(
--advanced-camera-card-menu-button-background: color-mix(
in oklab,
var(--frigate-card-menu-button-inactive-color),
var(--advanced-camera-card-menu-button-inactive-color),
transparent 60%
);
// The menu background color.
--frigate-card-menu-background: var(--frigate-card-control-background-transparent);
--frigate-card-menu-style-outside-background: var(--frigate-card-control-background);
--advanced-camera-card-menu-background: var(
--advanced-camera-card-control-background-transparent
);
--advanced-camera-card-menu-style-outside-background: var(
--advanced-camera-card-control-background
);
// May be overridden by the user to force a particular color.
--frigate-card-menu-override-background: unset;
--frigate-card-menu-override-button-inactive-color: unset;
--frigate-card-menu-override-button-background: unset;
--advanced-camera-card-menu-override-background: unset;
--advanced-camera-card-menu-override-button-inactive-color: unset;
--advanced-camera-card-menu-override-button-background: unset;
// Examples of precise theming for the menu:
// --frigate-card-menu-position-left-alignment-left-style-overlay-background: pink;
// --frigate-card-menu-position-left-background: purple;
// --frigate-card-menu-style-overlay-background: pink;
// --advanced-camera-card-menu-position-left-alignment-left-style-overlay-background: pink;
// --advanced-camera-card-menu-position-left-background: purple;
// --advanced-camera-card-menu-style-overlay-background: pink;
/************
* Status bar
************/
// May be overridden by the user to force a particular color.
--frigate-card-status-bar-override-background: unset;
--frigate-card-status-bar-override-color: unset;
--advanced-camera-card-status-bar-override-background: unset;
--advanced-camera-card-status-bar-override-color: unset;
// The color of items on the status bar.
--frigate-card-status-bar-color: var(--frigate-card-control-foreground);
--advanced-camera-card-status-bar-color: var(
--advanced-camera-card-control-foreground
);
// The background color of the outerlay above/below the card.
--frigate-card-status-bar-background: var(
--frigate-card-control-background-transparent
--advanced-camera-card-status-bar-background: var(
--advanced-camera-card-control-background-transparent
);
--frigate-card-status-bar-style-outside-background: var(
--frigate-card-control-background
--advanced-camera-card-status-bar-style-outside-background: var(
--advanced-camera-card-control-background
);
/************
* Thumbnails
************/
--frigate-card-thumbnail-icon-color: var(--frigate-card-foreground-primary);
--frigate-card-thumbnail-border-color: var(--frigate-card-foreground-primary);
--frigate-card-thumbnail-background: var(--frigate-card-background);
--frigate-card-thumbnail-icon-favorite-color: color-mix(
--advanced-camera-card-thumbnail-icon-color: var(
--advanced-camera-card-foreground-primary
);
--advanced-camera-card-thumbnail-border-color: var(
--advanced-camera-card-foreground-primary
);
--advanced-camera-card-thumbnail-background: var(--advanced-camera-card-background);
--advanced-camera-card-thumbnail-icon-favorite-color: color-mix(
in oklab,
gold,
transparent 25%
);
--frigate-card-thumbnail-text-color: var(--frigate-card-text-color);
--advanced-camera-card-thumbnail-text-color: var(--advanced-camera-card-text-color);
/**********
* Timeline
**********/
--frigate-card-timeline-text-color: var(--frigate-card-text-color);
--frigate-card-timeline-item-color: var(--frigate-card-foreground-primary);
--frigate-card-timeline-tool-color: var(--frigate-card-foreground-primary);
--frigate-card-timeline-background: var(--frigate-card-background);
--advanced-camera-card-timeline-text-color: var(--advanced-camera-card-text-color);
--advanced-camera-card-timeline-item-color: var(
--advanced-camera-card-foreground-primary
);
--advanced-camera-card-timeline-tool-color: var(
--advanced-camera-card-foreground-primary
);
--advanced-camera-card-timeline-background: var(--advanced-camera-card-background);
// style for the 'background' style of item (i.e. recordings).
--frigate-card-timeline-background-item-color: color-mix(
--advanced-camera-card-timeline-background-item-color: color-mix(
in oklab,
var(--frigate-card-timeline-item-color),
var(--advanced-camera-card-timeline-item-color),
transparent 90%
);
--frigate-card-timeline-divider-color: var(--frigate-card-divider-color);
--frigate-card-timeline-target-bar-color: var(--frigate-card-active-color);
--advanced-camera-card-timeline-divider-color: var(
--advanced-camera-card-divider-color
);
--advanced-camera-card-timeline-target-bar-color: var(
--advanced-camera-card-active-color
);
/*******************
* Loading Indicator
*******************/
--frigate-card-loading-background-color: var(
--frigate-card-control-background-transparent
--advanced-camera-card-loading-background-color: var(
--advanced-camera-card-control-background-transparent
);
--advanced-camera-card-loading-foreground-color: var(
--advanced-camera-card-control-foreground
);
--frigate-card-loading-foreground-color: var(--frigate-card-control-foreground);
/*********
* Message
*********/
--frigate-card-message-color: var(--frigate-card-text-color);
--frigate-card-message-background: var(--frigate-card-background);
--advanced-camera-card-message-color: var(--advanced-camera-card-text-color);
--advanced-camera-card-message-background: var(--advanced-camera-card-background);
--frigate-card-message-overlay-background: var(
--frigate-card-control-background-transparent
--advanced-camera-card-message-overlay-background: var(
--advanced-camera-card-control-background-transparent
);
--advanced-camera-card-message-overlay-color: var(
--advanced-camera-card-control-foreground
);
--frigate-card-message-overlay-color: var(--frigate-card-control-foreground);
}