Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-11-18 21:53:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

[refactor] Refactored the loader; inlined the customizations

Browse Source
This commit is contained in:
Steven Evans 2018-07-16 13:30:54 -04:00
parent ec0a2f1903
commit 94e2c58d7f
2 changed files with 133 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
css/_mixins.scss
View File

@ -1,3 +1,11 @@
@mixin animation($property) {
-webkit-animation: $property;
-moz-animation: $property;
-ms-animation: $property;
-o-animation: $property;
animation: $property;
}
@mixin borderRadius($property) { @mixin borderRadius($property) {
-webkit-border-radius: $property; -webkit-border-radius: $property;
-moz-border-radius: $property; -moz-border-radius: $property;
@ -9,3 +17,38 @@
-moz-box-shadow: $value; -moz-box-shadow: $value;
box-shadow: $value; box-shadow: $value;
} }
@mixin keyframes($animationName) {
@-webkit-keyframes #{$animationName} {
$browser: '-webkit-' !global;
@content;
}
@-moz-keyframes #{$animationName} {
$browser: '-moz-' !global;
@content;
}
@-ms-keyframes #{$animationName} {
$browser: '-ms-' !global;
@content;
}
@-o-keyframes #{$animationName} {
$browser: '-o-' !global;
@content;
}
@keyframes #{$animationName} {
$browser: '' !global;
@content;
}
}
@mixin transform($property) {
-webkit-transform: $property;
-moz-transform: $property;
-ms-transform: $property;
-o-transform: $property;
transform: $property;
}

216
css/loader.scss
View File

@ -1,53 +1,31 @@
@-webkit-keyframes LOADERSPINNER { @import "mixins";
0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); }
100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); } @include keyframes(LOADERSPINNER) {
} 0% {
@-moz-keyframes LOADERSPINNER { #{$browser}transform: translate(-50%, -50%) rotate(0deg);
0% { -moz-transform: translate(-50%, -50%) rotate(0deg); } }
100% { -moz-transform: translate(-50%, -50%) rotate(360deg); } 100% {
} #{$browser}transform: translate(-50%, -50%) rotate(360deg);
@-ms-keyframes LOADERSPINNER { }
0% { -ms-transform: translate(-50%, -50%) rotate(0deg); }
100% { -ms-transform: translate(-50%, -50%) rotate(360deg); }
}
@-o-keyframes LOADERSPINNER {
0% { -o-transform: translate(-50%, -50%) rotate(0deg); }
100% { -o-transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes LOADERSPINNER {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
} }
@-webkit-keyframes LOADERLABEL { @include keyframes(LOADERLABEL) {
0% { opacity: 1.0; -webkit-transform: translate(-50%, -50%) scale(1.0); } 0% {
5% { opacity: 0.5; -webkit-transform: translate(-50%, -50%) scale(0.5); } opacity: 1.0;
95% { opacity: 0.5; -webkit-transform: translate(-50%, -50%) scale(0.5); } #{$browser}transform: translate(-50%, -50%) scale(1.0);
100% { opacity: 1.0; -webkit-transform: translate(-50%, -50%) scale(1.0); } }
} 5% {
@-moz-keyframes LOADERLABEL { opacity: 0.5;
0% { opacity: 1.0; -moz-transform: translate(-50%, -50%) scale(1.0); } #{$browser}transform: translate(-50%, -50%) scale(0.5);
5% { opacity: 0.5; -moz-transform: translate(-50%, -50%) scale(0.5); } }
95% { opacity: 0.5; -moz-transform: translate(-50%, -50%) scale(0.5); } 95% {
100% { opacity: 1.0; -moz-transform: translate(-50%, -50%) scale(1.0); } opacity: 0.5;
} #{$browser}transform: translate(-50%, -50%) scale(0.5);
@-ms-keyframes LOADERLABEL { }
0% { opacity: 1.0; -ms-transform: translate(-50%, -50%) scale(1.0); } 100% {
5% { opacity: 0.5; -ms-transform: translate(-50%, -50%) scale(0.5); } opacity: 1.0;
95% { opacity: 0.5; -ms-transform: translate(-50%, -50%) scale(0.5); } #{$browser}transform: translate(-50%, -50%) scale(1.0);
100% { opacity: 1.0; -ms-transform: translate(-50%, -50%) scale(1.0); } }
}
@-o-keyframes LOADERLABEL {
0% { opacity: 1.0; -o-transform: translate(-50%, -50%) scale(1.0); }
5% { opacity: 0.5; -o-transform: translate(-50%, -50%) scale(0.5); }
95% { opacity: 0.5; -o-transform: translate(-50%, -50%) scale(0.5); }
100% { opacity: 1.0; -o-transform: translate(-50%, -50%) scale(1.0); }
}
@keyframes LOADERLABEL {
0% { opacity: 1.0; transform: translate(-50%, -50%) scale(1.0); }
5% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.5); }
95% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.5); }
100% { opacity: 1.0; transform: translate(-50%, -50%) scale(1.0); }
} }
*, *:before, *:after { *, *:before, *:after {
@ -56,93 +34,79 @@
box-sizing: border-box; box-sizing: border-box;
vertical-align: top; vertical-align: top;
} }
.loaderoverlay { .loaderoverlay {
$spinnerBoxSize: 200px;
$themeColor: #6f3;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(255, 255, 255, 1.0); background: #000;
} color: $themeColor;
.loaderoverlay .loaderspinner,
.loaderoverlay .loaderspinner:before, %spinnerBox {
.loaderoverlay .loaderspinner:after { border: 20px solid rgba(0, 0, 0, 0);
border: 20px solid rgba(0, 0, 0, 0); border-top-color: $themeColor;
border-top: 20px solid #ccc; border-bottom-color: $themeColor;
border-bottom: 20px solid #ccc; border-radius: 1000px;
border-radius: 1000px; position: absolute;
position: absolute; top: 50%;
top: 50%; left: 50%;
left: 50%; }
}
.loaderoverlay .loaderspinner:before, .loaderspinner:before,
.loaderoverlay .loaderspinner:after { .loaderspinner:after {
content: ""; content: "";
} }
.loaderoverlay .loaderspinner {
width: 200px; .loaderspinner {
height: 200px; @include animation(LOADERSPINNER 5s linear infinite);
-webkit-animation: LOADERSPINNER 5s linear infinite;
-moz-animation: LOADERSPINNER 5s linear infinite; width: $spinnerBoxSize;
-ms-animation: LOADERSPINNER 5s linear infinite; height: $spinnerBoxSize;
-o-animation: LOADERSPINNER 5s linear infinite;
animation: LOADERSPINNER 5s linear infinite; @extend %spinnerBox;
} }
.loaderoverlay .loaderspinner:before {
width: 160px; .loaderspinner:before {
height: 160px; @include animation(LOADERSPINNER 10s linear infinite);
-webkit-animation: LOADERSPINNER 10s linear infinite;
-moz-animation: LOADERSPINNER 10s linear infinite; width: $spinnerBoxSize * 0.8;
-ms-animation: LOADERSPINNER 10s linear infinite; height: $spinnerBoxSize * 0.8;
-o-animation: LOADERSPINNER 10s linear infinite;
animation: LOADERSPINNER 10s linear infinite; @extend %spinnerBox;
} }
.loaderoverlay .loaderspinner:after {
width: 120px; .loaderspinner:after {
height: 120px; @include animation(LOADERSPINNER 5s linear infinite);
-webkit-animation: LOADERSPINNER 5s linear infinite;
-moz-animation: LOADERSPINNER 5s linear infinite; width: $spinnerBoxSize * 0.6;
-ms-animation: LOADERSPINNER 5s linear infinite; height: $spinnerBoxSize * 0.6;
-o-animation: LOADERSPINNER 5s linear infinite;
animation: LOADERSPINNER 5s linear infinite; @extend %spinnerBox;
} }
.loaderoverlay .loaderlabel {
color: #6f3; .loaderlabel {
text-transform: uppercase; @include animation(LOADERLABEL 5s linear infinite);
font-family: sans-serif;
font-size: 22px; text-transform: uppercase;
font-weight: 700; font-family: sans-serif;
letter-spacing: 2px; font-size: 22px;
position: absolute; font-weight: 700;
top: 50%; letter-spacing: 2px;
left: 50%; position: absolute;
-webkit-animation: LOADERLABEL 5s linear infinite; top: 50%;
-moz-animation: LOADERLABEL 5s linear infinite; left: 50%;
-ms-animation: LOADERLABEL 5s linear infinite; }
-o-animation: LOADERLABEL 5s linear infinite;
animation: LOADERLABEL 5s linear infinite;
} }
button[type="button"] { button[type="button"] {
@include transform(translateX(-50%));
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
bottom: 10px; bottom: 10px;
left: 50%; left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
/* Customize */
.loaderoverlay {
background: #000;
}
.loaderoverlay .loaderspinner,
.loaderoverlay .loaderspinner:before,
.loaderoverlay .loaderspinner:after {
border-top-color: #6f3 !important;
border-bottom-color: #6f3 !important;
}
.loaderoverlay .loaderlabel {
color: #6f3;
} }