2022.11: Card borders

AleXSR700 · November 4, 2022, 12:43pm

Do you by any chance now why this in themes does not work

frontend:
  themes:
    no_borders_dark:
      ha-card-border-radius: 0px
      ha-card-border-width: 0px
      ha-card-border-color: rgba(0, 0, 0, 0)
      ha-card-background: rgba(0, 0, 0, 0)
      ha-card-border-style: none
      stack-card-margin: 0
      modes:
        dark:
          text-primary-color: white
          primary-text-color: white
          secondary-text-color: white

also tried

      modes:
        dark:
          text-primary-color: white
          ha-card-primary-text-color: white
          ha-card-secondary-text-color: white

but it works with card-mod

            card_mod:
              style:
                .: |
                  ha-card {
                    --primary-text-color: white;
                    --secondary-text-color: white;
                  }

pedolsky · November 4, 2022, 4:07pm

Maybe it would be better to move your issue and open a new thread? what I can say for now: The theme works for me (I’m using a theme directory), but only until I refresh the browser. I kept something in mind that there is an issue on Github.

ASNNetworks · November 5, 2022, 3:15pm

You can change the shadows since forever, just use it your theme yaml.

ha-card-box-shadow: '0px 2px 4px 0px rgba(0,0,0,0.16)'

The four px variables are the sides of the button (to make the shadow) and the rgba value is th color+transparency.

Creates this shadow around cards.

Ildar_Gabdullin · November 5, 2022, 3:18pm

Better to use the old value “0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)”.
Unfortunately, not everything may be reverted to the “old style” by using a theme only; a local tuning with card-mod is required; also, some custom cards work not properly in 2022.11.
A bit later I will prepare my proposals (as well as register issues for custom cards).

Maverick · November 6, 2022, 9:21am

I don’t like the new outlines to be honest. It’s a matter of taste, but I would really like to have the option to change back or disable rounded corners and outlines and stuff like this when it’s ‘changed’ in HA. I’m sticking to the Slate theme, which resembles the previous HA theme.

edit: Otherwise I’m extremely happy, running HA almost 3 years, rock solid! People ask about it all the time, when they see my setup and they all want to start running Home Assistant

hajo62 · November 5, 2022, 8:00pm

Does the v2022.11.1 have some changes in the picture-elements card compared to v2022.11.0 or earlier ?
With v2022.11.0 it looked well:

But with v2022.11.1 I see some black borders:

Attached the (unchanged) card code:

type: picture-elements
image: /local/images/HA-Kachel.png
elements:
  - type: state-icon
    entity: sensor.ha_online
    style:
      left: 71%
      top: 26%
  - type: state-label
    entity: sensor.ha_online
    prefix: 'UpTime: '
    style:
      color: black
      font-size: 150%
      left: 71%
      top: 36%
  - type: image
    entity: binary_sensor.latest_available_version_update_available
    image: ''
    state_image:
      'on': /local/images/HA-upgrade.png
    style:
      left: 33%
      top: 64%
  - conditions:
      - entity: binary_sensor.latest_available_version_update_available
        state: 'off'
    elements:
      - entity: sensor.installed_version
        style:
          left: 71%
          top: 55%
        type: state-icon
      - entity: sensor.installed_version
        prefix: v
        style:
          color: black
          font-size: 125%
          left: 71%
          top: 65%
        title: text
        type: state-label
    type: conditional
  - conditions:
      - entity: binary_sensor.latest_available_version_update_available
        state: 'on'
    elements:
      - entity: sensor.installed_version
        style:
          left: 53%
          top: 50%
        type: state-icon
      - entity: sensor.installed_version
        prefix: 'Installed: v'
        style:
          color: black
          left: 53%
          top: 60%
        title: text
        type: state-label
      - entity: sensor.latest_available_version
        style:
          left: 85%
          top: 50%
        type: state-icon
      - entity: sensor.latest_available_version
        prefix: 'Available: v'
        style:
          color: black
          left: 85%
          top: 60%
        title: text
        type: state-label
    type: conditional
  - type: conditional
    conditions:
      - entity: sensor.hacs
        state_not: '0'
    elements:
      - entity: sensor.hacs
        style:
          left: 70%
          top: 80%
        type: state-icon
      - entity: sensor.hacs
        prefix: 'Hacs: '
        style:
          color: black
          left: 70%
          top: 90%
        title: text
        type: state-label
      - type: image
        entity: sensor.hacs
        image: /local/images/HACS-update.png
        style:
          bottom: 0%
          right: 0%
          transform: translate(0%,0%)
  - type: custom:bar-card
    animation:
      state: 'on'
    columns: 5
    direction: up
    width: 10px
    height: 90px
    positions:
      icon: 'off'
      indicator: 'off'
      minmax: 'off'
      title: outside
      value: outside
      name: outside
    style:
      left: 25%
      top: 68%
      width: 50%
      scale: 100%
    entities:
      - entity: sensor.docker_homeassistant_cpu
        max: 100
        min: 0
        decimal: 0
        name: CPU
        severity:
          - color: '#40bf40'
            from: 0
            to: 40
          - color: '#ffde00'
            from: 41
            to: 80
          - color: '#fd0000'
            from: 80
            to: 100
      - entity: sensor.docker_homeassistant_memory
        max: 2048
        min: 0
        name: Memory
        decimal: 0
        severity:
          - color: '#40bf40'
            from: 0
            to: 1024
          - color: '#ffde00'
            from: 1024
            to: 1536
          - color: '#fd0000'
            from: 1536
            to: 8192
style:
  '#root>bar-card':
    $: |
      ha-card {
        background: none;
        box-shadow: none;
      }
      bar-card-name {
        color: blacl;
        font-size: 100%;
        font-weight: normal;
        margin: 4px;
      }
      bar-card-currentbar {
        border-radius: 7pt;
      }
      bar-card-backgroundbar {
        border-shadow: 2pt;
        margin-top: -2pt;
        margin-left: -2pt;
        border-radius: 7pt;
        border-style: solid;
        border-color: black;  
        background: rgba(255, 0, 0, 0.9);
      }
      bar-card-value {
        font-size: 125%;
        color: black;
        font-weight: bold;
        margin: 4px;
      }

ASNNetworks · November 5, 2022, 8:07pm

Search this thread, the answers and solutions are given:

https://community.home-assistant.io/t/2022-11-a-heck-of-a-release/483295/60

Ildar_Gabdullin · November 5, 2022, 8:20pm

Well, according to a new style “no shadow, add border” - this picture seems correct since both cards (picture-elements & internal card) are supposed to have a border.

hajo62 · November 5, 2022, 8:34pm

Hhm, but where to put those lines?

ASNNetworks · November 5, 2022, 8:43pm

The explanation is one comment above it.

hajo62 · November 5, 2022, 8:46pm

You are talking about Ildar_Gabdullin post?
I don’t understand the correlation…

Mariusthvdb · November 5, 2022, 8:53pm

Set the variables in your theme and the card looks like before

ASNNetworks · November 5, 2022, 8:58pm

It’s above the comment I linked you to. Hit the arrow button so you get to the comment, and then one above. It’s this one.

https://community.home-assistant.io/t/2022-11-a-heck-of-a-release/483295/59?u=asnnetworks

hajo62 · November 5, 2022, 9:42pm

Okay, I’m lost.
I could create a minimal “No Border” theme as described above; this works.

BUT: I use different themes on different tabs installed via HACS and include those via

frontend:
  themes: !include_dir_merge_named themes

I can patch the included themes, but this will be overwritten, when I install an updated for those themes.
But nevertheless: For now the frames are patched away.

Thanks!

Ildar_Gabdullin · November 5, 2022, 9:45pm

And very same is about a design. People who never dealt with themes & styles are not supposed to fix their UI just because of some preferences of some person or a blind following some Materials 3 dogmas. BTW, these changes in styles were not mentioned as a breaking change.

miiGii · November 5, 2022, 10:20pm

Yeah, it’s not breaking change if you aren’t using any custom stuff. It’s just new style, trend, Material 3, how ever you want to call it. It’s something that any long time projekt, like HA, has to do at some point. If you dont like it or if it’s breaking your custom stuff, it’s your problem to handle. Home Assistant core team can’t support every edge cases.

Stop complaining and enjoy the awesomeness of open source. You have the opportunity change everything in UI if you want to.

nickrout · November 5, 2022, 10:30pm

We could always go back to these days

https://web.archive.org/web/19970204033400/http://www.canterbury.ac.nz/

Ildar_Gabdullin · November 5, 2022, 10:31pm

Please change your attitude and stop using words like “complaining”, “don’t yell”.
This is a technical discussion, not a chat in your neighbourhood.

nickrout · November 5, 2022, 10:36pm

Pot meet kettle.

Ildar_Gabdullin · November 6, 2022, 3:20am

say it to yourself.