variables.scss 12.8 KB
Newer Older
1 2 3 4 5
/*
 * Layout
 */
$gutter_collapsed_width: 62px;
$gutter_width: 290px;
6
$gutter_inner_width: 250px;
7
$sidebar-transition-duration: .15s;
8
$sidebar-breakpoint: 1024px;
9

10 11 12
/*
 * Color schema
 */
13
$darken-normal-factor: 7%;
14 15 16
$darken-dark-factor: 10%;
$darken-border-factor: 5%;

17
$white-light: #fff;
18 19
$white-normal: #f0f0f0;
$white-dark: #eaeaea;
20

21
$gray-lightest: #fdfdfd;
22
$gray-light: #fafafa;
23
$gray-lighter: #f9f9f9;
24
$gray-normal: #f5f5f5;
25
$gray-dark: darken($gray-light, $darken-dark-factor);
26
$gray-darker: #eee;
27
$gray-darkest: #c4c4c4;
28

29
$green-25: #f6fcf8;
30 31 32 33 34 35 36 37 38 39 40
$green-50: #e4f5eb;
$green-100: #bae6cc;
$green-200: #8dd5aa;
$green-300: #5fc488;
$green-400: #3cb76f;
$green-500: #1aaa55;
$green-600: #168f48;
$green-700: #12753a;
$green-800: #0e5a2d;
$green-900: #0a4020;

41
$blue-25: #f6fafd;
42 43 44 45 46 47 48 49 50 51 52
$blue-50: #e4eff9;
$blue-100: #bcd7f1;
$blue-200: #8fbce8;
$blue-300: #62a1df;
$blue-400: #418cd8;
$blue-500: #1f78d1;
$blue-600: #1b69b6;
$blue-700: #17599c;
$blue-800: #134a81;
$blue-900: #0f3b66;

53
$orange-25: #fffcf8;
54 55 56 57 58 59 60 61 62 63 64
$orange-50: #fff2e1;
$orange-100: #fedfb3;
$orange-200: #feca81;
$orange-300: #fdb44f;
$orange-400: #fca429;
$orange-500: #fc9403;
$orange-600: #de7e00;
$orange-700: #c26700;
$orange-800: #a35100;
$orange-900: #853b00;

65
$red-25: #fef7f6;
66 67 68 69 70 71 72 73 74 75
$red-50: #fbe7e4;
$red-100: #f4c4bc;
$red-200: #ed9d90;
$red-300: #e67664;
$red-400: #e05842;
$red-500: #db3b21;
$red-600: #c0341d;
$red-700: #a62d19;
$red-800: #8b2615;
$red-900: #711e11;
76

77 78 79 80 81 82 83 84 85 86 87
$indigo-50: #f7f7ff;
$indigo-100: #ebebfa;
$indigo-200: #d1d1f0;
$indigo-300: #a6a6de;
$indigo-400: #7c7ccc;
$indigo-500: #6666c4;
$indigo-600: #5b5bbd;
$indigo-700: #4b4ba3;
$indigo-800: #393982;
$indigo-900: #292961;
$indigo-950: #1a1a40;
Phil Hughes's avatar
Phil Hughes committed
88

89 90 91
$black: #000;
$black-transparent: rgba(0, 0, 0, 0.3);

92 93
$border-white-light: darken($white-light, $darken-border-factor);
$border-white-normal: darken($white-normal, $darken-border-factor);
94

95
$border-gray-light: darken($gray-light, $darken-border-factor);
96
$border-gray-normal: darken($gray-normal, $darken-border-factor);
97
$border-gray-dark: darken($white-normal, $darken-border-factor);
98

99 100 101
/*
 * UI elements
 */
102
$border-color: #e5e5e5;
103
$focus-border-color: $blue-300;
104 105
$well-expand-item: #e8f2f7;
$well-inner-border: #eef0f2;
106 107
$well-light-border: #f1f1f1;
$well-light-text-color: #5b6169;
108 109 110 111

/*
 * Text
 */
112
$gl-font-size: 14px;
113 114 115 116
$gl-text-color: #2e2e2e;
$gl-text-color-secondary: #707070;
$gl-text-color-tertiary: #949494;
$gl-text-color-quaternary: #d6d6d6;
117 118
$gl-text-color-inverted: rgba(255, 255, 255, 1.0);
$gl-text-color-secondary-inverted: rgba(255, 255, 255, .85);
119 120 121 122 123
$gl-text-green: $green-600;
$gl-text-red: $red-500;
$gl-text-orange: $orange-600;
$gl-link-color: $blue-600;
$gl-link-hover-color: $blue-800;
124 125 126
$gl-grayish-blue: #7f8fa4;
$gl-gray: $gl-text-color;
$gl-gray-dark: #313236;
127
$gl-gray-light: #5c5c5c;
128
$gl-header-color: #4c4e54;
129
$gl-header-nav-hover-color: #434343;
130
$placeholder-text-color: $gl-text-color-tertiary;
131 132 133 134

/*
 * Lists
 */
135
$list-font-size: $gl-font-size;
136
$list-title-color: $gl-text-color;
137
$list-text-color: $gl-text-color;
138
$list-text-disabled-color: $gl-text-color-tertiary;
139 140
$list-border-light: #eee;
$list-border: rgba(0, 0, 0, 0.05);
141
$list-text-height: 42px;
142 143 144
$list-warning-row-bg: $orange-50;
$list-warning-row-border: $orange-100;
$list-warning-row-color: $orange-700;
145

146 147 148
/*
 * Markdown
 */
149
$md-link-color: $gl-link-color;
150
$md-area-border: #ddd;
151 152 153 154

/*
 * Code
 */
155
$code_font_size: 12px;
156
$code_line_height: 1.6;
157 158 159 160

/*
 * Padding
 */
161
$gl-padding: 16px;
162
$gl-col-padding: 15px;
163
$gl-btn-padding: 10px;
164
$gl-input-padding: 10px;
165
$gl-vert-padding: 6px;
166
$gl-padding-top: 10px;
167
$gl-sidebar-padding: 22px;
168 169 170 171

/*
 * Misc
 */
172
$row-hover: $blue-25;
173
$row-hover-border: $blue-100;
174
$progress-color: #c0392b;
175
$header-height: 50px;
176
$fixed-layout-width: 1280px;
177
$limited-layout-width: 990px;
178
$limited-layout-width-sm: 790px;
179
$container-text-max-width: 540px;
180
$gl-avatar-size: 40px;
181
$error-exclamation-point: $red-500;
182
$border-radius-default: 3px;
183
$settings-icon-size: 18px;
184 185 186
$provider-btn-not-active-color: $blue-500;
$link-underline-blue: $blue-500;
$active-item-blue: $blue-500;
187
$layout-link-gray: #7e7c7c;
188 189
$btn-side-margin: 10px;
$btn-sm-side-margin: 7px;
190
$btn-xs-side-margin: 5px;
191
$issue-status-expired: $orange-500;
192
$issuable-sidebar-color: $gl-text-color-secondary;
193 194 195 196 197 198 199 200 201 202 203
$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;
204
$general-hover-transition-duration: 100ms;
205
$general-hover-transition-curve: linear;
206
$highlight-changes-color: rgb(235, 255, 232);
207

208 209 210 211 212 213 214 215 216 217 218 219 220

/*
* 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;
221 222 223 224
$error-bg: $red-400;
$warning-message-bg: $orange-50;
$warning-message-border: $orange-100;
$warning-message-color: $orange-700;
225 226 227 228 229
$control-group-descr-color: #666;
$table-permission-x-bg: #d9edf7;
$username-color: #666;
$description-color: #666;
$profiler-border: #eee;
Phil Hughes's avatar
Phil Hughes committed
230

231 232 233 234 235
/* tanuki logo colors */
$tanuki-red: #e24329;
$tanuki-orange: #fc6d26;
$tanuki-yellow: #fca326;

236
/*
237
 * State colors:
238
 */
239 240
$gl-primary: $blue-500;
$gl-success: $green-500;
Phil Hughes's avatar
Phil Hughes committed
241
$gl-success-focus: rgba($gl-success, .4);
242 243 244
$gl-info: $blue-500;
$gl-warning: $orange-500;
$gl-danger: $red-500;
Annabel Dunstone's avatar
Annabel Dunstone committed
245 246
$gl-btn-active-background: rgba(0, 0, 0, 0.16);
$gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background;
247

248
/*
249 250
 * Commit Diff Colors
 */
251 252 253 254 255 256 257 258 259 260 261 262
$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;
263 264 265 266 267 268 269 270
$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-info-color: grey;
$diff-swipe-border: #999;
$diff-view-modes-color: grey;
$diff-view-modes-border: #c1c1c1;
271

272 273 274
/*
 * Fonts
 */
275
$monospace_font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
276
$regular_font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
Phil Hughes's avatar
Phil Hughes committed
277 278 279 280

/*
* Dropdowns
*/
281
$dropdown-width: 300px;
Phil Hughes's avatar
Phil Hughes committed
282
$dropdown-link-color: #555;
283
$dropdown-link-hover-bg: $row-hover;
284
$dropdown-empty-row-bg: rgba(#000, .04);
285
$dropdown-border-color: $border-color;
Phil Hughes's avatar
Phil Hughes committed
286 287
$dropdown-shadow-color: rgba(#000, .1);
$dropdown-divider-color: rgba(#000, .1);
288
$dropdown-title-btn-color: #bfbfbf;
289
$dropdown-input-color: #555;
290
$dropdown-input-fa-color: #c7c7c7;
291
$dropdown-input-focus-border: $focus-border-color;
292
$dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, .4);
Phil Hughes's avatar
Phil Hughes committed
293
$dropdown-loading-bg: rgba(#fff, .6);
294
$dropdown-chevron-size: 10px;
295
$dropdown-toggle-active-border-color: darken($border-color, 14%);
296

297

298 299 300
/*
* Filtered Search
*/
301
$filtered-search-term-shadow-color: rgba(0, 0, 0, 0.09);
302
$dropdown-hover-color: $blue-400;
303

Annabel Dunstone's avatar
Annabel Dunstone committed
304 305 306
/*
* Buttons
*/
Annabel Dunstone's avatar
Annabel Dunstone committed
307
$btn-active-gray: #ececec;
308
$btn-active-gray-light: e4e7ed;
309
$btn-white-active: #848484;
Annabel Dunstone's avatar
Annabel Dunstone committed
310

311 312 313
/*
* Badges
*/
314
$badge-bg: rgba(0, 0, 0, 0.07);
315
$badge-color: $gl-text-color-secondary;
316

317 318 319
/*
 *  Award emoji
 */
320
$award-emoji-menu-shadow: rgba(0, 0, 0, .175);
321 322
$award-emoji-positive-add-bg: #fed159;
$award-emoji-positive-add-lines: #bb9c13;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
323 324 325 326

/*
 * Search Box
 */
327
$search-input-border-color: rgba($blue-400, .8);
328
$search-input-focus-shadow-color: $dropdown-input-focus-shadow;
329
$search-input-width: 220px;
330
$location-badge-active-bg: $blue-500;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
331
$location-icon-color: #e7e9ed;
Phil Hughes's avatar
Phil Hughes committed
332 333 334 335

/*
 *  Notes
 */
336 337
$notes-light-color: $gl-text-color-secondary;
$notes-role-color: $gl-text-color-secondary;
Phil Hughes's avatar
Phil Hughes committed
338
$note-disabled-comment-color: #b2b2b2;
339 340 341
$note-targe3-outside: #fffff0;
$note-targe3-inside: #ffffd3;
$note-line2-border: #ddd;
342
$note-icon-gutter-width: 55px;
343

Phil Hughes's avatar
Phil Hughes committed
344

345 346 347 348
/*
* Zen
*/
$zen-control-color: #555;
Phil Hughes's avatar
Phil Hughes committed
349

350 351 352
/*
* Calendar
*/
Phil Hughes's avatar
Phil Hughes committed
353 354
$calendar-hover-bg: #ecf3fe;
$calendar-border-color: rgba(#000, .1);
355
$calendar-user-contrib-text: #959494;
Phil Hughes's avatar
Phil Hughes committed
356

357 358 359 360 361
/*
 *  Cycle Analytics
 */
$cycle-analytics-box-padding: 30px;
$cycle-analytics-box-text-color: #8c8c8c;
362
$cycle-analytics-big-font: 19px;
363
$cycle-analytics-dark-text: $gl-text-color;
364
$cycle-analytics-light-gray: #bfbfbf;
365
$cycle-analytics-dismiss-icon-color: #b2b2b2;
366

367 368 369 370
/*
* CI
*/
$ci-skipped-color: #888;
Phil Hughes's avatar
Phil Hughes committed
371

372 373 374
/*
* Boards
*/
375
$issue-boards-font-size: 14px;
376 377 378 379 380 381
$issue-boards-card-shadow: rgba(186, 186, 186, 0.5);

/*
* Avatar
*/
$avatar_radius: 50%;
382
$avatar-border: $border-color;
383 384
$gl-avatar-size: 40px;

Jeff Stubler's avatar
Jeff Stubler committed
385 386 387 388 389 390 391
/*
* Blame
*/
$blame-gray: #ededed;
$blame-cyan: #acd5f2;
$blame-blue: #254e77;

392 393 394 395 396 397 398 399
/*
* Builds
*/
$builds-trace-bg: #111;

/*
* Callout
*/
400 401 402 403 404 405 406 407 408 409 410 411
$callout-danger-bg: $red-50;
$callout-danger-border: $red-100;
$callout-danger-color: $red-700;
$callout-warning-bg: $orange-50;
$callout-warning-border: $orange-100;
$callout-warning-color: $orange-700;
$callout-info-bg: $blue-50;
$callout-info-border: $blue-100;
$callout-info-color: $blue-700;
$callout-success-bg: $green-50;
$callout-success-border: $green-100;
$callout-success-color: $green-700;
412 413 414 415 416 417 418 419 420 421

/*
* 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
*/
422
$common-gray: $gl-text-color;
423 424 425 426 427 428 429 430
$common-gray-light: #bbb;
$common-gray-dark: #444;
$common-red: $gl-text-red;
$common-green: $gl-text-green;

/*
* Editor
*/
431
$editor-cancel-color: $red-600;
432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453

/*
* 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
*/
454
$input-height: 34px;
455
$input-danger-bg: #f2dede;
456
$input-danger-border: $red-400;
457 458
$input-group-addon-bg: #f7f8fa;
$gl-field-focus-shadow: rgba(0, 0, 0, 0.075);
459
$gl-field-focus-shadow-error: rgba($red-500, 0.6);
460 461 462 463 464 465 466 467 468 469 470 471 472 473

/*
* 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;
Bryce Johnson's avatar
Bryce Johnson committed
474
$compare-display-color: #888;
475 476 477 478 479 480 481 482 483 484 485 486 487

/*
* 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);
488
$label-border-radius: 100px;
489

490 491 492 493 494
/*
* Animation
*/
$fade-in-duration: 200ms;

495 496 497
/*
* Lint
*/
498 499
$lint-incorrect-color: $red-500;
$lint-correct-color: $green-500;
500 501 502 503 504

/*
* Login
*/
$login-brand-holder-color: #888;
505
$login-devise-error-color: $red-700;
506 507 508 509 510 511 512 513 514 515 516 517 518

/*
* Nav
*/
$nav-link-gray: #959494;
$nav-badge-bg: #eee;
$nav-toggle-gray: #666;

/*
* Notify
*/
$notify-details: #777;
$notify-footer: #777;
519 520
$notify-new-file: $green-600;
$notify-deleted-file: $red-700;
521 522 523 524 525 526

/*
* Projects
*/
$project-option-descr-color: #54565b;
$project-breadcrumb-color: #999;
527
$project-private-forks-notice-odd: $green-600;
528 529 530 531 532
$project-network-controls-color: #888;

/*
* Runners
*/
533 534 535
$runner-state-shared-bg: $green-400;
$runner-state-specific-bg: $blue-400;
$runner-status-online-color: $green-600;
536
$runner-status-offline-color: $gray-darkest;
537
$runner-status-paused-color: $red-500;
538 539 540 541 542

/*
Stat Graph
*/
$stat-graph-common-bg: #f3f3f3;
543
$stat-graph-area-fill: $green-500;
544
$stat-graph-axis-fill: #aaa;
545
$stat-graph-orange-fill: $orange-500;
546 547 548 549 550 551 552 553 554 555 556 557 558
$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
*/
559
$todo-alert-blue: $blue-500;
560 561 562 563 564 565 566 567 568 569 570
$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;
571
$body-text-shadow: rgba(255, 255, 255, 0.01);
572 573 574 575 576 577

/*
* UI Dev Kit
*/
$ui-dev-kit-example-color: #bbb;
$ui-dev-kit-example-border: #ddd;
Filipa Lacerda's avatar
Filipa Lacerda committed
578 579 580 581 582 583

/*
Pipeline Graph
*/
$stage-hover-bg: #eaf3fc;
$stage-hover-border: #d1e7fc;
584
$action-icon-color: #d6d6d6;
585

586 587 588 589 590 591
/*
Pipeline Schedules
*/
$pipeline-variable-remove-button-width: calc(1em + #{2 * $gl-padding});


592 593 594 595 596 597 598 599
/*
Filtered Search
*/
$filter-name-resting-color: #f8f8f8;
$filter-name-text-color: rgba(0, 0, 0, 0.55);
$filter-value-text-color: rgba(0, 0, 0, 0.85);
$filter-name-selected-color: #ebebeb;
$filter-value-selected-color: #d7d7d7;
600 601 602 603 604

/*
Animation Functions
*/
$dropdown-animation-timing: cubic-bezier(0.23, 1, 0.32, 1);
605 606 607 608 609 610 611

/*
Convdev Index
*/
$color-high-score: $green-400;
$color-average-score: $orange-400;
$color-low-score: $red-400;
612 613 614 615 616 617 618 619 620 621 622 623

/*
Performance Bar
*/
$perf-bar-text: #999;
$perf-bar-production: #222;
$perf-bar-staging: #291430;
$perf-bar-development: #4c1210;
$perf-bar-bucket-bg: #111;
$perf-bar-bucket-color: #ccc;
$perf-bar-bucket-box-shadow-from: rgba($white-light, .2);
$perf-bar-bucket-box-shadow-to: rgba($black, .25);