780 lines
29 KiB
CSS
780 lines
29 KiB
CSS
/* static/css/input.css */
|
||
@import "tailwindcss";
|
||
|
||
/* =================================================================== */
|
||
/* [核心] 定义 shadcn/ui 的设计系统变量 */
|
||
/* =================================================================== */
|
||
@layer base {
|
||
/* 亮色模式 */
|
||
:root {
|
||
--background: theme(colors.white);
|
||
--foreground: theme(colors.zinc.900);
|
||
|
||
--muted: theme(colors.zinc.100);
|
||
--muted-foreground: theme(colors.zinc.500);
|
||
|
||
--primary: theme(colors.blue.600);
|
||
--primary-foreground: theme(colors.white);
|
||
|
||
--secondary: theme(colors.zinc.200);
|
||
--secondary-foreground: theme(colors.zinc.900);
|
||
|
||
--destructive: theme(colors.red.600);
|
||
--destructive-foreground: theme(colors.white);
|
||
--accent: theme(colors.zinc.100);
|
||
--accent-foreground: theme(colors.zinc.900);
|
||
|
||
--border: theme(colors.zinc.300); /* 统一使用 zinc 以保持一致性 */
|
||
--input: theme(colors.zinc.300);
|
||
--ring: theme(colors.blue.500);
|
||
--radius: 0.5rem;
|
||
}
|
||
|
||
/* 暗色模式 */
|
||
.dark {
|
||
--background: theme(colors.zinc.900);
|
||
--foreground: theme(colors.zinc.100);
|
||
|
||
--muted: theme(colors.zinc.900 / 0.5);
|
||
--muted-foreground: theme(colors.zinc.400);
|
||
|
||
--primary: theme(colors.blue.600); /* 亮色和暗色模式下的主色通常保持一致 */
|
||
--primary-foreground: theme(colors.white);
|
||
|
||
--secondary: theme(colors.zinc.900);
|
||
--secondary-foreground: theme(colors.zinc.100);
|
||
|
||
--destructive: theme(colors.red.700); /* 暗色模式下可以稍暗一些以保持对比度 */
|
||
--destructive-foreground: theme(colors.white);
|
||
|
||
--accent: theme(colors.zinc.700 / 0.6); /* 示例: dark:border-zinc-700/60 */
|
||
--accent-foreground: theme(colors.zinc.100);
|
||
--border: theme(colors.zinc.900);
|
||
--input: theme(colors.zinc.700);
|
||
--ring: theme(colors.blue.500);
|
||
}
|
||
}
|
||
|
||
/* =================================================================== */
|
||
/* [核心] shadcn/ui 组件层定义 */
|
||
/* =================================================================== */
|
||
@layer components {
|
||
/* --- 按钮 (Button) --- */
|
||
.btn {
|
||
@apply inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors
|
||
focus-visible:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[(var(--ring))]
|
||
disabled:pointer-events-none disabled:opacity-50;
|
||
}
|
||
.btn-primary {
|
||
@apply bg-primary text-primary-foreground hover:bg-primary/90;
|
||
}
|
||
.btn-secondary {
|
||
@apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
|
||
}
|
||
.btn-destructive {
|
||
@apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
|
||
}
|
||
.btn-outline {
|
||
@apply border border-input bg-background hover:bg-accent hover:text-accent-foreground;
|
||
}
|
||
.btn-ghost {
|
||
@apply hover:bg-accent hover:text-accent-foreground;
|
||
}
|
||
.btn-link {
|
||
@apply text-primary underline-offset-4 hover:underline;
|
||
}
|
||
|
||
/* 按钮尺寸变体 */
|
||
.btn-lg { @apply h-11 rounded-md px-8; }
|
||
.btn-md { @apply h-10 px-4 py-2; }
|
||
.btn-sm { @apply h-9 rounded-md px-3; }
|
||
.btn-icon { @apply h-10 w-10; }
|
||
/* --- 输入框 (Input) --- */
|
||
.input {
|
||
@apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm
|
||
file:border-0 file:bg-transparent file:text-sm file:font-medium
|
||
placeholder:text-muted-foreground
|
||
focus-visible:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[(var(--ring))]
|
||
disabled:cursor-not-allowed disabled:opacity-50;
|
||
}
|
||
}
|
||
|
||
@custom-variant dark (&:where(.dark, .dark *));
|
||
|
||
/* =================================================================== */
|
||
/* [核心] 主题定义层 (Theming Layer for Tailwind JIT) */
|
||
/* =================================================================== */
|
||
@theme {
|
||
/* 颜色: --color-KEY 会自动生成 bg-KEY, text-KEY, border-KEY 等 */
|
||
--color-background: var(--background);
|
||
--color-foreground: var(--foreground);
|
||
--color-muted: var(--muted);
|
||
--color-muted-foreground: var(--muted-foreground);
|
||
--color-primary: var(--primary);
|
||
--color-primary-foreground: var(--primary-foreground);
|
||
--color-secondary: var(--secondary);
|
||
--color-secondary-foreground: var(--secondary-foreground);
|
||
--color-destructive: var(--destructive);
|
||
--color-destructive-foreground: var(--destructive-foreground);
|
||
--color-accent: var(--accent);
|
||
--color-accent-foreground: var(--accent-foreground);
|
||
--color-border: var(--border);
|
||
--color-input: var(--input);
|
||
--color-ring: var(--ring);
|
||
/* 圆角: --radius-KEY 会生成 rounded-KEY */
|
||
--radius-sm: calc(var(--radius) - 4px);
|
||
--radius-md: calc(var(--radius) - 2px);
|
||
--radius-lg: var(--radius);
|
||
/* 动画 Keyframes */
|
||
@keyframes toast-in { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
|
||
@keyframes toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(20px); } }
|
||
@keyframes panel-in { from { opacity: 0; transform: translateY(-10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
|
||
@keyframes panel-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-10px) scale(0.95); } }
|
||
/* 动画工具类: --animation-KEY 生成 animate-KEY */
|
||
--animation-toast-in: toast-in 0.4s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
|
||
--animation-toast-out: toast-out 0.3s ease-out forwards;
|
||
--animation-panel-in: panel-in 0.2s ease-out;
|
||
--animation-panel-out: panel-out 0.2s ease-out forwards;
|
||
}
|
||
|
||
/* v4引擎已经为你生成了 animate-panel-in 等类，所以@apply可以找到它们 */
|
||
|
||
/* -------------------------*/
|
||
/* ------ base.html ------- */
|
||
/* ------------------------ */
|
||
|
||
/* [最终悬浮版] 细线轨道 + 宽滑块 */
|
||
.main-content-scroll::-webkit-scrollbar {
|
||
width: 16px; /* 为轨道和滑块的交互留出足够的空间 */
|
||
}
|
||
/* [核心] 使用渐变“画”出一条1px的细线作为轨道 */
|
||
.main-content-scroll::-webkit-scrollbar-track {
|
||
background: transparent; /* 轨道区域完全透明 */
|
||
background-image: linear-gradient(
|
||
to right,
|
||
transparent 7px, /* 7px 的透明空间 */
|
||
rgba(108, 108, 108, 0.1) 7px, /* 线的开始 */
|
||
rgba(100, 100, 100, 0.1) 8px, /* 线的结束 (1px宽) */
|
||
transparent 8px /* 剩余的透明空间 */
|
||
);
|
||
}
|
||
.dark .main-content-scroll::-webkit-scrollbar-track {
|
||
background-image: linear-gradient(
|
||
to right,
|
||
transparent 7px,
|
||
rgba(0, 0, 0, 0.2) 7px, /* 暗色模式的细线 */
|
||
rgba(0, 0, 0, 0.2) 8px,
|
||
transparent 8px
|
||
);
|
||
}
|
||
/* 滑块比轨道线更宽，并带有光晕效果 */
|
||
.main-content-scroll::-webkit-scrollbar-thumb {
|
||
height: 50px; /* 给滑块一个最小高度 */
|
||
background-color: rgb(222, 222, 222); /* 浅色模式 slate-500 @ 40% */
|
||
border-radius: 9999px;
|
||
|
||
/* [核心] 使用透明边框让滑块宽度只有 8px (16px - 4px*2) */
|
||
border: 5px solid transparent;
|
||
lg:border: 4px solid transparent;
|
||
background-clip: content-box;
|
||
/* 光晕效果 */
|
||
box-shadow: inset 0 0 0 1px rgba(150, 150, 150, 0.1);
|
||
transition: all 0.2s ease-in-out;
|
||
}
|
||
.dark .main-content-scroll::-webkit-scrollbar-thumb {
|
||
background-color: #181818; /* 暗色模式 zinc-900 */
|
||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
|
||
}
|
||
/* 悬停时，滑块“变实”，颜色加深 */
|
||
.main-content-scroll::-webkit-scrollbar-thumb:hover {
|
||
background-color: rgb(202, 202, 202);
|
||
border-width: 4px; /* [核心交互] 透明边框消失，滑块宽度变为完整的16px，产生吸附放大的效果 */
|
||
}
|
||
.dark .main-content-scroll::-webkit-scrollbar-thumb:hover {
|
||
background-color: #151515;
|
||
}
|
||
|
||
.shadow-main { box-shadow: 0 0 25px rgba(0, 0, 0, 0.08); }
|
||
|
||
|
||
@layer components {
|
||
/* 1. 父容器: group 统一写入html */
|
||
.nav-item-wrapper {
|
||
@apply relative mx-4; /* 原始 margin: 0 1rem; -> mx-4 */
|
||
}
|
||
/* 2. 链接本身 */
|
||
.nav-link {
|
||
@apply flex items-baseline p-3 rounded-l-lg text-[#f4f4f5] justify-center lg:justify-start;
|
||
@apply transition-colors duration-200 ease-in-out;
|
||
/* 悬停状态 */
|
||
@apply group-hover:bg-[rgba(63,63,70,0.8)] dark:group-hover:bg-white/10;
|
||
}
|
||
/* 3. 图标 */
|
||
.nav-icon {
|
||
@apply w-[1.2rem] text-center;
|
||
@apply transition-all duration-300 ease-in-out;
|
||
/* 悬停和激活状态 */
|
||
@apply group-hover:text-[#60a5fa] group-hover:[filter:drop-shadow(0_0_5px_rgba(59,130,246,0.5))];
|
||
@apply group-data-[active='true']:text-[#60a5fa] group-data-[active='true']:[filter:drop-shadow(0_0_5px_rgba(59,130,246,0.7))];
|
||
}
|
||
/* 4. 指示器 */
|
||
.nav-indicator {
|
||
@apply absolute -left-4 top-0 h-full w-1 bg-[#f4f4f5] rounded-r-full pointer-events-none;
|
||
@apply opacity-0 transition-opacity duration-300 ease-in-out;
|
||
/* 激活状态 */
|
||
@apply group-data-[active='true']:opacity-100;
|
||
}
|
||
/* 5. 像素装饰文本 */
|
||
.pixel-decoration {
|
||
@apply font-['Pixelify_Sans'] text-[0.6rem] text-[#3ac06b] ml-2 relative top-px tracking-[0.5px];
|
||
@apply opacity-0 [text-shadow:0_0_5px_rgba(74,222,128,0.5)];
|
||
@apply transition-opacity duration-200 ease-in-out;
|
||
/* 悬停状态 */
|
||
@apply group-data-[active='true']:opacity-100 group-hover:opacity-100;
|
||
}
|
||
|
||
|
||
/* =================================================================== */
|
||
/* [融合版] 全局异步任务中心样式 */
|
||
/* =================================================================== */
|
||
|
||
/* --- 组件 A: Toast 通知样式 (保持不变) --- */
|
||
.toast-item {
|
||
@apply flex items-start p-3 w-full rounded-lg shadow-lg ring-1 ring-black/5 dark:ring-white/10 bg-white/80 dark:bg-zinc-800/80 backdrop-blur-md pointer-events-auto;
|
||
}
|
||
.toast-icon {
|
||
@apply flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-white mr-3;
|
||
}
|
||
.toast-icon-loading {@apply bg-blue-500;}
|
||
.toast-icon-success {@apply bg-green-500;}
|
||
.toast-icon-error {@apply bg-red-500;}
|
||
.toast-content {
|
||
@apply flex-grow;
|
||
}
|
||
.toast-title {
|
||
@apply font-semibold text-sm text-zinc-800 dark:text-zinc-100;
|
||
}
|
||
.toast-message {
|
||
@apply text-xs text-zinc-600 dark:text-zinc-400 mt-0.5;
|
||
}
|
||
.toast-close-btn {
|
||
@apply ml-4 text-zinc-400 hover:text-zinc-800 dark:hover:text-white transition-colors;
|
||
}
|
||
|
||
/* --- [升级] 组件 B: 多阶段任务项样式 --- */
|
||
|
||
/* 1. 任务项主容器: 移除了 flex 布局，采用块级布局容纳复杂内容 */
|
||
.task-list-item {
|
||
@apply flex justify-between items-start px-3 py-2 rounded-lg transition-colors duration-200 overflow-hidden border;
|
||
@apply hover:bg-black/5 dark:hover:bg-white/5;
|
||
@apply border-transparent dark:border-transparent;
|
||
@apply bg-zinc-50 dark:bg-zinc-800/50;
|
||
}
|
||
|
||
/* --- 任务项主内容区 (左栏) --- */
|
||
.task-item-main {
|
||
@apply flex items-center justify-between flex-grow gap-1; /* flex-grow 使其占据所有可用空间 */
|
||
}
|
||
/* 2. 任务项头部: 包含标题和时间戳 */
|
||
.task-item-header {
|
||
@apply flex justify-between items-center mb-2;
|
||
}
|
||
.task-item-title {
|
||
/* 融合了您原有的字体样式 */
|
||
@apply font-medium text-sm text-zinc-700 dark:text-zinc-200;
|
||
}
|
||
.task-item-timestamp {
|
||
/* 融合了您原有的字体样式 */
|
||
@apply text-xs self-start pt-1.5 pl-2 text-zinc-400 dark:text-zinc-500 flex-shrink-0;
|
||
}
|
||
|
||
/* 3. [新增] 阶段动画的核心容器 */
|
||
.task-stages-container {
|
||
@apply flex flex-col gap-1.5 overflow-hidden;
|
||
}
|
||
|
||
/* 4. [新增] 单个阶段的样式 */
|
||
.task-stage {
|
||
@apply flex items-center gap-2 p-1.5 rounded-md transition-all duration-300 ease-in-out relative;
|
||
}
|
||
.task-stage-icon {
|
||
@apply w-4 h-4 relative flex-shrink-0 text-zinc-400;
|
||
}
|
||
.task-stage-icon i {
|
||
@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 transition-opacity duration-200;
|
||
}
|
||
.task-stage-content {
|
||
@apply flex-grow flex justify-between items-baseline text-xs;
|
||
}
|
||
.task-stage-name {
|
||
@apply text-zinc-600 dark:text-zinc-400;
|
||
}
|
||
.task-stage-progress-text {
|
||
@apply font-mono text-zinc-500 dark:text-zinc-500;
|
||
}
|
||
.task-stage-progress-bg {
|
||
@apply absolute bottom-0 left-0 right-0 h-0.5 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden;
|
||
}
|
||
.task-stage-progress-bar {
|
||
@apply h-full w-0 rounded-full;
|
||
}
|
||
|
||
/* 5. [新增] 各阶段的状态视觉 */
|
||
/* Pending: 待处理 */
|
||
.task-stage.stage-pending { @apply opacity-40; }
|
||
.task-stage.stage-pending .fa-circle { @apply opacity-100; }
|
||
|
||
/* Active: 当前活动 */
|
||
.task-stage.stage-active {
|
||
@apply opacity-100 bg-blue-500/10;
|
||
}
|
||
.task-stage.stage-active .fa-spinner { @apply opacity-100 text-blue-500; }
|
||
.task-stage.stage-active .task-stage-name { @apply font-semibold text-zinc-800 dark:text-zinc-100; }
|
||
.task-stage.stage-active .task-stage-progress-bar { @apply bg-blue-500; }
|
||
|
||
/* Completed: 已完成 */
|
||
.task-stage.stage-completed { @apply opacity-60; }
|
||
.task-stage.stage-completed .fa-check { @apply opacity-100 text-green-500; }
|
||
.task-stage.stage-completed .task-stage-name { @apply line-through text-zinc-500 dark:text-zinc-500; }
|
||
.task-stage.stage-completed .task-stage-progress-bar { @apply bg-green-500; }
|
||
|
||
/* Error / Skipped: 错误或跳过 */
|
||
.task-stage.stage-error, .task-stage.stage-skipped { @apply opacity-50 bg-red-500/5; }
|
||
.task-stage.stage-error .fa-times, .task-stage.stage-skipped .fa-times { @apply opacity-100 text-red-500; }
|
||
.task-stage.stage-error .task-stage-name, .task-stage.stage-skipped .task-stage-name { @apply line-through; }
|
||
|
||
/* 6. [新增] 任务最终状态的容器 */
|
||
.task-final-status {
|
||
@apply overflow-hidden text-sm;
|
||
}
|
||
.task-final-status i {
|
||
@apply text-lg;
|
||
}
|
||
|
||
/* =================================================================== */
|
||
/* 任务中心智能摘要卡片样式 (Tailwind @apply 统一版) */
|
||
/* =================================================================== */
|
||
/* --- 1. 摘要行的行内图标 --- */
|
||
.task-item-icon-summary {
|
||
@apply text-lg mr-3; /* text-lg=18px, mr-3=12px, mt-px=1px */
|
||
}
|
||
/* --- 2. 可折叠内容区 --- */
|
||
.task-details-content {
|
||
@apply transition-all duration-300 ease-in-out overflow-hidden;
|
||
}
|
||
.task-details-content.collapsed {
|
||
@apply max-h-0 opacity-0 mt-0 pt-0 pb-0 border-t-0;
|
||
}
|
||
/* --- 3. 折叠区内的详情列表 --- */
|
||
/* 注意: space-y-1 现在被移到HTML中，由父元素直接控制，更符合Tailwind用法 */
|
||
.task-details-body {
|
||
@apply pt-2 mt-2 border-t border-black/5 text-xs text-zinc-600;
|
||
@apply dark:border-white/[.07] dark:text-zinc-400;
|
||
}
|
||
/* --- 4. 折叠/展开的雪佛兰图标 --- */
|
||
.task-toggle-icon {
|
||
@apply transition-transform duration-300 ease-in-out text-zinc-400 flex-shrink-0 ml-2;
|
||
}
|
||
/* --- 5. 展开状态下的图标旋转 --- */
|
||
/*
|
||
使用 .expanded 类来控制旋转。
|
||
这个 .expanded 类由我们的JS代码在点击时添加到 [data-task-toggle] 元素上。
|
||
*/
|
||
[data-task-toggle].expanded .task-toggle-icon {
|
||
@apply rotate-180;
|
||
}
|
||
|
||
/* -------------------------*/
|
||
/* ------ dashboard ------- */
|
||
/* ------------------------ */
|
||
|
||
/* [核心] dashboard tab 组件重构 */
|
||
|
||
/* 基础的标签项样式 (现在背景透明) */
|
||
.tab-item {
|
||
/* [核心变化] 移除背景，添加 z-index 使其位于指示器之上 */
|
||
@apply relative z-10 inline-flex items-center justify-center whitespace-nowrap rounded-md px-2 sm:px-5 py-1.5 text-sm font-medium transition-colors duration-200;
|
||
|
||
/* 默认/非激活状态的文字颜色 */
|
||
@apply text-zinc-200 dark:text-zinc-400;
|
||
|
||
/* 悬停时的文字颜色 */
|
||
@apply hover:text-zinc-900 hover:font-medium dark:hover:text-zinc-200 dark:hover:font-medium;
|
||
|
||
/* 焦点样式 (无需改动) */
|
||
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500;
|
||
}
|
||
|
||
/* 激活状态的标签 (只改变文字颜色) */
|
||
.tab-active {
|
||
/* [核心变化] 激活状态只改变文字颜色，使其在白色指示器上可见 */
|
||
@apply text-zinc-900 dark:text-zinc-50;
|
||
}
|
||
|
||
|
||
/* 自定义下拉选项的样式 */
|
||
.custom-select-option {
|
||
@apply cursor-pointer select-none rounded-md px-3 py-1.5 text-sm text-zinc-800 dark:text-zinc-200;
|
||
@apply transition-colors duration-150;
|
||
}
|
||
|
||
/* 选项的悬停和高亮状态 */
|
||
.custom-select-option:hover, .custom-select-option.is-highlighted {
|
||
@apply bg-zinc-200 dark:bg-zinc-700 outline-none;
|
||
}
|
||
/* 定义下拉菜单面板的基础样式 */
|
||
.dropdown-panel {
|
||
@apply absolute right-0 z-10 mt-1 w-32 rounded-md border border-zinc-200 bg-white shadow-lg dark:border-zinc-600 dark:bg-zinc-700;
|
||
}
|
||
/* 定义菜单项（按钮）的基础样式 */
|
||
.menu-item {
|
||
@apply w-full text-left flex items-center gap-x-3 px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-600 transition-colors;
|
||
}
|
||
/* 可选：为危险操作（如删除）创建一个变体 */
|
||
.menu-item-danger {
|
||
@apply text-red-600;
|
||
}
|
||
.menu-item-icon-neutral {
|
||
@apply text-blue-500;
|
||
}
|
||
/* 定义菜单项内部图标的样式 */
|
||
.menu-item-icon {
|
||
@apply w-4;
|
||
}
|
||
/* 定义菜单中的分隔线 */
|
||
.menu-divider {
|
||
@apply my-1 h-px bg-zinc-200 dark:bg-zinc-700;
|
||
}
|
||
|
||
/*
|
||
* ds-stats-card (Dashboard Statistics Card)
|
||
* 定义了仪表盘页面顶部核心指标卡片的统一外观。
|
||
* 包含了内边距、圆角、边框、背景色、阴影以及深色模式下的样式。
|
||
*/
|
||
.ds-stats-card {
|
||
@apply p-6 rounded-2xl border border-zinc-400 shadow-sm dark:bg-zinc-900/50 dark:border-zinc-800;
|
||
}
|
||
|
||
/* -------------------------*/
|
||
/* ------ keygroups ------- */
|
||
/* ------------------------ */
|
||
/**
|
||
* 1. 【新增】Group 卡片的通用基础样式
|
||
* 抽离了 active 和 inactive 状态共享的所有样式。
|
||
* 注意：它不会替换 .group-card-active/inactive，而是与之共存。
|
||
*/
|
||
.group-card {
|
||
@apply cursor-pointer rounded-lg p-3 transition-all duration-200 h-16 flex flex-col justify-center;
|
||
}
|
||
/**
|
||
* 2. 【新增】移动端首屏的 "当前分组" 选择器样式
|
||
*/
|
||
.mobile-group-selector {
|
||
@apply flex-grow flex items-center justify-between p-3 border border-zinc-200 dark:border-zinc-700 rounded-lg;
|
||
}
|
||
/* 移动端群组下拉列表样式 */
|
||
.mobile-group-menu-active {
|
||
/* --- Positioning & Layering --- */
|
||
@apply absolute z-20 top-full left-0 right-0;
|
||
/* --- Appearance --- */
|
||
@apply bg-white dark:bg-zinc-800 shadow-lg rounded-b-lg border border-t-0 border-zinc-200 dark:border-zinc-700;
|
||
/* --- Spacing & Content Flow --- */
|
||
@apply p-4;
|
||
|
||
max-height: 14rem;
|
||
@apply overflow-y-auto;
|
||
}
|
||
/**
|
||
* 3. 【新增】卡片/选择器中的次要描述文本样式
|
||
*/
|
||
.card-sub-text {
|
||
@apply text-xs text-zinc-500 dark:text-zinc-400 truncate;
|
||
}
|
||
/**
|
||
* 4. 【新增】桌面端 “添加分组” 按钮的特定样式
|
||
*/
|
||
.add-group-btn-desktop {
|
||
/**
|
||
* [核心修正]
|
||
* 1. 新增 p-1: 增加一个4px的内边距，为背景裁剪创造空间。
|
||
* 2. 新增 bg-clip-content: 让背景只在内容区（内边距内部）绘制。
|
||
*/
|
||
@apply w-full h-16 border-zinc-300 dark:border-zinc-600 text-zinc-400 dark:text-zinc-500
|
||
hover:border-blue-500 hover:text-blue-500
|
||
p-1 bg-clip-content;
|
||
--stripe-color: theme('colors.zinc.200');
|
||
.dark & {
|
||
--stripe-color: theme('colors.zinc.700');
|
||
}
|
||
|
||
/**
|
||
* [核心修正]
|
||
* 1. 角度改为 -45deg 实现镜像。
|
||
* 2. 宽度和间距从 15px/30px 减半为 7.5px/15px。
|
||
*/
|
||
background-image: repeating-linear-gradient(
|
||
-45deg,
|
||
var(--stripe-color),
|
||
var(--stripe-color) 6px,
|
||
transparent 6px,
|
||
transparent 12px
|
||
);
|
||
}
|
||
/**
|
||
* 5. 【新增】移动端 “添加分组” 按钮的特定样式
|
||
*/
|
||
.add-group-btn-mobile {
|
||
@apply w-15 h-15 border-blue-500/50 text-blue-500;
|
||
}
|
||
/**
|
||
* 6. 【新增】健康指示器的外环样式
|
||
*/
|
||
.health-indicator-ring {
|
||
@apply w-5 h-5 flex items-center justify-center rounded-full shrink-0;
|
||
}
|
||
/**
|
||
* 7. 【新增】健康指示器的核心圆点样式
|
||
*/
|
||
.health-indicator-dot {
|
||
@apply w-2 h-2 rounded-full;
|
||
}
|
||
/*
|
||
* 8. JS依赖
|
||
*/
|
||
.group-card-active {
|
||
@apply cursor-pointer rounded-lg p-3 mr-3 bg-blue-500/10 border border-blue-500/30 text-zinc-800 dark:text-zinc-200 transition-all duration-200;
|
||
}
|
||
.group-card-inactive {
|
||
@apply cursor-pointer rounded-lg p-3 mr-3 bg-white dark:bg-zinc-800/50 border border-zinc-200 dark:border-zinc-700/60 text-zinc-800 dark:text-zinc-200 hover:border-blue-500/50 hover:bg-blue-500/5;
|
||
transition-property: background-color, border-color, transform;
|
||
transition-duration: 200ms;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
Modal Component Styles (单功能模态框组件)
|
||
========================================================================== */
|
||
/**
|
||
* 1. 模态框遮罩层 (Modal Overlay)
|
||
* 覆盖整个屏幕的半透明背景。
|
||
*/
|
||
.modal-overlay {
|
||
@apply fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm;
|
||
}
|
||
/* ... (modal-panel, header, title, close-btn, body, label, footer 保持不变) ... */
|
||
.modal-panel {
|
||
@apply w-full max-w-2xl rounded-lg bg-white p-8 shadow-2xl dark:bg-zinc-800/90 border dark:border-zinc-700 flex flex-col;
|
||
}
|
||
.modal-header {
|
||
@apply flex items-center justify-between pb-4 border-b dark:border-zinc-700;
|
||
}
|
||
.modal-title {
|
||
@apply text-xl font-semibold;
|
||
}
|
||
.modal-close-btn {
|
||
@apply text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200 transition-colors;
|
||
}
|
||
.modal-body {
|
||
@apply mt-6 p-1 pr-4 -mr-4;
|
||
}
|
||
.modal-label {
|
||
@apply text-sm font-medium text-zinc-700 dark:text-zinc-300;
|
||
}
|
||
.modal-footer {
|
||
@apply mt-2 flex justify-end gap-x-3 pt-3;
|
||
}
|
||
/**
|
||
* [修正] 将所有按钮的样式定义分离，避免 @apply 嵌套自定义类。
|
||
* HTML中将同时使用 .modal-btn 和 .modal-btn-primary/secondary/danger。
|
||
*/
|
||
/* 9. 模态框按钮基础样式 (Modal Button Base) */
|
||
.modal-btn {
|
||
@apply rounded-md px-4 py-2 text-sm font-medium transition-colors;
|
||
}
|
||
|
||
/* 10. 主要操作按钮 (如: 导入, 保存) */
|
||
.modal-btn-primary {
|
||
@apply bg-blue-600 text-white hover:bg-blue-700;
|
||
}
|
||
|
||
/* 11. 次要/取消按钮 */
|
||
.modal-btn-secondary {
|
||
@apply bg-zinc-200 text-zinc-700 hover:bg-zinc-300 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600;
|
||
}
|
||
|
||
/* 12. 危险操作按钮 (如: 删除) */
|
||
.modal-btn-danger {
|
||
@apply bg-red-600 text-white hover:bg-red-700;
|
||
}
|
||
|
||
/* Modal Inputs */
|
||
.modal-input {
|
||
/*@apply mt-1 block w-full rounded-md border border-zinc-300 bg-white p-2 min-h-[40px] focus:border-blue-500 focus:ring-blue-500 dark:bg-zinc-700 dark:border-zinc-600 sm:text-sm;*/
|
||
@apply mt-1 block w-full px-3 py-2 text-xs bg-white dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-600 rounded-md placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-transparent transition duration-150 ease-in-out;
|
||
}
|
||
/*
|
||
* 修正：确保textarea也使用相同的字体大小和行高
|
||
* Tailwind forms 插件有时会覆盖这些，所以我们明确指定
|
||
*/
|
||
textarea.modal-input {
|
||
@apply text-sm leading-6;
|
||
}
|
||
/* Tag Input Component */
|
||
.tag-input-container {
|
||
|
||
@apply flex flex-wrap items-center gap-2 mt-1 w-full rounded-md bg-white dark:bg-zinc-700 border border-zinc-300 dark:border-zinc-600 p-2 min-h-[40px] focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500;
|
||
}
|
||
.tag-item {
|
||
@apply flex items-center gap-x-1.5 bg-blue-100 dark:bg-blue-500/20 text-blue-800 dark:text-blue-200 text-sm font-medium rounded-full px-2.5 py-0.5;
|
||
}
|
||
.tag-delete {
|
||
@apply text-blue-500 dark:text-blue-300 hover:text-blue-700 dark:hover:text-blue-100 font-bold;
|
||
}
|
||
.tag-input-new {
|
||
/* 使其在容器内垂直居中，感觉更好 */
|
||
@apply flex-grow bg-transparent focus:outline-none text-sm self-center;
|
||
}
|
||
|
||
/* 为复制按钮提供基础样式 */
|
||
.tag-copy-btn {
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 1.0rem; /* 调整图标大小 */
|
||
padding: 0 8px;
|
||
opacity: 0.6;
|
||
transition: opacity 0.2s, transform 0.2s;
|
||
}
|
||
.tag-copy-btn:hover {
|
||
opacity: 1;
|
||
transform: scale(1.1);
|
||
}
|
||
/* 复制成功后的状态 */
|
||
.tag-copy-btn.copied span {
|
||
color: #4CAF50; /* 绿色，表示成功 */
|
||
font-size: 0.8rem; /* 可以让提示文字小一点 */
|
||
font-weight: bold;
|
||
}
|
||
/* 复制成功后的状态 */
|
||
.tag-copy-btn.none span {
|
||
color: #3766c3; /* 绿色，表示成功 */
|
||
font-size: 0.8rem; /* 可以让提示文字小一点 */
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* Advanced Request Settings Modal Specifics */
|
||
details summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
details > summary {
|
||
list-style: none;
|
||
}
|
||
details > summary .fa-chevron-down {
|
||
transition: transform 0.2s ease-in-out;
|
||
}
|
||
details[open] > summary .fa-chevron-down {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.dynamic-kv-item {
|
||
@apply flex items-center gap-x-2;
|
||
}
|
||
.dynamic-kv-key {
|
||
@apply w-full px-3 py-2 bg-zinc-100 dark:bg-zinc-700/50 border border-zinc-300 dark:border-zinc-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-transparent transition duration-150 ease-in-out font-mono text-xs;
|
||
}
|
||
.dynamic-kv-value {
|
||
@apply w-full px-3 py-2 bg-white dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-transparent transition duration-150 ease-in-out font-mono text-xs;
|
||
}
|
||
}
|
||
|
||
@layer components {
|
||
/* Toggle Switch Component */
|
||
.toggle-checkbox:checked {
|
||
@apply right-0 border-blue-600;
|
||
right: 0;
|
||
}
|
||
.toggle-checkbox:checked + .toggle-label {
|
||
@apply bg-blue-600;
|
||
}
|
||
|
||
/* Tooltip Component */
|
||
.tooltip-icon {
|
||
@apply relative inline-flex items-center justify-center ml-2 text-zinc-400 cursor-pointer;
|
||
}
|
||
/* .tooltip-text is now dynamically generated by JS */
|
||
.global-tooltip {
|
||
@apply fixed z-[9999] w-max max-w-xs whitespace-normal rounded-lg bg-zinc-800 px-3 py-2 text-sm font-medium text-white shadow-lg transition-opacity duration-200;
|
||
}
|
||
}
|
||
|
||
@layer components {
|
||
/* SortableJS Drag Styles */
|
||
.sortable-ghost {
|
||
@apply opacity-40 bg-blue-200 dark:bg-blue-900/50;
|
||
}
|
||
.sortable-drag {
|
||
@apply shadow-lg scale-105 cursor-grabbing;
|
||
}
|
||
|
||
/* Fallback class for when forceFallback is true */
|
||
.sortable-fallback {
|
||
@apply shadow-lg scale-105 cursor-grabbing;
|
||
}
|
||
}
|
||
|
||
/* =================================================================== */
|
||
/* 自定义 SweetAlert2 样式 (Custom SweetAlert2 Styles) */
|
||
/* =================================================================== */
|
||
.swal2-popup.swal2-custom-style {
|
||
@apply bg-zinc-300 dark:bg-zinc-800 text-sm; /* 为整个弹窗设置基础字体大小 */
|
||
}
|
||
.swal2-popup.swal2-custom-style .swal2-title {
|
||
@apply text-xl font-semibold text-zinc-800 dark:text-zinc-100; /* 应用标题样式 */
|
||
}
|
||
.swal2-popup.swal2-custom-style .swal2-html-container {
|
||
@apply text-sm text-zinc-600 dark:text-zinc-300; /* 应用正文样式 */
|
||
}
|
||
.swal2-popup.swal2-custom-style .swal2-confirm-button,
|
||
.swal2-popup.swal2-custom-style .swal2-cancel-button {
|
||
@apply text-sm font-medium px-4 py-2 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2; /* 应用按钮样式 */
|
||
@apply focus:ring-offset-white dark:focus:ring-offset-zinc-800;
|
||
}
|
||
.swal2-popup.swal2-custom-style .swal2-confirm-button {
|
||
@apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
|
||
}
|
||
.swal2-popup.swal2-custom-style .swal2-cancel-button {
|
||
@apply bg-transparent text-zinc-700 dark:text-zinc-200 border border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50 dark:hover:bg-zinc-700 focus:ring-zinc-500;
|
||
}
|
||
/* 覆盖图标大小 */
|
||
.swal2-popup.swal2-custom-style .swal2-icon {
|
||
@apply w-8 h-8 my-2;
|
||
}
|
||
.swal2-popup.swal2-custom-style .swal2-icon .swal2-icon-content {
|
||
@apply text-4xl;
|
||
}
|
||
|
||
@layer components {
|
||
/* --- [新增] 可复用的表格组件样式 --- */
|
||
.table {
|
||
@apply w-full caption-bottom text-sm;
|
||
}
|
||
.table-header {
|
||
/* 使用语义化颜色，自动适应暗色模式 */
|
||
@apply sticky top-0 z-10 border-b border-border bg-muted/50;
|
||
}
|
||
.table-header .table-row {
|
||
/* 表头的 hover 效果通常与数据行不同，或者没有 */
|
||
@apply hover:bg-transparent;
|
||
}
|
||
.table-body {
|
||
@apply [&_tr:last-child]:border-0;
|
||
}
|
||
.table-row {
|
||
@apply border-b border-border transition-colors hover:bg-muted/80;
|
||
}
|
||
.table-head-cell {
|
||
@apply h-12 px-4 text-left align-middle font-medium text-muted-foreground;
|
||
}
|
||
.table-cell {
|
||
@apply p-4 align-middle;
|
||
}
|
||
} |