Dark-GitLab by vednoc

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

Dark-GitLab screenshot
Homepage Install Get Stylus Write a review

Details

Authorvednoc

LicenseMIT

Created atApril 02, 2021 17:22

Updated atJuly 23, 2021 22:30

Applies togitlab.com

Statistics

Learn how we calculate statistics in the FAQ.

Total views726

Total installs1831

Weekly installs96

Weekly updates98

Description

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

Notes

Userstyle doesn't have notes.

History

Daily snapshots of style statistics.

2021-07-072021-07-212021-08-032021-08-172021-08-302021-09-122021-09-262021-10-092021-10-222021-11-052021-11-182021-12-01Date0.0010.9021.8032.7043.5054.4065.3076.2087.00Daily countDaily installsDaily updatesDaily views
2021-07-072021-07-222021-08-062021-08-212021-09-042021-09-192021-10-042021-10-182021-11-022021-11-172021-12-01Date0.00240.00480.00720.00950.001190.001430.001670.001900.00Total countTotal installsTotal views

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.