195 lines
5.0 KiB
CSS
195 lines
5.0 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* =====================
|
|
shadcn CSS 变量 (light)
|
|
===================== */
|
|
:root {
|
|
--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%;
|
|
--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: 0 84.2% 60.2%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--border: 240 5.9% 90%;
|
|
--input: 240 5.9% 90%;
|
|
--ring: 240 5.9% 10%;
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
.dark {
|
|
--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%;
|
|
--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%;
|
|
}
|
|
|
|
/* =====================
|
|
Element Plus 主题覆盖
|
|
===================== */
|
|
:root {
|
|
/* 主色 */
|
|
--el-color-primary: hsl(var(--primary));
|
|
--el-color-primary-light-3: hsl(240 5.9% 30%);
|
|
--el-color-primary-light-5: hsl(240 5.9% 50%);
|
|
--el-color-primary-light-7: hsl(240 5.9% 70%);
|
|
--el-color-primary-light-8: hsl(240 5.9% 80%);
|
|
--el-color-primary-light-9: hsl(240 4.8% 95.9%);
|
|
--el-color-primary-dark-2: hsl(240 5.9% 8%);
|
|
|
|
/* 危险色 */
|
|
--el-color-danger: hsl(var(--destructive));
|
|
|
|
/* 背景 & 文字 */
|
|
--el-bg-color: hsl(var(--background));
|
|
--el-bg-color-page: hsl(var(--background));
|
|
--el-bg-color-overlay: hsl(var(--popover));
|
|
--el-text-color-primary: hsl(var(--foreground));
|
|
--el-text-color-regular: hsl(var(--muted-foreground));
|
|
--el-text-color-secondary: hsl(var(--muted-foreground));
|
|
--el-text-color-placeholder: hsl(240 3.8% 60%);
|
|
|
|
/* 边框 */
|
|
--el-border-color: hsl(var(--border));
|
|
--el-border-color-light: hsl(var(--border));
|
|
--el-border-color-lighter: hsl(var(--border));
|
|
--el-border-color-extra-light: hsl(var(--border));
|
|
|
|
/* 圆角 */
|
|
--el-border-radius-base: var(--radius);
|
|
--el-border-radius-small: calc(var(--radius) - 2px);
|
|
--el-border-radius-round: 9999px;
|
|
|
|
/* 阴影 — shadcn 风格几乎无阴影 */
|
|
--el-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
--el-box-shadow-light: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
--el-box-shadow-lighter: none;
|
|
--el-box-shadow-dark: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
|
|
|
/* 字体 */
|
|
--el-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
--el-font-size-base: 14px;
|
|
}
|
|
|
|
/* =====================
|
|
全局基础样式
|
|
===================== */
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
border-color: hsl(var(--border));
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#app {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
-webkit-app-region: drag;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea,
|
|
a,
|
|
.no-drag {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--el-font-family);
|
|
background-color: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* =====================
|
|
Element Plus 组件微调
|
|
===================== */
|
|
|
|
/* Card — 去掉默认阴影，用细边框代替 */
|
|
.el-card {
|
|
--el-card-border-color: hsl(var(--border));
|
|
--el-card-border-radius: var(--radius);
|
|
--el-card-padding: 1.25rem;
|
|
box-shadow: none !important;
|
|
border: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
/* Button — 更简洁的样式 */
|
|
.el-button {
|
|
--el-button-border-radius: var(--radius);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.el-button--primary {
|
|
--el-button-bg-color: hsl(var(--primary));
|
|
--el-button-border-color: hsl(var(--primary));
|
|
--el-button-text-color: hsl(var(--primary-foreground));
|
|
--el-button-hover-bg-color: hsl(240 5.9% 20%);
|
|
--el-button-hover-border-color: hsl(240 5.9% 20%);
|
|
}
|
|
|
|
/* Input */
|
|
.el-input__wrapper {
|
|
border-radius: var(--radius);
|
|
box-shadow: 0 0 0 1px hsl(var(--border)) !important;
|
|
}
|
|
|
|
.el-input__wrapper:hover,
|
|
.el-input__wrapper.is-focus {
|
|
box-shadow: 0 0 0 1px hsl(var(--ring)) !important;
|
|
}
|
|
|
|
/* Select */
|
|
.el-select .el-input__wrapper {
|
|
box-shadow: 0 0 0 1px hsl(var(--border)) !important;
|
|
}
|
|
|
|
/* Menu — 侧边栏去掉右侧边框 */
|
|
.el-menu {
|
|
--el-menu-border-color: transparent;
|
|
--el-menu-hover-bg-color: hsl(var(--accent));
|
|
--el-menu-active-color: hsl(var(--accent-foreground));
|
|
}
|
|
|
|
.el-menu-item.is-active {
|
|
background-color: hsl(var(--accent));
|
|
border-radius: calc(var(--radius) - 2px);
|
|
color: hsl(var(--accent-foreground));
|
|
}
|
|
|
|
/* Dropdown / Popover */
|
|
.el-popper {
|
|
border: 1px solid hsl(var(--border)) !important;
|
|
box-shadow: var(--el-box-shadow) !important;
|
|
border-radius: var(--radius) !important;
|
|
}
|