first commit
This commit is contained in:
185
src/renderer/style.css
Normal file
185
src/renderer/style.css
Normal file
@@ -0,0 +1,185 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user