166 lines
2.9 KiB
CSS
166 lines
2.9 KiB
CSS
|
|
/*
|
|
Safari (iPhone) will auto-zoom if input elements are less than 16px, and the
|
|
default for that platform is 11px. That causes the 'Connect' button to disappear
|
|
from the screen when entering login details.
|
|
To fix this, change the default text size to the minimum; it also makes things
|
|
easier to read.
|
|
*/
|
|
body {
|
|
font-size: 16px;
|
|
}
|
|
|
|
input, button {
|
|
font-size: inherit;
|
|
}
|
|
|
|
select {
|
|
font-family:"Lucida Console", monospace, serif;
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
select option {
|
|
width:auto;
|
|
}
|
|
|
|
|
|
div .menu {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
div .bar {
|
|
width: 25px;
|
|
height: 5px;
|
|
background-color: black;
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.sidenav {
|
|
height: 100%;
|
|
width: 0;
|
|
position: fixed;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: rgba(0,0,0,0.85);
|
|
overflow-x: hidden;
|
|
transition: 0.1s;
|
|
padding-top: 60px;
|
|
}
|
|
|
|
.sidenav a {
|
|
padding: 8px 8px 8px 32px;
|
|
text-decoration: none;
|
|
font-size: 25px;
|
|
color: #818181;
|
|
display: block;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.sidenav a:hover {
|
|
color: #f1f1f1;
|
|
}
|
|
|
|
.sidenav .closebtn {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 25px;
|
|
font-size: 36px;
|
|
margin-left: 50px;
|
|
}
|
|
|
|
@media screen and (max-height: 450px) {
|
|
.sidenav {padding-top: 15px;}
|
|
.sidenav a {font-size: 18px;}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.accordion {
|
|
background-color: #eee;
|
|
color: #444;
|
|
cursor: pointer;
|
|
padding: 18px;
|
|
text-align: left;
|
|
border: none;
|
|
width: 100%;
|
|
outline: none;
|
|
transition: 0.25s;
|
|
}
|
|
|
|
/*
|
|
Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover)
|
|
*/
|
|
.active, .accordion:hover {
|
|
background-color: #ccc;
|
|
}
|
|
|
|
.accordion:before {
|
|
content: '\02795'; /* Unicode character for "plus" sign (+) */
|
|
}
|
|
|
|
.active:before {
|
|
content: "\2796"; /* Unicode character for "minus" sign (-) */
|
|
}
|
|
|
|
|
|
/*
|
|
Style the accordion panel. Note: hidden by default
|
|
*/
|
|
.panel {
|
|
display: none;
|
|
padding: 0 18px;
|
|
background-color: white;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
.panel button {
|
|
outline: none;
|
|
border: none;
|
|
border-radius: 8px;
|
|
color: black;
|
|
background-color: GainsBoro;
|
|
padding: 10px 10px;
|
|
text-align: left;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
margin: 2px 2px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.panel button.on { background-color: Red; color: white; }
|
|
.panel button.someon { background-color: Orange; color: white; }
|
|
.panel button.off { background-color: DimGray; color: white; }
|
|
.panel button.unk { background-color: WhiteSmoke; color: DarkGrey; opacity: 0.6; }
|
|
.panel button.pending { background-color: DarkSeaGreen; color: white; }
|
|
.panel button.disabled { background-color: WhiteSmoke; color: black; opacity: 0.6 }
|
|
|
|
.panel button.accordion { border-radius: 0px; opacity: 0.8; }
|
|
|
|
|
|
.content {
|
|
display: block;
|
|
}
|
|
|
|
.group {
|
|
display: none;
|
|
padding: 6px 12px;
|
|
border: 1px solid #ccc;
|
|
border-top: none;
|
|
}
|
|
|
|
|
|
#progress {
|
|
width: 100%;
|
|
background-color: lightgrey;
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|