bitburner-src/css/loader.scss

112 lines
2.2 KiB
SCSS
Raw Normal View History

@import "mixins";
@import "reset";
@import "theme";
2017-07-22 00:54:55 +02:00
@include keyframes(LOADERSPINNER) {
2021-09-05 01:09:30 +02:00
0% {
#{$browser}transform: translate(-50%, -50%) rotate(0deg);
}
100% {
#{$browser}transform: translate(-50%, -50%) rotate(360deg);
}
2017-07-22 00:54:55 +02:00
}
@include keyframes(LOADERLABEL) {
2021-09-05 01:09:30 +02:00
0% {
opacity: 1;
#{$browser}transform: translate(-50%, -50%) scale(1);
}
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;
#{$browser}transform: translate(-50%, -50%) scale(1);
}
2017-07-22 00:54:55 +02:00
}
.loaderoverlay {
2021-09-05 01:09:30 +02:00
$spinnerBoxSize: 200px;
$themeColor: #6f3;
2021-09-05 01:09:30 +02:00
position: absolute;
width: 100%;
height: 100%;
background: #000;
color: $themeColor;
2021-09-05 01:09:30 +02:00
%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%;
}
2021-09-05 01:09:30 +02:00
.loaderspinner:before,
.loaderspinner:after {
content: "";
}
2021-09-05 01:09:30 +02:00
.loaderspinner {
@extend %spinnerBox;
@include animation(LOADERSPINNER 5s linear infinite);
2021-09-05 01:09:30 +02:00
width: $spinnerBoxSize;
height: $spinnerBoxSize;
}
2021-09-05 01:09:30 +02:00
.loaderspinner:before {
@extend %spinnerBox;
@include animation(LOADERSPINNER 10s linear infinite);
2021-09-05 01:09:30 +02:00
width: $spinnerBoxSize * 0.8;
height: $spinnerBoxSize * 0.8;
}
2021-09-05 01:09:30 +02:00
.loaderspinner:after {
@extend %spinnerBox;
@include animation(LOADERSPINNER 5s linear infinite);
2021-09-05 01:09:30 +02:00
width: $spinnerBoxSize * 0.6;
height: $spinnerBoxSize * 0.6;
}
2021-09-05 01:09:30 +02:00
.loaderlabel {
@include animation(LOADERLABEL 5s linear infinite);
2021-09-05 01:09:30 +02:00
text-transform: uppercase;
font-family: sans-serif;
font-size: $defaultFontSize * 1.375;
font-weight: 700;
letter-spacing: 2px;
position: absolute;
top: 50%;
left: 50%;
}
2017-07-22 00:54:55 +02:00
}
.killAllMessage {
2021-09-05 01:09:30 +02:00
position: absolute;
top: 95%;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
2018-09-12 18:19:59 +02:00
.killAllMessageWrapperHidden {
2021-09-05 01:09:30 +02:00
display: none;
}
2018-09-12 18:19:59 +02:00
.killAllMessageWrapperShow {
2021-09-05 01:09:30 +02:00
display: block;
2018-09-12 18:19:59 +02:00
}