Dark-GitLab by vednoc

Imported from https://gitlab.com/vednoc/dark-gitlab/raw/master/gitlab.user.styl
Details

Authorvednoc
LicenseMIT
Created atApril 02, 2021 17:22
Updated atJune 18, 2021 00:00
Applies togitlab.com
Statistics

Total views112
Total installs104
Weekly installs15
Weekly updates12
Description

Dark and light theme for GitLab and self-hosted GitLab instances.
Notes

Userstyle doesn't have notes.
Source code

Source code has over 150k characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         Dark-GitLab
@namespace    gitlab.com/vednoc/dark-gitlab
@description  Dark and light theme for GitLab and self-hosted GitLab instances.
@author       vednoc <vednoc@pm.me> (https://gitlab.com/vednoc)
@homepageURL  https://gitlab.com/vednoc/dark-gitlab
@supportURL   https://gitlab.com/vednoc/dark-gitlab/issues
@updateURL    https://gitlab.com/vednoc/dark-gitlab/raw/master/gitlab.user.styl
@preprocessor stylus
@version      2.0.0-rc.13
@license      MIT

@var select   cg_theme     'Base color-scheme toggle' {
    'Custom colors          *': 'custom',
    'Dark blue (old)         ': 'old-colors',
    'Dark gray (new)         ': 'new-colors',
    'Breeze Dark             ': 'breeze-dark',
    'GitHub Dark             ': 'github-dark',
    'GitHub Dark Mode        ': 'github-dark-mode',
    'Gruvbox Dark Soft       ': 'gruvbox-dark-soft',
    'Gruvbox Dark Medium     ': 'gruvbox-dark-medium',
    'Gruvbox Dark Hard       ': 'gruvbox-dark-hard',
    'Solarized Dark          ': 'solarized-dark',
    'Dracula                 ': 'dracula',
    'Nord Dark               ': 'nord-dark',
    'Arc Dark                ': 'arc-dark',
    'Moonlight               ': 'moonlight',
    'Monokai                 ': 'monokai',
    'Horizon                 ': 'horizon',
    'Doom One                ': 'doom-one',
    'Deep Dark               ': 'deep-dark',
    'Brave Dark              ': 'brave-dark',
    'Twilight                ': 'twilight',
    'Ubuntu                  ': 'ubuntu',
}

@var color    cg_bg        'Base background color' #292929
@var color    cg_fg        'Base foreground color' #e6e6e6
@var color    cg_ac        'Base accent color    ' #d47d3f
@var range    cg_sat       'Adjust saturation of syntax colors' [0, -50, 40, 0.01]
@var range    cg_lig       'Adjust lightness of syntax colors' [0, -30, 30, 0.01]
@var color    _inverse     'Button inverse color ' #ffffff
@var color    _shadow      'Shadow color         ' #00000040

@var checkbox pcs_enable 'Apply when `(prefers-color-scheme: dark)` is enabled' 0
@var text     ui_font    'Custom UI font' '"font_name"'
@var text     mono_font  'Custom mono font' '"font_name"'
@var text     emoji_font 'Custom emoji font' '"font_name"'
@var text     a_radius   'Avatars: Custom border radius' 25%
@var range    md_img_o   'Markdown: Default image opacity' [1, 0.0, 1, 0.01]
@var checkbox ic_invert  'Chromium: Invert icons in Shadow DOM' 1
@var checkbox img_invert 'Invert illustrations to dark colors' 1
@var checkbox nb_height  'Navbar: Increase height' 1
@var checkbox nb_canary  'Navbar: Show canary badge' 1
@var checkbox c_hl_none  'Code: Use theme colors for "none" syntax hl theme' 1
@var checkbox c_ide      'Code: Enable IDE styles' 1
@var checkbox c_monaco   'Code: Enable Monaco Editor styles' 1
@var checkbox pipelines  'CI/CD: Compact pipelines' 0
@var checkbox dgl_alert  'Profile: Enable Dark-GitLab announcements' 0
@var checkbox sb_enable  'Global: Enable theme scrollbars' 1
==/UserStyle== */

/*!
 * NOTE: Modifying the code will put auto-update feature of Stylus on pause in
 * order to preserve your local changes. That means you need to manually update
 * Dark-GitLab and re-do your modifications in order to stay up-to-date.
 *
 * A way to add domains without modifying the code doesn't exist yet.
 * Relevant issue: https://github.com/openstyles/stylus/issues/307
 *
 * Make sure you have the latest version before submitting bug reports.
 */

// {{{ Helpers.
t       = transparent
i       = !important
vendors = official

// Convert colors to HSLA format.
/// NOTE: This is done just for consistency of generated colors.
to_hsla(input) {
    $h = {}
    $h.hue = unquote(split('deg', '%s' % ceil(hue(input), 2))[0])
    $h.saturation = ceil(saturation(input), 2)
    $h.lightness = ceil(lightness(input), 2)
    s('hsla(%s,%s,%s,1)', $h.hue, $h.saturation, $h.lightness)
}

// SVG-friendly colors mixin.
/// NOTE: Compiler does not like HSLA format, so we convert back to HEX.
to_svg(input) {
    s('\%23%s', unquote(substr(s('%s', convert(input)), 1, 6)))
}

// Color mixin.
/// All colors: `c: fg bg bg`
/// Only border-color: `c: 0 bg`
c(x, y = 0, z = 0, xi = 1, yi = 1, zi = 1) {
    if x != 0 && x != '_' {            color: xi is 0 ? x : x i }
    if y != 0 && y != '_' {     border-color: yi is 0 ? y : y i }
    if z != 0 && z != '_' { background-color: zi is 0 ? z : z i }
}

// SVG mixin.
/// Same usage as `c` mixin.
g(x, y = 0, xi = 1, yi = 1) {
    if x != 0 && x != '_' {   fill: xi is 0 ? x : x i }
    if y != 0 && y != '_' { stroke: yi is 0 ? y : y i }
}

// Border radius mixin.
rad() { border-radius: arguments }

// Box-shadow mixin.
b() { box-shadow: arguments }
// }}}

/{ // {{{ Color generator.
// Color-scheme picker.
ColorSchemes = {
    'custom':                   { BG:   cg_bg, FG:   cg_fg, AC:   cg_ac }
    'old-colors':               { BG: #1f232a, FG: #eeeeee, AC: #7289da }
    'new-colors':               { BG: #292929, FG: #e6e6e6, AC: #d47d3f }
    'breeze-dark':              { BG: #232629, FG: #eff0f1, AC: #3daee9 }
    'github-dark':              { BG: #181818, FG: #e6e6e6, AC: #4f8cc9 }
    'github-dark-mode':         { BG: #0d1117, FG: #c9d1d9, AC: #58a6ff }
    'gruvbox-dark-soft':        { BG: #32302f, FG: #fbf1c7, AC: #d65d0e }
    'gruvbox-dark-medium':      { BG: #282828, FG: #fbf1c7, AC: #d65d0e }
    'gruvbox-dark-hard':        { BG: #1c2021, FG: #fbf1c7, AC: #d65d0e }
    'solarized-dark':           { BG: #03303c, FG: #bcc5c5, AC: #859900 }
    'dracula':                  { BG: #282a36, FG: #f8f8f2, AC: #bd93f9 }
    'nord-dark':                { BG: #2e3440, FG: #eceff4, AC: #5e81ac }
    'arc-dark':                 { BG: #343944, FG: #c1c8d1, AC: #5294e2 }
    'moonlight':                { BG: #1e2030, FG: #c8d3f5, AC: #82aaff }
    'monokai':                  { BG: #272822, FG: #e8e8e3, AC: #fd9720 }
    'horizon':                  { BG: #1c1e26, FG: #d5c1ac, AC: #E95378 }
    'doom-one':                 { BG: #21242b, FG: #bbc2cf, AC: #51afef }
    'deep-dark':                { BG: #111111, FG: #eff0f1, AC: #00adee }
    'brave-dark':               { BG: #222222, FG: #d6d6d6, AC: #f96234 }
    'twilight':                 { BG: #171717, FG: #f7f7f7, AC: #8f9d6a }
    'ubuntu':                   { BG: #2c071a, FG: #f2f1ef, AC: #ef7847 }
}

// Select active color-scheme.
for color-scheme in ColorSchemes {
    if (color-scheme == cg_theme) {
        // main { dbg: s('%s %s', color-scheme, cg_theme) }
        define('BG', ColorSchemes[color-scheme].BG, global)
        define('FG', ColorSchemes[color-scheme].FG, global)
        define('AC', ColorSchemes[color-scheme].AC, global)
        define('ac', var(--ac), global)
    }
}

// Color values and hues.
// NOTE: List with anonymous hashes.
colors = (
    { key: bg, color:   BG } \
    { key: fg, color:   FG } \
    { key: v0, color:   AC } \
    { key: v1, hue:   0deg } \
    { key: v2, hue:  30deg } \
    { key: v3, hue:  60deg } \
    { key: v4, hue:  90deg } \
    { key: v5, hue: 180deg } \
    { key: v6, hue: 210deg } \
    { key: v7, hue: 270deg } \
    { key: v8, hue: 300deg } \
    { key: v9, hue:   0deg } \
)

// Alias colors.
$bg = colors[0]
$fg = colors[1]
// $dbg += '%s; %s; :::' % (($bg) ($fg))

// Generate background colors.
for num in 0..5 {
    $color = $bg.color
    if num == 1 {} // Skip base BG color.
    else if num == 0 { $color = darken($color, 10%) }
    else { $color = lighten($color, (num+2) * num/2%) }
    $color = to_hsla($color)

    $key = s('%s%s', $bg.key, num)
    $val = 'var(--%s-%s)' % (($bg.key) (num))
    define('$' + $key, $color, global)
    define('' + $key, $val, global)
}

// Generate foreground colors.
for num in 0..5 {
    $color = $fg.color
    if num == 1 {} // Skip base FG color.
    else if num == 0 { $color = lighten($color, 10%) }
    else { $color = darken($color, (num + num/1.25) * 5%) }

    $color = desaturate($color, 90%)
    $color = to_hsla($color)
    // $dbg += '--- FG: ' + $color

    $key = s('%s%s', $fg.key, num)
    $val = 'var(--%s-%s)' % (($fg.key) (num))
    define('$' + $key, $color, global)
    define('' + $key, $val, global)
}

// Generate all other colors.
for c, i in colors[2..length(colors)] {
    // $dbg += s('::: c: %s, i: %s; ', c, i )
    // if c.key == v9 { $dbg += s('::: c: %s, i: %s; ', c, i ) }
    $sel  = colors[i+2]
    $dbg += ' ' + $sel

    for num in 0..9 {
        /// Case for accent colors.
        if ($sel.key == v0) {
            $color = darken($sel.color, (80% - ((num + num/3) * 7.5)))
            $color = darken($sel.color, (100% - (num+3) * 7.5))
            $color = lightness($color, lightness($color) + num)
        }

        /// Case for gray colors.
        else if ($sel.key == v9) {
            $color = hsl($sel.hue, 0%, 50% + cg_lig)
            $color = darken($color, (100% - (num+2) * 17))
        }

        /// Case for RGB colors.
        else {
            $hue   = $sel.hue
            $color = hsl($hue, 60% + cg_sat, 60% + cg_lig)
            $color = darken($color, (100% - (num+2) * 7.5))
            $color = lightness($color, lightness($color) + num)
        }

        /// Convert to HSLA format.
        $color = to_hsla($color)

        $key = s('%s%s', $sel.key, num)
        $val = 'var(--%s-%s)' % (($sel.key) (num))
        define('$' + $key, $color, global)
        define('' + $key, $val, global)
    }
}
} /// }}}

@-moz-document domain('custom.domain'),
domain('invent.kde.org'),
domain('git.pleroma.social'),
domain('gitgud.io'),
domain('salsa.debian.org'),
domain('framagit.org'),
domain('repo.getmonero.org'),
domain('0xacab.org'),
domain('dev.gajim.org'),
domain('devel.trisquel.info'),
domain('git.cit.bcit.ca'),
domain('git.coop'),
domain('git.dev.ctu.univ-fcomte.fr'),
domain('git.drk.sc'),
domain('git.empiresmod.com'),
domain('git.fosscommunity.in'),
domain('git.immc.ucl.ac.be'),
domain('git.jami.net'),
domain('git.linux-kernel.at'),
domain('git.nzoss.org.nz'),
domain('git.silence.dev'),
domain('lab.libreho.st'),
domain('opencode.net'),
domain('skylab.vc.h-brs.de'),
domain('vbscan.fisica.unimib.it'),
domain('git.cardiff.ac.uk'),
domain('git.igwn.org'),
domain('git.ligo.org'),
domain('forge.tedomum.net'),
domain('git.callpipe.com'),
domain('git.happy-dev.fr'),
domain('source.ind.ie'),
domain('mau.dev'),
domain('source.puri.sm'),
domain('git.oeru.org'),
domain('git.najer.info'),
domain('gitplac.si'),
regexp('^https?://(www\.)?git\.(gnu|synz)\.io(/.*)?$'),
regexp('^https?://(www\.)?code\.((videolan|briarproject)\.org|foxkit\.us)(/.*)?$'),
regexp('^https?://(www\.)?source\.(small-tech|joinmastodon)\.org(/.*)?$'),
regexp('^https?://(www\.)?git\.(drupalcode|feneas|ouru|pwmt|regardscitoyens)\.org(/.*)?$'),
regexp('^https?://(www\.)?(joonpc\.skku\.edu/gitlab|mpegx\.int-evry\.fr/software)(/.*)?$'),
regexp('^https?://(web.archive.org/web/.*)?((next|www)\.)?(gitlab\.(?!(io|biterg)).*)(/.*)?$') {
    if (pcs_enable) {
        { unquote('@media (prefers-color-scheme: dark) {') }
    }

    // Dark-GitLab variables.
    :root {
        --version   : '🌚 Dark-GitLab v2.0.0-rc.13';
        --bshadow   : 0 4px 8px var(--shadow);
        --shadow    : _shadow
        --inverse   : _inverse
        --avatar    : a_radius
        --ac        : AC

        /// Custom UI font.
        $fs1 = -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans'
        $fs2 = 'Noto Sans', Ubuntu, Cantarell, 'Helvetica Neue', sans-serif
        --ui-font: ui_font, $fs1, $fs2, sans-serif, var(--emoji-font)

        /// Custom Monospace font.
        $fm1 = 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas'
        $fm2 = 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console'
        --mono-font: mono_font, $fm1, $fm2, monospace

        /// Custom Emoji font.
        $fe1 = 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
        --emoji-font: emoji_font, $fe1, 'Noto Color Emoji'

        /// Generate CSS color variables.
        colors = (bg fg v0 v1 v2 v3 v4 v5 v6 v7 v8 v9)
        for color in colors[0..1] {
            for tone in 0..5 {
                { '--%s-%s' % ((color) (tone)) }: $ + color + tone
            }
        }
        for color in colors[2..length(colors)] {
            for tone in 0..9 {
                { '--%s-%s' % ((color) (tone)) }: $ + color + tone
            }
        }

        /// Colors for CI status icons in Firefox.
        @supports (-moz-user-select: none) {
            --svg-status-bg: var(--bg-1)
        }
        /// Prevents horizontal overflow. @upstream
        overflow-x: hidden;
    }

    // Interop with new variables.
    // TODO: Remove when the refactor is complete.
    bb      = var(--bg-0)
    bg      = var(--bg-1)
    hl      = var(--bg-2)
    bd      = var(--bg-5)
    fg      = var(--fg-1)
    cm      = var(--fg-4)
    sh      = var(--shadow)
    bsh     = var(--bshadow)
    red     = var(--v1-5)
    orange  = var(--v2-5)
    yellow  = var(--v3-5)
    green   = var(--v4-5)
    cyan    = var(--v5-5)
    blue    = var(--v6-5)
    magenta = var(--v7-5)
    violet  = var(--v8-5)
    white   = var(--inverse);
    outer   = 0 0 0 1px bg5;
    inner   = inset outer;

    /// Feat -> Set 'none' syntax preset to use theme colors.
    if (c_hl_none) { c-hl-none = ', .code.none' }

    // Base styles.
    body {
        font-family: var(--ui-font) i;

        /// Default page colors.
        &, &.navless { c: fg1 0 bg0 }

        /// Browser styles.
        a { &, &:hover { color: ac }}
        hr { border-color: bg3 }
        h, .h { &1, &2, &3, &4, &5, &6 { color: fg }}
        time { color: inherit }
        :not(pre) > code {
            c: fg 0 hl 0 0 0;
            box-shadow: inner;
        }
        pre {
            c: fg bd hl 0 0 0;
            /// Commits -> Messages / Details.
            &[class*="description"] {
                border-left-width: 4px;
                font-size: 0.875rem;
                c: fg2 bg5
            }
            /// Global -> Reset raw file content.
            ../ > pre:not([class]) { c: 0 0 t }
        }
        kbd {
            rad: 3px
            c: fg 0 hl;
            box-shadow: inner, inset 0 -3px bg4 i
        }
        /// Misc link colors.
        .gl-link { &, &:hover { color: ac }}
        .author-link, /.branch-commit .commit-sha { color: ac }
        /// Custom monospace font.
        .text-monospace,
        .code.diff-table,
        pre, code, kbd, samp, .monospace, .ref-name,
        .commit-sha, .pipeline-number, .label-branch,
        .git-revision-dropdown .dropdown-content ul li a,
        table.code, [class *= 'git-commit'] {
            font-family: var(--mono-font) i;
        }
        .container { c: 0 bd }
        /// Settings -> Account.
        .danger-title, .gl-field-error, .invalid-feedback { c: v16 }
        [class^='price-'] { c: v67 }
        .warning-title { c: v26 }
        .legend-success, .valid-feedback { c: v46 }
        .account-well { c: fg bd hl }

        /// Settings -> Fix QR code. #108
        [class *= 'two-factor-auth'] svg {
            c: 0 0 white;
            box-shadow: 0 0 0 4px white;
        }
        /// Global -> Progress bar.
        .progress {
            c: 0 0 bg5

            /// Progress bar percentage.
            &-bar.bg-primary { c: 0 0 v09 }

            /// Project -> Languages bar.
            &.repository-languages-bar {
                c: 0 0 bg3

                /// Remove whitespace. #149
                .progress-bar {
                    margin-right: unset
                    /// NOTE: Removing margins leaves out empty space.
                    &:last-child:nth-child(-n+4) { flex-grow: 1 }
                }
            }

            /// OBSOLETE: Override old colors for languages.
            [style*='#375eab'] { c: 0 0 #00ADD8 } /// Go-lang.
            [style*='#776791'] { c: 0 0 #000100 } /// Crystal.
        }
        /// Global color reset.
        .text {
            &-info:not(#z) { c: v66; > svg { g: v66 }}
            &-danger:not(#z) { c: v16; > svg { g: v16 }}
            &-success:not(#z) { c: v46; > svg { g: v46 }}
            &-warning:not(#z) { c: v26; > svg { g: v26 }}
            &-plain, /.light { c: fg1 }
            &-secondary, &-muted, &-gl-muted, &-tertiary,
            /.cgray, /.description-block, /.help-block,
            /.canary-deployment-callout-message, /// (--gray-500) Operations -> Environments.
            /[class *= 'gl-text-gray-'], /.help-text, /.stat-text {  /// 2: snippets -> new
                c: fg4
            }
        }
        /.bg {
            &-light { c: 0 0 bd }
            &-danger { c: 0 0 red }
            &-danger-100 { c: 0 0 v11 }
            &-secondary { c: 0 0 hl }
            &-success { c: 0 0 green }
            &-white, &-gray-light { c: 0 0 bg }
        }
        .border-bottom, .bordered-box { c: 0 bd }
        /// Profile -> Calendar activities.
        .bordered, .unstyled { &-list > li { c: 0 bd }}
        /// Scrollbars.
        if (sb_enable) {
            /html { scrollbar-color: bg4 bg2 }
            /::-webkit-scrollbar {
                width: 12px;
                &-track { background: bg2 }
                &-thumb { background: bg4 }
            }
        }
        /// Placeholders.
        ::placeholder { c: cm }
        ::-webkit-input-placeholder { c: cm }
        /// Login page.
        .page-wrap {
            c: 0 0 t;
            .brand-holder p { c: fg3 }
            /// Footer styles.
            hr.footer-fixed {
                padding-top: 24px;
                margin-bottom: 0;
                c: 0 0 bg1
                + .footer-container { c: 0 0 t }
            }
            /// Login.
            .login-box, .signup-box, .omniauth-container {
                rad: 4px
                c: 0 bg5 bg2
                b: inner i
                /.omniauth-btn {
                    c: 0 0 bg1
                    &:hover { c: 0 0 bg3 }
                }
                /.omniauth-divider { &::before, &::after { c: 0 bg5 }}
                input.form-control { c: 0 0 bg }
            }
            /// Reset page height.
            /.devise-layout-html body.navless { height: calc(100% - 41px) }
        }
        /// Global -> FA icons.
        /.fa {
            c: cm;
            &&-triangle, &.merge-icon { c: orange }
            /// Global -> Menu icon.
            &&-bars:not(#z) { c: fg }
            /// CI/CD -> Charts. OBSOLETE
            /.legend-success &-circle,
            /// Issues -> Export issues.
            &.checkmark { c: green }
            /// MRs -> First contribution.
            &&-certificate { c: ac }
            /// Settings -> CI/CD runners.
            &[class *= 'paused'] { c: red }
            &[class *= 'online'] { c: green }
        }
        /// Feat -> Invert icons in Shadow DOM.
        if (ic_invert) {
            @supports not (-moz-user-select: none) {
                .created-icon, .opened-icon, .ic-upload,
                .gl-icon[data-testid *= 'status_'], // #135
                [class *= 'ci-status'] svg {
                    filter: invert(0.85) hue-rotate(180deg) saturate(100%);
                }
                /// Increase contrast for gray icons.
                :not(#z) .ci-status-icon {
                    &-created svg, &-skipped svg { g: #333 }
                }
            }
        } else {
            /:root { --svg-status-bg : var(--dark) i }
        }
        /// Global -> Callouts.
        .bs-callout {
            rad: 4px
            c: fg1 bg5 bg3

            a:not(.btn) { c: ac }
            strong { color: inherit i }
            &-warning { c: v98 v25 v21 }
            &-success { c: v98 v45 v41 }
            &-danger { c: v98 v15 v11 }
            &-info { c: v98 v65 v61 }
            .btn-default, code:not([class]) { c: 0 0 bg }

            /// Project -> Settings -> CI/CD.
            &.help-callout,
            &.shared-runners-description {
                c: fg bd hl;
                /// Reset background color.
                code, .btn-default { c: 0 0 bg }
            }
            /// Project -> Settings -> MR promotion.
            /.user-callout.promotion-callout {
                c: 0 0 hl;
                .bordered-box { c: 0 0 hl }
                /// Project -> Settings -> Audit events.
                &.center {
                    padding-bottom: 10px;
                    border: 1px solid bd;
                    rad: 4px;
                }
                /// Fix GitLab Gold trial.
                &.js-gold-trial-callout > div { margin: 0 -16px }
            }
            /// Project -> Operations -> K8s.
            &.gcp-signup-offer { c: fg blue }
        }
        /// Project -> Settings -> Pages.
        .border-section { c: 0 bd }
        /// Global -> Mobile resolution.
        .scrolling-tabs-container {
            .fade-right { background: linear-gradient(to left, hl 45%, t) }
            .fade-left { background: linear-gradient(to right, hl 45%, t) }
        }
        .toggle-mobile-nav + .breadcrumbs-links { c: 0 bd }
        /// Project -> Forks.
        /.fork-thumbnail {
            c: 0 0 bg;
            &:hover:not(.disabled), &.forked { c: 0 0 hl }
        }
        /// Notes -> Sticky header.
        .issue-sticky-header {
            top: (nb_height) ? 50px i : 40px i;
            c: 0 bg5 bg1
        }
        /// Settings -> Fix 'preview theme' borders.
        .preview { &.ui-dark, &.gl-dark { c: 0 bd }}
    }

    /// Global -> SVG icons.
    svg {
        &.s16, &.s24, &.icon { g: fg3 }

        /// Activity icons.
        /.deleted, /.closed { &-icon svg { g: v16 }}
        /.created, /.joined, /.opened { &-icon svg { g: v46 }}
        /.commit, /.pushed-new, /.pushed-to { &-icon svg { g: fg4 }}
        /.imported, /.commented-on, /.accepted { &-icon svg { g: v66 }}

        /// CI/CD runners. #170
        &[data-testid="status-active-icon"] { g: v45 }

        /// Misc.
        &.ic-eye-slash { g: v26 } /// Confidential issues.
        &.text-success { g: v46 } /// Green checkmark.
        &.text-danger { g: v16 } /// Due date.

        /// Diff -> Git status icons.
        &.file-addition { &, &-solid { g: v46 }}
        &.file-modified { &, &-solid { g: v66 }}
        &.file-deletion { &, &-solid { g: v16 }}
        &[id*='addition-solid'] { g: v46 }

        /// Notes -> Related isses/MRs/epics.
        &.issue-token-state-icon {
            &-open { g: v46 }
            &-closed { g: v66 }
        }
        &.merge-request-status {
            &.open { c: v46; g: v46 }
            &.closed { c: v16; g: v16 }
        }

        /// Notes -> Merge icon.
        &.merge-icon:not(#z) {
            g: v29
            filter: drop-shadow(0 0 0.5px bg2) \
                    drop-shadow(0 0 1px bg2) \
                    drop-shadow(0 0 2px bg2) i
        }

        /// Pipelines -> Jobs.
        /// NOTE: Icons in this area are slightly problematic, so this fixes them.
        &.s16[data-testid *= 'status_'] { g: currentColor }

        /// CI -> Background for old icons.
        /[id *= 'status_'] [fill = '#FFF'] { g: bg1 }

        /// CI -> Text.
        .ci-status-text {
            max-width: 100%;
            margin-right: 35px;
        }

        /// CI -> Status icons.
        /.ci-status {
            c: fg1 bg5 bg1 1 0

            /// Badges.
            &.ci {
                &-failed { c: v16 v16 }
                &-success { c: v46 v46 }
                &-info, &-running { c: v66 v66 }
                &-created, &-skipped { c: fg3 fg3 }
                &-canceled, &-disabled, &-scheduled, &-manual { c: fg5 fg5 }
                &-pending,
                &-waiting-for-resource,
                &-failed-with-warnings,
                &-success-with-warnings {
                    c: v26 v26
                }
            }

            /// Icons.
            &-icon {
                &-success {
                    &[class *= 'dropdown'], svg { c: 0 v46 }
                    &:not(#z), &[data-toggle] { svg { g: v46 }}
                }
                &-running, &-preparing {
                    &[class *= 'dropdown'], svg { c: 0 v66 }
                    &:not(#z), &[data-toggle] { svg { g: v66 }}
                }
                &-failed {
                    &[class *= 'dropdown'], svg { c: 0 v16 }
                    &:not(#z), &[data-toggle] { svg { g: v16 }}
                }
                &-pending, &-waiting-for-resource,
                &-failed-with-warnings, &-success-with-warnings {
                    &[class *= 'dropdown'], svg { c: 0 v26 }
                    &:not(#z), &[data-toggle] { svg { g: v26 }}
                }
                &-created, &-skipped {
                    &[class *= 'dropdown'], svg { c: 0 fg3 }
                    &:not(#z), &[data-toggle] { svg { g: fg3 }}
                }
                &-manual, &-canceled, &-disabled, &-scheduled, &-not-found {
                    &[class *= 'dropdown'], svg { c: 0 fg5 }
                    &:not(#z), &[data-toggle] { svg { g: fg5 }}
                }
            }

            /// Reset background.
            /button[class *= 'ci-status-icon-'] { c: 0 0 bg1 }
        }
    }

    // Global -> Custom checkbox/radio inputs.
    input {
        r       = unquote
        prefix  = 'data:image/svg+xml;utf8,'
        arrows  = prefix + '<svg xmlns="http://www.w3.org/2000/svg" '
        prefix += '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">'
        arrows += 'width="101" height="101" view-box="0 0 101 101" preserveAspectRatio="none">'

        &[type='radio'],
        &[type='checkbox'] {
            &:hover { box-shadow: none i }
            &, &:focus, &:hover:active {
                -webkit-appearance: none i
                -moz-appearance: none i
                appearance: none i
                cursor: pointer i
                height: 1rem i
                width: 1rem i
                border: 1px solid bg5 i
                background-size: cover i
                c: fg1 0 bg2
            }

            /// Custom checkbox/radiobox. #168
            &.custom-control-input {
                &:checked ~ label::before { c: 0 v08 v04 }
                &:focus ~ label::before { b: 0 0 0 0.2rem v01 }
                ~ label::before { c: 0 bg5 bg2 }
            }
        }

        /// Checkboxes.
        &[type='radio'] {
            border-radius: 100% i
            &:checked {
                z = '<circle cx="256" cy="256" r="128" fill="white"/>'
                background-image: s("url('%s%s</svg>') %s", r(prefix), r(z), i)
                &:checked { c: 0 v08 v04 }
            }
        }

        &[type='checkbox']:checked {
            z ='<path fill="white" d="M99 213l-1 89 104 102 205-201v-91L203 315 99 213z"/>'
            background-image: s("url('%s%s</svg>') %s", r(prefix), r(z), i)
            c: 0 v08 v04
        }
        &[type='checkbox']:indeterminate {
            z = '<rect x="128" y="192" width="256" height="96" fill="white"/>'
            background-image: s("url('%s%s</svg>') %s", r(prefix), r(z), i)
            c: 0 v18 v15
        }

        /// Sort arrows.
        /[aria-sort='ascending'] {
            x = s('<path fill="%s" d="M51 1l25 23 24 22H1l25-22z"/>', to_svg($v09))
            y = '<path fill="gray" opacity=".6" d="M51 101l25-23 24-22H1l25 22z"/>'
            background-image: s("url('%s%s%s</svg>') %s", r(arrows), r(x), r(y), i)
        }
        /[aria-sort='descending'] {
            x = '<path fill="gray" opacity=".6" d="M51 1l25 23 24 22H1l25-22z"/>'
            y = s('<path fill="%s" d="M51 101l25-23 24-22H1l25 22z"/>', to_svg($v09))
            background-image: s("url('%s%s%s</svg>') %s", r(arrows), r(x), r(y), i)
        }

        /// Down chevron.
        /.swagger-ui select,
        /.select2-arrow {
            x  = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" '
            x += s('viewBox="0 0 48 48" width="34" height="34" stroke="%s" ', to_svg($fg3))
            x += 'stroke-width="3" stroke-linecap="round" stroke-linejoin="round" '
            x += 'fill="none"><polyline points="6 9 12 15 18 9"></polyline></svg>'
            background: s("url('%s') 10px 9px %s", r(x), i)
        }

        /// Checkmarks.
        /#notifications-button + ul li .is-active,
        /.dropdown-menu-selectable > .gl-new-dropdown .is-active,
        /.dropdown-menu-toggle + .dropdown-menu-selectable li .is-active {
            x  = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" '
            x += 'viewBox="0 0 48 48" width="32" height="32" stroke-width="3" '
            x += 'stroke-linecap="round" stroke-linejoin="round"><polyline '
            x += s('stroke="%s" points="20 6 9 17 4 12"></polyline></svg>', to_svg($v09))
            background-image: s("url('%s') %s", r(x), i)
            background-position: 14px 8px
            background-repeat: no-repeat
        }

        /// Issues -> Import CSV | Projects -> Import manifest.
        &[type='file'][id] {
            filter: invert(0.8) hue-rotate(180deg)
            c: 0 0 t
        }
    }

    // Admin.
    /{
        /// -> Performance bar.
        .with-performance-bar {
            .production {
                c: 0 0 bg;
                box-shadow: inset 0 -1px bd i;
            }
            /// Queries -> Rounded corners.
            .backtrace-row { rad: 4px }
            /// Bar -> Menu.
            select {
                border: 1px solid bd i;
                c: fg 0 hl;
            }
            /// Feat -> Navbar height option.
            if (nb_height) {
                .layout-page, .content-wrapper  { margin-top: 85px i }
            }
        }
    }

    // Global -> Navbar.
    .navbar {
        display: flex
        align-items: center

        /// Wrapper.
        &-gitlab, &&-empty {
            border-bottom: 1px solid bg5 i
            c: 0 0 bg2
        }

        /// Logo.
        .title {
            > a {
                margin: 4px 2px 4px -8px i;
                &[href='/'] {
                    &:hover { c: 0 0 bg3 }
                    &:active, &:focus { c: 0 0 bg4 }
                }
            }
            .logo-text svg { fill: fg i }
        }
        /// Feat -> Show canary badge.
        if (!nb_canary) {
            .canary-badge { display: none i }
        } else {
            .canary-badge > .badge { c: white green green }
        }

        /// Lists.
        ul[class] {
            c: cm;
            > li {
                > button, > a {
                    &, > svg { transition: 0.2s ease }
                    &[data-toggle] { c: fg3 }
                    &:hover:not([aria-expanded='true']) {
                        c: fg2 0 bg3
                        > svg { g: fg2 }
                    }
                }
                /// Active menus.
                &.active, &.active:hover, &.show {
                    > button, > a {
                        c: fg1 0 bg4
                        > svg { g: fg1 }
                    }
                }
                > *:focus { c: fg2 0 bg4; svg { g: currentColor } }
                .caret-down { g: cm }
            }

            /// Added in GitLab v14.0.
            .top-nav-menu-item {
                &:hover, &:focus { c: 0 0 bg3 }
                &.active { c: 0 0 bg4 }
            }

            /// 'Edit status' button.
            .current-user + li + li > .btn-link { c: fg3 }
        }
        /// Help menu.
        .header-help li:first-child {
            /// Divider-like margin.
            > a { margin-top: 0.25rem }
            /// Embed theme version.
            &::before {
                content: var(--version)
                display: block;
                padding: 4px 12px 6px;
                border-bottom: 1px solid bd;
                color: fg;
            }
            /// Added in GitLab v13.8.
            /.notification-dot {
                c: 0 bg2 fg3
                /.show > a & { c: 0 bg4 fg1 }
                /.whats-new-notification-count { c: fg1 0 bg4 }
            }
        }
        /// User menu -> Reset avatar.
        .header-user-avatar {
            border: none i;
            c: cm 0 t;
            rad: var(--avatar);
        }
        /// Sign in / register.
        .btn-sign-in { color: fg2 }
        /// Feat -> Increase navbar height.
        if (nb_height) {
            min-height: 50px;
            /.nav-sidebar { top: 50px }
            /.layout-page, /.content-wrapper  { margin-top: 50px }
            /// Dropdown menu tweaks.
            .show > .dropdown-menu { margin-top: 8px i }
            .search-input-container .dropdown-menu { margin-top: 14px i }
        }
        /// 'Skip to content' button.
        /.gl-accessibility:focus { c: fg 0 bd }
        /// Mobile -> Toggle colors.
        &-toggler {
            border-left-color: bd i;
            svg { g: cm }
        }
        /// Dark mode tweaks.
        .search-form {
            > form { b: none i }
            &:focus-within > form { b: 0 0 0 0.2rem v63 i }
            &.search-active > form { c: 0 v65 }
        }
        &-gitlab { box-shadow: none i }
        /// Fix 'down-arrow' size. @upstream
        svg.s16[data-testid='angle-down-icon'] { width: 11px }

        /// Navbar -> Fix whitespace on GitLab 10.4. OBSOLETE
        > div {
            margin: 0 auto i
            padding: 0 i
            width: 100% i
            display: flex i
            align-items: center i
            justify-content: center i
            > .header-content { width: 100% }
        }
    }

    // Global -> Tables.
    table {
        /// Base styles.
        &:not(.code) {
            c: fg1
            th { c: fg1 0 bg2 }
            th, td { c: 0 bg5 }

            /// Reset colors.
            thead { c: 0 bg5 }
            tbody { c: 0 0 t }
        }

        /// Reset stacked tables. !41
        &[class*='table-stacked'] {
            thead[role='rowgroup'] th { border-top: 1px solid bg5 }
            @media (max-width: 991.98px) {
                tr[role='row'] > td[aria-colindex='1'] { c: 0 0 bg2 }
            }
        }

        /// Admin -> SQL queries.
        > tr {
            td { c: 0 bd }
            &:first-child > td { border-top: none }
        }

        /// AsciiDoc resets.
        &.grid-all {
            > caption { padding: 10px 16px; c: fg3 0 bg2 }
            > tbody > tr {
                /// Reset cells.
                > th:first-child {
                    border-top: none i
                    border-bottom: 1px solid bg5 i
                }
            }
        }

        /// Settings -> Striped tables.
        &.table-striped, &.active-tokens, &.pipeline-project-metrics {
            border: 1px solid bd;
            thead > tr > th { border-top: none }
            tbody tr {
                &:nth-of-type(2n+1) > td { c: 0 0 bg0 }
                /// Analytics -> Issues.
                &:not(:first-child) > td.issues-analytics-td {
                    &, ~ td { border-top: none i }
                }
            }
        }

        /// Markdown areas.
        /// NOTE: Authorized apps, AsciiDoc, Markdown.
        // &.table-bordered,
        &.table-striped,
        &.grid-all,
        &[dir] {
            overflow: hidden
            border-spacing: 0
            border-collapse: collapse
            max-width: max-content
            position: relative
            c: fg1 t bg1
            rad: 4px i

            /// HACK: Add rounded corners.
            &::before {
                o = 0px
                content: ''
                position: absolute
                top: o; right: o; bottom: 0; left: 0
                pointer-events: none i
                border: 1px solid bg5
                rad: 4px
            }

            /// Resets.
            thead th {
                border-bottom-width: 1px i
                c: 0 bg5 bg2
             }
             tbody {
                c: 0 0 t
                tr > td { c: 0 bg5 bg1 }
                // tr:nth-child(2n) > td { c: 0 0 bg2 }
             }
         }

        /// Project -> Files.
        &.tree-table {
            border-spacing: 0
            border-collapse: unset
            border: 1px solid bg5 i
            rad: 4px i
            c: 0 0 bg1

            /// Items.
            thead tr {
                > th { border-top: none i }
                > th:first-child { border-top-left-radius: 4px i }
                > th:last-child { border-top-right-radius: 4px i }
            }
            tbody {
                tr {
                    > td {
                        border-top: 1px solid bd i
                        border-bottom: none i
                    }
                    &:hover > td { c: 0 0 bg2 }
                    &:last-of-type {
                        > td:first-child { border-bottom-left-radius: 4px i }
                        > td:last-child { border-bottom-right-radius: 4px i }
                    }

                    /// Fix selected row. #161
                    &.selected td { c: 0 0 bg3 }
                    ../../.files-slider tr:first-child td { border-top: none i }
                }
            }

            /// Text colors.
            /.tree {
                &-item-file-name { &, a, i { c: fg1 }}
                &-commit { &, &-link { c: fg3 }}
                &-time-ago { c: fg3 }
            }
        }

        /// Project -> Security.
        /.vulnerability-list thead th { box-shadow: 0 1px bd i }

        /// Project -> Settings -> Badges.
        /.gl-responsive-table-row {
            c: fg3
            &:not(:last-child) { c: 0 bg3 }
            &-clickable:hover { c: 0 0 hl }
            /// Settings -> Usage quotas -> Storage.
            &.bg-gray-light { c: 0 0 bg 0 }
            &-clickable:hover { c: 0 0 bg2 }
        }

        /// Project -> Pipelines.
        /.ci-table {
            margin-top: 10px;
            border: 1px solid bd;
            c: fg1 0 bg1
            rad: 4px;
            [class *= 'header'] {
                padding: 12px 16px;
                font-size: 14px
                c: fg1 bg5 bg3
                rad: 3px 3px 0 0;
            }
            [class $= 'table-row'] {
                padding: 8px 16px;
                c: fg bd bg;
                &:last-child {
                    border-bottom: none i;
                    rad: 0 0 3px 3px;
                }
                &:hover { c: 0 0 bg2 }
            }
            .pipeline-actions { padding-right: 16px }
            /.js-run-mr-pipeline { margin-right: 16px }
            /// Project -> Jobs -> Fix icons and table cells. #98
            .sprite { g: cm }
            > tbody > .build {
                + tr + tr > th { b: inset 0 1px bg5 i }
                > td { border-top: 1px solid bd i }
                &:hover { c: 0 0 bg2 }
            }
            /// Text colors.
            .commit-sha, .gfm-commit { c: ac }
            .ref-name,
            .pipeline-id, .table-mobile-header,
            .build-link, .build-name a {
                c: fg;
            }
            /.duration,
            /.finished-at {
                c: cm;
                svg path { g: cm }
            }
            /// Jobs -> Pipelines.
            &.pipeline tbody {
                > tr > th { c: fg bd bb }
                > tr > td { border-top: 1px solid bd i }
            }
            /// Icons -> Fix background.
            path[fill = '#FFF'] { g: hl }
            /// Pipelines -> Jobs. #125
            .build.retried { c: 0 0 bb }
            /// Schedules -> Links. #163
            .pipeline-schedule-table-row {
                .next-run-cell { c: fg3 }
                a { c: fg1 }
            }
        }

        /// Project -> CI/CD -> Variables.
        /.ci-variable-table table {
            colgroup col:nth-child(7) { width: 50px i }
            tr th, tr td { &:first-child { padding-left: 16px }}
        }

        /// Project -> Import.
        &.import-table {
            border: 1px solid bd i;
            thead th { border: none i; c: 0 0 hl }
            tbody {
                tr:hover td { c: 0 0 bb }
                td { border-top: 1px solid bd i }
            }
            /.import-slash-divider { c: 0 bd bb }
            /// Project -> Import in progress.
            /.save-project-loader { c: cm }
        }

        /// Reset misc tables.
        &.integration-list { border: none }
        &.shortcut-mappings th { c: 0 0 t }

        /// Who cares about semantic HTML anyways? #88 @upstream
        td.d-sm-block { display: table-cell i }
    }

    // Global -> Dropdowns.
    [class*='dropdown-menu'] {
        $t = color, border, background
        c: fg1 bg5 bg2 0 0 0

        /// Toggle button.
        &[type] {
            c: fg1 bg5 bg2 0 0 0
            transition: $t 0.2s ease

            /// States.
            &:hover { c: 0 0 bg3 0 0 0 }
            &:focus { c: 0 bg5 bg4 0 0 0 }
            &[aria-expanded='true'] {
                c: 0 bg5 bg4 0 0 0
                b: 0 0 0 1px bg1, 0 0 0 0.25rem v64 i
            }

            /// New SVG icons.
            ../[data-testid*='chevron'] { c: 0 0 t }

            /// OBSOLETE: Old toggle buttons in nav blocks.
            /.dropdown > button.dropdown-toggle {
                &:not(.gl-button) {
                    c: fg1 bg5 bg1
                    &:hover { c: 0 0 bg3 }
                    &:focus { c: 0 bg5 bg4 }
                }

                /// Issues -> Three dots menu.
                &-no-caret { c: 0 0 t }
            }
        }

        /// Menu.
        &.show {
            rad: 4px
            c: 0 bg5 bg2 0 0 0
            b: var(--bshadow)
        }

        /// Active styles.
        /.show.dropdown {
            > .btn { c: 0 bg5 bg4 0 0 0 }
            /// Exclude colored buttons.
            > button[class*='dropdown-']:not([class*=' btn-']) { c: 0 bg5 bg3 }
        }

        /// Shared styles.
        .dropdown {
            &-loading { c: 0 0 hl; opacity: 0.9 }
            &-title, &-header { c: fg0 bg5 }
            &-info-note { c: fg3 }
            &-footer { c: 0 bg5 }

            /// NOTE: New issue 'type' menu. @upstream
            &-toggle-text.is-default { c: fg1 }

            /// Boards -> Add list.
            &-tab {
                &s-list { b: none i }
                &-item {
                    padding: 0 i
                    c: 0 bg5

                    /// Reset items.
                    a {
                        border-width: 1px i
                        c: 0 bg5 bg1
                        &.active { c: fg1 t bg2 }
                    }
                }
            }

            /// Inputs.
            &-input-field {
                rad: 4px
                c: fg1 bg5 bg1
                &:focus { c: 0 v65; b: 0 0 0 0.2rem v63 }
            }
        }

        /// Overrides for items.
        & {
            [class*='separator'] { c: 0 0 bg5 }
            [class*='divider'] { c: 0 bg5 bg5 }
            [class*='-content'] { c: fg3 0 t }
            [class*='-title'] { c: fg0 0 t }
            .search-item-avatar { c: 0 bg5 }
            strong, .bold, .text { c: fg1 }
            .btn-helptext { c: fg5 }

            li {
                /// Remove 1px padding on the sides.
                padding-left: 0
                padding-right: 0

                /// Items.
                /// 3: Navbar -> User -> Edit status.
                > a, button, .menu-item {
                    color: fg3
                    &.is-active { c: fg1 }

                    /// Hover state.
                    /// TODO: Tweak these things.
                    &:focus,
                    &:active,
                    &:not(.disable-hover):not(.active):hover {
                        c: fg1 0 bg3 //0 0 0
                    }

                    /// NOTE: Might cause conflicts somewhere.
                    &.is-focused {
                        &, &:hover:not(#z) { c: fg1 0 bg4 }
                    }
                    &.is-active:not(#z) { c: v09 }
                }

                /// Remove focus ring.
                button:focus { b: none i }

                /// New GitLab dropdowns.
                p { c: fg3 }
            }
        }

        /// Navbar -> Projects/groups.
        /.frequent-items-dropdown {
            &-sidebar { c: 0 bg5 }
            &-container {
                li { padding: 0 1px }
                [class*='-item-title'] { c: fg1 }
                [class*='-namespace'] { c: fg4 }

                /// Fix text for header and no results.
                .section { &-header, &-empty { c: fg4 }}
            }
        }

        /// Navbar -> To-do list menus.
        /.dropdown-menu-user {
            &-link:not(:hover) { strong, span { c: fg3 }}
            &-name, &-full-name, &-username { c: 0 0 t }
        }

        /// Navbar -> User menu.
        li.current-user {
            c: fg1
            .bold, .user-status { c: fg1 }
        }

        /// Buttons -> Reset hover styles.
        &.more-actions-dropdown button:not([disabled]) {
            c: fg3
            &:hover, &:active { c: fg1 0 bg3 }
            &:focus { c: fg1 0 bg4 }
        }

        /// Pipelines -> Grouped pipeline menu counter/caret.
        [class*='counter-badge'] { font-weight: normal; c: fg3 }
        &[class*='mini-pipe'], &[class*='big-pipe'] {
            &::before, &::after { c: 0 t }
        }

        /// Select2 component.
        /.select2 {
            &-choice { &, &s { c: fg1 bg5 bg2 }}

            /// Down chevron.
            &-chosen {
                margin-right: 25px i
                padding-right: 10px
            }
            &-arrow {
                padding: 0 16px
                width: unset
                c: 0 bg5 t
            }

            &-container {
                /// Focused state.
                &&-active:not([class*='dropdown-open']) > .select2-choice {
                    b: 0 0 0 0.2rem v63 i
                    c: 0 v66 bg3
                }

                /// Active states.
                .select2-choice:hover { c: 0 0 bg3 }
                &.select2-dropdown-open > .select2-choice {
                    c: 0 0 bg3
                    .select2-arrow { border-left: 1px solid bg5 i }
                }

                /// Disabled state.
                &-disabled {
                    .select2-arrow { opacity: 0.6 }
                    > a { c: fg5 bg3 bg1 }
                }
            }

            /// Results.
            &-drop {
                c: fg1 bg5 bg2
                b: var(--bshadow)

                /// Header/items/highlight.
                ../-results div { c: fg0 }
                ../-result-sub div { c: fg3 }
                ../-highlighted {
                    c: fg1
                    div { c: fg1 0 bg3 }
                }
            }

            /// NOTE: Ported and untested.
            &-arrow::after { c: fg4 }
            &-match { c: v09 }
            &-input {
                font-family: var(--ui-font) i
                c: fg1 bg5 t
            }

            /// Fix flash of browser-default select elements.
            /select {
                border: 1px solid bg5
                c: fg 0 bg2
            }
        }

        /// OBSOLETE: Old 'download' menu, and likely others.
        /.dropdown .btn[data-toggle='dropdown'] {
            .fa, svg { color: fg4 }
            ../ .border-top { c: 0 bg5 }
        }

        /// Reset height overflow. @upstream
        /[data-page^='search:'],
        /[data-page^='projects:'],
        /[data-page^='dashboard:'] {
            .dropdown-menu[class*='select'] { max-height: 420px i }
        }
    }

    // Global -> Buttons.
    .btn {
        $f = 0 0 0 1px bg1, 0 0 0 0.25rem

        /// Consistent button styles.
        &.gl-button {
            b: none i
            border: 1px solid t
            c: fg1 bg5 bg2 0 0 0
        }

        /// Default styles.
        & {
            c: fg1 bg5 bg2 0 0 0
            &:hover { c: fg1 bg5 bg3 0 0 0 }
            &:focus { c: fg1 bg5 bg4; b: $f v64 i }
            &:active { c: fg1 bg5 bg4 0 0 0 }
            &[href].gl-link { color: fg1 }
        }

        /// Active buttons.
        &.active,
        &.selected,
        &.is-active {
            c: fg1 bg5 bg4
        }

        /// Highlighted buttons.
        &-default,
        &-cancel {
            c: fg1 bg5 bg2
            &:hover { c: 0 0 bg3 }
            &:focus { c: 0 0 bg4; b: $f v64 i }
        }

        /// Background-color buttons.
        &-secondary {
            c: fg1 bg5 bg1
            &:hover { c: 0 0 bg3 }
            &:focus { c: 0 0 bg4; b: $f bg3 i }
        }

        /// Red.
        &-remove,
        &-danger {
            c: v98 v15 v13
            &:hover { c: v99 v16 v14 }
            &:focus { c: v99 v17 v15; b: $f v12 i }
            > .fa, > svg { c: currentColor; g: currentColor }
        }

        /// Green.
        &-register,
        &-success {
            c: v98 v45 v43
            &:hover { c: v99 v46 v44 }
            &:focus { c: v99 v47 v45; b: $f v42 i }
            > .fa, > svg { c: currentColor; g: currentColor }
        }

        /// Blue.
        &-info,
        &-confirm,
        &-primary {
            c: v98 v65 v63
            &:hover { c: v99 v66 v64 }
            &:focus { c: v99 v67 v65; b: $f v63 i }
            > .fa, > svg { c: currentColor; g: currentColor }
        }

        /// Orange.
        &-close,
        &-close-color,
        &-warning {
            c: v98 v25 v23
            &:hover { c: v99 v26 v24 }
            &:focus { c: v99 v27 v25; b: $f v23 i }
            > .fa, > svg { c: currentColor; g: currentColor }
        }

        /// Red outline.
        &-danger-secondary {
            c: v16 v15 bg1
            &:hover { c: v16 0 v11 }
            &:focus { c: v18 v15 bg1; b: $f v12 i }
        }

        /// Green outline.
        &-success&-inverted,
        &-success-secondary {
            c: v46 v45 bg1
            &:hover { c: v48 0 v41 }
            &:focus { c: v48 v45 bg1; b: $f v42 i }
        }

        /// Blue outline.
        /// 1: Project -> Milestones.
        /// 2: Account -> Billing page.
        /// 3: TODO: Figure out where this was used. XD
        /// 4: MR -> Mark as draft.
        &-info-secondary,
        &-inverted-secondary,
        &-primary&-inverted,
        &-confirm-secondary {
            c: v66 v65 bg1
            &:hover { c: v68 0 v61 }
            &:focus { c: v68 v65 bg1; b: $f v63 i }
        }

        /// Orange outline.
        &-warning-secondary {
            c: v26 v25 bg1
            &:hover { c: v28 0 v21 }
            &:focus { c: v28 v25 bg1; b: $f v22 i }
        }

        /// Accent.
        &#clone-dropdown {
            c: v98 v05 v03
            &:hover { c: v99 v06 v04 }
            &:focus { c: v99 v07 v05; b: $f v02 i }
            > svg { g: v98 }

            /// Reset menu input styles.
            + ul input {
                font-family: var(--mono-font)
                c: 0 0 bg1
            }
        }

        /// Disabled icons.
        /// TODO: Add more 'disabled' selectors.
        &.disabled,
        &[disabled] {
            c: fg5 bg3 bg1
            svg { fill: currentColor i }
            &:focus { b: none i }
        }

        /// Link buttons.
        /// TODO: Update outline with v2 accent color.
        &-link,
        &.gl-link:not([href]) {
            color: v09
            &:hover, &:active, &:focus { color: v07 }
            &:focus { c: 0 0 t; b: none i }

            /// Remove default border/background colors.
            &[href] { c: 0 t t 0 0 0 }

            /// Notes -> 'Compare with previous version.'
            &.gl-button { c: v09 }
        }

        /// Transparent buttons.
        &&-clipboard,
        &&-transparent,
        &&-default-tertiary {
            c: 0 t t
            &:hover > svg { g: fg1 }

            /// MR -> Reset clipboard button.
            /button[data-clipboard-text]:not(#z) { c: 0 t t }
        }

        /// Close buttons.
        /button.close:not(#z) {
            transition: 0.2s ease
            c: 0 0 t

            &:hover { border: 1px solid }
        }

        /// Inherit colors for dropdown icons.
        &.btn-icon[data-toggle=dropdown] svg {
            color: inherit
        }

        /// Button groups.
        /.input-group {
            &-append, &-prepend {
                c: 0 0 t
                > [class *= '-text'] {
                    c: fg1 bg5
                    /// Project -> Edit labels. #29
                    &:not(.label-color-preview) { c: 0 0 bg3 }
                }
            }
        }

        /// Project -> Repository buttons.
        &.count-badge-button {
            /.project-repo-buttons {
                .count { c: 0 0 bg3 }

                /// Reset button styles.
                .btn {
                    padding: 6px 10px i

                    /// Button size.
                    &-sm, &-xs, &-xs + span {
                        height: 32px i
                        font-size: 14px i
                    }

                    /// Notifications menu.
                    svg {
                        g: fg3
                        &.s12 { width: 16px; height: @width }
                    }

                    /// Project -> Notifications menu.
                    &.dropdown-toggle:not(#z) {
                        c: 0 0 bg2
                        &:hover { c: 0 0 bg3 }
                    }

                    /// Implemented in GitLab 13.8. @upstream
                    ../ .has-tooltip + .fork-count { height: 32px i }

                    /// OBSOLETE: Buttons/clone bar in GitLab 10.4.
                    ../ input { height: 34px i }
                }

                /// Button colors.
                .count {
                    c: fg1
                    &-badge-count { c: 0 bg5 bg3 }
                    &-badge:last-of-type { margin-right: 0 }

                    /// OBSOLETE: Arrow-buttons on GitLab 10.4.
                    &-with-arrow {
                        .arrow::before { border-right-color: bg5 }
                        .arrow::after { border-right-color: bg2 }
                        .count { c: 0 bg5 bg2 }
                    }
                }
            }
        }

        /// Project -> Toggle commit message.
        /.text-expander {
            padding: 3px 5px
            c: fg4 bg5 bg2
            &:hover { c: 0 0 bg3 }
            &.open { c: fg1 0 bg4; b: none }
        }

        /// Project -> Reset border for clipboard/sha groups.
        /.clipboard,
        /.commit-sha {
            /// Remove focus from commit SHA buttons.
            ../-label { &:hover, &:focus { c: 0 0 t; b: none i }}
        }

        /// Project -> Download dropdown.
        &-xs[download] {
            padding: 8px 10px
            background-color: bg0
            &:hover { background-color: bg3 }
        }

        /// Snippets -> Add another file.
        /// Project -> Add missing files.
        &-dashed,
        &-missing {
            c: fg3 bg5 bg2
            outline-color: t i
            border-style: dashed i
            &:hover { c: 0 0 bg3 }
            &:focus { c: 0 0 bg4 }
            &.disabled { c: 0 0 bg1 }
        }

        /// Project -> Signed commits.
        &.gpg-status-box {
            &:focus { b: none i }
            &.valid {
                c: v46 v46 bg1
                &:hover { c: 0 0 v41 }
            }
            &.invalid {
                c: fg4 bg3 bg1
            }
        }

        /// OBSOLETE: Notes -> Calendar icon.
        &[href*='.ics'] path { g: fg4 }

        /// Notes -> Reactions.
        &.selected[data-testid='award-button'],
        &.award-control {
            &.active {
                c: ac v05 v02
                &:hover { c: 0 0 v03 }
                &:focus { b: $f v01 i }
            }

            /// Added in GitLab v13.8.
            /.awards > .gl-button.selected {
                c: ac v05 v02
                &:hover { c: 0 0 v03 }
                &:focus { b: $f v01 i }
            }

            /// Remove disabled state. OBSOLETE
            &.disabled:hover { c: fg5 bg3 bg1 }
        }

        /// Notes -> Reply to a discussion.
        &&-text-field {
            c: fg3 bg5 bg3
            &:hover { c: 0 0 bg1 }
        }

        /// Settings -> Connected accounts.
        /.provider-btn {
            line-height: unset
            rad: 0 4px 4px 0
            c: fg1 0 bg2
            &-group {
                rad: 4px
                c: 0 bg5 bg2
            }
            &-image {
                rad: 4px 0 0 4px
                c: 0 bg5 bg3
            }
        }

        /// Project -> Merge Request analytics.
        /// NOTE: Bring borders back to the dropdown menu.
        &[id*='_toggle_'] { border-style: solid i }

        /// Remove `mix-blend-mode` for tertiary buttons. #152
        &-info-tertiary,
        &-success-tertiary,
        &-danger-tertiary,
        &-warning-tertiary,
        &-dashed-tertiary,
        &-default-tertiary {
            mix-blend-mode: unset i
        }
    }

    // Global -> Labels.
    .label {
        &&-monospace, /.btn-label.gl-font-monospace { c: fg1 bg5 bg3 }
        /// Issues/MRs/Epics -> Scoped labels.
        &.scoped-label .fa-question-circle {
            c: 0 0 t;
            &[style *= '#FFFFFF'] { c: white }
            &[style *= '#333333'] { c: black }
        }
        /// Remove badge underline.
        &-link { &, .badge { text-decoration: none i }}
        /// Project -> Lables.
        &-badge {
            c: fg;
            &-blue { c: white 0 blue }
            &-gray { c: cm 0 hl }
        }
        &-links a { c: ac }
        &-action svg { g: cm }
        /// Project labels -> Subscribe buttons. @upstream
        &-subscribe-button { font-weight: 400 }
        /// Project -> File -> LFS file badge.
        &-lfs { c: fg bd bg }
    }

    // Global -> Badges.
    .badge {
        &.issues-count { c: white 0 green }
        &.merge-requests-count { c: white 0 orange }
        &.todos-count { c: white 0 blue }
        &-pill {
            c: fg3 0 bg3

            /// Navbar -> Merge requests menu.
            &.merge-request-badge { c: fg2 0 bg4 }

            /// Navigation items counter.
            /// NOTE: Exclude navbar counters.
            /.active:not(.user-counter) & { c: fg1 0 bg5 }

            /// Project -> Tags.
            &.badge-secondary {
                c: fg3 0 bg2
                &:hover { c: fg1 }
            }
        }
        /// Project -> Pages -> Domains.
        &&-gray { c: fg1 0 bg3 }
        /// Notes -> Related issues/MRs.
        /.issue, /.mr { &-count-badge { c: fg1 0 t }}
        /// HACK: Reset colored labels.
        &.color-label {
            box-shadow: inset 0 0 0 1rem #33333370;
            &:hover { box-shadow: none i }
            &[style *= 'color: #333333'] {
                c: black;
                box-shadow: inset 0 0 0 1rem #33333325;
            }
        }

        /// Colored badges.
        &-primary, &-info, &-active { c: v99 0 v63 }
        &-secondary, &-inactive { c: fg4 0 bg2 }
        &-warning { c: v99 0 v24 }
        &-success { c: v99 0 v44 }
        &-danger { c: v99 0 v14 }
        &-light { c: fg3 0 bg3 }
        &-dark { c: fg1 0 bg4 }

        /// Settings -> Un/verified badges.
        &.unverified {
            c: fg5 fg5 bg1
            &:hover { c: bg3 fg5 fg5 }
        }
        &.verified {
            c: v45 v45 bg1
            &:hover { c: v99 v43 v43 }
        }

        /// Notes -> Issue status.
        /.status-box {
            c: v99
            &-issue-closed, &-mr-merged { c: 0 0 v65 }
            &-closed, &-mr-closed { c: 0 0 v15 }
            &-upcoming { c: fg1 0 bg5 }
            &-expired { c: 0 0 v25 }
            &-open { c: 0 0 v45 }
            > svg.s16 { g: v99 }
        }
    }

    // Global -> Forms.
    .form-control, .search form {
        c: fg bd hl;
        border: 1px solid bd i;
        &:focus, &.focus {
            c: 0 blue;
            b: 0 0 0 0.2rem v63 i
        }
        &[disabled = 'disabled']:not(#z) { opacity: 0.5 }
        /// Overwrites for navbar and top nav.
        /.navbar & { c: 0 0 bg3 }
        /.top-area & { height: 35px }
        /// Navbar -> Fix 'search' dropdown. @upstream
        #search {
            c: fg 0 t;
            box-shadow: none i;
            ~ [class *= 'dropdown-menu'] .is-active { c: fg }
            /// Search -> Gradient. NOTE: Type 's' to see it.
            /.dropdown-content-faded-mask::after {
                background: linear-gradient(to top, hl, t) i;
            }

            /// OBSOLETE: Navbar -> Search on GitLab 10.4.
            /.search.has-location-badge {
                margin-top: 3px

                /// Reset form.
                > form {
                    height: 34px
                    b: none i
                }

                /// Reset badge.
                .location-badge {
                    height: 32px
                    c: fg4 0 bg3
                    b: 1px 0 bg5 i
                }
            }
        }
        /// Fix icon color.
        .search-icon { g: cm }
        /// Snippets -> New.
        /.form-actions { c: 0 bd t }
        /// Settings -> Reset background.
        &.select-control { c: 0 0 hl }
        /// Search -> Dropdown height. @upstream
        /.form-group button[class*='dropdown'] { height: 34px i }
    }

    // Global -> Auto-complete menu.
    .atwho-view {
        c: cm bd bg;
        box-shadow: bsh;
        .atwho-view-ul li {
            c: fg;
            /// Matching text.
            strong { c: ac }
            /// Light text.
            small, .params { c: cm }
            /// Selected.
            &:hover, &.cur { c: fg 0 hl }
        }
    }

    // Global -> Lists.
    ul.content-list {
        li {
            c: fg1 bg3
            a { c: fg }
            /// Metadata.
            .commit-sha { c: ac }
            /.item-meta * { c: cm }
            /// Dashboard -> Todos -> Fix links.
            .todo { &-label, &-project { a { c: ac }}}
            /// Groups -> Hover animation.
            .group-row-contents {
                &:hover { c: 0 0 hl }
                .metadata { span, div { c: cm }}
                /.has-no-search-results { c: cm }
            }
            /// Profile -> Groups.
            &.group-row {
                .description p, .stats { c: fg3 }
            }
            /// Hover animation.
            &.issue, &.merge-request, &[id *= 'epic'] {
                &:hover { c: 0 0 hl }
            }
            /// Project -> Compare -> List items.
            ../:not(.event_commits) > li.commit:hover { c: 0 0 bg2 }
        }
        /// Project -> Branches.
        &.all-branches {
            .graph { &-side .bar, &-separator { c: 0 0 bd }}
            .branch-item:hover { c: 0 0 bg2 }
            .commit-sha { c: ac }
            .cgray { c: cm }
        }

        /// Project -> Issues / Merge Requests.
        &.issuable-list {
            .today {
                c: 0 0 v40
                &:hover { c: 0 0 v41 }
            }
            .closed, .merged { c: 0 0 bg2 }
            .issuable {
                ../ .fa:not(.fa-question-circle), ../ .task-status { c: fg3 }
                &-milestone, &-info, &-updated-at { c: fg3 }
                /// Email a new issue/MR to this project.
                /^[-1..-1]-email-modal-btn { c: ac }
            }
            /// Unmerged MR icon color. @upstream
            /.icon-merge-request-unmerged { filter: invert(0.7) }
            /// Manual ordering. #136
            &.manual-ordering {
                c: 0 0 hl
                > .issue { c: 0 bd bg }
            }
        }
        /// Project -> Requirements -> Remove hover bg.
        &.requirements-list > li:not([class*='gl-bg']):hover { c: 0 0 t }
        /// Project -> Members.
        &.members-list {
            li {
                c: 0 0 bb;
                &:hover { c: 0 0 hl }
            }
            /// Fix search icon. #80
            /input.form-control + button { border-color: bg5 }
        }
        /// Dashboard -> Snippets.
        .snippet { &-filename, &-info { c: cm }}
    }

    // Global -> Left sidebar.
    .nav-sidebar {
        border-right: 1px solid bg5
        c: 0 0 bg2
        b: none i


        /// Added in Gitlab v14.0.
        &[data-track-action]:not(#z) {
            /// Fix top offset.
            if (nb_height) { top: 50px i }

            ul {
                li > a {
                    margin-right: 6px i
                    b: none i
                    &:hover { c: 0 0 bg3 }
                }

                /// Fix active tree.
                li.active > a {
                    &.has-sub-items { c: ac }
                    &:not(.has-sub-items) { c: 0 0 bg4 }
                }

                /// Remove odd white space. @upstream
                .has-sub-items + ul { margin-top: 0rem i }
            }

            /// Reset fly-out menu header.
            .fly-out-top-item-container {
                c: fg1 0 bg3
                &::before { border-right-color: bg4 i }
            }

            /// Add missing border to collapse button.
            .toggle-sidebar-button { b: inset -1px 0 bg5 i }
        }

        /// Header.
        .context-header {
            a { c: fg1 }
            &:hover:not([data-track-label]) { c: 0 0 bg3 }
            .identicon.s40 { line-height: 36px i }
            [class*="avatar"] { b: none i }

            /// New sidebar.
            .sidebar-context-title { c: fg1 }
            &.active {
                c: 0 0 t
                > a { c: 0 0 bg3 }
            }
        }

        /// Items.
        li {
            a {
                margin-right: 0px i
                c: fg3
            }
            svg { g: currentColor }
            .divider { c: 0 bg5 }
            .badge { c: 0 0 bg4 }
            &.active {
                b: inset 4px 0 0 v08 i
                > a { c: ac }
            }
        }

        /// First level.
        .sidebar-top-level-items > li {
            &:not(.active) > a:hover { c: fg1 }
            &.active:not([data-track-label]) {
                c: 0 0 bg3
                > a:hover { c: 0 0 bg4 }
                .badge { c: fg1 0 bg5 }
            }
            &.is-over {
                > a { c: fg1 0 bg3 }
                &.active > a { c: 0 0 bg3 }
            }

            /// Second level.
            &:not(.is-showing-fly-out) > ul > li {
                &:not(.active) > a {
                    &:hover, &:focus {
                        c: fg1 0 bg4
                        b: inset 4px 0 0 v08 i
                    }
                }
                &.active a {
                    c: 0 0 bg4
                    b: inset 4px 0 0 v08 i
                }
            }
        }

        /// Fly-out menu.
        .is-showing-fly-out {
            > ul {
                c: 0 bg5 bg2
                li {
                    b: none i
                    &:not(.active) {
                        > a { c: fg3 }
                        &:first-child > a { c: fg1 }
                    }
                    a { &:hover, &:focus { c: fg1 0 bg3 }}
                }
            }
        }

        /// Collapse buttons.
        .toggle-sidebar-button,
        .close-nav-button {
            c: 0 bg5 bg2
            span, svg { c: fg3 }
            &:hover {
                c: 0 0 bg3
                > span, > svg { c: fg1 }
            }
        }

        /// Fix for a glitch introduced in !47.
        /// NOTE: Sometimes, the JS calculation is not made in time and the very
        /// first column of jobs ends up hidden behind left sidebar. This simple
        /// workaround prevents that, so will always add some padding. You will
        /// be able to tell that this occurred if all the jobs are on the far
        /// left side of the available area, and not centered like usually.
        if (pipelines) {
        &:not(.js-sidebar-collapsed) + .content-wrapper {
            .pipeline-visualization > div[style*='padding-left: 0px'] {
                padding-left: 0px i
                padding-left: 240px i
                // border-left: 300px solid ac i
                // transform: translateX(27.9vw) i
            }
        }
        &.js-sidebar-collapsed + .content-wrapper {
            .pipeline-visualization > div[style*='padding-left: 0px'] {
                padding-left: 0px i
                padding-left: 70px i
            }
        }
        }
    }

    // Global -> Right sidebar.
    .right-sidebar {
        c: 0 bd hl;
        .title { c: fg }
        .block { c: 0 bd }
        a:not(.btn):hover { color: v08 }
        .edit-link, .lock-edit, .no-value, a[href = '#'] { c: fg3 }
        button[data-testid='edit-button']:not(#z) { c: fg3 }

        /// Reset buttons and links.
        .btn {
            &-link:not([disabled]) {
                c: v09
                > svg { g: currentColor }
                &.edit-link { &, * { c: fg4 0 t }}
                &.dropdown-menu-close { c: fg3 } // Health status.
            }

            /// 'Move issue' button.
            &.btn-block { border: 1px solid bg5 }

            /// Health status for closed issues.
            &-link[disabled] { c: fg5 t t }
        }

        /// Improve contrast for inputs.
        input.form-control,
        .labels-select-dropdown-button:not(:hover) {
            c: 0 0 bg1
        }
        /// Fix top offset.
        if (nb_height) { top: 50px i }
        /// Pajamas -> Drawer.
        /.gl-drawer {
            c: fg bd bg;
            box-shadow: -1px 0 bd, bsh;
            &-header, &-body > * { c: 0 bd }

            /// Increase top offset when nb_height is enabled.
            if (nb_height) { top: 50px i }

            /// Added in GitLab v13.8.
            &.whats-new-drawer {
                if (nb_height) { top: 10px i }
                .img-thumbnail { c: 0 bg4 bg2 }
                .badge-pill { c: fg2 0 bg3 }

                /// Feat -> Add interop with custom image opacity.
                if (md_img_o < 1) {
                    .gl-link[rel]:not(.whats-new-item-title-link) {
                        opacity: md_img_o
                        transition: opacity 0.5s ease
                        > div { border-radius: 4px }
                        &:hover { opacity: 1 }
                    }
                }
            }
        }
        /// Issues -> Sidebar.
        .issuable-sidebar {
            overflow-y: auto i;
            &-header, .dropdown {
                .btn-default:not(.gutter-toggle),
                [data-toggle='dropdown'] {
                    c: 0 0 bg1
                    &:hover { c: 0 0 bg3 }
                }
            }
        }
        /// Time tracking. #49
        .time_tracker, .time-tracker {
            .compare-label { c: fg4 }
            .compare-value { c: fg2 }
            .over_estimate { .time-remaining, .spent { c: v17 }}
            .time-tracking-help-state { c: 0 bg5 bg1 }
        }
        /// Jobs -> Builds container. #22
        &.build-sidebar {
            .builds-container {
                c: fg bd bg;
                .build-job {
                    &.retried { c: 0 0 t }
                    &:hover {
                        c: 0 0 bb;
                        a { c: fg }
                    }
                }
            }
            /// Reset colors.
            .blocks-container { a, .btn-link { &:not(.btn) { c: ac }}}
            .btn, [data-toggle = 'dropdown'] {
                c: 0 0 bg1
                &:hover { c: 0 0 bg3 }
                &:focus { c: 0 0 bg4 }
            }
            .btn-default-tertiary { c: 0 0 t }
        }
        /// Epics -> Start/due date.
        .is-option-selected > span { c: cm }
        /// Epics -> Ancestors.
        .vertical-timeline {
            &::before { c: 0 cm }
            &-icon {
                c: 0 0 hl;
                &.opened svg { g: green }
                &.closed svg { g: blue }
            }
            /// Fix link hover event.
            &-content a:hover { c: ac }
        }

        /// Epics -> Labels. #123, #159
        /.labels-select {
            &-wrapper {
                li.is-focused .label-item { c: 0 0 bg4 } // #160
                .label-item { &.is-focused, &:hover { c: fg1 0 bg4 }}
                .gl, .btn { &-link:not(.gl-label-link) { c: fg3 }}
            }
            &-dropdown-contents {
                border: 1px solid bd i;
                c: 0 bd hl;
                box-shadow: bsh i;
                .dropdown { &-title, &-footer { c: 0 bd }}
            }
        }

        /// Issues -> Health status menu.
        .btn-group {
            li .dropdown-item {
                &:hover { c: 0 0 bd }
                &, button.btn { c: 0 0 t }
            }
            /// NOTE: Might break some things.
            /.dropdown-title-button { float: right }
        }

        /// Jobs -> Trigger build variables. #146
        .trigger-build { &-variable, &-value { c: fg3 }}

        /// Expanded state.
        &-expanded .gutter-toggle { c: 0 bg5 }

        /// Collapsed state.
        &&-collapsed {
            /// Reset toggle.
            .gutter-toggle {
                border-bottom-color: bg5 i
                rad: 0
            }

            /// Icons.
            .sidebar-collapsed-icon {
                c: fg;
                svg { g: cm }
            }

            /// Fix on-hover background colors.
            .gutter-toggle,
            .block > .sub-block,
            .block:not(.with-sub-blocks) {
                &:hover { c: 0 0 bg3 }
            }

            // Fix 'copy email' button.
            .copy-email-button {
                transition: none
                rad: 0
                &:hover { c: 0 0 bg3 }
            }
        }
    }

    // Global -> Navigation.
    .top-area {
        c: 0 bg3
        /// Global -> Nav links.
        /.nav-links {
            &:not(.quick-links) { c: 0 bg3 }
            li {
                a, button {
                    c: fg3
                    &:focus { c: 0 bd }
                    ../:hover { a, button { c: fg bd }}
                    ../.active { &, a, button { c: fg1 v08 }}
                    /// Active items and project header stats.
                    &.active, strong { c: fg ac }
                }

                /// OBSOLETE: Badges on old instances.
                [class$='badge'], [data-state] > .badge { c: fg3 0 bg3 }
                &.active {
                    [class$='badge'], [data-state] > .badge { c: fg1 0 bg5 }
                }

                /// Milestones -> Navigation.
                /.nav-tabs .nav-link.active { c: 0 ac t }
            }
        }
        /// Global -> Search.
        .form-control { c: 0 0 hl }
        /// Groups -> Navigation.
        /.content-block {
            c: 0 bg3 t
            p:not(.status-box) { c: fg }
            &.landing {
                c: 0 0 hl;
                h4 { c: fg }
            }
            /// Issues -> Show activity / Create MR menu.
            .new-branch-col {
                .btn {
                    padding: 6px 10px i;
                    line-height: 20px i;
                    font-size: 0.875rem;

                    /// Unset height for dropdown menu.
                    &.gl-h-7 { height: unset }
                }
                /// Notes -> Tweak large buttons to fit in emoji block.
                /.emoji-block .col-lg-6 {
                    flex: unset;
                    width: unset;
                    max-width: unset;
                    &:first-child { max-width: 50% }
                    &:last-child { flex: 1 1 auto i }
                }
            }
        }
        /// Misc.
        /.nav-block { c: 0 bg3 }
        /.row-content-block {
            c: fg bd hl;

            /// Project -> New MR.
            &.middle-block {
                .btn-cancel:not(:hover):not(:focus) { c: 0 0 bg1 }

                /// Fix inline diff. @upstream
                /#diff-notes-app .diffs.tab-pane { margin: 0 i }
            }

            /// Project -> New issue.
            &.footer-block { c: 0 bg3 t }

            /// Boards -> Reset various buttons on toolbar.
            :not([class*='group']) {
                > .js-focus-mode-btn,
                > [class*='btn btn-default'],
                > [class*='btn btn-inverted'] {
                    &:not([disabled]) {
                        c: 0 0 bg1
                        &:hover { c: 0 0 bg3 }
                    }
                }
            }

            /// Reset buttons in button groups.
            [class*='group'] > .btn {
                &-default:not(#z) {
                    c: 0 0 bg1
                    &:hover { c: 0 0 bg3 }
                    &:focus { c: 0 0 bg4 }
                }
            }

            /// Reset elements in navigation box.
            .filtered-search-box,
            .gl-datepicker-input {
                c: 0 0 bg1
            }
            button[class*='dropdown-']:not(#z) {
                b: none i
                &:hover, &:focus { c: 0 0 bg3 }
            }

            /// Remove borders from dropdown menu.
            .filtered-search-box > .dropdown .gl-button {
                c: 0 t
                border-right-color: bg5 i
            }

            /// Dashboard -> 'You pushed to...' alert.
            &.top-block {
                padding: 16px 0;
                c: 0 bg3 t
                .event-last-push {
                    time { c: fg }
                    &-text { font-size: 14px }
                }
                .btn-sm {
                    padding: 6px 10px i;
                    line-height: 1.5 i;
                    font-size: 14px i;
                }
            }
            /// Dashboard -> Todos.
            &.issues-details-filters [class*='menu-toggle']:not(svg) { c: 0 0 bg }
            /// Search -> Results header.
            span > code, form > div > button { c: 0 0 bg }
            /// Issues -> Board scope.
            .block {
                c: 0 bd;
                .title { c: fg }
                /// Reset dropdown colors.
                button.dropdown {
                    &-toggle[id]:not(#z), &-menu-toggle { c: 0 0 hl }
                }
            }
        }
        /// Project -> Compare Revisions.
        /.sub-header-block {
            c: 0 bg3 t
            + .card.bg-light { c: 0 0 t }
        }
        /// Project -> Packages.
        /.gl-tab {
            &s-nav { c: 0 bg3 }
            &-nav-item {
                c: cm;
                &-active { c: fg }
                &:hover { box-shadow: inset 0 -0.125rem bd }
                &.active { box-shadow: inset 0 -0.125rem ac }
            }
            /// Reset text colors.
            &-content {
                c: fg;
                .text-dark { &, &:hover { c: fg }}
                .text-secondary { &, &:hover { c: cm }}
            }
            /// Settings -> Usage quotas.
            /.pipeline-quota {
                c: 0 bd
                /// Workaround for removing extra whitespace.
                + .ci-table > div:first-child { margin-top: -1px i }
            }
        }
        /// Project -> Container Registry
        /.registry-placeholder {
            & .gl-text-black-normal {
                c: fg;
            }
            & a.gl-text-black-normal {
                &:hover {c: ac}
            }
        }
    }

    // Global -> Tabbed navigation.
    .gitlab-tabs {
        rad: 4px 4px 0 0;
        c: 0 bd t;
        &.nav.nav-tabs.nav-links {
            rad: 4px 4px 0 0;
            border-bottom: 1px solid;
            c: 0 bg5
            b: none
            > .nav-item { margin: 0 }
        }
        li[class ^= 'nav-'] {
            c: 0 bd bd;
            &:first-child { margin: 0 }
            a {
                rad: 0;
                ../:first-child a { rad: 3px 0 0 0 }
                ../:last-child a { rad: 0 3px 0 0 }
                ../:hover a.nav-link { c: fg t }
                &:not(.active) { c: 0 0 bg }
                &.active.nav-link {
                    margin-bottom: -1px;
                    c: fg hl hl;
                }
            }
        }
        /// Tab content.
        + .gitlab-tab-content {
            rad: 0 0 4px 4px;
            c: 0 bd hl;
            /// Inputs.
            .form-control, .info-well { c: 0 0 bg }
            .select2-choice { &, &s { c: 0 0 bg }}
            /// Exclude 'create from template' input bar.
            [class *= 'input-group']:not(.template-input-group) {
                rad: 3px 0 0 3px;
                c: fg1 bg5 bg3
            }
            /// Visibility level.
            /.option {
                &-title { c: fg }
                &-description, &-disabled-reason { c: cm }
            }
            /// 'Create from template' area.
            /.template-option { c: 0 bg5 }
            .card-slim { c: 0 0 bg }

            /// OBSOLETE: Login/register tabs until GitLab 12.5 or earlier.
            /.new-session-tabs {
                border: 1px solid bg5 i
                border-bottom: none i
                c: 0 0 bg1
                b: none i
                li {
                    &:not(.active) { &, &:hover a:not(.active) { c: 0 bg5 t }}
                    a.active {
                        rad: 0
                        c: 0 t bg2
                        b: 0 1px bg2
                    }
                }
                + .tab-content > div { rad: 0 0 4px 4px i }
            }

            /// Fix icon for Gitea.
            /[class*='gitea'],
            /[data-page='import:gitea:new'] {
                svg[version] {
                    path { g: fg3 }
                    rect { g: bg1 }
                }
            }
        }
    }

    // Global -> Welcome page. #144
    .blank-state {
        /// Cards.
        &-row &-link,
        /.new-namespace-panel {
            c: fg3 bg5 bg1
            &:hover { c: 0 0 bg2 }
            h3 {
                c: v09
                + p { c: fg2 }
            }
        }
    }

    // Global -> Projects list.
    .projects-list {
        > li {
            c: 0 bg4
            .description { c: fg3 }
            /.user-access-role { c: fg3 bg5 bg3 }
        }
        /// Profile -> Personal projects.
        &.compact {
            .user-access-role { line-height: 18px }
            .avatar { line-height: 36px i }
        }
        /// Loading icon.
        /.loading { c: cm }
        /// NOTE: Experimental list styles.
        /// Global -> Projects/Snippets | Profile -> Groups.
        &:not(.compact),
        /.snippets-list-holder > ul,
        /#groups > ul {
            margin-top: 10px;
            padding: 12px;
            c: 0 0 hl;
            rad: 4px;
            > li {
                padding: 12px 0 i;
                &:first-child { padding-top: 0 i }
                &:last-child { padding-bottom: 0 i }
            }
        }
        /// Profile -> Contributions list.
        /// The `d-sm-block` overrides `d-none`. @upstream
        /.user-calendar-activities {
            margin: 0 15px
            c: 0 0 hl;
            rad: 4px;
            h4 {
                margin: 10px 12px 0;
                padding: 10px 0;
                border-bottom: 1px solid bd;
            }
            ul li, > p {
                margin: 0 12px i;
                padding: 10px 0 i;
            }
        }
    }

    // Global -> Event lists.
    .event {
        &-item {
            c: fg3 bg4
            .commit { &, &s-stat { c: fg }}
            [href], [href *= '/compare/'] { c: ac }
        }
        &-user-info a[href] { c: fg }
        /// Dashboard -> Activities.
        /div.content_list {
            margin-top: 10px;
            padding: 10px;
            c: 0 0 hl;
            rad: 4px;
            > .event-item {
                padding-top: 10px;
                padding-bottom: 10px;
            }
        }
        /// Does not work with native syntax highlighting themes. @upstream
        &-note pre.code {
            border: 1px solid bd i;
            c: fg 0 bg;
        }
    }

    // Global -> Cards.
    .card {
        c: 0 bd bg;
        .user-info .user { c: fg }
        /// Default styles.
        &-header {
            c: 0 bg5 bg3
            /// Project -> Settings -> Pages.
            &.bg-info { c: c98 v65 v62 }
            &.bg-danger { c: c98 v15 v12 }
            + ul > .list-group-item { c: 0 bd t }
            /// Project -> Settings -> Card borders.
            ../.border {
                &-info { c: 0 blue }
                &-danger { c: 0 red }
            }
            /// Settings -> Active Sessions.
            /.list-group { & > &-item { c: 0 bd bg }}
            /// Reset background colors.
            input, [class *= 'dropdown-menu'] { c: 0 0 bg }
            /// Linked issues.
            .card-title { c: fg }
            /// Reset badges.
            > .badge-pill { c: fg1 0 bg5 }
        }
        &-body {
            > .form-actions {
                c: 0 bd bg;
                ../, & { rad: 0 0 3px 3px i }
            }
        }
        &-footer {
            c: 0 bd hl;
            /// Project -> Settings -> Pages.
            &.alert-primary { c: blue 0 hl }
            /// Project -> Settings -> CI -> Pipeline triggers.
            pre, code { rad: 4px; c: 0 0 bg }
        }
        /// Dashboard -> Operations.
        &.border-0 {
            border: 1px solid bd i;
            .card-header a { c: fg }
            /// Dashboard -> Environments.
            /.environments-dashboard .dashboard-card {
                box-shadow: none i
                border: none i
                c: 0 0 t
            }
        }
        /// Notes -> Related issues.
        /.related-issues-block .card {
            &-header {
                c: 0 bd hl;
                rad: 3px 3px 0 0;
                &.panel-empty-heading { box-shadow: inset 0 -1px bd }
            }
            /// Linked issues.
            .linked-issues-card-body {
                min-height: 16px;
                rad: 0 0 3px 3px;
                c: 0 0 bb;
                > .card-body { rad: 3px i }
            }
            /// Related issues.
            ul > li {
                /// Input area.
                &, &[class *= 'input'] > input { c: fg 0 hl }
                /// Issue tokens. #112
                /.issue-token {
                    &-reference { c: fg 0 bd }
                    &-remove-button { c: red 0 bd }
                    /// MR -> New MR dependencies. #112
                    /.add-issuable-form-input { c: fg 0 hl }
                }
                /// Rounded corners. @upstream
                &:first-child { rad: 3px 3px 0 0 }
                &:last-child {
                    border-bottom-left-radius: 3px;
                    border-bottom-right-radius: 3px;
                }
            }
        }
        /// Epics -> Epics and issues.
        /.related-items {
            &-tree {
                .item-title a { c: fg }
                .item-meta { c: cm bd }
            }
            &-list {
                .item-body {
                    &.item-closed {
                        c: 0 0 bb;
                        rad: 3px i;
                    }
                }
            }
        }
        /// Notes -> Related merge requests.
        /#merge-requests {
            &:not(.card) { c: 0 0 bg0 } // OBSOLETE
            .card-header {
                c: 0 bd hl;
                rad: 3px 3px 0 0;
            }
            ul li { c: 0 0 t }
        }
        /// Related issues/MRs -> Assignees.
        /.item-assignees:not(#z) .avatar {
            c: 0 hl;
            &-counter {
                c: fg 0 bd;
                rad: var(--avatar);
            }
        }
        /// Dashboard -> Issues/MRs/Todos.
        /[class *= '-filters'] {
            + div[class]:not([class *= 'boards']) {
                &, .card { c: 0 0 t }
                li {
                    border-top: none;
                    c: fg;
                    &:hover { c: 0 0 hl }
                }
            }
            /// Dashboard -> Done todos. #110
            /.done-reversible {
                border-top: none i;
                opacity: 0.6;
                c: 0 0 t;
            }
            /// Epics -> Reset dropdowns.
            &.epics-filters [class *= '-toggle'] { c: 0 0 bg }
        }
        /// Project -> Releases.
        &.linked-card, &.release-block {
            &::after { c: 0 hl }
            > .card-header { c: 0 0 hl }
            > .card-body { c: 0 0 bg }
        }
        /// Help -> Quick help links.
        &.links-card a { c: ac }
        /// Issues/MRs/Epics -> Sortable list.
        /.sortable {
            /// Wrapper.
            &-container {
                c: 0 0 hl;
                &[class *= 'body'] { rad: 0 0 4px 4px }
            }
            /// Items.
            &-row &-link { c: ac }
        }
        /// Epics -> Separator.
        /.epic-discussion-separator { c: 0 bd }
        /// Account -> Billing.
        /.flex-grid {
            .grid { &-row, &-cell { c: 0 bd }}
            .property-label { c: fg3 }
            .property-value { c: fg1 }
        }
    }

    // Global -> Skeleton.
    .animation-container {
        sk_gradient = linear-gradient(90deg, bg3 0%, bg4 50%, bg3)
        /// File table.
        [class *= 'skeleton-line-'] {
            c: 0 0 bg2
            &::after { background-image: sk_gradient }
        }
        /// Dashboard -> Operations.
        /[class *= 'card-skeleton-']::after { background-image: sk_gradient }
        /// Spinners.
        /.gl-spinner {
            &&-dark {
                c: 0 bd; border-top-color: ac i
            }
            /// Issues -> Labels.
            &-container.labels-fetch-loading { c: 0 0 t }
        }
        /// MRs -> Widgets.
        /svg.gl-skeleton-loader {
            .primary-stop { stop-color: bg3 }
            .secondary-stop { stop-color: bg4 }
        }
    }

    // Global -> Calendar.
    .pika-single {
        margin-top: 10px;
        c: fg bd hl;
        rad: 4px;

        /// Old styles.
        .pika {
            /// Header.
            &-label { c: fg 0 t }
            /// Custom prev/next buttons.
            &-prev, &-next {
                c: fg;
                text-indent: 0;
                background: none;
                &::before {
                    display: inline-block;
                    width: 20px;
                }
            }
            &-prev::before { content: '←' }
            &-next::before { content: '→' }

            /// Table.
            ../:not(.gl-datepicker-theme) .pika-table {
                border: 1px solid bd;
                /// Cells.
                th:not(#z) {
                    border-top: none i;
                    c: fg t bg;
                }
                td {
                    c: 0 bd;
                    .pika-day {
                        c: fg 0 bb;
                        &:hover, ../[class ^= 'is-'] .pika-day { c: ac 0 hl }
                    }
                    &.is-disabled .pika-day { c: cm 0 t }
                }
                /// Remove border on the bottom.
                tr:last-child > td { border-bottom: none i }
            }
        }

        /// Shadow.
        &.is-bound { box-shadow: bsh }

        /// Global -> Pajamas wrapper.
        /.gl-datepicker-theme {
            font-family: var(--ui-font) i;

            /// Reset styles.
            .pika-lendar:not(#z) {
                rad: 4px
                b: inner
                tr th { c: fg3 }
                .pika-table { c: 0 t t }
            }

            /// Days.
            .pika-button {
                c: fg4
                &:hover { c: fg1 0 bg3 }
                ../ .is-selected .pika-button { c: v99 0 v08 }
            }
        }
    }

    // Global -> Avatars.
    .avatar {
        &, &-circle, &-container, /.gl-avatar-s32 {
            text-shadow: 1px 1px 1px sh
            rad: var(--avatar) i
            c: fg t t

            /// Remove borders in operations dashboard.
            /.rect-avatar.border { border: none i }
        }

        /// Overrides.
        /[class*='identicon'] {
            border: 1px solid t i

            /// Resize avatars.
            &[class*='s20'] { line-height: 16px i } // Usage quotas.
            &[class*='s24'] { line-height: 22px i } // Operations.
            &[class*='s32'] { line-height: 28px i } // Search menus.
            &[class*='s40'] { line-height: 28px i } // Group projects.
            &[class*='s48'] { line-height: 44px i } // Dashboard projects.
            &[class*='s64'] { line-height: 60px i } // Group avatar.
            &[class*='s90'] { line-height: 86px i } // Project avatar in settings.

            /// Default colors.
            &[class*='bg0'] { c: v19 v13 v11 }
            &[class*='bg1'] { c: v49 v43 v41 }
            &[class*='bg2'] { c: v59 v53 v51 }
            &[class*='bg3'] { c: v39 v33 v31 }
            &[class*='bg4'] { c: v79 v73 v71 }
            &[class*='bg5'] { c: v69 v63 v61 }
            &[class*='bg6'] { c: v89 v83 v81 }
            &[class*='bg7'] { c: v29 v23 v21 }
        }

        /// Fallback identicon; Found on 'usage quotas' page.
        &.bgNaN { c: 0 bg5 bg3 }
    }

    // Global -> Page title.
    .page-title {
        c: fg;
        &-holder { c: 0 bg3 }
        /// Commits -> Details.
        /.commit-box {
            c: 0 bg3
            .commit-title, time { c: fg }
        }
    }

    // Global -> Breadcrumbs.
    .breadcrumb {
        &-item > a {
            c: cm;
            /// Project -> File location / Active path.
            strong, &.router-link-exact-active:not(#z) {
                font-weight: bold
                c: fg1
            }
        }
        &s {
            &-list a { c: cm }
            &-list-angle { g: cm }
            &-container { c: 0 bg3 }
            &-sub-title a { c: fg }
            &-links img { c: 0 hl hl }
            /// Epics -> Roadmap.
            &.group-epics-roadmap { c: 0 bg3 }
            /// Boards -> Fix border color.
            &.issue-boards-content > &-container { c: 0 bg5 }
        }

        /// Project.
        &.repo-breadcrumb {
            /// Dividers/items.
            > li + li::before,
            a:not([class*='dropdown']) {
                c: fg3
            }
        }
    }

    // Global -> Pagination.
    .pagination {
        .page-link {
            c: fg1 bg5 bg3
            &:not(.active):hover { c: 0 0 bg4; b: none }
            ../ .disabled .page-link { c: fg5 0 bg2 }
            ../ .active .page-link, &.active { c: v09 0 v01 }
        }
    }

    // Global -> Markdown area.
    .md {
        c: fg;
        h1, h2 { c: fg1 bg4 }
        hr { c: 0 bg4 }
        a, p { > code { padding: 2px 4px }}
        a, a > code { c: ac }
        p, p > code { c: fg1 }
        kbd {
            c: 0 bd;
            box-shadow: inset 0 -1px 0 bd i;
            > kbd { c: 0 0 bb }
        }
        blockquote, .blockquote {
            border-left-width: 4px
            c: fg3 bg5
            p { c: fg3 }
        }
        img.lazy { c: 0 0 hl }
        img:not(.emoji) {
            c: 0 bd;
            /// Feat -> Default image opacity.
            if (md_img_o < 1) {
                opacity: md_img_o;
                transition: opacity 0.5s ease;
                &:hover {
                    transition-delay: 0.5s;
                    opacity: 1;
                }
            }
            /// Shields.io badges.
            /[src *= 'style=for-the-badge'],
            &[data-canonical-src *= 'style=for-the-badge'] {
                rad: 4px;
            }
        }
        pre {
            rad: 4px i;
            &.code.white {
                border: 1px solid bd;
                c: fg 0 hl;
                &.highlight { c: 0 0 hl }
            }
            /// Feat -> Set 'none' syntax colors to use theme colors.
            if (c_hl_none) {
                &.code.none {
                    c: fg 0 hl;
                    .line span { c: fg }
                }
            }
        }
        code { font-family: var(--mono-font) i }
        /// Emojis.
        gl-emoji {
            font-size: 1em;
            font-family: var(--emoji-font);
        }
        /// Notes -> Suggested change.
        &-suggestion {
            &-header { c: 0 bd hl }
            &-diff {
                font-family: var(--mono-font) i;
                rad: 0 0 4px 4px i;
                c: 0 bd;
            }
            /// Fix rounded corners.
            tr:last-child > td {
                &:first-child::after { rad: 0 0 0 3px }
                &:last-child::after { rad: 0 0 3px 0 }
            }
        }
        /// Heading anchors.
        .anchor::after {
            content: '#' i
            c: fg;
        }
        /// Fix task lists. #111
        /.task-list { c: fg }
    }

    // Global -> Swagger UI. #101, #157
    .swagger-ui {
        c: fg1

        /// Text colors.
        a {
            c: ac
            &:not([href]) { c: inherit }
            ../.info a:hover { opacity: 0.8 }
        }
        p, li, table, h3, h4, h5, label { c: fg1 }
        :not(pre) > code { c: ac 0 bg2 }
        pre.microlight {
            c: fg1 bg5 bg2
            span:not([style]) { c: fg1 }
            span[style^='color: rgb(162'] { c: v47 }
            span[style^='color: rgb(211'] { c: v27 }
        }

        /// Base overrides.
        input, textarea {
            c: fg1 bg5 bg1
            &[disabled] { &, &::placeholder { c: fg5 }}
            &:focus { c: 0 v65; b: 0 0 0 0.2rem v63 }
        }
        .btn {
            c: fg3 bg5
            &-done { c: fg1 bg5 }
            &.execute { c: v99 v07 v05 }
            &.cancel { c: v99 v17 v14 }
            &.authorize {
                c: v47 v43
                &:hover { c: 0 0 v41 }
            }
            &:hover { opacity: 0.9; b: var(--bshadow) }
        }

        /// Adjust down chevron icon.
        select {
            background-size: auto i
            background-position-x: right -10px i
            background-position-y: top 5px i
            background-repeat: no-repeat i
            &.content-type { c: fg1 v46 }
            &[disabled] { c: fg5 }
        }

        /// Fix custom UI font.
        *:not(code):not(pre) { font-family: var(--ui-font) i }

        /// Icons.
        svg.arrow { g: fg3 }
        .unlocked > svg { g: v99 }
        .authorize > svg { g: v47 }
        .close-modal > svg { g: fg3 }

        /// Title.
        .title {
            c: fg1
            small { c: fg1 0 bg5 }
            .version-stamp { c: white 0 v07 }
        }

        /// Auth modal.
        .dialog-ux {
            .backdrop-ux { c: 0 0 bg0; opacity: 0.85 }
            .modal-ux {
                c: 0 bg5 bg1
                &-header { c: 0 bg5 }
            }
        }

        /// Operations.
        .opblock {
            &-tag {
                c: fg1 bg5
                &:hover { c: 0 0 bg2 }
            }
            &-section-header {
                c: 0 0 bg2
                b: 0 1px bg5, inset 0 1px bg5 i
            }
            &-summary {
                c: 0 inherit
                &-path { c: v98 }
                &-description { c: v96 }
                &-operation-id, &-path__deprecated { c: fg1 }
            }

            /// Misc elements.
            .active h4 span::after { c: 0 0 ac }
            [class*='accept-message'] { c: v47 }
            .download-contents, .copy-to-clipboard {
                c: fg1 0 bg5
                &:hover { opacity: 0.8 }
            }

            /// Mixin for method colors.
            method_colors(method, $bd, $bg) {
                &-{ method } {
                    c: 0 $bd $bg
                    .opblock-summary-method { c: 0 0 $bd }
                }
            }
            method_colors(get,    v64, v61)
            method_colors(put,    v24, v21)
            method_colors(post,   v44, v41)
            method_colors(patch,  v54, v51)
            method_colors(delete, v14, v11)
        }

        /// Misc elements.
        .scheme-container {
            c: 0 0 bg2
            b: 0 1px bg5, inset 0 1px bg5 i
        }
        .model {
            &s { c: 0 bg5 }
            &, &-title { c: fg1 }
            &-toggle { filter: invert() }
        }
        .prop {
            &-format { c: fg4 }
            &-type { c: v87 }
        }
        .parameter {
            &__name {
                c: fg1
                &::after { c: v15 }
                &.required span { c: v17 }
            }
            &__in, &__type { c: fg4 }
        }

        /// Table reset.
        table:not(#z) {
            padding: 0 i
            c: 0 0 t
            thead tr {
                b: 0 1px bg5 i
                th, td { c: fg1 0 t }
            }
        }
    }

    // Pajamas -> Banners.
    .gl-banner {
        c: fg bd hl;
        /.close {
            c: cm;
            text-shadow: none;
        }
        /// Feat -> Invert illustrations/images.
        if (img_invert) {
            /.mermaid:not(.code),
            /.artwork,
            /.group-empty-state > .icon,
            /.empty-state .svg-content > svg,
            /.devops-empty > div > svg,
            /.blank-state-icon > svg,
            /.svg-container > svg,
            /.commits-empty > svg,
            /img[src ^= 'img/']:not([src *= 'logo']),
            /img[src *= '/help/img/'],
            /img[src *= 'assets/promotions/'],
            /img[src *= 'assets/illustrations/'],
            /.new-namespace-panel-illustration,
            /[data-page='projects:new'] .col-lg-3 svg[width][height],
            /#oauth-login-github > img {
                filter: invert(0.8) brightness(110%) hue-rotate(180deg);
                box-shadow: none i;
            }
        } else {
            /.empty-state .svg-content > svg,
            /img[src *= 's/illustrations/'] {
                filter: invert(0.1) hue-rotate(0deg);
            }
        }
    }

    // Pajamas -> Alerts.
    .gl-alert {
        &-body, &-actions {
            a {
                font-weight: bold;
                color: currentColor i;
            }
        }

        /// Close button.
        .js-close {
            color: currentColor;
            svg { fill: currentColor i }
        }

        /// States.
        &-warning {
            c: v99 0 v22
            .gl-alert-icon { g: v97 }
        }
        &-danger {
            c: v99 0 v12
            .gl-alert-icon { g: v97 }
        }
        &-success {
            c: v99 0 v42
            .gl-alert-icon { g: v97 }
        }
        &-info {
            c: v99 0 v62
            .gl-alert-icon { g: v97 }
        }
        &-tip {
            c: fg2 0 bg2
            .gl-alert-icon { g: fg3 }
        }

        /// Global -> Old floating alerts.
        /.flash-container {
            svg { fill: currentColor i }
            .flash-alert { c: v98 0 v13 }
            .flash-notice { c: v98 0 v63 }
            .flash-warning { c: v98 0 v23 }
            .flash-success { c: v98 0 v43 }
            /// Increase top offset when nb_height is enabled.
            if (nb_height) { &.sticky { top: 58px i }}
        }

        /// Global -> Old alerts.
        /.alert {
            &&-info, &&-primary { c: v98 v63 v62 }
            &&-warning { c: v98 v23 v22 }
            &&-success { c: v98 v43 v42 }
            &&-secondary { c: fg3 bg5 bg2 }
            &&-danger { c: v98 v13 v12 }
            &&-light { c: fg1 bg5 bg3 }
            h4 { color: inherit i }

            /// Broadcast messages found on `git.synz.io`.
            /[class *= 'broadcast-banner'] {
                svg { g: currentColor }
                .fa { c: currentColor }
            }

            /// Broadcast notifications. #115
            /.broadcast-notification-message {
                c: 0 bd hl;
                box-shadow: bsh;
                .btn { c: fg }
                /// Fix links. #120
                a { c: ac }
            }
        }
        /// Issues -> Reset issue template.
        /[role = 'alert'] {
            &[class *= '_message']:not([class *= 'epic']) { rad: 4px }
            &, / { .warning_message:not(#z) { c: v98 v24 v21 }}
            &, / { .danger_message:not(#z) { c: v98 v14 v11 }}
        }
    }

    // Pajamas -> Toggles.
    .gl-toggle, .project-feature-toggle {
        c: 0 0 bg4
        .toggle-icon {
            c: 0 0 bg;
            svg { g: cm }
        }
        &.is-checked {
            c: 0 0 ac;
            svg { g: ac }
        }
    }

    // Pajamas -> Forms.
    .gl-form {
        /// Checkbox/radiobox label colors. #168
        &-checkbox,
        &-radio {
            c: fg1

        }

        /// Inputs.
        &-input {
            box-shadow: none i
            font-family: var(--ui-font) i
        }

        /// Select menu.
        /.custom-select {
            c: fg1 bg5 bg2
            &:focus {
                c: 0 v65
                b: 0 0 0 0.2rem v62 i
            }
        }

        /// Project -> Releases -> Edit release.
        /// Fix whitespace/focus. @upstream
        &-group .bordered-box.pl-3 {
            padding: 0 i;
            c: 0 0 bg;
            > .md-area {
                margin 0 i;
                padding 10px i;
                rad: 4px;
            }
            &:focus-within { c: 0 blue }
        }
        /// Project -> Settings -> Integrations.
        /.help-form .form-group {
            form, .form-control, code { c: 0 0 bg }
            /// Audit Events -> Date range.
            /.form-group > label + input { c: 0 0 hl }
        }
    }

    // Pajamas.
    .gl {
        o = '\!'

        &-font-monospace { font-family: var(--mono-font) i }

        /// Search area.
        &-filtered-search {
            /// Wrapper.
            &-scrollable {
                c: 0 0 bg;
                rad: 4px 0 0 4px;
                box-shadow: inner i;
                input { c: fg 0 t }
            }
            /// Token menu.
            &-suggestion-active {
                c: 0 0 bd;
                a, p { c: fg }
            }
            &-token-operator-description { c: cm }
        }
        /// Search tokens.
        &-token {
            c: fg1 0 bg3 0 0 0
            &-close { c: cm }
            &-content { c: fg }
            &.gl-filtered-search-token {
                &-type, &-operator { c: 0 0 hl }
                &-data { c: 0 0 bg3 }
            }
        }
        /// Search button.
        &-search-box-by-click-search-button {
            border: 1px solid bd;
        }

        /// Text color overrides.
        &-text {
            &-body { c: fg }
            &-white { c: var(--inverse) }
            &-black-normal { c: fg0 }
            &-orange-500:not(#z) { c: orange; g: orange }
            &-red {
                &-500{ o } { c: v15 }
            }

            /// Overrides.
            &-gray-900 { c: fg1 }
        }

        /// Background-color overrides.
        &-bg {
            &-white { c: 0 0 bb }
            &-gray-10 { c: 0 0 bg }
            &-gray-50 { c: 0 0 bg2 }
            /.bg-secondary-50 { c: 0 0 bg3 } // 'License Complicance' page.
            &-green-100.gl-text-green-800 { c: v48 v42 v42 } // Pending comments.
            &-green-500 { c: 0 0 v45 }
            &-blue-50 { c: 0 0 v62 }
            &-red {
                &-50 { c: 0 0 v10 }
            }
        }

        /// Border-color overrides.
        &-border-gray {
            &-100, &-200 { c: 0 bd }
            /.border {
                border: 1px solid bd i
                &-left { border-left-color: bg3 i } // Operations -> Metrics.
                &-top { border-top-color: bg3 i } // Operations -> Jaeger.
            }
        }
        &-border {
            &-b-gray-100 { c: 0 bd }
            &-t-gray-100 { c: 0 bg5 }
        }

        /// Text color overrides.
        &-sm-text-body { c: fg1 } // Packages -> Image tags.

        /// Box-shadow overrides.
        &-inset-border {
            &-1-gray-100 { &, &\\\! { box-shadow: inset 0 0 0 1px bd i }}
        }

        /// Dropdowns.
        /// NOTE: Right sidebar -> Health status.
        &-new-dropdown {
            button[class*='close'] { c: 0 t t }
            &-header-top { c: 0 bg5 }
            .dropdown-menu:not(#z) {
                c: 0 bg5 bg2

                /// Fix conflict with btn-link styles.
                .btn-link.dropdown-item {
                    c: fg3
                    &.is-active { c: fg1 }
                }
            }

            /// Chevron icons.
            .dropdown-toggle-split:not(:disabled)::after {
                c: 0 0 fg3
            }

            /// Members -> Search menu.
            /// Clone -> Open in your IDE -> Visual Studio Code
            &-item .dropdown-item {
                color: inherit;
                &:not(.disable-hover):hover {
                    c: fg1 0 bg4
                    p { c: fg1 }
                }
            }

            /// Issues -> Comment action. @upstream
            button.dropdown-toggle-split { margin-left: -1px i }
        }

        /// Cards.
        /// Groups -> Recent activity. #143
        &-card {
            c: 0 bg5 bg1
            &-header, &-footer { c: 0 bg5 bg2 }
        }

        /// Badges.
        &-badge:not(#z) {
            &.badge-success { c: v99 0 v45 }
            &.badge-warning { c: v99 0 v25 }
            &.badge-danger { c: v99 0 v15 }
            &.badge-info { c: v99 0 v65 }
        }

        /// Breadcrumbs.
        &-breadcrumb {
            &s { b: inset 0 -1px bg5 }
            &-separator > svg { c: fg4 }
            &-item:last-child > a { c: fg1 }
        }

        /// Inputs.
        &-form-input {
            /// Settings -> CI/CD -> Clean up image tags.
            &.form-control-plaintext { c: fg1 0 t }
        }

        /// Select elements.
        &-form-select {
            font-family: var(--ui-font)
            b: inner
            &:disabled {
                c: fg5
                b: inner
            }
        }

        /// Project -> Members.
        &-avatar {
            &-labeled-labels { c: fg1 }
            &-labeled-sublabel { c: fg3 }
        }
    }

    // Pajamas -> GFM.
    .gfm {
        c: fg;
        /// Links.
        &&-issue, &&-merge_request, &&-epic, &&-milestone { c: ac }
        &&-commit {
            &, &_range { font-family: var(--mono-font) }
            &, &_range > code { c: ac }
        }
        /// Color chips. #71
        &-color_chip > span { c: 0 t }
        /// Members and mentions.
        &&-project_member {
            z-index: 1;
            padding: 1px 3px;
            position: relative;
            text-decoration: none i;
            transition: 0.2s ease;
            font-weight: 500;
            c: ac 0 t;
            &::before {
                z-index: -1;
                content: '';
                opacity: 0.2;
                position: absolute;
                top: 0; right: 0; bottom: 0; left: 0;
                transition: inherit;
                rad: inherit;
                c: 0 0 ac;
            }
            &:hover::before { opacity: 0.4 }
            &.current-user {
                c: white 0 v07
                &:hover { opacity: 0.7 }
            }
        }
        /// Forms.
        &-form {
            /// Notes -> Suggestions.
            /.suggestion {
                c: fg;
                /// Icon states.
                &-confidential.s16 { g: orange }
                &-state-closed.s16 { g: blue }
                &-state-open.s16 { g: green }
            }
        }

        /// Pajamas -> Labels.
        /.gl-label {
            el = '.gl-label'
            ef = grayscale()
            ts = 1px 1px 0px sh
            transition: 0.2s ease
            c: 0 0 bg3 0 0 0
            z-index: 1

            /// HACK: Resolve the following issues:
            /// 1. Keep all text elements above the shadow.
            /// 2. Do not overlap colors for label elements.
            /// 3. Remove inconsistent text underlines.
            span {
                z-index: -1
                position: relative
                &, ../ a { text-decoration: none i }
            }

            /// Switch to gray for a specific label.
            &[style*='d-color:#333'] {
                c: 0 0 v93
                b: inset 0 0 0 1px v96 i
            }

            /// More readable and consistent label colors.
            &-text-light {
                &[style*='--label-background'] {
                    { el }-text-scoped { filter: ef; c: fg1 }
                    { el }-close svg { g: white }
                }
                /// Small labels; old style.
                &[style] { text-shadow: ts, ts, ts }
            }
            &-text-dark {
                { el }-text-scoped { filter: ef; c: fg1 }
                /// Small labels; old style.
                &:not([style]) { c: fg1 }
            }

            /// Reset 'close' buttons.
            &-close {
                c: 0 0 t
                position: relative
                &:hover { c: 0 0 sh }
                &::before {
                    z-index: -1
                    content: ''
                    position: absolute
                    pointer-events: none
                    top: -4px; left: 4px; bottom: -4px; right: -4px
                    transition: background 0.2s ease
                    c: 0 0 sh
                    ../../:hover .gl-label-close::before { c: 0 0 t }
                }
            }

            /// HACK: Darken labels.
            span::before {
                z-index: -1
                content: ''
                position: absolute
                pointer-events: none
                top: 0; left: 0; bottom: 0; right: 0
                transition: background 0.2s ease
                c: 0 0 sh
                ../:hover span::before { c: 0 0 t }
            }
        }

        /// Project -> Releases -> New release resets.
        &-form[action $= 'tags'] {
           .form-control, .dropdown-menu-toggle { c: 0 0 bg }
        }
    }

    // Pajamas -> Modals.
    /// NOTE: The `gl-modal` exists, but it is not widely used.
    .modal {
        c: 0 0 t;
        /// Content.
        .modal-content {
            border: 1px solid bg5
            c: fg1 0 bg1
            b: bsh i
            .modal-header {
                c: 0 bd hl;
                .close { c: cm }
            }
            .modal-body {
                c: 0 0 t;
                .modal-subheader { c: 0 bd }
                /// Shortcuts.
                table th { c: fg }
                table td { c: cm }
            }
            .modal-footer {
                c: 0 bd hl;
                .btn-default:not(:hover):not(:focus) { c: 0 0 bg0 }
            }
            /// Project -> Reset 'Email a new issue/MR' buttons.
            .btn {
                &-clipboard:not(#z) { c: 0 bd hl }
                /// 1px height mismatch. @upstream
                &[href *= 'mailto:'] { height: 34px }
            }
        }
        /// Background.
        &-backdrop {
            opacity: 0.85 i;
            c: 0 0 bb;
        }
        /// Fix body content shift when modal is open. @upstream
        /body.modal-open { padding-right: 0px i }
        /// Project -> Drag'n'drop preview.
        /.dropzone {
            &-previews { c: 0 bd }
            /.markdown-selector { color: ac }
            /// Issues -> Design -> Card text color. @upstream
            /.design-dropzone-card .text-center { c: fg }
        }
        /// Dashboard -> Operations -> Add projects.
        /#add-projects-modal {
            .gl-form-input { c: 0 0 hl }
            /.gl-infinite-scroll {
                /// Reset buttons.
                &-container .btn {
                    c: 0 0 t;
                    &:focus, &.focus {
                        c: 0 0 hl;
                        box-shadow: none i;
                    }
                }
                /// Result count.
                &-legend { c: cm }
            }
        }
        /// Settings -> Authorize an application.
        &-doorkeepr-auth > &-content {
            c: 0 bd bg
            .modal-header { c: 0 bd t }
            .modal-body {
                c: 0 0 t
                .form-actions { c: 0 0 hl }
            }
        }
    }

    // Pajamas -> Popovers.
    .gl-popover {
        font-family: var(--ui-font);
        rad: 4px;
        c: 0 bd hl;
        box-shadow: bsh i;
        &-header { c: 0 bd hl }
        &-body {
            padding: 8px;
            c: fg;
            ../.blue { c: 0 0 blue }
        }
        /// Blue popovers.
        /.arrow {
            color: hl;
            ../.blue .arrow { c: blue }
        }
        /// Arrows.
        /[class *= '-top'] {
            .arrow::before { border-top-color: bd i }
            .arrow::after { border-top-color: inherit i }
        }
        /[class *= '-bottom'] {
            .arrow::before { border-bottom-color: bd i }
            .arrow::after { border-bottom-color: inherit i }
        }
        /[class *= '-left'] {
            .arrow::before { border-left-color: bd i }
            .arrow::after { border-left-color: inherit i }
        }
        /[class *= '-right'] {
            .arrow::before { border-right-color: bd i }
            .arrow::after { border-right-color: inherit i }
        }
        /// Signed commits.
        /.gpg-popover {
            &-icon.valid svg { c: 0 green; g: green }
            &-icon.invalid svg { c: 0 red; g: red }
            &-user-link { c: fg }
        }
        /// Milestones.
        .milestone-popover-body { c: 0 0 t }
        .milestone-popover-footer { c: 0 bd 0 }
        /// Status.
        .js-user-status { c: cm }
        /// Old tooltips.
        /.tooltip {
            &.show { opacity: 1 }
            &-inner {
                c: fg 0 hl;
                border: 1px solid bd;
                box-shadow: bsh;
                [class *= 'share'] { c: fg3 }
                [class *= 'scoped-label'] { c: ac }
                /// Issues -> Assignee.
                .text-white-50 { c: cm; opacity: 0.5 }
            }
            &[class *= 'bottom'] .arrow::before { border-bottom-color: bd }
            &[class *= 'right'] .arrow::before { border-right-color: bd }
            &[class *= 'left'] .arrow::before { border-left-color: bd }
            &[class *= 'top'] .arrow::before { border-top-color: bd }
        }
        /// Old popovers.
        /.popover {
            border: 1px solid bd;
            c: fg 0 hl;
            box-shadow: bsh;
            &-header { c: fg bd hl }
            &-body { c: fg }
        }
        /// Onboarding. NOTE: Untested with v1.0 code.
        /.onboarding-helper-container {
            c: 0 0 bg;
            box-shadow: inner, 0 4px 8px 0 sh;
            .avatar {
                rad: 50% i;
                c: 0 0 bd;
                box-shadow: inner;
            }
            .progress { c: 0 0 bd }
            .bg-info { c: 0 0 blue }
            .text-info { c: blue }
            .active { c: 0 0 bd }
            .qa-toggle-btn {
                c: 0 0 t;
                &:hover svg { g: fg }
            }
        }
    }

    // Project -> 'No repository' header.
    .slead {
        c: fg3
        + hr + .no-repo-actions {
            .btn-primary {
                c: ac ac t;
                &::before { content: ''; c: 0 0 ac }
            }
        }
        /// Request access.
        /.access-request-link { c: 0 bd }
        /// Mirrored repository -> Fix time color.
        /.home-panel-description + p time { c: fg }
    }

    // Project -> Empty repository.
    .git-empty {
        h5 { c: fg }
        pre.bg-light {
            c: 0 0 hl;
            rad: 4px;
        }
    }

    // Project -> Project header on GitLab 10.4. OBSOLETE
    .project-home-panel {
        c: 0 bg5

        /// Project visibility/license text. TODO: Change to fg4.
        .project-metadata > div { c: fg4 }

        /// Project -> Stats on GitLab 10.4. OBSOLETE
        /.project-stats {
            c: 0 bg5

            .nav .stat-link {
                c: fg3
                &:hover { c: fg1 }
            }
        }
    }

    // Project -> Latest commit.
    .info-well {
        c: fg bd hl;
        .commit-row-message, .committer a { c: fg }
        /// Center the SHA-value box.
        .commit-actions { align-self: center }
        /// Diff -> Commit info.
        .branch-info {
            c: 0 bd;
            .badge { c: 0 0 bd }
            /// 'Parent commit' text color.
            .cgray { c: fg }
        }
        svg path { g: cm }
        /// Commits -> Unavailable branches.
        .limit-box {
            c: white 0 red;
            .fa { c: white }
            /// Icon position. @upstream
            ../ .branches .s12 { margin-top: 2px }
        }
        /// Diff -> More info / Code owners..
        .well-segment {
            c: 0 bd;
            /// Project settings -> Integrations.
            code:not([class]) { c: 0 0 bg }
        }
    }

    // Project -> Files.
    .table-holder {
        /// Remove border.
        &.bordered-box { border: none i }
        /// Project -> File -> Blame.
        /.blame {
            /// Fix table cell borders.
            tr:not(:first-child) > td { border-top: 1px solid bd i }
            /// Legend box.
            /.file-blame-legend { c: 0 bd hl }
            /// Commits.
            &-commit {
                position: relative;
                padding-left: 12px i;
                border-left: none i;
                &::before {
                    content: '';
                    position: absolute;
                    top: 0; left: 0; bottom: 0;
                    width: 4px;
                }
                /// Whitespace between avatar and content.
                .commit > a[href] > img { margin-right: 10px }
                /// Background for commit details.
                /^[1] &:not(#z) { c: 0 0 hl }
                + .line-numbers:not(#z) {
                    border-left: 1px solid bd i;
                    c: 0 0 hl;
                    rad: 0;
                }
            }
            /// Text colors.
            .commit-author-link, .cdark { c: fg }
            .commit-sha { c: ac }
            /// Custom legend/age colors..
            for i in 0..9 {
                /.legend-box-{ i }, &-commit-age-{ i }::before {
                    c: 0 0 green;
                    opacity: s(('0.%s99'), i);
                }
            }
        }
    }

    // Project -> Readme.
    .readme-holder {
        c: 0 bd bg;
        /// Header.
        [class *= 'file-title'] {
            padding: 10px 16px;
            rad: 4px 4px 0 0;
            a:not(.btn) { c: fg }
        }
        /// Body.
        .file-content {
            /// HACK: GitHub-alike styles.
            [dir][align='left'] { text-align: left }
            [dir][align='right'] { text-align: right }
            [dir][align='center'] { text-align: center }
            a img:not(.emoji) {
                box-sizing: content-box;
                margin: 0 i;
                c: 0 0 bg;
                &[align='left'] { padding-right: 20px }
                &[align='right'] { padding-left: 20px }
            }
            h1, h2, h3, h4, h5, h6 { position: relative }
            &::before, &::after {
                content: '';
                display: table;
            }
            &::after { clear: both }
        }
    }

    // Project -> Commits.
    .commit {
        &ter { c: fg3 }
        & &-author-link, &-row-message { c: fg1 }
        &, /.generic-commit-status { a { color: fg }}
        &-header {
            c: fg bd hl;
            &:first-child { border-top-width: 1px }
        }
        /// Edit file -> Commit message.
        &-message-container {
            font-family: var(--mono-font);
            c: 0 0 t;
        }
    }

    // Project -> Pipelines.
    .pipeline-graph, .js-pipeline-graph {
        /// Pipelines -> Tab background.
        > div { c: 0 0 hl }
        .ci-status-text { c: fg1 } // OBSOLETE

        /// Pipelines -> Stages.
        .build, .gl-build {
            width: 100% i;
            &-content {
                c: fg1 bg5 bg1
                transition: 0.1s ease i
                &:hover { c: 0 0 bg3 }
            }
            /// Downstream.
            .linked-pipeline-content {
                c: 0 bd bg;
                rad: 8px i;
                &::before { content: unset i }
                &:hover { c: 0 0 bb }
            }
            /// Connectors.
            ../ .curve, &:not(first-child), /.stage-container {
                &::before, &::after { c: 0 bd }
            }
            /.ci {
                /// Fix CI job text weight/color.
                &-build-text, &-status-text,
                ../-content .gl-font-weight-100 {
                    font-weight: normal i
                    c: fg4
                }
            }
            /// Dropdowns -> Focused menu toggle.
            /div[class *= 'mini-pipe'] {
                &:focus { box-shadow: 0 0 4px 0px ac i }
                li:hover [class *= 'dropdown-item'] { c: 0 0 bd }
            }
        }

        /// Feat -> Compact pipelines.
        if (pipelines) {
            .build, .gl-build {
                margin-bottom: 5px
                &-content { padding: 5px i }
            }

            /// Remove max-width. Added in GitLab v14.0.
            [class*="gl-pipeline-job-width"] { width: 100% i }
            .gl-font-weight-100 { margin-right: 0.5rem i }

            /// Projects -> Show full name. OBSOLETE
            .ci-job-name-component {
                .ci-status-text,
                .gl-text-truncate {
                    max-width: 100%
                    margin-right: 35px
                }
            }

            /// Tweak curved connectors for !47.
            .stage-column {
                .curve { &::before, &::after { top: -24px }}
                .build:nth-child(2) {
                    &::before, &::after { height: 24px; top: -4px }
                }
            }
        }
    }

    // Project -> Pipelines -> Build page.
    .build-page {
        .top-bar {
            z-index: 99;
            c: fg bd hl;
            rad: 4px 4px 0 0;
            if (nb_height) { top: 49px i }
        }
        .job-log {
            border: 1px solid bd;
            border-top: none;
            c: fg 0 bg;
            box-shadow: none;
            rad: 0 0 4px 4px;
        }
        .line-number { c: cm }
        .collapsible-line {
            .log-duration-badge { c: 0 0 bd }
            &:hover { c: 0 0 hl }
        }
        /// Terminal text colors.
        .term {
            &-fg-l-red { c: red }
            &-fg-l-blue { c: blue }
            &-fg-l-cyan { c: cyan }
            &-fg-l-green { c: green }
            &-fg-l-yellow { c: yellow }
            &-fg-l-magenta { c: magenta }
        }
        /// Remove right padding. @upstream
        div.build-trace-container { padding-right: 0 i }
        /// Jobs -> Failed jobs.
        /.build-trace {
            border: 1px solid bd;
            c: fg 0 hl;
            &-container { padding-right: 16px i }
        }
    }

    // Project -> Issues/MR/Epics.
    .detail-page {
        /// Header.
        &-header {
            c: fg4 bg3
            /.author { c: fg }
            /// MRs -> Editor button.
            a { color: fg3 }
            /// Notes -> Locked issue.
            /.issuable {
                &-warning-icon {
                    c: 0 0 v22
                    svg { g: v28 }
                }
            }
        }
        /// Milestones -> Details.
        &-description { &, .title { c: 0 bg3 }}
        /.page-content-header {
            /// Issues/Jobs -> Page header -> Author link.
            [class *= '-link'] { c: fg }
            /// Jobs -> Browse artifacts -> Page header.
            .header-content a { c: fg }
        }
        /// Description.
        &-description {
            .title { c: fg }
            small { c: cm }
            /.edited-text { &, .author-link { c: cm }}
        }
        /// Notes/Dashboard -> Search/filter results.
        /.filtered-search {
            &-box {
                rad: 4px;
                c: 0 bd hl;
                min-height: 36px;
                ul { padding: 0 i }
                input {
                    padding-left: 12px i;
                    border: none i;
                    c: 0 0 t;
                    &:focus { box-shadow: none i }
                }
                .clear-search {
                    rad: 4px;
                    c: 0 0 bg;
                }
                &.focus { c: 0 v66; b: 0 0 0 0.2rem v63 i }
                /// Input wrapper background. #126
                &-input-container { c: 0 0 t }
            }
            /// Dashboard -> Issues/MRs.
            &-token, &-term {
                .name, .operator { c: fg2 0 bg2 }
                .value-container { c: fg1 0 bg3 }
                ../-token:first-child { margin-left: 5px }
                /// Text input is also tokenized.
                ../-term .name { c: 0 0 t }
            }
        }
    }

    // Project -> MRs -> Widgets.
    .mr-state-widget {
        /// Merge target.
        .mr-source-target { c: fg bd bg }
        /// Headings.
        /.mr-widget-heading { c: fg bd bg }
        /// Collapse.
        .mr-widget-extension {
            c: fg bd hl;
            box-shadow: 0 1px bd i;
            &:last-child { rad: 0 0 3px 3px }
            .label-branch { c: 0 0 bg }

            /// Reset 'approvers' table.
            + .border-top > table {
                margin-bottom: 0px i
                border: none i
                rad: 0 0 4px 4px i
                thead tr th { c: 0 0 bg1 }
            }
        }
        /// Global widgets.
        .mr-section-container {
            border: 1px solid bd i;
            c: 0 0 bg;
            &::before { c: 0 hl }
            /// Ready for (fast-forward) merge. #116
            > .mr-widget-section { rad: 0; c: fg bd }
            /// Help.
            .mr-widget-help { c: cm }
            /// Empty MR notice.
            .mr-widget-empty-state { c: fg }
        }
        /// Tweaks for borders.
        .mr-widget {
            /.mr-widget-workflow {
                &::before { border-width: 2px; c: 0 hl }
                > :first-child { border-top: none }
            }
            &-border-top { c: 0 bd }
            &-info { c: fg }

            /// Promo -> Pipeline suggestion.
            &-body.mr-pipeline-suggest {
                c: fg1 bg5 bg1
            }

            /// Heading colors.
            &-body .gl-font-weight-bold { c: fg3 }
        }
        /// Code quality and other reports. #64
        /.report-block {
            c: fg;
            &-list-issue {
                &-parent { c: 0 bd bg }
                &-description { c: fg }
            }
            &-container {
                c: 0 bd bb;
                /// Icons.
                /.failed > svg { g: red }
                /.neutral > svg { g: cm }
                /.success > svg { g: green }
            }
        }
        /// Reset tables.
        .border-top {
            c: 0 bd;
            .table tr:not(:first-child) > td { border-top: 1px solid bd i }
        }
        /// Fix 'WIP status' for users that cannot merge. @upstream
        .mr-widget-body.media {
            .square + button { margin-right: 10px }
            .bold { margin-left: 0; c: cm }
        }
        /// Fix deployment colors.
        .deploy-heading, .merge-train-position-indicator { c: 0 bd hl }
        /// Pipelines -> Downstream icon in linked pipelines. @upstream
        /.linked-pipeline-mini-list.is-downstream {
            /// Reset position.
            > svg.arrow-icon + a[href] { margin-top: 5px i }
            /// Reset size.
            [class *= 'ci-status'] {
                c: 0 0 hl
                &, .s16 { width: 24px i; height: @width }
                &:hover > .s16 { width: 22px i; height: @width }
            }
        }
        /// Fix CI status text color. #135
        .ci-widget { c: fg }
        /// Footer.
        .mr-widget-footer {
            c: 0 bd;
            .btn-link { c: ac }
            .mr-widget-help { c: fg3 }
        }
        /// Reset for pipeline/commit/branch selectors.
        .pipeline-number, .commit-sha, .label-branch {
            padding: 0.2em 0.4em;
            font-weight: normal i;
            color: ac;
            c: 0 0 hl;
            rad: 4px;
            box-shadow: inner;
            &.label-truncate > a { line-height: 1.2 i }
        }
        /// Text colors.
        .bold, .media-body, .code-text, .label-branch { c: fg }
        .diverged-commits-count, .coverage { c: cm }
    }

    // Project -> Wiki.
    .wiki {
        /// Old readmes/notes/etc. OBSOLETE
        a { color: ac }
        h1, h2 { c: fg1 bg3 }
        /// Page title.
        &-last-edit-by {
            c: cm;
            strong { c: fg }
        }
        /// Sidebar -> Navigation.
        &-sidebar.right-sidebar {
            a { c: cm }
            .active a { c: ac }
            .btn { c: 0 0 bg }
        }
        /// New page -> Reset inputs.
        &-form .form-control { c: 0 0 bg }
        /// Page history -> Tweak tables.
        &-page-header + .table-holder > table {
            margin-top: 10px;
            border: 1px solid bd;
            thead > tr > th { border-top: none }
            tbody > tr:hover { c: 0 0 bb }
        }
        /// Tables -> History.
        &-history.table {
            margin-top: 16px
            border: 1px solid bg5
            thead > tr > th { border-top: none }
            tbody > tr > td { border-top: 1px solid bg5 i }
        }
    }

    // Project -> Clusters.
    .cluster {
        /// #142
        &-application {
            &-list { c: 0 bg5 }
            &-row {
                c: 0 0 hl
                img.avatar:not(.identicon) { background-color: 0 0 unset i }
            }
        }
        /// !43
        &s {
            &-container &-table {
                c: 0 bd hl;
            }
        }
    }

    // Project -> Settings.
    .project {
        /// Grouped options.
        &-visibility-setting, &-feature-settings, /.sub-section {
            c: 0 bd hl;
        }
        /// Sections.
        /.settings {
            c: 0 bg3
            ../-feature-row .form-control { c: 0 0 bg }
            &-message { c: v98 v24 v21 }
            .account-well {
                c: 0 bd hl;
                /// Project -> Settings -> Mirroring repositories.
                li > code { c: 0 0 bg }
            }
            /// Protected branches/tags.
            .protected-branches-list > .table-bordered { border: none i }
            .protected-tags-list { border: 1px solid bd i; rad: 4px }
            /// General -> Advanced section.
            &-content .sub-section {
                rad: 4px;
                .btn-default, .form-control, .select2-choice { c: 0 0 bg }
                .btn-default:hover { c: 0 0 bg3 }
            }
        }
        /// Project -> Tweaks for multiple rows of badges.
        &-badges {
            margin-top: -0.5rem
            img { margin-top: 0.5rem; rad: 4px }
        }
    }

    // Project -> File viewer.
    .file-holder {
        c: 0 bd;
        /// Header.
        .file-title {
            c: 0 bd hl;
            /// Search -> Code.
            &-flex-parent {
                c: fg bd hl;
                /// Header buttons.
                a { color: fg1 }
                .btn.disabled { c: fg5 bg5 bg3 }
            }
            &-name, strong { c: fg }
        }
        .file-content {
            c: 0 0 bg;
            rad: 0 0 3px 3px;
            /// Fix code area background.
            pre.code.highlight.white:not([lang]) { c: 0 0 bg }

            /// Fix text color for Markdown areas on old instances. OBSOLETE
            &.wiki, /.documentation-index {
                c: fg1 bg5

                /// Reset text colors.
                p { c: inherit }
                > * { c: inherit inherit }
                a { &, & > code { color: v08 }}

                /// Heading anchors.
                .anchor::after {
                    content: '#' i
                    c: fg5
                }
            }

            /// Help -> 'Quick help' panel on old instances. OBSOLETE
            /.panel {
                c: 0 bg5 bg1
                &-default { c: 0 0 t } // Settings -> Mirroring repositories.
                > .panel-heading { c: fg1 bg5 bg3 }
                li:not([class*='disabled']):hover { c: 0 0 bg2 }
            }
        }

        /// Project -> File viewer.
        /.code.white { c-hl-none } {
            .line-numbers {
                c: 0 0 bg2
                > a { c: fg3 0 t }
            }

            /// Reset code area colors.
            pre.code, .line_content {
                c: fg1 bg5 bg1
            }

            code {
                span.line:hover {
                    c: 0 0 bg2
                    &.hll { c: 0 0 v32 }
                }

                /// Highlighted line.
                .hll { c: 0 0 v31 }

                /// Global -> Idiffs.
                /.idiff {
                    /// Notes.
                    &.addition { c: v49 0 v41 }
                    &.deletion { c: v19 0 v11 }

                    /// Commit diffs.
                    /.old & { c: v99 0 v12 }
                    /.new & { c: v99 0 v42 }
                }
            }

            /// Code area.
            /pre.code {
                /// Resets colors when syntax is set to white.
                /.code.white & { c: fg1 bg5 bg1 }

                /// Feat -> Set 'none' syntax colors to use theme colors.
                if (c_hl_none) {
                    /.code.none & {
                        c: fg1 bg5 bg1
                        /// Tokens are still there in the file viewer.
                        .line span { c: fg1 }
                    }
                }

                /// Syntax highlighting.
                /.code.white {
                    /// Package links.
                    .line a { c: v67 }

                    /// Errors.
                    .err { c: v99 0 v13 }

                    /// Additions/deletions in patches.
                    .gi { c: v98 0 v42 }
                    .gd { c: v98 0 v12 }

                    /// Tokens.
                    .c, .cm, .c1, .gh, .nn, .go, .gt { c: fg4 }
                    .n, .cp, .gp, .s { c: fg1 }
                    .no, .na, .nb { c: v57 }
                    .sx, .se, .sh, .s1, .s2 { c: v17 }
                    .sr, .vi, .mf, .ne, .nv { c: v46 }
                    .nt, .m, .mi, .mh { c: v67 }
                    .nf, .ss, .si, .nc { c: v78 }
                    .ni, .gu, .sb, .kt { c: v86 }
                }
            }
        }
        /// Fix missing border-top style. @upstream
        /.file-title {
            &, &-flex-parent {
                border-top: 1px solid bd i;
                rad: 4px 4px 0 0;
            }
        }
    }

    // Project -> Diff viewer.
    .diff-file {
        /// Header.
        .file {
            /// Increase top offset when nb_height is enabled.
            if (nb_height) {
                &-title, &-title-flex-parent {
                    top: 165px;
                    ~/.conflict ^[-1..-2] { top: 49px i }
                    &.is-commit, &.is-compare { top: 117px }
                    /// Commit details inconsistency. @upstream
                    /.sticky-placeholder + div .is-commit { top: 86px i }
                }
            }
            &-title, &-title-flex-parent {
                // border-top: none i;
                box-shadow: none i;
                /// Diff -> Hide comment toggle/avatars.
                &::before { c: 0 0 bb }
            }

            /// Non-previewable files in diffs.
            /// https://gitlab.com/vednoc/dark-gitlab/-/merge_requests/7/diffs
            ../.preview-container {
                .file-container {
                    c: 0 0 t
                    .file-info { c: fg3 }
                }

                /// Image discussions.
                /// NOTE: Seems to be a bugged on upstream.
                /.note-container {
                    c: 0 bg5 t
                    .discussion {
                        &-notes::before, &-form::before {
                            c: 0 0 t
                            filter: invert(0.7)
                        }
                    }
                }
            }
        }
        /// Content.
        .diff-content {
            rad: 0 0 4px 4px // @upstream
            c: fg 0 bg;
            /// Collapsed diff / Empty files.
            /.nothing-here-block {
                c: cm;
                .click-to-expand { c: ac t t }
            }
            /// Image diff.
            .image {
                c: 0 0 bg;
                .frame {
                    c: 0 0 t;
                    &.added { c: 0 green }
                    &.deleted { c: 0 red }
                    img {
                        grad = 45deg, bd 25%, t 25%, t 75%, bd 75%, bd 100%;
                        background-image: linear-gradient(grad), linear-gradient(grad);
                        c: 0 bd;
                        &:-moz-broken::before { content: 'broken image' }
                    }
                }
                &-info { c: fg3 }
                ~ .note-container { c: 0 t t }

                /// Invert controls.
                if (dark(BG)) {
                    .swipe .swipe-bar,
                    .controls {
                        filter: invert(0.95) brightness(100%)
                    }
                }
            }
            /// Image preview modes.
            .view-modes {
                c: 0 0 t;
                li { c: cm bd }
                .active { c: fg }
            }
            /// Notes -> Code discussion borders.
            .notes_holder td { border-top-color: bd i }
            .notes_holder td, .diff-discussions {
                border-bottom-color: bd i;
            }
        }
        /// Diff -> Change summary.
        &s-changed {
            c: 0 bd bb;
            > div > .dropdown {
                margin-left: 0;
                padding-left: 0;
                c: 0 0 t;
            }
            /.cred:not(#z) { c: v16; g: v16 }
            /.cgreen:not(#z) { c: v45; g: v45 }
            /.highlighted:not(#z) { c: v09 }
            /.diff-changed-file-path { c: cm }
            [class *= 'summary-toggle'] {
                c: v67 0 t
                /// Reset hover styles.
                &::before { content: unset }
            }
            /// Increase top offset when nb_height is enabled.
            if (nb_height) { top: 49px }
        }
        /// Diff -> Active file.
        &.is-active { box-shadow: bsh i }
        /// Diff -> File tree.
        /.diff-tree-list {
            if (nb_height) { top: 165px i }
            /// Resize handle.
            .drag-handle {
                &:hover { c: 0 0 hl }
                &.is-dragging { c: 0 0 bd }
            }
            /// Items.
            .file-row {
                &:hover, &:focus { c: 0 0 hl }
                &-header.bg-white { c: 0 0 bb }
                /// Active item. #129
                &.is-active { c: 0 0 bg2 }
            }
        }

        /// MR -> Resolve conflicts. #82
        &.conflict {
            border-top: none i

            /// Changes.
            tr.line_holder {
                .head {
                    c: 0 v43 v40
                    .btn { c: 0 v43 v43 }
                    &.diff-line-num,
                    &.line_content.header,
                    &.line_content:hover {
                        c: 0 0 v41
                    }
                }
                .origin {
                    c: 0 v63 v60
                    .btn { c: 0 v63 v63 }
                    &.diff-line-num,
                    &.line_content.header,
                    &.line_content:hover {
                        c: 0 0 v61
                    }
                }
                .unselected {
                    c: 0 bg5 bg3
                    &.diff-line-num { c: 0 0 bg3 }
                    &.line_content {
                        &.header, &:hover:not(#z) { c: 0 0 bg3 }
                        &:not(.header) { c: 0 0 bg2 }
                    }
                }
            }

            /// Edit inline.
            .editor-wrap.saved .editor { c: 0 v45 }
        }
    }

    // Project -> Code area.
    .code.white { c-hl-none } {
        c: fg 0 bg 0 0 0;

        .line_holder {
            /// Override the default text color.
            pre.code, .line_content { c: fg1 bg5 }

            /// Buttons -> Add new note.
            /button.add-diff-note {
                c: fg1 bg5 bg2
                &:hover { c: 0 0 bg4 }
            }

            /// Unfold lines.
            .unfold:not(#z) {
                &, + .line_content { c: fg4 }
            }

            /// Matching and 'No newline at end of file' lines.
            &.match, &.new-nonewline {
                c: 0 0 bg2
                .match { c: fg4 }
            }

            /// Line numbers.
            .diff-line-num {
                c: fg4 0 bg2

                /// Line numbers.
                > a { c: fg3 }

                /// Fix border colors while loading.
                /.diff-line-num { c: 0 bg5 }

                /// Status.
                &.old { c: 0 v12 v11 }
                &.new { c: 0 v42 v41 }
                &.hll { c: 0 v32 v31 }

                /// Hover event.
                &.is-over {
                    &.diff-line-num {
                        c: 0 0 bg4
                        + .line_content { c: 0 0 bg3 }
                    }

                    &.old { c: 0 v14 v12 }
                    &.new { c: 0 v44 v42 }
                    &.hll { c: 0 v34 v32 }

                    /// HACK: Highlight individual lines.
                    ../../:hover .diff-td,
                    ../../:hover > [class ^= 'line'] {
                        &:not(.match):not(.old):not(.new):not(.hll) { c: 0 0 bg3 }
                        &.old:not(.diff-line-num) { c: 0 0 v11 }
                        &.new:not(.diff-line-num) { c: 0 0 v41 }
                        &.hll:not(.diff-line-num) { c: 0 0 v31 }
                    }
                }
            }

            /// Code lines.
            [class^='line'], .diff-td:not(.diff-line-num) {
                c: 0 0 t

                /// States.
                /.parallel.left-side.old { c: 0 0 v10 }
                &.old { c: 0 0 v10; &::before { c: v16 }}
                &.new { c: 0 0 v40; &::before { c: v46 }}
                &.hll { c: 0 0 v30; &::before { c: fg3 }}
            }

            /// Diff -> Add border to right-side of side-by-side view.
            &:not(.diff-expanded) > .left-side {
                + .right-side, + .diff-line-num {
                    border-left: 1px solid bg5 i
                }
            }

            /// Diff -> Expanded sections.
            &.diff-expanded {
                .diff-line-num { border-right-color: bg2 i }
                .line_content:not(#z) { c: 0 0 bg2 }
            }

            /// Diff -> Comment avatars.
            /.diff-comment {
                &-avatar, &s-more-count { c: 0 bg1 }

                /// Reset avatars.
                &s-more-count, /.diff-notes-collapse {
                    rad: var(--avatar)
                    c: fg1 bg5 bg4
                }

                /// New discussion block.
                /.js-temp-notes-holder td { c: 0 bg5 }
            }
        }

        /// Show unchanged lines.
        .line_expansion {
            c: 0 0 bg2
            td, .diff-td { c: 0 bg5 }
            a, span { c: ac }
        }

        /// Project -> Settings -> Status/Report tables.
        &.white { c: fg 0 t 0 0 0 }
        /// Diff -> Fix border for 'Show unchanged lines'. @upstream
        .diff-tr:last-child { rad: 0 0 4px 4px }
        .diff-tr:last-child > .diff-td,
        tbody > tr.line_expansion.match:last-child > td {
            border-bottom: none i;
        }
    }

    // Groups -> Landing page.
    .group-list-tree {
        &::before { c: 0 bd }
        .folder-caret, .item-type-icon { c: cm }
        .group-row {
            c: 0 bd;
            a { c: fg }
            &::before { c: 0 bd }
            &-contents:hover { c: 0 0 hl }
            &:last-child::before { c: 0 0 bb }
            .metadata { margin-right: 10px }
            .description p, .stat-value, .last-updated { c: fg4 }
        }
        .folder-caret { margin-left: 10px }
    }

    // Profile -> Cover.
    .cover {
        &-block { c: 0 0 bg1 }
        &-title, &-status, &-desc { c: fg }

        /// Activity calendar.
        /.calendar {
            &-hint { c: fg1 }
            svg.contrib-calendar > g {
                text { g: fg4 }
     ...