/* ============================================================================ dnsadmin — Design System Single-file CSS for a precise, dense ops tool. Default: subtle warm dark. Toggle light via . ============================================================================ */ /* --------------------------------------------------------------------------- 1. DESIGN TOKENS — DEFAULT (DARK, slightly warm) --------------------------------------------------------------------------- */ :root { --color-bg-0: #16181c; --color-bg-1: #1c1f24; --color-bg-2: #23272e; --color-bg-3: #2a2f37; --color-bg-inset: #121418; --color-border-subtle: #262a31; --color-border: #30353d; --color-border-strong: #3d434c; --color-text: #e6e6e3; --color-text-secondary:#b6b8b3; --color-text-muted: #878a85; --color-text-inverse: #16181c; --color-primary: #4d9fd6; --color-primary-hover: #5fb0e6; --color-primary-active:#3f8bbf; --color-primary-soft: color-mix(in srgb, var(--color-primary) 16%, transparent); --color-success: #6cb47a; --color-success-soft: color-mix(in srgb, var(--color-success) 16%, transparent); --color-warning: #d9a441; --color-warning-soft: color-mix(in srgb, var(--color-warning) 18%, transparent); --color-danger: #d96b5e; --color-danger-hover: #e57e72; --color-danger-soft: color-mix(in srgb, var(--color-danger) 16%, transparent); --color-info: #6aa8d6; --color-info-soft: color-mix(in srgb, var(--color-info) 16%, transparent); --color-focus-ring: color-mix(in srgb, var(--color-primary) 55%, transparent); --focus-ring: 0 0 0 2px var(--color-bg-1), 0 0 0 4px var(--color-focus-ring); --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; --fs-xs: 11px; --lh-xs: 16px; --fs-sm: 12px; --lh-sm: 18px; --fs-body: 13.5px; --lh-body: 20px; --fs-h3: 15px; --lh-h3: 22px; --fs-h2: 18px; --lh-h2: 26px; --fs-h1: 22px; --lh-h1: 30px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --tracking-tight: -0.005em; --tracking-caps: 0.06em; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --z-base: 1; --z-sticky: 100; --z-dropdown: 200; --z-modal: 300; --z-toast: 400; --container-max: 1200px; --header-height: 48px; --transition-fast: 100ms ease; --transition: 150ms ease; } :root[data-theme="light"] { --color-bg-0: #f6f6f4; --color-bg-1: #ffffff; --color-bg-2: #fbfbf9; --color-bg-3: #f1f1ee; --color-bg-inset: #f3f3f0; --color-border-subtle: #ececea; --color-border: #dcdcd8; --color-border-strong: #c3c3be; --color-text: #1a1d22; --color-text-secondary:#4a4e55; --color-text-muted: #757982; --color-text-inverse: #ffffff; --color-primary: #2a78b8; --color-primary-hover: #2266a0; --color-primary-active:#1d588c; --color-success: #2e8a4a; --color-warning: #b8810f; --color-danger: #c43c2e; --color-info: #2a78b8; --shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.06); --shadow-md: 0 6px 20px rgba(20, 22, 26, 0.10), 0 2px 6px rgba(20, 22, 26, 0.05); } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--color-bg-0); color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text); background: var(--color-bg-0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); } h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); } h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); } h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); } p { margin: 0; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--color-primary-hover); text-decoration: underline; } ::selection { background: var(--color-primary-soft); } :focus { outline: none; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 12.5px; } /* -------------------- App shell -------------------- */ .app-header { position: sticky; top: 0; z-index: var(--z-sticky); height: var(--header-height); display: flex; align-items: center; gap: var(--space-6); padding: 0 var(--space-6); background: color-mix(in srgb, var(--color-bg-1) 92%, transparent); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--color-border); } .app-header__brand { font-family: var(--font-mono); font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--color-text); } .app-header__brand:hover { text-decoration: none; color: var(--color-text); } .app-header__brand b { color: var(--color-primary); font-weight: var(--fw-semibold); } .app-header__nav { display: flex; gap: var(--space-1); flex: 1; } .app-header__nav a { padding: 6px 10px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text-secondary); border-radius: var(--radius-sm); transition: color var(--transition), background var(--transition); } .app-header__nav a:hover { color: var(--color-text); background: var(--color-bg-3); text-decoration: none; } .app-header__nav a.is-active { color: var(--color-text); background: var(--color-primary-soft); } .app-header__right { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-secondary); } .app-header__user { color: var(--color-text); font-weight: var(--fw-medium); font-family: var(--font-mono); } .app-container { max-width: var(--container-max); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-12); } .page-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; } .page-header__title { font-size: var(--fs-h1); } .page-header__subtitle { color: var(--color-text-muted); font-size: var(--fs-sm); margin-top: var(--space-1); font-family: var(--font-mono); } .section { margin-bottom: var(--space-8); } .section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border-subtle); flex-wrap: wrap; } .section__title { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-muted); } .page-centered { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6); } .page-centered .card { width: 100%; max-width: 360px; box-shadow: var(--shadow-md); } /* -------------------- Card -------------------- */ .card { background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); } .card--tight { padding: var(--space-4); } /* -------------------- Form controls -------------------- */ .label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text-secondary); margin-bottom: var(--space-1); } .help-text { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--space-1); } .input, .select, .textarea { display: block; width: 100%; font-family: inherit; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text); background: var(--color-bg-1); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 6px 10px; transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); } .input::placeholder, .textarea::placeholder { color: var(--color-text-muted); } .input:hover, .select:hover, .textarea:hover { border-color: var(--color-border-strong); } .input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); background: var(--color-bg-2); } .input:disabled, .select:disabled, .textarea:disabled { color: var(--color-text-muted); background: var(--color-bg-inset); cursor: not-allowed; } .input--mono { font-family: var(--font-mono); font-size: 12.5px; } .input--sm { padding: 3px 8px; font-size: var(--fs-sm); line-height: 18px; } .textarea { min-height: 80px; resize: vertical; font-family: var(--font-mono); } .select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 28px; } .field { display: block; margin-bottom: var(--space-3); } .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); } /* -------------------- Buttons -------------------- */ .btn { --btn-bg: transparent; --btn-fg: var(--color-text); --btn-bd: var(--color-border); --btn-bg-hover: var(--color-bg-3); --btn-bd-hover: var(--color-border-strong); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1; white-space: nowrap; cursor: pointer; user-select: none; padding: 7px 12px; border-radius: var(--radius-sm); background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd); transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } .btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bd-hover); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn--sm { padding: 4px 8px; font-size: var(--fs-xs); } .btn--primary { --btn-bg: var(--color-primary); --btn-fg: var(--color-text-inverse); --btn-bd: var(--color-primary); --btn-bg-hover: var(--color-primary-hover); --btn-bd-hover: var(--color-primary-hover); } .btn--secondary { --btn-bg: var(--color-bg-2); --btn-fg: var(--color-text); --btn-bd: var(--color-border); --btn-bg-hover: var(--color-bg-3); } .btn--danger { --btn-bg: transparent; --btn-fg: var(--color-danger); --btn-bd: var(--color-border); --btn-bg-hover: var(--color-danger-soft); --btn-bd-hover: var(--color-danger); } .btn--danger-solid { --btn-bg: var(--color-danger); --btn-fg: var(--color-text-inverse); --btn-bd: var(--color-danger); --btn-bg-hover: var(--color-danger-hover); --btn-bd-hover: var(--color-danger-hover); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--color-text-secondary); --btn-bd: transparent; --btn-bg-hover: var(--color-bg-3); --btn-bd-hover: transparent; } .btn--ghost:hover { color: var(--color-text); } /* -------------------- Badge -------------------- */ .badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1; padding: 3px 6px; border-radius: var(--radius-sm); background: var(--color-bg-3); color: var(--color-text-secondary); border: 1px solid var(--color-border-subtle); white-space: nowrap; } .badge--success { background: var(--color-success-soft); color: var(--color-success); border-color: transparent; } .badge--warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: transparent; } .badge--danger { background: var(--color-danger-soft); color: var(--color-danger); border-color: transparent; } .badge--info { background: var(--color-info-soft); color: var(--color-info); border-color: transparent; } /* -------------------- Alert -------------------- */ .alert { --alert-fg: var(--color-text); --alert-bd: var(--color-border); --alert-bg: var(--color-bg-2); --alert-accent: var(--color-text-muted); display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border: 1px solid var(--alert-bd); border-left: 3px solid var(--alert-accent); background: var(--alert-bg); color: var(--alert-fg); border-radius: var(--radius-sm); font-size: var(--fs-sm); line-height: var(--lh-sm); } .alert--success { --alert-bg: var(--color-success-soft); --alert-accent: var(--color-success); --alert-bd: transparent; } .alert--warning { --alert-bg: var(--color-warning-soft); --alert-accent: var(--color-warning); --alert-bd: transparent; } .alert--danger { --alert-bg: var(--color-danger-soft); --alert-accent: var(--color-danger); --alert-bd: transparent; } .alert--info { --alert-bg: var(--color-info-soft); --alert-accent: var(--color-info); --alert-bd: transparent; } /* -------------------- Table -------------------- */ .table-wrap { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-2); } .table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); line-height: var(--lh-body); } .table thead th { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-text-muted); text-align: left; background: var(--color-bg-1); border-bottom: 1px solid var(--color-border); padding: 8px 12px; white-space: nowrap; } .table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--color-border-subtle); vertical-align: top; } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--color-bg-1) 50%, transparent); } .table tbody tr:hover td { background: var(--color-bg-3); } .table .col-mono, .table td.mono { font-family: var(--font-mono); font-size: 12.5px; word-break: break-all; } .table .col-num { text-align: right; font-variant-numeric: tabular-nums; } .table .col-actions { text-align: right; white-space: nowrap; width: 1%; } /* inline edit row */ .row-edit { display: none; } .row-edit.is-open { display: table-row; } .row-edit > td { background: var(--color-bg-3) !important; border-bottom: 1px solid var(--color-border); } .row-edit__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); padding: var(--space-3) 0 var(--space-1); } .row-edit__actions { display: flex; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--color-border); margin-top: var(--space-2); } .table-empty { padding: var(--space-8); text-align: center; color: var(--color-text-muted); font-size: var(--fs-sm); } /* -------------------- Code block -------------------- */ .code-block { position: relative; background: var(--color-bg-inset); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-4); overflow: hidden; } .code-block__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 6px 12px; background: var(--color-bg-2); border-bottom: 1px solid var(--color-border); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-muted); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .code-block__filename { color: var(--color-text-secondary); text-transform: none; letter-spacing: 0; } .code-block pre { margin: 0; padding: var(--space-4); font-family: var(--font-mono); font-size: 12.5px; line-height: 19px; color: var(--color-text); overflow-x: auto; tab-size: 2; white-space: pre; } .code-block__copy { display: inline-flex; align-items: center; gap: 4px; font-family: inherit; font-size: var(--fs-xs); color: var(--color-text-muted); background: transparent; border: 1px solid transparent; padding: 2px 6px; border-radius: var(--radius-sm); cursor: pointer; transition: color var(--transition), background var(--transition), border-color var(--transition); } .code-block__copy:hover { color: var(--color-text); background: var(--color-bg-3); border-color: var(--color-border); } .code-block__copy.is-copied { color: var(--color-success); } /* -------------------- Meta list -------------------- */ .meta-list { font-family: var(--font-mono); font-size: 12.5px; line-height: 20px; display: grid; grid-template-columns: max-content 1fr; column-gap: var(--space-4); row-gap: 2px; } .meta-list dt { color: var(--color-text-muted); white-space: nowrap; } .meta-list dd { margin: 0; color: var(--color-text); word-break: break-all; } /* -------------------- Audit log -------------------- */ .audit-log { font-family: var(--font-mono); font-size: 12.5px; line-height: 20px; background: var(--color-bg-inset); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); overflow: auto; max-height: 70vh; white-space: pre-wrap; word-break: break-word; color: var(--color-text-secondary); } .audit-log .ts { color: var(--color-text-muted); } .audit-log .key { color: var(--color-text-muted); } .audit-log .val { color: var(--color-text); } .audit-log .val--user { color: var(--color-info); } .audit-log .val--ok { color: var(--color-success); } .audit-log .val--err { color: var(--color-danger); } .audit-log .val--action { color: var(--color-primary); } /* -------------------- Utilities -------------------- */ .u-mono { font-family: var(--font-mono); } .u-muted { color: var(--color-text-muted); } .u-secondary { color: var(--color-text-secondary); } .u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .u-stack-2 { display: flex; flex-direction: column; gap: var(--space-2); } .u-stack-3 { display: flex; flex-direction: column; gap: var(--space-3); } .u-stack-4 { display: flex; flex-direction: column; gap: var(--space-4); } .u-row { display: flex; align-items: center; gap: var(--space-2); } .u-row-end { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); } .u-spacer { flex: 1 1 auto; } * { scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-track { background: transparent; }