/* (c) 2026 Pulseflare ehf. - SPDX-License-Identifier: MIT * Panel-specific additions on top of the vendored Pico.css (pico.min.css). * Local only: no imports, no remote URLs - the panel is LAN-only. * * Rebranding (M6.5): change the accent in ONE place - the --pf-accent* * variables below (light + dark). Everything Pico calls "primary" * (buttons, links, focus rings) follows them. * * M10: app shell (sidebar on desktop, collapsible top menu under 900px), * one spacing scale (--sp-*), cards, tables, button hierarchy, meters, * chips, empty states, dismissible flashes. Status colours are chosen for * WCAG AA (>= 4.5:1) as text on the page, on cards and on their own 12% * tint, in both themes (tests/test_m10_a11y.py recomputes the ratios). */ :root { --pf-accent: #c2410c; /* light mode accent (button background) */ --pf-accent-hover: #9a3412; --pf-accent-inverse: #ffffff; /* text on accent backgrounds */ --pf-accent-text: #a3390b; /* accent as TEXT on light surfaces / tints */ --pf-ok: #1e6b24; --pf-warn: #8a4f00; --pf-err: #b42318; --pf-muted: #646b79; --pf-sidebar-bg: #fafafb; --pico-font-size: 95%; /* spacing scale */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sidebar-w: 15rem; --radius: .5rem; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pf-accent: #fb8a4c; --pf-accent-hover: #fdba74; --pf-accent-inverse: #1c1917; --pf-accent-text: #fb8a4c; --pf-ok: #66bb6a; --pf-warn: #ffb74d; --pf-err: #f47c78; --pf-muted: #8b93a3; --pf-sidebar-bg: #10141b; } } [data-theme="dark"] { --pf-accent: #fb8a4c; --pf-accent-hover: #fdba74; --pf-accent-inverse: #1c1917; --pf-accent-text: #fb8a4c; --pf-ok: #66bb6a; --pf-warn: #ffb74d; --pf-err: #f47c78; --pf-muted: #8b93a3; --pf-sidebar-bg: #10141b; } /* Pico defines its colours on :root; declaring them on body makes every * element inherit ours instead (no specificity games needed). */ body { --pico-primary: var(--pf-accent-text); --pico-primary-background: var(--pf-accent); --pico-primary-border: var(--pf-accent); --pico-primary-underline: color-mix(in srgb, var(--pf-accent) 50%, transparent); --pico-primary-hover: var(--pf-accent-hover); --pico-primary-hover-background: var(--pf-accent-hover); --pico-primary-hover-border: var(--pf-accent-hover); --pico-primary-hover-underline: var(--pf-accent-hover); --pico-primary-focus: color-mix(in srgb, var(--pf-accent) 35%, transparent); --pico-primary-inverse: var(--pf-accent-inverse); --pico-text-selection-color: color-mix(in srgb, var(--pf-accent) 25%, transparent); --pico-muted-color: var(--pf-muted); --pico-spacing: 1rem; --pico-block-spacing-vertical: 1.15rem; --pico-block-spacing-horizontal: 1.25rem; --pico-form-element-spacing-vertical: .55rem; --pico-form-element-spacing-horizontal: .8rem; margin: 0; /* the page's text colour, for links that should read as text (Pico sets --pico-color to the accent on every ) */ --pf-text: var(--pico-color); } /* --- app shell ------------------------------------------------------------- */ .skip-link { position: absolute; left: -999px; top: var(--sp-2); z-index: 200; padding: var(--sp-2) var(--sp-3); background: var(--pico-background-color); border: 2px solid var(--pf-accent); border-radius: var(--radius); } .skip-link:focus { left: var(--sp-2); } .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) var(--sp-3); background: var(--pf-sidebar-bg); border-right: 1px solid var(--pico-muted-border-color); } .sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-inline: var(--sp-2); } .brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--pf-text); font-weight: 750; font-size: 1.1rem; letter-spacing: -.01em; } .brand:hover { color: var(--pf-text); text-decoration: none; } .brand-mark { color: var(--pf-accent); flex: none; } .brand-mark path { stroke: var(--pf-accent-inverse); } .menu-toggle { display: none; width: auto; margin: 0; padding: .35rem .7rem; font-size: .85rem; } .sidebar-nav { flex: 1; } .sidebar-nav, .sidebar-nav ul { display: block; } nav.sidebar-nav ul, nav.sidebar-nav ul:first-child, nav.sidebar-nav ul:last-child { list-style: none; padding: 0; margin: 0; } .sidebar-nav li { list-style: none; margin: 0 0 2px; padding: 0; } .nav-group { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--pico-muted-color); margin: var(--sp-4) var(--sp-3) var(--sp-1); } .nav-group:first-child { margin-top: var(--sp-2); } .sidebar-nav a, .sidebar-nav .nav-disabled { display: flex; align-items: center; gap: .6rem; padding: .42rem .65rem; margin: 0; border-radius: var(--radius); color: var(--pf-text); text-decoration: none; font-size: .92rem; line-height: 1.3; } .sidebar-nav a:hover { background: color-mix(in srgb, var(--pf-text) 8%, transparent); color: var(--pf-text); } .sidebar-nav a[aria-current="page"] { background: color-mix(in srgb, var(--pf-accent) 14%, transparent); color: var(--pf-accent-text); font-weight: 650; } .sidebar-nav .nav-disabled { color: var(--pico-muted-color); cursor: default; } .nav-icon { flex: none; opacity: .85; } .soon { margin-left: auto; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 0 .4rem; border: 1px solid var(--pico-muted-border-color); border-radius: 999px; } nav.sidebar-nav ul.nav-secondary { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--pico-muted-border-color); } .sidebar-foot { border-top: 1px solid var(--pico-muted-border-color); padding: var(--sp-3) var(--sp-2) 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: .85rem; } .who-box { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; } .who-box .who-text { min-width: 0; } .who-box .who-name { font-weight: 650; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .who-box .who-email { color: var(--pico-muted-color); font-size: .78rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .avatar { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; background: var(--pf-accent); color: var(--pf-accent-inverse); font-size: .85rem; font-weight: 700; } .role-chip { font-size: .68rem; padding: 0 .4rem; border-radius: 999px; border: 1px solid var(--pico-muted-border-color); color: var(--pico-muted-color); } .foot-actions { display: flex; gap: var(--sp-2); } .foot-actions > * { flex: 1 1 0; min-width: 0; margin: 0; } .foot-actions button { width: 100%; margin: 0; padding: .3rem .5rem; font-size: .78rem; white-space: nowrap; } .content { min-width: 0; display: flex; flex-direction: column; } main.page { width: 100%; max-width: 78rem; margin: 0 auto; padding: var(--sp-5) var(--sp-6) var(--sp-4); flex: 1; } .site-footer { color: var(--pico-muted-color); font-size: .8rem; padding: var(--sp-4) var(--sp-6) var(--sp-5); max-width: 78rem; width: 100%; margin: 0 auto; } .site-footer a { color: inherit; } @media (max-width: 900px) { .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; } .sidebar { position: sticky; top: 0; z-index: 50; height: auto; max-height: 100vh; border-right: 0; border-bottom: 1px solid var(--pico-muted-border-color); padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); } .menu-toggle { display: inline-flex; } .js .sidebar:not(.is-open) .sidebar-nav, .js .sidebar:not(.is-open) .sidebar-foot { display: none; } .sidebar-foot { padding-bottom: var(--sp-2); } main.page { padding: var(--sp-4) var(--sp-4) var(--sp-3); } .site-footer { padding-inline: var(--sp-4); } } /* --- focus + a11y ------------------------------------------------------------ */ a:focus-visible, summary:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* --- page heads, cards ------------------------------------------------------- */ .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); } .page-head > div:first-child { margin: 0; min-width: 0; } hgroup.page-head { display: block; } .page-head h1 { margin-bottom: var(--sp-1); font-size: 1.6rem; word-break: break-word; } .page-head p { color: var(--pico-muted-color); margin: 0; } .page-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; } .page-actions > *, .page-actions form > * { margin: 0; } .page-actions form { margin: 0; } .title-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); } .title-line h1 { margin: 0; } article { margin-bottom: var(--sp-5); border-radius: var(--radius); } article > header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; } article > header h2, .card-title { font-size: 1rem; margin: 0; } article > header .muted { font-weight: 400; } article > header a, article > header small a { font-size: .85rem; } .cards { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); margin-bottom: var(--sp-5); } .cards > article { margin: 0; display: flex; flex-direction: column; } .cards > article > footer { margin-top: auto; } .cards-2 { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); align-items: start; margin-bottom: var(--sp-5); } .cards-2 > article { margin: 0; } .narrow-card { max-width: 40rem; } .kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4); margin: 0 0 var(--sp-3); } .kv dt { color: var(--pico-muted-color); font-weight: 400; margin: 0; } .kv dd { margin: 0; min-width: 0; word-break: break-word; } .card-link { font-size: .9rem; } .empty { text-align: center; padding: var(--sp-5) var(--sp-4); color: var(--pico-muted-color); } .empty p { margin-bottom: var(--sp-3); } .empty .page-actions { justify-content: center; } /* --- buttons + forms ------------------------------------------------------------ */ button[type="submit"], input[type="submit"] { width: auto; } button, [role="button"], input[type="submit"] { padding: .45rem .95rem; font-size: .9rem; } .form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); } .form-actions > *, .form-actions form { margin: 0; } .form-actions.start { justify-content: flex-start; } button.sm, [role="button"].sm, input[type="submit"].sm { padding: .22rem .6rem; font-size: .8rem; width: auto; margin: 0; } button.danger, [role="button"].danger { color: var(--pf-err); border-color: var(--pf-err); background: transparent; } button.danger:hover, [role="button"].danger:hover, button.danger:focus, [role="button"].danger:focus { color: var(--pf-err); border-color: var(--pf-err); background: color-mix(in srgb, var(--pf-err) 10%, transparent); } .field-error { color: var(--pf-err); font-size: .85rem; margin: 0 0 var(--sp-3); } td form { margin: 0; display: inline-flex; gap: .35rem; align-items: center; } td form select { margin: 0; padding-block: .25rem; font-size: .85rem; width: auto; min-width: 10rem; } td form input.narrow { margin: 0; padding-block: .25rem; font-size: .85rem; width: 6.5rem; } td.actions { white-space: nowrap; text-align: right; } td.actions > * { margin-left: .35rem; } .nowrap { white-space: nowrap; } .mono { font-family: var(--pico-font-family-monospace); font-size: .85em; } .muted { color: var(--pico-muted-color); } td.detail { word-break: break-all; max-width: 24rem; } textarea.code { font-family: var(--pico-font-family-monospace); min-height: 24rem; font-size: .85rem; } .inline-tools { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; } .inline-tools form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin: 0; } .inline-tools input, .inline-tools select { margin: 0; width: auto; } .inline-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .inline-row input, .inline-row select { flex: 1 1 14rem; margin-bottom: 0; } .inline-row button, .inline-row [role="button"] { width: auto; margin-bottom: 0; } .inline-row code { white-space: nowrap; } .checkbox-line { margin-block: .75rem; } .advanced summary, details.disclosure > summary { font-size: .9rem; color: var(--pico-muted-color); } /* "+ New ..." disclosures that open a compact form in place (no modal). */ details.new-thing { margin: 0 0 var(--sp-4); } details.new-thing > summary { display: inline-flex; list-style: none; } details.new-thing > summary[role="button"] { width: auto; } .folder-crumbs ul { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); list-style: none; padding: 0; margin: 0 0 var(--sp-3); font-size: .9rem; } .folder-crumbs li { list-style: none; margin: 0; padding: 0; } .folder-crumbs li + li::before { content: "/"; color: var(--pico-muted-color); margin-right: var(--sp-2); } .signed-out-head { border-bottom: 1px solid var(--pico-muted-border-color); } .signed-out-head .container { display: flex; align-items: center; justify-content: space-between; padding-block: var(--sp-3); } .signed-out-head .theme-toggle { width: auto; } details.new-thing > summary::-webkit-details-marker { display: none; } details.new-thing > summary::after { display: none; } details.new-thing[open] > summary { margin-bottom: var(--sp-3); } details.new-thing > .new-body { border: 1px solid var(--pico-muted-border-color); border-radius: var(--radius); padding: var(--sp-4); background: var(--pico-card-background-color); } /* --- filter bar + pager -------------------------------------------------------- */ .filter-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-4); } .filter-form input, .filter-form select { width: auto; flex: 1 1 10rem; min-width: 0; margin-bottom: 0; padding-block: .4rem; } .filter-form input[type="search"] { flex: 3 1 14rem; min-width: 0; } .filter-form button, .filter-form a[role="button"] { width: auto; margin-bottom: 0; flex: none; padding: .4rem .9rem; } .pager { display: flex; gap: var(--sp-4); align-items: center; justify-content: center; margin: var(--sp-3) 0 var(--sp-5); flex-wrap: wrap; } /* --- flash messages (dismissible) ------------------------------------------------- */ .flash { display: flex; align-items: flex-start; gap: var(--sp-3); padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: var(--sp-4); border-left: 4px solid; } .flash-ok { border-color: var(--pf-ok); background: color-mix(in srgb, var(--pf-ok) 10%, transparent); } .flash-error { border-color: var(--pf-err); background: color-mix(in srgb, var(--pf-err) 10%, transparent); } .flash > .flash-text { flex: 1; } .flash-close { flex: none; margin: -.2rem -.3rem 0 0; padding: 0 .4rem; width: auto; border: 0; background: none; color: inherit; font-size: 1.25rem; line-height: 1.2; box-shadow: none; } .flash-close:hover, .flash-close:focus { background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; } p.flash { display: block; } /* --- status: detailed badges (admins) + one plain pill (everyone) ------ */ .badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; } .badge { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; line-height: 1.5; white-space: nowrap; border: 1px solid currentColor; } .badge-ok { color: var(--pf-ok); } .badge-warn { color: var(--pf-warn); } .badge-error { color: var(--pf-err); } .badge-unknown, .badge-na, .badge-pending { color: var(--pf-muted); } .badge-pending { border-style: dashed; } .status-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .1rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; color: var(--pf-muted); background: color-mix(in srgb, currentColor 12%, transparent); } .status-pill::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; } .status-online, .status-ok, .status-active { color: var(--pf-ok); } .status-waiting_dns, .status-elsewhere, .status-missing { color: var(--pf-warn); } .status-problem, .status-disabled { color: var(--pf-err); } .status-setting_up { color: var(--pf-accent-text); } .status-paused, .status-suspended { color: var(--pf-warn); } .status-pending::before { animation: pf-pulse 1.2s ease-in-out infinite; } @keyframes pf-pulse { 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .status-pending::before { animation: none; } } a.preview { white-space: nowrap; } .tag { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .05rem .45rem; border-radius: 4px; margin-left: .4rem; vertical-align: middle; } .tag-primary { background: color-mix(in srgb, var(--pf-accent) 12%, transparent); color: var(--pf-accent-text); } /* --- chips (users with access, domains) -------------------------------------------- */ .chips { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center; margin: 0; padding: 0; list-style: none; } .chips > li { list-style: none; margin: 0; } .chip { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .6rem; border-radius: 999px; font-size: .82rem; background: color-mix(in srgb, var(--pico-color) 8%, transparent); border: 1px solid var(--pico-muted-border-color); white-space: nowrap; } .chip code { background: none; padding: 0; font-size: inherit; } .chip form { display: inline; margin: 0; } .chip button { all: unset; cursor: pointer; padding: 0 .2rem; border-radius: 4px; line-height: 1; color: var(--pico-muted-color); } .chip button:hover, .chip button:focus-visible { color: var(--pf-err); outline: 2px solid currentColor; } .chip-add { background: transparent; border-style: dashed; } .chip-add button { all: unset; cursor: pointer; color: var(--pf-accent-text); font-weight: 600; } .chip-add button:hover { text-decoration: underline; } /* --- meters (plan usage) ------------------------------------------------------------- */ .meters { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin-bottom: var(--sp-5); } .meters > article { margin: 0; padding: var(--sp-4); } .meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); } .meter-head span { color: var(--pico-muted-color); font-size: .85rem; } .meter-head strong { font-size: 1.25rem; } .meter-bar { height: .45rem; border-radius: 999px; margin-top: var(--sp-2); background: color-mix(in srgb, var(--pico-color) 10%, transparent); overflow: hidden; } .meter-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--pf-accent); } .meter-bar.full > span { background: var(--pf-err); } .meter small { display: block; margin-top: var(--sp-1); color: var(--pico-muted-color); } /* --- attention list + quick actions + activity --------------------------------------- */ .attention { list-style: none; padding: 0; margin: 0; } .attention li { list-style: none; display: flex; gap: var(--sp-3); align-items: baseline; padding: var(--sp-2) 0; border-bottom: 1px solid var(--pico-muted-border-color); margin: 0; } .attention li:last-child { border-bottom: 0; } .attention .dot { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--pf-warn); transform: translateY(-.1rem); } .attention .dot.err { background: var(--pf-err); } .quick-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } .quick-grid [role="button"] { margin: 0; text-align: left; } .activity-feed { list-style: none; padding: 0; margin: 0; } .activity-feed li { list-style: none; display: flex; gap: var(--sp-3); justify-content: space-between; align-items: baseline; padding: var(--sp-2) 0; border-bottom: 1px solid var(--pico-muted-border-color); margin: 0; } .activity-feed li:last-child { border-bottom: 0; } .activity-feed time { flex: none; color: var(--pico-muted-color); font-size: .8rem; white-space: nowrap; } /* --- tabs (site sections, account, customer page) ----------------------------------- */ .site-tabs, .tabs { margin-bottom: var(--sp-5); } .site-tabs ul, .tabs ul { display: flex; flex-wrap: nowrap; gap: .25rem; padding: 0; margin: 0; list-style: none; border-bottom: 1px solid var(--pico-muted-border-color); overflow-x: auto; scrollbar-width: thin; } .site-tabs li, .tabs li { padding: 0; margin: 0; list-style: none; flex: none; } .site-tabs a, .tabs a { display: inline-block; padding: .5rem .85rem; text-decoration: none; color: var(--pico-muted-color); border-bottom: 2px solid transparent; white-space: nowrap; } .site-tabs a:hover, .tabs a:hover { color: var(--pf-text); } .site-tabs a[aria-current="page"], .tabs a[aria-current="page"] { border-bottom-color: var(--pf-accent); color: var(--pf-text); font-weight: 650; } /* --- site cards (customer website list) ------------------------------------------------ */ .site-cards { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); margin-bottom: var(--sp-5); } .site-card { margin: 0; display: flex; flex-direction: column; } .site-card > header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; } .site-card h2 { font-size: 1.05rem; margin: 0; word-break: break-word; } .site-card h2 a { text-decoration: none; } .site-card .also { font-size: .85rem; } .site-card > footer { margin-top: auto; } .card-actions { display: flex; flex-wrap: wrap; gap: .4rem; } .nudge { border-left: 3px solid var(--pf-warn); padding: .4rem .7rem; font-size: .9rem; background: color-mix(in srgb, var(--pf-warn) 10%, transparent); border-radius: 4px; } .welcome-card { max-width: 44rem; } .welcome-card h2 { margin-bottom: .25rem; } ol.steps li { margin-bottom: .4rem; } /* --- site page ------------------------------------------------------------------------ */ .site-head { margin-bottom: var(--sp-3); } .site-head .page-head { margin-bottom: var(--sp-3); } .domain-table td { vertical-align: middle; } .dns-records td, .dns-records th { white-space: nowrap; } td.mono, .site-head .mono { word-break: break-all; } .dns-check table td { word-break: break-word; } .dns-check .status-pill { white-space: normal; } article pre { white-space: pre-wrap; word-break: break-all; } .check-title { font-size: 1rem; margin-top: 1.5rem; } details.card { border-radius: var(--radius); border: 1px solid var(--pico-muted-border-color); padding: 0; margin-bottom: var(--sp-5); background: var(--pico-card-background-color); } details.card > summary { padding: var(--sp-3) var(--pico-block-spacing-horizontal); font-weight: 650; margin: 0; } details.card[open] > summary { border-bottom: 1px solid var(--pico-muted-border-color); } details.card > .card-body { padding: var(--sp-4) var(--pico-block-spacing-horizontal); } .guide-option { font-size: 1.02rem; margin-top: 1.2rem; } .paused-note { border-left: 4px solid var(--pf-warn); padding: .5rem .75rem; border-radius: 4px; background: color-mix(in srgb, var(--pf-warn) 8%, transparent); } /* --- settings: grouped sections, label column + card column -------------------------- */ nav.settings-nav { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-4); font-size: .85rem; } nav.settings-nav a { margin: 0; padding: .2rem .7rem; border: 1px solid var(--pico-muted-border-color); border-radius: 999px; color: var(--pf-text); text-decoration: none; } nav.settings-nav a:hover { border-color: var(--pf-accent); } .settings-section { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--sp-4) var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--pico-muted-border-color); margin-bottom: var(--sp-2); } .settings-section:first-of-type { border-top: 0; padding-top: 0; } .settings-section > header h2 { font-size: 1.1rem; margin-bottom: var(--sp-1); } .settings-section > header p { color: var(--pico-muted-color); font-size: .9rem; } .settings-section article { margin-bottom: var(--sp-4); } .settings-section article h3 { font-size: 1rem; margin-bottom: var(--sp-2); } .danger-zone article, article.danger-zone { border: 1px solid color-mix(in srgb, var(--pf-err) 40%, transparent); } .danger-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; align-items: center; } .danger-row + .danger-row { border-top: 1px solid var(--pico-muted-border-color); padding-top: var(--sp-4); margin-top: var(--sp-4); } .danger-row p { margin: 0; flex: 1 1 18rem; } .danger-row form { margin: 0; } @media (max-width: 900px) { .settings-section { grid-template-columns: 1fr; gap: var(--sp-2); } } /* --- row lists with an expandable panel (DB users) ------------------------------------- */ .row-list { list-style: none; padding: 0; margin: 0; } .row-list > li { list-style: none; margin: 0; border-bottom: 1px solid var(--pico-muted-border-color); } .row-list > li:last-child { border-bottom: 0; } .row-list details { margin: 0; } .row-list summary { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; padding: var(--sp-3) 0; } .row-list summary::after { margin-left: auto; } .row-list .row-panel { padding: 0 0 var(--sp-4); display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .row-list .row-panel form { margin: 0; } .row-list .row-panel h4 { font-size: .9rem; margin-bottom: var(--sp-2); } .row-name { font-weight: 650; } /* --- admin websites table --------------------------------------------------------------- */ .site-table td { vertical-align: top; } .row-more > summary { font-size: .85rem; color: var(--pico-muted-color); } .row-more[open] { min-width: 18rem; } .row-more .kv { font-size: .85rem; margin-top: var(--sp-2); } .row-more .form-actions { justify-content: flex-start; } /* --- file manager ----------------------------------------------------------- */ .file-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1rem; } .create-form { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; flex: 1 1 24rem; } .create-form input[type="text"] { flex: 1 1 12rem; margin: 0; } .create-form button { width: auto; margin: 0; } .up-link { white-space: nowrap; } .file-name a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; } .file-name a:hover span { text-decoration: underline; } .icon { flex: none; vertical-align: middle; } .icon-folder { color: var(--pf-accent); } .icon-file { color: var(--pico-muted-color); } .dropzone { border: 2px dashed transparent; border-radius: var(--pico-border-radius); padding: .25rem; transition: border-color .15s, background .15s; } .dropzone.is-dragging { border-color: var(--pf-accent); background: color-mix(in srgb, var(--pf-accent) 7%, transparent); } .upload-form { border: 1px dashed var(--pico-muted-border-color); border-radius: var(--pico-border-radius); padding: 1rem; margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } .upload-form .drop-hint { display: flex; align-items: center; gap: .6rem; flex-basis: 100%; } .upload-form input[type="file"] { flex: 1 1 16rem; margin: 0; } .upload-form button { width: auto; margin: 0; } .upload-form small { flex-basis: 100%; } .drop-status { margin: 0; flex-basis: 100%; font-size: .9rem; } .drop-status:empty { display: none; } /* --- login / error ---------------------------------------------------------- */ .login-card { max-width: 24rem; margin: 3rem auto; } .error-card { max-width: 36rem; margin: 2rem auto; } .error-card .error-code { margin: 0; font-size: .85rem; } .error-card footer.actions { display: flex; gap: .5rem; flex-wrap: wrap; } .login-card button[type="submit"] { width: 100%; } /* --- small screens ------------------------------------------------------------ */ @media (max-width: 576px) { td.actions { white-space: normal; } td.actions > * { margin: .15rem 0 .15rem .35rem; } .file-table th:nth-child(3), .file-table td:nth-child(3) { display: none; } .card-actions [role="button"] { flex: 1 1 auto; text-align: center; } .page-head h1 { font-size: 1.35rem; } .kv { grid-template-columns: 1fr; gap: 0; } .kv dd { margin-bottom: var(--sp-2); } } /* M6.6: usage bars, banners, misc */ .settings-grid fieldset { margin-bottom: .5rem; } .bar { display: inline-block; height: .6rem; background: var(--pf-accent); border-radius: 2px; vertical-align: middle; } .log-view { max-height: 28rem; overflow: auto; font-size: .78rem; white-space: pre; } .announcement { padding: .6rem 1rem; border-radius: var(--radius); margin-bottom: var(--sp-4); border: 1px solid var(--pf-accent); background: color-mix(in srgb, var(--pf-accent) 10%, transparent); } .announcement-warning { border-color: var(--pf-err); background: color-mix(in srgb, var(--pf-err) 12%, transparent); } .impersonation-banner { background: #9a3412; color: #fff; padding: .4rem var(--sp-4); } .impersonation-banner .container { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; justify-content: space-between; } .impersonation-banner form { margin: 0; } .impersonation-banner button { margin: 0; padding: .2rem .8rem; width: auto; } .audit-detail { margin: 0; padding: 0; list-style: none; font-size: .85rem; } .audit-detail li { list-style: none; margin: 0; } .audit-detail .k { color: var(--pico-muted-color); } .audit-table details { margin: 0; } .audit-table details > summary { font-size: .85rem; color: var(--pico-muted-color); } .health-ok { color: var(--pf-ok); } .health-warn { color: var(--pf-warn); } .health-error { color: var(--pf-err); } .stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); } .stat-cards article { margin: 0; padding: var(--sp-4); } .stat-cards strong { display: block; font-size: 1.6rem; line-height: 1.3; } .stat-cards a { text-decoration: none; } .select-col { width: 2rem; } .bulk-bar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .5rem 0; } .bulk-bar select, .bulk-bar button { width: auto; margin-bottom: 0; } .preview-img { max-width: 100%; max-height: 70vh; display: block; margin: 1rem auto; background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 20px 20px; } .pf-editor { border: 1px solid var(--pico-form-element-border-color); border-radius: var(--pico-border-radius); margin-bottom: 1rem; min-height: 24rem; max-height: 75vh; overflow: auto; font-size: .85rem; } .pf-editor .cm-editor { min-height: 24rem; } article > table:last-child, article > .overflow-auto:last-child { margin-bottom: 0; } /* M8: DNS zones + record editor */ .status-pulseflare { color: var(--pf-ok); } .status-partial { color: var(--pf-warn); } .record-table .record-value { word-break: break-all; max-width: 32rem; } .record-table td.actions { white-space: nowrap; } .record-table td.actions form { display: inline-block; margin: 0; } .type-help { list-style: none; padding-left: 0; } .type-help li { list-style: none; } .sub-title { margin: var(--sp-4) 0 var(--sp-2); } /* M10: Pico styles every