288 lines
9.0 KiB
CSS
288 lines
9.0 KiB
CSS
/* Palette copied from portfolio/app/globals.css so the manager looks like the site. */
|
|
:root {
|
|
--bg: #ffffff;
|
|
--bg-raised: #f8f8fa;
|
|
--surface: #f1f2f4;
|
|
--surface-hover: #e8e9ed;
|
|
--border: #d4d5db;
|
|
--border-strong: #b8bac2;
|
|
--fg: #131419;
|
|
--fg-secondary: #4e5264;
|
|
--muted: #7e8290;
|
|
--accent: #5468e0;
|
|
--accent-hover: #4758cc;
|
|
--accent-bg: rgba(84, 104, 224, 0.07);
|
|
--success: #1a8f54;
|
|
--success-bg: rgba(26, 143, 84, 0.07);
|
|
--warning: #b07818;
|
|
--warning-bg: rgba(176, 120, 24, 0.07);
|
|
--error: #c93c3c;
|
|
--error-bg: rgba(201, 60, 60, 0.07);
|
|
--radius-sm: 4px;
|
|
--radius-md: 6px;
|
|
--radius-lg: 10px;
|
|
color-scheme: light;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #101114;
|
|
--bg-raised: #141518;
|
|
--surface: #1a1b1f;
|
|
--surface-hover: #212229;
|
|
--border: #2c2d34;
|
|
--border-strong: #3d3f48;
|
|
--fg: #e4e5e9;
|
|
--fg-secondary: #a0a3ad;
|
|
--muted: #6f7280;
|
|
--accent: #8a9dff;
|
|
--accent-hover: #9dacff;
|
|
--accent-bg: rgba(138, 157, 255, 0.08);
|
|
--success: #5ec98f;
|
|
--success-bg: rgba(94, 201, 143, 0.08);
|
|
--warning: #e0a855;
|
|
--warning-bg: rgba(224, 168, 85, 0.08);
|
|
--error: #e06565;
|
|
--error-bg: rgba(224, 101, 101, 0.08);
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
html, body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
font-family: var(--sans), system-ui, sans-serif;
|
|
font-size: 14px;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
a { color: var(--accent); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
|
|
h1, h2, h3 { font-family: var(--mono), monospace; letter-spacing: -0.02em; margin: 0 0 16px; }
|
|
h1 { font-size: 22px; }
|
|
h2 { font-size: 16px; }
|
|
|
|
code, .mono { font-family: var(--mono), monospace; }
|
|
.muted { color: var(--muted); }
|
|
.small { font-size: 12px; }
|
|
|
|
/* ---- shell ---- */
|
|
.shell { max-width: 1400px; margin: 0 auto; padding: 0 24px 48px; }
|
|
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
padding: 18px 0;
|
|
margin-bottom: 24px;
|
|
border-bottom: 1px solid var(--border);
|
|
flex-wrap: wrap;
|
|
}
|
|
.brand { font-family: var(--mono); font-weight: 700; color: var(--accent); }
|
|
.topbar nav { display: flex; gap: 16px; font-family: var(--mono); font-size: 13px; }
|
|
.topbar nav a { color: var(--fg-secondary); }
|
|
.topbar nav a:hover { color: var(--accent); text-decoration: none; }
|
|
.topbar .spacer { flex: 1; }
|
|
|
|
.badge {
|
|
font-family: var(--mono);
|
|
font-size: 11px;
|
|
padding: 3px 10px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--accent-bg);
|
|
color: var(--accent);
|
|
white-space: nowrap;
|
|
}
|
|
.badge.warn { background: var(--warning-bg); color: var(--warning); }
|
|
.badge.ok { background: var(--success-bg); color: var(--success); }
|
|
.badge.err { background: var(--error-bg); color: var(--error); }
|
|
|
|
/* ---- controls ---- */
|
|
button, .button {
|
|
font-family: var(--mono);
|
|
font-size: 12px;
|
|
padding: 7px 14px;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--border);
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
white-space: nowrap;
|
|
}
|
|
button:hover:not(:disabled), .button:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
|
|
button:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
|
|
button.primary:hover:not(:disabled), .button.primary:hover { background: var(--accent-hover); color: #fff; }
|
|
button.danger:hover:not(:disabled) { border-color: var(--error); color: var(--error); }
|
|
button.ghost { border-color: transparent; background: transparent; padding: 5px 8px; }
|
|
|
|
input, textarea, select {
|
|
font: inherit;
|
|
color: var(--fg);
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 7px 10px;
|
|
width: 100%;
|
|
}
|
|
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
|
|
textarea { resize: vertical; }
|
|
|
|
label.field { display: flex; flex-direction: column; gap: 5px; }
|
|
label.field > span { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: lowercase; }
|
|
.field-hint { font-size: 11px; color: var(--muted); }
|
|
|
|
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
|
.toolbar-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
|
|
.toolbar-row input, .toolbar-row select { width: auto; min-width: 200px; }
|
|
|
|
.notice {
|
|
padding: 10px 14px;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--border);
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.notice.error { border-color: var(--error); background: var(--error-bg); color: var(--error); }
|
|
.notice.ok { border-color: var(--success); background: var(--success-bg); color: var(--success); }
|
|
.notice.warn { border-color: var(--warning); background: var(--warning-bg); color: var(--warning); }
|
|
|
|
/* ---- tables ---- */
|
|
table.list { width: 100%; border-collapse: collapse; }
|
|
table.list th, table.list td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
|
|
table.list th { font-family: var(--mono); font-size: 11px; color: var(--muted); font-weight: 500; }
|
|
table.list tr:hover td { background: var(--bg-raised); }
|
|
table.list td.actions { text-align: right; white-space: nowrap; }
|
|
table.list td.actions > * + * { margin-left: 6px; }
|
|
.title-cell { font-weight: 600; }
|
|
|
|
.chip {
|
|
display: inline-block;
|
|
font-family: var(--mono);
|
|
font-size: 11px;
|
|
color: var(--accent);
|
|
background: var(--accent-bg);
|
|
padding: 2px 8px;
|
|
border-radius: var(--radius-sm);
|
|
margin: 1px 4px 1px 0;
|
|
}
|
|
|
|
/* ---- editor ---- */
|
|
.editor-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
|
|
.editor-head h1 { margin: 0; flex: 1; min-width: 200px; }
|
|
|
|
.meta-grid {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 1fr;
|
|
gap: 14px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.meta-grid .span-all { grid-column: 1 / -1; }
|
|
.meta-grid .span-2 { grid-column: span 2; }
|
|
|
|
.split {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
min-height: 70vh;
|
|
}
|
|
.pane {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
background: var(--bg);
|
|
}
|
|
.pane-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 6px 8px;
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--bg-raised);
|
|
flex-wrap: wrap;
|
|
font-family: var(--mono);
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
.pane-head .spacer { flex: 1; }
|
|
.pane-head button { padding: 4px 8px; font-size: 12px; min-width: 28px; justify-content: center; }
|
|
.pane-body { flex: 1; min-height: 0; position: relative; }
|
|
.pane-body .cm-editor { height: 100%; font-size: 13.5px; }
|
|
.pane-body .cm-scroller { font-family: var(--mono), monospace; }
|
|
.preview-frame { width: 100%; height: 100%; border: 0; display: block; background: transparent; }
|
|
.tb-sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 4px; }
|
|
|
|
/* tag input */
|
|
.tag-input {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
align-items: center;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 4px 6px;
|
|
background: var(--bg);
|
|
}
|
|
.tag-input:focus-within { border-color: var(--accent); }
|
|
.tag-input input { border: 0; padding: 4px; flex: 1; min-width: 100px; width: auto; }
|
|
.tag-input .chip { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
|
|
.tag-input .chip button { border: 0; background: none; padding: 0 2px; color: inherit; font-size: 12px; }
|
|
|
|
/* images */
|
|
.images { margin-top: 24px; }
|
|
.image-drop {
|
|
border: 1px dashed var(--border-strong);
|
|
border-radius: var(--radius-lg);
|
|
padding: 18px;
|
|
text-align: center;
|
|
color: var(--muted);
|
|
margin-bottom: 16px;
|
|
cursor: pointer;
|
|
}
|
|
.image-drop.over { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
|
|
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
|
|
.image-card {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.image-card.in-gallery { border-color: var(--accent); }
|
|
.image-card .thumb { height: 130px; background: var(--surface); display: flex; align-items: center; justify-content: center; }
|
|
.image-card .thumb img, .image-card .thumb video { max-width: 100%; max-height: 100%; object-fit: contain; }
|
|
.image-card .body { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
|
|
.image-card .name { font-family: var(--mono); font-size: 11px; word-break: break-all; }
|
|
.image-card .row button { padding: 4px 8px; font-size: 11px; }
|
|
|
|
.log {
|
|
font-family: var(--mono);
|
|
font-size: 12px;
|
|
background: var(--bg-raised);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 12px;
|
|
white-space: pre-wrap;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
.split { grid-template-columns: 1fr; }
|
|
.split .pane { min-height: 50vh; }
|
|
.meta-grid { grid-template-columns: 1fr; }
|
|
.meta-grid .span-2 { grid-column: auto; }
|
|
}
|