123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507 |
- /* ==========================================================================
- Author's custom styles
- ========================================================================== */
- @import "variables.less";
- @red: crimson;
- @lightblue: #118;
- @lightred: #e11;
- @darkblue: #292E33;
- @borderGray: #888;
- .red {
- background-color: red;
- }
- .blue {
- background-color: blue;
- }
- .orange {
- background-color: orange;
- }
- .gray {
- background-color: grey;
- }
- body {
- padding-top: 58px;
- font-family: Arial, Helvetica, sans-serif;
- }
- h1, h2, h3, h4 {
- font-family: Arial, Helvetica, sans-serif;
- // font-weight: bold;
- font-weight: 900;
- }
- /* ===================
- Top navigation
- ===================== */
- .navbar {
- z-index: 999;
- .nav {
- // float: right;
- li a{
- padding: 22px 15px 22px;
- }
- }
- background-color: white;
- }
- .navbar-dotcloud .container {
- border-bottom: 2px @black solid;
- }
- .inline-icon {
- margin-bottom: 6px;
- }
- /*
- * Responsive YouTube, Vimeo, Embed, and HTML5 Videos with CSS
- * http://www.jonsuh.com
- *
- * Copyright (c) 2012 Jonathan Suh
- * Free to use under the MIT license.
- * http://www.opensource.org/licenses/mit-license.php
- */
- .js-video {
- height: 0;
- padding-top: 25px;
- padding-bottom: 67.5%;
- margin-bottom: 10px;
- position: relative;
- overflow: hidden;
- }
- .js-video.vimeo {
- padding-top: 0;
- }
- .js-video.widescreen {
- padding-bottom: 57.25%;
- }
- .js-video embed, .js-video iframe, .js-video object, .js-video video {
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- position: absolute;
- }
- /* Responsive */
- @media (max-width: 767px) {
- .js-video {
- padding-top: 0;
- }
- }
- /* button style from http://charliepark.org/bootstrap_buttons/ */
- .btn-custom {
- background-color: hsl(0, 0%, 16%) !important;
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#515151", endColorstr="#282828");
- background-image: -khtml-gradient(linear, left top, left bottom, from(#515151), to(#282828));
- background-image: -moz-linear-gradient(top, #515151, #282828);
- background-image: -ms-linear-gradient(top, #515151, #282828);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #515151), color-stop(100%, #282828));
- background-image: -webkit-linear-gradient(top, #515151, #282828);
- background-image: -o-linear-gradient(top, #515151, #282828);
- background-image: linear-gradient(#515151, #282828);
- border-color: #282828 #282828 hsl(0, 0%, 12%);
- color: #fff !important;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.26);
- -webkit-font-smoothing: antialiased;
- }
- /* ===================
- Page title bar
- ===================== */
- h1.pageheader {
- color: @white;
- font-size: 20px;
- font-family: "Arial Black", Tahoma, sans-serif;
- margin: 8px;
- margin-left: 22px;
- }
- /* ===================
- Hero unit
- ===================== */
- section.header {
- margin-top:0;
- }
- .hero-unit {
- background-color: @darkblue;
- h5 {
- color: @white;
- }
- .subtitle {
- }
- }
- /* ===================
- Main content layout
- ===================== */
- .contentblock {
- margin-top: 20px;
- border-width: 3px;
- // border-color: #E00;
- // border-style:solid;
- // border-color: @borderGray;
- // box-sizing: border-box;
- background-color: @grayLighter;
- box-sizing: content-box;
- padding: 20px;
- }
- .section img {
- margin: 15px 15px 15px 0;
- border: 2px solid gray;
- }
- .admonition {
- padding: 10px;
- border: 1px solid grey;
- margin-bottom: 10px;
- margin-top: 10px;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- }
- .admonition .admonition-title {
- font-weight: bold;
- }
- .admonition.note {
- background-color: rgb(241, 235, 186);
- }
- .admonition.warning {
- background-color: rgb(238, 217, 175);
- }
- .admonition.danger {
- background-color: rgb(233, 188, 171);
- }
- /* ===================
- left navigation
- ===================== */
- .dotcloudsidebar {
- // background-color: #ee3;
- // border: 1px red dotted;
- float: left;
- height: 100%;
- top: 0px;
- bottom: 0px;
- position: relative;
- // margin: 0px;
- min-height: 100%;
- margin-top: 78px;
- margin-bottom: 22px;
- }
- .sidebar {
- // font-family: "Maven Pro";
- font-weight: normal;
- // margin-top: 38px;
- float: left;
- // width: 220px;
- /* min-height: 475px;*/
- // margin-bottom: 28px;
- // padding-bottom: 120px;
- background: #ececec;
- /* border-left: 1px solid #bbbbbb;*/
- /* border-right: 1px solid #cccccc;*/
- position: relative;
- ul {
- padding: 0px;
- li {
- font-size: 14px;
- // list-style: none;
- list-style-type: none;
- list-style-position: outside;
- list-style-image: none;
- margin-left: -25px;
- padding: 0px;
- a {
- display: block;
- color: #443331;
- outline: 1px solid #dddddd;
- padding: 12px 12px 10px 12px;
- margin-top: 1px;
- background-color: #d2d2d2;
- }
- .toctree-l1, .toctree-l2 {
- }
- .toctree-l1 {
- font-size: larger;
- a {
- background-color: rgb(223, 223, 223);
- }
- .current {
- font-weight: bold;
- }
- // margin-left: -25px;
- }
- .toctree-l2 {
- a {
- padding-left: 18px;
- background-color: rgb(255, 255, 255);
- }
- .current {
- font-weight: bold;
- }
- }
- .toctree-l3 {
- font-size: smaller;
- a {
- padding-left: 36px;
- background-color: rgb(255, 255, 255);
- }
- .current {
- font-weight: bold;
- }
- }
- }
- }
- }
- .brand img {
- height: 38px;
- margin-left: -6px;
- }
- .border-box {
- box-sizing: border-box;
- padding: 20px;
- background-color: @lightblue;
- color: white;
- }
- .titlebar {
- background-color: @black;
- margin-top: 0px;
- margin-bottom: 20px;
- min-height: 40px;
- color: white;
- // box-sizing: border-box;
- padding-top: 8px;
- padding-bottom: 8px;
- }
- .footer {
- border-top: 2px solid black;
- // background-color: #d2d2d2;
- margin-top: 15px;
- margin-bottom: 20px;
- min-height: 40px;
- padding-left: 8px;
- padding-top: 8px;
- padding-bottom: 8px;
- }
- /* This is the default */
- .span6.with-padding {
- background-color: @lightblue;
- height: 200px;
- color: white;
- padding: 10px;
- }
- #global {
- min-height: 500px;
- }
- /* =======================
- Row size
- ======================= */
- .row1 {
- background-color: @grayLight;
- height: 100%;
- position: relative;
- }
- /* =======================
- Social footer
- ======================= */
- .social .twitter, .social .github, .social .googleplus {
- background: url("../img/footer-links.png") no-repeat transparent;
- display: inline-block;
- height: 35px;
- overflow: hidden;
- text-indent: 9999px;
- width: 35px;
- margin-right: 10px;
- }
- .social .twitter {
- background-position: 0px 2px;
- }
- .social .github {
- background-position: -59px 2px;
- }
- #fork-us {
- /*font-family: 'Maven Pro';*/
- /*font-weight: bold;*/
- font-size: 12px;
- /*text-transform: uppercase;*/
- display: block;
- padding: 0px 1em;
- height: 28px;
- line-height: 28px;
- background-color: #43484c;
- filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFF6E56', endColorstr='#FFED4F35');
- background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #747474), color-stop(100%, #43484c));
- background-image: -webkit-linear-gradient(top, #747474 0%, #43484c 100%);
- background-image: -moz-linear-gradient(top, #747474 0%, #43484c 100%);
- background-image: -o-linear-gradient(top, #747474 0%, #43484c 100%);
- background-image: linear-gradient(top, #747474 0%, #43484c 100%);
- border: 1px solid #43484c;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- -ms-border-radius: 4px;
- -o-border-radius: 4px;
- border-radius: 4px;
- -webkit-box-shadow: inset rgba(255, 255, 255, 0.17) 0 1px 1px;
- -moz-box-shadow: inset rgba(255, 255, 255, 0.17) 0 1px 1px;
- box-shadow: inset rgba(255, 255, 255, 0.17) 0 1px 1px;
- margin: 8px;
- a {
- color: #faf2ee;
- text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 0px;
- }
- }
- /* =======================
- Media size overrides
- ======================= */
- /* Large desktop */
- @media (min-width: 1200px) {
- .span6.with-padding {
- background-color: @red;
- width: (@gridColumnWidth1200 * 6) + (@gridGutterWidth1200 * 5) - @gridGutterWidth1200;
- padding: @gridGutterWidth1200/2;
- }
- }
- /* Normal desktop */
- @media (min-width: 980px) and (max-width: 1199px) {
- .span6.with-padding {
- background-color: @lightred;
- width: (@gridColumnWidth * 6) + (@gridGutterWidth * 5) - @gridGutterWidth;
- padding: @gridGutterWidth/2;
- }
- }
- /* Portrait tablet to landscape and desktop */
- @media (min-width: 768px) and (max-width: 979px) {
- body {
- padding-top: 0px;
- }
- .span6.with-padding {
- background-color: @darkblue;
- width: (@gridColumnWidth768 * 6) + (@gridGutterWidth768 * 5) - @gridGutterWidth768;
- padding: @gridGutterWidth768/2;
- }
- }
- /* Landscape phone to portrait tablet */
- @media (max-width: 767px) {
- body {
- padding-top: 0px;
- }
- #global {
- /* TODO: Fix this to be relative to the navigation size */
- // padding-top: 600px;
- }
- #fork-us {
- display: none;
- }
- }
- /* Landscape phones and down */
- @media (max-width: 480px) {
- #nav-gettingstarted {
- display: none;
- }
- }
- /* Misc fixes */
- table th {
- text-align: left;
- }
- h1:hover > a.headerlink,
- h2:hover > a.headerlink,
- h3:hover > a.headerlink,
- h4:hover > a.headerlink,
- h5:hover > a.headerlink,
- h6:hover > a.headerlink,
- dt:hover > a.headerlink {
- visibility: visible;
- }
- .headerlink {
- font-size: smaller;
- color: #666;
- font-weight: bold;
- float: right;
- visibility: hidden;
- }
|