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`