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/button.scss
+2 -2
View File
@@ -1,6 +1,6 @@
ha-icon-button {
color: var(--frigate-card-button-color);
background-color: var(--frigate-card-button-background);
color: var(--advanced-camera-card-button-color);
background-color: var(--advanced-camera-card-button-background);
border-radius: 50%;
padding: 0px;
src/scss/card.scss
+29 -25
View File
@@ -14,7 +14,7 @@
// keeping the background-color within the radius.
border-radius: var(--ha-card-border-radius, 4px);
height: var(--frigate-card-height);
height: var(--advanced-camera-card-height);
min-height: 100px;
// Ensure all clicks at the top level work.
@@ -23,16 +23,16 @@
// The standard HA header is 56 pixels tall, so that much off the top (header)
// and bottom (to maintain center), before doing the calculation of
// max-height. This matters on small mobile devices in landscape orientation.
--frigate-card-expand-max-height: calc((100vh - (2 * 56px)) * 0.85);
--frigate-card-expand-max-width: 85vw;
--frigate-card-expand-width: none;
--frigate-card-expand-height: none;
--frigate-card-expand-aspect-ratio: unset;
--advanced-camera-card-expand-max-height: calc((100vh - (2 * 56px)) * 0.85);
--advanced-camera-card-expand-max-width: 85vw;
--advanced-camera-card-expand-width: none;
--advanced-camera-card-expand-height: none;
--advanced-camera-card-expand-aspect-ratio: unset;
--frigate-card-height: auto;
--advanced-camera-card-height: auto;
}
frigate-card-loading {
advanced-camera-card-loading {
position: absolute;
inset: 0;
z-index: 1;
@@ -47,13 +47,13 @@ frigate-card-loading {
// If the "Kiosk Mode" (https://github.com/maykar/kiosk-mode) plugin is
// installed, the --kiosk-header-height variable will be authoritative
// instead.
// See: https://github.com/dermotduffy/frigate-hass-card/issues/1762
// See: https://github.com/dermotduffy/advanced-camera-card/issues/1762
height: calc(100vh - var(--kiosk-header-height, var(--header-height)));
}
:host([panel][casted]) {
// Card always extends to the full height in panel mode when casting (there is
// no header).
// See: https://github.com/dermotduffy/frigate-hass-card/issues/1746
// See: https://github.com/dermotduffy/advanced-camera-card/issues/1746
height: 100%;
}
@@ -143,11 +143,11 @@ ha-card {
}
:host(:fullscreen) div.main,
:host(:fullscreen) frigate-card-menu {
:host(:fullscreen) advanced-camera-card-menu {
@include fullscreen-no-rounded-corners;
}
:host(:-webkit-full-screen) div.main,
:host(:-webkit-full-screen) frigate-card-menu {
:host(:-webkit-full-screen) advanced-camera-card-menu {
@include fullscreen-no-rounded-corners;
}
@@ -159,11 +159,11 @@ web-dialog {
--dialog-padding: 0px;
--dialog-container-padding: 0px;
--dialog-max-height: var(--frigate-card-expand-max-height);
--dialog-max-width: var(--frigate-card-expand-max-width);
--dialog-max-height: var(--advanced-camera-card-expand-max-height);
--dialog-max-width: var(--advanced-camera-card-expand-max-width);
--dialog-width: var(--frigate-card-expand-width);
--dialog-height: var(--frigate-card-expand-height);
--dialog-width: var(--advanced-camera-card-expand-width);
--dialog-height: var(--advanced-camera-card-expand-height);
// Allow submenus to flow outside the edge of the dialog.
--dialog-overflow-x: visible;
@@ -174,7 +174,7 @@ web-dialog {
}
web-dialog::part(dialog) {
aspect-ratio: var(--frigate-card-expand-aspect-ratio);
aspect-ratio: var(--advanced-camera-card-expand-aspect-ratio);
// Fixes to render the dialog correctly in Safari.
border-radius: 0px;
@@ -203,16 +203,18 @@ web-dialog::part(dialog) {
* Menu hover styles
*******************/
frigate-card-menu {
advanced-camera-card-menu {
z-index: 2;
}
frigate-card-menu[data-style*='hover'] {
advanced-camera-card-menu[data-style*='hover'] {
transition: opacity 0.5s ease;
opacity: 0;
}
frigate-card-menu[data-style*='hover']:hover,
ha-card:hover > frigate-card-overlay > frigate-card-menu[data-style='hover-card'] {
advanced-camera-card-menu[data-style*='hover']:hover,
ha-card:hover
> advanced-camera-card-overlay
> advanced-camera-card-menu[data-style='hover-card'] {
opacity: 1;
}
@@ -220,15 +222,17 @@ ha-card:hover > frigate-card-overlay > frigate-card-menu[data-style='hover-card'
* Status bar hover styles
*************************/
frigate-card-status-bar {
advanced-camera-card-status-bar {
z-index: 1;
}
frigate-card-status-bar[data-style*='hover'] {
advanced-camera-card-status-bar[data-style*='hover'] {
transition: opacity 0.5s ease;
opacity: 0;
}
frigate-card-status-bar[data-style*='hover']:hover,
ha-card:hover > frigate-card-overlay > frigate-card-status-bar[data-style='hover-card'] {
advanced-camera-card-status-bar[data-style*='hover']:hover,
ha-card:hover
> advanced-camera-card-overlay
> advanced-camera-card-status-bar[data-style='hover-card'] {
opacity: 1;
}
src/scss/const.scss
+3 -3
View File
@@ -1,6 +1,6 @@
:host {
--frigate-card-thumbnail-size-max: 300px;
--frigate-card-thumbnail-details-width: calc(
var(--frigate-card-thumbnail-size) + 200px
--advanced-camera-card-thumbnail-size-max: 300px;
--advanced-camera-card-thumbnail-details-width: calc(
var(--advanced-camera-card-thumbnail-size) + 200px
);
}
src/scss/date-picker.scss
+1 -1
View File
@@ -42,7 +42,7 @@ input {
}
}
frigate-card-icon {
advanced-camera-card-icon {
display: block;
height: 100%;
width: 100%;
src/scss/drawer-inject.scss
+1 -1
View File
@@ -40,7 +40,7 @@
:host([location='right'][open]) #d {
transform: none;
box-shadow: var(--frigate-card-css-box-shadow, 0px 0px 25px 0px black);
box-shadow: var(--advanced-camera-card-css-box-shadow, 0px 0px 25px 0px black);
}
#ifs {
src/scss/drawer.scss
+7 -7
View File
@@ -36,9 +36,9 @@ div.control-surround {
visibility: visible;
}
frigate-card-icon.control {
color: var(--frigate-card-button-color);
background-color: var(--frigate-card-button-background);
advanced-camera-card-icon.control {
color: var(--advanced-camera-card-button-color);
background-color: var(--advanced-camera-card-button-background);
pointer-events: all;
--mdc-icon-size: #{$drawer-icon-size};
@@ -48,19 +48,19 @@ frigate-card-icon.control {
transition: opacity 0.5s ease;
}
:host([open]) frigate-card-icon.control,
frigate-card-icon.control:hover {
:host([open]) advanced-camera-card-icon.control,
advanced-camera-card-icon.control:hover {
// When the drawer is open or hovered make the button to close it more
// prominent.
opacity: 1;
}
:host([location='left']) frigate-card-icon.control {
:host([location='left']) advanced-camera-card-icon.control {
border-top-right-radius: $drawer-icon-size;
border-bottom-right-radius: $drawer-icon-size;
}
:host([location='right']) frigate-card-icon.control {
:host([location='right']) advanced-camera-card-icon.control {
border-top-left-radius: $drawer-icon-size;
border-bottom-left-radius: $drawer-icon-size;
}
src/scss/editor.scss
+1 -1
View File
@@ -70,7 +70,7 @@ div.upgrade span {
color: var(--secondary-text-color, 'black');
}
.submenu-header frigate-card-icon {
.submenu-header advanced-camera-card-icon {
margin-right: 15px;
}
src/scss/gallery-core.scss
+14 -10
View File
@@ -10,15 +10,18 @@
// Hide scrollbar: Firefox
scrollbar-width: none;
--frigate-card-gallery-gap: 3px;
--frigate-card-gallery-columns: 4;
--advanced-camera-card-gallery-gap: 3px;
--advanced-camera-card-gallery-columns: 4;
}
.grid {
display: grid;
grid-template-columns: repeat(var(--frigate-card-gallery-columns), minmax(0, 1fr));
grid-template-columns: repeat(
var(--advanced-camera-card-gallery-columns),
minmax(0, 1fr)
);
grid-auto-rows: min-content;
gap: var(--frigate-card-gallery-gap);
gap: var(--advanced-camera-card-gallery-gap);
}
// Hide scrollbar for Chrome, Safari and Opera
@@ -26,14 +29,14 @@
display: none;
}
frigate-card-thumbnail {
advanced-camera-card-thumbnail {
height: 100%;
max-height: var(--frigate-card-thumbnail-size);
max-height: var(--advanced-camera-card-thumbnail-size);
}
frigate-card-thumbnail:not([details]) {
advanced-camera-card-thumbnail:not([details]) {
width: 100%;
}
frigate-card-thumbnail.selected {
advanced-camera-card-thumbnail.selected {
border: 4px solid var(--accent-color);
// Because this is box-sizing: border-box, the border is effectively
// 'padding'. To get the curved borders to line up between the thumbnail and
@@ -41,11 +44,12 @@ frigate-card-thumbnail.selected {
// image border radius.
// Related: https://www.30secondsofcode.org/articles/s/css-nested-border-radius
border-radius: calc(
var(--frigate-card-css-border-radius, var(--ha-card-border-radius, 4px)) + 4px
var(--advanced-camera-card-css-border-radius, var(--ha-card-border-radius, 4px)) +
4px
);
}
frigate-card-progress-indicator.top {
advanced-camera-card-progress-indicator.top {
// The top loading progress indicator should span the whole width.
grid-column: 1/-1;
}
src/scss/gallery.scss
+1 -1
View File
@@ -4,7 +4,7 @@
display: block;
}
frigate-card-surround-basic {
advanced-camera-card-surround-basic {
// The gallery will grow indefinitely in the `unconstrained` aspect ratio
// modes, the surround height needs to be limited to something reasonable in
// order for the media filter to still display somewhere the user can
src/scss/key-assigner.scss
+2 -2
View File
@@ -12,11 +12,11 @@
}
:host([assigning]) ha-button.assign span,
:host([assigning]) ha-button.assign frigate-card-icon {
:host([assigning]) ha-button.assign advanced-camera-card-icon {
color: var(--warning-color);
}
frigate-card-icon {
advanced-camera-card-icon {
padding: 10px;
}
src/scss/live-carousel.scss
+1 -1
View File
@@ -14,7 +14,7 @@
// when the carousel is part of a media-grid. Without this next/prev controls
// will enlarge on hover, and the wheel-gestures plugin may block scrolling.
// See matching in viewer-carousel.scss .
:host([unselected]) frigate-card-carousel {
:host([unselected]) advanced-camera-card-carousel {
pointer-events: none;
}
src/scss/live-grid.scss
+6 -6
View File
@@ -2,19 +2,19 @@
@keyframes warning-pulse {
0% {
border: solid 2px var(--frigate-card-triggered-color-1, rgba(0, 0, 0, 0));
border: solid 2px var(--advanced-camera-card-triggered-color-1, rgba(0, 0, 0, 0));
}
50% {
border: solid 2px var(--frigate-card-triggered-color-2, var(--warning-color));
border: solid 2px var(--advanced-camera-card-triggered-color-2, var(--warning-color));
}
100% {
border: solid 2px var(--frigate-card-triggered-color-1, rgba(0, 0, 0, 0));
border: solid 2px var(--advanced-camera-card-triggered-color-1, rgba(0, 0, 0, 0));
}
}
frigate-card-live-carousel[triggered] {
advanced-camera-card-live-carousel[triggered] {
animation: warning-pulse 5s infinite;
}
frigate-card-live-carousel[selected] {
--frigate-card-triggered-color-1: var(--primary-color);
advanced-camera-card-live-carousel[selected] {
--advanced-camera-card-triggered-color-1: var(--primary-color);
}
src/scss/live-provider.scss
+1 -1
View File
@@ -11,7 +11,7 @@
display: none;
}
frigate-card-icon {
advanced-camera-card-icon {
position: absolute;
top: 10px;
right: 10px;
src/scss/loading.scss
+3 -3
View File
@@ -9,8 +9,8 @@
pointer-events: none;
background-color: var(--frigate-card-loading-background-color);
color: var(--frigate-card-loading-foreground-color);
background-color: var(--advanced-camera-card-loading-background-color);
color: var(--advanced-camera-card-loading-foreground-color);
transition: opacity 1.5s ease-in;
opacity: 1;
@@ -20,7 +20,7 @@
opacity: 0;
}
frigate-card-icon {
advanced-camera-card-icon {
margin-bottom: 20px;
height: 25%;
width: auto;
src/scss/media-filter.scss
+6 -6
View File
@@ -19,7 +19,7 @@
display: none;
}
frigate-card-select {
advanced-camera-card-select {
padding: 5px;
}
@@ -27,21 +27,21 @@ div.when {
display: inline-flex;
align-items: flex-end;
}
div.when frigate-card-select {
div.when advanced-camera-card-select {
flex: 1;
}
div.when frigate-card-date-picker {
div.when advanced-camera-card-date-picker {
// Visually line up the date-picker icon with the bottom of the select
// dropdown.
padding-bottom: 5px;
transition: width 0.5s ease-in-out;
}
div.when frigate-card-date-picker {
div.when advanced-camera-card-date-picker {
color: var(--secondary-color);
}
div.when frigate-card-date-picker.selected {
div.when advanced-camera-card-date-picker.selected {
color: var(--primary-color);
}
div.when frigate-card-date-picker.hidden {
div.when advanced-camera-card-date-picker.hidden {
width: 0px;
}
src/scss/media-grid.scss
+8 -8
View File
@@ -3,9 +3,9 @@
width: 100%;
height: 100%;
--frigate-card-grid-border-size: 3px;
--frigate-card-grid-column-size: 100%;
--frigate-card-grid-selected-width-factor: 2;
--advanced-camera-card-grid-border-size: 3px;
--advanced-camera-card-grid-column-size: 100%;
--advanced-camera-card-grid-selected-width-factor: 2;
// Allow the grid to scroll if necessary (e.g. fullscreen).
overflow: auto;
@@ -25,22 +25,22 @@
box-sizing: border-box;
border-radius: var(--ha-card-border-radius, 4px);
overflow: hidden;
width: var(--frigate-card-grid-column-size);
width: var(--advanced-camera-card-grid-column-size);
// Unselected items included a transparent border to act as the effective
// gutter between elements, and to ensure when the item is selected it does
// not change in size (even border-box sizing appears to allow size to change
// when the element has a non-fixed height).
border: var(--frigate-card-grid-border-size) solid transparent;
border: var(--advanced-camera-card-grid-border-size) solid transparent;
}
::slotted([selected]) {
border: var(--frigate-card-grid-border-size) solid var(--primary-color);
border: var(--advanced-camera-card-grid-border-size) solid var(--primary-color);
width: min(
100%,
calc(
var(--frigate-card-grid-selected-width-factor) *
var(--frigate-card-grid-column-size)
var(--advanced-camera-card-grid-selected-width-factor) *
var(--advanced-camera-card-grid-column-size)
)
);
src/scss/media-layout.scss
+7 -7
View File
@@ -1,14 +1,14 @@
@mixin media-layout {
object-fit: var(--frigate-card-media-layout-fit, contain);
object-position: var(--frigate-card-media-layout-position-x, 50%)
var(--frigate-card-media-layout-position-y, 50%);
object-fit: var(--advanced-camera-card-media-layout-fit, contain);
object-position: var(--advanced-camera-card-media-layout-position-x, 50%)
var(--advanced-camera-card-media-layout-position-y, 50%);
// This is supported on limited browsers:
// See: https://caniuse.com/?search=object-view-box
object-view-box: inset(
var(--frigate-card-media-layout-view-box-top, 0%)
var(--frigate-card-media-layout-view-box-right, 0%)
var(--frigate-card-media-layout-view-box-bottom, 0%)
var(--frigate-card-media-layout-view-box-left, 0%)
var(--advanced-camera-card-media-layout-view-box-top, 0%)
var(--advanced-camera-card-media-layout-view-box-right, 0%)
var(--advanced-camera-card-media-layout-view-box-bottom, 0%)
var(--advanced-camera-card-media-layout-view-box-left, 0%)
);
}
src/scss/menu.scss
+8 -8
View File
@@ -1,8 +1,8 @@
@use './button.scss';
:host {
--frigate-card-menu-button-size: 40px;
--mdc-icon-button-size: var(--frigate-card-menu-button-size);
--advanced-camera-card-menu-button-size: 40px;
--mdc-icon-button-size: var(--advanced-camera-card-menu-button-size);
--mdc-icon-size: calc(var(--mdc-icon-button-size) / 2);
pointer-events: auto;
@@ -102,8 +102,8 @@ div.opposing {
****************************/
:host(:not([data-style='outside'])[data-position='bottom']) div {
// If the menu has more content that allows, "wrap upwards" to keep the
// Frigate button in the same place.
// If the menu has more content that allows, "wrap upwards" to keep the Iris
// button in the same place.
flex-wrap: wrap-reverse;
}
@@ -139,15 +139,15 @@ div.opposing {
// permanent menu buttons use the menu background color instead of the button
// background color.
:host([data-style='hidden']:not([expanded])) ha-icon-button {
background: var(--frigate-card-menu-background);
background: var(--advanced-camera-card-menu-background);
}
// Icons in the menu are expected to follow Frigate card theming unless they are
// Icons in the menu are expected to follow Advanced Camera Card theming unless they are
// active (in which case we want to take advantage of the whatever styling is
// appropriate, e.g. light icon partially lit).
:host ha-icon-button {
--state-unavailable-color: var(--frigate-card-button-color);
--state-inactive-color: var(--frigate-card-button-color);
--state-unavailable-color: var(--advanced-camera-card-button-color);
--state-inactive-color: var(--advanced-camera-card-button-color);
}
// Further theme related styling is dynamically applied by `menu.ts`, see
src/scss/message.scss
+7 -7
View File
@@ -15,16 +15,16 @@
height: 100%;
width: 100%;
background: var(--frigate-card-message-background);
color: var(--frigate-card-message-color);
background: var(--advanced-camera-card-message-background);
color: var(--advanced-camera-card-message-color);
}
:host([overlay]) {
position: absolute;
inset: 5%;
background: var(--frigate-card-message-overlay-background);
color: var(--frigate-card-message-overlay-color);
background: var(--advanced-camera-card-message-overlay-background);
color: var(--advanced-camera-card-message-overlay-color);
}
div.wrapper {
@@ -65,16 +65,16 @@ a {
}
:host(:not([overlay])) a {
color: var(--frigate-card-message-color);
color: var(--advanced-camera-card-message-color);
}
:host([overlay]) a {
color: var(--frigate-card-message-overlay-color);
color: var(--advanced-camera-card-message-overlay-color);
}
.message pre {
margin-top: 20px;
overflow-x: auto;
border: 1px dotted var(--frigate-card-divider-color);
border: 1px dotted var(--advanced-camera-card-divider-color);
padding: 1em;
}
src/scss/next-previous-control.scss
+27 -17
View File
@@ -1,11 +1,13 @@
@use './button.scss';
:host {
--frigate-card-next-prev-size: 48px;
--frigate-card-next-prev-size-hover: calc(var(--frigate-card-next-prev-size) * 2);
--frigate-card-left-position: 45px;
--frigate-card-right-position: 45px;
--mdc-icon-button-size: var(--frigate-card-next-prev-size);
--advanced-camera-card-next-prev-size: 48px;
--advanced-camera-card-next-prev-size-hover: calc(
var(--advanced-camera-card-next-prev-size) * 2
);
--advanced-camera-card-left-position: 45px;
--advanced-camera-card-right-position: 45px;
--mdc-icon-button-size: var(--advanced-camera-card-next-prev-size);
--mdc-icon-size: calc(var(--mdc-icon-button-size) / 2);
}
@@ -15,41 +17,49 @@
overflow: hidden;
}
.controls.left {
left: var(--frigate-card-left-position);
left: var(--advanced-camera-card-left-position);
}
.controls.right {
right: var(--frigate-card-right-position);
right: var(--advanced-camera-card-right-position);
}
.controls.icons {
top: calc(50% - (var(--frigate-card-next-prev-size) / 2));
top: calc(50% - (var(--advanced-camera-card-next-prev-size) / 2));
}
.controls.thumbnails {
border-radius: 50%;
height: var(--frigate-card-next-prev-size);
top: calc(50% - (var(--frigate-card-next-prev-size) / 2));
box-shadow: var(--frigate-card-css-box-shadow, 0px 0px 20px 5px black);
height: var(--advanced-camera-card-next-prev-size);
top: calc(50% - (var(--advanced-camera-card-next-prev-size) / 2));
box-shadow: var(--advanced-camera-card-css-box-shadow, 0px 0px 20px 5px black);
transition: all 0.2s ease-out;
opacity: 0.8;
aspect-ratio: 1 / 1;
}
.controls.thumbnails:hover {
opacity: 1 !important;
height: var(--frigate-card-next-prev-size-hover);
top: calc(50% - (var(--frigate-card-next-prev-size-hover) / 2));
height: var(--advanced-camera-card-next-prev-size-hover);
top: calc(50% - (var(--advanced-camera-card-next-prev-size-hover) / 2));
}
.controls.left.thumbnails:hover {
left: calc(
var(--frigate-card-left-position) -
(var(--frigate-card-next-prev-size-hover) - var(--frigate-card-next-prev-size)) / 2
var(--advanced-camera-card-left-position) -
(
var(--advanced-camera-card-next-prev-size-hover) - var(
--advanced-camera-card-next-prev-size
)
) / 2
);
}
.controls.right.thumbnails:hover {
right: calc(
var(--frigate-card-right-position) -
(var(--frigate-card-next-prev-size-hover) - var(--frigate-card-next-prev-size)) / 2
var(--advanced-camera-card-right-position) -
(
var(--advanced-camera-card-next-prev-size-hover) - var(
--advanced-camera-card-next-prev-size
)
) / 2
);
}
src/scss/ptz.scss
+10 -10
View File
@@ -6,7 +6,7 @@
width: fit-content;
height: fit-content;
--frigate-card-ptz-icon-size: 24px;
--advanced-camera-card-ptz-icon-size: 24px;
}
:host([data-position$='-left']) {
@@ -47,10 +47,10 @@
}
:host([data-orientation='vertical']) .ptz div {
width: calc(var(--frigate-card-ptz-icon-size) * 3);
width: calc(var(--advanced-camera-card-ptz-icon-size) * 3);
}
:host([data-orientation='horizontal']) .ptz div {
height: calc(var(--frigate-card-ptz-icon-size) * 3);
height: calc(var(--advanced-camera-card-ptz-icon-size) * 3);
}
.ptz-move,
@@ -61,19 +61,19 @@
}
.ptz-move {
height: calc(var(--frigate-card-ptz-icon-size) * 3);
width: calc(var(--frigate-card-ptz-icon-size) * 3);
height: calc(var(--advanced-camera-card-ptz-icon-size) * 3);
width: calc(var(--advanced-camera-card-ptz-icon-size) * 3);
border-radius: 50%;
}
:host([data-orientation='horizontal']) .ptz .ptz-zoom,
:host([data-orientation='horizontal']) .ptz .ptz-home {
width: calc(var(--frigate-card-ptz-icon-size) * 1.5);
width: calc(var(--advanced-camera-card-ptz-icon-size) * 1.5);
}
:host([data-orientation='vertical']) .ptz .ptz-zoom,
:host([data-orientation='vertical']) .ptz .ptz-home {
height: calc(var(--frigate-card-ptz-icon-size) * 1.5);
height: calc(var(--advanced-camera-card-ptz-icon-size) * 1.5);
}
.ptz-zoom,
@@ -84,11 +84,11 @@
/***********
* PTZ Icons
***********/
frigate-card-icon {
advanced-camera-card-icon {
position: absolute;
--mdc-icon-size: var(--frigate-card-ptz-icon-size);
--mdc-icon-size: var(--advanced-camera-card-ptz-icon-size);
}
frigate-card-icon:not(.disabled) {
advanced-camera-card-icon:not(.disabled) {
cursor: pointer;
}
.disabled {
src/scss/status.scss
+3 -3
View File
@@ -1,7 +1,7 @@
@use './button.scss';
:host {
--mdc-icon-size: calc(var(--frigate-card-status-bar-height) / 2);
--mdc-icon-size: calc(var(--advanced-camera-card-status-bar-height) / 2);
display: block;
width: 100%;
@@ -41,7 +41,7 @@
overflow: hidden;
width: 100%;
height: var(--frigate-card-status-bar-height);
height: var(--advanced-camera-card-status-bar-height);
}
.item {
@@ -67,7 +67,7 @@
}
img.item,
frigate-card-icon.item {
advanced-camera-card-icon.item {
display: block;
// To ensure images render somewhat reasonably looking their height is kept to
src/scss/submenu.scss
+5 -5
View File
@@ -9,12 +9,12 @@ mwc-list-item {
}
ha-icon-button {
// The main submenu icon is expected to follow Frigate card theming unless it
// The main submenu icon is expected to follow Advanced Camera Card theming unless it
// is are active (in which case we want to take advantage of the whatever
// styling is appropriate, e.g. light icon partially lit).
--state-unavailable-color: var(--frigate-card-button-color);
--state-inactive-color: var(--frigate-card-button-color);
--state-unavailable-color: var(--advanced-camera-card-button-color);
--state-inactive-color: var(--advanced-camera-card-button-color);
color: var(--frigate-card-menu-button-inactive-color);
background-color: var(--frigate-card-menu-button-background);
color: var(--advanced-camera-card-menu-button-inactive-color);
background-color: var(--advanced-camera-card-menu-button-background);
}
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);
}
src/scss/themes/traditional.scss
+26 -26
View File
@@ -1,10 +1,10 @@
@mixin background-gradient($var, $angle) {
#{$var}: linear-gradient(
$angle,
var(--frigate-card-menu-background),
var(--frigate-card-menu-background),
var(--frigate-card-menu-background),
color-mix(in oklab, var(--frigate-card-menu-background), transparent 100%)
var(--advanced-camera-card-menu-background),
var(--advanced-camera-card-menu-background),
var(--advanced-camera-card-menu-background),
color-mix(in oklab, var(--advanced-camera-card-menu-background), transparent 100%)
);
}
@@ -13,59 +13,59 @@
* General
*********/
--frigate-card-control-background: black;
--advanced-camera-card-control-background: black;
/******
* Menu
******/
--frigate-card-menu-button-active-color: var(--primary-color, white);
--frigate-card-menu-button-background: rgba(0, 0, 0, 0.6);
--advanced-camera-card-menu-button-active-color: var(--primary-color, white);
--advanced-camera-card-menu-button-background: rgba(0, 0, 0, 0.6);
@include background-gradient(
'--frigate-card-menu-position-left-alignment-top-background',
'--advanced-camera-card-menu-position-left-alignment-top-background',
180deg
);
@include background-gradient(
'--frigate-card-menu-position-left-alignment-bottom-background',
'--advanced-camera-card-menu-position-left-alignment-bottom-background',
0deg
);
@include background-gradient(
'--frigate-card-menu-position-right-alignment-top-background',
'--advanced-camera-card-menu-position-right-alignment-top-background',
180deg
);
@include background-gradient(
'--frigate-card-menu-position-right-alignment-bottom-background',
'--advanced-camera-card-menu-position-right-alignment-bottom-background',
0deg
);
@include background-gradient(
'--frigate-card-menu-position-top-alignment-left-background',
'--advanced-camera-card-menu-position-top-alignment-left-background',
90deg
);
@include background-gradient(
'--frigate-card-menu-position-top-alignment-right-background',
'--advanced-camera-card-menu-position-top-alignment-right-background',
270deg
);
@include background-gradient(
'--frigate-card-menu-position-bottom-alignment-left-background',
'--advanced-camera-card-menu-position-bottom-alignment-left-background',
90deg
);
@include background-gradient(
'--frigate-card-menu-position-bottom-alignment-right-background',
'--advanced-camera-card-menu-position-bottom-alignment-right-background',
270deg
);
--frigate-card-menu-position-top-alignment-left-style-outside-background: var(
--advanced-camera-card-menu-position-top-alignment-left-style-outside-background: var(
--secondary-background-color
);
--frigate-card-menu-position-top-alignment-right-style-outside-background: var(
--advanced-camera-card-menu-position-top-alignment-right-style-outside-background: var(
--secondary-background-color
);
--frigate-card-menu-position-bottom-alignment-left-style-outside-background: var(
--advanced-camera-card-menu-position-bottom-alignment-left-style-outside-background: var(
--secondary-background-color
);
--frigate-card-menu-position-bottom-alignment-right-style-outside-background: var(
--advanced-camera-card-menu-position-bottom-alignment-right-style-outside-background: var(
--secondary-background-color
);
@@ -73,27 +73,27 @@
* Status bar
************/
--frigate-card-status-bar-color: white;
--advanced-camera-card-status-bar-color: white;
@include background-gradient(
'--frigate-card-status-bar-position-top-background',
'--advanced-camera-card-status-bar-position-top-background',
90deg
);
@include background-gradient(
'--frigate-card-status-bar-position-bottom-background',
'--advanced-camera-card-status-bar-position-bottom-background',
90deg
);
--frigate-card-status-bar-position-top-style-outside-background: var(
--advanced-camera-card-status-bar-position-top-style-outside-background: var(
--secondary-background-color
);
--frigate-card-status-bar-position-bottom-style-outside-background: var(
--advanced-camera-card-status-bar-position-bottom-style-outside-background: var(
--secondary-background-color
);
--frigate-card-status-bar-position-top-style-outside-color: var(
--advanced-camera-card-status-bar-position-top-style-outside-color: var(
--secondary-text-color
);
--frigate-card-status-bar-position-bottom-style-outside-color: var(
--advanced-camera-card-status-bar-position-bottom-style-outside-color: var(
--secondary-text-color
);
}
src/scss/thumbnail-carousel.scss
+8 -8
View File
@@ -5,9 +5,9 @@
width: 100%;
height: 100%;
background-color: var(--frigate-card-thumbnail-background);
background-color: var(--advanced-camera-card-thumbnail-background);
--frigate-card-carousel-thumbnail-opacity: 1;
--advanced-camera-card-carousel-thumbnail-opacity: 1;
}
:host([direction='vertical']) {
@@ -21,19 +21,19 @@
.embla__slide {
flex: 0 0 auto;
opacity: var(--frigate-card-carousel-thumbnail-opacity);
opacity: var(--advanced-camera-card-carousel-thumbnail-opacity);
}
.embla__slide.slide-selected {
opacity: 1;
}
frigate-card-thumbnail {
width: var(--frigate-card-thumbnail-size);
height: var(--frigate-card-thumbnail-size);
advanced-camera-card-thumbnail {
width: var(--advanced-camera-card-thumbnail-size);
height: var(--advanced-camera-card-thumbnail-size);
// Do not let thumbnails span beyond the width of the carousel.
max-width: 100%;
}
frigate-card-thumbnail[details] {
width: var(--frigate-card-thumbnail-details-width);
advanced-camera-card-thumbnail[details] {
width: var(--advanced-camera-card-thumbnail-details-width);
}
src/scss/thumbnail-details.scss
+1 -1
View File
@@ -5,7 +5,7 @@
width: 100%;
margin-left: 5px;
padding: 5px;
color: var(--frigate-card-thumbnail-text-color);
color: var(--advanced-camera-card-thumbnail-text-color);
overflow: hidden;
column-gap: 5%;
}
src/scss/thumbnail-feature-text.scss
+4 -4
View File
@@ -1,14 +1,14 @@
:host {
display: block;
max-width: var(--frigate-card-thumbnail-size);
max-height: var(--frigate-card-thumbnail-size);
max-width: var(--advanced-camera-card-thumbnail-size);
max-height: var(--advanced-camera-card-thumbnail-size);
aspect-ratio: 1 / 1;
border: 1px solid var(--secondary-color);
background-color: var(--secondary-background-color);
border-radius: var(
--frigate-card-css-border-radius,
--advanced-camera-card-css-border-radius,
var(--ha-card-border-radius, 4px)
);
@@ -21,7 +21,7 @@
position: relative;
}
frigate-card-icon.background {
advanced-camera-card-icon.background {
display: block;
width: 100%;
height: 100%;
src/scss/thumbnail-feature-thumbnail.scss
+4 -4
View File
@@ -14,7 +14,7 @@ img {
}
img,
frigate-card-icon {
advanced-camera-card-icon {
// Safari will occasionally not load thumbnails correctly with display block.
display: inline-block;
@@ -23,11 +23,11 @@ frigate-card-icon {
margin: 0;
border-radius: var(
--frigate-card-css-border-radius,
--advanced-camera-card-css-border-radius,
var(--ha-card-border-radius, 4px)
);
width: var(--frigate-card-thumbnail-size);
width: var(--advanced-camera-card-thumbnail-size);
max-height: 100%;
aspect-ratio: 1 / 1;
@@ -37,7 +37,7 @@ frigate-card-icon {
object-fit: cover;
}
frigate-card-icon {
advanced-camera-card-icon {
--mdc-icon-size: 50%;
color: var(--primary-text-color);
display: flex;
src/scss/thumbnail.scss
+13 -13
View File
@@ -15,26 +15,26 @@
}
:host([details]) {
border: 1px solid var(--frigate-card-thumbnail-border-color);
border: 1px solid var(--advanced-camera-card-thumbnail-border-color);
border-radius: var(
--frigate-card-css-border-radius,
--advanced-camera-card-css-border-radius,
var(--ha-card-border-radius, 4px)
);
padding: 2px;
// When details are enabled, use a background color so that the details have
// contrast with the background.
background-color: var(--frigate-card-thumbnail-background);
background-color: var(--advanced-camera-card-thumbnail-background);
}
:host(:hover) {
transform: scale(1.04);
}
frigate-card-icon {
advanced-camera-card-icon {
position: absolute;
border-radius: 50%;
color: var(--frigate-card-thumbnail-icon-color);
color: var(--advanced-camera-card-thumbnail-icon-color);
cursor: pointer;
@@ -42,29 +42,29 @@ frigate-card-icon {
opacity 0.2s ease-in-out,
color 0.2s ease-in-out;
}
frigate-card-icon:hover {
advanced-camera-card-icon:hover {
opacity: 1;
}
frigate-card-icon.star {
advanced-camera-card-icon.star {
top: 3px;
left: 3px;
}
frigate-card-icon.star.starred {
color: var(--frigate-card-thumbnail-icon-favorite-color);
advanced-camera-card-icon.star.starred {
color: var(--advanced-camera-card-thumbnail-icon-favorite-color);
}
frigate-card-icon.timeline {
advanced-camera-card-icon.timeline {
top: 3px;
right: 3px;
}
frigate-card-icon.download {
advanced-camera-card-icon.download {
right: 3px;
bottom: 3px;
}
frigate-card-thumbnail-details-event,
frigate-card-thumbnail-details-recording {
advanced-camera-card-thumbnail-details-event,
advanced-camera-card-thumbnail-details-recording {
flex: 1;
}
src/scss/timeline-core.scss
+28 -28
View File
@@ -11,7 +11,7 @@
// So that absolute sidedrawer is relative to this host.
position: relative;
background-color: var(--frigate-card-timeline-background);
background-color: var(--advanced-camera-card-timeline-background);
}
:host(:not([mini])) {
@@ -19,12 +19,12 @@
height: 100%;
}
frigate-card-thumbnail {
height: var(--frigate-card-thumbnail-size);
width: var(--frigate-card-thumbnail-size);
advanced-camera-card-thumbnail {
height: var(--advanced-camera-card-thumbnail-size);
width: var(--advanced-camera-card-thumbnail-size);
}
frigate-card-thumbnail[details] {
width: var(--frigate-card-thumbnail-details-width);
advanced-camera-card-thumbnail[details] {
width: var(--advanced-camera-card-thumbnail-details-width);
}
div.timeline {
@@ -32,7 +32,7 @@ div.timeline {
}
.vis-text {
color: var(--frigate-card-timeline-text-color) !important;
color: var(--advanced-camera-card-timeline-text-color) !important;
}
.vis-timeline {
@@ -41,7 +41,7 @@ div.timeline {
.vis-labelset .vis-label {
// Group labels.
color: var(--frigate-card-timeline-text-color);
color: var(--advanced-camera-card-timeline-text-color);
}
:host([ribbon]:not([groups])) .vis-item:not(.vis-background) {
@@ -55,10 +55,10 @@ div.timeline {
height: 6px;
}
.vis-item {
border-color: var(--frigate-card-timeline-item-color);
border-color: var(--advanced-camera-card-timeline-item-color);
background: none;
color: var(--frigate-card-timeline-text-color);
background-color: var(--frigate-card-timeline-item-color);
color: var(--advanced-camera-card-timeline-text-color);
background-color: var(--advanced-camera-card-timeline-item-color);
transition:
background-color ease-in-out 1s,
@@ -66,15 +66,15 @@ div.timeline {
box-shadow ease-in-out 1s;
}
.vis-item.vis-selected {
border-color: var(--frigate-card-active-color);
background-color: var(--frigate-card-active-color);
border-color: var(--advanced-camera-card-active-color);
background-color: var(--advanced-camera-card-active-color);
box-shadow: var(
--frigate-card-css-box-shadow,
0px 0px 5px 1px var(--frigate-card-active-color)
--advanced-camera-card-css-box-shadow,
0px 0px 5px 1px var(--advanced-camera-card-active-color)
);
}
.vis-item.vis-background {
background-color: var(--frigate-card-timeline-background-item-color);
background-color: var(--advanced-camera-card-timeline-background-item-color);
}
// If there are no timeline groups shown (e.g. mini mode with a single camera),
@@ -106,19 +106,19 @@ div.timeline {
.vis-item.vis-cluster {
border-style: dotted;
color: var(--frigate-card-timeline-text-color);
background-color: var(--frigate-card-timeline-background);
color: var(--advanced-camera-card-timeline-text-color);
background-color: var(--advanced-camera-card-timeline-background);
box-shadow: var(
--frigate-card-css-box-shadow,
0px 0px 5px 1px var(--frigate-card-timeline-item-color)
--advanced-camera-card-css-box-shadow,
0px 0px 5px 1px var(--advanced-camera-card-timeline-item-color)
);
}
.vis-item.vis-range {
border-radius: var(--frigate-card-css-border-radius, unset);
border-radius: var(--advanced-camera-card-css-border-radius, unset);
}
.vis-time-axis .vis-grid.vis-minor {
border-color: var(--frigate-card-timeline-divider-color);
border-color: var(--advanced-camera-card-timeline-divider-color);
}
// Give an indication that the user can interact with the axes.
@@ -129,13 +129,13 @@ div.timeline {
:host([recordings]) .vis-text.vis-minor:hover {
background-color: color-mix(
in oklab,
var(--frigate-card-timeline-text-color),
var(--advanced-camera-card-timeline-text-color),
transparent 80%
);
}
.vis-time-axis .vis-grid.vis-major {
border-color: var(--frigate-card-timeline-divider-color);
border-color: var(--advanced-camera-card-timeline-divider-color);
}
.vis-label {
@@ -156,7 +156,7 @@ div.vis-tooltip {
}
.target_bar {
background-color: var(--frigate-card-timeline-target-bar-color);
background-color: var(--advanced-camera-card-timeline-target-bar-color);
width: 2px;
z-index: 20;
@@ -165,8 +165,8 @@ div.vis-tooltip {
pointer-events: none;
}
.target_bar .vis-custom-time-marker {
background-color: var(--frigate-card-timeline-background);
color: var(--frigate-card-timeline-text-color);
background-color: var(--advanced-camera-card-timeline-background);
color: var(--advanced-camera-card-timeline-text-color);
bottom: 0px;
top: unset;
}
@@ -186,7 +186,7 @@ div.vis-tooltip {
position: absolute;
right: 0px;
bottom: 0px;
color: var(--frigate-card-timeline-tool-color);
color: var(--advanced-camera-card-timeline-tool-color);
z-index: 10;
}
.timeline-tools * {
src/scss/viewer-carousel.scss
+2 -2
View File
@@ -10,12 +10,12 @@
// when the carousel is part of a media-grid. Without this next/prev controls
// will enlarge on hover, and the wheel-gestures plugin may block scrolling.
// See matching in live-carousel.scss .
:host([unselected]) frigate-card-carousel,
:host([unselected]) advanced-camera-card-carousel,
:host([unselected]) .seek-warning {
pointer-events: none;
}
:host([unseekable]) frigate-card-carousel {
:host([unseekable]) advanced-camera-card-carousel {
filter: brightness(50%);
}
:host([unseekable]) .seek-warning {
src/scss/viewer-provider.scss
+2 -2
View File
@@ -9,7 +9,7 @@
img,
video,
frigate-card-ha-hls-player {
advanced-camera-card-ha-hls-player {
display: block;
width: 100%;
height: 100%;
@@ -17,7 +17,7 @@ frigate-card-ha-hls-player {
@include media-layout.media-layout();
}
frigate-card-progress-indicator {
advanced-camera-card-progress-indicator {
padding: 30px;
box-sizing: border-box;
}
src/scss/viewer.scss
+1 -1
View File
@@ -6,7 +6,7 @@
gap: 5px;
}
frigate-card-viewer-carousel {
advanced-camera-card-viewer-carousel {
flex: 1;
min-height: 0;
}