| /* Add additional stylesheets below |
| |
| /* Body and structure |
| -------------------------------------------------- */ |
| |
| body { |
| position: relative; |
| padding-top: 40px; |
| } |
| |
| /* Code in headings */ |
| h3 code { |
| font-size: 14px; |
| font-weight: normal; |
| } |
| |
| |
| |
| /* Tweak navbar brand link to be super sleek |
| -------------------------------------------------- */ |
| |
| body > .navbar { |
| font-size: 13px; |
| } |
| |
| /* Change the docs' brand */ |
| body > .navbar .brand { |
| padding-right: 0; |
| padding-left: 0; |
| margin-left: 20px; |
| float: right; |
| font-weight: bold; |
| color: #000; |
| text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125); |
| -webkit-transition: all .2s linear; |
| -moz-transition: all .2s linear; |
| transition: all .2s linear; |
| } |
| body > .navbar .brand:hover { |
| text-decoration: none; |
| text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.4); |
| } |
| |
| |
| /* Jumbotrons |
| -------------------------------------------------- */ |
| |
| /* Base class |
| ------------------------- */ |
| .jumbotron { |
| position: relative; |
| padding: 40px 0; |
| color: #fff; |
| text-align: center; |
| text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075); |
| background: #020031; /* Old browsers */ |
| background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%); /* FF3.6+ */ |
| background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */ |
| background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */ |
| background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Opera 11.10+ */ |
| background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* IE10+ */ |
| background: linear-gradient(45deg, #020031 0%,#6d3353 100%); /* W3C */ |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ |
| -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2); |
| -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2); |
| box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2); |
| } |
| .jumbotron h1 { |
| font-size: 80px; |
| font-weight: bold; |
| letter-spacing: -1px; |
| line-height: 1; |
| } |
| .jumbotron p { |
| font-size: 24px; |
| font-weight: 300; |
| line-height: 1.25; |
| margin-bottom: 30px; |
| } |
| |
| /* Link styles (used on .masthead-links as well) */ |
| .jumbotron a { |
| color: #fff; |
| color: rgba(255,255,255,.5); |
| -webkit-transition: all .2s ease-in-out; |
| -moz-transition: all .2s ease-in-out; |
| transition: all .2s ease-in-out; |
| } |
| .jumbotron a:hover { |
| color: #fff; |
| text-shadow: 0 0 10px rgba(255,255,255,.25); |
| } |
| |
| /* Download button */ |
| .masthead .btn { |
| padding: 19px 24px; |
| font-size: 24px; |
| font-weight: 200; |
| color: #fff; /* redeclare to override the `.jumbotron a` */ |
| border: 0; |
| -webkit-border-radius: 6px; |
| -moz-border-radius: 6px; |
| border-radius: 6px; |
| -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); |
| -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); |
| box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); |
| -webkit-transition: none; |
| -moz-transition: none; |
| transition: none; |
| } |
| .masthead .btn:hover { |
| -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); |
| -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); |
| box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); |
| } |
| .masthead .btn:active { |
| -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); |
| -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); |
| box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); |
| } |
| |
| |
| /* Pattern overlay |
| ------------------------- */ |
| .jumbotron .container { |
| position: relative; |
| z-index: 2; |
| } |
| .jumbotron:after { |
| content: ''; |
| display: block; |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| background: url(../img/bs-docs-masthead-pattern.png) repeat center center; |
| opacity: .4; |
| } |
| @media |
| only screen and (-webkit-min-device-pixel-ratio: 2), |
| only screen and ( min--moz-device-pixel-ratio: 2), |
| only screen and ( -o-min-device-pixel-ratio: 2/1) { |
| |
| .jumbotron:after { |
| background-size: 150px 150px; |
| } |
| |
| } |
| |
| /* Masthead (docs home) |
| ------------------------- */ |
| .masthead { |
| padding: 70px 0 80px; |
| margin-bottom: 0; |
| color: #fff; |
| } |
| .masthead h1 { |
| font-size: 120px; |
| line-height: 1; |
| letter-spacing: -2px; |
| } |
| .masthead p { |
| font-size: 40px; |
| font-weight: 200; |
| line-height: 1.25; |
| } |
| |
| /* Textual links in masthead */ |
| .masthead-links { |
| margin: 0; |
| list-style: none; |
| } |
| .masthead-links li { |
| display: inline; |
| padding: 0 10px; |
| color: rgba(255,255,255,.25); |
| } |
| |
| /* Social proof buttons from GitHub & Twitter */ |
| .bs-docs-social { |
| padding: 15px 0; |
| text-align: center; |
| background-color: #f5f5f5; |
| border-top: 1px solid #fff; |
| border-bottom: 1px solid #ddd; |
| } |
| |
| /* Quick links on Home */ |
| .bs-docs-social-buttons { |
| margin-left: 0; |
| margin-bottom: 0; |
| padding-left: 0; |
| list-style: none; |
| } |
| .bs-docs-social-buttons li { |
| display: inline-block; |
| padding: 5px 8px; |
| line-height: 1; |
| *display: inline; |
| *zoom: 1; |
| } |
| |
| /* Subhead (other pages) |
| ------------------------- */ |
| .subhead { |
| text-align: left; |
| border-bottom: 1px solid #ddd; |
| } |
| .subhead h1 { |
| font-size: 60px; |
| } |
| .subhead p { |
| margin-bottom: 20px; |
| } |
| .subhead .navbar { |
| display: none; |
| } |
| |
| |
| |
| /* Marketing section of Overview |
| -------------------------------------------------- */ |
| |
| .marketing { |
| text-align: center; |
| color: #5a5a5a; |
| } |
| .marketing h1 { |
| margin: 60px 0 10px; |
| font-size: 60px; |
| font-weight: 200; |
| line-height: 1; |
| letter-spacing: -1px; |
| } |
| .marketing h2 { |
| font-weight: 200; |
| margin-bottom: 5px; |
| } |
| .marketing p { |
| font-size: 16px; |
| line-height: 1.5; |
| } |
| .marketing .marketing-byline { |
| margin-bottom: 40px; |
| font-size: 20px; |
| font-weight: 300; |
| line-height: 1.25; |
| color: #999; |
| } |
| .marketing-img { |
| display: block; |
| margin: 0 auto 30px; |
| max-height: 145px; |
| } |
| |
| |
| |
| /* Footer |
| -------------------------------------------------- */ |
| |
| .footer { |
| text-align: center; |
| padding: 30px 0; |
| margin-top: 70px; |
| border-top: 1px solid #e5e5e5; |
| background-color: #f5f5f5; |
| } |
| .footer p { |
| margin-bottom: 0; |
| color: #777; |
| } |
| .footer-links { |
| margin: 10px 0; |
| } |
| .footer-links li { |
| display: inline; |
| padding: 0 2px; |
| } |
| .footer-links li:first-child { |
| padding-left: 0; |
| } |
| |
| |
| |
| /* Special grid styles |
| -------------------------------------------------- */ |
| |
| .show-grid { |
| margin-top: 10px; |
| margin-bottom: 20px; |
| } |
| .show-grid [class*="span"] { |
| background-color: #eee; |
| text-align: center; |
| -webkit-border-radius: 3px; |
| -moz-border-radius: 3px; |
| border-radius: 3px; |
| min-height: 40px; |
| line-height: 40px; |
| } |
| .show-grid:hover [class*="span"] { |
| background: #ddd; |
| } |
| .show-grid .show-grid { |
| margin-top: 0; |
| margin-bottom: 0; |
| } |
| .show-grid .show-grid [class*="span"] { |
| margin-top: 5px; |
| } |
| .show-grid [class*="span"] [class*="span"] { |
| background-color: #ccc; |
| } |
| .show-grid [class*="span"] [class*="span"] [class*="span"] { |
| background-color: #999; |
| } |
| |
| |
| |
| /* Mini layout previews |
| -------------------------------------------------- */ |
| .mini-layout { |
| border: 1px solid #ddd; |
| -webkit-border-radius: 6px; |
| -moz-border-radius: 6px; |
| border-radius: 6px; |
| -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.075); |
| -moz-box-shadow: 0 1px 2px rgba(0,0,0,.075); |
| box-shadow: 0 1px 2px rgba(0,0,0,.075); |
| } |
| .mini-layout, |
| .mini-layout .mini-layout-body, |
| .mini-layout.fluid .mini-layout-sidebar { |
| height: 300px; |
| } |
| .mini-layout { |
| margin-bottom: 20px; |
| padding: 9px; |
| } |
| .mini-layout div { |
| -webkit-border-radius: 3px; |
| -moz-border-radius: 3px; |
| border-radius: 3px; |
| } |
| .mini-layout .mini-layout-body { |
| background-color: #dceaf4; |
| margin: 0 auto; |
| width: 70%; |
| } |
| .mini-layout.fluid .mini-layout-sidebar, |
| .mini-layout.fluid .mini-layout-header, |
| .mini-layout.fluid .mini-layout-body { |
| float: left; |
| } |
| .mini-layout.fluid .mini-layout-sidebar { |
| background-color: #bbd8e9; |
| width: 20%; |
| } |
| .mini-layout.fluid .mini-layout-body { |
| width: 77.5%; |
| margin-left: 2.5%; |
| } |
| |
| |
| |
| /* Download page |
| -------------------------------------------------- */ |
| |
| .download .page-header { |
| margin-top: 36px; |
| } |
| .page-header .toggle-all { |
| margin-top: 5px; |
| } |
| |
| /* Space out h3s when following a section */ |
| .download h3 { |
| margin-bottom: 5px; |
| } |
| .download-builder input + h3, |
| .download-builder .checkbox + h3 { |
| margin-top: 9px; |
| } |
| |
| /* Fields for variables */ |
| .download-builder input[type=text] { |
| margin-bottom: 9px; |
| font-family: Menlo, Monaco, "Courier New", monospace; |
| font-size: 12px; |
| color: #d14; |
| } |
| .download-builder input[type=text]:focus { |
| background-color: #fff; |
| } |
| |
| /* Custom, larger checkbox labels */ |
| .download .checkbox { |
| padding: 6px 10px 6px 25px; |
| font-size: 13px; |
| line-height: 18px; |
| color: #555; |
| background-color: #f9f9f9; |
| -webkit-border-radius: 3px; |
| -moz-border-radius: 3px; |
| border-radius: 3px; |
| cursor: pointer; |
| } |
| .download .checkbox:hover { |
| color: #333; |
| background-color: #f5f5f5; |
| } |
| .download .checkbox small { |
| font-size: 12px; |
| color: #777; |
| } |
| |
| /* Variables section */ |
| #variables label { |
| margin-bottom: 0; |
| } |
| |
| /* Giant download button */ |
| .download-btn { |
| margin: 36px 0 108px; |
| } |
| #download p, |
| #download h4 { |
| max-width: 50%; |
| margin: 0 auto; |
| color: #999; |
| text-align: center; |
| } |
| #download h4 { |
| margin-bottom: 0; |
| } |
| #download p { |
| margin-bottom: 18px; |
| } |
| .download-btn .btn { |
| display: block; |
| width: auto; |
| padding: 19px 24px; |
| margin-bottom: 27px; |
| font-size: 30px; |
| line-height: 1; |
| text-align: center; |
| -webkit-border-radius: 6px; |
| -moz-border-radius: 6px; |
| border-radius: 6px; |
| } |
| |
| |
| |
| /* Misc |
| -------------------------------------------------- */ |
| |
| /* Make tables spaced out a bit more */ |
| h2 + table, |
| h3 + table, |
| h4 + table, |
| h2 + .row { |
| margin-top: 5px; |
| } |
| |
| /* Example sites showcase */ |
| .example-sites { |
| xmargin-left: 20px; |
| } |
| .example-sites img { |
| max-width: 100%; |
| margin: 0 auto; |
| } |
| |
| .scrollspy-example { |
| height: 200px; |
| overflow: auto; |
| position: relative; |
| } |
| |
| |
| /* Fake the :focus state to demo it */ |
| .focused { |
| border-color: rgba(82,168,236,.8); |
| -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); |
| -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); |
| box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); |
| outline: 0; |
| } |
| |
| /* For input sizes, make them display block */ |
| .docs-input-sizes select, |
| .docs-input-sizes input[type=text] { |
| display: block; |
| margin-bottom: 9px; |
| } |
| |
| /* Icons |
| ------------------------- */ |
| .the-icons { |
| margin-left: 0; |
| list-style: none; |
| } |
| .the-icons li { |
| float: left; |
| width: 25%; |
| line-height: 25px; |
| } |
| .the-icons i:hover { |
| background-color: rgba(255,0,0,.25); |
| } |
