102 lines
2.5 KiB
SCSS
102 lines
2.5 KiB
SCSS
|
@import "../../../styles/artwork";
|
||
|
|
@import "../../../styles/mixins";
|
||
|
|
@import "../../../styles/vars";
|
||
|
|
|
||
|
|
h3 {
|
||
|
|
@include fluid-font-size(3.125rem);
|
||
|
|
font-family: $font-family-jetbrains-mono;
|
||
|
|
line-height: 110%;
|
||
|
|
text-shadow: 0.017em 0.017em 0.034em #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
h4 {
|
||
|
|
@include fluid-font-size(1.5rem);
|
||
|
|
line-height: 168%;
|
||
|
|
text-shadow: 0.017em 0.017em 0.034em #000;
|
||
|
|
|
||
|
|
&:first-letter {
|
||
|
|
text-transform: capitalize;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
li {
|
||
|
|
@include fluid-font-size(1.25rem);
|
||
|
|
margin-top: 0.9em;
|
||
|
|
|
||
|
|
.network {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: -0.2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status {
|
||
|
|
@include fluid-font-size(1rem);
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.success {
|
||
|
|
.status {
|
||
|
|
color: #62c554;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.loading {
|
||
|
|
.status {
|
||
|
|
color: #fb891f;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.error {
|
||
|
|
.status {
|
||
|
|
color: #cc1b50;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-count {
|
||
|
|
@include fluid-font-size(1rem);
|
||
|
|
color: #8e8e8e;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
svg {
|
||
|
|
@include fluid-width-height(1rem, 1rem);
|
||
|
|
margin: 0 0.3em 0 1.2em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
display: block;
|
||
|
|
width: 1.125em;
|
||
|
|
height: 1.125em;
|
||
|
|
margin-right: 0.375em;
|
||
|
|
@include fluid-font-size(1.125rem);
|
||
|
|
|
||
|
|
&.icon-success {
|
||
|
|
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>');
|
||
|
|
mask-size: 1.125em 1.125em;
|
||
|
|
mask-repeat: no-repeat;
|
||
|
|
mask-position: 50%;
|
||
|
|
background-color: #68cc58;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.icon-wait {
|
||
|
|
background-image: url("../../../assets/wait-icon-orange.png");
|
||
|
|
background-size: 1.125em 1.125em;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.icon-wait-yellow {
|
||
|
|
background-image: url("../../../assets/wait-icon-yellow.png");
|
||
|
|
}
|
||
|
|
|
||
|
|
&.icon-error {
|
||
|
|
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>');
|
||
|
|
mask-size: 1.125em 1.125em;
|
||
|
|
mask-repeat: no-repeat;
|
||
|
|
mask-position: 50%;
|
||
|
|
background-color: #cc1b50;
|
||
|
|
}
|
||
|
|
}
|