| /* ========================================================================== |
| Author's custom styles |
| ========================================================================== */ |
| |
| body { |
| font-size: 14px; |
| } |
| |
| a { |
| color: #08c; |
| } |
| |
| a:hover { |
| color: #05c; |
| } |
| |
| img { |
| max-width: 100%; |
| } |
| |
| table { |
| margin: 15px 0; |
| padding: 0; |
| } |
| |
| table tr { |
| border-top: 1px solid #cccccc; |
| background-color: white; |
| margin: 0; |
| padding: 0; |
| } |
| |
| table tr:nth-child(2n) { |
| background-color: #F1F4F5; |
| } |
| |
| table tr th { |
| font-weight: bold; |
| border: 1px solid #cccccc; |
| text-align: left; |
| margin: 0; |
| padding: 6px 13px; |
| } |
| |
| table tr td { |
| border: 1px solid #cccccc; |
| text-align: left; |
| margin: 0; |
| padding: 6px 13px; |
| } |
| |
| .navbar { |
| background-color: #fafafa; |
| background-image: linear-gradient(to bottom, #ffffff, #e2f1f8); |
| background-repeat: repeat-x; |
| box-shadow: 0 1px 10px rgba(0,0,0,.1); |
| border-bottom-color: #d4d4d4; |
| border-bottom-style: solid; |
| border-bottom-width: 1px; |
| font-size: 15px; |
| line-height: 1; |
| margin-bottom: 15px; |
| padding: 0 1rem; |
| } |
| |
| .navbar .navbar-brand { |
| height: 50px; |
| width: 110px; |
| margin-left: 1px; |
| margin-right: 0; |
| padding: 0; |
| } |
| |
| .version { |
| line-height: 30px; |
| vertical-align: bottom; |
| font-size: 12px; |
| padding: 0; |
| margin: 0; |
| font-weight: bold; |
| color: #777; |
| } |
| |
| .navbar .container { |
| padding-left: 0; |
| padding-top: 2px; |
| } |
| |
| .navbar .navbar-nav, |
| .nav { |
| margin-left: 0; |
| } |
| |
| .navbar .navbar-nav > .nav-item { |
| line-height: 20px; |
| } |
| |
| .navbar .navbar-nav > .nav-item > .nav-link { |
| color: #555; |
| padding: 10px 15px 10px; |
| } |
| |
| .navbar .dropdown-menu { |
| font-size: 15px; |
| padding: 5px 0; |
| margin: 0; |
| border-radius: 6px; |
| box-shadow: 0 5px 10px rgba(0,0,0,0.2); |
| } |
| |
| @media (min-width:768px) { |
| .navbar .dropdown-menu::before { |
| position: absolute; |
| top: -7px; |
| left: 9px; |
| display: inline-block; |
| border-right: 7px solid transparent; |
| border-bottom: 7px solid #ccc; |
| border-left: 7px solid transparent; |
| border-bottom-color: rgba(0,0,0,0.2); |
| content: ''; |
| } |
| |
| .navbar .dropdown-menu::after { |
| position: absolute; |
| top: -6px; |
| left: 10px; |
| display: inline-block; |
| border-right: 6px solid transparent; |
| border-bottom: 6px solid #fff; |
| border-left: 6px solid transparent; |
| content: ''; |
| } |
| } |
| |
| .navbar .dropdown-menu .dropdown-item:hover, |
| .navbar .dropdown-menu .dropdown-item:focus, |
| .navbar .dropdown-submenu:hover .dropdown-item { |
| color: #fff; |
| text-decoration: none; |
| background-color: #0088cc; |
| background-image: linear-gradient(to bottom,#0088cc,#0087b3); |
| background-repeat: repeat-x; |
| } |
| |
| .navbar .divider-vertical { |
| border-right-color: lightgray; |
| } |
| |
| .navbar-text .version-text { |
| color: #555555; |
| padding: 5px; |
| margin-left: 10px; |
| } |
| |
| body .container-wrapper { |
| background-color: #FFF; |
| color: #1D1F22; |
| max-width: 1024px; |
| margin-top: 10px; |
| margin-left: auto; |
| margin-right: auto; |
| border-radius: 15px; |
| position: relative; |
| min-height: 100vh; |
| } |
| |
| .title { |
| font-size: 32px; |
| } |
| |
| h1, h2, h3, h4, h5, h6 { |
| font-weight: bold; |
| } |
| |
| h1 { |
| font-size: 28px; |
| margin-top: 12px; |
| } |
| |
| h2 { |
| font-size: 24px; |
| margin-top: 12px; |
| } |
| |
| h3 { |
| font-size: 21px; |
| margin-top: 10px; |
| } |
| |
| h4 { |
| font-size: 18px; |
| line-height: 20px; |
| } |
| |
| pre { |
| background-color: #f5f5f5; |
| border: 1px solid rgba(0,0,0,0.15); |
| border-radius: 4px; |
| font-family: "Menlo", "Lucida Console", monospace; |
| padding: 9.5px; |
| } |
| |
| ul, ol { |
| padding: 0; |
| margin: 0 0 10px 25px; |
| } |
| |
| code { |
| font-family: "Menlo", "Lucida Console", monospace; |
| background: white; |
| border: none; |
| padding: 0; |
| color: #444444; |
| } |
| |
| pre code { |
| background: transparent; |
| } |
| |
| dt code { |
| white-space: nowrap; |
| max-width: 100%; |
| border: solid 1px #e1e4e5; |
| font-size: .8rem; |
| padding: 0 5px; |
| font-family: "Menlo", "Lucida Console", monospace; |
| overflow-x: auto; |
| } |
| |
| dd { |
| margin: 0 1.5em 1.5em; |
| } |
| |
| div .highlight pre { |
| font-size: 12px; |
| } |
| |
| a code { |
| color: #0088cc; |
| } |
| |
| a:hover code { |
| color: #005580; |
| text-decoration: underline; |
| } |
| |
| .container { |
| max-width: 914px; |
| } |
| |
| .content { |
| z-index: 1; |
| position: relative; |
| background-color: #FFF; |
| max-width: 914px; |
| line-height: 1.6; /* Inspired by GitHub's wiki style */ |
| padding-left: 15px; |
| } |
| |
| .content-with-sidebar { |
| z-index: 1; |
| position: relative; |
| background-color: #FFF; |
| max-width: 914px; |
| line-height: 1.6; /* Inspired by GitHub's wiki style */ |
| padding-left: 30px; |
| min-height: 100vh; |
| } |
| |
| .dropdown-menu { |
| /* Remove the default 2px top margin which causes a small |
| gap between the hover trigger area and the popup menu */ |
| margin-top: 0; |
| /* Avoid too much whitespace at the right for shorter menu items */ |
| min-width: 50px; |
| } |
| |
| /** |
| * Made the navigation bar buttons not grey out when clicked. |
| * Essentially making nav bar buttons not react to clicks, only hover events. |
| */ |
| .navbar .navbar-nav .nav-item.dropdown.open > .dropdown-toggle { |
| background-color: transparent; |
| } |
| |
| /** |
| * Made the active tab caption blue. Otherwise the active tab is black, and inactive tab is blue. |
| * That looks weird. Changed the colors to active - blue, inactive - black, and |
| * no color change on hover. |
| */ |
| .nav-tabs .nav-link.active, .nav-tabs .nav-link.active:hover { |
| color: #08c; |
| } |
| |
| .nav-tabs .nav-link, .nav-tabs .nav-link:hover { |
| color: #333; |
| } |
| |
| .nav-tabs .nav-link:not(.active):focus, .nav-tabs .nav-link:not(.active):hover { |
| background-color: #e9ecef; |
| } |
| |
| /** |
| * MathJax (embedded latex formulas) |
| */ |
| .MathJax .mo { color: inherit } |
| .MathJax .mi { color: inherit } |
| .MathJax .mf { color: inherit } |
| .MathJax .mh { color: inherit } |
| |
| /** |
| * AnchorJS (anchor links when hovering over headers) |
| */ |
| a.anchorjs-link:hover { text-decoration: none; } |
| |
| |
| /** |
| * The left navigation bar. |
| */ |
| .left-menu-wrapper { |
| margin-left: 0px; |
| margin-right: 0px; |
| background-color: #F0F8FC; |
| border-top-width: 0px; |
| border-left-width: 0px; |
| border-bottom-width: 0px; |
| margin-top: 0px; |
| width: 220px; |
| height: 80%; |
| float: left; |
| position: fixed; |
| overflow-y: scroll; |
| } |
| |
| .left-menu h3 { |
| margin-left: 10px; |
| line-height: 30px; |
| } |
| |
| /** |
| * The collapsing button for the navigation bar. |
| */ |
| .nav-trigger { |
| position: fixed; |
| clip: rect(0, 0, 0, 0); |
| } |
| |
| .nav-trigger + label:after { |
| content: '»'; |
| } |
| |
| label { |
| z-index: 10; |
| } |
| |
| label[for="nav-trigger"] { |
| position: fixed; |
| margin-left: 0px; |
| padding-top: 100px; |
| padding-left: 5px; |
| width: 10px; |
| height: 80%; |
| cursor: pointer; |
| background-size: contain; |
| background-color: #D4F0FF; |
| box-sizing: content-box; |
| } |
| |
| label[for="nav-trigger"]:hover { |
| background-color: #BEE9FF; |
| } |
| |
| .nav-trigger:checked + label { |
| margin-left: 200px; |
| } |
| |
| .nav-trigger:checked + label:after { |
| content: '«'; |
| } |
| |
| .nav-trigger:checked ~ div.content-with-sidebar { |
| margin-left: 200px; |
| } |
| |
| .nav-trigger + label, div.content-with-sidebar { |
| transition: left 0.4s; |
| } |
| |
| /** |
| * Rules to collapse the menu automatically when the screen becomes too thin. |
| */ |
| |
| @media all and (max-width: 780px) { |
| |
| div.content-with-sidebar { |
| margin-left: 200px; |
| } |
| .nav-trigger + label:after { |
| content: '«'; |
| } |
| label[for="nav-trigger"] { |
| margin-left: 200px; |
| } |
| |
| .nav-trigger:checked + label { |
| margin-left: 0px; |
| } |
| .nav-trigger:checked + label:after { |
| content: '»'; |
| } |
| .nav-trigger:checked ~ div.content-with-sidebar { |
| margin-left: 0px; |
| } |
| |
| div.container-index { |
| margin-left: -215px; |
| } |
| |
| } |