From 845b2a1e4f0304723a97298fa144762e6bf255df Mon Sep 17 00:00:00 2001 From: "C.A.M. Gerlach" Date: Tue, 27 Sep 2022 20:57:04 -0500 Subject: [PATCH 1/6] Style: Further lighten table zebra stripes --- pep_sphinx_extensions/pep_theme/static/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pep_sphinx_extensions/pep_theme/static/style.css b/pep_sphinx_extensions/pep_theme/static/style.css index 21629b8b141..10ccf09021b 100644 --- a/pep_sphinx_extensions/pep_theme/static/style.css +++ b/pep_sphinx_extensions/pep_theme/static/style.css @@ -34,7 +34,7 @@ :root { --colour-background: var(--light, white) var(--dark, #011); --colour-background-accent-strong: var(--light, #ccc) var(--dark, #333); - --colour-background-accent-light: var(--light, #ddd) var(--dark, #222); + --colour-background-accent-light: var(--light, #eee) var(--dark, #222); --colour-text: var(--light, #333) var(--dark, #ccc); --colour-links: var(--light, #069) var(--dark, #8bf); --colour-links-light: var(--light, #057) var(--dark, #acf); From 6fb32b19630d175bf4bdd79b4dd6eecf985b1a54 Mon Sep 17 00:00:00 2001 From: "C.A.M. Gerlach" Date: Tue, 27 Sep 2022 21:21:02 -0500 Subject: [PATCH 2/6] Style: Ensure consistant contrast for code blocks in zebra tables --- pep_sphinx_extensions/pep_theme/static/style.css | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/pep_sphinx_extensions/pep_theme/static/style.css b/pep_sphinx_extensions/pep_theme/static/style.css index 10ccf09021b..90b83055ea5 100644 --- a/pep_sphinx_extensions/pep_theme/static/style.css +++ b/pep_sphinx_extensions/pep_theme/static/style.css @@ -41,7 +41,10 @@ --colour-scrollbar: var(--light, #ccc) var(--dark, #333); --colour-rule-strong: var(--light, #888) var(--dark, #777); --colour-rule-light: var(--light, #ddd) var(--dark, #222); - --colour-inline-code: var(--light, #f8f8f8) var(--dark, #333); + --colour-inline-code-bg: var(--light, #eee) var(--dark, #333); + --colour-inline-code-text: var(--light, #222) var(--dark, #ccc); + --colour-inline-code-accent-bg: var(--light, #ddd) var(--dark, #444); + --colour-inline-code-accent-text: var(--light, #111) var(--dark, #ccc); --colour-error: var(--light, #faa) var(--dark, #800); --colour-warning: var(--light, #fca) var(--dark, #840); --colour-caution: var(--light, #ffa) var(--dark, #550); @@ -152,8 +155,9 @@ code { overflow-wrap: anywhere; } code.literal { + background-color: var(--colour-inline-code-bg); + color: var(--colour-inline-code-text); font-size: .8em; - background-color: var(--colour-inline-code); } pre { overflow-x: auto; @@ -235,6 +239,10 @@ table caption { table tbody tr:nth-of-type(odd) { background-color: var(--colour-background-accent-light); } +table tbody tr:nth-of-type(odd) code.literal { + background-color: var(--colour-inline-code-accent-bg); + color: var(--colour-inline-code-accent-text); +} table th, table td { text-align: left; From bfb66888649d77c373ae6a2632313f3f43eee07a Mon Sep 17 00:00:00 2001 From: "C.A.M. Gerlach" Date: Tue, 27 Sep 2022 21:26:02 -0500 Subject: [PATCH 3/6] Style: Add padding around inline code literal BG to not be so tight --- pep_sphinx_extensions/pep_theme/static/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/pep_sphinx_extensions/pep_theme/static/style.css b/pep_sphinx_extensions/pep_theme/static/style.css index 90b83055ea5..539375acb4a 100644 --- a/pep_sphinx_extensions/pep_theme/static/style.css +++ b/pep_sphinx_extensions/pep_theme/static/style.css @@ -158,6 +158,7 @@ code.literal { background-color: var(--colour-inline-code-bg); color: var(--colour-inline-code-text); font-size: .8em; + padding: 1px 2px 1px; } pre { overflow-x: auto; From 1eb8a39d8d2a56825c8c83b268a912446793cdd1 Mon Sep 17 00:00:00 2001 From: "C.A.M. Gerlach" Date: Tue, 27 Sep 2022 22:51:59 -0500 Subject: [PATCH 4/6] Style: Add horizontal rules and header color to tables --- .../pep_theme/static/style.css | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/pep_sphinx_extensions/pep_theme/static/style.css b/pep_sphinx_extensions/pep_theme/static/style.css index 539375acb4a..6b35e1259ee 100644 --- a/pep_sphinx_extensions/pep_theme/static/style.css +++ b/pep_sphinx_extensions/pep_theme/static/style.css @@ -33,9 +33,10 @@ /* Set master colours */ :root { --colour-background: var(--light, white) var(--dark, #011); - --colour-background-accent-strong: var(--light, #ccc) var(--dark, #333); + --colour-background-accent-strong: var(--light, #ccc) var(--dark, #444); --colour-background-accent-light: var(--light, #eee) var(--dark, #222); --colour-text: var(--light, #333) var(--dark, #ccc); + --colour-text-strong: var(--light, #222) var(--dark, #ddd); --colour-links: var(--light, #069) var(--dark, #8bf); --colour-links-light: var(--light, #057) var(--dark, #acf); --colour-scrollbar: var(--light, #ccc) var(--dark, #333); @@ -45,6 +46,7 @@ --colour-inline-code-text: var(--light, #222) var(--dark, #ccc); --colour-inline-code-accent-bg: var(--light, #ddd) var(--dark, #444); --colour-inline-code-accent-text: var(--light, #111) var(--dark, #ccc); + --colour-admonition: var(--light, #ddd) var(--dark, #333); --colour-error: var(--light, #faa) var(--dark, #800); --colour-warning: var(--light, #fca) var(--dark, #840); --colour-caution: var(--light, #ffa) var(--dark, #550); @@ -231,16 +233,22 @@ div.table-wrapper { table { width: 100%; border-collapse: collapse; - border-top: 1px solid var(--colour-background-accent-light); - border-bottom: 1px solid var(--colour-background-accent-light); + border: 1px solid var(--colour-background-accent-strong); } table caption { margin: 1rem 0 .75rem; } -table tbody tr:nth-of-type(odd) { +table thead tr { + background-color: var(--colour-background-accent-strong); + color: var(--colour-text-strong); +} +table tbody tr { + border-top: 1px solid var(--colour-background-accent-strong); +} +table tbody tr:nth-of-type(even) { background-color: var(--colour-background-accent-light); } -table tbody tr:nth-of-type(odd) code.literal { +table tbody tr:nth-of-type(even) code.literal { background-color: var(--colour-inline-code-accent-bg); color: var(--colour-inline-code-accent-text); } @@ -253,7 +261,7 @@ table.pep-zero-table tr td:nth-child(2) { white-space: nowrap; } table td + td { - border-left: 1px solid var(--colour-rule-light); + border-left: 1px solid var(--colour-background-accent-strong); } /* Breadcrumbs rules */ @@ -304,7 +312,7 @@ ul.breadcrumbs a { /* Admonitions rules */ div.admonition { - background-color: var(--colour-background-accent-strong); + background-color: var(--colour-admonition); margin-bottom: 1rem; margin-top: 1rem; padding: 0.5rem 0.75rem; From 86acba25aa1ee8f09524fa1aa6bfb20658ac610c Mon Sep 17 00:00:00 2001 From: "C.A.M. Gerlach" Date: Tue, 27 Sep 2022 23:01:15 -0500 Subject: [PATCH 5/6] Style: Remove zebra striping from tables --- pep_sphinx_extensions/pep_theme/static/style.css | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/pep_sphinx_extensions/pep_theme/static/style.css b/pep_sphinx_extensions/pep_theme/static/style.css index 6b35e1259ee..1747d8ed2e2 100644 --- a/pep_sphinx_extensions/pep_theme/static/style.css +++ b/pep_sphinx_extensions/pep_theme/static/style.css @@ -44,8 +44,6 @@ --colour-rule-light: var(--light, #ddd) var(--dark, #222); --colour-inline-code-bg: var(--light, #eee) var(--dark, #333); --colour-inline-code-text: var(--light, #222) var(--dark, #ccc); - --colour-inline-code-accent-bg: var(--light, #ddd) var(--dark, #444); - --colour-inline-code-accent-text: var(--light, #111) var(--dark, #ccc); --colour-admonition: var(--light, #ddd) var(--dark, #333); --colour-error: var(--light, #faa) var(--dark, #800); --colour-warning: var(--light, #fca) var(--dark, #840); @@ -239,19 +237,12 @@ table caption { margin: 1rem 0 .75rem; } table thead tr { - background-color: var(--colour-background-accent-strong); + background-color: var(--colour-admonition); color: var(--colour-text-strong); } table tbody tr { border-top: 1px solid var(--colour-background-accent-strong); } -table tbody tr:nth-of-type(even) { - background-color: var(--colour-background-accent-light); -} -table tbody tr:nth-of-type(even) code.literal { - background-color: var(--colour-inline-code-accent-bg); - color: var(--colour-inline-code-accent-text); -} table th, table td { text-align: left; @@ -260,6 +251,7 @@ table td { table.pep-zero-table tr td:nth-child(2) { white-space: nowrap; } +table th + th, table td + td { border-left: 1px solid var(--colour-background-accent-strong); } From 44bbb6c3b0342459964af709bb89e451a4183f4c Mon Sep 17 00:00:00 2001 From: "C.A.M. Gerlach" Date: Wed, 28 Sep 2022 19:02:20 -0500 Subject: [PATCH 6/6] Style: Use more sensible color name for admonition + header color --- pep_sphinx_extensions/pep_theme/static/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pep_sphinx_extensions/pep_theme/static/style.css b/pep_sphinx_extensions/pep_theme/static/style.css index 1747d8ed2e2..ad9ec4b0dc2 100644 --- a/pep_sphinx_extensions/pep_theme/static/style.css +++ b/pep_sphinx_extensions/pep_theme/static/style.css @@ -34,6 +34,7 @@ :root { --colour-background: var(--light, white) var(--dark, #011); --colour-background-accent-strong: var(--light, #ccc) var(--dark, #444); + --colour-background-accent-medium: var(--light, #ddd) var(--dark, #333); --colour-background-accent-light: var(--light, #eee) var(--dark, #222); --colour-text: var(--light, #333) var(--dark, #ccc); --colour-text-strong: var(--light, #222) var(--dark, #ddd); @@ -44,7 +45,6 @@ --colour-rule-light: var(--light, #ddd) var(--dark, #222); --colour-inline-code-bg: var(--light, #eee) var(--dark, #333); --colour-inline-code-text: var(--light, #222) var(--dark, #ccc); - --colour-admonition: var(--light, #ddd) var(--dark, #333); --colour-error: var(--light, #faa) var(--dark, #800); --colour-warning: var(--light, #fca) var(--dark, #840); --colour-caution: var(--light, #ffa) var(--dark, #550); @@ -237,7 +237,7 @@ table caption { margin: 1rem 0 .75rem; } table thead tr { - background-color: var(--colour-admonition); + background-color: var(--colour-background-accent-medium); color: var(--colour-text-strong); } table tbody tr { @@ -304,7 +304,7 @@ ul.breadcrumbs a { /* Admonitions rules */ div.admonition { - background-color: var(--colour-admonition); + background-color: var(--colour-background-accent-medium); margin-bottom: 1rem; margin-top: 1rem; padding: 0.5rem 0.75rem;