Skip to content
Snippets Groups Projects
Commit 15faa674 authored by Mike Greiling's avatar Mike Greiling :speech_balloon:
Browse files

Merge branch 'renovate/gitlab-uisvg' into 'master' 

Update dependency @gitlab/ui to v49.5.1

See merge request !103040



Merged-by: default avatarMike Greiling <mike@pixelcog.com>
Approved-by: default avatarPaul Gascou-Vaillancourt <pgascouvaillancourt@gitlab.com>
Approved-by: default avatarMike Greiling <mike@pixelcog.com>
Co-authored-by: default avatarPaul Gascou-Vaillancourt <paul.gascvail@gmail.com>
Co-authored-by: default avatarIllya Klymov <xanf@xanf.me>
Co-authored-by: default avatarnickbrandt <nbrandt@gitlab.com>
Co-authored-by: default avatarGitLab Renovate Bot <gitlab-bot@gitlab.com>
parents ee0220a4 d1f603f8
No related branches found
No related tags found
2 merge requests!103838Draft: Run test in MR with ce570f0 merging into fef465,!103040Update dependency @gitlab/ui to v49.5.1
Pipeline #691309813 failed
Stage: sync
Stage: prepare
Stage: build-images
Stage: fixtures
Stage: lint
Stage: test
Stage: post-test
Stage: notify
Hide whitespace changes
Inline Side-by-side
Showing
with 536 additions and 532 deletions
app/assets/javascripts/vue_shared/gl_feature_flags_plugin.js
+ 9
− 7
View file @ 15faa674
export default (Vue) => {
Vue.mixin({
provide: {
glFeatures:
{
...window.gon?.features,
// TODO: extract into glLicensedFeatures https://gitlab.com/gitlab-org/gitlab/-/issues/322460
...window.gon?.licensed_features,
} || {},
provide() {
return {
glFeatures:
{
...window.gon?.features,
// TODO: extract into glLicensedFeatures https://gitlab.com/gitlab-org/gitlab/-/issues/322460
...window.gon?.licensed_features,
} || {},
};
},
});
};
app/assets/stylesheets/framework/variables.scss
+ 28
− 26
View file @ 15faa674
......@@ -88,14 +88,6 @@ $white-normal: #f0f0f0 !default;
$white-dark: #eaeaea !default;
$white-transparent: rgba($white, 0.8) !default;
$gray-lightest: #fdfdfd !default;
$gray-light: #fafafa !default;
$gray-lighter: #f9f9f9 !default;
$gray-normal: #f5f5f5 !default;
$gray-dark: darken($gray-light, $darken-dark-factor) !default;
$gray-darker: #eee !default;
$gray-darkest: #c4c4c4 !default;
$purple: #6d49cb !default;
$purple-light: #ede8fb !default;
......@@ -103,11 +95,6 @@ $black: #000 !default;
$black-transparent: rgba(0, 0, 0, 0.3) !default;
$almost-black: #242424 !default;
$t-gray-a-02: rgba($black, 0.02) !default;
$t-gray-a-04: rgba($black, 0.04) !default;
$t-gray-a-06: rgba($black, 0.06) !default;
$t-gray-a-08: rgba($black, 0.08) !default;
$green-50: #ecf4ee !default;
$green-100: #c3e6cd !default;
$green-200: #91d4a8 !default;
......@@ -168,18 +155,33 @@ $purple-800: #453894 !default;
$purple-900: #2f2a6b !default;
$purple-950: #232150 !default;
$gray-10: #f5f5f5 !default;
$gray-50: #f0f0f0 !default;
$gray-100: #dbdbdb !default;
$gray-200: #bfbfbf !default;
$gray-300: #999 !default;
$gray-400: #868686 !default;
$gray-500: #666 !default;
$gray-600: #5e5e5e !default;
$gray-700: #525252 !default;
$gray-800: #404040 !default;
$gray-900: #303030 !default;
$gray-950: #1f1f1f !default;
$gray-10: #fbfafd !default;
$gray-50: #ececef !default;
$gray-100: #dcdcde !default;
$gray-200: #bfbfc3 !default;
$gray-300: #a4a3a8 !default;
$gray-400: #89888d !default;
$gray-500: #737278 !default;
$gray-600: #626168 !default;
$gray-700: #535158 !default;
$gray-800: #434248 !default;
$gray-900: #333238 !default;
$gray-950: #1f1e24 !default;
$gray-lightest: lighten($gray-10, 1) !default;
$gray-light: $gray-10 !default;
$gray-lighter: lighten($gray-50, 4) !default;
$gray-normal: lighten($gray-50, 2) !default;
$gray-dark: darken($gray-light, $darken-dark-factor) !default;
$gray-darker: $gray-50 !default;
$gray-darkest: $gray-200 !default;
$t-gray-a-02: rgba($gray-950, 0.02) !default;
$t-gray-a-04: rgba($gray-950, 0.04) !default;
$t-gray-a-06: rgba($gray-950, 0.06) !default;
$t-gray-a-08: rgba($gray-950, 0.08) !default;
$t-gray-a-16: rgba($gray-950, 0.16) !default;
$t-gray-a-24: rgba($gray-950, 0.24) !default;
$greens: (
'50': $green-50,
......@@ -370,7 +372,7 @@ $border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor);
/*
* UI elements
*/
$contextual-sidebar-bg-color: #f5f5f5;
$contextual-sidebar-bg-color: $gray-10;
$contextual-sidebar-border-color: #e9e9e9;
$border-color: $gray-100;
$shadow-color: $t-gray-a-08;
......
app/assets/stylesheets/startup/startup-dark.scss
+ 127
− 127
View file @ 15faa674
......@@ -6,15 +6,15 @@
color-scheme: dark;
}
body.gl-dark {
--gray-10: #1f1f1f;
--gray-50: #303030;
--gray-100: #404040;
--gray-200: #525252;
--gray-700: #dbdbdb;
--gray-900: #fafafa;
--gray-10: #1f1e24;
--gray-50: #333238;
--gray-100: #434248;
--gray-200: #535158;
--gray-700: #bfbfc3;
--gray-900: #ececef;
--green-100: #0d532a;
--green-700: #91d4a8;
--gl-text-color: #fafafa;
--gl-text-color: #ececef;
--border-color: #4f4f4f;
--black: #fff;
}
......@@ -42,9 +42,9 @@ body {
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #fafafa;
color: #ececef;
text-align: left;
background-color: #1f1f1f;
background-color: #1f1e24;
}
ul {
margin-top: 0;
......@@ -118,7 +118,7 @@ kbd {
padding: 0.2rem 0.4rem;
font-size: 90%;
color: #333;
background-color: #fafafa;
background-color: #ececef;
border-radius: 0.2rem;
}
kbd kbd {
......@@ -141,24 +141,24 @@ kbd kbd {
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
color: #fafafa;
color: #ececef;
background-color: #333;
background-clip: padding-box;
border: 1px solid #868686;
border: 1px solid #737278;
border-radius: 0.25rem;
}
@media (prefers-reduced-motion: reduce) {
}
.form-control:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #fafafa;
text-shadow: 0 0 0 #ececef;
}
.form-control::placeholder {
color: #bfbfbf;
color: #a4a3a8;
opacity: 1;
}
.form-control:disabled {
background-color: #303030;
background-color: #333238;
opacity: 1;
}
.form-inline {
......@@ -176,7 +176,7 @@ kbd kbd {
.btn {
display: inline-block;
font-weight: 400;
color: #fafafa;
color: #ececef;
text-align: center;
vertical-align: middle;
user-select: none;
......@@ -212,7 +212,7 @@ kbd kbd {
padding: 0.5rem 0;
margin: 0.125rem 0 0;
font-size: 1rem;
color: #fafafa;
color: #ececef;
text-align: left;
list-style: none;
background-color: #333;
......@@ -319,15 +319,15 @@ kbd kbd {
border-radius: 10rem;
}
.badge-success {
color: #fff;
color: #fbfafd;
background-color: #2da160;
}
.badge-info {
color: #fff;
color: #fbfafd;
background-color: #428fdc;
}
.badge-warning {
color: #fff;
color: #fbfafd;
background-color: #c17d10;
}
.rounded-circle {
......@@ -455,8 +455,8 @@ a.gl-badge.badge-warning:active {
padding-left: 0.75rem;
padding-right: 0.75rem;
height: auto;
color: #fafafa;
box-shadow: inset 0 0 0 1px #868686;
color: #ececef;
box-shadow: inset 0 0 0 1px #737278;
border-style: none;
appearance: none;
-moz-appearance: none;
......@@ -465,17 +465,17 @@ a.gl-badge.badge-warning:active {
.gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only,
.gl-form-input.form-control:disabled,
.gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
background-color: #1f1f1f;
box-shadow: inset 0 0 0 1px #404040;
background-color: #1f1e24;
box-shadow: inset 0 0 0 1px #434248;
}
.gl-form-input:disabled,
.gl-form-input.form-control:disabled {
cursor: not-allowed;
color: #999;
color: #89888d;
}
.gl-form-input::placeholder,
.gl-form-input.form-control::placeholder {
color: #868686;
color: #737278;
}
.gl-icon {
fill: currentColor;
......@@ -518,9 +518,9 @@ a.gl-badge.badge-warning:active {
padding-right: 0.75rem;
background-color: transparent;
line-height: 1rem;
color: #fafafa;
color: #ececef;
fill: currentColor;
box-shadow: inset 0 0 0 1px #525252;
box-shadow: inset 0 0 0 1px #535158;
justify-content: center;
align-items: center;
font-size: 0.875rem;
......@@ -531,20 +531,20 @@ a.gl-badge.badge-warning:active {
}
.gl-button.gl-button.btn-default:active,
.gl-button.gl-button.btn-default.active {
box-shadow: inset 0 0 0 1px #bfbfbf, 0 0 0 1px #333, 0 0 0 3px #1f75cb;
box-shadow: inset 0 0 0 1px #a4a3a8, 0 0 0 1px #333, 0 0 0 3px #1f75cb;
outline: none;
background-color: #404040;
background-color: #434248;
}
.gl-button.gl-button.btn-default:active .gl-icon,
.gl-button.gl-button.btn-default.active .gl-icon {
color: #fafafa;
color: #ececef;
}
.gl-button.gl-button.btn-default .gl-icon {
color: #999;
color: #89888d;
}
.gl-search-box-by-type-search-icon {
margin: 0.5rem;
color: #999;
color: #89888d;
width: 1rem;
position: absolute;
}
......@@ -594,11 +594,11 @@ svg {
height: 0;
margin: 4px 0;
overflow: hidden;
border-top: 1px solid #404040;
border-top: 1px solid #434248;
}
.toggle-sidebar-button .collapse-text,
.toggle-sidebar-button .icon-chevron-double-lg-left {
color: #999;
color: #89888d;
}
html {
overflow-y: scroll;
......@@ -614,20 +614,20 @@ html {
font-weight: 400;
padding: 6px 10px;
background-color: #333;
border-color: #404040;
color: #fafafa;
color: #fafafa;
border-color: #434248;
color: #ececef;
color: #ececef;
white-space: nowrap;
}
.btn:active {
background-color: #303030;
background-color: #333238;
box-shadow: none;
}
.btn:active,
.btn.active {
background-color: #444;
border-color: #4f4f4f;
color: #fafafa;
color: #ececef;
}
.btn svg {
height: 15px;
......@@ -639,7 +639,7 @@ html {
.badge.badge-pill:not(.gl-badge) {
font-weight: 400;
background-color: rgba(255, 255, 255, 0.07);
color: #dbdbdb;
color: #bfbfc3;
vertical-align: baseline;
}
.gl-font-sm {
......@@ -658,10 +658,10 @@ html {
.dropdown-menu-toggle {
padding: 6px 8px 6px 10px;
background-color: #333;
color: #fafafa;
color: #ececef;
font-size: 14px;
text-align: left;
border: 1px solid #404040;
border: 1px solid #434248;
border-radius: 0.25rem;
white-space: nowrap;
}
......@@ -690,7 +690,7 @@ html {
font-weight: 400;
padding: 8px 0;
background-color: #333;
border: 1px solid #404040;
border: 1px solid #434248;
border-radius: 0.25rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
......@@ -713,7 +713,7 @@ html {
font-weight: 400;
position: relative;
padding: 8px 12px;
color: #fafafa;
color: #ececef;
line-height: 16px;
white-space: normal;
overflow: hidden;
......@@ -723,7 +723,7 @@ html {
.dropdown-menu li > a:active,
.dropdown-menu li button:active {
background-color: #4f4f4f;
color: #fafafa;
color: #ececef;
outline: 0;
text-decoration: none;
}
......@@ -737,7 +737,7 @@ html {
height: 1px;
margin: 0.25rem 0;
padding: 0;
background-color: #404040;
background-color: #434248;
}
.dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) {
margin-right: 40px;
......@@ -764,7 +764,7 @@ html {
}
input {
border-radius: 0.25rem;
color: #fafafa;
color: #ececef;
background-color: #333;
}
.form-control {
......@@ -772,23 +772,23 @@ input {
padding: 6px 10px;
}
.form-control::placeholder {
color: #868686;
color: #737278;
}
kbd {
display: inline-block;
padding: 3px 5px;
font-size: 0.6875rem;
line-height: 10px;
color: var(--gray-700, #dbdbdb);
color: var(--gray-700, #bfbfc3);
vertical-align: middle;
background-color: var(--gray-10, #1f1f1f);
background-color: var(--gray-10, #1f1e24);
border-width: 1px;
border-style: solid;
border-color: var(--gray-100, #404040) var(--gray-100, #404040)
var(--gray-200, #525252);
border-color: var(--gray-100, #434248) var(--gray-100, #434248)
var(--gray-200, #535158);
border-image: none;
border-radius: 3px;
box-shadow: 0 -1px 0 var(--gray-200, #525252) inset;
box-shadow: 0 -1px 0 var(--gray-200, #535158) inset;
}
.navbar-gitlab {
padding: 0 16px;
......@@ -1042,7 +1042,7 @@ kbd {
width: 100%;
align-items: center;
padding: 10px 16px 10px 10px;
color: #fafafa;
color: #ececef;
background-color: transparent;
border: 0;
text-align: left;
......@@ -1054,7 +1054,7 @@ kbd {
.context-header .sidebar-context-title {
overflow: hidden;
text-overflow: ellipsis;
color: #fafafa;
color: #ececef;
}
@media (min-width: 768px) {
.page-with-contextual-sidebar {
......@@ -1078,7 +1078,7 @@ kbd {
z-index: 600;
width: 256px;
top: var(--header-height, 48px);
background-color: #f5f5f5;
background-color: #1f1e24;
border-right: 1px solid #e9e9e9;
transform: translate3d(0, 0, 0);
}
......@@ -1115,7 +1115,7 @@ kbd {
}
.nav-sidebar a {
text-decoration: none;
color: #fafafa;
color: #ececef;
}
.nav-sidebar li {
white-space: nowrap;
......@@ -1400,7 +1400,7 @@ kbd {
display: block;
}
.sidebar-top-level-items li > a.gl-link {
color: #fafafa;
color: #ececef;
}
.sidebar-top-level-items li > a.gl-link:active {
text-decoration: none;
......@@ -1417,12 +1417,12 @@ kbd {
.close-nav-button {
height: 48px;
padding: 0 16px;
background-color: #303030;
background-color: #333238;
border: 0;
color: #999;
color: #89888d;
display: flex;
align-items: center;
background-color: #f5f5f5;
background-color: #1f1e24;
position: fixed;
bottom: 0;
width: 255px;
......@@ -1493,14 +1493,14 @@ kbd {
}
}
input::-moz-placeholder {
color: #868686;
color: #737278;
opacity: 1;
}
input::-ms-input-placeholder {
color: #868686;
color: #737278;
}
input:-ms-input-placeholder {
color: #868686;
color: #737278;
}
svg {
fill: currentColor;
......@@ -1629,7 +1629,7 @@ svg.s16 {
padding: 0;
background: #222;
overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 0 0 1px rgba(251, 250, 253, 0.1);
}
.avatar.avatar-tile {
border-radius: 0;
......@@ -1638,8 +1638,8 @@ svg.s16 {
.identicon {
text-align: center;
vertical-align: top;
color: #fafafa;
background-color: #303030;
color: #ececef;
background-color: #333238;
}
.identicon.s16 {
font-size: 10px;
......@@ -1668,7 +1668,7 @@ svg.s16 {
background-color: #5c2900;
}
.identicon.bg7 {
background-color: #303030;
background-color: #333238;
}
.avatar-container {
overflow: hidden;
......@@ -1707,18 +1707,18 @@ svg.s16 {
color-scheme: dark;
}
body.gl-dark {
--gray-10: #1f1f1f;
--gray-50: #303030;
--gray-100: #404040;
--gray-200: #525252;
--gray-300: #5e5e5e;
--gray-400: #868686;
--gray-500: #999;
--gray-600: #bfbfbf;
--gray-700: #dbdbdb;
--gray-800: #f0f0f0;
--gray-900: #fafafa;
--gray-950: #fff;
--gray-10: #1f1e24;
--gray-50: #333238;
--gray-100: #434248;
--gray-200: #535158;
--gray-300: #626168;
--gray-400: #737278;
--gray-500: #89888d;
--gray-600: #a4a3a8;
--gray-700: #bfbfc3;
--gray-800: #dcdcde;
--gray-900: #ececef;
--gray-950: #fbfafd;
--green-50: #0a4020;
--green-100: #0d532a;
--green-200: #24663b;
......@@ -1790,7 +1790,7 @@ body.gl-dark {
--dark-icon-color-purple-3: #9a79f7;
--dark-icon-color-orange-1: #665349;
--dark-icon-color-orange-2: #b37a5d;
--gl-text-color: #fafafa;
--gl-text-color: #ececef;
--border-color: #4f4f4f;
--white: #333;
--black: #fff;
......@@ -1800,49 +1800,49 @@ body.gl-dark {
.nav-sidebar,
.toggle-sidebar-button,
.close-nav-button {
background-color: #262626;
border-right: 1px solid #303030;
background-color: #29282d;
border-right: 1px solid #333238;
}
.gl-avatar:not(.gl-avatar-identicon),
.avatar-container,
.avatar {
background: rgba(255, 255, 255, 0.04);
background: rgba(251, 250, 253, 0.04);
}
.gl-avatar {
border-style: none;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 0 0 1px rgba(251, 250, 253, 0.1);
}
body.gl-dark {
--gl-theme-accent: #868686;
--gl-theme-accent: #737278;
}
body.gl-dark .navbar-gitlab {
background-color: #fafafa;
background-color: #ececef;
}
body.gl-dark .navbar-gitlab .navbar-collapse {
color: #fafafa;
color: #ececef;
}
body.gl-dark .navbar-gitlab .container-fluid .navbar-toggler {
border-left: 1px solid #b3b3b3;
color: #fafafa;
border-left: 1px solid #a3a2a6;
color: #ececef;
}
body.gl-dark .navbar-gitlab .navbar-sub-nav > li.active > a,
body.gl-dark .navbar-gitlab .navbar-sub-nav > li.active > button,
body.gl-dark .navbar-gitlab .navbar-nav > li.active > a,
body.gl-dark .navbar-gitlab .navbar-nav > li.active > button {
color: #fafafa;
color: #ececef;
background-color: #333;
}
body.gl-dark .navbar-gitlab .navbar-sub-nav {
color: #fafafa;
color: #ececef;
}
body.gl-dark .navbar-gitlab .nav > li {
color: #fafafa;
color: #ececef;
}
body.gl-dark .navbar-gitlab .nav > li.header-search-new {
color: #fafafa;
color: #ececef;
}
body.gl-dark .navbar-gitlab .nav > li > a .notification-dot {
border: 2px solid #fafafa;
border: 2px solid #ececef;
}
body.gl-dark
.navbar-gitlab
......@@ -1850,7 +1850,7 @@ body.gl-dark
> li
> a.header-help-dropdown-toggle
.notification-dot {
background-color: #fafafa;
background-color: #ececef;
}
body.gl-dark
.navbar-gitlab
......@@ -1858,10 +1858,10 @@ body.gl-dark
> li
> a.header-user-dropdown-toggle
.header-user-avatar {
border-color: #fafafa;
border-color: #ececef;
}
body.gl-dark .navbar-gitlab .nav > li.active > a {
color: #fafafa;
color: #ececef;
background-color: #333;
}
body.gl-dark .navbar-gitlab .nav > li.active > a .notification-dot {
......@@ -1873,48 +1873,48 @@ body.gl-dark
> li.active
> a.header-help-dropdown-toggle
.notification-dot {
background-color: #fafafa;
background-color: #ececef;
}
body.gl-dark .header-search {
background-color: rgba(250, 250, 250, 0.2) !important;
background-color: rgba(236, 236, 239, 0.2) !important;
border-radius: 4px;
}
body.gl-dark .header-search svg.gl-search-box-by-type-search-icon {
color: rgba(250, 250, 250, 0.8);
color: rgba(236, 236, 239, 0.8);
}
body.gl-dark .header-search input {
background-color: transparent;
color: rgba(250, 250, 250, 0.8);
box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.4);
color: rgba(236, 236, 239, 0.8);
box-shadow: inset 0 0 0 1px rgba(236, 236, 239, 0.4);
}
body.gl-dark .header-search input::placeholder {
color: rgba(250, 250, 250, 0.8);
color: rgba(236, 236, 239, 0.8);
}
body.gl-dark .header-search input:active::placeholder {
color: #868686;
color: #737278;
}
body.gl-dark .header-search .keyboard-shortcut-helper {
color: #fafafa;
background-color: rgba(250, 250, 250, 0.2);
color: #ececef;
background-color: rgba(236, 236, 239, 0.2);
}
body.gl-dark .search form {
background-color: rgba(250, 250, 250, 0.2);
background-color: rgba(236, 236, 239, 0.2);
}
body.gl-dark .search .search-input::placeholder {
color: rgba(250, 250, 250, 0.8);
color: rgba(236, 236, 239, 0.8);
}
body.gl-dark .search .search-input-wrap .search-icon,
body.gl-dark .search .search-input-wrap .clear-icon {
fill: rgba(250, 250, 250, 0.8);
fill: rgba(236, 236, 239, 0.8);
}
body.gl-dark .nav-sidebar li.active > a {
color: #fafafa;
color: #ececef;
}
body.gl-dark .nav-sidebar .fly-out-top-item a,
body.gl-dark .nav-sidebar .fly-out-top-item.active a,
body.gl-dark .nav-sidebar .fly-out-top-item .fly-out-top-item-container {
background-color: var(--gray-100, #303030);
color: var(--gray-900, #fafafa);
background-color: var(--gray-100, #333238);
color: var(--gray-900, #ececef);
}
body.gl-dark .navbar-gitlab {
background-color: var(--gray-50);
......@@ -1951,18 +1951,18 @@ body.gl-dark .navbar-gitlab .search form .search-input {
color-scheme: dark;
}
body.gl-dark {
--gray-10: #1f1f1f;
--gray-50: #303030;
--gray-100: #404040;
--gray-200: #525252;
--gray-300: #5e5e5e;
--gray-400: #868686;
--gray-500: #999;
--gray-600: #bfbfbf;
--gray-700: #dbdbdb;
--gray-800: #f0f0f0;
--gray-900: #fafafa;
--gray-950: #fff;
--gray-10: #1f1e24;
--gray-50: #333238;
--gray-100: #434248;
--gray-200: #535158;
--gray-300: #626168;
--gray-400: #737278;
--gray-500: #89888d;
--gray-600: #a4a3a8;
--gray-700: #bfbfc3;
--gray-800: #dcdcde;
--gray-900: #ececef;
--gray-950: #fbfafd;
--green-50: #0a4020;
--green-100: #0d532a;
--green-200: #24663b;
......@@ -2034,7 +2034,7 @@ body.gl-dark {
--dark-icon-color-purple-3: #9a79f7;
--dark-icon-color-orange-1: #665349;
--dark-icon-color-orange-2: #b37a5d;
--gl-text-color: #fafafa;
--gl-text-color: #ececef;
--border-color: #4f4f4f;
--white: #333;
--black: #fff;
......
app/assets/stylesheets/startup/startup-general.scss
+ 61
− 61
View file @ 15faa674
......@@ -23,7 +23,7 @@ body {
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #303030;
color: #333238;
text-align: left;
background-color: #fff;
}
......@@ -99,7 +99,7 @@ kbd {
padding: 0.2rem 0.4rem;
font-size: 90%;
color: #fff;
background-color: #303030;
background-color: #333238;
border-radius: 0.2rem;
}
kbd kbd {
......@@ -122,24 +122,24 @@ kbd kbd {
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
color: #303030;
color: #333238;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #868686;
border: 1px solid #89888d;
border-radius: 0.25rem;
}
@media (prefers-reduced-motion: reduce) {
}
.form-control:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #303030;
text-shadow: 0 0 0 #333238;
}
.form-control::placeholder {
color: #5e5e5e;
color: #626168;
opacity: 1;
}
.form-control:disabled {
background-color: #fafafa;
background-color: #fbfafd;
opacity: 1;
}
.form-inline {
......@@ -157,7 +157,7 @@ kbd kbd {
.btn {
display: inline-block;
font-weight: 400;
color: #303030;
color: #333238;
text-align: center;
vertical-align: middle;
user-select: none;
......@@ -193,7 +193,7 @@ kbd kbd {
padding: 0.5rem 0;
margin: 0.125rem 0 0;
font-size: 1rem;
color: #303030;
color: #333238;
text-align: left;
list-style: none;
background-color: #fff;
......@@ -436,8 +436,8 @@ a.gl-badge.badge-warning:active {
padding-left: 0.75rem;
padding-right: 0.75rem;
height: auto;
color: #303030;
box-shadow: inset 0 0 0 1px #868686;
color: #333238;
box-shadow: inset 0 0 0 1px #89888d;
border-style: none;
appearance: none;
-moz-appearance: none;
......@@ -446,17 +446,17 @@ a.gl-badge.badge-warning:active {
.gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only,
.gl-form-input.form-control:disabled,
.gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
background-color: #f5f5f5;
box-shadow: inset 0 0 0 1px #dbdbdb;
background-color: #fbfafd;
box-shadow: inset 0 0 0 1px #dcdcde;
}
.gl-form-input:disabled,
.gl-form-input.form-control:disabled {
cursor: not-allowed;
color: #666;
color: #737278;
}
.gl-form-input::placeholder,
.gl-form-input.form-control::placeholder {
color: #868686;
color: #89888d;
}
.gl-icon {
fill: currentColor;
......@@ -499,9 +499,9 @@ a.gl-badge.badge-warning:active {
padding-right: 0.75rem;
background-color: transparent;
line-height: 1rem;
color: #303030;
color: #333238;
fill: currentColor;
box-shadow: inset 0 0 0 1px #bfbfbf;
box-shadow: inset 0 0 0 1px #bfbfc3;
justify-content: center;
align-items: center;
font-size: 0.875rem;
......@@ -512,20 +512,20 @@ a.gl-badge.badge-warning:active {
}
.gl-button.gl-button.btn-default:active,
.gl-button.gl-button.btn-default.active {
box-shadow: inset 0 0 0 1px #5e5e5e, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
box-shadow: inset 0 0 0 1px #626168, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
outline: none;
background-color: #dbdbdb;
background-color: #dcdcde;
}
.gl-button.gl-button.btn-default:active .gl-icon,
.gl-button.gl-button.btn-default.active .gl-icon {
color: #303030;
color: #333238;
}
.gl-button.gl-button.btn-default .gl-icon {
color: #666;
color: #737278;
}
.gl-search-box-by-type-search-icon {
margin: 0.5rem;
color: #666;
color: #737278;
width: 1rem;
position: absolute;
}
......@@ -575,11 +575,11 @@ svg {
height: 0;
margin: 4px 0;
overflow: hidden;
border-top: 1px solid #dbdbdb;
border-top: 1px solid #dcdcde;
}
.toggle-sidebar-button .collapse-text,
.toggle-sidebar-button .icon-chevron-double-lg-left {
color: #666;
color: #737278;
}
html {
overflow-y: scroll;
......@@ -595,20 +595,20 @@ html {
font-weight: 400;
padding: 6px 10px;
background-color: #fff;
border-color: #dbdbdb;
color: #303030;
color: #303030;
border-color: #dcdcde;
color: #333238;
color: #333238;
white-space: nowrap;
}
.btn:active {
background-color: #f0f0f0;
background-color: #ececef;
box-shadow: none;
}
.btn:active,
.btn.active {
background-color: #eaeaea;
border-color: #e3e3e3;
color: #303030;
color: #333238;
}
.btn svg {
height: 15px;
......@@ -620,7 +620,7 @@ html {
.badge.badge-pill:not(.gl-badge) {
font-weight: 400;
background-color: rgba(0, 0, 0, 0.07);
color: #525252;
color: #535158;
vertical-align: baseline;
}
.gl-font-sm {
......@@ -639,10 +639,10 @@ html {
.dropdown-menu-toggle {
padding: 6px 8px 6px 10px;
background-color: #fff;
color: #303030;
color: #333238;
font-size: 14px;
text-align: left;
border: 1px solid #dbdbdb;
border: 1px solid #dcdcde;
border-radius: 0.25rem;
white-space: nowrap;
}
......@@ -671,7 +671,7 @@ html {
font-weight: 400;
padding: 8px 0;
background-color: #fff;
border: 1px solid #dbdbdb;
border: 1px solid #dcdcde;
border-radius: 0.25rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
......@@ -694,7 +694,7 @@ html {
font-weight: 400;
position: relative;
padding: 8px 12px;
color: #303030;
color: #333238;
line-height: 16px;
white-space: normal;
overflow: hidden;
......@@ -703,8 +703,8 @@ html {
}
.dropdown-menu li > a:active,
.dropdown-menu li button:active {
background-color: #eee;
color: #303030;
background-color: #ececef;
color: #333238;
outline: 0;
text-decoration: none;
}
......@@ -718,7 +718,7 @@ html {
height: 1px;
margin: 0.25rem 0;
padding: 0;
background-color: #dbdbdb;
background-color: #dcdcde;
}
.dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) {
margin-right: 40px;
......@@ -745,7 +745,7 @@ html {
}
input {
border-radius: 0.25rem;
color: #303030;
color: #333238;
background-color: #fff;
}
.form-control {
......@@ -753,23 +753,23 @@ input {
padding: 6px 10px;
}
.form-control::placeholder {
color: #868686;
color: #89888d;
}
kbd {
display: inline-block;
padding: 3px 5px;
font-size: 0.6875rem;
line-height: 10px;
color: var(--gray-700, #525252);
color: var(--gray-700, #535158);
vertical-align: middle;
background-color: var(--gray-10, #f5f5f5);
background-color: var(--gray-10, #fbfafd);
border-width: 1px;
border-style: solid;
border-color: var(--gray-100, #dbdbdb) var(--gray-100, #dbdbdb)
var(--gray-200, #bfbfbf);
border-color: var(--gray-100, #dcdcde) var(--gray-100, #dcdcde)
var(--gray-200, #bfbfc3);
border-image: none;
border-radius: 3px;
box-shadow: 0 -1px 0 var(--gray-200, #bfbfbf) inset;
box-shadow: 0 -1px 0 var(--gray-200, #bfbfc3) inset;
}
.navbar-gitlab {
padding: 0 16px;
......@@ -991,7 +991,7 @@ kbd {
float: left;
margin-right: 5px;
border-radius: 50%;
border: 1px solid #f5f5f5;
border: 1px solid #f2f2f4;
}
.notification-dot {
background-color: #d99530;
......@@ -1023,7 +1023,7 @@ kbd {
width: 100%;
align-items: center;
padding: 10px 16px 10px 10px;
color: #303030;
color: #333238;
background-color: transparent;
border: 0;
text-align: left;
......@@ -1035,7 +1035,7 @@ kbd {
.context-header .sidebar-context-title {
overflow: hidden;
text-overflow: ellipsis;
color: #303030;
color: #333238;
}
@media (min-width: 768px) {
.page-with-contextual-sidebar {
......@@ -1059,7 +1059,7 @@ kbd {
z-index: 600;
width: 256px;
top: var(--header-height, 48px);
background-color: #f5f5f5;
background-color: #fbfafd;
border-right: 1px solid #e9e9e9;
transform: translate3d(0, 0, 0);
}
......@@ -1096,7 +1096,7 @@ kbd {
}
.nav-sidebar a {
text-decoration: none;
color: #303030;
color: #333238;
}
.nav-sidebar li {
white-space: nowrap;
......@@ -1381,7 +1381,7 @@ kbd {
display: block;
}
.sidebar-top-level-items li > a.gl-link {
color: #303030;
color: #333238;
}
.sidebar-top-level-items li > a.gl-link:active {
text-decoration: none;
......@@ -1398,12 +1398,12 @@ kbd {
.close-nav-button {
height: 48px;
padding: 0 16px;
background-color: #fafafa;
background-color: #fbfafd;
border: 0;
color: #666;
color: #737278;
display: flex;
align-items: center;
background-color: #f5f5f5;
background-color: #fbfafd;
position: fixed;
bottom: 0;
width: 255px;
......@@ -1474,14 +1474,14 @@ kbd {
}
}
input::-moz-placeholder {
color: #868686;
color: #89888d;
opacity: 1;
}
input::-ms-input-placeholder {
color: #868686;
color: #89888d;
}
input:-ms-input-placeholder {
color: #868686;
color: #89888d;
}
svg {
fill: currentColor;
......@@ -1608,9 +1608,9 @@ svg.s16 {
width: 40px;
height: 40px;
padding: 0;
background: #fdfdfd;
background: #fefefe;
overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(31, 31, 31, 0.1);
box-shadow: inset 0 0 0 1px rgba(31, 30, 36, 0.1);
}
.avatar.avatar-tile {
border-radius: 0;
......@@ -1619,8 +1619,8 @@ svg.s16 {
.identicon {
text-align: center;
vertical-align: top;
color: #303030;
background-color: #f0f0f0;
color: #333238;
background-color: #ececef;
}
.identicon.s16 {
font-size: 10px;
......@@ -1649,7 +1649,7 @@ svg.s16 {
background-color: #fdf1dd;
}
.identicon.bg7 {
background-color: #f0f0f0;
background-color: #ececef;
}
.avatar-container {
overflow: hidden;
......
app/assets/stylesheets/startup/startup-signin.scss
+ 47
− 47
View file @ 15faa674
......@@ -22,7 +22,7 @@ body {
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #303030;
color: #333238;
text-align: left;
background-color: #fff;
}
......@@ -110,7 +110,7 @@ h3 {
margin-bottom: 0.25rem;
font-weight: 600;
line-height: 1.2;
color: #303030;
color: #333238;
}
h1 {
font-size: 2.1875rem;
......@@ -196,24 +196,24 @@ hr {
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
color: #303030;
color: #333238;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #868686;
border: 1px solid #89888d;
border-radius: 0.25rem;
}
@media (prefers-reduced-motion: reduce) {
}
.form-control:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #303030;
text-shadow: 0 0 0 #333238;
}
.form-control::placeholder {
color: #5e5e5e;
color: #626168;
opacity: 1;
}
.form-control:disabled {
background-color: #fafafa;
background-color: #fbfafd;
opacity: 1;
}
.form-group {
......@@ -222,7 +222,7 @@ hr {
.btn {
display: inline-block;
font-weight: 400;
color: #303030;
color: #333238;
text-align: center;
vertical-align: middle;
user-select: none;
......@@ -282,10 +282,10 @@ input.btn-block[type="button"] {
border-color: #b3d7ff;
}
.custom-control-input:disabled ~ .custom-control-label {
color: #5e5e5e;
color: #626168;
}
.custom-control-input:disabled ~ .custom-control-label::before {
background-color: #fafafa;
background-color: #fbfafd;
}
.custom-control-label {
position: relative;
......@@ -302,7 +302,7 @@ input.btn-block[type="button"] {
pointer-events: none;
content: "";
background-color: #fff;
border: #666 solid 1px;
border: #737278 solid 1px;
}
.custom-control-label::after {
position: absolute;
......@@ -400,8 +400,8 @@ input.btn-block[type="button"] {
padding-left: 0.75rem;
padding-right: 0.75rem;
height: auto;
color: #303030;
box-shadow: inset 0 0 0 1px #868686;
color: #333238;
box-shadow: inset 0 0 0 1px #89888d;
border-style: none;
appearance: none;
-moz-appearance: none;
......@@ -410,27 +410,27 @@ input.btn-block[type="button"] {
.gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only,
.gl-form-input.form-control:disabled,
.gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
background-color: #f5f5f5;
box-shadow: inset 0 0 0 1px #dbdbdb;
background-color: #fbfafd;
box-shadow: inset 0 0 0 1px #dcdcde;
}
.gl-form-input:disabled,
.gl-form-input.form-control:disabled {
cursor: not-allowed;
color: #666;
color: #737278;
}
.gl-form-input::placeholder,
.gl-form-input.form-control::placeholder {
color: #868686;
color: #89888d;
}
.gl-form-checkbox {
font-size: 0.875rem;
line-height: 1rem;
color: #303030;
color: #333238;
}
.gl-form-checkbox .custom-control-input:disabled,
.gl-form-checkbox .custom-control-input:disabled ~ .custom-control-label {
cursor: not-allowed;
color: #868686;
color: #89888d;
}
.gl-form-checkbox.custom-control .custom-control-input ~ .custom-control-label {
cursor: pointer;
......@@ -447,7 +447,7 @@ input.btn-block[type="button"] {
.custom-control-input
~ .custom-control-label::before {
background-color: #fff;
border-color: #868686;
border-color: #89888d;
}
.gl-form-checkbox.custom-control
.custom-control-input:checked
......@@ -490,8 +490,8 @@ input.btn-block[type="button"] {
.gl-form-checkbox.custom-control
.custom-control-input:disabled
~ .custom-control-label::before {
background-color: #f0f0f0;
border-color: #dbdbdb;
background-color: #ececef;
border-color: #dcdcde;
pointer-events: auto;
}
.gl-form-checkbox.custom-control
......@@ -500,8 +500,8 @@ input.btn-block[type="button"] {
.gl-form-checkbox.custom-control
.custom-control-input[type="checkbox"]:indeterminate:disabled
~ .custom-control-label::before {
background-color: #dbdbdb;
border-color: #dbdbdb;
background-color: #dcdcde;
border-color: #dcdcde;
}
.gl-form-checkbox.custom-control
.custom-control-input:checked:disabled
......@@ -509,7 +509,7 @@ input.btn-block[type="button"] {
.gl-form-checkbox.custom-control
.custom-control-input[type="checkbox"]:indeterminate:disabled
~ .custom-control-label::after {
background-color: #5e5e5e;
background-color: #626168;
}
.gl-button {
display: inline-flex;
......@@ -526,9 +526,9 @@ input.btn-block[type="button"] {
padding-right: 0.75rem;
background-color: transparent;
line-height: 1rem;
color: #303030;
color: #333238;
fill: currentColor;
box-shadow: inset 0 0 0 1px #bfbfbf;
box-shadow: inset 0 0 0 1px #bfbfc3;
justify-content: center;
align-items: center;
font-size: 0.875rem;
......@@ -560,9 +560,9 @@ input.btn-block[type="button"] {
.gl-button.gl-button.btn-default.active,
.gl-button.gl-button.btn-block.btn-default:active,
.gl-button.gl-button.btn-block.btn-default.active {
box-shadow: inset 0 0 0 1px #5e5e5e, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
box-shadow: inset 0 0 0 1px #626168, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
outline: none;
background-color: #dbdbdb;
background-color: #dcdcde;
}
.gl-button.gl-button.btn-confirm,
.gl-button.gl-button.btn-block.btn-confirm {
......@@ -636,20 +636,20 @@ body.navless {
font-weight: 400;
padding: 6px 10px;
background-color: #fff;
border-color: #dbdbdb;
color: #303030;
color: #303030;
border-color: #dcdcde;
color: #333238;
color: #333238;
white-space: nowrap;
}
.btn:active {
background-color: #f0f0f0;
background-color: #ececef;
box-shadow: none;
}
.btn:active,
.btn.active {
background-color: #eaeaea;
border-color: #e3e3e3;
color: #303030;
color: #333238;
}
.btn svg {
height: 15px;
......@@ -676,7 +676,7 @@ body.navless {
}
hr {
margin: 1.5rem 0;
border-top: 1px solid #eee;
border-top: 1px solid #ececef;
}
.footer-links {
margin-bottom: 20px;
......@@ -704,7 +704,7 @@ hr {
}
input {
border-radius: 0.25rem;
color: #303030;
color: #333238;
background-color: #fff;
}
label {
......@@ -721,7 +721,7 @@ label.label-bold {
padding: 6px 10px;
}
.form-control::placeholder {
color: #868686;
color: #89888d;
}
.gl-show-field-errors .form-control:not(textarea) {
height: 34px;
......@@ -730,7 +730,7 @@ label.label-bold {
justify-content: center;
height: var(--header-height, 48px);
background: #fff;
border-bottom: 1px solid #dbdbdb;
border-bottom: 1px solid #dcdcde;
}
.navbar-empty .tanuki-logo,
.navbar-empty .brand-header-logo {
......@@ -747,14 +747,14 @@ label.label-bold {
fill: #fca326;
}
input::-moz-placeholder {
color: #868686;
color: #89888d;
opacity: 1;
}
input::-ms-input-placeholder {
color: #868686;
color: #89888d;
}
input:-ms-input-placeholder {
color: #868686;
color: #89888d;
}
svg {
fill: currentColor;
......@@ -805,7 +805,7 @@ svg {
}
.login-page .login-box,
.login-page .omniauth-container {
box-shadow: 0 0 0 1px #dbdbdb;
box-shadow: 0 0 0 1px #dcdcde;
border-radius: 0.25rem;
}
.login-page .login-box .login-heading h3,
......@@ -863,7 +863,7 @@ svg {
}
.login-page .new-session-tabs {
display: flex;
box-shadow: 0 0 0 1px #dbdbdb;
box-shadow: 0 0 0 1px #dcdcde;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
......@@ -874,7 +874,7 @@ svg {
.login-page .new-session-tabs.nav-links-unboxed .nav-item {
border-left: 0;
border-right: 0;
border-bottom: 1px solid #dbdbdb;
border-bottom: 1px solid #dcdcde;
background-color: transparent;
}
.login-page .new-session-tabs.custom-provider-tabs {
......@@ -885,7 +885,7 @@ svg {
flex-basis: auto;
}
.login-page .new-session-tabs.custom-provider-tabs li:nth-child(n + 5) {
border-top: 1px solid #dbdbdb;
border-top: 1px solid #dcdcde;
}
.login-page .new-session-tabs.custom-provider-tabs a {
font-size: 16px;
......@@ -893,7 +893,7 @@ svg {
.login-page .new-session-tabs li {
flex: 1;
text-align: center;
border-left: 1px solid #dbdbdb;
border-left: 1px solid #dcdcde;
}
.login-page .new-session-tabs li:first-of-type {
border-left: 0;
......@@ -903,7 +903,7 @@ svg {
border-top-right-radius: 4px;
}
.login-page .new-session-tabs li:not(.active) {
background-color: #fafafa;
background-color: #fbfafd;
}
.login-page .new-session-tabs li a {
width: 100%;
......
app/assets/stylesheets/themes/_dark.scss
+ 12
− 12
View file @ 15faa674
$gray-10: #1f1f1f;
$gray-50: #303030;
$gray-100: #404040;
$gray-200: #525252;
$gray-300: #5e5e5e;
$gray-400: #868686;
$gray-500: #999;
$gray-600: #bfbfbf;
$gray-700: #dbdbdb;
$gray-800: #f0f0f0;
$gray-900: #fafafa;
$gray-950: #fff;
$gray-10: #1f1e24;
$gray-50: #333238;
$gray-100: #434248;
$gray-200: #535158;
$gray-300: #626168;
$gray-400: #737278;
$gray-500: #89888d;
$gray-600: #a4a3a8;
$gray-700: #bfbfc3;
$gray-800: #dcdcde;
$gray-900: #ececef;
$gray-950: #fbfafd;
$green-50: #0a4020;
$green-100: #0d532a;
......
ee/app/assets/stylesheets/startup/startup-dark.scss
+ 127
− 127
View file @ 15faa674
......@@ -6,15 +6,15 @@
color-scheme: dark;
}
body.gl-dark {
--gray-10: #1f1f1f;
--gray-50: #303030;
--gray-100: #404040;
--gray-200: #525252;
--gray-700: #dbdbdb;
--gray-900: #fafafa;
--gray-10: #1f1e24;
--gray-50: #333238;
--gray-100: #434248;
--gray-200: #535158;
--gray-700: #bfbfc3;
--gray-900: #ececef;
--green-100: #0d532a;
--green-700: #91d4a8;
--gl-text-color: #fafafa;
--gl-text-color: #ececef;
--border-color: #4f4f4f;
--black: #fff;
}
......@@ -42,9 +42,9 @@ body {
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #fafafa;
color: #ececef;
text-align: left;
background-color: #1f1f1f;
background-color: #1f1e24;
}
ul {
margin-top: 0;
......@@ -118,7 +118,7 @@ kbd {
padding: 0.2rem 0.4rem;
font-size: 90%;
color: #333;
background-color: #fafafa;
background-color: #ececef;
border-radius: 0.2rem;
}
kbd kbd {
......@@ -141,24 +141,24 @@ kbd kbd {
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
color: #fafafa;
color: #ececef;
background-color: #333;
background-clip: padding-box;
border: 1px solid #868686;
border: 1px solid #737278;
border-radius: 0.25rem;
}
@media (prefers-reduced-motion: reduce) {
}
.form-control:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #fafafa;
text-shadow: 0 0 0 #ececef;
}
.form-control::placeholder {
color: #bfbfbf;
color: #a4a3a8;
opacity: 1;
}
.form-control:disabled {
background-color: #303030;
background-color: #333238;
opacity: 1;
}
.form-inline {
......@@ -176,7 +176,7 @@ kbd kbd {
.btn {
display: inline-block;
font-weight: 400;
color: #fafafa;
color: #ececef;
text-align: center;
vertical-align: middle;
user-select: none;
......@@ -212,7 +212,7 @@ kbd kbd {
padding: 0.5rem 0;
margin: 0.125rem 0 0;
font-size: 1rem;
color: #fafafa;
color: #ececef;
text-align: left;
list-style: none;
background-color: #333;
......@@ -319,15 +319,15 @@ kbd kbd {
border-radius: 10rem;
}
.badge-success {
color: #fff;
color: #fbfafd;
background-color: #2da160;
}
.badge-info {
color: #fff;
color: #fbfafd;
background-color: #428fdc;
}
.badge-warning {
color: #fff;
color: #fbfafd;
background-color: #c17d10;
}
.rounded-circle {
......@@ -455,8 +455,8 @@ a.gl-badge.badge-warning:active {
padding-left: 0.75rem;
padding-right: 0.75rem;
height: auto;
color: #fafafa;
box-shadow: inset 0 0 0 1px #868686;
color: #ececef;
box-shadow: inset 0 0 0 1px #737278;
border-style: none;
appearance: none;
-moz-appearance: none;
......@@ -465,17 +465,17 @@ a.gl-badge.badge-warning:active {
.gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only,
.gl-form-input.form-control:disabled,
.gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
background-color: #1f1f1f;
box-shadow: inset 0 0 0 1px #404040;
background-color: #1f1e24;
box-shadow: inset 0 0 0 1px #434248;
}
.gl-form-input:disabled,
.gl-form-input.form-control:disabled {
cursor: not-allowed;
color: #999;
color: #89888d;
}
.gl-form-input::placeholder,
.gl-form-input.form-control::placeholder {
color: #868686;
color: #737278;
}
.gl-icon {
fill: currentColor;
......@@ -518,9 +518,9 @@ a.gl-badge.badge-warning:active {
padding-right: 0.75rem;
background-color: transparent;
line-height: 1rem;
color: #fafafa;
color: #ececef;
fill: currentColor;
box-shadow: inset 0 0 0 1px #525252;
box-shadow: inset 0 0 0 1px #535158;
justify-content: center;
align-items: center;
font-size: 0.875rem;
......@@ -531,20 +531,20 @@ a.gl-badge.badge-warning:active {
}
.gl-button.gl-button.btn-default:active,
.gl-button.gl-button.btn-default.active {
box-shadow: inset 0 0 0 1px #bfbfbf, 0 0 0 1px #333, 0 0 0 3px #1f75cb;
box-shadow: inset 0 0 0 1px #a4a3a8, 0 0 0 1px #333, 0 0 0 3px #1f75cb;
outline: none;
background-color: #404040;
background-color: #434248;
}
.gl-button.gl-button.btn-default:active .gl-icon,
.gl-button.gl-button.btn-default.active .gl-icon {
color: #fafafa;
color: #ececef;
}
.gl-button.gl-button.btn-default .gl-icon {
color: #999;
color: #89888d;
}
.gl-search-box-by-type-search-icon {
margin: 0.5rem;
color: #999;
color: #89888d;
width: 1rem;
position: absolute;
}
......@@ -594,11 +594,11 @@ svg {
height: 0;
margin: 4px 0;
overflow: hidden;
border-top: 1px solid #404040;
border-top: 1px solid #434248;
}
.toggle-sidebar-button .collapse-text,
.toggle-sidebar-button .icon-chevron-double-lg-left {
color: #999;
color: #89888d;
}
html {
overflow-y: scroll;
......@@ -614,20 +614,20 @@ html {
font-weight: 400;
padding: 6px 10px;
background-color: #333;
border-color: #404040;
color: #fafafa;
color: #fafafa;
border-color: #434248;
color: #ececef;
color: #ececef;
white-space: nowrap;
}
.btn:active {
background-color: #303030;
background-color: #333238;
box-shadow: none;
}
.btn:active,
.btn.active {
background-color: #444;
border-color: #4f4f4f;
color: #fafafa;
color: #ececef;
}
.btn svg {
height: 15px;
......@@ -639,7 +639,7 @@ html {
.badge.badge-pill:not(.gl-badge) {
font-weight: 400;
background-color: rgba(255, 255, 255, 0.07);
color: #dbdbdb;
color: #bfbfc3;
vertical-align: baseline;
}
.gl-font-sm {
......@@ -658,10 +658,10 @@ html {
.dropdown-menu-toggle {
padding: 6px 8px 6px 10px;
background-color: #333;
color: #fafafa;
color: #ececef;
font-size: 14px;
text-align: left;
border: 1px solid #404040;
border: 1px solid #434248;
border-radius: 0.25rem;
white-space: nowrap;
}
......@@ -690,7 +690,7 @@ html {
font-weight: 400;
padding: 8px 0;
background-color: #333;
border: 1px solid #404040;
border: 1px solid #434248;
border-radius: 0.25rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
......@@ -713,7 +713,7 @@ html {
font-weight: 400;
position: relative;
padding: 8px 12px;
color: #fafafa;
color: #ececef;
line-height: 16px;
white-space: normal;
overflow: hidden;
......@@ -723,7 +723,7 @@ html {
.dropdown-menu li > a:active,
.dropdown-menu li button:active {
background-color: #4f4f4f;
color: #fafafa;
color: #ececef;
outline: 0;
text-decoration: none;
}
......@@ -737,7 +737,7 @@ html {
height: 1px;
margin: 0.25rem 0;
padding: 0;
background-color: #404040;
background-color: #434248;
}
.dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) {
margin-right: 40px;
......@@ -764,7 +764,7 @@ html {
}
input {
border-radius: 0.25rem;
color: #fafafa;
color: #ececef;
background-color: #333;
}
.form-control {
......@@ -772,23 +772,23 @@ input {
padding: 6px 10px;
}
.form-control::placeholder {
color: #868686;
color: #737278;
}
kbd {
display: inline-block;
padding: 3px 5px;
font-size: 0.6875rem;
line-height: 10px;
color: var(--gray-700, #dbdbdb);
color: var(--gray-700, #bfbfc3);
vertical-align: middle;
background-color: var(--gray-10, #1f1f1f);
background-color: var(--gray-10, #1f1e24);
border-width: 1px;
border-style: solid;
border-color: var(--gray-100, #404040) var(--gray-100, #404040)
var(--gray-200, #525252);
border-color: var(--gray-100, #434248) var(--gray-100, #434248)
var(--gray-200, #535158);
border-image: none;
border-radius: 3px;
box-shadow: 0 -1px 0 var(--gray-200, #525252) inset;
box-shadow: 0 -1px 0 var(--gray-200, #535158) inset;
}
.navbar-gitlab {
padding: 0 16px;
......@@ -1042,7 +1042,7 @@ kbd {
width: 100%;
align-items: center;
padding: 10px 16px 10px 10px;
color: #fafafa;
color: #ececef;
background-color: transparent;
border: 0;
text-align: left;
......@@ -1054,7 +1054,7 @@ kbd {
.context-header .sidebar-context-title {
overflow: hidden;
text-overflow: ellipsis;
color: #fafafa;
color: #ececef;
}
@media (min-width: 768px) {
.page-with-contextual-sidebar {
......@@ -1078,7 +1078,7 @@ kbd {
z-index: 600;
width: 256px;
top: var(--header-height, 48px);
background-color: #f5f5f5;
background-color: #1f1e24;
border-right: 1px solid #e9e9e9;
transform: translate3d(0, 0, 0);
}
......@@ -1115,7 +1115,7 @@ kbd {
}
.nav-sidebar a {
text-decoration: none;
color: #fafafa;
color: #ececef;
}
.nav-sidebar li {
white-space: nowrap;
......@@ -1400,7 +1400,7 @@ kbd {
display: block;
}
.sidebar-top-level-items li > a.gl-link {
color: #fafafa;
color: #ececef;
}
.sidebar-top-level-items li > a.gl-link:active {
text-decoration: none;
......@@ -1417,12 +1417,12 @@ kbd {
.close-nav-button {
height: 48px;
padding: 0 16px;
background-color: #303030;
background-color: #333238;
border: 0;
color: #999;
color: #89888d;
display: flex;
align-items: center;
background-color: #f5f5f5;
background-color: #1f1e24;
position: fixed;
bottom: 0;
width: 255px;
......@@ -1493,14 +1493,14 @@ kbd {
}
}
input::-moz-placeholder {
color: #868686;
color: #737278;
opacity: 1;
}
input::-ms-input-placeholder {
color: #868686;
color: #737278;
}
input:-ms-input-placeholder {
color: #868686;
color: #737278;
}
svg {
fill: currentColor;
......@@ -1629,7 +1629,7 @@ svg.s16 {
padding: 0;
background: #222;
overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 0 0 1px rgba(251, 250, 253, 0.1);
}
.avatar.avatar-tile {
border-radius: 0;
......@@ -1638,8 +1638,8 @@ svg.s16 {
.identicon {
text-align: center;
vertical-align: top;
color: #fafafa;
background-color: #303030;
color: #ececef;
background-color: #333238;
}
.identicon.s16 {
font-size: 10px;
......@@ -1668,7 +1668,7 @@ svg.s16 {
background-color: #5c2900;
}
.identicon.bg7 {
background-color: #303030;
background-color: #333238;
}
.avatar-container {
overflow: hidden;
......@@ -1707,18 +1707,18 @@ svg.s16 {
color-scheme: dark;
}
body.gl-dark {
--gray-10: #1f1f1f;
--gray-50: #303030;
--gray-100: #404040;
--gray-200: #525252;
--gray-300: #5e5e5e;
--gray-400: #868686;
--gray-500: #999;
--gray-600: #bfbfbf;
--gray-700: #dbdbdb;
--gray-800: #f0f0f0;
--gray-900: #fafafa;
--gray-950: #fff;
--gray-10: #1f1e24;
--gray-50: #333238;
--gray-100: #434248;
--gray-200: #535158;
--gray-300: #626168;
--gray-400: #737278;
--gray-500: #89888d;
--gray-600: #a4a3a8;
--gray-700: #bfbfc3;
--gray-800: #dcdcde;
--gray-900: #ececef;
--gray-950: #fbfafd;
--green-50: #0a4020;
--green-100: #0d532a;
--green-200: #24663b;
......@@ -1790,7 +1790,7 @@ body.gl-dark {
--dark-icon-color-purple-3: #9a79f7;
--dark-icon-color-orange-1: #665349;
--dark-icon-color-orange-2: #b37a5d;
--gl-text-color: #fafafa;
--gl-text-color: #ececef;
--border-color: #4f4f4f;
--white: #333;
--black: #fff;
......@@ -1800,49 +1800,49 @@ body.gl-dark {
.nav-sidebar,
.toggle-sidebar-button,
.close-nav-button {
background-color: #262626;
border-right: 1px solid #303030;
background-color: #29282d;
border-right: 1px solid #333238;
}
.gl-avatar:not(.gl-avatar-identicon),
.avatar-container,
.avatar {
background: rgba(255, 255, 255, 0.04);
background: rgba(251, 250, 253, 0.04);
}
.gl-avatar {
border-style: none;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 0 0 1px rgba(251, 250, 253, 0.1);
}
body.gl-dark {
--gl-theme-accent: #868686;
--gl-theme-accent: #737278;
}
body.gl-dark .navbar-gitlab {
background-color: #fafafa;
background-color: #ececef;
}
body.gl-dark .navbar-gitlab .navbar-collapse {
color: #fafafa;
color: #ececef;
}
body.gl-dark .navbar-gitlab .container-fluid .navbar-toggler {
border-left: 1px solid #b3b3b3;
color: #fafafa;
border-left: 1px solid #a3a2a6;
color: #ececef;
}
body.gl-dark .navbar-gitlab .navbar-sub-nav > li.active > a,
body.gl-dark .navbar-gitlab .navbar-sub-nav > li.active > button,
body.gl-dark .navbar-gitlab .navbar-nav > li.active > a,
body.gl-dark .navbar-gitlab .navbar-nav > li.active > button {
color: #fafafa;
color: #ececef;
background-color: #333;
}
body.gl-dark .navbar-gitlab .navbar-sub-nav {
color: #fafafa;
color: #ececef;
}
body.gl-dark .navbar-gitlab .nav > li {
color: #fafafa;
color: #ececef;
}
body.gl-dark .navbar-gitlab .nav > li.header-search-new {
color: #fafafa;
color: #ececef;
}
body.gl-dark .navbar-gitlab .nav > li > a .notification-dot {
border: 2px solid #fafafa;
border: 2px solid #ececef;
}
body.gl-dark
.navbar-gitlab
......@@ -1850,7 +1850,7 @@ body.gl-dark
> li
> a.header-help-dropdown-toggle
.notification-dot {
background-color: #fafafa;
background-color: #ececef;
}
body.gl-dark
.navbar-gitlab
......@@ -1858,10 +1858,10 @@ body.gl-dark
> li
> a.header-user-dropdown-toggle
.header-user-avatar {
border-color: #fafafa;
border-color: #ececef;
}
body.gl-dark .navbar-gitlab .nav > li.active > a {
color: #fafafa;
color: #ececef;
background-color: #333;
}
body.gl-dark .navbar-gitlab .nav > li.active > a .notification-dot {
......@@ -1873,48 +1873,48 @@ body.gl-dark
> li.active
> a.header-help-dropdown-toggle
.notification-dot {
background-color: #fafafa;
background-color: #ececef;
}
body.gl-dark .header-search {
background-color: rgba(250, 250, 250, 0.2) !important;
background-color: rgba(236, 236, 239, 0.2) !important;
border-radius: 4px;
}
body.gl-dark .header-search svg.gl-search-box-by-type-search-icon {
color: rgba(250, 250, 250, 0.8);
color: rgba(236, 236, 239, 0.8);
}
body.gl-dark .header-search input {
background-color: transparent;
color: rgba(250, 250, 250, 0.8);
box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.4);
color: rgba(236, 236, 239, 0.8);
box-shadow: inset 0 0 0 1px rgba(236, 236, 239, 0.4);
}
body.gl-dark .header-search input::placeholder {
color: rgba(250, 250, 250, 0.8);
color: rgba(236, 236, 239, 0.8);
}
body.gl-dark .header-search input:active::placeholder {
color: #868686;
color: #737278;
}
body.gl-dark .header-search .keyboard-shortcut-helper {
color: #fafafa;
background-color: rgba(250, 250, 250, 0.2);
color: #ececef;
background-color: rgba(236, 236, 239, 0.2);
}
body.gl-dark .search form {
background-color: rgba(250, 250, 250, 0.2);
background-color: rgba(236, 236, 239, 0.2);
}
body.gl-dark .search .search-input::placeholder {
color: rgba(250, 250, 250, 0.8);
color: rgba(236, 236, 239, 0.8);
}
body.gl-dark .search .search-input-wrap .search-icon,
body.gl-dark .search .search-input-wrap .clear-icon {
fill: rgba(250, 250, 250, 0.8);
fill: rgba(236, 236, 239, 0.8);
}
body.gl-dark .nav-sidebar li.active > a {
color: #fafafa;
color: #ececef;
}
body.gl-dark .nav-sidebar .fly-out-top-item a,
body.gl-dark .nav-sidebar .fly-out-top-item.active a,
body.gl-dark .nav-sidebar .fly-out-top-item .fly-out-top-item-container {
background-color: var(--gray-100, #303030);
color: var(--gray-900, #fafafa);
background-color: var(--gray-100, #333238);
color: var(--gray-900, #ececef);
}
body.gl-dark .navbar-gitlab {
background-color: var(--gray-50);
......@@ -1951,18 +1951,18 @@ body.gl-dark .navbar-gitlab .search form .search-input {
color-scheme: dark;
}
body.gl-dark {
--gray-10: #1f1f1f;
--gray-50: #303030;
--gray-100: #404040;
--gray-200: #525252;
--gray-300: #5e5e5e;
--gray-400: #868686;
--gray-500: #999;
--gray-600: #bfbfbf;
--gray-700: #dbdbdb;
--gray-800: #f0f0f0;
--gray-900: #fafafa;
--gray-950: #fff;
--gray-10: #1f1e24;
--gray-50: #333238;
--gray-100: #434248;
--gray-200: #535158;
--gray-300: #626168;
--gray-400: #737278;
--gray-500: #89888d;
--gray-600: #a4a3a8;
--gray-700: #bfbfc3;
--gray-800: #dcdcde;
--gray-900: #ececef;
--gray-950: #fbfafd;
--green-50: #0a4020;
--green-100: #0d532a;
--green-200: #24663b;
......@@ -2034,7 +2034,7 @@ body.gl-dark {
--dark-icon-color-purple-3: #9a79f7;
--dark-icon-color-orange-1: #665349;
--dark-icon-color-orange-2: #b37a5d;
--gl-text-color: #fafafa;
--gl-text-color: #ececef;
--border-color: #4f4f4f;
--white: #333;
--black: #fff;
......
ee/app/assets/stylesheets/startup/startup-general.scss
+ 61
− 61
View file @ 15faa674
......@@ -23,7 +23,7 @@ body {
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #303030;
color: #333238;
text-align: left;
background-color: #fff;
}
......@@ -99,7 +99,7 @@ kbd {
padding: 0.2rem 0.4rem;
font-size: 90%;
color: #fff;
background-color: #303030;
background-color: #333238;
border-radius: 0.2rem;
}
kbd kbd {
......@@ -122,24 +122,24 @@ kbd kbd {
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
color: #303030;
color: #333238;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #868686;
border: 1px solid #89888d;
border-radius: 0.25rem;
}
@media (prefers-reduced-motion: reduce) {
}
.form-control:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #303030;
text-shadow: 0 0 0 #333238;
}
.form-control::placeholder {
color: #5e5e5e;
color: #626168;
opacity: 1;
}
.form-control:disabled {
background-color: #fafafa;
background-color: #fbfafd;
opacity: 1;
}
.form-inline {
......@@ -157,7 +157,7 @@ kbd kbd {
.btn {
display: inline-block;
font-weight: 400;
color: #303030;
color: #333238;
text-align: center;
vertical-align: middle;
user-select: none;
......@@ -193,7 +193,7 @@ kbd kbd {
padding: 0.5rem 0;
margin: 0.125rem 0 0;
font-size: 1rem;
color: #303030;
color: #333238;
text-align: left;
list-style: none;
background-color: #fff;
......@@ -436,8 +436,8 @@ a.gl-badge.badge-warning:active {
padding-left: 0.75rem;
padding-right: 0.75rem;
height: auto;
color: #303030;
box-shadow: inset 0 0 0 1px #868686;
color: #333238;
box-shadow: inset 0 0 0 1px #89888d;
border-style: none;
appearance: none;
-moz-appearance: none;
......@@ -446,17 +446,17 @@ a.gl-badge.badge-warning:active {
.gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only,
.gl-form-input.form-control:disabled,
.gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
background-color: #f5f5f5;
box-shadow: inset 0 0 0 1px #dbdbdb;
background-color: #fbfafd;
box-shadow: inset 0 0 0 1px #dcdcde;
}
.gl-form-input:disabled,
.gl-form-input.form-control:disabled {
cursor: not-allowed;
color: #666;
color: #737278;
}
.gl-form-input::placeholder,
.gl-form-input.form-control::placeholder {
color: #868686;
color: #89888d;
}
.gl-icon {
fill: currentColor;
......@@ -499,9 +499,9 @@ a.gl-badge.badge-warning:active {
padding-right: 0.75rem;
background-color: transparent;
line-height: 1rem;
color: #303030;
color: #333238;
fill: currentColor;
box-shadow: inset 0 0 0 1px #bfbfbf;
box-shadow: inset 0 0 0 1px #bfbfc3;
justify-content: center;
align-items: center;
font-size: 0.875rem;
......@@ -512,20 +512,20 @@ a.gl-badge.badge-warning:active {
}
.gl-button.gl-button.btn-default:active,
.gl-button.gl-button.btn-default.active {
box-shadow: inset 0 0 0 1px #5e5e5e, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
box-shadow: inset 0 0 0 1px #626168, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
outline: none;
background-color: #dbdbdb;
background-color: #dcdcde;
}
.gl-button.gl-button.btn-default:active .gl-icon,
.gl-button.gl-button.btn-default.active .gl-icon {
color: #303030;
color: #333238;
}
.gl-button.gl-button.btn-default .gl-icon {
color: #666;
color: #737278;
}
.gl-search-box-by-type-search-icon {
margin: 0.5rem;
color: #666;
color: #737278;
width: 1rem;
position: absolute;
}
......@@ -575,11 +575,11 @@ svg {
height: 0;
margin: 4px 0;
overflow: hidden;
border-top: 1px solid #dbdbdb;
border-top: 1px solid #dcdcde;
}
.toggle-sidebar-button .collapse-text,
.toggle-sidebar-button .icon-chevron-double-lg-left {
color: #666;
color: #737278;
}
html {
overflow-y: scroll;
......@@ -595,20 +595,20 @@ html {
font-weight: 400;
padding: 6px 10px;
background-color: #fff;
border-color: #dbdbdb;
color: #303030;
color: #303030;
border-color: #dcdcde;
color: #333238;
color: #333238;
white-space: nowrap;
}
.btn:active {
background-color: #f0f0f0;
background-color: #ececef;
box-shadow: none;
}
.btn:active,
.btn.active {
background-color: #eaeaea;
border-color: #e3e3e3;
color: #303030;
color: #333238;
}
.btn svg {
height: 15px;
......@@ -620,7 +620,7 @@ html {
.badge.badge-pill:not(.gl-badge) {
font-weight: 400;
background-color: rgba(0, 0, 0, 0.07);
color: #525252;
color: #535158;
vertical-align: baseline;
}
.gl-font-sm {
......@@ -639,10 +639,10 @@ html {
.dropdown-menu-toggle {
padding: 6px 8px 6px 10px;
background-color: #fff;
color: #303030;
color: #333238;
font-size: 14px;
text-align: left;
border: 1px solid #dbdbdb;
border: 1px solid #dcdcde;
border-radius: 0.25rem;
white-space: nowrap;
}
......@@ -671,7 +671,7 @@ html {
font-weight: 400;
padding: 8px 0;
background-color: #fff;
border: 1px solid #dbdbdb;
border: 1px solid #dcdcde;
border-radius: 0.25rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
......@@ -694,7 +694,7 @@ html {
font-weight: 400;
position: relative;
padding: 8px 12px;
color: #303030;
color: #333238;
line-height: 16px;
white-space: normal;
overflow: hidden;
......@@ -703,8 +703,8 @@ html {
}
.dropdown-menu li > a:active,
.dropdown-menu li button:active {
background-color: #eee;
color: #303030;
background-color: #ececef;
color: #333238;
outline: 0;
text-decoration: none;
}
......@@ -718,7 +718,7 @@ html {
height: 1px;
margin: 0.25rem 0;
padding: 0;
background-color: #dbdbdb;
background-color: #dcdcde;
}
.dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) {
margin-right: 40px;
......@@ -745,7 +745,7 @@ html {
}
input {
border-radius: 0.25rem;
color: #303030;
color: #333238;
background-color: #fff;
}
.form-control {
......@@ -753,23 +753,23 @@ input {
padding: 6px 10px;
}
.form-control::placeholder {
color: #868686;
color: #89888d;
}
kbd {
display: inline-block;
padding: 3px 5px;
font-size: 0.6875rem;
line-height: 10px;
color: var(--gray-700, #525252);
color: var(--gray-700, #535158);
vertical-align: middle;
background-color: var(--gray-10, #f5f5f5);
background-color: var(--gray-10, #fbfafd);
border-width: 1px;
border-style: solid;
border-color: var(--gray-100, #dbdbdb) var(--gray-100, #dbdbdb)
var(--gray-200, #bfbfbf);
border-color: var(--gray-100, #dcdcde) var(--gray-100, #dcdcde)
var(--gray-200, #bfbfc3);
border-image: none;
border-radius: 3px;
box-shadow: 0 -1px 0 var(--gray-200, #bfbfbf) inset;
box-shadow: 0 -1px 0 var(--gray-200, #bfbfc3) inset;
}
.navbar-gitlab {
padding: 0 16px;
......@@ -991,7 +991,7 @@ kbd {
float: left;
margin-right: 5px;
border-radius: 50%;
border: 1px solid #f5f5f5;
border: 1px solid #f2f2f4;
}
.notification-dot {
background-color: #d99530;
......@@ -1023,7 +1023,7 @@ kbd {
width: 100%;
align-items: center;
padding: 10px 16px 10px 10px;
color: #303030;
color: #333238;
background-color: transparent;
border: 0;
text-align: left;
......@@ -1035,7 +1035,7 @@ kbd {
.context-header .sidebar-context-title {
overflow: hidden;
text-overflow: ellipsis;
color: #303030;
color: #333238;
}
@media (min-width: 768px) {
.page-with-contextual-sidebar {
......@@ -1059,7 +1059,7 @@ kbd {
z-index: 600;
width: 256px;
top: var(--header-height, 48px);
background-color: #f5f5f5;
background-color: #fbfafd;
border-right: 1px solid #e9e9e9;
transform: translate3d(0, 0, 0);
}
......@@ -1096,7 +1096,7 @@ kbd {
}
.nav-sidebar a {
text-decoration: none;
color: #303030;
color: #333238;
}
.nav-sidebar li {
white-space: nowrap;
......@@ -1381,7 +1381,7 @@ kbd {
display: block;
}
.sidebar-top-level-items li > a.gl-link {
color: #303030;
color: #333238;
}
.sidebar-top-level-items li > a.gl-link:active {
text-decoration: none;
......@@ -1398,12 +1398,12 @@ kbd {
.close-nav-button {
height: 48px;
padding: 0 16px;
background-color: #fafafa;
background-color: #fbfafd;
border: 0;
color: #666;
color: #737278;
display: flex;
align-items: center;
background-color: #f5f5f5;
background-color: #fbfafd;
position: fixed;
bottom: 0;
width: 255px;
......@@ -1474,14 +1474,14 @@ kbd {
}
}
input::-moz-placeholder {
color: #868686;
color: #89888d;
opacity: 1;
}
input::-ms-input-placeholder {
color: #868686;
color: #89888d;
}
input:-ms-input-placeholder {
color: #868686;
color: #89888d;
}
svg {
fill: currentColor;
......@@ -1608,9 +1608,9 @@ svg.s16 {
width: 40px;
height: 40px;
padding: 0;
background: #fdfdfd;
background: #fefefe;
overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(31, 31, 31, 0.1);
box-shadow: inset 0 0 0 1px rgba(31, 30, 36, 0.1);
}
.avatar.avatar-tile {
border-radius: 0;
......@@ -1619,8 +1619,8 @@ svg.s16 {
.identicon {
text-align: center;
vertical-align: top;
color: #303030;
background-color: #f0f0f0;
color: #333238;
background-color: #ececef;
}
.identicon.s16 {
font-size: 10px;
......@@ -1649,7 +1649,7 @@ svg.s16 {
background-color: #fdf1dd;
}
.identicon.bg7 {
background-color: #f0f0f0;
background-color: #ececef;
}
.avatar-container {
overflow: hidden;
......
ee/app/assets/stylesheets/startup/startup-signin.scss
+ 47
− 47
View file @ 15faa674
......@@ -22,7 +22,7 @@ body {
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #303030;
color: #333238;
text-align: left;
background-color: #fff;
}
......@@ -110,7 +110,7 @@ h3 {
margin-bottom: 0.25rem;
font-weight: 600;
line-height: 1.2;
color: #303030;
color: #333238;
}
h1 {
font-size: 2.1875rem;
......@@ -196,24 +196,24 @@ hr {
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
color: #303030;
color: #333238;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #868686;
border: 1px solid #89888d;
border-radius: 0.25rem;
}
@media (prefers-reduced-motion: reduce) {
}
.form-control:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #303030;
text-shadow: 0 0 0 #333238;
}
.form-control::placeholder {
color: #5e5e5e;
color: #626168;
opacity: 1;
}
.form-control:disabled {
background-color: #fafafa;
background-color: #fbfafd;
opacity: 1;
}
.form-group {
......@@ -222,7 +222,7 @@ hr {
.btn {
display: inline-block;
font-weight: 400;
color: #303030;
color: #333238;
text-align: center;
vertical-align: middle;
user-select: none;
......@@ -282,10 +282,10 @@ input.btn-block[type="button"] {
border-color: #b3d7ff;
}
.custom-control-input:disabled ~ .custom-control-label {
color: #5e5e5e;
color: #626168;
}
.custom-control-input:disabled ~ .custom-control-label::before {
background-color: #fafafa;
background-color: #fbfafd;
}
.custom-control-label {
position: relative;
......@@ -302,7 +302,7 @@ input.btn-block[type="button"] {
pointer-events: none;
content: "";
background-color: #fff;
border: #666 solid 1px;
border: #737278 solid 1px;
}
.custom-control-label::after {
position: absolute;
......@@ -400,8 +400,8 @@ input.btn-block[type="button"] {
padding-left: 0.75rem;
padding-right: 0.75rem;
height: auto;
color: #303030;
box-shadow: inset 0 0 0 1px #868686;
color: #333238;
box-shadow: inset 0 0 0 1px #89888d;
border-style: none;
appearance: none;
-moz-appearance: none;
......@@ -410,27 +410,27 @@ input.btn-block[type="button"] {
.gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only,
.gl-form-input.form-control:disabled,
.gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
background-color: #f5f5f5;
box-shadow: inset 0 0 0 1px #dbdbdb;
background-color: #fbfafd;
box-shadow: inset 0 0 0 1px #dcdcde;
}
.gl-form-input:disabled,
.gl-form-input.form-control:disabled {
cursor: not-allowed;
color: #666;
color: #737278;
}
.gl-form-input::placeholder,
.gl-form-input.form-control::placeholder {
color: #868686;
color: #89888d;
}
.gl-form-checkbox {
font-size: 0.875rem;
line-height: 1rem;
color: #303030;
color: #333238;
}
.gl-form-checkbox .custom-control-input:disabled,
.gl-form-checkbox .custom-control-input:disabled ~ .custom-control-label {
cursor: not-allowed;
color: #868686;
color: #89888d;
}
.gl-form-checkbox.custom-control .custom-control-input ~ .custom-control-label {
cursor: pointer;
......@@ -447,7 +447,7 @@ input.btn-block[type="button"] {
.custom-control-input
~ .custom-control-label::before {
background-color: #fff;
border-color: #868686;
border-color: #89888d;
}
.gl-form-checkbox.custom-control
.custom-control-input:checked
......@@ -490,8 +490,8 @@ input.btn-block[type="button"] {
.gl-form-checkbox.custom-control
.custom-control-input:disabled
~ .custom-control-label::before {
background-color: #f0f0f0;
border-color: #dbdbdb;
background-color: #ececef;
border-color: #dcdcde;
pointer-events: auto;
}
.gl-form-checkbox.custom-control
......@@ -500,8 +500,8 @@ input.btn-block[type="button"] {
.gl-form-checkbox.custom-control
.custom-control-input[type="checkbox"]:indeterminate:disabled
~ .custom-control-label::before {
background-color: #dbdbdb;
border-color: #dbdbdb;
background-color: #dcdcde;
border-color: #dcdcde;
}
.gl-form-checkbox.custom-control
.custom-control-input:checked:disabled
......@@ -509,7 +509,7 @@ input.btn-block[type="button"] {
.gl-form-checkbox.custom-control
.custom-control-input[type="checkbox"]:indeterminate:disabled
~ .custom-control-label::after {
background-color: #5e5e5e;
background-color: #626168;
}
.gl-button {
display: inline-flex;
......@@ -526,9 +526,9 @@ input.btn-block[type="button"] {
padding-right: 0.75rem;
background-color: transparent;
line-height: 1rem;
color: #303030;
color: #333238;
fill: currentColor;
box-shadow: inset 0 0 0 1px #bfbfbf;
box-shadow: inset 0 0 0 1px #bfbfc3;
justify-content: center;
align-items: center;
font-size: 0.875rem;
......@@ -560,9 +560,9 @@ input.btn-block[type="button"] {
.gl-button.gl-button.btn-default.active,
.gl-button.gl-button.btn-block.btn-default:active,
.gl-button.gl-button.btn-block.btn-default.active {
box-shadow: inset 0 0 0 1px #5e5e5e, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
box-shadow: inset 0 0 0 1px #626168, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
outline: none;
background-color: #dbdbdb;
background-color: #dcdcde;
}
.gl-button.gl-button.btn-confirm,
.gl-button.gl-button.btn-block.btn-confirm {
......@@ -636,20 +636,20 @@ body.navless {
font-weight: 400;
padding: 6px 10px;
background-color: #fff;
border-color: #dbdbdb;
color: #303030;
color: #303030;
border-color: #dcdcde;
color: #333238;
color: #333238;
white-space: nowrap;
}
.btn:active {
background-color: #f0f0f0;
background-color: #ececef;
box-shadow: none;
}
.btn:active,
.btn.active {
background-color: #eaeaea;
border-color: #e3e3e3;
color: #303030;
color: #333238;
}
.btn svg {
height: 15px;
......@@ -676,7 +676,7 @@ body.navless {
}
hr {
margin: 1.5rem 0;
border-top: 1px solid #eee;
border-top: 1px solid #ececef;
}
.footer-links {
margin-bottom: 20px;
......@@ -704,7 +704,7 @@ hr {
}
input {
border-radius: 0.25rem;
color: #303030;
color: #333238;
background-color: #fff;
}
label {
......@@ -721,7 +721,7 @@ label.label-bold {
padding: 6px 10px;
}
.form-control::placeholder {
color: #868686;
color: #89888d;
}
.gl-show-field-errors .form-control:not(textarea) {
height: 34px;
......@@ -730,7 +730,7 @@ label.label-bold {
justify-content: center;
height: var(--header-height, 48px);
background: #fff;
border-bottom: 1px solid #dbdbdb;
border-bottom: 1px solid #dcdcde;
}
.navbar-empty .tanuki-logo,
.navbar-empty .brand-header-logo {
......@@ -747,14 +747,14 @@ label.label-bold {
fill: #fca326;
}
input::-moz-placeholder {
color: #868686;
color: #89888d;
opacity: 1;
}
input::-ms-input-placeholder {
color: #868686;
color: #89888d;
}
input:-ms-input-placeholder {
color: #868686;
color: #89888d;
}
svg {
fill: currentColor;
......@@ -805,7 +805,7 @@ svg {
}
.login-page .login-box,
.login-page .omniauth-container {
box-shadow: 0 0 0 1px #dbdbdb;
box-shadow: 0 0 0 1px #dcdcde;
border-radius: 0.25rem;
}
.login-page .login-box .login-heading h3,
......@@ -863,7 +863,7 @@ svg {
}
.login-page .new-session-tabs {
display: flex;
box-shadow: 0 0 0 1px #dbdbdb;
box-shadow: 0 0 0 1px #dcdcde;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
......@@ -874,7 +874,7 @@ svg {
.login-page .new-session-tabs.nav-links-unboxed .nav-item {
border-left: 0;
border-right: 0;
border-bottom: 1px solid #dbdbdb;
border-bottom: 1px solid #dcdcde;
background-color: transparent;
}
.login-page .new-session-tabs.custom-provider-tabs {
......@@ -885,7 +885,7 @@ svg {
flex-basis: auto;
}
.login-page .new-session-tabs.custom-provider-tabs li:nth-child(n + 5) {
border-top: 1px solid #dbdbdb;
border-top: 1px solid #dcdcde;
}
.login-page .new-session-tabs.custom-provider-tabs a {
font-size: 16px;
......@@ -893,7 +893,7 @@ svg {
.login-page .new-session-tabs li {
flex: 1;
text-align: center;
border-left: 1px solid #dbdbdb;
border-left: 1px solid #dcdcde;
}
.login-page .new-session-tabs li:first-of-type {
border-left: 0;
......@@ -903,7 +903,7 @@ svg {
border-top-right-radius: 4px;
}
.login-page .new-session-tabs li:not(.active) {
background-color: #fafafa;
background-color: #fbfafd;
}
.login-page .new-session-tabs li a {
width: 100%;
......
ee/spec/frontend/analytics/code_review_analytics/components/__snapshots__/merge_request_table_spec.js.snap
+ 1
− 2
View file @ 15faa674
......@@ -2,9 +2,8 @@
exports[`MergeRequestTable component template matches the snapshot 1`] = `
<table
aria-busy="false"
aria-busy=""
aria-colcount="7"
aria-describedby="__BVID__36__caption_"
class="table b-table gl-table my-3 b-table-stacked-sm"
id="__BVID__36"
role="table"
......
ee/spec/frontend/analytics/cycle_analytics/mock_data.js
+ 2
− 2
View file @ 15faa674
......@@ -346,10 +346,10 @@ export const durationDataNullSeries = {
['2019-01-02', null],
],
itemStyle: {
color: '#999',
color: '#a4a3a8',
},
lineStyle: {
color: '#999',
color: '#a4a3a8',
type: 'dashed',
},
name: `${DURATION_CHART_Y_AXIS_TITLE} no data series`,
......
ee/spec/frontend/boards/components/__snapshots__/board_content_sidebar_spec.js.snap
+ 1
− 1
View file @ 15faa674
......@@ -143,7 +143,7 @@ exports[`ee/BoardContentSidebar incident sidebar matches the snapshot 1`] = `
<!---->
<button
aria-expanded="false"
aria-haspopup="true"
aria-haspopup="menu"
class="btn dropdown-toggle btn-default btn-md btn-block dropdown-menu-toggle gl-mb-2 gl-button gl-dropdown-toggle"
id="__BVID__40__BV_toggle_"
type="button"
......
ee/spec/frontend/dora/components/__snapshots__/util_spec.js.snap
+ 2
− 2
View file @ 15faa674
......@@ -37,10 +37,10 @@ Array [
],
],
"itemStyle": Object {
"color": "#999",
"color": "#a4a3a8",
},
"lineStyle": Object {
"color": "#999",
"color": "#a4a3a8",
"type": "dashed",
},
"name": "No data available",
......
ee/spec/frontend/insights/mock_data.js
+ 2
− 2
View file @ 15faa674
......@@ -88,10 +88,10 @@ export const doraSeries = [
['February', null],
],
itemStyle: {
color: '#999',
color: '#a4a3a8',
},
lineStyle: {
color: '#999',
color: '#a4a3a8',
type: 'dashed',
},
name: 'No data available',
......
ee/spec/frontend/security_orchestration/components/policies/filters/policy_source_filter_spec.js
+ 1
− 1
View file @ 15faa674
......@@ -14,7 +14,7 @@ describe('PolicySourceFilter component', () => {
});
};
const findToggle = () => wrapper.find('button[aria-haspopup="true"]');
const findToggle = () => wrapper.find('button[aria-haspopup="menu"]');
afterEach(() => {
wrapper.destroy();
......
ee/spec/frontend/security_orchestration/components/policies/filters/policy_type_filter_spec.js
+ 1
− 1
View file @ 15faa674
......@@ -14,7 +14,7 @@ describe('PolicyTypeFilter component', () => {
});
};
const findToggle = () => wrapper.find('button[aria-haspopup="true"]');
const findToggle = () => wrapper.find('button[aria-haspopup="menu"]');
afterEach(() => {
wrapper.destroy();
......
ee/spec/frontend/sidebar/components/__snapshots__/iteration_dropdown_spec.js.snap
+ 1
− 0
View file @ 15faa674
......@@ -11,6 +11,7 @@ exports[`IterationDropdown default shows gl-dropdown 1`] = `
size="md"
splitbuttontype="button"
splitclass=",[object Object]"
toggleattrs="[object Object]"
toggleclass=",[object Object]"
toggletag="button"
toggletext="Toggle dropdown"
......
ee/spec/frontend/subscriptions/new/components/__snapshots__/modal_spec.js.snap
+ 2
− 2
View file @ 15faa674
......@@ -4,16 +4,16 @@ exports[`Modal component matches the snapshot 1`] = `
<b-modal-stub
canceltitle="Cancel"
cancelvariant="secondary"
footertag="footer"
headerclosecontent="&times;"
headercloselabel="Close"
headertag="header"
id="subscription-modal"
ignoreenforcefocusselector=""
lazy="true"
modalclass="gl-modal,"
oktitle="OK"
okvariant="primary"
size="sm"
title=""
titletag="h4"
>
......
ee/spec/frontend/vue_merge_request_widget/extensions/license_compliance/__snapshots__/index_spec.js.snap
+ 2
− 2
View file @ 15faa674
......@@ -159,7 +159,7 @@ exports[`License Compliance extension expanded data with new licenses displays a
<!---->
<button
aria-expanded="false"
aria-haspopup="true"
aria-haspopup="menu"
class="btn dropdown-toggle btn-default btn-sm gl-p-2! gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only dropdown-toggle-no-caret"
id="__BVID__619__BV_toggle_"
type="button"
......@@ -572,7 +572,7 @@ exports[`License Compliance extension expanded data with new licenses displays u
<!---->
<button
aria-expanded="false"
aria-haspopup="true"
aria-haspopup="menu"
class="btn dropdown-toggle btn-default btn-sm gl-p-2! gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only dropdown-toggle-no-caret"
id="__BVID__527__BV_toggle_"
type="button"
......
ee/spec/frontend/vulnerabilities/new_vulnerability/section_details_spec.js
+ 2
− 2
View file @ 15faa674
......@@ -96,11 +96,11 @@ describe('New vulnerability - Section Details', () => {
await nextTick();
// severity input
expect(wrapper.findAllByRole('alert').at(0).text()).toBe('Select a severity level');
expect(findFormGroup(1).attributes('aria-invalid')).toBe('true');
expect(findFormGroup(1).find('.invalid-feedback').text()).toBe('Select a severity level');
// status input
expect(wrapper.findAllByRole('alert').at(1).text()).toBe('Select a status');
expect(findFormGroup(2).attributes('aria-invalid')).toBe('true');
expect(findFormGroup(2).find('.invalid-feedback').text()).toBe('Select a status');
});
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment