diff options
Diffstat (limited to 'app/assets/stylesheets')
34 files changed, 797 insertions, 709 deletions
diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss index 21d9db26382..6878e9a10d7 100644 --- a/app/assets/stylesheets/_page_specific_files.scss +++ b/app/assets/stylesheets/_page_specific_files.scss @@ -1,4 +1,3 @@ -@import './pages/branches'; @import './pages/colors'; @import './pages/commits'; @import './pages/detail_page'; @@ -9,11 +8,11 @@ @import './pages/issues'; @import './pages/labels'; @import './pages/login'; +@import './pages/ml_experiment_tracking'; @import './pages/merge_requests'; @import './pages/monitor'; @import './pages/note_form'; @import './pages/notes'; -@import './pages/notifications'; @import './pages/pipelines'; @import './pages/profile'; @import './pages/projects'; diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss index e69d7b4462d..27e9a041145 100644 --- a/app/assets/stylesheets/framework/calendar.scss +++ b/app/assets/stylesheets/framework/calendar.scss @@ -1,6 +1,4 @@ .user-contrib-cell { - stroke: $t-gray-a-08; - &:hover { cursor: pointer; stroke: $black; diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index d561a7d9450..c5a34ca4b31 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -46,6 +46,10 @@ } } + &.dropdown-reduced-height { + max-height: $dropdown-max-height; + } + @include media-breakpoint-down(xs) { width: 100%; } diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss index a31910e3090..68a3493670d 100644 --- a/app/assets/stylesheets/framework/emojis.scss +++ b/app/assets/stylesheets/framework/emojis.scss @@ -8,6 +8,7 @@ gl-emoji { } .user-status-emoji { + margin-left: $gl-padding-4; margin-right: $gl-padding-4; gl-emoji { diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index 07516275e58..b28302f29ef 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -290,6 +290,10 @@ padding: $gl-padding; } } + + .content-visibility-auto { + content-visibility: auto; + } } } diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index 02b76b89482..7a92adf7b7b 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -207,7 +207,7 @@ body { } @include media-breakpoint-up(sm) { - .logged-out-marketing-header-candidate { + .logged-out-marketing-header { --header-height: 72px; } } diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss index 900cf9fa4db..ea741af918c 100644 --- a/app/assets/stylesheets/framework/selects.scss +++ b/app/assets/stylesheets/framework/selects.scss @@ -1,15 +1,3 @@ -.ajax-users-select { - width: 400px; - - &.input-large { - width: 210px; - } - - &.input-clamp { - max-width: 100%; - } -} - .group-result { .group-image { float: left; @@ -49,7 +37,3 @@ } } } - -.ajax-users-dropdown { - min-width: 250px !important; -} diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss index 39786aa0138..14971e3b2ee 100644 --- a/app/assets/stylesheets/framework/snippets.scss +++ b/app/assets/stylesheets/framework/snippets.scss @@ -24,6 +24,10 @@ + .snippet-file-content { @include gl-mt-5; } + + &:last-of-type { + margin-bottom: 0; + } } .snippet-header { diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 9cfc5a0201e..99284ea0a64 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -88,14 +88,6 @@ $white-normal: #f0f0f0 !default; $white-dark: #eaeaea !default; $white-transparent: rgba($white, 0.8) !default; -$gray-lightest: #fdfdfd !default; -$gray-light: #fafafa !default; -$gray-lighter: #f9f9f9 !default; -$gray-normal: #f5f5f5 !default; -$gray-dark: darken($gray-light, $darken-dark-factor) !default; -$gray-darker: #eee !default; -$gray-darkest: #c4c4c4 !default; - $purple: #6d49cb !default; $purple-light: #ede8fb !default; @@ -103,11 +95,6 @@ $black: #000 !default; $black-transparent: rgba(0, 0, 0, 0.3) !default; $almost-black: #242424 !default; -$t-gray-a-02: rgba($black, 0.02) !default; -$t-gray-a-04: rgba($black, 0.04) !default; -$t-gray-a-06: rgba($black, 0.06) !default; -$t-gray-a-08: rgba($black, 0.08) !default; - $green-50: #ecf4ee !default; $green-100: #c3e6cd !default; $green-200: #91d4a8 !default; @@ -168,18 +155,33 @@ $purple-800: #453894 !default; $purple-900: #2f2a6b !default; $purple-950: #232150 !default; -$gray-10: #f5f5f5 !default; -$gray-50: #f0f0f0 !default; -$gray-100: #dbdbdb !default; -$gray-200: #bfbfbf !default; -$gray-300: #999 !default; -$gray-400: #868686 !default; -$gray-500: #666 !default; -$gray-600: #5e5e5e !default; -$gray-700: #525252 !default; -$gray-800: #404040 !default; -$gray-900: #303030 !default; -$gray-950: #1f1f1f !default; +$gray-10: #fbfafd !default; +$gray-50: #ececef !default; +$gray-100: #dcdcde !default; +$gray-200: #bfbfc3 !default; +$gray-300: #a4a3a8 !default; +$gray-400: #89888d !default; +$gray-500: #737278 !default; +$gray-600: #626168 !default; +$gray-700: #535158 !default; +$gray-800: #434248 !default; +$gray-900: #333238 !default; +$gray-950: #1f1e24 !default; + +$gray-lightest: lighten($gray-10, 1) !default; +$gray-light: $gray-10 !default; +$gray-lighter: lighten($gray-50, 4) !default; +$gray-normal: lighten($gray-50, 2) !default; +$gray-dark: darken($gray-light, $darken-dark-factor) !default; +$gray-darker: $gray-50 !default; +$gray-darkest: $gray-200 !default; + +$t-gray-a-02: rgba($gray-950, 0.02) !default; +$t-gray-a-04: rgba($gray-950, 0.04) !default; +$t-gray-a-06: rgba($gray-950, 0.06) !default; +$t-gray-a-08: rgba($gray-950, 0.08) !default; +$t-gray-a-16: rgba($gray-950, 0.16) !default; +$t-gray-a-24: rgba($gray-950, 0.24) !default; $greens: ( '50': $green-50, @@ -346,6 +348,20 @@ $theme-light-red-500: #c24b38; $theme-light-red-600: #b03927; $theme-light-red-700: #a62e21; +// Data visualization color palette + +$data-viz-blue-50: #e9ebff; +$data-viz-blue-100: #d4dcfa; +$data-viz-blue-200: #b7c6ff; +$data-viz-blue-300: #97acff; +$data-viz-blue-400: #748eff; +$data-viz-blue-500: #5772ff; +$data-viz-blue-600: #445cf2; +$data-viz-blue-700: #3547de; +$data-viz-blue-800: #232fcf; +$data-viz-blue-900: #1e23a8; +$data-viz-blue-950: #11118a; + $border-white-light: darken($white, $darken-border-factor) !default; $border-white-normal: darken($white-normal, $darken-border-factor) !default; @@ -356,7 +372,7 @@ $border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor); /* * UI elements */ -$contextual-sidebar-bg-color: #f5f5f5; +$contextual-sidebar-bg-color: $gray-10; $contextual-sidebar-border-color: #e9e9e9; $border-color: $gray-100; $shadow-color: $t-gray-a-08; @@ -660,18 +676,7 @@ $ci-skipped-color: #888; */ $issue-boards-font-size: 14px; $issue-boards-card-shadow: rgba(0, 0, 0, 0.1); -/* - The following heights are used in boards.scss and are used for calculation of the board height. - They probably should be derived in a smarter way. -*/ $issue-boards-filter-height: 68px; -$issue-boards-filter-height-md: 110px; -$issue-boards-filter-height-sm: 299px; -$issue-boards-breadcrumbs-height-xs: 63px; -$issue-board-list-difference-xs: calc(#{$header-height} + #{$issue-boards-breadcrumbs-height-xs}); -$issue-board-list-difference-sm: calc(#{$header-height} + #{$breadcrumb-min-height}); -$issue-board-list-difference-md: calc(#{$issue-board-list-difference-sm} + #{$issue-boards-filter-height-md}); -$issue-board-list-difference-lg: calc(#{$issue-board-list-difference-sm} + #{$issue-boards-filter-height}); /* The following heights are used in environment_logs.scss and are used for calculation of the log viewer height. */ @@ -710,11 +715,11 @@ $job-arrow-margin: 55px; */ // See https://gitlab.com/gitlab-org/gitlab/-/issues/332150 to align with Pajamas Design System $calendar-activity-colors: ( - #f5f5f5, - #d4dcfa, - #748eff, - #3547de, - #11118a, + $gray-50, + $data-viz-blue-100, + $data-viz-blue-400, + $data-viz-blue-700, + $data-viz-blue-950, ) !default; /* @@ -756,12 +761,6 @@ $document-index-color: #888; $help-shortcut-header-color: #333; /* -* Issues -*/ -$issues-today-bg: #f3fff2 !default; -$issues-today-border: #e1e8d5 !default; - -/* * Label */ $label-font-size: 12px; diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss index 7fb2bf9a875..3438a73eff6 100644 --- a/app/assets/stylesheets/highlight/themes/dark.scss +++ b/app/assets/stylesheets/highlight/themes/dark.scss @@ -125,6 +125,14 @@ $dark-il: #de935f; } .code.dark { + // Highlight.js theme overrides (https://gitlab.com/gitlab-org/gitlab/-/issues/365167) + // We should be able to remove the overrides once the upstream issue is fixed (https://github.com/sourcegraph/sourcegraph/issues/23251) + @include hljs-override('title\\.class', $dark-nc); + @include hljs-override('title\\.class\\.inherited', $dark-no); + @include hljs-override('variable\\.constant', $dark-no); + @include hljs-override('title\\.function', $dark-nf); + + // Line numbers .file-line-num { @include line-link($white, 'link'); diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss index 66cada9181c..75dd342393d 100644 --- a/app/assets/stylesheets/highlight/themes/monokai.scss +++ b/app/assets/stylesheets/highlight/themes/monokai.scss @@ -104,7 +104,7 @@ $monokai-gh: #75715e; @include hljs-override('selector-tag', $monokai-nt); @include hljs-override('keyword', $monokai-k); @include hljs-override('variable', $monokai-nv); - @include hljs-override('variable.language_', $monokai-k); + @include hljs-override('variable\\.language_', $monokai-k); @include hljs-override('title', $monokai-nf); @include hljs-override('name', $monokai-k); @include hljs-override('tag', $monokai-nt); @@ -116,7 +116,13 @@ $monokai-gh: #75715e; @include hljs-override('bullet', $monokai-n); @include hljs-override('subst', $monokai-p); @include hljs-override('symbol', $monokai-ss); - @include hljs-override('title.class_.inherited__', $monokai-no); + @include hljs-override('title\\.class_\\.inherited__', $monokai-no); + @include hljs-override('title\\.class\\.inherited', $monokai-no); + @include hljs-override('title\\.class', $monokai-nc); + @include hljs-override('title\\.function', $monokai-nf); + @include hljs-override('variable\\.constant', $monokai-no); + @include hljs-override('variable\\.language', $monokai-nb); + @include hljs-override('params', $monokai-nb); // Line numbers .file-line-num { diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss index a1bba8720a2..c0b2fb90aa0 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss @@ -107,7 +107,9 @@ $solarized-dark-il: #2aa198; @include hljs-override('selector-tag', $solarized-dark-nt); @include hljs-override('keyword', $solarized-dark-k); @include hljs-override('variable', $solarized-dark-nv); - @include hljs-override('variable.language_', $solarized-dark-k); + @include hljs-override('variable\\.language_', $solarized-dark-k); + @include hljs-override('variable\\.language', $solarized-dark-k); + @include hljs-override('variable\\.constant', $solarized-dark-no); @include hljs-override('title', $solarized-dark-nf); @include hljs-override('name', $solarized-dark-k); @include hljs-override('tag', $solarized-dark-nt); @@ -119,7 +121,11 @@ $solarized-dark-il: #2aa198; @include hljs-override('bullet', $solarized-dark-n); @include hljs-override('subst', $solarized-dark-p); @include hljs-override('symbol', $solarized-dark-ni); - @include hljs-override('title.class_.inherited__', $solarized-dark-no); + @include hljs-override('title\\.class_\\.inherited__', $solarized-dark-no); + @include hljs-override('title\\.class', $solarized-dark-nc); + @include hljs-override('title\\.class\\.inherited', $solarized-dark-no); + @include hljs-override('title\\.function', $solarized-dark-nf); + @include hljs-override('params', $solarized-dark-nb); // Line numbers .file-line-num { diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss index 33945f7cda9..921b36dd610 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-light.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss @@ -106,7 +106,17 @@ $solarized-light-il: #2aa198; } .code.solarized-light { - @include hljs-override('title.class_.inherited__', $solarized-light-no); + // Highlight.js theme overrides (https://gitlab.com/gitlab-org/gitlab/-/issues/365167) + // We should be able to remove the overrides once the upstream issue is fixed (https://github.com/sourcegraph/sourcegraph/issues/23251) + @include hljs-override('keyword', $solarized-light-k); + @include hljs-override('title\\.class_\\.inherited__', $solarized-light-no); + @include hljs-override('title\\.class\\.inherited', $solarized-light-no); + @include hljs-override('title\\.class', $solarized-light-nc); + @include hljs-override('title\\.function', $solarized-light-nf); + @include hljs-override('variable\\.constant', $solarized-light-no); + @include hljs-override('variable\\.language', $solarized-light-nb); + @include hljs-override('params', $solarized-light-nb); + // Line numbers .file-line-num { @include line-link($black, 'link'); diff --git a/app/assets/stylesheets/highlight/themes/white.scss b/app/assets/stylesheets/highlight/themes/white.scss index b0f6595feff..f6cce25671f 100644 --- a/app/assets/stylesheets/highlight/themes/white.scss +++ b/app/assets/stylesheets/highlight/themes/white.scss @@ -2,9 +2,18 @@ @import '../white_base'; @include conflict-colors('white'); + + // Highlight.js theme overrides (https://gitlab.com/gitlab-org/gitlab/-/issues/365167) + // We should be able to remove the overrides once the upstream issue is fixed (https://github.com/sourcegraph/sourcegraph/issues/23251) @include hljs-override('variable', $white-nv); @include hljs-override('symbol', $white-ss); - @include hljs-override('title.class_.inherited__', $white-no); + @include hljs-override('title\\.class_\\.inherited__', $white-no); + @include hljs-override('title\\.class\\.inherited', $white-no); + @include hljs-override('title\\.class', $white-nc); + @include hljs-override('variable\\.constant', $white-no); + @include hljs-override('variable\\.language', $white-nb); + @include hljs-override('title\\.function', $white-nf); + @include hljs-override('params', $white-nb); } :root { diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss index d45bc865da5..0cc1fb40e4a 100644 --- a/app/assets/stylesheets/page_bundles/boards.scss +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -18,38 +18,9 @@ .boards-list, .board-swimlanes { - height: calc(100vh - #{$issue-board-list-difference-xs}); overflow-x: scroll; min-height: 200px; border-left: 8px solid var(--gray-10, $white); - - @include media-breakpoint-only(sm) { - height: calc(100vh - #{$issue-board-list-difference-sm}); - } - - @include media-breakpoint-up(md) { - height: calc(100vh - #{$issue-board-list-difference-md}); - } - - @include media-breakpoint-up(lg) { - height: calc(100vh - #{$issue-board-list-difference-lg}); - } - - .with-performance-bar & { - height: calc(100vh - #{$issue-board-list-difference-xs} - #{$performance-bar-height}); - - @include media-breakpoint-only(sm) { - height: calc(100vh - #{$issue-board-list-difference-sm} - #{$performance-bar-height}); - } - - @include media-breakpoint-up(md) { - height: calc(100vh - #{$issue-board-list-difference-md} - #{$performance-bar-height}); - } - - @include media-breakpoint-up(lg) { - height: calc(100vh - #{$issue-board-list-difference-lg} - #{$performance-bar-height}); - } - } } .board { diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/page_bundles/branches.scss index 18158fab75f..2aa90529e22 100644 --- a/app/assets/stylesheets/pages/branches.scss +++ b/app/assets/stylesheets/page_bundles/branches.scss @@ -1,3 +1,5 @@ +@import 'mixins_and_variables_and_functions'; + .branch-info { flex: auto; min-width: 0; diff --git a/app/assets/stylesheets/page_bundles/clusters.scss b/app/assets/stylesheets/page_bundles/clusters.scss index a877ae72e31..4f29ff4b1ad 100644 --- a/app/assets/stylesheets/page_bundles/clusters.scss +++ b/app/assets/stylesheets/page_bundles/clusters.scss @@ -20,3 +20,7 @@ min-height: 372px; } } + +.cluster-button-container:focus-within { + @include gl-focus; +} diff --git a/app/assets/stylesheets/page_bundles/dashboard.scss b/app/assets/stylesheets/page_bundles/dashboard.scss new file mode 100644 index 00000000000..986a9cc530d --- /dev/null +++ b/app/assets/stylesheets/page_bundles/dashboard.scss @@ -0,0 +1,5 @@ +@import 'mixins_and_variables_and_functions'; + +.empty-state .svg-250 img { + max-width: $gl-spacing-scale-20; +} diff --git a/app/assets/stylesheets/page_bundles/design_management.scss b/app/assets/stylesheets/page_bundles/design_management.scss new file mode 100644 index 00000000000..143682e1cd7 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/design_management.scss @@ -0,0 +1,215 @@ +@import 'mixins_and_variables_and_functions'; + +$design-pin-diameter: 28px; +$design-pin-diameter-sm: 24px; +$t-gray-a-16-design-pin: rgba($black, 0.16); + +.design-card-header { + background: transparent; +} + +.design-checkbox { + position: absolute; + top: $gl-padding; + left: 30px; +} + +.layout-page.design-detail-layout { + max-height: 100vh; +} + +.design-detail { + background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity); + + .with-performance-bar & { + top: 35px; + } + + .comment-indicator { + border-radius: 50%; + } + + .comment-indicator, + .frame .design-note-pin { + &:active { + cursor: grabbing; + } + } +} + +.design-list-item { + height: 280px; + text-decoration: none; + + .icon-version-status { + position: absolute; + right: 10px; + top: 10px; + } + + .card-body { + height: 230px; + } +} + +// This is temporary class to be removed after feature flag removal: https://gitlab.com/gitlab-org/gitlab/-/issues/223197 +.design-list-item-new { + height: 210px; +} + +.design-note-pin { + display: flex; + height: $design-pin-diameter; + width: $design-pin-diameter; + box-sizing: content-box; + background-color: var(--purple-500, $purple-500); + color: var(--white, $white); + font-weight: $gl-font-weight-bold; + border-radius: 50%; + z-index: 1; + padding: 0; + border: 0; + + &.draft { + background-color: var(--orange-500, $orange-500); + } + + &.resolved { + background-color: var(--gray-500, $gray-500); + } + + &.on-image { + box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24; + border: var(--white, $white) 2px solid; + will-change: transform, box-shadow, opacity; + // NOTE: verbose transition property required for Safari + transition: transform $general-hover-transition-duration linear, box-shadow $general-hover-transition-duration linear, opacity $general-hover-transition-duration linear; + transform-origin: 0 0; + transform: translate(-50%, -50%); + + &:hover { + transform: scale(1.2) translate(-50%, -50%); + } + + &:active { + box-shadow: 0 0 4px $t-gray-a-16-design-pin, 0 4px 12px $t-gray-a-16-design-pin; + } + + &.inactive { + @include gl-opacity-5; + + &:hover { + @include gl-opacity-10; + } + } + } + + &.small { + position: absolute; + border: 1px solid var(--white, $white); + height: $design-pin-diameter-sm; + width: $design-pin-diameter-sm; + } + + &.user-avatar { + top: 25px; + right: 8px; + } +} + +.design-scaler-wrapper { + bottom: 0; + left: 50%; + transform: translateX(-50%); +} + +.image-notes { + overflow-y: scroll; + padding: $gl-padding; + padding-top: 50px; + background-color: var(--white, $white); + flex-shrink: 0; + min-width: 400px; + flex-basis: 28%; + + .link-inherit-color { + &:hover, + &:active, + &:focus { + color: inherit; + text-decoration: none; + } + } + + .toggle-comments { + line-height: 20px; + border-top: 1px solid var(--border-color, $border-color); + + &.expanded { + border-bottom: 1px solid var(--border-color, $border-color); + } + + .toggle-comments-button:focus { + text-decoration: none; + color: var(--blue-600, $blue-600); + } + } + + .design-note-pin { + margin-left: $gl-padding; + } + + .design-discussion { + margin: $gl-padding 0; + + &::before { + content: ''; + border-left: 1px solid var(--gray-100, $gray-100); + position: absolute; + left: 28px; + top: -17px; + height: 17px; + } + + .design-note { + padding: $gl-padding; + list-style: none; + transition: background $gl-transition-duration-medium $general-hover-transition-curve; + border-top-left-radius: $border-radius-default; // same border radius used by .bordered-box + border-top-right-radius: $border-radius-default; + + a { + color: inherit; + } + + .note-text a { + color: var(--blue-600, $blue-600); + } + } + + .reply-wrapper { + padding: $gl-padding; + } + } + + .reply-wrapper { + border-top: 1px solid var(--border-color, $border-color); + } + + .new-discussion-disclaimer { + line-height: 20px; + } +} + +@media (max-width: map-get($grid-breakpoints, lg)) { + .design-detail { + overflow-y: scroll; + } + + .image-notes { + overflow-y: auto; + min-width: 100%; + flex-grow: 1; + flex-basis: auto; + } +} diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index 3951f72112f..ec75c53d026 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -568,6 +568,11 @@ $ide-commit-header-height: 48px; text-decoration: line-through; } } + + .gl-form-radio, + .gl-form-checkbox { + color: var(--ide-text-color, $gl-text-color); + } } .ide-sidebar-link { diff --git a/app/assets/stylesheets/page_bundles/issues_show.scss b/app/assets/stylesheets/page_bundles/issues_show.scss index bbdcf1ea0c6..26d694f7421 100644 --- a/app/assets/stylesheets/page_bundles/issues_show.scss +++ b/app/assets/stylesheets/page_bundles/issues_show.scss @@ -1,9 +1,5 @@ @import 'mixins_and_variables_and_functions'; -$design-pin-diameter: 28px; -$design-pin-diameter-sm: 24px; -$t-gray-a-16-design-pin: rgba($black, 0.16); - .description { li { position: relative; @@ -27,216 +23,6 @@ $t-gray-a-16-design-pin: rgba($black, 0.16); } } -.design-card-header { - background: transparent; -} - -.design-checkbox { - position: absolute; - top: $gl-padding; - left: 30px; -} - -.layout-page.design-detail-layout { - max-height: 100vh; -} - -.design-detail { - background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity); - - .with-performance-bar & { - top: 35px; - } - - .comment-indicator { - border-radius: 50%; - } - - .comment-indicator, - .frame .design-note-pin { - &:active { - cursor: grabbing; - } - } -} - -.design-list-item { - height: 280px; - text-decoration: none; - - .icon-version-status { - position: absolute; - right: 10px; - top: 10px; - } - - .card-body { - height: 230px; - } -} - -// This is temporary class to be removed after feature flag removal: https://gitlab.com/gitlab-org/gitlab/-/issues/223197 -.design-list-item-new { - height: 210px; -} - -.design-note-pin { - display: flex; - height: $design-pin-diameter; - width: $design-pin-diameter; - box-sizing: content-box; - background-color: var(--purple-500, $purple-500); - color: var(--white, $white); - font-weight: $gl-font-weight-bold; - border-radius: 50%; - z-index: 1; - padding: 0; - border: 0; - - &.draft { - background-color: var(--orange-500, $orange-500); - } - - &.resolved { - background-color: var(--gray-500, $gray-500); - } - - &.on-image { - box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24; - border: var(--white, $white) 2px solid; - will-change: transform, box-shadow, opacity; - // NOTE: verbose transition property required for Safari - transition: transform $general-hover-transition-duration linear, box-shadow $general-hover-transition-duration linear, opacity $general-hover-transition-duration linear; - transform-origin: 0 0; - transform: translate(-50%, -50%); - - &:hover { - transform: scale(1.2) translate(-50%, -50%); - } - - &:active { - box-shadow: 0 0 4px $t-gray-a-16-design-pin, 0 4px 12px $t-gray-a-16-design-pin; - } - - &.inactive { - @include gl-opacity-5; - - &:hover { - @include gl-opacity-10; - } - } - } - - &.small { - position: absolute; - border: 1px solid var(--white, $white); - height: $design-pin-diameter-sm; - width: $design-pin-diameter-sm; - } - - &.user-avatar { - top: 25px; - right: 8px; - } -} - -.design-scaler-wrapper { - bottom: 0; - left: 50%; - transform: translateX(-50%); -} - -.image-notes { - overflow-y: scroll; - padding: $gl-padding; - padding-top: 50px; - background-color: var(--white, $white); - flex-shrink: 0; - min-width: 400px; - flex-basis: 28%; - - .link-inherit-color { - &:hover, - &:active, - &:focus { - color: inherit; - text-decoration: none; - } - } - - .toggle-comments { - line-height: 20px; - border-top: 1px solid var(--border-color, $border-color); - - &.expanded { - border-bottom: 1px solid var(--border-color, $border-color); - } - - .toggle-comments-button:focus { - text-decoration: none; - color: var(--blue-600, $blue-600); - } - } - - .design-note-pin { - margin-left: $gl-padding; - } - - .design-discussion { - margin: $gl-padding 0; - - &::before { - content: ''; - border-left: 1px solid var(--gray-100, $gray-100); - position: absolute; - left: 28px; - top: -17px; - height: 17px; - } - - .design-note { - padding: $gl-padding; - list-style: none; - transition: background $gl-transition-duration-medium $general-hover-transition-curve; - border-top-left-radius: $border-radius-default; // same border radius used by .bordered-box - border-top-right-radius: $border-radius-default; - - a { - color: inherit; - } - - .note-text a { - color: var(--blue-600, $blue-600); - } - } - - .reply-wrapper { - padding: $gl-padding; - } - } - - .reply-wrapper { - border-top: 1px solid var(--border-color, $border-color); - } - - .new-discussion-disclaimer { - line-height: 20px; - } -} - -@media (max-width: map-get($grid-breakpoints, lg)) { - .design-detail { - overflow-y: scroll; - } - - .image-notes { - overflow-y: auto; - min-width: 100%; - flex-grow: 1; - flex-basis: auto; - } -} - .is-ghost { opacity: 0.3; pointer-events: none; diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index b2fbce7cb4b..771428b49e0 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -269,7 +269,7 @@ $tabs-holder-z-index: 250; position: -webkit-sticky; position: sticky; - top: var(--top-pos); + top: calc(var(--top-pos) + var(--performance-bar-height, 0px)); max-height: calc(100vh - var(--top-pos) - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--review-bar-height, 0px)); .drag-handle { @@ -391,6 +391,10 @@ $tabs-holder-z-index: 250; text-overflow: ellipsis; min-width: 100px; + display: grid; + grid-template-columns: max-content minmax(0, max-content) max-content; + grid-gap: $gl-spacing-scale-2; + @include media-breakpoint-up(xs) { min-width: 0; max-width: 100%; @@ -404,6 +408,7 @@ $tabs-holder-z-index: 250; .deploy-heading, .merge-train-position-indicator { + padding: $gl-padding-8; @include media-breakpoint-up(md) { padding: $gl-padding-8 $gl-padding; } @@ -476,6 +481,19 @@ $tabs-holder-z-index: 250; border-radius: $border-radius-default; background: var(--white, $white); + > .mr-widget-section { + > :first-child { + border-top-left-radius: $border-radius-default - 1px; + border-top-right-radius: $border-radius-default - 1px; + } + + > :last-child, + .deploy-heading:last-child { + border-bottom-left-radius: $border-radius-default - 1px; + border-bottom-right-radius: $border-radius-default - 1px; + } + } + > .mr-widget-border-top:first-of-type { border-top: 0; } @@ -637,7 +655,6 @@ $tabs-holder-z-index: 250; word-break: break-all; } - .deploy-link, .label-branch { &.label-truncate { // NOTE: This selector targets its children because some of the HTML comes from @@ -808,6 +825,13 @@ $tabs-holder-z-index: 250; .mr-widget-border-top { border-top: 1px solid var(--border-color, $border-color); + + &:last-child { + .report-block-container { + border-bottom-left-radius: $border-radius-default - 1px; + border-bottom-right-radius: $border-radius-default - 1px; + } + } } .mr-widget-extension { @@ -875,9 +899,12 @@ $tabs-holder-z-index: 250; } .mr-widget-workflow { - margin-top: $gl-padding; position: relative; + &:not(:first-child) { + margin-top: $gl-padding; + } + &:not(:last-child)::before { content: ''; border-left: 2px solid var(--gray-10, $gray-10); @@ -1078,6 +1105,31 @@ $tabs-holder-z-index: 250; border-top: 0; } +.mr-widget-status-icon-level-1::before { + @include gl-content-empty; + @include gl-absolute; + @include gl-left-0; + @include gl-top-0; + @include gl-bottom-0; + @include gl-right-0; + @include gl-opacity-3; + @include gl-rounded-full; + @include gl-border-solid; + @include gl-border-4; +} + +.mr-widget-status-icon-level-1::after { + @include gl-content-empty; + @include gl-absolute; + @include gl-rounded-full; + @include gl-border-solid; + @include gl-border-4; + @include gl-left-2; + @include gl-right-2; + @include gl-top-2; + @include gl-bottom-2; +} + .memory-graph-container { background: var(--white, $white); border: 1px solid var(--gray-100, $gray-100); @@ -1154,3 +1206,19 @@ $tabs-holder-z-index: 250; margin-bottom: 0; } } + +.commits ol:not(:last-of-type) { + margin-bottom: 0; +} + +.mr-section-container { + .state-container-action-buttons { + @include media-breakpoint-up(md) { + flex-direction: row-reverse; + + .btn { + margin-left: auto; + } + } + } +} diff --git a/app/assets/stylesheets/pages/notifications.scss b/app/assets/stylesheets/page_bundles/notifications.scss index 2fd2757cf08..88437954f4c 100644 --- a/app/assets/stylesheets/pages/notifications.scss +++ b/app/assets/stylesheets/page_bundles/notifications.scss @@ -1,3 +1,5 @@ +@import 'mixins_and_variables_and_functions'; + .notification-list-item { @include media-breakpoint-down(sm) { .notification-dropdown { diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 6070311dcb6..1b6e7954366 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -76,10 +76,6 @@ .btn-edit { margin-left: auto; } - - .emoji-block { - padding: $gl-padding-4 0; - } } .issuable-show-labels { diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index c88834c088f..c2ac4f32480 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -75,11 +75,6 @@ ul.related-merge-requests > li gl-emoji { .merge-request, .issue { - &.today { - background: $issues-today-bg; - border-color: $issues-today-border; - } - &.closed, &.merged { background: $gray-light; @@ -123,9 +118,6 @@ ul.related-merge-requests > li gl-emoji { } .new-branch-col { - @include gl-pb-3; - @include gl-my-2; - .discussion-filter-container { &:not(:last-child) { margin-right: $gl-spacing-scale-3; @@ -225,7 +217,7 @@ ul.related-merge-requests > li gl-emoji { .new-branch-col { @include gl-pb-0; - align-self: center; + align-self: flex-end; } } diff --git a/app/assets/stylesheets/pages/ml_experiment_tracking.scss b/app/assets/stylesheets/pages/ml_experiment_tracking.scss new file mode 100644 index 00000000000..2dff51cff92 --- /dev/null +++ b/app/assets/stylesheets/pages/ml_experiment_tracking.scss @@ -0,0 +1,16 @@ +@import '../page_bundles/mixins_and_variables_and_functions'; + +.ml-experiment-row { + .title { + margin-bottom: $gl-spacing-scale-1; + font-weight: $gl-font-weight-bold; + } + + .ml-experiment-info { + color: $gl-text-color-secondary; + } + + a { + color: $gl-text-color; + } +} diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 438b7b1afa6..fa3c87490f1 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -6,7 +6,7 @@ $system-note-svg-size: 1rem; content: ''; border-left: 2px solid var(--gray-10, $gray-10); position: absolute; - top: 0; + top: $gl-padding-6; bottom: 0; left: calc(#{$left} - 1px); height: calc(100% + 1.5rem); @@ -421,7 +421,7 @@ $system-note-svg-size: 1rem; height: $system-note-icon-size; border: 1px solid $gray-10; border-radius: $system-note-icon-size; - margin: -8px 0 0; + margin: -6px 0 0; svg { width: $system-note-svg-size; @@ -968,7 +968,7 @@ $system-note-svg-size: 1rem; height: 12px; } - &:hover, + &:hover:not([disabled]), &.inverted { &::before { background-color: $white; diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index be8707dcd50..bf20204cfd9 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -277,139 +277,128 @@ .description p { margin-bottom: 0; color: $gl-text-color-secondary; + @include str-truncated(100%); } } .projects-list { @include basic-list; - display: flex; - flex-direction: column; + @include gl-display-table; .project-row { - @include basic-list-stats; - display: flex; - align-items: center; - padding: $gl-padding-12 0; + @include gl-display-table-row; } - h2 { - font-size: $gl-font-size; - font-weight: $gl-font-weight-bold; - margin-bottom: 0; - - @include media-breakpoint-up(sm) { - .namespace-name { - font-weight: $gl-font-weight-normal; - } - } + .project-cell { + @include gl-display-table-cell; + @include gl-border-b; + @include gl-vertical-align-top; + @include gl-py-4; } - .avatar-container { - flex: 0 0 auto; - align-self: flex-start; + .project-row:last-of-type { + .project-cell { + @include gl-border-none; + } } - .project-details { - min-width: 0; - line-height: $gl-line-height; - .flex-wrapper { - min-width: 0; - margin-top: -$gl-padding-8; // negative margin required for flex-wrap - flex: 1 1 100%; + &.admin-projects, + &.group-settings-projects { + .project-row { + @include basic-list-stats; - .project-title { - line-height: 20px; + .description > p { + @include gl-mb-0; } } + .controls { + @include gl-line-height-42; + } + } + + .project-details { + max-width: 625px; + p, .commit-row-message { + @include gl-mb-0; @include str-truncated(100%); - margin-bottom: 0; - } - - .user-access-role { - margin: 0; } .description { line-height: 1.5; - color: $gl-text-color-secondary; - } - - @include media-breakpoint-down(md) { - .user-access-role { - line-height: $gl-line-height-14; - } + max-height: $gl-spacing-scale-8; } } .ci-status-link { - display: inline-block; - line-height: 17px; - vertical-align: middle; - - &:hover { - text-decoration: none; - } + @include gl-text-decoration-none; } - .controls { - @include media-breakpoint-down(xs) { - margin-top: $gl-padding-8; + &:not(.compact) { + .controls { + @include media-breakpoint-up(lg) { + @include gl-justify-content-start; + @include gl-pr-9; + + &:not(.with-pipeline-status) { + .icon-wrapper:first-of-type { + @include media-breakpoint-up(lg) { + @include gl-ml-7; + } + } + } + } } - @include media-breakpoint-up(sm) { - margin-top: 0; + .project-details { + p, + .commit-row-message { + @include gl-white-space-normal; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + /* stylelint-disable-next-line value-no-vendor-prefix */ + display: -webkit-box; + } } + } - @include media-breakpoint-up(lg) { - flex: 1 1 40%; + .controls { + @include media-breakpoint-up(sm) { + @include gl-justify-content-end; } .icon-wrapper { - color: inherit; - margin-right: $gl-padding; - @include media-breakpoint-down(md) { - margin-right: 0; - margin-left: $gl-padding-8; + @include gl-mr-0; + @include gl-ml-3; } @include media-breakpoint-down(xs) { &:first-child { - margin-left: 0; - } - } - } - - &:not(.with-pipeline-status) { - .icon-wrapper:first-of-type { - @include media-breakpoint-up(lg) { - margin-left: $gl-padding-32; + @include gl-ml-0; } } } .ci-status-link { - display: inline-flex; + @include gl-display-inline-flex; } } .icon-container { - @include media-breakpoint-down(xs) { - margin-right: $gl-padding-8; + @include media-breakpoint-up(lg) { + margin-right: $gl-spacing-scale-7; } } &.compact { - .project-row { - padding: $gl-padding 0; - } - - h2 { - font-size: $gl-font-size; + .description { + @include gl-w-full; + @include gl-display-table; + @include gl-table-layout-fixed; } .avatar-container { @@ -422,27 +411,15 @@ } } - .controls { - @include media-breakpoint-up(sm) { - margin-top: 0; - } - } - .updated-note { @include media-breakpoint-up(sm) { - margin-top: $gl-padding-8; + @include gl-mt-2; } } .icon-wrapper { - margin-left: $gl-padding-8; - margin-right: 0; - - @include media-breakpoint-down(xs) { - &:first-child { - margin-left: 0; - } - } + @include gl-ml-3; + @include gl-mr-0; } .user-access-role { @@ -451,10 +428,6 @@ } @include media-breakpoint-down(md) { - h2 { - font-size: $gl-font-size; - } - .avatar-container { @include avatar-size(40px, 10px); min-height: 40px; @@ -468,24 +441,18 @@ @include media-breakpoint-down(md) { .updated-note { - margin-top: $gl-padding-8; - text-align: right; + @include gl-mt-3; + @include gl-text-right; } } .forks, .pipeline-status, .updated-note { - display: flex; + @include gl-display-flex; } @include media-breakpoint-down(md) { - &:not(.explore) { - .forks { - display: none; - } - } - &.explore { .pipeline-status, .updated-note { @@ -496,8 +463,8 @@ @include media-breakpoint-down(xs) { .updated-note { - margin-top: 0; - text-align: left; + @include gl-mt-0; + @include gl-text-left; } } } diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index a8027d2a5f5..1bca04e5eb1 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -52,13 +52,6 @@ input[type='checkbox']:hover { .global-search-container { flex-grow: 1; } - - @include media-breakpoint-down(lg) { - .title-container { - flex: 0; - overflow: hidden; - } - } } } diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index 32c3ce1ba8c..11131cc1a4b 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -6,15 +6,15 @@ color-scheme: dark; } body.gl-dark { - --gray-10: #1f1f1f; - --gray-50: #303030; - --gray-100: #404040; - --gray-200: #525252; - --gray-700: #dbdbdb; - --gray-900: #fafafa; + --gray-10: #1f1e24; + --gray-50: #333238; + --gray-100: #434248; + --gray-200: #535158; + --gray-700: #bfbfc3; + --gray-900: #ececef; --green-100: #0d532a; --green-700: #91d4a8; - --gl-text-color: #fafafa; + --gl-text-color: #ececef; --border-color: #4f4f4f; --black: #fff; } @@ -42,9 +42,9 @@ body { font-size: 1rem; font-weight: 400; line-height: 1.5; - color: #fafafa; + color: #ececef; text-align: left; - background-color: #1f1f1f; + background-color: #1f1e24; } ul { margin-top: 0; @@ -118,7 +118,7 @@ kbd { padding: 0.2rem 0.4rem; font-size: 90%; color: #333; - background-color: #fafafa; + background-color: #ececef; border-radius: 0.2rem; } kbd kbd { @@ -141,24 +141,24 @@ kbd kbd { font-size: 0.875rem; font-weight: 400; line-height: 1.5; - color: #fafafa; + color: #ececef; background-color: #333; background-clip: padding-box; - border: 1px solid #868686; + border: 1px solid #737278; border-radius: 0.25rem; } @media (prefers-reduced-motion: reduce) { } .form-control:-moz-focusring { color: transparent; - text-shadow: 0 0 0 #fafafa; + text-shadow: 0 0 0 #ececef; } .form-control::placeholder { - color: #bfbfbf; + color: #a4a3a8; opacity: 1; } .form-control:disabled { - background-color: #303030; + background-color: #333238; opacity: 1; } .form-inline { @@ -176,7 +176,7 @@ kbd kbd { .btn { display: inline-block; font-weight: 400; - color: #fafafa; + color: #ececef; text-align: center; vertical-align: middle; user-select: none; @@ -212,7 +212,7 @@ kbd kbd { padding: 0.5rem 0; margin: 0.125rem 0 0; font-size: 1rem; - color: #fafafa; + color: #ececef; text-align: left; list-style: none; background-color: #333; @@ -319,15 +319,15 @@ kbd kbd { border-radius: 10rem; } .badge-success { - color: #fff; + color: #fbfafd; background-color: #2da160; } .badge-info { - color: #fff; + color: #fbfafd; background-color: #428fdc; } .badge-warning { - color: #fff; + color: #fbfafd; background-color: #c17d10; } .rounded-circle { @@ -371,7 +371,7 @@ kbd kbd { .gl-avatar { border-width: 1px; border-style: solid; - border-color: rgba(0, 0, 0, 0.08); + border-color: rgba(251, 250, 253, 0.08); overflow: hidden; flex-shrink: 0; } @@ -455,8 +455,8 @@ a.gl-badge.badge-warning:active { padding-left: 0.75rem; padding-right: 0.75rem; height: auto; - color: #fafafa; - box-shadow: inset 0 0 0 1px #868686; + color: #ececef; + box-shadow: inset 0 0 0 1px #737278; border-style: none; appearance: none; -moz-appearance: none; @@ -465,17 +465,17 @@ a.gl-badge.badge-warning:active { .gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only, .gl-form-input.form-control:disabled, .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only { - background-color: #1f1f1f; - box-shadow: inset 0 0 0 1px #404040; + background-color: #1f1e24; + box-shadow: inset 0 0 0 1px #434248; } .gl-form-input:disabled, .gl-form-input.form-control:disabled { cursor: not-allowed; - color: #999; + color: #89888d; } .gl-form-input::placeholder, .gl-form-input.form-control::placeholder { - color: #868686; + color: #737278; } .gl-icon { fill: currentColor; @@ -518,9 +518,9 @@ a.gl-badge.badge-warning:active { padding-right: 0.75rem; background-color: transparent; line-height: 1rem; - color: #fafafa; + color: #ececef; fill: currentColor; - box-shadow: inset 0 0 0 1px #525252; + box-shadow: inset 0 0 0 1px #535158; justify-content: center; align-items: center; font-size: 0.875rem; @@ -531,20 +531,20 @@ a.gl-badge.badge-warning:active { } .gl-button.gl-button.btn-default:active, .gl-button.gl-button.btn-default.active { - box-shadow: inset 0 0 0 1px #bfbfbf, 0 0 0 1px #333, 0 0 0 3px #1f75cb; + box-shadow: inset 0 0 0 1px #a4a3a8, 0 0 0 1px #333, 0 0 0 3px #1f75cb; outline: none; - background-color: #404040; + background-color: #434248; } .gl-button.gl-button.btn-default:active .gl-icon, .gl-button.gl-button.btn-default.active .gl-icon { - color: #fafafa; + color: #ececef; } .gl-button.gl-button.btn-default .gl-icon { - color: #999; + color: #89888d; } .gl-search-box-by-type-search-icon { margin: 0.5rem; - color: #999; + color: #89888d; width: 1rem; position: absolute; } @@ -594,35 +594,40 @@ svg { height: 0; margin: 4px 0; overflow: hidden; - border-top: 1px solid #404040; + border-top: 1px solid #434248; } .toggle-sidebar-button .collapse-text, .toggle-sidebar-button .icon-chevron-double-lg-left { - color: #999; + color: #89888d; } html { overflow-y: scroll; } +@media (min-width: 576px) { + .logged-out-marketing-header { + --header-height: 72px; + } +} .btn { border-radius: 4px; font-size: 0.875rem; font-weight: 400; padding: 6px 10px; background-color: #333; - border-color: #404040; - color: #fafafa; - color: #fafafa; + border-color: #434248; + color: #ececef; + color: #ececef; white-space: nowrap; } .btn:active { - background-color: #303030; + background-color: #333238; box-shadow: none; } .btn:active, .btn.active { background-color: #444; border-color: #4f4f4f; - color: #fafafa; + color: #ececef; } .btn svg { height: 15px; @@ -634,7 +639,7 @@ html { .badge.badge-pill:not(.gl-badge) { font-weight: 400; background-color: rgba(255, 255, 255, 0.07); - color: #dbdbdb; + color: #bfbfc3; vertical-align: baseline; } .gl-font-sm { @@ -653,10 +658,10 @@ html { .dropdown-menu-toggle { padding: 6px 8px 6px 10px; background-color: #333; - color: #fafafa; + color: #ececef; font-size: 14px; text-align: left; - border: 1px solid #404040; + border: 1px solid #434248; border-radius: 0.25rem; white-space: nowrap; } @@ -685,7 +690,7 @@ html { font-weight: 400; padding: 8px 0; background-color: #333; - border: 1px solid #404040; + border: 1px solid #434248; border-radius: 0.25rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } @@ -708,7 +713,7 @@ html { font-weight: 400; position: relative; padding: 8px 12px; - color: #fafafa; + color: #ececef; line-height: 16px; white-space: normal; overflow: hidden; @@ -718,7 +723,7 @@ html { .dropdown-menu li > a:active, .dropdown-menu li button:active { background-color: #4f4f4f; - color: #fafafa; + color: #ececef; outline: 0; text-decoration: none; } @@ -732,7 +737,7 @@ html { height: 1px; margin: 0.25rem 0; padding: 0; - background-color: #404040; + background-color: #434248; } .dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) { margin-right: 40px; @@ -759,7 +764,7 @@ html { } input { border-radius: 0.25rem; - color: #fafafa; + color: #ececef; background-color: #333; } .form-control { @@ -767,23 +772,23 @@ input { padding: 6px 10px; } .form-control::placeholder { - color: #868686; + color: #737278; } kbd { display: inline-block; padding: 3px 5px; font-size: 0.6875rem; line-height: 10px; - color: var(--gray-700, #dbdbdb); + color: var(--gray-700, #bfbfc3); vertical-align: middle; - background-color: var(--gray-10, #1f1f1f); + background-color: var(--gray-10, #1f1e24); border-width: 1px; border-style: solid; - border-color: var(--gray-100, #404040) var(--gray-100, #404040) - var(--gray-200, #525252); + border-color: var(--gray-100, #434248) var(--gray-100, #434248) + var(--gray-200, #535158); border-image: none; border-radius: 3px; - box-shadow: 0 -1px 0 var(--gray-200, #525252) inset; + box-shadow: 0 -1px 0 var(--gray-200, #535158) inset; } .navbar-gitlab { padding: 0 16px; @@ -1037,7 +1042,7 @@ kbd { width: 100%; align-items: center; padding: 10px 16px 10px 10px; - color: #fafafa; + color: #ececef; background-color: transparent; border: 0; text-align: left; @@ -1049,7 +1054,7 @@ kbd { .context-header .sidebar-context-title { overflow: hidden; text-overflow: ellipsis; - color: #fafafa; + color: #ececef; } @media (min-width: 768px) { .page-with-contextual-sidebar { @@ -1073,7 +1078,7 @@ kbd { z-index: 600; width: 256px; top: var(--header-height, 48px); - background-color: #f5f5f5; + background-color: #1f1e24; border-right: 1px solid #e9e9e9; transform: translate3d(0, 0, 0); } @@ -1110,7 +1115,7 @@ kbd { } .nav-sidebar a { text-decoration: none; - color: #fafafa; + color: #ececef; } .nav-sidebar li { white-space: nowrap; @@ -1395,7 +1400,7 @@ kbd { display: block; } .sidebar-top-level-items li > a.gl-link { - color: #fafafa; + color: #ececef; } .sidebar-top-level-items li > a.gl-link:active { text-decoration: none; @@ -1412,12 +1417,12 @@ kbd { .close-nav-button { height: 48px; padding: 0 16px; - background-color: #303030; + background-color: #333238; border: 0; - color: #999; + color: #89888d; display: flex; align-items: center; - background-color: #f5f5f5; + background-color: #1f1e24; position: fixed; bottom: 0; width: 255px; @@ -1488,14 +1493,14 @@ kbd { } } input::-moz-placeholder { - color: #868686; + color: #737278; opacity: 1; } input::-ms-input-placeholder { - color: #868686; + color: #737278; } input:-ms-input-placeholder { - color: #868686; + color: #737278; } svg { fill: currentColor; @@ -1624,7 +1629,7 @@ svg.s16 { padding: 0; background: #222; overflow: hidden; - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); + box-shadow: inset 0 0 0 1px rgba(251, 250, 253, 0.1); } .avatar.avatar-tile { border-radius: 0; @@ -1633,8 +1638,8 @@ svg.s16 { .identicon { text-align: center; vertical-align: top; - color: #fafafa; - background-color: #303030; + color: #ececef; + background-color: #333238; } .identicon.s16 { font-size: 10px; @@ -1663,7 +1668,7 @@ svg.s16 { background-color: #5c2900; } .identicon.bg7 { - background-color: #303030; + background-color: #333238; } .avatar-container { overflow: hidden; @@ -1702,18 +1707,18 @@ svg.s16 { color-scheme: dark; } 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; + --gray-10: #1f1e24; + --gray-50: #333238; + --gray-100: #434248; + --gray-200: #535158; + --gray-300: #626168; + --gray-400: #737278; + --gray-500: #89888d; + --gray-600: #a4a3a8; + --gray-700: #bfbfc3; + --gray-800: #dcdcde; + --gray-900: #ececef; + --gray-950: #fbfafd; --green-50: #0a4020; --green-100: #0d532a; --green-200: #24663b; @@ -1785,58 +1790,59 @@ body.gl-dark { --dark-icon-color-purple-3: #9a79f7; --dark-icon-color-orange-1: #665349; --dark-icon-color-orange-2: #b37a5d; - --gl-text-color: #fafafa; + --gl-text-color: #ececef; --border-color: #4f4f4f; --white: #333; --black: #fff; + --gray-light: #333238; --svg-status-bg: #333; } .nav-sidebar, .toggle-sidebar-button, .close-nav-button { - background-color: #262626; - border-right: 1px solid #303030; + background-color: #29282d; + border-right: 1px solid #333238; } .gl-avatar:not(.gl-avatar-identicon), .avatar-container, .avatar { - background: rgba(255, 255, 255, 0.04); + background: rgba(251, 250, 253, 0.04); } .gl-avatar { border-style: none; - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); + box-shadow: inset 0 0 0 1px rgba(251, 250, 253, 0.1); } body.gl-dark { - --gl-theme-accent: #868686; + --gl-theme-accent: #737278; } body.gl-dark .navbar-gitlab { - background-color: #fafafa; + background-color: #ececef; } body.gl-dark .navbar-gitlab .navbar-collapse { - color: #fafafa; + color: #ececef; } body.gl-dark .navbar-gitlab .container-fluid .navbar-toggler { - border-left: 1px solid #b3b3b3; - color: #fafafa; + border-left: 1px solid #a3a2a6; + color: #ececef; } 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; + color: #ececef; background-color: #333; } body.gl-dark .navbar-gitlab .navbar-sub-nav { - color: #fafafa; + color: #ececef; } body.gl-dark .navbar-gitlab .nav > li { - color: #fafafa; + color: #ececef; } body.gl-dark .navbar-gitlab .nav > li.header-search-new { - color: #fafafa; + color: #ececef; } body.gl-dark .navbar-gitlab .nav > li > a .notification-dot { - border: 2px solid #fafafa; + border: 2px solid #ececef; } body.gl-dark .navbar-gitlab @@ -1844,7 +1850,7 @@ body.gl-dark > li > a.header-help-dropdown-toggle .notification-dot { - background-color: #fafafa; + background-color: #ececef; } body.gl-dark .navbar-gitlab @@ -1852,10 +1858,10 @@ body.gl-dark > li > a.header-user-dropdown-toggle .header-user-avatar { - border-color: #fafafa; + border-color: #ececef; } body.gl-dark .navbar-gitlab .nav > li.active > a { - color: #fafafa; + color: #ececef; background-color: #333; } body.gl-dark .navbar-gitlab .nav > li.active > a .notification-dot { @@ -1867,48 +1873,48 @@ body.gl-dark > li.active > a.header-help-dropdown-toggle .notification-dot { - background-color: #fafafa; + background-color: #ececef; } body.gl-dark .header-search { - background-color: rgba(250, 250, 250, 0.2) !important; + background-color: rgba(236, 236, 239, 0.2) !important; border-radius: 4px; } body.gl-dark .header-search svg.gl-search-box-by-type-search-icon { - color: rgba(250, 250, 250, 0.8); + color: rgba(236, 236, 239, 0.8); } body.gl-dark .header-search input { background-color: transparent; - color: rgba(250, 250, 250, 0.8); - box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.4); + color: rgba(236, 236, 239, 0.8); + box-shadow: inset 0 0 0 1px rgba(236, 236, 239, 0.4); } body.gl-dark .header-search input::placeholder { - color: rgba(250, 250, 250, 0.8); + color: rgba(236, 236, 239, 0.8); } body.gl-dark .header-search input:active::placeholder { - color: #868686; + color: #737278; } body.gl-dark .header-search .keyboard-shortcut-helper { - color: #fafafa; - background-color: rgba(250, 250, 250, 0.2); + color: #ececef; + background-color: rgba(236, 236, 239, 0.2); } body.gl-dark .search form { - background-color: rgba(250, 250, 250, 0.2); + background-color: rgba(236, 236, 239, 0.2); } body.gl-dark .search .search-input::placeholder { - color: rgba(250, 250, 250, 0.8); + color: rgba(236, 236, 239, 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); + fill: rgba(236, 236, 239, 0.8); } body.gl-dark .nav-sidebar li.active > a { - color: #fafafa; + color: #ececef; } body.gl-dark .nav-sidebar .fly-out-top-item a, body.gl-dark .nav-sidebar .fly-out-top-item.active a, body.gl-dark .nav-sidebar .fly-out-top-item .fly-out-top-item-container { - background-color: var(--gray-100, #303030); - color: var(--gray-900, #fafafa); + background-color: var(--gray-100, #333238); + color: var(--gray-900, #ececef); } body.gl-dark .navbar-gitlab { background-color: var(--gray-50); @@ -1945,18 +1951,18 @@ body.gl-dark .navbar-gitlab .search form .search-input { color-scheme: dark; } 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; + --gray-10: #1f1e24; + --gray-50: #333238; + --gray-100: #434248; + --gray-200: #535158; + --gray-300: #626168; + --gray-400: #737278; + --gray-500: #89888d; + --gray-600: #a4a3a8; + --gray-700: #bfbfc3; + --gray-800: #dcdcde; + --gray-900: #ececef; + --gray-950: #fbfafd; --green-50: #0a4020; --green-100: #0d532a; --green-200: #24663b; @@ -2028,10 +2034,11 @@ body.gl-dark { --dark-icon-color-purple-3: #9a79f7; --dark-icon-color-orange-1: #665349; --dark-icon-color-orange-2: #b37a5d; - --gl-text-color: #fafafa; + --gl-text-color: #ececef; --border-color: #4f4f4f; --white: #333; --black: #fff; + --gray-light: #333238; --svg-status-bg: #333; } .tab-width-8 { @@ -2054,9 +2061,19 @@ body.gl-dark { .gl-display-none { display: none; } +@media (min-width: 576px) { + .gl-sm-display-none { + display: none; + } +} .gl-display-flex { display: flex; } +@media (min-width: 992px) { + .gl-lg-display-flex { + display: flex; + } +} @media (min-width: 576px) { .gl-sm-display-block { display: block; @@ -2067,9 +2084,6 @@ body.gl-dark { display: block; } } -.gl-display-inline-block\! { - display: inline-block !important; -} .gl-align-items-center { align-items: center; } diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index 61a2ce8dd62..7fb373bb6f4 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -23,7 +23,7 @@ body { font-size: 1rem; font-weight: 400; line-height: 1.5; - color: #303030; + color: #333238; text-align: left; background-color: #fff; } @@ -99,7 +99,7 @@ kbd { padding: 0.2rem 0.4rem; font-size: 90%; color: #fff; - background-color: #303030; + background-color: #333238; border-radius: 0.2rem; } kbd kbd { @@ -122,24 +122,24 @@ kbd kbd { font-size: 0.875rem; font-weight: 400; line-height: 1.5; - color: #303030; + color: #333238; background-color: #fff; background-clip: padding-box; - border: 1px solid #868686; + border: 1px solid #89888d; border-radius: 0.25rem; } @media (prefers-reduced-motion: reduce) { } .form-control:-moz-focusring { color: transparent; - text-shadow: 0 0 0 #303030; + text-shadow: 0 0 0 #333238; } .form-control::placeholder { - color: #5e5e5e; + color: #626168; opacity: 1; } .form-control:disabled { - background-color: #fafafa; + background-color: #fbfafd; opacity: 1; } .form-inline { @@ -157,7 +157,7 @@ kbd kbd { .btn { display: inline-block; font-weight: 400; - color: #303030; + color: #333238; text-align: center; vertical-align: middle; user-select: none; @@ -193,7 +193,7 @@ kbd kbd { padding: 0.5rem 0; margin: 0.125rem 0 0; font-size: 1rem; - color: #303030; + color: #333238; text-align: left; list-style: none; background-color: #fff; @@ -352,7 +352,7 @@ kbd kbd { .gl-avatar { border-width: 1px; border-style: solid; - border-color: rgba(0, 0, 0, 0.08); + border-color: rgba(31, 30, 36, 0.08); overflow: hidden; flex-shrink: 0; } @@ -436,8 +436,8 @@ a.gl-badge.badge-warning:active { padding-left: 0.75rem; padding-right: 0.75rem; height: auto; - color: #303030; - box-shadow: inset 0 0 0 1px #868686; + color: #333238; + box-shadow: inset 0 0 0 1px #89888d; border-style: none; appearance: none; -moz-appearance: none; @@ -446,17 +446,17 @@ a.gl-badge.badge-warning:active { .gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only, .gl-form-input.form-control:disabled, .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only { - background-color: #f5f5f5; - box-shadow: inset 0 0 0 1px #dbdbdb; + background-color: #fbfafd; + box-shadow: inset 0 0 0 1px #dcdcde; } .gl-form-input:disabled, .gl-form-input.form-control:disabled { cursor: not-allowed; - color: #666; + color: #737278; } .gl-form-input::placeholder, .gl-form-input.form-control::placeholder { - color: #868686; + color: #89888d; } .gl-icon { fill: currentColor; @@ -499,9 +499,9 @@ a.gl-badge.badge-warning:active { padding-right: 0.75rem; background-color: transparent; line-height: 1rem; - color: #303030; + color: #333238; fill: currentColor; - box-shadow: inset 0 0 0 1px #bfbfbf; + box-shadow: inset 0 0 0 1px #bfbfc3; justify-content: center; align-items: center; font-size: 0.875rem; @@ -512,20 +512,20 @@ a.gl-badge.badge-warning:active { } .gl-button.gl-button.btn-default:active, .gl-button.gl-button.btn-default.active { - box-shadow: inset 0 0 0 1px #5e5e5e, 0 0 0 1px #fff, 0 0 0 3px #428fdc; + box-shadow: inset 0 0 0 1px #626168, 0 0 0 1px #fff, 0 0 0 3px #428fdc; outline: none; - background-color: #dbdbdb; + background-color: #dcdcde; } .gl-button.gl-button.btn-default:active .gl-icon, .gl-button.gl-button.btn-default.active .gl-icon { - color: #303030; + color: #333238; } .gl-button.gl-button.btn-default .gl-icon { - color: #666; + color: #737278; } .gl-search-box-by-type-search-icon { margin: 0.5rem; - color: #666; + color: #737278; width: 1rem; position: absolute; } @@ -575,35 +575,40 @@ svg { height: 0; margin: 4px 0; overflow: hidden; - border-top: 1px solid #dbdbdb; + border-top: 1px solid #dcdcde; } .toggle-sidebar-button .collapse-text, .toggle-sidebar-button .icon-chevron-double-lg-left { - color: #666; + color: #737278; } html { overflow-y: scroll; } +@media (min-width: 576px) { + .logged-out-marketing-header { + --header-height: 72px; + } +} .btn { border-radius: 4px; font-size: 0.875rem; font-weight: 400; padding: 6px 10px; background-color: #fff; - border-color: #dbdbdb; - color: #303030; - color: #303030; + border-color: #dcdcde; + color: #333238; + color: #333238; white-space: nowrap; } .btn:active { - background-color: #f0f0f0; + background-color: #ececef; box-shadow: none; } .btn:active, .btn.active { background-color: #eaeaea; border-color: #e3e3e3; - color: #303030; + color: #333238; } .btn svg { height: 15px; @@ -615,7 +620,7 @@ html { .badge.badge-pill:not(.gl-badge) { font-weight: 400; background-color: rgba(0, 0, 0, 0.07); - color: #525252; + color: #535158; vertical-align: baseline; } .gl-font-sm { @@ -634,10 +639,10 @@ html { .dropdown-menu-toggle { padding: 6px 8px 6px 10px; background-color: #fff; - color: #303030; + color: #333238; font-size: 14px; text-align: left; - border: 1px solid #dbdbdb; + border: 1px solid #dcdcde; border-radius: 0.25rem; white-space: nowrap; } @@ -666,7 +671,7 @@ html { font-weight: 400; padding: 8px 0; background-color: #fff; - border: 1px solid #dbdbdb; + border: 1px solid #dcdcde; border-radius: 0.25rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } @@ -689,7 +694,7 @@ html { font-weight: 400; position: relative; padding: 8px 12px; - color: #303030; + color: #333238; line-height: 16px; white-space: normal; overflow: hidden; @@ -698,8 +703,8 @@ html { } .dropdown-menu li > a:active, .dropdown-menu li button:active { - background-color: #eee; - color: #303030; + background-color: #ececef; + color: #333238; outline: 0; text-decoration: none; } @@ -713,7 +718,7 @@ html { height: 1px; margin: 0.25rem 0; padding: 0; - background-color: #dbdbdb; + background-color: #dcdcde; } .dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) { margin-right: 40px; @@ -740,7 +745,7 @@ html { } input { border-radius: 0.25rem; - color: #303030; + color: #333238; background-color: #fff; } .form-control { @@ -748,23 +753,23 @@ input { padding: 6px 10px; } .form-control::placeholder { - color: #868686; + color: #89888d; } kbd { display: inline-block; padding: 3px 5px; font-size: 0.6875rem; line-height: 10px; - color: var(--gray-700, #525252); + color: var(--gray-700, #535158); vertical-align: middle; - background-color: var(--gray-10, #f5f5f5); + background-color: var(--gray-10, #fbfafd); border-width: 1px; border-style: solid; - border-color: var(--gray-100, #dbdbdb) var(--gray-100, #dbdbdb) - var(--gray-200, #bfbfbf); + border-color: var(--gray-100, #dcdcde) var(--gray-100, #dcdcde) + var(--gray-200, #bfbfc3); border-image: none; border-radius: 3px; - box-shadow: 0 -1px 0 var(--gray-200, #bfbfbf) inset; + box-shadow: 0 -1px 0 var(--gray-200, #bfbfc3) inset; } .navbar-gitlab { padding: 0 16px; @@ -986,7 +991,7 @@ kbd { float: left; margin-right: 5px; border-radius: 50%; - border: 1px solid #f5f5f5; + border: 1px solid #f2f2f4; } .notification-dot { background-color: #d99530; @@ -1018,7 +1023,7 @@ kbd { width: 100%; align-items: center; padding: 10px 16px 10px 10px; - color: #303030; + color: #333238; background-color: transparent; border: 0; text-align: left; @@ -1030,7 +1035,7 @@ kbd { .context-header .sidebar-context-title { overflow: hidden; text-overflow: ellipsis; - color: #303030; + color: #333238; } @media (min-width: 768px) { .page-with-contextual-sidebar { @@ -1054,7 +1059,7 @@ kbd { z-index: 600; width: 256px; top: var(--header-height, 48px); - background-color: #f5f5f5; + background-color: #fbfafd; border-right: 1px solid #e9e9e9; transform: translate3d(0, 0, 0); } @@ -1091,7 +1096,7 @@ kbd { } .nav-sidebar a { text-decoration: none; - color: #303030; + color: #333238; } .nav-sidebar li { white-space: nowrap; @@ -1376,7 +1381,7 @@ kbd { display: block; } .sidebar-top-level-items li > a.gl-link { - color: #303030; + color: #333238; } .sidebar-top-level-items li > a.gl-link:active { text-decoration: none; @@ -1393,12 +1398,12 @@ kbd { .close-nav-button { height: 48px; padding: 0 16px; - background-color: #fafafa; + background-color: #fbfafd; border: 0; - color: #666; + color: #737278; display: flex; align-items: center; - background-color: #f5f5f5; + background-color: #fbfafd; position: fixed; bottom: 0; width: 255px; @@ -1469,14 +1474,14 @@ kbd { } } input::-moz-placeholder { - color: #868686; + color: #89888d; opacity: 1; } input::-ms-input-placeholder { - color: #868686; + color: #89888d; } input:-ms-input-placeholder { - color: #868686; + color: #89888d; } svg { fill: currentColor; @@ -1603,9 +1608,9 @@ svg.s16 { width: 40px; height: 40px; padding: 0; - background: #fdfdfd; + background: #fefefe; overflow: hidden; - box-shadow: inset 0 0 0 1px rgba(31, 31, 31, 0.1); + box-shadow: inset 0 0 0 1px rgba(31, 30, 36, 0.1); } .avatar.avatar-tile { border-radius: 0; @@ -1614,8 +1619,8 @@ svg.s16 { .identicon { text-align: center; vertical-align: top; - color: #303030; - background-color: #f0f0f0; + color: #333238; + background-color: #ececef; } .identicon.s16 { font-size: 10px; @@ -1644,7 +1649,7 @@ svg.s16 { background-color: #fdf1dd; } .identicon.bg7 { - background-color: #f0f0f0; + background-color: #ececef; } .avatar-container { overflow: hidden; @@ -1700,9 +1705,19 @@ svg.s16 { .gl-display-none { display: none; } +@media (min-width: 576px) { + .gl-sm-display-none { + display: none; + } +} .gl-display-flex { display: flex; } +@media (min-width: 992px) { + .gl-lg-display-flex { + display: flex; + } +} @media (min-width: 576px) { .gl-sm-display-block { display: block; @@ -1713,9 +1728,6 @@ svg.s16 { display: block; } } -.gl-display-inline-block\! { - display: inline-block !important; -} .gl-align-items-center { align-items: center; } diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss index 33e10b9bd62..7ae158b3930 100644 --- a/app/assets/stylesheets/startup/startup-signin.scss +++ b/app/assets/stylesheets/startup/startup-signin.scss @@ -22,7 +22,7 @@ body { font-size: 1rem; font-weight: 400; line-height: 1.5; - color: #303030; + color: #333238; text-align: left; background-color: #fff; } @@ -110,7 +110,7 @@ h3 { margin-bottom: 0.25rem; font-weight: 600; line-height: 1.2; - color: #303030; + color: #333238; } h1 { font-size: 2.1875rem; @@ -196,24 +196,24 @@ hr { font-size: 0.875rem; font-weight: 400; line-height: 1.5; - color: #303030; + color: #333238; background-color: #fff; background-clip: padding-box; - border: 1px solid #868686; + border: 1px solid #89888d; border-radius: 0.25rem; } @media (prefers-reduced-motion: reduce) { } .form-control:-moz-focusring { color: transparent; - text-shadow: 0 0 0 #303030; + text-shadow: 0 0 0 #333238; } .form-control::placeholder { - color: #5e5e5e; + color: #626168; opacity: 1; } .form-control:disabled { - background-color: #fafafa; + background-color: #fbfafd; opacity: 1; } .form-group { @@ -222,7 +222,7 @@ hr { .btn { display: inline-block; font-weight: 400; - color: #303030; + color: #333238; text-align: center; vertical-align: middle; user-select: none; @@ -282,10 +282,10 @@ input.btn-block[type="button"] { border-color: #b3d7ff; } .custom-control-input:disabled ~ .custom-control-label { - color: #5e5e5e; + color: #626168; } .custom-control-input:disabled ~ .custom-control-label::before { - background-color: #fafafa; + background-color: #fbfafd; } .custom-control-label { position: relative; @@ -302,7 +302,7 @@ input.btn-block[type="button"] { pointer-events: none; content: ""; background-color: #fff; - border: #666 solid 1px; + border: #737278 solid 1px; } .custom-control-label::after { position: absolute; @@ -400,8 +400,8 @@ input.btn-block[type="button"] { padding-left: 0.75rem; padding-right: 0.75rem; height: auto; - color: #303030; - box-shadow: inset 0 0 0 1px #868686; + color: #333238; + box-shadow: inset 0 0 0 1px #89888d; border-style: none; appearance: none; -moz-appearance: none; @@ -410,27 +410,27 @@ input.btn-block[type="button"] { .gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only, .gl-form-input.form-control:disabled, .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only { - background-color: #f5f5f5; - box-shadow: inset 0 0 0 1px #dbdbdb; + background-color: #fbfafd; + box-shadow: inset 0 0 0 1px #dcdcde; } .gl-form-input:disabled, .gl-form-input.form-control:disabled { cursor: not-allowed; - color: #666; + color: #737278; } .gl-form-input::placeholder, .gl-form-input.form-control::placeholder { - color: #868686; + color: #89888d; } .gl-form-checkbox { font-size: 0.875rem; line-height: 1rem; - color: #303030; + color: #333238; } .gl-form-checkbox .custom-control-input:disabled, .gl-form-checkbox .custom-control-input:disabled ~ .custom-control-label { cursor: not-allowed; - color: #868686; + color: #89888d; } .gl-form-checkbox.custom-control .custom-control-input ~ .custom-control-label { cursor: pointer; @@ -447,7 +447,7 @@ input.btn-block[type="button"] { .custom-control-input ~ .custom-control-label::before { background-color: #fff; - border-color: #868686; + border-color: #89888d; } .gl-form-checkbox.custom-control .custom-control-input:checked @@ -490,8 +490,8 @@ input.btn-block[type="button"] { .gl-form-checkbox.custom-control .custom-control-input:disabled ~ .custom-control-label::before { - background-color: #f0f0f0; - border-color: #dbdbdb; + background-color: #ececef; + border-color: #dcdcde; pointer-events: auto; } .gl-form-checkbox.custom-control @@ -500,8 +500,8 @@ input.btn-block[type="button"] { .gl-form-checkbox.custom-control .custom-control-input[type="checkbox"]:indeterminate:disabled ~ .custom-control-label::before { - background-color: #dbdbdb; - border-color: #dbdbdb; + background-color: #dcdcde; + border-color: #dcdcde; } .gl-form-checkbox.custom-control .custom-control-input:checked:disabled @@ -509,7 +509,7 @@ input.btn-block[type="button"] { .gl-form-checkbox.custom-control .custom-control-input[type="checkbox"]:indeterminate:disabled ~ .custom-control-label::after { - background-color: #5e5e5e; + background-color: #626168; } .gl-button { display: inline-flex; @@ -526,9 +526,9 @@ input.btn-block[type="button"] { padding-right: 0.75rem; background-color: transparent; line-height: 1rem; - color: #303030; + color: #333238; fill: currentColor; - box-shadow: inset 0 0 0 1px #bfbfbf; + box-shadow: inset 0 0 0 1px #bfbfc3; justify-content: center; align-items: center; font-size: 0.875rem; @@ -560,9 +560,9 @@ input.btn-block[type="button"] { .gl-button.gl-button.btn-default.active, .gl-button.gl-button.btn-block.btn-default:active, .gl-button.gl-button.btn-block.btn-default.active { - box-shadow: inset 0 0 0 1px #5e5e5e, 0 0 0 1px #fff, 0 0 0 3px #428fdc; + box-shadow: inset 0 0 0 1px #626168, 0 0 0 1px #fff, 0 0 0 3px #428fdc; outline: none; - background-color: #dbdbdb; + background-color: #dcdcde; } .gl-button.gl-button.btn-confirm, .gl-button.gl-button.btn-block.btn-confirm { @@ -636,20 +636,20 @@ body.navless { font-weight: 400; padding: 6px 10px; background-color: #fff; - border-color: #dbdbdb; - color: #303030; - color: #303030; + border-color: #dcdcde; + color: #333238; + color: #333238; white-space: nowrap; } .btn:active { - background-color: #f0f0f0; + background-color: #ececef; box-shadow: none; } .btn:active, .btn.active { background-color: #eaeaea; border-color: #e3e3e3; - color: #303030; + color: #333238; } .btn svg { height: 15px; @@ -676,7 +676,7 @@ body.navless { } hr { margin: 1.5rem 0; - border-top: 1px solid #eee; + border-top: 1px solid #ececef; } .footer-links { margin-bottom: 20px; @@ -704,7 +704,7 @@ hr { } input { border-radius: 0.25rem; - color: #303030; + color: #333238; background-color: #fff; } label { @@ -721,7 +721,7 @@ label.label-bold { padding: 6px 10px; } .form-control::placeholder { - color: #868686; + color: #89888d; } .gl-show-field-errors .form-control:not(textarea) { height: 34px; @@ -730,7 +730,7 @@ label.label-bold { justify-content: center; height: var(--header-height, 48px); background: #fff; - border-bottom: 1px solid #dbdbdb; + border-bottom: 1px solid #dcdcde; } .navbar-empty .tanuki-logo, .navbar-empty .brand-header-logo { @@ -747,14 +747,14 @@ label.label-bold { fill: #fca326; } input::-moz-placeholder { - color: #868686; + color: #89888d; opacity: 1; } input::-ms-input-placeholder { - color: #868686; + color: #89888d; } input:-ms-input-placeholder { - color: #868686; + color: #89888d; } svg { fill: currentColor; @@ -805,7 +805,7 @@ svg { } .login-page .login-box, .login-page .omniauth-container { - box-shadow: 0 0 0 1px #dbdbdb; + box-shadow: 0 0 0 1px #dcdcde; border-radius: 0.25rem; } .login-page .login-box .login-heading h3, @@ -863,7 +863,7 @@ svg { } .login-page .new-session-tabs { display: flex; - box-shadow: 0 0 0 1px #dbdbdb; + box-shadow: 0 0 0 1px #dcdcde; border-top-right-radius: 4px; border-top-left-radius: 4px; } @@ -874,7 +874,7 @@ svg { .login-page .new-session-tabs.nav-links-unboxed .nav-item { border-left: 0; border-right: 0; - border-bottom: 1px solid #dbdbdb; + border-bottom: 1px solid #dcdcde; background-color: transparent; } .login-page .new-session-tabs.custom-provider-tabs { @@ -885,7 +885,7 @@ svg { flex-basis: auto; } .login-page .new-session-tabs.custom-provider-tabs li:nth-child(n + 5) { - border-top: 1px solid #dbdbdb; + border-top: 1px solid #dcdcde; } .login-page .new-session-tabs.custom-provider-tabs a { font-size: 16px; @@ -893,7 +893,7 @@ svg { .login-page .new-session-tabs li { flex: 1; text-align: center; - border-left: 1px solid #dbdbdb; + border-left: 1px solid #dcdcde; } .login-page .new-session-tabs li:first-of-type { border-left: 0; @@ -903,7 +903,7 @@ svg { border-top-right-radius: 4px; } .login-page .new-session-tabs li:not(.active) { - background-color: #fafafa; + background-color: #fbfafd; } .login-page .new-session-tabs li a { width: 100%; diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index 8e8cabbe511..a3474d2ed50 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -1,15 +1,15 @@ -$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; +$gray-10: #1f1e24; +$gray-50: #333238; +$gray-100: #434248; +$gray-200: #535158; +$gray-300: #626168; +$gray-400: #737278; +$gray-500: #89888d; +$gray-600: #a4a3a8; +$gray-700: #bfbfc3; +$gray-800: #dcdcde; +$gray-900: #ececef; +$gray-950: #fbfafd; $green-50: #0a4020; $green-100: #0d532a; @@ -203,6 +203,7 @@ body.gl-dark { --white: #{$white}; --black: #{$black}; + --gray-light: #{$gray-50}; --svg-status-bg: #{$white}; @@ -255,9 +256,6 @@ $popover-arrow-outer-color: $gray-800; $secondary: $gray-600; -$issues-today-bg: #333838; -$issues-today-border: #333a40; - $yiq-text-dark: $gray-50; $yiq-text-light: $gray-950; diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss index d644d8acc98..f37b426cd91 100644 --- a/app/assets/stylesheets/themes/theme_helper.scss +++ b/app/assets/stylesheets/themes/theme_helper.scss @@ -219,6 +219,16 @@ } } + .search-sidebar { + .nav-link { + &.active, + &:hover { + background-color: rgba($gray-50, 0.8); + color: $gray-900; + } + } + } + // Sidebar .nav-sidebar li.active > a { color: $gray-900; |