Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Recent change with chip card? #21

Closed
tungmeister opened this issue May 16, 2022 · 2 comments
Closed

Recent change with chip card? #21

tungmeister opened this issue May 16, 2022 · 2 comments

Comments

@tungmeister
Copy link

I've had a custom theme based on the example here with a slight size increase for the chip card however a recent release seems to have changed the config of the card? my theme previously increased the chip card by a few pixels however now it's very large as can be seen from the screenshot below:
image
here is my theme:

Mushroom-test:
  # HA variables
  ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
  ha-card-border-radius: 12px
  # Mushroom layout
  mush-spacing: 12px
  # Title
  mush-title-padding: 24px 12px 16px
  mush-title-spacing: 12px
  mush-title-font-size: 28px
  mush-title-font-weight: normal
  mush-title-line-height: 1.2
  mush-subtitle-font-size: 16px
  mush-subtitle-font-weight: normal
  mush-subtitle-line-height: 1.2
  # Card
  mush-icon-border-radius: 50%
  mush-control-border-radius: 12px
  mush-card-primary-font-size: 14px
  mush-card-secondary-font-size: 12px
  mush-card-primary-font-weight: bold
  mush-card-secondary-font-weight: bolder
  #card-background-color: rgba(2, 58, 162, 0.2)
  # Chips
  mush-chip-spacing: 8px
  mush-chip-padding: 0 12px
  mush-chip-height: 38px
  mush-chip-border-radius: 18px
  mush-chip-font-size: 1em # relative to chip height
  mush-chip-font-weight: bold
  mush-chip-icon-size: 1.5em # relative to chip height
  # Slider
  mush-slider-threshold: 10
  # Colors
  mush-rgb-red: 244, 67, 54
  mush-rgb-pink: 233, 30, 99
  mush-rgb-purple: 156, 39, 176
  mush-rgb-deep-purple: 103, 58, 183
  mush-rgb-indigo: 63, 81, 181
  mush-rgb-blue: 33, 150, 243
  mush-rgb-light-blue: 3, 169, 244
  mush-rgb-cyan: 0, 188, 212
  mush-rgb-teal: 0, 150, 136
  mush-rgb-green: 76, 175, 80
  mush-rgb-light-green: 139, 195, 74
  mush-rgb-lime: 205, 220, 57
  mush-rgb-yellow: 255, 235, 59
  mush-rgb-amber: 255, 193, 7
  mush-rgb-orange: 255, 152, 0
  mush-rgb-deep-orange: 255, 87, 34
  mush-rgb-brown: 121, 85, 72
  mush-rgb-grey: 158, 158, 158
  mush-rgb-blue-grey: 96, 125, 139
  mush-rgb-black: 0, 0, 0
  mush-rgb-white: 255, 255, 255

  mush-rgb-info: var(--rgb-blue)
  mush-rgb-success: var(--rgb-green)
  mush-rgb-warning: var(--rgb-orange)
  mush-rgb-danger: var(--rgb-red)

  mush-rgb-state-cover: var(--rgb-blue)
  mush-rgb-state-fan: var(--rgb-green)
  mush-rgb-state-light: var(--rgb-orange)
  mush-rgb-state-entity: var(--rgb-blue)
  mush-rgb-state-switch: var(--rgb-blue)

  mush-rgb-state-alarm-disarmed: var(--rgb-info)
  mush-rgb-state-alarm-armed: var(--rgb-success)
  mush-rgb-state-alarm-triggered: var(--rgb-danger)

  mush-rgb-state-person-home: var(--rgb-success)
  mush-rgb-state-person-not-home: var(--rgb-danger)
  mush-rgb-state-person-zone: var(--rgb-info)
  mush-rgb-state-person-unknown: var(--rgb-grey)

  # You must keep this to support light/dark theme
  modes:
    light: {}
    dark: {}
@piitaya
Copy link
Owner

piitaya commented May 16, 2022

Yep, I fixed the em sizes. You can copy the new sizes from the readme 😉

@tungmeister
Copy link
Author

Thanks, working as expected now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants