Bilibili-Evolved/registry/lib/components/style/dark-mode/_dark-definitions.scss
2023-04-08 20:45:37 +08:00

148 lines
3.7 KiB
SCSS

@mixin set-color($name, $level: '') {
$length: str-length($level);
@if $length == 1 or $length == 2 {
#{$name}: #{'#' + $level + $level + $level} !important;
} @else if $length == 3 or $length == 6 {
#{$name}: #{'#' + $level} !important;
} @else if $length == 0 {
#{$name}: transparent !important;
} @else {
#{$name}: #{'#' + $level} !important;
}
}
@mixin set-theme-color($name, $level: '') {
@if $level == '' {
#{$name}: var(--theme-color) !important;
} @else {
#{$name}: var(--theme-color-#{$level}) !important;
}
}
@mixin set-foreground-color($name, $level: '') {
@if $level == '' {
#{$name}: var(--foreground-color) !important;
} @else {
#{$name}: var(--foreground-color-#{$level}) !important;
}
}
@mixin background-color($level: '') {
@include set-color('background-color', $level);
}
@mixin color($level: '') {
@include set-color('color', $level);
}
@mixin background($level: '') {
@include set-color('background', $level);
}
@mixin border-color($level: '') {
@include set-color('border-color', $level);
}
@mixin fill($level: '') {
@include set-color('fill', $level);
}
@mixin stroke($level: '') {
@include set-color('stroke', $level);
}
@mixin theme-background-color($level: '') {
@include set-theme-color('background-color', $level);
}
@mixin theme-color($level: '') {
@include set-theme-color('color', $level);
}
@mixin theme-background($level: '') {
@include set-theme-color('background', $level);
}
@mixin theme-border-color($level: '') {
@include set-theme-color('border-color', $level);
}
@mixin theme-fill($level: '') {
@include set-theme-color('fill', $level);
}
@mixin theme-stroke($level: '') {
@include set-theme-color('stroke', $level);
}
$vip-color: 'FB7299';
@mixin vip-color() {
@include set-color('color', $vip-color);
}
@mixin vip-background-color() {
@include set-color('background-color', $vip-color);
}
@mixin foreground-background-color($level: '') {
@include set-foreground-color('background-color', $level);
}
@mixin foreground-color($level: '') {
@include set-foreground-color('color', $level);
}
@mixin foreground-background($level: '') {
@include set-foreground-color('background', $level);
}
@mixin foreground-border-color($level: '') {
@include set-foreground-color('border-color', $level);
}
@mixin foreground-fill($level: '') {
@include set-foreground-color('fill', $level);
}
@mixin to-white {
filter: brightness(0) invert(1) !important;
}
@mixin to-gray($invert: 0.666) {
filter: brightness(0) invert($invert) !important;
}
@mixin grayscale($value: 1) {
filter: grayscale($value) !important;
}
@mixin brightness($value: 1) {
filter: brightness($value) !important;
}
@mixin to-theme($from) {
filter: var(--#{$from}-image-filter) !important;
}
@mixin no-image {
background-image: none !important;
}
@mixin no-shadow {
box-shadow: none !important;
}
@mixin theme-shadow($lighter: true) {
@if $lighter {
box-shadow: 0px 1px 10px 0px var(--theme-color-30) !important;
} @else {
box-shadow: 0px 4px 16px 0px var(--theme-color-40) !important;
}
}
@mixin hide($hideLayout: true) {
@if $hideLayout {
display: none !important;
} @else {
visibility: hidden !important;
}
}
@mixin back-top-btn($btn-selector: '.back-top-btn', $arrow-selector: '.arrow-icon') {
#{$btn-selector} {
@include border-color();
@include background-color('3');
@if $arrow-selector {
#{$arrow-selector} {
@include color('a');
}
}
&:hover {
@include theme-background-color();
@if $arrow-selector {
#{$arrow-selector} {
@include foreground-color();
}
}
}
}
}
@function contains($class) {
@return "[class*='#{$class}']";
}