/* ───────────────────────────────────────────────────────────────────────── Radar61 Admin — product theme layered on the Modernist design system. Everything above the `Interaction` rule below is lifted verbatim from the block of `Radar61 Admin.dc.html`: the product palette mapped onto the Modernist token names. Retune colours here, not in _ds/. ───────────────────────────────────────────────────────────────────────── */ :root { --color-bg: #f4f4f5; --color-surface: #ffffff; --color-text: #111827; --color-accent: #f26522; --color-accent-2: #f26522; --color-divider: rgba(17, 24, 39, .16); --color-accent-100: #fef3ed; --color-accent-200: #fde0d0; --color-accent-300: #fbc3a5; --color-accent-400: #f79a68; --color-accent-500: #f26522; --color-accent-600: #d5540f; --color-accent-700: #ab420b; --color-accent-800: #7d3009; --color-accent-900: #4e1f07; --rdr-success: #16a34a; --rdr-success-bg: rgba(22, 163, 74, .12); --rdr-error: #dc2626; --rdr-error-bg: rgba(220, 38, 38, .10); --rdr-warning: #ca8a04; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .08); --shadow-md: 0 4px 6px rgba(0, 0, 0, .08); --shadow-lg: 0 10px 15px rgba(0, 0, 0, .12); } html, body { margin: 0; padding: 0; background: #f4f4f5; } [data-theme="dark"] { --color-bg: #0e0e0e; --color-surface: #1a1a1a; --color-text: #ededed; --color-divider: rgba(255, 255, 255, .14); --rdr-success: #22c55e; --rdr-error: #ef4444; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 4px 6px rgba(0, 0, 0, .3); --shadow-lg: 0 10px 15px rgba(0, 0, 0, .4); background: #0e0e0e; } /* The theme flag lives on so the overscroll gutter matches the app. */ [data-theme="dark"] body { background: #0e0e0e; } a { color: var(--color-accent-700); text-decoration: none; } a:hover { color: var(--color-accent-600); text-decoration: underline; } [data-theme="dark"] a { color: var(--color-accent-400); } [data-theme="dark"] a:hover { color: var(--color-accent-300); } @keyframes rdrIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes rdrSlide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes rdrFade { from { opacity: 0; } to { opacity: 1; } } /* ───────────────────────────────────────────────────────────────────────── Interaction — the `style-hover` attributes of the design source. Those are a design-tool affordance with no runtime equivalent, so each one becomes a class here and the element carries the class instead of an inline hover. ───────────────────────────────────────────────────────────────────────── */ .rdr-hover:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .rdr-bar { transition: opacity .15s; } .rdr-bar:hover { opacity: .75; } .rdr-th:hover { color: var(--color-accent-700); } .rdr-seg:not(.is-active):hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); } /* Row backgrounds resolve here rather than inline so that hover, zebra and selection compose instead of overwriting one another. Order matters: the selection rules come last and therefore win the specificity tie. */ tbody tr.rdr-row { cursor: pointer; border-bottom: 1px solid var(--color-divider); } tbody tr.rdr-row:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); } tbody tr.rdr-row.is-zebra { background: color-mix(in srgb, var(--color-text) 4%, transparent); } tbody tr.rdr-row.is-zebra:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); } tbody tr.rdr-row.is-checked, tbody tr.rdr-row.is-checked:hover { background: color-mix(in srgb, var(--color-accent) 9%, transparent); } /* The design system tints every table row on hover; the collection tables opt out so the rules above are the only ones in play. */ .table tbody tr:hover { background: none; } /* Scoped so it cannot leak into the settings form's own selects. */ .rdr-toolbar select.input { cursor: pointer; } /* Custom Dropdown Styling */ .rdr-nav-summary::-webkit-details-marker { display: none; } .rdr-nav-summary { list-style: none; outline: none; transition: background 0.2s ease, color 0.2s ease; } .rdr-nav-summary:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); color: var(--color-text); } .rdr-nav-details[open] .rdr-nav-chevron { transform: rotate(180deg); } .rdr-nav-items { margin-left: 24px; padding-left: 0; border-left: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent); } .rdr-nav-item { border-radius: 0; margin-right: 0; } .rdr-nav-item:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent) !important; } /* ───────────────────────────────────────────────────────────────────────── Shell — the design source builds the sidebar, page header, drawer, modals and toasts from inline style objects in `app.js`. Server-rendered markup has no equivalent, so each style object becomes the class below, values unchanged. ───────────────────────────────────────────────────────────────────────── */ .rdr-shell { min-height: 100vh; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); display: flex; align-items: stretch; } /* — sidebar — */ .rdr-sidebar { width: 236px; flex: none; border-right: 2px solid var(--color-divider); background: var(--color-bg); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; } .rdr-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: var(--space-4); border-bottom: 2px solid var(--color-divider); text-decoration: none; color: inherit; } .rdr-sidebar-brand:hover { text-decoration: none; } .rdr-logo { height: 18px; width: auto; } .rdr-chip { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 2px 5px; background: var(--color-accent); color: #ffffff; } .rdr-nav { flex: 1; padding-bottom: var(--space-6); } .rdr-nav-details { padding-top: var(--space-2); } .rdr-nav-summary { padding: 8px 12px 8px 16px; cursor: pointer; user-select: none; display: flex; align-items: center; margin: 0 0 2px; } .rdr-nav-icon { margin-right: 10px; display: flex; opacity: .8; } .rdr-nav-label { font-weight: 600; font-size: 13px; opacity: .9; flex: 1; } .rdr-nav-chevron { opacity: .5; transition: transform .2s; display: flex; } .rdr-nav-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 16px; font-size: 13px; text-decoration: none; color: color-mix(in srgb, var(--color-text) 72%, transparent); } .rdr-nav-item:hover { text-decoration: none; color: var(--color-text); } .rdr-nav-item.is-active { color: var(--color-text); font-weight: 600; background: color-mix(in srgb, var(--color-accent) 8%, transparent); } .rdr-nav-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; } .rdr-nav-badge { margin-left: auto; font-size: 10px; font-weight: 600; padding: 1px 5px; background: var(--color-accent); color: #ffffff; border-radius: 10px; } .rdr-sidebar-foot { border-top: 2px solid var(--color-divider); padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: 10px; } .rdr-avatar { width: 30px; height: 30px; flex: none; background: var(--color-accent); color: #ffffff; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 11px; display: flex; align-items: center; justify-content: center; } .rdr-sidebar-user { font-size: 12px; line-height: 1.3; min-width: 0; display: block; } .rdr-sidebar-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .rdr-sidebar-role { opacity: .55; display: block; } .rdr-sidebar-tools { margin-left: auto; display: flex; align-items: center; gap: 4px; } .rdr-icon-btn { padding: 4px 7px; font-size: 11px; } /* — main column and page header — */ .rdr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .rdr-page-header { padding: var(--space-6) var(--space-6) var(--space-4); border-bottom: 2px solid var(--color-divider); display: flex; align-items: flex-end; gap: var(--space-6); flex-wrap: wrap; } .rdr-page-heading { min-width: 0; } .rdr-page-heading h1 { font-size: 32px; margin: 0 0 4px; } .rdr-page-sub { margin: 0; font-size: 13px; opacity: .62; max-width: 62ch; text-wrap: pretty; } .rdr-page-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); } .rdr-kicker { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .5; margin-bottom: 6px; } .rdr-body { padding: var(--space-6); display: flex; gap: var(--space-6); align-items: flex-start; } .rdr-body-main { min-width: 0; flex: 1; } /* — stat strip — */ .rdr-stats { display: grid; border: 1px solid var(--color-divider); margin-bottom: var(--space-6); } .rdr-stat { padding: var(--space-3) var(--space-4); border-right: 1px solid var(--color-divider); } .rdr-stat:last-child { border-right: 0; } .rdr-stat-label { font-size: 11px; opacity: .55; margin-bottom: 4px; } .rdr-stat-value { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 22px; line-height: 1.1; } .rdr-stat-note { font-size: 12px; margin-top: 4px; opacity: .6; } /* — toolbar — */ .rdr-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); } .rdr-toolbar .rdr-search { width: 280px; } .rdr-toolbar select.input { cursor: pointer; width: 150px; font-family: var(--font-heading); font-weight: 800; font-size: 12px; } .rdr-segs { display: flex; gap: 0; border: 1px solid var(--color-divider); } .rdr-seg { font-family: var(--font-heading); font-weight: 800; font-size: 11px; padding: 7px 12px; border: 0; border-right: 1px solid var(--color-divider); cursor: pointer; background: transparent; color: var(--color-text); text-decoration: none; display: inline-flex; align-items: center; } .rdr-seg:last-child { border-right: 0; } /* wins over the theme's link colour, which is more specific than `.rdr-seg` */ .rdr-segs .rdr-seg { color: var(--color-text); } .rdr-segs .rdr-seg.is-active { color: #ffffff; } .rdr-seg:hover { text-decoration: none; } .rdr-seg.is-active { background: var(--color-accent); color: #ffffff; } .rdr-count { margin-left: auto; font-size: 12px; opacity: .55; } /* — table — */ .rdr-table-wrap { border: 1px solid var(--color-divider); overflow-x: auto; } .rdr-table { width: 100%; border-collapse: collapse; font-size: 13px; } .rdr-table thead tr { border-bottom: 2px solid var(--color-divider); } .rdr-table th { text-align: left; padding: 10px 14px; font-family: var(--font-heading); font-weight: 800; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; white-space: nowrap; border-bottom: 2px solid var(--color-divider); } .rdr-table th a { color: inherit; text-decoration: none; } .rdr-table th a:hover { color: var(--color-accent-700); text-decoration: none; } .rdr-table td { padding: 8px 14px; vertical-align: middle; white-space: nowrap; border-bottom: 1px solid var(--color-divider); } .rdr-table td.is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } .rdr-table td.is-strong { font-weight: 600; } .rdr-table td.is-chevron { width: 30px; opacity: .35; } .rdr-table .rdr-self { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .5; margin-left: 6px; } .rdr-tag { display: inline-block; font-family: var(--font-heading); font-weight: 800; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; background: color-mix(in srgb, var(--color-text) 10%, transparent); color: var(--color-text); opacity: .85; } .rdr-tag.is-hot { background: var(--color-accent-200); color: var(--color-accent-800); opacity: 1; } .rdr-tag.is-success { background: var(--rdr-success-bg); color: var(--rdr-success); opacity: 1; } .rdr-tag.is-error { background: var(--rdr-error-bg); color: var(--rdr-error); opacity: 1; } .rdr-tag.is-warn { background: transparent; color: var(--color-text); border: 1px solid var(--color-accent); opacity: 1; } .rdr-empty { padding: var(--space-8) var(--space-4); text-align: center; } .rdr-empty-title { font-family: var(--font-heading); font-weight: 800; font-size: 18px; margin-bottom: 6px; } .rdr-empty-sub { font-size: 13px; opacity: .6; margin-bottom: var(--space-4); } .rdr-pagination { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; } .rdr-pagination .rdr-page-count { font-size: 12px; opacity: .55; } .rdr-pagination .rdr-page-nav { margin-left: auto; display: flex; gap: var(--space-2); } .btn.is-disabled { opacity: .45; pointer-events: none; } /* anchors styled as buttons take the theme's link colour otherwise */ .rdr-pagination .btn, .rdr-empty .btn { color: var(--color-text); } /* — drawer — */ .rdr-drawer { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; } .rdr-drawer[hidden] { display: none; } .rdr-drawer-scrim { position: absolute; inset: 0; background: rgba(32, 30, 29, .42); animation: rdrFade .16s ease-out; } .rdr-drawer-panel { position: relative; width: 420px; max-width: 92vw; height: 100%; overflow-y: auto; background: var(--color-bg); border-left: 2px solid var(--color-divider); box-shadow: var(--shadow-lg); animation: rdrSlide .2s ease-out; } .rdr-drawer-head { padding: var(--space-4) var(--space-6); border-bottom: 2px solid var(--color-divider); display: flex; align-items: flex-start; gap: var(--space-3); position: sticky; top: 0; background: var(--color-bg); } .rdr-drawer-head h3 { margin: 6px 0 0; } .rdr-drawer-body { padding: var(--space-6); } .rdr-drawer-close { margin-left: auto; padding: 4px 9px; } .rdr-field-row { display: flex; gap: var(--space-3); padding: 9px 0; border-bottom: 1px solid var(--color-divider); font-size: 13px; } .rdr-field-row dt, .rdr-field-row .rdr-field-label { opacity: .55; flex: none; width: 130px; margin: 0; } .rdr-field-row dd, .rdr-field-row .rdr-field-value { font-weight: 600; margin: 0; min-width: 0; overflow-wrap: anywhere; } .rdr-field-row .rdr-field-value.is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 400; } .rdr-drawer-actions { display: flex; gap: var(--space-2); margin-top: var(--space-6); } /* — modals — */ .rdr-modal { position: fixed; inset: 0; z-index: 70; background: rgba(32, 30, 29, .45); display: flex; align-items: center; justify-content: center; padding: var(--space-6); animation: rdrFade .16s ease-out; } .rdr-modal[hidden] { display: none; } .rdr-modal-card { width: 520px; max-width: 100%; max-height: 88vh; overflow-y: auto; background: var(--color-bg); border: 2px solid var(--color-divider); box-shadow: var(--shadow-lg); animation: rdrIn .18s ease-out; } .rdr-modal-head { padding: var(--space-4) var(--space-6); border-bottom: 2px solid var(--color-divider); display: flex; align-items: center; } .rdr-modal-head h4 { margin: 0; } .rdr-modal-close { margin-left: auto; padding: 4px 9px; } .rdr-modal-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); } .rdr-modal-note { margin: 0; font-size: 13px; opacity: .62; } .rdr-modal-foot { padding: var(--space-4) var(--space-6); border-top: 2px solid var(--color-divider); display: flex; gap: var(--space-2); } .rdr-modal.is-danger { z-index: 75; } .rdr-modal.is-danger .rdr-modal-card { width: 440px; border-color: var(--color-accent); } .rdr-modal.is-danger .rdr-modal-head { border-bottom-color: var(--color-accent); background: var(--color-accent-100); } .rdr-modal.is-danger .rdr-modal-head h4 { color: var(--color-accent-800); } .rdr-modal.is-danger .rdr-modal-foot { border-top-color: var(--color-divider); } .rdr-confirm-sub { margin: 0 0 var(--space-4); font-size: 13px; text-wrap: pretty; } .rdr-checks { display: flex; flex-direction: column; gap: var(--space-2); } .rdr-check { display: flex; align-items: flex-start; gap: 10px; padding: 10px var(--space-3); border: 1px solid var(--color-divider); font-size: 13px; cursor: pointer; } .rdr-check input { accent-color: var(--color-accent); width: 15px; height: 15px; margin-top: 2px; flex: none; } .rdr-check-name { font-weight: 600; display: block; } .rdr-check-note { font-size: 12px; opacity: .6; display: block; } .rdr-errors { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-accent); background: var(--color-accent-100); color: var(--color-accent-800); font-size: 13px; list-style: none; } .rdr-errors li + li { margin-top: 4px; } /* — toasts — */ .rdr-toasts { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 90; display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; } .rdr-toast { min-width: 260px; max-width: 360px; background: var(--color-text); color: var(--color-bg); padding: 11px var(--space-4); box-shadow: var(--shadow-md); display: flex; align-items: center; gap: var(--space-3); animation: rdrIn .18s ease-out; pointer-events: auto; } .rdr-toast-dot { width: 8px; height: 8px; flex: none; background: var(--color-bg); } .rdr-toast-dot.is-warn { background: var(--color-accent); } .rdr-toast-text { font-size: 13px; } /* — auth — */ .rdr-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6); background: var(--color-bg); } .rdr-auth-card { width: 400px; max-width: 100%; background: var(--color-surface); border: 2px solid var(--color-divider); box-shadow: var(--shadow-lg); } .rdr-auth-head { padding: var(--space-6) var(--space-6) var(--space-4); border-bottom: 2px solid var(--color-divider); } .rdr-auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-4); } .rdr-auth-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); } .rdr-auth-foot { padding: var(--space-3) var(--space-6); border-top: 1px solid var(--color-divider); font-size: 12px; opacity: .55; } .rdr-auth-error { padding: 10px var(--space-3); border-left: 3px solid var(--color-accent); background: var(--color-accent-100); color: var(--color-accent-800); font-size: 13px; } .rdr-validation { display: block; margin-top: 6px; font-size: 12px; color: var(--color-accent-700); }