Skip to content

Commit

Permalink
Rollup merge of #99152 - GuillaumeGomez:css-theme-var, r=jsha
Browse files Browse the repository at this point in the history 
Use CSS variables to handle theming (part 2)

Follow-up of #98460.

As usual, there shouldn't be any UI change.

You can test it [here](https://rustdoc.crud.net/imperio/css-theme-var/bar/index.html).

r? `@jsha`
  • Loading branch information
@GuillaumeGomez
GuillaumeGomez committed Jul 13, 2022
2 parents 41eb8dd + 20b5c73 commit 3b30cce
Show file tree
Hide file tree
Showing 4 changed files with 45 additions and 163 deletions.
29 changes: 29 additions & 0 deletions src/librustdoc/html/static/css/rustdoc.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 */
Expand All @@ -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 */
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down
58 changes: 5 additions & 53 deletions src/librustdoc/html/static/css/themes/ayu.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
}
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
}
Expand Down Expand Up @@ -496,21 +460,9 @@ a.result-keyword:focus {}
.sidebar a.current.keyword {}

@media (max-width: 700px) {
.sidebar-menu {
background-color: #14191f;
border-bottom-color: #5c6773;
border-right-color: #5c6773;
}

.sidebar-elems {
background-color: #14191f;
border-right-color: #5c6773;
}

#sidebar-filler {
background-color: #14191f;
border-bottom-color: #5c6773;
}
}

kbd {
Expand Down
59 changes: 6 additions & 53 deletions src/librustdoc/html/static/css/themes/dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -16,57 +21,17 @@ 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)
drop-shadow(-1px 0 0 #fff)
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;
Expand Down Expand Up @@ -356,21 +321,9 @@ pre.ignore:hover, .information:hover + pre.ignore {
}

@media (max-width: 700px) {
.sidebar-menu {
background-color: #505050;
border-bottom-color: #e0e0e0;
border-right-color: #e0e0e0;
}

.sidebar-elems {
background-color: #505050;
border-right-color: #000;
}

#sidebar-filler {
background-color: #505050;
border-bottom-color: #e0e0e0;
}
}

kbd {
Expand Down
62 changes: 5 additions & 57 deletions src/librustdoc/html/static/css/themes/light.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
}
Expand Down Expand Up @@ -339,21 +299,9 @@ pre.ignore:hover, .information:hover + pre.ignore {
}

@media (max-width: 700px) {
.sidebar-menu {
background-color: #F5F5F5;
border-bottom-color: #e0e0e0;
border-right-color: #e0e0e0;
}

.sidebar-elems {
background-color: #F5F5F5;
border-right-color: #000;
}

#sidebar-filler {
background-color: #F5F5F5;
border-bottom-color: #e0e0e0;
}
}

kbd {
Expand Down

0 comments on commit 3b30cce

Please sign in to comment.