From 20b5c739d1ad003d4ab39f6cc465a90492049839 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Mon, 11 Jul 2022 14:51:39 +0200 Subject: [PATCH] Continue themes CSS migration over CSS variables --- src/librustdoc/html/static/css/rustdoc.css | 29 +++++++++++ src/librustdoc/html/static/css/themes/ayu.css | 47 ++--------------- .../html/static/css/themes/dark.css | 48 +++-------------- .../html/static/css/themes/light.css | 51 ++----------------- 4 files changed, 45 insertions(+), 130 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 5c7b56ec140b5..e8f069cdbfe0c 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -141,6 +141,10 @@ h1, h2, h3, h4 { h1.fqn { margin: 0; padding: 0; + border-bottom-color: var(--headings-border-bottom-color); +} +h2, h3, h4 { + border-bottom-color: var(--headings-border-bottom-color); } .main-heading { display: flex; @@ -377,6 +381,10 @@ nav.sub { object-fit: contain; } +.sidebar, .mobile-topbar, .sidebar-menu-toggle { + background-color: var(--sidebar-background-color); +} + .sidebar { font-size: 0.875rem; width: 250px; @@ -443,9 +451,11 @@ nav.sub { /* Improve the scrollbar display on firefox */ * { scrollbar-width: initial; + scrollbar-color: var(--scrollbar-color); } .sidebar { scrollbar-width: thin; + scrollbar-color: var(--scrollbar-color); } /* Improve the scrollbar display on webkit-based browsers */ @@ -457,6 +467,13 @@ nav.sub { } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0; + background-color: var(--scrollbar-track-background-color); +} +.sidebar::-webkit-scrollbar-track { + background-color: var(--scrollbar-track-background-color); +} +::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-thumb-background-color); } /* Everything else */ @@ -637,6 +654,9 @@ h2.location a { .docblock h5 { font-size: 1rem; } .docblock h6 { font-size: 0.875rem; } +.docblock h1, .docblock h2, .docblock h3, .docblock h4, .docblock h5, .docblock h6 { + border-bottom-color: var(--headings-border-bottom-color); +} .docblock { margin-left: 24px; @@ -672,6 +692,11 @@ h2.location a { display: inline-block; } +.docblock code, .docblock-short code, +pre, .rustdoc.source .example-wrap { + background-color: var(--code-block-background-color); +} + #main-content { position: relative; } @@ -1914,6 +1939,10 @@ in storage.js plus the media query with (min-width: 701px) border: none; } + .sidebar-elems { + background-color: var(--sidebar-background-color); + } + .source nav:not(.sidebar).sub { margin-left: 32px; } diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css index d834a957dd504..73d18df76561b 100644 --- a/src/librustdoc/html/static/css/themes/ayu.css +++ b/src/librustdoc/html/static/css/themes/ayu.css @@ -9,6 +9,11 @@ Original by Dempfi (https://github.com/dempfi/ayu) --settings-input-color: #ffb454; --sidebar-background-color: #14191f; --sidebar-background-color-hover: rgba(70, 70, 70, 0.33); + --code-block-background-color: #191f26; + --scrollbar-track-background-color: transparent; + --scrollbar-thumb-background-color: #5c6773; + --scrollbar-color: #5c6773 #24292f; + --headings-border-bottom-color: #5c6773; } .slider { @@ -24,15 +29,9 @@ input:focus + .slider { h1, h2, h3, h4 { color: white; } -h1.fqn { - border-bottom-color: #5c6773; -} h1.fqn a { color: #fff; } -h2, h3, h4 { - border-bottom-color: #5c6773; -} h4 { border: none; } @@ -56,16 +55,8 @@ span code { .docblock a > code { color: #39AFD7 !important; } -.docblock code, .docblock-short code { - background-color: #191f26; -} pre, .rustdoc.source .example-wrap { color: #e6e1cf; - background-color: #191f26; -} - -.sidebar, .mobile-topbar, .sidebar-menu-toggle { - background-color: #14191f; } .rust-logo { @@ -75,29 +66,6 @@ pre, .rustdoc.source .example-wrap { drop-shadow(0 -1px 0 #fff); } -/* Improve the scrollbar display on firefox */ -* { - scrollbar-color: #5c6773 #24292f; -} - -.sidebar { - scrollbar-color: #5c6773 #24292f; -} - -/* Improve the scrollbar display on webkit-based browsers */ -::-webkit-scrollbar-track { - background-color: transparent; -} -::-webkit-scrollbar-thumb { - background-color: #5c6773; -} -.sidebar::-webkit-scrollbar-track { - background-color: transparent; -} -.sidebar::-webkit-scrollbar-thumb { - background-color: #5c6773; -} - .sidebar .current, .sidebar a:hover { background-color: transparent; @@ -116,10 +84,6 @@ pre, .rustdoc.source .example-wrap { border-right: 1px solid #ffb44c; } -.docblock h1, .docblock h2, .docblock h3, .docblock h4, .docblock h5, .docblock h6 { - border-bottom-color: #5c6773; -} - .docblock table td, .docblock table th { border-color: #5c6773; } @@ -497,7 +461,6 @@ a.result-keyword:focus {} @media (max-width: 700px) { .sidebar-elems { - background-color: #14191f; border-right-color: #5c6773; } } diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css index 6ad73f309ea10..93dca51307f58 100644 --- a/src/librustdoc/html/static/css/themes/dark.css +++ b/src/librustdoc/html/static/css/themes/dark.css @@ -2,8 +2,13 @@ --main-background-color: #353535; --main-color: #ddd; --settings-input-color: #2196f3; - --sidebar-background-color: #565656; + --sidebar-background-color: #505050; --sidebar-background-color-hover: #676767; + --code-block-background-color: #2A2A2A; + --scrollbar-track-background-color: #717171; + --scrollbar-thumb-background-color: rgba(32, 34, 37, .6); + --scrollbar-color: rgba(32,34,37,.6) #5a5a5a; + --headings-border-bottom-color: #d2d2d2; } .slider { @@ -16,28 +21,10 @@ input:focus + .slider { box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3); } -h1.fqn { - border-bottom-color: #d2d2d2; -} -h2, h3, h4 { - border-bottom-color: #d2d2d2; -} - .in-band { background-color: #353535; } -.docblock code, .docblock-short code { - background-color: #2A2A2A; -} -pre, .rustdoc.source .example-wrap { - background-color: #2A2A2A; -} - -.sidebar, .mobile-topbar, .sidebar-menu-toggle { - background-color: #505050; -} - .rust-logo { filter: drop-shadow(1px 0 0px #fff) drop-shadow(0 1px 0 #fff) @@ -45,28 +32,6 @@ pre, .rustdoc.source .example-wrap { drop-shadow(0 -1px 0 #fff) } -/* Improve the scrollbar display on firefox */ -* { - scrollbar-color: rgb(64, 65, 67) #717171; -} -.sidebar { - scrollbar-color: rgba(32,34,37,.6) #5a5a5a; -} - -/* Improve the scrollbar display on webkit-based browsers */ -::-webkit-scrollbar-track { - background-color: #717171; -} -::-webkit-scrollbar-thumb { - background-color: rgba(32, 34, 37, .6); -} -.sidebar::-webkit-scrollbar-track { - background-color: #717171; -} -.sidebar::-webkit-scrollbar-thumb { - background-color: rgba(32, 34, 37, .6); -} - .sidebar .current, .sidebar a:hover { background: #444; @@ -357,7 +322,6 @@ pre.ignore:hover, .information:hover + pre.ignore { @media (max-width: 700px) { .sidebar-elems { - background-color: #505050; border-right-color: #000; } } diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css index 1efc9d3c4fa59..73731bc8f9ff3 100644 --- a/src/librustdoc/html/static/css/themes/light.css +++ b/src/librustdoc/html/static/css/themes/light.css @@ -4,6 +4,11 @@ --settings-input-color: #2196f3; --sidebar-background-color: #F5F5F5; --sidebar-background-color-hover: #E0E0E0; + --code-block-background-color: #F5F5F5; + --scrollbar-track-background-color: #dcdcdc; + --scrollbar-thumb-background-color: rgba(36, 37, 39, 0.6); + --scrollbar-color: rgba(36, 37, 39, 0.6) #d9d9d9; + --headings-border-bottom-color: #ddd; } .slider { @@ -16,57 +21,16 @@ input:focus + .slider { box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3); } -h1.fqn { - border-bottom-color: #DDDDDD; -} -h2, h3, h4 { - border-bottom-color: #DDDDDD; -} - .in-band { background-color: white; } -.docblock code, .docblock-short code { - background-color: #F5F5F5; -} -pre, .rustdoc.source .example-wrap { - background-color: #F5F5F5; -} - -.sidebar, .mobile-topbar, .sidebar-menu-toggle { - background-color: #F5F5F5; -} - -/* Improve the scrollbar display on firefox */ -* { - scrollbar-color: rgba(36, 37, 39, 0.6) #e6e6e6; -} - -.sidebar { - scrollbar-color: rgba(36, 37, 39, 0.6) #d9d9d9; -} - .rust-logo { /* This rule exists to force other themes to explicitly style the logo. * Rustdoc has a custom linter for this purpose. */ } -/* Improve the scrollbar display on webkit-based browsers */ -::-webkit-scrollbar-track { - background-color: #ecebeb; -} -::-webkit-scrollbar-thumb { - background-color: rgba(36, 37, 39, 0.6); -} -.sidebar::-webkit-scrollbar-track { - background-color: #dcdcdc; -} -.sidebar::-webkit-scrollbar-thumb { - background-color: rgba(36, 37, 39, 0.6); -} - .sidebar .current, .sidebar a:hover { background-color: #fff; @@ -77,10 +41,6 @@ pre, .rustdoc.source .example-wrap { background-color: #FDFFD3 !important; } -.docblock h1, .docblock h2, .docblock h3, .docblock h4, .docblock h5, .docblock h6 { - border-bottom-color: #ddd; -} - .docblock table td, .docblock table th { border-color: #ddd; } @@ -340,7 +300,6 @@ pre.ignore:hover, .information:hover + pre.ignore { @media (max-width: 700px) { .sidebar-elems { - background-color: #F5F5F5; border-right-color: #000; } }