diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e703b00322..60711c9615 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -48,30 +48,6 @@ mdBook builds on stable Rust, if you want to build mdBook from source, here are The resulting binary can be found in `mdBook/target/debug/` under the name `mdBook` or `mdBook.exe`. - -### Making changes to the style - -mdBook doesn't use CSS directly but uses [Stylus](http://stylus-lang.com/), a CSS-preprocessor which compiles to CSS. - -When you want to change the style, it is important to not change the CSS directly because any manual modification to -the CSS files will be overwritten when compiling the stylus files. Instead, you should make your changes directly in the -[stylus files](https://github.com/rust-lang-nursery/mdBook/tree/master/src/theme/stylus) and regenerate the CSS. - -For this to work, you first need [Node and NPM](https://nodejs.org/en/) installed on your machine. -Then run the following command to install both [stylus](http://stylus-lang.com/) and [nib](https://tj.github.io/nib/), you might need `sudo` to install successfully. - -``` -npm install -g stylus nib -``` - -When that finished, you can simply regenerate the CSS files by building mdBook with the following command: - -``` -cargo build --features=regenerate-css -``` - -This should automatically call the appropriate stylus command to recompile the files to CSS and include them in the project. - ### Making a pull-request When you feel comfortable that your changes could be integrated into mdBook, you can create a pull-request on GitHub. diff --git a/Cargo.toml b/Cargo.toml index b362a61e98..03d885f91d 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -8,11 +8,7 @@ repository = "https://github.com/rust-lang-nursery/mdBook" keywords = ["book", "gitbook", "rustbook", "markdown"] license = "MPL-2.0" readme = "README.md" -build = "build.rs" -exclude = [ - "book-example/*", - "src/theme/stylus/**", -] +exclude = ["book-example/*"] [dependencies] clap = "2.24" @@ -47,9 +43,6 @@ ws = { version = "0.7", optional = true} elasticlunr-rs = { version = "2.3", optional = true, default-features = false } ammonia = { version = "1.1", optional = true } -[build-dependencies] -error-chain = "0.12" - [dev-dependencies] select = "0.4" pretty_assertions = "0.5" @@ -60,7 +53,6 @@ pulldown-cmark-to-cmark = "1.1.0" default = ["output", "watch", "serve", "search"] debug = [] output = [] -regenerate-css = [] watch = ["notify"] serve = ["iron", "staticfile", "ws"] search = ["elasticlunr-rs", "ammonia"] diff --git a/appveyor.yml b/appveyor.yml index 6ab525009a..f309c0909c 100644 --- a/appveyor.yml +++ b/appveyor.yml @@ -1,7 +1,6 @@ environment: global: PROJECT_NAME: mdBook - nodejs_version: "6" matrix: # Stable channel - TARGET: i686-pc-windows-msvc @@ -32,17 +31,12 @@ install: - set PATH=%PATH%;C:\Users\appveyor\.cargo\bin - rustc -Vv - cargo -V - - ps: Install-Product node $env:nodejs_version - - node --version - - npm --version - - npm install -g stylus nib build: false # Equivalent to Travis' `script` phase test_script: - cargo build --verbose - - cargo build --verbose --features=regenerate-css - cargo test --verbose before_deploy: diff --git a/build.rs b/build.rs deleted file mode 100644 index 1369749104..0000000000 --- a/build.rs +++ /dev/null @@ -1,100 +0,0 @@ -// build.rs - -use std::env; -use std::path::Path; -#[macro_use] -extern crate error_chain; - -#[cfg(windows)] -mod execs { - use std::process::Command; - - pub fn cmd(program: &str) -> Command { - let mut cmd = Command::new("cmd"); - cmd.args(&["/c", program]); - cmd - } -} -#[cfg(not(windows))] -mod execs { - use std::process::Command; - - pub fn cmd(program: &str) -> Command { - Command::new(program) - } -} - -error_chain!{ - foreign_links { - Io(std::io::Error); - } -} - -fn program_exists(program: &str) -> Result<()> { - execs::cmd(program) - .arg("-v") - .output() - .chain_err(|| format!("Please install '{}'!", program))?; - Ok(()) -} - -fn npm_package_exists(package: &str) -> Result<()> { - let status = execs::cmd("npm") - .args(&["list", "-g"]) - .arg(package) - .output(); - - match status { - Ok(ref out) if out.status.success() => Ok(()), - _ => bail!( - "Missing npm package '{0}' install with: 'npm -g install {0}'", - package - ), - } -} - -pub enum Resource<'a> { - Program(&'a str), - Package(&'a str), -} -use Resource::{Package, Program}; - -impl<'a> Resource<'a> { - pub fn exists(&self) -> Result<()> { - match *self { - Program(name) => program_exists(name), - Package(name) => npm_package_exists(name), - } - } -} - -fn run() -> Result<()> { - if let Ok(_) = env::var("CARGO_FEATURE_REGENERATE_CSS") { - // Check dependencies - Program("npm").exists()?; - Program("node").exists().or(Program("nodejs").exists())?; - Package("nib").exists()?; - Package("stylus").exists()?; - - // Compile stylus stylesheet to css - let manifest_dir = env::var("CARGO_MANIFEST_DIR") - .chain_err(|| "Please run the script with: 'cargo build'!")?; - let theme_dir = Path::new(&manifest_dir).join("src/theme/"); - let stylus_dir = theme_dir.join("stylus/book.styl"); - - if !execs::cmd("stylus") - .arg(stylus_dir) - .arg("--out") - .arg(theme_dir) - .arg("--use") - .arg("nib") - .status()? - .success() - { - bail!("Stylus encountered an error"); - } - } - Ok(()) -} - -quick_main!(run); diff --git a/ci/github_pages.sh b/ci/github_pages.sh index 040ab20a70..ea8b95a313 100644 --- a/ci/github_pages.sh +++ b/ci/github_pages.sh @@ -11,9 +11,6 @@ if [ "$TRAVIS_PULL_REQUEST" != "false" ] || exit 0 fi -# Make sure we have the css dependencies -npm install -g stylus nib - NC='\033[39m' CYAN='\033[36m' GREEN='\033[32m' @@ -21,7 +18,7 @@ GREEN='\033[32m' rev=$(git rev-parse --short HEAD) echo -e "${CYAN}Running cargo doc${NC}" -cargo doc --features regenerate-css > /dev/null +cargo doc > /dev/null echo -e "${CYAN}Running mdbook build${NC}" cargo run -- build book-example/ diff --git a/src/book/init.rs b/src/book/init.rs index ccae8e9a47..5347759a4b 100644 --- a/src/book/init.rs +++ b/src/book/init.rs @@ -127,8 +127,20 @@ impl BookBuilder { let mut index = File::create(themedir.join("index.hbs"))?; index.write_all(theme::INDEX)?; - let mut css = File::create(themedir.join("book.css"))?; - css.write_all(theme::CSS)?; + let cssdir = themedir.join("css"); + fs::create_dir(&cssdir)?; + + let mut general_css = File::create(cssdir.join("general.css"))?; + general_css.write_all(theme::GENERAL_CSS)?; + + let mut chrome_css = File::create(cssdir.join("chrome.css"))?; + chrome_css.write_all(theme::CHROME_CSS)?; + + let mut print_css = File::create(cssdir.join("print.css"))?; + print_css.write_all(theme::PRINT_CSS)?; + + let mut variables_css = File::create(cssdir.join("variables.css"))?; + variables_css.write_all(theme::VARIABLES_CSS)?; let mut favicon = File::create(themedir.join("favicon.png"))?; favicon.write_all(theme::FAVICON)?; diff --git a/src/renderer/html_handlebars/hbs_renderer.rs b/src/renderer/html_handlebars/hbs_renderer.rs index 2367446f43..469f8ef4ce 100644 --- a/src/renderer/html_handlebars/hbs_renderer.rs +++ b/src/renderer/html_handlebars/hbs_renderer.rs @@ -139,7 +139,10 @@ impl HtmlHandlebars { )?; write_file(destination, "book.js", &theme.js)?; - write_file(destination, "book.css", &theme.css)?; + write_file(destination, "css/general.css", &theme.general_css)?; + write_file(destination, "css/chrome.css", &theme.chrome_css)?; + write_file(destination, "css/print.css", &theme.print_css)?; + write_file(destination, "css/variables.css", &theme.variables_css)?; write_file(destination, "favicon.png", &theme.favicon)?; write_file(destination, "highlight.css", &theme.highlight_css)?; write_file(destination, "tomorrow-night.css", &theme.tomorrow_night_css)?; diff --git a/src/theme/book.css b/src/theme/book.css deleted file mode 100644 index 16129aef0a..0000000000 --- a/src/theme/book.css +++ /dev/null @@ -1,1465 +0,0 @@ -html { - font-family: "Open Sans", sans-serif; - color: #333; - -webkit-text-size-adjust: none; - -ms-text-size-adjust: none; - text-size-adjust: none; -} -body { - margin: 0; - font-size: 1rem; - overflow-x: hidden; -} -code { - font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace; - font-size: 0.875em; -} -.left { - float: left; -} -.right { - float: right; -} -.hidden { - display: none; -} -.play-button.hidden { - display: none; -} -h2, -h3 { - margin-top: 2.5em; -} -h4, -h5 { - margin-top: 2em; -} -.header + .header h3, -.header + .header h4, -.header + .header h5 { - margin-top: 1em; -} -a.header:target h1:before, -a.header:target h2:before, -a.header:target h3:before, -a.header:target h4:before { - display: inline-block; - content: "»"; - margin-left: -30px; - width: 30px; -} -table { - margin: 0 auto; - border-collapse: collapse; -} -table td { - padding: 3px 20px; - border: 1px solid; -} -table thead td { - font-weight: 700; -} -:not(.footnote-definition) + .footnote-definition, -.footnote-definition + :not(.footnote-definition) { - margin-top: 2em; -} -.footnote-definition { - font-size: 0.9em; - margin: 0.5em 0; -} -.footnote-definition p { - display: inline; -} -.sidebar { - position: fixed; - left: 0; - top: 0; - bottom: 0; - width: 300px; - overflow-y: auto; - padding: 10px 10px; - font-size: 0.875em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-overflow-scrolling: touch; - overscroll-behavior-y: contain; -} -.js .sidebar { - -webkit-transition: -webkit-transform 0.3s; - -moz-transition: -moz-transform 0.3s; - -o-transition: -o-transform 0.3s; - -ms-transition: -ms-transform 0.3s; - transition: transform 0.3s; -} -.sidebar code { - line-height: 2em; -} -.sidebar-hidden .sidebar { - -webkit-transform: translateX(-300px); - -moz-transform: translateX(-300px); - -o-transform: translateX(-300px); - -ms-transform: translateX(-300px); - transform: translateX(-300px); -} -.chapter { - list-style: none outside none; - padding-left: 0; - line-height: 2.2em; -} -.chapter li a { - display: block; - padding: 0; - text-decoration: none; -} -@media (-moz-touch-enabled: 1), (pointer: coarse) { - .chapter li a { - padding: 5px 0; - } -} -.chapter li a:hover { - text-decoration: none; -} -.chapter .spacer { - width: 100%; - height: 3px; - margin: 5px 0px; -} -@media (-moz-touch-enabled: 1), (pointer: coarse) { - .chapter .spacer { - margin: 10px 0; - } -} -.section { - list-style: none outside none; - padding-left: 20px; - line-height: 1.9em; -} -.page-wrapper { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -.js .page-wrapper { - -webkit-transition: margin-left 0.3s ease, -webkit-transform 0.3s ease; - -moz-transition: margin-left 0.3s ease, -moz-transform 0.3s ease; - -o-transition: margin-left 0.3s ease, -o-transform 0.3s ease; - -ms-transition: margin-left 0.3s ease, -ms-transform 0.3s ease; - transition: margin-left 0.3s ease, transform 0.3s ease; -} -.sidebar-visible .page-wrapper { - -webkit-transform: translateX(300px); - -moz-transform: translateX(300px); - -o-transform: translateX(300px); - -ms-transform: translateX(300px); - transform: translateX(300px); -} -@media only screen and (min-width: 620px) { - .sidebar-visible .page-wrapper { - -webkit-transform: none; - -moz-transform: none; - -o-transform: none; - -ms-transform: none; - transform: none; - margin-left: 300px; - } -} -.page { - outline: 0; - padding: 0 15px; -} -.content { - overflow-y: auto; - padding: 0 15px; - padding-bottom: 50px; -} -.content main { - margin-left: auto; - margin-right: auto; - max-width: 750px; -} -.content a { - text-decoration: none; -} -.content a:hover { - text-decoration: underline; -} -.content img { - max-width: 100%; -} -#menu-bar { - position: -webkit-sticky; - position: sticky; - top: 0; - z-index: 101; -} -#menu-bar > #menu-bar-sticky-container { - display: -webkit-box; - display: -moz-box; - display: -webkit-flex; - display: -ms-flexbox; - display: box; - display: flex; - -webkit-box-lines: multiple; - -moz-box-lines: multiple; - -o-box-lines: multiple; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} -.js #menu-bar > #menu-bar-sticky-container { - -webkit-transition: -webkit-transform 0.3s; - -moz-transition: -moz-transform 0.3s; - -o-transition: -o-transform 0.3s; - -ms-transition: -ms-transform 0.3s; - transition: transform 0.3s; -} -#menu-bar i, -#menu-bar .icon-button { - position: relative; - margin: 0 8px; - z-index: 10; - line-height: 50px; - cursor: pointer; - -webkit-transition: color 0.5s; - -moz-transition: color 0.5s; - -o-transition: color 0.5s; - -ms-transition: color 0.5s; - transition: color 0.5s; -} -@media only screen and (max-width: 420px) { - #menu-bar i, - #menu-bar .icon-button { - margin: 0 5px; - } -} -#menu-bar #print-button { - margin: 0 15px; -} -html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container { - -webkit-transform: translateY(-60px); - -moz-transform: translateY(-60px); - -o-transform: translateY(-60px); - -ms-transform: translateY(-60px); - transform: translateY(-60px); -} -.left-buttons { - margin: 0 5px; -} -.no-js .left-buttons { - display: none; -} -.menu-title { - display: inline-block; - font-weight: 200; - font-size: 20px; - line-height: 50px; - text-align: center; - margin: 0; - -webkit-box-flex: 1; - -moz-box-flex: 1; - -o-box-flex: 1; - box-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - white-space: nowrap; - overflow: hidden; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; -} -.js .menu-title { - cursor: pointer; -} -.nav-chapters { - font-size: 2.5em; - text-align: center; - text-decoration: none; - position: fixed; - top: 50px /* Height of menu-bar */; - bottom: 0; - margin: 0; - max-width: 150px; - min-width: 90px; - display: -webkit-box; - display: -moz-box; - display: -webkit-flex; - display: -ms-flexbox; - display: box; - display: flex; - -webkit-box-pack: center; - -moz-box-pack: center; - -o-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -ms-flex-line-pack: center; - -webkit-align-content: center; - align-content: center; - -webkit-box-orient: vertical; - -moz-box-orient: vertical; - -o-box-orient: vertical; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-transition: color 0.5s; - -moz-transition: color 0.5s; - -o-transition: color 0.5s; - -ms-transition: color 0.5s; - transition: color 0.5s; -} -.nav-chapters:hover { - text-decoration: none; -} -.nav-wrapper { - margin-top: 50px; - display: none; -} -.mobile-nav-chapters { - font-size: 2.5em; - text-align: center; - text-decoration: none; - width: 90px; - border-radius: 5px; -} -.previous { - float: left; -} -.next { - float: right; - right: 15px; -} -@media only screen and (max-width: 1080px) { - .nav-wide-wrapper { - display: none; - } - .nav-wrapper { - display: block; - } -} -@media only screen and (max-width: 1380px) { - .sidebar-visible .nav-wide-wrapper { - display: none; - } - .sidebar-visible .nav-wrapper { - display: block; - } -} -.theme-popup { - position: absolute; - left: 10px; - z-index: 1000; - border-radius: 4px; - font-size: 0.7em; -} -.theme-popup .theme { - display: inline; - border: 0; - margin: 0; - padding: 2px 10px; - line-height: 25px; - width: 100%; - white-space: nowrap; - text-align: left; - cursor: pointer; - color: inherit; - background: inherit; - font-size: inherit; -} -.theme-popup .theme:hover:first-child, -.theme-popup .theme:hover:last-child { - border-top-left-radius: inherit; - border-top-right-radius: inherit; -} -.light { - color: #333; - background-color: #fff; -/* Inline code */ -/* Search */ -} -.light .content .header:link, -.light .content .header:visited { - color: #333; -} -.light .content .header:link:hover, -.light .content .header:visited:hover { - text-decoration: none; -} -.light .menu-bar { - margin: auto -15px; -} -.light .menu-bar > #menu-bar-sticky-container { - background-color: #fff; - border-bottom-color: #fff; - border-bottom-width: 1px; - border-bottom-style: solid; -} -.light .menu-bar.bordered > #menu-bar-sticky-container { - border-bottom-color: #f2f2f2; -} -.light .sidebar { - background-color: #fafafa; - color: #364149; -} -.light .sidebar::-webkit-scrollbar { - background: #fafafa; -} -.light .sidebar::-webkit-scrollbar-thumb { - background: #ccc; -} -.light .chapter li { - color: #aaa; -} -.light .chapter li a { - color: #364149; -} -.light .chapter li .active, -.light .chapter li a:hover { -/* Animate color change */ - color: #008cff; -} -.light .chapter .spacer { - background-color: #f4f4f4; -} -.light .menu-bar, -.light .menu-bar:visited, -.light .nav-chapters, -.light .nav-chapters:visited, -.light .mobile-nav-chapters, -.light .mobile-nav-chapters:visited, -.light .menu-bar .icon-button, -.light .menu-bar a i { - color: #ccc; -} -.light .menu-bar i:hover, -.light .menu-bar .icon-button:hover, -.light .nav-chapters:hover, -.light .mobile-nav-chapters i:hover { - color: #333; -} -.light .mobile-nav-chapters i:hover { - color: #364149; -} -.light .mobile-nav-chapters { - background-color: #fafafa; -} -.light #searchresults a, -.light .content a:link, -.light a:visited, -.light a > .hljs { - color: #4183c4; -} -.light .theme-popup { - color: #333; - background: #fafafa; - border: 1px solid #ccc; - margin: 0; - padding: 0; - list-style: none; - display: none; -} -.light .theme-popup .theme:hover { - background-color: #e6e6e6; -} -.light .theme-popup .default { - color: #ccc; -} -.light blockquote { - margin: 20px 0; - padding: 0 20px; - color: #333; - background-color: #f2f7f9; - border-top: 0.1em solid #e1edf1; - border-bottom: 0.1em solid #e1edf1; -} -.light table td { - border-color: #f2f2f2; -} -.light table tbody tr:nth-child(2n) { - background: #f7f7f7; -} -.light table thead { - background: #ccc; -} -.light table thead td { - border: none; -} -.light table thead tr { - border: 1px #ccc solid; -} -.light :not(pre) > .hljs { - display: inline-block; - vertical-align: middle; - padding: 0.1em 0.3em; - border-radius: 3px; - color: #6e6b5e; -} -.light a:hover > .hljs { - text-decoration: underline; -} -.light pre { - position: relative; -} -.light pre > .buttons { - position: absolute; - z-index: 100; - right: 5px; - top: 5px; - color: #364149; - cursor: pointer; -} -.light pre > .buttons :hover { - color: #008cff; -} -.light pre > .buttons i { - margin-left: 8px; -} -.light pre > .buttons button { - color: inherit; - background: transparent; - border: none; - cursor: inherit; -} -.light pre > .result { - margin-top: 10px; -} -.light .icon-button { - border: none; - background: none; - padding: 0; - color: inherit; -} -.light .icon-button i { - margin: 0; -} -.light ::-webkit-scrollbar { - background: #fff; -} -.light ::-webkit-scrollbar-thumb { - background: #ccc; -} -.light #searchbar { - border: 1px solid #aaa; - border-radius: 3px; - background-color: #fafafa; - color: #000; -} -.light #searchbar:focus, -.light #searchbar.active { - -webkit-box-shadow: 0 0 3px #aaa; - box-shadow: 0 0 3px #aaa; -} -.light .searchresults-header { - color: #666; -} -.light .searchresults-outer { - border-bottom: 1px dashed #888; -} -.light ul#searchresults li.focus { - background-color: #e4f2fe; -} -.light mark { - background-color: #a2cff5; -} -.coal { - color: #98a3ad; - background-color: #141617; -/* Inline code */ -/* Search */ -} -.coal .content .header:link, -.coal .content .header:visited { - color: #98a3ad; -} -.coal .content .header:link:hover, -.coal .content .header:visited:hover { - text-decoration: none; -} -.coal .menu-bar { - margin: auto -15px; -} -.coal .menu-bar > #menu-bar-sticky-container { - background-color: #141617; - border-bottom-color: #141617; - border-bottom-width: 1px; - border-bottom-style: solid; -} -.coal .menu-bar.bordered > #menu-bar-sticky-container { - border-bottom-color: #1f2223; -} -.coal .sidebar { - background-color: #292c2f; - color: #a1adb8; -} -.coal .sidebar::-webkit-scrollbar { - background: #292c2f; -} -.coal .sidebar::-webkit-scrollbar-thumb { - background: #a1adb8; -} -.coal .chapter li { - color: #505254; -} -.coal .chapter li a { - color: #a1adb8; -} -.coal .chapter li .active, -.coal .chapter li a:hover { -/* Animate color change */ - color: #3473ad; -} -.coal .chapter .spacer { - background-color: #393939; -} -.coal .menu-bar, -.coal .menu-bar:visited, -.coal .nav-chapters, -.coal .nav-chapters:visited, -.coal .mobile-nav-chapters, -.coal .mobile-nav-chapters:visited, -.coal .menu-bar .icon-button, -.coal .menu-bar a i { - color: #43484d; -} -.coal .menu-bar i:hover, -.coal .menu-bar .icon-button:hover, -.coal .nav-chapters:hover, -.coal .mobile-nav-chapters i:hover { - color: #b3c0cc; -} -.coal .mobile-nav-chapters i:hover { - color: #a1adb8; -} -.coal .mobile-nav-chapters { - background-color: #292c2f; -} -.coal #searchresults a, -.coal .content a:link, -.coal a:visited, -.coal a > .hljs { - color: #2b79a2; -} -.coal .theme-popup { - color: #98a3ad; - background: #141617; - border: 1px solid #43484d; - margin: 0; - padding: 0; - list-style: none; - display: none; -} -.coal .theme-popup .theme:hover { - background-color: #1f2124; -} -.coal .theme-popup .default { - color: #43484d; -} -.coal blockquote { - margin: 20px 0; - padding: 0 20px; - color: #98a3ad; - background-color: #242637; - border-top: 0.1em solid #2c2f44; - border-bottom: 0.1em solid #2c2f44; -} -.coal table td { - border-color: #1f2223; -} -.coal table tbody tr:nth-child(2n) { - background: #1b1d1e; -} -.coal table thead { - background: #3f4649; -} -.coal table thead td { - border: none; -} -.coal table thead tr { - border: 1px #3f4649 solid; -} -.coal :not(pre) > .hljs { - display: inline-block; - vertical-align: middle; - padding: 0.1em 0.3em; - border-radius: 3px; - color: #c5c8c6; -} -.coal a:hover > .hljs { - text-decoration: underline; -} -.coal pre { - position: relative; -} -.coal pre > .buttons { - position: absolute; - z-index: 100; - right: 5px; - top: 5px; - color: #a1adb8; - cursor: pointer; -} -.coal pre > .buttons :hover { - color: #3473ad; -} -.coal pre > .buttons i { - margin-left: 8px; -} -.coal pre > .buttons button { - color: inherit; - background: transparent; - border: none; - cursor: inherit; -} -.coal pre > .result { - margin-top: 10px; -} -.coal .icon-button { - border: none; - background: none; - padding: 0; - color: inherit; -} -.coal .icon-button i { - margin: 0; -} -.coal ::-webkit-scrollbar { - background: #141617; -} -.coal ::-webkit-scrollbar-thumb { - background: #a1adb8; -} -.coal #searchbar { - border: 1px solid #aaa; - border-radius: 3px; - background-color: #b7b7b7; - color: #000; -} -.coal #searchbar:focus, -.coal #searchbar.active { - -webkit-box-shadow: 0 0 3px #aaa; - box-shadow: 0 0 3px #aaa; -} -.coal .searchresults-header { - color: #666; -} -.coal .searchresults-outer { - border-bottom: 1px dashed #98a3ad; -} -.coal ul#searchresults li.focus { - background-color: #2b2b2f; -} -.coal mark { - background-color: #355c7d; -} -.navy { - color: #bcbdd0; - background-color: #161923; -/* Inline code */ -/* Search */ -} -.navy .content .header:link, -.navy .content .header:visited { - color: #bcbdd0; -} -.navy .content .header:link:hover, -.navy .content .header:visited:hover { - text-decoration: none; -} -.navy .menu-bar { - margin: auto -15px; -} -.navy .menu-bar > #menu-bar-sticky-container { - background-color: #161923; - border-bottom-color: #161923; - border-bottom-width: 1px; - border-bottom-style: solid; -} -.navy .menu-bar.bordered > #menu-bar-sticky-container { - border-bottom-color: #1f2331; -} -.navy .sidebar { - background-color: #282d3f; - color: #c8c9db; -} -.navy .sidebar::-webkit-scrollbar { - background: #282d3f; -} -.navy .sidebar::-webkit-scrollbar-thumb { - background: #c8c9db; -} -.navy .chapter li { - color: #505274; -} -.navy .chapter li a { - color: #c8c9db; -} -.navy .chapter li .active, -.navy .chapter li a:hover { -/* Animate color change */ - color: #2b79a2; -} -.navy .chapter .spacer { - background-color: #2d334f; -} -.navy .menu-bar, -.navy .menu-bar:visited, -.navy .nav-chapters, -.navy .nav-chapters:visited, -.navy .mobile-nav-chapters, -.navy .mobile-nav-chapters:visited, -.navy .menu-bar .icon-button, -.navy .menu-bar a i { - color: #737480; -} -.navy .menu-bar i:hover, -.navy .menu-bar .icon-button:hover, -.navy .nav-chapters:hover, -.navy .mobile-nav-chapters i:hover { - color: #b7b9cc; -} -.navy .mobile-nav-chapters i:hover { - color: #c8c9db; -} -.navy .mobile-nav-chapters { - background-color: #282d3f; -} -.navy #searchresults a, -.navy .content a:link, -.navy a:visited, -.navy a > .hljs { - color: #2b79a2; -} -.navy .theme-popup { - color: #bcbdd0; - background: #161923; - border: 1px solid #737480; - margin: 0; - padding: 0; - list-style: none; - display: none; -} -.navy .theme-popup .theme:hover { - background-color: #282e40; -} -.navy .theme-popup .default { - color: #737480; -} -.navy blockquote { - margin: 20px 0; - padding: 0 20px; - color: #bcbdd0; - background-color: #262933; - border-top: 0.1em solid #2f333f; - border-bottom: 0.1em solid #2f333f; -} -.navy table td { - border-color: #1f2331; -} -.navy table tbody tr:nth-child(2n) { - background: #1b1f2b; -} -.navy table thead { - background: #39415b; -} -.navy table thead td { - border: none; -} -.navy table thead tr { - border: 1px #39415b solid; -} -.navy :not(pre) > .hljs { - display: inline-block; - vertical-align: middle; - padding: 0.1em 0.3em; - border-radius: 3px; - color: #c5c8c6; -} -.navy a:hover > .hljs { - text-decoration: underline; -} -.navy pre { - position: relative; -} -.navy pre > .buttons { - position: absolute; - z-index: 100; - right: 5px; - top: 5px; - color: #c8c9db; - cursor: pointer; -} -.navy pre > .buttons :hover { - color: #2b79a2; -} -.navy pre > .buttons i { - margin-left: 8px; -} -.navy pre > .buttons button { - color: inherit; - background: transparent; - border: none; - cursor: inherit; -} -.navy pre > .result { - margin-top: 10px; -} -.navy .icon-button { - border: none; - background: none; - padding: 0; - color: inherit; -} -.navy .icon-button i { - margin: 0; -} -.navy ::-webkit-scrollbar { - background: #161923; -} -.navy ::-webkit-scrollbar-thumb { - background: #c8c9db; -} -.navy #searchbar { - border: 1px solid #aaa; - border-radius: 3px; - background-color: #aeaec6; - color: #000; -} -.navy #searchbar:focus, -.navy #searchbar.active { - -webkit-box-shadow: 0 0 3px #aaa; - box-shadow: 0 0 3px #aaa; -} -.navy .searchresults-header { - color: #5f5f71; -} -.navy .searchresults-outer { - border-bottom: 1px dashed #5c5c68; -} -.navy ul#searchresults li.focus { - background-color: #242430; -} -.navy mark { - background-color: #a2cff5; -} -.rust { - color: #262625; - background-color: #e1e1db; -/* Inline code */ -/* Search */ -} -.rust .content .header:link, -.rust .content .header:visited { - color: #262625; -} -.rust .content .header:link:hover, -.rust .content .header:visited:hover { - text-decoration: none; -} -.rust .menu-bar { - margin: auto -15px; -} -.rust .menu-bar > #menu-bar-sticky-container { - background-color: #e1e1db; - border-bottom-color: #e1e1db; - border-bottom-width: 1px; - border-bottom-style: solid; -} -.rust .menu-bar.bordered > #menu-bar-sticky-container { - border-bottom-color: #d7d7cf; -} -.rust .sidebar { - background-color: #3b2e2a; - color: #c8c9db; -} -.rust .sidebar::-webkit-scrollbar { - background: #3b2e2a; -} -.rust .sidebar::-webkit-scrollbar-thumb { - background: #c8c9db; -} -.rust .chapter li { - color: #505254; -} -.rust .chapter li a { - color: #c8c9db; -} -.rust .chapter li .active, -.rust .chapter li a:hover { -/* Animate color change */ - color: #e69f67; -} -.rust .chapter .spacer { - background-color: #45373a; -} -.rust .menu-bar, -.rust .menu-bar:visited, -.rust .nav-chapters, -.rust .nav-chapters:visited, -.rust .mobile-nav-chapters, -.rust .mobile-nav-chapters:visited, -.rust .menu-bar .icon-button, -.rust .menu-bar a i { - color: #737480; -} -.rust .menu-bar i:hover, -.rust .menu-bar .icon-button:hover, -.rust .nav-chapters:hover, -.rust .mobile-nav-chapters i:hover { - color: #262625; -} -.rust .mobile-nav-chapters i:hover { - color: #c8c9db; -} -.rust .mobile-nav-chapters { - background-color: #3b2e2a; -} -.rust #searchresults a, -.rust .content a:link, -.rust a:visited, -.rust a > .hljs { - color: #2b79a2; -} -.rust .theme-popup { - color: #262625; - background: #e1e1db; - border: 1px solid #b38f6b; - margin: 0; - padding: 0; - list-style: none; - display: none; -} -.rust .theme-popup .theme:hover { - background-color: #99908a; -} -.rust .theme-popup .default { - color: #737480; -} -.rust blockquote { - margin: 20px 0; - padding: 0 20px; - color: #262625; - background-color: #c1c1bb; - border-top: 0.1em solid #b8b8b1; - border-bottom: 0.1em solid #b8b8b1; -} -.rust table td { - border-color: #d7d7cf; -} -.rust table tbody tr:nth-child(2n) { - background: #dbdbd4; -} -.rust table thead { - background: #b3a497; -} -.rust table thead td { - border: none; -} -.rust table thead tr { - border: 1px #b3a497 solid; -} -.rust :not(pre) > .hljs { - display: inline-block; - vertical-align: middle; - padding: 0.1em 0.3em; - border-radius: 3px; - color: #6e6b5e; -} -.rust a:hover > .hljs { - text-decoration: underline; -} -.rust pre { - position: relative; -} -.rust pre > .buttons { - position: absolute; - z-index: 100; - right: 5px; - top: 5px; - color: #c8c9db; - cursor: pointer; -} -.rust pre > .buttons :hover { - color: #e69f67; -} -.rust pre > .buttons i { - margin-left: 8px; -} -.rust pre > .buttons button { - color: inherit; - background: transparent; - border: none; - cursor: inherit; -} -.rust pre > .result { - margin-top: 10px; -} -.rust .icon-button { - border: none; - background: none; - padding: 0; - color: inherit; -} -.rust .icon-button i { - margin: 0; -} -.rust ::-webkit-scrollbar { - background: #e1e1db; -} -.rust ::-webkit-scrollbar-thumb { - background: #c8c9db; -} -.rust #searchbar { - border: 1px solid #aaa; - border-radius: 3px; - background-color: #fafafa; - color: #000; -} -.rust #searchbar:focus, -.rust #searchbar.active { - -webkit-box-shadow: 0 0 3px #aaa; - box-shadow: 0 0 3px #aaa; -} -.rust .searchresults-header { - color: #666; -} -.rust .searchresults-outer { - border-bottom: 1px dashed #888; -} -.rust ul#searchresults li.focus { - background-color: #dec2a2; -} -.rust mark { - background-color: #e69f67; -} -.ayu { - color: #c5c5c5; - background-color: #0f1419; -/* Inline code */ -/* Search */ -} -.ayu .content .header:link, -.ayu .content .header:visited { - color: #c5c5c5; -} -.ayu .content .header:link:hover, -.ayu .content .header:visited:hover { - text-decoration: none; -} -.ayu .menu-bar { - margin: auto -15px; -} -.ayu .menu-bar > #menu-bar-sticky-container { - background-color: #0f1419; - border-bottom-color: #0f1419; - border-bottom-width: 1px; - border-bottom-style: solid; -} -.ayu .menu-bar.bordered > #menu-bar-sticky-container { - border-bottom-color: #182028; -} -.ayu .sidebar { - background-color: #14191f; - color: #c8c9db; -} -.ayu .sidebar::-webkit-scrollbar { - background: #14191f; -} -.ayu .sidebar::-webkit-scrollbar-thumb { - background: #c8c9db; -} -.ayu .chapter li { - color: #5c6773; -} -.ayu .chapter li a { - color: #c8c9db; -} -.ayu .chapter li .active, -.ayu .chapter li a:hover { -/* Animate color change */ - color: #ffb454; -} -.ayu .chapter .spacer { - background-color: #2d334f; -} -.ayu .menu-bar, -.ayu .menu-bar:visited, -.ayu .nav-chapters, -.ayu .nav-chapters:visited, -.ayu .mobile-nav-chapters, -.ayu .mobile-nav-chapters:visited, -.ayu .menu-bar .icon-button, -.ayu .menu-bar a i { - color: #737480; -} -.ayu .menu-bar i:hover, -.ayu .menu-bar .icon-button:hover, -.ayu .nav-chapters:hover, -.ayu .mobile-nav-chapters i:hover { - color: #b7b9cc; -} -.ayu .mobile-nav-chapters i:hover { - color: #c8c9db; -} -.ayu .mobile-nav-chapters { - background-color: #14191f; -} -.ayu #searchresults a, -.ayu .content a:link, -.ayu a:visited, -.ayu a > .hljs { - color: #0096cf; -} -.ayu .theme-popup { - color: #c5c5c5; - background: #14191f; - border: 1px solid #5c6773; - margin: 0; - padding: 0; - list-style: none; - display: none; -} -.ayu .theme-popup .theme:hover { - background-color: #191f26; -} -.ayu .theme-popup .default { - color: #737480; -} -.ayu blockquote { - margin: 20px 0; - padding: 0 20px; - color: #c5c5c5; - background-color: #262933; - border-top: 0.1em solid #2f333f; - border-bottom: 0.1em solid #2f333f; -} -.ayu table td { - border-color: #182028; -} -.ayu table tbody tr:nth-child(2n) { - background: #141b22; -} -.ayu table thead { - background: #324354; -} -.ayu table thead td { - border: none; -} -.ayu table thead tr { - border: 1px #324354 solid; -} -.ayu :not(pre) > .hljs { - display: inline-block; - vertical-align: middle; - padding: 0.1em 0.3em; - border-radius: 3px; - color: #ffb454; -} -.ayu a:hover > .hljs { - text-decoration: underline; -} -.ayu pre { - position: relative; -} -.ayu pre > .buttons { - position: absolute; - z-index: 100; - right: 5px; - top: 5px; - color: #c8c9db; - cursor: pointer; -} -.ayu pre > .buttons :hover { - color: #ffb454; -} -.ayu pre > .buttons i { - margin-left: 8px; -} -.ayu pre > .buttons button { - color: inherit; - background: transparent; - border: none; - cursor: inherit; -} -.ayu pre > .result { - margin-top: 10px; -} -.ayu .icon-button { - border: none; - background: none; - padding: 0; - color: inherit; -} -.ayu .icon-button i { - margin: 0; -} -.ayu ::-webkit-scrollbar { - background: #0f1419; -} -.ayu ::-webkit-scrollbar-thumb { - background: #c8c9db; -} -.ayu #searchbar { - border: 1px solid #848484; - border-radius: 3px; - background-color: #424242; - color: #fff; -} -.ayu #searchbar:focus, -.ayu #searchbar.active { - -webkit-box-shadow: 0 0 3px #d4c89f; - box-shadow: 0 0 3px #d4c89f; -} -.ayu .searchresults-header { - color: #666; -} -.ayu .searchresults-outer { - border-bottom: 1px dashed #888; -} -.ayu ul#searchresults li.focus { - background-color: #252932; -} -.ayu mark { - background-color: #e3b171; -} -@media only print { - #sidebar, - #menu-bar, - .nav-chapters, - .mobile-nav-chapters { - display: none; - } - #page-wrapper.page-wrapper { - -webkit-transform: none; - -moz-transform: none; - -o-transform: none; - -ms-transform: none; - transform: none; - margin-left: 0px; - overflow-y: initial; - } - #content { - max-width: none; - margin: 0; - padding: 0; - } - .page { - overflow-y: initial; - } - code { - background-color: #666; - border-radius: 5px; -/* Force background to be printed in Chrome */ - -webkit-print-color-adjust: exact; - } - pre > .buttons { - z-index: 2; - } - a, - a:visited, - a:active, - a:hover { - color: #4183c4; - text-decoration: none; - } - h1, - h2, - h3, - h4, - h5, - h6 { - page-break-inside: avoid; - page-break-after: avoid; - } - pre, - code { - page-break-inside: avoid; - white-space: pre-wrap; - } - .fa { - display: none !important; - } -} -.tooltiptext { - position: absolute; - visibility: hidden; - color: #fff; - background-color: #333; - -webkit-transform: translateX(-50%); - -moz-transform: translateX(-50%); - -o-transform: translateX(-50%); - -ms-transform: translateX(-50%); - transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */ - left: -8px; /* Half of the width of the icon */ - top: -35px; - font-size: 0.8em; - text-align: center; - border-radius: 6px; - padding: 5px 8px; - margin: 5px; - z-index: 1000; -} -.tooltipped .tooltiptext { - visibility: visible; -} -#searchresults a { - text-decoration: none; -} -mark { - border-radius: 2px; - padding: 0 3px 1px 3px; - margin: 0 -3px -1px -3px; - -webkit-transition: background-color 300ms linear; - -moz-transition: background-color 300ms linear; - -o-transition: background-color 300ms linear; - -ms-transition: background-color 300ms linear; - transition: background-color 300ms linear; - cursor: pointer; -} -mark.fade-out { - background-color: rgba(0,0,0,0) !important; - cursor: auto; -} -.searchbar-outer { - margin-left: auto; - margin-right: auto; - max-width: 750px; -} -#searchbar { - width: 100%; - margin: 5px auto 0px auto; - padding: 10px 16px; - -webkit-transition: box-shadow 300ms ease-in-out; - -moz-transition: box-shadow 300ms ease-in-out; - -o-transition: box-shadow 300ms ease-in-out; - -ms-transition: box-shadow 300ms ease-in-out; - transition: box-shadow 300ms ease-in-out; -} -.searchresults-header { - font-weight: bold; - font-size: 1em; - padding: 18px 0 0 5px; -} -.searchresults-outer { - margin-left: auto; - margin-right: auto; - max-width: 750px; -} -ul#searchresults { - list-style: none; - padding-left: 20px; -} -ul#searchresults li { - margin: 10px 0px; - padding: 2px; - border-radius: 2px; -} -ul#searchresults span.teaser { - display: block; - clear: both; - margin: 5px 0 0 20px; - font-size: 0.8em; -} -ul#searchresults span.teaser em { - font-weight: bold; - font-style: normal; -} diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css new file mode 100644 index 0000000000..911cdc8a41 --- /dev/null +++ b/src/theme/css/chrome.css @@ -0,0 +1,411 @@ +/* CSS for UI elements (a.k.a. chrome) */ + +@import 'variables.css'; + +::-webkit-scrollbar { + background: var(--bg); +} +::-webkit-scrollbar-thumb { + background: var(--scrollbar); +} + +#searchresults a, +.content a:link, +a:visited, +a > .hljs { + color: var(--links); +} + +/* Menu Bar */ + +#menu-bar { + position: -webkit-sticky; + position: sticky; + top: 0; + z-index: 101; + margin: auto calc(0px - var(--page-padding)); +} +#menu-bar > #menu-bar-sticky-container { + display: flex; + flex-wrap: wrap; + background-color: var(--bg); + border-bottom-color: var(--bg); + border-bottom-width: 1px; + border-bottom-style: solid; +} +.js #menu-bar > #menu-bar-sticky-container { + transition: transform 0.3s; +} +#menu-bar.bordered > #menu-bar-sticky-container { + border-bottom-color: var(--table-border-color); +} +#menu-bar i, #menu-bar .icon-button { + position: relative; + margin: 0 8px; + z-index: 10; + line-height: 50px; + cursor: pointer; + transition: color 0.5s; +} +@media only screen and (max-width: 420px) { + #menu-bar i, #menu-bar .icon-button { + margin: 0 5px; + } +} + +.icon-button { + border: none; + background: none; + padding: 0; + color: inherit; +} +.icon-button i { + margin: 0; +} + +#print-button { + margin: 0 15px; +} + +html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container { + transform: translateY(-60px); +} + +.left-buttons { margin: 0 5px; } +.no-js .left-buttons { display: none; } + +.menu-title { + display: inline-block; + font-weight: 200; + font-size: 20px; + line-height: 50px; + text-align: center; + margin: 0; + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.js .menu-title { + cursor: pointer; +} + +.menu-bar, +.menu-bar:visited, +.nav-chapters, +.nav-chapters:visited, +.mobile-nav-chapters, +.mobile-nav-chapters:visited, +.menu-bar .icon-button, +.menu-bar a i { + color: var(--icons); +} + +.menu-bar i:hover, +.menu-bar .icon-button:hover, +.nav-chapters:hover, +.mobile-nav-chapters i:hover { + color: var(--icons-hover); +} + +/* Nav Icons */ + +.nav-chapters { + font-size: 2.5em; + text-align: center; + text-decoration: none; + + position: fixed; + top: 50px; /* Height of menu-bar */ + bottom: 0; + margin: 0; + max-width: 150px; + min-width: 90px; + + display: flex; + justify-content: center; + align-content: center; + flex-direction: column; + + transition: color 0.5s; +} + +.nav-chapters:hover { text-decoration: none; } + +.nav-wrapper { + margin-top: 50px; + display: none; +} + +.mobile-nav-chapters { + font-size: 2.5em; + text-align: center; + text-decoration: none; + width: 90px; + border-radius: 5px; + background-color: var(--sidebar-bg); +} + +.previous { + float: left; +} + +.next { + float: right; + right: var(--page-padding); +} + +@media only screen and (max-width: 1080px) { + .nav-wide-wrapper { display: none; } + .nav-wrapper { display: block; } +} + +@media only screen and (max-width: 1380px) { + .sidebar-visible .nav-wide-wrapper { display: none; } + .sidebar-visible .nav-wrapper { display: block; } +} + +/* Inline code */ + +:not(pre) > .hljs { + display: inline-block; + vertical-align: middle; + padding: 0.1em 0.3em; + border-radius: 3px; + color: var(--inline-code-color); +} + +a:hover > .hljs { + text-decoration: underline; +} + +pre { + position: relative; +} +pre > .buttons { + position: absolute; + z-index: 100; + right: 5px; + top: 5px; + + color: var(--sidebar-fg); + cursor: pointer; +} +pre > .buttons :hover { + color: var(--sidebar-active); +} +pre > .buttons i { + margin-left: 8px; +} +pre > .buttons button { + color: inherit; + background: transparent; + border: none; + cursor: inherit; +} +pre > .result { + margin-top: 10px; +} + +/* Search */ + +#searchresults a { + text-decoration: none; +} + +mark { + border-radius: 2px; + padding: 0 3px 1px 3px; + margin: 0 -3px -1px -3px; + background-color: var(--search-mark-bg); + transition: background-color 300ms linear; + cursor: pointer; +} + +mark.fade-out { + background-color: rgba(0,0,0,0) !important; + cursor: auto; +} + +.searchbar-outer { + margin-left: auto; + margin-right: auto; + max-width: var(--content-max-width); +} + +#searchbar { + width: 100%; + margin: 5px auto 0px auto; + padding: 10px 16px; + transition: box-shadow 300ms ease-in-out; + border: 1px solid var(--searchbar-border-color); + border-radius: 3px; + background-color: var(--searchbar-bg); + color: var(--searchbar-fg); +} +#searchbar:focus, +#searchbar.active { + box-shadow: 0 0 3px var(--searchbar-shadow-color); +} + +.searchresults-header { + font-weight: bold; + font-size: 1em; + padding: 18px 0 0 5px; + color: var(--searchresults-header-fg); +} + +.searchresults-outer { + margin-left: auto; + margin-right: auto; + max-width: var(--content-max-width); + border-bottom: 1px dashed var(--searchresults-border-color); +} + +ul#searchresults { + list-style: none; + padding-left: 20px; +} +ul#searchresults li { + margin: 10px 0px; + padding: 2px; + border-radius: 2px; +} +ul#searchresults li.focus { + background-color: var(--searchresults-li-bg); +} +ul#searchresults span.teaser { + display: block; + clear: both; + margin: 5px 0 0 20px; + font-size: 0.8em; +} +ul#searchresults span.teaser em { + font-weight: bold; + font-style: normal; +} + +/* Sidebar */ + +.sidebar { + position: fixed; + left: 0; + top: 0; + bottom: 0; + width: var(--sidebar-width); + overflow-y: auto; + padding: 10px 10px; + font-size: 0.875em; + box-sizing: border-box; + -webkit-overflow-scrolling: touch; + overscroll-behavior-y: contain; + background-color: var(--sidebar-bg); + color: var(--sidebar-fg); +} +.js .sidebar { + transition: transform 0.3s; /* Animation: slide away */ +} +.sidebar code { + line-height: 2em; +} +.sidebar-hidden .sidebar { + transform: translateX(calc(0px - var(--sidebar-width))); +} +.sidebar::-webkit-scrollbar { + background: var(--sidebar-bg); +} +.sidebar::-webkit-scrollbar-thumb { + background: var(--scrollbar); +} + +.sidebar-visible .page-wrapper { + transform: translateX(var(--sidebar-width)); +} +@media only screen and (min-width: 620px) { + .sidebar-visible .page-wrapper { + transform: none; + margin-left: var(--sidebar-width); + } +} + +.chapter { + list-style: none outside none; + padding-left: 0; + line-height: 2.2em; +} +.chapter li { + color: var(--sidebar-non-existant); +} +.chapter li a { + color: var(--sidebar-fg); + display: block; + padding: 0; + text-decoration: none; +} +.chapter li a:hover { text-decoration: none } +.chapter li .active, +a:hover { + /* Animate color change */ + color: var(--sidebar-active); +} + +.spacer { + width: 100%; + height: 3px; + margin: 5px 0px; +} +.chapter .spacer { + background-color: var(--sidebar-spacer); +} + +@media (-moz-touch-enabled: 1), (pointer: coarse) { + .chapter li a { padding: 5px 0; } + .spacer { margin: 10px 0; } +} + +.section { + list-style: none outside none; + padding-left: 20px; + line-height: 1.9em; +} + +/* Theme Menu Popup */ + +.theme-popup { + position: absolute; + left: 10px; + z-index: 1000; + border-radius: 4px; + font-size: 0.7em; + color: var(--fg); + background: var(--theme-popup-bg); + border: 1px solid var(--theme-popup-border); + margin: 0; + padding: 0; + list-style: none; + display: none; +} +.theme-popup .default { + color: var(--icons); +} +.theme-popup .theme { + width: 100%; + border: 0; + margin: 0; + padding: 2px 10px; + line-height: 25px; + white-space: nowrap; + text-align: left; + cursor: pointer; + color: inherit; + background: inherit; + font-size: inherit; +} +.theme-popup .theme:hover { + background-color: var(--theme-hover); +} +.theme-popup .theme:hover:first-child, +.theme-popup .theme:hover:last-child { + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} diff --git a/src/theme/css/general.css b/src/theme/css/general.css new file mode 100644 index 0000000000..aedfb332b7 --- /dev/null +++ b/src/theme/css/general.css @@ -0,0 +1,144 @@ +/* Base styles and content styles */ + +@import 'variables.css'; + +html { + font-family: "Open Sans", sans-serif; + color: var(--fg); + background-color: var(--bg); + text-size-adjust: none; +} + +body { + margin: 0; + font-size: 1rem; + overflow-x: hidden; +} + +code { + font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace; + font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */ +} + +.left { float: left; } +.right { float: right; } +.hidden { display: none; } +.play-button.hidden { display: none; } + +h2, h3 { margin-top: 2.5em; } +h4, h5 { margin-top: 2em; } + +.header + .header h3, +.header + .header h4, +.header + .header h5 { + margin-top: 1em; +} + +a.header:target h1:before, +a.header:target h2:before, +a.header:target h3:before, +a.header:target h4:before { + display: inline-block; + content: "»"; + margin-left: -30px; + width: 30px; +} + +.page { + outline: 0; + padding: 0 var(--page-padding); +} +.page-wrapper { + box-sizing: border-box; +} +.js .page-wrapper { + transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */ +} + +.content { + overflow-y: auto; + padding: 0 15px; + padding-bottom: 50px; +} +.content main { + margin-left: auto; + margin-right: auto; + max-width: var(--content-max-width); +} +.content a { text-decoration: none; } +.content a:hover { text-decoration: underline; } +.content img { max-width: 100%; } +.content .header:link, +.content .header:visited { + color: var(--fg); +} +.content .header:link, +.content .header:visited:hover { + text-decoration: none; +} + +table { + margin: 0 auto; + border-collapse: collapse; +} +table td { + padding: 3px 20px; + border: 1px var(--table-border-color) solid; +} +table thead { + background: var(--table-header-bg); +} +table thead td { + font-weight: 700; + border: none; +} +table thead tr { + border: 1px var(--table-header-bg) solid; +} +/* Alternate background colors for rows */ +table tbody tr:nth-child(2n) { + background: var(--table-alternate-bg); +} + + +blockquote { + margin: 20px 0; + padding: 0 20px; + color: var(--fg); + background-color: var(--quote-bg); + border-top: .1em solid var(--quote-border); + border-bottom: .1em solid var(--quote-border); +} + + +:not(.footnote-definition) + .footnote-definition, +.footnote-definition + :not(.footnote-definition) { + margin-top: 2em; +} +.footnote-definition { + font-size: 0.9em; + margin: 0.5em 0; +} +.footnote-definition p { + display: inline; +} + +.tooltiptext { + position: absolute; + visibility: hidden; + color: #fff; + background-color: #333; + transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */ + left: -8px; /* Half of the width of the icon */ + top: -35px; + font-size: 0.8em; + text-align: center; + border-radius: 6px; + padding: 5px 8px; + margin: 5px; + z-index: 1000; +} +.tooltipped .tooltiptext { + visibility: visible; +} + \ No newline at end of file diff --git a/src/theme/css/print.css b/src/theme/css/print.css new file mode 100644 index 0000000000..5e690f7559 --- /dev/null +++ b/src/theme/css/print.css @@ -0,0 +1,54 @@ + +#sidebar, +#menu-bar, +.nav-chapters, +.mobile-nav-chapters { + display: none; +} + +#page-wrapper.page-wrapper { + transform: none; + margin-left: 0px; + overflow-y: initial; +} + +#content { + max-width: none; + margin: 0; + padding: 0; +} + +.page { + overflow-y: initial; +} + +code { + background-color: #666666; + border-radius: 5px; + + /* Force background to be printed in Chrome */ + -webkit-print-color-adjust: exact; +} + +pre > .buttons { + z-index: 2; +} + +a, a:visited, a:active, a:hover { + color: #4183c4; + text-decoration: none; +} + +h1, h2, h3, h4, h5, h6 { + page-break-inside: avoid; + page-break-after: avoid; +} + +pre, code { + page-break-inside: avoid; + white-space: pre-wrap; +} + +.fa { + display: none !important; +} diff --git a/src/theme/css/variables.css b/src/theme/css/variables.css new file mode 100644 index 0000000000..586706afae --- /dev/null +++ b/src/theme/css/variables.css @@ -0,0 +1,210 @@ + +/* Globals */ + +:root { + --sidebar-width: 300px; + --page-padding: 15px; + --content-max-width: 750px; +} + +/* Themes */ + +.ayu { + --bg: #0f1419; + --fg: #c5c5c5; + + --sidebar-bg: #14191f; + --sidebar-fg: #c8c9db; + --sidebar-non-existant: #5c6773; + --sidebar-active: #ffb454; + --sidebar-spacer: #2d334f; + + --scrollbar: var(--sidebar-fg); + + --icons: #737480; + --icons-hover: #b7b9cc; + + --links: #0096cf; + + --inline-code-color: #ffb454; + + --theme-popup-bg: #14191f; + --theme-popup-border: #5c6773; + --theme-hover: #191f26; + + --quote-bg: #262933; + --quote-border: lighten(var(--quote-bg), 5%); + + --table-border-color: lighten(var(--bg), 5%); + --table-header-bg: lighten(var(--bg), 20%); + --table-alternate-bg: lighten(var(--bg), 3%); + + --searchbar-border-color: #848484; + --searchbar-bg: #424242; + --searchbar-fg: #fff; + --searchbar-shadow-color: #d4c89f; + --searchresults-header-fg: #666; + --searchresults-border-color: #888; + --searchresults-li-bg: #252932; + --search-mark-bg: #e3b171; +} + +.coal { + --bg: #141617; + --fg: #98a3ad; + + --sidebar-bg: #292c2f; + --sidebar-fg: #a1adb8; + --sidebar-non-existant: #505254; + --sidebar-active: #3473ad; + --sidebar-spacer: #393939; + + --scrollbar: var(--sidebar-fg); + + --icons: #43484d; + --icons-hover: #b3c0cc; + + --links: #2b79a2; + + --inline-code-color: #c5c8c6;; + + --theme-popup-bg: #141617; + --theme-popup-border: #43484d; + --theme-hover: #1f2124; + + --quote-bg: #242637; + --quote-border: lighten(var(--quote-bg), 5%); + + --table-border-color: lighten(var(--bg), 5%); + --table-header-bg: lighten(var(--bg), 20%); + --table-alternate-bg: lighten(var(--bg), 3%); + + --searchbar-border-color: #aaa; + --searchbar-bg: #b7b7b7; + --searchbar-fg: #000; + --searchbar-shadow-color: #aaa; + --searchresults-header-fg: #666; + --searchresults-border-color: #98a3ad; + --searchresults-li-bg: #2b2b2f; + --search-mark-bg: #355c7d; +} + +.light { + --bg: #ffffff; + --fg: #333333; + + --sidebar-bg: #fafafa; + --sidebar-fg: #364149; + --sidebar-non-existant: #aaaaaa; + --sidebar-active: #008cff; + --sidebar-spacer: #f4f4f4; + + --scrollbar: #cccccc; + + --icons: #cccccc; + --icons-hover: #333333; + + --links: #4183c4; + + --inline-code-color: #6e6b5e; + + --theme-popup-bg: #fafafa; + --theme-popup-border: #cccccc; + --theme-hover: #e6e6e6; + + --quote-bg: #f2f7f9; + --quote-border: darken(var(--quote-bg), 5%); + + --table-border-color: darken(var(--bg), 5%); + --table-header-bg: darken(var(--bg), 20%); + --table-alternate-bg: darken(var(--bg), 3%); + + --searchbar-border-color: #aaa; + --searchbar-bg: #fafafa; + --searchbar-fg: #000; + --searchbar-shadow-color: #aaa; + --searchresults-header-fg: #666; + --searchresults-border-color: #888; + --searchresults-li-bg: #e4f2fe; + --search-mark-bg: #a2cff5; +} + +.navy { + --bg: #161923; + --fg: #bcbdd0; + + --sidebar-bg: #282d3f; + --sidebar-fg: #c8c9db; + --sidebar-non-existant: #505274; + --sidebar-active: #2b79a2; + --sidebar-spacer: #2d334f; + + --scrollbar: var(--sidebar-fg); + + --icons: #737480; + --icons-hover: #b7b9cc; + + --links: #2b79a2; + + --inline-code-color: #c5c8c6;; + + --theme-popup-bg: #161923; + --theme-popup-border: #737480; + --theme-hover: #282e40; + + --quote-bg: #262933; + --quote-border: lighten(var(--quote-bg), 5%); + + --table-border-color: lighten(var(--bg), 5%); + --table-header-bg: lighten(var(--bg), 20%); + --table-alternate-bg: lighten(var(--bg), 3%); + + --searchbar-border-color: #aaa; + --searchbar-bg: #aeaec6; + --searchbar-fg: #000; + --searchbar-shadow-color: #aaa; + --searchresults-header-fg: #5f5f71; + --searchresults-border-color: #5c5c68; + --searchresults-li-bg: #242430; + --search-mark-bg: #a2cff5; +} + +.rust { + --bg: #e1e1db; + --fg: #262625; + + --sidebar-bg: #3b2e2a; + --sidebar-fg: #c8c9db; + --sidebar-non-existant: #505254; + --sidebar-active: #e69f67; + --sidebar-spacer: #45373a; + + --scrollbar: var(--sidebar-fg); + + --icons: #737480; + --icons-hover: #262625; + + --links: #2b79a2; + + --inline-code-color: #6e6b5e; + + --theme-popup-bg: #e1e1db; + --theme-popup-border: #b38f6b; + --theme-hover: #99908a; + + --quote-bg: #c1c1bb; + --quote-border: darken(var(--quote-bg), 5%); + + --table-border-color: darken(var(--bg), 5%); + --table-header-bg: #b3a497; + --table-alternate-bg: darken(var(--bg), 3%); + + --searchbar-border-color: #aaa; + --searchbar-bg: #fafafa; + --searchbar-fg: #000; + --searchbar-shadow-color: #aaa; + --searchresults-header-fg: #666; + --searchresults-border-color: #888; + --searchresults-li-bg: #dec2a2; + --search-mark-bg: #e69f67; +} diff --git a/src/theme/index.hbs b/src/theme/index.hbs index 45be723a09..bc90b00c31 100644 --- a/src/theme/index.hbs +++ b/src/theme/index.hbs @@ -9,31 +9,36 @@ - - - - - + + + + + - + + + + {{#each additional_css}} - + {{/each}} {{#if mathjax_support}} {{/if}} - + + + {{/if}} - {{#if search_enabled}} - - - {{/if}} {{#if search_js}} diff --git a/src/theme/mod.rs b/src/theme/mod.rs index 5ebbc57f27..37d373eff3 100644 --- a/src/theme/mod.rs +++ b/src/theme/mod.rs @@ -13,7 +13,10 @@ use errors::*; pub static INDEX: &'static [u8] = include_bytes!("index.hbs"); pub static HEADER: &'static [u8] = include_bytes!("header.hbs"); -pub static CSS: &'static [u8] = include_bytes!("book.css"); +pub static CHROME_CSS: &'static [u8] = include_bytes!("css/chrome.css"); +pub static GENERAL_CSS: &'static [u8] = include_bytes!("css/general.css"); +pub static PRINT_CSS: &'static [u8] = include_bytes!("css/print.css"); +pub static VARIABLES_CSS: &'static [u8] = include_bytes!("css/variables.css"); pub static FAVICON: &'static [u8] = include_bytes!("favicon.png"); pub static JS: &'static [u8] = include_bytes!("book.js"); pub static HIGHLIGHT_JS: &'static [u8] = include_bytes!("highlight.js"); @@ -44,7 +47,10 @@ pub static FONT_AWESOME_OTF: &'static [u8] = include_bytes!("FontAwesome/fonts/F pub struct Theme { pub index: Vec, pub header: Vec, - pub css: Vec, + pub chrome_css: Vec, + pub general_css: Vec, + pub print_css: Vec, + pub variables_css: Vec, pub favicon: Vec, pub js: Vec, pub highlight_css: Vec, @@ -72,7 +78,13 @@ impl Theme { (theme_dir.join("index.hbs"), &mut theme.index), (theme_dir.join("header.hbs"), &mut theme.header), (theme_dir.join("book.js"), &mut theme.js), - (theme_dir.join("book.css"), &mut theme.css), + (theme_dir.join("css/chrome.css"), &mut theme.chrome_css), + (theme_dir.join("css/general.css"), &mut theme.general_css), + (theme_dir.join("css/print.css"), &mut theme.print_css), + ( + theme_dir.join("css/variables.css"), + &mut theme.variables_css, + ), (theme_dir.join("favicon.png"), &mut theme.favicon), (theme_dir.join("highlight.js"), &mut theme.highlight_js), (theme_dir.join("clipboard.min.js"), &mut theme.clipboard_js), @@ -107,7 +119,10 @@ impl Default for Theme { Theme { index: INDEX.to_owned(), header: HEADER.to_owned(), - css: CSS.to_owned(), + chrome_css: CHROME_CSS.to_owned(), + general_css: GENERAL_CSS.to_owned(), + print_css: PRINT_CSS.to_owned(), + variables_css: VARIABLES_CSS.to_owned(), favicon: FAVICON.to_owned(), js: JS.to_owned(), highlight_css: HIGHLIGHT_CSS.to_owned(), @@ -138,6 +153,7 @@ fn load_file_contents>(filename: P, dest: &mut Vec) -> Result #[cfg(test)] mod tests { use super::*; + use std::fs; use std::path::PathBuf; use tempfile::Builder as TempFileBuilder; @@ -154,21 +170,28 @@ mod tests { #[test] fn theme_dir_overrides_defaults() { - // Get all the non-Rust files in the theme directory - let special_files = PathBuf::from(env!("CARGO_MANIFEST_DIR")) - .join("src/theme") - .read_dir() - .unwrap() - .filter_map(|f| f.ok()) - .map(|f| f.path()) - .filter(|p| p.is_file() && !p.ends_with(".rs")); - - let temp = TempFileBuilder::new().prefix("mdbook").tempdir().unwrap(); + let files = [ + "index.hbs", + "header.hbs", + "favicon.png", + "css/chrome.css", + "css/general.css", + "css/print.css", + "css/variables.css", + "book.js", + "highlight.js", + "tomorrow-night.css", + "highlight.css", + "ayu-highlight.css", + "clipboard.min.js", + ]; + + let temp = TempFileBuilder::new().prefix("mdbook-").tempdir().unwrap(); + fs::create_dir(temp.path().join("css")).unwrap(); // "touch" all of the special files so we have empty copies - for special_file in special_files { - let filename = temp.path().join(special_file.file_name().unwrap()); - let _ = File::create(&filename); + for file in &files { + File::create(&temp.path().join(file)).unwrap(); } let got = Theme::new(temp.path()); @@ -176,7 +199,10 @@ mod tests { let empty = Theme { index: Vec::new(), header: Vec::new(), - css: Vec::new(), + chrome_css: Vec::new(), + general_css: Vec::new(), + print_css: Vec::new(), + variables_css: Vec::new(), favicon: Vec::new(), js: Vec::new(), highlight_css: Vec::new(), diff --git a/src/theme/stylus/book.styl b/src/theme/stylus/book.styl deleted file mode 100644 index a9eec8ad30..0000000000 --- a/src/theme/stylus/book.styl +++ /dev/null @@ -1,12 +0,0 @@ -@import "nib" - -@import 'general' -@import 'sidebar' -@import 'page' -@import 'menu' -@import 'nav-icons' -@import 'theme-popup' -@import 'themes' -@import 'print' -@import 'tooltip' -@import 'searchbar' diff --git a/src/theme/stylus/general.styl b/src/theme/stylus/general.styl deleted file mode 100644 index e40745b6b9..0000000000 --- a/src/theme/stylus/general.styl +++ /dev/null @@ -1,73 +0,0 @@ -html { - font-family: "Open Sans", sans-serif - color: #333 - text-size-adjust: none -} - -body { - margin: 0; - font-size: 1rem; - overflow-x: hidden; -} - -code { - font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace; - font-size: 0.875em; // please adjust the ace font size accordingly in editor.js -} - -.left { - float: left -} - -.right { - float: right -} - -.hidden { - display: none; -} - -.play-button.hidden { - display: none; -} - -h2, h3 { margin-top: 2.5em } -h4, h5 { margin-top: 2em } - -.header + .header h3, .header + .header h4, .header + .header h5 { margin-top: 1em } - -a.header:target h1:before, -a.header:target h2:before, -a.header:target h3:before, -a.header:target h4:before { - display: inline-block; - content: "»"; - margin-left: -30px; - width: 30px; -} - -table { - margin: 0 auto; - border-collapse: collapse; - - td { - padding: 3px 20px; - border: 1px solid; - } - - thead { - td { font-weight: 700; } - } -} - -:not(.footnote-definition) + .footnote-definition, -.footnote-definition + :not(.footnote-definition) { - margin-top: 2em; -} - -.footnote-definition { - font-size: 0.9em; - margin: 0.5em 0; - - p { display: inline; } -} diff --git a/src/theme/stylus/menu.styl b/src/theme/stylus/menu.styl deleted file mode 100644 index 66d0c07faa..0000000000 --- a/src/theme/stylus/menu.styl +++ /dev/null @@ -1,55 +0,0 @@ -#menu-bar { - position: -webkit-sticky - position: sticky - top: 0 - z-index: 101 - - & > #menu-bar-sticky-container { - display: flex - flex-wrap: wrap - .js & { - transition: transform 0.3s - } - } - - i, .icon-button { - position: relative - margin: 0 8px - @media only screen and (max-width: $narrow-device-max-width) { - margin: 0 5px - } - z-index: 10 - line-height: 50px - cursor: pointer - transition: color 0.5s - } - - #print-button { - margin: 0 15px - } -} - -html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container { - transform: translateY(-60px); -} - -.left-buttons { - .no-js & { display: none } - margin: 0 5px -} - -.menu-title { - display: inline-block - font-weight: 200 - font-size: 20px - line-height: 50px - text-align: center - margin: 0 - flex: 1 - white-space: nowrap - overflow: hidden - text-overflow: ellipsis - .js & { - cursor: pointer - } -} diff --git a/src/theme/stylus/nav-icons.styl b/src/theme/stylus/nav-icons.styl deleted file mode 100644 index 5d967a54dc..0000000000 --- a/src/theme/stylus/nav-icons.styl +++ /dev/null @@ -1,55 +0,0 @@ -.nav-chapters { - font-size: 2.5em - text-align: center - text-decoration: none - - position: fixed - top: 50px /* Height of menu-bar */ - bottom: 0 - margin: 0 - max-width: 150px - min-width: 90px - - display: flex - justify-content: center - align-content: center - flex-direction: column - - transition: color 0.5s -} - -.nav-chapters:hover { text-decoration: none } - -.nav-wrapper { - margin-top: 50px - display: none -} - -.mobile-nav-chapters { - font-size: 2.5em - text-align: center - text-decoration: none - width: 90px - border-radius: 5px -} - -.previous { - float: left -} - -.next { - float: right - right: $page-padding -} - -@media only screen and (max-width: $page-plus-sidebar-width) { - .nav-wide-wrapper { display: none } - .nav-wrapper { display: block } -} - -@media only screen and (max-width: $page-plus-sidebar-width + $sidebar-width) { - .sidebar-visible { - .nav-wide-wrapper { display: none } - .nav-wrapper { display: block } - } -} diff --git a/src/theme/stylus/page.styl b/src/theme/stylus/page.styl deleted file mode 100644 index d0276df8c9..0000000000 --- a/src/theme/stylus/page.styl +++ /dev/null @@ -1,43 +0,0 @@ -@require 'variables' - -.page-wrapper { - box-sizing: border-box - - // Animation: slide away - .js & { - transition: margin-left 0.3s ease, transform 0.3s ease - } -} - -.sidebar-visible .page-wrapper { - transform: translateX($sidebar-width) - - @media only screen and (min-width: $sidebar-reflow-width) { - transform: none - margin-left: $sidebar-width - } -} - -.page { - outline: 0 - padding: 0 $page-padding -} - -.content { - overflow-y: auto - padding: 0 15px - padding-bottom: 50px - - main { - margin-left: auto - margin-right: auto - max-width: $content-max-width - } - - a { - text-decoration: none; - &:hover { text-decoration: underline; } - } - - img { max-width: 100%; } -} diff --git a/src/theme/stylus/print.styl b/src/theme/stylus/print.styl deleted file mode 100644 index 931af1a4d3..0000000000 --- a/src/theme/stylus/print.styl +++ /dev/null @@ -1,56 +0,0 @@ -@media only print { - - #sidebar, - #menu-bar, - .nav-chapters, - .mobile-nav-chapters { - display: none - } - - #page-wrapper.page-wrapper { - transform: none; - margin-left: 0px; - overflow-y: initial; - } - - #content { - max-width: none; - margin: 0; - padding: 0; - } - - .page { - overflow-y: initial; - } - - code { - background-color: #666666 - border-radius: 5px - - /* Force background to be printed in Chrome */ - -webkit-print-color-adjust: exact - } - - pre > .buttons { - z-index: 2; - } - - a, a:visited, a:active, a:hover { - color: #4183c4 - text-decoration: none - } - - h1, h2, h3, h4, h5, h6 { - page-break-inside: avoid - page-break-after: avoid - } - - pre, code { - page-break-inside: avoid - white-space: pre-wrap - } - - .fa { - display: none !important - } -} diff --git a/src/theme/stylus/searchbar.styl b/src/theme/stylus/searchbar.styl deleted file mode 100644 index 4d1914ba32..0000000000 --- a/src/theme/stylus/searchbar.styl +++ /dev/null @@ -1,66 +0,0 @@ -@require 'variables' - -#searchresults a { - text-decoration: none; -} - -mark { - border-radius: 2px; - padding: 0 3px 1px 3px; - margin: 0 -3px -1px -3px; - transition: background-color 300ms linear; - cursor: pointer; -} - -mark.fade-out { - background-color: rgba(0,0,0,0) !important; - cursor: auto; -} - -.searchbar-outer { - margin-left: auto; - margin-right: auto; - max-width: $content-max-width; -} - -#searchbar { - width: 100%; - margin: 5px auto 0px auto; - padding: 10px 16px; - transition: box-shadow 300ms ease-in-out; -} - -.searchresults-header { - font-weight: bold; - font-size: 1em; - padding: 18px 0 0 5px; -} - -.searchresults-outer { - margin-left: auto; - margin-right: auto; - max-width: $content-max-width; -} - -ul#searchresults { - list-style: none; - padding-left: 20px; - - li { - margin: 10px 0px; - padding: 2px; - border-radius: 2px; - } - - span.teaser { - display: block; - clear: both; - margin: 5px 0 0 20px; - font-size: 0.8em; - } - - span.teaser em { - font-weight: bold; - font-style: normal; - } -} diff --git a/src/theme/stylus/sidebar.styl b/src/theme/stylus/sidebar.styl deleted file mode 100644 index 5d30d8b8bb..0000000000 --- a/src/theme/stylus/sidebar.styl +++ /dev/null @@ -1,56 +0,0 @@ -@require 'variables' - -.sidebar { - position: fixed - left: 0 - top: 0 - bottom: 0 - width: $sidebar-width - overflow-y: auto - padding: 10px 10px - font-size: 0.875em - box-sizing: border-box - -webkit-overflow-scrolling: touch - overscroll-behavior-y: contain; - - // Animation: slide away - .js & { - transition: transform 0.3s - } - - code { - line-height: 2em; - } -} - -.sidebar-hidden .sidebar { - transform: translateX(- $sidebar-width) -} - -.chapter { - list-style: none outside none - padding-left: 0 - line-height: 2.2em - - li a { - display: block; - padding: 0 - text-decoration: none - - @media (-moz-touch-enabled: 1), (pointer: coarse) { padding: 5px 0; } - &:hover { text-decoration: none } - } - - .spacer { - width: 100% - height: 3px - margin: 5px 0px - @media (-moz-touch-enabled: 1), (pointer: coarse) { margin: 10px 0; } - } -} - -.section { - list-style: none outside none - padding-left: 20px - line-height: 1.9em -} diff --git a/src/theme/stylus/theme-popup.styl b/src/theme/stylus/theme-popup.styl deleted file mode 100644 index b0c956e6f3..0000000000 --- a/src/theme/stylus/theme-popup.styl +++ /dev/null @@ -1,31 +0,0 @@ -.theme-popup { - position: absolute - left: 10px - - z-index: 1000; - - border-radius: 4px - font-size: 0.7em - - .theme { - display: inline - border: 0 - margin: 0 - padding: 2px 10px - line-height: 25px - width: 100% - white-space: nowrap - text-align: left - cursor: pointer - color inherit - background: inherit; - font-size: inherit; - - &:hover:first-child, - &:hover:last-child { - border-top-left-radius: inherit; - border-top-right-radius: inherit; - } - } - -} \ No newline at end of file diff --git a/src/theme/stylus/themes/ayu.styl b/src/theme/stylus/themes/ayu.styl deleted file mode 100644 index 1c19ff67c6..0000000000 --- a/src/theme/stylus/themes/ayu.styl +++ /dev/null @@ -1,41 +0,0 @@ -$theme-name = 'ayu' - -$bg = #0f1419 -$fg = #c5c5c5 - -$sidebar-bg = #14191f -$sidebar-fg = #c8c9db -$sidebar-non-existant = #5c6773 -$sidebar-active = #ffb454 -$sidebar-spacer = #2d334f - -$scrollbar = $sidebar-fg - -$icons = #737480 -$icons-hover = #b7b9cc - -$links = #0096cf - -$inline-code-color = #ffb454 - -$theme-popup-bg = #14191f -$theme-popup-border = #5c6773 -$theme-hover = #191f26 - -$quote-bg = #262933 -$quote-border = lighten($quote-bg, 5%) - -$table-border-color = lighten($bg, 5%) -$table-header-bg = lighten($bg, 20%) -$table-alternate-bg = lighten($bg, 3%) - -$searchbar-border-color = #848484 -$searchbar-bg = #424242 -$searchbar-fg = #fff -$searchbar-shadow-color = #d4c89f -$searchresults-header-fg = #666 -$searchresults-border-color = #888 -$searchresults-li-bg = #252932 -$search-mark-bg = #e3b171 - -@import 'base' diff --git a/src/theme/stylus/themes/base.styl b/src/theme/stylus/themes/base.styl deleted file mode 100644 index 939572fc06..0000000000 --- a/src/theme/stylus/themes/base.styl +++ /dev/null @@ -1,221 +0,0 @@ -.{unquote($theme-name)} { - - color: $fg - background-color: $bg - - .content .header:link, .content .header:visited { - color: $fg; - - &:hover { - text-decoration: none; - } - } - - .menu-bar { - margin: auto (- $page-padding); - - & > #menu-bar-sticky-container { - background-color: $bg - border-bottom-color: $bg - border-bottom-width: 1px - border-bottom-style: solid - } - - &.bordered > #menu-bar-sticky-container { - border-bottom-color: $table-border-color - } - } - - $table-border-color - - .sidebar { - background-color: $sidebar-bg - color: $sidebar-fg - - &::-webkit-scrollbar { - background: $sidebar-bg; - } - - &::-webkit-scrollbar-thumb { - background: $scrollbar; - } - } - - .chapter li { - color: $sidebar-non-existant - - a { color: $sidebar-fg } - - .active, - a:hover, { - /* Animate color change */ - color: $sidebar-active - } - } - - .chapter .spacer { - background-color: $sidebar-spacer - } - - .menu-bar, - .menu-bar:visited, - .nav-chapters, - .nav-chapters:visited, - .mobile-nav-chapters, - .mobile-nav-chapters:visited, - .menu-bar .icon-button, - .menu-bar a i { - color: $icons - } - - .menu-bar i:hover, - .menu-bar .icon-button:hover, - .nav-chapters:hover, - .mobile-nav-chapters i:hover { - color: $icons-hover - } - - .mobile-nav-chapters i:hover { - color: $sidebar-fg - } - - .mobile-nav-chapters { - background-color: $sidebar-bg - } - - #searchresults a, - .content a:link, - a:visited, - a > .hljs { - color: $links - } - - .theme-popup { - color: $fg - background: $theme-popup-bg - border: 1px solid $theme-popup-border - margin: 0; - padding: 0; - list-style: none; - display: none; - - .theme:hover { background-color: $theme-hover } - - .default { color: $icons } - } - - blockquote { - margin: 20px 0; - padding: 0 20px; - color: $fg; - background-color: $quote-bg; - border-top: .1em solid $quote-border; - border-bottom: .1em solid $quote-border; - } - - - table { - - td { - border-color: $table-border-color; - } - - // Alternate background colors for rows - tbody tr:nth-child(2n) { - background: $table-alternate-bg; - } - - thead { - background: $table-header-bg; - td { border: none; } - tr { border: 1px $table-header-bg solid; } - } - } - - - /* Inline code */ - :not(pre) > .hljs { - display: inline-block; - vertical-align: middle; - padding: 0.1em 0.3em; - border-radius: 3px; - color: $inline-code-color; - } - - a:hover > .hljs { - text-decoration: underline; - } - - pre { - position: relative; - - & > .buttons { - position: absolute; - z-index: 100; - right: 5px; - top: 5px; - - color: $sidebar-fg; - cursor: pointer; - - :hover { color: $sidebar-active; } - i { margin-left: 8px; } - button { - color: inherit; - background: transparent; - border: none; - cursor: inherit; - } - } - - & > .result { margin-top: 10px; } - - } - - .icon-button { - border: none; - background: none; - padding: 0; - color: inherit; - - i { - margin: 0; - } - } - - ::-webkit-scrollbar { - background: $bg; - } - - ::-webkit-scrollbar-thumb { - background: $scrollbar; - } - - /* Search */ - #searchbar { - border: 1px solid $searchbar-border-color; - border-radius: 3px; - background-color: $searchbar-bg; - color: $searchbar-fg - - &:focus, &.active { - box-shadow: 0 0 3px $searchbar-shadow-color; - } - } - - .searchresults-header { - color: $searchresults-header-fg; - } - - .searchresults-outer { - border-bottom: 1px dashed $searchresults-border-color; - } - - ul#searchresults li.focus { - background-color: $searchresults-li-bg; - } - - mark { - background-color: $search-mark-bg; - } -} diff --git a/src/theme/stylus/themes/coal.styl b/src/theme/stylus/themes/coal.styl deleted file mode 100644 index 4f9364ea4e..0000000000 --- a/src/theme/stylus/themes/coal.styl +++ /dev/null @@ -1,41 +0,0 @@ -$theme-name = 'coal' - -$bg = #141617 -$fg = #98a3ad - -$sidebar-bg = #292c2f -$sidebar-fg = #a1adb8 -$sidebar-non-existant = #505254 -$sidebar-active = #3473ad -$sidebar-spacer = #393939 - -$scrollbar = $sidebar-fg - -$icons = #43484d -$icons-hover = #b3c0cc - -$links = #2b79a2 - -$inline-code-color = #c5c8c6; - -$theme-popup-bg = #141617 -$theme-popup-border = #43484d -$theme-hover = #1f2124 - -$quote-bg = #242637 -$quote-border = lighten($quote-bg, 5%) - -$table-border-color = lighten($bg, 5%) -$table-header-bg = lighten($bg, 20%) -$table-alternate-bg = lighten($bg, 3%) - -$searchbar-border-color = #aaa -$searchbar-bg = #b7b7b7 -$searchbar-fg = #000 -$searchbar-shadow-color = #aaa -$searchresults-header-fg = #666 -$searchresults-border-color = #98a3ad -$searchresults-li-bg = #2b2b2f -$search-mark-bg = #355c7d - -@import 'base' diff --git a/src/theme/stylus/themes/index.styl b/src/theme/stylus/themes/index.styl deleted file mode 100644 index be06b6fc2d..0000000000 --- a/src/theme/stylus/themes/index.styl +++ /dev/null @@ -1,5 +0,0 @@ -@import 'light' -@import 'coal' -@import 'navy' -@import 'rust' -@import 'ayu' diff --git a/src/theme/stylus/themes/light.styl b/src/theme/stylus/themes/light.styl deleted file mode 100644 index d2b77e2119..0000000000 --- a/src/theme/stylus/themes/light.styl +++ /dev/null @@ -1,41 +0,0 @@ -$theme-name = 'light' - -$bg = #ffffff -$fg = #333333 - -$sidebar-bg = #fafafa -$sidebar-fg = #364149 -$sidebar-non-existant = #aaaaaa -$sidebar-active = #008cff -$sidebar-spacer = #f4f4f4 - -$scrollbar = #cccccc - -$icons = #cccccc -$icons-hover = #333333 - -$links = #4183c4 - -$inline-code-color = #6e6b5e - -$theme-popup-bg = #fafafa -$theme-popup-border = #cccccc -$theme-hover = #e6e6e6 - -$quote-bg = #f2f7f9 -$quote-border = darken($quote-bg, 5%) - -$table-border-color = darken($bg, 5%) -$table-header-bg = darken($bg, 20%) -$table-alternate-bg = darken($bg, 3%) - -$searchbar-border-color = #aaa -$searchbar-bg = #fafafa -$searchbar-fg = #000 -$searchbar-shadow-color = #aaa -$searchresults-header-fg = #666 -$searchresults-border-color = #888 -$searchresults-li-bg = #e4f2fe -$search-mark-bg = #a2cff5 - -@import 'base' diff --git a/src/theme/stylus/themes/navy.styl b/src/theme/stylus/themes/navy.styl deleted file mode 100644 index d4c038afa4..0000000000 --- a/src/theme/stylus/themes/navy.styl +++ /dev/null @@ -1,41 +0,0 @@ -$theme-name = 'navy' - -$bg = #161923 -$fg = #bcbdd0 - -$sidebar-bg = #282d3f -$sidebar-fg = #c8c9db -$sidebar-non-existant = #505274 -$sidebar-active = #2b79a2 -$sidebar-spacer = #2d334f - -$scrollbar = $sidebar-fg - -$icons = #737480 -$icons-hover = #b7b9cc - -$links = #2b79a2 - -$inline-code-color = #c5c8c6; - -$theme-popup-bg = #161923 -$theme-popup-border = #737480 -$theme-hover = #282e40 - -$quote-bg = #262933 -$quote-border = lighten($quote-bg, 5%) - -$table-border-color = lighten($bg, 5%) -$table-header-bg = lighten($bg, 20%) -$table-alternate-bg = lighten($bg, 3%) - -$searchbar-border-color = #aaa -$searchbar-bg = #aeaec6 -$searchbar-fg = #000 -$searchbar-shadow-color = #aaa -$searchresults-header-fg = #5f5f71 -$searchresults-border-color = #5c5c68 -$searchresults-li-bg = #242430 -$search-mark-bg = #a2cff5 - -@import 'base' diff --git a/src/theme/stylus/themes/rust.styl b/src/theme/stylus/themes/rust.styl deleted file mode 100644 index c5a2eb8f9b..0000000000 --- a/src/theme/stylus/themes/rust.styl +++ /dev/null @@ -1,41 +0,0 @@ -$theme-name = 'rust' - -$bg = #e1e1db -$fg = #262625 - -$sidebar-bg = #3b2e2a -$sidebar-fg = #c8c9db -$sidebar-non-existant = #505254 -$sidebar-active = #e69f67 -$sidebar-spacer = #45373a - -$scrollbar = $sidebar-fg - -$icons = #737480 -$icons-hover = #262625 - -$links = #2b79a2 - -$inline-code-color = #6e6b5e; - -$theme-popup-bg = #e1e1db -$theme-popup-border = #b38f6b -$theme-hover = #99908a - -$quote-bg = #c1c1bb -$quote-border = darken($quote-bg, 5%) - -$table-border-color = darken($bg, 5%) -$table-header-bg = #b3a497 -$table-alternate-bg = darken($bg, 3%) - -$searchbar-border-color = #aaa -$searchbar-bg = #fafafa -$searchbar-fg = #000 -$searchbar-shadow-color = #aaa -$searchresults-header-fg = #666 -$searchresults-border-color = #888 -$searchresults-li-bg = #dec2a2 -$search-mark-bg = #e69f67 - -@import 'base' diff --git a/src/theme/stylus/tooltip.styl b/src/theme/stylus/tooltip.styl deleted file mode 100644 index f8f89f9878..0000000000 --- a/src/theme/stylus/tooltip.styl +++ /dev/null @@ -1,18 +0,0 @@ -.tooltiptext { - position: absolute; - visibility: hidden; - color: #fff; - background-color: #333; - transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */ - left: -8px; /* Half of the width of the icon */ - top: -35px; - font-size: 0.8em; - text-align: center; - border-radius: 6px; - padding: 5px 8px; - margin: 5px; - z-index: 1000; -} -.tooltipped .tooltiptext { - visibility: visible; -} diff --git a/src/theme/stylus/variables.styl b/src/theme/stylus/variables.styl deleted file mode 100644 index 6ffbb73b1f..0000000000 --- a/src/theme/stylus/variables.styl +++ /dev/null @@ -1,7 +0,0 @@ -$sidebar-width = 300px -$page-padding = 15px -$content-max-width = 750px -$content-min-width = 320px -$page-plus-sidebar-width = $content-max-width + $sidebar-width + $page-padding * 2 -$sidebar-reflow-width = $sidebar-width + $content-min-width -$narrow-device-max-width = 420px