From c487681d945e4d6bb0335ed618f2b9380d28033c Mon Sep 17 00:00:00 2001
From: Emile Trotignon <emile.trotignon@gmail.com>
Date: Fri, 12 Jul 2024 15:35:59 +0200
Subject: [PATCH] remove !important This is done by simplifying some rules, and
 by augmenting the specificity of the other via nesting.

---
 src/html_support_files/odoc.css | 117 +++++++++++++++-----------------
 1 file changed, 53 insertions(+), 64 deletions(-)

diff --git a/src/html_support_files/odoc.css b/src/html_support_files/odoc.css
index fb01b5f075..cf2258c1a9 100644
--- 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;
+      }
+    }
   }
 }