Better init screen
This commit is contained in:
parent
034c96d070
commit
e166ad6780
@ -42,7 +42,7 @@ html
|
||||
| JavaScriptを有効にしてください
|
||||
br
|
||||
| Please turn on your JavaScript
|
||||
div#ini: p
|
||||
span .
|
||||
span .
|
||||
span .
|
||||
div#ini.
|
||||
<svg viewBox="0 0 50 50">
|
||||
<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" />
|
||||
</svg>
|
||||
|
@ -32,42 +32,30 @@ body > noscript {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
cursor: wait;
|
||||
}
|
||||
#ini > p {
|
||||
display: block;
|
||||
user-select: none;
|
||||
margin: 32px;
|
||||
font-size: 4em;
|
||||
color: #555;
|
||||
#ini > svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
animation: ini 0.6s infinite linear;
|
||||
}
|
||||
#ini > p > span {
|
||||
animation: ini 1.4s infinite ease-in-out both;
|
||||
}
|
||||
#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 {
|
||||
background: #191b22;
|
||||
}
|
||||
html[data-darkmode] #ini > p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@keyframes ini {
|
||||
0%, 80%, 100% {
|
||||
opacity: 1;
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
40% {
|
||||
opacity: 0;
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user