code-server/packages/web/src/index.scss

145 lines
2.2 KiB
SCSS
Raw Normal View History

2019-01-08 00:46:19 +00:00
html, body {
height: 100%;
margin: 0;
width: 100%;
}
#overlay {
background: rgba(0, 0, 0, 0.2);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
#overlay {
align-items: center;
background-color: #252526;
bottom: 0;
display: flex;
flex-direction: column;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
justify-content: center;
left: 0;
opacity: 1;
position: absolute;
right: 0;
top: 0;
transition: 150ms opacity ease;
z-index: 2;
}
#overlay>.message {
color: white;
margin-top: 10px;
opacity: 0.5;
}
#overlay.error>.message {
color: white;
opacity: 0.3;
}
#overlay>.activitybar {
background-color: rgb(44, 44, 44);
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 50px;
}
#overlay>.activitybar svg {
fill: white;
margin-left: 2px;
margin-top: 2px;
opacity: 0.3;
}
#overlay.error>#status {
opacity: 0;
}
#overlay>.statusbar {
background-color: rgb(0, 122, 204);
bottom: 0;
cursor: default;
height: 22px;
left: 0;
position: absolute;
right: 0;
}
#logo {
transform-style: preserve-3d;
}
#logo>svg {
fill: rgb(0, 122, 204);
opacity: 1;
width: 100px;
}
#status {
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
box-shadow: 0px 2px 10px -2px rgba(0, 0, 0, 0.75);
color: white;
font-size: 0.9em;
margin-top: 15px;
min-width: 100px;
position: relative;
transition: 300ms opacity ease;
}
#status>#progress {
background: rgba(0, 0, 0, 0.2);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
bottom: 0;
height: 3px;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
}
@-moz-keyframes statusProgress {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes statusProgress {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#status>#progress>#fill {
animation: statusProgress 2s ease infinite;
background-size: 400% 400%;
background: linear-gradient(270deg, #007acc, #0016cc);
height: 100%;
transition: 500ms width ease;
width: 0%;
}