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
|
||||
|
||||
SUBDIRS = flat \
|
||||
SUBDIRS = dark \
|
||||
flat \
|
||||
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