mdBook/src/theme/book.css

1162 lines
22 KiB
CSS
Raw Normal View History

html {
font-family: "Open Sans", sans-serif;
color: #333;
}
body {
margin: 0;
font-size: 1rem;
overflow-x: hidden;
}
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;
}
.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;
}
table {
margin: 0 auto;
border-collapse: collapse;
}
table td {
padding: 3px 20px;
border: 1px solid;
}
table thead td {
font-weight: 700;
}
.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;
Improve accessibility (#535) * fix(theme/index): Use nav element for Table of Content * fix(renderer/html_handlebars/helpers/toc): Use ol instead of ul Chapters and sections are ordered, so we should use the appropriate HTML tag. * fix(renderer/html_handlebars/helpers/toc): Hide section number from screen readers Screen readers have this functionality build-in, no need to present this. Ideally, this should not even be in the DOM tree, since the numbers can be shown by using CSS. * fix(theme/index): Remove tabIndex="-1" from .page Divs are not focusable by default * fix(theme): Make sidebar accessible Using aria-hidden (together with tabIndex) takes the links out of the tab order. http://heydonworks.com/practical_aria_examples/#progressive-collapsibles * fix(theme/index): Wrap content inside main tag The main tag helps users skip additional content on the page. * fix(theme/book): Don't focus .page on page load The main content is identified by the main tag, not by auto-focusing it on page load. * fix(theme/index): Make page controls accessible * fix: Make theme selector accessible - Use ul and li (since it is a list) - Add aria-expanded and aria-haspopup to the toggle button - Use button instead of div (buttons are accessible by default) - Handle Esc key (close popup) - Adjust CSS to keep same visual style * fix(theme/stylus/sidebar): Make link clickable area wider Links now expand to fill the entire row. * fix(theme): Wrap header buttons and improve animation performance Previously, the header had a fixed height, which meant that sometimes the print button was not visible. Animating the left property is expensive, which lead to laggy animations - transform is much cheaper and has the same effect. * fix(theme/stylus/theme-popup): Theme button inherits color Bug introduced while making the popup accessible * fix(theme/book): Handle edge case when toggling sidebar Bug introduced when switching from animating left to using transform.
2018-01-15 21:26:53 +08:00
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
-o-transition: -o-transform 0.5s;
-ms-transition: -ms-transform 0.5s;
transition: transform 0.5s;
}
.sidebar code {
line-height: 2em;
}
.sidebar-hidden .sidebar {
Improve accessibility (#535) * fix(theme/index): Use nav element for Table of Content * fix(renderer/html_handlebars/helpers/toc): Use ol instead of ul Chapters and sections are ordered, so we should use the appropriate HTML tag. * fix(renderer/html_handlebars/helpers/toc): Hide section number from screen readers Screen readers have this functionality build-in, no need to present this. Ideally, this should not even be in the DOM tree, since the numbers can be shown by using CSS. * fix(theme/index): Remove tabIndex="-1" from .page Divs are not focusable by default * fix(theme): Make sidebar accessible Using aria-hidden (together with tabIndex) takes the links out of the tab order. http://heydonworks.com/practical_aria_examples/#progressive-collapsibles * fix(theme/index): Wrap content inside main tag The main tag helps users skip additional content on the page. * fix(theme/book): Don't focus .page on page load The main content is identified by the main tag, not by auto-focusing it on page load. * fix(theme/index): Make page controls accessible * fix: Make theme selector accessible - Use ul and li (since it is a list) - Add aria-expanded and aria-haspopup to the toggle button - Use button instead of div (buttons are accessible by default) - Handle Esc key (close popup) - Adjust CSS to keep same visual style * fix(theme/stylus/sidebar): Make link clickable area wider Links now expand to fill the entire row. * fix(theme): Wrap header buttons and improve animation performance Previously, the header had a fixed height, which meant that sometimes the print button was not visible. Animating the left property is expensive, which lead to laggy animations - transform is much cheaper and has the same effect. * fix(theme/stylus/theme-popup): Theme button inherits color Bug introduced while making the popup accessible * fix(theme/book): Handle edge case when toggling sidebar Bug introduced when switching from animating left to using transform.
2018-01-15 21:26:53 +08:00
-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 {
Improve accessibility (#535) * fix(theme/index): Use nav element for Table of Content * fix(renderer/html_handlebars/helpers/toc): Use ol instead of ul Chapters and sections are ordered, so we should use the appropriate HTML tag. * fix(renderer/html_handlebars/helpers/toc): Hide section number from screen readers Screen readers have this functionality build-in, no need to present this. Ideally, this should not even be in the DOM tree, since the numbers can be shown by using CSS. * fix(theme/index): Remove tabIndex="-1" from .page Divs are not focusable by default * fix(theme): Make sidebar accessible Using aria-hidden (together with tabIndex) takes the links out of the tab order. http://heydonworks.com/practical_aria_examples/#progressive-collapsibles * fix(theme/index): Wrap content inside main tag The main tag helps users skip additional content on the page. * fix(theme/book): Don't focus .page on page load The main content is identified by the main tag, not by auto-focusing it on page load. * fix(theme/index): Make page controls accessible * fix: Make theme selector accessible - Use ul and li (since it is a list) - Add aria-expanded and aria-haspopup to the toggle button - Use button instead of div (buttons are accessible by default) - Handle Esc key (close popup) - Adjust CSS to keep same visual style * fix(theme/stylus/sidebar): Make link clickable area wider Links now expand to fill the entire row. * fix(theme): Wrap header buttons and improve animation performance Previously, the header had a fixed height, which meant that sometimes the print button was not visible. Animating the left property is expensive, which lead to laggy animations - transform is much cheaper and has the same effect. * fix(theme/stylus/theme-popup): Theme button inherits color Bug introduced while making the popup accessible * fix(theme/book): Handle edge case when toggling sidebar Bug introduced when switching from animating left to using transform.
2018-01-15 21:26:53 +08:00
display: block;
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 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: padding-left 0.5s, margin-left 0.5s;
-moz-transition: padding-left 0.5s, margin-left 0.5s;
-o-transition: padding-left 0.5s, margin-left 0.5s;
-ms-transition: padding-left 0.5s, margin-left 0.5s;
transition: padding-left 0.5s, margin-left 0.5s;
}
.sidebar-visible .page-wrapper {
padding-left: 300px;
}
@media only screen and (max-width: 1079px) {
.sidebar-visible .page-wrapper {
padding-left: 0;
margin-left: 300px;
}
}
.page {
outline: 0;
padding: 0 15px;
}
.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: sticky;
top: 0;
z-index: 101;
}
#menu-bar > #menu-bar-sticky-container {
Improve accessibility (#535) * fix(theme/index): Use nav element for Table of Content * fix(renderer/html_handlebars/helpers/toc): Use ol instead of ul Chapters and sections are ordered, so we should use the appropriate HTML tag. * fix(renderer/html_handlebars/helpers/toc): Hide section number from screen readers Screen readers have this functionality build-in, no need to present this. Ideally, this should not even be in the DOM tree, since the numbers can be shown by using CSS. * fix(theme/index): Remove tabIndex="-1" from .page Divs are not focusable by default * fix(theme): Make sidebar accessible Using aria-hidden (together with tabIndex) takes the links out of the tab order. http://heydonworks.com/practical_aria_examples/#progressive-collapsibles * fix(theme/index): Wrap content inside main tag The main tag helps users skip additional content on the page. * fix(theme/book): Don't focus .page on page load The main content is identified by the main tag, not by auto-focusing it on page load. * fix(theme/index): Make page controls accessible * fix: Make theme selector accessible - Use ul and li (since it is a list) - Add aria-expanded and aria-haspopup to the toggle button - Use button instead of div (buttons are accessible by default) - Handle Esc key (close popup) - Adjust CSS to keep same visual style * fix(theme/stylus/sidebar): Make link clickable area wider Links now expand to fill the entire row. * fix(theme): Wrap header buttons and improve animation performance Previously, the header had a fixed height, which meant that sometimes the print button was not visible. Animating the left property is expensive, which lead to laggy animations - transform is much cheaper and has the same effect. * fix(theme/stylus/theme-popup): Theme button inherits color Bug introduced while making the popup accessible * fix(theme/book): Handle edge case when toggling sidebar Bug introduced when switching from animating left to using transform.
2018-01-15 21:26:53 +08:00
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;
-webkit-transition: -webkit-transform 0.5s, border-bottom-color 0.5s;
-moz-transition: -moz-transform 0.5s, border-bottom-color 0.5s;
-o-transition: -o-transform 0.5s, border-bottom-color 0.5s;
-ms-transition: -ms-transform 0.5s, border-bottom-color 0.5s;
transition: transform 0.5s, border-bottom-color 0.5s;
}
#menu-bar i,
#menu-bar .icon-button {
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,
#menu-bar .icon-button:hover {
cursor: pointer;
}
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);
}
.menu-title {
display: inline-block;
font-weight: 200;
font-size: 20px;
line-height: 50px;
text-align: center;
margin: 0;
Improve accessibility (#535) * fix(theme/index): Use nav element for Table of Content * fix(renderer/html_handlebars/helpers/toc): Use ol instead of ul Chapters and sections are ordered, so we should use the appropriate HTML tag. * fix(renderer/html_handlebars/helpers/toc): Hide section number from screen readers Screen readers have this functionality build-in, no need to present this. Ideally, this should not even be in the DOM tree, since the numbers can be shown by using CSS. * fix(theme/index): Remove tabIndex="-1" from .page Divs are not focusable by default * fix(theme): Make sidebar accessible Using aria-hidden (together with tabIndex) takes the links out of the tab order. http://heydonworks.com/practical_aria_examples/#progressive-collapsibles * fix(theme/index): Wrap content inside main tag The main tag helps users skip additional content on the page. * fix(theme/book): Don't focus .page on page load The main content is identified by the main tag, not by auto-focusing it on page load. * fix(theme/index): Make page controls accessible * fix: Make theme selector accessible - Use ul and li (since it is a list) - Add aria-expanded and aria-haspopup to the toggle button - Use button instead of div (buttons are accessible by default) - Handle Esc key (close popup) - Adjust CSS to keep same visual style * fix(theme/stylus/sidebar): Make link clickable area wider Links now expand to fill the entire row. * fix(theme): Wrap header buttons and improve animation performance Previously, the header had a fixed height, which meant that sometimes the print button was not visible. Animating the left property is expensive, which lead to laggy animations - transform is much cheaper and has the same effect. * fix(theme/stylus/theme-popup): Theme button inherits color Bug introduced while making the popup accessible * fix(theme/book): Handle edge case when toggling sidebar Bug introduced when switching from animating left to using transform.
2018-01-15 21:26:53 +08:00
-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;
}
.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;
}
2017-12-18 13:14:25 +08:00
.nav-chapters:hover {
text-decoration: none;
}
.nav-wrapper {
margin-top: 50px;
display: none;
}
2017-12-18 13:14:25 +08:00
.mobile-nav-chapters {
font-size: 2.5em;
text-align: center;
text-decoration: none;
2017-12-18 13:14:25 +08:00
width: 90px;
border-radius: 5px;
}
2017-02-19 18:12:38 +08:00
.previous {
2017-12-18 13:14:25 +08:00
float: left;
}
.next {
2017-12-18 13:14:25 +08:00
float: right;
right: 15px;
}
2017-12-18 13:14:25 +08:00
@media only screen and (max-width: 1080px) {
Improve accessibility (#535) * fix(theme/index): Use nav element for Table of Content * fix(renderer/html_handlebars/helpers/toc): Use ol instead of ul Chapters and sections are ordered, so we should use the appropriate HTML tag. * fix(renderer/html_handlebars/helpers/toc): Hide section number from screen readers Screen readers have this functionality build-in, no need to present this. Ideally, this should not even be in the DOM tree, since the numbers can be shown by using CSS. * fix(theme/index): Remove tabIndex="-1" from .page Divs are not focusable by default * fix(theme): Make sidebar accessible Using aria-hidden (together with tabIndex) takes the links out of the tab order. http://heydonworks.com/practical_aria_examples/#progressive-collapsibles * fix(theme/index): Wrap content inside main tag The main tag helps users skip additional content on the page. * fix(theme/book): Don't focus .page on page load The main content is identified by the main tag, not by auto-focusing it on page load. * fix(theme/index): Make page controls accessible * fix: Make theme selector accessible - Use ul and li (since it is a list) - Add aria-expanded and aria-haspopup to the toggle button - Use button instead of div (buttons are accessible by default) - Handle Esc key (close popup) - Adjust CSS to keep same visual style * fix(theme/stylus/sidebar): Make link clickable area wider Links now expand to fill the entire row. * fix(theme): Wrap header buttons and improve animation performance Previously, the header had a fixed height, which meant that sometimes the print button was not visible. Animating the left property is expensive, which lead to laggy animations - transform is much cheaper and has the same effect. * fix(theme/stylus/theme-popup): Theme button inherits color Bug introduced while making the popup accessible * fix(theme/book): Handle edge case when toggling sidebar Bug introduced when switching from animating left to using transform.
2018-01-15 21:26:53 +08:00
.nav-wide-wrapper {
2017-12-18 13:14:25 +08:00
display: none;
}
.nav-wrapper {
2017-12-18 13:14:25 +08:00
display: block;
}
}
@media only screen and (max-width: 1380px) {
Improve accessibility (#535) * fix(theme/index): Use nav element for Table of Content * fix(renderer/html_handlebars/helpers/toc): Use ol instead of ul Chapters and sections are ordered, so we should use the appropriate HTML tag. * fix(renderer/html_handlebars/helpers/toc): Hide section number from screen readers Screen readers have this functionality build-in, no need to present this. Ideally, this should not even be in the DOM tree, since the numbers can be shown by using CSS. * fix(theme/index): Remove tabIndex="-1" from .page Divs are not focusable by default * fix(theme): Make sidebar accessible Using aria-hidden (together with tabIndex) takes the links out of the tab order. http://heydonworks.com/practical_aria_examples/#progressive-collapsibles * fix(theme/index): Wrap content inside main tag The main tag helps users skip additional content on the page. * fix(theme/book): Don't focus .page on page load The main content is identified by the main tag, not by auto-focusing it on page load. * fix(theme/index): Make page controls accessible * fix: Make theme selector accessible - Use ul and li (since it is a list) - Add aria-expanded and aria-haspopup to the toggle button - Use button instead of div (buttons are accessible by default) - Handle Esc key (close popup) - Adjust CSS to keep same visual style * fix(theme/stylus/sidebar): Make link clickable area wider Links now expand to fill the entire row. * fix(theme): Wrap header buttons and improve animation performance Previously, the header had a fixed height, which meant that sometimes the print button was not visible. Animating the left property is expensive, which lead to laggy animations - transform is much cheaper and has the same effect. * fix(theme/stylus/theme-popup): Theme button inherits color Bug introduced while making the popup accessible * fix(theme/book): Handle edge case when toggling sidebar Bug introduced when switching from animating left to using transform.
2018-01-15 21:26:53 +08:00
.sidebar-visible .nav-wide-wrapper {
2017-12-18 13:14:25 +08:00
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 {
Improve accessibility (#535) * fix(theme/index): Use nav element for Table of Content * fix(renderer/html_handlebars/helpers/toc): Use ol instead of ul Chapters and sections are ordered, so we should use the appropriate HTML tag. * fix(renderer/html_handlebars/helpers/toc): Hide section number from screen readers Screen readers have this functionality build-in, no need to present this. Ideally, this should not even be in the DOM tree, since the numbers can be shown by using CSS. * fix(theme/index): Remove tabIndex="-1" from .page Divs are not focusable by default * fix(theme): Make sidebar accessible Using aria-hidden (together with tabIndex) takes the links out of the tab order. http://heydonworks.com/practical_aria_examples/#progressive-collapsibles * fix(theme/index): Wrap content inside main tag The main tag helps users skip additional content on the page. * fix(theme/book): Don't focus .page on page load The main content is identified by the main tag, not by auto-focusing it on page load. * fix(theme/index): Make page controls accessible * fix: Make theme selector accessible - Use ul and li (since it is a list) - Add aria-expanded and aria-haspopup to the toggle button - Use button instead of div (buttons are accessible by default) - Handle Esc key (close popup) - Adjust CSS to keep same visual style * fix(theme/stylus/sidebar): Make link clickable area wider Links now expand to fill the entire row. * fix(theme): Wrap header buttons and improve animation performance Previously, the header had a fixed height, which meant that sometimes the print button was not visible. Animating the left property is expensive, which lead to laggy animations - transform is much cheaper and has the same effect. * fix(theme/stylus/theme-popup): Theme button inherits color Bug introduced while making the popup accessible * fix(theme/book): Handle edge case when toggling sidebar Bug introduced when switching from animating left to using transform.
2018-01-15 21:26:53 +08:00
display: inline;
border: 0;
margin: 0;
padding: 2px 10px;
line-height: 25px;
Improve accessibility (#535) * fix(theme/index): Use nav element for Table of Content * fix(renderer/html_handlebars/helpers/toc): Use ol instead of ul Chapters and sections are ordered, so we should use the appropriate HTML tag. * fix(renderer/html_handlebars/helpers/toc): Hide section number from screen readers Screen readers have this functionality build-in, no need to present this. Ideally, this should not even be in the DOM tree, since the numbers can be shown by using CSS. * fix(theme/index): Remove tabIndex="-1" from .page Divs are not focusable by default * fix(theme): Make sidebar accessible Using aria-hidden (together with tabIndex) takes the links out of the tab order. http://heydonworks.com/practical_aria_examples/#progressive-collapsibles * fix(theme/index): Wrap content inside main tag The main tag helps users skip additional content on the page. * fix(theme/book): Don't focus .page on page load The main content is identified by the main tag, not by auto-focusing it on page load. * fix(theme/index): Make page controls accessible * fix: Make theme selector accessible - Use ul and li (since it is a list) - Add aria-expanded and aria-haspopup to the toggle button - Use button instead of div (buttons are accessible by default) - Handle Esc key (close popup) - Adjust CSS to keep same visual style * fix(theme/stylus/sidebar): Make link clickable area wider Links now expand to fill the entire row. * fix(theme): Wrap header buttons and improve animation performance Previously, the header had a fixed height, which meant that sometimes the print button was not visible. Animating the left property is expensive, which lead to laggy animations - transform is much cheaper and has the same effect. * fix(theme/stylus/theme-popup): Theme button inherits color Bug introduced while making the popup accessible * fix(theme/book): Handle edge case when toggling sidebar Bug introduced when switching from animating left to using transform.
2018-01-15 21:26:53 +08:00
width: 100%;
white-space: nowrap;
Improve accessibility (#535) * fix(theme/index): Use nav element for Table of Content * fix(renderer/html_handlebars/helpers/toc): Use ol instead of ul Chapters and sections are ordered, so we should use the appropriate HTML tag. * fix(renderer/html_handlebars/helpers/toc): Hide section number from screen readers Screen readers have this functionality build-in, no need to present this. Ideally, this should not even be in the DOM tree, since the numbers can be shown by using CSS. * fix(theme/index): Remove tabIndex="-1" from .page Divs are not focusable by default * fix(theme): Make sidebar accessible Using aria-hidden (together with tabIndex) takes the links out of the tab order. http://heydonworks.com/practical_aria_examples/#progressive-collapsibles * fix(theme/index): Wrap content inside main tag The main tag helps users skip additional content on the page. * fix(theme/book): Don't focus .page on page load The main content is identified by the main tag, not by auto-focusing it on page load. * fix(theme/index): Make page controls accessible * fix: Make theme selector accessible - Use ul and li (since it is a list) - Add aria-expanded and aria-haspopup to the toggle button - Use button instead of div (buttons are accessible by default) - Handle Esc key (close popup) - Adjust CSS to keep same visual style * fix(theme/stylus/sidebar): Make link clickable area wider Links now expand to fill the entire row. * fix(theme): Wrap header buttons and improve animation performance Previously, the header had a fixed height, which meant that sometimes the print button was not visible. Animating the left property is expensive, which lead to laggy animations - transform is much cheaper and has the same effect. * fix(theme/stylus/theme-popup): Theme button inherits color Bug introduced while making the popup accessible * fix(theme/book): Handle edge case when toggling sidebar Bug introduced when switching from animating left to using transform.
2018-01-15 21:26:53 +08:00
text-align: left;
cursor: pointer;
Improve accessibility (#535) * fix(theme/index): Use nav element for Table of Content * fix(renderer/html_handlebars/helpers/toc): Use ol instead of ul Chapters and sections are ordered, so we should use the appropriate HTML tag. * fix(renderer/html_handlebars/helpers/toc): Hide section number from screen readers Screen readers have this functionality build-in, no need to present this. Ideally, this should not even be in the DOM tree, since the numbers can be shown by using CSS. * fix(theme/index): Remove tabIndex="-1" from .page Divs are not focusable by default * fix(theme): Make sidebar accessible Using aria-hidden (together with tabIndex) takes the links out of the tab order. http://heydonworks.com/practical_aria_examples/#progressive-collapsibles * fix(theme/index): Wrap content inside main tag The main tag helps users skip additional content on the page. * fix(theme/book): Don't focus .page on page load The main content is identified by the main tag, not by auto-focusing it on page load. * fix(theme/index): Make page controls accessible * fix: Make theme selector accessible - Use ul and li (since it is a list) - Add aria-expanded and aria-haspopup to the toggle button - Use button instead of div (buttons are accessible by default) - Handle Esc key (close popup) - Adjust CSS to keep same visual style * fix(theme/stylus/sidebar): Make link clickable area wider Links now expand to fill the entire row. * fix(theme): Wrap header buttons and improve animation performance Previously, the header had a fixed height, which meant that sometimes the print button was not visible. Animating the left property is expensive, which lead to laggy animations - transform is much cheaper and has the same effect. * fix(theme/stylus/theme-popup): Theme button inherits color Bug introduced while making the popup accessible * fix(theme/book): Handle edge case when toggling sidebar Bug introduced when switching from animating left to using transform.
2018-01-15 21:26:53 +08:00
color: inherit;
background: inherit;
font-size: inherit;
}
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;
}
.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 .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 .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,
2018-01-04 17:19:20 +08:00
.light .menu-bar .icon-button,
.light .menu-bar a i {
color: #ccc;
}
.light .menu-bar i:hover,
2018-01-04 17:19:20 +08:00
.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 .content a:link,
.light a:visited,
.light a > .hljs {
color: #4183c4;
}
.light .theme-popup {
color: #333;
background: #fafafa;
border: 1px solid #ccc;
Improve accessibility (#535) * fix(theme/index): Use nav element for Table of Content * fix(renderer/html_handlebars/helpers/toc): Use ol instead of ul Chapters and sections are ordered, so we should use the appropriate HTML tag. * fix(renderer/html_handlebars/helpers/toc): Hide section number from screen readers Screen readers have this functionality build-in, no need to present this. Ideally, this should not even be in the DOM tree, since the numbers can be shown by using CSS. * fix(theme/index): Remove tabIndex="-1" from .page Divs are not focusable by default * fix(theme): Make sidebar accessible Using aria-hidden (together with tabIndex) takes the links out of the tab order. http://heydonworks.com/practical_aria_examples/#progressive-collapsibles * fix(theme/index): Wrap content inside main tag The main tag helps users skip additional content on the page. * fix(theme/book): Don't focus .page on page load The main content is identified by the main tag, not by auto-focusing it on page load. * fix(theme/index): Make page controls accessible * fix: Make theme selector accessible - Use ul and li (since it is a list) - Add aria-expanded and aria-haspopup to the toggle button - Use button instead of div (buttons are accessible by default) - Handle Esc key (close popup) - Adjust CSS to keep same visual style * fix(theme/stylus/sidebar): Make link clickable area wider Links now expand to fill the entire row. * fix(theme): Wrap header buttons and improve animation performance Previously, the header had a fixed height, which meant that sometimes the print button was not visible. Animating the left property is expensive, which lead to laggy animations - transform is much cheaper and has the same effect. * fix(theme/stylus/theme-popup): Theme button inherits color Bug introduced while making the popup accessible * fix(theme/book): Handle edge case when toggling sidebar Bug introduced when switching from animating left to using transform.
2018-01-15 21:26:53 +08:00
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 {
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;
}
2018-01-13 02:44:13 +08:00
.light pre > .buttons button {
color: inherit;
background: transparent;
border: none;
cursor: inherit;
}
.light pre > .result {
margin-top: 10px;
}
2018-01-04 17:19:20 +08:00
.light .icon-button {
border: none;
background: none;
padding: 0;
color: inherit;
}
.light .icon-button i {
margin: 0;
}
.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 .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 .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,
2018-01-04 17:19:20 +08:00
.coal .menu-bar .icon-button,
.coal .menu-bar a i {
color: #43484d;
}
.coal .menu-bar i:hover,
2018-01-04 17:19:20 +08:00
.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 .content a:link,
.coal a:visited,
.coal a > .hljs {
color: #2b79a2;
}
.coal .theme-popup {
color: #98a3ad;
background: #141617;
border: 1px solid #43484d;
Improve accessibility (#535) * fix(theme/index): Use nav element for Table of Content * fix(renderer/html_handlebars/helpers/toc): Use ol instead of ul Chapters and sections are ordered, so we should use the appropriate HTML tag. * fix(renderer/html_handlebars/helpers/toc): Hide section number from screen readers Screen readers have this functionality build-in, no need to present this. Ideally, this should not even be in the DOM tree, since the numbers can be shown by using CSS. * fix(theme/index): Remove tabIndex="-1" from .page Divs are not focusable by default * fix(theme): Make sidebar accessible Using aria-hidden (together with tabIndex) takes the links out of the tab order. http://heydonworks.com/practical_aria_examples/#progressive-collapsibles * fix(theme/index): Wrap content inside main tag The main tag helps users skip additional content on the page. * fix(theme/book): Don't focus .page on page load The main content is identified by the main tag, not by auto-focusing it on page load. * fix(theme/index): Make page controls accessible * fix: Make theme selector accessible - Use ul and li (since it is a list) - Add aria-expanded and aria-haspopup to the toggle button - Use button instead of div (buttons are accessible by default) - Handle Esc key (close popup) - Adjust CSS to keep same visual style * fix(theme/stylus/sidebar): Make link clickable area wider Links now expand to fill the entire row. * fix(theme): Wrap header buttons and improve animation performance Previously, the header had a fixed height, which meant that sometimes the print button was not visible. Animating the left property is expensive, which lead to laggy animations - transform is much cheaper and has the same effect. * fix(theme/stylus/theme-popup): Theme button inherits color Bug introduced while making the popup accessible * fix(theme/book): Handle edge case when toggling sidebar Bug introduced when switching from animating left to using transform.
2018-01-15 21:26:53 +08:00
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 {
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;
}
2018-01-13 02:44:13 +08:00
.coal pre > .buttons button {
color: inherit;
background: transparent;
border: none;
cursor: inherit;
}
.coal pre > .result {
margin-top: 10px;
}
2018-01-04 17:19:20 +08:00
.coal .icon-button {
border: none;
background: none;
padding: 0;
color: inherit;
}
.coal .icon-button i {
margin: 0;
}
.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 .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 .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,
2018-01-04 17:19:20 +08:00
.navy .menu-bar .icon-button,
.navy .menu-bar a i {
color: #737480;
}
.navy .menu-bar i:hover,
2018-01-04 17:19:20 +08:00
.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 .content a:link,
.navy a:visited,
.navy a > .hljs {
color: #2b79a2;
}
.navy .theme-popup {
color: #bcbdd0;
background: #161923;
border: 1px solid #737480;
Improve accessibility (#535) * fix(theme/index): Use nav element for Table of Content * fix(renderer/html_handlebars/helpers/toc): Use ol instead of ul Chapters and sections are ordered, so we should use the appropriate HTML tag. * fix(renderer/html_handlebars/helpers/toc): Hide section number from screen readers Screen readers have this functionality build-in, no need to present this. Ideally, this should not even be in the DOM tree, since the numbers can be shown by using CSS. * fix(theme/index): Remove tabIndex="-1" from .page Divs are not focusable by default * fix(theme): Make sidebar accessible Using aria-hidden (together with tabIndex) takes the links out of the tab order. http://heydonworks.com/practical_aria_examples/#progressive-collapsibles * fix(theme/index): Wrap content inside main tag The main tag helps users skip additional content on the page. * fix(theme/book): Don't focus .page on page load The main content is identified by the main tag, not by auto-focusing it on page load. * fix(theme/index): Make page controls accessible * fix: Make theme selector accessible - Use ul and li (since it is a list) - Add aria-expanded and aria-haspopup to the toggle button - Use button instead of div (buttons are accessible by default) - Handle Esc key (close popup) - Adjust CSS to keep same visual style * fix(theme/stylus/sidebar): Make link clickable area wider Links now expand to fill the entire row. * fix(theme): Wrap header buttons and improve animation performance Previously, the header had a fixed height, which meant that sometimes the print button was not visible. Animating the left property is expensive, which lead to laggy animations - transform is much cheaper and has the same effect. * fix(theme/stylus/theme-popup): Theme button inherits color Bug introduced while making the popup accessible * fix(theme/book): Handle edge case when toggling sidebar Bug introduced when switching from animating left to using transform.
2018-01-15 21:26:53 +08:00
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 {
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;
}
2018-01-13 02:44:13 +08:00
.navy pre > .buttons button {
color: inherit;
background: transparent;
border: none;
cursor: inherit;
}
.navy pre > .result {
margin-top: 10px;
}
2018-01-04 17:19:20 +08:00
.navy .icon-button {
border: none;
background: none;
padding: 0;
color: inherit;
}
.navy .icon-button i {
margin: 0;
}
.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 .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 .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,
2018-01-04 17:19:20 +08:00
.rust .menu-bar .icon-button,
.rust .menu-bar a i {
color: #737480;
}
.rust .menu-bar i:hover,
2018-01-04 17:19:20 +08:00
.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 .content a:link,
.rust a:visited,
.rust a > .hljs {
color: #2b79a2;
}
.rust .theme-popup {
color: #262625;
background: #e1e1db;
border: 1px solid #b38f6b;
Improve accessibility (#535) * fix(theme/index): Use nav element for Table of Content * fix(renderer/html_handlebars/helpers/toc): Use ol instead of ul Chapters and sections are ordered, so we should use the appropriate HTML tag. * fix(renderer/html_handlebars/helpers/toc): Hide section number from screen readers Screen readers have this functionality build-in, no need to present this. Ideally, this should not even be in the DOM tree, since the numbers can be shown by using CSS. * fix(theme/index): Remove tabIndex="-1" from .page Divs are not focusable by default * fix(theme): Make sidebar accessible Using aria-hidden (together with tabIndex) takes the links out of the tab order. http://heydonworks.com/practical_aria_examples/#progressive-collapsibles * fix(theme/index): Wrap content inside main tag The main tag helps users skip additional content on the page. * fix(theme/book): Don't focus .page on page load The main content is identified by the main tag, not by auto-focusing it on page load. * fix(theme/index): Make page controls accessible * fix: Make theme selector accessible - Use ul and li (since it is a list) - Add aria-expanded and aria-haspopup to the toggle button - Use button instead of div (buttons are accessible by default) - Handle Esc key (close popup) - Adjust CSS to keep same visual style * fix(theme/stylus/sidebar): Make link clickable area wider Links now expand to fill the entire row. * fix(theme): Wrap header buttons and improve animation performance Previously, the header had a fixed height, which meant that sometimes the print button was not visible. Animating the left property is expensive, which lead to laggy animations - transform is much cheaper and has the same effect. * fix(theme/stylus/theme-popup): Theme button inherits color Bug introduced while making the popup accessible * fix(theme/book): Handle edge case when toggling sidebar Bug introduced when switching from animating left to using transform.
2018-01-15 21:26:53 +08:00
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;
}
2018-01-13 02:44:13 +08:00
.rust pre > .buttons button {
color: inherit;
background: transparent;
border: none;
cursor: inherit;
}
.rust pre > .result {
margin-top: 10px;
}
2018-01-04 17:19:20 +08:00
.rust .icon-button {
border: none;
background: none;
padding: 0;
color: inherit;
}
.rust .icon-button i {
margin: 0;
}
.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 .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 .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,
2018-01-04 17:19:20 +08:00
.ayu .menu-bar .icon-button,
.ayu .menu-bar a i {
color: #737480;
}
.ayu .menu-bar i:hover,
2018-01-04 17:19:20 +08:00
.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 .content a:link,
.ayu a:visited,
.ayu a > .hljs {
color: #0096cf;
}
.ayu .theme-popup {
color: #c5c5c5;
background: #14191f;
border: 1px solid #5c6773;
Improve accessibility (#535) * fix(theme/index): Use nav element for Table of Content * fix(renderer/html_handlebars/helpers/toc): Use ol instead of ul Chapters and sections are ordered, so we should use the appropriate HTML tag. * fix(renderer/html_handlebars/helpers/toc): Hide section number from screen readers Screen readers have this functionality build-in, no need to present this. Ideally, this should not even be in the DOM tree, since the numbers can be shown by using CSS. * fix(theme/index): Remove tabIndex="-1" from .page Divs are not focusable by default * fix(theme): Make sidebar accessible Using aria-hidden (together with tabIndex) takes the links out of the tab order. http://heydonworks.com/practical_aria_examples/#progressive-collapsibles * fix(theme/index): Wrap content inside main tag The main tag helps users skip additional content on the page. * fix(theme/book): Don't focus .page on page load The main content is identified by the main tag, not by auto-focusing it on page load. * fix(theme/index): Make page controls accessible * fix: Make theme selector accessible - Use ul and li (since it is a list) - Add aria-expanded and aria-haspopup to the toggle button - Use button instead of div (buttons are accessible by default) - Handle Esc key (close popup) - Adjust CSS to keep same visual style * fix(theme/stylus/sidebar): Make link clickable area wider Links now expand to fill the entire row. * fix(theme): Wrap header buttons and improve animation performance Previously, the header had a fixed height, which meant that sometimes the print button was not visible. Animating the left property is expensive, which lead to laggy animations - transform is much cheaper and has the same effect. * fix(theme/stylus/theme-popup): Theme button inherits color Bug introduced while making the popup accessible * fix(theme/book): Handle edge case when toggling sidebar Bug introduced when switching from animating left to using transform.
2018-01-15 21:26:53 +08:00
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;
}
2018-01-13 02:44:13 +08:00
.ayu pre > .buttons button {
color: inherit;
background: transparent;
border: none;
cursor: inherit;
}
.ayu pre > .result {
margin-top: 10px;
}
2018-01-04 17:19:20 +08:00
.ayu .icon-button {
border: none;
background: none;
padding: 0;
color: inherit;
}
.ayu .icon-button i {
margin: 0;
}
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;
}
#page-wrapper.page-wrapper {
padding-left: 0px;
}
2016-06-11 01:30:26 +08:00
#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
}
2017-06-29 12:35:20 +08:00
pre > .buttons {
z-index: 2;
}
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;
}