Help us find cards that don't work!

KTibow commented 4 years ago

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 4 years ago

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

KTibow commented 4 years ago

@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 4 years ago

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 4 years ago

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

atomicpapa commented 4 years ago

Markdown card isn't working.

KTibow commented 4 years ago

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

atomicpapa commented 4 years ago

Sorry.. yes, centered header

KTibow commented 4 years ago

Okay, planned for next release.

atomicpapa commented 4 years ago

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

CDRX2 commented 4 years ago

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 4 years ago

@CDRX2 example stack-in-card config?

KTibow commented 4 years ago

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 4 years ago

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 3 years ago

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

sanderlv commented 2 years ago

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

KTibow commented 2 years ago

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

sanderlv commented 2 years ago

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

KTibow / lovelace-light-soft-ui-theme

Help us find cards that don't work! #3