186 lines
3.4 KiB
CSS
186 lines
3.4 KiB
CSS
#powerVideo .videoPlayer {
|
|
text-align: center;
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
#powerVideo .videoPlayer video{
|
|
max-width: 100%;
|
|
height: 300px;
|
|
object-fit: fill;
|
|
}
|
|
|
|
#powerVideo .videoPlayer:fullscreen video{
|
|
height: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
#powerVideoMonitorControls{
|
|
border-radius: 0 0 5px 5px;
|
|
padding: 5px;
|
|
background: #222;
|
|
margin: 0;
|
|
}
|
|
|
|
#powerVideoMonitorsList{
|
|
margin: 0;
|
|
}
|
|
|
|
#powerVideoMonitorsList .list-item{
|
|
cursor: pointer;
|
|
}
|
|
|
|
#powerVideoMonitorViews {
|
|
text-align: center;
|
|
min-height: 300px;
|
|
background: #444;
|
|
border-radius: 5px 5px 0 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#powerVideo .videoPlayer .videoPlayer-detection-info {
|
|
position: absolute;
|
|
padding: 20px 10px 20px 10px;
|
|
/* height: 100%; */
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
margin: auto;
|
|
z-index: 11;
|
|
opacity: 0;
|
|
background: rgba(0,0,0,0.7);
|
|
color: #fff;
|
|
font-family: monospace;
|
|
overflow: auto;
|
|
text-align: left;
|
|
}
|
|
|
|
#powerVideo .videoPlayer:hover .videoPlayer-detection-info,
|
|
#powerVideo .videoPlayer.show-detection-info .videoPlayer-detection-info {
|
|
opacity: 1
|
|
}
|
|
|
|
#powerVideo .videoPlayer .videoPlayer-stream-objects {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
z-index: 10;
|
|
}
|
|
|
|
#powerVideo .videoPlayer .videoPlayer-detection-info-object div {
|
|
padding-left: 5px;
|
|
}
|
|
|
|
#powerVideo .videoPlayer .videoPlayer-detection-info-object {
|
|
text-align: left
|
|
}
|
|
|
|
.videoPlayer-stream-objects .tag {
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 0;
|
|
background: red;
|
|
color: #fff;
|
|
font-family: monospace;
|
|
font-size: 80%;
|
|
border-radius: 5px 5px 0 0;
|
|
padding: 3px 5px;
|
|
}
|
|
|
|
.videoPlayer-stream-objects .stream-detected-object {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border: 3px solid red;
|
|
background: transparent;
|
|
border-radius: 5px
|
|
}
|
|
|
|
.videoPlayer-stream-objects .stream-detected-point {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border: 3px solid yellow;
|
|
background: transparent;
|
|
border-radius: 5px
|
|
}
|
|
|
|
.videoPlayer-stream-objects .point {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border: 3px solid red;
|
|
border-radius: 50%
|
|
}
|
|
|
|
/* loading */
|
|
#powerVideo .loading {
|
|
font-size: 20pt;
|
|
text-align: center;
|
|
}
|
|
#powerVideo .loading > div {
|
|
margin-top: 5px
|
|
}
|
|
|
|
/* VIS.js */
|
|
|
|
#powerVideo video {
|
|
width: 100%;
|
|
padding: 6px 0 0 0
|
|
}
|
|
|
|
#powerVideo .videoAfter,
|
|
#powerVideo .videoBefore {
|
|
display: none;
|
|
}
|
|
|
|
#powerVideo .vis-timeline {
|
|
font-family: monospace;
|
|
border-radius: 5px;
|
|
border-color: #172b4d;
|
|
}
|
|
#powerVideo .vis-item {
|
|
border-color: #347af1;
|
|
background-color: #4d87d0;
|
|
color: #fff;
|
|
}
|
|
#powerVideo .vis-item.vis-selected {
|
|
border-color: #f5365c;
|
|
background-color: #f5365c;
|
|
color: #fff;
|
|
}
|
|
#powerVideo .vis-panel.vis-bottom {
|
|
border: 1px #17294b;
|
|
}
|
|
#powerVideo .vis-time-axis .vis-grid.vis-minor{
|
|
border-color: #1a539a;
|
|
}
|
|
#powerVideo .vis-time-axis .vis-grid.vis-major {
|
|
border-color: #4d87d0;
|
|
}
|
|
#powerVideo .vis-time-axis .vis-text {
|
|
color: #fff;
|
|
}
|
|
|
|
[timeline-video-file] .progress{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 3px;
|
|
opacity: 0;
|
|
}
|
|
.vis-selected [timeline-video-file] .progress{
|
|
opacity: 1;
|
|
}
|
|
|
|
#powerVideo .vis-item.vis-box {
|
|
border-radius: 5px;
|
|
}
|
|
|
|
#powerVideo .vis-labelset .vis-label {
|
|
color: #fff;
|
|
}
|