browsertrix/docs/stylesheets/extra.css

/* Font style definitions */

@font-face {
    font-family: 'Recursive';
    font-style: oblique 0deg 15deg;
    font-weight: 300 1000;
    src: url('../assets/fonts/Recursive_VF_1.084.woff2') format('woff2');
    font-feature-settings: "ss12";
}

@font-face {
    font-family: 'Inter';
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    src: url('../assets/fonts/Inter.var.woff2') format('woff2');
    font-feature-settings: "ss03";
}

@font-face {
    font-family: 'Inter';
    font-weight: 100 900;
    font-display: swap;
    font-style: italic;
    src: url('../assets/fonts/Inter-Italic.var.woff2') format('woff2');
    font-feature-settings: "ss03";
}

@font-face {
    font-family: 'Konsole';
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    src: url('https://wr-static.sfo3.cdn.digitaloceanspaces.com/fonts/konsole/Konsolev1.1-VF.woff2') format('woff2');
}
  
:root {
    --md-display-font: "Konsole", "Helvetica", sans-serif;
    --md-code-font: "Recursive", monospace;
    --md-text-font: "Inter", "Helvetica", "Arial", sans-serif;
    --wr-blue-primary: #088eaf;
    --wr-orange-primary: #bb4a00;
}

[data-md-color-scheme="webrecorder"] {
    --md-primary-fg-color: #4D7C0F;
    --md-primary-fg-color--light: #057894;
    --md-primary-fg-color--dark: #035b71;
    --md-typeset-color: black;
    --md-accent-fg-color: #057894;
    --md-typeset-a-color: #035b71;
    --md-code-bg-color: #F9FAFB;
  }

/* Nav changes */

.md-header__title, .md-nav__title {
    font-family: var(--md-display-font);
    text-transform: uppercase;
    font-variation-settings: "wght" 750, "wdth" 87;
    margin-left: 0 !important;
}

.md-header__title--active {
    font-family: var(--md-display-font);
    text-transform: none;
    font-variation-settings: "wght" 550, "wdth" 90;
}

.md-header__button {
    margin-right: 0 !important;
}

/* Custom menu item hover */

.md-tabs__link {
    font-family: var(--md-code-font);
    font-weight: 400;
    opacity: .9;
    transition: .4s cubic-bezier(.1,.7,.1,1),opacity .25s
}

.md-tabs__link:hover {
    font-weight: 600;
}

/* Custom body typography rules */

.md-typeset a {
    text-decoration: underline;
}

.headerlink {
    text-decoration: none!important;
}

code, pre, kbd {
    font-variation-settings: "MONO" 1;
    font-feature-settings: "ss01", "ss02", "ss08";
}

code {
    border-width: 1px;
    border-color: #D1D5DB;
    border-style: solid;
}

.md-typeset h1, h2, h3, h4, h5 {
    color: black;
}

.md-typeset h1, h2, h3 {
    font-weight: 650 !important;
    font-variation-settings: "OPSZ" 35;
}

/* Custom badge classes, applies custom overrides to inline-code blocks */

.badge-blue {
    background-color: var(--wr-blue-primary) !important;
    border-color: var(--wr-blue-primary) !important;
    color: white !important;
    font-family: var(--md-text-font);
    font-weight: 600;
}

.badge-green {
    background-color: hsl(142 76% 36%) !important;
    border-color: hsl(142 76% 36%) !important;
    color: white !important;
    font-family: var(--md-text-font);
    font-weight: 600;
}

.badge-orange {
    background-color: var(--wr-orange-primary) !important;
    border-color: var(--wr-orange-primary) !important;
    color: white !important;
    font-family: var(--md-text-font);
    font-weight: 600;
}

/* Status Styling */

.status-success {
    font-family: var(--md-code-font);
    font-weight: 500;
    white-space: nowrap;
    & svg {
        color: hsl(142.1 76.2% 36.3%);
    }
}

.status-neutral {
    font-family: var(--md-code-font);
    font-weight: 500;
    white-space: nowrap;
    & svg {
        color: hsl(32.1 94.6% 43.7%);
    }
}

.status-warning {
    font-family: var(--md-code-font);
    font-weight: 500;
    white-space: nowrap;
    & svg {
        color: hsl(21, 90%, 48%);
    }
}

.status-danger {
    font-family: var(--md-code-font);
    font-weight: 500;
    white-space: nowrap;
    & svg {
        color: hsl(0 72.2% 50.6%);
    }
}

.status-waiting {
    font-family: var(--md-code-font);
    font-weight: 500;
    white-space: nowrap;
    & svg {
        color: hsl(271.5 81.3% 55.9%);
    }
}