1006 lines
52 KiB
YAML
1006 lines
52 KiB
YAML
# Frosted Glass
|
||
# ver. 1.3 - (2025-11-24)
|
||
|
||
Frosted Glass:
|
||
modes:
|
||
light:
|
||
card-mod-theme: "Frosted Glass Light"
|
||
|
||
# =========================
|
||
# HEADER (Top Bar)
|
||
# =========================
|
||
app-header-backdrop-filter: 'blur(6px) saturate(1.2)'
|
||
app-header-background-color: 'rgba(234, 235, 238, 0.1)'
|
||
app-header-text-color: 'rgba(19, 21, 54, 0.95)'
|
||
app-header-edit-background-color: 'rgba(255, 255, 255, 0.8)'
|
||
app-header-edit-text-color: 'rgba(19, 21, 54, 0.98)'
|
||
app-theme-color: 'rgb(91, 138, 168)' # 1.2 Glass – header theme color hint for browsers
|
||
|
||
# =========================
|
||
# SIDEBAR / DRAWER
|
||
# =========================
|
||
sidebar-background-color: 'rgba(254, 244, 242, 0.7)'
|
||
sidebar-icon-color: 'rgba(19, 21, 54, 0.6)'
|
||
sidebar-text-color: 'rgba(19, 21, 54, 0.8)'
|
||
sidebar-selected-icon-color: 'rgba(19, 21, 54, 0.95)'
|
||
sidebar-selected-text-color: 'rgba(19, 21, 54, 0.98)'
|
||
|
||
# Sidebar blur (card-mod-root section at end handles blur effect!)
|
||
|
||
# =========================
|
||
# DIALOGS
|
||
# =========================
|
||
ha-dialog-surface-backdrop-filter: 'blur(8px)'
|
||
ha-dialog-surface-background: 'rgba(234, 235, 238, 0.7)'
|
||
dialog-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.15)' # 1.2 Glass – fix: remove stray quotes inside rgba
|
||
paper-dialog-background-color: 'rgba(234, 235, 238, 0.7)'
|
||
mdc-dialog-scrim-color: 'rgba(0, 0, 0, 0.6)'
|
||
|
||
# =========================
|
||
# CARDS / CARD-MOD
|
||
# =========================
|
||
card-mod-card: |
|
||
/* Base reset */
|
||
ha-card {
|
||
background: transparent;
|
||
backdrop-filter: none;
|
||
-webkit-backdrop-filter: none;
|
||
}
|
||
|
||
/* Glass layer */
|
||
ha-card::before { /* 1.2 Glass – glass overlay */
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: var(--ha-card-glass-tint, rgba(255, 255, 255, 0.08)); /* 1.2 Glass – subtle tint */
|
||
backdrop-filter: var(--ha-card-backdrop-filter, blur(8px) saturate(1.2));
|
||
-webkit-backdrop-filter: var(--ha-card-backdrop-filter, blur(8px) saturate(1.2));
|
||
z-index: -1;
|
||
pointer-events: none;
|
||
border-radius: inherit;
|
||
box-shadow: var(--ha-card-glass-inset-shadow, /* 1.2 Glass – inner bevel/glow */
|
||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.30) inset,
|
||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.30) inset,
|
||
0 0 8px 1px rgba(255, 255, 255, 0.10) inset,
|
||
0 0 2px 0 rgba(0, 0, 0, 0.10)
|
||
);
|
||
}
|
||
|
||
/* Headings + Glance (kept as your exclusions) */
|
||
:host(hui-heading-card) ha-card,
|
||
:host(hui-glance-card) ha-card {
|
||
background: none !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
}
|
||
:host(hui-heading-card) ha-card::before,
|
||
:host(hui-glance-card) ha-card::before {
|
||
content: none !important;
|
||
}
|
||
|
||
/* IMPORTANT: Allow normal Markdown cards to be glassy; only exclude text-only variant */
|
||
/* (Fix) Removed global :host(hui-markdown-card) exclusion you had before # 1.2 Glass – bugfix
|
||
so standard Markdown gets the glass. The text-only variant remains excluded below. */
|
||
|
||
/* Data tables */
|
||
.mdc-data-table {
|
||
background: none !important;
|
||
}
|
||
.mdc-data-table__header-cell {
|
||
background: rgba(255, 255, 255, 0.1) !important;
|
||
backdrop-filter: var(--ha-card-backdrop-filter) !important;
|
||
-webkit-backdrop-filter: var(--ha-card-backdrop-filter) !important;
|
||
box-shadow: var(--ha-card-glass-inset-shadow) !important; /* 1.2 Glass – consistent bevel */
|
||
}
|
||
|
||
/* Markdown card with text_only → no background or blur */ # 1.1.9 Change - text only markdown and mushroom title card no background // Beginning
|
||
:host(.text-only) ha-card,
|
||
:host(.text-only) ha-card::before,
|
||
ha-card.text-only,
|
||
ha-card.text-only::before { /* 1.2 Glass – add ha-card.text-only for compatibility */
|
||
background: none !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
box-shadow: none !important;
|
||
content: none !important;
|
||
}
|
||
|
||
/* Mushroom title card (no background or blur) */
|
||
:host(mushroom-title-card) ha-card {
|
||
background: none !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
box-shadow: none !important; /* 1.2 Glass – ensure no bevel */
|
||
}
|
||
:host(mushroom-title-card) ha-card::before {
|
||
content: none !important;
|
||
}
|
||
|
||
/* === Prevent frosted glass from applying to bubble cards === # 1.2 Change - Bubble cards are no longer applied */
|
||
:host(.type-custom-bubble-card) ha-card {
|
||
background: none !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
box-shadow: none !important;
|
||
border-radius: 0px !important;
|
||
}
|
||
:host(.type-custom-bubble-card) ha-card::before {
|
||
content: none !important;
|
||
background: none !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
}
|
||
|
||
/* === Prevent frosted glass from applying to mushroom-chips-card outer container === # 1.2 Change - Outer mushroom chips no longer applied */
|
||
:host(mushroom-chips-card) ha-card {
|
||
background: none !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
:host(mushroom-chips-card) ha-card::before {
|
||
content: none !important;
|
||
background: none !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
}
|
||
|
||
# =========================
|
||
# CARD-MOD-ROOT GLOBAL CSS
|
||
# =========================
|
||
card-mod-root: |
|
||
:host {
|
||
--ha-card-background: rgba(242, 245, 255, 0.1);
|
||
--ha-card-box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
|
||
--ha-card-border-width: 0.5px;
|
||
--ha-card-border-color: rgba(255, 255, 255, 0.3);
|
||
--ha-card-backdrop-filter: blur(8px) saturate(1.2); # 1.1.9 change - added blur & saturation for badges
|
||
|
||
/* Glass system tokens (new) */
|
||
--ha-card-glass-tint: rgba(255, 255, 255, 0.08); # 1.2 Glass – global tint layer
|
||
--ha-card-glass-inset-shadow: # 1.2 Glass – inner bevel/glow (Liquid Glass inspired)
|
||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.30) inset,
|
||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.30) inset,
|
||
0 0 8px 1px rgba(255, 255, 255, 0.10) inset,
|
||
0 0 2px 0 rgba(0, 0, 0, 0.10);
|
||
}
|
||
|
||
/* Custom text divider row size fix */
|
||
custom-text-divider-row .text-divider-content {
|
||
background: #fff !important; /* or your color */
|
||
opacity: 1 !important;
|
||
box-shadow: none !important;
|
||
border-radius: 10px !important; /* adjust as needed */
|
||
padding: 0 8px !important;
|
||
--text-divider-font-size: 16px !important;
|
||
--text-divider-line-size: 1px;
|
||
--text-divider-color: rgba(19, 21, 54, 1) !important;
|
||
}
|
||
|
||
|
||
# Tokens (used throughout cards/UI)
|
||
--token-rgb-primary: 106, 116, 211;
|
||
--token-rgb-black: 0, 0, 0;
|
||
--token-rgb-white: 240, 243, 255;
|
||
--token-rgb-purple: 129, 45, 250;
|
||
--token-rgb-pink: 204, 0, 136;
|
||
--token-rgb-red: 204, 0, 51;
|
||
--token-rgb-deep-purple: 98, 0, 234;
|
||
--token-rgb-indigo: 48, 63, 159;
|
||
--token-rgb-blue: 33, 150, 243;
|
||
--token-rgb-light-blue: 3, 169, 244;
|
||
--token-rgb-cyan: 106, 116, 211;
|
||
--token-rgb-teal: 106, 116, 211;
|
||
--token-rgb-green: 56, 142, 60;
|
||
--token-rgb-light-green: 139, 195, 74;
|
||
--token-rgb-lime: 205, 220, 57;
|
||
--token-rgb-yellow: 250, 183, 0;
|
||
--token-rgb-amber: 255, 193, 7;
|
||
--token-rgb-orange: 255, 158, 0;
|
||
--token-rgb-deep-orange: 255, 87, 34;
|
||
--token-rgb-brown: 121, 85, 72;
|
||
--token-rgb-grey: 103, 104, 119;
|
||
--token-rgb-blue-grey: 96, 125, 139;
|
||
--token-rgb-disabled: 189, 189, 189;
|
||
--token-rgb-state-inactive: 176, 190, 197;
|
||
|
||
--token-color-primary: rgb(var(--token-rgb-primary));
|
||
--token-color-primary-light: rgb(167 182 199);
|
||
--token-color-accent: rgb(var(--token-rgb-teal));
|
||
--token-color-disabled: rgb(173 176 184);
|
||
--token-color-feedback-info: rgb(106, 116, 211);
|
||
--token-color-feedback-warning: rgb(255, 219, 117);
|
||
--token-color-feedback-error: rgb(234, 114, 135);
|
||
--token-color-feedback-success: rgb(118, 214, 152);
|
||
--token-color-icon-primary: rgba(19, 21, 54, 0.95);
|
||
--token-color-icon-secondary: rgba(19, 21, 54, 0.75);
|
||
--token-color-icon-sidebar: rgba(19, 21, 54, 0.6);
|
||
--token-color-icon-sidebar-selected: var(--token-color-icon-primary);
|
||
--token-color-text-primary: rgba(19, 21, 54, 0.98);
|
||
--token-color-text-secondary: rgba(19, 21, 54, 0.8);
|
||
--token-color-text-disabled: rgba(19, 21, 54, 0.45);
|
||
--token-color-text-sidebar-selected: var(--token-color-text-primary);
|
||
--token-color-text-sidebar: var(--token-color-text-secondary);
|
||
--token-color-text-label-badge: rgba(19, 21, 54, 0.85);
|
||
--token-color-text-chip: rgb(var(--token-rgb-black));
|
||
--token-color-background-base: rgba(234, 235, 238, 0.6);
|
||
--token-color-background-secondary: rgba(245, 245, 245, 0.5);
|
||
--token-color-background-sidebar: var(--token-color-background-base);
|
||
--token-color-background-input-base: rgba(255, 255, 255, 0.7);
|
||
--token-color-background-input-disabled: rgba(245, 245, 245, 0.6);
|
||
--token-color-background-label-badge: rgb(230, 230, 230);
|
||
--token-color-background-card: rgba(255, 255, 255, 0.85);
|
||
--token-color-background-skrim: rgba(0, 0, 0, 0.6);
|
||
--token-color-background-divider: rgba(224, 224, 224, 0.3);
|
||
--token-color-background-scrollbar-thumb: rgb(180, 180, 180);
|
||
--token-color-background-label-badge-red: var(--token-color-feedback-error);
|
||
--token-color-background-label-badge-blue: var(--token-color-feedback-info);
|
||
--token-color-background-label-badge-green: rgb(78, 183, 128);
|
||
--token-color-background-label-badge-yellow: var(--token-color-feedback-warning);
|
||
--token-color-background-label-badge-grey: rgb(83, 90, 103);
|
||
--token-color-background-popup-scrim: rgba(0, 0, 0, 1);
|
||
--token-color-border-card: rgba(255, 255, 255, 0.3);
|
||
--token-color-switch-button-unchecked: rgba(0, 0, 0, 0.6);
|
||
--token-color-switch-track-unchecked: rgba(0, 0, 0, 0.3);
|
||
--token-color-codemirror-string: rgb(0, 77, 153);
|
||
--token-color-codemirror-keyword: rgb(70, 112, 216);
|
||
--token-color-codemirror-number: rgb(204, 85, 0);
|
||
--token-shadow-card-medium: 0 12px 20px rgba(0, 0, 0, 0.15);
|
||
--token-size-radius-small: 10px;
|
||
--token-size-radius-medium: 14px;
|
||
--token-size-radius-large: 18px;
|
||
--token-size-radius-card: var(--token-size-radius-large);
|
||
--token-size-width-border-card: 0.5px;
|
||
--token-size-height-slider: 5px;
|
||
--token-size-height-navbar: 60px;
|
||
--token-size-font-xs: calc(10px * var(--ha-font-size-scale));
|
||
--token-size-font-s: calc(12px * var(--ha-font-size-scale));
|
||
--token-size-font-m: calc(14px * var(--ha-font-size-scale));
|
||
--token-size-font-l: calc(15px * var(--ha-font-size-scale));
|
||
--token-size-font-xl: calc(20px * var(--ha-font-size-scale));
|
||
--token-size-font-2xl: calc(25px * var(--ha-font-size-scale));
|
||
--token-size-font-3xl: calc(29px * var(--ha-font-size-scale));
|
||
--token-size-font-4xl: calc(33px * var(--ha-font-size-scale));
|
||
--token-size-font-5xl: calc(42px * var(--ha-font-size-scale));
|
||
--token-size-spacing-medium: 17px;
|
||
--token-size-section-min-width: 320px;
|
||
--token-color-transparent: rgba(0, 0, 0, 0);
|
||
--token-color-black: rgb(0, 0, 0);
|
||
--token-color-white: rgb(255, 255, 255);
|
||
--token-opacity-ripple-hover: 0.1;
|
||
--token-font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||
--token-weight-font-title-card: 500;
|
||
|
||
# Additional color variables
|
||
--token-color-red: rgb(var(--token-rgb-red));
|
||
--token-color-green: rgb(var(--token-rgb-green));
|
||
--token-color-blue: rgb(var(--token-rgb-blue));
|
||
--token-color-yellow: rgb(var(--token-rgb-yellow));
|
||
--token-color-orange: rgb(var(--token-rgb-orange));
|
||
--token-color-purple: rgb(var(--token-rgb-purple));
|
||
--token-color-pink: rgb(var(--token-rgb-pink));
|
||
--token-color-amber: rgb(var(--token-rgb-amber));
|
||
--token-color-cyan: rgb(var(--token-rgb-cyan));
|
||
--token-color-teal: rgb(var(--token-rgb-teal));
|
||
--token-color-lime: rgb(var(--token-rgb-lime));
|
||
--token-color-light-green: rgb(var(--token-rgb-light-green));
|
||
--token-color-deep-orange: rgb(var(--token-rgb-deep-orange));
|
||
--token-color-brown: rgb(var(--token-rgb-brown));
|
||
--token-color-grey: rgb(var(--token-rgb-grey));
|
||
--token-color-blue-grey: rgb(var(--token-rgb-blue-grey));
|
||
--token-color-indigo: rgb(var(--token-rgb-indigo));
|
||
--token-color-deep-purple: rgb(var(--token-rgb-deep-purple));
|
||
--token-color-light-blue: rgb(var(--token-rgb-light-blue));
|
||
}
|
||
|
||
/* SIDEBAR BLUR */
|
||
.mdc-drawer .mdc-drawer__content {
|
||
backdrop-filter: blur(6px) saturate(1.2) !important;
|
||
-webkit-backdrop-filter: blur(6px) saturate(1.2) !important;
|
||
background: rgba(234, 235, 238, 0.7) !important;
|
||
box-shadow: var(--ha-card-glass-inset-shadow) !important; /* 1.2 Glass – subtle inner edge for consistency */
|
||
}
|
||
|
||
/* CARDS RADIUS */
|
||
ha-card {
|
||
border-radius: var(--token-size-radius-large);
|
||
border: var(--ha-card-border, var(--ha-card-border-width) solid var(--ha-card-border-color)); /* 1.2 Glass – ensure border follows tokens */
|
||
box-shadow: var(--ha-card-box-shadow);
|
||
}
|
||
ha-card ha-card {
|
||
--ha-card-border-width: 0px;
|
||
}
|
||
|
||
/* DRAWER SCRIM */
|
||
ha-drawer {
|
||
--mdc-drawer-scrim-color: rgba(0, 0, 0, 0.6) !important;
|
||
}
|
||
|
||
/* LABEL BADGE */
|
||
ha-label-badge {
|
||
--label-badge-background-color: rgba(230, 230, 230, 0.2) !important;
|
||
backdrop-filter: blur(12px) saturate(1.1) !important;
|
||
-webkit-backdrop-filter: blur(12px) saturate(1.1) !important;
|
||
--label-badge-text-color: rgba(19, 21, 54, 0.9) !important;
|
||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05) !important;
|
||
border: 0.5px solid rgba(255, 255, 255, 0.3) !important;
|
||
}
|
||
|
||
/* INPUTS */
|
||
input, ha-textfield, ha-select {
|
||
background: rgba(255, 255, 255, 0.7) !important;
|
||
backdrop-filter: blur(6px) !important;
|
||
-webkit-backdrop-filter: blur(6px);
|
||
border-radius: var(--token-size-radius-small);
|
||
border: none !important;
|
||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
|
||
}
|
||
|
||
# =========================
|
||
# TYPOGRAPHY
|
||
# =========================
|
||
ha-font-family-body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
ha-font-family-heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
ha-font-family-code: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
ha-font-family-longform: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
ha-card-header-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
mdc-typography-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
mdc-typography-button-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
mdc-typography-body1-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
md-list-item-label-text-font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
paper-font-common-base_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
paper-font-common-code_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
paper-font-body1_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
paper-font-subhead_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
paper-font-headline_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
paper-font-caption_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
paper-font-title_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
|
||
ha-font-weight-normal: '400'
|
||
ha-font-weight-medium: '500'
|
||
ha-font-weight-bold: '700'
|
||
ha-font-weight-body: '400'
|
||
ha-font-weight-heading: '500'
|
||
ha-font-weight-action: '500'
|
||
mdc-typography-button-font-weight: '500'
|
||
title-font-weight: 'var(--token-weight-font-title-card)'
|
||
|
||
ha-font-size-xs: '10px'
|
||
ha-font-size-s: '12px'
|
||
ha-font-size-m: '14px'
|
||
ha-font-size-l: '15px'
|
||
ha-font-size-xl: '20px'
|
||
ha-font-size-2xl: '25px'
|
||
ha-font-size-3xl: '29px'
|
||
ha-font-size-4xl: '33px'
|
||
ha-font-size-5xl: '42px'
|
||
title-font-size: '20px'
|
||
ha-heading-card-title-font-size: 'var(--token-size-font-l)'
|
||
ha-heading-card-title-font-weight: '500'
|
||
ha-font-smoothing: 'antialiased'
|
||
|
||
# =========================
|
||
# COLORS & MISCELLANEOUS
|
||
# =========================
|
||
|
||
# 1.2.1 - change add HA 2025.8 primary color scale aligned to theme
|
||
ha-color-primary-05: '#0D0E19'
|
||
ha-color-primary-10: '#131526'
|
||
ha-color-primary-20: '#20233F'
|
||
ha-color-primary-30: '#30345F'
|
||
ha-color-primary-40: '#40467F'
|
||
ha-color-primary-50: '#6A74D3' # base theme primary (kept)
|
||
ha-color-primary-60: '#8F97DE'
|
||
ha-color-primary-70: '#ADB3E7'
|
||
ha-color-primary-80: '#D2D5F2'
|
||
ha-color-primary-90: '#EAECF9'
|
||
ha-color-primary-95: '#F6F7FC'
|
||
|
||
# 1.2.1 - change add aliases for compatibility (some threads reference --color-primary-xx)
|
||
color-primary-05: '#0D0E19'
|
||
color-primary-10: '#131526'
|
||
color-primary-20: '#20233F'
|
||
color-primary-30: '#30345F'
|
||
color-primary-40: '#40467F'
|
||
color-primary-50: '#6A74D3'
|
||
color-primary-60: '#8F97DE'
|
||
color-primary-70: '#ADB3E7'
|
||
color-primary-80: '#D2D5F2'
|
||
color-primary-90: '#EAECF9'
|
||
color-primary-95: '#F6F7FC'
|
||
primary-text-color: 'rgba(19, 21, 54, 0.98)'
|
||
secondary-text-color: 'rgba(19, 21, 54, 0.8)'
|
||
text-primary-color: 'rgba(19, 21, 54, 0.98)'
|
||
disabled-text-color: 'rgba(19, 21, 54, 0.45)'
|
||
text-light-primary-color: 'rgb(28, 29, 33)'
|
||
paper-item-icon-color: 'rgba(19, 21, 54, 0.95)'
|
||
state-inactive-color: 'rgba(19, 21, 54, 0.8)'
|
||
state-icon-color: 'rgba(19, 21, 54, 0.95)'
|
||
state-on-color: 'rgb(118, 214, 152)'
|
||
state-off-color: 'rgb(234, 114, 135)'
|
||
label-badge-text-color: 'rgba(19, 21, 54, 0.85)'
|
||
label-badge-red: 'rgb(234, 114, 135)'
|
||
label-badge-blue: 'rgb(106, 116, 211)'
|
||
label-badge-green: 'rgb(78, 183, 128)'
|
||
label-badge-yellow: 'rgb(255, 219, 117)'
|
||
label-badge-grey: 'rgb(83, 90, 103)'
|
||
ha-chip-text-color: 'rgb(0, 0, 0)'
|
||
|
||
primary-color: 'rgb(106, 116, 211)'
|
||
dark-primary-color: 'rgb(106, 116, 211)'
|
||
light-primary-color: 'rgb(167, 182, 199)'
|
||
accent-color: 'rgb(106, 116, 211)'
|
||
divider-color: 'rgba(224, 224, 224, 0.3)'
|
||
scrollbar-thumb-color: 'rgb(180, 180, 180)'
|
||
disabled-color: 'rgb(173, 176, 184)'
|
||
info-color: 'rgb(106, 116, 211)'
|
||
success-color: 'rgb(118, 214, 152)'
|
||
warning-color: 'rgb(255, 219, 117)'
|
||
error-color: 'rgb(234, 114, 135)'
|
||
background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/wessamlauf/homeassistant-frosted-glass-themes@refs/heads/main/themes/frosted-glass-light-background.jpg')"
|
||
lovelace-background: var(--background-image)
|
||
primary-background-color: 'rgba(254, 244, 242, 1)'
|
||
secondary-background-color: 'rgba(245, 245, 245, 0.5)'
|
||
clear-background-color: 'rgba(254, 244, 242, 0.9)'
|
||
card-background-color: 'rgba(254, 244, 242, 0.9)'
|
||
ha-card-background: 'rgba(254, 244, 242, 0.9)'
|
||
ha-card-border-radius: '18px'
|
||
ha-card-border-color: 'rgba(255, 255, 255, 0.3)'
|
||
ha-card-border-width: '0.5px'
|
||
ha-card-border-style: 'solid'
|
||
ha-card-border: '0.5px solid rgba(255, 255, 255, 0.3)'
|
||
ha-card-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.15)'
|
||
ha-view-sections-column-gap: '17px'
|
||
ha-view-sections-column-min-width: 320px
|
||
|
||
# Sliders, toggles, switches
|
||
paper-slider-knob-color: 'rgb(106, 116, 211)'
|
||
paper-slider-knob-start-color: 'rgb(106, 116, 211)'
|
||
paper-slider-pin-color: 'rgb(106, 116, 211)'
|
||
paper-slider-active-color: 'rgb(106, 116, 211)'
|
||
paper-slider-secondary-color: 'rgb(167, 182, 199)'
|
||
switch-checked-button-color: 'rgb(106, 116, 211)'
|
||
switch-checked-track-color: 'rgb(106, 116, 211)'
|
||
switch-unchecked-button-color: 'rgba(0, 0, 0, 0.6)'
|
||
switch-unchecked-track-color: 'rgba(0, 0, 0, 0.3)'
|
||
paper-toggle-button-checked-button-color: 'rgb(106, 116, 211)'
|
||
paper-toggle-button-checked-bar-color: 'rgb(106, 116, 211)'
|
||
paper-toggle-button-unchecked-button-color: 'rgba(0, 0, 0, 0.6)'
|
||
paper-toggle-button-unchecked-bar-color: 'rgba(0, 0, 0, 0.3)'
|
||
mdc-checkbox-unchecked-color: 'rgba(19, 21, 54, 0.75)'
|
||
mdc-radio-unchecked-color: 'rgba(19, 21, 54, 0.75)'
|
||
mdc-ripple-hover-opacity: '0.1'
|
||
|
||
# Inputs
|
||
input-background-color: 'rgba(254, 255, 252, 0.8)'
|
||
input-background-token-color-disabled: 'rgba(254, 255, 252, 0.8)'
|
||
input-fill-color: 'rgba(255, 255, 252, 0.8)'
|
||
input-ink-color: 'rgba(19, 21, 54, 0.98)'
|
||
input-label-ink-color: 'rgba(19, 21, 54, 0.98)'
|
||
input-disabled-fill-color: 'rgba(245, 245, 245, 0.6)'
|
||
input-disabled-ink-color: 'rgba(19, 21, 54, 0.45)'
|
||
input-disabled-label-ink-color: 'rgba(19, 21, 54, 0.45)'
|
||
input-idle-line-color: 'transparent'
|
||
input-dropdown-icon-color: 'rgba(19, 21, 54, 0.8)'
|
||
input-hover-line-color: 'rgb(106, 116, 211)'
|
||
mdc-select-idle-line-color: 'transparent'
|
||
mdc-text-field-idle-line-color: 'transparent'
|
||
|
||
# Code Editor & Misc
|
||
code-editor-background-color: 'rgba(234, 235, 238, 1)'
|
||
codemirror-meta: 'rgba(19, 21, 54, 0.98)'
|
||
codemirror-property: 'rgb(106, 116, 211)'
|
||
codemirror-atom: 'rgb(106, 116, 211)'
|
||
codemirror-string: 'rgb(0, 77, 153)'
|
||
codemirror-keyword: 'rgb(70, 112, 216)'
|
||
codemirror-number: 'rgb(204, 85, 0)'
|
||
mcg-title-font-weight: '400'
|
||
mush-title-font-weight: '500'
|
||
mush-title-font-size: 'var(--token-size-font-2xl)'
|
||
light-grey-color: 'rgb(103, 104, 119)'
|
||
mush-rgb-grey: '103, 104, 119)'
|
||
|
||
# Misc sizes
|
||
paper-slider-height: '5px'
|
||
border-radius: '18px'
|
||
|
||
dark:
|
||
card-mod-theme: 'Frosted Glass Dark'
|
||
|
||
# =========================
|
||
# HEADER (Top Bar)
|
||
# =========================
|
||
app-header-backdrop-filter: 'blur(8px) saturate(1.1)'
|
||
app-header-background-color: 'rgba(30, 30, 30, 0.01)'
|
||
app-header-text-color: 'rgba(240, 243, 255, 0.95)'
|
||
app-header-edit-background-color: 'rgba(30, 33, 54, 0.8)'
|
||
app-header-edit-text-color: 'rgba(234, 235, 238, 0.98)'
|
||
app-theme-color: 'rgb(0, 0, 0)' # 1.2 Glass – header theme color hint for browsers
|
||
|
||
# =========================
|
||
# SIDEBAR / DRAWER
|
||
# =========================
|
||
sidebar-background-color: 'rgba(30, 30, 30, 0.8)'
|
||
sidebar-icon-color: 'rgba(234, 235, 238, 0.6)'
|
||
sidebar-text-color: 'rgba(234, 235, 238, 0.8)'
|
||
sidebar-selected-icon-color: 'rgba(234, 235, 238, 0.95)'
|
||
sidebar-selected-text-color: 'rgba(234, 235, 238, 0.98)'
|
||
|
||
# =========================
|
||
# DIALOGS
|
||
# =========================
|
||
ha-dialog-surface-backdrop-filter: 'blur(8px)' # 1.2 Glass – same blur as cards
|
||
ha-dialog-surface-background: 'rgba(30, 30, 30, 0.7)'
|
||
dialog-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.25)'
|
||
paper-dialog-background-color: 'rgba(30, 30, 30, 0.7)'
|
||
mdc-dialog-scrim-color: 'rgba(0, 0, 0, 0.8)'
|
||
|
||
# =========================
|
||
# CARDS / CARD-MOD
|
||
# =========================
|
||
card-mod-card: |
|
||
/* Base reset */
|
||
ha-card {
|
||
background: transparent;
|
||
backdrop-filter: none;
|
||
-webkit-backdrop-filter: none;
|
||
}
|
||
|
||
/* Glass layer (variable-driven, matches Light) */
|
||
ha-card::before { /* 1.2 Glass – glass overlay */
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: var(--ha-card-glass-tint, rgba(28, 29, 33, 0.18)); /* 1.2 Glass – subtle dark tint */
|
||
backdrop-filter: var(--ha-card-backdrop-filter, blur(10px) saturate(1.2));
|
||
-webkit-backdrop-filter: var(--ha-card-backdrop-filter, blur(10px) saturate(1.2));
|
||
z-index: -1;
|
||
pointer-events: none;
|
||
border-radius: inherit;
|
||
box-shadow: var(--ha-card-glass-inset-shadow, /* 1.2 Glass – inner bevel/glow */
|
||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.22) inset,
|
||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.18) inset,
|
||
0 0 8px 1px rgba(255, 255, 255, 0.06) inset,
|
||
0 0 2px 0 rgba(0, 0, 0, 0.18)
|
||
);
|
||
}
|
||
|
||
/* Headings + Glance (kept excluded) */
|
||
:host(hui-heading-card) ha-card,
|
||
:host(hui-glance-card) ha-card {
|
||
background: none !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
}
|
||
:host(hui-heading-card) ha-card::before,
|
||
:host(hui-glance-card) ha-card::before {
|
||
content: none !important;
|
||
}
|
||
|
||
/* IMPORTANT: Allow normal Markdown to be glassy; only exclude text-only */
|
||
/* (Fix) Removed global :host(hui-markdown-card) exclusion so standard Markdown gets glass. */
|
||
|
||
/* Data tables */
|
||
.mdc-data-table {
|
||
background: none !important;
|
||
}
|
||
.mdc-data-table__header-cell {
|
||
background: rgba(30, 33, 54, 0.18) !important;
|
||
backdrop-filter: var(--ha-card-backdrop-filter) !important;
|
||
-webkit-backdrop-filter: var(--ha-card-backdrop-filter) !important;
|
||
box-shadow: var(--ha-card-glass-inset-shadow) !important; /* 1.2 Glass – consistent bevel */
|
||
}
|
||
|
||
/* Markdown card with text_only → no background or blur */ # 1.1.9 Change - text only markdown and mushroom title card no background // Beginning
|
||
:host(.text-only) ha-card,
|
||
:host(.text-only) ha-card::before,
|
||
ha-card.text-only,
|
||
ha-card.text-only::before { /* 1.2 Glass – add ha-card.text-only for compatibility */
|
||
background: none !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
box-shadow: none !important;
|
||
content: none !important;
|
||
}
|
||
|
||
/* Mushroom title card (no background or blur) */
|
||
:host(mushroom-title-card) ha-card {
|
||
background: none !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
box-shadow: none !important; /* 1.2 Glass – ensure no bevel */
|
||
}
|
||
:host(mushroom-title-card) ha-card::before {
|
||
content: none !important;
|
||
}
|
||
|
||
/* === Prevent frosted/glass from applying to bubble cards === # 1.1.9 Change - Bubble cards are no longer applied */
|
||
:host(.type-custom-bubble-card) ha-card {
|
||
background: none !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
box-shadow: none !important;
|
||
border-radius: 0px !important;
|
||
}
|
||
:host(.type-custom-bubble-card) ha-card::before {
|
||
content: none !important;
|
||
background: none !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
}
|
||
|
||
/* === Prevent frosted/glass on mushroom-chips-card outer container === # 1.1.9 Change - Outer mushroom chips no longer applied */
|
||
:host(mushroom-chips-card) ha-card {
|
||
background: none !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
:host(mushroom-chips-card) ha-card::before {
|
||
content: none !important;
|
||
background: none !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
}
|
||
|
||
/* (Removed) .bubble-button-card-container styling to avoid conflicts # 1.2 Glass – matches Light exclusions */
|
||
|
||
# =========================
|
||
# CARD-MOD-ROOT GLOBAL CSS
|
||
# =========================
|
||
card-mod-root: |
|
||
:host {
|
||
--ha-card-background: rgba(30, 30, 30, 0.1);
|
||
--ha-card-box-shadow: 0 12px 20px rgba(0, 0, 0, 0.28);
|
||
--ha-card-border-width: 0.5px;
|
||
--ha-card-border-color: rgba(234, 235, 238, 0.1);
|
||
--ha-card-backdrop-filter: blur(10px) saturate(1.2); # 1.2 Glass – same engine as Light, tuned for Dark
|
||
|
||
/* Glass system tokens (new, dark-tuned) */
|
||
--ha-card-glass-tint: rgba(28, 29, 33, 0.18); # 1.2 Glass – global tint layer
|
||
--ha-card-glass-inset-shadow: # 1.2 Glass – inner bevel/glow (Liquid Glass inspired)
|
||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.15) inset,
|
||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.1) inset,
|
||
0 0 8px 1px rgba(255, 255, 255, 0.06) inset,
|
||
0 0 2px 0 rgba(0, 0, 0, 0.18);
|
||
|
||
/* Tokens - match structure to Light theme for consistency */
|
||
--token-rgb-primary: 106, 116, 211;
|
||
--token-rgb-black: 0, 0, 0;
|
||
--token-rgb-white: 234, 235, 238;
|
||
--token-rgb-purple: 129, 45, 250;
|
||
--token-rgb-pink: 204, 0, 136;
|
||
--token-rgb-red: 204, 0, 51;
|
||
--token-rgb-deep-purple: 98, 0, 234;
|
||
--token-rgb-indigo: 48, 63, 159;
|
||
--token-rgb-blue: 33, 150, 243;
|
||
--token-rgb-light-blue: 3, 169, 244;
|
||
--token-rgb-cyan: 106, 116, 211;
|
||
--token-rgb-teal: 106, 116, 211;
|
||
--token-rgb-green: 56, 142, 60;
|
||
--token-rgb-light-green: 139, 195, 74;
|
||
--token-rgb-lime: 205, 220, 57;
|
||
--token-rgb-yellow: 250, 183, 0;
|
||
--token-rgb-amber: 255, 193, 7;
|
||
--token-rgb-orange: 255, 158, 0;
|
||
--token-rgb-deep-orange: 255, 87, 34;
|
||
--token-rgb-brown: 121, 85, 72;
|
||
--token-rgb-grey: 103, 104, 119;
|
||
--token-rgb-blue-grey: 96, 125, 139;
|
||
--token-rgb-disabled: 189, 189, 189;
|
||
--token-rgb-state-inactive: 176, 190, 197;
|
||
|
||
--token-color-primary: rgb(var(--token-rgb-primary));
|
||
--token-color-primary-light: rgb(167 182 199);
|
||
--token-color-accent: rgb(var(--token-rgb-teal));
|
||
--token-color-disabled: rgb(173 176 184);
|
||
--token-color-feedback-info: rgb(106, 116, 211);
|
||
--token-color-feedback-warning: rgb(255, 219, 117);
|
||
--token-color-feedback-error: rgb(234, 114, 135);
|
||
--token-color-feedback-success: rgb(118, 214, 152);
|
||
--token-color-icon-primary: rgba(234, 235, 238, 0.95);
|
||
--token-color-icon-secondary: rgba(234, 235, 238, 0.75);
|
||
--token-color-icon-sidebar: rgba(234, 235, 238, 0.6);
|
||
--token-color-icon-sidebar-selected: var(--token-color-icon-primary);
|
||
--token-color-text-primary: rgba(234, 235, 238, 0.98);
|
||
--token-color-text-secondary: rgba(234, 235, 238, 0.8);
|
||
--token-color-text-disabled: rgba(234, 235, 238, 0.45);
|
||
--token-color-text-sidebar-selected: var(--token-color-text-primary);
|
||
--token-color-text-sidebar: var(--token-color-text-secondary);
|
||
--token-color-text-label-badge: rgba(234, 235, 238, 0.85);
|
||
--token-color-text-chip: rgb(var(--token-rgb-white));
|
||
--token-color-background-base: rgba(25, 28, 45, 0.8);
|
||
--token-color-background-secondary: rgba(30, 33, 54, 0.7);
|
||
--token-color-background-sidebar: var(--token-color-background-base);
|
||
--token-color-background-input-base: rgba(30, 33, 54, 0.7);
|
||
--token-color-background-input-disabled: rgba(30, 33, 54, 0.5);
|
||
--token-color-background-label-badge: rgb(60, 60, 78);
|
||
--token-color-background-card: rgba(28, 29, 33, 0.85);
|
||
--token-color-background-skrim: rgba(0, 0, 0, 0.7);
|
||
--token-color-background-divider: rgba(84, 84, 98, 0.28);
|
||
--token-color-background-scrollbar-thumb: rgb(68, 68, 88);
|
||
--token-color-background-label-badge-red: var(--token-color-feedback-error);
|
||
--token-color-background-label-badge-blue: var(--token-color-feedback-info);
|
||
--token-color-background-label-badge-green: rgb(78, 183, 128);
|
||
--token-color-background-label-badge-yellow: var(--token-color-feedback-warning);
|
||
--token-color-background-label-badge-grey: rgb(83, 90, 103);
|
||
--token-color-background-popup-scrim: rgba(0, 0, 0, 1);
|
||
--token-color-border-card: rgba(234, 235, 238, 0.22);
|
||
--token-color-switch-button-unchecked: rgba(234, 235, 238, 0.3);
|
||
--token-color-switch-track-unchecked: rgba(234, 235, 238, 0.18);
|
||
--token-color-codemirror-string: rgb(164, 209, 255);
|
||
--token-color-codemirror-keyword: rgb(148, 182, 255);
|
||
--token-color-codemirror-number: rgb(255, 171, 64);
|
||
--token-shadow-card-medium: 0 12px 20px rgba(0, 0, 0, 0.28);
|
||
--token-size-radius-small: 10px;
|
||
--token-size-radius-medium: 14px;
|
||
--token-size-radius-large: 18px;
|
||
--token-size-radius-card: var(--token-size-radius-large);
|
||
--token-size-width-border-card: 0.5px;
|
||
--token-size-height-slider: 5px;
|
||
--token-size-height-navbar: 60px;
|
||
--token-size-font-xs: calc(10px * var(--ha-font-size-scale));
|
||
--token-size-font-s: calc(12px * var(--ha-font-size-scale));
|
||
--token-size-font-m: calc(14px * var(--ha-font-size-scale));
|
||
--token-size-font-l: calc(15px * var(--ha-font-size-scale));
|
||
--token-size-font-xl: calc(20px * var(--ha-font-size-scale));
|
||
--token-size-font-2xl: calc(25px * var(--ha-font-size-scale));
|
||
--token-size-font-3xl: calc(29px * var(--ha-font-size-scale));
|
||
--token-size-font-4xl: calc(33px * var(--ha-font-size-scale));
|
||
--token-size-font-5xl: calc(42px * var(--ha-font-size-scale));
|
||
--token-size-spacing-medium: 17px;
|
||
--token-size-section-min-width: 320px;
|
||
--token-color-transparent: rgba(0, 0, 0, 0);
|
||
--token-color-black: rgb(0, 0, 0);
|
||
--token-color-white: rgb(234, 235, 238);
|
||
--token-opacity-ripple-hover: 0.1;
|
||
--token-font-family-primary: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||
--token-weight-font-title-card: 500;
|
||
|
||
# Additional color variables
|
||
--token-color-red: rgb(var(--token-rgb-red));
|
||
--token-color-green: rgb(var(--token-rgb-green));
|
||
--token-color-blue: rgb(var(--token-rgb-blue));
|
||
--token-color-yellow: rgb(var(--token-rgb-yellow));
|
||
--token-color-orange: rgb(var(--token-rgb-orange));
|
||
--token-color-purple: rgb(var(--token-rgb-purple));
|
||
--token-color-pink: rgb(var(--token-rgb-pink));
|
||
--token-color-amber: rgb(var(--token-rgb-amber));
|
||
--token-color-cyan: rgb(var(--token-rgb-cyan));
|
||
--token-color-teal: rgb(var(--token-rgb-teal));
|
||
--token-color-lime: rgb(var(--token-rgb-lime));
|
||
--token-color-light-green: rgb(var(--token-rgb-light-green));
|
||
--token-color-deep-orange: rgb(var(--token-rgb-deep-orange));
|
||
--token-color-brown: rgb(var(--token-rgb-brown));
|
||
--token-color-grey: rgb(var(--token-rgb-grey));
|
||
--token-color-blue-grey: rgb(var(--token-rgb-blue-grey));
|
||
--token-color-indigo: rgb(var(--token-rgb-indigo));
|
||
--token-color-deep-purple: rgb(var(--token-rgb-deep-purple));
|
||
--token-color-light-blue: rgb(var(--token-rgb-light-blue));
|
||
}
|
||
|
||
/* SIDEBAR BLUR */
|
||
.mdc-drawer .mdc-drawer__content {
|
||
backdrop-filter: blur(8px) saturate(1.1) !important;
|
||
-webkit-backdrop-filter: blur(8px) saturate(1.1) !important;
|
||
background: rgba(25, 28, 45, 0.8) !important;
|
||
box-shadow: var(--ha-card-glass-inset-shadow) !important; # 1.2 Glass – subtle inner edge for consistency
|
||
}
|
||
|
||
/* CARDS RADIUS */
|
||
ha-card {
|
||
border-radius: var(--token-size-radius-large);
|
||
border: var(--ha-card-border, var(--ha-card-border-width) solid var(--ha-card-border-color)); # 1.2 Glass – ensure border follows tokens
|
||
box-shadow: var(--ha-card-box-shadow);
|
||
}
|
||
ha-card ha-card {
|
||
--ha-card-border-width: 0px;
|
||
}
|
||
|
||
/* DRAWER SCRIM */
|
||
ha-drawer {
|
||
--mdc-drawer-scrim-color: rgba(0, 0, 0, 0.8) !important;
|
||
}
|
||
|
||
/* LABEL BADGE */
|
||
ha-label-badge {
|
||
--label-badge-background-color: rgba(60, 60, 78, 0.28) !important;
|
||
backdrop-filter: blur(10px) saturate(1.1) !important;
|
||
-webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
|
||
--label-badge-text-color: rgba(234, 235, 238, 0.9) !important;
|
||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10) !important;
|
||
border: 0.5px solid rgba(234, 235, 238, 0.22) !important;
|
||
}
|
||
|
||
/* INPUTS */
|
||
input, ha-textfield, ha-select {
|
||
background: rgba(30, 33, 54, 0.7) !important;
|
||
backdrop-filter: blur(6px) !important;
|
||
-webkit-backdrop-filter: blur(6px);
|
||
border-radius: var(--token-size-radius-small);
|
||
border: none !important;
|
||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.09) !important;
|
||
}
|
||
|
||
/* Custom text divider row size fix */
|
||
custom-text-divider-row .text-divider-content {
|
||
background: #181929 !important;
|
||
opacity: 1 !important;
|
||
box-shadow: none !important;
|
||
border-radius: 10px !important;
|
||
padding: 0 8px !important;
|
||
--text-divider-font-size: 16px !important;
|
||
--text-divider-line-size: 1px;
|
||
--text-divider-color: rgba(234, 235, 238, 1) !important;
|
||
}
|
||
|
||
# =========================
|
||
# TYPOGRAPHY
|
||
# =========================
|
||
ha-font-family-body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
ha-font-family-heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
ha-font-family-code: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
ha-font-family-longform: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
ha-card-header-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
mdc-typography-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
mdc-typography-button-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
mdc-typography-body1-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
md-list-item-label-text-font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
paper-font-common-base_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
paper-font-common-code_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
paper-font-body1_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
paper-font-subhead_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
paper-font-headline_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
paper-font-caption_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
paper-font-title_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||
|
||
ha-font-weight-normal: '400'
|
||
ha-font-weight-medium: '500'
|
||
ha-font-weight-bold: '700'
|
||
ha-font-weight-body: '400'
|
||
ha-font-weight-heading: '500'
|
||
ha-font-weight-action: '500'
|
||
mdc-typography-button-font-weight: '500'
|
||
title-font-weight: 'var(--token-weight-font-title-card)'
|
||
|
||
ha-font-size-xs: '10px'
|
||
ha-font-size-s: '12px'
|
||
ha-font-size-m: '14px'
|
||
ha-font-size-l: '15px'
|
||
ha-font-size-xl: '20px'
|
||
ha-font-size-2xl: '25px'
|
||
ha-font-size-3xl: '29px'
|
||
ha-font-size-4xl: '33px'
|
||
ha-font-size-5xl: '42px'
|
||
title-font-size: '20px'
|
||
ha-heading-card-title-font-size: 'var(--token-size-font-l)'
|
||
ha-heading-card-title-font-weight: '500'
|
||
ha-font-smoothing: 'antialiased'
|
||
|
||
# =========================
|
||
# COLORS & MISCELLANEOUS
|
||
# =========================
|
||
# 1.2.1 - change add HA 2025.8 primary color scale aligned to theme
|
||
ha-color-primary-05: '#0D0E19'
|
||
ha-color-primary-10: '#131526'
|
||
ha-color-primary-20: '#20233F'
|
||
ha-color-primary-30: '#30345F'
|
||
ha-color-primary-40: '#40467F'
|
||
ha-color-primary-50: '#6A74D3' # base theme primary (kept)
|
||
ha-color-primary-60: '#8F97DE'
|
||
ha-color-primary-70: '#ADB3E7'
|
||
ha-color-primary-80: '#D2D5F2'
|
||
ha-color-primary-90: '#EAECF9'
|
||
ha-color-primary-95: '#F6F7FC'
|
||
|
||
# 1.2.1 - change add aliases for compatibility (some threads reference --color-primary-xx)
|
||
color-primary-05: '#0D0E19'
|
||
color-primary-10: '#131526'
|
||
color-primary-20: '#20233F'
|
||
color-primary-30: '#30345F'
|
||
color-primary-40: '#40467F'
|
||
color-primary-50: '#6A74D3'
|
||
color-primary-60: '#8F97DE'
|
||
color-primary-70: '#ADB3E7'
|
||
color-primary-80: '#D2D5F2'
|
||
color-primary-90: '#EAECF9'
|
||
color-primary-95: '#F6F7FC'
|
||
primary-text-color: 'rgba(234, 235, 238, 0.98)'
|
||
secondary-text-color: 'rgba(234, 235, 238, 0.8)'
|
||
text-primary-color: 'rgba(234, 235, 238, 0.98)'
|
||
disabled-text-color: 'rgba(234, 235, 238, 0.45)'
|
||
text-light-primary-color: 'rgb(234, 235, 238)'
|
||
paper-item-icon-color: 'rgba(234, 235, 238, 0.95)'
|
||
state-inactive-color: 'rgba(234, 235, 238, 0.8)'
|
||
state-icon-color: 'rgba(234, 235, 238, 0.95)'
|
||
state-on-color: 'rgb(118, 214, 152)'
|
||
state-off-color: 'rgb(234, 114, 135)'
|
||
label-badge-text-color: 'rgba(234, 235, 238, 0.85)'
|
||
label-badge-red: 'rgb(234, 114, 135)'
|
||
label-badge-blue: 'rgb(106, 116, 211)'
|
||
label-badge-green: 'rgb(78, 183, 128)'
|
||
label-badge-yellow: 'rgb(255, 219, 117)'
|
||
label-badge-grey: 'rgb(83, 90, 103)'
|
||
ha-chip-text-color: 'rgb(234, 235, 238)'
|
||
|
||
primary-color: 'rgb(106, 116, 211)'
|
||
dark-primary-color: 'rgb(106, 116, 211)'
|
||
light-primary-color: 'rgb(167, 182, 199)'
|
||
accent-color: 'rgb(106, 116, 211)'
|
||
divider-color: 'rgba(84, 84, 98, 0.28)'
|
||
scrollbar-thumb-color: 'rgb(68, 68, 88)'
|
||
disabled-color: 'rgb(173, 176, 184)'
|
||
info-color: 'rgb(106, 116, 211)'
|
||
success-color: 'rgb(118, 214, 152)'
|
||
warning-color: 'rgb(255, 219, 117)'
|
||
error-color: 'rgb(234, 114, 135)'
|
||
background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/wessamlauf/homeassistant-frosted-glass-themes@refs/heads/main/themes/frosted-glass-dark-background.jpg')"
|
||
lovelace-background: 'var(--background-image)'
|
||
primary-background-color: 'rgba(30, 30, 30, 1)' # 1.2 change - improved background color for a darker feel
|
||
secondary-background-color: 'rgba(30, 33, 54, 0.6)'
|
||
clear-background-color: 'rgba(30, 33, 54, 0.7)'
|
||
card-background-color: 'rgba(30, 30, 30, 0.85)'
|
||
ha-card-background: 'rgba(30, 30, 30, 0.9)'
|
||
ha-card-border-radius: '18px'
|
||
ha-card-border-color: 'rgba(234, 235, 238, 0.22)'
|
||
ha-card-border-width: '0.5px'
|
||
ha-card-border-style: 'solid'
|
||
ha-card-border: '0.5px solid rgba(234, 235, 238, 0.1)'
|
||
ha-card-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.28)'
|
||
ha-view-sections-column-gap: '17px'
|
||
ha-view-sections-column-min-width: 320px
|
||
|
||
# Sliders, toggles, switches
|
||
paper-slider-knob-color: 'rgb(106, 116, 211)'
|
||
paper-slider-knob-start-color: 'rgb(106, 116, 211)'
|
||
paper-slider-pin-color: 'rgb(106, 116, 211)'
|
||
paper-slider-active-color: 'rgb(106, 116, 211)'
|
||
paper-slider-secondary-color: 'rgb(167, 182, 199)'
|
||
switch-checked-button-color: 'rgb(106, 116, 211)'
|
||
switch-checked-track-color: 'rgb(106, 116, 211)'
|
||
switch-unchecked-button-color: 'rgba(234, 235, 238, 0.3)'
|
||
switch-unchecked-track-color: 'rgba(234, 235, 238, 0.18)'
|
||
paper-toggle-button-checked-button-color: 'rgb(106, 116, 211)'
|
||
paper-toggle-button-checked-bar-color: 'rgb(106, 116, 211)'
|
||
paper-toggle-button-unchecked-button-color: 'rgba(234, 235, 238, 0.3)'
|
||
paper-toggle-button-unchecked-bar-color: 'rgba(234, 235, 238, 0.18)'
|
||
mdc-checkbox-unchecked-color: 'rgba(234, 235, 238, 0.75)'
|
||
mdc-radio-unchecked-color: 'rgba(234, 235, 238, 0.75)'
|
||
mdc-ripple-hover-opacity: '0.1'
|
||
|
||
# Inputs
|
||
input-background-color: 'rgba(50, 50, 50, 0.1)'
|
||
input-background-token-color-disabled: 'rgba(50, 50, 50, 0.1)'
|
||
input-fill-color: 'rgba(50,50, 50, 0.1)'
|
||
input-ink-color: 'rgba(234, 235, 238, 0.98)'
|
||
input-label-ink-color: 'rgba(234, 235, 238, 0.98)'
|
||
input-disabled-fill-color: 'rgba(30, 33, 54, 0.5)'
|
||
input-disabled-ink-color: 'rgba(234, 235, 238, 0.45)'
|
||
input-disabled-label-ink-color: 'rgba(234, 235, 238, 0.45)'
|
||
input-idle-line-color: 'transparent'
|
||
input-dropdown-icon-color: 'rgba(234, 235, 238, 0.8)'
|
||
input-hover-line-color: 'rgb(106, 116, 211)'
|
||
mdc-select-idle-line-color: 'transparent'
|
||
mdc-text-field-idle-line-color: 'transparent'
|
||
|
||
# Code Editor & Misc
|
||
code-editor-background-color: 'rgba(25, 28, 45, 1)'
|
||
codemirror-meta: 'rgba(234, 235, 238, 0.98)'
|
||
codemirror-property: 'rgb(106, 116, 211)'
|
||
codemirror-atom: 'rgb(106, 116, 211)'
|
||
codemirror-string: 'rgb(164, 209, 255)'
|
||
codemirror-keyword: 'rgb(148, 182, 255)'
|
||
codemirror-number: 'rgb(255, 171, 64)'
|
||
mcg-title-font-weight: '400'
|
||
mush-title-font-weight: '500'
|
||
mush-title-font-size: 'var(--token-size-font-2xl)'
|
||
light-grey-color: 'rgb(103, 104, 119)'
|
||
mush-rgb-grey: '103, 104, 119'
|
||
|
||
# Misc sizes
|
||
paper-slider-height: '5px'
|
||
border-radius: '18px'
|
||
|
||
|
||
# --- End of Theme ---
|