/* ============================================================ MEL — Liquid Glass Dark Activates on . The night half of the Liquid Glass material: the same frosted, backdrop-blurred surfaces and specular edges as theme-mel-glass.css, but the translucency is dark-on-dark and the ambient colour field burns low instead of bright. Honey stays the brand. Primitive ramps (--honey-*, --slate-*) come from theme-mel.css; only the mappings change, so every component follows. ============================================================ */ @layer theme { :root[data-theme="dark"] { color-scheme: only dark; /* Dark glass ramp — translucent so the ambient field shows through. --d-solid stays opaque for the few surfaces that must not see-through (portalled menus, toasts). */ --d-bg: #0e1319; /* fallback under the ambient field */ --d-solid: #1b212a; --d-surface: rgba(28, 35, 46, 0.62); /* frosted dark glass */ --d-raised: rgba(52, 63, 78, 0.55); /* headers, hovers */ --d-line: rgba(255, 255, 255, 0.10); /* specular edge */ --d-line-2: rgba(255, 255, 255, 0.17); /* stronger edge */ /* ---------- BRAND ---------- */ --color-primary: var(--honey-500); --color-primary-hover: var(--honey-400); --color-primary-fg: var(--honey-ink); --color-primary-text: var(--honey-300); /* honey reads light on dark */ --color-secondary: var(--slate-300); --color-secondary-hover: #fff; /* ---------- GLOBAL ---------- */ --bg-base: var(--d-bg); --bg-surface: var(--d-surface); /* ---------- TYPE COLORS ---------- */ --text-main: #e7ecf2; --text-muted: #98a4b3; --text-inverted: #14181e; /* ---------- BORDERS ---------- */ --border-subtle: var(--d-line); --border-base: var(--d-line-2); /* ---------- FORMS ---------- */ --input-bg: #161b22; --input-bg-disabled: #1b212a; --input-border: var(--d-line-2); --input-border-hover: #4a5868; --input-text: var(--text-main); --input-placeholder: #6c7888; --input-addon-bg: var(--d-raised); --fieldset-border: var(--d-line); --checkbox-border: #54616f; /* ---------- BUTTONS ---------- */ --btn-bg: var(--d-raised); --btn-bg-hover: #2c3744; --btn-text: #d7dee6; --btn-outline-border: var(--d-line-2); --btn-outline-text: #d7dee6; --btn-ghost-text: #98a4b3; --btn-ghost-hover: rgba(255,255,255,0.06); --btn-outline-hover-bg: color-mix(in srgb, var(--color-primary), transparent 86%); /* ---------- TOGGLE / RANGE / RATING ---------- */ --toggle-bg: #3a4655; --range-track-bg: #2d3742; --rating-color: #3a4655; /* ---------- BADGE / TAG ---------- */ --badge-outline-border: var(--d-line-2); --badge-bg: var(--d-raised); --tag-bg: var(--d-raised); --tag-text: #d7dee6; /* ---------- PROGRESS / SKELETON ---------- */ --progress-bg: #2d3742; --skeleton-bg: #2d3742; --skeleton-shine: #394553; /* ---------- AVATAR ---------- */ --avatar-ring-offset: var(--d-surface); --avatar-bg: color-mix(in srgb, var(--honey-500), transparent 80%); --avatar-color: var(--honey-300); /* ---------- DIVIDER ---------- */ --divider-color: var(--d-line); /* ---------- TABLES ---------- */ --table-header-bg: #1f2630; --table-border: var(--d-line); --table-row-hover: color-mix(in srgb, var(--honey-500), transparent 90%); --table-striped-bg: #1f2630; /* ---------- CODE / QUOTE ---------- */ --code-bg: #11151b; --blockquote-bg: color-mix(in srgb, var(--honey-500), transparent 90%); /* ---------- DIALOG ---------- */ --dialog-border: var(--d-line); --backdrop-bg: rgba(5, 8, 12, 0.66); /* ---------- DETAILS / MEDIA ---------- */ --details-bg: var(--d-surface); --details-header-bg: var(--d-raised); --details-border: var(--d-line); --audio-bg: var(--d-raised); /* ---------- ALERTS (deepened tints) ---------- */ --alert-bg: var(--d-surface); --alert-border: var(--d-line); --alert-info-bg: color-mix(in srgb, var(--color-info), #14181e 78%); --alert-info-border:color-mix(in srgb, var(--color-info), #14181e 55%); --alert-success-bg: color-mix(in srgb, var(--color-success), #14181e 78%); --alert-success-border: color-mix(in srgb, var(--color-success), #14181e 55%); --alert-warning-bg: color-mix(in srgb, var(--honey-600), #14181e 76%); --alert-warning-border: color-mix(in srgb, var(--honey-500), #14181e 52%); --alert-error-bg: color-mix(in srgb, var(--color-error), #14181e 78%); --alert-error-border: color-mix(in srgb, var(--color-error), #14181e 55%); --alert-info-text: color-mix(in srgb, var(--color-info), white 55%); --alert-success-text: color-mix(in srgb, var(--color-success), white 55%); --alert-warning-text: var(--honey-200); --alert-error-text: color-mix(in srgb, var(--color-error), white 50%); /* ---------- BOX / DIFF ---------- */ --box-bg: var(--d-surface); --diff-bg: var(--d-surface); --diff-border: var(--d-line); --diff-header-bg: var(--d-raised); /* ---------- CARD ---------- */ --card-bg: var(--d-surface); --card-border: var(--d-line); --card-header-bg: var(--d-raised); --card-footer-border: var(--d-line); /* ---------- NAVBAR / PAGINATION ---------- */ --navbar-bg: var(--d-surface); --navbar-border: var(--d-line); --pagination-bg: var(--d-surface); --pagination-border: var(--d-line); --pagination-text: var(--text-main); --pagination-hover-bg: var(--d-raised); /* ---------- TABS / MODAL / ACCORDION ---------- */ --tabs-border: var(--d-line); --modal-bg: var(--d-surface); --accordion-border: var(--d-line); --accordion-header-bg: var(--d-raised); --accordion-header-hover-bg: #2c3744; /* ---------- DROPDOWN / TOOLTIP / MENU ---------- */ --dropdown-bg: var(--d-raised); --dropdown-border: var(--d-line); --dropdown-hover-bg: color-mix(in srgb, var(--color-primary), transparent 84%); --tooltip-bg: #06090d; --tooltip-text: #e7ecf2; --menu-item-hover-bg: rgba(255,255,255,0.06); --menu-item-active-bg: color-mix(in srgb, var(--color-primary), transparent 82%); /* ---------- TOAST / MESSAGE ---------- */ --toast-bg: var(--d-raised); --message-bg: var(--d-surface); --message-border: var(--d-line); /* ---------- STAT / TIMELINE ---------- */ --stat-bg: var(--d-surface); --stat-border: var(--d-line); --stat-icon-bg: color-mix(in srgb, var(--color-primary), transparent 82%); --stat-icon-color: var(--honey-300); --timeline-line: var(--d-line); --timeline-marker-ring: var(--d-surface); /* ---------- LISTS / DRAWER / OFFCANVAS ---------- */ --list-group-bg: var(--d-surface); --list-group-border: var(--d-line); --list-group-hover-bg: var(--d-raised); --drawer-bg: var(--d-surface); --drawer-border: var(--d-line); --offcanvas-bg: var(--d-surface); --bottom-nav-bg: var(--d-surface); --bottom-nav-border: var(--d-line); --popover-bg: var(--d-raised); --popover-border: var(--d-line); --panel-bg: var(--d-surface); --panel-border: var(--d-line); /* ---------- PRICING / HERO / CHAT ---------- */ --pricing-bg: var(--d-surface); --pricing-border: var(--d-line); --hero-bg: var(--d-raised); --chat-bubble-bg: var(--d-raised); /* ---------- CAROUSEL ---------- */ --carousel-nav-bg: var(--d-raised); --carousel-nav-border: var(--d-line); --carousel-nav-hover-bg: #2c3744; /* ---------- SHADOWS (deeper for dark) ---------- */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.4); --shadow-sm: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.6), 0 2px 6px -2px rgba(0,0,0,0.4); --shadow-lg: 0 22px 48px -14px rgba(0,0,0,0.7), 0 6px 16px -8px rgba(0,0,0,0.5); --shadow-modal: 0 30px 64px -16px rgba(0,0,0,0.78); /* ---------- CHARTS (Chart.js reads these; the slate ramp stays light) ---------- */ --chart-grid: rgba(255, 255, 255, 0.08); /* hairline gridlines / axis rule */ --chart-ink: #98a4b3; /* axis ticks + legend text */ --chart-surface: #171d26; /* the 2px gap between touching marks */ /* ---------- RADII (match the light glass: generous, Apple-soft) ---------- */ --radius-sm: 0.625rem; /* 10px */ --radius-md: 0.875rem; /* 14px */ --radius-lg: 1.25rem; /* 20px */ --radius-xl: 1.625rem; /* 26px */ } } /* ---------- dark-only refinements (outside @layer so they win) ---------- */ :root[data-theme="dark"] html, html[data-theme="dark"] { color-scheme: only dark; } /* App shell pieces driven by hard-coded slate in mel-app/refinements */ [data-theme="dark"] .mel-rail { background: var(--d-surface); border-right-color: var(--d-line); } [data-theme="dark"] .mel-rail a { color: #7d8a99; } [data-theme="dark"] .mel-rail a:hover { background: rgba(255,255,255,0.06); color: #fff; } [data-theme="dark"] .mel-rail a.is-active { background: color-mix(in srgb, var(--honey-500), transparent 80%); color: var(--honey-300); } [data-theme="dark"] .app-topbar { background: var(--d-surface); border-bottom-color: var(--d-line); } [data-theme="dark"] .data-card, [data-theme="dark"] .filter-bar, [data-theme="dark"] .form-card, [data-theme="dark"] .stat-card, [data-theme="dark"] .stat-horizontal { background: var(--d-surface); border-color: var(--d-line); } [data-theme="dark"] .data-card table.table tbody tr { border-top-color: var(--d-line); } [data-theme="dark"] .table-foot { border-top-color: var(--d-line); } [data-theme="dark"] .form-section + .form-section, [data-theme="dark"] .form-card .form-section + .form-section { border-top-color: var(--d-line); } [data-theme="dark"] .form-foot { background: #11151b; border-top-color: var(--d-line); } [data-theme="dark"] .id-name { color: var(--text-main); } [data-theme="dark"] .kv { border-top-color: var(--d-line); } [data-theme="dark"] .code-chip { background: #11151b; color: #cdd6df; } [data-theme="dark"] .role-pill { background: var(--d-raised); color: #cdd6df; } [data-theme="dark"] .yn-no, [data-theme="dark"] .badge-soft-neutral { background: var(--d-raised); color: #98a4b3; } [data-theme="dark"] .seg { background: #11151b; } [data-theme="dark"] .seg button.on { background: var(--d-raised); color: var(--honey-300); } [data-theme="dark"] .section-label { color: #6c7888; } [data-theme="dark"] .card-header { color: var(--text-main); } /* soft-tinted status pills: deepen so text stays legible */ [data-theme="dark"] .badge-soft-success { background: color-mix(in srgb, var(--color-success), #14181e 72%); color: color-mix(in srgb, var(--color-success), white 40%); } [data-theme="dark"] .badge-soft-warning { background: color-mix(in srgb, var(--honey-600), #14181e 70%); color: var(--honey-200); } [data-theme="dark"] .badge-soft-error { background: color-mix(in srgb, var(--color-error), #14181e 72%); color: color-mix(in srgb, var(--color-error), white 38%); } [data-theme="dark"] .badge-soft-info { background: color-mix(in srgb, var(--color-info), #14181e 72%); color: color-mix(in srgb, var(--color-info), white 42%); } [data-theme="dark"] .yn-yes { background: color-mix(in srgb, var(--color-success), #14181e 72%); color: color-mix(in srgb, var(--color-success), white 40%); } [data-theme="dark"] .btn-soft-edit { background: color-mix(in srgb, var(--color-info), #14181e 72%); color: color-mix(in srgb, var(--color-info), white 48%); } [data-theme="dark"] .btn-soft-del { background: color-mix(in srgb, var(--color-error), #14181e 72%); color: color-mix(in srgb, var(--color-error), white 46%); } /* ============================================================ STRUCTURAL — frosted dark materials (outside @layer so they win) Mirrors the light glass in theme-mel-glass.css: backdrop-blur + specular edges that flat tokens can't express. Here the specular highlight is a faint white line rather than a bright one, and the ambient field burns low behind the glass. ============================================================ */ /* ---- ambient colour field behind the glass (night version) ---- */ [data-theme="dark"] body, html[data-theme="dark"] body { background-color: #0e1319; background-image: radial-gradient(62vw 58vh at 6% -10%, rgba(201, 129, 20, 0.24), transparent 58%), radial-gradient(54vw 56vh at 102% -4%, rgba(40, 96, 160, 0.30), transparent 60%), radial-gradient(64vw 64vh at 48% 118%, rgba(96, 62, 150, 0.28), transparent 60%), radial-gradient(50vw 52vh at 90% 94%, rgba(24, 104, 74, 0.22), transparent 62%), radial-gradient(70vw 80vh at 50% 45%, rgba(90, 70, 40, 0.16), transparent 70%); background-attachment: fixed; } [data-theme="dark"] .app-shell { background: transparent; } /* shared glass material */ [data-theme="dark"] .mel-rail, [data-theme="dark"] .app-topbar, [data-theme="dark"] .data-card, [data-theme="dark"] .filter-bar, [data-theme="dark"] .form-card, [data-theme="dark"] .stat-card, [data-theme="dark"] .stat-horizontal, [data-theme="dark"] .card, [data-theme="dark"] .set-menu, [data-theme="dark"] .auth-card, [data-theme="dark"] dialog.modal, [data-theme="dark"] .toast { -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); background-color: var(--bg-surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.04); } /* rail + topbar: frosted chrome */ [data-theme="dark"] .mel-rail { background-color: rgba(18, 24, 33, 0.55); border-right: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05), var(--shadow-sm); } [data-theme="dark"] .app-topbar { background-color: rgba(18, 24, 33, 0.62); border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow-sm); } [data-theme="dark"] .mel-rail a { color: #9fb0c4; } [data-theme="dark"] .mel-rail a:hover { background: rgba(255, 255, 255, 0.07); color: var(--text-main); } [data-theme="dark"] .mel-rail a.is-active { background: color-mix(in srgb, var(--honey-500), transparent 72%); color: var(--honey-200); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); } /* cards: rounded like the light glass; hairlines go to specular white */ [data-theme="dark"] .card, [data-theme="dark"] .data-card, [data-theme="dark"] .filter-bar, [data-theme="dark"] .form-card { border-radius: var(--radius-lg); } [data-theme="dark"] .card-header { background: transparent; border-bottom-color: rgba(255, 255, 255, 0.09); } [data-theme="dark"] .data-card table.table tbody tr { border-top-color: rgba(255, 255, 255, 0.07); } [data-theme="dark"] .table-foot { border-top-color: rgba(255, 255, 255, 0.09); } [data-theme="dark"] .form-section + .form-section { border-top-color: rgba(255, 255, 255, 0.07); } [data-theme="dark"] .form-foot { background: rgba(255, 255, 255, 0.04); border-top-color: rgba(255, 255, 255, 0.09); } [data-theme="dark"] .kv { border-top-color: rgba(255, 255, 255, 0.07); } /* inputs: liquid wells, sunk into the glass */ [data-theme="dark"] .input, [data-theme="dark"] .select, [data-theme="dark"] .textarea, [data-theme="dark"] input:not([class]), [data-theme="dark"] select:not([class]), [data-theme="dark"] textarea:not([class]) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background-color: rgba(9, 13, 18, 0.55); border-color: rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05); } [data-theme="dark"] .input:hover, [data-theme="dark"] .select:hover, [data-theme="dark"] .textarea:hover { border-color: rgba(255, 255, 255, 0.24); } [data-theme="dark"] .input:focus, [data-theme="dark"] .select:focus, [data-theme="dark"] .textarea:focus { background-color: rgba(9, 13, 18, 0.78); border-color: var(--honey-500); } /* primary button: translucent honey glass, light ink for dark surroundings */ [data-theme="dark"] .btn-primary, [data-theme="dark"] button[type="submit"]:not([class]), [data-theme="dark"] input[type="submit"]:not([class]) { background-image: none; background-color: color-mix(in srgb, var(--honey-500), transparent 52%); color: var(--honey-100); border: 1px solid color-mix(in srgb, var(--honey-400), transparent 62%); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 18px -8px rgba(0, 0, 0, 0.6); } [data-theme="dark"] .btn-primary:hover:not(:disabled), [data-theme="dark"] button[type="submit"]:not([class]):hover:not(:disabled), [data-theme="dark"] input[type="submit"]:not([class]):hover:not(:disabled) { background-color: color-mix(in srgb, var(--honey-500), transparent 38%); color: #fff; } /* neutral / ghost buttons: frosted chips */ [data-theme="dark"] .btn { -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow-xs); } [data-theme="dark"] .btn-ghost { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } /* portalled / floating surfaces must stay legible: opaque, not see-through */ [data-theme="dark"] .ctx, [data-theme="dark"] .toast { background-color: rgba(24, 30, 40, 0.96); } /* settings side menu: slate ink is invisible on dark glass */ [data-theme="dark"] .set-menu a { color: #a9b6c6; } [data-theme="dark"] .set-menu a:hover { background: rgba(255, 255, 255, 0.07); color: var(--text-main); } [data-theme="dark"] .set-menu a.is-active { color: var(--honey-200); } [data-theme="dark"] .set-menu a.is-danger { color: color-mix(in srgb, var(--color-error), white 26%); } /* settings top bar (standalone form pages) */ [data-theme="dark"] .top { -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); background-color: rgba(18, 24, 33, 0.62); border-bottom-color: rgba(255, 255, 255, 0.08); }