diff options
Diffstat (limited to 'app/assets/stylesheets')
52 files changed, 3883 insertions, 4150 deletions
diff --git a/app/assets/stylesheets/components/rich_content_editor.scss b/app/assets/stylesheets/components/rich_content_editor.scss index d97a9bc227d..59bd69955d3 100644 --- a/app/assets/stylesheets/components/rich_content_editor.scss +++ b/app/assets/stylesheets/components/rich_content_editor.scss @@ -47,7 +47,7 @@ /** * Styling below ensures that YouTube videos are displayed in the editor the same as they would in about.gitlab.com -* https://gitlab.com/gitlab-com/www-gitlab-com/-/blob/master/source/stylesheets/_base.scss#L977 +* https://gitlab.com/gitlab-com/www-gitlab-com/-/blob/main/source/stylesheets/_base.scss#L977 */ .video_container { padding-bottom: 56.25%; diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index cde5ad24fa5..2fbdaaaf467 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -38,7 +38,8 @@ @import 'framework/secondary_navigation_elements'; @import 'framework/selects'; @import 'framework/sidebar'; -@import 'framework/contextual_sidebar'; +@import 'framework/contextual_sidebar_header'; +@import 'framework/contextual_sidebar_refactoring/contextual_sidebar'; @import 'framework/tables'; @import 'framework/notes'; @import 'framework/tabs'; @@ -46,6 +47,7 @@ @import 'framework/toggle'; @import 'framework/typography'; @import 'framework/zen'; +@import 'framework/blank'; @import 'framework/wells'; @import 'framework/page_header'; @import 'framework/page_title'; diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index 412a1e8d6c9..2c72c4b0f65 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -255,27 +255,9 @@ // This forces the height and width of the inner content to match // other gl-buttons despite all child elements being set to // `position:absolute` - &::after { - content: '\a0'; - display: block !important; - width: 1em; - color: transparent; - } - - .reaction-control-icon { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - - // center the icon vertically and horizontally within the button - display: flex; - align-items: center; - justify-content: center; - @include transition(opacity, transform); + .reaction-control-icon { .gl-icon { height: $default-icon-size; width: $default-icon-size; @@ -283,32 +265,26 @@ } .reaction-control-icon-neutral { - opacity: 1; + display: flex; } .reaction-control-icon-positive, .reaction-control-icon-super-positive { - opacity: 0; + display: none; } &:hover, &.active, &:active, &.is-active { - // extra specificty added to override another selector - .reaction-control-icon .gl-icon { - color: $blue-500; - transform: scale(1.15); - } - .reaction-control-icon-neutral { - opacity: 0; + display: none; } } &:hover { .reaction-control-icon-positive { - opacity: 1; + display: flex; } } @@ -316,11 +292,11 @@ &:active, &.is-active { .reaction-control-icon-positive { - opacity: 0; + display: none; } .reaction-control-icon-super-positive { - opacity: 1; + display: flex; } } @@ -336,17 +312,13 @@ } .reaction-control-icon-neutral { - opacity: 1; + display: flex; } .reaction-control-icon-positive, .reaction-control-icon-super-positive { - opacity: 0; + display: none; } } } } - -.awards .is-active { - box-shadow: inset 0 0 0 1px $blue-200; -} diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss new file mode 100644 index 00000000000..7dd7ab339dd --- /dev/null +++ b/app/assets/stylesheets/framework/blank.scss @@ -0,0 +1,118 @@ +.blank-state-parent-container { + .section-container { + padding: 10px; + } + + .section-body { + width: 100%; + height: 100%; + padding-bottom: 25px; + border-radius: $border-radius-default; + } +} + +.blank-state-row { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.blank-state-welcome { + text-align: center; + padding: $gl-padding 0 ($gl-padding * 2); + + .blank-state-welcome-title { + font-size: 24px; + } + + .blank-state-text { + margin-bottom: 0; + } +} + +.blank-state-link { + color: $gl-text-color; + margin-bottom: 15px; + + &:hover { + background-color: $gray-light; + text-decoration: none; + color: $gl-text-color; + } +} + +.blank-state-center { + padding-top: 20px; + padding-bottom: 20px; + text-align: center; +} + +.blank-state { + display: flex; + align-items: center; + padding: 20px 50px; + border: 1px solid $border-color; + border-radius: $border-radius-default; + min-height: 240px; + margin-bottom: $gl-padding; + width: calc(50% - #{$gl-padding-8}); + + @include media-breakpoint-down(sm) { + width: 100%; + flex-direction: column; + justify-content: center; + padding: 50px 20px; + + .column-small & { + width: 100%; + } + + } +} + +.blank-state, +.blank-state-center { + .blank-state-icon { + svg { + display: block; + margin: auto; + } + } + + .blank-state-title { + margin-top: 0; + font-size: 18px; + } + + .blank-state-body { + @include media-breakpoint-down(sm) { + text-align: center; + margin-top: 20px; + } + + @include media-breakpoint-up(sm) { + padding-left: 20px; + } + } +} + +@include media-breakpoint-up(lg) { + .column-large { + flex: 2; + } + + .column-small { + flex: 1; + margin-bottom: 15px; + + .blank-state { + max-width: 400px; + flex-wrap: wrap; + margin-left: 15px; + } + + .blank-state-icon { + margin-bottom: 30px; + } + } +} diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index bfa4a640fe2..10481294df5 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -72,7 +72,7 @@ } &.content-component-block { - padding: 11px 0; + padding: 8px 0; background-color: $body-bg; } @@ -253,7 +253,7 @@ } .content-block-small { - padding: 10px 0; + padding: 4px 0; } .landing { diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 603d28a8395..ceccec8c5cb 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -200,10 +200,6 @@ @include btn-red; } - &.btn-cancel { - float: right; - } - &.btn-grouped { @include btn-with-margin; } diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss index 5b7f1a3f38b..1fa03d66f32 100644 --- a/app/assets/stylesheets/framework/calendar.scss +++ b/app/assets/stylesheets/framework/calendar.scss @@ -30,6 +30,16 @@ cursor: pointer; stroke: $black; } + + // `app/assets/javascripts/pages/users/activity_calendar.js` sets this attribute + @for $i from 1 through length($calendar-activity-colors) { + $color: nth($calendar-activity-colors, $i); + $level: $i - 1; + + &[data-level='#{$level}'] { + fill: $color; + } + } } .user-contrib-text { diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss deleted file mode 100644 index 14d1a0663d0..00000000000 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ /dev/null @@ -1,453 +0,0 @@ -.page-with-contextual-sidebar { - transition: padding-left $sidebar-transition-duration; - - @include media-breakpoint-up(md) { - padding-left: $contextual-sidebar-collapsed-width; - } - - @include media-breakpoint-up(xl) { - padding-left: $contextual-sidebar-width; - } - - .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header { - padding: 10px 0 15px; - } -} - -.page-with-icon-sidebar { - @include media-breakpoint-up(md) { - padding-left: $contextual-sidebar-collapsed-width; - } -} - -.context-header { - position: relative; - margin-right: 2px; - width: $contextual-sidebar-width; - - > a, - > button { - transition: padding $sidebar-transition-duration; - font-weight: $gl-font-weight-bold; - display: flex; - width: 100%; - align-items: center; - padding: 10px 16px 10px 10px; - color: $gl-text-color; - background-color: transparent; - border: 0; - text-align: left; - - &:hover, - &:focus { - background-color: $link-hover-background; - color: $gl-text-color; - outline: 0; - } - } - - .avatar-container { - flex: 0 0 40px; - background-color: $white; - } - - .sidebar-context-title { - overflow: hidden; - text-overflow: ellipsis; - - &.text-secondary { - font-weight: normal; - font-size: 0.8em; - } - } -} - -.settings-avatar { - background-color: $white; - - svg { - fill: $gl-text-color-secondary; - margin: auto; - } -} - -@mixin collapse-contextual-sidebar-content { - .context-header { - height: 60px; - width: $contextual-sidebar-collapsed-width; - - a { - padding: 10px 4px; - } - } - - .sidebar-top-level-items > li { - .sidebar-sub-level-items { - &:not(.flyout-list) { - display: none; - } - } - } - - .nav-icon-container { - margin-right: 0; - } - - .toggle-sidebar-button { - padding: 16px; - width: $contextual-sidebar-collapsed-width - 1px; - - .collapse-text, - .icon-chevron-double-lg-left { - display: none; - } - - .icon-chevron-double-lg-right { - display: block; - margin: 0; - } - } -} - -.nav-sidebar { - transition: width $sidebar-transition-duration, left $sidebar-transition-duration; - position: fixed; - z-index: 600; - width: $contextual-sidebar-width; - top: $header-height; - bottom: 0; - left: 0; - background-color: $gray-light; - box-shadow: inset -1px 0 0 $border-color; - transform: translate3d(0, 0, 0); - - &:not(.sidebar-collapsed-desktop) { - @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) { - box-shadow: inset -1px 0 0 $border-color, 2px 1px 3px $dropdown-shadow-color; - } - } - - @mixin collapse-contextual-sidebar { - width: $contextual-sidebar-collapsed-width; - - .nav-sidebar-inner-scroll { - overflow-x: hidden; - } - - .badge.badge-pill:not(.fly-out-badge), - .sidebar-context-title, - .nav-item-name { - @include gl-sr-only; - } - - .sidebar-top-level-items > li > a { - min-height: 45px; - } - - .fly-out-top-item { - display: block; - } - - .avatar-container { - margin: 0 auto; - } - } - - &.sidebar-collapsed-desktop { - @include collapse-contextual-sidebar; - } - - &.sidebar-expanded-mobile { - left: 0; - } - - a { - text-decoration: none; - } - - ul { - padding-left: 0; - list-style: none; - } - - li { - white-space: nowrap; - - a { - transition: padding $sidebar-transition-duration; - display: flex; - align-items: center; - padding: 12px $gl-padding; - color: $gl-text-color-secondary; - } - - .nav-item-name { - flex: 1; - } - - &.active { - > a { - font-weight: $gl-font-weight-bold; - } - } - } - - @include media-breakpoint-down(sm) { - left: (-$contextual-sidebar-width); - } - - .nav-icon-container { - display: flex; - margin-right: 8px; - } - - .fly-out-top-item { - display: none; - } - - svg { - height: 16px; - width: 16px; - } - - @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) { - &:not(.sidebar-expanded-mobile) { - @include collapse-contextual-sidebar; - @include collapse-contextual-sidebar-content; - } - } -} - -.nav-sidebar-inner-scroll { - height: 100%; - width: 100%; - overflow: auto; -} - -.with-performance-bar .nav-sidebar { - top: $header-height + $performance-bar-height; -} - -.sidebar-sub-level-items { - display: none; - padding-bottom: 8px; - - > li { - a { - padding: 8px 16px 8px 40px; - - &:hover, - &:focus { - background: $link-active-background; - color: $gl-text-color; - } - } - - &.active { - a { - &, - &:hover, - &:focus { - background: $link-active-background; - } - } - } - } -} - -.sidebar-top-level-items { - margin-bottom: 60px; - - > li { - > a { - @include media-breakpoint-up(sm) { - margin-right: 1px; - } - - &:hover { - color: $gl-text-color; - } - } - - &.is-showing-fly-out { - > a { - margin-right: 1px; - } - - .sidebar-sub-level-items { - @include media-breakpoint-up(sm) { - position: fixed; - top: 0; - left: 0; - min-width: 150px; - margin-top: -1px; - padding: 4px 1px; - background-color: $white; - box-shadow: 2px 1px 3px $dropdown-shadow-color; - border: 1px solid $gray-darker; - border-left: 0; - border-radius: 0 3px 3px 0; - - &::before { - content: ''; - position: absolute; - top: -30px; - bottom: -30px; - left: -10px; - right: -30px; - z-index: -1; - } - - &.is-above { - margin-top: 1px; - } - - .divider { - height: 1px; - margin: 4px -1px; - padding: 0; - background-color: $dropdown-divider-bg; - } - - > .active { - box-shadow: none; - - > a { - background-color: transparent; - } - } - - a { - padding: 8px 16px; - color: $gl-text-color; - - &:hover, - &:focus { - background-color: $gray-darker; - } - } - } - } - } - - .badge.badge-pill { - background-color: $inactive-badge-background; - color: $gl-text-color-secondary; - } - - &.active { - background: $link-active-background; - - > a { - margin-left: 4px; - // Subtract width of left border on active element - padding-left: $gl-padding-12; - } - - .badge.badge-pill { - font-weight: $gl-font-weight-bold; - } - - .sidebar-sub-level-items:not(.is-fly-out-only) { - display: block; - } - } - - &.active > a:hover, - &.is-over > a { - background-color: $link-hover-background; - } - } -} - -// Collapsed nav - -.toggle-sidebar-button, -.close-nav-button, -.toggle-right-sidebar-button { - transition: width $sidebar-transition-duration; - height: $toggle-sidebar-height; - padding: 0 $gl-padding; - background-color: $gray-light; - border: 0; - color: $gl-text-color-secondary; - display: flex; - align-items: center; - - &:hover { - background-color: $border-color; - color: $gl-text-color; - } -} - -.toggle-sidebar-button, -.close-nav-button { - position: fixed; - bottom: 0; - width: $contextual-sidebar-width - 1px; - border-top: 1px solid $border-color; - - svg { - margin-right: 8px; - } - - .icon-chevron-double-lg-right { - display: none; - } -} - -.toggle-right-sidebar-button { - border-bottom: 1px solid $border-color; -} - -.collapse-text { - white-space: nowrap; - overflow: hidden; -} - -.sidebar-collapsed-desktop { - @include collapse-contextual-sidebar-content; -} - -.fly-out-top-item { - > a { - display: flex; - } - - .fly-out-badge { - margin-left: 8px; - } -} - -.fly-out-top-item-name { - flex: 1; -} - -// Mobile nav - -.close-nav-button { - display: none; -} - -@include media-breakpoint-down(sm) { - .close-nav-button { - display: flex; - } - - .toggle-sidebar-button { - display: none; - } - - .mobile-overlay { - display: none; - - &.mobile-nav-open { - display: block; - position: fixed; - background-color: $black-transparent; - height: 100%; - width: 100%; - z-index: $zindex-dropdown-menu; - } - } -} diff --git a/app/assets/stylesheets/framework/contextual_sidebar_header.scss b/app/assets/stylesheets/framework/contextual_sidebar_header.scss new file mode 100644 index 00000000000..fdd03f4cdc8 --- /dev/null +++ b/app/assets/stylesheets/framework/contextual_sidebar_header.scss @@ -0,0 +1,57 @@ +.context-header { + position: relative; + margin-right: 2px; + width: $contextual-sidebar-width; + + > a, + > button { + transition: padding $sidebar-transition-duration; + font-weight: $gl-font-weight-bold; + display: flex; + width: 100%; + align-items: center; + padding: 10px 16px 10px 10px; + color: $gl-text-color; + background-color: transparent; + border: 0; + text-align: left; + + &:hover, + &:focus { + background-color: $link-hover-background; + color: $gl-text-color; + outline: 0; + } + } + + .avatar-container { + flex: 0 0 40px; + background-color: $white; + } + + .sidebar-context-title { + overflow: hidden; + text-overflow: ellipsis; + + &.text-secondary { + font-weight: normal; + font-size: 0.8em; + } + } +} + +@mixin context-header-collapsed { + .context-header { + height: 60px; + width: $contextual-sidebar-collapsed-width; + + a { + padding: 10px 4px; + } + } + + .sidebar-context-title { + @include gl-sr-only; + } +} + diff --git a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar.scss new file mode 100644 index 00000000000..905ac260203 --- /dev/null +++ b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar.scss @@ -0,0 +1,7 @@ +body:not(.sidebar-refactoring) { + @import 'contextual_sidebar_base'; +} + +body.sidebar-refactoring { + @import 'contextual_sidebar_variant'; +} diff --git a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_base.scss b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_base.scss new file mode 100644 index 00000000000..306a9b74ebd --- /dev/null +++ b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_base.scss @@ -0,0 +1,386 @@ +@mixin collapse-contextual-sidebar-content { + + @include context-header-collapsed; + + .sidebar-top-level-items > li { + .sidebar-sub-level-items { + &:not(.flyout-list) { + display: none; + } + } + } + + .nav-icon-container { + margin-right: 0; + } + + .toggle-sidebar-button { + padding: 16px; + width: $contextual-sidebar-collapsed-width - 1px; + + .collapse-text, + .icon-chevron-double-lg-left { + display: none; + } + + .icon-chevron-double-lg-right { + display: block; + margin: 0; + } + } +} + +@mixin collapse-contextual-sidebar { + width: $contextual-sidebar-collapsed-width; + + .nav-sidebar-inner-scroll { + overflow-x: hidden; + } + + .badge.badge-pill:not(.fly-out-badge), + .nav-item-name { + @include gl-sr-only; + } + + .sidebar-top-level-items > li > a { + min-height: 45px; + } + + .fly-out-top-item { + display: block; + } + + .avatar-container { + margin: 0 auto; + } +} + +@at-root { + .page-with-contextual-sidebar { + transition: padding-left $sidebar-transition-duration; + + @include media-breakpoint-up(md) { + padding-left: $contextual-sidebar-collapsed-width; + } + + @include media-breakpoint-up(xl) { + padding-left: $contextual-sidebar-width; + } + + .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header { + padding: 10px 0 15px; + } + } + + .page-with-icon-sidebar { + @include media-breakpoint-up(md) { + padding-left: $contextual-sidebar-collapsed-width; + } + } + + .settings-avatar { + background-color: $white; + + svg { + fill: $gl-text-color-secondary; + margin: auto; + } + } + + .nav-sidebar { + transition: width $sidebar-transition-duration, left $sidebar-transition-duration; + position: fixed; + z-index: 600; + width: $contextual-sidebar-width; + top: $header-height; + bottom: 0; + left: 0; + background-color: $gray-light; + box-shadow: inset -1px 0 0 $border-color; + transform: translate3d(0, 0, 0); + + &:not(.sidebar-collapsed-desktop) { + @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) { + box-shadow: inset -1px 0 0 $border-color, 2px 1px 3px $dropdown-shadow-color; + } + } + + &.sidebar-collapsed-desktop { + @include collapse-contextual-sidebar; + } + + &.sidebar-expanded-mobile { + left: 0; + } + + a { + text-decoration: none; + } + + ul { + padding-left: 0; + list-style: none; + } + + li { + white-space: nowrap; + + a { + transition: padding $sidebar-transition-duration; + display: flex; + align-items: center; + padding: 12px $gl-padding; + color: $gl-text-color-secondary; + } + + .nav-item-name { + flex: 1; + } + + &.active { + > a { + font-weight: $gl-font-weight-bold; + } + } + } + + @include media-breakpoint-down(sm) { + left: (-$contextual-sidebar-width); + } + + .nav-icon-container { + display: flex; + margin-right: 8px; + } + + .fly-out-top-item { + display: none; + } + + svg { + height: 16px; + width: 16px; + } + + @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) { + &:not(.sidebar-expanded-mobile) { + @include collapse-contextual-sidebar; + @include collapse-contextual-sidebar-content; + } + } + } + + .nav-sidebar-inner-scroll { + height: 100%; + width: 100%; + overflow: auto; + } + + .sidebar-sub-level-items { + display: none; + padding-bottom: 8px; + + > li { + a { + padding: 8px 16px 8px 40px; + + &:hover, + &:focus { + background: $link-active-background; + color: $gl-text-color; + } + } + + &.active { + a { + &, + &:hover, + &:focus { + background: $link-active-background; + } + } + } + } + } + + .sidebar-top-level-items { + margin-bottom: 60px; + + > li { + > a { + @include media-breakpoint-up(sm) { + margin-right: 1px; + } + + &:hover { + color: $gl-text-color; + } + } + + &.is-showing-fly-out { + > a { + margin-right: 1px; + } + + .sidebar-sub-level-items { + @include media-breakpoint-up(sm) { + position: fixed; + top: 0; + left: 0; + min-width: 150px; + margin-top: -1px; + padding: 4px 1px; + background-color: $white; + box-shadow: 2px 1px 3px $dropdown-shadow-color; + border: 1px solid $gray-darker; + border-left: 0; + border-radius: 0 3px 3px 0; + + &::before { + content: ''; + position: absolute; + top: -30px; + bottom: -30px; + left: -10px; + right: -30px; + z-index: -1; + } + + &.is-above { + margin-top: 1px; + } + + .divider { + height: 1px; + margin: 4px -1px; + padding: 0; + background-color: $dropdown-divider-bg; + } + + > .active { + box-shadow: none; + + > a { + background-color: transparent; + } + } + + a { + padding: 8px 16px; + color: $gl-text-color; + + &:hover, + &:focus { + background-color: $gray-darker; + } + } + } + } + } + + .badge.badge-pill { + background-color: $inactive-badge-background; + color: $gl-text-color-secondary; + } + + &.active { + background: $link-active-background; + + > a { + margin-left: 4px; + // Subtract width of left border on active element + padding-left: $gl-padding-12; + } + + .badge.badge-pill { + font-weight: $gl-font-weight-bold; + } + + .sidebar-sub-level-items:not(.is-fly-out-only) { + display: block; + } + } + + &.active > a:hover, + &.is-over > a { + background-color: $link-hover-background; + } + } + } + + // Collapsed nav + + .toggle-sidebar-button, + .close-nav-button { + @include side-panel-toggle; + } + + .toggle-sidebar-button, + .close-nav-button { + position: fixed; + bottom: 0; + width: $contextual-sidebar-width - 1px; + border-top: 1px solid $border-color; + + svg { + margin-right: 8px; + } + + .icon-chevron-double-lg-right { + display: none; + } + } + + .collapse-text { + white-space: nowrap; + overflow: hidden; + } + + .sidebar-collapsed-desktop { + @include collapse-contextual-sidebar-content; + } + + .fly-out-top-item { + > a { + display: flex; + } + + .fly-out-badge { + margin-left: 8px; + } + } + + .fly-out-top-item-name { + flex: 1; + } + + // Mobile nav + + .close-nav-button { + display: none; + } + + @include media-breakpoint-down(sm) { + .close-nav-button { + display: flex; + } + + .toggle-sidebar-button { + display: none; + } + + .mobile-overlay { + display: none; + + &.mobile-nav-open { + display: block; + position: fixed; + background-color: $black-transparent; + height: 100%; + width: 100%; + z-index: $zindex-dropdown-menu; + } + } + } +} + diff --git a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss new file mode 100644 index 00000000000..154b8c31e8b --- /dev/null +++ b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss @@ -0,0 +1,514 @@ +// +// VARIABLES +// + +$top-level-item-color: $purple-900; + +// +// TEMPORARY OVERRIDES +// Needed while we serve both *_base and *_variant stylesheets +// TODO: These have to be removed during the ':sidebar_refactor' flag rollout +// +&.gl-dark .nav-sidebar li.active { + box-shadow: none; +} + +&.gl-dark .nav-sidebar li a, +&.gl-dark .toggle-sidebar-button .collapse-text, +&.gl-dark .toggle-sidebar-button .icon-chevron-double-lg-left, +&.gl-dark .toggle-sidebar-button .icon-chevron-double-lg-right, +&.gl-dark .sidebar-top-level-items .context-header a .sidebar-context-title, +&.gl-dark .nav-sidebar-inner-scroll > div.context-header a .sidebar-context-title { + color: $gray-darkest; +} + +&.ui-indigo .nav-sidebar li.active:not(.fly-out-top-item) > a { + color: $top-level-item-color; +} + +&.ui-indigo .nav-sidebar li.active .nav-icon-container svg { + fill: $top-level-item-color; +} + +.nav-sidebar { + box-shadow: none; + + li.active { + background-color: transparent; + box-shadow: none !important; // TODO: This should be updated in `theme_helper.scss` together with ':sidebar_refactor' rollout + } +} + +// +// MIXINS +// + +@mixin collapse-contextual-sidebar-content { + + @include context-header-collapsed; + + .context-header { + @include gl-h-auto; + + a { + @include gl-p-2; + } + } + + .sidebar-top-level-items > li { + .sidebar-sub-level-items { + &:not(.flyout-list) { + display: none; + } + } + } + + .nav-icon-container { + margin-right: 0; + } + + .toggle-sidebar-button { + width: $contextual-sidebar-collapsed-width; + + .collapse-text { + display: none; + } + + .icon-chevron-double-lg-left { + @include gl-rotate-180; + @include gl-display-block; // TODO: shouldn't be needed after the flag roll out + @include gl-m-0; + } + } +} + +@mixin collapse-contextual-sidebar { + width: $contextual-sidebar-collapsed-width; + + .nav-sidebar-inner-scroll { + overflow-x: hidden; + } + + .badge.badge-pill:not(.fly-out-badge), + .nav-item-name, + .collapse-text { + @include gl-sr-only; + } + + .sidebar-top-level-items > li > a { + min-height: unset; + } + + .fly-out-top-item:not(.divider) { + display: block !important; + } + + .avatar-container { + margin: 0 auto; + } + + li.active:not(.fly-out-top-item) > a { + background-color: $indigo-900-alpha-008; + } +} + +@mixin sub-level-items-flyout { + .sidebar-sub-level-items { + @include media-breakpoint-up(sm) { + @include gl-fixed; + @include gl-top-0; + @include gl-left-0; + @include gl-ml-3; + @include gl-mt-0; + @include gl-px-0; + @include gl-pb-2; + @include gl-pt-0; + min-width: 150px; + background-color: $gray-10; + box-shadow: 0 $gl-spacing-scale-2 $gl-spacing-scale-5 $t-gray-a-24, 0 0 $gl-spacing-scale-1 $t-gray-a-24; + border-style: none; + border-radius: $border-radius-default; + + .divider { + @include gl-display-none; + } + + .divider + li > a { + @include gl-mt-2; + } + + li:last-of-type a { + @include gl-mb-0; + } + + &.is-above { + @include gl-mt-0; + } + } + + a { + @include gl-px-4; + } + + .fly-out-top-item { + > a { + display: flex; + } + + .fly-out-badge { + margin-left: 8px; + } + } + + .fly-out-top-item-name { + flex: 1; + } + } +} + +@mixin context-header { + $avatar-box-shadow: inset 0 0 0 1px $t-gray-a-08; + + @include gl-p-2; + @include gl-mb-2; + @include gl-mt-0; + + .avatar-container { + @include gl-font-weight-normal; + flex: none; + box-shadow: $avatar-box-shadow; + + &.rect-avatar { + @include gl-border-none; + + .avatar.s32 { + @extend .rect-avatar.s32; + color: $gray-900; + box-shadow: $avatar-box-shadow; + } + } + } + + .sidebar-context-title { + color: $top-level-item-color; + } +} + +@mixin top-level-item { + @include gl-px-4; + @include gl-py-3; + @include gl-display-flex; + @include gl-align-items-center; + @include gl-rounded-base; + @include gl-w-auto; + @include gl-line-height-normal; + transition: none; + margin: $sidebar-top-item-tb-margin $sidebar-top-item-lr-margin; + + &:hover { + background-color: $indigo-900-alpha-008; + } +} + +@mixin fly-out-top-item($has-sub-items: false) { + @include gl-display-none; + + a, + a:hover, + &.active a, + .fly-out-top-item-container { + @include gl-mx-0; + @include gl-px-5; + @include gl-cursor-default; + @include gl-pointer-events-none; + @include gl-font-sm; + background-color: $purple-900; + color: $white; + + @if $has-sub-items { + @include gl-mt-n2; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } @else { + @include gl-my-n2; + @include gl-mt-0; + @include gl-relative; + background-color: $black; + + strong { + @include gl-font-weight-normal; + } + + &::before { + @include gl-absolute; + content: ''; + display: block; + top: 50%; + left: $gl-spacing-scale-3/-2; + margin-top: -$gl-spacing-scale-3; + width: 0; + height: 0; + border-top: $gl-spacing-scale-3 solid transparent; + border-bottom: $gl-spacing-scale-3 solid transparent; + border-right: $gl-spacing-scale-3 solid $black; + } + } + } +} + +// +// PAGE-LAYOUT +// + +.page-with-contextual-sidebar { + transition: padding-left $sidebar-transition-duration; + + @include media-breakpoint-up(md) { + padding-left: $contextual-sidebar-collapsed-width; + } + + @include media-breakpoint-up(xl) { + padding-left: $contextual-sidebar-width; + } + + .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header { + padding: 10px 0 15px; + } +} + +.page-with-icon-sidebar { + @include media-breakpoint-up(md) { + padding-left: $contextual-sidebar-collapsed-width; + } +} + +// +// THE PANEL +// + +.nav-sidebar { + @include gl-fixed; + @include gl-bottom-0; + @include gl-left-0; + transition: width $sidebar-transition-duration, left $sidebar-transition-duration; + z-index: 600; + width: $contextual-sidebar-width; + top: $header-height; + background-color: $gray-50; + transform: translate3d(0, 0, 0); + + &.sidebar-collapsed-desktop { + @include collapse-contextual-sidebar; + } + + &.sidebar-expanded-mobile { + left: 0; + } + + a { + @include gl-text-decoration-none; + color: $top-level-item-color; + } + + li { + white-space: nowrap; + + .nav-item-name { + flex: 1; + } + + > a, + > .fly-out-top-item-container { + @include top-level-item; + } + + &.active { + > a { + font-weight: $gl-font-weight-bold; + } + + &:not(.fly-out-top-item) { + > a:not(.has-sub-items) { + background-color: $indigo-900-alpha-008; + } + } + } + } + + ul { + padding-left: 0; + list-style: none; + } + + @include media-breakpoint-down(sm) { + left: (-$contextual-sidebar-width); + } + + .nav-icon-container { + display: flex; + margin-right: 8px; + } + + a:not(.has-sub-items) + .sidebar-sub-level-items { + .fly-out-top-item { + @include fly-out-top-item($has-sub-items: false); + } + } + + a.has-sub-items + .sidebar-sub-level-items { + .fly-out-top-item { + @include fly-out-top-item($has-sub-items: true); + } + } + + @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) { + &:not(.sidebar-expanded-mobile) { + @include collapse-contextual-sidebar; + @include collapse-contextual-sidebar-content; + } + } +} + +.nav-sidebar-inner-scroll { + @include gl-h-full; + @include gl-w-full; + @include gl-overflow-auto; + + > div.context-header { + @include gl-mt-2; + + a { + @include top-level-item; + @include context-header; + } + } +} + +.sidebar-top-level-items { + @include gl-mt-2; + margin-bottom: 60px; + + .context-header a { + @include context-header; + } + + > li { + .badge.badge-pill { + @include gl-rounded-lg; + @include gl-py-1; + @include gl-px-3; + background-color: $blue-100; + color: $blue-700; + } + + &.active { + .sidebar-sub-level-items:not(.is-fly-out-only) { + display: block; + } + + .badge.badge-pill { + @include gl-font-weight-normal; // TODO: update in `theme_helper.scss` + color: $blue-700; // TODO: update in `theme_helper.scss` + } + } + } +} + +.sidebar-sub-level-items { + @include gl-py-0; + @include gl-display-none; + + &:not(.fly-out-list) { + li > a { + // The calculation formula: + // 12px: normal padding on the menu anchors + // + + // 16px: the width of the SVG icon in the top-level links + // + + // 8px: margin-right on the SVG icon in the top-level links + // = + // 36px (4.5 times the $grid-size) + padding-left: $grid-size * 4.5; + } + } +} + +.is-showing-fly-out { + @include sub-level-items-flyout; +} + +// +// COLLAPSED STATE +// + +.toggle-sidebar-button, +.close-nav-button { + @include side-panel-toggle; + background-color: $gray-50; + border-top: 1px solid $border-color; + color: $top-level-item-color; + position: fixed; + bottom: 0; + width: $contextual-sidebar-width; + + .collapse-text, + .icon-chevron-double-lg-left, + .icon-chevron-double-lg-right { + color: inherit; + } +} + +.collapse-text { + white-space: nowrap; + overflow: hidden; +} + +.sidebar-collapsed-desktop { + @include collapse-contextual-sidebar-content; +} + +// +// MOBILE PANEL +// + +.close-nav-button { + display: none; +} + +@include media-breakpoint-down(sm) { + .close-nav-button { + display: flex; + } + + .toggle-sidebar-button { + display: none; + } + + .mobile-overlay { + display: none; + + &.mobile-nav-open { + display: block; + position: fixed; + background-color: $black-transparent; + height: 100%; + width: 100%; + z-index: $zindex-dropdown-menu; + } + } +} + +// +// PANELS-SPECIFIC +// TODO: Check whether we can remove these in favor of the utility-classes +// + +.settings-avatar { + background-color: $white; + + svg { + fill: $gl-text-color-secondary; + margin: auto; + } +} + diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index a07e0b48cff..c0e9289309a 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -598,7 +598,9 @@ table.code { .diff-grid-left, .diff-grid-right { display: grid; - grid-template-columns: 50px 8px 1fr; + // Zero width column is a placeholder for the EE inline code quality diff + // see ee/.../diffs.scss for more details + grid-template-columns: 50px 8px 0 1fr; } .diff-grid-comments { @@ -628,7 +630,9 @@ table.code { .diff-grid-left, .diff-grid-right { - grid-template-columns: 50px 50px 8px 1fr; + // Zero width column is a placeholder for the EE inline code quality diff + // see ee/../diffs.scss for more details + grid-template-columns: 50px 50px 8px 0 1fr; } } } @@ -642,6 +646,10 @@ table.code { align-items: center; padding: 0 1rem; + .diff-stats-contents { + display: contents; + } + .diff-stats-group { padding: 0 0.25rem; } diff --git a/app/assets/stylesheets/framework/gfm.scss b/app/assets/stylesheets/framework/gfm.scss index 579a68ac8e4..40e11b50eba 100644 --- a/app/assets/stylesheets/framework/gfm.scss +++ b/app/assets/stylesheets/framework/gfm.scss @@ -4,7 +4,8 @@ .gfm-commit, .gfm-commit_range { - @extend .commit-sha; + @include gl-font-monospace; + font-size: 95%; } .gfm-project_member { diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 7566a533911..8639b9a7f84 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -106,7 +106,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important &.menu-expanded { @include media-breakpoint-down(xs) { - .title-container { + .hide-when-menu-expanded { display: none; } @@ -665,3 +665,26 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important color: inherit !important; } } + +.top-nav-responsive { + @include gl-display-none; + color: var(--indigo-900, $theme-indigo-900); +} + +.top-nav-responsive-open { + .hide-when-top-nav-responsive-open { + @include media-breakpoint-down(xs) { + display: none !important; + } + } + + .top-nav-responsive { + @include media-breakpoint-down(xs) { + @include gl-display-block; + } + } + + .navbar-gitlab .header-content .title-container { + flex: 0; + } +} diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss index 73a2170fc68..b4a1d9f9977 100644 --- a/app/assets/stylesheets/framework/highlight.scss +++ b/app/assets/stylesheets/framework/highlight.scss @@ -33,6 +33,10 @@ padding-left: 10px; padding-right: 10px; white-space: pre; + + &:empty::before { + content: '\200b'; + } } } } @@ -46,7 +50,6 @@ a { font-family: $monospace-font; display: block; - font-size: $code-font-size !important; white-space: nowrap; i, diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index 4f9896dd58a..e00bb83362a 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -38,8 +38,11 @@ body { } } -.content-wrapper { +.content-wrapper-margin { margin-top: $header-height; +} + +.content-wrapper { padding-bottom: 100px; } @@ -166,15 +169,8 @@ body { } .content-wrapper { - margin-top: 0; padding-bottom: 0; flex: 1; min-height: 0; } - - &.flash-shown { - .content-wrapper { - margin-top: 0; - } - } } diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index a3e8b2c245c..9fe9f9a845c 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -135,7 +135,7 @@ ul.content-list { float: right; > .control-text { - margin-right: $gl-padding-top; + margin-right: $grid-size; line-height: $list-text-height; &:last-child { @@ -148,8 +148,6 @@ ul.content-list { > .dropdown.inline { margin-right: $grid-size; display: inline-block; - margin-top: 3px; - margin-bottom: 4px; &.btn-ldap-override { @include media-breakpoint-up(sm) { diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 1e2fc1445e8..fcf86680bb3 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -446,3 +446,19 @@ } } } + +@mixin side-panel-toggle { + transition: width $sidebar-transition-duration; + height: $toggle-sidebar-height; + padding: 0 $gl-padding; + background-color: $gray-light; + border: 0; + color: $gl-text-color-secondary; + display: flex; + align-items: center; + + &:hover { + background-color: $border-color; + color: $gl-text-color; + } +} diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index cb8a0c40f7f..e35feb8c62d 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -232,3 +232,8 @@ } } } + +.toggle-right-sidebar-button { + @include side-panel-toggle; + border-bottom: 1px solid $border-color; +} diff --git a/app/assets/stylesheets/framework/system_messages.scss b/app/assets/stylesheets/framework/system_messages.scss index 10796f319bf..437915d5034 100644 --- a/app/assets/stylesheets/framework/system_messages.scss +++ b/app/assets/stylesheets/framework/system_messages.scss @@ -52,7 +52,7 @@ top: $system-header-height + $header-height; } - .content-wrapper { + .content-wrapper-margin { margin-top: $system-header-height + $header-height; } @@ -90,7 +90,7 @@ bottom: $system-footer-height; } - .content-wrapper { + .content-wrapper-margin { margin-bottom: 16px; } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index bfb21d7112b..d3976cfa8c7 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -9,7 +9,7 @@ $sidebar-transition-duration: 0.3s; $sidebar-breakpoint: 1024px; $default-transition-duration: 0.15s; $contextual-sidebar-width: 220px; -$contextual-sidebar-collapsed-width: 50px; +$contextual-sidebar-collapsed-width: 48px; $toggle-sidebar-height: 48px; /** @@ -573,6 +573,9 @@ $inactive-badge-background: rgba($black, 0.08); $sidebar-toggle-height: 60px; $sidebar-toggle-width: 40px; $sidebar-milestone-toggle-bottom-margin: 10px; +$sidebar-avatar-size: 32px; +$sidebar-top-item-lr-margin: 4px; +$sidebar-top-item-tb-margin: 1px; /* * Buttons @@ -714,6 +717,18 @@ $job-line-number-margin: 43px; $job-arrow-margin: 55px; /* + * Calendar + */ +// See https://gitlab.com/gitlab-org/gitlab/-/issues/332150 to align with Pajamas Design System +$calendar-activity-colors: ( + #ededed, + #acd5f2, + #7fa8c9, + #527ba0, + #254e77, +); + +/* * Commit Page */ $commit-max-width-marker-color: rgba(0, 0, 0, 0); diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss index d6523265a43..2d180f49f97 100644 --- a/app/assets/stylesheets/highlight/themes/dark.scss +++ b/app/assets/stylesheets/highlight/themes/dark.scss @@ -131,6 +131,7 @@ $dark-il: #de935f; .diff-td.diff-line-num.hll:not(.empty-cell), .diff-td.line-coverage.hll:not(.empty-cell), + .diff-td.line-codequality.hll:not(.empty-cell), .diff-td.line_content.hll:not(.empty-cell), td.diff-line-num.hll:not(.empty-cell), td.line-coverage.hll:not(.empty-cell), @@ -145,6 +146,7 @@ $dark-il: #de935f; .diff-line-num.new, .line-coverage.new, + .line-codequality.new, .line_content.new { @include diff-background($dark-new-bg, $dark-new-idiff, $dark-border); @@ -156,6 +158,7 @@ $dark-il: #de935f; .diff-line-num.old, .line-coverage.old, + .line-codequality.old, .line_content.old { @include diff-background($dark-old-bg, $dark-old-idiff, $dark-border); diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss index 027f2fa63d3..c0931188cc3 100644 --- a/app/assets/stylesheets/highlight/themes/monokai.scss +++ b/app/assets/stylesheets/highlight/themes/monokai.scss @@ -132,6 +132,7 @@ $monokai-gh: #75715e; .diff-td.diff-line-num.hll:not(.empty-cell), .diff-td.line-coverage.hll:not(.empty-cell), + .diff-td.line-codequality.hll:not(.empty-cell), .diff-td.line_content.hll:not(.empty-cell), td.diff-line-num.hll:not(.empty-cell), td.line-coverage.hll:not(.empty-cell), @@ -146,6 +147,7 @@ $monokai-gh: #75715e; .diff-line-num.new, .line-coverage.new, + .line-codequality.new, .line_content.new { @include diff-background($monokai-new-bg, $monokai-new-idiff, $monokai-diff-border); @@ -157,6 +159,7 @@ $monokai-gh: #75715e; .diff-line-num.old, .line-coverage.old, + .line-codequality.old, .line_content.old { @include diff-background($monokai-old-bg, $monokai-old-idiff, $monokai-diff-border); diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss index 5002726bbc5..ef7eb244b61 100644 --- a/app/assets/stylesheets/highlight/themes/none.scss +++ b/app/assets/stylesheets/highlight/themes/none.scss @@ -56,7 +56,10 @@ .line-coverage { @include line-coverage-border-color($green-500, $orange-500); + } + .line-coverage, + .line-codequality { &.old, &.new { background-color: $white-normal; diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss index cd0cb65e4e2..8f09a178af1 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss @@ -135,6 +135,7 @@ $solarized-dark-il: #2aa198; .diff-td.diff-line-num.hll:not(.empty-cell), .diff-td.line-coverage.hll:not(.empty-cell), + .diff-td.line-codequality.hll:not(.empty-cell), .diff-td.line_content.hll:not(.empty-cell), td.diff-line-num.hll:not(.empty-cell), td.line-coverage.hll:not(.empty-cell), @@ -156,6 +157,7 @@ $solarized-dark-il: #2aa198; .diff-line-num.new, .line-coverage.new, + .line-codequality.new, .line_content.new { @include diff-background($solarized-dark-new-bg, $solarized-dark-new-idiff, $solarized-dark-border); @@ -167,6 +169,7 @@ $solarized-dark-il: #2aa198; .diff-line-num.old, .line-coverage.old, + .line-codequality.old, .line_content.old { @include diff-background($solarized-dark-old-bg, $solarized-dark-old-idiff, $solarized-dark-border); diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss index 77e88053424..747cc639f91 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-light.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss @@ -142,6 +142,7 @@ $solarized-light-il: #2aa198; .diff-td.diff-line-num.hll:not(.empty-cell), .diff-td.line-coverage.hll:not(.empty-cell), + .diff-td.line-codequality.hll:not(.empty-cell), .diff-td.line_content.hll:not(.empty-cell), td.diff-line-num.hll:not(.empty-cell), td.line-coverage.hll:not(.empty-cell), @@ -156,6 +157,7 @@ $solarized-light-il: #2aa198; .diff-line-num.new, .line-coverage.new, + .line-codequality.new, .line_content.new { @include diff-background($solarized-light-new-bg, $solarized-light-new-idiff, $solarized-light-border); @@ -175,6 +177,7 @@ $solarized-light-il: #2aa198; .diff-line-num.old, .line-coverage.old, + .line-codequality.old, .line_content.old { @include diff-background($solarized-light-old-bg, $solarized-light-old-idiff, $solarized-light-border); diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss index 18b2f0a5d58..86b01926dd7 100644 --- a/app/assets/stylesheets/highlight/white_base.scss +++ b/app/assets/stylesheets/highlight/white_base.scss @@ -219,7 +219,10 @@ pre.code, .line-coverage { @include line-coverage-border-color($green-400, $red-400); + } + .line-coverage, + .line-codequality { &.old { background-color: $line-removed; } diff --git a/app/assets/stylesheets/mailer.scss b/app/assets/stylesheets/mailer.scss index 4f76deeb991..9d889f111dd 100644 --- a/app/assets/stylesheets/mailer.scss +++ b/app/assets/stylesheets/mailer.scss @@ -145,6 +145,27 @@ table.content { padding: 15px 5px; text-align: center; } + + td.mailer-align-left { + vertical-align: top; + padding: 16px 32px; + text-align: left; + + h4 { + margin: 0; + } + + ul { + list-style: none; + line-height: 1.6; + padding-left: 0; + margin: 8px 0 16px; + } + + .mailer-icon { + margin-bottom: -1px; + } + } } tr.footer td { diff --git a/app/assets/stylesheets/page_bundles/cycle_analytics.scss b/app/assets/stylesheets/page_bundles/cycle_analytics.scss index 2742c95c6e1..2248d95ae24 100644 --- a/app/assets/stylesheets/page_bundles/cycle_analytics.scss +++ b/app/assets/stylesheets/page_bundles/cycle_analytics.scss @@ -30,32 +30,12 @@ .col-headers { ul { - @include clearfix; margin: 0; padding: 0; } li { - display: inline-block; - float: left; line-height: 50px; - width: 20%; - } - - .stage-header { - width: 20.5%; - } - - .median-header { - width: 19.5%; - } - - .event-header { - width: 45%; - } - - .total-time-header { - width: 15%; } } @@ -120,7 +100,6 @@ } li { - @include clearfix; list-style-type: none; } @@ -169,7 +148,6 @@ .events-description { line-height: 65px; - padding: 0 $gl-padding; } .events-info { @@ -178,7 +156,6 @@ } .stage-events { - width: 60%; min-height: 467px; } @@ -190,8 +167,8 @@ .stage-event-item { @include clearfix; list-style-type: none; - padding: 0 0 $gl-padding; - margin: 0 $gl-padding $gl-padding; + padding-bottom: $gl-padding; + margin-bottom: $gl-padding; border-bottom: 1px solid var(--gray-50, $gray-50); &:last-child { diff --git a/app/assets/stylesheets/page_bundles/escalation_policies.scss b/app/assets/stylesheets/page_bundles/escalation_policies.scss new file mode 100644 index 00000000000..f188dde1183 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/escalation_policies.scss @@ -0,0 +1,37 @@ +@import 'mixins_and_variables_and_functions'; + +.escalation-policy-modal { + width: 640px; +} + +.rule-control { + width: 240px; +} + +.rule-close-icon { + right: 1rem; +} + +$stroke-size: 1px; + +.right-arrow { + @include gl-relative; + @include gl-mx-5; + @include gl-display-inline-block; + @include gl-vertical-align-middle; + height: $stroke-size; + background-color: var(--gray-900, $gray-900); + min-width: $gl-spacing-scale-7; + + &-head { + @include gl-absolute; + top: -2*$stroke-size; + left: calc(100% - #{5*$stroke-size}); + @include gl-display-inline-block; + @include gl-p-1; + @include gl-border-solid; + border-width: 0 $stroke-size $stroke-size 0; + border-color: var(--gray-900, $gray-900); + transform: rotate(-45deg); + } +} diff --git a/app/assets/stylesheets/page_bundles/group.scss b/app/assets/stylesheets/page_bundles/group.scss new file mode 100644 index 00000000000..38dd07f617c --- /dev/null +++ b/app/assets/stylesheets/page_bundles/group.scss @@ -0,0 +1,107 @@ +@import 'page_bundles/mixins_and_variables_and_functions'; + +.group-home-panel { + margin-top: $gl-padding; + margin-bottom: $gl-padding; + + .home-panel-avatar { + width: $home-panel-title-row-height; + height: $home-panel-title-row-height; + flex-shrink: 0; + flex-basis: $home-panel-title-row-height; + } + + .home-panel-title { + font-size: 20px; + line-height: $gl-line-height-24; + font-weight: bold; + + .icon { + vertical-align: -1px; + } + + .home-panel-topic-list { + font-size: $gl-font-size; + font-weight: $gl-font-weight-normal; + + .icon { + position: relative; + top: 3px; + margin-right: $gl-padding-4; + } + } + } + + .home-panel-title-row { + @include media-breakpoint-down(sm) { + .home-panel-avatar { + width: $home-panel-avatar-mobile-size; + height: $home-panel-avatar-mobile-size; + flex-basis: $home-panel-avatar-mobile-size; + + .avatar { + font-size: 20px; + line-height: 46px; + } + } + + .home-panel-title { + margin-top: 4px; + margin-bottom: 2px; + font-size: $gl-font-size; + line-height: $gl-font-size-large; + } + + .home-panel-topic-list, + .home-panel-metadata { + font-size: $gl-font-size-small; + } + } + } + + .home-panel-metadata { + font-weight: normal; + font-size: 14px; + line-height: $gl-btn-line-height; + } + + .home-panel-description { + @include media-breakpoint-up(md) { + font-size: $gl-font-size-large; + } + } +} + +.group-nav-container .nav-controls { + .group-filter-form { + flex: 1 1 auto; + margin-right: $gl-padding-8; + } + + .dropdown-menu-right { + margin-top: 0; + } + + @include media-breakpoint-down(sm) { + .dropdown, + .dropdown .dropdown-toggle, + .btn-success { + display: block; + } + + .group-filter-form, + .dropdown { + margin-bottom: 10px; + margin-right: 0; + } + + &, + .group-filter-form, + .group-filter-form-field, + .dropdown, + .dropdown .dropdown-toggle, + .btn-success { + width: 100%; + } + } +} diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss index ace91d197b6..1081dd8f6d8 100644 --- a/app/assets/stylesheets/page_bundles/pipelines.scss +++ b/app/assets/stylesheets/page_bundles/pipelines.scss @@ -116,7 +116,7 @@ position: absolute; right: -7px; top: 11px; - border-bottom: 2px solid $border-color; + border-bottom: 2px solid var(--border-color, $border-color); } } diff --git a/app/assets/stylesheets/page_bundles/project.scss b/app/assets/stylesheets/page_bundles/project.scss new file mode 100644 index 00000000000..7f044f081d4 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/project.scss @@ -0,0 +1,82 @@ +@import 'page_bundles/mixins_and_variables_and_functions'; + +.project-home-panel { + .home-panel-avatar { + flex-basis: $home-panel-title-row-height; + } + + .home-panel-title { + .icon { + vertical-align: -1px; + } + + .home-panel-topic-list { + .icon { + top: 3px; + } + } + } + + .home-panel-title-row { + @include media-breakpoint-down(sm) { + .home-panel-avatar { + width: $home-panel-avatar-mobile-size; + height: $home-panel-avatar-mobile-size; + flex-basis: $home-panel-avatar-mobile-size; + + .avatar { + font-size: 20px; + line-height: 46px; + } + } + + .home-panel-title { + margin-top: 4px; + margin-bottom: 2px; + font-size: $gl-font-size; + line-height: $gl-font-size-large; + } + } + } + + .home-panel-description { + @include media-breakpoint-up(md) { + font-size: $gl-font-size-large; + } + } +} + +.project-repo-buttons { + .btn { + svg { + fill: $gray-500; + } + } + + .download-button { + @include media-breakpoint-down(md) { + margin-left: 0; + } + } + + .project-clone-holder { + display: inline-block; + margin: $gl-padding 0 0; + + input { + height: $input-height; + } + } + + .clone-options-dropdown { + min-width: 240px; + + .dropdown-menu-inner-content { + min-width: 320px; + } + } + + .mobile-git-clone { + margin-top: $gl-padding-8; + } +} diff --git a/app/assets/stylesheets/page_bundles/wiki.scss b/app/assets/stylesheets/page_bundles/wiki.scss index 9f0fa137910..5525ad66e42 100644 --- a/app/assets/stylesheets/page_bundles/wiki.scss +++ b/app/assets/stylesheets/page_bundles/wiki.scss @@ -1,4 +1,5 @@ @import 'mixins_and_variables_and_functions'; +@import 'highlight.js/scss/a11y-light'; .title .edit-wiki-header { width: 780px; diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index 2ec2da9241b..ca6c9b9a073 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -1,7 +1,3 @@ -.milestone-row { - @include str-truncated(90%); -} - .dashboard .side .card .card-header .input-group { .form-control { height: 42px; @@ -49,195 +45,6 @@ color: $gray-700; } -.group-nav-container .nav-controls { - .group-filter-form { - flex: 1 1 auto; - margin-right: $gl-padding-8; - } - - .dropdown-menu-right { - margin-top: 0; - } - - @include media-breakpoint-down(sm) { - .dropdown, - .dropdown .dropdown-toggle, - .btn-success { - display: block; - } - - .group-filter-form, - .dropdown { - margin-bottom: 10px; - margin-right: 0; - } - - &, - .group-filter-form, - .group-filter-form-field, - .dropdown, - .dropdown .dropdown-toggle, - .btn-success { - width: 100%; - } - } -} - -.group-home-panel { - margin-top: $gl-padding; - margin-bottom: $gl-padding; - - .home-panel-avatar { - width: $home-panel-title-row-height; - height: $home-panel-title-row-height; - flex-shrink: 0; - flex-basis: $home-panel-title-row-height; - } - - .home-panel-title { - font-size: 20px; - line-height: $gl-line-height-24; - font-weight: bold; - - .icon { - vertical-align: -1px; - } - - .home-panel-topic-list { - font-size: $gl-font-size; - font-weight: $gl-font-weight-normal; - - .icon { - position: relative; - top: 3px; - margin-right: $gl-padding-4; - } - } - } - - .home-panel-title-row { - @include media-breakpoint-down(sm) { - .home-panel-avatar { - width: $home-panel-avatar-mobile-size; - height: $home-panel-avatar-mobile-size; - flex-basis: $home-panel-avatar-mobile-size; - - .avatar { - font-size: 20px; - line-height: 46px; - } - } - - .home-panel-title { - margin-top: 4px; - margin-bottom: 2px; - font-size: $gl-font-size; - line-height: $gl-font-size-large; - } - - .home-panel-topic-list, - .home-panel-metadata { - font-size: $gl-font-size-small; - } - } - } - - .home-panel-metadata { - font-weight: normal; - font-size: 14px; - line-height: $gl-btn-line-height; - } - - .home-panel-description { - @include media-breakpoint-up(md) { - font-size: $gl-font-size-large; - } - } -} - -.home-panel-buttons { - .home-panel-action-button { - vertical-align: top; - } - - .new-project-subgroup { - .dropdown-primary { - min-width: 115px; - } - - .dropdown-toggle { - .dropdown-btn-icon { - pointer-events: none; - color: inherit; - margin-left: 0; - } - } - - .dropdown-menu { - min-width: 280px; - margin-top: 2px; - } - - li:not(.divider) { - padding: 0; - - &.droplab-item-selected { - .icon-container { - .list-item-checkmark { - visibility: visible; - } - } - } - - .menu-item { - padding: 8px 4px; - - &:hover { - background-color: $gray-darker; - color: $gray-900; - } - } - - .icon-container { - float: left; - padding-left: 6px; - - .list-item-checkmark { - visibility: hidden; - } - } - - .description { - font-size: 14px; - - strong { - display: block; - font-weight: $gl-font-weight-bold; - } - } - - @include media-breakpoint-down(sm) { - display: flex; - align-items: flex-start; - - .dropdown-primary { - flex: 1; - } - - .dropdown-toggle { - width: auto; - } - - .dropdown-menu { - width: 100%; - max-width: inherit; - min-width: inherit; - } - } - } - } -} - .card { .shared_runners_limit_under_quota { color: $green-500; @@ -269,28 +76,10 @@ } } -.user-settings-pipeline-quota { - margin-top: $gl-padding; - - .pipeline-quota { - border-top: 0; - } -} - table.pipeline-project-metrics tr td { padding: $gl-padding; } -.mattermost-team-name { - color: $gl-text-color-secondary; -} - -.mattermost-info { - display: block; - color: $gl-text-color-secondary; - margin-top: 10px; -} - .explore-groups.landing { .inner-content { padding: 0; diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 0437fa19752..1bc6dfbd84a 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -67,10 +67,6 @@ .emoji-block { padding: $gl-padding-4 0; - - @include media-breakpoint-down(md) { - padding: $gl-padding-8 0; - } } } @@ -271,11 +267,6 @@ .value { line-height: 1; - - .assign-yourself { - margin-top: 10px; - display: block; - } } .issuable-sidebar { @@ -292,10 +283,6 @@ } } - .assign-yourself .btn-link { - padding-left: 0; - } - .light { font-weight: $gl-font-weight-normal; } diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 97c8182bab8..461d6a29b3a 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -130,10 +130,6 @@ ul.related-merge-requests > li { &:not(:only-child) { margin-right: $gl-padding-8; } - - @include media-breakpoint-down(md) { - margin-top: $gl-padding-8; - } } } @@ -154,10 +150,6 @@ ul.related-merge-requests > li { .btn-group:not(.hidden) { display: flex; - - @include media-breakpoint-down(md) { - margin-top: $gl-padding-8; - } } .js-create-merge-request { diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index 9d437531e6d..b537a46a6f2 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -106,6 +106,10 @@ width: 100%; } } + + .omniauth-btn { + width: 100%; + } } .new-session-tabs { diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 36d39c1a613..1abaff40bc9 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -43,8 +43,6 @@ $tabs-holder-z-index: 250; } .mr-widget-section { - border-radius: $border-radius-default $border-radius-default 0 0; - .code-text { flex: 1; } @@ -88,7 +86,6 @@ $tabs-holder-z-index: 250; .mr-section-container { border: 1px solid $border-color; border-radius: $border-radius-default; - border-top: 0; background: var(--white, $white); } @@ -110,11 +107,15 @@ $tabs-holder-z-index: 250; border-radius: $border-radius-default; } - .mr-widget-section, + .mr-widget-section:not(:first-child), .mr-widget-footer { border-top: solid 1px $border-color; } + .mr-widget-alert-container + .mr-widget-section { + border-top: 0; + } + .mr-fast-forward-message { padding-left: $gl-padding-50; padding-bottom: $gl-padding; @@ -525,9 +526,7 @@ $tabs-holder-z-index: 250; .mr-source-target { flex-wrap: wrap; - border-radius: $border-radius-default; padding: $gl-padding; - border: 1px solid $border-color; background: var(--white, $white); min-height: $mr-widget-min-height; @@ -1027,3 +1026,13 @@ $tabs-holder-z-index: 250; vertical-align: middle; } } + +.mr-widget-alert-container { + $radius: $border-radius-default - 1px; + + border-radius: $radius $radius 0 0; + + .gl-alert:not(:last-child) { + margin-bottom: 1px; + } +} diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index 6a2fa2ee7a1..b52a3c445b5 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -5,6 +5,12 @@ } .avatar-image { + margin-bottom: $grid-size; + + .avatar { + float: none; + } + @include media-breakpoint-up(sm) { float: left; margin-bottom: 0; diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index dfd64d0773c..c330e0709a6 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -79,91 +79,10 @@ } } -.project-home-panel { - .home-panel-avatar { - flex-basis: $home-panel-title-row-height; - } - - .home-panel-title { - .icon { - vertical-align: -1px; - } - - .home-panel-topic-list { - .icon { - top: 3px; - } - } - } - - .home-panel-title-row { - @include media-breakpoint-down(sm) { - .home-panel-avatar { - width: $home-panel-avatar-mobile-size; - height: $home-panel-avatar-mobile-size; - flex-basis: $home-panel-avatar-mobile-size; - - .avatar { - font-size: 20px; - line-height: 46px; - } - } - - .home-panel-title { - margin-top: 4px; - margin-bottom: 2px; - font-size: $gl-font-size; - line-height: $gl-font-size-large; - } - } - } - - .home-panel-description { - @include media-breakpoint-up(md) { - font-size: $gl-font-size-large; - } - } -} - .nav > .project-buttons { margin-top: 0; } -.project-repo-buttons { - .btn { - svg { - fill: $gray-500; - } - } - - .download-button { - @include media-breakpoint-down(md) { - margin-left: 0; - } - } - - .project-clone-holder { - display: inline-block; - margin: $gl-padding 0 0; - - input { - height: $input-height; - } - } - - .clone-options-dropdown { - min-width: 240px; - - .dropdown-menu-inner-content { - min-width: 320px; - } - } - - .mobile-git-clone { - margin-top: $gl-padding-8; - } -} - .save-project-loader { margin-top: 50px; margin-bottom: 50px; @@ -855,13 +774,6 @@ pre.light-well { } } -.project-tip-command { - > .input-group-prepend:first-child, - > .input-group-append:first-child { - width: auto; - } -} - .protected-branches-list, .protected-tags-list { margin-bottom: 30px; @@ -887,8 +799,7 @@ pre.light-well { } } -.project-refs-form .dropdown-menu, -.dropdown-menu-projects { +.project-refs-form .dropdown-menu { width: 300px; @include media-breakpoint-up(sm) { diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index cd99c667001..5fbb2e6443f 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -45,7 +45,7 @@ input[type='checkbox']:hover { margin: 0 8px; form { - @extend .form-control; + display: block; margin: 0; padding: 4px; width: $search-input-width; @@ -139,7 +139,6 @@ input[type='checkbox']:hover { &.search-active { form { - @extend .form-control:focus; border-color: $blue-300; box-shadow: none; @@ -297,6 +296,16 @@ input[type='checkbox']:hover { @include str-truncated(10em); } +.global-search-dropdown-menu { + width: 100% !important; + max-width: 400px; + + @include media-breakpoint-up(md) { + // This is larger than the container so width: 100% doesn't work. + width: 400px !important; + } +} + // Disable webkit input icons, link to solution: https://stackoverflow.com/questions/9421551/how-do-i-remove-all-default-webkit-search-field-styling /* stylelint-disable property-no-vendor-prefix */ input[type='search']::-webkit-search-decoration, diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index a371aa37e07..c6198315606 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -10,6 +10,10 @@ color: $gl-text-color-secondary; } + .tree-ref-holder { + margin-right: 15px; + } + @include media-breakpoint-up(sm) { display: flex; @@ -28,7 +32,6 @@ .tree-ref-holder { float: left; - margin-right: 15px; } .tree-ref-target-holder { @@ -44,8 +47,11 @@ } @include media-breakpoint-down(xs) { + .tree-ref-container { + justify-content: space-between; + } + .repo-breadcrumb { - margin-top: 10px; position: relative; .dropdown-menu { diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss index bcc3c35e00e..f2874e67796 100644 --- a/app/assets/stylesheets/performance_bar.scss +++ b/app/assets/stylesheets/performance_bar.scss @@ -11,47 +11,40 @@ height: $performance-bar-height; background: $black; line-height: $performance-bar-height; - color: $gray-300; + color: $gray-100; select { - color: $white; width: 200px; } input { - color: $gray-300; width: $input-short-width - 60px; } + select, + input { + color: inherit; + background-color: inherit; + } + + option { + color: initial; + } + &.disabled { display: none; } &.production { background-color: $perf-bar-production; - - select, - input { - background: $perf-bar-production; - } } &.staging { background-color: $perf-bar-staging; - - select, - input { - background: $perf-bar-staging; - } } &.development { background-color: $perf-bar-development; - - select, - input { - background: $perf-bar-development; - } } // UI Elements @@ -61,7 +54,6 @@ padding: 4px 6px; font-family: Consolas, 'Liberation Mono', Courier, monospace; line-height: 1; - 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; @@ -135,3 +127,7 @@ #modal-peek-pg-queries-content { color: $black; } + +html.with-performance-bar .nav-sidebar { + top: $header-height + $performance-bar-height; +} diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss index 1d0333d1e2f..ab86a2f69dd 100644 --- a/app/assets/stylesheets/print.scss +++ b/app/assets/stylesheets/print.scss @@ -65,6 +65,6 @@ a[href]::after { margin-top: 0; } -.content-wrapper { +.content-wrapper-margin { margin-top: 0; } diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss index e5d5ed0d48f..ad040f65f3c 100644 --- a/app/assets/stylesheets/snippets.scss +++ b/app/assets/stylesheets/snippets.scss @@ -45,7 +45,6 @@ .blob-content { pre { - height: 100%; padding: 10px; border: 0; border-radius: 0; diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index 9f7a8860e4d..c6f0b3a2ba7 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -1,4 +1,22 @@ +// DO NOT EDIT! This is auto-generated from "yarn run generate:startup_css" +// Please see the feedback issue for more details and help: +// https://gitlab.com/gitlab-org/gitlab/-/issues/331812 @charset "UTF-8"; +body.gl-dark { + --gray-50: #303030; + --gray-100: #404040; + --gray-950: #fff; + --green-100: #0d532a; + --green-400: #108548; + --green-700: #91d4a8; + --blue-400: #1f75cb; + --orange-400: #ab6100; + --gl-text-color: #fafafa; + --border-color: #4f4f4f; +} +:root { + --white: #333; +} *, *::before, *::after { @@ -8,68 +26,45 @@ html { font-family: sans-serif; line-height: 1.15; } - header, nav, section { +aside, +header { 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-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; + background-color: #1f1f1f; } -h1, h2, h3 { +h1 { 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]) { +a:not([href]):not([class]) { 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; @@ -78,18 +73,11 @@ svg { overflow: hidden; vertical-align: middle; } -table { - border-collapse: collapse; -} -th { - text-align: inherit; -} button { border-radius: 0; } input, -button, -textarea { +button { margin: 0; font-family: inherit; font-size: inherit; @@ -102,103 +90,34 @@ input { button { text-transform: none; } +[role="button"] { + cursor: pointer; +} button:not(:disabled), -[type="button"]:not(:disabled), -[type="reset"]:not(:disabled) { +[type="button"]:not(:disabled) { cursor: pointer; } button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner { +[type="button"]::-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 { +h1 { margin-bottom: 0.25rem; font-weight: 600; line-height: 1.2; color: #fafafa; } -h1, .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; @@ -206,48 +125,7 @@ pre code { 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 { +.form-control { display: block; width: 100%; height: 34px; @@ -256,24 +134,27 @@ pre code { font-weight: 400; line-height: 1.5; color: #fafafa; - background-color: #4f4f4f; + background-color: #333; background-clip: padding-box; - border: 1px solid #4f4f4f; + border: 1px solid #404040; border-radius: 0.25rem; } - @media (prefers-reduced-motion: reduce) { } - .search form:-moz-focusring { +.form-control:-moz-focusring { color: transparent; text-shadow: 0 0 0 #fafafa; } - .search form::placeholder { - color: #ccc; +.form-control::-ms-input-placeholder { + color: #bfbfbf; + opacity: 1; +} +.form-control::placeholder { + color: #bfbfbf; opacity: 1; } - .search form:disabled { - background-color: #2e2e2e; +.form-control:disabled { + background-color: #303030; opacity: 1; } .form-inline { @@ -281,9 +162,8 @@ pre code { flex-flow: row wrap; align-items: center; } - @media (min-width: 576px) { - .form-inline .search form, .search .form-inline form { + .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; @@ -295,7 +175,7 @@ pre code { color: #fafafa; text-align: center; vertical-align: middle; - cursor: pointer; + -moz-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; @@ -304,26 +184,24 @@ pre code { line-height: 20px; border-radius: 0.25rem; } - @media (prefers-reduced-motion: reduce) { } -.btn.disabled, .btn:disabled { +.btn:disabled { opacity: 0.65; } -a.btn.disabled { - pointer-events: none; +.btn:not(:disabled):not(.disabled) { + cursor: pointer; } .collapse:not(.show) { display: none; } - .dropdown { position: relative; } - .dropdown-menu-toggle { +.dropdown-menu-toggle { white-space: nowrap; } - .dropdown-menu-toggle::after { +.dropdown-menu-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; @@ -333,7 +211,7 @@ a.btn.disabled { border-bottom: 0; border-left: 0.3em solid transparent; } - .dropdown-menu-toggle:empty::after { +.dropdown-menu-toggle:empty::after { margin-left: 0; } .dropdown-menu { @@ -355,19 +233,6 @@ a.btn.disabled { 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; @@ -383,7 +248,6 @@ a.btn.disabled { justify-content: space-between; padding: 0.25rem 0.5rem; } -.navbar .container, .navbar .container-fluid { display: flex; flex-wrap: wrap; @@ -414,15 +278,12 @@ a.btn.disabled { 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; @@ -434,7 +295,6 @@ a.btn.disabled { .navbar-expand-sm .navbar-nav .dropdown-menu { position: absolute; } - .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { flex-wrap: nowrap; } @@ -446,17 +306,6 @@ a.btn.disabled { 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; @@ -468,7 +317,6 @@ a.btn.disabled { vertical-align: baseline; border-radius: 0.25rem; } - @media (prefers-reduced-motion: reduce) { } .badge:empty { @@ -483,66 +331,8 @@ a.btn.disabled { 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: ""; +.rounded-circle { + border-radius: 50% !important; } .d-none { display: none !important; @@ -553,19 +343,19 @@ a.close.disabled { .d-block { display: block !important; } - @media (min-width: 576px) { .d-sm-none { display: none !important; } + .d-sm-inline-block { + display: inline-block !important; + } } - @media (min-width: 768px) { .d-md-block { display: block !important; } } - @media (min-width: 992px) { .d-lg-none { display: none !important; @@ -574,18 +364,11 @@ a.close.disabled { 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; @@ -600,72 +383,57 @@ a.close.disabled { .m-auto { margin: auto !important; } -.text-nowrap { - white-space: nowrap !important; +.gl-button { + display: inline-flex; } -.visible { - visibility: visible !important; +.gl-button:not(.btn-link):active { + text-decoration: none; } - .search form.focus { +.gl-button.gl-button { + border-width: 0; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 0.75rem; + padding-right: 0.75rem; + background-color: transparent; + line-height: 1rem; 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; + fill: currentColor; + box-shadow: inset 0 0 0 1px #525252; + justify-content: center; 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; + font-size: 0.875rem; + border-radius: 0.25rem; +} +.gl-button.gl-button.btn-default { + background-color: #333; +} +.gl-button.gl-button.btn-default:active, +.gl-button.gl-button.btn-default.active { + box-shadow: inset 0 0 0 2px #bfbfbf, 0 0 0 1px rgba(51, 51, 51, 0.4), + 0 0 0 4px rgba(66, 143, 220, 0.48); outline: none; + background-color: #404040; } -body, .search form, +body, +.form-control, .search form { font-size: 0.875rem; } button, -html [type='button'], -[type='reset'], -[role='button'] { +html [type="button"], +[role="button"] { cursor: pointer; } -h1, -.h1, -h2, -.h2, -h3, -.h3 { +h1 { 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; + color: #63a6e9; } .hidden { display: none !important; @@ -674,7 +442,7 @@ table { .hide { display: none; } - .dropdown-menu-toggle::after { +.dropdown-menu-toggle::after { display: none; } .badge:not(.gl-badge) { @@ -684,13 +452,16 @@ table { font-weight: 400; display: inline-block; } -pre code { - white-space: pre-wrap; +.divider { + height: 0; + margin: 4px 0; + overflow: hidden; + border-top: 1px solid #404040; } .toggle-sidebar-button .collapse-text, .toggle-sidebar-button .icon-chevron-double-lg-left, .toggle-sidebar-button .icon-chevron-double-lg-right { - color: #bababa; + color: #999; } svg { vertical-align: baseline; @@ -701,42 +472,23 @@ html { 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; + border-color: #404040; color: #fafafa; color: #fafafa; white-space: nowrap; } -.btn:active, .btn.active { - box-shadow: rgba(0, 0, 0, 0.16); +.btn:active { + background-color: #303030; + box-shadow: none; +} +.btn:active, +.btn.active { background-color: #444; border-color: #fafafa; color: #fafafa; @@ -745,112 +497,44 @@ body { height: 15px; width: 15px; } -.btn svg:not(:last-child), -.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, 0.07); - color: #dfdfdf; + background-color: rgba(255, 255, 255, 0.07); + color: #dbdbdb; 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; +.gl-font-sm { + font-size: 12px; } .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 { +.dropdown-menu-toggle { padding: 6px 8px 6px 10px; background-color: #333; color: #fafafa; font-size: 14px; text-align: left; - border: 1px solid #4f4f4f; + border: 1px solid #404040; border-radius: 0.25rem; white-space: nowrap; } - .no-outline.dropdown-menu-toggle { +.no-outline.dropdown-menu-toggle { outline: 0; } - .dropdown-menu-toggle .fa { - color: #c4c4c4; -} -.dropdown-menu-toggle { +.dropdown-menu-toggle.dropdown-menu-toggle { + justify-content: flex-start; + overflow: hidden; padding-right: 25px; position: relative; - width: 160px; text-overflow: ellipsis; - overflow: hidden; -} -.dropdown-menu-toggle .fa { - position: absolute; + width: 160px; } .dropdown-menu { display: none; @@ -866,7 +550,7 @@ table a code { font-weight: 400; padding: 8px 0; background-color: #333; - border: 1px solid #4f4f4f; + border: 1px solid #404040; border-radius: 0.25rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } @@ -897,156 +581,56 @@ table a code { text-align: left; width: 100%; } +.dropdown-menu li > a:active, +.dropdown-menu li button:active { + background-color: #4f4f4f; + color: #fafafa; + outline: 0; + text-decoration: none; +} .dropdown-menu .divider { height: 1px; margin: 0.25rem 0; padding: 0; - background-color: #4f4f4f; + background-color: #404040; } .dropdown-menu .badge.badge-pill + span:not(.badge):not(.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; } + .navbar-gitlab li.dropdown.user-counter { + margin-left: 8px !important; + } + .navbar-gitlab li.dropdown.user-counter > a { + padding: 0 4px !important; + } 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; + background-color: #333; } - .search form { +.form-control { 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; +.form-control::-ms-input-placeholder { + color: #868686; } -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; - box-shadow: 0 1px 0 0 var(--gray-100); -} -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; +.form-control::placeholder { + color: #868686; } .navbar-gitlab { padding: 0 16px; @@ -1054,7 +638,6 @@ body.gl-dark .navbar-gitlab .search form { margin-bottom: 0; min-height: 40px; border: 0; - border-bottom: 1px solid #4f4f4f; position: fixed; top: 0; left: 0; @@ -1104,9 +687,6 @@ body.gl-dark .navbar-gitlab .search form { .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; @@ -1114,9 +694,6 @@ body.gl-dark .navbar-gitlab .search form { 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; } @@ -1125,7 +702,6 @@ body.gl-dark .navbar-gitlab .search form { border-top: 0; padding: 0; } - @media (max-width: 575.98px) { .navbar-gitlab .navbar-collapse { flex: 1 1 auto; @@ -1134,7 +710,6 @@ body.gl-dark .navbar-gitlab .search form { .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; @@ -1157,7 +732,10 @@ body.gl-dark .navbar-gitlab .search form { 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; @@ -1165,11 +743,14 @@ body.gl-dark .navbar-gitlab .search form { flex-direction: row; } } -.navbar-gitlab .container-fluid .navbar-nav li .badge.badge-pill { +.navbar-gitlab + .container-fluid + .navbar-nav + li + .badge.badge-pill:not(.merge-request-badge) { box-shadow: none; font-weight: 600; } - @media (max-width: 575.98px) { .navbar-gitlab .container-fluid .nav > li.header-user { padding-left: 10px; @@ -1181,7 +762,6 @@ body.gl-dark .navbar-gitlab .search form { padding: 6px 8px; height: 32px; } - @media (max-width: 575.98px) { .navbar-gitlab .container-fluid .nav > li > a { padding: 0; @@ -1190,7 +770,12 @@ body.gl-dark .navbar-gitlab .search form { .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 { +.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 { @@ -1211,7 +796,9 @@ body.gl-dark .navbar-gitlab .search form { height: 32px; font-weight: 600; } +.navbar-sub-nav > li .top-nav-toggle, .navbar-sub-nav > li > button, +.navbar-nav > li .top-nav-toggle, .navbar-nav > li > button { background: transparent; border: 0; @@ -1249,31 +836,25 @@ body.gl-dark .navbar-gitlab .search form { font-weight: 400; margin-left: -6px; font-size: 11px; - color: #333; + color: var(--gray-950, #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:not(.merge-request-badge).green-badge, +.navbar-nav .badge.badge-pill:not(.merge-request-badge).green-badge { + background-color: var(--green-400, #108548); } -.title-container .badge.badge-pill.todos-count, -.navbar-nav .badge.badge-pill.todos-count { - background-color: #1f78d1; +.title-container + .badge.badge-pill:not(.merge-request-badge).merge-requests-count, +.navbar-nav .badge.badge-pill:not(.merge-request-badge).merge-requests-count { + background-color: var(--orange-400, #ab6100); } -.title-container .canary-badge .badge, -.navbar-nav .canary-badge .badge { - font-size: 12px; - line-height: 16px; - padding: 0 0.5rem; +.title-container .badge.badge-pill:not(.merge-request-badge).todos-count, +.navbar-nav .badge.badge-pill:not(.merge-request-badge).todos-count { + background-color: var(--blue-400, #1f75cb); } - @media (max-width: 575.98px) { .navbar-gitlab .container-fluid { font-size: 18px; @@ -1298,45 +879,35 @@ body.gl-dark .navbar-gitlab .search form { 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; +.notification-dot { + background-color: #9e5400; + height: 12px; + width: 12px; + margin-top: -15px; + pointer-events: none; + visibility: hidden; } -.content-wrapper { - width: 100%; +.top-nav-toggle .dropdown-icon { + margin-right: 0.5rem; } -.content-wrapper .container-fluid { - padding: 0 16px; +.tanuki-logo .tanuki-left-ear, +.tanuki-logo .tanuki-right-ear, +.tanuki-logo .tanuki-nose { + fill: #e24329; } - -@media (min-width: 768px) { - .page-with-contextual-sidebar { - padding-left: 50px; - } +.tanuki-logo .tanuki-left-eye, +.tanuki-logo .tanuki-right-eye { + fill: #fc6d26; } - -@media (min-width: 1200px) { - .page-with-contextual-sidebar { - padding-left: 220px; - } +.tanuki-logo .tanuki-left-cheek, +.tanuki-logo .tanuki-right-cheek { + fill: #fca326; } .context-header { position: relative; @@ -1363,9 +934,20 @@ body.gl-dark .navbar-gitlab .search form { overflow: hidden; text-overflow: ellipsis; } -.context-header .sidebar-context-title.text-secondary { - font-weight: normal; - font-size: 0.8em; +@media (min-width: 768px) { + .page-with-contextual-sidebar { + padding-left: 48px; + } +} +@media (min-width: 1200px) { + .page-with-contextual-sidebar { + padding-left: 220px; + } +} +@media (min-width: 768px) { + .page-with-icon-sidebar { + padding-left: 48px; + } } .nav-sidebar { position: fixed; @@ -1374,24 +956,22 @@ body.gl-dark .navbar-gitlab .search form { top: 40px; bottom: 0; left: 0; - background-color: #2e2e2e; - box-shadow: inset -1px 0 0 #4f4f4f; + background-color: #303030; + box-shadow: inset -1px 0 0 #404040; 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); + box-shadow: inset -1px 0 0 #404040, 2px 1px 3px rgba(0, 0, 0, 0.1); } } .nav-sidebar.sidebar-collapsed-desktop { - width: 50px; + width: 48px; } .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); @@ -1412,9 +992,6 @@ body.gl-dark .navbar-gitlab .search form { .nav-sidebar.sidebar-collapsed-desktop .avatar-container { margin: 0 auto; } -.nav-sidebar.sidebar-expanded-mobile { - left: 0; -} .nav-sidebar a { text-decoration: none; } @@ -1429,7 +1006,7 @@ body.gl-dark .navbar-gitlab .search form { display: flex; align-items: center; padding: 12px 16px; - color: #bababa; + color: #999; } .nav-sidebar li .nav-item-name { flex: 1; @@ -1437,7 +1014,6 @@ body.gl-dark .navbar-gitlab .search form { .nav-sidebar li.active > a { font-weight: 600; } - @media (max-width: 767.98px) { .nav-sidebar { left: -220px; @@ -1454,16 +1030,15 @@ body.gl-dark .navbar-gitlab .search form { height: 16px; width: 16px; } - @media (min-width: 768px) and (max-width: 1199px) { .nav-sidebar:not(.sidebar-expanded-mobile) { - width: 50px; + width: 48px; } .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) + .badge.badge-pill:not(.fly-out-badge), .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name { border: 0; clip: rect(0, 0, 0, 0); @@ -1486,12 +1061,26 @@ body.gl-dark .navbar-gitlab .search form { } .nav-sidebar:not(.sidebar-expanded-mobile) .context-header { height: 60px; - width: 50px; + width: 48px; } .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) .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 + .sidebar-sub-level-items:not(.flyout-list) { display: none; } .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container { @@ -1499,13 +1088,19 @@ body.gl-dark .navbar-gitlab .search form { } .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button { padding: 16px; - width: 49px; + width: 47px; } - .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 { + .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 { + .nav-sidebar:not(.sidebar-expanded-mobile) + .toggle-sidebar-button + .icon-chevron-double-lg-right { display: block; margin: 0; } @@ -1522,10 +1117,12 @@ body.gl-dark .navbar-gitlab .search form { .sidebar-sub-level-items > li a { padding: 8px 16px 8px 40px; } +.sidebar-sub-level-items > li.active a { + background: rgba(255, 255, 255, 0.04); +} .sidebar-top-level-items { margin-bottom: 60px; } - @media (min-width: 576px) { .sidebar-top-level-items > li > a { margin-right: 1px; @@ -1533,7 +1130,7 @@ body.gl-dark .navbar-gitlab .search form { } .sidebar-top-level-items > li .badge.badge-pill { background-color: rgba(255, 255, 255, 0.08); - color: #bababa; + color: #999; } .sidebar-top-level-items > li.active { background: rgba(255, 255, 255, 0.04); @@ -1545,23 +1142,28 @@ body.gl-dark .navbar-gitlab .search form { .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) { +.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; + background-color: #303030; border: 0; - border-top: 1px solid #4f4f4f; - color: #bababa; + color: #999; display: flex; align-items: center; } +.toggle-sidebar-button, +.close-nav-button { + position: fixed; + bottom: 0; + width: 219px; + border-top: 1px solid #404040; +} .toggle-sidebar-button svg, .close-nav-button svg { margin-right: 8px; @@ -1576,12 +1178,26 @@ body.gl-dark .navbar-gitlab .search form { } .sidebar-collapsed-desktop .context-header { height: 60px; - width: 50px; + width: 48px; } .sidebar-collapsed-desktop .context-header a { padding: 10px 4px; } -.sidebar-collapsed-desktop .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) { +.sidebar-collapsed-desktop .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; +} +.sidebar-collapsed-desktop + .sidebar-top-level-items + > li + .sidebar-sub-level-items:not(.flyout-list) { display: none; } .sidebar-collapsed-desktop .nav-icon-container { @@ -1589,13 +1205,15 @@ body.gl-dark .navbar-gitlab .search form { } .sidebar-collapsed-desktop .toggle-sidebar-button { padding: 16px; - width: 49px; + width: 47px; } .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 { +.sidebar-collapsed-desktop + .toggle-sidebar-button + .icon-chevron-double-lg-right { display: block; margin: 0; } @@ -1611,7 +1229,6 @@ body.gl-dark .navbar-gitlab .search form { .close-nav-button { display: none; } - @media (max-width: 767.98px) { .close-nav-button { display: flex; @@ -1620,128 +1237,671 @@ body.gl-dark .navbar-gitlab .search form { display: none; } } -table.table { - margin-bottom: 16px; +body.sidebar-refactoring.gl-dark .nav-sidebar li.active { + box-shadow: none; +} +body.sidebar-refactoring.gl-dark .nav-sidebar li a, +body.sidebar-refactoring.gl-dark .toggle-sidebar-button .collapse-text, +body.sidebar-refactoring.gl-dark + .toggle-sidebar-button + .icon-chevron-double-lg-left, +body.sidebar-refactoring.gl-dark + .toggle-sidebar-button + .icon-chevron-double-lg-right, +body.sidebar-refactoring.gl-dark + .sidebar-top-level-items + .context-header + a + .sidebar-context-title, +body.sidebar-refactoring.gl-dark + .nav-sidebar-inner-scroll + > div.context-header + a + .sidebar-context-title { + color: #c4c4c4; } -table.table .dropdown-menu a { +body.sidebar-refactoring.ui-indigo + .nav-sidebar + li.active:not(.fly-out-top-item) + > a { + color: #2f2a6b; +} +body.sidebar-refactoring.ui-indigo + .nav-sidebar + li.active + .nav-icon-container + svg { + fill: #2f2a6b; +} +body.sidebar-refactoring .nav-sidebar { + box-shadow: none; +} +body.sidebar-refactoring .nav-sidebar li.active { + background-color: transparent; + box-shadow: none !important; +} +@media (min-width: 768px) { + body.sidebar-refactoring .page-with-contextual-sidebar { + padding-left: 48px; + } +} +@media (min-width: 1200px) { + body.sidebar-refactoring .page-with-contextual-sidebar { + padding-left: 220px; + } +} +@media (min-width: 768px) { + body.sidebar-refactoring .page-with-icon-sidebar { + padding-left: 48px; + } +} +body.sidebar-refactoring .nav-sidebar { + position: fixed; + bottom: 0; + left: 0; + z-index: 600; + width: 220px; + top: 40px; + background-color: #303030; + transform: translate3d(0, 0, 0); +} +body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop { + width: 48px; +} +body.sidebar-refactoring + .nav-sidebar.sidebar-collapsed-desktop + .nav-sidebar-inner-scroll { + overflow-x: hidden; +} +body.sidebar-refactoring + .nav-sidebar.sidebar-collapsed-desktop + .badge.badge-pill:not(.fly-out-badge), +body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .nav-item-name, +body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .collapse-text { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} +body.sidebar-refactoring + .nav-sidebar.sidebar-collapsed-desktop + .sidebar-top-level-items + > li + > a { + min-height: unset; +} +body.sidebar-refactoring + .nav-sidebar.sidebar-collapsed-desktop + .fly-out-top-item:not(.divider) { + display: block !important; +} +body.sidebar-refactoring + .nav-sidebar.sidebar-collapsed-desktop + .avatar-container { + margin: 0 auto; +} +body.sidebar-refactoring + .nav-sidebar.sidebar-collapsed-desktop + li.active:not(.fly-out-top-item) + > a { + background-color: rgba(41, 41, 97, 0.08); +} +body.sidebar-refactoring .nav-sidebar a { text-decoration: none; + color: #2f2a6b; } -table.table .success, -table.table .info { - color: #333; +body.sidebar-refactoring .nav-sidebar li { + white-space: nowrap; +} +body.sidebar-refactoring .nav-sidebar li .nav-item-name { + flex: 1; +} +body.sidebar-refactoring .nav-sidebar li > a, +body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container { + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + display: flex; + align-items: center; + border-radius: 0.25rem; + width: auto; + line-height: 1rem; + margin: 1px 4px; +} +body.sidebar-refactoring .nav-sidebar li.active > a { + font-weight: 600; } -table.table .success a:not(.btn), -table.table .info a:not(.btn) { - text-decoration: underline; +body.sidebar-refactoring + .nav-sidebar + li.active:not(.fly-out-top-item) + > a:not(.has-sub-items) { + background-color: rgba(41, 41, 97, 0.08); +} +body.sidebar-refactoring .nav-sidebar ul { + padding-left: 0; + list-style: none; +} +@media (max-width: 767.98px) { + body.sidebar-refactoring .nav-sidebar { + left: -220px; + } +} +body.sidebar-refactoring .nav-sidebar .nav-icon-container { + display: flex; + margin-right: 8px; +} +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item { + display: none; +} +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item + a, +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item.active + a, +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item + .fly-out-top-item-container { + margin-left: 0; + margin-right: 0; + padding-left: 1rem; + padding-right: 1rem; + cursor: default; + pointer-events: none; + font-size: 0.75rem; + background-color: #2f2a6b; color: #333; + margin-top: -0.25rem; + margin-bottom: -0.25rem; + margin-top: 0; + position: relative; + background-color: #fff; +} +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item + a + strong, +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item.active + a + strong, +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item + .fly-out-top-item-container + strong { + font-weight: 400; } -pre { - font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item + a::before, +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item.active + a::before, +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item + .fly-out-top-item-container::before { + position: absolute; + content: ""; display: block; - padding: 8px 12px; - margin: 0 0 8px; - font-size: 13px; - word-break: break-all; - word-wrap: break-word; + top: 50%; + left: -0.25rem; + margin-top: -0.5rem; + width: 0; + height: 0; + border-top: 0.5rem solid transparent; + border-bottom: 0.5rem solid transparent; + border-right: 0.5rem solid #fff; +} +body.sidebar-refactoring + .nav-sidebar + a.has-sub-items + + .sidebar-sub-level-items + .fly-out-top-item { + display: none; +} +body.sidebar-refactoring + .nav-sidebar + a.has-sub-items + + .sidebar-sub-level-items + .fly-out-top-item + a, +body.sidebar-refactoring + .nav-sidebar + a.has-sub-items + + .sidebar-sub-level-items + .fly-out-top-item.active + a, +body.sidebar-refactoring + .nav-sidebar + a.has-sub-items + + .sidebar-sub-level-items + .fly-out-top-item + .fly-out-top-item-container { + margin-left: 0; + margin-right: 0; + padding-left: 1rem; + padding-right: 1rem; + cursor: default; + pointer-events: none; + font-size: 0.75rem; + background-color: #2f2a6b; + color: #333; + margin-top: -0.25rem; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +@media (min-width: 768px) and (max-width: 1199px) { + body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) { + width: 48px; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .nav-sidebar-inner-scroll { + overflow-x: hidden; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .badge.badge-pill:not(.fly-out-badge), + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .nav-item-name, + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .collapse-text { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .sidebar-top-level-items + > li + > a { + min-height: unset; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .fly-out-top-item:not(.divider) { + display: block !important; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .avatar-container { + margin: 0 auto; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + li.active:not(.fly-out-top-item) + > a { + background-color: rgba(41, 41, 97, 0.08); + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .context-header { + height: 60px; + width: 48px; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .context-header + a { + padding: 10px 4px; + } + body.sidebar-refactoring + .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; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .context-header { + height: auto; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .context-header + a { + padding: 0.25rem; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .sidebar-top-level-items + > li + .sidebar-sub-level-items:not(.flyout-list) { + display: none; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .nav-icon-container { + margin-right: 0; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .toggle-sidebar-button { + width: 48px; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .toggle-sidebar-button + .collapse-text { + display: none; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .toggle-sidebar-button + .icon-chevron-double-lg-left { + transform: rotate(180deg); + display: block; + margin: 0; + } +} +body.sidebar-refactoring .nav-sidebar-inner-scroll { + height: 100%; + width: 100%; + overflow: auto; +} +body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header { + margin-top: 0.25rem; +} +body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a { + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + display: flex; + align-items: center; + border-radius: 0.25rem; + width: auto; + line-height: 1rem; + margin: 1px 4px; + padding: 0.25rem; + margin-bottom: 0.25rem; + margin-top: 0; +} +body.sidebar-refactoring + .nav-sidebar-inner-scroll + > div.context-header + a + .avatar-container { + font-weight: 400; + flex: none; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); +} +body.sidebar-refactoring + .nav-sidebar-inner-scroll + > div.context-header + a + .avatar-container.rect-avatar { + border-style: none; +} +body.sidebar-refactoring + .nav-sidebar-inner-scroll + > div.context-header + a + .avatar-container.rect-avatar + .avatar.s32 { color: #fafafa; - background-color: #2e2e2e; - border: 1px solid #4f4f4f; - border-radius: 2px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); +} +body.sidebar-refactoring + .nav-sidebar-inner-scroll + > div.context-header + a + .sidebar-context-title { + color: #2f2a6b; +} +body.sidebar-refactoring .sidebar-top-level-items { + margin-top: 0.25rem; + margin-bottom: 60px; +} +body.sidebar-refactoring .sidebar-top-level-items .context-header a { + padding: 0.25rem; + margin-bottom: 0.25rem; + margin-top: 0; +} +body.sidebar-refactoring + .sidebar-top-level-items + .context-header + a + .avatar-container { + font-weight: 400; + flex: none; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); +} +body.sidebar-refactoring + .sidebar-top-level-items + .context-header + a + .avatar-container.rect-avatar { + border-style: none; +} +body.sidebar-refactoring + .sidebar-top-level-items + .context-header + a + .avatar-container.rect-avatar + .avatar.s32 { + color: #fafafa; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); +} +body.sidebar-refactoring + .sidebar-top-level-items + .context-header + a + .sidebar-context-title { + color: #2f2a6b; +} +body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill { + border-radius: 0.5rem; + padding-top: 0.125rem; + padding-bottom: 0.125rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + background-color: #064787; + color: #9dc7f1; +} +body.sidebar-refactoring + .sidebar-top-level-items + > li.active + .sidebar-sub-level-items:not(.is-fly-out-only) { + display: block; +} +body.sidebar-refactoring + .sidebar-top-level-items + > li.active + .badge.badge-pill { + font-weight: 400; + color: #9dc7f1; +} +body.sidebar-refactoring .sidebar-sub-level-items { + padding-top: 0; + padding-bottom: 0; + display: none; +} +body.sidebar-refactoring .sidebar-sub-level-items:not(.fly-out-list) li > a { + padding-left: 2.25rem; +} +body.sidebar-refactoring .toggle-sidebar-button, +body.sidebar-refactoring .close-nav-button { + height: 48px; + padding: 0 16px; + background-color: #303030; + border: 0; + color: #999; + display: flex; + align-items: center; + background-color: #303030; + border-top: 1px solid #404040; + color: #2f2a6b; + position: fixed; + bottom: 0; + width: 220px; } -.monospace { - font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; +body.sidebar-refactoring .toggle-sidebar-button .collapse-text, +body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left, +body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right, +body.sidebar-refactoring .close-nav-button .collapse-text, +body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-left, +body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right { + color: inherit; +} +body.sidebar-refactoring .collapse-text { + white-space: nowrap; + overflow: hidden; +} +body.sidebar-refactoring .sidebar-collapsed-desktop .context-header { + height: 60px; + width: 48px; } -input::-moz-placeholder, -textarea::-moz-placeholder { - color: #a7a7a7; +body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a { + padding: 10px 4px; +} +body.sidebar-refactoring .sidebar-collapsed-desktop .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; +} +body.sidebar-refactoring .sidebar-collapsed-desktop .context-header { + height: auto; +} +body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a { + padding: 0.25rem; +} +body.sidebar-refactoring + .sidebar-collapsed-desktop + .sidebar-top-level-items + > li + .sidebar-sub-level-items:not(.flyout-list) { + display: none; +} +body.sidebar-refactoring .sidebar-collapsed-desktop .nav-icon-container { + margin-right: 0; +} +body.sidebar-refactoring .sidebar-collapsed-desktop .toggle-sidebar-button { + width: 48px; +} +body.sidebar-refactoring + .sidebar-collapsed-desktop + .toggle-sidebar-button + .collapse-text { + display: none; +} +body.sidebar-refactoring + .sidebar-collapsed-desktop + .toggle-sidebar-button + .icon-chevron-double-lg-left { + transform: rotate(180deg); + display: block; + margin: 0; +} +body.sidebar-refactoring .close-nav-button { + display: none; +} +@media (max-width: 767.98px) { + body.sidebar-refactoring .close-nav-button { + display: flex; + } + body.sidebar-refactoring .toggle-sidebar-button { + display: none; + } +} +input::-moz-placeholder { + color: #868686; opacity: 1; } -input::-ms-input-placeholder, -textarea::-ms-input-placeholder { - color: #a7a7a7; +input::-ms-input-placeholder { + color: #868686; } -input:-ms-input-placeholder, -textarea:-ms-input-placeholder { - color: #a7a7a7; +input:-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.s32 { + width: 32px; + height: 32px; +} 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 { + display: block; margin: 0; padding: 4px; width: 200px; @@ -1750,7 +1910,6 @@ table.code { border: 0; border-radius: 4px; } - @media (min-width: 1200px) { .search form { width: 320px; @@ -1794,43 +1953,43 @@ table.code { 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; +.search .identicon { + flex-basis: 16px; + flex-shrink: 0; + margin-right: 4px; } -.avatar, .avatar-container { +.avatar, +.avatar-container { float: left; margin-right: 16px; border-radius: 50%; border: 1px solid #333; } -.s16.avatar, .s16.avatar-container { +.avatar.s16, +.avatar-container.s16 { width: 16px; height: 16px; margin-right: 8px; } -.s18.avatar, .s18.avatar-container { +.avatar.s18, +.avatar-container.s18 { width: 18px; height: 18px; margin-right: 8px; } -.s40.avatar, .s40.avatar-container { +.avatar.s32, +.avatar-container.s32 { + width: 32px; + height: 32px; + margin-right: 8px; +} +.avatar.s40, +.avatar-container.s40 { width: 40px; height: 40px; margin-right: 8px; @@ -1844,15 +2003,49 @@ table.code { 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; } +.identicon { + text-align: center; + vertical-align: top; + color: #525252; + background-color: #eee; +} +.identicon.s16 { + font-size: 10px; + line-height: 16px; +} +.identicon.s32 { + font-size: 14px; + line-height: 32px; +} +.identicon.s40 { + font-size: 16px; + line-height: 38px; +} +.identicon.bg1 { + background-color: #ffebee; +} +.identicon.bg2 { + background-color: #f3e5f5; +} +.identicon.bg3 { + background-color: #e8eaf6; +} +.identicon.bg4 { + background-color: #e3f2fd; +} +.identicon.bg5 { + background-color: #e0f2f1; +} +.identicon.bg6 { + background-color: #fbe9e7; +} +.identicon.bg7 { + background-color: #eee; +} .avatar-container { overflow: hidden; display: flex; @@ -1884,9 +2077,204 @@ table.code { .rect-avatar.s18 { border-radius: 2px; } +.rect-avatar.s32, +body.sidebar-refactoring + .nav-sidebar-inner-scroll + > div.context-header + a + .avatar-container.rect-avatar + .avatar.s32, +body.sidebar-refactoring + .sidebar-top-level-items + .context-header + a + .avatar-container.rect-avatar + .avatar.s32 { + border-radius: 4px; +} .rect-avatar.s40 { border-radius: 4px; } +body.gl-dark .navbar-gitlab { + background-color: #fafafa; +} +body.gl-dark .navbar-gitlab .navbar-collapse { + color: #fafafa; +} +body.gl-dark .navbar-gitlab .container-fluid .navbar-toggler { + border-left: 1px solid #b3b3b3; + color: #fafafa; +} +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-nav > li.active > a, +body.gl-dark .navbar-gitlab .navbar-nav > li.active > button { + color: #fafafa; + background-color: #333; +} +body.gl-dark .navbar-gitlab .navbar-sub-nav { + color: #fafafa; +} +body.gl-dark .navbar-gitlab .nav > li { + color: #fafafa; +} +body.gl-dark .navbar-gitlab .nav > li > a .notification-dot { + border: 2px solid #fafafa; +} +body.gl-dark + .navbar-gitlab + .nav + > li + > a.header-help-dropdown-toggle + .notification-dot { + background-color: #fafafa; +} +body.gl-dark + .navbar-gitlab + .nav + > li + > a.header-user-dropdown-toggle + .header-user-avatar { + border-color: #fafafa; +} +body.gl-dark .navbar-gitlab .nav > li.active > a { + color: #fafafa; + background-color: #333; +} +body.gl-dark .navbar-gitlab .nav > li.active > a .notification-dot { + border-color: #333; +} +body.gl-dark + .navbar-gitlab + .nav + > li.active + > a.header-help-dropdown-toggle + .notification-dot { + background-color: #fafafa; +} +body.gl-dark .search form { + background-color: rgba(250, 250, 250, 0.2); +} +body.gl-dark .search .search-input::-ms-input-placeholder { + color: rgba(250, 250, 250, 0.8); +} +body.gl-dark .search .search-input::placeholder { + color: rgba(250, 250, 250, 0.8); +} +body.gl-dark .search .search-input-wrap .search-icon, +body.gl-dark .search .search-input-wrap .clear-icon { + fill: rgba(250, 250, 250, 0.8); +} +body.gl-dark .nav-sidebar li.active { + box-shadow: inset 4px 0 0 #999; +} +body.gl-dark .nav-sidebar li.active > a { + color: #f0f0f0; +} +body.gl-dark .nav-sidebar li.active .nav-icon-container svg { + fill: #f0f0f0; +} +body.gl-dark .sidebar-top-level-items > li.active .badge.badge-pill { + color: #f0f0f0; +} +body.gl-dark .logo-text svg { + fill: var(--gl-text-color); +} +body.gl-dark .navbar-gitlab { + background-color: var(--gray-50); + box-shadow: 0 1px 0 0 var(--gray-100); +} +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-nav li.active > a, +body.gl-dark .navbar-gitlab .navbar-nav li.active > button { + color: var(--gl-text-color); + background-color: var(--gray-200); +} +body.gl-dark .navbar-gitlab .search form { + background-color: var(--gray-100); + box-shadow: inset 0 0 0 1px var(--border-color); +} +body.gl-dark .navbar-gitlab .search form:active { + background-color: var(--gray-100); + box-shadow: inset 0 0 0 1px var(--blue-200); +} + +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); + --gl-text-color: #fafafa; + --border-color: #4f4f4f; + --white: #333; + --black: #fff; + --svg-status-bg: #333; +} .tab-width-8 { -moz-tab-size: 8; tab-size: 8; @@ -1902,12 +2290,40 @@ table.code { white-space: nowrap; width: 1px; } +.gl-border-none\! { + border-style: none !important; +} +.gl-display-none { + display: none; +} +@media (min-width: 36rem) { + .gl-sm-display-block { + display: block; + } +} +.gl-absolute { + position: absolute; +} +.gl-px-3 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} +.gl-pr-2 { + padding-right: 0.25rem; +} .gl-ml-3 { margin-left: 0.5rem; } -.content-wrapper > .alert-wrapper, -#content-body, .modal-dialog { - display: block; +.gl-mx-0\! { + margin-left: 0 !important; + margin-right: 0 !important; } -@import 'cloaking'; +.gl-font-sm { + font-size: 0.75rem; +} +.gl-font-weight-bold { + font-weight: 600; +} + +@import "startup/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 44da509481d..a05e27b6af0 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -1,3 +1,6 @@ +// DO NOT EDIT! This is auto-generated from "yarn run generate:startup_css" +// Please see the feedback issue for more details and help: +// https://gitlab.com/gitlab-org/gitlab/-/issues/331812 @charset "UTF-8"; *, *::before, @@ -8,12 +11,15 @@ html { font-family: sans-serif; line-height: 1.15; } - header, nav, section { +aside, +header { 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-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; @@ -21,55 +27,29 @@ body { text-align: left; background-color: #fff; } -h1, h2, h3 { +h1 { 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]) { +a:not([href]):not([class]) { 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; @@ -78,18 +58,11 @@ svg { overflow: hidden; vertical-align: middle; } -table { - border-collapse: collapse; -} -th { - text-align: inherit; -} button { border-radius: 0; } input, -button, -textarea { +button { margin: 0; font-family: inherit; font-size: inherit; @@ -102,103 +75,34 @@ input { button { text-transform: none; } +[role="button"] { + cursor: pointer; +} button:not(:disabled), -[type="button"]:not(:disabled), -[type="reset"]:not(:disabled) { +[type="button"]:not(:disabled) { cursor: pointer; } button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner { +[type="button"]::-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 { +h1 { margin-bottom: 0.25rem; font-weight: 600; line-height: 1.2; color: #303030; } -h1, .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; @@ -206,48 +110,7 @@ pre code { 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 { +.form-control { display: block; width: 100%; height: 34px; @@ -261,18 +124,21 @@ pre code { border: 1px solid #dbdbdb; border-radius: 0.25rem; } - @media (prefers-reduced-motion: reduce) { } - .search form:-moz-focusring { +.form-control:-moz-focusring { color: transparent; text-shadow: 0 0 0 #303030; } - .search form::placeholder { +.form-control::-ms-input-placeholder { color: #5e5e5e; opacity: 1; } - .search form:disabled { +.form-control::placeholder { + color: #5e5e5e; + opacity: 1; +} +.form-control:disabled { background-color: #fafafa; opacity: 1; } @@ -281,9 +147,8 @@ pre code { flex-flow: row wrap; align-items: center; } - @media (min-width: 576px) { - .form-inline .search form, .search .form-inline form { + .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; @@ -295,7 +160,7 @@ pre code { color: #303030; text-align: center; vertical-align: middle; - cursor: pointer; + -moz-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; @@ -304,26 +169,24 @@ pre code { line-height: 20px; border-radius: 0.25rem; } - @media (prefers-reduced-motion: reduce) { } -.btn.disabled, .btn:disabled { +.btn:disabled { opacity: 0.65; } -a.btn.disabled { - pointer-events: none; +.btn:not(:disabled):not(.disabled) { + cursor: pointer; } .collapse:not(.show) { display: none; } - .dropdown { position: relative; } - .dropdown-menu-toggle { +.dropdown-menu-toggle { white-space: nowrap; } - .dropdown-menu-toggle::after { +.dropdown-menu-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; @@ -333,7 +196,7 @@ a.btn.disabled { border-bottom: 0; border-left: 0.3em solid transparent; } - .dropdown-menu-toggle:empty::after { +.dropdown-menu-toggle:empty::after { margin-left: 0; } .dropdown-menu { @@ -355,19 +218,6 @@ a.btn.disabled { 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; @@ -383,7 +233,6 @@ a.btn.disabled { justify-content: space-between; padding: 0.25rem 0.5rem; } -.navbar .container, .navbar .container-fluid { display: flex; flex-wrap: wrap; @@ -414,15 +263,12 @@ a.btn.disabled { 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; @@ -434,7 +280,6 @@ a.btn.disabled { .navbar-expand-sm .navbar-nav .dropdown-menu { position: absolute; } - .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { flex-wrap: nowrap; } @@ -446,17 +291,6 @@ a.btn.disabled { 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; @@ -468,7 +302,6 @@ a.btn.disabled { vertical-align: baseline; border-radius: 0.25rem; } - @media (prefers-reduced-motion: reduce) { } .badge:empty { @@ -483,66 +316,8 @@ a.btn.disabled { 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: ""; +.rounded-circle { + border-radius: 50% !important; } .d-none { display: none !important; @@ -553,19 +328,19 @@ a.close.disabled { .d-block { display: block !important; } - @media (min-width: 576px) { .d-sm-none { display: none !important; } + .d-sm-inline-block { + display: inline-block !important; + } } - @media (min-width: 768px) { .d-md-block { display: block !important; } } - @media (min-width: 992px) { .d-lg-none { display: none !important; @@ -574,18 +349,11 @@ a.close.disabled { 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; @@ -600,73 +368,58 @@ a.close.disabled { .m-auto { margin: auto !important; } -.text-nowrap { - white-space: nowrap !important; +.gl-button { + display: inline-flex; } -.visible { - visibility: visible !important; +.gl-button:not(.btn-link):active { + text-decoration: none; } - .search form.focus { +.gl-button.gl-button { + border-width: 0; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 0.75rem; + padding-right: 0.75rem; + background-color: transparent; + line-height: 1rem; color: #303030; + fill: currentColor; + box-shadow: inset 0 0 0 1px #bfbfbf; + justify-content: center; + align-items: center; + font-size: 0.875rem; + border-radius: 0.25rem; +} +.gl-button.gl-button.btn-default { 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; +.gl-button.gl-button.btn-default:active, +.gl-button.gl-button.btn-default.active { + box-shadow: inset 0 0 0 2px #5e5e5e, 0 0 0 1px rgba(255, 255, 255, 0.4), + 0 0 0 4px rgba(31, 117, 203, 0.48); outline: none; + background-color: #dbdbdb; } -body, .search form, +body, +.form-control, .search form { font-size: 0.875rem; } button, -html [type='button'], -[type='reset'], -[role='button'] { +html [type="button"], +[role="button"] { cursor: pointer; } -h1, -.h1, -h2, -.h2, -h3, -.h3 { +h1 { 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; @@ -674,7 +427,7 @@ table { .hide { display: none; } - .dropdown-menu-toggle::after { +.dropdown-menu-toggle::after { display: none; } .badge:not(.gl-badge) { @@ -684,8 +437,11 @@ table { font-weight: 400; display: inline-block; } -pre code { - white-space: pre-wrap; +.divider { + height: 0; + margin: 4px 0; + overflow: hidden; + border-top: 1px solid #dbdbdb; } .toggle-sidebar-button .collapse-text, .toggle-sidebar-button .icon-chevron-double-lg-left, @@ -701,29 +457,6 @@ html { 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; @@ -735,7 +468,12 @@ body { color: #303030; white-space: nowrap; } -.btn:active, .btn.active { +.btn:active { + background-color: #f0f0f0; + box-shadow: none; +} +.btn:active, +.btn.active { background-color: #eaeaea; border-color: #e3e3e3; color: #303030; @@ -744,8 +482,7 @@ body { height: 15px; width: 15px; } -.btn svg:not(:last-child), -.btn .fa:not(:last-child) { +.btn svg:not(:last-child) { margin-right: 5px; } .badge.badge-pill:not(.gl-badge) { @@ -754,78 +491,16 @@ body { 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; +.gl-font-sm { + font-size: 12px; } .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 { +.dropdown-menu-toggle { padding: 6px 8px 6px 10px; background-color: #fff; color: #303030; @@ -835,21 +510,16 @@ table a code { border-radius: 0.25rem; white-space: nowrap; } - .no-outline.dropdown-menu-toggle { +.no-outline.dropdown-menu-toggle { outline: 0; } - .dropdown-menu-toggle .fa { - color: #c4c4c4; -} -.dropdown-menu-toggle { +.dropdown-menu-toggle.dropdown-menu-toggle { + justify-content: flex-start; + overflow: hidden; padding-right: 25px; position: relative; - width: 160px; text-overflow: ellipsis; - overflow: hidden; -} -.dropdown-menu-toggle .fa { - position: absolute; + width: 160px; } .dropdown-menu { display: none; @@ -896,6 +566,13 @@ table a code { text-align: left; width: 100%; } +.dropdown-menu li > a:active, +.dropdown-menu li button:active { + background-color: #eee; + color: #303030; + outline: 0; + text-decoration: none; +} .dropdown-menu .divider { height: 1px; margin: 0.25rem 0; @@ -905,66 +582,39 @@ table a code { .dropdown-menu .badge.badge-pill + span:not(.badge):not(.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; } + .navbar-gitlab li.dropdown.user-counter { + margin-left: 8px !important; + } + .navbar-gitlab li.dropdown.user-counter > a { + padding: 0 4px !important; + } 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 { +.form-control { border-radius: 4px; padding: 6px 10px; } - .search form::placeholder { +.form-control::-ms-input-placeholder { + color: #868686; +} +.form-control::placeholder { color: #868686; } .navbar-gitlab { @@ -973,7 +623,6 @@ input { margin-bottom: 0; min-height: 40px; border: 0; - border-bottom: 1px solid #dbdbdb; position: fixed; top: 0; left: 0; @@ -1023,9 +672,6 @@ input { .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; @@ -1033,9 +679,6 @@ input { 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; } @@ -1044,7 +687,6 @@ input { border-top: 0; padding: 0; } - @media (max-width: 575.98px) { .navbar-gitlab .navbar-collapse { flex: 1 1 auto; @@ -1053,7 +695,6 @@ input { .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; @@ -1076,7 +717,10 @@ input { 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; @@ -1084,11 +728,14 @@ input { flex-direction: row; } } -.navbar-gitlab .container-fluid .navbar-nav li .badge.badge-pill { +.navbar-gitlab + .container-fluid + .navbar-nav + li + .badge.badge-pill:not(.merge-request-badge) { box-shadow: none; font-weight: 600; } - @media (max-width: 575.98px) { .navbar-gitlab .container-fluid .nav > li.header-user { padding-left: 10px; @@ -1100,7 +747,6 @@ input { padding: 6px 8px; height: 32px; } - @media (max-width: 575.98px) { .navbar-gitlab .container-fluid .nav > li > a { padding: 0; @@ -1109,7 +755,12 @@ input { .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 { +.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 { @@ -1130,7 +781,9 @@ input { height: 32px; font-weight: 600; } +.navbar-sub-nav > li .top-nav-toggle, .navbar-sub-nav > li > button, +.navbar-nav > li .top-nav-toggle, .navbar-nav > li > button { background: transparent; border: 0; @@ -1168,31 +821,25 @@ input { font-weight: 400; margin-left: -6px; font-size: 11px; - color: #fff; + color: var(--gray-950, #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:not(.merge-request-badge).green-badge, +.navbar-nav .badge.badge-pill:not(.merge-request-badge).green-badge { + background-color: var(--green-400, #2da160); } -.title-container .badge.badge-pill.merge-requests-count, -.navbar-nav .badge.badge-pill.merge-requests-count { - background-color: #de7e00; +.title-container + .badge.badge-pill:not(.merge-request-badge).merge-requests-count, +.navbar-nav .badge.badge-pill:not(.merge-request-badge).merge-requests-count { + background-color: var(--orange-400, #c17d10); } -.title-container .badge.badge-pill.todos-count, -.navbar-nav .badge.badge-pill.todos-count { - background-color: #1f75cb; +.title-container .badge.badge-pill:not(.merge-request-badge).todos-count, +.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; @@ -1217,45 +864,35 @@ input { 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; +.notification-dot { + background-color: #d99530; + height: 12px; + width: 12px; + margin-top: -15px; + pointer-events: none; + visibility: hidden; } -.content-wrapper { - width: 100%; +.top-nav-toggle .dropdown-icon { + margin-right: 0.5rem; } -.content-wrapper .container-fluid { - padding: 0 16px; +.tanuki-logo .tanuki-left-ear, +.tanuki-logo .tanuki-right-ear, +.tanuki-logo .tanuki-nose { + fill: #e24329; } - -@media (min-width: 768px) { - .page-with-contextual-sidebar { - padding-left: 50px; - } +.tanuki-logo .tanuki-left-eye, +.tanuki-logo .tanuki-right-eye { + fill: #fc6d26; } - -@media (min-width: 1200px) { - .page-with-contextual-sidebar { - padding-left: 220px; - } +.tanuki-logo .tanuki-left-cheek, +.tanuki-logo .tanuki-right-cheek { + fill: #fca326; } .context-header { position: relative; @@ -1282,9 +919,20 @@ input { overflow: hidden; text-overflow: ellipsis; } -.context-header .sidebar-context-title.text-secondary { - font-weight: normal; - font-size: 0.8em; +@media (min-width: 768px) { + .page-with-contextual-sidebar { + padding-left: 48px; + } +} +@media (min-width: 1200px) { + .page-with-contextual-sidebar { + padding-left: 220px; + } +} +@media (min-width: 768px) { + .page-with-icon-sidebar { + padding-left: 48px; + } } .nav-sidebar { position: fixed; @@ -1297,20 +945,18 @@ input { 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; + width: 48px; } .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); @@ -1331,9 +977,6 @@ input { .nav-sidebar.sidebar-collapsed-desktop .avatar-container { margin: 0 auto; } -.nav-sidebar.sidebar-expanded-mobile { - left: 0; -} .nav-sidebar a { text-decoration: none; } @@ -1356,7 +999,6 @@ input { .nav-sidebar li.active > a { font-weight: 600; } - @media (max-width: 767.98px) { .nav-sidebar { left: -220px; @@ -1373,16 +1015,15 @@ input { height: 16px; width: 16px; } - @media (min-width: 768px) and (max-width: 1199px) { .nav-sidebar:not(.sidebar-expanded-mobile) { - width: 50px; + width: 48px; } .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) + .badge.badge-pill:not(.fly-out-badge), .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name { border: 0; clip: rect(0, 0, 0, 0); @@ -1405,12 +1046,26 @@ input { } .nav-sidebar:not(.sidebar-expanded-mobile) .context-header { height: 60px; - width: 50px; + width: 48px; } .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) .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 + .sidebar-sub-level-items:not(.flyout-list) { display: none; } .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container { @@ -1418,13 +1073,19 @@ input { } .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button { padding: 16px; - width: 49px; + width: 47px; } - .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 { + .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 { + .nav-sidebar:not(.sidebar-expanded-mobile) + .toggle-sidebar-button + .icon-chevron-double-lg-right { display: block; margin: 0; } @@ -1441,10 +1102,12 @@ input { .sidebar-sub-level-items > li a { padding: 8px 16px 8px 40px; } +.sidebar-sub-level-items > li.active a { + background: rgba(0, 0, 0, 0.04); +} .sidebar-top-level-items { margin-bottom: 60px; } - @media (min-width: 576px) { .sidebar-top-level-items > li > a { margin-right: 1px; @@ -1464,23 +1127,28 @@ input { .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) { +.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, +.close-nav-button { + position: fixed; + bottom: 0; + width: 219px; + border-top: 1px solid #dbdbdb; +} .toggle-sidebar-button svg, .close-nav-button svg { margin-right: 8px; @@ -1495,12 +1163,26 @@ input { } .sidebar-collapsed-desktop .context-header { height: 60px; - width: 50px; + width: 48px; } .sidebar-collapsed-desktop .context-header a { padding: 10px 4px; } -.sidebar-collapsed-desktop .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) { +.sidebar-collapsed-desktop .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; +} +.sidebar-collapsed-desktop + .sidebar-top-level-items + > li + .sidebar-sub-level-items:not(.flyout-list) { display: none; } .sidebar-collapsed-desktop .nav-icon-container { @@ -1508,13 +1190,15 @@ input { } .sidebar-collapsed-desktop .toggle-sidebar-button { padding: 16px; - width: 49px; + width: 47px; } .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 { +.sidebar-collapsed-desktop + .toggle-sidebar-button + .icon-chevron-double-lg-right { display: block; margin: 0; } @@ -1530,7 +1214,6 @@ input { .close-nav-button { display: none; } - @media (max-width: 767.98px) { .close-nav-button { display: flex; @@ -1539,128 +1222,648 @@ input { display: none; } } -table.table { - margin-bottom: 16px; +body.sidebar-refactoring.ui-indigo + .nav-sidebar + li.active:not(.fly-out-top-item) + > a { + color: #2f2a6b; +} +body.sidebar-refactoring.ui-indigo + .nav-sidebar + li.active + .nav-icon-container + svg { + fill: #2f2a6b; +} +body.sidebar-refactoring .nav-sidebar { + box-shadow: none; +} +body.sidebar-refactoring .nav-sidebar li.active { + background-color: transparent; + box-shadow: none !important; } -table.table .dropdown-menu a { +@media (min-width: 768px) { + body.sidebar-refactoring .page-with-contextual-sidebar { + padding-left: 48px; + } +} +@media (min-width: 1200px) { + body.sidebar-refactoring .page-with-contextual-sidebar { + padding-left: 220px; + } +} +@media (min-width: 768px) { + body.sidebar-refactoring .page-with-icon-sidebar { + padding-left: 48px; + } +} +body.sidebar-refactoring .nav-sidebar { + position: fixed; + bottom: 0; + left: 0; + z-index: 600; + width: 220px; + top: 40px; + background-color: #f0f0f0; + transform: translate3d(0, 0, 0); +} +body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop { + width: 48px; +} +body.sidebar-refactoring + .nav-sidebar.sidebar-collapsed-desktop + .nav-sidebar-inner-scroll { + overflow-x: hidden; +} +body.sidebar-refactoring + .nav-sidebar.sidebar-collapsed-desktop + .badge.badge-pill:not(.fly-out-badge), +body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .nav-item-name, +body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .collapse-text { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} +body.sidebar-refactoring + .nav-sidebar.sidebar-collapsed-desktop + .sidebar-top-level-items + > li + > a { + min-height: unset; +} +body.sidebar-refactoring + .nav-sidebar.sidebar-collapsed-desktop + .fly-out-top-item:not(.divider) { + display: block !important; +} +body.sidebar-refactoring + .nav-sidebar.sidebar-collapsed-desktop + .avatar-container { + margin: 0 auto; +} +body.sidebar-refactoring + .nav-sidebar.sidebar-collapsed-desktop + li.active:not(.fly-out-top-item) + > a { + background-color: rgba(41, 41, 97, 0.08); +} +body.sidebar-refactoring .nav-sidebar a { text-decoration: none; + color: #2f2a6b; } -table.table .success, -table.table .info { - color: #fff; +body.sidebar-refactoring .nav-sidebar li { + white-space: nowrap; +} +body.sidebar-refactoring .nav-sidebar li .nav-item-name { + flex: 1; } -table.table .success a:not(.btn), -table.table .info a:not(.btn) { - text-decoration: underline; +body.sidebar-refactoring .nav-sidebar li > a, +body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container { + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + display: flex; + align-items: center; + border-radius: 0.25rem; + width: auto; + line-height: 1rem; + margin: 1px 4px; +} +body.sidebar-refactoring .nav-sidebar li.active > a { + font-weight: 600; +} +body.sidebar-refactoring + .nav-sidebar + li.active:not(.fly-out-top-item) + > a:not(.has-sub-items) { + background-color: rgba(41, 41, 97, 0.08); +} +body.sidebar-refactoring .nav-sidebar ul { + padding-left: 0; + list-style: none; +} +@media (max-width: 767.98px) { + body.sidebar-refactoring .nav-sidebar { + left: -220px; + } +} +body.sidebar-refactoring .nav-sidebar .nav-icon-container { + display: flex; + margin-right: 8px; +} +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item { + display: none; +} +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item + a, +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item.active + a, +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item + .fly-out-top-item-container { + margin-left: 0; + margin-right: 0; + padding-left: 1rem; + padding-right: 1rem; + cursor: default; + pointer-events: none; + font-size: 0.75rem; + background-color: #2f2a6b; color: #fff; + margin-top: -0.25rem; + margin-bottom: -0.25rem; + margin-top: 0; + position: relative; + background-color: #000; +} +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item + a + strong, +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item.active + a + strong, +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item + .fly-out-top-item-container + strong { + font-weight: 400; } -pre { - font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item + a::before, +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item.active + a::before, +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item + .fly-out-top-item-container::before { + position: absolute; + content: ""; display: block; - padding: 8px 12px; - margin: 0 0 8px; - font-size: 13px; - word-break: break-all; - word-wrap: break-word; + top: 50%; + left: -0.25rem; + margin-top: -0.5rem; + width: 0; + height: 0; + border-top: 0.5rem solid transparent; + border-bottom: 0.5rem solid transparent; + border-right: 0.5rem solid #000; +} +body.sidebar-refactoring + .nav-sidebar + a.has-sub-items + + .sidebar-sub-level-items + .fly-out-top-item { + display: none; +} +body.sidebar-refactoring + .nav-sidebar + a.has-sub-items + + .sidebar-sub-level-items + .fly-out-top-item + a, +body.sidebar-refactoring + .nav-sidebar + a.has-sub-items + + .sidebar-sub-level-items + .fly-out-top-item.active + a, +body.sidebar-refactoring + .nav-sidebar + a.has-sub-items + + .sidebar-sub-level-items + .fly-out-top-item + .fly-out-top-item-container { + margin-left: 0; + margin-right: 0; + padding-left: 1rem; + padding-right: 1rem; + cursor: default; + pointer-events: none; + font-size: 0.75rem; + background-color: #2f2a6b; + color: #fff; + margin-top: -0.25rem; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +@media (min-width: 768px) and (max-width: 1199px) { + body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) { + width: 48px; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .nav-sidebar-inner-scroll { + overflow-x: hidden; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .badge.badge-pill:not(.fly-out-badge), + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .nav-item-name, + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .collapse-text { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .sidebar-top-level-items + > li + > a { + min-height: unset; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .fly-out-top-item:not(.divider) { + display: block !important; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .avatar-container { + margin: 0 auto; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + li.active:not(.fly-out-top-item) + > a { + background-color: rgba(41, 41, 97, 0.08); + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .context-header { + height: 60px; + width: 48px; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .context-header + a { + padding: 10px 4px; + } + body.sidebar-refactoring + .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; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .context-header { + height: auto; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .context-header + a { + padding: 0.25rem; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .sidebar-top-level-items + > li + .sidebar-sub-level-items:not(.flyout-list) { + display: none; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .nav-icon-container { + margin-right: 0; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .toggle-sidebar-button { + width: 48px; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .toggle-sidebar-button + .collapse-text { + display: none; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .toggle-sidebar-button + .icon-chevron-double-lg-left { + transform: rotate(180deg); + display: block; + margin: 0; + } +} +body.sidebar-refactoring .nav-sidebar-inner-scroll { + height: 100%; + width: 100%; + overflow: auto; +} +body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header { + margin-top: 0.25rem; +} +body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a { + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + display: flex; + align-items: center; + border-radius: 0.25rem; + width: auto; + line-height: 1rem; + margin: 1px 4px; + padding: 0.25rem; + margin-bottom: 0.25rem; + margin-top: 0; +} +body.sidebar-refactoring + .nav-sidebar-inner-scroll + > div.context-header + a + .avatar-container { + font-weight: 400; + flex: none; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); +} +body.sidebar-refactoring + .nav-sidebar-inner-scroll + > div.context-header + a + .avatar-container.rect-avatar { + border-style: none; +} +body.sidebar-refactoring + .nav-sidebar-inner-scroll + > div.context-header + a + .avatar-container.rect-avatar + .avatar.s32 { color: #303030; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); +} +body.sidebar-refactoring + .nav-sidebar-inner-scroll + > div.context-header + a + .sidebar-context-title { + color: #2f2a6b; +} +body.sidebar-refactoring .sidebar-top-level-items { + margin-top: 0.25rem; + margin-bottom: 60px; +} +body.sidebar-refactoring .sidebar-top-level-items .context-header a { + padding: 0.25rem; + margin-bottom: 0.25rem; + margin-top: 0; +} +body.sidebar-refactoring + .sidebar-top-level-items + .context-header + a + .avatar-container { + font-weight: 400; + flex: none; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); +} +body.sidebar-refactoring + .sidebar-top-level-items + .context-header + a + .avatar-container.rect-avatar { + border-style: none; +} +body.sidebar-refactoring + .sidebar-top-level-items + .context-header + a + .avatar-container.rect-avatar + .avatar.s32 { + color: #303030; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); +} +body.sidebar-refactoring + .sidebar-top-level-items + .context-header + a + .sidebar-context-title { + color: #2f2a6b; +} +body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill { + border-radius: 0.5rem; + padding-top: 0.125rem; + padding-bottom: 0.125rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + background-color: #cbe2f9; + color: #0b5cad; +} +body.sidebar-refactoring + .sidebar-top-level-items + > li.active + .sidebar-sub-level-items:not(.is-fly-out-only) { + display: block; +} +body.sidebar-refactoring + .sidebar-top-level-items + > li.active + .badge.badge-pill { + font-weight: 400; + color: #0b5cad; +} +body.sidebar-refactoring .sidebar-sub-level-items { + padding-top: 0; + padding-bottom: 0; + display: none; +} +body.sidebar-refactoring .sidebar-sub-level-items:not(.fly-out-list) li > a { + padding-left: 2.25rem; +} +body.sidebar-refactoring .toggle-sidebar-button, +body.sidebar-refactoring .close-nav-button { + height: 48px; + padding: 0 16px; background-color: #fafafa; - border: 1px solid #dbdbdb; - border-radius: 2px; + border: 0; + color: #666; + display: flex; + align-items: center; + background-color: #f0f0f0; + border-top: 1px solid #dbdbdb; + color: #2f2a6b; + position: fixed; + bottom: 0; + width: 220px; +} +body.sidebar-refactoring .toggle-sidebar-button .collapse-text, +body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left, +body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right, +body.sidebar-refactoring .close-nav-button .collapse-text, +body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-left, +body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right { + color: inherit; } -.monospace { - font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; +body.sidebar-refactoring .collapse-text { + white-space: nowrap; + overflow: hidden; +} +body.sidebar-refactoring .sidebar-collapsed-desktop .context-header { + height: 60px; + width: 48px; +} +body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a { + padding: 10px 4px; +} +body.sidebar-refactoring .sidebar-collapsed-desktop .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; +} +body.sidebar-refactoring .sidebar-collapsed-desktop .context-header { + height: auto; +} +body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a { + padding: 0.25rem; +} +body.sidebar-refactoring + .sidebar-collapsed-desktop + .sidebar-top-level-items + > li + .sidebar-sub-level-items:not(.flyout-list) { + display: none; } -input::-moz-placeholder, -textarea::-moz-placeholder { +body.sidebar-refactoring .sidebar-collapsed-desktop .nav-icon-container { + margin-right: 0; +} +body.sidebar-refactoring .sidebar-collapsed-desktop .toggle-sidebar-button { + width: 48px; +} +body.sidebar-refactoring + .sidebar-collapsed-desktop + .toggle-sidebar-button + .collapse-text { + display: none; +} +body.sidebar-refactoring + .sidebar-collapsed-desktop + .toggle-sidebar-button + .icon-chevron-double-lg-left { + transform: rotate(180deg); + display: block; + margin: 0; +} +body.sidebar-refactoring .close-nav-button { + display: none; +} +@media (max-width: 767.98px) { + body.sidebar-refactoring .close-nav-button { + display: flex; + } + body.sidebar-refactoring .toggle-sidebar-button { + display: none; + } +} +input::-moz-placeholder { color: #868686; opacity: 1; } -input::-ms-input-placeholder, -textarea::-ms-input-placeholder { +input::-ms-input-placeholder { color: #868686; } -input:-ms-input-placeholder, -textarea:-ms-input-placeholder { +input:-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.s32 { + width: 32px; + height: 32px; +} 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 { + display: block; margin: 0; padding: 4px; width: 200px; @@ -1669,7 +1872,6 @@ table.code { border: 0; border-radius: 4px; } - @media (min-width: 1200px) { .search form { width: 320px; @@ -1713,43 +1915,43 @@ table.code { 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 { +.avatar, +.avatar-container { float: left; margin-right: 16px; border-radius: 50%; border: 1px solid #f5f5f5; } -.s16.avatar, .s16.avatar-container { +.avatar.s16, +.avatar-container.s16 { width: 16px; height: 16px; margin-right: 8px; } -.s18.avatar, .s18.avatar-container { +.avatar.s18, +.avatar-container.s18 { width: 18px; height: 18px; margin-right: 8px; } -.s40.avatar, .s40.avatar-container { +.avatar.s32, +.avatar-container.s32 { + width: 32px; + height: 32px; + margin-right: 8px; +} +.avatar.s40, +.avatar-container.s40 { width: 40px; height: 40px; margin-right: 8px; @@ -1763,15 +1965,49 @@ table.code { 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; } +.identicon { + text-align: center; + vertical-align: top; + color: #525252; + background-color: #eee; +} +.identicon.s16 { + font-size: 10px; + line-height: 16px; +} +.identicon.s32 { + font-size: 14px; + line-height: 32px; +} +.identicon.s40 { + font-size: 16px; + line-height: 38px; +} +.identicon.bg1 { + background-color: #ffebee; +} +.identicon.bg2 { + background-color: #f3e5f5; +} +.identicon.bg3 { + background-color: #e8eaf6; +} +.identicon.bg4 { + background-color: #e3f2fd; +} +.identicon.bg5 { + background-color: #e0f2f1; +} +.identicon.bg6 { + background-color: #fbe9e7; +} +.identicon.bg7 { + background-color: #eee; +} .avatar-container { overflow: hidden; display: flex; @@ -1803,9 +2039,25 @@ table.code { .rect-avatar.s18 { border-radius: 2px; } +.rect-avatar.s32, +body.sidebar-refactoring + .nav-sidebar-inner-scroll + > div.context-header + a + .avatar-container.rect-avatar + .avatar.s32, +body.sidebar-refactoring + .sidebar-top-level-items + .context-header + a + .avatar-container.rect-avatar + .avatar.s32 { + border-radius: 4px; +} .rect-avatar.s40 { border-radius: 4px; } + .tab-width-8 { -moz-tab-size: 8; tab-size: 8; @@ -1821,12 +2073,40 @@ table.code { white-space: nowrap; width: 1px; } +.gl-border-none\! { + border-style: none !important; +} +.gl-display-none { + display: none; +} +@media (min-width: 36rem) { + .gl-sm-display-block { + display: block; + } +} +.gl-absolute { + position: absolute; +} +.gl-px-3 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} +.gl-pr-2 { + padding-right: 0.25rem; +} .gl-ml-3 { margin-left: 0.5rem; } -.content-wrapper > .alert-wrapper, -#content-body, .modal-dialog { - display: block; +.gl-mx-0\! { + margin-left: 0 !important; + margin-right: 0 !important; } -@import 'cloaking'; +.gl-font-sm { + font-size: 0.75rem; +} +.gl-font-weight-bold { + font-weight: 600; +} + +@import "startup/cloaking"; @include cloak-startup-scss(none); diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss index 6b78abdb5e0..81a87742850 100644 --- a/app/assets/stylesheets/startup/startup-signin.scss +++ b/app/assets/stylesheets/startup/startup-signin.scss @@ -1,3 +1,6 @@ +// DO NOT EDIT! This is auto-generated from "yarn run generate:startup_css" +// Please see the feedback issue for more details and help: +// https://gitlab.com/gitlab-org/gitlab/-/issues/331812 @charset "UTF-8"; *, *::before, @@ -8,12 +11,14 @@ html { font-family: sans-serif; line-height: 1.15; } - header, nav, section { +header { 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-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; @@ -26,7 +31,8 @@ hr { height: 0; overflow: visible; } -h1, h2, h3 { +h1, +h3 { margin-top: 0; margin-bottom: 0.25rem; } @@ -34,52 +40,15 @@ 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]) { +a:not([href]):not([class]) { 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; @@ -88,89 +57,46 @@ 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 { +input { 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 { +h1, +h3 { margin-bottom: 0.25rem; font-weight: 600; line-height: 1.2; color: #303030; } -h1, .h1 { +h1 { font-size: 2.1875rem; } -h2, .h2 { - font-size: 1.75rem; -} -h3, .h3 { +h3 { font-size: 1.53125rem; } hr { @@ -179,28 +105,6 @@ hr { 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; @@ -208,56 +112,21 @@ pre code { 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; @@ -269,19 +138,26 @@ pre code { margin-right: -15px; margin-left: -15px; } - .col-sm-5, .col-sm-7, .col-sm-12 { +.col, +.col-sm-5, +.col-sm-7, +.col-sm-12 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } +.col { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; +} .order-1 { order: 1; } .order-12 { order: 12; } - @media (min-width: 576px) { .col-sm-5 { flex: 0 0 41.66667%; @@ -302,18 +178,7 @@ pre code { 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 { +.form-control { display: block; width: 100%; height: 34px; @@ -327,52 +192,36 @@ pre code { border: 1px solid #dbdbdb; border-radius: 0.25rem; } - @media (prefers-reduced-motion: reduce) { } -.form-control:-moz-focusring, .search form:-moz-focusring { +.form-control:-moz-focusring { color: transparent; text-shadow: 0 0 0 #303030; } -.form-control::placeholder, .search form::placeholder { +.form-control::-ms-input-placeholder { color: #5e5e5e; opacity: 1; } -.form-control:disabled, .search form:disabled { - background-color: #fafafa; +.form-control::placeholder { + color: #5e5e5e; opacity: 1; } -textarea.form-control { - height: auto; +.form-control:disabled { + background-color: #fafafa; + opacity: 1; } .form-group { margin-bottom: 1rem; } -.form-inline { +.form-row { display: flex; - flex-flow: row wrap; - align-items: center; + flex-wrap: wrap; + margin-right: -5px; + margin-left: -5px; } - -@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; - } +.form-row > .col { + padding-right: 5px; + padding-left: 5px; } .btn { display: inline-block; @@ -380,7 +229,7 @@ textarea.form-control { color: #303030; text-align: center; vertical-align: middle; - cursor: pointer; + -moz-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; @@ -389,147 +238,16 @@ textarea.form-control { line-height: 20px; border-radius: 0.25rem; } - @media (prefers-reduced-motion: reduce) { } -.btn.disabled, .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; +.btn:not(:disabled):not(.disabled) { + cursor: pointer; } -.nav-link.disabled { - color: #5e5e5e; +fieldset:disabled a.btn { 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; @@ -539,218 +257,18 @@ fieldset:disabled a.btn { justify-content: space-between; padding: 0.25rem 0.5rem; } -.navbar .container, -.navbar .container-fluid { +.navbar .container { 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; } @@ -760,9 +278,6 @@ a.close.disabled { .align-items-center { align-items: center !important; } -.float-right { - float: right !important; -} .fixed-top { position: fixed; top: 0; @@ -770,16 +285,8 @@ a.close.disabled { 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; +.ml-2 { + margin-left: 0.5rem !important; } .mt-3 { margin-top: 1rem !important; @@ -787,100 +294,129 @@ a.close.disabled { .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; +.text-center { + text-align: center !important; } .font-weight-normal { font-weight: 400 !important; } -.visible { - visibility: visible !important; -} -.form-control.focus, .search form.focus { - color: #303030; +.gl-form-input, +.gl-form-input.form-control { background-color: #fff; - border-color: #80bdff; - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); + 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: 0.875rem; + line-height: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 0.75rem; + padding-right: 0.75rem; + height: auto; + color: #303030; + box-shadow: inset 0 0 0 1px #868686; + border-style: none; + appearance: none; + -moz-appearance: none; } -input[type="color"].form-control { - height: 34px; - padding: 0.125rem 0.25rem; +.gl-form-input:not(.form-control-plaintext):-moz-read-only, +.gl-form-input.form-control:not(.form-control-plaintext):-moz-read-only { + background-color: #fafafa; + color: #868686; + box-shadow: inset 0 0 0 1px #dbdbdb; + cursor: not-allowed; } -input[type="color"].form-control:disabled { - background-color: #666; - opacity: 0.65; +.gl-form-input:disabled, +.gl-form-input:not(.form-control-plaintext):read-only, +.gl-form-input.form-control:disabled, +.gl-form-input.form-control:not(.form-control-plaintext):read-only { + background-color: #fafafa; + color: #868686; + box-shadow: inset 0 0 0 1px #dbdbdb; + cursor: not-allowed; +} +.gl-form-input::-ms-input-placeholder, +.gl-form-input.form-control::-ms-input-placeholder { + color: #868686; } -.gl-badge { +.gl-form-input::placeholder, +.gl-form-input.form-control::placeholder { + color: #868686; +} +.gl-button { display: inline-flex; - align-items: center; - font-size: 0.75rem; - font-weight: 400; +} +.gl-button:not(.btn-link):active { + text-decoration: none; +} +.gl-button.gl-button { + border-width: 0; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 0.75rem; + padding-right: 0.75rem; + background-color: transparent; line-height: 1rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 0.5rem; - padding-right: 0.5rem; + color: #303030; + fill: currentColor; + box-shadow: inset 0 0 0 1px #bfbfbf; + justify-content: center; + align-items: center; + font-size: 0.875rem; + border-radius: 0.25rem; +} +.gl-button.gl-button .gl-button-icon { + height: 1rem; + width: 1rem; + flex-shrink: 0; + margin-right: 0.25rem; + top: auto; +} +.gl-button.gl-button.btn-default { + background-color: #fff; +} +.gl-button.gl-button.btn-default:active { + box-shadow: inset 0 0 0 2px #5e5e5e, 0 0 0 1px rgba(255, 255, 255, 0.4), + 0 0 0 4px rgba(31, 117, 203, 0.48); outline: none; + background-color: #dbdbdb; +} +.gl-button.gl-button.btn-confirm { + color: #fff; } -body, .form-control, .search form, -.search form { +.gl-button.gl-button.btn-confirm { + background-color: #1f75cb; + box-shadow: inset 0 0 0 1px #1068bf; +} +.gl-button.gl-button.btn-confirm:active { + box-shadow: inset 0 0 0 2px #033464, 0 0 0 1px rgba(255, 255, 255, 0.4), + 0 0 0 4px rgba(31, 117, 203, 0.48); + outline: none; + background-color: #0b5cad; +} +body, +.form-control { font-size: 0.875rem; } -button, -html [type='button'], -[type='reset'], -[type='submit'], -[role='button'] { +[type="submit"] { cursor: pointer; } h1, -.h1, -h2, -.h2, -h3, -.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; @@ -888,39 +424,6 @@ table { .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; } @@ -933,10 +436,6 @@ body { body.navless { background-color: #fff !important; } -.content-wrapper { - margin-top: 40px; - padding-bottom: 100px; -} .container { padding-top: 0; z-index: 5; @@ -944,18 +443,11 @@ body.navless { .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; @@ -971,259 +463,35 @@ body.navless { color: #303030; white-space: nowrap; } -.btn:active, .btn.active { - box-shadow: rgba(0, 0, 0, 0.16); +.btn:active { + background-color: #f0f0f0; + box-shadow: none; +} +.btn:active { background-color: #eaeaea; border-color: #e3e3e3; color: #303030; } -.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, 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) { +.btn svg: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; +.light { + color: #303030; } hr { - margin: 24px 0; + margin: 1.5rem 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):not(.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; @@ -1232,8 +500,8 @@ table a code { z-index: 1; } .flash-container.sticky { - position: sticky; position: -webkit-sticky; + position: sticky; top: 48px; z-index: 251; } @@ -1243,9 +511,6 @@ table a code { .flash-container:empty { margin: 0; } -textarea { - resize: vertical; -} input { border-radius: 0.25rem; color: #303030; @@ -1257,809 +522,58 @@ label { label.label-bold { font-weight: 600; } -.form-control, .search form { +.form-control { border-radius: 4px; padding: 6px 10px; } -.form-control::placeholder, .search form::placeholder { +.form-control::-ms-input-placeholder { color: #868686; } -.gl-field-error { - color: #dd2b0e; - font-size: 0.875rem; +.form-control::placeholder { + color: #868686; } -.gl-show-field-errors .form-control:not(textarea), .gl-show-field-errors .search form:not(textarea), .search .gl-show-field-errors form:not(textarea) { +.gl-show-field-errors .form-control: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; - } +.navbar-empty .tanuki-logo, +.navbar-empty .brand-header-logo { + max-height: 100%; } -.nav-sidebar-inner-scroll { - height: 100%; - width: 100%; - overflow: auto; -} -.sidebar-sub-level-items { - display: none; - padding-bottom: 8px; +.tanuki-logo .tanuki-left-ear, +.tanuki-logo .tanuki-right-ear, +.tanuki-logo .tanuki-nose { + fill: #e24329; } -.sidebar-sub-level-items > li a { - padding: 8px 16px 8px 40px; +.tanuki-logo .tanuki-left-eye, +.tanuki-logo .tanuki-right-eye { + fill: #fc6d26; } -.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; +.tanuki-logo .tanuki-left-cheek, +.tanuki-logo .tanuki-right-cheek { + fill: #fca326; } -.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 { +input::-moz-placeholder { color: #868686; opacity: 1; } -input::-ms-input-placeholder, -textarea::-ms-input-placeholder { +input::-ms-input-placeholder { color: #868686; } -input:-ms-input-placeholder, -textarea:-ms-input-placeholder { +input:-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; } @@ -2096,6 +610,25 @@ table.code { border-radius: 0.25rem; padding: 15px; } +.login-page .login-box .login-heading h3, +.login-page .omniauth-container .login-heading h3 { + font-weight: 400; + line-height: 1.5; + margin: 0 0 10px; +} +.login-page .login-box .login-footer, +.login-page .omniauth-container .login-footer { + margin-top: 10px; +} +.login-page .login-box .login-footer p:last-child, +.login-page .omniauth-container .login-footer p:last-child { + margin-bottom: 0; +} +.login-page .login-box a.forgot, +.login-page .omniauth-container a.forgot { + float: right; + padding-top: 6px; +} .login-page .login-box .nav .active a, .login-page .omniauth-container .nav .active a { background: transparent; @@ -2132,7 +665,6 @@ table.code { background: none; margin-bottom: 16px; } - @media (max-width: 991.98px) { .login-page .omniauth-container form { width: 100%; @@ -2140,7 +672,6 @@ table.code { } .login-page .omniauth-container .omniauth-btn { width: 100%; - padding: 8px; } .login-page .new-session-tabs { display: flex; @@ -2148,6 +679,19 @@ table.code { border-top-right-radius: 4px; border-top-left-radius: 4px; } +.login-page .new-session-tabs.custom-provider-tabs { + flex-wrap: wrap; +} +.login-page .new-session-tabs.custom-provider-tabs li { + min-width: 85px; + flex-basis: auto; +} +.login-page .new-session-tabs.custom-provider-tabs li:nth-child(n + 5) { + border-top: 1px solid #dbdbdb; +} +.login-page .new-session-tabs.custom-provider-tabs a { + font-size: 16px; +} .login-page .new-session-tabs li { flex: 1; text-align: center; @@ -2170,17 +714,29 @@ table.code { .login-page .new-session-tabs li.active > a { cursor: default; } +.login-page .form-control:active, +.login-page .form-control:focus { + background-color: #fff; +} .login-page .submit-container { margin-top: 16px; } -.login-page input[type='submit'] { +.login-page input[type="submit"] { margin-bottom: 0; + display: block; + width: 100%; } .login-page .devise-errors h2 { margin-top: 0; font-size: 14px; color: #ae1800; } +@media (max-width: 575.98px) { + .login-page .col-md-5.float-right { + float: none !important; + margin-bottom: 45px; + } +} .devise-layout-html { margin: 0; padding: 0; @@ -2213,191 +769,57 @@ table.code { .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; - } +.gl-border-solid { + border-style: solid; } -.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; +.gl-border-gray-100 { + border-color: #dbdbdb; } -.avatar { - transition-property: none; - width: 40px; - height: 40px; - padding: 0; - background: #fdfdfd; - overflow: hidden; - border-color: rgba(0, 0, 0, 0.1); +.gl-border-1 { + border-width: 1px; } -.avatar.center { - font-size: 14px; - line-height: 1.8em; - text-align: center; +.gl-rounded-base { + border-radius: 0.25rem; } -.avatar.avatar-tile { - border-radius: 0; - border: 0; +.gl-text-green-600 { + color: #217645; } -.avatar-container { - overflow: hidden; - display: flex; +.gl-text-red-500 { + color: #dd2b0e; } -.avatar-container a { - width: 100%; - height: 100%; +.gl-display-flex { 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; +.gl-align-items-center { + align-items: center; } -.rect-avatar.s18 { - border-radius: 2px; +.gl-p-2 { + padding: 0.25rem; } -.rect-avatar.s40 { - border-radius: 4px; +.gl-p-4 { + padding: 0.75rem; } -.tab-width-8 { - -moz-tab-size: 8; - tab-size: 8; +.gl-mt-2 { + margin-top: 0.25rem; } -.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-mb-2 { + margin-bottom: 0.25rem; } -.gl-mt-5 { - margin-top: 1rem; +.gl-mb-3 { + margin-bottom: 0.5rem; } -.gl-ml-3 { - margin-left: 0.5rem; +.gl-mb-5 { + margin-bottom: 1rem; } -.content-wrapper > .alert-wrapper, -#content-body, .modal-dialog { - display: block; +.gl-text-left { + text-align: left; } -@import 'cloaking'; + +@import "startup/cloaking"; @include cloak-startup-scss(none); diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss index 5b3e2ab4cd0..6a60978b954 100644 --- a/app/assets/stylesheets/themes/theme_helper.scss +++ b/app/assets/stylesheets/themes/theme_helper.scss @@ -22,10 +22,7 @@ .container-fluid { .navbar-toggler { border-left: 1px solid lighten($border-and-box-shadow, 10%); - - svg { - fill: $search-and-nav-links; - } + color: $search-and-nav-links; } } diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index c22a1ae1187..cabbe5834cb 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -77,13 +77,6 @@ // https://gitlab.com/groups/gitlab-org/-/epics/2882 .gl-h-200\! { height: px-to-rem($grid-size * 25) !important; } -.d-sm-table-column { - @include media-breakpoint-up(sm) { - display: table-column !important; - } -} - -.gl-text-purple { color: $purple; } .gl-bg-purple-light { background-color: $purple-light; } // move this to GitLab UI once onboarding experiment is considered a success |