mirror of
https://github.com/rust-lang/rust.git
synced 2025-02-04 19:12:50 +00:00
Add possibility to have multiple themes
This commit is contained in:
Guillaume Gomez
parent
3001ab10b9
commit
003b2bc1c6
@ -47,8 +47,8 @@ r##"<!DOCTYPE html>
|
||||
<title>{title}</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{root_path}normalize.css">
|
||||
<link rel="stylesheet" type="text/css" href="{root_path}rustdoc.css">
|
||||
<link rel="stylesheet" type="text/css" href="{root_path}main.css">
|
||||
<link rel="stylesheet" type="text/css" href="{root_path}rustdoc.css" id="mainThemeStyle">
|
||||
<link rel="stylesheet" type="text/css" href="{root_path}main.css" id="themeStyle">
|
||||
{css_extension}
|
||||
|
||||
{favicon}
|
||||
@ -70,6 +70,10 @@ r##"<!DOCTYPE html>
|
||||
{sidebar}
|
||||
</nav>
|
||||
|
||||
<div id="theme-picker">🖌
|
||||
<div id="theme-choices"></div>
|
||||
</div>
|
||||
<script src="{root_path}theme.js"></script>
|
||||
<nav class="sub">
|
||||
<form class="search-form js-only">
|
||||
<div class="search-container">
|
||||
|
||||
@ -219,6 +219,17 @@ impl Error {
|
||||
}
|
||||
}
|
||||
|
||||
macro_rules! try_none {
|
||||
($e:expr, $file:expr) => ({
|
||||
use std::io;
|
||||
match $e {
|
||||
Some(e) => e,
|
||||
None => return Err(Error::new(io::Error::new(io::ErrorKind::Other, "not found"),
|
||||
$file))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
macro_rules! try_err {
|
||||
($e:expr, $file:expr) => ({
|
||||
match $e {
|
||||
@ -859,12 +870,75 @@ fn write_shared(cx: &Context,
|
||||
// Add all the static files. These may already exist, but we just
|
||||
// overwrite them anyway to make sure that they're fresh and up-to-date.
|
||||
|
||||
write(cx.dst.join("main.js"),
|
||||
include_bytes!("static/main.js"))?;
|
||||
write(cx.dst.join("rustdoc.css"),
|
||||
include_bytes!("static/rustdoc.css"))?;
|
||||
write(cx.dst.join("main.css"),
|
||||
include_bytes!("static/styles/main.css"))?;
|
||||
let path = cx.shared.src_root.join("../librustdoc/html/static/themes");
|
||||
let mut themes: Vec<String> = Vec::new();
|
||||
for entry in try_err!(fs::read_dir(path.clone()), &path) {
|
||||
let entry = try_err!(entry, &path);
|
||||
let mut content = Vec::with_capacity(100000);
|
||||
|
||||
let mut f = try_err!(File::open(entry.path()), &entry.path());
|
||||
try_err!(f.read_to_end(&mut content), &entry.path());
|
||||
write(cx.dst.join(entry.file_name()), content.as_slice())?;
|
||||
themes.push(try_none!(
|
||||
try_none!(entry.path().file_stem(), &entry.path()).to_str(),
|
||||
&entry.path()).to_owned());
|
||||
}
|
||||
themes.sort();
|
||||
// To avoid theme switch latencies as much as possible, we put everything theme related
|
||||
// at the beginning of the html files into another js file.
|
||||
write(cx.dst.join("theme.js"), format!(
|
||||
r#"var themes = document.getElementById("theme-choices");
|
||||
var themePicker = document.getElementById("theme-picker");
|
||||
themePicker.onclick = function() {{
|
||||
if (themes.style.display === "block") {{
|
||||
themes.style.display = "none";
|
||||
themePicker.style.borderBottomRightRadius = "3px";
|
||||
themePicker.style.borderBottomLeftRadius = "3px";
|
||||
}} else {{
|
||||
themes.style.display = "block";
|
||||
themePicker.style.borderBottomRightRadius = "0";
|
||||
themePicker.style.borderBottomLeftRadius = "0";
|
||||
}}
|
||||
}};
|
||||
var currentTheme = document.getElementById("themeStyle");
|
||||
var mainTheme = document.getElementById("mainThemeStyle");
|
||||
[{}].forEach(function(item) {{
|
||||
var div = document.createElement('div');
|
||||
div.innerHTML = item;
|
||||
div.onclick = function(el) {{
|
||||
switchTheme(currentTheme, mainTheme, item);
|
||||
}};
|
||||
themes.appendChild(div);
|
||||
}});
|
||||
|
||||
function updateLocalStorage(theme) {{
|
||||
if (typeof(Storage) !== "undefined") {{
|
||||
localStorage.theme = theme;
|
||||
}} else {{
|
||||
// No Web Storage support so we do nothing
|
||||
}}
|
||||
}}
|
||||
function switchTheme(styleElem, mainStyleElem, newTheme) {{
|
||||
styleElem.href = mainStyleElem.href.replace("rustdoc.css", newTheme + ".css");
|
||||
updateLocalStorage(newTheme);
|
||||
}}
|
||||
function getCurrentTheme() {{
|
||||
if (typeof(Storage) !== "undefined" && localStorage.theme !== undefined) {{
|
||||
return localStorage.theme;
|
||||
}}
|
||||
return "main";
|
||||
}}
|
||||
|
||||
switchTheme(currentTheme, mainTheme, getCurrentTheme());
|
||||
"#, themes.iter()
|
||||
.map(|s| format!("\"{}\"", s))
|
||||
.collect::<Vec<String>>()
|
||||
.join(",")).as_bytes())?;
|
||||
|
||||
write(cx.dst.join("main.js"), include_bytes!("static/main.js"))?;
|
||||
|
||||
if let Some(ref css) = cx.shared.css_file_extension {
|
||||
let out = cx.dst.join("theme.css");
|
||||
try_err!(fs::copy(css, out), css);
|
||||
|
||||
@ -122,6 +122,10 @@
|
||||
}
|
||||
}
|
||||
document.getElementsByTagName("body")[0].style.marginTop = '45px';
|
||||
var themePicker = document.getElementById("theme-picker");
|
||||
if (themePicker) {
|
||||
themePicker.style.position = "fixed";
|
||||
}
|
||||
}
|
||||
|
||||
function hideSidebar() {
|
||||
@ -136,6 +140,10 @@
|
||||
filler.remove();
|
||||
}
|
||||
document.getElementsByTagName("body")[0].style.marginTop = '';
|
||||
var themePicker = document.getElementById("theme-picker");
|
||||
if (themePicker) {
|
||||
themePicker.style.position = "absolute";
|
||||
}
|
||||
}
|
||||
|
||||
// used for special search precedence
|
||||
@ -1532,7 +1540,9 @@
|
||||
ul.appendChild(li);
|
||||
}
|
||||
div.appendChild(ul);
|
||||
sidebar.appendChild(div);
|
||||
if (sidebar) {
|
||||
sidebar.appendChild(div);
|
||||
}
|
||||
}
|
||||
|
||||
block("primitive", "Primitive Types");
|
||||
|
||||
@ -360,7 +360,8 @@ ul.item-list > li > .out-of-band {
|
||||
}
|
||||
|
||||
h4 > code, h3 > code, .invisible > code {
|
||||
position: inherit;
|
||||
max-width: calc(100% - 41px);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.in-band, code {
|
||||
@ -376,6 +377,7 @@ h4 > code, h3 > code, .invisible > code {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
display: inline-block;
|
||||
max-width: calc(100% - 43px);
|
||||
}
|
||||
|
||||
.in-band > code {
|
||||
@ -1140,3 +1142,37 @@ kbd {
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0;
|
||||
}
|
||||
|
||||
#theme-picker {
|
||||
position: absolute;
|
||||
left: 211px;
|
||||
top: 17px;
|
||||
padding: 4px;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#theme-choices {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: 30px;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#theme-choices > div {
|
||||
border-top: 1px solid;
|
||||
padding: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
#theme-picker {
|
||||
left: 109px;
|
||||
top: 7px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
382
src/librustdoc/html/static/themes/dark.css
Normal file
382
src/librustdoc/html/static/themes/dark.css
Normal file
@ -0,0 +1,382 @@
|
||||
/**
|
||||
* Copyright 2015 The Rust Project Developers. See the COPYRIGHT
|
||||
* file at the top-level directory of this distribution and at
|
||||
* http://rust-lang.org/COPYRIGHT.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 <LICENSE-APACHE or
|
||||
* http://www.apache.org/licenses/LICENSE-2.0> or the MIT license
|
||||
* <LICENSE-MIT or http://opensource.org/licenses/MIT>, at your
|
||||
* option. This file may not be copied, modified, or distributed
|
||||
* except according to those terms.
|
||||
*/
|
||||
|
||||
body {
|
||||
background-color: #353535;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
h1, h2, h3:not(.impl):not(.method):not(.type):not(.tymethod), h4:not(.method):not(.type):not(.tymethod) {
|
||||
color: #ddd;
|
||||
}
|
||||
h1.fqn {
|
||||
border-bottom-color: #d2d2d2;
|
||||
}
|
||||
h2, h3:not(.impl):not(.method):not(.type):not(.tymethod), h4:not(.method):not(.type):not(.tymethod) {
|
||||
border-bottom-color: #d2d2d2;
|
||||
}
|
||||
|
||||
.in-band {
|
||||
background-color: #353535;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.docblock code, .docblock-short code {
|
||||
background-color: #2A2A2A;
|
||||
}
|
||||
pre {
|
||||
background-color: #2A2A2A;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: #505050;
|
||||
}
|
||||
|
||||
.sidebar .current {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.source .sidebar {
|
||||
background-color: #353535;
|
||||
}
|
||||
|
||||
.sidebar .location {
|
||||
border-color: #fff;
|
||||
background: #575757;
|
||||
color: #DDD;
|
||||
}
|
||||
|
||||
.sidebar .version {
|
||||
border-bottom-color: #DDD;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
border-top-color: #777;
|
||||
border-bottom-color: #777;
|
||||
}
|
||||
|
||||
.block a:hover {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
.line-numbers span { color: #3B91E2; }
|
||||
.line-numbers .line-highlighted {
|
||||
background-color: #0a042f !important;
|
||||
}
|
||||
|
||||
.docblock h1, .docblock h2, .docblock h3, .docblock h4, .docblock h5 {
|
||||
border-bottom-color: #DDD;
|
||||
}
|
||||
|
||||
.docblock table {
|
||||
border-color: #ddd;
|
||||
}
|
||||
|
||||
.docblock table td {
|
||||
border-top-color: #ddd;
|
||||
border-bottom-color: #ddd;
|
||||
}
|
||||
|
||||
.docblock table th {
|
||||
border-top-color: #ddd;
|
||||
border-bottom-color: #ddd;
|
||||
}
|
||||
|
||||
:target { background: #494a3d; }
|
||||
|
||||
:target > .in-band {
|
||||
background: #494a3d;
|
||||
}
|
||||
|
||||
.content .method .where,
|
||||
.content .fn .where,
|
||||
.content .where.fmt-newline {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.content .highlighted {
|
||||
color: #eee !important;
|
||||
background-color: #333;
|
||||
}
|
||||
.content .highlighted a, .content .highlighted span { color: #eee !important; }
|
||||
.content .highlighted.trait { background-color: #013191; }
|
||||
.content .highlighted.mod { background-color: #803a1b; }
|
||||
.content .highlighted.externcrate { background-color: #afc6e4; }
|
||||
.content .highlighted.enum { background-color: #5b4e68; }
|
||||
.content .highlighted.struct { background-color: #194e9f; }
|
||||
.content .highlighted.fn,
|
||||
.content .highlighted.method,
|
||||
.content .highlighted.tymethod { background-color: #4950ed; }
|
||||
.content .highlighted.type { background-color: #38902c; }
|
||||
.content .highlighted.foreigntype { background-color: #f5c4ff; }
|
||||
.content .highlighted.macro { background-color: #8ce488; }
|
||||
.content .highlighted.constant,
|
||||
.content .highlighted.static { background-color: #c3e0ff; }
|
||||
.content .highlighted.primitive { background-color: #9aecff; }
|
||||
|
||||
.content span.enum, .content a.enum, .block a.current.enum { color: #508157; }
|
||||
.content span.struct, .content a.struct, .block a.current.struct { color: #df3600; }
|
||||
.content span.type, .content a.type, .block a.current.type { color: #ba5d00; }
|
||||
.content span.foreigntype, .content a.foreigntype, .block a.current.foreigntype { color: #cd00e2; }
|
||||
.content span.macro, .content a.macro, .block a.current.macro { color: #068000; }
|
||||
.content span.union, .content a.union, .block a.current.union { color: #767b27; }
|
||||
.content span.constant, .content a.constant, .block a.current.constant,
|
||||
.content span.static, .content a.static, .block a.current.static { color: #546e8a; }
|
||||
.content span.primitive, .content a.primitive, .block a.current.primitive { color: #2c8093; }
|
||||
.content span.externcrate,
|
||||
.content span.mod, .content a.mod, .block a.current.mod { color: #967F00; }
|
||||
.content span.trait, .content a.trait, .block a.current.trait { color: #7c5af3; }
|
||||
.content span.fn, .content a.fn, .block a.current.fn,
|
||||
.content span.method, .content a.method, .block a.current.method,
|
||||
.content span.tymethod, .content a.tymethod, .block a.current.tymethod,
|
||||
.content .fnname{ color: #2BAB63; }
|
||||
|
||||
pre.rust .comment { color: #4D4D4C; }
|
||||
pre.rust .doccomment { color: #8E908C; }
|
||||
|
||||
nav {
|
||||
border-bottom-color: #4e4e4e;
|
||||
}
|
||||
nav.main .current {
|
||||
border-top-color: #eee;
|
||||
border-bottom-color: #eee;
|
||||
}
|
||||
nav.main .separator {
|
||||
border-color: #eee;
|
||||
}
|
||||
a {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.docblock a, .docblock-short a, .stability a {
|
||||
color: #D2991D;
|
||||
}
|
||||
|
||||
a.test-arrow {
|
||||
color: #dedede;
|
||||
}
|
||||
|
||||
.collapse-toggle {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
color: #111;
|
||||
box-shadow: 0 0 0 1px #000, 0 0 0 2px transparent;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #008dfd;
|
||||
}
|
||||
|
||||
.stab.unstable { background: #FFF5D6; border-color: #FFC600; color: #404040; }
|
||||
.stab.deprecated { background: #F3DFFF; border-color: #7F0087; color: #404040; }
|
||||
.stab.portability { background: #C4ECFF; border-color: #7BA5DB; color: #404040; }
|
||||
|
||||
.module-item .stab {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
#help > div {
|
||||
background: #e9e9e9;
|
||||
border-color: #bfbfbf;
|
||||
}
|
||||
|
||||
#help dt {
|
||||
border-color: #bfbfbf;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.since {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
tr.result span.primitive::after {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.line-numbers :target { background-color: transparent; }
|
||||
|
||||
/* Code highlighting */
|
||||
pre.rust .kw { color: #8959A8; }
|
||||
pre.rust .kw-2, pre.rust .prelude-ty { color: #4271AE; }
|
||||
pre.rust .number, pre.rust .string { color: #718C00; }
|
||||
pre.rust .self, pre.rust .bool-val, pre.rust .prelude-val,
|
||||
pre.rust .attribute, pre.rust .attribute .ident { color: #C82829; }
|
||||
pre.rust .macro, pre.rust .macro-nonterminal { color: #3E999F; }
|
||||
pre.rust .lifetime { color: #B76514; }
|
||||
pre.rust .question-mark {
|
||||
color: #ff9011;
|
||||
}
|
||||
|
||||
a.test-arrow {
|
||||
background-color: rgba(78, 139, 202, 0.2);
|
||||
}
|
||||
|
||||
a.test-arrow:hover{
|
||||
background-color: #4e8bca;
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
:target > code {
|
||||
background: #FDFFD3;
|
||||
}
|
||||
|
||||
pre.compile_fail {
|
||||
border-left: 2px solid rgba(255,0,0,.6);
|
||||
}
|
||||
|
||||
pre.compile_fail:hover, .information:hover + pre.compile_fail {
|
||||
border-left: 2px solid #f00;
|
||||
}
|
||||
|
||||
pre.ignore {
|
||||
border-left: 2px solid rgba(255,142,0,.6);
|
||||
}
|
||||
|
||||
pre.ignore:hover, .information:hover + pre.ignore {
|
||||
border-left: 2px solid #ff9200;
|
||||
}
|
||||
|
||||
.tooltip.compile_fail {
|
||||
color: rgba(255,0,0,.6);
|
||||
}
|
||||
|
||||
.information > .compile_fail:hover {
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.tooltip.ignore {
|
||||
color: rgba(255,142,0,.6);
|
||||
}
|
||||
|
||||
.information > .ignore:hover {
|
||||
color: rgba(255,142,0,1);
|
||||
}
|
||||
|
||||
.search-failed > a {
|
||||
color: #0089ff;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
background-color: black;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext::after {
|
||||
border-color: transparent black transparent transparent;
|
||||
}
|
||||
|
||||
.important-traits .tooltip .tooltiptext {
|
||||
background-color: white;
|
||||
color: black;
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
#titles > div {
|
||||
border-bottom-color: #ccc;
|
||||
}
|
||||
|
||||
#titles > div.selected {
|
||||
border-bottom-color: #0078ee;
|
||||
}
|
||||
|
||||
#titles > div:hover {
|
||||
border-bottom-color: #0089ff;
|
||||
}
|
||||
|
||||
#titles > div > div.count {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #272727;
|
||||
border-color: #999;
|
||||
}
|
||||
|
||||
.modal-content > .close {
|
||||
background-color: #272727;
|
||||
border-color: #999;
|
||||
}
|
||||
|
||||
.modal-content > .close:hover {
|
||||
background-color: #ff1f1f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.modal-content > .whiter {
|
||||
background-color: #272727;
|
||||
}
|
||||
|
||||
.modal-content > .close:hover + .whiter {
|
||||
background-color: #ff1f1f;
|
||||
}
|
||||
|
||||
@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 {
|
||||
color: #444d56;
|
||||
background-color: #fafbfc;
|
||||
border-color: #d1d5da;
|
||||
border-bottom-color: #c6cbd1;
|
||||
box-shadow-color: #c6cbd1;
|
||||
}
|
||||
|
||||
#theme-picker {
|
||||
border-color: #e0e0e0;
|
||||
}
|
||||
|
||||
#theme-choices {
|
||||
border-color: #e0e0e0;
|
||||
background-color: #353535;
|
||||
}
|
||||
|
||||
#theme-choices > div {
|
||||
border-top: #e0e0e0;
|
||||
}
|
||||
|
||||
#theme-choices > div:hover {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
#theme-picker {
|
||||
background: #353535;
|
||||
}
|
||||
}
|
||||
@ -351,3 +351,26 @@ kbd {
|
||||
border-bottom-color: #c6cbd1;
|
||||
box-shadow-color: #c6cbd1;
|
||||
}
|
||||
|
||||
#theme-picker {
|
||||
border-color: #e0e0e0;
|
||||
}
|
||||
|
||||
#theme-choices {
|
||||
border-color: #ccc;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
#theme-choices > div {
|
||||
border-top: #e0e0e0;
|
||||
}
|
||||
|
||||
#theme-choices > div:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
#theme-picker {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user