diff --git a/README.md b/README.md index 0530a97e..48f2561d 100644 --- a/README.md +++ b/README.md @@ -1202,6 +1202,37 @@ elements: +### Using `card-mod` to style the card + +This card allows the use of +[card-mod](https://github.com/thomasloven/lovelace-card-mod) to style arbitrary +card contents. `card-mod` can be complex to use and relies on the underlying +internal DOM structure to style elements -- as such, while its use is possible +it's not officially supported and no attempt is made to preserve backwards +compatability of the internal DOM between any versions. It'll look good, but you're on your own! + +
+ Expand: Use card-mod to style a Picture elements label + +This example changes the color and removes the padding around a [Picture +Elements state +label](https://www.home-assistant.io/lovelace/picture-elements/#state-label). + +```yaml +[...] +card_mod: + style: + frigate-card-elements $: + hui-state-label-element $: | + div { + padding: 0px !important; + color: blue; + } +``` +
+ + + ## Card Refreshes Four sets of flags govern when the card will automatically refresh in the diff --git a/src/card.ts b/src/card.ts index dc77f99a..15709ce0 100644 --- a/src/card.ts +++ b/src/card.ts @@ -130,11 +130,15 @@ export class FrigateCard extends LitElement { @property({ attribute: false }) protected _hass?: HomeAssistant & ExtendedHomeAssistant; + // The main base configuration object. For most usecases use getConfig() to + // get the correct configuration (which will return overrides as appropriate). + // This variable must be called `_config` or `config` to be compatible with + // card-mod. @state() - public _baseConfig!: FrigateCardConfig; + protected _config!: FrigateCardConfig; @state() - public _overriddenConfig?: FrigateCardConfig; + protected _overriddenConfig?: FrigateCardConfig; @property({ attribute: false }) protected _view?: View; @@ -231,8 +235,8 @@ export class FrigateCard extends LitElement { }; const overriddenConfig = getOverriddenConfig( - this._baseConfig, - this._baseConfig.overrides, + this._config, + this._config.overrides, this._conditionState, ) as FrigateCardConfig; @@ -598,7 +602,7 @@ export class FrigateCard extends LitElement { getLovelace().setEditMode(true); } - this._baseConfig = config; + this._config = config; this._cameras = undefined; this._view = undefined; @@ -610,7 +614,7 @@ export class FrigateCard extends LitElement { * @returns A FrigateCardConfig. */ protected _getConfig(): FrigateCardConfig { - return this._overriddenConfig || this._baseConfig; + return this._overriddenConfig || this._config; } protected _changeView(args?: { view?: View; resetMessage?: boolean }): void { @@ -1229,15 +1233,15 @@ export class FrigateCard extends LitElement { // Note: Subtle difference in condition below vs the other views in order // to always render the live view for live.preload mode. - // Note: uses the baseConfig rather than the - // overriden config, as it does it's own overriding as part of the - // camera carousel. + // Note: uses the underlying _config rather than the + // overriden config (via getConfig), as it does it's own overriding as + // part of the camera carousel. this._getConfig().live.preload || (!this._message && this._view.is('live')) ? html`