Remove uneccessary details to link titles

[github/Chocobozzz/PeerTube.git] / client / src / app / menu / menu.component.scss

diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index a4b1ec000bd41a0da273d5524302e2eea84594ce..8f8c31417966f5a81da9b7917da7afffd3aa7151 100644 (file)
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -7,18 +7,18 @@
   padding: 0;
   width: $menu-width;
   z-index: z(menu);
-  scrollbar-color: var(--actionButtonColor) var(--menuBackgroundColor);
+  scrollbar-color: pvar(--actionButtonColor) pvar(--menuBackgroundColor);
 }
 
 menu {
   @include ellipsis;
 
-  background-color: var(--menuBackgroundColor);
+  background-color: pvar(--menuBackgroundColor);
   margin: 0;
   padding: 0;
   height: 100%;
   overflow-x: hidden;
-  color: var(--menuForegroundColor);
+  color: pvar(--menuForegroundColor);
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -27,6 +27,10 @@ menu {
     overflow-y: auto;
   }
 
+  @media not all and (hover: hover) and (pointer: fine) {
+    overflow-y: auto;
+  }
+
   &.logged-in {
     .panel-block {
       margin-bottom: 20px;
@@ -58,7 +62,7 @@ menu {
       .logged-in-display-name {
         font-size: 16px;
         font-weight: $font-semibold;
-        color: var(--menuForegroundColor);
+        color: pvar(--menuForegroundColor);
         cursor: pointer;
 
         @include disable-default-a-behaviour;
@@ -85,7 +89,7 @@ menu {
         }
 
         ::ng-deep {
-          @include apply-svg-color(var(--menuForegroundColor));
+          @include apply-svg-color(pvar(--menuForegroundColor));
         }
       }
     }
@@ -135,7 +139,7 @@ menu {
       display: flex;
       align-items: center;
       padding-left: $menu-lateral-padding;
-      color: var(--menuForegroundColor);
+      color: pvar(--menuForegroundColor);
       cursor: pointer;
       min-height: 40px;
       font-size: 16px;
@@ -185,24 +189,24 @@ menu {
     width: $menu-width;
     padding-bottom: 15px;
 
-    & > div:not(.panel-block) {
-      padding-left: $menu-lateral-padding;
-      padding-right: $menu-lateral-padding;
-      row-gap: 1em;
+    .bottom-links {
+      display: flex;
+      flex-direction: column;
+      padding: 0 $menu-lateral-padding;
     }
 
     $footer-links-base-opacity: .8;
 
     .footer-links {
-      display: inline-flex;
-      flex-wrap: wrap;
-
-      & > a {
-        @include disable-default-a-behaviour;
+      &, > div {
+        display: flex;
+        flex-wrap: wrap;
+      }
 
+      a, span[role=button] {
         display: inline-block;
         text-decoration: none;
-        color: var(--mainBackgroundColor);
+        color: pvar(--mainBackgroundColor);
         opacity: $footer-links-base-opacity;
         white-space: nowrap;
         font-size: 90%;
@@ -217,8 +221,8 @@ menu {
           height: 1.4rem;
 
           my-global-icon {
-            @include apply-svg-color(var(--mainBackgroundColor));
-        
+            @include apply-svg-color(pvar(--mainBackgroundColor));
+
             display: flex;
             width: auto;
             height: 90%;
@@ -231,7 +235,7 @@ menu {
     .footer-copyleft small a {
       @include disable-default-a-behaviour;
 
-      color: var(--mainBackgroundColor);
+      color: pvar(--mainBackgroundColor);
       opacity: $footer-links-base-opacity - .2;
     }
   }
@@ -319,7 +323,7 @@ label {
     left: 3px;
     width: 14px;
     height: 14px;
-    background: var(--mainBackgroundColor);
+    background: pvar(--mainBackgroundColor);
     border-radius: 50%;
     transition: 0.3s ease-out;
   }
@@ -330,7 +334,7 @@ label {
 }
 
 input:checked + label {
-  background: var(--mainColor);
+  background: pvar(--mainColor);
 
   &:after {
     left: calc(100% - 3px);