css/aircloud.css

   1 /*varibles*/
   2 * {
   3   font-family: "italic", Helvetica, Arial, "Heiti SC", "Microsoft YaHei";
   4 }
   5 body,
   6 html {
   7   margin: 0;
   8   padding: 0;
   9 }
  10 body {
  11   margin-left: calc(100vw - 100%) !important;
  12 }
  13 .red {
  14   color: red;
  15 }
  16 .hide {
  17   display: none !important;
  18 }
  19 .show-block {
  20   display: block !important;
  21 }
  22 .show-block {
  23   animation: showBlock 0.4s forwards;
  24   display: block !important;
  25 }
  26 @keyframes showBlock {
  27   from {
  28     opacity: 0;
  29     transform: translateY(-100%);
  30   }
  31   to {
  32     opacity: 1;
  33     transform: translateY(0);
  34   }
  35 }
  36 .hide-block {
  37   display: block !important;
  38   animation: hideBlock 0.4s forwards;
  39   opacity: 1;
  40   transform: translateY(0);
  41 }
  42 @keyframes hideBlock {
  43   from {
  44     opacity: 1;
  45     transform: translateY(0);
  46   }
  47   to {
  48     opacity: 0;
  49     transform: translateY(-100%);
  50     display: none;
  51   }
  52 }
  53 .show-flex-fade {
  54   animation: showFade 0.4s forwards;
  55   display: flex !important;
  56 }
  57 .hide-flex-fade {
  58   animation: hideFade 0.4s forwards;
  59 }
  60 @keyframes showFade {
  61   from {
  62     opacity: 0;
  63   }
  64   to {
  65     opacity: 1;
  66   }
  67 }
  68 @keyframes hideFade {
  69   from {
  70     opacity: 1;
  71   }
  72   to {
  73     opacity: 0;
  74     display: none !important;
  75   }
  76 }
  77 .no-indent {
  78   text-indent: 0 !important;
  79 }
  80 .no-indent p,
  81 .no-indent h1,
  82 .no-indent h2,
  83 .no-indent h3,
  84 .no-indent h4,
  85 .no-indent h5,
  86 .no-indent h6,
  87 .no-indent ul,
  88 .no-indent ol {
  89   text-indent: 0 !important;
  90 }
  91 .nav {
  92   position: relative;
  93   padding-top: 50px;
  94   color: #333333;
  95   width: 100%;
  96   display: flex;
  97   flex-direction: column;
  98   align-items: center;
  99 }
 100 .nav .avatar-name {
 101   display: flex;
 102   flex-direction: column;
 103   align-items: center;
 104   border-bottom: 1px solid #979797;
 105 }
 106 .nav .avatar-name .avatar {
 107   width: 120px;
 108   height: 120px;
 109   padding: 10px;
 110   box-sizing: border-box;
 111 }
 112 .nav .avatar-name .avatar img {
 113   width: 100px;
 114   height: 100px;
 115 }
 116 .nav .avatar-name .name {
 117   margin-top: 10px;
 118   margin-bottom: 20px;
 119 }
 120 .nav .avatar-name .name i {
 121   font-size: 16px;
 122   font-family: "italic" !important;
 123   font-weight: 300;
 124   color: #666666;
 125 }
 126 .nav .contents ul {
 127   width: 100%;
 128   padding-left: 0;
 129   margin-top: 25px;
 130   margin-bottom: 25px;
 131 }
 132 .nav .contents ul li,
 133 .nav .contents ul li a {
 134   text-decoration: none;
 135   font-size: 15px;
 136   margin: 20px auto;
 137   padding-left: 0;
 138   list-style: none;
 139 }
 140 .nav .contents ul li i,
 141 .nav .contents ul li a i {
 142   cursor: pointer;
 143   color: #999999;
 144   margin-right: 5px;
 145 }
 146 .nav .contents ul li span,
 147 .nav .contents ul li a span {
 148   cursor: pointer;
 149   color: #999999;
 150 }
 151 .nav .contents ul li.active span,
 152 .nav .contents ul li.active i {
 153   color: #4a4a4a;
 154 }
 155 .nav .contents ul li:hover span,
 156 .nav .contents ul li:hover i {
 157   color: #4a4a4a;
 158 }
 159 .site-nav-toggle {
 160   display: none;
 161 }
 162 .site-nav-toggle button {
 163   outline: none;
 164   margin-top: 2px;
 165   padding: 9px 10px;
 166   background: transparent;
 167   border: none;
 168   user-select: none;
 169 }
 170 .site-nav-toggle button .btn-bar {
 171   display: block;
 172   width: 22px;
 173   height: 2px;
 174   background: #666666;
 175   border-radius: 1px;
 176 }
 177 .site-nav-toggle button .btn-bar + .btn-bar {
 178   margin-top: 4px;
 179 }
 180 .search-field {
 181   overflow: hidden;
 182   display: none;
 183   position: fixed;
 184   top: 0;
 185   bottom: 0;
 186   z-index: 3;
 187   left: 0;
 188   right: 0;
 189   width: 100vw;
 190   height: 100vh;
 191   background-color: rgba(0, 0, 0, 0.3);
 192   align-items: center;
 193   flex-direction: column;
 194 }
 195 .search-field .search-container {
 196   width: 40vw;
 197   min-width: 500px;
 198   height: 70vh;
 199   margin-top: 15vh;
 200 }
 201 .search-field .search-container .search-input {
 202   width: 100%;
 203   display: flex;
 204   align-items: center;
 205   padding-top: 10px;
 206 }
 207 .search-field .search-container .search-input span {
 208   width: 60px;
 209   color: #999999;
 210   line-height: 30px;
 211   text-align: center;
 212 }
 213 .search-field .search-container .search-input span:nth-child(1) {
 214   width: 40px;
 215 }
 216 .search-field .search-container .search-input #begin-search {
 217   cursor: pointer;
 218 }
 219 .search-field .search-container .search-input #begin-search:hover {
 220   color: #4a4a4a;
 221 }
 222 .search-field .search-container .search-input input {
 223   flex: 1;
 224   background-color: #f3f4f7;
 225   border: 1px solid #cccccc;
 226   height: 30px;
 227   font-size: 18px;
 228   color: #4a4a4a;
 229   box-sizing: border-box;
 230   font-weight: 300;
 231   padding-left: 5px;
 232   padding-right: 5px;
 233 }
 234 .search-field .search-result-container {
 235   height: calc(70vh - 50px);
 236   overflow-y: scroll;
 237   overflow-x: hidden;
 238 }
 239 .search-field .search-result-container::-webkit-scrollbar {
 240   width: 4px;
 241 }
 242 .search-field .search-result-container .no-search-result {
 243   width: 100%;
 244   height: 200px;
 245   text-align: center;
 246   padding-top: 100px;
 247   color: #999999;
 248   font-size: 16px;
 249 }
 250 .search-field .search-result-container::-webkit-scrollbar-thumb {
 251   background-color: #c3c4c7;
 252   -webkit-border-radius: 2px;
 253   border-radius: 2px;
 254 }
 255 .search-field .search-result-container ul {
 256   margin-top: 10px;
 257   width: calc(100% - 25px);
 258   padding-left: 10px;
 259 }
 260 .search-field .search-result-container ul li {
 261   margin-bottom: 15px;
 262   list-style: none;
 263 }
 264 .search-field .search-result-container ul li a {
 265   text-decoration: none;
 266   cursor: pointer;
 267   font-size: 16px;
 268   color: #4a4a4a;
 269   font-weight: 300;
 270   padding-bottom: 5px;
 271 }
 272 .search-field .search-result-container ul li ul {
 273   padding-left: 10px;
 274 }
 275 .search-field .search-result-container ul li ul li {
 276   list-style: none;
 277   color: #666666;
 278   font-weight: 300;
 279   font-size: 13px;
 280 }
 281 @media screen and (max-width: 680px) {
 282   .search-field .search-container {
 283     min-width: 0;
 284     width: 100%;
 285     height: 100%;
 286     margin: 0;
 287   }
 288   .search-field .search-result-container {
 289     height: calc(100vh - 50px);
 290   }
 291   .nav {
 292     margin-top: 50px;
 293     position: relative;
 294     top: 0;
 295     width: 100%;
 296   }
 297   .nav .avatar-name {
 298     border-bottom: none;
 299   }
 300   .nav .contents {
 301     display: none;
 302     position: fixed;
 303     left: 0;
 304     top: 40px;
 305     width: 100%;
 306     border-bottom: 1px solid #CCCCCC;
 307     border-top: 1px solid #CCCCCC;
 308   }
 309   .nav .contents ul {
 310     padding-left: 30px;
 311   }
 312   .site-nav-toggle {
 313     height: 40px;
 314     box-sizing: border-box;
 315     display: block;
 316     position: fixed;
 317     width: 100%;
 318     padding-top: 2px;
 319     padding-left: 20px;
 320     z-index: 2;
 321   }
 322 }
 323 .post-preview {
 324   width: 100%;
 325   height: max-content;
 326   margin-bottom: 10px;
 327   box-sizing: border-box;
 328   display: flex;
 329   flex-direction: row;
 330 }
 331 .post-preview .post-time {
 332   font-size: 17px;
 333   color: #999999;
 334   width: 125px;
 335   font-weight: 300;
 336   line-height: 24px;
 337 }
 338 .post-preview .post-info {
 339   flex: 1;
 340 }
 341 .post-preview .post-info a {
 342   cursor: pointer;
 343   text-decoration: none;
 344 }
 345 .post-preview .post-info a h3 {
 346   line-height: 24px;
 347   cursor: pointer;
 348   margin-top: 0;
 349   margin-bottom: 5px;
 350   color: #101010;
 351   font-size: 18px;
 352   font-weight: 300;
 353   transition: color 0.4s;
 354 }
 355 .post-preview .post-info a h3:hover {
 356   color: #4990E2;
 357 }
 358 .post-preview .post-info p {
 359   margin-top: 0;
 360 }
 361 .post-preview .post-info p span,
 362 .post-preview .post-info p a {
 363   font-weight: 300;
 364   color: #999999;
 365   font-size: 14px;
 366   text-decoration: none;
 367 }
 368 .post-preview-container {
 369   min-height: 420px;
 370 }
 371 .pager {
 372   width: 100%;
 373   height: 40px;
 374   padding-left: 0;
 375   display: flex;
 376 }
 377 .pager .previous {
 378   flex: 1;
 379   display: flex;
 380   flex-direction: row;
 381   cursor: pointer;
 382 }
 383 .pager .next {
 384   flex: 1;
 385   display: flex;
 386   flex-direction: row-reverse;
 387   cursor: pointer;
 388 }
 389 .pager .previous a,
 390 .pager .next a {
 391   box-sizing: border-box;
 392   cursor: pointer;
 393   transition: color 0.4s, background-color 0.4s;
 394   border: 1px solid #999999;
 395   line-height: 40px;
 396   width: 150px;
 397   height: 40px;
 398   font-size: 18px;
 399   color: #999999;
 400   text-align: center;
 401   text-decoration: none;
 402 }
 403 .pager .previous a:hover,
 404 .pager .next a:hover {
 405   color: white;
 406   cursor: pointer;
 407   background-color: #666666;
 408 }
 409 @media screen and (max-width: 680px) {
 410   .post-preview-container {
 411     min-height: 0 !important;
 412   }
 413   .post-preview {
 414     width: 100%;
 415     height: max-content;
 416     margin-bottom: 10px;
 417     box-sizing: border-box;
 418     display: flex;
 419     flex-direction: column;
 420     padding-left: 10px;
 421     padding-right: 10px;
 422     border-bottom: 1px solid #EEEEEE;
 423   }
 424   .post-preview .post-time {
 425     font-size: 11px;
 426     color: #999999;
 427     width: 125px;
 428     font-weight: 300;
 429     line-height: 20px;
 430     font-style: oblique;
 431   }
 432   .post-preview .post-info {
 433     flex: 1;
 434   }
 435   .post-preview .post-info a {
 436     cursor: pointer;
 437     text-decoration: none;
 438   }
 439   .post-preview .post-info a h3 {
 440     line-height: 20px;
 441     cursor: pointer;
 442     margin-top: 0;
 443     margin-bottom: 5px;
 444     color: #101010;
 445     font-size: 15px;
 446     font-weight: 300;
 447   }
 448   .post-preview .post-info p {
 449     margin-top: 0;
 450   }
 451   .post-preview .post-info p span,
 452   .post-preview .post-info p a {
 453     font-weight: 300;
 454     color: #999999;
 455     font-size: 12px;
 456     text-decoration: none;
 457   }
 458   .pager {
 459     width: 100%;
 460     height: 40px;
 461     padding-left: 10px;
 462     padding-right: 10px;
 463     display: flex;
 464   }
 465   .pager .previous {
 466     flex: 1;
 467     display: flex;
 468     flex-direction: row;
 469     cursor: pointer;
 470   }
 471   .pager .next {
 472     flex: 1;
 473     display: flex;
 474     flex-direction: row-reverse;
 475     cursor: pointer;
 476   }
 477   .pager .previous a,
 478   .pager .next a {
 479     box-sizing: border-box;
 480     cursor: pointer;
 481     transition: color 0.4s, background-color 0.4s;
 482     border: 1px solid #999999;
 483     line-height: 30px;
 484     width: 120px;
 485     height: 30px;
 486     font-size: 14px;
 487     color: #999999;
 488     text-align: center;
 489     text-decoration: none;
 490   }
 491   .pager .previous a:hover,
 492   .pager .next a:hover {
 493     color: white;
 494     cursor: pointer;
 495     background-color: #666666;
 496   }
 497 }
 498 .tags {
 499   line-height: 30px;
 500   margin-bottom: 25px;
 501 }
 502 .tags a {
 503   text-decoration: none;
 504   color: #999999;
 505   margin-right: 15px;
 506 }
 507 .tags a:hover {
 508   color: #4a4a4a;
 509 }
 510 .tags a::before {
 511   content: "#";
 512 }
 513 .one-tag-list {
 514   margin-bottom: 25px;
 515 }
 516 .one-tag-list .fa-tag {
 517   margin-bottom: 15px;
 518   display: block;
 519   color: #999999;
 520 }
 521 .one-tag-list .post-preview {
 522   padding-left: 2em;
 523 }
 524 .one-tag-list .post-preview a {
 525   cursor: pointer;
 526   text-decoration: none;
 527 }
 528 .one-tag-list .post-preview a .post-title {
 529   margin-bottom: 5px;
 530   line-height: 20px;
 531   cursor: pointer;
 532   margin-top: 0;
 533   color: #101010;
 534   font-size: 18px;
 535   font-weight: 300;
 536   transition: color 0.4s;
 537 }
 538 .one-tag-list .post-preview a .post-title:hover {
 539   color: #4990E2;
 540 }
 541 @media screen and (max-width: 680px) {
 542   .one-tag-list {
 543     margin-bottom: 25px;
 544   }
 545   .one-tag-list .fa-tag {
 546     margin-bottom: 15px;
 547     display: block;
 548     color: #999999;
 549   }
 550   .one-tag-list .post-preview {
 551     padding-left: 2em;
 552   }
 553   .one-tag-list .post-preview a {
 554     cursor: pointer;
 555     text-decoration: none;
 556   }
 557   .one-tag-list .post-preview a .post-title {
 558     font-size: 14px;
 559     font-weight: 300;
 560     text-decoration: none;
 561     line-height: 20px;
 562     color: #4a4a4a;
 563     margin-bottom: 5px;
 564     cursor: pointer;
 565     margin-top: 0;
 566     transition: color 0.4s;
 567   }
 568   .one-tag-list .post-preview a .post-title:hover {
 569     color: #4990E2;
 570   }
 571 }
 572 .post-container {
 573   width: 100%;
 574   height: max-content;
 575   display: flex;
 576   flex-direction: column;
 577 }
 578 .post-container .post-title {
 579   width: 100%;
 580   text-align: center;
 581   line-height: 24px;
 582   margin-top: 0;
 583   margin-bottom: 5px;
 584   color: #101010;
 585   font-size: 20px;
 586   font-weight: 300;
 587 }
 588 .post-container .post-meta {
 589   text-align: center;
 590   margin-top: 0;
 591   margin-bottom: 20px;
 592 }
 593 .post-container .post-meta span,
 594 .post-container .post-meta a {
 595   font-weight: 300;
 596   color: #999999;
 597   font-size: 13px;
 598   text-decoration: none;
 599 }
 600 .post-container .post-meta .attr {
 601   margin-right: 5px;
 602   margin-left: 5px;
 603 }
 604 .post-content {
 605   line-height: 20px;
 606   font-size: 15px;
 607   text-indent: 0;
 608   color: #333333;
 609   font-weight: 300;
 610 }
 611 .post-content blockquote {
 612   border-top: 1px solid #cccccc;
 613   border-bottom: 1px solid #cccccc;
 614   margin-left: 2em;
 615   margin-right: 2em;
 616   padding-left: 0;
 617   padding-right: 0;
 618 }
 619 .post-content blockquote p {
 620   margin-top: 10px;
 621   margin-bottom: 10px;
 622   color: #666666;
 623 }
 624 .post-content a {
 625   text-decoration: none;
 626   color: #4990E2;
 627 }
 628 .post-content p {
 629   color: #404040;
 630   font-size: 14px;
 631   line-height: 30px;
 632   text-indent: 0;
 633   letter-spacing: 1px;
 634 }
 635 .post-content p img {
 636   width: 80%;
 637 }
 638 .post-content ul,
 639 .post-content ol {
 640   padding-left: 2em;
 641 }
 642 .post-content ul li,
 643 .post-content ol li {
 644   list-style: none;
 645   color: #404040;
 646   font-size: 14px;
 647   line-height: 30px;
 648   text-indent: 0;
 649   letter-spacing: 1px;
 650   margin-bottom: 5px;
 651   margin-top: 5px;
 652 }
 653 .post-content ul li:before,
 654 .post-content ol li:before {
 655   content: '• ';
 656 }
 657 .post-content pre {
 658   text-indent: 0;
 659   padding: 10px;
 660 }
 661 .post-content pre code {
 662   line-height: 175%;
 663 }
 664 .post-content h1 {
 665   color: #333333;
 666   margin-top: 20px;
 667   margin-bottom: 20px;
 668 }
 669 .post-content h2 {
 670   color: #333333;
 671   margin-top: 20px;
 672   margin-bottom: 20px;
 673 }
 674 .post-content h3 {
 675   color: #333333;
 676   margin-top: 20px;
 677   margin-bottom: 20px;
 678 }
 679 .post-content h4 {
 680   color: #333333;
 681   margin-top: 20px;
 682   margin-bottom: 20px;
 683 }
 684 .post-content h5 {
 685   color: #333333;
 686   margin-top: 20px;
 687   margin-bottom: 20px;
 688 }
 689 .post-content h6 {
 690   color: #333333;
 691   margin-top: 20px;
 692   margin-bottom: 20px;
 693 }
 694 #comment-container {
 695   text-indent: 0;
 696 }
 697 #lv-container {
 698   text-indent: 0;
 699 }
 700 .post-content li p {
 701   display: inline;
 702 }
 703 .index-about {
 704   text-align: center;
 705   width: 100%;
 706   margin-top: 45px;
 707   margin-bottom: 40px;
 708   opacity: 0;
 709   animation: showBlock 1.6s forwards;
 710 }
 711 .index-about i {
 712   font-size: 15px;
 713   font-family: "italic" !important;
 714   font-weight: 300;
 715   color: #444444;
 716 }
 717 .index-about-mobile {
 718   display: none;
 719 }
 720 .index-container {
 721   justify-content: center;
 722   height: max-content;
 723   position: relative;
 724   width: 1024px;
 725   margin: auto;
 726   display: flex;
 727   flex-direction: row;
 728 }
 729 .index-container .index-left {
 730   width: 240px;
 731 }
 732 .index-container .index-middle {
 733   max-width: 784px;
 734   flex: 1;
 735 }
 736 @media screen and (max-width: 1180px) {
 737   .index-container {
 738     left: 0;
 739     width: 100%;
 740     box-sizing: border-box;
 741     margin: auto;
 742     padding: 0 40px 0 10px;
 743     display: flex;
 744     flex-direction: row;
 745   }
 746   .index-container .index-left {
 747     width: 180px;
 748   }
 749   .index-container .index-middle {
 750     flex: 1;
 751     max-width: calc(100% - 180px);
 752   }
 753 }
 754 @media screen and (max-width: 680px) {
 755   .index-container {
 756     width: 100%;
 757     box-sizing: border-box;
 758     margin: auto;
 759     display: flex;
 760     flex-direction: column;
 761     padding: 0 25px 0 25px;
 762     min-height: 0;
 763   }
 764   .index-container .index-left {
 765     width: 100%;
 766   }
 767   .index-container .index-middle {
 768     max-width: 100%;
 769     flex: 1;
 770   }
 771   .index-about {
 772     display: none;
 773   }
 774   .index-about-mobile {
 775     display: block;
 776     text-align: center;
 777     width: 100%;
 778     margin-top: 0;
 779     margin-bottom: 40px;
 780   }
 781   .index-about-mobile i {
 782     font-size: 15px;
 783     font-family: "italic" !important;
 784     font-weight: 300;
 785     color: #444444;
 786   }
 787 }
 788 .archives-container .one-tag-list .listing-seperator {
 789   font-size: 18px;
 790   color: #999999;
 791 }
 792 .archives-container .one-tag-list ul {
 793   list-style: none;
 794 }
 795 .archives-container .one-tag-list ul li {
 796   display: flex;
 797   align-items: center;
 798   flex-direction: row;
 799   margin-bottom: 10px;
 800 }
 801 .archives-container .one-tag-list ul li span {
 802   color: #999999;
 803   margin-right: 15px;
 804   min-width: 45px;
 805 }
 806 .archives-container .one-tag-list ul li a {
 807   text-decoration: none;
 808   line-height: 20px;
 809   color: #4a4a4a;
 810 }
 811 .archives-container .one-tag-list ul li a span {
 812   color: #4a4a4a;
 813   transition: color 0.4s;
 814 }
 815 .archives-container .one-tag-list ul li a span:hover {
 816   color: #4990E2;
 817 }
 818 @media screen and (max-width: 680px) {
 819   .archives-container .one-tag-list .listing-seperator {
 820     font-size: 18px;
 821     color: #999999;
 822   }
 823   .archives-container .one-tag-list ul {
 824     list-style: none;
 825     padding-left: 1em;
 826   }
 827   .archives-container .one-tag-list ul li {
 828     display: flex;
 829     align-items: center;
 830     flex-direction: row;
 831     margin-bottom: 10px;
 832   }
 833   .archives-container .one-tag-list ul li span {
 834     color: #999999;
 835     margin-right: 15px;
 836     min-width: 45px;
 837     font-size: 14px;
 838   }
 839   .archives-container .one-tag-list ul li i {
 840     font-size: 12px;
 841   }
 842   .archives-container .one-tag-list ul li a {
 843     font-size: 14px;
 844     font-weight: 300;
 845     text-decoration: none;
 846     line-height: 20px;
 847     color: #4a4a4a;
 848   }
 849   .archives-container .one-tag-list ul li a span {
 850     color: #4a4a4a;
 851   }
 852 }
 853 pre,
 854 .highlight {
 855   overflow: auto;
 856   margin: 20px 0;
 857   padding: 0;
 858   font-size: 13px;
 859   color: #4d4d4c;
 860   background: #f7f7f7;
 861   line-height: 1.6;
 862 }
 863 pre,
 864 code {
 865   font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace;
 866 }
 867 code {
 868   padding: 2px 4px;
 869   word-wrap: break-word;
 870   color: #555;
 871   background: #eee;
 872   border-radius: 3px;
 873   font-size: 13px;
 874 }
 875 pre {
 876   padding: 10px;
 877 }
 878 pre code {
 879   padding: 0;
 880   color: #4d4d4c;
 881   background: none;
 882   text-shadow: none;
 883 }
 884 .highlight {
 885   border-radius: 1px;
 886 }
 887 .highlight pre {
 888   border: none;
 889   margin: 0;
 890   padding: 10px 0;
 891 }
 892 .highlight table {
 893   margin: 0;
 894   width: auto;
 895   border: none;
 896 }
 897 .highlight td {
 898   border: none;
 899   padding: 0;
 900 }
 901 .highlight figcaption {
 902   font-size: 1em;
 903   color: #4d4d4c;
 904   line-height: 1em;
 905   margin-bottom: 1em;
 906 }
 907 .highlight figcaption a {
 908   float: right;
 909   color: #4d4d4c;
 910 }
 911 .highlight figcaption a:hover {
 912   border-bottom-color: #4d4d4c;
 913 }
 914 .highlight .gutter pre {
 915   padding-left: 10px;
 916   padding-right: 10px;
 917   color: #869194;
 918   text-align: right;
 919   background-color: #eff2f3;
 920 }
 921 .highlight .code pre {
 922   width: 100%;
 923   padding-left: 10px;
 924   padding-right: 10px;
 925   background-color: #f7f7f7;
 926 }
 927 .highlight .line {
 928   height: 20px;
 929 }
 930 .gutter {
 931   -webkit-user-select: none;
 932   -moz-user-select: none;
 933   -ms-user-select: none;
 934   user-select: none;
 935 }
 936 .gist table {
 937   width: auto;
 938 }
 939 .gist table td {
 940   border: none;
 941 }
 942 pre .deletion {
 943   background: #fdd;
 944 }
 945 pre .addition {
 946   background: #dfd;
 947 }
 948 pre .meta {
 949   color: #8959a8;
 950 }
 951 pre .comment {
 952   color: #8e908c;
 953 }
 954 pre .variable,
 955 pre .attribute,
 956 pre .tag,
 957 pre .regexp,
 958 pre .ruby .constant,
 959 pre .xml .tag .title,
 960 pre .xml .pi,
 961 pre .xml .doctype,
 962 pre .html .doctype,
 963 pre .css .id,
 964 pre .css .class,
 965 pre .css .pseudo {
 966   color: #c82829;
 967 }
 968 pre .number,
 969 pre .preprocessor,
 970 pre .built_in,
 971 pre .literal,
 972 pre .params,
 973 pre .constant,
 974 pre .command {
 975   color: #f5871f;
 976 }
 977 pre .ruby .class .title,
 978 pre .css .rules .attribute,
 979 pre .string,
 980 pre .value,
 981 pre .inheritance,
 982 pre .header,
 983 pre .ruby .symbol,
 984 pre .xml .cdata,
 985 pre .special,
 986 pre .number,
 987 pre .formula {
 988   color: #718c00;
 989 }
 990 pre .title,
 991 pre .css .hexcolor {
 992   color: #3e999f;
 993 }
 994 pre .function,
 995 pre .python .decorator,
 996 pre .python .title,
 997 pre .ruby .function .title,
 998 pre .ruby .title .keyword,
 999 pre .perl .sub,
1000 pre .javascript .title,
1001 pre .coffeescript .title {
1002   color: #4271ae;
1003 }
1004 pre .keyword,
1005 pre .javascript .function {
1006   color: #8959a8;
1007 }
1008 .footer {
1009   width: 100%;
1010   align-items: center;
1011   display: flex;
1012   flex-direction: column;
1013   color: #979797;
1014   margin-bottom: 10px;
1015 }
1016 .footer p {
1017   font-family: "Montserrat", "Helvetica Neue", "Hiragino Sans GB", "LiHei Pro", Arial, sans-serif;
1018   font-size: 14px;
1019   margin-top: 5px;
1020   margin-bottom: 0;
1021   font-weight: 300;
1022 }
1023 .footer p a {
1024   font-weight: 300;
1025   font-family: "Montserrat", "Helvetica Neue", "Hiragino Sans GB", "LiHei Pro", Arial, sans-serif;
1026   cursor: pointer;
1027   color: #333333;
1028 }
1029 .footer p span a {
1030   font-weight: 300;
1031   font-family: "Montserrat", "Helvetica Neue", "Hiragino Sans GB", "LiHei Pro", Arial, sans-serif;
1032   cursor: pointer;
1033   color: #979797;
1034   text-decoration: none;
1035 }
1036 .footer p span a:hover {
1037   color: #333333;
1038 }
1039 .list-inline.text-center {
1040   color: #444444;
1041   font-size: 20px;
1042   padding-left: 0;
1043   margin-bottom: 0;
1044 }
1045 .list-inline.text-center li {
1046   display: inline-block;
1047   margin: 0 2px;
1048   background-color: #979797;
1049   height: 24px;
1050   width: 24px;
1051   border-radius: 12px;
1052   text-align: center;
1053 }
1054 .list-inline.text-center li a {
1055   text-decoration: none;
1056 }
1057 .list-inline.text-center li a span i {
1058   line-height: 20px;
1059   color: white;
1060 }
1061 .list-inline.text-center li:hover {
1062   background-color: #333333;
1063 }
1064 @media screen and (max-width: 680px) {
1065   .footer {
1066     box-sizing: border-box;
1067     padding-left: 20px;
1068     padding-right: 20px;
1069   }
1070   .footer p {
1071     font-family: "Montserrat", "Helvetica Neue", "Hiragino Sans GB", "LiHei Pro", Arial, sans-serif;
1072     font-size: 11px;
1073     margin-top: 5px;
1074     margin-bottom: 0;
1075     font-weight: 300;
1076   }
1077   .footer p span a {
1078     font-size: 11px;
1079     font-weight: 300;
1080     font-family: "Montserrat", "Helvetica Neue", "Hiragino Sans GB", "LiHei Pro", Arial, sans-serif;
1081     cursor: pointer;
1082     color: #979797;
1083     text-decoration: none;
1084   }
1085   .footer p span a:hover {
1086     color: #333333;
1087   }
1088 }
1089 .toc-article {
1090   width: 240px;
1091 }
1092 .toc-article ol {
1093   padding-left: 10px;
1094   cursor: pointer;
1095   font-size: 0;
1096 }
1097 .toc-article li {
1098   font-size: 0;
1099   box-sizing: border-box;
1100   border-left: 2px solid #cccccc;
1101   list-style: none;
1102   padding-left: 10px;
1103 }
1104 .toc-article li a {
1105   display: block;
1106   line-height: 20px;
1107   margin-bottom: 10px;
1108   text-decoration: none;
1109   color: #999999;
1110   font-size: 14px;
1111 }
1112 .toc-article li a span {
1113   word-break: break-all;
1114 }
1115 .toc-article li.active {
1116   border-left: 2px solid #4990E2;
1117 }
1118 .toc-article li.active > a {
1119   color: #4990E2;
1120 }
1121 .toc-article li:hover {
1122   border-left: 2px solid #4990E2;
1123 }
1124 .toc-article li:hover > a {
1125   color: #4990E2;
1126 }
1127 .toc-article > ol > li {
1128   border-left: none !important;
1129 }
1130 .toc-fixed {
1131   position: fixed;
1132   top: 10px;
1133   width: 240px;
1134 }
1135 .toc-fixed::-webkit-scrollbar {
1136   width: 0;
1137 }
1138 .toc-fixed::-webkit-scrollbar-thumb {
1139   -webkit-border-radius: 4px;
1140   border-radius: 2px;
1141 }
1142 @media screen and (max-width: 1180px) {
1143   .toc-article {
1144     display: none;
1145   }
1146 }