/documentation/css/docs.css

http://github.com/jashkenas/coffee-script · CSS · 417 lines · 409 code · 7 blank · 1 comment · 0 complexity · d7b2cd2e3df60b43d63842c39f46b522 MD5 · raw file

  1. body {
  2. font-size: 14px;
  3. line-height: 21px;
  4. color: #333;
  5. background: #f6f6f6 url(../images/background.png);
  6. font-family: "Helvetica Neue", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif !important;
  7. }
  8. .container {
  9. width: 950px;
  10. margin: 0;
  11. padding: 80px 0px 50px 50px;
  12. clear: both;
  13. }
  14. p, li {
  15. width: 625px;
  16. }
  17. a {
  18. color: #191933;
  19. }
  20. h1, h2, h3, h4, h5, h6, b.header {
  21. font-size: 18px;
  22. color: #000;
  23. margin-top: 40px;
  24. margin-bottom: 15px;
  25. text-shadow: #fff 0 1px 1px;
  26. }
  27. br.clear {
  28. height: 0;
  29. clear: both;
  30. }
  31. ul {
  32. padding-left: 20px;
  33. }
  34. b.header {
  35. display: block;
  36. }
  37. li {
  38. margin-bottom: 10px;
  39. }
  40. table {
  41. margin: 16px 0 0 13px; padding: 0;
  42. width: 625px;
  43. }
  44. tr, td {
  45. margin: 0; padding: 0;
  46. }
  47. td {
  48. padding: 9px 15px 9px 0;
  49. vertical-align: top;
  50. }
  51. table.definitions {
  52. width: auto;
  53. margin: 30px 0;
  54. border-left: 5px solid rgba(0,0,0,0.2);;
  55. }
  56. table.definitions td {
  57. text-align: center;
  58. padding: 5px 20px;
  59. }
  60. code, pre, textarea {
  61. font-family: Monaco, Consolas, "Lucida Console", monospace;
  62. font-size: 12px;
  63. line-height: 18px;
  64. color: #155;
  65. white-space: pre-wrap;
  66. word-wrap: break-word;
  67. }
  68. p > code, li > code {
  69. display: inline-block;
  70. background: #fff;
  71. border: 1px solid #dedede;
  72. padding: 0px 0.2em;
  73. }
  74. pre {
  75. border-left: 5px solid rgba(0,0,0,0.2);
  76. padding: 3px 0 3px 12px;
  77. font-size: 12px;
  78. }
  79. pre.no_bar {
  80. border-left: 0;
  81. margin-left: 0;
  82. padding-left: 0;
  83. }
  84. .timestamp {
  85. font-size: 11px;
  86. font-weight: normal;
  87. text-transform: uppercase;
  88. }
  89. div.anchor {
  90. position: relative;
  91. top: -90px;
  92. margin: 0 0 -20px;
  93. }
  94. div.code {
  95. position: relative;
  96. background: #fff;
  97. border: 1px solid #d8d8d8;
  98. -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.23);
  99. -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.23);
  100. box-shadow: 0px 0px 4px rgba(0,0,0,0.23);
  101. zoom: 1;
  102. }
  103. div.code .minibutton {
  104. text-transform: none;
  105. position: absolute;
  106. right: 8px; bottom: 8px;
  107. }
  108. div.code .load {
  109. left: 8px; right: auto;
  110. }
  111. div.code pre, div.code textarea {
  112. float: left;
  113. width: 450px;
  114. background: #fff;
  115. border: 1px dotted #d0d0d0;
  116. border-top-width: 0;
  117. border-bottom-width: 0;
  118. border-right-width: 0;
  119. margin: 0 3px 15px 3px;
  120. padding: 10px 0 0 12px;
  121. }
  122. div.code pre:first-child {
  123. border-left: 0;
  124. }
  125. #fadeout {
  126. z-index: 50;
  127. position: fixed;
  128. left: 0; top: 0; right: 0;
  129. height: 100px;
  130. background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 255)), to(rgba(255, 255, 255, 0)));
  131. background: -moz-linear-gradient(top, rgba(255, 255, 255, 255), rgba(255, 255, 255, 0));
  132. }
  133. #flybar {
  134. position: fixed;
  135. z-index: 100;
  136. height: 50px;
  137. min-width: 490px;
  138. left: 40px; right: 40px; top: 25px;
  139. background: #eee;
  140. background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#dadada));
  141. background: -moz-linear-gradient(top, #f8f8f8, #dadada);
  142. border: 1px solid #aaa;
  143. border-top: 1px solid #bbb;
  144. border-bottom: 1px solid #888;
  145. -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
  146. -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.1);
  147. -moz-box-shadow: 0 3px 5px rgba(0,0,0,0.1);
  148. box-shadow: 0 3px 5px rgba(0,0,0,0.1);
  149. }
  150. #logo {
  151. display: block;
  152. outline: none;
  153. float: left;
  154. width: 242px;
  155. margin-left: 10px;
  156. }
  157. #logo img {
  158. margin: 5px 0 0 3px;
  159. }
  160. .navigation {
  161. height: 50px;
  162. font-size: 11px;
  163. line-height: 50px;
  164. text-transform: uppercase;
  165. position: relative;
  166. float: left;
  167. padding: 0 20px;
  168. border: 1px solid #aaa;
  169. border-top: 0; border-bottom: 0; border-left-width: 0;
  170. cursor: pointer;
  171. }
  172. .navigation.toc {
  173. border-left-width: 1px;
  174. }
  175. .navigation:hover,
  176. .navigation.active {
  177. background: #eee;
  178. background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#f8f8f8));
  179. background: -moz-linear-gradient(top, #eee, #f8f8f8);
  180. }
  181. .navigation.active {
  182. height: 51px;
  183. color: #000;
  184. background: -webkit-gradient(linear, left top, left bottom, from(#e5e5e5), to(#fff));
  185. background: -moz-linear-gradient(top, #e5e5e5, #fff);
  186. }
  187. .navigation .button {
  188. font-weight: bold;
  189. }
  190. .navigation .button::selection {
  191. background: transparent;
  192. }
  193. .navigation .contents {
  194. display: none;
  195. position: absolute;
  196. background: #fff;
  197. opacity: 0.97;
  198. top: 51px; left: 0;
  199. padding: 5px 0;
  200. margin-left: -1px;
  201. border: 1px solid #aaa;
  202. -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
  203. -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
  204. -moz-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
  205. box-shadow: 0 3px 5px rgba(0,0,0,0.2);
  206. }
  207. .navigation .contents a {
  208. display: block;
  209. width: 290px;
  210. text-transform: none;
  211. text-decoration: none;
  212. height: 12px;
  213. line-height: 12px;
  214. padding: 4px 10px;
  215. border: 1px solid transparent;
  216. border-left: 0; border-right: 0;
  217. }
  218. .navigation .contents a:hover {
  219. border-color: #ddd;
  220. background: #eee;
  221. }
  222. .navigation.active .contents {
  223. display: block;
  224. }
  225. .navigation .contents.menu {
  226. z-index: 100;
  227. border-top: 0;
  228. -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; border-top-left-radius: 0;
  229. -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; border-top-right-radius: 0;
  230. }
  231. .navigation .contents.repl_wrapper {
  232. padding: 0;
  233. position: fixed;
  234. width: auto; height: auto;
  235. left: 40px; top: 90px; right: 40px; bottom: 30px;
  236. background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eaeaea));
  237. }
  238. .navigation .repl_bridge {
  239. position: absolute;
  240. height: 12px;
  241. left: -1px; right: -1px;
  242. bottom: -14px;
  243. border: 1px solid #aaa;
  244. z-index: 5;
  245. background: #fff;
  246. display: none;
  247. border-top-color: #fff; border-bottom-color: #fff;
  248. }
  249. .navigation.active .repl_bridge {
  250. display: block;
  251. }
  252. .navigation .code .minibutton {
  253. top: 10px; right: 10px;
  254. width: 40px;
  255. text-transform: none;
  256. }
  257. .navigation .code a.minibutton.permalink {
  258. top: 38px;
  259. display: block;
  260. }
  261. .bookmark {
  262. display: block;
  263. width: 0; height: 0;
  264. position: relative;
  265. top: -90px;
  266. }
  267. .navigation .contents.repl_wrapper .code {
  268. cursor: text;
  269. -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
  270. background: #181a3a url(../images/banding.png);
  271. border: 2px solid #555;
  272. padding: 0;
  273. position: absolute;
  274. top: 15px; left: 15px; right: 15px; bottom: 15px;
  275. }
  276. .repl_wrapper .screenshadow {
  277. position: absolute;
  278. width: 200px; height: 150px;
  279. background: url(../images/screenshadow.png?2);
  280. }
  281. .repl_wrapper .screenshadow.tl {
  282. top: 0; left: 0;
  283. background-position: 0 0;
  284. }
  285. .repl_wrapper .screenshadow.tr {
  286. top: 0; right: 0;
  287. background-position: -200px 0;
  288. }
  289. .repl_wrapper .screenshadow.bl {
  290. bottom: 0; left: 0;
  291. background-position: 0 -150px;
  292. }
  293. .repl_wrapper .screenshadow.br {
  294. bottom: 0; right: 0;
  295. background-position: -200px -150px;
  296. }
  297. #repl_source, #repl_results {
  298. background: transparent;
  299. outline: none;
  300. margin: 5px 0 20px;
  301. color: #def;
  302. }
  303. #repl_results, #repl_source_wrap {
  304. width: auto; height: auto;
  305. position: absolute;
  306. margin-bottom: 0;
  307. top: 10px; left: 10px; right: 10px; bottom: 15px;
  308. }
  309. #repl_results.error {
  310. color: red
  311. }
  312. #repl_source_wrap {
  313. margin-left: 5px;
  314. width: 47%; right: 50%;
  315. float: left;
  316. }
  317. #repl_source {
  318. padding-left: 5px;
  319. width: 100%;
  320. height: 100%;
  321. border: 0;
  322. overflow-y: auto;
  323. resize: none;
  324. }
  325. #repl_results_wrap {
  326. white-space: pre;
  327. }
  328. #repl_results {
  329. text-transform: none;
  330. overflow-y: auto;
  331. left: 50%;
  332. border-left-color: #555;
  333. }
  334. /*----------------------------- Mini Buttons ---------------------------------*/
  335. .minibutton {
  336. cursor: pointer;
  337. color: #333;
  338. text-shadow: #eee 0 1px 1px;
  339. font-weight: bold;
  340. font-size: 11px;
  341. line-height: 11px;
  342. padding: 5px 10px 6px;
  343. height: 11px;
  344. text-align: center;
  345. -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
  346. box-shadow: 0 1px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  347. border: 1px solid #b2b2b2; border-top-color: #c9c9c9; border-bottom-color: #9a9a9a;
  348. background: url(../images/button_bg.png) repeat-x left top;
  349. }
  350. .minibutton:active {
  351. border-color: #aaa;
  352. box-shadow: 0 1px 2px #e4e4e4; -webkit-box-shadow: 0 1px 2px #e4e4e4; -moz-box-shadow: 0 1px 2px #e4e4e4;
  353. }
  354. .minibutton::selection {
  355. background: transparent;
  356. }
  357. .minibutton ::-moz-selection {
  358. background: transparent;
  359. }
  360. .minibutton.ok {
  361. color: #fff;
  362. background-image: url(../images/button_bg_green.gif);
  363. border-color: #4ba47c; border-top-color: #53b388; border-bottom-color: #459671;
  364. text-shadow: #aaa 0 -1px 0;
  365. }
  366. .minibutton.dark {
  367. border: 0;
  368. color: #fff;
  369. box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
  370. background-image: url(../images/button_bg_dark.gif);
  371. text-shadow: none;
  372. }
  373. .minibutton.error {
  374. opacity: 0.5;
  375. color: #600;
  376. cursor: not-allowed;
  377. }
  378. @media (max-width: 820px) {
  379. .container {
  380. width: auto;
  381. padding: 1em;
  382. }
  383. p, li, table {
  384. width: auto;
  385. }
  386. #fadeout {
  387. display: none;
  388. }
  389. #flybar {
  390. position: static;
  391. height: auto;
  392. min-width: 245px;
  393. }
  394. #logo {
  395. float: none;
  396. }
  397. .navigation {
  398. float: none;
  399. border: none;
  400. }
  401. div.code pre, div.code textarea {
  402. border-left: none;
  403. border-top-width: 1px;
  404. width: auto;
  405. float: none;
  406. }
  407. div.code pre:first-child {
  408. border-top: none;
  409. }
  410. }