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 atJuly 23, 2021 22:30
Applies togitlab.com
Statistics

Total views89
Total installs115
Weekly installs59
Weekly updates13
Description

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

Userstyle doesn't have notes.
History

Learn more about style statistics in the FAQ.
Source code

Source code has over 100k 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.14
@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'),
domain('git.rockylinux.org'),
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.14';
        --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 }
                .nav-link { c: fg1 }
            }

            /// 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; 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 { b: $f v64 i }
        }

        /// Background-color buttons.
        &-comment-and-close:not(#z),
        &-secondary {
            c: fg1 bg5 bg1
            &:hover { c: 0 0 bg3 }
            &:focus { c: 0 0 bg4; b: $f v64 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 }

                /// Button states.
                .btn:focus { c: fg1 bg5 bg2; b: $f v64 i }
                .btn:active { c: fg1 bg5 bg4 0 0 0 }
            }
        }

        /// 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: v99 0 v45 }
        &.merge-requests-count { c: v99 0 v25 }
        &.todos-count { c: v99 0 v65 }
        &-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 box shadow.
                li.active { b: none i }

                /// 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 bg4 }
        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 { c: 0 bg4 } // #172
            &-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 'add a to-do' button.
            .sidebar-collapsed-container:not(:hover) { c: 0 0 t }

            /// 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: v99 v07 v03 }
        }
    }

    // Global -> Markdown area.
    .md {
        c: fg;
        h1, h2 { c: fg1 bg3 }
        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 {
  ...
Reviews

No reviews yet.