/* ========================================================================== Glass UI — MudBlazor Overrides (SAFE) Scope: Goals: - Blend Mud components into Glass surfaces - Keep popovers safe (style visible surfaces only) - Define consistent app chrome spacing (MainContent padding) - Provide scoped MudDataGrid skin inside .glass-card--datagrid ========================================================================== */ /* -------------------------------------------------------------------------- 0) App chrome spacing (single source of truth) -------------------------------------------------------------------------- */ /* Apply content padding consistently (so layouts/pages don't need pa-4) */ :root[data-ui="glass"] .mud-main-content { padding: var(--app-content-padding) !important; } /* Mobile: maximize width, reduce padding */ @media (max-width: 640px) { :root[data-ui="glass"] .mud-main-content { padding: var(--app-content-padding-mobile) !important; } } /* -------------------------------------------------------------------------- 1) AppBar / Drawer -------------------------------------------------------------------------- */ :root[data-ui="glass"] .mud-appbar { background: var(--surface-1) !important; border-bottom: 1px solid var(--border-1) !important; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } :root[data-ui="glass"] .mud-drawer { background: var(--surface-1) !important; border-right: 1px solid var(--border-1) !important; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } /* -------------------------------------------------------------------------- 2) Global MudPaper (opt-out via .no-glass) -------------------------------------------------------------------------- */ :root[data-ui="glass"] .mud-paper:not(.no-glass) { background: var(--surface-1) !important; border: 1px solid var(--border-1) !important; box-shadow: var(--shadow-surface) !important; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-radius: var(--radius-2); } /* -------------------------------------------------------------------------- 3) Inputs (Outlined) -------------------------------------------------------------------------- */ :root[data-ui="glass"] .mud-input-outlined { border-radius: var(--radius-1) !important; } :root[data-ui="glass"][data-appearance="light"] .mud-input-outlined { background: color-mix(in srgb, var(--surface-1), white 20%) !important; } :root[data-ui="glass"][data-appearance="dark"] .mud-input-outlined { background: rgba(2, 6, 23, 0.18) !important; } :root[data-ui="glass"] .mud-input-outlined-border { border-color: var(--border-1) !important; } :root[data-ui="glass"] .mud-input-label, :root[data-ui="glass"] .mud-input-helper-text { color: var(--text-2) !important; } :root[data-ui="glass"] .mud-input-slot, :root[data-ui="glass"] .mud-select-input, :root[data-ui="glass"] input, :root[data-ui="glass"] textarea { color: var(--text-1) !important; } /* Focus ring */ :root[data-ui="glass"] .mud-input-outlined:focus-within .mud-input-outlined-border { border-color: color-mix(in srgb, var(--accent-info), transparent 35%) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-info), transparent 85%); } /* -------------------------------------------------------------------------- 4) Buttons / IconButtons -------------------------------------------------------------------------- */ :root[data-ui="glass"] .mud-button { border-radius: var(--radius-1) !important; } :root[data-ui="glass"] .mud-icon-button { border-radius: var(--radius-1); } /* Primary filled glow */ :root[data-ui="glass"] .mud-button-filled-primary { box-shadow: 0 16px 40px color-mix(in srgb, var(--accent-primary), transparent 78%) !important; } /* Outlined buttons: subtle glass backing */ :root[data-ui="glass"] .mud-button-outlined { border-color: var(--border-2) !important; background: color-mix(in srgb, var(--surface-2), transparent 35%); } /* Text buttons: keep readable */ :root[data-ui="glass"] .mud-button-text { color: var(--text-1) !important; } /* Accessible focus */ :root[data-ui="glass"] .mud-button:focus-visible, :root[data-ui="glass"] .mud-icon-button:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-info), transparent 85%); } /* -------------------------------------------------------------------------- 5) Dialogs / Overlays / Snackbar -------------------------------------------------------------------------- */ :root[data-ui="glass"] .mud-dialog { background: var(--surface-1) !important; border: 1px solid var(--border-1) !important; box-shadow: var(--shadow-float) !important; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-radius: 22px !important; } :root[data-ui="glass"] .mud-overlay-dark { background: rgba(0, 0, 0, 0.35) !important; } :root[data-ui="glass"][data-appearance="light"] .mud-overlay-dark { background: rgba(2, 6, 23, 0.20) !important; } :root[data-ui="glass"] .mud-snackbar { background: var(--surface-1) !important; border: 1px solid var(--border-1) !important; box-shadow: var(--shadow-surface) !important; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } /* -------------------------------------------------------------------------- 6) SAFE Popovers & dropdown surfaces - Keep popover wrapper transparent (prevents weird stacking/blur bugs) - Style only the visible surfaces inside -------------------------------------------------------------------------- */ :root[data-ui="glass"] .mud-popover, :root[data-ui="glass"] .mud-menu { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Popover surface elements (menus, selects, lists) */ :root[data-ui="glass"] .mud-popover .mud-paper, :root[data-ui="glass"] .mud-popover .mud-list, :root[data-ui="glass"] .mud-popover .mud-menu-list, :root[data-ui="glass"] .mud-popover .mud-select-list { background: var(--surface-1) !important; border: 1px solid var(--border-1) !important; box-shadow: var(--shadow-surface) !important; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } /* -------------------------------------------------------------------------- 7) Tooltips (robust & readable) - Solid background (never depends on underlying UI) - Wrap long text to avoid horizontal page scroll -------------------------------------------------------------------------- */ :root[data-ui="glass"] .mud-popover { z-index: 3000 !important; } :root[data-ui="glass"] .mud-tooltip { background: var(--tooltip-bg) !important; color: var(--tooltip-text) !important; border-radius: 10px !important; padding: 8px 10px !important; font-size: 12px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; /* Ensure it never creates horizontal scroll */ white-space: normal !important; max-width: min(420px, calc(100vw - 24px)) !important; overflow-wrap: anywhere !important; word-break: break-word !important; /* kill transparency/blur oddities */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: opacity 120ms ease, transform 120ms ease; } :root[data-ui="glass"] .mud-tooltip-arrow { color: var(--tooltip-bg) !important; opacity: 1 !important; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); } /* subtle lift when opening */ :root[data-ui="glass"] .mud-popover-open .mud-tooltip { transform: translateY(-2px); } /* -------------------------------------------------------------------------- 8) Tables (generic MudTable) -------------------------------------------------------------------------- */ :root[data-ui="glass"] .mud-table { background: transparent; } :root[data-ui="glass"] .mud-table-row:hover .mud-table-cell { background: color-mix(in srgb, var(--surface-2), transparent 25%) !important; } :root[data-ui="glass"] .mud-table-row.selected, :root[data-ui="glass"] .mud-table-row.selected .mud-table-cell { background: color-mix(in srgb, var(--accent-primary), transparent 80%) !important; color: var(--text-1) !important; } /* -------------------------------------------------------------------------- 9) MudDataGrid (scoped skin) Requires tokens in glass.tokens.css: --datagrid-header-bg, --datagrid-row-hover-bg, --datagrid-row-selected-bg, --datagrid-border, --datagrid-border-soft -------------------------------------------------------------------------- */ :root[data-ui="glass"] .glass-card--datagrid { overflow: hidden; border-radius: var(--radius-4); } :root[data-ui="glass"] .glass-card--datagrid .mud-table-container, :root[data-ui="glass"] .glass-card--datagrid .mud-table, :root[data-ui="glass"] .glass-card--datagrid .mud-data-grid { background: transparent !important; } :root[data-ui="glass"] .glass-card--datagrid .mud-table-head { background: var(--datagrid-header-bg) !important; backdrop-filter: blur(calc(var(--glass-blur) - 8px)); -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 8px)); } :root[data-ui="glass"] .glass-card--datagrid .mud-table-head .mud-table-cell { font-weight: 850; letter-spacing: -0.01em; color: color-mix(in srgb, var(--text-1), transparent 18%) !important; border-bottom: 1px solid var(--datagrid-border) !important; } :root[data-ui="glass"] .glass-card--datagrid .mud-table-cell { border-bottom: 1px solid var(--datagrid-border-soft) !important; color: var(--text-1) !important; } :root[data-ui="glass"] .glass-card--datagrid .mud-table-row:hover { background: var(--datagrid-row-hover-bg) !important; } :root[data-ui="glass"] .glass-card--datagrid .mud-table-row.selected, :root[data-ui="glass"] .glass-card--datagrid .mud-table-row.selected:hover { background: var(--datagrid-row-selected-bg) !important; } :root[data-ui="glass"] .glass-card--datagrid .mud-table-pagination, :root[data-ui="glass"] .glass-card--datagrid .mud-data-grid-pager { border-top: 1px solid var(--datagrid-border) !important; background: color-mix(in srgb, var(--surface-2), transparent 10%) !important; backdrop-filter: blur(calc(var(--glass-blur) - 8px)); -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 8px)); } :root[data-ui="glass"] .glass-card--datagrid .mud-table-pagination, :root[data-ui="glass"] .glass-card--datagrid .mud-data-grid-pager { border-bottom-left-radius: var(--radius-4); border-bottom-right-radius: var(--radius-4); overflow: hidden; } /* Links inside datagrid */ :root[data-ui="glass"] .glass-card--datagrid a, :root[data-ui="glass"] .glass-card--datagrid .mud-link { color: color-mix(in srgb, var(--accent-info), var(--text-1) 10%); } /* Patch: hide DataGrid column options (3 dots) in header */ :root[data-ui="glass"] .glass-card--datagrid .mud-data-grid .mud-table-head .mud-menu { display: none !important; } :root[data-ui="glass"] .glass-card--datagrid .mud-data-grid .mud-table-head .column-options { gap: 0 !important; } /* -------------------------------------------------------------------------- 10) MudButtonGroup -> Glass preset pills -------------------------------------------------------------------------- */ :root[data-ui="glass"] .mud-button-group-root { background: transparent; border: 0; box-shadow: none; padding: 0; gap: 8px; } :root[data-ui="glass"] .mud-button-group-root > .mud-button-root.mud-button { border-radius: 999px; border: 1px solid var(--border-1); background: color-mix(in srgb, var(--surface-2), transparent 15%); color: var(--text-1); font-weight: 800; letter-spacing: -0.01em; text-transform: none; min-height: 34px; padding: 6px 12px; margin: 0; transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease; } :root[data-ui="glass"] .mud-button-group-root > .mud-button-root.mud-button:hover { background: color-mix(in srgb, var(--surface-1), transparent 8%); border-color: var(--border-2); transform: translateY(-1px); } :root[data-ui="glass"] .mud-button-group-root > .mud-button-root.mud-button:active { transform: translateY(0); } :root[data-ui="glass"] .mud-button-group-root > .mud-button-root.mud-button:not(:first-child) { border-left: 1px solid var(--border-1); } :root[data-ui="glass"] .mud-button-group-root > .mud-button-root.mud-button:first-child, :root[data-ui="glass"] .mud-button-group-root > .mud-button-root.mud-button:last-child { border-radius: 999px; }