290 lines
6.6 KiB
CSS
290 lines
6.6 KiB
CSS
|
|
@import "tailwindcss";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
@config "../../tailwind.config.js";
|
|
@import "./body.css";
|
|
|
|
/* CSS变量定义 - 农业管理系统主题 */
|
|
:root {
|
|
/* 基础色彩系统 */
|
|
--input-background: #f3f3f5;
|
|
--background: 240 10% 98%;
|
|
--foreground: 240 10% 10%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 240 10% 10%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 240 10% 10%;
|
|
--primary: 142 76% 36%;
|
|
--primary-foreground: 355 100% 97%;
|
|
--secondary: 217 91% 60%;
|
|
--secondary-foreground: 240 10% 98%;
|
|
--muted: 240 4% 96%;
|
|
--muted-foreground: 240 4% 46%;
|
|
--accent: 240 4% 96%;
|
|
--accent-foreground: 240 10% 10%;
|
|
--destructive: 0 84% 60%;
|
|
--destructive-foreground: 240 10% 98%;
|
|
--border: 240 4% 90%;
|
|
--input: 240 4% 90%;
|
|
--ring: 142 76% 36%;
|
|
--radius: 0.5rem;
|
|
|
|
/* 农业管理系统特定颜色 */
|
|
--agriculture-green: 142 76% 36%;
|
|
--agriculture-green-50: 138 100% 97%;
|
|
--agriculture-green-600: 142 76% 36%;
|
|
--agriculture-green-700: 142 74% 31%;
|
|
--agriculture-green-900: 142 72% 23%;
|
|
--agriculture-blue: 217 91% 60%;
|
|
--agriculture-blue-50: 217 100% 97%;
|
|
--agriculture-amber: 38 92% 50%;
|
|
--agriculture-amber-50: 38 100% 97%;
|
|
--agriculture-brown: 27 48% 34%;
|
|
--agriculture-brown-50: 27 48% 95%;
|
|
|
|
/* 状态颜色 */
|
|
--status-running: 142 76% 36%;
|
|
--status-idle: 220 9% 90%;
|
|
--status-maintenance: 38 92% 50%;
|
|
--status-error: 0 84% 60%;
|
|
--status-offline: 220 9% 75%;
|
|
|
|
/* 间距系统 */
|
|
--spacing-xs: 4px;
|
|
--spacing-sm: 8px;
|
|
--spacing-md: 16px;
|
|
--spacing-lg: 24px;
|
|
--spacing-xl: 32px;
|
|
--spacing-2xl: 48px;
|
|
|
|
/* 圆角系统 */
|
|
--radius-sm: 4px;
|
|
--radius-md: 6px;
|
|
--radius-lg: 8px;
|
|
--radius-xl: 12px;
|
|
--sidebar: hsl(0 0% 98%);
|
|
--sidebar-foreground: hsl(240 5.3% 26.1%);
|
|
--sidebar-primary: hsl(240 5.9% 10%);
|
|
--sidebar-primary-foreground: hsl(0 0% 98%);
|
|
--sidebar-accent: hsl(240 4.8% 95.9%);
|
|
--sidebar-accent-foreground: hsl(240 5.9% 10%);
|
|
--sidebar-border: hsl(220 13% 91%);
|
|
--sidebar-ring: hsl(217.2 91.2% 59.8%);
|
|
}
|
|
|
|
.dark {
|
|
--input-background:240 10% 98%;
|
|
--background: 240 10% 3.9%;
|
|
--foreground: 240 10% 98%;
|
|
--card: 240 10% 3.9%;
|
|
--card-foreground: 240 10% 98%;
|
|
--popover: 240 10% 3.9%;
|
|
--popover-foreground: 240 10% 98%;
|
|
--primary: 142 70% 45%;
|
|
--primary-foreground: 144 61% 20%;
|
|
--secondary: 217 33% 17%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--muted: 240 3% 15%;
|
|
--muted-foreground: 240 5% 65%;
|
|
--accent: 240 3% 15%;
|
|
--accent-foreground: 240 10% 98%;
|
|
--destructive: 0 63% 31%;
|
|
--destructive-foreground: 240 10% 98%;
|
|
--border: 240 3% 15%;
|
|
--input: 240 3% 15%;
|
|
--ring: 142 70% 45%;
|
|
--sidebar: hsl(240 5.9% 10%);
|
|
--sidebar-foreground: hsl(240 4.8% 95.9%);
|
|
--sidebar-primary: hsl(224.3 76.3% 48%);
|
|
--sidebar-primary-foreground: hsl(0 0% 100%);
|
|
--sidebar-accent: hsl(240 3.7% 15.9%);
|
|
--sidebar-accent-foreground: hsl(240 4.8% 95.9%);
|
|
--sidebar-border: hsl(240 3.7% 15.9%);
|
|
--sidebar-ring: hsl(217.2 91.2% 59.8%);
|
|
}
|
|
|
|
/* 基础样式 */
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-feature-settings: "rlig" 1, "calt" 1;
|
|
}
|
|
}
|
|
|
|
/* 组件样式 */
|
|
@layer components {
|
|
/* 状态标签样式 */
|
|
.status-running {
|
|
@apply bg-green-100 text-green-800 border-green-200;
|
|
}
|
|
.status-idle {
|
|
@apply bg-gray-100 text-gray-800 border-gray-200;
|
|
}
|
|
.status-maintenance {
|
|
@apply bg-yellow-100 text-yellow-800 border-yellow-200;
|
|
}
|
|
.status-error {
|
|
@apply bg-red-100 text-red-800 border-red-200;
|
|
}
|
|
.status-offline {
|
|
@apply bg-gray-100 text-gray-600 border-gray-200;
|
|
}
|
|
|
|
/* 农业主题按钮 */
|
|
.btn-agriculture {
|
|
@apply bg-green-600 hover:bg-green-700 text-white;
|
|
}
|
|
|
|
.btn-agriculture-secondary {
|
|
@apply bg-blue-600 hover:bg-blue-700 text-white;
|
|
}
|
|
|
|
/* 卡片样式 */
|
|
.card-agriculture {
|
|
@apply bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-shadow;
|
|
}
|
|
|
|
/* 导航样式 */
|
|
.nav-agriculture {
|
|
@apply bg-green-600 text-white;
|
|
}
|
|
}
|
|
|
|
/* 工具类 */
|
|
@layer utilities {
|
|
.text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
/* 农业色彩工具类 */
|
|
.text-agriculture-green {
|
|
color: rgb(var(--agriculture-green));
|
|
}
|
|
|
|
.bg-agriculture-green {
|
|
background-color: rgb(var(--agriculture-green));
|
|
}
|
|
|
|
.border-agriculture-green {
|
|
border-color: rgb(var(--agriculture-green));
|
|
}
|
|
|
|
/* 响应式容器 */
|
|
.container-agriculture {
|
|
@apply container mx-auto px-4 sm:px-6 lg:px-8;
|
|
}
|
|
|
|
/* 农业网格系统 */
|
|
.grid-agriculture {
|
|
@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
|
|
}
|
|
}
|
|
|
|
/* 滚动条样式 */
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: hsl(var(--muted-foreground));
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* 动画 */
|
|
@keyframes agriculture-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.agriculture-fade-in {
|
|
animation: agriculture-fade-in 0.3s ease-out;
|
|
}
|
|
|
|
/* 打印样式 */
|
|
@media print {
|
|
.no-print {
|
|
display: none !important;
|
|
}
|
|
|
|
.card-agriculture {
|
|
@apply shadow-none border border-gray-300;
|
|
}
|
|
}
|
|
|
|
@theme inline {
|
|
--color-sidebar: var(--sidebar);
|
|
--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);
|
|
--animate-accordion-down: accordion-down 0.2s ease-out;
|
|
--animate-accordion-up: accordion-up 0.2s ease-out;
|
|
--color-input-background: var(--input-background);
|
|
@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;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
h2 {
|
|
font-size: var(--text-xl);
|
|
font-weight: var(--font-weight-medium);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
}
|
|
|
|
@layer utilities {
|
|
.\@container\/card-header {
|
|
container: card-header / inline-size;
|
|
}
|
|
.bg-input-background {
|
|
background-color: var(--input-background);
|
|
}
|
|
.focus-visible\:ring-ring\/50:focus-visible {
|
|
--tw-ring-color: var(--ring);
|
|
}
|
|
}
|