style.css (13897B)
1 /* Import fonts */
2 @import url(//fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic);
3
4 /* ******************************
5 For the github btn
6 ****************************** */
7
8 .github-btn {
9 font-size: 11px;
10 }
11 .github-btn,
12 .github-btn .btn {
13 font-weight: bold;
14 }
15 .github-btn .btn-default {
16 text-shadow: 0 1px 0 #fff;
17 background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(#e0e0e0));
18 background-image: -webkit-linear-gradient(top, #ffffff, 0%, #e0e0e0, 100%);
19 background-image: -moz-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);
20 background-image: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);
21 background-repeat: repeat-x;
22 border-color: #dbdbdb;
23 border-color: #ccc;
24 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
25 }
26
27 .github-btn .btn-default:hover, .github-btn .btn-default:focus {
28 background-color: #e0e0e0;
29 background-position: 0 -15px;
30 color: #333;
31 border-color: #adadad;
32 }
33
34 .nav-github {
35 width: 325px;
36 }
37 .nav-github > span {
38 padding-right: 0.5em;
39 }
40
41 .icon-github {
42 display: inline-block;
43 font-family: FontAwesome;
44 font-style: normal;
45 font-weight: normal;
46 line-height: 1;
47 -webkit-font-smoothing: antialiased;
48 -moz-osx-font-smoothing: grayscale;
49 }
50
51 .github-watchers .icon-github:before{
52 content: "\f005";
53 }
54
55 .github-forks .icon-github:before{
56 content: "\f126";
57 }
58
59 .gh-count{
60 padding: 2px 5px 3px 4px;
61 color: #555;
62 text-decoration: none;
63 text-shadow:0 1px 0 #fff;
64 white-space:nowrap;
65 cursor:pointer;
66 border-radius:3px;
67 position:relative;
68 display:none;
69 margin-left:4px;
70 background-color:#fafafa;
71 border:1px solid #d4d4d4;
72 }
73
74 .gh-count:hover,.gh-count:focus{color:#4183c4;text-decoration: none;}
75 .gh-count:before,.gh-count:after{content:' ';position:absolute;display:inline-block;width:0;height:0;border-color:transparent;border-style:solid}
76 .gh-count:before{top:50%;left:-3px;margin-top:-4px;border-width:4px 4px 4px 0;border-right-color:#fafafa}
77 .gh-count:after{top:50%;left:-4px;z-index:-1;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#d4d4d4}
78
79 thead {
80 font-weight: bold;
81 }
82
83 table {
84 width: 100%;
85 }
86
87
88 h1, h2, h3 {
89 margin-top: .8em;
90 margin-bottom: .7em;
91 }
92
93 pre code {
94 font-size: 15px !important;
95 font-family: Menlo, Consolas, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', Monaco, 'Droid Sans Mono', monospace;
96 }
97
98 body {
99 color: #353b44;
100 background: #edece4;
101 font-family: 'Lato', sans-serif;
102 padding: 0px !important;
103 margin: 0px !important;
104 font-size: 16px !important;
105 font-weight: 400;
106 }
107
108 h2,h3,h4,h5{
109 font-weight: 700;
110 }
111
112
113 h1[id]:before, h2[id]:before, h3[id]:before, h4[id]:before, h5[id]:before {
114 display: block;
115 content: " ";
116 margin-top: -75px;
117 height: 75px;
118 visibility: hidden;
119 }
120
121 label{
122 font-weight: 400;
123 }
124
125 .sidebar-menu .fa {
126 width: 30px;
127 text-align: center;
128 }
129
130 a, a:hover, a:focus {
131 text-decoration: none;
132 outline: none;
133 outline: 0;
134 }
135
136 img {
137 max-width: 100%;
138 height: auto;
139 }
140
141 .panel-body a {
142 line-height: 1.1;
143 display: inline-block;
144 }
145 .panel-body a:after {
146 display: block;
147 content: "";
148 height: 1px;
149 width: 0%;
150 background-color: #ff4088;
151 -webkit-transition: width 0.5s ease;
152 -moz-transition: width 0.5s ease;
153 -ms-transition: width 0.5s ease;
154 transition: width 0.5s ease;
155 }
156
157 .panel-body a:hover:after, .panel-body a:focus:after {
158 width: 100%;
159 }
160
161 input:focus, textarea:focus { outline: none; }
162 *:focus {outline: none;}
163 ::selection {
164 background: #ff4088;
165 color: #fff;
166 }
167 ::-moz-selection {
168 background: #ff4088;
169 color: #fff;
170 }
171
172 #container {
173 width: 100%;
174 height: 100%;
175 }
176
177 /*sidebar navigation*/
178
179 #sidebar {
180 width: 214px;
181 height: 100%;
182 position: fixed;
183 background: #ffffff;
184 overflow-y: auto;
185 }
186
187
188 ul.sidebar-menu , ul.sidebar-menu li ul.sub{
189 margin: -2px 0 0;
190 padding: 0;
191 }
192
193 ul.sidebar-menu {
194 margin-top: 60px;
195 }
196
197 #sidebar > ul > li > ul.sub {
198 display: none;
199 }
200
201 #sidebar > ul > li.active > ul.sub, #sidebar > ul > li > ul.sub > li > a {
202 display: block;
203 }
204
205 ul.sidebar-menu li ul.sub li{
206 background: #eeeeee;
207 margin-bottom: 0;
208 margin-left: 0;
209 margin-right: 0;
210 }
211
212 ul.sidebar-menu li ul.sub li:last-child{
213 border-radius: 0 0 4px 4px;
214 -webkit-border-radius: 0 0 4px 4px;
215 }
216
217 ul.sidebar-menu li ul.sub li a {
218 font-size: 12px;
219 padding: 0 0 0 32px;
220 line-height: 35px;
221 height: 35px;
222 -webkit-transition: all 0.3s ease;
223 -moz-transition: all 0.3s ease;
224 -o-transition: all 0.3s ease;
225 -ms-transition: all 0.3s ease;
226 transition: all 0.3s ease;
227 color: #656C73;
228 font-size: 14px;
229 }
230
231 ul.sidebar-menu li ul.sub li a:hover, ul.sidebar-menu li ul.sub li.active a {
232 color: #ff4088;
233 -webkit-transition: all 0.3s ease;
234 -moz-transition: all 0.3s ease;
235 -o-transition: all 0.3s ease;
236 -ms-transition: all 0.3s ease;
237 transition: all 0.3s ease;
238 display: block;
239 }
240
241 ul.sidebar-menu li{
242 line-height: 20px !important;
243 }
244
245 ul.sidebar-menu li.sub-menu{
246 line-height: 15px;
247 font-size: 16px;
248 }
249
250 ul.sidebar-menu li a span{
251 display: inline-block;
252 }
253
254 ul.sidebar-menu li a{
255 color: #72767D;
256 text-decoration: none;
257 display: block;
258 padding: 10px 0 10px 10px;
259 font-size: 16px;
260 font-weight: 400;
261 outline: none;
262 -webkit-transition: all 0.3s ease;
263 -moz-transition: all 0.3s ease;
264 -o-transition: all 0.3s ease;
265 -ms-transition: all 0.3s ease;
266 transition: all 0.3s ease;
267 border-right: 1px solid #D7D7D7;
268 border-bottom: 1px solid #D7D7D7;
269 white-space: nowrap;
270 }
271
272 ul.sidebar-menu li.active a, ul.sidebar-menu li a:hover, ul.sidebar-menu li a:focus {
273 background: #eeeeee;
274 color: #ff4088;
275 display: block;
276 /*border-radius: 4px;
277 -webkit-border-radius: 4px;*/
278 -webkit-transition: all 0.3s ease;
279 -moz-transition: all 0.3s ease;
280 -o-transition: all 0.3s ease;
281 -ms-transition: all 0.3s ease;
282 transition: all 0.3s ease;
283 }
284 ul.sidebar-menu li a:hover, ul.sidebar-menu li a:focus {
285 border-bottom: 1px solid #ff4088;
286 }
287 /*ul.sidebar-menu li.active a,*/ ul.sidebar-menu .sub-menu li.active a{
288 border-bottom: 1px solid #ff4088;
289 }
290
291 ul.sidebar-menu li a i {
292 font-size: 18px;
293 padding-right: 6px;
294 /*color: #ff4088;*/
295 }
296
297 ul.sidebar-menu li a:hover i, ul.sidebar-menu li a:focus i {
298 color: #ff4088;
299 }
300
301 ul.sidebar-menu li.active a i {
302 color: #ff4088;
303 }
304
305
306 #sidebar ul > li > a .menu-arrow {
307 float: right;
308 margin-right: 8px;
309 margin-top: 6px;
310 }
311
312 @-moz-document url-prefix() {
313 #sidebar ul > li > a .menu-arrow {
314 float: right;
315 margin-right: 8px;
316 margin-top: -16px;
317 }
318 }
319
320 #main-content {
321 margin-left: 200px;
322 line-height: 1.8;
323 font-size: 18px;
324 }
325
326 .header {
327 min-height: 60px;
328 padding: 0 10px;
329 }
330 .header {
331 position: fixed;
332 left: 0;
333 right: 0;
334 z-index: 1002;
335 text-align:center;
336 }
337
338
339 .black-bg {
340 background: rgba(20,20,20,0.9);
341 border-bottom: 1px solid #f1f2f7;
342 }
343
344 .wrapper {
345 display: inline-block;
346 margin-top: 60px;
347 padding: 0px 15px 15px 0px;
348 width: 100%;
349 }
350
351 a.logo {
352 font-size: 22px;
353 font-weight: 400;
354 color: #8E8E93;
355 float: left;
356 margin-top: 10px;
357 text-transform: uppercase;
358 }
359
360 a.logo:hover, a.logo:focus {
361 text-decoration: none;
362 outline: none;
363 }
364
365 h1.top-menu {
366 margin-top: -5px;
367 }
368 .title-row {
369 margin-top: 15px;
370 margin-left: 16px;
371 color: #EEE;
372 }
373 .notification-row {
374 float: right;
375 margin-top: 15px;
376 margin-left: 65px;
377 }
378
379
380 .top-nav {
381 margin-top: 15px;
382 }
383
384 /*--sidebar toggle---*/
385
386 .toggle-nav {
387 float: left;
388 padding-right: 5px;
389 margin-top: 20px;
390 cursor: pointer;
391 color: gray;
392 }
393
394 .toggle-nav .icon-reorder {
395 cursor: pointer;
396 display: inline-block;
397 font-size: 20px;
398 }
399
400
401 @-webkit-keyframes square {
402 0% { background-position: 0 0; }
403 25% { background-position: 100% 0; }
404 50% { background-position: 100% 100%; }
405 75% { background-position: 0 100%; }
406 100% { background-position: 0 0; }
407 }
408
409 @-ms-keyframes square {
410 0% { background-position: 0 0; }
411 25% { background-position: 100% 0; }
412 50% { background-position: 100% 100%; }
413 75% { background-position: 0 100%; }
414 100% { background-position: 0 0; }
415 }
416
417 @keyframes square {
418 0% { background-position: 0 0; }
419 25% { background-position: 100% 0; }
420 50% { background-position: 100% 100%; }
421 75% { background-position: 0 100%; }
422 100% { background-position: 0 0; }
423 }
424
425 .navigation {
426 position: absolute;
427 top: 0;
428 bottom: 0;
429 margin: 0;
430 max-width: 150px;
431 min-width: 90px;
432 width:100%;
433 min-height:1200px;
434 cursor:pointer;
435 display: flex;
436 justify-content: center;
437 align-content: center;
438 flex-direction: column;
439 font-size: 6em;
440 color: rgba(0,0,0,0.5);
441 text-align: center;
442 -webkit-transition: all 350ms ease;
443 transition: all 350ms ease;
444 }
445
446 .navigation.next {
447 right:0;
448 }
449
450
451 .navigation:hover {
452 background-color: rgba(0,0,0,0.1);
453 }
454
455 /* Google Custom Search box */
456
457 input.gsc-input,
458 .gsc-input-box,
459 .gsc-input-box-hover,
460 .gsc-input-box-focus,
461 .gsc-search-button,
462 .gsc-inline-block {
463 box-sizing: content-box;
464 line-height: normal;
465 }
466
467 .gsc-control-cse {
468 padding: 0.1em 0 0.5em 1em !important;
469 width: 16em !important;
470 float: right;
471 }
472
473 input.gsc-search-button-v2 {
474 padding: 6px 12px !important;
475 }
476
477 .gsc-search-box-tools .gsc-search-box .gsc-input {
478 padding-right: 1px !important;
479 }
480
481 /* Styled keypress from Wikipedia */
482
483 kbd {
484 border: 1px solid #aaa;
485 -moz-border-radius: 0.2em;
486 -webkit-border-radius: 0.2em;
487 border-radius: 0.2em;
488 -moz-box-shadow: 0.1em 0.2em 0.2em #ddd;
489 -webkit-box-shadow: 0.1em 0.2em 0.2em #ddd;
490 box-shadow: 0.1em 0.2em 0.2em #ddd;
491 background-color: #f9f9f9;
492 background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee);
493 background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee);
494 background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee);
495 background-image: linear-gradient(to bottom, #eee, #f9f9f9, #eee);
496 padding: 0.1em 0.3em;
497 font-family: inherit;
498 font-size: 0.85em;
499 }
500
501 /* For definitions of variables */
502
503 dl {
504 margin: 1em;
505 border-bottom: 1px solid #ccc;
506 }
507
508 dt {
509 float: left;
510 clear: left;
511 width: 9.5em;
512 margin: 0.125em;
513 padding: 2px 4px;
514 }
515
516 dd {
517 padding: 0.2em 0 0.2em 10em;
518 border-top: 1px solid #ccc;
519 }
520
521 /* Prevent linebreak right after an icon */
522 #main-content .fa {
523 display: inline;
524 }
525
526 /* Logo for FreeBSD until Font Awesome adds it, see https://github.com/FortAwesome/Font-Awesome/issues/1116 */
527 i.freebsd-19px:before {
528 content: url(/img/freebsd-19px.svg);
529 vertical-align: -7%;
530 }
531
532 /* Responsive videos */
533 .video-container {
534 position: relative;
535 padding-bottom: 56.25%; /* 16:9 */
536 padding-top: 30px;
537 height: 0;
538 overflow: hidden;
539 margin: 20px 0;
540 }
541
542 .video-container iframe,
543 .video-container object,
544 .video-container embed {
545 position: absolute;
546 top: 0;
547 left: 0;
548 width: 100%;
549 height: 100%;
550 }
551
552 /* Google custom search */
553 .cse {
554 margin-top: 20px;
555 padding-right: 20px;
556 }
557
558
559 /* Table of contents */
560
561 .toc ul { list-style: none; margin: 0; padding: 0 5px; }
562 .toc ul li { display: inline; }
563 #TableOfContents > ul > li > ul > li > ul li { margin-right: 8px; }
564 #TableOfContents > ul > li > ul > li > a, #TableOfContents > ul > li > a { font-weight: bold; background-color: #eeeeee; padding: 0 10px; margin: 0 2px; }
565 #TableOfContents > ul > li > ul > li > a { font-style: italic; }
566 .toc.compact ul > li > ul > li > ul { display: none; }
567
568 #toc {
569 position:fixed;
570 background-color: rgba(0, 0, 0, 0.1);
571 padding: 10px 50px 10px 20px;
572 }
573
574 .showcase-container {
575 display: inline-block;
576 position: relative;
577 width: 100%;
578 }
579
580 .showcase-container img {
581 border: 1px solid #555;
582 }
583
584 .showcase-container h4 {
585 margin-top: 0;
586 margin-bottom: 0;
587 }
588 .dummy {
589 padding-top: 90%; /* Making rows line up even if img proportions off */
590 }
591
592 .thumbnail {
593 position: absolute;
594 top: 0;
595 bottom: 0;
596 left: 0;
597 right: 0;
598 }
599
600 @media(max-width:1200px) {
601 .toc {
602 display: none;
603 }
604 }
605
606
607 /* Footer panel */
608 .footer-panel {
609 width: 100%;
610 border-top:1px #efefef solid;
611 line-height: 30px;
612 padding: 25px 0px 15px;
613 margin-top: 15px;
614 background: #f9f9f9;
615 display: inline-block;
616 float: left;
617 }
618
619 .footer-panel p {
620 padding-left: 20px;
621 padding-right: 20px;
622 font-size: medium;
623 font-style: italic;
624 }
625
626
627 /* Search form */
628 #search-input {
629 width: 100%;
630 border: 1px solid #B3B3B3;
631 border-radius: 3px;
632 padding: 5px;
633 }
634
635 #search-input:focus {
636 border-color: #F04A9C;
637 }
638
639 /* Search result wrapper */
640 .algolia-autocomplete {
641 width: 100%;
642 }
643
644 /* List of search results */
645 .aa-dropdown-menu {
646 box-sizing: border-box;
647 width: 100%;
648 background-color: #FFFFFF;
649 border: 1px solid #B3B3B3;
650 padding: 0;
651 font-size: 16px;
652 margin: 4 0 4 0;
653 }
654
655 /* Highlight terms in search result headers */
656 .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
657 background-color: #F04A9C;
658 }
659
660 /* Highlight terms in search result body */
661 .algolia-docsearch-suggestion--highlight {
662 color: #F04A9C;
663 font-weight: 900;
664 }
665
666 /* Currently selected search result */
667 .aa-cursor .algolia-docsearch-suggestion--content {
668 color: inherit;
669 }
670
671 .aa-cursor .algolia-docsearch-suggestion {
672 background: #EFEFEF;
673 color: #353B44;
674 }
675
676 .algolia-docsearch-suggestion {
677 font-size: 16px;
678 color: #9AA2AB;
679 }
680
681 .algolia-docsearch-suggestion--category-header,
682 .algolia-docsearch-suggestion--subcategory-column {
683 display: none !important;
684 }