From 7439fe6ec0428ee7e5ef41c7f8c2d62f90516d96 Mon Sep 17 00:00:00 2001 From: Bartosz Dokurno Date: Mon, 16 Oct 2023 16:27:10 +0200 Subject: [PATCH] Improve custom CSS support (#227) --- README.md | 29 +++++++++++++++++++++++++++++ src/data.ts | 10 +++++----- src/events-praser.ts | 2 +- src/meteoalarm-card.ts | 5 +---- src/predefined-cards.ts | 4 ++-- src/styles.ts | 31 +++++++++++++++++++++++++++++++ src/types.ts | 2 +- 7 files changed, 70 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 044d140..ea71ad3 100644 --- a/README.md +++ b/README.md @@ -132,6 +132,35 @@ Expect Meteoalarm this card supports many other integrations: [weatheralerts]: https://github.com/custom-components/weatheralerts [weatheralerts-direct]: https://www.weather.gov +## Customizing the Card's Appearance + +You can customize card appearance using provided CSS variables and [card-mod](https://github.com/thomasloven/lovelace-card-mod). For example: + +```yaml +type: custom:meteoalarm-card +entities: + entity: binary_sensor.meteoalarm +integration: meteoalarm +style: | + ha-card { + --inactive-background-color: blue; + } +``` + +Which produces result: + +![result](https://i.imgur.com/D0hZ86G.png) + + +Below are the available CSS variables that you can modify: + +- `--text-color`: The text color of inactive card. +- `--text-color-active`: The text color for card with active warnings. +- `--red-level-color`: The background color for red level alerts. +- `--orange-level-background-color`: The background color for orange level alerts. +- `--yellow-level-background-color`: The background color for yellow-level alerts. +- `--inactive-background-color`: This variable defines the background color when there are no warnings active. + ## Contributing Want to contribute to the project? diff --git a/src/data.ts b/src/data.ts index 2d38067..7f839bf 100644 --- a/src/data.ts +++ b/src/data.ts @@ -20,7 +20,7 @@ export class MeteoalarmLevelInfo { constructor( public type: MeteoalarmLevelType, public fullName: string, - public color: string, + public cssClass: string, ) {} get translationKey(): string { @@ -79,10 +79,10 @@ export class MeteoalarmData { static get levels(): MeteoalarmLevelInfo[] { return [ - new MeteoalarmLevelInfo(MeteoalarmLevelType.Red, 'Red', '#db4437'), - new MeteoalarmLevelInfo(MeteoalarmLevelType.Orange, 'Orange', '#EE5A24'), - new MeteoalarmLevelInfo(MeteoalarmLevelType.Yellow, 'Yellow', '#ff9800'), - new MeteoalarmLevelInfo(MeteoalarmLevelType.None, 'None', 'inherit'), + new MeteoalarmLevelInfo(MeteoalarmLevelType.Red, 'Red', 'event-red'), + new MeteoalarmLevelInfo(MeteoalarmLevelType.Orange, 'Orange', 'event-orange'), + new MeteoalarmLevelInfo(MeteoalarmLevelType.Yellow, 'Yellow', 'event-yellow'), + new MeteoalarmLevelInfo(MeteoalarmLevelType.None, 'None', 'event-none'), ]; } diff --git a/src/events-praser.ts b/src/events-praser.ts index d53cf50..7df7ab5 100644 --- a/src/events-praser.ts +++ b/src/events-praser.ts @@ -64,7 +64,7 @@ class EventsParser { isActive: true, entity: alert._entity!, icon: event.icon, - color: level.color, + cssClass: level.cssClass, headlines: headlines, caption: caption, captionIcon: captionIcon, diff --git a/src/meteoalarm-card.ts b/src/meteoalarm-card.ts index c3365c9..d2ebd50 100644 --- a/src/meteoalarm-card.ts +++ b/src/meteoalarm-card.ts @@ -322,10 +322,7 @@ export class MeteoalarmCard extends LitElement { ${events.map( (event) => html`
diff --git a/src/predefined-cards.ts b/src/predefined-cards.ts index d8ebcb9..11f122f 100644 --- a/src/predefined-cards.ts +++ b/src/predefined-cards.ts @@ -9,7 +9,7 @@ export class PredefinedCards { isActive: true, entity: undefined, icon: 'cloud-question', - color: MeteoalarmData.getLevel(MeteoalarmLevelType.None).color, + cssClass: MeteoalarmData.getLevel(MeteoalarmLevelType.None).cssClass, headlines: [localize('common.unavailable.long'), localize('common.unavailable.short')], }; } @@ -19,7 +19,7 @@ export class PredefinedCards { isActive: false, entity: entity, icon: 'shield-outline', - color: MeteoalarmData.getLevel(MeteoalarmLevelType.None).color, + cssClass: MeteoalarmData.getLevel(MeteoalarmLevelType.None).cssClass, headlines: [localize('events.no_warnings')], }; } diff --git a/src/styles.ts b/src/styles.ts index 39abb17..199a488 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -5,6 +5,14 @@ export default css` display: flex; flex: 1; flex-direction: column; + + --text-color: inherit; + --text-color-active: white; + + --red-level-color: var(---error-color, #db4437); + --orange-level-background-color: #ee5a24; + --yellow-level-background-color: var(--warning-color, #ffa600); + --inactive-background-color: inherit; } ha-card { @@ -21,6 +29,7 @@ export default css` ); overflow: hidden; transition: all 0.3s ease-out 0s; + color: var(--text-color); } a { @@ -81,6 +90,28 @@ export default css` display: none; } + .event-red { + background-color: var(--red-level-color); + } + + .event-orange { + background-color: var(--red-level-color); + } + + .event-yellow { + background-color: var(--yellow-level-background-color); + } + + .event-red, + .event-orange, + .event-yellow { + color: var(--text-color-active); + } + + .event-none { + background-color: var(--inactive-background-color); + } + .swiper { --swiper-pagination-bullet-size: 5px; } diff --git a/src/types.ts b/src/types.ts index 02d2c35..3979ffa 100644 --- a/src/types.ts +++ b/src/types.ts @@ -97,7 +97,7 @@ export interface MeteoalarmAlertParsed { */ isActive: boolean; icon: string; - color: string; + cssClass: string; headlines: string[]; captionIcon?: string; caption?: string;