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