115 lines
1.6 KiB
Stylus
115 lines
1.6 KiB
Stylus
[data-component='Stats'] {
|
|
TransitionAppear(500ms);
|
|
|
|
+desktop() {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 10px 0;
|
|
min-width: 100px;
|
|
background-color: rgba(#1c446f, 0.75);
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
+mobile() {
|
|
position: fixed;
|
|
z-index: 3000;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: rgba(#1c446f, 0.75);
|
|
padding: 40px 10px;
|
|
font-size: 0.9rem;
|
|
overflow: auto;
|
|
}
|
|
|
|
> .close {
|
|
background-image: url('/resources/images/close.svg');
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
cursor: pointer;
|
|
opacity: 0.75;
|
|
transition-duration: 0.25s;
|
|
|
|
+desktop() {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
+mobile() {
|
|
position: fixed;
|
|
top: 10px;
|
|
right: 10px;
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
> .block {
|
|
padding: 5px;
|
|
|
|
+desktop() {
|
|
border-right: 1px solid rgba(#fff, 0.15);
|
|
|
|
&:last-child {
|
|
border-right: none;
|
|
}
|
|
}
|
|
|
|
+mobile() {
|
|
width: 100%;
|
|
}
|
|
|
|
> h1 {
|
|
margin-bottom: 8px;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
color: #fff;
|
|
}
|
|
|
|
> .item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 3px 0;
|
|
font-size: 0.95em;
|
|
font-weight: 300;
|
|
|
|
> .key {
|
|
text-align: right;
|
|
color: rgba(#fff, 0.9);
|
|
|
|
+desktop() {
|
|
width: 85px;
|
|
}
|
|
|
|
+mobile() {
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
> .value {
|
|
margin-left: 10px;
|
|
text-align: left;
|
|
color: #aae22b;
|
|
|
|
+desktop() {
|
|
width: 85px;
|
|
}
|
|
|
|
+mobile() {
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|