docs: Add more design polish (#43802)

Danilo Leal created 3 days ago

Fixing the theme toggle popover, search results design, and
sidebar/table of contents responsiveness.

Release Notes:

- N/A

Change summary

docs/theme/css/chrome.css    | 39 ++++++++++++-------------------------
docs/theme/css/general.css   |  6 ++--
docs/theme/css/variables.css |  2 -
docs/theme/page-toc.css      |  4 --
docs/theme/plugins.js        | 25 ------------------------
5 files changed, 17 insertions(+), 59 deletions(-)

Detailed changes

docs/theme/css/chrome.css

@@ -365,16 +365,9 @@ mark.fade-out {
   color: var(--searchresults-header-fg);
 }
 
-.searchresults-outer {
-  margin-inline-start: auto;
-  margin-inline-end: auto;
-  max-width: var(--content-max-width);
-  border-block-end: 1px dashed var(--searchresults-border-color);
-}
-
 ul#searchresults {
   list-style: none;
-  padding-inline-start: 20px;
+  padding-inline-start: 0;
 }
 ul#searchresults li {
   margin: 10px 0px;
@@ -386,16 +379,16 @@ ul#searchresults li.focus {
 }
 ul#searchresults span.teaser {
   display: block;
-  clear: both;
-  margin-block-start: 5px;
-  margin-block-end: 0;
-  margin-inline-start: 20px;
-  margin-inline-end: 0;
   font-size: 0.8em;
+  margin-block-start: 5px;
+  margin-inline-start: 4px;
+  padding-inline-start: 2ch;
+  border-left: 1px solid var(--divider);
 }
 ul#searchresults span.teaser em {
   font-weight: bold;
-  font-style: normal;
+  color: var(--full-contrast);
+  background: var(--code-bg);
 }
 
 /* Sidebar */
@@ -475,7 +468,7 @@ ul#searchresults span.teaser em {
   background: var(--scrollbar);
 }
 
-@media only screen and (max-width: 619px) {
+@media only screen and (max-width: 780px) {
   .sidebar {
     position: fixed;
     top: 0;
@@ -494,16 +487,11 @@ ul#searchresults span.teaser em {
   }
 
   body.sidebar-open .sidebar {
+    box-shadow: var(--sidebar-mobile-shadow);
     transform: translateX(0);
   }
 }
 
-@media only screen and (min-width: 620px) {
-  .sidebar {
-    position: relative;
-  }
-}
-
 .chapter {
   list-style: none outside none;
   padding: 8px 20px 20px 20px;
@@ -631,7 +619,6 @@ ul#searchresults span.teaser em {
   padding: 0;
   list-style: none;
   display: none;
-  /* Don't let the children's background extend past the rounded corners. */
   overflow: hidden;
 }
 
@@ -769,6 +756,10 @@ ul#searchresults span.teaser em {
   width: 100%;
 }
 
+#searchbar {
+  margin: 0;
+}
+
 @media only screen and (max-width: 780px) {
   .header-bar {
     padding: 16px;
@@ -814,10 +805,6 @@ ul#searchresults span.teaser em {
     display: flex;
   }
 
-  .sidebar {
-    box-shadow: var(--sidebar-mobile-shadow);
-  }
-
   .theme-popup {
     right: 15px;
   }

docs/theme/css/general.css

@@ -68,6 +68,7 @@ h3,
 h4,
 h5,
 h6 {
+  position: relative;
   font-family: var(--title-font);
   font-weight: 480;
   color: var(--title-color);
@@ -152,10 +153,9 @@ h3:target::before,
 h4:target::before,
 h5:target::before,
 h6:target::before {
-  display: inline-block;
   content: "»";
-  margin-inline-start: -30px;
-  width: 30px;
+  position: absolute;
+  left: -1.5ch;
 }
 
 hr {

docs/theme/css/variables.css

@@ -86,7 +86,6 @@
   --searchbar-fg: #000;
   --searchbar-shadow-color: #aaa;
   --searchresults-header-fg: #666;
-  --searchresults-border-color: #888;
   --searchresults-li-bg: #e4f2fe;
   --search-mark-bg: #a2cff5;
 
@@ -183,7 +182,6 @@
   --searchbar-fg: hsl(220, 14%, 71%);
   --searchbar-shadow-color: hsl(220, 13%, 15%);
   --searchresults-header-fg: hsl(220, 14%, 60%);
-  --searchresults-border-color: hsl(220, 13%, 30%);
   --searchresults-li-bg: hsl(220, 13%, 25%);
   --search-mark-bg: hsl(220, 93%, 60%);
 

docs/theme/page-toc.css

@@ -6,9 +6,7 @@
   flex-direction: column;
   gap: 4px;
   padding: 28px 0 120px 0;
-  max-width: 230px;
-  min-width: 180px;
-  width: 100%;
+  width: 200px;
   max-height: calc(100svh - 50px);
   overflow-x: hidden;
 }

docs/theme/plugins.js

@@ -49,9 +49,6 @@ if (typeof requestIdleCallback === "function") {
 
 function darkModeToggle() {
   var html = document.documentElement;
-  var themeToggleButton = document.getElementById("theme-toggle");
-  var themePopup = document.getElementById("theme-list");
-  var themePopupButtons = themePopup.querySelectorAll("button");
 
   function setTheme(theme) {
     html.setAttribute("data-theme", theme);
@@ -60,28 +57,6 @@ function darkModeToggle() {
     localStorage.setItem("mdbook-theme", theme);
   }
 
-  themeToggleButton.addEventListener("click", function (event) {
-    event.preventDefault();
-    themePopup.style.display =
-      themePopup.style.display === "block" ? "none" : "block";
-  });
-
-  themePopupButtons.forEach(function (button) {
-    button.addEventListener("click", function () {
-      setTheme(this.id);
-      themePopup.style.display = "none";
-    });
-  });
-
-  document.addEventListener("click", function (event) {
-    if (
-      !themePopup.contains(event.target) &&
-      !themeToggleButton.contains(event.target)
-    ) {
-      themePopup.style.display = "none";
-    }
-  });
-
   // Set initial theme
   var currentTheme = localStorage.getItem("mdbook-theme");
   if (currentTheme) {