github.com/rabbouni145/gg@v0.47.1/docs/static/css/style.css (about) 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 }