92 lines
		
	
	
		
			1.5 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			92 lines
		
	
	
		
			1.5 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
| @charset "UTF-8";
 | |
| .outer {
 | |
|   flex-direction: column;
 | |
|   justify-content: center;
 | |
|   align-items: center;
 | |
|   width: 100%;
 | |
|   min-height: 100vh;
 | |
|   padding: 20px;
 | |
|   display: flex;
 | |
|   position: relative;
 | |
|   overflow: hidden;
 | |
| }
 | |
| 
 | |
| .offline-card {
 | |
|   background-color: #fff;
 | |
|   border: 1px solid #0000001a;
 | |
|   border-radius: 5px;
 | |
|   width: 100%;
 | |
|   max-width: 30em;
 | |
|   margin: 60px auto;
 | |
|   box-shadow: 0 0 10px #0000000d;
 | |
| }
 | |
| 
 | |
| .header {
 | |
|   color: #fff;
 | |
|   text-align: center;
 | |
|   background-color: var(--cassiopeia-color-primary);
 | |
|   background-image: linear-gradient(135deg, var(--cassiopeia-color-primary) 0%, var(--cassiopeia-color-hover) 100%);
 | |
|   border-radius: 5px 5px 0 0;
 | |
|   margin: 0;
 | |
|   padding: 1em 2em;
 | |
|   position: relative;
 | |
| }
 | |
| 
 | |
| [dir="rtl"] .header {
 | |
|   background-image: linear-gradient(135deg, var(--cassiopeia-color-hover) 0%, var(--cassiopeia-color-primary) 100%);
 | |
| }
 | |
| 
 | |
| .login {
 | |
|   padding: 40px 20px 20px;
 | |
| }
 | |
| 
 | |
| .form-control {
 | |
|   max-width: none;
 | |
| }
 | |
| 
 | |
| img {
 | |
|   border: 0;
 | |
|   max-width: 100%;
 | |
|   height: auto;
 | |
|   margin: 15px 0;
 | |
| }
 | |
| 
 | |
| form, fieldset {
 | |
|   margin: 0;
 | |
|   padding: 0;
 | |
| }
 | |
| 
 | |
| label {
 | |
|   margin: 0;
 | |
|   display: block;
 | |
| }
 | |
| 
 | |
| input[type="text"], input[type="password"] {
 | |
|   box-sizing: border-box;
 | |
|   width: 100%;
 | |
|   height: auto;
 | |
| }
 | |
| 
 | |
| input {
 | |
|   margin: .5em 0 1em;
 | |
| }
 | |
| 
 | |
| .logo-icon {
 | |
|   z-index: 1;
 | |
|   background-color: #fff;
 | |
|   border: 1px solid #0000000d;
 | |
|   border-radius: 50%;
 | |
|   margin-top: 2px;
 | |
|   padding: 12px;
 | |
|   position: absolute;
 | |
|   top: 100%;
 | |
|   left: 50%;
 | |
|   transform: translate(-50%, -50%);
 | |
|   box-shadow: 0 0 5px #00000013;
 | |
| }
 | |
| 
 | |
| .logo-icon svg {
 | |
|   width: 38px;
 | |
|   display: block;
 | |
| }
 |