From e19df5183861bf570b569da5f0910bcc4766a9bd Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 29 Apr 2022 03:04:26 -0700
Subject: [PATCH] change to context menu css

- easier targets for touch screen devices, while also being shorter
- changed hover
---
 src/renderer/less/helpers.less | 450 ++++++++++++++++++---------------
 1 file changed, 242 insertions(+), 208 deletions(-)

diff --git a/src/renderer/less/helpers.less b/src/renderer/less/helpers.less
index 43452a24..db659232 100644
--- a/src/renderer/less/helpers.less
+++ b/src/renderer/less/helpers.less
@@ -1,6 +1,6 @@
 .notyf__toast {
   -webkit-app-region: no-drag;
-  cursor: pointer;
+  cursor            : pointer;
 }
 
 .notyf-info {
@@ -9,142 +9,141 @@
 
 .tooltip-inner {
   background: #2f2f2f;
-  opacity: 1;
-  border: 1px solid rgb(0 0 0 / 35%);
+  opacity   : 1;
+  border    : 1px solid rgb(0 0 0 / 35%);
   transition: all 0.3s ease-in-out;
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
 }
 
 .modal-fullscreen {
-  display: flex;
+  display        : flex;
   justify-content: center;
-  align-items: center;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.3);
-  z-index: 1000;
+  align-items    : center;
+  position       : fixed;
+  top            : 0;
+  left           : 0;
+  width          : 100%;
+  height         : 100%;
+  background     : rgba(0, 0, 0, 0.3);
+  z-index        : 1000;
 
   .modal-window {
-    background: #333;
+    background   : #333;
     border-radius: 10px;
-    box-shadow: var(--mediaItemShadow-Shadow);
-    display: flex;
-    flex-flow: column;
-    max-height: 500px;
-    max-width: 360px;
-    background: #121212;
-    width: 100%;
-    position: relative;
+    box-shadow   : var(--mediaItemShadow-Shadow);
+    display      : flex;
+    flex-flow    : column;
+    max-height   : 500px;
+    max-width    : 360px;
+    background   : #121212;
+    width        : 100%;
+    position     : relative;
 
     &:after {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
+      content       : "";
+      position      : absolute;
+      top           : 0;
+      left          : 0;
+      width         : 100%;
+      height        : 100%;
       pointer-events: none;
-      box-shadow: var(--mediaItemShadow);
-      z-index: 1;
-      border-radius: inherit;
+      box-shadow    : var(--mediaItemShadow);
+      z-index       : 1;
+      border-radius : inherit;
     }
 
     .modal-header {
-      width: 100%;
+      width  : 100%;
       padding: 6px;
     }
 
     .modal-content {
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
+      width     : 100%;
+      height    : 100%;
+      overflow  : hidden;
       overflow-y: overlay;
     }
 
-    .modal-footer {
-    }
+    .modal-footer {}
   }
 }
 
 .spatialproperties-panel {
   .modal-window {
-    height: 700px;
+    height    : 700px;
     max-height: 700px;
-    width: 800px;
-    max-width: 800px;
-    overflow: hidden;
+    width     : 800px;
+    max-width : 800px;
+    overflow  : hidden;
 
     .info-header {
       padding-left: 12px;
     }
 
     .visual-container {
-      display: flex;
+      display        : flex;
       justify-content: center;
-      align-items: center;
-      overflow: hidden;
+      align-items    : center;
+      overflow       : hidden;
     }
 
     .visual {
-      position: relative;
-      height: 250px;
-      width: 300px;
-      display: inline-flex;
-      align-items: flex-end;
+      position       : relative;
+      height         : 250px;
+      width          : 300px;
+      display        : inline-flex;
+      align-items    : flex-end;
       justify-content: center;
-      filter: drop-shadow(2px 12px 6px rgb(0 0 0 / 25%));
-      margin: 0 auto;
+      filter         : drop-shadow(2px 12px 6px rgb(0 0 0 / 25%));
+      margin         : 0 auto;
 
       .face {
-        position: absolute;
-        width: calc(12px * 6);
-        height: calc(12px * 6);
+        position     : absolute;
+        width        : calc(12px * 6);
+        height       : calc(12px * 6);
         border-radius: 6px;
-        transform: rotateX(60deg) rotateZ(-45deg);
-        transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
+        transform    : rotateX(60deg) rotateZ(-45deg);
+        transition   : transform 0.2s linear, width 0.2s linear, height 0.2s linear;
       }
 
       .listener {
-        position: absolute;
-        width: 32px;
-        height: 32px;
+        position     : absolute;
+        width        : 32px;
+        height       : 32px;
         border-radius: 6px;
-        transform: rotateX(60deg) rotateZ(-45deg);
-        transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
-        background: white;
-        color: black;
-        z-index: 2;
+        transform    : rotateX(60deg) rotateZ(-45deg);
+        transition   : transform 0.2s linear, width 0.2s linear, height 0.2s linear;
+        background   : white;
+        color        : black;
+        z-index      : 2;
       }
 
       .audiosource {
-        position: absolute;
-        width: 32px;
-        height: 32px;
+        position     : absolute;
+        width        : 32px;
+        height       : 32px;
         border-radius: 6px;
-        transform: rotateX(60deg) rotateZ(-45deg);
-        transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
-        background: yellow;
-        z-index: 2;
+        transform    : rotateX(60deg) rotateZ(-45deg);
+        transition   : transform 0.2s linear, width 0.2s linear, height 0.2s linear;
+        background   : yellow;
+        z-index      : 2;
       }
 
       .face:nth-of-type(1) {
         background: linear-gradient(45deg, #28223a, #1f2038);
-        z-index: 1;
+        z-index   : 1;
       }
 
       .face:nth-of-type(2) {
         background: linear-gradient(45deg, #7d53ad, #5763ff);
-        transform: rotateX(60deg) rotateZ(-45deg) translateZ(30px);
-        opacity: 0.7;
-        z-index: 3;
+        transform : rotateX(60deg) rotateZ(-45deg) translateZ(30px);
+        opacity   : 0.7;
+        z-index   : 3;
       }
     }
 
     .modal-header {
-      padding: 16px;
+      padding : 16px;
       position: relative;
       overflow: hidden;
 
@@ -153,18 +152,18 @@
       }
 
       .close-btn {
-        width: 50px;
-        height: 100%;
-        background-image: var(--gfx-closeBtn);
+        width              : 50px;
+        height             : 100%;
+        background-image   : var(--gfx-closeBtn);
         background-position: center;
-        background-repeat: no-repeat;
-        -webkit-app-region: no-drag;
-        appearance: none;
-        border: 0;
-        background-color: transparent;
-        position: absolute;
-        top: 0;
-        right: 0;
+        background-repeat  : no-repeat;
+        -webkit-app-region : no-drag;
+        appearance         : none;
+        border             : 0;
+        background-color   : transparent;
+        position           : absolute;
+        top                : 0;
+        right              : 0;
 
         &:hover {
           background-color: rgb(196, 43, 28)
@@ -176,14 +175,14 @@
 
 .addtoplaylist-panel {
   .modal-window {
-    max-height: 600px;
-    max-width: 400px;
-    background: rgb(18 18 18 / 90%);
-    overflow: hidden;
+    max-height     : 600px;
+    max-width      : 400px;
+    background     : rgb(18 18 18 / 90%);
+    overflow       : hidden;
     backdrop-filter: blur(16px) saturate(180%);
 
     .modal-header {
-      padding: 16px;
+      padding : 16px;
       position: relative;
 
       .modal-title {
@@ -191,18 +190,18 @@
       }
 
       .close-btn {
-        width: 50px;
-        height: 100%;
-        background-image: var(--gfx-closeBtn);
+        width              : 50px;
+        height             : 100%;
+        background-image   : var(--gfx-closeBtn);
         background-position: center;
-        background-repeat: no-repeat;
-        -webkit-app-region: no-drag;
-        appearance: none;
-        border: 0;
-        background-color: transparent;
-        position: absolute;
-        top: 0;
-        right: 0;
+        background-repeat  : no-repeat;
+        -webkit-app-region : no-drag;
+        appearance         : none;
+        border             : 0;
+        background-color   : transparent;
+        position           : absolute;
+        top                : 0;
+        right              : 0;
 
         &:hover {
           background-color: rgb(196, 43, 28)
@@ -211,34 +210,34 @@
     }
 
     .modal-search {
-      width: 100%;
-      padding: 0px 16px;
+      width   : 100%;
+      padding : 0px 16px;
       position: relative;
     }
 
     .playlist-item {
-      appearance: none;
-      border: 0px;
-      text-align: left;
-      width: 100%;
-      margin: 0;
-      display: flex;
-      background: rgba(32, 32, 32, 0.46);
-      color: #eee;
+      appearance : none;
+      border     : 0px;
+      text-align : left;
+      width      : 100%;
+      margin     : 0;
+      display    : flex;
+      background : rgba(32, 32, 32, 0.46);
+      color      : #eee;
       font-family: inherit;
-      font-size: 0.98em;
-      padding: 6px 12px;
+      font-size  : 0.98em;
+      padding    : 6px 12px;
       align-items: center;
-      flex-flow: row;
+      flex-flow  : row;
 
       .icon {
-        pointer-events: none;
-        width: 32px;
-        height: 32px;
-        display: flex;
+        pointer-events : none;
+        width          : 32px;
+        height         : 32px;
+        display        : flex;
         justify-content: center;
-        align-items: center;
-        margin-right: 6px;
+        align-items    : center;
+        margin-right   : 6px;
       }
 
       .name {
@@ -265,35 +264,35 @@
 }
 
 .menu-panel {
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 100001;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  width             : 100%;
+  height            : 100%;
+  position          : fixed;
+  top               : 0;
+  left              : 0;
+  z-index           : 100001;
+  display           : flex;
+  justify-content   : center;
+  align-items       : center;
   -webkit-app-region: no-drag;
 
   .menu-header-body {
-    padding: 6px;
-    display: flex;
+    padding   : 6px;
+    display   : flex;
     background: rgb(200 200 200 / 10%);
 
     .menu-option-header {
-      width: 40px;
-      height: 40px;
-      display: flex;
+      width          : 40px;
+      height         : 40px;
+      display        : flex;
       justify-content: center;
-      align-items: center;
-      border-radius: var(--mediaItemRadius);
-      appearance: none;
-      border: 0;
-      background: transparent;
+      align-items    : center;
+      border-radius  : var(--mediaItemRadius);
+      appearance     : none;
+      border         : 0;
+      background     : transparent;
 
       &.active {
-        .sidebar-icon > .svg-icon {
+        .sidebar-icon>.svg-icon {
           --color: var(--keyColor);
         }
       }
@@ -309,36 +308,63 @@
   }
 
   .menu-panel-body {
-    display: flex;
-    flex-flow: column;
-    background: rgb(30 30 30 / 45%);
-    backdrop-filter : blur(32px) saturate(180%);
-    position: relative;
-    min-width: 200px;
-    box-shadow: var(--ciderShadow-Generic);
-    border-radius: var(--panelRadius);
-    overflow: hidden;
-    font-size: 13px;
+    display        : flex;
+    flex-flow      : column;
+    background     : rgb(30 30 30 / 45%);
+    backdrop-filter: blur(32px) saturate(180%);
+    position       : relative;
+    min-width      : 200px;
+    box-shadow     : var(--ciderShadow-Generic);
+    border-radius  : var(--panelRadius);
+    overflow       : hidden;
+    font-size      : 13px;
+
 
     .menu-option {
       text-align: left;
-      display: flex;
-      width: calc(100% - 4px);
-      padding: 8px 10px;
+      display   : flex;
       appearance: none;
-      border: 0px;
-      font: inherit;
+      border    : 0px;
+      font      : inherit;
       background: transparent;
-      color: inherit;
-      margin: 0 auto;
-      border-radius: 5px;
+      color     : inherit;
+      margin    : 0 auto;
+      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 {
-        background: var(--selected-click);
+        &::before {
+          transition: transform .1s ease-in-out, opacity .1s ease-in-out;
+          opacity   : 1;
+          transform : scale(0.98);
+          background: var(--selected-click);
+        }
       }
     }
   }
@@ -348,18 +374,18 @@
     margin: 18px 6px;
 
     .close-btn {
-      width: 50px;
-      height: 42px;
-      background-image: var(--gfx-closeBtn);
+      width              : 50px;
+      height             : 42px;
+      background-image   : var(--gfx-closeBtn);
       background-position: center;
-      background-repeat: no-repeat;
-      -webkit-app-region: no-drag;
-      appearance: none;
-      border: 0;
-      background-color: transparent;
-      position: absolute;
-      top: 0;
-      right: 0;
+      background-repeat  : no-repeat;
+      -webkit-app-region : no-drag;
+      appearance         : none;
+      border             : 0;
+      background-color   : transparent;
+      position           : absolute;
+      top                : 0;
+      right              : 0;
 
       &:hover {
         background-color: rgb(196, 43, 28)
@@ -368,24 +394,25 @@
   }
 
   .menu-body {
-    overflow: overlay;
-    height: 100%;
-    display: flex;
+    overflow : overlay;
+    height   : 100%;
+    display  : flex;
     flex-flow: column;
-    gap: 4px;
-    padding: 6px 4px;
+    gap      : 0px;
+    padding  : 0px;
+    position : relative;
   }
 
   .menu-footer {
-    width: 100%;
+    width  : 100%;
     padding: 12px;
   }
 }
 
 .queue-panel {
-  height: 100%;
-  width: 100%;
-  display: flex;
+  height   : 100%;
+  width    : 100%;
+  display  : flex;
   flex-flow: column;
 
   .queue-header-text {
@@ -394,59 +421,66 @@
 
   .queue-body {
     overflow: overlay;
-    height: 100%;
+    height  : 100%;
   }
 
   .queue-footer {
-    width: 100%;
+    width  : 100%;
     padding: 12px;
   }
 
   .autoplay {
-    background: rgb(200 200 200 / 15%);
-    display: flex;
+    background     : rgb(200 200 200 / 15%);
+    display        : flex;
     justify-content: center;
-    appearance: none;
-    border: 0;
-    border-radius: 6px;
-    height: 32px;
-    width: 32px;
+    appearance     : none;
+    border         : 0;
+    border-radius  : 6px;
+    height         : 32px;
+    width          : 32px;
   }
 
   .infinity {
     content: url("./assets/infinity.svg");
-    margin: auto;
+    margin : auto;
   }
 }
 
 
 .moreinfo-modal {
-  .modal-window{
-    height: 70%;
-    max-height: 100%;
-    width: 45%;
-    max-width: 100%;
-    overflow: hidden;
+  .modal-window {
+    height     : 70%;
+    max-height : 100%;
+    width      : 45%;
+    max-width  : 100%;
+    overflow   : hidden;
     line-height: 1.25;
   }
-  .modal-content{
-    padding: 1em;
+
+  .modal-content {
+    padding  : 1em;
     font-size: 0.8rem;
+
     br {
-      display: block; /* makes it have a width */
-      content: ""; /* clears default height */
-      margin: 2em;
+      display      : block;
+      /* makes it have a width */
+      content      : "";
+      /* clears default height */
+      margin       : 2em;
       margin-bottom: -0.6rem;
-      }
+    }
   }
-  .modal-header{
+
+  .modal-header {
     flex-direction: column;
-    .modal-title{
+
+    .modal-title {
       text-align: unset !important;
-      width: 100%;
-      &:not(.modal-subtitle){
+      width     : 100%;
+
+      &:not(.modal-subtitle) {
         font-size: 25px;
       }
     }
   }
-}
+}
\ No newline at end of file