Better init screen
This commit is contained in:
parent
034c96d070
commit
e166ad6780
|
@ -42,7 +42,7 @@ html
|
||||||
| JavaScriptを有効にしてください
|
| JavaScriptを有効にしてください
|
||||||
br
|
br
|
||||||
| Please turn on your JavaScript
|
| Please turn on your JavaScript
|
||||||
div#ini: p
|
div#ini.
|
||||||
span .
|
<svg viewBox="0 0 50 50">
|
||||||
span .
|
<path fill=#{themeColor} d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" />
|
||||||
span .
|
</svg>
|
||||||
|
|
|
@ -32,42 +32,30 @@ body > noscript {
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
text-align: center;
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
cursor: wait;
|
cursor: wait;
|
||||||
}
|
}
|
||||||
#ini > p {
|
#ini > svg {
|
||||||
display: block;
|
position: absolute;
|
||||||
user-select: none;
|
top: 0;
|
||||||
margin: 32px;
|
right: 0;
|
||||||
font-size: 4em;
|
bottom: 0;
|
||||||
color: #555;
|
left: 0;
|
||||||
}
|
margin: auto;
|
||||||
#ini > p > span {
|
width: 64px;
|
||||||
animation: ini 1.4s infinite ease-in-out both;
|
height: 64px;
|
||||||
}
|
animation: ini 0.6s infinite linear;
|
||||||
#ini > p > span:nth-child(1) {
|
|
||||||
animation-delay: 0s;
|
|
||||||
}
|
|
||||||
#ini > p > span:nth-child(2) {
|
|
||||||
animation-delay: 0.16s;
|
|
||||||
}
|
|
||||||
#ini > p > span:nth-child(3) {
|
|
||||||
animation-delay: 0.32s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-darkmode] #ini {
|
html[data-darkmode] #ini {
|
||||||
background: #191b22;
|
background: #191b22;
|
||||||
}
|
}
|
||||||
html[data-darkmode] #ini > p {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes ini {
|
@keyframes ini {
|
||||||
0%, 80%, 100% {
|
from {
|
||||||
opacity: 1;
|
transform: rotate(0deg);
|
||||||
}
|
}
|
||||||
40% {
|
to {
|
||||||
opacity: 0;
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue