171 lines
3.3 KiB
SCSS
171 lines
3.3 KiB
SCSS
@mixin scheme($property, $light-value, $dark-value) {
|
|
#{$property}: $light-value;
|
|
@media (prefers-color-scheme: dark) {
|
|
#{$property}: $dark-value;
|
|
}
|
|
}
|
|
|
|
body {
|
|
background: transparent;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
font-size: 15px;
|
|
font-family: var(--sans-serif);
|
|
}
|
|
:root {
|
|
--page-background: #fff;
|
|
--color: #000;
|
|
--titlebar-height: 46px;
|
|
--titlebar-height: 0px;
|
|
--label-background: #ddd;
|
|
--selected-background: #d5d5d5;
|
|
--hover-background: #ddd;
|
|
--border-color: #e3e3e3;
|
|
--sans-serif: -apple-system, BlinkMacSystemFont, system-ui, "Roboto", "Oxygen",
|
|
"Cantarell", "Droid Sans", "Helvetica Neue", "Noto Sans CJK JP", sans-serif;
|
|
--monospace: D2Coding, "source-code-pro", Menlo, Monaco, Consolas, "Courier New",
|
|
monospace;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root.mac {
|
|
--page-background: #f7f7f7;
|
|
}
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#app {
|
|
height: 100%;
|
|
}
|
|
|
|
#app {
|
|
background-color: var(--page-background);
|
|
position: relative;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--color: #fff;
|
|
--label-background: #353535;
|
|
--selected-background: #353535;
|
|
--border-color: #333;
|
|
--hover-background: #222;
|
|
--page-background: #292929;
|
|
}
|
|
body {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
pre,
|
|
code {
|
|
font-family: var(--monospace);
|
|
}
|
|
|
|
input {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
}
|
|
@mixin input {
|
|
@include scheme(background-color, #fff, #2d2d2d);
|
|
border-radius: 6px;
|
|
border: 1px solid #fff;
|
|
@include scheme(border-color, #cdc7c2, #1b1b1b);
|
|
transition: 0.1s;
|
|
&:focus {
|
|
@include scheme(border-color, #3584e480, #15539e);
|
|
}
|
|
}
|
|
|
|
input[type="search"],
|
|
input[type="text"],
|
|
input[type="number"],
|
|
input[type="password"] {
|
|
@include input;
|
|
border-radius: 6px;
|
|
color: inherit;
|
|
outline: none;
|
|
padding: 7px 8px;
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
input[type="checkbox" i] {
|
|
@include input;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
|
|
inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
|
|
padding: 9px;
|
|
border-radius: 3px;
|
|
appearance: none;
|
|
position: relative;
|
|
&:checked:after {
|
|
content: "\2714";
|
|
font-size: 1rem;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 3px;
|
|
color: var(--color);
|
|
}
|
|
}
|
|
|
|
button,
|
|
select,
|
|
.button {
|
|
@include scheme(background-color, #f6f5f4, #333);
|
|
border-radius: 4px;
|
|
border: 1px solid;
|
|
@include scheme(border-color, #cdc7c2, #1b1b1b);
|
|
color: inherit;
|
|
font-family: inherit;
|
|
&:hover {
|
|
@include scheme(background-color, #f9f9f8, #363636);
|
|
}
|
|
&:active {
|
|
@include scheme(background-color, #d6d1cd, #292929);
|
|
}
|
|
}
|
|
button {
|
|
padding: 8px 15px;
|
|
box-shadow: rgb(0 0 0 / 7%) 0px 1px 2px;
|
|
transition: 0.1s;
|
|
}
|
|
button[type="submit"] {
|
|
background-color: #15539e;
|
|
color: #fff;
|
|
}
|
|
select {
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
// #region color
|
|
.color-primary,
|
|
.color-secondary,
|
|
.color-info,
|
|
.color-danger {
|
|
@include scheme(color, #fff, #fafafa);
|
|
}
|
|
.color-success,
|
|
.color-warning {
|
|
@include scheme(color, #000, #111);
|
|
}
|
|
.color-primary {
|
|
@include scheme(background-color, #0b5ed7, #375a7f);
|
|
}
|
|
.color-secondary {
|
|
@include scheme(background-color, #6c757d, #626262);
|
|
}
|
|
.color-success {
|
|
@include scheme(background-color, #198754, #00bc8c);
|
|
}
|
|
.color-info {
|
|
@include scheme(background-color, #0dcaf0, #17a2b8);
|
|
}
|
|
.color-warning {
|
|
@include scheme(background-color, #ffc107, #f39c12);
|
|
}
|
|
.color-danger {
|
|
@include scheme(background-color, #dc3545, #e74c3c);
|
|
}
|
|
// #endregion
|