125 lines
2.3 KiB
SCSS
125 lines
2.3 KiB
SCSS
@import "../../../styles/global";
|
|
@import "../../../styles/mixins";
|
|
header {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
z-index: 3;
|
|
|
|
.status {
|
|
@include fluid-font-size(1.25rem);
|
|
margin: -0.5em 0 -0.5em 1em;
|
|
animation: 1000ms fade-in;
|
|
|
|
> div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.network {
|
|
display: grid;
|
|
|
|
> div {
|
|
grid-column-start: 1;
|
|
grid-row-start: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
transition: opacity 500ms;
|
|
}
|
|
|
|
.connecting {
|
|
color: #edca4f;
|
|
z-index: 2;
|
|
|
|
.icon {
|
|
animation: 5000ms rotate-full;
|
|
}
|
|
}
|
|
|
|
.connected {
|
|
color: #64c555;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.user-count {
|
|
@include fluid-font-size(1rem);
|
|
color: #8e8e8e;
|
|
height: 1.5em;
|
|
padding-top: 0.3em;
|
|
transition: height 500ms, padding-top 500ms;
|
|
overflow: hidden;
|
|
|
|
&.user-count-hidden {
|
|
height: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
svg {
|
|
@include fluid-width-height(1rem, 1rem);
|
|
margin-right: 0.3em;
|
|
}
|
|
}
|
|
|
|
.network.connected {
|
|
.connecting {
|
|
z-index: 1;
|
|
opacity: 0;
|
|
}
|
|
|
|
.connected {
|
|
z-index: 2;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes rotate-full {
|
|
0% {
|
|
transform: rotate(-52.46deg);
|
|
}
|
|
|
|
20% {
|
|
transform: rotate(-52.46deg);
|
|
}
|
|
|
|
30% {
|
|
transform: rotate(240deg);
|
|
}
|
|
|
|
50% {
|
|
transform: rotate(240deg);
|
|
}
|
|
|
|
60% {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
90% {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|