Grey border around Cards

[kl4ppdrachen]

Hey,

I installed the fonts and the theme over HACS. But around all cards I got a gray border and not that clean looking like the screenshots:

I also got this in light and dark, Firefox, Chrome and in the Companion iOS App. I also cleaned the cache.

I am running Home Assistant 2023.3.3 with Frontend 20230309.0.

Furthermore, I hope some know where the problem is.

Greeting

[dennidoubles]

Are you using Mushroom in your Kibibit theme @kl4ppdrachen ?
If so, try using different card theme, like Mushroom Shadow. Maybe it helps.

[kl4ppdrachen]

using Mushroom and normal HA cards.

[jsternadel]

I'm experiencing the same issue with the borders using this theme and a variety of mushroom and stock HA cards. Digging into the CSS a bit in the Chrome console I think I found an issue.

My findings are using HA v2023.5.3 and Kibibit v1.1.1

The ha-card element uses:
border-color: var(--ha-card-border-color, var(--divider-color,#e0e0e0));

The variable --ha-card-border-color does not exist in the kibibit theme and therefore the rule will use the fallback var --divider-color.

The variable divider-color in the theme is defined as:
divider-color: var(--primary-background-color)

The primary-background-color in the theme is set to #212121 which is a dark grey color. The dark grey divider color is also effecting any divider lines in the calendar card. The variable --mdc-button-outline-color also references the variable --divider-color and thus the "Today" button on the calendar additionally has the dark grey border.

Temporary fix -- probably breaks other cards i havent tested

# kibibit theme - Default ('White' Cards)
#
kibibit:
  # TEMP FIXES
  # use at your own risk...could break some shit
  mdc-button-outline-color: "rgba(0, 0, 0, 0)" # transparent
  ha-card-border-width: "0px" # remove annoying borders
  divider-color: "rgba(25, 25, 25, 0.1)"

  # Global
  background-image: "center / cover no-repeat fixed url('https://thatkookooguy.github.io/https-assets/bg-kibibit-theme.png')"
  lovelace-background: var(--background-image)
  primary-color: "#209cee"
  light-primary-color: "#B6B6C1"
  primary-background-color: "#212121"
  secondary-background-color: rgba(25, 25, 25, 0.7)
  #divider-color: var(--primary-background-color) DONT FORGET TO UNCOMMENT ON UPDATES
  accent-color: rgba(255, 159, 9, 1)

The above code is what im using to workaround the weird borders. I commented out the default divider-color and added the 3 variables I noticed causing issues to the TEMP FIXES section. So far so good but I only started deep diving into dashboards last night.

[kl4ppdrachen]

Hey, thanks!

I am using this atm to get rid of the boarder: style: 'ha-card {--ha-card-border-width: 0}'

the problem is, that I need to paste this into every single - type: