mcguirepr89
497 lines
7.4 KiB
CSS
497 lines
7.4 KiB
CSS
* {
|
|
font-family: 'Arial', 'Gill Sans', 'Gill Sans MT',
|
|
' Calibri', 'Trebuchet MS', 'sans-serif';
|
|
box-sizing: border-box;
|
|
font-size: medium;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
font-weight: bold;
|
|
}
|
|
|
|
h3 {
|
|
text-align: center;
|
|
}
|
|
|
|
iframe {
|
|
padding: 0;
|
|
margin: 0;
|
|
border: none;
|
|
height: 92%;
|
|
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;
|
|
}
|
|
|
|
td {
|
|
padding: 10px;
|
|
vertical-align: top;
|
|
background-color: rgb(219, 255, 235);
|
|
font-weight: lighter;
|
|
border: 2px solid black;
|
|
text-align: center;
|
|
}
|
|
|
|
th {
|
|
font-weight: bold;
|
|
height: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
audio, video{
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
button {
|
|
background-color: transparent;
|
|
border: none;
|
|
color: black;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover {
|
|
font-weight: bold;
|
|
color: blue;
|
|
}
|
|
|
|
.banner {
|
|
padding-top: 1px;
|
|
height: 8%;
|
|
text-align: center;
|
|
}
|
|
|
|
.banner h1 {
|
|
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;
|
|
}
|
|
|
|
.italic {
|
|
-moz-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(20deg, 0deg);
|
|
-webkit-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(20deg, 0deg);
|
|
-o-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(20deg, 0deg);
|
|
-ms-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(20deg, 0deg);
|
|
transform: scale(1) rotate(0deg) translate(0px, 0px) skew(20deg, 0deg);
|
|
}
|
|
|
|
.logo img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
padding: 10px;
|
|
}
|
|
|
|
.topnav, .topnav form {
|
|
background-color: rgb( 159, 226, 155);
|
|
display: block;
|
|
width: 85%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.topnav form {
|
|
margin-left: auto;
|
|
margin-rigth: auto;
|
|
}
|
|
|
|
.topnav button {
|
|
background-color: transparent;
|
|
display: block;
|
|
text-align: center;
|
|
padding: 14px 16px;
|
|
float: left;
|
|
width: auto;
|
|
}
|
|
|
|
.topnav button:hover {
|
|
background-color: rgb(219, 295, 235);
|
|
color: black;
|
|
}
|
|
|
|
.topnav button.active {
|
|
background-color: #04AA6D;
|
|
color: white;
|
|
}
|
|
|
|
/* Hide the link that should open and close the topnav on small screens */
|
|
.topnav .icon {
|
|
display: none;
|
|
}
|
|
|
|
.play table {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.stats table,.viewdb table {
|
|
width: 75%;
|
|
}
|
|
|
|
.overview table {
|
|
width: 20%;
|
|
}
|
|
|
|
.overview th {
|
|
background-color: rgb(219, 255, 235);
|
|
border: 2px solid black;
|
|
text-align: center;
|
|
padding: 12px;
|
|
}
|
|
|
|
.overview td {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.overview span {
|
|
width: auto;
|
|
margin-right: 20%;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.overview span video {
|
|
width: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
.overview span table {
|
|
width: 50%;
|
|
margin-right: 25%;
|
|
}
|
|
|
|
.overview span td {
|
|
padding: 1;
|
|
}
|
|
|
|
.overview span img {
|
|
margin-left: 15%;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.stats td {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.stats table {
|
|
height: auto;
|
|
}
|
|
|
|
.column {
|
|
width: auto;
|
|
height: 100%;
|
|
}
|
|
|
|
.stats button:hover {
|
|
color: blue;
|
|
}
|
|
|
|
.overview button, .center button{
|
|
font-weight: bold;
|
|
color: blue;
|
|
}
|
|
|
|
.left {
|
|
float: left;
|
|
}
|
|
|
|
.history table,.history img {
|
|
width: auto;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.views .centered button {
|
|
border: 2px solid black;
|
|
background-color: rgb(219, 255, 235);
|
|
padding: 12px;
|
|
}
|
|
|
|
.views .centered button:hover {
|
|
background-color: rgb(159, 226, 155);
|
|
color: black;
|
|
}
|
|
|
|
.settings {
|
|
padding: 12px;
|
|
}
|
|
|
|
.settings h3 {
|
|
text-align: left;
|
|
}
|
|
|
|
.settings button {
|
|
border: 2px solid black;
|
|
background-color: rgb(219, 255, 235);
|
|
padding: 12px;
|
|
}
|
|
|
|
.settings button:hover {
|
|
background-color: rgb(159, 226, 155);
|
|
color: black;
|
|
}
|
|
|
|
.customlabels {
|
|
float:left;
|
|
}
|
|
|
|
.customlabels table {
|
|
height: 100%;
|
|
}
|
|
|
|
.customlabels td {
|
|
border:none;
|
|
background-color: transparent;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.customlabels button {
|
|
padding: 12px;
|
|
background-color: rgb(219, 255, 235);
|
|
border: 2px solid black;
|
|
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%;
|
|
}
|
|
|
|
.column1 form,.column3 form {
|
|
width: 80%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.column1 select,.column3 select {
|
|
height: 80%;
|
|
width: 100%;
|
|
}
|
|
|
|
.spectrogram {
|
|
width:50%
|
|
}
|
|
|
|
.centered {
|
|
text-align: center;
|
|
display: block;
|
|
width: auto;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.full {
|
|
width:100%;
|
|
}
|
|
|
|
.logbutton, .navbuttons {
|
|
float: left;
|
|
}
|
|
|
|
.systemcontrols form,.servicecontrols form {
|
|
text-align: center;
|
|
}
|
|
|
|
.systemcontrols button,.servicecontrols button {
|
|
border: 2px solid black;
|
|
background-color: rgb(219, 255, 235);
|
|
padding: 12px;
|
|
width: 50%;
|
|
}
|
|
|
|
.servicecontrols button {
|
|
width: 20%;
|
|
}
|
|
|
|
body::-webkit-scrollbar {
|
|
display:none
|
|
}
|
|
|
|
@media screen and (max-width: 1290px) {
|
|
.column1, .column3 {
|
|
height: 90%
|
|
}
|
|
}
|
|
@media screen and (max-width: 1000px) {
|
|
.customlabels form {
|
|
width: 95%;
|
|
}
|
|
.column1, .column3 {
|
|
width: 50%;
|
|
height: 100%;
|
|
}
|
|
.column1 select,.column3 select {
|
|
height: 70%;
|
|
}
|
|
.column2 {
|
|
display: none;
|
|
}
|
|
.smaller{
|
|
display: block;
|
|
}
|
|
.systemcontrols button,.servicecontrols button {
|
|
width: 60%;
|
|
padding: 12px;
|
|
background-color: rgb(219, 255, 235);
|
|
}
|
|
.topnav button {display: none;}
|
|
.topnav button {width: 50%;}
|
|
.topnav button.icon {
|
|
padding: 0;
|
|
margin: 0;
|
|
display: block;
|
|
width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.overview span {
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
.overview span img,.overview span table,.overview img {
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
.banner {
|
|
height: auto;
|
|
}
|
|
.banner img {
|
|
display: none;
|
|
}
|
|
.logo img {
|
|
display: block;
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
.version {
|
|
display: none;
|
|
}
|
|
.topnav.responsive {position: relative;}
|
|
.topnav.responsive button {
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
.left {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
.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-rigth:auto;
|
|
}
|
|
.viewdb table,.overview img {
|
|
width: 100%
|
|
}
|
|
.banner {
|
|
height: auto;
|
|
margin-left: 60px;
|
|
}
|
|
.banner img {
|
|
display: none;
|
|
}
|
|
.stream {
|
|
float: right;
|
|
display: block;
|
|
width: 60px;
|
|
}
|
|
.logo img {
|
|
display: block;
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
.play table,.overview table,.stats table {
|
|
width: 100%;
|
|
}
|
|
.topnav {
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
}
|
|
.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;
|
|
}
|
|
.overview span{
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
.overview span img,.overview span table,.overview img {
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
.version {display:none;}
|
|
.left {
|
|
display:none;
|
|
}
|
|
}
|