mdBook/src/theme/book.css

981 lines
18 KiB
CSS
Raw Normal View History

html,
body {
font-family: "Open Sans", sans-serif;
color: #333;
}
code {
CSS: better fallback stack for monospaced fonts List of system fonts (R, I, B means roman, italic and bold. Ubuntu probably comes with more fonts, but I couldn't find a list to confirm.): ```txt Windows ---------- Consolas R RI B BI Courier R Courier New R RI B BI Lucida Console R Mac ---------- Andale Mono R Courier R RI B BI Courier New R RI B BI Menlo R RI B BI Monaco R Ubuntu ---------- Ubuntu Mono R RI B BI DejaVu Sans Mono R RI B BI ``` ```css font-family: Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace; ``` Consolas and Ubuntu are professionally designed fonts ([Lucas de Groot][1] and [Dalton Maag][2]), with true, calligraphic italic, so they go at the top of the stack. Menlo is [based on DejaVu Sans Mono][3], the only difference being a few tweaked glyphs, so DejaVu serves as a fallback for it. As for Courier New, other than being unreadably spindly, it's the default monospaced font in all browsers, so there's no need to include it in the stack. The `monospace, monospace;` declaration is, by now, [a standard hack][4] that overrides some browsers' behaviour of defaulting the `monospace` elements to smaller font size. Without it, any relative font size you apply to them will be calculated from that reduced size (seems to be 13 px in all browsers). [1]: https://en.wikipedia.org/wiki/Luc(as)_de_Groot [2]: https://en.wikipedia.org/wiki/Dalton_Maag [3]: http://www.leancrew.com/all-this/2009/10/the-compleat-menlovera-sans-comparison/ [4]: https://stackoverflow.com/questions/38781089/font-family-monospace-monospace
2017-05-24 12:07:58 +08:00
font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
font-size: 0.875em;
}
.left {
float: left;
}
.right {
float: right;
}
2015-12-29 19:26:32 +08:00
.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;
}
table {
margin: 0 auto;
border-collapse: collapse;
}
table td {
padding: 3px 20px;
border: 1px solid;
}
table thead td {
font-weight: 700;
}
.sidebar {
2017-02-19 18:12:38 +08:00
position: absolute;
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;
-webkit-transition: left 0.5s;
-moz-transition: left 0.5s;
-o-transition: left 0.5s;
-ms-transition: left 0.5s;
transition: left 0.5s;
}
@media only screen and (max-width: 1060px) {
.sidebar {
2015-09-25 02:56:16 +08:00
left: -300px;
}
}
.sidebar code {
line-height: 2em;
}
.sidebar-hidden .sidebar {
left: -300px;
}
2015-09-25 02:56:16 +08:00
.sidebar-visible .sidebar {
left: 0;
}
.chapter {
list-style: none outside none;
padding-left: 0;
line-height: 2.2em;
}
.chapter li a {
padding: 5px 0;
text-decoration: none;
}
.chapter li a:hover {
text-decoration: none;
}
.chapter .spacer {
width: 100%;
height: 3px;
margin: 10px 0px;
}
.section {
list-style: none outside none;
padding-left: 20px;
line-height: 1.9em;
}
.section li {
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.page-wrapper {
position: absolute;
2017-02-19 18:12:38 +08:00
overflow-y: auto;
left: 315px;
right: 0;
top: 0;
bottom: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
min-height: 100%;
-webkit-transition: left 0.5s;
-moz-transition: left 0.5s;
-o-transition: left 0.5s;
-ms-transition: left 0.5s;
transition: left 0.5s;
}
@media only screen and (max-width: 1060px) {
.page-wrapper {
left: 15px;
padding-right: 15px;
}
}
.sidebar-hidden .page-wrapper {
left: 15px;
}
.sidebar-visible .page-wrapper {
left: 315px;
}
.page {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
outline: 0;
padding-right: 15px;
2017-02-19 18:12:38 +08:00
overflow-y: auto;
}
.content {
margin-left: auto;
margin-right: auto;
max-width: 750px;
padding-bottom: 50px;
}
.content a {
text-decoration: none;
}
.content a:hover {
text-decoration: underline;
}
.content img {
max-width: 100%;
}
.menu-bar {
position: relative;
height: 50px;
}
.menu-bar i {
position: relative;
2017-02-19 18:12:38 +08:00
margin: 0 10px;
z-index: 10;
line-height: 50px;
-webkit-transition: color 0.5s;
-moz-transition: color 0.5s;
-o-transition: color 0.5s;
-ms-transition: color 0.5s;
transition: color 0.5s;
}
.menu-bar i:hover {
cursor: pointer;
}
.menu-bar .left-buttons {
float: left;
}
.menu-bar .right-buttons {
float: right;
}
.menu-title {
display: inline-block;
font-weight: 200;
font-size: 20px;
line-height: 50px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
margin: 0;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.menu-bar:hover .menu-title {
opacity: 1;
-ms-filter: none;
filter: none;
}
.nav-chapters {
font-size: 2.5em;
text-align: center;
text-decoration: none;
2017-02-19 18:12:38 +08:00
position: absolute;
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;
}
.mobile-nav-chapters {
display: none;
}
.nav-chapters:hover {
text-decoration: none;
}
2017-02-19 18:12:38 +08:00
.previous {
left: 0;
}
.next {
right: 15px;
}
.theme-popup {
position: relative;
left: 10px;
z-index: 1000;
border-radius: 4px;
font-size: 0.7em;
}
.theme-popup .theme {
margin: 0;
padding: 2px 10px;
line-height: 25px;
white-space: nowrap;
}
2016-09-13 04:43:29 +08:00
.theme-popup .theme:hover:first-child,
.theme-popup .theme:hover:last-child {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
@media only screen and (max-width: 1250px) {
.nav-chapters {
display: none;
}
.mobile-nav-chapters {
font-size: 2.5em;
text-align: center;
text-decoration: none;
max-width: 150px;
min-width: 90px;
-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;
position: relative;
display: inline-block;
margin-bottom: 50px;
border-radius: 5px;
}
.next {
float: right;
}
.previous {
float: left;
}
}
.light {
color: #333;
background-color: #fff;
/* Inline code */
}
.light .content .header:link,
.light .content .header:visited {
color: #333;
pointer: cursor;
}
.light .content .header:link:hover,
.light .content .header:visited:hover {
text-decoration: none;
}
.light .sidebar {
background-color: #fafafa;
color: #364149;
}
.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 {
color: #ccc;
}
.light .menu-bar i: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 .content a:link,
.light a:visited,
.light a > .hljs {
color: #4183c4;
}
.light .theme-popup {
color: #333;
background: #fafafa;
border: 1px solid #ccc;
}
.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 {
2015-12-23 05:30:05 +08:00
display: inline-block;
vertical-align: middle;
padding: 0.1em 0.3em;
border-radius: 3px;
color: #6e6b5e;
2015-12-23 05:30:05 +08:00
}
.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 > .result {
margin-top: 10px;
}
.coal {
color: #98a3ad;
background-color: #141617;
/* Inline code */
}
.coal .content .header:link,
.coal .content .header:visited {
color: #98a3ad;
pointer: cursor;
}
.coal .content .header:link:hover,
.coal .content .header:visited:hover {
text-decoration: none;
}
.coal .sidebar {
background-color: #292c2f;
color: #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 {
color: #43484d;
}
.coal .menu-bar i: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 .content a:link,
.coal a:visited,
.coal a > .hljs {
color: #2b79a2;
}
.coal .theme-popup {
color: #98a3ad;
background: #141617;
border: 1px solid #43484d;
}
.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 {
2015-12-23 05:30:05 +08:00
display: inline-block;
vertical-align: middle;
padding: 0.1em 0.3em;
border-radius: 3px;
color: #c5c8c6;
2015-12-23 05:30:05 +08:00
}
.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 > .result {
margin-top: 10px;
}
.navy {
color: #bcbdd0;
background-color: #161923;
/* Inline code */
}
.navy .content .header:link,
.navy .content .header:visited {
color: #bcbdd0;
pointer: cursor;
}
.navy .content .header:link:hover,
.navy .content .header:visited:hover {
text-decoration: none;
}
.navy .sidebar {
background-color: #282d3f;
color: #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 {
color: #737480;
}
.navy .menu-bar i: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 .content a:link,
.navy a:visited,
.navy a > .hljs {
color: #2b79a2;
}
.navy .theme-popup {
color: #bcbdd0;
background: #161923;
border: 1px solid #737480;
}
.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 {
2015-12-23 05:30:05 +08:00
display: inline-block;
vertical-align: middle;
padding: 0.1em 0.3em;
border-radius: 3px;
color: #c5c8c6;
2015-12-23 05:30:05 +08:00
}
.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 > .result {
margin-top: 10px;
}
.rust {
color: #262625;
background-color: #e1e1db;
/* Inline code */
}
.rust .content .header:link,
.rust .content .header:visited {
color: #262625;
pointer: cursor;
}
.rust .content .header:link:hover,
.rust .content .header:visited:hover {
text-decoration: none;
}
.rust .sidebar {
background-color: #3b2e2a;
color: #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 {
color: #737480;
}
.rust .menu-bar i: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 .content a:link,
.rust a:visited,
.rust a > .hljs {
color: #2b79a2;
}
.rust .theme-popup {
color: #262625;
background: #e1e1db;
border: 1px solid #b38f6b;
}
.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 > .result {
margin-top: 10px;
}
.ayu {
color: #c5c5c5;
background-color: #0f1419;
/* Inline code */
}
.ayu .content .header:link,
.ayu .content .header:visited {
color: #c5c5c5;
pointer: cursor;
}
.ayu .content .header:link:hover,
.ayu .content .header:visited:hover {
text-decoration: none;
}
.ayu .sidebar {
background-color: #14191f;
color: #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 {
color: #737480;
}
.ayu .menu-bar i: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 .content a:link,
.ayu a:visited,
.ayu a > .hljs {
color: #0096cf;
}
.ayu .theme-popup {
color: #c5c5c5;
background: #14191f;
border: 1px solid #5c6773;
}
.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 > .result {
margin-top: 10px;
}
2016-09-13 04:43:29 +08:00
@media only print {
#sidebar,
#menu-bar,
.nav-chapters,
.mobile-nav-chapters {
2016-06-11 01:30:26 +08:00
display: none;
}
#page-wrapper {
left: 0;
overflow-y: initial;
}
#content {
max-width: none;
margin: 0;
padding: 0;
}
.page {
overflow-y: initial;
}
2016-09-13 04:43:29 +08:00
code {
background-color: #666;
border-radius: 5px;
/* Force background to be printed in Chrome */
-webkit-print-color-adjust: exact;
2016-06-11 01:30:26 +08:00
}
2016-09-13 04:43:29 +08:00
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;
/*break-after: avoid*/
}
pre,
code {
page-break-inside: avoid;
white-space: pre-wrap /* CSS 3 */;
white-space: -moz-pre-wrap /* Mozilla, since 1999 */;
white-space: -pre-wrap /* Opera 4-6 */;
white-space: -o-pre-wrap /* Opera 7 */;
word-wrap: break-word /* Internet Explorer 5.5+ */;
2016-06-11 01:30:26 +08:00
}
}
.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;
}