diff --git a/web/skins/classic/css/base/skin.css b/web/skins/classic/css/base/skin.css index dff9f6f51d..7230656c16 100644 --- 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 index a104e308f6..85d5570f10 100644 --- 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 index 2ffe3c5e98..83094b23d9 100644 --- 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 index ddf39d6f5e..8793d87709 100644 --- 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;