274f61f651
This script is in charge to detect whether the client is compatible with the game (not being Internet Explorer, having support of local storage and websockets). It also manages the theme preference, stored in the localStorage, and displays the corresponding theme according to this preference.
124 lines
2.7 KiB
CSS
124 lines
2.7 KiB
CSS
/* Custom fonts */
|
|
@font-face {
|
|
font-family: 'Spicy Rice';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("../fonts/spicy_rice_v21/spicy_rice_v21.woff2") format("woff2"), url("../fonts/spicy_rice_v21/spicy_rice_v21.woff") format("woff"), url("../fonts/spicy_rice_v21/spicy_rice_v21.ttf") format("truetype");
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Titan One';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url("../fonts/titan_one_v13/titan_one_v13.woff2") format('woff2'), url("../fonts/titan_one_v13/titan_one_v13.woff") format('woff'), url("../fonts/titan_one_v13/titan_one_v13.ttf") format('truetype');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
|
|
/* Base elements */
|
|
:root {
|
|
color-scheme: dark;
|
|
--footer-links-height: 2em;
|
|
--button-and-dialog-border-radius: 1em;
|
|
}
|
|
|
|
html {
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
--body-margin: 0.375em;
|
|
margin: var(--body-margin);
|
|
}
|
|
|
|
/* Themes */
|
|
.dark {
|
|
background-color: #213C40;
|
|
}
|
|
|
|
.light {
|
|
background-color: #B1EDE8;
|
|
}
|
|
|
|
/* Utility classes */
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer_link {
|
|
color: white;
|
|
font-family: sans-serif;
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
margin: 0.5em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer_link:visited {
|
|
color: unset;
|
|
}
|
|
|
|
.footer_links {
|
|
align-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
height: var(--footer-links-height);
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/* JavaScript browser message */
|
|
.unsupported_browser_msg {
|
|
display: none;
|
|
}
|
|
|
|
.unsupported_show {
|
|
display: block;
|
|
}
|
|
|
|
/* Alert dialogs */
|
|
.alert_dialog {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: none;
|
|
align-content: center;
|
|
align-items: center;
|
|
font-family: "Spicy Rice", serif;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
border-radius: var(--button-and-dialog-border-radius);
|
|
padding: 2em;
|
|
z-index: 2;
|
|
}
|
|
|
|
.alert_dialog_show {
|
|
display: flex;
|
|
}
|
|
|
|
.alert_dialog_title {
|
|
font-size: 2em;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
}
|
|
|
|
.alert_dialog_msg {
|
|
font-size: 1.5em;
|
|
text-align: justify;
|
|
}
|
|
|
|
.alert_dialog_background {
|
|
background-color: rgba(0, 0, 0, 0.875);
|
|
position: absolute;
|
|
display: none;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
z-index: 1;
|
|
} |