diff options
Diffstat (limited to 'app/assets/stylesheets/page_bundles/ide.scss')
-rw-r--r-- | app/assets/stylesheets/page_bundles/ide.scss | 191 |
1 files changed, 101 insertions, 90 deletions
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); } } |