Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-01-31 10:31:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add auto dark mode loader screen

Browse Source
This commit is contained in:
Reckless_Satoshi 2022-09-20 07:21:19 -07:00
parent 3a07028c9e
commit e4ddeea39d
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
2 changed files with 312 additions and 294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/static/css/index.css
View File

@ -6,6 +6,24 @@ body {
font-family: 'Roboto'; font-family: 'Roboto';
} }
@media (prefers-color-scheme: dark) {
body {
background: rgb(0, 0, 0);
}
.loaderSpinner {
color: #90caf9;
}
.loaderSpinner:before{
background: rgb(0, 0, 0);
}
.loaderSpinner:after{
background: rgb(0, 0, 0);
}
.slider{
color: #fff;
}
}
#main { #main {
position: fixed; position: fixed;
width: 100%; width: 100%;

584
frontend/static/css/loader.css
View File

@ -11,320 +11,320 @@
text-align: center; text-align: center;
} }
.loaderSpinner, .loaderSpinner,
.loaderSpinner:before, .loaderSpinner:before,
.loaderSpinner:after { .loaderSpinner:after {
border-radius: 50%; border-radius: 50%;
}
.loaderSpinner {
color: #1976d2;
font-size: 11px;
text-indent: -99999em;
margin: 55px auto;
position: relative;
width: 10em;
height: 10em;
box-shadow: inset 0 0 0 1em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.loaderSpinner:before,
.loaderSpinner:after {
position: absolute;
content: '';
}
.loaderSpinner:before {
width: 5.2em;
height: 10.2em;
background: #ffffff;
border-radius: 9.2em 0 0 10.2em;
top: -0.1em;
left: -0.1em;
-webkit-transform-origin: 5.1em 5.1em;
transform-origin: 5.1em 5.1em;
-webkit-animation: load2 2s infinite ease 1.5s;
animation: load2 2s infinite ease 1.5s;
}
.loaderSpinner:after {
width: 5.2em;
height: 10.2em;
background: #ffffff;
border-radius: 0 10.2em 10.2em 0;
top: -0.1em;
left: 4.9em;
-webkit-transform-origin: 0.1em 5.1em;
transform-origin: 0.1em 5.1em;
-webkit-animation: load2 2s infinite ease;
animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
} }
.loaderSpinner { 100% {
color: #1976d2; -webkit-transform: rotate(360deg);
font-size: 11px; transform: rotate(360deg);
text-indent: -99999em;
margin: 55px auto;
position: relative;
width: 10em;
height: 10em;
box-shadow: inset 0 0 0 1em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
} }
.loaderSpinner:before, }
.loaderSpinner:after { @keyframes load2 {
position: absolute; 0% {
content: ''; -webkit-transform: rotate(0deg);
transform: rotate(0deg);
} }
.loaderSpinner:before { 100% {
width: 5.2em; -webkit-transform: rotate(360deg);
height: 10.2em; transform: rotate(360deg);
background: #ffffff;
border-radius: 9.2em 0 0 10.2em;
top: -0.1em;
left: -0.1em;
-webkit-transform-origin: 5.1em 5.1em;
transform-origin: 5.1em 5.1em;
-webkit-animation: load2 2s infinite ease 1.5s;
animation: load2 2s infinite ease 1.5s;
}
.loaderSpinner:after {
width: 5.2em;
height: 10.2em;
background: #ffffff;
border-radius: 0 10.2em 10.2em 0;
top: -0.1em;
left: 4.9em;
-webkit-transform-origin: 0.1em 5.1em;
transform-origin: 0.1em 5.1em;
-webkit-animation: load2 2s infinite ease;
animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
} }
}
.content-slider { .content-slider {
width: 100%; width: 100%;
height: 180px; height: 180px;
} }
.slider { .slider {
height: 140px; height: 140px;
width: 350px; width: 350px;
margin: 40px auto 0; margin: 40px auto 0;
overflow: visible; overflow: visible;
position: relative; position: relative;
} }
.mask { .mask {
overflow: hidden; overflow: hidden;
height: 140px; height: 140px;
} }
.slider ul { .slider ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
position: relative; position: relative;
} }
.slider li { .slider li {
text-align: center; text-align: center;
width: 350px; width: 350px;
height: 140px; height: 140px;
position: absolute; position: absolute;
top: -105px;
list-style: none;
}
.slider .quote {
text-align: center;
font-size: 20px;
}
.slider li.anim1 {
animation: cycle 12s linear infinite;
}
.slider li.anim2 {
animation: cycle2 12s linear infinite;
}
.slider li.anim3 {
animation: cycle3 12s linear infinite;
}
.slider li.anim4 {
animation: cycle4 12s linear infinite;
}
.slider li.anim5 {
animation: cycle5 12s linear infinite;
}
.slider:hover li {
animation-play-state: paused;
}
@keyframes cycle {
0% {
top: 0px;
}
4% {
top: 0px;
}
16% {
top: 0px;
opacity: 1;
z-index: 0;
}
20% {
top: 105px;
opacity: 0;
z-index: 0;
}
21% {
top: -105px; top: -105px;
list-style: none; opacity: 0;
z-index: -1;
} }
50% {
top: -105px;
opacity: 0;
z-index: -1;
}
92% {
top: -105px;
opacity: 0;
z-index: 0;
}
96% {
top: -105px;
opacity: 0;
}
100% {
top: 0px;
opacity: 1;
}
}
.slider .quote { @keyframes cycle2 {
text-align: center; 0% {
font-size: 20px; top: -105px;
opacity: 0;
} }
16% {
top: -105px;
opacity: 0;
}
20% {
top: 0px;
opacity: 1;
}
24% {
top: 0px;
opacity: 1;
}
36% {
top: 0px;
opacity: 1;
z-index: 0;
}
40% {
top: 105px;
opacity: 0;
z-index: 0;
}
41% {
top: -105px;
opacity: 0;
z-index: -1;
}
100% {
top: -105px;
opacity: 0;
z-index: -1;
}
}
.slider li.anim1 { @keyframes cycle3 {
animation: cycle 12s linear infinite; 0% {
top: -105px;
opacity: 0;
} }
36% {
top: -105px;
opacity: 0;
}
40% {
top: 0px;
opacity: 1;
}
44% {
top: 0px;
opacity: 1;
}
56% {
top: 0px;
opacity: 1;
z-index: 0;
}
60% {
top: 105px;
opacity: 0;
z-index: 0;
}
61% {
top: -105px;
opacity: 0;
z-index: -1;
}
100% {
top: -105px;
opacity: 0;
z-index: -1;
}
}
.slider li.anim2 { @keyframes cycle4 {
animation: cycle2 12s linear infinite; 0% {
top: -105px;
opacity: 0;
} }
56% {
top: -105px;
opacity: 0;
}
60% {
top: 0px;
opacity: 1;
}
64% {
top: 0px;
opacity: 1;
}
76% {
top: 0px;
opacity: 1;
z-index: 0;
}
80% {
top: 105px;
opacity: 0;
z-index: 0;
}
81% {
top: -105px;
opacity: 0;
z-index: -1;
}
100% {
top: -105px;
opacity: 0;
z-index: -1;
}
}
.slider li.anim3 { @keyframes cycle5 {
animation: cycle3 12s linear infinite; 0% {
top: -105px;
opacity: 0;
} }
76% {
.slider li.anim4 { top: -105px;
animation: cycle4 12s linear infinite; opacity: 0;
} }
80% {
.slider li.anim5 { top: 0px;
animation: cycle5 12s linear infinite; opacity: 1;
} }
84% {
.slider:hover li { top: 0px;
animation-play-state: paused; opacity: 1;
} }
96% {
@keyframes cycle { top: 0px;
0% { opacity: 1;
top: 0px; z-index: 0;
}
4% {
top: 0px;
}
16% {
top: 0px;
opacity: 1;
z-index: 0;
}
20% {
top: 105px;
opacity: 0;
z-index: 0;
}
21% {
top: -105px;
opacity: 0;
z-index: -1;
}
50% {
top: -105px;
opacity: 0;
z-index: -1;
}
92% {
top: -105px;
opacity: 0;
z-index: 0;
}
96% {
top: -105px;
opacity: 0;
}
100% {
top: 0px;
opacity: 1;
}
} }
100% {
@keyframes cycle2 { top: 105px;
0% { opacity: 0;
top: -105px; z-index: 0;
opacity: 0;
}
16% {
top: -105px;
opacity: 0;
}
20% {
top: 0px;
opacity: 1;
}
24% {
top: 0px;
opacity: 1;
}
36% {
top: 0px;
opacity: 1;
z-index: 0;
}
40% {
top: 105px;
opacity: 0;
z-index: 0;
}
41% {
top: -105px;
opacity: 0;
z-index: -1;
}
100% {
top: -105px;
opacity: 0;
z-index: -1;
}
}
@keyframes cycle3 {
0% {
top: -105px;
opacity: 0;
}
36% {
top: -105px;
opacity: 0;
}
40% {
top: 0px;
opacity: 1;
}
44% {
top: 0px;
opacity: 1;
}
56% {
top: 0px;
opacity: 1;
z-index: 0;
}
60% {
top: 105px;
opacity: 0;
z-index: 0;
}
61% {
top: -105px;
opacity: 0;
z-index: -1;
}
100% {
top: -105px;
opacity: 0;
z-index: -1;
}
}
@keyframes cycle4 {
0% {
top: -105px;
opacity: 0;
}
56% {
top: -105px;
opacity: 0;
}
60% {
top: 0px;
opacity: 1;
}
64% {
top: 0px;
opacity: 1;
}
76% {
top: 0px;
opacity: 1;
z-index: 0;
}
80% {
top: 105px;
opacity: 0;
z-index: 0;
}
81% {
top: -105px;
opacity: 0;
z-index: -1;
}
100% {
top: -105px;
opacity: 0;
z-index: -1;
}
}
@keyframes cycle5 {
0% {
top: -105px;
opacity: 0;
}
76% {
top: -105px;
opacity: 0;
}
80% {
top: 0px;
opacity: 1;
}
84% {
top: 0px;
opacity: 1;
}
96% {
top: 0px;
opacity: 1;
z-index: 0;
}
100% {
top: 105px;
opacity: 0;
z-index: 0;
}
} }
}