style.scss

// FIXME: Use modules
@import "vars", "utils", "navbar", "themes", "syntax";

/* See FiraSans-LICENSE.txt for the Fira Sans license. */
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 400;
    src:
      local('Fira Sans'),
      url("FiraSans-Regular.woff2") format('woff2'),
      url("FiraSans-Regular.woff") format('woff');
}
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 500;
    src:
      local('Fira Sans Medium'),
      url("FiraSans-Medium.woff2") format('woff2'),
      url("FiraSans-Medium.woff") format('woff');
}

/* See SourceSerif4-LICENSE.md for the Source Serif 4 license. */
@font-face {
    font-family: 'Source Serif';
    font-style: normal;
    font-weight: 400;
    src:
      local('Source Serif 4'),
      url("SourceSerif4-Regular.ttf.woff2") format('woff2'),
      url("SourceSerif4-Regular.ttf.woff") format('woff');
}
@font-face {
    font-family: 'Source Serif';
    font-style: italic;
    font-weight: 400;
    src:
      local('Source Serif 4'),
      url("SourceSerif4-It.ttf.woff2") format('woff2'),
      url("SourceSerif4-It.ttf.woff") format('woff');
}
@font-face {
    font-family: 'Source Serif';
    font-style: normal;
    font-weight: 700;
    src:
      local('Source Serif 4'),
      url("SourceSerif4-Bold.ttf.woff2") format('woff2'),
      url("SourceSerif4-Bold.ttf.woff") format('woff');
}

/* See SourceCodePro-LICENSE.md for the Source Code Pro license. */
@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 400;
    /* Avoid using locally installed font because bad versions are in circulation:
     * see https://github.com/rust-lang/rust/issues/24355 */
    src:
      url("SourceCodePro-Regular.ttf.woff2") format('woff2'),
      url("SourceCodePro-Regular.ttf.woff") format('woff');
}
@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 600;
    src:
      url("SourceCodePro-Semibold.ttf.woff2") format('woff2'),
      url("SourceCodePro-Semibold.ttf.woff") format('woff');
}
@font-face {
    font-family: 'Source Code Pro';
    font-style: italic;
    font-weight: 400;
    src:
      url("SourceCodePro-It.ttf.woff2") format('woff2'),
      url("SourceCodePro-It.ttf.woff") format('woff');
}

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

.pure-button-normal {
    background-color: var(--color-background);
    box-sizing: border-box !important;
    border: 1px solid var(--color-border);
    color: var(--color-standard);
}

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

body {
    padding: 0;
    margin: 0;
    position: relative;
    min-height: 100vh; /* Tall enough to stick the footer to the bottom */

    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    h1 {
        font-size: 1.5em;
    }
    h3 {
        font-size: 1.3em;
    }
    h1, h2, h3, h4 {
        font-family: "Fira Sans",sans-serif;
        font-weight: 500;
        margin: 20px 0 15px 0;
        padding-bottom: 6px;
    }
    h2, h3, h4 {
        border-bottom: 1px solid;
    }
    pre {
        background-color: var(--color-background-code);
        padding: 14px;
    }
    code, kbd, pre, samp {
        font-family: "Source Code Pro",monospace;
    }
    a {
        text-decoration: none;
        background: transparent;
    }
    p {
        margin: 0 0 .6em 0;
    }
    ol, ul {
        padding-left: 25px;
    }

    input, #search {
        background-color: var(--color-background-input);
        color: var(--input-color);
        line-height: normal;
    }

    #search {
        -moz-box-sizing: border-box !important;
        box-sizing: border-box !important;
        outline: none;
        border: none;
        border-radius: 1px;
        margin-top: 5px;
        padding: 10px 16px;
        font-size: 17px;
        width: 100%;

        box-shadow: 0 0 0 1px var(--color-border), 0 0 0 1px var(--color-border);
        transition: box-shadow 150ms ease-in-out;
    }

    #search:focus {
        box-shadow: var(--input-box-shadow-focus);
    }

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

    background-color: var(--color-background);
    color: var(--color-standard);

    > h1 {
        color: var(--color-standard);
    }

    // This is used to improve charts rendering on all themes.
    rect.highcharts-background {
        fill: var(--color-background);
    }

    text.highcharts-title, g.highcharts-axis-labels > text {
        fill: var(--chart-title-color) !important;
    }

    g.highcharts-legend-item > text {
        fill: var(--chart-grid) !important;
    }

    g.highcharts-grid > path {
        stroke: var(--chart-grid) !important;
    }
}

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

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

body.centered div.container {
    margin: 0 auto;
}

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

    h1.brand {
        font-size: 3em;
        margin: 20px 0 10px 0;
        padding-bottom: 6px;
        color: var(--color-brand);
    }

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

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

    input#search {
        margin: 0;
    }
}

#search-select-nav {
    display: flex;
    flex-direction: column;
    padding: 1em $search-result-right-left-padding;

    .item-end {
        align-self: flex-end
    }
}

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

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

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

        a {
            color: var(--color-url);
        }
    }
    
    .about p {
        margin-left: 20px;
    }

    strong {
        font-weight: 500;
    }

    pre {
        white-space: pre-wrap;
        background-color: var(--background-color);
    }

    .release, .build-in-progress {
        display: block;
        border-bottom: 1px solid var(--color-border);
        padding: 0.4em $search-result-right-left-padding;
        color: var(--color-standard);

        a {
            color: var(--color-standard);
        }

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

    .release:hover,
    a.release:focus,
    .build-in-progress:hover {
        background-color: var(--color-background-code);
    }

    li:last-of-type .release,
    li:last-of-type .build-in-progress {
        border-bottom: none;
    }

    .name {
        color: var(--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;

        span.fa-check {
            color: var(--color-macro);
        }
        span.fa-times {
            color: var(--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: var(--color-border) !important;
    }

    .yanked {
      color: var(--color-warn-msg);
      background-color: var(--color-warn-background);
      padding: .2em .8em .2em .5em;
      border-radius: 1em;
    }
}

div.package-container {
    background-color: var(--color-url);
    color: var(--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: var(--color-background);
            border-top: 1px solid var(--color-border);
            border-left: 1px solid var(--color-border);
            border-right: 1px solid var(--color-border);
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border-bottom: 2px solid var(--color-border);
            padding: 0.4em 1em;
        }

        .pure-menu-active {
            border-bottom: 2px solid var(--color-background);
            color: var(--color-standard);
        }

        .pure-menu-link:hover {
            color: var(--color-standard);
        }
    }
}

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

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

    .build-success {
        color: var(--color-macro);
    }

    .build-fail {
        color: var(--color-struct);
    }
}

$sidebar-side-padding: 10px;

div.package-page-container {
    padding-bottom: 50px;
    width: 100%;

    &.small-bottom-pad {
        padding-bottom: 30px;
    }

    div.package-menu {
        padding: 0 $sidebar-side-padding;

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

        li.pure-menu-item > .documented-info {
            font-size: 13px;
            display: block;
            width: 100%;
        }

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

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

        .pure-menu-link:hover {
            background-color: var(--color-background-code);
        }

        // used for versions that failed to build
        a.warn {
            color: var(--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 !important;
        font-family: $font-family-serif;

        a {
            color: var(--color-url);
        }

        a:hover {
            text-decoration: underline;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: $font-family-sans;
            color: var(--color-standard) !important;
        }

        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 var(--color-menu-border);
            margin-bottom: 15px;

            td,
            th {
                border-left: 1px solid var(--color-menu-border);
                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 var(--color-menu-border);
            }

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

            thead {
                background-color: var(--color-table-header-background);
                color: var(--color-standard);
                text-align: left;
                vertical-align: bottom;
            }
        }
    }

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

        code {
            white-space: pre;
        }
    }
}

div.docsrs-package-container {
    text-align: left;
    background-color: var(--color-background-code);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 20px;

    .container {
        display: flex;
        align-items: center;

        // This rule is only used on the error page when we land on a crate which doesn't exist.
        #crate-title {
            color: var(--color-standard);
            text-align: center;
            width: 100%;
        }

        .description-container {
            flex-grow: 3;
            color: var(--color-standard);

            h1 {
                margin: 0;
                padding: 15px 14px;
                color: var(--color-standard);

                @media #{$media-sm} {
                    padding: 15px 0 0 14px;
                }

                &.no-description {
                    padding-bottom: 15px;
                }
            }

            div.description {
                display: none;

                @media #{$media-sm} {
                    font-family: $font-family-serif;
                    margin: 0;
                    padding: 2px 0 14px 15px;
                    display: block;
                }
            }

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

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

                .pure-menu-link {
                    font-size: 14px;
                    padding: 0.4em 1em 0.3em 1em;

                    .title {
                        display: none;

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

                .pure-menu-active {
                    color: var(--color-standard);
                    background-color: var(--color-background);
                    border-top: 1px solid var(--color-border);
                    border-left: 1px solid var(--color-border);
                    border-right: 1px solid var(--color-border);
                    border-top-left-radius: 4px;
                    border-top-right-radius: 4px;
                    border-bottom: 2px solid var(--color-background);
                }

                .pure-menu-active:hover {
                    background-color: var(--color-background);
                }

                .pure-menu-link:hover {
                    color: var(--color-standard);
                    background-color: inherit;
                }
            }

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

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

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

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

        .doc-link {
            margin: 0 10px;
            height: min-content;
            background: var(--color-doc-link-background);
            color: var(--color-background);
            padding: 10px;
            border: 1px solid var(--color-doc-link-background);
            border-radius: 5px;
            display: flex;

            .fas {
                margin-top: 2px;
                margin-right: 6px;
            }

            &:hover {
                border-color: var(--color-doc-link-hover);
            }
        }
    }
}

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

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

.about {
    font-family: $font-family-serif;
    color: var(--color-standard);

    a {
        color: var(--color-url);
    }

    .pure-menu a:hover span {
        text-decoration: none;
    }

    table {
        margin-bottom: 10px;
    }

    thead {
        background-color: var(--color-table-header-background);
        color: var(--color-table-header);
    }

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

    strong {
        font-weight: bold;
    }

    pre code {
        background-color: inherit;
    }

    h1, h2, h3, h4, h5, h6 {
        border-bottom-color: var(--color-border) !important;
        color: var(--color-standard) !important;
    }
}

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

#clipboard {
    cursor: pointer;
}

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

ul.pure-menu-list {
    li.toggle-source {
        cursor: pointer;
        border: 1px solid var(--color-border);
        display: none;
    }
}

@media screen and (min-width: 35.5em) {
    body.flex {
        display: flex;
        flex-direction: column;

        .package-page-container {
            flex-grow: 1;
            position: relative;
            display: flex;

            .pure-g {
                width: 100%;
                -webkit-flex-flow: unset;
                -webkit-align-content: unset;
                align-content: unset;
            }
        }
    }

    ul.pure-menu-list {
        li.toggle-source {
            display: list-item;

            button {
                font-size: 14px;
                color: var(--color-standard);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 7px 8px;
                background: transparent;
                border: 0;
                width: 100%;
            }

            .right {
                display: none;
            }
        }
    }

    #side-menu.source-view {
        position: relative;

        .package-menu {
            position: -webkit-sticky;
            position: sticky;
            top: $top-navbar-height;
            overflow: auto;
            max-height: calc(100vh - #{$top-navbar-height});
            height: 100%;

            .pure-menu-list {
                position: absolute;
                top: 0;
                max-height: 100vh;
                height: 100%;
                width: calc(100% - #{$sidebar-side-padding} * 2);
                padding-top: 5px;

                .pure-menu-item {
                    height: initial;
                }
            }
        }
    }

    #side-menu.collapsed {
        max-width: 46px;

        ul {
            li:not(.toggle-source), .text {
                display: none;
            }
            li.toggle-source {
                .left {
                    display: none;
                }
                .right {
                    display: inline-block;
                    margin-left: -4px;
                }
            }
        }
    }

    #source-warning {
        height: 100%;
    }
}

#source-code-container {
    display: inline-flex;
    overflow: scroll;
}
#line-numbers {
    text-align: right;
    letter-spacing: normal;
}
#line-numbers > code > a  {
    padding: 0 8px;
}
// This class is used to the source code and the line number container in the
// `crate/**/source/*` view
.source-code {
    pre {
        margin-top: 0;
        margin-bottom: 0;
        height: 100%;

        code {
            height: 100%;
        }
    }

    &.expanded {
        width: calc(100% - 46px);
    }
}
#source-code {
    overflow: scroll;
    width: 100%;
}