mirror of
https://github.com/RoboSats/robosats.git
synced 2024-12-25 05:12:18 +03:00
Add auto dark mode loader screen
This commit is contained in:
parent
3a07028c9e
commit
e4ddeea39d
@ -6,6 +6,24 @@ body {
|
||||
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 {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
|
@ -11,12 +11,12 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loaderSpinner,
|
||||
.loaderSpinner:before,
|
||||
.loaderSpinner:after {
|
||||
.loaderSpinner,
|
||||
.loaderSpinner:before,
|
||||
.loaderSpinner:after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.loaderSpinner {
|
||||
}
|
||||
.loaderSpinner {
|
||||
color: #1976d2;
|
||||
font-size: 11px;
|
||||
text-indent: -99999em;
|
||||
@ -28,13 +28,13 @@
|
||||
-webkit-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.loaderSpinner:before,
|
||||
.loaderSpinner:after {
|
||||
}
|
||||
.loaderSpinner:before,
|
||||
.loaderSpinner:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
}
|
||||
.loaderSpinner:before {
|
||||
}
|
||||
.loaderSpinner:before {
|
||||
width: 5.2em;
|
||||
height: 10.2em;
|
||||
background: #ffffff;
|
||||
@ -45,8 +45,8 @@
|
||||
transform-origin: 5.1em 5.1em;
|
||||
-webkit-animation: load2 2s infinite ease 1.5s;
|
||||
animation: load2 2s infinite ease 1.5s;
|
||||
}
|
||||
.loaderSpinner:after {
|
||||
}
|
||||
.loaderSpinner:after {
|
||||
width: 5.2em;
|
||||
height: 10.2em;
|
||||
background: #ffffff;
|
||||
@ -57,8 +57,8 @@
|
||||
transform-origin: 0.1em 5.1em;
|
||||
-webkit-animation: load2 2s infinite ease;
|
||||
animation: load2 2s infinite ease;
|
||||
}
|
||||
@-webkit-keyframes load2 {
|
||||
}
|
||||
@-webkit-keyframes load2 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
@ -67,8 +67,8 @@
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes load2 {
|
||||
}
|
||||
@keyframes load2 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
@ -77,71 +77,71 @@
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-slider {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.slider {
|
||||
.slider {
|
||||
height: 140px;
|
||||
width: 350px;
|
||||
margin: 40px auto 0;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.mask {
|
||||
.mask {
|
||||
overflow: hidden;
|
||||
height: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
.slider ul {
|
||||
.slider ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.slider li {
|
||||
.slider li {
|
||||
text-align: center;
|
||||
width: 350px;
|
||||
height: 140px;
|
||||
position: absolute;
|
||||
top: -105px;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.slider .quote {
|
||||
.slider .quote {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.slider li.anim1 {
|
||||
.slider li.anim1 {
|
||||
animation: cycle 12s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.slider li.anim2 {
|
||||
.slider li.anim2 {
|
||||
animation: cycle2 12s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.slider li.anim3 {
|
||||
.slider li.anim3 {
|
||||
animation: cycle3 12s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.slider li.anim4 {
|
||||
.slider li.anim4 {
|
||||
animation: cycle4 12s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.slider li.anim5 {
|
||||
.slider li.anim5 {
|
||||
animation: cycle5 12s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.slider:hover li {
|
||||
.slider:hover li {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cycle {
|
||||
@keyframes cycle {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
@ -181,9 +181,9 @@
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cycle2 {
|
||||
@keyframes cycle2 {
|
||||
0% {
|
||||
top: -105px;
|
||||
opacity: 0;
|
||||
@ -220,9 +220,9 @@
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cycle3 {
|
||||
@keyframes cycle3 {
|
||||
0% {
|
||||
top: -105px;
|
||||
opacity: 0;
|
||||
@ -259,9 +259,9 @@
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cycle4 {
|
||||
@keyframes cycle4 {
|
||||
0% {
|
||||
top: -105px;
|
||||
opacity: 0;
|
||||
@ -298,9 +298,9 @@
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cycle5 {
|
||||
@keyframes cycle5 {
|
||||
0% {
|
||||
top: -105px;
|
||||
opacity: 0;
|
||||
@ -327,4 +327,4 @@
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user