Help us find cards that don't work!

[KTibow]

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]

I am using custom:fan-control-row, looks fine but the fan icon does not animate. Works good on normal entity.

[KTibow]

@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]

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]

Yeah... You can always use a horizontal stack and button-card.

[atomicpapa]

Markdown card isn't working.

[KTibow]

Well what were you looking for? A shadow? Centered header?

[atomicpapa]

Sorry.. yes, centered header

[KTibow]

Okay, planned for next release.

[atomicpapa]

Not sneaking this one in like the Vertical Stack fix? :-) Great work! Really appreciate what you are doing!

[CDRX2]

Couple issues I found when testing on my setup:

1. The map card does not have border-radius on all four corners

2. custom:stack-in-card doesn't remove box-shadow

3. 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]

@CDRX2 example stack-in-card config?

[KTibow]

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]

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]

Just installed the latest update, still found all the bugs from my first post.

[sanderlv]

When enabling this them I have no more icons in my picture elements card. How to solve that?

[KTibow]

@sanderlv this theme is outdated, please use lovelace-soft-theme instead.

[sanderlv]

I have tried that before, but same issue. Will open issue there. Thanks