From 7c3b609aee46c87e6b24f1ae22fde57a03b27f12 Mon Sep 17 00:00:00 2001 From: Chris Holdgraf Date: Sun, 10 Apr 2022 14:23:32 -0700 Subject: [PATCH 1/2] Refactor SCSS structure --- .../assets/styles/_markdown.scss | 16 - .../assets/styles/abstracts/_variables.scss | 0 .../assets/styles/{ => base}/_base.scss | 14 - .../assets/styles/{ => base}/_color.scss | 0 .../assets/styles/components/_icon-links.scss | 34 + .../assets/styles/components/_prev-next.scss | 56 ++ .../assets/styles/components/_search.scss | 30 + .../styles/components/_switcher-theme.scss | 29 + .../styles/components/_switcher-version.scss | 4 + .../assets/styles/components/_toc-inpage.scss | 0 .../{ => components}/_versionmodified.scss | 0 .../styles/{ => content}/_admonitions.scss | 16 + .../assets/styles/{ => content}/_api.scss | 10 + .../assets/styles/content/_footnotes.scss | 15 + .../assets/styles/content/_hacks.scss | 16 + .../assets/styles/content/_lists.scss | 13 + .../assets/styles/content/_quotes.scss | 6 + .../assets/styles/content/_spans.scss | 14 + .../assets/styles/content/_tables.scss | 0 .../assets/styles/extensions/_bootstrap.scss | 11 + .../styles/{ => extensions}/_ethical-ads.scss | 0 .../assets/styles/extensions/_pydata.scss | 8 + .../assets/styles/index.scss | 664 ++---------------- .../assets/styles/pages/_search.scss | 28 + .../assets/styles/sections/_article.scss | 16 + .../assets/styles/sections/_footer.scss | 9 + .../{_navbar.scss => sections/_header.scss} | 40 +- .../styles/sections/_sidebar-primary.scss | 196 ++++++ .../styles/sections/_sidebar-secondary.scss | 87 +++ 29 files changed, 650 insertions(+), 682 deletions(-) delete mode 100644 src/pydata_sphinx_theme/assets/styles/_markdown.scss create mode 100644 src/pydata_sphinx_theme/assets/styles/abstracts/_variables.scss rename src/pydata_sphinx_theme/assets/styles/{ => base}/_base.scss (86%) rename src/pydata_sphinx_theme/assets/styles/{ => base}/_color.scss (100%) create mode 100644 src/pydata_sphinx_theme/assets/styles/components/_icon-links.scss create mode 100644 src/pydata_sphinx_theme/assets/styles/components/_prev-next.scss create mode 100644 src/pydata_sphinx_theme/assets/styles/components/_search.scss create mode 100644 src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss create mode 100644 src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss create mode 100644 src/pydata_sphinx_theme/assets/styles/components/_toc-inpage.scss rename src/pydata_sphinx_theme/assets/styles/{ => components}/_versionmodified.scss (100%) rename src/pydata_sphinx_theme/assets/styles/{ => content}/_admonitions.scss (93%) rename src/pydata_sphinx_theme/assets/styles/{ => content}/_api.scss (89%) create mode 100644 src/pydata_sphinx_theme/assets/styles/content/_footnotes.scss create mode 100644 src/pydata_sphinx_theme/assets/styles/content/_hacks.scss create mode 100644 src/pydata_sphinx_theme/assets/styles/content/_lists.scss create mode 100644 src/pydata_sphinx_theme/assets/styles/content/_quotes.scss create mode 100644 src/pydata_sphinx_theme/assets/styles/content/_spans.scss create mode 100644 src/pydata_sphinx_theme/assets/styles/content/_tables.scss create mode 100644 src/pydata_sphinx_theme/assets/styles/extensions/_bootstrap.scss rename src/pydata_sphinx_theme/assets/styles/{ => extensions}/_ethical-ads.scss (100%) create mode 100644 src/pydata_sphinx_theme/assets/styles/extensions/_pydata.scss create mode 100644 src/pydata_sphinx_theme/assets/styles/pages/_search.scss create mode 100644 src/pydata_sphinx_theme/assets/styles/sections/_article.scss create mode 100644 src/pydata_sphinx_theme/assets/styles/sections/_footer.scss rename src/pydata_sphinx_theme/assets/styles/{_navbar.scss => sections/_header.scss} (71%) create mode 100644 src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss create mode 100644 src/pydata_sphinx_theme/assets/styles/sections/_sidebar-secondary.scss diff --git a/src/pydata_sphinx_theme/assets/styles/_markdown.scss b/src/pydata_sphinx_theme/assets/styles/_markdown.scss deleted file mode 100644 index 44d90e951..000000000 --- a/src/pydata_sphinx_theme/assets/styles/_markdown.scss +++ /dev/null @@ -1,16 +0,0 @@ -// Rules that are unique to MyST markdown parsing / outputs - -th, -td { - &.text-align\:left { - text-align: left; - } - - &.text-align\:right { - text-align: right; - } - - &.text-align\:center { - text-align: center; - } -} diff --git a/src/pydata_sphinx_theme/assets/styles/abstracts/_variables.scss b/src/pydata_sphinx_theme/assets/styles/abstracts/_variables.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/pydata_sphinx_theme/assets/styles/_base.scss b/src/pydata_sphinx_theme/assets/styles/base/_base.scss similarity index 86% rename from src/pydata_sphinx_theme/assets/styles/_base.scss rename to src/pydata_sphinx_theme/assets/styles/base/_base.scss index 519b57b6f..2a8d6a5c3 100644 --- a/src/pydata_sphinx_theme/assets/styles/_base.scss +++ b/src/pydata_sphinx_theme/assets/styles/base/_base.scss @@ -124,17 +124,3 @@ pre { border-radius: 0.2rem; box-shadow: 1px 1px 1px var(--pst-color-preformatted-shadow); } - -// Override bootstrap by restoring the basic theme default. -dd { - margin-top: 3px; - margin-bottom: 10px; - margin-left: 30px; -} - -// Prevent field lists from stretching too much on narrow screens -// ref: https://css-tricks.com/preventing-a-grid-blowout/ -dl.field-list { - display: grid; - grid-template-columns: fit-content(30%) minmax(0, 1fr); -} diff --git a/src/pydata_sphinx_theme/assets/styles/_color.scss b/src/pydata_sphinx_theme/assets/styles/base/_color.scss similarity index 100% rename from src/pydata_sphinx_theme/assets/styles/_color.scss rename to src/pydata_sphinx_theme/assets/styles/base/_color.scss diff --git a/src/pydata_sphinx_theme/assets/styles/components/_icon-links.scss b/src/pydata_sphinx_theme/assets/styles/components/_icon-links.scss new file mode 100644 index 000000000..ff590d370 --- /dev/null +++ b/src/pydata_sphinx_theme/assets/styles/components/_icon-links.scss @@ -0,0 +1,34 @@ +/** + * Icon links in the navbar + */ + +#navbar-icon-links { + i { + &.fa, + &.fab, + &.far, + &.fas { + vertical-align: middle; + font-style: normal; + font-size: 1.5rem; + line-height: 1.25; + } + + /* Social media buttons */ + &.fa-twitter-square:before { + color: #55acee; + } + + &.fa-gitlab:before { + color: #548; + } + + &.fa-bitbucket:before { + color: #0052cc; + } + } + + img.icon-link-image { + height: 1.5em; + } +} diff --git a/src/pydata_sphinx_theme/assets/styles/components/_prev-next.scss b/src/pydata_sphinx_theme/assets/styles/components/_prev-next.scss new file mode 100644 index 000000000..c11126694 --- /dev/null +++ b/src/pydata_sphinx_theme/assets/styles/components/_prev-next.scss @@ -0,0 +1,56 @@ +/* Previous / Next buttons */ +.prev-next-area { + margin: 20px 0px; + + p { + margin: 0 0.3em; + line-height: 1.3em; + } + + i { + font-size: 1.2em; + } + + a { + // So that buttons align with icons + display: flex; + align-items: center; + border: none; + padding: 10px; + max-width: 45%; + overflow-x: hidden; + color: var(--pst-color-prev-next-btn); + text-decoration: none; + + p.prev-next-title { + color: var(--pst-color-prev-next); + font-weight: 600; + font-size: 1.1em; + } + + &:hover p.prev-next-title { + text-decoration: underline; + } + + .prev-next-info { + flex-direction: column; + margin: 0 0.5em; + + .prev-next-subtitle { + text-transform: capitalize; + } + } + + &.left-prev { + float: left; + } + + &.right-next { + float: right; + + div.prev-next-info { + text-align: right; + } + } + } +} diff --git a/src/pydata_sphinx_theme/assets/styles/components/_search.scss b/src/pydata_sphinx_theme/assets/styles/components/_search.scss new file mode 100644 index 000000000..5fa6ce7c8 --- /dev/null +++ b/src/pydata_sphinx_theme/assets/styles/components/_search.scss @@ -0,0 +1,30 @@ +.bd-search { + position: relative; + padding: 1rem 15px; + margin-right: -15px; + margin-left: -15px; + + .icon { + position: absolute; + color: var(--pst-color-search); + left: 25px; + } + + input { + background-color: var(--pst-color-search-background); + border-radius: 0.2rem; + border: 1px solid var(--pst-color-search-border); + padding-left: 35px; + + // Inner-text of the search bar + &::placeholder { + color: var(--pst-color-search); + } + + // Background should always be same color regardless of active or nor + &:active, + &:focus { + background-color: var(--pst-color-search-background); + } + } +} diff --git a/src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss b/src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss new file mode 100644 index 000000000..b77f7c6b1 --- /dev/null +++ b/src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss @@ -0,0 +1,29 @@ +// the icons for theme change +#theme-switch { + border-color: var(--pst-color-navbar-link-hover); + margin-right: 0.4rem; + + a { + color: var(--pst-color-navbar-link-hover); + display: none; + } + + &:hover { + border-color: var(--pst-color-navbar-background); + background-color: var(--pst-color-navbar-link-hover); + + a { + color: var(--pst-color-navbar-background); + } + } +} + +html[data-mode="auto"] #theme-switch a[data-mode="auto"] { + display: block; +} +html[data-mode="light"] #theme-switch a[data-mode="light"] { + display: block; +} +html[data-mode="dark"] #theme-switch a[data-mode="dark"] { + display: block; +} diff --git a/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss b/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss new file mode 100644 index 000000000..6e93303d0 --- /dev/null +++ b/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss @@ -0,0 +1,4 @@ +#version_switcher_button { + background-color: var(--pst-color-active-navigation); + border-color: var(--pst-color-active-navigation); +} diff --git a/src/pydata_sphinx_theme/assets/styles/components/_toc-inpage.scss b/src/pydata_sphinx_theme/assets/styles/components/_toc-inpage.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/pydata_sphinx_theme/assets/styles/_versionmodified.scss b/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss similarity index 100% rename from src/pydata_sphinx_theme/assets/styles/_versionmodified.scss rename to src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss diff --git a/src/pydata_sphinx_theme/assets/styles/_admonitions.scss b/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss similarity index 93% rename from src/pydata_sphinx_theme/assets/styles/_admonitions.scss rename to src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss index 1ebd974b7..cb5008d4e 100644 --- a/src/pydata_sphinx_theme/assets/styles/_admonitions.scss +++ b/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss @@ -195,3 +195,19 @@ div.admonition, } } } + +// Similar content blocks that are not technically admonitions. +.topic { + background-color: var(--pst-color-background-up); + border-color: var(--pst-color-border); +} + +aside.sidebar { + background-color: var(--pst-color-background-up-up); + border-color: var(--pst-color-border); +} + +.seealso dd { + margin-top: 0; + margin-bottom: 0; +} diff --git a/src/pydata_sphinx_theme/assets/styles/_api.scss b/src/pydata_sphinx_theme/assets/styles/content/_api.scss similarity index 89% rename from src/pydata_sphinx_theme/assets/styles/_api.scss rename to src/pydata_sphinx_theme/assets/styles/content/_api.scss index e522d3325..9c4f36505 100644 --- a/src/pydata_sphinx_theme/assets/styles/_api.scss +++ b/src/pydata_sphinx_theme/assets/styles/content/_api.scss @@ -92,3 +92,13 @@ table.field-list { dt:target { background-color: var(--pst-color-target); } + +.viewcode-back { + font-family: var(--pst-font-family-base); +} + +.viewcode-block:target { + background-color: #f4debf; + border-top: 1px solid #ac9; + border-bottom: 1px solid #ac9; +} diff --git a/src/pydata_sphinx_theme/assets/styles/content/_footnotes.scss b/src/pydata_sphinx_theme/assets/styles/content/_footnotes.scss new file mode 100644 index 000000000..39d30e860 --- /dev/null +++ b/src/pydata_sphinx_theme/assets/styles/content/_footnotes.scss @@ -0,0 +1,15 @@ +// For consistency, add bracket around footnotes/citations which are +// cited more than once. E.g. [Newton](1,2) instead of Newton(1,2) +dt.label > span.brackets:not(:only-child):before { + content: "["; +} + +dt.label > span.brackets:not(:only-child):after { + content: "]"; +} + +// Make footnote as a supercript +a.footnote-reference { + vertical-align: super; + font-size: small; +} diff --git a/src/pydata_sphinx_theme/assets/styles/content/_hacks.scss b/src/pydata_sphinx_theme/assets/styles/content/_hacks.scss new file mode 100644 index 000000000..054403d8b --- /dev/null +++ b/src/pydata_sphinx_theme/assets/styles/content/_hacks.scss @@ -0,0 +1,16 @@ +/** + * Hacky fixes that don't fit cleanly into other sections + */ + +// Ensure user highlighting/selecting behaves properly +// From https://stackoverflow.com/a/34372191 +table.highlighttable td.linenos, +span.linenos, +div.doctest > div.highlight span.gp { + /* gp: Generic.Prompt */ + user-select: none; + -webkit-user-select: text; /* Safari fallback only */ + -webkit-user-select: none; /* Chrome/Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+ */ +} diff --git a/src/pydata_sphinx_theme/assets/styles/content/_lists.scss b/src/pydata_sphinx_theme/assets/styles/content/_lists.scss new file mode 100644 index 000000000..701889167 --- /dev/null +++ b/src/pydata_sphinx_theme/assets/styles/content/_lists.scss @@ -0,0 +1,13 @@ +// Override bootstrap by restoring the basic theme default. +dd { + margin-top: 3px; + margin-bottom: 10px; + margin-left: 30px; +} + +// Prevent field lists from stretching too much on narrow screens +// ref: https://css-tricks.com/preventing-a-grid-blowout/ +dl.field-list { + display: grid; + grid-template-columns: fit-content(30%) minmax(0, 1fr); +} diff --git a/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss b/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss new file mode 100644 index 000000000..8896c7dee --- /dev/null +++ b/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss @@ -0,0 +1,6 @@ +// GitHub blockquote style +blockquote { + padding: 0 1em; + color: var(--pst-color-deactivate); + border-left: 0.25em solid var(--pst-color-blockquote-border); +} diff --git a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss new file mode 100644 index 000000000..01011204e --- /dev/null +++ b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss @@ -0,0 +1,14 @@ +/** + * Span-level styling within content + */ + +span.guilabel { + border: 1px solid var(--pst-color-guilabel-border); + background: var(--pst-color-guilabel-background); + color: var(--pst-color-guilabel-text); + font-size: 80%; + font-weight: 700; + border-radius: 4px; + padding: 2.4px 6px; + margin: auto 2px; +} diff --git a/src/pydata_sphinx_theme/assets/styles/content/_tables.scss b/src/pydata_sphinx_theme/assets/styles/content/_tables.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_bootstrap.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_bootstrap.scss new file mode 100644 index 000000000..8c424b1ce --- /dev/null +++ b/src/pydata_sphinx_theme/assets/styles/extensions/_bootstrap.scss @@ -0,0 +1,11 @@ +/** + * Special cases for Bootstrap functionality + */ + +// Bootstrap adds margin to their general container class. However, sphinx/docutils +// can also generate output with the container class, but in those cases we should +// not add the margin from bootstrap. +.docutils.container { + padding-left: unset; + padding-right: unset; +} diff --git a/src/pydata_sphinx_theme/assets/styles/_ethical-ads.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_ethical-ads.scss similarity index 100% rename from src/pydata_sphinx_theme/assets/styles/_ethical-ads.scss rename to src/pydata_sphinx_theme/assets/styles/extensions/_ethical-ads.scss diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_pydata.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_pydata.scss new file mode 100644 index 000000000..94a1994cc --- /dev/null +++ b/src/pydata_sphinx_theme/assets/styles/extensions/_pydata.scss @@ -0,0 +1,8 @@ +/** + * Special-cases for packages in the PyData ecosystem + */ + +// xarray output display in bootstrap +.xr-wrap[hidden] { + display: block !important; +} diff --git a/src/pydata_sphinx_theme/assets/styles/index.scss b/src/pydata_sphinx_theme/assets/styles/index.scss index f9e6173f1..fef4ffee6 100644 --- a/src/pydata_sphinx_theme/assets/styles/index.scss +++ b/src/pydata_sphinx_theme/assets/styles/index.scss @@ -1,3 +1,4 @@ +// Import Bootstrap core // Override bootstrap variables $spacer: 1rem; @@ -15,628 +16,45 @@ $grid-breakpoints: ( lg: 960px, xl: 1200px, ); - -// Import Bootstrap core @import "~bootstrap/scss/bootstrap"; -@import "./color"; -@import "./base"; -@import "./navbar"; -@import "./admonitions"; -@import "./api"; -@import "./markdown"; -@import "./versionmodified"; -@import "./ethical-ads"; - -// Custom css, TODO: to be refactored in different partials -// GitHub blockquote style -blockquote { - padding: 0 1em; - color: var(--pst-color-deactivate); - border-left: 0.25em solid var(--pst-color-blockquote-border); -} - -// For consistency, add bracket around footnotes/citations which are -// cited more than once. E.g. [Newton](1,2) instead of Newton(1,2) -dt.label > span.brackets:not(:only-child):before { - content: "["; -} - -dt.label > span.brackets:not(:only-child):after { - content: "]"; -} - -// Make footnote as a supercript -a.footnote-reference { - vertical-align: super; - font-size: small; -} - -.topic { - background-color: var(--pst-color-background-up); - border-color: var(--pst-color-border); -} - -aside.sidebar { - background-color: var(--pst-color-background-up-up); - border-color: var(--pst-color-border); -} - -.seealso dd { - margin-top: 0; - margin-bottom: 0; -} - -.viewcode-back { - font-family: var(--pst-font-family-base); -} - -.viewcode-block:target { - background-color: #f4debf; - border-top: 1px solid #ac9; - border-bottom: 1px solid #ac9; -} - -span.guilabel { - border: 1px solid var(--pst-color-guilabel-border); - background: var(--pst-color-guilabel-background); - color: var(--pst-color-guilabel-text); - font-size: 80%; - font-weight: 700; - border-radius: 4px; - padding: 2.4px 6px; - margin: auto 2px; -} - -/** - * Footer - */ - -footer { - width: 100%; - border-top: 1px solid var(--pst-color-footer-border); - padding: 10px; - - .footer-item p { - margin-bottom: 0; - } -} - -/* -------------------------------------------------------------------------- */ - -.bd-search { - position: relative; - padding: 1rem 15px; - margin-right: -15px; - margin-left: -15px; - - .icon { - position: absolute; - color: var(--pst-color-search); - left: 25px; - } - - input { - background-color: var(--pst-color-search-background); - border-radius: 0.2rem; - border: 1px solid var(--pst-color-search-border); - padding-left: 35px; - - // Inner-text of the search bar - &::placeholder { - color: var(--pst-color-search); - } - - // Background should always be same color regardless of active or nor - &:active, - &:focus { - background-color: var(--pst-color-search-background); - } - } -} - -/* minimal copy paste from bootstrap docs css to get sidebars working */ - -.bd-toc { - -ms-flex-order: 2; - order: 2; - - height: calc(100vh - 2rem); - overflow-y: auto; - - @supports (position: -webkit-sticky) or (position: sticky) { - position: -webkit-sticky; - position: sticky; - top: var(--pst-header-height); - height: calc(100vh - 5rem); - overflow-y: auto; - } - - .onthispage { - color: var(--pst-color-text-base); - } -} - -.section-nav { - padding-left: 0; - border-left: 1px solid var(--pst-color-toc-border); - border-bottom: none; - - ul { - padding-left: 1rem; - } -} - -.toc-entry { - display: block; - - a { - display: block; - padding: 0.125rem 1.5rem; - color: var(--pst-color-toc-link); - - @include media-breakpoint-up(xl) { - padding-right: 0; - } - - &:hover { - color: var(--pst-color-toc-link-hover); - text-decoration: none; - } - } -} - -.bd-sidebar { - padding-top: 1em; - overflow-y: auto; - display: flex; - flex-direction: column; - - @include media-breakpoint-up(md) { - border-right: 1px solid var(--pst-color-sidebar-border); - - @supports (position: -webkit-sticky) or (position: sticky) { - position: -webkit-sticky; - position: sticky; - top: var(--pst-header-height); - z-index: 1000; - height: calc(100vh - var(--pst-header-height)); - } - } - - &.no-sidebar { - border-right: 0; - } - - .sidebar-end-items { - margin-top: auto; - margin-bottom: 1em; - } -} - -.bd-links { - padding-top: 1rem; - padding-bottom: 1rem; - margin-right: -15px; - margin-left: -15px; - - @include media-breakpoint-up(md) { - display: block; - } -} - -.bd-sidenav { - display: none; -} - -.bd-content { - padding-top: 20px; - - .section { - max-width: 100%; - - // make every overflowing elements in main content scrollable - table { - display: block; - overflow: auto; - } - } -} - -.bd-toc-link { - display: block; - padding: 0.25rem 1.5rem; - font-weight: 600; - color: rgba(0, 0, 0, 0.65); - - &:hover { - color: rgba(0, 0, 0, 0.85); - text-decoration: none; - } -} - -.bd-toc-item.active { - margin-bottom: 1rem; - - &:not(:first-child) { - margin-top: 1rem; - } - - > { - .bd-toc-link { - color: rgba(0, 0, 0, 0.85); - - &:hover { - background-color: transparent; - } - } - - .bd-sidenav { - display: block; - } - } -} - -nav.bd-links { - p.caption { - font-size: var(--pst-sidebar-caption-font-size); - text-transform: uppercase; - font-weight: bold; - position: relative; - margin-top: 1.25em; - margin-bottom: 0.5em; - padding: 0 1.5rem; - color: var(--pst-color-sidebar-caption); - &:first-child { - margin-top: 0; - } - } -} - -.bd-sidebar .nav { - font-size: var(--pst-sidebar-font-size); - - ul { - list-style: none; - padding: 0 0 0 1.5rem; - } - - li > a { - display: block; - padding: 0.25rem 1.5rem; - color: var(--pst-color-sidebar-link); - - &:hover { - color: var(--pst-color-sidebar-link-hover); - text-decoration: none; - background-color: transparent; - } - - &.reference.external { - &:after { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f35d"; - font-size: 0.75em; - margin-left: 0.3em; - } - } - } - - .active { - > a, - &:hover > a { - font-weight: 600; - color: var(--pst-color-sidebar-link-active); - } - } -} - -/* adjust toc font sizes to improve overview */ -.toc-h2 { - font-size: 0.85rem; -} - -.toc-h3 { - font-size: 0.75rem; -} - -.toc-h4 { - font-size: 0.65rem; -} - -.toc-entry > .nav-link.active { - font-weight: 600; - color: var(--pst-color-toc-link-active); - background-color: transparent; - border-left: 2px solid var(--pst-color-toc-link-active); -} - -.nav-link:hover { - border-style: none; -} - -#navbar-main-elements li.nav-item i { - font-size: 0.7rem; - padding-left: 2px; - vertical-align: middle; -} - -/* Collapsing of the TOC sidebar while scrolling */ - -/* Nav: hide second level (shown on .active) */ - -.bd-toc .nav, -.list-caption { - .nav { - display: none; - - // So we can manually specify a level as visible in the config - &.visible { - display: block; - } - } - - > .active > ul { - display: block; - } -} - -/* Previous / Next buttons */ - -.prev-next-area { - margin: 20px 0px; - - p { - margin: 0 0.3em; - line-height: 1.3em; - } - - i { - font-size: 1.2em; - } - - a { - // So that buttons align with icons - display: flex; - align-items: center; - border: none; - padding: 10px; - max-width: 45%; - overflow-x: hidden; - color: var(--pst-color-prev-next-btn); - text-decoration: none; - - p.prev-next-title { - color: var(--pst-color-prev-next); - font-weight: 600; - font-size: 1.1em; - } - - &:hover p.prev-next-title { - text-decoration: underline; - } - - .prev-next-info { - flex-direction: column; - margin: 0 0.5em; - - .prev-next-subtitle { - text-transform: capitalize; - } - } - - &.left-prev { - float: left; - } - - &.right-next { - float: right; - - div.prev-next-info { - text-align: right; - } - } - } -} - -/* Alert Styling */ - -.alert { - /* Avoid too large empty space below alert boxes. */ - padding-bottom: 0; -} - -.alert-info a { - /* higher contrast for links in info boxes. */ - color: var(--pst-color-alert-link); -} - -/* Icon Links */ - -#navbar-icon-links { - i { - &.fa, - &.fab, - &.far, - &.fas { - vertical-align: middle; - font-style: normal; - font-size: 1.5rem; - line-height: 1.25; - } - - /* Social media buttons */ - &.fa-twitter-square:before { - color: #55acee; - } - - &.fa-gitlab:before { - color: #548; - } - - &.fa-bitbucket:before { - color: #0052cc; - } - } - - img.icon-link-image { - height: 1.5em; - } -} - -/* TOC section headers */ - -.tocsection { - padding-left: 10px; - border-left: 1px solid var(--pst-color-toc-border); - padding: 0.3rem 1.5rem; - - i { - padding-right: 0.5rem; - } -} - -.editthispage { - padding-top: 2rem; - - a { - color: var(--pst-color-sidebar-link-active); - } -} - -/* Special-case over-rides */ - -// xarray output display in bootstrap -.xr-wrap[hidden] { - display: block !important; -} - -//////////////////////////////////////////////////////////////////////////////// -// Togglable expand/collapse -//////////////////////////////////////////////////////////////////////////////// - -.toctree-checkbox { - position: absolute; - display: none; -} - -.toctree-checkbox { - ~ ul { - display: none; - } - ~ label i { - transform: rotate(0deg); - } -} -.toctree-checkbox:checked { - ~ ul { - display: block; - } - ~ label i { - transform: rotate(180deg); - } -} - -.bd-sidebar { - padding-top: 1em; - overflow-y: auto; - display: flex; - flex-direction: column; - - @include media-breakpoint-up(md) { - border-right: 1px solid rgba(0, 0, 0, 0.1); - - @supports (position: -webkit-sticky) or (position: sticky) { - position: -webkit-sticky; - position: sticky; - top: var(--pst-header-height); - z-index: 1000; - height: calc(100vh - var(--pst-header-height)); - } - } - - &.no-sidebar { - border-right: 0; - } - - .sidebar-end-items { - margin-top: auto; - margin-bottom: 1em; - } - .list-caption { - list-style: none; - padding-left: 0px; - } - li { - position: relative; - // If it has children, add a bit more padding to wrap the content to avoid - // overlapping with the