jurassic-park-interface/sass/components/_video-screen.scss

66 lines
1.2 KiB
SCSS
Raw Normal View History

.control-panel__video-screen {
margin-bottom: 5px;
}
.video-screen {
background-color: #606971;
display: flex;
flex-direction: column;
align-items: center;
2020-06-01 18:50:36 +00:00
padding: 50px 20px;
}
.video-screen__loading-spinner {
width: 40px;
height: 40px;
position: relative;
border-radius: 50%;
overflow: hidden;
border: 1px solid black; /* borders on it too */
}
.video-screen__loading-spinner::before,
.video-screen__loading-spinner::after {
content: '';
position: absolute;
height: 100%;
width: 50%;
top: 0;
}
.video-screen__loading-spinner::before {
left: 0;
background: linear-gradient(#000e0d, #000e0d 50%, #f9fb07 50%);
}
.video-screen__loading-spinner::after {
left: 50%;
background: linear-gradient(#f9fb07, #f9fb07 50%, #000e0d 50%);
}
.video-screen_loading-spinner__wrapper {
background-color: #40c14c;
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
padding: 5px;
}
2020-06-01 18:50:36 +00:00
.video-screen__text-wrapper {
background-color: white;
border: 2px solid black;
padding: 5px;
}
.video-screen__header {
margin: 0;
font-style: italic;
text-transform: uppercase;
}
.video-screen__info-text {
2020-06-01 18:50:36 +00:00
font-style: italic;
text-transform: uppercase;
font-weight: bold;
}