Update light colors, remove ’25’ and add ‘950’ shades
This commit is contained in:
parent
e85e803c0e
commit
7ab056c7d7
12 changed files with 58 additions and 58 deletions
|
@ -260,7 +260,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 1px solid $blue-300;
|
border: 1px solid $blue-300;
|
||||||
border-radius: $border-radius-default;
|
border-radius: $border-radius-default;
|
||||||
background-color: $blue-25;
|
background-color: $blue-50;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
.dismiss-button {
|
.dismiss-button {
|
||||||
|
|
|
@ -242,10 +242,10 @@ body {
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $white-light;
|
background-color: $white-light;
|
||||||
box-shadow: inset 0 0 0 1px $blue-100;
|
box-shadow: inset 0 0 0 1px $blue-200;
|
||||||
|
|
||||||
.location-badge {
|
.location-badge {
|
||||||
box-shadow: inset 0 0 0 1px $blue-100;
|
box-shadow: inset 0 0 0 1px $blue-200;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -142,5 +142,5 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin green-status-color {
|
@mixin green-status-color {
|
||||||
@include status-color($green-50, $green-500, $green-700);
|
@include status-color($green-100, $green-500, $green-700);
|
||||||
}
|
}
|
||||||
|
|
|
@ -137,7 +137,7 @@ $well-border: #eee;
|
||||||
//##
|
//##
|
||||||
|
|
||||||
$code-color: $red-600;
|
$code-color: $red-600;
|
||||||
$code-bg: lighten($red-50, 2%);
|
$code-bg: lighten($red-100, 2%);
|
||||||
|
|
||||||
$kbd-color: $white-light;
|
$kbd-color: $white-light;
|
||||||
$kbd-bg: #333;
|
$kbd-bg: #333;
|
||||||
|
|
|
@ -27,46 +27,45 @@ $gray-dark: darken($gray-light, $darken-dark-factor);
|
||||||
$gray-darker: #eee;
|
$gray-darker: #eee;
|
||||||
$gray-darkest: #c4c4c4;
|
$gray-darkest: #c4c4c4;
|
||||||
|
|
||||||
$green-25: #f6fcf8;
|
$green-50: #f1fdf6;
|
||||||
$green-50: #e4f5eb;
|
$green-100: #dcf5e7;
|
||||||
$green-100: #bae6cc;
|
$green-200: #b3e6c8;
|
||||||
$green-200: #8dd5aa;
|
$green-300: #75d09b;
|
||||||
$green-300: #5fc488;
|
$green-400: #37b96d;
|
||||||
$green-400: #3cb76f;
|
|
||||||
$green-500: #1aaa55;
|
$green-500: #1aaa55;
|
||||||
$green-600: #168f48;
|
$green-600: #168f48;
|
||||||
$green-700: #12753a;
|
$green-700: #12753a;
|
||||||
$green-800: #0e5a2d;
|
$green-800: #0e5a2d;
|
||||||
$green-900: #0a4020;
|
$green-900: #0a4020;
|
||||||
|
$green-950: #072b15;
|
||||||
|
|
||||||
$blue-25: #f6fafd;
|
$blue-50: #f6fafe;
|
||||||
$blue-50: #e4eff9;
|
$blue-100: #e4f0fb;
|
||||||
$blue-100: #bcd7f1;
|
$blue-200: #b8d6f4;
|
||||||
$blue-200: #8fbce8;
|
$blue-300: #73afea;
|
||||||
$blue-300: #62a1df;
|
$blue-400: #2e87e0;
|
||||||
$blue-400: #418cd8;
|
|
||||||
$blue-500: #1f78d1;
|
$blue-500: #1f78d1;
|
||||||
$blue-600: #1b69b6;
|
$blue-600: #1b69b6;
|
||||||
$blue-700: #17599c;
|
$blue-700: #17599c;
|
||||||
$blue-800: #134a81;
|
$blue-800: #134a81;
|
||||||
$blue-900: #0f3b66;
|
$blue-900: #0f3b66;
|
||||||
|
$blue-950: #0a2744;
|
||||||
|
|
||||||
$orange-25: #fffcf8;
|
$orange-50: #fffaf4;
|
||||||
$orange-50: #fff2e1;
|
$orange-100: #fff1de;
|
||||||
$orange-100: #fedfb3;
|
$orange-200: #fed69f;
|
||||||
$orange-200: #feca81;
|
$orange-300: #fdbc60;
|
||||||
$orange-300: #fdb44f;
|
$orange-400: #fca121;
|
||||||
$orange-400: #fca429;
|
|
||||||
$orange-500: #fc9403;
|
$orange-500: #fc9403;
|
||||||
$orange-600: #de7e00;
|
$orange-600: #de7e00;
|
||||||
$orange-700: #c26700;
|
$orange-700: #c26700;
|
||||||
$orange-800: #a35100;
|
$orange-800: #a35200;
|
||||||
$orange-900: #853b00;
|
$orange-900: #853c00;
|
||||||
|
$orange-950: #592800;
|
||||||
|
|
||||||
$red-25: #fef7f6;
|
$red-50: #fef6f5;
|
||||||
$red-50: #fbe7e4;
|
$red-100: #fbe5e1;
|
||||||
$red-100: #f4c4bc;
|
$red-200: #f2b4a9;
|
||||||
$red-200: #ed9d90;
|
|
||||||
$red-300: #e67664;
|
$red-300: #e67664;
|
||||||
$red-400: #e05842;
|
$red-400: #e05842;
|
||||||
$red-500: #db3b21;
|
$red-500: #db3b21;
|
||||||
|
@ -74,6 +73,7 @@ $red-600: #c0341d;
|
||||||
$red-700: #a62d19;
|
$red-700: #a62d19;
|
||||||
$red-800: #8b2615;
|
$red-800: #8b2615;
|
||||||
$red-900: #711e11;
|
$red-900: #711e11;
|
||||||
|
$red-950: #4b140b;
|
||||||
|
|
||||||
// GitLab themes
|
// GitLab themes
|
||||||
|
|
||||||
|
@ -184,8 +184,8 @@ $list-text-disabled-color: $gl-text-color-tertiary;
|
||||||
$list-border-light: #eee;
|
$list-border-light: #eee;
|
||||||
$list-border: rgba(0, 0, 0, 0.05);
|
$list-border: rgba(0, 0, 0, 0.05);
|
||||||
$list-text-height: 42px;
|
$list-text-height: 42px;
|
||||||
$list-warning-row-bg: $orange-50;
|
$list-warning-row-bg: $orange-100;
|
||||||
$list-warning-row-border: $orange-100;
|
$list-warning-row-border: $orange-200;
|
||||||
$list-warning-row-color: $orange-700;
|
$list-warning-row-color: $orange-700;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
@ -214,8 +214,8 @@ $gl-sidebar-padding: 22px;
|
||||||
/*
|
/*
|
||||||
* Misc
|
* Misc
|
||||||
*/
|
*/
|
||||||
$row-hover: $blue-25;
|
$row-hover: $blue-50;
|
||||||
$row-hover-border: $blue-100;
|
$row-hover-border: $blue-200;
|
||||||
$progress-color: #c0392b;
|
$progress-color: #c0392b;
|
||||||
$header-height: 50px;
|
$header-height: 50px;
|
||||||
$new-navbar-height: 40px;
|
$new-navbar-height: 40px;
|
||||||
|
@ -265,8 +265,8 @@ $time-color: #999;
|
||||||
$project-member-show-color: #aaa;
|
$project-member-show-color: #aaa;
|
||||||
$gl-promo-color: #aaa;
|
$gl-promo-color: #aaa;
|
||||||
$error-bg: $red-400;
|
$error-bg: $red-400;
|
||||||
$warning-message-bg: $orange-50;
|
$warning-message-bg: $orange-100;
|
||||||
$warning-message-border: $orange-100;
|
$warning-message-border: $orange-200;
|
||||||
$warning-message-color: $orange-700;
|
$warning-message-color: $orange-700;
|
||||||
$control-group-descr-color: #666;
|
$control-group-descr-color: #666;
|
||||||
$table-permission-x-bg: #d9edf7;
|
$table-permission-x-bg: #d9edf7;
|
||||||
|
@ -451,17 +451,17 @@ $builds-trace-bg: #111;
|
||||||
/*
|
/*
|
||||||
* Callout
|
* Callout
|
||||||
*/
|
*/
|
||||||
$callout-danger-bg: $red-50;
|
$callout-danger-bg: $red-100;
|
||||||
$callout-danger-border: $red-100;
|
$callout-danger-border: $red-200;
|
||||||
$callout-danger-color: $red-700;
|
$callout-danger-color: $red-700;
|
||||||
$callout-warning-bg: $orange-50;
|
$callout-warning-bg: $orange-100;
|
||||||
$callout-warning-border: $orange-100;
|
$callout-warning-border: $orange-200;
|
||||||
$callout-warning-color: $orange-700;
|
$callout-warning-color: $orange-700;
|
||||||
$callout-info-bg: $blue-50;
|
$callout-info-bg: $blue-100;
|
||||||
$callout-info-border: $blue-100;
|
$callout-info-border: $blue-200;
|
||||||
$callout-info-color: $blue-700;
|
$callout-info-color: $blue-700;
|
||||||
$callout-success-bg: $green-50;
|
$callout-success-bg: $green-100;
|
||||||
$callout-success-border: $green-100;
|
$callout-success-border: $green-200;
|
||||||
$callout-success-color: $green-700;
|
$callout-success-color: $green-700;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
|
@ -83,7 +83,7 @@ $space-between-cards: 8px;
|
||||||
border-top-color: $color-low-score;
|
border-top-color: $color-low-score;
|
||||||
|
|
||||||
.card-score-big {
|
.card-score-big {
|
||||||
background-color: $red-25;
|
background-color: $red-50;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -91,7 +91,7 @@ $space-between-cards: 8px;
|
||||||
border-top-color: $color-average-score;
|
border-top-color: $color-average-score;
|
||||||
|
|
||||||
.card-score-big {
|
.card-score-big {
|
||||||
background-color: $orange-25;
|
background-color: $orange-50;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -99,7 +99,7 @@ $space-between-cards: 8px;
|
||||||
border-top-color: $color-high-score;
|
border-top-color: $color-high-score;
|
||||||
|
|
||||||
.card-score-big {
|
.card-score-big {
|
||||||
background-color: $green-25;
|
background-color: $green-50;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
|
|
||||||
.is-confidential {
|
.is-confidential {
|
||||||
color: $orange-600;
|
color: $orange-600;
|
||||||
background-color: $orange-50;
|
background-color: $orange-100;
|
||||||
border-radius: $border-radius-default;
|
border-radius: $border-radius-default;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
margin: 0 3px 0 -4px;
|
margin: 0 3px 0 -4px;
|
||||||
|
|
|
@ -255,7 +255,7 @@ $colors: (
|
||||||
|
|
||||||
&.saved {
|
&.saved {
|
||||||
.editor {
|
.editor {
|
||||||
border-top: solid 2px $green-200;
|
border-top: solid 2px $green-300;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -103,7 +103,7 @@
|
||||||
|
|
||||||
.confidential-issue-warning {
|
.confidential-issue-warning {
|
||||||
color: $orange-600;
|
color: $orange-600;
|
||||||
background-color: $orange-50;
|
background-color: $orange-100;
|
||||||
border-radius: $border-radius-default $border-radius-default 0 0;
|
border-radius: $border-radius-default $border-radius-default 0 0;
|
||||||
border: 1px solid $border-gray-normal;
|
border: 1px solid $border-gray-normal;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
|
|
@ -644,20 +644,20 @@ button.mini-pipeline-graph-dropdown-toggle {
|
||||||
|
|
||||||
// Dropdown button animation in mini pipeline graph
|
// Dropdown button animation in mini pipeline graph
|
||||||
&.ci-status-icon-success {
|
&.ci-status-icon-success {
|
||||||
@include mini-pipeline-graph-color($green-50, $green-500, $green-600);
|
@include mini-pipeline-graph-color($green-100, $green-500, $green-600);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ci-status-icon-failed {
|
&.ci-status-icon-failed {
|
||||||
@include mini-pipeline-graph-color($red-50, $red-500, $red-600);
|
@include mini-pipeline-graph-color($red-100, $red-500, $red-600);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ci-status-icon-pending,
|
&.ci-status-icon-pending,
|
||||||
&.ci-status-icon-success_with_warnings {
|
&.ci-status-icon-success_with_warnings {
|
||||||
@include mini-pipeline-graph-color($orange-50, $orange-500, $orange-600);
|
@include mini-pipeline-graph-color($orange-100, $orange-500, $orange-600);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ci-status-icon-running {
|
&.ci-status-icon-running {
|
||||||
@include mini-pipeline-graph-color($blue-50, $blue-400, $blue-600);
|
@include mini-pipeline-graph-color($blue-100, $blue-400, $blue-600);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ci-status-icon-canceled,
|
&.ci-status-icon-canceled,
|
||||||
|
|
|
@ -291,7 +291,7 @@ table.u2f-registrations {
|
||||||
.bordered-box {
|
.bordered-box {
|
||||||
border: 1px solid $blue-300;
|
border: 1px solid $blue-300;
|
||||||
border-radius: $border-radius-default;
|
border-radius: $border-radius-default;
|
||||||
background-color: $blue-25;
|
background-color: $blue-50;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
@ -379,7 +379,7 @@ table.u2f-registrations {
|
||||||
|
|
||||||
.nav-wip {
|
.nav-wip {
|
||||||
border: 1px solid $blue-500;
|
border: 1px solid $blue-500;
|
||||||
background: $blue-25;
|
background: $blue-50;
|
||||||
padding: $gl-padding;
|
padding: $gl-padding;
|
||||||
margin-bottom: $gl-padding;
|
margin-bottom: $gl-padding;
|
||||||
|
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ci-failed {
|
&.ci-failed {
|
||||||
@include status-color($red-50, $red-500, $red-600);
|
@include status-color($red-100, $red-500, $red-600);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ci-success {
|
&.ci-success {
|
||||||
|
@ -39,12 +39,12 @@
|
||||||
&.ci-pending,
|
&.ci-pending,
|
||||||
&.ci-failed_with_warnings,
|
&.ci-failed_with_warnings,
|
||||||
&.ci-success_with_warnings {
|
&.ci-success_with_warnings {
|
||||||
@include status-color($orange-50, $orange-500, $orange-700);
|
@include status-color($orange-100, $orange-500, $orange-700);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ci-info,
|
&.ci-info,
|
||||||
&.ci-running {
|
&.ci-running {
|
||||||
@include status-color($blue-50, $blue-500, $blue-600);
|
@include status-color($blue-100, $blue-500, $blue-600);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ci-created,
|
&.ci-created,
|
||||||
|
|
Loading…
Reference in a new issue