690991c526
Major refactoring cleanup: - Add new controller architecture (class-controller-*.php) - Add new settings-v2 UI (views/settings-v2/) - Add new CSS architecture (agentic-sidebar.css, tokens) - Add esbuild build pipeline (scripts/build.js, package.json) - Add composer dependencies (vendor/) - Add frontend src directory (assets/js/src/index.jsx) - Add documentation files - Remove old/obsolete files (class-settings.php, old CSS) This commits all pending changes from previous refactoring efforts.
1333 lines
31 KiB
CSS
1333 lines
31 KiB
CSS
:root {
|
|
--bg: #0b1020;
|
|
--surface: #131b2f;
|
|
--surface-warm: #182343;
|
|
--fg: #f8fafc;
|
|
--fg-2: #cbd5e1;
|
|
--muted: #8ea0b8;
|
|
--meta: #60a5fa;
|
|
--border: #293653;
|
|
--border-soft: #1e2a43;
|
|
--accent: #60a5fa;
|
|
--accent-on: #06111f;
|
|
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
|
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
|
--success: #22c55e;
|
|
--warn: #fbbf24;
|
|
--danger: #fb7185;
|
|
--font-display: Inter, system-ui, sans-serif;
|
|
--font-body: Inter, system-ui, sans-serif;
|
|
--font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
|
|
--text-xs: 12px;
|
|
--text-sm: 13px;
|
|
--text-base: 15px;
|
|
--text-lg: 17px;
|
|
--text-xl: 22px;
|
|
--text-2xl: 32px;
|
|
--text-3xl: 48px;
|
|
--text-4xl: 66px;
|
|
--leading-body: 1.55;
|
|
--leading-tight: 1.06;
|
|
--tracking-display: -0.02em;
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--space-12: 48px;
|
|
--section-y-desktop: 96px;
|
|
--section-y-tablet: 68px;
|
|
--section-y-phone: 48px;
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 20px;
|
|
--radius-pill: 9999px;
|
|
--elev-flat: none;
|
|
--elev-ring: 0 0 0 1px var(--border);
|
|
--elev-raised: 0 24px 72px rgba(0, 0, 0, 0.36);
|
|
--focus-ring: 0 0 0 4px rgba(96, 165, 250, 0.28);
|
|
--motion-fast: 130ms;
|
|
--motion-base: 220ms;
|
|
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
--container-max: 1200px;
|
|
--container-gutter-desktop: 36px;
|
|
--container-gutter-tablet: 24px;
|
|
--container-gutter-phone: 16px;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
background:
|
|
radial-gradient(
|
|
circle at top right,
|
|
color-mix(in oklab, var(--accent) 14%, transparent),
|
|
transparent 34rem
|
|
),
|
|
var(--bg);
|
|
color: var(--fg);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-base);
|
|
line-height: var(--leading-body);
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
button,
|
|
input,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
font-family: var(--font-display);
|
|
text-wrap: balance;
|
|
margin: 0;
|
|
color: var(--fg);
|
|
}
|
|
p {
|
|
margin: 0;
|
|
text-wrap: pretty;
|
|
}
|
|
.num {
|
|
font-family: var(--font-mono);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.eyebrow {
|
|
margin: 0;
|
|
color: var(--accent);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.wp-shell {
|
|
min-height: 100vh;
|
|
display: grid;
|
|
grid-template-columns: 232px 1fr;
|
|
}
|
|
.wp-rail {
|
|
position: sticky;
|
|
top: 0;
|
|
height: 100vh;
|
|
padding: var(--space-5) var(--space-4);
|
|
background: color-mix(in oklab, var(--surface) 90%, black);
|
|
border-right: 1px solid var(--border);
|
|
overflow: auto;
|
|
}
|
|
.wp-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-8);
|
|
font-weight: 800;
|
|
letter-spacing: var(--tracking-display);
|
|
}
|
|
.wp-logo-mark {
|
|
width: 34px;
|
|
height: 34px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: var(--radius-md);
|
|
background: var(--accent);
|
|
color: var(--accent-on);
|
|
font-family: var(--font-mono);
|
|
font-weight: 800;
|
|
}
|
|
.rail-group {
|
|
margin: var(--space-6) 0 var(--space-2);
|
|
color: var(--muted);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
letter-spacing: 0.07em;
|
|
text-transform: uppercase;
|
|
}
|
|
.rail-link {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: 10px 12px;
|
|
border-radius: var(--radius-md);
|
|
color: var(--fg-2);
|
|
font-size: var(--text-sm);
|
|
transition:
|
|
background var(--motion-fast) var(--ease-standard),
|
|
color var(--motion-fast) var(--ease-standard);
|
|
}
|
|
.rail-link:hover,
|
|
.rail-link.active {
|
|
background: var(--surface-warm);
|
|
color: var(--fg);
|
|
}
|
|
.rail-pill {
|
|
min-width: 22px;
|
|
padding: 2px 7px;
|
|
border-radius: var(--radius-pill);
|
|
background: color-mix(in oklab, var(--accent) 15%, transparent);
|
|
color: var(--accent);
|
|
text-align: center;
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
}
|
|
|
|
.main {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.admin-top {
|
|
position: sticky;
|
|
top: 32px;
|
|
z-index: 20;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-4);
|
|
padding: var(--space-4) var(--container-gutter-desktop);
|
|
background: color-mix(in oklab, var(--bg) 88%, transparent);
|
|
backdrop-filter: blur(18px);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.crumb {
|
|
color: var(--muted);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.top-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
flex-wrap: wrap;
|
|
}
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-2);
|
|
min-height: 40px;
|
|
padding: 9px var(--space-5);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: transparent;
|
|
color: var(--fg);
|
|
font-weight: 700;
|
|
transition:
|
|
transform var(--motion-fast) var(--ease-standard),
|
|
border-color var(--motion-fast) var(--ease-standard),
|
|
background var(--motion-fast) var(--ease-standard);
|
|
}
|
|
.btn:hover {
|
|
border-color: var(--accent);
|
|
background: color-mix(in oklab, var(--accent) 8%, transparent);
|
|
}
|
|
.btn:active {
|
|
transform: translateY(1px);
|
|
}
|
|
.btn:focus-visible,
|
|
.field-control:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
.btn-primary {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
color: var(--accent-on);
|
|
}
|
|
.btn-primary:hover {
|
|
background: var(--accent-hover);
|
|
}
|
|
.btn-danger:hover {
|
|
border-color: var(--danger);
|
|
background: color-mix(in oklab, var(--danger) 10%, transparent);
|
|
}
|
|
.btn-small {
|
|
min-height: 34px;
|
|
padding: 7px 12px;
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.page {
|
|
width: 100%;
|
|
max-width: calc(var(--container-max) + 72px);
|
|
margin: 0 auto;
|
|
padding: var(--space-8) var(--container-gutter-desktop) 112px;
|
|
}
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
|
|
gap: var(--space-6);
|
|
align-items: stretch;
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
.hero-card,
|
|
.panel,
|
|
.tile {
|
|
background: color-mix(in oklab, var(--surface) 94%, transparent);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--elev-flat);
|
|
}
|
|
.hero-card {
|
|
padding: var(--space-8);
|
|
min-height: 290px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.hero-card::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: auto -72px -96px auto;
|
|
width: 280px;
|
|
height: 280px;
|
|
border-radius: var(--radius-pill);
|
|
background: color-mix(in oklab, var(--accent) 16%, transparent);
|
|
filter: blur(14px);
|
|
pointer-events: none;
|
|
}
|
|
.hero h1 {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 780px;
|
|
margin-top: var(--space-4);
|
|
font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
|
|
line-height: var(--leading-tight);
|
|
letter-spacing: var(--tracking-display);
|
|
}
|
|
.hero-copy {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 66ch;
|
|
color: var(--fg-2);
|
|
font-size: var(--text-lg);
|
|
}
|
|
.status-panel {
|
|
padding: var(--space-5) 0 var(--space-5) var(--space-5);
|
|
display: grid;
|
|
gap: var(--space-4);
|
|
}
|
|
.workflow {
|
|
display: grid;
|
|
gap: var(--space-3);
|
|
}
|
|
.workflow-step {
|
|
display: grid;
|
|
grid-template-columns: 32px 1fr auto;
|
|
gap: var(--space-3);
|
|
align-items: center;
|
|
padding: var(--space-3);
|
|
border: 1px solid var(--border-soft);
|
|
border-radius: var(--radius-md);
|
|
background: color-mix(in oklab, var(--surface-warm) 62%, transparent);
|
|
}
|
|
.step-dot {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: var(--radius-pill);
|
|
background: color-mix(in oklab, var(--accent) 13%, transparent);
|
|
color: var(--accent);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
}
|
|
.step-label {
|
|
font-weight: 700;
|
|
}
|
|
.step-state {
|
|
color: var(--muted);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
}
|
|
|
|
.tabs-wrap {
|
|
display: grid;
|
|
grid-template-columns: 250px minmax(0, 1fr);
|
|
gap: var(--space-6);
|
|
align-items: start;
|
|
}
|
|
.tab-sidebar {
|
|
position: sticky;
|
|
top: 122px;
|
|
display: grid;
|
|
gap: var(--space-5);
|
|
}
|
|
.tab-group {
|
|
padding: var(--space-4);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
background: color-mix(in oklab, var(--surface) 92%, transparent);
|
|
}
|
|
.tab-group-title {
|
|
margin-bottom: var(--space-3);
|
|
color: var(--muted);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
letter-spacing: 0.07em;
|
|
text-transform: uppercase;
|
|
}
|
|
.tab-btn {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
margin-top: var(--space-2);
|
|
padding: 10px 12px;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-md);
|
|
background: transparent;
|
|
color: var(--fg-2);
|
|
text-align: left;
|
|
font-weight: 700;
|
|
}
|
|
.tab-btn:hover,
|
|
.tab-btn[aria-selected="true"] {
|
|
border-color: var(--border);
|
|
background: var(--surface-warm);
|
|
color: var(--fg);
|
|
}
|
|
.tab-count {
|
|
color: var(--muted);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tab-panel {
|
|
display: none;
|
|
}
|
|
.tab-panel.active {
|
|
display: block;
|
|
}
|
|
.section-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: end;
|
|
gap: var(--space-4);
|
|
margin-bottom: var(--space-5);
|
|
}
|
|
.section-head h2 {
|
|
font-size: var(--text-2xl);
|
|
line-height: var(--leading-tight);
|
|
letter-spacing: var(--tracking-display);
|
|
}
|
|
.section-head p {
|
|
margin-top: var(--space-2);
|
|
max-width: 64ch;
|
|
color: var(--muted);
|
|
}
|
|
.panel {
|
|
margin-bottom: var(--space-5);
|
|
overflow: hidden;
|
|
}
|
|
.panel-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--space-4);
|
|
padding: var(--space-5) var(--space-6);
|
|
border-bottom: 1px solid var(--border);
|
|
background: color-mix(in oklab, var(--surface-warm) 55%, transparent);
|
|
}
|
|
.panel-title h3 {
|
|
font-size: var(--text-xl);
|
|
letter-spacing: var(--tracking-display);
|
|
}
|
|
.panel-title p {
|
|
margin-top: var(--space-1);
|
|
color: var(--muted);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.panel-body {
|
|
padding: var(--space-6);
|
|
}
|
|
.grid-2 {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--space-5);
|
|
}
|
|
.grid-3 {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: var(--space-4);
|
|
}
|
|
.grid-4 {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: var(--space-4);
|
|
}
|
|
.field {
|
|
display: grid;
|
|
gap: var(--space-2);
|
|
}
|
|
label,
|
|
.field-label {
|
|
color: var(--fg-2);
|
|
font-weight: 700;
|
|
font-size: var(--text-sm);
|
|
}
|
|
.help {
|
|
color: var(--muted);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.field-control {
|
|
width: 100%;
|
|
min-height: 42px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: color-mix(in oklab, var(--bg) 35%, var(--surface));
|
|
color: var(--fg);
|
|
}
|
|
.provider-routing-fields {
|
|
margin-top: 14px;
|
|
}
|
|
.field-label-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-2);
|
|
color: var(--fg);
|
|
font-weight: 700;
|
|
}
|
|
.field-label-row .help {
|
|
font-weight: 400;
|
|
}
|
|
.provider-routing-grid {
|
|
align-items: stretch;
|
|
}
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
.wpaw2-settings .select2-container {
|
|
width: 100% !important;
|
|
}
|
|
.wpaw2-settings .select2-container--default .select2-selection--single,
|
|
.wpaw2-settings .select2-container--default .select2-selection--multiple {
|
|
min-height: 42px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: color-mix(in oklab, var(--bg) 35%, var(--surface));
|
|
color: var(--fg);
|
|
}
|
|
.wpaw2-settings
|
|
.select2-container--default
|
|
.select2-selection--single
|
|
.select2-selection__rendered {
|
|
padding: 7px 36px 7px 12px;
|
|
color: var(--fg);
|
|
line-height: 26px;
|
|
}
|
|
.wpaw2-settings
|
|
.select2-container--default
|
|
.select2-selection--single
|
|
.select2-selection__arrow {
|
|
height: 40px;
|
|
right: 6px;
|
|
}
|
|
.wpaw2-settings .select2-container--default .select2-selection--multiple {
|
|
padding: 4px 8px;
|
|
}
|
|
.wpaw2-settings
|
|
.select2-container--default
|
|
.select2-selection--multiple
|
|
.select2-selection__choice {
|
|
margin: 3px 5px 3px 0;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-pill);
|
|
background: var(--surface-warm);
|
|
color: var(--fg);
|
|
}
|
|
.wpaw2-settings
|
|
.select2-container--default
|
|
.select2-selection--multiple
|
|
.select2-selection__choice__remove {
|
|
color: var(--muted);
|
|
}
|
|
.wpaw2-settings
|
|
.select2-container--default
|
|
.select2-search--inline
|
|
.select2-search__field {
|
|
color: var(--fg);
|
|
}
|
|
.wpaw2-settings
|
|
.select2-container--default.select2-container--focus
|
|
.select2-selection--single,
|
|
.wpaw2-settings .select2-container--default .select2-selection--single:focus {
|
|
border-color: var(--accent);
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
.wpaw2-select2-dropdown {
|
|
overflow: hidden;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: var(--radius-sm) !important;
|
|
background: var(--surface) !important;
|
|
color: var(--fg) !important;
|
|
}
|
|
.wpaw2-select2-dropdown .select2-search--dropdown {
|
|
padding: var(--space-2);
|
|
background: var(--surface);
|
|
}
|
|
.wpaw2-select2-dropdown .select2-search__field {
|
|
min-height: 38px;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: var(--radius-sm);
|
|
background: color-mix(in oklab, var(--bg) 45%, var(--surface)) !important;
|
|
color: var(--fg) !important;
|
|
}
|
|
.wpaw2-select2-dropdown .select2-results__option {
|
|
margin: 0;
|
|
padding: 9px 12px;
|
|
color: var(--fg-2);
|
|
}
|
|
.wpaw2-select2-dropdown .select2-results__option--highlighted[aria-selected],
|
|
.wpaw2-select2-dropdown
|
|
.select2-results__option--highlighted[aria-selected="false"] {
|
|
background: color-mix(
|
|
in oklab,
|
|
var(--accent) 20%,
|
|
var(--surface)
|
|
) !important;
|
|
color: var(--fg) !important;
|
|
}
|
|
.wpaw2-select2-dropdown .select2-results__option--highlighted[aria-selected] *,
|
|
.wpaw2-select2-dropdown
|
|
.select2-results__option--highlighted[aria-selected="false"]
|
|
* {
|
|
color: inherit !important;
|
|
}
|
|
.wpaw2-select2-dropdown .select2-results__option[aria-selected="true"] {
|
|
background: var(--surface-warm) !important;
|
|
color: var(--fg) !important;
|
|
}
|
|
.wpaw2-select2-dropdown .select2-results__option[aria-selected="true"] * {
|
|
color: inherit !important;
|
|
}
|
|
.select2-container--default .select2-results__option--selected {
|
|
background: var(--surface-warm) !important;
|
|
color: var(--fg) !important;
|
|
}
|
|
.select2-container--default
|
|
.select2-selection--single
|
|
.select2-selection__clear {
|
|
margin-right: 1.75rem;
|
|
margin-top: 0.65rem;
|
|
background-color: var(--fg);
|
|
width: 20px;
|
|
height: 20px;
|
|
padding: 0;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.select2-container--default
|
|
.select2-selection--single
|
|
.select2-selection__clear {
|
|
background-color: #ffffff !important;
|
|
width: 20px;
|
|
height: 20px !important;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 10px !important;
|
|
}
|
|
|
|
.wpaw2-settings
|
|
.select2-container--default
|
|
.select2-selection--single
|
|
.select2-selection__arrow {
|
|
display: none;
|
|
}
|
|
.wpaw2-model-option {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-3);
|
|
}
|
|
.wpaw2-model-name {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.wpaw2-model-badge,
|
|
.wpaw2-model-price {
|
|
flex: 0 0 auto;
|
|
color: var(--muted);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
}
|
|
.wpaw2-model-badge {
|
|
padding: 2px 7px;
|
|
border-radius: var(--radius-pill);
|
|
background: color-mix(in oklab, var(--accent) 12%, transparent);
|
|
color: var(--accent);
|
|
}
|
|
.wpaw2-model-badge.free {
|
|
background: color-mix(in oklab, var(--success) 14%, transparent);
|
|
color: var(--success);
|
|
}
|
|
|
|
select.field-control {
|
|
appearance: none;
|
|
background-image:
|
|
linear-gradient(45deg, transparent 50%, var(--muted) 50%),
|
|
linear-gradient(135deg, var(--muted) 50%, transparent 50%);
|
|
background-position:
|
|
calc(100% - 18px) 18px,
|
|
calc(100% - 12px) 18px;
|
|
background-size:
|
|
6px 6px,
|
|
6px 6px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.password-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: var(--space-2);
|
|
}
|
|
.switch-row,
|
|
.check-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-3);
|
|
padding: var(--space-3);
|
|
border: 1px solid var(--border-soft);
|
|
border-radius: var(--radius-md);
|
|
background: color-mix(in oklab, var(--surface-warm) 35%, transparent);
|
|
}
|
|
.switch {
|
|
width: 42px;
|
|
height: 24px;
|
|
flex: 0 0 auto;
|
|
border-radius: var(--radius-pill);
|
|
border: 1px solid var(--border);
|
|
background: var(--border-soft);
|
|
position: relative;
|
|
}
|
|
.switch::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 18px;
|
|
height: 18px;
|
|
left: 3px;
|
|
top: 2px;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--fg-2);
|
|
transition: transform var(--motion-base) var(--ease-standard);
|
|
}
|
|
.switch-row input,
|
|
.check-row input {
|
|
display: none;
|
|
}
|
|
input[type="checkbox"]:checked + .switch {
|
|
background: color-mix(in oklab, var(--accent) 38%, var(--border-soft));
|
|
border-color: var(--accent);
|
|
}
|
|
input[type="checkbox"]:checked + .switch::after {
|
|
transform: translateX(18px);
|
|
background: var(--accent);
|
|
}
|
|
.switch-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
margin-top: var(--space-5);
|
|
}
|
|
.switch-group .switch-row {
|
|
padding: var(--space-3) var(--space-4);
|
|
border-radius: var(--radius-md);
|
|
background: color-mix(in oklab, var(--surface-warm) 42%, transparent);
|
|
border: 1px solid var(--border-soft);
|
|
}
|
|
input[type="password"],
|
|
input[type="text"],
|
|
input[type="number"],
|
|
input[type="url"],
|
|
select.field-control,
|
|
select.field-control:is(:focus, :hover, :active) {
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--space-2);
|
|
border: 1px solid var(--border);
|
|
background: var(--border-soft);
|
|
color: var(--fg-2);
|
|
font-size: var(--text-sm);
|
|
height: 40px;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
.sr-check {
|
|
position: absolute;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
.checkbox-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--space-3);
|
|
}
|
|
.chip-list {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
.chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
min-height: 30px;
|
|
padding: 5px 10px;
|
|
border-radius: var(--radius-pill);
|
|
border: 1px solid var(--border);
|
|
background: color-mix(in oklab, var(--surface-warm) 45%, transparent);
|
|
color: var(--fg-2);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.chip.on {
|
|
border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
|
|
color: var(--accent);
|
|
background: color-mix(in oklab, var(--accent) 11%, transparent);
|
|
}
|
|
.status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: 5px 10px;
|
|
border-radius: var(--radius-pill);
|
|
border: 1px solid var(--border);
|
|
color: var(--muted);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
}
|
|
.status::before {
|
|
content: "";
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--muted);
|
|
}
|
|
.status.connected {
|
|
color: var(--success);
|
|
border-color: color-mix(in oklab, var(--success) 45%, var(--border));
|
|
}
|
|
.status.connected::before {
|
|
background: var(--success);
|
|
}
|
|
.status.warn {
|
|
color: var(--warn);
|
|
border-color: color-mix(in oklab, var(--warn) 45%, var(--border));
|
|
}
|
|
.status.warn::before {
|
|
background: var(--warn);
|
|
}
|
|
.status.error {
|
|
color: var(--danger);
|
|
border-color: color-mix(in oklab, var(--danger) 45%, var(--border));
|
|
}
|
|
.status.error::before {
|
|
background: var(--danger);
|
|
}
|
|
|
|
.metric-card,
|
|
.preset-card,
|
|
.guide-card {
|
|
padding: var(--space-5);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
background: color-mix(in oklab, var(--surface-warm) 42%, transparent);
|
|
}
|
|
.metric-value {
|
|
margin-top: var(--space-2);
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-2xl);
|
|
font-weight: 800;
|
|
letter-spacing: var(--tracking-display);
|
|
}
|
|
.metric-label {
|
|
color: var(--muted);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.progress {
|
|
height: 10px;
|
|
overflow: hidden;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--border-soft);
|
|
}
|
|
.progress > span {
|
|
display: block;
|
|
height: 100%;
|
|
width: 18%;
|
|
border-radius: inherit;
|
|
background: var(--accent);
|
|
}
|
|
.preset-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
position: relative;
|
|
transition:
|
|
border-color var(--motion-fast) var(--ease-standard),
|
|
box-shadow var(--motion-fast) var(--ease-standard),
|
|
transform var(--motion-fast) var(--ease-standard);
|
|
}
|
|
.preset-card:hover {
|
|
border-color: var(--accent);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
|
}
|
|
.preset-card.active {
|
|
border-color: var(--accent);
|
|
box-shadow:
|
|
0 0 0 1px var(--accent),
|
|
0 4px 16px color-mix(in oklab, var(--accent) 15%, transparent);
|
|
}
|
|
.preset-card.active::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: var(--accent);
|
|
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
|
}
|
|
|
|
/* Tier label row */
|
|
.preset-tier-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: var(--text-sm);
|
|
font-weight: 700;
|
|
color: var(--fg);
|
|
padding: var(--space-4) var(--space-5) 0;
|
|
}
|
|
.preset-badge {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
padding: 2px 8px;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--accent);
|
|
color: #fff;
|
|
}
|
|
|
|
/* Price */
|
|
.preset-price {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-3xl);
|
|
font-weight: 800;
|
|
letter-spacing: var(--tracking-display);
|
|
color: var(--fg);
|
|
line-height: 1;
|
|
padding: var(--space-2) var(--space-5) 0;
|
|
}
|
|
.preset-price-cents {
|
|
font-size: var(--text-lg);
|
|
font-weight: 700;
|
|
}
|
|
.preset-price-unit {
|
|
display: block;
|
|
padding: var(--space-1) var(--space-5) 0;
|
|
color: var(--muted);
|
|
font-size: var(--text-xs);
|
|
}
|
|
|
|
/* Divider between price and model list */
|
|
.preset-divider {
|
|
display: block;
|
|
height: 1px;
|
|
margin: var(--space-4) var(--space-5);
|
|
background: var(--border-soft);
|
|
}
|
|
|
|
/* Model list */
|
|
.preset-models {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
padding: 0 var(--space-5) var(--space-5);
|
|
}
|
|
.preset-model-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: var(--text-xs);
|
|
min-height: 22px;
|
|
}
|
|
.preset-model-dot {
|
|
flex-shrink: 0;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
}
|
|
.preset-model-name {
|
|
font-weight: 600;
|
|
color: var(--fg);
|
|
white-space: nowrap;
|
|
}
|
|
.preset-model-role {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
margin-left: auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ds-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: var(--text-sm);
|
|
}
|
|
.ds-table th,
|
|
.ds-table td {
|
|
padding: 13px 14px;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.ds-table th {
|
|
color: var(--muted);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
.ds-table tbody tr:hover {
|
|
background: color-mix(in oklab, var(--accent) 6%, transparent);
|
|
}
|
|
.ds-table-highlight {
|
|
background: color-mix(in oklab, var(--accent) 5%, transparent);
|
|
}
|
|
.guide-cost {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
color: var(--muted);
|
|
white-space: nowrap;
|
|
}
|
|
.guide-cost-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
}
|
|
.guide-cost-card h3 {
|
|
font-size: var(--text-sm);
|
|
}
|
|
.guide-cost-list {
|
|
margin: 0;
|
|
padding: 0 0 0 var(--space-4);
|
|
color: var(--muted);
|
|
font-size: var(--text-xs);
|
|
line-height: 1.7;
|
|
}
|
|
.guide-cost-total {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-top: var(--space-3);
|
|
border-top: 1px solid var(--border);
|
|
font-size: var(--text-sm);
|
|
margin-top: auto;
|
|
}
|
|
.guide-cost-total strong {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-lg);
|
|
font-weight: 800;
|
|
color: var(--accent);
|
|
margin-top: auto;
|
|
}
|
|
.guide-cost-warn {
|
|
color: var(--warn) !important;
|
|
}
|
|
.cost-parent-row td:first-child {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
.cost-post-title {
|
|
min-width: 0;
|
|
}
|
|
.cost-row-toggle,
|
|
.cost-row-toggle-placeholder {
|
|
flex: 0 0 28px;
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
.cost-row-toggle {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: color-mix(in oklab, var(--bg) 35%, var(--surface));
|
|
color: var(--fg);
|
|
font-family: var(--font-mono);
|
|
line-height: 1;
|
|
}
|
|
.cost-row-toggle:hover {
|
|
border-color: var(--accent);
|
|
background: color-mix(in oklab, var(--accent) 12%, transparent);
|
|
}
|
|
.cost-child-row[hidden] {
|
|
display: none;
|
|
}
|
|
.cost-child-row > td {
|
|
padding: 0 14px 16px 56px;
|
|
background: color-mix(in oklab, var(--bg) 18%, transparent);
|
|
}
|
|
.cost-action-table {
|
|
width: 100%;
|
|
margin-top: var(--space-2);
|
|
border-collapse: collapse;
|
|
border: 1px solid var(--border-soft);
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
font-size: var(--text-xs);
|
|
}
|
|
.cost-action-table th,
|
|
.cost-action-table td {
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid var(--border-soft);
|
|
}
|
|
.cost-action-table th {
|
|
color: var(--muted);
|
|
background: color-mix(in oklab, var(--surface-warm) 60%, transparent);
|
|
font-family: var(--font-mono);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.cost-action-table td:last-child,
|
|
.cost-action-table th:last-child {
|
|
text-align: right;
|
|
font-family: var(--font-mono);
|
|
}
|
|
.cost-action-table tr:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
/* Model pills in cost-log child rows */
|
|
.model-pill {
|
|
display: inline-block;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8em;
|
|
line-height: 1;
|
|
padding: 3px 8px;
|
|
margin: 2px 3px 2px 0;
|
|
border-radius: var(--radius-sm);
|
|
background: color-mix(in oklab, var(--border) 40%, transparent);
|
|
border: 1px solid var(--border-soft);
|
|
white-space: nowrap;
|
|
max-width: 260px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
vertical-align: middle;
|
|
}
|
|
.cost-child-empty {
|
|
padding: var(--space-4);
|
|
color: var(--muted);
|
|
border: 1px dashed var(--border);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.num-col {
|
|
text-align: right;
|
|
font-family: var(--font-mono);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.code {
|
|
font-family: var(--font-mono);
|
|
color: var(--fg-2);
|
|
font-size: var(--text-xs);
|
|
word-break: break-word;
|
|
}
|
|
.command {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: var(--space-3);
|
|
align-items: center;
|
|
padding: var(--space-3);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: color-mix(in oklab, var(--bg) 48%, var(--surface));
|
|
overflow: auto;
|
|
}
|
|
.custom-row {
|
|
display: grid;
|
|
grid-template-columns: 1.1fr 1fr 0.65fr auto;
|
|
gap: var(--space-3);
|
|
align-items: end;
|
|
margin-top: var(--space-3);
|
|
}
|
|
.toast {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 28px;
|
|
z-index: 40;
|
|
transform: translate(-50%, 24px);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
min-width: 280px;
|
|
padding: var(--space-4) var(--space-5);
|
|
border: none;
|
|
border-left: 4px solid var(--accent);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
|
|
color: var(--fg);
|
|
font-weight: 700;
|
|
font-size: var(--text-sm);
|
|
transition:
|
|
opacity var(--motion-base) var(--ease-standard),
|
|
transform var(--motion-base) var(--ease-standard);
|
|
}
|
|
.toast.show {
|
|
opacity: 1;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
|
|
/* Toast types */
|
|
.toast-success {
|
|
border-left-color: var(--success);
|
|
background: color-mix(in oklab, var(--success) 12%, var(--bg));
|
|
color: var(--success);
|
|
}
|
|
.toast-error {
|
|
border-left-color: var(--danger);
|
|
background: color-mix(in oklab, var(--danger) 12%, var(--bg));
|
|
color: var(--danger);
|
|
}
|
|
.toast-warning {
|
|
border-left-color: var(--warn);
|
|
background: color-mix(in oklab, var(--warn) 12%, var(--bg));
|
|
color: var(--warn);
|
|
}
|
|
.toast-info {
|
|
border-left-color: var(--accent);
|
|
background: color-mix(in oklab, var(--accent) 12%, var(--bg));
|
|
color: var(--accent);
|
|
}
|
|
|
|
@media (max-width: 1080px) {
|
|
.wp-shell {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.wp-rail {
|
|
position: static;
|
|
height: auto;
|
|
display: none;
|
|
}
|
|
.admin-top,
|
|
.page {
|
|
padding-inline: var(--container-gutter-tablet);
|
|
}
|
|
.hero,
|
|
.tabs-wrap {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.tab-sidebar {
|
|
position: static;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
.grid-4 {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
@media (max-width: 720px) {
|
|
.admin-top {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
.page {
|
|
padding: var(--space-5) var(--container-gutter-phone) 128px;
|
|
}
|
|
.hero-card,
|
|
.panel-body {
|
|
padding: var(--space-5);
|
|
}
|
|
.panel-head,
|
|
.section-head {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
.status-panel {
|
|
padding: var(--space-5) 0;
|
|
}
|
|
.grid-2,
|
|
.grid-3,
|
|
.grid-4,
|
|
.checkbox-grid,
|
|
.tab-sidebar,
|
|
.custom-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.password-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Inner Subtabs */
|
|
.subtab-nav {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
margin-bottom: var(--space-5);
|
|
border-bottom: 1px solid var(--border);
|
|
padding-bottom: var(--space-3);
|
|
}
|
|
|
|
.subtab-btn {
|
|
background: transparent;
|
|
color: var(--muted);
|
|
border: none;
|
|
padding: var(--space-2) var(--space-4);
|
|
font-size: var(--text-sm);
|
|
font-weight: 500;
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.subtab-btn:hover {
|
|
color: var(--text);
|
|
background: color-mix(in oklab, var(--text) 5%, transparent);
|
|
}
|
|
|
|
.subtab-btn[aria-selected="true"] {
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.subtab-panel {
|
|
display: none;
|
|
}
|
|
|
|
.subtab-panel.active {
|
|
display: block;
|
|
}
|