Same problem here, any ideas?
Hi,
change the themes.yaml with this:
frontend:
themes:
####################################################
# #
# THEME #
# #
####################################################
# Based on https://github.com/seangreen2/slate_theme
tablet:
# Main colors
primary-color: '#434b4d'
accent-color: '#b4b6b630'
dark-primary-color: '#e0e1e1'
light-primary-color: '#262b2c'
# Text colors
primary-text-color: '#e0e1e1'
text-primary-color: 'var(--primary-text-color)'
secondary-text-color: 'rgba(224, 225, 225, 0.3)'
disabled-text-color: '#777777'
label-badge-border-color: 'green'
# Sidebar
sidebar-icon-color: '#9e9e9e'
# Background colors
primary-background-color: '#222627'
secondary-background-color: '#434b4d'
divider-color: 'rgba(0, 0, 0, .12)'
table-row-background-color: '#292929'
table-row-alternative-background-color: '#292929'
# Nav Menu
paper-listbox-color: '#777777'
paper-listbox-background-color: '#222627'
paper-grey-50: 'var(--primary-text-color)'
paper-grey-200: '#222222'
# Paper card
paper-card-header-color: '#252b2d'
paper-card-background-color: '#222627'
paper-dialog-background-color: '#2d3538'
paper-item-icon-color: '#9da0a2'
paper-item-icon-active-color: '#3182b7'
paper-item-icon_-_color: 'green'
paper-item-selected_-_background-color: '#ff0000'
paper-tabs-selection-bar-color: 'green'
# Labels
label-badge-red: 'var(--primary-color)'
label-badge-text-color: 'var(--primary-text-color)'
label-badge-background-color: '#222222'
# Switches update
switch-checked-color: '#7a7d7f'
switch-unchecked-button-color: '#3b4041'
switch-unchecked-track-color: '#0c0d0d'
# paper-toggle-button-checked-bar-color: '#009FFF'
# Sliders
paper-slider-knob-color: '#a4abb1'
paper-slider-knob-start-color: '#a4abb1'
paper-slider-pin-color: '#626a6f'
paper-slider-active-color: '#626a6f'
paper-slider-container-color: '#202020'
paper-slider-secondary-color: 'var(--secondary-background-color)'
paper-slider-disabled-active-color: 'var(--disabled-text-color)'
paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'
#paper-slider-height: '3px'
# Google colors
google-red-500: '#bf3838'
google-green-500: '#5b8d47'
# Changes to fix history/logbook menus
lumo-primary-text-color: '#2980b9'
lumo-secondary-text-color: '#2980b9'
lumo-primary-color: '#2980b9'
# Calendar day numbers
lumo-body-text-color: '#e0e1e1'
# Calendar/Date-Picker Background
lumo-base-color: '#222222'
# Month/Year header
lumo-header-text-color: 'var(--lumo-body-text-color)'
# DayOfWeek Header
lumo-tertiary-text-color: 'var(--lumo-body-text-color)'
lumo-shade: '#222222'
lumo-shade-90pct: 'rgba(34, 34, 34, .9)'
lumo-shade-80pct: 'rgba(34, 34, 34, .8)'
lumo-shade-70pct: 'rgba(34, 34, 34, .7)'
lumo-shade-60pct: 'rgba(34, 34, 34, .6)'
lumo-shade-50pct: 'rgba(34, 34, 34, .5)'
lumo-shade-40pct: 'rgba(34, 34, 34, .4)'
lumo-shade-30pct: 'rgba(34, 34, 34, .3)'
lumo-shade-20pct: 'rgba(34, 34, 34, .2)'
lumo-shade-10pct: 'rgba(34, 34, 34, .1)'
lumo-shade-5pct: 'rgba(34, 34, 34, .05)'
lumo-tint-5pct: '#222222'
# fix for device configuration screen
card-background-color: 'var(--paper-card-background-color)'
# mini-media-player
mini-media-player-base-color: '#d7d7d6'
mini-media-player-accent-color: '#d7d7d6'
mini-media-player-icon-color: '#9e9e9e'
mini-media-player-overlay-color: 'rgba(0,0,0,0)'
mini-media-player-overlay-color-stop: '100%'
mini-media-player-overlay-base-color: '#d7d7d6'
mini-media-player-overlay-accent-color: '#d7d7d6'
mini-media-player-media-cover-info-color: '#d7d7d6'
mini-media-player-background-opacity: '0'
mini-media-player-artwork-opacity: '1'
mini-media-player-progress-height: '5px'
mini-media-player-scale: '1.14'
# popup-backdrop-filter
iron-overlay-backdrop-filter: 'blur(15px)'
iron-overlay-backdrop-background-color: 'rgba(0,0,0,.6)'
iron-overlay-backdrop-opacity: '1'
# barcard
bar-card-border-radius: '0.3em'
####################################################
# #
# CARD MOD #
# #
####################################################
card-mod-theme: tablet
card-color: rgba(34,38,39,0.9)
card-header: rgba(48,52,52,0.8)
card-mod-root: |
ha-app-layout {
background: url('/local/background.png') !important;
background-size: cover !important;
}
card-mod-card-yaml: |
"#root>hui-image":
$: |
#image {
pointer-events: none;
}
"#root>hui-markdown-card,#key1":
$: |
ha-card>ha-markdown {
padding: 0 !important;
}
"#root>hui-markdown-card,#key2":
$:
ha-card>ha-markdown:
$: |
ha-markdown-element>font>ha-icon {
vertical-align: 3%;
opacity: 0.6;
}
ha-markdown-element>p>span {
font-family: SF Text;
font-size: 5vw;
font-weight: 200;
margin-left: -0.3vw;
letter-spacing: -0.05vw;
}
"#root>hui-state-label-element":
$: |
div {
padding: 0 !important;
}
.: |
#root>hui-icon-element {
opacity: 0.1 !important;
transition: 0.4s;
}
#root>hui-icon-element:hover {
opacity: 0.25 !important;
transition: none;
}
#root>hui-icon-element:active {
opacity: 0.35 !important;
transition: none;
}
#root>hui-icon-element:nth-child(10) {
{% if states('sensor.hass_version_installed') | regex_search('b') %}
{% if states('sensor.hass_version_installed') != states('sensor.hass_version_latest_beta') and
not is_state('sensor.hass_version_latest', 'unknown') or
not is_state('sensor.hacs', '0') and
not is_state('sensor.hacs', 'unknown') %}
color: rgb(35,78,106) !important; opacity: 1 !important;
{% endif %}
{% else %}
{% if states('sensor.hass_version_installed') != states('sensor.hass_version_latest') and
not is_state('sensor.hass_version_latest', 'unknown') or
not is_state('sensor.hacs', '0') and
not is_state('sensor.hacs', 'unknown') %}
color: rgb(35,78,106) !important; opacity: 1 !important;
{% endif %}
{% endif %}
}
ha-card {
background: none;
box-shadow: none;
border-radius: 0;
}
.card-header {
margin: -0.5em 0 1.1em 0.4em;
font-family: SF Text;
letter-spacing: 0.005em;
font-size: 1.5em;
}
/* * * * * * * * * * * * * * * * * *
* *
* TYPES *
* *
* * * * * * * * * * * * * * * * * */
ha-card.type-entities {
background: none;
padding: 0.3em 1.25em 0.4em 0.5em;
}
ha-card.type-custom-stack-in-card {
background: none;
}
ha-card.type-history-graph {
margin: 0.8em -1.9em -1.5em -0.8em;
}
ha-card.type-custom-hui-markdown-card {
font-family: SF Display;
line-height: 2.05vw;
letter-spacing: 0.06vw;
color: rgba(255, 255, 255, 0.9);
pointer-events: none;
}
/* * * * * * * * * * * * * * * * * *
* *
* CLASSES *
* *
* * * * * * * * * * * * * * * * * */
ha-card.add_header {
background: linear-gradient(180deg,
var(--card-header) 0%,
var(--card-header) 4.6em,
var(--card-color) 4.6em,
var(--card-color) 100%);
border-radius: 1em;
}
.map {
height: 24.9em;
border-top: 1px solid #FFFFFF !important;
filter: invert(1) contrast(80%) hue-rotate(250deg);
}
.sidebar {
font-size: 1.5vw;
font-weight: 300;
opacity: 0.75;
width: 15.5vw;
height: 1px;
}
.krisinformation {
background: #5a1f1f !important;
font-family: SF Display;
font-size: 1.3vw;
font-weight: 300;
letter-spacing: 0.06vw;
line-height: 1.7vw;
hyphens: auto;
border-radius: 0.7vw !important;
filter: drop-shadow(0 0 1vw #1e1e1e);
}
.coronavirus {
font-size: 1.26vw;
color: #6a7377;
font-weight: 400;
opacity: 0.5;
width: 90vw;
height: 1px;
letter-spacing: 0.065vw;
--mdc-icon-size: 1.2vw;
}
ha-card.information_network {
background: none;
margin-top: -0.7em;
z-index: 2;
padding: 1.4px;
width: 15em;
}
/* * * * * * * * * * * * * * * * * *
* *
* BAR CARD *
* *
* * * * * * * * * * * * * * * * * */
.type-custom-bar-card bar-card-name {
padding-left: 0.25em;
}
.type-custom-bar-card bar-card-iconbar {
padding-left: 0.23em;
}
.type-custom-bar-card bar-card-value {
margin-right: auto;
color: #e0e1e1;
text-shadow: none;
font-size: 1em;
font-weight: 400;
letter-spacing: 0.01em;
}
.type-custom-bar-card bar-card-backgroundbar {
background: none;
}
.type-custom-bar-card bar-card-background {
background: radial-gradient(circle, rgba(52, 57, 58, 0.1) 0%, rgba(17,18,18,0.2) 75%);
box-shadow: inset 0 0 25px #00000045;
border-radius: 0.3em;
}
/* * * * * * * * * * * * * * * * * *
* *
* CALENDAR CARD *
* *
* * * * * * * * * * * * * * * * * */
.type-custom-calendar-card {
margin: -1.5em 1.3em 0.55em 1.2em;
height: 20em;
}
.type-custom-calendar-card>div {
margin-bottom: 0.4em;
}
.type-custom-calendar-card>table>tbody>tr>td>div {
opacity: 0.5;
}
.type-custom-calendar-card>table>tbody>tr>td {
cursor: default !important;
}
.type-custom-calendar-card>table>tbody>tr>td.overview.no-pointer>div {
opacity: 1;
}
# card-mod-glance: |
# :host {
# --paper-item-icon-color: {{ '#3182b7' if is_state(config.entity, 'home') else '#FFFFFF20' }};
# }
card-mod-more-info-yaml: |
.: |
app-toolbar {
background: var(--card-header) !important;
}
mwc-icon-button {
margin-top: -3px;
color: #9e9e9e;
}
.main-title {
margin-top: 5px;
font-family: SF Text;
letter-spacing: 0.005em;
}
$: |
.mdc-dialog {
backdrop-filter: blur(20px) brightness(70%);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: var(--card-color);
box-shadow: none;
border-radius: 1em;
}
and this Part(markdown fix) in lovelace.yaml:
cards:
- type: picture-elements
image: /local/background.png
elements:
# markdown fix
- type: custom:hui-element
card_type: markdown
style: {opacity: 0}
content: preload
make a restart.
i hope it helps.
Hi @Mattias_Persson I have a basic Home Assistant setup and I have a tablet mounted to a wall myself and thats how I use HomeAssitant around the house. I really really love your take on Lovelace UI and very deep in the Apple Ecosystem and love the way that this looks…
BUT
Coding is not my strongest suite and I would love to know how I can actually get this myself, I know that the files are here but I havent a clue on how to actually bring this to life lol…
I would really really appreciate your help!
Didn’t work. Did you change any setting in his code?
Hi
i change nothing more…the mardown settings are now in the themes.ymal, if I got that right.
here the post from mattias…
This config is gorgeous but also very complex. It relies heavily on nested custom button card templates (which I myself am struggling with). Start by looking at the custom button card documentation regarding templates, and then take a look at Mattias’ button_card_templates.yaml.
This config is so wonderful but I am having massive issues with button card configuration templates. The configuration templates “work,” but it seems like the js templates within (such as entity.entity_id) are not getting passed through/rendered. I’ve tried multi-line syntax, the syntax that Mattias’ uses, and the syntax that Rob Coleman uses here. The only one that worked is the one that Rob posted…and only for a bit!
Has anyone had this issue/fixed it?
This is specifically for tablets, for mobile I’d consider skipping picture elements.
It’s the lock domain. I only use it to have a lock in homekit (lock computer from dashboard shutdown)
Yes, it irks me as well. I guess in pseudocode, instead of
if on animate1
else animate2
you’d have to
if from off to on animate1,
if from on to off animate2
else no_animation
or block it on page load or something, I don’t know 
1 Like
Picture elements, panel mode, button-card, card-mod. That’s basically it, or at least to get you started.
base is a simple switch. light, media, person etc is just built upon that. It can get confusing but you could try to skip the template and do it the “normal” way for a single card, if that works, it’ll work in templates.
Also read the entire button-card readme (I know )
Thanks! I succeeded to solve it by adding a boolean that is True only 5 seconds after turning the AC off.
if (entity.state === 'off' && states['input_boolean.ac_recent_off'].state === 'off')
{ return
`${style} <g class="static">${path}
</g> </svg>`;
}
also, first time ever for me on JavaScript! (not a programmer)
Hmm, if I think about it for more than 5 seconds, what I said wouldn’t work. The animation always goes from off to on etc, so your solution with timing is probably the right way to do it. I’ll see if there’s another way instead of using an input boolean.
not a programmer either, just persistent
1 Like
I used an input boolean + an automation that changes it to true when AC is off, and change it back to off after 5 seconds. It would probably be better to use a binary sensor yaml template though, instead of input (because there is no need to ever change it by the user).
I also want to make something like that for the turning ON, so it will be already in fast spinning animation, if the AC has been on for a while. 
1 Like
Hi,
I am trying to install/add it to my home assistant, but I can not find any guide or something to help me with.
Can you help me on that or point me to a guide to start looking ?
thanks
Vasilis
Hei, Kanskje du kunne hjulpet meg med dette oppsettet? Hadde satt stor pris på det
