/* SIRF — Angular Material 3 retheme * Anchored to the City of Buffalo navy brand, applied as an M3 primary tonal palette. * Mimics @angular/material 17+ MDC components (mat-button, mat-form-field appearance="outline", * mat-card, mat-table, mat-tabs, mat-chip, mat-checkbox, mat-dialog, mat-snack-bar). */ /* Roboto + Material Symbols are imported in the HTML */ :root { /* ── M3 tonal palette ── */ /* Primary (navy brand mapped to MD3 tones) */ --m3-primary: #2a3273; --m3-on-primary: #ffffff; --m3-primary-container: #dde1f5; --m3-on-primary-container: #1c2256; --m3-primary-fixed: #dde1f5; --m3-primary-fixed-dim: #b8bee0; /* Secondary (yellow brand → tertiary in MD3) */ --m3-secondary: #5b5d72; --m3-on-secondary: #ffffff; --m3-secondary-container: #e0e1f9; --m3-on-secondary-container: #181a2c; --m3-tertiary: #ffb600; --m3-on-tertiary: #1c2256; --m3-tertiary-container: #fff7e0; --m3-on-tertiary-container: #4a3700; --m3-error: #ba1a1a; --m3-on-error: #ffffff; --m3-error-container: #ffdad6; --m3-on-error-container: #410002; /* Neutral surfaces */ --m3-surface: #fcfbff; --m3-surface-dim: #ddd9e1; --m3-surface-bright: #fcfbff; --m3-surface-container-lowest: #ffffff; --m3-surface-container-low: #f6f3fa; --m3-surface-container: #f0eef4; --m3-surface-container-high: #eae7ee; --m3-surface-container-highest: #e4e2e9; --m3-on-surface: #1b1b21; --m3-on-surface-variant: #46474f; --m3-outline: #767680; --m3-outline-variant: #c6c6d0; --m3-inverse-surface: #303036; --m3-inverse-on-surface: #f3f0f7; --m3-inverse-primary: #b8bee0; /* M3 elevation (5 levels) — a faint umbra+penumbra; mimics matElevation */ --m3-elev-0: none; --m3-elev-1: 0 1px 2px 0 rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15); --m3-elev-2: 0 1px 2px 0 rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15); --m3-elev-3: 0 1px 3px 0 rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15); --m3-elev-4: 0 2px 3px 0 rgba(0,0,0,.30), 0 6px 10px 4px rgba(0,0,0,.15); --m3-elev-5: 0 4px 4px 0 rgba(0,0,0,.30), 0 8px 12px 6px rgba(0,0,0,.15); /* MD3 shape scale */ --shape-xs: 4px; --shape-sm: 8px; --shape-md: 12px; --shape-lg: 16px; --shape-xl: 28px; --shape-full: 9999px; /* Aliases used across older selectors so the existing markup keeps working */ --navy: var(--m3-primary); --navy-900: var(--m3-on-primary-container); --navy-700: #3a4395; --navy-50: var(--m3-primary-container); --navy-100: #c5cbeb; --sky: #6FCFEB; --sky-50: #eaf7fc; --sky-100: #d3eef8; --sky-600: #3aa9cc; --yellow: var(--m3-tertiary); --yellow-50: var(--m3-tertiary-container); --yellow-600: #d99a00; --ink: var(--m3-on-surface); --ink-2: var(--m3-on-surface-variant); --ink-3: #6a6f80; --ink-4: #9aa0b0; --line: var(--m3-outline-variant); --line-2: #eef0f6; --bg: var(--m3-surface-container-low); --surface: var(--m3-surface-container-lowest); --danger: var(--m3-error); --danger-50: var(--m3-error-container); --success: #2e7d32; --success-50: #e6f4ea; --warn: #b26a00; --radius: var(--shape-md); --radius-sm: var(--shape-sm); --radius-lg: var(--shape-lg); --shadow-1: var(--m3-elev-1); --shadow-2: var(--m3-elev-2); --shadow-3: var(--m3-elev-4); --rail-w: 80px; --rail-w-expanded: 256px; --header-h: 64px; --row-h: 52px; --pad-y: 12px; --pad-x: 16px; --font: "Roboto", "Helvetica Neue", Arial, sans-serif; --font-display: "Roboto", "Helvetica Neue", Arial, sans-serif; /* MD3 motion easings */ --ease-emphasized: cubic-bezier(.2, 0, 0, 1); --ease-standard: cubic-bezier(.2, 0, 0, 1); --ease-decel: cubic-bezier(0, 0, 0, 1); /* Material state-layer opacities */ --state-hover: .08; --state-focus: .12; --state-pressed: .12; --state-dragged: .16; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 14px; letter-spacing: .0107em; /* MD3 body-medium tracking */ } /* ── Material density (per spec, density -2 = -8px row, -1 = -4px) ── */ body[data-density="compact"] { --row-h: 44px; --pad-y: 8px; --pad-x: 12px; } body[data-density="comfy"] { --row-h: 52px; --pad-y: 12px; --pad-x: 16px; } body[data-density="comfortable"] { --row-h: 48px; --pad-y: 10px; --pad-x: 14px; } button { font-family: inherit; } a { color: inherit; } /* ── Material Symbols ── */ .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; vertical-align: middle; user-select: none; } /* ── App shell (mat-sidenav-container) ───────────────────── */ .app { min-height: 100vh; display: grid; grid-template-columns: var(--rail-w) 1fr; grid-template-rows: var(--header-h) 1fr; grid-template-areas: "sidebar header" "sidebar main"; transition: grid-template-columns .25s var(--ease-emphasized); background: var(--m3-surface-container-low); } .app[data-rail="expanded"] { grid-template-columns: var(--rail-w-expanded) 1fr; } /* ── Header (mat-toolbar primary) ── */ .header { grid-area: header; background: var(--m3-primary); color: var(--m3-on-primary); display: flex; align-items: center; padding: 0 16px; gap: 16px; border-bottom: none; position: sticky; top: 0; z-index: 20; box-shadow: var(--m3-elev-2); } .header .brand { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 20px; letter-spacing: 0; } .header .brand-mark { width: 40px; height: 40px; border-radius: var(--shape-sm); background: #fff; display: grid; place-items: center; color: var(--navy-900); font-weight: 700; font-size: 13px; overflow: hidden; } .header .brand-title { font-weight: 500; font-size: 16px; line-height: 1.2; } .header .brand-sub { opacity: .8; font-size: 11px; font-weight: 400; letter-spacing: .083em; text-transform: uppercase; } .header .crumbs { display: flex; align-items: center; gap: 8px; margin-left: 8px; font-size: 14px; color: rgba(255,255,255,.78); font-weight: 400; } .header .crumbs .sep { opacity: .45; } .header .crumbs .active { color: #fff; font-weight: 500; } .header .spacer { flex: 1; } /* mat-icon-button (toolbar variant) */ .header .hbtn { height: 40px; padding: 0 16px; background: transparent; color: #fff; border: 0; border-radius: var(--shape-full); display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; letter-spacing: .089em; text-transform: none; cursor: default; font-family: inherit; position: relative; overflow: hidden; transition: background .15s var(--ease-standard); } .header .hbtn::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .15s; pointer-events: none; border-radius: inherit; } .header .hbtn:hover::before { opacity: var(--state-hover); } .header .hbtn:active::before { opacity: var(--state-pressed); } .header .hbtn.icon-only { width: 40px; padding: 0; justify-content: center; border-radius: 50%; } .header .hbtn.primary { background: var(--m3-tertiary); color: var(--m3-on-tertiary); font-weight: 500; } .header .user { display: flex; align-items: center; gap: 12px; padding: 4px 12px 4px 4px; border-radius: var(--shape-full); font-size: 14px; cursor: default; position: relative; } .header .user::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; border-radius: inherit; transition: opacity .15s; } .header .user:hover::before { opacity: var(--state-hover); } .header .user .av { width: 32px; height: 32px; border-radius: 50%; background: var(--m3-tertiary); color: var(--m3-on-tertiary); display: grid; place-items: center; font-weight: 500; font-size: 13px; letter-spacing: 0; } /* ── Sidebar (mat-sidenav + mat-nav-list) ── */ .sidebar { grid-area: sidebar; background: var(--m3-surface-container-low); color: var(--m3-on-surface-variant); padding: 8px 0; overflow-y: auto; overflow-x: hidden; border-right: 1px solid var(--m3-outline-variant); position: sticky; top: 0; height: 100vh; } .sidebar .logo { display: flex; align-items: center; gap: 12px; height: calc(var(--header-h) - 8px); padding: 0 16px; margin-bottom: 8px; } .sidebar .logo-mark { width: 40px; height: 40px; min-width: 40px; border-radius: var(--shape-sm); background: var(--m3-primary); color: var(--m3-on-primary); display: grid; place-items: center; font-weight: 700; font-size: 14px; overflow: hidden; } .sidebar .logo-text { display: none; font-weight: 500; color: var(--m3-on-surface); white-space: nowrap; font-size: 18px; letter-spacing: 0; } .app[data-rail="expanded"] .sidebar .logo-text { display: block; } .nav-group { padding: 8px 0; border-top: 1px solid var(--m3-outline-variant); } .nav-group:first-of-type { border-top: 0; } .nav-label { display: none; padding: 12px 28px 8px; font-size: 11px; letter-spacing: .083em; text-transform: uppercase; color: var(--m3-on-surface-variant); font-weight: 500; } .app[data-rail="expanded"] .nav-label { display: block; } /* mat-list-item with state layer */ .nav-item { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 56px; margin: 4px 12px; border-radius: var(--shape-full); color: var(--m3-on-surface-variant); font-size: 14px; font-weight: 500; letter-spacing: 0; cursor: default; white-space: nowrap; position: relative; overflow: hidden; transition: background .15s var(--ease-standard), color .15s; } .nav-item::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .15s; border-radius: inherit; pointer-events: none; } .nav-item:hover::before { opacity: var(--state-hover); } .nav-item:active::before { opacity: var(--state-pressed); } .nav-item.active { background: var(--m3-secondary-container); color: var(--m3-on-secondary-container); } .app[data-rail="collapsed"] .nav-item { justify-content: center; padding: 0; margin: 4px auto; width: 56px; } .nav-item .ico { width: 24px; height: 24px; min-width: 24px; display: grid; place-items: center; color: inherit; } .nav-item.active .ico { color: var(--m3-on-secondary-container); } .nav-item .lbl { display: none; } .app[data-rail="expanded"] .nav-item .lbl { display: block; } .nav-item .badge { margin-left: auto; display: none; background: var(--m3-error); color: var(--m3-on-error); font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: var(--shape-full); min-width: 20px; text-align: center; } .app[data-rail="expanded"] .nav-item .badge { display: inline-block; } /* tooltip (mat-tooltip) */ .nav-item .tip { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--m3-inverse-surface); color: var(--m3-inverse-on-surface); padding: 6px 10px; border-radius: var(--shape-xs); font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s var(--ease-standard); z-index: 100; font-weight: 500; letter-spacing: 0; } .app[data-rail="collapsed"] .nav-item:hover .tip { opacity: 1; } /* ── Main ── */ .main { grid-area: main; padding: 24px 28px 40px; overflow: hidden; background: var(--m3-surface-container-low); } /* page header */ .page-h { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; } .page-h h1 { margin: 0; font-size: 28px; font-weight: 400; letter-spacing: 0; line-height: 1.25; color: var(--m3-on-surface); } .page-h .sub { color: var(--m3-on-surface-variant); font-size: 14px; margin-top: 4px; font-weight: 400; letter-spacing: .0178em; } .page-h .actions { margin-left: auto; display: flex; gap: 8px; } /* ════════════════════════════════════════════════ mat-button family - .btn -> mat-button (text) - .btn.primary -> mat-flat-button (filled) - .btn.accent -> mat-fab/extended-fab feel - .btn.danger -> tonal error - .btn.ghost -> mat-button (no border) .stroked variant gets an outline. All buttons get a state layer + ripple via JS. ════════════════════════════════════════════════ */ .btn { height: 40px; padding: 0 24px; background: transparent; color: var(--m3-primary); border: 0; border-radius: var(--shape-full); font-size: 14px; font-weight: 500; letter-spacing: .089em; font-family: inherit; display: inline-flex; align-items: center; gap: 8px; cursor: default; position: relative; overflow: hidden; transition: background .15s var(--ease-standard), box-shadow .2s, transform .06s; white-space: nowrap; } .btn::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .15s; pointer-events: none; border-radius: inherit; } .btn:hover::before { opacity: var(--state-hover); } .btn:focus-visible::before { opacity: var(--state-focus); } .btn:active::before { opacity: var(--state-pressed); } .btn:focus-visible { outline: none; } .btn.stroked { border: 1px solid var(--m3-outline); color: var(--m3-primary); } .btn.primary { background: var(--m3-primary); color: var(--m3-on-primary); box-shadow: var(--m3-elev-0); } .btn.primary:hover { box-shadow: var(--m3-elev-1); } .btn.raised { background: var(--surface); color: var(--m3-primary); box-shadow: var(--m3-elev-1); } .btn.raised:hover { box-shadow: var(--m3-elev-2); } .btn.accent { background: var(--m3-tertiary); color: var(--m3-on-tertiary); font-weight: 500; } .btn.tonal { background: var(--m3-secondary-container); color: var(--m3-on-secondary-container); } .btn.danger { background: transparent; color: var(--m3-error); border: 1px solid var(--m3-error); } .btn.danger.primary { background: var(--m3-error); color: var(--m3-on-error); border: 0; } .btn.ghost { background: transparent; border: 0; } .btn.lg { height: 48px; padding: 0 28px; font-size: 15px; } .btn.xl { height: 56px; padding: 0 32px; font-size: 16px; border-radius: var(--shape-full); font-weight: 500; } .btn.sm { height: 32px; padding: 0 16px; font-size: 13px; } .btn.icon-only { width: 40px; padding: 0; justify-content: center; border-radius: 50%; } .btn.sm.icon-only { width: 32px; height: 32px; } .btn:disabled { background: rgba(31, 31, 31, .12) !important; color: rgba(31, 31, 31, .38) !important; pointer-events: none; box-shadow: none !important; } /* mat-fab */ .fab { width: 56px; height: 56px; border-radius: var(--shape-lg); background: var(--m3-primary-container); color: var(--m3-on-primary-container); border: 0; display: grid; place-items: center; box-shadow: var(--m3-elev-3); cursor: default; position: relative; overflow: hidden; transition: box-shadow .2s, background .15s; } .fab:hover { box-shadow: var(--m3-elev-4); } .fab::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .15s; pointer-events: none; border-radius: inherit; } .fab:hover::before { opacity: var(--state-hover); } .fab:active::before { opacity: var(--state-pressed); } .fab.extended { width: auto; height: 56px; padding: 0 16px 0 16px; border-radius: var(--shape-lg); display: inline-flex; gap: 12px; align-items: center; font-size: 14px; font-weight: 500; letter-spacing: .089em; font-family: inherit; } /* Ripple */ .mat-ripple { position: absolute; border-radius: 50%; transform: scale(0); pointer-events: none; background: currentColor; opacity: .25; animation: matRipple .55s var(--ease-emphasized) forwards; } @keyframes matRipple { to { transform: scale(4); opacity: 0; } } /* ════════════════════════════════════════════════ mat-form-field (appearance="outline") ════════════════════════════════════════════════ */ .field { display: flex; flex-direction: column; gap: 4px; position: relative; } .field label { font-size: 12px; font-weight: 400; color: var(--m3-on-surface-variant); letter-spacing: .033em; padding-left: 6px; } .field .hint, .field .err { font-size: 12px; padding-left: 16px; color: var(--m3-on-surface-variant); letter-spacing: .033em; } .field .err { color: var(--m3-error); } /* The actual input — drawn as a "filled" outline notch via border-radius + custom border */ .input, .select, .textarea { height: 56px; padding: 0 16px; border: 1px solid var(--m3-outline); border-radius: var(--shape-xs); background: transparent; color: var(--m3-on-surface); font-family: inherit; font-size: 16px; outline: none; letter-spacing: .031em; transition: border-color .15s var(--ease-standard), border-width .15s, box-shadow .15s; } .textarea { height: auto; min-height: 80px; padding: 14px 16px; resize: vertical; } .input:hover, .select:hover, .textarea:hover { border-color: var(--m3-on-surface); } .input:focus, .select:focus, .textarea:focus { border-color: var(--m3-primary); border-width: 2px; padding: 0 15px; /* compensate for thicker border to keep glyphs put */ } .textarea:focus { padding: 13px 15px; } .input[aria-invalid="true"] { border-color: var(--m3-error); } .input[aria-invalid="true"]:focus { border-color: var(--m3-error); } .input::placeholder { color: var(--m3-on-surface-variant); opacity: 1; } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%2346474f'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 44px; } .input-group { position: relative; } .input-group .ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--m3-on-surface-variant); pointer-events: none; display: grid; place-items: center; } .input-group .input { padding-left: 48px; } .input-group .input:focus { padding-left: 47px; } /* Smaller variant for table toolbars */ .input.dense, .select.dense { height: 40px; font-size: 14px; border-radius: var(--shape-xs); padding: 0 12px; } .input.dense:focus, .select.dense:focus { padding: 0 11px; } /* ════════════════════════════════════════════════ mat-chip ════════════════════════════════════════════════ */ .chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--shape-sm); background: var(--m3-surface-container-high); color: var(--m3-on-surface-variant); border: 1px solid var(--m3-outline-variant); font-size: 14px; font-weight: 500; letter-spacing: .009em; cursor: default; position: relative; overflow: hidden; transition: background .15s; } .chip::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .15s; pointer-events: none; border-radius: inherit; } .chip:hover::before { opacity: var(--state-hover); } .chip.sm { height: 24px; padding: 0 10px; font-size: 12px; gap: 4px; } .chip.selected, .chip.on { background: var(--m3-secondary-container); color: var(--m3-on-secondary-container); border-color: transparent; } .chip.yellow { background: var(--m3-tertiary-container); color: var(--m3-on-tertiary-container); border-color: transparent; } .chip.sky { background: #d3eef8; color: #1c4f5c; border-color: transparent; } .chip.green { background: var(--success-50); color: var(--success); border-color: transparent; } .chip.red { background: var(--m3-error-container); color: var(--m3-on-error-container); border-color: transparent; } .chip.gray { background: var(--m3-surface-container-high); color: var(--m3-on-surface-variant); } .chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } /* ════════════════════════════════════════════════ mat-card (elevated / outlined / filled) ════════════════════════════════════════════════ */ .card { background: var(--m3-surface-container-lowest); border: 0; border-radius: var(--shape-md); box-shadow: var(--m3-elev-1); } .card.outlined { box-shadow: none; border: 1px solid var(--m3-outline-variant); } .card.filled { background: var(--m3-surface-container-high); box-shadow: none; } .card .card-h { padding: 16px 16px 0; display: flex; align-items: center; gap: 12px; } .card .card-h h3 { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: .009em; color: var(--m3-on-surface); } .card .card-h .sub { font-size: 14px; color: var(--m3-on-surface-variant); letter-spacing: .0178em; margin-top: 2px; } .card .card-b { padding: 16px; } .card.elev-2 { box-shadow: var(--m3-elev-2); } .card.elev-3 { box-shadow: var(--m3-elev-3); } /* ════════════════════════════════════════════════ mat-table + mat-paginator ════════════════════════════════════════════════ */ .table-wrap { background: var(--m3-surface-container-lowest); border: 0; border-radius: var(--shape-md); overflow: hidden; box-shadow: var(--m3-elev-1); } .table-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--m3-outline-variant); background: var(--m3-surface-container-lowest); } .table-toolbar .count { font-size: 14px; color: var(--m3-on-surface-variant); letter-spacing: .0178em; } .table-scroll { overflow: auto; max-height: 58vh; } table.dt { width: 100%; border-collapse: collapse; font-size: 14px; } table.dt thead th { position: sticky; top: 0; z-index: 2; background: var(--m3-surface-container-lowest); color: var(--m3-on-surface-variant); text-align: left; font-weight: 500; font-size: 12px; letter-spacing: .033em; padding: 0 var(--pad-x); height: 56px; border-bottom: 1px solid var(--m3-outline-variant); white-space: nowrap; } table.dt thead th .sort { display: inline-flex; align-items: center; gap: 4px; cursor: default; } table.dt thead th .sort .material-symbols-outlined { opacity: .55; font-size: 18px; } table.dt thead th.sorted { color: var(--m3-primary); } table.dt thead th.sorted .sort .material-symbols-outlined { opacity: 1; color: var(--m3-primary); } table.dt tbody td { padding: 0 var(--pad-x); height: var(--row-h); border-bottom: 1px solid var(--m3-outline-variant); color: var(--m3-on-surface); vertical-align: middle; white-space: nowrap; font-size: 14px; letter-spacing: .0178em; } table.dt tbody tr { position: relative; transition: background .12s; } table.dt tbody tr:hover { background: rgba(42, 50, 115, .04); } table.dt tbody tr.selected { background: var(--m3-primary-container); } table.dt tbody tr.selected:hover { background: var(--m3-primary-container); } table.dt td.num, table.dt th.num { text-align: right; font-variant-numeric: tabular-nums; } table.dt td.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } table.dt td .rowbtn { height: 32px; padding: 0 12px; font-size: 13px; border: 1px solid var(--m3-outline); border-radius: var(--shape-full); background: transparent; color: var(--m3-primary); cursor: default; font-weight: 500; letter-spacing: .089em; position: relative; overflow: hidden; transition: background .15s; } table.dt td .rowbtn::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .15s; pointer-events: none; border-radius: inherit; } table.dt td .rowbtn:hover::before { opacity: var(--state-hover); } .table-pager { display: flex; align-items: center; gap: 16px; padding: 0 16px; height: 56px; border-top: 1px solid var(--m3-outline-variant); font-size: 12px; color: var(--m3-on-surface-variant); background: var(--m3-surface-container-lowest); letter-spacing: .033em; } .table-pager .spacer { flex: 1; } .pg-btn { width: 40px; height: 40px; border: 0; background: transparent; border-radius: 50%; display: inline-grid; place-items: center; color: var(--m3-on-surface-variant); cursor: default; position: relative; overflow: hidden; } .pg-btn::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .15s; pointer-events: none; border-radius: inherit; } .pg-btn:hover::before { opacity: var(--state-hover); } .pg-btn:disabled { opacity: .38; pointer-events: none; } /* ════════════════════════════════════════════════ mat-checkbox ════════════════════════════════════════════════ */ .ckb { width: 18px; height: 18px; border: 2px solid var(--m3-on-surface-variant); border-radius: 2px; display: inline-grid; place-items: center; background: transparent; cursor: default; transition: all .15s var(--ease-standard); position: relative; } .ckb::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: currentColor; opacity: 0; transition: opacity .15s; } .ckb:hover::before { opacity: var(--state-hover); } .ckb.on { background: var(--m3-primary); border-color: var(--m3-primary); color: var(--m3-on-primary); } .ckb.on::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); } /* mat-radio */ .radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--m3-on-surface-variant); display: inline-grid; place-items: center; cursor: default; position: relative; transition: border-color .15s; } .radio::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: currentColor; opacity: 0; transition: opacity .15s; } .radio:hover::before { opacity: var(--state-hover); } .radio.on { border-color: var(--m3-primary); } .radio.on::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--m3-primary); } /* mat-slide-toggle */ .toggle { width: 52px; height: 32px; border-radius: var(--shape-full); background: var(--m3-surface-container-highest); border: 2px solid var(--m3-outline); position: relative; cursor: default; transition: background .15s, border-color .15s; } .toggle::after { content: ""; position: absolute; left: 6px; top: 50%; transform: translate(0, -50%); width: 16px; height: 16px; border-radius: 50%; background: var(--m3-outline); transition: all .2s var(--ease-emphasized); } .toggle.on { background: var(--m3-primary); border-color: var(--m3-primary); } .toggle.on::after { left: calc(100% - 30px); width: 24px; height: 24px; background: var(--m3-on-primary); } /* ════════════════════════════════════════════════ mat-dialog ════════════════════════════════════════════════ */ .modal-back { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .32); /* M3 scrim */ display: grid; place-items: center; animation: fadeIn .2s var(--ease-emphasized); } .modal { background: var(--m3-surface-container-high); color: var(--m3-on-surface); border-radius: var(--shape-xl); width: 480px; max-width: calc(100vw - 40px); box-shadow: var(--m3-elev-3); overflow: hidden; animation: pop .2s var(--ease-emphasized); } .modal .modal-h { padding: 24px 24px 0; } .modal .modal-h h3 { margin: 0; font-size: 24px; font-weight: 400; letter-spacing: 0; color: var(--m3-on-surface); } .modal .modal-h .sub { color: var(--m3-on-surface-variant); font-size: 14px; margin-top: 16px; } .modal .modal-b { padding: 16px 24px; font-size: 14px; color: var(--m3-on-surface-variant); letter-spacing: .0178em; } .modal .modal-f { display: flex; gap: 8px; justify-content: flex-end; padding: 16px 24px 24px; background: transparent; border-top: 0; } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes pop { from { opacity: 0; transform: scale(.95) } to { opacity: 1; transform: none } } /* ════════════════════════════════════════════════ mat-snack-bar ════════════════════════════════════════════════ */ .toast-stack { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { background: var(--m3-inverse-surface); color: var(--m3-inverse-on-surface); padding: 14px 16px; border-radius: var(--shape-xs); min-width: 320px; max-width: 480px; box-shadow: var(--m3-elev-3); display: flex; align-items: center; gap: 12px; font-size: 14px; letter-spacing: .0178em; animation: snackIn .25s var(--ease-emphasized); pointer-events: auto; border-left: 0; } .toast.success::before { content: "check_circle"; font-family: "Material Symbols Outlined"; font-size: 20px; color: #a5d6a7; } .toast.error::before { content: "error"; font-family: "Material Symbols Outlined"; font-size: 20px; color: #ef9a9a; } .toast.info::before { content: "info"; font-family: "Material Symbols Outlined"; font-size: 20px; color: var(--m3-inverse-primary); } .toast .ti { display: none; } .toast .tb { flex: 1; } .toast .tt { font-weight: 500; } .toast .td { opacity: .85; font-size: 13px; margin-top: 2px; } .toast .tx { opacity: .75; cursor: default; padding: 4px; font-size: 13px; font-weight: 500; letter-spacing: .089em; color: var(--m3-inverse-primary); text-transform: uppercase; } .toast .tx:hover { opacity: 1; } @keyframes snackIn { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: none } } /* ── loading (mat-progress-spinner) ── */ .spinner { width: 40px; height: 40px; border-radius: 50%; border: 4px solid transparent; border-top-color: var(--m3-primary); animation: spin 1s linear infinite; } .spinner.sm { width: 20px; height: 20px; border-width: 2px; } .spinner.lg { width: 56px; height: 56px; border-width: 5px; } @keyframes spin { to { transform: rotate(360deg) } } .skel { background: linear-gradient(90deg, var(--m3-surface-container) 0%, var(--m3-surface-container-low) 50%, var(--m3-surface-container) 100%); background-size: 200% 100%; animation: sh 1.4s infinite; border-radius: var(--shape-xs); } @keyframes sh { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } } /* ── empty / error states ── */ .state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; text-align: center; gap: 8px; } .state .state-ico { width: 64px; height: 64px; border-radius: 16px; background: var(--m3-secondary-container); color: var(--m3-on-secondary-container); display: grid; place-items: center; margin-bottom: 8px; font-size: 32px; } .state.err .state-ico { background: var(--m3-error-container); color: var(--m3-on-error-container); } .state h4 { margin: 0; font-size: 22px; font-weight: 400; letter-spacing: 0; color: var(--m3-on-surface); } .state p { margin: 0; color: var(--m3-on-surface-variant); font-size: 14px; max-width: 360px; letter-spacing: .0178em; } .state .btns { margin-top: 16px; display: flex; gap: 8px; } /* ── kbd ── */ kbd { font-family: "Roboto Mono", ui-monospace, monospace; font-size: 11px; font-weight: 500; padding: 2px 6px; border-radius: var(--shape-xs); background: var(--m3-surface-container-high); color: var(--m3-on-surface-variant); border: 1px solid var(--m3-outline-variant); min-width: 20px; display: inline-block; text-align: center; } /* ════════════════════════════════════════════════ Live auction (kept brand-rich, M3 surfaces underneath) ════════════════════════════════════════════════ */ .la-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; } .la-hero { background: linear-gradient(135deg, var(--m3-on-primary-container) 0%, var(--m3-primary) 55%, #3a4395 100%); color: #fff; border-radius: var(--shape-lg); padding: 28px; position: relative; overflow: hidden; box-shadow: var(--m3-elev-2); } .la-hero::before { content: ""; position: absolute; inset: auto -40px -80px auto; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(184, 190, 224, .25), transparent 60%); pointer-events: none; } .la-hero .tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,182,0,.2); color: var(--m3-tertiary); padding: 6px 12px; border-radius: var(--shape-full); font-size: 12px; font-weight: 500; letter-spacing: .083em; text-transform: uppercase; } .la-hero .tag .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--m3-tertiary); animation: pulse 1.4s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,182,0,.6) } 70% { box-shadow: 0 0 0 12px rgba(255,182,0,0) } 100% { box-shadow: 0 0 0 0 rgba(255,182,0,0) } } .la-hero .meta { display: flex; gap: 24px; margin-top: 16px; font-size: 13px; opacity: .8; } .la-hero .meta b { color: #fff; font-weight: 500; } .la-hero h2 { margin: 8px 0 4px; font-size: 45px; font-weight: 300; letter-spacing: 0; line-height: 1.1; } .la-hero .sub-addr { font-size: 16px; opacity: .8; font-weight: 400; letter-spacing: .0178em; } .la-bid { margin-top: 24px; display: flex; align-items: flex-end; gap: 24px; } .la-bid .col { display: flex; flex-direction: column; gap: 4px; } .la-bid .k { font-size: 11px; letter-spacing: .083em; text-transform: uppercase; opacity: .75; font-weight: 500; } .la-bid .v { font-size: 36px; font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: 0; } .la-bid .v.big { font-size: 57px; color: var(--m3-tertiary); font-weight: 300; line-height: 1; } .la-actions { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; margin-top: 24px; } .la-actions .act { height: 72px; padding: 0 24px; border-radius: var(--shape-lg); border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff; font-family: inherit; display: flex; align-items: center; gap: 16px; cursor: default; text-align: left; position: relative; overflow: hidden; transition: background .15s, transform .06s, box-shadow .2s; font-size: 14px; font-weight: 500; letter-spacing: .089em; } .la-actions .act::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .15s; pointer-events: none; border-radius: inherit; } .la-actions .act:hover::before { opacity: var(--state-hover); } .la-actions .act:active::before { opacity: var(--state-pressed); } .la-actions .act .lbl { font-size: 16px; font-weight: 500; letter-spacing: .089em; } .la-actions .act .shortcut { margin-left: auto; opacity: .8; } .la-actions .act.sold { background: var(--m3-tertiary); color: var(--m3-on-tertiary); border-color: transparent; box-shadow: var(--m3-elev-1); } .la-actions .act.sold:hover { box-shadow: var(--m3-elev-2); } .la-actions .act.adj { background: rgba(186,26,26,.25); border-color: rgba(255,180,180,.4); } /* ── bid log ── */ .bid-log { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; padding: 4px 4px 4px 0; } .bid-entry { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px 16px; border-radius: var(--shape-sm); font-size: 14px; font-variant-numeric: tabular-nums; } .bid-entry:hover { background: var(--m3-surface-container); } .bid-entry.lead { background: var(--m3-tertiary-container); } .bid-entry .t { color: var(--m3-on-surface-variant); font-size: 12px; font-family: "Roboto Mono", monospace; } .bid-entry .who { font-weight: 500; } .bid-entry .amt { font-weight: 500; font-variant-numeric: tabular-nums; } /* ── queue list ── */ .queue { display: flex; flex-direction: column; } .q-row { display: grid; grid-template-columns: 56px 64px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--m3-outline-variant); font-size: 14px; cursor: default; position: relative; transition: background .12s; } .q-row:hover { background: rgba(42, 50, 115, .04); } .q-row.current { background: var(--m3-tertiary-container); } .q-row.current::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--m3-tertiary); } .q-row .idx { width: 32px; height: 32px; border-radius: 50%; background: var(--m3-secondary-container); color: var(--m3-on-secondary-container); display: grid; place-items: center; font-weight: 500; font-size: 13px; } .q-row.current .idx { background: var(--m3-tertiary); color: var(--m3-on-tertiary); } .q-row.done .idx { background: var(--success-50); color: var(--success); } .q-row.done { opacity: .6; } .q-row .sr { color: var(--m3-on-surface-variant); font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: .033em; } .q-row .addr { font-weight: 500; } .q-row .bid { font-variant-numeric: tabular-nums; color: var(--m3-on-surface-variant); font-size: 13px; } .q-row .st { font-size: 11px; font-weight: 500; letter-spacing: .033em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--shape-full); } .q-row .st.up { background: var(--m3-tertiary); color: var(--m3-on-tertiary); } .q-row .st.sold { background: var(--success-50); color: var(--success); } .q-row .st.adj { background: var(--m3-error-container); color: var(--m3-on-error-container); } .q-row .st.wait { background: var(--m3-surface-container-high); color: var(--m3-on-surface-variant); } /* ════════════════════════════════════════════════ login (Material 3-feel, branded panel + form) ════════════════════════════════════════════════ */ .login-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1.1fr; background: var(--m3-surface); } .login-brand { background: linear-gradient(135deg, var(--m3-on-primary-container) 0%, var(--m3-primary) 60%, #3a4395 100%); color: #fff; padding: 56px; position: relative; overflow: hidden; display: flex; flex-direction: column; } .login-brand::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(111,207,235,.25), transparent 60%); } .login-brand::after { content: ""; position: absolute; inset: auto auto -30% -10%; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(255,182,0,.18), transparent 60%); } .login-brand .lb-top { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; } .login-brand .mark { width: 56px; height: 56px; border-radius: var(--shape-md); background: #fff; color: var(--m3-on-primary-container); display: grid; place-items: center; font-weight: 700; font-size: 17px; overflow: hidden; } .login-brand .lb-content { margin-top: auto; position: relative; z-index: 1; } .login-brand h1 { margin: 0 0 16px; font-size: 45px; font-weight: 400; letter-spacing: -.25px; line-height: 1.1; } .login-brand h1 b { font-weight: 500; color: var(--m3-tertiary); } .login-brand p { margin: 0; opacity: .85; font-size: 16px; max-width: 480px; font-weight: 400; line-height: 1.5; letter-spacing: .031em; } .login-brand .stats { display: flex; gap: 40px; margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.18); } .login-brand .stat .n { font-size: 32px; font-weight: 400; } .login-brand .stat .l { font-size: 11px; letter-spacing: .083em; text-transform: uppercase; opacity: .7; font-weight: 500; margin-top: 4px; } .login-form { display: grid; place-items: center; padding: 56px; } .login-card { width: 100%; max-width: 400px; } .login-card .title { font-size: 32px; font-weight: 400; margin: 0 0 8px; letter-spacing: 0; color: var(--m3-on-surface); } .login-card .sub { color: var(--m3-on-surface-variant); font-size: 14px; margin-bottom: 32px; letter-spacing: .0178em; } .login-card .fields { display: flex; flex-direction: column; gap: 20px; } .login-card .row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 14px; } .login-card .row a { color: var(--m3-primary); text-decoration: none; font-weight: 500; letter-spacing: .089em; } .login-card .row a:hover { text-decoration: underline; } .login-card .foot { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--m3-outline-variant); font-size: 12px; color: var(--m3-on-surface-variant); text-align: center; letter-spacing: .033em; } /* ── segmented (mat-button-toggle-group) ── */ .seg { display: inline-flex; border: 1px solid var(--m3-outline); border-radius: var(--shape-full); overflow: hidden; } .seg button { height: 40px; padding: 0 16px; border: 0; background: transparent; color: var(--m3-on-surface); font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: .089em; cursor: default; position: relative; overflow: hidden; transition: background .15s; } .seg button + button { border-left: 1px solid var(--m3-outline); } .seg button::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .15s; pointer-events: none; } .seg button:hover::before { opacity: var(--state-hover); } .seg button.on { background: var(--m3-secondary-container); color: var(--m3-on-secondary-container); } /* ── progress ── */ .progress { height: 4px; background: var(--m3-surface-container-highest); border-radius: var(--shape-full); overflow: hidden; } .progress > span { display: block; height: 100%; background: var(--m3-primary); border-radius: var(--shape-full); transition: width .3s var(--ease-emphasized); } /* ── tabs (mat-tab-group) ── */ .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--m3-outline-variant); } .tab { padding: 0 24px; height: 48px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; letter-spacing: .089em; color: var(--m3-on-surface-variant); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: default; position: relative; overflow: hidden; transition: color .15s; } .tab::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .15s; pointer-events: none; } .tab:hover { color: var(--m3-on-surface); } .tab:hover::before { opacity: var(--state-hover); } .tab.on { color: var(--m3-primary); border-bottom: 3px solid var(--m3-primary); border-radius: 3px 3px 0 0; } /* ── shortcuts overlay ── */ .shortcuts { position: fixed; inset: 0; z-index: 250; background: rgba(0,0,0,.32); display: grid; place-items: center; animation: fadeIn .2s var(--ease-emphasized); } .shortcuts .panel { background: var(--m3-surface-container-high); border-radius: var(--shape-xl); width: 560px; max-width: calc(100vw - 32px); padding: 24px 28px; box-shadow: var(--m3-elev-3); } .shortcuts h3 { margin: 0 0 16px; font-size: 24px; font-weight: 400; color: var(--m3-on-surface); letter-spacing: 0; } .shortcuts .sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; } .shortcuts .sgrid .it { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--m3-outline-variant); font-size: 14px; color: var(--m3-on-surface); } .shortcuts .sgrid .it:last-child, .shortcuts .sgrid .it:nth-last-child(2) { border-bottom: 0; } .shortcuts .sgrid .it .keys { display: flex; gap: 4px; } /* ── scrollbars ── */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-thumb { background: var(--m3-outline-variant); border-radius: 12px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--m3-outline); border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; } /* ── component gallery (showcase page) ── */ .gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .demo-block { background: var(--m3-surface-container-lowest); border: 1px solid var(--m3-outline-variant); border-radius: var(--shape-md); padding: 24px; } .demo-block h4 { margin: 0 0 4px; font-size: 16px; font-weight: 500; color: var(--m3-on-surface); letter-spacing: .009em; } .demo-block .demo-sub { font-size: 14px; color: var(--m3-on-surface-variant); margin-bottom: 16px; letter-spacing: .0178em; } .demo-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .demo-row + .demo-row { margin-top: 12px; } /* ── swatches ── */ .swatches { display: flex; gap: 12px; flex-wrap: wrap; } .sw { width: 132px; border-radius: var(--shape-md); overflow: hidden; border: 1px solid var(--m3-outline-variant); background: var(--m3-surface-container-lowest); } .sw .chunk { height: 72px; } .sw .meta { padding: 12px; font-size: 11px; } .sw .meta b { display: block; font-size: 13px; font-weight: 500; color: var(--m3-on-surface); } .sw .meta code { color: var(--m3-on-surface-variant); font-size: 11px; font-family: "Roboto Mono", monospace; } /* ── utility ── */ .hstack { display: flex; gap: 8px; align-items: center; } .vstack { display: flex; flex-direction: column; gap: 8px; } .muted { color: var(--m3-on-surface-variant); } .small { font-size: 12px; letter-spacing: .033em; } .tabular { font-variant-numeric: tabular-nums; } .sr-only { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); overflow: hidden; } /* ── tiny icons (kept for legacy SVG paths) ── */ .ic-sm svg { width: 16px; height: 16px; } .ic-md svg { width: 20px; height: 20px; } .ic-lg svg { width: 24px; height: 24px; } /* ════════════════════════════════════════════════ Theme variants — switch the M3 primary palette data-theme="navy" (default — City of Buffalo) data-theme="indigo" (Material's classic seed) data-theme="azure" (Material 3 default) ════════════════════════════════════════════════ */ :root[data-theme="indigo"] { --m3-primary: #3f51b5; --m3-on-primary: #ffffff; --m3-primary-container: #dde1ff; --m3-on-primary-container: #00115b; --m3-secondary-container: #e1e0f9; --m3-on-secondary-container: #1a1b2e; --m3-tertiary: #ff4081; --m3-on-tertiary: #ffffff; --m3-tertiary-container: #ffd9e2; --m3-on-tertiary-container: #3f001a; } :root[data-theme="azure"] { --m3-primary: #0061a4; --m3-on-primary: #ffffff; --m3-primary-container: #d1e4ff; --m3-on-primary-container: #001d36; --m3-secondary-container: #d6e3f7; --m3-on-secondary-container: #0e1d2a; --m3-tertiary: #6750a4; --m3-on-tertiary: #ffffff; --m3-tertiary-container: #eaddff; --m3-on-tertiary-container: #21005d; } /* ════════════════════════════════════════════════ Form appearance — outline (default) vs filled In Angular Material, mat-form-field appearance="fill" gives an underlined surface-tinted field. ════════════════════════════════════════════════ */ :root[data-form-appearance="fill"] .input, :root[data-form-appearance="fill"] .select, :root[data-form-appearance="fill"] .textarea { border: 0; border-bottom: 1px solid var(--m3-on-surface-variant); border-radius: var(--shape-xs) var(--shape-xs) 0 0; background: var(--m3-surface-container-highest); } :root[data-form-appearance="fill"] .input:hover, :root[data-form-appearance="fill"] .select:hover, :root[data-form-appearance="fill"] .textarea:hover { background: var(--m3-surface-container-high); border-bottom-color: var(--m3-on-surface); } :root[data-form-appearance="fill"] .input:focus, :root[data-form-appearance="fill"] .select:focus, :root[data-form-appearance="fill"] .textarea:focus { border-width: 0 0 2px 0; padding: 0 16px; border-bottom-color: var(--m3-primary); background: var(--m3-surface-container-high); } :root[data-form-appearance="fill"] .textarea:focus { padding: 14px 16px; } /* ════════════════════════════════════════════════ Default button-style preference — applied to .btn.primary data-button-style="filled" (default) data-button-style="tonal" data-button-style="stroked" ════════════════════════════════════════════════ */ :root[data-button-style="tonal"] .btn.primary:not(.danger) { background: var(--m3-secondary-container); color: var(--m3-on-secondary-container); box-shadow: none; } :root[data-button-style="tonal"] .btn.primary:not(.danger):hover { box-shadow: var(--m3-elev-1); } :root[data-button-style="stroked"] .btn.primary:not(.danger) { background: transparent; color: var(--m3-primary); border: 1px solid var(--m3-outline); box-shadow: none; } :root[data-button-style="stroked"] .btn.primary:not(.danger):hover { box-shadow: none; }