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:
parent
9cbe5213bc
commit
326e5623a5
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue