diff --git a/src/card.ts b/src/card.ts index 45af1757..086b9443 100644 --- a/src/card.ts +++ b/src/card.ts @@ -1494,10 +1494,15 @@ export class FrigateCard extends LitElement { outerStyle['padding-top'] = `${padding}%`; } + const outerClasses = { + container: true, + outer: true, + triggered: !!this._triggered && this._getConfig().view.scan.trigger_show_border, + } + const contentClasses = { 'frigate-card-contents': true, absolute: padding != null, - triggered: !!this._triggered && this._getConfig().view.scan.trigger_show_border, }; const actions = this._getMergedActions(); @@ -1518,7 +1523,7 @@ export class FrigateCard extends LitElement { @frigate-card:render=${() => this.requestUpdate()} > ${renderMenuAbove ? this._renderMenu() : ''} -
+
${this._cameras === undefined ? until( diff --git a/src/scss/card.scss b/src/scss/card.scss index 09f3509d..989b85f9 100644 --- a/src/scss/card.scss +++ b/src/scss/card.scss @@ -23,6 +23,20 @@ // boundary. border-radius: var(--ha-card-border-radius, 4px); } +.container.triggered { + @keyframes warning-pulse { + 0% { + border: solid 1px rgba(0,0,0,0); + } + 50% { + border: solid 1px var(--warning-color); + } + 100% { + border: solid 1px rgba(0,0,0,0); + } + } + animation: warning-pulse 5s infinite; +} .frigate-card-contents { width: inherit; @@ -42,20 +56,6 @@ // Hide scrollbar: IE and Edge -ms-overflow-style: none; } -.frigate-card-contents.triggered { - @keyframes warning-pulse { - 0% { - border: solid 1px rgba(0,0,0,0); - } - 50% { - border: solid 1px var(--warning-color); - } - 100% { - border: solid 1px rgba(0,0,0,0); - } - } - animation: warning-pulse 5s infinite; -} /* Hide scrollbar for Chrome, Safari and Opera */ .frigate-card-contents::-webkit-scrollbar { diff --git a/src/utils/ha/index.ts b/src/utils/ha/index.ts index d94acb15..567a4992 100644 --- a/src/utils/ha/index.ts +++ b/src/utils/ha/index.ts @@ -105,10 +105,10 @@ export function getHassDifferences( const differences: HassStateDifference[] = []; for (const entity of entities) { - const oldState = oldHass?.states[entity]; - const newState = newHass.states[entity]; + const oldState: HassEntity | undefined = oldHass?.states[entity]; + const newState: HassEntity | undefined = newHass.states[entity]; if ( - (options?.stateOnly && oldState?.state !== newState.state) || + (options?.stateOnly && oldState?.state !== newState?.state) || (!options?.stateOnly && oldState !== newState) ) { differences.push({