From fa62f28a10b8e69a634d24d1f6bb965bca54cbc8 Mon Sep 17 00:00:00 2001 From: ildar170975 <71872483+ildar170975@users.noreply.github.com> Date: Mon, 13 Jan 2025 07:37:34 +0300 Subject: [PATCH 1/6] Update restriction-card.ts --- src/restriction-card.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/restriction-card.ts b/src/restriction-card.ts index f4b2a46..9ed32a2 100644 --- a/src/restriction-card.ts +++ b/src/restriction-card.ts @@ -295,6 +295,11 @@ class RestrictionCard extends LitElement implements LovelaceCard { z-index: 1; display: flex; color: var(--regular-lock-color); + background: var(--restriction-overlay-background, unset); + border-radius: var(--ha-card-border-radius, 12px); + } + #overlay:has(.hidden) { + background: unset; } #card { height: 100%; From 2b87f72a4421cb4a71a1a0da0f1cf5cb60ba4d0b Mon Sep 17 00:00:00 2001 From: ildar170975 <71872483+ildar170975@users.noreply.github.com> Date: Mon, 13 Jan 2025 08:40:32 +0300 Subject: [PATCH 2/6] Update README.md --- README.md | 59 ++++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 48 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 84aa565..7627dd5 100644 --- a/README.md +++ b/README.md @@ -115,17 +115,20 @@ resources: The following variables are available and can be set in your theme to change the appearance of the lock. Can be specified by color name, hexadecimal, rgb, rgba, hsl, hsla, basically anything supported by CSS. -| name | Default | Description | -| ---------------------------------- | -------------------- | ------------------------------------------------------ | -| `restriction-regular-lock-color` | `primary-text-color` | Lock color | -| `restriction-success-lock-color` | `primary-color` | Lock color when unlocked | -| `restriction-blocked-lock-color` | `error-state-color` | Lock color when card is blocked | -| `restriction-invalid--color` | `error-state-color` | Lock color after an invalid attempt to unlock | -| `restriction-lock-margin-left` | `0px` | Manually bump the left margin of the lock icon | -| `restriction-lock-row-margin-left` | `24px` | Manually bump the left margin of the lock icon in rows | -| `restriction-lock-row-margin-top` | `0px` | Manually bump the top margin of the lock icon in rows | -| `restriction-lock-icon-size` | `24px` | Lock icon size | -| `restriction-lock-opacity` | `0.5` | Lock icon opacity | +| name | Default | Description | +| --------------------------------------- | -------------------- | ------------------------------------------------------- | +| `restriction-regular-lock-color` | `primary-text-color` | Lock color | +| `restriction-success-lock-color` | `primary-color` | Lock color when unlocked | +| `restriction-blocked-lock-color` | `error-state-color` | Lock color when card is blocked | +| `restriction-invalid--color` | `error-state-color` | Lock color after an invalid attempt to unlock | +| `restriction-lock-margin-left` | `0px` | Manually bump the left margin of the lock icon | +| `restriction-lock-row-margin-left` | `24px` | Manually bump the left margin of the lock icon in a row | +| `restriction-lock-row-margin-top` | `0px` | Manually bump the top margin of the lock icon in a row | +| `restriction-lock-icon-size` | `24px` | Lock icon size | +| `restriction-lock-opacity` | `0.5` | Lock icon opacity | +| `restriction-overlay-background` | `unset` | Overlay background when locked | +| `restriction-overlay-row-outline` | `none` | Outline for an overlay in a row | +| `restriction-overlay-row-border-radius` | `0` | Border radius for an overlay in a row | ## Example Configurations @@ -183,7 +186,41 @@ entities: - entity: light.kitchen ``` +Overlay background example + +Card: + +![image](https://github.com/user-attachments/assets/10c14259-374e-4283-be33-6cf2a129507c) +```yaml +type: custom:restriction-card +card: + type: button + entity: switch.test_switch +``` + +Row: + +![image](https://github.com/user-attachments/assets/93752506-b2df-44fa-ae66-b36bdd430f1d) +```yaml +type: entities +entities: + - type: custom:restriction-card + row: true + card: + entity: switch.test_switch +``` + +Theme file: +```yaml + restriction-overlay-background: repeating-linear-gradient( -45deg, transparent 0 10px,var(--user-restriction-card-mask,rgba(255,0,0,0.07)) 10px 20px) + restriction-lock-opacity: 0 + restriction-overlay-row-border-radius: 4px + restriction-overlay-row-outline: 1px solid rgba(255,0,0,0.1) +``` + + Special Consideration for Input Selects: + If you find that the restriction card is blocking something you don't want blocked like an input select, try adjusting the z-index using mod-card ``` card: From 07d71a1995d2c0729d408eca017b7d999ecd7c99 Mon Sep 17 00:00:00 2001 From: ildar170975 <71872483+ildar170975@users.noreply.github.com> Date: Mon, 13 Jan 2025 08:42:20 +0300 Subject: [PATCH 3/6] Update restriction-card.ts --- src/restriction-card.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/restriction-card.ts b/src/restriction-card.ts index 9ed32a2..1b27157 100644 --- a/src/restriction-card.ts +++ b/src/restriction-card.ts @@ -301,6 +301,10 @@ class RestrictionCard extends LitElement implements LovelaceCard { #overlay:has(.hidden) { background: unset; } + #overlay:not(:has(.hidden)):has(+ #card.card-row) { + outline: var(--restriction-overlay-row-outline, none); + border-radius: var(--restriction-overlay-row-border-radius, 0); + } #card { height: 100%; } From c77656a4ab511790d2fc34af8b58f467fb982e52 Mon Sep 17 00:00:00 2001 From: ildar170975 <71872483+ildar170975@users.noreply.github.com> Date: Mon, 13 Jan 2025 08:48:25 +0300 Subject: [PATCH 4/6] exclude meaningless changes (whitespaces in markdown) --- README.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 7627dd5..442ddd8 100644 --- a/README.md +++ b/README.md @@ -115,17 +115,17 @@ resources: The following variables are available and can be set in your theme to change the appearance of the lock. Can be specified by color name, hexadecimal, rgb, rgba, hsl, hsla, basically anything supported by CSS. -| name | Default | Description | -| --------------------------------------- | -------------------- | ------------------------------------------------------- | -| `restriction-regular-lock-color` | `primary-text-color` | Lock color | -| `restriction-success-lock-color` | `primary-color` | Lock color when unlocked | -| `restriction-blocked-lock-color` | `error-state-color` | Lock color when card is blocked | -| `restriction-invalid--color` | `error-state-color` | Lock color after an invalid attempt to unlock | -| `restriction-lock-margin-left` | `0px` | Manually bump the left margin of the lock icon | -| `restriction-lock-row-margin-left` | `24px` | Manually bump the left margin of the lock icon in a row | -| `restriction-lock-row-margin-top` | `0px` | Manually bump the top margin of the lock icon in a row | -| `restriction-lock-icon-size` | `24px` | Lock icon size | -| `restriction-lock-opacity` | `0.5` | Lock icon opacity | +| name | Default | Description | +| ---------------------------------- | -------------------- | ------------------------------------------------------ | +| `restriction-regular-lock-color` | `primary-text-color` | Lock color | +| `restriction-success-lock-color` | `primary-color` | Lock color when unlocked | +| `restriction-blocked-lock-color` | `error-state-color` | Lock color when card is blocked | +| `restriction-invalid--color` | `error-state-color` | Lock color after an invalid attempt to unlock | +| `restriction-lock-margin-left` | `0px` | Manually bump the left margin of the lock icon | +| `restriction-lock-row-margin-left` | `24px` | Manually bump the left margin of the lock icon in a row | +| `restriction-lock-row-margin-top` | `0px` | Manually bump the top margin of the lock icon in a row | +| `restriction-lock-icon-size` | `24px` | Lock icon size | +| `restriction-lock-opacity` | `0.5` | Lock icon opacity | | `restriction-overlay-background` | `unset` | Overlay background when locked | | `restriction-overlay-row-outline` | `none` | Outline for an overlay in a row | | `restriction-overlay-row-border-radius` | `0` | Border radius for an overlay in a row | From 8f50e33f4484859a2b0b6d242adbf54ef0610ff7 Mon Sep 17 00:00:00 2001 From: ildar170975 <71872483+ildar170975@users.noreply.github.com> Date: Mon, 13 Jan 2025 09:56:19 +0300 Subject: [PATCH 5/6] Update README.md --- README.md | 44 ++++++++++++++++++++++++++++++++++++++------ 1 file changed, 38 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 442ddd8..c4b7020 100644 --- a/README.md +++ b/README.md @@ -127,7 +127,9 @@ Can be specified by color name, hexadecimal, rgb, rgba, hsl, hsla, basically any | `restriction-lock-icon-size` | `24px` | Lock icon size | | `restriction-lock-opacity` | `0.5` | Lock icon opacity | | `restriction-overlay-background` | `unset` | Overlay background when locked | -| `restriction-overlay-row-outline` | `none` | Outline for an overlay in a row | +| `restriction-overlay-row-outline` | `none` | Outline for an overlay in a row when locked | +| `restriction-overlay-background-blocked` | `unset` | Overlay background when blocked | +| `restriction-overlay-row-outline-blocked` | `none` | Outline for an overlay in a row when blocked | | `restriction-overlay-row-border-radius` | `0` | Border radius for an overlay in a row | ## Example Configurations @@ -188,17 +190,18 @@ entities: Overlay background example -Card: +Card locked: -![image](https://github.com/user-attachments/assets/10c14259-374e-4283-be33-6cf2a129507c) +![image](https://github.com/user-attachments/assets/54b64298-ba6f-4687-a704-e63dc2a1b11e) ```yaml type: custom:restriction-card card: - type: button - entity: switch.test_switch + type: entities + entities: + - entity: switch.test_switch ``` -Row: +Row locked: ![image](https://github.com/user-attachments/assets/93752506-b2df-44fa-ae66-b36bdd430f1d) ```yaml @@ -210,12 +213,41 @@ entities: entity: switch.test_switch ``` +Card blocked: + +![image](https://github.com/user-attachments/assets/a9336776-a2ea-4689-b801-fa43e64ab001) +```yaml +type: custom:restriction-card +restrictions: + block: true +card: + type: entities + entities: + - entity: switch.test_switch +``` + +Row blocked: + +![image](https://github.com/user-attachments/assets/0ea65870-45a5-4a60-9aa8-97ce8b697934) +```yaml +type: entities +entities: + - type: custom:restriction-card + restrictions: + block: true + row: true + card: + entity: switch.test_switch +``` + Theme file: ```yaml restriction-overlay-background: repeating-linear-gradient( -45deg, transparent 0 10px,var(--user-restriction-card-mask,rgba(255,0,0,0.07)) 10px 20px) + restriction-overlay-background-blocked: repeating-linear-gradient( -45deg, transparent 0 10px,var(--user-restriction-card-mask,rgba(127,127,127,0.07)) 10px 20px) restriction-lock-opacity: 0 restriction-overlay-row-border-radius: 4px restriction-overlay-row-outline: 1px solid rgba(255,0,0,0.1) + restriction-overlay-row-outline-blocked: 1px solid rgba(127,127,127,0.1) ``` From f8ebf4f152832f3217cb6ee4c4ad898780807967 Mon Sep 17 00:00:00 2001 From: ildar170975 <71872483+ildar170975@users.noreply.github.com> Date: Mon, 13 Jan 2025 09:59:54 +0300 Subject: [PATCH 6/6] Update restriction-card.ts --- src/restriction-card.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/restriction-card.ts b/src/restriction-card.ts index 1b27157..006b197 100644 --- a/src/restriction-card.ts +++ b/src/restriction-card.ts @@ -296,7 +296,6 @@ class RestrictionCard extends LitElement implements LovelaceCard { display: flex; color: var(--regular-lock-color); background: var(--restriction-overlay-background, unset); - border-radius: var(--ha-card-border-radius, 12px); } #overlay:has(.hidden) { background: unset; @@ -305,6 +304,15 @@ class RestrictionCard extends LitElement implements LovelaceCard { outline: var(--restriction-overlay-row-outline, none); border-radius: var(--restriction-overlay-row-border-radius, 0); } + #overlay:not(:has(+ #card.card-row)) { + border-radius: var(--ha-card-border-radius, 12px); + } + #overlay.blocked { + background: var(--restriction-overlay-background-blocked, unset); + } + #overlay.blocked:has(+ #card.card-row) { + outline: var(--restriction-overlay-row-outline-blocked, none); + } #card { height: 100%; }