Theme variable box-shadow / ha-card-box-shadow doesn't work with Dashboard view type 'panel'. about frontend

[ildar170975]

I think there is an error here.
Here it is used "--restore-card-box-shadow":

frontend/src/panels/lovelace/views/hui-panel-view.ts

Line 133 in 42b5fa6

--restore-card-box-shadow: var(--ha-card-box-shadow, none);

but in other place it is defined as "--restore-card-border-shadow":

frontend/src/panels/lovelace/cards/hui-stack-card.ts

Line 109 in 42b5fa6

--ha-card-box-shadow: var(--restore-card-border-shadow);

[ildar170975]

Starting from some recent updates (check #20122, #20135, #20264), a card on a panel view does not have border-radius, border-width, box-shadow.
Check this code:

frontend/src/panels/lovelace/views/hui-panel-view.ts

Line 136 in 42b5fa6

* {

But for inner cards inside stack-like cards these variables still work:

type: entity
entity: sun.sun
card_mod:
  style: |
    ha-card {
      --ha-card-border-radius: 30px;
      --ha-card-border-width: 4px;
      --ha-card-box-shadow: 5px 5px 8px red, 10px 10px 8px green, 15px 15px 8px blue;
    }

Borders (or shadows) are used to visually separate cards from each other.
In the Panel view there is only one card - so it is probably no need to use borders/shadows...

[ASNNetworks]

@ildar170975 Thanks for pointing out the changes! This explains a lot.

I get that in panel view the main card doesn't need a shadow, but the nested cards now also don't have shadows this way. I mean, I kinda get it, I guess panel view's intention is to actually just have one card, but having still borders around the nested cards but not shadows, kinda makes no sense. But a lot of people that use panel view, use that to create dashboards that fit the screen better.

So the options are basically: use card-mod for literally any cards you have (which is a complete mess of a job to maintain with changes, chances on performance issues) or think of a new approach and stop using panel view.

Well that sucks lol. But thank you for your explanation and links. Seems this is sadly the way forward and not a bug.

Do you think it's possible to add border-shadow for all cards using card-mod in the theme file, so it applies to all cards automatically? I know there are card-mod variables you can use in theme file to achieve such things, like popup shadows.

Edit: It seems that your example with adding box-shadow to nested cards, doesn't work when using mod-card. In my example I need to add a box-shadow to a stack card (layout-card), which is nested. So this stack cards is inside a mod-card in order to style it (which worked fine). Now that one also doesn't show any box-shadow, while it's declared in the card itself.

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      --ha-card-background: var(--header-background-color) !important; 
      # -webkit-backdrop-filter: blur(17px) !important;     
      # --ha-card-background: none !important;       
      height: 40px !important;
      background: var(--header-background-color) !important;
      border-radius: 0px !important;
      -webkit-box-shadow: var(--ha-card-box-shadow) !important;  
      -moz-box-shadow: var(--ha-card-box-shadow) !important;  
      box-shadow: var(--ha-card-box-shadow) !important; 
      --ha-card-box-shadow: var(--ha-card-box-shadow) !important; 
      margin: 0 !important;
    }           
    .card-content {
      padding: 0;
    } 
    :host {
      z-index: 7;
      margin: 0px !important;
      position: sticky !important;
      position: -webkit-sticky !important;
      top: 0 !important;
    } 
card:
      
  type: 'custom:layout-card'
  REST OF CODE

[ildar170975]

but the nested cards now also don't have shadows this way

I think I see your point.
In my code & screenshot above you can see shadows applied since we defined variables for a particular card by card-mod.
But w/o card-mod it does not work.
How to reproduce:

1. Add a card on a panel view:

type: vertical-stack
cards:
  - type: entity
    entity: sun.sun

2. Define a theme:

test_minimal:
  ha-card-border-radius: 30px
  ha-card-border-width: 4px
  ha-card-box-shadow: 5px 5px 8px red, 10px 10px 8px green, 15px 15px 8px blue

3. See that all styles are applied - except shadow:
   

4. See that shadow is applied only in a masonry or in Editor: