diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-05-20 14:34:42 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-05-20 14:34:42 +0000 |
commit | 9f46488805e86b1bc341ea1620b866016c2ce5ed (patch) | |
tree | f9748c7e287041e37d6da49e0a29c9511dc34768 /app/assets/stylesheets | |
parent | dfc92d081ea0332d69c8aca2f0e745cb48ae5e6d (diff) | |
download | gitlab-ce-9f46488805e86b1bc341ea1620b866016c2ce5ed.tar.gz |
Add latest changes from gitlab-org/gitlab@13-0-stable-ee
Diffstat (limited to 'app/assets/stylesheets')
41 files changed, 1130 insertions, 273 deletions
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 657e52674db..cc4d13db150 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -37,4 +37,12 @@ @import "application_ee"; // CSS util classes +/** + These are deprecated in favor of the Gitlab UI utilities imported below. + Please check https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss + to see the available utility classes. +**/ @import "utilities"; + +// Gitlab UI util classes +@import "@gitlab/ui/src/scss/utilities"; diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss index ed5c133950d..1c15400542a 100644 --- a/app/assets/stylesheets/bootstrap_migration.scss +++ b/app/assets/stylesheets/bootstrap_migration.scss @@ -211,7 +211,7 @@ h3.popover-header { } .info-well { - background: $gray-50; + background: $gray-10; color: $gl-text-color; border: 1px solid $border-color; border-radius: 4px; diff --git a/app/assets/stylesheets/components/dashboard_skeleton.scss b/app/assets/stylesheets/components/dashboard_skeleton.scss index 2e2c1fefc79..ce33aa94df3 100644 --- a/app/assets/stylesheets/components/dashboard_skeleton.scss +++ b/app/assets/stylesheets/components/dashboard_skeleton.scss @@ -68,7 +68,7 @@ background-size: cover; background-image: linear-gradient(to right, $gray-100 0%, - $gray-50 20%, + $gray-10 20%, $gray-100 40%, $gray-100 100%); border-radius: $gl-padding; diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss new file mode 100644 index 00000000000..1061aae2bbb --- /dev/null +++ b/app/assets/stylesheets/components/design_management/design.scss @@ -0,0 +1,140 @@ +.design-detail { + background-color: rgba($black, 0.9); + + .with-performance-bar & { + top: 35px; + } + + .inactive { + opacity: 0.5; + } +} + +.design-presentation-wrapper { + top: 0; + left: 0; +} + +.design-scaler { + z-index: 1; +} + +.design-scaler-wrapper { + bottom: 0; + left: 50%; + transform: translateX(-50%); +} + +.design-checkbox { + position: absolute; + top: $gl-padding; + left: 30px; +} + +.image-notes { + overflow-y: scroll; + padding: $gl-padding; + padding-top: 50px; + background-color: $white; + flex-shrink: 0; + min-width: 400px; + flex-basis: 28%; + + .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 { + margin: $gl-padding 0; + + &::before { + content: ''; + border-left: 1px solid $gray-200; + position: absolute; + left: 28px; + top: -18px; + height: 18px; + } + + .design-note { + padding: $gl-padding; + list-style: none; + + a { + color: inherit; + } + + .note-text a { + color: $blue-600; + } + } + + .reply-wrapper { + padding: $gl-padding; + } + } + + .reply-wrapper { + border-top: 1px solid $border-color; + } + + .new-discussion-disclaimer { + line-height: 20px; + } +} + +@media (max-width: map-get($grid-breakpoints, lg)) { + .design-detail { + overflow-y: scroll; + } + + .image-notes { + overflow-y: auto; + min-width: 100%; + flex-grow: 1; + flex-basis: auto; + } +} + +.design-dropzone-border { + border: 2px dashed $gray-200; +} + +.design-dropzone-card { + transition: border $general-hover-transition-duration $general-hover-transition-curve; + + &:focus, + &:active { + outline: none; + border: 2px dashed $purple; + color: $gl-text-color; + } + + &:hover { + border-color: $gray-500; + } +} + +.design-dropzone-overlay { + border: 2px dashed $purple; + top: 0; + left: 0; + pointer-events: none; + opacity: 1; +} + +.design-dropzone-fade-enter-active, +.design-dropzone-fade-leave-active { + transition: opacity $general-hover-transition-duration $general-hover-transition-curve; +} + +.design-dropzone-fade-enter, +.design-dropzone-fade-leave-to { + opacity: 0; +} diff --git a/app/assets/stylesheets/components/design_management/design_list_item.scss b/app/assets/stylesheets/components/design_management/design_list_item.scss new file mode 100644 index 00000000000..aacb1f91e59 --- /dev/null +++ b/app/assets/stylesheets/components/design_management/design_list_item.scss @@ -0,0 +1,19 @@ +.design-list-item { + height: 280px; + text-decoration: none; + + .icon-version-status { + position: absolute; + right: 10px; + top: 10px; + } + + .design-event { + top: $gl-padding; + right: $gl-padding; + } + + .card-body { + height: 230px; + } +} diff --git a/app/assets/stylesheets/components/design_management/design_version_dropdown.scss b/app/assets/stylesheets/components/design_management/design_version_dropdown.scss new file mode 100644 index 00000000000..f79d672e238 --- /dev/null +++ b/app/assets/stylesheets/components/design_management/design_version_dropdown.scss @@ -0,0 +1,3 @@ +.design-version-dropdown > button { + background: inherit; +} diff --git a/app/assets/stylesheets/components/milestone_combobox.scss b/app/assets/stylesheets/components/milestone_combobox.scss new file mode 100644 index 00000000000..e0637088bbb --- /dev/null +++ b/app/assets/stylesheets/components/milestone_combobox.scss @@ -0,0 +1,13 @@ +.selected-item::before { + content: '\f00c'; + color: $green-500; + position: absolute; + left: 16px; + top: 16px; + transform: translateY(-50%); + font: 14px FontAwesome; +} + +.dropdown-item-space { + padding: 8px 12px; +} diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss index ce1039832d3..61f971a3185 100644 --- a/app/assets/stylesheets/components/related_items_list.scss +++ b/app/assets/stylesheets/components/related_items_list.scss @@ -1,9 +1,11 @@ $item-path-max-width: 160px; $item-milestone-max-width: 120px; $item-weight-max-width: 48px; +$item-remove-button-space: 42px; .related-items-list { padding: $gl-padding-4; + padding-right: $gl-padding-6; &, .list-item:last-child { @@ -11,16 +13,16 @@ $item-weight-max-width: 48px; } } -.sortable-link { - max-width: 85%; -} - .related-items-tree { .card-header { .gl-label { line-height: $gl-line-height; } } + + .sortable-link { + white-space: normal; + } } .item-body { @@ -48,17 +50,12 @@ $item-weight-max-width: 48px; cursor: help; } - .issue-token-state-icon-open, - .issue-token-state-icon-closed { - margin-right: $gl-padding-4; - } - .confidential-icon { color: $orange-600; } .item-title-wrapper { - max-width: 100%; + max-width: calc(100% - #{$item-remove-button-space}); } .item-title { @@ -69,11 +66,6 @@ $item-weight-max-width: 48px; font-weight: $gl-font-weight-bold; } - .issue-token-state-icon-open, - .issue-token-state-icon-closed { - display: none; - } - .sortable-link { color: $gray-900; font-weight: normal; @@ -90,17 +82,14 @@ $item-weight-max-width: 48px; white-space: nowrap; } - @include media-breakpoint-down(lg) { - .issue-count-badge { - padding-left: 0; - } + .health-label-short { + display: none; } } .item-body, .card-header { .health-label-short { - display: initial; max-width: 0; } @@ -135,6 +124,12 @@ $item-weight-max-width: 48px; } } +.card-header { + .health-label-short { + display: initial; + } +} + .item-meta { flex-basis: 100%; font-size: $gl-font-size; @@ -227,25 +222,28 @@ $item-weight-max-width: 48px; font-weight: $gl-font-weight-bold; max-width: $item-path-max-width; } - - .issue-token-state-icon-open, - .issue-token-state-icon-closed { - display: block; - } } .btn-item-remove { position: absolute; - right: 0; top: $gl-padding-4 / 2; + right: 0; padding: $gl-padding-4; margin-right: $gl-padding-4 / 2; line-height: 0; border-color: transparent; color: $gl-text-color-secondary; + .related-items-tree & { + position: relative; + top: initial; + padding: $btn-sm-side-margin; + margin-right: initial; + } + &:hover { color: $gl-text-color; + border-color: $border-color; } } @@ -269,7 +267,6 @@ $item-weight-max-width: 48px; max-width: 90%; } - .item-body, .card-header { .health-label-short { max-width: 30px; @@ -279,6 +276,15 @@ $item-weight-max-width: 48px; /* 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%; + } + .sortable-link { text-overflow: ellipsis; overflow: hidden; @@ -290,27 +296,8 @@ $item-weight-max-width: 48px; .item-contents { min-width: 0; } - - .item-title { - flex-basis: unset; - // 95% because we compensate - // for remove button which is - // positioned absolutely - width: 95%; - } - - .btn-item-remove { - order: 1; - } - } - - .item-meta { - .item-meta-child { - flex-basis: unset; - } } - .item-body, .card-header { .health-label-short { max-width: 60px; @@ -330,7 +317,6 @@ $item-weight-max-width: 48px; } } - .item-body, .card-header { .health-label-short { max-width: 100px; @@ -346,32 +332,13 @@ $item-weight-max-width: 48px; @include media-breakpoint-up(xl) { .item-body { .item-title { - min-width: 0; width: auto; flex-basis: auto; flex-shrink: 1; font-weight: $gl-font-weight-normal; - - .issue-token-state-icon-open, - .issue-token-state-icon-closed { - display: block; - margin-right: $gl-padding-8; - } - } - - .item-title-wrapper { - max-width: calc(100% - 500px); - } - - .item-info-area { - flex-basis: auto; } } - .health-label-short { - display: initial; - } - .health-label-long { display: none; } @@ -380,16 +347,7 @@ $item-weight-max-width: 48px; overflow: hidden; } - .item-meta { - flex: 1; - } - .item-assignees { - .avatar { - height: $gl-padding-24; - width: $gl-padding-24; - } - .avatar-counter { height: $gl-padding-24; min-width: $gl-padding-24; @@ -401,12 +359,8 @@ $item-weight-max-width: 48px; .btn-item-remove { position: relative; top: initial; - right: 0; padding: $btn-sm-side-margin; - - &:hover { - border-color: $border-color; - } + margin-right: $gl-padding-4 / 2; } .sortable-link { @@ -415,8 +369,7 @@ $item-weight-max-width: 48px; } @media only screen and (min-width: 1500px) { - .card-header, - .item-body { + .card-header { .health-label-short { display: none; } @@ -425,10 +378,4 @@ $item-weight-max-width: 48px; display: initial; } } - - .item-body { - .item-title-wrapper { - max-width: calc(100% - 640px); - } - } } diff --git a/app/assets/stylesheets/components/rich_content_editor.scss b/app/assets/stylesheets/components/rich_content_editor.scss new file mode 100644 index 00000000000..eca0f1114af --- /dev/null +++ b/app/assets/stylesheets/components/rich_content_editor.scss @@ -0,0 +1,11 @@ +// Overrides styles from ToastUI editor +.tui-editor-defaultUI-toolbar .toolbar-button { + color: $gl-gray-600; + border: 0; + + &:hover, + &:active { + color: $blue-500; + border: 0; + } +} diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss index d222fc4aefe..13174687e5d 100644 --- a/app/assets/stylesheets/framework/animations.scss +++ b/app/assets/stylesheets/framework/animations.scss @@ -193,7 +193,7 @@ a { background-size: cover; background-image: linear-gradient(to right, $gray-100 0%, - $gray-50 20%, + $gray-10 20%, $gray-100 40%, $gray-100 100%); height: 10px; diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index ecf2097dc87..f47d0cab31f 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -507,6 +507,10 @@ opacity: 1 !important; cursor: default !important; + &.cursor-not-allowed { + cursor: not-allowed !important; + } + i { color: $gl-text-color-disabled !important; } diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 320bd4adaaa..93361c21642 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -392,6 +392,10 @@ img.emoji { } /** COMMON CLASSES **/ +/** + 🚨 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; } @@ -434,6 +438,7 @@ img.emoji { .append-bottom-20 { margin-bottom: 20px; } .append-bottom-default { margin-bottom: $gl-padding; } .prepend-bottom-32 { margin-bottom: 32px; } +.ml-10 { margin-left: 4.5rem; } .inline { display: inline-block; } .center { text-align: center; } .block { display: block; } @@ -490,7 +495,8 @@ img.emoji { 🚨 Do not use these classes — they are deprecated and being removed. 🚨 See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details. - Instead, if you need a spacing class, add it below using the following values. + Instead, if you need a spacing class, please use one from Gitlab UI — + https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss — which uses the following scale. $gl-spacing-scale-0: 0; $gl-spacing-scale-1: 2px; $gl-spacing-scale-2: 4px; @@ -505,21 +511,38 @@ img.emoji { $gl-spacing-scale-11: 64px; $gl-spacing-scale-12: 80px; $gl-spacing-scale-13: 96px; - - E.g., a padding top of 96px can be added using: - .gl-shim-pt-13 { - padding-top: 96px; - } - - Please use -shim- so it can be differentiated from the old scale classes. - These will be replaced when the Gitlab UI utilities are included. **/ @each $index, $padding in $spacing-scale { - #{'.gl-p-#{$index}'} { padding: $padding; } - #{'.gl-pl-#{$index}'} { padding-left: $padding; } - #{'.gl-pr-#{$index}'} { padding-right: $padding; } - #{'.gl-pt-#{$index}'} { padding-top: $padding; } - #{'.gl-pb-#{$index}'} { padding-bottom: $padding; } + #{'.gl-p-#{$index}-deprecated-no-really-do-not-use-me'} { padding: $padding; } + #{'.gl-pl-#{$index}-deprecated-no-really-do-not-use-me'} { padding-left: $padding; } + #{'.gl-pr-#{$index}-deprecated-no-really-do-not-use-me'} { padding-right: $padding; } + #{'.gl-pt-#{$index}-deprecated-no-really-do-not-use-me'} { padding-top: $padding; } + #{'.gl-pb-#{$index}-deprecated-no-really-do-not-use-me'} { padding-bottom: $padding; } +} + +/** + 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; } /** @@ -610,15 +633,13 @@ img.emoji { } } -.gl-font-size-small { font-size: $gl-font-size-small; } -.gl-font-size-large { font-size: $gl-font-size-large; } +.gl-font-sm { font-size: $gl-font-size-small; } +.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-12 { font-size: $gl-font-size-12; } -.gl-font-size-14 { font-size: $gl-font-size-14; } -.gl-font-size-16 { font-size: $gl-font-size-16; } .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/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index f746d7e6f69..1df9818a877 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -317,13 +317,6 @@ } } - // Temporary fix to ensure tick is aligned - // Follow up Issue to remove after the GlNewDropdownItem component is fixed - // > https://gitlab.com/gitlab-org/gitlab/-/issues/213948 - li:not(.gl-new-dropdown-item) .dropdown-item { - @include dropdown-link; - } - .divider { height: 1px; margin: #{$grid-size / 2} 0; @@ -384,6 +377,10 @@ } } +.dropdown-item { + @include dropdown-link; +} + .droplab-dropdown { .dropdown-toggle > i { pointer-events: none; @@ -1032,6 +1029,16 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu { } .labels-select-wrapper { + &.is-standalone { + .labels-select-dropdown-contents { + max-height: 350px; + + .dropdown-content { + height: 250px; + } + } + } + .labels-select-dropdown-contents { min-height: $dropdown-min-height; max-height: 330px; diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index a0a020ec548..2c7e9428ef1 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -553,6 +553,7 @@ vertical-align: text-top; } + a.upgrade-plan-link gl-emoji, a.ci-minutes-emoji gl-emoji, a.trial-link gl-emoji { font-size: $gl-font-size; diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index 79f203091f2..bd262b65dc3 100644 --- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss +++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss @@ -146,11 +146,13 @@ display: inline-block; position: relative; - /* Medium devices (desktops, 992px and up) */ - @include media-breakpoint-up(md) { width: 200px; } + &:not[type='checkbox'] { + /* Medium devices (desktops, 992px and up) */ + @include media-breakpoint-up(md) { width: 200px; } - /* Large devices (large desktops, 1200px and up) */ - @include media-breakpoint-up(lg) { width: 250px; } + /* Large devices (large desktops, 1200px and up) */ + @include media-breakpoint-up(lg) { width: 250px; } + } } @include media-breakpoint-down(sm) { diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss index 514bd090e28..5739f048e86 100644 --- a/app/assets/stylesheets/framework/tables.scss +++ b/app/assets/stylesheets/framework/tables.scss @@ -4,6 +4,21 @@ } table { + /* + * TODO + * This is a temporary workaround until we fix the neutral + * color palette in https://gitlab.com/gitlab-org/gitlab/-/issues/213570 + * + * The overwrites here affected the security dashboard tables, when removing + * this code, table-th-transparent and original-text-color classes should + * be removed there. + * + * Remove this code as soon as this happens + */ + &.gl-table { + @include gl-text-gray-700; + } + &.table { margin-bottom: $gl-padding; @@ -32,8 +47,7 @@ table { } th { - background-color: $gray-light; - font-weight: $gl-font-weight-normal; + @include gl-bg-gray-100; border-bottom: 0; &.wide { @@ -44,6 +58,11 @@ table { background: none; color: $gl-text-color-secondary; } + + &.original-gl-th { + @include gl-text-gray-700; + border-bottom: 1px solid $cycle-analytics-light-gray; + } } td { diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 816dbc6931c..1afcbc6d514 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -86,7 +86,7 @@ line-height: 10px; color: $gl-gray-700; vertical-align: middle; - background-color: $gray-50; + background-color: $gray-10; border-width: 1px; border-style: solid; border-color: $gray-200 $gray-200 $gray-400; @@ -533,6 +533,17 @@ margin: 0; font-size: $gl-font-size-small; } + + ul.dropdown-menu { + margin-top: 4px; + margin-bottom: 24px; + padding: 8px 0; + + li { + margin: 0; + padding: 0 1px; + } + } } } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index c23623005b0..ac4d431ea57 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -163,7 +163,8 @@ $red-800: #8b2615; $red-900: #711e11; $red-950: #4b140b; -$gray-50: #fafafa; +$gray-10: #fafafa; +$gray-50: #f0f0f0; $gray-100: #f2f2f2; $gray-200: #dfdfdf; $gray-300: #ccc; @@ -232,6 +233,7 @@ $reds: ( ); $grays: ( + '10': $gray-10, '50': $gray-50, '100': $gray-100, '200': $gray-200, @@ -398,6 +400,7 @@ $tooltip-font-size: 12px; * Padding */ $gl-padding-4: 4px; +$gl-padding-6: 6px; $gl-padding-8: 8px; $gl-padding-12: 12px; $gl-padding: 16px; @@ -447,6 +450,7 @@ $breadcrumb-min-height: 48px; $home-panel-title-row-height: 64px; $home-panel-avatar-mobile-size: 24px; $gl-line-height: 16px; +$gl-line-height-18: 18px; $gl-line-height-20: 20px; $gl-line-height-24: 24px; $gl-line-height-14: 14px; @@ -697,7 +701,7 @@ $logs-p-color: #333; */ $input-height: 34px; $input-danger-bg: #f2dede; -$input-group-addon-bg: $gray-50; +$input-group-addon-bg: $gray-10; $gl-field-focus-shadow: rgba(0, 0, 0, 0.075); $gl-field-focus-shadow-error: rgba($red-500, 0.6); $input-short-width: 200px; diff --git a/app/assets/stylesheets/page_bundles/_ide_mixins.scss b/app/assets/stylesheets/page_bundles/_ide_mixins.scss index 9465dd5bed6..48b8a7230b1 100644 --- a/app/assets/stylesheets/page_bundles/_ide_mixins.scss +++ b/app/assets/stylesheets/page_bundles/_ide_mixins.scss @@ -9,7 +9,6 @@ top: 0; font-size: 12px; border-top-right-radius: $border-radius-default; - margin-left: -$gl-padding; .controllers { @include build-controllers(15px, center, false, 0, inline, 0); diff --git a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss index 1aa112e0957..5675835a622 100644 --- a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss +++ b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss @@ -69,8 +69,17 @@ display: none !important; } } +} + +.multi-file-editor-holder { + height: 100%; + min-height: 0; // firefox fix +} - .monaco-diff-editor.vs { +// Apply theme related overrides only to the white theme and none theme +.theme-white .blob-editor-container, +.theme-none .blob-editor-container { + .monaco-diff-editor { .editor.modified { box-shadow: none; } @@ -131,16 +140,14 @@ } } -.multi-file-editor-holder { - height: 100%; - min-height: 0; // firefox fix - - &.is-readonly .vs, - .vs .editor.original { +.theme-white .multi-file-editor-holder, +.theme-none .multi-file-editor-holder { + &.is-readonly, + .editor.original { .monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input { - background-color: $gray-50; + background-color: $gray-10; } } } diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss new file mode 100644 index 00000000000..e4c01c2bd6c --- /dev/null +++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss @@ -0,0 +1,308 @@ +// ------- +// 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); + } + + h1, + h2, + h3, + h4, + h5, + h6, + code, + .md table:not(.code), + .md, + .md p, + .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); + } + + .drag-handle:hover, + .card-header .badge.badge-pill { + background-color: var(--ide-dropdown-hover-background); + } + + .file-row .file-row-icon svg, + .file-row:hover .file-row-icon svg, + .controllers-buttons svg { + color: var(--ide-text-color-secondary); + } + + .text-secondary { + color: var(--ide-text-color-secondary) !important; + } + + input[type='search']::placeholder, + input[type='text']::placeholder, + textarea::placeholder, + .dropdown-input .fa { + color: var(--ide-input-border); + } + + .ide-nav-form .input-icon { + color: var(--ide-input-border); + } + + code, + .badge.badge-pill, + .card-header, + .bs-callout, + .ide-pipeline .top-bar, + .ide-terminal .top-bar { + background-color: var(--ide-background); + } + + .bs-callout { + border-color: var(--ide-dropdown-background); + + code { + background-color: var(--ide-dropdown-background); + } + } + + .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); + } + + &, + .md table:not(.code) tr th, + .common-note-form .md-area, + .card { + background-color: var(--ide-highlight-background); + } + + .card, + .card-header, + .ide-terminal .top-bar, + .ide-pipeline .top-bar { + border-color: var(--ide-border-color); + } + + 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); + } + + .ide-sidebar-link.active { + color: var(--ide-highlight-accent); + box-shadow: inset 3px 0 var(--ide-highlight-accent); + + &.is-right { + box-shadow: inset -3px 0 var(--ide-highlight-accent); + } + } + + .nav-links li.active a, + .nav-links li a.active { + border-color: var(--ide-highlight-accent); + color: var(--ide-text-color); + } + + .avatar-container { + &, + .avatar { + color: var(--ide-text-color); + background-color: var(--ide-highlight-background); + border-color: var(--ide-highlight-background); + } + } + + input[type='text'], + input[type='search'], + .filtered-search-box { + border-color: var(--ide-input-border); + background: var(--ide-input-background) !important; + } + + input[type='text'], + input[type='search'], + .filtered-search-box, + textarea { + color: var(--ide-input-color) !important; + } + + .filtered-search-box input[type='search'] { + border-color: transparent; + } + + .filtered-search-token .value-container, + .filtered-search-term .value-container { + background-color: var(--ide-dropdown-hover-background); + color: var(--ide-text-color); + + &:hover { + background-color: var(--ide-input-border); + } + } + + @function calc-btn-hover-padding($original-padding, $original-border: 1px) { + @return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width)); + } + + .btn:not(.btn-link):not([disabled]):hover { + border-width: var(--ide-btn-hover-border-width); + padding: calc-btn-hover-padding(6px) calc-btn-hover-padding(10px); + } + + .btn:not([disabled]).btn-sm:hover { + padding: calc-btn-hover-padding(4px) calc-btn-hover-padding(10px); + } + + .btn:not([disabled]).btn-block:hover { + 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); + } + + .btn-inverted, + .btn-default { + &:hover, + &:focus { + border-color: var(--ide-btn-default-hover-border) !important; + } + } + + .dropdown, + .dropdown-menu-toggle { + &:hover, + &:focus { + background-color: var(--ide-dropdown-btn-hover-background) !important; + border-color: var(--ide-dropdown-btn-hover-border) !important; + } + } + + .dropdown-menu { + color: var(--ide-text-color); + border-color: var(--ide-background); + background-color: var(--ide-dropdown-background); + + .divider, + .nav-links:not(.quick-links) { + background-color: var(--ide-dropdown-hover-background); + border-color: var(--ide-dropdown-hover-background); + } + + .nav-links li a.active { + border-color: var(--ide-highlight-accent); + } + + .nav-links:not(.quick-links) li:not(.md-header-toolbar) a { + color: var(--ide-text-color); + + &.active { + color: var(--ide-text-color); + } + } + + li > a:not(.disable-hover):hover, + li > a:not(.disable-hover):focus, + 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); + } + } + + .dropdown-title, + .dropdown-input { + border-color: var(--ide-dropdown-hover-background) !important; + } + + .btn-primary, + .btn-info { + background-color: var(--ide-btn-primary-background); + border-color: var(--ide-btn-primary-border) !important; + + &:hover, + &:focus { + border-color: var(--ide-btn-primary-hover-border) !important; + } + } + + .btn-success { + background-color: var(--ide-btn-success-background); + border-color: var(--ide-btn-success-border) !important; + + &:hover, + &:focus { + border-color: var(--ide-btn-success-hover-border) !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; + } + + pre code, + .md table:not(.code) tbody { + background-color: var(--ide-border-color); + } + + .animation-container { + [class^='skeleton-line-'] { + background-color: var(--ide-animation-gradient-1); + + &::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%); + } + } + } + + .idiff.addition { + background-color: var(--ide-diff-insert); + } + + .idiff.deletion { + background-color: var(--ide-diff-remove); + } +} + +.navbar.theme-dark { + border-bottom-color: transparent; +} + +.theme-dark ~ .popover { + box-shadow: none; +} diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index 024c1781bf8..61914740ac0 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -2,6 +2,9 @@ @import 'framework/mixins'; @import './ide_mixins'; @import './ide_monaco_overrides'; +@import './ide_theme_overrides'; + +@import './ide_themes/dark'; $search-list-icon-width: 18px; $ide-activity-bar-width: 60px; @@ -25,7 +28,7 @@ $ide-commit-header-height: 48px; position: relative; margin-top: 0; padding-bottom: $ide-statusbar-height; - color: $gl-text-color; + color: var(--ide-text-color, $gl-text-color); min-height: 0; // firefox fix &.is-collapsed { @@ -61,14 +64,14 @@ $ide-commit-header-height: 48px; display: flex; flex-direction: column; flex: 1; - border-left: 1px solid $white-dark; + border-left: 1px solid var(--ide-border-color, $white-dark); overflow: hidden; } .multi-file-tabs { display: flex; - background-color: $gray-light; - box-shadow: inset 0 -1px $white-dark; + background-color: var(--ide-background, $gray-light); + box-shadow: inset 0 -1px var(--ide-border-color, $white-dark); > ul { display: flex; @@ -79,13 +82,13 @@ $ide-commit-header-height: 48px; display: flex; align-items: center; padding: $grid-size $gl-padding; - background-color: $gray-normal; - border-right: 1px solid $white-dark; - border-bottom: 1px solid $white-dark; + background-color: var(--ide-background-hover, $gray-normal); + border-right: 1px solid var(--ide-border-color, $white-dark); + border-bottom: 1px solid var(--ide-border-color, $white-dark); &.active { - background-color: $white; - border-bottom-color: $white; + background-color: var(--ide-highlight-background, $white); + border-bottom-color: var(--ide-border-color, $white); } &:not(.disabled) { @@ -118,7 +121,7 @@ $ide-commit-header-height: 48px; background: none; border: 0; border-radius: $border-radius-default; - color: $gray-900; + color: var(--ide-text-color, $gray-900); svg { position: relative; @@ -133,11 +136,11 @@ $ide-commit-header-height: 48px; } &:not([disabled]):hover { - background-color: $gray-200; + background-color: var(--ide-input-border, $gray-200); } &:not([disabled]):focus { - background-color: $blue-500; + background-color: var(--ide-link-color, $blue-500); color: $white; outline: 0; @@ -164,10 +167,11 @@ $ide-commit-header-height: 48px; height: 100%; overflow: auto; padding: $gl-padding; + background-color: var(--ide-border-color, transparent); } .file-container { - background-color: $gray-darker; + background-color: var(--ide-border-color, $gray-darker); display: flex; height: 100%; align-items: center; @@ -183,13 +187,13 @@ $ide-commit-header-height: 48px; .file-info { font-size: $label-font-size; - color: $diff-image-info-color; + color: var(--ide-text-color, $diff-image-info-color); } } } .ide-mode-tabs { - border-bottom: 1px solid $white-dark; + border-bottom: 1px solid var(--ide-border-color, $white-dark); li a { padding: $gl-padding-8 $gl-padding; @@ -203,9 +207,10 @@ $ide-commit-header-height: 48px; } .ide-status-bar { - border-top: 1px solid $white-dark; + color: var(--ide-text-color, $gl-text-color); + border-top: 1px solid var(--ide-border-color, $white-dark); padding: 2px $gl-padding-8 0; - background: $white; + background-color: var(--ide-footer-background, $white); display: flex; justify-content: space-between; height: $ide-statusbar-height; @@ -278,8 +283,7 @@ $ide-commit-header-height: 48px; position: relative; width: 340px; padding: 0; - background-color: $gray-light; - padding-right: 1px; + background-color: var(--ide-background, $gray-light); .context-header { width: auto; @@ -306,9 +310,9 @@ $ide-commit-header-height: 48px; display: flex; flex: 1; flex-direction: column; - background-color: $white; - border-left: 1px solid $white-dark; - border-top: 1px solid $white-dark; + background-color: var(--ide-highlight-background, $white); + border-left: 1px solid var(--ide-border-color, $white-dark); + border-top: 1px solid var(--ide-border-color, $white-dark); border-top-left-radius: $border-radius-small; min-height: 0; // firefox fix } @@ -333,15 +337,10 @@ $ide-commit-header-height: 48px; .multi-file-commit-panel-header { height: $ide-commit-header-height; - border-bottom: 1px solid $white-dark; + border-bottom: 1px solid var(--ide-border-color-alt, $white-dark); padding: 12px 0; } -.multi-file-commit-panel-collapse-btn { - border-left: 1px solid $white-dark; - margin-left: auto; -} - .multi-file-commit-list { flex: 1; overflow: auto; @@ -363,7 +362,7 @@ $ide-commit-header-height: 48px; display: block; margin-left: auto; margin-right: auto; - color: $gray-700; + color: var(--ide-text-color-secondary, $gray-700); } .file-status-icon { @@ -387,17 +386,17 @@ $ide-commit-header-height: 48px; &:hover, &:focus { - background: $gray-100; + background: var(--ide-background, $gray-100); outline: 0; } &:active { - background: $gray-200; + background: var(--ide-background, $gray-200); } &.is-active { - background-color: $white-normal; + background-color: var(--ide-background, $white-normal); } svg { @@ -418,8 +417,8 @@ $ide-commit-header-height: 48px; .multi-file-commit-form { position: relative; - background-color: $white; - border-left: 1px solid $white-dark; + background-color: var(--ide-highlight-background, $white); + border-left: 1px solid var(--ide-border-color, $white-dark); transition: all 0.3s ease; > form, @@ -427,7 +426,7 @@ $ide-commit-header-height: 48px; padding: $gl-padding 0; margin-left: $gl-padding; margin-right: $gl-padding; - border-top: 1px solid $white-dark; + border-top: 1px solid var(--ide-border-color-alt, $white-dark); } .btn { @@ -488,6 +487,7 @@ $ide-commit-header-height: 48px; height: 100vh; align-items: center; justify-content: center; + background-color: var(--ide-border-color, transparent); } .ide { @@ -504,7 +504,7 @@ $ide-commit-header-height: 48px; margin-right: $gl-padding; &.is-first { - border-bottom: 1px solid $white-dark; + border-bottom: 1px solid var(--ide-border-color-alt, $white-dark); } } @@ -512,12 +512,7 @@ $ide-commit-header-height: 48px; width: $ide-commit-row-height; height: $ide-commit-row-height; color: inherit; -} - -.ide-commit-file-count { - min-width: 22px; - background-color: $gray-light; - border: 1px solid $white-dark; + background-color: var(--ide-background, $white-normal); } .ide-commit-options { @@ -549,7 +544,7 @@ $ide-commit-header-height: 48px; height: 60px; width: 100%; padding: 0 $gl-padding; - color: $gl-text-color-secondary; + color: var(--ide-text-color-secondary, $gl-text-color-secondary); background-color: transparent; border: 0; border-top: 1px solid transparent; @@ -562,22 +557,22 @@ $ide-commit-header-height: 48px; } &:hover { - color: $gl-text-color; - background-color: $gray-100; + color: var(--ide-text-color, $gl-text-color); + background-color: var(--ide-background-hover, $gray-100); } &:focus { - color: $gl-text-color; - background-color: $gray-200; + color: var(--ide-text-color, $gl-text-color); + background-color: var(--ide-background-hover, $gray-200); } &.active { // extend width over border of sidebar section width: calc(100% + 1px); padding-right: $gl-padding + 1px; - background-color: $white; - border-top-color: $white-dark; - border-bottom-color: $white-dark; + background-color: var(--ide-highlight-background, $white); + border-top-color: var(--ide-border-color, $white-dark); + border-bottom-color: var(--ide-border-color, $white-dark); &::after { content: ''; @@ -586,7 +581,7 @@ $ide-commit-header-height: 48px; top: 0; bottom: 0; width: 1px; - background: $white; + background: var(--ide-highlight-background, $white); } &.is-right { @@ -609,7 +604,7 @@ $ide-commit-header-height: 48px; .ide-commit-message-field { height: 200px; - background-color: $white; + background-color: var(--ide-highlight-background, $white); .md-area { display: flex; @@ -623,7 +618,7 @@ $ide-commit-header-height: 48px; .form-text.text-muted { margin-top: 2px; - color: $blue-500; + color: var(--ide-link-color, $blue-500); cursor: pointer; } } @@ -686,14 +681,14 @@ $ide-commit-header-height: 48px; padding: 12px 0; margin-left: $ide-tree-padding; margin-right: $ide-tree-padding; - border-bottom: 1px solid $white-dark; + border-bottom: 1px solid var(--ide-border-color-alt, $white-dark); svg { - color: $gray-700; + color: var(--ide-text-color-secondary, $gray-700); &:focus, &:hover { - color: $blue-600; + color: var(--ide-link-color, $blue-600); } } @@ -702,7 +697,7 @@ $ide-commit-header-height: 48px; } button { - color: $gl-text-color; + color: var(--ide-text-color, $gl-text-color); } } @@ -718,21 +713,21 @@ $ide-commit-header-height: 48px; .dropdown-menu-toggle { svg { vertical-align: middle; - color: $gray-700; + &, &:hover { - color: $gray-700; + color: var(--ide-text-color-secondary, $gray-700); } } &:hover { - background-color: $white-normal; + background-color: var(--ide-dropdown-btn-hover-background, $white-normal); } } &.show { .dropdown-menu-toggle { - background-color: $white-dark; + background-color: var(--ide-input-background, $white-dark); } } } @@ -798,12 +793,12 @@ $ide-commit-header-height: 48px; } a { - color: $blue-600; + color: var(--ide-link-color, $blue-600); } } .ide-review-sub-header { - color: $gl-text-color-secondary; + color: var(--ide-text-color-secondary, $gl-text-color-secondary); } .ide-tree-changes { @@ -819,7 +814,7 @@ $ide-commit-header-height: 48px; bottom: 0; right: 0; z-index: 10; - background: $white; + background-color: var(--ide-highlight-background, $white); overflow: auto; display: flex; flex-direction: column; @@ -883,14 +878,18 @@ $ide-commit-header-height: 48px; .ide-right-sidebar { .ide-activity-bar { - border-left: 1px solid $white-dark; + border-left: 1px solid var(--ide-border-color, $white-dark); } .multi-file-commit-panel-inner { width: 350px; - padding: $grid-size $gl-padding; - background-color: $white; - border-left: 1px solid $white-dark; + padding: $grid-size 0; + background-color: var(--ide-highlight-background, $white); + border-left: 1px solid var(--ide-border-color, $white-dark); + } + + .ide-right-sidebar-jobs-detail { + padding-bottom: 0; } .ide-right-sidebar-clientside { @@ -901,6 +900,10 @@ $ide-commit-header-height: 48px; .ide-pipeline { @include ide-trace-view(); + svg { + --svg-status-bg: var(--ide-background, $white); + } + .empty-state { p { margin: $grid-size 0; @@ -913,15 +916,12 @@ $ide-commit-header-height: 48px; margin: 0; } } - - .build-trace { - margin-left: -$gl-padding; - } } .ide-pipeline-list { flex: 1; overflow: auto; + padding: 0 $gl-padding; } .ide-pipeline-header { @@ -935,7 +935,7 @@ $ide-commit-header-height: 48px; padding: 16px; &:not(:last-child) { - border-bottom: 1px solid $border-color; + border-bottom: 1px solid var(--ide-border-color, $border-color); } .ci-status-icon { @@ -964,6 +964,7 @@ $ide-commit-header-height: 48px; .ide-job-header { min-height: 60px; + padding: 0 $gl-padding; } .ide-nav-form { @@ -976,7 +977,7 @@ $ide-commit-header-height: 48px; text-align: center; &:not(.active) { - background-color: $gray-light; + background-color: var(--ide-dropdown-background, $gray-light); } } } @@ -1025,7 +1026,7 @@ $ide-commit-header-height: 48px; .ide-merge-request-project-path { font-size: 12px; line-height: 16px; - color: $gl-text-color-secondary; + color: var(--ide-text-color-secondary, $gl-text-color-secondary); } .ide-merge-request-info { @@ -1041,17 +1042,17 @@ $ide-commit-header-height: 48px; .ide-entry-dropdown-toggle { padding: $gl-padding-4; - color: $gl-text-color; - background-color: $gray-100; + color: var(--ide-text-color, $gl-text-color); + background-color: var(--ide-background, $gray-100); &:hover { - background-color: $gray-200; + background-color: var(--ide-file-row-btn-hover-background, $gray-200); } &:active, &:focus { color: $white-normal; - background-color: $blue-500; + background-color: var(--ide-link-color, $blue-500); outline: 0; } } @@ -1065,14 +1066,14 @@ $ide-commit-header-height: 48px; .dropdown.show .ide-entry-dropdown-toggle { color: $white-normal; - background-color: $blue-500; + background-color: var(--ide-link-color, $blue-500); } } .ide-preview-header { padding: 0 $grid-size; - border-bottom: 1px solid $white-dark; - background-color: $gray-light; + border-bottom: 1px solid var(--ide-border-color-alt, $white-dark); + background-color: var(--ide-highlight-background, $gray-light); min-height: 44px; } @@ -1082,7 +1083,7 @@ $ide-commit-header-height: 48px; max-width: 24px; padding: 0; margin: 0 ($grid-size / 2); - color: $gl-gray-light; + color: var(--ide-text-color-secondary, $gl-gray-light); &:first-child { margin-left: 0; @@ -1096,7 +1097,7 @@ $ide-commit-header-height: 48px; &:focus { outline: 0; box-shadow: none; - border-color: $gray-200; + border-color: var(--ide-border-color, $gray-200); } } @@ -1108,8 +1109,8 @@ $ide-commit-header-height: 48px; .ide-file-templates { padding: $grid-size $gl-padding; - background-color: $gray-light; - border-bottom: 1px solid $white-dark; + background-color: var(--ide-background, $gray-light); + border-bottom: 1px solid var(--ide-border-color, $white-dark); .dropdown { min-width: 180px; @@ -1123,8 +1124,8 @@ $ide-commit-header-height: 48px; .ide-commit-editor-header { height: 65px; padding: 8px 16px; - background-color: $gray-50; - box-shadow: inset 0 -1px $white-dark; + background-color: var(--ide-background, $gray-10); + box-shadow: inset 0 -1px var(--ide-border-color, $white-dark); } .ide-commit-list-changed-icon { @@ -1135,16 +1136,26 @@ $ide-commit-header-height: 48px; .ide-file-icon-holder { display: flex; align-items: center; - color: $gray-700; + color: var(--ide-text-color-secondary, $gray-700); +} + +.file-row:active { + background: var(--ide-background, $gray-200); +} + +.file-row.is-active { + background: var(--ide-background, $gray-100); } .file-row:hover, .file-row:focus { + background: var(--ide-background, $gray-100); + .ide-new-btn { display: block; } .folder-icon { - fill: $gl-text-color-secondary; + fill: var(--ide-text-color-secondary, $gl-text-color-secondary); } } diff --git a/app/assets/stylesheets/page_bundles/ide_themes/README.md b/app/assets/stylesheets/page_bundles/ide_themes/README.md new file mode 100644 index 00000000000..535179cc4c2 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/ide_themes/README.md @@ -0,0 +1,53 @@ +# Web IDE Themes + +Web IDE currently supports 5 syntax highlighting themes based on themes from the user's profile preferences: + +* White +* Dark +* Monokai +* Solarized Dark +* Solarized Light + +Currently, the Web IDE supports the white theme by default, and the dark theme by the introduction of CSS +variables. + +The Web IDE automatically adds an appropriate theme class to the `ide.vue` component based on the current syntax +highlighting theme. Below are those theme classes, which come from the `gon.user_color_scheme` global setting: + +| # | Color Scheme | `gon.user_color_scheme` | Theme class | +|---|-----------------|-------------------------|-------------------------| +| 1 | White | `"white"` | `.theme-white` | +| 2 | Dark | `"dark"` | `.theme-dark` | +| 3 | Monokai | `"monokai"` | `.theme-monokai` | +| 4 | Solarized Dark | `"solarized-dark"` | `.theme-solarized-dark` | +| 5 | Solarized Light | `"solarized-light"` | `.theme-solarized-light` | +| 6 | None | `"none"` | `.theme-none` | + +## Adding New Themes (SCSS) + +To add a new theme, follow the following steps: + +1. Pick a theme from the table above, lets say **Solarized Dark**. +2. Create a new file in this folder called `_solarized_dark.scss`. +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. + +## Modifying Monaco Themes + +Monaco themes are defined in Javascript and are stored in the `app/assets/javascripts/ide/lib/themes/` directory. +To modify any syntax highlighting colors or to synchronize the theme colors with syntax highlighting colors, you +can modify the files in that directory directly. diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss new file mode 100644 index 00000000000..37e6be9849b --- /dev/null +++ b/app/assets/stylesheets/page_bundles/ide_themes/_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-dark { + --ide-border-color: #1d1f21; + --ide-border-color-alt: #333; + --ide-highlight-accent: #fff; + --ide-text-color: #ccc; + --ide-text-color-secondary: #ccc; + --ide-background: #333; + --ide-background-hover: #2d2d2d; + --ide-highlight-background: #252526; + --ide-link-color: #428fdc; + --ide-footer-background: #060606; + + --ide-input-border: #868686; + --ide-input-background: transparent; + --ide-input-color: #fff; + + --ide-btn-default-background: transparent; + --ide-btn-default-border: #bfbfbf; + --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: #404040; + --ide-dropdown-hover-background: #525252; + + --ide-dropdown-btn-hover-border: #{$gray-200}; + --ide-dropdown-btn-hover-background: #{$gray-900}; + + --ide-file-row-btn-hover-background: #{$gray-800}; + + --ide-diff-insert: rgba(155, 185, 85, 0.2); + --ide-diff-remove: rgba(255, 0, 0, 0.2); + + --ide-animation-gradient-1: #{$gray-800}; + --ide-animation-gradient-2: #{$gray-700}; +} diff --git a/app/assets/stylesheets/pages/alert_management/details.scss b/app/assets/stylesheets/pages/alert_management/details.scss new file mode 100644 index 00000000000..89219e41644 --- /dev/null +++ b/app/assets/stylesheets/pages/alert_management/details.scss @@ -0,0 +1,42 @@ +.alert-management-details { + // these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui + table { + tr { + td { + @include gl-border-0; + @include gl-p-5; + border-color: transparent; + border-bottom: 1px solid $table-border-color; + + &:first-child { + div { + font-weight: bold; + } + } + + &:not(:first-child) { + &::before { + color: $gray-700; + font-weight: normal !important; + } + + div { + color: $gray-700; + } + } + + @include media-breakpoint-up(sm) { + div { + text-align: left !important; + } + } + } + } + } + + @include media-breakpoint-down(xs) { + .alert-details-create-issue-button { + width: 100%; + } + } +} diff --git a/app/assets/stylesheets/pages/alert_management/list.scss b/app/assets/stylesheets/pages/alert_management/list.scss new file mode 100644 index 00000000000..dc181342def --- /dev/null +++ b/app/assets/stylesheets/pages/alert_management/list.scss @@ -0,0 +1,83 @@ +.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; + + tr { + &:focus { + outline: none; + } + + 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; + } + } + + th { + background-color: transparent; + font-weight: $gl-font-weight-bold; + color: $gl-gray-600; + } + + &:last-child { + td { + @include gl-border-0; + } + } + } + } + + @include media-breakpoint-down(sm) { + .alert-management-table { + .table-col { + min-height: 68px; + + &:last-child { + background-color: $gray-10; + + &::before { + content: none !important; + } + + div { + width: 100% !important; + padding: 0 !important; + } + } + } + } + } + + .gl-tab-nav-item { + color: $gl-gray-600; + + > .gl-tab-counter-badge { + color: inherit; + @include gl-font-sm; + background-color: $white-normal; + } + } +} diff --git a/app/assets/stylesheets/pages/alert_management/severity-icons.scss b/app/assets/stylesheets/pages/alert_management/severity-icons.scss new file mode 100644 index 00000000000..b400e80d5c5 --- /dev/null +++ b/app/assets/stylesheets/pages/alert_management/severity-icons.scss @@ -0,0 +1,26 @@ +.alert-management-list, +.alert-management-details { + .icon-critical { + color: $red-800; + } + + .icon-high { + color: $red-600; + } + + .icon-medium { + color: $orange-400; + } + + .icon-low { + color: $orange-300; + } + + .icon-info { + color: $blue-400; + } + + .icon-unknown { + color: $gray-400; + } +} diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 11291dad28b..d755170fe1f 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -548,3 +548,27 @@ */ height: $input-height; } + +.issue-boards-content.is-focused { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: $white; + z-index: 9000; + + @include media-breakpoint-down(sm) { + padding-top: 10px; + } + + .boards-list { + height: calc(100vh - #{$issue-boards-filter-height}); + overflow-x: scroll; + } + + .issue-boards-sidebar { + height: 100%; + top: 0; + } +} diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index 230f390aa90..9a69afc6044 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -208,6 +208,18 @@ } } +.commit-nav-buttons { + a.btn, + button { + // See: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/730 + &:last-child > svg { + margin-left: 0.25rem; + margin-right: 0; + } + } +} + + .clipboard-group, .commit-sha-group { display: inline-flex; diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index 0292919ea50..b97709e140f 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/pages/cycle_analytics.scss @@ -187,7 +187,6 @@ .stage-events { width: 60%; - overflow: scroll; min-height: 467px; } diff --git a/app/assets/stylesheets/pages/error_list.scss b/app/assets/stylesheets/pages/error_list.scss index a61a85649b8..3ec3e4f6b43 100644 --- a/app/assets/stylesheets/pages/error_list.scss +++ b/app/assets/stylesheets/pages/error_list.scss @@ -17,7 +17,7 @@ min-height: 68px; &:last-child { - background-color: $gray-normal; + background-color: $gray-10; &::before { content: none !important; diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 85fdcb753b4..b241d0a2bdc 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -167,10 +167,6 @@ } } - a.gl-label-icon { - color: $gray-500; - } - .gl-label .gl-label-link:hover { text-decoration: none; color: inherit; @@ -180,11 +176,6 @@ } } - .gl-label .gl-label-icon:hover { - text-decoration: none; - color: $gray-500; - } - .btn-link { color: inherit; } @@ -826,10 +817,6 @@ } } } - - .gl-label-icon { - color: $gray-500; - } } @media(max-width: map-get($grid-breakpoints, lg)-1) { diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index e74b420f9e9..0dd25ec5360 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -303,3 +303,13 @@ ul.related-merge-requests > li { } } } + +.issuable-list-root { + .gl-label-link { + text-decoration: none; + + &:hover { + color: inherit; + } + } +} diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index 7f6542261b8..22c1cb127cd 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -307,7 +307,7 @@ } .label-name { - width: 150px; + width: 200px; flex-shrink: 0; .scoped-label-wrapper, @@ -460,8 +460,7 @@ // Label inside title of Delete Label Modal .modal-header .page-title { .scoped-label-wrapper { - .scoped-label, - .gl-label-icon { + .scoped-label { line-height: 20px; } diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index fa10ab022dc..c473cc44637 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -68,10 +68,6 @@ $status-box-line-height: 26px; .gl-label-link { color: inherit; } - - .gl-label-icon { - color: $gray-500; - } } } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 8b51ba7ae62..bed147aa3a7 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -588,7 +588,8 @@ $note-form-margin-left: 72px; a { color: inherit; - &:hover { + &:hover, + &.hover { color: $blue-600; } @@ -605,6 +606,21 @@ $note-form-margin-left: 72px; .author-link { color: $gl-text-color; } + + // Prevent flickering of link when hovering between `author-name-link` and `.author-username-link` + .author-name-link + .author-username .author-username-link { + position: relative; + + &::before { + content: ''; + position: absolute; + right: 100%; + width: 0.25rem; + height: 100%; + top: 0; + bottom: 0; + } + } } .discussion-header { @@ -672,8 +688,7 @@ $note-form-margin-left: 72px; text-decoration: underline; } - .gl-label-link:hover, - .gl-label-icon:hover { + .gl-label-link:hover { text-decoration: none; color: inherit; @@ -892,11 +907,10 @@ $note-form-margin-left: 72px; border-right: 0; .line-resolve-btn { - margin-right: 5px; color: $gray-700; svg { - vertical-align: middle; + vertical-align: text-top; } } diff --git a/app/assets/stylesheets/pages/pipeline_schedules.scss b/app/assets/stylesheets/pages/pipeline_schedules.scss index 85c4902eee2..81716991a36 100644 --- a/app/assets/stylesheets/pages/pipeline_schedules.scss +++ b/app/assets/stylesheets/pages/pipeline_schedules.scss @@ -21,11 +21,6 @@ .cron-interval-input { margin: 10px 10px 0 0; } - - .cron-syntax-link-wrap { - margin-right: 10px; - font-size: 12px; - } } .pipeline-schedule-table-row { diff --git a/app/assets/stylesheets/pages/prometheus.scss b/app/assets/stylesheets/pages/prometheus.scss index f61245bed24..0f56b98a78d 100644 --- a/app/assets/stylesheets/pages/prometheus.scss +++ b/app/assets/stylesheets/pages/prometheus.scss @@ -13,6 +13,14 @@ .form-group { margin-bottom: map-get($spacing-scale, 3); } + + .variables-section { + input { + @include media-breakpoint-up(sm) { + width: 160px; + } + } + } } .draggable { @@ -143,7 +151,7 @@ > .arrow::after { border-top: 6px solid transparent; border-bottom: 6px solid transparent; - border-left: 4px solid $gray-50; + border-left: 4px solid $gray-10; } .arrow-shadow { @@ -165,7 +173,7 @@ > .arrow::after { border-top: 6px solid transparent; border-bottom: 6px solid transparent; - border-right: 4px solid $gray-50; + border-right: 4px solid $gray-10; } .arrow-shadow { @@ -199,7 +207,7 @@ } > .popover-title { - background-color: $gray-50; + background-color: $gray-10; border-radius: $border-radius-default $border-radius-default 0 0; } } diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index 2c0ca792ec3..d26c07ce51b 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -335,15 +335,6 @@ } } -.deprecated-service { - cursor: default; - - a { - font-weight: $gl-font-weight-bold; - color: $white; - } -} - .personal-access-tokens-never-expires-label { color: $note-disabled-comment-color; } @@ -401,4 +392,3 @@ } } } - diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss index 93a12cf28a2..d410a16a1d9 100644 --- a/app/assets/stylesheets/snippets.scss +++ b/app/assets/stylesheets/snippets.scss @@ -40,10 +40,9 @@ margin: 0; padding: 0; table-layout: fixed; + overflow-x: auto; .blob-content { - overflow-x: auto; - pre { height: 100%; padding: 10px; @@ -61,6 +60,7 @@ font-family: $monospace-font; font-size: $code-font-size; line-height: $code-line-height; + display: inline-block; } } @@ -73,7 +73,7 @@ font-family: $monospace-font; display: block; font-size: $code-font-size; - min-height: $code-line-height; + line-height: $code-line-height; white-space: nowrap; color: $black-transparent; min-width: 30px; diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index b829a7b518e..8cf5c533f1f 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -1,3 +1,10 @@ +/** + Please note: These are deprecated in favor of the Gitlab UI utility classes. + Check https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss + to see the available utility classes. If you cannot find the class you need, + consider adding it to Gitlab UI before adding it here. +**/ + @each $variant, $range in $color-ranges { @each $suffix, $color in $range { #{'.bg-#{$variant}-#{$suffix}'} { @@ -7,6 +14,12 @@ #{'.text-#{$variant}-#{$suffix}'} { color: $color; } + + #{'.hover-text-#{$variant}-#{$suffix}'} { + &:hover { + color: $color; + } + } } } @@ -44,6 +57,7 @@ .border-color-default { border-color: $border-color; } .border-bottom-color-default { border-bottom-color: $border-color; } .border-radius-default { border-radius: $border-radius-default; } +.border-radius-small { border-radius: $border-radius-small; } .box-shadow-default { box-shadow: 0 2px 4px 0 $black-transparent; } .gl-children-ml-sm-3 > * { @@ -75,6 +89,19 @@ 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; +} + .gl-text-purple { color: $purple; } .gl-text-gray-800 { color: $gray-800; } .gl-bg-purple-light { background-color: $purple-light; } @@ -85,6 +112,7 @@ .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; } @@ -107,8 +135,14 @@ .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; } } + +.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; } |