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

ASNNetworks commented 3 months ago

Checklist

[X] I have updated to the latest available Home Assistant version.
[X] I have cleared the cache of my browser.
[X] I have tried a different browser to see if it is related to my browser.
[X] I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

When using the view type panel the theme variable box-shadow or ha-card-box-shadow doesn't work. So none of the cards have a box-shadow like declared in the theme.yaml Using inspect element you can add it manually. But for some reason Dashboard ignores box-shadow now. When changing the view to any other type, like masonry it all works again.

Describe the behavior you expected

Panel type should still work with box-shadow variabel.

Steps to reproduce the issue

change view type to panel
all box-shadows from cards are gone
change it to any other view type and it works as intended

What version of Home Assistant Core has the issue?

2024.6.1

What was the last working version of Home Assistant Core?

2024.3.x (last I tested ,skipped .4 and .5 releases)

In which browser are you experiencing the issue with?

Edge, Chromecast (Desktop), HA Android app, HA MacOS app

Which operating system are you using to run this browser?

macOS 14.5 (23F79) / Android 14

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

ildar170975 commented 3 months ago

Starting from some recent updates (check https://github.com/home-assistant/frontend/pull/20122, https://github.com/home-assistant/frontend/pull/20135, https://github.com/home-assistant/frontend/pull/20264), a card on a panel view does not have border-radius, border-width, box-shadow. Check this code: https://github.com/home-assistant/frontend/blob/42b5fa696a8be5bac70e11bb959b0880d1dfd691/src/panels/lovelace/views/hui-panel-view.ts#L136

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 commented 3 months ago

@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 commented 3 months ago

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:

Add a card on a panel view:

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

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

See that all styles are applied - except shadow:
See that shadow is applied only in a masonry or in Editor:

ildar170975 commented 3 months ago

I think there is an error here. Here it is used "--restore-card-box-shadow": https://github.com/home-assistant/frontend/blob/42b5fa696a8be5bac70e11bb959b0880d1dfd691/src/panels/lovelace/views/hui-panel-view.ts#L133 but in other place it is defined as "--restore-card-border-shadow": https://github.com/home-assistant/frontend/blob/42b5fa696a8be5bac70e11bb959b0880d1dfd691/src/panels/lovelace/cards/hui-stack-card.ts#L109

github-actions[bot] commented 3 weeks ago

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

ildar170975 commented 2 weeks ago

up

home-assistant / frontend