236 lines
9.2 KiB
CSS
236 lines
9.2 KiB
CSS
#monitors_live {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mdl-card__media {
|
|
background-color: #333;
|
|
background-repeat: repeat;
|
|
background-position: 50% 50%;
|
|
background-size: cover;
|
|
background-origin: padding-box;
|
|
background-attachment: scroll;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.monitor_item .mdl-card__media {
|
|
box-sizing: border-box;
|
|
background-size: cover;
|
|
padding: 24px;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-flex-grow: 1;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
-webkit-flex-direction: row;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
-webkit-align-items: flex-end;
|
|
-ms-flex-align: end;
|
|
align-items: flex-end;
|
|
}
|
|
.monitor_item * {
|
|
transition: 0.2s!important;
|
|
}
|
|
.monitor_item .mdl-card__supporting-text:not(:last-child) {
|
|
box-sizing: border-box;
|
|
padding: 10px 16px;
|
|
min-height: auto;
|
|
}
|
|
.monitor_item .mdl-card__supporting-text{
|
|
width: 100%;
|
|
}
|
|
.jpegMode .cpu_load .progress-bar,.jpegMode .ram_load .progress-bar{background-color:#5cb85c}
|
|
.jpegMode [system="jpegToggle"],[system].text-success{color:#5cb85c!important}
|
|
|
|
.monitor_item .stream-hud{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}
|
|
.monitor_item .stream-hud .camera_cpu_usage{position:absolute;top:0;left:0;width: 100%;}
|
|
.monitor_item .stream-hud .camera_cpu_usage .progress{width: 100%;}
|
|
.monitor_item .stream-hud .camera_cpu_usage:hover .progress{height:20px;transition:0.2s}
|
|
.monitor_item .stream-hud .controls{position:absolute;top:10px;left:10px;}
|
|
.monitor_item .stream-hud:hover{opacity:1}
|
|
.monitor_item .stream-hud .bottom-text{position:absolute;bottom:0;left:0;width:70%;padding:5px;text-shadow: 0 0 10px #333;}
|
|
.monitor_item .stream-hud:hover .bottom-text{top:0;}
|
|
.monitor_item .stream-hud .bottom-text .detector-fade{background: rgba(0,0,0,0.4);padding:10px 20px;border-radius:10px}
|
|
.monitor_item .stream-hud .lamp{position:absolute;top:5px;right:5px;z-index:1;text-shadow: 0 0 15px #333;}
|
|
.monitor_item .mdl-overlay-menu{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
width: 50%;
|
|
min-width: 200px;
|
|
height: 50%;
|
|
min-height: 200px;
|
|
overflow: auto;
|
|
z-index: 100;
|
|
background: rgba(0,0,0,0.7);
|
|
color: #fff;
|
|
}
|
|
.monitor_item .mdl-overlay-menu-backdrop{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.monitor_item .mdl-overlay-menu{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
width: 50%;
|
|
min-width: 200px;
|
|
height: 50%;
|
|
min-height: 150px;
|
|
overflow: auto;
|
|
z-index: 100;
|
|
background: rgba(0,0,0,0.7);
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
.monitor_item .mdl-overlay-menu li{
|
|
padding: 1rem;
|
|
}
|
|
.monitor_item .mdl-overlay-menu li i{
|
|
float: left;
|
|
font-size: 1.5em;
|
|
}
|
|
.monitor_item .mdl-overlay-menu li:hover{
|
|
background: #021B79;
|
|
}
|
|
.monitor_item[mode="Disabled"] .stream-hud .lamp{color:#5d5d5d}
|
|
.monitor_item[mode="Watch Only"] .stream-hud .lamp{color:#5da8e8}
|
|
.monitor_item[mode="Idle"] .stream-hud .lamp{color:#fff}
|
|
.monitor_item[mode="Record"] .stream-hud .lamp{color:#d9534f}
|
|
/*.data-menu{max-height:700px}*/
|
|
.data-menu.logs{list-style:none;}
|
|
.monitor_item .motionVision{display:none}
|
|
|
|
/* .monitor_item .grid-stack-item-content{width:100%!important;left:0!important;right:0!important;height:100%;} */
|
|
.monitor_item .ui-resizable-se {bottom: 10px!important;}
|
|
.monitor_item .stream-block{position: relative;text-align: center}
|
|
.monitor_item .mdl-data_window{overflow-x: auto;background:rgba(0,0,0,0.7);color:#fff;height:100%}
|
|
.monitor_item .mdl-data_window:not(.col-md-6){width:0;min-width:0;height:0px;min-height:0}
|
|
|
|
|
|
.monitor_item.fullscreen img.stream-element{height:100%;width:auto}
|
|
.monitor_item.fullscreen canvas.stream-element{height:auto;width:auto;background-color:black;}
|
|
.monitor_item .stream-element{border: 0;object-fit: fill;height: 100%;width:100%}
|
|
.monitor_item{position:relative;padding:0;transition:none;background:#000;height:100%;}
|
|
.monitor_item .mdl-card{min-height:auto;border:1px solid #272727;border-radius:0px;overflow:hidden}
|
|
.monitor_item .mdl-card__media{height:100%;position:relative;padding:0!important;display:inline-block!important;background:#000;}
|
|
.monitor_item.selected .stream-element{height:600px}
|
|
.monitor_item.selected .fa-expand:before{content:"\f066"}
|
|
.monitor_item .mdl-card__supporting-text{background:#222;color:#fff!important;display:block;min-height:auto!important}
|
|
.monitor_item.detector_triggered .detector-fade{opacity:1}
|
|
.monitor_item .detector-fade{opacity:0}
|
|
.monitor_item .indifference{position:absolute;width:100%;left:0;top:0;transition:0.2s;}
|
|
.monitor_item .progress{width:100%;background:#333;box-shadow:0;}
|
|
.monitor_item .indifference:hover .progress{height:20px;transition:0.2s}
|
|
.hide_indifference .indifference{display:none!important}
|
|
.hide_indifference [class_toggle="hide_indifference"]{color:#d9534f!important}
|
|
.monitor_item .mdl-card:not(.mdl-cell--4-col-desktop) .mdl-card__supporting-text .monitor_details{display:none;font-size:90%;margin-bottom:10px}
|
|
.monitor_item[mode="Record"] [mode="record"]{display:none}
|
|
.monitor_item[mode="Watch Only"] [mode="start"]{display:none}
|
|
.monitor_item .stream-hud .controls .btn{opacity:0.7}
|
|
.monitor_item.doObjectDetection .progress-bar{background-color: #57d94f}
|
|
|
|
.data-menu{text-align:left;height: 100%; overflow: auto;}
|
|
.data-menu .progress-circle{margin:0 10px 0 0;position:relative;height:40px;width:40px;float:left}
|
|
.data-menu .progress-circle span:after{content:''}
|
|
img.circle-img,div.circle-img{border-radius:50%;height:50px;width:50px}
|
|
.circle-img.sm{height:25px;width:25px}
|
|
|
|
@media screen and (max-width:1500px){
|
|
.monitor_item .mdl-card__supporting-text .btn{
|
|
padding: 5px 10px;
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
|
|
#monitors_live .monitor_item [class_toggle="show_logs"]{display:none}
|
|
#monitors_live .monitor_item .indifference{top:-5px}
|
|
#monitors_live .monitor_item .mdl-cell--8-col{width:100%;border:0;border-radius:0;margin:0;position:relative}
|
|
#monitors_live .monitor_item .mdl-cell--4-col-desktop,.monitor_item .mdl-card__supporting-text{display:none}
|
|
#monitors_live .monitor_item .mdl-card__supporting-text .monitor_details,#monitors_live .monitor_item .mdl-card__supporting-text .btn-group{display:none;text-align:center}
|
|
#monitors_live .monitor_item .mdl-card__supporting-text:not(.meta){display:block;position:absolute;bottom:0;left:0;height:0;padding:0;overflow:visible}
|
|
#monitors_live .monitor_item.show_data .mdl-card__supporting-text:not(.meta){width:50%}
|
|
#monitors_live .monitor_item.detector_triggered .mdl-card__supporting-text:not(.meta) .indifference{opacity:0.5;}
|
|
#monitors_live .monitor_item:hover .mdl-card__supporting-text:not(.meta){padding:15px;z-index:15;height:auto;}
|
|
#monitors_live .monitor_item:hover .mdl-card__supporting-text .monitor_details{display:block}
|
|
#monitors_live .monitor_item:hover .mdl-card__supporting-text .btn-group{display:inline-block}
|
|
|
|
.signal.green{background:#5cb85c}
|
|
[status="1"] .btn[video="launch"],[data-status="1"] .btn[video="launch"]{background:#337ab7;border-color:#337ab7}
|
|
[status="2"] .btn[launch="video"],[status="2"] .btn[video="launch"],[data-status="2"] .btn[video="launch"]{background:#a59100;border-color:#a59100}
|
|
.signal.red{background:#c9302c}
|
|
|
|
|
|
|
|
#monSectionStreamChannels,#monSectionInputMaps{margin-bottom: 15px;}
|
|
#monSectionStreamChannels:empty,#monSectionInputMaps:empty{display:none}
|
|
|
|
|
|
.dropdown-menu.scrollable{max-height:300px}
|
|
.upload_file input{display:none}
|
|
#video_preview .stream-objects{right:0;margin:auto;display:inline-block;position:relative;width:auto}
|
|
.stream-block,.stream-objects{overflow: hidden!important}
|
|
.stream-objects{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}
|
|
.stream-objects .tag{position:absolute;top:5px;left:5px;background:#d9534f;color:#fff;font-family:monospace;font-size:80%;border-radius: 15px;padding:3px 5px;line-height: 1}
|
|
.stream-objects .stream-detected-object{position:absolute;top:0;left:0;border:3px dotted red;background:transparent;border-radius:5px}
|
|
.stream-objects .stream-detected-point{position:absolute;top:0;left:0;border:3px solid yellow;background:transparent;border-radius:5px}
|
|
.stream-objects .point{position:absolute;top:0;left:0;border:3px solid red;border-radius:50%}
|
|
.stream-objects .matrix-info {
|
|
margin-top: 1rem;
|
|
background: rgba(0,0,0,0.3);
|
|
color: #fff;
|
|
width: 100%;
|
|
padding: 1rem;
|
|
font-family: monospace;
|
|
z-index: 99;
|
|
position: relative;
|
|
}
|
|
.stream-objects .matrix-info.yellow{
|
|
color: yellow;
|
|
}
|
|
.monitor_item .gps-map {
|
|
position: absolute;
|
|
width: 190px;
|
|
height: 190px;
|
|
border-radius: 50%;
|
|
border: 1px solid #333;
|
|
z-index: 9;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
}
|
|
.monitor_item .gps-map-details {
|
|
position: absolute;
|
|
padding: 5px 7px;
|
|
border-radius: 25px;
|
|
background:rgba(0,0,0,0.5);
|
|
z-index: 11;
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
.dont-stretch-monitors .monitor_item .stream-element {
|
|
object-fit: contain!important;
|
|
}
|
|
.grid-stack-item > .grid-stack-item-content {
|
|
inset: 0!important;
|
|
overflow-y: hidden!important;
|
|
}
|
|
|
|
.detector_triggered {
|
|
border: 2px solid red;
|
|
animation: border-pulsate-died 2s infinite;
|
|
}
|