diff options
Diffstat (limited to 'app/assets/stylesheets')
50 files changed, 1133 insertions, 530 deletions
diff --git a/app/assets/stylesheets/application_dark.scss b/app/assets/stylesheets/application_dark.scss new file mode 100644 index 00000000000..72196d71969 --- /dev/null +++ b/app/assets/stylesheets/application_dark.scss @@ -0,0 +1,3 @@ +@import "./themes/dark"; + +@import "./application"; diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss index 1c15400542a..a6d56819140 100644 --- a/app/assets/stylesheets/bootstrap_migration.scss +++ b/app/assets/stylesheets/bootstrap_migration.scss @@ -111,7 +111,7 @@ kbd { code { padding: 2px 4px; color: $code-color; - background-color: $gray-100; + background-color: $gray-50; border-radius: $border-radius-default; .code > & { @@ -187,7 +187,7 @@ h3.popover-header { // Add to .label so that old system notes that are saved to the db // will still receive the correct styling -.badge, +.badge:not(.gl-badge), .label { padding: 4px 5px; font-size: 12px; diff --git a/app/assets/stylesheets/components/avatar.scss b/app/assets/stylesheets/components/avatar.scss index 312123aeef9..6bb7e9d215e 100644 --- a/app/assets/stylesheets/components/avatar.scss +++ b/app/assets/stylesheets/components/avatar.scss @@ -70,7 +70,7 @@ $avatar-sizes: ( $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $identicon-blue, $identicon-teal, $identicon-orange, $gray-darker; -.avatar-circle { +%avatar-circle { float: left; margin-right: $gl-padding; border-radius: $avatar-radius; @@ -84,7 +84,7 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i } .avatar { - @extend .avatar-circle; + @extend %avatar-circle; transition-property: none; width: 40px; @@ -100,10 +100,7 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i margin-left: 2px; flex-shrink: 0; - &.s16 { - margin-right: 4px; - } - + &.s16, &.s24 { margin-right: 4px; } @@ -154,7 +151,7 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i } .avatar-container { - @extend .avatar-circle; + @extend %avatar-circle; overflow: hidden; display: flex; diff --git a/app/assets/stylesheets/components/dashboard_skeleton.scss b/app/assets/stylesheets/components/dashboard_skeleton.scss index ce33aa94df3..64091201221 100644 --- a/app/assets/stylesheets/components/dashboard_skeleton.scss +++ b/app/assets/stylesheets/components/dashboard_skeleton.scss @@ -67,10 +67,10 @@ background-repeat: no-repeat; background-size: cover; background-image: linear-gradient(to right, - $gray-100 0%, + $gray-50 0%, $gray-10 20%, - $gray-100 40%, - $gray-100 100%); + $gray-50 40%, + $gray-50 100%); border-radius: $gl-padding; height: $gl-padding; margin-top: -$gl-padding-8; diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss index 1061aae2bbb..380b2280490 100644 --- a/app/assets/stylesheets/components/design_management/design.scss +++ b/app/assets/stylesheets/components/design_management/design.scss @@ -1,3 +1,7 @@ +.layout-page.design-detail-layout { + max-height: 100vh; +} + .design-detail { background-color: rgba($black, 0.9); @@ -5,8 +9,30 @@ top: 35px; } - .inactive { - opacity: 0.5; + .design-pin { + transition: opacity 0.5s ease; + + &.inactive { + @include gl-opacity-5; + + &:hover { + @include gl-opacity-10; + } + } + } + + .badge.badge-pill { + display: flex; + height: 28px; + width: 28px; + background-color: $blue-400; + color: $white; + border: $white 1px solid; + border-radius: 50%; + + &.resolved { + background-color: $gray-700; + } } } @@ -40,14 +66,31 @@ 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 $border-color; + + &.expanded { + border-bottom: 1px solid $border-color; + } + + .toggle-comments-button:focus { + text-decoration: none; + color: $blue-600; + } + } + .badge.badge-pill { margin-left: $gl-padding; - background-color: $blue-400; - color: $white; - border: $white 1px solid; - min-height: 28px; - padding: 7px 10px; - border-radius: $gl-padding; } .design-discussion { diff --git a/app/assets/stylesheets/components/popover.scss b/app/assets/stylesheets/components/popover.scss index fcaa1b054ed..1e78781f4b8 100644 --- a/app/assets/stylesheets/components/popover.scss +++ b/app/assets/stylesheets/components/popover.scss @@ -1,7 +1,7 @@ .popover { max-width: $popover-max-width; border: 1px solid $gray-200; - box-shadow: 0 2px 3px 1px $gray-200; + box-shadow: $popover-box-shadow; font-size: $gl-font-size-small; /** diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss index 61f971a3185..956f34f7a8b 100644 --- a/app/assets/stylesheets/components/related_items_list.scss +++ b/app/assets/stylesheets/components/related_items_list.scss @@ -23,20 +23,17 @@ $item-remove-button-space: 42px; .sortable-link { white-space: normal; } + + .item-assignees .avatar { + height: $gl-padding; + width: $gl-padding; + } } .item-body { position: relative; line-height: $gl-line-height; - .issue-token-state-icon-open { - color: $green-500; - } - - .issue-token-state-icon-closed { - color: $blue-500; - } - .merge-request-status.closed { color: $red-500; } @@ -68,7 +65,6 @@ $item-remove-button-space: 42px; .sortable-link { color: $gray-900; - font-weight: normal; } } @@ -276,10 +272,6 @@ $item-remove-button-space: 42px; /* Small devices (landscape phones, 768px and up) */ @include media-breakpoint-up(md) { - .item-body .item-contents { - max-width: 95%; - } - .related-items-tree .item-contents, .item-body .item-title { max-width: 100%; @@ -348,6 +340,11 @@ $item-remove-button-space: 42px; } .item-assignees { + .avatar { + height: $gl-padding-24; + width: $gl-padding-24; + } + .avatar-counter { height: $gl-padding-24; min-width: $gl-padding-24; @@ -366,6 +363,10 @@ $item-remove-button-space: 42px; .sortable-link { line-height: 1.3; } + + .item-info-area { + flex-basis: auto; + } } @media only screen and (min-width: 1500px) { diff --git a/app/assets/stylesheets/components/rich_content_editor.scss b/app/assets/stylesheets/components/rich_content_editor.scss index eca0f1114af..bedd06ec9a1 100644 --- a/app/assets/stylesheets/components/rich_content_editor.scss +++ b/app/assets/stylesheets/components/rich_content_editor.scss @@ -1,4 +1,8 @@ -// Overrides styles from ToastUI editor +/** +* Overrides styles from ToastUI editor +*/ + +// Toolbar buttons .tui-editor-defaultUI-toolbar .toolbar-button { color: $gl-gray-600; border: 0; @@ -9,3 +13,19 @@ border: 0; } } + +// Contextual menu's & popups +.tui-editor-defaultUI .tui-popup-wrapper { + @include gl-overflow-hidden; + @include gl-rounded-base; + @include gl-border-gray-400; + + hr { + @include gl-m-0; + @include gl-bg-gray-400; + } + + button { + @include gl-text-gray-800; + } +} diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss index 13174687e5d..136ff82e0f8 100644 --- a/app/assets/stylesheets/framework/animations.scss +++ b/app/assets/stylesheets/framework/animations.scss @@ -93,7 +93,6 @@ } .dropdown-menu-toggle, -.avatar-circle, .header-user-avatar { @include transition(border-color); } @@ -177,7 +176,7 @@ a { [class^='skeleton-line-'] { position: relative; - background-color: $gray-100; + background-color: $gray-50; height: 10px; overflow: hidden; @@ -192,10 +191,10 @@ a { background-repeat: no-repeat; background-size: cover; background-image: linear-gradient(to right, - $gray-100 0%, + $gray-50 0%, $gray-10 20%, - $gray-100 40%, - $gray-100 100%); + $gray-50 40%, + $gray-50 100%); height: 10px; } } diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss index c036267a7c8..5b8a4bf964e 100644 --- a/app/assets/stylesheets/framework/badges.scss +++ b/app/assets/stylesheets/framework/badges.scss @@ -1,6 +1,14 @@ -.badge.badge-pill { +.badge.badge-pill:not(.gl-badge) { font-weight: $gl-font-weight-normal; background-color: $badge-bg; color: $gray-800; vertical-align: baseline; + + // Do not use this! + // This is a temporary workaround until the new GlBadge component + // is available: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/481 + &.badge-pill-success { + background-color: rgba($green-500, 0.2); + color: $green; + } } diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss index 7dd7ab339dd..a1e757afe56 100644 --- a/app/assets/stylesheets/framework/blank.scss +++ b/app/assets/stylesheets/framework/blank.scss @@ -116,3 +116,17 @@ } } } + +.experiment-new-project-page-blank-state { + @include media-breakpoint-down(md) { + flex-direction: column; + justify-content: center; + text-align: center; + } +} + +$experiment-new-project-indigo-700: #41419f; + +.experiment-new-project-page-blank-state-title { + color: $experiment-new-project-indigo-700; +} diff --git a/app/assets/stylesheets/framework/broadcast_messages.scss b/app/assets/stylesheets/framework/broadcast_messages.scss index 9903d10d27c..534ada08b85 100644 --- a/app/assets/stylesheets/framework/broadcast_messages.scss +++ b/app/assets/stylesheets/framework/broadcast_messages.scss @@ -14,8 +14,6 @@ } .broadcast-banner-message { - @extend .broadcast-message; - @extend .alert-warning; text-align: center; .broadcast-message-dismiss { @@ -24,8 +22,6 @@ } .broadcast-notification-message { - @extend .broadcast-message; - position: fixed; bottom: $gl-padding; right: $gl-padding; @@ -42,7 +38,6 @@ } .broadcast-message-dismiss { - height: 100%; color: $gray-800; } } diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 93361c21642..849ca4a79f8 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -111,7 +111,7 @@ pre { hr { margin: 24px 0; - border-top: 1px solid darken($gray-normal, 8%); + border-top: 1px solid $gray-darker; } .str-truncated { @@ -135,7 +135,7 @@ hr { text-overflow: ellipsis; white-space: nowrap; - > div:not(.block), + > div:not(.block):not(.select2-display-none), .str-truncated { display: inline; } @@ -396,21 +396,13 @@ img.emoji { 🚨 Do not use these classes — they are deprecated and being removed. 🚨 See https://gitlab.com/gitlab-org/gitlab/-/issues/217418 for more details. **/ -.prepend-top-0 { margin-top: 0; } -.prepend-top-2 { margin-top: 2px; } -.prepend-top-4 { margin-top: $gl-padding-4; } .prepend-top-5 { margin-top: 5px; } -.prepend-top-8 { margin-top: $grid-size; } .prepend-top-10 { margin-top: 10px; } .prepend-top-15 { margin-top: 15px; } .prepend-top-default { margin-top: $gl-padding !important; } .prepend-top-16 { margin-top: 16px; } .prepend-top-20 { margin-top: 20px; } -.prepend-top-32 { margin-top: 32px; } -.prepend-left-2 { margin-left: 2px; } -.prepend-left-4 { margin-left: 4px; } .prepend-left-5 { margin-left: 5px; } -.prepend-left-8 { margin-left: 8px; } .prepend-left-10 { margin-left: 10px; } .prepend-left-15 { margin-left: 15px; } .prepend-left-default { margin-left: $gl-padding; } @@ -420,7 +412,6 @@ img.emoji { .append-right-2 { margin-right: 2px; } .append-right-4 { margin-right: 4px; } .append-right-5 { margin-right: 5px; } -.append-right-8 { margin-right: 8px; } .append-right-10 { margin-right: 10px; } .append-right-15 { margin-right: 15px; } .append-right-default { margin-right: $gl-padding; } @@ -428,11 +419,7 @@ img.emoji { .append-right-32 { margin-right: 32px; } .append-right-48 { margin-right: 48px; } .prepend-right-32 { margin-right: 32px; } -.append-bottom-0 { margin-bottom: 0; } -.append-bottom-2 { margin-bottom: 2px; } -.append-bottom-4 { margin-bottom: $gl-padding-4; } .append-bottom-5 { margin-bottom: 5px; } -.append-bottom-8 { margin-bottom: $grid-size; } .append-bottom-10 { margin-bottom: 10px; } .append-bottom-15 { margin-bottom: 15px; } .append-bottom-20 { margin-bottom: 20px; } @@ -521,31 +508,6 @@ img.emoji { } /** - The zero-indexed classes will not change and do not need to be updated. - These can be removed when the Gitlab UI class include is merged. -**/ - -.gl-p-0 { - padding: 0; -} - -.gl-pl-0 { - padding-left: 0; -} - -.gl-pr-0 { - padding-right: 0; -} - -.gl-pt-0 { - padding-top: 0; -} - -.gl-pb-0 { - padding-bottom: 0; -} - -/** * Removes browser specific clear icon from input fields in * Internet Explorer 10, Internet Explorer 11, and Microsoft Edge. * This is intended for elements which add a customized clear icon. @@ -602,7 +564,7 @@ img.emoji { bottom: 40px; right: 40px; font-size: $gl-font-size-small; - background: $gray-100; + background: $gray-50; width: 200px; border-radius: 24px; box-shadow: 0 2px 4px $issue-boards-card-shadow; @@ -637,8 +599,6 @@ img.emoji { .gl-font-lg { font-size: $gl-font-size-large; } .gl-font-base { font-size: $gl-font-size-14; } -.gl-line-height-24 { line-height: $gl-line-height-24; } - .gl-font-size-0 { font-size: 0; } .gl-font-size-28 { font-size: $gl-font-size-28; } .gl-font-size-42 { font-size: $gl-font-size-42; } diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index 11064f18418..e4bee01f61f 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -137,7 +137,7 @@ .badge.badge-pill:not(.fly-out-badge), .sidebar-context-title, .nav-item-name { - display: none; + @include gl-sr-only; } .sidebar-top-level-items > li > a { diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 1df9818a877..485a4879c43 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -657,6 +657,7 @@ .dropdown-input-field, .default-dropdown-input { + background-color: $input-bg; display: block; width: 100%; min-height: 30px; @@ -940,7 +941,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu { position: absolute; top: 13px; right: 25px; - color: $gray-100; + color: $gray-50; } } @@ -979,7 +980,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu { &:hover { .frequent-items-item-avatar-container .avatar { - border-color: $gray-100; + border-color: $gray-50; } } diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index 7ee3e68ceea..eef6d9031f8 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -480,7 +480,7 @@ span.idiff { padding-bottom: $gl-padding; .discussion-reply-holder { - border-bottom: 1px solid $gray-100; + border-bottom: 1px solid $gray-50; border-radius: 0; } } diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 5f6a26d0a14..9bba5c0614a 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -96,7 +96,7 @@ } .name { - background-color: $white-normal; + background-color: $gray-50; color: $gl-text-color-secondary; border-radius: 2px 0 0 2px; margin-right: 1px; @@ -259,6 +259,7 @@ flex: 1; position: relative; min-width: 0; + background-color: $input-bg; } .filtered-search-input-dropdown-menu { @@ -449,3 +450,17 @@ font-size: 13px; } } + +.vue-filtered-search-bar-container { + @include media-breakpoint-up(md) { + .sort-dropdown-container { + margin-left: 10px; + } + } + + @include media-breakpoint-down(sm) { + .sort-dropdown-container { + margin-top: 10px; + } + } +} diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss index 6a2f36d2509..8d5afe1d312 100644 --- a/app/assets/stylesheets/framework/gitlab_theme.scss +++ b/app/assets/stylesheets/framework/gitlab_theme.scss @@ -314,12 +314,12 @@ body { $gray-800, $gray-700, $gray-700, - $gray-100, + $gray-50, $gray-700 ); .navbar-gitlab { - background-color: $gray-100; + background-color: $gray-50; box-shadow: 0 1px 0 0 $border-color; .logo-text svg { @@ -388,4 +388,49 @@ body { color: $gray-900; } } + + &.gl-dark { + .logo-text svg { + fill: $gl-text-color; + } + + .navbar-gitlab { + background-color: $gray-50; + + .navbar-sub-nav, + .navbar-nav { + li { + > a:hover, + > a:focus, + > button:hover, + > button:focus { + color: $gl-text-color; + background-color: $gray-200; + } + } + + li.active, + li.dropdown.show { + > a, + > button { + color: $gl-text-color; + background-color: $gray-200; + } + } + } + + .search { + form { + background-color: $gray-100; + box-shadow: inset 0 0 0 1px $border-color; + + &:active, + &:hover { + background-color: $gray-100; + box-shadow: inset 0 0 0 1px $blue-200; + } + } + } + } + } } diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index 97698fefbee..2a97009e605 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -123,7 +123,7 @@ .markdown-area { border-radius: 0; background: $white; - border: 1px solid $gray-100; + border: 1px solid $gray-50; min-height: 140px; max-height: 500px; padding: 5px; diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss index 3c428cc352f..c2ab6f5b8c5 100644 --- a/app/assets/stylesheets/framework/selects.scss +++ b/app/assets/stylesheets/framework/selects.scss @@ -12,6 +12,7 @@ .select2-container.select2-drop-above { .select2-choice { background: $white; + color: $gl-text-color; border-color: $input-border; height: 34px; padding: $gl-vert-padding $gl-input-padding; @@ -58,6 +59,42 @@ } } + // Essentially we’re doing @include form-control-focus here (from + // bootstrap/scss/mixins/_forms.scss), except that the bootstrap mixin adds a + // `&:focus` selector and we’re never actually focusing the .select2-choice + // link nor the .select2-container, the Select2 library focuses an off-screen + // .select2-focusser element instead. + &.select2-container-active:not(.select2-dropdown-open) { + .select2-choice { + color: $input-focus-color; + background-color: $input-focus-bg; + border-color: $input-focus-border-color; + outline: 0; + } + + // Reusable focus “glow” box-shadow + @mixin form-control-focus-glow { + @if $enable-shadows { + box-shadow: $input-box-shadow, $input-focus-box-shadow; + } @else { + box-shadow: $input-focus-box-shadow; + } + } + + // Apply the focus “glow” shadow to the .select2-container if it also has + // the .block-truncated class as that applies an overflow: hidden, thereby + // hiding the glow of the nested .select2-choice element. + &.block-truncated { + @include form-control-focus-glow; + } + + // Apply the glow directly to the .select2-choice link if we’re not + // block-truncating the container. + &:not(.block-truncated) .select2-choice { + @include form-control-focus-glow; + } + } + &.is-invalid { ~ .invalid-feedback { display: block; @@ -72,6 +109,7 @@ .select2-drop, .select2-drop.select2-drop-above { + background: $white; box-shadow: 0 2px 4px $dropdown-shadow-color; border-radius: $border-radius-base; border: 1px solid $border-color; @@ -166,7 +204,8 @@ input { padding: $grid-size; - background: $white image-url('select2.png'); + background: transparent image-url('select2.png'); + color: $gl-text-color; background-clip: content-box; background-origin: content-box; background-repeat: no-repeat; diff --git a/app/assets/stylesheets/framework/system_messages.scss b/app/assets/stylesheets/framework/system_messages.scss index 5c298d5a588..4f66d6bf354 100644 --- a/app/assets/stylesheets/framework/system_messages.scss +++ b/app/assets/stylesheets/framework/system_messages.scss @@ -83,12 +83,20 @@ // right sidebar eg: mr page .nav-sidebar, .right-sidebar, - // navless pages' footer eg: login page - // navless pages' footer border eg: login page + // navless pages' footer eg: login page + // navless pages' footer border eg: login page &.devise-layout-html body .footer-container, &.devise-layout-html body hr.footer-fixed { bottom: $system-footer-height; } + + .content-wrapper { + margin-bottom: 16px; + } + + .boards-list { + height: calc(100vh - #{$header-height + $breadcrumb-min-height + $performance-bar-height + $system-footer-height + $gl-padding-32}); + } } .fullscreen-layout { diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss index 5739f048e86..5bc2874ea05 100644 --- a/app/assets/stylesheets/framework/tables.scss +++ b/app/assets/stylesheets/framework/tables.scss @@ -47,7 +47,7 @@ table { } th { - @include gl-bg-gray-100; + @include gl-bg-gray-50; border-bottom: 0; &.wide { diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 1afcbc6d514..6e07a2b5de1 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -545,6 +545,24 @@ } } } + + /* AsciiDoc(tor) built-in alignment roles */ + + .text-left { + text-align: left !important; + } + + .text-right { + text-align: right !important; + } + + .text-center { + text-align: center !important; + } + + .text-justify { + text-align: justify !important; + } } /** diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index ac4d431ea57..1536c5c3022 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -73,108 +73,106 @@ $size-scale: ( 'xl': #{70 * $grid-size} ); -/* - * Color schema - */ -$darken-normal-factor: 7%; -$darken-dark-factor: 10%; -$darken-border-factor: 5%; -$darken-border-dashed-factor: 25%; - -$white: #fff; -$white-normal: #f0f0f0; -$white-dark: #eaeaea; -$white-transparent: rgba(255, 255, 255, 0.8); - -$gray-lightest: #fdfdfd; -$gray-light: #fafafa; -$gray-lighter: #f9f9f9; -$gray-normal: #f5f5f5; -$gray-dark: darken($gray-light, $darken-dark-factor); -$gray-darker: #eee; -$gray-darkest: #c4c4c4; - -$purple: #6d49cb; -$purple-light: #ede8fb; - -$black: #000; -$black-transparent: rgba(0, 0, 0, 0.3); -$almost-black: #242424; - -$t-gray-a-02: rgba($black, 0.02); -$t-gray-a-04: rgba($black, 0.04); -$t-gray-a-06: rgba($black, 0.06); -$t-gray-a-08: rgba($black, 0.08); - -$gl-gray-100: #ddd; -$gl-gray-200: #ccc; -$gl-gray-350: #aaa; -$gl-gray-400: #999; -$gl-gray-500: #777; -$gl-gray-600: #666; -$gl-gray-700: #555; -$gl-gray-800: #333; - -$green-50: #f1fdf6; -$green-100: #dcf5e7; -$green-200: #b3e6c8; -$green-300: #75d09b; -$green-400: #37b96d; -$green-500: #1aaa55; -$green-600: #168f48; -$green-700: #12753a; -$green-800: #0e5a2d; -$green-900: #0a4020; -$green-950: #072b15; - -$blue-50: #f6fafe; -$blue-100: #e4f0fb; -$blue-200: #b8d6f4; -$blue-300: #73afea; -$blue-400: #418cd8; -$blue-500: #1f78d1; -$blue-600: #1b69b6; -$blue-700: #17599c; -$blue-800: #134a81; -$blue-900: #0f3b66; -$blue-950: #0a2744; - -$orange-50: #fffaf4; -$orange-100: #fff1de; -$orange-200: #fed69f; -$orange-300: #fdbc60; -$orange-400: #fca429; -$orange-500: #fc9403; -$orange-600: #de7e00; -$orange-700: #c26700; -$orange-800: #a35200; -$orange-900: #853c00; -$orange-950: #592800; - -$red-50: #fef6f5; -$red-100: #fbe5e1; -$red-200: #f2b4a9; -$red-300: #ea8271; -$red-400: #e05842; -$red-500: #db3b21; -$red-600: #c0341d; -$red-700: #a62d19; -$red-800: #8b2615; -$red-900: #711e11; -$red-950: #4b140b; - -$gray-10: #fafafa; -$gray-50: #f0f0f0; -$gray-100: #f2f2f2; -$gray-200: #dfdfdf; -$gray-300: #ccc; -$gray-400: #bababa; -$gray-500: #a7a7a7; -$gray-600: #919191; -$gray-700: #707070; -$gray-800: #4f4f4f; -$gray-900: #2e2e2e; -$gray-950: #1f1f1f; +// Color schema +$darken-normal-factor: 7% !default; +$darken-dark-factor: 10% !default; +$darken-border-factor: 5% !default; +$darken-border-dashed-factor: 25% !default; + +$white: #fff !default; +$white-normal: #f0f0f0 !default; +$white-dark: #eaeaea !default; +$white-transparent: rgba(255, 255, 255, 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; + +$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; + +$gl-gray-100: #ddd !default; +$gl-gray-200: #ccc !default; +$gl-gray-350: #aaa !default; +$gl-gray-400: #999 !default; +$gl-gray-500: #777 !default; +$gl-gray-600: #666 !default; +$gl-gray-700: #555 !default; +$gl-gray-800: #333 !default; + +$green-50: #f1fdf6 !default; +$green-100: #dcf5e7 !default; +$green-200: #263a2e !default; +$green-300: #75d09b !default; +$green-400: #37b96d !default; +$green-500: #1aaa55 !default; +$green-600: #168f48 !default; +$green-700: #12753a !default; +$green-800: #0e5a2d !default; +$green-900: #0a4020 !default; +$green-950: #072b15 !default; + +$blue-50: #f6fafe !default; +$blue-100: #e4f0fb !default; +$blue-200: #b8d6f4 !default; +$blue-300: #73afea !default; +$blue-400: #418cd8 !default; +$blue-500: #1f78d1 !default; +$blue-600: #1b69b6 !default; +$blue-700: #17599c !default; +$blue-800: #134a81 !default; +$blue-900: #0f3b66 !default; +$blue-950: #0a2744 !default; + +$orange-50: #fffaf4 !default; +$orange-100: #fff1de !default; +$orange-200: #fed69f !default; +$orange-300: #fdbc60 !default; +$orange-400: #fca429 !default; +$orange-500: #fc9403 !default; +$orange-600: #de7e00 !default; +$orange-700: #c26700 !default; +$orange-800: #a35200 !default; +$orange-900: #853c00 !default; +$orange-950: #592800 !default; + +$red-50: #fcf1ef !default; +$red-100: #fdd4cd !default; +$red-200: #fcb5aa !default; +$red-300: #f57f6c !default; +$red-400: #ec5941 !default; +$red-500: #dd2b0e !default; +$red-600: #c91c00 !default; +$red-700: #ae1800 !default; +$red-800: #8d1300 !default; +$red-900: #660e00 !default; +$red-950: #4d0a00 !default; + +$gray-10: #fafafa !default; +$gray-50: #f0f0f0 !default; +$gray-100: #dbdbdb !default; +$gray-200: #dfdfdf !default; +$gray-300: #ccc !default; +$gray-400: #bababa !default; +$gray-500: #a7a7a7 !default; +$gray-600: #919191 !default; +$gray-700: #707070 !default; +$gray-800: #4f4f4f !default; +$gray-900: #2e2e2e !default; +$gray-950: #1f1f1f !default; $greens: ( '50': $green-50, @@ -325,8 +323,8 @@ $theme-light-red-500: #c24b38; $theme-light-red-600: #b03927; $theme-light-red-700: #a62e21; -$border-white-light: darken($white, $darken-border-factor); -$border-white-normal: darken($white-normal, $darken-border-factor); +$border-white-light: darken($white, $darken-border-factor) !default; +$border-white-normal: darken($white-normal, $darken-border-factor) !default; $border-gray-light: darken($gray-light, $darken-border-factor); $border-gray-normal: darken($gray-normal, $darken-border-factor); @@ -335,7 +333,7 @@ $border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor); /* * UI elements */ -$border-color: #e5e5e5; +$border-color: $gray-200; $shadow-color: $t-gray-a-08; $well-expand-item: #e8f2f7; $well-inner-border: #eef0f2; @@ -356,7 +354,7 @@ $gl-text-color-secondary: $gray-700; $gl-text-color-tertiary: $gray-600; $gl-text-color-quaternary: #d6d6d6; $gl-text-color-inverted: $white; -$gl-text-color-secondary-inverted: rgba(255, 255, 255, 0.85); +$gl-text-color-secondary-inverted: rgba($white, 0.85); $gl-text-color-disabled: $gray-600; $gl-grayish-blue: #7f8fa4; $gl-gray-dark: #313236; @@ -435,7 +433,6 @@ $layout-link-gray: #7e7c7c; $btn-side-margin: 10px; $btn-sm-side-margin: 7px; $btn-margin-5: 5px; -$sidebar-block-hover-color: #ebebeb; $count-arrow-border: #dce0e5; $general-hover-transition-duration: 100ms; $general-hover-transition-curve: linear; @@ -491,8 +488,8 @@ $line-number-select: #fbf2da; $line-target-blue: $blue-50; $line-select-yellow: #fcf8e7; $line-select-yellow-dark: #f0e2bd; -$dark-diff-match-bg: rgba(255, 255, 255, 0.3); -$dark-diff-match-color: rgba(255, 255, 255, 0.1); +$dark-diff-match-bg: rgba($white, 0.3); +$dark-diff-match-color: rgba($white, 0.1); $diff-image-info-color: #808080; $diff-view-modes-color: #808080; $diff-view-modes-border: #c1c1c1; @@ -520,7 +517,7 @@ $dropdown-shadow-color: rgba(#000, 0.1); $dropdown-title-btn-color: #bfbfbf; $dropdown-input-fa-color: #c7c7c7; $dropdown-input-focus-shadow: rgba($blue-300, 0.4); -$dropdown-loading-bg: rgba(#fff, 0.6); +$dropdown-loading-bg: rgba($white, 0.6); $dropdown-chevron-size: 10px; $dropdown-toggle-active-border-color: darken($border-color, 14%); $dropdown-fade-mask-height: 32px; @@ -534,9 +531,9 @@ $filtered-search-term-shadow-color: rgba(0, 0, 0, 0.09); /* * Contextual Sidebar */ -$link-active-background: rgba(0, 0, 0, 0.04); -$link-hover-background: rgba(0, 0, 0, 0.06); -$inactive-badge-background: rgba(0, 0, 0, 0.08); +$link-active-background: rgba($black, 0.04); +$link-hover-background: rgba($gray-900, 0.06); +$inactive-badge-background: rgba($black, 0.08); $sidebar-toggle-height: 60px; $sidebar-toggle-width: 40px; $sidebar-milestone-toggle-bottom-margin: 10px; @@ -544,8 +541,8 @@ $sidebar-milestone-toggle-bottom-margin: 10px; /* * Buttons */ -$btn-active-gray: #ececec; -$btn-active-gray-light: #e4e7ed; +$btn-active-gray: $gray-50; +$btn-active-gray-light: $gray-50; $btn-white-active: #848484; $gl-btn-padding: 10px; $gl-btn-line-height: 16px; @@ -602,12 +599,12 @@ $note-icon-gutter-width: 55px; /* * Identicon */ -$identicon-red: #ffebee; -$identicon-purple: #f3e5f5; -$identicon-indigo: #e8eaf6; -$identicon-blue: #e3f2fd; -$identicon-teal: #e0f2f1; -$identicon-orange: #fbe9e7; +$identicon-red: #ffebee !default; +$identicon-purple: #f3e5f5 !default; +$identicon-indigo: #e8eaf6 !default; +$identicon-blue: #e3f2fd !default; +$identicon-teal: #e0f2f1 !default; +$identicon-orange: #fbe9e7 !default; /* * Calendar @@ -719,8 +716,8 @@ $accepting-mr-label-color: #69d100; /* * Issues */ -$issues-today-bg: #f3fff2; -$issues-today-border: #e1e8d5; +$issues-today-bg: #f3fff2 !default; +$issues-today-border: #e1e8d5 !default; $compare-display-color: #888; /* @@ -871,6 +868,7 @@ $priority-label-empty-state-width: 114px; Popovers */ $popover-max-width: 384px; +$popover-box-shadow: 0 2px 3px 1px $gray-200; /* Issues Analytics diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss index ef75dabbda4..c7a50bdb5a3 100644 --- a/app/assets/stylesheets/framework/variables_overrides.scss +++ b/app/assets/stylesheets/framework/variables_overrides.scss @@ -55,3 +55,26 @@ $tooltip-padding-y: 0.5rem; $tooltip-padding-x: 0.75rem; $tooltip-arrow-height: 0.5rem; $tooltip-arrow-width: 1rem; +$b-table-sort-icon-bg-descending: url('data:image/svg+xml, <svg \ + xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16"> \ + <path style="fill: #666;" fill-rule="evenodd" d="M11.707085,11.7071 \ + L7.999975,15.4142 L4.292875,11.7071 C3.902375,11.3166 3.902375, \ + 10.6834 4.292875,10.2929 C4.683375,9.90237 \ + 5.316575,9.90237 5.707075,10.2929 L6.999975, \ + 11.5858 L6.999975,2 C6.999975,1.44771 \ + 7.447695,1 7.999975,1 C8.552255,1 8.999975,1.44771 \ + 8.999975,2 L8.999975,11.5858 L10.292865,10.2929 C10.683395 \ + ,9.90237 11.316555,9.90237 11.707085,10.2929 \ + C12.097605,10.6834 12.097605,11.3166 11.707085,11.7071 Z"/> \ + </svg>') !default; +$b-table-sort-icon-bg-ascending: url('data:image/svg+xml,<svg \ + xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16"> \ + <path style="fill: #666;" fill-rule="evenodd" d="M4.29289,4.2971 L8,0.59 \ + L11.7071,4.2971 C12.0976,4.6876 \ + 12.0976,5.3208 11.7071,5.7113 C11.3166,6.10183 10.6834, \ + 6.10183 10.2929,5.7113 L9,4.4184 L9,14.0042 C9,14.55649 \ + 8.55228,15.0042 8,15.0042 C7.44772,15.0042 7,14.55649 \ + 7,14.0042 L7,4.4184 L5.70711,5.7113 C5.31658,6.10183 4.68342,6.10183 4.29289,5.7113 \ + C3.90237,5.3208 3.90237,4.6876 4.29289,4.2971 Z"/> \ + </svg> ') !default; +$b-table-sort-icon-bg-not-sorted: ''; diff --git a/app/assets/stylesheets/notify.scss b/app/assets/stylesheets/notify.scss index 2bf823993d7..6320c10fb51 100644 --- a/app/assets/stylesheets/notify.scss +++ b/app/assets/stylesheets/notify.scss @@ -36,5 +36,5 @@ pre.commit-message { } .gl-label-text-dark { - color: $gl-gray-800; + color: $gl-text-color; } diff --git a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss index 5675835a622..0b847902525 100644 --- a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss +++ b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss @@ -27,8 +27,7 @@ z-index: 2; } - .is-readonly, - .editor.original { + .is-readonly .editor.original { .view-lines { cursor: default; } diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss index e4c01c2bd6c..2b82b2226c6 100644 --- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss +++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss @@ -1,9 +1,15 @@ // ------- // Please see `app/assets/stylesheets/page_bundles/ide_themes/README.md` for a guide on contributing new themes // ------- -.ide.theme-dark { - a:not(.btn) { - color: var(--ide-link-color); +.ide { + $bs-input-focus-border: #80bdff; + $bs-input-focus-box-shadow: rgba(0, 123, 255, 0.25); + + a:not(.btn), + .btn-link:hover, + .btn-link:focus, + .btn-link:active { + color: var(--ide-link-color, $blue-600); } h1, @@ -19,156 +25,207 @@ .context-header > a, input, textarea, - .md-area.is-focused, .dropdown-menu li button, .dropdown-menu-selectable li a.is-active, .dropdown-menu-inner-title, - .dropdown-menu-inner-content, - .nav-links:not(.quick-links) li:not(.md-header-toolbar) a, - .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover, - .nav-links:not(.quick-links) li:not(.md-header-toolbar) a.active .badge.badge-pill, - .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover .badge.badge-pill, - .badge.badge-pill, .bs-callout, .ide-pipeline .top-bar, - .ide-pipeline .top-bar .controllers .controllers-buttons { - color: var(--ide-text-color); + .ide-pipeline .top-bar .controllers .controllers-buttons, + .controllers-buttons svg, + .nav-links li a.active, + .md-area.is-focused { + color: var(--ide-text-color, $gl-text-color); } - .drag-handle:hover, - .card-header .badge.badge-pill { - background-color: var(--ide-dropdown-hover-background); + .badge.badge-pill { + color: var(--ide-text-color, $gray-800); + background-color: var(--ide-background, $badge-bg); } + .nav-links:not(.quick-links) li:not(.md-header-toolbar) a, + .dropdown-menu-inner-content, .file-row .file-row-icon svg, - .file-row:hover .file-row-icon svg, - .controllers-buttons svg { - color: var(--ide-text-color-secondary); + .file-row:hover .file-row-icon svg { + color: var(--ide-text-color-secondary, $gl-text-color-secondary); + } + + .nav-links:not(.quick-links) li:not(.md-header-toolbar) { + &:hover a, + &.active a, + a:hover, + a.active { + &, + .badge.badge-pill { + color: var(--ide-text-color, $black); + border-color: var(--ide-input-border, $gray-darkest); + } + } + } + + .drag-handle:hover { + background-color: var(--ide-dropdown-hover-background, $white-normal); + } + + .card-header { + background-color: var(--ide-background, $white); + + .badge.badge-pill { + background-color: var(--ide-dropdown-hover-background, $badge-bg); + } } .text-secondary { - color: var(--ide-text-color-secondary) !important; + color: var(--ide-text-color-secondary, $gl-text-color-secondary) !important; } input[type='search']::placeholder, input[type='text']::placeholder, - textarea::placeholder, + textarea::placeholder { + color: var(--ide-input-border, $gl-text-color-tertiary); + } + .dropdown-input .fa { - color: var(--ide-input-border); + color: var(--ide-input-border, $dropdown-input-fa-color); } .ide-nav-form .input-icon { - color: var(--ide-input-border); + color: var(--ide-input-border, $dropdown-input-fa-color); + } + + code { + background-color: var(--ide-background, $gray-100); } - code, - .badge.badge-pill, - .card-header, .bs-callout, .ide-pipeline .top-bar, .ide-terminal .top-bar { - background-color: var(--ide-background); + background-color: var(--ide-background, $gray-light); } .bs-callout { - border-color: var(--ide-dropdown-background); + border-color: var(--ide-dropdown-background, $border-color); code { - background-color: var(--ide-dropdown-background); + background-color: var(--ide-dropdown-background, $gray-100); } } - .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover { - border-color: var(--ide-dropdown-hover-background); + .common-note-form .md-area { + border-color: var(--ide-input-border, $border-color); } - .common-note-form .md-area { - border-color: var(--ide-input-border); + .md table:not(.code) tr th { + background-color: var(--ide-highlight-background, $gray-100); } &, - .md table:not(.code) tr th, - .common-note-form .md-area, - .card { - background-color: var(--ide-highlight-background); + .card, + .common-note-form .md-area { + background-color: var(--ide-highlight-background, $white); } .card, .card-header, .ide-terminal .top-bar, .ide-pipeline .top-bar { - border-color: var(--ide-border-color); + border-color: var(--ide-border-color, $border-color); + } + + hr { + border-color: var(--ide-border-color, darken($gray-normal, 8%)); } - hr, .md h1, .md h2, .md blockquote, - pre, .md table:not(.code) tbody td, .md table:not(.code) tr th, - .nav-links:not(.quick-links) { - border-color: var(--ide-border-color-alt); + .nav-links:not(.quick-links), + .common-note-form .md-area.is-focused .nav-links { + border-color: var(--ide-border-color-alt, $white-dark); } - .ide-sidebar-link.active { - color: var(--ide-highlight-accent); - box-shadow: inset 3px 0 var(--ide-highlight-accent); + pre { + border-color: var(--ide-border-color-alt, $gray-200); - &.is-right { - box-shadow: inset -3px 0 var(--ide-highlight-accent); + code { + background-color: var(--ide-border-color, inherit); } } - .nav-links li.active a, - .nav-links li a.active { - border-color: var(--ide-highlight-accent); - color: var(--ide-text-color); - } + // highlight accents (based on navigation theme) should only apply + // in the default white theme and "none" theme. + &:not(.theme-white):not(.theme-none) { + .ide-sidebar-link.active { + color: var(--ide-highlight-accent, $gl-text-color); + box-shadow: inset 3px 0 var(--ide-highlight-accent, $gl-text-color); + + &.is-right { + box-shadow: inset -3px 0 var(--ide-highlight-accent, $gl-text-color); + } + } + + .nav-links li.active a, + .nav-links li a.active { + border-color: var(--ide-highlight-accent, $gl-text-color); + } - .avatar-container { - &, - .avatar { - color: var(--ide-text-color); - background-color: var(--ide-highlight-background); - border-color: var(--ide-highlight-background); + .dropdown-menu .nav-links li a.active { + border-color: var(--ide-highlight-accent, $gl-text-color); + } + + // for other themes, suppress different avatar default colors for simplicity + .avatar-container { + &, + .avatar { + color: var(--ide-text-color, $gl-text-color); + background-color: var(--ide-highlight-background, $white); + border-color: var(--ide-highlight-background, rgba($black, $gl-avatar-border-opacity)); + } } } input[type='text'], input[type='search'], .filtered-search-box { - border-color: var(--ide-input-border); - background: var(--ide-input-background) !important; + border-color: var(--ide-input-border, $border-color); + background: var(--ide-input-background, $white) !important; + } + + input[type='text']:not([disabled]):not([readonly]):focus, + .md-area.is-focused { + border-color: var(--ide-input-border, $bs-input-focus-border); + box-shadow: 0 0 0 3px var(--ide-dropdown-background, $bs-input-focus-box-shadow); } input[type='text'], input[type='search'], .filtered-search-box, textarea { - color: var(--ide-input-color) !important; + color: var(--ide-input-color, $gl-text-color) !important; } .filtered-search-box input[type='search'] { - border-color: transparent; + border-color: transparent !important; + box-shadow: none !important; } .filtered-search-token .value-container, .filtered-search-term .value-container { - background-color: var(--ide-dropdown-hover-background); - color: var(--ide-text-color); + background-color: var(--ide-dropdown-hover-background, $white-normal); + color: var(--ide-text-color, $gl-text-color); &:hover { - background-color: var(--ide-input-border); + background-color: var(--ide-input-border, $gray-200); } } @function calc-btn-hover-padding($original-padding, $original-border: 1px) { - @return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width)); + @return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width, #{$original-border})); } .btn:not(.btn-link):not([disabled]):hover { - border-width: var(--ide-btn-hover-border-width); + border-width: var(--ide-btn-hover-border-width, 1px); padding: calc-btn-hover-padding(6px) calc-btn-hover-padding(10px); } @@ -180,53 +237,71 @@ padding: calc-btn-hover-padding(6px) 0; } - .btn-inverted, .btn-default, .dropdown, .dropdown-menu-toggle { - background-color: var(--ide-input-background) !important; - color: var(--ide-input-color) !important; - border-color: var(--ide-btn-default-border); + background-color: var(--ide-input-background, $white) !important; + color: var(--ide-input-color, $gl-text-color) !important; + border-color: var(--ide-btn-default-border, $border-color); } - .btn-inverted, - .btn-default { + .dropdown-menu-toggle { + border-color: var(--ide-btn-default-border, $gray-darkest); + &:hover, &:focus { - border-color: var(--ide-btn-default-hover-border) !important; + background-color: var(--ide-dropdown-btn-hover-background, $gray-darker) !important; + border-color: var(--ide-dropdown-btn-hover-border, $gray-darkest) !important; } } - .dropdown, - .dropdown-menu-toggle { + // In IDE, the only inverted buttons are `.btn-remove` + .btn-inverted.btn-remove { + color: var(--ide-input-color, $red-500) !important; + background-color: var(--ide-input-background, $white) !important; + border-color: var(--ide-btn-default-border, $red-500); + &:hover, &:focus { - background-color: var(--ide-dropdown-btn-hover-background) !important; - border-color: var(--ide-dropdown-btn-hover-border) !important; + color: var(--ide-input-color, $red-700) !important; + background-color: var(--ide-input-background, $red-100) !important; + border-color: var(--ide-btn-default-hover-border, $red-500) !important; } - } - .dropdown-menu { - color: var(--ide-text-color); - border-color: var(--ide-background); - background-color: var(--ide-dropdown-background); + &:active { + color: var(--ide-input-color, $red-800) !important; + background-color: var(--ide-input-background, $red-200) !important; + border-color: var(--ide-btn-default-hover-border, $red-600) !important; + } + } - .divider, - .nav-links:not(.quick-links) { - background-color: var(--ide-dropdown-hover-background); - border-color: var(--ide-dropdown-hover-background); + .btn-default { + &:hover, + &:focus { + border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important; + background-color: var(--ide-input-background, $white-normal) !important; } - .nav-links li a.active { - border-color: var(--ide-highlight-accent); + &:active, + .active { + border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important; + background-color: var(--ide-input-background, $white-dark) !important; } + } - .nav-links:not(.quick-links) li:not(.md-header-toolbar) a { - color: var(--ide-text-color); + .dropdown-menu { + color: var(--ide-text-color, $gl-text-color); + border-color: var(--ide-background, $border-color); + background-color: var(--ide-dropdown-background, $white); - &.active { - color: var(--ide-text-color); - } + .nav-links:not(.quick-links) { + background-color: var(--ide-dropdown-hover-background, $white); + border-color: var(--ide-dropdown-hover-background, $border-color); + } + + .divider { + background-color: var(--ide-dropdown-hover-background, $gray-200); + border-color: var(--ide-dropdown-hover-background, $gray-200); } li > a:not(.disable-hover):hover, @@ -234,75 +309,88 @@ li button:not(.disable-hover):hover, li button:not(.disable-hover):focus, li button.is-focused { - background-color: var(--ide-dropdown-hover-background); - color: var(--ide-text-color); + background-color: var(--ide-dropdown-hover-background, $gray-darker); + color: var(--ide-text-color, $gl-text-color); } } .dropdown-title, .dropdown-input { - border-color: var(--ide-dropdown-hover-background) !important; + border-color: var(--ide-dropdown-hover-background, $gray-200) !important; } .btn-primary, .btn-info { - background-color: var(--ide-btn-primary-background); - border-color: var(--ide-btn-primary-border) !important; + background-color: var(--ide-btn-primary-background, $blue-500); + border-color: var(--ide-btn-primary-border, $blue-600) !important; &:hover, &:focus { - border-color: var(--ide-btn-primary-hover-border) !important; + background-color: var(--ide-btn-primary-background, $blue-600); + border-color: var(--ide-btn-primary-hover-border, $blue-700) !important; + } + + &:active, + &.active { + background-color: var(--ide-btn-primary-background, $blue-700); + border-color: var(--ide-btn-primary-hover-border, $blue-800) !important; } } .btn-success { - background-color: var(--ide-btn-success-background); - border-color: var(--ide-btn-success-border) !important; + background-color: var(--ide-btn-success-background, $green-500); + border-color: var(--ide-btn-success-border, $green-600) !important; &:hover, &:focus { - border-color: var(--ide-btn-success-hover-border) !important; + background-color: var(--ide-btn-success-background, $green-600); + border-color: var(--ide-btn-success-hover-border, $green-700) !important; + } + + &:active, + &.active { + background-color: var(--ide-btn-success-background, $green-700); + border-color: var(--ide-btn-success-hover-border, $green-800) !important; } } .btn[disabled] { - background: var(--ide-btn-default-background) !important; - border: 1px solid var(--ide-btn-disabled-border) !important; - color: var(--ide-btn-disabled-color) !important; + background-color: var(--ide-btn-default-background, $gray-light) !important; + border: 1px solid var(--ide-btn-disabled-border, $gray-200) !important; + color: var(--ide-btn-disabled-color, $gl-text-color-disabled) !important; } - pre code, .md table:not(.code) tbody { - background-color: var(--ide-border-color); + background-color: var(--ide-border-color, $white); } .animation-container { [class^='skeleton-line-'] { - background-color: var(--ide-animation-gradient-1); + background-color: var(--ide-animation-gradient-1, $gray-100); &::after { background-image: linear-gradient(to right, - var(--ide-animation-gradient-1) 0%, - var(--ide-animation-gradient-2) 20%, - var(--ide-animation-gradient-1) 40%, - var(--ide-animation-gradient-1) 100%); + var(--ide-animation-gradient-1, $gray-100) 0%, + var(--ide-animation-gradient-2, $gray-10) 20%, + var(--ide-animation-gradient-1, $gray-100) 40%, + var(--ide-animation-gradient-1, $gray-100) 100%); } } } .idiff.addition { - background-color: var(--ide-diff-insert); + background-color: var(--ide-diff-insert, $line-added-dark); } .idiff.deletion { - background-color: var(--ide-diff-remove); + background-color: var(--ide-diff-remove, $line-removed-dark); } -} -.navbar.theme-dark { - border-bottom-color: transparent; + ~ .popover { + box-shadow: none; + } } -.theme-dark ~ .popover { - box-shadow: none; +.navbar:not(.theme-white):not(.theme-none) { + border-bottom-color: transparent; } diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index 61914740ac0..9c92f891834 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -5,6 +5,7 @@ @import './ide_theme_overrides'; @import './ide_themes/dark'; +@import './ide_themes/solarized-dark'; $search-list-icon-width: 18px; $ide-activity-bar-width: 60px; @@ -24,6 +25,13 @@ $ide-commit-header-height: 48px; @include str-truncated(250px); } +.ide-layout { + // Fix for iOS 13+, the height of the page is actually less than + // 100vh because of the presence of the bottom bar + max-height: 100%; + position: fixed; +} + .ide-view { position: relative; margin-top: 0; @@ -65,6 +73,7 @@ $ide-commit-header-height: 48px; flex-direction: column; flex: 1; border-left: 1px solid var(--ide-border-color, $white-dark); + border-right: 1px solid var(--ide-border-color, $white-dark); overflow: hidden; } @@ -88,7 +97,7 @@ $ide-commit-header-height: 48px; &.active { background-color: var(--ide-highlight-background, $white); - border-bottom-color: var(--ide-border-color, $white); + border-bottom-color: transparent; } &:not(.disabled) { @@ -281,7 +290,6 @@ $ide-commit-header-height: 48px; .multi-file-commit-panel { display: flex; position: relative; - width: 340px; padding: 0; background-color: var(--ide-background, $gray-light); @@ -386,7 +394,7 @@ $ide-commit-header-height: 48px; &:hover, &:focus { - background: var(--ide-background, $gray-100); + background: var(--ide-background, $gray-50); outline: 0; } @@ -558,7 +566,7 @@ $ide-commit-header-height: 48px; &:hover { color: var(--ide-text-color, $gl-text-color); - background-color: var(--ide-background-hover, $gray-100); + background-color: var(--ide-background-hover, $gray-50); } &:focus { @@ -584,14 +592,15 @@ $ide-commit-header-height: 48px; background: var(--ide-highlight-background, $white); } - &.is-right { - padding-right: $gl-padding; - padding-left: $gl-padding + 1px; + } - &::after { - right: auto; - left: -1px; - } + &.is-right { + padding-right: $gl-padding; + padding-left: $gl-padding + 1px; + + &::after { + right: auto; + left: -1px; } } } @@ -872,26 +881,21 @@ $ide-commit-header-height: 48px; } .ide-sidebar { - width: auto; min-width: 60px; } .ide-right-sidebar { - .ide-activity-bar { - border-left: 1px solid var(--ide-border-color, $white-dark); - } - .multi-file-commit-panel-inner { - width: 350px; padding: $grid-size 0; background-color: var(--ide-highlight-background, $white); - border-left: 1px solid var(--ide-border-color, $white-dark); + border-right: 1px solid var(--ide-border-color, $white-dark); } .ide-right-sidebar-jobs-detail { padding-bottom: 0; } + .ide-right-sidebar-terminal, .ide-right-sidebar-clientside { padding: 0; } @@ -901,7 +905,7 @@ $ide-commit-header-height: 48px; @include ide-trace-view(); svg { - --svg-status-bg: var(--ide-background, $white); + --svg-status-bg: var(--ide-background, #{$white}); } .empty-state { @@ -1043,7 +1047,7 @@ $ide-commit-header-height: 48px; .ide-entry-dropdown-toggle { padding: $gl-padding-4; color: var(--ide-text-color, $gl-text-color); - background-color: var(--ide-background, $gray-100); + background-color: var(--ide-background, $gray-50); &:hover { background-color: var(--ide-file-row-btn-hover-background, $gray-200); @@ -1144,12 +1148,12 @@ $ide-commit-header-height: 48px; } .file-row.is-active { - background: var(--ide-background, $gray-100); + background: var(--ide-background, $gray-50); } .file-row:hover, .file-row:focus { - background: var(--ide-background, $gray-100); + background: var(--ide-background, $gray-50); .ide-new-btn { display: block; @@ -1159,3 +1163,22 @@ $ide-commit-header-height: 48px; fill: var(--ide-text-color-secondary, $gl-text-color-secondary); } } + +.ide-terminal { + @include ide-trace-view(); + + .terminal-wrapper { + background: $black; + color: $gray-darkest; + overflow: hidden; + } + + .xterm { + height: 100%; + padding: $grid-size; + } + + .xterm-viewport { + overflow-y: auto; + } +} diff --git a/app/assets/stylesheets/page_bundles/ide_themes/README.md b/app/assets/stylesheets/page_bundles/ide_themes/README.md index 535179cc4c2..82e89aef49b 100644 --- a/app/assets/stylesheets/page_bundles/ide_themes/README.md +++ b/app/assets/stylesheets/page_bundles/ide_themes/README.md @@ -32,19 +32,7 @@ To add a new theme, follow the following steps: 3. Copy over all the CSS variables from `_dark.scss` to `_solarized_dark.scss` and assign them your own values. Put them under the selector `.ide.theme-solarized-dark`. 4. Import this newly created SCSS file in `ide.scss` file in the parent directory. -5. To make sure the variables apply to to your theme, add the selector `.ide.theme-solarized-dark` to the top - of `_ide_theme_overrides.scss` file. The file should now look like this: - - ```scss - .ide.theme-dark, - .ide.theme-solarized-dark { - /* file contents */ - } - ``` - - This step is temporary until all CSS variables in that file have their - default values assigned. -6. That's it! Raise a merge request with your newly added theme. +5. That's it! Raise a merge request with your newly added theme. ## Modifying Monaco Themes diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss new file mode 100644 index 00000000000..a58a0ed9475 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss @@ -0,0 +1,50 @@ +// ------- +// Please see `app/assets/stylesheets/page_bundles/ide_themes/README.md` for a guide on contributing new themes +// ------- +.ide.theme-solarized-dark { + --ide-border-color: #002c38; + --ide-border-color-alt: var(--ide-background); + --ide-highlight-accent: #fff; + --ide-text-color: #ddd; + --ide-text-color-secondary: #ddd; + --ide-background: #004152; + --ide-background-hover: #003b4d; + --ide-highlight-background: #003240; + --ide-link-color: #73b9ff; + --ide-footer-background: var(--ide-highlight-background); + + --ide-input-border: #d8d8d8; + --ide-input-background: transparent; + --ide-input-color: #fff; + + --ide-btn-default-background: transparent; + --ide-btn-default-border: var(--ide-input-border); + --ide-btn-default-hover-border: #d8d8d8; + + --ide-btn-primary-background: #1068bf; + --ide-btn-primary-border: #428fdc; + --ide-btn-primary-hover-border: #63a6e9; + + --ide-btn-success-background: #217645; + --ide-btn-success-border: #108548; + --ide-btn-success-hover-border: #2da160; + + --ide-btn-disabled-border: rgba(223, 223, 223, 0.24); + --ide-btn-disabled-color: rgba(145, 145, 145, 0.48); + + --ide-btn-hover-border-width: 2px; + + --ide-dropdown-background: #004c61; + --ide-dropdown-hover-background: #00617a; + + --ide-dropdown-btn-hover-border: #e9ecef; + --ide-dropdown-btn-hover-background: var(--ide-background-hover); + + --ide-file-row-btn-hover-background: #005a73; + + --ide-diff-insert: rgba(155, 185, 85, 0.2); + --ide-diff-remove: rgba(255, 0, 0, 0.2); + + --ide-animation-gradient-1: var(--ide-file-row-btn-hover-background); + --ide-animation-gradient-2: var(--ide-dropdown-hover-background); + } diff --git a/app/assets/stylesheets/pages/alert_management/details.scss b/app/assets/stylesheets/pages/alert_management/details.scss index 89219e41644..591a26e5941 100644 --- a/app/assets/stylesheets/pages/alert_management/details.scss +++ b/app/assets/stylesheets/pages/alert_management/details.scss @@ -35,8 +35,39 @@ } @include media-breakpoint-down(xs) { - .alert-details-create-issue-button { + .alert-details-issue-button { width: 100%; } } + + .toggle-sidebar-mobile-button { + right: 0; + } + + .dropdown-menu-toggle { + &:hover { + background-color: $white; + } + } + + .assignee-dropdown-item { + .dropdown-item { + display: flex; + align-items: center; + + &::before { + top: 50% !important; + } + + &.is-active { + &:last-child { + border-bottom: 1px solid $gray-200; + } + } + } + } + + .note-header-info { + margin-top: 1px; + } } diff --git a/app/assets/stylesheets/pages/alert_management/list.scss b/app/assets/stylesheets/pages/alert_management/list.scss index dc181342def..c1ea9b7604a 100644 --- a/app/assets/stylesheets/pages/alert_management/list.scss +++ b/app/assets/stylesheets/pages/alert_management/list.scss @@ -1,22 +1,4 @@ .alert-management-list { - // consider adding these stateful variants to @gitlab-ui - // https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1178 - .hover-bg-blue-50:hover { - background-color: $blue-50; - } - - .hover-gl-cursor-pointer:hover { - cursor: pointer; - } - - .hover-gl-border-b-solid:hover { - @include gl-border-b-solid; - } - - .hover-gl-border-blue-200:hover { - border-color: $blue-200; - } - // these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui table { color: $gray-700; @@ -26,25 +8,52 @@ outline: none; } + > :not([aria-sort='none']).b-table-sort-icon-left:hover::before { + content: '' !important; + } + td, th { - @include gl-p-5; - border: 0; // Remove cell border styling so that we can set border styling per row - - &.event-count { - @include gl-pr-9; - } + // TODO: There is no gl-pl-9 utlity for this padding, to be done and then removed. + padding-left: 1.25rem; + @include gl-py-5; + @include gl-outline-none; + @include gl-relative; } th { background-color: transparent; font-weight: $gl-font-weight-bold; color: $gl-gray-600; + + &:hover::before { + left: 3%; + top: 34%; + @include gl-absolute; + content: url("data:image/svg+xml,%3Csvg \ + xmlns='http://www.w3.org/2000/svg' \ + width='14' height='14' viewBox='0 0 16 \ + 16'%3E%3Cpath fill='%23BABABA' fill-rule='evenodd' \ + d='M11.707085,11.7071 L7.999975,15.4142 L4.292875,11.7071 \ + C3.902375,11.3166 3.902375,10.6834 \ + 4.292875,10.2929 C4.683375,9.90237 \ + 5.316575,9.90237 5.707075,10.2929 \ + L6.999975,11.5858 L6.999975,2 C6.999975,1.44771 \ + 7.447695,1 7.999975,1 C8.552255,1 8.999975,1.44771 \ + 8.999975,2 L8.999975,11.5858 L10.292865,10.2929 \ + C10.683395,9.90237 11.316555,9.90237 11.707085,10.2929 \ + C12.097605,10.6834 12.097605,11.3166 11.707085,11.7071 \ + Z'/%3E%3C/svg%3E%0A"); + } } + } - &:last-child { - td { - @include gl-border-0; + @include media-breakpoint-up(md) { + tr { + &:last-child { + td { + @include gl-border-0; + } } } } @@ -52,21 +61,31 @@ @include media-breakpoint-down(sm) { .alert-management-table { - .table-col { - min-height: 68px; + tr { + border-top: 0; - &:last-child { - background-color: $gray-10; + .table-col { + min-height: 68px; - &::before { - content: none !important; - } + &:last-child { + background-color: $gray-10; + + &::before { + content: none !important; + } - div { - width: 100% !important; - padding: 0 !important; + div { + width: 100% !important; + padding: 0 !important; + } } } + + &:hover { + background-color: $white; + border-color: $white; + border-bottom-style: none; + } } } } diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index d755170fe1f..3e680c59910 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -84,17 +84,22 @@ .board-title-caret { cursor: pointer; border-radius: $border-radius-default; - padding: 4px; + line-height: $gl-spacing-scale-5; + height: $gl-spacing-scale-5; + + &.btn svg { + top: 0; + } &:hover { - background-color: $gray-dark; + background-color: $gray-50; transition: background-color 0.1s linear; } } &:not(.is-collapsed) { .board-title-caret { - margin: 0 $gl-padding-4 0 -10px; + margin-right: $gl-padding-4; } } @@ -155,7 +160,7 @@ .board-inner { font-size: $issue-boards-font-size; background: $gray-light; - border: 1px solid $border-color; + border: 1px solid $gray-100; } .board-header { @@ -186,8 +191,8 @@ .board-title { align-items: center; font-size: 1em; - border-bottom: 1px solid $border-color; - padding: $gl-padding-8 $gl-padding; + border-bottom: 1px solid $gray-100; + padding: $gl-padding-8; .js-max-issue-size::before { content: '/'; @@ -199,13 +204,13 @@ } .board-delete { - margin-right: 10px; color: $gray-darkest; background-color: transparent; outline: 0; &:hover { color: $blue-600; + box-shadow: none; } } @@ -246,7 +251,7 @@ .board-card { background: $white; - border: 1px solid $gray-200; + border: 1px solid $gray-100; box-shadow: 0 1px 2px $issue-boards-card-shadow; line-height: $gl-padding; list-style: none; @@ -541,7 +546,8 @@ cursor: help; } -.board-labels-toggle-wrapper { +.board-labels-toggle-wrapper, +.board-swimlanes-toggle-wrapper { /** * Make the wrapper the same height as a button so it aligns properly when the * filtered-search-box input element increases in size on Linux smaller breakpoints @@ -572,3 +578,8 @@ top: 0; } } + +.board-epics-swimlanes { + overflow-x: auto; + min-height: 600px; +} diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index ddd1a373e2a..98d74a9aaa2 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -446,7 +446,7 @@ table.code { vertical-align: top; span { - white-space: pre-wrap; + white-space: break-spaces; &.context-cell { display: inline-block; diff --git a/app/assets/stylesheets/pages/experience_level.scss b/app/assets/stylesheets/pages/experience_level.scss new file mode 100644 index 00000000000..e57ad6321a5 --- /dev/null +++ b/app/assets/stylesheets/pages/experience_level.scss @@ -0,0 +1,29 @@ +.signup-page[data-page^='registrations:experience_levels'] { + $card-shadow-color: rgba($black, 0.2); + + .page-wrap { + background-color: $white; + } + + .card-deck { + max-width: 828px; + } + + .card { + transition: box-shadow 0.3s ease-in-out; + } + + .card:hover { + box-shadow: 0 $gl-spacing-scale-3 $gl-spacing-scale-5 $card-shadow-color; + } + + @media (min-width: $breakpoint-sm) { + .card-deck .card { + margin: 0 $gl-spacing-scale-3; + } + } + + .stretched-link:hover { + text-decoration: none; + } +} diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index beb0ea27de0..c309c8d157a 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -14,17 +14,12 @@ flex-direction: column; margin: 0; - .group-row-contents .controls > .btn:last-child { - margin: 0; - } - li { .title { font-weight: 600; } a { - color: $gray-900; text-decoration: none; &:hover { @@ -42,8 +37,6 @@ } .group-row { - @include basic-list-stats; - .description p { margin-bottom: 0; color: $gl-text-color-secondary; @@ -56,6 +49,12 @@ } } +.save-group-loader { + margin-top: $gl-padding-50; + margin-bottom: $gl-padding-50; + color: $gl-gray-700; +} + .group-nav-container .nav-controls { .group-filter-form { flex: 1 1 auto; @@ -454,29 +453,10 @@ table.pipeline-project-metrics tr td { min-width: 30px; } - > span:last-child { - margin-right: 0; - } - .stat-value { margin: 2px 0 0 5px; } } - - .controls { - flex-basis: 90px; - - > .btn { - margin: 0 $btn-side-margin 0 0; - color: $gl-text-color-secondary; - } - } - - .metadata { - @include media-breakpoint-up(md) { - flex-basis: 240px; - } - } } .project-row-contents .stats { diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index b241d0a2bdc..b1e849143b0 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -396,7 +396,7 @@ overflow: hidden; &:hover { - background-color: $sidebar-block-hover-color; + background-color: $gray-200; } &.issuable-sidebar-header { @@ -754,7 +754,8 @@ margin-right: 10px; min-width: 0; - .issue-weight-icon { + .issue-weight-icon, + .issue-estimate-icon { vertical-align: sub; } } diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 0dd25ec5360..0c349ab73a3 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -304,6 +304,72 @@ ul.related-merge-requests > li { } } +.issue-sticky-header { + @include gl-left-0; + @include gl-w-full; + top: $header-height; + + // collapsed right sidebar + @include media-breakpoint-up(sm) { + width: calc(100% - #{$gutter-collapsed-width}); + } + + .issue-sticky-header-text { + max-width: $limited-layout-width; + } +} + +.with-performance-bar .issue-sticky-header { + top: $header-height + $performance-bar-height; +} + +@include media-breakpoint-up(md) { + // collapsed left sidebar + collapsed right sidebar + .issue-sticky-header { + left: $contextual-sidebar-collapsed-width; + width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-collapsed-width}); + } + + // collapsed left sidebar + expanded right sidebar + .right-sidebar-expanded .issue-sticky-header { + width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-width}); + } +} + +@include media-breakpoint-up(xl) { + // expanded left sidebar + collapsed right sidebar + .issue-sticky-header { + left: $contextual-sidebar-width; + width: calc(100% - #{$contextual-sidebar-width} - #{$gutter-collapsed-width}); + } + + // collapsed left sidebar + collapsed right sidebar + .page-with-icon-sidebar .issue-sticky-header { + left: $contextual-sidebar-collapsed-width; + width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-collapsed-width}); + } + + // expanded left sidebar + expanded right sidebar + .right-sidebar-expanded .issue-sticky-header { + width: calc(100% - #{$contextual-sidebar-width} - #{$gutter-width}); + } + + // collapsed left sidebar + expanded right sidebar + .right-sidebar-expanded.page-with-icon-sidebar .issue-sticky-header { + width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-width}); + } +} + +.issuable-header-slide-enter-active, +.issuable-header-slide-leave-active { + @include gl-transition-slow; +} + +.issuable-header-slide-enter, +.issuable-header-slide-leave-to { + transform: translateY(-100%); +} + .issuable-list-root { .gl-label-link { text-decoration: none; diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index 22c1cb127cd..c3bac053a0a 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -86,7 +86,7 @@ justify-content: space-between; padding: $gl-padding; border-radius: $border-radius-default; - border: 1px solid $gray-100; + border: 1px solid $gray-50; &:last-child { margin-bottom: 0; @@ -276,7 +276,7 @@ } .label-badge-gray { - background-color: $gray-100; + background-color: $gray-50; } .label-links { diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index 67a8f689e9d..81a70470c65 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -96,14 +96,21 @@ margin: 0; } - .omniauth-btn { - margin-bottom: $gl-padding; + form { width: 48%; - padding: $gl-padding-8; + padding: 0; + border: 0; + background: none; + margin-bottom: $gl-padding; @include media-breakpoint-down(md) { width: 100%; } + } + + .omniauth-btn { + width: 100%; + padding: $gl-padding-8; img { width: $default-icon-size; diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 57afe45a74b..c3f3dbc223b 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -253,11 +253,11 @@ table { background-color: $gray-light; border-radius: 0 0 3px 3px; padding: $gl-padding; - border-top: 1px solid $gray-100; + border-top: 1px solid $gray-50; + .new-note { background-color: $gray-light; - border-top: 1px solid $gray-100; + border-top: 1px solid $gray-50; } &.is-replying { diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index bed147aa3a7..e8cdfd717c0 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -5,7 +5,7 @@ $note-form-margin-left: 72px; @mixin vertical-line($left) { &::before { content: ''; - border-left: 2px solid $gray-100; + border-left: 2px solid $gray-50; position: absolute; top: 0; bottom: 0; @@ -83,8 +83,8 @@ $note-form-margin-left: 72px; .replies-toggle { background-color: $gray-light; padding: $gl-padding-8 $gl-padding; - border-top: 1px solid $gray-100; - border-bottom: 1px solid $gray-100; + border-top: 1px solid $gray-50; + border-bottom: 1px solid $gray-50; .collapse-replies-btn:hover { color: $blue-600; diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 154717f9776..43d766db9e0 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -669,7 +669,8 @@ .ci-action-icon-container { position: absolute; right: 5px; - top: 5px; + top: 50%; + transform: translateY(-50%); // Action Icons in big pipeline-graph nodes &.ci-action-icon-wrapper { @@ -920,7 +921,7 @@ button.mini-pipeline-graph-dropdown-toggle { .ci-status-icon { - @extend .append-right-8; + @include gl-mr-3; position: relative; diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss index 45e62913f37..3bab84af492 100644 --- a/app/assets/stylesheets/pages/profiles/preferences.scss +++ b/app/assets/stylesheets/pages/profiles/preferences.scss @@ -15,6 +15,10 @@ } .application-theme { + $ui-dark-bg: #2e2e2e; + $ui-light-bg: #dfdfdf; + $ui-dark-mode-bg: #1f1f1f; + label { margin: 0 $gl-padding-32 $gl-padding 0; text-align: center; @@ -60,11 +64,17 @@ } &.ui-dark { - background-color: $gray-900; + background-color: $ui-dark-bg; + border: solid 1px $border-color; } &.ui-light { - background-color: $gray-200; + background-color: $ui-light-bg; + } + + &.gl-dark { + background-color: $ui-dark-mode-bg; + border: solid 1px $border-color; } } diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index c0a1cf10fe4..438f6c2546e 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -396,7 +396,7 @@ margin-right: $gl-padding-4; margin-bottom: $gl-padding-4; color: $gl-text-color-secondary; - background-color: $gray-100; + background-color: $gray-50; line-height: $gl-btn-line-height; &:hover { diff --git a/app/assets/stylesheets/pages/prometheus.scss b/app/assets/stylesheets/pages/prometheus.scss index 0f56b98a78d..26db1fb9f58 100644 --- a/app/assets/stylesheets/pages/prometheus.scss +++ b/app/assets/stylesheets/pages/prometheus.scss @@ -21,6 +21,14 @@ } } } + + .links-section { + .gl-hover-text-blue-600-children:hover { + * { + @include gl-text-blue-600; + } + } + } } .draggable { diff --git a/app/assets/stylesheets/pages/storage_quota.scss b/app/assets/stylesheets/pages/storage_quota.scss new file mode 100644 index 00000000000..347bd1316c0 --- /dev/null +++ b/app/assets/stylesheets/pages/storage_quota.scss @@ -0,0 +1,17 @@ +.storage-type-usage { + &:first-child { + @include gl-rounded-top-left-base; + @include gl-rounded-bottom-left-base; + } + + &:last-child { + @include gl-rounded-top-right-base; + @include gl-rounded-bottom-right-base; + } + + &:not(:last-child) { + @include gl-border-r-2; + @include gl-border-r-solid; + @include gl-border-white; + } +} diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss new file mode 100644 index 00000000000..1f2a7645495 --- /dev/null +++ b/app/assets/stylesheets/themes/_dark.scss @@ -0,0 +1,134 @@ +$gray-10: #1f1f1f; +$gray-50: #2e2e2e; +$gray-100: #4f4f4f; +$gray-200: #707070; +$gray-300: #919191; +$gray-400: #a7a7a7; +$gray-500: #bababa; +$gray-600: #ccc; +$gray-700: #dfdfdf; +$gray-800: #f2f2f2; +$gray-900: #fafafa; +$gray-950: #fff; + +$gl-gray-100: #333; +$gl-gray-200: #555; +$gl-gray-350: #666; +$gl-gray-400: #777; +$gl-gray-500: #999; +$gl-gray-600: #aaa; +$gl-gray-700: #ccc; +$gl-gray-800: #ddd; + +$green-50: #072b15; +$green-100: #0a4020; +$green-200: #0e5a2d; +$green-300: #12753a; +$green-400: #168f48; +$green-500: #1aaa55; +$green-600: #37b96d; +$green-700: #75d09b; +$green-800: #b3e6c8; +$green-900: #dcf5e7; +$green-950: #f1fdf6; + +$blue-50: #0a2744; +$blue-100: #0f3b66; +$blue-200: #134a81; +$blue-300: #17599c; +$blue-400: #1b69b6; +$blue-500: #1f78d1; +$blue-600: #418cd8; +$blue-700: #73afea; +$blue-800: #b8d6f4; +$blue-900: #e4f0fb; +$blue-950: #f6fafe; + +$orange-50: #592800; +$orange-100: #853c00; +$orange-200: #a35200; +$orange-300: #c26700; +$orange-400: #de7e00; +$orange-500: #fc9403; +$orange-600: #fca429; +$orange-700: #fdbc60; +$orange-800: #fed69f; +$orange-900: #fff1de; +$orange-950: #fffaf4; + +$red-50: #4b140b; +$red-100: #711e11; +$red-200: #8b2615; +$red-300: #a62d19; +$red-400: #c0341d; +$red-500: #db3b21; +$red-600: #e05842; +$red-700: #ea8271; +$red-800: #f2b4a9; +$red-900: #fbe5e1; +$red-950: #fef6f5; + +$indigo-50: #1a1a40; +$indigo-100: #292961; +$indigo-200: #393982; +$indigo-300: #4b4ba3; +$indigo-400: #5b5bbd; +$indigo-500: #6666c4; +$indigo-600: #7c7ccc; +$indigo-700: #a6a6de; +$indigo-800: #d1d1f0; +$indigo-900: #ebebfa; +$indigo-950: #f7f7ff; + +$gray-lightest: #222; +$gray-light: $gray-50; +$gray-lighter: #303030; +$gray-normal: #333; +$gray-dark: $gray-100; +$gray-darker: #4f4f4f; +$gray-darkest: #c4c4c4; + +$black: #fff; +$white: #333; +$white-light: #2b2b2b; +$white-normal: #333; +$white-dark: #444; + +$border-white-light: $gray-900; +$border-white-normal: $gray-900; + +$body-bg: $gray-50; +$input-bg: $gray-100; +$input-focus-bg: $gray-100; +$input-color: $gray-900; +$input-group-addon-bg: $gray-900; + +$tooltip-bg: $gray-800; +$tooltip-color: $gray-10; + +$popover-color: $gray-950; +$popover-box-shadow: 0 2px 3px 1px $gray-700; +$popover-arrow-outer-color: $gray-800; + +$secondary: $gray-600; + +$issues-today-bg: #333838; +$issues-today-border: #333a40; + +.gl-label { + filter: brightness(0.9) contrast(1.1); +} + +// white-ish text for light labels +// and for scoped label value (the right section) +.gl-label-text-light.gl-label-text-light, +.gl-label-text-dark + .gl-label-text-dark { + color: $gray-900; +} + +// duplicated class as the original .atwho-view style is added later +.atwho-view.atwho-view { + background-color: $white; + color: $gray-900; + border-color: $gray-800; +} diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index 8cf5c533f1f..176d64272c2 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -81,68 +81,22 @@ .gl-h-32 { height: px-to-rem($grid-size * 4); } .gl-h-64 { height: px-to-rem($grid-size * 8); } -.gl-shim-h-2 { - height: px-to-rem(4px); -} - -.gl-shim-w-5 { - width: px-to-rem(16px); -} - -.gl-shim-pb-3 { - padding-bottom: 8px; -} - -.gl-shim-pt-5 { - padding-top: 16px; -} - -.gl-shim-mx-2 { - margin-left: 4px; - margin-right: 4px; +.d-sm-table-column { + @include media-breakpoint-up(sm) { + display: table-column !important; + } } .gl-text-purple { color: $purple; } -.gl-text-gray-800 { color: $gray-800; } .gl-bg-purple-light { background-color: $purple-light; } -// Classes using mixins coming from @gitlab-ui -// can be removed once the mixins are added. -// See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details. -.gl-bg-blue-50 { @include gl-bg-blue-50; } -.gl-bg-red-100 { @include gl-bg-red-100; } -.gl-bg-orange-100 { @include gl-bg-orange-100; } -.gl-bg-gray-50 { @include gl-bg-gray-50; } -.gl-bg-gray-100 { @include gl-bg-gray-100; } -.gl-bg-green-100 { @include gl-bg-green-100;} -.gl-bg-blue-500 { @include gl-bg-blue-500; } -.gl-bg-green-500 { @include gl-bg-green-500; } -.gl-bg-theme-indigo-500 { @include gl-bg-theme-indigo-500; } -.gl-bg-red-500 { @include gl-bg-red-500; } -.gl-bg-orange-500 { @include gl-bg-orange-500; } - -.gl-text-blue-500 { @include gl-text-blue-500; } -.gl-text-gray-500 { @include gl-text-gray-500; } -.gl-text-gray-700 { @include gl-text-gray-700; } -.gl-text-gray-900 { @include gl-text-gray-900; } -.gl-text-red-700 { @include gl-text-red-700; } -.gl-text-red-900 { @include gl-text-red-900; } -.gl-text-orange-400 { @include gl-text-orange-400; } -.gl-text-orange-500 { @include gl-text-orange-500; } -.gl-text-orange-600 { @include gl-text-orange-600; } -.gl-text-orange-700 { @include gl-text-orange-700; } -.gl-text-green-500 { @include gl-text-green-500; } -.gl-text-green-700 { @include gl-text-green-700; } - -.gl-align-items-center { @include gl-align-items-center; } - -.d-sm-table-column { - @include media-breakpoint-up(sm) { - display: table-column !important; - } +// move this to GitLab UI once onboarding experiment is considered a success +.gl-py-8 { + padding-top: $gl-spacing-scale-8; + padding-bottom: $gl-spacing-scale-8; } -.gl-white-space-normal { @include gl-white-space-normal; } -.gl-word-break-all { @include gl-word-break-all; } -.gl-reset-line-height { @include gl-reset-line-height; } -.gl-reset-text-align { @include gl-reset-text-align; } +// move this to GitLab UI once onboarding experiment is considered a success +.gl-pl-7 { + padding-left: $gl-spacing-scale-7; +} |