diff --git a/configure.ac b/configure.ac index 4924c5c9a..23ca6db47 100644 --- a/configure.ac +++ b/configure.ac @@ -496,7 +496,7 @@ fi AC_SUBST(PERL_MM_PARMS) AC_SUBST(EXTRA_PERL_LIB) -AC_CONFIG_FILES([Makefile zm.conf zmconfgen.pl db/Makefile db/zm_create.sql misc/Makefile misc/apache.conf misc/logrotate.conf misc/syslog.conf misc/com.zoneminder.systemctl.policy misc/com.zoneminder.systemctl.rules onvif/Makefile onvif/scripts/Makefile scripts/Makefile scripts/zm scripts/zmaudit.pl scripts/zmcontrol.pl scripts/zmdc.pl scripts/zmfilter.pl scripts/zmpkg.pl scripts/zmtrack.pl scripts/zmcamtool.pl scripts/zmsystemctl.pl scripts/zmtrigger.pl scripts/zmupdate.pl scripts/zmvideo.pl scripts/zmwatch.pl scripts/zmx10.pl scripts/zmdbbackup scripts/zmdbrestore scripts/zmeventdump scripts/zmlogrotate.conf scripts/ZoneMinder/lib/ZoneMinder/Base.pm scripts/ZoneMinder/lib/ZoneMinder/Config.pm scripts/ZoneMinder/lib/ZoneMinder/Memory.pm scripts/ZoneMinder/lib/ZoneMinder/ConfigData.pm src/Makefile src/zm_config.h web/Makefile web/ajax/Makefile web/css/Makefile web/graphics/Makefile web/includes/Makefile web/includes/config.php web/js/Makefile web/lang/Makefile web/skins/Makefile web/skins/classic/Makefile web/skins/classic/ajax/Makefile web/skins/classic/css/Makefile web/skins/classic/css/classic/Makefile web/skins/classic/css/classic/views/Makefile web/skins/classic/css/flat/Makefile web/skins/classic/css/flat/views/Makefile web/skins/classic/graphics/Makefile web/skins/classic/includes/Makefile web/skins/classic/js/Makefile web/skins/classic/lang/Makefile web/skins/classic/views/Makefile web/skins/classic/views/js/Makefile web/skins/mobile/Makefile web/skins/mobile/ajax/Makefile web/skins/mobile/css/Makefile web/skins/mobile/graphics/Makefile web/skins/mobile/includes/Makefile web/skins/mobile/lang/Makefile web/skins/mobile/views/Makefile web/skins/mobile/views/css/Makefile web/tools/Makefile web/tools/mootools/Makefile web/views/Makefile web/skins/xml/Makefile web/skins/xml/views/Makefile web/skins/xml/includes/Makefile]) +AC_CONFIG_FILES([Makefile zm.conf zmconfgen.pl db/Makefile db/zm_create.sql misc/Makefile misc/apache.conf misc/logrotate.conf misc/syslog.conf misc/com.zoneminder.systemctl.policy misc/com.zoneminder.systemctl.rules onvif/Makefile onvif/scripts/Makefile scripts/Makefile scripts/zm scripts/zmaudit.pl scripts/zmcontrol.pl scripts/zmdc.pl scripts/zmfilter.pl scripts/zmpkg.pl scripts/zmtrack.pl scripts/zmcamtool.pl scripts/zmsystemctl.pl scripts/zmtrigger.pl scripts/zmupdate.pl scripts/zmvideo.pl scripts/zmwatch.pl scripts/zmx10.pl scripts/zmdbbackup scripts/zmdbrestore scripts/zmeventdump scripts/zmlogrotate.conf scripts/ZoneMinder/lib/ZoneMinder/Base.pm scripts/ZoneMinder/lib/ZoneMinder/Config.pm scripts/ZoneMinder/lib/ZoneMinder/Memory.pm scripts/ZoneMinder/lib/ZoneMinder/ConfigData.pm src/Makefile src/zm_config.h web/Makefile web/ajax/Makefile web/css/Makefile web/graphics/Makefile web/includes/Makefile web/includes/config.php web/js/Makefile web/lang/Makefile web/skins/Makefile web/skins/classic/Makefile web/skins/classic/ajax/Makefile web/skins/classic/css/Makefile web/skins/classic/css/classic/Makefile web/skins/classic/css/classic/views/Makefile web/skins/classic/css/dark/Makefile web/skins/classic/css/dark/views/Makefile web/skins/classic/css/flat/Makefile web/skins/classic/css/flat/views/Makefile web/skins/classic/graphics/Makefile web/skins/classic/includes/Makefile web/skins/classic/js/Makefile web/skins/classic/lang/Makefile web/skins/classic/views/Makefile web/skins/classic/views/js/Makefile web/skins/mobile/Makefile web/skins/mobile/ajax/Makefile web/skins/mobile/css/Makefile web/skins/mobile/graphics/Makefile web/skins/mobile/includes/Makefile web/skins/mobile/lang/Makefile web/skins/mobile/views/Makefile web/skins/mobile/views/css/Makefile web/tools/Makefile web/tools/mootools/Makefile web/views/Makefile web/skins/xml/Makefile web/skins/xml/views/Makefile web/skins/xml/includes/Makefile]) # Create the definitions for compilation and defaults for the database AC_CONFIG_COMMANDS([src/zm_config_defines.h],[perl ./zmconfgen.pl]) diff --git a/web/skins/classic/css/Makefile.am b/web/skins/classic/css/Makefile.am index 9afb52f25..2c43d2e47 100644 --- a/web/skins/classic/css/Makefile.am +++ b/web/skins/classic/css/Makefile.am @@ -2,5 +2,6 @@ AUTOMAKE_OPTIONS = gnu webdir = @WEB_PREFIX@/skins/classic/css -SUBDIRS = flat \ +SUBDIRS = dark \ + flat \ classic diff --git a/web/skins/classic/css/dark/Makefile.am b/web/skins/classic/css/dark/Makefile.am new file mode 100644 index 000000000..6961860eb --- /dev/null +++ b/web/skins/classic/css/dark/Makefile.am @@ -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 diff --git a/web/skins/classic/css/dark/control.css b/web/skins/classic/css/dark/control.css new file mode 100644 index 000000000..4a7f05a5b --- /dev/null +++ b/web/skins/classic/css/dark/control.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; +} diff --git a/web/skins/classic/css/dark/export.css b/web/skins/classic/css/dark/export.css new file mode 100644 index 000000000..b9b542d5b --- /dev/null +++ b/web/skins/classic/css/dark/export.css @@ -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; +} + diff --git a/web/skins/classic/css/dark/skin.css b/web/skins/classic/css/dark/skin.css new file mode 100644 index 000000000..011a78674 --- /dev/null +++ b/web/skins/classic/css/dark/skin.css @@ -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: #444444; +} + +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: #8f8fc2; + border: #8f8fc2 solid 1px; + border-bottom-width: 0; + margin: 0 2px 0 0; + background: #444444; + text-align: center; + padding: 3px 4px; +} + +ul.tabList li a { + text-decoration: none; +} + +ul.tabList li:hover { + background-color: #dddddd; +} + +ul.tabList li.active { + background-color: #222222; + 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; +} + diff --git a/web/skins/classic/css/dark/views/Makefile.am b/web/skins/classic/css/dark/views/Makefile.am new file mode 100644 index 000000000..2180d6432 --- /dev/null +++ b/web/skins/classic/css/dark/views/Makefile.am @@ -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 diff --git a/web/skins/classic/css/dark/views/console.css b/web/skins/classic/css/dark/views/console.css new file mode 100644 index 000000000..c198b460b --- /dev/null +++ b/web/skins/classic/css/dark/views/console.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; +} + diff --git a/web/skins/classic/css/dark/views/control.css b/web/skins/classic/css/dark/views/control.css new file mode 100644 index 000000000..5e10dcfd9 --- /dev/null +++ b/web/skins/classic/css/dark/views/control.css @@ -0,0 +1 @@ +@import url(../control.css); diff --git a/web/skins/classic/css/dark/views/controlcaps.css b/web/skins/classic/css/dark/views/controlcaps.css new file mode 100644 index 000000000..1a2783fd7 --- /dev/null +++ b/web/skins/classic/css/dark/views/controlcaps.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; +} diff --git a/web/skins/classic/css/dark/views/devices.css b/web/skins/classic/css/dark/views/devices.css new file mode 100644 index 000000000..6015985d0 --- /dev/null +++ b/web/skins/classic/css/dark/views/devices.css @@ -0,0 +1,4 @@ +input.set { + border: 1px #7F7FB2 dashed; +} + diff --git a/web/skins/classic/css/dark/views/event.css b/web/skins/classic/css/dark/views/event.css new file mode 100644 index 000000000..995a06c1d --- /dev/null +++ b/web/skins/classic/css/dark/views/event.css @@ -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; +} diff --git a/web/skins/classic/css/dark/views/events.css b/web/skins/classic/css/dark/views/events.css new file mode 100644 index 000000000..5726e904d --- /dev/null +++ b/web/skins/classic/css/dark/views/events.css @@ -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; +} diff --git a/web/skins/classic/css/dark/views/export.css b/web/skins/classic/css/dark/views/export.css new file mode 100644 index 000000000..e22851ca0 --- /dev/null +++ b/web/skins/classic/css/dark/views/export.css @@ -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; +} diff --git a/web/skins/classic/css/dark/views/filter.css b/web/skins/classic/css/dark/views/filter.css new file mode 100644 index 000000000..2287cfea2 --- /dev/null +++ b/web/skins/classic/css/dark/views/filter.css @@ -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; +} + diff --git a/web/skins/classic/css/dark/views/frame.css b/web/skins/classic/css/dark/views/frame.css new file mode 100644 index 000000000..2c7789349 --- /dev/null +++ b/web/skins/classic/css/dark/views/frame.css @@ -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%; +} diff --git a/web/skins/classic/css/dark/views/frames.css b/web/skins/classic/css/dark/views/frames.css new file mode 100644 index 000000000..249fa3751 --- /dev/null +++ b/web/skins/classic/css/dark/views/frames.css @@ -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; +} diff --git a/web/skins/classic/css/dark/views/groups.css b/web/skins/classic/css/dark/views/groups.css new file mode 100644 index 000000000..64f5013de --- /dev/null +++ b/web/skins/classic/css/dark/views/groups.css @@ -0,0 +1,6 @@ +#contentTable .colSelect { + text-align: center; +} + +#contentTable .colSelect input { +} diff --git a/web/skins/classic/css/dark/views/log.css b/web/skins/classic/css/dark/views/log.css new file mode 100644 index 000000000..50732326c --- /dev/null +++ b/web/skins/classic/css/dark/views/log.css @@ -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 { +} diff --git a/web/skins/classic/css/dark/views/monitor.css b/web/skins/classic/css/dark/views/monitor.css new file mode 100644 index 000000000..7cac28fe1 --- /dev/null +++ b/web/skins/classic/css/dark/views/monitor.css @@ -0,0 +1,5 @@ +.swatch { + border: 1px solid black; + margin-left: 3px; + padding: 0px; +} diff --git a/web/skins/classic/css/dark/views/montage.css b/web/skins/classic/css/dark/views/montage.css new file mode 100644 index 000000000..2ab11e409 --- /dev/null +++ b/web/skins/classic/css/dark/views/montage.css @@ -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; +} diff --git a/web/skins/classic/css/dark/views/montage_2wide.css b/web/skins/classic/css/dark/views/montage_2wide.css new file mode 100644 index 000000000..b0fa77298 --- /dev/null +++ b/web/skins/classic/css/dark/views/montage_2wide.css @@ -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; +} diff --git a/web/skins/classic/css/dark/views/montage_3wide.css b/web/skins/classic/css/dark/views/montage_3wide.css new file mode 100644 index 000000000..81f0c00ae --- /dev/null +++ b/web/skins/classic/css/dark/views/montage_3wide.css @@ -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; +} diff --git a/web/skins/classic/css/dark/views/montage_3wide50enlarge.css b/web/skins/classic/css/dark/views/montage_3wide50enlarge.css new file mode 100644 index 000000000..59bedd9ba --- /dev/null +++ b/web/skins/classic/css/dark/views/montage_3wide50enlarge.css @@ -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; +} diff --git a/web/skins/classic/css/dark/views/montage_4wide.css b/web/skins/classic/css/dark/views/montage_4wide.css new file mode 100644 index 000000000..4e5b7bc49 --- /dev/null +++ b/web/skins/classic/css/dark/views/montage_4wide.css @@ -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; +} diff --git a/web/skins/classic/css/dark/views/montage_freeform.css b/web/skins/classic/css/dark/views/montage_freeform.css new file mode 100644 index 000000000..da6a4bb22 --- /dev/null +++ b/web/skins/classic/css/dark/views/montage_freeform.css @@ -0,0 +1,9 @@ +#monitors { + margin: 0 auto; + text-align: center; +} + +#monitors .monitorFrame { + float: left; + padding: 1px; +} diff --git a/web/skins/classic/css/dark/views/options.css b/web/skins/classic/css/dark/views/options.css new file mode 100644 index 000000000..f2635edea --- /dev/null +++ b/web/skins/classic/css/dark/views/options.css @@ -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; +} + diff --git a/web/skins/classic/css/dark/views/plugin.css b/web/skins/classic/css/dark/views/plugin.css new file mode 100644 index 000000000..040e26558 --- /dev/null +++ b/web/skins/classic/css/dark/views/plugin.css @@ -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; +} diff --git a/web/skins/classic/css/dark/views/stats.css b/web/skins/classic/css/dark/views/stats.css new file mode 100644 index 000000000..c47e85e3a --- /dev/null +++ b/web/skins/classic/css/dark/views/stats.css @@ -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; +} diff --git a/web/skins/classic/css/dark/views/timeline.css b/web/skins/classic/css/dark/views/timeline.css new file mode 100644 index 000000000..93509dd15 --- /dev/null +++ b/web/skins/classic/css/dark/views/timeline.css @@ -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; +} + diff --git a/web/skins/classic/css/dark/views/timeline.css.php b/web/skins/classic/css/dark/views/timeline.css.php new file mode 100644 index 000000000..85078d107 --- /dev/null +++ b/web/skins/classic/css/dark/views/timeline.css.php @@ -0,0 +1,77 @@ +.chartSize { + width: px; + height: px; +} + +.graphSize { + width: px; + height: px; +} + +.graphHeight { + height: px; +} + +.graphWidth { + width: px; +} + +.imageSize { + width: px; + height: px; +} + +.imageHeight { + height: px; +} + +.activitySize { + width: px; + height: px; +} + +.eventsSize { + width: px; + height: px; +} + +.eventsHeight { + height: px; +} + +#chartPanel .eventsPos { + top: px; +} + +#chartPanel .activityPos { + top: px; +} + +#chartPanel .eventsPos { + top: px; +} + +.monitorColour { + background-color: ; +} + diff --git a/web/skins/classic/css/dark/views/video.css b/web/skins/classic/css/dark/views/video.css new file mode 100644 index 000000000..7e9708f2c --- /dev/null +++ b/web/skins/classic/css/dark/views/video.css @@ -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; +} diff --git a/web/skins/classic/css/dark/views/watch.css b/web/skins/classic/css/dark/views/watch.css new file mode 100644 index 000000000..d1f435f7d --- /dev/null +++ b/web/skins/classic/css/dark/views/watch.css @@ -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; +} + diff --git a/web/skins/classic/css/dark/views/zone.css b/web/skins/classic/css/dark/views/zone.css new file mode 100644 index 000000000..a86c5d1e4 --- /dev/null +++ b/web/skins/classic/css/dark/views/zone.css @@ -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; +} diff --git a/web/skins/classic/js/Makefile.am b/web/skins/classic/js/Makefile.am index 8ae05c93b..3f5ffdda2 100644 --- a/web/skins/classic/js/Makefile.am +++ b/web/skins/classic/js/Makefile.am @@ -5,5 +5,6 @@ webdir = @WEB_PREFIX@/skins/classic/js dist_web_DATA = \ skin.js \ classic.js \ + dark.js \ flat.js \ skin.js.php diff --git a/web/skins/classic/js/dark.js b/web/skins/classic/js/dark.js new file mode 100644 index 000000000..8868c8ce7 --- /dev/null +++ b/web/skins/classic/js/dark.js @@ -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 } +}; diff --git a/web/skins/classic/views/js/log.js b/web/skins/classic/views/js/log.js index c46fa5151..e804d18f8 100644 --- a/web/skins/classic/views/js/log.js +++ b/web/skins/classic/views/js/log.js @@ -81,7 +81,10 @@ function logResponse( respObj ) row.tr.addClass( 'log-dbg' ); if ( !firstLoad ) { - new Fx.Tween( row.tr, { duration: 10000, transition: Fx.Transitions.Sine } ).start( 'color', '#6495ED', '#000000' ); + var color = document.defaultView.getComputedStyle(row.tr,null).getPropertyValue('color'); + var colorParts = color.match(/^rgb.*\((\d+),\s*(\d+),\s*(\d+)/); + rowOrigColor = '#' + parseInt(colorParts[1]).toString(16) + parseInt(colorParts[2]).toString(16) + parseInt(colorParts[3]).toString(16); + new Fx.Tween( row.tr, { duration: 10000, transition: Fx.Transitions.Sine } ).start( 'color', '#6495ED', rowOrigColor ); } } );