Right, but as i understand the CSS placed in the card affects the card itself which is somethimg that i dont want to do. This is why i didnt give much details about the card itself.
What i am looking for, is to adjust the view behind the card iāve made. Maybe this is possible through the themeā¦ I believe i am in the right place but as you suggest, i am gonna post my question also to the other thread.
Hi. I found something you typed on github a few years ago, regarding styling a broswer pop up card. I pasted some of your code below that you gave for the pop up box
I am desperate to figure out how to use a drop down menu that drops down further than the pop up menu.
Overflow: visible for example. But I cant figure it out, been at this for days lol. Can you please let me know if this is possible with card mod? Thank you in advance
style:
$: |
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
border-radius: 25px;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0.5);
--ha-card-background: rgba(0,0,0,0.5);
}
:host .content {
width: 90vw;
height: 90vh;
}
Someone see in this example a wrong Style Code?
My card_mod Style will be removed when i change something in the gui but he is working
- entity: input_boolean.heizperiode
name: Heizperiode
icon: mdi:thermostat-box-auto
- type: custom:mushroom-select-card
entity: input_select.advanced_heating_control_wohnzimmer_scheduler
name: Scheduler
icon: mdi:calendar-month-outline
layout: horizontal
secondary_info: none
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
--card-primary-font-weight: normal;
margin-left: -13px;
mushroom-shape-icon
{
--shape-color: none;
--icon-color: #44739e;
}
}
I am trying to style the new Group Headers in automation view to be bigger so I can actually see them but I am having a bit of trouble. Does anyone know what i am doing wrong?
My Theme file:
skynet_dark_v2:
card-mod-theme: skynet_dark_v2
card-mod-view: |
.group-header {
font-weight: 800;
font-size: 18px;
color: #FFC10A;
}
Iām trying to add simple drop-shadow effect globally to all my Home Assistant cards via my custom theme file. For some reason, when I append ha-card { box-shadow: 0px 5px 15px rgba(255,255,255,0.3) !important; } to my card-mode code below, it has no visible effect. However, the other card-mod modifications work just fine. Is there a more effective way to do this?
card-mod-root: |
.edit-mode, app-header, app-toolbar {
background: var(--app-header-background-color) !important;
color: var(--primary-text-color) !important;
}
ha-tabs {
--paper-tabs-selection-bar-color: var(--primary-color) !important;
}
paper-tab[aria-selected=true] {
color: var(--primary-color) !important;
}
ha-card {
box-shadow: 0px 5px 15px rgba(255,255,255,0.3) !important;
}
Iām trying to change sidebar title while maintaining the style from my current theme (ios-dark-mode-dark-blue), but it always change to a default HA white theme. Something like this is possible?
my-theme:
card-mod-theme: "ios-dark-mode-dark-blue"
card-mod-sidebar-yaml: |
.: |
.menu .title {
display: none !important;
}
.menu:after {
content: "My Title";
margin-left: 16px;
}
wont cross-post the full discovery I did todayā¦
but I do like to post this snippet here, because I never realized we could list card-mod classes like this:
type: entities
title: Tijd
icon: []
card_mod:
class:
- class-header-margin
- class-header-icon
style: |
.card-header {
{% set up = states('sun.sun') == 'above_horizon' %}
--card-mod-icon-color: {{'gold' if up else 'var(--card-background-color)' }};
--card-mod-icon: mdi:weather-sunset{{'-up' if up else 'down'}};
}
entities:
which is pretty cool, because with this, we can re-use those often used classes easily, and still have tailor made per-card settings if we need that. Without having to rewrite those in each and every card.
btw, this does Not work:
card_mod:
class: class-header-margin, class-header-icon
Could someone share a working transparent header and bottom please?
I tried the codes here, but still see a black status bar, and background colour when scrolling to bottom, the background seems to be scrolling and not fixed as defined.
Hereās my code in themes.yaml with kiosk-mode enabled:
card-mod-root-yaml: |
.header {
display: none;
}
#view {
padding: 0 !important;
height: 100vh !important;
padding-bottom: var(--header-height) !important;
}
# Background image
background-image: center / cover no-repeat fixed url(/local/img/bg/blur.jpg)
lovelace-background: var(--background-image)
# Header:
app-header-background-color: rgba(0, 0, 0, 0.1)
app-header-text-color: rgb(198, 203, 210)
app-header-selection-bar-color: rgba(0, 0, 0, 0.1)
app-header-edit-background-color: rgb(036, 036, 036)
Thanks
What Iām doing wrong?
my_theme:
card-mod-theme: my_theme
card-mod-card: |
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider {
--control-slider-thickness: 20px !important;
}
You need to use this. I added color to verify it is working.
card-mod-card-yaml: |
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.slider {
height: 20px !important;
--control-slider-color: lime !important;
}
Thanks, this is working and the slider is not that height anymore but the height of the container ha-control-slider stays the same. If we could change --control-slider-thickness it scales itself.
has anyone ever changed the response time of the tooltip on the view icons?
during recent beta, I realized they were a bit slow, and rather unreliable out of the box, so I tried setting the tools known to me to make them flashier. To no avail though.
normally in button-card or so, I use transition: opacity 0.5s and checking the dom I tried to set that to the ha-svg-icon element in the paper-tab, or just plain to it.
nothing happening. When I checked more precisely, I noticed the tooltip is only happening when actually ātouchingā the center of the tab, and thats seems to be happening when doing this:
paper-tab:hover {
transition: opacity 0.5s;
color: var(--primary-color);
background: var(--hover-color);
}
color and background work as designed (had those already), but again, adding the transition does nothingā¦
maybe anyone else has tried to do that, please let me know
This works.
card-mod-card-yaml: |
hui-card-features$:
hui-light-brightness-card-feature$: |
ha-control-slider {
--control-slider-thickness: 5px !important;
}
Thanks man, it works.
Donāt know what I did wrong, tried so many times.
card-mod-card: |
vs
card-mod-card-yaml: |
Easy missā¦
I have issues with white areas in my theme that I canāt seem to resolve. Instead of white, I would like to have a darker color so that the text is visible.
Does anyone have a solution for what I should add/change in the theme?
---
####################### LIGHT MODE ####################
MiniHass_Light:
# contrast
contrast-0: "#ffffff"
contrast-10: "#F2F2F2"
contrast-20: "#e5e5e5"
contrast-33: "#888888"
contrast-66: "#444444"
contrast-100: "#000000"
# main interface colors
color-green: "#39bb4f"
color-yellow: rgb(253 204 18)
color-blue: rgba(159,204,250,1)
color-cerise: "#e0188f"
color-purple: rgba(130,30,255)
color-orange: "#F46036"
color-off-grey: "#525252"
color-red: "#E84941"
color-teal: rgba(123,232,183,1)
color-white: "#ffffff"
color-black: "#000000"
color-gold: '#C4AA87'
color-dark-gray: '#A2A5AD'
color-darker-gray: '#A2A5AD'
# color-darker-gray: '#52555D'
color-really-dark-gray: '#52555D'
color-darkest-gray: '#44474E'
color-light-gray-nav: '#e3e3e1'
color-light-gray-card: '#FAFAFA'
mush-rgb-blue: 196, 170, 135
gradient-yellow: linear-gradient(30deg, rgb(253 204 18) 0%, rgb(253 238 70) 100%)
gradient-green: linear-gradient(120deg, rgba(120,210,155,1), rgba(205,240,200,1))
gradient-red: linear-gradient(45deg, rgba(240,130,140,1), rgba(250,185,195,1))
gradient-grey-cold: linear-gradient(45deg, rgba(235,244,245,1), rgba(181,198,224,1))
gradient-blue: linear-gradient(45deg, rgba(9,116,241,1), rgba(159,204,250,1))
gradient-orange: linear-gradient(45deg, rgba(253,125,90,1), rgba(253,172,90,1))
gradient-teal: linear-gradient(45deg, rgba(123,232,183,1), rgba(123,232,218,1))
gradient-purple: linear-gradient(120deg, rgb(130,30,255), rgb(170,100,250))
gradient-purple-teal: 'linear-gradient(45deg, var(--color-purple), var(--color-teal))'
gradient-teal-purple: 'linear-gradient(45deg, var(--color-teal), var(--color-purple))'
gradient-black: linear-gradient(45deg, rgba(13,13,15,1), rgba(19,20,23,1))
#glow
glow: 0px 0px 0px 0px
glow-color-green: 'var(--glow) var(--color-green)'
glow-color-yellow: 'var(--glow) var(--color-yellow)'
glow-color-dark-blue: 'var(--glow) var(--color-dark-blue)'
glow-color-light-blue: 'var(--glow) var(--color-light-blue)'
glow-color-cerise: 'var(--glow) var(--color-cerise)'
glow-color-violet: 'var(--glow) var(--color-violet)'
glow-color-orange: 'var(--glow) var(--color-orange)'
glow-color-red: 'var(--glow) var(--color-red)'
glow-color-white: 'var(--glow) var(--color-white)'
# background and sidebar
background: '#FFFFFF'
# card
background-neo: linear-gradient(145deg, rgba(250,250,250,.5) 25%, rgba(50,50,50,.1))
box-shadow-neo: 5px 5px 10px rgba(50,50,50,.15), -5px -5px 10px rgba(255,255,255,.5)
border-width: "0px"
border-radius: "16px"
# box-shadow: "rgba(0, 0, 0, 0.1) 0px 4px 12px"
ha-card-box-shadow: "var(--box-shadow)"
ha-card-background: '#F4F4F4'
background-card-color: 'rgba(14,14,112, 0)'
ha-card-border-width: "var(--border-width)"
# Slider
slider-bar-color: '#7ED8FC'
slider-color: '#4200AA'
slider-secondary-color: "var(--color-orange)"
# UI
mdc-button-outline-color: "var(--color-orange)"
mdc-theme-primary: "var(--color-red)"
--energy-grid-consumption-color: "var(--color-red)"
--energy-grid-return-color: "var(--color-red)"
--energy-solar-color: "var(--color-red)"
energy-non-fossil-color: "var(--color-red)"
energy-battery-out-color: "var(--color-red)"
energy-battery-in-color: "var(--color-red)"
--energy-gas-color: "var(--color-red)"
mini-media-player-accent-color: "var(--color-white)"
mini-media-player-icon-color: "var(--color-white)"
mini-media-player-base-color: "var(--color-white)"
swiper-pagination-color: "var(--color-black)"
#Typography (static)
fs-xl: 4rem
fs-1000: 2.5rem
fs-800: 2rem
fs-600: 1.5rem
fs-500: 1.25rem
fs-400: 1rem
fs-300: 0.75rem
fs-200: 0.5rem
#Buttons (static)
button-small: 30px
#Typography (responsive)
#fs-xl: clamp(4rem, 4vw, 8rem)
#fs-1000: clamp(2.5rem, 2vw, 4rem)
#fs-800: clamp(2rem, 2vw, 3rem)
#fs-600: clamp(1.5rem, 2vw, 2.25rem)
#fs-500: clamp(1.25rem, 2vw, 2.25rem)
#fs-400: clamp(1rem, 1vw, 2rem)
#fs-300: clamp(0.75rem, 2vw, 1.25rem)
#fs-200: clamp(0.5rem, 2vw, 1rem)
#Buttons (responsive)
#button-small: clamp(30px, 2vw, 50px)
####################### Backend UI ####################
####################### MACHIATO ####################
# Colors
text: "#4e4e4e"
subtext1: "#b8c0e0"
subtext0: "#a5adcb"
overlay2: "#939ab7"
overlay1: "#8087a2"
overlay0: "#6e738d"
surface2: "#5b6078"
surface1: "#494d64"
surface0: "#e3e3e3"
# surface2: "#5b6078"
# surface1: "#494d64"
# surface0: "#363a4f"
base: "#FFFFFF"
mantle: "#FFFFFF"
crust: "#181926"
rosewater: "#f4dbd6"
flamingo: "#f0c6c6"
pink: "#f5bde6"
mauve: "#c6a0f6"
red: "#ed8796"
maroon: "#ee99a0"
peach: "#f5a97f"
yellow: "#eed49f"
green: "#a6da95"
teal: "#8bd5ca"
sky: "#91d7e3"
sapphire: "#7dc4e4"
blue: "#8aadf4"
lavender: "#b7bdf8"
###########################
# Header
app-header-background-color: var(--mantle)
app-header-text-color: var(--text)
# Main Interface colors
primary-color: var(--blue)
light-primary-color: var(--primary-color)
primary-background-color: var(--base)
secondary-background-color: var(--base)
# Text
primary-text-color: var(--text)
secondary-text-color: var(--subtext1)
text-primary-color: var(--text)
divider-color: var(--base)
accent-color: var(--sky)
disabled-text-color: var(--surface0)
# Sidebar
sidebar-background-color: var(--crust)
sidebar-selected-background-color: var(--primary-background-color)
sidebar-icon-color: var(--subtext0)
sidebar-text-color: var(--subtext0)
sidebar-selected-icon-color: var(--mauve)
sidebar-selected-text-color: var(--mauve)
# Buttons
paper-item-icon-color: var(--subtext0)
paper-item-icon-active-color: var(--primary-color)
# States and Badges
state-icon-color: var(--lavender)
state-icon-active-color: var(--primary-color)
state-icon-unavailable-color: var(--disabled-text-color)
# Sliders
paper-slider-knob-color: var(--blue)
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: var(--paper-slider-knob-color)
paper-slider-secondary-color: var(--blue)
# Labels
label-badge-background-color: var(--surface0)
label-badge-text-color: var(--text)
label-badge-red: var(--red)
label-badge-green: var(--green)
label-badge-blue: var(--blue)
label-badge-yellow: var(--yellow)
label-badge-gray: var(--overlay0)
# Cards
paper-dialog-background-color: var(--overlay0)
paper-listbox-background-color: var(--overlay0)
paper-card-background-color: var(--card-background-color)
# Switches
switch-checked-button-color: var(--green)
switch-checked-track-color: var(--surface0)
switch-unchecked-button-color: rgb(--overlay0)
switch-unchecked-track-color: rgb(--surface0)
# Toggles
paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
# Table
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
data-table-background-color: var(--primary-background-color)
mdc-checkbox-unchecked-color: var(--surface0)
# Dropdowns
material-background-color: var(--primary-background-color)
material-secondary-background-color: var(--primary-background-color)
mdc-theme-surface: var(--primary-background-color)
# Pre/Code
markdown-code-background-color: var(--surface0)
# Checkboxes
mdc-select-fill-color: var(--surface0)
mdc-select-ink-color: var(--primary-text-color)
mdc-select-label-ink-color: var(--subtext1)
mdc-select-idle-line-color: var(--primary-text-color)
mdc-select-dropdown-icon-color: var(--secondary-text-color)
mdc-select-hover-line-color: var(--accent-color)
# Input
input-fill-color: rgba(10,10,10,0.2)
input-dropdown-icon-color: var(--secondary-text-color)
input-ink-color: var(--primary-text-color)
input-label-ink-color: var(--secondary-text-color)
input-idle-line-color: var(--primary-text-color)
input-hover-line-color: var(--accent-color)
# Toast
paper-toast-background-color: var(--overlay0)
# Colors
error-color: var(--red)
warning-color: var(--yellow)
success-color: var(--green)
info-color: var(--blue)
state-on-color: var(--green)
state-off-color: var(--red)
####################### DARK MODE ####################
MiniHass_Dark:
card-on-background-color: rgba(255, 255, 255, 0.8)
card-off-background-color: rgb(0,0,0,0.2)
card-on-text-color: black
card-off-text-color: white
light-card: "rgb(124, 111, 69)"
# contrast
contrast-100: rgb(255,255,255)
contrast-66: rgb(136,136,136)
contrast-33: rgb(68,68,68)
contrast-20: rgb(30,30,30)
contrast-10: rgb(17,17,17)
contrast-0: rgb(0,0,0)
# text
primary-font-family: montserrat
paper-font-common-base_-_font-family: var(--primary-font-family)
paper-font-common-code_-_font-family: var(--primary-font-family)
paper-font-body1_-_font-family: var(--primary-font-family)
paper-font-subhead_-_font-family: var(--primary-font-family)
paper-font-headline_-_font-family: var(--primary-font-family)
paper-font-caption_-_font-family: var(--primary-font-family)
paper-font-title_-_font-family: var(--primary-font-family)
ha-card-header-font-family: var(--primary-font-family)
mdc-typography-body1-font-family: var(--primary-font-family)
mdc-typography-font-family: var(--primary-font-family)
# colors
color-green: rgb(57,187,79)
color-yellow: rgb(253 204 18)
color-blue: rgb(159,204,250)
color-cerise: rgb(224,24,143)
color-purple: rgb(130,30,255)
color-orange: rgb(244,96,54)
color-off-grey: rgb(82,82,82)
color-red: rgb(232,73,65)
color-teal: rgb(123,232,183,1)
color-white: rgb(255,255,255)
color-black: rgb(0,0,0)
color-dark-blue: '#414E6E'
color-gold: '#C4AA87'
color-dark-gray: '#A2A5AD'
color-darker-gray: '#52555D'
color-darkest-gray: '#44474E'
color-really-dark-gray: '#52555D'
color-light-gray-nav: 'var(--color-darkest-gray)'
color-light-gray-card: '#FAFAFA'
mush-rgb-blue: 196, 170, 135
gradient-yellow: linear-gradient(30deg, rgb(253 204 18) 0%, rgb(253 238 70) 100%)
gradient-green: linear-gradient(120deg, rgba(120,210,155,1), rgba(205,240,200,1))
gradient-red: linear-gradient(45deg, rgba(240,130,140,1), rgba(250,185,195,1))
gradient-grey-cold: linear-gradient(45deg, rgba(235,244,245,1), rgba(181,198,224,1))
gradient-blue: linear-gradient(45deg, rgba(9,116,241,1), rgba(159,204,250,1))
gradient-orange: linear-gradient(45deg, rgba(253,125,90,1), rgba(253,172,90,1))
gradient-teal: linear-gradient(45deg, rgba(123,232,183,1), rgba(123,232,218,1))
gradient-purple: linear-gradient(120deg, rgb(130,30,255), rgb(170,100,250))
gradient-purple-teal: 'linear-gradient(45deg, var(--color-purple), var(--color-teal))'
gradient-teal-purple: 'linear-gradient(45deg, var(--color-teal), var(--color-purple))'
gradient-black: linear-gradient(45deg, rgba(13,13,15,1), rgba(19,20,23,1))
#glow
glow: 0px 0px 15px 1px
glow-color-green: 'var(--glow) var(--color-green)'
glow-color-yellow: 'var(--glow) var(--color-yellow)'
glow-color-dark-blue: 'var(--glow) var(--color-dark-blue)'
glow-color-light-blue: 'var(--glow) var(--color-light-blue)'
glow-color-cerise: 'var(--glow) var(--color-cerise)'
glow-color-violet: 'var(--glow) var(--color-violet)'
glow-color-orange: 'var(--glow) var(--color-orange)'
glow-color-red: 'var(--glow) var(--color-red)'
glow-color-white: 'var(--glow) var(--color-white)'
# background and sidebar
background: '#1b1d21'
# card
box-shadow-neo: 5px 5px 10px rgba(0,0,0,.5), -5px -5px 10px rgba(255,255,255,.03)
border-width: "0px"
border-radius: "16px"
box-shadow: "none"
ha-card-box-shadow: "var(--box-shadow)"
ha-card-background: '#121316'
ha-card-border-radius: "var(--border-radius)"
background-card-color: 'rgba(14,14,112, 0)'
ha-card-border-width: "var(--border-width)"
# slider
slider-bar-color: '#7ED8FC'
slider-color: '#4200AA'
slider-secondary-color: "var(--color-orange)"
# media player
mini-media-player-accent-color: "var(--color-white)"
mini-media-player-icon-color: "var(--color-white)"
mini-media-player-base-color: "var(--color-white)"
#Typography (static)
fs-xl: 4rem
fs-1000: 2.5rem
fs-800: 2rem
fs-600: 1.5rem
fs-500: 1.25rem
fs-400: 1rem
fs-300: 0.75rem
fs-200: 0.5rem
#Buttons (static)
button-small: 30px
#Typography (responsive)
#fs-xl: clamp(4rem, 4vw, 8rem)
#fs-1000: clamp(2.5rem, 2vw, 4rem)
#fs-800: clamp(2rem, 2vw, 3rem)
#fs-600: clamp(1.5rem, 2vw, 2.25rem)
#fs-500: clamp(1.25rem, 2vw, 2.25rem)
#fs-400: clamp(1rem, 1vw, 2rem)
#fs-300: clamp(0.75rem, 2vw, 1.25rem)
#fs-200: clamp(0.5rem, 2vw, 1rem)
#Buttons (responsive)
#button-small: clamp(30px, 2vw, 50px)
####################### Backend UI ####################
####################### MACHIATO ####################
# Colors
# text: "#cad3f5"
# subtext1: "#b8c0e0"
# subtext0: "#a5adcb"
text: var(--color-white)
titletext: var(--color-blue)
subtext1: var(--text)
subtext0: var(--text)
overlay2: "#939ab7"
overlay1: "#8087a2"
overlay0: "#6e738d"
surface2: "#5b6078"
surface1: "#494d64"
surface0: "#363a4f"
base: "#1b1d21"
mantle: "#1e2030"
crust: "#181926"
rosewater: "#f4dbd6"
flamingo: "#f0c6c6"
pink: "#f5bde6"
mauve: "#c6a0f6"
red: "#ed8796"
maroon: "#ee99a0"
peach: "#f5a97f"
yellow: "#eed49f"
green: "#a6da95"
teal: "#8bd5ca"
sky: "#91d7e3"
sapphire: "#7dc4e4"
blue: "#8aadf4"
lavender: "#b7bdf8"
###########################
# Header
app-header-background-color: '#1b1d21'
app-header-text-color: var(--text)
header-active-tab-color: "rgba(var(--mush-rgb-blue)"
header-active-tab-bg-color: "rgba(var(--color-amber)"
header-all-tabs-color: "#b2b3b8"
# Main Interface colors
primary-color: var(--blue)
light-primary-color: var(--primary-color)
primary-background-color: var(--base)
secondary-background-color: var(--base)
# Text
primary-text-color: var(--text)
secondary-text-color: var(--subtext1)
text-primary-color: var(--text)
divider-color: var(--base)
accent-color: var(--color-gold)
disabled-text-color: var(--surface0)
# Sidebar
sidebar-background-color: var(--crust)
sidebar-selected-background-color: var(--primary-background-color)
sidebar-icon-color: var(--subtext0)
sidebar-text-color: var(--subtext0)
sidebar-selected-icon-color: var(--mauve)
sidebar-selected-text-color: var(--mauve)
# Buttons
paper-item-icon-color: '#C4AA87'
paper-item-icon-active-color: '#C4AA87'
# paper-item-icon-color: var(--subtext0)
# paper-item-icon-active-color: var(--primary-color)
# States and Badges
state-icon-color: var(--lavender)
state-icon-active-color: var(--primary-color)
state-icon-unavailable-color: var(--disabled-text-color)
# Sliders
paper-slider-knob-color: var(--blue)
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: var(--paper-slider-knob-color)
paper-slider-secondary-color: var(--blue)
# Labels
label-badge-background-color: var(--surface0)
label-badge-text-color: var(--text)
label-badge-red: var(--red)
label-badge-green: var(--green)
label-badge-blue: var(--blue)
label-badge-yellow: var(--yellow)
label-badge-gray: var(--overlay0)
# Cards
paper-dialog-background-color: var(--overlay0)
paper-listbox-background-color: var(--overlay0)
paper-card-background-color: var(--card-background-color)
# Switches
switch-checked-button-color: var(--green)
switch-checked-track-color: var(--surface0)
switch-unchecked-button-color: rgb(--overlay0)
switch-unchecked-track-color: rgb(--surface0)
# Toggles
paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
# Table
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
data-table-background-color: var(--primary-background-color)
mdc-checkbox-unchecked-color: var(--surface0)
# Dropdowns
material-background-color: var(--primary-background-color)
material-secondary-background-color: var(--primary-background-color)
mdc-theme-surface: var(--primary-background-color)
# Pre/Code
markdown-code-background-color: var(--surface0)
# Checkboxes
mdc-select-fill-color: var(--surface0)
mdc-select-ink-color: var(--primary-text-color)
mdc-select-label-ink-color: var(--subtext1)
mdc-select-idle-line-color: var(--primary-text-color)
mdc-select-dropdown-icon-color: var(--secondary-text-color)
mdc-select-hover-line-color: var(--accent-color)
# Input
input-fill-color: rgba(10,10,10,0.2)
# input-fill-color: var(--secondary-background-color)
input-dropdown-icon-color: var(--secondary-text-color)
input-ink-color: var(--primary-text-color)
input-label-ink-color: var(--secondary-text-color)
input-idle-line-color: var(--primary-text-color)
input-hover-line-color: var(--accent-color)
# Toast
paper-toast-background-color: var(--overlay0)
# Colors
error-color: var(--red)
warning-color: var(--yellow)
success-color: var(--green)
info-color: var(--blue)
state-on-color: var(--green)
state-off-color: var(--red)
Iām trying to hide the header, but itās not applying for some reason. Have I formatted it right?
card-mod-theme: "Dark Auto"
# Header
card-mod-root: |
app-header {
display: none;
}
card-mod-root-yaml: |
paper-tabs$: |
.not-visible {
display: none;
}
/*Uncomment this if you want the header on the bottom
#selectionBar {
bottom: unset !important;
}
*/
mushroom-shape-icon$: |
.shape {
--shape-color: orange !important;
}
#view {
margin-top: 0px !important;
padding-bottom: var(--header-height);
}
card-mod-card: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none;
}
# Card-Mod Mushroom Popup Card
card-mod-more-info-yaml: |
ha-more-info-info:
$:
state-card-display,state-card-button,state-card-input_button,state-card-input_number,state-card-media_player,state-card-input_select:
$:
.: |
.state {
font-weight: bold;
}
state-info:
$:
state-badge:
$:
ha-state-icon:
$: |
ha-icon {
display: block;
}
ha-icon, ha-svg-icon {
height: 22px !important;
position: relative;
top: -1px;
color: rgba(var(--mush-rgb-blue), 1) !important;
}
@media screen and (max-width: 800px) {
ha-icon, ha-svg-icon {
top: 2px !important;
}
}
.: |
state-badge {
color: rgba(var(--mush-rgb-blue), 1) !important;
background: rgba(var(--mush-rgb-blue), .2);
margin: 0 15px 0 0;
background-size: contain;
border-radius: 100% !important;
--mdc-icon-size: 22px;
}
.time-ago {
overflow: unset !important;
white-space: normal !important;
font-weight:400 !important;
font-size: 12px !important;
font-weight: bold !important;
}
.info, .state {
margin-left: 0px !important;
font-weight: bold;
padding: 8px 0;
position: relative;
}
What is wrong with my indentation ?
- type: custom:mod-card
card_mod:
style:
.swiper-container {
width: 100% !important;
}
card:
type: custom:swipe-card
cards:
- square: false
columns: 2
type: grid
cards:
style: | was incorrect. You were missing the |
- type: custom:mod-card
card_mod:
style: |
.swiper-container {
width: 100% !important;
}
card:
type: custom:swipe-card
cards:
- square: false
columns: 2
type: grid
cards:
- type: custom:mod-card
card_mod:
style: |
.swiper-container {
width: 100% !important;
}
card:
type: custom:swipe-card
cards:
- square: false
columns: 2
type: grid
cards:
##########
# Ruimte 1 #
##########
- type: "custom:stack-in-card"
cards:
- type: custom:mushroom-template-card
gives me nothing 