Fix controlcss

Missing viewCssFileExtra

web/skins/classic/css/classic/control.css

@@ -1,148 +0,0 @@
-.ptzControls {
-    vertical-align: top;
-    margin: 10px auto 0;
-    width: 500px;
-}
-
-.ptzControls input.ptzTextBtn {
-    margin-top: 2px;
-}
-
-.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.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .downBtn {
-    background: url("../../graphics/arrow-l-d.png") 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;
-    float: left;
-    width: 100px;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .pantiltButtons {
-    margin: 5px auto;
-    border: 1px solid #006699;
-    text-align: center;
-    padding: 1px;
-    width: 100px;
-    height: 100px;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .arrowBtn {
-    width: 32px;
-    height: 32px;
-    cursor: pointer;
-    float: left;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upLeftBtn {
-    background: url("../../graphics/arrow-ul.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upBtn {
-    background: url("../../graphics/arrow-u.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upRightBtn {
-    background: url("../../graphics/arrow-ur.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .leftBtn {
-    background: url("../../graphics/arrow-l.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .centerBtn {
-    background: url("../../graphics/center.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .rightBtn {
-    background: url("../../graphics/arrow-r.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downLeftBtn {
-    background: url("../../graphics/arrow-dl.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downBtn {
-    background: url("../../graphics/arrow-d.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downRightBtn {
-    background: url("../../graphics/arrow-dr.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .powerControls {
-    margin: 5px auto;
-}
-
-.ptzControls .presetControls {
-    margin: 5px auto;
-}
-
-.ptzControls .presetControls input {
-    margin: 1px;
-}
-
-.ptzControls .presetControls input.ptzNumBtn {
-    padding: 1px 2px;
-    width: 24px;
-    color: #ffffff;
-    text-align: center;
-    background-color: #016A9D;
-}

web/skins/classic/css/classic/views/control.css

@@ -1 +1,148 @@
-@import url(../control.css);
+.ptzControls {
+    vertical-align: top;
+    margin: 10px auto 0;
+    width: 500px;
+}
+
+.ptzControls input.ptzTextBtn {
+    margin-top: 2px;
+}
+
+.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("../skins/classic/graphics/arrow-l-u.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .downBtn {
+    background: url("../skins/classic/graphics/arrow-l-d.png") 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;
+    float: left;
+    width: 100px;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .pantiltButtons {
+    margin: 5px auto;
+    border: 1px solid #006699;
+    text-align: center;
+    padding: 1px;
+    width: 100px;
+    height: 100px;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .arrowBtn {
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    float: left;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upLeftBtn {
+    background: url("../skins/classic/graphics/arrow-ul.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upBtn {
+    background: url("../skins/classic/graphics/arrow-u.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upRightBtn {
+    background: url("../skins/classic/graphics/arrow-ur.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .leftBtn {
+    background: url("../skins/classic/graphics/arrow-l.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .centerBtn {
+    background: url("../skins/classic/graphics/graphics/center.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .rightBtn {
+    background: url("../skins/classic/graphics/arrow-r.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downLeftBtn {
+    background: url("../skins/classic/graphics/arrow-dl.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downBtn {
+    background: url("../skins/classic/graphics/arrow-d.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downRightBtn {
+    background: url("../skins/classic/graphics/arrow-dr.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .powerControls {
+    margin: 5px auto;
+}
+
+.ptzControls .presetControls {
+    margin: 5px auto;
+}
+
+.ptzControls .presetControls input {
+    margin: 1px;
+}
+
+.ptzControls .presetControls input.ptzNumBtn {
+    padding: 1px 2px;
+    width: 24px;
+    color: #ffffff;
+    text-align: center;
+    background-color: #016A9D;
+}

web/skins/classic/css/classic/views/watch.css

@@ -1,5 +1,3 @@
-@import url(../control.css);
-
 #header {
     display: flex;
     justify-content: space-between;

web/skins/classic/css/dark/control.css

@@ -1,148 +0,0 @@
-.ptzControls {
-    vertical-align: top;
-    margin: 10px auto 0;
-    width: 500px;
-}
-
-.ptzControls input.ptzTextBtn {
-    margin-top: 2px;
-}
-
-.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.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .downBtn {
-    background: url("../../graphics/arrow-l-d.png") 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;
-    float: left;
-    width: 100px;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .pantiltButtons {
-    margin: 5px auto;
-    border: 1px solid #006699;
-    text-align: center;
-    padding: 1px;
-    width: 102px;
-    height: 102px;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .arrowBtn {
-    width: 32px;
-    height: 32px;
-    cursor: pointer;
-    float: left;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upLeftBtn {
-    background: url("../../graphics/arrow-ul.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upBtn {
-    background: url("../../graphics/arrow-u.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upRightBtn {
-    background: url("../../graphics/arrow-ur.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .leftBtn {
-    background: url("../../graphics/arrow-l.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .centerBtn {
-    background: url("../../graphics/center.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .rightBtn {
-    background: url("../../graphics/arrow-r.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downLeftBtn {
-    background: url("../../graphics/arrow-dl.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downBtn {
-    background: url("../../graphics/arrow-d.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downRightBtn {
-    background: url("../../graphics/arrow-dr.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .powerControls {
-    margin: 5px auto;
-}
-
-.ptzControls .presetControls {
-    margin: 5px auto;
-}
-
-.ptzControls .presetControls input {
-    margin: 1px;
-}
-
-.ptzControls .presetControls input.ptzNumBtn {
-    padding: 1px 2px;
-    width: 24px;
-    color: #ffffff;
-    text-align: center;
-    background-color: #016A9D;
-}

web/skins/classic/css/dark/views/control.css

@@ -1 +1,148 @@
-@import url(../control.css);
+.ptzControls {
+    vertical-align: top;
+    margin: 10px auto 0;
+    width: 500px;
+}
+
+.ptzControls input.ptzTextBtn {
+    margin-top: 2px;
+}
+
+.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("../skins/classic/graphics/arrow-l-u.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .downBtn {
+    background: url("../skins/classic/graphics/arrow-l-d.png") 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;
+    float: left;
+    width: 100px;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .pantiltButtons {
+    margin: 5px auto;
+    border: 1px solid #006699;
+    text-align: center;
+    padding: 1px;
+    width: 102px;
+    height: 102px;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .arrowBtn {
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    float: left;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upLeftBtn {
+    background: url("../skins/classic/graphics/arrow-ul.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upBtn {
+    background: url("../skins/classic/graphics/arrow-u.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upRightBtn {
+    background: url("../skins/classic/graphics/arrow-ur.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .leftBtn {
+    background: url("../skins/classic/graphics/arrow-l.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .centerBtn {
+    background: url("../skins/classic/graphics/graphics/center.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .rightBtn {
+    background: url("../skins/classic/graphics/arrow-r.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downLeftBtn {
+    background: url("../skins/classic/graphics/arrow-dl.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downBtn {
+    background: url("../skins/classic/graphics/arrow-d.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downRightBtn {
+    background: url("../skins/classic/graphics/arrow-dr.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .powerControls {
+    margin: 5px auto;
+}
+
+.ptzControls .presetControls {
+    margin: 5px auto;
+}
+
+.ptzControls .presetControls input {
+    margin: 1px;
+}
+
+.ptzControls .presetControls input.ptzNumBtn {
+    padding: 1px 2px;
+    width: 24px;
+    color: #ffffff;
+    text-align: center;
+    background-color: #016A9D;
+}

web/skins/classic/css/dark/views/watch.css

@@ -1,5 +1,3 @@
-@import url(../control.css);
-
 #header {
     display: flex;
     justify-content: space-between;

web/skins/classic/css/flat/control.css

@@ -1,149 +0,0 @@
-.ptzControls {
-    vertical-align: top;
-    margin: 10px auto 0;
-    width: 500px;
-    min-height: 20px;
-}
-
-.ptzControls input.ptzTextBtn {
-    margin-top: 2px;
-}
-
-.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.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .downBtn {
-    background: url("../../graphics/arrow-l-d.png") 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;
-    float: left;
-    width: 100px;
-}
-
-.pantiltButtons {
-    margin: 5px auto;
-    border: 1px solid #006699;
-    text-align: center;
-    padding: 1px;
-    width: 102px;
-    height: 102px;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .arrowBtn {
-    width: 32px;
-    height: 32px;
-    cursor: pointer;
-    float: left;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upLeftBtn {
-    background: url("../../graphics/arrow-ul.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upBtn {
-    background: url("../../graphics/arrow-u.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upRightBtn {
-    background: url("../../graphics/arrow-ur.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .leftBtn {
-    background: url("../../graphics/arrow-l.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .centerBtn {
-    background: url("../../graphics/center.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .rightBtn {
-    background: url("../../graphics/arrow-r.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downLeftBtn {
-    background: url("../../graphics/arrow-dl.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downBtn {
-    background: url("../../graphics/arrow-d.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downRightBtn {
-    background: url("../../graphics/arrow-dr.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .powerControls {
-    margin: 5px auto;
-}
-
-.ptzControls .presetControls {
-    margin: 5px auto;
-}
-
-.ptzControls .presetControls input {
-    margin: 1px;
-}
-
-.ptzControls .presetControls input.ptzNumBtn {
-    padding: 1px 2px;
-    width: 24px;
-    color: #ffffff;
-    text-align: center;
-    background-color: #016A9D;
-}

web/skins/classic/css/flat/views/control.css

@@ -1 +1,148 @@
-@import url(../control.css);
+.ptzControls {
+    vertical-align: top;
+    margin: 10px auto 0;
+    width: 500px;
+}
+
+.ptzControls input.ptzTextBtn {
+    margin-top: 2px;
+}
+
+.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("../skins/classic/graphics/arrow-l-u.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .downBtn {
+    background: url("../skins/classic/graphics/arrow-l-d.png") 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;
+    float: left;
+    width: 100px;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .pantiltButtons {
+    margin: 5px auto;
+    border: 1px solid #006699;
+    text-align: center;
+    padding: 1px;
+    width: 102px;
+    height: 102px;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .arrowBtn {
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    float: left;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upLeftBtn {
+    background: url("../skins/classic/graphics/arrow-ul.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upBtn {
+    background: url("../skins/classic/graphics/arrow-u.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upRightBtn {
+    background: url("../skins/classic/graphics/arrow-ur.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .leftBtn {
+    background: url("../skins/classic/graphics/arrow-l.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .centerBtn {
+    background: url("../skins/classic/graphics/center.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .rightBtn {
+    background: url("../skins/classic/graphics/arrow-r.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downLeftBtn {
+    background: url("../skins/classic/graphics/arrow-dl.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downBtn {
+    background: url("../skins/classic/graphics/arrow-d.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downRightBtn {
+    background: url("../skins/classic/graphics/arrow-dr.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .powerControls {
+    margin: 5px auto;
+}
+
+.ptzControls .presetControls {
+    margin: 5px auto;
+}
+
+.ptzControls .presetControls input {
+    margin: 1px;
+}
+
+.ptzControls .presetControls input.ptzNumBtn {
+    padding: 1px 2px;
+    width: 24px;
+    color: #ffffff;
+    text-align: center;
+    background-color: #016A9D;
+}

web/skins/classic/css/flat/views/watch.css

@@ -1,5 +1,3 @@
-@import url(../control.css);
-
 #header {
     display: flex;
     justify-content: space-between;

web/skins/classic/includes/functions.php

@@ -34,6 +34,9 @@ function xhtmlHeaders( $file, $title ) {
 
   $basename = basename( $file, '.php' );
   $viewCssFile = getSkinFile( '/css/'.$css.'/views/'.$basename.'.css' );
+  if ($basename == 'watch') {
+    $viewCssFileExtra = getSkinFile( '/css/'.$css.'/views/control.css' );
+  }
   $viewCssPhpFile = getSkinFile( '/css/'.$css.'/views/'.$basename.'.css.php' );
   $viewJsFile = getSkinFile( 'views/js/'.$basename.'.js' );
   $viewJsPhpFile = getSkinFile( 'views/js/'.$basename.'.js.php' );
@@ -67,6 +70,12 @@ if ( file_exists( "skins/$skin/css/$css/graphics/favicon.ico" ) ) {
   if ( $viewCssFile ) {
 ?>
   <link rel="stylesheet" href="<?php echo cache_bust($viewCssFile) ?>" type="text/css" media="screen"/>
+
+<?php
+  }
+  if ( isset($viewCssFileExtra) ) {
+?>
+  <link rel="stylesheet" href="<?php echo cache_bust($viewCssFileExtra) ?>" type="text/css" media="screen"/>
 <?php
   }
   if ( $viewCssPhpFile ) {
@@ -109,9 +118,12 @@ if ( file_exists( "skins/$skin/css/$css/graphics/favicon.ico" ) ) {
   <script src="skins/<?php echo $skin ?>/js/video.js"></script>
   <script src="./js/videojs.zoomrotate.js"></script>
   <script src="skins/<?php echo $skin ?>/js/moment.min.js"></script>
+<?php
+  } else if ( $title == 'Watch' ) {
+?>
+  <link href="<?php echo cache_bust($viewCssFileExtra) ?>" rel="stylesheet">
 <?php
   }
-
   if ( $skinJsPhpFile ) {
 ?>
   <script type="text/javascript">