diff --git a/src/theme/book.css b/src/theme/book.css index 1fa18cc9..b234d401 100644 --- a/src/theme/book.css +++ b/src/theme/book.css @@ -3,212 +3,213 @@ html, body { color: #333; } +@media only screen { + .sidebar { + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 300px; + overflow-y: auto; + border-right: 1px solid rgba(0, 0, 0, 0.07); + padding: 10px 10px; + font-size: 14px; + box-sizing: border-box; + -webkit-overflow-scrolling: touch; + background-color: #fafafa; + color: #364149; -.sidebar { - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 300px; - overflow-y: auto; - border-right: 1px solid rgba(0, 0, 0, 0.07); - padding: 10px 10px; - font-size: 14px; - box-sizing: border-box; - -webkit-overflow-scrolling: touch; - background-color: #fafafa; - color: #364149; + /* Animation: slide away */ + -webkit-transition: left 0.5s; /* Safari */ + -o-transition: left 0.5s; /* Opera */ + -moz-transition: left 0.5s; /* Mozilla Firefox */ + transition: left 0.5s; + } - /* Animation: slide away */ - -webkit-transition: left 0.5s; /* Safari */ - -o-transition: left 0.5s; /* Opera */ - -moz-transition: left 0.5s; /* Mozilla Firefox */ - transition: left 0.5s; -} + .page-wrapper { + position: absolute; + overflow-y: auto; + left: 315px; + right: 0; + top: 0; + bottom: 0; + box-sizing: border-box; + background: none repeat scroll 0 0 #FFF; + -webkit-overflow-scrolling: touch; -.page-wrapper { - position: absolute; - overflow-y: auto; - left: 315px; - right: 0; - top: 0; - bottom: 0; - box-sizing: border-box; - background: none repeat scroll 0 0 #FFF; - -webkit-overflow-scrolling: touch; + min-height: 100%; - min-height: 100%; + /* Animation: slide away */ + -webkit-transition: left 0.5s; /* Safari */ + -o-transition: left 0.5s; /* Opera */ + -moz-transition: left 0.5s; /* Mozilla Firefox */ + transition: left 0.5s; + } - /* Animation: slide away */ - -webkit-transition: left 0.5s; /* Safari */ - -o-transition: left 0.5s; /* Opera */ - -moz-transition: left 0.5s; /* Mozilla Firefox */ - transition: left 0.5s; -} + .page { + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; -.page { - position: absolute; - top: 0; - right: 0; - left: 0; - bottom: 0; + padding-right: 15px; + overflow-y: auto; + } - padding-right: 15px; - overflow-y: auto; -} + .content { + margin-left: auto; + margin-right:auto; + max-width: 750px; + padding-bottom: 50px; + } -.content { - margin-left: auto; - margin-right:auto; - max-width: 750px; - padding-bottom: 50px; -} + .chapter { + list-style: none outside none; + padding-left: 0; + line-height: 30px; + } -.chapter { - list-style: none outside none; - padding-left: 0; - line-height: 30px; -} + .section { + list-style: none outside none; + padding-left: 20px; + line-height: 40px; + } -.section { - list-style: none outside none; - padding-left: 20px; - line-height: 40px; -} + .section li { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } -.section li { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} + .chapter li { + color: #AAA; + } -.chapter li { - color: #AAA; -} + .chapter li a { + color: #333; + padding: 5px 0; + text-decoration: none; + } -.chapter li a { - color: #333; - padding: 5px 0; - text-decoration: none; -} + .chapter li .active { + color: #008cff; + } -.chapter li .active { - color: #008cff; -} + .chapter li a:hover { + /* Animate color change */ + color: #008cff; + text-decoration: none; + } -.chapter li a:hover { - /* Animate color change */ - color: #008cff; - text-decoration: none; -} + .menu-bar { + position: relative; + height: 50px; + color: #CCC; + } -.menu-bar { - position: relative; - height: 50px; - color: #CCC; -} + .menu-bar i { + position: relative; + z-index: 10; + line-height: 50px; + -webkit-transition: color 0.5s; /* Safari */ + -o-transition: color 0.5s; /* Opera */ + -moz-transition: color 0.5s; /* Mozilla Firefox */ + transition: color 0.5s; + } -.menu-bar i { - position: relative; - z-index: 10; - line-height: 50px; - -webkit-transition: color 0.5s; /* Safari */ - -o-transition: color 0.5s; /* Opera */ - -moz-transition: color 0.5s; /* Mozilla Firefox */ - transition: color 0.5s; -} + .menu-bar :hover { + /* Animate color change */ + color: #333; + } -.menu-bar :hover { - /* Animate color change */ - color: #333; -} + .menu-bar i:hover { + cursor: pointer; + } -.menu-bar i:hover { - cursor: pointer; -} + .menu-title { + color: #7E7E7E; + display: inline-block; + font-weight: 200; + font-size: 20px; + line-height: 50px; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + text-align: center; + margin: 0; -.menu-title { - color: #7E7E7E; - display: inline-block; - font-weight: 200; - font-size: 20px; - line-height: 50px; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - text-align: center; - margin: 0; + opacity: 0; + -webkit-transition: opacity 0.5s ease-in-out; /* Safari */ + -o-transition: opacity 0.5s ease-in-out; /* Opera */ + -moz-transition: opacity 0.5s ease-in-out; /* Mozilla Firefox */ + transition: opacity 0.5s ease-in-out; + } - opacity: 0; - -webkit-transition: opacity 0.5s ease-in-out; /* Safari */ - -o-transition: opacity 0.5s ease-in-out; /* Opera */ - -moz-transition: opacity 0.5s ease-in-out; /* Mozilla Firefox */ - transition: opacity 0.5s ease-in-out; -} + .menu-bar:hover .menu-title { + color: #7E7E7E; + opacity: 1; + } -.menu-bar:hover .menu-title { - color: #7E7E7E; - opacity: 1; -} + .left { + float: left; + } -.left { - float: left; -} + .right { + float: right; + } -.right { - float: right; -} + /* Content */ -/* Content */ + .content a { + color: #4183c4; + text-decoration: none; + } -.content a { - color: #4183c4; - text-decoration: none; -} + .content a:hover { + text-decoration: underline; + } -.content a:hover { - text-decoration: underline; -} + /* Nav icons */ + .nav-chapters { + color: #CCC; + font-size: 40px; + text-align: center; + text-decoration: none; -/* Nav icons */ -.nav-chapters { - color: #CCC; - font-size: 40px; - text-align: center; - text-decoration: none; + position: absolute; + 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; - position: absolute; - 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; + -webkit-transition: color 0.5s; /* Safari */ + -o-transition: color 0.5s; /* Opera */ + -moz-transition: color 0.5s; /* Mozilla Firefox */ + transition: color 0.5s; + } - -webkit-transition: color 0.5s; /* Safari */ - -o-transition: color 0.5s; /* Opera */ - -moz-transition: color 0.5s; /* Mozilla Firefox */ - transition: color 0.5s; -} + .mobile-nav-chapters { display: none; } -.mobile-nav-chapters { display: none; } + .nav-chapters:hover { + color: #333; + text-decoration: none; + } -.nav-chapters:hover { - color: #333; - text-decoration: none; -} + .previous { + left: 0; + } -.previous { - left: 0; -} - -.next { - right: 0; + .next { + right: 0; + } } @@ -258,3 +259,30 @@ html, body { float: left; } } + +@media only print { + .sidebar, .menu-bar, .nav-chapters, .mobile-nav-chapters { + display: none; + } + + .page-wrapper { + left: 0; + } + + .content { + max-width: 100%; + } + + code { + background-color: #666666; + border-radius: 5px; + + /* Force background to be printed in Chrome */ + -webkit-print-color-adjust: exact; + } + + a, a:visited, a:active, a:hover { + color: #4183c4; + text-decoration: none; + } +}