@import 'partials/_colors.scss';
html,body {
height: 100vh;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-display: swap;
overflow: hidden;
background-color: $primary;
color: $primary-text;
user-select: none;
}
body {
display: flex;
flex-direction: column;
background-color: $secondary;
position: relative;
}
.btn {
border: none;
border-radius: 4px;
padding: 8px;
margin: 0;
font-size: 1rem;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
display: inline-block;
background-color: $secondary;
color: $secondary-text;
text-transform: uppercase;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
cursor: pointer;
letter-spacing: 0.25rem;
background-position: center;
transition: background 800ms ease, box-shadow 100ms ease, color 200ms ease;
&:hover {
background: $secondary-dark radial-gradient(circle, transparent 1%, $secondary-dark 1%) center/15000%;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
&:active {
background-color: $secondary-light;
background-size: 100%;
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
transition: background 0s, box-shadow 0s;
}
&:disabled {
color: $secondary-text-disabled;
background: $secondary-disabled;
box-shadow: none;
transition: background 200ms ease, box-shadow 200ms ease, color 200ms ease;
}
}
.text-btn {
padding: 8px;
margin: 0;
font-size: 1rem;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
display: inline-block;
color: $secondary-text;
background-color: rgba(0, 0, 0, 0);
text-transform: uppercase;
box-shadow: none;
background-position: center;
transition: background 800ms ease, box-shadow 100ms ease, color 200ms ease;
&:hover {
background: $secondary-dark-transparent radial-gradient(circle, transparent 1%, $secondary-dark-transparent 1%) center/15000%;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
&:active {
background-color: $secondary-light;
background-size: 100%;
box-shadow: none;
transition: background 0s, box-shadow 0s;
}
&:disabled {
background: rgba(0,0,0,0);
color: $secondary-text-disabled;
box-shadow: none;
transition: background 200ms ease, box-shadow 200ms ease, color 200ms ease;
}
}
.backdrop {
background-color: $secondary;
color: $secondary-text;
font-size: 1rem;
.header-bar {
display: flex;
align-items: center;
@media (max-height: 550px) {
margin-top: 0.125rem;
}
.menu-icon {
background-image: url("./ressources/menu.png");
background-position: center;
background-repeat: no-repeat;
width: 36px;
height: 36px;
padding: 4px;
margin: 1rem;
display: inline-block;
border: none;
border-radius: 32px;
transition: background-color 100ms ease;
@media (max-height: 550px) {
padding: 0;
margin: 0.125rem;
}
&:hover {
background-color: $secondary-dark;
}
&.open {
background-image: url("./ressources/menu_close.png");
}
}
.header {
margin: 0;
padding: 16px;
text-align: center;
z-index: 2;
flex-grow: 1;
@media (min-width: 450px) {
margin-right: 56px;
}
@media (max-height: 550px) {
padding: 0;
}
}
}
.menu-actions {
box-sizing: border-box;
transition: max-height 200ms ease, color 200ms ease, background-color 100ms ease;;
position: relative;
max-height: 16rem;
margin: 0 1rem;
.menu-option {
color: $primary-text;
text-decoration: none;
box-sizing: border-box;
display: inline-block;
font-size: 1.5rem;
width: 100%;
text-align: center;
padding: 1rem;
border: none;
border-radius: 8px;
cursor: pointer;
&:hover {
background-color: $secondary-half-dark;
}
&.active {
background-color: $secondary-dark;
}
}
&.hidden {
max-height: 0;
color: rgba(0,0,0,0);
.menu-option {
color: rgba(0,0,0,0);
background-color: rgba(0,0,0,0) !important;
}
}
}
}
.container {
@keyframes start {
from {top: 100vh;}
to {top: 0;}
}
position: relative;
border: none;
border-radius: 16px 16px 0 0;
min-height: 0;
height: 100%;
box-sizing: border-box;
background-color: white;
margin-top: 8px;
animation-name: start;
animation-duration: 1s;
animation-timing-function: ease;
color: black;
display: flex;
flex-direction: column;
.banner {
z-index: 1;
background-color: white;
border: none;
border-radius: 16px 16px 0 0;
display: flex;
margin: 0;
margin-bottom: 1rem;
padding-top: 1rem;
max-height: 10rem;
flex-direction: row;
flex-wrap: wrap;
transform-origin: top;
transition: max-height 200ms ease, transform 200ms ease, visibility 200ms step-start;
min-height: 3.5rem;
justify-items: center;
justify-content: center;
@media (max-height: 550px) {
position: absolute;
width: 100%;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
&.hidden {
transform: scaleY(0);
visibility: hidden;
max-height: 0;
transition: max-height 200ms ease, transform 200ms ease, visibility 200ms step-end;
min-height: 0;
margin-bottom: 0;
}
.banner-text {
align-self: left;
margin: 1rem;
flex-grow: 100;
}
.btn-container{
display: flex;
flex-grow: 1;
text-align: right;
.banner-button {
color: $secondary-dark;
padding: 8px 16px;
margin: 0;
margin-right: 1rem;
letter-spacing: 0.125rem;
}
}
hr {
width: 100%;
@media (max-height: 550px) {
margin-bottom: 0;
}
}
}
.server-listing {
box-sizing: border-box;
background-color: $primary;
color: $primary-text;
min-height: 0;
display: flex;
flex-direction: column;
border-style: none;
border-radius: 8px;
margin: 1rem;
margin-bottom: 2rem;
padding: 0.5rem;
padding-top: 0.25rem;
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
h1 {
text-align: center;
@media (max-height: 550px) {
display: none;
}
}
hr {
width: 100%;
@media (max-height: 550px) {
display: none;
}
}
@media (max-height: 450px) {
padding-bottom: 0.125rem
}
.server-entries {
overflow-y: auto;
min-height: 0;
.server {
font-size: 1.25rem;
display: flex;
flex-direction: row;
@media (max-width: 1000px) {
flex-wrap: wrap;
}
align-items: center;
background-color: $primary-light;
padding: 0.5rem;
margin-bottom: 0.25rem;
border-style: none;
border-radius: 8px;
.server-name {
font-weight: bold;
letter-spacing: 0.125rem;
white-space: nowrap;
overflow: hidden;
margin: 0.5rem 0;
}
.player-count {
font-family: 'Roboto Condensed', sans-serif;
}
.player-count-static {
@media (max-width: 1000px) {
display: none;
}
white-space: nowrap;
margin-left: 0.25rem;
letter-spacing: 0;
font-family: 'Roboto Condensed', sans-serif;
}
.player-count-dot {
background-color: $online-green;
border-radius: 50%;
min-width: 1rem;
min-height: 1rem;
width: 1rem;
height: 1rem;
margin-left: auto;
margin-right: 0.25rem;
}
.join-btn {
margin-left: 0.5rem;
min-width: 12rem;
}
}
}
.button-container {
display: flex;
flex-direction: row-reverse;
margin-top: 1rem;
margin-right: 0.25rem;
min-height: 2.5rem;
@media (max-height: 450px) {
margin-top: 0.125rem;
min-height: 2rem;
}
}
}
.copyright-container {
box-sizing: border-box;
position: absolute;
width: 100%;
margin: 4px;
bottom: 0;
text-align: center;
}
}