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

154 lines
2.1 KiB
CSS
Raw Normal View History

2022-08-13 07:46:56 +02:00
* {
box-sizing: border-box;
}
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;
}
.grid {
display: grid;
}
.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;
}
2022-08-13 07:46:56 +02:00
body {
background-color: lightgray;
margin: 0;
padding: 0;
2022-08-15 11:42:28 +02:00
z-index: -10;
2022-08-13 07:46:56 +02:00
}
header {
padding: 1em;
display: flex;
flex-direction: row;
/** Align text and center of image */
justify-content: center;
align-items: baseline;
}
2022-08-15 11:42:28 +02:00
header img.logo {
2022-08-13 07:46:56 +02:00
width: 100px;
height: 100px;
}
main {
min-height: 100vh;
2022-08-13 07:46:56 +02:00
padding: 5em;
2022-08-15 11:42:28 +02:00
z-index: 0;
2022-08-13 07:46:56 +02:00
}
footer {
color: white;
background-color: black;
padding: 2em;
text-align: center;
}
footer a {
color: white;
text-decoration: none;
}
footer a:hover {
font-style: italic;
}
2022-08-15 11:42:28 +02:00
/* .dropdown-button:hover {
background-color: #900;
color: white
2022-08-13 07:46:56 +02:00
}
.dropdown:hover .dropdown-content {
display: block;
}
2022-08-15 11:42:28 +02:00
*/
2022-08-13 07:46:56 +02:00
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
canvas {
display: block;
height: 100%;
width: 100%;
}
.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;
grid-template-columns: 1fr 1fr 1fr;
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-15 11:42:28 +02:00
}
.status.active.bullet {
2022-08-15 11:42:28 +02:00
background-color: #090;
}
.status.inactive.bullet {
2022-08-15 11:42:28 +02:00
background-color: #900;
}
@media screen and (max-width: 700px) {
main {
padding: 1em;
}
}
.overlay {
z-index: 10;
opacity: 100%;
background-color: rgba(255, 255, 255, 1);
position: relative;
}