felt/static/style.css

392 lines
No EOL
6.3 KiB
CSS

:root {
--bg_color: #000000cc;
--fg_color: #ccc;
--main_color: #1f9b92;
--sub_color: #002b36;
--err_color: #DC143C;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
appearance: none;
-webkit-appearance: none;
outline: none;
}
* { scrollbar-color:var(--main_color) var(--sub_color); }
*::-webkit-scrollbar { width:6px;height:6px; }
*::-webkit-scrollbar-track { background: var(--sub_color);}
*::-webkit-scrollbar-thumb { background:var(--main_color);border-radius:0;border:none; }
*::-webkit-scrollbar-corner { background:var(--sub_color); }
*::selection { background-color:var(--main_color);color:var(--bg_color);text-decoration:none;text-shadow:none; }
body {
background: url('./bg.png');
background-repeat: repeat;
background-attachment: fixed;
font-family: sans-serif;
}
label {
font-size: 80%;
}
input, select, textarea {
background: var(--sub_color);
color: var(--fg_color);
border: solid 1px transparent;
}
input , select {
margin-right: 1ch;
}
input:active, input:focus, select:active, select:focus, textarea:focus {
border: solid 1px var(--main_color);
}
ul {
margin: 2em;
list-style-position: inside;
}
button {
padding: 0.5ch;
background: transparent;
color: var(--fg_color);
border: solid 2px var(--main_color);
margin-right: 1ch;
}
button:hover {
color: var(--bg_color);
background: var(--main_color);
}
#err_wrapper {
color: var(--err_color);
background: var(--bg_color);
border: solid 2px var(--err_color);
padding: 1em;
z-index: 3;
margin: 2em;
position: fixed;
left: 50%;
transform: translateX(-50%);
}
#err_close {
display: inline;
border: none;
color: var(--err_color);
padding: 0 1ch;
margin-right: 1ch;
}
#err_div {
display: inline;
}
#lag {
background: var(--bg_color);
color: var(--err_color);
font-size: 125%;
position: fixed;
bottom:0;
margin-left: 50%;
transform:translateX(-50%);
padding: 0.5em;
}
#dice_log {
background: var(--sub_color);
color: var(--fg_color);
height: 10em;
max-height: 10em;
display: block;
overflow-y: auto;
}
#dice_log p {
padding: 0.5ch;
}
#dice_log p:not(:last-child) {
border-bottom: solid 1px var(--fg_color);
}
#aux {
}
pre {
font-size: 125%;
background: var(--sub_color);
color: var(--fg_color);
white-space: pre-wrap;
max-height: 80vh;
overflow-y: auto;
}
#aux_msg_input {
width: 100%;
padding:0.2em;
height: 8em;
}
summary {
cursor: pointer;
}
.ui_win {
text-align: left;
position: relative;
margin: 2em;
background: var(--bg_color);
color: var(--fg_color);
display: inline;
height: min-content;
z-index:1;
padding: 0.25em;
border: 2px solid transparent;
max-width: min(60ch, 80vw);
}
.ui_win:focus-within {
border: 2px solid var(--main_color);
}
.ui_win * {
margin: 0.25em;
}
a {
color: var(--main_color);
}
a:hover, a:active {
color: var(--fg_color);
}
.ui_win ul {
max-height: 16em;
overflow: auto;
}
#admin_section {
text-align: right;
}
.admin_win {
}
.admin_win summary {
text-align: right;
}
#map {
position:fixed;
width:100%;
height: 100%;
z-index:0;
}
nav {
display: grid;
grid-template-columns: auto 1fr;
}
.leaflet-container {
background: transparent;
}
#aspect_lock_label {
color: var(--main_color);
}
#token_aspect_lock {
display: none;
}
#token_admin_preview {
position: relative;
}
.single_btn_list li {
display: grid;
grid-template-columns: 1fr auto;
}
.two_btn_list li {
display: grid;
grid-template-columns: 1fr auto auto;
}
#registration {
background: var(--bg_color);
color: var(--fg_color);
width: 500px;
max-width: 80vw;
margin: 2em auto;
text-align: center;
padding: 1em;
}
#registration h1, #registration form {
margin: 1em auto;
}
#registration label, #registration button {
display: block;
margin: 1em;
}
#registration button {
margin: 0 auto;
}
#registration a {
color: var(--main_color);
}
#registration a:hover {
color: var(--fg_color);
}
#theme_accordion {
position: fixed;
bottom: 0;
left: 0;
margin: 0;
font-size: 75%;
}
#felt_info {
position: fixed;
bottom: 0;
right: 0;
margin: 0;
font-size: 75%;
}
#theme_cfg {
display: grid;
grid-template-columns: 1fr auto;
}
input[type=range] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 100%; /* Specific width is required for Firefox. */
background: transparent; /* Otherwise white in Chrome */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
/* Hides the slider so custom styles can be added */
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-webkit-slider-thumb {
height: 16px;
width: 16px;
border: none;
border-radius: 0px;
background: var(--main_color);
cursor: pointer;
}
/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
height: 16px;
width: 16px;
border-radius: 0px;
border: none;
background: var(--main_color);
cursor: pointer;
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
height: 16px;
width: 16px;
border-radius: 0px;
border: none;
background: var(--main_color);
cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 16px;
cursor: pointer;
background: var(--sub_color);
border-radius: 0;
border: solid 1px var(--sub_color);
}
input[type=range]::-moz-range-track {
background: var(--sub_color);
height: 16px;
}
.error {
color: var(--err_color);
}
.leaflet-popup-content-wrapper
{
color: var(--fg_color);
background: var(--bg_color);
border-radius: 0;
text-align: center;
}
.leaflet-popup-tip {
background: transparent;
box-shadow: none;
}
.leaflet-popup-close-button {
color: var(--err_color) !important;
}
.leaflet-popup-close-button:hover,
.leaflet-popup-close-button:focus {
color: var(--main_color) !important;
}
#noscript_container {
z-index:999;
position: fixed;
width: 100vw;
height: 100vh;
background: var(--bg_color);
color: var(--fg_color);
padding: 3em;
text-align: center;
}
@media (max-width: 800px) {
body {
font-size: 75%;
}
nav {
grid-template-columns: 1fr;
}
}