/documentation/docs/docco.css

  1/*--------------------- Typography ----------------------------*/
  2
  3@font-face {
  4    font-family: 'aller-light';
  5    src: url('public/fonts/aller-light.eot');
  6    src: url('public/fonts/aller-light.eot?#iefix') format('embedded-opentype'),
  7         url('public/fonts/aller-light.woff') format('woff'),
  8         url('public/fonts/aller-light.ttf') format('truetype');
  9    font-weight: normal;
 10    font-style: normal;
 11}
 12
 13@font-face {
 14    font-family: 'aller-bold';
 15    src: url('public/fonts/aller-bold.eot');
 16    src: url('public/fonts/aller-bold.eot?#iefix') format('embedded-opentype'),
 17         url('public/fonts/aller-bold.woff') format('woff'),
 18         url('public/fonts/aller-bold.ttf') format('truetype');
 19    font-weight: normal;
 20    font-style: normal;
 21}
 22
 23@font-face {
 24    font-family: 'roboto-black';
 25    src: url('public/fonts/roboto-black.eot');
 26    src: url('public/fonts/roboto-black.eot?#iefix') format('embedded-opentype'),
 27         url('public/fonts/roboto-black.woff') format('woff'),
 28         url('public/fonts/roboto-black.ttf') format('truetype');
 29    font-weight: normal;
 30    font-style: normal;
 31}
 32
 33/*--------------------- Layout ----------------------------*/
 34html { height: 100%; }
 35body {
 36  font-family: "aller-light";
 37  font-size: 14px;
 38  line-height: 18px;
 39  color: #30404f;
 40  margin: 0; padding: 0;
 41  height:100%;
 42}
 43#container { min-height: 100%; }
 44
 45a {
 46  color: #000;
 47}
 48
 49b, strong {
 50  font-weight: normal;
 51  font-family: "aller-bold";
 52}
 53
 54p {
 55  margin: 15px 0 0px;
 56}
 57  .annotation ul, .annotation ol {
 58    margin: 25px 0;
 59  }
 60    .annotation ul li, .annotation ol li {
 61      font-size: 14px;
 62      line-height: 18px;
 63      margin: 10px 0;
 64    }
 65
 66h1, h2, h3, h4, h5, h6 {
 67  color: #112233;
 68  line-height: 1em;
 69  font-weight: normal;
 70  font-family: "roboto-black";
 71  text-transform: uppercase;
 72  margin: 30px 0 15px 0;
 73}
 74
 75h1 {
 76  margin-top: 40px;
 77}
 78h2 {
 79  font-size: 1.26em;
 80}
 81
 82hr {
 83  border: 0;
 84  background: 1px #ddd;
 85  height: 1px;
 86  margin: 20px 0;
 87}
 88
 89pre, tt, code {
 90  font-size: 12px; line-height: 16px;
 91  font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace;
 92  margin: 0; padding: 0;
 93}
 94  .annotation pre {
 95    display: block;
 96    margin: 0;
 97    padding: 7px 10px;
 98    background: #fcfcfc;
 99    -moz-box-shadow:    inset 0 0 10px rgba(0,0,0,0.1);
100    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
101    box-shadow:         inset 0 0 10px rgba(0,0,0,0.1);
102    overflow-x: auto;
103  }
104    .annotation pre code {
105      border: 0;
106      padding: 0;
107      background: transparent;
108    }
109
110
111blockquote {
112  border-left: 5px solid #ccc;
113  margin: 0;
114  padding: 1px 0 1px 1em;
115}
116  .sections blockquote p {
117    font-family: Menlo, Consolas, Monaco, monospace;
118    font-size: 12px; line-height: 16px;
119    color: #999;
120    margin: 10px 0 0;
121    white-space: pre-wrap;
122  }
123
124ul.sections {
125  list-style: none;
126  padding:0 0 5px 0;;
127  margin:0;
128}
129
130/*
131  Force border-box so that % widths fit the parent
132  container without overlap because of margin/padding.
133
134  More Info : http://www.quirksmode.org/css/box.html
135*/
136ul.sections > li > div {
137  -moz-box-sizing: border-box;    /* firefox */
138  -ms-box-sizing: border-box;     /* ie */
139  -webkit-box-sizing: border-box; /* webkit */
140  -khtml-box-sizing: border-box;  /* konqueror */
141  box-sizing: border-box;         /* css3 */
142}
143
144
145/*---------------------- Jump Page -----------------------------*/
146#jump_to, #jump_page {
147  margin: 0;
148  background: white;
149  -webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777;
150  -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px;
151  font: 16px Arial;
152  cursor: pointer;
153  text-align: right;
154  list-style: none;
155}
156
157#jump_to a {
158  text-decoration: none;
159}
160
161#jump_to a.large {
162  display: none;
163}
164#jump_to a.small {
165  font-size: 22px;
166  font-weight: bold;
167  color: #676767;
168}
169
170#jump_to, #jump_wrapper {
171  position: fixed;
172  right: 0; top: 0;
173  padding: 10px 15px;
174  margin:0;
175}
176
177#jump_wrapper {
178  display: none;
179  padding:0;
180}
181
182#jump_to:hover #jump_wrapper {
183  display: block;
184}
185
186#jump_page_wrapper{
187  position: fixed;
188  right: 0;
189  top: 0;
190  bottom: 0;
191}
192
193#jump_page {
194  padding: 5px 0 3px;
195  margin: 0 0 25px 25px;
196  max-height: 100%;
197  overflow: auto;
198}
199
200#jump_page .source {
201  display: block;
202  padding: 15px;
203  text-decoration: none;
204  border-top: 1px solid #eee;
205}
206
207#jump_page .source:hover {
208  background: #f5f5ff;
209}
210
211#jump_page .source:first-child {
212}
213
214/*---------------------- Low resolutions (> 320px) ---------------------*/
215@media only screen and (min-width: 320px) {
216  .pilwrap { display: none; }
217
218  ul.sections > li > div {
219    display: block;
220    padding:5px 10px 0 10px;
221  }
222
223  ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol {
224    padding-left: 30px;
225  }
226
227  ul.sections > li > div.content {
228    overflow-x:auto;
229    -webkit-box-shadow: inset 0 0 5px #e5e5ee;
230    box-shadow: inset 0 0 5px #e5e5ee;
231    border: 1px solid #dedede;
232    margin:5px 10px 5px 10px;
233    padding-bottom: 5px;
234  }
235
236  ul.sections > li > div.annotation pre {
237    margin: 7px 0 7px;
238    padding-left: 15px;
239  }
240
241  ul.sections > li > div.annotation p tt, .annotation code {
242    background: #f8f8ff;
243    border: 1px solid #dedede;
244    font-size: 12px;
245    padding: 0 0.2em;
246  }
247}
248
249/*----------------------  (> 481px) ---------------------*/
250@media only screen and (min-width: 481px) {
251  #container {
252    position: relative;
253  }
254  body {
255    background-color: #F5F5FF;
256    font-size: 15px;
257    line-height: 21px;
258  }
259  pre, tt, code {
260    line-height: 18px;
261  }
262  p, ul, ol {
263    margin: 0 0 15px;
264  }
265
266
267  #jump_to {
268    padding: 5px 10px;
269  }
270  #jump_wrapper {
271    padding: 0;
272  }
273  #jump_to, #jump_page {
274    font: 10px Arial;
275    text-transform: uppercase;
276  }
277  #jump_page .source {
278    padding: 5px 10px;
279  }
280  #jump_to a.large {
281    display: inline-block;
282  }
283  #jump_to a.small {
284    display: none;
285  }
286
287
288
289  #background {
290    position: absolute;
291    top: 0; bottom: 0;
292    width: 350px;
293    background: #fff;
294    border-right: 1px solid #e5e5ee;
295    z-index: -1;
296  }
297
298  ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol {
299    padding-left: 40px;
300  }
301
302  ul.sections > li {
303    white-space: nowrap;
304  }
305
306  ul.sections > li > div {
307    display: inline-block;
308  }
309
310  ul.sections > li > div.annotation {
311    max-width: 350px;
312    min-width: 350px;
313    min-height: 5px;
314    padding: 13px;
315    overflow-x: hidden;
316    white-space: normal;
317    vertical-align: top;
318    text-align: left;
319  }
320  ul.sections > li > div.annotation pre {
321    margin: 15px 0 15px;
322    padding-left: 15px;
323  }
324
325  ul.sections > li > div.content {
326    padding: 13px;
327    vertical-align: top;
328    border: none;
329    -webkit-box-shadow: none;
330    box-shadow: none;
331  }
332
333  .pilwrap {
334    position: relative;
335    display: inline;
336  }
337
338  .pilcrow {
339    font: 12px Arial;
340    text-decoration: none;
341    color: #454545;
342    position: absolute;
343    top: 3px; left: -20px;
344    padding: 1px 2px;
345    opacity: 0;
346    -webkit-transition: opacity 0.2s linear;
347  }
348    .for-h1 .pilcrow {
349      top: 47px;
350    }
351    .for-h2 .pilcrow, .for-h3 .pilcrow, .for-h4 .pilcrow {
352      top: 35px;
353    }
354
355  ul.sections > li > div.annotation:hover .pilcrow {
356    opacity: 1;
357  }
358}
359
360/*---------------------- (> 1025px) ---------------------*/
361@media only screen and (min-width: 1025px) {
362
363  body {
364    font-size: 16px;
365    line-height: 24px;
366  }
367
368  #background {
369    width: 525px;
370  }
371  ul.sections > li > div.annotation {
372    max-width: 525px;
373    min-width: 525px;
374    padding: 10px 25px 1px 50px;
375  }
376  ul.sections > li > div.content {
377    padding: 9px 15px 16px 25px;
378  }
379}
380
381/*---------------------- Syntax Highlighting -----------------------------*/
382
383td.linenos { background-color: #f0f0f0; padding-right: 10px; }
384span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; }
385/*
386
387github.com style (c) Vasily Polovnyov <vast@whiteants.net>
388
389*/
390
391pre code {
392  display: block; padding: 0.5em;
393  color: #000;
394  background: #f8f8ff
395}
396
397pre .hljs-comment,
398pre .hljs-template_comment,
399pre .hljs-diff .hljs-header,
400pre .hljs-javadoc {
401  color: #408080;
402  font-style: italic
403}
404
405pre .hljs-keyword,
406pre .hljs-assignment,
407pre .hljs-literal,
408pre .hljs-css .hljs-rule .hljs-keyword,
409pre .hljs-winutils,
410pre .hljs-javascript .hljs-title,
411pre .hljs-lisp .hljs-title,
412pre .hljs-subst {
413  color: #954121;
414  /*font-weight: bold*/
415}
416
417pre .hljs-number,
418pre .hljs-hexcolor {
419  color: #40a070
420}
421
422pre .hljs-string,
423pre .hljs-tag .hljs-value,
424pre .hljs-phpdoc,
425pre .hljs-tex .hljs-formula {
426  color: #219161;
427}
428
429pre .hljs-title,
430pre .hljs-id {
431  color: #19469D;
432}
433pre .hljs-params {
434  color: #00F;
435}
436
437pre .hljs-javascript .hljs-title,
438pre .hljs-lisp .hljs-title,
439pre .hljs-subst {
440  font-weight: normal
441}
442
443pre .hljs-class .hljs-title,
444pre .hljs-haskell .hljs-label,
445pre .hljs-tex .hljs-command {
446  color: #458;
447  font-weight: bold
448}
449
450pre .hljs-tag,
451pre .hljs-tag .hljs-title,
452pre .hljs-rules .hljs-property,
453pre .hljs-django .hljs-tag .hljs-keyword {
454  color: #000080;
455  font-weight: normal
456}
457
458pre .hljs-attribute,
459pre .hljs-variable,
460pre .hljs-instancevar,
461pre .hljs-lisp .hljs-body {
462  color: #008080
463}
464
465pre .hljs-regexp {
466  color: #B68
467}
468
469pre .hljs-class {
470  color: #458;
471  font-weight: bold
472}
473
474pre .hljs-symbol,
475pre .hljs-ruby .hljs-symbol .hljs-string,
476pre .hljs-ruby .hljs-symbol .hljs-keyword,
477pre .hljs-ruby .hljs-symbol .hljs-keymethods,
478pre .hljs-lisp .hljs-keyword,
479pre .hljs-tex .hljs-special,
480pre .hljs-input_number {
481  color: #990073
482}
483
484pre .hljs-builtin,
485pre .hljs-constructor,
486pre .hljs-built_in,
487pre .hljs-lisp .hljs-title {
488  color: #0086b3
489}
490
491pre .hljs-preprocessor,
492pre .hljs-pi,
493pre .hljs-doctype,
494pre .hljs-shebang,
495pre .hljs-cdata {
496  color: #999;
497  font-weight: bold
498}
499
500pre .hljs-deletion {
501  background: #fdd
502}
503
504pre .hljs-addition {
505  background: #dfd
506}
507
508pre .hljs-diff .hljs-change {
509  background: #0086b3
510}
511
512pre .hljs-chunk {
513  color: #aaa
514}
515
516pre .hljs-tex .hljs-formula {
517  opacity: 0.5;
518}