项目初始化
This commit is contained in:
jerry
39
sheep/scss/theme/_dark.scss
Normal file
39
sheep/scss/theme/_dark.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
// 核心主题样式文件
|
||||
@mixin theme-dark {
|
||||
// 背景色
|
||||
--ui-BG: #393939;
|
||||
--ui-BG-1: #333333;
|
||||
--ui-BG-2: #2c2c2c;
|
||||
--ui-BG-3: #292929;
|
||||
--ui-BG-4: #222222;
|
||||
|
||||
// 文本色
|
||||
--ui-TC: #ffffff;
|
||||
--ui-TC-1: #d4d4d4;
|
||||
--ui-TC-2: #919191;
|
||||
--ui-TC-3: #6a6a6a;
|
||||
--ui-TC-4: #474747;
|
||||
|
||||
// 模糊
|
||||
--ui-Blur: rgba(38, 38, 38, 0.98);
|
||||
--ui-Blur-1: rgba(38, 38, 38, 0.75);
|
||||
--ui-Blur-2: rgba(38, 38, 38, 0.25);
|
||||
--ui-Blur-3: rgba(38, 38, 38, 0.05);
|
||||
|
||||
// 边框
|
||||
--ui-Border: rgba(119, 119, 119, 0.25);
|
||||
--ui-Outline: rgba(255, 255, 255, 0.1);
|
||||
--ui-Line: rgba(119, 119, 119, 0.25);
|
||||
|
||||
// 透明与阴影
|
||||
--ui-Shadow: 0 0.5em 1em rgba(0, 0, 0, 0.45);
|
||||
--ui-Shadow-sm: 0 0.125em 0.25em rgba(0, 0, 0, 0.475);
|
||||
--ui-Shadow-lg: 0 1em 3em rgba(0, 0, 0, 0.475);
|
||||
--ui-Shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.475);
|
||||
|
||||
--ui-Shadow-opacity: 0.55;
|
||||
--ui-Shadow-opacity-sm: 0.175;
|
||||
--ui-Shadow-opacity-lg: 0.75;
|
||||
|
||||
--ui-BG-opacity: 0.1;
|
||||
}
|
||||
39
sheep/scss/theme/_light.scss
Normal file
39
sheep/scss/theme/_light.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
// 核心主题样式文件
|
||||
@mixin theme-light {
|
||||
// 背景色
|
||||
--ui-BG: #ffffff;
|
||||
--ui-BG-1: #f6f6f6;
|
||||
--ui-BG-2: #f1f1f1;
|
||||
--ui-BG-3: #e8e8e8;
|
||||
--ui-BG-4: #e0e0e0;
|
||||
|
||||
// 文本色
|
||||
--ui-TC: #303030;
|
||||
--ui-TC-1: #525252;
|
||||
--ui-TC-2: #777777;
|
||||
--ui-TC-3: #9e9e9e;
|
||||
--ui-TC-4: #c6c6c6;
|
||||
|
||||
// 模糊
|
||||
--ui-Blur: rgba(255, 255, 255, 0.98);
|
||||
--ui-Blur-1: rgba(255, 255, 255, 0.75);
|
||||
--ui-Blur-2: rgba(255, 255, 255, 0.25);
|
||||
--ui-Blur-3: rgba(255, 255, 255, 0.05);
|
||||
|
||||
// 边框
|
||||
--ui-Border: rgba(119, 119, 119, 0.25);
|
||||
--ui-Outline: rgba(0, 0, 0, 0.1);
|
||||
--ui-Line: rgba(119, 119, 119, 0.25);
|
||||
|
||||
// 透明与阴影
|
||||
--ui-Shadow: 0 0.5em 1em rgba(0, 0, 0, 0.15);
|
||||
--ui-Shadow-sm: 0 0.125em 0.25em rgba(0, 0, 0, 0.075);
|
||||
--ui-Shadow-lg: 0 1em 3em rgba(0, 0, 0, 0.175);
|
||||
--ui-Shadow-inset: inset 0 0.1em 0.2em rgba(0, 0, 0, 0.075);
|
||||
|
||||
--ui-Shadow-opacity: 0.45;
|
||||
--ui-Shadow-opacity-sm: 0.075;
|
||||
--ui-Shadow-opacity-lg: 0.65;
|
||||
|
||||
--ui-BG-opacity: 0.1;
|
||||
}
|
||||
68
sheep/scss/theme/_style.scss
Normal file
68
sheep/scss/theme/_style.scss
Normal file
@@ -0,0 +1,68 @@
|
||||
@import './light'; //浅蓝主题
|
||||
@import './dark'; //深蓝主题
|
||||
// 多主题
|
||||
.theme-light {
|
||||
@include theme-light;
|
||||
}
|
||||
.theme-dark {
|
||||
@include theme-dark;
|
||||
}
|
||||
.theme-auto {
|
||||
@include theme-light;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.theme-auto {
|
||||
@include theme-dark;
|
||||
}
|
||||
}
|
||||
|
||||
@each $value in ('', '-1', '-2', '-3', '-4') {
|
||||
// 背景色 + 文字色 ： 白色 + 默认色；
|
||||
.ui-BG#{$value} {
|
||||
background-color: var(--ui-BG#{$value}) !important;
|
||||
color: var(--ui-TC);
|
||||
}
|
||||
// 文字颜色
|
||||
.ui-TC#{$value} {
|
||||
color: var(--ui-TC#{$value}) !important;
|
||||
}
|
||||
// 主题色背景
|
||||
.ui-BG-Main#{$value} {
|
||||
background-color: var(--ui-BG-Main#{$value}) !important;
|
||||
color: var(--ui-BG-Main-TC) !important;
|
||||
}
|
||||
// 主题色渐变，横向
|
||||
.ui-BG-Main-Gradient {
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient)) !important;
|
||||
color: var(--ui-BG-Main-TC) !important;
|
||||
}
|
||||
// 主题色文字
|
||||
.ui-TC-Main#{$value} {
|
||||
color: var(--ui-BG-Main#{$value}) !important;
|
||||
}
|
||||
// 主题色阴影
|
||||
.ui-Shadow-Main {
|
||||
box-shadow: var(--ui-Main-box-shadow) !important;
|
||||
}
|
||||
.ui-BG-Main-light {
|
||||
background: var(----ui-BG-Main-light) !important;
|
||||
color: var(--ui-BG-Main#{$value}) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $colors {
|
||||
.main-#{$color} {
|
||||
--ui-BG-Main: #{$value};
|
||||
--ui-BG-Main-tag: #{rgba($value, 0.05)};
|
||||
--ui-BG-Main-gradient: #{rgba($value, 0.6)};
|
||||
--ui-BG-Main-light: #{rgba($value, 0.2)};
|
||||
--ui-BG-Main-opacity-1: #{rgba($value, 0.1)};
|
||||
--ui-BG-Main-opacity-4: #{rgba($value, 0.4)};
|
||||
--ui-Main-box-shadow: 0 0.2em 0.5em #{rgba($value, var(--ui-Shadow-opacity))};
|
||||
--ui-BG-Main-1: #{mix(rgba(255, 255, 255, 0.7), desaturate($value, 20%), 10%)};
|
||||
--ui-BG-Main-2: #{mix(rgba(255, 255, 255, 0.6), desaturate($value, 40%), 20%)};
|
||||
--ui-BG-Main-3: #{mix(rgba(119, 119, 119, 0.2), desaturate($value, 40%), 40%)};
|
||||
--ui-BG-Main-4: #{mix(rgba(119, 119, 119, 0.1), desaturate($value, 40%), 60%)};
|
||||
--ui-BG-Main-TC: #ffffff !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user