Style: Fix zebra stripes and improve table & code presentation (#2805)

* Style: Further lighten table zebra stripes
* Style: Ensure consistent contrast for code blocks in zebra tables
* Style: Add padding around inline code literal BG to not be so tight
* Style: Add horizontal rules and header color to tables
* Style: Remove zebra striping from tables	
* Style: Use more sensible color name for admonition + header color
This commit is contained in:
C.A.M. Gerlach 2022-10-01 19:36:50 -05:00 committed by GitHub
parent 9cbe5213bc
commit 326e5623a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 10 deletions

View File

@ -33,15 +33,18 @@
/* 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-light: var(--light, #ddd) var(--dark, #222);
--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);
--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);
--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-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,10 @@ 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);
padding: 1px 2px 1px;
}
pre {
overflow-x: auto;
@ -226,14 +231,17 @@ 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) {
background-color: var(--colour-background-accent-light);
table thead tr {
background-color: var(--colour-background-accent-medium);
color: var(--colour-text-strong);
}
table tbody tr {
border-top: 1px solid var(--colour-background-accent-strong);
}
table th,
table td {
@ -243,8 +251,9 @@ 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-rule-light);
border-left: 1px solid var(--colour-background-accent-strong);
}
/* Breadcrumbs rules */
@ -295,7 +304,7 @@ ul.breadcrumbs a {
/* Admonitions rules */
div.admonition {
background-color: var(--colour-background-accent-strong);
background-color: var(--colour-background-accent-medium);
margin-bottom: 1rem;
margin-top: 1rem;
padding: 0.5rem 0.75rem;