From 59e1eea90753af72dbf205d134cf8d106fae3b78 Mon Sep 17 00:00:00 2001 From: duorameng <2997944583@qq.com> Date: Tue, 7 Apr 2026 20:15:39 +0800 Subject: [PATCH] chore: reback font style --- pre_index.css | 601 +++++++++++++++++++++++++++++++++ web/package-lock.json | 20 -- web/package.json | 2 - web/src/assets/index.css | 57 ++-- web/src/layouts/MainLayout.vue | 2 +- 5 files changed, 625 insertions(+), 57 deletions(-) create mode 100644 pre_index.css diff --git a/pre_index.css b/pre_index.css new file mode 100644 index 0000000..6a8fec9 --- /dev/null +++ b/pre_index.css @@ -0,0 +1,601 @@ +@import "tailwindcss"; +@import "tw-animate-css"; +@import "@fontsource/inter/300.css"; +@import "@fontsource/inter/400.css"; +@import "@fontsource/inter/500.css"; +@import "@fontsource/inter/600.css"; +@import "@fontsource/inter/700.css"; +@import "@fontsource/jetbrains-mono/400.css"; +@import "@fontsource/jetbrains-mono/500.css"; + +/* Sonner toast styles */ +[data-sonner-toaster] { + --width: 356px; + --border-radius: var(--radius); + font-family: inherit; + z-index: 9999 !important; +} + +[data-sonner-toast] { + background: var(--popover) !important; + color: var(--popover-foreground) !important; + border: 1px solid var(--border) !important; + border-radius: var(--radius) !important; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; +} + +@custom-variant dark (&:is(.dark *)); + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + --color-sidebar-ring: var(--sidebar-ring); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar: var(--sidebar); + --color-chart-5: var(--chart-5); + --color-chart-4: var(--chart-4); + --color-chart-3: var(--chart-3); + --color-chart-2: var(--chart-2); + --color-chart-1: var(--chart-1); + --radius-2xl: calc(var(--radius) + 8px); + --radius-3xl: calc(var(--radius) + 12px); + --radius-4xl: calc(var(--radius) + 16px); +} + +:root { + --background: #ffffff; + --foreground: #252525; + --card: #ffffff; + --card-foreground: #252525; + --popover: #ffffff; + --popover-foreground: #252525; + --primary: #333333; + --primary-foreground: #ffffff; + --secondary: #f3f4f6; + --secondary-foreground: #333333; + --muted: #f3f4f6; + --muted-foreground: #6b7280; + --accent: #f3f4f6; + --accent-foreground: #333333; + --destructive: #ef4444; + --destructive-foreground: #ffffff; + --border: #e5e7eb; + --input: #e5e7eb; + --ring: #9ca3af; + --radius: 0.625rem; + --sidebar: #f9fafb; + --sidebar-foreground: #252525; + --sidebar-primary: #333333; + --sidebar-primary-foreground: #ffffff; + --sidebar-accent: #f3f4f6; + --sidebar-accent-foreground: #333333; + --sidebar-border: #e5e7eb; + --sidebar-ring: #9ca3af; +} + +/* OKLCH support targeting modern browsers */ +@supports (color: oklch(1 0 0)) { + :root { + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --destructive-foreground: oklch(0.985 0 0); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); + } +} + +.dark { + --background: #1a1a1a; + --foreground: #f9fafb; + --card: #242424; + --card-foreground: #f9fafb; + --popover: #242424; + --popover-foreground: #f9fafb; + --primary: #f3f4f6; + --primary-foreground: #252525; + --secondary: #2d2d2d; + --secondary-foreground: #f9fafb; + --muted: #2d2d2d; + --muted-foreground: #9ca3af; + --accent: #2d2d2d; + --accent-foreground: #f9fafb; + --destructive: #dc2626; + --destructive-foreground: #f9fafb; + --border: rgba(255, 255, 255, 0.12); + --input: rgba(255, 255, 255, 0.15); + --ring: #6b7280; + --sidebar: #1a1a1a; + --sidebar-foreground: #f9fafb; + --sidebar-primary: #60a5fa; + --sidebar-primary-foreground: #f9fafb; + --sidebar-accent: #2d2d2d; + --sidebar-accent-foreground: #f9fafb; + --sidebar-border: rgba(255, 255, 255, 0.12); + --sidebar-ring: #6b7280; +} + +@supports (color: oklch(1 0 0)) { + .dark { + --background: oklch(0.22 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.26 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.26 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.922 0 0); + --primary-foreground: oklch(0.205 0 0); + --secondary: oklch(0.32 0 0); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.32 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.32 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.704 0.191 22.216); + --destructive-foreground: oklch(0.985 0 0); + --border: oklch(1 0 0 / 12%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.556 0 0); + --sidebar: oklch(0.26 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.32 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 12%); + --sidebar-ring: oklch(0.556 0 0); + } +} + +@layer base { + * { + @apply outline-ring/50; + font-family: inherit; + } + + *, + ::before, + ::after { + border-color: transparent; + } + + .border, + [class*="border-"] { + border-color: var(--border); + } + + body { + @apply bg-background text-foreground antialiased; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 14px; + line-height: 1.5; + letter-spacing: -0.01em; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + } + + .font-code, + .font-mono, + code, + pre { + font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; + } +} + +/* ======================================== + 移动端字体独立优化(< 640px) + 大屏保持不变,小屏单独增重、优化渲染 + ======================================== */ +@media (max-width: 639px) { + body { + font-size: 15px; + font-weight: 450; + letter-spacing: 0; + /* 移动端关闭 subpixel antialiasing,字体更实更清晰 */ + -webkit-font-smoothing: auto; + -moz-osx-font-smoothing: auto; + } + + /* 标题类字体在小屏下同步增重 */ + h1, h2, h3, h4, h5, h6 { + font-weight: 700; + letter-spacing: -0.01em; + } + + /* 正文段落、描述类文字增重 */ + p, + span:not([class*="icon"]), + label, + [class*="description"], + [class*="muted"] { + font-weight: 420; + } + + /* 小号字在移动端专门增重,与 Windows 小字优化区分开 */ + .text-xs { + font-size: 0.8rem; + font-weight: 500; + letter-spacing: 0.01em; + } + + .text-sm { + font-size: 0.9rem; + font-weight: 450; + letter-spacing: 0; + } + + /* 按钮文字增重,更易点击辨识 */ + button, + [role="button"] { + font-weight: 500; + } + + /* 表格单元格 */ + td, th { + font-weight: 430; + } +} + +/* 高级感增强 - 微妙的渐变背景 */ +body { + background-color: var(--background); + background: linear-gradient(135deg, var(--background) 0%, #f9fafb 100%); + background: linear-gradient(135deg, var(--background) 0%, oklch(from var(--background) calc(l * 0.98) c h) 100%); + background-attachment: fixed; +} + +.dark body { + background-color: var(--background); + background: linear-gradient(135deg, var(--background) 0%, #252525 100%); + background: linear-gradient(135deg, var(--background) 0%, oklch(from var(--background) calc(l * 1.05) c h) 100%); +} + +/* 卡片增强 - 添加微妙阴影 */ +[data-slot="card"] { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05); +} + +[data-slot="card"]:hover { + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.08); +} + +.dark [data-slot="card"] { + box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3); +} + +.dark [data-slot="card"]:hover { + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4); +} + +/* 按钮增强 - 更流畅的交互 */ +button, +[role="button"] { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} + +button:active, +[role="button"]:active { + transform: scale(0.98); +} + +/* 输入框增强 - 聚焦效果 */ +input:focus, +textarea:focus, +select:focus { + box-shadow: 0 0 0 3px oklch(from var(--ring) l c h / 0.1); + transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* 链接增强 */ +a { + transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* 表格增强 - 悬停效果 */ +table tbody tr { + transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1); +} + +table tbody tr:hover { + background-color: oklch(from var(--muted) l c h / 0.5); +} + +/* 模态框和弹出层增强 - 背景模糊 */ +[role="dialog"]::backdrop, +[data-state="open"]::backdrop { + backdrop-filter: blur(4px); + animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +/* 代码块增强 */ +code, +pre { + background: oklch(from var(--muted) l c h / 0.5); + border-radius: calc(var(--radius) - 2px); + padding: 0.125rem 0.375rem; + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; + font-size: 0.875em; +} + +pre code { + padding: 0; + background: transparent; +} + +/* Windows 小字体优化 */ +.text-xs, +.text-sm, +[class*="text-xs"], +[class*="text-sm"] { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-weight: 400; + letter-spacing: 0.01em; +} + +/* 表格和列表中的小字体优化 */ +table, +[role="table"] { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* 命令和路径文本优化 */ +code, +pre, +[class*="font-mono"] { + -webkit-font-smoothing: auto; + -moz-osx-font-smoothing: auto; + font-weight: 400; +} + +/* 徽章和标签增强 */ +[class*="badge"], +[class*="tag"] { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); +} + +[class*="badge"]:hover, +[class*="tag"]:hover { + box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.1); +} + +/* 加载动画增强 */ +@keyframes shimmer { + 0% { + background-position: -1000px 0; + } + + 100% { + background-position: 1000px 0; + } +} + +.skeleton { + background: linear-gradient(90deg, + oklch(from var(--muted) l c h / 0.3) 0%, + oklch(from var(--muted) l c h / 0.5) 50%, + oklch(from var(--muted) l c h / 0.3) 100%); + background-size: 1000px 100%; + animation: shimmer 2s infinite linear; +} + +/* 滚动条美化增强 */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: transparent; + border-radius: 4px; +} + +::-webkit-scrollbar-thumb { + background: oklch(from var(--muted-foreground) l c h / 0.2); + border-radius: 4px; + border: 2px solid transparent; + background-clip: padding-box; +} + +::-webkit-scrollbar-thumb:hover { + background: oklch(from var(--muted-foreground) l c h / 0.3); + background-clip: padding-box; +} + +.dark ::-webkit-scrollbar-thumb { + background: oklch(from var(--muted-foreground) l c h / 0.3); + background-clip: padding-box; +} + +.dark ::-webkit-scrollbar-thumb:hover { + background: oklch(from var(--muted-foreground) l c h / 0.4); + background-clip: padding-box; +} + +/* 选中文本样式 */ +::selection { + background: oklch(from var(--primary) l c h / 0.2); + color: var(--foreground); +} + +.dark ::selection { + background: oklch(from var(--primary) l c h / 0.3); +} + +/* Number input spinner - Refined SVG version with more spacing */ +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + -webkit-appearance: none; + appearance: none; + width: 22px; + /* Increased width for better hit area and visibility */ + height: 20px; + cursor: pointer; + opacity: 0.5; + /* Premium SVG Arrows: Increased gap between up and down arrows */ + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 17 5 5 5-5'/%3E%3Cpath d='m7 7 5-5 5 5'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: center; + background-size: 14px; + transition: opacity 0.2s ease; + margin-right: 2px; +} + +/* Hover effect: Smoothly light up the arrows */ +input[type="number"]:hover::-webkit-inner-spin-button { + opacity: 0.9; +} + +/* Light mode support */ +:root:not(.dark) input[type="number"]::-webkit-inner-spin-button { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 17 5 5 5-5'/%3E%3Cpath d='m7 7 5-5 5 5'/%3E%3C/svg%3E"); +} + +/* Date/Time picker enhancement */ +input[type="datetime-local"], +input[type="date"], +input[type="time"] { + color-scheme: light; +} + +.dark input[type="datetime-local"], +.dark input[type="date"], +.dark input[type="time"] { + color-scheme: dark; +} + +input[type="datetime-local"]::-webkit-calendar-picker-indicator, +input[type="date"]::-webkit-calendar-picker-indicator, +input[type="time"]::-webkit-calendar-picker-indicator { + cursor: pointer; + opacity: 0.5; + transition: opacity 0.2s ease; +} + +input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator, +input[type="date"]:hover::-webkit-calendar-picker-indicator, +input[type="time"]:hover::-webkit-calendar-picker-indicator { + opacity: 0.9; +} + +/* Custom scrollbar styles */ +.custom-scrollbar::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +.custom-scrollbar::-webkit-scrollbar-track { + background: transparent; + border-radius: 3px; +} + +.custom-scrollbar::-webkit-scrollbar-thumb { + background: oklch(0.7 0 0 / 30%); + border-radius: 3px; +} + +.custom-scrollbar::-webkit-scrollbar-thumb:hover { + background: oklch(0.6 0 0 / 50%); +} + +.dark .custom-scrollbar::-webkit-scrollbar-thumb { + background: oklch(0.5 0 0 / 40%); +} + +.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { + background: oklch(0.6 0 0 / 60%); +} + +/* Firefox scrollbar */ +.custom-scrollbar { + scrollbar-width: thin; + scrollbar-color: oklch(0.7 0 0 / 30%) transparent; +} + +.dark .custom-scrollbar { + scrollbar-color: oklch(0.5 0 0 / 40%) transparent; +} + +/* Hide scrollbar but keep functionality */ +.hide-scrollbar::-webkit-scrollbar { + display: none; +} + +.hide-scrollbar { + -ms-overflow-style: none; + scrollbar-width: none; +} + +/* ApexCharts tooltip fix */ +.apexcharts-tooltip { + background: transparent !important; + border: none !important; + box-shadow: none !important; + border-radius: 0 !important; + padding: 0 !important; +} + +.apexcharts-tooltip-title { + display: none !important; +} \ No newline at end of file diff --git a/web/package-lock.json b/web/package-lock.json index 7252eee..50d6a2d 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -8,8 +8,6 @@ "name": "web-ui", "version": "0.0.0", "dependencies": { - "@fontsource/geist-mono": "^5.2.7", - "@fontsource/geist-sans": "^5.2.5", "@fontsource/inter": "^5.2.8", "@fontsource/jetbrains-mono": "^5.2.8", "@guolao/vue-monaco-editor": "^1.6.0", @@ -578,24 +576,6 @@ } } }, - "node_modules/@fontsource/geist-mono": { - "version": "5.2.7", - "resolved": "https://registry.npmjs.org/@fontsource/geist-mono/-/geist-mono-5.2.7.tgz", - "integrity": "sha512-xVPVFISJg/K0VVd+aQN0Y7X/sw9hUcJPyDWFJ5GpyU3bHELhoRsJkPSRSHXW32mOi0xZCUQDOaPj1sqIFJ1FGg==", - "license": "OFL-1.1", - "funding": { - "url": "https://github.com/sponsors/ayuhito" - } - }, - "node_modules/@fontsource/geist-sans": { - "version": "5.2.5", - "resolved": "https://registry.npmjs.org/@fontsource/geist-sans/-/geist-sans-5.2.5.tgz", - "integrity": "sha512-anllOHyJbElRs9fV15TeDRqAeb1IKm4bSknPl6ZMoyPTx1BBy7logudcUwpNjmQLkzn4Q0JGQLRCUKJYoyST6A==", - "license": "OFL-1.1", - "funding": { - "url": "https://github.com/sponsors/ayuhito" - } - }, "node_modules/@fontsource/inter": { "version": "5.2.8", "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.2.8.tgz", diff --git a/web/package.json b/web/package.json index d560e1c..dc9b1c7 100644 --- a/web/package.json +++ b/web/package.json @@ -9,8 +9,6 @@ "preview": "vite preview" }, "dependencies": { - "@fontsource/geist-mono": "^5.2.7", - "@fontsource/geist-sans": "^5.2.5", "@fontsource/inter": "^5.2.8", "@fontsource/jetbrains-mono": "^5.2.8", "@guolao/vue-monaco-editor": "^1.6.0", diff --git a/web/src/assets/index.css b/web/src/assets/index.css index e4e1a38..be6ffdc 100644 --- a/web/src/assets/index.css +++ b/web/src/assets/index.css @@ -5,11 +5,6 @@ @import "@fontsource/inter/500.css"; @import "@fontsource/inter/600.css"; @import "@fontsource/inter/700.css"; -@import "@fontsource/geist-sans/400.css"; -@import "@fontsource/geist-sans/500.css"; -@import "@fontsource/geist-sans/600.css"; -@import "@fontsource/geist-sans/700.css"; -@import "@fontsource/geist-mono/400.css"; @import "@fontsource/jetbrains-mono/400.css"; @import "@fontsource/jetbrains-mono/500.css"; @@ -218,25 +213,20 @@ body { @apply bg-background text-foreground antialiased; - font-family: "Geist Sans", "Inter", system-ui, -apple-system, sans-serif; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; - line-height: 1.5rem; - letter-spacing: -0.02em; - font-feature-settings: "cv02", "cv03", "cv04", "cv11"; + line-height: 1.5; + letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } - h1, h2, h3, h4, h5, h6 { - @apply tracking-tighter font-semibold; - } - .font-code, .font-mono, code, pre { - font-family: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; + font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; } } @@ -248,30 +238,28 @@ body { font-size: 15px; font-weight: 450; - line-height: 1.5; letter-spacing: 0; - /* 移动端使用默认平滑,保持字体“厚度”与清晰度 */ + /* 移动端关闭 subpixel antialiasing,字体更实更清晰 */ -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } - /* 标题类在小屏下显著加重,增加力量感 */ + /* 标题类字体在小屏下同步增重 */ h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.01em; } - /* 正文与描述类文字同步增重,避免纤细感,提升识别度 */ + /* 正文段落、描述类文字增重 */ p, span:not([class*="icon"]), label, [class*="description"], - [class*="muted"], - .text-muted-foreground { - font-weight: 430; + [class*="muted"] { + font-weight: 420; } - /* 小号字专门增重,模拟截图中免责声明的稳重感 */ + /* 小号字在移动端专门增重,与 Windows 小字优化区分开 */ .text-xs { font-size: 0.8rem; font-weight: 500; @@ -280,19 +268,19 @@ .text-sm { font-size: 0.9rem; - font-weight: 480; - } - - /* 交互性元素与按钮清晰有力 */ - button, - [role="button"], - .font-medium { - font-weight: 600; - } - - /* 表格单元格保持厚实 */ - td, th { font-weight: 450; + letter-spacing: 0; + } + + /* 按钮文字增重,更易点击辨识 */ + button, + [role="button"] { + font-weight: 500; + } + + /* 表格单元格 */ + td, th { + font-weight: 430; } } @@ -573,6 +561,7 @@ input[type="time"]:hover::-webkit-calendar-picker-indicator { .dark .custom-scrollbar::-webkit-scrollbar-thumb { background: oklch(0.5 0 0 / 40%); + border-radius: 3px; } .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { diff --git a/web/src/layouts/MainLayout.vue b/web/src/layouts/MainLayout.vue index 6054810..c3bdfce 100644 --- a/web/src/layouts/MainLayout.vue +++ b/web/src/layouts/MainLayout.vue @@ -111,7 +111,7 @@ onMounted(() => {