Dark-GitLab by vednoc
Imported and mirrored from https://gitlab.com/vednoc/dark-gitlab/raw/master/gitlab.user.styl
Details
Authorvednoc
LicenseMIT
Created
Updated
Categorygitlab.com
Description
Dark and light theme for GitLab and self-hosted GitLab instances.
Notes
Userstyle doesn't have notes.History
Daily snapshots of style statistics.
No style history. Come back in a couple of days.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 {
...