809 lines
14 KiB
CSS
809 lines
14 KiB
CSS
/*
|
|
Base UI tokens + reusable component classes
|
|
Extracted from the current desktop workbench design language.
|
|
Suitable for plain HTML + CSS projects.
|
|
*/
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
|
|
/* colors */
|
|
--bg: #f7f8f7;
|
|
--page: #ffffff;
|
|
--surface: #ffffff;
|
|
--surface-2: #f2f5f3;
|
|
--text: #151716;
|
|
--muted: #66716c;
|
|
--subtle: #909a95;
|
|
--line: #dde4df;
|
|
--line-strong: #cad5cf;
|
|
--primary: #07c160;
|
|
--primary-2: #10d978;
|
|
--primary-soft: #e6f7ee;
|
|
--primary-soft-2: #f1fbf6;
|
|
--accent: #2d8cff;
|
|
--warning: #fa8c16;
|
|
--error: #f5222d;
|
|
|
|
/* radii */
|
|
--radius-window: 12px;
|
|
--radius-panel: 18px;
|
|
--radius-soft: 14px;
|
|
--radius-input: 11px;
|
|
--radius-pill: 999px;
|
|
|
|
/* shadows */
|
|
--shadow-panel: 0 24px 70px rgba(20, 36, 27, 0.1);
|
|
--shadow-glass: 0 10px 28px rgba(20, 36, 27, 0.06);
|
|
--shadow-primary: 0 10px 28px rgba(7, 193, 96, 0.22);
|
|
--shadow-danger: 0 10px 28px rgba(245, 34, 45, 0.22);
|
|
--shadow-fab: 0 18px 36px rgba(7, 193, 96, 0.28);
|
|
|
|
/* spacing */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-7: 32px;
|
|
|
|
/* typography */
|
|
--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
|
"Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
--bg: #090d0b;
|
|
--page: #0d1110;
|
|
--surface: #121817;
|
|
--surface-2: #18211e;
|
|
--text: #f4f7f5;
|
|
--muted: #aab5af;
|
|
--subtle: #7f8c85;
|
|
--line: #24302b;
|
|
--line-strong: #34423c;
|
|
--primary: #07c160;
|
|
--primary-2: #0ed46e;
|
|
--primary-soft: #0d2a1b;
|
|
--primary-soft-2: #10251a;
|
|
--accent: #2d8cff;
|
|
--warning: #fa8c16;
|
|
--error: #ff4d4f;
|
|
--shadow-panel: 0 28px 80px rgba(0, 0, 0, 0.36);
|
|
--shadow-glass: 0 10px 28px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.scrollbar-hidden {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.scrollbar-hidden::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* shell */
|
|
.app-window {
|
|
min-height: 100vh;
|
|
background:
|
|
radial-gradient(circle at 16% 4%, rgba(7, 193, 96, 0.18), transparent 30%),
|
|
radial-gradient(circle at 86% 2%, rgba(45, 140, 255, 0.16), transparent 26%),
|
|
radial-gradient(circle at 50% 36%, rgba(7, 193, 96, 0.13), transparent 32%),
|
|
linear-gradient(180deg, color-mix(in srgb, var(--page) 58%, transparent), color-mix(in srgb, var(--page) 76%, transparent) 72%);
|
|
}
|
|
|
|
.app-window.rounded {
|
|
overflow: hidden;
|
|
border-radius: var(--radius-window);
|
|
}
|
|
|
|
.page-body {
|
|
position: relative;
|
|
padding: 20px;
|
|
}
|
|
|
|
.page-center {
|
|
min-height: 100vh;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 32px;
|
|
}
|
|
|
|
.glass-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 10px 20px;
|
|
border-bottom: 1px solid var(--line);
|
|
background:
|
|
linear-gradient(10deg, color-mix(in srgb, var(--surface) 44%, transparent), color-mix(in srgb, var(--surface) 22%, transparent));
|
|
backdrop-filter: blur(10px) saturate(1.35);
|
|
-webkit-backdrop-filter: blur(28px) saturate(1.35);
|
|
box-shadow: var(--shadow-glass);
|
|
}
|
|
|
|
.glass-bar .title {
|
|
min-width: 0;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.toolbar-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
/* panels */
|
|
.panel {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-panel);
|
|
background: var(--surface);
|
|
box-shadow: var(--shadow-panel);
|
|
}
|
|
|
|
.panel-lite {
|
|
border-radius: var(--radius-panel);
|
|
background: transparent;
|
|
}
|
|
|
|
.card-pad {
|
|
padding: 16px;
|
|
}
|
|
|
|
.list-card {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
background: var(--surface);
|
|
box-shadow: var(--shadow-panel);
|
|
}
|
|
|
|
.list-main {
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.list-main h3 {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.list-main p {
|
|
margin: 8px 0 0;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.list-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* buttons */
|
|
.btn-primary,
|
|
.btn-secondary,
|
|
.btn-danger,
|
|
.btn-ghost,
|
|
.icon-action,
|
|
.icon-btn,
|
|
.fab {
|
|
border: 0;
|
|
outline: none;
|
|
transition: 0.2s ease;
|
|
}
|
|
|
|
.btn-primary,
|
|
.btn-danger,
|
|
.btn-secondary {
|
|
height: 40px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 0 20px;
|
|
border-radius: var(--radius-pill);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--primary);
|
|
color: #fff;
|
|
font-weight: 800;
|
|
box-shadow: var(--shadow-primary);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #05964d;
|
|
}
|
|
|
|
.btn-secondary {
|
|
border: 1px solid var(--line);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--surface-2);
|
|
}
|
|
|
|
.btn-danger {
|
|
background: var(--error);
|
|
color: #fff;
|
|
font-weight: 800;
|
|
box-shadow: var(--shadow-danger);
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background: #cf1322;
|
|
}
|
|
|
|
.btn-ghost {
|
|
height: 36px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 12px;
|
|
border-radius: 10px;
|
|
background: transparent;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.btn-ghost:hover {
|
|
background: var(--surface-2);
|
|
color: var(--text);
|
|
}
|
|
|
|
.icon-btn,
|
|
.icon-action {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.icon-btn {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 10px;
|
|
background: transparent;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.icon-btn:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
.icon-action {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: var(--radius-pill);
|
|
border: 1px solid var(--line);
|
|
background: var(--surface);
|
|
color: var(--muted);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.icon-action:hover {
|
|
background: var(--surface-2);
|
|
color: var(--primary);
|
|
}
|
|
|
|
.fab {
|
|
position: fixed;
|
|
right: 24px;
|
|
bottom: 96px;
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--primary);
|
|
color: #fff;
|
|
font-size: 30px;
|
|
line-height: 1;
|
|
box-shadow: var(--shadow-fab);
|
|
}
|
|
|
|
.fab:hover {
|
|
background: #05964d;
|
|
}
|
|
|
|
/* status + tags */
|
|
.status-pill,
|
|
.tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border-radius: var(--radius-pill);
|
|
}
|
|
|
|
.status-pill {
|
|
min-height: 24px;
|
|
padding: 0 10px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.status-pill.success {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.status-pill.warning {
|
|
color: var(--warning);
|
|
}
|
|
|
|
.status-pill.muted {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.tag {
|
|
padding: 4px 12px;
|
|
border: 1px solid var(--line);
|
|
background: var(--surface-2);
|
|
color: var(--muted);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.tag.tone-green {
|
|
border-color: #bfe8d1;
|
|
background: #edf9f2;
|
|
color: #2f8a57;
|
|
}
|
|
|
|
.tag.tone-orange {
|
|
border-color: #f3d6a6;
|
|
background: #fff7e8;
|
|
color: #9a651b;
|
|
}
|
|
|
|
.tag.tone-purple {
|
|
border-color: #dfd1f2;
|
|
background: #f7f0ff;
|
|
color: #7650a8;
|
|
}
|
|
|
|
html[data-theme="dark"] .tag.tone-green {
|
|
border-color: #244735;
|
|
background: #102119;
|
|
color: #8bd6a8;
|
|
}
|
|
|
|
html[data-theme="dark"] .tag.tone-orange {
|
|
border-color: #4b3720;
|
|
background: #241a0e;
|
|
color: #e5ba70;
|
|
}
|
|
|
|
html[data-theme="dark"] .tag.tone-purple {
|
|
border-color: #3e3153;
|
|
background: #1f182b;
|
|
color: #c4a2ef;
|
|
}
|
|
|
|
.version.warning {
|
|
color: var(--warning);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* form controls */
|
|
.field {
|
|
display: block;
|
|
}
|
|
|
|
.field > span {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.input-like,
|
|
.editor,
|
|
.select-like {
|
|
width: 100%;
|
|
border: 1px solid var(--line-strong);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
outline: none;
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.input-like,
|
|
.select-like {
|
|
height: 42px;
|
|
padding: 0 12px;
|
|
border-radius: var(--radius-input);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.editor {
|
|
min-height: 160px;
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
resize: none;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.input-like:focus,
|
|
.select-like:focus,
|
|
.editor:focus {
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.action-row {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.action-row.two-col > * {
|
|
flex: 1;
|
|
}
|
|
|
|
/* segmented */
|
|
.segmented-bar {
|
|
display: flex;
|
|
gap: 8px;
|
|
overflow-x: auto;
|
|
padding: 8px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.seg-item {
|
|
flex-shrink: 0;
|
|
padding: 6px 32px;
|
|
border: 0;
|
|
border-radius: var(--radius-pill);
|
|
background: transparent;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.seg-item:hover {
|
|
background: var(--surface-2);
|
|
}
|
|
|
|
.seg-item.is-active {
|
|
background: var(--primary);
|
|
color: #fff;
|
|
box-shadow: 0 10px 24px rgba(7, 193, 96, 0.22);
|
|
}
|
|
|
|
/* switch */
|
|
.toggle-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 16px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-soft);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.mini-switch {
|
|
position: relative;
|
|
width: 48px;
|
|
height: 28px;
|
|
flex-shrink: 0;
|
|
padding: 3px;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--line-strong);
|
|
}
|
|
|
|
.mini-switch span {
|
|
display: block;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: var(--radius-pill);
|
|
background: #fff;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.mini-switch.is-on {
|
|
background: var(--primary);
|
|
}
|
|
|
|
.mini-switch.is-on span {
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
/* terminal */
|
|
.terminal {
|
|
overflow: hidden;
|
|
padding: 16px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
background:
|
|
radial-gradient(circle at 12% 0%, rgba(7, 193, 96, 0.08), transparent 30%),
|
|
linear-gradient(145deg, #0b100d, #101814 52%, #090f0c);
|
|
box-shadow: var(--shadow-panel);
|
|
color: #d7ffe4;
|
|
}
|
|
|
|
.terminal h3 {
|
|
margin: 0 0 12px;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.terminal pre,
|
|
.terminal code,
|
|
.terminal .terminal-body {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
font-size: 12px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.terminal .line-info { color: #8ff0b3; }
|
|
.terminal .line-debug { color: #82c7ff; }
|
|
.terminal .line-think { color: #c9a7ff; }
|
|
.terminal .line-warning { color: #ffd166; }
|
|
.terminal .line-error { color: #ff6b7a; }
|
|
|
|
/* special visual modules */
|
|
.engine-sphere {
|
|
position: relative;
|
|
width: 190px;
|
|
height: 190px;
|
|
border-radius: var(--radius-pill);
|
|
background:
|
|
radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.95), transparent 12%),
|
|
radial-gradient(circle at 42% 36%, rgba(255, 255, 255, 0.38), transparent 20%),
|
|
radial-gradient(circle at 62% 72%, rgba(0, 0, 0, 0.22), transparent 34%),
|
|
linear-gradient(145deg, #10d978, #07c160 48%, #047a40);
|
|
box-shadow:
|
|
inset -22px -28px 54px rgba(0, 0, 0, 0.24),
|
|
inset 18px 18px 40px rgba(255, 255, 255, 0.18),
|
|
0 34px 80px rgba(7, 193, 96, 0.28);
|
|
animation: floatSphere 4.8s ease-in-out infinite;
|
|
}
|
|
|
|
.engine-sphere::before,
|
|
.engine-sphere::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 18px;
|
|
border-radius: var(--radius-pill);
|
|
border: 1px solid rgba(255, 255, 255, 0.24);
|
|
transform: rotate(-24deg);
|
|
}
|
|
|
|
.engine-sphere::after {
|
|
inset: 42px 18px;
|
|
opacity: 0.68;
|
|
transform: rotate(22deg);
|
|
}
|
|
|
|
@keyframes floatSphere {
|
|
0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
|
|
50% { transform: translate3d(0, -12px, 0) rotate(8deg); }
|
|
}
|
|
|
|
/* page templates */
|
|
.home-page,
|
|
.list-page,
|
|
.settings-content,
|
|
.side-feed,
|
|
.tool-sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.hero-center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20px;
|
|
padding: 8px 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-center h1 {
|
|
margin: 0;
|
|
font-size: 22px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.hero-center p {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.hero-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
width: 100%;
|
|
}
|
|
|
|
.settings-layout {
|
|
display: grid;
|
|
grid-template-columns: 180px minmax(0, 1fr);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.settings-sidebar {
|
|
padding: 12px;
|
|
border-right: 1px solid var(--line);
|
|
background: var(--surface-2);
|
|
}
|
|
|
|
.settings-nav-item {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 0;
|
|
border-radius: 12px;
|
|
text-align: left;
|
|
background: transparent;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.settings-nav-item:hover {
|
|
background: var(--surface);
|
|
}
|
|
|
|
.settings-nav-item.is-active {
|
|
background: var(--primary-soft);
|
|
color: var(--primary);
|
|
}
|
|
|
|
.workbench-grid {
|
|
display: grid;
|
|
gap: 16px;
|
|
grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
|
|
}
|
|
|
|
.stage-panel,
|
|
.side-feed {
|
|
min-height: 0;
|
|
}
|
|
|
|
.stage-box {
|
|
position: relative;
|
|
min-height: 420px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
background: #000;
|
|
}
|
|
|
|
.tool-layout {
|
|
display: grid;
|
|
grid-template-columns: 320px minmax(0, 1fr);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.tool-sidebar {
|
|
padding: 16px;
|
|
border-right: 1px solid var(--line);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.tool-stage {
|
|
min-width: 0;
|
|
padding: 24px;
|
|
background: var(--surface-2);
|
|
}
|
|
|
|
.canvas-shell {
|
|
min-height: calc(100vh - 48px);
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
border-radius: 20px;
|
|
background: #000;
|
|
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.55);
|
|
}
|
|
|
|
.bottom-tabs {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
padding: 8px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.bottom-tab-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 8px;
|
|
border-radius: 6px;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.bottom-tab-item:hover {
|
|
background: var(--surface-2);
|
|
}
|
|
|
|
.bottom-tab-item.is-active {
|
|
color: var(--primary);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.workbench-grid,
|
|
.tool-layout,
|
|
.settings-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.page-center {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.engine-sphere {
|
|
width: 154px;
|
|
height: 154px;
|
|
}
|
|
|
|
.fab {
|
|
right: 22px;
|
|
}
|
|
}
|