diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-06-18 11:18:50 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-06-18 11:18:50 +0000 |
commit | 8c7f4e9d5f36cff46365a7f8c4b9c21578c1e781 (patch) | |
tree | a77e7fe7a93de11213032ed4ab1f33a3db51b738 /app/assets/stylesheets/page_bundles | |
parent | 00b35af3db1abfe813a778f643dad221aad51fca (diff) | |
download | gitlab-ce-8c7f4e9d5f36cff46365a7f8c4b9c21578c1e781.tar.gz |
Add latest changes from gitlab-org/gitlab@13-1-stable-ee
Diffstat (limited to 'app/assets/stylesheets/page_bundles')
5 files changed, 304 insertions, 156 deletions
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); + } |