Help us find cards that don't work!
KTibow opened this issue · 17 comments
KTibow commented
This card is mostly tested, but not on everything. Here's what I've verified works:
- Alarm panel card
- Button card
- Conditional
- Entities card
- Inline buttons
- Inline switches
- Inline input select
- Top toggle switches
- Header/footer
- Entity card
- Entity filter
- Gauge card
- Glance card
- History graph card
- Horizontal stack
- Humidifier card
- Light card
- Map card
- Markdown card
- Media control card
- Picture card
- Picture elements card Note: Make your background transparent or soft UI for this to work
- Picture entity card
- Picture glance
- Sensor card
- Shopping list
- Vertical stack
- Weather forecast card
- Webpage card
- Badges
- Custom: lg-laundry-card
- Custom: bar-card
- Custom: button-card
- Custom: search-card
- Custom: simple-weather-card
- Custom: vacuum-card
To fix / to check:
- Thermostat
- Plant status
Stuff I don't know how to provide a fix for:
- Extra margin at card chooser
- Custom: fan-control-row
chasut commented
I am using custom:fan-control-row, looks fine but the fan icon does not animate. Works good on normal entity.
KTibow commented
@chasut it's buried under multiple layers of shadow-roots. Usually it seems card-mod can only go through one layer, so I can't do this...
chasut commented
Too bad. Thank you for looking into it. It's kinda silly, but i really like little touches like that. Will have to find another method.
Thank you for the theme, it is been really helpful and looks fantastic!
KTibow commented
Yeah... You can always use a horizontal stack and button-card.
atomicpapa commented
Markdown card isn't working.
KTibow commented
Well what were you looking for? A shadow? Centered header?
atomicpapa commented
Sorry.. yes, centered header
KTibow commented
Okay, planned for next release.
atomicpapa commented
Not sneaking this one in like the Vertical Stack fix? :-) Great work! Really appreciate what you are doing!
CDRX2 commented
Couple issues I found when testing on my setup:
-
The map card does not have border-radius on all four corners
-
custom:stack-in-card doesn't remove box-shadow
-
Some cards (the ones that I found were custom:weather-card, custom:stack-in-card and calendar) appear wider than others (entities or glance, for example)
For reference, running HassOS 4.18 on a Pi4, HA version 0.118.3, Supervisor 2020.11.3. No styling applied to the cards in the pictures above and all of these are also true for the dark version of the theme.
KTibow commented
I tried to fix some of your issues, can you try this file:
# Thanks @JuanMTech, @thomasloven, and @N-l1.
Light Soft UI:
# Color
primary-color: "#609ceb"
light-primary-color: var(--primary-color)
accent-color: "#60bfeb"
mdc-theme-secondary: var(--accent-color)
# More colors
success-color: "#77EB60"
info-color: var(--primary-color)
warning-color: "#EBEB60"
error-color: "#D18941"
# Background
primary-background-color: "#f1f4f7"
secondary-background-color: var(--primary-background-color)
# Text
primary-text-color: "#4A4A4A"
secondary-text-color: var(--primary-text-color)
codemirror-meta: var(--primary-text-color)
material-secondary-text-color: var(--secondary-text-color)
text-primary-color: "#FFFFFF"
disabled-text-color: "#717171"
# Fonts
paper-font-headline_-_font-family: Quicksand, Roboto, sans-serif
paper-font-headline_-_font-weight: "600"
paper-font-subhead_-_font-family: Quicksand, Roboto, sans-serif
paper-font-subhead_-_font-weight: "550"
paper-font-subhead_-_line-height: 2.2em
ha-card-header-font-family: Quicksand, Roboto, sans-serif
ha-card-header-font-weight: "600"
code-font-family: Cascadia Code PL, Cascadia Mono PL, Cascadia Code, Cascadia Mono, monospace
paper-font-common-code_-_font-family: var(--code-font-family)
# Sidebar
sidebar-icon-color: var(--primary-text-color)
sidebar-text-color: var(--primary-text-color)
sidebar-selected-icon-color: var(--light-primary-color)
sidebar-selected-text-color: var(--light-primary-color)
sidebar-background-color: var(--primary-background-color)
sidebar-selected-background-color: var(--primary-background-color)
divider-color: var(--primary-background-color)
# Header
app-header-background-color: var(--primary-background-color)
app-header-text-color: var(--primary-text-color)
# Icons
state-icon-color: var(--primary-text-color)
state-icon-active-color: var(--primary-color)
state-icon-unavailable-color: var(--disabled-text-color)
# Sliders
paper-slider-knob-color: var(--primary-color)
paper-slider-knob-start-color: var(--primary-color)
paper-slider-pin-color: var(--primary-color)
paper-slider-active-color: var(--primary-color)
paper-slider-secondary-color: var(--light-primary-color)
# Labels
label-badge-background-color: var(--primary-background-color)
label-badge-text-color: var(--primary-text-color)
label-badge-red: "#EB6065"
label-badge-green: "#60EB67"
label-badge-blue: "#60B1EB"
label-badge-yellow: "#EBC860"
label-badge-gray: "#666F80"
# Cards
ha-card-border-radius: "13.75px"
ha-card-box-shadow: -5.25px -5.25px 5.25px 0 rgba(255, 255, 255, .5), 5.25px 5.25px 5.25px 0 rgba(0, 0, 0, .03)
ha-card-border-color: var(--primary-color)
ha-card-border-width: 3px
card-background-color: var(--primary-background-color)
paper-card-background-color: var(--primary-background-color)
paper-listbox-background-color: var(--primary-background-color)
# Switches
switch-checked-button-color: var(--primary-color)
switch-checked-track-color: var(--primary-color)
switch-unchecked-button-color: var(--disabled-text-color)
switch-unchecked-track-color: var(--disabled-text-color)
paper-toggle-button-checked-button-color: var(--primary-color)
paper-toggle-button-checked-bar-color: var(--primary-color)
paper-toggle-button-unchecked-button-color: var(--disabled-text-color)
paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
# Tables
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--primary-background-color)
data-table-background-color: var(--primary-background-color)
# Dropdowns
material-background-color: var(--primary-background-color)
material-secondary-background-color: rgba(0, 0, 0, 0.1)
mdc-theme-surface: var(--primary-background-color)
# Convenience
primary-name-text-color: grey
primary-state-text-color: grey
primary-icon-color: grey
primary-yellow: "#FAD46B"
dark-primary-yellow: "#DAB44B"
tertiary-background-color: "#DAE2EB"
ha-card-box-shadow-inset: inset -5.5px -5.5px 5.5px 0 rgba(255, 255, 255, .5), inset 5.5px 5.5px 5.5px 0 rgba(0, 0, 0, .03)
soft-ui-pressed: var(--ha-card-box-shadow-inset)
soft-ui-shadow: var(--ha-card-box-shadow)
red: "#eb6060"
red-orange: "#eb8e60"
orange-red: "#eb9a60"
orange: "#eba560"
orange-yellow: "#ebc860"
yellow-orange: "#ebd460"
yellow: "#ebdf60"
yellow-green: "#c8eb60"
green-yellow: "#b1eb60"
green: "#60eb60"
green-cyan: "#60eba5"
cyan-green: "#60ebc8"
cyan: "#60ebeb"
cyan-blue: "#60bceb"
blue-cyan: "#608eeb"
blue: "#6060eb"
blue-purple: "#7760eb"
purple-blue: "#8e60eb"
purple: "#a560eb"
purple-pink: "#bc60eb"
pink-purple: "#d460eb"
pink: "#eb60eb"
pink-red: "#eb60bc"
red-pink: "#eb608e"
# Card-mod
card-mod-theme: "Light Soft UI"
theme-red: firebrick
theme-green: forestgreen
theme-blue: deepskyblue
ha-label-badge-title-font-size: 1em
# Cards
card-mod-card-yaml: |
ha-full-calendar$: |
#calendar {
box-shadow: var(--ha-card-box-shadow);
border-radius: var(--ha-card-border-radius);
margin: 12px;
padding: 10px;
}
.header {
box-shadow: none;
}
.: |
* {
--soft-ui-shadow: var(--ha-card-box-shadow) !important;
--soft-ui-pressed: var(--ha-card-box-shadow-inset) !important;
}
ha-card.type-markdown {
box-shadow: none;
}
ha-card.type-markdown > ha-markdown {
padding: 8px;
}
ha-card:not(.type-markdown) {
background-color: var(--primary-background-color);
border-radius: var(--ha-card-border-radius);
}
ha-card:not(.type-markdown):not(.type-custom-button-card):not(.type-entities):not(.type-custom-mod-card):not(.type-custom-bar-card):not(.type-history-graph):not(.type-iframe):not(.type-glance) {
margin: 20px 6px;
box-shadow: var(--ha-card-box-shadow);
}
ha-card.type-custom-vacuum-card > .preview {
--primary-color: var(--primary-background-color);
}
ha-card.type-custom-vacuum-card > .preview > * {
color: var(--primary-text-color);
}
ha-card.type-custom-vacuum-card > .preview > .header > .battery > ha-icon {
color: var(--primary-text-color);
}
ha-card.type-custom-vacuum-card > .preview > .metadata > .vacuum-name {
color: var(--primary-text-color);
}
ha-card.type-picture-entity,
ha-card.type-picture-glance {
padding: 10px;
}
ha-card.type-picture-entity > .footer,
ha-card.type-picture-glance > .box {
margin: 10px;
border-radius: 15px;
}
ha-card.type-entities, ha-card.type-custom-bar-card, ha-card.type-entity,
ha-card.type-history-graph, ha-card.type-map, ha-card.type-iframe,
ha-card.type-glance, ha-card.type-custom-button-text-card,
ha-card.type-custom-select-list-card, ha-card.type-calendar,
ha-card.type-custom-stack-in-card {
box-shadow: none !important;
margin: 25px 6px;
}
ha-card > #states > div > * {
padding-top: 8px;
padding-bottom: 8px;
width: 95%;
margin: 0 auto 0 5px;
}
ha-card > #states > div > *:not(hui-button-row):not(hui-input-select-entity-row):not(hui-input-number-entity-row):not(hui-input-text-entity-row):not(hui-cast-row) {
display: block;
}
ha-card.type-media-control, ha-card.type-media-control > * {
background-color: var(--primary-background-color) !important;
color: var(--secondary-text-color) !important;
}
ha-card > #states,
ha-card > .header-footer,
ha-card > hui-graph-header-footer,
ha-card.type-glance > .entities,
ha-card:not(.type-humidifier):not(.type-light):not(.type-weather-forecast) > .content,
ha-card.type-map > #root > #map,
ha-card.type-iframe > #root,
ha-card.type-custom-select-list-card > #list,
ha-card.type-custom-stack-in-card > div:nth-of-type(1) {
box-shadow: var(--ha-card-box-shadow);
border-radius: var(--ha-card-border-radius);
margin: 12px;
padding: 10px;
}
ha-card.type-map > #root > #map {
margin: 0;
}
ha-card.type-iframe > #root > iframe {
border-radius: var(--ha-card-border-radius);
}
ha-card.type-entity > .info {
padding: 16px;
box-shadow: var(--ha-card-box-shadow);
border-radius: var(--ha-card-border-radius);
margin: 12px;
}
ha-card > .header-footer {
margin: 25px 12px;
}
ha-card > .card-header {
box-shadow: none;
}
ha-card > .card-header > .name {
text-align: center;
width: 100%;
}
ha-card > .card-header > hui-entities-toggle {
margin: 0 25px 0 -25px;
}
ha-card.type-custom-bar-card > .card-header,
ha-card.type-history-graph > .card-header,
ha-card.type-map > .card-header,
ha-card.type-iframe > .card-header,
ha-card.type-shopping-list > .card-header,
ha-card.type-glance > .card-header {
text-align: center;
width: 70%;
margin: 0 auto;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
ha-icon[data-domain="fan"][data-state="on"] {
animation: spin 4s infinite linear;
}
# Header
header-height: 48px # Change this to 0px for header on the bottom. You're 1/3 there.
card-mod-root-yaml: |
paper-tabs$: |
/* Uncomment this for header on the bottom. You're 2/3 there.
#selectionBar {
bottom: unset !important;
}
*/
.: |
/* This moves the header up. */
app-header {
transform: translate3d(0px, -48px, 0px);
}
/* Let's change the background. */
app-header, app-toolbar {
background: var(--primary-background-color) !important;
color: var(--primary-text-color) !important;
}
/* We're still going to need a way to see that we're in edit mode. */
app-header.edit-mode {
padding-bottom: calc(var(--ha-card-border-width, 2px) * 2);
border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color);
}
/* This changes the color of the currently selected tab. */
ha-tabs {
--paper-tabs-selection-bar-color: var(--primary-color) !important;
}
paper-tab[aria-selected=true] {
color: var(--primary-color) !important;
}
/* This hides the help button. */
a.menu-link[target="_blank"] {
display: none;
}
/* This makes the plus color the same as the background. */
#add-view {
color: var(--primary-background-color);
}
/* This hides the title. */
[main-title] {
display: none;
}
/* This hides the app-toolbar in edit mode. */
app-toolbar.edit-mode {
height: 0;
}
/* This moves the edit mode buttons back in. */
app-toolbar.edit-mode > mwc-icon-button {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
app-toolbar.edit-mode > ha-button-menu {
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
/* This adds a bit more padding, mainly for unused entities. */
app-header.edit-mode > div {
padding-left: 5px;
}
/* Uncomment this for header on the bottom. You're 3/3 there.
app-header {
top: calc(100vh - 60px) !important;
bottom: 0 !important;
transform: unset !important;
}
*/
# Badges and columns
card-mod-view-yaml: |
hui-masonry-view$: |
#columns {
flex-direction: column !important;
margin: 0 auto;
max-width: 500px;
}
card-mod-badge-yaml: |
.: |
:host {
border-radius: 5px;
padding: 11px 8px;
margin: 11px 12px 24px 12px;
display: inline-block;
--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;
box-shadow: var(--ha-card-box-shadow);
}
ha-state-label-badge$ha-label-badge$: |
.label-badge {
background: none;
}
.title {
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
}
# Style more info
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: blur(2px);
background-color: #f1f4f7cc !important;
}
.mdc-dialog__scrim {
background-color: #f1f4f7cc !important;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: var(--primary-background-color);
border-radius: var(--ha-card-border-radius);
box-shadow: var(--ha-card-box-shadow);
transform: scale(0.9);
overflow: hidden;
}
.mdc-dialog__content {
padding: 36px !important;
padding-bottom: 36px !important;
transform: scale(1.11);
}
ha-header-bar:
$: |
.mdc-top-app-bar {
background: none !important;
}
# Spin fans
card-mod-row-yaml: |
"*:first-child":
$: |
@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 4s infinite linear;
{% endif %}
}
CDRX2 commented
Ok, so, new file fixes the map, fixes the width issue, changes the way the calendar looks:
Here is my stack-in-card config:
- cards:
- box_shadows: false
entity: sensor.recently_added_movies
flag: false
image_style: fanart
max: 4
title: New movies
type: 'custom:upcoming-media-card'
- box_shadows: false
entity: sensor.recently_added_tv
flag: false
image_style: fanart
max: 4
title: New series
type: 'custom:upcoming-media-card'
mode: horizontal
type: 'custom:stack-in-card'
CDRX2 commented
Just installed the latest update, still found all the bugs from my first post.
sanderlv commented
When enabling this them I have no more icons in my picture elements card. How to solve that?
KTibow commented
@sanderlv this theme is outdated, please use lovelace-soft-theme instead.
sanderlv commented
I have tried that before, but same issue. Will open issue there. Thanks