merge dev to master (#129)

* Update restriction-card.ts * Update restriction-card.ts * Update README.md * Update restriction-card.ts * exclude meaningless changes (whitespaces in markdown) * Update README.md * Update restriction-card.ts * Revert "Add overlay background" * Revert "fix: remove unneeded "display: inline"" * Update const.ts
iantrich · Jan 13, 2025 · 8470f4f · 8470f4f
1 parent 0092729
commit 8470f4f
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -122,10 +122,15 @@ Can be specified by color name, hexadecimal, rgb, rgba, hsl, hsla, basically any
 | `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-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 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
 
@@ -183,7 +188,71 @@ entities:
   - entity: light.kitchen
 ```
 
+Overlay background example
+
+Card locked:
+
+![image](https://github.com/user-attachments/assets/54b64298-ba6f-4687-a704-e63dc2a1b11e)
+```yaml
+type: custom:restriction-card
+card:
+  type: entities
+  entities:
+    - entity: switch.test_switch
+```
+
+Row locked:
+
+![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
+```
+
+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)
+```
+
+
 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:

diff --git a/src/const.ts b/src/const.ts
@@ -1 +1 @@
-export const CARD_VERSION = '1.2.10';
+export const CARD_VERSION = '1.2.11';
diff --git a/src/restriction-card.ts b/src/restriction-card.ts
@@ -266,7 +266,6 @@ class RestrictionCard extends LitElement implements LovelaceCard {
   static get styles(): CSSResult {
     return css`
       :host {
-        display: inline;
         position: relative;
         --regular-lock-color: var(--restriction-regular-lock-color, var(--primary-text-color, #212121));
         --success-lock-color: var(--restriction-success-lock-color, var(--primary-color, #03a9f4));
@@ -295,6 +294,23 @@ class RestrictionCard extends LitElement implements LovelaceCard {
         z-index: 1;
         display: flex;
         color: var(--regular-lock-color);
+        background: var(--restriction-overlay-background, unset);
+      }
+      #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);
+      }
+      #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%;
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export const CARD_VERSION = '1.2.10';
		export const CARD_VERSION = '1.2.11';