styles/pure-custom.css

   1 html, button, input, select, textarea,
   2 .pure-g [class *= "pure-u"] {
   3     font-family: "proxima-nova", sans-serif;
   4 }
   5
   6
   7 /* --------------------------
   8  * Element Styles
   9  * --------------------------
  10 */
  11
  12 body {
  13     min-width: 320px;
  14     color: #777;
  15     line-height: 1.6;
  16 }
  17
  18 h1, h2, h3, h4, h5, h6 {
  19     font-weight: bold;
  20     color: rgb(75, 75, 75);
  21 }
  22 h3 {
  23     font-size: 1.25em;
  24 }
  25 h4 {
  26     font-size: 1.125em;
  27 }
  28
  29 a {
  30     color: #3b8bba; /* block-background-text-normal */
  31     text-decoration: none;
  32 }
  33
  34 a:visited {
  35     color: #265778; /* block-normal-text-normal */
  36 }
  37
  38 dt {
  39     font-weight: bold;
  40 }
  41 dd {
  42     margin: 0 0 10px 0;
  43 }
  44
  45 aside {
  46     background: #1f8dd6; /* same color as selected state on site menu */
  47     padding: 0.3em 1em;
  48     border-radius: 3px;
  49     color: #fff;
  50 }
  51
  52 aside a, aside a:visited {
  53     color: rgb(169, 226, 255);
  54 }
  55
  56 .fa {
  57     float: right;
  58     padding: 0.5em;
  59 }
  60
  61 .home-menu {
  62     background-color: #323b44 !important;
  63     vertical-align: middle;
  64 }
  65
  66 /* --------------------------
  67  * Layout Styles
  68  * --------------------------
  69 */
  70
  71 /* Navigation Push Styles */
  72 #layout {
  73     position: relative;
  74     padding-left: 0;
  75     top: 20px;
  76 }
  77     #layout.active {
  78         position: relative;
  79         left: 180px;
  80     }
  81         #layout.active #menu {
  82             left: 180px;
  83             width: 180px;
  84         }
  85
  86 #layout #main {
  87     padding: 1em 1em 1em 1em;
  88 }
  89 /* Apply the .box class on the immediate parent of any grid element (pure-u-*) to apply some padding. */
  90 .l-box {
  91     padding: 1em;
  92 }
  93
  94 .l-wrap {
  95     margin-left: auto;
  96     margin-right: auto;
  97 }
  98 .content .l-wrap {
  99     margin-left: -1em;
 100     margin-right: -1em;
 101 }
 102
 103
 104 /* --------------------------
 105  * Header Module Styles
 106  * --------------------------
 107 */
 108
 109 .header {
 110      font-family: "omnes-pro", sans-serif;
 111      max-width: 768px;
 112      margin: 0 auto;
 113      padding: 1em;
 114      text-align: center;
 115      border-bottom: 1px solid #eee;
 116  }
 117     .header h1 {
 118         font-size: 300%;
 119         font-weight: 100;
 120         margin: 0;
 121     }
 122      .header h2 {
 123         font-size: 125%;
 124         font-weight: 100;
 125         line-height: 1.5;
 126         margin: 0;
 127         color: #666;
 128     }
 129
 130
 131  /* --------------------------
 132   * Content Module Styles
 133   * --------------------------
 134  */
 135
 136 /* The content div is placed as a wrapper around all the docs */
 137 .content {
 138     margin-left: auto;
 139     margin-right: auto;
 140     padding-left: 1em;
 141     padding-right: 1em;
 142     max-width: 768px;
 143 }
 144
 145     .content .content-subhead {
 146         margin: 2em 0 1em 0;
 147         font-weight: 300;
 148         color: #888;
 149         position: relative;
 150     }
 151
 152     .content .content-spaced {
 153         line-height: 1.8;
 154     }
 155
 156     .content .content-quote {
 157         font-family: "Georgia", serif;
 158         color: #666;
 159         font-style: italic;
 160         line-height: 1.8;
 161         border-left: 5px solid #ddd;
 162         padding-left: 1.5em;
 163     }
 164
 165     .content-link {
 166         position: absolute;
 167         top: 0;
 168         right: 0;
 169         display: block;
 170         height: 100%;
 171         width: 20px;
 172         background: transparent url('/img/link-icon.png') no-repeat center center;
 173         background-size: 20px 20px;
 174     }
 175
 176     @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
 177         .content-link {
 178             background-image: url('/img/link-icon@2x.png');
 179         }
 180     }
 181
 182
 183 /* --------------------------
 184  * Code Styles
 185  * --------------------------
 186 */
 187
 188 pre,
 189 code {
 190     font-family: Consolas, 'Liberation Mono', Courier, monospace;
 191     color: #333;
 192     background: rgb(250, 250, 250);
 193 }
 194
 195 code {
 196     padding: 0.2em 0.4em;
 197     white-space: nowrap;
 198 }
 199 .content p code {
 200     font-size: 90%;
 201 }
 202
 203 .code {
 204     margin-left: -1em;
 205     margin-right: -1em;
 206     padding: 1em;
 207     border: 1px solid #eee;
 208     border-left-width: 0;
 209     border-right-width: 0;
 210     overflow-x: auto;
 211     -webkit-overflow-scrolling: touch;
 212 }
 213 .code code {
 214     font-size: 95%;
 215     white-space: pre;
 216     word-wrap: normal;
 217     padding: 0;
 218     background: none;
 219 }
 220 .code-wrap code {
 221     white-space: pre-wrap;
 222     word-wrap: break-word;
 223 }
 224
 225 /* --------------------------
 226  * Footer Module Styles
 227  * --------------------------
 228 */
 229
 230 .footer {
 231     font-size: 87.5%;
 232     border-top: 1px solid #eee;
 233     margin-top: 3.4286em;
 234     padding: 1.1429em;
 235     background: rgb(250, 250, 250);
 236 }
 237
 238 .legal {
 239     line-height: 1.6;
 240     text-align: center;
 241     margin: 0 auto;
 242 }
 243
 244     .legal-license {
 245         margin-top: 0;
 246     }
 247     .legal-links {
 248         list-style: none;
 249         padding: 0;
 250         margin-bottom: 0;
 251     }
 252     .legal-copyright {
 253         margin-top: 0;
 254         margin-bottom: 0;
 255     }
 256
 257
 258 /* --------------------------
 259  * Main Navigation Bar Styles
 260  * --------------------------
 261 */
 262
 263 /* Add transition to containers so they can push in and out */
 264 #layout,
 265 #menu,
 266 .menu-link {
 267     -webkit-transition: all 0.2s ease-out;
 268     -moz-transition: all 0.2s ease-out;
 269     -ms-transition: all 0.2s ease-out;
 270     -o-transition: all 0.2s ease-out;
 271     transition: all 0.2s ease-out;
 272 }
 273
 274 #layout.active .menu-link {
 275     left: 180px;
 276 }
 277
 278 #menu {
 279     margin-left: -180px; /* "#menu" width */
 280     width: 180px;
 281     position: fixed;
 282     top: 48px;
 283     left: 0;
 284     bottom: 0;
 285     z-index: 1000; /* so the menu or its navicon stays above all content */
 286     background: #191818;
 287     overflow-y: auto;
 288     -webkit-overflow-scrolling: touch;
 289 }
 290     #menu a {
 291         color: #999;
 292         border: none;
 293         white-space: normal;
 294         padding: 0.625em 1em;
 295     }
 296
 297     #menu .pure-menu-open {
 298         background: transparent;
 299         border: 0;
 300     }
 301
 302     #menu .pure-menu ul {
 303         border: none;
 304         background: transparent;
 305     }
 306
 307     #menu .pure-menu ul,
 308     #menu .pure-menu .menu-item-divided {
 309         border-top: 1px solid #333;
 310     }
 311
 312         #menu .pure-menu li a:hover,
 313         #menu .pure-menu li a:focus {
 314             background: #333;
 315         }
 316
 317     .menu-link {
 318         position: fixed;
 319         display: block; /* show this only on small screens */
 320         top: 0;
 321         left: 0; /* "#menu width" */
 322         background: #000;
 323         background: rgba(0,0,0,0.7);
 324         font-size: 11px; /* change this value to increase/decrease button size */
 325         z-index: 10;
 326         width: 4em;
 327         height: 4em;
 328         padding: 1em;
 329     }
 330
 331         .menu-link:hover,
 332         .menu-link:focus {
 333             background: #000;
 334         }
 335
 336         .menu-link span {
 337             position: relative;
 338             display: block;
 339             margin-top: 0.9em;
 340         }
 341
 342         .menu-link span,
 343         .menu-link span:before,
 344         .menu-link span:after {
 345             background-color: #fff;
 346             width: 100%;
 347             height: .2em;
 348             -webkit-transition: all 0.4s;
 349                -moz-transition: all 0.4s;
 350                 -ms-transition: all 0.4s;
 351                  -o-transition: all 0.4s;
 352                     transition: all 0.4s;
 353         }
 354
 355             .menu-link span:before,
 356             .menu-link span:after {
 357                 position: absolute;
 358                 top: -.55em;
 359                 content: " ";
 360             }
 361
 362             .menu-link span:after {
 363                 top: .55em;
 364             }
 365
 366         .menu-link.active span {
 367             background: transparent;
 368         }
 369
 370             .menu-link.active span:before {
 371                 -webkit-transform: rotate(45deg) translate(.5em, .4em);
 372                    -moz-transform: rotate(45deg) translate(.5em, .4em);
 373                     -ms-transform: rotate(45deg) translate(.5em, .4em);
 374                      -o-transform: rotate(45deg) translate(.5em, .4em);
 375                         transform: rotate(45deg) translate(.5em, .4em);
 376             }
 377
 378             .menu-link.active span:after {
 379                 -webkit-transform: rotate(-45deg) translate(.4em, -.3em);
 380                    -moz-transform: rotate(-45deg) translate(.4em, -.3em);
 381                     -ms-transform: rotate(-45deg) translate(.4em, -.3em);
 382                      -o-transform: rotate(-45deg) translate(.4em, -.3em);
 383                         transform: rotate(-45deg) translate(.4em, -.3em);
 384             }
 385
 386     #menu .pure-menu-heading {
 387         font-size: 125%;
 388         font-weight: 300;
 389         letter-spacing: 0.1em;
 390         color: #fff;
 391         margin-top: 0;
 392         padding: 0.5em 0.8em;
 393     }
 394     #menu .pure-menu-heading:hover,
 395     #menu .pure-menu-heading:focus {
 396         color: #999;
 397     }
 398
 399     #menu .pure-menu-selected {
 400         background: #1f8dd6;
 401     }
 402
 403         #menu .pure-menu-selected a {
 404             color: #fff;
 405         }
 406
 407         #menu li.pure-menu-selected a:hover,
 408         #menu li.pure-menu-selected a:focus {
 409             background: none;
 410         }
 411
 412
 413
 414 /* ---------------------
 415  * Smaller Module Styles
 416  * ---------------------
 417 */
 418
 419 .pure-img-responsive {
 420     max-width: 100%;
 421     height: auto;
 422 }
 423
 424 .pure-paginator .pure-button {
 425     -webkit-box-sizing: content-box;
 426     -moz-box-sizing: content-box;
 427     box-sizing: content-box;
 428 }
 429
 430 .pure-button {
 431     font-family: inherit;
 432 }
 433 a.pure-button-primary {
 434     color: white;
 435 }
 436
 437
 438 /* green call to action button class */
 439 .notice {
 440     background-color: #61B842;
 441     color: white;
 442 }
 443
 444 .muted {
 445     color: #ccc;
 446 }
 447
 448
 449
 450 /* -------------
 451  * Table Styles
 452  * -------------
 453 */
 454
 455 .pure-table th,
 456 .pure-table td {
 457     padding: 0.5em 1em;
 458     font-size: 90%;
 459 }
 460
 461 .table-responsive {
 462     margin-left: -1em;
 463     margin-right: -1em;
 464     overflow-x: auto;
 465     -webkit-overflow-scrolling: touch;
 466     margin-bottom: 1em;
 467 }
 468 .table-responsive table {
 469     width: 100%;
 470     min-width: 35.5em;
 471     border-left-width: 0;
 472     border-right-width: 0;
 473 }
 474
 475 .table-responsive .mq-table {
 476     width: 100%;
 477     min-width: 44em;
 478 }
 479 .mq-table th.highlight {
 480     background-color: rgb(255, 234, 133);
 481 }
 482 .mq-table td.highlight {
 483     background-color: rgb(255, 250, 229);
 484 }
 485 .mq-table th.highlight code,
 486 .mq-table td.highlight code {
 487     background: rgb(255, 255, 243);
 488 }
 489 .mq-table-mq code {
 490     font-size: 0.875em;
 491 }
 492
 493 /* ----------------------------
 494  * Example for full-width Grids
 495  * ----------------------------
 496 */
 497
 498 .grids-example {
 499     background: rgb(250, 250, 250);
 500     margin: 2em auto;
 501     border-top: 1px solid #ddd;
 502     border-bottom: 1px solid #ddd;
 503 }
 504
 505 /* --------------------------
 506  * State Rules
 507  * --------------------------
 508 */
 509
 510
 511 .is-code-full {
 512     text-align: center;
 513 }
 514 .is-code-full .code {
 515     margin-left: auto;
 516     margin-right: auto;
 517 }
 518
 519
 520 /* --------------------------
 521  * Responsive Styles
 522  * --------------------------
 523 */
 524
 525 @media screen and (min-width: 35.5em) {
 526
 527     .legal-license {
 528         text-align: left;
 529         margin: 0;
 530     }
 531     .legal-copyright,
 532     .legal-links,
 533     .legal-links li {
 534         text-align: right;
 535         margin: 0;
 536     }
 537
 538 }
 539
 540 @media screen and (min-width: 48em) {
 541
 542     .l-wrap,
 543     .l-wrap .content {
 544         padding-left: 1em;
 545         padding-right: 1em;
 546     }
 547     .content .l-wrap {
 548         margin-left: -2em;
 549         margin-right: -2em;
 550     }
 551
 552     .header,
 553     .content {
 554         padding-left: 2em;
 555         padding-right: 2em;
 556     }
 557
 558     .header h1 {
 559         font-size: 350%;
 560     }
 561     .header h2 {
 562         font-size: 150%;
 563     }
 564
 565     .content p {
 566         font-size: 1.125em;
 567     }
 568
 569     .code {
 570         margin-left: auto;
 571         margin-right: auto;
 572         border-left-width: 1px;
 573         border-right-width: 1px;
 574     }
 575
 576     .table-responsive {
 577         margin-left: auto;
 578         margin-right: auto;
 579     }
 580     .table-responsive table {
 581         border-left-width: 1px;
 582         border-right-width: 1px;
 583     }
 584
 585 }
 586
 587 @media (min-width: 58em) {
 588
 589     #layout {
 590         padding-left: 180px; /* left col width "#menu" */
 591         left: 0;
 592     }
 593     #menu {
 594         left: 180px;
 595     }
 596     .menu-link {
 597         position: fixed;
 598         left: 180px;
 599         display: none;
 600     }
 601     #layout.active .menu-link {
 602         left: 180px;
 603     }
 604
 605 }
 606
 607 .hero {
 608     text-align: center;
 609 }
 610     .hero-titles {
 611         font-family: "omnes-pro", sans-serif;
 612         padding: 0 1em;
 613         margin: 2em auto;
 614         max-width: 768px;
 615     }
 616     .hero-site {
 617         font-size: 400%;
 618         font-weight: 100;
 619         margin: 0;
 620         color: #1f8dd6;
 621     }
 622     .hero-tagline {
 623         font-size: 150%;
 624         font-weight: 100;
 625         line-height: 1.5;
 626         margin: 0 0 1em;
 627         color: #666;
 628     }
 629
 630 a.button-cta,
 631 a.button-secondary {
 632     margin: 0.25em;
 633 }
 634
 635 a.button-cta {
 636     background: #1f8dd6;
 637     color: #fff;
 638     border: 1px solid #1f8dd6;
 639 }
 640
 641 a.button-secondary {
 642     background: #fff;
 643     color: #666;
 644     border: 1px solid #ddd;
 645 }
 646
 647 .size-chart {
 648     width: 100%;
 649     font-size: 87.5%;
 650     line-height: 1.4;
 651     margin-bottom: 2em;
 652 }
 653
 654     a.size-chart-item {
 655         display: block;
 656         color: #fff;
 657         padding: 1.45em 0;
 658         text-align: center;
 659         text-decoration: none;
 660         text-transform: capitalize;
 661     }
 662
 663     .size-chart-label {
 664         display: inline-block;
 665         -webkit-transform: rotate(-90deg);
 666         -moz-transform:    rotate(-90deg);
 667         -ms-transform:     rotate(-90deg);
 668         -o-transform:      rotate(-90deg);
 669     }
 670     .size-chart-size {
 671         display: none;
 672     }
 673
 674     .size-chart-base {
 675         background: #0e90d2;
 676     }
 677         .size-chart-base .size-chart-size {
 678             color: rgb(103, 194, 240);
 679         }
 680
 681     .size-chart-grids {
 682         background: rgb(128, 88, 165);
 683     }
 684         .size-chart-grids .size-chart-size {
 685             color: rgb(200, 131, 255);
 686         }
 687
 688     .size-chart-forms {
 689         background: #5eb95e;
 690     }
 691
 692         .size-chart-forms .size-chart-size {
 693             color: rgb(161, 240, 137);
 694         }
 695
 696     .size-chart-buttons {
 697         background: #dd514c;
 698     }
 699
 700         .size-chart-buttons .size-chart-size {
 701             color: rgb(236, 164, 154);
 702         }
 703
 704     .size-chart-menus {
 705         background: rgb(250, 210, 50);
 706     }
 707         .size-chart-menus .size-chart-size {
 708             color: rgb(255, 240, 134);
 709         }
 710
 711     .size-chart-tables {
 712         background: rgb(243, 123, 29);
 713     }
 714         .size-chart-tables .size-chart-label {
 715             margin-left: -0.5em;
 716         }
 717         .size-chart-tables .size-chart-size {
 718             color: rgb(255, 190, 129);
 719         }
 720
 721 .marketing {
 722     border-bottom: 1px solid #eee;
 723     margin-top: 1em;
 724     margin-bottom: 1em;
 725     padding-bottom: 2em;
 726 }
 727 .marketing-customize {
 728     margin-bottom: 0;
 729     border-bottom: 0;
 730     padding-bottom: 0;
 731 }
 732
 733     .marketing .content {
 734         margin-bottom: 0;
 735     }
 736
 737     .marketing-header {
 738         font-weight: 400;
 739     }
 740
 741     .marketing-diagram {
 742         margin: 2em auto;
 743     }
 744
 745 .sample-buttons {
 746     margin: 1em auto;
 747     padding: 0 0.5em;
 748 }
 749
 750     .sample-button {
 751         padding: 0.5em;
 752         text-align: center;
 753     }
 754     .sample-button .pure-button {
 755         width: 100%;
 756     }
 757
 758     .button-a {
 759         background: #e1f2fa;
 760         color: #5992aa;
 761     }
 762
 763     .button-b {
 764         background: #fcebbd;
 765         color: #af9540;
 766     }
 767
 768     .button-c,
 769     .button-d,
 770     .button-e {
 771         border-radius: 8px;
 772     }
 773
 774     .button-f,
 775     .button-g,
 776     .button-h {
 777         border-radius: 20px;
 778     }
 779
 780     .button-c {
 781         background: #333;
 782         color: #fff;
 783     }
 784     .button-d {
 785         background: #d3eda3;
 786         color: #72962e;
 787     }
 788
 789     .button-e {
 790         background: #f5ab9e;
 791         color: #8c3a2b;
 792     }
 793     .button-f {
 794         background: #ddaeff;
 795         color: #8156a7;
 796     }
 797
 798     .button-g {
 799         background: #f57b00;
 800         color: #ffca95;
 801     }
 802
 803     .button-h {
 804         background: #008ed4;
 805         color: #fff;
 806     }
 807     .sample-button .button-h {
 808         width: 50%; /* Updated to 80% at sm breakpoint */
 809     }
 810
 811 @media screen and (min-width: 30em) {
 812     .size-chart-tables .size-chart-label {
 813         margin-left: 0;
 814     }
 815 }
 816
 817 @media screen and (min-width: 35.5em) {
 818     .hero {
 819         margin-bottom: 3em;
 820     }
 821
 822     .sample-button .button-h {
 823         width: 100%;
 824     }
 825 }
 826
 827 @media screen and (min-width: 48em) {
 828     .hero-titles {
 829         padding: 0 2em;
 830     }
 831     .hero-site {
 832         font-size: 800%;
 833     }
 834     .hero-tagline {
 835         font-size: 250%;
 836     }
 837
 838     a.button-cta,
 839     a.button-secondary {
 840         font-size: 125%;
 841     }
 842
 843     .size-chart {
 844         font-size: 100%;
 845     }
 846     a.size-chart-item {
 847         padding: 0.5em;
 848         text-align: left;
 849     }
 850     .size-chart-label {
 851         -webkit-transform: none;
 852         -moz-transform:    none;
 853         -ms-transform:     none;
 854         -o-transform:      none;
 855     }
 856     .size-chart-size {
 857         display: block;
 858     }
 859
 860     .marketing-header {
 861         font-size: 150%;
 862     }
 863
 864     .l-wrap .sample-buttons {
 865         padding: 0 0.5em;
 866     }
 867 }
 868
 869 /**
 870  * Baby Blue theme for RainbowJS
 871  *
 872  * @author tilomitra
 873  */
 874
 875 pre .comment {
 876     color: #999;
 877 }
 878
 879 pre .tag,
 880 pre .tag-name,
 881 pre .support.tag-name {
 882     color: rgb(85, 85, 85);
 883 }
 884
 885 pre .keyword,
 886 pre .css-property,
 887 pre .vendor-prefix,
 888 pre .sass,
 889 pre .class,
 890 pre .id,
 891 pre .css-value,
 892 pre .entity.function,
 893 pre .storage.function {
 894     font-weight: bold;
 895 }
 896
 897 pre .css-property,
 898 pre .css-value,
 899 pre .vendor-prefix,
 900 pre .support.namespace {
 901     color: #333;
 902 }
 903
 904 pre .constant.numeric,
 905 pre .keyword.unit,
 906 pre .hex-color {
 907     font-weight: normal;
 908     color: #099;
 909 }
 910
 911 pre .attribute,
 912 pre .variable,
 913 pre .support {
 914     color:  #757575; /* skinbuilder block-page-text-normal with #1f8dd6 as primary */
 915 }
 916
 917 pre .string,
 918 pre .support.value  {
 919     font-weight: normal;
 920     color: #3b8bba; /* skinbuilder block-mine-text-low with #1f8dd6 as primary */
 921 }
 922
 923 /* --------------------------
 924  * Tabbed look in statistics
 925  * --------------------------
 926 */
 927
 928 /* Set the size and font of the tab widget
 929 .tabGroup {
 930     font: 10pt arial, verdana;
 931     width: 800px;
 932     height: 400px;
 933 }
 934
 935 /* Configure the radio buttons to hide off screen */
 936 .tabGroup > input[type="radio"] {
 937     position: absolute;
 938     left:-100px;
 939     top:-100px;
 940 }
 941
 942 /* Configure labels to look like tabs */
 943 .tabGroup > input[type="radio"] + label {
 944     /* inline-block such that the label can be given dimensions */
 945     display: inline-block;
 946
 947     border: 1px solid silver;
 948
 949     /* the bottom border is handled by the tab content div */
 950     border-bottom: 0;
 951
 952     /* Padding around tab text */
 953     padding: 5px 10px;
 954
 955     /* Set the background color to default gray (non-selected tab) */
 956     background-color:#ddd;
 957 }
 958
 959 /* Focused tabs need to be highlighted as such */
 960 .tabGroup > input[type="radio"]:focus + label {
 961     border:1px dashed silver;
 962 }
 963
 964 /* Checked tabs must be white with the bottom border removed */
 965 .tabGroup > input[type="radio"]:checked + label {
 966     background-color:white;
 967     font-weight: bold;
 968     border-bottom: 1px solid white;
 969     margin-bottom: -1px;
 970 }
 971
 972 /* The tab content must fill the widgets size and have a nice border */
 973 .tabGroup > div {
 974     display: none;
 975     background-color: white;
 976     border: 1px solid silver;
 977     padding: 10px 10px;
 978     height: 100%;
 979     overflow: auto;
 980 }
 981
 982 /* This matchs tabs displaying to their associated radio inputs */
 983 .port-stats:checked ~ .port-stats, .flow-stats:checked ~ .flow-stats {
 984     display: block;
 985 }