/* * Layout */ $grid-size: 8px; $gutter_collapsed_width: 62px; $gutter_width: 290px; $gutter_inner_width: 250px; $sidebar-transition-duration: 0.3s; $sidebar-breakpoint: 1024px; $default-transition-duration: 0.15s; $contextual-sidebar-width: 220px; $contextual-sidebar-collapsed-width: 50px; /* * Color schema */ $darken-normal-factor: 7%; $darken-dark-factor: 10%; $darken-border-factor: 5%; $darken-border-dashed-factor: 25%; $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-50: #f1fdf6; $green-100: #dcf5e7; $green-200: #b3e6c8; $green-300: #75d09b; $green-400: #37b96d; $green-500: #1aaa55; $green-600: #168f48; $green-700: #12753a; $green-800: #0e5a2d; $green-900: #0a4020; $green-950: #072b15; $blue-50: #f6fafe; $blue-100: #e4f0fb; $blue-200: #b8d6f4; $blue-300: #73afea; $blue-400: #2e87e0; $blue-500: #1f78d1; $blue-600: #1b69b6; $blue-700: #17599c; $blue-800: #134a81; $blue-900: #0f3b66; $blue-950: #0a2744; $orange-50: #fffaf4; $orange-100: #fff1de; $orange-200: #fed69f; $orange-300: #fdbc60; $orange-400: #fca121; $orange-500: #fc9403; $orange-600: #de7e00; $orange-700: #c26700; $orange-800: #a35200; $orange-900: #853c00; $orange-950: #592800; $red-50: #fef6f5; $red-100: #fbe5e1; $red-200: #f2b4a9; $red-300: #e67664; $red-400: #e05842; $red-500: #db3b21; $red-600: #c0341d; $red-700: #a62d19; $red-800: #8b2615; $red-900: #711e11; $red-950: #4b140b; // GitLab themes $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; $theme-gray-50: #fafafa; $theme-gray-100: #f2f2f2; $theme-gray-200: #dfdfdf; $theme-gray-300: #cccccc; $theme-gray-400: #bababa; $theme-gray-500: #a7a7a7; $theme-gray-600: #949494; $theme-gray-700: #707070; $theme-gray-800: #4f4f4f; $theme-gray-900: #2e2e2e; $theme-gray-950: #1f1f1f; $theme-blue-50: #f4f8fc; $theme-blue-100: #e6edf5; $theme-blue-200: #c8d7e6; $theme-blue-300: #97b3cf; $theme-blue-400: #648cb4; $theme-blue-500: #4a79a8; $theme-blue-600: #3e6fa0; $theme-blue-700: #305c88; $theme-blue-800: #25496e; $theme-blue-900: #1a3652; $theme-blue-950: #0f2235; $theme-green-50: #f2faf6; $theme-green-100: #e4f3ea; $theme-green-200: #c0dfcd; $theme-green-300: #8ac2a1; $theme-green-400: #52a274; $theme-green-500: #35935c; $theme-green-600: #288a50; $theme-green-700: #1c7441; $theme-green-800: #145d33; $theme-green-900: #0d4524; $theme-green-950: #072d16; $black: #000; $black-transparent: rgba(0, 0, 0, 0.3); $almost-black: #242424; $border-white-light: darken($white-light, $darken-border-factor); $border-white-normal: darken($white-normal, $darken-border-factor); $border-gray-light: darken($gray-light, $darken-border-factor); $border-gray-normal: darken($gray-normal, $darken-border-factor); $border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor); $border-gray-dark: darken($white-normal, $darken-border-factor); /* * UI elements */ $border-color: #e5e5e5; $focus-border-color: $blue-300; $well-expand-item: #e8f2f7; $well-inner-border: #eef0f2; $well-light-border: #f1f1f1; $well-light-text-color: #5b6169; /* * Text */ $gl-font-size: 14px; $gl-font-weight-normal: 400; $gl-font-weight-bold: 600; $gl-text-color: #2e2e2e; $gl-text-color-secondary: #707070; $gl-text-color-tertiary: #949494; $gl-text-color-quaternary: #d6d6d6; $gl-text-color-inverted: rgba(255, 255, 255, 1); $gl-text-color-secondary-inverted: rgba(255, 255, 255, 0.85); $gl-text-color-disabled: #919191; $gl-text-green: $green-600; $gl-text-green-hover: $green-700; $gl-text-red: $red-500; $gl-text-orange: $orange-600; $gl-link-color: $blue-600; $gl-link-hover-color: $blue-800; $gl-grayish-blue: #7f8fa4; $gl-gray: $gl-text-color; $gl-gray-dark: #313236; $gl-gray-light: #5c5c5c; $gl-header-color: #4c4e54; $gl-header-nav-hover-color: #434343; $placeholder-text-color: $gl-text-color-tertiary; /* * Lists */ $list-font-size: $gl-font-size; $list-title-color: $gl-text-color; $list-text-color: $gl-text-color; $list-text-disabled-color: $gl-text-color-tertiary; $list-border-light: #eee; $list-border: rgba(0, 0, 0, 0.05); $list-text-height: 42px; $list-warning-row-bg: $orange-100; $list-warning-row-border: $orange-200; $list-warning-row-color: $orange-700; /* * Markdown */ $md-link-color: $gl-link-color; $md-area-border: #ddd; /* * Code */ $code_font_size: 12px; $code_line_height: 1.6; /* * Tooltips */ $tooltip-font-size: 12px; /* * Padding */ $gl-padding-24: 24px; $gl-padding: 16px; $gl-padding-8: 8px; $gl-padding-4: 4px; $gl-col-padding: 15px; $gl-input-padding: 10px; $gl-vert-padding: 6px; $gl-padding-top: 10px; $gl-sidebar-padding: 22px; $gl-bar-padding: 3px; /* * Misc */ $row-hover: $blue-50; $row-hover-border: $blue-200; $progress-color: #c0392b; $header-height: 40px; $fixed-layout-width: 1280px; $limited-layout-width: 990px; $limited-layout-width-sm: 790px; $container-text-max-width: 540px; $gl-avatar-size: 40px; $error-exclamation-point: $red-500; $border-radius-default: 4px; $border-radius-small: 2px; $settings-icon-size: 18px; $provider-btn-not-active-color: $blue-500; $link-underline-blue: $blue-500; $active-item-blue: $blue-500; $layout-link-gray: #7e7c7c; $btn-side-margin: 10px; $btn-sm-side-margin: 7px; $btn-xs-side-margin: 5px; $issue-status-expired: $orange-500; $issuable-sidebar-color: $gl-text-color-secondary; $sidebar-block-hover-color: #ebebeb; $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; $general-hover-transition-duration: 100ms; $general-hover-transition-curve: linear; $highlight-changes-color: rgb(235, 255, 232); $performance-bar-height: 35px; $flash-height: 52px; $context-header-height: 60px; $breadcrumb-min-height: 48px; /* * Common component specific colors */ $hint-color: #999; $well-pre-bg: #eee; $well-pre-color: #555; $loading-color: #555; $update-author-color: #999; $user-mention-bg: rgba($blue-500, 0.044); $user-mention-bg-hover: rgba($blue-500, 0.15); $time-color: #999; $project-member-show-color: #aaa; $gl-promo-color: #aaa; $error-bg: $red-400; $warning-message-bg: $orange-100; $warning-message-border: $orange-200; $warning-message-color: $orange-700; $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-500; $gl-success: $green-500; $gl-success-focus: rgba($gl-success, 0.4); $gl-info: $blue-500; $gl-warning: $orange-500; $gl-danger: $red-500; $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-info-color: grey; $diff-swipe-border: #999; $diff-view-modes-color: grey; $diff-view-modes-border: #c1c1c1; $diff-jagged-border-gradient-color: darken($white-normal, 8%); /* * Fonts */ $monospace_font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', '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, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /* * Dropdowns */ $dropdown-width: 300px; $dropdown-min-height: 40px; $dropdown-max-height: 312px; $dropdown-vertical-offset: 4px; $dropdown-link-color: #555; $dropdown-link-hover-bg: $row-hover; $dropdown-empty-row-bg: rgba(#000, 0.04); $dropdown-border-color: $border-color; $dropdown-shadow-color: rgba(#000, 0.1); $dropdown-divider-color: rgba(#000, 0.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, 0.4); $dropdown-loading-bg: rgba(#fff, 0.6); $dropdown-chevron-size: 10px; $dropdown-toggle-active-border-color: darken($border-color, 14%); $dropdown-item-hover-bg: $gray-darker; $dropdown-fade-mask-height: 32px; /* * Filtered Search */ $filtered-search-term-shadow-color: rgba(0, 0, 0, 0.09); $dropdown-hover-color: $blue-400; /* * Contextual Sidebar */ $link-active-background: rgba(0, 0, 0, 0.04); $link-hover-background: rgba(0, 0, 0, 0.06); $inactive-badge-background: rgba(0, 0, 0, 0.08); $sidebar-toggle-height: 60px; $sidebar-milestone-toggle-bottom-margin: 10px; /* * Buttons */ $btn-active-gray: #ececec; $btn-active-gray-light: e4e7ed; $btn-white-active: #848484; $gl-btn-padding: 10px; $gl-btn-line-height: 16px; $gl-btn-vert-padding: 8px; $gl-btn-horz-padding: 12px; /* * Badges */ $badge-bg: rgba(0, 0, 0, 0.07); $badge-color: $gl-text-color-secondary; /* * Status icons */ $status-icon-size: 22px; $status-icon-margin: $gl-btn-padding; /* * Award emoji */ $award-emoji-menu-shadow: rgba(0, 0, 0, 0.175); $award-emoji-positive-add-bg: #fed159; $award-emoji-positive-add-lines: #bb9c13; /* * Search Box */ $search-input-border-color: rgba($blue-400, 0.8); $search-input-focus-shadow-color: $dropdown-input-focus-shadow; $search-input-width: 220px; $location-badge-active-bg: $blue-500; $location-icon-color: #e7e9ed; /* * Notes */ $notes-light-color: $gl-text-color-secondary; $note-disabled-comment-color: #b2b2b2; $note-targe3-outside: #fffff0; $note-targe3-inside: #ffffd3; $note-line2-border: #ddd; $note-icon-gutter-width: 55px; /* * Zen */ $zen-control-color: #555; /* * Calendar */ $calendar-hover-bg: #ecf3fe; $calendar-border-color: rgba(#000, 0.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-text-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); /* The following heights are used in boards.scss and are used for calculation of the board height. They probably should be derived in a smarter way. */ $issue-boards-filter-height: 68px; $issue-boards-breadcrumbs-height-xs: 63px; $issue-board-list-difference-xs: $header-height + $issue-boards-breadcrumbs-height-xs; $issue-board-list-difference-sm: $header-height + $breadcrumb-min-height; $issue-board-list-difference-md: $issue-board-list-difference-sm + $issue-boards-filter-height; /* * Avatar */ $avatar_radius: 50%; $avatar-border: $gray-normal; $avatar-border-hover: $gray-darker; $avatar-background: $gray-lightest; $gl-avatar-size: 40px; /* * Blame */ $blame-gray: #ededed; $blame-cyan: #acd5f2; $blame-blue: #254e77; /* * Builds */ $builds-trace-bg: #111; /* * Callout */ $callout-danger-bg: $red-100; $callout-danger-border: $red-200; $callout-danger-color: $red-700; $callout-warning-bg: $orange-100; $callout-warning-border: $orange-200; $callout-warning-color: $orange-700; $callout-info-bg: $blue-100; $callout-info-border: $blue-200; $callout-info-color: $blue-700; $callout-success-bg: $green-100; $callout-success-border: $green-200; $callout-success-color: $green-700; /* * Commit Page */ $commit-max-width-marker-color: rgba(0, 0, 0, 0); $commit-message-text-area-bg: rgba(0, 0, 0, 0); /* * Common */ $common-gray: $gl-text-color; $common-gray-light: #bbb; $common-gray-dark: #444; $common-red: $gl-text-red; $common-green: $gl-text-green; /* * Editor */ $editor-cancel-color: $red-600; /* * 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-height: 34px; $input-danger-bg: #f2dede; $input-danger-border: $red-400; $input-group-addon-bg: #f7f8fa; $gl-field-focus-shadow: rgba(0, 0, 0, 0.075); $gl-field-focus-shadow-error: rgba($red-500, 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; $compare-display-color: #888; /* * jQuery UI */ $jq-ui-border: #ddd; $jq-ui-default-color: #777; /* * Label */ $label-font-size: 12px; $label-padding: 7px; $label-padding-modal: 10px; $label-gray-bg: #f8fafc; $label-inverse-bg: #333; $label-remove-border: rgba(0, 0, 0, 0.1); $label-border-radius: 100px; /* * Animation */ $fade-in-duration: 200ms; $fade-mask-transition-duration: 0.1s; $fade-mask-transition-curve: ease-in-out; /* * Lint */ $lint-incorrect-color: $red-500; $lint-correct-color: $green-500; /* * Login */ $login-brand-holder-color: #888; $login-devise-error-color: $red-700; /* * Nav */ $nav-link-gray: #959494; $nav-badge-bg: #eee; $nav-toggle-gray: #666; /* * Notify */ $notify-details: #777; $notify-footer: #777; $notify-new-file: $green-600; $notify-deleted-file: $red-700; /* * Projects */ $project-option-descr-color: #54565b; $project-breadcrumb-color: #999; $project-private-forks-notice-odd: $green-600; $project-network-controls-color: #888; $feature-toggle-color: #fff; $feature-toggle-text-color: #fff; $feature-toggle-color-disabled: #999; $feature-toggle-color-enabled: #4a8bee; /* * Runners */ $runner-state-shared-bg: $green-400; $runner-state-specific-bg: $blue-400; $runner-status-online-color: $green-600; $runner-status-offline-color: $gray-darkest; $runner-status-paused-color: $red-500; /* Stat Graph */ $stat-graph-common-bg: #f3f3f3; $stat-graph-area-fill: $green-500; $stat-graph-axis-fill: #aaa; $stat-graph-orange-fill: $orange-500; $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: $blue-500; $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: $gray-darker; $ci-action-icon-size: 22px; $pipeline-dropdown-line-height: 20px; $pipeline-dropdown-status-icon-size: 18px; $ci-action-dropdown-button-size: 24px; $ci-action-dropdown-svg-size: 12px; /* CI variable lists */ $ci-variable-remove-button-width: calc(1em + #{2 * $gl-padding}); /* 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; /* Animation Functions */ $dropdown-animation-timing: cubic-bezier(0.23, 1, 0.32, 1); /* Convdev Index */ $color-high-score: $green-400; $color-average-score: $orange-400; $color-low-score: $red-400; /* 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, 0.2); $perf-bar-bucket-box-shadow-to: rgba($black, 0.25); /* Issuable warning */ $issuable-warning-size: 24px; $issuable-warning-icon-margin: 4px; /* Image Commenting cursor */ $image-comment-cursor-left-offset: 12; $image-comment-cursor-top-offset: 12; /* Popup */ $popup-triangle-size: 15px; $popup-triangle-border-size: 1px; $popup-box-shadow-color: rgba(90, 90, 90, 0.05); /* Multi file editor */ $border-color-settings: #e1e1e1; /* Modals */ $modal-body-height: 134px; /* Prometheus */ $prometheus-table-row-highlight-color: $theme-gray-100;