54 lines
		
	
	
		
			1.0 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
			
		
		
	
	
			54 lines
		
	
	
		
			1.0 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
| .regeneration-indicator {
 | |
|   text-align: center;
 | |
|   font-size: 16px;
 | |
|   font-weight: 500;
 | |
|   color: lighten($ui-base-color, 16%);
 | |
|   background: $ui-base-color;
 | |
|   cursor: default;
 | |
|   display: flex;
 | |
|   flex: 1 1 auto;
 | |
|   align-items: center;
 | |
|   justify-content: center;
 | |
|   padding: 20px;
 | |
| 
 | |
|   & > div {
 | |
|     width: 100%;
 | |
|     background: transparent;
 | |
|     padding-top: 0;
 | |
|   }
 | |
| 
 | |
|   &__figure {
 | |
|     background: url('~flavours/glitch/images/elephant_ui_working.svg') no-repeat center 0;
 | |
|     width: 100%;
 | |
|     height: 160px;
 | |
|     background-size: contain;
 | |
|     position: absolute;
 | |
|     top: 50%;
 | |
|     left: 50%;
 | |
|     transform: translate(-50%, -50%);
 | |
|   }
 | |
| 
 | |
|   &.missing-indicator {
 | |
|     padding-top: 20px + 48px;
 | |
| 
 | |
|     .regeneration-indicator__figure {
 | |
|       background-image: url('~flavours/glitch/images/elephant_ui_disappointed.svg');
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   &__label {
 | |
|     margin-top: 200px;
 | |
| 
 | |
|     strong {
 | |
|       display: block;
 | |
|       margin-bottom: 10px;
 | |
|       color: lighten($ui-base-color, 34%);
 | |
|     }
 | |
| 
 | |
|     span {
 | |
|       font-size: 15px;
 | |
|       font-weight: 400;
 | |
|     }
 | |
|   }
 | |
| }
 |