Improve alignment ui

src/csui/src/PlayerUiPanels/AlignmentOptionsControlComponent.vue

@@ -105,41 +105,70 @@ export default {
     flex: 0 0 33%;
 
     display: flex;
-
-    .alignment-ui {
-      width: 50%;
-      height: 50%;
-    }
-
     align-items: center;
     justify-content: center;
 
+    background-color: rgba(0,0,0,0.25);
+    cursor: pointer;
+
+    margin: 0.125rem;
+    padding: 0.5rem;
+    width: 1.5rem;
+    height: 1.5rem;
+
+    border-bottom: 1px solid transparent;
+
+    .alignment-ui {
+
+      width: 50%;
+      height: 50%;
+
+      border-style: solid;
+      border-width: 0px;
+      border-color: #fff;
+    }
+
+    &:hover {
+      background-color: rgba(0,0,0,0.5);
+      border-bottom: 1px solid #fa6;
+
+      .alignment-ui {
+        border-color: #fa6 !important;
+      }
+
+      &.center.ycenter {
+        .alignment-ui {
+          background-color: #fa6;
+        }
+      }
+    }
+
     &.top  {
       align-items: flex-start;
 
       .alignment-ui {
-        border-top: 3px solid #fff;
+        border-top-width: 3px;
       }
     }
     &.bottom  {
       align-items: flex-end;
 
       .alignment-ui {
-        border-bottom: 3px solid #fff;
+        border-bottom-width: 3px;
       }
     }
     &.left {
       justify-content: flex-start;
 
       .alignment-ui {
-        border-left: 3px solid #fff;
+        border-left-width: 3px;
       }
     }
     &.right {
       justify-content: flex-end;
 
       .alignment-ui {
-        border-right: 3px solid #fff;
+        border-right-width: 3px;
       }
     }
 

src/csui/src/PlayerUiPanels/VideoSettings.vue

@@ -76,7 +76,7 @@
             <h1>Video alignment:</h1>
           </div>
 
-          <div class="flex flex-row">
+          <div class="flex flex-row justify-center mt-4">
             <alignment-options-control-component
               :eventBus="eventBus"
             >
@@ -94,7 +94,7 @@
         </div>
 
         <!-- ZOOM OPTIONS -->
-        <div class="sub-panel">
+        <!-- <div class="sub-panel">
           <div class="flex flex-row">
             <mdicon name="magnify-plus-outline" :size="32" />
             <h1>Manual zoom:</h1>
@@ -106,7 +106,7 @@
             :eventBus="eventBus"
             :isEditing="editMode"
           ></ZoomOptionsPanel>
-        </div>
+        </div> -->
 
       </div>
     </div>
@@ -179,3 +179,14 @@ export default {
 <style lang="scss" src="../../res/css/flex.scss" scoped module></style>
 <style lang="scss" src="../res-common/panels.scss" scoped module></style>
 <style lang="scss" src="../res-common/common.scss" scoped module></style>
+<style lang="scss" scoped>
+.justify-center {
+  justify-content: center;
+}
+.items-center {
+  align-items: center;
+}
+.mt-4{
+  margin-top: 1rem;
+}
+</style>