42 lines
3.4 KiB
CSS
42 lines
3.4 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
|
/* Keep these tokens aligned with CLIProxyAPI Manager's dark theme. */
|
|
--bg-primary: #1d1b18; --bg-secondary: #151412; --bg-tertiary: #262320; --bg-hover: #2e2a26; --bg-quinary: #191714; --floating-surface: #2a2723;
|
|
--border-color: #3a3530; --border-primary: #4a453f; --border-hover: #5a544d;
|
|
--text-primary: #f6f4f1; --text-secondary: #c9c3bb; --text-tertiary: #9c958d; --text-quaternary: #6f6962;
|
|
--primary-color: #8b8680; --primary-hover: #9a948e; --primary-active: #a6a099;
|
|
--success-color: #10b981; --error-color: #c65746; --warning-color: #ffd862; --amber-color: #f59e0b;
|
|
--bg: var(--bg-primary); --panel: var(--bg-secondary); --panel-raised: var(--floating-surface); --panel-soft: var(--bg-quinary);
|
|
--border: var(--border-color); --border-soft: var(--border-color); --text: var(--text-primary); --muted: var(--text-tertiary);
|
|
--accent: var(--primary-active); --accent-strong: var(--primary-color); --accent-soft: var(--bg-tertiary);
|
|
--success: var(--success-color); --danger: var(--error-color); --warning: var(--warning-color);
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); }
|
|
button, input, select { font: inherit; }
|
|
button { cursor: pointer; }
|
|
body.read-only .admin-only { display: none !important; }
|
|
input, select { min-width: 0; border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; outline: none; background: var(--bg-tertiary); color: inherit; transition: border-color .15s, box-shadow .15s; }
|
|
input:focus, select:focus { border-color: var(--primary-active); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent); }
|
|
input:disabled, select:disabled { cursor: not-allowed; opacity: .55; }
|
|
input[type="checkbox"] { width: 15px; height: 15px; padding: 0; accent-color: var(--accent-strong); }
|
|
h1, h2, h3, p { margin-top: 0; }
|
|
h1 { margin-bottom: 4px; font-size: 19px; letter-spacing: -.01em; }
|
|
h2 { margin-bottom: 10px; font-size: 15px; }
|
|
.section-heading p, .subtle { margin-bottom: 0; color: var(--muted); font-size: 12px; }
|
|
.tools { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
|
|
button, summary { border: 1px solid var(--border); border-radius: 7px; padding: 8px 11px; background: var(--bg-tertiary); color: var(--text); font-size: 12px; }
|
|
button:hover, summary:hover { border-color: var(--border-hover); background: var(--bg-hover); }
|
|
button.primary { border-color: var(--primary-color); background: var(--primary-color); color: white; }
|
|
button.primary:hover { border-color: var(--primary-hover); background: var(--primary-hover); }
|
|
button.danger { color: #f1b0a6; }
|
|
button.small { padding: 5px 8px; }
|
|
button.icon-button { width: 32px; height: 32px; padding: 0; font-size: 17px; }
|
|
.surface { border: 1px solid var(--border-soft); border-radius: 9px; background: var(--panel); }
|
|
.surface-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; min-height: 45px; padding: 8px 10px 8px 13px; border-bottom: 1px solid var(--border-soft); }
|
|
.surface-toolbar .status { min-height: 0; }
|
|
.inline-check { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
|
|
.hidden { display: none !important; }
|
|
.empty { padding: 28px; color: var(--muted); text-align: center; }
|