diff --git a/css/tidyverse.scss b/css/tidyverse.scss index 7188a33..73619cd 100644 --- 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 index 149d712..d7a5480 100644 --- 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);