Styling

sagemath · Jun 27, 2024 · 6c6dd0c · 6c6dd0c
1 parent 2ee7788
commit 6c6dd0c
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 57 deletions.
diff --git a/src/doc/common/static/custom-furo.css b/src/doc/common/static/custom-furo.css
@@ -24,33 +24,51 @@ a.pdf:hover {
 /* Style for announcement banner */
 
 .announcement {
-    background: orange;
+  background: orange;
 }
 
 .announcement-content {
-    color: black;
+  color: black;
 }
 
 .announcement-content a {
-    color: white;
-    text-decoration: none;
+  color: white;
+  text-decoration: none;
 }
 
-/* Style for the floating dropdown menu */
+/* Style for the floating versions menu */
 
-#versionsMenu {
-    position: fixed;
-    bottom: 10px;
-    right: 10px;
-    padding: 5px;
-    font-size: 16px;
-    opacity: 1;
+.sidebar-drawer {
+  z-index: 100;
 }
 
-.sidebar-drawer {
-    z-index: 100;
+#versions-menu {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  padding: 5px;
+  font-size: small;
+  opacity: 1;
+  background-color: white;
+  color: blue;
+}
+
+body[data-theme="dark"] {
+  #versions-menu {
+    background-color: black;
+    color: white;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  body[data-theme="auto"] {  /* the same styles with body[data-theme="dark"] */
+    #versions-menu {
+      background-color: black;
+      color: white;
+    }
+  }
 }
 
-#versionsMenu:hover {
+#versions-menu:hover {
     opacity: 1
 }
diff --git a/src/doc/common/static/custom-jupyter-sphinx.css b/src/doc/common/static/custom-jupyter-sphinx.css
@@ -96,41 +96,41 @@ body[data-theme="dark"] {
 }
 
 @media (prefers-color-scheme: dark) {
- body[data-theme="auto"] { /* the same styles with body[data-theme="dark"] */
-  .jupyter_container {
-    color: white;
-    background-color: black;
-  }
-
-  .jupyter_container .highlight {
-    background-color: black;
-  }
-
-  .thebelab-button {
-    color: #d0d0d0;
-    background-color: #383838;
-  }
-
-  .thebelab-button:active {
-    color: #368ce2;
-  }
-
-  #thebelab-activate-button {
-    background-color: #383838;
-  }
-
-  #thebelab-activate-button:active {
-    color: #368ce2;
-  }
-
-  .thebelab-cell .jp-OutputArea-output {
-    color: white;
-    background-color: black;
-  }
-
-  .thebelab-cell .jp-OutputArea-output pre {
-    color: white;
-    background-color: black;
+  body[data-theme="auto"] { /* the same styles with body[data-theme="dark"] */
+    .jupyter_container {
+      color: white;
+      background-color: black;
+    }
+
+    .jupyter_container .highlight {
+      background-color: black;
+    }
+
+    .thebelab-button {
+      color: #d0d0d0;
+      background-color: #383838;
+    }
+
+    .thebelab-button:active {
+      color: #368ce2;
+    }
+
+    #thebelab-activate-button {
+      background-color: #383838;
+    }
+
+    #thebelab-activate-button:active {
+      color: #368ce2;
+    }
+
+    .thebelab-cell .jp-OutputArea-output {
+      color: white;
+      background-color: black;
+    }
+
+    .thebelab-cell .jp-OutputArea-output pre {
+      color: white;
+      background-color: black;
+    }
   }
- }
 }
diff --git a/src/doc/common/static/jupyter-sphinx-furo.js b/src/doc/common/static/jupyter-sphinx-furo.js
@@ -92,15 +92,15 @@ async function fetchVersions() {
 
     if (Object.keys(versionMap).length > 0) {
         // Populate the versions menu
-        let dropdown = document.getElementById("versionsMenu");
+        let dropdown = document.getElementById("versions-menu");
         Object.keys(versionMap).forEach(ver => {
             let option = document.createElement("option");
             option.value = ver;
             option.text = ver;
             dropdown.add(option);
         });
     } else {
-        document.getElementById('versionsMenu').style.display = 'none';
+        document.getElementById('versions-menu').style.display = 'none';
     }
 
     let urlParams = new URLSearchParams(window.location.search);
@@ -118,7 +118,7 @@ fetchVersions()
 
 // Function to change the version based on versions menu selection
 function changeVersion() {
-    let selectedVersion = document.getElementById("versionsMenu").value;
+    let selectedVersion = document.getElementById("versions-menu").value;
     if (selectedVersion) {
        // Check if the version exists in the map and redirect
         if (selectedVersion in versionMap) {
@@ -131,7 +131,6 @@ function changeVersion() {
 }
 
 
-
 // Listen to the kernel status changes
 // https://thebe.readthedocs.io/en/stable/events.html
 thebelab.on("status", function (evt, data) {

diff --git a/src/doc/common/templates-furo/sidebar/version-selector.html b/src/doc/common/templates-furo/sidebar/version-selector.html
@@ -1,3 +1,3 @@
-<select id="versionsMenu" onchange="changeVersion()">
-    <option value="">versions</option>
+<select id="versions-menu" onchange="changeVersion()">
+    <option value="" selected>versions</option>
 </select>