main.less 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507
  1. /* ==========================================================================
  2. Author's custom styles
  3. ========================================================================== */
  4. @import "variables.less";
  5. @red: crimson;
  6. @lightblue: #118;
  7. @lightred: #e11;
  8. @darkblue: #292E33;
  9. @borderGray: #888;
  10. .red {
  11. background-color: red;
  12. }
  13. .blue {
  14. background-color: blue;
  15. }
  16. .orange {
  17. background-color: orange;
  18. }
  19. .gray {
  20. background-color: grey;
  21. }
  22. body {
  23. padding-top: 58px;
  24. font-family: Arial, Helvetica, sans-serif;
  25. }
  26. h1, h2, h3, h4 {
  27. font-family: Arial, Helvetica, sans-serif;
  28. // font-weight: bold;
  29. font-weight: 900;
  30. }
  31. /* ===================
  32. Top navigation
  33. ===================== */
  34. .navbar {
  35. z-index: 999;
  36. .nav {
  37. // float: right;
  38. li a{
  39. padding: 22px 15px 22px;
  40. }
  41. }
  42. background-color: white;
  43. }
  44. .navbar-dotcloud .container {
  45. border-bottom: 2px @black solid;
  46. }
  47. .inline-icon {
  48. margin-bottom: 6px;
  49. }
  50. /*
  51. * Responsive YouTube, Vimeo, Embed, and HTML5 Videos with CSS
  52. * http://www.jonsuh.com
  53. *
  54. * Copyright (c) 2012 Jonathan Suh
  55. * Free to use under the MIT license.
  56. * http://www.opensource.org/licenses/mit-license.php
  57. */
  58. .js-video {
  59. height: 0;
  60. padding-top: 25px;
  61. padding-bottom: 67.5%;
  62. margin-bottom: 10px;
  63. position: relative;
  64. overflow: hidden;
  65. }
  66. .js-video.vimeo {
  67. padding-top: 0;
  68. }
  69. .js-video.widescreen {
  70. padding-bottom: 57.25%;
  71. }
  72. .js-video embed, .js-video iframe, .js-video object, .js-video video {
  73. top: 0;
  74. left: 0;
  75. width: 100%;
  76. height: 100%;
  77. position: absolute;
  78. }
  79. /* Responsive */
  80. @media (max-width: 767px) {
  81. .js-video {
  82. padding-top: 0;
  83. }
  84. }
  85. /* button style from http://charliepark.org/bootstrap_buttons/ */
  86. .btn-custom {
  87. background-color: hsl(0, 0%, 16%) !important;
  88. background-repeat: repeat-x;
  89. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#515151", endColorstr="#282828");
  90. background-image: -khtml-gradient(linear, left top, left bottom, from(#515151), to(#282828));
  91. background-image: -moz-linear-gradient(top, #515151, #282828);
  92. background-image: -ms-linear-gradient(top, #515151, #282828);
  93. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #515151), color-stop(100%, #282828));
  94. background-image: -webkit-linear-gradient(top, #515151, #282828);
  95. background-image: -o-linear-gradient(top, #515151, #282828);
  96. background-image: linear-gradient(#515151, #282828);
  97. border-color: #282828 #282828 hsl(0, 0%, 12%);
  98. color: #fff !important;
  99. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.26);
  100. -webkit-font-smoothing: antialiased;
  101. }
  102. /* ===================
  103. Page title bar
  104. ===================== */
  105. h1.pageheader {
  106. color: @white;
  107. font-size: 20px;
  108. font-family: "Arial Black", Tahoma, sans-serif;
  109. margin: 8px;
  110. margin-left: 22px;
  111. }
  112. /* ===================
  113. Hero unit
  114. ===================== */
  115. section.header {
  116. margin-top:0;
  117. }
  118. .hero-unit {
  119. background-color: @darkblue;
  120. h5 {
  121. color: @white;
  122. }
  123. .subtitle {
  124. }
  125. }
  126. /* ===================
  127. Main content layout
  128. ===================== */
  129. .contentblock {
  130. margin-top: 20px;
  131. border-width: 3px;
  132. // border-color: #E00;
  133. // border-style:solid;
  134. // border-color: @borderGray;
  135. // box-sizing: border-box;
  136. background-color: @grayLighter;
  137. box-sizing: content-box;
  138. padding: 20px;
  139. }
  140. .section img {
  141. margin: 15px 15px 15px 0;
  142. border: 2px solid gray;
  143. }
  144. .admonition {
  145. padding: 10px;
  146. border: 1px solid grey;
  147. margin-bottom: 10px;
  148. margin-top: 10px;
  149. -webkit-border-radius: 4px;
  150. -moz-border-radius: 4px;
  151. border-radius: 4px;
  152. }
  153. .admonition .admonition-title {
  154. font-weight: bold;
  155. }
  156. .admonition.note {
  157. background-color: rgb(241, 235, 186);
  158. }
  159. .admonition.warning {
  160. background-color: rgb(238, 217, 175);
  161. }
  162. .admonition.danger {
  163. background-color: rgb(233, 188, 171);
  164. }
  165. /* ===================
  166. left navigation
  167. ===================== */
  168. .dotcloudsidebar {
  169. // background-color: #ee3;
  170. // border: 1px red dotted;
  171. float: left;
  172. height: 100%;
  173. top: 0px;
  174. bottom: 0px;
  175. position: relative;
  176. // margin: 0px;
  177. min-height: 100%;
  178. margin-top: 78px;
  179. margin-bottom: 22px;
  180. }
  181. .sidebar {
  182. // font-family: "Maven Pro";
  183. font-weight: normal;
  184. // margin-top: 38px;
  185. float: left;
  186. // width: 220px;
  187. /* min-height: 475px;*/
  188. // margin-bottom: 28px;
  189. // padding-bottom: 120px;
  190. background: #ececec;
  191. /* border-left: 1px solid #bbbbbb;*/
  192. /* border-right: 1px solid #cccccc;*/
  193. position: relative;
  194. ul {
  195. padding: 0px;
  196. li {
  197. font-size: 14px;
  198. // list-style: none;
  199. list-style-type: none;
  200. list-style-position: outside;
  201. list-style-image: none;
  202. margin-left: -25px;
  203. padding: 0px;
  204. a {
  205. display: block;
  206. color: #443331;
  207. outline: 1px solid #dddddd;
  208. padding: 12px 12px 10px 12px;
  209. margin-top: 1px;
  210. background-color: #d2d2d2;
  211. }
  212. .toctree-l1, .toctree-l2 {
  213. }
  214. .toctree-l1 {
  215. font-size: larger;
  216. a {
  217. background-color: rgb(223, 223, 223);
  218. }
  219. .current {
  220. font-weight: bold;
  221. }
  222. // margin-left: -25px;
  223. }
  224. .toctree-l2 {
  225. a {
  226. padding-left: 18px;
  227. background-color: rgb(255, 255, 255);
  228. }
  229. .current {
  230. font-weight: bold;
  231. }
  232. }
  233. .toctree-l3 {
  234. font-size: smaller;
  235. a {
  236. padding-left: 36px;
  237. background-color: rgb(255, 255, 255);
  238. }
  239. .current {
  240. font-weight: bold;
  241. }
  242. }
  243. }
  244. }
  245. }
  246. .brand img {
  247. height: 38px;
  248. margin-left: -6px;
  249. }
  250. .border-box {
  251. box-sizing: border-box;
  252. padding: 20px;
  253. background-color: @lightblue;
  254. color: white;
  255. }
  256. .titlebar {
  257. background-color: @black;
  258. margin-top: 0px;
  259. margin-bottom: 20px;
  260. min-height: 40px;
  261. color: white;
  262. // box-sizing: border-box;
  263. padding-top: 8px;
  264. padding-bottom: 8px;
  265. }
  266. .footer {
  267. border-top: 2px solid black;
  268. // background-color: #d2d2d2;
  269. margin-top: 15px;
  270. margin-bottom: 20px;
  271. min-height: 40px;
  272. padding-left: 8px;
  273. padding-top: 8px;
  274. padding-bottom: 8px;
  275. }
  276. /* This is the default */
  277. .span6.with-padding {
  278. background-color: @lightblue;
  279. height: 200px;
  280. color: white;
  281. padding: 10px;
  282. }
  283. #global {
  284. min-height: 500px;
  285. }
  286. /* =======================
  287. Row size
  288. ======================= */
  289. .row1 {
  290. background-color: @grayLight;
  291. height: 100%;
  292. position: relative;
  293. }
  294. /* =======================
  295. Social footer
  296. ======================= */
  297. .social .twitter, .social .github, .social .googleplus {
  298. background: url("../img/footer-links.png") no-repeat transparent;
  299. display: inline-block;
  300. height: 35px;
  301. overflow: hidden;
  302. text-indent: 9999px;
  303. width: 35px;
  304. margin-right: 10px;
  305. }
  306. .social .twitter {
  307. background-position: 0px 2px;
  308. }
  309. .social .github {
  310. background-position: -59px 2px;
  311. }
  312. #fork-us {
  313. /*font-family: 'Maven Pro';*/
  314. /*font-weight: bold;*/
  315. font-size: 12px;
  316. /*text-transform: uppercase;*/
  317. display: block;
  318. padding: 0px 1em;
  319. height: 28px;
  320. line-height: 28px;
  321. background-color: #43484c;
  322. filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFF6E56', endColorstr='#FFED4F35');
  323. background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #747474), color-stop(100%, #43484c));
  324. background-image: -webkit-linear-gradient(top, #747474 0%, #43484c 100%);
  325. background-image: -moz-linear-gradient(top, #747474 0%, #43484c 100%);
  326. background-image: -o-linear-gradient(top, #747474 0%, #43484c 100%);
  327. background-image: linear-gradient(top, #747474 0%, #43484c 100%);
  328. border: 1px solid #43484c;
  329. -webkit-border-radius: 4px;
  330. -moz-border-radius: 4px;
  331. -ms-border-radius: 4px;
  332. -o-border-radius: 4px;
  333. border-radius: 4px;
  334. -webkit-box-shadow: inset rgba(255, 255, 255, 0.17) 0 1px 1px;
  335. -moz-box-shadow: inset rgba(255, 255, 255, 0.17) 0 1px 1px;
  336. box-shadow: inset rgba(255, 255, 255, 0.17) 0 1px 1px;
  337. margin: 8px;
  338. a {
  339. color: #faf2ee;
  340. text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 0px;
  341. }
  342. }
  343. /* =======================
  344. Media size overrides
  345. ======================= */
  346. /* Large desktop */
  347. @media (min-width: 1200px) {
  348. .span6.with-padding {
  349. background-color: @red;
  350. width: (@gridColumnWidth1200 * 6) + (@gridGutterWidth1200 * 5) - @gridGutterWidth1200;
  351. padding: @gridGutterWidth1200/2;
  352. }
  353. }
  354. /* Normal desktop */
  355. @media (min-width: 980px) and (max-width: 1199px) {
  356. .span6.with-padding {
  357. background-color: @lightred;
  358. width: (@gridColumnWidth * 6) + (@gridGutterWidth * 5) - @gridGutterWidth;
  359. padding: @gridGutterWidth/2;
  360. }
  361. }
  362. /* Portrait tablet to landscape and desktop */
  363. @media (min-width: 768px) and (max-width: 979px) {
  364. body {
  365. padding-top: 0px;
  366. }
  367. .span6.with-padding {
  368. background-color: @darkblue;
  369. width: (@gridColumnWidth768 * 6) + (@gridGutterWidth768 * 5) - @gridGutterWidth768;
  370. padding: @gridGutterWidth768/2;
  371. }
  372. }
  373. /* Landscape phone to portrait tablet */
  374. @media (max-width: 767px) {
  375. body {
  376. padding-top: 0px;
  377. }
  378. #global {
  379. /* TODO: Fix this to be relative to the navigation size */
  380. // padding-top: 600px;
  381. }
  382. #fork-us {
  383. display: none;
  384. }
  385. }
  386. /* Landscape phones and down */
  387. @media (max-width: 480px) {
  388. #nav-gettingstarted {
  389. display: none;
  390. }
  391. }
  392. /* Misc fixes */
  393. table th {
  394. text-align: left;
  395. }
  396. h1:hover > a.headerlink,
  397. h2:hover > a.headerlink,
  398. h3:hover > a.headerlink,
  399. h4:hover > a.headerlink,
  400. h5:hover > a.headerlink,
  401. h6:hover > a.headerlink,
  402. dt:hover > a.headerlink {
  403. visibility: visible;
  404. }
  405. .headerlink {
  406. font-size: smaller;
  407. color: #666;
  408. font-weight: bold;
  409. float: right;
  410. visibility: hidden;
  411. }