102 lines
2.3 KiB
SCSS
102 lines
2.3 KiB
SCSS
@use '../styles/variables' as vars;
|
|
@import '../styles/reset.scss';
|
|
@import '../styles/typography.scss';
|
|
@import '../styles/animations.scss';
|
|
|
|
// CSS 变量（用于运行时主题切换）
|
|
:root {
|
|
// 主色调
|
|
--color-primary: #{vars.$primary-color};
|
|
--color-primary-light: #{vars.$primary-light};
|
|
--color-primary-dark: #{vars.$primary-dark};
|
|
|
|
// 辅助色
|
|
--color-success: #{vars.$success-color};
|
|
--color-warning: #{vars.$warning-color};
|
|
--color-error: #{vars.$error-color};
|
|
--color-info: #{vars.$info-color};
|
|
|
|
// 中性色
|
|
--color-text-primary: #{vars.$text-primary};
|
|
--color-text-secondary: #{vars.$text-secondary};
|
|
--color-text-disabled: #{vars.$text-disabled};
|
|
--color-border: #{vars.$border-color};
|
|
--color-background: #{vars.$background-color};
|
|
--color-card: #{vars.$card-background};
|
|
--color-sidebar: #{vars.$sidebar-background};
|
|
|
|
// 语义色
|
|
--color-increase: #{vars.$increase-color};
|
|
--color-decrease: #{vars.$decrease-color};
|
|
|
|
// 字体
|
|
--font-family-base: #{vars.$font-family-base};
|
|
--font-family-number: #{vars.$font-family-number};
|
|
|
|
// 布局尺寸
|
|
--sidebar-width: #{vars.$sidebar-width};
|
|
--sidebar-collapsed-width: #{vars.$sidebar-collapsed-width};
|
|
--header-height: #{vars.$header-height};
|
|
--page-padding: #{vars.$page-padding};
|
|
}
|
|
|
|
// 基础样式
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-size: 16px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-family-base);
|
|
font-size: vars.$font-size-base;
|
|
line-height: vars.$line-height-base;
|
|
color: var(--color-text-primary);
|
|
background-color: var(--color-background);
|
|
}
|
|
|
|
// 自定义滚动条
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: vars.$border-color;
|
|
border-radius: 4px;
|
|
|
|
&:hover {
|
|
background-color: vars.$text-secondary;
|
|
}
|
|
}
|
|
|
|
// 选中文本颜色
|
|
::selection {
|
|
background-color: rgba(vars.$primary-color, 0.2);
|
|
color: vars.$text-primary;
|
|
}
|
|
|
|
// 焦点样式
|
|
:focus-visible {
|
|
outline: 2px solid vars.$primary-color;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
// 链接样式
|
|
a {
|
|
color: vars.$primary-color;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|