71 lines
1.3 KiB
SCSS
71 lines
1.3 KiB
SCSS
@mixin sizes() {
|
|
--emoji-padding: 0.5rem;
|
|
--emoji-size: 1.375rem;
|
|
--indicator-height: 3px;
|
|
--input-border-radius: 0.5rem;
|
|
--input-border-size: 1px;
|
|
--input-font-size: 1rem;
|
|
--input-line-height: 1.5;
|
|
--input-padding: 0.25rem;
|
|
--num-columns: 8;
|
|
--outline-size: 2px;
|
|
}
|
|
|
|
@mixin colors($dark) {
|
|
$bg: #fff;
|
|
$border: #e0e0e0;
|
|
$indicator: #385ac1;
|
|
$input-border: #999;
|
|
$input-color: #111;
|
|
$input-placeholder: #999;
|
|
$outline: #999;
|
|
|
|
|
|
@if $dark {
|
|
$bg: #222;
|
|
$border: #444;
|
|
$indicator: #5373ec;
|
|
$input-border: #ccc;
|
|
$input-color: #efefef;
|
|
$input-placeholder: #ccc;
|
|
$outline: #fff;
|
|
}
|
|
|
|
--background-color: #{$bg};
|
|
--border-color: #{$border};
|
|
--indicator-color: #{$indicator};
|
|
--input-border-color: #{$input-border};
|
|
--input-font-color: #{$input-color};
|
|
--input-placeholder-color: #{$input-placeholder};
|
|
--outline-color: #{$outline};
|
|
|
|
@if $dark {
|
|
--active-background-color: #{lighten($bg, 20%)};
|
|
--hover-background-color: #{lighten($bg, 15%)};
|
|
}
|
|
|
|
@else {
|
|
--active-background-color: #{darken($bg, 10%)};
|
|
--hover-background-color: #{darken($bg, 15%)};
|
|
}
|
|
}
|
|
|
|
:host {
|
|
@include sizes();
|
|
}
|
|
|
|
:host,
|
|
:host(.light) {
|
|
@include colors(false);
|
|
}
|
|
|
|
:host(.dark) {
|
|
@include colors(true);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:host {
|
|
@include colors(true);
|
|
}
|
|
}
|