gitlab-org--gitlab-foss/app/assets/stylesheets/framework/variables.scss

/*
 * Layout
 */
$sidebar_collapsed_width: 62px;
$sidebar_width: 220px;
$gutter_collapsed_width: 62px;
$gutter_width: 290px;
$gutter_inner_width: 258px;
$sidebar-transition-duration: .15s;
$sidebar-breakpoint: 1024px;

/*
 * Color schema
 */
$darken-normal-factor: 7%;
$darken-dark-factor: 10%;
$darken-border-factor: 5%;

$white-light: #fff;
$white-normal: #f0f0f0;
$white-dark: #eaeaea;

$gray-lightest: #fdfdfd;
$gray-light: #fafafa;
$gray-lighter: #f9f9f9;
$gray-normal: #f5f5f5;
$gray-dark: darken($gray-light, $darken-dark-factor);
$gray-darker: #eee;
$gray-darkest: #c4c4c4;

$green-light: #3cbd70;
$green-normal: darken($green-light, $darken-normal-factor);
$green-dark: darken($green-light, $darken-dark-factor);

$blue-light: #2ea8e5;
$blue-normal: darken($blue-light, $darken-normal-factor);
$blue-dark: darken($blue-light, $darken-dark-factor);

$blue-medium-light: #3498cb;
$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: darken($orange-light, $darken-normal-factor);
$orange-dark: darken($orange-light, $darken-dark-factor);

$red-light: #e52c5a;
$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: darken($white-light, $darken-border-factor);
$border-white-normal: darken($white-normal, $darken-border-factor);

$border-gray-normal: darken($gray-normal, $darken-border-factor);
$border-gray-dark: darken($white-normal, $darken-border-factor);

$border-green-extra-light: #9adb84;
$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: 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: 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: darken($red-light, $darken-border-factor);
$border-red-normal: darken($red-normal, $darken-border-factor);
$border-red-dark: darken($red-dark, $darken-border-factor);

$warning-message-bg: #fbf2d9;
$warning-message-color: #9e8e60;
$warning-message-border: #f0e2bb;

/*
 * UI elements
 */
$border-color: #e5e5e5;
$focus-border-color: #3aabf0;
$well-expand-item: #e8f2f7;
$well-inner-border: #eef0f2;
$well-light-border: #f1f1f1;
$well-light-text-color: #5b6169;

/*
 * Text
 */
$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-gray-light: #8f8f8f;
$gl-grayish-blue: #7f8fa4;
$gl-gray: $gl-text-color;
$gl-gray-dark: #313236;
$gl-header-color: #4c4e54;

/*
 * Lists
 */
$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
 */
$code_font_size: 12px;
$code_line_height: 1.6;

/*
 * Padding
 */
$gl-padding: 16px;
$gl-btn-padding: 10px;
$gl-input-padding: 10px;
$gl-vert-padding: 6px;
$gl-padding-top: 10px;
$gl-sidebar-padding: 22px;

/*
 * Misc
 */
$row-hover: #f7faff;
$row-hover-border: #b2d7ff;
$progress-color: #c0392b;
$header-height: 50px;
$fixed-layout-width: 1280px;
$limited-layout-width: 990px;
$gl-avatar-size: 40px;
$error-exclamation-point: #e62958;
$border-radius-default: 2px;
$settings-icon-size: 18px;
$provider-btn-not-active-color: #4688f1;
$link-underline-blue: #4a8bee;
$active-item-blue: #4a8bee;
$layout-link-gray: #7e7c7c;
$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;

/*
* 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;
$tanuki-orange: #fc6d26;
$tanuki-yellow: #fca326;

/*
 * State colors:
 */
$gl-primary: $blue-normal;
$gl-success: $green-normal;
$gl-success-focus: rgba($gl-success, .4);
$gl-info: $blue-normal;
$gl-warning: $orange-normal;
$gl-danger: $red-normal;
$gl-btn-active-background: rgba(0, 0, 0, 0.16);
$gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background;

/*
 * Commit Diff Colors
 */
$added: #63c363;
$deleted: #f77;
$line-added: #ecfdf0;
$line-added-dark: #c7f0d2;
$line-removed: #fbe9eb;
$line-removed-dark: #fac5cd;
$line-number-old: #f9d7dc;
$line-number-new: #ddfbe6;
$line-number-select: #fbf2da;
$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-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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

/*
* Dropdowns
*/
$dropdown-width: 300px;
$dropdown-link-color: #555;
$dropdown-link-hover-bg: $row-hover;
$dropdown-empty-row-bg: rgba(#000, .04);
$dropdown-border-color: $border-color;
$dropdown-shadow-color: rgba(#000, .1);
$dropdown-divider-color: rgba(#000, .1);
$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-active-border-color: darken($border-color, 14%);


/*
* Buttons
*/
$btn-active-gray: #ececec;
$btn-active-gray-light: e4e7ed;

/*
* Badges
*/
$badge-bg: #f3f3f3;
$badge-bg-dark: #eee;
$badge-color: #929292;
$badge-color-dark: #8f8f8f;

/*
 *  Award emoji
 */
$award-emoji-menu-shadow: rgba(0,0,0,.175);

/*
 * Search Box
 */
$search-input-border-color: rgba(#4688f1, .8);
$search-input-focus-shadow-color: $dropdown-input-focus-shadow;
$search-input-width: 220px;
$location-badge-active-bg: #4f91f8;
$location-icon-color: #e7e9ed;

/*
 *  Notes
 */
$notes-light-color: #8e8e8e;
$notes-role-color: #8e8e8e;
$note-disabled-comment-color: #b2b2b2;
$note-targe3-outside: #fffff0;
$note-targe3-inside: #ffffd3;
$note-line2-border: #ddd;


/*
* Zen
*/
$zen-control-color: #555;

/*
* Calendar
*/
$calendar-hover-bg: #ecf3fe;
$calendar-border-color: rgba(#000, .1);
$calendar-user-contrib-text: #959494;

/*
 *  Cycle Analytics
 */
$cycle-analytics-box-padding: 30px;
$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;

/*
* CI
*/
$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-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);

/*
* Help
*/
$document-index-color: #888;
$help-shortcut-color: #999;
$help-shortcut-mapping-color: #555;
$help-shortcut-header-color: #333;

/*
* Issues
*/
$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: 100px;

/*
* 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;

/*
* Runners
*/
$runner-state-shared-bg: #32b186;
$runner-state-specific-bg: #3498db;
$runner-status-online-color: $green-normal;
$runner-status-offline-color: $gray-darkest;
$runner-status-paused-color: $red-normal;

/*
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;

/*
Pipeline Graph
*/
$stage-hover-bg: #eaf3fc;
$stage-hover-border: #d1e7fc;