templates/style.scss

// FONTS
$font-family-sans: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-serif: "Source Serif Pro",Georgia,Times,"Times New Roman",serif;
$font-family-mono: "Source Code Pro", Menlo, Monaco, Consolas, "DejaVu Sans Mono", Inconsolata, monospace;

// COLORS - Guess what?
$color-standard: #000;             // pure black
$color-url: #4d76ae;               // blue
$color-macro: #068000;             // green
$color-struct: #df3600;            // red
$color-enum: #5e9766;              // light green
$color-type: #e57300;              // orange
$color-keyword: #8959A8;           // purple
$color-string: #718C00;            // greenish
$color-macro-in-code: #3E999F;     // blueish
$color-lifetime-incode: #B76514;   // orangish
$color-comment-in-code: #8E908C;   // light gray
$color-background-code: #F5F5F5;   // lighter gray
$color-border: #ddd;               // gray
$color-red: #d93d3d;               // red
$top-navbar-height: 32px;          // height of the floating top navbar

// pure compatible media queries
$media-sm: "screen and (min-width: 35.5em)";
$media-md: "screen and (min-width: 48em)";
$media-lg: "screen and (min-width: 64em)";
$media-xl: "screen and (min-width: 80em)";
// usage:
// @media #{$media-sm} { ... }

html, input, select, textarea, .pure-g [class *= "pure-u"] {
    font-family: $font-family-sans;
    color: $color-standard;
}

.pure-button-normal {
    background-color: #fff;
    box-sizing: border-box !important;
    border: 1px solid $color-border;
}

.description {
    font-family: $font-family-serif;
}

// rustdoc overrides
div.rustdoc {
    font-family: $font-family-serif;
    padding: 10px 15px 20px 15px;

    @media (max-width: 700px) {
        padding-top: 0;
    }

    .sidebar {
        @media (min-width: 701px) {
            margin-top: $top-navbar-height;
        }

        .block > ul > li {
            margin-right: -10px;
        }
    }

    #source-sidebar {
        top: $top-navbar-height;
    }

    #sidebar-toggle {
        top: 62px;
    }

    @media (max-width: 700px) {
        .sidebar.mobile {
            top: $top-navbar-height;

            .sidebar-elems.show-it {
                top: 77px;
            }

            #sidebar-filler {
                top: $top-navbar-height;
            }
        }
    }

    position: relative;
}

body {
    padding: 0;
    margin: 0;
    // Since top navbar is fixed, we need to add padding to the body content.
    padding-top: $top-navbar-height;
    // The scroll padding on the <body> is necessary for Chrome
    // browsers for now (see
    // https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/
    // for an explanation)
    scroll-padding-top: $top-navbar-height;
}

html {
    // Offset anchor jump targets down by this much, so they don't
    // overlap the top navigation bar (not supported on Desktop/Mobile
    // Safari yet):
    scroll-padding-top: $top-navbar-height;
}

// this is a super nasty override for help dialog in rustdocs
// see #52 for details
body.blur > :not(#help) {
    filter: none;
    -webkit-filter: none;
}

body.blur > div.nav-container > *,
body.blur > div.cratesfyi-package-container > *,
body.blur > div.rustdoc > :not(#help) {
    filter: blur(8px);
    -webkit-filter: blur(8px);
    opacity: .7;
}

// rustdocs have 200px sidebar and
// max-width 960px main pane
// BUT I really want to make the website centered
body {
    text-align: center;
    font: 16px/1.4 $font-family-sans;
}

pre {
    font-size: 0.9rem;
    overflow: auto;
    white-space: pre;
}

div.container {
    max-width: 1160px;
    margin: 0 auto;
    text-align: left;
}

div.container-rustdoc {
    text-align: left;
}

div.nav-container {
    // Nothing is supposed to be over or hovering the top navbar. Maybe add a few others '('? :)
    z-index: 999;
    height: $top-navbar-height;
    border-bottom: 1px solid $color-border;
    background-color: #fff;
    left: 0;
    right: 0;
    top: 0;
    position: fixed;

    li {
        border-left: 1px solid $color-border;
    }

    .pure-menu-has-children>.pure-menu-link:after {
        font-size: 0.8em;
    }

    .pure-menu-link {
        font-size: 0.8em;
        font-weight: 400;
    }

    .pure-menu-link:hover {
        color: $color-standard;
        background-color: inherit;
    }

    form.landing-search-form-nav {
        max-width: 1200px;

        #search-input-nav {
            float: right;
            max-width: 150px;
            display: none;
            border-left: 1px solid $color-border;

            @media #{$media-sm} {
                display: block;
            }

            @media #{$media-md} {
                 max-width: 200px;
            }

            label {
                 color: #777;
                 cursor: pointer;
                 padding-left: 0.5rem;
                 font-size: 0.8em;
            }

            input {
                 border: none;
                 margin: 0 1em 0 0;
                 font-size: 0.8em;
                 box-shadow: none;
                 background-color: #fff;
                 height: 31px;
            }
        }

        input.search-input-nav:focus {
            outline: unset;
        }
    }

    .pure-menu-children {
        border: 1px solid $color-border;
        border-radius: 0 0 2px 2px;
        margin-left: -1px;

        li {
            border-left: none;
        }
    }

    // used for latest version warning
    .warn, .warn:hover {
        color: $color-type;
    }

    a.warn:hover {
        color: darken($color-type, 10%);
    }

    // used for global alerts
    .error {
        color: $color-red;

        &:hover {
            color: darken($color-red, 10%);
        }
    }

    div.rustdoc-navigation {
        span.title {
            display: none;

            @media #{$media-sm} {
                display: inline;
            }
        }

        div.package-details-menu {
            width: 350px;

            p.description {
                font-family: $font-family-sans;
                font-size: 0.8em;
                color: #777;  // color from pure
                padding: .5em 1em;
                margin: 0;
            }

            ul.pure-menu-list {
                width: 100%;
            }

            div.right-border {
                border-right: 1px solid $color-border;
            }

            a.pure-menu-link {
                word-wrap: normal;
                white-space: normal;
            }

            div.sub-menu {
                max-height: 150px;
                overflow-y: auto;

                ul.pure-menu-list {
                    border-top: none;
                }

                li.pure-menu-item:last-child {
                    border-bottom: none;
                }
            }
        }
    }
}

div.nav-container-rustdoc {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
}

.rustdoc:focus {
    outline: unset;
}

div.landing {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 60px;

    h1.brand {
        font-size: 3em;
        margin-bottom: 10px;
    }

    form.landing-search-form {
        max-width: 500px;
        margin: 0 auto;
        padding: .4em 1em;

        div.buttons {
            margin-top: 30px;
        }
    }

    input#search {
        margin: 0;
    }
}

div.recent-releases-container {
    text-align: left;
    margin-bottom: 50px;

    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    ol.queue-list li {
        list-style-type: decimal;
        margin-left: 20px;

        a {
            color: $color-url;
        }
    }

    strong {
        font-weight: 500;
    }

    pre {
        white-space: pre-wrap;
    }

    .release {
        display: block;
        border-bottom: 1px solid $color-border;
        padding: .4em 1em;

        @media #{$media-lg} {
            padding: .4em 0;
            margin: 0 1em;
        }
    }

    .release:hover, li.selected > .release {
        background-color: $color-background-code;
    }

    li:last-child .release {
        border-bottom: none;
    }

    .name {
        color: $color-url;
        font-weight: 500;
        white-space: nowrap;
        margin: 0;

        &:hover {
            background-color: transparent;
        }

        &::before {
            display: none;
        }

        @media #{$media-sm} {
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }

    .name:hover {
        overflow: visible;
        white-space: normal;
    }

    .build {
        font-weight: 500;

        i.fa-check {
            color: $color-macro;
        }
        i.fa-close {
            color: $color-struct;
        }
    }

    .description {
        font-family: $font-family-serif;
        font-weight: normal;

        @media #{$media-sm} {
            font-size: 1em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .description:hover {
        @media #{$media-sm} {
            overflow: visible;
            white-space: normal;
        }
    }

    .date {
        font-weight: normal;

        @media #{$media-sm} {
            text-align: right;
        }
    }

    div.pagination {
        text-align: center;
        margin: 1em;

        .pure-button {
            margin: 0;
        }
    }

    h4 {
        border-bottom-color: $color-border !important;
    }
}

div.package-container {
    background-color: $color-url;
    color: $color-background-code;;

    h1 {
        margin: 0;
        padding: 20px 0 0 16px;
    }
    p {
        margin: 0;
        padding: 0 0 20px 16px;
    }

    .pure-menu {
        .pure-menu-link {
            background-color: #fff;
            border-top: 1px solid $color-border;
            border-left: 1px solid $color-border;
            border-right: 1px solid $color-border;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border-bottom: 2px solid $color-border;
            padding: .4em 1em;
        }

        .pure-menu-active {
            border-bottom: 2px solid #fff;
            color: $color-standard;
        }

        .pure-menu-link:hover {
            color: $color-standard;
        }
    }
}

div.package-sheet-container {
    margin-top: 10px;
    margin-bottom: 20px;

    .pure-menu-link {
        border-radius: 4px;
        padding: .2em .8em;
        font-weight: 400;
    }

    .build-success {
        color: $color-macro;
    }

    .build-fail {
        color: $color-struct;
    }
}

div.package-page-container {
    div.package-menu {
        padding: 0 10px;
        margin-bottom: 50px;

        li.pure-menu-heading {
            font-size: 1.3em;
            color: #000;
            font-weight: 500;
            text-align: center;
            border-bottom: 1px solid lighten($color-border, 5%);
            text-transform: none;
            padding-bottom: 6px;
            margin: 20px 5px 15px 5px;
        }

        li.pure-menu-heading:first-child {
            margin-top: 0;
        }

        li i.fa {
            display: inline-block;
            width: 20px;
        }

        a.pure-menu-link {
            font-size: 14px;
            color: $color-standard;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 7px 8px;
        }

        a.pure-menu-link:hover {
            background-color: $color-background-code;
        }

        // used for versions that failed to build
        a.warn {
            color: $color-type;
        }

        div.sub-menu {
            max-height: 135px;
            overflow-y: auto;

            ul.pure-menu-list {
                border-top: none;
            }

            li.pure-menu-item:last-child {
                border-bottom: none;
            }
        }

        img.owner {
            max-width: 32px;
            max-height: 32px;
            border-radius: 2px;
        }
    }

    div.package-details {
        padding: 0 1em;
        font-family: $font-family-serif;

        a {
            color: $color-url;
        }

        a:hover {
            text-decoration: underline;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: $font-family-sans;
        }

        h1:first-child,
        h2:first-child,
        h3:first-child,
        h4:first-child,
        h5:first-child,
        h6:first-child {
            margin-top: 0;
        }

        table {
            // most of this stuff is taken from pure tables.css
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            border: 1px solid #cbcbcb;
            margin-bottom: 15px;

            td, th {
                border-left: 1px solid #cbcbcb;
                border-width: 0 0 0 1px;
                font-size: inherit;
                margin: 0;
                overflow: visible;
                padding: 0.5em 1em;
            }

            th {
                font-family: $font-family-sans;
                font-weight: 500;
            }

            td {
                border-bottom: 1px solid #cbcbcb;
            }

            tbody > tr:last-child > td {
                border-bottom-width: 0;
            }

            thead {
                background-color: #e0e0e0;
                color: #000;
                text-align: left;
                vertical-align: bottom;
            }
        }
    }

    pre {
        background-color: inherit;
        padding: 0;

        code {
            white-space: pre;
        }
    }
}

div.cratesfyi-package-container {
    text-align: left;
    background-color: $color-background-code;
    border-bottom: 1px solid $color-border;
    margin-bottom: 20px;

    h1 {
        margin: 0;
        padding: 15px 0 0 14px;
    }

    div.description {
        font-family: $font-family-serif;
        margin: 0;
        padding: 0 0 15px 14px;

        @media #{$media-sm} {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    div.description-in-rustdoc {
        padding: 10px 0 10px 14px;
    }

    .pure-menu {
        margin-bottom: -1px;
        padding-left: 14px;

        .pure-menu-link {
            color: #666;
            font-size: 14px;
            padding: .4em 1em .3em 1em;

            .title {
                display: none;

                @media #{$media-sm} {
                    display: inline;
                }
            }
        }

        .pure-menu-active {
            color: $color-standard;
            background-color: #fff;
            border-top: 1px solid $color-border;
            border-left: 1px solid $color-border;
            border-right: 1px solid $color-border;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border-bottom: 2px solid #fff;
        }

        .pure-menu-active:hover {
            background-color: #fff !important;
        }

        .pure-menu-link:hover {
            color: #000;
            background-color: inherit;
        }
    }

    ul.platforms-menu {
        float: right;
        display: none;

        ul.pure-menu-children {
            left: auto;
            right: 0;
            border: 1px solid $color-border;
            border-radius: 2px;
        }

        .pure-menu-has-children>.pure-menu-link:after {
            font-size: 14px;
        }

        @media #{$media-sm} {
            display: inline-block;
        }
    }
}

div.cratesfyi-package-container-rustdoc {
    margin-bottom: 10px;
}

div.info {
    font-family: $font-family-sans;
    border-radius: 4px;
    background-color: $color-background-code;
    padding: .4em 1em;
    text-align: center;
    margin-bottom: 10px;

    a {
        color: $color-url;
        text-decoration: underline;
    }
}

div.warning {
    @extend div.info;
    background-color: lighten($color-type, 45%);
}

div.search-page-search-form {
    padding: .4em 1em;
    text-align: center;

    input.search-input {
        display: inline-block;
        max-width: 300px;
        padding: .4em 1em;
    }
}

.menu-item-divided {
    border-bottom: 1px solid $color-border;
}

.rust-navigation-item {
    background: url(/rust-logo.png) no-repeat;
    background-position: 15px 45%;
    background-size: 12px;
    padding-left: 35px;
}

.about {
    font-family: $font-family-serif;
    padding: .4em 1em;

    a {
        color: $color-url;
    }
    a:hover {
        text-decoration: underline;
    }

    table {
        margin-bottom: 10px;
    }

    thead tr th {
        font-family: $font-family-sans;
        font-weight: 500;
    }

    strong {
        font-weight: bold;
    }

    pre code {
        background-color: inherit;
    }

    h4 {
        border-bottom-color: $color-border !important;
    }
}

#crate-title {
    display: inline-block;
}

#clipboard {
    cursor: pointer;
}

i.dependencies.normal {
  visibility: hidden;
  display: none;
}

/* Don't put a newline after code fragments in headers */
h3 > code, h4 > code {
  display: inline-block;
}