X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Fapplication.scss;h=3be8f057bde9306117059088ad438fc02812fc57;hb=f2c6ebc61b55df6e5dfbeed6413f3c908ea7846a;hp=946647ccbbfc9ea7dddca2af952239d0efba119a;hpb=560605026bfadab711cf6d34e9c7ea865887816a;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 946647ccb..3be8f057b 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -13,6 +13,7 @@ $assets-path: '../../assets/';
 
 @import './bootstrap';
 @import './primeng-custom';
+@import './ng-select.scss';
 
 [hidden] {
   display: none !important;
@@ -52,7 +53,7 @@ body {
 
   --activatedActionButtonColor: #{$activated-action-button-color};
 
-  --expanded-horizontal-margin-content: $expanded-horizontal-margins;
+  --expanded-horizontal-margin-content: #{$expanded-horizontal-margins};
 
   font-family: $main-fonts;
   font-weight: $font-regular;
@@ -102,6 +103,16 @@ label {
   font-size: 15px;
 }
 
+code {
+  background-color: pvar(--greyBackgroundColor);
+  border-radius: 3px;
+  padding: .2em .4em;
+  margin: auto .4em;
+  font-size: 75%;
+  display: inline-block;
+  vertical-align: middle;
+}
+
 .form-error {
   display: block;
   color: $red;
@@ -138,10 +149,6 @@ label {
     flex-grow: 1;
   }
 
-  my-top-menu-dropdown + .margin-content {
-    padding-top: $sub-menu-height + $sub-menu-margin-bottom;
-  }
-
   .sub-menu {
     background-color: pvar(--submenuColor);
     width: 100%;
@@ -149,22 +156,20 @@ label {
     align-items: center;
     padding-left: $not-expanded-horizontal-margins;
     padding-right: $not-expanded-horizontal-margins;
-
-    & + .margin-content {
-      padding-top: $sub-menu-margin-bottom;
-    }
+    height: $sub-menu-height;
+    margin-bottom: $sub-menu-margin-bottom;
 
     &.sub-menu-fixed {
-      height: $sub-menu-height;
       position: fixed;
       z-index: #{z('header') - 1};
-
-      & + .margin-content {
-        padding-top: $sub-menu-height + $sub-menu-margin-bottom;
-      }
     }
   }
 
+  // Use an appropriate offset top when sub-menu fixed
+  .margin-content.offset-content {
+    padding-top: $sub-menu-height + $sub-menu-margin-bottom;
+  }
+
   // Override some properties if the main content is expanded (no menu on the left)
   &.expanded {
     margin-left: 0;
@@ -305,16 +310,24 @@ table {
   }
 }
 
+/* offsetTop for scrollToAnchor */
+
 .anchor {
   position: relative;
-  top: #{-($header-height + 20px)}; // offsetTop scrollToAnchor
+  top: #{-($header-height + 20px)};
+}
+
+.offset-content { // if sub-menu fixed
+  .anchor {
+    top: #{-($header-height + $sub-menu-height + 20px)};
+  }
 }
 
 @media screen and (max-width: #{breakpoint(xxl)}) {
   .main-col {
     &.expanded {
       .margin-content {
-        --expanded-horizontal-margin-content: $expanded-horizontal-margins/2;
+        --expanded-horizontal-margin-content: #{$expanded-horizontal-margins/2};
       }
     }
   }
@@ -325,7 +338,7 @@ table {
   .main-col {
     &, &.expanded {
       .margin-content {
-        --expanded-horizontal-margin-content: $expanded-horizontal-margins/3;
+        --expanded-horizontal-margin-content: #{$expanded-horizontal-margins/3};
       }
 
       .sub-menu {
@@ -363,6 +376,11 @@ table {
         overflow-x: auto;
       }
 
+      // Use an appropriate offset top when sub-menu fixed
+      .margin-content.offset-content {
+        padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view;
+      }
+
       .admin-sub-header {
         @include admin-sub-header-responsive(15px*2);
       }