Refactor CSS to use a colour palette and make light theme greyer.
This commit is contained in:
Rapptz
256
docs/_static/style.css
vendored
256
docs/_static/style.css
vendored
@@ -19,64 +19,84 @@ Historically however, thanks to:
|
|||||||
/* CSS variables would go here */
|
/* CSS variables would go here */
|
||||||
:root {
|
:root {
|
||||||
--font-family: 'Georgia', 'Yu Gothic', 'Noto Sans CJK JP Regular', serif;
|
--font-family: 'Georgia', 'Yu Gothic', 'Noto Sans CJK JP Regular', serif;
|
||||||
--primary-accent: #0a0a0a;
|
|
||||||
--secondary-accent: #171717;
|
/* base palette */
|
||||||
--primary-text: #fff;
|
--white: #ffffff;
|
||||||
--secondary-text: #fff;
|
--grey-1: #ebebeb;
|
||||||
--settings: #fff;
|
--grey-2: #e0e0e0;
|
||||||
--settings-hover: #ccc;
|
--grey-3: #d6d6d6;
|
||||||
--main-background: #fff;
|
--grey-4: #848484;
|
||||||
--link-text: #2591c4;
|
--grey-5: #5c5c5c;
|
||||||
--link-hover-text: #0b3a44;
|
--grey-6: #333333;
|
||||||
--text-normal: #3e4349;
|
--grey-7: #292929;
|
||||||
--mobile-nav-background: #000;
|
--black: #0a0a0a;
|
||||||
--mobile-nav-text: #fff;
|
|
||||||
--mobile-nav-hover-text: #fff;
|
--blue: #3399ff;
|
||||||
--mobile-nav-header-text: #fff;
|
--light-blue: #d0e7ff;
|
||||||
--nav-background: #fff;
|
--cyan-1: #22acca;
|
||||||
--nav-text: #444;
|
--cyan-2: #1c8fa8;
|
||||||
--nav-hover-text: #444;
|
--cyan-3: #167286;
|
||||||
--nav-header-text: #333;
|
--yellow: #cccc00;
|
||||||
--search-border: #5a5a5c;
|
--light-yellow: #ffffcc;
|
||||||
--search-background: #171717;
|
--red: #cc0033;
|
||||||
--search-text: #fff;
|
--light-red: #ffccd9;
|
||||||
--search-focus: #3399ff;
|
|
||||||
--search-button: #b1b1b1;
|
/* theme gets built on these base colours */
|
||||||
--search-button-hover: #686868;
|
--settings: var(--white);
|
||||||
--footer-text: #555;
|
--settings-hover: var(--grey-1);
|
||||||
--footer-link: #444;
|
--main-background: var(--grey-1);
|
||||||
--hr-border: #b1b4b6;
|
--link-text: var(--cyan-2);
|
||||||
--main-big-headers-text: #212224;
|
--link-hover-text: var(--cyan-3);
|
||||||
--main-big-headers-border: #ddd;
|
--main-text: var(--black);
|
||||||
--main-h5-header-text: #000;
|
--mobile-nav-background: var(--black);
|
||||||
--main-h6-header-text: #777;
|
--mobile-nav-text: var(--white);
|
||||||
--main-h4-header-border: #e5e5e5;
|
--mobile-nav-hover-text: var(--white);
|
||||||
--header-link: #3e4349;
|
--mobile-nav-header-text: var(--white);
|
||||||
--header-link-hover-text: #fff;
|
--nav-background: var(--main-background);
|
||||||
--note-background: #eee;
|
--nav-text: var(--grey-6);
|
||||||
--note-border: #ccc;
|
--nav-hover-text: var(--grey-6);
|
||||||
--warning-background: #fef9e9;
|
--nav-header-text: var(--black);
|
||||||
--warning-border: #fbe091;
|
--search-border: var(--grey-4);
|
||||||
--error-background: #ffe4e4;
|
--search-background: var(--grey-6);
|
||||||
--error-border: #f66;
|
--search-text: var(--white);
|
||||||
--helpful-background: #e4f2ff;
|
--search-focus: var(--blue);
|
||||||
--helpful-border: #66beff;
|
--search-button: var(--white);
|
||||||
--codeblock-background: #f5f5f5;
|
--search-button-hover: var(--grey-1);
|
||||||
--codeblock-border: #c6c9cb;
|
--footer-text: var(--grey-5);
|
||||||
--codeblock-text: #222;
|
--footer-link: var(--grey-6);
|
||||||
--inline-code-background: #ecf0f3;
|
--hr-border: var(--grey-2);
|
||||||
|
--main-big-headers-text: var(--black);
|
||||||
|
--main-big-headers-border: var(--grey-4);
|
||||||
|
--main-h5-header-text: var(--black);
|
||||||
|
--main-h6-header-text: var(--grey-4);
|
||||||
|
--main-h4-header-border: var(--grey-4);
|
||||||
|
--header-link: var(--grey-6);
|
||||||
|
--header-link-hover-text: var(--white);
|
||||||
|
--note-background: var(--grey-3);
|
||||||
|
--note-border: var(--grey-4);
|
||||||
|
--warning-background: var(--light-yellow);
|
||||||
|
--warning-border: var(--yellow);
|
||||||
|
--error-background: var(--light-red);
|
||||||
|
--error-border: var(--red);
|
||||||
|
--helpful-background: var(--light-blue);
|
||||||
|
--helpful-border: var(--blue);
|
||||||
|
--codeblock-background: var(--grey-2);
|
||||||
|
--codeblock-border: var(--grey-4);
|
||||||
|
--codeblock-text: var(--grey-6);
|
||||||
|
--inline-code-background: var(--grey-2);
|
||||||
--xref-code-background: transparent;
|
--xref-code-background: transparent;
|
||||||
--api-entry-background: #f5f5f5;
|
--api-entry-background: var(--grey-2);
|
||||||
--table-header-background: #f5f5f5;
|
--table-header-background: var(--grey-3);
|
||||||
--table-text: #000;
|
--table-text: var(--black);
|
||||||
--table-border: #ddd;
|
--table-border: var(--grey-4);
|
||||||
--mobile-active-toc: #212121;
|
--mobile-active-toc: var(--grey-6);
|
||||||
--active-toc: #dbdbdb;
|
--active-toc: var(--grey-3);
|
||||||
--scrollbar: rgba(0,0,0,0.2);
|
--scrollbar: rgba(0,0,0,0.2);
|
||||||
--scrollbar-hover: rgba(0,0,0,0.4);
|
--scrollbar-hover: rgba(0,0,0,0.4);
|
||||||
--rtd-ad-border: #bfbfbf;
|
--rtd-ad-border: var(--grey-3);
|
||||||
--rtd-ad-background: #eeeeee;
|
--rtd-ad-background: var(--grey-2);
|
||||||
--rtd-ad-text-rgb: 64, 64, 64;
|
--rtd-ad-main-text: var(--grey-6);
|
||||||
|
--rtd-ad-small-text: var(--grey-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
:root[data-font="sans"] {
|
:root[data-font="sans"] {
|
||||||
@@ -84,52 +104,53 @@ Historically however, thanks to:
|
|||||||
}
|
}
|
||||||
|
|
||||||
:root[data-theme="dark"] {
|
:root[data-theme="dark"] {
|
||||||
--main-background: #303030;
|
--main-background: var(--grey-7);
|
||||||
--link-text: #2591c4;
|
--link-text: var(--cyan-1);
|
||||||
--link-hover-text: #3b6a74;
|
--link-hover-text: var(--cyan-1);
|
||||||
--text-normal: #fff;
|
--main-text: var(--white);
|
||||||
--mobile-nav-background: #424242;
|
--mobile-nav-background: var(--grey-5);
|
||||||
--mobile-nav-text: #fff;
|
--mobile-nav-text: var(--white);
|
||||||
--mobile-nav-hover-text: #fff;
|
--mobile-nav-hover-text: var(--white);
|
||||||
--mobile-nav-header-text: #fff;
|
--mobile-nav-header-text: var(--white);
|
||||||
--nav-background: #303030;
|
--nav-background: var(--grey-7);
|
||||||
--nav-text: rgba(255,255,255,0.7);
|
--nav-text: var(--grey-1);
|
||||||
--nav-hover-text: rgba(255,255,255,0.5);
|
--nav-hover-text: var(--grey-2);
|
||||||
--nav-header-text: rgba(255,255,255,0.87);
|
--nav-header-text: var(--white);
|
||||||
--footer-text: #555;
|
--footer-text: var(--grey-2);
|
||||||
--footer-link: #444;
|
--footer-link: var(--grey-1);
|
||||||
--hr-border: #b1b4b6;
|
--hr-border: var(--grey-1);
|
||||||
--main-big-headers-text: rgba(255,255,255,0.87);
|
--main-big-headers-text: var(--grey-1);
|
||||||
--main-big-headers-border: #ddd;
|
--main-big-headers-border: var(--grey-1);
|
||||||
--main-h5-header-text: #000;
|
--main-h5-header-text: var(--grey-4);
|
||||||
--main-h6-header-text: #777;
|
--main-h6-header-text: var(--grey-5);
|
||||||
--main-h4-header-border: #e5e5e5;
|
--main-h4-header-border: var(--grey-2);
|
||||||
--header-link: #3e4349;
|
--header-link: var(--grey-2);
|
||||||
--header-link-hover-text: #fff;
|
--header-link-hover-text: var(--grey-6);
|
||||||
--note-background: #424242;
|
--note-background: var(--grey-6);
|
||||||
--note-border: #222222;
|
--note-border: var(--black);
|
||||||
--warning-background: #424242;
|
--warning-background: var(--light-yellow);
|
||||||
--warning-border: #aaaa22;
|
--warning-border: var(--yellow);
|
||||||
--error-background: #424242;
|
--error-background: var(--light-red);
|
||||||
--error-border: #aa2222;
|
--error-border: var(--red);
|
||||||
--helpful-background: #424242;
|
--helpful-background: var(--light-blue);
|
||||||
--helpful-border: #22aaaa;
|
--helpful-border: var(--blue);
|
||||||
--codeblock-background: #222222;
|
--codeblock-background: var(--grey-6);
|
||||||
--codeblock-border: #424242;
|
--codeblock-border: var(--black);
|
||||||
--codeblock-text: rgba(255,255,255,0.7);
|
--codeblock-text: var(--grey-1);
|
||||||
--inline-code-background: #212121;
|
--inline-code-background: var(--black);
|
||||||
--xref-code-background: transparent;
|
--xref-code-background: transparent;
|
||||||
--api-entry-background: #212121;
|
--api-entry-background: var(--grey-6);
|
||||||
--table-header-background: #f5f5f5;
|
--table-header-background: var(--grey-6);
|
||||||
--table-text: #000;
|
--table-text: var(--grey-1);
|
||||||
--table-border: #ddd;
|
--table-border: var(--grey-4);
|
||||||
--mobile-active-toc: #212121;
|
--mobile-active-toc: var(--grey-6);
|
||||||
--active-toc: #212121;
|
--active-toc: var(--grey-6);
|
||||||
--scrollbar: rgba(0,0,0,0.5);
|
--scrollbar: rgba(0,0,0,0.5);
|
||||||
--scrollbar-hover: rgba(0,0,0,0.7);
|
--scrollbar-hover: rgba(0,0,0,0.7);
|
||||||
--rtd-ad-border: #333333;
|
--rtd-ad-border: var(--grey-6);
|
||||||
--rtd-ad-background: #404040;
|
--rtd-ad-background: var(--grey-5);
|
||||||
--rtd-ad-text-rgb: 221, 221, 221;
|
--rtd-ad-main-text: var(--grey-2);
|
||||||
|
--rtd-ad-small-text: var(--grey-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
img[src$="snake_dark.svg"] {
|
img[src$="snake_dark.svg"] {
|
||||||
@@ -149,7 +170,7 @@ body {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: var(--main-background);
|
background-color: var(--main-background);
|
||||||
color: var(--text-normal);
|
color: var(--main-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -204,7 +225,7 @@ a:hover {
|
|||||||
header {
|
header {
|
||||||
grid-area: h;
|
grid-area: h;
|
||||||
background-color: var(--main-background);
|
background-color: var(--main-background);
|
||||||
color: var(--primary-text);
|
color: var(--main-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
header > nav {
|
header > nav {
|
||||||
@@ -214,7 +235,12 @@ header > nav {
|
|||||||
}
|
}
|
||||||
|
|
||||||
header > nav > a {
|
header > nav > a {
|
||||||
color: var(--primary-text);
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
header > nav > a:hover {
|
||||||
|
color: var(--white);
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-heading {
|
.main-heading {
|
||||||
@@ -223,8 +249,8 @@ header > nav > a {
|
|||||||
|
|
||||||
.sub-header {
|
.sub-header {
|
||||||
grid-area: n;
|
grid-area: n;
|
||||||
background-color: var(--secondary-accent);
|
background-color: var(--grey-6);
|
||||||
color: var(--secondary-text);
|
color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* these aren't shown on mobile */
|
/* these aren't shown on mobile */
|
||||||
@@ -629,11 +655,13 @@ div.admonition p.admonition-title + p {
|
|||||||
div.important, div.note, div.hint, div.tip {
|
div.important, div.note, div.hint, div.tip {
|
||||||
background-color: var(--note-background);
|
background-color: var(--note-background);
|
||||||
border: 1px solid var(--note-border);
|
border: 1px solid var(--note-border);
|
||||||
|
color: var(--note-text, var(--main-text));
|
||||||
}
|
}
|
||||||
|
|
||||||
div.attention, div.warning, div.caution, div.seealso {
|
div.attention, div.warning, div.caution, div.seealso {
|
||||||
background-color: var(--warning-background);
|
background-color: var(--warning-background);
|
||||||
border: 1px solid var(--warning-border);
|
border: 1px solid var(--warning-border);
|
||||||
|
color: var(--warning-text, var(--main-text));
|
||||||
}
|
}
|
||||||
|
|
||||||
dl.field-list > dd {
|
dl.field-list > dd {
|
||||||
@@ -651,7 +679,7 @@ div.topic {
|
|||||||
/* don't link-ify the FAQ page */
|
/* don't link-ify the FAQ page */
|
||||||
a.toc-backref {
|
a.toc-backref {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--text-normal);
|
color: var(--main-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* bold and fix the Parameter, Raises, etc. */
|
/* bold and fix the Parameter, Raises, etc. */
|
||||||
@@ -673,16 +701,20 @@ a.reference.internal > strong {
|
|||||||
div.danger, div.error {
|
div.danger, div.error {
|
||||||
background-color: var(--error-background);
|
background-color: var(--error-background);
|
||||||
border: 1px solid var(--error-border);
|
border: 1px solid var(--error-border);
|
||||||
|
color: var(--error-text, var(--main-text));
|
||||||
}
|
}
|
||||||
|
|
||||||
/* helpful admonitions */
|
/* helpful admonitions */
|
||||||
div.helpful {
|
div.helpful {
|
||||||
background-color: var(--helpful-background);
|
background-color: var(--helpful-background);
|
||||||
border: 1px solid var(--helpful-border);
|
border: 1px solid var(--helpful-border);
|
||||||
|
color: var(--helpful-text, var(--main-text));
|
||||||
}
|
}
|
||||||
|
|
||||||
div.helpful > p.admonition-title {
|
div.helpful > p.admonition-title {
|
||||||
display: block;
|
display: block;
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.helpful > p.admonition-title::after {
|
div.helpful > p.admonition-title::after {
|
||||||
@@ -769,6 +801,7 @@ dl.class {
|
|||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dl.data > dt,
|
||||||
dl.describe > dt,
|
dl.describe > dt,
|
||||||
dl.function > dt,
|
dl.function > dt,
|
||||||
dl.attribute > dt,
|
dl.attribute > dt,
|
||||||
@@ -810,6 +843,7 @@ dd {
|
|||||||
|
|
||||||
table.docutils {
|
table.docutils {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.docutils.footnote {
|
table.docutils.footnote {
|
||||||
@@ -831,10 +865,14 @@ table.docutils thead tr th {
|
|||||||
table.docutils tbody tr th,
|
table.docutils tbody tr th,
|
||||||
table.docutils tbody tr td {
|
table.docutils tbody tr td {
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
border-top: solid 1px var(--table-border);
|
|
||||||
padding: 7px 5px;
|
padding: 7px 5px;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
table.docutils tbody tr:not(:first-child) {
|
||||||
|
border-top: solid 1px var(--table-border);
|
||||||
|
}
|
||||||
|
|
||||||
table.docutils tbody tr:last-child th,
|
table.docutils tbody tr:last-child th,
|
||||||
table.docutils tbody tr:last-child td {
|
table.docutils tbody tr:last-child td {
|
||||||
border-bottom: solid 1px var(--table-border);
|
border-bottom: solid 1px var(--table-border);
|
||||||
@@ -876,11 +914,11 @@ section#welcome-to-discord-py > h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ethical-fixedfooter a {
|
.ethical-fixedfooter a {
|
||||||
color: rgb(var(--rtd-ad-text-rgb)) !important;
|
color: var(--rtd-ad-main-text) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ethical-callout a {
|
.ethical-callout > small > em > a {
|
||||||
color: rgba(var(--rtd-ad-text-rgb), 0.7) !important;
|
color: var(--rtd-ad-small-text) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
@@ -910,7 +948,7 @@ div.code-block-caption {
|
|||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
background-color: var(--primary-accent);
|
background-color: var(--black);
|
||||||
}
|
}
|
||||||
|
|
||||||
header > nav {
|
header > nav {
|
||||||
|
|||||||
Reference in New Issue
Block a user