37d2688a28
- Add admin/lesson-plans, parent/lesson-plans, student/lesson-plans routes - Add student/practice and teacher/practice routes for adaptive practice - Add management/grade/dashboard and management/grade/practice routes - Add teacher/lesson-plans error and loading boundaries - Update existing admin, parent, student, teacher pages with new features - Update globals.css and proxy middleware
265 lines
7.0 KiB
CSS
265 lines
7.0 KiB
CSS
@import "tailwindcss";
|
||
|
||
@plugin "tailwindcss-animate";
|
||
@plugin "@tailwindcss/typography";
|
||
|
||
@custom-variant dark (&:where(.dark, .dark *));
|
||
|
||
:root {
|
||
/* Neutral: Zinc - Clean, Professional, International Style */
|
||
--background: 0 0% 100%;
|
||
--foreground: 240 10% 3.9%;
|
||
|
||
--card: 0 0% 100%;
|
||
--card-foreground: 240 10% 3.9%;
|
||
|
||
--popover: 0 0% 100%;
|
||
--popover-foreground: 240 10% 3.9%;
|
||
|
||
/* Brand: Deep Indigo */
|
||
--primary: 240 5.9% 10%;
|
||
--primary-foreground: 0 0% 98%;
|
||
|
||
--secondary: 240 4.8% 95.9%;
|
||
--secondary-foreground: 240 5.9% 10%;
|
||
|
||
--muted: 240 4.8% 95.9%;
|
||
--muted-foreground: 240 3.8% 46.1%;
|
||
|
||
--accent: 240 4.8% 95.9%;
|
||
--accent-foreground: 240 5.9% 10%;
|
||
|
||
/* Destructive: Subtle Red */
|
||
--destructive: 0 84.2% 60.2%;
|
||
--destructive-foreground: 0 0% 98%;
|
||
|
||
/* Borders & UI */
|
||
--border: 240 5.9% 90%;
|
||
--input: 240 5.9% 90%;
|
||
--ring: 240 5.9% 10%;
|
||
|
||
--radius: 0.5rem;
|
||
|
||
/* Chart / Data Visualization Colors */
|
||
--chart-1: 12 76% 61%;
|
||
--chart-2: 173 58% 39%;
|
||
--chart-3: 197 37% 24%;
|
||
--chart-4: 43 74% 66%;
|
||
--chart-5: 27 87% 67%;
|
||
|
||
/* Sidebar Specific */
|
||
--sidebar-background: 0 0% 98%;
|
||
--sidebar-foreground: 240 5.3% 26.1%;
|
||
--sidebar-primary: 240 5.9% 10%;
|
||
--sidebar-primary-foreground: 0 0% 98%;
|
||
--sidebar-accent: 240 4.8% 95.9%;
|
||
--sidebar-accent-foreground: 240 5.9% 10%;
|
||
--sidebar-border: 220 13% 91%;
|
||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||
}
|
||
|
||
.dark {
|
||
/* Dark Mode: Deep Zinc Base */
|
||
--background: 240 10% 3.9%;
|
||
--foreground: 0 0% 98%;
|
||
|
||
--card: 240 10% 3.9%;
|
||
--card-foreground: 0 0% 98%;
|
||
|
||
--popover: 240 10% 3.9%;
|
||
--popover-foreground: 0 0% 98%;
|
||
|
||
/* Brand Dark: Adjusted for contrast */
|
||
--primary: 0 0% 98%;
|
||
--primary-foreground: 240 5.9% 10%;
|
||
|
||
--secondary: 240 3.7% 15.9%;
|
||
--secondary-foreground: 0 0% 98%;
|
||
|
||
--muted: 240 3.7% 15.9%;
|
||
--muted-foreground: 240 5% 64.9%;
|
||
|
||
--accent: 240 3.7% 15.9%;
|
||
--accent-foreground: 0 0% 98%;
|
||
|
||
--destructive: 0 62.8% 30.6%;
|
||
--destructive-foreground: 0 0% 98%;
|
||
|
||
--border: 240 3.7% 15.9%;
|
||
--input: 240 3.7% 15.9%;
|
||
--ring: 240 4.9% 83.9%;
|
||
|
||
--chart-1: 220 70% 50%;
|
||
--chart-2: 160 60% 45%;
|
||
--chart-3: 30 80% 55%;
|
||
--chart-4: 280 65% 60%;
|
||
--chart-5: 340 75% 55%;
|
||
|
||
--sidebar-background: 240 5.9% 10%;
|
||
--sidebar-foreground: 240 4.8% 95.9%;
|
||
--sidebar-primary: 224.3 76.3% 48%;
|
||
--sidebar-primary-foreground: 0 0% 100%;
|
||
--sidebar-accent: 240 3.7% 15.9%;
|
||
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
||
--sidebar-border: 240 3.7% 15.9%;
|
||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||
}
|
||
|
||
@theme inline {
|
||
--color-background: hsl(var(--background));
|
||
--color-foreground: hsl(var(--foreground));
|
||
|
||
--color-card: hsl(var(--card));
|
||
--color-card-foreground: hsl(var(--card-foreground));
|
||
|
||
--color-popover: hsl(var(--popover));
|
||
--color-popover-foreground: hsl(var(--popover-foreground));
|
||
|
||
--color-primary: hsl(var(--primary));
|
||
--color-primary-foreground: hsl(var(--primary-foreground));
|
||
|
||
--color-secondary: hsl(var(--secondary));
|
||
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
||
|
||
--color-muted: hsl(var(--muted));
|
||
--color-muted-foreground: hsl(var(--muted-foreground));
|
||
|
||
--color-accent: hsl(var(--accent));
|
||
--color-accent-foreground: hsl(var(--accent-foreground));
|
||
|
||
--color-destructive: hsl(var(--destructive));
|
||
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
||
|
||
--color-border: hsl(var(--border));
|
||
--color-input: hsl(var(--input));
|
||
--color-ring: hsl(var(--ring));
|
||
|
||
--color-chart-1: hsl(var(--chart-1));
|
||
--color-chart-2: hsl(var(--chart-2));
|
||
--color-chart-3: hsl(var(--chart-3));
|
||
--color-chart-4: hsl(var(--chart-4));
|
||
--color-chart-5: hsl(var(--chart-5));
|
||
|
||
--color-sidebar: hsl(var(--sidebar-background));
|
||
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
|
||
--color-sidebar-primary: hsl(var(--sidebar-primary));
|
||
--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
|
||
--color-sidebar-accent: hsl(var(--sidebar-accent));
|
||
--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
|
||
--color-sidebar-border: hsl(var(--sidebar-border));
|
||
--color-sidebar-ring: hsl(var(--sidebar-ring));
|
||
|
||
/* Material Design 3 Surface 令牌映射（备课模块使用）*/
|
||
--color-surface: hsl(var(--card));
|
||
--color-on-surface: hsl(var(--foreground));
|
||
--color-on-surface-variant: hsl(var(--muted-foreground));
|
||
--color-surface-container-lowest: hsl(var(--background));
|
||
--color-surface-container-low: hsl(var(--muted));
|
||
--color-surface-container: hsl(var(--secondary));
|
||
--color-surface-container-high: hsl(var(--accent));
|
||
--color-surface-container-highest: hsl(var(--muted-foreground));
|
||
--color-outline-variant: hsl(var(--border));
|
||
--color-outline: hsl(var(--border));
|
||
--color-error: hsl(var(--destructive));
|
||
--color-tertiary: hsl(var(--chart-3));
|
||
--color-tertiary-container: hsl(var(--chart-3));
|
||
|
||
--radius-lg: var(--radius);
|
||
--radius-md: calc(var(--radius) - 2px);
|
||
--radius-sm: calc(var(--radius) - 4px);
|
||
|
||
--animate-accordion-down: accordion-down 0.2s ease-out;
|
||
--animate-accordion-up: accordion-up 0.2s ease-out;
|
||
|
||
@keyframes accordion-down {
|
||
from { height: 0; }
|
||
to { height: var(--radix-accordion-content-height); }
|
||
}
|
||
@keyframes accordion-up {
|
||
from { height: var(--radix-accordion-content-height); }
|
||
to { height: 0; }
|
||
}
|
||
}
|
||
|
||
/* Reduced Motion */
|
||
@layer base {
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation-duration: 0.01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.01ms !important;
|
||
scroll-behavior: auto !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Base Styles */
|
||
@layer base {
|
||
* {
|
||
@apply border-border;
|
||
}
|
||
body {
|
||
@apply bg-background text-foreground h-screen overflow-hidden;
|
||
font-feature-settings: "rlig" 1, "calt" 1;
|
||
}
|
||
}
|
||
|
||
/* ---- 备课画布：锚点与连线透明度规则 ---- */
|
||
/* 范围锚定文本背景：默认透明（opacity 0），选中关联节点时显示（opacity 0.3） */
|
||
.range-anchor {
|
||
background-color: var(--node-color, #1976d2);
|
||
opacity: 0;
|
||
transition: opacity 0.2s ease;
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
padding: 0 1px;
|
||
}
|
||
.range-anchor.active {
|
||
opacity: 0.3;
|
||
}
|
||
.range-anchor:hover {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/* 点锚定占位符：默认半透明（opacity 0.3），选中关联节点时不透明（opacity 1） */
|
||
.point-anchor {
|
||
background-color: var(--node-color, #1976d2);
|
||
color: #fff;
|
||
opacity: 0.3;
|
||
transition: opacity 0.2s ease;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
padding: 0 4px;
|
||
margin: 0 1px;
|
||
font-size: 0.85em;
|
||
font-weight: 600;
|
||
display: inline-block;
|
||
min-width: 1.2em;
|
||
text-align: center;
|
||
line-height: 1.2;
|
||
user-select: none;
|
||
}
|
||
.point-anchor.active {
|
||
opacity: 1;
|
||
}
|
||
.point-anchor:hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 锚点连线：默认 10% 透明度，选中关联节点时完整显示 */
|
||
.anchor-edge {
|
||
opacity: 0.1;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
.anchor-edge.active {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 正文节点光标指示器闪烁 */
|
||
@keyframes cursor-blink {
|
||
0%, 50% { opacity: 1; }
|
||
51%, 100% { opacity: 0; }
|
||
}
|