Merge pull request #4123 from IgorA100/patch-166

Chore (optimization): Moved styles for Control button block in the Stream image to global skin.css
ZoneMinder · Aug 27, 2024 · 081d9d4 · 081d9d4
2 parents 1deccb8 + 713b8f8
commit 081d9d4
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 189 deletions.
diff --git a/web/skins/classic/css/base/skin.css b/web/skins/classic/css/base/skin.css
@@ -776,7 +776,7 @@ ul.nav.nav-pills.flex-column {
 
 #mfbpanel {
  width: calc(100% - 25px);
- float: left; 
+ float: left;
 }
 
 .chosen {
@@ -1118,6 +1118,72 @@ html::-webkit-scrollbar-thumb, div::-webkit-scrollbar-thumb, nav::-webkit-scroll
  }
 }
 
+/* +++ Control button block in the Stream image*/
+.block-button-center {
+ position: absolute;
+ left: 35%;
+ right: 35%;
+ top: 2px;
+ z-index: 10;
+}
+
+button.btn.btn-zoom-out {
+ padding: 0;
+ background-color: rgba(150,150,150,0.5);
+ position: absolute;
+ left: 3px;
+ top: 3px;
+ z-index: 10;
+ text-shadow:
+ -1px -1px 0 #575757,
+ 1px -1px 0 #575757,
+ -1px 1px 0 #575757,
+ 1px 1px 0 #575757;
+}
+
+button.btn.btn-zoom-in {
+ padding: 0;
+ background-color: rgba(150,150,150,0.5);
+ position: absolute;
+ right: 3px;
+ top: 3px;
+ z-index: 10;
+ text-shadow:
+ -1px -1px 0 #575757,
+ 1px -1px 0 #575757,
+ -1px 1px 0 #575757,
+ 1px 1px 0 #575757;
+}
+
+button.btn.btn-view-watch,
+button.btn.btn-edit-monitor,
+button.btn.btn-fullscreen {
+ padding: 0;
+ background-color: rgba(150,150,150,0.5);
+ z-index: 10;
+ text-shadow:
+ -1px -1px 0 #575757,
+ 1px -1px 0 #575757,
+ -1px 1px 0 #575757,
+ 1px 1px 0 #575757;
+}
+
+button.btn.btn-zoom-out:focus,
+button.btn.btn-zoom-in:focus,
+button.btn.btn-view-watch:focus,
+button.btn.btn-edit-monitor:focus {
+ outline: 0;
+ box-shadow: none;
+}
+
+button.btn.btn-zoom-out:hover,
+button.btn.btn-zoom-in:hover,
+button.btn.btn-edit-monitor:hover,
+button.btn.btn-view-watch:hover {
+ background-color: darkgrey;
+}
+/* --- Control button block in the Stream image*/
+
 /* +++ This block should always be located at the end! */
 .hidden {
  display: none;

diff --git a/web/skins/classic/css/base/views/event.css b/web/skins/classic/css/base/views/event.css
@@ -355,72 +355,10 @@ svg.zones {
  z-index: 1000;
 }
 
-button.btn.btn-zoom-out {
- padding: 0;
- background-color: rgba(150,150,150,0.5);
- position: absolute;
- left: 2px;
- top: 2px;
- z-index: 10;
- text-shadow:
- -1px -1px 0 #575757,
- 1px -1px 0 #575757,
- -1px 1px 0 #575757,
- 1px 1px 0 #575757;
-}
-
-button.btn.btn-zoom-in {
- padding: 0;
- background-color: rgba(150,150,150,0.5);
- position: absolute;
- right: 2px;
- top: 2px;
- z-index: 10;
- text-shadow:
- -1px -1px 0 #575757,
- 1px -1px 0 #575757,
- -1px 1px 0 #575757,
- 1px 1px 0 #575757;
-}
-
-button.btn.btn-edit-monitor {
- padding: 0;
- background-color: rgba(150,150,150,0.5);
- z-index: 10;
- text-shadow:
- -1px -1px 0 #575757,
- 1px -1px 0 #575757,
- -1px 1px 0 #575757,
- 1px 1px 0 #575757;
-}
-
 button.btn.btn-view-watch, button.btn.btn-fullscreen, .ratioControl {
  display: none;
 }
 
-.block-button-center {
- position: absolute;
- left: 35%;
- right: 35%;
- top: 2px;
- z-index: 10;
-}
-
-button.btn.btn-zoom-out:focus,
-button.btn.btn-zoom-in:focus,
-button.btn.btn-view-watch:focus,
-button.btn.btn-edit-monitor:focus {
- outline: 0;
- box-shadow: none;
-}
-
-button.btn.btn-zoom-out:hover,
-button.btn.btn-zoom-in:hover,
-button.btn.btn-edit-monitor:hover,
-button.btn.btn-view-watch:hover {
- background-color: darkgrey;
-}
-
 /*Video.js override*/
 .vjs-tech {
  pointer-events: auto;

diff --git a/web/skins/classic/css/base/views/montage.css b/web/skins/classic/css/base/views/montage.css
@@ -83,34 +83,6 @@
  fill: #0000FF;
 }
 
-button.btn.btn-zoom-out {
- padding: 0;
- background-color: rgba(150,150,150,0.5);
- position: absolute;
- left: 2px;
- top: 2px;
- z-index: 10;
- text-shadow:
- -1px -1px 0 #575757,
- 1px -1px 0 #575757,
- -1px 1px 0 #575757,
- 1px 1px 0 #575757;
-}
-
-button.btn.btn-zoom-in {
- padding: 0;
- background-color: rgba(150,150,150,0.5);
- position: absolute;
- right: 2px;
- top: 2px;
- z-index: 10;
- text-shadow:
- -1px -1px 0 #575757,
- 1px -1px 0 #575757,
- -1px 1px 0 #575757,
- 1px 1px 0 #575757;
-}
-
 .ratioControl{
  padding: 0;
  background-color: rgba(150,150,150,0.5);
@@ -124,42 +96,6 @@ button.btn.btn-zoom-in {
  min-width: 130px;
 }
 
-button.btn.btn-view-watch, button.btn.btn-edit-monitor, button.btn.btn-fullscreen {
- padding: 0;
- background-color: rgba(150,150,150,0.5);
- z-index: 10;
- text-shadow:
- -1px -1px 0 #575757,
- 1px -1px 0 #575757,
- -1px 1px 0 #575757,
- 1px 1px 0 #575757;
-}
-
-.block-button-center {
- position: absolute;
- left: 50px;
- right: 50px;
- top: 2px;
- z-index: 10;
-}
-
-button.btn.btn-zoom-out:focus,
-button.btn.btn-zoom-in:focus,
-button.btn.btn-view-watch:focus,
-button.btn.btn-fullscreen:focus,
-button.btn.btn-edit-monitor:focus {
- outline: 0;
- box-shadow: none;
-}
-
-button.btn.btn-zoom-out:hover,
-button.btn.btn-zoom-in:hover,
-button.btn.btn-view-watch:hover,
-button.btn.btn-fullscreen:hover,
-button.btn.btn-edit-monitor:hover {
- background-color: darkgrey;
-}
-
 .grid-stack-item-content.modeEditingMonitor {
  cursor: crosshair;
 }

diff --git a/web/skins/classic/css/base/views/watch.css b/web/skins/classic/css/base/views/watch.css
@@ -193,72 +193,10 @@ body.sticky #content {
  transform-origin: 100% 00%;
 }
 
-button.btn.btn-zoom-out {
- padding: 0;
- background-color: rgba(150,150,150,0.5);
- position: absolute;
- left: 2px;
- top: 2px;
- z-index: 10;
- text-shadow:
- -1px -1px 0 #575757,
- 1px -1px 0 #575757,
- -1px 1px 0 #575757,
- 1px 1px 0 #575757;
-}
-
-button.btn.btn-zoom-in {
- padding: 0;
- background-color: rgba(150,150,150,0.5);
- position: absolute;
- right: 2px;
- top: 2px;
- z-index: 10;
- text-shadow:
- -1px -1px 0 #575757,
- 1px -1px 0 #575757,
- -1px 1px 0 #575757,
- 1px 1px 0 #575757;
-}
-
-button.btn.btn-edit-monitor {
- padding: 0;
- background-color: rgba(150,150,150,0.5);
- z-index: 10;
- text-shadow:
- -1px -1px 0 #575757,
- 1px -1px 0 #575757,
- -1px 1px 0 #575757,
- 1px 1px 0 #575757;
-}
-
 button.btn.btn-view-watch, button.btn.btn-fullscreen, .ratioControl {
  display: none;
 }
 
-.block-button-center {
- position: absolute;
- left: 35%;
- right: 35%;
- top: 2px;
- z-index: 10;
-}
-
-button.btn.btn-zoom-out:focus,
-button.btn.btn-zoom-in:focus,
-button.btn.btn-view-watch:focus,
-button.btn.btn-edit-monitor:focus {
- outline: 0;
- box-shadow: none;
-}
-
-button.btn.btn-zoom-out:hover,
-button.btn.btn-zoom-in:hover,
-button.btn.btn-edit-monitor:hover,
-button.btn.btn-view-watch:hover {
- background-color: darkgrey;
-}
-
 /* +++ Support for old ZoomPan algorithm */
 .form-check.control-use-old-zoom-pan {
  display: inline-block;