diff options
Diffstat (limited to 'app/assets/stylesheets')
48 files changed, 619 insertions, 665 deletions
diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss index be72ec33465..004dc22c9b8 100644 --- a/app/assets/stylesheets/_page_specific_files.scss +++ b/app/assets/stylesheets/_page_specific_files.scss @@ -27,7 +27,6 @@ @import './pages/registry'; @import './pages/search'; @import './pages/service_desk'; -@import './pages/settings_ci_cd'; @import './pages/settings'; @import './pages/storage_quota'; @import './pages/tree'; diff --git a/app/assets/stylesheets/components/avatar.scss b/app/assets/stylesheets/components/avatar.scss index ceac5da7f80..6a6febbf7b4 100644 --- a/app/assets/stylesheets/components/avatar.scss +++ b/app/assets/stylesheets/components/avatar.scss @@ -37,7 +37,7 @@ $avatar-sizes: ( ), 60: ( font-size: 32px, - line-height: 58px, + line-height: 60px, border-radius: $border-radius-large ), 64: ( @@ -47,7 +47,7 @@ $avatar-sizes: ( ), 90: ( font-size: 36px, - line-height: 88px, + line-height: 90px, border-radius: $border-radius-large ), 96: ( @@ -72,7 +72,6 @@ $avatar-sizes: ( float: left; margin-right: $gl-padding; border-radius: $avatar-radius; - border: 1px solid $t-gray-a-08; @each $size, $size-config in $avatar-sizes { &.s#{$size} { @@ -83,13 +82,12 @@ $avatar-sizes: ( .avatar { transition-property: none; - width: 40px; height: 40px; padding: 0; background: $gray-lightest; overflow: hidden; - border-color: rgba($black, $gl-avatar-border-opacity); + box-shadow: inset 0 0 0 1px rgba($gray-950, $gl-avatar-border-opacity); &.avatar-inline { float: none; @@ -180,6 +178,10 @@ $avatar-sizes: ( @each $size, $size-config in $avatar-sizes { &.s#{$size} { border-radius: map-get($size-config, 'border-radius'); + + .avatar { + border-radius: map-get($size-config, 'border-radius'); + } } } } diff --git a/app/assets/stylesheets/components/batch_comments/review_bar.scss b/app/assets/stylesheets/components/batch_comments/review_bar.scss index 6f5c5c5a080..5e1128dc4ce 100644 --- a/app/assets/stylesheets/components/batch_comments/review_bar.scss +++ b/app/assets/stylesheets/components/batch_comments/review_bar.scss @@ -11,7 +11,7 @@ padding-right: $gutter_collapsed_width; background: $white; border-top: 1px solid $border-color; - transition: padding $sidebar-transition-duration; + transition: padding $gl-transition-duration-medium; .page-with-icon-sidebar & { padding-left: $contextual-sidebar-collapsed-width; diff --git a/app/assets/stylesheets/components/rich_content_editor.scss b/app/assets/stylesheets/components/rich_content_editor.scss deleted file mode 100644 index 59bd69955d3..00000000000 --- a/app/assets/stylesheets/components/rich_content_editor.scss +++ /dev/null @@ -1,54 +0,0 @@ -/** -* Overrides styles from ToastUI editor -*/ - -.tui-editor-defaultUI { - - // Toolbar buttons - .tui-editor-defaultUI-toolbar .toolbar-button { - color: $gray-500; - border: 0; - - &:hover, - &:active { - color: $blue-500; - border: 0; - } - } - - // Contextual menu's & popups - .tui-popup-wrapper { - @include gl-overflow-hidden; - @include gl-rounded-base; - @include gl-border-gray-200; - - hr { - @include gl-m-0; - @include gl-bg-gray-200; - } - - button { - @include gl-text-gray-700; - } - } - - /** - * Overrides styles from ToastUI's Code Mirror (markdown mode) editor. - * Toast UI internally overrides some of these using the `.tui-md-` prefix. - * https://codemirror.net/doc/manual.html#styling - */ - - .te-md-container .CodeMirror * { - @include gl-font-monospace; - @include gl-font-size-monospace; - @include gl-line-height-20; - } -} - -/** -* 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/main/source/stylesheets/_base.scss#L977 -*/ -.video_container { - padding-bottom: 56.25%; -} diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index 549289450a4..f947042ba51 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -84,89 +84,6 @@ border-bottom: 1px solid $white-dark; padding: 11px 0; margin-bottom: 11px; - - &.no-bottom-space { - border-bottom: 0; - margin-bottom: 0; - } -} - -.cover-block { - text-align: center; - background: $gray-light; - padding-top: 44px; - position: relative; - - .avatar-holder { - .avatar, - .identicon { - margin: 0 auto; - float: none; - } - - .identicon { - border-radius: 50%; - } - } - - .cover-title { - color: $gl-text-color; - font-size: 23px; - - h1 { - color: $gl-text-color; - margin-bottom: 6px; - font-size: 23px; - } - - .visibility-icon { - display: inline-block; - margin-left: 5px; - font-size: 18px; - color: color('gray'); - } - - p { - padding: 0 $gl-padding; - color: $gl-text-color; - } - } - - .cover-controls { - @include media-breakpoint-up(sm) { - position: absolute; - top: 1rem; - right: 1.25rem; - } - - &.left { - @include media-breakpoint-up(sm) { - left: 1.25rem; - right: auto; - } - } - } - - &.user-cover-block { - padding: 24px 0 0; - - .nav-links { - width: 100%; - float: none; - - &.scrolling-tabs { - float: none; - } - } - - li:first-child { - margin-left: auto; - } - - li:last-child { - margin-right: auto; - } - } } .content-block { diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss index 1fa03d66f32..b1e5ca50a8b 100644 --- a/app/assets/stylesheets/framework/calendar.scss +++ b/app/assets/stylesheets/framework/calendar.scss @@ -1,30 +1,3 @@ -.calendar-block { - padding-left: 0; - padding-right: 0; - border-top: 0; - - @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) { - overflow-x: auto; - } -} - -.user-calendar-activities { - direction: ltr; - - .str-truncated { - max-width: 70%; - } -} - -.user-calendar { - text-align: center; - min-height: 172px; - - .calendar { - display: inline-block; - } -} - .user-contrib-cell { &:hover { cursor: pointer; @@ -42,18 +15,6 @@ } } -.user-contrib-text { - font-size: 12px; - fill: $calendar-user-contrib-text; -} - -.calendar-hint { - font-size: 12px; - direction: ltr; - margin-top: -23px; - float: right; -} - .pika-single.gitlab-theme { .pika-label { color: $gl-text-color-secondary; diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index 036cec15935..ad0036df607 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -134,16 +134,6 @@ .avatar-container { @include gl-font-weight-normal; flex: none; - box-shadow: $avatar-box-shadow; - - &.rect-avatar { - @include gl-border-none; - - .avatar.s32 { - border-radius: $border-radius-default; - box-shadow: $avatar-box-shadow; - } - } } } @@ -214,7 +204,7 @@ // .page-with-contextual-sidebar { - transition: padding-left $sidebar-transition-duration; + transition: padding-left $gl-transition-duration-medium; @include media-breakpoint-up(md) { padding-left: $contextual-sidebar-collapsed-width; @@ -243,7 +233,7 @@ @include gl-fixed; @include gl-bottom-0; @include gl-left-0; - transition: width $sidebar-transition-duration, left $sidebar-transition-duration; + transition: width $gl-transition-duration-medium, left $gl-transition-duration-medium; z-index: 600; width: $contextual-sidebar-width; top: $header-height; diff --git a/app/assets/stylesheets/framework/contextual_sidebar_header.scss b/app/assets/stylesheets/framework/contextual_sidebar_header.scss index 7159dadf7cc..a3d752dcc3d 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar_header.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar_header.scss @@ -5,7 +5,7 @@ > a, > button { - transition: padding $sidebar-transition-duration; + transition: padding $gl-transition-duration-medium; font-weight: $gl-font-weight-bold; display: flex; width: 100%; @@ -25,7 +25,7 @@ } .avatar-container { - flex: 0 0 40px; + flex: 0 0 32px; background-color: $white; } diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 43e14a63f9d..d91524d99e6 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -125,10 +125,6 @@ padding-right: 25px; } - .fa { - color: $gray-darkest; - } - &:hover { border-color: $gray-darkest; } @@ -148,10 +144,6 @@ text-overflow: ellipsis; width: 160px; - .fa { - position: absolute; - } - .gl-spinner { position: absolute; top: 9px; @@ -387,10 +379,6 @@ margin: 0; text-align: left; text-overflow: inherit; - - &.btn .fa:not(:last-child) { - margin-left: 5px; - } } > button.dropdown-epic-button { @@ -477,6 +465,12 @@ height: 2 * $gl-padding; margin: 0 10px 0 0; } + + .sidebar-participant { + .merge-icon { + top: calc(50% + 5px); + } + } } .dropdown-menu-user-full-name { @@ -645,14 +639,12 @@ border-color: $blue-300; box-shadow: 0 0 4px $dropdown-input-focus-shadow; - ~ .fa, ~ .dropdown-input-clear { color: $gray-700; } } &:hover { - ~ .fa, ~ .dropdown-input-clear { color: $gray-700; } @@ -710,14 +702,6 @@ z-index: 9; background-color: $dropdown-loading-bg; font-size: 28px; - - .fa { - position: absolute; - top: 50%; - left: 50%; - margin-top: -14px; - margin-left: -14px; - } } .dropdown-label-box { diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index f322c6c8929..b980d7fdaa7 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -202,6 +202,10 @@ float: none; border-left: 1px solid $gray-100; + .file-line-num { + @include gl-min-w-9; + } + i { float: none; margin-right: 0; @@ -478,6 +482,11 @@ span.idiff { background-color: transparent; border: transparent; } + + .gl-dark & { + background: transparent; + filter: invert(1) hue-rotate(180deg); + } } .code-navigation-line:hover { @@ -575,3 +584,11 @@ span.idiff { @include gl-text-center; } } + +// *:nth-of-type(1n+30) - makes sure we do not render elements 30+ right away when +// viewing a file. Even though the HTML is injected in the DOM, as long as we do +// not render those elements, the browser doesn't need to spend resources +// calculating and repainting what's hidden. +.file-holder [data-loading] .file-content *:nth-of-type(1n+30) { + @include gl-display-none; +} diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss index 1c43212f501..2b76e70fa17 100644 --- a/app/assets/stylesheets/framework/highlight.scss +++ b/app/assets/stylesheets/framework/highlight.scss @@ -31,7 +31,8 @@ width: 100%; padding-left: 10px; padding-right: 10px; - white-space: pre; + white-space: break-spaces; + word-break: break-word; &:empty::before { content: '\200b'; @@ -48,8 +49,9 @@ a { font-family: $monospace-font; - display: block; white-space: nowrap; + @include gl-display-flex; + @include gl-justify-content-end; i, svg { @@ -90,3 +92,55 @@ td.line-numbers { cursor: pointer; text-decoration: underline wavy $red-500; } + +.blob-viewer { + .line-numbers { + // for server-side-rendering + .line-links { + @include gl-display-flex; + + + &:first-child { + margin-top: 10px; + } + + &:last-child { + margin-bottom: 10px; + } + } + + // for client + &.line-links { + min-width: 6rem; + border-bottom-left-radius: 0; + + + pre { + margin-left: 6rem; + } + } + } + + .line-links { + &:hover a::before, + &:focus-within a::before { + @include gl-visibility-visible; + } + } + + .file-line-num { + min-width: 4.5rem; + @include gl-justify-content-end; + @include gl-flex-grow-1; + @include gl-pr-3; + } + + .file-line-blame { + @include gl-ml-3; + } + + .file-line-num, + .file-line-blame { + @include gl-align-items-center; + @include gl-display-flex; + } +} diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 2cea3b96ff7..47856f1a0d3 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -478,7 +478,7 @@ } @mixin side-panel-toggle { - transition: width $sidebar-transition-duration; + transition: width $gl-transition-duration-medium; height: $toggle-sidebar-height; padding: 0 $gl-padding; background-color: $gray-light; diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index 74aed1bd984..92ca8654287 100644 --- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss +++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss @@ -135,27 +135,8 @@ } @include media-breakpoint-down(md) { - $controls-margin: $btn-margin-5 - 2px; flex: 0 0 100%; margin-top: $gl-padding-8; - - .controls-item, - .controls-item-full, - .controls-item:last-child { - flex: 1 1 35%; - display: block; - width: 100%; - margin: $controls-margin; - - .btn, - .dropdown { - margin: 0; - } - } - - .controls-item-full { - flex: 1 1 100%; - } } @include media-breakpoint-down(sm) { diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 13201d43fd0..ae0f18753ad 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -13,7 +13,7 @@ } .page-initialised .content-wrapper { - transition: padding $sidebar-transition-duration; + transition: padding $gl-transition-duration-medium; } .right-sidebar-collapsed { @@ -109,7 +109,7 @@ @include maintain-sidebar-dimensions; width: 0; padding: 0; - transition: width $sidebar-transition-duration; + transition: width $gl-transition-duration-medium; &.right-sidebar-expanded { @include maintain-sidebar-dimensions; diff --git a/app/assets/stylesheets/framework/sortable.scss b/app/assets/stylesheets/framework/sortable.scss index 953c42219a9..f9e95d16f63 100644 --- a/app/assets/stylesheets/framework/sortable.scss +++ b/app/assets/stylesheets/framework/sortable.scss @@ -1,6 +1,4 @@ .sortable-container { - background-color: $gray-light; - .flex-list { padding: 5px; margin-bottom: 0; diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss index 086b83b13e0..43effbdd7d7 100644 --- a/app/assets/stylesheets/framework/timeline.scss +++ b/app/assets/stylesheets/framework/timeline.scss @@ -35,6 +35,10 @@ background-color: $white; } + &:not(.note-form).internal-note { + background-color: $orange-50; + } + .timeline-entry-inner { position: relative; } diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index b5e0dcd875a..031f5dc45ca 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -435,6 +435,35 @@ } } + li.inapplicable { + // for a single line list item, no paragraph (tight list) + > s { + color: $gl-text-color-disabled; + } + + // additional blocks, other than paragraphs + > div { + text-decoration: line-through; + color: $gl-text-color-disabled; + } + + // because of the embedded checkbox, putting line-through on the entire + // paragraph causes the space between the checkbox and the text to have the + // line-through. Targeting just the `s` fixes this + > p:first-of-type > s { + color: $gl-text-color-disabled; + } + + > p:not(:first-of-type) { + text-decoration: line-through; + color: $gl-text-color-disabled; + } + + .drag-icon { + color: $gl-text-color; + } + } + a.with-attachment-icon, a[href*='/uploads/'], a[href*='storage.googleapis.com/google-code-attachments/'] { diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 1e921b4234e..e9ad930ef2b 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -5,7 +5,6 @@ $grid-size: 8px; $gutter-collapsed-width: 62px; $gutter-width: 290px; $gutter-inner-width: 250px; -$sidebar-transition-duration: 0.3s; $sidebar-breakpoint: 1024px; $default-transition-duration: 0.15s; $contextual-sidebar-width: 256px; @@ -454,7 +453,6 @@ $default-icon-size: 16px; $layout-link-gray: #7e7c7c; $btn-side-margin: $grid-size; $btn-sm-side-margin: 7px; -$btn-margin-5: 5px; $count-arrow-border: #dce0e5; $general-hover-transition-duration: 100ms; $general-hover-transition-curve: linear; @@ -880,8 +878,6 @@ $image-comment-cursor-top-offset: 12; Security & Compliance Carousel */ $security-and-compliance-carousel-image-carousel-width: 1000px; -$security-and-compliance-carousel-image-discover-button-width: 45%; -$security-and-compliance-carousel-image-discover-buttons-max-width: 280px; $security-and-compliance-carousel-image-discover-footer-max-width: 500px; $security-and-compliance-carousel-image-discover-text-carousel-max-width: 650px; $security-and-compliance-carousel-image-discover-text-carousel-caption-height: 100%; diff --git a/app/assets/stylesheets/framework/vue_transitions.scss b/app/assets/stylesheets/framework/vue_transitions.scss index 1a536b97142..e3ac615234c 100644 --- a/app/assets/stylesheets/framework/vue_transitions.scss +++ b/app/assets/stylesheets/framework/vue_transitions.scss @@ -2,7 +2,7 @@ .fade-leave-active, .fade-in-enter-active, .fade-out-leave-active { - transition: opacity $sidebar-transition-duration $general-hover-transition-curve; + transition: opacity $gl-transition-duration-medium $general-hover-transition-curve; } .fade-enter, diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss index fcbd05141b9..96df8487c0e 100644 --- a/app/assets/stylesheets/highlight/common.scss +++ b/app/assets/stylesheets/highlight/common.scss @@ -98,32 +98,33 @@ } } -@mixin line-number-link($color) { - min-width: $gl-spacing-scale-9; +@mixin line-link($color, $icon) { &::before { - @include gl-display-none; + @include gl-visibility-hidden; @include gl-align-self-center; - @include gl-mt-2; - @include gl-mr-2; - @include gl-w-4; - @include gl-h-4; - @include gl-absolute; - @include gl-left-3; - background-color: $color; - mask-image: asset_url('icons-stacked.svg#link'); + @include gl-mr-1; + @include gl-w-5; + @include gl-h-5; + background-color: rgba($color, 0.3); + mask-image: asset_url('icons-stacked.svg##{$icon}'); mask-repeat: no-repeat; mask-size: cover; mask-position: center; content: ''; } - &:hover::before { - @include gl-display-inline-block; + &:hover { + &::before { + background-color: rgba($color, 0.6); + } } +} - &:focus::before { - @include gl-display-inline-block; +@mixin line-hover-bg($color: $white-normal) { + &:hover, + &:focus-within { + background-color: darken($color, 10); } } diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss index 709e7f5ae18..5e6e10e44be 100644 --- a/app/assets/stylesheets/highlight/themes/dark.scss +++ b/app/assets/stylesheets/highlight/themes/dark.scss @@ -127,7 +127,15 @@ $dark-il: #de935f; .code.dark { // Line numbers .file-line-num { - @include line-number-link($dark-line-num-color); + @include line-link($white, 'link'); + } + + .file-line-blame { + @include line-link($white, 'git'); + } + + .line-links { + @include line-hover-bg($dark-main-bg); } .line-numbers, diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss index 0ed9c209417..19c3d6926e7 100644 --- a/app/assets/stylesheets/highlight/themes/monokai.scss +++ b/app/assets/stylesheets/highlight/themes/monokai.scss @@ -120,7 +120,15 @@ $monokai-gh: #75715e; // Line numbers .file-line-num { - @include line-number-link($monokai-line-num-color); + @include line-link($white, 'link'); + } + + .file-line-blame { + @include line-link($white, 'git'); + } + + .line-links { + @include line-hover-bg($monokai-bg); } .line-numbers, diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss index 868e466b1f8..4c716d20ddf 100644 --- a/app/assets/stylesheets/highlight/themes/none.scss +++ b/app/assets/stylesheets/highlight/themes/none.scss @@ -25,7 +25,15 @@ // Line numbers .file-line-num { - @include line-number-link($black-transparent); + @include line-link($black, 'link'); + } + + .file-line-blame { + @include line-link($black, 'git'); + } + + .line-links { + @include line-hover-bg; } .line-numbers, diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss index 6260339a48d..70086be1606 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss @@ -123,7 +123,15 @@ $solarized-dark-il: #2aa198; // Line numbers .file-line-num { - @include line-number-link($solarized-dark-line-color); + @include line-link($white, 'link'); + } + + .file-line-blame { + @include line-link($white, 'git'); + } + + .line-links { + @include line-hover-bg($solarized-dark-pre-bg); } .line-numbers, diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss index e6f098f4cdf..8d223d1fdb1 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-light.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss @@ -109,7 +109,15 @@ $solarized-light-il: #2aa198; @include hljs-override('title.class_.inherited__', $solarized-light-no); // Line numbers .file-line-num { - @include line-number-link($solarized-light-line-color); + @include line-link($black, 'link'); + } + + .file-line-blame { + @include line-link($black, 'git'); + } + + .line-links { + @include line-hover-bg($solarized-light-pre-bg); } .line-numbers, diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss index 770a90bbc57..9761e3961dd 100644 --- a/app/assets/stylesheets/highlight/white_base.scss +++ b/app/assets/stylesheets/highlight/white_base.scss @@ -95,7 +95,15 @@ $white-gc-bg: #eaf2f5; // Line numbers .file-line-num { - @include line-number-link($black-transparent); + @include line-link($black, 'link'); +} + +.file-line-blame { + @include line-link($black, 'git'); +} + +.line-links { + @include line-hover-bg; } .line-numbers, diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss index 81d35b8bc7b..197073412e8 100644 --- a/app/assets/stylesheets/page_bundles/boards.scss +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -35,7 +35,7 @@ .boards-app { @include media-breakpoint-up(sm) { - transition: width $sidebar-transition-duration; + transition: width $gl-transition-duration-medium; width: 100%; &.is-compact { @@ -349,7 +349,7 @@ .right-sidebar.right-sidebar-expanded { &.boards-sidebar-slide-enter-active, &.boards-sidebar-slide-leave-active { - transition: width $sidebar-transition-duration, padding $sidebar-transition-duration; + transition: width $gl-transition-duration-medium, padding $gl-transition-duration-medium; } &.boards-sidebar-slide-enter, diff --git a/app/assets/stylesheets/page_bundles/escalation_policies.scss b/app/assets/stylesheets/page_bundles/escalation_policies.scss index 6f3873fea0c..84c62ba93dd 100644 --- a/app/assets/stylesheets/page_bundles/escalation_policies.scss +++ b/app/assets/stylesheets/page_bundles/escalation_policies.scss @@ -15,17 +15,11 @@ $stroke-size: 1px; .right-arrow { - @include gl-relative; 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-p-1; - @include gl-border-solid; + top: -2 * $stroke-size; + left: calc(100% - #{5 * $stroke-size}); border-width: 0 $stroke-size $stroke-size 0; border-color: var(--gray-900, $gray-900); transform: rotate(-45deg); @@ -41,14 +35,10 @@ $stroke-size: 1px; .rule-condition { @media (min-width: $breakpoint-lg) { flex-basis: 25%; - flex-shrink: 0; + @include gl-flex-shrink-0; } @media (max-width: $breakpoint-lg) { @include gl-w-full; } } - -.rule-action { - min-width: 0; -} diff --git a/app/assets/stylesheets/page_bundles/group.scss b/app/assets/stylesheets/page_bundles/group.scss index 38dd07f617c..71dbb855103 100644 --- a/app/assets/stylesheets/page_bundles/group.scss +++ b/app/assets/stylesheets/page_bundles/group.scss @@ -72,36 +72,43 @@ } } -.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-nav-container { + .nav-controls { + .group-filter-form { + flex: 1 1 auto; + margin-right: $gl-padding-8; } - .group-filter-form, - .dropdown { - margin-bottom: 10px; - margin-right: 0; + .dropdown-menu-right { + margin-top: 0; } - &, - .group-filter-form, - .group-filter-form-field, - .dropdown, - .dropdown .dropdown-toggle, - .btn-success { - width: 100%; + @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%; + } } } + + // Remove this selector once https://gitlab.com/gitlab-org/gitlab/-/issues/370050 is addressed. + .scrolling-tabs-container { + width: 100%; + } } diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index 1b27e51e793..b7a75884425 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -416,8 +416,6 @@ $tabs-holder-z-index: 250; .label-branch { @include gl-font-monospace; font-size: 95%; - color: var(--gl-text-color, $gl-text-color); - font-weight: normal; overflow: hidden; word-break: break-all; } @@ -477,8 +475,7 @@ $tabs-holder-z-index: 250; margin: 0 0 0 10px; } - .bold, - .gl-font-weight-bold { + .bold { font-weight: $gl-font-weight-bold; color: var(--gray-600, $gray-600); margin-left: 10px; @@ -494,8 +491,7 @@ $tabs-holder-z-index: 250; } .spacing, - .bold, - .gl-font-weight-bold { + .bold { vertical-align: middle; } @@ -602,6 +598,12 @@ $tabs-holder-z-index: 250; padding: $gl-padding; } +.mr-widget-body-ready-merge { + @include media-breakpoint-down(sm) { + @include gl-p-3; + } +} + .mr-widget-border-top { border-top: 1px solid var(--border-color, $border-color); } @@ -820,3 +822,21 @@ $tabs-holder-z-index: 250; height: 180px; } } + +.mr-widget-merge-details { + li:not(:last-child) { + @include gl-mb-3; + } +} + +.mr-ready-merge-related-links, +.mr-widget-merge-details { + a { + @include gl-text-decoration-underline; + + &:hover, + &:focus { + @include gl-text-decoration-none; + } + } +} diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss index e6afc70acbb..98e9e2b3c27 100644 --- a/app/assets/stylesheets/page_bundles/pipeline.scss +++ b/app/assets/stylesheets/page_bundles/pipeline.scss @@ -225,12 +225,20 @@ } } -.test-reports-table { - .build-log { - @include build-log(); +.progress-bar.bg-primary { + background-color: var(--blue-500, $blue-500) !important; +} + +.ci-job-component { + .job-failed { + background-color: var(--red-50, $red-50); } } -.progress-bar.bg-primary { - background-color: var(--blue-500, $blue-500) !important; +.gl-dark { + .ci-job-component { + .job-failed { + background-color: var(--gray-200, $gray-200); + } + } } diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss new file mode 100644 index 00000000000..59b8823c113 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/profile.scss @@ -0,0 +1,212 @@ +@import 'mixins_and_variables_and_functions'; + +.calendar-block { + padding-left: 0; + padding-right: 0; + border-top: 0; + + @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) { + overflow-x: auto; + } +} + +.calendar-hint { + font-size: 12px; + direction: ltr; + margin-top: -23px; + float: right; +} + +.cover-block { + text-align: center; + background: var(--gray-50, $gray-light); + padding-top: 44px; + position: relative; + + .avatar-holder { + .avatar, + .identicon { + margin: 0 auto; + float: none; + } + + .identicon { + border-radius: 50%; + } + } + + .cover-title { + color: var(--gl-text-color, $gl-text-color); + font-size: 23px; + + h1 { + color: var(--gl-text-color, $gl-text-color); + margin-bottom: 6px; + font-size: 23px; + } + + .visibility-icon { + display: inline-block; + margin-left: 5px; + font-size: 18px; + color: color('gray'); + } + + p { + padding: 0 $gl-padding; + color: var(--gl-text-color, $gl-text-color); + } + } + + .cover-controls { + @include media-breakpoint-up(sm) { + position: absolute; + top: 1rem; + right: 1.25rem; + } + + &.left { + @include media-breakpoint-up(sm) { + left: 1.25rem; + right: auto; + } + } + } + + &.user-cover-block { + padding: 24px 0 0; + + .nav-links { + width: 100%; + float: none; + + &.scrolling-tabs { + float: none; + } + } + + li:first-child { + margin-left: auto; + } + + li:last-child { + margin-right: auto; + } + } +} + +// Middle dot divider between each element in a list of items. +.middle-dot-divider { + @include middle-dot-divider; +} + +.middle-dot-divider-sm { + @include media-breakpoint-up(sm) { + @include middle-dot-divider; + } +} + +.profile-user-bio { + // Limits the width of the user bio for readability. + max-width: 600px; + margin: 10px auto; +} + +.user-calendar { + text-align: center; + min-height: 172px; + + .calendar { + display: inline-block; + } +} + +.user-calendar-activities { + direction: ltr; + + .str-truncated { + max-width: 70%; + } +} + +.user-contrib-text { + font-size: 12px; + fill: $calendar-user-contrib-text; +} + +.user-profile { + .profile-header { + margin: 0 $gl-padding; + + &.with-no-profile-tabs { + margin-bottom: $gl-padding-24; + } + + .avatar-holder { + width: 90px; + margin: 0 auto 10px; + } + } + + .user-profile-nav { + font-size: 0; + } + + .fade-right { + right: 0; + } + + .fade-left { + left: 0; + } + + .activities-block { + .event-item { + padding-left: 40px; + } + + .gl-label-scoped { + --label-inset-border: inset 0 0 0 1px currentColor; + } + + @include media-breakpoint-up(lg) { + margin-right: 5px; + } + } + + .projects-block { + @include media-breakpoint-up(lg) { + margin-left: 5px; + } + } + + @include media-breakpoint-down(xs) { + .cover-block { + padding-top: 20px; + } + + .user-profile-nav { + a { + margin-right: 0; + } + } + + .activities-block { + .event-item { + padding-left: 0; + } + } + } +} + +.linkedin-icon { + color: $linkedin; +} + +.skype-icon { + color: $skype; +} + +.twitter-icon { + color: $twitter; +} diff --git a/app/assets/stylesheets/page_bundles/runner_details.scss b/app/assets/stylesheets/page_bundles/runner_details.scss new file mode 100644 index 00000000000..6e5580a18e4 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/runner_details.scss @@ -0,0 +1,3 @@ +.runner-details-grid-template { + grid-template-columns: auto 1fr; +} diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 51f964a4b70..69797c6b303 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -132,7 +132,7 @@ // stylelint-disable-next-line length-zero-no-unit bottom: var(--review-bar-height, 0px); right: 0; - transition: width $sidebar-transition-duration; + transition: width $gl-transition-duration-medium; background-color: $white; z-index: 200; overflow: hidden; diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index c0a283ec643..a151c28fe93 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -318,7 +318,7 @@ ul.related-merge-requests > li gl-emoji { .issuable-header-slide-enter-active, .issuable-header-slide-leave-active { - @include gl-transition-slow; + @include gl-transition-medium; } .issuable-header-slide-enter, diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index 7f0bdadd2bc..1beb9f05b6c 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -41,6 +41,20 @@ font-size: 13px; } + .borderless { + .login-box, + .omniauth-container { + box-shadow: none; + } + + .g-recaptcha { + > div { + margin-left: auto; + margin-right: auto; + } + } + } + .login-box, .omniauth-container { box-shadow: 0 0 0 1px $border-color; diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 96fe6caeea2..b016d0a1068 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -342,10 +342,10 @@ $comparison-empty-state-height: 62px; .mr-compare { .diff-file .file-title-flex-parent { - top: calc(#{$header-height} + #{$mr-tabs-height} + 36px); + top: calc(#{$header-height} + #{$mr-tabs-height}); .with-performance-bar & { - top: calc(#{$performance-bar-height} + #{$header-height} + #{$mr-tabs-height} + 36px); + top: calc(#{$performance-bar-height} + #{$header-height} + #{$mr-tabs-height}); } } } diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 645f145328b..9692becef4f 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -121,15 +121,6 @@ border-radius: $label-border-radius; padding-top: $gl-vert-padding; padding-bottom: $gl-vert-padding; - - .icon svg { - position: relative; - top: 2px; - margin-right: $btn-margin-5; - width: $gl-font-size; - height: $gl-font-size; - fill: $orange-600; - } } } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 4d0cf30a3b2..db07f16dfd0 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -4,7 +4,7 @@ $system-note-svg-size: 16px; @mixin vertical-line($left) { &::before { content: ''; - border-left: 2px solid $gray-50; + border-left: 2px solid $gray-10; position: absolute; top: 0; bottom: 0; @@ -29,7 +29,7 @@ $system-note-svg-size: 16px; .issuable-discussion { .main-notes-list { - @include vertical-line(36px); + @include vertical-line(35px); } } @@ -300,17 +300,17 @@ $system-note-svg-size: 16px; .timeline-icon { display: flex; align-items: center; - background-color: $white; + background-color: $gray-10; width: $system-note-icon-size; height: $system-note-icon-size; - border: 1px solid $border-color; + border: 1px solid $gray-10; border-radius: $system-note-icon-size; margin: -6px 20px 0 0; svg { width: $system-note-svg-size; height: $system-note-svg-size; - fill: $gray-darkest; + fill: $gray-400; display: block; margin: 0 auto; } diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index 812cc6ab4e6..951e31ef768 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -29,23 +29,6 @@ } } -// Middle dot divider between each element in a list of items. -.middle-dot-divider { - @include middle-dot-divider; -} - -.middle-dot-divider-sm { - @include media-breakpoint-up(sm) { - @include middle-dot-divider; - } -} - -.profile-user-bio { - // Limits the width of the user bio for readability. - max-width: 600px; - margin: 10px auto; -} - .user-avatar-button { .file-name { display: inline-block; @@ -156,71 +139,6 @@ } } -.user-profile { - .profile-header { - margin: 0 $gl-padding; - - &.with-no-profile-tabs { - margin-bottom: $gl-padding-24; - } - - .avatar-holder { - width: 90px; - margin: 0 auto 10px; - } - } - - .user-profile-nav { - font-size: 0; - } - - .fade-right { - right: 0; - } - - .fade-left { - left: 0; - } - - .activities-block { - .event-item { - padding-left: 40px; - } - - .gl-label-scoped { - --label-inset-border: inset 0 0 0 1px currentColor; - } - - @include media-breakpoint-up(lg) { - margin-right: 5px; - } - } - - .projects-block { - @include media-breakpoint-up(lg) { - margin-left: 5px; - } - } - - @include media-breakpoint-down(xs) { - .cover-block { - padding-top: 20px; - } - - .user-profile-nav { - a { - margin-right: 0; - } - } - - .activities-block { - .event-item { - padding-left: 0; - } - } - } -} - table.u2f-registrations { th:not(:last-child), td:not(:last-child) { @@ -366,15 +284,3 @@ table.u2f-registrations { .gitlab-slack-slack-logo { transform: scale(200%); // Slack logo SVG is scaled down 50% and has empty space around it } - -.skype-icon { - color: $skype; -} - -.linkedin-icon { - color: $linkedin; -} - -.twitter-icon { - color: $twitter; -} diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index f1865a7dc40..6c909b8d9fa 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -82,19 +82,17 @@ input[type='checkbox']:hover { min-width: $search-input-field-x-min-width; } - &.is-active { - &.is-searching { - .in-search-scope-help { - position: absolute; - top: $gl-spacing-scale-2; - right: 2.125rem; - z-index: 2; - } + &.is-searching { + .in-search-scope-help { + position: absolute; + top: $gl-spacing-scale-2; + right: 2.125rem; + z-index: 2; } } - &.is-not-searching { - .in-search-scope-help { + &.is-not-focused { + .gl-search-box-by-type-clear { display: none; } } @@ -104,28 +102,11 @@ input[type='checkbox']:hover { box-shadow: none; border-color: transparent; } - - &.is-active { - .keyboard-shortcut-helper { - display: none; - } - } - - &.is-not-active { - .btn.gl-clear-icon-button, - .in-search-scope-help { - display: none; - } - } } .header-search-dropdown-menu { max-height: $dropdown-max-height; - top: $header-height; -} - -.header-search-dropdown-content { - max-height: $dropdown-max-height; + top: 100%; } .search { diff --git a/app/assets/stylesheets/pages/settings_ci_cd.scss b/app/assets/stylesheets/pages/settings_ci_cd.scss deleted file mode 100644 index 7d74070b4f2..00000000000 --- a/app/assets/stylesheets/pages/settings_ci_cd.scss +++ /dev/null @@ -1,18 +0,0 @@ -.triggers-container { - .label-container { - display: inline-block; - margin-left: 10px; - } -} - -.trigger-description { - max-width: 100px; -} - -.trigger-actions { - white-space: nowrap; -} - -.auto-devops-card { - margin-bottom: $gl-vert-padding; -} diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index 801c9ea828f..ffe4d5dde9d 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -1043,7 +1043,7 @@ kbd { text-align: left; } .context-header .avatar-container { - flex: 0 0 40px; + flex: 0 0 32px; background-color: #333; } .context-header .sidebar-context-title { @@ -1376,18 +1376,6 @@ kbd { .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); -} -.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar { - border-style: none; -} -.nav-sidebar-inner-scroll - > div.context-header - a - .avatar-container.rect-avatar - .avatar.s32 { - border-radius: 4px; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .sidebar-top-level-items { margin-bottom: 60px; @@ -1400,18 +1388,6 @@ kbd { .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); -} -.sidebar-top-level-items .context-header a .avatar-container.rect-avatar { - border-style: none; -} -.sidebar-top-level-items - .context-header - a - .avatar-container.rect-avatar - .avatar.s32 { - border-radius: 4px; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .sidebar-top-level-items > li.active @@ -1628,7 +1604,6 @@ svg.s16 { float: left; margin-right: 16px; border-radius: 50%; - border: 1px solid rgba(0, 0, 0, 0.08); } .avatar.s16, .avatar-container.s16 { @@ -1649,7 +1624,7 @@ svg.s16 { padding: 0; background: #222; overflow: hidden; - border-color: rgba(255, 255, 255, 0.1); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } .avatar.avatar-tile { border-radius: 0; @@ -1676,7 +1651,7 @@ svg.s16 { background-color: #232150; } .identicon.bg3 { - background-color: #f1f1ff; + background-color: #1a1a40; } .identicon.bg4 { background-color: #033464; @@ -1714,9 +1689,15 @@ svg.s16 { .rect-avatar.s16 { border-radius: 2px; } +.rect-avatar.s16 .avatar { + border-radius: 2px; +} .rect-avatar.s32 { border-radius: 4px; } +.rect-avatar.s32 .avatar { + border-radius: 4px; +} :root { color-scheme: dark; } @@ -1817,6 +1798,10 @@ body.gl-dark { background-color: #262626; border-right: 1px solid #303030; } +.avatar-container, +.avatar { + background: rgba(255, 255, 255, 0.04); +} .nav-sidebar li a { color: var(--gray-600); } @@ -1907,7 +1892,7 @@ body.gl-dark .header-search input::placeholder { body.gl-dark .header-search input:active::placeholder { color: #868686; } -body.gl-dark .header-search.is-not-active .keyboard-shortcut-helper { +body.gl-dark .header-search .keyboard-shortcut-helper { color: #fafafa; background-color: rgba(250, 250, 250, 0.2); } diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index 43ca5a512d5..00ca98bfd27 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -1022,7 +1022,7 @@ kbd { text-align: left; } .context-header .avatar-container { - flex: 0 0 40px; + flex: 0 0 32px; background-color: #fff; } .context-header .sidebar-context-title { @@ -1355,18 +1355,6 @@ kbd { .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); -} -.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar { - border-style: none; -} -.nav-sidebar-inner-scroll - > div.context-header - a - .avatar-container.rect-avatar - .avatar.s32 { - border-radius: 4px; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .sidebar-top-level-items { margin-bottom: 60px; @@ -1379,18 +1367,6 @@ kbd { .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); -} -.sidebar-top-level-items .context-header a .avatar-container.rect-avatar { - border-style: none; -} -.sidebar-top-level-items - .context-header - a - .avatar-container.rect-avatar - .avatar.s32 { - border-radius: 4px; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .sidebar-top-level-items > li.active @@ -1607,7 +1583,6 @@ svg.s16 { float: left; margin-right: 16px; border-radius: 50%; - border: 1px solid rgba(0, 0, 0, 0.08); } .avatar.s16, .avatar-container.s16 { @@ -1628,7 +1603,7 @@ svg.s16 { padding: 0; background: #fdfdfd; overflow: hidden; - border-color: rgba(0, 0, 0, 0.1); + box-shadow: inset 0 0 0 1px rgba(31, 31, 31, 0.1); } .avatar.avatar-tile { border-radius: 0; @@ -1693,9 +1668,15 @@ svg.s16 { .rect-avatar.s16 { border-radius: 2px; } +.rect-avatar.s16 .avatar { + border-radius: 2px; +} .rect-avatar.s32 { border-radius: 4px; } +.rect-avatar.s32 .avatar { + border-radius: 4px; +} .tab-width-8 { tab-size: 8; diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss index 3090edfb123..c0e2d8d44d4 100644 --- a/app/assets/stylesheets/startup/startup-signin.scss +++ b/app/assets/stylesheets/startup/startup-signin.scss @@ -11,9 +11,6 @@ html { font-family: sans-serif; line-height: 1.15; } -header { - display: block; -} body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, @@ -31,8 +28,7 @@ hr { height: 0; overflow: visible; } -h1, -h3 { +h1 { margin-top: 0; margin-bottom: 0.25rem; } @@ -53,10 +49,6 @@ img { vertical-align: middle; border-style: none; } -svg { - overflow: hidden; - vertical-align: middle; -} label { display: inline-block; margin-bottom: 0.5rem; @@ -86,8 +78,7 @@ fieldset { [hidden] { display: none !important; } -h1, -h3 { +h1 { margin-bottom: 0.25rem; font-weight: 600; line-height: 1.2; @@ -96,9 +87,6 @@ h3 { h1 { font-size: 2.1875rem; } -h3 { - font-size: 1.53125rem; -} hr { margin-top: 0.5rem; margin-bottom: 0.5rem; @@ -132,13 +120,6 @@ hr { max-width: 1140px; } } -.row { - display: flex; - flex-wrap: wrap; - margin-right: -15px; - margin-left: -15px; -} -.col-md-6, .col-sm-12, .col { position: relative; @@ -151,29 +132,11 @@ hr { flex-grow: 1; max-width: 100%; } -.order-1 { - order: 1; -} -.order-12 { - order: 12; -} @media (min-width: 576px) { .col-sm-12 { flex: 0 0 100%; max-width: 100%; } - .order-sm-1 { - order: 1; - } - .order-sm-12 { - order: 12; - } -} -@media (min-width: 768px) { - .col-md-6 { - flex: 0 0 50%; - max-width: 50%; - } } .form-control { display: block; @@ -241,39 +204,18 @@ hr { fieldset:disabled a.btn { pointer-events: none; } -.navbar { - position: relative; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - padding: 0.25rem 0.5rem; -} -.navbar .container { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; -} -.fixed-top { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 1030; -} .mt-3 { margin-top: 1rem !important; } .mb-3 { margin-bottom: 1rem !important; } +.text-nowrap { + white-space: nowrap !important; +} .text-center { text-align: center !important; } -.font-weight-normal { - font-weight: 400 !important; -} .gl-form-input, .gl-form-input.form-control { background-color: #fff; @@ -373,8 +315,7 @@ body { [type="submit"] { cursor: pointer; } -h1, -h3 { +h1 { margin-top: 20px; margin-bottom: 10px; } @@ -384,9 +325,6 @@ a { hr { overflow: hidden; } -svg { - vertical-align: baseline; -} .form-control { font-size: 0.875rem; } @@ -442,13 +380,6 @@ body.navless { border-color: #e3e3e3; color: #303030; } -.btn svg { - height: 15px; - width: 15px; -} -.btn svg:not(:last-child) { - margin-right: 5px; -} .light { color: #303030; } @@ -504,26 +435,6 @@ label.label-bold { .gl-show-field-errors .gl-field-hint { color: #303030; } -.navbar-empty { - justify-content: center; - height: var(--header-height, 48px); - background: #fff; - border-bottom: 1px solid #dbdbdb; -} -.navbar-empty .tanuki-logo, -.navbar-empty .brand-header-logo { - max-height: 100%; -} -.tanuki-logo .tanuki { - fill: #e24329; -} -.tanuki-logo .left-cheek, -.tanuki-logo .right-cheek { - fill: #fc6d26; -} -.tanuki-logo .chin { - fill: #fca326; -} input::-moz-placeholder { color: #868686; opacity: 1; @@ -534,9 +445,6 @@ input::-ms-input-placeholder { input:-ms-input-placeholder { color: #868686; } -svg { - fill: currentColor; -} .login-page .container { max-width: 960px; } @@ -569,6 +477,14 @@ svg { .login-page p { font-size: 13px; } +.login-page .borderless .login-box, +.login-page .borderless .omniauth-container { + box-shadow: none; +} +.login-page .borderless .g-recaptcha > div { + margin-left: auto; + margin-right: auto; +} .login-page .login-box, .login-page .omniauth-container { box-shadow: 0 0 0 1px #dbdbdb; @@ -732,61 +648,76 @@ svg { } } -.gl-border-solid { - border-style: solid; -} -.gl-border-gray-100 { - border-color: #dbdbdb; -} -.gl-border-1 { - border-width: 1px; -} -.gl-rounded-base { - border-radius: 0.25rem; -} .gl-text-green-600 { color: #217645; } .gl-text-red-500 { color: #dd2b0e; } -.gl-display-flex { - display: flex; -} .gl-display-block { display: block; } -.gl-align-items-center { - align-items: center; +.gl-w-10 { + width: 3.5rem; } -.gl-flex-wrap { - flex-wrap: wrap; +.gl-w-half { + width: 50%; +} +.gl-w-90p { + width: 90%; } .gl-w-full { width: 100%; } +@media (max-width: 575.98px) { + .gl-xs-w-full { + width: 100%; + } +} .gl-p-4 { padding: 0.75rem; } +.gl-pt-5 { + padding-top: 1rem; +} .gl-mt-2 { margin-top: 0.25rem; } .gl-mt-5 { margin-top: 1rem; } +.gl-mr-auto { + margin-right: auto; +} +.gl-mr-2 { + margin-right: 0.25rem; +} +.gl-mb-1 { + margin-bottom: 0.125rem; +} +.gl-mb-2 { + margin-bottom: 0.25rem; +} .gl-mb-3 { margin-bottom: 0.5rem; } .gl-mb-5 { margin-bottom: 1rem; } -@media (min-width: 576px) { - .gl-sm-mt-0 { - margin-top: 0; - } +.gl-ml-auto { + margin-left: auto; } -.gl-font-weight-bold { - font-weight: 600; +.gl-ml-2 { + margin-left: 0.25rem; +} +.gl-text-center { + text-align: center; +} +.gl-font-size-h2 { + font-size: 1.1875rem; +} +.gl-font-weight-normal { + font-weight: 400; } @import "startup/cloaking"; diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index e6e736ef47c..eeb4604f32a 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -98,6 +98,8 @@ $white-light: #2b2b2b; $white-normal: #333; $white-dark: #444; +$theme-indigo-50: #1a1a40; + $border-color: #4f4f4f; $nav-active-bg: rgba(255, 255, 255, 0.08); diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss index 34bb4925249..92740aaf89e 100644 --- a/app/assets/stylesheets/themes/dark_mode_overrides.scss +++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss @@ -48,6 +48,17 @@ border-right: 1px solid $gray-50; } +.gl-avatar:not(.gl-avatar-identicon), +.avatar-container, +.avatar { + background: rgba($gray-950, 0.04); +} + +.gl-avatar { + @include gl-border-none; + box-shadow: inset 0 0 0 1px rgba($gray-950, $gl-avatar-border-opacity); +} + .nav-sidebar { li { a { @@ -149,3 +160,8 @@ body.gl-dark { background-color: $gray-200; } } + +.timeline-entry.internal-note:not(.note-form) { + // soften on darkmode + background-color: mix($gray-50, $orange-50, 75%); +} diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss index 2b6221a6c87..042e21cebd6 100644 --- a/app/assets/stylesheets/themes/theme_helper.scss +++ b/app/assets/stylesheets/themes/theme_helper.scss @@ -176,11 +176,9 @@ } } - &.is-not-active { - .keyboard-shortcut-helper { - color: $search-and-nav-links; - background-color: rgba($search-and-nav-links, 0.2); - } + .keyboard-shortcut-helper { + color: $search-and-nav-links; + background-color: rgba($search-and-nav-links, 0.2); } } |