mirror of
https://github.com/fish-shell/fish-shell.git
synced 2024-11-25 09:39:52 +08:00
Css refresh (#9982)
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
GitHub
parent
03402e572d
commit
b48fa1f1a0
|
|
@ -1,5 +1,18 @@
|
|||
: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 {
|
||||
|
|
@ -8,7 +21,10 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%);
|
||||
background: var(--outer-background);
|
||||
}
|
||||
|
||||
html, body, input {
|
||||
/* Pick a font.
|
||||
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,
|
||||
|
|
@ -29,8 +45,7 @@ body {
|
|||
body {
|
||||
/* These stay, assuming some browsers pick different defaults */
|
||||
font-size: 100%;
|
||||
background-color: #eeeefa;
|
||||
color: #000;
|
||||
background-color: var(--main-background);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -97,7 +112,7 @@ div.sphinxsidebar ul ul, div.sphinxsidebar ul.want-points {
|
|||
div.sphinxsidebar ul {
|
||||
margin: 10px;
|
||||
padding: 0;
|
||||
color: #444444;
|
||||
color: var(--secondary-link-color);
|
||||
margin: 10px;
|
||||
list-style: none;
|
||||
}
|
||||
|
|
@ -132,7 +147,7 @@ div.sphinxsidebar h3 {
|
|||
}
|
||||
|
||||
div.sphinxsidebar h4 {
|
||||
color: #444444;
|
||||
color: var(--secondary-link-color);
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
margin: 5px 0 0 0;
|
||||
|
|
@ -162,7 +177,7 @@ a:hover, div.footer a {
|
|||
}
|
||||
|
||||
div.related a, div.sphinxsidebar a {
|
||||
color: #444444;
|
||||
color: var(--secondary-link-color);
|
||||
}
|
||||
|
||||
div.warning {
|
||||
|
|
@ -192,10 +207,6 @@ div.footer {
|
|||
font-size: 75%;
|
||||
}
|
||||
|
||||
th, dl.field-list > dt {
|
||||
background-color: #ede;
|
||||
}
|
||||
|
||||
table.docutils {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
|
@ -212,9 +223,9 @@ th > :first-child, td > :first-child {
|
|||
/* End of SPHINX IMPORT */
|
||||
|
||||
div#fmain {
|
||||
color: #222;
|
||||
color: var(--text-color);
|
||||
padding: 1em 2em;
|
||||
background-color: #EEEEFA;
|
||||
background-color: var(--main-background);
|
||||
border-radius: 14px;
|
||||
position: relative;
|
||||
margin: 1em auto 1em;
|
||||
|
|
@ -227,7 +238,8 @@ div#fmain {
|
|||
div.related {
|
||||
margin-bottom: 0;
|
||||
padding: 0.5em 0;
|
||||
border-top: 1px solid #ccc;
|
||||
border-top: 1px solid;
|
||||
border-color: var(--sidebar-border-color);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
|
@ -243,15 +255,10 @@ div.section {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
div.related a:hover,
|
||||
div.footer a:hover,
|
||||
div.sphinxsidebar a:hover {
|
||||
color: #0095C4;
|
||||
}
|
||||
|
||||
div.related:first-child {
|
||||
border-top: 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-bottom: 1px solid;
|
||||
border-color: var(--sidebar-border-color);
|
||||
}
|
||||
|
||||
.inline-search {
|
||||
|
|
@ -265,7 +272,8 @@ form.inline-search input[type="submit"] {
|
|||
}
|
||||
|
||||
div.sphinxsidebar {
|
||||
border-right: 1px solid #ccc;
|
||||
border-right: 1px solid;
|
||||
border-color: var(--sidebar-border-color);
|
||||
border-radius: 0px;
|
||||
line-height: 1em;
|
||||
font-size: smaller;
|
||||
|
|
@ -331,7 +339,8 @@ ul li dd {
|
|||
|
||||
form.inline-search input,
|
||||
div.sphinxsidebar input {
|
||||
border: 1px solid #999999;
|
||||
border: 1px solid;
|
||||
border-color: var(--sidebar-border-color);
|
||||
font-size: smaller;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
|
@ -370,7 +379,8 @@ div.body hr {
|
|||
|
||||
div.body pre, code {
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ac9;
|
||||
border: 1px solid;
|
||||
border-color: var(--code-border);
|
||||
}
|
||||
|
||||
div.highlight {
|
||||
|
|
@ -405,28 +415,31 @@ div.body div.seealso {
|
|||
border: 1px solid #dddd66;
|
||||
}
|
||||
|
||||
div.body a {
|
||||
color: #0072aa;
|
||||
a {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
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 {
|
||||
color: #00B0E4;
|
||||
color: var(--hover-link-color);
|
||||
}
|
||||
|
||||
code {
|
||||
/* Make inline-code better visible */
|
||||
background-color: rgba(20,20,80, .1);
|
||||
background-color: var(--code-background);
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
margin-left: 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.
|
||||
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!),
|
||||
|
|
@ -473,7 +486,8 @@ div.body tt.xref, div.body a tt, div.body code.xref, div.body a code {
|
|||
}
|
||||
|
||||
table.docutils {
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid;
|
||||
border-color: var(--sidebar-border-color);
|
||||
min-width: 20%;
|
||||
border-radius: 3px;
|
||||
margin-top: 1em;
|
||||
|
|
@ -484,7 +498,8 @@ table.docutils {
|
|||
}
|
||||
|
||||
table.docutils td, table.docutils th {
|
||||
border: 1px solid #ddd !important;
|
||||
border: 1px solid;
|
||||
border-color: var(--sidebar-border-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -492,13 +507,13 @@ table p, table li {
|
|||
text-align: left !important;
|
||||
}
|
||||
|
||||
table.docutils th {
|
||||
background-color: #eee;
|
||||
th {
|
||||
background-color: var(--secondary-background);
|
||||
padding: 0.3em 0.5em;
|
||||
}
|
||||
|
||||
table.docutils td {
|
||||
background-color: white;
|
||||
background-color: var(--td-background);
|
||||
padding: 0.3em 0.5em;
|
||||
}
|
||||
|
||||
|
|
@ -514,16 +529,8 @@ div.footer {
|
|||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.refcount {
|
||||
color: #060;
|
||||
}
|
||||
|
||||
.stableabi {
|
||||
color: #229;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: #FFF;
|
||||
background: var(--highlight-background);
|
||||
}
|
||||
|
||||
#synopsis p {
|
||||
|
|
@ -625,11 +632,10 @@ div.documentwrapper {
|
|||
.prompt { color: #8f7902; }
|
||||
|
||||
kbd {
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #aaa;
|
||||
background-color: var(--td-background);
|
||||
border: 1px solid;
|
||||
border-color: var(--sidebar-border-color);
|
||||
border-radius: .2em;
|
||||
box-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.1);
|
||||
color: #000;
|
||||
padding: 0.1em 0.3em;
|
||||
}
|
||||
|
||||
|
|
@ -641,91 +647,38 @@ div.body .internal.reference:link {
|
|||
content: "$";
|
||||
}
|
||||
.footnote, .footnote-reference {
|
||||
background-color: #ddddea;
|
||||
background-color: var(--secondary-background);
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background: linear-gradient(to top, #1f1f3f 0%,#051f3a 100%);
|
||||
:root {
|
||||
--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 {
|
||||
color: #DDD;
|
||||
background-color: #202028;
|
||||
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 {
|
||||
background-color: #111;
|
||||
border: 1px solid #444;
|
||||
box-shadow: 0.1em 0.1em 0.2em rgba(100,100,100,0.1);
|
||||
color: #FFF;
|
||||
}
|
||||
table.docutils th {
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
table.docutils td {
|
||||
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. */
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,19 @@
|
|||
.highlight .hll { background-color: #ffffcc }
|
||||
.highlight .err { color: #a40000; border: 1px solid #ef2929 } /* Error */
|
||||
.highlight .k { color: #204a87; font-weight: bold } /* Keyword */
|
||||
.highlight .o { color: #00a6b2; } /* Operator */
|
||||
.highlight .p { color: #00bfff; } /* Punctuation */
|
||||
.highlight .c { color: #777; font-style: italic; } /* Comment */
|
||||
.highlight .ch { color: #8f7902; font-style: italic } /* Comment.Hashbang */
|
||||
.highlight .cm { color: #8f7902; font-style: italic } /* Comment.Multiline */
|
||||
.highlight .cp { color: #8f7902; font-style: italic } /* Comment.Preproc */
|
||||
.highlight .cpf { color: #8f7902; font-style: italic } /* Comment.PreprocFile */
|
||||
.highlight .c1 { color: #8f7902; font-style: italic } /* Comment.Single */
|
||||
.highlight .cs { color: #8f7902; font-style: italic } /* Comment.Special */
|
||||
.highlight .o { color: #005F66; } /* Operator */
|
||||
.highlight .p { color: #000f8f; } /* Punctuation */
|
||||
.highlight .c { color: #575757; font-style: italic; } /* Comment */
|
||||
.highlight .ch { color: #645502; font-style: italic } /* Comment.Hashbang */
|
||||
.highlight .cm { color: #645502; font-style: italic } /* Comment.Multiline */
|
||||
.highlight .cp { color: #645502; font-style: italic } /* Comment.Preproc */
|
||||
.highlight .cpf { color: #645502; font-style: italic } /* Comment.PreprocFile */
|
||||
.highlight .c1 { color: #645502; font-style: italic } /* Comment.Single */
|
||||
.highlight .cs { color: #645502; font-style: italic } /* Comment.Special */
|
||||
.highlight .gd { color: #a40000 } /* Generic.Deleted */
|
||||
.highlight .gr { color: #ef2929 } /* Generic.Error */
|
||||
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
|
||||
.highlight .gi { color: #00A000 } /* Generic.Inserted */
|
||||
.highlight .gp { color: #8f7902 } /* Generic.Prompt */
|
||||
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
|
||||
.highlight .gt { color: #a40000; font-weight: bold } /* Generic.Traceback */
|
||||
.highlight .kc { color: #204a87; font-weight: bold } /* Keyword.Constant */
|
||||
|
|
@ -24,15 +23,15 @@
|
|||
.highlight .kr { color: #204a87; font-weight: bold } /* Keyword.Reserved */
|
||||
.highlight .kt { color: #204a87; font-weight: bold } /* Keyword.Type */
|
||||
.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 .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 .ni { color: #ce5c00 } /* Name.Entity */
|
||||
.highlight .ne { color: #cc0000; font-weight: bold } /* Name.Exception */
|
||||
.highlight .nf { color: #005fd7 } /* Name.Function */
|
||||
.highlight .nl { color: #f57900 } /* Name.Label */
|
||||
.highlight .nf { color: #004BCC; } /* Name.Function */
|
||||
.highlight .nl { color: #f57900; } /* Name.Label */
|
||||
.highlight .nt { color: #204a87; font-weight: bold } /* Name.Tag */
|
||||
.highlight .ow { color: #204a87; font-weight: bold } /* Operator.Word */
|
||||
.highlight .w { color: #f8f8f8; } /* Text.Whitespace */
|
||||
|
|
@ -46,13 +45,13 @@
|
|||
.highlight .sc { color: #4e9a06 } /* Literal.String.Char */
|
||||
.highlight .dl { color: #4e9a06 } /* Literal.String.Delimiter */
|
||||
.highlight .sd { color: #8f7902; font-style: italic } /* Literal.String.Doc */
|
||||
.highlight .s2 { color: #4daf08 } /* Literal.String.Double */
|
||||
.highlight .se { color: #00a6b2 } /* Literal.String.Escape */
|
||||
.highlight .s2 { color: #2E6506 } /* Literal.String.Double */
|
||||
.highlight .se { color: #800400 } /* Literal.String.Escape */
|
||||
.highlight .sh { color: #4e9a06 } /* Literal.String.Heredoc */
|
||||
.highlight .si { color: #4e9a06 } /* Literal.String.Interpol */
|
||||
.highlight .sx { color: #4e9a06 } /* Literal.String.Other */
|
||||
.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 .bp { color: #3465a4 } /* Name.Builtin.Pseudo */
|
||||
.highlight .il { color: #0000cf; font-weight: bold } /* Literal.Number.Integer.Long */
|
||||
|
|
@ -66,12 +65,26 @@
|
|||
:root {
|
||||
--contrast: #FFFFFF;
|
||||
}
|
||||
.highlight .k { color: #507a97; font-weight: bold } /* Keyword */
|
||||
.highlight .nf { color: #008fd7 } /* Name.Function */
|
||||
.highlight .nb { color: #209a87 } /* Name.Builtin */
|
||||
.highlight .no { color: #00bfff } /* Name.Constant */
|
||||
.highlight .p { color: #00bfff; } /* Punctuation */
|
||||
.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 .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 .gp { color: var(--contrast) } /* Generic.Prompt */
|
||||
.highlight .l { color: var(--contrast) } /* Literal */
|
||||
.highlight .n { color: var(--contrast) } /* Name */
|
||||
.highlight .x { color: var(--contrast) } /* Other */
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user