Improve navigation sub-menu and tabs effects (#2971)

[github/Chocobozzz/PeerTube.git] / client / src / sass / application.scss

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 16e7ea5cada8317c77aabfe838b1020fa70854b1..c76e5db7b2c692fd418581a5c46ea403a108b6d8 100644 (file)
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -47,21 +47,25 @@ body {
 
   --actionButtonColor: #{$grey-foreground-color};
   --supportButtonBackgroundColor: #{transparent};
-  --supportButtonColor: #{var(--actionButtonColor)};
+  --supportButtonColor: #{pvar(--actionButtonColor)};
   --supportButtonHeartColor: #{$support-button-heart};
 
   --activatedActionButtonColor: #{$activated-action-button-color};
 
   font-family: $main-fonts;
   font-weight: $font-regular;
-  color: var(--mainForegroundColor);
-  background-color: var(--mainBackgroundColor);
+  color: pvar(--mainForegroundColor);
+  background-color: pvar(--mainBackgroundColor);
   font-size: 14px;
+  // On desktop browsers, make sure vertical scroll bar is always visible
+  // Allow to disable the scrollbar instead of hide it when the content fit the body
+  // And not move the content and header horizontally sticked to right when the content is updating
+  overflow-y: scroll;
 }
 
 ::selection {
-  color: var(--mainBackgroundColor);
-  background-color: var(--mainHoverColor);
+  color: pvar(--mainBackgroundColor);
+  background-color: pvar(--mainHoverColor);
 }
 
 #incompatible-browser {
@@ -78,12 +82,17 @@ strong {
 
 input.readonly {
   /* Force blank on readonly inputs */
-  background-color: var(--inputBackgroundColor) !important;
+  background-color: pvar(--inputBackgroundColor) !important;
 }
 
 input, textarea {
   outline: none;
-  color: var(--mainForegroundColor);
+  color: pvar(--mainForegroundColor);
+}
+
+button {
+  background: unset;
+  @include disable-outline;
 }
 
 label {
@@ -128,14 +137,15 @@ label {
   }
 
   .sub-menu {
-    background-color: var(--submenuColor);
+    background-color: pvar(--submenuColor);
     width: 100%;
-    height: 81px;
-    margin-bottom: $sub-menu-margin-bottom;
+    height: $sub-menu-height;
     display: flex;
     align-items: center;
     padding-left: $not-expanded-horizontal-margins;
     padding-right: $not-expanded-horizontal-margins;
+    position: fixed;
+    z-index: 1;
   }
 
   // Override some properties if the main content is expanded (no menu on the left)
@@ -166,21 +176,23 @@ label {
 }
 
 .title-page {
-  color: var(--mainForegroundColor);
+  opacity: 0.6;
+  color: pvar(--mainForegroundColor);
   font-size: 16px;
   display: inline-block;
   margin-right: 55px;
   font-weight: $font-semibold;
   @include disable-default-a-behaviour;
 
-  &.active, &.title-page-single {
+  border-bottom: 2px solid transparent;
+
+  &.title-page-single {
     margin-top: 30px;
     margin-bottom: 25px;
   }
 
   &.active {
-    font-weight: $font-bold;
-    border-bottom: 2px solid var(--mainColor);
+    border-bottom-color: pvar(--mainColor);
   }
 
   &.title-page-single {
@@ -188,7 +200,12 @@ label {
   }
 
   &:hover, &:active, &:focus {
-    color: var(--mainForegroundColor);
+    color: pvar(--mainForegroundColor);
+  }
+
+  &.active, &:hover,  &:active, &:focus, &.title-page-single {
+    opacity: 1;
+    outline: 0px hidden !important;
   }
 
   @media screen and (max-width: $mobile-view) {
@@ -200,11 +217,6 @@ label {
 .title-page-settings {
   white-space: nowrap;
   font-size: 115%;
-  font-weight: $font-regular;
-
-  &.active {
-    font-weight: $font-semibold;
-  }
 }
 
 .admin-sub-header {
@@ -220,14 +232,18 @@ label {
     @include disable-default-a-behaviour;
 
     font-size: 16px;
-    color: var(--mainForegroundColor);
+    color: pvar(--mainForegroundColor);
     padding: 5px 15px;
     border-radius: 0.25rem;
+    font-weight: $font-semibold;
+    opacity: 0.6;
 
     &.active {
-      font-weight: $font-semibold;
       background-color: #f0f0f0;
-      color: #000;
+    }
+
+    &.active, &:hover, &:active, &:focus {
+      opacity: 1;
     }
   }
 }
@@ -253,6 +269,8 @@ table {
 
 .no-results {
   height: 40vh;
+  max-height: 500px;
+
   display: flex;
   align-items: center;
   justify-content: center;