197 lines
3.4 KiB
CSS
197 lines
3.4 KiB
CSS
.monitor, #settingsPanel, .buttons, #zonePoints {
|
|
float: left;
|
|
margin: 2px;
|
|
}
|
|
#settingsPanel,
|
|
#zonePoints {
|
|
max-width: 600px;
|
|
width: 50%;
|
|
}
|
|
|
|
#zoneSettings {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
}
|
|
|
|
#zoneSettings th,
|
|
#zoneSettings td {
|
|
border: 1px solid #7f7fb2;
|
|
padding: 3px;
|
|
text-align: left;
|
|
}
|
|
|
|
#zoneSettings th[scope=row] {
|
|
padding: 4px 3px 3px;
|
|
vertical-align: top;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#definitionPanel {
|
|
margin: 2px;
|
|
text-align: center;
|
|
}
|
|
#definitionPanel:after {
|
|
content: ".";
|
|
display: block;
|
|
height: 0;
|
|
font-size: 0;
|
|
clear: both;
|
|
visibility: hidden;
|
|
}
|
|
|
|
#definitionPanel input[type=submit],
|
|
#definitionPanel input[type=submit] {
|
|
margin: 0 4px;
|
|
}
|
|
|
|
#imagePanel {
|
|
float: left;
|
|
position: relative;
|
|
width: 50%;
|
|
min-width: 647px; /* extra 6 px for padding */
|
|
}
|
|
|
|
/* NB: The size of the imageFrame determines the area within which the markers
|
|
* may be moved. When adjusting the padding and margins of the imageFrame and
|
|
* the DIVs within it, test that the markers behave sensibly when dragged to
|
|
* the extreme edges of the imageFrame. */
|
|
#imageFrame {
|
|
position: relative;
|
|
padding: 3px 4px 4px 3px;
|
|
}
|
|
#imageFrame svg {
|
|
box-sizing: border-box;
|
|
position:absolute;
|
|
top: 3px;
|
|
left: 3px;
|
|
right: 3px;
|
|
background: none;
|
|
}
|
|
#imageFrame img {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
#imageFrame img.alarm ,
|
|
#imageFrame img.alert {
|
|
padding: 1px;
|
|
}
|
|
|
|
#imageFrame div {
|
|
position: absolute;
|
|
width: 7px;
|
|
height: 7px;
|
|
margin-left: -3px;
|
|
margin-top: -3px;
|
|
z-index: 5;
|
|
}
|
|
|
|
#imageFrame div {
|
|
background-image: url(../skins/classic/graphics/point-g.png);
|
|
}
|
|
|
|
#imageFrame div.highlight {
|
|
background-image: url(../skins/classic/graphics/point-o.png);
|
|
}
|
|
|
|
#imageFrame div.active {
|
|
background-image: url(../skins/classic/graphics/point-r.png);
|
|
}
|
|
|
|
#zonePoints {
|
|
float: left;
|
|
}
|
|
|
|
#zonePoints td {
|
|
vertical-align: top;
|
|
}
|
|
|
|
#zonePoints table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
}
|
|
#zonePoints table table {
|
|
}
|
|
|
|
#zonePoints table table tr.highlight {
|
|
background-color: #f0e68c;
|
|
}
|
|
|
|
#zonePoints table table tr.active {
|
|
background-color: #ffa07a;
|
|
}
|
|
|
|
#zonePoints table table th,
|
|
#zonePoints table table td {
|
|
border: 1px solid #7f7fb2;
|
|
padding: 3px;
|
|
text-align: center;
|
|
}
|
|
|
|
#zonePoints table a {
|
|
margin: 0 2px;
|
|
}
|
|
.zones polygon {
|
|
fill-opacity: 0.25;
|
|
stroke-width: 0;
|
|
}
|
|
.zones polygon.Editing {
|
|
stroke-width: 2px;
|
|
}
|
|
.Active {
|
|
stroke: #ff0000;
|
|
fill: #ff0000;
|
|
}
|
|
.Inclusive {
|
|
stroke: #FFA500;
|
|
fill: #FFA500;
|
|
}
|
|
.Exclusive {
|
|
stroke: #800080;
|
|
fill: #800080;
|
|
}
|
|
.Preclusive {
|
|
stroke: #0000FF;
|
|
fill: #0000FF;
|
|
}
|
|
|
|
input[name="newZone[Name]"] {
|
|
width: 100%;
|
|
}
|
|
input[name="newAlarmRgbR"],
|
|
input[name="newAlarmRgbG"],
|
|
input[name="newAlarmRgbB"] {
|
|
width: 25%;
|
|
}
|
|
input[name="newZone[MinPixelThreshold]"],
|
|
input[name="newZone[MaxPixelThreshold]"],
|
|
input[name="newZone[FilterX]"],
|
|
input[name="newZone[FilterY]"],
|
|
input[name="newZone[MinFilterPixels]"],
|
|
input[name="newZone[MaxFilterPixels]"],
|
|
input[name="newZone[MinBlobPixels]"],
|
|
input[name="newZone[MaxBlobPixels]"],
|
|
input[name="newZone[MinBlobs]"],
|
|
input[name="newZone[MaxBlobs]"],
|
|
input[name="newZone[MinAlarmPixels]"],
|
|
input[name="newZone[MaxAlarmPixels]"] {
|
|
width: 90px;
|
|
}
|
|
input.ZonePoint {
|
|
width: 75px;
|
|
}
|
|
svg {
|
|
overflow: visible;
|
|
}
|
|
svg circle {
|
|
fill: green;
|
|
overflow: visible;
|
|
}
|
|
#monitorState {
|
|
display: inline;
|
|
float: left;
|
|
}
|
|
#StreamControlButtons {
|
|
display: inline;
|
|
float: right;
|
|
}
|