| --- |
| --- |
| |
| @import "mixins"; |
| @import "normalize"; |
| @import "gridism"; |
| @import "pygments"; |
| @import "font-awesome"; |
| |
| /* Base */ |
| |
| * { |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font: 300 21px Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif; |
| color: #ddd; |
| background-color: #333; |
| border-top: 5px solid {{ site.highlight_color }}; |
| @include box-shadow(inset 0 3px 30px rgba(0,0,0,.3)); |
| text-shadow: 0 1px 3px rgba(0,0,0,.5); |
| -webkit-font-feature-settings: "kern" 1; |
| -moz-font-feature-settings: "kern" 1; |
| -o-font-feature-settings: "kern" 1; |
| font-feature-settings: "kern" 1; |
| font-kerning: normal; |
| } |
| |
| .clear { |
| display: block; |
| } |
| |
| .clear:after { |
| content: " "; |
| display: block; |
| height: 0; |
| clear: both; |
| visibility: hidden; |
| } |
| |
| .logo { |
| padding-top: 8px; |
| } |
| |
| .grid .titlehead { |
| background: #444; |
| padding: 40px 20px 50px; |
| text-align: center; |
| text-transform: uppercase; |
| font-size: 50px; |
| } |
| |
| /* Sections */ |
| |
| header, |
| section, |
| footer { |
| float: left; |
| width: 100%; |
| clear: both; |
| } |
| |
| /* Header */ |
| |
| header { |
| |
| h1, |
| nav { display: inline-block; } |
| |
| } |
| |
| nav { |
| |
| ul { |
| padding: 0; |
| margin: 0; |
| } |
| |
| li { display: inline-block; } |
| } |
| |
| .main-nav { |
| margin-top: 52px; |
| |
| li { |
| margin-right: 10px; |
| |
| a { |
| @include border-radius(10px); |
| font-weight: 900; |
| font-size: 14px; |
| padding: 0.5em 1em; |
| text-shadow: none; |
| text-transform: uppercase; |
| @include transition(all .25s); |
| |
| &:hover { |
| background-color: #252525; |
| // @include box-shadow(inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1)); |
| // text-shadow: 0 1px 3px rgba(0,0,0,.5); |
| } |
| } |
| |
| &.current { |
| |
| a { |
| background-color: {{ site.highlight_color }}; |
| color: #222; |
| // @include box-shadow(inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5)); |
| // text-shadow: 0 1px 0 rgba(255,255,255,.3); |
| } |
| } |
| } |
| } |
| |
| .mobile-nav { |
| |
| ul { |
| overflow: hidden; |
| width: 100%; |
| display: table; |
| } |
| |
| a { |
| float: left; |
| width: 100%; |
| background-color: #333; |
| color: {{ site.highlight_color }}; |
| text-align: center; |
| text-transform: uppercase; |
| font-size: 14px; |
| font-weight: 900; |
| padding: 5px; |
| @include border-radius(5px); |
| } |
| |
| li { |
| display: table-cell; |
| width: 20%; |
| padding: 8px 2px; |
| } |
| |
| .current { |
| |
| a { |
| background-color: {{ site.highlight_color }}; |
| color: #222; |
| @include box-shadow(inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5)); |
| text-shadow: 0 1px 0 rgba(255,255,255,.3); |
| } |
| } |
| } |
| |
| /* |
| * This code is courtesy Ben Balter, modified by Parker Moore. |
| * http://ben.balter.com/2014/03/13/pages-anchor-links/ |
| */ |
| .header-link { |
| position: relative; |
| left: 0.5em; |
| opacity: 0; |
| font-size: 0.8em; |
| @include transition(opacity 0.2s ease-in-out 0.1s); |
| } |
| h2:hover .header-link, |
| h3:hover .header-link, |
| h4:hover .header-link, |
| h5:hover .header-link, |
| h6:hover .header-link { |
| opacity: 1; |
| } |
| |
| @media (max-width: 768px) { |
| .main-nav ul { |
| text-align: right; |
| } |
| } |
| @media (max-width: 830px) { |
| .main-nav { |
| .show-on-mobiles { display: inline; } |
| .hide-on-mobiles { display: none; } |
| } |
| } |
| |
| /* Footer */ |
| |
| footer { |
| background-color: #212121; |
| font-size: 16px; |
| padding-bottom: 5px; |
| color: #c0c0c0; |
| margin-top: 40px; |
| |
| a { |
| color: #fff; |
| |
| &:hover { |
| |
| img { opacity: 1; } |
| } |
| } |
| |
| p { |
| max-width: 800px; |
| margin-left: auto; |
| margin-right: auto; |
| } |
| |
| .align-right { |
| |
| p { display: inline-block; } |
| } |
| |
| img { |
| display: inline-block; |
| position: relative; |
| top: 8px; |
| margin-left: 5px; |
| opacity: .8; |
| padding: 1px; |
| @include transition(opacity .2s); |
| } |
| } |
| |
| @media (max-width: 568px) { |
| footer { |
| .one-third p { margin-bottom: 0; } |
| .two-thirds p { margin-top: -20px; } |
| } |
| } |
| |
| /* Intro */ |
| |
| .intro { |
| |
| .unit { padding: 10px 0 40px; } |
| |
| p { |
| font-size: 1.75em; |
| line-height: 1em; |
| margin: 0; |
| } |
| } |
| |
| @media (min-width: 569px) { |
| .intro p { font-size: 3.2em; } |
| } |
| |
| /* Quickstart */ |
| |
| .quickstart { |
| background-color: #3F1F1F; |
| color: #fff; |
| margin: 60px 0; |
| @include box-shadow(inset 0 3px 10px rgba(0,0,0,.4)); |
| |
| .content { padding: 0; } |
| |
| h3 { |
| font-size: 24px; |
| line-height: 24px; |
| margin-top: 20px; |
| text-shadow: 0 1px 3px rgba(0,0,0,.8); |
| } |
| |
| .code { |
| font-size: 12px; |
| display: block; |
| margin: 0 0 -30px; |
| } |
| } |
| |
| @media (min-width: 768px) { |
| .quickstart { |
| |
| .code { |
| font-size: 18px; |
| margin: -30px 0; |
| float: right; |
| } |
| |
| h3 { |
| margin: 50px 0 0; |
| text-align: center; |
| } |
| } |
| } |
| |
| /* Code */ |
| |
| .quickstart { |
| |
| .code { |
| display: block; |
| padding: 0; |
| font-family: Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace; |
| line-height: 1.3em; |
| |
| .title { |
| display: block; |
| text-align: center; |
| margin: 0 20px; |
| padding: 5px 0; |
| @include border-radius(5px 5px 0 0); |
| @include box-shadow(0 3px 10px rgba(0,0,0,.5)); |
| font: 400 16px/24px 'Helvetica Neue', Helvetica, Arial, sans-serif; |
| color: #444; |
| text-shadow: 0 1px 0 rgba(255,255,255,.5); |
| background-color: #f7f7f7; |
| background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjclIiBzdG9wLWNvbG9yPSIjY2ZjZmNmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); |
| background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), color-stop(7%, #cfcfcf), to(#aaaaaa)); |
| background-image: -webkit-linear-gradient(top, #f7f7f7 0%, #cfcfcf 7%, #aaaaaa 100%); |
| background-image: -moz-linear-gradient(top, #f7f7f7 0%, #cfcfcf 7%, #aaaaaa 100%); |
| background-image: -o-linear-gradient(top, #f7f7f7 0%, #cfcfcf 7%, #aaaaaa 100%); |
| background-image: linear-gradient(top, #f7f7f7 0%,#cfcfcf 7%,#aaaaaa 100%); |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#aaaaaa',GradientType=0 ); |
| border-bottom: 1px solid #111; |
| } |
| |
| .shell { |
| padding: 20px; |
| text-shadow: none; |
| margin: 0 20px; |
| background-color: #171717; |
| @include border-radius(0 0 5px 5px); |
| @include box-shadow(0 5px 30px rgba(0,0,0,.3)); |
| } |
| |
| .line { |
| display: block; |
| margin: 0; |
| padding: 0; |
| |
| span { display: inline-block; } |
| } |
| |
| .path { |
| color: #87ceeb; |
| @include user-select(none); |
| } |
| |
| .prompt { |
| color: #cd5c5c; |
| -webkit-user-select: none; /* Chrome all / Safari all */ |
| -moz-user-select: none; /* Firefox all */ |
| -ms-user-select: none; /* IE 10+ */ |
| -o-user-select: none; |
| user-select: none; |
| } |
| |
| .command { color: #f0e68c; } |
| |
| .output { color: #888; } |
| } |
| } |
| |
| @media (min-width: 768px) { |
| .free-hosting { |
| |
| img { |
| float: left; |
| margin: -20px -30px -30px -50px; |
| width: 300px; |
| height: 251px; |
| } |
| |
| .pane-content { |
| margin-top: 35px; |
| padding-right: 30px; |
| } |
| |
| p, |
| a { font-size: 18px; } |
| |
| .pane:after { |
| content: " "; |
| float: right; |
| background: url(../img/footer-arrow.png) top left no-repeat; |
| width: 73px; |
| height: 186px; |
| position: absolute; |
| right: 0; |
| bottom: -30px; |
| } |
| } |
| } |
| |
| /* Article - Used for both docs and news */ |
| |
| |
| article { |
| background-color: #444; |
| @include border-radius(10px); |
| padding: 20px; |
| margin: 0 10px; |
| @include box-shadow(0 3px 10px rgba(0,0,0,.1)); |
| font-size: 16px; |
| } |
| |
| @media (max-width: 480px) { |
| article ul { padding-left: 20px; } |
| } |
| |
| @media (max-width: 568px) { |
| article { margin: 0; } |
| } |
| |
| @media (min-width: 768px) { |
| article { |
| padding: 40px 40px 30px; |
| font-size: 21px; |
| } |
| } |
| |
| /* Right-side nav - used by both docs and news */ |
| |
| aside { |
| padding-top: 30px; |
| |
| h4 { |
| text-transform: uppercase; |
| font-size: 14px; |
| font-weight: 700; |
| padding: 0 0 10px 30px; |
| margin-left: -30px; |
| display: inline-block; |
| border-bottom: 1px solid #199ACF; |
| } |
| |
| ul { |
| padding-left: 0; |
| |
| &:first-child { margin-top: 0; } |
| } |
| |
| li { |
| list-style-type: none; |
| |
| a { |
| font-size: 16px; |
| position: relative |
| } |
| |
| &.current a:before { |
| content: ""; |
| border-color: transparent transparent transparent #444; |
| border-style: solid; |
| border-width: 10px; |
| width: 0; |
| height: 0; |
| position: absolute; |
| top: 0; |
| left: -30px; |
| } |
| } |
| } |
| |
| /* Documentation */ |
| |
| .docs { |
| |
| article { min-height: 800px; } |
| |
| .content { padding: 0; } |
| } |
| |
| .section-nav { |
| text-align: center; |
| padding-top: 40px; |
| position: relative; |
| background: url(../img/article-footer.png) top center no-repeat; |
| margin: 40px -20px 10px; |
| |
| > div { width: 49.5%; } |
| |
| a, |
| span { |
| color: #fff; |
| font-size: 16px; |
| text-transform: uppercase; |
| font-weight: 700; |
| padding: 8px 12px 10px; |
| @include border-radius(5px); |
| /*border: 1px solid #333;*/ |
| @include box-shadow(0 1px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.5)); |
| background-color: #767676; |
| } |
| |
| a:hover { |
| color: #fff; |
| background-color: #888; |
| } |
| |
| .next, |
| .prev { position: relative; } |
| |
| .next:after, |
| .prev:before { |
| font-size: 36px; |
| color: #222; |
| font-weight: 900; |
| text-shadow: 0 1px 0 rgba(255,255,255,.4); |
| position: absolute; |
| top: -7px; |
| } |
| |
| .next:after { |
| content: '\203A'; |
| right: 10px; |
| } |
| |
| .prev:before { |
| content: '\2039'; |
| left: 10px; |
| } |
| |
| .prev, |
| .prev:hover { padding-left: 30px; } |
| |
| .next, |
| .next:hover { padding-right: 30px; } |
| |
| .disabled { |
| opacity: .5; |
| cursor: default; |
| } |
| } |
| |
| .improve { |
| padding-top: 25px; |
| font-size: 16px; |
| a { |
| color: #999; |
| } |
| } |
| |
| .docs-nav-mobile select { |
| color: #000; |
| width: 100%; |
| } |
| |
| /* News */ |
| |
| article h2:first-child { margin-top: 0; } |
| |
| .post-category, |
| .post-meta { |
| display: inline-block; |
| vertical-align: middle; |
| font-size: .8em; |
| } |
| |
| .post-category { |
| display: inline-block; |
| margin-left: -30px; |
| padding: 6px 10px 8px; |
| padding-left: 50px; |
| @include border-radius(0 5px 5px 0); |
| position: relative; |
| @include box-shadow(0 1px 5px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.3)); |
| background-color: #1B3850; |
| background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzllMjgxMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZjBkMGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); |
| background-image: -webkit-gradient(linear, left top, left bottom, from(#1B3850), to(#204c69)); |
| background-image: -webkit-linear-gradient(top, #1B3850 0%, #204c69 100%); |
| background-image: -moz-linear-gradient(top, #1B3850 0%, #204c69 100%); |
| background-image: -o-linear-gradient(top, #1B3850 0%, #204c69 100%); |
| background-image: linear-gradient(to bottom, #1B3850 0%,#204c69 100%); |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1B3850', endColorstr='#204c69',GradientType=0 ); |
| |
| &:before { |
| content: ""; |
| position: absolute; |
| top: -10px; |
| left: 0; |
| border-color: transparent #204c69 #204c69 transparent; |
| border-style: solid; |
| border-width: 5px; |
| width: 0; |
| height: 0; |
| } |
| } |
| |
| .post-content img { max-width: 100% } |
| |
| .label { |
| float: left; |
| text-transform: uppercase; |
| font-weight: 700; |
| text-shadow: 0 -1px 0 rgba(0,0,0,.5); |
| } |
| |
| @media (max-width: 568px) { |
| .post-category { padding-left: 30px; } |
| } |
| |
| @media (min-width: 768px) { |
| .post-category { margin-left: -50px; } |
| } |
| |
| .avatar { |
| @include border-radius(3px); |
| display: inline-block; |
| vertical-align: middle; |
| } |
| |
| .post-meta { |
| padding: 5px 0; |
| color: #c0c0c0; |
| font-weight: 600; |
| text-shadow: 0 -1px 0 #000; |
| } |
| |
| .post-date, |
| .post-author { margin-left: 10px; } |
| |
| .news article + article { |
| margin-top: -10px; |
| @include border-radius(0 0 10px 10px); |
| border-top: 1px solid #555; |
| @include box-shadow(0 -1px 0 #2f2f2f); |
| } |
| |
| /* Code Highlighting */ |
| |
| |
| pre, |
| code { |
| white-space: pre; |
| display: inline-block; |
| margin: 0; |
| font: 14px/1.8em Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace; |
| padding: 0 0.5em; |
| } |
| |
| @media (min-width: 768px) { |
| pre, code { font-size: 16px; } |
| } |
| |
| .highlight, |
| p > pre, |
| p > code, |
| p > nobr > code, |
| li > code, |
| h5 > code, |
| .note > code { |
| background-color: #2b2b2b; |
| color: #fff; |
| @include border-radius(5px); |
| @include box-shadow(inset 0 1px 10px rgba(0,0,0,.3), |
| 0 1px 0 rgba(255,255,255,.1), |
| 0 -1px 0 rgba(0,0,0,.5)); |
| } |
| |
| .note code { |
| background-color: #333; |
| background-color: rgba(0,0,0,0.2); |
| margin-left: 2.5px; |
| margin-right: 2.5px; |
| font-size: 0.8em; |
| } |
| |
| .highlight { |
| margin: 1em 0; |
| padding: 10px 0; |
| width: 100%; |
| overflow: auto; |
| } |
| |
| /* HTML Elements */ |
| |
| h1, h2, h3, h4, h5, h6 { margin: 0; } |
| |
| a { |
| color: {{ site.highlight_color }}; |
| text-decoration: none; |
| @include transition(all .25s); |
| |
| &:hover { color: {{ site.highlight_color}}; } |
| } |
| |
| strong { font-weight: 700; } |
| |
| p { line-height: 1.5em; } |
| |
| .left { float: left; } |
| .right { float: right; } |
| .align-right { text-align: right; } |
| .align-left { text-align: left; } |
| .align-center { text-align: center; } |
| |
| /* Article HTML */ |
| |
| article { |
| |
| h2, h3, h4, h5, h6 { margin: 1em 0; } |
| |
| h4 { color: #fff; } |
| |
| ul li { |
| |
| p { margin: 0; } |
| |
| blockquote { margin: 10px 0; } |
| } |
| |
| ul li, |
| ol li { |
| line-height: 1.5em; |
| margin-bottom: 0.5em; |
| } |
| |
| } |
| |
| h5, h6 { |
| font-size: 1em; |
| font-style: italic; |
| } |
| |
| blockquote { |
| border-left: 2px solid #777; |
| padding-left: 20px; |
| font-style: italic; |
| font-size: 18px; |
| font-weight: 500; |
| } |
| |
| |
| /* Tables */ |
| |
| table { |
| width: 100%; |
| background-color: #555; |
| margin: .5em 0; |
| @include border-radius(5px); |
| @include box-shadow(0 1px 3px rgba(0,0,0,.3)); |
| } |
| |
| thead { |
| @include border-top-left-radius(5px); |
| @include border-top-right-radius(5px); |
| color: #fff; |
| background-color: #3a3a3a; |
| background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNhM2EzYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTFlMWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); |
| background-image: -webkit-gradient(linear, left top, left bottom, from(#3a3a3a), to(#1e1e1e)); |
| background-image: -webkit-linear-gradient(top, #3a3a3a 0%, #1e1e1e 100%); |
| background-image: -moz-linear-gradient(top, #3a3a3a 0%, #1e1e1e 100%); |
| background-image: -o-linear-gradient(top, #3a3a3a 0%, #1e1e1e 100%); |
| background-image: linear-gradient(to bottom, #3a3a3a 0%,#1e1e1e 100%); |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3a', endColorstr='#1e1e1e',GradientType=0 ); |
| |
| th { |
| position: relative; |
| @include box-shadow(inset 0 1px 0 rgba(255,255,255,.1)); |
| |
| &:first-child { |
| @include border-top-left-radius(5px); |
| } |
| |
| &:last-child { |
| @include border-top-right-radius(5px); |
| } |
| } |
| } |
| |
| td { padding: .5em .75em; } |
| |
| td p { margin: 0; } |
| |
| th { |
| text-transform: uppercase; |
| font-size: 16px; |
| padding: .5em .75em; |
| text-shadow: 0 -1px 0 rgba(0,0,0,.9); |
| color: #888; |
| } |
| |
| tbody td { |
| border-top: 1px solid #747474; |
| border-top: 1px solid rgba(0,0,0,.1); |
| @include box-shadow(inset 0 1px 0 rgba(255,255,255,.1)); |
| background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); |
| background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.1)), to(rgba(255,255,255,0))); |
| background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%); |
| background-image: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%); |
| background-image: -o-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%); |
| background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#00ffffff',GradientType=0 ); |
| |
| p { |
| font-size: 16px; |
| |
| code { font-size: 14px; } |
| } |
| } |
| |
| code.option, |
| th .option, |
| code.filter, |
| th .filter { |
| color: #50B600; |
| } |
| |
| code.flag, |
| th .flag, |
| code.output, |
| th .output { |
| color: #049DCE; |
| } |
| |
| code.option, |
| code.flag, |
| code.filter, |
| code.output { |
| margin-bottom: 2px; |
| } |
| |
| /* Note types */ |
| |
| .note { |
| margin: 30px 0; |
| margin-left: -30px; |
| padding: 20px 20px 24px; |
| padding-left: 50px; |
| @include border-radius(0 5px 5px 0); |
| position: relative; |
| @include box-shadow(0 1px 5px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.3)); |
| background-color: #7e6d42; |
| background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdlNmQ0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1YzRlMzUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); |
| background-image: -webkit-gradient(linear, left top, left bottom, from(#7e6d42), to(#5c4e35)); |
| background-image: -webkit-linear-gradient(top, #7e6d42 0%, #5c4e35 100%); |
| background-image: -moz-linear-gradient(top, #7e6d42 0%, #5c4e35 100%); |
| background-image: -o-linear-gradient(top, #7e6d42 0%, #5c4e35 100%); |
| background-image: linear-gradient(to bottom, #7e6d42 0%,#5c4e35 100%); |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e6d42', endColorstr='#5c4e35',GradientType=0 ); |
| } |
| |
| @media (max-width: 568px) { |
| .note { margin-right: -30px; } |
| } |
| |
| @media (min-width: 768px) { |
| .note { margin-left: -50px; } |
| } |
| |
| .configtable { |
| font-size: 14px; |
| } |
| |
| .note { |
| &:before { |
| content: ""; |
| position: absolute; |
| top: -10px; |
| left: 0; |
| border-color: transparent #222 #222 transparent; |
| border-style: solid; |
| border-width: 5px; |
| width: 0; |
| height: 0; |
| } |
| |
| h5, |
| p { |
| margin: 0; |
| color: #fff; |
| } |
| |
| h5 { |
| line-height: 1.5em; |
| font-weight: 900; |
| font-style: normal; |
| } |
| |
| p { |
| font-weight: 400; |
| font-size: .75em; |
| } |
| |
| &:after { |
| content: '\2605'; |
| color: {{ site.highlight_color }}; |
| position: absolute; |
| top: 14px; |
| left: 14px; |
| font-size: 28px; |
| font-weight: 700; |
| text-shadow: 0 -1px 0 rgba(0,0,0,.5); |
| } |
| } |
| |
| .info { |
| background-color: #0389aa; |
| background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAzODlhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDYxN2YiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); |
| background-image: -webkit-gradient(linear, left top, left bottom, from(#0389aa), to(#00617f)); |
| background-image: -webkit-linear-gradient(top, #0389aa 0%, #00617f 100%); |
| background-image: -moz-linear-gradient(top, #0389aa 0%, #00617f 100%); |
| background-image: -o-linear-gradient(top, #0389aa 0%, #00617f 100%); |
| background-image: linear-gradient(to bottom, #0389aa 0%,#00617f 100%); |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0389aa', endColorstr='#00617f',GradientType=0 ); |
| } |
| |
| .warning { |
| background-color: #1B3850; |
| background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzllMjgxMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZjBkMGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); |
| background-image: -webkit-gradient(linear, left top, left bottom, from(#1B3850), to(#204c69)); |
| background-image: -webkit-linear-gradient(top, #1B3850 0%, #204c69 100%); |
| background-image: -moz-linear-gradient(top, #1B3850 0%, #204c69 100%); |
| background-image: -o-linear-gradient(top, #1B3850 0%, #204c69 100%); |
| background-image: linear-gradient(to bottom, #1B3850 0%,#204c69 100%); |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1B3850', endColorstr='#204c69',GradientType=0 ); |
| } |
| |
| .unreleased { |
| background-color: #cd9239; |
| background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NkOTIzOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhMjc1MjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); |
| background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(205,146,57,1)), to(rgba(162,117,40,1))); |
| background-image: -webkit-linear-gradient(top, rgba(205,146,57,1) 0%, rgba(162,117,40,1) 100%); |
| background-image: -moz-linear-gradient(top, rgba(205,146,57,1) 0%, rgba(162,117,40,1) 100%); |
| background-image: -o-linear-gradient(top, rgba(205,146,57,1) 0%, rgba(162,117,40,1) 100%); |
| background-image: linear-gradient(to bottom, rgba(205,146,57,1) 0%,rgba(162,117,40,1) 100%); |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cd9239', endColorstr='#a27528',GradientType=0 ); |
| } |
| |
| .info:before { border-color: transparent #00617f #00617f transparent; } |
| |
| .warning:before { border-color: transparent #204c69 #204c69 transparent; } |
| |
| .unreleased:before { border-color: transparent #664719 #664719 transparent; } |
| |
| .info:after { |
| content: '\24D8'; |
| color: #fff; |
| position: absolute; |
| top: 15px; |
| left: 15px; |
| font-size: 28px; |
| font-weight: 700; |
| text-shadow: 0 -1px 0 rgba(0,0,0,.5); |
| } |
| |
| .warning:after { |
| content: '\203C'; |
| color: {{ site.highlight_color }}; |
| position: absolute; |
| top: 15px; |
| left: 15px; |
| font-size: 32px; |
| font-weight: 700; |
| text-shadow: 0 -1px 0 rgba(0,0,0,.5); |
| } |
| |
| .unreleased:after { |
| content: '\2692'; |
| color: #2b2a12; |
| position: absolute; |
| top: 8px; |
| left: 15px; |
| font-size: 38px; |
| font-weight: 700; |
| text-shadow: 0 1px 0 rgba(255,255,255,.25); |
| } |
| |
| /* Responsive tables */ |
| |
| @media (max-width: 768px) { |
| .mobile-side-scroller { |
| overflow-x: scroll; |
| margin: 0 -40px; |
| padding: 0 10px; |
| } |
| } |
| |
| |
| .show-on-mobiles { |
| display: none; |
| } |
| |
| @media screen and (max-width: 568px) { |
| .show-on-mobiles { |
| display: block !important; |
| } |
| a .show-on-mobiles { |
| display: inline !important; |
| } |
| } |
| |
| |
| /* Helper class taken from Bootstrap. |
| Hides an element to all devices except screen readers. |
| */ |
| .sr-only { |
| position: absolute; |
| width: 1px; |
| height: 1px; |
| padding: 0; |
| margin: -1px; |
| overflow: hidden; |
| clip: rect(0, 0, 0, 0); |
| border: 0; |
| } |