change to context menu css

- easier targets for touch screen devices, while also being shorter
- changed hover

src/renderer/less/helpers.less

@@ -64,8 +64,7 @@
       overflow-y: overlay;
     }
 
-    .modal-footer {
-    }
+    .modal-footer {}
   }
 }
 
@@ -320,28 +319,55 @@
     overflow       : hidden;
     font-size      : 13px;
 
+
     .menu-option {
       text-align: left;
       display   : flex;
-      width: calc(100% - 4px);
-      padding: 8px 10px;
       appearance: none;
       border    : 0px;
       font      : inherit;
       background: transparent;
       color     : inherit;
       margin    : 0 auto;
-      border-radius: 5px;
+      position  : relative;
+      width     : 100%;
+      padding   : 9px 14px;
+
+      &::before {
+        background   : var(--hover);
+        border-radius: 6px;
+        content      : "";
+        --sizeY      : 3px;
+        --sizeX      : 4px;
+        top          : var(--sizeY);
+        left         : var(--sizeX);
+        bottom       : var(--sizeY);
+        right        : var(--sizeX);
+        position     : absolute;
+        opacity      : 0;
+        transform    : scale(0.98);
+        z-index      : -1;
+        transition   : transform .25s ease-out, opacity .25s ease-out;
+      }
 
       &:hover {
-        background: var(--selected);
+        &::before {
+          transition: transform .1s ease-in, opacity .1s ease-in;
+          opacity   : 1;
+          transform : scale(1);
+        }
       }
 
       &:active {
+        &::before {
+          transition: transform .1s ease-in-out, opacity .1s ease-in-out;
+          opacity   : 1;
+          transform : scale(0.98);
           background: var(--selected-click);
         }
       }
     }
+  }
 
 
   .menu-header-text {
@@ -372,8 +398,9 @@
     height   : 100%;
     display  : flex;
     flex-flow: column;
-    gap: 4px;
-    padding: 6px 4px;
+    gap      : 0px;
+    padding  : 0px;
+    position : relative;
   }
 
   .menu-footer {
@@ -429,21 +456,28 @@
     overflow   : hidden;
     line-height: 1.25;
   }
+
   .modal-content {
     padding  : 1em;
     font-size: 0.8rem;
+
     br {
-      display: block; /* makes it have a width */
-      content: ""; /* clears default height */
+      display      : block;
+      /* makes it have a width */
+      content      : "";
+      /* clears default height */
       margin       : 2em;
       margin-bottom: -0.6rem;
     }
   }
+
   .modal-header {
     flex-direction: column;
+
     .modal-title {
       text-align: unset !important;
       width     : 100%;
+
       &:not(.modal-subtitle) {
         font-size: 25px;
       }