101 lines
1.5 KiB
SCSS
101 lines
1.5 KiB
SCSS
/* general styles */
|
|
|
|
$round: 8px;
|
|
$round2: calc($round * 2);
|
|
$margin: 0.4rem;
|
|
$padding: 0.4rem;
|
|
$border-width: 2px;
|
|
$scale: 0.5rem;
|
|
|
|
@mixin animate {
|
|
transition: 200ms;
|
|
}
|
|
|
|
* {
|
|
color: $fg;
|
|
}
|
|
|
|
/* mixins */
|
|
@mixin window-rounding {
|
|
border-radius: $round2;
|
|
}
|
|
|
|
@mixin rounding {
|
|
border-radius: calc($round2 - $padding - $border-width);
|
|
}
|
|
|
|
@mixin window-box {
|
|
@include rounding;
|
|
|
|
background: $surface;
|
|
box-shadow: 0 1px 5px -5px rgba(0, 0, 0, 0.5);
|
|
margin: $margin;
|
|
padding: $padding;
|
|
}
|
|
|
|
@mixin window {
|
|
@include border;
|
|
@include window-rounding;
|
|
|
|
background: $bg;
|
|
margin: 5px 10px 15px;
|
|
padding: $padding;
|
|
}
|
|
|
|
tooltip {
|
|
background: $tooltip-bg;
|
|
box-shadow:
|
|
inset 0 0 0 1px rgba(255, 255, 255, 0.1),
|
|
0 0 rgba(0, 0, 0, 0.4);
|
|
border-radius: $round;
|
|
}
|
|
|
|
/* scales & progress bars */
|
|
scale,
|
|
progressbar {
|
|
trough {
|
|
background-color: $surface;
|
|
border-radius: $scale;
|
|
min-width: calc($scale * 10);
|
|
padding: 0 calc($scale / 2);
|
|
}
|
|
|
|
highlight,
|
|
progress {
|
|
background: $overlay;
|
|
border-radius: $scale;
|
|
margin: 0 calc(0px - $scale / 2);
|
|
min-height: $scale;
|
|
}
|
|
}
|
|
|
|
@mixin button-active {
|
|
@include animate;
|
|
background: $button-enabled;
|
|
border-radius: 5rem;
|
|
padding: 0.4rem;
|
|
|
|
&:hover {
|
|
background: $button-enabled-hover;
|
|
}
|
|
}
|
|
|
|
@mixin button {
|
|
@include animate;
|
|
background: $button-disabled;
|
|
border-radius: 5rem;
|
|
padding: 0.4rem;
|
|
|
|
&:hover {
|
|
background: $button-disabled-hover;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
@include button-active;
|
|
}
|
|
|
|
.button.disabled {
|
|
@include button;
|
|
}
|