X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Fbootstrap.scss;h=a3b60198cceee2befb875e7154f3f510bc8b0c64;hb=f2c6ebc61b55df6e5dfbeed6413f3c908ea7846a;hp=897182e538d0ef82d9fa747b0331c297a4744715;hpb=ed5bb517266c80904c44bf44a335f1003f5aa277;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 897182e53..a3b60198c 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -27,7 +27,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 }
 
 /* rules for dropdowns excepts when in button group, to avoid impacting the dropdown-toggle */
-.dropdown:not(.btn-group):not(.dropdown-root):not(.action-dropdown):not(.input-group-prepend) {
+.dropdown:not(.btn-group):not(.dropdown-root):not(.action-dropdown):not(.input-group-prepend):not(.column-toggle) {
   z-index: z(dropdown) !important;
 
   &.list-overflow-menu,
@@ -147,8 +147,30 @@ $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
+  width: 100vw; // Make sure the content fits all the available width
+}
+
+// On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
+@media (hover: none) and (pointer: coarse) {
+  .modal-open, .menu-open {
+    overflow: hidden !important;
+  }
+
+  // On touchscreen devices display content overlay when opened menu
+  .menu-open {
+    .main-col {
+      &::before {
+        background-color: black;
+        width: 100vw;
+        height: 100vh;
+        opacity: 0.75;
+        content: '';
+        display: block;
+        position: fixed;
+        z-index: z('header') - 1;
+      }
+    }
+  }
 }
 
 // Nav customizations
@@ -310,6 +332,7 @@ ngb-tooltip-window {
     position: absolute;
     right: .5rem;
     height: 95%;
+    font-size: 14px;
 
     &:hover {
       color: rgba(0, 0, 0, 0.7);