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