Add styles for non-white themes

Tweak colors

Tabs

New link heading style

Author: willcrichton

src/librustdoc/html/render/mod.rs

@@ -2482,16 +2482,6 @@ fn render_call_locations(
         id
     );
 
-    // Link to the source file containing a given example
-    let example_url = |call_data: &CallData| -> String {
-        format!(
-            r#"<a href="{root}{url}" target="_blank">{name}</a>"#,
-            root = cx.root_path(),
-            url = call_data.url,
-            name = call_data.display_name
-        )
-    };
-
     // Generate the HTML for a single example, being the title and code block
     let tcx = cx.tcx();
     let write_example = |w: &mut Buffer, (path, call_data): (&PathBuf, &CallData)| -> bool {
@@ -2534,9 +2524,13 @@ fn render_call_locations(
         write!(
             w,
             r#"<div class="scraped-example" data-locs="{locations}">
-                <div class="scraped-example-title">{title}</div>
-                 <div class="code-wrapper">"#,
-            title = example_url(call_data),
+                <div class="scraped-example-title">
+                   {name} <a href="{root}{url}" target="_blank">[src]</a>
+                </div>
+                <div class="code-wrapper">"#,
+            root = cx.root_path(),
+            url = call_data.url,
+            name = call_data.display_name,
             // The locations are encoded as a data attribute, so they can be read
             // later by the JS for interactions.
             locations = serde_json::to_string(&line_ranges).unwrap(),
@@ -2639,7 +2633,13 @@ fn render_call_locations(
                 r#"<div class="example-links">Additional examples can be found in:<br /><ul>"#
             );
             it.for_each(|(_, call_data)| {
-                write!(w, "<li>{}</li>", example_url(call_data));
+                write!(
+                    w,
+                    r#"<li><a href="{}{}" target="_blank">{}</a></li>"#,
+                    root = cx.root_path(),
+                    url = call_data.url,
+                    name = call_data.display_name
+                );
             });
             write!(w, "</ul></div>");
         }

src/librustdoc/html/static/css/rustdoc.css

@@ -1976,7 +1976,10 @@ details.undocumented[open] > summary::before {
 
 .scraped-example-title {
 	font-family: 'Fira Sans';
-	font-weight: 500;
+}
+
+.scraped-example-title a {
+	margin-left: 5px;
 }
 
 .scraped-example:not(.expanded) .code-wrapper pre.line-numbers,
@@ -2115,7 +2118,12 @@ h1 + .scraped-example {
 	margin-bottom: 20px;
 }
 
+.more-scraped-examples .scraped-example:last-child {
+	margin-bottom: 0;
+}
+
 .example-links a {
+	margin-top: 20px;
 	font-family: 'Fira Sans';
 }
 

src/librustdoc/html/static/css/themes/ayu.css

@@ -613,3 +613,22 @@ div.files > .selected {
 input:checked + .slider {
 	background-color: #ffb454 !important;
 }
+
+.scraped-example .example-wrap .rust span.highlight {
+	background: rgb(91, 59, 1);
+}
+.scraped-example .example-wrap .rust span.highlight.focus {
+	background: rgb(124, 75, 15);
+}
+.scraped-example:not(.expanded) .code-wrapper:before {
+	background: linear-gradient(to bottom, rgba(15, 20, 25, 1), rgba(15, 20, 25, 0));
+}
+.scraped-example:not(.expanded) .code-wrapper:after {
+	background: linear-gradient(to top, rgba(15, 20, 25, 1), rgba(15, 20, 25, 0));
+}
+.toggle-line-inner {
+	background: #616161;
+}
+.toggle-line:hover .toggle-line-inner {
+	background: ##898989;
+}

src/librustdoc/html/static/css/themes/dark.css

@@ -485,3 +485,22 @@ div.files > .selected {
 .setting-line > .title {
 	border-bottom-color: #ddd;
 }
+
+.scraped-example .example-wrap .rust span.highlight {
+	background: rgb(91, 59, 1);
+}
+.scraped-example .example-wrap .rust span.highlight.focus {
+	background: rgb(124, 75, 15);
+}
+.scraped-example:not(.expanded) .code-wrapper:before {
+	background: linear-gradient(to bottom, rgba(53, 53, 53, 1), rgba(53, 53, 53, 0));
+}
+.scraped-example:not(.expanded) .code-wrapper:after {
+	background: linear-gradient(to top, rgba(53, 53, 53, 1), rgba(53, 53, 53, 0));
+}
+.toggle-line-inner {
+	background: #616161;
+}
+.toggle-line:hover .toggle-line-inner {
+	background: ##898989;
+}