/* ========================================================================== Glass UI Components (Design System) Scope: Contains: - Helpers / utilities - Selection utility - GlassCard (structure + variants) - GlassSection - GlassPill - GlassEmptyState ========================================================================== */ /* ========================================================================== */ /* 1) Helpers & Utilities */ /* ========================================================================== */ :root[data-ui="glass"] .title-gradient { font-weight: 850; letter-spacing: -0.02em; background: linear-gradient(90deg, var(--accent-primary), var(--accent-info)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 14px 40px color-mix(in srgb, var(--accent-info), transparent 90%); } /* Generic clickable glass surface */ :root[data-ui="glass"] .glass-click { border-radius: var(--radius-1); transition: transform 120ms ease, background-color 120ms ease; } :root[data-ui="glass"] .glass-click:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--surface-3), transparent 10%); } :root[data-ui="glass"] .glass-click:active { transform: translateY(0); } /* Dashboard donut click helper (reusable) */ :root[data-ui="glass"] .glass-chart-click { width: 100%; display: flex; justify-content: center; align-items: center; padding: 6px 0 2px 0; cursor: pointer; border-radius: var(--radius-1); transition: transform 120ms ease, background-color 120ms ease; } :root[data-ui="glass"] .glass-chart-click:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--surface-3), transparent 10%); } :root[data-ui="glass"] .glass-chart-click:active { transform: translateY(0); } /* Utility: muted row styling */ :root[data-ui="glass"] .glass-row--muted { opacity: 0.62; filter: saturate(0.85); } /* ========================================================================== */ /* 2) Glass selection utility (reusable) */ /* ========================================================================== */ /* Usage: - Add class "glass-selected" to any clickable row/list item/card. - Optional: add "glass-selected--soft" for lighter wash. */ :root[data-ui="glass"] .glass-selected { position: relative; background: color-mix(in srgb, var(--accent-primary), transparent 90%); border-left: 4px solid var(--accent-primary); border-radius: 14px; padding-left: 14px; /* compensate border */ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 78%); overflow: hidden; } :root[data-ui="glass"] .glass-selected--soft { background: color-mix(in srgb, var(--accent-primary), transparent 93%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 84%); } /* When the selected element is also "clickable glass", keep it calm on hover */ :root[data-ui="glass"] .glass-selected:hover { transform: none !important; } /* ========================================================================== */ /* 3) GlassCard */ /* ========================================================================== */ :root[data-ui="glass"] .glass-card { position: relative; border-radius: var(--radius-4); overflow: visible; } /* Variants controlled by component flags/classes */ :root[data-ui="glass"] .glass-card--surface { background: var(--surface-1); border: 1px solid var(--border-1); box-shadow: var(--shadow-float); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } :root[data-ui="glass"] .glass-card--subtle { background: var(--surface-2); border: 1px solid var(--border-1); box-shadow: var(--shadow-surface); backdrop-filter: blur(calc(var(--glass-blur) - 6px)); -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 6px)); } /* Sheen on surface cards only */ :root[data-ui="glass"] .glass-card--surface::before { content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: var(--radius-4); background: radial-gradient(900px 340px at 30% 0%, var(--sheen-1), transparent 60%); opacity: 0.75; } /* Header layout */ :root[data-ui="glass"] .glass-card__header { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 10px 10px 18px 10px; margin-bottom: 10px; } :root[data-ui="glass"] .glass-card__titles { min-width: 0; } /* Title */ :root[data-ui="glass"] .glass-card__title { margin: 0; padding-bottom: 2px; font-weight: 850; letter-spacing: -0.02em; line-height: 1.16; font-size: 36px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-info)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 14px 40px color-mix(in srgb, var(--accent-info), transparent 90%); } :root[data-ui="glass"] .glass-card__subtitle { margin-top: 8px; color: var(--text-2); font-size: 13px; font-weight: 600; } /* Optional extra header content */ :root[data-ui="glass"] .glass-card__header-extra { margin-top: 8px; } /* Actions */ :root[data-ui="glass"] .glass-card__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } /* Body / Footer */ :root[data-ui="glass"] .glass-card__body { min-width: 0; } :root[data-ui="glass"] .glass-card__footer { padding: 0 18px 18px 18px; } /* Small-card variants used by dashboard widgets */ :root[data-ui="glass"] .glass-card--metric .glass-card__header, :root[data-ui="glass"] .glass-card--shortcut .glass-card__header { padding: 16px 18px 0 18px; margin-bottom: 0; } :root[data-ui="glass"] .glass-card--metric .glass-card__title, :root[data-ui="glass"] .glass-card--shortcut .glass-card__title { font-size: 18px; line-height: 1.2; text-shadow: 0 12px 30px color-mix(in srgb, var(--accent-info), transparent 92%); } :root[data-ui="glass"] .glass-card__metric-body { padding: 12px 18px 18px 18px; } /* DataGrid header bar variant */ :root[data-ui="glass"] .glass-card--datagrid .glass-card__header { padding: 16px 18px 12px 18px; margin-bottom: 0; border-bottom: 1px solid var(--border-1); background: var(--surface-3); } /* Keep datagrid body flush */ :root[data-ui="glass"] .glass-card--datagrid .glass-card__body { padding: 0 !important; } /* ========================================================================== */ /* 4) GlassSection */ /* ========================================================================== */ :root[data-ui="glass"] .glass-section { margin-top: 16px; padding: 16px; border-radius: var(--radius-2); background: var(--surface-2); border: 1px solid var(--border-1); backdrop-filter: blur(calc(var(--glass-blur) - 6px)); -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 6px)); } :root[data-ui="glass"] .glass-section-header { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; margin-bottom: 10px; } :root[data-ui="glass"] .glass-section-title { margin-bottom: 12px; color: color-mix(in srgb, var(--text-1), transparent 15%); font-weight: 750; letter-spacing: -0.01em; } :root[data-ui="glass"] .glass-section-desc { margin-top: 4px; color: var(--text-2); font-size: 13px; font-weight: 600; } :root[data-ui="glass"] .glass-section-right { display: flex; gap: 8px; } :root[data-ui="glass"] .glass-divider { margin: 18px 0 10px 0; height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--border-1), transparent); } :root[data-ui="glass"] .glass-form-actions { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border-1); } /* ========================================================================== */ /* 5) GlassPill */ /* ========================================================================== */ :root[data-ui="glass"] .glass-pill { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; min-height: 40px; border-radius: 999px; border: 1px solid var(--border-1); background: color-mix(in srgb, var(--surface-2), transparent 20%); color: var(--text-1); font-weight: 750; cursor: pointer; text-decoration: none; transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease; } :root[data-ui="glass"] .glass-pill:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--surface-1), transparent 10%); border-color: var(--border-2); } :root[data-ui="glass"] .glass-pill:active { transform: translateY(0); } :root[data-ui="glass"] .glass-pill__meta { color: var(--text-2); font-weight: 800; font-size: 0.92rem; } :root[data-ui="glass"] .glass-pill--disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ========================================================================== */ /* 6) GlassEmptyState */ /* ========================================================================== */ :root[data-ui="glass"] .glass-empty { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--radius-2); } :root[data-ui="glass"] .glass-empty--panel { background: var(--surface-2); border: 1px solid var(--border-1); backdrop-filter: blur(calc(var(--glass-blur) - 6px)); -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 6px)); } :root[data-ui="glass"] .glass-empty__media { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-1); display: flex; align-items: center; justify-content: center; background: var(--surface-3); border: 1px solid var(--border-1); } :root[data-ui="glass"] .glass-empty__icon { color: color-mix(in srgb, var(--accent-primary), transparent 10%); } :root[data-ui="glass"] .glass-empty__content { min-width: 0; flex: 1 1 auto; } :root[data-ui="glass"] .glass-empty__title { font-weight: 850; letter-spacing: -0.01em; color: var(--text-1); } :root[data-ui="glass"] .glass-empty__desc { margin-top: 4px; color: var(--text-2); font-weight: 600; font-size: 0.95rem; line-height: 1.35; } :root[data-ui="glass"] .glass-empty__extra { margin-top: 10px; color: var(--text-2); } :root[data-ui="glass"] .glass-empty__actions { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } :root[data-ui="glass"] .glass-empty--compact { padding: 14px; gap: 12px; } :root[data-ui="glass"] .glass-empty--compact .glass-empty__media { width: 40px; height: 40px; border-radius: 12px; }