/* CCM Mail Relay Admin Portal — application layer * * Everything generic (reset, buttons, cards, badges, tables, forms, toasts, * alerts, header, nav) now comes from frikwork: * https://frikwork.com/v0/frikwork.css * This file is only what is specific to the relay portal. Load it AFTER frikwork. */ /* -------------------------------------------------------------------------- Token bridge — the portal's original variable names aliased onto frikwork's. [data-fw-theme="light"] is set on (= :root) and var() resolves at use time, so every rule below becomes theme-aware without being rewritten. There is no --fw-brand-hover token; hover is derived with color-mix. -------------------------------------------------------------------------- */ :root { --primary: var(--fw-brand); /* The legible-on-background brand variant. Use for TEXT; --primary is a fill. #94c83e on light mode's #f5f4f1 is unreadable, so links must use this. */ --primary-text: var(--fw-brand-text); --primary-hover: color-mix(in srgb, var(--fw-brand-text) 75%, var(--fw-text)); --secondary: var(--fw-brand-2); --danger: var(--fw-danger); --warning: var(--fw-warning); --yellow: var(--fw-warning); --bg-dark: var(--fw-bg); --bg-card: var(--fw-bg-card); --bg-card-hover: var(--fw-bg-hover); --bg-input: var(--fw-bg-2); --border: var(--fw-border); --border-input: var(--fw-border); --text: var(--fw-text); --text-muted: var(--fw-text-muted); /* Text that sits ON a brand/solid fill. Inverts with the theme. */ --text-dark: var(--fw-bg); --radius: var(--fw-radius-md); --radius-sm: var(--fw-radius-sm); --radius-lg: var(--fw-radius-lg); --transition: 0.15s ease-in-out; } /* No reset and no body rule here — frikwork's reset and elements layers own the box model, font stack, background and text colour. */ a { color: var(--primary-text); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--primary-hover); } /* Header — frikwork owns the bar (.fw-header) and the links (.fw-navlinks / .fw-navlink). These are just the relay's three groups inside it. */ .app-header-left { display: flex; align-items: center; min-width: 0; } .app-logo { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1rem; color: var(--primary-text); white-space: nowrap; } .app-logo:hover { color: var(--primary-text); } .app-version { font-size: 0.65rem; color: var(--text-muted); font-weight: 400; } .app-header-right { display: flex; align-items: center; gap: 0.5rem; } .app-flash-stack { margin-bottom: 1rem; } /* Page header. frikwork gives every heading margin-block via :where() (zero specificity); these panels lay out their own headings, so opt back out. */ .app-page-header { margin-bottom: 1.5rem; } .app-page-header h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; margin-block: 0; } /* Stat cards — frikwork owns .fw-stat-card and its __label/__value children. Only the third line (a detail caption) is ours. */ .app-stat-detail { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; } /* Grids, buttons, tables and badges all come from frikwork now: .fw-grid/--cols-N, .fw-btn/--primary|--warning|--danger|--sm, .fw-table inside .fw-table-wrap, and .fw-badge/--success|--warning|--danger. */ .app-btn-group { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* Forms — frikwork owns .fw-field, .fw-label, .fw-input and .fw-select, including the focus ring. */ .app-form-inline { display: flex; gap: 0.75rem; align-items: flex-start; } .app-form-inline input { flex: 1; } .app-log-controls { display: flex; gap: 1rem; align-items: flex-end; } .app-log-controls .fw-field { margin-bottom: 0; flex: 1; } /* Log viewer — deliberately terminal-styled; frikwork has no equivalent. */ .app-log-viewer { max-height: 600px; overflow-y: auto; font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace; font-size: 0.75rem; line-height: 1.6; margin-top: 0.75rem; } .app-log-line { padding: 0.125rem 0.5rem; border-left: 2px solid transparent; white-space: pre-wrap; word-break: break-all; } .app-log-line:hover { background: var(--bg-card-hover); } .app-log-sent { border-left-color: var(--primary); } .app-log-deferred { border-left-color: var(--yellow); } .app-log-error { border-left-color: var(--danger); } .app-log-stats { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* DNS output uses frikwork's .fw-output. */ /* Diagnostics result. The old rule needed !important to beat `.card p`; frikwork does not style .fw-card p, so the override is unnecessary. */ .app-diag-result { font-size: 1rem; color: var(--text); font-weight: 500; } .app-code-sm { font-size: 0.75rem; opacity: 0.8; } /* Login — a centred frikwork card. */ .app-login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1.5rem; } .app-login-card { width: 100%; max-width: 420px; text-align: center; box-shadow: var(--fw-shadow-lg), var(--fw-shadow-glow); } .app-login-header { margin-bottom: 1.5rem; } .app-login-logo { color: var(--primary-text); display: block; margin: 0 auto 1rem; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--fw-brand) 30%, transparent)); } .app-login-header h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; margin-block: 0 0.25rem; } .app-login-header p { margin-block: 0; font-size: 0.875rem; } /* Google's brand colours are mandated — these must NOT follow the theme. */ .app-btn-google { width: 100%; justify-content: center; padding: 0.85rem 1.5rem; font-size: 1rem; background: #131314; color: #E3E3E3; border: 1px solid #8E918F; } .app-btn-google:hover { background: #1f1f20; color: #E3E3E3; border-color: #E3E3E3; } .app-login-footer { text-align: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--text-muted); } .app-login-footer p { margin-block: 0 0.5rem; } .app-login-footer p:last-child { margin-block: 0; } .app-login-footer a { color: var(--primary-text); } /* Graph */ .app-graph-container { position: relative; width: 100%; height: 200px; } .app-graph-canvas { width: 100%; height: 100%; } .app-graph-ranges { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; } .app-graph-range-btn { padding: 4px 10px; font-size: 0.7rem; font-weight: 600; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; transition: all var(--transition); font-family: inherit; } .app-graph-range-btn:hover { border-color: var(--text-muted); color: var(--text); } .app-graph-range-btn.active { background: var(--primary); color: var(--text-dark); border-color: var(--primary); } /* Date range picker */ .app-date-range-wrap { display: flex; align-items: center; gap: 6px; margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--border); } .app-date-range-wrap .app-date-range-sep { color: var(--text-muted); font-size: 0.7rem; flex-shrink: 0; } .app-date-range-wrap .app-btn-date-go { padding: 4px 12px; font-size: 0.7rem; font-weight: 600; border: 1px solid var(--primary); border-radius: var(--radius-sm); background: transparent; color: var(--primary); cursor: pointer; transition: all var(--transition); font-family: inherit; flex-shrink: 0; } .app-date-range-wrap .app-btn-date-go:hover { background: var(--primary); color: var(--text-dark); } /* CCM Date Picker */ .app-ccp-wrap { position: relative; display: inline-block; } .app-ccp-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: 0.7rem; font-weight: 500; font-family: inherit; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-dark); color: var(--text-muted); cursor: pointer; transition: all var(--transition); white-space: nowrap; line-height: 1.6; } .app-ccp-trigger:hover { border-color: var(--text-muted); color: var(--text); } .app-ccp-trigger.app-ccp-active { border-color: var(--primary); color: var(--text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fw-brand) 15%, transparent); } .app-ccp-trigger-text { pointer-events: none; } .app-ccp-trigger-text.app-ccp-has-value { color: var(--text); } .app-ccp-trigger svg { opacity: 0.5; flex-shrink: 0; } .app-ccp-dropdown { position: absolute; top: calc(100% + 6px); left: 0; z-index: 200; width: 280px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--fw-shadow-lg); padding: 12px; display: none; } .app-ccp-dropdown.app-ccp-open { display: block; } .app-ccp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .app-ccp-title { font-size: 0.85rem; font-weight: 600; color: var(--text); text-align: center; } .app-ccp-month-label { color: var(--text); } .app-ccp-year-label { color: var(--text-muted); font-weight: 400; } .app-ccp-nav { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; transition: all var(--transition); } .app-ccp-nav:hover { background: var(--bg-card-hover); color: var(--text); } .app-ccp-days-header { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-bottom: 4px; } .app-ccp-days-header span { font-size: 0.65rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 0; } .app-ccp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .app-ccp-day { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text); font-size: 0.75rem; font-family: inherit; cursor: pointer; transition: all var(--transition); position: relative; } .app-ccp-day:hover:not(:disabled) { background: var(--bg-card-hover); } .app-ccp-day-other { color: color-mix(in srgb, var(--fw-text-muted) 45%, transparent); cursor: default; } .app-ccp-day-disabled { color: color-mix(in srgb, var(--fw-text-muted) 45%, transparent); cursor: not-allowed; } .app-ccp-day-today { color: var(--primary); font-weight: 700; } .app-ccp-day-today::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--primary); opacity: 0.5; } .app-ccp-day-selected { background: var(--primary) !important; color: var(--text-dark) !important; font-weight: 700; } .app-ccp-day-selected::after { display: none; } .app-ccp-footer { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); } .app-ccp-footer-btn { border: none; background: transparent; color: var(--text-muted); font-size: 0.7rem; font-family: inherit; font-weight: 500; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); transition: all var(--transition); } .app-ccp-footer-btn:hover { color: var(--text); background: var(--bg-card-hover); } .app-ccp-footer-today { color: var(--primary); } .app-ccp-footer-today:hover { color: var(--primary); background: color-mix(in srgb, var(--fw-brand) 10%, transparent); } /* Domain management */ .app-row-disabled { opacity: 0.5; } .app-row-disabled:hover { opacity: 0.8; } .app-actions-cell { display: flex; gap: 0.5rem; align-items: center; } /* A table cell whose whole content is a link to the row's detail page. */ .app-cell-link { color: var(--text); font-weight: 600; } .app-cell-link:hover { color: var(--primary-text); } /* A card's own header strip: title on the left, controls on the right. */ .app-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .app-card-head h2 { margin-block: 0; } .app-search { width: 260px; max-width: 100%; } .app-no-results { display: none; margin-top: 12px; } /* -------------------------------------------------------------------------- Dashboard -------------------------------------------------------------------------- */ .app-page-header--split { display: flex; align-items: center; justify-content: space-between; } .app-live { display: flex; align-items: center; gap: 10px; } .app-queued { color: var(--yellow); } .app-queue-scroll { max-height: 300px; overflow-y: auto; } .app-queue-empty { text-align: center; padding: 16px; } .app-queue-count { margin-top: 8px; } .app-graph-legend { display: flex; gap: 16px; margin-top: 8px; justify-content: center; } .app-graph-legend span { display: flex; align-items: center; gap: 4px; } .app-legend-swatch { width: 10px; height: 3px; border-radius: 2px; display: inline-block; } /* Numeric table cells. The colour is a modifier rather than an inline style so the theme owns the palette — the live refresh rebuilds these as class strings. */ .app-num { text-align: right; } .app-num--zero { color: var(--text-muted); } .app-num--sent { color: var(--primary-text); } .app-num--bad { color: var(--danger); } .app-num--warn { color: var(--yellow); } .app-num--total { font-weight: 600; } .app-total-row { border-top: 2px solid var(--border); } .app-cell-sm { font-size: 0.8rem; } .app-nowrap { white-space: nowrap; } /* Value-changed flash, used by the live refresh on both the dashboard and the domain detail page. */ @keyframes fadeIn { from { opacity: .5 } to { opacity: 1 } } .fade-update { animation: fadeIn .4s ease; } /* -------------------------------------------------------------------------- Domain detail -------------------------------------------------------------------------- */ .app-detail-head { display: flex; align-items: center; gap: 12px; } .app-back { color: var(--text-muted); font-size: 1.25rem; } .app-back:hover { color: var(--text); } .app-recent-scroll { max-height: 400px; overflow-y: auto; } .app-break { word-break: break-all; } .app-period-row { display: flex; align-items: center; gap: 8px; margin-top: 1rem; margin-bottom: 0.75rem; } /* Scrollbar */ /* Scrollbars come from frikwork's elements layer. */