jaredb7
1018fbf40d
Appears to be a issue scrolling a select list option into view and then setting it's selected state to true (as if the user had clicked on it) this seems to break all future calls of scrollIntoView on any options, regardless if the selected state if removed from all options. scrollIntoView works perfectly otherwise and opted to apply a style to visually highlight the option. This turned out way better
839 lines
14 KiB
CSS
839 lines
14 KiB
CSS
@font-face {
|
|
font-family: 'Roboto Flex' ;
|
|
src: url('static/RobotoFlex-Regular.ttf') format('truetype');
|
|
}
|
|
|
|
* {
|
|
font-family: 'Roboto Flex', sans-serif;
|
|
box-sizing: border-box;
|
|
font-size: medium;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
font-weight: bold;
|
|
}
|
|
|
|
h3 {
|
|
text-align: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
iframe {
|
|
padding: 0;
|
|
margin: 0;
|
|
border: none;
|
|
height: 93%;
|
|
width: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background-color: rgb(119, 196, 135);
|
|
}
|
|
|
|
table {
|
|
background-color: transparent;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.10);
|
|
border-radius:3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
td {
|
|
padding: 10px;
|
|
vertical-align: top;
|
|
background-color: rgb(219, 255, 235);
|
|
font-weight: lighter;
|
|
text-align: center;
|
|
}
|
|
|
|
th {
|
|
padding: 12px;
|
|
font-weight: bold;
|
|
height: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
audio, video{
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
hr {
|
|
border-color:black;
|
|
}
|
|
|
|
button {
|
|
background-color: transparent;
|
|
border: none;
|
|
color: black;
|
|
cursor: pointer;
|
|
transition:background-color 0.2s;
|
|
}
|
|
|
|
.disabled{
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
opacity:0.5;
|
|
}
|
|
|
|
button:hover {
|
|
color: blue;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
}
|
|
|
|
.centered {
|
|
text-align: center;
|
|
display: block;
|
|
width: auto;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.banner {
|
|
height: 7%;
|
|
text-align: center;
|
|
}
|
|
|
|
.banner h1 {
|
|
padding: .5em;
|
|
letter-spacing: 5px;
|
|
}
|
|
|
|
.banner audio,.banner form {
|
|
float: right;
|
|
width: 120px;
|
|
margin-left: -120px;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.banner button {
|
|
padding-top: 8px;
|
|
font-weight: bold;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.banner a {
|
|
text-decoration: none;
|
|
color: black;
|
|
font-size: x-large;
|
|
}
|
|
|
|
.logo img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
padding: 10px;
|
|
}
|
|
|
|
.topnav {
|
|
background-color: rgb(159, 226, 155);
|
|
display: flex;
|
|
flex: 65%;
|
|
width: 65%;
|
|
min-width: min-content;
|
|
justify-content: space-between;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 15px;
|
|
box-shadow: 0px 0px 28px 1px rgba(0, 0, 0, 0.10); !important;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.topimage {
|
|
width:175px;
|
|
display:initial !important;
|
|
}
|
|
|
|
.topnav form {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.topnav button {
|
|
background-color: transparent;
|
|
text-align: center;
|
|
padding: 14px 16px;
|
|
width: auto;
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.topnav button:hover {
|
|
background-color: rgb(219, 295, 235);
|
|
color: black;
|
|
}
|
|
|
|
.topnav button.active {
|
|
background-color: #04AA6D;
|
|
color: white;
|
|
}
|
|
|
|
.topnav .button-hover {
|
|
background-color: rgb(219, 295, 235) !important;
|
|
color: black;
|
|
}
|
|
|
|
.topnav .icon {
|
|
display: none;
|
|
}
|
|
|
|
.play table {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.stats table {
|
|
width: 60%;
|
|
}
|
|
|
|
.overview th {
|
|
background-color: rgb(219, 255, 235);
|
|
text-align: center;
|
|
padding: 12px;
|
|
}
|
|
|
|
.overview td {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.overview div img {
|
|
max-height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.overview .chart {
|
|
margin-top: 10px;
|
|
}
|
|
.overview-stats {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.left-column {
|
|
flex: 10%;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.right-column {
|
|
flex: 90%;
|
|
margin-right: 10%;
|
|
}
|
|
|
|
.stats td {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.stats table {
|
|
height: auto;
|
|
}
|
|
|
|
.stats button:hover {
|
|
color: blue;
|
|
}
|
|
|
|
.overview button, .center button{
|
|
font-weight: bold;
|
|
color: blue;
|
|
}
|
|
|
|
.history table,.history img {
|
|
width: auto;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.views {
|
|
transition: opacity 0.3s;
|
|
-webkit-transition: opacity 0.3s;
|
|
}
|
|
|
|
.views .centered button {
|
|
background-color: rgb(219, 255, 235);
|
|
padding: 12px;
|
|
transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow:0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
|
|
}
|
|
|
|
.views .centered button:hover {
|
|
background-color: rgb(159, 226, 155);
|
|
color: black;
|
|
box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
|
|
}
|
|
|
|
.settings {
|
|
padding: 12px;
|
|
}
|
|
|
|
.settings h3 {
|
|
text-align: left;
|
|
}
|
|
|
|
.settings button {
|
|
background-color: rgb(219, 255, 235);
|
|
padding: 12px;
|
|
}
|
|
|
|
.settings button:hover {
|
|
background-color: rgb(159, 226, 155);
|
|
color: black;
|
|
}
|
|
|
|
.customlabels,.customlabels2 {
|
|
float:left;
|
|
}
|
|
|
|
.customlabels table {
|
|
height: 100%;
|
|
}
|
|
|
|
.customlabels td,.customlabels2 td {
|
|
border:none;
|
|
background-color: transparent;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.customlabels button,.customlabels2 button {
|
|
padding: 12px;
|
|
background-color: rgb(219, 255, 235);
|
|
|
|
width: 100%;
|
|
}
|
|
|
|
.column1, .column3 {
|
|
width: 45%;
|
|
}
|
|
|
|
.smaller {
|
|
width: 100%;
|
|
display: none;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.column2 {
|
|
text-align: center;
|
|
width: 10%;
|
|
height: 80%;
|
|
}
|
|
|
|
.column4 {
|
|
text-align: justify;
|
|
width: 10%;
|
|
height: 50%;
|
|
}
|
|
|
|
.column1 form,.column3 form {
|
|
width: 80%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.column1 select,.column3 select {
|
|
height: 80%;
|
|
width: 100%;
|
|
}
|
|
|
|
.spectrogram {
|
|
width:50%
|
|
}
|
|
|
|
.full {
|
|
width:100%;
|
|
}
|
|
|
|
.logbutton, .navbuttons {
|
|
float: left;
|
|
}
|
|
|
|
.systemcontrols form,.servicecontrols form {
|
|
text-align: center;
|
|
}
|
|
|
|
.systemcontrols button,.servicecontrols button {
|
|
|
|
background-color: rgb(219, 255, 235);
|
|
padding: 12px;
|
|
width: 50%;
|
|
}
|
|
|
|
.servicecontrols button {
|
|
width: 20%;
|
|
}
|
|
|
|
.slider {
|
|
-webkit-appearance: none;
|
|
width: 33%;
|
|
height: 15px;
|
|
border-radius: 5px;
|
|
outline: none;
|
|
opacity: 0.7;
|
|
-webkit-transition: .2s;
|
|
transition: opacity .2s;
|
|
}
|
|
|
|
.slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 25px;
|
|
height: 25px;
|
|
border-radius: 50%;
|
|
background: #04AA6D;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.slider::-moz-range-thumb {
|
|
width: 25px;
|
|
height: 25px;
|
|
border-radius: 50%;
|
|
background: #04AA6D;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#body::-webkit-scrollbar {
|
|
/*display:none*/
|
|
}
|
|
|
|
@media screen and (max-width: 1290px) {
|
|
.column1,.column2,.column3,.column4 {
|
|
height: 90%
|
|
}
|
|
.left-column {
|
|
display: none;
|
|
}
|
|
.right-column {
|
|
flex: 100%;
|
|
margin: 0;
|
|
}
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
.overview {
|
|
overflow-x: hidden;
|
|
}
|
|
.overview .right-column .chart img {
|
|
margin-left: 5%;
|
|
margin-right: auto;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
@media screen and (max-width: 1000px) {
|
|
.customlabels form,.customlabels2 form {
|
|
width: 95%;
|
|
}
|
|
.column1, .column3 {
|
|
width: 50%;
|
|
height: 100%;
|
|
}
|
|
.column1 select,.column3 select {
|
|
height: 70%;
|
|
}
|
|
.column2,.column4 {
|
|
display: none;
|
|
}
|
|
.smaller{
|
|
display: block;
|
|
}
|
|
.systemcontrols button,.servicecontrols button {
|
|
width: 60%;
|
|
padding: 12px;
|
|
background-color: rgb(219, 255, 235);
|
|
}
|
|
.topnav {
|
|
flex: 100%;
|
|
width: 100%;
|
|
}
|
|
.topnav button {display: none;}
|
|
.topnav button.icon {
|
|
padding: 0;
|
|
margin: 0;
|
|
display: block;
|
|
width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.banner {
|
|
height: auto;
|
|
}
|
|
.banner img {
|
|
display: none;
|
|
}
|
|
.logo img {
|
|
display: block;
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
.topnav.responsive {position: relative;}
|
|
.topnav.responsive button {
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 800px) {
|
|
.column1, .column3 {
|
|
width: 100%;
|
|
}
|
|
.systemcontrols button,.servicecontrols button {
|
|
width: 80%;
|
|
padding: 12px;
|
|
background-color: rgb(219, 255, 235);
|
|
}
|
|
.stats img {
|
|
width: 100%;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
}
|
|
.overview img {
|
|
width: 100%
|
|
}
|
|
.banner {
|
|
height: auto;
|
|
margin-left: 60px;
|
|
}
|
|
.banner img {
|
|
display: none;
|
|
}
|
|
.stream {
|
|
float: right;
|
|
display: block;
|
|
width: 100px;
|
|
}
|
|
.logo img {
|
|
display: block;
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
.play table,.overview table,.stats table {
|
|
width: 100%;
|
|
}
|
|
.topnav {
|
|
flex: 100%;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
}
|
|
.topnav button {
|
|
font-size: large;
|
|
width: 100%
|
|
}
|
|
.topnav button {display: none;}
|
|
.topnav button.icon {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: block;
|
|
width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.topnav.responsive {position: relative;}
|
|
.topnav.responsive button {
|
|
display: block;
|
|
}
|
|
.left-column {
|
|
display: none;
|
|
}
|
|
.left {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
.copyimage {
|
|
position:absolute;
|
|
top:7px;
|
|
right:7px;
|
|
width:25px !important;
|
|
height:25px !important;
|
|
}
|
|
|
|
.copyimage-mobile {
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
}
|
|
|
|
.relative {
|
|
position:relative;
|
|
}
|
|
|
|
.sortbutton {
|
|
margin-top:10px;
|
|
font-size:x-large;
|
|
background:#dbffeb;
|
|
padding:5px;
|
|
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.10);
|
|
}
|
|
|
|
button.legacyview {
|
|
display: none;
|
|
color:gray;
|
|
margin:5px;
|
|
float:right;
|
|
z-index:100;
|
|
position:relative;
|
|
font-size:small;
|
|
background:#dbffeb;
|
|
padding:5px;
|
|
transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow:0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
|
|
}
|
|
|
|
button.legacyview:hover {
|
|
box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
|
|
}
|
|
|
|
button.loadmore {
|
|
margin-top:10px;
|
|
font-size:x-large;
|
|
background:#dbffeb;
|
|
padding:10px;
|
|
transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow:0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
|
|
|
|
}
|
|
|
|
button.loadmore:hover {
|
|
box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
|
|
}
|
|
|
|
#searchterm {
|
|
transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
#searchterm:hover {
|
|
box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
|
|
}
|
|
|
|
tr {
|
|
background-color:#9fe29b;
|
|
}
|
|
|
|
.history.centered form {
|
|
display:flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.history.centered input {
|
|
margin-right:5px;
|
|
border:0px;
|
|
}
|
|
|
|
.centered form#views button {
|
|
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.10);
|
|
margin:2px;
|
|
transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow:0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
|
|
}
|
|
|
|
.centered form#views button:hover {
|
|
box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
|
|
}
|
|
|
|
dl {
|
|
margin: 1em 0 0 1em;
|
|
}
|
|
dt {
|
|
float: left;
|
|
clear: left;
|
|
width: auto;
|
|
text-align: left;
|
|
font-weight: bold;
|
|
color: black;
|
|
}
|
|
dd::before {
|
|
content: ": ";
|
|
}
|
|
|
|
input {
|
|
box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.10);
|
|
}
|
|
|
|
dialog {
|
|
border:none;
|
|
}
|
|
|
|
dialog::backdrop {
|
|
background: repeating-linear-gradient(
|
|
30deg,
|
|
rgba(24, 194, 236, 0.2),
|
|
rgba(24, 194, 236, 0.2) 1px,
|
|
rgba(24, 194, 236, 0.3) 1px,
|
|
rgba(24, 194, 236, 0.3) 20px
|
|
);
|
|
backdrop-filter: blur(1px)
|
|
}
|
|
|
|
.centered_image_container {
|
|
font-size:19px !important;
|
|
display:inline-block;
|
|
position:relative;
|
|
margin-bottom:3px;
|
|
}
|
|
|
|
.centered_image_container img.img1 {
|
|
transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow:0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
|
|
cursor:pointer;
|
|
height:95%;
|
|
position:absolute;
|
|
right:110%;
|
|
top:0px;
|
|
border-radius: 5px;
|
|
width:unset;
|
|
}
|
|
|
|
.centered_image_container img.img1:hover{
|
|
opacity:0.8;
|
|
box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
|
|
}
|
|
|
|
#birdimage {
|
|
transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow:0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
|
|
cursor:pointer;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
#birdimage:hover {
|
|
opacity:0.8;
|
|
box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
|
|
}
|
|
|
|
.centered_image_container * {
|
|
font-size:19px !important;
|
|
}
|
|
|
|
.centered_image_container form {
|
|
margin-bottom:0px;
|
|
}
|
|
|
|
.brbanner {
|
|
padding:15px;
|
|
background-color:rgb(159, 226, 155);
|
|
text-align:center;
|
|
font-size:large;
|
|
}
|
|
|
|
#gain.centered {
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
.updatenumber {
|
|
margin-left:5px;
|
|
position:absolute;
|
|
display:inline-block;
|
|
background-color:#c8191a;
|
|
color:white;
|
|
width:20px;
|
|
line-height:20px;
|
|
border-radius:12px;
|
|
text-align:center;
|
|
font-size:small;
|
|
}
|
|
|
|
form#views button .updatenumber {
|
|
position:initial;
|
|
margin-left:0px;
|
|
}
|
|
|
|
#detections_table_overview table {
|
|
width:944px;
|
|
}
|
|
|
|
#recent_detection_middle_td{
|
|
width:33%;
|
|
}
|
|
@media screen and (max-width:500px) {
|
|
#recent_detection_middle_td{
|
|
width:66%;
|
|
}
|
|
}
|
|
#recent_detection_middle_td img{
|
|
width:unset !important;
|
|
height:75px;
|
|
float:left;
|
|
}
|
|
|
|
.settingstable {
|
|
margin-left:unset;
|
|
margin-right:unset;
|
|
}
|
|
.settingstable td {
|
|
text-align:unset;
|
|
}
|
|
.settingstable textarea {
|
|
width:100%;
|
|
margin-top:10px;
|
|
}
|
|
.settingstable h2 {
|
|
font-size:x-large;
|
|
}
|
|
.brbanner h1 {
|
|
margin:0px;
|
|
font-size: xx-large;
|
|
}
|
|
|
|
.testbtn {
|
|
background:#77c487 !important;
|
|
}
|
|
|
|
pre.bash {
|
|
background-color: black;
|
|
color: white;
|
|
font-size: medium ;
|
|
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
|
|
width: 100%;
|
|
display: inline-block;
|
|
}
|
|
pre#timer.bash {
|
|
display:unset;
|
|
width:unset;
|
|
}
|
|
|
|
#toolsbtn {
|
|
min-width: max-content;
|
|
}
|
|
|
|
#showpassword {
|
|
cursor:pointer;
|
|
margin-left:2px;
|
|
height:5px;
|
|
line-height:5px;
|
|
padding:3px;
|
|
background-color:#9fe29b
|
|
}
|
|
|
|
#newrtspstream{
|
|
cursor: pointer;
|
|
margin-left: 2px;
|
|
height: 5px;
|
|
line-height: 5px;
|
|
padding: 3px;
|
|
background-color: #9fe29b;
|
|
}
|
|
|
|
.exclude_species_list_option_highlight {
|
|
color: black;
|
|
background-color: rgb(119, 196, 135);
|
|
font-weight: bolder;
|
|
}
|
|
|
|
#ddnewline::before {
|
|
content: none;
|
|
} |