353 lines
7.6 KiB
CSS
353 lines
7.6 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--font-sans: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
|
|
|
|
/* STYLE_GUIDE §3.2 字号补充 token */
|
|
--text-2xs: 0.625rem; /* 10px */
|
|
--text-3xs: 0.5625rem; /* 9px */
|
|
--text-4xs: 0.5rem; /* 8px */
|
|
|
|
/* STYLE_GUIDE §3.3 字重补充 token */
|
|
--font-weight-medium-plus: 650;
|
|
|
|
--color-brand: #1978d4;
|
|
--color-brand-strong: #0e5fb9;
|
|
--color-brand-soft: #edf6ff;
|
|
--color-brand-deep: #0e5bad;
|
|
|
|
--color-success: #18b979;
|
|
--color-success-strong: #0f7d55;
|
|
--color-success-soft: #e8f7f1;
|
|
|
|
--color-danger: #d75b5b;
|
|
--color-danger-strong: #a94f4f;
|
|
--color-danger-soft: #fff6f6;
|
|
|
|
--color-warning: #e6a33c;
|
|
--color-warning-soft: #fff0ee;
|
|
|
|
--color-ink: #27394d;
|
|
--color-ink-muted: #5d7186;
|
|
--color-ink-subtle: #8b99a8;
|
|
--color-ink-caption: #748598;
|
|
|
|
--color-line: #dce4ec;
|
|
--color-line-soft: #edf1f5;
|
|
|
|
--color-bg: #f3f6f9;
|
|
--color-bg-panel: #ffffff;
|
|
--color-bg-canvas: #f9fbfd;
|
|
--color-bg-log: #17212b;
|
|
|
|
/* STYLE_GUIDE §4.2 间距补充 token */
|
|
--spacing-page-x: 22px;
|
|
--spacing-button-x: 15px;
|
|
--spacing-gap-icon: 7px;
|
|
--spacing-gap-sm: 5px;
|
|
--spacing-gap-md: 9px;
|
|
}
|
|
@theme inline {
|
|
/* shadcn 语义色映射：STYLE_GUIDE §2.6 */
|
|
--color-background: var(--color-bg);
|
|
--color-foreground: var(--color-ink);
|
|
--color-card: var(--color-bg-panel);
|
|
--color-card-foreground: var(--color-ink);
|
|
--color-popover: var(--color-bg-panel);
|
|
--color-popover-foreground: var(--color-ink);
|
|
--color-primary: var(--color-brand);
|
|
--color-primary-foreground: #ffffff;
|
|
--color-secondary: var(--color-line-soft);
|
|
--color-secondary-foreground: var(--color-ink);
|
|
--color-muted: var(--color-line-soft);
|
|
--color-muted-foreground: var(--color-ink-muted);
|
|
--color-accent: var(--color-brand-soft);
|
|
--color-accent-foreground: var(--color-brand-strong);
|
|
--color-destructive: var(--color-danger);
|
|
--color-border: var(--color-line);
|
|
--color-input: var(--color-line-soft);
|
|
--color-ring: var(--color-brand);
|
|
|
|
--color-sidebar: var(--sidebar-background);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
}
|
|
|
|
:root {
|
|
--sidebar-background: #09233f;
|
|
--sidebar-foreground: #c9d7e7;
|
|
--sidebar-primary: #1479e8;
|
|
--sidebar-primary-foreground: #ffffff;
|
|
--sidebar-accent: rgba(255, 255, 255, 0.06);
|
|
--sidebar-accent-foreground: #ffffff;
|
|
--sidebar-border: rgba(255, 255, 255, 0.08);
|
|
--sidebar-ring: #5ca9ff;
|
|
}
|
|
|
|
|
|
@font-face {
|
|
font-family: "Inter";
|
|
src: url("/fonts/Inter-Variable.ttf") format("truetype");
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Inter";
|
|
src: url("/fonts/Inter-Variable-Italic.ttf") format("truetype");
|
|
font-style: italic;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
font-family: var(--font-sans);
|
|
color: #1f354b;
|
|
background: #f3f6f9;
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
min-width: 1120px;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
|
|
button {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
border-radius: 999px;
|
|
background: #d9e1e9;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
|
background: #c4d0dc;
|
|
}
|
|
|
|
/* 侧边栏双层渐变背景 — Tailwind 任意值无法可靠表达逗号分隔的多层 background */
|
|
.sidebar-shell {
|
|
background:
|
|
radial-gradient(circle at 10% 1%, rgb(28 105 186 / 25%), transparent 27%),
|
|
#09233f;
|
|
}
|
|
|
|
.welcome-panel-shell {
|
|
background:
|
|
radial-gradient(circle at 50% 39%, rgb(74 150 225 / 9%), transparent 24%),
|
|
radial-gradient(circle, #d3dee8 1px, transparent 1px);
|
|
background-size: auto, 18px 18px;
|
|
}
|
|
|
|
.dashboard-hero-shell {
|
|
background: linear-gradient(125deg, #0b3d69, #1978d4);
|
|
}
|
|
|
|
.trend-chart-bg {
|
|
background: repeating-linear-gradient(to bottom, #fff 0, #fff 44px, #eef3f7 45px);
|
|
}
|
|
|
|
.dashboard-donut {
|
|
background: conic-gradient(#318de0 0 67%, #72c9b0 67% 86%, #f3b75c 86% 100%);
|
|
}
|
|
|
|
.dashboard-donut::after {
|
|
position: absolute;
|
|
width: 78px;
|
|
height: 78px;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
content: "";
|
|
}
|
|
|
|
.tree-skeleton-bar {
|
|
background: linear-gradient(90deg, #f2f5f8, #fafbfc, #f2f5f8);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.3s infinite;
|
|
}
|
|
|
|
.tabbar-scroll::-webkit-scrollbar {
|
|
height: 6px;
|
|
}
|
|
|
|
.tabbar-scroll::-webkit-scrollbar-track {
|
|
background: #f1f3f5;
|
|
}
|
|
|
|
.tabbar-scroll::-webkit-scrollbar-thumb {
|
|
background: #c9d6e4;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.tabbar-scroll::-webkit-scrollbar-thumb:hover {
|
|
background: #a8b9ca;
|
|
}
|
|
|
|
.stage-dot-editing {
|
|
box-shadow: 0 0 0 3px rgb(36 149 211 / 13%);
|
|
animation: lock-pulse 1.8s ease-in-out infinite;
|
|
}
|
|
|
|
.editor-canvas-shell {
|
|
background:
|
|
linear-gradient(rgb(255 255 255 / 82%), rgb(255 255 255 / 82%)),
|
|
radial-gradient(circle, #c9d8e7 1px, transparent 1px);
|
|
background-color: #f4f7fa;
|
|
background-size: auto, 18px 18px;
|
|
}
|
|
|
|
.modal-panel {
|
|
animation: modal-in 0.18s ease-out;
|
|
}
|
|
|
|
.notebook-md h1,
|
|
.notebook-md h2,
|
|
.notebook-md h3,
|
|
.notebook-md p,
|
|
.notebook-md li {
|
|
margin: 6px 0;
|
|
color: #24292f;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.notebook-md h1 {
|
|
font-size: 24px;
|
|
color: #1f6feb;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.notebook-md h2 {
|
|
font-size: 20px;
|
|
color: #1f6feb;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.notebook-md h3 {
|
|
font-size: 16px;
|
|
color: #24292f;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.notebook-md ul,
|
|
.notebook-md ol {
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.notebook-md li {
|
|
margin-left: 0;
|
|
list-style-position: outside;
|
|
}
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
to {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
@keyframes lock-pulse {
|
|
50% {
|
|
opacity: 0.5;
|
|
transform: scale(0.78);
|
|
}
|
|
}
|
|
|
|
@keyframes modal-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(8px) scale(0.985);
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
body.printing-operations-report {
|
|
min-width: 0;
|
|
overflow: visible;
|
|
background: var(--color-bg-panel);
|
|
}
|
|
|
|
body.printing-operations-report * {
|
|
visibility: hidden !important;
|
|
}
|
|
|
|
body.printing-operations-report .operations-report-document,
|
|
body.printing-operations-report .operations-report-document * {
|
|
visibility: visible !important;
|
|
}
|
|
|
|
body.printing-operations-report .operations-report-document {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
overflow: visible;
|
|
box-shadow: none;
|
|
}
|
|
|
|
body.printing-operations-report [data-slot="button"] {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* Shared UI classes still used by admin / schedules pages */
|
|
.icon-button {
|
|
display: grid;
|
|
width: 34px;
|
|
height: 34px;
|
|
place-items: center;
|
|
border: 1px solid var(--color-line);
|
|
border-radius: 7px;
|
|
background: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.icon-button:hover {
|
|
border-color: #b9c9da;
|
|
background: #f7faff;
|
|
}
|
|
|
|
.avatar {
|
|
display: grid;
|
|
width: 34px;
|
|
height: 34px;
|
|
place-items: center;
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
background: linear-gradient(145deg, #3b92ed, #1869c9);
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|