Translated using Weblate (Swedish)

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

diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 308a28658d33316b3b0d40037abb0f9cc46c8919..208c7f582afb65c08cb228cffaf4093b7ad318d1 100644 (file)
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -27,13 +27,26 @@ $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):not(.column-toggle) {
+.dropdown {
   z-index: z(dropdown) !important;
+}
 
-  &.list-overflow-menu,
-  &.parent-entry {
-    z-index: z(header) - 1 !important;
-  }
+.list-overflow-menu,
+.parent-entry {
+  z-index: z(header) - 1 !important;
+}
+
+.btn-group,
+.dropdown-root,
+.action-dropdown,
+.input-group-prepend,
+.column-toggle {
+  z-index: inherit !important;
+}
+
+.btn-group > .btn:not(:first-child) {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
 }
 
 .dropdown-menu {
@@ -56,6 +69,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
       opacity: .9;
     }
 
+    &:active {
+      color: pvar(--mainForegroundColor) !important;
+    }
+
     &::after {
       display: none;
     }
@@ -150,6 +167,29 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   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('menu') - 1;
+      }
+    }
+  }
+}
+
 // Nav customizations
 .nav .nav-link {
   display: flex !important;