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
Split 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 */
: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 {

Write Preview
Loading…
Cancel
Save