diff options
Diffstat (limited to 'app/assets/stylesheets')
90 files changed, 7373 insertions, 876 deletions
diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss new file mode 100644 index 00000000000..f706b615e7e --- /dev/null +++ b/app/assets/stylesheets/_page_specific_files.scss @@ -0,0 +1,65 @@ +@import './pages/admin'; +@import './pages/alert_management/details'; +@import './pages/alert_management/severity-icons'; +@import './pages/boards'; +@import './pages/branches'; +@import './pages/builds'; +@import './pages/ci_projects'; +@import './pages/clusters'; +@import './pages/commits'; +@import './pages/cycle_analytics'; +@import './pages/deploy_keys'; +@import './pages/detail_page'; +@import './pages/dev_ops_report'; +@import './pages/diff'; +@import './pages/editor'; +@import './pages/environment_logs'; +@import './pages/environments'; +@import './pages/error_details'; +@import './pages/error_list'; +@import './pages/error_tracking_list'; +@import './pages/events'; +@import './pages/experience_level'; +@import './pages/experimental_separate_sign_up'; +@import './pages/graph'; +@import './pages/groups'; +@import './pages/help'; +@import './pages/import'; +@import './pages/incident_management_list'; +@import './pages/issuable'; +@import './pages/issues/issue_count_badge'; +@import './pages/issues/issues_list'; +@import './pages/issues'; +@import './pages/labels'; +@import './pages/login'; +@import './pages/members'; +@import './pages/merge_conflicts'; +@import './pages/merge_requests'; +@import './pages/milestone'; +@import './pages/monitor'; +@import './pages/note_form'; +@import './pages/notes'; +@import './pages/notifications'; +@import './pages/pages'; +@import './pages/pipeline_schedules'; +@import './pages/pipelines'; +@import './pages/profile'; +@import './pages/profiles/preferences'; +@import './pages/projects'; +@import './pages/prometheus'; +@import './pages/reports'; +@import './pages/runners'; +@import './pages/search'; +@import './pages/serverless'; +@import './pages/service_desk'; +@import './pages/settings'; +@import './pages/settings_ci_cd'; +@import './pages/sherlock'; +@import './pages/status'; +@import './pages/storage_quota'; +@import './pages/tags'; +@import './pages/tree'; +@import './pages/trials'; +@import './pages/ui_dev_kit'; +@import './pages/users'; +@import './pages/wiki'; diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index f5393ef47d6..8acd338fff8 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -13,7 +13,7 @@ // directory. @import '@gitlab/at.js/dist/css/jquery.atwho'; @import 'dropzone/dist/basic'; -@import 'select2/select2'; +@import 'select2'; // GitLab UI framework @import 'framework'; @@ -22,7 +22,7 @@ @import 'fontawesome_custom'; // Page specific styles (issues, projects etc): -@import 'pages/**/*'; +@import 'page_specific_files'; // Component specific styles, will be moved to gitlab-ui @import 'components/**/*'; diff --git a/app/assets/stylesheets/components/batch_comments/review_bar.scss b/app/assets/stylesheets/components/batch_comments/review_bar.scss new file mode 100644 index 00000000000..76bf7ac81e8 --- /dev/null +++ b/app/assets/stylesheets/components/batch_comments/review_bar.scss @@ -0,0 +1,122 @@ +.review-bar-component { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + background: $white; + z-index: 300; + padding: 7px 0 6px; // to keep aligned with "collapse sidebar" button on the left sidebar + border-top: 1px solid $border-color; + padding-left: $contextual-sidebar-width; + padding-right: $gutter_collapsed_width; + transition: padding $sidebar-transition-duration; + + .page-with-icon-sidebar & { + padding-left: $contextual-sidebar-collapsed-width; + } + + .right-sidebar-expanded & { + padding-right: $gutter_width; + } + + @media (max-width: map-get($grid-breakpoints, sm)-1) { + padding-left: 0; + padding-right: 0; + } + + .dropdown { + margin-left: $grid-size; + } +} + +.review-bar-content { + max-width: $limited-layout-width; + padding: 0 $gl-padding; + width: 100%; + margin: 0 auto; +} + +.review-preview-dropdown { + .review-preview-item.menu-item { + display: flex; + flex-wrap: wrap; + padding: 8px 16px; + cursor: pointer; + + &:not(.is-last) { + border-bottom: 1px solid $list-border; + } + } + + .dropdown-menu { + top: auto; + bottom: 36px; + + &.show { + max-height: 400px; + + @include media-breakpoint-down(xs) { + width: calc(100vw - 32px); + } + } + } + + .dropdown-content { + max-height: 300px; + } + + .dropdown-title { + padding: $grid-size 25px $gl-padding; + margin-bottom: 0; + } + + .dropdown-footer { + margin-top: 0; + } + + .dropdown-menu-close { + top: 6px; + } +} + +.review-preview-dropdown-toggle { + svg.s16 { + width: 15px; + height: 15px; + margin-top: -1px; + top: 3px; + margin-left: 4px; + } +} + +.review-preview-item-header { + display: flex; + align-items: center; + width: 100%; + margin-bottom: 4px; + + > .bold { + display: flex; + min-width: 0; + line-height: 16px; + } +} + +.review-preview-item-footer { + display: flex; + align-items: center; + margin-top: 4px; +} + +.review-preview-item-content { + width: 100%; + + p { + display: block; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-bottom: 0; + } +} diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss index 80421598966..21133316291 100644 --- a/app/assets/stylesheets/components/design_management/design.scss +++ b/app/assets/stylesheets/components/design_management/design.scss @@ -34,6 +34,10 @@ background-color: $gray-500; } } + + .design-detail-overlay-add-comment { + cursor: crosshair; + } } .design-presentation-wrapper { diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss index c0699844387..7c668666d70 100644 --- a/app/assets/stylesheets/components/related_items_list.scss +++ b/app/assets/stylesheets/components/related_items_list.scss @@ -48,7 +48,7 @@ $item-remove-button-space: 42px; } .confidential-icon { - color: $orange-600; + color: $orange-500; } .item-title-wrapper { @@ -123,21 +123,11 @@ $item-remove-button-space: 42px; .item-milestone { text-decoration: none; max-width: $item-milestone-max-width; - - .ic-clock { - margin-right: $gl-padding-4; - } } .item-weight { max-width: $item-weight-max-width; } - - .item-milestone .ic-clock, - .item-weight .ic-weight, - .item-due-date .ic-calendar { - color: $gl-text-color-secondary; - } } .item-assignees { diff --git a/app/assets/stylesheets/components/rich_content_editor.scss b/app/assets/stylesheets/components/rich_content_editor.scss index ade1bb2099d..b1189137d59 100644 --- a/app/assets/stylesheets/components/rich_content_editor.scss +++ b/app/assets/stylesheets/components/rich_content_editor.scss @@ -6,7 +6,7 @@ // Toolbar buttons .tui-editor-defaultUI-toolbar .toolbar-button { - color: $gl-gray-600; + color: $gray-500; border: 0; &:hover, diff --git a/app/assets/stylesheets/components/whats_new.scss b/app/assets/stylesheets/components/whats_new.scss new file mode 100644 index 00000000000..4fff900f5a5 --- /dev/null +++ b/app/assets/stylesheets/components/whats_new.scss @@ -0,0 +1,9 @@ +.gl-badge.whats-new-item-badge { + background-color: $purple-light; + color: $purple; + font-weight: bold; +} + +.whats-new-item-image { + border-color: $gray-50; +} diff --git a/app/assets/stylesheets/fontawesome_custom.scss b/app/assets/stylesheets/fontawesome_custom.scss index a2117e9c012..30d56d99e1c 100644 --- a/app/assets/stylesheets/fontawesome_custom.scss +++ b/app/assets/stylesheets/fontawesome_custom.scss @@ -84,10 +84,6 @@ color: $white; } -.fa-question-circle::before { - content: '\f059'; -} - .fa-chevron-down::before { content: '\f078'; } @@ -130,18 +126,10 @@ content: '\f101'; } -.fa-trash::before { - content: '\f1f8'; -} - .fa-angle-double-left::before { content: '\f100'; } -.fa-arrow-left::before { - content: '\f060'; -} - .fa-trash-o::before { content: '\f014'; } @@ -170,14 +158,6 @@ content: '\f0c6'; } -.fa-tag::before { - content: '\f02b'; -} - -.fa-arrow-up::before { - content: '\f062'; -} - .fa-bug::before { content: '\f188'; } @@ -186,10 +166,6 @@ content: '\f1a0'; } -.fa-user::before { - content: '\f007'; -} - .fa-exclamation-circle::before { content: '\f06a'; } @@ -198,10 +174,6 @@ content: '\f0f3'; } -.fa-arrow-down::before { - content: '\f063'; -} - .fa-bitbucket-square::before { content: '\f172'; } @@ -210,14 +182,6 @@ content: '\f016'; } -.fa-users::before { - content: '\f0c0'; -} - -.fa-tags::before { - content: '\f02c'; -} - .fa-lightbulb-o::before { content: '\f0eb'; } @@ -250,10 +214,6 @@ content: '\f06d'; } -.fa-download::before { - content: '\f019'; -} - .fa-globe::before { content: '\f0ac'; } @@ -266,14 +226,6 @@ content: '\f04b'; } -.fa-arrow-right::before { - content: '\f061'; -} - -.fa-user-secret::before { - content: '\f21b'; -} - .fa-search-plus::before { content: '\f00e'; } diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index 413e0dde535..f875420b9c9 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -23,7 +23,6 @@ @import 'framework/flash'; @import 'framework/forms'; @import 'framework/gfm'; -@import 'framework/gitlab_theme'; @import 'framework/header'; @import 'framework/highlight'; @import 'framework/issue_box'; diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 893a494d240..a9c1652d00d 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -112,7 +112,7 @@ } @mixin btn-orange { - @include btn-color($orange-500, $orange-600, $orange-600, $orange-700, $orange-700, $orange-800, $white); + @include btn-color($orange-500, $orange-600, $orange-500, $orange-600, $orange-600, $orange-800, $white); } @mixin btn-red { @@ -182,7 +182,7 @@ } &.btn-warning { - @include btn-outline($white, $orange-500, $orange-500, $orange-100, $orange-700, $orange-500, $orange-200, $orange-600, $orange-800); + @include btn-outline($white, $orange-500, $orange-500, $orange-50, $orange-600, $orange-600, $orange-100, $orange-700, $orange-700); } &.btn-primary, @@ -202,7 +202,7 @@ &.btn-close, &.btn-close-color { - @include btn-outline($white, $orange-600, $orange-500, $orange-100, $orange-700, $orange-500, $orange-200, $orange-600, $orange-800); + @include btn-outline($white, $orange-500, $orange-500, $orange-50, $orange-600, $orange-600, $orange-100, $orange-700, $orange-700); } &.btn-spam { @@ -229,7 +229,7 @@ } &.btn-icon { - color: $gl-gray-700; + color: $gray-700; } .fa-caret-down, @@ -394,7 +394,7 @@ } .clone-dropdown-btn a { - color: $gl-gray-700; + color: $gray-700; &:hover { text-decoration: none; @@ -542,3 +542,13 @@ fieldset[disabled] .btn, .btn-no-padding { padding: 0; } + +// This class helps convert `.gl-button` children so that they consistently +// match the style of `.btn` elements which might be around them. Ideally we +// wouldn't need this class. +// +// Remove by upgrading all buttons in a container to use the new `.gl-button` style. +.gl-button-deprecated-adapter .gl-button { + box-shadow: none; + border-width: 1px; +} diff --git a/app/assets/stylesheets/framework/callout.scss b/app/assets/stylesheets/framework/callout.scss index c5bb2a1256a..d0d2328ea98 100644 --- a/app/assets/stylesheets/framework/callout.scss +++ b/app/assets/stylesheets/framework/callout.scss @@ -37,12 +37,12 @@ } .bs-callout-warning { - background-color: $orange-100; + background-color: $orange-50; border-color: $orange-200; - color: $orange-900; + color: $gray-900; a { - color: $orange-900; + color: $blue-600; } } diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 00679cf20fa..714ef8b2175 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -74,7 +74,7 @@ .hint { font-style: italic; - color: $gl-gray-200; + color: $gray-200; } .light { color: $gl-text-color; } @@ -162,13 +162,13 @@ table { .loading { margin: 20px auto; height: 40px; - color: $gl-gray-700; + color: $gray-700; font-size: 32px; text-align: center; } p.time { - color: $gl-gray-200; + color: $gray-200; font-size: 90%; margin: 30px 3px 3px 2px; } @@ -237,7 +237,7 @@ li.note { } .warning_message { - @include message($orange-100, $orange-200, $orange-800); + @include message($orange-50, $orange-200, $gray-900); } .danger_message { @@ -246,7 +246,7 @@ li.note { .gitlab-promo { a { - color: $gl-gray-350; + color: $gray-300; margin-right: 30px; } } @@ -416,7 +416,6 @@ img.emoji { .flex-no-shrink { flex-shrink: 0; } .ws-initial { white-space: initial; } .ws-normal { white-space: normal; } -.ws-pre-wrap { white-space: pre-wrap; } .overflow-auto { overflow: auto; } .overflow-visible { overflow: visible; } @@ -454,35 +453,6 @@ img.emoji { } } -/** COMMON SPACING CLASSES **/ -/** - 🚨 Do not use these classes — they are deprecated and being removed. 🚨 - See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details. - - Instead, if you need a spacing class, please use one from Gitlab UI — - https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss — which uses the following scale. - $gl-spacing-scale-0: 0; - $gl-spacing-scale-1: 2px; - $gl-spacing-scale-2: 4px; - $gl-spacing-scale-3: 8px; - $gl-spacing-scale-4: 12px; - $gl-spacing-scale-5: 16px; - $gl-spacing-scale-6: 24px; - $gl-spacing-scale-7: 32px; - $gl-spacing-scale-8: 40px; - $gl-spacing-scale-9: 48px; - $gl-spacing-scale-10: 56px; - $gl-spacing-scale-11: 64px; - $gl-spacing-scale-12: 80px; - $gl-spacing-scale-13: 96px; -**/ -@each $index, $padding in $spacing-scale { - #{'.gl-p-#{$index}-deprecated-no-really-do-not-use-me'} { padding: $padding; } - #{'.gl-pl-#{$index}-deprecated-no-really-do-not-use-me'} { padding-left: $padding; } - #{'.gl-pr-#{$index}-deprecated-no-really-do-not-use-me'} { padding-right: $padding; } - #{'.gl-pt-#{$index}-deprecated-no-really-do-not-use-me'} { padding-top: $padding; } - #{'.gl-pb-#{$index}-deprecated-no-really-do-not-use-me'} { padding-bottom: $padding; } -} /** * Removes browser specific clear icon from input fields in @@ -557,4 +527,3 @@ img.emoji { See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details. **/ .gl-line-height-14 { line-height: $gl-line-height-14; } -.gl-font-size-20 { font-size: $gl-font-size-20; } diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 6b742853f8f..ad5864ef6d9 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -164,14 +164,20 @@ right: 8px; } - .ic-chevron-down { + .dropdown-menu-toggle-icon { position: absolute; - top: $gl-padding-8; right: $gl-padding-8; color: $gray-darkest; } } +.labels { + // Prevent double scroll-bars for labels dropdown. + .dropdown-menu-toggle.wide + .dropdown-select { + max-height: unset; + } +} + .gl-dropdown .dropdown-menu-toggle { padding-right: $gl-padding-8; @@ -410,7 +416,7 @@ flex-direction: column; .reference { - color: $gl-gray-400; + color: $gray-300; margin-top: $gl-padding-4; } } @@ -590,11 +596,8 @@ } .dropdown-title-button { - position: absolute; - top: 0; padding: 0; color: $dropdown-title-btn-color; - font-size: 14px; border: 0; background: none; outline: 0; @@ -604,20 +607,9 @@ } } -.dropdown-menu-close { - top: $gl-padding-4; - right: $gl-padding-8; - width: 20px; - height: 20px; -} - -.dropdown-menu-close-icon { - vertical-align: middle; -} - .dropdown-menu-back { - left: 7px; - top: 2px; + left: 10px; + top: $gl-padding-8; } .dropdown-input { @@ -627,7 +619,8 @@ .fa, .input-icon, - .ic-search { + .dropdown-input-clear, + .dropdown-input-search { position: absolute; top: $gl-padding-8; right: 20px; @@ -666,25 +659,27 @@ width: 100%; min-height: 30px; padding: 0 7px; - color: $gl-gray-700; + color: $gray-700; line-height: 30px; border: 1px solid $dropdown-divider-bg; border-radius: 2px; outline: 0; &:focus { - color: $gl-gray-700; + color: $gray-700; border-color: $blue-300; box-shadow: 0 0 4px $dropdown-input-focus-shadow; - ~ .fa { - color: $gl-gray-700; + ~ .fa, + ~ .dropdown-input-clear { + color: $gray-700; } } &:hover { - ~ .fa { - color: $gl-gray-700; + ~ .fa, + ~ .dropdown-input-clear { + color: $gray-700; } } } @@ -1070,7 +1065,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu { color: $dropdown-title-btn-color; &:hover { - color: $gl-gray-400; + color: $gray-300; } } } @@ -1105,3 +1100,42 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu { } } } + +// This class won't be needed once we can directly add utility classes to the child +// https://github.com/bootstrap-vue/bootstrap-vue/issues/5669 +.gl-dropdown-text-py-0 { + .b-dropdown-text { + padding-top: 0; + padding-bottom: 0; + } +} + +// This class won't be needed once we can directly add utility classes to the child +// https://github.com/bootstrap-vue/bootstrap-vue/issues/5669 +.gl-dropdown-text-block { + .b-dropdown-text { + display: block; + } +} + +// This class won't be needed once we can add a prop for this in the GitLab UI component +// https://gitlab.com/gitlab-org/gitlab-ui/-/issues/966 +.gl-new-dropdown { + .gl-dropdown-menu-wide { + width: $gl-dropdown-width-wide; + } +} + +.gl-dropdown-item-deprecated-adapter { + .dropdown-item { + align-items: flex-start; + + .gl-new-dropdown-item-text-primary { + @include gl-font-weight-bold; + } + + .gl-new-dropdown-item-text-secondary { + color: inherit; + } + } +} diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index ef7d39a5e7e..76c6e03377c 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -183,7 +183,7 @@ &.line-numbers { float: none; - border-left: 1px solid $gl-gray-100; + border-left: 1px solid $gray-100; i { float: none; @@ -300,7 +300,7 @@ span.idiff { .renamed-file { a { - color: $orange-600; + color: $orange-500; } } @@ -495,9 +495,12 @@ span.idiff { max-height: 20rem; } -#js-openapi-viewer pre.version { - background-color: transparent; - border: transparent; +#js-openapi-viewer { + pre.version, + code { + background-color: transparent; + border: transparent; + } } .code-navigation-line:hover { diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index ed4281123cd..1a394ad124b 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -243,7 +243,7 @@ } } - .fa-times { + .clear-search-icon { right: 10px; color: $gray-darkest; } @@ -255,7 +255,7 @@ outline: none; z-index: 1; - &:hover .fa-times { + &:hover .clear-search-icon { color: $common-gray-dark; } } @@ -348,11 +348,11 @@ } @include media-breakpoint-down(sm) { - .issues-details-filters { - padding-top: 0; - padding-bottom: 0; + .issues-details-filters, + .epics-details-filters { + padding-top: $gl-padding-8; + padding-bottom: $gl-padding-8; background-color: $white; - border-top: 0; } .boards-switcher { diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss index d604d97d270..0fb91db0afb 100644 --- a/app/assets/stylesheets/framework/flash.scss +++ b/app/assets/stylesheets/framework/flash.scss @@ -65,8 +65,8 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25); } .flash-warning { - background-color: $orange-100; - color: $orange-800; + background-color: $orange-50; + color: $gray-900; cursor: default; } diff --git a/app/assets/stylesheets/framework/gfm.scss b/app/assets/stylesheets/framework/gfm.scss index fbafb22cf37..579a68ac8e4 100644 --- a/app/assets/stylesheets/framework/gfm.scss +++ b/app/assets/stylesheets/framework/gfm.scss @@ -13,7 +13,7 @@ border-radius: $border-radius-default; &.current-user { - background-color: $orange-100; + background-color: $orange-50; } } diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss deleted file mode 100644 index 97bd6ca6fe2..00000000000 --- a/app/assets/stylesheets/framework/gitlab_theme.scss +++ /dev/null @@ -1,431 +0,0 @@ -/** - * Styles the GitLab application with a specific color theme - */ - -@mixin gitlab-theme( - $search-and-nav-links, - $active-tab-border, - $border-and-box-shadow, - $sidebar-text, - $nav-svg-color, - $color-alternate -) { - // Header - - .navbar-gitlab { - background-color: $nav-svg-color; - - .navbar-collapse { - color: $search-and-nav-links; - } - - .container-fluid { - .navbar-toggler { - border-left: 1px solid lighten($border-and-box-shadow, 10%); - - svg { - fill: $search-and-nav-links; - } - } - } - - .navbar-sub-nav, - .navbar-nav { - > li { - > a, - > button { - &:hover, - &:focus { - background-color: rgba($search-and-nav-links, 0.2); - } - } - - &.active, - &.dropdown.show { - > a, - > button { - color: $nav-svg-color; - background-color: $color-alternate; - } - } - - &.line-separator { - border-left: 1px solid rgba($search-and-nav-links, 0.2); - } - } - } - - .navbar-sub-nav { - color: $search-and-nav-links; - } - - .nav { - > li { - color: $search-and-nav-links; - - > a { - &.header-user-dropdown-toggle { - .header-user-avatar { - border-color: $search-and-nav-links; - } - - .header-user-notification-dot { - border: 2px solid $nav-svg-color; - } - } - - &:hover, - &:focus { - @include media-breakpoint-up(sm) { - background-color: rgba($search-and-nav-links, 0.2); - } - - svg { - fill: currentColor; - } - - &.header-user-dropdown-toggle .header-user-notification-dot { - border-color: $nav-svg-color + 33; - } - } - } - - &.active > a, - &.dropdown.show > a { - color: $nav-svg-color; - background-color: $color-alternate; - - &:hover { - svg { - fill: $nav-svg-color; - } - } - - &.header-user-dropdown-toggle .header-user-notification-dot { - border-color: $white; - } - } - - .impersonated-user, - .impersonated-user:hover { - svg { - fill: $nav-svg-color; - } - } - } - } - } - - .navbar .title { - > a { - &:hover, - &:focus { - background-color: rgba($search-and-nav-links, 0.2); - } - } - } - - .search { - form { - background-color: rgba($search-and-nav-links, 0.2); - - &:hover { - background-color: rgba($search-and-nav-links, 0.3); - } - } - - .search-input::placeholder { - color: rgba($search-and-nav-links, 0.8); - } - - .search-input-wrap { - .search-icon, - .clear-icon { - fill: rgba($search-and-nav-links, 0.8); - } - } - - &.search-active { - form { - background-color: $white; - } - - .search-input-wrap { - .search-icon { - fill: rgba($search-and-nav-links, 0.8); - } - } - } - } - - // Sidebar - .nav-sidebar li.active { - box-shadow: inset 4px 0 0 $border-and-box-shadow; - - > a { - color: $sidebar-text; - } - - .nav-icon-container svg { - fill: $sidebar-text; - } - } - - .sidebar-top-level-items > li.active .badge.badge-pill { - color: $sidebar-text; - } - - .nav-links li { - &.active a, - &.md-header-tab.active button, - a.active { - border-bottom: 2px solid $active-tab-border; - - .badge.badge-pill { - font-weight: $gl-font-weight-bold; - } - } - } - - .branch-header-title { - color: $border-and-box-shadow; - } - - .ide-sidebar-link { - &.active { - color: $border-and-box-shadow; - box-shadow: inset 3px 0 $border-and-box-shadow; - - &.is-right { - box-shadow: inset -3px 0 $border-and-box-shadow; - } - } - } -} - -body { - &.ui-indigo { - @include gitlab-theme( - $indigo-200, - $indigo-500, - $indigo-700, - $indigo-800, - $indigo-900, - $white - ); - } - - &.ui-light-indigo { - @include gitlab-theme( - $indigo-200, - $indigo-500, - $indigo-500, - $indigo-700, - $indigo-700, - $white - ); - } - - &.ui-blue { - @include gitlab-theme( - $theme-blue-200, - $theme-blue-500, - $theme-blue-700, - $theme-blue-800, - $theme-blue-900, - $white - ); - } - - &.ui-light-blue { - @include gitlab-theme( - $theme-light-blue-200, - $theme-light-blue-500, - $theme-light-blue-500, - $theme-light-blue-700, - $theme-light-blue-700, - $white - ); - } - - &.ui-green { - @include gitlab-theme( - $theme-green-200, - $theme-green-500, - $theme-green-700, - $theme-green-800, - $theme-green-900, - $white - ); - } - - &.ui-light-green { - @include gitlab-theme( - $theme-green-200, - $theme-green-500, - $theme-green-500, - $theme-light-green-700, - $theme-light-green-700, - $white - ); - } - - &.ui-red { - @include gitlab-theme( - $theme-red-200, - $theme-red-500, - $theme-red-700, - $theme-red-800, - $theme-red-900, - $white - ); - } - - &.ui-light-red { - @include gitlab-theme( - $theme-light-red-200, - $theme-light-red-500, - $theme-light-red-500, - $theme-light-red-700, - $theme-light-red-700, - $white - ); - } - - &.ui-dark { - @include gitlab-theme( - $gray-200, - $gray-300, - $gray-500, - $gray-700, - $gray-900, - $white - ); - } - - &.ui-light { - @include gitlab-theme( - $gray-500, - $gray-700, - $gray-500, - $gray-500, - $gray-50, - $gray-500 - ); - - .navbar-gitlab { - background-color: $gray-50; - box-shadow: 0 1px 0 0 $border-color; - - .logo-text svg { - fill: $gray-900; - } - - .navbar-sub-nav, - .navbar-nav { - > li { - > a:hover, - > a:focus, - > button:hover { - color: $gray-900; - } - - &.active > a, - &.active > a:hover, - &.active > button { - color: $white; - } - } - } - - .container-fluid { - .navbar-toggler, - .navbar-toggler:hover { - color: $gray-500; - border-left: 1px solid $gray-100; - } - } - } - - .search { - form { - background-color: $white; - box-shadow: inset 0 0 0 1px $border-color; - - &:hover { - background-color: $white; - box-shadow: inset 0 0 0 1px $blue-200; - } - } - - .search-input-wrap { - .search-icon { - fill: $gray-100; - } - - .search-input { - color: $gl-text-color; - } - } - } - - .nav-sidebar li.active { - > a { - color: $gray-900; - } - - svg { - fill: $gray-900; - } - } - - .sidebar-top-level-items > li.active .badge.badge-pill { - color: $gray-900; - } - } - - &.gl-dark { - .logo-text svg { - fill: $gl-text-color; - } - - .navbar-gitlab { - background-color: $gray-50; - - .navbar-sub-nav, - .navbar-nav { - li { - > a:hover, - > a:focus, - > button:hover, - > button:focus { - color: $gl-text-color; - background-color: $gray-200; - } - } - - li.active, - li.dropdown.show { - > a, - > button { - color: $gl-text-color; - background-color: $gray-200; - } - } - } - - .search { - form { - background-color: $gray-100; - box-shadow: inset 0 0 0 1px $border-color; - - &:active, - &:hover { - background-color: $gray-100; - box-shadow: inset 0 0 0 1px $blue-200; - } - } - } - } - } -} diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 50628c7de82..cf21c23cb17 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -235,9 +235,8 @@ border-top-left-radius: 0; border-bottom-left-radius: 0; - i { + svg { color: $orange-500; - font-size: 20px; } } } @@ -459,15 +458,15 @@ box-shadow: 0 1px 0 rgba($gl-header-color, 0.2); &.green-badge { - background-color: $green-500; + background-color: $green-400; } &.merge-requests-count { - background-color: $orange-600; + background-color: $orange-400; } &.todos-count { - background-color: $blue-500; + background-color: $blue-400; } } diff --git a/app/assets/stylesheets/framework/job_log.scss b/app/assets/stylesheets/framework/job_log.scss index 2448be1bca3..d48a5116677 100644 --- a/app/assets/stylesheets/framework/job_log.scss +++ b/app/assets/stylesheets/framework/job_log.scss @@ -17,7 +17,7 @@ } .line-number { - color: $gl-gray-500; + color: $gray-500; padding: 0 $gl-padding-8; min-width: $job-line-number-width; margin-left: -$job-line-number-margin; @@ -28,7 +28,7 @@ &:active, &:visited { text-decoration: underline; - color: $gl-gray-500; + color: $gray-500; } } @@ -43,7 +43,7 @@ } .log-duration-badge { - background: $gl-gray-400; + background: $gray-300; } .loader-animation { diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index 738150dbd2e..2464ea3607b 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -34,17 +34,6 @@ } } - &.warning-row { - background-color: $orange-100; - border-color: $orange-200; - color: $orange-700; - - &:hover { - background: $orange-100; - } - - } - &.smoke { background-color: $gray-light; } &:last-child { @@ -132,10 +121,10 @@ ul.content-list { a { color: $gl-text-color; - } - .member-group-link { - color: $blue-600; + &.inline-link { + color: $blue-600; + } } .description { diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index 1352fa13e1a..292d57f132c 100644 --- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss +++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss @@ -97,13 +97,8 @@ } /* Small devices (phones, tablets, 768px and lower) */ - @include media-breakpoint-down(xs) { + @include media-breakpoint-down(sm) { width: 100%; - - &.mobile-separator { - border-bottom: 1px solid $border-color; - margin-bottom: $gl-padding-8; - } } } diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss index e81ecfb43d5..86a5aa1a16e 100644 --- a/app/assets/stylesheets/framework/selects.scss +++ b/app/assets/stylesheets/framework/selects.scss @@ -300,7 +300,7 @@ } .group-path { - color: $gl-gray-400; + color: $gray-300; } } @@ -310,7 +310,7 @@ } .project-path { - color: $gl-gray-400; + color: $gray-300; } } @@ -332,7 +332,7 @@ .namespace-result { .namespace-kind { - color: $gl-gray-350; + color: $gray-300; font-weight: $gl-font-weight-normal; } diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 4ba9db811b7..d867cc96dbc 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -145,6 +145,13 @@ .value.dont-hide ~ .selectbox { padding-top: $gl-padding-8; } + + // This is for sidebar components using gl-button for the Edit button to be consistent with the + // rest of the sidebar, and could be removed once the sidebar has been fully converted to use + // gitlab-ui components. + .title .gl-button { + color: $gl-text-color; + } } .pikaday-container { diff --git a/app/assets/stylesheets/framework/spinner.scss b/app/assets/stylesheets/framework/spinner.scss index d734895c7dc..a74aeb9f220 100644 --- a/app/assets/stylesheets/framework/spinner.scss +++ b/app/assets/stylesheets/framework/spinner.scss @@ -31,7 +31,7 @@ border-style: solid; display: inline-flex; @include spinner-size(16px, 2px); - @include spinner-color($orange-600); + @include spinner-color($orange-400); &.spinner-md { @include spinner-size(32px, 3px); diff --git a/app/assets/stylesheets/framework/stacked_progress_bar.scss b/app/assets/stylesheets/framework/stacked_progress_bar.scss index a3037549881..37283db8b71 100644 --- a/app/assets/stylesheets/framework/stacked_progress_bar.scss +++ b/app/assets/stylesheets/framework/stacked_progress_bar.scss @@ -37,7 +37,7 @@ .status-neutral { background-color: $gray-100; - color: $gl-gray-dark; + color: $gray-900; &:hover { background-color: $gray-200; diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss index 1f60485aa36..59e83608d9d 100644 --- a/app/assets/stylesheets/framework/tables.scss +++ b/app/assets/stylesheets/framework/tables.scss @@ -180,3 +180,37 @@ table { border-top: 0; } } + +.vulnerability-list { + @media (min-width: $breakpoint-sm) { + .checkbox { + padding-left: $gl-spacing-scale-4; + padding-right: 0; + + + td, + + th { + padding-left: $gl-spacing-scale-4; + } + } + + .detected { + width: 9%; + } + + .status { + width: 8%; + } + + .severity { + width: 10%; + } + + .identifier { + width: 16%; + } + + .scanner { + width: 15%; + } + } +} diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 8758fe15870..8b5fa6c1b6c 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -84,7 +84,7 @@ padding: 3px 5px; font-size: 11px; line-height: 10px; - color: $gl-gray-700; + color: $gray-700; vertical-align: middle; background-color: $gray-10; border-width: 1px; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 69e00f9b2c4..8cebfc430e0 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -104,15 +104,6 @@ $t-gray-a-04: rgba($black, 0.04) !default; $t-gray-a-06: rgba($black, 0.06) !default; $t-gray-a-08: rgba($black, 0.08) !default; -$gl-gray-100: #ddd !default; -$gl-gray-200: #ccc !default; -$gl-gray-350: #aaa !default; -$gl-gray-400: #999 !default; -$gl-gray-500: #777 !default; -$gl-gray-600: #666 !default; -$gl-gray-700: #555 !default; -$gl-gray-800: #333 !default; - $green-50: #ecf4ee !default; $green-100: #c3e6cd !default; $green-200: #91d4a8 !default; @@ -137,17 +128,17 @@ $blue-800: #064787 !default; $blue-900: #033464 !default; $blue-950: #002850 !default; -$orange-50: #fffaf4 !default; -$orange-100: #fff1de !default; -$orange-200: #fed69f !default; -$orange-300: #fdbc60 !default; -$orange-400: #fca429 !default; -$orange-500: #fc9403 !default; -$orange-600: #de7e00 !default; -$orange-700: #c26700 !default; -$orange-800: #a35200 !default; -$orange-900: #853c00 !default; -$orange-950: #592800 !default; +$orange-50: #fdf1dd !default; +$orange-100: #f5d9a8 !default; +$orange-200: #e9be74 !default; +$orange-300: #d99530 !default; +$orange-400: #c17d10 !default; +$orange-500: #ab6100 !default; +$orange-600: #9e5400 !default; +$orange-700: #8f4700 !default; +$orange-800: #703800 !default; +$orange-900: #5c2900 !default; +$orange-950: #421f00 !default; $red-50: #fcf1ef !default; $red-100: #fdd4cd !default; @@ -161,6 +152,18 @@ $red-800: #8d1300 !default; $red-900: #660e00 !default; $red-950: #4d0a00 !default; +$purple-50: #f4f0ff !default; +$purple-100: #e1d8f9 !default; +$purple-200: #cbbbf2 !default; +$purple-300: #ac93e6 !default; +$purple-400: #9475db !default; +$purple-500: #7b58cf !default; +$purple-600: #694cc0 !default; +$purple-700: #5943b6 !default; +$purple-800: #453894 !default; +$purple-900: #2f2a6b !default; +$purple-950: #232150 !default; + $gray-10: #fafafa !default; $gray-50: #f0f0f0 !default; $gray-100: #dbdbdb !default; @@ -230,6 +233,20 @@ $reds: ( '950': $red-950 ); +$purples: ( + '50': $purple-50, + '100': $purple-100, + '200': $purple-200, + '300': $purple-300, + '400': $purple-400, + '500': $purple-500, + '600': $purple-600, + '700': $purple-700, + '800': $purple-800, + '900': $purple-900, + '950': $purple-950 +); + $grays: ( '10': $gray-10, '50': $gray-50, @@ -357,13 +374,10 @@ $gl-text-color-inverted: $white; $gl-text-color-secondary-inverted: rgba($white, 0.85); $gl-text-color-disabled: $gray-400; $gl-grayish-blue: #7f8fa4; -$gl-gray-dark: #313236; -$gl-gray-light: #5c5c5c; $gl-header-color: #4c4e54; $gl-font-size-12: 12px; $gl-font-size-14: 14px; $gl-font-size-16: 16px; -$gl-font-size-20: 20px; $gl-font-size-28: 28px; $gl-font-size-42: 42px; @@ -484,6 +498,22 @@ $line-added: #ecfdf0; $line-added-dark: #c7f0d2 !default; $line-removed: #fbe9eb; $line-removed-dark: #fac5cd !default; +/* + * The transparent colors are used in Monaco editor. Using full opacity colors + * would hide other layers (selected text, matching brackets). + * + * When the transparent colors get layered on white background, they create their + * full opacity counterparts (computed with https://stackoverflow.com/a/12228643/606571): + * + * - white + $line-added-transparent = $line-added + * - white + $line-added-transparent + $line-added-dark-transparent = $line-added-dark + * + * More details: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/41553 + */ +$line-added-transparent: rgba(160, 245, 180, 0.2); +$line-added-dark-transparent: rgba(51, 188, 90, 0.2); +$line-removed-transparent: rgba(235, 145, 155, 0.2); +$line-removed-dark-transparent: rgba(246, 53, 85, 0.2); $line-number-old: #f9d7dc; $line-number-new: #ddfbe6; $line-number-select: #fbf2da; @@ -588,7 +618,6 @@ $award-emoji-width-xs: 90%; $search-input-border-color: rgba($blue-400, 0.8); $search-input-width: 200px; $search-input-xl-width: 320px; -$location-icon-color: #e7e9ed; /* * Notes @@ -894,8 +923,3 @@ $compare-branches-sticky-header-height: 68px; - Issue: https://gitlab.com/gitlab-org/design.gitlab.com/issues/242 */ $enable-validation-icons: false; - -/* -Licenses -*/ -$license-header-cell-width: 150px; diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index 3eff1807403..55996a074c6 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -110,10 +110,6 @@ .dark-well { background-color: $gray-normal; - - .btn { - width: 100%; - } } .card.card-body-centered { diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss index dd5b99be57e..62abf4a7683 100644 --- a/app/assets/stylesheets/framework/zen.scss +++ b/app/assets/stylesheets/framework/zen.scss @@ -35,7 +35,7 @@ .zen-control { padding: 0; - color: $gl-gray-700; + color: $gray-700; background: none; border: 0; } diff --git a/app/assets/stylesheets/mailer.scss b/app/assets/stylesheets/mailer.scss index f188b29a113..a5fc92237df 100644 --- a/app/assets/stylesheets/mailer.scss +++ b/app/assets/stylesheets/mailer.scss @@ -48,6 +48,22 @@ a { font-weight: 500; } +.invite-header { + margin-top: 0; +} + +.invite-actions { + margin-top: 24px; +} + +.invite-btn-join { + border-radius: $border-radius-default; + padding: $gl-btn-vert-padding $gl-btn-horz-padding; + cursor: pointer; + background-color: $purple; + color: $white; +} + tr td { font-family: $mailer-font; } diff --git a/app/assets/stylesheets/notify.scss b/app/assets/stylesheets/notify.scss index 6320c10fb51..d281f62c370 100644 --- a/app/assets/stylesheets/notify.scss +++ b/app/assets/stylesheets/notify.scss @@ -7,12 +7,12 @@ img { p.details { font-style: italic; - color: $gl-gray-500; + color: $gray-500; } .footer > p { font-size: small; - color: $gl-gray-500; + color: $gray-500; } pre.commit-message { diff --git a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss index 0b847902525..57053c7f0cb 100644 --- a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss +++ b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss @@ -19,14 +19,6 @@ display: none; } - .monaco-editor .selected-text { - z-index: 1; - } - - .monaco-editor .view-lines { - z-index: 2; - } - .is-readonly .editor.original { .view-lines { cursor: default; @@ -98,11 +90,11 @@ } .char-insert { - background-color: $line-added-dark; + background-color: $line-added-dark-transparent; } .char-delete { - background-color: $line-removed-dark; + background-color: $line-removed-dark-transparent; } .line-numbers { @@ -111,11 +103,11 @@ .view-overlays { .line-insert { - background-color: $line-added; + background-color: $line-added-transparent; } .line-delete { - background-color: $line-removed; + background-color: $line-removed-transparent; } } diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss index dfd7fd355a4..1e239877428 100644 --- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss +++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss @@ -84,7 +84,8 @@ color: var(--ide-input-border, $gl-text-color-tertiary); } - .dropdown-input .fa { + .dropdown-input .fa, + .dropdown-input .dropdown-input-clear { color: var(--ide-input-border, $dropdown-input-fa-color); } diff --git a/app/assets/stylesheets/page_bundles/_mixins_and_variables_and_functions.scss b/app/assets/stylesheets/page_bundles/_mixins_and_variables_and_functions.scss new file mode 100644 index 00000000000..0e8ea5e2d52 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/_mixins_and_variables_and_functions.scss @@ -0,0 +1,21 @@ +/** + This file contains only imports of Bootstrap, GitLab UI and GitLab mixins, + variables and functions, in the correct order. + + It is meant to be used in page_bundles, but SHOULD NOT introduce any + styles of it's own. We actually check in CI that compiling _this_ file doesn't + result in any additional styles. + + See: scripts/frontend/check_page_bundle_mixins_css_for_sideeffects.js + */ +@import 'framework/variables'; +@import 'framework/variables_overrides'; +@import 'framework/mixins'; + +@import 'bootstrap/scss/functions'; +@import 'bootstrap/scss/variables'; +@import 'bootstrap/scss/mixins'; + +@import '@gitlab/ui/src/scss/functions'; +@import '@gitlab/ui/src/scss/variables'; +@import '@gitlab/ui/src/scss/utility-mixins/index'; diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index 36587ecde3d..71e74297ee8 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -1080,7 +1080,7 @@ $ide-commit-header-height: 48px; max-width: 24px; padding: 0; margin: 0 ($grid-size / 2); - color: var(--ide-text-color-secondary, $gl-gray-light); + color: var(--ide-text-color-secondary, $gray-600); &:first-child { margin-left: 0; diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss new file mode 100644 index 00000000000..83d16f29d49 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/jira_connect.scss @@ -0,0 +1,33 @@ +@import 'framework/variables'; + +$atlaskit-border-color: #dfe1e6; + +.ac-content { + margin: 20px; + + .subscription-form { + margin-bottom: 20px; + + .field-group-input { + display: flex; + padding-top: $gl-padding-4; + + .ak-button { + height: auto; + margin-left: $btn-margin-5; + } + } + } +} + +.subscriptions { + tbody { + tr { + border-bottom: 1px solid $atlaskit-border-color; + } + + td { + padding: $gl-padding-8; + } + } +} diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/page_bundles/todos.scss index c6f104a024b..3eec5b53a30 100644 --- a/app/assets/stylesheets/pages/todos.scss +++ b/app/assets/stylesheets/page_bundles/todos.scss @@ -1,3 +1,5 @@ +@import 'mixins_and_variables_and_functions'; + /** * Dashboard Todos * @@ -10,8 +12,8 @@ flex-direction: row; &:hover { - background-color: $blue-50; - border-color: $blue-200; + background-color: var(--blue-50, $blue-50); + border-color: var(--blue-200, $blue-200); cursor: pointer; } @@ -20,7 +22,7 @@ border-bottom: 1px solid transparent; &:hover { - border-color: $blue-200; + border-color: var(--blue-200, $blue-200); } } @@ -44,11 +46,9 @@ } &.todo-pending.done-reversible { - background-color: $white; - &:hover { - border-color: $white-normal; - background-color: $gray-light; + border-color: var(--border-color, $border-color); + background-color: var(--gray-50, $gray-50); border-top: 1px solid transparent; .todo-avatar, @@ -63,7 +63,7 @@ } .btn { - background-color: $gray-light; + background-color: var(--gray-50, $gray-50); } } } @@ -103,15 +103,15 @@ .todo-label, .todo-project { a { - color: $blue-600; font-weight: $gl-font-weight-normal; + color: var(--blue-600, $blue-600); } } .todo-body { .badge.badge-pill, p { - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); } .md { @@ -125,9 +125,9 @@ pre { border: 0; - background: $gray-light; + background: var(--gray-50, $gray-50); border-radius: 0; - color: $gl-gray-500; + color: var(--gray-500, $gray-500); margin: 0 20px; overflow: hidden; } @@ -149,18 +149,6 @@ } } -@include media-breakpoint-down(sm) { - .todos-filters { - .dropdown-menu-toggle { - width: 130px; - } - - .dropdown-menu-toggle-sort { - width: auto; - } - } -} - @include media-breakpoint-down(lg) { .todos-filters { .filter-categories { @@ -174,6 +162,10 @@ } @include media-breakpoint-down(sm) { + .container-fluid .todos-list-container { + margin: 0 (-$gl-padding); + } + .todo { .avatar { display: none; @@ -191,7 +183,7 @@ .todo-body { margin: 0; - border-left: 2px solid $gl-gray-100; + border-left: 2px solid var(--border-color, $border-color); padding-left: 10px; } } @@ -204,6 +196,10 @@ .dropdown-menu-toggle { width: 100%; } + + .dropdown-menu-toggle-sort { + width: auto; + } } } diff --git a/app/assets/stylesheets/pages/alert_management/details.scss b/app/assets/stylesheets/pages/alert_management/details.scss index 0f889935583..a104c06c853 100644 --- a/app/assets/stylesheets/pages/alert_management/details.scss +++ b/app/assets/stylesheets/pages/alert_management/details.scss @@ -1,39 +1,4 @@ .alert-management-details { - // these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui - table { - tr { - td { - @include gl-border-0; - @include gl-p-5; - border-color: transparent; - border-bottom: 1px solid $table-border-color; - - &:first-child { - div { - font-weight: bold; - } - } - - &:not(:first-child) { - &::before { - color: $gray-500; - font-weight: normal !important; - } - - div { - color: $gray-500; - } - } - - @include media-breakpoint-up(sm) { - div { - text-align: left !important; - } - } - } - } - } - @include media-breakpoint-down(xs) { .alert-details-incident-button { width: 100%; @@ -67,6 +32,10 @@ } } + .main-notes-list::before { + left: 15px !important; + } + .note-header-info { @include gl-mt-1; } diff --git a/app/assets/stylesheets/pages/alert_management/severity-icons.scss b/app/assets/stylesheets/pages/alert_management/severity-icons.scss index 6004697b3e1..f58ad87a673 100644 --- a/app/assets/stylesheets/pages/alert_management/severity-icons.scss +++ b/app/assets/stylesheets/pages/alert_management/severity-icons.scss @@ -1,3 +1,4 @@ +.incident-severity, .incident-management-list, .alert-management-details { .icon-critical { diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 51a65b88cd0..c4852974a4d 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -116,7 +116,6 @@ .board-title { flex-direction: column; - height: 100%; } .board-title-caret { @@ -284,7 +283,7 @@ } .confidential-icon { - color: $orange-600; + color: $orange-500; cursor: help; } diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/pages/branches.scss index 3c49cc54ac4..d34d309eea3 100644 --- a/app/assets/stylesheets/pages/branches.scss +++ b/app/assets/stylesheets/pages/branches.scss @@ -23,7 +23,7 @@ .bar { height: 4px; - background-color: $gl-gray-100; + background-color: $gray-100; } .count { @@ -34,7 +34,7 @@ .graph-separator { width: $graph-separator-width; height: 18px; - background-color: $gl-gray-100; + background-color: $gray-100; } } diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss index f367d9ea4d8..04167cbee1b 100644 --- a/app/assets/stylesheets/pages/builds.scss +++ b/app/assets/stylesheets/pages/builds.scss @@ -50,7 +50,7 @@ top: $header-height; border-radius: 2px 2px 0 0; color: $orange-600; - background-color: $orange-100; + background-color: $orange-50; border: 1px solid $border-gray-normal; padding: 3px 12px; margin: auto; @@ -63,7 +63,7 @@ } .top-bar { - @include build-trace-top-bar(35px); + @include build-trace-top-bar(50px); &.has-archived-block { top: $header-height + 28px; diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss index 29422c1f7fa..4e27f438e36 100644 --- a/app/assets/stylesheets/pages/clusters.scss +++ b/app/assets/stylesheets/pages/clusters.scss @@ -69,7 +69,7 @@ align-self: flex-start; font-weight: 500; font-size: 20px; - color: $orange-900; + color: $orange-500; opacity: 1; margin: $gl-padding-8 14px 0 0; } @@ -124,7 +124,7 @@ background-color: none; border: 0; font-weight: bold; - color: $gl-gray-500; + color: $gray-500; } } } @@ -156,7 +156,7 @@ } .cluster-deployments-warning { - color: $orange-600; + color: $orange-500; } .badge.pods-badge { diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index b97709e140f..c509bf121bc 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/pages/cycle_analytics.scss @@ -41,15 +41,6 @@ width: 20%; } - .fa, - svg { - color: $cycle-analytics-light-gray; - - &:hover { - color: $gl-text-color; - } - } - .stage-header { width: 20.5%; } @@ -360,23 +351,3 @@ } } } - -.cycle-analytics-overview { - padding-top: 100px; - - .overview-details { - display: flex; - align-items: center; - } - - .overview-image { - text-align: right; - } - - .overview-icon { - svg { - width: 365px; - height: 227px; - } - } -} diff --git a/app/assets/stylesheets/pages/dev_ops_score.scss b/app/assets/stylesheets/pages/dev_ops_report.scss index b9ee905f4b6..871cd9c4f02 100644 --- a/app/assets/stylesheets/pages/dev_ops_score.scss +++ b/app/assets/stylesheets/pages/dev_ops_report.scss @@ -25,6 +25,10 @@ $space-between-cards: 8px; margin-left: 8px; font-weight: $gl-font-weight-normal; + .devops-header-icon { + vertical-align: px-to-rem(-$gl-spacing-scale-1); + } + a { font-size: 18px; color: $gl-text-color-secondary; @@ -88,7 +92,7 @@ $space-between-cards: 8px; } .devops-card-average { - border-top-color: $orange-400; + border-top-color: $orange-200; .board-card-score-big { background-color: $orange-50; @@ -247,7 +251,7 @@ $space-between-cards: 8px; } .devops-average-score { - color: $orange-400; + color: $orange-500; } .devops-low-score { diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index a7b93c9eab7..62af7103b39 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -102,7 +102,7 @@ .file-mode-changed { padding: 10px; - color: $gl-gray-500; + color: $gray-500; } .suppressed-container { @@ -181,7 +181,7 @@ .swipe-wrap { overflow: hidden; - border-right: 1px solid $gl-gray-400; + border-right: 1px solid $gray-300; position: absolute; display: block; top: 13px; @@ -190,7 +190,7 @@ &.left-oriented { /* only for commit view (different swipe viewer) */ border-right: 0; - border-left: 1px solid $gl-gray-400; + border-left: 1px solid $gray-300; } } @@ -1062,7 +1062,7 @@ table.code { .diff-tree-list { position: -webkit-sticky; position: sticky; - $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 11px; + $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 15px; top: $top-pos; max-height: calc(100vh - #{$top-pos}); z-index: 202; diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index ef7b56ac210..5ce500dad1d 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -83,7 +83,7 @@ .x-axis path, .y-axis path { - stroke: $gl-gray-350; + stroke: $gray-300; } .label-x-axis-line, @@ -93,7 +93,7 @@ .y-axis { line { - stroke: $gl-gray-350; + stroke: $gray-300; stroke-width: 1; } } @@ -117,7 +117,7 @@ } .selected-metric-line { - stroke: $gl-gray-dark; + stroke: $gray-900; stroke-width: 1; } diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss index 500f5816d38..5738cbb4b31 100644 --- a/app/assets/stylesheets/pages/events.scss +++ b/app/assets/stylesheets/pages/events.scss @@ -94,7 +94,7 @@ border: 0; background: $gray-light; border-radius: 0; - color: $gl-gray-500; + color: $gray-500; overflow: hidden; } @@ -111,7 +111,7 @@ } .event-note-icon { - color: $gl-gray-500; + color: $gray-500; float: left; font-size: $gl-font-size; margin-right: 5px; diff --git a/app/assets/stylesheets/pages/graph.scss b/app/assets/stylesheets/pages/graph.scss index c4b6cdd703d..bca4d50973a 100644 --- a/app/assets/stylesheets/pages/graph.scss +++ b/app/assets/stylesheets/pages/graph.scss @@ -43,7 +43,7 @@ .y-axis-label { line { - stroke: $gl-gray-350; + stroke: $gray-300; } text { diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index c309c8d157a..69fd094f83b 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -52,7 +52,7 @@ .save-group-loader { margin-top: $gl-padding-50; margin-bottom: $gl-padding-50; - color: $gl-gray-700; + color: $gray-700; } .group-nav-container .nav-controls { diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss index ab281bc7f23..540060d60de 100644 --- a/app/assets/stylesheets/pages/help.scss +++ b/app/assets/stylesheets/pages/help.scss @@ -1,6 +1,6 @@ .shortcut-mappings { font-size: 12px; - color: $gl-gray-700; + color: $gray-700; tbody:first-child tr:first-child { padding-top: 0; @@ -22,7 +22,7 @@ .shortcut { padding-right: 10px; - color: $gl-gray-400; + color: $gray-300; text-align: right; white-space: nowrap; } diff --git a/app/assets/stylesheets/pages/incident_management_list.scss b/app/assets/stylesheets/pages/incident_management_list.scss index 00ca3cc73e0..316066694a8 100644 --- a/app/assets/stylesheets/pages/incident_management_list.scss +++ b/app/assets/stylesheets/pages/incident_management_list.scss @@ -108,7 +108,7 @@ border-bottom-width: 0; .gl-tab-nav-item { - color: $gl-gray-600; + color: $gray-500; > .gl-tab-counter-badge { color: inherit; diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 2f28361f62c..53525a4d877 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -1,5 +1,5 @@ .issuable-warning-icon { - background-color: $orange-100; + background-color: $orange-50; border-radius: $border-radius-default; width: $issuable-warning-size; height: $issuable-warning-size; @@ -50,6 +50,7 @@ .title-container { display: flex; + align-items: flex-start; } .title { @@ -65,7 +66,6 @@ .btn-edit { margin-left: auto; - height: $gl-padding * 2; } .emoji-block { @@ -119,11 +119,11 @@ .assignee { .merge-icon { - color: $orange-500; + color: $orange-400; position: absolute; bottom: 0; right: 0; - text-shadow: -1px -1px 0 $white, 1px -1px 0 $white, -1px 1px 0 $white, 1px 1px 0 $white; + text-shadow: -1px -1px 2px $white, 1px -1px 2px $white, -1px 1px 2px $white, 1px 1px 2px $white; } } @@ -234,8 +234,8 @@ .title { color: $gl-text-color; - margin-bottom: $gl-padding-8; - line-height: 1; + margin-bottom: $gl-padding-4; + line-height: $gl-line-height-20; .avatar { margin-left: 0; @@ -252,7 +252,8 @@ } } - .cross-project-reference { + .cross-project-reference, + .sidebar-mr-source-branch { color: inherit; span { @@ -360,13 +361,6 @@ margin: 0; } - .username { - display: block; - margin-top: 4px; - font-size: 13px; - font-weight: $gl-font-weight-normal; - } - .hide-expanded { display: none; } @@ -389,7 +383,8 @@ border-bottom: 0; overflow: hidden; - &:hover { + &.with-sub-blocks .sub-block:hover, + &:not(.with-sub-blocks):hover { background-color: $gray-100; } @@ -444,11 +439,6 @@ } } - span { - display: block; - margin-top: 0; - } - .sidebar-avatar-counter { padding-top: 2px; } @@ -741,7 +731,6 @@ .issuable-info-container { flex: 1; display: flex; - padding-right: $gl-padding; .issuable-main-info { flex: 1 auto; @@ -919,12 +908,12 @@ } .issuable-todo-btn { - .fa-spinner { + .gl-spinner { display: none; } &.is-loading { - .fa-spinner { + .gl-spinner { display: inline-block; } @@ -982,7 +971,7 @@ } .suggestion-confidential { - color: $orange-600; + color: $orange-500; } .suggestion-state-open { @@ -1006,3 +995,15 @@ border: 0; } } + +@include media-breakpoint-down(sm) { + // Overriding the following rule with the negative margin + // https://gitlab.com/gitlab-org/gitlab/-/blob/146c43c931c3743a140529307aea616e4aa9ff21/app/assets/stylesheets/framework/sidebar.scss#L1-5 + .container-fluid { + .issuable-list, + .issues-filters, + .epics-filters { + margin: 0 (-$gl-padding); + } + } +} diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 0c349ab73a3..03603f637c8 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -14,7 +14,7 @@ } .issue { - padding: 10px 0 10px $gl-padding; + padding: 10px $gl-padding; position: relative; .title { @@ -294,12 +294,12 @@ ul.related-merge-requests > li { &::after { content: image-url('icon_anchor.svg'); - @include invisible(hidden); + visibility: hidden; } } &:hover > a.anchor::after { - @include invisible(visible); + visibility: visible; } } } diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss index 54bca80194f..2d9a9f3029f 100644 --- a/app/assets/stylesheets/pages/members.scss +++ b/app/assets/stylesheets/pages/members.scss @@ -180,10 +180,6 @@ word-break: break-all; } - .member-group-link { - display: inline-block; - } - .form-control { width: inherit; } diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index a6d1fc11c3f..8aaeb92eb7a 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -64,7 +64,7 @@ $mr-widget-min-height: 69px; background-color: $gray-light; &.clickable:hover { - background-color: $gl-gray-100; + background-color: $gray-100; cursor: pointer; } } @@ -311,7 +311,7 @@ $mr-widget-min-height: 69px; .bold { font-weight: $gl-font-weight-bold; - color: $gl-gray-light; + color: $gray-600; margin-left: 10px; } @@ -873,7 +873,6 @@ $mr-widget-min-height: 69px; .merge-request-tabs-container, .epic-tabs-container { flex-direction: column-reverse; - padding-top: $gl-padding-8; } } @@ -883,7 +882,6 @@ $mr-widget-min-height: 69px; .epic-tabs-container { flex-direction: column-reverse; align-items: flex-start; - padding-top: $gl-padding-8; } } } @@ -980,7 +978,7 @@ $mr-widget-min-height: 69px; opacity: 0.65; &:hover { - color: $gl-gray-500; + color: $gray-500; text-decoration: none; } } @@ -1035,3 +1033,9 @@ $mr-widget-min-height: 69px; .diff-file-row.is-active { background-color: $gray-50; } + +.merge-request-container { + .flash-container { + @include gl-mb-4; + } +} diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index c473cc44637..e9eb79b071c 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -178,7 +178,6 @@ $status-box-line-height: 26px; .milestone-detail { border-bottom: 1px solid $border-color; - padding: 20px 0; } @include media-breakpoint-down(xs) { diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 35a15214f68..8b3d3268a8c 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -97,7 +97,7 @@ .issuable-note-warning { color: $orange-600; - background-color: $orange-100; + background-color: $orange-50; border-radius: $border-radius-default $border-radius-default 0 0; border: 1px solid $border-gray-normal; border-bottom: 0; diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index e4e54501627..c144fb13322 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -186,8 +186,8 @@ $note-form-margin-left: 72px; padding: $gl-padding; .dummy-avatar { - background-color: $gl-gray-100; - border: 1px solid darken($gl-gray-100, 25%); + background-color: $gray-100; + border: 1px solid darken($gray-100, 25%); } .note-headline-light, @@ -835,7 +835,7 @@ $note-form-margin-left: 72px; &[disabled] { background: $white; border-color: $gray-200; - color: $gl-gray-400; + color: $gray-300; cursor: not-allowed; } } diff --git a/app/assets/stylesheets/pages/packages.scss b/app/assets/stylesheets/pages/packages.scss deleted file mode 100644 index 8f6eee524e5..00000000000 --- a/app/assets/stylesheets/pages/packages.scss +++ /dev/null @@ -1,11 +0,0 @@ -.commit-row-description { - border: 0; - border-left: 3px solid $white-dark; -} - -.package-list-table[aria-busy='true'] { - td { - padding-bottom: 0; - padding-top: 0; - } -} diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index fc3b786b365..8b104ce9017 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -193,7 +193,6 @@ .icon-container { display: inline-block; - width: 10px; &.commit-icon { width: 15px; @@ -782,7 +781,7 @@ &.ci-status-icon-pending, &.ci-status-icon-waiting-for-resource, &.ci-status-icon-success-with-warnings { - @include mini-pipeline-graph-color($white, $orange-100, $orange-200, $orange-500, $orange-600, $orange-700); + @include mini-pipeline-graph-color($white, $orange-50, $orange-100, $orange-500, $orange-600, $orange-700); } &.ci-status-icon-preparing, @@ -1082,3 +1081,19 @@ button.mini-pipeline-graph-dropdown-toggle { .progress-bar.bg-primary { background-color: $blue-500 !important; } + +.pipeline-stage-pill { + width: 10rem; +} + +.pipeline-job-pill { + width: 8rem; +} + +.stage-left-rounded { + border-radius: 2rem 0 0 2rem; +} + +.stage-right-rounded { + border-radius: 0 2rem 2rem 0; +} diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index 85836962b06..4dc1f2034f3 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -257,7 +257,8 @@ } } -table.u2f-registrations { +table.u2f-registrations, +.webauthn-registrations { th:not(:last-child), td:not(:last-child) { border-right: solid 1px transparent; diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index d4d6583312c..a2f8447c0b6 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -353,7 +353,7 @@ .save-project-loader { margin-top: 50px; margin-bottom: 50px; - color: $gl-gray-700; + color: $gray-700; } .transfer-project .select2-container { @@ -429,7 +429,7 @@ > li + li::before { padding: 0 3px; - color: $gl-gray-400; + color: $gray-300; } a { @@ -1268,18 +1268,10 @@ pre.light-well { position: relative; .clear-icon { - @extend .fa-times; display: none; position: absolute; - right: 7px; - top: 7px; - color: $location-icon-color; - - &::before { - font-family: FontAwesome; - font-weight: $gl-font-weight-normal; - font-style: normal; - } + right: 9px; + top: 9px; } &.has-value { @@ -1444,7 +1436,7 @@ pre.light-well { .project-filters { .btn svg { - color: $gl-gray-700; + color: $gray-700; } .button-filter-group { diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 1fc6ad62237..4b8e1da4867 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -105,7 +105,7 @@ input[type='checkbox']:hover { } .dropdown-header { - // Necessary because glDropdown doesn't support a second style of headers + // Necessary because deprecatedJQueryDropdown doesn't support a second style of headers font-weight: $gl-font-weight-bold; color: $gl-text-color; font-size: $gl-font-size; diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index b82c638a5b7..7b18e3774d8 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -124,8 +124,8 @@ .settings-message { padding: 5px; line-height: 1.3; - color: $orange-700; - background-color: $orange-100; + color: $gray-900; + background-color: $orange-50; border: 1px solid $orange-200; border-radius: $border-radius-base; } @@ -135,7 +135,7 @@ } .warning-title { - color: $orange-500; + color: $gray-900; } .danger-title { @@ -301,7 +301,7 @@ } .loading-metrics .metrics-load-spinner { - color: $gl-gray-700; + color: $gray-700; } .metrics-list { @@ -384,6 +384,13 @@ font-weight: $gl-font-weight-bold; border: 0; } + + // When tables are "stacked", restore td padding + @media(max-width: map-get($grid-breakpoints, lg)) { + td { + padding-left: $gl-spacing-scale-5; + } + } } } diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index 4ad2dcbe92f..b37c5172ad2 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -43,7 +43,7 @@ &.ci-waiting-for-resource, &.ci-failed-with-warnings, &.ci-success-with-warnings { - @include status-color($orange-100, $orange-500, $orange-700); + @include status-color($orange-50, $orange-500, $orange-700); } &.ci-info, diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index b6af395a802..73fe76f139f 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -173,7 +173,7 @@ .tree-truncated-warning { color: $orange-600; - background-color: $orange-100; + background-color: $orange-50; } .tree-time-ago { diff --git a/app/assets/stylesheets/pages/ui_dev_kit.scss b/app/assets/stylesheets/pages/ui_dev_kit.scss index 7744fd814d0..288da4da5c3 100644 --- a/app/assets/stylesheets/pages/ui_dev_kit.scss +++ b/app/assets/stylesheets/pages/ui_dev_kit.scss @@ -6,7 +6,7 @@ .example { padding: 15px; - border: 1px dashed $gl-gray-100; + border: 1px dashed $gray-100; margin-bottom: 15px; &::before { diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss index 8c4bfdf68cc..ccf11058b5b 100644 --- a/app/assets/stylesheets/pages/wiki.scss +++ b/app/assets/stylesheets/pages/wiki.scss @@ -151,3 +151,7 @@ ul.wiki-pages-list.content-list { .empty-state-wiki .text-content { max-width: 490px; // Widen to allow for the Confluence button } + +.wiki-form .markdown-area { + max-height: none; +} diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss index daeab80d373..dc127cd2554 100644 --- a/app/assets/stylesheets/performance_bar.scss +++ b/app/assets/stylesheets/performance_bar.scss @@ -11,15 +11,15 @@ height: $performance-bar-height; background: $black; line-height: $performance-bar-height; - color: $gl-gray-400; + color: $gray-300; select { - color: $gl-gray-400; + color: $gray-300; width: 200px; } input { - color: $gl-gray-400; + color: $gray-300; width: $input-short-width - 60px; } @@ -61,7 +61,7 @@ padding: 4px 6px; font-family: Consolas, 'Liberation Mono', Courier, monospace; line-height: 1; - color: $gl-gray-100; + color: $gray-100; border-radius: 3px; box-shadow: 0 1px 0 $perf-bar-bucket-box-shadow-from, inset 0 1px 2px $perf-bar-bucket-box-shadow-to; diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss new file mode 100644 index 00000000000..d875f758ead --- /dev/null +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -0,0 +1,1912 @@ +@charset "UTF-8"; +*, +*::before, +*::after { + box-sizing: border-box; +} +html { + font-family: sans-serif; + line-height: 1.15; +} + header, nav, section { + display: block; +} +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #fafafa; + text-align: left; + background-color: #2e2e2e; +} +h1, h2, h3 { + margin-top: 0; + margin-bottom: 0.25rem; +} +p { + margin-top: 0; + margin-bottom: 1rem; +} + +ul { + margin-top: 0; + margin-bottom: 1rem; +} + +ul ul { + margin-bottom: 0; +} + +strong { + font-weight: bolder; +} +sub { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} +sub { + bottom: -.25em; +} +a { + color: #007bff; + text-decoration: none; + background-color: transparent; +} +a:not([href]) { + color: inherit; + text-decoration: none; +} +pre, +code { + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; + font-size: 1em; +} +pre { + margin-top: 0; + margin-bottom: 1rem; + overflow: auto; +} +img { + vertical-align: middle; + border-style: none; +} +svg { + overflow: hidden; + vertical-align: middle; +} +table { + border-collapse: collapse; +} +th { + text-align: inherit; +} +button { + border-radius: 0; +} +input, +button, +textarea { + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} +button, +input { + overflow: visible; +} +button { + text-transform: none; +} +button:not(:disabled), +[type="button"]:not(:disabled), +[type="reset"]:not(:disabled) { + cursor: pointer; +} +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner { + padding: 0; + border-style: none; +} +textarea { + overflow: auto; + resize: vertical; +} +[type="search"] { + outline-offset: -2px; +} +summary { + display: list-item; + cursor: pointer; +} +template { + display: none; +} +[hidden] { + display: none !important; +} +h1, h2, h3, +.h1, .h2, .h3 { + margin-bottom: 0.25rem; + font-weight: 600; + line-height: 1.2; + color: #fafafa; +} +h1, .h1 { + font-size: 2.1875rem; +} +h2, .h2 { + font-size: 1.75rem; +} +h3, .h3 { + font-size: 1.53125rem; +} +.list-unstyled { + padding-left: 0; + list-style: none; +} +code { + font-size: 90%; + color: #fff; + word-wrap: break-word; +} +a > code { + color: inherit; +} +pre { + display: block; + font-size: 90%; + color: #fafafa; +} +pre code { + font-size: inherit; + color: inherit; + word-break: normal; +} +.container { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} + +@media (min-width: 576px) { + .container { + max-width: 540px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 720px; + } +} + +@media (min-width: 992px) { + .container { + max-width: 960px; + } +} + +@media (min-width: 1200px) { + .container { + max-width: 1140px; + } +} +.container-fluid { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} + +@media (min-width: 576px) { + .container { + max-width: 540px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 720px; + } +} + +@media (min-width: 992px) { + .container { + max-width: 960px; + } +} + +@media (min-width: 1200px) { + .container { + max-width: 1140px; + } +} +.row { + display: flex; + flex-wrap: wrap; + margin-right: -15px; + margin-left: -15px; +} +.table { + width: 100%; + margin-bottom: 0.5rem; + color: #fafafa; +} +.table th, +.table td { + padding: 0.75rem; + vertical-align: top; + border-top: 1px solid #4f4f4f; +} + .search form { + display: block; + width: 100%; + height: 34px; + padding: 0.375rem 0.75rem; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.5; + color: #fafafa; + background-color: #4f4f4f; + background-clip: padding-box; + border: 1px solid #4f4f4f; + border-radius: 0.25rem; +} + +@media (prefers-reduced-motion: reduce) { +} + .search form:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #fafafa; +} + .search form::placeholder { + color: #ccc; + opacity: 1; +} + .search form:disabled { + background-color: #2e2e2e; + opacity: 1; +} +.form-inline { + display: flex; + flex-flow: row wrap; + align-items: center; +} + +@media (min-width: 576px) { + .form-inline .search form, .search .form-inline form { + display: inline-block; + width: auto; + vertical-align: middle; + } +} +.btn { + display: inline-block; + font-weight: 400; + color: #fafafa; + text-align: center; + vertical-align: middle; + cursor: pointer; + user-select: none; + background-color: transparent; + border: 1px solid transparent; + padding: 0.375rem 0.75rem; + font-size: 1rem; + line-height: 20px; + border-radius: 0.25rem; +} + +@media (prefers-reduced-motion: reduce) { +} +.btn.disabled, .btn:disabled { + opacity: 0.65; +} +a.btn.disabled { + pointer-events: none; +} +.collapse:not(.show) { + display: none; +} + +.dropdown { + position: relative; +} + .dropdown-menu-toggle { + white-space: nowrap; +} + .dropdown-menu-toggle::after { + display: inline-block; + margin-left: 0.255em; + vertical-align: 0.255em; + content: ""; + border-top: 0.3em solid; + border-right: 0.3em solid transparent; + border-bottom: 0; + border-left: 0.3em solid transparent; +} + .dropdown-menu-toggle:empty::after { + margin-left: 0; +} +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + min-width: 10rem; + padding: 0.5rem 0; + margin: 0.125rem 0 0; + font-size: 1rem; + color: #fafafa; + text-align: left; + list-style: none; + background-color: #333; + background-clip: padding-box; + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 0.25rem; +} +.dropdown-menu-right { + right: 0; + left: auto; +} + .divider { + height: 0; + margin: 4px 0; + overflow: hidden; + border-top: 1px solid #4f4f4f; +} +.dropdown-menu.show { + display: block; +} +.nav { + display: flex; + flex-wrap: wrap; + padding-left: 0; + margin-bottom: 0; + list-style: none; +} +.navbar { + position: relative; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + padding: 0.25rem 0.5rem; +} +.navbar .container, +.navbar .container-fluid { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; +} +.navbar-nav { + display: flex; + flex-direction: column; + padding-left: 0; + margin-bottom: 0; + list-style: none; +} +.navbar-nav .dropdown-menu { + position: static; + float: none; +} +.navbar-collapse { + flex-basis: 100%; + flex-grow: 1; + align-items: center; +} +.navbar-toggler { + padding: 0.25rem 0.75rem; + font-size: 1.25rem; + line-height: 1; + background-color: transparent; + border: 1px solid transparent; + border-radius: 0.25rem; +} + +@media (max-width: 575.98px) { + .navbar-expand-sm > .container, + .navbar-expand-sm > .container-fluid { + padding-right: 0; + padding-left: 0; + } +} + +@media (min-width: 576px) { + .navbar-expand-sm { + flex-flow: row nowrap; + justify-content: flex-start; + } + .navbar-expand-sm .navbar-nav { + flex-direction: row; + } + .navbar-expand-sm .navbar-nav .dropdown-menu { + position: absolute; + } + .navbar-expand-sm > .container, + .navbar-expand-sm > .container-fluid { + flex-wrap: nowrap; + } + .navbar-expand-sm .navbar-collapse { + display: flex !important; + flex-basis: auto; + } + .navbar-expand-sm .navbar-toggler { + display: none; + } +} +.card { + position: relative; + display: flex; + flex-direction: column; + min-width: 0; + word-wrap: break-word; + background-color: #333; + background-clip: border-box; + border: 1px solid #4f4f4f; + border-radius: 0.25rem; +} +.badge { + display: inline-block; + padding: 0.25em 0.4em; + font-size: 75%; + font-weight: 600; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: 0.25rem; +} + +@media (prefers-reduced-motion: reduce) { +} +.badge:empty { + display: none; +} +.btn .badge { + position: relative; + top: -1px; +} +.badge-pill { + padding-right: 0.6em; + padding-left: 0.6em; + border-radius: 10rem; +} +.media { + display: flex; + align-items: flex-start; +} +.close { + float: right; + font-size: 1.5rem; + font-weight: 600; + line-height: 1; + color: #fff; + text-shadow: 0 1px 0 #333; + opacity: .5; +} +button.close { + padding: 0; + background-color: transparent; + border: 0; + appearance: none; +} +a.close.disabled { + pointer-events: none; +} +.modal-dialog { + position: relative; + width: auto; + margin: 0.5rem; + pointer-events: none; +} + +@media (min-width: 576px) { + .modal-dialog { + max-width: 500px; + margin: 1.75rem auto; + } +} +.bg-transparent { + background-color: transparent !important; +} +.border { + border: 1px solid #4f4f4f !important; +} +.border-top { + border-top: 1px solid #4f4f4f !important; +} +.border-right { + border-right: 1px solid #4f4f4f !important; +} +.border-bottom { + border-bottom: 1px solid #4f4f4f !important; +} +.border-left { + border-left: 1px solid #4f4f4f !important; +} +.rounded { + border-radius: 0.25rem !important; +} +.clearfix::after { + display: block; + clear: both; + content: ""; +} +.d-none { + display: none !important; +} +.d-inline-block { + display: inline-block !important; +} +.d-block { + display: block !important; +} + +@media (min-width: 576px) { + .d-sm-none { + display: none !important; + } +} + +@media (min-width: 768px) { + .d-md-block { + display: block !important; + } +} + +@media (min-width: 992px) { + .d-lg-none { + display: none !important; + } + .d-lg-block { + display: block !important; + } +} + +@media (min-width: 1200px) { + .d-xl-block { + display: block !important; + } +} +.flex-wrap { + flex-wrap: wrap !important; +} +.float-right { + float: right !important; +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} +.m-auto { + margin: auto !important; +} +.text-nowrap { + white-space: nowrap !important; +} +.visible { + visibility: visible !important; +} + .search form.focus { + color: #fafafa; + background-color: #4f4f4f; + border-color: #80bdff; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +} +.gl-badge { + display: inline-flex; + align-items: center; + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + outline: none; +} +body, .search form, +.search form { + font-size: 0.875rem; +} +button, +html [type='button'], +[type='reset'], +[role='button'] { + cursor: pointer; +} +h1, +.h1, +h2, +.h2, +h3, +.h3 { + margin-top: 20px; + margin-bottom: 10px; +} +input[type='file'] { + line-height: 1; +} + +strong { + font-weight: bold; +} +a { + color: #418cd8; +} +code { + padding: 2px 4px; + color: #fff; + background-color: #2e2e2e; + border-radius: 4px; +} +.code > code { + background-color: inherit; + padding: unset; +} +table { + border-spacing: 0; +} +.hidden { + display: none !important; + visibility: hidden !important; +} +.hide { + display: none; +} + .dropdown-menu-toggle::after { + display: none; +} +.badge:not(.gl-badge) { + padding: 4px 5px; + font-size: 12px; + font-style: normal; + font-weight: 400; + display: inline-block; +} +pre code { + white-space: pre-wrap; +} +.toggle-sidebar-button .collapse-text, +.toggle-sidebar-button .icon-chevron-double-lg-left, +.toggle-sidebar-button .icon-chevron-double-lg-right { + color: #bababa; +} +svg { + vertical-align: baseline; +} +html { + overflow-y: scroll; +} +body { + text-decoration-skip: ink; +} +.content-wrapper { + margin-top: 40px; + padding-bottom: 100px; +} +.container { + padding-top: 0; + z-index: 5; +} +.container .content { + margin: 0; +} + +@media (max-width: 575.98px) { + .container .content { + margin-top: 20px; + } +} + +@media (max-width: 575.98px) { + .container .container .title { + padding-left: 15px !important; + } +} +.btn { + border-radius: 4px; + font-size: 0.875rem; + font-weight: 400; + padding: 6px 10px; + background-color: #333; + border-color: #4f4f4f; + color: #fafafa; + color: #fafafa; + white-space: nowrap; +} +.btn:active, .btn.active { + box-shadow: rgba(0, 0, 0, 0.16); + background-color: #444; + border-color: #fafafa; + color: #fafafa; +} +.btn svg { + height: 15px; + width: 15px; +} +.btn svg:not(:last-child), +.btn .fa:not(:last-child) { + margin-right: 5px; +} +.badge.badge-pill:not(.gl-badge) { + font-weight: 400; + background-color: rgba(0, 0, 0, 0.07); + color: #dfdfdf; + vertical-align: baseline; +} +.hint { + font-style: italic; + color: #707070; +} +.bold { + font-weight: 600; +} +pre.wrap { + word-break: break-word; + white-space: pre-wrap; +} +table a code { + position: relative; + top: -2px; + margin-right: 3px; +} +.loading { + margin: 20px auto; + height: 40px; + color: #dfdfdf; + font-size: 32px; + text-align: center; +} +.highlight { + text-shadow: none; +} +.chart { + overflow: hidden; + height: 220px; +} +.break-word { + word-wrap: break-word; +} +.center { + text-align: center; +} +.block { + display: block; +} +.flex { + display: flex; +} +.flex-grow { + flex-grow: 1; +} +.dropdown { + position: relative; +} +.show.dropdown .dropdown-menu { + transform: translateY(0); + display: block; + min-height: 40px; + max-height: 312px; + overflow-y: auto; +} + +@media (max-width: 575.98px) { + .show.dropdown .dropdown-menu { + width: 100%; + } +} + .show.dropdown .dropdown-menu-toggle, +.show.dropdown .dropdown-menu-toggle { + border-color: #c4c4c4; +} +.show.dropdown [data-toggle='dropdown'] { + outline: 0; +} +.search-input-container .dropdown-menu { + margin-top: 11px; +} + .dropdown-menu-toggle { + padding: 6px 8px 6px 10px; + background-color: #333; + color: #fafafa; + font-size: 14px; + text-align: left; + border: 1px solid #4f4f4f; + border-radius: 0.25rem; + white-space: nowrap; +} + .no-outline.dropdown-menu-toggle { + outline: 0; +} + .dropdown-menu-toggle .fa { + color: #c4c4c4; +} +.dropdown-menu-toggle { + padding-right: 25px; + position: relative; + width: 160px; + text-overflow: ellipsis; + overflow: hidden; +} +.dropdown-menu-toggle .fa { + position: absolute; +} +.dropdown-menu { + display: none; + position: absolute; + width: auto; + top: 100%; + z-index: 300; + min-width: 240px; + max-width: 500px; + margin-top: 4px; + margin-bottom: 24px; + font-size: 14px; + font-weight: 400; + padding: 8px 0; + background-color: #333; + border: 1px solid #4f4f4f; + border-radius: 0.25rem; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} +.dropdown-menu ul { + margin: 0; + padding: 0; +} +.dropdown-menu li { + display: block; + text-align: left; + list-style: none; + padding: 0 1px; +} +.dropdown-menu li > a, +.dropdown-menu li button { + background: transparent; + border: 0; + border-radius: 0; + box-shadow: none; + display: block; + font-weight: 400; + position: relative; + padding: 8px 12px; + color: #fafafa; + line-height: 16px; + white-space: normal; + overflow: hidden; + text-align: left; + width: 100%; +} +.dropdown-menu .divider { + height: 1px; + margin: 0.25rem 0; + padding: 0; + background-color: #4f4f4f; +} +.dropdown-menu .badge.badge-pill + span:not(.badge.badge-pill) { + margin-right: 40px; +} +.dropdown-select { + width: 300px; +} + +@media (max-width: 767.98px) { + .dropdown-select { + width: 100%; + } +} +.dropdown-content { + max-height: 252px; + overflow-y: auto; +} +.dropdown-loading { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: none; + z-index: 9; + background-color: rgba(51, 51, 51, 0.6); + font-size: 28px; +} +.dropdown-loading .fa { + position: absolute; + top: 50%; + left: 50%; + margin-top: -14px; + margin-left: -14px; +} + +@media (max-width: 575.98px) { + .navbar-gitlab li.dropdown { + position: static; + } + header.navbar-gitlab .dropdown .dropdown-menu { + width: 100%; + min-width: 100%; + } +} + +@media (max-width: 767.98px) { + .dropdown-menu-toggle { + width: 100%; + } +} +textarea { + resize: vertical; +} +input { + border-radius: 0.25rem; + color: #fafafa; + background-color: #4f4f4f; +} + .search form { + border-radius: 4px; + padding: 6px 10px; +} + .search form::placeholder { + color: #a7a7a7; +} +body.ui-indigo .navbar-gitlab { + background-color: #292961; +} +body.ui-indigo .navbar-gitlab .navbar-collapse { + color: #d1d1f0; +} +body.ui-indigo .navbar-gitlab .container-fluid .navbar-toggler { + border-left: 1px solid #6868b9; +} +body.ui-indigo .navbar-gitlab .container-fluid .navbar-toggler svg { + fill: #d1d1f0; +} +body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.active > a, +body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.active > button, body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.dropdown.show > a, +body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.dropdown.show > button, +body.ui-indigo .navbar-gitlab .navbar-nav > li.active > a, +body.ui-indigo .navbar-gitlab .navbar-nav > li.active > button, +body.ui-indigo .navbar-gitlab .navbar-nav > li.dropdown.show > a, +body.ui-indigo .navbar-gitlab .navbar-nav > li.dropdown.show > button { + color: #292961; + background-color: #333; +} +body.ui-indigo .navbar-gitlab .navbar-sub-nav { + color: #d1d1f0; +} +body.ui-indigo .navbar-gitlab .nav > li { + color: #d1d1f0; +} +body.ui-indigo .navbar-gitlab .nav > li > a.header-user-dropdown-toggle .header-user-avatar { + border-color: #d1d1f0; +} +body.ui-indigo .navbar-gitlab .nav > li.active > a, +body.ui-indigo .navbar-gitlab .nav > li.dropdown.show > a { + color: #292961; + background-color: #333; +} +body.ui-indigo .search form { + background-color: rgba(209, 209, 240, 0.2); +} +body.ui-indigo .search .search-input::placeholder { + color: rgba(209, 209, 240, 0.8); +} +body.ui-indigo .search .search-input-wrap .search-icon, +body.ui-indigo .search .search-input-wrap .clear-icon { + fill: rgba(209, 209, 240, 0.8); +} +body.ui-indigo .nav-sidebar li.active { + box-shadow: inset 4px 0 0 #4b4ba3; +} +body.ui-indigo .nav-sidebar li.active > a { + color: #393982; +} +body.ui-indigo .nav-sidebar li.active .nav-icon-container svg { + fill: #393982; +} +body.ui-indigo .sidebar-top-level-items > li.active .badge.badge-pill { + color: #393982; +} +body.gl-dark .logo-text svg { + fill: #fafafa; +} +body.gl-dark .navbar-gitlab { + background-color: #2e2e2e; +} +body.gl-dark .navbar-gitlab .navbar-sub-nav li.active > a, +body.gl-dark .navbar-gitlab .navbar-sub-nav li.active > button, +body.gl-dark .navbar-gitlab .navbar-sub-nav li.dropdown.show > a, +body.gl-dark .navbar-gitlab .navbar-sub-nav li.dropdown.show > button, +body.gl-dark .navbar-gitlab .navbar-nav li.active > a, +body.gl-dark .navbar-gitlab .navbar-nav li.active > button, +body.gl-dark .navbar-gitlab .navbar-nav li.dropdown.show > a, +body.gl-dark .navbar-gitlab .navbar-nav li.dropdown.show > button { + color: #fafafa; + background-color: #707070; +} +body.gl-dark .navbar-gitlab .search form { + background-color: #4f4f4f; + box-shadow: inset 0 0 0 1px #4f4f4f; +} +.navbar-gitlab { + padding: 0 16px; + z-index: 1000; + margin-bottom: 0; + min-height: 40px; + border: 0; + border-bottom: 1px solid #4f4f4f; + position: fixed; + top: 0; + left: 0; + right: 0; + border-radius: 0; +} +.navbar-gitlab .logo-text { + line-height: initial; +} +.navbar-gitlab .logo-text svg { + width: 55px; + height: 14px; + margin: 0; + fill: #333; +} +.navbar-gitlab .close-icon { + display: none; +} +.navbar-gitlab .header-content { + width: 100%; + display: flex; + justify-content: space-between; + position: relative; + min-height: 40px; + padding-left: 0; +} +.navbar-gitlab .header-content .title-container { + display: flex; + align-items: stretch; + flex: 1 1 auto; + padding-top: 0; + overflow: visible; +} +.navbar-gitlab .header-content .title { + padding-right: 0; + color: currentColor; + display: flex; + position: relative; + margin: 0; + font-size: 18px; + vertical-align: top; + white-space: nowrap; +} +.navbar-gitlab .header-content .title img { + height: 28px; +} +.navbar-gitlab .header-content .title img + .logo-text { + margin-left: 8px; +} +.navbar-gitlab .header-content .title.wrap { + white-space: normal; +} +.navbar-gitlab .header-content .title a { + display: flex; + align-items: center; + padding: 2px 8px; + margin: 5px 2px 5px -8px; + border-radius: 4px; +} +.navbar-gitlab .header-content .dropdown.open > a { + border-bottom-color: #333; +} +.navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) { + margin: 0 2px; +} +.navbar-gitlab .navbar-collapse { + flex: 0 0 auto; + border-top: 0; + padding: 0; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .navbar-collapse { + flex: 1 1 auto; + } +} +.navbar-gitlab .navbar-collapse .nav { + flex-wrap: nowrap; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .navbar-collapse .nav > li:not(.d-none) a { + margin-left: 0; + } +} +.navbar-gitlab .container-fluid { + padding: 0; +} +.navbar-gitlab .container-fluid .user-counter svg { + margin-right: 3px; +} +.navbar-gitlab .container-fluid .navbar-toggler { + position: relative; + right: -10px; + border-radius: 0; + min-width: 45px; + padding: 0; + margin: 8px -7px 8px 0; + font-size: 14px; + text-align: center; + color: currentColor; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .container-fluid .navbar-nav { + display: flex; + padding-right: 10px; + flex-direction: row; + } +} +.navbar-gitlab .container-fluid .navbar-nav li .badge.badge-pill { + box-shadow: none; + font-weight: 600; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .container-fluid .nav > li.header-user { + padding-left: 10px; + } +} +.navbar-gitlab .container-fluid .nav > li > a { + will-change: color; + margin: 4px 0; + padding: 6px 8px; + height: 32px; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .container-fluid .nav > li > a { + padding: 0; + } +} +.navbar-gitlab .container-fluid .nav > li > a.header-user-dropdown-toggle { + margin-left: 2px; +} +.navbar-gitlab .container-fluid .nav > li > a.header-user-dropdown-toggle .header-user-avatar { + margin-right: 0; +} +.navbar-gitlab .container-fluid .nav > li .header-new-dropdown-toggle { + margin-right: 0; +} +.navbar-sub-nav > li > a, +.navbar-sub-nav > li > button, +.navbar-nav > li > a, +.navbar-nav > li > button { + display: flex; + align-items: center; + justify-content: center; + padding: 6px 8px; + margin: 4px 2px; + font-size: 12px; + color: currentColor; + border-radius: 4px; + height: 32px; + font-weight: 600; +} +.navbar-sub-nav > li > button, +.navbar-nav > li > button { + background: transparent; + border: 0; +} +.navbar-sub-nav .dropdown-menu, +.navbar-nav .dropdown-menu { + position: absolute; +} +.navbar-sub-nav { + display: flex; + margin: 0 0 0 6px; +} +.caret-down, +.btn .caret-down { + top: 0; + height: 11px; + width: 11px; + margin-left: 4px; + fill: currentColor; +} +.header-user .dropdown-menu, +.header-new .dropdown-menu { + margin-top: 4px; +} +.btn-sign-in { + background-color: #ebebfa; + color: #292961; + font-weight: 600; + line-height: 18px; + margin: 4px 0 4px 2px; +} +.title-container .badge.badge-pill, +.navbar-nav .badge.badge-pill { + position: inherit; + font-weight: 400; + margin-left: -6px; + font-size: 11px; + color: #333; + padding: 0 5px; + line-height: 12px; + border-radius: 7px; + box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2); +} +.title-container .badge.badge-pill.green-badge, +.navbar-nav .badge.badge-pill.green-badge { + background-color: #1aaa55; +} +.title-container .badge.badge-pill.merge-requests-count, +.navbar-nav .badge.badge-pill.merge-requests-count { + background-color: #fca429; +} +.title-container .badge.badge-pill.todos-count, +.navbar-nav .badge.badge-pill.todos-count { + background-color: #1f78d1; +} +.title-container .canary-badge .badge, +.navbar-nav .canary-badge .badge { + font-size: 12px; + line-height: 16px; + padding: 0 0.5rem; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .container-fluid { + font-size: 18px; + } + .navbar-gitlab .container-fluid .navbar-nav { + table-layout: fixed; + width: 100%; + margin: 0; + text-align: right; + } + .navbar-gitlab .container-fluid .navbar-collapse { + margin-left: -8px; + margin-right: -10px; + } + .navbar-gitlab .container-fluid .navbar-collapse .nav > li:not(.d-none) { + flex: 1; + } + .header-user-dropdown-toggle { + text-align: center; + } + .header-user-avatar { + float: none; + } +} +.header-user.show .dropdown-menu { + margin-top: 4px; + color: #fafafa; + left: auto; + max-height: 445px; +} +.header-user.show .dropdown-menu svg { + vertical-align: text-top; +} +.header-user-avatar { + float: left; + margin-right: 5px; + border-radius: 50%; + border: 1px solid #333; +} +.media { + display: flex; + align-items: flex-start; +} +.card { + margin-bottom: 16px; +} +.content-wrapper { + width: 100%; +} +.content-wrapper .container-fluid { + padding: 0 16px; +} + +@media (min-width: 768px) { + .page-with-contextual-sidebar { + padding-left: 50px; + } +} + +@media (min-width: 1200px) { + .page-with-contextual-sidebar { + padding-left: 220px; + } +} +.context-header { + position: relative; + margin-right: 2px; + width: 220px; +} +.context-header > a, +.context-header > button { + font-weight: 600; + display: flex; + width: 100%; + align-items: center; + padding: 10px 16px 10px 10px; + color: #fafafa; + background-color: transparent; + border: 0; + text-align: left; +} +.context-header .avatar-container { + flex: 0 0 40px; + background-color: #333; +} +.context-header .sidebar-context-title { + overflow: hidden; + text-overflow: ellipsis; +} +.context-header .sidebar-context-title.text-secondary { + font-weight: normal; + font-size: 0.8em; +} +.nav-sidebar { + position: fixed; + z-index: 600; + width: 220px; + top: 40px; + bottom: 0; + left: 0; + background-color: #2e2e2e; + box-shadow: inset -1px 0 0 #4f4f4f; + transform: translate3d(0, 0, 0); +} + +@media (min-width: 576px) and (max-width: 576px) { + .nav-sidebar:not(.sidebar-collapsed-desktop) { + box-shadow: inset -1px 0 0 #4f4f4f, 2px 1px 3px rgba(0, 0, 0, 0.1); + } +} +.nav-sidebar.sidebar-collapsed-desktop { + width: 50px; +} +.nav-sidebar.sidebar-collapsed-desktop .nav-sidebar-inner-scroll { + overflow-x: hidden; +} +.nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge), +.nav-sidebar.sidebar-collapsed-desktop .sidebar-context-title, +.nav-sidebar.sidebar-collapsed-desktop .nav-item-name { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} +.nav-sidebar.sidebar-collapsed-desktop .sidebar-top-level-items > li > a { + min-height: 45px; +} +.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item { + display: block; +} +.nav-sidebar.sidebar-collapsed-desktop .avatar-container { + margin: 0 auto; +} +.nav-sidebar.sidebar-expanded-mobile { + left: 0; +} +.nav-sidebar a { + text-decoration: none; +} +.nav-sidebar ul { + padding-left: 0; + list-style: none; +} +.nav-sidebar li { + white-space: nowrap; +} +.nav-sidebar li a { + display: flex; + align-items: center; + padding: 12px 16px; + color: #bababa; +} +.nav-sidebar li .nav-item-name { + flex: 1; +} +.nav-sidebar li.active > a { + font-weight: 600; +} + +@media (max-width: 767.98px) { + .nav-sidebar { + left: -220px; + } +} +.nav-sidebar .nav-icon-container { + display: flex; + margin-right: 8px; +} +.nav-sidebar .fly-out-top-item { + display: none; +} +.nav-sidebar svg { + height: 16px; + width: 16px; +} + +@media (min-width: 768px) and (max-width: 1199px) { + .nav-sidebar:not(.sidebar-expanded-mobile) { + width: 50px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll { + overflow-x: hidden; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .badge.badge-pill:not(.fly-out-badge), + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title, + .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a { + min-height: 45px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item { + display: block; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container { + margin: 0 auto; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .context-header { + height: 60px; + width: 50px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a { + padding: 10px 4px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) { + display: none; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container { + margin-right: 0; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button { + padding: 16px; + width: 49px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .collapse-text, + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-left { + display: none; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-right { + display: block; + margin: 0; + } +} +.nav-sidebar-inner-scroll { + height: 100%; + width: 100%; + overflow: auto; +} +.sidebar-sub-level-items { + display: none; + padding-bottom: 8px; +} +.sidebar-sub-level-items > li a { + padding: 8px 16px 8px 40px; +} +.sidebar-top-level-items { + margin-bottom: 60px; +} + +@media (min-width: 576px) { + .sidebar-top-level-items > li > a { + margin-right: 1px; + } +} +.sidebar-top-level-items > li .badge.badge-pill { + background-color: rgba(255, 255, 255, 0.08); + color: #bababa; +} +.sidebar-top-level-items > li.active { + background: rgba(255, 255, 255, 0.04); +} +.sidebar-top-level-items > li.active > a { + margin-left: 4px; + padding-left: 12px; +} +.sidebar-top-level-items > li.active .badge.badge-pill { + font-weight: 600; +} +.sidebar-top-level-items > li.active .sidebar-sub-level-items:not(.is-fly-out-only) { + display: block; +} +.toggle-sidebar-button, +.close-nav-button { + width: 219px; + position: fixed; + height: 48px; + bottom: 0; + padding: 0 16px; + background-color: #2e2e2e; + border: 0; + border-top: 1px solid #4f4f4f; + color: #bababa; + display: flex; + align-items: center; +} +.toggle-sidebar-button svg, +.close-nav-button svg { + margin-right: 8px; +} +.toggle-sidebar-button .icon-chevron-double-lg-right, +.close-nav-button .icon-chevron-double-lg-right { + display: none; +} +.collapse-text { + white-space: nowrap; + overflow: hidden; +} +.sidebar-collapsed-desktop .context-header { + height: 60px; + width: 50px; +} +.sidebar-collapsed-desktop .context-header a { + padding: 10px 4px; +} +.sidebar-collapsed-desktop .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) { + display: none; +} +.sidebar-collapsed-desktop .nav-icon-container { + margin-right: 0; +} +.sidebar-collapsed-desktop .toggle-sidebar-button { + padding: 16px; + width: 49px; +} +.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text, +.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left { + display: none; +} +.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-right { + display: block; + margin: 0; +} +.fly-out-top-item > a { + display: flex; +} +.fly-out-top-item .fly-out-badge { + margin-left: 8px; +} +.fly-out-top-item-name { + flex: 1; +} +.close-nav-button { + display: none; +} + +@media (max-width: 767.98px) { + .close-nav-button { + display: flex; + } + .toggle-sidebar-button { + display: none; + } +} +table.table { + margin-bottom: 16px; +} +table.table .dropdown-menu a { + text-decoration: none; +} +table.table .success, +table.table .info { + color: #333; +} +table.table .success a:not(.btn), +table.table .info a:not(.btn) { + text-decoration: underline; + color: #333; +} +pre { + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; + display: block; + padding: 8px 12px; + margin: 0 0 8px; + font-size: 13px; + word-break: break-all; + word-wrap: break-word; + color: #fafafa; + background-color: #2e2e2e; + border: 1px solid #4f4f4f; + border-radius: 2px; +} +.monospace { + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; +} +input::-moz-placeholder, +textarea::-moz-placeholder { + color: #a7a7a7; + opacity: 1; +} +input::-ms-input-placeholder, +textarea::-ms-input-placeholder { + color: #a7a7a7; +} +input:-ms-input-placeholder, +textarea:-ms-input-placeholder { + color: #a7a7a7; +} +svg { + fill: currentColor; +} + +svg.s12 { + width: 12px; + height: 12px; +} + +svg.s16 { + width: 16px; + height: 16px; +} + +svg.s18 { + width: 18px; + height: 18px; +} + +svg.s12 { + vertical-align: -1px; +} + +svg.s16 { + vertical-align: -3px; +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} +table.code { + width: 100%; + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; + border: 0; + border-collapse: separate; + margin: 0; + padding: 0; + table-layout: fixed; + border-radius: 0 0 4px 4px; +} +.frame .badge.badge-pill { + position: absolute; + background-color: #1b69b6; + color: #333; + border: #333 1px solid; + min-height: 16px; + padding: 5px 8px; + border-radius: 12px; +} +.frame .badge.badge-pill { + transform: translate(-50%, -50%); +} +.color-label { + padding: 0 0.5rem; + line-height: 16px; + border-radius: 100px; + color: #333; +} +.label-link { + display: inline-flex; + vertical-align: text-bottom; +} +.milestones { + padding: 8px; + margin-top: 8px; + border-radius: 4px; + background-color: #4f4f4f; +} +.search { + margin: 0 8px; +} +.search form { + margin: 0; + padding: 4px; + width: 200px; + line-height: 24px; + height: 32px; + border: 0; + border-radius: 4px; +} + +@media (min-width: 1200px) { + .search form { + width: 320px; + } +} +.search .search-input { + border: 0; + font-size: 14px; + padding: 0 20px 0 0; + margin-left: 5px; + line-height: 25px; + width: 98%; + color: #333; + background: none; +} +.search .search-input-container { + display: flex; + position: relative; +} +.search .search-input-wrap { + width: 100%; +} +.search .search-input-wrap .search-icon, +.search .search-input-wrap .clear-icon { + position: absolute; + right: 5px; + top: 4px; +} +.search .search-input-wrap .search-icon { + -moz-user-select: none; + user-select: none; +} +.search .search-input-wrap .clear-icon { + display: none; +} +.search .search-input-wrap .dropdown { + position: static; +} +.search .search-input-wrap .dropdown-menu { + left: -5px; + max-height: 400px; + overflow: auto; +} + +@media (min-width: 1200px) { + .search .search-input-wrap .dropdown-menu { + width: 320px; + } +} +.search .search-input-wrap .dropdown-content { + max-height: 382px; +} +.settings { + border-top: 1px solid #4f4f4f; +} +.settings:first-of-type { + margin-top: 10px; + border: 0; +} +.settings + div .settings:first-of-type { + margin-top: 0; + border-top: 1px solid #4f4f4f; +} +.avatar, .avatar-container { + float: left; + margin-right: 16px; + border-radius: 50%; + border: 1px solid #333; +} +.s16.avatar, .s16.avatar-container { + width: 16px; + height: 16px; + margin-right: 8px; +} +.s18.avatar, .s18.avatar-container { + width: 18px; + height: 18px; + margin-right: 8px; +} +.s40.avatar, .s40.avatar-container { + width: 40px; + height: 40px; + margin-right: 8px; +} +.avatar { + transition-property: none; + width: 40px; + height: 40px; + padding: 0; + background: #222; + overflow: hidden; + border-color: rgba(255, 255, 255, 0.1); +} +.avatar.center { + font-size: 14px; + line-height: 1.8em; + text-align: center; +} +.avatar.avatar-tile { + border-radius: 0; + border: 0; +} +.avatar-container { + overflow: hidden; + display: flex; +} +.avatar-container a { + width: 100%; + height: 100%; + display: flex; + text-decoration: none; +} +.avatar-container .avatar { + border-radius: 0; + border: 0; + height: auto; + width: 100%; + margin: 0; + align-self: center; +} +.avatar-container.s40 { + min-width: 40px; + min-height: 40px; +} +.rect-avatar { + border-radius: 2px; +} +.rect-avatar.s16 { + border-radius: 2px; +} +.rect-avatar.s18 { + border-radius: 2px; +} +.rect-avatar.s40 { + border-radius: 4px; +} +.tab-width-8 { + -moz-tab-size: 8; + tab-size: 8; +} +.gl-sr-only { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} +.gl-ml-3 { + margin-left: 0.5rem; +} +.content-wrapper > .alert-wrapper, +#content-body, .modal-dialog { + display: block; +} +@import 'cloaking'; +@include cloak-startup-scss(none); diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index 2a7a9255ded..a98e91b32eb 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -1,5 +1,1833 @@ -@charset "UTF-8";*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;overflow-y:scroll}header,nav{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Ubuntu,Cantarell,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-weight:400;line-height:1.5;color:#303030;text-align:left;background-color:#fff}hr{box-sizing:content-box;height:0;margin-top:.5rem;margin-bottom:.5rem;border:0;border-top:1px solid rgba(0,0,0,.1);overflow:hidden;margin:24px 0;border-top:1px solid #eee}p,ul{margin-top:0;margin-bottom:1rem}ul ul{margin-bottom:0}strong{font-weight:700}a{text-decoration:none;background-color:transparent;color:#1068bf}a:not([href]){color:inherit;text-decoration:none}code{font-family:"Menlo","DejaVu Sans Mono","Liberation Mono","Consolas","Ubuntu Mono","Courier New","andale mono","lucida console",monospace;font-size:90%;word-wrap:break-word;padding:2px 4px;color:#1f1f1f;background-color:#f0f0f0;border-radius:4px}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:baseline;fill:currentColor}button{border-radius:0;text-transform:none}button,input{margin:0;font-family:inherit;font-size:inherit;line-height:inherit;overflow:visible}[type=button]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}[type=search]{outline-offset:-2px}summary{display:list-item;cursor:pointer}[hidden]{display:none!important}.h1,h1{margin-bottom:.25rem;font-weight:600;line-height:1.2;color:#303030;font-size:2.1875rem}.list-unstyled{padding-left:0;list-style:none}a>code{color:inherit}.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.container-fluid{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.search form{display:block;padding:.375rem .75rem;font-weight:400;color:#303030;background-color:#fff;background-clip:padding-box;border-radius:.25rem}.search form::-ms-expand{background-color:transparent;border:0}.search form:-moz-focusring{color:transparent;text-shadow:0 0 0 #303030}.search form::placeholder{opacity:1;color:#919191}.search form:disabled{background-color:#fafafa;opacity:1}.form-inline{display:flex;flex-flow:row wrap;align-items:center}@media (min-width:576px){.form-inline .search form,.search .form-inline form{display:inline-block;width:auto;vertical-align:middle}}.btn{display:inline-block;text-align:center;vertical-align:middle;cursor:pointer;user-select:none;border:1px solid transparent;padding:.375rem .75rem;line-height:20px;border-radius:.25rem}.btn:disabled{opacity:.65}.btn-success{color:#fff;background-color:#108548;border-color:#108548}.btn-success:disabled{color:#fff;background-color:#108548;border-color:#108548}.btn-success:not(:disabled):not(.disabled).active,.btn-success:not(:disabled):not(.disabled):active,.show>.btn-success.dropdown-menu-toggle{color:#fff;background-color:#0b572f;border-color:#094c29}.btn-sm{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.collapse:not(.show){display:none}.dropdown-menu-toggle::after{margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-menu-toggle:empty::after{margin-left:0}.dropdown-menu{left:0;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#303030;text-align:left;list-style:none;background-clip:padding-box;border:1px solid rgba(0,0,0,.15)}.dropdown-menu-right{right:0;left:auto}.divider{height:0;margin:4px 0;overflow:hidden;border-top:1px solid #dbdbdb}.dropdown-menu.show{display:block}.nav{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.navbar{position:relative;padding:.25rem .5rem}.navbar,.navbar .container,.navbar .container-fluid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}.navbar-nav{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .dropdown-menu{float:none}.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}.navbar-toggler{padding:.25rem .75rem;font-size:1.25rem;line-height:1;background-color:transparent;border:1px solid transparent;border-radius:.25rem}@media (max-width:575.98px){.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:576px){.navbar-expand-sm{flex-flow:row nowrap;justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{flex-wrap:nowrap}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}.badge,.card{border-radius:.25rem}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid #dbdbdb}.card>hr{margin-right:0;margin-left:0}.badge{display:inline-block;padding:.25em .4em;font-size:75%;font-weight:600;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.badge-pill{padding-right:.6em;padding-left:.6em;border-radius:10rem}.close{float:right;font-size:1.5rem;font-weight:600;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}button.close{padding:0;background-color:transparent;border:0;appearance:none}.bg-transparent{background-color:transparent!important}.border{border:1px solid #dbdbdb!important}.rounded{border-radius:.25rem!important}.d-none{display:none!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}@media (min-width:576px){.d-sm-none{display:none!important}}@media (min-width:768px){.d-md-block{display:block!important}}@media (min-width:992px){.d-lg-none{display:none!important}.d-lg-block{display:block!important}}@media (min-width:1200px){.d-xl-block{display:block!important}}.float-right{float:right!important}.sr-only{white-space:nowrap}.m-auto{margin:auto!important}.text-nowrap{white-space:nowrap!important}.search form,body{font-size:.875rem}[role=button],button,html [type=button]{cursor:pointer}.h1,h1{margin-top:20px;margin-bottom:10px}input[type=file]{line-height:1}.code>code{background-color:inherit;padding:unset}.hidden{display:none!important;visibility:hidden!important}.dropdown-menu-toggle::after,.hide{display:none}.badge:not(.gl-badge){padding:4px 5px;font-size:12px;font-style:normal;font-weight:400;display:inline-block}.toggle-sidebar-button .collapse-text,.toggle-sidebar-button .icon-chevron-double-lg-left,.toggle-sidebar-button .icon-chevron-double-lg-right{color:#707070}body{text-decoration-skip:ink}.container{padding-top:0;z-index:5}.container .content{margin:0}@media (max-width:575.98px){.container .content{margin-top:20px}.container .container .title{padding-left:15px!important}}.btn{border-radius:4px;font-size:.875rem;font-weight:400;padding:6px 10px;background-color:#fff;border-color:#dbdbdb;color:#303030;white-space:nowrap}.btn:active{box-shadow:none}.btn.active,.btn:active{box-shadow:rgba(0,0,0,.16);background-color:#eaeaea;border-color:#e3e3e3;color:#303030}.btn.btn-sm{padding:4px 10px;font-size:13px;line-height:18px}.btn.btn-success{background-color:#108548;border-color:#217645;color:#fff}.btn.btn-success.active,.btn.btn-success:active{box-shadow:rgba(0,0,0,.16);background-color:#24663b;border-color:#0d532a;color:#fff}.btn svg{height:15px;width:15px;position:relative;top:2px}.btn .fa:not(:last-child),.btn svg:not(:last-child){margin-right:5px}.badge.badge-pill:not(.gl-badge){font-weight:400;background-color:rgba(0,0,0,.07);color:#4f4f4f;vertical-align:baseline}.loading{margin:20px auto;height:40px;color:#555;font-size:32px;text-align:center}.chart{overflow:hidden;height:220px}.center{text-align:center}.flex{display:flex}.dropdown{position:relative}.show.dropdown .dropdown-menu{transform:translateY(0);display:block;min-height:40px;max-height:312px;overflow-y:auto}@media (max-width:575.98px){.show.dropdown .dropdown-menu{width:100%}}.show.dropdown .dropdown-menu-toggle{border-color:#c4c4c4}.search-input-container .dropdown-menu{margin-top:11px}.dropdown-menu,.dropdown-menu-toggle{font-size:14px;background-color:#fff;border:1px solid #dbdbdb;border-radius:.25rem}.dropdown-menu-toggle{color:#303030;text-align:left;white-space:nowrap;padding:6px 25px 6px 10px;position:relative;width:160px;text-overflow:ellipsis;overflow:hidden}.no-outline.dropdown-menu-toggle,.show.dropdown [data-toggle=dropdown]{outline:0}.dropdown-menu-toggle .fa{color:#c4c4c4;position:absolute}.dropdown-menu{display:none;position:absolute;width:auto;top:100%;z-index:300;min-width:240px;max-width:500px;margin-top:4px;margin-bottom:24px;font-weight:400;padding:8px 0;box-shadow:0 2px 4px rgba(0,0,0,.1)}.dropdown-menu ul{margin:0;padding:0}.dropdown-menu li{display:block;text-align:left;list-style:none;padding:0 1px}.dropdown-menu li button,.dropdown-menu li>a{background:0 0;border:0;border-radius:0;box-shadow:none;display:block;font-weight:400;position:relative;padding:8px 12px;color:#303030;line-height:16px;white-space:normal;overflow:hidden;text-align:left;width:100%}.dropdown-menu li button:active,.dropdown-menu li>a:active{background-color:#eee;color:#303030;outline:0;text-decoration:none}.dropdown-menu li button:active .avatar,.dropdown-menu li>a:active .avatar{border-color:#fff}.dropdown-menu li button:active .badge.badge-pill,.dropdown-menu li>a:active .badge.badge-pill{background-color:#d3e7f9}.dropdown-menu .divider{height:1px;margin:.25rem 0;padding:0;background-color:#dbdbdb}.dropdown-menu .badge.badge-pill+span:not(.badge.badge-pill){margin-right:40px}.dropdown-select{width:300px}@media (max-width:767.98px){.dropdown-select{width:100%}}.dropdown-content{max-height:252px;overflow-y:auto}.dropdown-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:none;z-index:9;background-color:rgba(255,255,255,.6);font-size:28px}.dropdown-loading .fa{position:absolute;top:50%;left:50%;margin-top:-14px;margin-left:-14px}@media (max-width:575.98px){.navbar-gitlab li.dropdown{position:static}header.navbar-gitlab .dropdown .dropdown-menu{width:100%;min-width:100%}}@media (max-width:767.98px){.dropdown-menu-toggle{width:100%}}input{border-radius:.25rem;color:#303030;background-color:#fff}.search form{margin:0;padding:4px;width:200px;line-height:24px;height:32px;border:0;border-radius:4px}body.ui-indigo .navbar-gitlab{background-color:#292961}body.ui-indigo .navbar-gitlab .nav>li,body.ui-indigo .navbar-gitlab .navbar-collapse,body.ui-indigo .navbar-gitlab .navbar-sub-nav{color:#d1d1f0}body.ui-indigo .navbar-gitlab .container-fluid .navbar-toggler{border-left:1px solid #6868b9}body.ui-indigo .navbar-gitlab .container-fluid .navbar-toggler svg{fill:#d1d1f0}body.ui-indigo .navbar-gitlab .nav>li.active>a,body.ui-indigo .navbar-gitlab .nav>li.dropdown.show>a,body.ui-indigo .navbar-gitlab .navbar-nav>li.active>a,body.ui-indigo .navbar-gitlab .navbar-nav>li.active>button,body.ui-indigo .navbar-gitlab .navbar-nav>li.dropdown.show>a,body.ui-indigo .navbar-gitlab .navbar-nav>li.dropdown.show>button,body.ui-indigo .navbar-gitlab .navbar-sub-nav>li.active>a,body.ui-indigo .navbar-gitlab .navbar-sub-nav>li.active>button,body.ui-indigo .navbar-gitlab .navbar-sub-nav>li.dropdown.show>a,body.ui-indigo .navbar-gitlab .navbar-sub-nav>li.dropdown.show>button{color:#292961;background-color:#fff}body.ui-indigo .navbar-gitlab .nav>li>a.header-user-dropdown-toggle .header-user-avatar{border-color:#d1d1f0}body.ui-indigo .search form{background-color:rgba(209,209,240,.2)}body.ui-indigo .search .search-input::placeholder{color:rgba(209,209,240,.8)}body.ui-indigo .search .search-input-wrap .clear-icon,body.ui-indigo .search .search-input-wrap .search-icon{fill:rgba(209,209,240,.8)}body.ui-indigo .nav-sidebar li.active{box-shadow:inset 4px 0 0 #4b4ba3}body.ui-indigo .nav-sidebar li.active>a,body.ui-indigo .sidebar-top-level-items>li.active .badge.badge-pill{color:#393982}body.ui-indigo .nav-sidebar li.active .nav-icon-container svg{fill:#393982}.navbar-gitlab{padding:0 16px;z-index:1000;margin-bottom:0;min-height:40px;border:0;border-bottom:1px solid #dbdbdb;position:fixed;top:0;left:0;right:0;border-radius:0}.navbar-gitlab .logo-text{line-height:initial}.navbar-gitlab .logo-text svg{width:55px;height:14px;margin:0;fill:#fff}.navbar-gitlab .close-icon{display:none}.navbar-gitlab .header-content{width:100%;display:flex;justify-content:space-between;position:relative;min-height:40px;padding-left:0}.navbar-gitlab .header-content .title-container{display:flex;align-items:stretch;flex:1 1 auto;padding-top:0;overflow:visible}.navbar-gitlab .header-content .title{padding-right:0;color:currentColor;display:flex;position:relative;margin:0;font-size:18px;vertical-align:top;white-space:nowrap}.navbar-gitlab .header-content .title img{height:28px}.navbar-gitlab .header-content .title img+.logo-text{margin-left:8px}.navbar-gitlab .header-content .title a{display:flex;align-items:center;padding:2px 8px;margin:5px 2px 5px -8px;border-radius:4px}.navbar-gitlab .header-content .dropdown.open>a{border-bottom-color:#fff}.navbar-gitlab .header-content .navbar-collapse>ul.nav>li:not(.d-none){margin:0 2px}.navbar-gitlab .navbar-collapse{flex:0 0 auto;border-top:0;padding:0}@media (max-width:575.98px){.navbar-gitlab .navbar-collapse{flex:1 1 auto}}.navbar-gitlab .navbar-collapse .nav{flex-wrap:nowrap}@media (max-width:575.98px){.navbar-gitlab .navbar-collapse .nav>li:not(.d-none) a{margin-left:0}}.navbar-gitlab .container-fluid{padding:0}.navbar-gitlab .container-fluid .user-counter svg{margin-right:3px}.navbar-gitlab .container-fluid .navbar-toggler{position:relative;right:-10px;border-radius:0;min-width:45px;padding:0;margin:8px -7px 8px 0;font-size:14px;text-align:center;color:currentColor}.navbar-gitlab .container-fluid .navbar-toggler.active{color:currentColor;background-color:transparent}@media (max-width:575.98px){.navbar-gitlab .container-fluid .navbar-nav{display:flex;padding-right:10px;flex-direction:row}}.navbar-gitlab .container-fluid .navbar-nav li .badge.badge-pill{box-shadow:none;font-weight:600}@media (max-width:575.98px){.navbar-gitlab .container-fluid .nav>li.header-user{padding-left:10px}}.navbar-gitlab .container-fluid .nav>li>a{will-change:color;margin:4px 0;padding:6px 8px;height:32px}@media (max-width:575.98px){.navbar-gitlab .container-fluid .nav>li>a{padding:0}}.navbar-gitlab .container-fluid .nav>li>a.header-user-dropdown-toggle{margin-left:2px}.navbar-gitlab .container-fluid .nav>li .header-new-dropdown-toggle,.navbar-gitlab .container-fluid .nav>li>a.header-user-dropdown-toggle .header-user-avatar{margin-right:0}.navbar-nav>li>a,.navbar-nav>li>button,.navbar-sub-nav>li>a,.navbar-sub-nav>li>button{display:flex;align-items:center;justify-content:center;padding:6px 8px;margin:4px 2px;font-size:12px;color:currentColor;border-radius:4px;height:32px;font-weight:600}.navbar-nav>li>button,.navbar-sub-nav>li>button{background:0 0;border:0}.navbar-nav .dropdown-menu,.navbar-sub-nav .dropdown-menu{position:absolute}.navbar-sub-nav{display:flex;margin:0 0 0 6px}.btn .caret-down,.caret-down{top:0;height:11px;width:11px;margin-left:4px;fill:currentColor}.header-new .dropdown-menu,.header-user .dropdown-menu{margin-top:4px}.btn-sign-in{background-color:#ebebfa;color:#292961;font-weight:600;line-height:18px;margin:4px 0 4px 2px}.navbar-nav .badge.badge-pill,.title-container .badge.badge-pill{position:inherit;font-weight:400;margin-left:-6px;font-size:11px;color:#fff;padding:0 5px;line-height:12px;border-radius:7px;box-shadow:0 1px 0 rgba(76,78,84,.2)}.navbar-nav .badge.badge-pill.green-badge,.title-container .badge.badge-pill.green-badge{background-color:#108548}.navbar-nav .badge.badge-pill.merge-requests-count,.title-container .badge.badge-pill.merge-requests-count{background-color:#de7e00}.navbar-nav .badge.badge-pill.todos-count,.title-container .badge.badge-pill.todos-count{background-color:#1f75cb}.navbar-nav .canary-badge .badge,.title-container .canary-badge .badge{font-size:12px;line-height:16px;padding:0 .5rem}@media (max-width:575.98px){.navbar-gitlab .container-fluid{font-size:18px}.navbar-gitlab .container-fluid .navbar-nav{table-layout:fixed;width:100%;margin:0;text-align:right}.navbar-gitlab .container-fluid .navbar-collapse{margin-left:-8px;margin-right:-10px}.navbar-gitlab .container-fluid .navbar-collapse .nav>li:not(.d-none){flex:1}.header-user-dropdown-toggle{text-align:center}.header-user-avatar{float:none}}.header-user.show .dropdown-menu{margin-top:4px;color:#303030;left:auto;max-height:445px}.header-user.show .dropdown-menu svg{vertical-align:text-top}.header-user-avatar{float:left;margin-right:5px;border-radius:50%;border:1px solid #f5f5f5}.media{display:flex;align-items:flex-start}.card{margin-bottom:16px}@media (min-width:768px){.page-with-contextual-sidebar{padding-left:50px}}@media (min-width:1200px){.page-with-contextual-sidebar{padding-left:220px}}.context-header{position:relative;margin-right:2px;width:220px}.context-header>a,.context-header>button{font-weight:600;display:flex;width:100%;align-items:center;padding:10px 16px 10px 10px;color:#303030;background-color:transparent;border:0;text-align:left}.context-header .avatar-container{flex:0 0 40px;background-color:#fff}.context-header .sidebar-context-title{overflow:hidden;text-overflow:ellipsis}.context-header .sidebar-context-title.text-secondary{font-weight:400;font-size:.8em}.nav-sidebar{position:fixed;z-index:600;width:220px;top:40px;bottom:0;left:0;background-color:#fafafa;box-shadow:inset -1px 0 0 #dbdbdb;transform:translate3d(0,0,0)}@media (min-width:576px) and (max-width:576px){.nav-sidebar:not(.sidebar-collapsed-desktop){box-shadow:inset -1px 0 0 #dbdbdb,2px 1px 3px rgba(0,0,0,.1)}}.nav-sidebar a{text-decoration:none}.nav-sidebar ul{padding-left:0;list-style:none}.nav-sidebar li{white-space:nowrap}.nav-sidebar li a{display:flex;align-items:center;padding:12px 16px;color:#707070}.nav-sidebar li .nav-item-name{flex:1}.nav-sidebar li.active>a,.sidebar-top-level-items>li.active .badge.badge-pill{font-weight:600}@media (max-width:767.98px){.nav-sidebar{left:-220px}}.nav-sidebar .nav-icon-container{display:flex;margin-right:8px}.nav-sidebar .fly-out-top-item{display:none}.nav-sidebar svg{height:16px;width:16px}@media (min-width:768px) and (max-width:1199px){.nav-sidebar:not(.sidebar-expanded-mobile){width:50px}.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll{overflow-x:hidden}.nav-sidebar:not(.sidebar-expanded-mobile) .badge.badge-pill:not(.fly-out-badge),.nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name,.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items>li>a{min-height:45px}.nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item{display:block}.nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container{margin:0 auto}.nav-sidebar:not(.sidebar-expanded-mobile) .context-header{height:60px;width:50px}.nav-sidebar:not(.sidebar-expanded-mobile) .context-header a{padding:10px 4px}.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items>li .sidebar-sub-level-items:not(.flyout-list),.nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .collapse-text,.nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-left{display:none}.nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container{margin-right:0}.nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button{padding:16px;width:49px}.nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-right{display:block;margin:0}}.nav-sidebar-inner-scroll{height:100%;width:100%;overflow:auto}.sidebar-sub-level-items{display:none;padding-bottom:8px}.sidebar-sub-level-items>li a{padding:8px 16px 8px 40px}.sidebar-sub-level-items>li.active a,.sidebar-top-level-items>li.active{background:rgba(0,0,0,.04)}.sidebar-top-level-items{margin-bottom:60px}@media (min-width:576px){.sidebar-top-level-items>li>a{margin-right:1px}}.sidebar-top-level-items>li .badge.badge-pill{background-color:rgba(0,0,0,.08);color:#707070}.sidebar-top-level-items>li.active>a{margin-left:4px;padding-left:12px}.sidebar-top-level-items>li.active .sidebar-sub-level-items:not(.is-fly-out-only){display:block}.close-nav-button,.toggle-sidebar-button{width:219px;position:fixed;height:48px;bottom:0;padding:0 16px;background-color:#fafafa;border:0;border-top:1px solid #dbdbdb;color:#707070;display:flex;align-items:center}.close-nav-button svg,.toggle-sidebar-button svg{margin-right:8px}.close-nav-button .icon-chevron-double-lg-right,.toggle-sidebar-button .icon-chevron-double-lg-right{display:none}.collapse-text{white-space:nowrap;overflow:hidden}.fly-out-top-item>a{display:flex}.fly-out-top-item .fly-out-badge{margin-left:8px}.fly-out-top-item-name{flex:1}.close-nav-button{display:none}@media (max-width:767.98px){.close-nav-button{display:flex}.toggle-sidebar-button{display:none}}input::-moz-placeholder{color:#919191;opacity:1}input:-ms-input-placeholder,input::-ms-input-placeholder{color:#919191}svg.s12{width:12px;height:12px}svg.s16{width:16px;height:16px}svg.s18{width:18px;height:18px}.feature-highlight-popover-sub-content{padding:16px 12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.color-label{padding:0 .5rem;line-height:16px;border-radius:100px;color:#fff}.label-link{display:inline-flex;vertical-align:text-bottom}.milestones{padding:8px;margin-top:8px;border-radius:4px;background-color:#dbdbdb}.search{margin:0 8px}@media (min-width:1200px){.search form{width:320px}}.search .search-input{border:0;font-size:14px;padding:0 20px 0 0;margin-left:5px;line-height:25px;width:98%;color:#fff;background:0 0}.search .search-input-container{display:flex;position:relative}.search .search-input-wrap{width:100%}.search .search-input-wrap .clear-icon,.search .search-input-wrap .search-icon{position:absolute;right:5px;top:4px}.search .search-input-wrap .search-icon{-moz-user-select:none;user-select:none}.search .search-input-wrap .clear-icon{display:none}.search .search-input-wrap .dropdown{position:static}.search .search-input-wrap .dropdown-menu{left:-5px;max-height:400px;overflow:auto}@media (min-width:1200px){.search .search-input-wrap .dropdown-menu{width:320px}}.search .search-input-wrap .dropdown-content{max-height:382px}.search .identicon{flex-basis:16px;flex-shrink:0;margin-right:4px}.settings{border-top:1px solid #dbdbdb}.settings:first-of-type{margin-top:10px;border:0}.settings+div .settings:first-of-type{margin-top:0;border-top:1px solid #dbdbdb}.avatar,.avatar-container{float:left;margin-right:16px;border-radius:50%;border:1px solid #f5f5f5}.s16.avatar,.s16.avatar-container{width:16px;height:16px;margin-right:8px}.s18.avatar,.s18.avatar-container{width:18px;height:18px;margin-right:8px}.s40.avatar,.s40.avatar-container{width:40px;height:40px;margin-right:8px}.avatar{transition-property:none;width:40px;height:40px;padding:0;background:#fdfdfd;overflow:hidden;border-color:rgba(0,0,0,.1)}.avatar.center{font-size:14px;line-height:1.8em;text-align:center}.avatar.avatar-tile{border-radius:0;border:0}.identicon{text-align:center;vertical-align:top;color:#4f4f4f;background-color:#eee}.identicon.s16{font-size:10px;line-height:16px}.identicon.s40{font-size:16px;line-height:38px}.avatar-container{overflow:hidden;display:flex}.avatar-container a{width:100%;height:100%;display:flex;text-decoration:none}.avatar-container .avatar{border-radius:0;border:0;height:auto;width:100%;margin:0;align-self:center}.avatar-container.s40{min-width:40px;min-height:40px}.rect-avatar,.rect-avatar.s16,.rect-avatar.s18{border-radius:2px}.rect-avatar.s40{border-radius:4px}.tab-width-8{-moz-tab-size:8;tab-size:8}.gl-sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.gl-ml-3{margin-left:.5rem} +@charset "UTF-8"; +*, +*::before, +*::after { + box-sizing: border-box; +} +html { + font-family: sans-serif; + line-height: 1.15; +} + header, nav, section { + display: block; +} +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #303030; + text-align: left; + background-color: #fff; +} +h1, h2, h3 { + margin-top: 0; + margin-bottom: 0.25rem; +} +p { + margin-top: 0; + margin-bottom: 1rem; +} -/* Cloaking in order to prevent flickering of content */ +ul { + margin-top: 0; + margin-bottom: 1rem; +} + +ul ul { + margin-bottom: 0; +} + +strong { + font-weight: bolder; +} +sub { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} +sub { + bottom: -.25em; +} +a { + color: #007bff; + text-decoration: none; + background-color: transparent; +} +a:not([href]) { + color: inherit; + text-decoration: none; +} +pre, +code { + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; + font-size: 1em; +} +pre { + margin-top: 0; + margin-bottom: 1rem; + overflow: auto; +} +img { + vertical-align: middle; + border-style: none; +} +svg { + overflow: hidden; + vertical-align: middle; +} +table { + border-collapse: collapse; +} +th { + text-align: inherit; +} +button { + border-radius: 0; +} +input, +button, +textarea { + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} +button, +input { + overflow: visible; +} +button { + text-transform: none; +} +button:not(:disabled), +[type="button"]:not(:disabled), +[type="reset"]:not(:disabled) { + cursor: pointer; +} +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner { + padding: 0; + border-style: none; +} +textarea { + overflow: auto; + resize: vertical; +} +[type="search"] { + outline-offset: -2px; +} +summary { + display: list-item; + cursor: pointer; +} +template { + display: none; +} +[hidden] { + display: none !important; +} +h1, h2, h3, +.h1, .h2, .h3 { + margin-bottom: 0.25rem; + font-weight: 600; + line-height: 1.2; + color: #303030; +} +h1, .h1 { + font-size: 2.1875rem; +} +h2, .h2 { + font-size: 1.75rem; +} +h3, .h3 { + font-size: 1.53125rem; +} +.list-unstyled { + padding-left: 0; + list-style: none; +} +code { + font-size: 90%; + color: #1f1f1f; + word-wrap: break-word; +} +a > code { + color: inherit; +} +pre { + display: block; + font-size: 90%; + color: #303030; +} +pre code { + font-size: inherit; + color: inherit; + word-break: normal; +} +.container { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} + +@media (min-width: 576px) { + .container { + max-width: 540px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 720px; + } +} + +@media (min-width: 992px) { + .container { + max-width: 960px; + } +} + +@media (min-width: 1200px) { + .container { + max-width: 1140px; + } +} +.container-fluid { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} + +@media (min-width: 576px) { + .container { + max-width: 540px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 720px; + } +} + +@media (min-width: 992px) { + .container { + max-width: 960px; + } +} + +@media (min-width: 1200px) { + .container { + max-width: 1140px; + } +} +.row { + display: flex; + flex-wrap: wrap; + margin-right: -15px; + margin-left: -15px; +} +.table { + width: 100%; + margin-bottom: 0.5rem; + color: #303030; +} +.table th, +.table td { + padding: 0.75rem; + vertical-align: top; + border-top: 1px solid #dbdbdb; +} + .search form { + display: block; + width: 100%; + height: 34px; + padding: 0.375rem 0.75rem; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.5; + color: #303030; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #dbdbdb; + border-radius: 0.25rem; +} + +@media (prefers-reduced-motion: reduce) { +} + .search form:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #303030; +} + .search form::placeholder { + color: #5e5e5e; + opacity: 1; +} + .search form:disabled { + background-color: #fafafa; + opacity: 1; +} +.form-inline { + display: flex; + flex-flow: row wrap; + align-items: center; +} + +@media (min-width: 576px) { + .form-inline .search form, .search .form-inline form { + display: inline-block; + width: auto; + vertical-align: middle; + } +} +.btn { + display: inline-block; + font-weight: 400; + color: #303030; + text-align: center; + vertical-align: middle; + cursor: pointer; + user-select: none; + background-color: transparent; + border: 1px solid transparent; + padding: 0.375rem 0.75rem; + font-size: 1rem; + line-height: 20px; + border-radius: 0.25rem; +} + +@media (prefers-reduced-motion: reduce) { +} +.btn.disabled, .btn:disabled { + opacity: 0.65; +} +a.btn.disabled { + pointer-events: none; +} +.collapse:not(.show) { + display: none; +} + +.dropdown { + position: relative; +} + .dropdown-menu-toggle { + white-space: nowrap; +} + .dropdown-menu-toggle::after { + display: inline-block; + margin-left: 0.255em; + vertical-align: 0.255em; + content: ""; + border-top: 0.3em solid; + border-right: 0.3em solid transparent; + border-bottom: 0; + border-left: 0.3em solid transparent; +} + .dropdown-menu-toggle:empty::after { + margin-left: 0; +} +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + min-width: 10rem; + padding: 0.5rem 0; + margin: 0.125rem 0 0; + font-size: 1rem; + color: #303030; + text-align: left; + list-style: none; + background-color: #fff; + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 0.25rem; +} +.dropdown-menu-right { + right: 0; + left: auto; +} + .divider { + height: 0; + margin: 4px 0; + overflow: hidden; + border-top: 1px solid #dbdbdb; +} +.dropdown-menu.show { + display: block; +} +.nav { + display: flex; + flex-wrap: wrap; + padding-left: 0; + margin-bottom: 0; + list-style: none; +} +.navbar { + position: relative; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + padding: 0.25rem 0.5rem; +} +.navbar .container, +.navbar .container-fluid { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; +} +.navbar-nav { + display: flex; + flex-direction: column; + padding-left: 0; + margin-bottom: 0; + list-style: none; +} +.navbar-nav .dropdown-menu { + position: static; + float: none; +} +.navbar-collapse { + flex-basis: 100%; + flex-grow: 1; + align-items: center; +} +.navbar-toggler { + padding: 0.25rem 0.75rem; + font-size: 1.25rem; + line-height: 1; + background-color: transparent; + border: 1px solid transparent; + border-radius: 0.25rem; +} + +@media (max-width: 575.98px) { + .navbar-expand-sm > .container, + .navbar-expand-sm > .container-fluid { + padding-right: 0; + padding-left: 0; + } +} + +@media (min-width: 576px) { + .navbar-expand-sm { + flex-flow: row nowrap; + justify-content: flex-start; + } + .navbar-expand-sm .navbar-nav { + flex-direction: row; + } + .navbar-expand-sm .navbar-nav .dropdown-menu { + position: absolute; + } + .navbar-expand-sm > .container, + .navbar-expand-sm > .container-fluid { + flex-wrap: nowrap; + } + .navbar-expand-sm .navbar-collapse { + display: flex !important; + flex-basis: auto; + } + .navbar-expand-sm .navbar-toggler { + display: none; + } +} +.card { + position: relative; + display: flex; + flex-direction: column; + min-width: 0; + word-wrap: break-word; + background-color: #fff; + background-clip: border-box; + border: 1px solid #dbdbdb; + border-radius: 0.25rem; +} +.badge { + display: inline-block; + padding: 0.25em 0.4em; + font-size: 75%; + font-weight: 600; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: 0.25rem; +} + +@media (prefers-reduced-motion: reduce) { +} +.badge:empty { + display: none; +} +.btn .badge { + position: relative; + top: -1px; +} +.badge-pill { + padding-right: 0.6em; + padding-left: 0.6em; + border-radius: 10rem; +} +.media { + display: flex; + align-items: flex-start; +} +.close { + float: right; + font-size: 1.5rem; + font-weight: 600; + line-height: 1; + color: #000; + text-shadow: 0 1px 0 #fff; + opacity: .5; +} +button.close { + padding: 0; + background-color: transparent; + border: 0; + appearance: none; +} +a.close.disabled { + pointer-events: none; +} +.modal-dialog { + position: relative; + width: auto; + margin: 0.5rem; + pointer-events: none; +} + +@media (min-width: 576px) { + .modal-dialog { + max-width: 500px; + margin: 1.75rem auto; + } +} +.bg-transparent { + background-color: transparent !important; +} +.border { + border: 1px solid #dbdbdb !important; +} +.border-top { + border-top: 1px solid #dbdbdb !important; +} +.border-right { + border-right: 1px solid #dbdbdb !important; +} +.border-bottom { + border-bottom: 1px solid #dbdbdb !important; +} +.border-left { + border-left: 1px solid #dbdbdb !important; +} +.rounded { + border-radius: 0.25rem !important; +} +.clearfix::after { + display: block; + clear: both; + content: ""; +} +.d-none { + display: none !important; +} +.d-inline-block { + display: inline-block !important; +} +.d-block { + display: block !important; +} + +@media (min-width: 576px) { + .d-sm-none { + display: none !important; + } +} + +@media (min-width: 768px) { + .d-md-block { + display: block !important; + } +} + +@media (min-width: 992px) { + .d-lg-none { + display: none !important; + } + .d-lg-block { + display: block !important; + } +} + +@media (min-width: 1200px) { + .d-xl-block { + display: block !important; + } +} +.flex-wrap { + flex-wrap: wrap !important; +} +.float-right { + float: right !important; +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} +.m-auto { + margin: auto !important; +} +.text-nowrap { + white-space: nowrap !important; +} +.visible { + visibility: visible !important; +} + .search form.focus { + color: #303030; + background-color: #fff; + border-color: #80bdff; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +} +.gl-badge { + display: inline-flex; + align-items: center; + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + outline: none; +} +body, .search form, +.search form { + font-size: 0.875rem; +} +button, +html [type='button'], +[type='reset'], +[role='button'] { + cursor: pointer; +} +h1, +.h1, +h2, +.h2, +h3, +.h3 { + margin-top: 20px; + margin-bottom: 10px; +} +input[type='file'] { + line-height: 1; +} + +strong { + font-weight: bold; +} +a { + color: #1068bf; +} +code { + padding: 2px 4px; + color: #1f1f1f; + background-color: #f0f0f0; + border-radius: 4px; +} +.code > code { + background-color: inherit; + padding: unset; +} +table { + border-spacing: 0; +} +.hidden { + display: none !important; + visibility: hidden !important; +} +.hide { + display: none; +} + .dropdown-menu-toggle::after { + display: none; +} +.badge:not(.gl-badge) { + padding: 4px 5px; + font-size: 12px; + font-style: normal; + font-weight: 400; + display: inline-block; +} +pre code { + white-space: pre-wrap; +} +.toggle-sidebar-button .collapse-text, +.toggle-sidebar-button .icon-chevron-double-lg-left, +.toggle-sidebar-button .icon-chevron-double-lg-right { + color: #666; +} +svg { + vertical-align: baseline; +} +html { + overflow-y: scroll; +} +body { + text-decoration-skip: ink; +} +.content-wrapper { + margin-top: 40px; + padding-bottom: 100px; +} +.container { + padding-top: 0; + z-index: 5; +} +.container .content { + margin: 0; +} + +@media (max-width: 575.98px) { + .container .content { + margin-top: 20px; + } +} + +@media (max-width: 575.98px) { + .container .container .title { + padding-left: 15px !important; + } +} +.btn { + border-radius: 4px; + font-size: 0.875rem; + font-weight: 400; + padding: 6px 10px; + background-color: #fff; + border-color: #dbdbdb; + color: #303030; + color: #303030; + white-space: nowrap; +} +.btn:active, .btn.active { + box-shadow: rgba(0, 0, 0, 0.16); + background-color: #eaeaea; + border-color: #e3e3e3; + color: #303030; +} +.btn svg { + height: 15px; + width: 15px; +} +.btn svg:not(:last-child), +.btn .fa:not(:last-child) { + margin-right: 5px; +} +.badge.badge-pill:not(.gl-badge) { + font-weight: 400; + background-color: rgba(0, 0, 0, 0.07); + color: #525252; + vertical-align: baseline; +} +.hint { + font-style: italic; + color: #bfbfbf; +} +.bold { + font-weight: 600; +} +pre.wrap { + word-break: break-word; + white-space: pre-wrap; +} +table a code { + position: relative; + top: -2px; + margin-right: 3px; +} +.loading { + margin: 20px auto; + height: 40px; + color: #525252; + font-size: 32px; + text-align: center; +} +.highlight { + text-shadow: none; +} +.chart { + overflow: hidden; + height: 220px; +} +.break-word { + word-wrap: break-word; +} +.center { + text-align: center; +} +.block { + display: block; +} +.flex { + display: flex; +} +.flex-grow { + flex-grow: 1; +} +.dropdown { + position: relative; +} +.show.dropdown .dropdown-menu { + transform: translateY(0); + display: block; + min-height: 40px; + max-height: 312px; + overflow-y: auto; +} + +@media (max-width: 575.98px) { + .show.dropdown .dropdown-menu { + width: 100%; + } +} + .show.dropdown .dropdown-menu-toggle, +.show.dropdown .dropdown-menu-toggle { + border-color: #c4c4c4; +} +.show.dropdown [data-toggle='dropdown'] { + outline: 0; +} +.search-input-container .dropdown-menu { + margin-top: 11px; +} + .dropdown-menu-toggle { + padding: 6px 8px 6px 10px; + background-color: #fff; + color: #303030; + font-size: 14px; + text-align: left; + border: 1px solid #dbdbdb; + border-radius: 0.25rem; + white-space: nowrap; +} + .no-outline.dropdown-menu-toggle { + outline: 0; +} + .dropdown-menu-toggle .fa { + color: #c4c4c4; +} +.dropdown-menu-toggle { + padding-right: 25px; + position: relative; + width: 160px; + text-overflow: ellipsis; + overflow: hidden; +} +.dropdown-menu-toggle .fa { + position: absolute; +} +.dropdown-menu { + display: none; + position: absolute; + width: auto; + top: 100%; + z-index: 300; + min-width: 240px; + max-width: 500px; + margin-top: 4px; + margin-bottom: 24px; + font-size: 14px; + font-weight: 400; + padding: 8px 0; + background-color: #fff; + border: 1px solid #dbdbdb; + border-radius: 0.25rem; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} +.dropdown-menu ul { + margin: 0; + padding: 0; +} +.dropdown-menu li { + display: block; + text-align: left; + list-style: none; + padding: 0 1px; +} +.dropdown-menu li > a, +.dropdown-menu li button { + background: transparent; + border: 0; + border-radius: 0; + box-shadow: none; + display: block; + font-weight: 400; + position: relative; + padding: 8px 12px; + color: #303030; + line-height: 16px; + white-space: normal; + overflow: hidden; + text-align: left; + width: 100%; +} +.dropdown-menu .divider { + height: 1px; + margin: 0.25rem 0; + padding: 0; + background-color: #dbdbdb; +} +.dropdown-menu .badge.badge-pill + span:not(.badge.badge-pill) { + margin-right: 40px; +} +.dropdown-select { + width: 300px; +} + +@media (max-width: 767.98px) { + .dropdown-select { + width: 100%; + } +} +.dropdown-content { + max-height: 252px; + overflow-y: auto; +} +.dropdown-loading { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: none; + z-index: 9; + background-color: rgba(255, 255, 255, 0.6); + font-size: 28px; +} +.dropdown-loading .fa { + position: absolute; + top: 50%; + left: 50%; + margin-top: -14px; + margin-left: -14px; +} + +@media (max-width: 575.98px) { + .navbar-gitlab li.dropdown { + position: static; + } + header.navbar-gitlab .dropdown .dropdown-menu { + width: 100%; + min-width: 100%; + } +} + +@media (max-width: 767.98px) { + .dropdown-menu-toggle { + width: 100%; + } +} +textarea { + resize: vertical; +} +input { + border-radius: 0.25rem; + color: #303030; + background-color: #fff; +} + .search form { + border-radius: 4px; + padding: 6px 10px; +} + .search form::placeholder { + color: #868686; +} +.navbar-gitlab { + padding: 0 16px; + z-index: 1000; + margin-bottom: 0; + min-height: 40px; + border: 0; + border-bottom: 1px solid #dbdbdb; + position: fixed; + top: 0; + left: 0; + right: 0; + border-radius: 0; +} +.navbar-gitlab .logo-text { + line-height: initial; +} +.navbar-gitlab .logo-text svg { + width: 55px; + height: 14px; + margin: 0; + fill: #fff; +} +.navbar-gitlab .close-icon { + display: none; +} +.navbar-gitlab .header-content { + width: 100%; + display: flex; + justify-content: space-between; + position: relative; + min-height: 40px; + padding-left: 0; +} +.navbar-gitlab .header-content .title-container { + display: flex; + align-items: stretch; + flex: 1 1 auto; + padding-top: 0; + overflow: visible; +} +.navbar-gitlab .header-content .title { + padding-right: 0; + color: currentColor; + display: flex; + position: relative; + margin: 0; + font-size: 18px; + vertical-align: top; + white-space: nowrap; +} +.navbar-gitlab .header-content .title img { + height: 28px; +} +.navbar-gitlab .header-content .title img + .logo-text { + margin-left: 8px; +} +.navbar-gitlab .header-content .title.wrap { + white-space: normal; +} +.navbar-gitlab .header-content .title a { + display: flex; + align-items: center; + padding: 2px 8px; + margin: 5px 2px 5px -8px; + border-radius: 4px; +} +.navbar-gitlab .header-content .dropdown.open > a { + border-bottom-color: #fff; +} +.navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) { + margin: 0 2px; +} +.navbar-gitlab .navbar-collapse { + flex: 0 0 auto; + border-top: 0; + padding: 0; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .navbar-collapse { + flex: 1 1 auto; + } +} +.navbar-gitlab .navbar-collapse .nav { + flex-wrap: nowrap; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .navbar-collapse .nav > li:not(.d-none) a { + margin-left: 0; + } +} +.navbar-gitlab .container-fluid { + padding: 0; +} +.navbar-gitlab .container-fluid .user-counter svg { + margin-right: 3px; +} +.navbar-gitlab .container-fluid .navbar-toggler { + position: relative; + right: -10px; + border-radius: 0; + min-width: 45px; + padding: 0; + margin: 8px -7px 8px 0; + font-size: 14px; + text-align: center; + color: currentColor; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .container-fluid .navbar-nav { + display: flex; + padding-right: 10px; + flex-direction: row; + } +} +.navbar-gitlab .container-fluid .navbar-nav li .badge.badge-pill { + box-shadow: none; + font-weight: 600; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .container-fluid .nav > li.header-user { + padding-left: 10px; + } +} +.navbar-gitlab .container-fluid .nav > li > a { + will-change: color; + margin: 4px 0; + padding: 6px 8px; + height: 32px; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .container-fluid .nav > li > a { + padding: 0; + } +} +.navbar-gitlab .container-fluid .nav > li > a.header-user-dropdown-toggle { + margin-left: 2px; +} +.navbar-gitlab .container-fluid .nav > li > a.header-user-dropdown-toggle .header-user-avatar { + margin-right: 0; +} +.navbar-gitlab .container-fluid .nav > li .header-new-dropdown-toggle { + margin-right: 0; +} +.navbar-sub-nav > li > a, +.navbar-sub-nav > li > button, +.navbar-nav > li > a, +.navbar-nav > li > button { + display: flex; + align-items: center; + justify-content: center; + padding: 6px 8px; + margin: 4px 2px; + font-size: 12px; + color: currentColor; + border-radius: 4px; + height: 32px; + font-weight: 600; +} +.navbar-sub-nav > li > button, +.navbar-nav > li > button { + background: transparent; + border: 0; +} +.navbar-sub-nav .dropdown-menu, +.navbar-nav .dropdown-menu { + position: absolute; +} +.navbar-sub-nav { + display: flex; + margin: 0 0 0 6px; +} +.caret-down, +.btn .caret-down { + top: 0; + height: 11px; + width: 11px; + margin-left: 4px; + fill: currentColor; +} +.header-user .dropdown-menu, +.header-new .dropdown-menu { + margin-top: 4px; +} +.btn-sign-in { + background-color: #ebebfa; + color: #292961; + font-weight: 600; + line-height: 18px; + margin: 4px 0 4px 2px; +} +.title-container .badge.badge-pill, +.navbar-nav .badge.badge-pill { + position: inherit; + font-weight: 400; + margin-left: -6px; + font-size: 11px; + color: #fff; + padding: 0 5px; + line-height: 12px; + border-radius: 7px; + box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2); +} +.title-container .badge.badge-pill.green-badge, +.navbar-nav .badge.badge-pill.green-badge { + background-color: #108548; +} +.title-container .badge.badge-pill.merge-requests-count, +.navbar-nav .badge.badge-pill.merge-requests-count { + background-color: #de7e00; +} +.title-container .badge.badge-pill.todos-count, +.navbar-nav .badge.badge-pill.todos-count { + background-color: #1f75cb; +} +.title-container .canary-badge .badge, +.navbar-nav .canary-badge .badge { + font-size: 12px; + line-height: 16px; + padding: 0 0.5rem; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .container-fluid { + font-size: 18px; + } + .navbar-gitlab .container-fluid .navbar-nav { + table-layout: fixed; + width: 100%; + margin: 0; + text-align: right; + } + .navbar-gitlab .container-fluid .navbar-collapse { + margin-left: -8px; + margin-right: -10px; + } + .navbar-gitlab .container-fluid .navbar-collapse .nav > li:not(.d-none) { + flex: 1; + } + .header-user-dropdown-toggle { + text-align: center; + } + .header-user-avatar { + float: none; + } +} +.header-user.show .dropdown-menu { + margin-top: 4px; + color: #303030; + left: auto; + max-height: 445px; +} +.header-user.show .dropdown-menu svg { + vertical-align: text-top; +} +.header-user-avatar { + float: left; + margin-right: 5px; + border-radius: 50%; + border: 1px solid #f5f5f5; +} +.media { + display: flex; + align-items: flex-start; +} +.card { + margin-bottom: 16px; +} +.content-wrapper { + width: 100%; +} +.content-wrapper .container-fluid { + padding: 0 16px; +} + +@media (min-width: 768px) { + .page-with-contextual-sidebar { + padding-left: 50px; + } +} + +@media (min-width: 1200px) { + .page-with-contextual-sidebar { + padding-left: 220px; + } +} +.context-header { + position: relative; + margin-right: 2px; + width: 220px; +} +.context-header > a, +.context-header > button { + font-weight: 600; + display: flex; + width: 100%; + align-items: center; + padding: 10px 16px 10px 10px; + color: #303030; + background-color: transparent; + border: 0; + text-align: left; +} +.context-header .avatar-container { + flex: 0 0 40px; + background-color: #fff; +} +.context-header .sidebar-context-title { + overflow: hidden; + text-overflow: ellipsis; +} +.context-header .sidebar-context-title.text-secondary { + font-weight: normal; + font-size: 0.8em; +} +.nav-sidebar { + position: fixed; + z-index: 600; + width: 220px; + top: 40px; + bottom: 0; + left: 0; + background-color: #fafafa; + box-shadow: inset -1px 0 0 #dbdbdb; + transform: translate3d(0, 0, 0); +} + +@media (min-width: 576px) and (max-width: 576px) { + .nav-sidebar:not(.sidebar-collapsed-desktop) { + box-shadow: inset -1px 0 0 #dbdbdb, 2px 1px 3px rgba(0, 0, 0, 0.1); + } +} +.nav-sidebar.sidebar-collapsed-desktop { + width: 50px; +} +.nav-sidebar.sidebar-collapsed-desktop .nav-sidebar-inner-scroll { + overflow-x: hidden; +} +.nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge), +.nav-sidebar.sidebar-collapsed-desktop .sidebar-context-title, +.nav-sidebar.sidebar-collapsed-desktop .nav-item-name { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} +.nav-sidebar.sidebar-collapsed-desktop .sidebar-top-level-items > li > a { + min-height: 45px; +} +.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item { + display: block; +} +.nav-sidebar.sidebar-collapsed-desktop .avatar-container { + margin: 0 auto; +} +.nav-sidebar.sidebar-expanded-mobile { + left: 0; +} +.nav-sidebar a { + text-decoration: none; +} +.nav-sidebar ul { + padding-left: 0; + list-style: none; +} +.nav-sidebar li { + white-space: nowrap; +} +.nav-sidebar li a { + display: flex; + align-items: center; + padding: 12px 16px; + color: #666; +} +.nav-sidebar li .nav-item-name { + flex: 1; +} +.nav-sidebar li.active > a { + font-weight: 600; +} + +@media (max-width: 767.98px) { + .nav-sidebar { + left: -220px; + } +} +.nav-sidebar .nav-icon-container { + display: flex; + margin-right: 8px; +} +.nav-sidebar .fly-out-top-item { + display: none; +} +.nav-sidebar svg { + height: 16px; + width: 16px; +} + +@media (min-width: 768px) and (max-width: 1199px) { + .nav-sidebar:not(.sidebar-expanded-mobile) { + width: 50px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll { + overflow-x: hidden; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .badge.badge-pill:not(.fly-out-badge), + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title, + .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a { + min-height: 45px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item { + display: block; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container { + margin: 0 auto; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .context-header { + height: 60px; + width: 50px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a { + padding: 10px 4px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) { + display: none; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container { + margin-right: 0; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button { + padding: 16px; + width: 49px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .collapse-text, + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-left { + display: none; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-right { + display: block; + margin: 0; + } +} +.nav-sidebar-inner-scroll { + height: 100%; + width: 100%; + overflow: auto; +} +.sidebar-sub-level-items { + display: none; + padding-bottom: 8px; +} +.sidebar-sub-level-items > li a { + padding: 8px 16px 8px 40px; +} +.sidebar-top-level-items { + margin-bottom: 60px; +} + +@media (min-width: 576px) { + .sidebar-top-level-items > li > a { + margin-right: 1px; + } +} +.sidebar-top-level-items > li .badge.badge-pill { + background-color: rgba(0, 0, 0, 0.08); + color: #666; +} +.sidebar-top-level-items > li.active { + background: rgba(0, 0, 0, 0.04); +} +.sidebar-top-level-items > li.active > a { + margin-left: 4px; + padding-left: 12px; +} +.sidebar-top-level-items > li.active .badge.badge-pill { + font-weight: 600; +} +.sidebar-top-level-items > li.active .sidebar-sub-level-items:not(.is-fly-out-only) { + display: block; +} +.toggle-sidebar-button, +.close-nav-button { + width: 219px; + position: fixed; + height: 48px; + bottom: 0; + padding: 0 16px; + background-color: #fafafa; + border: 0; + border-top: 1px solid #dbdbdb; + color: #666; + display: flex; + align-items: center; +} +.toggle-sidebar-button svg, +.close-nav-button svg { + margin-right: 8px; +} +.toggle-sidebar-button .icon-chevron-double-lg-right, +.close-nav-button .icon-chevron-double-lg-right { + display: none; +} +.collapse-text { + white-space: nowrap; + overflow: hidden; +} +.sidebar-collapsed-desktop .context-header { + height: 60px; + width: 50px; +} +.sidebar-collapsed-desktop .context-header a { + padding: 10px 4px; +} +.sidebar-collapsed-desktop .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) { + display: none; +} +.sidebar-collapsed-desktop .nav-icon-container { + margin-right: 0; +} +.sidebar-collapsed-desktop .toggle-sidebar-button { + padding: 16px; + width: 49px; +} +.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text, +.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left { + display: none; +} +.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-right { + display: block; + margin: 0; +} +.fly-out-top-item > a { + display: flex; +} +.fly-out-top-item .fly-out-badge { + margin-left: 8px; +} +.fly-out-top-item-name { + flex: 1; +} +.close-nav-button { + display: none; +} + +@media (max-width: 767.98px) { + .close-nav-button { + display: flex; + } + .toggle-sidebar-button { + display: none; + } +} +table.table { + margin-bottom: 16px; +} +table.table .dropdown-menu a { + text-decoration: none; +} +table.table .success, +table.table .info { + color: #fff; +} +table.table .success a:not(.btn), +table.table .info a:not(.btn) { + text-decoration: underline; + color: #fff; +} +pre { + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; + display: block; + padding: 8px 12px; + margin: 0 0 8px; + font-size: 13px; + word-break: break-all; + word-wrap: break-word; + color: #303030; + background-color: #fafafa; + border: 1px solid #dbdbdb; + border-radius: 2px; +} +.monospace { + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; +} +input::-moz-placeholder, +textarea::-moz-placeholder { + color: #868686; + opacity: 1; +} +input::-ms-input-placeholder, +textarea::-ms-input-placeholder { + color: #868686; +} +input:-ms-input-placeholder, +textarea:-ms-input-placeholder { + color: #868686; +} +svg { + fill: currentColor; +} + +svg.s12 { + width: 12px; + height: 12px; +} + +svg.s16 { + width: 16px; + height: 16px; +} + +svg.s18 { + width: 18px; + height: 18px; +} + +svg.s12 { + vertical-align: -1px; +} + +svg.s16 { + vertical-align: -3px; +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} +table.code { + width: 100%; + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; + border: 0; + border-collapse: separate; + margin: 0; + padding: 0; + table-layout: fixed; + border-radius: 0 0 4px 4px; +} +.frame .badge.badge-pill { + position: absolute; + background-color: #428fdc; + color: #fff; + border: #fff 1px solid; + min-height: 16px; + padding: 5px 8px; + border-radius: 12px; +} +.frame .badge.badge-pill { + transform: translate(-50%, -50%); +} +.color-label { + padding: 0 0.5rem; + line-height: 16px; + border-radius: 100px; + color: #fff; +} +.label-link { + display: inline-flex; + vertical-align: text-bottom; +} +.milestones { + padding: 8px; + margin-top: 8px; + border-radius: 4px; + background-color: #dbdbdb; +} +.search { + margin: 0 8px; +} +.search form { + margin: 0; + padding: 4px; + width: 200px; + line-height: 24px; + height: 32px; + border: 0; + border-radius: 4px; +} + +@media (min-width: 1200px) { + .search form { + width: 320px; + } +} +.search .search-input { + border: 0; + font-size: 14px; + padding: 0 20px 0 0; + margin-left: 5px; + line-height: 25px; + width: 98%; + color: #fff; + background: none; +} +.search .search-input-container { + display: flex; + position: relative; +} +.search .search-input-wrap { + width: 100%; +} +.search .search-input-wrap .search-icon, +.search .search-input-wrap .clear-icon { + position: absolute; + right: 5px; + top: 4px; +} +.search .search-input-wrap .search-icon { + -moz-user-select: none; + user-select: none; +} +.search .search-input-wrap .clear-icon { + display: none; +} +.search .search-input-wrap .dropdown { + position: static; +} +.search .search-input-wrap .dropdown-menu { + left: -5px; + max-height: 400px; + overflow: auto; +} + +@media (min-width: 1200px) { + .search .search-input-wrap .dropdown-menu { + width: 320px; + } +} +.search .search-input-wrap .dropdown-content { + max-height: 382px; +} +.settings { + border-top: 1px solid #dbdbdb; +} +.settings:first-of-type { + margin-top: 10px; + border: 0; +} +.settings + div .settings:first-of-type { + margin-top: 0; + border-top: 1px solid #dbdbdb; +} +.avatar, .avatar-container { + float: left; + margin-right: 16px; + border-radius: 50%; + border: 1px solid #f5f5f5; +} +.s16.avatar, .s16.avatar-container { + width: 16px; + height: 16px; + margin-right: 8px; +} +.s18.avatar, .s18.avatar-container { + width: 18px; + height: 18px; + margin-right: 8px; +} +.s40.avatar, .s40.avatar-container { + width: 40px; + height: 40px; + margin-right: 8px; +} +.avatar { + transition-property: none; + width: 40px; + height: 40px; + padding: 0; + background: #fdfdfd; + overflow: hidden; + border-color: rgba(0, 0, 0, 0.1); +} +.avatar.center { + font-size: 14px; + line-height: 1.8em; + text-align: center; +} +.avatar.avatar-tile { + border-radius: 0; + border: 0; +} +.avatar-container { + overflow: hidden; + display: flex; +} +.avatar-container a { + width: 100%; + height: 100%; + display: flex; + text-decoration: none; +} +.avatar-container .avatar { + border-radius: 0; + border: 0; + height: auto; + width: 100%; + margin: 0; + align-self: center; +} +.avatar-container.s40 { + min-width: 40px; + min-height: 40px; +} +.rect-avatar { + border-radius: 2px; +} +.rect-avatar.s16 { + border-radius: 2px; +} +.rect-avatar.s18 { + border-radius: 2px; +} +.rect-avatar.s40 { + border-radius: 4px; +} +.tab-width-8 { + -moz-tab-size: 8; + tab-size: 8; +} +.gl-sr-only { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} +.gl-ml-3 { + margin-left: 0.5rem; +} +.content-wrapper > .alert-wrapper, +#content-body, .modal-dialog { + display: block; +} @import 'cloaking'; @include cloak-startup-scss(none); diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss new file mode 100644 index 00000000000..b3e53e35f6e --- /dev/null +++ b/app/assets/stylesheets/startup/startup-signin.scss @@ -0,0 +1,2409 @@ +@charset "UTF-8"; +*, +*::before, +*::after { + box-sizing: border-box; +} +html { + font-family: sans-serif; + line-height: 1.15; +} + header, nav, section { + display: block; +} +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #303030; + text-align: left; + background-color: #fff; +} +hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} +h1, h2, h3 { + margin-top: 0; + margin-bottom: 0.25rem; +} +p { + margin-top: 0; + margin-bottom: 1rem; +} +address { + margin-bottom: 1rem; + font-style: normal; + line-height: inherit; +} + +ul { + margin-top: 0; + margin-bottom: 1rem; +} + +ul ul { + margin-bottom: 0; +} + +strong { + font-weight: bolder; +} +sub { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} +sub { + bottom: -.25em; +} +a { + color: #007bff; + text-decoration: none; + background-color: transparent; +} +a:not([href]) { + color: inherit; + text-decoration: none; +} +pre, +code { + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; + font-size: 1em; +} +pre { + margin-top: 0; + margin-bottom: 1rem; + overflow: auto; +} +img { + vertical-align: middle; + border-style: none; +} +svg { + overflow: hidden; + vertical-align: middle; +} +table { + border-collapse: collapse; +} +th { + text-align: inherit; +} +label { + display: inline-block; + margin-bottom: 0.5rem; +} +button { + border-radius: 0; +} +input, +button, +textarea { + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} +button, +input { + overflow: visible; +} +button { + text-transform: none; +} +button:not(:disabled), +[type="button"]:not(:disabled), +[type="reset"]:not(:disabled), +[type="submit"]:not(:disabled) { + cursor: pointer; +} +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + padding: 0; + border-style: none; +} + +input[type="checkbox"] { + box-sizing: border-box; + padding: 0; +} +textarea { + overflow: auto; + resize: vertical; +} +fieldset { + min-width: 0; + padding: 0; + margin: 0; + border: 0; +} +[type="search"] { + outline-offset: -2px; +} +summary { + display: list-item; + cursor: pointer; +} +template { + display: none; +} +[hidden] { + display: none !important; +} +h1, h2, h3, +.h1, .h2, .h3 { + margin-bottom: 0.25rem; + font-weight: 600; + line-height: 1.2; + color: #303030; +} +h1, .h1 { + font-size: 2.1875rem; +} +h2, .h2 { + font-size: 1.75rem; +} +h3, .h3 { + font-size: 1.53125rem; +} +hr { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + border: 0; + border-top: 1px solid rgba(0, 0, 0, 0.1); +} +.list-unstyled { + padding-left: 0; + list-style: none; +} +code { + font-size: 90%; + color: #1f1f1f; + word-wrap: break-word; +} +a > code { + color: inherit; +} +pre { + display: block; + font-size: 90%; + color: #303030; +} +pre code { + font-size: inherit; + color: inherit; + word-break: normal; +} +.container { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} + +@media (min-width: 576px) { + .container { + max-width: 540px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 720px; + } +} + +@media (min-width: 992px) { + .container { + max-width: 960px; + } +} + +@media (min-width: 1200px) { + .container { + max-width: 1140px; + } +} +.container-fluid { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} + +@media (min-width: 576px) { + .container { + max-width: 540px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 720px; + } +} + +@media (min-width: 992px) { + .container { + max-width: 960px; + } +} + +@media (min-width: 1200px) { + .container { + max-width: 1140px; + } +} +.row { + display: flex; + flex-wrap: wrap; + margin-right: -15px; + margin-left: -15px; +} + .col-sm-5, .col-sm-7, .col-sm-12 { + position: relative; + width: 100%; + padding-right: 15px; + padding-left: 15px; +} +.order-1 { + order: 1; +} +.order-12 { + order: 12; +} + +@media (min-width: 576px) { + .col-sm-5 { + flex: 0 0 41.66667%; + max-width: 41.66667%; + } + .col-sm-7 { + flex: 0 0 58.33333%; + max-width: 58.33333%; + } + .col-sm-12 { + flex: 0 0 100%; + max-width: 100%; + } + .order-sm-1 { + order: 1; + } + .order-sm-12 { + order: 12; + } +} +.table { + width: 100%; + margin-bottom: 0.5rem; + color: #303030; +} +.table th, +.table td { + padding: 0.75rem; + vertical-align: top; + border-top: 1px solid #dbdbdb; +} +.form-control, .search form { + display: block; + width: 100%; + height: 34px; + padding: 0.375rem 0.75rem; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.5; + color: #303030; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #dbdbdb; + border-radius: 0.25rem; +} + +@media (prefers-reduced-motion: reduce) { +} +.form-control:-moz-focusring, .search form:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #303030; +} +.form-control::placeholder, .search form::placeholder { + color: #5e5e5e; + opacity: 1; +} +.form-control:disabled, .search form:disabled { + background-color: #fafafa; + opacity: 1; +} +textarea.form-control { + height: auto; +} +.form-group { + margin-bottom: 1rem; +} +.form-inline { + display: flex; + flex-flow: row wrap; + align-items: center; +} + +@media (min-width: 576px) { + .form-inline label { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 0; + } + .form-inline .form-group { + display: flex; + flex: 0 0 auto; + flex-flow: row wrap; + align-items: center; + margin-bottom: 0; + } + .form-inline .form-control, .form-inline .search form, .search .form-inline form { + display: inline-block; + width: auto; + vertical-align: middle; + } +} +.btn { + display: inline-block; + font-weight: 400; + color: #303030; + text-align: center; + vertical-align: middle; + cursor: pointer; + user-select: none; + background-color: transparent; + border: 1px solid transparent; + padding: 0.375rem 0.75rem; + font-size: 1rem; + line-height: 20px; + border-radius: 0.25rem; +} + +@media (prefers-reduced-motion: reduce) { +} +.btn.disabled, .btn:disabled { + opacity: 0.65; +} +a.btn.disabled, +fieldset:disabled a.btn { + pointer-events: none; +} +.btn-success { + color: #fff; + background-color: #108548; + border-color: #108548; +} +.btn-success.disabled, .btn-success:disabled { + color: #fff; + background-color: #108548; + border-color: #108548; +} +.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, +.show > .btn-success.dropdown-menu-toggle { + color: #fff; + background-color: #0b572f; + border-color: #094c29; +} + .login-page input[type='submit'] { + display: block; + width: 100%; +} + .login-page input[type='submit'] + input[type='submit'] { + margin-top: 0.5rem; +} + .login-page input[type="submit"][type='submit'], +.login-page input[type="reset"][type='submit'], +.login-page input[type="button"][type='submit'] { + width: 100%; +} +.collapse:not(.show) { + display: none; +} + +.dropdown { + position: relative; +} + .dropdown-menu-toggle { + white-space: nowrap; +} + .dropdown-menu-toggle::after { + display: inline-block; + margin-left: 0.255em; + vertical-align: 0.255em; + content: ""; + border-top: 0.3em solid; + border-right: 0.3em solid transparent; + border-bottom: 0; + border-left: 0.3em solid transparent; +} + .dropdown-menu-toggle:empty::after { + margin-left: 0; +} +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + min-width: 10rem; + padding: 0.5rem 0; + margin: 0.125rem 0 0; + font-size: 1rem; + color: #303030; + text-align: left; + list-style: none; + background-color: #fff; + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 0.25rem; +} +.dropdown-menu-right { + right: 0; + left: auto; +} + .divider { + height: 0; + margin: 4px 0; + overflow: hidden; + border-top: 1px solid #dbdbdb; +} +.dropdown-menu.show { + display: block; +} +.nav { + display: flex; + flex-wrap: wrap; + padding-left: 0; + margin-bottom: 0; + list-style: none; +} +.nav-link { + display: block; + padding: 0.5rem 1rem; +} +.nav-link.disabled { + color: #5e5e5e; + pointer-events: none; + cursor: default; +} +.nav-tabs { + border-bottom: 1px solid #999; +} +.nav-tabs .nav-item { + margin-bottom: -1px; +} +.nav-tabs .nav-link { + border: 1px solid transparent; + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; +} +.nav-tabs .nav-link.disabled { + color: #5e5e5e; + background-color: transparent; + border-color: transparent; +} +.nav-tabs .nav-link.active, +.nav-tabs .nav-item.show .nav-link { + color: #525252; + background-color: #fff; + border-color: #999 #999 #fff; +} +.nav-tabs .dropdown-menu { + margin-top: -1px; + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.tab-content > .tab-pane { + display: none; +} +.tab-content > .active { + display: block; +} +.navbar { + position: relative; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + padding: 0.25rem 0.5rem; +} +.navbar .container, +.navbar .container-fluid { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; +} +.navbar-nav { + display: flex; + flex-direction: column; + padding-left: 0; + margin-bottom: 0; + list-style: none; +} +.navbar-nav .nav-link { + padding-right: 0; + padding-left: 0; +} +.navbar-nav .dropdown-menu { + position: static; + float: none; +} +.navbar-collapse { + flex-basis: 100%; + flex-grow: 1; + align-items: center; +} +.navbar-toggler { + padding: 0.25rem 0.75rem; + font-size: 1.25rem; + line-height: 1; + background-color: transparent; + border: 1px solid transparent; + border-radius: 0.25rem; +} + +@media (max-width: 575.98px) { + .navbar-expand-sm > .container, + .navbar-expand-sm > .container-fluid { + padding-right: 0; + padding-left: 0; + } +} + +@media (min-width: 576px) { + .navbar-expand-sm { + flex-flow: row nowrap; + justify-content: flex-start; + } + .navbar-expand-sm .navbar-nav { + flex-direction: row; + } + .navbar-expand-sm .navbar-nav .dropdown-menu { + position: absolute; + } + .navbar-expand-sm .navbar-nav .nav-link { + padding-right: 0.5rem; + padding-left: 0.5rem; + } + .navbar-expand-sm > .container, + .navbar-expand-sm > .container-fluid { + flex-wrap: nowrap; + } + .navbar-expand-sm .navbar-collapse { + display: flex !important; + flex-basis: auto; + } + .navbar-expand-sm .navbar-toggler { + display: none; + } +} +.card { + position: relative; + display: flex; + flex-direction: column; + min-width: 0; + word-wrap: break-word; + background-color: #fff; + background-clip: border-box; + border: 1px solid #dbdbdb; + border-radius: 0.25rem; +} +.card > hr { + margin-right: 0; + margin-left: 0; +} +.badge { + display: inline-block; + padding: 0.25em 0.4em; + font-size: 75%; + font-weight: 600; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: 0.25rem; +} + +@media (prefers-reduced-motion: reduce) { +} +.badge:empty { + display: none; +} +.btn .badge { + position: relative; + top: -1px; +} +.badge-pill { + padding-right: 0.6em; + padding-left: 0.6em; + border-radius: 10rem; +} +.media { + display: flex; + align-items: flex-start; +} +.close { + float: right; + font-size: 1.5rem; + font-weight: 600; + line-height: 1; + color: #000; + text-shadow: 0 1px 0 #fff; + opacity: .5; +} +button.close { + padding: 0; + background-color: transparent; + border: 0; + appearance: none; +} +a.close.disabled { + pointer-events: none; +} +.modal-dialog { + position: relative; + width: auto; + margin: 0.5rem; + pointer-events: none; +} + +@media (min-width: 576px) { + .modal-dialog { + max-width: 500px; + margin: 1.75rem auto; + } +} +.bg-transparent { + background-color: transparent !important; +} +.border { + border: 1px solid #dbdbdb !important; +} +.border-top { + border-top: 1px solid #dbdbdb !important; +} +.border-right { + border-right: 1px solid #dbdbdb !important; +} +.border-bottom { + border-bottom: 1px solid #dbdbdb !important; +} +.border-left { + border-left: 1px solid #dbdbdb !important; +} +.rounded { + border-radius: 0.25rem !important; +} +.clearfix::after { + display: block; + clear: both; + content: ""; +} +.d-none { + display: none !important; +} +.d-inline-block { + display: inline-block !important; +} +.d-block { + display: block !important; +} +.d-flex { + display: flex !important; +} + +@media (min-width: 576px) { + .d-sm-none { + display: none !important; + } +} + +@media (min-width: 768px) { + .d-md-block { + display: block !important; + } +} + +@media (min-width: 992px) { + .d-lg-none { + display: none !important; + } + .d-lg-block { + display: block !important; + } +} + +@media (min-width: 1200px) { + .d-xl-block { + display: block !important; + } +} +.flex-wrap { + flex-wrap: wrap !important; +} +.justify-content-between { + justify-content: space-between !important; +} +.align-items-center { + align-items: center !important; +} +.float-right { + float: right !important; +} +.fixed-top { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} +.mt-3 { + margin-top: 1rem !important; +} +.mb-3 { + margin-bottom: 1rem !important; +} +.m-auto { + margin: auto !important; +} + +@media (min-width: 576px) { + .mt-sm-0 { + margin-top: 0 !important; + } +} +.text-nowrap { + white-space: nowrap !important; +} +.text-left { + text-align: left !important; +} +.font-weight-normal { + font-weight: 400 !important; +} +.visible { + visibility: visible !important; +} +.form-control.focus, .search form.focus { + color: #303030; + background-color: #fff; + border-color: #80bdff; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +} +input[type="color"].form-control { + height: 34px; + padding: 0.125rem 0.25rem; +} +input[type="color"].form-control:disabled { + background-color: #666; + opacity: 0.65; +} +.gl-badge { + display: inline-flex; + align-items: center; + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + outline: none; +} +body, .form-control, .search form, +.search form { + font-size: 0.875rem; +} +button, +html [type='button'], +[type='reset'], +[type='submit'], +[role='button'] { + cursor: pointer; +} +h1, +.h1, +h2, +.h2, +h3, +.h3 { + margin-top: 20px; + margin-bottom: 10px; +} +input[type='file'] { + line-height: 1; +} + +strong { + font-weight: bold; +} +a { + color: #1068bf; +} +hr { + overflow: hidden; +} +code { + padding: 2px 4px; + color: #1f1f1f; + background-color: #f0f0f0; + border-radius: 4px; +} +.code > code { + background-color: inherit; + padding: unset; +} +table { + border-spacing: 0; +} +.hidden { + display: none !important; + visibility: hidden !important; +} +.hide { + display: none; +} + .dropdown-menu-toggle::after { + display: none; +} +.badge:not(.gl-badge), +.label { + padding: 4px 5px; + font-size: 12px; + font-style: normal; + font-weight: 400; + display: inline-block; +} +.nav-tabs { + border-bottom: 0; +} +.nav-tabs .nav-link { + border-top: 0; + border-left: 0; + border-right: 0; +} +.nav-tabs .nav-item { + margin-bottom: 0; +} +pre code { + white-space: pre-wrap; +} +input[type="color"].form-control { + height: 34px; +} +.toggle-sidebar-button .collapse-text, +.toggle-sidebar-button .icon-chevron-double-lg-left, +.toggle-sidebar-button .icon-chevron-double-lg-right { + color: #666; +} +svg { + vertical-align: baseline; +} +html { + overflow-y: scroll; +} +body { + text-decoration-skip: ink; +} +body.navless { + background-color: #fff !important; +} +.content-wrapper { + margin-top: 40px; + padding-bottom: 100px; +} +.container { + padding-top: 0; + z-index: 5; +} +.container .content { + margin: 0; +} + +@media (max-width: 575.98px) { + .container .content { + margin-top: 20px; + } +} + +@media (max-width: 575.98px) { + .container .container .title { + padding-left: 15px !important; + } +} +.navless-container { + margin-top: 40px; + padding-top: 32px; +} +.btn { + border-radius: 4px; + font-size: 0.875rem; + font-weight: 400; + padding: 6px 10px; + background-color: #fff; + border-color: #dbdbdb; + color: #303030; + color: #303030; + white-space: nowrap; +} +.btn:active, .btn.active { + box-shadow: rgba(0, 0, 0, 0.16); + background-color: #eaeaea; + border-color: #e3e3e3; + color: #303030; +} +.btn.btn-success, .btn.btn-register { + background-color: #108548; + border-color: #217645; + color: #fff; +} +.btn.btn-success:active, .btn.btn-success.active, .btn.btn-register:active, .btn.btn-register.active { + box-shadow: rgba(0, 0, 0, 0.16); + background-color: #24663b; + border-color: #0d532a; + color: #fff; +} +.btn svg { + height: 15px; + width: 15px; +} +.btn svg:not(:last-child), +.btn .fa:not(:last-child) { + margin-right: 5px; +} + .login-page input[type='submit'] { + width: 100%; + margin: 0; + margin-bottom: 15px; +} + .login-page input.btn[type='submit'] { + padding: 6px 0; +} +.badge.badge-pill:not(.gl-badge) { + font-weight: 400; + background-color: rgba(0, 0, 0, 0.07); + color: #525252; + vertical-align: baseline; +} +.hint { + font-style: italic; + color: #bfbfbf; +} +.bold { + font-weight: 600; +} +.tab-content { + overflow: visible; +} +pre.wrap { + word-break: break-word; + white-space: pre-wrap; +} +hr { + margin: 24px 0; + border-top: 1px solid #eee; +} +table a code { + position: relative; + top: -2px; + margin-right: 3px; +} +.loading { + margin: 20px auto; + height: 40px; + color: #525252; + font-size: 32px; + text-align: center; +} +.highlight { + text-shadow: none; +} +.chart { + overflow: hidden; + height: 220px; +} +.footer-links { + margin-bottom: 20px; +} +.footer-links a { + margin-right: 15px; +} +.break-word { + word-wrap: break-word; +} +.append-bottom-20 { + margin-bottom: 20px; +} +.center { + text-align: center; +} +.block { + display: block; +} +.flex { + display: flex; +} +.flex-grow { + flex-grow: 1; +} +.dropdown { + position: relative; +} +.show.dropdown .dropdown-menu { + transform: translateY(0); + display: block; + min-height: 40px; + max-height: 312px; + overflow-y: auto; +} + +@media (max-width: 575.98px) { + .show.dropdown .dropdown-menu { + width: 100%; + } +} + .show.dropdown .dropdown-menu-toggle, +.show.dropdown .dropdown-menu-toggle { + border-color: #c4c4c4; +} +.show.dropdown [data-toggle='dropdown'] { + outline: 0; +} +.search-input-container .dropdown-menu { + margin-top: 11px; +} + .dropdown-menu-toggle { + padding: 6px 8px 6px 10px; + background-color: #fff; + color: #303030; + font-size: 14px; + text-align: left; + border: 1px solid #dbdbdb; + border-radius: 0.25rem; + white-space: nowrap; +} + .no-outline.dropdown-menu-toggle { + outline: 0; +} + .dropdown-menu-toggle .fa { + color: #c4c4c4; +} +.dropdown-menu-toggle { + padding-right: 25px; + position: relative; + width: 160px; + text-overflow: ellipsis; + overflow: hidden; +} +.dropdown-menu-toggle .fa { + position: absolute; +} +.dropdown-menu { + display: none; + position: absolute; + width: auto; + top: 100%; + z-index: 300; + min-width: 240px; + max-width: 500px; + margin-top: 4px; + margin-bottom: 24px; + font-size: 14px; + font-weight: 400; + padding: 8px 0; + background-color: #fff; + border: 1px solid #dbdbdb; + border-radius: 0.25rem; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} +.dropdown-menu ul { + margin: 0; + padding: 0; +} +.dropdown-menu li { + display: block; + text-align: left; + list-style: none; + padding: 0 1px; +} +.dropdown-menu li > a, +.dropdown-menu li button { + background: transparent; + border: 0; + border-radius: 0; + box-shadow: none; + display: block; + font-weight: 400; + position: relative; + padding: 8px 12px; + color: #303030; + line-height: 16px; + white-space: normal; + overflow: hidden; + text-align: left; + width: 100%; +} +.dropdown-menu .divider { + height: 1px; + margin: 0.25rem 0; + padding: 0; + background-color: #dbdbdb; +} +.dropdown-menu .badge.badge-pill + span:not(.badge.badge-pill) { + margin-right: 40px; +} +.dropdown-select { + width: 300px; +} + +@media (max-width: 767.98px) { + .dropdown-select { + width: 100%; + } +} +.dropdown-content { + max-height: 252px; + overflow-y: auto; +} +.dropdown-loading { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: none; + z-index: 9; + background-color: rgba(255, 255, 255, 0.6); + font-size: 28px; +} +.dropdown-loading .fa { + position: absolute; + top: 50%; + left: 50%; + margin-top: -14px; + margin-left: -14px; +} + +@media (max-width: 575.98px) { + .navbar-gitlab li.dropdown { + position: static; + } + header.navbar-gitlab .dropdown .dropdown-menu { + width: 100%; + min-width: 100%; + } +} + +@media (max-width: 767.98px) { + .dropdown-menu-toggle { + width: 100%; + } +} +.flash-container { + margin: 0; + margin-bottom: 16px; + font-size: 14px; + position: relative; + z-index: 1; +} +.flash-container.sticky { + position: sticky; + position: -webkit-sticky; + top: 48px; + z-index: 251; +} +.flash-container.flash-container-page { + margin-bottom: 0; +} +.flash-container:empty { + margin: 0; +} +textarea { + resize: vertical; +} +input { + border-radius: 0.25rem; + color: #303030; + background-color: #fff; +} +label { + font-weight: 600; +} +label.label-bold { + font-weight: 600; +} +.form-control, .search form { + border-radius: 4px; + padding: 6px 10px; +} +.form-control::placeholder, .search form::placeholder { + color: #868686; +} +.gl-field-error { + color: #dd2b0e; + font-size: 0.875rem; +} +.gl-show-field-errors .form-control:not(textarea), .gl-show-field-errors .search form:not(textarea), .search .gl-show-field-errors form:not(textarea) { + height: 34px; +} +.gl-show-field-errors .gl-field-hint { + color: #303030; +} + +@media (max-width: 575.98px) { + .remember-me .remember-me-checkbox { + margin-top: 0; + } +} +body.ui-indigo .navbar-gitlab { + background-color: #292961; +} +body.ui-indigo .navbar-gitlab .navbar-collapse { + color: #d1d1f0; +} +body.ui-indigo .navbar-gitlab .container-fluid .navbar-toggler { + border-left: 1px solid #6868b9; +} +body.ui-indigo .navbar-gitlab .container-fluid .navbar-toggler svg { + fill: #d1d1f0; +} +body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.active > a, +body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.active > button, body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.dropdown.show > a, +body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.dropdown.show > button, +body.ui-indigo .navbar-gitlab .navbar-nav > li.active > a, +body.ui-indigo .navbar-gitlab .navbar-nav > li.active > button, +body.ui-indigo .navbar-gitlab .navbar-nav > li.dropdown.show > a, +body.ui-indigo .navbar-gitlab .navbar-nav > li.dropdown.show > button { + color: #292961; + background-color: #fff; +} +body.ui-indigo .navbar-gitlab .navbar-sub-nav { + color: #d1d1f0; +} +body.ui-indigo .navbar-gitlab .nav > li { + color: #d1d1f0; +} +body.ui-indigo .navbar-gitlab .nav > li > a.header-user-dropdown-toggle .header-user-avatar { + border-color: #d1d1f0; +} +body.ui-indigo .navbar-gitlab .nav > li.active > a, +body.ui-indigo .navbar-gitlab .nav > li.dropdown.show > a { + color: #292961; + background-color: #fff; +} +body.ui-indigo .search form { + background-color: rgba(209, 209, 240, 0.2); +} +body.ui-indigo .search .search-input::placeholder { + color: rgba(209, 209, 240, 0.8); +} +body.ui-indigo .search .search-input-wrap .search-icon, +body.ui-indigo .search .search-input-wrap .clear-icon { + fill: rgba(209, 209, 240, 0.8); +} +body.ui-indigo .nav-sidebar li.active { + box-shadow: inset 4px 0 0 #4b4ba3; +} +body.ui-indigo .nav-sidebar li.active > a { + color: #393982; +} +body.ui-indigo .nav-sidebar li.active .nav-icon-container svg { + fill: #393982; +} +body.ui-indigo .sidebar-top-level-items > li.active .badge.badge-pill { + color: #393982; +} +body.ui-indigo .nav-links li.active a, +body.ui-indigo .nav-links li a.active { + border-bottom: 2px solid #6666c4; +} +body.ui-indigo .nav-links li.active a .badge.badge-pill, +body.ui-indigo .nav-links li a.active .badge.badge-pill { + font-weight: 600; +} +.navbar-gitlab { + padding: 0 16px; + z-index: 1000; + margin-bottom: 0; + min-height: 40px; + border: 0; + border-bottom: 1px solid #dbdbdb; + position: fixed; + top: 0; + left: 0; + right: 0; + border-radius: 0; +} +.navbar-gitlab .logo-text { + line-height: initial; +} +.navbar-gitlab .logo-text svg { + width: 55px; + height: 14px; + margin: 0; + fill: #fff; +} +.navbar-gitlab .close-icon { + display: none; +} +.navbar-gitlab .header-content { + width: 100%; + display: flex; + justify-content: space-between; + position: relative; + min-height: 40px; + padding-left: 0; +} +.navbar-gitlab .header-content .title-container { + display: flex; + align-items: stretch; + flex: 1 1 auto; + padding-top: 0; + overflow: visible; +} +.navbar-gitlab .header-content .title { + padding-right: 0; + color: currentColor; + display: flex; + position: relative; + margin: 0; + font-size: 18px; + vertical-align: top; + white-space: nowrap; +} +.navbar-gitlab .header-content .title img { + height: 28px; +} +.navbar-gitlab .header-content .title img + .logo-text { + margin-left: 8px; +} +.navbar-gitlab .header-content .title.wrap { + white-space: normal; +} +.navbar-gitlab .header-content .title a { + display: flex; + align-items: center; + padding: 2px 8px; + margin: 5px 2px 5px -8px; + border-radius: 4px; +} +.navbar-gitlab .header-content .dropdown.open > a { + border-bottom-color: #fff; +} +.navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) { + margin: 0 2px; +} +.navbar-gitlab .navbar-collapse { + flex: 0 0 auto; + border-top: 0; + padding: 0; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .navbar-collapse { + flex: 1 1 auto; + } +} +.navbar-gitlab .navbar-collapse .nav { + flex-wrap: nowrap; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .navbar-collapse .nav > li:not(.d-none) a { + margin-left: 0; + } +} +.navbar-gitlab .container-fluid { + padding: 0; +} +.navbar-gitlab .container-fluid .user-counter svg { + margin-right: 3px; +} +.navbar-gitlab .container-fluid .navbar-toggler { + position: relative; + right: -10px; + border-radius: 0; + min-width: 45px; + padding: 0; + margin: 8px -7px 8px 0; + font-size: 14px; + text-align: center; + color: currentColor; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .container-fluid .navbar-nav { + display: flex; + padding-right: 10px; + flex-direction: row; + } +} +.navbar-gitlab .container-fluid .navbar-nav li .badge.badge-pill { + box-shadow: none; + font-weight: 600; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .container-fluid .nav > li.header-user { + padding-left: 10px; + } +} +.navbar-gitlab .container-fluid .nav > li > a { + will-change: color; + margin: 4px 0; + padding: 6px 8px; + height: 32px; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .container-fluid .nav > li > a { + padding: 0; + } +} +.navbar-gitlab .container-fluid .nav > li > a.header-user-dropdown-toggle { + margin-left: 2px; +} +.navbar-gitlab .container-fluid .nav > li > a.header-user-dropdown-toggle .header-user-avatar { + margin-right: 0; +} +.navbar-gitlab .container-fluid .nav > li .header-new-dropdown-toggle { + margin-right: 0; +} +.navbar-sub-nav > li > a, +.navbar-sub-nav > li > button, +.navbar-nav > li > a, +.navbar-nav > li > button { + display: flex; + align-items: center; + justify-content: center; + padding: 6px 8px; + margin: 4px 2px; + font-size: 12px; + color: currentColor; + border-radius: 4px; + height: 32px; + font-weight: 600; +} +.navbar-sub-nav > li > button, +.navbar-nav > li > button { + background: transparent; + border: 0; +} +.navbar-sub-nav .dropdown-menu, +.navbar-nav .dropdown-menu { + position: absolute; +} +.navbar-sub-nav { + display: flex; + margin: 0 0 0 6px; +} +.caret-down, +.btn .caret-down { + top: 0; + height: 11px; + width: 11px; + margin-left: 4px; + fill: currentColor; +} +.header-user .dropdown-menu, +.header-new .dropdown-menu { + margin-top: 4px; +} +.btn-sign-in { + background-color: #ebebfa; + color: #292961; + font-weight: 600; + line-height: 18px; + margin: 4px 0 4px 2px; +} +.title-container .badge.badge-pill, +.navbar-nav .badge.badge-pill { + position: inherit; + font-weight: 400; + margin-left: -6px; + font-size: 11px; + color: #fff; + padding: 0 5px; + line-height: 12px; + border-radius: 7px; + box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2); +} +.title-container .badge.badge-pill.green-badge, +.navbar-nav .badge.badge-pill.green-badge { + background-color: #108548; +} +.title-container .badge.badge-pill.merge-requests-count, +.navbar-nav .badge.badge-pill.merge-requests-count { + background-color: #de7e00; +} +.title-container .badge.badge-pill.todos-count, +.navbar-nav .badge.badge-pill.todos-count { + background-color: #1f75cb; +} +.title-container .canary-badge .badge, +.navbar-nav .canary-badge .badge { + font-size: 12px; + line-height: 16px; + padding: 0 0.5rem; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .container-fluid { + font-size: 18px; + } + .navbar-gitlab .container-fluid .navbar-nav { + table-layout: fixed; + width: 100%; + margin: 0; + text-align: right; + } + .navbar-gitlab .container-fluid .navbar-collapse { + margin-left: -8px; + margin-right: -10px; + } + .navbar-gitlab .container-fluid .navbar-collapse .nav > li:not(.d-none) { + flex: 1; + } + .header-user-dropdown-toggle { + text-align: center; + } + .header-user-avatar { + float: none; + } +} +.header-user.show .dropdown-menu { + margin-top: 4px; + color: #303030; + left: auto; + max-height: 445px; +} +.header-user.show .dropdown-menu svg { + vertical-align: text-top; +} +.header-user-avatar { + float: left; + margin-right: 5px; + border-radius: 50%; + border: 1px solid #f5f5f5; +} +.navbar-empty { + justify-content: center; + height: 40px; + background: #fff; + border-bottom: 1px solid #f0f0f0; +} + +@media (max-width: 575.98px) { + .nav-links > li > a .badge.badge-pill { + display: none; + } +} + +@media (max-width: 575.98px) { + .nav-links > li > a { + margin-right: 3px; + } +} +.media { + display: flex; + align-items: flex-start; +} +.card { + margin-bottom: 16px; +} +.nav-links:not(.quick-links) { + display: flex; + padding: 0; + margin: 0; + list-style: none; + height: auto; + border-bottom: 1px solid #dbdbdb; +} +.content-wrapper { + width: 100%; +} +.content-wrapper .container-fluid { + padding: 0 16px; +} + +@media (min-width: 768px) { + .page-with-contextual-sidebar { + padding-left: 50px; + } +} + +@media (min-width: 1200px) { + .page-with-contextual-sidebar { + padding-left: 220px; + } +} +.context-header { + position: relative; + margin-right: 2px; + width: 220px; +} +.context-header > a, +.context-header > button { + font-weight: 600; + display: flex; + width: 100%; + align-items: center; + padding: 10px 16px 10px 10px; + color: #303030; + background-color: transparent; + border: 0; + text-align: left; +} +.context-header .avatar-container { + flex: 0 0 40px; + background-color: #fff; +} +.context-header .sidebar-context-title { + overflow: hidden; + text-overflow: ellipsis; +} +.context-header .sidebar-context-title.text-secondary { + font-weight: normal; + font-size: 0.8em; +} +.nav-sidebar { + position: fixed; + z-index: 600; + width: 220px; + top: 40px; + bottom: 0; + left: 0; + background-color: #fafafa; + box-shadow: inset -1px 0 0 #dbdbdb; + transform: translate3d(0, 0, 0); +} + +@media (min-width: 576px) and (max-width: 576px) { + .nav-sidebar:not(.sidebar-collapsed-desktop) { + box-shadow: inset -1px 0 0 #dbdbdb, 2px 1px 3px rgba(0, 0, 0, 0.1); + } +} +.nav-sidebar.sidebar-collapsed-desktop { + width: 50px; +} +.nav-sidebar.sidebar-collapsed-desktop .nav-sidebar-inner-scroll { + overflow-x: hidden; +} +.nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge), +.nav-sidebar.sidebar-collapsed-desktop .sidebar-context-title, +.nav-sidebar.sidebar-collapsed-desktop .nav-item-name { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} +.nav-sidebar.sidebar-collapsed-desktop .sidebar-top-level-items > li > a { + min-height: 45px; +} +.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item { + display: block; +} +.nav-sidebar.sidebar-collapsed-desktop .avatar-container { + margin: 0 auto; +} +.nav-sidebar.sidebar-expanded-mobile { + left: 0; +} +.nav-sidebar a { + text-decoration: none; +} +.nav-sidebar ul { + padding-left: 0; + list-style: none; +} +.nav-sidebar li { + white-space: nowrap; +} +.nav-sidebar li a { + display: flex; + align-items: center; + padding: 12px 16px; + color: #666; +} +.nav-sidebar li .nav-item-name { + flex: 1; +} +.nav-sidebar li.active > a { + font-weight: 600; +} + +@media (max-width: 767.98px) { + .nav-sidebar { + left: -220px; + } +} +.nav-sidebar .nav-icon-container { + display: flex; + margin-right: 8px; +} +.nav-sidebar .fly-out-top-item { + display: none; +} +.nav-sidebar svg { + height: 16px; + width: 16px; +} + +@media (min-width: 768px) and (max-width: 1199px) { + .nav-sidebar:not(.sidebar-expanded-mobile) { + width: 50px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll { + overflow-x: hidden; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .badge.badge-pill:not(.fly-out-badge), + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title, + .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a { + min-height: 45px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item { + display: block; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container { + margin: 0 auto; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .context-header { + height: 60px; + width: 50px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a { + padding: 10px 4px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) { + display: none; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container { + margin-right: 0; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button { + padding: 16px; + width: 49px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .collapse-text, + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-left { + display: none; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-right { + display: block; + margin: 0; + } +} +.nav-sidebar-inner-scroll { + height: 100%; + width: 100%; + overflow: auto; +} +.sidebar-sub-level-items { + display: none; + padding-bottom: 8px; +} +.sidebar-sub-level-items > li a { + padding: 8px 16px 8px 40px; +} +.sidebar-top-level-items { + margin-bottom: 60px; +} + +@media (min-width: 576px) { + .sidebar-top-level-items > li > a { + margin-right: 1px; + } +} +.sidebar-top-level-items > li .badge.badge-pill { + background-color: rgba(0, 0, 0, 0.08); + color: #666; +} +.sidebar-top-level-items > li.active { + background: rgba(0, 0, 0, 0.04); +} +.sidebar-top-level-items > li.active > a { + margin-left: 4px; + padding-left: 12px; +} +.sidebar-top-level-items > li.active .badge.badge-pill { + font-weight: 600; +} +.sidebar-top-level-items > li.active .sidebar-sub-level-items:not(.is-fly-out-only) { + display: block; +} +.toggle-sidebar-button, +.close-nav-button { + width: 219px; + position: fixed; + height: 48px; + bottom: 0; + padding: 0 16px; + background-color: #fafafa; + border: 0; + border-top: 1px solid #dbdbdb; + color: #666; + display: flex; + align-items: center; +} +.toggle-sidebar-button svg, +.close-nav-button svg { + margin-right: 8px; +} +.toggle-sidebar-button .icon-chevron-double-lg-right, +.close-nav-button .icon-chevron-double-lg-right { + display: none; +} +.collapse-text { + white-space: nowrap; + overflow: hidden; +} +.sidebar-collapsed-desktop .context-header { + height: 60px; + width: 50px; +} +.sidebar-collapsed-desktop .context-header a { + padding: 10px 4px; +} +.sidebar-collapsed-desktop .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) { + display: none; +} +.sidebar-collapsed-desktop .nav-icon-container { + margin-right: 0; +} +.sidebar-collapsed-desktop .toggle-sidebar-button { + padding: 16px; + width: 49px; +} +.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text, +.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left { + display: none; +} +.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-right { + display: block; + margin: 0; +} +.fly-out-top-item > a { + display: flex; +} +.fly-out-top-item .fly-out-badge { + margin-left: 8px; +} +.fly-out-top-item-name { + flex: 1; +} +.close-nav-button { + display: none; +} + +@media (max-width: 767.98px) { + .close-nav-button { + display: flex; + } + .toggle-sidebar-button { + display: none; + } +} +table.table { + margin-bottom: 16px; +} +table.table .dropdown-menu a { + text-decoration: none; +} +table.table .success, +table.table .info { + color: #fff; +} +table.table .success a:not(.btn), +table.table .info a:not(.btn) { + text-decoration: underline; + color: #fff; +} +pre { + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; + display: block; + padding: 8px 12px; + margin: 0 0 8px; + font-size: 13px; + word-break: break-all; + word-wrap: break-word; + color: #303030; + background-color: #fafafa; + border: 1px solid #dbdbdb; + border-radius: 2px; +} +.monospace { + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; +} +input::-moz-placeholder, +textarea::-moz-placeholder { + color: #868686; + opacity: 1; +} +input::-ms-input-placeholder, +textarea::-ms-input-placeholder { + color: #868686; +} +input:-ms-input-placeholder, +textarea:-ms-input-placeholder { + color: #868686; +} +svg { + fill: currentColor; +} + +svg.s12 { + width: 12px; + height: 12px; +} + +svg.s16 { + width: 16px; + height: 16px; +} + +svg.s18 { + width: 18px; + height: 18px; +} + +svg.s12 { + vertical-align: -1px; +} + +svg.s16 { + vertical-align: -3px; +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} +table.code { + width: 100%; + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; + border: 0; + border-collapse: separate; + margin: 0; + padding: 0; + table-layout: fixed; + border-radius: 0 0 4px 4px; +} +.frame .badge.badge-pill { + position: absolute; + background-color: #428fdc; + color: #fff; + border: #fff 1px solid; + min-height: 16px; + padding: 5px 8px; + border-radius: 12px; +} +.frame .badge.badge-pill { + transform: translate(-50%, -50%); +} +.color-label { + padding: 0 0.5rem; + line-height: 16px; + border-radius: 100px; + color: #fff; +} +.label-link { + display: inline-flex; + vertical-align: text-bottom; +} +.label-link .label { + vertical-align: inherit; + font-size: 12px; +} +.login-page .container { + max-width: 960px; +} +.login-page .navbar-gitlab .container { + max-width: none; +} +.login-page .flash-container { + margin-bottom: 16px; +} +.login-page .brand-holder { + font-size: 18px; + line-height: 1.5; +} +.login-page .brand-holder p { + font-size: 16px; + color: #888; +} +.login-page .brand-holder h3 { + font-size: 22px; +} +.login-page .brand-holder img { + max-width: 100%; + margin-bottom: 30px; +} +.login-page .brand-holder a { + font-weight: 600; +} +.login-page p { + font-size: 13px; +} +.login-page .login-box, +.login-page .omniauth-container { + box-shadow: 0 0 0 1px #dbdbdb; + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; + padding: 15px; +} +.login-page .login-box .nav .active a, +.login-page .omniauth-container .nav .active a { + background: transparent; +} +.login-page .login-box .login-body, +.login-page .omniauth-container .login-body { + font-size: 13px; +} +.login-page .login-box .login-body input + p, +.login-page .login-box .login-body input ~ p.field-validation, +.login-page .omniauth-container .login-body input + p, +.login-page .omniauth-container .login-body input ~ p.field-validation { + margin-top: 5px; +} +.login-page .login-box .login-body .username .validation-success, +.login-page .omniauth-container .login-body .username .validation-success { + color: #217645; +} +.login-page .login-box .login-body .username .validation-error, +.login-page .omniauth-container .login-body .username .validation-error { + color: #dd2b0e; +} +.login-page .omniauth-container { + border-radius: 0.25rem; + font-size: 13px; +} +.login-page .omniauth-container p { + margin: 0; +} +.login-page .omniauth-container form { + width: 48%; + padding: 0; + border: 0; + background: none; + margin-bottom: 16px; +} + +@media (max-width: 991.98px) { + .login-page .omniauth-container form { + width: 100%; + } +} +.login-page .omniauth-container .omniauth-btn { + width: 100%; + padding: 8px; +} +.login-page .omniauth-container .omniauth-btn img { + width: 1.125rem; + height: 1.125rem; + margin-right: 16px; +} +.login-page .new-session-tabs { + display: flex; + box-shadow: 0 0 0 1px #dbdbdb; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.login-page .new-session-tabs li { + flex: 1; + text-align: center; + border-left: 1px solid #dbdbdb; +} +.login-page .new-session-tabs li:first-of-type { + border-left: 0; + border-top-left-radius: 4px; +} +.login-page .new-session-tabs li:last-of-type { + border-top-right-radius: 4px; +} +.login-page .new-session-tabs li:not(.active) { + background-color: #fafafa; +} +.login-page .new-session-tabs li a { + width: 100%; + font-size: 18px; +} +.login-page .new-session-tabs li.active > a { + cursor: default; +} +.login-page .submit-container { + margin-top: 16px; +} +.login-page input[type='submit'] { + margin-bottom: 0; +} +.login-page .devise-errors h2 { + margin-top: 0; + font-size: 14px; + color: #ae1800; +} +.devise-layout-html { + margin: 0; + padding: 0; + height: 100%; +} +.devise-layout-html body { + height: calc(100% - 51px); + margin: 0; + padding: 0; +} +.devise-layout-html body.navless { + height: calc(100% - 11px); +} +.devise-layout-html body .page-wrap { + min-height: 100%; + position: relative; +} +.devise-layout-html body .footer-container, +.devise-layout-html body hr.footer-fixed { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 40px; + background: #fff; +} +.devise-layout-html body .login-page-broadcast { + margin-top: 40px; +} +.devise-layout-html body .navless-container { + padding: 65px 15px; +} + +@media (max-width: 575.98px) { + .devise-layout-html body .navless-container { + padding: 0 15px 65px; + } +} +.milestones { + padding: 8px; + margin-top: 8px; + border-radius: 4px; + background-color: #dbdbdb; +} +.search { + margin: 0 8px; +} +.search form { + margin: 0; + padding: 4px; + width: 200px; + line-height: 24px; + height: 32px; + border: 0; + border-radius: 4px; +} + +@media (min-width: 1200px) { + .search form { + width: 320px; + } +} +.search .search-input { + border: 0; + font-size: 14px; + padding: 0 20px 0 0; + margin-left: 5px; + line-height: 25px; + width: 98%; + color: #fff; + background: none; +} +.search .search-input-container { + display: flex; + position: relative; +} +.search .search-input-wrap { + width: 100%; +} +.search .search-input-wrap .search-icon, +.search .search-input-wrap .clear-icon { + position: absolute; + right: 5px; + top: 4px; +} +.search .search-input-wrap .search-icon { + -moz-user-select: none; + user-select: none; +} +.search .search-input-wrap .clear-icon { + display: none; +} +.search .search-input-wrap .dropdown { + position: static; +} +.search .search-input-wrap .dropdown-menu { + left: -5px; + max-height: 400px; + overflow: auto; +} + +@media (min-width: 1200px) { + .search .search-input-wrap .dropdown-menu { + width: 320px; + } +} +.search .search-input-wrap .dropdown-content { + max-height: 382px; +} +.settings { + border-top: 1px solid #dbdbdb; +} +.settings:first-of-type { + margin-top: 10px; + border: 0; +} +.settings + div .settings:first-of-type { + margin-top: 0; + border-top: 1px solid #dbdbdb; +} +.avatar, .avatar-container { + float: left; + margin-right: 16px; + border-radius: 50%; + border: 1px solid #f5f5f5; +} +.s16.avatar, .s16.avatar-container { + width: 16px; + height: 16px; + margin-right: 8px; +} +.s18.avatar, .s18.avatar-container { + width: 18px; + height: 18px; + margin-right: 8px; +} +.s40.avatar, .s40.avatar-container { + width: 40px; + height: 40px; + margin-right: 8px; +} +.avatar { + transition-property: none; + width: 40px; + height: 40px; + padding: 0; + background: #fdfdfd; + overflow: hidden; + border-color: rgba(0, 0, 0, 0.1); +} +.avatar.center { + font-size: 14px; + line-height: 1.8em; + text-align: center; +} +.avatar.avatar-tile { + border-radius: 0; + border: 0; +} +.avatar-container { + overflow: hidden; + display: flex; +} +.avatar-container a { + width: 100%; + height: 100%; + display: flex; + text-decoration: none; +} +.avatar-container .avatar { + border-radius: 0; + border: 0; + height: auto; + width: 100%; + margin: 0; + align-self: center; +} +.avatar-container.s40 { + min-width: 40px; + min-height: 40px; +} +.rect-avatar { + border-radius: 2px; +} +.rect-avatar.s16 { + border-radius: 2px; +} +.rect-avatar.s18 { + border-radius: 2px; +} +.rect-avatar.s40 { + border-radius: 4px; +} +.tab-width-8 { + -moz-tab-size: 8; + tab-size: 8; +} +.gl-sr-only { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} +.gl-mt-5 { + margin-top: 1rem; +} +.gl-ml-3 { + margin-left: 0.5rem; +} +.content-wrapper > .alert-wrapper, +#content-body, .modal-dialog { + display: block; +} +@import 'cloaking'; +@include cloak-startup-scss(none); diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index e2b4d6b8e7a..bfbcb8c13c6 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -11,15 +11,6 @@ $gray-800: #f2f2f2; $gray-900: #fafafa; $gray-950: #fff; -$gl-gray-100: #333; -$gl-gray-200: #555; -$gl-gray-350: #666; -$gl-gray-400: #777; -$gl-gray-500: #999; -$gl-gray-600: #aaa; -$gl-gray-700: #ccc; -$gl-gray-800: #ddd; - $green-50: #072b15; $green-100: #0a4020; $green-200: #0e5a2d; @@ -94,6 +85,86 @@ $white-light: #2b2b2b; $white-normal: #333; $white-dark: #444; +$border-color: #4f4f4f; + +body.gl-dark { + --gray-10: #{$gray-10}; + --gray-50: #{$gray-50}; + --gray-100: #{$gray-100}; + --gray-200: #{$gray-200}; + --gray-300: #{$gray-300}; + --gray-400: #{$gray-400}; + --gray-500: #{$gray-500}; + --gray-600: #{$gray-600}; + --gray-700: #{$gray-700}; + --gray-800: #{$gray-800}; + --gray-900: #{$gray-900}; + --gray-950: #{$gray-950}; + + --green-50: #{$green-50}; + --green-100: #{$green-100}; + --green-200: #{$green-200}; + --green-300: #{$green-300}; + --green-400: #{$green-400}; + --green-500: #{$green-500}; + --green-600: #{$green-600}; + --green-700: #{$green-700}; + --green-800: #{$green-800}; + --green-900: #{$green-900}; + --green-950: #{$green-950}; + + --blue-50: #{$blue-50}; + --blue-100: #{$blue-100}; + --blue-200: #{$blue-200}; + --blue-300: #{$blue-300}; + --blue-400: #{$blue-400}; + --blue-500: #{$blue-500}; + --blue-600: #{$blue-600}; + --blue-700: #{$blue-700}; + --blue-800: #{$blue-800}; + --blue-900: #{$blue-900}; + --blue-950: #{$blue-950}; + + --orange-50: #{$orange-50}; + --orange-100: #{$orange-100}; + --orange-200: #{$orange-200}; + --orange-300: #{$orange-300}; + --orange-400: #{$orange-400}; + --orange-500: #{$orange-500}; + --orange-600: #{$orange-600}; + --orange-700: #{$orange-700}; + --orange-800: #{$orange-800}; + --orange-900: #{$orange-900}; + --orange-950: #{$orange-950}; + + --red-50: #{$red-50}; + --red-100: #{$red-100}; + --red-200: #{$red-200}; + --red-300: #{$red-300}; + --red-400: #{$red-400}; + --red-500: #{$red-500}; + --red-600: #{$red-600}; + --red-700: #{$red-700}; + --red-800: #{$red-800}; + --red-900: #{$red-900}; + --red-950: #{$red-950}; + + --indigo-50: #{$indigo-50}; + --indigo-100: #{$indigo-100}; + --indigo-200: #{$indigo-200}; + --indigo-300: #{$indigo-300}; + --indigo-400: #{$indigo-400}; + --indigo-500: #{$indigo-500}; + --indigo-600: #{$indigo-600}; + --indigo-700: #{$indigo-700}; + --indigo-800: #{$indigo-800}; + --indigo-900: #{$indigo-900}; + --indigo-950: #{$indigo-950}; + + --gl-text-color: #{$gray-900}; + --border-color: #{$border-color}; +} + $border-white-light: $gray-900; $border-white-normal: $gray-900; diff --git a/app/assets/stylesheets/themes/theme_blue.scss b/app/assets/stylesheets/themes/theme_blue.scss new file mode 100644 index 00000000000..9f9802f77f4 --- /dev/null +++ b/app/assets/stylesheets/themes/theme_blue.scss @@ -0,0 +1,14 @@ +@import './theme_helper'; + +body { + &.ui-blue { + @include gitlab-theme( + $theme-blue-200, + $theme-blue-500, + $theme-blue-700, + $theme-blue-800, + $theme-blue-900, + $white + ); + } +} diff --git a/app/assets/stylesheets/themes/theme_dark.scss b/app/assets/stylesheets/themes/theme_dark.scss new file mode 100644 index 00000000000..e6db6cd2a5e --- /dev/null +++ b/app/assets/stylesheets/themes/theme_dark.scss @@ -0,0 +1,14 @@ +@import './theme_helper'; + +body { + &.ui-dark { + @include gitlab-theme( + $gray-200, + $gray-300, + $gray-500, + $gray-700, + $gray-900, + $white + ); + } +} diff --git a/app/assets/stylesheets/themes/theme_green.scss b/app/assets/stylesheets/themes/theme_green.scss new file mode 100644 index 00000000000..6dcad6e1301 --- /dev/null +++ b/app/assets/stylesheets/themes/theme_green.scss @@ -0,0 +1,14 @@ +@import './theme_helper'; + +body { + &.ui-green { + @include gitlab-theme( + $theme-green-200, + $theme-green-500, + $theme-green-700, + $theme-green-800, + $theme-green-900, + $white + ); + } +} diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss new file mode 100644 index 00000000000..85115cfd5d9 --- /dev/null +++ b/app/assets/stylesheets/themes/theme_helper.scss @@ -0,0 +1,204 @@ +@import '../page_bundles/mixins_and_variables_and_functions'; +/** + * Styles the GitLab application with a specific color theme + */ +@mixin gitlab-theme( + $search-and-nav-links, + $active-tab-border, + $border-and-box-shadow, + $sidebar-text, + $nav-svg-color, + $color-alternate +) { + // Header + + .navbar-gitlab { + background-color: $nav-svg-color; + + .navbar-collapse { + color: $search-and-nav-links; + } + + .container-fluid { + .navbar-toggler { + border-left: 1px solid lighten($border-and-box-shadow, 10%); + + svg { + fill: $search-and-nav-links; + } + } + } + + .navbar-sub-nav, + .navbar-nav { + > li { + > a, + > button { + &:hover, + &:focus { + background-color: rgba($search-and-nav-links, 0.2); + } + } + + &.active, + &.dropdown.show { + > a, + > button { + color: $nav-svg-color; + background-color: $color-alternate; + } + } + + &.line-separator { + border-left: 1px solid rgba($search-and-nav-links, 0.2); + } + } + } + + .navbar-sub-nav { + color: $search-and-nav-links; + } + + .nav { + > li { + color: $search-and-nav-links; + + > a { + &.header-user-dropdown-toggle { + .header-user-avatar { + border-color: $search-and-nav-links; + } + + .header-user-notification-dot { + border: 2px solid $nav-svg-color; + } + } + + &:hover, + &:focus { + @include media-breakpoint-up(sm) { + background-color: rgba($search-and-nav-links, 0.2); + } + + svg { + fill: currentColor; + } + + &.header-user-dropdown-toggle .header-user-notification-dot { + border-color: $nav-svg-color + 33; + } + } + } + + &.active > a, + &.dropdown.show > a { + color: $nav-svg-color; + background-color: $color-alternate; + + &:hover { + svg { + fill: $nav-svg-color; + } + } + + &.header-user-dropdown-toggle .header-user-notification-dot { + border-color: $white; + } + } + + .impersonated-user, + .impersonated-user:hover { + svg { + fill: $nav-svg-color; + } + } + } + } + } + + .navbar .title { + > a { + &:hover, + &:focus { + background-color: rgba($search-and-nav-links, 0.2); + } + } + } + + .search { + form { + background-color: rgba($search-and-nav-links, 0.2); + + &:hover { + background-color: rgba($search-and-nav-links, 0.3); + } + } + + .search-input::placeholder { + color: rgba($search-and-nav-links, 0.8); + } + + .search-input-wrap { + .search-icon, + .clear-icon { + fill: rgba($search-and-nav-links, 0.8); + } + } + + &.search-active { + form { + background-color: $white; + } + + .search-input-wrap { + .search-icon { + fill: rgba($search-and-nav-links, 0.8); + } + } + } + } + + // Sidebar + .nav-sidebar li.active { + box-shadow: inset 4px 0 0 $border-and-box-shadow; + + > a { + color: $sidebar-text; + } + + .nav-icon-container svg { + fill: $sidebar-text; + } + } + + .sidebar-top-level-items > li.active .badge.badge-pill { + color: $sidebar-text; + } + + .nav-links li { + &.active a, + &.md-header-tab.active button, + a.active { + border-bottom: 2px solid $active-tab-border; + + .badge.badge-pill { + font-weight: $gl-font-weight-bold; + } + } + } + + .branch-header-title { + color: $border-and-box-shadow; + } + + .ide-sidebar-link { + &.active { + color: $border-and-box-shadow; + box-shadow: inset 3px 0 $border-and-box-shadow; + + &.is-right { + box-shadow: inset -3px 0 $border-and-box-shadow; + } + } + } +} diff --git a/app/assets/stylesheets/themes/theme_indigo.scss b/app/assets/stylesheets/themes/theme_indigo.scss new file mode 100644 index 00000000000..bbf14afcca2 --- /dev/null +++ b/app/assets/stylesheets/themes/theme_indigo.scss @@ -0,0 +1,14 @@ +@import './theme_helper'; + +body { + &.ui-indigo { + @include gitlab-theme( + $indigo-200, + $indigo-500, + $indigo-700, + $indigo-800, + $indigo-900, + $white + ); + } +} diff --git a/app/assets/stylesheets/themes/theme_light.scss b/app/assets/stylesheets/themes/theme_light.scss new file mode 100644 index 00000000000..58003db4236 --- /dev/null +++ b/app/assets/stylesheets/themes/theme_light.scss @@ -0,0 +1,129 @@ +@import './theme_helper'; + +body { + &.ui-light { + @include gitlab-theme( + $gray-500, + $gray-700, + $gray-500, + $gray-500, + $gray-50, + $gray-500 + ); + + .navbar-gitlab { + background-color: $gray-50; + box-shadow: 0 1px 0 0 $border-color; + + .logo-text svg { + fill: $gray-900; + } + + .navbar-sub-nav, + .navbar-nav { + > li { + > a:hover, + > a:focus, + > button:hover { + color: $gray-900; + } + + &.active > a, + &.active > a:hover, + &.active > button { + color: $white; + } + } + } + + .container-fluid { + .navbar-toggler, + .navbar-toggler:hover { + color: $gray-500; + border-left: 1px solid $gray-100; + } + } + } + + .search { + form { + background-color: $white; + box-shadow: inset 0 0 0 1px $border-color; + + &:hover { + background-color: $white; + box-shadow: inset 0 0 0 1px $blue-200; + } + } + + .search-input-wrap { + .search-icon { + fill: $gray-100; + } + + .search-input { + color: $gl-text-color; + } + } + } + + .nav-sidebar li.active { + > a { + color: $gray-900; + } + + svg { + fill: $gray-900; + } + } + + .sidebar-top-level-items > li.active .badge.badge-pill { + color: $gray-900; + } + } + + &.gl-dark { + .logo-text svg { + fill: $gl-text-color; + } + + .navbar-gitlab { + background-color: $gray-50; + + .navbar-sub-nav, + .navbar-nav { + li { + > a:hover, + > a:focus, + > button:hover, + > button:focus { + color: $gl-text-color; + background-color: $gray-200; + } + } + + li.active, + li.dropdown.show { + > a, + > button { + color: $gl-text-color; + background-color: $gray-200; + } + } + } + + .search { + form { + background-color: $gray-100; + box-shadow: inset 0 0 0 1px $border-color; + + &:active, + &:hover { + background-color: $gray-100; + box-shadow: inset 0 0 0 1px $blue-200; + } + } + } + } + } +} diff --git a/app/assets/stylesheets/themes/theme_light_blue.scss b/app/assets/stylesheets/themes/theme_light_blue.scss new file mode 100644 index 00000000000..07d1c60a4c6 --- /dev/null +++ b/app/assets/stylesheets/themes/theme_light_blue.scss @@ -0,0 +1,14 @@ +@import './theme_helper'; + +body { + &.ui-light-blue { + @include gitlab-theme( + $theme-light-blue-200, + $theme-light-blue-500, + $theme-light-blue-500, + $theme-light-blue-700, + $theme-light-blue-700, + $white + ); + } +} diff --git a/app/assets/stylesheets/themes/theme_light_green.scss b/app/assets/stylesheets/themes/theme_light_green.scss new file mode 100644 index 00000000000..e122501b93c --- /dev/null +++ b/app/assets/stylesheets/themes/theme_light_green.scss @@ -0,0 +1,14 @@ +@import './theme_helper'; + +body { + &.ui-light-green { + @include gitlab-theme( + $theme-green-200, + $theme-green-500, + $theme-green-500, + $theme-light-green-700, + $theme-light-green-700, + $white + ); + } +} diff --git a/app/assets/stylesheets/themes/theme_light_indigo.scss b/app/assets/stylesheets/themes/theme_light_indigo.scss new file mode 100644 index 00000000000..5b607238ed9 --- /dev/null +++ b/app/assets/stylesheets/themes/theme_light_indigo.scss @@ -0,0 +1,14 @@ +@import './theme_helper'; + +body { + &.ui-light-indigo { + @include gitlab-theme( + $indigo-200, + $indigo-500, + $indigo-500, + $indigo-700, + $indigo-700, + $white + ); + } +} diff --git a/app/assets/stylesheets/themes/theme_light_red.scss b/app/assets/stylesheets/themes/theme_light_red.scss new file mode 100644 index 00000000000..fd3980183f3 --- /dev/null +++ b/app/assets/stylesheets/themes/theme_light_red.scss @@ -0,0 +1,14 @@ +@import './theme_helper'; + +body { + &.ui-light-red { + @include gitlab-theme( + $theme-light-red-200, + $theme-light-red-500, + $theme-light-red-500, + $theme-light-red-700, + $theme-light-red-700, + $white + ); + } +} diff --git a/app/assets/stylesheets/themes/theme_red.scss b/app/assets/stylesheets/themes/theme_red.scss new file mode 100644 index 00000000000..fa5ecc09f50 --- /dev/null +++ b/app/assets/stylesheets/themes/theme_red.scss @@ -0,0 +1,14 @@ +@import './theme_helper'; + +body { + &.ui-red { + @include gitlab-theme( + $theme-red-200, + $theme-red-500, + $theme-red-700, + $theme-red-800, + $theme-red-900, + $white + ); + } +} diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index 99a13cc4e44..9c666331c4f 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -112,10 +112,47 @@ top: 66vh; } -// Remove when https://gitlab.com/gitlab-org/gitlab-ui/-/issues/871 -// gets fixed on GitLab UI -.gl-sm-w-auto\! { +.gl-shadow-x0-y0-b3-s1-blue-500 { + box-shadow: inset 0 0 3px $gl-border-size-1 $blue-500; +} + + +.gl-sm-align-items-flex-end { + @media (min-width: $breakpoint-sm) { + align-items: flex-end; + } +} + +.gl-sm-text-body { + @media (min-width: $breakpoint-sm) { + color: $body-color; + } +} + +.gl-sm-font-weight-bold { @media (min-width: $breakpoint-sm) { + font-weight: $gl-font-weight-bold; + } +} + +.gl-min-h-6 { + min-height: $gl-spacing-scale-6; +} + +.gl-md-justify-content-end { + @media (min-width: $breakpoint-md) { width: auto !important; } } + +.gl-display-md-flex { + @media (min-width: $breakpoint-md) { + display: flex; + } +} + +.gl-display-md-none { + @media (min-width: $breakpoint-md) { + display: none; + } +} diff --git a/app/assets/stylesheets/vendors/atwho.scss b/app/assets/stylesheets/vendors/atwho.scss index f855c5c0d3d..f31dbbeafe8 100644 --- a/app/assets/stylesheets/vendors/atwho.scss +++ b/app/assets/stylesheets/vendors/atwho.scss @@ -24,8 +24,8 @@ .has-warning { .description { - color: $orange-700; - background-color: $orange-100; + color: $gray-900; + background-color: $orange-50; } } @@ -58,7 +58,7 @@ } &.has-warning { - color: $orange-700; + color: $orange-500; } } diff --git a/app/assets/stylesheets/vendors/tribute.scss b/app/assets/stylesheets/vendors/tribute.scss index 309cdf7245c..65f3d1b6199 100644 --- a/app/assets/stylesheets/vendors/tribute.scss +++ b/app/assets/stylesheets/vendors/tribute.scss @@ -1,6 +1,6 @@ .tribute-container { background: $white; - border: 1px solid $gl-gray-100; + border: 1px solid $gray-100; border-radius: $border-radius-base; box-shadow: 0 0 5px $issue-boards-card-shadow; color: $black; @@ -22,7 +22,7 @@ white-space: nowrap; small { - color: $gl-gray-500; + color: $gray-500; } &.highlight { |