virmaior
91e76ec944
fixed display of camera version, fixed issue jpeg.cgi, added diagnostics page, minor css improvements, made shared.cgi for common code between diagnostics and config
148 lines
2.3 KiB
CSS
148 lines
2.3 KiB
CSS
BODY {
|
|
--feed_ratio: 2.5;
|
|
--display_bar_height: 20px;
|
|
--border-color: #ccc;
|
|
padding-bottom: var(--display_bar_height);
|
|
}
|
|
H1 {
|
|
background-color:blue;
|
|
color:white;
|
|
height:calc(108px * (var(--feed_ratio) - 1));
|
|
margin-top:0;
|
|
padding:5px;
|
|
margin-bottom:108px;
|
|
width:calc(100% - (192px * var(--feed_ratio)));
|
|
}
|
|
|
|
.ii_block {
|
|
border:3px solid var(--border-color);
|
|
margin-bottom:5px;
|
|
padding:2px;
|
|
border-radius:3px;
|
|
}
|
|
.ii_block_name {
|
|
background-color:var(--border-color);
|
|
text-align:center;
|
|
font-weight:bold;
|
|
color:#fff;
|
|
margin:-2px;
|
|
margin-bottom:3px;
|
|
}
|
|
.ii_info {
|
|
color:#333;
|
|
}
|
|
.ii {
|
|
width:100%;
|
|
position:relative;
|
|
display:flex;
|
|
}
|
|
.ii_key_DIV {
|
|
|
|
flex:0 0 40vw;
|
|
font-weight:bold;
|
|
}
|
|
.ii_value_DIV {
|
|
flex: 0 0 40vw;
|
|
text-align:right;
|
|
}
|
|
.ii_value {
|
|
width:75%;
|
|
}
|
|
.feed {
|
|
position:absolute;
|
|
top:10px;
|
|
right:0px;
|
|
width:calc(192px * var(--feed_ratio));
|
|
height:calc(108px * var(--feed_ratio));
|
|
z-index:10;
|
|
}
|
|
.ii_explain {
|
|
height:25px;
|
|
overflow:hidden;
|
|
width:25px;
|
|
position:relative;
|
|
}
|
|
.ii_explain:hover {
|
|
height: auto;
|
|
position: absolute;
|
|
left: 10%;
|
|
width: 80%;
|
|
border-radius: 3px;
|
|
padding: 5px;
|
|
background-color: #ccc;
|
|
z-index: 10;
|
|
border: 3px solid blue;
|
|
font-family: monospace;
|
|
white-space:pre-wrap;
|
|
}
|
|
.ii_explain:hover PRE {
|
|
white-space:pre-wrap;
|
|
}
|
|
.ii_explain:hover:after {
|
|
content:"";
|
|
border:none;
|
|
margin:0;
|
|
padding:0;
|
|
width:0;
|
|
height:0;
|
|
}
|
|
.ii_explain:after {
|
|
color:white;
|
|
content:"?";
|
|
text-align:center;
|
|
background-color:blue;
|
|
border:2px solid #ccc;
|
|
border-radius:3px;
|
|
padding-left:2px;
|
|
padding-right:2px;
|
|
position:absolute;
|
|
left:0;
|
|
top:0;
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
|
|
.revert_DIV {
|
|
display:flex;
|
|
width:100%;
|
|
}
|
|
.revert_DIV DIV:nth-child(1) {
|
|
width:30px;
|
|
}
|
|
.current_revert {
|
|
background-color:#edf054;
|
|
}
|
|
|
|
#display_BAR {
|
|
position:fixed;
|
|
bottom:0;
|
|
background-color:blue;
|
|
border-top:1px solid lightblue;
|
|
color:#fff;
|
|
display:flex;
|
|
width:100%;
|
|
height:var(--display_bar_height);
|
|
}
|
|
#display_BAR DIV {
|
|
padding-right:15px;
|
|
}
|
|
.ver_DIV {
|
|
padding-left: 2vw;
|
|
min-width: 12vw;
|
|
font-family: monospace;
|
|
flex: 1 0 9vw;
|
|
overflow: hidden;
|
|
font-size: 1.1vw;
|
|
}
|
|
.ver_DIV:before {
|
|
content:attr(vertype);
|
|
font-weight:bold;
|
|
padding-right:10px;
|
|
}
|
|
.ver_DIV[vertype="wz_mini"] {
|
|
flex:1 0 400px;
|
|
}
|
|
.fail_val {
|
|
background-color:#fcc;
|
|
}
|