diff --git a/src/theme/book.css b/src/theme/book.css deleted file mode 100644 index 16129aef..00000000 --- a/src/theme/book.css +++ /dev/null @@ -1,1465 +0,0 @@ -html { - font-family: "Open Sans", sans-serif; - color: #333; - -webkit-text-size-adjust: none; - -ms-text-size-adjust: none; - text-size-adjust: none; -} -body { - margin: 0; - font-size: 1rem; - overflow-x: hidden; -} -code { - font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace; - font-size: 0.875em; -} -.left { - float: left; -} -.right { - float: right; -} -.hidden { - display: none; -} -.play-button.hidden { - display: none; -} -h2, -h3 { - margin-top: 2.5em; -} -h4, -h5 { - margin-top: 2em; -} -.header + .header h3, -.header + .header h4, -.header + .header h5 { - margin-top: 1em; -} -a.header:target h1:before, -a.header:target h2:before, -a.header:target h3:before, -a.header:target h4:before { - display: inline-block; - content: "ยป"; - margin-left: -30px; - width: 30px; -} -table { - margin: 0 auto; - border-collapse: collapse; -} -table td { - padding: 3px 20px; - border: 1px solid; -} -table thead td { - font-weight: 700; -} -:not(.footnote-definition) + .footnote-definition, -.footnote-definition + :not(.footnote-definition) { - margin-top: 2em; -} -.footnote-definition { - font-size: 0.9em; - margin: 0.5em 0; -} -.footnote-definition p { - display: inline; -} -.sidebar { - position: fixed; - left: 0; - top: 0; - bottom: 0; - width: 300px; - overflow-y: auto; - padding: 10px 10px; - font-size: 0.875em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-overflow-scrolling: touch; - overscroll-behavior-y: contain; -} -.js .sidebar { - -webkit-transition: -webkit-transform 0.3s; - -moz-transition: -moz-transform 0.3s; - -o-transition: -o-transform 0.3s; - -ms-transition: -ms-transform 0.3s; - transition: transform 0.3s; -} -.sidebar code { - line-height: 2em; -} -.sidebar-hidden .sidebar { - -webkit-transform: translateX(-300px); - -moz-transform: translateX(-300px); - -o-transform: translateX(-300px); - -ms-transform: translateX(-300px); - transform: translateX(-300px); -} -.chapter { - list-style: none outside none; - padding-left: 0; - line-height: 2.2em; -} -.chapter li a { - display: block; - padding: 0; - text-decoration: none; -} -@media (-moz-touch-enabled: 1), (pointer: coarse) { - .chapter li a { - padding: 5px 0; - } -} -.chapter li a:hover { - text-decoration: none; -} -.chapter .spacer { - width: 100%; - height: 3px; - margin: 5px 0px; -} -@media (-moz-touch-enabled: 1), (pointer: coarse) { - .chapter .spacer { - margin: 10px 0; - } -} -.section { - list-style: none outside none; - padding-left: 20px; - line-height: 1.9em; -} -.page-wrapper { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -.js .page-wrapper { - -webkit-transition: margin-left 0.3s ease, -webkit-transform 0.3s ease; - -moz-transition: margin-left 0.3s ease, -moz-transform 0.3s ease; - -o-transition: margin-left 0.3s ease, -o-transform 0.3s ease; - -ms-transition: margin-left 0.3s ease, -ms-transform 0.3s ease; - transition: margin-left 0.3s ease, transform 0.3s ease; -} -.sidebar-visible .page-wrapper { - -webkit-transform: translateX(300px); - -moz-transform: translateX(300px); - -o-transform: translateX(300px); - -ms-transform: translateX(300px); - transform: translateX(300px); -} -@media only screen and (min-width: 620px) { - .sidebar-visible .page-wrapper { - -webkit-transform: none; - -moz-transform: none; - -o-transform: none; - -ms-transform: none; - transform: none; - margin-left: 300px; - } -} -.page { - outline: 0; - padding: 0 15px; -} -.content { - overflow-y: auto; - padding: 0 15px; - padding-bottom: 50px; -} -.content main { - margin-left: auto; - margin-right: auto; - max-width: 750px; -} -.content a { - text-decoration: none; -} -.content a:hover { - text-decoration: underline; -} -.content img { - max-width: 100%; -} -#menu-bar { - position: -webkit-sticky; - position: sticky; - top: 0; - z-index: 101; -} -#menu-bar > #menu-bar-sticky-container { - display: -webkit-box; - display: -moz-box; - display: -webkit-flex; - display: -ms-flexbox; - display: box; - display: flex; - -webkit-box-lines: multiple; - -moz-box-lines: multiple; - -o-box-lines: multiple; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} -.js #menu-bar > #menu-bar-sticky-container { - -webkit-transition: -webkit-transform 0.3s; - -moz-transition: -moz-transform 0.3s; - -o-transition: -o-transform 0.3s; - -ms-transition: -ms-transform 0.3s; - transition: transform 0.3s; -} -#menu-bar i, -#menu-bar .icon-button { - position: relative; - margin: 0 8px; - z-index: 10; - line-height: 50px; - cursor: pointer; - -webkit-transition: color 0.5s; - -moz-transition: color 0.5s; - -o-transition: color 0.5s; - -ms-transition: color 0.5s; - transition: color 0.5s; -} -@media only screen and (max-width: 420px) { - #menu-bar i, - #menu-bar .icon-button { - margin: 0 5px; - } -} -#menu-bar #print-button { - margin: 0 15px; -} -html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container { - -webkit-transform: translateY(-60px); - -moz-transform: translateY(-60px); - -o-transform: translateY(-60px); - -ms-transform: translateY(-60px); - transform: translateY(-60px); -} -.left-buttons { - margin: 0 5px; -} -.no-js .left-buttons { - display: none; -} -.menu-title { - display: inline-block; - font-weight: 200; - font-size: 20px; - line-height: 50px; - text-align: center; - margin: 0; - -webkit-box-flex: 1; - -moz-box-flex: 1; - -o-box-flex: 1; - box-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - white-space: nowrap; - overflow: hidden; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; -} -.js .menu-title { - cursor: pointer; -} -.nav-chapters { - font-size: 2.5em; - text-align: center; - text-decoration: none; - position: fixed; - top: 50px /* Height of menu-bar */; - bottom: 0; - margin: 0; - max-width: 150px; - min-width: 90px; - display: -webkit-box; - display: -moz-box; - display: -webkit-flex; - display: -ms-flexbox; - display: box; - display: flex; - -webkit-box-pack: center; - -moz-box-pack: center; - -o-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -ms-flex-line-pack: center; - -webkit-align-content: center; - align-content: center; - -webkit-box-orient: vertical; - -moz-box-orient: vertical; - -o-box-orient: vertical; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-transition: color 0.5s; - -moz-transition: color 0.5s; - -o-transition: color 0.5s; - -ms-transition: color 0.5s; - transition: color 0.5s; -} -.nav-chapters:hover { - text-decoration: none; -} -.nav-wrapper { - margin-top: 50px; - display: none; -} -.mobile-nav-chapters { - font-size: 2.5em; - text-align: center; - text-decoration: none; - width: 90px; - border-radius: 5px; -} -.previous { - float: left; -} -.next { - float: right; - right: 15px; -} -@media only screen and (max-width: 1080px) { - .nav-wide-wrapper { - display: none; - } - .nav-wrapper { - display: block; - } -} -@media only screen and (max-width: 1380px) { - .sidebar-visible .nav-wide-wrapper { - display: none; - } - .sidebar-visible .nav-wrapper { - display: block; - } -} -.theme-popup { - position: absolute; - left: 10px; - z-index: 1000; - border-radius: 4px; - font-size: 0.7em; -} -.theme-popup .theme { - display: inline; - border: 0; - margin: 0; - padding: 2px 10px; - line-height: 25px; - width: 100%; - white-space: nowrap; - text-align: left; - cursor: pointer; - color: inherit; - background: inherit; - font-size: inherit; -} -.theme-popup .theme:hover:first-child, -.theme-popup .theme:hover:last-child { - border-top-left-radius: inherit; - border-top-right-radius: inherit; -} -.light { - color: #333; - background-color: #fff; -/* Inline code */ -/* Search */ -} -.light .content .header:link, -.light .content .header:visited { - color: #333; -} -.light .content .header:link:hover, -.light .content .header:visited:hover { - text-decoration: none; -} -.light .menu-bar { - margin: auto -15px; -} -.light .menu-bar > #menu-bar-sticky-container { - background-color: #fff; - border-bottom-color: #fff; - border-bottom-width: 1px; - border-bottom-style: solid; -} -.light .menu-bar.bordered > #menu-bar-sticky-container { - border-bottom-color: #f2f2f2; -} -.light .sidebar { - background-color: #fafafa; - color: #364149; -} -.light .sidebar::-webkit-scrollbar { - background: #fafafa; -} -.light .sidebar::-webkit-scrollbar-thumb { - background: #ccc; -} -.light .chapter li { - color: #aaa; -} -.light .chapter li a { - color: #364149; -} -.light .chapter li .active, -.light .chapter li a:hover { -/* Animate color change */ - color: #008cff; -} -.light .chapter .spacer { - background-color: #f4f4f4; -} -.light .menu-bar, -.light .menu-bar:visited, -.light .nav-chapters, -.light .nav-chapters:visited, -.light .mobile-nav-chapters, -.light .mobile-nav-chapters:visited, -.light .menu-bar .icon-button, -.light .menu-bar a i { - color: #ccc; -} -.light .menu-bar i:hover, -.light .menu-bar .icon-button:hover, -.light .nav-chapters:hover, -.light .mobile-nav-chapters i:hover { - color: #333; -} -.light .mobile-nav-chapters i:hover { - color: #364149; -} -.light .mobile-nav-chapters { - background-color: #fafafa; -} -.light #searchresults a, -.light .content a:link, -.light a:visited, -.light a > .hljs { - color: #4183c4; -} -.light .theme-popup { - color: #333; - background: #fafafa; - border: 1px solid #ccc; - margin: 0; - padding: 0; - list-style: none; - display: none; -} -.light .theme-popup .theme:hover { - background-color: #e6e6e6; -} -.light .theme-popup .default { - color: #ccc; -} -.light blockquote { - margin: 20px 0; - padding: 0 20px; - color: #333; - background-color: #f2f7f9; - border-top: 0.1em solid #e1edf1; - border-bottom: 0.1em solid #e1edf1; -} -.light table td { - border-color: #f2f2f2; -} -.light table tbody tr:nth-child(2n) { - background: #f7f7f7; -} -.light table thead { - background: #ccc; -} -.light table thead td { - border: none; -} -.light table thead tr { - border: 1px #ccc solid; -} -.light :not(pre) > .hljs { - display: inline-block; - vertical-align: middle; - padding: 0.1em 0.3em; - border-radius: 3px; - color: #6e6b5e; -} -.light a:hover > .hljs { - text-decoration: underline; -} -.light pre { - position: relative; -} -.light pre > .buttons { - position: absolute; - z-index: 100; - right: 5px; - top: 5px; - color: #364149; - cursor: pointer; -} -.light pre > .buttons :hover { - color: #008cff; -} -.light pre > .buttons i { - margin-left: 8px; -} -.light pre > .buttons button { - color: inherit; - background: transparent; - border: none; - cursor: inherit; -} -.light pre > .result { - margin-top: 10px; -} -.light .icon-button { - border: none; - background: none; - padding: 0; - color: inherit; -} -.light .icon-button i { - margin: 0; -} -.light ::-webkit-scrollbar { - background: #fff; -} -.light ::-webkit-scrollbar-thumb { - background: #ccc; -} -.light #searchbar { - border: 1px solid #aaa; - border-radius: 3px; - background-color: #fafafa; - color: #000; -} -.light #searchbar:focus, -.light #searchbar.active { - -webkit-box-shadow: 0 0 3px #aaa; - box-shadow: 0 0 3px #aaa; -} -.light .searchresults-header { - color: #666; -} -.light .searchresults-outer { - border-bottom: 1px dashed #888; -} -.light ul#searchresults li.focus { - background-color: #e4f2fe; -} -.light mark { - background-color: #a2cff5; -} -.coal { - color: #98a3ad; - background-color: #141617; -/* Inline code */ -/* Search */ -} -.coal .content .header:link, -.coal .content .header:visited { - color: #98a3ad; -} -.coal .content .header:link:hover, -.coal .content .header:visited:hover { - text-decoration: none; -} -.coal .menu-bar { - margin: auto -15px; -} -.coal .menu-bar > #menu-bar-sticky-container { - background-color: #141617; - border-bottom-color: #141617; - border-bottom-width: 1px; - border-bottom-style: solid; -} -.coal .menu-bar.bordered > #menu-bar-sticky-container { - border-bottom-color: #1f2223; -} -.coal .sidebar { - background-color: #292c2f; - color: #a1adb8; -} -.coal .sidebar::-webkit-scrollbar { - background: #292c2f; -} -.coal .sidebar::-webkit-scrollbar-thumb { - background: #a1adb8; -} -.coal .chapter li { - color: #505254; -} -.coal .chapter li a { - color: #a1adb8; -} -.coal .chapter li .active, -.coal .chapter li a:hover { -/* Animate color change */ - color: #3473ad; -} -.coal .chapter .spacer { - background-color: #393939; -} -.coal .menu-bar, -.coal .menu-bar:visited, -.coal .nav-chapters, -.coal .nav-chapters:visited, -.coal .mobile-nav-chapters, -.coal .mobile-nav-chapters:visited, -.coal .menu-bar .icon-button, -.coal .menu-bar a i { - color: #43484d; -} -.coal .menu-bar i:hover, -.coal .menu-bar .icon-button:hover, -.coal .nav-chapters:hover, -.coal .mobile-nav-chapters i:hover { - color: #b3c0cc; -} -.coal .mobile-nav-chapters i:hover { - color: #a1adb8; -} -.coal .mobile-nav-chapters { - background-color: #292c2f; -} -.coal #searchresults a, -.coal .content a:link, -.coal a:visited, -.coal a > .hljs { - color: #2b79a2; -} -.coal .theme-popup { - color: #98a3ad; - background: #141617; - border: 1px solid #43484d; - margin: 0; - padding: 0; - list-style: none; - display: none; -} -.coal .theme-popup .theme:hover { - background-color: #1f2124; -} -.coal .theme-popup .default { - color: #43484d; -} -.coal blockquote { - margin: 20px 0; - padding: 0 20px; - color: #98a3ad; - background-color: #242637; - border-top: 0.1em solid #2c2f44; - border-bottom: 0.1em solid #2c2f44; -} -.coal table td { - border-color: #1f2223; -} -.coal table tbody tr:nth-child(2n) { - background: #1b1d1e; -} -.coal table thead { - background: #3f4649; -} -.coal table thead td { - border: none; -} -.coal table thead tr { - border: 1px #3f4649 solid; -} -.coal :not(pre) > .hljs { - display: inline-block; - vertical-align: middle; - padding: 0.1em 0.3em; - border-radius: 3px; - color: #c5c8c6; -} -.coal a:hover > .hljs { - text-decoration: underline; -} -.coal pre { - position: relative; -} -.coal pre > .buttons { - position: absolute; - z-index: 100; - right: 5px; - top: 5px; - color: #a1adb8; - cursor: pointer; -} -.coal pre > .buttons :hover { - color: #3473ad; -} -.coal pre > .buttons i { - margin-left: 8px; -} -.coal pre > .buttons button { - color: inherit; - background: transparent; - border: none; - cursor: inherit; -} -.coal pre > .result { - margin-top: 10px; -} -.coal .icon-button { - border: none; - background: none; - padding: 0; - color: inherit; -} -.coal .icon-button i { - margin: 0; -} -.coal ::-webkit-scrollbar { - background: #141617; -} -.coal ::-webkit-scrollbar-thumb { - background: #a1adb8; -} -.coal #searchbar { - border: 1px solid #aaa; - border-radius: 3px; - background-color: #b7b7b7; - color: #000; -} -.coal #searchbar:focus, -.coal #searchbar.active { - -webkit-box-shadow: 0 0 3px #aaa; - box-shadow: 0 0 3px #aaa; -} -.coal .searchresults-header { - color: #666; -} -.coal .searchresults-outer { - border-bottom: 1px dashed #98a3ad; -} -.coal ul#searchresults li.focus { - background-color: #2b2b2f; -} -.coal mark { - background-color: #355c7d; -} -.navy { - color: #bcbdd0; - background-color: #161923; -/* Inline code */ -/* Search */ -} -.navy .content .header:link, -.navy .content .header:visited { - color: #bcbdd0; -} -.navy .content .header:link:hover, -.navy .content .header:visited:hover { - text-decoration: none; -} -.navy .menu-bar { - margin: auto -15px; -} -.navy .menu-bar > #menu-bar-sticky-container { - background-color: #161923; - border-bottom-color: #161923; - border-bottom-width: 1px; - border-bottom-style: solid; -} -.navy .menu-bar.bordered > #menu-bar-sticky-container { - border-bottom-color: #1f2331; -} -.navy .sidebar { - background-color: #282d3f; - color: #c8c9db; -} -.navy .sidebar::-webkit-scrollbar { - background: #282d3f; -} -.navy .sidebar::-webkit-scrollbar-thumb { - background: #c8c9db; -} -.navy .chapter li { - color: #505274; -} -.navy .chapter li a { - color: #c8c9db; -} -.navy .chapter li .active, -.navy .chapter li a:hover { -/* Animate color change */ - color: #2b79a2; -} -.navy .chapter .spacer { - background-color: #2d334f; -} -.navy .menu-bar, -.navy .menu-bar:visited, -.navy .nav-chapters, -.navy .nav-chapters:visited, -.navy .mobile-nav-chapters, -.navy .mobile-nav-chapters:visited, -.navy .menu-bar .icon-button, -.navy .menu-bar a i { - color: #737480; -} -.navy .menu-bar i:hover, -.navy .menu-bar .icon-button:hover, -.navy .nav-chapters:hover, -.navy .mobile-nav-chapters i:hover { - color: #b7b9cc; -} -.navy .mobile-nav-chapters i:hover { - color: #c8c9db; -} -.navy .mobile-nav-chapters { - background-color: #282d3f; -} -.navy #searchresults a, -.navy .content a:link, -.navy a:visited, -.navy a > .hljs { - color: #2b79a2; -} -.navy .theme-popup { - color: #bcbdd0; - background: #161923; - border: 1px solid #737480; - margin: 0; - padding: 0; - list-style: none; - display: none; -} -.navy .theme-popup .theme:hover { - background-color: #282e40; -} -.navy .theme-popup .default { - color: #737480; -} -.navy blockquote { - margin: 20px 0; - padding: 0 20px; - color: #bcbdd0; - background-color: #262933; - border-top: 0.1em solid #2f333f; - border-bottom: 0.1em solid #2f333f; -} -.navy table td { - border-color: #1f2331; -} -.navy table tbody tr:nth-child(2n) { - background: #1b1f2b; -} -.navy table thead { - background: #39415b; -} -.navy table thead td { - border: none; -} -.navy table thead tr { - border: 1px #39415b solid; -} -.navy :not(pre) > .hljs { - display: inline-block; - vertical-align: middle; - padding: 0.1em 0.3em; - border-radius: 3px; - color: #c5c8c6; -} -.navy a:hover > .hljs { - text-decoration: underline; -} -.navy pre { - position: relative; -} -.navy pre > .buttons { - position: absolute; - z-index: 100; - right: 5px; - top: 5px; - color: #c8c9db; - cursor: pointer; -} -.navy pre > .buttons :hover { - color: #2b79a2; -} -.navy pre > .buttons i { - margin-left: 8px; -} -.navy pre > .buttons button { - color: inherit; - background: transparent; - border: none; - cursor: inherit; -} -.navy pre > .result { - margin-top: 10px; -} -.navy .icon-button { - border: none; - background: none; - padding: 0; - color: inherit; -} -.navy .icon-button i { - margin: 0; -} -.navy ::-webkit-scrollbar { - background: #161923; -} -.navy ::-webkit-scrollbar-thumb { - background: #c8c9db; -} -.navy #searchbar { - border: 1px solid #aaa; - border-radius: 3px; - background-color: #aeaec6; - color: #000; -} -.navy #searchbar:focus, -.navy #searchbar.active { - -webkit-box-shadow: 0 0 3px #aaa; - box-shadow: 0 0 3px #aaa; -} -.navy .searchresults-header { - color: #5f5f71; -} -.navy .searchresults-outer { - border-bottom: 1px dashed #5c5c68; -} -.navy ul#searchresults li.focus { - background-color: #242430; -} -.navy mark { - background-color: #a2cff5; -} -.rust { - color: #262625; - background-color: #e1e1db; -/* Inline code */ -/* Search */ -} -.rust .content .header:link, -.rust .content .header:visited { - color: #262625; -} -.rust .content .header:link:hover, -.rust .content .header:visited:hover { - text-decoration: none; -} -.rust .menu-bar { - margin: auto -15px; -} -.rust .menu-bar > #menu-bar-sticky-container { - background-color: #e1e1db; - border-bottom-color: #e1e1db; - border-bottom-width: 1px; - border-bottom-style: solid; -} -.rust .menu-bar.bordered > #menu-bar-sticky-container { - border-bottom-color: #d7d7cf; -} -.rust .sidebar { - background-color: #3b2e2a; - color: #c8c9db; -} -.rust .sidebar::-webkit-scrollbar { - background: #3b2e2a; -} -.rust .sidebar::-webkit-scrollbar-thumb { - background: #c8c9db; -} -.rust .chapter li { - color: #505254; -} -.rust .chapter li a { - color: #c8c9db; -} -.rust .chapter li .active, -.rust .chapter li a:hover { -/* Animate color change */ - color: #e69f67; -} -.rust .chapter .spacer { - background-color: #45373a; -} -.rust .menu-bar, -.rust .menu-bar:visited, -.rust .nav-chapters, -.rust .nav-chapters:visited, -.rust .mobile-nav-chapters, -.rust .mobile-nav-chapters:visited, -.rust .menu-bar .icon-button, -.rust .menu-bar a i { - color: #737480; -} -.rust .menu-bar i:hover, -.rust .menu-bar .icon-button:hover, -.rust .nav-chapters:hover, -.rust .mobile-nav-chapters i:hover { - color: #262625; -} -.rust .mobile-nav-chapters i:hover { - color: #c8c9db; -} -.rust .mobile-nav-chapters { - background-color: #3b2e2a; -} -.rust #searchresults a, -.rust .content a:link, -.rust a:visited, -.rust a > .hljs { - color: #2b79a2; -} -.rust .theme-popup { - color: #262625; - background: #e1e1db; - border: 1px solid #b38f6b; - margin: 0; - padding: 0; - list-style: none; - display: none; -} -.rust .theme-popup .theme:hover { - background-color: #99908a; -} -.rust .theme-popup .default { - color: #737480; -} -.rust blockquote { - margin: 20px 0; - padding: 0 20px; - color: #262625; - background-color: #c1c1bb; - border-top: 0.1em solid #b8b8b1; - border-bottom: 0.1em solid #b8b8b1; -} -.rust table td { - border-color: #d7d7cf; -} -.rust table tbody tr:nth-child(2n) { - background: #dbdbd4; -} -.rust table thead { - background: #b3a497; -} -.rust table thead td { - border: none; -} -.rust table thead tr { - border: 1px #b3a497 solid; -} -.rust :not(pre) > .hljs { - display: inline-block; - vertical-align: middle; - padding: 0.1em 0.3em; - border-radius: 3px; - color: #6e6b5e; -} -.rust a:hover > .hljs { - text-decoration: underline; -} -.rust pre { - position: relative; -} -.rust pre > .buttons { - position: absolute; - z-index: 100; - right: 5px; - top: 5px; - color: #c8c9db; - cursor: pointer; -} -.rust pre > .buttons :hover { - color: #e69f67; -} -.rust pre > .buttons i { - margin-left: 8px; -} -.rust pre > .buttons button { - color: inherit; - background: transparent; - border: none; - cursor: inherit; -} -.rust pre > .result { - margin-top: 10px; -} -.rust .icon-button { - border: none; - background: none; - padding: 0; - color: inherit; -} -.rust .icon-button i { - margin: 0; -} -.rust ::-webkit-scrollbar { - background: #e1e1db; -} -.rust ::-webkit-scrollbar-thumb { - background: #c8c9db; -} -.rust #searchbar { - border: 1px solid #aaa; - border-radius: 3px; - background-color: #fafafa; - color: #000; -} -.rust #searchbar:focus, -.rust #searchbar.active { - -webkit-box-shadow: 0 0 3px #aaa; - box-shadow: 0 0 3px #aaa; -} -.rust .searchresults-header { - color: #666; -} -.rust .searchresults-outer { - border-bottom: 1px dashed #888; -} -.rust ul#searchresults li.focus { - background-color: #dec2a2; -} -.rust mark { - background-color: #e69f67; -} -.ayu { - color: #c5c5c5; - background-color: #0f1419; -/* Inline code */ -/* Search */ -} -.ayu .content .header:link, -.ayu .content .header:visited { - color: #c5c5c5; -} -.ayu .content .header:link:hover, -.ayu .content .header:visited:hover { - text-decoration: none; -} -.ayu .menu-bar { - margin: auto -15px; -} -.ayu .menu-bar > #menu-bar-sticky-container { - background-color: #0f1419; - border-bottom-color: #0f1419; - border-bottom-width: 1px; - border-bottom-style: solid; -} -.ayu .menu-bar.bordered > #menu-bar-sticky-container { - border-bottom-color: #182028; -} -.ayu .sidebar { - background-color: #14191f; - color: #c8c9db; -} -.ayu .sidebar::-webkit-scrollbar { - background: #14191f; -} -.ayu .sidebar::-webkit-scrollbar-thumb { - background: #c8c9db; -} -.ayu .chapter li { - color: #5c6773; -} -.ayu .chapter li a { - color: #c8c9db; -} -.ayu .chapter li .active, -.ayu .chapter li a:hover { -/* Animate color change */ - color: #ffb454; -} -.ayu .chapter .spacer { - background-color: #2d334f; -} -.ayu .menu-bar, -.ayu .menu-bar:visited, -.ayu .nav-chapters, -.ayu .nav-chapters:visited, -.ayu .mobile-nav-chapters, -.ayu .mobile-nav-chapters:visited, -.ayu .menu-bar .icon-button, -.ayu .menu-bar a i { - color: #737480; -} -.ayu .menu-bar i:hover, -.ayu .menu-bar .icon-button:hover, -.ayu .nav-chapters:hover, -.ayu .mobile-nav-chapters i:hover { - color: #b7b9cc; -} -.ayu .mobile-nav-chapters i:hover { - color: #c8c9db; -} -.ayu .mobile-nav-chapters { - background-color: #14191f; -} -.ayu #searchresults a, -.ayu .content a:link, -.ayu a:visited, -.ayu a > .hljs { - color: #0096cf; -} -.ayu .theme-popup { - color: #c5c5c5; - background: #14191f; - border: 1px solid #5c6773; - margin: 0; - padding: 0; - list-style: none; - display: none; -} -.ayu .theme-popup .theme:hover { - background-color: #191f26; -} -.ayu .theme-popup .default { - color: #737480; -} -.ayu blockquote { - margin: 20px 0; - padding: 0 20px; - color: #c5c5c5; - background-color: #262933; - border-top: 0.1em solid #2f333f; - border-bottom: 0.1em solid #2f333f; -} -.ayu table td { - border-color: #182028; -} -.ayu table tbody tr:nth-child(2n) { - background: #141b22; -} -.ayu table thead { - background: #324354; -} -.ayu table thead td { - border: none; -} -.ayu table thead tr { - border: 1px #324354 solid; -} -.ayu :not(pre) > .hljs { - display: inline-block; - vertical-align: middle; - padding: 0.1em 0.3em; - border-radius: 3px; - color: #ffb454; -} -.ayu a:hover > .hljs { - text-decoration: underline; -} -.ayu pre { - position: relative; -} -.ayu pre > .buttons { - position: absolute; - z-index: 100; - right: 5px; - top: 5px; - color: #c8c9db; - cursor: pointer; -} -.ayu pre > .buttons :hover { - color: #ffb454; -} -.ayu pre > .buttons i { - margin-left: 8px; -} -.ayu pre > .buttons button { - color: inherit; - background: transparent; - border: none; - cursor: inherit; -} -.ayu pre > .result { - margin-top: 10px; -} -.ayu .icon-button { - border: none; - background: none; - padding: 0; - color: inherit; -} -.ayu .icon-button i { - margin: 0; -} -.ayu ::-webkit-scrollbar { - background: #0f1419; -} -.ayu ::-webkit-scrollbar-thumb { - background: #c8c9db; -} -.ayu #searchbar { - border: 1px solid #848484; - border-radius: 3px; - background-color: #424242; - color: #fff; -} -.ayu #searchbar:focus, -.ayu #searchbar.active { - -webkit-box-shadow: 0 0 3px #d4c89f; - box-shadow: 0 0 3px #d4c89f; -} -.ayu .searchresults-header { - color: #666; -} -.ayu .searchresults-outer { - border-bottom: 1px dashed #888; -} -.ayu ul#searchresults li.focus { - background-color: #252932; -} -.ayu mark { - background-color: #e3b171; -} -@media only print { - #sidebar, - #menu-bar, - .nav-chapters, - .mobile-nav-chapters { - display: none; - } - #page-wrapper.page-wrapper { - -webkit-transform: none; - -moz-transform: none; - -o-transform: none; - -ms-transform: none; - transform: none; - margin-left: 0px; - overflow-y: initial; - } - #content { - max-width: none; - margin: 0; - padding: 0; - } - .page { - overflow-y: initial; - } - code { - background-color: #666; - border-radius: 5px; -/* Force background to be printed in Chrome */ - -webkit-print-color-adjust: exact; - } - pre > .buttons { - z-index: 2; - } - a, - a:visited, - a:active, - a:hover { - color: #4183c4; - text-decoration: none; - } - h1, - h2, - h3, - h4, - h5, - h6 { - page-break-inside: avoid; - page-break-after: avoid; - } - pre, - code { - page-break-inside: avoid; - white-space: pre-wrap; - } - .fa { - display: none !important; - } -} -.tooltiptext { - position: absolute; - visibility: hidden; - color: #fff; - background-color: #333; - -webkit-transform: translateX(-50%); - -moz-transform: translateX(-50%); - -o-transform: translateX(-50%); - -ms-transform: translateX(-50%); - transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */ - left: -8px; /* Half of the width of the icon */ - top: -35px; - font-size: 0.8em; - text-align: center; - border-radius: 6px; - padding: 5px 8px; - margin: 5px; - z-index: 1000; -} -.tooltipped .tooltiptext { - visibility: visible; -} -#searchresults a { - text-decoration: none; -} -mark { - border-radius: 2px; - padding: 0 3px 1px 3px; - margin: 0 -3px -1px -3px; - -webkit-transition: background-color 300ms linear; - -moz-transition: background-color 300ms linear; - -o-transition: background-color 300ms linear; - -ms-transition: background-color 300ms linear; - transition: background-color 300ms linear; - cursor: pointer; -} -mark.fade-out { - background-color: rgba(0,0,0,0) !important; - cursor: auto; -} -.searchbar-outer { - margin-left: auto; - margin-right: auto; - max-width: 750px; -} -#searchbar { - width: 100%; - margin: 5px auto 0px auto; - padding: 10px 16px; - -webkit-transition: box-shadow 300ms ease-in-out; - -moz-transition: box-shadow 300ms ease-in-out; - -o-transition: box-shadow 300ms ease-in-out; - -ms-transition: box-shadow 300ms ease-in-out; - transition: box-shadow 300ms ease-in-out; -} -.searchresults-header { - font-weight: bold; - font-size: 1em; - padding: 18px 0 0 5px; -} -.searchresults-outer { - margin-left: auto; - margin-right: auto; - max-width: 750px; -} -ul#searchresults { - list-style: none; - padding-left: 20px; -} -ul#searchresults li { - margin: 10px 0px; - padding: 2px; - border-radius: 2px; -} -ul#searchresults span.teaser { - display: block; - clear: both; - margin: 5px 0 0 20px; - font-size: 0.8em; -} -ul#searchresults span.teaser em { - font-weight: bold; - font-style: normal; -} diff --git a/src/theme/css/book.css b/src/theme/css/book.css new file mode 100644 index 00000000..f077bb4f --- /dev/null +++ b/src/theme/css/book.css @@ -0,0 +1,11 @@ + +@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"; diff --git a/src/theme/stylus/general.styl b/src/theme/css/general.css similarity index 53% rename from src/theme/stylus/general.styl rename to src/theme/css/general.css index e40745b6..602288a4 100644 --- a/src/theme/stylus/general.styl +++ b/src/theme/css/general.css @@ -1,7 +1,7 @@ html { - font-family: "Open Sans", sans-serif - color: #333 - text-size-adjust: none + font-family: "Open Sans", sans-serif; + color: #333; + text-size-adjust: none; } body { @@ -12,30 +12,26 @@ body { code { font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace; - font-size: 0.875em; // please adjust the ace font size accordingly in editor.js + font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */ } -.left { - float: left +.left { float: left; } + +.right { float: right; } + +.hidden { display: none; } + +.play-button.hidden { display: none; } + +h2, h3 { margin-top: 2.5em; } +h4, h5 { margin-top: 2em; } + +.header + .header h3, +.header + .header h4, +.header + .header h5 { + margin-top: 1em; } -.right { - float: right -} - -.hidden { - display: none; -} - -.play-button.hidden { - display: none; -} - -h2, h3 { margin-top: 2.5em } -h4, h5 { margin-top: 2em } - -.header + .header h3, .header + .header h4, .header + .header h5 { margin-top: 1em } - a.header:target h1:before, a.header:target h2:before, a.header:target h3:before, @@ -49,15 +45,13 @@ a.header:target h4:before { table { margin: 0 auto; border-collapse: collapse; - - td { - padding: 3px 20px; - border: 1px solid; - } - - thead { - td { font-weight: 700; } - } +} +table td { + padding: 3px 20px; + border: 1px solid; +} +table thead td { + font-weight: 700; } :not(.footnote-definition) + .footnote-definition, @@ -68,6 +62,8 @@ table { .footnote-definition { font-size: 0.9em; margin: 0.5em 0; - - p { display: inline; } +} + +.footnote-definition p { + display: inline; } diff --git a/src/theme/css/menu.css b/src/theme/css/menu.css new file mode 100644 index 00000000..50872e2b --- /dev/null +++ b/src/theme/css/menu.css @@ -0,0 +1,53 @@ +#menu-bar { + position: -webkit-sticky; + position: sticky; + top: 0; + z-index: 101; +} +#menu-bar > #menu-bar-sticky-container { + display: flex; + flex-wrap: wrap; +} +.js #menu-bar > #menu-bar-sticky-container { + transition: transform 0.3s; +} +#menu-bar i, #menu-bar .icon-button { + position: relative; + margin: 0 8px; + z-index: 10; + line-height: 50px; + cursor: pointer; + transition: color 0.5s; +} +@media only screen and (max-width: var(--narrow-device-max-width)) { + #menu-bar i, #menu-bar .icon-button { + margin: 0 5px; + } +} + +#print-button { + margin: 0 15px; +} + +html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container { + transform: translateY(-60px); +} + +.left-buttons { margin: 0 5px; } +.no-js .left-buttons { display: none; } + +.menu-title { + display: inline-block; + font-weight: 200; + font-size: 20px; + line-height: 50px; + text-align: center; + margin: 0; + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.js .menu-title { + cursor: pointer; +} diff --git a/src/theme/css/nav-icons.css b/src/theme/css/nav-icons.css new file mode 100644 index 00000000..eb066f98 --- /dev/null +++ b/src/theme/css/nav-icons.css @@ -0,0 +1,53 @@ +.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; } +} diff --git a/src/theme/css/page.css b/src/theme/css/page.css new file mode 100644 index 00000000..b4e803ef --- /dev/null +++ b/src/theme/css/page.css @@ -0,0 +1,37 @@ +@import 'variables.css'; + +.page-wrapper { + box-sizing: border-box; +} +.js .page-wrapper { + transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */ +} + +.sidebar-visible .page-wrapper { + transform: translateX(var(--sidebar-width)); +} +@media only screen and (min-width: var(--sidebar-reflow-width)) { + .sidebar-visible .page-wrapper { + transform: none; + margin-left: var(--sidebar-width); + } +} + +.page { + outline: 0; + padding: 0 var(--page-padding); +} + +.content { + overflow-y: auto; + padding: 0 15px; + padding-bottom: 50px; +} +.content main { + margin-left: auto; + margin-right: auto; + max-width: var(--content-max-width); +} +.content a { text-decoration: none; } +.content a:hover { text-decoration: underline; } +.content img { max-width: 100%; } diff --git a/src/theme/stylus/print.styl b/src/theme/css/print.css similarity index 63% rename from src/theme/stylus/print.styl rename to src/theme/css/print.css index 931af1a4..a82a0859 100644 --- a/src/theme/stylus/print.styl +++ b/src/theme/css/print.css @@ -4,7 +4,7 @@ #menu-bar, .nav-chapters, .mobile-nav-chapters { - display: none + display: none; } #page-wrapper.page-wrapper { @@ -24,11 +24,11 @@ } code { - background-color: #666666 - border-radius: 5px + background-color: #666666; + border-radius: 5px; /* Force background to be printed in Chrome */ - -webkit-print-color-adjust: exact + -webkit-print-color-adjust: exact; } pre > .buttons { @@ -36,21 +36,21 @@ } a, a:visited, a:active, a:hover { - color: #4183c4 - text-decoration: none + color: #4183c4; + text-decoration: none; } h1, h2, h3, h4, h5, h6 { - page-break-inside: avoid - page-break-after: avoid + page-break-inside: avoid; + page-break-after: avoid; } pre, code { - page-break-inside: avoid - white-space: pre-wrap + page-break-inside: avoid; + white-space: pre-wrap; } .fa { - display: none !important + display: none !important; } } diff --git a/src/theme/stylus/searchbar.styl b/src/theme/css/searchbar.css similarity index 64% rename from src/theme/stylus/searchbar.styl rename to src/theme/css/searchbar.css index 4d1914ba..c91fd921 100644 --- a/src/theme/stylus/searchbar.styl +++ b/src/theme/css/searchbar.css @@ -1,4 +1,4 @@ -@require 'variables' +@import 'variables.css'; #searchresults a { text-decoration: none; @@ -20,7 +20,7 @@ mark.fade-out { .searchbar-outer { margin-left: auto; margin-right: auto; - max-width: $content-max-width; + max-width: var(--content-max-width); } #searchbar { @@ -39,28 +39,25 @@ mark.fade-out { .searchresults-outer { margin-left: auto; margin-right: auto; - max-width: $content-max-width; + max-width: var(--content-max-width); } ul#searchresults { list-style: none; padding-left: 20px; - - li { - margin: 10px 0px; - padding: 2px; - border-radius: 2px; - } - - span.teaser { - display: block; - clear: both; - margin: 5px 0 0 20px; - font-size: 0.8em; - } - - span.teaser em { - font-weight: bold; - font-style: normal; - } +} +ul#searchresults li { + margin: 10px 0px; + padding: 2px; + border-radius: 2px; +} +ul#searchresults span.teaser { + display: block; + clear: both; + margin: 5px 0 0 20px; + font-size: 0.8em; +} +ul#searchresults span.teaser em { + font-weight: bold; + font-style: normal; } diff --git a/src/theme/css/sidebar.css b/src/theme/css/sidebar.css new file mode 100644 index 00000000..99b4e29c --- /dev/null +++ b/src/theme/css/sidebar.css @@ -0,0 +1,53 @@ +@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; +} +.js .sidebar { + transition: transform 0.3s; /* Animation: slide away */ +} +.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; +} +.chapter li a:hover { text-decoration: none } + +.spacer { + width: 100%; + height: 3px; + margin: 5px 0px; +} + +@media (-moz-touch-enabled: 1), (pointer: coarse) { + .chapter li a { padding: 5px 0; } + .spacer { margin: 10px 0; } +} + +.section { + list-style: none outside none; + padding-left: 20px; + line-height: 1.9em; +} diff --git a/src/theme/css/theme-popup.css b/src/theme/css/theme-popup.css new file mode 100644 index 00000000..b5425681 --- /dev/null +++ b/src/theme/css/theme-popup.css @@ -0,0 +1,25 @@ +.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; +} diff --git a/src/theme/css/themes/ayu.css b/src/theme/css/themes/ayu.css new file mode 100644 index 00000000..fa88e229 --- /dev/null +++ b/src/theme/css/themes/ayu.css @@ -0,0 +1,39 @@ +.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; +} diff --git a/src/theme/css/themes/base.css b/src/theme/css/themes/base.css new file mode 100644 index 00000000..338761f0 --- /dev/null +++ b/src/theme/css/themes/base.css @@ -0,0 +1,233 @@ + +@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); +} + +.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); +} \ No newline at end of file diff --git a/src/theme/css/themes/coal.css b/src/theme/css/themes/coal.css new file mode 100644 index 00000000..f826a789 --- /dev/null +++ b/src/theme/css/themes/coal.css @@ -0,0 +1,39 @@ +.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; +} diff --git a/src/theme/css/themes/light.css b/src/theme/css/themes/light.css new file mode 100644 index 00000000..6eb257df --- /dev/null +++ b/src/theme/css/themes/light.css @@ -0,0 +1,39 @@ +.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; +} diff --git a/src/theme/css/themes/navy.css b/src/theme/css/themes/navy.css new file mode 100644 index 00000000..7e6c165f --- /dev/null +++ b/src/theme/css/themes/navy.css @@ -0,0 +1,40 @@ + +.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; +} diff --git a/src/theme/css/themes/rust.css b/src/theme/css/themes/rust.css new file mode 100644 index 00000000..adc801cd --- /dev/null +++ b/src/theme/css/themes/rust.css @@ -0,0 +1,40 @@ + +.rust { + --bg: #e1e1db; + --fg: #262625; + + --sidebar-bg: #3b2e2a; + --sidebar-fg: #c8c9db; + --sidebar-non-existant: #505254; + --sidebar-active: #e69f67; + --sidebar-spacer: #45373a; + + --scrollbar: var(--sidebar-fg); + + --icons: #737480; + --icons-hover: #262625; + + --links: #2b79a2; + + --inline-code-color: #6e6b5e; + + --theme-popup-bg: #e1e1db; + --theme-popup-border: #b38f6b; + --theme-hover: #99908a; + + --quote-bg: #c1c1bb; + --quote-border: darken(var(--quote-bg), 5%); + + --table-border-color: darken(var(--bg), 5%); + --table-header-bg: #b3a497; + --table-alternate-bg: darken(var(--bg), 3%); + + --searchbar-border-color: #aaa; + --searchbar-bg: #fafafa; + --searchbar-fg: #000; + --searchbar-shadow-color: #aaa; + --searchresults-header-fg: #666; + --searchresults-border-color: #888; + --searchresults-li-bg: #dec2a2; + --search-mark-bg: #e69f67; +} diff --git a/src/theme/stylus/tooltip.styl b/src/theme/css/tooltip.css similarity index 100% rename from src/theme/stylus/tooltip.styl rename to src/theme/css/tooltip.css diff --git a/src/theme/css/variables.css b/src/theme/css/variables.css new file mode 100644 index 00000000..8089fad8 --- /dev/null +++ b/src/theme/css/variables.css @@ -0,0 +1,10 @@ + +:root { + --sidebar-width: 300px; + --page-padding: 15px; + --content-max-width: 750px; + --content-min-width: 320px; + --page-plus-sidebar-width: var(--content-max-width) + var(--sidebar-width) + var(--page-padding) * 2; + --sidebar-reflow-width: var(--sidebar-width) + var(--content-min-width); + --narrow-device-max-width: 420px; +} diff --git a/src/theme/stylus/book.styl b/src/theme/stylus/book.styl deleted file mode 100644 index a9eec8ad..00000000 --- a/src/theme/stylus/book.styl +++ /dev/null @@ -1,12 +0,0 @@ -@import "nib" - -@import 'general' -@import 'sidebar' -@import 'page' -@import 'menu' -@import 'nav-icons' -@import 'theme-popup' -@import 'themes' -@import 'print' -@import 'tooltip' -@import 'searchbar' diff --git a/src/theme/stylus/menu.styl b/src/theme/stylus/menu.styl deleted file mode 100644 index 66d0c07f..00000000 --- a/src/theme/stylus/menu.styl +++ /dev/null @@ -1,55 +0,0 @@ -#menu-bar { - position: -webkit-sticky - position: sticky - top: 0 - z-index: 101 - - & > #menu-bar-sticky-container { - display: flex - flex-wrap: wrap - .js & { - transition: transform 0.3s - } - } - - i, .icon-button { - position: relative - margin: 0 8px - @media only screen and (max-width: $narrow-device-max-width) { - margin: 0 5px - } - z-index: 10 - line-height: 50px - cursor: pointer - transition: color 0.5s - } - - #print-button { - margin: 0 15px - } -} - -html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container { - transform: translateY(-60px); -} - -.left-buttons { - .no-js & { display: none } - margin: 0 5px -} - -.menu-title { - display: inline-block - font-weight: 200 - font-size: 20px - line-height: 50px - text-align: center - margin: 0 - flex: 1 - white-space: nowrap - overflow: hidden - text-overflow: ellipsis - .js & { - cursor: pointer - } -} diff --git a/src/theme/stylus/nav-icons.styl b/src/theme/stylus/nav-icons.styl deleted file mode 100644 index 5d967a54..00000000 --- a/src/theme/stylus/nav-icons.styl +++ /dev/null @@ -1,55 +0,0 @@ -.nav-chapters { - font-size: 2.5em - text-align: center - text-decoration: none - - position: fixed - top: 50px /* Height of menu-bar */ - bottom: 0 - margin: 0 - max-width: 150px - min-width: 90px - - display: flex - justify-content: center - align-content: center - flex-direction: column - - transition: color 0.5s -} - -.nav-chapters:hover { text-decoration: none } - -.nav-wrapper { - margin-top: 50px - display: none -} - -.mobile-nav-chapters { - font-size: 2.5em - text-align: center - text-decoration: none - width: 90px - border-radius: 5px -} - -.previous { - float: left -} - -.next { - float: right - right: $page-padding -} - -@media only screen and (max-width: $page-plus-sidebar-width) { - .nav-wide-wrapper { display: none } - .nav-wrapper { display: block } -} - -@media only screen and (max-width: $page-plus-sidebar-width + $sidebar-width) { - .sidebar-visible { - .nav-wide-wrapper { display: none } - .nav-wrapper { display: block } - } -} diff --git a/src/theme/stylus/page.styl b/src/theme/stylus/page.styl deleted file mode 100644 index d0276df8..00000000 --- a/src/theme/stylus/page.styl +++ /dev/null @@ -1,43 +0,0 @@ -@require 'variables' - -.page-wrapper { - box-sizing: border-box - - // Animation: slide away - .js & { - transition: margin-left 0.3s ease, transform 0.3s ease - } -} - -.sidebar-visible .page-wrapper { - transform: translateX($sidebar-width) - - @media only screen and (min-width: $sidebar-reflow-width) { - transform: none - margin-left: $sidebar-width - } -} - -.page { - outline: 0 - padding: 0 $page-padding -} - -.content { - overflow-y: auto - padding: 0 15px - padding-bottom: 50px - - main { - margin-left: auto - margin-right: auto - max-width: $content-max-width - } - - a { - text-decoration: none; - &:hover { text-decoration: underline; } - } - - img { max-width: 100%; } -} diff --git a/src/theme/stylus/sidebar.styl b/src/theme/stylus/sidebar.styl deleted file mode 100644 index 5d30d8b8..00000000 --- a/src/theme/stylus/sidebar.styl +++ /dev/null @@ -1,56 +0,0 @@ -@require 'variables' - -.sidebar { - position: fixed - left: 0 - top: 0 - bottom: 0 - width: $sidebar-width - overflow-y: auto - padding: 10px 10px - font-size: 0.875em - box-sizing: border-box - -webkit-overflow-scrolling: touch - overscroll-behavior-y: contain; - - // Animation: slide away - .js & { - transition: transform 0.3s - } - - code { - line-height: 2em; - } -} - -.sidebar-hidden .sidebar { - transform: translateX(- $sidebar-width) -} - -.chapter { - list-style: none outside none - padding-left: 0 - line-height: 2.2em - - li a { - display: block; - padding: 0 - text-decoration: none - - @media (-moz-touch-enabled: 1), (pointer: coarse) { padding: 5px 0; } - &:hover { text-decoration: none } - } - - .spacer { - width: 100% - height: 3px - margin: 5px 0px - @media (-moz-touch-enabled: 1), (pointer: coarse) { margin: 10px 0; } - } -} - -.section { - list-style: none outside none - padding-left: 20px - line-height: 1.9em -} diff --git a/src/theme/stylus/theme-popup.styl b/src/theme/stylus/theme-popup.styl deleted file mode 100644 index b0c956e6..00000000 --- a/src/theme/stylus/theme-popup.styl +++ /dev/null @@ -1,31 +0,0 @@ -.theme-popup { - position: absolute - left: 10px - - z-index: 1000; - - border-radius: 4px - font-size: 0.7em - - .theme { - display: inline - border: 0 - margin: 0 - padding: 2px 10px - line-height: 25px - width: 100% - white-space: nowrap - text-align: left - cursor: pointer - color inherit - background: inherit; - font-size: inherit; - - &:hover:first-child, - &:hover:last-child { - border-top-left-radius: inherit; - border-top-right-radius: inherit; - } - } - -} \ No newline at end of file diff --git a/src/theme/stylus/themes/ayu.styl b/src/theme/stylus/themes/ayu.styl deleted file mode 100644 index 1c19ff67..00000000 --- a/src/theme/stylus/themes/ayu.styl +++ /dev/null @@ -1,41 +0,0 @@ -$theme-name = 'ayu' - -$bg = #0f1419 -$fg = #c5c5c5 - -$sidebar-bg = #14191f -$sidebar-fg = #c8c9db -$sidebar-non-existant = #5c6773 -$sidebar-active = #ffb454 -$sidebar-spacer = #2d334f - -$scrollbar = $sidebar-fg - -$icons = #737480 -$icons-hover = #b7b9cc - -$links = #0096cf - -$inline-code-color = #ffb454 - -$theme-popup-bg = #14191f -$theme-popup-border = #5c6773 -$theme-hover = #191f26 - -$quote-bg = #262933 -$quote-border = lighten($quote-bg, 5%) - -$table-border-color = lighten($bg, 5%) -$table-header-bg = lighten($bg, 20%) -$table-alternate-bg = lighten($bg, 3%) - -$searchbar-border-color = #848484 -$searchbar-bg = #424242 -$searchbar-fg = #fff -$searchbar-shadow-color = #d4c89f -$searchresults-header-fg = #666 -$searchresults-border-color = #888 -$searchresults-li-bg = #252932 -$search-mark-bg = #e3b171 - -@import 'base' diff --git a/src/theme/stylus/themes/base.styl b/src/theme/stylus/themes/base.styl deleted file mode 100644 index 939572fc..00000000 --- a/src/theme/stylus/themes/base.styl +++ /dev/null @@ -1,221 +0,0 @@ -.{unquote($theme-name)} { - - color: $fg - background-color: $bg - - .content .header:link, .content .header:visited { - color: $fg; - - &:hover { - text-decoration: none; - } - } - - .menu-bar { - margin: auto (- $page-padding); - - & > #menu-bar-sticky-container { - background-color: $bg - border-bottom-color: $bg - border-bottom-width: 1px - border-bottom-style: solid - } - - &.bordered > #menu-bar-sticky-container { - border-bottom-color: $table-border-color - } - } - - $table-border-color - - .sidebar { - background-color: $sidebar-bg - color: $sidebar-fg - - &::-webkit-scrollbar { - background: $sidebar-bg; - } - - &::-webkit-scrollbar-thumb { - background: $scrollbar; - } - } - - .chapter li { - color: $sidebar-non-existant - - a { color: $sidebar-fg } - - .active, - a:hover, { - /* Animate color change */ - color: $sidebar-active - } - } - - .chapter .spacer { - background-color: $sidebar-spacer - } - - .menu-bar, - .menu-bar:visited, - .nav-chapters, - .nav-chapters:visited, - .mobile-nav-chapters, - .mobile-nav-chapters:visited, - .menu-bar .icon-button, - .menu-bar a i { - color: $icons - } - - .menu-bar i:hover, - .menu-bar .icon-button:hover, - .nav-chapters:hover, - .mobile-nav-chapters i:hover { - color: $icons-hover - } - - .mobile-nav-chapters i:hover { - color: $sidebar-fg - } - - .mobile-nav-chapters { - background-color: $sidebar-bg - } - - #searchresults a, - .content a:link, - a:visited, - a > .hljs { - color: $links - } - - .theme-popup { - color: $fg - background: $theme-popup-bg - border: 1px solid $theme-popup-border - margin: 0; - padding: 0; - list-style: none; - display: none; - - .theme:hover { background-color: $theme-hover } - - .default { color: $icons } - } - - blockquote { - margin: 20px 0; - padding: 0 20px; - color: $fg; - background-color: $quote-bg; - border-top: .1em solid $quote-border; - border-bottom: .1em solid $quote-border; - } - - - table { - - td { - border-color: $table-border-color; - } - - // Alternate background colors for rows - tbody tr:nth-child(2n) { - background: $table-alternate-bg; - } - - thead { - background: $table-header-bg; - td { border: none; } - tr { border: 1px $table-header-bg solid; } - } - } - - - /* Inline code */ - :not(pre) > .hljs { - display: inline-block; - vertical-align: middle; - padding: 0.1em 0.3em; - border-radius: 3px; - color: $inline-code-color; - } - - a:hover > .hljs { - text-decoration: underline; - } - - pre { - position: relative; - - & > .buttons { - position: absolute; - z-index: 100; - right: 5px; - top: 5px; - - color: $sidebar-fg; - cursor: pointer; - - :hover { color: $sidebar-active; } - i { margin-left: 8px; } - button { - color: inherit; - background: transparent; - border: none; - cursor: inherit; - } - } - - & > .result { margin-top: 10px; } - - } - - .icon-button { - border: none; - background: none; - padding: 0; - color: inherit; - - i { - margin: 0; - } - } - - ::-webkit-scrollbar { - background: $bg; - } - - ::-webkit-scrollbar-thumb { - background: $scrollbar; - } - - /* Search */ - #searchbar { - border: 1px solid $searchbar-border-color; - border-radius: 3px; - background-color: $searchbar-bg; - color: $searchbar-fg - - &:focus, &.active { - box-shadow: 0 0 3px $searchbar-shadow-color; - } - } - - .searchresults-header { - color: $searchresults-header-fg; - } - - .searchresults-outer { - border-bottom: 1px dashed $searchresults-border-color; - } - - ul#searchresults li.focus { - background-color: $searchresults-li-bg; - } - - mark { - background-color: $search-mark-bg; - } -} diff --git a/src/theme/stylus/themes/coal.styl b/src/theme/stylus/themes/coal.styl deleted file mode 100644 index 4f9364ea..00000000 --- a/src/theme/stylus/themes/coal.styl +++ /dev/null @@ -1,41 +0,0 @@ -$theme-name = 'coal' - -$bg = #141617 -$fg = #98a3ad - -$sidebar-bg = #292c2f -$sidebar-fg = #a1adb8 -$sidebar-non-existant = #505254 -$sidebar-active = #3473ad -$sidebar-spacer = #393939 - -$scrollbar = $sidebar-fg - -$icons = #43484d -$icons-hover = #b3c0cc - -$links = #2b79a2 - -$inline-code-color = #c5c8c6; - -$theme-popup-bg = #141617 -$theme-popup-border = #43484d -$theme-hover = #1f2124 - -$quote-bg = #242637 -$quote-border = lighten($quote-bg, 5%) - -$table-border-color = lighten($bg, 5%) -$table-header-bg = lighten($bg, 20%) -$table-alternate-bg = lighten($bg, 3%) - -$searchbar-border-color = #aaa -$searchbar-bg = #b7b7b7 -$searchbar-fg = #000 -$searchbar-shadow-color = #aaa -$searchresults-header-fg = #666 -$searchresults-border-color = #98a3ad -$searchresults-li-bg = #2b2b2f -$search-mark-bg = #355c7d - -@import 'base' diff --git a/src/theme/stylus/themes/index.styl b/src/theme/stylus/themes/index.styl deleted file mode 100644 index be06b6fc..00000000 --- a/src/theme/stylus/themes/index.styl +++ /dev/null @@ -1,5 +0,0 @@ -@import 'light' -@import 'coal' -@import 'navy' -@import 'rust' -@import 'ayu' diff --git a/src/theme/stylus/themes/light.styl b/src/theme/stylus/themes/light.styl deleted file mode 100644 index d2b77e21..00000000 --- a/src/theme/stylus/themes/light.styl +++ /dev/null @@ -1,41 +0,0 @@ -$theme-name = 'light' - -$bg = #ffffff -$fg = #333333 - -$sidebar-bg = #fafafa -$sidebar-fg = #364149 -$sidebar-non-existant = #aaaaaa -$sidebar-active = #008cff -$sidebar-spacer = #f4f4f4 - -$scrollbar = #cccccc - -$icons = #cccccc -$icons-hover = #333333 - -$links = #4183c4 - -$inline-code-color = #6e6b5e - -$theme-popup-bg = #fafafa -$theme-popup-border = #cccccc -$theme-hover = #e6e6e6 - -$quote-bg = #f2f7f9 -$quote-border = darken($quote-bg, 5%) - -$table-border-color = darken($bg, 5%) -$table-header-bg = darken($bg, 20%) -$table-alternate-bg = darken($bg, 3%) - -$searchbar-border-color = #aaa -$searchbar-bg = #fafafa -$searchbar-fg = #000 -$searchbar-shadow-color = #aaa -$searchresults-header-fg = #666 -$searchresults-border-color = #888 -$searchresults-li-bg = #e4f2fe -$search-mark-bg = #a2cff5 - -@import 'base' diff --git a/src/theme/stylus/themes/navy.styl b/src/theme/stylus/themes/navy.styl deleted file mode 100644 index d4c038af..00000000 --- a/src/theme/stylus/themes/navy.styl +++ /dev/null @@ -1,41 +0,0 @@ -$theme-name = 'navy' - -$bg = #161923 -$fg = #bcbdd0 - -$sidebar-bg = #282d3f -$sidebar-fg = #c8c9db -$sidebar-non-existant = #505274 -$sidebar-active = #2b79a2 -$sidebar-spacer = #2d334f - -$scrollbar = $sidebar-fg - -$icons = #737480 -$icons-hover = #b7b9cc - -$links = #2b79a2 - -$inline-code-color = #c5c8c6; - -$theme-popup-bg = #161923 -$theme-popup-border = #737480 -$theme-hover = #282e40 - -$quote-bg = #262933 -$quote-border = lighten($quote-bg, 5%) - -$table-border-color = lighten($bg, 5%) -$table-header-bg = lighten($bg, 20%) -$table-alternate-bg = lighten($bg, 3%) - -$searchbar-border-color = #aaa -$searchbar-bg = #aeaec6 -$searchbar-fg = #000 -$searchbar-shadow-color = #aaa -$searchresults-header-fg = #5f5f71 -$searchresults-border-color = #5c5c68 -$searchresults-li-bg = #242430 -$search-mark-bg = #a2cff5 - -@import 'base' diff --git a/src/theme/stylus/themes/rust.styl b/src/theme/stylus/themes/rust.styl deleted file mode 100644 index c5a2eb8f..00000000 --- a/src/theme/stylus/themes/rust.styl +++ /dev/null @@ -1,41 +0,0 @@ -$theme-name = 'rust' - -$bg = #e1e1db -$fg = #262625 - -$sidebar-bg = #3b2e2a -$sidebar-fg = #c8c9db -$sidebar-non-existant = #505254 -$sidebar-active = #e69f67 -$sidebar-spacer = #45373a - -$scrollbar = $sidebar-fg - -$icons = #737480 -$icons-hover = #262625 - -$links = #2b79a2 - -$inline-code-color = #6e6b5e; - -$theme-popup-bg = #e1e1db -$theme-popup-border = #b38f6b -$theme-hover = #99908a - -$quote-bg = #c1c1bb -$quote-border = darken($quote-bg, 5%) - -$table-border-color = darken($bg, 5%) -$table-header-bg = #b3a497 -$table-alternate-bg = darken($bg, 3%) - -$searchbar-border-color = #aaa -$searchbar-bg = #fafafa -$searchbar-fg = #000 -$searchbar-shadow-color = #aaa -$searchresults-header-fg = #666 -$searchresults-border-color = #888 -$searchresults-li-bg = #dec2a2 -$search-mark-bg = #e69f67 - -@import 'base' diff --git a/src/theme/stylus/variables.styl b/src/theme/stylus/variables.styl deleted file mode 100644 index 6ffbb73b..00000000 --- a/src/theme/stylus/variables.styl +++ /dev/null @@ -1,7 +0,0 @@ -$sidebar-width = 300px -$page-padding = 15px -$content-max-width = 750px -$content-min-width = 320px -$page-plus-sidebar-width = $content-max-width + $sidebar-width + $page-padding * 2 -$sidebar-reflow-width = $sidebar-width + $content-min-width -$narrow-device-max-width = 420px