369 lines
9.8 KiB
CSS
369 lines
9.8 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
--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;
|
|
--shadow: 0 24px 70px rgba(20, 36, 27, 0.1);
|
|
}
|
|
|
|
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: 0 28px 80px rgba(0, 0, 0, 0.36);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background:
|
|
radial-gradient(circle at 12% 10%, rgba(7, 193, 96, 0.11), transparent 30%),
|
|
radial-gradient(circle at 86% 4%, rgba(45, 140, 255, 0.1), transparent 24%),
|
|
var(--bg);
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
@layer components {
|
|
.app-window {
|
|
position: relative;
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.54),
|
|
inset 0 -1px 0 rgba(128, 128, 128, 0.08),
|
|
var(--shadow);
|
|
background:
|
|
radial-gradient(circle at 16% 4%, rgba(7, 193, 96, 0.12), transparent 28%),
|
|
radial-gradient(circle at 86% 2%, rgba(45, 140, 255, 0.11), transparent 24%),
|
|
radial-gradient(circle at 50% 36%, rgba(7, 193, 96, 0.08), transparent 30%),
|
|
linear-gradient(180deg, color-mix(in srgb, var(--page) 68%, transparent), color-mix(in srgb, var(--page) 82%, transparent) 72%);
|
|
}
|
|
|
|
html[data-theme="dark"] .app-window {
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
|
inset 0 -1px 0 rgba(255, 255, 255, 0.04),
|
|
var(--shadow);
|
|
}
|
|
|
|
.glass-bar {
|
|
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:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.36),
|
|
0 10px 28px rgba(20, 36, 27, 0.06);
|
|
}
|
|
|
|
.panel {
|
|
@apply rounded-[18px] border border-line bg-surface shadow-panel;
|
|
}
|
|
|
|
.engine-panel {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background:
|
|
radial-gradient(circle at 50% 30%, rgba(7, 193, 96, 0.16), transparent 26%),
|
|
radial-gradient(circle at 35% 12%, rgba(45, 140, 255, 0.08), transparent 28%),
|
|
linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, transparent), var(--surface));
|
|
}
|
|
|
|
.engine-panel > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.engine-panel::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 18px;
|
|
border-radius: 999px;
|
|
background:
|
|
radial-gradient(circle at 50% 34%, rgba(7, 193, 96, 0.18), transparent 22%),
|
|
radial-gradient(circle at 50% 46%, rgba(7, 193, 96, 0.1), transparent 34%);
|
|
filter: blur(18px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply inline-flex h-10 items-center justify-center rounded-full border-0 bg-primary px-5 text-[14px] font-extrabold text-white shadow-[0_10px_28px_rgba(7,193,96,.22)] transition hover:bg-[#05964d];
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply inline-flex h-10 items-center justify-center rounded-full border-0 bg-error px-5 text-[14px] font-extrabold text-white shadow-[0_10px_28px_rgba(245,34,45,.22)] transition hover:bg-[#cf1322];
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply inline-flex h-10 items-center justify-center rounded-full border border-line bg-surface px-4 text-[14px] font-bold text-text transition hover:bg-surface2;
|
|
}
|
|
|
|
.btn-test {
|
|
@apply inline-flex h-10 items-center justify-center rounded-full border border-[#b8dec9] bg-[#f2faf5] px-4 text-[14px] font-bold text-[#3d7a58] transition hover:bg-[#e8f5ee];
|
|
}
|
|
|
|
html[data-theme="dark"] .btn-test {
|
|
@apply border-[#294236] bg-[#101b16] text-[#8fbea3] hover:bg-[#14251d];
|
|
}
|
|
|
|
.btn-ghost {
|
|
@apply inline-flex h-9 items-center justify-center rounded-[10px] border-0 bg-transparent px-3 text-[13px] font-bold text-muted transition hover:bg-surface2 hover:text-text;
|
|
}
|
|
|
|
.icon-btn {
|
|
@apply grid h-9 w-9 place-items-center rounded-[10px] border-0 bg-transparent text-[12px] font-black text-muted transition hover:bg-transparent hover:text-text active:bg-transparent focus:bg-transparent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.icon-action {
|
|
@apply grid h-10 w-10 place-items-center rounded-full border border-line bg-surface text-[13px] font-black text-muted shadow-[0_10px_30px_rgba(0,0,0,.04)] transition hover:bg-surface2 hover:text-primary;
|
|
}
|
|
|
|
.icon-box,
|
|
.icon-box-sm {
|
|
@apply grid shrink-0 place-items-center rounded-[12px] border border-line bg-surface2 text-[12px] font-black text-muted;
|
|
}
|
|
|
|
.icon-box {
|
|
@apply h-10 w-10;
|
|
}
|
|
|
|
.icon-box-sm {
|
|
@apply h-7 w-7 rounded-[9px] text-[11px];
|
|
}
|
|
|
|
.icon-box-strong {
|
|
@apply border-0 bg-primary text-white shadow-[0_10px_28px_rgba(7,193,96,.24)];
|
|
}
|
|
|
|
.icon-active {
|
|
@apply border-primary bg-[var(--primary-soft)] text-primary;
|
|
}
|
|
|
|
.badge {
|
|
@apply absolute right-4 top-1 rounded-full bg-error px-1.5 py-0.5 text-[10px] font-black leading-none text-white;
|
|
}
|
|
|
|
.status {
|
|
@apply inline-flex h-6 items-center rounded-full px-2.5 text-[11px] font-black;
|
|
}
|
|
|
|
.status-success {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.status-warning {
|
|
color: var(--warning);
|
|
}
|
|
|
|
html[data-theme="dark"] .status-warning {
|
|
color: #ffad4a;
|
|
}
|
|
|
|
.status-muted {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.terminal {
|
|
background:
|
|
radial-gradient(circle at 12% 0%, rgba(7, 193, 96, 0.08), transparent 30%),
|
|
linear-gradient(145deg, #0b100d, #101814 52%, #090f0c);
|
|
@apply overflow-hidden rounded-[10px] border border-line p-4 shadow-panel;
|
|
}
|
|
|
|
.terminal-line-info {
|
|
color: #8ff0b3;
|
|
}
|
|
|
|
.terminal-line-warning {
|
|
color: #ffd166;
|
|
}
|
|
|
|
.terminal-line-error {
|
|
color: #ff6b7a;
|
|
}
|
|
|
|
.list-card {
|
|
@apply flex items-start justify-between gap-3 rounded-[8px] border border-line bg-surface p-3 shadow-panel;
|
|
}
|
|
|
|
.tag {
|
|
@apply rounded-full border border-line bg-surface2 px-3 py-1 text-[10px] font-bold text-muted;
|
|
}
|
|
|
|
.tag-tone-green {
|
|
@apply border-[#bfe8d1] bg-[#edf9f2] text-[#2f8a57];
|
|
}
|
|
|
|
.tag-tone-orange {
|
|
@apply border-[#f3d6a6] bg-[#fff7e8] text-[#9a651b];
|
|
}
|
|
|
|
.tag-tone-purple {
|
|
@apply border-[#dfd1f2] bg-[#f7f0ff] text-[#7650a8];
|
|
}
|
|
|
|
.skill-type{
|
|
color: var(--warning);
|
|
}
|
|
|
|
.skill-state-enabled {
|
|
@apply text-primary;
|
|
}
|
|
|
|
.skill-state-disabled {
|
|
@apply text-muted;
|
|
}
|
|
|
|
html[data-theme="dark"] .tag-tone-green {
|
|
@apply border-[#244735] bg-[#102119] text-[#8bd6a8];
|
|
}
|
|
|
|
html[data-theme="dark"] .tag-tone-orange {
|
|
@apply border-[#4b3720] bg-[#241a0e] text-[#e5ba70];
|
|
}
|
|
|
|
html[data-theme="dark"] .tag-tone-purple {
|
|
@apply border-[#3e3153] bg-[#1f182b] text-[#c4a2ef];
|
|
}
|
|
|
|
html[data-theme="dark"] .skill-type[data-skill-type="内置"] {
|
|
color: #d2a75d;
|
|
}
|
|
|
|
html[data-theme="dark"] .skill-type[data-skill-type="自定义"] {
|
|
color: #c4a2ef;
|
|
}
|
|
|
|
.fab {
|
|
@apply fixed bottom-24 right-[max(24px,calc((100vw-750px)/2+24px))] grid h-14 w-14 place-items-center rounded-full bg-primary text-[30px] font-light leading-none text-white shadow-[0_18px_36px_rgba(7,193,96,.28)] transition hover:bg-[#05964d];
|
|
}
|
|
|
|
.input-like {
|
|
@apply flex h-[42px] w-full items-center rounded-[11px] border border-lineStrong bg-surface px-3 text-[13px] font-semibold text-text outline-none transition placeholder:text-subtle focus:border-primary disabled:cursor-not-allowed disabled:bg-surface2 disabled:text-muted;
|
|
}
|
|
|
|
.editor {
|
|
@apply min-h-[160px] w-full resize-none overflow-y-auto rounded-[8px] border border-lineStrong bg-surface p-2 font-mono text-[13px] leading-6 text-text outline-none transition focus:border-primary disabled:text-muted;
|
|
}
|
|
|
|
.mini-switch {
|
|
@apply relative h-7 w-12 shrink-0 rounded-full bg-lineStrong p-[3px] transition;
|
|
}
|
|
|
|
.mini-switch span {
|
|
@apply block h-[22px] w-[22px] rounded-full bg-white transition-transform;
|
|
}
|
|
|
|
.mini-switch.is-on {
|
|
@apply bg-primary;
|
|
}
|
|
|
|
.mini-switch.is-on span {
|
|
@apply translate-x-5;
|
|
}
|
|
}
|
|
|
|
.engine-sphere {
|
|
position: relative;
|
|
width: 190px;
|
|
height: 190px;
|
|
border-radius: 999px;
|
|
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: 999px;
|
|
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);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.engine-sphere {
|
|
width: 154px;
|
|
height: 154px;
|
|
}
|
|
|
|
.fab {
|
|
right: 22px;
|
|
}
|
|
}
|