From 62754b042b34a20b68b71ab4cd620d7324e8c8fe Mon Sep 17 00:00:00 2001 From: Gabriel Fouasnon Date: Fri, 10 Nov 2023 13:45:35 +0100 Subject: [PATCH 1/2] Obviate background-from-color-variable --- .../assets/styles/abstracts/_color.scss | 19 -------- .../assets/styles/content/_admonitions.scss | 46 +++++-------------- .../assets/styles/content/_quotes.scss | 2 +- .../assets/styles/content/_spans.scss | 3 +- .../styles/extensions/_sphinx_design.scss | 4 +- 5 files changed, 15 insertions(+), 59 deletions(-) diff --git a/src/pydata_sphinx_theme/assets/styles/abstracts/_color.scss b/src/pydata_sphinx_theme/assets/styles/abstracts/_color.scss index e22d52caf..7c488c299 100644 --- a/src/pydata_sphinx_theme/assets/styles/abstracts/_color.scss +++ b/src/pydata_sphinx_theme/assets/styles/abstracts/_color.scss @@ -5,25 +5,6 @@ // loading the math module @use "sass:math"; -// Set background color from a color variable -// -@mixin background-from-color-variable($color-variable) { - &:before { - content: ""; - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - background-color: var(#{$color-variable}); - z-index: -1; - // So that hovering over the text within background is still possible. - // Otherwise the background overlays the text and you cannot click or select easily. - // ref: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events - pointer-events: none; - } -} - /** * Function to get items from nested maps */ diff --git a/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss b/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss index a71490580..24b0a64b5 100644 --- a/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss +++ b/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss @@ -38,7 +38,7 @@ div.admonition, padding: 0.4rem 0.6rem 0.4rem 2rem; font-weight: var(--pst-admonition-font-weight-heading); position: relative; - @include background-from-color-variable(--pst-color-info-bg); + background-color: var(--pst-color-info-bg); // now that we use solid colors we want the title on top z-index: 1; @@ -63,9 +63,7 @@ div.admonition, &.attention { border-color: var(--pst-color-attention); > .admonition-title { - &:before { - background-color: var(--pst-color-attention-bg); - } + background-color: var(--pst-color-attention-bg); &:after { color: var(--pst-color-attention); @@ -77,9 +75,7 @@ div.admonition, &.caution { border-color: var(--pst-color-warning); > .admonition-title { - &:before { - background-color: var(--pst-color-warning-bg); - } + background-color: var(--pst-color-warning-bg); &:after { color: var(--pst-color-warning); @@ -91,9 +87,7 @@ div.admonition, &.warning { border-color: var(--pst-color-warning); > .admonition-title { - &:before { - background-color: var(--pst-color-warning-bg); - } + background-color: var(--pst-color-warning-bg); &:after { color: var(--pst-color-warning); @@ -105,9 +99,7 @@ div.admonition, &.danger { border-color: var(--pst-color-danger); > .admonition-title { - &:before { - background-color: var(--pst-color-danger-bg); - } + background-color: var(--pst-color-danger-bg); &:after { color: var(--pst-color-danger); @@ -119,9 +111,7 @@ div.admonition, &.error { border-color: var(--pst-color-danger); > .admonition-title { - &:before { - background-color: var(--pst-color-danger-bg); - } + background-color: var(--pst-color-danger-bg); &:after { color: var(--pst-color-danger); @@ -133,9 +123,7 @@ div.admonition, &.hint { border-color: var(--pst-color-success); > .admonition-title { - &:before { - background-color: var(--pst-color-success-bg); - } + background-color: var(--pst-color-success-bg); &:after { color: var(--pst-color-success); @@ -147,9 +135,7 @@ div.admonition, &.tip { border-color: var(--pst-color-success); > .admonition-title { - &:before { - background-color: var(--pst-color-success-bg); - } + background-color: var(--pst-color-success-bg); &:after { color: var(--pst-color-success); @@ -161,9 +147,7 @@ div.admonition, &.important { border-color: var(--pst-color-attention); > .admonition-title { - &:before { - background-color: var(--pst-color-attention-bg); - } + background-color: var(--pst-color-attention-bg); &:after { color: var(--pst-color-attention); @@ -175,9 +159,7 @@ div.admonition, &.note { border-color: var(--pst-color-info); > .admonition-title { - &:before { - background-color: var(--pst-color-info-bg); - } + background-color: var(--pst-color-info-bg); &:after { color: var(--pst-color-info); @@ -189,9 +171,7 @@ div.admonition, &.seealso { border-color: var(--pst-color-success); > .admonition-title { - &:before { - background-color: var(--pst-color-success-bg); - } + background-color: var(--pst-color-success-bg); &:after { color: var(--pst-color-success); @@ -203,9 +183,7 @@ div.admonition, &.admonition-todo { border-color: var(--pst-color-secondary); > .admonition-title { - &:before { - background-color: var(--pst-color-secondary-bg); - } + background-color: var(--pst-color-secondary-bg); &:after { color: var(--pst-color-secondary); diff --git a/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss b/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss index 093f297c3..e38728b8d 100644 --- a/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss +++ b/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss @@ -20,7 +20,7 @@ blockquote { margin-bottom: 0; } - @include background-from-color-variable(--pst-color-on-background); + background-color: var(--pst-color-surface); //hack to make the text in the blockquote selectable &:before { diff --git a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss index cdda6e75b..95ba53930 100644 --- a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss +++ b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss @@ -11,8 +11,7 @@ span.guilabel { padding: 2.4px 6px; margin: auto 2px; position: relative; - - @include background-from-color-variable(--pst-color-info-bg); + background-color: var(--pst-color-info-bg); } a.reference.download:before { diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss index 798164998..dff135e2d 100644 --- a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss +++ b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss @@ -231,9 +231,7 @@ details.sd-dropdown { } } - // Background color and border are grey by default - background-color: unset !important; - @include background-from-color-variable(--pst-sd-dropdown-bg-color); + background-color: var(--pst-sd-dropdown-bg-color) !important; // Add a left border with the same structure as our admonitions border-left: 0.2rem solid var(--pst-sd-dropdown-color) !important; From 6be37705b94a9c90e7c7837f0b257cd7b1d06d1c Mon Sep 17 00:00:00 2001 From: Gabriel Fouasnon Date: Mon, 13 Nov 2023 19:40:52 -0600 Subject: [PATCH 2/2] backwards compatibility --- docs/_static/custom.css | 12 ++++-------- .../assets/styles/abstracts/_color.scss | 18 ++++++++++++++++++ .../assets/styles/content/_admonitions.scss | 1 + .../assets/styles/content/_quotes.scss | 1 + .../assets/styles/content/_spans.scss | 1 + .../styles/extensions/_sphinx_design.scss | 1 + 6 files changed, 26 insertions(+), 8 deletions(-) diff --git a/docs/_static/custom.css b/docs/_static/custom.css index d4169de3f..53d86ec4b 100644 --- a/docs/_static/custom.css +++ b/docs/_static/custom.css @@ -7,15 +7,13 @@ div.admonition.admonition-olive { border-color: hsl(60, 100%, 25%); } -div.admonition.admonition-olive > .admonition-title:before { +div.admonition.admonition-olive > .admonition-title { background-color: hsl(60, 100%, 14%); + color: white; } div.admonition.admonition-olive > .admonition-title:after { color: hsl(60, 100%, 25%); } -div.admonition.admonition-olive > .admonition-title { - color: white; -} /* end-custom-color */ /* begin-custom-icon/* /custom.css */ @@ -30,16 +28,14 @@ div.admonition.admonition-icon > .admonition-title:after { div.admonition.admonition-youtube { border-color: hsl(0, 100%, 50%); /* YouTube red */ } -div.admonition.admonition-youtube > .admonition-title:before { +div.admonition.admonition-youtube > .admonition-title { background-color: hsl(0, 99%, 18%); + color: white; } div.admonition.admonition-youtube > .admonition-title:after { color: hsl(0, 100%, 50%); content: "\f26c"; /* fa-solid fa-tv */ } -div.admonition.admonition-youtube > .admonition-title { - color: white; -} /* end-custom-youtube */ /* fix for project names that are parsed as links: the whole card is a link so diff --git a/src/pydata_sphinx_theme/assets/styles/abstracts/_color.scss b/src/pydata_sphinx_theme/assets/styles/abstracts/_color.scss index 7c488c299..bc4aa0385 100644 --- a/src/pydata_sphinx_theme/assets/styles/abstracts/_color.scss +++ b/src/pydata_sphinx_theme/assets/styles/abstracts/_color.scss @@ -5,6 +5,24 @@ // loading the math module @use "sass:math"; +// We must add ::before pseudo-element to some theme components (such as admonitions) +// because users were instructed to customize the background color this way. +@mixin legacy-backdrop-placeholder { + &:before { + content: ""; + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: -1; + // So that hovering over the text within background is still possible. + // Otherwise the background overlays the text and you cannot click or select easily. + // ref: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events + pointer-events: none; + } +} + /** * Function to get items from nested maps */ diff --git a/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss b/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss index 24b0a64b5..74b5589aa 100644 --- a/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss +++ b/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss @@ -38,6 +38,7 @@ div.admonition, padding: 0.4rem 0.6rem 0.4rem 2rem; font-weight: var(--pst-admonition-font-weight-heading); position: relative; + @include legacy-backdrop-placeholder; background-color: var(--pst-color-info-bg); // now that we use solid colors we want the title on top z-index: 1; diff --git a/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss b/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss index e38728b8d..0387c1030 100644 --- a/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss +++ b/src/pydata_sphinx_theme/assets/styles/content/_quotes.scss @@ -20,6 +20,7 @@ blockquote { margin-bottom: 0; } + @include legacy-backdrop-placeholder; background-color: var(--pst-color-surface); //hack to make the text in the blockquote selectable diff --git a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss index 95ba53930..29452d26a 100644 --- a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss +++ b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss @@ -11,6 +11,7 @@ span.guilabel { padding: 2.4px 6px; margin: auto 2px; position: relative; + @include legacy-backdrop-placeholder; background-color: var(--pst-color-info-bg); } diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss index dff135e2d..2ebfb4d4e 100644 --- a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss +++ b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss @@ -231,6 +231,7 @@ details.sd-dropdown { } } + @include legacy-backdrop-placeholder; background-color: var(--pst-sd-dropdown-bg-color) !important; // Add a left border with the same structure as our admonitions