diff options
Diffstat (limited to 'app/assets/stylesheets')
90 files changed, 2601 insertions, 1557 deletions
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index 7c7f991dd87..c82a9a2b9e3 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -1,4 +1,3 @@ -@import "framework/fonts"; @import "framework/variables"; @import "framework/mixins"; @import 'framework/tw_bootstrap_variables'; @@ -7,6 +6,7 @@ @import "framework/animations.scss"; @import "framework/avatar.scss"; +@import "framework/asciidoctor.scss"; @import "framework/blocks.scss"; @import "framework/buttons.scss"; @import "framework/calendar.scss"; @@ -41,3 +41,6 @@ @import "framework/blank"; @import "framework/wells.scss"; @import "framework/page-header.scss"; +@import "framework/awards.scss"; +@import "framework/images.scss"; +@import "framework/broadcast-messages"; diff --git a/app/assets/stylesheets/framework/asciidoctor.scss b/app/assets/stylesheets/framework/asciidoctor.scss new file mode 100644 index 00000000000..62493c32833 --- /dev/null +++ b/app/assets/stylesheets/framework/asciidoctor.scss @@ -0,0 +1,27 @@ +.admonitionblock td.icon { + width: 1%; + + [class^="fa icon-"] { + @extend .fa-2x; + } + + .icon-note { + @extend .fa-thumb-tack; + } + + .icon-tip { + @extend .fa-lightbulb-o; + } + + .icon-warning { + @extend .fa-exclamation-triangle; + } + + .icon-caution { + @extend .fa-fire; + } + + .icon-important { + @extend .fa-exclamation-circle; + } +} diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss index ad0d387067f..000e591e09c 100644 --- a/app/assets/stylesheets/framework/avatar.scss +++ b/app/assets/stylesheets/framework/avatar.scss @@ -8,7 +8,7 @@ float: left; margin-right: 15px; border-radius: $avatar_radius; - border: 1px solid rgba(0, 0, 0, .1); + border: 1px solid $avatar-border; &.s16 { @include avatar-size(16px, 6px); } &.s20 { @include avatar-size(20px, 7px); } &.s24 { @include avatar-size(24px, 8px); } @@ -80,6 +80,7 @@ border-radius: 0; border: none; height: auto; + width: 100%; margin: 0; align-self: center; } diff --git a/app/assets/stylesheets/pages/awards.scss b/app/assets/stylesheets/framework/awards.scss index 486ad16ea26..dece5c3202b 100644 --- a/app/assets/stylesheets/pages/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -1,7 +1,7 @@ .awards { .emoji-icon { - width: 19px; - height: 19px; + width: 20px; + height: 20px; } } @@ -15,7 +15,7 @@ background-color: $award-emoji-menu-bg; border: 1px solid $award-emoji-menu-border; 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; opacity: 0; transform: scale(.2); @@ -127,7 +127,7 @@ .award-control-icon { float: left; margin-right: 5px; - font-size: 19px; + font-size: 18px; } .award-control-icon-loading { @@ -136,5 +136,6 @@ .award-control-icon { color: $award-emoji-new-btn-icon-color; + margin-top: 1px; } } diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss index 540718197e0..a2fa2e7769b 100644 --- a/app/assets/stylesheets/framework/blank.scss +++ b/app/assets/stylesheets/framework/blank.scss @@ -32,14 +32,14 @@ .blank-state-title { margin-top: 0; margin-bottom: 5px; - font-size: 19px; + font-size: 18px; font-weight: normal; } .blank-state-text { margin-top: 0; margin-bottom: $gl-padding; - font-size: 15px; + font-size: 14px; > strong { font-weight: 600; diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index 77ae9e9a6e7..95c02499271 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -1,8 +1,3 @@ -.light-well { - background-color: $background-color; - padding: 15px; -} - .centered-light-block { text-align: center; color: $gl-gray; @@ -41,7 +36,7 @@ } &.white { - background-color: white; + background-color: $white-light; } &.top-block { @@ -158,7 +153,7 @@ p { padding: 0 $gl-padding; - color: #5c5d5e; + color: $gl-text-color-dark; } } @@ -274,6 +269,10 @@ } } + .emoji-icon { + display: inline-block; + } + @media(max-width: $screen-xs-max) { margin-top: 50px; text-align: center; diff --git a/app/assets/stylesheets/framework/broadcast-messages.scss b/app/assets/stylesheets/framework/broadcast-messages.scss new file mode 100644 index 00000000000..9b54fb94cdc --- /dev/null +++ b/app/assets/stylesheets/framework/broadcast-messages.scss @@ -0,0 +1,21 @@ +.broadcast-message { + @extend .alert-warning; + padding: 10px; + text-align: center; + + div, + p { + display: inline; + margin: 0; + + a { + color: inherit; + text-decoration: underline; + } + } +} + +.broadcast-message-preview { + @extend .broadcast-message; + margin-bottom: 20px; +} diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 4a9aa0f8717..1c7b2f4df7c 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -1,7 +1,7 @@ @mixin btn-default { border-radius: 3px; font-size: $gl-font-size; - font-weight: 500; + font-weight: 400; padding: $gl-vert-padding $gl-btn-padding; &:focus, @@ -15,7 +15,7 @@ @include btn-default; } -@mixin btn-outline($background, $text, $border, $hover-background, $hover-text, $hover-border) { +@mixin btn-outline($background, $text, $border, $hover-background, $hover-text, $hover-border, $active-background, $active-border) { background-color: $background; color: $text; border-color: $border; @@ -23,8 +23,14 @@ &:hover, &:focus { background-color: $hover-background; - color: $hover-text; border-color: $hover-border; + color: $hover-text; + } + + &:active { + background-color: $active-background; + border-color: $active-border; + color: $hover-text; } } @@ -62,31 +68,31 @@ } @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 { - @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 { - @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 { - @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 { - @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 { - @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-light, $gray-dark, $border-gray-dark, $gl-gray-dark); + @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-gray-dark); } @mixin btn-white { - @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-dark, $btn-white-active); + @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-dark, $gl-text-color); } @mixin btn-with-margin { @@ -139,11 +145,11 @@ &.btn-new, &.btn-create, &.btn-save { - @include btn-outline($white-light, $green-normal, $green-normal, $green-light, $white-light, $green-light); + @include btn-outline($white-light, $border-green-light, $border-green-light, $green-light, $white-light, $border-green-light, $green-normal, $border-green-normal); } &.btn-remove { - @include btn-outline($white-light, $red-normal, $red-normal, $red-light, $white-light, $red-light); + @include btn-outline($white-light, $border-red-light, $border-red-light, $red-light, $white-light, $border-red-light, $red-normal, $border-red-normal); } } @@ -165,11 +171,11 @@ } &.btn-close { - @include btn-outline($white-light, $orange-normal, $orange-normal, $orange-light, $white-light, $orange-light); + @include btn-outline($white-light, $border-orange-light, $border-orange-light, $orange-light, $white-light, $border-orange-light, $orange-normal, $border-orange-normal); } &.btn-spam { - @include btn-outline($white-light, $red-normal, $red-normal, $red-light, $white-light, $red-light); + @include btn-outline($white-light, $border-red-light, $border-red-light, $red-light, $white-light, $border-red-light, $red-normal, $border-red-normal); } &.btn-danger, @@ -199,7 +205,7 @@ } .fa-caret-down, - .fa-caret-up { + .fa-chevron-down { margin-left: 5px; } @@ -283,8 +289,8 @@ .active { box-shadow: $gl-btn-active-background; - border: 1px solid #c6cacf !important; - background-color: #e4e7ed !important; + border: 1px solid $border-white-dark !important; + background-color: $btn-active-gray-light !important; } } @@ -339,19 +345,19 @@ .btn-static { background-color: $background-color !important; - border: 1px solid lightgrey; + border: 1px solid $border-gray-light; cursor: default; &:active { - -moz-box-shadow: inset 0 0 0 white; - -webkit-box-shadow: inset 0 0 0 white; - box-shadow: inset 0 0 0 white; + -moz-box-shadow: inset 0 0 0 $white-light; + -webkit-box-shadow: inset 0 0 0 $white-light; + box-shadow: inset 0 0 0 $white-light; } } .btn-inverted { &-secondary { - @include btn-outline($white-light, $blue-normal, $blue-normal, $blue-light, $white-light, $blue-light); + @include btn-outline($white-light, $border-blue-light, $border-blue-light, $blue-light, $white-light, $border-blue-light, $blue-normal, $border-blue-normal); } } diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss index 8642b7530e2..ef921a8c6a9 100644 --- a/app/assets/stylesheets/framework/calendar.scss +++ b/app/assets/stylesheets/framework/calendar.scss @@ -2,7 +2,7 @@ padding-left: 0; padding-right: 0; - @media (min-width: $screen-sm-min) and (max-width: $screen-lg-min) { + @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) { overflow-x: scroll; } } @@ -28,13 +28,13 @@ .user-contrib-cell { &:hover { cursor: pointer; - stroke: #000; + stroke: $black; } } .user-contrib-text { font-size: 12px; - fill: #959494; + fill: $calendar-user-contrib-text; } .calendar-hint { diff --git a/app/assets/stylesheets/framework/callout.scss b/app/assets/stylesheets/framework/callout.scss index f3b6ad88ad6..2a100980aca 100644 --- a/app/assets/stylesheets/framework/callout.scss +++ b/app/assets/stylesheets/framework/callout.scss @@ -25,25 +25,25 @@ /* Variations */ .bs-callout-danger { - background-color: #fdf7f7; - border-color: #eed3d7; - color: #b94a48; + background-color: $callout-danger-bg; + border-color: $callout-danger-border; + color: $callout-danger-color; } .bs-callout-warning { - background-color: #faf8f0; - border-color: #faebcc; - color: #8a6d3b; + background-color: $callout-warning-bg; + border-color: $callout-warning-border; + color: $callout-warning-color; } .bs-callout-info { - background-color: #f4f8fa; - border-color: #bce8f1; - color: #34789a; + background-color: $callout-info-bg; + border-color: $callout-info-border; + color: $callout-info-color; } .bs-callout-success { - background-color: #dff0d8; - border-color: #5ca64d; - color: #3c763d; + background-color: $callout-success-bg; + border-color: $callout-success-border; + color: $callout-success-color; } diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index b24fce6f0c2..251e43d2edd 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -1,9 +1,9 @@ /** COLORS **/ -.cgray { color: $gl-gray; } -.clgray { color: #bbb; } -.cred { color: $gl-text-red; } -.cgreen { color: $gl-text-green; } -.cdark { color: #444; } +.cgray { color: $common-gray; } +.clgray { color: $common-gray-light; } +.cred { color: $common-red; } +.cgreen { color: $common-green; } +.cdark { color: $common-gray-dark; } /** COMMON CLASSES **/ .prepend-top-0 { margin-top: 0; } @@ -28,12 +28,12 @@ .center { text-align: center; } .underlined-link { text-decoration: underline; } -.hint { font-style: italic; color: #999; } -.light { color: $gl-gray; } +.hint { font-style: italic; color: $hint-color; } +.light { color: $common-gray; } .slead { - color: $gl-gray; - font-size: 15px; + color: $common-gray; + font-size: 14px; margin-bottom: 12px; font-weight: normal; line-height: 24px; @@ -52,10 +52,10 @@ pre { } &.well-pre { - border: 1px solid #eee; + border: 1px solid $well-pre-bg; background: $gray-light; border-radius: 0; - color: #555; + color: $well-pre-color; } } @@ -87,14 +87,14 @@ table a code { .loading { margin: 20px auto; height: 40px; - color: #555; + color: $loading-color; font-size: 32px; text-align: center; } span.update-author { display: block; - color: #999; + color: $update-author-color; font-weight: normal; font-style: italic; @@ -105,7 +105,7 @@ span.update-author { } .user-mention { - color: #2fa0bb; + color: $user-mention-color; font-weight: bold; } @@ -114,7 +114,7 @@ span.update-author { } p.time { - color: #999; + color: $time-color; font-size: 90%; margin: 30px 3px 3px 2px; } @@ -150,7 +150,7 @@ li.note { .project_member_show { td:first-child { - color: #aaa; + color: $project-member-show-color; } } @@ -176,7 +176,7 @@ li.note { margin-top: 40px; pre { - background: white; + background: $white-light; border: none; font-size: 12px; } @@ -184,12 +184,12 @@ li.note { .error-message { padding: 10px; - background: #c67; + background: $error-bg; margin: 0; - color: #fff; + color: $white-light; a { - color: #fff; + color: $white-light; text-decoration: underline; } } @@ -197,22 +197,22 @@ li.note { .browser-alert { padding: 10px; text-align: center; - background: #c67; - color: #fff; + background: $error-bg; + color: $white-light; font-weight: bold; a { - color: #fff; + color: $white-light; text-decoration: underline; } } .warning_message { - border-left: 4px solid #ed9; - color: #b90; + border-left: 4px solid $warning-message-border; + color: $warning-message-color; padding: 10px; margin-bottom: 10px; - background: #ffffe6; + background: $warning-message-bg; padding-left: 20px; &.centered { @@ -222,7 +222,7 @@ li.note { .gitlab-promo { a { - color: #aaa; + color: $gl-promo-color; margin-right: 30px; } } @@ -245,7 +245,7 @@ li.note { position: relative; top: 2px; left: 5px; - color: #666; + color: $control-group-descr-color; } } } @@ -255,6 +255,7 @@ img.emoji { height: 20px; vertical-align: top; width: 20px; + margin-top: 1px; } .chart { @@ -270,7 +271,7 @@ img.emoji { table { td.permission-x { - background: #d9edf7 !important; + background: $table-permission-x-bg !important; text-align: center; } } @@ -323,13 +324,13 @@ table { .username { font-size: 18px; - color: #666; + color: $username-color; margin-top: 8px; } .description { font-size: $gl-font-size; - color: #666; + color: $description-color; margin-top: 8px; } } @@ -339,7 +340,7 @@ table { .profiler-button, .profiler-controls { - border-color: #eee !important; + border-color: $profiler-border !important; } } @@ -379,7 +380,9 @@ table { border-top: 1px solid $border-color; } -.hide-bottom-border { border-bottom: none !important; } +.hide-bottom-border { + border-bottom: none !important; +} .gl-accessibility { &:focus { @@ -396,3 +399,13 @@ table { z-index: 1; } } + +.str-truncated { + &-60 { + @include str-truncated(60%); + } + + &-100 { + @include str-truncated(100%); + } +} diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 583c17e4a83..d5914b900e2 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -8,6 +8,12 @@ } } +@mixin chevron-active { + .fa-chevron-down { + color: $dropdown-toggle-hover-icon-color; + } +} + .open { .dropdown-menu, .dropdown-menu-nav { @@ -19,53 +25,32 @@ } } + .dropdown-toggle, .dropdown-menu-toggle { + @include chevron-active; border-color: $dropdown-toggle-hover-border-color; - - .fa { - color: $dropdown-toggle-hover-icon-color; - } } } -.dropdown-menu-toggle { - position: relative; - width: 160px; - padding: 6px 20px 6px 10px; +.dropdown-toggle { + padding: 6px 8px 6px 10px; background-color: $dropdown-toggle-bg; color: $dropdown-toggle-color; - font-size: 15px; + font-size: 14px; text-align: left; border: 1px solid $border-color; border-radius: $border-radius-base; - text-overflow: ellipsis; white-space: nowrap; - overflow: hidden; - .fa { - position: absolute; - top: 10px; - right: 8px; - color: $dropdown-toggle-icon-color; - - &.fa-spinner { - font-size: 16px; - margin-top: -8px; - } + &[disabled] { + background-color: $input-bg-disabled; + cursor: not-allowed; } &.no-outline { outline: 0; } - &:hover, { - border-color: $dropdown-toggle-hover-border-color; - - .fa { - color: $dropdown-toggle-hover-icon-color; - } - } - &.large { width: 200px; } @@ -86,6 +71,51 @@ max-width: 100%; padding-right: 25px; } + + .fa { + color: $dropdown-toggle-icon-color; + } + + .fa-chevron-down { + font-size: $dropdown-chevron-size; + position: relative; + top: -3px; + margin-left: 5px; + } + + &:hover { + @include chevron-active; + border-color: $dropdown-toggle-hover-border-color; + } + + &:focus:active { + @include chevron-active; + border-color: $dropdown-toggle-active-border-color; + } +} + +.dropdown-menu-toggle { + @extend .dropdown-toggle; + padding-right: 20px; + position: relative; + width: 160px; + text-overflow: ellipsis; + overflow: hidden; + + .fa { + position: absolute; + + &.fa-spinner { + font-size: 16px; + margin-top: -8px; + } + } + + .fa-chevron-down { + position: absolute; + top: 11px; + right: 8px; + } } .dropdown-menu, @@ -98,7 +128,7 @@ width: 240px; margin-top: 2px; margin-bottom: 0; - font-size: 15px; + font-size: 14px; font-weight: normal; padding: 8px 0; background-color: $dropdown-bg; @@ -351,7 +381,7 @@ position: absolute; top: 10px; right: 20px; - color: #c7c7c7; + color: $dropdown-input-fa-color; font-size: 12px; pointer-events: none; } @@ -504,7 +534,7 @@ .ui-datepicker-calendar { .ui-state-hover, .ui-state-active { - color: #fff; + color: $white-light; border: 0; } } @@ -564,7 +594,7 @@ .ui-datepicker-title { color: $gl-gray; - font-size: 15px; + font-size: 14px; line-height: 1; font-weight: normal; } diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index f49d7b92a00..ab0b81f77f7 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -59,10 +59,10 @@ } .file-content { - background: #fff; + background: $white-light; &.image_file { - background: #eee; + background: $file-image-bg; text-align: center; img { @@ -84,8 +84,8 @@ } &.blob-no-preview { - background: #eee; - text-shadow: 0 1px 2px #fff; + background: $blob-bg; + text-shadow: 0 1px 2px $white-light; padding: 100px 0; } @@ -99,7 +99,7 @@ } tr { - border-bottom: 1px solid #eee; + border-bottom: 1px solid $blame-border; } td { @@ -120,7 +120,7 @@ td.line-numbers { float: none; - border-left: 1px solid #ddd; + border-left: 1px solid $blame-line-numbers-border; i { float: none; @@ -134,7 +134,7 @@ } &.logs { - background: #eee; + background: $logs-bg; max-height: 700px; overflow-y: auto; @@ -143,14 +143,14 @@ padding: 10px 0; border-left: 1px solid $border-color; margin-bottom: 0; - background: white; + background: $white-light; li { - color: #888; + color: $logs-li-color; p { margin: 0; - color: #333; + color: $logs-p-color; line-height: 24px; padding-left: 10px; } diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss index a9006de6d3e..eadb9409fee 100644 --- a/app/assets/stylesheets/framework/flash.scss +++ b/app/assets/stylesheets/framework/flash.scss @@ -38,7 +38,7 @@ } } -@media (max-width: $screen-md-min) { +@media (max-width: $screen-sm-max) { ul.notes { .flash-container.timeline-content { margin-left: 0; diff --git a/app/assets/stylesheets/framework/fonts.scss b/app/assets/stylesheets/framework/fonts.scss deleted file mode 100644 index 5f9685bc71a..00000000000 --- a/app/assets/stylesheets/framework/fonts.scss +++ /dev/null @@ -1,45 +0,0 @@ -// Disabling "SpaceAfterPropertyColon" linter because the linter doesn't like -// the way the `src` property is formatted in this file. -// scss-lint:disable SpaceAfterPropertyColon - -/* latin-ext */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 300; - src: - local('Source Sans Pro Light'), - local('SourceSansPro-Light'), - font-url('SourceSansPro-Light.ttf.woff2') format('woff2'), - font-url('SourceSansPro-Light.ttf.woff') format('woff'); -} -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 400; - src: - local('Source Sans Pro'), - local('SourceSansPro-Regular'), - font-url('SourceSansPro-Regular.ttf.woff2') format('woff2'), - font-url('SourceSansPro-Regular.ttf.woff') format('woff'); -} -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 600; - src: - local('Source Sans Pro Semibold'), - local('SourceSansPro-Semibold'), - font-url('SourceSansPro-Semibold.ttf.woff2') format('woff2'), - font-url('SourceSansPro-Semibold.ttf.woff') format('woff'); -} -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 700; - src: - local('Source Sans Pro Bold'), - local('SourceSansPro-Bold'), - font-url('SourceSansPro-Bold.ttf.woff2') format('woff2'), - font-url('SourceSansPro-Bold.ttf.woff') format('woff'); -} diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index e83a1f7ad68..25a2b38baaa 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -7,9 +7,9 @@ input { } input[type='text'].danger { - background: #f2dede!important; - border-color: #d66; - text-shadow: 0 1px 1px #fff; + background: $input-danger-bg !important; + border-color: $input-danger-border; + text-shadow: 0 1px 1px $white-light; } .datetime-controls { @@ -98,7 +98,7 @@ label { } } - @media(max-width: $screen-sm-min) { + @media(max-width: $screen-xs-max) { padding: 0 $gl-padding; .control-label, @@ -159,7 +159,7 @@ label { } .input-group-addon { - background-color: #f7f8fa; + background-color: $input-group-addon-bg; } .input-group-addon:not(:first-child):not(:last-child) { @@ -181,7 +181,7 @@ label { border: 1px solid $green-normal; &: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; } } @@ -190,7 +190,7 @@ label { border: 1px solid $red-normal; &: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; } } diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss index 91ab1503439..5cd242af91d 100644 --- a/app/assets/stylesheets/framework/gitlab-theme.scss +++ b/app/assets/stylesheets/framework/gitlab-theme.scss @@ -21,7 +21,6 @@ background: $color-darker; } - .sidebar-header, .sidebar-action-buttons { color: $color-light; background-color: lighten($color-darker, 5%); @@ -86,37 +85,57 @@ } $theme-charcoal: #3d454d; +$theme-charcoal-light: #485157; $theme-charcoal-dark: #383f45; $theme-charcoal-text: #b9bbbe; +$theme-blue-light: #becde9; $theme-blue: #2980b9; +$theme-blue-dark: #1970a9; +$theme-blue-darker: #096099; + +$theme-graphite-lighter: #ccc; +$theme-graphite-light: #777; $theme-graphite: #666; +$theme-graphite-dark: #555; + +$theme-gray-light: #979797; $theme-gray: #373737; +$theme-gray-dark: #272727; +$theme-gray-darker: #222; + +$theme-green-light: #adc; $theme-green: #019875; +$theme-green-dark: #018865; +$theme-green-darker: #017855; + +$theme-violet-light: #98c; $theme-violet: #548; +$theme-violet-dark: #436; +$theme-violet-darker: #325; body { &.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 { - @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 { - @include gitlab-theme(#ccc, #777, $theme-graphite, #555); + @include gitlab-theme($theme-graphite-lighter, $theme-graphite-light, $theme-graphite, $theme-graphite-dark); } &.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 { - @include gitlab-theme(#adc, $theme-green, #018865, #017855); + @include gitlab-theme($theme-green-light, $theme-green, $theme-green-dark, $theme-green-darker); } &.ui_violet { - @include gitlab-theme(#98c, $theme-violet, #436, #325); + @include gitlab-theme($theme-violet-light, $theme-violet, $theme-violet-dark, $theme-violet-darker); } } diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 16ecf466931..cc2286038c0 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -8,7 +8,7 @@ header { &.navbar-empty { height: $header-height; - background: #fff; + background: $white-light; border-bottom: 1px solid $btn-gray-hover; .center-logo { @@ -71,12 +71,12 @@ header { } .fa-caret-down { - font-size: 15px; + font-size: 14px; } } .navbar-toggle { - color: #666; + color: $nav-toggle-gray; margin: 6px 0; border-radius: 0; position: absolute; @@ -156,7 +156,7 @@ header { position: relative; padding-right: 20px; margin: 0; - font-size: 19px; + font-size: 18px; max-width: 385px; display: inline-block; line-height: $header-height; @@ -228,7 +228,7 @@ header { } .page-sidebar-pinned.right-sidebar-expanded { - @media (max-width: $screen-lg-min) { + @media (max-width: $screen-md-max) { .header-content .title { width: 300px; } diff --git a/app/assets/stylesheets/pages/appearances.scss b/app/assets/stylesheets/framework/images.scss index 878f44116ba..878f44116ba 100644 --- a/app/assets/stylesheets/pages/appearances.scss +++ b/app/assets/stylesheets/framework/images.scss diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss index ff6f316d576..44834a84234 100644 --- a/app/assets/stylesheets/framework/issue_box.scss +++ b/app/assets/stylesheets/framework/issue_box.scss @@ -20,7 +20,7 @@ display: block; float: left; margin-right: 10px; - color: #fff; + color: $white-light; font-size: $gl-font-size; line-height: 25px; @@ -37,10 +37,10 @@ } &.status-box-expired { - background: #cea61b; + background-color: $issue-status-expired; } &.status-box-upcoming { - background: #8f8f8f; + background: $issue-box-upcoming-bg; } } diff --git a/app/assets/stylesheets/framework/jquery.scss b/app/assets/stylesheets/framework/jquery.scss index 30a5b837d69..18f2f316f02 100644 --- a/app/assets/stylesheets/framework/jquery.scss +++ b/app/assets/stylesheets/framework/jquery.scss @@ -4,13 +4,13 @@ &.ui-datepicker, &.ui-datepicker-inline { - border: 1px solid #ddd; + border: 1px solid $jq-ui-border; padding: 10px; width: 270px; .ui-datepicker-header { - background: #fff; - border-color: #ddd; + background: $white-light; + border-color: $jq-ui-border; .ui-datepicker-prev, .ui-datepicker-next { @@ -39,7 +39,7 @@ } &.ui-autocomplete { - border-color: #ddd; + border-color: $jq-ui-border; padding: 0; margin-top: 2px; z-index: 1001; @@ -50,9 +50,9 @@ } .ui-state-default { - border: 1px solid #fff; - background: #fff; - color: #777; + border: 1px solid $white-light; + background: $white-light; + color: $jq-ui-default-color; } .ui-state-highlight { @@ -66,7 +66,7 @@ .ui-state-focus { border: 1px solid $gl-primary; background: $gl-primary; - color: #fff; + color: $white-light; } } } diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index 7baa4296abf..dfaf2f7f1d3 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -6,7 +6,7 @@ html { body { &.navless { - background-color: white !important; + background-color: $white-light !important; } } diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index bc0610cc417..ed4b60faf92 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -11,8 +11,8 @@ > li { padding: 10px 15px; min-height: 20px; - border-bottom: 1px solid #eee; - border-bottom: 1px solid rgba(0, 0, 0, 0.05); + border-bottom: 1px solid $list-border-light; + border-bottom: 1px solid $list-border; &::after { content: " "; @@ -21,7 +21,7 @@ } &.disabled { - color: #888; + color: $list-text-disabled-color; } &.unstyled { @@ -31,9 +31,9 @@ } &.warning-row { - background-color: #fcf8e3; - border-color: #faebcc; - color: #8a6d3b; + background-color: $list-warning-row-bg; + border-color: $list-warning-row-border; + color: $list-warning-row-color; } &.smoke { background-color: $background-color; } @@ -106,13 +106,13 @@ ul.task-list { } } +// Generic content list ul.content-list { @include basic-list; - margin: 0; padding: 0; - > li { + li { border-color: $table-border-color; font-size: $list-font-size; color: $list-text-color; @@ -193,6 +193,41 @@ ul.content-list { } } +// Content list using flexbox +.flex-list { + .flex-row { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + white-space: nowrap; + } + + .row-main-content { + flex: 1 1 auto; + overflow: hidden; + padding-right: 8px; + } + + .row-title { + font-weight: 600; + } + + .row-second-line { + display: block; + } + + .dropdown { + .btn-block { + margin-bottom: 0; + line-height: inherit; + } + } + + .label-default { + color: $btn-transparent-color; + } +} + .panel > .content-list > li { padding: $gl-padding-top $gl-padding; diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index 42087c91530..59a30d31ac7 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -56,16 +56,9 @@ .md-header { .nav-links { - .active { - a { - border-bottom-color: #000; - } - } - a { padding-top: 0; line-height: 19px; - border-bottom: 1px solid $border-color; &.btn.btn-xs { padding: 2px 5px; @@ -80,7 +73,7 @@ } .referenced-users { - color: #4c4e54; + color: $gl-header-color; padding-top: 10px; } @@ -92,8 +85,8 @@ .markdown-area { border-radius: 0; - background: #fff; - border: 1px solid #ddd; + background: $white-light; + border: 1px solid $md-area-border; min-height: 140px; max-height: 500px; padding: 5px; @@ -115,7 +108,7 @@ hr { // 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; } @@ -142,7 +135,7 @@ .toolbar-btn { float: left; padding: 0 5px; - color: #959494; + color: $note-toolbar-color; background: transparent; border: 0; outline: 0; diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index f84ca36d10f..4f2ac77f228 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -24,7 +24,7 @@ @include clearfix; padding: 10px 0; - border-bottom: 1px solid #eee; + border-bottom: 1px solid $list-border-light; display: block; margin: 0; @@ -67,8 +67,8 @@ } @mixin dark-diff-match-line { - color: rgba(255, 255, 255, 0.3); - background: rgba(255, 255, 255, 0.1); + color: $dark-diff-match-bg; + background: $dark-diff-match-color; } @mixin webkit-prefix($property, $value) { diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss index 9391661a595..abfdd7a759d 100644 --- a/app/assets/stylesheets/framework/mobile.scss +++ b/app/assets/stylesheets/framework/mobile.scss @@ -133,9 +133,9 @@ right: 0; top: 30%; padding: 5px 15px; - background: #eee; + background: $show-aside-bg; font-size: 20px; - color: #777; + color: $show-aside-color; z-index: 100; - box-shadow: 0 1px 2px #ddd; + box-shadow: 0 1px 2px $show-aside-shadow; } diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss index ce864c2de5e..ea77348633d 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -49,26 +49,37 @@ padding: $gl-btn-padding; padding-bottom: 11px; margin-bottom: -1px; - font-size: 15px; + font-size: 14px; line-height: 28px; - color: #959494; + color: $note-toolbar-color; border-bottom: 2px solid transparent; &:hover, &:active, &:focus { text-decoration: none; + border-bottom: 2px solid $gray-darkest; + color: $black; + + .badge { + color: $black; + } } } &.active a { border-bottom: 2px solid $link-underline-blue; color: $black; + font-weight: 600; + + .badge { + color: $black; + } } .badge { font-weight: normal; - background-color: #eee; + background-color: $nav-badge-bg; color: $btn-transparent-color; vertical-align: baseline; } @@ -85,14 +96,20 @@ li { + &.active a { + border-bottom: none; + color: $link-underline-blue; + } + a { margin: 0; padding: 11px 10px 9px; - } - &.active a { - border-bottom: none; - color: $link-underline-blue; + &:hover, + &:active, + &:focus { + border-bottom: none; + } } } } @@ -110,7 +127,7 @@ line-height: 28px; /* Small devices (phones, tablets, 768px and lower) */ - @media (max-width: $screen-sm-min) { + @media (max-width: $screen-xs-max) { width: 100%; } } @@ -255,6 +272,16 @@ width: auto; } } + + &.multi-line { + .nav-text { + line-height: 20px; + } + + .nav-controls { + padding: 17px 0; + } + } } .layout-nav { @@ -310,37 +337,9 @@ height: 51px; li { - a { padding-top: 10px; } - - a, - i { - color: $layout-link-gray; - } - - &.active { - - a, - i { - color: $black; - } - - svg { - path, - polygon { - fill: $black; - } - } - } - - &:hover { - a, - i { - color: $black; - } - } } } } diff --git a/app/assets/stylesheets/framework/pagination.scss b/app/assets/stylesheets/framework/pagination.scss index cb2c351c368..b37c1d0d670 100644 --- a/app/assets/stylesheets/framework/pagination.scss +++ b/app/assets/stylesheets/framework/pagination.scss @@ -43,7 +43,7 @@ /** * Small screen pagination */ -@media (max-width: $screen-xs) { +@media (max-width: $screen-xs-min) { .gl-pagination { .pagination li a { padding: 6px 10px; @@ -62,7 +62,7 @@ /** * Medium screen pagination */ -@media (min-width: $screen-xs) and (max-width: $screen-md-max) { +@media (min-width: $screen-xs-min) and (max-width: $screen-md-max) { .gl-pagination { .page { display: none; diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss index 920ce249b9a..fde1431b13e 100644 --- a/app/assets/stylesheets/framework/selects.scss +++ b/app/assets/stylesheets/framework/selects.scss @@ -6,7 +6,7 @@ .select2-container, .select2-container.select2-drop-above { .select2-choice { - background: #fff; + background: $white-light; border-color: $input-border; height: 35px; padding: $gl-vert-padding $gl-input-padding; @@ -47,7 +47,7 @@ } .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: none; min-width: 175px; @@ -59,7 +59,7 @@ } .select2-drop { - color: #7f8fa4; + color: $gl-grayish-blue; } .select2-highlighted { @@ -156,7 +156,7 @@ .select2-search input { padding: 2px 25px 2px 5px; - background: #fff image-url('select2.png'); + background: $white-light image-url('select2.png'); background-repeat: no-repeat; background-position: right 0 bottom 6px; border: 1px solid $input-border; @@ -169,7 +169,7 @@ } .select2-search input.select2-active { - background-color: #fff; + background-color: $white-light; background-image: image-url('select2-spinner.gif') !important; background-repeat: no-repeat; background-position: right 5px center !important; @@ -206,7 +206,7 @@ .select2-highlighted { .group-result { .group-path { - color: #fff; + color: $white-light; } } } @@ -221,7 +221,7 @@ } .group-path { - color: #999; + color: $group-path-color; } } @@ -241,7 +241,7 @@ .namespace-result { .namespace-kind { - color: #aaa; + color: $namespace-kind-color; font-weight: normal; } diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 44c445c0543..0aa609b8dd5 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -36,7 +36,7 @@ transition: padding $sidebar-transition-duration; .container-fluid { - background: #fff; + background: $white-light; padding: 0 $gl-padding; &.container-blank { @@ -59,11 +59,6 @@ padding: 0 !important; } - .sidebar-header { - padding: 11px 22px 12px; - font-size: 20px; - } - li { &.separate-item { padding-top: 10px; @@ -220,7 +215,7 @@ header.header-sidebar-pinned { padding-right: 0; @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { - &:not(.build-sidebar) { + &:not(.build-sidebar):not(.wiki-sidebar) { padding-right: $sidebar_collapsed_width; } } diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss index 9a90d3794fd..5d0ca63ea08 100644 --- a/app/assets/stylesheets/framework/tables.scss +++ b/app/assets/stylesheets/framework/tables.scss @@ -14,11 +14,11 @@ table { .warning, .danger, .info { - color: #fff; + color: $white-light; a:not(.btn) { text-decoration: underline; - color: #fff; + color: $white-light; } } @@ -34,6 +34,10 @@ table { background-color: $background-color; font-weight: normal; border-bottom: none; + + &.wide { + width: 55%; + } } td { @@ -42,3 +46,16 @@ table { } } } + +.responsive-table { + @media (max-width: $screen-sm-max) { + th { + width: 100%; + } + + td { + width: 100%; + float: left; + } + } +} diff --git a/app/assets/stylesheets/framework/tw_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss index 59f4594bb83..55bc325b858 100644 --- a/app/assets/stylesheets/framework/tw_bootstrap.scss +++ b/app/assets/stylesheets/framework/tw_bootstrap.scss @@ -97,13 +97,13 @@ display: inline-block; &.label-gray { - background-color: #f8fafc; + background-color: $label-gray-bg; color: $gl-gray; text-shadow: none; } &.label-inverse { - background-color: #333; + background-color: $label-inverse-bg; } } @@ -158,7 +158,7 @@ font-weight: normal; a { - color: #777; + color: $panel-heading-link-color; } } } @@ -172,7 +172,7 @@ .alert { a:not(.btn) { @extend .alert-link; - color: #fff; + color: $white-light; text-decoration: underline; } } diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss index 44fe37d3a4a..c731a8f222f 100644 --- a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss +++ b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss @@ -48,7 +48,7 @@ $font-size-base: $gl-font-size; $padding-base-vertical: $gl-vert-padding; $padding-base-horizontal: $gl-padding; -$component-active-color: #fff; +$component-active-color: $white-light; $component-active-bg: $brand-info; //== Forms @@ -66,7 +66,7 @@ $legend-color: $text-color; //## $pagination-color: $gl-gray; -$pagination-bg: #fff; +$pagination-bg: $white-light; $pagination-border: $border-color; $pagination-hover-color: $gl-gray; @@ -74,7 +74,7 @@ $pagination-hover-bg: $row-hover; $pagination-hover-border: $border-color; $pagination-active-color: $blue-dark; -$pagination-active-bg: #fff; +$pagination-active-bg: $white-light; $pagination-active-border: $border-color; $pagination-disabled-color: #cdcdcd; @@ -86,19 +86,19 @@ $pagination-disabled-border: $border-color; // //## 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-border: $brand-success; -$state-info-text: #fff; +$state-info-text: $white-light; $state-info-bg: $brand-info; $state-info-border: $brand-info; -$state-warning-text: #fff; +$state-warning-text: $white-light; $state-warning-bg: $brand-warning; $state-warning-border: $brand-warning; -$state-danger-text: #fff; +$state-danger-text: $white-light; $state-danger-bg: $brand-danger; $state-danger-border: $brand-danger; @@ -135,14 +135,14 @@ $well-border: #eee; $code-color: #c7254e; $code-bg: #f9f2f4; -$kbd-color: #fff; +$kbd-color: $white-light; $kbd-bg: #333; //== Buttons // //## $btn-default-color: $gl-text-color; -$btn-default-bg: #fff; +$btn-default-bg: $white-light; $btn-default-border: #e7e9ed; //== Nav diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 070e42d63d2..d906d26bba9 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -33,15 +33,15 @@ padding: 3px 5px; font-size: 11px; line-height: 10px; - color: #555; + color: $kdb-color; vertical-align: middle; - background-color: #fcfcfc; + background-color: $kdb-bg; border-width: 1px; border-style: solid; - border-color: #ccc #ccc #bbb; + border-color: $kdb-border $kdb-border $kdb-border-bottom; border-image: none; border-radius: 3px; - box-shadow: 0 -1px 0 #bbb inset; + box-shadow: 0 -1px 0 $kdb-shadow inset; } h1 { @@ -81,7 +81,7 @@ } blockquote { - color: #7f8fa4; + color: $gl-grayish-blue; font-size: inherit; padding: 8px 21px; margin: 12px 0; @@ -94,13 +94,13 @@ } blockquote p { - color: #7f8fa4 !important; + color: $gl-grayish-blue !important; font-size: inherit; line-height: 1.5; } p { - color: #5c5d5e; + color: $gl-text-color-dark; margin: 6px 0 0; } @@ -108,10 +108,10 @@ @extend .table; @extend .table-bordered; margin: 12px 0; - color: #5c5d5e; + color: $gl-text-color-dark; th { - background: #f8fafc; + background: $label-gray-bg; } } @@ -182,6 +182,7 @@ left: -16px; position: absolute; text-decoration: none; + outline: none; &::after { content: image-url('icon_anchor.svg'); @@ -201,7 +202,7 @@ * */ body { - -webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px; + -webkit-text-shadow: $body-text-shadow 0 0 1px; } .page-title { diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 750d99ebabe..a1d5f6427f4 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -12,67 +12,71 @@ $sidebar-breakpoint: 1024px; /* * Color schema */ +$darken-normal-factor: 7%; +$darken-dark-factor: 10%; +$darken-border-factor: 5%; + $white-light: #fff; -$white-normal: #ededed; -$white-dark: #ececec; +$white-normal: darken($white-light, $darken-normal-factor); +$white-dark: darken($white-light, $darken-dark-factor); $gray-lightest: #fdfdfd; $gray-light: #fafafa; $gray-lighter: #f9f9f9; -$gray-normal: #f5f5f5; -$gray-dark: #ededed; +$gray-normal: darken($gray-light, $darken-normal-factor); +$gray-dark: darken($gray-light, $darken-dark-factor); $gray-darker: #eee; $gray-darkest: #c9c9c9; -$green-light: #38ae67; -$green-normal: #2faa60; -$green-dark: #2ca05b; +$green-light: #3cbd70; +$green-normal: darken($green-light, $darken-normal-factor); +$green-dark: darken($green-light, $darken-dark-factor); $blue-light: #2ea8e5; -$blue-normal: #2d9fd8; -$blue-dark: #2897ce; +$blue-normal: darken($blue-light, $darken-normal-factor); +$blue-dark: darken($blue-light, $darken-dark-factor); $blue-medium-light: #3498cb; -$blue-medium: #2f8ebf; -$blue-medium-dark: #2d86b4; +$blue-medium: darken($blue-medium-light, $darken-normal-factor); +$blue-medium-dark: darken($blue-medium-light, $darken-dark-factor); $blue-light-transparent: rgba(44, 159, 216, 0.05); $orange-light: #fc8a51; -$orange-normal: #e75e40; -$orange-dark: #ce5237; +$orange-normal: darken($orange-light, $darken-normal-factor); +$orange-dark: darken($orange-light, $darken-dark-factor); $red-light: #e52c5a; -$red-normal: #d22852; -$red-dark: darken($red-normal, 5%); +$red-normal: darken($red-light, $darken-normal-factor); +$red-dark: darken($red-light, $darken-dark-factor); $black: #000; $black-transparent: rgba(0, 0, 0, 0.3); -$border-white-light: #f1f2f4; -$border-white-normal: #d6dae2; -$border-white-dark: #c6cacf; +$border-white-light: darken($white-light, $darken-border-factor); +$border-white-normal: darken($white-normal, $darken-border-factor); +$border-white-dark: darken($white-dark, $darken-border-factor); -$border-gray-light: #dcdcdc; -$border-gray-normal: #d7d7d7; -$border-gray-dark: #c6cacf; +$border-gray-light: darken($gray-light, $darken-border-factor); +$border-gray-normal: darken($gray-normal, $darken-border-factor); +$border-gray-dark: darken($gray-dark, $darken-border-factor); $border-green-extra-light: #9adb84; -$border-green-light: #2faa60; -$border-green-normal: #2ca05b; -$border-green-dark: #279654; +$border-green-light: darken($green-light, $darken-border-factor); +$border-green-normal: darken($green-normal, $darken-border-factor); +$border-green-dark: darken($green-dark, $darken-border-factor); -$border-blue-light: #2d9fd8; -$border-blue-normal: #2897ce; -$border-blue-dark: #258dc1; +$border-blue-light: darken($blue-light, $darken-border-factor); +$border-blue-normal: darken($blue-normal, $darken-border-factor); +$border-blue-dark: darken($blue-dark, $darken-border-factor); -$border-orange-light: #fc6d26; -$border-orange-normal: #ce5237; -$border-orange-dark: #c14e35; +$border-orange-light: darken($orange-light, $darken-border-factor); +$border-orange-normal: darken($orange-normal, $darken-border-factor); +$border-orange-dark: darken($orange-dark, $darken-border-factor); -$border-red-light: #d22852; -$border-red-normal: #ca264f; -$border-red-dark: darken($border-red-normal, 5%); +$border-red-light: darken($red-light, $darken-border-factor); +$border-red-normal: darken($red-normal, $darken-border-factor); +$border-red-dark: darken($red-dark, $darken-border-factor); $help-well-bg: $gray-light; $help-well-border: #e5e5e5; @@ -92,18 +96,22 @@ $dark-background-color: #f5f5f5; $table-text-gray: #8f8f8f; $well-expand-item: #e8f2f7; $well-inner-border: #eef0f2; +$well-light-border: #f1f1f1; +$well-light-text-color: #5b6169; /* * Text */ -$gl-font-size: 15px; +$gl-font-size: 14px; $gl-title-color: #333; $gl-text-color: #5c5c5c; +$gl-text-color-dark: #5c5d5e; $gl-text-color-light: #8c8c8c; $gl-text-green: #4a2; $gl-text-red: #d12f19; $gl-text-orange: #d90; $gl-link-color: #3777b0; +$gl-diff-text-color: #555; $gl-dark-link-color: #333; $gl-placeholder-color: #8f8f8f; $gl-icon-color: $gl-placeholder-color; @@ -119,13 +127,20 @@ $gl-header-color: #4c4e54; $list-font-size: $gl-font-size; $list-title-color: $gl-title-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-warning-row-bg: #fcf8e3; +$list-warning-row-border: #faebcc; +$list-warning-row-color: #8a6d3b; /* * Markdown */ $md-text-color: $gl-text-color; $md-link-color: $gl-link-color; +$md-area-border: #ddd; /* * Code @@ -149,10 +164,8 @@ $gl-sidebar-padding: 22px; $row-hover: #f7faff; $row-hover-border: #b2d7ff; $progress-color: #c0392b; -$avatar_radius: 50%; $header-height: 50px; $fixed-layout-width: 1280px; -$gl-avatar-size: 40px; $error-exclamation-point: #e62958; $border-radius-default: 2px; $btn-transparent-color: #8f8f8f; @@ -162,10 +175,47 @@ $provider-btn-not-active-color: #4688f1; $link-underline-blue: #4a8bee; $active-item-blue: #4a8bee; $layout-link-gray: #7e7c7c; -$todo-alert-blue: #428bca; $btn-side-margin: 10px; $btn-sm-side-margin: 7px; $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-red: #e24329; @@ -201,12 +251,22 @@ $table-border-gray: #f0f0f0; $line-target-blue: #f6faff; $line-select-yellow: #fcf8e7; $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 */ $monospace_font: 'Menlo', 'Liberation Mono', 'Consolas', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace; -$regular_font: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif; +$regular_font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; /* * Dropdowns @@ -216,27 +276,31 @@ $dropdown-bg: #fff; $dropdown-link-color: #555; $dropdown-link-hover-bg: $row-hover; $dropdown-empty-row-bg: rgba(#000, .04); -$dropdown-border-color: rgba(#000, .1); +$dropdown-border-color: $border-color; $dropdown-shadow-color: rgba(#000, .1); $dropdown-divider-color: rgba(#000, .1); $dropdown-header-color: #959494; $dropdown-title-btn-color: #bfbfbf; $dropdown-input-color: #555; +$dropdown-input-fa-color: #c7c7c7; $dropdown-input-focus-border: $focus-border-color; $dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, .4); $dropdown-loading-bg: rgba(#fff, .6); +$dropdown-chevron-size: 10px; $dropdown-toggle-bg: #fff; -$dropdown-toggle-color: #626262; -$dropdown-toggle-border-color: #eaeaea; -$dropdown-toggle-hover-border-color: darken($dropdown-toggle-border-color, 15%); +$dropdown-toggle-color: #5c5c5c; +$dropdown-toggle-border-color: #e5e5e5; +$dropdown-toggle-hover-border-color: darken($dropdown-toggle-border-color, 13%); +$dropdown-toggle-active-border-color: darken($dropdown-toggle-border-color, 14%); $dropdown-toggle-icon-color: #c4c4c4; -$dropdown-toggle-hover-icon-color: $dropdown-toggle-hover-border-color; +$dropdown-toggle-hover-icon-color: darken($dropdown-toggle-icon-color, 7%); /* * Buttons */ $btn-active-gray: #ececec; +$btn-active-gray-light: e4e7ed; $btn-placeholder-gray: #c7c7c7; $btn-white-active: #848484; $btn-gray-hover: #eee; @@ -246,6 +310,7 @@ $btn-gray-hover: #eee; */ $award-emoji-menu-bg: #fff; $award-emoji-menu-border: #f1f2f4; +$award-emoji-menu-shadow: rgba(0,0,0,.175); $award-emoji-new-btn-icon-color: #dcdcdc; /* @@ -255,7 +320,7 @@ $search-input-border-color: rgba(#4688f1, .8); $search-input-focus-shadow-color: $dropdown-input-focus-shadow; $search-input-width: 220px; $location-badge-color: #aaa; -$location-badge-bg: $gray-normal; +$location-badge-bg: $dark-background-color; $location-badge-active-bg: #4f91f8; $location-icon-color: #e7e9ed; $location-icon-active-color: #807e7e; @@ -267,17 +332,28 @@ $notes-light-color: #8e8e8e; $notes-action-color: #c3c3c3; $notes-role-color: #8e8e8e; $notes-role-border-color: #e4e4e4; - $note-disabled-comment-color: #b2b2b2; $note-form-border-color: #e5e5e5; $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; +/* +* Calendar +*/ $calendar-header-color: #b8b8b8; $calendar-hover-bg: #ecf3fe; $calendar-border-color: rgba(#000, .1); $calendar-unselectable-bg: $gray-light; +$calendar-user-contrib-text: #959494; /* * Cycle Analytics @@ -287,13 +363,212 @@ $cycle-analytics-box-text-color: #8c8c8c; $cycle-analytics-big-font: 19px; $cycle-analytics-dark-text: $gl-title-color; $cycle-analytics-light-gray: #bfbfbf; +$cycle-analytics-dismiss-icon-color: #b2b2b2; /* * Personal Access Tokens */ $personal-access-tokens-disabled-label-color: #bbb; +/* +* CI +*/ $ci-output-bg: #1d1f21; $ci-text-color: #c5c8c6; +$ci-skipped-color: #888; + +/* +* Boards +*/ +$issue-boards-font-size: 14px; +$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; + +/* +* 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); -$issue-boards-font-size: 15px; +/* +* 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); +$label-border-radius: 14px; + +/* +* 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; diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index 192939f4527..f2860dfe84d 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -43,3 +43,16 @@ background-color: $well-expand-item; } } + +.light-well { + background-color: $background-color; + padding: 15px; +} + +.well-centered { + h1 { + font-weight: normal; + text-align: center; + font-size: 48px; + } +} diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss index ff02ebdd34c..e5c7d70d45a 100644 --- a/app/assets/stylesheets/framework/zen.scss +++ b/app/assets/stylesheets/framework/zen.scss @@ -1,6 +1,6 @@ .zen-backdrop { &.fullscreen { - background-color: white; + background-color: $white-light; position: fixed; top: 0; bottom: 0; @@ -12,7 +12,7 @@ border: none; box-shadow: none; border-radius: 0; - color: #000; + color: $black; font-size: 20px; line-height: 26px; padding: 30px; @@ -34,7 +34,7 @@ .zen-control { padding: 0; - color: #555; + color: $zen-control-color; background: none; border: 0; } diff --git a/app/assets/stylesheets/highlight/dark.scss b/app/assets/stylesheets/highlight/dark.scss index d22d9b01495..cb923166b25 100644 --- a/app/assets/stylesheets/highlight/dark.scss +++ b/app/assets/stylesheets/highlight/dark.scss @@ -1,27 +1,109 @@ /* 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 { // Line numbers .line-numbers, .diff-line-num { - background-color: #1d1f21; + background-color: $dark-main-bg; } .diff-line-num, .diff-line-num a { - color: rgba(255, 255, 255, 0.3); + color: $dark-main-color; + color: $dark-line-num-color; } // Code itself pre.code, .diff-line-num { - border-color: #666; + border-color: $dark-code-border; } &, pre.code, .line_holder .line_content { - background-color: #1d1f21; - color: #c5c8c6; + background-color: $dark-main-bg; + color: $dark-line-color; } // Diff line @@ -32,18 +114,18 @@ td.diff-line-num.hll:not(.empty-cell), td.line_content.hll:not(.empty-cell) { - background-color: #557; - border-color: darken(#557, 15%); + background-color: $dark-diff-not-empty-bg; + border-color: darken($dark-diff-not-empty-bg, 15%); } .diff-line-num.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, .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 { @@ -53,77 +135,77 @@ // highlight line via anchor pre .hll { - background-color: #557 !important; + background-color: $dark-pre-hll-bg !important; } // Search result highlight span.highlight_word { - background-color: #ffe792 !important; - color: #000 !important; + background-color: $dark-highlight-bg !important; + color: $dark-highlight-color !important; } - .hll { background-color: #373b41; } - .c { color: #969896; } /* Comment */ - .err { color: #c66; } /* Error */ - .k { color: #b294bb; } /* Keyword */ - .l { color: #de935f; } /* Literal */ - .n { color: #c5c8c6; } /* Name */ - .o { color: #8abeb7; } /* Operator */ - .p { color: #c5c8c6; } /* Punctuation */ - .cm { color: #969896; } /* Comment.Multiline */ - .cp { color: #969896; } /* Comment.Preproc */ - .c1 { color: #969896; } /* Comment.Single */ - .cs { color: #969896; } /* Comment.Special */ - .gd { color: #c66; } /* Generic.Deleted */ + .hll { background-color: $dark-hll-bg; } + .c { color: $dark-c; } /* Comment */ + .err { color: $dark-err; } /* Error */ + .k { color: $dark-k; } /* Keyword */ + .l { color: $dark-l; } /* Literal */ + .n { color: $dark-n; } /* Name */ + .o { color: $dark-o; } /* Operator */ + .p { color: $dark-p; } /* Punctuation */ + .cm { color: $dark-cm; } /* Comment.Multiline */ + .cp { color: $dark-cp; } /* Comment.Preproc */ + .c1 { color: $dark-c1; } /* Comment.Single */ + .cs { color: $dark-cs; } /* Comment.Special */ + .gd { color: $dark-gd; } /* Generic.Deleted */ .ge { font-style: italic; } /* Generic.Emph */ - .gh { color: #c5c8c6; font-weight: bold; } /* Generic.Heading */ - .gi { color: #b5bd68; } /* Generic.Inserted */ - .gp { color: #969896; font-weight: bold; } /* Generic.Prompt */ + .gh { color: $dark-gh; font-weight: bold; } /* Generic.Heading */ + .gi { color: $dark-gi; } /* Generic.Inserted */ + .gp { color: $dark-gp; font-weight: bold; } /* Generic.Prompt */ .gs { font-weight: bold; } /* Generic.Strong */ - .gu { color: #8abeb7; font-weight: bold; } /* Generic.Subheading */ - .kc { color: #b294bb; } /* Keyword.Constant */ - .kd { color: #b294bb; } /* Keyword.Declaration */ - .kn { color: #8abeb7; } /* Keyword.Namespace */ - .kp { color: #b294bb; } /* Keyword.Pseudo */ - .kr { color: #b294bb; } /* Keyword.Reserved */ - .kt { color: #f0c674; } /* Keyword.Type */ - .ld { color: #b5bd68; } /* Literal.Date */ - .m { color: #de935f; } /* Literal.Number */ - .s { color: #b5bd68; } /* Literal.String */ - .na { color: #81a2be; } /* Name.Attribute */ - .nb { color: #c5c8c6; } /* Name.Builtin */ - .nc { color: #f0c674; } /* Name.Class */ - .no { color: #c66; } /* Name.Constant */ - .nd { color: #8abeb7; } /* Name.Decorator */ - .ni { color: #c5c8c6; } /* Name.Entity */ - .ne { color: #c66; } /* Name.Exception */ - .nf { color: #81a2be; } /* Name.Function */ - .nl { color: #c5c8c6; } /* Name.Label */ - .nn { color: #f0c674; } /* Name.Namespace */ - .nx { color: #81a2be; } /* Name.Other */ - .py { color: #c5c8c6; } /* Name.Property */ - .nt { color: #8abeb7; } /* Name.Tag */ - .nv { color: #c66; } /* Name.Variable */ - .ow { color: #8abeb7; } /* Operator.Word */ - .w { color: #c5c8c6; } /* Text.Whitespace */ - .mf { color: #de935f; } /* Literal.Number.Float */ - .mh { color: #de935f; } /* Literal.Number.Hex */ - .mi { color: #de935f; } /* Literal.Number.Integer */ - .mo { color: #de935f; } /* Literal.Number.Oct */ - .sb { color: #b5bd68; } /* Literal.String.Backtick */ - .sc { color: #c5c8c6; } /* Literal.String.Char */ - .sd { color: #969896; } /* Literal.String.Doc */ - .s2 { color: #b5bd68; } /* Literal.String.Double */ - .se { color: #de935f; } /* Literal.String.Escape */ - .sh { color: #b5bd68; } /* Literal.String.Heredoc */ - .si { color: #de935f; } /* Literal.String.Interpol */ - .sx { color: #b5bd68; } /* Literal.String.Other */ - .sr { color: #b5bd68; } /* Literal.String.Regex */ - .s1 { color: #b5bd68; } /* Literal.String.Single */ - .ss { color: #b5bd68; } /* Literal.String.Symbol */ - .bp { color: #c5c8c6; } /* Name.Builtin.Pseudo */ - .vc { color: #c66; } /* Name.Variable.Class */ - .vg { color: #c66; } /* Name.Variable.Global */ - .vi { color: #c66; } /* Name.Variable.Instance */ - .il { color: #de935f; } /* Literal.Number.Integer.Long */ + .gu { color: $dark-gu; font-weight: bold; } /* Generic.Subheading */ + .kc { color: $dark-kc; } /* Keyword.Constant */ + .kd { color: $dark-kd; } /* Keyword.Declaration */ + .kn { color: $dark-kn; } /* Keyword.Namespace */ + .kp { color: $dark-kp; } /* Keyword.Pseudo */ + .kr { color: $dark-kr; } /* Keyword.Reserved */ + .kt { color: $dark-kt; } /* Keyword.Type */ + .ld { color: $dark-ld; } /* Literal.Date */ + .m { color: $dark-m; } /* Literal.Number */ + .s { color: $dark-s; } /* Literal.String */ + .na { color: $dark-na; } /* Name.Attribute */ + .nb { color: $dark-nb; } /* Name.Builtin */ + .nc { color: $dark-nc; } /* Name.Class */ + .no { color: $dark-no; } /* Name.Constant */ + .nd { color: $dark-nd; } /* Name.Decorator */ + .ni { color: $dark-ni; } /* Name.Entity */ + .ne { color: $dark-ne; } /* Name.Exception */ + .nf { color: $dark-nf; } /* Name.Function */ + .nl { color: $dark-nl; } /* Name.Label */ + .nn { color: $dark-nn; } /* Name.Namespace */ + .nx { color: $dark-nx; } /* Name.Other */ + .py { color: $dark-py; } /* Name.Property */ + .nt { color: $dark-nt; } /* Name.Tag */ + .nv { color: $dark-nv; } /* Name.Variable */ + .ow { color: $dark-ow; } /* Operator.Word */ + .w { color: $dark-w; } /* Text.Whitespace */ + .mf { color: $dark-mf; } /* Literal.Number.Float */ + .mh { color: $dark-mh; } /* Literal.Number.Hex */ + .mi { color: $dark-mi; } /* Literal.Number.Integer */ + .mo { color: $dark-mo; } /* Literal.Number.Oct */ + .sb { color: $dark-sb; } /* Literal.String.Backtick */ + .sc { color: $dark-sc; } /* Literal.String.Char */ + .sd { color: $dark-sd; } /* Literal.String.Doc */ + .s2 { color: $dark-s2; } /* Literal.String.Double */ + .se { color: $dark-se; } /* Literal.String.Escape */ + .sh { color: $dark-sh; } /* Literal.String.Heredoc */ + .si { color: $dark-si; } /* Literal.String.Interpol */ + .sx { color: $dark-sx; } /* Literal.String.Other */ + .sr { color: $dark-sr; } /* Literal.String.Regex */ + .s1 { color: $dark-s1; } /* Literal.String.Single */ + .ss { color: $dark-ss; } /* Literal.String.Symbol */ + .bp { color: $dark-bp; } /* Name.Builtin.Pseudo */ + .vc { color: $dark-vc; } /* Name.Variable.Class */ + .vg { color: $dark-vg; } /* Name.Variable.Global */ + .vi { color: $dark-vi; } /* Name.Variable.Instance */ + .il { color: $dark-il; } /* Literal.Number.Integer.Long */ } diff --git a/app/assets/stylesheets/highlight/monokai.scss b/app/assets/stylesheets/highlight/monokai.scss index db8da8aab10..d8510baad8a 100644 --- a/app/assets/stylesheets/highlight/monokai.scss +++ b/app/assets/stylesheets/highlight/monokai.scss @@ -1,27 +1,108 @@ /* 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 { // Line numbers .line-numbers, .diff-line-num { - background-color: #272822; + background-color: $monokai-bg; } .diff-line-num, .diff-line-num a { - color: rgba(255, 255, 255, 0.3); + color: $monokai-line-num-color; } // Code itself pre.code, .diff-line-num { - border-color: #555; + border-color: $monokai-border; } &, pre.code, .line_holder .line_content { - background-color: #272822; - color: #f8f8f2; + background-color: $monokai-bg; + color: $monokai-text-color; } // Diff line @@ -32,18 +113,18 @@ td.diff-line-num.hll:not(.empty-cell), td.line_content.hll:not(.empty-cell) { - background-color: #49483e; - border-color: darken(#49483e, 15%); + background-color: $monokai-line-empty-bg; + border-color: $monokai-line-empty-border; } .diff-line-num.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, .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 { @@ -53,75 +134,75 @@ // highlight line via anchor pre .hll { - background-color: #49483e !important; + background-color: $monokai-hll !important; } // Search result highlight span.highlight_word { - background-color: #ffe792 !important; - color: #000 !important; + background-color: $monokai-highlight-bg !important; + color: $black !important; } - .hll { background-color: #49483e; } - .c { color: #75715e; } /* Comment */ - .err { color: #960050; background-color: #1e0010; } /* Error */ - .k { color: #66d9ef; } /* Keyword */ - .l { color: #ae81ff; } /* Literal */ - .n { color: #f8f8f2; } /* Name */ - .o { color: #f92672; } /* Operator */ - .p { color: #f8f8f2; } /* Punctuation */ - .cm { color: #75715e; } /* Comment.Multiline */ - .cp { color: #75715e; } /* Comment.Preproc */ - .c1 { color: #75715e; } /* Comment.Single */ - .cs { color: #75715e; } /* Comment.Special */ + .hll { background-color: $monokai-hll; } + .c { color: $monokai-c; } /* Comment */ + .err { color: $monokai-err-color; background-color: $monokai-err-bg; } /* Error */ + .k { color: $monokai-k; } /* Keyword */ + .l { color: $monokai-l; } /* Literal */ + .n { color: $monokai-n; } /* Name */ + .o { color: $monokai-o; } /* Operator */ + .p { color: $monokai-p; } /* Punctuation */ + .cm { color: $monokai-cm; } /* Comment.Multiline */ + .cp { color: $monokai-cp; } /* Comment.Preproc */ + .c1 { color: $monokai-c1; } /* Comment.Single */ + .cs { color: $monokai-cs; } /* Comment.Special */ .ge { font-style: italic; } /* Generic.Emph */ .gs { font-weight: bold; } /* Generic.Strong */ - .kc { color: #66d9ef; } /* Keyword.Constant */ - .kd { color: #66d9ef; } /* Keyword.Declaration */ - .kn { color: #f92672; } /* Keyword.Namespace */ - .kp { color: #66d9ef; } /* Keyword.Pseudo */ - .kr { color: #66d9ef; } /* Keyword.Reserved */ - .kt { color: #66d9ef; } /* Keyword.Type */ - .ld { color: #e6db74; } /* Literal.Date */ - .m { color: #ae81ff; } /* Literal.Number */ - .s { color: #e6db74; } /* Literal.String */ - .na { color: #a6e22e; } /* Name.Attribute */ - .nb { color: #f8f8f2; } /* Name.Builtin */ - .nc { color: #a6e22e; } /* Name.Class */ - .no { color: #66d9ef; } /* Name.Constant */ - .nd { color: #a6e22e; } /* Name.Decorator */ - .ni { color: #f8f8f2; } /* Name.Entity */ - .ne { color: #a6e22e; } /* Name.Exception */ - .nf { color: #a6e22e; } /* Name.Function */ - .nl { color: #f8f8f2; } /* Name.Label */ - .nn { color: #f8f8f2; } /* Name.Namespace */ - .nx { color: #a6e22e; } /* Name.Other */ - .py { color: #f8f8f2; } /* Name.Property */ - .nt { color: #f92672; } /* Name.Tag */ - .nv { color: #f8f8f2; } /* Name.Variable */ - .ow { color: #f92672; } /* Operator.Word */ - .w { color: #f8f8f2; } /* Text.Whitespace */ - .mf { color: #ae81ff; } /* Literal.Number.Float */ - .mh { color: #ae81ff; } /* Literal.Number.Hex */ - .mi { color: #ae81ff; } /* Literal.Number.Integer */ - .mo { color: #ae81ff; } /* Literal.Number.Oct */ - .sb { color: #e6db74; } /* Literal.String.Backtick */ - .sc { color: #e6db74; } /* Literal.String.Char */ - .sd { color: #e6db74; } /* Literal.String.Doc */ - .s2 { color: #e6db74; } /* Literal.String.Double */ - .se { color: #ae81ff; } /* Literal.String.Escape */ - .sh { color: #e6db74; } /* Literal.String.Heredoc */ - .si { color: #e6db74; } /* Literal.String.Interpol */ - .sx { color: #e6db74; } /* Literal.String.Other */ - .sr { color: #e6db74; } /* Literal.String.Regex */ - .s1 { color: #e6db74; } /* Literal.String.Single */ - .ss { color: #e6db74; } /* Literal.String.Symbol */ - .bp { color: #f8f8f2; } /* Name.Builtin.Pseudo */ - .vc { color: #f8f8f2; } /* Name.Variable.Class */ - .vg { color: #f8f8f2; } /* Name.Variable.Global */ - .vi { color: #f8f8f2; } /* Name.Variable.Instance */ - .il { color: #ae81ff; } /* Literal.Number.Integer.Long */ - .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */ - .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */ - .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */ + .kc { color: $monokai-kc; } /* Keyword.Constant */ + .kd { color: $monokai-kd; } /* Keyword.Declaration */ + .kn { color: $monokai-kn; } /* Keyword.Namespace */ + .kp { color: $monokai-kp; } /* Keyword.Pseudo */ + .kr { color: $monokai-kr; } /* Keyword.Reserved */ + .kt { color: $monokai-kt; } /* Keyword.Type */ + .ld { color: $monokai-ld; } /* Literal.Date */ + .m { color: $monokai-m; } /* Literal.Number */ + .s { color: $monokai-s; } /* Literal.String */ + .na { color: $monokai-na; } /* Name.Attribute */ + .nb { color: $monokai-nb; } /* Name.Builtin */ + .nc { color: $monokai-nc; } /* Name.Class */ + .no { color: $monokai-no; } /* Name.Constant */ + .nd { color: $monokai-nd; } /* Name.Decorator */ + .ni { color: $monokai-ni; } /* Name.Entity */ + .ne { color: $monokai-ne; } /* Name.Exception */ + .nf { color: $monokai-nf; } /* Name.Function */ + .nl { color: $monokai-nl; } /* Name.Label */ + .nn { color: $monokai-nn; } /* Name.Namespace */ + .nx { color: $monokai-nx; } /* Name.Other */ + .py { color: $monokai-py; } /* Name.Property */ + .nt { color: $monokai-nt; } /* Name.Tag */ + .nv { color: $monokai-nv; } /* Name.Variable */ + .ow { color: $monokai-ow; } /* Operator.Word */ + .w { color: $monokai-w; } /* Text.Whitespace */ + .mf { color: $monokai-mf; } /* Literal.Number.Float */ + .mh { color: $monokai-mh; } /* Literal.Number.Hex */ + .mi { color: $monokai-mi; } /* Literal.Number.Integer */ + .mo { color: $monokai-mo; } /* Literal.Number.Oct */ + .sb { color: $monokai-sb; } /* Literal.String.Backtick */ + .sc { color: $monokai-sc; } /* Literal.String.Char */ + .sd { color: $monokai-sd; } /* Literal.String.Doc */ + .s2 { color: $monokai-s2; } /* Literal.String.Double */ + .se { color: $monokai-se; } /* Literal.String.Escape */ + .sh { color: $monokai-sh; } /* Literal.String.Heredoc */ + .si { color: $monokai-si; } /* Literal.String.Interpol */ + .sx { color: $monokai-sx; } /* Literal.String.Other */ + .sr { color: $monokai-sr; } /* Literal.String.Regex */ + .s1 { color: $monokai-s1; } /* Literal.String.Single */ + .ss { color: $monokai-ss; } /* Literal.String.Symbol */ + .bp { color: $monokai-bp; } /* Name.Builtin.Pseudo */ + .vc { color: $monokai-vc; } /* Name.Variable.Class */ + .vg { color: $monokai-vg; } /* Name.Variable.Global */ + .vi { color: $monokai-vi; } /* Name.Variable.Instance */ + .il { color: $monokai-il; } /* Literal.Number.Integer.Long */ + .gu { color: $monokai-gu; } /* Generic.Subheading & Diff Unified/Comment? */ + .gd { color: $monokai-gd; } /* Generic.Deleted & Diff Deleted */ + .gi { color: $monokai-gi; } /* Generic.Inserted & Diff Inserted */ } diff --git a/app/assets/stylesheets/highlight/solarized_dark.scss b/app/assets/stylesheets/highlight/solarized_dark.scss index a87333146de..874aecb5e16 100644 --- a/app/assets/stylesheets/highlight/solarized_dark.scss +++ b/app/assets/stylesheets/highlight/solarized_dark.scss @@ -1,27 +1,112 @@ /* https://gist.github.com/qguv/7936275 */ + +/* +* Solarized dark colors +*/ +$solarized-dark-new-bg: rgba(133, 153, 0, 0.15); +$solarized-dark-new-idiff: rgba(133, 153, 0, 0.25); +$solarized-dark-old-bg: rgba(220, 50, 47, 0.3); +$solarized-dark-old-idiff: rgba(220, 50, 47, 0.25); +$solarized-dark-border: #113b46; +$solarized-dark-pre-bg: #002b36; +$solarized-dark-pre-color: #93a1a1; +$solarized-dark-pre-border: #113b46; +$solarized-dark-line-bg: #002b36; +$solarized-dark-line-color: rgba(255, 255, 255, 0.3); +$solarized-dark-highlight: #094554; +$solarized-dark-hll-bg: #174652; +$solarized-dark-c: #586e75; +$solarized-dark-err: #93a1a1; +$solarized-dark-g: #93a1a1; +$solarized-dark-k: #859900; +$solarized-dark-l: #93a1a1; +$solarized-dark-n: #93a1a1; +$solarized-dark-o: #859900; +$solarized-dark-x: #cb4b16; +$solarized-dark-p: #93a1a1; +$solarized-dark-cm: #586e75; +$solarized-dark-cp: #859900; +$solarized-dark-c1: #586e75; +$solarized-dark-cs: #859900; +$solarized-dark-gd: #2aa198; +$solarized-dark-ge: #93a1a1; +$solarized-dark-gr: #dc322f; +$solarized-dark-gh: #cb4b16; +$solarized-dark-gi: #859900; +$solarized-dark-go: #93a1a1; +$solarized-dark-gp: #93a1a1; +$solarized-dark-gs: #93a1a1; +$solarized-dark-gu: #cb4b16; +$solarized-dark-gt: #93a1a1; +$solarized-dark-kc: #cb4b16; +$solarized-dark-kd: #268bd2; +$solarized-dark-kn: #859900; +$solarized-dark-kp: #859900; +$solarized-dark-kr: #268bd2; +$solarized-dark-kt: #dc322f; +$solarized-dark-ld: #93a1a1; +$solarized-dark-m: #2aa198; +$solarized-dark-s: #2aa198; +$solarized-dark-na: #93a1a1; +$solarized-dark-nb: #b58900; +$solarized-dark-nc: #268bd2; +$solarized-dark-no: #cb4b16; +$solarized-dark-nd: #268bd2; +$solarized-dark-ni: #cb4b16; +$solarized-dark-ne: #cb4b16; +$solarized-dark-nf: #268bd2; +$solarized-dark-nl: #93a1a1; +$solarized-dark-nn: #93a1a1; +$solarized-dark-nx: #93a1a1; +$solarized-dark-py: #93a1a1; +$solarized-dark-nt: #268bd2; +$solarized-dark-nv: #268bd2; +$solarized-dark-ow: #859900; +$solarized-dark-w: #93a1a1; +$solarized-dark-mf: #2aa198; +$solarized-dark-mh: #2aa198; +$solarized-dark-mi: #2aa198; +$solarized-dark-mo: #2aa198; +$solarized-dark-sb: #586e75; +$solarized-dark-sc: #2aa198; +$solarized-dark-sd: #93a1a1; +$solarized-dark-s2: #2aa198; +$solarized-dark-se: #cb4b16; +$solarized-dark-sh: #93a1a1; +$solarized-dark-si: #2aa198; +$solarized-dark-sx: #2aa198; +$solarized-dark-sr: #dc322f; +$solarized-dark-s1: #2aa198; +$solarized-dark-ss: #2aa198; +$solarized-dark-bp: #268bd2; +$solarized-dark-vc: #268bd2; +$solarized-dark-vg: #268bd2; +$solarized-dark-vi: #268bd2; +$solarized-dark-il: #2aa198; + .code.solarized-dark { // Line numbers .line-numbers, .diff-line-num { - background-color: #002b36; + background-color: $solarized-dark-line-bg; } .diff-line-num, .diff-line-num a { - color: rgba(255, 255, 255, 0.3); + color: $solarized-dark-line-color; } // Code itself pre.code, .diff-line-num { - border-color: #113b46; + border-color: $solarized-dark-pre-border; } &, pre.code, .line_holder .line_content { - background-color: #002b36; - color: #93a1a1; + background-color: $solarized-dark-pre-bg; + color: $solarized-dark-pre-color; } // Diff line @@ -32,18 +117,18 @@ td.diff-line-num.hll:not(.empty-cell), td.line_content.hll:not(.empty-cell) { - background-color: #174652; - border-color: darken(#174652, 15%); + background-color: $solarized-dark-hll-bg; + border-color: darken($solarized-dark-hll-bg, 15%); } .diff-line-num.new, .line_content.new { - @include diff_background(rgba(133, 153, 0, 0.15), rgba(133, 153, 0, 0.25), #113b46); + @include diff_background($solarized-dark-new-bg, $solarized-dark-new-idiff, $solarized-dark-border); } .diff-line-num.old, .line_content.old { - @include diff_background(rgba(220, 50, 47, 0.3), rgba(220, 50, 47, 0.25), #113b46); + @include diff_background($solarized-dark-old-bg, $solarized-dark-old-idiff, $solarized-dark-border); } .line_content.match { @@ -53,12 +138,12 @@ // highlight line via anchor pre .hll { - background-color: #174652 !important; + background-color: $solarized-dark-hll-bg !important; } // Search result highlight span.highlight_word { - background-color: #094554 !important; + background-color: $solarized-dark-highlight !important; } /* Solarized Dark @@ -79,72 +164,72 @@ green #859900 operators, other keywords */ - .c { color: #586e75; } /* Comment */ - .err { color: #93a1a1; } /* Error */ - .g { color: #93a1a1; } /* Generic */ - .k { color: #859900; } /* Keyword */ - .l { color: #93a1a1; } /* Literal */ - .n { color: #93a1a1; } /* Name */ - .o { color: #859900; } /* Operator */ - .x { color: #cb4b16; } /* Other */ - .p { color: #93a1a1; } /* Punctuation */ - .cm { color: #586e75; } /* Comment.Multiline */ - .cp { color: #859900; } /* Comment.Preproc */ - .c1 { color: #586e75; } /* Comment.Single */ - .cs { color: #859900; } /* Comment.Special */ - .gd { color: #2aa198; } /* Generic.Deleted */ - .ge { color: #93a1a1; font-style: italic; } /* Generic.Emph */ - .gr { color: #dc322f; } /* Generic.Error */ - .gh { color: #cb4b16; } /* Generic.Heading */ - .gi { color: #859900; } /* Generic.Inserted */ - .go { color: #93a1a1; } /* Generic.Output */ - .gp { color: #93a1a1; } /* Generic.Prompt */ - .gs { color: #93a1a1; font-weight: bold; } /* Generic.Strong */ - .gu { color: #cb4b16; } /* Generic.Subheading */ - .gt { color: #93a1a1; } /* Generic.Traceback */ - .kc { color: #cb4b16; } /* Keyword.Constant */ - .kd { color: #268bd2; } /* Keyword.Declaration */ - .kn { color: #859900; } /* Keyword.Namespace */ - .kp { color: #859900; } /* Keyword.Pseudo */ - .kr { color: #268bd2; } /* Keyword.Reserved */ - .kt { color: #dc322f; } /* Keyword.Type */ - .ld { color: #93a1a1; } /* Literal.Date */ - .m { color: #2aa198; } /* Literal.Number */ - .s { color: #2aa198; } /* Literal.String */ - .na { color: #93a1a1; } /* Name.Attribute */ - .nb { color: #b58900; } /* Name.Builtin */ - .nc { color: #268bd2; } /* Name.Class */ - .no { color: #cb4b16; } /* Name.Constant */ - .nd { color: #268bd2; } /* Name.Decorator */ - .ni { color: #cb4b16; } /* Name.Entity */ - .ne { color: #cb4b16; } /* Name.Exception */ - .nf { color: #268bd2; } /* Name.Function */ - .nl { color: #93a1a1; } /* Name.Label */ - .nn { color: #93a1a1; } /* Name.Namespace */ - .nx { color: #93a1a1; } /* Name.Other */ - .py { color: #93a1a1; } /* Name.Property */ - .nt { color: #268bd2; } /* Name.Tag */ - .nv { color: #268bd2; } /* Name.Variable */ - .ow { color: #859900; } /* Operator.Word */ - .w { color: #93a1a1; } /* Text.Whitespace */ - .mf { color: #2aa198; } /* Literal.Number.Float */ - .mh { color: #2aa198; } /* Literal.Number.Hex */ - .mi { color: #2aa198; } /* Literal.Number.Integer */ - .mo { color: #2aa198; } /* Literal.Number.Oct */ - .sb { color: #586e75; } /* Literal.String.Backtick */ - .sc { color: #2aa198; } /* Literal.String.Char */ - .sd { color: #93a1a1; } /* Literal.String.Doc */ - .s2 { color: #2aa198; } /* Literal.String.Double */ - .se { color: #cb4b16; } /* Literal.String.Escape */ - .sh { color: #93a1a1; } /* Literal.String.Heredoc */ - .si { color: #2aa198; } /* Literal.String.Interpol */ - .sx { color: #2aa198; } /* Literal.String.Other */ - .sr { color: #dc322f; } /* Literal.String.Regex */ - .s1 { color: #2aa198; } /* Literal.String.Single */ - .ss { color: #2aa198; } /* Literal.String.Symbol */ - .bp { color: #268bd2; } /* Name.Builtin.Pseudo */ - .vc { color: #268bd2; } /* Name.Variable.Class */ - .vg { color: #268bd2; } /* Name.Variable.Global */ - .vi { color: #268bd2; } /* Name.Variable.Instance */ - .il { color: #2aa198; } /* Literal.Number.Integer.Long */ + .c { color: $solarized-dark-c; } /* Comment */ + .err { color: $solarized-dark-err; } /* Error */ + .g { color: $solarized-dark-g; } /* Generic */ + .k { color: $solarized-dark-k; } /* Keyword */ + .l { color: $solarized-dark-l; } /* Literal */ + .n { color: $solarized-dark-n; } /* Name */ + .o { color: $solarized-dark-o; } /* Operator */ + .x { color: $solarized-dark-x; } /* Other */ + .p { color: $solarized-dark-p; } /* Punctuation */ + .cm { color: $solarized-dark-cm; } /* Comment.Multiline */ + .cp { color: $solarized-dark-cp; } /* Comment.Preproc */ + .c1 { color: $solarized-dark-c1; } /* Comment.Single */ + .cs { color: $solarized-dark-cs; } /* Comment.Special */ + .gd { color: $solarized-dark-gd; } /* Generic.Deleted */ + .ge { color: $solarized-dark-ge; font-style: italic; } /* Generic.Emph */ + .gr { color: $solarized-dark-gr; } /* Generic.Error */ + .gh { color: $solarized-dark-gh; } /* Generic.Heading */ + .gi { color: $solarized-dark-gi; } /* Generic.Inserted */ + .go { color: $solarized-dark-go; } /* Generic.Output */ + .gp { color: $solarized-dark-gp; } /* Generic.Prompt */ + .gs { color: $solarized-dark-gs; font-weight: bold; } /* Generic.Strong */ + .gu { color: $solarized-dark-gu; } /* Generic.Subheading */ + .gt { color: $solarized-dark-gt; } /* Generic.Traceback */ + .kc { color: $solarized-dark-kc; } /* Keyword.Constant */ + .kd { color: $solarized-dark-kd; } /* Keyword.Declaration */ + .kn { color: $solarized-dark-kn; } /* Keyword.Namespace */ + .kp { color: $solarized-dark-kp; } /* Keyword.Pseudo */ + .kr { color: $solarized-dark-kr; } /* Keyword.Reserved */ + .kt { color: $solarized-dark-kt; } /* Keyword.Type */ + .ld { color: $solarized-dark-ld; } /* Literal.Date */ + .m { color: $solarized-dark-m; } /* Literal.Number */ + .s { color: $solarized-dark-s; } /* Literal.String */ + .na { color: $solarized-dark-na; } /* Name.Attribute */ + .nb { color: $solarized-dark-nb; } /* Name.Builtin */ + .nc { color: $solarized-dark-nc; } /* Name.Class */ + .no { color: $solarized-dark-no; } /* Name.Constant */ + .nd { color: $solarized-dark-nd; } /* Name.Decorator */ + .ni { color: $solarized-dark-ni; } /* Name.Entity */ + .ne { color: $solarized-dark-ne; } /* Name.Exception */ + .nf { color: $solarized-dark-nf; } /* Name.Function */ + .nl { color: $solarized-dark-nl; } /* Name.Label */ + .nn { color: $solarized-dark-nn; } /* Name.Namespace */ + .nx { color: $solarized-dark-nx; } /* Name.Other */ + .py { color: $solarized-dark-py; } /* Name.Property */ + .nt { color: $solarized-dark-nt; } /* Name.Tag */ + .nv { color: $solarized-dark-nv; } /* Name.Variable */ + .ow { color: $solarized-dark-ow; } /* Operator.Word */ + .w { color: $solarized-dark-w; } /* Text.Whitespace */ + .mf { color: $solarized-dark-mf; } /* Literal.Number.Float */ + .mh { color: $solarized-dark-mh; } /* Literal.Number.Hex */ + .mi { color: $solarized-dark-mi; } /* Literal.Number.Integer */ + .mo { color: $solarized-dark-mo; } /* Literal.Number.Oct */ + .sb { color: $solarized-dark-sb; } /* Literal.String.Backtick */ + .sc { color: $solarized-dark-sc; } /* Literal.String.Char */ + .sd { color: $solarized-dark-sd; } /* Literal.String.Doc */ + .s2 { color: $solarized-dark-s2; } /* Literal.String.Double */ + .se { color: $solarized-dark-se; } /* Literal.String.Escape */ + .sh { color: $solarized-dark-sh; } /* Literal.String.Heredoc */ + .si { color: $solarized-dark-si; } /* Literal.String.Interpol */ + .sx { color: $solarized-dark-sx; } /* Literal.String.Other */ + .sr { color: $solarized-dark-sr; } /* Literal.String.Regex */ + .s1 { color: $solarized-dark-s1; } /* Literal.String.Single */ + .ss { color: $solarized-dark-ss; } /* Literal.String.Symbol */ + .bp { color: $solarized-dark-bp; } /* Name.Builtin.Pseudo */ + .vc { color: $solarized-dark-vc; } /* Name.Variable.Class */ + .vg { color: $solarized-dark-vg; } /* Name.Variable.Global */ + .vi { color: $solarized-dark-vi; } /* Name.Variable.Instance */ + .il { color: $solarized-dark-il; } /* Literal.Number.Integer.Long */ } diff --git a/app/assets/stylesheets/highlight/solarized_light.scss b/app/assets/stylesheets/highlight/solarized_light.scss index faff353ded7..499a1c108b8 100644 --- a/app/assets/stylesheets/highlight/solarized_light.scss +++ b/app/assets/stylesheets/highlight/solarized_light.scss @@ -1,15 +1,99 @@ /* https://gist.github.com/qguv/7936275 */ +/* +* Solarized light syntax colors +*/ +$solarized-light-matchline-bg: rgba(255, 255, 255, 0.4); +$solarized-light-new-bg: rgba(133, 153, 0, 0.2); +$solarized-light-new-idiff: rgba(133, 153, 0, 0.25); +$solarized-light-old-bg: rgba(220, 50, 47, 0.2); +$solarized-light-old-idiff: rgba(220, 50, 47, 0.25); +$solarized-light-border: #c5d0d4; +$solarized-light-pre-bg: #002b36; +$solarized-light-pre-bg: #fdf6e3; +$solarized-light-pre-color: #586e75; +$solarized-light-line-bg: #fdf6e3; +$solarized-light-highlight: #eee8d5; +$solarized-light-hll-bg: #ddd8c5; +$solarized-light-c: #93a1a1; +$solarized-light-err: #586e75; +$solarized-light-g: #586e75; +$solarized-light-k: #859900; +$solarized-light-l: #586e75; +$solarized-light-n: #586e75; +$solarized-light-o: #859900; +$solarized-light-x: #cb4b16; +$solarized-light-p: #586e75; +$solarized-light-cm: #93a1a1; +$solarized-light-cp: #859900; +$solarized-light-c1: #93a1a1; +$solarized-light-cs: #859900; +$solarized-light-gd: #2aa198; +$solarized-light-ge: #586e75; +$solarized-light-gr: #dc322f; +$solarized-light-gh: #cb4b16; +$solarized-light-gi: #859900; +$solarized-light-go: #586e75; +$solarized-light-gp: #586e75; +$solarized-light-gs: #586e75; +$solarized-light-gu: #cb4b16; +$solarized-light-gt: #586e75; +$solarized-light-kc: #cb4b16; +$solarized-light-kd: #268bd2; +$solarized-light-kn: #859900; +$solarized-light-kp: #859900; +$solarized-light-kr: #268bd2; +$solarized-light-kt: #dc322f; +$solarized-light-ld: #586e75; +$solarized-light-m: #2aa198; +$solarized-light-s: #2aa198; +$solarized-light-na: #586e75; +$solarized-light-nb: #b58900; +$solarized-light-nc: #268bd2; +$solarized-light-no: #cb4b16; +$solarized-light-nd: #268bd2; +$solarized-light-ni: #cb4b16; +$solarized-light-ne: #cb4b16; +$solarized-light-nf: #268bd2; +$solarized-light-nl: #586e75; +$solarized-light-nn: #586e75; +$solarized-light-nx: #586e75; +$solarized-light-py: #586e75; +$solarized-light-nt: #268bd2; +$solarized-light-nv: #268bd2; +$solarized-light-ow: #859900; +$solarized-light-w: #586e75; +$solarized-light-mf: #2aa198; +$solarized-light-mh: #2aa198; +$solarized-light-mi: #2aa198; +$solarized-light-mo: #2aa198; +$solarized-light-sb: #93a1a1; +$solarized-light-sc: #2aa198; +$solarized-light-sd: #586e75; +$solarized-light-s2: #2aa198; +$solarized-light-se: #cb4b16; +$solarized-light-sh: #586e75; +$solarized-light-si: #2aa198; +$solarized-light-sx: #2aa198; +$solarized-light-sr: #dc322f; +$solarized-light-s1: #2aa198; +$solarized-light-ss: #2aa198; +$solarized-light-bp: #268bd2; +$solarized-light-vc: #268bd2; +$solarized-light-vg: #268bd2; +$solarized-light-vi: #268bd2; +$solarized-light-il: #2aa198; + @mixin matchLine { color: $black-transparent; - background: rgba(255, 255, 255, 0.4); + background: $solarized-light-matchline-bg; } .code.solarized-light { // Line numbers .line-numbers, .diff-line-num { - background-color: #fdf6e3; + background-color: $solarized-light-line-bg; } .diff-line-num, @@ -20,14 +104,14 @@ // Code itself pre.code, .diff-line-num { - border-color: #c5d0d4; + border-color: $solarized-light-border; } &, pre.code, .line_holder .line_content { - background-color: #fdf6e3; - color: #586e75; + background-color: $solarized-light-pre-bg; + color: $solarized-light-pre-color; } // Diff line @@ -38,18 +122,19 @@ td.diff-line-num.hll:not(.empty-cell), td.line_content.hll:not(.empty-cell) { - background-color: #ddd8c5; - border-color: darken(#ddd8c5, 15%); + background-color: $solarized-light-hll-bg; + border-color: darken($solarized-light-hll-bg, 15%); } .diff-line-num.new, .line_content.new { - @include diff_background(rgba(133, 153, 0, 0.2), rgba(133, 153, 0, 0.25), #c5d0d4); + @include diff_background($solarized-light-new-bg, + $solarized-light-new-idiff, $solarized-light-border); } .diff-line-num.old, .line_content.old { - @include diff_background(rgba(220, 50, 47, 0.2), rgba(220, 50, 47, 0.25), #c5d0d4); + @include diff_background($solarized-light-old-bg, $solarized-light-old-idiff, $solarized-light-border); } .line_content.match { @@ -59,12 +144,12 @@ // highlight line via anchor pre .hll { - background-color: #ddd8c5 !important; + background-color: $solarized-light-hll-bg !important; } // Search result highlight span.highlight_word { - background-color: #eee8d5 !important; + background-color: $solarized-light-highlight !important; } /* Solarized Light @@ -85,72 +170,72 @@ green #859900 operators, other keywords */ - .c { color: #93a1a1; } /* Comment */ - .err { color: #586e75; } /* Error */ - .g { color: #586e75; } /* Generic */ - .k { color: #859900; } /* Keyword */ - .l { color: #586e75; } /* Literal */ - .n { color: #586e75; } /* Name */ - .o { color: #859900; } /* Operator */ - .x { color: #cb4b16; } /* Other */ - .p { color: #586e75; } /* Punctuation */ - .cm { color: #93a1a1; } /* Comment.Multiline */ - .cp { color: #859900; } /* Comment.Preproc */ - .c1 { color: #93a1a1; } /* Comment.Single */ - .cs { color: #859900; } /* Comment.Special */ - .gd { color: #2aa198; } /* Generic.Deleted */ - .ge { color: #586e75; font-style: italic; } /* Generic.Emph */ - .gr { color: #dc322f; } /* Generic.Error */ - .gh { color: #cb4b16; } /* Generic.Heading */ - .gi { color: #859900; } /* Generic.Inserted */ - .go { color: #586e75; } /* Generic.Output */ - .gp { color: #586e75; } /* Generic.Prompt */ - .gs { color: #586e75; font-weight: bold; } /* Generic.Strong */ - .gu { color: #cb4b16; } /* Generic.Subheading */ - .gt { color: #586e75; } /* Generic.Traceback */ - .kc { color: #cb4b16; } /* Keyword.Constant */ - .kd { color: #268bd2; } /* Keyword.Declaration */ - .kn { color: #859900; } /* Keyword.Namespace */ - .kp { color: #859900; } /* Keyword.Pseudo */ - .kr { color: #268bd2; } /* Keyword.Reserved */ - .kt { color: #dc322f; } /* Keyword.Type */ - .ld { color: #586e75; } /* Literal.Date */ - .m { color: #2aa198; } /* Literal.Number */ - .s { color: #2aa198; } /* Literal.String */ - .na { color: #586e75; } /* Name.Attribute */ - .nb { color: #b58900; } /* Name.Builtin */ - .nc { color: #268bd2; } /* Name.Class */ - .no { color: #cb4b16; } /* Name.Constant */ - .nd { color: #268bd2; } /* Name.Decorator */ - .ni { color: #cb4b16; } /* Name.Entity */ - .ne { color: #cb4b16; } /* Name.Exception */ - .nf { color: #268bd2; } /* Name.Function */ - .nl { color: #586e75; } /* Name.Label */ - .nn { color: #586e75; } /* Name.Namespace */ - .nx { color: #586e75; } /* Name.Other */ - .py { color: #586e75; } /* Name.Property */ - .nt { color: #268bd2; } /* Name.Tag */ - .nv { color: #268bd2; } /* Name.Variable */ - .ow { color: #859900; } /* Operator.Word */ - .w { color: #586e75; } /* Text.Whitespace */ - .mf { color: #2aa198; } /* Literal.Number.Float */ - .mh { color: #2aa198; } /* Literal.Number.Hex */ - .mi { color: #2aa198; } /* Literal.Number.Integer */ - .mo { color: #2aa198; } /* Literal.Number.Oct */ - .sb { color: #93a1a1; } /* Literal.String.Backtick */ - .sc { color: #2aa198; } /* Literal.String.Char */ - .sd { color: #586e75; } /* Literal.String.Doc */ - .s2 { color: #2aa198; } /* Literal.String.Double */ - .se { color: #cb4b16; } /* Literal.String.Escape */ - .sh { color: #586e75; } /* Literal.String.Heredoc */ - .si { color: #2aa198; } /* Literal.String.Interpol */ - .sx { color: #2aa198; } /* Literal.String.Other */ - .sr { color: #dc322f; } /* Literal.String.Regex */ - .s1 { color: #2aa198; } /* Literal.String.Single */ - .ss { color: #2aa198; } /* Literal.String.Symbol */ - .bp { color: #268bd2; } /* Name.Builtin.Pseudo */ - .vc { color: #268bd2; } /* Name.Variable.Class */ - .vg { color: #268bd2; } /* Name.Variable.Global */ - .vi { color: #268bd2; } /* Name.Variable.Instance */ - .il { color: #2aa198; } /* Literal.Number.Integer.Long */ + .c { color: $solarized-light-c; } /* Comment */ + .err { color: $solarized-light-err; } /* Error */ + .g { color: $solarized-light-g; } /* Generic */ + .k { color: $solarized-light-k; } /* Keyword */ + .l { color: $solarized-light-l; } /* Literal */ + .n { color: $solarized-light-n; } /* Name */ + .o { color: $solarized-light-o; } /* Operator */ + .x { color: $solarized-light-x; } /* Other */ + .p { color: $solarized-light-p; } /* Punctuation */ + .cm { color: $solarized-light-cm; } /* Comment.Multiline */ + .cp { color: $solarized-light-cp; } /* Comment.Preproc */ + .c1 { color: $solarized-light-c1; } /* Comment.Single */ + .cs { color: $solarized-light-cs; } /* Comment.Special */ + .gd { color: $solarized-light-gd; } /* Generic.Deleted */ + .ge { color: $solarized-light-ge; font-style: italic; } /* Generic.Emph */ + .gr { color: $solarized-light-gr; } /* Generic.Error */ + .gh { color: $solarized-light-gh; } /* Generic.Heading */ + .gi { color: $solarized-light-gi; } /* Generic.Inserted */ + .go { color: $solarized-light-go; } /* Generic.Output */ + .gp { color: $solarized-light-gp; } /* Generic.Prompt */ + .gs { color: $solarized-light-gs; font-weight: bold; } /* Generic.Strong */ + .gu { color: $solarized-light-gu; } /* Generic.Subheading */ + .gt { color: $solarized-light-gt; } /* Generic.Traceback */ + .kc { color: $solarized-light-kc; } /* Keyword.Constant */ + .kd { color: $solarized-light-kd; } /* Keyword.Declaration */ + .kn { color: $solarized-light-kn; } /* Keyword.Namespace */ + .kp { color: $solarized-light-kp; } /* Keyword.Pseudo */ + .kr { color: $solarized-light-kr; } /* Keyword.Reserved */ + .kt { color: $solarized-light-kt; } /* Keyword.Type */ + .ld { color: $solarized-light-ld; } /* Literal.Date */ + .m { color: $solarized-light-m; } /* Literal.Number */ + .s { color: $solarized-light-s; } /* Literal.String */ + .na { color: $solarized-light-na; } /* Name.Attribute */ + .nb { color: $solarized-light-nb; } /* Name.Builtin */ + .nc { color: $solarized-light-nc; } /* Name.Class */ + .no { color: $solarized-light-no; } /* Name.Constant */ + .nd { color: $solarized-light-nd; } /* Name.Decorator */ + .ni { color: $solarized-light-ni; } /* Name.Entity */ + .ne { color: $solarized-light-ne; } /* Name.Exception */ + .nf { color: $solarized-light-nf; } /* Name.Function */ + .nl { color: $solarized-light-nl; } /* Name.Label */ + .nn { color: $solarized-light-nn; } /* Name.Namespace */ + .nx { color: $solarized-light-nx; } /* Name.Other */ + .py { color: $solarized-light-py; } /* Name.Property */ + .nt { color: $solarized-light-nt; } /* Name.Tag */ + .nv { color: $solarized-light-nv; } /* Name.Variable */ + .ow { color: $solarized-light-ow; } /* Operator.Word */ + .w { color: $solarized-light-w; } /* Text.Whitespace */ + .mf { color: $solarized-light-mf; } /* Literal.Number.Float */ + .mh { color: $solarized-light-mh; } /* Literal.Number.Hex */ + .mi { color: $solarized-light-mi; } /* Literal.Number.Integer */ + .mo { color: $solarized-light-mo; } /* Literal.Number.Oct */ + .sb { color: $solarized-light-sb; } /* Literal.String.Backtick */ + .sc { color: $solarized-light-sc; } /* Literal.String.Char */ + .sd { color: $solarized-light-sd; } /* Literal.String.Doc */ + .s2 { color: $solarized-light-s2; } /* Literal.String.Double */ + .se { color: $solarized-light-se; } /* Literal.String.Escape */ + .sh { color: $solarized-light-sh; } /* Literal.String.Heredoc */ + .si { color: $solarized-light-si; } /* Literal.String.Interpol */ + .sx { color: $solarized-light-sx; } /* Literal.String.Other */ + .sr { color: $solarized-light-sr; } /* Literal.String.Regex */ + .s1 { color: $solarized-light-s1; } /* Literal.String.Single */ + .ss { color: $solarized-light-ss; } /* Literal.String.Symbol */ + .bp { color: $solarized-light-bp; } /* Name.Builtin.Pseudo */ + .vc { color: $solarized-light-vc; } /* Name.Variable.Class */ + .vg { color: $solarized-light-vg; } /* Name.Variable.Global */ + .vi { color: $solarized-light-vi; } /* Name.Variable.Instance */ + .il { color: $solarized-light-il; } /* Literal.Number.Integer.Long */ } diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss index d5367d5f3f0..1adab3ffd94 100644 --- a/app/assets/stylesheets/highlight/white.scss +++ b/app/assets/stylesheets/highlight/white.scss @@ -1,5 +1,72 @@ /* 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 { color: $black-transparent; background-color: $match-line; @@ -26,8 +93,8 @@ &, pre.code, .line_holder .line_content { - background-color: #fff; - color: #333; + background-color: $white-light; + color: $white-code-color; } // Diff line @@ -83,75 +150,75 @@ // highlight line via anchor pre .hll { - background-color: #f8eec7 !important; + background-color: $white-pre-hll-bg !important; } // Search result highlight span.highlight_word { - background-color: #fafe3d !important; + background-color: $white-highlight !important; } - .hll { background-color: #f8f8f8; } - .c { color: #998; font-style: italic; } - .err { color: #a61717; background-color: #e3d2d2; } + .hll { background-color: $white-hll-bg; } + .c { color: $white-c; font-style: italic; } + .err { color: $white-err; background-color: $white-err-bg; } .k { font-weight: bold; } .o { font-weight: bold; } - .cm { color: #998; font-style: italic; } - .cp { color: #999; font-weight: bold; } - .c1 { color: #998; font-style: italic; } - .cs { color: #999; font-weight: bold; font-style: italic; } - .gd { color: #000; background-color: #fdd; } - .gd .x { color: #000; background-color: #faa; } + .cm { color: $white-cm; font-style: italic; } + .cp { color: $white-cp; font-weight: bold; } + .c1 { color: $white-c1; font-style: italic; } + .cs { color: $white-cs; font-weight: bold; font-style: italic; } + .gd { color: $white-gd; background-color: $white-gd-bg; } + .gd .x { color: $white-gd-x; background-color: $white-gd-x-bg; } .ge { font-style: italic; } - .gr { color: #a00; } - .gh { color: #999; } - .gi { color: #000; background-color: #dfd; } - .gi .x { color: #000; background-color: #afa; } - .go { color: #888; } - .gp { color: #555; } + .gr { color: $white-gr; } + .gh { color: $white-gh; } + .gi { color: $white-gi; background-color: $white-gi-bg; } + .gi .x { color: $white-gi-x; background-color: $white-gi-x-bg; } + .go { color: $white-go; } + .gp { color: $white-gp; } .gs { font-weight: bold; } - .gu { color: #800080; font-weight: bold; } - .gt { color: #a00; } + .gu { color: $white-gu; font-weight: bold; } + .gt { color: $white-gt; } .kc { font-weight: bold; } .kd { font-weight: bold; } .kn { font-weight: bold; } .kp { font-weight: bold; } .kr { font-weight: bold; } - .kt { color: #458; font-weight: bold; } - .m { color: #099; } - .s { color: #d14; } - .n { color: #333; } - .na { color: teal; } - .nb { color: #0086b3; } - .nc { color: #458; font-weight: bold; } - .no { color: teal; } - .ni { color: purple; } - .ne { color: #900; font-weight: bold; } - .nf { color: #900; font-weight: bold; } - .nn { color: #555; } - .nt { color: navy; } - .nv { color: teal; } + .kt { color: $white-kt; font-weight: bold; } + .m { color: $white-m; } + .s { color: $white-s; } + .n { color: $white-n; } + .na { color: $white-na; } + .nb { color: $white-nb; } + .nc { color: $white-nc; font-weight: bold; } + .no { color: $white-no; } + .ni { color: $white-ni; } + .ne { color: $white-ne; font-weight: bold; } + .nf { color: $white-nf; font-weight: bold; } + .nn { color: $white-nn; } + .nt { color: $white-nt; } + .nv { color: $white-nv; } .ow { font-weight: bold; } - .w { color: #bbb; } - .mf { color: #099; } - .mh { color: #099; } - .mi { color: #099; } - .mo { color: #099; } - .sb { color: #d14; } - .sc { color: #d14; } - .sd { color: #d14; } - .s2 { color: #d14; } - .se { color: #d14; } - .sh { color: #d14; } - .si { color: #d14; } - .sx { color: #d14; } - .sr { color: #009926; } - .s1 { color: #d14; } - .ss { color: #990073; } - .bp { color: #999; } - .vc { color: teal; } - .vg { color: teal; } - .vi { color: teal; } - .il { color: #099; } - .gc { color: #999; background-color: #eaf2f5; } + .w { color: $white-w; } + .mf { color: $white-mf; } + .mh { color: $white-mh; } + .mi { color: $white-mi; } + .mo { color: $white-mo; } + .sb { color: $white-sb; } + .sc { color: $white-sc; } + .sd { color: $white-sd; } + .s2 { color: $white-s2; } + .se { color: $white-se; } + .sh { color: $white-sh; } + .si { color: $white-si; } + .sx { color: $white-sx; } + .sr { color: $white-sr; } + .s1 { color: $white-s1; } + .ss { color: $white-ss; } + .bp { color: $white-bp; } + .vc { color: $white-vc; } + .vg { color: $white-vg; } + .vi { color: $white-vi; } + .il { color: $white-il; } + .gc { color: $white-gc-color; background-color: $white-gc-bg; } } diff --git a/app/assets/stylesheets/mailers/devise.scss b/app/assets/stylesheets/mailers/devise.scss index b2bce482fde..9f613710cf4 100644 --- a/app/assets/stylesheets/mailers/devise.scss +++ b/app/assets/stylesheets/mailers/devise.scss @@ -1,3 +1,5 @@ +@import "framework/variables"; + // 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 // application stylesheets. @@ -46,7 +48,7 @@ table { &#body { background-color: $message-background-color; - border: 1px solid #000; + border: 1px solid $black; border-radius: 4px; margin: 0 auto; width: 600px; diff --git a/app/assets/stylesheets/mailers/highlighted_diff_email.scss b/app/assets/stylesheets/mailers/highlighted_diff_email.scss new file mode 100644 index 00000000000..024b4df6bd0 --- /dev/null +++ b/app/assets/stylesheets/mailers/highlighted_diff_email.scss @@ -0,0 +1,207 @@ +@import "framework/variables"; + +// This file is largely copied from `highlight/white.scss`, but modified to +// avoid all descendant selectors (`table td`). This is because the CSS inlining +// we use performs dramatically worse on descendant selectors than the +// alternatives. +// <https://gitlab.com/gitlab-org/gitlab-ee/issues/490#note_12283632> +// +// DO NOT ADD ANY DESCENDANT SELECTORS TO THIS FILE. Instead, use (in order of +// preference): plain class selectors, type (element name) selectors, or +// 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 { + background-color: $white-light; + font-family: monospace; + font-size: $code_font_size; + -premailer-cellpadding: 0; + -premailer-cellspacing: 0; + -premailer-width: 100%; + + > tr { + line-height: $code_line_height; + } +} + +.diff-line-num { + padding: 0 5px; + text-align: right; + width: 35px; + background-color: $background-color; + color: $black-transparent; + border-right: 1px solid $table-border-gray; + + &.old { + background-color: $line-number-old; + border-right-color: $line-removed-dark; + } + + &.new { + background-color: $line-number-new; + border-right-color: $line-added-dark; + } +} + +.line_content { + padding-left: 0.5em; + padding-right: 0.5em; + + &.old { + background-color: $line-removed; + + > .line > span.idiff, + > .line > span > span.idiff { + background-color: $line-removed-dark; + } + } + + &.new { + background-color: $line-added; + + > .line > span.idiff, + > .line > span > span.idiff { + background-color: $line-added-dark; + } + } + + &.match { + color: $black-transparent; + background-color: $match-line; + } +} + +pre { + margin: 0; +} + +span.highlight_word { + background-color: $highlighted-highlight-word !important; +} + +.hll { background-color: $highlighted-hll-bg; } +.c { color: $highlighted-c; font-style: italic; } +.err { color: $highlighted-err; background-color: $highlighted-err-bg; } +.k { font-weight: bold; } +.o { font-weight: bold; } +.cm { color: $highlighted-cm; font-style: italic; } +.cp { color: $highlighted-cp; font-weight: bold; } +.c1 { color: $highlighted-c1; font-style: italic; } +.cs { color: $highlighted-cs; font-weight: bold; font-style: italic; } +.gd { color: $highlighted-gd; background-color: $highlighted-gd-bg; } +.gd .x { color: $highlighted-gd; background-color: $highlighted-gd-x-bg; } +.ge { font-style: italic; } +.gr { color: $highlighted-gr; } +.gh { color: $highlighted-gh; } +.gi { color: $highlighted-gi; background-color: $highlighted-gi-bg; } +.gi .x { color: $highlighted-gi; background-color: $highlighted-gi-x-bg; } +.go { color: $highlighted-go; } +.gp { color: $highlighted-gp; } +.gs { font-weight: bold; } +.gu { color: $highlighted-gu; font-weight: bold; } +.gt { color: $highlighted-gt; } +.kc { font-weight: bold; } +.kd { font-weight: bold; } +.kn { font-weight: bold; } +.kp { font-weight: bold; } +.kr { font-weight: bold; } +.kt { color: $highlighted-kt; font-weight: bold; } +.m { color: $highlighted-m; } +.s { color: $highlighted-s; } +.n { color: $highlighted-n; } +.na { color: $highlighted-na; } +.nb { color: $highlighted-nb; } +.nc { color: $highlighted-nc; font-weight: bold; } +.no { color: $highlighted-no; } +.ni { color: $highlighted-ni; } +.ne { color: $highlighted-ne; font-weight: bold; } +.nf { color: $highlighted-nf; font-weight: bold; } +.nn { color: $highlighted-nn; } +.nt { color: $highlighted-nt; } +.nv { color: $highlighted-nv; } +.ow { font-weight: bold; } +.w { color: $highlighted-w; } +.mf { color: $highlighted-mf; } +.mh { color: $highlighted-mh; } +.mi { color: $highlighted-mi; } +.mo { color: $highlighted-mo; } +.sb { color: $highlighted-sb; } +.sc { color: $highlighted-sc; } +.sd { color: $highlighted-sd; } +.s2 { color: $highlighted-s2; } +.se { color: $highlighted-se; } +.sh { color: $highlighted-sh; } +.si { color: $highlighted-si; } +.sx { color: $highlighted-sx; } +.sr { color: $highlighted-sr; } +.s1 { color: $highlighted-s1; } +.ss { color: $highlighted-ss; } +.bp { color: $highlighted-bp; } +.vc { color: $highlighted-vc; } +.vg { color: $highlighted-vg; } +.vi { color: $highlighted-vi; } +.il { color: $highlighted-il; } +.gc { color: $highlighted-gc; background-color: $highlighted-gc-bg; } diff --git a/app/assets/stylesheets/mailers/repository_push_email.scss b/app/assets/stylesheets/mailers/repository_push_email.scss deleted file mode 100644 index 8d1a6020ca4..00000000000 --- a/app/assets/stylesheets/mailers/repository_push_email.scss +++ /dev/null @@ -1,143 +0,0 @@ -@import "framework/variables"; - -// This file is largely copied from `highlight/white.scss`, but modified to -// avoid all descendant selectors (`table td`). This is because the CSS inlining -// we use performs dramatically worse on descendant selectors than the -// alternatives. -// <https://gitlab.com/gitlab-org/gitlab-ee/issues/490#note_12283632> -// -// DO NOT ADD ANY DESCENDANT SELECTORS TO THIS FILE. Instead, use (in order of -// preference): plain class selectors, type (element name) selectors, or -// explicit child selectors. - -.code { - background-color: #fff; - font-family: monospace; - font-size: $code_font_size; - -premailer-cellpadding: 0; - -premailer-cellspacing: 0; - -premailer-width: 100%; - - > tr { - line-height: $code_line_height; - } -} - -.diff-line-num { - padding: 0 5px; - text-align: right; - width: 35px; - background-color: $background-color; - color: $black-transparent; - border-right: 1px solid $table-border-gray; - - &.old { - background-color: $line-number-old; - border-right-color: $line-removed-dark; - } - - &.new { - background-color: $line-number-new; - border-right-color: $line-added-dark; - } -} - -.line_content { - padding-left: 0.5em; - padding-right: 0.5em; - - &.old { - background-color: $line-removed; - - > .line > span.idiff, - > .line > span > span.idiff { - background-color: $line-removed-dark; - } - } - - &.new { - background-color: $line-added; - - > .line > span.idiff, - > .line > span > span.idiff { - background-color: $line-added-dark; - } - } - - &.match { - color: $black-transparent; - background-color: $match-line; - } -} - -pre { - margin: 0; -} - -span.highlight_word { - background-color: #fafe3d !important; -} - -.hll { background-color: #f8f8f8; } -.c { color: #998; font-style: italic; } -.err { color: #a61717; background-color: #e3d2d2; } -.k { font-weight: bold; } -.o { font-weight: bold; } -.cm { color: #998; font-style: italic; } -.cp { color: #999; font-weight: bold; } -.c1 { color: #998; font-style: italic; } -.cs { color: #999; font-weight: bold; font-style: italic; } -.gd { color: #000; background-color: #fdd; } -.gd .x { color: #000; background-color: #faa; } -.ge { font-style: italic; } -.gr { color: #a00; } -.gh { color: #999; } -.gi { color: #000; background-color: #dfd; } -.gi .x { color: #000; background-color: #afa; } -.go { color: #888; } -.gp { color: #555; } -.gs { font-weight: bold; } -.gu { color: #800080; font-weight: bold; } -.gt { color: #a00; } -.kc { font-weight: bold; } -.kd { font-weight: bold; } -.kn { font-weight: bold; } -.kp { font-weight: bold; } -.kr { font-weight: bold; } -.kt { color: #458; font-weight: bold; } -.m { color: #099; } -.s { color: #d14; } -.n { color: #333; } -.na { color: teal; } -.nb { color: #0086b3; } -.nc { color: #458; font-weight: bold; } -.no { color: teal; } -.ni { color: purple; } -.ne { color: #900; font-weight: bold; } -.nf { color: #900; font-weight: bold; } -.nn { color: #555; } -.nt { color: navy; } -.nv { color: teal; } -.ow { font-weight: bold; } -.w { color: #bbb; } -.mf { color: #099; } -.mh { color: #099; } -.mi { color: #099; } -.mo { color: #099; } -.sb { color: #d14; } -.sc { color: #d14; } -.sd { color: #d14; } -.s2 { color: #d14; } -.se { color: #d14; } -.sh { color: #d14; } -.si { color: #d14; } -.sx { color: #d14; } -.sr { color: #009926; } -.s1 { color: #d14; } -.ss { color: #990073; } -.bp { color: #999; } -.vc { color: teal; } -.vg { color: teal; } -.vi { color: teal; } -.il { color: #099; } -.gc { color: #999; background-color: #eaf2f5; } diff --git a/app/assets/stylesheets/notify.scss b/app/assets/stylesheets/notify.scss index ced8c4a9907..ddc382362f7 100644 --- a/app/assets/stylesheets/notify.scss +++ b/app/assets/stylesheets/notify.scss @@ -1,3 +1,5 @@ +@import "framework/variables"; + img { max-width: 100%; height: auto; @@ -5,12 +7,12 @@ img { p.details { font-style: italic; - color: #777; + color: $notify-details; } .footer > p { font-size: small; - color: #777; + color: $notify-footer; } pre.commit-message { @@ -21,10 +23,10 @@ pre.commit-message { text-decoration: none; > .new-file { - color: #090; + color: $notify-new-file; } > .deleted-file { - color: #b00; + color: $notify-deleted-file; } } diff --git a/app/assets/stylesheets/pages/admin.scss b/app/assets/stylesheets/pages/admin.scss deleted file mode 100644 index 14812e171fd..00000000000 --- a/app/assets/stylesheets/pages/admin.scss +++ /dev/null @@ -1,168 +0,0 @@ -/** - * Admin area - * - */ -.admin-dashboard { - .data { - a { - h1 { - line-height: 48px; - font-size: 48px; - padding: 20px; - text-align: center; - font-weight: normal; - } - } - } - - .str-truncated { - max-width: 60%; - } -} - -.admin-filter form { - .select2-container { - width: 100%; - } - - .controls { - margin-left: 130px; - } - - .form-actions { - padding-left: 130px; - background: #fff; - } - - .visibility-levels { - .controls { - margin-bottom: 9px; - } - - i { - color: inherit; - } - } -} - -.broadcast-messages { - .message { - line-height: 2; - } -} - -.broadcast-message { - @extend .alert-warning; - padding: 10px; - text-align: center; - - > div, - p { - display: inline; - margin: 0; - - a { - color: inherit; - text-decoration: underline; - } - } -} - -.broadcast-message-preview { - @extend .broadcast-message; - margin-bottom: 20px; -} - -// Users List - -.users-list { - .user-row { - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - white-space: nowrap; - } - - .user-details { - flex: 1 1 auto; - overflow: hidden; - padding-right: 8px; - } - - .user-name { - display: inline-block; - font-weight: 600; - } - - .user-name, - .user-email { - overflow: hidden; - text-overflow: ellipsis; - } - - .dropdown { - .btn-block { - margin-bottom: 0; - line-height: inherit; - } - } - - .label-default { - color: $btn-transparent-color; - } -} - -.abuse-reports { - .table { - table-layout: fixed; - } - - .subheading { - padding-bottom: $gl-padding; - } - - .message { - word-wrap: break-word; - } - - .btn { - white-space: normal; - padding: $gl-btn-padding; - } - - th { - width: 15%; - - &.wide { - width: 55%; - } - } - - @media (max-width: $screen-sm-max) { - th { - width: 100%; - } - - td { - width: 100%; - float: left; - } - } - - .no-reports { - .emoji-icon { - margin-left: $btn-side-margin; - margin-top: 3px; - } - - span { - font-size: 19px; - } - } -} - -.admin-builds-table { - .ci-table td:last-child { - min-width: 120px; - } -} diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 4327f8bf640..0d9cf679e7c 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -145,7 +145,7 @@ .board-blank-state { height: calc(100% - 49px); padding: $gl-padding; - background-color: #fff; + background-color: $white-light; } .board-blank-state-list { @@ -191,9 +191,9 @@ .card { position: relative; padding: 10px $gl-padding; - background: #fff; + background: $white-light; 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; &:not(:last-child) { @@ -325,7 +325,6 @@ } .issuable-header-text { - width: 100%; padding-right: 35px; > strong { diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss index 48f11eb2552..dcc13f6d74a 100644 --- a/app/assets/stylesheets/pages/builds.scss +++ b/app/assets/stylesheets/pages/builds.scss @@ -1,7 +1,7 @@ .build-page { pre.trace { - background: #111; - color: #fff; + background: $builds-trace-bg; + color: $white-light; font-family: $monospace_font; white-space: pre-wrap; overflow: auto; @@ -64,6 +64,7 @@ @media (max-width: $screen-sm-max) { padding-right: 40px; + margin-top: 6px; .btn-inverted { display: none; diff --git a/app/assets/stylesheets/pages/ci_projects.scss b/app/assets/stylesheets/pages/ci_projects.scss index 87c453a7a27..d1cd1e5d848 100644 --- a/app/assets/stylesheets/pages/ci_projects.scss +++ b/app/assets/stylesheets/pages/ci_projects.scss @@ -1,7 +1,7 @@ .ci-body { .project-title { margin: 0; - color: #444; + color: $common-gray-dark; font-size: 20px; line-height: 1.5; } diff --git a/app/assets/stylesheets/pages/commit.scss b/app/assets/stylesheets/pages/commit.scss index ddc9d0e2b1a..bf656d0e28e 100644 --- a/app/assets/stylesheets/pages/commit.scss +++ b/app/assets/stylesheets/pages/commit.scss @@ -5,7 +5,7 @@ .commit-author, .commit-committer { display: block; - color: #999; + color: $commit-committer-color; font-weight: normal; font-style: italic; } @@ -113,17 +113,17 @@ overflow: hidden; // See https://gitlab.com/gitlab-org/gitlab-ce/issues/13987 .max-width-marker { width: 72ch; - color: rgba(0, 0, 0, 0.0); + color: $commit-max-width-marker-color; font-family: inherit; left: $left; height: 100%; - border-right: 1px solid mix($input-border, white); + border-right: 1px solid mix($input-border, $white-light); position: absolute; z-index: 1; } > textarea { - background-color: rgba(0, 0, 0, 0.0); + background-color: $commit-message-text-area-bg; font-family: inherit; padding-left: $left; position: relative; diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index 83ffa0e1d39..c29b5fdea78 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -8,8 +8,8 @@ .commit-header { padding: 5px 10px; background-color: $background-color; - border-top: 1px solid #eee; - border-bottom: 1px solid #eee; + border-top: 1px solid $gray-darker; + border-bottom: 1px solid $gray-darker; font-size: 14px; &:first-child { @@ -94,7 +94,7 @@ } &:not(:last-child) { - border-bottom: 1px solid #eee; + border-bottom: 1px solid $gray-darker; } a, @@ -201,7 +201,7 @@ .bar { position: absolute; height: 4px; - background-color: #ccc; + background-color: $divergence-graph-bar-bg; } .bar-behind { @@ -218,7 +218,7 @@ padding-top: 6px; padding-bottom: 0; font-size: 12px; - color: #333; + color: $gl-title-color; display: block; } @@ -239,6 +239,6 @@ height: 18px; margin: 5px 0 0; float: left; - background-color: #ccc; + background-color: $divergence-graph-separator-bg; } } diff --git a/app/assets/stylesheets/pages/confirmation.scss b/app/assets/stylesheets/pages/confirmation.scss deleted file mode 100644 index 81e5cee240d..00000000000 --- a/app/assets/stylesheets/pages/confirmation.scss +++ /dev/null @@ -1,32 +0,0 @@ -.well-confirmation { - margin-bottom: 20px; - border-bottom: 1px solid #eee; - - > h1, - h2, - h3, - h4, - h5, - h6 { - font-weight: 400; - } - - .lead { - margin-bottom: 20px; - } - - ul, - ol { - padding-left: 0; - } - - li { - list-style-type: none; - } -} - -.confirmation-content { - a { - color: $md-link-color; - } -} diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index 498a8f68e49..57146e1fccd 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/pages/cycle_analytics.scss @@ -53,7 +53,7 @@ border-bottom: none; position: relative; - @media (max-width: $screen-sm-min) { + @media (max-width: $screen-xs-max) { padding: 6px 0 24px; } } @@ -61,7 +61,7 @@ .column { text-align: center; - @media (max-width: $screen-sm-min) { + @media (max-width: $screen-xs-max) { padding: 15px 0; } @@ -78,7 +78,7 @@ } &:last-child { - @media (max-width: $screen-sm-min) { + @media (max-width: $screen-xs-max) { text-align: center; } } @@ -109,7 +109,7 @@ &.title { line-height: 19px; - font-size: 15px; + font-size: 14px; font-weight: 600; color: $gl-title-color; } @@ -141,9 +141,9 @@ .dismiss-icon { position: absolute; - right: $cycle-analytics-box-padding; + right: $cycle-analytics-dismiss-icon-color; cursor: pointer; - color: #b2b2b2; + color: $cycle-analytics-dismiss-icon-color; } .svg-container { @@ -156,7 +156,7 @@ } .inner-content { - @media (max-width: $screen-sm-min) { + @media (max-width: $screen-xs-max) { padding: 0 28px; text-align: center; } diff --git a/app/assets/stylesheets/pages/dashboard.scss b/app/assets/stylesheets/pages/dashboard.scss deleted file mode 100644 index 016bab104eb..00000000000 --- a/app/assets/stylesheets/pages/dashboard.scss +++ /dev/null @@ -1,43 +0,0 @@ -.dashboard { - .side { - .panel { - .panel-heading { - background: $background-color; - border-top-left-radius: 0; - } - - border-top-left-radius: 0; - } - } -} - -.dashboard-search-filter { - padding: 5px; - - .search-text-input { - float: left; - @extend .col-md-2; - } - - .btn { - margin-left: 5px; - float: left; - } -} - -.project-access-icon { - margin-left: 10px; - float: left; - margin-right: 15px; - margin-bottom: 15px; - - i { - color: #888; - } -} - -.dash-project-access-icon { - float: left; - margin-right: 5px; - width: 16px; -} diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss index 0f0c0abe7ae..80baebd5ea3 100644 --- a/app/assets/stylesheets/pages/detail_page.scss +++ b/app/assets/stylesheets/pages/detail_page.scss @@ -1,16 +1,16 @@ .detail-page-header { padding: $gl-padding-top 0; border-bottom: 1px solid $border-color; - color: #5c5d5e; + color: $gl-text-color-dark; font-size: 16px; line-height: 34px; .author { - color: #5c5d5e; + color: $gl-text-color-dark; } .identifier { - color: #5c5d5e; + color: $gl-text-color-dark; } .issue_created_ago, diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index 99fdea15218..737f6e0f4be 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -14,7 +14,7 @@ background: $background-color; border-bottom: 1px solid $border-color; padding: 10px 16px; - color: #555; + color: $gl-diff-text-color; z-index: 10; border-radius: 3px 3px 0 0; @@ -24,7 +24,7 @@ display: block; .file-mode { - color: #777; + color: $file-mode-changed; } } @@ -49,8 +49,8 @@ .diff-content { overflow: auto; overflow-y: hidden; - background: #fff; - color: #333; + background: $white-light; + color: $gl-title-color; border-radius: 0 0 3px 3px; .unfold { @@ -59,7 +59,7 @@ .file-mode-changed { padding: 10px; - color: #777; + color: $file-mode-changed; } .suppressed-container { @@ -172,7 +172,7 @@ } .image { - background: #ddd; + background: $diff-image-bg; text-align: center; padding: 30px; @@ -182,13 +182,13 @@ .frame { display: inline-block; - background-color: #fff; + background-color: $white-light; line-height: 0; img { - border: 1px solid #fff; - background-image: linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%, #e5e5e5 100%), - linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%, #e5e5e5 100%); + border: 1px solid $white-light; + background-image: linear-gradient(45deg, $diff-image-img-bg 25%, transparent 25%, transparent 75%, $diff-image-img-bg 75%, $diff-image-img-bg 100%), + 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-position: 0 0, 5px 5px; max-width: 100%; @@ -206,7 +206,7 @@ .image-info { font-size: 12px; margin: 5px 0 0; - color: grey; + color: $diff-image-info-color; } .view.swipe { @@ -220,7 +220,7 @@ .swipe-wrap { overflow: hidden; - border-left: 1px solid #999; + border-left: 1px solid $diff-swipe-border; position: absolute; display: block; top: 13px; @@ -350,7 +350,7 @@ .view-modes { padding: 10px; text-align: center; - background: #eee; + background: $gray-darker; ul, li { @@ -361,8 +361,8 @@ } li { - color: grey; - border-left: 1px solid #c1c1c1; + color: $diff-view-modes-color; + border-left: 1px solid $diff-view-modes-border; padding: 0 12px 0 16px; cursor: pointer; @@ -380,7 +380,7 @@ } cursor: default; - color: #333; + color: $gl-title-color; } &.disabled { diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss index 778126bcfb7..6cde9c592de 100644 --- a/app/assets/stylesheets/pages/editor.scss +++ b/app/assets/stylesheets/pages/editor.scss @@ -14,10 +14,10 @@ } .cancel-btn { - color: #b94a48; + color: $editor-cancel-color; &:hover { - color: #b94a48; + color: $editor-cancel-color; } } diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 4b382e8adaf..e716f24c8e2 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -1,6 +1,8 @@ -.deployments-container { - width: 100%; - overflow: auto; +@media (max-width: $screen-md-max) { + .deployments-container { + width: 100%; + overflow: auto; + } } .environments-list-loading { @@ -8,7 +10,7 @@ font-size: 34px; } -@media (max-width: $screen-sm-min) { +@media (max-width: $screen-xs-max) { .environments-container { width: 100%; overflow: auto; diff --git a/app/assets/stylesheets/pages/errors.scss b/app/assets/stylesheets/pages/errors.scss deleted file mode 100644 index 11309817d31..00000000000 --- a/app/assets/stylesheets/pages/errors.scss +++ /dev/null @@ -1,16 +0,0 @@ -.error-page { - max-width: 400px; - margin: 0 auto; - - h1, - h2, - h3 { - text-align: center; - } - - h1 { - font-size: 56px; - line-height: 100px; - font-weight: 300; - } -} diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss index 3004959ff7b..dc67d411c71 100644 --- a/app/assets/stylesheets/pages/events.scss +++ b/app/assets/stylesheets/pages/events.scss @@ -62,7 +62,7 @@ border: none; background: $gray-light; border-radius: 0; - color: #777; + color: $events-pre-color; margin: 0 20px; overflow: hidden; } @@ -80,7 +80,7 @@ } .event-note-icon { - color: #777; + color: $events-pre-color; float: left; font-size: $gl-font-size; line-height: 16px; @@ -91,7 +91,7 @@ .event_icon { position: relative; float: right; - border: 1px solid #eee; + border: 1px solid $gray-darker; padding: 5px; border-radius: 5px; background: $gray-light; @@ -170,7 +170,7 @@ .event-body { margin: 0; - border-left: 2px solid #ddd; + border-left: 2px solid $events-body-border; padding-left: 10px; } @@ -186,4 +186,3 @@ display: none; } } - diff --git a/app/assets/stylesheets/pages/graph.scss b/app/assets/stylesheets/pages/graph.scss index f7f9a9bb770..84da9180f93 100644 --- a/app/assets/stylesheets/pages/graph.scss +++ b/app/assets/stylesheets/pages/graph.scss @@ -2,15 +2,15 @@ border: 1px solid $border-color; .controls { - color: #888; + color: $project-network-controls-color; font-size: 14px; padding: 5px; border-bottom: 1px solid $border-color; - background: #eee; + background: $gray-darker; } .network-graph { - background: #fff; + background: $white-light; height: 500px; overflow-y: scroll; overflow-x: hidden; @@ -20,15 +20,14 @@ .graphs { .graph-author-email { float: right; - color: #777; + color: $graph-author-email-color; } .graph-additions { - color: #4a2; + color: $gl-text-green; } .graph-deletions { - color: #d12f19; + color: $gl-text-red; } } - diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index 57d028cec8c..a9af7af59e2 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -49,14 +49,14 @@ padding: 50px 100px; overflow: hidden; - @media (max-width: $screen-md-min) { + @media (max-width: $screen-sm-max) { padding: 50px 0; } svg { float: right; - @media (max-width: $screen-md-min) { + @media (max-width: $screen-sm-max) { float: none; display: block; width: 250px; @@ -71,7 +71,7 @@ width: 460px; margin-top: 120px; - @media (max-width: $screen-md-min) { + @media (max-width: $screen-sm-max) { float: none; margin-top: 60px; width: auto; diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss index a48b4c65db8..e2e644dc23b 100644 --- a/app/assets/stylesheets/pages/help.scss +++ b/app/assets/stylesheets/pages/help.scss @@ -9,7 +9,7 @@ li { line-height: 24px; - color: #888; + color: $document-index-color; a { margin-right: 3px; @@ -20,7 +20,7 @@ .shortcut-mappings { font-size: 12px; - color: #555; + color: $help-shortcut-mapping-color; tbody:first-child tr:first-child { padding-top: 0; @@ -29,7 +29,7 @@ th { padding-top: 15px; line-height: 1.5; - color: #333; + color: $help-shortcut-header-color; text-align: left; } @@ -42,7 +42,7 @@ .shortcut { padding-right: 10px; - color: #999; + color: $help-shortcut-color; text-align: right; white-space: nowrap; } diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 773155fe80a..407c0afbac8 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -30,6 +30,7 @@ .color-label { padding: 6px 10px; + border-radius: $label-border-radius; } } @@ -132,7 +133,7 @@ display: none; } - .btn-clipboard { + .btn-clipboard:hover { color: $gl-gray; } } @@ -233,7 +234,11 @@ width: 100%; text-align: center; padding-bottom: 10px; - color: #999; + color: $issuable-sidebar-color; + + &:hover { + color: $gl-gray; + } span { display: block; @@ -244,15 +249,17 @@ display: none; } + .avatar:hover { + border-color: $issuable-avatar-hover-border; + } + .btn-clipboard { border: none; + color: $issuable-clipboard-color; &:hover { background: transparent; - } - - i { - color: #999; + color: $gl-gray; } } } diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index eb171195309..3b47f99df2c 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -82,18 +82,18 @@ ul.related-merge-requests > li { .merge-request, .issue { &.today { - background: #f3fff2; - border-color: #e1e8d5; + background: $issues-today-bg; + border-color: $issues-today-border; } &.closed { background: $gray-light; - border-color: #e5e5e5; + border-color: $issues-border; } &.merged { background: $gray-light; - border-color: #e5e5e5; + border-color: $issues-border; } } diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index e39ce19f846..25c91203ff4 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -104,7 +104,8 @@ } .color-label { - padding: 3px 4px; + padding: 3px 7px; + border-radius: $label-border-radius; } .dropdown-labels-error { @@ -198,7 +199,7 @@ } .label-remove { - border-left: 1px solid rgba(0, 0, 0, .1); + border-left: 1px solid $label-remove-border; z-index: 3; } diff --git a/app/assets/stylesheets/pages/lint.scss b/app/assets/stylesheets/pages/lint.scss index 8290519dc25..a7c80dce424 100644 --- a/app/assets/stylesheets/pages/lint.scss +++ b/app/assets/stylesheets/pages/lint.scss @@ -1,11 +1,11 @@ .ci-body { .incorrect-syntax { - font-size: 19px; - color: red; + font-size: 18px; + color: $lint-incorrect-color; } .correct-syntax { - font-size: 19px; - color: #47a447; + font-size: 18px; + color: $lint-correct-color; } } diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index 54c89d75e94..dd27a06fcd2 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -18,7 +18,7 @@ p { font-size: 18px; - color: #888; + color: $login-brand-holder-color; } h1:first-child { @@ -174,7 +174,7 @@ .form-control { &:active, &:focus { - background-color: #fff; + background-color: $white-light; } } @@ -195,7 +195,7 @@ h2 { margin-top: 0; font-size: 14px; - color: #a00; + color: $login-devise-error-color; } } } @@ -254,4 +254,3 @@ } } } - diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss index 756efa9c7fa..5f3bbb40ba0 100644 --- a/app/assets/stylesheets/pages/members.scss +++ b/app/assets/stylesheets/pages/members.scss @@ -54,6 +54,10 @@ @media (min-width: $screen-sm-min) { width: 50%; } + + .dropdown-menu-toggle { + width: 100%; + } } .member-access-text { diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss index 19ab198c2e7..7a90713dd3f 100644 --- a/app/assets/stylesheets/pages/merge_conflicts.scss +++ b/app/assets/stylesheets/pages/merge_conflicts.scss @@ -1,3 +1,5 @@ +// Disabled to use the color map for creating color schemes +// scss-lint:disable ColorVariable $colors: ( white_header_head_neutral : #e1fad7, white_line_head_neutral : #effdec, @@ -98,6 +100,7 @@ $colors: ( solarized_dark_header_not_chosen : rgba(#839496, .25), solarized_dark_line_not_chosen : rgba(#839496, .15) ); +// scss-lint:enable ColorVariable @mixin color-scheme($color) { @@ -228,14 +231,15 @@ $colors: ( position: absolute; right: 10px; padding: 0; - color: #fff; + outline: none; + color: $white-light; width: 75px; // static width to make 2 buttons have same width height: 19px; } } .btn-success .fa-spinner { - color: #fff; + color: $white-light; } .editor-wrap { diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index da1187af41c..6234779ac19 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -86,7 +86,7 @@ } .normal { - color: #5c5d5e; + color: $gl-text-color-dark; } .js-deployment-link { @@ -116,7 +116,7 @@ @media (max-width: $screen-xs-max) { h4 { - font-size: 15px; + font-size: 14px; } p { @@ -129,6 +129,11 @@ margin-bottom: 4px; } + .btn-grouped { + float: none; + margin-right: 0; + } + .accept-action { width: 100%; text-align: center; @@ -143,7 +148,7 @@ } .mr-widget-footer { - border-top: 1px solid #eee; + border-top: 1px solid $gray-darker; } .ci-coverage { diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 8843d1463db..dfc6079bd15 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -123,7 +123,7 @@ padding: 20px 0; } -@media (max-width: $screen-sm-min) { +@media (max-width: $screen-xs-max) { .milestone-actions { @include clearfix(); padding-top: $gl-vert-padding; diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 16ddef481bd..c35d71f9e7b 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -111,7 +111,7 @@ text-align: center; font-size: 13px; - @media (max-width: $screen-md-min) { + @media (max-width: $screen-sm-max) { // On smaller devices the warning becomes the fourth item in the list, // rather than centering, and grows to span the full width of the // comment area. @@ -129,10 +129,10 @@ .note-edit-form { display: none; - font-size: 15px; + font-size: 14px; .md-area { - background-color: #fff; + background-color: $white-light; } } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index e66c1f8d072..10eb3d4203e 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -3,9 +3,9 @@ */ @-webkit-keyframes targe3-note { - from { background: #fffff0; } - 50% { background: #ffffd3; } - to { background: #fffff0; } + from { background: $note-targe3-outside; } + 50% { background: $note-targe3-inside; } + to { background: $note-targe3-outside; } } ul.notes { @@ -90,14 +90,14 @@ ul.notes { } &.system-note-commit-list { - max-height: 63px; + max-height: 70px; overflow: hidden; display: block; ul { - margin: 3px 0 3px 15px !important; + margin: 3px 0 3px 16px !important; - li { + .gfm-commit { font-family: $monospace_font; font-size: 12px; } @@ -124,7 +124,7 @@ ul.notes { position: absolute; left: 0; bottom: 0; - background: linear-gradient(rgba($gray-light, 0.1) -100px, $white-light 100%); + background: linear-gradient(rgba($white-light, 0.1) -100px, $white-light 100%); } &.hide-shade { @@ -172,6 +172,10 @@ ul.notes { &.timeline-entry { padding: 14px 10px; } + + .system-note { + padding: 0; + } } &.is-editting { @@ -249,7 +253,7 @@ ul.notes { } .page-sidebar-pinned.right-sidebar-expanded { - @media (max-width: $screen-lg-min) { + @media (max-width: $screen-md-max) { .note-header { .note-headline-light { display: block; @@ -301,7 +305,7 @@ ul.notes { &.notes_line2 { text-align: center; padding: 10px 0; - border-left: 1px solid #ddd !important; + border-left: 1px solid $note-line2-border !important; } &.notes_content { @@ -409,7 +413,6 @@ ul.notes { .fa { color: $notes-action-color; position: relative; - top: 1px; font-size: 17px; } @@ -467,7 +470,7 @@ ul.notes { .add-diff-note { margin-top: -4px; border-radius: 40px; - background: #fff; + background: $white-light; padding: 4px; font-size: 16px; color: $gl-link-color; @@ -480,7 +483,7 @@ ul.notes { &:hover { background: $gl-info; - color: #fff; + color: $white-light; @include show-add-diff-note; } } diff --git a/app/assets/stylesheets/pages/notifications.scss b/app/assets/stylesheets/pages/notifications.scss index 94fbbef3c77..7d61390a439 100644 --- a/app/assets/stylesheets/pages/notifications.scss +++ b/app/assets/stylesheets/pages/notifications.scss @@ -1,5 +1,9 @@ .notification-list-item { line-height: 34px; + + .dropdown-menu { + @extend .dropdown-menu-align-right; + } } .notification { diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 0027d2caf22..6822f916cc5 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -37,12 +37,13 @@ } } -.content-list { - - &.pipelines, - &.builds-content-list { - width: 100%; - overflow: auto; +@media (max-width: $screen-md-max) { + .content-list { + &.pipelines, + &.builds-content-list { + width: 100%; + overflow: auto; + } } } @@ -280,6 +281,12 @@ } } +.admin-builds-table { + .ci-table td:last-child { + min-width: 120px; + } +} + // Pipeline visualization .toggle-pipeline-btn { @@ -660,10 +667,6 @@ min-width: 900px; } - .content-list.pipelines { - overflow: auto; - } - .stage { max-width: 100px; width: 100px; diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index 6fab97a71aa..f8677f93fe0 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -180,7 +180,7 @@ .modal-dialog { width: 380px; - @media (max-width: $screen-sm-min) { + @media (max-width: $screen-xs-max) { width: auto; } @@ -261,4 +261,4 @@ table.u2f-registrations { td:not(:last-child) { border-right: solid 1px transparent; } -}
\ No newline at end of file +} diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 19a7a97ea0d..6e0f6b1cd81 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -8,7 +8,7 @@ .no-ssh-key-message, .project-limit-message { - background-color: #f28d35; + background-color: $project-limit-message-bg; margin-bottom: 0; } @@ -76,7 +76,7 @@ &.static-namespace { height: 35px; border-radius: 3px; - border: 1px solid #e5e5e5; + border: 1px solid $border-color; } &+ .select2 a { @@ -188,8 +188,12 @@ margin-left: 10px; } + .notification-dropdown .dropdown-menu { + @extend .dropdown-menu-align-right; + } + .download-button { - @media (max-width: $screen-lg-min) { + @media (max-width: $screen-md-max) { margin-left: 0; } } @@ -225,7 +229,7 @@ left: 0; margin-top: -6px; border-width: 7px 5px 7px 0; - border-right-color: #dce0e5; + border-right-color: $count-arrow-border; pointer-events: none; } @@ -240,7 +244,7 @@ left: 1px; margin-top: -9px; border-width: 10px 7px 10px 0; - border-right-color: #fff; + border-right-color: $white-light; pointer-events: none; } } @@ -248,7 +252,7 @@ .count { @include btn-gray; display: inline-block; - background: white; + background: $white-light; border-radius: 2px; border-width: 1px; border-style: solid; @@ -270,7 +274,7 @@ } &:hover { - background: #fff; + background: $white-light; } } } @@ -302,7 +306,7 @@ .option-descr { margin-left: 29px; - color: #54565b; + color: $project-option-descr-color; } } } @@ -310,7 +314,7 @@ .save-project-loader { margin-top: 50px; margin-bottom: 50px; - color: #555; + color: $save-project-loader-color; } .transfer-project .select2-container { @@ -373,7 +377,7 @@ a.deploy-project-label { > li + li::before { padding: 0 3px; - color: #999; + color: $project-breadcrumb-color; } a { @@ -521,7 +525,7 @@ a.deploy-project-label { .nav > li > a { padding: 0; background-color: transparent; - font-size: 15px; + font-size: 14px; line-height: 29px; color: $notes-light-color; @@ -549,20 +553,20 @@ a.deploy-project-label { } pre.light-well { - border-color: #f1f1f1; + border-color: $well-light-border; } .git-empty { margin: 0 7px 7px; h5 { - color: #5c5d5e; + color: $gl-text-color-dark; } .light-well { border-radius: 2px; - color: #5b6169; + color: $well-light-text-color; font-size: 13px; line-height: 1.6em; } @@ -716,7 +720,7 @@ pre.light-well { .form-control { @extend .monospace; - background: #fff; + background: $white-light; font-size: 14px; margin-left: -1px; cursor: auto; @@ -726,17 +730,17 @@ pre.light-well { .cannot-be-merged, .cannot-be-merged:hover { - color: #e62958; + color: $error-exclamation-point; margin-top: 2px; } .private-forks-notice .private-fork-icon { i:nth-child(1) { - color: #2aa056; + color: $project-private-forks-notice-odd; } i:nth-child(2) { - color: #fff; + color: $white-light; } } @@ -876,3 +880,11 @@ pre.light-well { pointer-events: none; } } + +.variables-table { + table-layout: fixed; + + .variable-key { + width: 30%; + } +} diff --git a/app/assets/stylesheets/pages/runners.scss b/app/assets/stylesheets/pages/runners.scss index 7b3878c91df..9b6ff237557 100644 --- a/app/assets/stylesheets/pages/runners.scss +++ b/app/assets/stylesheets/pages/runners.scss @@ -1,27 +1,27 @@ .runner-state { padding: 6px 12px; margin-right: 10px; - color: #fff; + color: $white-light; &.runner-state-shared { - background: #32b186; + background: $runner-state-shared-bg; } &.runner-state-specific { - background: #3498db; + background: $runner-state-specific-bg; } } .runner-status-online { - color: green; + color: $runner-status-online-color; } .runner-status-offline { - color: gray; + color: $runner-status-offline-color; } .runner-status-paused { - color: red; + color: $runner-status-paused-color; } .runner { diff --git a/app/assets/stylesheets/pages/snippets.scss b/app/assets/stylesheets/pages/snippets.scss index 857eb76131a..ff13b86acf0 100644 --- a/app/assets/stylesheets/pages/snippets.scss +++ b/app/assets/stylesheets/pages/snippets.scss @@ -1,3 +1,13 @@ +.snippet-row { + .title { + margin-bottom: 2px; + } + + .snippet-filename { + padding: 0 2px; + } +} + .snippet-form-holder .file-holder .file-title { padding: 2px; } @@ -24,11 +34,17 @@ padding-bottom: $gl-padding; } +.snippet-header { + padding: $gl-padding 0; +} + .snippet-title { font-size: 24px; font-weight: 600; - padding: $gl-padding; - padding-left: 0; +} + +.snippet-edited-ago { + color: $gray-darkest; } .snippet-actions { diff --git a/app/assets/stylesheets/pages/stat_graph.scss b/app/assets/stylesheets/pages/stat_graph.scss index 69288b31cc4..dfa4d033fb8 100644 --- a/app/assets/stylesheets/pages/stat_graph.scss +++ b/app/assets/stylesheets/pages/stat_graph.scss @@ -1,16 +1,16 @@ .tint-box { - background: #f3f3f3; + background: $stat-graph-common-bg; position: relative; margin-bottom: 10px; } .area { - fill: #1db34f; + fill: $stat-graph-area-fill; fill-opacity: 0.5; } .axis { - fill: #aaa; + fill: $stat-graph-axis-fill; font-size: 10px; } @@ -37,26 +37,26 @@ @include make-md-column(6); margin-top: 10px; - @media (max-width: $screen-sm-min) { + @media (max-width: $screen-xs-max) { width: 100%; } } .person .spark { display: block; - background: #f3f3f3; + background: $stat-graph-common-bg; width: 100%; } .person .area-contributor { - fill: #f17f49; + fill: $stat-graph-orange-fill; } } .selection rect { - fill: #333; + fill: $stat-graph-selection-fill; fill-opacity: 0.1; - stroke: #333; + stroke: $stat-graph-selection-stroke; stroke-width: 1px; stroke-opacity: 0.4; shape-rendering: crispedges; diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index 4c258bae1f4..5084b466722 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -2,7 +2,7 @@ .ci-status { padding: 2px 7px; margin-right: 10px; - border: 1px solid #eee; + border: 1px solid $gray-darker; white-space: nowrap; border-radius: 4px; diff --git a/app/assets/stylesheets/pages/tags.scss b/app/assets/stylesheets/pages/tags.scss deleted file mode 100644 index 24ebd3e7cfa..00000000000 --- a/app/assets/stylesheets/pages/tags.scss +++ /dev/null @@ -1,7 +0,0 @@ -.tag-buttons { - line-height: 40px; - - .btn:not(.dropdown-toggle) { - margin-left: 10px; - } -} diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss index b3aef2fdd32..508b30f3947 100644 --- a/app/assets/stylesheets/pages/todos.scss +++ b/app/assets/stylesheets/pages/todos.scss @@ -11,7 +11,7 @@ background: $todo-alert-blue; margin-left: -17px; font-size: 11px; - color: white; + color: $white-light; padding: 3px; padding-top: 1px; padding-bottom: 1px; @@ -81,7 +81,7 @@ word-wrap: break-word; .md { - color: #7f8fa4; + color: $gl-grayish-blue; font-size: $gl-font-size; .label { @@ -90,7 +90,7 @@ } p { - color: #5c5d5e; + color: $gl-text-color-dark; } } @@ -102,7 +102,7 @@ border: none; background: $gray-light; border-radius: 0; - color: #777; + color: $todo-body-pre-color; margin: 0 20px; overflow: hidden; } @@ -146,7 +146,7 @@ .todo-body { margin: 0; - border-left: 2px solid #ddd; + border-left: 2px solid $todo-body-border; padding-left: 10px; } } diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index 2b836fa1f4a..20ad63be045 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -31,7 +31,7 @@ .last-commit { @include str-truncated(506px); - @media (min-width: $screen-sm-max) and (max-width: $screen-md-max) { + @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { @include str-truncated(450px); } diff --git a/app/assets/stylesheets/pages/ui_dev_kit.scss b/app/assets/stylesheets/pages/ui_dev_kit.scss index e73cecc92be..8c87bc3cafd 100644 --- a/app/assets/stylesheets/pages/ui_dev_kit.scss +++ b/app/assets/stylesheets/pages/ui_dev_kit.scss @@ -7,11 +7,11 @@ .example { &::before { content: "Example"; - color: #bbb; + color: $ui-dev-kit-example-color; } padding: 15px; - border: 1px dashed #ddd; + border: 1px dashed $ui-dev-kit-example-border; margin-bottom: 15px; } } diff --git a/app/assets/stylesheets/pages/votes.scss b/app/assets/stylesheets/pages/votes.scss deleted file mode 100644 index dc9a7d71e8b..00000000000 --- a/app/assets/stylesheets/pages/votes.scss +++ /dev/null @@ -1,4 +0,0 @@ -.votes-inline { - display: inline-block; - margin: 0 8px; -} diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss index dfaeba41cf6..b9f81533150 100644 --- a/app/assets/stylesheets/pages/wiki.scss +++ b/app/assets/stylesheets/pages/wiki.scss @@ -4,3 +4,128 @@ margin-right: auto; padding-right: 7px; } + +.wiki-page-header { + @extend .top-area; + position: relative; + + .wiki-page-title { + margin: 0; + font-size: 22px; + } + + .wiki-last-edit-by { + color: $gl-gray-light; + + strong { + color: $gl-text-color; + } + } + + .light { + font-weight: normal; + color: $gl-gray-light; + } + + .git-access-header { + padding: 16px 40px 11px 0; + line-height: 28px; + font-size: 18px; + } + + .git-clone-holder { + width: 100%; + padding-bottom: 40px; + } + + button.sidebar-toggle { + position: absolute; + right: 0; + top: 11px; + display: block; + } + + @media (min-width: $screen-sm-min) { + &.has-sidebar-toggle { + padding-right: 40px; + } + + .git-clone-holder { + width: 480px; + } + + .nav-controls { + width: auto; + min-width: 50%; + white-space: nowrap; + } + } + + @media (min-width: $screen-md-min) { + &.has-sidebar-toggle { + padding-right: 0; + } + + button.sidebar-toggle { + display: none; + } + } +} + +.wiki-git-access { + margin: $gl-padding 0; + + h3 { + font-size: 22px; + font-weight: normal; + margin-top: 1.4em; + } +} + +.right-sidebar.wiki-sidebar { + padding: $gl-padding 0; + + &.right-sidebar-collapsed { + display: none; + } + + .blocks-container { + padding: 0 $gl-padding; + } + + .block { + width: 100%; + } + + a { + color: $layout-link-gray; + + &:hover, + &.active { + color: $black; + } + } + + .active > a { + color: $black; + } + + ul.wiki-pages, + ul.wiki-pages li { + list-style: none; + padding: 0; + margin: 0; + } + + ul.wiki-pages li { + margin: 5px 0 10px; + } + + .wiki-sidebar-header { + padding: 0 $gl-padding $gl-padding; + + .gutter-toggle { + margin-top: 0; + } + } +} diff --git a/app/assets/stylesheets/pages/xterm.scss b/app/assets/stylesheets/pages/xterm.scss index 3fa7fa3d7e3..9f9d630978a 100644 --- a/app/assets/stylesheets/pages/xterm.scss +++ b/app/assets/stylesheets/pages/xterm.scss @@ -20,6 +20,266 @@ $l-cyan: #8abeb7; $l-white: $ci-text-color; + /* + * xterm colors + */ + $xterm-fg-0: $black; + $xterm-fg-1: #800000; + $xterm-fg-2: #008000; + $xterm-fg-3: #808000; + $xterm-fg-4: #000080; + $xterm-fg-5: #800080; + $xterm-fg-6: #008080; + $xterm-fg-7: #c0c0c0; + $xterm-fg-8: #808080; + $xterm-fg-9: #f00; + $xterm-fg-10: #0f0; + $xterm-fg-11: #ff0; + $xterm-fg-12: #00f; + $xterm-fg-13: #f0f; + $xterm-fg-14: #0ff; + $xterm-fg-15: $white-light; + $xterm-fg-16: $black; + $xterm-fg-17: #00005f; + $xterm-fg-18: #000087; + $xterm-fg-19: #0000af; + $xterm-fg-20: #0000d7; + $xterm-fg-21: #00f; + $xterm-fg-22: #005f00; + $xterm-fg-23: #005f5f; + $xterm-fg-24: #005f87; + $xterm-fg-25: #005faf; + $xterm-fg-26: #005fd7; + $xterm-fg-27: #005fff; + $xterm-fg-28: #008700; + $xterm-fg-29: #00875f; + $xterm-fg-30: #008787; + $xterm-fg-31: #0087af; + $xterm-fg-32: #0087d7; + $xterm-fg-33: #0087ff; + $xterm-fg-34: #00af00; + $xterm-fg-35: #00af5f; + $xterm-fg-36: #00af87; + $xterm-fg-37: #00afaf; + $xterm-fg-38: #00afd7; + $xterm-fg-39: #00afff; + $xterm-fg-40: #00d700; + $xterm-fg-41: #00d75f; + $xterm-fg-42: #00d787; + $xterm-fg-43: #00d7af; + $xterm-fg-44: #00d7d7; + $xterm-fg-45: #00d7ff; + $xterm-fg-46: #0f0; + $xterm-fg-47: #00ff5f; + $xterm-fg-48: #00ff87; + $xterm-fg-49: #00ffaf; + $xterm-fg-50: #00ffd7; + $xterm-fg-51: #0ff; + $xterm-fg-52: #5f0000; + $xterm-fg-53: #5f005f; + $xterm-fg-54: #5f0087; + $xterm-fg-55: #5f00af; + $xterm-fg-56: #5f00d7; + $xterm-fg-57: #5f00ff; + $xterm-fg-58: #5f5f00; + $xterm-fg-59: #5f5f5f; + $xterm-fg-60: #5f5f87; + $xterm-fg-61: #5f5faf; + $xterm-fg-62: #5f5fd7; + $xterm-fg-63: #5f5fff; + $xterm-fg-64: #5f8700; + $xterm-fg-65: #5f875f; + $xterm-fg-66: #5f8787; + $xterm-fg-67: #5f87af; + $xterm-fg-68: #5f87d7; + $xterm-fg-69: #5f87ff; + $xterm-fg-70: #5faf00; + $xterm-fg-71: #5faf5f; + $xterm-fg-72: #5faf87; + $xterm-fg-73: #5fafaf; + $xterm-fg-74: #5fafd7; + $xterm-fg-75: #5fafff; + $xterm-fg-76: #5fd700; + $xterm-fg-77: #5fd75f; + $xterm-fg-78: #5fd787; + $xterm-fg-79: #5fd7af; + $xterm-fg-80: #5fd7d7; + $xterm-fg-81: #5fd7ff; + $xterm-fg-82: #5fff00; + $xterm-fg-83: #5fff5f; + $xterm-fg-84: #5fff87; + $xterm-fg-85: #5fffaf; + $xterm-fg-86: #5fffd7; + $xterm-fg-87: #5fffff; + $xterm-fg-88: #870000; + $xterm-fg-89: #87005f; + $xterm-fg-90: #870087; + $xterm-fg-91: #8700af; + $xterm-fg-92: #8700d7; + $xterm-fg-93: #8700ff; + $xterm-fg-94: #875f00; + $xterm-fg-95: #875f5f; + $xterm-fg-96: #875f87; + $xterm-fg-97: #875faf; + $xterm-fg-98: #875fd7; + $xterm-fg-99: #875fff; + $xterm-fg-100: #878700; + $xterm-fg-101: #87875f; + $xterm-fg-102: #878787; + $xterm-fg-103: #8787af; + $xterm-fg-104: #8787d7; + $xterm-fg-105: #8787ff; + $xterm-fg-106: #87af00; + $xterm-fg-107: #87af5f; + $xterm-fg-108: #87af87; + $xterm-fg-109: #87afaf; + $xterm-fg-110: #87afd7; + $xterm-fg-111: #87afff; + $xterm-fg-112: #87d700; + $xterm-fg-113: #87d75f; + $xterm-fg-114: #87d787; + $xterm-fg-115: #87d7af; + $xterm-fg-116: #87d7d7; + $xterm-fg-117: #87d7ff; + $xterm-fg-118: #87ff00; + $xterm-fg-119: #87ff5f; + $xterm-fg-120: #87ff87; + $xterm-fg-121: #87ffaf; + $xterm-fg-122: #87ffd7; + $xterm-fg-123: #87ffff; + $xterm-fg-124: #af0000; + $xterm-fg-125: #af005f; + $xterm-fg-126: #af0087; + $xterm-fg-127: #af00af; + $xterm-fg-128: #af00d7; + $xterm-fg-129: #af00ff; + $xterm-fg-130: #af5f00; + $xterm-fg-131: #af5f5f; + $xterm-fg-132: #af5f87; + $xterm-fg-133: #af5faf; + $xterm-fg-134: #af5fd7; + $xterm-fg-135: #af5fff; + $xterm-fg-136: #af8700; + $xterm-fg-137: #af875f; + $xterm-fg-138: #af8787; + $xterm-fg-139: #af87af; + $xterm-fg-140: #af87d7; + $xterm-fg-141: #af87ff; + $xterm-fg-142: #afaf00; + $xterm-fg-143: #afaf5f; + $xterm-fg-144: #afaf87; + $xterm-fg-145: #afafaf; + $xterm-fg-146: #afafd7; + $xterm-fg-147: #afafff; + $xterm-fg-148: #afd700; + $xterm-fg-149: #afd75f; + $xterm-fg-150: #afd787; + $xterm-fg-151: #afd7af; + $xterm-fg-152: #afd7d7; + $xterm-fg-153: #afd7ff; + $xterm-fg-154: #afff00; + $xterm-fg-155: #afff5f; + $xterm-fg-156: #afff87; + $xterm-fg-157: #afffaf; + $xterm-fg-158: #afffd7; + $xterm-fg-159: #afffff; + $xterm-fg-160: #d70000; + $xterm-fg-161: #d7005f; + $xterm-fg-162: #d70087; + $xterm-fg-163: #d700af; + $xterm-fg-164: #d700d7; + $xterm-fg-165: #d700ff; + $xterm-fg-166: #d75f00; + $xterm-fg-167: #d75f5f; + $xterm-fg-168: #d75f87; + $xterm-fg-169: #d75faf; + $xterm-fg-170: #d75fd7; + $xterm-fg-171: #d75fff; + $xterm-fg-172: #d78700; + $xterm-fg-173: #d7875f; + $xterm-fg-174: #d78787; + $xterm-fg-175: #d787af; + $xterm-fg-176: #d787d7; + $xterm-fg-177: #d787ff; + $xterm-fg-178: #d7af00; + $xterm-fg-179: #d7af5f; + $xterm-fg-180: #d7af87; + $xterm-fg-181: #d7afaf; + $xterm-fg-182: #d7afd7; + $xterm-fg-183: #d7afff; + $xterm-fg-184: #d7d700; + $xterm-fg-185: #d7d75f; + $xterm-fg-186: #d7d787; + $xterm-fg-187: #d7d7af; + $xterm-fg-188: #d7d7d7; + $xterm-fg-189: #d7d7ff; + $xterm-fg-190: #d7ff00; + $xterm-fg-191: #d7ff5f; + $xterm-fg-192: #d7ff87; + $xterm-fg-193: #d7ffaf; + $xterm-fg-194: #d7ffd7; + $xterm-fg-195: #d7ffff; + $xterm-fg-196: #f00; + $xterm-fg-197: #ff005f; + $xterm-fg-198: #ff0087; + $xterm-fg-199: #ff00af; + $xterm-fg-200: #ff00d7; + $xterm-fg-201: #f0f; + $xterm-fg-202: #ff5f00; + $xterm-fg-203: #ff5f5f; + $xterm-fg-204: #ff5f87; + $xterm-fg-205: #ff5faf; + $xterm-fg-206: #ff5fd7; + $xterm-fg-207: #ff5fff; + $xterm-fg-208: #ff8700; + $xterm-fg-209: #ff875f; + $xterm-fg-210: #ff8787; + $xterm-fg-211: #ff87af; + $xterm-fg-212: #ff87d7; + $xterm-fg-213: #ff87ff; + $xterm-fg-214: #ffaf00; + $xterm-fg-215: #ffaf5f; + $xterm-fg-216: #ffaf87; + $xterm-fg-217: #ffafaf; + $xterm-fg-218: #ffafd7; + $xterm-fg-219: #ffafff; + $xterm-fg-220: #ffd700; + $xterm-fg-221: #ffd75f; + $xterm-fg-222: #ffd787; + $xterm-fg-223: #ffd7af; + $xterm-fg-224: #ffd7d7; + $xterm-fg-225: #ffd7ff; + $xterm-fg-226: #ff0; + $xterm-fg-227: #ffff5f; + $xterm-fg-228: #ffff87; + $xterm-fg-229: #ffffaf; + $xterm-fg-230: #ffffd7; + $xterm-fg-231: $white-light; + $xterm-fg-232: #080808; + $xterm-fg-233: #121212; + $xterm-fg-234: #1c1c1c; + $xterm-fg-235: #262626; + $xterm-fg-236: #303030; + $xterm-fg-237: #3a3a3a; + $xterm-fg-238: #444; + $xterm-fg-239: #4e4e4e; + $xterm-fg-240: #585858; + $xterm-fg-241: #626262; + $xterm-fg-242: #6c6c6c; + $xterm-fg-243: #767676; + $xterm-fg-244: #808080; + $xterm-fg-245: #8a8a8a; + $xterm-fg-246: #949494; + $xterm-fg-247: #9e9e9e; + $xterm-fg-248: #a8a8a8; + $xterm-fg-249: #b2b2b2; + $xterm-fg-250: #bcbcbc; + $xterm-fg-251: #c6c6c6; + $xterm-fg-252: #d0d0d0; + $xterm-fg-253: #dadada; + $xterm-fg-254: #e4e4e4; + $xterm-fg-255: #eee; + .term-bold { font-weight: bold; } @@ -169,1026 +429,1026 @@ } .xterm-fg-0 { - color: #000; + color: $xterm-fg-0; } .xterm-fg-1 { - color: #800000; + color: $xterm-fg-1; } .xterm-fg-2 { - color: #008000; + color: $xterm-fg-2; } .xterm-fg-3 { - color: #808000; + color: $xterm-fg-3; } .xterm-fg-4 { - color: #000080; + color: $xterm-fg-4; } .xterm-fg-5 { - color: #800080; + color: $xterm-fg-5; } .xterm-fg-6 { - color: #008080; + color: $xterm-fg-6; } .xterm-fg-7 { - color: #c0c0c0; + color: $xterm-fg-7; } .xterm-fg-8 { - color: #808080; + color: $xterm-fg-8; } .xterm-fg-9 { - color: #f00; + color: $xterm-fg-9; } .xterm-fg-10 { - color: #0f0; + color: $xterm-fg-10; } .xterm-fg-11 { - color: #ff0; + color: $xterm-fg-11; } .xterm-fg-12 { - color: #00f; + color: $xterm-fg-12; } .xterm-fg-13 { - color: #f0f; + color: $xterm-fg-13; } .xterm-fg-14 { - color: #0ff; + color: $xterm-fg-14; } .xterm-fg-15 { - color: #fff; + color: $white-light; } .xterm-fg-16 { - color: #000; + color: $black; } .xterm-fg-17 { - color: #00005f; + color: $xterm-fg-17; } .xterm-fg-18 { - color: #000087; + color: $xterm-fg-18; } .xterm-fg-19 { - color: #0000af; + color: $xterm-fg-19; } .xterm-fg-20 { - color: #0000d7; + color: $xterm-fg-20; } .xterm-fg-21 { - color: #00f; + color: $xterm-fg-21; } .xterm-fg-22 { - color: #005f00; + color: $xterm-fg-22; } .xterm-fg-23 { - color: #005f5f; + color: $xterm-fg-23; } .xterm-fg-24 { - color: #005f87; + color: $xterm-fg-24; } .xterm-fg-25 { - color: #005faf; + color: $xterm-fg-25; } .xterm-fg-26 { - color: #005fd7; + color: $xterm-fg-26; } .xterm-fg-27 { - color: #005fff; + color: $xterm-fg-27; } .xterm-fg-28 { - color: #008700; + color: $xterm-fg-28; } .xterm-fg-29 { - color: #00875f; + color: $xterm-fg-29; } .xterm-fg-30 { - color: #008787; + color: $xterm-fg-30; } .xterm-fg-31 { - color: #0087af; + color: $xterm-fg-31; } .xterm-fg-32 { - color: #0087d7; + color: $xterm-fg-32; } .xterm-fg-33 { - color: #0087ff; + color: $xterm-fg-33; } .xterm-fg-34 { - color: #00af00; + color: $xterm-fg-34; } .xterm-fg-35 { - color: #00af5f; + color: $xterm-fg-35; } .xterm-fg-36 { - color: #00af87; + color: $xterm-fg-36; } .xterm-fg-37 { - color: #00afaf; + color: $xterm-fg-37; } .xterm-fg-38 { - color: #00afd7; + color: $xterm-fg-38; } .xterm-fg-39 { - color: #00afff; + color: $xterm-fg-39; } .xterm-fg-40 { - color: #00d700; + color: $xterm-fg-40; } .xterm-fg-41 { - color: #00d75f; + color: $xterm-fg-41; } .xterm-fg-42 { - color: #00d787; + color: $xterm-fg-42; } .xterm-fg-43 { - color: #00d7af; + color: $xterm-fg-43; } .xterm-fg-44 { - color: #00d7d7; + color: $xterm-fg-44; } .xterm-fg-45 { - color: #00d7ff; + color: $xterm-fg-45; } .xterm-fg-46 { - color: #0f0; + color: $xterm-fg-46; } .xterm-fg-47 { - color: #00ff5f; + color: $xterm-fg-47; } .xterm-fg-48 { - color: #00ff87; + color: $xterm-fg-48; } .xterm-fg-49 { - color: #00ffaf; + color: $xterm-fg-49; } .xterm-fg-50 { - color: #00ffd7; + color: $xterm-fg-50; } .xterm-fg-51 { - color: #0ff; + color: $xterm-fg-51; } .xterm-fg-52 { - color: #5f0000; + color: $xterm-fg-52; } .xterm-fg-53 { - color: #5f005f; + color: $xterm-fg-53; } .xterm-fg-54 { - color: #5f0087; + color: $xterm-fg-54; } .xterm-fg-55 { - color: #5f00af; + color: $xterm-fg-55; } .xterm-fg-56 { - color: #5f00d7; + color: $xterm-fg-56; } .xterm-fg-57 { - color: #5f00ff; + color: $xterm-fg-57; } .xterm-fg-58 { - color: #5f5f00; + color: $xterm-fg-58; } .xterm-fg-59 { - color: #5f5f5f; + color: $xterm-fg-59; } .xterm-fg-60 { - color: #5f5f87; + color: $xterm-fg-60; } .xterm-fg-61 { - color: #5f5faf; + color: $xterm-fg-61; } .xterm-fg-62 { - color: #5f5fd7; + color: $xterm-fg-62; } .xterm-fg-63 { - color: #5f5fff; + color: $xterm-fg-63; } .xterm-fg-64 { - color: #5f8700; + color: $xterm-fg-64; } .xterm-fg-65 { - color: #5f875f; + color: $xterm-fg-65; } .xterm-fg-66 { - color: #5f8787; + color: $xterm-fg-66; } .xterm-fg-67 { - color: #5f87af; + color: $xterm-fg-67; } .xterm-fg-68 { - color: #5f87d7; + color: $xterm-fg-68; } .xterm-fg-69 { - color: #5f87ff; + color: $xterm-fg-69; } .xterm-fg-70 { - color: #5faf00; + color: $xterm-fg-70; } .xterm-fg-71 { - color: #5faf5f; + color: $xterm-fg-71; } .xterm-fg-72 { - color: #5faf87; + color: $xterm-fg-72; } .xterm-fg-73 { - color: #5fafaf; + color: $xterm-fg-73; } .xterm-fg-74 { - color: #5fafd7; + color: $xterm-fg-74; } .xterm-fg-75 { - color: #5fafff; + color: $xterm-fg-75; } .xterm-fg-76 { - color: #5fd700; + color: $xterm-fg-76; } .xterm-fg-77 { - color: #5fd75f; + color: $xterm-fg-77; } .xterm-fg-78 { - color: #5fd787; + color: $xterm-fg-78; } .xterm-fg-79 { - color: #5fd7af; + color: $xterm-fg-79; } .xterm-fg-80 { - color: #5fd7d7; + color: $xterm-fg-80; } .xterm-fg-81 { - color: #5fd7ff; + color: $xterm-fg-81; } .xterm-fg-82 { - color: #5fff00; + color: $xterm-fg-82; } .xterm-fg-83 { - color: #5fff5f; + color: $xterm-fg-83; } .xterm-fg-84 { - color: #5fff87; + color: $xterm-fg-84; } .xterm-fg-85 { - color: #5fffaf; + color: $xterm-fg-85; } .xterm-fg-86 { - color: #5fffd7; + color: $xterm-fg-86; } .xterm-fg-87 { - color: #5fffff; + color: $xterm-fg-87; } .xterm-fg-88 { - color: #870000; + color: $xterm-fg-88; } .xterm-fg-89 { - color: #87005f; + color: $xterm-fg-89; } .xterm-fg-90 { - color: #870087; + color: $xterm-fg-90; } .xterm-fg-91 { - color: #8700af; + color: $xterm-fg-91; } .xterm-fg-92 { - color: #8700d7; + color: $xterm-fg-92; } .xterm-fg-93 { - color: #8700ff; + color: $xterm-fg-93; } .xterm-fg-94 { - color: #875f00; + color: $xterm-fg-94; } .xterm-fg-95 { - color: #875f5f; + color: $xterm-fg-95; } .xterm-fg-96 { - color: #875f87; + color: $xterm-fg-96; } .xterm-fg-97 { - color: #875faf; + color: $xterm-fg-97; } .xterm-fg-98 { - color: #875fd7; + color: $xterm-fg-98; } .xterm-fg-99 { - color: #875fff; + color: $xterm-fg-99; } .xterm-fg-100 { - color: #878700; + color: $xterm-fg-100; } .xterm-fg-101 { - color: #87875f; + color: $xterm-fg-101; } .xterm-fg-102 { - color: #878787; + color: $xterm-fg-102; } .xterm-fg-103 { - color: #8787af; + color: $xterm-fg-103; } .xterm-fg-104 { - color: #8787d7; + color: $xterm-fg-104; } .xterm-fg-105 { - color: #8787ff; + color: $xterm-fg-105; } .xterm-fg-106 { - color: #87af00; + color: $xterm-fg-106; } .xterm-fg-107 { - color: #87af5f; + color: $xterm-fg-107; } .xterm-fg-108 { - color: #87af87; + color: $xterm-fg-108; } .xterm-fg-109 { - color: #87afaf; + color: $xterm-fg-109; } .xterm-fg-110 { - color: #87afd7; + color: $xterm-fg-110; } .xterm-fg-111 { - color: #87afff; + color: $xterm-fg-111; } .xterm-fg-112 { - color: #87d700; + color: $xterm-fg-112; } .xterm-fg-113 { - color: #87d75f; + color: $xterm-fg-113; } .xterm-fg-114 { - color: #87d787; + color: $xterm-fg-114; } .xterm-fg-115 { - color: #87d7af; + color: $xterm-fg-115; } .xterm-fg-116 { - color: #87d7d7; + color: $xterm-fg-116; } .xterm-fg-117 { - color: #87d7ff; + color: $xterm-fg-117; } .xterm-fg-118 { - color: #87ff00; + color: $xterm-fg-118; } .xterm-fg-119 { - color: #87ff5f; + color: $xterm-fg-119; } .xterm-fg-120 { - color: #87ff87; + color: $xterm-fg-120; } .xterm-fg-121 { - color: #87ffaf; + color: $xterm-fg-121; } .xterm-fg-122 { - color: #87ffd7; + color: $xterm-fg-122; } .xterm-fg-123 { - color: #87ffff; + color: $xterm-fg-123; } .xterm-fg-124 { - color: #af0000; + color: $xterm-fg-124; } .xterm-fg-125 { - color: #af005f; + color: $xterm-fg-125; } .xterm-fg-126 { - color: #af0087; + color: $xterm-fg-126; } .xterm-fg-127 { - color: #af00af; + color: $xterm-fg-127; } .xterm-fg-128 { - color: #af00d7; + color: $xterm-fg-128; } .xterm-fg-129 { - color: #af00ff; + color: $xterm-fg-129; } .xterm-fg-130 { - color: #af5f00; + color: $xterm-fg-130; } .xterm-fg-131 { - color: #af5f5f; + color: $xterm-fg-131; } .xterm-fg-132 { - color: #af5f87; + color: $xterm-fg-132; } .xterm-fg-133 { - color: #af5faf; + color: $xterm-fg-133; } .xterm-fg-134 { - color: #af5fd7; + color: $xterm-fg-134; } .xterm-fg-135 { - color: #af5fff; + color: $xterm-fg-135; } .xterm-fg-136 { - color: #af8700; + color: $xterm-fg-136; } .xterm-fg-137 { - color: #af875f; + color: $xterm-fg-137; } .xterm-fg-138 { - color: #af8787; + color: $xterm-fg-138; } .xterm-fg-139 { - color: #af87af; + color: $xterm-fg-139; } .xterm-fg-140 { - color: #af87d7; + color: $xterm-fg-140; } .xterm-fg-141 { - color: #af87ff; + color: $xterm-fg-141; } .xterm-fg-142 { - color: #afaf00; + color: $xterm-fg-142; } .xterm-fg-143 { - color: #afaf5f; + color: $xterm-fg-143; } .xterm-fg-144 { - color: #afaf87; + color: $xterm-fg-144; } .xterm-fg-145 { - color: #afafaf; + color: $xterm-fg-145; } .xterm-fg-146 { - color: #afafd7; + color: $xterm-fg-146; } .xterm-fg-147 { - color: #afafff; + color: $xterm-fg-147; } .xterm-fg-148 { - color: #afd700; + color: $xterm-fg-148; } .xterm-fg-149 { - color: #afd75f; + color: $xterm-fg-149; } .xterm-fg-150 { - color: #afd787; + color: $xterm-fg-150; } .xterm-fg-151 { - color: #afd7af; + color: $xterm-fg-151; } .xterm-fg-152 { - color: #afd7d7; + color: $xterm-fg-152; } .xterm-fg-153 { - color: #afd7ff; + color: $xterm-fg-153; } .xterm-fg-154 { - color: #afff00; + color: $xterm-fg-154; } .xterm-fg-155 { - color: #afff5f; + color: $xterm-fg-155; } .xterm-fg-156 { - color: #afff87; + color: $xterm-fg-156; } .xterm-fg-157 { - color: #afffaf; + color: $xterm-fg-157; } .xterm-fg-158 { - color: #afffd7; + color: $xterm-fg-158; } .xterm-fg-159 { - color: #afffff; + color: $xterm-fg-159; } .xterm-fg-160 { - color: #d70000; + color: $xterm-fg-160; } .xterm-fg-161 { - color: #d7005f; + color: $xterm-fg-161; } .xterm-fg-162 { - color: #d70087; + color: $xterm-fg-162; } .xterm-fg-163 { - color: #d700af; + color: $xterm-fg-163; } .xterm-fg-164 { - color: #d700d7; + color: $xterm-fg-164; } .xterm-fg-165 { - color: #d700ff; + color: $xterm-fg-165; } .xterm-fg-166 { - color: #d75f00; + color: $xterm-fg-166; } .xterm-fg-167 { - color: #d75f5f; + color: $xterm-fg-167; } .xterm-fg-168 { - color: #d75f87; + color: $xterm-fg-168; } .xterm-fg-169 { - color: #d75faf; + color: $xterm-fg-169; } .xterm-fg-170 { - color: #d75fd7; + color: $xterm-fg-170; } .xterm-fg-171 { - color: #d75fff; + color: $xterm-fg-171; } .xterm-fg-172 { - color: #d78700; + color: $xterm-fg-172; } .xterm-fg-173 { - color: #d7875f; + color: $xterm-fg-173; } .xterm-fg-174 { - color: #d78787; + color: $xterm-fg-174; } .xterm-fg-175 { - color: #d787af; + color: $xterm-fg-175; } .xterm-fg-176 { - color: #d787d7; + color: $xterm-fg-176; } .xterm-fg-177 { - color: #d787ff; + color: $xterm-fg-177; } .xterm-fg-178 { - color: #d7af00; + color: $xterm-fg-178; } .xterm-fg-179 { - color: #d7af5f; + color: $xterm-fg-179; } .xterm-fg-180 { - color: #d7af87; + color: $xterm-fg-180; } .xterm-fg-181 { - color: #d7afaf; + color: $xterm-fg-181; } .xterm-fg-182 { - color: #d7afd7; + color: $xterm-fg-182; } .xterm-fg-183 { - color: #d7afff; + color: $xterm-fg-183; } .xterm-fg-184 { - color: #d7d700; + color: $xterm-fg-184; } .xterm-fg-185 { - color: #d7d75f; + color: $xterm-fg-185; } .xterm-fg-186 { - color: #d7d787; + color: $xterm-fg-186; } .xterm-fg-187 { - color: #d7d7af; + color: $xterm-fg-187; } .xterm-fg-188 { - color: #d7d7d7; + color: $xterm-fg-188; } .xterm-fg-189 { - color: #d7d7ff; + color: $xterm-fg-189; } .xterm-fg-190 { - color: #d7ff00; + color: $xterm-fg-190; } .xterm-fg-191 { - color: #d7ff5f; + color: $xterm-fg-191; } .xterm-fg-192 { - color: #d7ff87; + color: $xterm-fg-192; } .xterm-fg-193 { - color: #d7ffaf; + color: $xterm-fg-193; } .xterm-fg-194 { - color: #d7ffd7; + color: $xterm-fg-194; } .xterm-fg-195 { - color: #d7ffff; + color: $xterm-fg-195; } .xterm-fg-196 { - color: #f00; + color: $xterm-fg-196; } .xterm-fg-197 { - color: #ff005f; + color: $xterm-fg-197; } .xterm-fg-198 { - color: #ff0087; + color: $xterm-fg-198; } .xterm-fg-199 { - color: #ff00af; + color: $xterm-fg-199; } .xterm-fg-200 { - color: #ff00d7; + color: $xterm-fg-200; } .xterm-fg-201 { - color: #f0f; + color: $xterm-fg-201; } .xterm-fg-202 { - color: #ff5f00; + color: $xterm-fg-202; } .xterm-fg-203 { - color: #ff5f5f; + color: $xterm-fg-203; } .xterm-fg-204 { - color: #ff5f87; + color: $xterm-fg-204; } .xterm-fg-205 { - color: #ff5faf; + color: $xterm-fg-205; } .xterm-fg-206 { - color: #ff5fd7; + color: $xterm-fg-206; } .xterm-fg-207 { - color: #ff5fff; + color: $xterm-fg-207; } .xterm-fg-208 { - color: #ff8700; + color: $xterm-fg-208; } .xterm-fg-209 { - color: #ff875f; + color: $xterm-fg-209; } .xterm-fg-210 { - color: #ff8787; + color: $xterm-fg-210; } .xterm-fg-211 { - color: #ff87af; + color: $xterm-fg-211; } .xterm-fg-212 { - color: #ff87d7; + color: $xterm-fg-212; } .xterm-fg-213 { - color: #ff87ff; + color: $xterm-fg-213; } .xterm-fg-214 { - color: #ffaf00; + color: $xterm-fg-214; } .xterm-fg-215 { - color: #ffaf5f; + color: $xterm-fg-215; } .xterm-fg-216 { - color: #ffaf87; + color: $xterm-fg-216; } .xterm-fg-217 { - color: #ffafaf; + color: $xterm-fg-217; } .xterm-fg-218 { - color: #ffafd7; + color: $xterm-fg-218; } .xterm-fg-219 { - color: #ffafff; + color: $xterm-fg-219; } .xterm-fg-220 { - color: #ffd700; + color: $xterm-fg-220; } .xterm-fg-221 { - color: #ffd75f; + color: $xterm-fg-221; } .xterm-fg-222 { - color: #ffd787; + color: $xterm-fg-222; } .xterm-fg-223 { - color: #ffd7af; + color: $xterm-fg-223; } .xterm-fg-224 { - color: #ffd7d7; + color: $xterm-fg-224; } .xterm-fg-225 { - color: #ffd7ff; + color: $xterm-fg-225; } .xterm-fg-226 { - color: #ff0; + color: $xterm-fg-226; } .xterm-fg-227 { - color: #ffff5f; + color: $xterm-fg-227; } .xterm-fg-228 { - color: #ffff87; + color: $xterm-fg-228; } .xterm-fg-229 { - color: #ffffaf; + color: $xterm-fg-229; } .xterm-fg-230 { - color: #ffffd7; + color: $xterm-fg-230; } .xterm-fg-231 { - color: #fff; + color: $xterm-fg-231; } .xterm-fg-232 { - color: #080808; + color: $xterm-fg-232; } .xterm-fg-233 { - color: #121212; + color: $xterm-fg-233; } .xterm-fg-234 { - color: #1c1c1c; + color: $xterm-fg-234; } .xterm-fg-235 { - color: #262626; + color: $xterm-fg-235; } .xterm-fg-236 { - color: #303030; + color: $xterm-fg-236; } .xterm-fg-237 { - color: #3a3a3a; + color: $xterm-fg-237; } .xterm-fg-238 { - color: #444; + color: $xterm-fg-238; } .xterm-fg-239 { - color: #4e4e4e; + color: $xterm-fg-239; } .xterm-fg-240 { - color: #585858; + color: $xterm-fg-240; } .xterm-fg-241 { - color: #626262; + color: $xterm-fg-241; } .xterm-fg-242 { - color: #6c6c6c; + color: $xterm-fg-242; } .xterm-fg-243 { - color: #767676; + color: $xterm-fg-243; } .xterm-fg-244 { - color: #808080; + color: $xterm-fg-244; } .xterm-fg-245 { - color: #8a8a8a; + color: $xterm-fg-245; } .xterm-fg-246 { - color: #949494; + color: $xterm-fg-246; } .xterm-fg-247 { - color: #9e9e9e; + color: $xterm-fg-247; } .xterm-fg-248 { - color: #a8a8a8; + color: $xterm-fg-248; } .xterm-fg-249 { - color: #b2b2b2; + color: $xterm-fg-249; } .xterm-fg-250 { - color: #bcbcbc; + color: $xterm-fg-250; } .xterm-fg-251 { - color: #c6c6c6; + color: $xterm-fg-251; } .xterm-fg-252 { - color: #d0d0d0; + color: $xterm-fg-252; } .xterm-fg-253 { - color: #dadada; + color: $xterm-fg-253; } .xterm-fg-254 { - color: #e4e4e4; + color: $xterm-fg-254; } .xterm-fg-255 { - color: #eee; + color: $xterm-fg-255; } } |