Merge css for including in book

And fix some small errors from Stylus -> CSS conversion.
This commit is contained in:
Matt Ickstadt 2018-03-05 14:06:02 -06:00
parent d8d7ccbb2d
commit 97fe5a2a92
25 changed files with 822 additions and 966 deletions

View File

@ -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`. 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 ### Making a pull-request
When you feel comfortable that your changes could be integrated into mdBook, you can create a pull-request on GitHub. When you feel comfortable that your changes could be integrated into mdBook, you can create a pull-request on GitHub.

View File

@ -8,7 +8,6 @@ repository = "https://github.com/rust-lang-nursery/mdBook"
keywords = ["book", "gitbook", "rustbook", "markdown"] keywords = ["book", "gitbook", "rustbook", "markdown"]
license = "MPL-2.0" license = "MPL-2.0"
readme = "README.md" readme = "README.md"
build = "build.rs"
exclude = [ exclude = [
"book-example/*", "book-example/*",
"src/theme/stylus/**", "src/theme/stylus/**",
@ -54,9 +53,6 @@ ws = { version = "0.7", optional = true}
elasticlunr-rs = { version = "1", optional = true } elasticlunr-rs = { version = "1", optional = true }
ammonia = { version = "1.1", optional = true } ammonia = { version = "1.1", optional = true }
[build-dependencies]
error-chain = "0.11"
[dev-dependencies] [dev-dependencies]
select = "0.4" select = "0.4"
pretty_assertions = "0.4" pretty_assertions = "0.4"

View File

@ -1,98 +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);

View File

@ -127,8 +127,17 @@ impl BookBuilder {
let mut index = File::create(themedir.join("index.hbs"))?; let mut index = File::create(themedir.join("index.hbs"))?;
index.write_all(theme::INDEX)?; index.write_all(theme::INDEX)?;
let mut css = File::create(themedir.join("book.css"))?; let mut chrome_css = File::create(themedir.join("chrome.css"))?;
css.write_all(theme::CSS)?; chrome_css.write_all(theme::CHROME_CSS)?;
let mut general_css = File::create(themedir.join("general.css"))?;
general_css.write_all(theme::GENERAL_CSS)?;
let mut variables_css = File::create(themedir.join("variables.css"))?;
variables_css.write_all(theme::VARIABLES_CSS)?;
let mut print_css = File::create(themedir.join("print.css"))?;
print_css.write_all(theme::PRINT_CSS)?;
let mut favicon = File::create(themedir.join("favicon.png"))?; let mut favicon = File::create(themedir.join("favicon.png"))?;
favicon.write_all(theme::FAVICON)?; favicon.write_all(theme::FAVICON)?;

View File

@ -144,7 +144,10 @@ impl HtmlHandlebars {
use utils::fs::write_file; use utils::fs::write_file;
write_file(destination, "book.js", &theme.js)?; write_file(destination, "book.js", &theme.js)?;
write_file(destination, "book.css", &theme.css)?; write_file(destination, "css/chrome.css", &theme.chrome_css)?;
write_file(destination, "css/general.css", &theme.general_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, "favicon.png", &theme.favicon)?;
write_file(destination, "highlight.css", &theme.highlight_css)?; write_file(destination, "highlight.css", &theme.highlight_css)?;
write_file(destination, "tomorrow-night.css", &theme.tomorrow_night_css)?; write_file(destination, "tomorrow-night.css", &theme.tomorrow_night_css)?;

View File

@ -1,11 +0,0 @@
@import "general.css";
@import "sidebar.css";
@import "page.css";
@import "menu.css";
@import "nav-icons.css";
@import "theme-popup.css";
@import "themes/base.css";
@import "print.css";
@import "tooltip.css";
@import "searchbar.css";

364
src/theme/css/chrome.css Normal file
View File

@ -0,0 +1,364 @@
/* 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);
/* Animation: slide away */
transition: transform 0.5s
}
.sidebar::-webkit-scrollbar {
background: var(--sidebar-bg);
}
.sidebar::-webkit-scrollbar-thumb {
background: var(--scrollbar);
}
.sidebar code {
line-height: 2em;
}
.sidebar-hidden .sidebar {
transform: translateX(calc(0px - 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 .active,
a:hover {
/* Animate color change */
color: var(--sidebar-active);
}
@media (-moz-touch-enabled: 1), (pointer: coarse) {
.chapter li a {
padding: 5px 0;
}
}
.chapter li a:hover {
text-decoration: none;
}
.chapter .spacer {
background-color: var(--sidebar-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;
}
.section li {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/* Menu */
#menu-bar {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 101;
margin: auto (- var(--page-padding));
}
#menu-bar > #menu-bar-sticky-container {
display: flex;
flex-wrap: wrap;
transition: transform 0.5s, border-bottom-color 0.5s;
background-color: var(--bg);
border-bottom-color: var(--bg);
border-bottom-width: 1px;
border-bottom-style: solid;
}
#menu-bar.bordered > #menu-bar-sticky-container {
border-bottom-color: var(--table-border-color);
}
#menu-bar i, .icon-button {
position: relative;
margin: 0 10px;
z-index: 10;
line-height: 50px;
transition: color 0.5s;
}
#menu-bar i:hover,
#menu-bar .icon-button:hover {
cursor: pointer;
}
html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container {
transform: translateY(-60px);
}
.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;
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);
}
.mobile-nav-chapters i:hover {
color: var(--sidebar-fg);
}
.mobile-nav-chapters {
background-color: var(--sidebar-bg);
}
/* 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;
}
.previous {
float: left;
}
.next {
float: right;
right: var(--page-padding);
}
@media only screen and (max-width: var(--page-plus-sidebar-width)) {
.nav-wide-wrapper { display: none; }
.nav-wrapper { display: block; }
}
@media only screen and (max-width: calc(var(--page-plus-sidebar-width) + var(--sidebar-width))) {
.sidebar-visible .nav-wide-wrapper { display: none; }
.sidebar-visible .nav-wrapper { display: block; }
}
/* Theme 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 {
display: inline;
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;
}
/* Searchbar */
#searchresults a {
text-decoration: none;
}
mark {
background-color: var(--search-mark-bg);
border-radius: 2px;
padding: 0 3px 1px 3px;
margin: 0 -3px -1px -3px;
transition: background-color 300ms linear;
}
.fade-out {
background-color: rgba(0,0,0,0) !important
}
.searchbar-outer {
display: none;
margin-left: auto;
margin-right: auto;
max-width: var(--content-max-width);
}
#searchbar {
display: block;
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 {
color: var(--searchresults-header-fg);
font-weight: bold;
font-size: 1em;
padding: 18px 0 0 5px;
}
.searchresults-outer {
border-bottom: 1px dashed var(--searchresults-border-color);
display: none;
margin-left: auto;
margin-right: auto;
max-width: var(--content-max-width);
}
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;
}

View File

@ -1,6 +1,9 @@
html { html {
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
color: #333; color: #333;
color: var(--fg);
background-color: var(--bg);
} }
body { body {
@ -54,9 +57,22 @@ table td {
padding: 3px 20px; padding: 3px 20px;
border: 1px solid; border: 1px solid;
} }
table thead {
background: var(--table-header-bg);
}
table thead td { table thead td {
font-weight: 700; font-weight: 700;
border: none;
}
table thead tr {
border: 1px var(--table-header-bg) solid;
}
table td {
border-color: var(--table-border-color);
}
/* Alternate background colors for rows */
table tbody tr:nth-child(2n) {
background: var(--table-alternate-bg);
} }
:not(.footnote-definition) + .footnote-definition, :not(.footnote-definition) + .footnote-definition,
@ -72,3 +88,155 @@ table thead td {
.footnote-definition p { .footnote-definition p {
display: inline; display: inline;
} }
::-webkit-scrollbar {
background: var(--bg);
}
::-webkit-scrollbar-thumb {
background: var(--scrollbar);
}
.icon-button {
border: none;
background: none;
padding: 0;
color: inherit;
}
.icon-button i {
margin: 0;
}
#searchresults a,
.content a:link,
a:visited,
a > .hljs {
color: var(--links);
}
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);
}
/* 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;
}
.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;
}
.page-wrapper {
box-sizing: border-box;
/* Animation: slide away */
transition: padding-left 0.5s, margin-left 0.5s;
}
.sidebar-visible .page-wrapper {
padding-left: var(--sidebar-width);
}
@media only screen and (max-width: var(--page-plus-sidebar-width) - 1) {
.sidebar-visible .page-wrapper {
padding-left: 0;
margin-left: var(--sidebar-width);
}
}
.page {
outline: 0;
padding: 0 var(--page-padding);
}
.content {
margin-left: auto;
margin-right: auto;
max-width: var(--content-max-width);
padding-bottom: 50px;
}
.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);
pointer: cursor;
}
.content .header:link,
.content .header:visited:hover {
text-decoration: none;
}

View File

@ -1,44 +0,0 @@
#menu-bar {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 101;
}
#menu-bar > #menu-bar-sticky-container {
display: flex;
flex-wrap: wrap;
transition: transform 0.5s, border-bottom-color 0.5s;
}
#menu-bar i, .icon-button {
position: relative;
margin: 0 10px;
z-index: 10;
line-height: 50px;
transition: color 0.5s;
}
#menu-bar i:hover,
#menu-bar .icon-button:hover {
cursor: pointer;
}
html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container {
transform: translateY(-60px);
}
.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;
cursor: pointer;
}

View File

@ -1,53 +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: var(--page-padding);
}
@media only screen and (max-width: var(--page-plus-sidebar-width)) {
.nav-wide-wrapper { display: none; }
.nav-wrapper { display: block; }
}
@media only screen and (max-width: var(--page-plus-sidebar-width) + var(--sidebar-width)) {
.sidebar-visible .nav-wide-wrapper { display: none; }
.sidebar-visible .nav-wrapper { display: block; }
}

View File

@ -1,43 +0,0 @@
@import "variables.css";
.page-wrapper {
box-sizing: border-box;
/* Animation: slide away */
transition: padding-left 0.5s, margin-left 0.5s;
}
.sidebar-visible .page-wrapper {
padding-left: var(--sidebar-width);
}
@media only screen and (max-width: var(--page-plus-sidebar-width) - 1) {
.sidebar-visible .page-wrapper {
padding-left: 0;
margin-left: var(--sidebar-width);
}
}
.page {
outline: 0;
padding: 0 var(--page-padding);
}
.content {
margin-left: auto;
margin-right: auto;
max-width: var(--content-max-width);
padding-bottom: 50px;
}
.content a {
text-decoration: none;
}
.content a:hover {
text-decoration: underline;
}
.content img {
max-width: 100%;
}

View File

@ -1,4 +1,3 @@
@media only print {
#sidebar, #sidebar,
#menu-bar, #menu-bar,
@ -52,4 +51,3 @@
page-break-inside: avoid; page-break-inside: avoid;
white-space: pre-wrap; white-space: pre-wrap;
} }
}

View File

@ -1,67 +0,0 @@
@import "variables.css";
#searchresults a {
text-decoration: none;
}
mark {
border-radius: 2px;
padding: 0 3px 1px 3px;
margin: 0 -3px -1px -3px;
transition: background-color 300ms linear;
}
.fade-out {
background-color: rgba(0,0,0,0) !important
}
.searchbar-outer {
display: none;
margin-left: auto;
margin-right: auto;
max-width: var(--content-max-width);
}
#searchbar {
display: block;
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 {
display: none;
margin-left: auto;
margin-right: auto;
max-width: var(--content-max-width);
}
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;
}

View File

@ -1,72 +0,0 @@
@import "variables.css";
.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;
/* Animation: slide away */
transition: transform 0.5s
}
.sidebar code {
line-height: 2em;
}
.sidebar-hidden .sidebar {
transform: translateX(- var(--sidebar-width));
}
.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;
}
.section li {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

View File

@ -1,29 +0,0 @@
.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;
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;
}

View File

@ -1,40 +0,0 @@
.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;
}

View File

@ -1,239 +0,0 @@
@import "ayu.css";
@import "coal.css";
@import "light.css";
@import "navy.css";
@import "rust.css";
* {
color: var(--fg);
background-color: var(--bg);
}
.content .header:link,
.content .header:visited {
color: var(--fg);
pointer: cursor;
}
.content .header:link,
.content .header:visited:hover {
text-decoration: none;
}
.menu-bar {
margin: auto (- var(--page-padding));
}
.menu-bar > #menu-bar-sticky-container {
background-color: var(--bg);
border-bottom-color: var(--bg);
border-bottom-width: 1px;
border-bottom-style: solid;
}
.menu-bar.bordered > #menu-bar-sticky-container {
border-bottom-color: var(--table-border-color);
}
.sidebar {
background-color: var(--sidebar-bg);
color: var(--sidebar-fg);
}
.sidebar::-webkit-scrollbar {
background: var(--sidebar-bg);
}
.sidebar::-webkit-scrollbar-thumb {
background: var(--scrollbar);
}
.chapter li {
color: var(--sidebar-non-existant);
}
.chapter li a {
color: var(--sidebar-fg);
}
.chapter li .active,
a:hover {
/* Animate color change */
color: var(--sidebar-active);
}
.chapter .spacer {
background-color: var(--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: var(--icons);
}
.menu-bar i:hover,
.menu-bar .icon-button:hover,
.nav-chapters:hover,
.mobile-nav-chapters i:hover {
color: var(--icons-hover);
}
.mobile-nav-chapters i:hover {
color: var(--sidebar-fg);
}
.mobile-nav-chapters {
background-color: var(--sidebar-bg);
}
#searchresults a,
.content a:link,
a:visited,
a > .hljs {
color: var(--links);
}
.theme-popup {
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 .theme:hover {
background-color: var(--theme-hover);
}
.theme-popup .default {
color: var(--icons);
}
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);
}
table td {
border-color: var(--table-border-color);
}
/* Alternate background colors for rows */
table tbody tr:nth-child(2n) {
background: var(--table-alternate-bg);
}
table thead {
background: var(--table-header-bg);
}
table thead td {
border: none;
}
table thead tr {
border: 1px var(--table-header-bg) solid;
}
/* 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;
}
.icon-button {
border: none;
background: none;
padding: 0;
color: inherit;
}
.icon-button i {
margin: 0;
}
::-webkit-scrollbar {
background: var(--bg);
}
::-webkit-scrollbar-thumb {
background: var(--scrollbar);
}
/* Search */
#searchbar {
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 {
color: var(--searchresults-header-fg);
}
.searchresults-outer {
border-bottom: 1px dashed var(--searchresults-border-color);
}
ul#searchresults li.focus {
background-color: var(--searchresults-li-bg);
}
mark {
background-color: var(--search-mark-bg);
}

View File

@ -1,40 +0,0 @@
.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;
}

View File

@ -1,40 +0,0 @@
.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;
}

View File

@ -1,40 +0,0 @@
.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;
}

View File

@ -1,40 +0,0 @@
.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;
}

View File

@ -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;
}

View File

@ -2,5 +2,206 @@
--sidebar-width: 300px; --sidebar-width: 300px;
--page-padding: 15px; --page-padding: 15px;
--content-max-width: 750px; --content-max-width: 750px;
--page-plus-sidebar-width: var(--content-max-width) + var(--sidebar-width) + var(--page-padding) * 2; --page-plus-sidebar-width: calc(var(--content-max-width) + var(--sidebar-width) + var(--page-padding) * 2);
}
/* 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;
} }

View File

@ -11,7 +11,10 @@
<base href="{{ path_to_root }}"> <base href="{{ path_to_root }}">
<link rel="stylesheet" href="book.css"> <link rel="stylesheet" href="css/variables.css">
<link rel="stylesheet" href="css/general.css">
<link rel="stylesheet" href="css/chrome.css">
<link rel="stylesheet" href="css/print.css" media="print">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:500" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:500" rel="stylesheet" type="text/css">

View File

@ -13,8 +13,11 @@ use errors::*;
pub static INDEX: &'static [u8] = include_bytes!("index.hbs"); pub static INDEX: &'static [u8] = include_bytes!("index.hbs");
pub static HEADER: &'static [u8] = include_bytes!("header.hbs"); pub static HEADER: &'static [u8] = include_bytes!("header.hbs");
pub static CSS: &'static [u8] = include_bytes!("book.css");
pub static FAVICON: &'static [u8] = include_bytes!("favicon.png"); pub static FAVICON: &'static [u8] = include_bytes!("favicon.png");
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 JS: &'static [u8] = include_bytes!("book.js"); pub static JS: &'static [u8] = include_bytes!("book.js");
pub static HIGHLIGHT_JS: &'static [u8] = include_bytes!("highlight.js"); pub static HIGHLIGHT_JS: &'static [u8] = include_bytes!("highlight.js");
pub static TOMORROW_NIGHT_CSS: &'static [u8] = include_bytes!("tomorrow-night.css"); pub static TOMORROW_NIGHT_CSS: &'static [u8] = include_bytes!("tomorrow-night.css");
@ -45,7 +48,10 @@ pub static FONT_AWESOME_OTF: &'static [u8] = include_bytes!("_FontAwesome/fonts/
pub struct Theme { pub struct Theme {
pub index: Vec<u8>, pub index: Vec<u8>,
pub header: Vec<u8>, pub header: Vec<u8>,
pub css: Vec<u8>, pub chrome_css: Vec<u8>,
pub general_css: Vec<u8>,
pub print_css: Vec<u8>,
pub variables_css: Vec<u8>,
pub favicon: Vec<u8>, pub favicon: Vec<u8>,
pub js: Vec<u8>, pub js: Vec<u8>,
pub highlight_css: Vec<u8>, pub highlight_css: Vec<u8>,
@ -73,7 +79,10 @@ impl Theme {
(theme_dir.join("index.hbs"), &mut theme.index), (theme_dir.join("index.hbs"), &mut theme.index),
(theme_dir.join("header.hbs"), &mut theme.header), (theme_dir.join("header.hbs"), &mut theme.header),
(theme_dir.join("book.js"), &mut theme.js), (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("favicon.png"), &mut theme.favicon),
(theme_dir.join("highlight.js"), &mut theme.highlight_js), (theme_dir.join("highlight.js"), &mut theme.highlight_js),
(theme_dir.join("clipboard.min.js"), &mut theme.clipboard_js), (theme_dir.join("clipboard.min.js"), &mut theme.clipboard_js),
@ -102,7 +111,10 @@ impl Default for Theme {
Theme { Theme {
index: INDEX.to_owned(), index: INDEX.to_owned(),
header: HEADER.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(), favicon: FAVICON.to_owned(),
js: JS.to_owned(), js: JS.to_owned(),
highlight_css: HIGHLIGHT_CSS.to_owned(), highlight_css: HIGHLIGHT_CSS.to_owned(),