remove !important

This is done by simplifying some rules, and by augmenting the specificity of the other via nesting.
ocaml · Jul 12, 2024 · c487681 · c487681
1 parent a1af33c
commit c487681
Showing 1 changed file with 53 additions and 64 deletions.
diff --git a/src/html_support_files/odoc.css b/src/html_support_files/odoc.css
@@ -863,7 +863,7 @@ td.def-doc *:first-child {
 /* When a search bar is present, we need the sticky sidebar to be a bit lower,
    so `top` is higher  */
 
-.odoc-search + * + .odoc-tocs .odoc-toc {
+body.odoc:has( .odoc-search) .odoc-toc {
   --toc-top: calc(var(--search-bar-height) + 2 * var(--search-padding-top));
   max-height: calc(100vh - 2 * var(--toc-top));
   top: var(--toc-top)
@@ -1249,86 +1249,75 @@ td.def-doc *:first-child {
   body.odoc {
     max-width: 132ex;
     grid-template-areas:
-    "search-bar nav"
-    "sidebar    preamble"
-    "sidebar    content";
-  }
-
-  body.odoc:has(> .odoc-search:focus-within) {
-    grid-template-areas:
-    "search-bar search-bar"
-    ".          nav"
-    "sidebar    preamble"
-    "sidebar    content" !important;
-  }
-
-  .odoc-tocs {
+      "search-bar nav"
+      "sidebar    preamble"
+      "sidebar    content";
+    .odoc-tocs {
       display: flex;
       grid-area: sidebar;
       flex-direction : column;
       gap: 20px;
-  }
-  .odoc-toc {
-      position: unset;
-      max-height: unset !important;
+      .odoc-toc {
+        position: unset;
+        max-height: unset;
+      }
+    }
+    &:has(.odoc-search:focus-within) {
+      grid-template-areas:
+        "search-bar search-bar"
+        ".          nav"
+        "sidebar    preamble"
+        "sidebar    content";
+    }
   }
 }
 
 @media only screen and (max-width: 110ex) {
-  body {
+  body.odoc {
     margin: 2em;
     padding: 0;
-  }
-
-  body.odoc {
     grid-template-areas:
       "search-bar"
       "nav"
       "preamble"
       "toc-local"
       "content"
-      "toc-global" !important;
-    grid-template-columns: 1fr !important;
-  }
-
-  body.odoc:has(> .odoc-search:focus-within) {
-    /* This is the same as when there is no focus on the search bar, this is
-    just to prevent the full screen rule from changing anything. */
-    grid-template-areas:
-      "search-bar"
-      "nav"
-      "preamble"
-      "toc-local"
-      "content"
-      "toc-global" !important;
-    grid-template-columns: 1fr !important;
-  }
-
-
-  .odoc-search {
-    position: relative;
-    height: calc(var(--search-bar-height) + 2 * var(--search-padding-top));
-  }
-
-  .odoc-tocs {
+      "toc-global";
+    grid-template-columns: 1fr;
+    &:has(> .odoc-search:focus-within) {
+      /* This is the same as when there is no focus on the search bar, this is
+      just to prevent the full screen rule from changing anything. */
+      grid-template-areas:
+        "search-bar"
+        "nav"
+        "preamble"
+        "toc-local"
+        "content"
+        "toc-global";
+      grid-template-columns: 1fr;
+    }
+    .odoc-search {
+      position: relative;
+      height: calc(var(--search-bar-height) + 2 * var(--search-padding-top));
+    }
+    nav.odoc-nav {
+      padding-top: 0;
+      padding-bottom: var(--search-padding-top);
+    }
+    .odoc-tocs {
       display: contents;
-  }
-
-  .odoc-toc {
-    position: static;
-    width: auto;
-    min-width: unset;
-    max-width: unset;
-    max-height: unset;
-    border: none;
-    padding: 0.2em 1em;
-    border-radius: 5px;
-    margin-bottom: 2em;
-  }
-
-  nav.odoc-nav {
-    padding-top: 0 !important;
-    padding-bottom: var(--search-padding-top);
+      .odoc-toc {
+        position: static;
+        width: auto;
+        min-width: unset;
+        max-width: unset;
+        max-height: unset;
+        border: none;
+        padding: 0.2em 1em;
+        border-radius: 5px;
+        margin-bottom: 2em;
+      }
+    }
   }
 }