github-mirror/fish-shell
2
0
Fork 0
mirror of https://github.com/fish-shell/fish-shell.git synced 2024-11-25 09:39:52 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Css refresh (#9982)

Browse Source 
This cleans up the CSS, reduces the number of different colors and special settings we use.

It increases contrast so we now pass WCAG AAA (according to chromium), and switches to css variables for colors to make dark mode simpler to implement.
This commit is contained in:
Fabian Boehm 2023-08-25 17:13:35 +02:00 committed by GitHub
parent 03402e572d
commit b48fa1f1a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 101 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

183
doc_src/python_docs_theme/static/pydoctheme.css
View File

@ -1,5 +1,18 @@
:root { :root {
color-scheme: light dark; /* both supported */ color-scheme: light dark; /* both supported */
--link-color: #0030B3;
--visited-link-color: #6363bb;
--hover-link-color: #00A5F4;
--text-color: #222;
--main-background: #EEEEFA;
--secondary-background: #ddddea;
--outer-background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%);
--code-background: rgba(255,255,255, .2);
--code-border: #ac9;
--sidebar-border-color: #ccc;
--secondary-link-color: #444;
--highlight-background: #FFF;
--td-background: white;
} }
html { html {
@ -8,7 +21,10 @@ html {
} }
body { body {
background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%); background: var(--outer-background);
}
html, body, input {
/* Pick a font. /* Pick a font.
sans-serif is the Browser default. This is great because the user could change it. sans-serif is the Browser default. This is great because the user could change it.
Unfortunately the defaults are decades old and e.g. on Windows still use Arial in Firefox and Edge, Unfortunately the defaults are decades old and e.g. on Windows still use Arial in Firefox and Edge,
@ -29,8 +45,7 @@ body {
body { body {
/* These stay, assuming some browsers pick different defaults */ /* These stay, assuming some browsers pick different defaults */
font-size: 100%; font-size: 100%;
background-color: #eeeefa; background-color: var(--main-background);
color: #000;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -97,7 +112,7 @@ div.sphinxsidebar ul ul, div.sphinxsidebar ul.want-points {
div.sphinxsidebar ul { div.sphinxsidebar ul {
margin: 10px; margin: 10px;
padding: 0; padding: 0;
color: #444444; color: var(--secondary-link-color);
margin: 10px; margin: 10px;
list-style: none; list-style: none;
} }
@ -132,7 +147,7 @@ div.sphinxsidebar h3 {
} }
div.sphinxsidebar h4 { div.sphinxsidebar h4 {
color: #444444; color: var(--secondary-link-color);
font-size: 1.3em; font-size: 1.3em;
font-weight: normal; font-weight: normal;
margin: 5px 0 0 0; margin: 5px 0 0 0;
@ -162,7 +177,7 @@ a:hover, div.footer a {
} }
div.related a, div.sphinxsidebar a { div.related a, div.sphinxsidebar a {
color: #444444; color: var(--secondary-link-color);
} }
div.warning { div.warning {
@ -192,10 +207,6 @@ div.footer {
font-size: 75%; font-size: 75%;
} }
th, dl.field-list > dt {
background-color: #ede;
}
table.docutils { table.docutils {
border-collapse: collapse; border-collapse: collapse;
} }
@ -212,9 +223,9 @@ th > :first-child, td > :first-child {
/* End of SPHINX IMPORT */ /* End of SPHINX IMPORT */
div#fmain { div#fmain {
color: #222; color: var(--text-color);
padding: 1em 2em; padding: 1em 2em;
background-color: #EEEEFA; background-color: var(--main-background);
border-radius: 14px; border-radius: 14px;
position: relative; position: relative;
margin: 1em auto 1em; margin: 1em auto 1em;
@ -227,7 +238,8 @@ div#fmain {
div.related { div.related {
margin-bottom: 0; margin-bottom: 0;
padding: 0.5em 0; padding: 0.5em 0;
border-top: 1px solid #ccc; border-top: 1px solid;
border-color: var(--sidebar-border-color);
margin-top: 0; margin-top: 0;
} }
@ -243,15 +255,10 @@ div.section {
width: 100%; width: 100%;
} }
div.related a:hover,
div.footer a:hover,
div.sphinxsidebar a:hover {
color: #0095C4;
}
div.related:first-child { div.related:first-child {
border-top: 0; border-top: 0;
border-bottom: 1px solid #ccc; border-bottom: 1px solid;
border-color: var(--sidebar-border-color);
} }
.inline-search { .inline-search {
@ -265,7 +272,8 @@ form.inline-search input[type="submit"] {
} }
div.sphinxsidebar { div.sphinxsidebar {
border-right: 1px solid #ccc; border-right: 1px solid;
border-color: var(--sidebar-border-color);
border-radius: 0px; border-radius: 0px;
line-height: 1em; line-height: 1em;
font-size: smaller; font-size: smaller;
@ -331,7 +339,8 @@ ul li dd {
form.inline-search input, form.inline-search input,
div.sphinxsidebar input { div.sphinxsidebar input {
border: 1px solid #999999; border: 1px solid;
border-color: var(--sidebar-border-color);
font-size: smaller; font-size: smaller;
border-radius: 3px; border-radius: 3px;
} }
@ -370,7 +379,8 @@ div.body hr {
div.body pre, code { div.body pre, code {
border-radius: 3px; border-radius: 3px;
border: 1px solid #ac9; border: 1px solid;
border-color: var(--code-border);
} }
div.highlight { div.highlight {
@ -405,28 +415,31 @@ div.body div.seealso {
border: 1px solid #dddd66; border: 1px solid #dddd66;
} }
div.body a { a {
color: #0072aa; color: var(--link-color);
} }
div.body a:visited { div.body a:visited {
color: #6363bb; color: var(--visited-link-color);
} }
div.related a:hover,
div.footer a:hover,
div.sphinxsidebar a:hover,
div.body a:hover { div.body a:hover {
color: #00B0E4; color: var(--hover-link-color);
} }
code { code {
/* Make inline-code better visible */ /* Make inline-code better visible */
background-color: rgba(20,20,80, .1); background-color: var(--code-background);
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
margin-left: 3px; margin-left: 3px;
margin-right: 3px; margin-right: 3px;
} }
tt, code, pre, dl > dt span ~ em, #synopsis p, #synopsis code, .command { tt, code, pre, dl > dt span ~ em, #synopsis p, #synopsis code, .command, button {
/* Pick a monospace font. /* Pick a monospace font.
ui-monospace is the monospace version of system-ui - the system's monospace font. ui-monospace is the monospace version of system-ui - the system's monospace font.
Unfortunately it's barely supported anywhere (at time of writing only Safari does!), Unfortunately it's barely supported anywhere (at time of writing only Safari does!),
@ -473,7 +486,8 @@ div.body tt.xref, div.body a tt, div.body code.xref, div.body a code {
} }
table.docutils { table.docutils {
border: 1px solid #ddd; border: 1px solid;
border-color: var(--sidebar-border-color);
min-width: 20%; min-width: 20%;
border-radius: 3px; border-radius: 3px;
margin-top: 1em; margin-top: 1em;
@ -484,7 +498,8 @@ table.docutils {
} }
table.docutils td, table.docutils th { table.docutils td, table.docutils th {
border: 1px solid #ddd !important; border: 1px solid;
border-color: var(--sidebar-border-color);
border-radius: 3px; border-radius: 3px;
} }
@ -492,13 +507,13 @@ table p, table li {
text-align: left !important; text-align: left !important;
} }
table.docutils th { th {
background-color: #eee; background-color: var(--secondary-background);
padding: 0.3em 0.5em; padding: 0.3em 0.5em;
} }
table.docutils td { table.docutils td {
background-color: white; background-color: var(--td-background);
padding: 0.3em 0.5em; padding: 0.3em 0.5em;
} }
@ -514,16 +529,8 @@ div.footer {
margin-right: 10px; margin-right: 10px;
} }
.refcount {
color: #060;
}
.stableabi {
color: #229;
}
.highlight { .highlight {
background: #FFF; background: var(--highlight-background);
} }
#synopsis p { #synopsis p {
@ -625,11 +632,10 @@ div.documentwrapper {
.prompt { color: #8f7902; } .prompt { color: #8f7902; }
kbd { kbd {
background-color: #f9f9f9; background-color: var(--td-background);
border: 1px solid #aaa; border: 1px solid;
border-color: var(--sidebar-border-color);
border-radius: .2em; border-radius: .2em;
box-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.1);
color: #000;
padding: 0.1em 0.3em; padding: 0.1em 0.3em;
} }
@ -641,91 +647,38 @@ div.body .internal.reference:link {
content: "$"; content: "$";
} }
.footnote, .footnote-reference { .footnote, .footnote-reference {
background-color: #ddddea; background-color: var(--secondary-background);
font-size: 90%; font-size: 90%;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { :root {
background: linear-gradient(to top, #1f1f3f 0%,#051f3a 100%); --link-color: #5fb0fc;
--text-color: #DDD;
--main-background: #202028;
--secondary-background: #112;
--outer-background: linear-gradient(to top, #1f1f3f 0%,#051f3a 100%);
--code-background: rgba(20, 20, 25, .2);
--code-border: #536;
--sidebar-border-color: #666;
--secondary-link-color: #DDD;
--highlight-background: #000;
--td-background: #111;
} }
div#fmain { div#fmain {
color: #DDD;
background-color: #202028;
box-shadow: 0 0 5px 1px #000; box-shadow: 0 0 5px 1px #000;
} }
div.body pre, code {
border: 1px solid #536;
}
.footnote, .footnote-reference {
background-color: #101020;
}
div.sphinxsidebar {
border-right: 1px solid #666;
}
div.related:first-child {
border-bottom: 1px solid #666;
}
div.related {
border-top: 1px solid #666;
}
div.sphinxsidebar a, div.footer {
color: #DDD;
}
div.sphinxsidebar h3 a, div.related a, div.sphinxsidebar h3, div.footer a {
color: #DDD;
}
.highlight {
background: #000;
}
kbd { kbd {
background-color: #111;
border: 1px solid #444;
box-shadow: 0.1em 0.1em 0.2em rgba(100,100,100,0.1); box-shadow: 0.1em 0.1em 0.2em rgba(100,100,100,0.1);
color: #FFF; color: #FFF;
} }
table.docutils th {
background-color: #222;
}
table.docutils td { table.docutils td {
background-color: #111; background-color: #111;
} }
input {
background-color: #222;
color: #DDD;
}
dt:target, span.highlighted {
background-color: #404060;
}
table.docutils {
border: 1px solid #222;
}
table.docutils td, table.docutils th {
border: 1px solid #222 !important;
}
div.body a {
color: #2092fa;
}
/* Color based on the Name.Function (.nf) class from pygments.css. */ /* Color based on the Name.Function (.nf) class from pygments.css. */
.command { color: #008fd7 } .command { color: #008fd7 }
/* The table background on fishfish Beta r1 */
th, dl.field-list > dt {
background-color: #121;
}
code {
background-color: rgba(200, 200, 255, .2);
}
} }

53
doc_src/python_docs_theme/static/pygments.css
View File

@ -1,20 +1,19 @@
.highlight .hll { background-color: #ffffcc } .highlight .hll { background-color: #ffffcc }
.highlight .err { color: #a40000; border: 1px solid #ef2929 } /* Error */ .highlight .err { color: #a40000; border: 1px solid #ef2929 } /* Error */
.highlight .k { color: #204a87; font-weight: bold } /* Keyword */ .highlight .k { color: #204a87; font-weight: bold } /* Keyword */
.highlight .o { color: #00a6b2; } /* Operator */ .highlight .o { color: #005F66; } /* Operator */
.highlight .p { color: #00bfff; } /* Punctuation */ .highlight .p { color: #000f8f; } /* Punctuation */
.highlight .c { color: #777; font-style: italic; } /* Comment */ .highlight .c { color: #575757; font-style: italic; } /* Comment */
.highlight .ch { color: #8f7902; font-style: italic } /* Comment.Hashbang */ .highlight .ch { color: #645502; font-style: italic } /* Comment.Hashbang */
.highlight .cm { color: #8f7902; font-style: italic } /* Comment.Multiline */ .highlight .cm { color: #645502; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #8f7902; font-style: italic } /* Comment.Preproc */ .highlight .cp { color: #645502; font-style: italic } /* Comment.Preproc */
.highlight .cpf { color: #8f7902; font-style: italic } /* Comment.PreprocFile */ .highlight .cpf { color: #645502; font-style: italic } /* Comment.PreprocFile */
.highlight .c1 { color: #8f7902; font-style: italic } /* Comment.Single */ .highlight .c1 { color: #645502; font-style: italic } /* Comment.Single */
.highlight .cs { color: #8f7902; font-style: italic } /* Comment.Special */ .highlight .cs { color: #645502; font-style: italic } /* Comment.Special */
.highlight .gd { color: #a40000 } /* Generic.Deleted */ .highlight .gd { color: #a40000 } /* Generic.Deleted */
.highlight .gr { color: #ef2929 } /* Generic.Error */ .highlight .gr { color: #ef2929 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */ .highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #00A000 } /* Generic.Inserted */ .highlight .gi { color: #00A000 } /* Generic.Inserted */
.highlight .gp { color: #8f7902 } /* Generic.Prompt */
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ .highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #a40000; font-weight: bold } /* Generic.Traceback */ .highlight .gt { color: #a40000; font-weight: bold } /* Generic.Traceback */
.highlight .kc { color: #204a87; font-weight: bold } /* Keyword.Constant */ .highlight .kc { color: #204a87; font-weight: bold } /* Keyword.Constant */
@ -24,15 +23,15 @@
.highlight .kr { color: #204a87; font-weight: bold } /* Keyword.Reserved */ .highlight .kr { color: #204a87; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #204a87; font-weight: bold } /* Keyword.Type */ .highlight .kt { color: #204a87; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #0000cf; font-weight: bold } /* Literal.Number */ .highlight .m { color: #0000cf; font-weight: bold } /* Literal.Number */
.highlight .s { color: #4e9a06 } /* Literal.String */ .highlight .s { color: #2F5B06 } /* Literal.String */
.highlight .na { color: #c4a000 } /* Name.Attribute */ .highlight .na { color: #c4a000 } /* Name.Attribute */
.highlight .nb { color: #204a87 } /* Name.Builtin */ .highlight .nb { color: #204a87 } /* Name.Builtin */
.highlight .no { color: #00bfff } /* Name.Constant */ .highlight .no { color: #000f8f } /* Name.Constant */
.highlight .nd { color: #5c35cc; font-weight: bold } /* Name.Decorator */ .highlight .nd { color: #5c35cc; font-weight: bold } /* Name.Decorator */
.highlight .ni { color: #ce5c00 } /* Name.Entity */ .highlight .ni { color: #ce5c00 } /* Name.Entity */
.highlight .ne { color: #cc0000; font-weight: bold } /* Name.Exception */ .highlight .ne { color: #cc0000; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #005fd7 } /* Name.Function */ .highlight .nf { color: #004BCC; } /* Name.Function */
.highlight .nl { color: #f57900 } /* Name.Label */ .highlight .nl { color: #f57900; } /* Name.Label */
.highlight .nt { color: #204a87; font-weight: bold } /* Name.Tag */ .highlight .nt { color: #204a87; font-weight: bold } /* Name.Tag */
.highlight .ow { color: #204a87; font-weight: bold } /* Operator.Word */ .highlight .ow { color: #204a87; font-weight: bold } /* Operator.Word */
.highlight .w { color: #f8f8f8; } /* Text.Whitespace */ .highlight .w { color: #f8f8f8; } /* Text.Whitespace */
@ -46,13 +45,13 @@
.highlight .sc { color: #4e9a06 } /* Literal.String.Char */ .highlight .sc { color: #4e9a06 } /* Literal.String.Char */
.highlight .dl { color: #4e9a06 } /* Literal.String.Delimiter */ .highlight .dl { color: #4e9a06 } /* Literal.String.Delimiter */
.highlight .sd { color: #8f7902; font-style: italic } /* Literal.String.Doc */ .highlight .sd { color: #8f7902; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #4daf08 } /* Literal.String.Double */ .highlight .s2 { color: #2E6506 } /* Literal.String.Double */
.highlight .se { color: #00a6b2 } /* Literal.String.Escape */ .highlight .se { color: #800400 } /* Literal.String.Escape */
.highlight .sh { color: #4e9a06 } /* Literal.String.Heredoc */ .highlight .sh { color: #4e9a06 } /* Literal.String.Heredoc */
.highlight .si { color: #4e9a06 } /* Literal.String.Interpol */ .highlight .si { color: #4e9a06 } /* Literal.String.Interpol */
.highlight .sx { color: #4e9a06 } /* Literal.String.Other */ .highlight .sx { color: #4e9a06 } /* Literal.String.Other */
.highlight .sr { color: #4e9a06 } /* Literal.String.Regex */ .highlight .sr { color: #4e9a06 } /* Literal.String.Regex */
.highlight .s1 { color: #d0d00b } /* Literal.String.Single */ .highlight .s1 { color: #605000 } /* Literal.String.Single */
.highlight .ss { color: #4e9a06 } /* Literal.String.Symbol */ .highlight .ss { color: #4e9a06 } /* Literal.String.Symbol */
.highlight .bp { color: #3465a4 } /* Name.Builtin.Pseudo */ .highlight .bp { color: #3465a4 } /* Name.Builtin.Pseudo */
.highlight .il { color: #0000cf; font-weight: bold } /* Literal.Number.Integer.Long */ .highlight .il { color: #0000cf; font-weight: bold } /* Literal.Number.Integer.Long */
@ -66,12 +65,26 @@
:root { :root {
--contrast: #FFFFFF; --contrast: #FFFFFF;
} }
.highlight .k { color: #507a97; font-weight: bold } /* Keyword */ .highlight .no { color: #00bfff } /* Name.Constant */
.highlight .nf { color: #008fd7 } /* Name.Function */ .highlight .p { color: #00bfff; } /* Punctuation */
.highlight .nb { color: #209a87 } /* Name.Builtin */ .highlight .k { color: #60A3BE; font-weight: bold } /* Keyword */
.highlight .nf { color: #00a0ff } /* Name.Function */
.highlight .nb { color: #A0AfF7 } /* Name.Builtin - we don't emit this, it's for bash scripts*/
.highlight .s { color: #4eFa06 } /* Literal.String */
.highlight .s1 { color: #a0a00b } /* Literal.String.Single */
.highlight .s2 { color: #9ce781 } /* Literal.String.Double */ .highlight .s2 { color: #9ce781 } /* Literal.String.Double */
.highlight .c { color: #969696; font-style: italic; } /* Comment */
.highlight .ch { color: #b19602; font-style: italic } /* Comment.Hashbang */
.highlight .cm { color: #b19602; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #b19602; font-style: italic } /* Comment.Preproc */
.highlight .cpf { color: #b19602; font-style: italic } /* Comment.PreprocFile */
.highlight .c1 { color: #b19602; font-style: italic } /* Comment.Single */
.highlight .cs { color: #b19602; font-style: italic } /* Comment.Special */
.highlight .o { color: #00F6b2; } /* Operator */
.highlight .se { color: #00a6b2 } /* Literal.String.Escape */
} }
.highlight .g { color: var(--contrast) } /* Generic */ .highlight .g { color: var(--contrast) } /* Generic */
.highlight .gp { color: var(--contrast) } /* Generic.Prompt */
.highlight .l { color: var(--contrast) } /* Literal */ .highlight .l { color: var(--contrast) } /* Literal */
.highlight .n { color: var(--contrast) } /* Name */ .highlight .n { color: var(--contrast) } /* Name */
.highlight .x { color: var(--contrast) } /* Other */ .highlight .x { color: var(--contrast) } /* Other */