Add alert and hide upload view when no upload is possible (#2966)

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

diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 0dc58a7c9235173de3f6ab4826cbf40fbabb2689..897182e538d0ef82d9fa747b0331c297a4744715 100644 (file)
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -143,6 +143,14 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   }
 }
 
+
+// On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
+.modal-open {
+  overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect
+  position: fixed; // Fix the body position to disable any scroll content
+  width: 100vw; // Make sure the content fits all the available width when position: fixed
+}
+
 // Nav customizations
 .nav .nav-link {
   display: flex !important;
@@ -153,9 +161,14 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
 .nav.nav-pills {
   font-size: 16px !important;
+  font-weight: $font-semibold !important;
+
+  .nav-link {
+    opacity: 0.6 !important;
 
-  .nav-link.active {
-    font-weight: $font-semibold !important;
+    &.active, &:hover, &:active, &:focus {
+      opacity: 1 !important;
+    }
   }
 
   a {
@@ -165,29 +178,23 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   }
 }
 
-.nav-tabs {
-
-  .nav-link {
-    @include disable-default-a-behaviour;
+.nav-tabs .nav-link {
+  @include disable-default-a-behaviour;
 
-    color: pvar(--mainForegroundColor) !important;
-  }
-}
+  color: pvar(--mainForegroundColor);
+  font-weight: $font-semibold;
+  border: none;
+  border-bottom: 2px solid transparent;
+  opacity: 0.6;
 
-.nav-tabs .nav-link {
-  &:not(.active) {
-    border-bottom: 3px solid transparent;
-  }
   &.active {
-    font-weight: $font-semibold;
+    color: pvar(--mainForegroundColor);
     background-color: pvar(--mainBackgroundColor) !important;
-    border: none;
-    border-bottom: 2px solid pvar(--mainColor);
+    border-bottom-color: pvar(--mainColor);
   }
-  &:hover {
-    border-top-color: transparent;
-    border-left-color: transparent;
-    border-right-color: transparent;
+
+  &.active, &:hover, &:active, &:focus {
+    opacity: 1;
   }
 }