docs/qmk.css

   1 * {
   2   -webkit-font-smoothing: antialiased;
   3   -webkit-overflow-scrolling: touch;
   4   -webkit-tap-highlight-color: rgba(0,0,0,0);
   5   -webkit-text-size-adjust: none;
   6   -webkit-touch-callout: none;
   7   -webkit-box-sizing: border-box;
   8           box-sizing: border-box;
   9 }
  10 body:not(.ready) {
  11   overflow: hidden;
  12 }
  13 body:not(.ready) [data-cloak],
  14 body:not(.ready) .app-nav,
  15 body:not(.ready) > nav {
  16   display: none;
  17 }
  18 div#app {
  19   font-size: 30px;
  20   font-weight: lighter;
  21   margin: 40vh auto;
  22   text-align: center;
  23 }
  24 div#app:empty::before {
  25   content: 'Loading...';
  26 }
  27 .emoji {
  28   height: 1.2rem;
  29   vertical-align: middle;
  30 }
  31 .progress {
  32   background-color: var(--theme-color, #ea6f5a);
  33   height: 2px;
  34   left: 0px;
  35   position: fixed;
  36   right: 0px;
  37   top: 0px;
  38   -webkit-transition: width 0.2s, opacity 0.4s;
  39   transition: width 0.2s, opacity 0.4s;
  40   width: 0%;
  41   z-index: 999999;
  42 }
  43 .search a:hover {
  44   color: var(--theme-color, #ea6f5a);
  45 }
  46 .search .search-keyword {
  47   color: var(--theme-color, #ea6f5a);
  48   font-style: normal;
  49   font-weight: bold;
  50 }
  51 html,
  52 body {
  53   height: 100%;
  54 }
  55 body {
  56   -moz-osx-font-smoothing: grayscale;
  57   -webkit-font-smoothing: antialiased;
  58   color: #efefef;
  59   font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  60   font-size: 15px;
  61   letter-spacing: 0;
  62   margin: 0;
  63   overflow-x: hidden;
  64 }
  65 img {
  66   max-width: 100%;
  67 }
  68 a[disabled] {
  69   cursor: not-allowed;
  70   opacity: 0.6;
  71 }
  72 kbd {
  73   border: solid 1px #ccc;
  74   border-radius: 3px;
  75   display: inline-block;
  76   font-size: 12px !important;
  77   line-height: 12px;
  78   margin-bottom: 3px;
  79   padding: 3px 5px;
  80   vertical-align: middle;
  81 }
  82 .task-list-item {
  83   list-style-type: none;
  84 }
  85 li input[type='checkbox'] {
  86   margin: 0 0.2em 0.25em -1.6em;
  87   vertical-align: middle;
  88 }
  89 .app-nav {
  90   margin: 25px 60px 0 0;
  91   position: absolute;
  92   right: 0;
  93   text-align: right;
  94   z-index: 10;
  95 /* navbar dropdown */
  96 }
  97 .app-nav.no-badge {
  98   margin-right: 25px;
  99 }
 100 .app-nav p {
 101   margin: 0;
 102 }
 103 .app-nav > a {
 104   margin: 0 1rem;
 105   padding: 5px 0;
 106 }
 107 .app-nav ul,
 108 .app-nav li {
 109   display: inline-block;
 110   list-style: none;
 111   margin: 0;
 112 }
 113 .app-nav a {
 114   color: inherit;
 115   font-size: 16px;
 116   text-decoration: none;
 117   -webkit-transition: color 0.3s;
 118   transition: color 0.3s;
 119 }
 120 .app-nav a:hover {
 121   color: var(--theme-color, #ea6f5a);
 122 }
 123 .app-nav a.active {
 124   border-bottom: 2px solid var(--theme-color, #ea6f5a);
 125   color: var(--theme-color, #ea6f5a);
 126 }
 127 .app-nav li {
 128   display: inline-block;
 129   margin: 0 1rem;
 130   padding: 5px 0;
 131   position: relative;
 132 }
 133 .app-nav li ul {
 134   background-color: #fff;
 135   border: 1px solid #ddd;
 136   border-bottom-color: #ccc;
 137   border-radius: 4px;
 138   -webkit-box-sizing: border-box;
 139           box-sizing: border-box;
 140   display: none;
 141   max-height: calc(100vh - 61px);
 142   overflow-y: auto;
 143   padding: 10px 0;
 144   position: absolute;
 145   right: -15px;
 146   text-align: left;
 147   top: 100%;
 148   white-space: nowrap;
 149 }
 150 .app-nav li ul li {
 151   display: block;
 152   font-size: 14px;
 153   line-height: 1rem;
 154   margin: 0;
 155   margin: 8px 14px;
 156   white-space: nowrap;
 157 }
 158 .app-nav li ul a {
 159   display: block;
 160   font-size: inherit;
 161   margin: 0;
 162   padding: 0;
 163 }
 164 .app-nav li ul a.active {
 165   border-bottom: 0;
 166 }
 167 .app-nav li:hover ul {
 168   display: block;
 169 }
 170 .github-corner {
 171   border-bottom: 0;
 172   position: fixed;
 173   right: 0;
 174   text-decoration: none;
 175   top: 0;
 176   z-index: 1;
 177 }
 178 .github-corner:hover .octo-arm {
 179   -webkit-animation: octocat-wave 560ms ease-in-out;
 180           animation: octocat-wave 560ms ease-in-out;
 181 }
 182 .github-corner svg {
 183   color: #3f3f3f;
 184   fill: var(--theme-color, #ea6f5a);
 185   height: 80px;
 186   width: 80px;
 187 }
 188 main {
 189   display: block;
 190   position: relative;
 191   width: 100vw;
 192   height: 100%;
 193   z-index: 0;
 194 }
 195 main.hidden {
 196   display: none;
 197 }
 198 .anchor {
 199   display: inline-block;
 200   text-decoration: none;
 201   -webkit-transition: all 0.3s;
 202   transition: all 0.3s;
 203 }
 204 .anchor span {
 205   color: #c8c8c8;
 206 }
 207 .anchor:hover {
 208   text-decoration: underline;
 209 }
 210 .sidebar {
 211   border-right: 1px solid rgba(0,0,0,0.07);
 212   overflow-y: auto;
 213   padding: 40px 0 0;
 214   position: absolute;
 215   top: 0;
 216   bottom: 0;
 217   left: 0;
 218   -webkit-transition: -webkit-transform 250ms ease-out;
 219   transition: -webkit-transform 250ms ease-out;
 220   transition: transform 250ms ease-out;
 221   transition: transform 250ms ease-out, -webkit-transform 250ms ease-out;
 222   width: 300px;
 223   z-index: 20;
 224 }
 225 .sidebar > h1 {
 226   margin: 0 auto 1rem;
 227   font-size: 1.5rem;
 228   font-weight: 300;
 229   text-align: center;
 230 }
 231 .sidebar > h1 a {
 232   color: inherit;
 233   text-decoration: none;
 234 }
 235 .sidebar > h1 .app-nav {
 236   display: block;
 237   position: static;
 238 }
 239 .sidebar .sidebar-nav {
 240   line-height: 2em;
 241   padding-bottom: 40px;
 242 }
 243 .sidebar li.collapse .app-sub-sidebar {
 244   display: none;
 245 }
 246 .sidebar ul {
 247   margin: 0;
 248   padding: 0;
 249 }
 250 .sidebar li > p {
 251   font-weight: 700;
 252   margin: 0;
 253 }
 254 .sidebar ul,
 255 .sidebar ul li {
 256   list-style: none;
 257 }
 258 .sidebar ul li a {
 259   border-bottom: none;
 260   display: block;
 261 }
 262 .sidebar ul li ul {
 263   padding-left: 20px;
 264 }
 265 .sidebar::-webkit-scrollbar {
 266   width: 4px;
 267 }
 268 .sidebar::-webkit-scrollbar-thumb {
 269   background: transparent;
 270   border-radius: 4px;
 271 }
 272 .sidebar:hover::-webkit-scrollbar-thumb {
 273   background: rgba(136,136,136,0.4);
 274 }
 275 .sidebar:hover::-webkit-scrollbar-track {
 276   background: rgba(136,136,136,0.1);
 277 }
 278 .sidebar-toggle {
 279   background-color: transparent;
 280   background-color: rgba(63,63,63,0.8);
 281   border: 0;
 282   outline: none;
 283   padding: 10px;
 284   position: absolute;
 285   bottom: 0;
 286   left: 0;
 287   text-align: center;
 288   -webkit-transition: opacity 0.3s;
 289   transition: opacity 0.3s;
 290   width: 284px;
 291   z-index: 30;
 292 }
 293 .sidebar-toggle .sidebar-toggle-button:hover {
 294   opacity: 0.4;
 295 }
 296 .sidebar-toggle span {
 297   background-color: var(--theme-color, #ea6f5a);
 298   display: block;
 299   margin-bottom: 4px;
 300   width: 16px;
 301   height: 2px;
 302 }
 303 body.sticky .sidebar,
 304 body.sticky .sidebar-toggle {
 305   position: fixed;
 306 }
 307 .content {
 308   padding-top: 60px;
 309   position: absolute;
 310   top: 0;
 311   right: 0;
 312   bottom: 0;
 313   left: 300px;
 314   -webkit-transition: left 250ms ease;
 315   transition: left 250ms ease;
 316 }
 317 .markdown-section {
 318   margin: 0 auto;
 319   max-width: 800px;
 320   padding: 30px 15px 40px 15px;
 321   position: relative;
 322 }
 323 .markdown-section > * {
 324   -webkit-box-sizing: border-box;
 325           box-sizing: border-box;
 326   font-size: inherit;
 327 }
 328 .markdown-section > :first-child {
 329   margin-top: 0 !important;
 330 }
 331 .markdown-section hr {
 332   border: none;
 333   border-bottom: 1px solid #eee;
 334   margin: 2em 0;
 335 }
 336 .markdown-section iframe {
 337   border: 1px solid #eee;
 338 }
 339 .markdown-section table {
 340   border-collapse: collapse;
 341   border-spacing: 0;
 342   display: block;
 343   margin-bottom: 1rem;
 344   overflow: auto;
 345   width: 100%;
 346 }
 347 .markdown-section th {
 348   border: 1px solid #ddd;
 349   font-weight: bold;
 350   padding: 6px 13px;
 351 }
 352 .markdown-section td {
 353   border: 1px solid #ddd;
 354   padding: 6px 13px;
 355 }
 356 .markdown-section tr {
 357   border-top: 1px solid #ccc;
 358 }
 359 .markdown-section tr:nth-child(2n) {
 360   background-color: #555555;
 361 }
 362 .markdown-section p.tip {
 363   background-color: #555555;
 364   border-bottom-right-radius: 2px;
 365   border-left: 4px solid #f66;
 366   border-top-right-radius: 2px;
 367   margin: 2em 0;
 368   padding: 12px 24px 12px 30px;
 369   position: relative;
 370 }
 371 .markdown-section p.tip:before {
 372   background-color: #f66;
 373   border-radius: 100%;
 374   color: #3f3f3f;
 375   content: '!';
 376   font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
 377   font-size: 14px;
 378   font-weight: bold;
 379   left: -12px;
 380   line-height: 20px;
 381   position: absolute;
 382   height: 20px;
 383   width: 20px;
 384   text-align: center;
 385   top: 14px;
 386 }
 387 .markdown-section p.tip code {
 388   background-color: #efefef;
 389 }
 390 .markdown-section p.tip em {
 391   color: #c8c8c8;
 392 }
 393 .markdown-section p.warn {
 394   background: rgba(234,111,90,0.1);
 395   border-radius: 2px;
 396   padding: 1rem;
 397 }
 398 body.close .sidebar {
 399   -webkit-transform: translateX(-300px);
 400           transform: translateX(-300px);
 401 }
 402 body.close .sidebar-toggle {
 403   width: auto;
 404 }
 405 body.close .content {
 406   left: 0;
 407 }
 408 @media print {
 409   .github-corner,
 410   .sidebar-toggle,
 411   .sidebar,
 412   .app-nav {
 413     display: none;
 414   }
 415 }
 416 @media screen and (max-width: 768px) {
 417   .github-corner,
 418   .sidebar-toggle,
 419   .sidebar {
 420     position: fixed;
 421   }
 422   .app-nav {
 423     margin-top: 16px;
 424   }
 425   .app-nav li ul {
 426     top: 30px;
 427   }
 428   main {
 429     height: auto;
 430     overflow-x: hidden;
 431   }
 432   .sidebar {
 433     left: -300px;
 434     -webkit-transition: -webkit-transform 250ms ease-out;
 435     transition: -webkit-transform 250ms ease-out;
 436     transition: transform 250ms ease-out;
 437     transition: transform 250ms ease-out, -webkit-transform 250ms ease-out;
 438   }
 439   .content {
 440     left: 0;
 441     max-width: 100vw;
 442     position: static;
 443     padding-top: 20px;
 444     -webkit-transition: -webkit-transform 250ms ease;
 445     transition: -webkit-transform 250ms ease;
 446     transition: transform 250ms ease;
 447     transition: transform 250ms ease, -webkit-transform 250ms ease;
 448   }
 449   .app-nav,
 450   .github-corner {
 451     -webkit-transition: -webkit-transform 250ms ease-out;
 452     transition: -webkit-transform 250ms ease-out;
 453     transition: transform 250ms ease-out;
 454     transition: transform 250ms ease-out, -webkit-transform 250ms ease-out;
 455   }
 456   .sidebar-toggle {
 457     background-color: transparent;
 458     width: auto;
 459     padding: 30px 30px 10px 10px;
 460   }
 461   body.close .sidebar {
 462     -webkit-transform: translateX(300px);
 463             transform: translateX(300px);
 464   }
 465   body.close .sidebar-toggle {
 466     background-color: rgba(63,63,63,0.8);
 467     -webkit-transition: 1s background-color;
 468     transition: 1s background-color;
 469     width: 284px;
 470     padding: 10px;
 471   }
 472   body.close .content {
 473     -webkit-transform: translateX(300px);
 474             transform: translateX(300px);
 475   }
 476   body.close .app-nav,
 477   body.close .github-corner {
 478     display: none;
 479   }
 480   .github-corner:hover .octo-arm {
 481     -webkit-animation: none;
 482             animation: none;
 483   }
 484   .github-corner .octo-arm {
 485     -webkit-animation: octocat-wave 560ms ease-in-out;
 486             animation: octocat-wave 560ms ease-in-out;
 487   }
 488 }
 489 @-webkit-keyframes octocat-wave {
 490   0%, 100% {
 491     -webkit-transform: rotate(0);
 492             transform: rotate(0);
 493   }
 494   20%, 60% {
 495     -webkit-transform: rotate(-25deg);
 496             transform: rotate(-25deg);
 497   }
 498   40%, 80% {
 499     -webkit-transform: rotate(10deg);
 500             transform: rotate(10deg);
 501   }
 502 }
 503 @keyframes octocat-wave {
 504   0%, 100% {
 505     -webkit-transform: rotate(0);
 506             transform: rotate(0);
 507   }
 508   20%, 60% {
 509     -webkit-transform: rotate(-25deg);
 510             transform: rotate(-25deg);
 511   }
 512   40%, 80% {
 513     -webkit-transform: rotate(10deg);
 514             transform: rotate(10deg);
 515   }
 516 }
 517 section.cover {
 518   -webkit-box-align: center;
 519       -ms-flex-align: center;
 520           align-items: center;
 521   background-position: center center;
 522   background-repeat: no-repeat;
 523   background-size: cover;
 524   height: 100vh;
 525   display: none;
 526 }
 527 section.cover.show {
 528   display: -webkit-box;
 529   display: -ms-flexbox;
 530   display: flex;
 531 }
 532 section.cover.has-mask .mask {
 533   background-color: #3f3f3f;
 534   opacity: 0.8;
 535   position: absolute;
 536   top: 0;
 537   height: 100%;
 538   width: 100%;
 539 }
 540 section.cover .cover-main {
 541   -webkit-box-flex: 1;
 542       -ms-flex: 1;
 543           flex: 1;
 544   margin: -20px 16px 0;
 545   text-align: center;
 546   z-index: 1;
 547 }
 548 section.cover a {
 549   color: inherit;
 550   text-decoration: none;
 551 }
 552 section.cover a:hover {
 553   text-decoration: none;
 554 }
 555 section.cover p {
 556   line-height: 1.5rem;
 557   margin: 1em 0;
 558 }
 559 section.cover h1 {
 560   color: inherit;
 561   font-size: 2.5rem;
 562   font-weight: 300;
 563   margin: 0.625rem 0 2.5rem;
 564   position: relative;
 565   text-align: center;
 566 }
 567 section.cover h1 a {
 568   display: block;
 569 }
 570 section.cover h1 small {
 571   bottom: -0.4375rem;
 572   font-size: 1rem;
 573   position: absolute;
 574 }
 575 section.cover blockquote {
 576   font-size: 1.5rem;
 577   text-align: center;
 578 }
 579 section.cover ul {
 580   line-height: 1.8;
 581   list-style-type: none;
 582   margin: 1em auto;
 583   max-width: 500px;
 584   padding: 0;
 585 }
 586 section.cover .cover-main > p:last-child a {
 587   border-color: var(--theme-color, #ea6f5a);
 588   border-radius: 2rem;
 589   border-style: solid;
 590   border-width: 1px;
 591   -webkit-box-sizing: border-box;
 592           box-sizing: border-box;
 593   color: var(--theme-color, #ea6f5a);
 594   display: inline-block;
 595   font-size: 1.05rem;
 596   letter-spacing: 0.1rem;
 597   margin: 0.5rem 1rem;
 598   padding: 0.75em 2rem;
 599   text-decoration: none;
 600   -webkit-transition: all 0.15s ease;
 601   transition: all 0.15s ease;
 602 }
 603 section.cover .cover-main > p:last-child a:last-child {
 604   background-color: var(--theme-color, #ea6f5a);
 605   color: #fff;
 606 }
 607 section.cover .cover-main > p:last-child a:last-child:hover {
 608   color: inherit;
 609   opacity: 0.8;
 610 }
 611 section.cover .cover-main > p:last-child a:hover {
 612   color: inherit;
 613 }
 614 section.cover blockquote > p > a {
 615   border-bottom: 2px solid var(--theme-color, #ea6f5a);
 616   -webkit-transition: color 0.3s;
 617   transition: color 0.3s;
 618 }
 619 section.cover blockquote > p > a:hover {
 620   color: var(--theme-color, #ea6f5a);
 621 }
 622 body {
 623   background-color: #3f3f3f;
 624 }
 625 /* sidebar */
 626 .sidebar {
 627   background-color: #3f3f3f;
 628   color: #c8c8c8;
 629 }
 630 .sidebar li {
 631   margin: 6px 15px;
 632 }
 633 .sidebar ul li a {
 634   color: #c8c8c8;
 635   font-size: 14px;
 636   overflow: hidden;
 637   text-decoration: none;
 638   text-overflow: ellipsis;
 639   white-space: nowrap;
 640 }
 641 .sidebar ul li a:hover {
 642   text-decoration: underline;
 643 }
 644 .sidebar ul li ul {
 645   padding: 0;
 646 }
 647 .sidebar ul li.active > a {
 648   color: var(--theme-color, #ea6f5a);
 649   font-weight: 600;
 650 }
 651 /* markdown content found on pages */
 652 .markdown-section h1,
 653 .markdown-section h2,
 654 .markdown-section h3,
 655 .markdown-section h4,
 656 .markdown-section strong {
 657   color: #657b83;
 658   font-weight: 600;
 659 }
 660 .markdown-section a {
 661   color: var(--theme-color, #ea6f5a);
 662   font-weight: 600;
 663 }
 664 .markdown-section h1 {
 665   font-size: 2rem;
 666   margin: 0 0 1rem;
 667 }
 668 .markdown-section h2 {
 669   font-size: 1.75rem;
 670   margin: 45px 0 0.8rem;
 671 }
 672 .markdown-section h3 {
 673   font-size: 1.5rem;
 674   margin: 40px 0 0.6rem;
 675 }
 676 .markdown-section h4 {
 677   font-size: 1.25rem;
 678 }
 679 .markdown-section h5 {
 680   font-size: 1rem;
 681 }
 682 .markdown-section h6 {
 683   color: #777;
 684   font-size: 1rem;
 685 }
 686 .markdown-section figure,
 687 .markdown-section p,
 688 .markdown-section ul,
 689 .markdown-section ol {
 690   margin: 1.2em 0;
 691 }
 692 .markdown-section p,
 693 .markdown-section ul,
 694 .markdown-section ol {
 695   line-height: 1.6rem;
 696   word-spacing: 0.05rem;
 697 }
 698 .markdown-section ul,
 699 .markdown-section ol {
 700   padding-left: 1.5rem;
 701 }
 702 .markdown-section blockquote {
 703   border-left: 4px solid var(--theme-color, #ea6f5a);
 704   color: #858585;
 705   margin: 2em 0;
 706   padding-left: 20px;
 707 }
 708 .markdown-section blockquote p {
 709   font-weight: 600;
 710   margin-left: 0;
 711 }
 712 .markdown-section iframe {
 713   margin: 1em 0;
 714 }
 715 .markdown-section em {
 716   color: #7f8c8d;
 717 }
 718 .markdown-section code {
 719   background-color: #282828;
 720   border-radius: 2px;
 721   color: #aaaaaa;
 722   font-family: 'Roboto Mono', Monaco, courier, monospace;
 723   font-size: 0.8rem;
 724   margin: 0 2px;
 725   padding: 3px 5px;
 726   white-space: pre-wrap;
 727 }
 728 .markdown-section pre {
 729   -moz-osx-font-smoothing: initial;
 730   -webkit-font-smoothing: initial;
 731   background-color: #282828;
 732   font-family: 'Roboto Mono', Monaco, courier, monospace;
 733   line-height: 1.5rem;
 734   margin: 1.2em 0;
 735   overflow: auto;
 736   padding: 0 1.4rem;
 737   position: relative;
 738   word-wrap: normal;
 739 }
 740 /* code highlight */
 741 .token.comment,
 742 .token.prolog,
 743 .token.doctype,
 744 .token.cdata {
 745   color: #8e908c;
 746 }
 747 .token.namespace {
 748   opacity: 0.7;
 749 }
 750 .token.boolean,
 751 .token.number {
 752   color: #c76b29;
 753 }
 754 .token.punctuation {
 755   color: #525252;
 756 }
 757 .token.property {
 758   color: #c08b30;
 759 }
 760 .token.tag {
 761   color: #2973b7;
 762 }
 763 .token.string {
 764   color: var(--theme-color, #ea6f5a);
 765 }
 766 .token.selector {
 767   color: #6679cc;
 768 }
 769 .token.attr-name {
 770   color: #2973b7;
 771 }
 772 .token.entity,
 773 .token.url,
 774 .language-css .token.string,
 775 .style .token.string {
 776   color: #22a2c9;
 777 }
 778 .token.attr-value,
 779 .token.control,
 780 .token.directive,
 781 .token.unit {
 782   color: var(--theme-color, #ea6f5a);
 783 }
 784 .token.keyword {
 785   color: #e96900;
 786 }
 787 .token.statement,
 788 .token.regex,
 789 .token.atrule {
 790   color: #22a2c9;
 791 }
 792 .token.placeholder,
 793 .token.variable {
 794   color: #3d8fd1;
 795 }
 796 .token.deleted {
 797   text-decoration: line-through;
 798 }
 799 .token.inserted {
 800   border-bottom: 1px dotted #202746;
 801   text-decoration: none;
 802 }
 803 .token.italic {
 804   font-style: italic;
 805 }
 806 .token.important,
 807 .token.bold {
 808   font-weight: bold;
 809 }
 810 .token.important {
 811   color: #c94922;
 812 }
 813 .token.entity {
 814   cursor: help;
 815 }
 816 .markdown-section pre > code {
 817   -moz-osx-font-smoothing: initial;
 818   -webkit-font-smoothing: initial;
 819   background-color: #282828;
 820   border-radius: 2px;
 821   color: #657b83;
 822   display: block;
 823   font-family: 'Roboto Mono', Monaco, courier, monospace;
 824   font-size: 0.8rem;
 825   line-height: inherit;
 826   margin: 0 2px;
 827   max-width: inherit;
 828   overflow: inherit;
 829   padding: 2.2em 5px;
 830   white-space: inherit;
 831 }
 832 .markdown-section code::after,
 833 .markdown-section code::before {
 834   letter-spacing: 0.05rem;
 835 }
 836 code .token {
 837   -moz-osx-font-smoothing: initial;
 838   -webkit-font-smoothing: initial;
 839   min-height: 1.5rem;
 840 }
 841 pre::after {
 842   color: #ccc;
 843   content: attr(data-lang);
 844   font-size: 0.6rem;
 845   font-weight: 600;
 846   height: 15px;
 847   line-height: 15px;
 848   padding: 5px 10px 0;
 849   position: absolute;
 850   right: 0;
 851   text-align: right;
 852   top: 0;
 853 }
 854 .markdown-section p.tip {
 855   background-color: #282828;
 856   color: #657b83;
 857 }
 858 input[type='search'] {
 859   background: #4f4f4f;
 860   border-color: #4f4f4f;
 861   color: #c8c8c8;
 862 }