Support for outer_padding override

.devcontainer/ui-lovelace.yaml

@@ -14,18 +14,19 @@ views:
           margin: true
           border_radius: true
           background: true
+          outer_padding: true
         title: test
         cards:
           - type: custom:stack-in-card
             keep:
               margin: true
-              box_shadow: false
-              background: false
+              outer_padding: false
+              border_radius: false
             cards:
               - type: custom:button-card
-                entity: sun.sun
+                entity: switch.decorative_lights
                 color_type: card
-                color: white
+                # color: white
                 # styles:
                 #   card:
                 #     - --keep-background: "true"
@@ -50,9 +51,6 @@ views:
                 color_type: card
                 color: yellow
                 color_off: rgb(245, 245, 245)
-                # styles:
-                #   card:
-                #     - --keep-background: "true"
       - type: entities
         style: |
           ha-card {

README.md

@@ -33,6 +33,7 @@ If a card inside the stack has the `--keep-background` CSS style defined, it wil
 | `background` | boolean | **Optional** | Will keep the background on **all** the child cards. To keep the background on specific cards only, assign the CSS variable `--keep-background: 'true'` on the card where you want to keep the background.  | `false` |
 | `box_shadow` | boolean | **Optional** | Will keep the `box-shadow` on **all** the child cards | `false` |
 | `margin` | boolean | **Optional** | Will keep the `margin` between **all** the child cards | `false` |
+| `outer_padding` | boolean | **Optional** | Will add a `padding` of `8px` to the card if `margin` is `true` | `true` if `margin` is `true`, else false |
 | `border_radius` | boolean | **Optional** | Will keep the `border-radius` on **all** the child cards | `false` |
 
 ## Example

src/stack-in-card.ts

@@ -29,6 +29,14 @@ class StackInCard extends LitElement implements LovelaceCard {
     }
   }
 
+  static get styles(): CSSResult {
+    return css`
+      ha-card {
+        overflow: hidden;
+      }
+    `;
+  }
+
   public setConfig(config: StackInCardConfig): void {
     if (!config.cards) {
       throw new Error(`There is no cards parameter defined`);
@@ -44,6 +52,8 @@ class StackInCard extends LitElement implements LovelaceCard {
         ...config.keep,
       },
     };
+    if (this._config.keep?.margin && this._config.keep?.outer_padding === undefined)
+      this._config.keep.outer_padding = true;
     this._createCard({
       type: `${this._config.mode}-stack`,
       cards: this._config.cards,
@@ -52,7 +62,7 @@ class StackInCard extends LitElement implements LovelaceCard {
       this._waitForChildren(card, false);
       window.setTimeout(() => {
         if (!this._config?.keep?.background) this._waitForChildren(card, true);
-        if (this._config?.keep?.margin && this._card?.shadowRoot) {
+        if (this._config?.keep?.outer_padding && this._card?.shadowRoot) {
           const stackRoot = this._card.shadowRoot.getElementById('root');
           if (stackRoot) stackRoot.style.padding = '8px';
         }
@@ -155,7 +165,13 @@ class StackInCard extends LitElement implements LovelaceCard {
     const newCard = await this._createCard(config);
     element.replaceWith(newCard);
     this._card = newCard;
-    this._waitForChildren(this._card, true);
+    window.setTimeout(() => {
+      if (!this._config?.keep?.background) this._waitForChildren(this._card, true);
+      if (this._config?.keep?.outer_padding && this._card?.shadowRoot) {
+        const stackRoot = this._card.shadowRoot.getElementById('root');
+        if (stackRoot) stackRoot.style.padding = '8px';
+      }
+    }, 500);
     return newCard;
   }
 

src/types.ts

@@ -13,4 +13,5 @@ export interface KeepConfig {
   background?: boolean;
   box_shadow?: boolean;
   border_radius?: boolean;
+  outer_padding?: boolean;
 }