From 20af5ec11f8b09e8a3d73a380da2678e8da35542 Mon Sep 17 00:00:00 2001 From: Hugo van Kemenade <1324225+hugovk@users.noreply.github.com> Date: Sun, 9 Jun 2024 21:46:47 +0300 Subject: [PATCH 1/5] Add backgrounds and borders to admonitions --- python_docs_theme/static/pydoctheme.css | 73 ++++++++++++++++++-- python_docs_theme/static/pydoctheme_dark.css | 22 ++++++ 2 files changed, 90 insertions(+), 5 deletions(-) diff --git a/python_docs_theme/static/pydoctheme.css b/python_docs_theme/static/pydoctheme.css index 09e4b3f..a908372 100644 --- a/python_docs_theme/static/pydoctheme.css +++ b/python_docs_theme/static/pydoctheme.css @@ -242,7 +242,74 @@ div.body pre { border: 1px solid #ac9; } -div.body div.admonition, +/* Admonitions */ +:root { + --admonition-background: #eee; + --admonition-border: #ccc; + --attention-background: #bbddff5c; + --attention-border: #0000ff36; + --caution-background: #ffc; + --caution-border: #dddd66; + --danger-background: #ffe4e4; + --danger-border: red; + --error-background: #ffe4e4; + --error-border: red; + --hint-background: #bfc; + --hint-border: green; + --seealso-background: #ffc; + --seealso-border: #dddd66; + --tip-background: #bfc; + --tip-border: green; + --warning-background: #ffe4e4; + --warning-border: red; +} + +div.body div.admonition { + background-color: var(--admonition-background); + border-radius: 3px; + border: 1px solid var(--admonition-border); +} + +div.body div.admonition.attention { + background-color: var(--attention-background); + border-color: var(--attention-border); +} + +div.body div.admonition.caution { + background-color: var(--caution-background); + border-color: var(--caution-border); +} + +div.body div.admonition.danger { + background-color: var(--danger-background); + border-color: var(--danger-border); +} + +div.body div.admonition.error { + background-color: var(--error-background); + border-color: var(--error-border); +} + +div.body div.admonition.hint { + background-color: var(--hint-background); + border-color: var(--hint-border); +} + +div.body div.admonition.seealso { + background-color: var(--seealso-background); + border-color: var(--seealso-border); +} + +div.body div.admonition.tip { + background-color: var(--tip-background); + border-color: var(--tip-border); +} + +div.body div.admonition.warning { + background-color: var(--warning-background); + border-color: var(--warning-border); +} + div.body div.impl-detail { border-radius: 3px; } @@ -251,10 +318,6 @@ div.body div.impl-detail > p { margin: 0; } -div.body div.seealso { - border: 1px solid #dddd66; -} - div.body a { color: #0072aa; } diff --git a/python_docs_theme/static/pydoctheme_dark.css b/python_docs_theme/static/pydoctheme_dark.css index ea2a256..91c0c19 100644 --- a/python_docs_theme/static/pydoctheme_dark.css +++ b/python_docs_theme/static/pydoctheme_dark.css @@ -113,6 +113,28 @@ div.warning { background-color: rgba(255, 0, 0, 0.5); } +/* Admonitions */ +:root { + --admonition-background: rgba(255, 255, 255, 0.1); + --admonition-border: currentColor; + --attention-background: rgba(255, 255, 255, 0.1); + --attention-border: currentColor; + --caution-background: rgba(255, 255, 0, 0.1); + --caution-border: #dd6; + --danger-background: rgba(255, 0, 0, 0.2); + --danger-border: #f66; + --error-background: rgba(255, 0, 0, 0.2); + --error-border: #f66; + --hint-background: #0044117a; + --hint-border: green; + --seealso-background: rgba(255, 255, 0, 0.1); + --seealso-border: #dd6; + --tip-background: #0044117a; + --tip-border: green; + --warning-background: rgba(255, 0, 0, 0.2); + --warning-border: #f66; +} + aside.topic, div.topic, div.note, From 5e08e29029bf69eedcf88a78881a8d7b8957c115 Mon Sep 17 00:00:00 2001 From: Hugo van Kemenade <1324225+hugovk@users.noreply.github.com> Date: Mon, 10 Jun 2024 14:37:18 +0300 Subject: [PATCH 2/5] #dfd instead of #bfc for tip background --- python_docs_theme/static/pydoctheme.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/python_docs_theme/static/pydoctheme.css b/python_docs_theme/static/pydoctheme.css index a908372..2425ae8 100644 --- a/python_docs_theme/static/pydoctheme.css +++ b/python_docs_theme/static/pydoctheme.css @@ -254,11 +254,11 @@ div.body pre { --danger-border: red; --error-background: #ffe4e4; --error-border: red; - --hint-background: #bfc; + --hint-background: #dfd; --hint-border: green; --seealso-background: #ffc; --seealso-border: #dddd66; - --tip-background: #bfc; + --tip-background: #dfd; --tip-border: green; --warning-background: #ffe4e4; --warning-border: red; From 887784591e505b2efdacc25e093f4ebfe5b10ed6 Mon Sep 17 00:00:00 2001 From: Hugo van Kemenade <1324225+hugovk@users.noreply.github.com> Date: Mon, 10 Jun 2024 14:37:47 +0300 Subject: [PATCH 3/5] Re-order to keep colours together --- python_docs_theme/static/pydoctheme.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/python_docs_theme/static/pydoctheme.css b/python_docs_theme/static/pydoctheme.css index 2425ae8..b0bc688 100644 --- a/python_docs_theme/static/pydoctheme.css +++ b/python_docs_theme/static/pydoctheme.css @@ -266,8 +266,8 @@ div.body pre { div.body div.admonition { background-color: var(--admonition-background); - border-radius: 3px; border: 1px solid var(--admonition-border); + border-radius: 3px; } div.body div.admonition.attention { From 93453ad35ade74a61b327a0c5c38c45e4fe568fb Mon Sep 17 00:00:00 2001 From: Hugo van Kemenade <1324225+hugovk@users.noreply.github.com> Date: Thu, 13 Jun 2024 18:36:36 +0300 Subject: [PATCH 4/5] Specify both color and background-color in case inherited colour changes and conflicts with background-color --- python_docs_theme/static/pydoctheme.css | 2 ++ python_docs_theme/static/pydoctheme_dark.css | 1 + 2 files changed, 3 insertions(+) diff --git a/python_docs_theme/static/pydoctheme.css b/python_docs_theme/static/pydoctheme.css index b0bc688..78794e8 100644 --- a/python_docs_theme/static/pydoctheme.css +++ b/python_docs_theme/static/pydoctheme.css @@ -246,6 +246,7 @@ div.body pre { :root { --admonition-background: #eee; --admonition-border: #ccc; + --admonition-color: black; --attention-background: #bbddff5c; --attention-border: #0000ff36; --caution-background: #ffc; @@ -268,6 +269,7 @@ div.body div.admonition { background-color: var(--admonition-background); border: 1px solid var(--admonition-border); border-radius: 3px; + color: var(--admonition-color); } div.body div.admonition.attention { diff --git a/python_docs_theme/static/pydoctheme_dark.css b/python_docs_theme/static/pydoctheme_dark.css index 91c0c19..20bbd32 100644 --- a/python_docs_theme/static/pydoctheme_dark.css +++ b/python_docs_theme/static/pydoctheme_dark.css @@ -117,6 +117,7 @@ div.warning { :root { --admonition-background: rgba(255, 255, 255, 0.1); --admonition-border: currentColor; + --admonition-color: rgba(255, 255, 255, 0.87); --attention-background: rgba(255, 255, 255, 0.1); --attention-border: currentColor; --caution-background: rgba(255, 255, 0, 0.1); From 338ed557b78a19a4f2cf080093dd7b6ee2aa17dc Mon Sep 17 00:00:00 2001 From: Hugo van Kemenade <1324225+hugovk@users.noreply.github.com> Date: Thu, 13 Jun 2024 18:41:25 +0300 Subject: [PATCH 5/5] Replace rgba with hex, prefer short hex --- python_docs_theme/static/pydoctheme.css | 4 ++-- python_docs_theme/static/pydoctheme_dark.css | 18 +++++++++--------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/python_docs_theme/static/pydoctheme.css b/python_docs_theme/static/pydoctheme.css index 78794e8..662d987 100644 --- a/python_docs_theme/static/pydoctheme.css +++ b/python_docs_theme/static/pydoctheme.css @@ -250,7 +250,7 @@ div.body pre { --attention-background: #bbddff5c; --attention-border: #0000ff36; --caution-background: #ffc; - --caution-border: #dddd66; + --caution-border: #dd6; --danger-background: #ffe4e4; --danger-border: red; --error-background: #ffe4e4; @@ -258,7 +258,7 @@ div.body pre { --hint-background: #dfd; --hint-border: green; --seealso-background: #ffc; - --seealso-border: #dddd66; + --seealso-border: #dd6; --tip-background: #dfd; --tip-border: green; --warning-background: #ffe4e4; diff --git a/python_docs_theme/static/pydoctheme_dark.css b/python_docs_theme/static/pydoctheme_dark.css index 20bbd32..4509960 100644 --- a/python_docs_theme/static/pydoctheme_dark.css +++ b/python_docs_theme/static/pydoctheme_dark.css @@ -115,25 +115,25 @@ div.warning { /* Admonitions */ :root { - --admonition-background: rgba(255, 255, 255, 0.1); + --admonition-background: #ffffff1a; --admonition-border: currentColor; - --admonition-color: rgba(255, 255, 255, 0.87); - --attention-background: rgba(255, 255, 255, 0.1); + --admonition-color: #ffffffde; + --attention-background: #ffffff1a; --attention-border: currentColor; - --caution-background: rgba(255, 255, 0, 0.1); + --caution-background: #ffff001a; --caution-border: #dd6; - --danger-background: rgba(255, 0, 0, 0.2); + --danger-background: #f003; --danger-border: #f66; - --error-background: rgba(255, 0, 0, 0.2); + --error-background: #f003; --error-border: #f66; --hint-background: #0044117a; --hint-border: green; - --seealso-background: rgba(255, 255, 0, 0.1); + --seealso-background: #ffff001a; --seealso-border: #dd6; --tip-background: #0044117a; --tip-border: green; - --warning-background: rgba(255, 0, 0, 0.2); - --warning-border: #f66; + --warning-background: #ff000033; + --warning-border: #ff6666; } aside.topic,