BirdNET-stream/www/assets/styles/app.css

337 lines
5.2 KiB
CSS
Raw Normal View History

2022-08-16 07:05:49 +02:00
:root {
--bg: white;
--font-family: 'Latin Modern Math';
--font-size: 2em;
2022-08-16 07:05:49 +02:00
}
2022-08-13 07:46:56 +02:00
* {
box-sizing: border-box;
font-family: var(--font-family);
font-size: large;
}
html {
position: relative;
min-height: 100vh;
}
a {
text-decoration: none;
color: inherit;
cursor: pointer;
2022-08-13 07:46:56 +02:00
}
2022-08-15 11:42:28 +02:00
.container {
display: flex;
flex-direction: column;
position: relative;
}
.container.col {
2022-08-15 11:42:28 +02:00
flex-direction: column;
}
.container.row {
2022-08-15 11:42:28 +02:00
flex-direction: row;
}
.grow {
flex-grow: 100;
}
.end {
justify-self: flex-end;
}
.item {
align-self: flex-end;
}
.grid {
display: grid;
}
2022-08-16 07:05:49 +02:00
.grid>* {
padding-left: 0.1em;
}
2022-08-15 11:42:28 +02:00
.behind {
position: relative;
z-index: -1;
}
.above {
position: relative;
z-index: 1;
}
.button,
input[type=submit],
input[type=button] {
2022-08-16 07:05:49 +02:00
background-color: #f1f1f1;
color: black;
border-radius: 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1em;
cursor: pointer;
appearance: none;
background-color: #FAFBFC;
border: 1px solid rgba(27, 31, 35, 0.15);
border-radius: 6px;
box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
color: #24292E;
cursor: pointer;
display: inline-block;
font-size: 1em;
font-weight: 500;
line-height: 20px;
list-style: none;
padding: 6px 16px;
position: relative;
transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
word-wrap: break-word;
}
.button:hover,
input:hover {
2022-08-16 07:05:49 +02:00
background-color: #F3F4F6;
text-decoration: none;
transition-duration: 0.1s;
}
.button:disabled {
background-color: #FAFBFC;
border-color: rgba(27, 31, 35, 0.15);
color: #959DA5;
cursor: default;
}
.button-main:focus:not(:focus-visible):not(.focus-visible) {
box-shadow: none;
outline: none;
2022-08-16 07:05:49 +02:00
}
.button-main:hover {
background-color: #2c974b;
padding: 6px 16px;
2022-08-16 07:05:49 +02:00
}
.button-main:focus {
box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
outline: none;
2022-08-16 07:05:49 +02:00
}
.button-main:disabled {
background-color: #94d3a2;
border-color: rgba(27, 31, 35, .1);
color: rgba(255, 255, 255, .8);
cursor: default;
2022-08-16 07:05:49 +02:00
}
.button-main:active {
background-color: #298e46;
box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
2022-08-16 07:05:49 +02:00
}
.button-main:active {
background-color: #EDEFF2;
box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
transition: none 0s;
}
.button:focus,
input:focus {
2022-08-16 07:05:49 +02:00
outline: 1px transparent;
border: solid blue 1px;
}
2022-08-13 07:46:56 +02:00
body {
2022-08-16 07:05:49 +02:00
background-color: var(--bg);
2022-08-13 07:46:56 +02:00
margin: 0;
padding: 0;
}
header {
padding: 1em;
/** Align text and center of image */
/* justify-content: center; */
width: fit-content;
margin: auto;
2022-08-13 07:46:56 +02:00
}
header h1 {
font-size: 4rem;
}
header:first-child {
justify-content: center;
}
2022-08-15 11:42:28 +02:00
header img.logo {
width: auto;
height: 10rem;
position: relative;
top: -2rem;
padding-top: 1em;
2022-08-13 07:46:56 +02:00
}
main {
min-height: calc(100vh - (var(--header-height, 4em) + var(--footer-height, 4em)));
2022-08-13 07:46:56 +02:00
padding: 5em;
2022-08-16 07:05:49 +02:00
z-index: 0;
2022-08-13 07:46:56 +02:00
}
footer {
color: white;
background-color: black;
padding: 2em;
text-align: center;
overflow: hidden;
2022-08-13 07:46:56 +02:00
}
footer a {
color: white;
text-decoration: none;
}
footer a:hover {
font-style: italic;
}
li {
list-style: none;
}
.dropdown-toggle:hover {
background-color: #900;
color: white
2022-08-13 07:46:56 +02:00
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content {
display: none;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
width: fit-content;
2022-08-13 07:46:56 +02:00
}
canvas {
display: block;
height: 100%;
width: 100%;
}
.language-selector {
position: absolute;
top: 0;
right: 0;
}
.language-selector .toggle {
position: absolute;
top: 0;
right: 0;
opacity: 0;
width: 5em;
height: 1em;
}
.touch {
cursor: pointer;
}
.touch::after {
content: "+";
}
.slide {
clear: both;
width: 100%;
height: 0px;
overflow: hidden;
text-align: center;
transition: height .4s ease;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.toggle:checked + .slide {
height: fit-content;
}
.scientific-name {
font-style: italic;
2022-08-15 11:42:28 +02:00
}
.dataviz img {
max-width: 100%;
width: 100%;
}
#statuses li {
list-style: none;
}
2022-08-15 11:42:28 +02:00
#statuses .grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
2022-08-16 05:21:53 +02:00
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
2022-08-16 07:05:49 +02:00
gap: 0.1em;
2022-08-15 11:42:28 +02:00
}
.status.bullet {
2022-08-15 11:42:28 +02:00
border-radius: 50%;
background-color: #999;
width: 1em;
height: 1em;
display: inline-block;
position: relative;
top: 0.4em;
2022-08-16 05:21:53 +02:00
z-index: -1;
}
.status.inactive.bullet {
background-color: #999;
2022-08-15 11:42:28 +02:00
}
.status.active.bullet {
2022-08-15 11:42:28 +02:00
background-color: #090;
}
2022-08-16 05:21:53 +02:00
.status.dead.bullet {
2022-08-15 11:42:28 +02:00
background-color: #900;
}
.overlay {
z-index: 10;
opacity: 100%;
background-color: rgba(255, 255, 255, 1);
position: relative;
2022-08-16 05:21:53 +02:00
}
.logs {
background-color: black;
color: white;
font: monospace;
padding: 1em;
overflow-y: scroll;
height: 100%;
2022-08-16 07:05:49 +02:00
}
@media screen and (max-width: 700px) {
main {
padding: 1em;
}
}