From 7f6ce7dddd49f453da15bb4d586a5990985814d8 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Fri, 24 Jun 2022 17:03:04 +0200 Subject: [PATCH] Simplify CSS theming by setting CSS variables --- src/librustdoc/html/static/css/rustdoc.css | 55 +++++++++++++ src/librustdoc/html/static/css/themes/ayu.css | 63 ++------------- .../html/static/css/themes/dark.css | 76 ++---------------- .../html/static/css/themes/light.css | 78 ++----------------- 4 files changed, 73 insertions(+), 199 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index a4d0b588abba7..4737a8b463901 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -114,6 +114,9 @@ body { -webkit-font-feature-settings: "kern", "liga"; -moz-font-feature-settings: "kern", "liga"; font-feature-settings: "kern", "liga"; + + background-color: var(--main-background-color); + color: var(--main-color); } h1 { @@ -214,6 +217,26 @@ a.srclink, font-family: "Fira Sans", Arial, NanumBarunGothic, sans-serif; } +h1, h2, h3, h4, +a#toggle-all-docs, +a.anchor, +.small-section-header a, +#source-sidebar a, +pre.rust a, +.sidebar h2 a, +.sidebar h3 a, +.mobile-topbar h2 a, +.in-band a, +.search-results a, +.module-item .stab, +.import-item .stab, +.result-name .primitive > i, .result-name .keyword > i, +.content .method .where, +.content .fn .where, +.content .where.fmt-newline { + color: var(--main-color); +} + ol, ul { padding-left: 24px; } @@ -391,6 +414,14 @@ nav.sub { display: none; } +.source .sidebar, #sidebar-toggle, #source-sidebar { + background-color: var(--sidebar-background-color); +} + +#sidebar-toggle:hover { + background-color: var(--sidebar-background-color-hover); +} + .source .sidebar > *:not(#sidebar-toggle) { opacity: 0; visibility: hidden; @@ -1003,6 +1034,11 @@ table, top: -5px; } +.popover, .popover::before { + background-color: var(--main-background-color); + color: var(--main-color); +} + #help-button .popover { max-width: 600px; } @@ -1423,6 +1459,25 @@ pre.rust { animation: rotating 2s linear infinite; } +.setting-line .radio-line input:checked { + box-shadow: inset 0 0 0 3px var(--main-background-color); + background-color: var(--settings-input-color); +} +.setting-line .radio-line input:focus { + box-shadow: 0 0 1px 1px var(--settings-input-color); +} +/* In here we combine both `:focus` and `:checked` properties. */ +.setting-line .radio-line input:checked:focus { + box-shadow: inset 0 0 0 3px var(--main-background-color), + 0 0 2px 2px var(--settings-input-color); +} +.setting-line .radio-line input:hover { + border-color: var(--settings-input-color) !important; +} +input:checked + .slider { + background-color: var(--settings-input-color); +} + #help-button > button { font-family: "Fira Sans", Arial, sans-serif; text-align: center; diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index d9a7883b10739..7756e877ef791 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -3,30 +3,12 @@ Based off of the Ayu theme Original by Dempfi (https://github.com/dempfi/ayu) */ -/* General structure and fonts */ - -body, .popover, .popover::before { - background-color: #0f1419; - color: #c5c5c5; -} - -.setting-line .radio-line input { - border-color: #c5c5c5; -} -.setting-line .radio-line input:checked { - box-shadow: inset 0 0 0 3px #0f1419; - background-color: #ffb454; -} -.setting-line .radio-line input:focus { - box-shadow: 0 0 1px 1px #ffb454; -} -/* In here we combine both `:focus` and `:checked` properties. */ -.setting-line .radio-line input:checked:focus { - box-shadow: inset 0 0 0 3px 0f1419, - 0 0 2px 2px #ffb454; -} -.setting-line .radio-line input:hover { - border-color: #ffb454 !important; +:root { + --main-background-color: #0f1419; + --main-color: #c5c5c5; + --settings-input-color: #ffb454; + --sidebar-background-color: #14191f; + --sidebar-background-color-hover: rgba(70, 70, 70, 0.33); } .slider { @@ -35,9 +17,6 @@ body, .popover, .popover::before { .slider:before { background-color: white; } -input:checked + .slider { - background-color: #ffb454; -} input:focus + .slider { box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3); } @@ -125,10 +104,6 @@ pre, .rustdoc.source .example-wrap { color: #ffb44c; } -.source .sidebar { - background-color: #14191f; -} - .sidebar-elems .location { color: #ff7733; } @@ -149,12 +124,6 @@ pre, .rustdoc.source .example-wrap { border-color: #5c6773; } -.content .method .where, -.content .fn .where, -.content .where.fmt-newline { - color: #c5c5c5; -} - .search-results a:hover { background-color: #777; } @@ -229,17 +198,6 @@ a { color: #39AFD7; } -a#toggle-all-docs, -a.anchor, -.small-section-header a, -#source-sidebar a, -pre.rust a, -.sidebar h2 a, -.sidebar h3 a, -.mobile-topbar h2 a, -.in-band a { - color: #c5c5c5; -} .sidebar h2 a, .sidebar h3 a { color: white; @@ -613,15 +571,6 @@ kbd { color: #999; } -#sidebar-toggle { - background-color: #14191f; -} -#sidebar-toggle:hover { - background-color: rgba(70, 70, 70, 0.33); -} -#source-sidebar { - background-color: #14191f; -} #source-sidebar > .title { color: #fff; border-bottom-color: #5c6773; diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index e444973691613..04d5778f59c6c 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -1,25 +1,9 @@ -body, .popover, .popover::before { - background-color: #353535; - color: #ddd; -} - -.setting-line .radio-line input { - border-color: #ddd; -} -.setting-line .radio-line input:checked { - box-shadow: inset 0 0 0 3px #353535; - background-color: #2196f3; -} -.setting-line .radio-line input:focus { - box-shadow: 0 0 1px 1px #2196f3; -} -/* In here we combine both `:focus` and `:checked` properties. */ -.setting-line .radio-line input:checked:focus { - box-shadow: inset 0 0 0 3px #353535, - 0 0 2px 2px #2196f3; -} -.setting-line .radio-line input:hover { - border-color: #2196f3 !important; +:root { + --main-background-color: #353535; + --main-color: #ddd; + --settings-input-color: #2196f3; + --sidebar-background-color: #565656; + --sidebar-background-color-hover: #676767; } .slider { @@ -28,16 +12,10 @@ body, .popover, .popover::before { .slider:before { background-color: white; } -input:checked + .slider { - background-color: #2196F3; -} input:focus + .slider { box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3); } -h1, h2, h3, h4 { - color: #ddd; -} h1.fqn { border-bottom-color: #d2d2d2; } @@ -94,10 +72,6 @@ pre, .rustdoc.source .example-wrap { background: #444; } -.source .sidebar { - background-color: #565656; -} - .line-numbers span { color: #3B91E2; } .line-numbers .line-highlighted { background-color: #0a042f !important; @@ -111,12 +85,6 @@ pre, .rustdoc.source .example-wrap { border-color: #ddd; } -.content .method .where, -.content .fn .where, -.content .where.fmt-newline { - color: #ddd; -} - .search-results a:hover { background-color: #777; } @@ -210,20 +178,6 @@ a { color: #D2991D; } -a#toggle-all-docs, -a.anchor, -.small-section-header a, -#source-sidebar a, -pre.rust a, -.sidebar h2 a, -.sidebar h3 a, -.mobile-topbar h2 a, -.in-band a { - color: #ddd; -} -.search-results a { - color: #ddd; -} a.test-arrow { color: #dedede; } @@ -257,11 +211,6 @@ details.undocumented > summary::before { border-color: #008dfd; } -.module-item .stab, -.import-item .stab { - color: #ddd; -} - .stab.empty-impl { background: #FFF5D6; border-color: #FFC600; color: #2f2f2f; } .stab.unstable { background: #FFF5D6; border-color: #FFC600; color: #2f2f2f; } .stab.deprecated { background: #ffc4c4; border-color: #db7b7b; color: #2f2f2f; } @@ -287,10 +236,6 @@ details.undocumented > summary::before { color: grey; } -.result-name .primitive > i, .result-name .keyword > i { - color: #ddd; -} - .line-numbers :target { background-color: transparent; } /* Code highlighting */ @@ -484,15 +429,6 @@ kbd { color: #ccc; } -#sidebar-toggle { - background-color: #565656; -} -#sidebar-toggle:hover { - background-color: #676767; -} -#source-sidebar { - background-color: #565656; -} #source-sidebar > .title { border-bottom-color: #ccc; } diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index c31b19cef6383..5310736037a73 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -1,27 +1,9 @@ -/* General structure and fonts */ - -body, .popover, .popover::before { - background-color: white; - color: black; -} - -.setting-line .radio-line input { - border-color: black; -} -.setting-line .radio-line input:checked { - box-shadow: inset 0 0 0 3px white; - background-color: #2196f3; -} -.setting-line .radio-line input:focus { - box-shadow: 0 0 1px 1px #2196f3; -} -/* In here we combine both `:focus` and `:checked` properties. */ -.setting-line .radio-line input:checked:focus { - box-shadow: inset 0 0 0 3px white, - 0 0 2px 2px #2196f3; -} -.setting-line .radio-line input:hover { - border-color: #2196f3 !important; +:root { + --main-background-color: white; + --main-color: black; + --settings-input-color: #2196f3; + --sidebar-background-color: #F5F5F5; + --sidebar-background-color-hover: #E0E0E0; } .slider { @@ -30,16 +12,10 @@ body, .popover, .popover::before { .slider:before { background-color: white; } -input:checked + .slider { - background-color: #2196F3; -} input:focus + .slider { box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3); } -h1, h2, h3, h4 { - color: black; -} h1.fqn { border-bottom-color: #DDDDDD; } @@ -96,10 +72,6 @@ pre, .rustdoc.source .example-wrap { background-color: #fff; } -.source .sidebar { - background-color: #f1f1f1; -} - .line-numbers span { color: #c67e2d; } .line-numbers .line-highlighted { background-color: #FDFFD3 !important; @@ -113,12 +85,6 @@ pre, .rustdoc.source .example-wrap { border-color: #ddd; } -.content .method .where, -.content .fn .where, -.content .where.fmt-newline { - color: #4E4C4C; -} - .search-results a:hover { background-color: #ddd; } @@ -209,20 +175,6 @@ a { color: #3873AD; } -a#toggle-all-docs, -a.anchor, -.small-section-header a, -#source-sidebar a, -pre.rust a, -.sidebar h2 a, -.sidebar h3 a, -.mobile-topbar h2 a, -.in-band a { - color: #000; -} -.search-results a { - color: initial; -} a.test-arrow { color: #f5f5f5; } @@ -246,11 +198,6 @@ details.undocumented > summary::before { border-color: #66afe9; } -.module-item .stab, -.import-item .stab { - color: #000; -} - .stab.empty-impl { background: #FFF5D6; border-color: #FFC600; } .stab.unstable { background: #FFF5D6; border-color: #FFC600; } .stab.deprecated { background: #ffc4c4; border-color: #db7b7b; } @@ -271,10 +218,6 @@ details.undocumented > summary::before { color: grey; } -.result-name .primitive > i, .result-name .keyword > i { - color: black; -} - .line-numbers :target { background-color: transparent; } /* Code highlighting */ @@ -468,15 +411,6 @@ kbd { color: #999; } -#sidebar-toggle { - background-color: #F5F5F5; -} -#sidebar-toggle:hover { - background-color: #E0E0E0; -} -#source-sidebar { - background-color: #F5F5F5; -} #source-sidebar > .title { border-bottom-color: #ccc; }