Reader mode styling

juba · Feb 6, 2023 · 5454930 · 5454930
1 parent 7b782f7
commit 5454930
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 4 deletions.
diff --git a/css/tidyverse.scss b/css/tidyverse.scss
@@ -21,7 +21,8 @@
 
 /* Sidebar */
 
-#quarto-sidebar {
+#quarto-sidebar,
+#quarto-content .sidebar-navigation {
 
     color: #333;
     background-color: #fafafa;
@@ -39,6 +40,7 @@
     code {
         font-size: inherit;
         color: inherit;
+        background-color: transparent;
     }
 
     .chapter-number {
@@ -62,7 +64,8 @@
 
 /* Margin sidebar (Toc) */
 
-#quarto-margin-sidebar {
+#quarto-margin-sidebar,
+#quarto-content .margin-sidebar {
     code {
         font-size: inherit;
         color: inherit;

diff --git a/css/tidyverse_dark.scss b/css/tidyverse_dark.scss
@@ -5,15 +5,19 @@ $sidebar-color: #ccd1e2;
 $sidebar-active-link-color: #c1ff42;
 $body-link-color: #c1ff42;
 $body-color-dark: #333;
+$body-bg: #1c1f2b;
 $pre-bg: #2d3143;
 $pre-color: #9dbed8;
+$toggle-border: #5d6173;
+$toggle-title-bg: #0c0f1b;
 
 :root {
     --bs-body-bg: #1c1f2b;
     --bs-body-color: #cad2dd;
 }
 
-#quarto-sidebar {
+#quarto-sidebar,
+#quarto-content .sidebar-navigation {
     background-color: $sidebar-bg;
     color: $sidebar-color;
     border: none !important;
@@ -35,6 +39,7 @@ $pre-color: #9dbed8;
     .sidebar-item-section>.sidebar-item-container:first-child a.active,
     .sidebar-item-section>.sidebar-item-container:first-child a:hover {
         color: #cad2dd;
+        background-color: transparent;
     }
 
     #quarto-search {
@@ -52,7 +57,8 @@ $pre-color: #9dbed8;
 
 }
 
-#quarto-margin-sidebar {
+#quarto-margin-sidebar,
+#quarto-content .margin-sidebar {
 
     a.active,
     a:hover {
@@ -70,6 +76,31 @@ $pre-color: #9dbed8;
 
 }
 
+#quarto-content {
+    .margin-sidebar.quarto-sidebar-toggle-contents {
+        background-color: $sidebar-bg;
+        color: $sidebar-color;
+    }
+
+    .quarto-sidebar-toggle {
+        background-color: $pre-color;
+        border-color: $toggle-border;
+    }
+
+    .quarto-sidebar-toggle-title {
+        background-color: $toggle-title-bg;
+        color: $sidebar-color;
+    }
+
+    .quarto-sidebar-toggle.expanded .quarto-sidebar-toggle-title {
+        border-bottom-color: $toggle-border;
+    }
+
+    .quarto-sidebar-toggle+#quarto-sidebar {
+        background-color: $body-bg;
+    }
+}
+
 #quarto-document-content {
     #title-block-header .quarto-title-meta-contents a {
         color: var(--bs-body-color);