🔹 Card-mod - Super-charge your themes!

Are you sure card-mod is installed? What version of HA are you using? Try reloading themes and the browser?

I am using card mod from here:

I have it working for changing the layout of text in various cards.

I am running HA version 0.116.4

Thank you very much for trying to help!

Can you do this:

Do you still have the problem? You can also try rebooting HA.

I have reloaded the themes inside developer tools and also restarted Home Assistant. I have reloaded the page and also restarted the browser. I’ve tried this in google chrome and on a samsung phone. The header still looks “big” as in the screen shot above.

Odd. It’s applying just fine for me. Is card-mod loaded in the browser console?

I believe so:

Odd. Try reinstalling card-mod with HACS.

Maybe that could be the problem. I installed card mod “manually” by downloading it. Thanks for your patience!

Can i get some help?
I have my header like this one:

I use the theme airy, from the docs on card mod. I will attach my full confirguration at the bottom of the post.

I found on this 🔹 Card-mod - Super-charge your themes!
That I need to add the following code to my theme in order to reduce the header size

  card-mod-root: |
    app-toolbar {
      display: none;
    }

So in my theme I found this lines

    app-toolbar {
      background: none !important;
      #display: none;#Hide top bar
    }

If I remove the # I got the following result:

The result is good in regards the top bar have been reduced as i like, my issue is that I do not have the 3 dots so I can enter edit mode. The 3 dots I refere to are this ones:
missing_info

What do i need to add to get those 3 dots?

This is my full theme configuration (is the airy theme just cahgned the background image).

airy:
  card-mod-theme: airy
  primary-color: darkgreen
  ha-card-background: none
  ha-card-box-shadow: none
  background-image: url("/local/wood1.jpg")


  disabled-text-color: gray

  theme-box-shadow:  0px  2px  1px -1px rgba(0, 0, 0, 0.2),# modify box shadow on the bottom and opacity
               0px  5px  5px  0px rgba(0, 0, 0, 0.14),
               0px  1px  3px  0px rgba(0, 0, 0, 0.12)
  theme-border-radius: 10px

  background-1: rgba(250, 250, 250, 0.5) #last digit changes the opasity of the background everywhere
  background-2: rgba(150, 150, 150, 0.6)
  bg-filter: grayscale(0.5) blur(0px)

  theme-red: firebrick
  theme-green: forestgreen
  theme-blue: deepskyblue
  paper-item-icon-active-color: var(--theme-green)

  ha-label-badge-title-font-size: 1em

  card-mod-view-yaml: |
    "*:first-child$": |
      :host {
        background: none !important;
        display: flex !important;
      }
      #badges {
        padding: 8px;
        display: flex !important;
        justify-content: start;
        flex-direction: column;
      }
      #columns .column > * {
        margin: 32px 16px;
      }
     
  
  card-mod-root: |
    ha-app-layout {
      background: var(--background-image) !important;
      background-size: cover;
    }
    app-header {
      background: var(--background-1) !important;
      backdrop-filter: var(--bg-filter);
      box-shadow:  var(--theme-box-shadow);
      
    }
    app-toolbar {
      background: none !important;
      #display: none;#Hide top bar
    }
    
  card-mod-card: |
    ha-card {
      backdrop-filter: var(--bg-filter);
      border-radius: var(--theme-border-radius);
      background: var(--background-1);
      box-shadow:  var(--theme-box-shadow);
    }
    ha-card.type-entities,
    ha-card.type-glance {
      background: none;
      backdrop-filter: none;
      box-shadow:  none;
    }
    .card-header {
      text-align: center;
      display: block !important;
      padding: 8px;
      margin-bottom: 12px;
      font-variant: small-caps; #Change the font of the card header
    }
    .type-entities .card-header,
    .type-glance .card-header {
      background: var(--background-1);
      backdrop-filter: var(--bg-filter);
      border-radius: var(--theme-border-radius);
      box-shadow:  var(--theme-box-shadow);
      margin-bottom: 24px;
    }
    .card-header hui-entities-toggle {
      display: none;
    }
  card-mod-glance: |
    :host {
      display: block;
      background: var(--background-1);
      box-shadow:  var(--theme-box-shadow);
      border-radius: var(--theme-border-radius);
      backdrop-filter: var(--bg-filter);
      padding: 4px !important;
      margin: 0 4px 12px;
      width: calc(var(--glance-column-width, 20%) - 8px) !important;
      /* Make icons red/green for on/off values and blue otherwise */
      --paper-item-icon-color: {% if not states(config.entity) %} var(--theme-blue);
        {% elif is_state(config.entity, 'on') %} var(--theme-green);
        {% elif is_state(config.entity, 'open') %} var(--theme-green);
        {% elif is_state(config.entity, 'unlocked') %} var(--theme-green);
        {% elif is_state(config.entity, 'off') %} var(--theme-red);
        {% elif is_state(config.entity, 'closed') %} var(--theme-red);
        {% elif is_state(config.entity, 'locked') %} var(--theme-red);
        {% else %} var(--theme-blue); {% endif %}
    }
    :host(:hover) {
      background: var(--background-2);
    }
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(359deg);
      }
    }
    state-badge {
      {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
      animation: spin 5s infinite linear;
      {% endif %}
    }
  card-mod-row-yaml: |
    .: |
      :host {
        display: block;
        background: var(--background-1);
        box-shadow:  var(--theme-box-shadow);
        padding-right: 8px;
        border-radius: var(--theme-border-radius);
        backdrop-filter: var(--bg-filter);
        margin: 0 -16px;
        /* Make icons red/green for on/off values and blue otherwise */
        --paper-item-icon-color: {% if not states(config.entity) %} var(--theme-blue);
          {% elif is_state(config.entity, 'on') %} var(--theme-green);
          {% elif is_state(config.entity, 'open') %} var(--theme-green);
          {% elif is_state(config.entity, 'unlocked') %} var(--theme-green);
          {% elif is_state(config.entity, 'off') %} var(--theme-red);
          {% elif is_state(config.entity, 'closed') %} var(--theme-red);
          {% elif is_state(config.entity, 'locked') %} var(--theme-red);
          {% else %} var(--theme-blue); {% endif %}
      }
      :host(:hover) {
        background: var(--background-2);
      }
    "*:first-child$": |
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(359deg);
        }
      }
      @keyframes spin2 {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(-359deg);
        }
      }
      state-badge {
        {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
        animation: spin 5s infinite linear;
        {% endif %}
      }
  card-mod-badge-yaml: |
    .: |
      :host {
        display: inline-block;
        background: var(--background-1);
        border-radius: var(--theme-border-radius);
        backdrop-filter: var(--bg-filter);
        box-shadow:  var(--theme-box-shadow);
        padding: 8px;
        /* Make badge borders red/green for binary sensors and blue otherwise */
        --label-badge-blue: {% if not states(config.entity) %} var(--theme-blue);
          {% elif is_state(config.entity, 'on') %} var(--theme-green);
          {% elif is_state(config.entity, 'open') %} var(--theme-green);
          {% elif is_state(config.entity, 'unlocked') %} var(--theme-green);
          {% elif is_state(config.entity, 'off') %} var(--theme-red);
          {% elif is_state(config.entity, 'closed') %} var(--theme-red);
          {% elif is_state(config.entity, 'locked') %} var(--theme-red);
          {% else %} var(--theme-blue); {% endif %}
        --label-badge-red: teal;
        margin-bottom: 24px;
      }
    # Make badges have transparent background
    ha-state-label-badge $ ha-label-badge $: |
      .label-badge {
        background: none !important;
      }
  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog {
        backdrop-filter: var(--bg-filter);
        background: {% if is_state(config.entityId, 'on') %}
          rgba(0, 255, 0, 0.2);
          {% elif is_state(config.entityId, 'off') %}
          rgba(255,0,0,0.2);
          {% else %}
          rgba(0,0,255,0.2);
          {% endif %}
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        background: rgba(250,250,250,0.7);
        border-radius: var(--theme-border-radius);
      }
    ha-header-bar $: |
      .mdc-top-app-bar {
        background: none !important;
      }        

I have checked this post 🔹 Card-mod - Super-charge your themes!

But If i paste that code at the end of my actual theme I got the following result:


So I got correct the top bar with the 3 dots, but I lost my configuration on the header (transparency) and lost my background image (get a blank one)

Thanks for any help.

Hey, I’ll help you out with this. Just give me a sec, and I’ll copy the wiki stuff and edit it in to your theme.
Here’s the compact header code: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook#compact-header

airy:
  card-mod-theme: airy
  primary-color: darkgreen
  ha-card-background: none
  ha-card-box-shadow: none
  background-image: url("/local/wood1.jpg")


  disabled-text-color: gray

  theme-box-shadow:  0px  2px  1px -1px rgba(0, 0, 0, 0.2),# modify box shadow on the bottom and opacity
               0px  5px  5px  0px rgba(0, 0, 0, 0.14),
               0px  1px  3px  0px rgba(0, 0, 0, 0.12)
  theme-border-radius: 10px

  background-1: rgba(250, 250, 250, 0.5) #last digit changes the opasity of the background everywhere
  background-2: rgba(150, 150, 150, 0.6)
  bg-filter: grayscale(0.5) blur(0px)

  theme-red: firebrick
  theme-green: forestgreen
  theme-blue: deepskyblue
  paper-item-icon-active-color: var(--theme-green)

  ha-label-badge-title-font-size: 1em

  card-mod-view-yaml: |
    "*:first-child$": |
      :host {
        background: none !important;
        display: flex !important;
      }
      #badges {
        padding: 8px;
        display: flex !important;
        justify-content: start;
        flex-direction: column;
      }
      #columns .column > * {
        margin: 32px 16px;
      }
     
  card-mod-root-yaml: |
    paper-tabs$: |
      .not-visible {
        display: none;
      }
      /*Uncomment this if you want the header on the bottom
      #selectionBar {
        bottom: unset !important;
      }
      */
    ha-app-layout$: |
      /* This corrects top padding for the view. */
      #contentContainer {
        /* Change this to 0px if you want the header on the bottom */
        padding-top: 48px !important;
      }
    ha-button-menu$mwc-menu$mwc-menu-surface$: |
      .mdc-menu-surface {
        margin: 10px;
        box-shadow: var(--ha-card-box-shadow, 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));
      }
    .: |
      /* This hides the unused portion of the header. */
      app-toolbar {
        height: 0;
      }
      /* This forces background-color and text-color. */
      .edit-mode, app-header, app-toolbar {
        background-color: var(--primary-background-color) !important;
        color: var(--primary-text-color) !important;
      }
      /* Uncomment this if you want the header on the bottom
      app-header {
        top: calc(100vh - 60px) !important;
        bottom: 0 !important;
        transform: unset !important;
      }
      hui-masonry-view {
        padding-bottom: 60px !important;
      }
      */
      /* This gives the header in edit mode a different look from the standard header. */
      app-header.edit-mode {
        border-bottom: 2px var(--primary-color) solid;
        padding-bottom: 10px;
      }
      /* Make the color of the plus white instead of black. */
      #add-view ha-svg-icon {
        color: #EEE !important;
      }
      /* Bring voice button back down */
      app-toolbar:not([class="edit-mode"]) mwc-icon-button[label] {
        top: 0;
        right: calc(48px * 1);
        z-index: 2;
        position: absolute;
      }
      /* Bring help button back in */
      a[href="https://www.home-assistant.io/lovelace/"] > mwc-icon-button {
        right: calc(48px * 2);
        position: absolute;
        z-index: 2;
      }
      /* Bring close button back in */
      mwc-icon-button[title="Close"] {
        top: 0;
        left: 0;
        position: absolute;
        z-index: 2;
      }
      /* Bring add view button back in */
      mwc-icon-button#add-view {
        position: fixed;
        right: 48px;
      }
      /* Bring edit UI overflow menu back in */
      ha-button-menu {
        top: 0;
        right: 0;
        z-index: 2;
        position: absolute;
        /*Uncomment this out to hide the overflow menu
        display: none;
        */
      }
      /* Hide the title */
      app-toolbar > [main-title] {
        display: none;
      }
      /* Hide buttons that are taking up space, but invisible */
      menu-button[style="visibility: hidden;"] {
        display: none;
      }
      /* Bring sidebar button back in */
      ha-menu-button {
        z-index: 2;
        top: 24px;
      }
      /* Set margin on left to be smaller,
      and set the bar color to be the primary color
      instead of white */
      paper-tabs {
        --paper-tabs-selection-bar-color: var(--primary-color) !important;
        margin-left: 48px !important;
      }
      /* When not in edit mode, shrink the left margin */
      app-toolbar:not(.edit-mode) > div > paper-tabs {
        margin-left: 6px !important;
      }
      /* Color selected tabs */
      paper-tab[aria-selected="true"] > ha-icon {
        color: var(--primary-color) !important;
      }
      paper-tab[aria-selected="true"] {
        color: var(--primary-color) !important;
      }
      /* Styles for mobile */
      @media (orientation: portrait) {
        /* Hide sidebar button and keep room for the overflow menu button */
        paper-tabs {
          margin-left: 5px !important;
          margin-right: 48px !important;
        }
        /* Hide voice button */
        mwc-icon-button[label="Start conversation"] {
          display: none !important;
        }
        /* Hide sidebar button */
        ha-menu-button {
          display: none !important;
        }
      }
      /* Make help button have contrast */
      app-toolbar a {
        color: var(--primary-text-color) !important;
      }
      ha-app-layout {
        background: var(--background-image) !important;
        background-size: cover;
      }
      app-header {
        background: var(--background-1) !important;
        backdrop-filter: var(--bg-filter);
        box-shadow:  var(--theme-box-shadow);
      }
      app-toolbar {
        background: none !important;
      }
    
  card-mod-card: |
    ha-card {
      backdrop-filter: var(--bg-filter);
      border-radius: var(--theme-border-radius);
      background: var(--background-1);
      box-shadow:  var(--theme-box-shadow);
    }
    ha-card.type-entities,
    ha-card.type-glance {
      background: none;
      backdrop-filter: none;
      box-shadow:  none;
    }
    .card-header {
      text-align: center;
      display: block !important;
      padding: 8px;
      margin-bottom: 12px;
      font-variant: small-caps; #Change the font of the card header
    }
    .type-entities .card-header,
    .type-glance .card-header {
      background: var(--background-1);
      backdrop-filter: var(--bg-filter);
      border-radius: var(--theme-border-radius);
      box-shadow:  var(--theme-box-shadow);
      margin-bottom: 24px;
    }
    .card-header hui-entities-toggle {
      display: none;
    }
  card-mod-glance: |
    :host {
      display: block;
      background: var(--background-1);
      box-shadow:  var(--theme-box-shadow);
      border-radius: var(--theme-border-radius);
      backdrop-filter: var(--bg-filter);
      padding: 4px !important;
      margin: 0 4px 12px;
      width: calc(var(--glance-column-width, 20%) - 8px) !important;
      /* Make icons red/green for on/off values and blue otherwise */
      --paper-item-icon-color: {% if not states(config.entity) %} var(--theme-blue);
        {% elif is_state(config.entity, 'on') %} var(--theme-green);
        {% elif is_state(config.entity, 'open') %} var(--theme-green);
        {% elif is_state(config.entity, 'unlocked') %} var(--theme-green);
        {% elif is_state(config.entity, 'off') %} var(--theme-red);
        {% elif is_state(config.entity, 'closed') %} var(--theme-red);
        {% elif is_state(config.entity, 'locked') %} var(--theme-red);
        {% else %} var(--theme-blue); {% endif %}
    }
    :host(:hover) {
      background: var(--background-2);
    }
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(359deg);
      }
    }
    state-badge {
      {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
      animation: spin 5s infinite linear;
      {% endif %}
    }
  card-mod-row-yaml: |
    .: |
      :host {
        display: block;
        background: var(--background-1);
        box-shadow:  var(--theme-box-shadow);
        padding-right: 8px;
        border-radius: var(--theme-border-radius);
        backdrop-filter: var(--bg-filter);
        margin: 0 -16px;
        /* Make icons red/green for on/off values and blue otherwise */
        --paper-item-icon-color: {% if not states(config.entity) %} var(--theme-blue);
          {% elif is_state(config.entity, 'on') %} var(--theme-green);
          {% elif is_state(config.entity, 'open') %} var(--theme-green);
          {% elif is_state(config.entity, 'unlocked') %} var(--theme-green);
          {% elif is_state(config.entity, 'off') %} var(--theme-red);
          {% elif is_state(config.entity, 'closed') %} var(--theme-red);
          {% elif is_state(config.entity, 'locked') %} var(--theme-red);
          {% else %} var(--theme-blue); {% endif %}
      }
      :host(:hover) {
        background: var(--background-2);
      }
    "*:first-child$": |
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(359deg);
        }
      }
      @keyframes spin2 {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(-359deg);
        }
      }
      state-badge {
        {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
        animation: spin 5s infinite linear;
        {% endif %}
      }
  card-mod-badge-yaml: |
    .: |
      :host {
        display: inline-block;
        background: var(--background-1);
        border-radius: var(--theme-border-radius);
        backdrop-filter: var(--bg-filter);
        box-shadow:  var(--theme-box-shadow);
        padding: 8px;
        /* Make badge borders red/green for binary sensors and blue otherwise */
        --label-badge-blue: {% if not states(config.entity) %} var(--theme-blue);
          {% elif is_state(config.entity, 'on') %} var(--theme-green);
          {% elif is_state(config.entity, 'open') %} var(--theme-green);
          {% elif is_state(config.entity, 'unlocked') %} var(--theme-green);
          {% elif is_state(config.entity, 'off') %} var(--theme-red);
          {% elif is_state(config.entity, 'closed') %} var(--theme-red);
          {% elif is_state(config.entity, 'locked') %} var(--theme-red);
          {% else %} var(--theme-blue); {% endif %}
        --label-badge-red: teal;
        margin-bottom: 24px;
      }
    # Make badges have transparent background
    ha-state-label-badge $ ha-label-badge $: |
      .label-badge {
        background: none !important;
      }
  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog {
        backdrop-filter: var(--bg-filter);
        background: {% if is_state(config.entityId, 'on') %}
          rgba(0, 255, 0, 0.2);
          {% elif is_state(config.entityId, 'off') %}
          rgba(255,0,0,0.2);
          {% else %}
          rgba(0,0,255,0.2);
          {% endif %}
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        background: rgba(250,250,250,0.7);
        border-radius: var(--theme-border-radius);
      }
    ha-header-bar $: |
      .mdc-top-app-bar {
        background: none !important;
      }        

THanks, thats a fast response.
Just if you can comment what you add, so if I need to modify another theme I know what to do?
I know it is more work, but please teach me how to fish.
Thanks again.

Edited it in.

Can anyone on HA 0.117 confirm that the code to completely disable the header still works?

  card-mod-root: |
    app-header {
      display: none;
    }

I’d like to know beforehand so I know what I can expect when 117 drops :slight_smile:

Yeah, it still works. It’s easier to use header-height: 0 without card-mod though.

Where would that go? I tried that as a variable in theme.yaml (like other theme variables) but that doesn’t work. Or am I misunderstanding you?

That one worked like magic, I need to study it to see what you did.
THANKS A LOT.

Side question, on 0.117 we won’t need to do this with card-mod? and it will native on the ui? or how it will work?

Well, kinda. It’ll be a thick header, and I made a new version tested on 0.117 that thins it out, and works in edit mode. If you want to see my latest version, being coded by me live, download atom: atom.io, and go to this link: https://tinyurl.com/y3cjwvw7 (make sure you have teletype installed).

Great work @KTibow, I am impressed with the amount of questions you answer and the work you do.

Keep it up! :+1:

I’m scratching my head on a small mod. I have a popup which contains three cards included in a custom:vertical-stack-in-card. I’d like to get rid of the border radius as in the screenshot below, while retaining the border radius of the popup.

My code:

    tap_action:
      action: call-service
      service: browser_mod.popup
      service_data:
        card:
          cards:
          - type: 'custom:state-switch'
            entity: sensor.living_room_tv_source
            transition: flip
            states:
              HDMI1:
                type: picture
                image: /local/ui/swisscomTV.png
              Plex:  
                entity: media_player.plex_plex_for_lg_lg_oled77w7v_z
                group: false
                hide:
                  controls: true
                  name: true
                  power: true
                  source: true
                  volume: true
                  icon: true
                style: 
                  mmp-powerstrip:
                    $: |
                      .label {
                        display: none;
                      }
                artwork: full-cover
                type: 'custom:mini-media-player'
              YouTube Kids:
                entity: media_player.living_room_tv
                group: false
                hide:
                  controls: true
                  name: true
                  power: true
                  source: true
                  volume: true
                  icon: true
                style: 
                  mmp-powerstrip:
                    $: |
                      .label {
                        display: none;
                      }
                artwork: full-cover
                type: 'custom:mini-media-player'
              YouTube:
                entity: media_player.living_room_tv
                group: false
                hide:
                  controls: true
                  name: true
                  power: true
                  source: true
                  volume: true
                  icon: true
                style: 
                  mmp-powerstrip:
                    $: |
                      .label {
                        display: none;
                      }
                artwork: full-cover
                type: 'custom:mini-media-player'
              Screen Share:
                entity: media_player.living_room_tv
                group: false
                hide:
                  controls: true
                  name: true
                  power: true
                  source: true
                  volume: true
                  icon: true
                style: 
                  border-radius: 0vw
                  mmp-powerstrip:
                    $: |
                      .label {
                        display: none;
                      }
                artwork: full-cover
                type: 'custom:mini-media-player' 
          - entity: media_player.living_room_tv
            group: false
            hide:
              power_state: false
              source: true
              volume: true
              name: true
            icon: 'mdi:television'
            shortcuts:
              buttons:
                - data:
                    button: HOME
                    entity_id: media_player.living_room_tv
                  icon: 'mdi:menu'
                  id: webostv.button
                  type: service
                - data:
                    button: UP
                    entity_id: media_player.living_room_tv
                  icon: 'mdi:arrow-up-bold'
                  id: webostv.button
                  type: service
                - data:
                    button: BACK
                    entity_id: media_player.living_room_tv
                  icon: 'mdi:undo-variant'
                  id: webostv.button
                  type: service
                - data:
                    button: VOLUMEUP
                    entity_id: media_player.living_room_tv
                  icon: 'mdi:volume-high'
                  id: webostv.button
                  type: service
                - data:
                    button: LEFT
                    entity_id: media_player.living_room_tv
                  icon: 'mdi:arrow-left-bold'
                  id: webostv.button
                  type: service
                - data:
                    button: ENTER
                    entity_id: media_player.living_room_tv
                  icon: 'mdi:keyboard-return'
                  id: webostv.button
                  type: service
                - data:
                    button: RIGHT
                    entity_id: media_player.living_room_tv
                  icon: 'mdi:arrow-right-bold'
                  id: webostv.button
                  type: service
                - data:
                    button: VOLUMEDOWN
                    entity_id: media_player.living_room_tv
                  icon: 'mdi:volume-medium'
                  id: webostv.button
                  type: service
                - icon: ' '
                  id: YouTube
                  type: source
                - data:
                    button: DOWN
                    entity_id: media_player.living_room_tv
                  icon: 'mdi:arrow-down-bold'
                  id: webostv.button
                  type: service
                - id: ' '
                  type: source
                - data:
                    button: MUTE
                    entity_id: media_player.living_room_tv
                  icon: 'mdi:volume-low'
                  id: webostv.button
                  type: service
                - icon: 'mdi:plex'
                  id: Plex
                  type: source
                - icon: 'mdi:television-classic'
                  id: HDMI1
                  type: source
                - icon: 'mdi:youtube'
                  id: YouTube Kids
                  type: source
                - icon: 'mdi:cast'
                  id: Screen Share
                  type: source
              columns: 4 
            type: 'custom:mini-media-player'
            style: |
                ha-card {
                  box-shadow: none !important;
                } 
          - entities:
            - entity: sensor.pioneer_avr_volume
              icon: 'mdi:volume-low'
              name: ' '
            type: entities
            style: |
                ha-card {
                  box-shadow: none !important;
                }             
          type: 'custom:vertical-stack-in-card'
        deviceID:
          - this
        style:
          '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
          border-radius: 0.8vw
          opacity: 0.9
          z-index: 5
        title: TV salon

Any help appreciated, as I’m not exactly a CSS wiz.

Try appling * { border-radius: 0 !Important; } on the element with the border radius.