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;
|
||
|
}
|
||
|
}
|
||
|
}
|