163 lines
3.5 KiB
CSS
163 lines
3.5 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap");
|
|
|
|
:root {
|
|
--bg: #0a0e14;
|
|
--bg-accent: #101826;
|
|
--bg-grad-1: #1a2740;
|
|
--bg-grad-2: #241626;
|
|
--bg-overlay: rgba(255, 255, 255, 0.03);
|
|
--bg-glow: rgba(54, 207, 201, 0.08);
|
|
--panel: rgba(18, 24, 36, 0.92);
|
|
--panel-strong: rgba(24, 32, 46, 0.95);
|
|
--chrome: rgba(10, 14, 20, 0.75);
|
|
--chrome-strong: rgba(10, 14, 20, 0.82);
|
|
--text: rgba(246, 248, 252, 0.95);
|
|
--chat-text: rgba(246, 248, 252, 0.88);
|
|
--muted: rgba(210, 218, 230, 0.62);
|
|
--border: rgba(255, 255, 255, 0.08);
|
|
--accent: #ff7a3d;
|
|
--accent-2: #36cfc9;
|
|
--ok: #1bd98a;
|
|
--warn: #f2c94c;
|
|
--danger: #ff5c5c;
|
|
--theme-switch-x: 50%;
|
|
--theme-switch-y: 50%;
|
|
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
|
"Liberation Mono", "Courier New", monospace;
|
|
--font-body: "Space Grotesk", system-ui, sans-serif;
|
|
--font-display: "Fraunces", "Times New Roman", serif;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
:root[data-theme="light"] {
|
|
--bg: #f5f7fb;
|
|
--bg-accent: #ffffff;
|
|
--bg-grad-1: #e3edf9;
|
|
--bg-grad-2: #f7e6f0;
|
|
--bg-overlay: rgba(28, 32, 46, 0.04);
|
|
--bg-glow: rgba(54, 207, 201, 0.12);
|
|
--panel: rgba(255, 255, 255, 0.9);
|
|
--panel-strong: rgba(255, 255, 255, 0.98);
|
|
--chrome: rgba(255, 255, 255, 0.72);
|
|
--chrome-strong: rgba(255, 255, 255, 0.82);
|
|
--text: rgba(20, 24, 36, 0.96);
|
|
--chat-text: rgba(20, 24, 36, 0.82);
|
|
--muted: rgba(50, 58, 76, 0.6);
|
|
--border: rgba(16, 24, 40, 0.12);
|
|
--accent: #ff7a3d;
|
|
--accent-2: #1bb9b1;
|
|
--ok: #15b97a;
|
|
--warn: #c58a1a;
|
|
--danger: #e84343;
|
|
color-scheme: light;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font: 15px/1.4 var(--font-body);
|
|
background: radial-gradient(
|
|
1200px 900px at 20% 0%,
|
|
var(--bg-grad-1) 0%,
|
|
var(--bg) 55%
|
|
)
|
|
fixed,
|
|
radial-gradient(900px 700px at 90% 10%, var(--bg-grad-2) 0%, transparent 55%)
|
|
fixed,
|
|
var(--bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--bg-overlay) 0%,
|
|
rgba(255, 255, 255, 0) 35%
|
|
),
|
|
radial-gradient(
|
|
600px 400px at 80% 80%,
|
|
var(--bg-glow),
|
|
transparent 60%
|
|
);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
@keyframes theme-circle-transition {
|
|
0% {
|
|
clip-path: circle(
|
|
0% at var(--theme-switch-x, 50%) var(--theme-switch-y, 50%)
|
|
);
|
|
}
|
|
|
|
100% {
|
|
clip-path: circle(
|
|
150% at var(--theme-switch-x, 50%) var(--theme-switch-y, 50%)
|
|
);
|
|
}
|
|
}
|
|
|
|
html.theme-transition {
|
|
view-transition-name: theme;
|
|
}
|
|
|
|
html.theme-transition::view-transition-old(theme) {
|
|
mix-blend-mode: normal;
|
|
animation: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
html.theme-transition::view-transition-new(theme) {
|
|
mix-blend-mode: normal;
|
|
z-index: 2;
|
|
animation: theme-circle-transition 0.45s ease-out forwards;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html.theme-transition::view-transition-old(theme),
|
|
html.theme-transition::view-transition-new(theme) {
|
|
animation: none !important;
|
|
}
|
|
}
|
|
|
|
clawdis-app {
|
|
display: block;
|
|
position: relative;
|
|
z-index: 1;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea,
|
|
select {
|
|
font: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
@keyframes rise {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(6px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|