mirror
/
Rapptz.discord.py
mirror of https://github.com/Rapptz/discord.py
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Refactor CSS to use a colour palette and make light theme greyer.

pull/6176/head
Rapptz 5 years ago
parent
022a341476
commit
b28c76cda1
1 changed files with 147 additions and 109 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 256
      docs/_static/style.css

256
docs/_static/style.css
View File

@ -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 {

Write Preview
Loading…
Cancel
Save