Skip to content

G
gitlab-ce
Commit 142d5abc authored by Jacob Schatz's avatar Jacob Schatz
Browse files
Options

Merge branch 'variables' into 'master' 

Removing and combining sass variables

* Removes/combines a good portion of our many shades of gray, according to https://gitlab.com/gitlab-org/gitlab-ce/uploads/207006b0aeadee57499c891f173198f4/Shades_of_grey_-_combined.png
* Renaming variables according to saturation etc will be in separate MR

See merge request !8052
parents 79f74249 0b72554c
Hide whitespace changes
Inline Side-by-side
Showing with 175 additions and 225 deletions
app/assets/stylesheets/framework/awards.scss
View file @ 142d5abc
...@@ -12,8 +12,8 @@ ...@@ -12,8 +12,8 @@
z-index: 9; z-index: 9;
width: 300px; width: 300px;
font-size: 14px; font-size: 14px;
background-color: $award-emoji-menu-bg; background-color: $white-light;
border: 1px solid $award-emoji-menu-border; border: 1px solid $border-white-light;
border-radius: $border-radius-base; border-radius: $border-radius-base;
box-shadow: 0 6px 12px $award-emoji-menu-shadow; box-shadow: 0 6px 12px $award-emoji-menu-shadow;
pointer-events: none; pointer-events: none;
...@@ -135,7 +135,7 @@ ...@@ -135,7 +135,7 @@
} }
.award-control-icon { .award-control-icon {
color: $award-emoji-new-btn-icon-color; color: $border-gray-normal;
margin-top: 1px; margin-top: 1px;
} }
} }
app/assets/stylesheets/framework/blocks.scss
View file @ 142d5abc
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
.row-content-block { .row-content-block {
margin-top: 0; margin-top: 0;
margin-bottom: -$gl-padding; margin-bottom: -$gl-padding;
background-color: $background-color; background-color: $gray-light;
padding: $gl-padding; padding: $gl-padding;
margin-bottom: 0; margin-bottom: 0;
border-top: 1px solid $white-dark; border-top: 1px solid $white-dark;
...@@ -118,7 +118,7 @@ ...@@ -118,7 +118,7 @@
.cover-block { .cover-block {
text-align: center; text-align: center;
background: $background-color; background: $gray-light;
padding-top: 44px; padding-top: 44px;
position: relative; position: relative;
......
app/assets/stylesheets/framework/buttons.scss
View file @ 142d5abc
...@@ -88,11 +88,11 @@ ...@@ -88,11 +88,11 @@
} }
@mixin btn-gray { @mixin btn-gray {
@include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-gray-dark); @include btn-color($gray-light, $border-gray-normal, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-gray-dark);
} }
@mixin btn-white { @mixin btn-white {
@include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-dark, $gl-text-color); @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-gray-dark, $gl-text-color);
} }
@mixin btn-with-margin { @mixin btn-with-margin {
...@@ -235,7 +235,7 @@ ...@@ -235,7 +235,7 @@
} }
.btn-transparent { .btn-transparent {
color: $btn-transparent-color; color: $gl-gray-light;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
...@@ -289,7 +289,7 @@ ...@@ -289,7 +289,7 @@
.active { .active {
box-shadow: $gl-btn-active-background; box-shadow: $gl-btn-active-background;
border: 1px solid $border-white-dark !important; border: 1px solid $border-gray-dark !important;
background-color: $btn-active-gray-light !important; background-color: $btn-active-gray-light !important;
} }
} }
...@@ -309,8 +309,8 @@ ...@@ -309,8 +309,8 @@
text-align: left; text-align: left;
padding: 6px 16px; padding: 6px 16px;
border-color: $border-color; border-color: $border-color;
color: $btn-placeholder-gray; color: $gray-darkest;
background-color: $background-color; background-color: $gray-light;
&:hover, &:hover,
&:active, &:active,
...@@ -318,8 +318,8 @@ ...@@ -318,8 +318,8 @@
cursor: text; cursor: text;
box-shadow: none; box-shadow: none;
border-color: $border-color; border-color: $border-color;
color: $btn-placeholder-gray; color: $gray-darkest;
background-color: $background-color; background-color: $gray-light;
} }
} }
...@@ -331,7 +331,7 @@ ...@@ -331,7 +331,7 @@
margin-left: 10px; margin-left: 10px;
i { i {
color: $gl-icon-color; color: $gl-gray-light;
} }
} }
...@@ -344,8 +344,8 @@ ...@@ -344,8 +344,8 @@
} }
.btn-static { .btn-static {
background-color: $background-color !important; background-color: $gray-light !important;
border: 1px solid $border-gray-light; border: 1px solid $border-gray-normal;
cursor: default; cursor: default;
&:active { &:active {
......
app/assets/stylesheets/framework/callout.scss
View file @ 142d5abc
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
padding: $gl-padding; padding: $gl-padding;
border-left: 3px solid $border-color; border-left: 3px solid $border-color;
color: $text-color; color: $text-color;
background: $background-color; background: $gray-light;
} }
.bs-callout h4 { .bs-callout h4 {
......
app/assets/stylesheets/framework/dropdowns.scss
View file @ 142d5abc
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
@mixin chevron-active { @mixin chevron-active {
.fa-chevron-down { .fa-chevron-down {
color: $dropdown-toggle-hover-icon-color; color: $gray-darkest;
} }
} }
...@@ -28,14 +28,14 @@ ...@@ -28,14 +28,14 @@
.dropdown-toggle, .dropdown-toggle,
.dropdown-menu-toggle { .dropdown-menu-toggle {
@include chevron-active; @include chevron-active;
border-color: $dropdown-toggle-hover-border-color; border-color: $gray-darkest;
} }
} }
.dropdown-toggle { .dropdown-toggle {
padding: 6px 8px 6px 10px; padding: 6px 8px 6px 10px;
background-color: $dropdown-toggle-bg; background-color: $white-light;
color: $dropdown-toggle-color; color: $gl-text-color;
font-size: 14px; font-size: 14px;
text-align: left; text-align: left;
border: 1px solid $border-color; border: 1px solid $border-color;
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
} }
.fa { .fa {
color: $dropdown-toggle-icon-color; color: $gray-darkest;
} }
.fa-chevron-down { .fa-chevron-down {
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
&:hover { &:hover {
@include chevron-active; @include chevron-active;
border-color: $dropdown-toggle-hover-border-color; border-color: $gray-darkest;
} }
&:focus:active { &:focus:active {
...@@ -131,7 +131,7 @@ ...@@ -131,7 +131,7 @@
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
padding: 8px 0; padding: 8px 0;
background-color: $dropdown-bg; background-color: $white-light;
border: 1px solid $dropdown-border-color; border: 1px solid $dropdown-border-color;
border-radius: $border-radius-base; border-radius: $border-radius-base;
box-shadow: 0 2px 4px $dropdown-shadow-color; box-shadow: 0 2px 4px $dropdown-shadow-color;
...@@ -202,7 +202,7 @@ ...@@ -202,7 +202,7 @@
} }
.icon-play { .icon-play {
fill: $table-text-gray; fill: $gl-gray-light;
margin-right: 6px; margin-right: 6px;
height: 12px; height: 12px;
width: 11px; width: 11px;
...@@ -210,7 +210,7 @@ ...@@ -210,7 +210,7 @@
} }
.dropdown-header { .dropdown-header {
color: $dropdown-header-color; color: $gl-gray-light;
font-size: 13px; font-size: 13px;
line-height: 22px; line-height: 22px;
padding: 0 10px; padding: 0 10px;
...@@ -223,7 +223,7 @@ ...@@ -223,7 +223,7 @@
.unclickable { .unclickable {
cursor: not-allowed; cursor: not-allowed;
padding: 5px 8px; padding: 5px 8px;
color: $dropdown-header-color; color: $gl-gray-light;
} }
} }
...@@ -602,14 +602,14 @@ ...@@ -602,14 +602,14 @@
th { th {
padding: 2px 0; padding: 2px 0;
color: $calendar-header-color; color: $note-disabled-comment-color;
font-weight: normal; font-weight: normal;
text-transform: lowercase; text-transform: lowercase;
border-top: 1px solid $calendar-border-color; border-top: 1px solid $calendar-border-color;
} }
.ui-datepicker-unselectable { .ui-datepicker-unselectable {
background-color: $calendar-unselectable-bg; background-color: $gray-light;
} }
} }
...@@ -621,11 +621,11 @@ ...@@ -621,11 +621,11 @@
.dropdown-menu-inner-content { .dropdown-menu-inner-content {
display: block; display: block;
color: $gl-placeholder-color; color: $gl-gray-light;
} }
.dropdown-toggle-text { .dropdown-toggle-text {
&.is-default { &.is-default {
color: $gl-placeholder-color; color: $gl-gray-light;
} }
} }
app/assets/stylesheets/framework/files.scss
View file @ 142d5abc
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
.file-title { .file-title {
position: relative; position: relative;
background-color: $background-color; background-color: $gray-light;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
margin: 0; margin: 0;
text-align: left; text-align: left;
......
app/assets/stylesheets/framework/forms.scss
View file @ 142d5abc
...@@ -22,7 +22,7 @@ input[type='text'].danger { ...@@ -22,7 +22,7 @@ input[type='text'].danger {
margin-top: 0; margin-top: 0;
margin-bottom: -$gl-padding; margin-bottom: -$gl-padding;
padding: $gl-padding; padding: $gl-padding;
background-color: $background-color; background-color: $gray-light;
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
} }
...@@ -149,7 +149,7 @@ label { ...@@ -149,7 +149,7 @@ label {
} }
.form-control::-webkit-input-placeholder { .form-control::-webkit-input-placeholder {
color: $gl-placeholder-color; color: $gl-gray-light;
} }
.input-group { .input-group {
......
app/assets/stylesheets/framework/header.scss
View file @ 142d5abc
...@@ -9,7 +9,7 @@ header { ...@@ -9,7 +9,7 @@ header {
&.navbar-empty { &.navbar-empty {
height: $header-height; height: $header-height;
background: $white-light; background: $white-light;
border-bottom: 1px solid $btn-gray-hover; border-bottom: 1px solid $white-normal;
.center-logo { .center-logo {
margin: 8px 0; margin: 8px 0;
...@@ -27,7 +27,7 @@ header { ...@@ -27,7 +27,7 @@ header {
z-index: 100; z-index: 100;
margin-bottom: 0; margin-bottom: 0;
height: $header-height; height: $header-height;
background-color: $background-color; background-color: $gray-light;
border: none; border: none;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
...@@ -45,7 +45,7 @@ header { ...@@ -45,7 +45,7 @@ header {
padding: 0; padding: 0;
.nav > li > a { .nav > li > a {
color: $gl-icon-color; color: $gl-gray-light;
font-size: 18px; font-size: 18px;
padding: 0; padding: 0;
margin: ($header-height - 28) / 2 0; margin: ($header-height - 28) / 2 0;
...@@ -62,8 +62,8 @@ header { ...@@ -62,8 +62,8 @@ header {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background-color: $background-color; background-color: $gray-light;
color: darken($gl-icon-color, 30%); color: darken($gl-gray-light, 30%);
.todos-pending-count { .todos-pending-count {
background: darken($todo-alert-blue, 10%); background: darken($todo-alert-blue, 10%);
...@@ -84,11 +84,11 @@ header { ...@@ -84,11 +84,11 @@ header {
padding: 6px 10px; padding: 6px 10px;
&:hover { &:hover {
background-color: $btn-gray-hover; background-color: $white-normal;
} }
&.active { &.active {
color: $gl-icon-color; color: $gl-gray-light;
} }
} }
} }
...@@ -100,10 +100,10 @@ header { ...@@ -100,10 +100,10 @@ header {
font-size: 18px; font-size: 18px;
padding: 6px 10px; padding: 6px 10px;
border: none; border: none;
background-color: $background-color; background-color: $gray-light;
&:hover { &:hover {
background-color: $btn-gray-hover; background-color: $white-normal;
} }
} }
} }
......
app/assets/stylesheets/framework/images.scss
View file @ 142d5abc
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
} }
.appearance-light-logo-preview { .appearance-light-logo-preview {
background-color: $background-color; background-color: $gray-light;
max-width: 72px; max-width: 72px;
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
......
app/assets/stylesheets/framework/issue_box.scss
View file @ 142d5abc
...@@ -41,6 +41,6 @@ ...@@ -41,6 +41,6 @@
} }
&.status-box-upcoming { &.status-box-upcoming {
background: $issue-box-upcoming-bg; background: $gl-gray-light;
} }
} }
app/assets/stylesheets/framework/lists.scss
View file @ 142d5abc
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
color: $list-warning-row-color; color: $list-warning-row-color;
} }
&.smoke { background-color: $background-color; } &.smoke { background-color: $gray-light; }
&:not(.ui-sort-disabled):hover { &:not(.ui-sort-disabled):hover {
background: $row-hover; background: $row-hover;
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
border-bottom: none; border-bottom: none;
&.bottom { &.bottom {
background: $background-color; background: $gray-light;
} }
} }
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
p { p {
padding-top: 1px; padding-top: 1px;
margin: 0; margin: 0;
color: $gray-dark; color: $white-normal;
img { img {
position: relative; position: relative;
...@@ -113,7 +113,7 @@ ul.content-list { ...@@ -113,7 +113,7 @@ ul.content-list {
padding: 0; padding: 0;
li { li {
border-color: $table-border-color; border-color: $white-normal;
font-size: $list-font-size; font-size: $list-font-size;
color: $list-text-color; color: $list-text-color;
...@@ -186,7 +186,7 @@ ul.content-list { ...@@ -186,7 +186,7 @@ ul.content-list {
&.list-placeholder { &.list-placeholder {
background-color: $gray-light; background-color: $gray-light;
border: dotted 1px $gray-dark; border: dotted 1px $white-normal;
margin: 1px 0; margin: 1px 0;
min-height: 52px; min-height: 52px;
} }
...@@ -224,7 +224,7 @@ ul.content-list { ...@@ -224,7 +224,7 @@ ul.content-list {
} }
.label-default { .label-default {
color: $btn-transparent-color; color: $gl-gray-light;
} }
} }
......
app/assets/stylesheets/framework/markdown_area.scss
View file @ 142d5abc
...@@ -114,7 +114,7 @@ ...@@ -114,7 +114,7 @@
// Border around images in issue and MR comments. // Border around images in issue and MR comments.
img:not(.emoji) { img:not(.emoji) {
border: 1px solid $table-border-gray; border: 1px solid $white-normal;
padding: 5px; padding: 5px;
margin: 5px 0; margin: 5px 0;
// Ensure that image does not exceed viewport // Ensure that image does not exceed viewport
...@@ -135,7 +135,7 @@ ...@@ -135,7 +135,7 @@
.toolbar-btn { .toolbar-btn {
float: left; float: left;
padding: 0 5px; padding: 0 5px;
color: $note-toolbar-color; color: $gl-gray-light;
background: transparent; background: transparent;
border: 0; border: 0;
outline: 0; outline: 0;
......
app/assets/stylesheets/framework/nav.scss
View file @ 142d5abc
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
margin-bottom: -1px; margin-bottom: -1px;
font-size: 14px; font-size: 14px;
line-height: 28px; line-height: 28px;
color: $note-toolbar-color; color: $gl-gray-light;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
&:hover, &:hover,
...@@ -80,17 +80,17 @@ ...@@ -80,17 +80,17 @@
.badge { .badge {
font-weight: normal; font-weight: normal;
background-color: $nav-badge-bg; background-color: $nav-badge-bg;
color: $btn-transparent-color; color: $gl-gray-light;
vertical-align: baseline; vertical-align: baseline;
} }
} }
&.sub-nav { &.sub-nav {
text-align: center; text-align: center;
background-color: $dark-background-color; background-color: $gray-normal;
.container-fluid { .container-fluid {
background-color: $dark-background-color; background-color: $gray-normal;
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -117,7 +117,7 @@ ...@@ -117,7 +117,7 @@
.top-area { .top-area {
@include clearfix; @include clearfix;
border-bottom: 1px solid $btn-gray-hover; border-bottom: 1px solid $white-normal;
.nav-text { .nav-text {
padding-top: 16px; padding-top: 16px;
...@@ -289,7 +289,7 @@ ...@@ -289,7 +289,7 @@
top: $header-height; top: $header-height;
width: 100%; width: 100%;
z-index: 11; z-index: 11;
background: $background-color; background: $gray-light;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
transition: padding $sidebar-transition-duration; transition: padding $sidebar-transition-duration;
text-align: center; text-align: center;
...@@ -317,7 +317,7 @@ ...@@ -317,7 +317,7 @@
.fa-caret-down { .fa-caret-down {
margin-left: 5px; margin-left: 5px;
color: $gl-icon-color; color: $gl-gray-light;
} }
.dropdown { .dropdown {
...@@ -352,7 +352,7 @@ ...@@ -352,7 +352,7 @@
} }
.fade-right { .fade-right {
@include fade(left, $background-color); @include fade(left, $gray-light);
right: -5px; right: -5px;
.fa { .fa {
...@@ -361,7 +361,7 @@ ...@@ -361,7 +361,7 @@
} }
.fade-left { .fade-left {
@include fade(right, $background-color); @include fade(right, $gray-light);
left: -5px; left: -5px;
.fa { .fa {
...@@ -372,7 +372,7 @@ ...@@ -372,7 +372,7 @@
&.sub-nav-scroll { &.sub-nav-scroll {
.fade-right { .fade-right {
@include fade(left, $dark-background-color); @include fade(left, $gray-normal);
right: 0; right: 0;
.fa { .fa {
...@@ -381,7 +381,7 @@ ...@@ -381,7 +381,7 @@
} }
.fade-left { .fade-left {
@include fade(right, $dark-background-color); @include fade(right, $gray-normal);
left: 0; left: 0;
.fa { .fa {
......
app/assets/stylesheets/framework/page-header.scss
View file @ 142d5abc
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
.header-action-buttons { .header-action-buttons {
i { i {
color: $gl-icon-color; color: $gl-gray-light;
font-size: 13px; font-size: 13px;
margin-right: 3px; margin-right: 3px;
} }
......
app/assets/stylesheets/framework/selects.scss
View file @ 142d5abc
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
} }
&:hover { &:hover {
background-color: $gray-dark; background-color: $white-normal;
border-color: $border-white-normal; border-color: $border-white-normal;
color: $gl-text-color; color: $gl-text-color;
} }
...@@ -108,7 +108,7 @@ ...@@ -108,7 +108,7 @@
border-color: $input-border; border-color: $input-border;
color: $gl-text-color; color: $gl-text-color;
line-height: 15px; line-height: 15px;
background-color: $background-color; background-color: $gray-light;
background-image: none; background-image: none;
.select2-search-choice-close { .select2-search-choice-close {
......
app/assets/stylesheets/framework/sidebar.scss
View file @ 142d5abc
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
.sidebar-wrapper { .sidebar-wrapper {
z-index: 1000; z-index: 1000;
background: $background-color; background: $gray-light;
.nicescroll-rails-hr { .nicescroll-rails-hr {
// TODO: Figure out why nicescroll doesn't hide horizontal bar // TODO: Figure out why nicescroll doesn't hide horizontal bar
......
app/assets/stylesheets/framework/tables.scss
View file @ 142d5abc
...@@ -31,7 +31,7 @@ table { ...@@ -31,7 +31,7 @@ table {
} }
th { th {
background-color: $background-color; background-color: $gray-light;
font-weight: normal; font-weight: normal;
border-bottom: none; border-bottom: none;
...@@ -41,7 +41,7 @@ table { ...@@ -41,7 +41,7 @@ table {
} }
td { td {
border-color: $table-border-color; border-color: $white-normal;
} }
} }
} }
......
app/assets/stylesheets/framework/timeline.scss
View file @ 142d5abc
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
.timeline-entry { .timeline-entry {
padding: $gl-padding $gl-btn-padding 11px; padding: $gl-padding $gl-btn-padding 11px;
border-color: $table-border-color; border-color: $white-normal;
color: $gl-gray; color: $gl-gray;
border-bottom: 1px solid $border-white-light; border-bottom: 1px solid $border-white-light;
......
app/assets/stylesheets/framework/tw_bootstrap_variables.scss
View file @ 142d5abc
...@@ -78,7 +78,7 @@ $pagination-active-bg: $white-light; ...@@ -78,7 +78,7 @@ $pagination-active-bg: $white-light;
$pagination-active-border: $border-color; $pagination-active-border: $border-color;
$pagination-disabled-color: #cdcdcd; $pagination-disabled-color: #cdcdcd;
$pagination-disabled-bg: $background-color; $pagination-disabled-bg: $gray-light;
$pagination-disabled-border: $border-color; $pagination-disabled-border: $border-color;
...@@ -117,8 +117,8 @@ $alert-border-radius: 0; ...@@ -117,8 +117,8 @@ $alert-border-radius: 0;
$panel-border-radius: 2px; $panel-border-radius: 2px;
$panel-default-text: $text-color; $panel-default-text: $text-color;
$panel-default-border: $border-color; $panel-default-border: $border-color;
$panel-default-heading-bg: $background-color; $panel-default-heading-bg: $gray-light;
$panel-footer-bg: $background-color; $panel-footer-bg: $gray-light;
$panel-inner-border: $border-color; $panel-inner-border: $border-color;
//== Wells //== Wells
...@@ -153,8 +153,8 @@ $nav-link-padding: 13px $gl-padding; ...@@ -153,8 +153,8 @@ $nav-link-padding: 13px $gl-padding;
//== Code //== Code
// //
//## //##
$pre-bg: $background-color !default; $pre-bg: $gray-light !default;
$pre-color: $gl-gray !default; $pre-color: $gl-gray !default;
$pre-border-color: $border-color; $pre-border-color: $border-color;
$table-bg-accent: $background-color; $table-bg-accent: $gray-light;
app/assets/stylesheets/framework/variables.scss
View file @ 142d5abc
...@@ -17,16 +17,15 @@ $darken-dark-factor: 10%; ...@@ -17,16 +17,15 @@ $darken-dark-factor: 10%;
$darken-border-factor: 5%; $darken-border-factor: 5%;
$white-light: #fff; $white-light: #fff;
$white-normal: darken($white-light, $darken-normal-factor); $white-normal: #f0f0f0;
$white-dark: darken($white-light, $darken-dark-factor); $white-dark: #eaeaea;
$gray-lightest: #fdfdfd; $gray-lightest: #fdfdfd;
$gray-light: #fafafa; $gray-light: #fafafa;
$gray-lighter: #f9f9f9; $gray-lighter: #f9f9f9;
$gray-normal: darken($gray-light, $darken-normal-factor); $gray-normal: #f5f5f5;
$gray-dark: darken($gray-light, $darken-dark-factor);
$gray-darker: #eee; $gray-darker: #eee;
$gray-darkest: #c9c9c9; $gray-darkest: #c4c4c4;
$green-light: #3cbd70; $green-light: #3cbd70;
$green-normal: darken($green-light, $darken-normal-factor); $green-normal: darken($green-light, $darken-normal-factor);
...@@ -55,11 +54,9 @@ $black-transparent: rgba(0, 0, 0, 0.3); ...@@ -55,11 +54,9 @@ $black-transparent: rgba(0, 0, 0, 0.3);
$border-white-light: darken($white-light, $darken-border-factor); $border-white-light: darken($white-light, $darken-border-factor);
$border-white-normal: darken($white-normal, $darken-border-factor); $border-white-normal: darken($white-normal, $darken-border-factor);
$border-white-dark: darken($white-dark, $darken-border-factor);
$border-gray-light: darken($gray-light, $darken-border-factor);
$border-gray-normal: darken($gray-normal, $darken-border-factor); $border-gray-normal: darken($gray-normal, $darken-border-factor);
$border-gray-dark: darken($gray-dark, $darken-border-factor); $border-gray-dark: darken($white-normal, $darken-border-factor);
$border-green-extra-light: #9adb84; $border-green-extra-light: #9adb84;
$border-green-light: darken($green-light, $darken-border-factor); $border-green-light: darken($green-light, $darken-border-factor);
...@@ -78,9 +75,6 @@ $border-red-light: darken($red-light, $darken-border-factor); ...@@ -78,9 +75,6 @@ $border-red-light: darken($red-light, $darken-border-factor);
$border-red-normal: darken($red-normal, $darken-border-factor); $border-red-normal: darken($red-normal, $darken-border-factor);
$border-red-dark: darken($red-dark, $darken-border-factor); $border-red-dark: darken($red-dark, $darken-border-factor);
$help-well-bg: $gray-light;
$help-well-border: #e5e5e5;
$warning-message-bg: #fbf2d9; $warning-message-bg: #fbf2d9;
$warning-message-color: #9e8e60; $warning-message-color: #9e8e60;
$warning-message-border: #f0e2bb; $warning-message-border: #f0e2bb;
...@@ -90,10 +84,6 @@ $warning-message-border: #f0e2bb; ...@@ -90,10 +84,6 @@ $warning-message-border: #f0e2bb;
*/ */
$border-color: #e5e5e5; $border-color: #e5e5e5;
$focus-border-color: #3aabf0; $focus-border-color: #3aabf0;
$table-border-color: #f0f0f0;
$background-color: $gray-light;
$dark-background-color: #f5f5f5;
$table-text-gray: #8f8f8f;
$well-expand-item: #e8f2f7; $well-expand-item: #e8f2f7;
$well-inner-border: #eef0f2; $well-inner-border: #eef0f2;
$well-light-border: #f1f1f1; $well-light-border: #f1f1f1;
...@@ -113,12 +103,10 @@ $gl-text-orange: #d90; ...@@ -113,12 +103,10 @@ $gl-text-orange: #d90;
$gl-link-color: #3777b0; $gl-link-color: #3777b0;
$gl-diff-text-color: #555; $gl-diff-text-color: #555;
$gl-dark-link-color: #333; $gl-dark-link-color: #333;
$gl-placeholder-color: #8f8f8f; $gl-gray-light: #8f8f8f;
$gl-icon-color: $gl-placeholder-color;
$gl-grayish-blue: #7f8fa4; $gl-grayish-blue: #7f8fa4;
$gl-gray: $gl-text-color; $gl-gray: $gl-text-color;
$gl-gray-dark: #313236; $gl-gray-dark: #313236;
$gl-gray-light: $gl-placeholder-color;
$gl-header-color: #4c4e54; $gl-header-color: #4c4e54;
/* /*
...@@ -168,9 +156,7 @@ $header-height: 50px; ...@@ -168,9 +156,7 @@ $header-height: 50px;
$fixed-layout-width: 1280px; $fixed-layout-width: 1280px;
$error-exclamation-point: #e62958; $error-exclamation-point: #e62958;
$border-radius-default: 2px; $border-radius-default: 2px;
$btn-transparent-color: #8f8f8f;
$settings-icon-size: 18px; $settings-icon-size: 18px;
$provider-btn-group-border: #e5e5e5;
$provider-btn-not-active-color: #4688f1; $provider-btn-not-active-color: #4688f1;
$link-underline-blue: #4a8bee; $link-underline-blue: #4a8bee;
$active-item-blue: #4a8bee; $active-item-blue: #4a8bee;
...@@ -193,7 +179,6 @@ $count-arrow-border: #dce0e5; ...@@ -193,7 +179,6 @@ $count-arrow-border: #dce0e5;
$save-project-loader-color: #555; $save-project-loader-color: #555;
$divergence-graph-bar-bg: #ccc; $divergence-graph-bar-bg: #ccc;
$divergence-graph-separator-bg: #ccc; $divergence-graph-separator-bg: #ccc;
$issue-box-upcoming-bg: #8f8f8f;
/* /*
* Common component specific colors * Common component specific colors
...@@ -246,8 +231,6 @@ $line-removed-dark: #fac5cd; ...@@ -246,8 +231,6 @@ $line-removed-dark: #fac5cd;
$line-number-old: #f9d7dc; $line-number-old: #f9d7dc;
$line-number-new: #ddfbe6; $line-number-new: #ddfbe6;
$line-number-select: #fbf2da; $line-number-select: #fbf2da;
$match-line: $gray-light;
$table-border-gray: #f0f0f0;
$line-target-blue: #f6faff; $line-target-blue: #f6faff;
$line-select-yellow: #fcf8e7; $line-select-yellow: #fcf8e7;
$line-select-yellow-dark: #f0e2bd; $line-select-yellow-dark: #f0e2bd;
...@@ -257,7 +240,6 @@ $file-mode-changed: #777; ...@@ -257,7 +240,6 @@ $file-mode-changed: #777;
$file-mode-changed: #777; $file-mode-changed: #777;
$diff-image-bg: #ddd; $diff-image-bg: #ddd;
$diff-image-info-color: grey; $diff-image-info-color: grey;
$diff-image-img-bg: #e5e5e5;
$diff-swipe-border: #999; $diff-swipe-border: #999;
$diff-view-modes-color: grey; $diff-view-modes-color: grey;
$diff-view-modes-border: #c1c1c1; $diff-view-modes-border: #c1c1c1;
...@@ -272,14 +254,12 @@ $regular_font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-San ...@@ -272,14 +254,12 @@ $regular_font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-San
* Dropdowns * Dropdowns
*/ */
$dropdown-width: 300px; $dropdown-width: 300px;
$dropdown-bg: #fff;
$dropdown-link-color: #555; $dropdown-link-color: #555;
$dropdown-link-hover-bg: $row-hover; $dropdown-link-hover-bg: $row-hover;
$dropdown-empty-row-bg: rgba(#000, .04); $dropdown-empty-row-bg: rgba(#000, .04);
$dropdown-border-color: $border-color; $dropdown-border-color: $border-color;
$dropdown-shadow-color: rgba(#000, .1); $dropdown-shadow-color: rgba(#000, .1);
$dropdown-divider-color: rgba(#000, .1); $dropdown-divider-color: rgba(#000, .1);
$dropdown-header-color: #959494;
$dropdown-title-btn-color: #bfbfbf; $dropdown-title-btn-color: #bfbfbf;
$dropdown-input-color: #555; $dropdown-input-color: #555;
$dropdown-input-fa-color: #c7c7c7; $dropdown-input-fa-color: #c7c7c7;
...@@ -287,31 +267,19 @@ $dropdown-input-focus-border: $focus-border-color; ...@@ -287,31 +267,19 @@ $dropdown-input-focus-border: $focus-border-color;
$dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, .4); $dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, .4);
$dropdown-loading-bg: rgba(#fff, .6); $dropdown-loading-bg: rgba(#fff, .6);
$dropdown-chevron-size: 10px; $dropdown-chevron-size: 10px;
$dropdown-toggle-active-border-color: darken($border-color, 14%);
$dropdown-toggle-bg: #fff;
$dropdown-toggle-color: #5c5c5c;
$dropdown-toggle-border-color: #e5e5e5;
$dropdown-toggle-hover-border-color: darken($dropdown-toggle-border-color, 13%);
$dropdown-toggle-active-border-color: darken($dropdown-toggle-border-color, 14%);
$dropdown-toggle-icon-color: #c4c4c4;
$dropdown-toggle-hover-icon-color: darken($dropdown-toggle-icon-color, 7%);
/* /*
* Buttons * Buttons
*/ */
$btn-active-gray: #ececec; $btn-active-gray: #ececec;
$btn-active-gray-light: e4e7ed; $btn-active-gray-light: e4e7ed;
$btn-placeholder-gray: #c7c7c7;
$btn-white-active: #848484;
$btn-gray-hover: #eee;
/* /*
* Award emoji * Award emoji
*/ */
$award-emoji-menu-bg: #fff;
$award-emoji-menu-border: #f1f2f4;
$award-emoji-menu-shadow: rgba(0,0,0,.175); $award-emoji-menu-shadow: rgba(0,0,0,.175);
$award-emoji-new-btn-icon-color: #dcdcdc;
/* /*
* Search Box * Search Box
...@@ -319,22 +287,15 @@ $award-emoji-new-btn-icon-color: #dcdcdc; ...@@ -319,22 +287,15 @@ $award-emoji-new-btn-icon-color: #dcdcdc;
$search-input-border-color: rgba(#4688f1, .8); $search-input-border-color: rgba(#4688f1, .8);
$search-input-focus-shadow-color: $dropdown-input-focus-shadow; $search-input-focus-shadow-color: $dropdown-input-focus-shadow;
$search-input-width: 220px; $search-input-width: 220px;
$location-badge-color: #aaa;
$location-badge-bg: $dark-background-color;
$location-badge-active-bg: #4f91f8; $location-badge-active-bg: #4f91f8;
$location-icon-color: #e7e9ed; $location-icon-color: #e7e9ed;
$location-icon-active-color: #807e7e;
/* /*
* Notes * Notes
*/ */
$notes-light-color: #8e8e8e; $notes-light-color: #8e8e8e;
$notes-action-color: #c3c3c3;
$notes-role-color: #8e8e8e; $notes-role-color: #8e8e8e;
$notes-role-border-color: #e4e4e4;
$note-disabled-comment-color: #b2b2b2; $note-disabled-comment-color: #b2b2b2;
$note-form-border-color: #e5e5e5;
$note-toolbar-color: #959494;
$note-targe3-outside: #fffff0; $note-targe3-outside: #fffff0;
$note-targe3-inside: #ffffd3; $note-targe3-inside: #ffffd3;
$note-line2-border: #ddd; $note-line2-border: #ddd;
...@@ -344,15 +305,12 @@ $note-line2-border: #ddd; ...@@ -344,15 +305,12 @@ $note-line2-border: #ddd;
* Zen * Zen
*/ */
$zen-control-color: #555; $zen-control-color: #555;
$zen-control-hover-color: #111;
/* /*
* Calendar * Calendar
*/ */
$calendar-header-color: #b8b8b8;
$calendar-hover-bg: #ecf3fe; $calendar-hover-bg: #ecf3fe;
$calendar-border-color: rgba(#000, .1); $calendar-border-color: rgba(#000, .1);
$calendar-unselectable-bg: $gray-light;
$calendar-user-contrib-text: #959494; $calendar-user-contrib-text: #959494;
/* /*
...@@ -365,16 +323,9 @@ $cycle-analytics-dark-text: $gl-title-color; ...@@ -365,16 +323,9 @@ $cycle-analytics-dark-text: $gl-title-color;
$cycle-analytics-light-gray: #bfbfbf; $cycle-analytics-light-gray: #bfbfbf;
$cycle-analytics-dismiss-icon-color: #b2b2b2; $cycle-analytics-dismiss-icon-color: #b2b2b2;
/*
* Personal Access Tokens
*/
$personal-access-tokens-disabled-label-color: #bbb;
/* /*
* CI * CI
*/ */
$ci-output-bg: #1d1f21;
$ci-text-color: #c5c8c6;
$ci-skipped-color: #888; $ci-skipped-color: #888;
/* /*
...@@ -470,7 +421,6 @@ $help-shortcut-header-color: #333; ...@@ -470,7 +421,6 @@ $help-shortcut-header-color: #333;
/* /*
* Issues * Issues
*/ */
$issues-border: #e5e5e5;
$issues-today-bg: #f3fff2; $issues-today-bg: #f3fff2;
$issues-today-border: #e1e8d5; $issues-today-border: #e1e8d5;
......
app/assets/stylesheets/framework/wells.scss
View file @ 142d5abc
.info-well { .info-well {
background: $background-color; background: $gray-light;
color: $gl-gray; color: $gl-gray;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: $border-radius-default; border-radius: $border-radius-default;
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
} }
.light-well { .light-well {
background-color: $background-color; background-color: $gray-light;
padding: 15px; padding: 15px;
} }
......
app/assets/stylesheets/framework/zen.scss
View file @ 142d5abc
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
} }
.zen-control-full { .zen-control-full {
color: $note-toolbar-color; color: $gl-gray-light;
&:hover { &:hover {
color: $gl-link-color; color: $gl-link-color;
...@@ -57,6 +57,6 @@ ...@@ -57,6 +57,6 @@
font-size: 36px; font-size: 36px;
&:hover { &:hover {
color: $zen-control-hover-color; color: $black;
} }
} }
app/assets/stylesheets/highlight/white.scss
View file @ 142d5abc
...@@ -69,14 +69,14 @@ $white-gc-bg: #eaf2f5; ...@@ -69,14 +69,14 @@ $white-gc-bg: #eaf2f5;
@mixin matchLine { @mixin matchLine {
color: $black-transparent; color: $black-transparent;
background-color: $match-line; background-color: $gray-light;
} }
.code.white { .code.white {
// Line numbers // Line numbers
.line-numbers, .line-numbers,
.diff-line-num { .diff-line-num {
background-color: $background-color; background-color: $gray-light;
} }
.diff-line-num, .diff-line-num,
...@@ -87,7 +87,7 @@ $white-gc-bg: #eaf2f5; ...@@ -87,7 +87,7 @@ $white-gc-bg: #eaf2f5;
// Code itself // Code itself
pre.code, pre.code,
.diff-line-num { .diff-line-num {
border-color: $table-border-gray; border-color: $white-normal;
} }
&, &,
......
app/assets/stylesheets/mailers/highlighted_diff_email.scss
View file @ 142d5abc
...@@ -91,9 +91,9 @@ $highlighted-gc-bg: #eaf2f5; ...@@ -91,9 +91,9 @@ $highlighted-gc-bg: #eaf2f5;
padding: 0 5px; padding: 0 5px;
text-align: right; text-align: right;
width: 35px; width: 35px;
background-color: $background-color; background-color: $gray-light;
color: $black-transparent; color: $black-transparent;
border-right: 1px solid $table-border-gray; border-right: 1px solid $white-normal;
&.old { &.old {
background-color: $line-number-old; background-color: $line-number-old;
...@@ -130,7 +130,7 @@ $highlighted-gc-bg: #eaf2f5; ...@@ -130,7 +130,7 @@ $highlighted-gc-bg: #eaf2f5;
&.match { &.match {
color: $black-transparent; color: $black-transparent;
background-color: $match-line; background-color: $gray-light;
} }
} }
......
app/assets/stylesheets/pages/boards.scss
View file @ 142d5abc
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
.board-inner { .board-inner {
height: 100%; height: 100%;
font-size: $issue-boards-font-size; font-size: $issue-boards-font-size;
background: $background-color; background: $gray-light;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: $border-radius-default; border-radius: $border-radius-default;
} }
...@@ -253,7 +253,7 @@ ...@@ -253,7 +253,7 @@
.board-list-count { .board-list-count {
padding: 10px 0; padding: 10px 0;
color: $gl-placeholder-color; color: $gl-gray-light;
font-size: 13px; font-size: 13px;
> .fa { > .fa {
......
app/assets/stylesheets/pages/builds.scss
View file @ 142d5abc
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
} }
.environment-information { .environment-information {
background-color: $background-color; background-color: $gray-light;
border: 1px solid $border-color; border: 1px solid $border-color;
padding: 12px $gl-padding; padding: 12px $gl-padding;
border-radius: $border-radius-default; border-radius: $border-radius-default;
...@@ -96,8 +96,8 @@ ...@@ -96,8 +96,8 @@
} }
.build-trace { .build-trace {
background: $ci-output-bg; background: $black;
color: $ci-text-color; color: $gray-darkest;
white-space: pre; white-space: pre;
overflow-x: auto; overflow-x: auto;
font-size: 12px; font-size: 12px;
...@@ -257,7 +257,7 @@ ...@@ -257,7 +257,7 @@
} }
.build-light-text { .build-light-text {
color: $gl-placeholder-color; color: $gl-gray-light;
} }
.build-gutter-toggle { .build-gutter-toggle {
......
app/assets/stylesheets/pages/commits.scss
View file @ 142d5abc
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
.commit-header { .commit-header {
padding: 5px 10px; padding: 5px 10px;
background-color: $background-color; background-color: $gray-light;
border-top: 1px solid $gray-darker; border-top: 1px solid $gray-darker;
border-bottom: 1px solid $gray-darker; border-bottom: 1px solid $gray-darker;
font-size: 14px; font-size: 14px;
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
.text-expander { .text-expander {
display: inline-block; display: inline-block;
background: $gray-light; background: $gray-light;
color: $gl-placeholder-color; color: $gl-gray-light;
padding: 0 5px; padding: 0 5px;
cursor: pointer; cursor: pointer;
border: 1px solid $border-gray-dark; border: 1px solid $border-gray-dark;
...@@ -117,7 +117,7 @@ ...@@ -117,7 +117,7 @@
.commit-row-description { .commit-row-description {
font-size: 14px; font-size: 14px;
border-left: 1px solid $btn-gray-hover; border-left: 1px solid $white-normal;
padding: 10px 15px; padding: 10px 15px;
margin: 10px 0; margin: 10px 0;
background: $gray-light; background: $gray-light;
...@@ -174,7 +174,7 @@ ...@@ -174,7 +174,7 @@
height: 14px; height: 14px;
width: 14px; width: 14px;
vertical-align: middle; vertical-align: middle;
fill: $table-text-gray; fill: $gl-gray-light;
} }
} }
......
app/assets/stylesheets/pages/diff.scss
View file @ 142d5abc
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
.diff-header { .diff-header {
position: relative; position: relative;
background: $background-color; background: $gray-light;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
padding: 10px 16px; padding: 10px 16px;
color: $gl-diff-text-color; color: $gl-diff-text-color;
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: $dark-background-color; background-color: $gray-normal;
} }
.diff-toggle-caret { .diff-toggle-caret {
...@@ -187,8 +187,8 @@ ...@@ -187,8 +187,8 @@
img { img {
border: 1px solid $white-light; border: 1px solid $white-light;
background-image: linear-gradient(45deg, $diff-image-img-bg 25%, transparent 25%, transparent 75%, $diff-image-img-bg 75%, $diff-image-img-bg 100%), background-image: linear-gradient(45deg, $border-color 25%, transparent 25%, transparent 75%, $border-color 75%, $border-color 100%),
linear-gradient(45deg, $diff-image-img-bg 25%, transparent 25%, transparent 75%, $diff-image-img-bg 75%, $diff-image-img-bg 100%); linear-gradient(45deg, $border-color 25%, transparent 25%, transparent 75%, $border-color 75%, $border-color 100%);
background-size: 10px 10px; background-size: 10px 10px;
background-position: 0 0, 5px 5px; background-position: 0 0, 5px 5px;
max-width: 100%; max-width: 100%;
......
app/assets/stylesheets/pages/editor.scss
View file @ 142d5abc
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
} }
.ace_gutter-cell { .ace_gutter-cell {
background-color: $background-color; background-color: $gray-light;
} }
.cancel-btn { .cancel-btn {
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
} }
.editor-ref { .editor-ref {
background: $background-color; background: $gray-light;
padding-right: $gl-padding; padding-right: $gl-padding;
border-right: 1px solid $border-color; border-right: 1px solid $border-color;
display: block; display: block;
......
app/assets/stylesheets/pages/environments.scss
View file @ 142d5abc
...@@ -66,14 +66,14 @@ ...@@ -66,14 +66,14 @@
.external-url, .external-url,
.dropdown-new { .dropdown-new {
color: $table-text-gray; color: $gl-gray-light;
} }
.dropdown-menu { .dropdown-menu {
.fa { .fa {
margin-right: 6px; margin-right: 6px;
color: $table-text-gray; color: $gl-gray-light;
} }
} }
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
.stop-env-link, .stop-env-link,
.external-url { .external-url {
color: $table-text-gray; color: $gl-gray-light;
.stop-env-icon { .stop-env-icon {
font-size: 14px; font-size: 14px;
...@@ -119,7 +119,7 @@ ...@@ -119,7 +119,7 @@
.badge { .badge {
font-weight: normal; font-weight: normal;
background-color: $gray-darker; background-color: $gray-darker;
color: $gl-placeholder-color; color: $gl-gray-light;
vertical-align: baseline; vertical-align: baseline;
} }
} }
......
app/assets/stylesheets/pages/events.scss
View file @ 142d5abc
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
.event-item { .event-item {
font-size: $gl-font-size; font-size: $gl-font-size;
padding: $gl-padding-top 0 $gl-padding-top ($gl-avatar-size + $gl-padding-top); padding: $gl-padding-top 0 $gl-padding-top ($gl-avatar-size + $gl-padding-top);
border-bottom: 1px solid $table-border-color; border-bottom: 1px solid $white-normal;
color: $list-text-color; color: $list-text-color;
&.event-inline { &.event-inline {
......
app/assets/stylesheets/pages/help.scss
View file @ 142d5abc
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
// Border around images in the help pages. // Border around images in the help pages.
img:not(.emoji) { img:not(.emoji) {
border: 1px solid $table-border-gray; border: 1px solid $white-normal;
padding: 5px; padding: 5px;
margin: 5px; margin: 5px;
max-height: calc(100vh - 100px); max-height: calc(100vh - 100px);
......
app/assets/stylesheets/pages/issuable.scss
View file @ 142d5abc
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
// Border around images in issue and MR descriptions. // Border around images in issue and MR descriptions.
.description img:not(.emoji) { .description img:not(.emoji) {
border: 1px solid $table-border-gray; border: 1px solid $white-normal;
padding: 5px; padding: 5px;
margin: 5px; margin: 5px;
max-height: calc(100vh - 100px); max-height: calc(100vh - 100px);
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
.block { .block {
@include clearfix; @include clearfix;
padding: $gl-padding 0; padding: $gl-padding 0;
border-bottom: 1px solid $border-gray-light; border-bottom: 1px solid $border-gray-normal;
// This prevents the mess when resizing the sidebar // This prevents the mess when resizing the sidebar
// of elements repositioning themselves.. // of elements repositioning themselves..
width: $gutter_inner_width; width: $gutter_inner_width;
...@@ -169,7 +169,7 @@ ...@@ -169,7 +169,7 @@
} }
.no-value { .no-value {
color: $gl-placeholder-color; color: $gl-gray-light;
} }
.sidebar-collapsed-icon { .sidebar-collapsed-icon {
...@@ -178,7 +178,7 @@ ...@@ -178,7 +178,7 @@
.gutter-toggle { .gutter-toggle {
margin-top: 7px; margin-top: 7px;
border-left: 1px solid $border-gray-light; border-left: 1px solid $border-gray-normal;
} }
.assignee .avatar { .assignee .avatar {
...@@ -216,7 +216,7 @@ ...@@ -216,7 +216,7 @@
} }
.participants { .participants {
border-bottom: 1px solid $border-gray-light; border-bottom: 1px solid $border-gray-normal;
} }
.hide-collapsed { .hide-collapsed {
...@@ -333,7 +333,7 @@ ...@@ -333,7 +333,7 @@
margin-left: 5px; margin-left: 5px;
a { a {
color: $gl-placeholder-color; color: $gl-gray-light;
} }
} }
......
app/assets/stylesheets/pages/issues.scss
View file @ 142d5abc
...@@ -88,12 +88,12 @@ ul.related-merge-requests > li { ...@@ -88,12 +88,12 @@ ul.related-merge-requests > li {
&.closed { &.closed {
background: $gray-light; background: $gray-light;
border-color: $issues-border; border-color: $border-color;
} }
&.merged { &.merged {
background: $gray-light; background: $gray-light;
border-color: $issues-border; border-color: $border-color;
} }
} }
...@@ -144,7 +144,7 @@ ul.related-merge-requests > li { ...@@ -144,7 +144,7 @@ ul.related-merge-requests > li {
} }
.btn { .btn {
background-color: $background-color; background-color: $gray-light;
border: 1px solid $border-gray-light; border: 1px solid $border-gray-normal;
} }
} }
app/assets/stylesheets/pages/merge_conflicts.scss
View file @ 142d5abc
...@@ -274,7 +274,7 @@ $colors: ( ...@@ -274,7 +274,7 @@ $colors: (
} }
.discard-changes-alert { .discard-changes-alert {
background-color: $background-color; background-color: $gray-light;
text-align: right; text-align: right;
padding: $gl-padding-top $gl-padding; padding: $gl-padding-top $gl-padding;
color: $gl-text-color; color: $gl-text-color;
......
app/assets/stylesheets/pages/merge_requests.scss
View file @ 142d5abc
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* *
*/ */
.mr-state-widget { .mr-state-widget {
background: $background-color; background: $gray-light;
color: $gl-gray; color: $gl-gray;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: 2px; border-radius: 2px;
...@@ -359,7 +359,7 @@ ...@@ -359,7 +359,7 @@
th { th {
background-color: $white-light; background-color: $white-light;
color: $gl-placeholder-color; color: $gl-gray-light;
} }
} }
} }
...@@ -375,7 +375,7 @@ ...@@ -375,7 +375,7 @@
} }
.mr-version-controls { .mr-version-controls {
background: $background-color; background: $gray-light;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
color: $gl-text-color; color: $gl-text-color;
......
app/assets/stylesheets/pages/milestone.scss
View file @ 142d5abc
...@@ -108,7 +108,7 @@ ...@@ -108,7 +108,7 @@
margin-top: 7px; margin-top: 7px;
.issuable-number { .issuable-number {
color: $gl-placeholder-color; color: $gl-gray-light;
margin-right: 5px; margin-right: 5px;
} }
......
app/assets/stylesheets/pages/note_form.scss
View file @ 142d5abc
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
.common-note-form { .common-note-form {
.md-area { .md-area {
padding: $gl-padding-top $gl-padding; padding: $gl-padding-top $gl-padding;
border: 1px solid $note-form-border-color; border: 1px solid $border-color;
border-radius: $border-radius-base; border-radius: $border-radius-base;
transition: border-color ease-in-out 0.15s, transition: border-color ease-in-out 0.15s,
box-shadow ease-in-out 0.15s; box-shadow ease-in-out 0.15s;
...@@ -204,7 +204,7 @@ ...@@ -204,7 +204,7 @@
.comment-toolbar { .comment-toolbar {
padding-top: $gl-padding-top; padding-top: $gl-padding-top;
color: $note-toolbar-color; color: $gl-gray-light;
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
} }
......
app/assets/stylesheets/pages/notes.scss
View file @ 142d5abc
...@@ -166,7 +166,7 @@ ul.notes { ...@@ -166,7 +166,7 @@ ul.notes {
.note { .note {
display: block; display: block;
position: relative; position: relative;
border-bottom: 1px solid $table-border-gray; border-bottom: 1px solid $white-normal;
&.note-discussion { &.note-discussion {
&.timeline-entry { &.timeline-entry {
...@@ -291,14 +291,14 @@ ul.notes { ...@@ -291,14 +291,14 @@ ul.notes {
font-family: $regular_font; font-family: $regular_font;
td { td {
border: 1px solid $table-border-gray; border: 1px solid $white-normal;
border-left: none; border-left: none;
&.notes_line { &.notes_line {
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
padding: 10px 0; padding: 10px 0;
background: $background-color; background: $gray-light;
color: $text-color; color: $text-color;
} }
...@@ -309,7 +309,7 @@ ul.notes { ...@@ -309,7 +309,7 @@ ul.notes {
} }
&.notes_content { &.notes_content {
background-color: $background-color; background-color: $gray-light;
border-width: 1px 0; border-width: 1px 0;
padding: 0; padding: 0;
vertical-align: top; vertical-align: top;
...@@ -372,7 +372,7 @@ ul.notes { ...@@ -372,7 +372,7 @@ ul.notes {
.note-actions { .note-actions {
float: right; float: right;
margin-left: 10px; margin-left: 10px;
color: $notes-action-color; color: $gray-darkest;
} }
.note-actions { .note-actions {
...@@ -411,7 +411,7 @@ ul.notes { ...@@ -411,7 +411,7 @@ ul.notes {
} }
.fa { .fa {
color: $notes-action-color; color: $gray-darkest;
position: relative; position: relative;
font-size: 17px; font-size: 17px;
} }
...@@ -448,7 +448,7 @@ ul.notes { ...@@ -448,7 +448,7 @@ ul.notes {
color: $notes-role-color; color: $notes-role-color;
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
border: 1px solid $notes-role-border-color; border: 1px solid $border-color;
border-radius: $border-radius-base; border-radius: $border-radius-base;
} }
...@@ -529,7 +529,7 @@ ul.notes { ...@@ -529,7 +529,7 @@ ul.notes {
.line-resolve-all { .line-resolve-all {
display: inline-block; display: inline-block;
padding: 5px 10px; padding: 5px 10px;
background-color: $background-color; background-color: $gray-light;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: $border-radius-default; border-radius: $border-radius-default;
...@@ -573,10 +573,10 @@ ul.notes { ...@@ -573,10 +573,10 @@ ul.notes {
svg { svg {
position: relative; position: relative;
color: $notes-action-color; color: $gray-darkest;
path { path {
fill: $notes-action-color; fill: $gray-darkest;
} }
} }
} }
......
app/assets/stylesheets/pages/pipelines.scss
View file @ 142d5abc
...@@ -118,7 +118,7 @@ ...@@ -118,7 +118,7 @@
height: 14px; height: 14px;
width: 14px; width: 14px;
vertical-align: middle; vertical-align: middle;
fill: $table-text-gray; fill: $gl-gray-light;
} }
.fa { .fa {
...@@ -201,7 +201,7 @@ ...@@ -201,7 +201,7 @@
.duration, .duration,
.finished-at { .finished-at {
color: $table-text-gray; color: $gl-gray-light;
margin: 4px 0; margin: 4px 0;
.fa { .fa {
...@@ -222,7 +222,7 @@ ...@@ -222,7 +222,7 @@
.btn { .btn {
margin: 0; margin: 0;
color: $table-text-gray; color: $gl-gray-light;
} }
.cancel-retry-btns { .cancel-retry-btns {
...@@ -235,10 +235,10 @@ ...@@ -235,10 +235,10 @@
.dropdown-toggle, .dropdown-toggle,
.dropdown-menu { .dropdown-menu {
color: $table-text-gray; color: $gl-gray-light;
.fa { .fa {
color: $table-text-gray; color: $gl-gray-light;
font-size: 14px; font-size: 14px;
} }
...@@ -290,7 +290,7 @@ ...@@ -290,7 +290,7 @@
// Pipeline visualization // Pipeline visualization
.toggle-pipeline-btn { .toggle-pipeline-btn {
background-color: $gray-dark; background-color: $white-normal;
&.graph-collapsed { &.graph-collapsed {
background-color: $white-light; background-color: $white-light;
...@@ -299,7 +299,7 @@ ...@@ -299,7 +299,7 @@
.pipeline-graph { .pipeline-graph {
width: 100%; width: 100%;
background-color: $background-color; background-color: $gray-light;
padding: $gl-padding; padding: $gl-padding;
overflow: auto; overflow: auto;
white-space: nowrap; white-space: nowrap;
...@@ -655,7 +655,7 @@ ...@@ -655,7 +655,7 @@
.toggle-pipeline-btn { .toggle-pipeline-btn {
.fa { .fa {
color: $dropdown-header-color; color: $gl-gray-light;
} }
} }
......
app/assets/stylesheets/pages/profile.scss
View file @ 142d5abc
...@@ -60,8 +60,8 @@ ...@@ -60,8 +60,8 @@
.account-well { .account-well {
padding: 10px; padding: 10px;
background-color: $help-well-bg; background-color: $gray-light;
border: 1px solid $help-well-border; border: 1px solid $border-color;
border-radius: $border-radius-base; border-radius: $border-radius-base;
ul { ul {
...@@ -136,7 +136,7 @@ ...@@ -136,7 +136,7 @@
.provider-btn-group { .provider-btn-group {
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;
border: 1px solid $provider-btn-group-border; border: 1px solid $border-color;
border-radius: 3px; border-radius: 3px;
&:last-child { &:last-child {
...@@ -147,7 +147,7 @@ ...@@ -147,7 +147,7 @@
.provider-btn-image { .provider-btn-image {
display: inline-block; display: inline-block;
padding: 5px 10px; padding: 5px 10px;
border-right: 1px solid $provider-btn-group-border; border-right: 1px solid $border-color;
> img { > img {
width: 20px; width: 20px;
...@@ -198,7 +198,7 @@ ...@@ -198,7 +198,7 @@
} }
.personal-access-tokens-never-expires-label { .personal-access-tokens-never-expires-label {
color: $personal-access-tokens-disabled-label-color; color: $note-disabled-comment-color;
} }
.datepicker.personal-access-tokens-expires-at .ui-state-disabled span { .datepicker.personal-access-tokens-expires-at .ui-state-disabled span {
......
app/assets/stylesheets/pages/projects.scss
View file @ 142d5abc
...@@ -420,13 +420,13 @@ a.deploy-project-label { ...@@ -420,13 +420,13 @@ a.deploy-project-label {
width: 100px; width: 100px;
height: 100px; height: 100px;
background-color: $gray-light; background-color: $gray-light;
border: 1px solid $gray-dark; border: 1px solid $white-normal;
margin: 0 auto; margin: 0 auto;
border-radius: 50%; border-radius: 50%;
i { i {
font-size: 100px; font-size: 100px;
color: $gray-dark; color: $white-normal;
} }
} }
...@@ -536,7 +536,7 @@ a.deploy-project-label { ...@@ -536,7 +536,7 @@ a.deploy-project-label {
} }
li.missing { li.missing {
border: 1px dashed $border-gray-light; border: 1px dashed $border-gray-normal;
border-radius: $border-radius-default; border-radius: $border-radius-default;
a { a {
...@@ -591,7 +591,7 @@ pre.light-well { ...@@ -591,7 +591,7 @@ pre.light-well {
@include basic-list; @include basic-list;
.project-row { .project-row {
border-color: $table-border-color; border-color: $white-normal;
.project-full-name { .project-full-name {
@include str-truncated; @include str-truncated;
...@@ -643,7 +643,7 @@ pre.light-well { ...@@ -643,7 +643,7 @@ pre.light-well {
&.container-fluid { &.container-fluid {
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
background-color: $background-color; background-color: $gray-light;
border: 1px solid $border-color; border: 1px solid $border-color;
border-right-width: 0; border-right-width: 0;
border-left-width: 0; border-left-width: 0;
......
app/assets/stylesheets/pages/search.scss
View file @ 142d5abc
...@@ -51,9 +51,9 @@ ...@@ -51,9 +51,9 @@
border-radius: $border-radius-default; border-radius: $border-radius-default;
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
color: $location-badge-color; color: $note-disabled-comment-color;
display: inline-block; display: inline-block;
background-color: $location-badge-bg; background-color: $gray-normal;
vertical-align: top; vertical-align: top;
cursor: default; cursor: default;
} }
...@@ -140,7 +140,7 @@ ...@@ -140,7 +140,7 @@
.search-input-wrap { .search-input-wrap {
i { i {
color: $location-icon-active-color; color: $layout-link-gray;
} }
} }
} }
......
app/assets/stylesheets/pages/settings.scss
View file @ 142d5abc
.settings-list-icon { .settings-list-icon {
color: $gl-placeholder-color; color: $gl-gray-light;
font-size: $settings-icon-size; font-size: $settings-icon-size;
line-height: 42px; line-height: 42px;
} }
......
app/assets/stylesheets/pages/snippets.scss
View file @ 142d5abc
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
} }
.project-snippets .awards { .project-snippets .awards {
border-bottom: 1px solid $table-border-color; border-bottom: 1px solid $white-normal;
padding-bottom: $gl-padding; padding-bottom: $gl-padding;
} }
......
app/assets/stylesheets/pages/status.scss
View file @ 142d5abc
...@@ -102,15 +102,15 @@ ...@@ -102,15 +102,15 @@
&.ci-created, &.ci-created,
&.ci-skipped { &.ci-skipped {
color: $table-text-gray; color: $gl-gray-light;
border-color: $table-text-gray; border-color: $gl-gray-light;
&:not(span):hover { &:not(span):hover {
background-color: rgba( $table-text-gray, .07); background-color: rgba( $gl-gray-light, .07);
} }
svg { svg {
fill: $table-text-gray; fill: $gl-gray-light;
} }
} }
} }
......
app/assets/stylesheets/pages/tree.scss
View file @ 142d5abc
...@@ -20,8 +20,8 @@ ...@@ -20,8 +20,8 @@
margin-bottom: 0; margin-bottom: 0;
tr { tr {
border-bottom: 1px solid $table-border-gray; border-bottom: 1px solid $white-normal;
border-top: 1px solid $table-border-gray; border-top: 1px solid $white-normal;
td, td,
th { th {
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
.commit-history-link-spacer { .commit-history-link-spacer {
margin: 0 10px; margin: 0 10px;
color: $table-border-color; color: $white-normal;
} }
&:hover { &:hover {
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
&.selected { &.selected {
td { td {
background: $gray-dark; background: $white-normal;
border-top: 1px solid $border-gray-dark; border-top: 1px solid $border-gray-dark;
border-bottom: 1px solid $border-gray-dark; border-bottom: 1px solid $border-gray-dark;
} }
...@@ -134,7 +134,7 @@ ...@@ -134,7 +134,7 @@
.blob-commit-info { .blob-commit-info {
list-style: none; list-style: none;
padding: $gl-padding; padding: $gl-padding;
background: $background-color; background: $gray-light;
border: 1px solid $border-color; border: 1px solid $border-color;
border-bottom: none; border-bottom: none;
margin: 0; margin: 0;
......
app/assets/stylesheets/pages/xterm.scss
View file @ 142d5abc
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
$l-blue: #81a2be; $l-blue: #81a2be;
$l-magenta: #b294bb; $l-magenta: #b294bb;
$l-cyan: #8abeb7; $l-cyan: #8abeb7;
$l-white: $ci-text-color; $l-white: $gray-darkest;
/* /*
* xterm colors * xterm colors
......
Markdown is supported
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7