Coder Social home page Coder Social logo

Comments (4)

ildar170975 avatar ildar170975 commented on July 24, 2024 1

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

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

but in other place it is defined as "--restore-card-border-shadow":
--ha-card-box-shadow: var(--restore-card-border-shadow);

from frontend.

ildar170975 avatar ildar170975 commented on July 24, 2024

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:

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...

from frontend.

ASNNetworks avatar ASNNetworks commented on July 24, 2024

@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

from frontend.

ildar170975 avatar ildar170975 commented on July 24, 2024

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
  1. 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
  1. See that all styles are applied - except shadow:
    изображение

  2. See that shadow is applied only in a masonry or in Editor:
    изображение

from frontend.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.