Commit d6d22a5d authored by Sam Rose's avatar Sam Rose

Enable ColorVariable in scss-lint

parent 99453027
...@@ -30,7 +30,7 @@ linters: ...@@ -30,7 +30,7 @@ linters:
# variable declarations. They should be referred to via variables everywhere # variable declarations. They should be referred to via variables everywhere
# else. # else.
ColorVariable: ColorVariable:
enabled: false enabled: true
# Which form of comments to prefer in CSS. # Which form of comments to prefer in CSS.
Comment: Comment:
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
float: left; float: left;
margin-right: 15px; margin-right: 15px;
border-radius: $avatar_radius; border-radius: $avatar_radius;
border: 1px solid rgba(0, 0, 0, .1); border: 1px solid $avatar-border;
&.s16 { @include avatar-size(16px, 6px); } &.s16 { @include avatar-size(16px, 6px); }
&.s20 { @include avatar-size(20px, 7px); } &.s20 { @include avatar-size(20px, 7px); }
&.s24 { @include avatar-size(24px, 8px); } &.s24 { @include avatar-size(24px, 8px); }
......
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
} }
&.white { &.white {
background-color: white; background-color: $white-light;
} }
&.top-block { &.top-block {
...@@ -158,7 +158,7 @@ ...@@ -158,7 +158,7 @@
p { p {
padding: 0 $gl-padding; padding: 0 $gl-padding;
color: #5c5d5e; color: $gl-text-color-dark;
} }
} }
......
...@@ -68,23 +68,23 @@ ...@@ -68,23 +68,23 @@
} }
@mixin btn-green { @mixin btn-green {
@include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, #fff); @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, $white-light);
} }
@mixin btn-blue { @mixin btn-blue {
@include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, #fff); @include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, $white-light);
} }
@mixin btn-blue-medium { @mixin btn-blue-medium {
@include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, #fff); @include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, $white-light);
} }
@mixin btn-orange { @mixin btn-orange {
@include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, #fff); @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, $white-light);
} }
@mixin btn-red { @mixin btn-red {
@include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, #fff); @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, $white-light);
} }
@mixin btn-gray { @mixin btn-gray {
...@@ -289,8 +289,8 @@ ...@@ -289,8 +289,8 @@
.active { .active {
box-shadow: $gl-btn-active-background; box-shadow: $gl-btn-active-background;
border: 1px solid #c6cacf !important; border: 1px solid $border-white-dark !important;
background-color: #e4e7ed !important; background-color: $btn-active-gray-light !important;
} }
} }
...@@ -345,13 +345,13 @@ ...@@ -345,13 +345,13 @@
.btn-static { .btn-static {
background-color: $background-color !important; background-color: $background-color !important;
border: 1px solid lightgrey; border: 1px solid $border-gray-light;
cursor: default; cursor: default;
&:active { &:active {
-moz-box-shadow: inset 0 0 0 white; -moz-box-shadow: inset 0 0 0 $white-light;
-webkit-box-shadow: inset 0 0 0 white; -webkit-box-shadow: inset 0 0 0 $white-light;
box-shadow: inset 0 0 0 white; box-shadow: inset 0 0 0 $white-light;
} }
} }
......
...@@ -28,13 +28,13 @@ ...@@ -28,13 +28,13 @@
.user-contrib-cell { .user-contrib-cell {
&:hover { &:hover {
cursor: pointer; cursor: pointer;
stroke: #000; stroke: $black;
} }
} }
.user-contrib-text { .user-contrib-text {
font-size: 12px; font-size: 12px;
fill: #959494; fill: $calendar-user-contrib-text;
} }
.calendar-hint { .calendar-hint {
......
...@@ -25,25 +25,25 @@ ...@@ -25,25 +25,25 @@
/* Variations */ /* Variations */
.bs-callout-danger { .bs-callout-danger {
background-color: #fdf7f7; background-color: $callout-danger-bg;
border-color: #eed3d7; border-color: $callout-danger-border;
color: #b94a48; color: $callout-danger-color;
} }
.bs-callout-warning { .bs-callout-warning {
background-color: #faf8f0; background-color: $callout-warning-bg;
border-color: #faebcc; border-color: $callout-warning-border;
color: #8a6d3b; color: $callout-warning-color;
} }
.bs-callout-info { .bs-callout-info {
background-color: #f4f8fa; background-color: $callout-info-bg;
border-color: #bce8f1; border-color: $callout-info-border;
color: #34789a; color: $callout-info-color;
} }
.bs-callout-success { .bs-callout-success {
background-color: #dff0d8; background-color: $callout-success-bg;
border-color: #5ca64d; border-color: $callout-success-border;
color: #3c763d; color: $callout-success-color;
} }
/** COLORS **/ /** COLORS **/
.cgray { color: $gl-gray; } .cgray { color: $common-gray; }
.clgray { color: #bbb; } .clgray { color: $common-gray-light; }
.cred { color: $gl-text-red; } .cred { color: $common-red; }
.cgreen { color: $gl-text-green; } .cgreen { color: $common-green; }
.cdark { color: #444; } .cdark { color: $common-gray-dark; }
/** COMMON CLASSES **/ /** COMMON CLASSES **/
.prepend-top-0 { margin-top: 0; } .prepend-top-0 { margin-top: 0; }
...@@ -28,11 +28,11 @@ ...@@ -28,11 +28,11 @@
.center { text-align: center; } .center { text-align: center; }
.underlined-link { text-decoration: underline; } .underlined-link { text-decoration: underline; }
.hint { font-style: italic; color: #999; } .hint { font-style: italic; color: $hint-color; }
.light { color: $gl-gray; } .light { color: $common-gray; }
.slead { .slead {
color: $gl-gray; color: $common-gray;
font-size: 15px; font-size: 15px;
margin-bottom: 12px; margin-bottom: 12px;
font-weight: normal; font-weight: normal;
...@@ -52,10 +52,10 @@ pre { ...@@ -52,10 +52,10 @@ pre {
} }
&.well-pre { &.well-pre {
border: 1px solid #eee; border: 1px solid $well-pre-bg;
background: $gray-light; background: $gray-light;
border-radius: 0; border-radius: 0;
color: #555; color: $well-pre-color;
} }
} }
...@@ -87,14 +87,14 @@ table a code { ...@@ -87,14 +87,14 @@ table a code {
.loading { .loading {
margin: 20px auto; margin: 20px auto;
height: 40px; height: 40px;
color: #555; color: $loading-color;
font-size: 32px; font-size: 32px;
text-align: center; text-align: center;
} }
span.update-author { span.update-author {
display: block; display: block;
color: #999; color: $update-author-color;
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
...@@ -105,7 +105,7 @@ span.update-author { ...@@ -105,7 +105,7 @@ span.update-author {
} }
.user-mention { .user-mention {
color: #2fa0bb; color: $user-mention-color;
font-weight: bold; font-weight: bold;
} }
...@@ -114,7 +114,7 @@ span.update-author { ...@@ -114,7 +114,7 @@ span.update-author {
} }
p.time { p.time {
color: #999; color: $time-color;
font-size: 90%; font-size: 90%;
margin: 30px 3px 3px 2px; margin: 30px 3px 3px 2px;
} }
...@@ -150,7 +150,7 @@ li.note { ...@@ -150,7 +150,7 @@ li.note {
.project_member_show { .project_member_show {
td:first-child { td:first-child {
color: #aaa; color: $project-member-show-color;
} }
} }
...@@ -176,7 +176,7 @@ li.note { ...@@ -176,7 +176,7 @@ li.note {
margin-top: 40px; margin-top: 40px;
pre { pre {
background: white; background: $white-light;
border: none; border: none;
font-size: 12px; font-size: 12px;
} }
...@@ -184,12 +184,12 @@ li.note { ...@@ -184,12 +184,12 @@ li.note {
.error-message { .error-message {
padding: 10px; padding: 10px;
background: #c67; background: $error-bg;
margin: 0; margin: 0;
color: #fff; color: $white-light;
a { a {
color: #fff; color: $white-light;
text-decoration: underline; text-decoration: underline;
} }
} }
...@@ -197,22 +197,22 @@ li.note { ...@@ -197,22 +197,22 @@ li.note {
.browser-alert { .browser-alert {
padding: 10px; padding: 10px;
text-align: center; text-align: center;
background: #c67; background: $error-bg;
color: #fff; color: $white-light;
font-weight: bold; font-weight: bold;
a { a {
color: #fff; color: $white-light;
text-decoration: underline; text-decoration: underline;
} }
} }
.warning_message { .warning_message {
border-left: 4px solid #ed9; border-left: 4px solid $warning-message-border;
color: #b90; color: $warning-message-color;
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
background: #ffffe6; background: $warning-message-bg;
padding-left: 20px; padding-left: 20px;
&.centered { &.centered {
...@@ -222,7 +222,7 @@ li.note { ...@@ -222,7 +222,7 @@ li.note {
.gitlab-promo { .gitlab-promo {
a { a {
color: #aaa; color: $gl-promo-color;
margin-right: 30px; margin-right: 30px;
} }
} }
...@@ -245,7 +245,7 @@ li.note { ...@@ -245,7 +245,7 @@ li.note {
position: relative; position: relative;
top: 2px; top: 2px;
left: 5px; left: 5px;
color: #666; color: $control-group-descr-color;
} }
} }
} }
...@@ -270,7 +270,7 @@ img.emoji { ...@@ -270,7 +270,7 @@ img.emoji {
table { table {
td.permission-x { td.permission-x {
background: #d9edf7 !important; background: $table-permission-x-bg !important;
text-align: center; text-align: center;
} }
} }
...@@ -323,13 +323,13 @@ table { ...@@ -323,13 +323,13 @@ table {
.username { .username {
font-size: 18px; font-size: 18px;
color: #666; color: $username-color;
margin-top: 8px; margin-top: 8px;
} }
.description { .description {
font-size: $gl-font-size; font-size: $gl-font-size;
color: #666; color: $description-color;
margin-top: 8px; margin-top: 8px;
} }
} }
...@@ -339,7 +339,7 @@ table { ...@@ -339,7 +339,7 @@ table {
.profiler-button, .profiler-button,
.profiler-controls { .profiler-controls {
border-color: #eee !important; border-color: $profiler-border !important;
} }
} }
......
...@@ -376,7 +376,7 @@ ...@@ -376,7 +376,7 @@
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 20px; right: 20px;
color: #c7c7c7; color: $dropdown-input-fa-color;
font-size: 12px; font-size: 12px;
pointer-events: none; pointer-events: none;
} }
...@@ -529,7 +529,7 @@ ...@@ -529,7 +529,7 @@
.ui-datepicker-calendar { .ui-datepicker-calendar {
.ui-state-hover, .ui-state-hover,
.ui-state-active { .ui-state-active {
color: #fff; color: $white-light;
border: 0; border: 0;
} }
} }
......
...@@ -59,10 +59,10 @@ ...@@ -59,10 +59,10 @@
} }
.file-content { .file-content {
background: #fff; background: $white-light;
&.image_file { &.image_file {
background: #eee; background: $file-image-bg;
text-align: center; text-align: center;
img { img {
...@@ -84,8 +84,8 @@ ...@@ -84,8 +84,8 @@
} }
&.blob-no-preview { &.blob-no-preview {
background: #eee; background: $blob-bg;
text-shadow: 0 1px 2px #fff; text-shadow: 0 1px 2px $white-light;
padding: 100px 0; padding: 100px 0;
} }
...@@ -99,7 +99,7 @@ ...@@ -99,7 +99,7 @@
} }
tr { tr {
border-bottom: 1px solid #eee; border-bottom: 1px solid $blame-border;
} }
td { td {
...@@ -120,7 +120,7 @@ ...@@ -120,7 +120,7 @@
td.line-numbers { td.line-numbers {
float: none; float: none;
border-left: 1px solid #ddd; border-left: 1px solid $blame-line-numbers-border;
i { i {
float: none; float: none;
...@@ -134,7 +134,7 @@ ...@@ -134,7 +134,7 @@
} }
&.logs { &.logs {
background: #eee; background: $logs-bg;
max-height: 700px; max-height: 700px;
overflow-y: auto; overflow-y: auto;
...@@ -143,14 +143,14 @@ ...@@ -143,14 +143,14 @@
padding: 10px 0; padding: 10px 0;
border-left: 1px solid $border-color; border-left: 1px solid $border-color;
margin-bottom: 0; margin-bottom: 0;
background: white; background: $white-light;
li { li {
color: #888; color: $logs-li-color;
p { p {
margin: 0; margin: 0;
color: #333; color: $logs-p-color;
line-height: 24px; line-height: 24px;
padding-left: 10px; padding-left: 10px;
} }
......
...@@ -7,9 +7,9 @@ input { ...@@ -7,9 +7,9 @@ input {
} }
input[type='text'].danger { input[type='text'].danger {
background: #f2dede!important; background: $input-danger-bg !important;
border-color: #d66; border-color: $input-danger-border;
text-shadow: 0 1px 1px #fff; text-shadow: 0 1px 1px $white-light;
} }
.datetime-controls { .datetime-controls {
...@@ -159,7 +159,7 @@ label { ...@@ -159,7 +159,7 @@ label {
} }
.input-group-addon { .input-group-addon {
background-color: #f7f8fa; background-color: $input-group-addon-bg;
} }
.input-group-addon:not(:first-child):not(:last-child) { .input-group-addon:not(:first-child):not(:last-child) {
...@@ -181,7 +181,7 @@ label { ...@@ -181,7 +181,7 @@ label {
border: 1px solid $green-normal; border: 1px solid $green-normal;
&:focus { &:focus {
box-shadow: 0 0 0 1px $green-normal inset, 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px 0 $green-normal; box-shadow: 0 0 0 1px $green-normal inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $green-normal;
border: 0 none; border: 0 none;
} }
} }
...@@ -190,7 +190,7 @@ label { ...@@ -190,7 +190,7 @@ label {
border: 1px solid $red-normal; border: 1px solid $red-normal;
&:focus { &:focus {
box-shadow: 0 0 0 1px $red-normal inset, 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px 0 rgba(210, 40, 82, 0.6); box-shadow: 0 0 0 1px $red-normal inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $gl-field-focus-shadow-error;
border: 0 none; border: 0 none;
} }
} }
......
...@@ -85,37 +85,57 @@ ...@@ -85,37 +85,57 @@
} }
$theme-charcoal: #3d454d; $theme-charcoal: #3d454d;
$theme-charcoal-light: #485157;
$theme-charcoal-dark: #383f45; $theme-charcoal-dark: #383f45;
$theme-charcoal-text: #b9bbbe; $theme-charcoal-text: #b9bbbe;
$theme-blue-light: #becde9;
$theme-blue: #2980b9; $theme-blue: #2980b9;
$theme-blue-dark: #1970a9;
$theme-blue-darker: #096099;
$theme-graphite-lighter: #ccc;
$theme-graphite-light: #777;
$theme-graphite: #666; $theme-graphite: #666;
$theme-graphite-dark: #555;
$theme-gray-light: #979797;
$theme-gray: #373737; $theme-gray: #373737;
$theme-gray-dark: #272727;
$theme-gray-darker: #222;
$theme-green-light: #adc;
$theme-green: #019875; $theme-green: #019875;
$theme-green-dark: #018865;
$theme-green-darker: #017855;
$theme-violet-light: #98c;
$theme-violet: #548; $theme-violet: #548;
$theme-violet-dark: #436;
$theme-violet-darker: #325;
body { body {
&.ui_blue { &.ui_blue {
@include gitlab-theme(#becde9, $theme-blue, #1970a9, #096099); @include gitlab-theme($theme-blue-light, $theme-blue, $theme-blue-dark, $theme-blue-darker);
} }
&.ui_charcoal { &.ui_charcoal {
@include gitlab-theme($theme-charcoal-text, #485157, $theme-charcoal, $theme-charcoal-dark); @include gitlab-theme($theme-charcoal-text, $theme-charcoal-light, $theme-charcoal, $theme-charcoal-dark);
} }
&.ui_graphite { &.ui_graphite {
@include gitlab-theme(#ccc, #777, $theme-graphite, #555); @include gitlab-theme($theme-graphite-lighter, $theme-graphite-light, $theme-graphite, $theme-graphite-dark);
} }
&.ui_gray { &.ui_gray {
@include gitlab-theme(#979797, $theme-gray, #272727, #222); @include gitlab-theme($theme-gray-light, $theme-gray, $theme-gray-dark, $theme-gray-darker);
} }
&.ui_green { &.ui_green {
@include gitlab-theme(#adc, $theme-green, #018865, #017855); @include gitlab-theme($theme-green-light, $theme-green, $theme-green-dark, $theme-green-darker);
} }
&.ui_violet { &.ui_violet {
@include gitlab-theme(#98c, $theme-violet, #436, #325); @include gitlab-theme($theme-violet-light, $theme-violet, $theme-violet-dark, $theme-violet-darker);
} }
} }
...@@ -8,7 +8,7 @@ header { ...@@ -8,7 +8,7 @@ header {
&.navbar-empty { &.navbar-empty {
height: $header-height; height: $header-height;
background: #fff; background: $white-light;
border-bottom: 1px solid $btn-gray-hover; border-bottom: 1px solid $btn-gray-hover;
.center-logo { .center-logo {
...@@ -76,7 +76,7 @@ header { ...@@ -76,7 +76,7 @@ header {
} }
.navbar-toggle { .navbar-toggle {
color: #666; color: $nav-toggle-gray;
margin: 6px 0; margin: 6px 0;
border-radius: 0; border-radius: 0;
position: absolute; position: absolute;
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
display: block; display: block;
float: left; float: left;
margin-right: 10px; margin-right: 10px;
color: #fff; color: $white-light;
font-size: $gl-font-size; font-size: $gl-font-size;
line-height: 25px; line-height: 25px;
...@@ -37,10 +37,10 @@ ...@@ -37,10 +37,10 @@
} }
&.status-box-expired { &.status-box-expired {
background: #cea61b; background-color: $issue-status-expired;
} }
&.status-box-upcoming { &.status-box-upcoming {
background: #8f8f8f; background: $issue-box-upcoming-bg;
} }
} }
...@@ -4,13 +4,13 @@ ...@@ -4,13 +4,13 @@
&.ui-datepicker, &.ui-datepicker,
&.ui-datepicker-inline { &.ui-datepicker-inline {
border: 1px solid #ddd; border: 1px solid $jq-ui-border;
padding: 10px; padding: 10px;
width: 270px; width: 270px;
.ui-datepicker-header { .ui-datepicker-header {
background: #fff; background: $white-light;
border-color: #ddd; border-color: $jq-ui-border;
.ui-datepicker-prev, .ui-datepicker-prev,
.ui-datepicker-next { .ui-datepicker-next {
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
} }
&.ui-autocomplete { &.ui-autocomplete {
border-color: #ddd; border-color: $jq-ui-border;
padding: 0; padding: 0;
margin-top: 2px; margin-top: 2px;
z-index: 1001; z-index: 1001;
...@@ -50,9 +50,9 @@ ...@@ -50,9 +50,9 @@
} }
.ui-state-default { .ui-state-default {
border: 1px solid #fff; border: 1px solid $white-light;
background: #fff; background: $white-light;
color: #777; color: $jq-ui-default-color;
} }
.ui-state-highlight { .ui-state-highlight {
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
.ui-state-focus { .ui-state-focus {
border: 1px solid $gl-primary; border: 1px solid $gl-primary;
background: $gl-primary; background: $gl-primary;
color: #fff; color: $white-light;
} }
} }
} }
......
...@@ -6,7 +6,7 @@ html { ...@@ -6,7 +6,7 @@ html {
body { body {
&.navless { &.navless {
background-color: white !important; background-color: $white-light !important;
} }
} }
......
...@@ -11,8 +11,8 @@ ...@@ -11,8 +11,8 @@
> li { > li {
padding: 10px 15px; padding: 10px 15px;
min-height: 20px; min-height: 20px;
border-bottom: 1px solid #eee; border-bottom: 1px solid $list-border-light;
border-bottom: 1px solid rgba(0, 0, 0, 0.05); border-bottom: 1px solid $list-border;
&::after { &::after {
content: " "; content: " ";
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
} }
&.disabled { &.disabled {
color: #888; color: $list-text-disabled-color;
} }
&.unstyled { &.unstyled {
...@@ -31,9 +31,9 @@ ...@@ -31,9 +31,9 @@
} }
&.warning-row { &.warning-row {
background-color: #fcf8e3; background-color: $list-warning-row-bg;
border-color: #faebcc; border-color: $list-warning-row-border;
color: #8a6d3b; color: $list-warning-row-color;
} }
&.smoke { background-color: $background-color; } &.smoke { background-color: $background-color; }
......
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
} }
.referenced-users { .referenced-users {
color: #4c4e54; color: $gl-header-color;
padding-top: 10px; padding-top: 10px;
} }
...@@ -85,8 +85,8 @@ ...@@ -85,8 +85,8 @@
.markdown-area { .markdown-area {
border-radius: 0; border-radius: 0;
background: #fff; background: $white-light;
border: 1px solid #ddd; border: 1px solid $md-area-border;
min-height: 140px; min-height: 140px;
max-height: 500px; max-height: 500px;
padding: 5px; padding: 5px;
...@@ -108,7 +108,7 @@ ...@@ -108,7 +108,7 @@
hr { hr {
// Darken 'whitesmoke' a bit to make it more visible in note bodies // Darken 'whitesmoke' a bit to make it more visible in note bodies
border-color: darken(#f5f5f5, 8%); border-color: darken($gray-normal, 8%);
margin: 10px 0; margin: 10px 0;
} }
...@@ -135,7 +135,7 @@ ...@@ -135,7 +135,7 @@
.toolbar-btn { .toolbar-btn {
float: left; float: left;
padding: 0 5px; padding: 0 5px;
color: #959494; color: $note-toolbar-color;
background: transparent; background: transparent;
border: 0; border: 0;
outline: 0; outline: 0;
......
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
@include clearfix; @include clearfix;
padding: 10px 0; padding: 10px 0;
border-bottom: 1px solid #eee; border-bottom: 1px solid $list-border-light;
display: block; display: block;
margin: 0; margin: 0;
...@@ -67,8 +67,8 @@ ...@@ -67,8 +67,8 @@
} }
@mixin dark-diff-match-line { @mixin dark-diff-match-line {
color: rgba(255, 255, 255, 0.3); color: $dark-diff-match-bg;
background: rgba(255, 255, 255, 0.1); background: $dark-diff-match-color;
} }
@mixin webkit-prefix($property, $value) { @mixin webkit-prefix($property, $value) {
......
...@@ -133,9 +133,9 @@ ...@@ -133,9 +133,9 @@
right: 0; right: 0;
top: 30%; top: 30%;
padding: 5px 15px; padding: 5px 15px;
background: #eee; background: $show-aside-bg;
font-size: 20px; font-size: 20px;
color: #777; color: $show-aside-color;
z-index: 100; z-index: 100;
box-shadow: 0 1px 2px #ddd; box-shadow: 0 1px 2px $show-aside-shadow;
} }
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
.badge { .badge {
font-weight: normal; font-weight: normal;
background-color: #eee; background-color: $nav-badge-bg;
color: $btn-transparent-color; color: $btn-transparent-color;
vertical-align: baseline; vertical-align: baseline;
} }
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
.select2-container, .select2-container,
.select2-container.select2-drop-above { .select2-container.select2-drop-above {
.select2-choice { .select2-choice {
background: #fff; background: $white-light;
border-color: $input-border; border-color: $input-border;
height: 35px; height: 35px;
padding: $gl-vert-padding $gl-input-padding; padding: $gl-vert-padding $gl-input-padding;
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
} }
.select2-drop { .select2-drop {
box-shadow: rgba(76, 86, 103, 0.247059) 0 0 1px 0, rgba(31, 37, 50, 0.317647) 0 2px 18px 0; box-shadow: $select2-drop-shadow1 0 0 1px 0, $select2-drop-shadow2 0 2px 18px 0;
border-radius: $border-radius-default; border-radius: $border-radius-default;
border: none; border: none;
min-width: 175px; min-width: 175px;
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
} }
.select2-drop { .select2-drop {
color: #7f8fa4; color: $gl-grayish-blue;
} }
.select2-highlighted { .select2-highlighted {
...@@ -156,7 +156,7 @@ ...@@ -156,7 +156,7 @@
.select2-search input { .select2-search input {
padding: 2px 25px 2px 5px; padding: 2px 25px 2px 5px;
background: #fff image-url('select2.png'); background: $white-light image-url('select2.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 0 bottom 6px; background-position: right 0 bottom 6px;
border: 1px solid $input-border; border: 1px solid $input-border;
...@@ -169,7 +169,7 @@ ...@@ -169,7 +169,7 @@
} }
.select2-search input.select2-active { .select2-search input.select2-active {
background-color: #fff; background-color: $white-light;
background-image: image-url('select2-spinner.gif') !important; background-image: image-url('select2-spinner.gif') !important;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 5px center !important; background-position: right 5px center !important;
...@@ -206,7 +206,7 @@ ...@@ -206,7 +206,7 @@
.select2-highlighted { .select2-highlighted {
.group-result { .group-result {
.group-path { .group-path {
color: #fff; color: $white-light;
} }
} }
} }
...@@ -221,7 +221,7 @@ ...@@ -221,7 +221,7 @@
} }
.group-path { .group-path {
color: #999; color: $group-path-color;
} }
} }
...@@ -241,7 +241,7 @@ ...@@ -241,7 +241,7 @@
.namespace-result { .namespace-result {
.namespace-kind { .namespace-kind {
color: #aaa; color: $namespace-kind-color;
font-weight: normal; font-weight: normal;
} }
......
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
transition: padding $sidebar-transition-duration; transition: padding $sidebar-transition-duration;
.container-fluid { .container-fluid {
background: #fff; background: $white-light;
padding: 0 $gl-padding; padding: 0 $gl-padding;
&.container-blank { &.container-blank {
......
...@@ -14,11 +14,11 @@ table { ...@@ -14,11 +14,11 @@ table {
.warning, .warning,
.danger, .danger,
.info { .info {
color: #fff; color: $white-light;
a:not(.btn) { a:not(.btn) {
text-decoration: underline; text-decoration: underline;
color: #fff; color: $white-light;
} }
} }
......
...@@ -97,13 +97,13 @@ ...@@ -97,13 +97,13 @@
display: inline-block; display: inline-block;
&.label-gray { &.label-gray {
background-color: #f8fafc; background-color: $label-gray-bg;
color: $gl-gray; color: $gl-gray;
text-shadow: none; text-shadow: none;
} }
&.label-inverse { &.label-inverse {
background-color: #333; background-color: $label-inverse-bg;
} }
} }
...@@ -158,7 +158,7 @@ ...@@ -158,7 +158,7 @@
font-weight: normal; font-weight: normal;
a { a {
color: #777; color: $panel-heading-link-color;
} }
} }
} }
...@@ -172,7 +172,7 @@ ...@@ -172,7 +172,7 @@
.alert { .alert {
a:not(.btn) { a:not(.btn) {
@extend .alert-link; @extend .alert-link;
color: #fff; color: $white-light;
text-decoration: underline; text-decoration: underline;
} }
} }
......
...@@ -48,7 +48,7 @@ $font-size-base: $gl-font-size; ...@@ -48,7 +48,7 @@ $font-size-base: $gl-font-size;
$padding-base-vertical: $gl-vert-padding; $padding-base-vertical: $gl-vert-padding;
$padding-base-horizontal: $gl-padding; $padding-base-horizontal: $gl-padding;
$component-active-color: #fff; $component-active-color: $white-light;
$component-active-bg: $brand-info; $component-active-bg: $brand-info;
//== Forms //== Forms
...@@ -66,7 +66,7 @@ $legend-color: $text-color; ...@@ -66,7 +66,7 @@ $legend-color: $text-color;
//## //##
$pagination-color: $gl-gray; $pagination-color: $gl-gray;
$pagination-bg: #fff; $pagination-bg: $white-light;
$pagination-border: $border-color; $pagination-border: $border-color;
$pagination-hover-color: $gl-gray; $pagination-hover-color: $gl-gray;
...@@ -74,7 +74,7 @@ $pagination-hover-bg: $row-hover; ...@@ -74,7 +74,7 @@ $pagination-hover-bg: $row-hover;
$pagination-hover-border: $border-color; $pagination-hover-border: $border-color;
$pagination-active-color: $blue-dark; $pagination-active-color: $blue-dark;
$pagination-active-bg: #fff; $pagination-active-bg: $white-light;
$pagination-active-border: $border-color; $pagination-active-border: $border-color;
$pagination-disabled-color: #cdcdcd; $pagination-disabled-color: #cdcdcd;
...@@ -86,19 +86,19 @@ $pagination-disabled-border: $border-color; ...@@ -86,19 +86,19 @@ $pagination-disabled-border: $border-color;
// //
//## Define colors for form feedback states and, by default, alerts. //## Define colors for form feedback states and, by default, alerts.
$state-success-text: #fff; $state-success-text: $white-light;
$state-success-bg: $brand-success; $state-success-bg: $brand-success;
$state-success-border: $brand-success; $state-success-border: $brand-success;
$state-info-text: #fff; $state-info-text: $white-light;
$state-info-bg: $brand-info; $state-info-bg: $brand-info;
$state-info-border: $brand-info; $state-info-border: $brand-info;
$state-warning-text: #fff; $state-warning-text: $white-light;
$state-warning-bg: $brand-warning; $state-warning-bg: $brand-warning;
$state-warning-border: $brand-warning; $state-warning-border: $brand-warning;
$state-danger-text: #fff; $state-danger-text: $white-light;
$state-danger-bg: $brand-danger; $state-danger-bg: $brand-danger;
$state-danger-border: $brand-danger; $state-danger-border: $brand-danger;
...@@ -135,14 +135,14 @@ $well-border: #eee; ...@@ -135,14 +135,14 @@ $well-border: #eee;
$code-color: #c7254e; $code-color: #c7254e;
$code-bg: #f9f2f4; $code-bg: #f9f2f4;
$kbd-color: #fff; $kbd-color: $white-light;
$kbd-bg: #333; $kbd-bg: #333;
//== Buttons //== Buttons
// //
//## //##
$btn-default-color: $gl-text-color; $btn-default-color: $gl-text-color;
$btn-default-bg: #fff; $btn-default-bg: $white-light;
$btn-default-border: #e7e9ed; $btn-default-border: #e7e9ed;
//== Nav //== Nav
......
...@@ -33,15 +33,15 @@ ...@@ -33,15 +33,15 @@
padding: 3px 5px; padding: 3px 5px;
font-size: 11px; font-size: 11px;
line-height: 10px; line-height: 10px;
color: #555; color: $kdb-color;
vertical-align: middle; vertical-align: middle;
background-color: #fcfcfc; background-color: $kdb-bg;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-color: #ccc #ccc #bbb; border-color: $kdb-border $kdb-border $kdb-border-bottom;
border-image: none; border-image: none;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 -1px 0 #bbb inset; box-shadow: 0 -1px 0 $kdb-shadow inset;
} }
h1 { h1 {
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
} }
blockquote { blockquote {
color: #7f8fa4; color: $gl-grayish-blue;
font-size: inherit; font-size: inherit;
padding: 8px 21px; padding: 8px 21px;
margin: 12px 0; margin: 12px 0;
...@@ -94,13 +94,13 @@ ...@@ -94,13 +94,13 @@
} }
blockquote p { blockquote p {
color: #7f8fa4 !important; color: $gl-grayish-blue !important;
font-size: inherit; font-size: inherit;
line-height: 1.5; line-height: 1.5;
} }
p { p {
color: #5c5d5e; color: $gl-text-color-dark;
margin: 6px 0 0; margin: 6px 0 0;
} }
...@@ -108,10 +108,10 @@ ...@@ -108,10 +108,10 @@
@extend .table; @extend .table;
@extend .table-bordered; @extend .table-bordered;
margin: 12px 0; margin: 12px 0;
color: #5c5d5e; color: $gl-text-color-dark;
th { th {
background: #f8fafc; background: $label-gray-bg;
} }
} }
...@@ -202,7 +202,7 @@ ...@@ -202,7 +202,7 @@
* *
*/ */
body { body {
-webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px; -webkit-text-shadow: $body-text-shadow 0 0 1px;
} }
.page-title { .page-title {
......
...@@ -96,6 +96,8 @@ $dark-background-color: #f5f5f5; ...@@ -96,6 +96,8 @@ $dark-background-color: #f5f5f5;
$table-text-gray: #8f8f8f; $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-text-color: #5b6169;
/* /*
* Text * Text
...@@ -103,11 +105,13 @@ $well-inner-border: #eef0f2; ...@@ -103,11 +105,13 @@ $well-inner-border: #eef0f2;
$gl-font-size: 15px; $gl-font-size: 15px;
$gl-title-color: #333; $gl-title-color: #333;
$gl-text-color: #5c5c5c; $gl-text-color: #5c5c5c;
$gl-text-color-dark: #5c5d5e;
$gl-text-color-light: #8c8c8c; $gl-text-color-light: #8c8c8c;
$gl-text-green: #4a2; $gl-text-green: #4a2;
$gl-text-red: #d12f19; $gl-text-red: #d12f19;
$gl-text-orange: #d90; $gl-text-orange: #d90;
$gl-link-color: #3777b0; $gl-link-color: #3777b0;
$gl-diff-text-color: #555;
$gl-dark-link-color: #333; $gl-dark-link-color: #333;
$gl-placeholder-color: #8f8f8f; $gl-placeholder-color: #8f8f8f;
$gl-icon-color: $gl-placeholder-color; $gl-icon-color: $gl-placeholder-color;
...@@ -123,13 +127,20 @@ $gl-header-color: #4c4e54; ...@@ -123,13 +127,20 @@ $gl-header-color: #4c4e54;
$list-font-size: $gl-font-size; $list-font-size: $gl-font-size;
$list-title-color: $gl-title-color; $list-title-color: $gl-title-color;
$list-text-color: $gl-text-color; $list-text-color: $gl-text-color;
$list-text-disabled-color: #888;
$list-border-light: #eee;
$list-border: rgba(0, 0, 0, 0.05);
$list-text-height: 42px; $list-text-height: 42px;
$list-warning-row-bg: #fcf8e3;
$list-warning-row-border: #faebcc;
$list-warning-row-color: #8a6d3b;
/* /*
* Markdown * Markdown
*/ */
$md-text-color: $gl-text-color; $md-text-color: $gl-text-color;
$md-link-color: $gl-link-color; $md-link-color: $gl-link-color;
$md-area-border: #ddd;
/* /*
* Code * Code
...@@ -153,10 +164,8 @@ $gl-sidebar-padding: 22px; ...@@ -153,10 +164,8 @@ $gl-sidebar-padding: 22px;
$row-hover: #f7faff; $row-hover: #f7faff;
$row-hover-border: #b2d7ff; $row-hover-border: #b2d7ff;
$progress-color: #c0392b; $progress-color: #c0392b;
$avatar_radius: 50%;
$header-height: 50px; $header-height: 50px;
$fixed-layout-width: 1280px; $fixed-layout-width: 1280px;
$gl-avatar-size: 40px;
$error-exclamation-point: #e62958; $error-exclamation-point: #e62958;
$border-radius-default: 2px; $border-radius-default: 2px;
$btn-transparent-color: #8f8f8f; $btn-transparent-color: #8f8f8f;
...@@ -166,10 +175,47 @@ $provider-btn-not-active-color: #4688f1; ...@@ -166,10 +175,47 @@ $provider-btn-not-active-color: #4688f1;
$link-underline-blue: #4a8bee; $link-underline-blue: #4a8bee;
$active-item-blue: #4a8bee; $active-item-blue: #4a8bee;
$layout-link-gray: #7e7c7c; $layout-link-gray: #7e7c7c;
$todo-alert-blue: #428bca;
$btn-side-margin: 10px; $btn-side-margin: 10px;
$btn-sm-side-margin: 7px; $btn-sm-side-margin: 7px;
$btn-xs-side-margin: 5px; $btn-xs-side-margin: 5px;
$issue-status-expired: #cea61b;
$issuable-sidebar-color: #999;
$issuable-avatar-hover-border: #999;
$issuable-clipboard-color: #999;
$show-aside-bg: #eee;
$show-aside-color: #777;
$show-aside-shadow: #ddd;
$group-path-color: #999;
$namespace-kind-color: #aaa;
$panel-heading-link-color: #777;
$graph-author-email-color: #777;
$count-arrow-border: #dce0e5;
$save-project-loader-color: #555;
$divergence-graph-bar-bg: #ccc;
$divergence-graph-separator-bg: #ccc;
$issue-box-upcoming-bg: #8f8f8f;
/*
* Common component specific colors
*/
$hint-color: #999;
$well-pre-bg: #eee;
$well-pre-color: #555;
$loading-color: #555;
$update-author-color: #999;
$user-mention-color: #2fa0bb;
$time-color: #999;
$project-member-show-color: #aaa;
$gl-promo-color: #aaa;
$error-bg: #c67;
$warning-message-bg: #ffffe6;
$warning-message-border: #ed9;
$warning-message-color: #b90;
$control-group-descr-color: #666;
$table-permission-x-bg: #d9edf7;
$username-color: #666;
$description-color: #666;
$profiler-border: #eee;
/* tanuki logo colors */ /* tanuki logo colors */
$tanuki-red: #e24329; $tanuki-red: #e24329;
...@@ -205,6 +251,16 @@ $table-border-gray: #f0f0f0; ...@@ -205,6 +251,16 @@ $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;
$dark-diff-match-bg: rgba(255, 255, 255, 0.3);
$dark-diff-match-color: rgba(255, 255, 255, 0.1);
$file-mode-changed: #777;
$file-mode-changed: #777;
$diff-image-bg: #ddd;
$diff-image-info-color: grey;
$diff-image-img-bg: #e5e5e5;
$diff-swipe-border: #999;
$diff-view-modes-color: grey;
$diff-view-modes-border: #c1c1c1;
/* /*
* Fonts * Fonts
...@@ -226,6 +282,7 @@ $dropdown-divider-color: rgba(#000, .1); ...@@ -226,6 +282,7 @@ $dropdown-divider-color: rgba(#000, .1);
$dropdown-header-color: #959494; $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-focus-border: $focus-border-color; $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);
...@@ -243,6 +300,7 @@ $dropdown-toggle-hover-icon-color: darken($dropdown-toggle-icon-color, 7%); ...@@ -243,6 +300,7 @@ $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-placeholder-gray: #c7c7c7; $btn-placeholder-gray: #c7c7c7;
$btn-white-active: #848484; $btn-white-active: #848484;
$btn-gray-hover: #eee; $btn-gray-hover: #eee;
...@@ -252,6 +310,7 @@ $btn-gray-hover: #eee; ...@@ -252,6 +310,7 @@ $btn-gray-hover: #eee;
*/ */
$award-emoji-menu-bg: #fff; $award-emoji-menu-bg: #fff;
$award-emoji-menu-border: #f1f2f4; $award-emoji-menu-border: #f1f2f4;
$award-emoji-menu-shadow: rgba(0,0,0,.175);
$award-emoji-new-btn-icon-color: #dcdcdc; $award-emoji-new-btn-icon-color: #dcdcdc;
/* /*
...@@ -273,17 +332,28 @@ $notes-light-color: #8e8e8e; ...@@ -273,17 +332,28 @@ $notes-light-color: #8e8e8e;
$notes-action-color: #c3c3c3; $notes-action-color: #c3c3c3;
$notes-role-color: #8e8e8e; $notes-role-color: #8e8e8e;
$notes-role-border-color: #e4e4e4; $notes-role-border-color: #e4e4e4;
$note-disabled-comment-color: #b2b2b2; $note-disabled-comment-color: #b2b2b2;
$note-form-border-color: #e5e5e5; $note-form-border-color: #e5e5e5;
$note-toolbar-color: #959494; $note-toolbar-color: #959494;
$note-targe3-outside: #fffff0;
$note-targe3-inside: #ffffd3;
$note-line2-border: #ddd;
/*
* Zen
*/
$zen-control-color: #555;
$zen-control-hover-color: #111; $zen-control-hover-color: #111;
/*
* Calendar
*/
$calendar-header-color: #b8b8b8; $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-unselectable-bg: $gray-light;
$calendar-user-contrib-text: #959494;
/* /*
* Cycle Analytics * Cycle Analytics
...@@ -293,13 +363,217 @@ $cycle-analytics-box-text-color: #8c8c8c; ...@@ -293,13 +363,217 @@ $cycle-analytics-box-text-color: #8c8c8c;
$cycle-analytics-big-font: 19px; $cycle-analytics-big-font: 19px;
$cycle-analytics-dark-text: $gl-title-color; $cycle-analytics-dark-text: $gl-title-color;
$cycle-analytics-light-gray: #bfbfbf; $cycle-analytics-light-gray: #bfbfbf;
$cycle-analytics-dismiss-icon-color: #b2b2b2;
/* /*
* Personal Access Tokens * Personal Access Tokens
*/ */
$personal-access-tokens-disabled-label-color: #bbb; $personal-access-tokens-disabled-label-color: #bbb;
/*
* CI
*/
$ci-output-bg: #1d1f21; $ci-output-bg: #1d1f21;
$ci-text-color: #c5c8c6; $ci-text-color: #c5c8c6;
$ci-skipped-color: #888;
/*
* Boards
*/
$issue-boards-font-size: 15px; $issue-boards-font-size: 15px;
$issue-boards-card-shadow: rgba(186, 186, 186, 0.5);
/*
* Avatar
*/
$avatar_radius: 50%;
$avatar-border: rgba(0, 0, 0, .1);
$gl-avatar-size: 40px;
/*
* Builds
*/
$builds-trace-bg: #111;
/*
* Callout
*/
$callout-danger-bg: #fdf7f7;
$callout-danger-border: #eed3d7;
$callout-danger-color: #b94a48;
$callout-warning-bg: #faf8f0;
$callout-warning-border: #faebcc;
$callout-warning-color: #8a6d3b;
$callout-info-bg: #f4f8fa;
$callout-info-border: #bce8f1;
$callout-info-color: #34789a;
$callout-success-bg: #dff0d8;
$callout-success-border: #5ca64d;
$callout-success-color: #3c763d;
/*
* Commit Page
*/
$commit-committer-color: #999;
$commit-max-width-marker-color: rgba(0, 0, 0, 0.0);
$commit-message-text-area-bg: rgba(0, 0, 0, 0.0);
/*
* Common
*/
$common-gray: $gl-gray;
$common-gray-light: #bbb;
$common-gray-dark: #444;
$common-red: $gl-text-red;
$common-green: $gl-text-green;
/*
* Dashboard
*/
$dashboard-project-access-icon-color: #888;
/*
* Editor
*/
$editor-cancel-color: #b94a48;
/*
* Events
*/
$events-pre-color: #777;
$events-note-icon-color: #777;
$events-body-border: #ddd;
/*
* Files
*/
$file-image-bg: #eee;
$blob-bg: #eee;
$blame-border: #eee;
$blame-line-numbers-border: #ddd;
$logs-bg: #eee;
$logs-li-color: #888;
$logs-p-color: #333;
/*
* Forms
*/
$input-danger-bg: #f2dede;
$input-danger-border: #d66;
$input-group-addon-bg: #f7f8fa;
$gl-field-focus-shadow: rgba(0, 0, 0, 0.075);
$gl-field-focus-shadow-error: rgba(210, 40, 82, 0.6);
/*
* Help
*/
$document-index-color: #888;
$help-shortcut-color: #999;
$help-shortcut-mapping-color: #555;
$help-shortcut-header-color: #333;
/*
* Issues
*/
$issues-border: #e5e5e5;
$issues-today-bg: #f3fff2;
$issues-today-border: #e1e8d5;
/*
* jQuery UI
*/
$jq-ui-border: #ddd;
$jq-ui-default-color: #777;
/*
* Label
*/
$label-gray-bg: #f8fafc;
$label-inverse-bg: #333;
$label-remove-border: rgba(0, 0, 0, .1);
/*
* Lint
*/
$lint-incorrect-color: red;
$lint-correct-color: #47a447;
/*
* Login
*/
$login-brand-holder-color: #888;
$login-devise-error-color: #a00;
/*
* Nav
*/
$nav-link-gray: #959494;
$nav-badge-bg: #eee;
$nav-toggle-gray: #666;
/*
* Notify
*/
$notify-details: #777;
$notify-footer: #777;
$notify-new-file: #090;
$notify-deleted-file: #b00;
/*
* Projects
*/
$project-option-descr-color: #54565b;
$project-breadcrumb-color: #999;
$project-private-forks-notice-odd: #2aa056;
$project-network-controls-color: #888;
$project-limit-message-bg: #f28d35;
/*
* Runners
*/
$runner-state-shared-bg: #32b186;
$runner-state-specific-bg: #3498db;
$runner-status-online-color: green;
$runner-status-offline-color: gray;
$runner-status-paused-color: red;
/*
Stat Graph
*/
$stat-graph-common-bg: #f3f3f3;
$stat-graph-area-fill: #1db34f;
$stat-graph-axis-fill: #aaa;
$stat-graph-orange-fill: #f17f49;
$stat-graph-selection-fill: #333;
$stat-graph-selection-stroke: #333;
/*
* Selects
*/
$select2-drop-shadow1: rgba(76, 86, 103, 0.247059);
$select2-drop-shadow2: rgba(31, 37, 50, 0.317647);
/*
* Todo
*/
$todo-alert-blue: #428bca;
$todo-body-pre-color: #777;
$todo-body-border: #ddd;
/*
* Typography
*/
$kdb-bg: #fcfcfc;
$kdb-color: #555;
$kdb-border: #ccc;
$kdb-border-bottom: #bbb;
$kdb-shadow: #bbb;
$body-text-shadow: rgba(255,255,255,0.01);
/*
* UI Dev Kit
*/
$ui-dev-kit-example-color: #bbb;
$ui-dev-kit-example-border: #ddd;
.zen-backdrop { .zen-backdrop {
&.fullscreen { &.fullscreen {
background-color: white; background-color: $white-light;
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
border: none; border: none;
box-shadow: none; box-shadow: none;
border-radius: 0; border-radius: 0;
color: #000; color: $black;
font-size: 20px; font-size: 20px;
line-height: 26px; line-height: 26px;
padding: 30px; padding: 30px;
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
.zen-control { .zen-control {
padding: 0; padding: 0;
color: #555; color: $zen-control-color;
background: none; background: none;
border: 0; border: 0;
} }
......
/* https://github.com/MozMorris/tomorrow-pygments */ /* https://github.com/MozMorris/tomorrow-pygments */
/*
* Dark syntax colors
*/
$dark-new-bg: rgba(51, 255, 51, 0.1);
$dark-new-idiff: rgba(51, 255, 51, 0.2);
$dark-old-bg: rgba(255, 51, 51, 0.2);
$dark-old-idiff: rgba(255, 51, 51, 0.25);
$dark-border: #808080;
$dark-code-border: #666;
$dark-main-bg: #1d1f21;
$dark-main-color: #1d1f21;
$dark-line-color: #c5c8c6;
$dark-line-num-color: rgba(255, 255, 255, 0.3);
$dark-diff-not-empty-bg: #557;
$dark-highlight-bg: #ffe792;
$dark-highlight-color: $black;
$dark-pre-hll-bg: #373b41;
$dark-hll-bg: #373b41;
$dark-c: #969896;
$dark-err: #c66;
$dark-k: #b294bb;
$dark-l: #de935f;
$dark-n: #c5c8c6;
$dark-o: #8abeb7;
$dark-p: #c5c8c6;
$dark-cm: #969896;
$dark-cp: #969896;
$dark-c1: #969896;
$dark-cs: #969896;
$dark-gd: #c66;
$dark-gh: #c5c8c6;
$dark-gi: #b5bd68;
$dark-gp: #969896;
$dark-gu: #8abeb7;
$dark-kc: #b294bb;
$dark-kd: #b294bb;
$dark-kn: #8abeb7;
$dark-kp: #b294bb;
$dark-kr: #b294bb;
$dark-kt: #f0c674;
$dark-ld: #b5bd68;
$dark-m: #de935f;
$dark-s: #b5bd68;
$dark-na: #81a2be;
$dark-nb: #c5c8c6;
$dark-nc: #f0c674;
$dark-no: #c66;
$dark-nd: #8abeb7;
$dark-ni: #c5c8c6;
$dark-ne: #c66;
$dark-nf: #81a2be;
$dark-nl: #c5c8c6;
$dark-nn: #f0c674;
$dark-nx: #81a2be;
$dark-py: #c5c8c6;
$dark-nt: #8abeb7;
$dark-nv: #c66;
$dark-ow: #8abeb7;
$dark-w: #c5c8c6;
$dark-mf: #de935f;
$dark-mh: #de935f;
$dark-mi: #de935f;
$dark-mo: #de935f;
$dark-sb: #b5bd68;
$dark-sc: #c5c8c6;
$dark-sd: #969896;
$dark-s2: #b5bd68;
$dark-se: #de935f;
$dark-sh: #b5bd68;
$dark-si: #de935f;
$dark-sx: #b5bd68;
$dark-sr: #b5bd68;
$dark-s1: #b5bd68;
$dark-ss: #b5bd68;
$dark-bp: #c5c8c6;
$dark-vc: #c66;
$dark-vg: #c66;
$dark-vi: #c66;
$dark-il: #de935f;
.code.dark { .code.dark {
// Line numbers // Line numbers
.line-numbers, .line-numbers,
.diff-line-num { .diff-line-num {
background-color: #1d1f21; background-color: $dark-main-bg;
} }
.diff-line-num, .diff-line-num,
.diff-line-num a { .diff-line-num a {
color: rgba(255, 255, 255, 0.3); color: $dark-main-color;
color: $dark-line-num-color;
} }
// Code itself // Code itself
pre.code, pre.code,
.diff-line-num { .diff-line-num {
border-color: #666; border-color: $dark-code-border;
} }
&, &,
pre.code, pre.code,
.line_holder .line_content { .line_holder .line_content {
background-color: #1d1f21; background-color: $dark-main-bg;
color: #c5c8c6; color: $dark-line-color;
} }
// Diff line // Diff line
...@@ -32,18 +114,18 @@ ...@@ -32,18 +114,18 @@
td.diff-line-num.hll:not(.empty-cell), td.diff-line-num.hll:not(.empty-cell),
td.line_content.hll:not(.empty-cell) { td.line_content.hll:not(.empty-cell) {
background-color: #557; background-color: $dark-diff-not-empty-bg;
border-color: darken(#557, 15%); border-color: darken($dark-diff-not-empty-bg, 15%);
} }
.diff-line-num.new, .diff-line-num.new,
.line_content.new { .line_content.new {
@include diff_background(rgba(51, 255, 51, 0.1), rgba(51, 255, 51, 0.2), #808080); @include diff_background($dark-new-bg, $dark-new-idiff, $dark-border);
} }
.diff-line-num.old, .diff-line-num.old,
.line_content.old { .line_content.old {
@include diff_background(rgba(255, 51, 51, 0.2), rgba(255, 51, 51, 0.25), #808080); @include diff_background($dark-old-bg, $dark-old-idiff, $dark-border);
} }
.line_content.match { .line_content.match {
...@@ -53,77 +135,77 @@ ...@@ -53,77 +135,77 @@
// highlight line via anchor // highlight line via anchor
pre .hll { pre .hll {
background-color: #557 !important; background-color: $dark-pre-hll-bg !important;
} }
// Search result highlight // Search result highlight
span.highlight_word { span.highlight_word {
background-color: #ffe792 !important; background-color: $dark-highlight-bg !important;
color: #000 !important; color: $dark-highlight-color !important;
} }
.hll { background-color: #373b41; } .hll { background-color: $dark-hll-bg; }
.c { color: #969896; } /* Comment */ .c { color: $dark-c; } /* Comment */
.err { color: #c66; } /* Error */ .err { color: $dark-err; } /* Error */
.k { color: #b294bb; } /* Keyword */ .k { color: $dark-k; } /* Keyword */
.l { color: #de935f; } /* Literal */ .l { color: $dark-l; } /* Literal */
.n { color: #c5c8c6; } /* Name */ .n { color: $dark-n; } /* Name */
.o { color: #8abeb7; } /* Operator */ .o { color: $dark-o; } /* Operator */
.p { color: #c5c8c6; } /* Punctuation */ .p { color: $dark-p; } /* Punctuation */
.cm { color: #969896; } /* Comment.Multiline */ .cm { color: $dark-cm; } /* Comment.Multiline */
.cp { color: #969896; } /* Comment.Preproc */ .cp { color: $dark-cp; } /* Comment.Preproc */
.c1 { color: #969896; } /* Comment.Single */ .c1 { color: $dark-c1; } /* Comment.Single */
.cs { color: #969896; } /* Comment.Special */ .cs { color: $dark-cs; } /* Comment.Special */
.gd { color: #c66; } /* Generic.Deleted */ .gd { color: $dark-gd; } /* Generic.Deleted */
.ge { font-style: italic; } /* Generic.Emph */ .ge { font-style: italic; } /* Generic.Emph */
.gh { color: #c5c8c6; font-weight: bold; } /* Generic.Heading */ .gh { color: $dark-gh; font-weight: bold; } /* Generic.Heading */
.gi { color: #b5bd68; } /* Generic.Inserted */ .gi { color: $dark-gi; } /* Generic.Inserted */
.gp { color: #969896; font-weight: bold; } /* Generic.Prompt */ .gp { color: $dark-gp; font-weight: bold; } /* Generic.Prompt */
.gs { font-weight: bold; } /* Generic.Strong */ .gs { font-weight: bold; } /* Generic.Strong */
.gu { color: #8abeb7; font-weight: bold; } /* Generic.Subheading */ .gu { color: $dark-gu; font-weight: bold; } /* Generic.Subheading */
.kc { color: #b294bb; } /* Keyword.Constant */ .kc { color: $dark-kc; } /* Keyword.Constant */
.kd { color: #b294bb; } /* Keyword.Declaration */ .kd { color: $dark-kd; } /* Keyword.Declaration */
.kn { color: #8abeb7; } /* Keyword.Namespace */ .kn { color: $dark-kn; } /* Keyword.Namespace */
.kp { color: #b294bb; } /* Keyword.Pseudo */ .kp { color: $dark-kp; } /* Keyword.Pseudo */
.kr { color: #b294bb; } /* Keyword.Reserved */ .kr { color: $dark-kr; } /* Keyword.Reserved */
.kt { color: #f0c674; } /* Keyword.Type */ .kt { color: $dark-kt; } /* Keyword.Type */
.ld { color: #b5bd68; } /* Literal.Date */ .ld { color: $dark-ld; } /* Literal.Date */
.m { color: #de935f; } /* Literal.Number */ .m { color: $dark-m; } /* Literal.Number */
.s { color: #b5bd68; } /* Literal.String */ .s { color: $dark-s; } /* Literal.String */
.na { color: #81a2be; } /* Name.Attribute */ .na { color: $dark-na; } /* Name.Attribute */
.nb { color: #c5c8c6; } /* Name.Builtin */ .nb { color: $dark-nb; } /* Name.Builtin */
.nc { color: #f0c674; } /* Name.Class */ .nc { color: $dark-nc; } /* Name.Class */
.no { color: #c66; } /* Name.Constant */ .no { color: $dark-no; } /* Name.Constant */
.nd { color: #8abeb7; } /* Name.Decorator */ .nd { color: $dark-nd; } /* Name.Decorator */
.ni { color: #c5c8c6; } /* Name.Entity */ .ni { color: $dark-ni; } /* Name.Entity */
.ne { color: #c66; } /* Name.Exception */ .ne { color: $dark-ne; } /* Name.Exception */
.nf { color: #81a2be; } /* Name.Function */ .nf { color: $dark-nf; } /* Name.Function */
.nl { color: #c5c8c6; } /* Name.Label */ .nl { color: $dark-nl; } /* Name.Label */
.nn { color: #f0c674; } /* Name.Namespace */ .nn { color: $dark-nn; } /* Name.Namespace */
.nx { color: #81a2be; } /* Name.Other */ .nx { color: $dark-nx; } /* Name.Other */
.py { color: #c5c8c6; } /* Name.Property */ .py { color: $dark-py; } /* Name.Property */
.nt { color: #8abeb7; } /* Name.Tag */ .nt { color: $dark-nt; } /* Name.Tag */
.nv { color: #c66; } /* Name.Variable */ .nv { color: $dark-nv; } /* Name.Variable */
.ow { color: #8abeb7; } /* Operator.Word */ .ow { color: $dark-ow; } /* Operator.Word */
.w { color: #c5c8c6; } /* Text.Whitespace */ .w { color: $dark-w; } /* Text.Whitespace */
.mf { color: #de935f; } /* Literal.Number.Float */ .mf { color: $dark-mf; } /* Literal.Number.Float */
.mh { color: #de935f; } /* Literal.Number.Hex */ .mh { color: $dark-mh; } /* Literal.Number.Hex */
.mi { color: #de935f; } /* Literal.Number.Integer */ .mi { color: $dark-mi; } /* Literal.Number.Integer */
.mo { color: #de935f; } /* Literal.Number.Oct */ .mo { color: $dark-mo; } /* Literal.Number.Oct */
.sb { color: #b5bd68; } /* Literal.String.Backtick */ .sb { color: $dark-sb; } /* Literal.String.Backtick */
.sc { color: #c5c8c6; } /* Literal.String.Char */ .sc { color: $dark-sc; } /* Literal.String.Char */
.sd { color: #969896; } /* Literal.String.Doc */ .sd { color: $dark-sd; } /* Literal.String.Doc */
.s2 { color: #b5bd68; } /* Literal.String.Double */ .s2 { color: $dark-s2; } /* Literal.String.Double */
.se { color: #de935f; } /* Literal.String.Escape */ .se { color: $dark-se; } /* Literal.String.Escape */
.sh { color: #b5bd68; } /* Literal.String.Heredoc */ .sh { color: $dark-sh; } /* Literal.String.Heredoc */
.si { color: #de935f; } /* Literal.String.Interpol */ .si { color: $dark-si; } /* Literal.String.Interpol */
.sx { color: #b5bd68; } /* Literal.String.Other */ .sx { color: $dark-sx; } /* Literal.String.Other */
.sr { color: #b5bd68; } /* Literal.String.Regex */ .sr { color: $dark-sr; } /* Literal.String.Regex */
.s1 { color: #b5bd68; } /* Literal.String.Single */ .s1 { color: $dark-s1; } /* Literal.String.Single */
.ss { color: #b5bd68; } /* Literal.String.Symbol */ .ss { color: $dark-ss; } /* Literal.String.Symbol */
.bp { color: #c5c8c6; } /* Name.Builtin.Pseudo */ .bp { color: $dark-bp; } /* Name.Builtin.Pseudo */
.vc { color: #c66; } /* Name.Variable.Class */ .vc { color: $dark-vc; } /* Name.Variable.Class */
.vg { color: #c66; } /* Name.Variable.Global */ .vg { color: $dark-vg; } /* Name.Variable.Global */
.vi { color: #c66; } /* Name.Variable.Instance */ .vi { color: $dark-vi; } /* Name.Variable.Instance */
.il { color: #de935f; } /* Literal.Number.Integer.Long */ .il { color: $dark-il; } /* Literal.Number.Integer.Long */
} }
/* https://github.com/richleland/pygments-css/blob/master/monokai.css */ /* https://github.com/richleland/pygments-css/blob/master/monokai.css */
/*
* Monokai Colors
*/
$monokai-bg: #272822;
$monokai-border: #555;
$monokai-text-color: #f8f8f2;
$monokai-line-num-color: rgba(255, 255, 255, 0.3);
$monokai-line-empty-bg: #49483e;
$monokai-line-empty-border: darken($monokai-line-empty-bg, 15%);
$monokai-diff-border: #808080;
$monokai-highlight-bg: #ffe792;
$monokai-new-bg: rgba(166, 226, 46, 0.1);
$monokai-new-idiff: rgba(166, 226, 46, 0.15);
$monokai-old-bg: rgba(254, 147, 140, 0.15);
$monokai-old-idiff: rgba(254, 147, 140, 0.2);
$monokai-hll: #49483e;
$monokai-c: #75715e;
$monokai-err-color: #960050;
$monokai-err-bg: #1e0010;
$monokai-k: #66d9ef;
$monokai-l: #ae81ff;
$monokai-n: #f8f8f2;
$monokai-o: #f92672;
$monokai-p: #f8f8f2;
$monokai-cm: #75715e;
$monokai-cp: #75715e;
$monokai-c1: #75715e;
$monokai-cs: #75715e;
$monokai-kc: #66d9ef;
$monokai-kd: #66d9ef;
$monokai-kn: #f92672;
$monokai-kp: #66d9ef;
$monokai-kr: #66d9ef;
$monokai-kt: #66d9ef;
$monokai-ld: #e6db74;
$monokai-m: #ae81ff;
$monokai-s: #e6db74;
$monokai-na: #a6e22e;
$monokai-nb: #f8f8f2;
$monokai-nc: #a6e22e;
$monokai-no: #66d9ef;
$monokai-nd: #a6e22e;
$monokai-ni: #f8f8f2;
$monokai-ne: #a6e22e;
$monokai-nf: #a6e22e;
$monokai-nl: #f8f8f2;
$monokai-nn: #f8f8f2;
$monokai-nx: #a6e22e;
$monokai-py: #f8f8f2;
$monokai-nt: #f92672;
$monokai-nv: #f8f8f2;
$monokai-ow: #f92672;
$monokai-w: #f8f8f2;
$monokai-mf: #ae81ff;
$monokai-mh: #ae81ff;
$monokai-mi: #ae81ff;
$monokai-mo: #ae81ff;
$monokai-sb: #e6db74;
$monokai-sc: #e6db74;
$monokai-sd: #e6db74;
$monokai-s2: #e6db74;
$monokai-se: #ae81ff;
$monokai-sh: #e6db74;
$monokai-si: #e6db74;
$monokai-sx: #e6db74;
$monokai-sr: #e6db74;
$monokai-s1: #e6db74;
$monokai-ss: #e6db74;
$monokai-bp: #f8f8f2;
$monokai-vc: #f8f8f2;
$monokai-vg: #f8f8f2;
$monokai-vi: #f8f8f2;
$monokai-il: #ae81ff;
$monokai-gu: #75715e;
$monokai-gd: #f92672;
$monokai-gi: #a6e22e;
.code.monokai { .code.monokai {
// Line numbers // Line numbers
.line-numbers, .line-numbers,
.diff-line-num { .diff-line-num {
background-color: #272822; background-color: $monokai-bg;
} }
.diff-line-num, .diff-line-num,
.diff-line-num a { .diff-line-num a {
color: rgba(255, 255, 255, 0.3); color: $monokai-line-num-color;
} }
// Code itself // Code itself
pre.code, pre.code,
.diff-line-num { .diff-line-num {
border-color: #555; border-color: $monokai-border;
} }
&, &,
pre.code, pre.code,
.line_holder .line_content { .line_holder .line_content {
background-color: #272822; background-color: $monokai-bg;
color: #f8f8f2; color: $monokai-text-color;
} }
// Diff line // Diff line
...@@ -32,18 +113,18 @@ ...@@ -32,18 +113,18 @@
td.diff-line-num.hll:not(.empty-cell), td.diff-line-num.hll:not(.empty-cell),
td.line_content.hll:not(.empty-cell) { td.line_content.hll:not(.empty-cell) {
background-color: #49483e; background-color: $monokai-line-empty-bg;
border-color: darken(#49483e, 15%); border-color: $monokai-line-empty-border;
} }
.diff-line-num.new, .diff-line-num.new,
.line_content.new { .line_content.new {
@include diff_background(rgba(166, 226, 46, 0.1), rgba(166, 226, 46, 0.15), #808080); @include diff_background($monokai-new-bg, $monokai-new-idiff, $monokai-diff-border);
} }
.diff-line-num.old, .diff-line-num.old,
.line_content.old { .line_content.old {
@include diff_background(rgba(254, 147, 140, 0.15), rgba(254, 147, 140, 0.2), #808080); @include diff_background($monokai-old-bg, $monokai-old-idiff, $monokai-diff-border);
} }
.line_content.match { .line_content.match {
...@@ -53,75 +134,75 @@ ...@@ -53,75 +134,75 @@
// highlight line via anchor // highlight line via anchor
pre .hll { pre .hll {
background-color: #49483e !important; background-color: $monokai-hll !important;
} }
// Search result highlight // Search result highlight
span.highlight_word { span.highlight_word {
background-color: #ffe792 !important; background-color: $monokai-highlight-bg !important;
color: #000 !important; color: $black !important;
} }
.hll { background-color: #49483e; } .hll { background-color: $monokai-hll; }
.c { color: #75715e; } /* Comment */ .c { color: $monokai-c; } /* Comment */
.err { color: #960050; background-color: #1e0010; } /* Error */ .err { color: $monokai-err-color; background-color: $monokai-err-bg; } /* Error */
.k { color: #66d9ef; } /* Keyword */ .k { color: $monokai-k; } /* Keyword */
.l { color: #ae81ff; } /* Literal */ .l { color: $monokai-l; } /* Literal */
.n { color: #f8f8f2; } /* Name */ .n { color: $monokai-n; } /* Name */
.o { color: #f92672; } /* Operator */ .o { color: $monokai-o; } /* Operator */
.p { color: #f8f8f2; } /* Punctuation */ .p { color: $monokai-p; } /* Punctuation */
.cm { color: #75715e; } /* Comment.Multiline */ .cm { color: $monokai-cm; } /* Comment.Multiline */
.cp { color: #75715e; } /* Comment.Preproc */ .cp { color: $monokai-cp; } /* Comment.Preproc */
.c1 { color: #75715e; } /* Comment.Single */ .c1 { color: $monokai-c1; } /* Comment.Single */
.cs { color: #75715e; } /* Comment.Special */ .cs { color: $monokai-cs; } /* Comment.Special */
.ge { font-style: italic; } /* Generic.Emph */ .ge { font-style: italic; } /* Generic.Emph */
.gs { font-weight: bold; } /* Generic.Strong */ .gs { font-weight: bold; } /* Generic.Strong */
.kc { color: #66d9ef; } /* Keyword.Constant */ .kc { color: $monokai-kc; } /* Keyword.Constant */
.kd { color: #66d9ef; } /* Keyword.Declaration */ .kd { color: $monokai-kd; } /* Keyword.Declaration */
.kn { color: #f92672; } /* Keyword.Namespace */ .kn { color: $monokai-kn; } /* Keyword.Namespace */
.kp { color: #66d9ef; } /* Keyword.Pseudo */ .kp { color: $monokai-kp; } /* Keyword.Pseudo */
.kr { color: #66d9ef; } /* Keyword.Reserved */ .kr { color: $monokai-kr; } /* Keyword.Reserved */
.kt { color: #66d9ef; } /* Keyword.Type */ .kt { color: $monokai-kt; } /* Keyword.Type */
.ld { color: #e6db74; } /* Literal.Date */ .ld { color: $monokai-ld; } /* Literal.Date */
.m { color: #ae81ff; } /* Literal.Number */ .m { color: $monokai-m; } /* Literal.Number */
.s { color: #e6db74; } /* Literal.String */ .s { color: $monokai-s; } /* Literal.String */
.na { color: #a6e22e; } /* Name.Attribute */ .na { color: $monokai-na; } /* Name.Attribute */
.nb { color: #f8f8f2; } /* Name.Builtin */ .nb { color: $monokai-nb; } /* Name.Builtin */
.nc { color: #a6e22e; } /* Name.Class */ .nc { color: $monokai-nc; } /* Name.Class */
.no { color: #66d9ef; } /* Name.Constant */ .no { color: $monokai-no; } /* Name.Constant */
.nd { color: #a6e22e; } /* Name.Decorator */ .nd { color: $monokai-nd; } /* Name.Decorator */
.ni { color: #f8f8f2; } /* Name.Entity */ .ni { color: $monokai-ni; } /* Name.Entity */
.ne { color: #a6e22e; } /* Name.Exception */ .ne { color: $monokai-ne; } /* Name.Exception */
.nf { color: #a6e22e; } /* Name.Function */ .nf { color: $monokai-nf; } /* Name.Function */
.nl { color: #f8f8f2; } /* Name.Label */ .nl { color: $monokai-nl; } /* Name.Label */
.nn { color: #f8f8f2; } /* Name.Namespace */ .nn { color: $monokai-nn; } /* Name.Namespace */
.nx { color: #a6e22e; } /* Name.Other */ .nx { color: $monokai-nx; } /* Name.Other */
.py { color: #f8f8f2; } /* Name.Property */ .py { color: $monokai-py; } /* Name.Property */
.nt { color: #f92672; } /* Name.Tag */ .nt { color: $monokai-nt; } /* Name.Tag */
.nv { color: #f8f8f2; } /* Name.Variable */ .nv { color: $monokai-nv; } /* Name.Variable */
.ow { color: #f92672; } /* Operator.Word */ .ow { color: $monokai-ow; } /* Operator.Word */
.w { color: #f8f8f2; } /* Text.Whitespace */ .w { color: $monokai-w; } /* Text.Whitespace */
.mf { color: #ae81ff; } /* Literal.Number.Float */ .mf { color: $monokai-mf; } /* Literal.Number.Float */
.mh { color: #ae81ff; } /* Literal.Number.Hex */ .mh { color: $monokai-mh; } /* Literal.Number.Hex */
.mi { color: #ae81ff; } /* Literal.Number.Integer */ .mi { color: $monokai-mi; } /* Literal.Number.Integer */
.mo { color: #ae81ff; } /* Literal.Number.Oct */ .mo { color: $monokai-mo; } /* Literal.Number.Oct */
.sb { color: #e6db74; } /* Literal.String.Backtick */ .sb { color: $monokai-sb; } /* Literal.String.Backtick */
.sc { color: #e6db74; } /* Literal.String.Char */ .sc { color: $monokai-sc; } /* Literal.String.Char */
.sd { color: #e6db74; } /* Literal.String.Doc */ .sd { color: $monokai-sd; } /* Literal.String.Doc */
.s2 { color: #e6db74; } /* Literal.String.Double */ .s2 { color: $monokai-s2; } /* Literal.String.Double */
.se { color: #ae81ff; } /* Literal.String.Escape */ .se { color: $monokai-se; } /* Literal.String.Escape */
.sh { color: #e6db74; } /* Literal.String.Heredoc */ .sh { color: $monokai-sh; } /* Literal.String.Heredoc */
.si { color: #e6db74; } /* Literal.String.Interpol */ .si { color: $monokai-si; } /* Literal.String.Interpol */
.sx { color: #e6db74; } /* Literal.String.Other */ .sx { color: $monokai-sx; } /* Literal.String.Other */
.sr { color: #e6db74; } /* Literal.String.Regex */ .sr { color: $monokai-sr; } /* Literal.String.Regex */
.s1 { color: #e6db74; } /* Literal.String.Single */ .s1 { color: $monokai-s1; } /* Literal.String.Single */
.ss { color: #e6db74; } /* Literal.String.Symbol */ .ss { color: $monokai-ss; } /* Literal.String.Symbol */
.bp { color: #f8f8f2; } /* Name.Builtin.Pseudo */ .bp { color: $monokai-bp; } /* Name.Builtin.Pseudo */
.vc { color: #f8f8f2; } /* Name.Variable.Class */ .vc { color: $monokai-vc; } /* Name.Variable.Class */
.vg { color: #f8f8f2; } /* Name.Variable.Global */ .vg { color: $monokai-vg; } /* Name.Variable.Global */
.vi { color: #f8f8f2; } /* Name.Variable.Instance */ .vi { color: $monokai-vi; } /* Name.Variable.Instance */
.il { color: #ae81ff; } /* Literal.Number.Integer.Long */ .il { color: $monokai-il; } /* Literal.Number.Integer.Long */
.gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */ .gu { color: $monokai-gu; } /* Generic.Subheading & Diff Unified/Comment? */
.gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */ .gd { color: $monokai-gd; } /* Generic.Deleted & Diff Deleted */
.gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */ .gi { color: $monokai-gi; } /* Generic.Inserted & Diff Inserted */
} }
/* https://github.com/aahan/pygments-github-style */ /* https://github.com/aahan/pygments-github-style */
/*
* White Syntax Colors
*/
$white-code-color: #333;
$white-highlight: #fafe3d;
$white-pre-hll-bg: #f8eec7;
$white-hll-bg: #f8f8f8;
$white-c: #998;
$white-err: #a61717;
$white-err-bg: #e3d2d2;
$white-cm: #998;
$white-cp: #999;
$white-c1: #998;
$white-cs: #999;
$white-gd: $black;
$white-gd-bg: #fdd;
$white-gd-x: $black;
$white-gd-x-bg: #faa;
$white-gr: #a00;
$white-gh: #999;
$white-gi: $black;
$white-gi-bg: #dfd;
$white-gi-x: $black;
$white-gi-x-bg: #afa;
$white-go: #888;
$white-gp: #555;
$white-gu: #800080;
$white-gt: #a00;
$white-kt: #458;
$white-m: #099;
$white-s: #d14;
$white-n: #333;
$white-na: teal;
$white-nb: #0086b3;
$white-nc: #458;
$white-no: teal;
$white-ni: purple;
$white-ne: #900;
$white-nf: #900;
$white-nn: #555;
$white-nt: navy;
$white-nv: teal;
$white-w: #bbb;
$white-mf: #099;
$white-mh: #099;
$white-mi: #099;
$white-mo: #099;
$white-sb: #d14;
$white-sc: #d14;
$white-sd: #d14;
$white-s2: #d14;
$white-se: #d14;
$white-sh: #d14;
$white-si: #d14;
$white-sx: #d14;
$white-sr: #009926;
$white-s1: #d14;
$white-ss: #990073;
$white-bp: #999;
$white-vc: teal;
$white-vg: teal;
$white-vi: teal;
$white-il: #099;
$white-gc-color: #999;
$white-gc-bg: #eaf2f5;
@mixin matchLine { @mixin matchLine {
color: $black-transparent; color: $black-transparent;
background-color: $match-line; background-color: $match-line;
...@@ -26,8 +93,8 @@ ...@@ -26,8 +93,8 @@
&, &,
pre.code, pre.code,
.line_holder .line_content { .line_holder .line_content {
background-color: #fff; background-color: $white-light;
color: #333; color: $white-code-color;
} }
// Diff line // Diff line
...@@ -83,75 +150,75 @@ ...@@ -83,75 +150,75 @@
// highlight line via anchor // highlight line via anchor
pre .hll { pre .hll {
background-color: #f8eec7 !important; background-color: $white-pre-hll-bg !important;
} }
// Search result highlight // Search result highlight
span.highlight_word { span.highlight_word {
background-color: #fafe3d !important; background-color: $white-highlight !important;
} }
.hll { background-color: #f8f8f8; } .hll { background-color: $white-hll-bg; }
.c { color: #998; font-style: italic; } .c { color: $white-c; font-style: italic; }
.err { color: #a61717; background-color: #e3d2d2; } .err { color: $white-err; background-color: $white-err-bg; }
.k { font-weight: bold; } .k { font-weight: bold; }
.o { font-weight: bold; } .o { font-weight: bold; }
.cm { color: #998; font-style: italic; } .cm { color: $white-cm; font-style: italic; }
.cp { color: #999; font-weight: bold; } .cp { color: $white-cp; font-weight: bold; }
.c1 { color: #998; font-style: italic; } .c1 { color: $white-c1; font-style: italic; }
.cs { color: #999; font-weight: bold; font-style: italic; } .cs { color: $white-cs; font-weight: bold; font-style: italic; }
.gd { color: #000; background-color: #fdd; } .gd { color: $white-gd; background-color: $white-gd-bg; }
.gd .x { color: #000; background-color: #faa; } .gd .x { color: $white-gd-x; background-color: $white-gd-x-bg; }
.ge { font-style: italic; } .ge { font-style: italic; }
.gr { color: #a00; } .gr { color: $white-gr; }
.gh { color: #999; } .gh { color: $white-gh; }
.gi { color: #000; background-color: #dfd; } .gi { color: $white-gi; background-color: $white-gi-bg; }
.gi .x { color: #000; background-color: #afa; } .gi .x { color: $white-gi-x; background-color: $white-gi-x-bg; }
.go { color: #888; } .go { color: $white-go; }
.gp { color: #555; } .gp { color: $white-gp; }
.gs { font-weight: bold; } .gs { font-weight: bold; }
.gu { color: #800080; font-weight: bold; } .gu { color: $white-gu; font-weight: bold; }
.gt { color: #a00; } .gt { color: $white-gt; }
.kc { font-weight: bold; } .kc { font-weight: bold; }
.kd { font-weight: bold; } .kd { font-weight: bold; }
.kn { font-weight: bold; } .kn { font-weight: bold; }
.kp { font-weight: bold; } .kp { font-weight: bold; }
.kr { font-weight: bold; } .kr { font-weight: bold; }
.kt { color: #458; font-weight: bold; } .kt { color: $white-kt; font-weight: bold; }
.m { color: #099; } .m { color: $white-m; }
.s { color: #d14; } .s { color: $white-s; }
.n { color: #333; } .n { color: $white-n; }
.na { color: teal; } .na { color: $white-na; }
.nb { color: #0086b3; } .nb { color: $white-nb; }
.nc { color: #458; font-weight: bold; } .nc { color: $white-nc; font-weight: bold; }
.no { color: teal; } .no { color: $white-no; }
.ni { color: purple; } .ni { color: $white-ni; }
.ne { color: #900; font-weight: bold; } .ne { color: $white-ne; font-weight: bold; }
.nf { color: #900; font-weight: bold; } .nf { color: $white-nf; font-weight: bold; }
.nn { color: #555; } .nn { color: $white-nn; }
.nt { color: navy; } .nt { color: $white-nt; }
.nv { color: teal; } .nv { color: $white-nv; }
.ow { font-weight: bold; } .ow { font-weight: bold; }
.w { color: #bbb; } .w { color: $white-w; }
.mf { color: #099; } .mf { color: $white-mf; }
.mh { color: #099; } .mh { color: $white-mh; }
.mi { color: #099; } .mi { color: $white-mi; }
.mo { color: #099; } .mo { color: $white-mo; }
.sb { color: #d14; } .sb { color: $white-sb; }
.sc { color: #d14; } .sc { color: $white-sc; }
.sd { color: #d14; } .sd { color: $white-sd; }
.s2 { color: #d14; } .s2 { color: $white-s2; }
.se { color: #d14; } .se { color: $white-se; }
.sh { color: #d14; } .sh { color: $white-sh; }
.si { color: #d14; } .si { color: $white-si; }
.sx { color: #d14; } .sx { color: $white-sx; }
.sr { color: #009926; } .sr { color: $white-sr; }
.s1 { color: #d14; } .s1 { color: $white-s1; }
.ss { color: #990073; } .ss { color: $white-ss; }
.bp { color: #999; } .bp { color: $white-bp; }
.vc { color: teal; } .vc { color: $white-vc; }
.vg { color: teal; } .vg { color: $white-vg; }
.vi { color: teal; } .vi { color: $white-vi; }
.il { color: #099; } .il { color: $white-il; }
.gc { color: #999; background-color: #eaf2f5; } .gc { color: $white-gc-color; background-color: $white-gc-bg; }
} }
@import "framework/variables";
// NOTE: This stylesheet is for the exclusive use of the `devise_mailer` layout // NOTE: This stylesheet is for the exclusive use of the `devise_mailer` layout
// used for Devise email templates, and _should not_ be included in any // used for Devise email templates, and _should not_ be included in any
// application stylesheets. // application stylesheets.
...@@ -46,7 +48,7 @@ table { ...@@ -46,7 +48,7 @@ table {
&#body { &#body {
background-color: $message-background-color; background-color: $message-background-color;
border: 1px solid #000; border: 1px solid $black;
border-radius: 4px; border-radius: 4px;
margin: 0 auto; margin: 0 auto;
width: 600px; width: 600px;
......
...@@ -10,8 +10,72 @@ ...@@ -10,8 +10,72 @@
// preference): plain class selectors, type (element name) selectors, or // preference): plain class selectors, type (element name) selectors, or
// explicit child selectors. // explicit child selectors.
/*
* Highlighted Diff Email Syntax Colors
*/
$highlighted-highlight-word: #fafe3d;
$highlighted-hll-bg: #f8f8f8;
$highlighted-c: #998;
$highlighted-err: #a61717;
$highlighted-err-bg: #e3d2d2;
$highlighted-cm: #998;
$highlighted-cp: #999;
$highlighted-c1: #998;
$highlighted-cs: #999;
$highlighted-gd: #000;
$highlighted-gd-bg: #fdd;
$highlighted-gd-x: #000;
$highlighted-gd-x-bg: #faa;
$highlighted-gr: #a00;
$highlighted-gh: #999;
$highlighted-gi: #000;
$highlighted-gi-bg: #dfd;
$highlighted-gi-x: #000;
$highlighted-gi-x-bg: #afa;
$highlighted-go: #888;
$highlighted-gp: #555;
$highlighted-gu: #800080;
$highlighted-gt: #a00;
$highlighted-kt: #458;
$highlighted-m: #099;
$highlighted-s: #d14;
$highlighted-n: #333;
$highlighted-na: teal;
$highlighted-nb: #0086b3;
$highlighted-nc: #458;
$highlighted-no: teal;
$highlighted-ni: purple;
$highlighted-ne: #900;
$highlighted-nf: #900;
$highlighted-nn: #555;
$highlighted-nt: navy;
$highlighted-nv: teal;
$highlighted-w: #bbb;
$highlighted-mf: #099;
$highlighted-mh: #099;
$highlighted-mi: #099;
$highlighted-mo: #099;
$highlighted-sb: #d14;
$highlighted-sc: #d14;
$highlighted-sd: #d14;
$highlighted-s2: #d14;
$highlighted-se: #d14;
$highlighted-sh: #d14;
$highlighted-si: #d14;
$highlighted-sx: #d14;
$highlighted-sr: #009926;
$highlighted-s1: #d14;
$highlighted-ss: #990073;
$highlighted-bp: #999;
$highlighted-vc: teal;
$highlighted-vg: teal;
$highlighted-vi: teal;
$highlighted-il: #099;
$highlighted-gc: #999;
$highlighted-gc-bg: #eaf2f5;
.code { .code {
background-color: #fff; background-color: $white-light;
font-family: monospace; font-family: monospace;
font-size: $code_font_size; font-size: $code_font_size;
-premailer-cellpadding: 0; -premailer-cellpadding: 0;
...@@ -75,69 +139,69 @@ pre { ...@@ -75,69 +139,69 @@ pre {
} }
span.highlight_word { span.highlight_word {
background-color: #fafe3d !important; background-color: $highlighted-highlight-word !important;
} }
.hll { background-color: #f8f8f8; } .hll { background-color: $highlighted-hll-bg; }
.c { color: #998; font-style: italic; } .c { color: $highlighted-c; font-style: italic; }
.err { color: #a61717; background-color: #e3d2d2; } .err { color: $highlighted-err; background-color: $highlighted-err-bg; }
.k { font-weight: bold; } .k { font-weight: bold; }
.o { font-weight: bold; } .o { font-weight: bold; }
.cm { color: #998; font-style: italic; } .cm { color: $highlighted-cm; font-style: italic; }
.cp { color: #999; font-weight: bold; } .cp { color: $highlighted-cp; font-weight: bold; }
.c1 { color: #998; font-style: italic; } .c1 { color: $highlighted-c1; font-style: italic; }
.cs { color: #999; font-weight: bold; font-style: italic; } .cs { color: $highlighted-cs; font-weight: bold; font-style: italic; }
.gd { color: #000; background-color: #fdd; } .gd { color: $highlighted-gd; background-color: $highlighted-gd-bg; }
.gd .x { color: #000; background-color: #faa; } .gd .x { color: $highlighted-gd; background-color: $highlighted-gd-x-bg; }
.ge { font-style: italic; } .ge { font-style: italic; }
.gr { color: #a00; } .gr { color: $highlighted-gr; }
.gh { color: #999; } .gh { color: $highlighted-gh; }
.gi { color: #000; background-color: #dfd; } .gi { color: $highlighted-gi; background-color: $highlighted-gi-bg; }
.gi .x { color: #000; background-color: #afa; } .gi .x { color: $highlighted-gi; background-color: $highlighted-gi-x-bg; }
.go { color: #888; } .go { color: $highlighted-go; }
.gp { color: #555; } .gp { color: $highlighted-gp; }
.gs { font-weight: bold; } .gs { font-weight: bold; }
.gu { color: #800080; font-weight: bold; } .gu { color: $highlighted-gu; font-weight: bold; }
.gt { color: #a00; } .gt { color: $highlighted-gt; }
.kc { font-weight: bold; } .kc { font-weight: bold; }
.kd { font-weight: bold; } .kd { font-weight: bold; }
.kn { font-weight: bold; } .kn { font-weight: bold; }
.kp { font-weight: bold; } .kp { font-weight: bold; }
.kr { font-weight: bold; } .kr { font-weight: bold; }
.kt { color: #458; font-weight: bold; } .kt { color: $highlighted-kt; font-weight: bold; }
.m { color: #099; } .m { color: $highlighted-m; }
.s { color: #d14; } .s { color: $highlighted-s; }
.n { color: #333; } .n { color: $highlighted-n; }
.na { color: teal; } .na { color: $highlighted-na; }
.nb { color: #0086b3; } .nb { color: $highlighted-nb; }
.nc { color: #458; font-weight: bold; } .nc { color: $highlighted-nc; font-weight: bold; }
.no { color: teal; } .no { color: $highlighted-no; }
.ni { color: purple; } .ni { color: $highlighted-ni; }
.ne { color: #900; font-weight: bold; } .ne { color: $highlighted-ne; font-weight: bold; }
.nf { color: #900; font-weight: bold; } .nf { color: $highlighted-nf; font-weight: bold; }
.nn { color: #555; } .nn { color: $highlighted-nn; }
.nt { color: navy; } .nt { color: $highlighted-nt; }
.nv { color: teal; } .nv { color: $highlighted-nv; }
.ow { font-weight: bold; } .ow { font-weight: bold; }
.w { color: #bbb; } .w { color: $highlighted-w; }
.mf { color: #099; } .mf { color: $highlighted-mf; }
.mh { color: #099; } .mh { color: $highlighted-mh; }
.mi { color: #099; } .mi { color: $highlighted-mi; }
.mo { color: #099; } .mo { color: $highlighted-mo; }
.sb { color: #d14; } .sb { color: $highlighted-sb; }
.sc { color: #d14; } .sc { color: $highlighted-sc; }
.sd { color: #d14; } .sd { color: $highlighted-sd; }
.s2 { color: #d14; } .s2 { color: $highlighted-s2; }
.se { color: #d14; } .se { color: $highlighted-se; }
.sh { color: #d14; } .sh { color: $highlighted-sh; }
.si { color: #d14; } .si { color: $highlighted-si; }
.sx { color: #d14; } .sx { color: $highlighted-sx; }
.sr { color: #009926; } .sr { color: $highlighted-sr; }
.s1 { color: #d14; } .s1 { color: $highlighted-s1; }
.ss { color: #990073; } .ss { color: $highlighted-ss; }
.bp { color: #999; } .bp { color: $highlighted-bp; }
.vc { color: teal; } .vc { color: $highlighted-vc; }
.vg { color: teal; } .vg { color: $highlighted-vg; }
.vi { color: teal; } .vi { color: $highlighted-vi; }
.il { color: #099; } .il { color: $highlighted-il; }
.gc { color: #999; background-color: #eaf2f5; } .gc { color: $highlighted-gc; background-color: $highlighted-gc-bg; }
@import "framework/variables";
img { img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
...@@ -5,12 +7,12 @@ img { ...@@ -5,12 +7,12 @@ img {
p.details { p.details {
font-style: italic; font-style: italic;
color: #777; color: $notify-details;
} }
.footer > p { .footer > p {
font-size: small; font-size: small;
color: #777; color: $notify-footer;
} }
pre.commit-message { pre.commit-message {
...@@ -21,10 +23,10 @@ pre.commit-message { ...@@ -21,10 +23,10 @@ pre.commit-message {
text-decoration: none; text-decoration: none;
> .new-file { > .new-file {
color: #090; color: $notify-new-file;
} }
> .deleted-file { > .deleted-file {
color: #b00; color: $notify-deleted-file;
} }
} }
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
.form-actions { .form-actions {
padding-left: 130px; padding-left: 130px;
background: #fff; background: $white-light;
} }
.visibility-levels { .visibility-levels {
......
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
background-color: $award-emoji-menu-bg; background-color: $award-emoji-menu-bg;
border: 1px solid $award-emoji-menu-border; border: 1px solid $award-emoji-menu-border;
border-radius: $border-radius-base; border-radius: $border-radius-base;
box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px $award-emoji-menu-shadow;
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
transform: scale(.2); transform: scale(.2);
......
...@@ -145,7 +145,7 @@ ...@@ -145,7 +145,7 @@
.board-blank-state { .board-blank-state {
height: calc(100% - 49px); height: calc(100% - 49px);
padding: $gl-padding; padding: $gl-padding;
background-color: #fff; background-color: $white-light;
} }
.board-blank-state-list { .board-blank-state-list {
...@@ -191,9 +191,9 @@ ...@@ -191,9 +191,9 @@
.card { .card {
position: relative; position: relative;
padding: 10px $gl-padding; padding: 10px $gl-padding;
background: #fff; background: $white-light;
border-radius: $border-radius-default; border-radius: $border-radius-default;
box-shadow: 0 1px 2px rgba(186, 186, 186, 0.5); box-shadow: 0 1px 2px $issue-boards-card-shadow;
list-style: none; list-style: none;
&:not(:last-child) { &:not(:last-child) {
......
.build-page { .build-page {
pre.trace { pre.trace {
background: #111; background: $builds-trace-bg;
color: #fff; color: $white-light;
font-family: $monospace_font; font-family: $monospace_font;
white-space: pre-wrap; white-space: pre-wrap;
overflow: auto; overflow: auto;
......
.ci-body { .ci-body {
.project-title { .project-title {
margin: 0; margin: 0;
color: #444; color: $common-gray-dark;
font-size: 20px; font-size: 20px;
line-height: 1.5; line-height: 1.5;
} }
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
.commit-author, .commit-author,
.commit-committer { .commit-committer {
display: block; display: block;
color: #999; color: $commit-committer-color;
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
} }
...@@ -113,17 +113,17 @@ ...@@ -113,17 +113,17 @@
overflow: hidden; // See https://gitlab.com/gitlab-org/gitlab-ce/issues/13987 overflow: hidden; // See https://gitlab.com/gitlab-org/gitlab-ce/issues/13987
.max-width-marker { .max-width-marker {
width: 72ch; width: 72ch;
color: rgba(0, 0, 0, 0.0); color: $commit-max-width-marker-color;
font-family: inherit; font-family: inherit;
left: $left; left: $left;
height: 100%; height: 100%;
border-right: 1px solid mix($input-border, white); border-right: 1px solid mix($input-border, $white-light);
position: absolute; position: absolute;
z-index: 1; z-index: 1;
} }
> textarea { > textarea {
background-color: rgba(0, 0, 0, 0.0); background-color: $commit-message-text-area-bg;
font-family: inherit; font-family: inherit;
padding-left: $left; padding-left: $left;
position: relative; position: relative;
......
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
.commit-header { .commit-header {
padding: 5px 10px; padding: 5px 10px;
background-color: $background-color; background-color: $background-color;
border-top: 1px solid #eee; border-top: 1px solid $gray-darker;
border-bottom: 1px solid #eee; border-bottom: 1px solid $gray-darker;
font-size: 14px; font-size: 14px;
&:first-child { &:first-child {
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
} }
&:not(:last-child) { &:not(:last-child) {
border-bottom: 1px solid #eee; border-bottom: 1px solid $gray-darker;
} }
a, a,
...@@ -201,7 +201,7 @@ ...@@ -201,7 +201,7 @@
.bar { .bar {
position: absolute; position: absolute;
height: 4px; height: 4px;
background-color: #ccc; background-color: $divergence-graph-bar-bg;
} }
.bar-behind { .bar-behind {
...@@ -218,7 +218,7 @@ ...@@ -218,7 +218,7 @@
padding-top: 6px; padding-top: 6px;
padding-bottom: 0; padding-bottom: 0;
font-size: 12px; font-size: 12px;
color: #333; color: $gl-title-color;
display: block; display: block;
} }
...@@ -239,6 +239,6 @@ ...@@ -239,6 +239,6 @@
height: 18px; height: 18px;
margin: 5px 0 0; margin: 5px 0 0;
float: left; float: left;
background-color: #ccc; background-color: $divergence-graph-separator-bg;
} }
} }
.well-confirmation { .well-confirmation {
margin-bottom: 20px; margin-bottom: 20px;
border-bottom: 1px solid #eee; border-bottom: 1px solid $gray-darker;
> h1, > h1,
h2, h2,
......
...@@ -141,9 +141,9 @@ ...@@ -141,9 +141,9 @@
.dismiss-icon { .dismiss-icon {
position: absolute; position: absolute;
right: $cycle-analytics-box-padding; right: $cycle-analytics-dismiss-icon-color;
cursor: pointer; cursor: pointer;
color: #b2b2b2; color: $cycle-analytics-dismiss-icon-color;
} }
.svg-container { .svg-container {
......
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
margin-bottom: 15px; margin-bottom: 15px;
i { i {
color: #888; color: $dashboard-project-access-icon-color;
} }
} }
......
.detail-page-header { .detail-page-header {
padding: $gl-padding-top 0; padding: $gl-padding-top 0;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
color: #5c5d5e; color: $gl-text-color-dark;
font-size: 16px; font-size: 16px;
line-height: 34px; line-height: 34px;
.author { .author {
color: #5c5d5e; color: $gl-text-color-dark;
} }
.identifier { .identifier {
color: #5c5d5e; color: $gl-text-color-dark;
} }
.issue_created_ago, .issue_created_ago,
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
background: $background-color; background: $background-color;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
padding: 10px 16px; padding: 10px 16px;
color: #555; color: $gl-diff-text-color;
z-index: 10; z-index: 10;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
display: block; display: block;
.file-mode { .file-mode {
color: #777; color: $file-mode-changed;
} }
} }
...@@ -49,8 +49,8 @@ ...@@ -49,8 +49,8 @@
.diff-content { .diff-content {
overflow: auto; overflow: auto;
overflow-y: hidden; overflow-y: hidden;
background: #fff; background: $white-light;
color: #333; color: $gl-title-color;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
.unfold { .unfold {
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
.file-mode-changed { .file-mode-changed {
padding: 10px; padding: 10px;
color: #777; color: $file-mode-changed;
} }
.suppressed-container { .suppressed-container {
...@@ -172,7 +172,7 @@ ...@@ -172,7 +172,7 @@
} }
.image { .image {
background: #ddd; background: $diff-image-bg;
text-align: center; text-align: center;
padding: 30px; padding: 30px;
...@@ -182,13 +182,13 @@ ...@@ -182,13 +182,13 @@
.frame { .frame {
display: inline-block; display: inline-block;
background-color: #fff; background-color: $white-light;
line-height: 0; line-height: 0;
img { img {
border: 1px solid #fff; border: 1px solid $white-light;
background-image: linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%, #e5e5e5 100%), background-image: 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, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%, #e5e5e5 100%); linear-gradient(45deg, $diff-image-img-bg 25%, transparent 25%, transparent 75%, $diff-image-img-bg 75%, $diff-image-img-bg 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%;
...@@ -206,7 +206,7 @@ ...@@ -206,7 +206,7 @@
.image-info { .image-info {
font-size: 12px; font-size: 12px;
margin: 5px 0 0; margin: 5px 0 0;
color: grey; color: $diff-image-info-color;
} }
.view.swipe { .view.swipe {
...@@ -220,7 +220,7 @@ ...@@ -220,7 +220,7 @@
.swipe-wrap { .swipe-wrap {
overflow: hidden; overflow: hidden;
border-left: 1px solid #999; border-left: 1px solid $diff-swipe-border;
position: absolute; position: absolute;
display: block; display: block;
top: 13px; top: 13px;
...@@ -350,7 +350,7 @@ ...@@ -350,7 +350,7 @@
.view-modes { .view-modes {
padding: 10px; padding: 10px;
text-align: center; text-align: center;
background: #eee; background: $gray-darker;
ul, ul,
li { li {
...@@ -361,8 +361,8 @@ ...@@ -361,8 +361,8 @@
} }
li { li {
color: grey; color: $diff-view-modes-color;
border-left: 1px solid #c1c1c1; border-left: 1px solid $diff-view-modes-border;
padding: 0 12px 0 16px; padding: 0 12px 0 16px;
cursor: pointer; cursor: pointer;
...@@ -380,7 +380,7 @@ ...@@ -380,7 +380,7 @@
} }
cursor: default; cursor: default;
color: #333; color: $gl-title-color;
} }
&.disabled { &.disabled {
......
...@@ -14,10 +14,10 @@ ...@@ -14,10 +14,10 @@
} }
.cancel-btn { .cancel-btn {
color: #b94a48; color: $editor-cancel-color;
&:hover { &:hover {
color: #b94a48; color: $editor-cancel-color;
} }
} }
......
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
border: none; border: none;
background: $gray-light; background: $gray-light;
border-radius: 0; border-radius: 0;
color: #777; color: $events-pre-color;
margin: 0 20px; margin: 0 20px;
overflow: hidden; overflow: hidden;
} }
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
} }
.event-note-icon { .event-note-icon {
color: #777; color: $events-pre-color;
float: left; float: left;
font-size: $gl-font-size; font-size: $gl-font-size;
line-height: 16px; line-height: 16px;
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
.event_icon { .event_icon {
position: relative; position: relative;
float: right; float: right;
border: 1px solid #eee; border: 1px solid $gray-darker;
padding: 5px; padding: 5px;
border-radius: 5px; border-radius: 5px;
background: $gray-light; background: $gray-light;
...@@ -170,7 +170,7 @@ ...@@ -170,7 +170,7 @@
.event-body { .event-body {
margin: 0; margin: 0;
border-left: 2px solid #ddd; border-left: 2px solid $events-body-border;
padding-left: 10px; padding-left: 10px;
} }
...@@ -186,4 +186,3 @@ ...@@ -186,4 +186,3 @@
display: none; display: none;
} }
} }
...@@ -2,15 +2,15 @@ ...@@ -2,15 +2,15 @@
border: 1px solid $border-color; border: 1px solid $border-color;
.controls { .controls {
color: #888; color: $project-network-controls-color;
font-size: 14px; font-size: 14px;
padding: 5px; padding: 5px;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
background: #eee; background: $gray-darker;
} }
.network-graph { .network-graph {
background: #fff; background: $white-light;
height: 500px; height: 500px;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
...@@ -20,15 +20,14 @@ ...@@ -20,15 +20,14 @@
.graphs { .graphs {
.graph-author-email { .graph-author-email {
float: right; float: right;
color: #777; color: $graph-author-email-color;
} }
.graph-additions { .graph-additions {
color: #4a2; color: $gl-text-green;
} }
.graph-deletions { .graph-deletions {
color: #d12f19; color: $gl-text-red;
} }
} }
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
li { li {
line-height: 24px; line-height: 24px;
color: #888; color: $document-index-color;
a { a {
margin-right: 3px; margin-right: 3px;
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
.shortcut-mappings { .shortcut-mappings {
font-size: 12px; font-size: 12px;
color: #555; color: $help-shortcut-mapping-color;
tbody:first-child tr:first-child { tbody:first-child tr:first-child {
padding-top: 0; padding-top: 0;
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
th { th {
padding-top: 15px; padding-top: 15px;
line-height: 1.5; line-height: 1.5;
color: #333; color: $help-shortcut-header-color;
text-align: left; text-align: left;
} }
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
.shortcut { .shortcut {
padding-right: 10px; padding-right: 10px;
color: #999; color: $help-shortcut-color;
text-align: right; text-align: right;
white-space: nowrap; white-space: nowrap;
} }
......
...@@ -233,7 +233,7 @@ ...@@ -233,7 +233,7 @@
width: 100%; width: 100%;
text-align: center; text-align: center;
padding-bottom: 10px; padding-bottom: 10px;
color: #999; color: $issuable-sidebar-color;
&:hover { &:hover {
color: $gl-gray; color: $gl-gray;
...@@ -249,12 +249,12 @@ ...@@ -249,12 +249,12 @@
} }
.avatar:hover { .avatar:hover {
border-color: #999; border-color: $issuable-avatar-hover-border;
} }
.btn-clipboard { .btn-clipboard {
border: none; border: none;
color: #999; color: $issuable-clipboard-color;
&:hover { &:hover {
background: transparent; background: transparent;
......
...@@ -82,18 +82,18 @@ ul.related-merge-requests > li { ...@@ -82,18 +82,18 @@ ul.related-merge-requests > li {
.merge-request, .merge-request,
.issue { .issue {
&.today { &.today {
background: #f3fff2; background: $issues-today-bg;
border-color: #e1e8d5; border-color: $issues-today-border;
} }
&.closed { &.closed {
background: $gray-light; background: $gray-light;
border-color: #e5e5e5; border-color: $issues-border;
} }
&.merged { &.merged {
background: $gray-light; background: $gray-light;
border-color: #e5e5e5; border-color: $issues-border;
} }
} }
......
...@@ -198,7 +198,7 @@ ...@@ -198,7 +198,7 @@
} }
.label-remove { .label-remove {
border-left: 1px solid rgba(0, 0, 0, .1); border-left: 1px solid $label-remove-border;
z-index: 3; z-index: 3;
} }
......
.ci-body { .ci-body {
.incorrect-syntax { .incorrect-syntax {
font-size: 19px; font-size: 19px;
color: red; color: $lint-incorrect-color;
} }
.correct-syntax { .correct-syntax {
font-size: 19px; font-size: 19px;
color: #47a447; color: $lint-correct-color;
} }
} }
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
p { p {
font-size: 18px; font-size: 18px;
color: #888; color: $login-brand-holder-color;
} }
h1:first-child { h1:first-child {
...@@ -174,7 +174,7 @@ ...@@ -174,7 +174,7 @@
.form-control { .form-control {
&:active, &:active,
&:focus { &:focus {
background-color: #fff; background-color: $white-light;
} }
} }
...@@ -195,7 +195,7 @@ ...@@ -195,7 +195,7 @@
h2 { h2 {
margin-top: 0; margin-top: 0;
font-size: 14px; font-size: 14px;
color: #a00; color: $login-devise-error-color;
} }
} }
} }
...@@ -254,4 +254,3 @@ ...@@ -254,4 +254,3 @@
} }
} }
} }
// Disabled to use the color map for creating color schemes
// scss-lint:disable ColorVariable
$colors: ( $colors: (
white_header_head_neutral : #e1fad7, white_header_head_neutral : #e1fad7,
white_line_head_neutral : #effdec, white_line_head_neutral : #effdec,
...@@ -98,6 +100,7 @@ $colors: ( ...@@ -98,6 +100,7 @@ $colors: (
solarized_dark_header_not_chosen : rgba(#839496, .25), solarized_dark_header_not_chosen : rgba(#839496, .25),
solarized_dark_line_not_chosen : rgba(#839496, .15) solarized_dark_line_not_chosen : rgba(#839496, .15)
); );
// scss-lint:enable ColorVariable
@mixin color-scheme($color) { @mixin color-scheme($color) {
...@@ -228,14 +231,15 @@ $colors: ( ...@@ -228,14 +231,15 @@ $colors: (
position: absolute; position: absolute;
right: 10px; right: 10px;
padding: 0; padding: 0;
color: #fff; outline: none;
color: $white-light;
width: 75px; // static width to make 2 buttons have same width width: 75px; // static width to make 2 buttons have same width
height: 19px; height: 19px;
} }
} }
.btn-success .fa-spinner { .btn-success .fa-spinner {
color: #fff; color: $white-light;
} }
.editor-wrap { .editor-wrap {
......
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
} }
.normal { .normal {
color: #5c5d5e; color: $gl-text-color-dark;
} }
.js-deployment-link { .js-deployment-link {
...@@ -143,7 +143,7 @@ ...@@ -143,7 +143,7 @@
} }
.mr-widget-footer { .mr-widget-footer {
border-top: 1px solid #eee; border-top: 1px solid $gray-darker;
} }
.ci-coverage { .ci-coverage {
......
...@@ -132,7 +132,7 @@ ...@@ -132,7 +132,7 @@
font-size: 15px; font-size: 15px;
.md-area { .md-area {
background-color: #fff; background-color: $white-light;
} }
} }
......
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
*/ */
@-webkit-keyframes targe3-note { @-webkit-keyframes targe3-note {
from { background: #fffff0; } from { background: $note-targe3-outside; }
50% { background: #ffffd3; } 50% { background: $note-targe3-inside; }
to { background: #fffff0; } to { background: $note-targe3-outside; }
} }
ul.notes { ul.notes {
...@@ -305,7 +305,7 @@ ul.notes { ...@@ -305,7 +305,7 @@ ul.notes {
&.notes_line2 { &.notes_line2 {
text-align: center; text-align: center;
padding: 10px 0; padding: 10px 0;
border-left: 1px solid #ddd !important; border-left: 1px solid $note-line2-border !important;
} }
&.notes_content { &.notes_content {
...@@ -471,7 +471,7 @@ ul.notes { ...@@ -471,7 +471,7 @@ ul.notes {
.add-diff-note { .add-diff-note {
margin-top: -4px; margin-top: -4px;
border-radius: 40px; border-radius: 40px;
background: #fff; background: $white-light;
padding: 4px; padding: 4px;
font-size: 16px; font-size: 16px;
color: $gl-link-color; color: $gl-link-color;
...@@ -484,7 +484,7 @@ ul.notes { ...@@ -484,7 +484,7 @@ ul.notes {
&:hover { &:hover {
background: $gl-info; background: $gl-info;
color: #fff; color: $white-light;
@include show-add-diff-note; @include show-add-diff-note;
} }
} }
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
.no-ssh-key-message, .no-ssh-key-message,
.project-limit-message { .project-limit-message {
background-color: #f28d35; background-color: $project-limit-message-bg;
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
&.static-namespace { &.static-namespace {
height: 35px; height: 35px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #e5e5e5; border: 1px solid $border-color;
} }
&+ .select2 a { &+ .select2 a {
...@@ -225,7 +225,7 @@ ...@@ -225,7 +225,7 @@
left: 0; left: 0;
margin-top: -6px; margin-top: -6px;
border-width: 7px 5px 7px 0; border-width: 7px 5px 7px 0;
border-right-color: #dce0e5; border-right-color: $count-arrow-border;
pointer-events: none; pointer-events: none;
} }
...@@ -240,7 +240,7 @@ ...@@ -240,7 +240,7 @@
left: 1px; left: 1px;
margin-top: -9px; margin-top: -9px;
border-width: 10px 7px 10px 0; border-width: 10px 7px 10px 0;
border-right-color: #fff; border-right-color: $white-light;
pointer-events: none; pointer-events: none;
} }
} }
...@@ -248,7 +248,7 @@ ...@@ -248,7 +248,7 @@
.count { .count {
@include btn-gray; @include btn-gray;
display: inline-block; display: inline-block;
background: white; background: $white-light;
border-radius: 2px; border-radius: 2px;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
...@@ -270,7 +270,7 @@ ...@@ -270,7 +270,7 @@
} }
&:hover { &:hover {
background: #fff; background: $white-light;
} }
} }
} }
...@@ -302,7 +302,7 @@ ...@@ -302,7 +302,7 @@
.option-descr { .option-descr {
margin-left: 29px; margin-left: 29px;
color: #54565b; color: $project-option-descr-color;
} }
} }
} }
...@@ -310,7 +310,7 @@ ...@@ -310,7 +310,7 @@
.save-project-loader { .save-project-loader {
margin-top: 50px; margin-top: 50px;
margin-bottom: 50px; margin-bottom: 50px;
color: #555; color: $save-project-loader-color;
} }
.transfer-project .select2-container { .transfer-project .select2-container {
...@@ -373,7 +373,7 @@ a.deploy-project-label { ...@@ -373,7 +373,7 @@ a.deploy-project-label {
> li + li::before { > li + li::before {
padding: 0 3px; padding: 0 3px;
color: #999; color: $project-breadcrumb-color;
} }
a { a {
...@@ -549,20 +549,20 @@ a.deploy-project-label { ...@@ -549,20 +549,20 @@ a.deploy-project-label {
} }
pre.light-well { pre.light-well {
border-color: #f1f1f1; border-color: $well-light-border;
} }
.git-empty { .git-empty {
margin: 0 7px 7px; margin: 0 7px 7px;
h5 { h5 {
color: #5c5d5e; color: $gl-text-color-dark;
} }
.light-well { .light-well {
border-radius: 2px; border-radius: 2px;
color: #5b6169; color: $well-light-text-color;
font-size: 13px; font-size: 13px;
line-height: 1.6em; line-height: 1.6em;
} }
...@@ -716,7 +716,7 @@ pre.light-well { ...@@ -716,7 +716,7 @@ pre.light-well {
.form-control { .form-control {
@extend .monospace; @extend .monospace;
background: #fff; background: $white-light;
font-size: 14px; font-size: 14px;
margin-left: -1px; margin-left: -1px;
cursor: auto; cursor: auto;
...@@ -726,17 +726,17 @@ pre.light-well { ...@@ -726,17 +726,17 @@ pre.light-well {
.cannot-be-merged, .cannot-be-merged,
.cannot-be-merged:hover { .cannot-be-merged:hover {
color: #e62958; color: $error-exclamation-point;
margin-top: 2px; margin-top: 2px;
} }
.private-forks-notice .private-fork-icon { .private-forks-notice .private-fork-icon {
i:nth-child(1) { i:nth-child(1) {
color: #2aa056; color: $project-private-forks-notice-odd;
} }
i:nth-child(2) { i:nth-child(2) {
color: #fff; color: $white-light;
} }
} }
......
.runner-state { .runner-state {
padding: 6px 12px; padding: 6px 12px;
margin-right: 10px; margin-right: 10px;
color: #fff; color: $white-light;
&.runner-state-shared { &.runner-state-shared {
background: #32b186; background: $runner-state-shared-bg;
} }
&.runner-state-specific { &.runner-state-specific {
background: #3498db; background: $runner-state-specific-bg;
} }
} }
.runner-status-online { .runner-status-online {
color: green; color: $runner-status-online-color;
} }
.runner-status-offline { .runner-status-offline {
color: gray; color: $runner-status-offline-color;
} }
.runner-status-paused { .runner-status-paused {
color: red; color: $runner-status-paused-color;
} }
.runner { .runner {
......
.tint-box { .tint-box {
background: #f3f3f3; background: $stat-graph-common-bg;
position: relative; position: relative;
margin-bottom: 10px; margin-bottom: 10px;
} }
.area { .area {
fill: #1db34f; fill: $stat-graph-area-fill;
fill-opacity: 0.5; fill-opacity: 0.5;
} }
.axis { .axis {
fill: #aaa; fill: $stat-graph-axis-fill;
font-size: 10px; font-size: 10px;
} }
...@@ -44,19 +44,19 @@ ...@@ -44,19 +44,19 @@
.person .spark { .person .spark {
display: block; display: block;
background: #f3f3f3; background: $stat-graph-common-bg;
width: 100%; width: 100%;
} }
.person .area-contributor { .person .area-contributor {
fill: #f17f49; fill: $stat-graph-orange-fill;
} }
} }
.selection rect { .selection rect {
fill: #333; fill: $stat-graph-selection-fill;
fill-opacity: 0.1; fill-opacity: 0.1;
stroke: #333; stroke: $stat-graph-selection-stroke;
stroke-width: 1px; stroke-width: 1px;
stroke-opacity: 0.4; stroke-opacity: 0.4;
shape-rendering: crispedges; shape-rendering: crispedges;
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
.ci-status { .ci-status {
padding: 2px 7px; padding: 2px 7px;
margin-right: 10px; margin-right: 10px;
border: 1px solid #eee; border: 1px solid $gray-darker;
white-space: nowrap; white-space: nowrap;
border-radius: 4px; border-radius: 4px;
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
background: $todo-alert-blue; background: $todo-alert-blue;
margin-left: -17px; margin-left: -17px;
font-size: 11px; font-size: 11px;
color: white; color: $white-light;
padding: 3px; padding: 3px;
padding-top: 1px; padding-top: 1px;
padding-bottom: 1px; padding-bottom: 1px;
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
word-wrap: break-word; word-wrap: break-word;
.md { .md {
color: #7f8fa4; color: $gl-grayish-blue;
font-size: $gl-font-size; font-size: $gl-font-size;
.label { .label {
...@@ -90,7 +90,7 @@ ...@@ -90,7 +90,7 @@
} }
p { p {
color: #5c5d5e; color: $gl-text-color-dark;
} }
} }
...@@ -102,7 +102,7 @@ ...@@ -102,7 +102,7 @@
border: none; border: none;
background: $gray-light; background: $gray-light;
border-radius: 0; border-radius: 0;
color: #777; color: $todo-body-pre-color;
margin: 0 20px; margin: 0 20px;
overflow: hidden; overflow: hidden;
} }
...@@ -146,7 +146,7 @@ ...@@ -146,7 +146,7 @@
.todo-body { .todo-body {
margin: 0; margin: 0;
border-left: 2px solid #ddd; border-left: 2px solid $todo-body-border;
padding-left: 10px; padding-left: 10px;
} }
} }
......
...@@ -7,11 +7,11 @@ ...@@ -7,11 +7,11 @@
.example { .example {
&::before { &::before {
content: "Example"; content: "Example";
color: #bbb; color: $ui-dev-kit-example-color;
} }
padding: 15px; padding: 15px;
border: 1px dashed #ddd; border: 1px dashed $ui-dev-kit-example-border;
margin-bottom: 15px; margin-bottom: 15px;
} }
} }
This diff is collapsed.
---
title: Enable ColorVariable in scss-lint
merge_request:
author: Sam Rose
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