Add dark CSS for classic view
Robin Daermann
parent
911f0fad28
commit
5588406570
|
|
@ -2,5 +2,6 @@ AUTOMAKE_OPTIONS = gnu
|
||||||
|
|
||||||
webdir = @WEB_PREFIX@/skins/classic/css
|
webdir = @WEB_PREFIX@/skins/classic/css
|
||||||
|
|
||||||
SUBDIRS = flat \
|
SUBDIRS = dark \
|
||||||
|
flat \
|
||||||
classic
|
classic
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
AUTOMAKE_OPTIONS = gnu
|
||||||
|
|
||||||
|
webdir = @WEB_PREFIX@/skins/classic/css/dark
|
||||||
|
|
||||||
|
SUBDIRS = views
|
||||||
|
|
||||||
|
dist_web_DATA = \
|
||||||
|
skin.css \
|
||||||
|
control.css \
|
||||||
|
export.css
|
||||||
|
|
@ -0,0 +1,147 @@
|
||||||
|
.ptzControls {
|
||||||
|
vertical-align: top;
|
||||||
|
margin: 10px auto 0;
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls input.ptzTextBtn {
|
||||||
|
margin-top: 2px;
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls input[type=image] {
|
||||||
|
border: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel .arrowControl {
|
||||||
|
width: 40px;
|
||||||
|
height: 180px;
|
||||||
|
margin: 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel .arrowControl input {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel .longArrowBtn {
|
||||||
|
width: 32px;
|
||||||
|
height: 48px;
|
||||||
|
margin: 0 auto;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* This is a bit of a hack as these lines should be in the above
|
||||||
|
* section but that messes up layout on IE6
|
||||||
|
*/
|
||||||
|
/*
|
||||||
|
.ptzControls .controlsPanel > div > div.longArrowBtn {
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -16px;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel .upBtn {
|
||||||
|
background: url("../../graphics/arrow-l-u.gif") no-repeat 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel .downBtn {
|
||||||
|
background: url("../../graphics/arrow-l-d.gif") no-repeat 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel .focusControls {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel .zoomControls {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel .irisControls {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel .whiteControls {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel .pantiltPanel {
|
||||||
|
margin: 0 auto;
|
||||||
|
height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel .pantiltPanel .pantiltControls .pantiltButtons {
|
||||||
|
margin: 5px auto;
|
||||||
|
border: 1px solid #006699;
|
||||||
|
text-align: center;
|
||||||
|
padding: 1px;
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel .pantiltPanel .pantiltControls .arrowBtn {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
cursor: pointer;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upLeftBtn {
|
||||||
|
background: url("../../graphics/arrow-ul.gif") no-repeat 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upBtn {
|
||||||
|
background: url("../../graphics/arrow-u.gif") no-repeat 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upRightBtn {
|
||||||
|
background: url("../../graphics/arrow-ur.gif") no-repeat 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel .pantiltPanel .pantiltControls .leftBtn {
|
||||||
|
background: url("../../graphics/arrow-l.gif") no-repeat 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel .pantiltPanel .pantiltControls .centerBtn {
|
||||||
|
background: url("../../graphics/center.gif") no-repeat 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel .pantiltPanel .pantiltControls .rightBtn {
|
||||||
|
background: url("../../graphics/arrow-r.gif") no-repeat 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downLeftBtn {
|
||||||
|
background: url("../../graphics/arrow-dl.gif") no-repeat 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downBtn {
|
||||||
|
background: url("../../graphics/arrow-d.gif") no-repeat 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downRightBtn {
|
||||||
|
background: url("../../graphics/arrow-dr.gif") no-repeat 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .controlsPanel .pantiltPanel .powerControls {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .presetControls {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .presetControls input {
|
||||||
|
margin: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptzControls .presetControls input.ptzNumBtn {
|
||||||
|
padding: 1px 2px;
|
||||||
|
width: 24px;
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #016A9D;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
body {
|
||||||
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||||
|
font-size:10px;
|
||||||
|
font-weight: normal
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
border: 1px solid #7f7fb2;
|
||||||
|
text-align: center;
|
||||||
|
padding: 2px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:link {
|
||||||
|
color: #7f7fb2;
|
||||||
|
text-decoration: none
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: #7f7fb2;
|
||||||
|
text-decoration: none
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #666699;
|
||||||
|
text-decoration: underline
|
||||||
|
}
|
||||||
|
|
||||||
|
img.thumb {
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
td.monoRow {
|
||||||
|
line-height: 200%;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventFrames tr.alarm {
|
||||||
|
background-color: #fa8072;
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventFrames tr.bulk {
|
||||||
|
background-color: #cccccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventFrames tr.normal {
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,448 @@
|
||||||
|
/*
|
||||||
|
* ZoneMinder Base Stylesheet, $Date$, $Revision$
|
||||||
|
* Copyright (C) 2001-2008 Philip Coombes
|
||||||
|
*
|
||||||
|
* This program is free software; you can redistribute it and/or
|
||||||
|
* modify it under the terms of the GNU General Public License
|
||||||
|
* as published by the Free Software Foundation; either version 2
|
||||||
|
* of the License, or (at your option) input[type=password], any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program; if not, write to the Free Software
|
||||||
|
* Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Primary look and feel styles
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #dddddd;
|
||||||
|
background-color: #222222;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 120%;
|
||||||
|
color: #10a4e8;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 110%;
|
||||||
|
color: #10a4e8;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 100%;
|
||||||
|
color: #117AAd;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 100%;
|
||||||
|
color: #117AAd;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 100%;
|
||||||
|
color: #dddddd;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #117AAd;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:link {
|
||||||
|
color: #8f8fc2;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: #8f8fc2;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #7777aa;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,textarea,select,button {
|
||||||
|
border: 1px #8f8fc2 solid;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 100%;
|
||||||
|
color: #eeeeee;
|
||||||
|
background-color: #555555;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=text], input[type=password], textarea {
|
||||||
|
padding: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.noborder {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[disabled] {
|
||||||
|
color: #777777;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.normal {
|
||||||
|
border: #cccccc solid 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.alarm {
|
||||||
|
border: red solid 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
|
border: 0;
|
||||||
|
color: #8f8fc2;
|
||||||
|
background-color: #8f8fc2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Tabbed headings
|
||||||
|
*/
|
||||||
|
ul.tabList {
|
||||||
|
float: left;
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 0 -4px 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.tabList li {
|
||||||
|
float: left;
|
||||||
|
border: 1px solid;
|
||||||
|
color: #dddddd;
|
||||||
|
border: #8f8fc2 solid 1px;
|
||||||
|
border-bottom-width: 0;
|
||||||
|
margin: 0 2px 0 0;
|
||||||
|
background: #555555;
|
||||||
|
text-align: center;
|
||||||
|
padding: 3px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.tabList li a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.tabList li:hover {
|
||||||
|
background-color: #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.tabList li.active {
|
||||||
|
background-color: #000000;
|
||||||
|
border-bottom: #8f8fc2 dotted 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.tabList li.active a {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Major league table for multiple inputs or presentation
|
||||||
|
*/
|
||||||
|
|
||||||
|
#content table.major {
|
||||||
|
margin: 4px auto;
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content table.major tr.highlight {
|
||||||
|
color: #eeeeee;
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content table.major thead tr th {
|
||||||
|
padding-top: 6px;
|
||||||
|
padding-bottom: 6px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content table.major tfoot td {
|
||||||
|
padding-top: 6px;
|
||||||
|
padding-bottom: 6px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content table.major th, #content table.major td {
|
||||||
|
border: 1px solid #8f8fc2;
|
||||||
|
padding: 3px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content table.major th {
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content table.major td {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content table.major th[scope=row] {
|
||||||
|
padding: 4px 3px 3px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content table.major .colMark, #content table.major .colSelect {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
* Lesser table for very simple forms
|
||||||
|
*/
|
||||||
|
|
||||||
|
#content table.minor {
|
||||||
|
width: 280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content table.minor td {
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content table.minor .colLeft {
|
||||||
|
width: 50%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content table.minor .colRight {
|
||||||
|
width: 50%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content table.minor input[type=submit]
|
||||||
|
{
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 0 2px;
|
||||||
|
font-size: 120%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
font-size: 11px;
|
||||||
|
background-color: #222222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay .overlayHeader {
|
||||||
|
color: #eeeeee;
|
||||||
|
background-color: #070707;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay fieldset {
|
||||||
|
background-color: #222222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.validation-advice {
|
||||||
|
padding: 4px;
|
||||||
|
color: #dc143c;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
border: 1px solid #dddddd;
|
||||||
|
padding: 4px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
border-radius: 2px;
|
||||||
|
-moz-border-radius: 2px;
|
||||||
|
-webkit-border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset > legend {
|
||||||
|
padding: 0 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Behavior classes
|
||||||
|
*/
|
||||||
|
.alarm, .errorText {
|
||||||
|
color: #dc143c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert, .warnText {
|
||||||
|
color: #ff8c00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ok, .infoText {
|
||||||
|
color: #77a328;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fakelink {
|
||||||
|
color: #8f8fc2;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fakelink:hover {
|
||||||
|
color: #336699;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Generic useful classes, especially with mootools
|
||||||
|
*/
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invisible {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nowrap {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.clear {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
.table-th-sort {
|
||||||
|
font-style:italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
td.table-td-sort {
|
||||||
|
font-style:italic;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
th.table-th-sort {
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
th.table-th-sort span.table-th-sort-span {
|
||||||
|
float: right;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
background: url("../graphics/arrow-s-u.gif") no-repeat 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
th.table-th-sort-rev span.table-th-sort-span {
|
||||||
|
float: right;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
background: url("../graphics/arrow-s-d.gif") no-repeat 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-tr-odd {
|
||||||
|
background-color: #070707;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Primary layout styles
|
||||||
|
*/
|
||||||
|
|
||||||
|
#page {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
width: 96%;
|
||||||
|
line-height: 24px;
|
||||||
|
margin: 8px auto;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header h2 {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header h2.floating {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#headerControl {
|
||||||
|
width: 50%;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#headerButtons {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#headerButtons a {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#headerButtons input {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content {
|
||||||
|
width: 96%;
|
||||||
|
margin: 8px auto;
|
||||||
|
line-height: 130%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content p {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content p.textblock {
|
||||||
|
text-align: justify;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content p.textblock br {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
#contentDiv {
|
||||||
|
margin: 0 auto 8px;
|
||||||
|
line-height: 140%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
#content > input[type=submit], #content > input[type=button], #content > button {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content table input[type=submit], #content table input[type=button], #content table button {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contentButtons {
|
||||||
|
margin-top: 8px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contentButtons input {
|
||||||
|
margin-left: 8px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer {
|
||||||
|
width: 96%;
|
||||||
|
margin: 8px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
AUTOMAKE_OPTIONS = gnu
|
||||||
|
|
||||||
|
webdir = @WEB_PREFIX@/skins/classic/css/dark/views
|
||||||
|
|
||||||
|
dist_web_DATA = \
|
||||||
|
console.css \
|
||||||
|
controlcaps.css \
|
||||||
|
control.css \
|
||||||
|
devices.css \
|
||||||
|
event.css \
|
||||||
|
events.css \
|
||||||
|
export.css \
|
||||||
|
filter.css \
|
||||||
|
frame.css \
|
||||||
|
frames.css \
|
||||||
|
groups.css \
|
||||||
|
log.css \
|
||||||
|
monitor.css \
|
||||||
|
montage_2wide.css \
|
||||||
|
montage_3wide50enlarge.css \
|
||||||
|
montage_3wide.css \
|
||||||
|
montage_4wide.css \
|
||||||
|
montage.css \
|
||||||
|
montage_freeform.css \
|
||||||
|
options.css \
|
||||||
|
stats.css \
|
||||||
|
timeline.css \
|
||||||
|
timeline.css.php \
|
||||||
|
video.css \
|
||||||
|
watch.css \
|
||||||
|
zone.css
|
||||||
|
|
@ -0,0 +1,97 @@
|
||||||
|
#systemTime {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#systemStats {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitorSummary {
|
||||||
|
float: left;
|
||||||
|
text-align: left;
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#devices {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginBandwidth {
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cycleMontage {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#options {
|
||||||
|
float: right;
|
||||||
|
text-align: right;
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#consoleTable {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#consoleTable tr.highlight {
|
||||||
|
background-color: #111111;
|
||||||
|
}
|
||||||
|
|
||||||
|
#consoleTable thead th {
|
||||||
|
padding-bottom: 4px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
#consoleTable tfoot td {
|
||||||
|
padding-top: 4px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
#consoleTable th,td {
|
||||||
|
height: 16px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#consoleTable .colOrder {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#consoleTable .colMark {
|
||||||
|
width: 32px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#consoleTable .colEvents {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#consoleTable .colZones {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#consoleTable .colLeftButtons {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#consoleTable .colLeftButtons input {
|
||||||
|
margin-right: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#consoleTable .colRightButtons {
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#consoleTable .colRightButtons input {
|
||||||
|
margin: 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
@import url(../control.css);
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
#content table.major .colCanMove, #content table.major .colCanZoom, #content table.major .colCanFocus, #content table.major .colCanIris, #content table.major .colCanWhiteBal, #content table.major .colHasPresets {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
input.set {
|
||||||
|
border: 1px #7F7FB2 dashed;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,232 @@
|
||||||
|
#dataBar {
|
||||||
|
width: 100%;
|
||||||
|
margin: 2px auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dataBar #dataTable {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dataBar #dataTable td {
|
||||||
|
text-align: center;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menuBar1 {
|
||||||
|
width: 100%;
|
||||||
|
height: 1.5em;
|
||||||
|
padding: 3px 0;
|
||||||
|
text-align: center;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menuBar1 #nameControl {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menuBar1 #nameControl #eventName {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menuBar1 #replayControl {
|
||||||
|
float: right;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menuBar1 #scaleControl {
|
||||||
|
float: right;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menuBar2 {
|
||||||
|
width: 100%;
|
||||||
|
height: 1.2em;
|
||||||
|
padding: 3px 0;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menuBar2 div {
|
||||||
|
text-align: left;
|
||||||
|
float: left;
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menuBar2 #closeWindow {
|
||||||
|
float: right;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#imageFeed {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitorStatus {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 3px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitorStatus #enableAlarms {
|
||||||
|
position: absolute;
|
||||||
|
left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitorStatus #forceAlarm {
|
||||||
|
position: absolute;
|
||||||
|
right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitorStatus #monitorState {
|
||||||
|
}
|
||||||
|
|
||||||
|
#dvrControls {
|
||||||
|
margin-top: 3px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dvrControls input {
|
||||||
|
height: 20px;
|
||||||
|
width: 28px;
|
||||||
|
padding-bottom: 3px;
|
||||||
|
margin: 0 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dvrControls input[disabled=disabled] {
|
||||||
|
color: #aaaaaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dvrControls input.active {
|
||||||
|
border: 1px solid blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dvrControls input.inactive {
|
||||||
|
border: 1px solid green;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dvrControls input.unavail {
|
||||||
|
border: 1px solid red;
|
||||||
|
}
|
||||||
|
|
||||||
|
#replayStatus {
|
||||||
|
margin: 3px 0 2px;
|
||||||
|
text-align: center;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
#replayStatus > span {
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#progressBar {
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid #666666;
|
||||||
|
height: 15px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#progressBar .progressBox {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
height: 15px;
|
||||||
|
background: #eeeeee;
|
||||||
|
border-left: 1px solid #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
#progressBar .complete {
|
||||||
|
background: #aaaaaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventStills {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventThumbsPanel {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
margin: 4px auto;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventThumbs {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventThumbs img {
|
||||||
|
height: 25px; /* HACK - Although this is pixels it will be interpreted as a scale %ge, so 25px = 25% scaling for thumbnails */
|
||||||
|
margin: 2px;
|
||||||
|
background-color: #dddddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventThumbs img.placeholder {
|
||||||
|
/* width: 100px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventThumbs img.selected {
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventImagePanel {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventImageFrame {
|
||||||
|
border: 2px solid gray;
|
||||||
|
background-color: white;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventImage {
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventImageBar {
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventImageStats {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventImageData {
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventImageClose {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventImageNav {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventImageNav input {
|
||||||
|
width: 32px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#thumbsSliderPanel {
|
||||||
|
width: 400px;
|
||||||
|
margin: 4px auto 0;
|
||||||
|
background: #888888;
|
||||||
|
padding: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#thumbsSlider {
|
||||||
|
width: 400px;
|
||||||
|
height: 10px;
|
||||||
|
background: #dddddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
#thumbsKnob {
|
||||||
|
width: 8px;
|
||||||
|
height: 10px;
|
||||||
|
background-color: #444444;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
#controls {
|
||||||
|
height: 16px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#controls a {
|
||||||
|
width: 32%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#controls #refreshLink {
|
||||||
|
position: absolute;
|
||||||
|
left: 0%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#controls #filterLink {
|
||||||
|
position: absolute;
|
||||||
|
left: 34%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#controls #timelineLink {
|
||||||
|
position: absolute;
|
||||||
|
left: 68%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contentTable.major .colTime {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contentTable.major .colId, #contentTable.major .colDuration, #contentTable.major .colFrames, #contentTable.major .colAlarmFrames, #contentTable.major .colTotScore, #contentTable.major .colMaxScore, #contentTable.major .colAvgScore {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contentTable.major td.colDuration {
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
#contentTable + input {
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contentTable th, #contentTable td {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#exportProgress {
|
||||||
|
margin: 8px auto 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#downloadLink {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
#filterSelector {
|
||||||
|
}
|
||||||
|
|
||||||
|
table.filterTable {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fieldsTable td {
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fieldsTable input[type=button] {
|
||||||
|
width: 1.6em;
|
||||||
|
margin-left: 2px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sortTable input[type=text] {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#actionsTable input[type=text] {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
#controls {
|
||||||
|
width: 80%;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#controls a {
|
||||||
|
width: 40px;
|
||||||
|
margin-left: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#firstLink {
|
||||||
|
position: absolute;
|
||||||
|
left: 13%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#prevLink {
|
||||||
|
position: absolute;
|
||||||
|
left: 37%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nextLink {
|
||||||
|
position: absolute;
|
||||||
|
left: 63%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#lastLink {
|
||||||
|
position: absolute;
|
||||||
|
left: 87%;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
#contentTable.major .colId, #contentTable.major .colType, #contentTable.major .colTimeStamp, #contentTable.major .colTimeDelta, #contentTable.major .colScore {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.alarm {
|
||||||
|
background-color: #fa8072;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.bulk {
|
||||||
|
background-color: #cccccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.normal {
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
#contentTable .colSelect {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contentTable .colSelect input {
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,56 @@
|
||||||
|
#logSummary {
|
||||||
|
margin: 4px auto 0;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logSummary tr {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logSummary td {
|
||||||
|
border: 1px solid #8f8fc2;
|
||||||
|
padding: 0 6px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.log-fat td {
|
||||||
|
color: #222222;
|
||||||
|
background-color:#ffcccc;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.log-err td {
|
||||||
|
color: #222222;
|
||||||
|
background-color:#ffcccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.log-war td {
|
||||||
|
color: #222222;
|
||||||
|
background-color: #ffe4b5;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.log-dbg td {
|
||||||
|
color: #666666;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
#exportLog label {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
#exportLog input[type=radio] {
|
||||||
|
margin-right: 4px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
#exportError {
|
||||||
|
display: none;
|
||||||
|
color: #dc143c;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#exportErrorText {
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
.swatch {
|
||||||
|
border: 1px solid black;
|
||||||
|
margin-left: 3px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
#header {
|
||||||
|
width: 99%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#layout {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content {
|
||||||
|
width: 99%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitors .alarm {
|
||||||
|
color: #ff0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitors .alert {
|
||||||
|
color: #ffa500;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitors .imageFeed {
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitors .imageFeed img.idle {
|
||||||
|
border: 2px solid #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitors .imageFeed img.alarm {
|
||||||
|
border: 2px solid #ff0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitors .imageFeed img.alert {
|
||||||
|
border: 2px solid #ffa500;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitors .monitorState {
|
||||||
|
margin: 2px auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
#monitors {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitors .monitorFrame {
|
||||||
|
padding: 1px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitors .monitor {
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitorFrame0, #monitorFrame2, #monitorFrame4, #monitorFrame6, #monitorFrame8, #monitorFrame10, #monitorFrame12, #monitorFrame14 {
|
||||||
|
width: 49%;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitor0, #monitor2, #monitor4, #monitor6, #monitor8, #monitor10, #monitor12, #monitor14 {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitorFrame1, #monitorFrame3, #monitorFrame5, #monitorFrame7, #monitorFrame9, #monitorFrame11, #monitorFrame13, #monitorFrame15 {
|
||||||
|
width: 49%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitor1, #monitor3, #monitor5, #monitor7, #monitor9, #monitor11, #monitor13, #monitor15 {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
#monitors {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitors .monitorFrame {
|
||||||
|
padding: 1px;
|
||||||
|
float: left;
|
||||||
|
width: 33%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitors .monitor {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitorFrame0, #monitorFrame3, #monitorFrame6, #monitorFrame9, #monitorFrame12, #monitorFrame15 {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitor0, #monitor3, #monitor6, #monitor9, #monitor12, #monitor15 {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitorFrame1, #monitorFrame4, #monitorFrame7, #monitorFrame10, #monitorFrame13, #monitorFrame16 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitor1, #monitor4, #monitor7, #monitor10, #monitor13, #monitor16 {
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitorFrame2, #monitorFrame5, #monitorFrame8, #monitorFrame11, #monitorFrame14, #monitorFrame17 {
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitor2, #monitor5, #monitor8, #monitor11, #monitor14, #monitor17 {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
#monitors {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitors .monitorFrame {
|
||||||
|
float: left;
|
||||||
|
padding: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitors .monitor {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitorFrame0, #monitorFrame3, #monitorFrame6, #monitorFrame9, #monitorFrame12, #monitorFrame15 {
|
||||||
|
width: 32%;
|
||||||
|
text-align: right;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitor0, #monitor3, #monitor6, #monitor9, #monitor12, #monitor15 {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitorFrame1, #monitorFrame4, #monitorFrame7, #monitorFrame10, #monitorFrame13, #monitorFrame16 {
|
||||||
|
width: 32%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitor1, #monitor4, #monitor7, #monitor10, #monitor13, #monitor16 {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitorFrame2, #monitorFrame5, #monitorFrame8, #monitorFrame11, #monitorFrame14, #monitorFrame17 {
|
||||||
|
width: 32%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitor2, #monitor5, #monitor8, #monitor11, #monitor14, #monitor17 {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitors .imageFeed img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitors .monitorFrame > div.alarm, #monitors .monitorFrame > div.alert {
|
||||||
|
position: absolute;
|
||||||
|
width: 96%;
|
||||||
|
left: 2%;
|
||||||
|
top: 72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitors .monitorFrame > div.alert {
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitors .monitorFrame > div.alarm {
|
||||||
|
z-index: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitors .monitorFrame div.alarm, #monitors .monitorFrame div.alert {
|
||||||
|
font-size: 140%;
|
||||||
|
line-height: 160%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitors .monitorFrame div.monitorState {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
#monitors {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitors .monitorFrame {
|
||||||
|
padding: 1px;
|
||||||
|
float: left;
|
||||||
|
width: 24.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitors .monitor {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitorFrame0, #monitorFrame4, #monitorFrame8, #monitorFrame12, #monitorFrame16, #monitorFrame20 {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitor0, #monitor4, #monitor8, #monitor12, #monitor16, #monitor20 {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitorFrame1, #monitorFrame5, #monitorFrame9, #monitorFrame13, #monitorFrame17, #monitorFrame21 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitor1, #monitor5, #monitor9, #monitor13, #monitor17, #monitor21 {
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitorFrame2, #monitorFrame6, #monitorFrame10, #monitorFrame14, #monitorFrame18, #monitorFrame22 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitor2, #monitor6, #monitor10, #monitor14, #monitor18, #monitor22 {
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitorFrame3, #monitorFrame7, #monitorFrame11, #monitorFrame15, #monitorFrame19, #monitorFrame23 {
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitor3, #monitor7, #monitor11, #monitor15, #monitor19, #monitor23 {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
#monitors {
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitors .monitorFrame {
|
||||||
|
float: left;
|
||||||
|
padding: 1px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
input.small {
|
||||||
|
width: 6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.medium {
|
||||||
|
width: 9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.large {
|
||||||
|
width: 20em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contentTable.optionTable th, #contentTable.optionTable td {
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contentTable.userTable th, #contentTable.userTable td {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contentTable.userTable .colMonitor, #contentTable.userTable .colUsername {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
#settingsPanel {
|
||||||
|
float: left;
|
||||||
|
margin: 0 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pluginSettings {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pluginSettings th, #pluginSettings td {
|
||||||
|
border: 1px solid #7f7fb2;
|
||||||
|
padding: 3px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pluginSettings th[scope=row] {
|
||||||
|
padding: 4px 3px 3px;
|
||||||
|
vertical-align: top;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
#contentTable.major .colZone, #contentTable.major .colPixelDiff, #contentTable.major .colAlarmPx, #contentTable.major .colFilterPx, #contentTable.major .colBlobPx, #contentTable.major .colBlobs, #contentTable.major .colBlobSizes, #contentTable.major .colAlarmLimits, #contentTable.major .colScore {
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contentTable.major .rowNoStats {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,222 @@
|
||||||
|
#content {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid #666666;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
position: relative;
|
||||||
|
margin: 0 auto;
|
||||||
|
color: #016A9D;
|
||||||
|
height: 30px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#listLink {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 20px;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#closeLink {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
right: 20px;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#topPanel {
|
||||||
|
position: relative;
|
||||||
|
height: 220px;
|
||||||
|
margin: 4px auto 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#topPanel #imagePanel
|
||||||
|
{
|
||||||
|
width: 50%;
|
||||||
|
float: left;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#topPanel #image {
|
||||||
|
float: right;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 90%;
|
||||||
|
text-align: right;
|
||||||
|
margin-right: 2px;
|
||||||
|
background-color: #222222;
|
||||||
|
border: 1px solid #cccccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
#topPanel #image img {
|
||||||
|
float: left;
|
||||||
|
top: 0px;
|
||||||
|
background-color: #222222;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#topPanel #dataPanel {
|
||||||
|
width: 45%;
|
||||||
|
float: left;
|
||||||
|
text-align: left;
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#topPanel #textPanel {
|
||||||
|
text-align: left;
|
||||||
|
width: 100%;
|
||||||
|
height: 140px;
|
||||||
|
margin: 0 auto;
|
||||||
|
color: #dddddd;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 14px;
|
||||||
|
background-color: #222222;
|
||||||
|
border: 1px solid #cccccc;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#topPanel #navPanel {
|
||||||
|
width: 100%;
|
||||||
|
height: 70px;
|
||||||
|
margin: 4px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#topPanel #navPanel input {
|
||||||
|
background-color: #111111;
|
||||||
|
border: 1px solid #cccccc;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chartPanel {
|
||||||
|
position: relative;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chartPanel #chart {
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid black;
|
||||||
|
margin: 0 auto;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chartPanel #activity {
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
left: 0px;
|
||||||
|
border-bottom: 1px solid #cccccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chartPanel #activity div.activity {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
z-index: 3;
|
||||||
|
width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chartPanel .events {
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
left: 0px;
|
||||||
|
background-color: #fcfcfc;
|
||||||
|
border-bottom: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chartPanel .event {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chartLabels {
|
||||||
|
margin: 25px auto 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#range {
|
||||||
|
width: 30%;
|
||||||
|
margin: 0 auto;
|
||||||
|
color: #016A9D;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#key {
|
||||||
|
float: right;
|
||||||
|
margin-top: -4px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.keyEntry {
|
||||||
|
}
|
||||||
|
|
||||||
|
img.keyBox {
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid black;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
top: 4px;
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.majGridX {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
top: 0px;
|
||||||
|
width: 1px;
|
||||||
|
border-left: dotted 1px #cccccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.majTickX {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -7px;
|
||||||
|
width: 1px;
|
||||||
|
height: 7px;
|
||||||
|
border-left: solid 1px black;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.majLabelX {
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
bottom: -20px;
|
||||||
|
width: 50px;
|
||||||
|
font-size: 9px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.majGridY {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
left: 0px;
|
||||||
|
height: 1px;
|
||||||
|
border-top: dotted 1px #cccccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.majTickY {
|
||||||
|
position: absolute;
|
||||||
|
left: -7px;
|
||||||
|
height: 1px;
|
||||||
|
width: 7px;
|
||||||
|
border-top: solid 1px black;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.majLabelY {
|
||||||
|
position: absolute;
|
||||||
|
text-align: right;
|
||||||
|
left: -30px;
|
||||||
|
width: 20px;
|
||||||
|
font-size: 9px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.zoom {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
.chartSize {
|
||||||
|
width: <?php echo $chart['width'] ?>px;
|
||||||
|
height: <?php echo $chart['height'] ?>px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graphSize {
|
||||||
|
width: <?php echo $chart['graph']['width'] ?>px;
|
||||||
|
height: <?php echo $chart['graph']['height'] ?>px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graphHeight {
|
||||||
|
height: <?php echo $chart['graph']['height'] ?>px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graphWidth {
|
||||||
|
width: <?php echo $chart['graph']['width'] ?>px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imageSize {
|
||||||
|
width: <?php echo $chart['image']['width'] ?>px;
|
||||||
|
height: <?php echo $chart['image']['height'] ?>px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imageHeight {
|
||||||
|
height: <?php echo $chart['image']['height'] ?>px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activitySize {
|
||||||
|
width: <?php echo $chart['graph']['width'] ?>px;
|
||||||
|
height: <?php echo $chart['graph']['activityHeight'] ?>px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eventsSize {
|
||||||
|
width: <?php echo $chart['graph']['width'] ?>px;
|
||||||
|
height: <?php echo $chart['graph']['eventBarHeight'] ?>px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eventsHeight {
|
||||||
|
height: <?php echo $chart['graph']['eventBarHeight'] ?>px;
|
||||||
|
}
|
||||||
|
<?php
|
||||||
|
if ( $mode == "overlay" )
|
||||||
|
{
|
||||||
|
foreach ( array_keys($monitorIds) as $monitorId )
|
||||||
|
{
|
||||||
|
?>
|
||||||
|
#chartPanel .eventsPos<?php echo $monitorId ?> {
|
||||||
|
top: <?php echo $chart['eventBars'][$monitorId]['top'] ?>px;
|
||||||
|
}
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
}
|
||||||
|
elseif ( $mode == "split" )
|
||||||
|
{
|
||||||
|
foreach ( array_keys($monitorIds) as $monitorId )
|
||||||
|
{
|
||||||
|
?>
|
||||||
|
#chartPanel .activityPos<?php echo $monitorId ?> {
|
||||||
|
top: <?php echo $char['activityBars'][$monitorId]['top'] ?>px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chartPanel .eventsPos<?php echo $monitorId ?> {
|
||||||
|
top: <?php echo $char['eventBars'][$monitorId]['top'] ?>px;
|
||||||
|
}
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
foreach( array_keys($monEventSlots) as $monitorId )
|
||||||
|
{
|
||||||
|
?>
|
||||||
|
.monitorColour<?php echo $monitorId ?> {
|
||||||
|
background-color: <?php echo $monitors[$monitorId]['WebColour'] ?>;
|
||||||
|
}
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
#contentTable + input {
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#videoProgress {
|
||||||
|
margin: 8px auto 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#videoFilesHeader {
|
||||||
|
margin: 8px auto 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#videoNoFiles {
|
||||||
|
margin: 4px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#videoFile {
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
@import url(../control.css);
|
||||||
|
|
||||||
|
#menuBar {
|
||||||
|
margin: 6px auto 4px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menuBar #monitorName {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menuBar #closeControl {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menuBar #menuControls {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menuBar #menuControls #controlControl {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menuBar #menuControls #eventsControl {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menuBar #menuControls #settingsControl {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menuBar #menuControls #scaleControl {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#imageFeed{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitorStatus {
|
||||||
|
margin: 4px auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitorStatus #enableDisableAlarms {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitorStatus #forceCancelAlarm {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#monitorStatus #monitorState {
|
||||||
|
}
|
||||||
|
|
||||||
|
#dvrControls {
|
||||||
|
margin-top: 3px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dvrControls input {
|
||||||
|
height: 20px;
|
||||||
|
width: 28px;
|
||||||
|
padding-bottom: 3px;
|
||||||
|
margin: 0 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dvrControls input[disabled] {
|
||||||
|
color: #aaaaaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dvrControls input.active {
|
||||||
|
border: 1px solid blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dvrControls input.inactive {
|
||||||
|
border: 1px solid green;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dvrControls input.unavail {
|
||||||
|
border: 1px solid red;
|
||||||
|
}
|
||||||
|
|
||||||
|
#replayStatus {
|
||||||
|
margin: 3px 0 2px;
|
||||||
|
text-align: center;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
#replayStatus > span {
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#events {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventList {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventList thead td {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventList th, #eventList td {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: inline;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.alarm {
|
||||||
|
color: #DC143C;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.alert {
|
||||||
|
color: #FF8C00;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventList tr.recent {
|
||||||
|
background-color: #B0E0E6;
|
||||||
|
}
|
||||||
|
|
||||||
|
#eventList tr.highlight {
|
||||||
|
background-color: #DCDCDC;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,95 @@
|
||||||
|
#settingsPanel {
|
||||||
|
float: left;
|
||||||
|
margin: 0 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#zoneSettings {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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 {
|
||||||
|
float: left;
|
||||||
|
margin: 0 2px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#definitionPanel input[type=submit], #definitionPanel input[type=submit] {
|
||||||
|
margin: 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#imagePanel {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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: 0 3px 3px 0; /* Compensate for negative margins in the markers just below. */
|
||||||
|
}
|
||||||
|
|
||||||
|
#imageFrame div {
|
||||||
|
position: absolute;
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
margin-left: -3px;
|
||||||
|
margin-top: -3px;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
#imageFrame div {
|
||||||
|
background-image: url(../../../graphics/point-g.gif);
|
||||||
|
}
|
||||||
|
|
||||||
|
#imageFrame div.highlight {
|
||||||
|
background-image: url(../../../graphics/point-o.gif);
|
||||||
|
}
|
||||||
|
|
||||||
|
#imageFrame div.active {
|
||||||
|
background-image: url(../../../graphics/point-r.gif);
|
||||||
|
}
|
||||||
|
|
||||||
|
#zonePoints {
|
||||||
|
margin: 8px 0;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
#zonePoints td {
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
#zonePoints table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
#zonePoints table tr.highlight {
|
||||||
|
background-color: #f0e68c;
|
||||||
|
}
|
||||||
|
|
||||||
|
#zonePoints table tr.active {
|
||||||
|
background-color: #ffa07a;
|
||||||
|
}
|
||||||
|
|
||||||
|
#zonePoints table th, #zonePoints table td {
|
||||||
|
border: 1px solid #7f7fb2;
|
||||||
|
padding: 3px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#zonePoints table a {
|
||||||
|
margin: 0 2px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
//
|
||||||
|
// ZoneMinder base static javascript file, $Date$, $Revision$
|
||||||
|
// Copyright (C) 2001-2008 Philip Coombes
|
||||||
|
//
|
||||||
|
// This program is free software; you can redistribute it and/or
|
||||||
|
// modify it under the terms of the GNU General Public License
|
||||||
|
// as published by the Free Software Foundation; either version 2
|
||||||
|
// of the License, or (at your option) any later version.
|
||||||
|
//
|
||||||
|
// This program is distributed in the hope that it will be useful,
|
||||||
|
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
// GNU General Public License for more details.
|
||||||
|
//
|
||||||
|
// You should have received a copy of the GNU General Public License
|
||||||
|
// along with this program; if not, write to the Free Software
|
||||||
|
// Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
|
||||||
|
//
|
||||||
|
|
||||||
|
//
|
||||||
|
// This file should only contain static JavaScript and no php.
|
||||||
|
// Use skin.js.php for JavaScript that need pre-processing
|
||||||
|
//
|
||||||
|
|
||||||
|
// Javascript window sizes
|
||||||
|
var popupSizes = {
|
||||||
|
'bandwidth': { 'width': 300, 'height': 120 },
|
||||||
|
'console': { 'width': 750, 'height': 312 },
|
||||||
|
'control': { 'width': 380, 'height': 480 },
|
||||||
|
'controlcaps': { 'width': 780, 'height': 320 },
|
||||||
|
'controlcap': { 'width': 400, 'height': 400 },
|
||||||
|
'cycle': { 'addWidth': 32, 'minWidth': 384, 'addHeight': 62 },
|
||||||
|
'device': { 'width': 260, 'height': 150 },
|
||||||
|
'devices': { 'width': 400, 'height': 240 },
|
||||||
|
'donate': { 'width': 500, 'height': 280 },
|
||||||
|
'event': { 'addWidth': 108, 'minWidth': 496, 'addHeight': 230, minHeight: 540 },
|
||||||
|
'eventdetail': { 'width': 600, 'height': 220 },
|
||||||
|
'events': { 'width': 960, 'height': 780 },
|
||||||
|
'export': { 'width': 400, 'height': 340 },
|
||||||
|
'filter': { 'width': 720, 'height': 360 },
|
||||||
|
'filtersave': { 'width': 610, 'height': 120 },
|
||||||
|
'frame': { 'addWidth': 32, 'minWidth': 384, 'addHeight': 100 },
|
||||||
|
'frames': { 'width': 500, 'height': 600 },
|
||||||
|
'function': { 'width': 300, 'height': 92 },
|
||||||
|
'group': { 'width': 360, 'height': 180 },
|
||||||
|
'groups': { 'width': 440, 'height': 220 },
|
||||||
|
'image': { 'addWidth': 48, 'addHeight': 80 },
|
||||||
|
'log': { 'width': 1080, 'height': 720 },
|
||||||
|
'login': { 'width': 720, 'height': 480 },
|
||||||
|
'logout': { 'width': 260, 'height': 100 },
|
||||||
|
'monitor': { 'width': 450, 'height': 440 },
|
||||||
|
'monitorpreset':{ 'width': 440, 'height': 200 },
|
||||||
|
'monitorprobe': { 'width': 500, 'height': 240 },
|
||||||
|
'monitorselect':{ 'width': 160, 'height': 200 },
|
||||||
|
'montage': { 'width': -1, 'height': -1 },
|
||||||
|
'onvifprobe': { 'width': 500, 'height': 300 },
|
||||||
|
'optionhelp': { 'width': 400, 'height': 320 },
|
||||||
|
'options': { 'width': 1000, 'height': 660 },
|
||||||
|
'preset': { 'width': 300, 'height': 120 },
|
||||||
|
'settings': { 'width': 220, 'height': 225 },
|
||||||
|
'state': { 'width': 370, 'height': 134 },
|
||||||
|
'stats': { 'width': 840, 'height': 200 },
|
||||||
|
'timeline': { 'width': 760, 'height': 540 },
|
||||||
|
'user': { 'width': 360, 'height': 420 },
|
||||||
|
'version': { 'width': 360, 'height': 140 },
|
||||||
|
'video': { 'width': 420, 'height': 360 },
|
||||||
|
'videoview': { 'addWidth': 48, 'addHeight': 80 },
|
||||||
|
'watch': { 'addWidth': 96, 'minWidth': 420, 'addHeight': 384 },
|
||||||
|
'zone': { 'addWidth': 450, 'addHeight': 200, 'minHeight': 450 },
|
||||||
|
'zones': { 'addWidth': 72, 'addHeight': 232 }
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue