mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-12-21 13:45:44 +01:00
97896cadef
Allowing up to 4 decimal places in order to get 13px from the 16px default size. Having "@extend" come before "@include" and other rules to minimize its use being overlooked. Extending classes and placeholders can lead to some tricky rendered styles, so the use definitely needs to be done judiciously.
95 lines
2.1 KiB
SCSS
95 lines
2.1 KiB
SCSS
@import "mixins";
|
|
@import "reset";
|
|
@import "theme";
|
|
|
|
@include keyframes(LOADERSPINNER) {
|
|
0% {
|
|
#{$browser}transform: translate(-50%, -50%) rotate(0deg);
|
|
}
|
|
100% {
|
|
#{$browser}transform: translate(-50%, -50%) rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@include keyframes(LOADERLABEL) {
|
|
0% {
|
|
opacity: 1.0;
|
|
#{$browser}transform: translate(-50%, -50%) scale(1.0);
|
|
}
|
|
5% {
|
|
opacity: 0.5;
|
|
#{$browser}transform: translate(-50%, -50%) scale(0.5);
|
|
}
|
|
95% {
|
|
opacity: 0.5;
|
|
#{$browser}transform: translate(-50%, -50%) scale(0.5);
|
|
}
|
|
100% {
|
|
opacity: 1.0;
|
|
#{$browser}transform: translate(-50%, -50%) scale(1.0);
|
|
}
|
|
}
|
|
|
|
.loaderoverlay {
|
|
$spinnerBoxSize: 200px;
|
|
$themeColor: #6f3;
|
|
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #000;
|
|
color: $themeColor;
|
|
|
|
%spinnerBox {
|
|
border: 20px solid rgba(0, 0, 0, 0);
|
|
border-top-color: $themeColor;
|
|
border-bottom-color: $themeColor;
|
|
border-radius: 1000px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
}
|
|
|
|
.loaderspinner:before,
|
|
.loaderspinner:after {
|
|
content: "";
|
|
}
|
|
|
|
.loaderspinner {
|
|
@extend %spinnerBox;
|
|
@include animation(LOADERSPINNER 5s linear infinite);
|
|
|
|
width: $spinnerBoxSize;
|
|
height: $spinnerBoxSize;
|
|
}
|
|
|
|
.loaderspinner:before {
|
|
@extend %spinnerBox;
|
|
@include animation(LOADERSPINNER 10s linear infinite);
|
|
|
|
width: $spinnerBoxSize * 0.8;
|
|
height: $spinnerBoxSize * 0.8;
|
|
}
|
|
|
|
.loaderspinner:after {
|
|
@extend %spinnerBox;
|
|
@include animation(LOADERSPINNER 5s linear infinite);
|
|
|
|
width: $spinnerBoxSize * 0.6;
|
|
height: $spinnerBoxSize * 0.6;
|
|
}
|
|
|
|
.loaderlabel {
|
|
@include animation(LOADERLABEL 5s linear infinite);
|
|
|
|
text-transform: uppercase;
|
|
font-family: sans-serif;
|
|
font-size: $defaultFontSize * 1.375;
|
|
font-weight: 700;
|
|
letter-spacing: 2px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
}
|
|
}
|