Better init screen
This commit is contained in:
		
							parent
							
								
									034c96d070
								
							
						
					
					
						commit
						e166ad6780
					
				
					 2 changed files with 18 additions and 30 deletions
				
			
		| 
						 | 
					@ -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…
	
	Add table
		Add a link
		
	
		Reference in a new issue