diff options
Diffstat (limited to 'app/assets/stylesheets')
64 files changed, 581 insertions, 1490 deletions
diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss index fa5ab590232..8f3b5b3b7cc 100644 --- a/app/assets/stylesheets/_page_specific_files.scss +++ b/app/assets/stylesheets/_page_specific_files.scss @@ -1,5 +1,4 @@ @import './pages/branches'; -@import './pages/ci_projects'; @import './pages/clusters'; @import './pages/commits'; @import './pages/deploy_keys'; @@ -10,7 +9,6 @@ @import './pages/groups'; @import './pages/help'; @import './pages/issuable'; -@import './pages/issues/issue_count_badge'; @import './pages/issues'; @import './pages/labels'; @import './pages/login'; diff --git a/app/assets/stylesheets/application_dark.scss b/app/assets/stylesheets/application_dark.scss index dae0cd72a8f..f1d7df8c5ed 100644 --- a/app/assets/stylesheets/application_dark.scss +++ b/app/assets/stylesheets/application_dark.scss @@ -2,74 +2,4 @@ @import './application'; -@import './themes/theme_helper'; - -body.gl-dark { - @include gitlab-theme( - $gray-900, - $gray-400, - $gray-500, - $gray-800, - $gray-900, - $white - ); - - .logo-text svg { - fill: var(--gl-text-color); - } - - .navbar-gitlab { - background-color: var(--gray-50); - box-shadow: 0 1px 0 0 var(--gray-100); - - .navbar-sub-nav, - .navbar-nav { - li { - > a:hover, - > a:focus, - > button:hover, - > button:focus { - color: var(--gl-text-color); - background-color: var(--gray-200); - } - } - - li.active, - li.dropdown.show { - > a, - > button { - color: var(--gl-text-color); - background-color: var(--gray-200); - } - } - } - - .header-search { - background-color: var(--gray-100) !important; - box-shadow: inset 0 0 0 1px var(--border-color) !important; - - &:active, - &:hover { - background-color: var(--gray-100) !important; - box-shadow: inset 0 0 0 1px var(--blue-200) !important; - } - } - - .search { - form { - background-color: var(--gray-100); - box-shadow: inset 0 0 0 1px var(--border-color); - - &:active, - &:hover { - background-color: var(--gray-100); - box-shadow: inset 0 0 0 1px var(--blue-200); - } - } - } - } - - .md :not(pre.code) > code { - background-color: $gray-200; - } -} +@import './themes/dark_mode_overrides'; diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss index c4f292dd05d..27ddff181c5 100644 --- a/app/assets/stylesheets/bootstrap_migration.scss +++ b/app/assets/stylesheets/bootstrap_migration.scss @@ -112,7 +112,7 @@ code { border-radius: $border-radius-default; .code > &, - .build-trace & { + .build-log & { background-color: inherit; padding: unset; } diff --git a/app/assets/stylesheets/components/batch_comments/review_bar.scss b/app/assets/stylesheets/components/batch_comments/review_bar.scss index bcd06974813..6f5c5c5a080 100644 --- a/app/assets/stylesheets/components/batch_comments/review_bar.scss +++ b/app/assets/stylesheets/components/batch_comments/review_bar.scss @@ -38,59 +38,6 @@ 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; diff --git a/app/assets/stylesheets/components/content_editor.scss b/app/assets/stylesheets/components/content_editor.scss index a013d971efb..7f498b79d33 100644 --- a/app/assets/stylesheets/components/content_editor.scss +++ b/app/assets/stylesheets/components/content_editor.scss @@ -1,9 +1,13 @@ .ProseMirror { + max-height: 55vh; + overflow-y: auto; + td, th, li, dd, - dt { + dt, + summary { :first-child { margin-bottom: 0 !important; } @@ -37,6 +41,7 @@ } } + .dl-content { width: 100%; @@ -50,6 +55,38 @@ } } } + + .details-toggle-icon { + cursor: pointer; + z-index: 1; + + &::before { + content: '▶'; + display: inline-block; + width: $gl-spacing-scale-4; + } + + &.is-open::before { + content: '▼'; + } + } + + .details-content { + width: calc(100% - #{$gl-spacing-scale-4}); + + > li { + list-style-type: none; + margin-left: $gl-spacing-scale-2; + } + + > :not(:first-child) { + display: none; + } + + &.is-open > :not(:first-child) { + display: inherit; + } + } } .table-creator-grid-item { @@ -70,3 +107,17 @@ @include gl-white-space-nowrap; } + + +.content-editor-color-chip::after { + content: ' '; + display: inline-block; + align-items: center; + width: 11px; + height: 11px; + border-radius: 3px; + margin-left: 4px; + margin-top: -2px; + border: 1px solid $black-transparent; + background-color: var(--gl-color-chip-color); +} diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss index 579a86a94a4..a3cbdb9ae86 100644 --- a/app/assets/stylesheets/components/design_management/design.scss +++ b/app/assets/stylesheets/components/design_management/design.scss @@ -70,11 +70,6 @@ $t-gray-a-16-design-pin: rgba($black, 0.16); } } -.design-presentation-wrapper { - top: 0; - left: 0; -} - .design-scaler-wrapper { bottom: 0; left: 50%; diff --git a/app/assets/stylesheets/components/design_management/design_version_dropdown.scss b/app/assets/stylesheets/components/design_management/design_version_dropdown.scss deleted file mode 100644 index f79d672e238..00000000000 --- a/app/assets/stylesheets/components/design_management/design_version_dropdown.scss +++ /dev/null @@ -1,3 +0,0 @@ -.design-version-dropdown > button { - background: inherit; -} diff --git a/app/assets/stylesheets/components/project_list_item.scss b/app/assets/stylesheets/components/project_list_item.scss deleted file mode 100644 index 8e7c2c4398c..00000000000 --- a/app/assets/stylesheets/components/project_list_item.scss +++ /dev/null @@ -1,24 +0,0 @@ -.project-list-item { - &:not(:disabled):not(.disabled) { - &:focus, - &:active, - &:focus:active { - outline: none; - box-shadow: none; - } - } -} - -// When housed inside a modal, the edge of each item -// should extend to the edge of the modal. -.modal-body { - .project-list-item { - border-radius: 0; - margin-left: -$gl-padding; - margin-right: -$gl-padding; - - .project-namespace-name-container { - overflow: hidden; - } - } -} diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index 804cc205279..06a8694eb3d 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -9,7 +9,6 @@ @import 'framework/animations'; @import 'framework/vue_transitions'; -@import 'framework/banner'; @import 'framework/blocks'; @import 'framework/buttons'; @import 'framework/badges'; diff --git a/app/assets/stylesheets/framework/banner.scss b/app/assets/stylesheets/framework/banner.scss deleted file mode 100644 index 71bbab2065d..00000000000 --- a/app/assets/stylesheets/framework/banner.scss +++ /dev/null @@ -1,40 +0,0 @@ -.banner-callout { - display: flex; - position: relative; - align-items: start; - - .banner-close { - position: absolute; - top: 10px; - right: 10px; - opacity: 1; - - .dismiss-icon { - color: $gl-text-color; - font-size: $gl-font-size; - } - } - - .banner-graphic { - margin: 0 $gl-padding $gl-padding 0; - } - - &.banner-non-empty-state { - border-bottom: 1px solid $border-color; - } - - @include media-breakpoint-down(xs) { - justify-content: center; - flex-direction: column; - align-items: center; - - .banner-title, - .banner-buttons { - text-align: center; - } - - .banner-graphic { - margin-left: $gl-padding; - } - } -} diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index a0682eabf01..549289450a4 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -1,9 +1,3 @@ -.centered-light-block { - text-align: center; - color: $gl-text-color; - margin: 20px; -} - .nothing-here-block { text-align: center; padding: 16px; @@ -83,22 +77,6 @@ > p:last-child { margin-bottom: 0; } - - .block-controls { - display: flex; - justify-content: flex-end; - flex: 1; - - .control { - float: left; - margin-left: 10px; - } - } - - &.build-content { - background-color: $white; - border-top: 0; - } } .sub-header-block { @@ -169,31 +147,6 @@ } } - &.groups-cover-block { - background: $white; - border-bottom: 1px solid $border-color; - text-align: left; - padding: 24px 0; - - .group-info { - .cover-title { - margin-top: 9px; - } - - p { - margin-bottom: 0; - } - } - - @include media-breakpoint-down(xs) { - text-align: center; - - .avatar { - float: none; - } - } - } - &.user-cover-block { padding: 24px 0 0; @@ -214,19 +167,6 @@ margin-right: auto; } } - - .group-info { - h1 { - display: inline; - font-weight: $gl-font-weight-normal; - font-size: 24px; - color: $gl-text-color; - } - } -} - -.block-connector { - margin-top: -1px; } .content-block { @@ -322,7 +262,7 @@ display: inline-block; } - .btn { + .btn:not(.split-content-button):not(.dropdown-toggle-split) { margin: $gl-padding-8 $gl-padding-4; @include media-breakpoint-down(xs) { @@ -332,10 +272,6 @@ } } -.flex-right { - margin-left: auto; -} - .code-block { white-space: pre; overflow-x: auto; diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index ceccec8c5cb..e458dfd5316 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -247,13 +247,6 @@ } } -.btn-terminal { - svg { - height: 14px; - width: $default-icon-size; - } -} - .btn-lg { padding: 12px 20px; } @@ -281,12 +274,6 @@ } } -.btn-align-content { - display: flex; - justify-content: center; - align-items: center; -} - .btn-group { &.btn-grouped { @include btn-with-margin; @@ -347,16 +334,6 @@ } } -.btn-static { - background-color: $gray-light !important; - border: 1px solid $border-gray-normal; - cursor: default; - - &:active { - box-shadow: inset 0 0 0 $white; - } -} - .btn-inverted { &-secondary { @include btn-outline($white, $blue-500, $blue-500, $blue-100, $blue-700, $blue-500, $blue-200, $blue-600, $blue-800); diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index a7ce19ffc69..354d2737894 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -175,10 +175,6 @@ p.time { text-shadow: none; } -.thin-area { - height: 150px; -} - // Fix issue with notes & lists creating a bunch of bottom borders. li.note { img { max-width: 100%; } @@ -298,10 +294,6 @@ img.emoji { margin: 0; } -.space-right { - margin-right: 10px; -} - .alert { margin-bottom: $gl-padding; } @@ -363,14 +355,6 @@ img.emoji { } } -.outline-0 { - outline: 0; - - &:focus { - outline: 0; - } -} - /** COMMON CLASSES **/ /** 🚨 Do not use these classes — they are deprecated and being removed. 🚨 diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index f5002a342b6..fa1892903a3 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -140,7 +140,7 @@ @include gl-border-none; .avatar.s32 { - @extend .rect-avatar.s32; + border-radius: $border-radius-default; box-shadow: $avatar-box-shadow; } } diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index 568182ad796..23dc16b7e7f 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -1007,6 +1007,27 @@ table.code { } } +// Notes tweaks for the Changes tab ONLY +.diff-tr { + .timeline-discussion-body { + clear: left; + + .note-body { + margin-top: 0 !important; + } + } + + .timeline-entry img.avatar { + margin-top: -2px; + margin-right: $gl-padding-8; + } + + // tiny adjustment to vertical align with the note header text + .discussion-collapsible .timeline-icon { + padding-top: 2px; + } +} + .files:not([data-can-create-note]) .frame { cursor: auto; } @@ -1125,7 +1146,7 @@ table.code { } .discussion-collapsible { - margin: 0 $gl-padding $gl-padding 71px; + margin: 0 $gl-padding $gl-padding; .notes { border-radius: $border-radius-default; diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index b05fbfaae6c..7f960e3da51 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -76,6 +76,7 @@ } .dropdown-toggle, +.dropdown-menu-toggle, .confidential-merge-request-fork-group .dropdown-toggle { padding: 6px 8px 6px 10px; background-color: $white; @@ -131,7 +132,6 @@ // This is double classed to solve a specificity issue with the gitlab ui buttons .dropdown-menu-toggle.dropdown-menu-toggle { - @extend .dropdown-toggle; justify-content: flex-start; overflow: hidden; padding-right: 25px; @@ -425,21 +425,10 @@ } } -.dropdown-menu-drop-up { - top: auto; - bottom: 100%; -} - .dropdown-menu-large { width: 340px; } -.dropdown-menu-no-wrap { - a { - white-space: normal; - } -} - .dropdown-menu-full-width { width: 100%; } @@ -662,13 +651,6 @@ padding-right: 10px; } -.dropdown-due-date-footer { - padding-top: 0; - margin-left: 10px; - margin-right: 10px; - border-top: 0; -} - .dropdown-footer-list { font-size: 14px; @@ -742,24 +724,6 @@ } } -.dropdown-menu-due-date { - .dropdown-content { - max-height: 230px; - } - - .pika-single { - position: relative !important; - top: 0 !important; - border: 0; - box-shadow: none; - } - - .pika-lendar { - margin-top: -5px; - margin-bottom: 0; - } -} - .dropdown-menu-inner-title { display: block; color: $gl-text-color; diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index c366bf80093..2a46e50f0da 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -196,14 +196,6 @@ label { } } -@include media-breakpoint-down(xs) { - .remember-me { - .remember-me-checkbox { - margin-top: 0; - } - } -} - .input-icon-wrapper, .select-wrapper { position: relative; diff --git a/app/assets/stylesheets/framework/job_log.scss b/app/assets/stylesheets/framework/job_log.scss index d48a5116677..f77f64f1d76 100644 --- a/app/assets/stylesheets/framework/job_log.scss +++ b/app/assets/stylesheets/framework/job_log.scss @@ -5,10 +5,10 @@ font-size: 13px; word-break: break-all; word-wrap: break-word; - color: color-yiq($builds-trace-bg); + color: color-yiq($builds-log-bg); border-radius: $border-radius-small; min-height: 42px; - background-color: $builds-trace-bg; + background-color: $builds-log-bg; } .log-line { @@ -42,10 +42,6 @@ } } -.log-duration-badge { - background: $gray-300; -} - .loader-animation { @include build-loader-animation; } diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index 7315bce1ed9..ef294635641 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -153,6 +153,10 @@ vertical-align: middle; margin-bottom: 3px; } + + .dropdown-chevron { + margin-bottom: 0; + } } @include media-breakpoint-down(xs) { diff --git a/app/assets/stylesheets/framework/media_object.scss b/app/assets/stylesheets/framework/media_object.scss index 89c561479cc..b573052c14a 100644 --- a/app/assets/stylesheets/framework/media_object.scss +++ b/app/assets/stylesheets/framework/media_object.scss @@ -6,7 +6,3 @@ .media-body { flex: 1; } - -.media-body-wrap { - flex-grow: 1; -} diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index fcf86680bb3..33f7aa4dba1 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -239,7 +239,7 @@ /* * Mixin that handles the container for the job logs (CI/CD and kubernetes pod logs) */ -@mixin build-trace($background: $black) { +@mixin build-log($background: $black) { background: $background; color: $gray-darkest; white-space: pre; @@ -253,13 +253,13 @@ display: block; } - &.build-trace-rounded { + &.build-log-rounded { border-radius: $gl-border-radius-base; } } // Used in EE for Web Terminal -@mixin build-trace-bar($height) { +@mixin build-log-bar($height) { height: $height; min-height: $height; background: var(--gray-50, $gray-50); @@ -268,8 +268,8 @@ padding: $grid-size; } -@mixin build-trace-top-bar($height) { - @include build-trace-bar($height); +@mixin build-log-top-bar($height) { + @include build-log-bar($height); position: -webkit-sticky; position: sticky; diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss index 48a18e0d145..c9b17f5d5c4 100644 --- a/app/assets/stylesheets/framework/modal.scss +++ b/app/assets/stylesheets/framework/modal.scss @@ -1,13 +1,3 @@ -.modal-xl { - max-width: 98%; -} - -.modal-1040 { - @include media-breakpoint-up(xl) { - max-width: 1040px; - } -} - .modal-header { background-color: $modal-body-bg; @@ -111,30 +101,3 @@ body.modal-open { } } } - -.recaptcha-modal .recaptcha-form { - display: inline-block; - - .recaptcha { - margin: 0; - } -} - -.issues-import-modal, -.issuable-export-modal { - .modal-body { - padding: 0; - - .modal-subheader { - justify-content: flex-start; - align-items: center; - border-bottom: 1px solid $modal-border-color; - padding: 14px; - } - - .modal-text { - padding: $gl-padding-24 $gl-padding; - min-height: $modal-body-height; - } - } -} diff --git a/app/assets/stylesheets/framework/panels.scss b/app/assets/stylesheets/framework/panels.scss index d9c93fed1c4..e5b2b853363 100644 --- a/app/assets/stylesheets/framework/panels.scss +++ b/app/assets/stylesheets/framework/panels.scss @@ -39,10 +39,6 @@ } } -.card-empty-heading { - border-bottom: 0; -} - .card-body { padding: $gl-padding; diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index 06eebb95438..685f1f413e6 100644 --- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss +++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss @@ -1,6 +1,6 @@ // For tabbed navigation links, scrolling tabs, etc. For all top/main navigation, // please check nav.scss -.nav-links:not(.quick-links) { +.nav-links { display: flex; padding: 0; margin: 0; diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss index d8ce6826fc1..900cf9fa4db 100644 --- a/app/assets/stylesheets/framework/selects.scss +++ b/app/assets/stylesheets/framework/selects.scss @@ -50,18 +50,6 @@ } } -.namespace-result { - .namespace-kind { - color: $gray-300; - font-weight: $gl-font-weight-normal; - } - - .namespace-path { - margin-left: 10px; - font-weight: $gl-font-weight-bold; - } -} - .ajax-users-dropdown { min-width: 250px !important; } diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 6b3201ba2b0..6c7fc25f2d9 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -16,21 +16,6 @@ transition: padding $sidebar-transition-duration; } -.nav-header-btn { - padding: 10px $gl-sidebar-padding; - color: inherit; - transition-duration: 0.3s; - position: absolute; - top: 0; - cursor: pointer; - - &:hover, - &:focus { - color: $white; - text-decoration: none; - } -} - .right-sidebar-collapsed { padding-right: 0; diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss index 47184804353..c59e70c80df 100644 --- a/app/assets/stylesheets/framework/snippets.scss +++ b/app/assets/stylesheets/framework/snippets.scss @@ -4,11 +4,6 @@ font-weight: $gl-font-weight-bold; } - .snippet-filename { - color: $gl-text-color-secondary; - font-weight: normal; - } - .snippet-info { color: $gl-text-color-secondary; } diff --git a/app/assets/stylesheets/framework/sortable.scss b/app/assets/stylesheets/framework/sortable.scss index 25868061d04..953c42219a9 100644 --- a/app/assets/stylesheets/framework/sortable.scss +++ b/app/assets/stylesheets/framework/sortable.scss @@ -36,61 +36,6 @@ } } -.related-issues-list-item { - .card-body, - .issuable-info-container { - padding: $gl-padding-4 $gl-padding-4 $gl-padding-4 $gl-padding; - - .block-truncated { - padding: $gl-padding-8 0; - line-height: $gl-btn-line-height; - } - - @include media-breakpoint-down(md) { - padding-left: $gl-padding; - - .block-truncated { - flex-direction: column-reverse; - padding: $gl-padding-4 0; - - .text-secondary { - margin-top: $gl-padding-4; - } - - .issue-token-title-text { - display: block; - } - } - - .issue-item-remove-button { - align-self: baseline; - } - } - - @include media-breakpoint-only(md) { - .block-truncated .issue-token-title-text { - white-space: nowrap; - } - - .issue-item-remove-button { - align-self: center; - } - } - - @include media-breakpoint-down(sm) { - padding-left: $gl-padding-8; - - .block-truncated .issue-token-title-text { - white-space: normal; - } - } - } - - &.is-dragging { - padding: 0; - } -} - .is-dragging { // Important because plugin sets inline CSS opacity: 1 !important; diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss index 92405c00c5e..c6bc8fa0eac 100644 --- a/app/assets/stylesheets/framework/tables.scss +++ b/app/assets/stylesheets/framework/tables.scss @@ -23,6 +23,7 @@ table { @include gl-text-gray-500; } + .md &:not(.code), &.table { margin-bottom: $gl-padding; diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index aeb3bb2286f..cb36c4e5767 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -75,6 +75,15 @@ details { margin-bottom: $gl-padding; + + > *:not(summary) { + margin-left: $gl-spacing-scale-5; + } + } + + summary > * { + display: inline-block; + margin-bottom: 0; } // Single code lines should wrap @@ -160,8 +169,6 @@ } table:not(.code) { - @extend .table; - @extend .table-bordered; margin: 16px 0; color: $gl-text-color; border: 0; @@ -172,9 +179,11 @@ tbody { background-color: $white; - td { - border-color: $gray-100; - } + } + + td, + th { + border: 1px solid $border-color; } tr { @@ -478,6 +487,7 @@ font-size: larger; } + figcaption, .small { font-size: smaller; } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 099dfa28b9f..026aeeb1e8e 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -697,7 +697,7 @@ $blame-blue: #254e77; /* * Builds */ -$builds-trace-bg: #111; +$builds-log-bg: #111; $job-log-highlight-height: 18px; $job-log-line-padding: 55px; $job-line-number-width: 50px; @@ -759,7 +759,6 @@ $help-shortcut-header-color: #333; */ $issues-today-bg: #f3fff2 !default; $issues-today-border: #e1e8d5 !default; -$compare-display-color: #888; /* * Label diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss index 62abf4a7683..10df532e334 100644 --- a/app/assets/stylesheets/framework/zen.scss +++ b/app/assets/stylesheets/framework/zen.scss @@ -40,15 +40,6 @@ border: 0; } -.zen-control-full { - color: $gl-text-color-secondary; - - &:hover { - color: $blue-600; - text-decoration: none; - } -} - .zen-control-leave { display: none; color: $gl-text-color; diff --git a/app/assets/stylesheets/page_bundles/_ide_mixins.scss b/app/assets/stylesheets/page_bundles/_ide_mixins.scss index 48b8a7230b1..bbc47c5cd5d 100644 --- a/app/assets/stylesheets/page_bundles/_ide_mixins.scss +++ b/app/assets/stylesheets/page_bundles/_ide_mixins.scss @@ -4,7 +4,7 @@ height: 100%; .top-bar { - @include build-trace-bar(35px); + @include build-log-bar(35px); top: 0; font-size: 12px; diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss index 7336d555f79..25a565ce2ba 100644 --- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss +++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss @@ -44,7 +44,7 @@ background-color: var(--ide-background, $badge-bg); } - .nav-links:not(.quick-links) li:not(.md-header-toolbar) a, + .nav-links li:not(.md-header-toolbar) a, .gl-tabs-nav li a, .dropdown-menu-inner-content, .file-row .file-row-icon svg, @@ -52,7 +52,7 @@ color: var(--ide-text-color-secondary, $gl-text-color-secondary); } - .nav-links:not(.quick-links) li:not(.md-header-toolbar), + .nav-links li:not(.md-header-toolbar), .gl-tabs-nav li { &:hover a, &.active a, @@ -148,7 +148,7 @@ .md blockquote, .md table:not(.code) tbody td, .md table:not(.code) tr th, - .nav-links:not(.quick-links), + .nav-links, .gl-tabs-nav, .common-note-form .md-area.is-focused .nav-links { border-color: var(--ide-border-color-alt, $white-dark); @@ -259,6 +259,7 @@ .dropdown-menu-toggle { border-color: var(--ide-btn-default-border, $gray-darkest); + background-color: var(--ide-input-background, transparent); &:hover, &:focus { @@ -310,7 +311,7 @@ border-color: var(--ide-background, $border-color); background-color: var(--ide-dropdown-background, $white); - .nav-links:not(.quick-links) { + .nav-links { background-color: var(--ide-dropdown-hover-background, $white); border-color: var(--ide-dropdown-hover-background, $border-color); } diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss index ec41909beec..ed62e055427 100644 --- a/app/assets/stylesheets/page_bundles/build.scss +++ b/app/assets/stylesheets/page_bundles/build.scss @@ -1,8 +1,8 @@ @import 'mixins_and_variables_and_functions'; .build-page { - .build-trace { - @include build-trace(); + .build-log { + @include build-log(); } .archived-job { @@ -18,7 +18,7 @@ } .top-bar { - @include build-trace-top-bar(50px); + @include build-log-top-bar(50px); &.has-archived-block { top: $header-height + 28px; diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index 28354b83856..7d1230b0225 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -109,3 +109,12 @@ } } } + +// TODO: Move to GitLab UI +.mr-extenson-scrim { + background: linear-gradient(to bottom, rgba($gray-light, 0), rgba($gray-light, 1)); + + .gl-dark & { + background: linear-gradient(to bottom, rgba(#333, 0), rgba(#333, 1)); + } +} diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss index 206c2eb09d0..c8b1b6cf9aa 100644 --- a/app/assets/stylesheets/page_bundles/pipeline.scss +++ b/app/assets/stylesheets/page_bundles/pipeline.scss @@ -44,14 +44,14 @@ line-height: initial; } - .build-trace-row td { + .build-log-row td { border-top: 0; border-bottom-width: 1px; border-bottom-style: solid; padding-top: 0; } - .build-trace { + .build-log { width: 100%; text-align: left; margin-top: $gl-padding; @@ -93,7 +93,7 @@ } .build-state, - .build-trace-row { + .build-log-row { > td:last-child { padding-right: 0; } @@ -108,12 +108,12 @@ margin-top: 2 * $gl-padding; } - .build-trace-container { + .build-log-container { padding-top: $gl-padding; padding-bottom: $gl-padding; } - .build-trace { + .build-log { margin-bottom: 0; margin-top: 0; } @@ -221,8 +221,8 @@ } .test-reports-table { - .build-trace { - @include build-trace(); + .build-log { + @include build-log(); } } diff --git a/app/assets/stylesheets/page_bundles/signup.scss b/app/assets/stylesheets/page_bundles/signup.scss index 57e5d2411d1..4fc671dace8 100644 --- a/app/assets/stylesheets/page_bundles/signup.scss +++ b/app/assets/stylesheets/page_bundles/signup.scss @@ -26,14 +26,6 @@ } } - .omniauth-btn { - width: 48%; - - @include media-breakpoint-down(md) { - width: 100%; - } - } - .decline-page { width: 350px; } diff --git a/app/assets/stylesheets/page_bundles/wiki.scss b/app/assets/stylesheets/page_bundles/wiki.scss index 1e6567189be..c64e159c648 100644 --- a/app/assets/stylesheets/page_bundles/wiki.scss +++ b/app/assets/stylesheets/page_bundles/wiki.scss @@ -152,5 +152,5 @@ ul.wiki-pages-list.content-list { } .wiki-form .markdown-area { - max-height: none; + max-height: 55vh; } diff --git a/app/assets/stylesheets/pages/ci_projects.scss b/app/assets/stylesheets/pages/ci_projects.scss deleted file mode 100644 index fbe1f3081a0..00000000000 --- a/app/assets/stylesheets/pages/ci_projects.scss +++ /dev/null @@ -1,54 +0,0 @@ -.ci-body { - .project-title { - margin: 0; - color: $common-gray-dark; - font-size: 20px; - line-height: 1.5; - } - - .builds, - .projects-table { - .light { - border-color: $border-color; - } - - th, - td { - padding: 10px $gl-padding; - } - - td { - color: $gl-text-color; - vertical-align: middle !important; - - a { - font-weight: $gl-font-weight-normal; - text-decoration: none; - } - } - } - - .commit-info { - .attr-name { - margin-right: 5px; - } - - pre.commit-message { - background: none; - padding: 0; - border: 0; - margin: 20px 0; - border-radius: 0; - } - } - - .loading { - font-size: 20px; - } - - .ci-charts { - fieldset { - margin-bottom: 16px; - } - } -} diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss index d233adbf3d2..de27ca2e5e8 100644 --- a/app/assets/stylesheets/pages/clusters.scss +++ b/app/assets/stylesheets/pages/clusters.scss @@ -1,88 +1,4 @@ -.edit-cluster-form { - .clipboard-addon { - background-color: $white; - } -} - -.cluster-application-row { - background: $gray-lighter; - - &.cluster-application-installed { - background: none; - } - - .settings-message { - padding: $gl-vert-padding $gl-padding-8; - } -} - -@media (min-width: map-get($grid-breakpoints, md)) { - .cluster-application-list { - border: 1px solid $border-color; - border-radius: $border-radius-default; - } - - .cluster-application-row { - border-bottom: 1px solid $border-color; - padding: $gl-padding; - - &:last-child { - border-bottom: 0; - border-bottom-left-radius: calc(#{$border-radius-default} - 1px); - border-bottom-right-radius: calc(#{$border-radius-default} - 1px); - } - } -} - -.cluster-application-logo { - border: 3px solid $white; - box-shadow: 0 0 0 1px $gray-normal; - - &.avatar:hover { - border-color: $white; - } -} - -.cluster-application-warning { - font-weight: bold; - text-align: center; - padding: $gl-padding; - border-bottom: 1px solid $white-normal; - - .svg-container { - display: inline-block; - vertical-align: middle; - margin-right: $gl-padding-8; - width: 40px; - height: 40px; - } -} - -.cluster-application-description { - flex: 1; -} - -.cluster-application-disabled { - opacity: 0.5; -} - -.clusters-dropdown-menu { - max-width: 100%; -} - -.clusters-error-alert { - width: 100%; -} - .clusters-container { - .nav-bar-right { - padding: $gl-padding-top $gl-padding; - } - - .card { - margin-bottom: $gl-vert-padding; - } - .empty-state .svg-content img { width: 145px; } @@ -100,71 +16,4 @@ @include gl-flex-wrap; } } - - .top-area .nav-controls > .btn.btn-add-cluster { - margin-right: 0; - } - - .clusters-table { - background-color: $gray-light; - padding: $gl-padding-8; - } - - .badge-light { - background-color: $white-normal; - } - - .gl-responsive-table-row { - padding: $gl-padding; - border: 0; - - &.table-row-header { - // stylelint-disable-next-line - background-color: none; - border: 0; - font-weight: bold; - color: $gray-500; - } - } -} - -.cluster-warning { - @include alert-variant(theme-color-level('warning', $alert-bg-level), theme-color-level('warning', $alert-border-level), theme-color-level('warning', $alert-color-level)); -} - -.gcp-signup-offer { - border-left-color: $blue-500; - - svg { - fill: $blue-500; - vertical-align: middle; - } - - .gcp-signup-offer--content { - display: flex; - - h4 { - font-size: 16px; - line-height: 24px; - } - - .gcp-signup-offer--icon { - align-self: flex-start; - } - } -} - -.cluster-deployments-warning { - color: $orange-500; -} - -.badge.pods-badge { - color: $black; - font-weight: $gl-font-weight-bold; -} - -.cluster-status-indicator { - &.disabled { - background-color: $gray-400; - } } diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index bc4dbf695cf..7f35b8fab43 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -82,11 +82,6 @@ } } -.commits-compare-switch { - float: left; - margin-right: 9px; -} - .commit-header { padding: 5px 10px; background-color: $gray-light; diff --git a/app/assets/stylesheets/pages/environment_logs.scss b/app/assets/stylesheets/pages/environment_logs.scss index 03993e5321d..f8f40076142 100644 --- a/app/assets/stylesheets/pages/environment_logs.scss +++ b/app/assets/stylesheets/pages/environment_logs.scss @@ -40,8 +40,8 @@ height: 100%; } - .build-trace { - @include build-trace($black); + .build-log { + @include build-log($black); } .gl-infinite-scroll-legend { diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 94912b1c641..c597d2dd8da 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -220,21 +220,12 @@ } .cross-project-reference { - color: inherit; - span { - white-space: nowrap; width: 85%; - overflow: hidden; - position: relative; - display: inline-block; - text-overflow: ellipsis; } button { - float: right; padding: 1px 5px; - background-color: $gray-light; } } @@ -563,35 +554,17 @@ } } -.participants-list { - display: flex; - flex-wrap: wrap; -} - -.user-list { - display: flex; - flex-wrap: wrap; -} - .participants-author { - display: inline-block; - padding: 0 $gl-padding-8 $gl-padding-8 0; - &:nth-of-type(7n) { padding-right: 0; } - .author-link { - display: block; - } - .avatar.avatar-inline { margin: 0; } } .user-item { - display: inline-block; padding: 5px; flex-basis: 20%; @@ -673,40 +646,40 @@ .issuable-info-container { flex: 1; display: flex; + } - .issuable-main-info { - flex: 1 auto; - margin-right: 10px; - min-width: 0; + .issuable-main-info { + flex: 1 auto; + margin-right: 10px; + min-width: 0; - .issue-weight-icon, - .issue-estimate-icon { - vertical-align: sub; - } + .issue-weight-icon, + .issue-estimate-icon { + vertical-align: sub; } + } - .issuable-meta { - display: flex; - flex-direction: column; - align-items: flex-end; - flex: 1 0 auto; - - .controls { - margin-bottom: 2px; - line-height: 20px; - padding: 0; - } + .issuable-meta { + display: flex; + flex-direction: column; + align-items: flex-end; + flex: 1 0 auto; - .issue-updated-at { - line-height: 20px; - } + .controls { + margin-bottom: 2px; + line-height: 20px; + padding: 0; } - @include media-breakpoint-down(xs) { - .issuable-meta { - .controls li { - margin-right: 0; - } + .issue-updated-at { + line-height: 20px; + } + } + + @include media-breakpoint-down(xs) { + .issuable-meta { + .controls li { + margin-right: 0; } } } @@ -773,38 +746,15 @@ } } -.add-issuable-form-input-token-list { - display: flex; - flex-wrap: wrap; - align-items: baseline; - list-style: none; - margin-bottom: 0; - padding-left: 0; -} - -.add-issuable-form-token-list-item { - max-width: 100%; - margin-bottom: $gl-vert-padding; - margin-right: 5px; -} - -.add-issuable-form-input-list-item { - flex: 1; - min-width: 200px; - margin-bottom: $gl-vert-padding; -} - -.add-issuable-form-input { - width: 100%; - border: 0; - - &:focus { - outline: none; +.add-issuable-form-input-wrapper { + &.focus { + border-color: $blue-300; + box-shadow: 0 0 4px $dropdown-input-focus-shadow; } -} -.add-issuable-form-actions { - margin-top: $gl-padding; + .gl-show-field-errors &.form-control:not(textarea) { + height: auto; + } } .time-tracker { @@ -839,18 +789,7 @@ } .compare-display-container { - display: flex; - justify-content: space-between; - margin-top: 5px; - - .compare-display { - font-size: 13px; - color: $compare-display-color; - - .compare-value { - color: $gl-text-color; - } - } + font-size: 13px; } .time-tracking-help-state { @@ -938,22 +877,6 @@ vertical-align: sub; } -.suggestion-confidential { - color: $orange-500; -} - -.suggestion-state-open { - color: $green-500; -} - -.suggestion-state-closed { - color: $blue-500; -} - -.suggestion-help-hover { - cursor: help; -} - .suggestion-footer { font-size: 12px; line-height: 15px; diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 461d6a29b3a..880231f5644 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -1,42 +1,62 @@ -.issue-realtime-pre-pulse { - opacity: 0; -} +.issue-token-link { + &[href] { + color: $blue-600; + } -.issue-realtime-trigger-pulse { - transition: opacity $fade-in-duration linear; - opacity: 1; + &:hover, + &:focus { + outline: none; + text-decoration: none; + } } -.check-all-holder { - line-height: 36px; - float: left; - margin-right: 15px; -} +.issue-token-reference { + margin-right: 1px; + background-color: $gray-lighter; + transition: background $general-hover-transition-duration $general-hover-transition-curve, color $general-hover-transition-duration $general-hover-transition-curve; -form.edit-issue { - margin: 0; + .issue-token:hover &, + .issue-token-link:focus > & { + background-color: $gray-normal; + color: $blue-800; + text-decoration: none; + } } -ul.related-merge-requests > li { - display: flex; - align-items: center; +.issue-token-title { + background-color: $gray-normal; + transition: background $general-hover-transition-duration $general-hover-transition-curve; - .merge-request-id { - flex-shrink: 0; + .issue-token:hover &, + .issue-token-link:focus > & { + background-color: $border-gray-normal; } +} - .merge-request-info { - margin-left: 5px; - } +.issue-token-remove-button { + background-color: $gray-normal; + transition: background $general-hover-transition-duration $general-hover-transition-curve; - gl-emoji { - font-size: 1em; + &:hover, + &:focus, + .issue-token:hover &, + .issue-token-link:focus + & { + background-color: $border-gray-normal; + outline: none; } } -.related-branches-title { - font-size: 16px; - font-weight: $gl-font-weight-bold; +.issue-realtime-pre-pulse { + opacity: 0; +} + +.issue-realtime-trigger-pulse { + transition: opacity $fade-in-duration linear; + opacity: 1; +} + +ul.related-merge-requests > li gl-emoji { + font-size: 1em; } .merge-request-status { @@ -92,35 +112,12 @@ ul.related-merge-requests > li { } } -.issues-footer { - padding-top: $gl-padding; - padding-bottom: 37px; -} - -.issues-nav-controls, -.new-branch-col { - font-size: 0; -} - .issues-nav-controls { .btn-group:empty { display: none; } } -.email-modal-input-group { - margin-bottom: 10px; - - .form-control { - background-color: $white; - } - - .btn { - background-color: $gray-light; - border: 1px solid $border-gray-normal; - } -} - .recaptcha { margin-bottom: 30px; } diff --git a/app/assets/stylesheets/pages/issues/issue_count_badge.scss b/app/assets/stylesheets/pages/issues/issue_count_badge.scss deleted file mode 100644 index f2283e02ad2..00000000000 --- a/app/assets/stylesheets/pages/issues/issue_count_badge.scss +++ /dev/null @@ -1,10 +0,0 @@ -.issue-count-badge, -.mr-count-badge { - padding: 5px $gl-padding-8; -} - -.issue-count-badge-count, -.mr-count-badge-count { - display: inline-flex; - align-items: center; -} diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index 773935f4c76..71ddbf175e9 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -99,11 +99,6 @@ padding: 0; border: 0; background: none; - margin-bottom: $gl-padding; - } - - .omniauth-btn { - width: 100%; } } @@ -206,6 +201,12 @@ padding: 0; height: 100%; + &.with-system-header { + .login-page-broadcast { + margin-top: $system-header-height + $header-height; + } + } + // Fixes footer container to bottom of viewport body { // offset height of fixed header + 1 to avoid scroll diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 071a5be073f..cec8d8a29cc 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -474,31 +474,6 @@ $tabs-holder-z-index: 250; } } } - - .merge-request-labels { - display: inline-block; - } -} - -.merge-request-angle { - text-align: center; - margin: 0 auto; - font-size: 2em; - line-height: 1.1; -} - -// hide mr close link for inline diff comment form -.diff-file .close-mr-link, -.diff-file .reopen-mr-link { - display: none; -} - -.mr-links { - padding-left: $gl-padding-8 + $status-icon-size + $gl-btn-padding; - - &:last-child { - padding-bottom: $gl-padding; - } } .mr-info-list { @@ -649,10 +624,6 @@ $tabs-holder-z-index: 250; } } -.target-branch-select-dropdown-container { - position: relative; -} - .assign-to-me-link { padding-left: 12px; white-space: nowrap; @@ -667,12 +638,6 @@ $tabs-holder-z-index: 250; } } -.merged-buttons { - .btn { - float: left; - } -} - .mr-version-controls { position: relative; z-index: $tabs-holder-z-index + 10; @@ -1040,3 +1005,17 @@ $tabs-holder-z-index: 250; margin-bottom: 1px; } } + +.mr-widget-extension-icon::before { + @include gl-content-empty; + @include gl-absolute; + @include gl-left-0; + @include gl-top-0; + @include gl-opacity-3; + @include gl-border-solid; + @include gl-border-4; + @include gl-rounded-full; + + width: 24px; + height: 24px; +} diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 3c0f10eb5cb..1c408f6d985 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -24,12 +24,6 @@ margin: $gl-padding 0 0; } - .note-preview-holder { - > p { - overflow-x: auto; - } - } - img { max-width: 100%; } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 17bc40b4dec..04da75b586f 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -125,18 +125,17 @@ $system-note-svg-size: 16px; } } + .timeline-discussion-body { + margin-top: -$gl-padding-8; + } + .discussion { display: block; position: relative; .timeline-discussion-body { - margin-top: -$gl-padding-8; overflow-x: auto; overflow-y: hidden; - - .note-body { - margin-top: $gl-padding-8; - } } .diff-content { @@ -586,17 +585,47 @@ $system-note-svg-size: 16px; .note-header { display: flex; justify-content: space-between; + flex-wrap: wrap; + + > .note-header-info, + > .note-actions { + flex-grow: 1; + flex-shrink: 1; + } +} + +.note { + @include notes-media('max', map-get($grid-breakpoints, sm) - 1) { + .note-header { + .note-actions { + flex-wrap: wrap; + margin-bottom: $gl-padding-12; + + > :first-child { + margin-left: 0; + } + } + } + + .note-header-author-name { + display: block; + } + } } .note-header-info { min-width: 0; - padding-bottom: $gl-padding-8; &.discussion { padding-bottom: 0; } } +.note-header-info, +.note-actions { + padding-bottom: $gl-padding-8; +} + .system-note .note-header-info { padding-bottom: 0; } @@ -667,7 +696,8 @@ $system-note-svg-size: 16px; .note-actions { align-self: flex-start; - flex-shrink: 0; + justify-content: flex-end; + flex-shrink: 1; display: inline-flex; align-items: center; margin-left: 10px; diff --git a/app/assets/stylesheets/pages/notifications.scss b/app/assets/stylesheets/pages/notifications.scss index 298de33888d..2fd2757cf08 100644 --- a/app/assets/stylesheets/pages/notifications.scss +++ b/app/assets/stylesheets/pages/notifications.scss @@ -4,11 +4,6 @@ width: 100%; } - .notification-form { - display: block; - } - - .notifications-btn, .btn-group { width: 100%; } diff --git a/app/assets/stylesheets/pages/pages.scss b/app/assets/stylesheets/pages/pages.scss index 93caa345f8a..ebaf875ad8f 100644 --- a/app/assets/stylesheets/pages/pages.scss +++ b/app/assets/stylesheets/pages/pages.scss @@ -55,16 +55,4 @@ border-bottom-right-radius: $border-radius-default; border-top-right-radius: $border-radius-default; } - - &.floating-status-badge { - position: absolute; - right: $gl-padding-24; - bottom: $gl-padding-4; - margin-bottom: 0; - } -} - -.form-control.has-floating-status-badge { - position: relative; - padding-right: 120px; } diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index de9e0c6f705..af9f10c9a26 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -1,9 +1,3 @@ -.profile-avatar-form-option { - hr { - margin: 10px 0; - } -} - .avatar-image { margin-bottom: $grid-size; @@ -23,41 +17,6 @@ display: inline-block; } -.private-tokens-reset div.reset-action:not(:first-child) { - padding-top: 15px; -} - -.oauth-buttons { - .btn-group { - margin-right: 10px; - } - - .btn { - line-height: 40px; - height: 42px; - padding: 0 12px; - - img { - width: 32px; - height: 32px; - } - } -} - -// Profile > Account > Two Factor Authentication -.two-factor-new { - .manual-instructions { - h3 { - margin-top: 0; - } - - // Slightly increase the size of the details so they're easier to read - dl { - font-size: 1.1em; - } - } -} - .account-well { padding: 10px; background-color: $gray-light; @@ -191,10 +150,6 @@ } } -.personal-access-tokens-never-expires-label { - color: $note-disabled-comment-color; -} - .created-personal-access-token-container { .btn-clipboard { border: 1px solid $border-color; @@ -266,8 +221,7 @@ } } -table.u2f-registrations, -.webauthn-registrations { +table.u2f-registrations { th:not(:last-child), td:not(:last-child) { border-right: solid 1px transparent; diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss index 12386fa66ec..b583d40de79 100644 --- a/app/assets/stylesheets/pages/profiles/preferences.scss +++ b/app/assets/stylesheets/pages/profiles/preferences.scss @@ -1,19 +1,3 @@ -.multi-file-editor-options { - label { - margin-right: 20px; - text-align: center; - } - - .preview { - font-size: 0; - - img { - border: 1px solid $border-color-settings; - border-radius: 4px; - } - } -} - .application-theme { $ui-dark-bg: #2e2e2e; $ui-light-bg: #dfdfdf; diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index c330e0709a6..6b4d7c2520c 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -622,12 +622,6 @@ pre.light-well { } } - .star-button { - .icon { - top: 0; - } - } - .icon-container { @include media-breakpoint-down(xs) { margin-right: $gl-padding-8; @@ -938,16 +932,6 @@ pre.light-well { } } -.project-ci-linter { - .ci-editor { - height: 400px; - } - - .ci-template pre { - white-space: pre-wrap; - } -} - .project-badge { opacity: 0.9; diff --git a/app/assets/stylesheets/pages/prometheus.scss b/app/assets/stylesheets/pages/prometheus.scss index a3b6cbdff25..71cbd7d9613 100644 --- a/app/assets/stylesheets/pages/prometheus.scss +++ b/app/assets/stylesheets/pages/prometheus.scss @@ -96,11 +96,6 @@ padding: $gl-padding-8; } -.prometheus-graph-embed { - border: 1px solid $border-color; - border-radius: $border-radius-default; -} - .alert-current-setting { max-width: 240px; @@ -110,233 +105,6 @@ } } -.prometheus-graph-cursor { - position: absolute; - background: $gray-400; - width: 1px; -} - -.prometheus-graph-flag { - display: block; - min-width: 160px; - border: 0; - box-shadow: 0 1px 4px 0 $black-transparent; - - h5 { - padding: 0; - margin: 0; - font-size: 14px; - line-height: 1.2; - } - - .deploy-meta-content { - border-bottom: 1px solid $white-dark; - - svg { - height: 15px; - vertical-align: bottom; - } - } - - &.popover { - padding: 0; - - &.left { - left: auto; - right: 0; - margin-right: 10px; - - > .arrow { - right: -14px; - border-left-color: $border-color; - } - - > .arrow::after { - border-top: 6px solid transparent; - border-bottom: 6px solid transparent; - border-left: 4px solid $gray-10; - } - - .arrow-shadow { - right: -3px; - box-shadow: 1px 0 9px 0 $black-transparent; - } - } - - &.right { - left: 0; - right: auto; - margin-left: 10px; - - > .arrow { - left: -7px; - border-right-color: $border-color; - } - - > .arrow::after { - border-top: 6px solid transparent; - border-bottom: 6px solid transparent; - border-right: 4px solid $gray-10; - } - - .arrow-shadow { - left: -3px; - box-shadow: 1px 0 8px 0 $black-transparent; - } - } - - > .arrow { - top: 10px; - margin: 0; - } - - .arrow-shadow { - content: ''; - position: absolute; - width: 7px; - height: 7px; - background-color: transparent; - transform: rotate(45deg); - top: 13px; - } - - > .popover-title, - > .popover-content, - > .popover-header, - > .popover-body { - padding: 8px; - white-space: nowrap; - position: relative; - } - - > .popover-title { - background-color: $gray-10; - border-radius: $border-radius-default $border-radius-default 0 0; - } - } - - strong { - font-weight: 600; - } -} - -.prometheus-table { - border-collapse: collapse; - padding: 0; - margin: 0; - - td { - vertical-align: middle; - - + td { - padding-left: 8px; - vertical-align: top; - } - } - - .legend-metric-title { - font-size: 12px; - vertical-align: middle; - } -} - -.prometheus-svg-container { - position: relative; - height: 0; - width: 100%; - padding: 0; - padding-bottom: 100%; - - .text-metric-usage { - fill: $black; - font-weight: $gl-font-weight-normal; - font-size: 12px; - } - - > svg { - position: absolute; - height: 100%; - width: 100%; - left: 0; - top: 0; - - text { - fill: $gl-text-color; - stroke-width: 0; - } - - .text-metric-bold { - font-weight: $gl-font-weight-bold; - } - - .label-axis-text { - fill: $black; - font-weight: $gl-font-weight-normal; - font-size: 10px; - } - - .legend-axis-text { - fill: $black; - } - - .tick { - > line { - stroke: $gray-darker; - } - - > text { - fill: $gray-400; - font-size: 10px; - } - } - - .y-label-text, - .x-label-text { - fill: $gray-darkest; - } - - .axis-tick { - stroke: $gray-darker; - } - - .deploy-info-text { - dominant-baseline: text-before-edge; - font-size: 12px; - } - - .deploy-info-text-link { - font-family: $monospace-font; - fill: $blue-600; - - &:hover { - fill: $blue-800; - } - } - - @include media-breakpoint-down(sm) { - .label-axis-text, - .text-metric-usage, - .legend-axis-text { - font-size: 8px; - } - - .tick > text { - font-size: 8px; - } - } - } -} - -.prometheus-table-row-highlight { - background-color: $gray-100; -} - -.prometheus-graph-overlay { - fill: none; - opacity: 0; - pointer-events: all; -} - .prometheus-panel-builder { .preview-date-time-picker { // same as in .dropdown-menu-toggle diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index aa9ebfe2968..37e272cfff7 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -154,17 +154,6 @@ } } -.token-token-container { - #impersonation-token-token { - width: 80%; - display: inline; - } - - .btn-clipboard { - margin-left: 5px; - } -} - .visibility-level-setting { .form-check { margin-bottom: 10px; @@ -203,22 +192,6 @@ } } -.initialize-with-readme-setting { - .form-check { - margin-bottom: 10px; - - .option-title { - font-weight: $gl-font-weight-normal; - display: inline-block; - color: $gl-text-color; - } - - .option-description { - color: $project-option-descr-color; - } - } -} - .nested-settings { padding-left: 20px; } @@ -326,10 +299,6 @@ } } -.personal-access-tokens-never-expires-label { - color: $note-disabled-comment-color; -} - .created-deploy-token-container { .deploy-token-field { width: 90%; diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index 5765156f26c..33c66648718 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -223,11 +223,6 @@ min-height: 200px; } -.upload-link { - font-weight: $gl-font-weight-normal; - color: $blue-600; -} - .repo-charts { .sub-header { margin: 20px 0; diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index b7958cdf4a3..d436c328921 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -5,20 +5,17 @@ body.gl-dark { --gray-50: #303030; --gray-100: #404040; + --gray-900: #fafafa; --gray-950: #fff; --green-100: #0d532a; --green-400: #108548; --green-700: #91d4a8; --blue-400: #1f75cb; --orange-400: #ab6100; - --purple-100: #2f2a6b; --gl-text-color: #fafafa; --border-color: #4f4f4f; --black: #fff; } -.nav-sidebar li.active { - box-shadow: none; -} :root { --white: #333; } @@ -198,22 +195,6 @@ h1 { .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%; @@ -331,6 +312,9 @@ h1 { padding-left: 0.6em; border-radius: 10rem; } +.bg-transparent { + background-color: transparent !important; +} .rounded-circle { border-radius: 50% !important; } @@ -375,6 +359,20 @@ h1 { .m-auto { margin: auto !important; } +.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; +} +.gl-button .gl-badge { + top: 0; +} .gl-form-input, .gl-form-input.form-control { background-color: #333; @@ -466,9 +464,6 @@ a { .hide { display: none; } -.dropdown-menu-toggle::after { - display: none; -} .badge:not(.gl-badge) { padding: 4px 5px; font-size: 12px; @@ -548,7 +543,7 @@ body { border-radius: 0.25rem; white-space: nowrap; } -.no-outline.dropdown-menu-toggle { +.dropdown-menu-toggle.no-outline { outline: 0; } .dropdown-menu-toggle.dropdown-menu-toggle { @@ -875,6 +870,12 @@ input { .navbar-nav .badge.badge-pill:not(.merge-request-badge).todos-count { background-color: var(--blue-400, #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; @@ -1280,6 +1281,7 @@ input { a .avatar-container.rect-avatar .avatar.s32 { + border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .sidebar-top-level-items { @@ -1304,6 +1306,7 @@ input { a .avatar-container.rect-avatar .avatar.s32 { + border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .sidebar-top-level-items > li .badge.badge-pill { @@ -1601,19 +1604,98 @@ svg.s16 { .rect-avatar.s16 { border-radius: 2px; } -.rect-avatar.s32, -.nav-sidebar-inner-scroll - > div.context-header - a - .avatar-container.rect-avatar - .avatar.s32, -.sidebar-top-level-items - .context-header - a - .avatar-container.rect-avatar - .avatar.s32 { +.rect-avatar.s32 { border-radius: 4px; } +body.gl-dark { + --gray-10: #1f1f1f; + --gray-50: #303030; + --gray-100: #404040; + --gray-200: #525252; + --gray-300: #5e5e5e; + --gray-400: #868686; + --gray-500: #999; + --gray-600: #bfbfbf; + --gray-700: #dbdbdb; + --gray-800: #f0f0f0; + --gray-900: #fafafa; + --gray-950: #fff; + --green-50: #0a4020; + --green-100: #0d532a; + --green-200: #24663b; + --green-300: #217645; + --green-400: #108548; + --green-500: #2da160; + --green-600: #52b87a; + --green-700: #91d4a8; + --green-800: #c3e6cd; + --green-900: #ecf4ee; + --green-950: #f1fdf6; + --blue-50: #033464; + --blue-100: #064787; + --blue-200: #0b5cad; + --blue-300: #1068bf; + --blue-400: #1f75cb; + --blue-500: #428fdc; + --blue-600: #63a6e9; + --blue-700: #9dc7f1; + --blue-800: #cbe2f9; + --blue-900: #e9f3fc; + --blue-950: #f2f9ff; + --orange-50: #5c2900; + --orange-100: #703800; + --orange-200: #8f4700; + --orange-300: #9e5400; + --orange-400: #ab6100; + --orange-500: #c17d10; + --orange-600: #d99530; + --orange-700: #e9be74; + --orange-800: #f5d9a8; + --orange-900: #fdf1dd; + --orange-950: #fff4e1; + --red-50: #660e00; + --red-100: #8d1300; + --red-200: #ae1800; + --red-300: #c91c00; + --red-400: #dd2b0e; + --red-500: #ec5941; + --red-600: #f57f6c; + --red-700: #fcb5aa; + --red-800: #fdd4cd; + --red-900: #fcf1ef; + --red-950: #fff4f3; + --indigo-50: #1a1a40; + --indigo-100: #292961; + --indigo-200: #393982; + --indigo-300: #4b4ba3; + --indigo-400: #5b5bbd; + --indigo-500: #6666c4; + --indigo-600: #7c7ccc; + --indigo-700: #a6a6de; + --indigo-800: #d1d1f0; + --indigo-900: #ebebfa; + --indigo-950: #f7f7ff; + --indigo-900-alpha-008: rgba(235, 235, 250, 0.08); + --purple-50: #232150; + --purple-100: #2f2a6b; + --purple-200: #453894; + --purple-300: #5943b6; + --purple-400: #694cc0; + --purple-500: #7b58cf; + --purple-600: #9475db; + --purple-700: #ac93e6; + --purple-800: #cbbbf2; + --purple-900: #e1d8f9; + --purple-950: #f4f0ff; + --gl-text-color: #fafafa; + --border-color: #4f4f4f; + --white: #333; + --black: #fff; + --svg-status-bg: #333; +} +.nav-sidebar li.active { + box-shadow: none; +} body.gl-dark .navbar-gitlab { background-color: #fafafa; } @@ -1703,8 +1785,8 @@ body.gl-dark .nav-sidebar li.active > a { body.gl-dark .nav-sidebar .fly-out-top-item a, body.gl-dark .nav-sidebar .fly-out-top-item.active a, body.gl-dark .nav-sidebar .fly-out-top-item .fly-out-top-item-container { - background-color: var(--purple-100, #e1d8f9); - color: var(--black, #333); + background-color: var(--gray-100, #303030); + color: var(--gray-900, #fafafa); } body.gl-dark .logo-text svg { fill: var(--gl-text-color); @@ -1823,9 +1905,6 @@ body.gl-dark { --black: #fff; --svg-status-bg: #333; } -.nav-sidebar li.active { - box-shadow: none; -} .tab-width-8 { -moz-tab-size: 8; tab-size: 8; @@ -1841,9 +1920,18 @@ body.gl-dark { white-space: nowrap; width: 1px; } +.gl-bg-green-500 { + background-color: #2da160; +} .gl-border-none\! { border-style: none !important; } +.gl-rounded-pill { + border-radius: 0.75rem; +} +.gl-text-white { + color: #333; +} .gl-display-none { display: none; } @@ -1862,6 +1950,10 @@ body.gl-dark { .gl-pr-2 { padding-right: 0.25rem; } +.gl-py-1 { + padding-top: 0.125rem; + padding-bottom: 0.125rem; +} .gl-ml-3 { margin-left: 0.5rem; } diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index 2c79b819899..40026c95a15 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -178,22 +178,6 @@ h1 { .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%; @@ -311,6 +295,9 @@ h1 { padding-left: 0.6em; border-radius: 10rem; } +.bg-transparent { + background-color: transparent !important; +} .rounded-circle { border-radius: 50% !important; } @@ -355,6 +342,20 @@ h1 { .m-auto { margin: auto !important; } +.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; +} +.gl-button .gl-badge { + top: 0; +} .gl-form-input, .gl-form-input.form-control { background-color: #fff; @@ -446,9 +447,6 @@ a { .hide { display: none; } -.dropdown-menu-toggle::after { - display: none; -} .badge:not(.gl-badge) { padding: 4px 5px; font-size: 12px; @@ -528,7 +526,7 @@ body { border-radius: 0.25rem; white-space: nowrap; } -.no-outline.dropdown-menu-toggle { +.dropdown-menu-toggle.no-outline { outline: 0; } .dropdown-menu-toggle.dropdown-menu-toggle { @@ -855,6 +853,12 @@ input { .navbar-nav .badge.badge-pill:not(.merge-request-badge).todos-count { background-color: var(--blue-400, #428fdc); } +.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; @@ -1260,6 +1264,7 @@ input { a .avatar-container.rect-avatar .avatar.s32 { + border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .sidebar-top-level-items { @@ -1284,6 +1289,7 @@ input { a .avatar-container.rect-avatar .avatar.s32 { + border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .sidebar-top-level-items > li .badge.badge-pill { @@ -1581,17 +1587,7 @@ svg.s16 { .rect-avatar.s16 { border-radius: 2px; } -.rect-avatar.s32, -.nav-sidebar-inner-scroll - > div.context-header - a - .avatar-container.rect-avatar - .avatar.s32, -.sidebar-top-level-items - .context-header - a - .avatar-container.rect-avatar - .avatar.s32 { +.rect-avatar.s32 { border-radius: 4px; } @@ -1610,9 +1606,18 @@ svg.s16 { white-space: nowrap; width: 1px; } +.gl-bg-green-500 { + background-color: #108548; +} .gl-border-none\! { border-style: none !important; } +.gl-rounded-pill { + border-radius: 0.75rem; +} +.gl-text-white { + color: #fff; +} .gl-display-none { display: none; } @@ -1631,6 +1636,10 @@ svg.s16 { .gl-pr-2 { padding-right: 0.25rem; } +.gl-py-1 { + padding-top: 0.125rem; + padding-bottom: 0.125rem; +} .gl-ml-3 { margin-left: 0.5rem; } diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss index 013ad3fac87..8d7531d6c9c 100644 --- a/app/assets/stylesheets/startup/startup-signin.scss +++ b/app/assets/stylesheets/startup/startup-signin.scss @@ -258,21 +258,6 @@ fieldset:disabled a.btn { align-items: center; justify-content: space-between; } -.d-block { - display: block !important; -} -.d-flex { - display: flex !important; -} -.flex-wrap { - flex-wrap: wrap !important; -} -.justify-content-between { - justify-content: space-between !important; -} -.align-items-center { - align-items: center !important; -} .fixed-top { position: fixed; top: 0; @@ -280,9 +265,6 @@ fieldset:disabled a.btn { left: 0; z-index: 1030; } -.ml-2 { - margin-left: 0.5rem !important; -} .mt-3 { margin-top: 1rem !important; } @@ -349,6 +331,15 @@ fieldset:disabled a.btn { font-size: 0.875rem; border-radius: 0.25rem; } +.gl-button.gl-button .gl-button-text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding-top: 1px; + padding-bottom: 1px; + margin-top: -1px; + margin-bottom: -1px; +} .gl-button.gl-button .gl-button-icon { height: 1rem; width: 1rem; @@ -637,10 +628,6 @@ svg { padding: 0; border: 0; background: none; - margin-bottom: 16px; -} -.login-page .omniauth-container .omniauth-btn { - width: 100%; } .login-page .new-session-tabs { display: flex; @@ -771,21 +758,18 @@ svg { .gl-align-items-center { align-items: center; } +.gl-flex-wrap { + flex-wrap: wrap; +} .gl-w-full { width: 100%; } -.gl-p-2 { - padding: 0.25rem; -} .gl-p-4 { padding: 0.75rem; } .gl-mt-2 { margin-top: 0.25rem; } -.gl-mb-2 { - margin-bottom: 0.25rem; -} .gl-mb-3 { margin-bottom: 0.5rem; } @@ -797,8 +781,8 @@ svg { margin-top: 0; } } -.gl-text-left { - text-align: left; +.gl-font-weight-bold { + font-weight: 600; } @import "startup/cloaking"; diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index f12b2ee2591..c79816e3579 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -202,7 +202,8 @@ body.gl-dark { &.btn-info, &.btn-success, &.btn-danger, - &.btn-warning { + &.btn-warning, + &.btn-confirm { &-tertiary { mix-blend-mode: screen; } @@ -256,53 +257,3 @@ $line-removed-dark: $red-200; $well-expand-item: $gray-200; $well-inner-border: $gray-200; - -// Misc component overrides that should live elsewhere -.gl-label { - filter: brightness(0.9) contrast(1.1); - - // This applies to the gl-label markups - // rendered and cached in the backend (labels_helper.rb) - &.gl-label-scoped { - .gl-label-text-scoped, - .gl-label-close { - color: $gray-900; - } - } -} - -// white-ish text for light labels -.gl-label-text-light.gl-label-text-light { - color: $gray-900; -} - -.gl-label-text-dark.gl-label-text-dark { - color: $gray-10; -} - -// This applies to "gl-labels" from "gitlab-ui" -.gl-label.gl-label-scoped.gl-label-text-dark, -.gl-label.gl-label-scoped.gl-label-text-light { - .gl-label-text-scoped, - .gl-label-close { - color: $gray-900; - } -} - -// duplicated class as the original .atwho-view style is added later -.atwho-view.atwho-view { - background-color: $white; - color: $gray-900; - border-color: $gray-800; -} - -.nav-sidebar { - li.active { - box-shadow: none; - } - - .sidebar-sub-level-items.fly-out-list { - box-shadow: none; - border: 1px solid $border-color; - } -} diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss new file mode 100644 index 00000000000..b77048174c9 --- /dev/null +++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss @@ -0,0 +1,116 @@ +@import './themes/dark'; +@import 'page_bundles/mixins_and_variables_and_functions'; +@import './themes/theme_helper'; + +// Some hacks and overrides for things that don't properly support dark mode +.gl-label { + filter: brightness(0.9) contrast(1.1); + + // This applies to the gl-label markups + // rendered and cached in the backend (labels_helper.rb) + &.gl-label-scoped { + .gl-label-text-scoped, + .gl-label-close { + color: $gray-900; + } + } +} + +// white-ish text for light labels +.gl-label-text-light.gl-label-text-light { + color: $gray-900; +} + +.gl-label-text-dark.gl-label-text-dark { + color: $gray-10; +} + +// This applies to "gl-labels" from "gitlab-ui" +.gl-label.gl-label-scoped.gl-label-text-dark, +.gl-label.gl-label-scoped.gl-label-text-light { + .gl-label-text-scoped, + .gl-label-close { + color: $gray-900; + } +} + +// duplicated class as the original .atwho-view style is added later +.atwho-view.atwho-view { + background-color: $white; + color: $gray-900; + border-color: $gray-800; +} + +.nav-sidebar { + li.active { + box-shadow: none; + } + + .sidebar-sub-level-items.fly-out-list { + box-shadow: none; + border: 1px solid $border-color; + } +} + +body.gl-dark { + @include gitlab-theme($gray-900, $gray-400, $gray-500, $gray-800, $gray-900, $white); + + .logo-text svg { + fill: var(--gl-text-color); + } + + .navbar-gitlab { + background-color: var(--gray-50); + box-shadow: 0 1px 0 0 var(--gray-100); + + .navbar-sub-nav, + .navbar-nav { + li { + > a:hover, + > a:focus, + > button:hover, + > button:focus { + color: var(--gl-text-color); + background-color: var(--gray-200); + } + } + + li.active, + li.dropdown.show { + > a, + > button { + color: var(--gl-text-color); + background-color: var(--gray-200); + } + } + } + + .header-search { + background-color: var(--gray-100) !important; + box-shadow: inset 0 0 0 1px var(--border-color) !important; + + &:active, + &:hover { + background-color: var(--gray-100) !important; + box-shadow: inset 0 0 0 1px var(--blue-200) !important; + } + } + + .search { + form { + background-color: var(--gray-100); + box-shadow: inset 0 0 0 1px var(--border-color); + + &:active, + &:hover { + background-color: var(--gray-100); + box-shadow: inset 0 0 0 1px var(--blue-200); + } + } + } + } + + .md :not(pre.code) > code { + background-color: $gray-200; + } +} diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss index a9e8b238d78..1332686a906 100644 --- a/app/assets/stylesheets/themes/theme_helper.scss +++ b/app/assets/stylesheets/themes/theme_helper.scss @@ -212,8 +212,8 @@ a:hover, &.active a, .fly-out-top-item-container { - background-color: var(--purple-100, $purple-900); - color: var(--black, $white); + background-color: var(--gray-100, $gray-50); + color: var(--gray-900, $gray-900); } } } |