Skip to content

G
gitlab-ce
Commit d13ac0d6 authored by Himanshu Kapoor's avatar Himanshu Kapoor
Browse files
Options

Move some css variables around in IDE 

Move some css variables from _ide_theme_overrides.scss
to ide.scss to remove redundant styles.
parent 711e9c9c
Hide whitespace changes
Inline Side-by-side
Showing with 101 additions and 209 deletions
app/assets/javascripts/vue_shared/components/file_row.vue
View file @ d13ac0d6
...@@ -148,19 +148,6 @@ export default { ...@@ -148,19 +148,6 @@ export default {
cursor: pointer; cursor: pointer;
} }
.file-row:hover,
.file-row:focus {
background: #f2f2f2;
}
.file-row:active {
background: #dfdfdf;
}
.file-row.is-active {
background: #f2f2f2;
}
.file-row-name-container { .file-row-name-container {
display: flex; display: flex;
width: 100%; width: 100%;
......
app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
View file @ d13ac0d6
...@@ -16,18 +16,11 @@ ...@@ -16,18 +16,11 @@
.md table:not(.code), .md table:not(.code),
.md, .md,
.md p, .md p,
.ide-view,
.context-header > a, .context-header > a,
.ide-sidebar-link,
.multi-file-tab-close,
.ide-tree-header button,
.ide-status-bar,
input, input,
textarea, textarea,
.md-area.is-focused, .md-area.is-focused,
.ide-entry-dropdown-toggle,
.dropdown-menu li button, .dropdown-menu li button,
.ide-merge-request-project-path,
.dropdown-menu-selectable li a.is-active, .dropdown-menu-selectable li a.is-active,
.dropdown-menu-inner-title, .dropdown-menu-inner-title,
.dropdown-menu-inner-content, .dropdown-menu-inner-content,
...@@ -36,9 +29,7 @@ ...@@ -36,9 +29,7 @@
.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.active .badge.badge-pill,
.nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover .badge.badge-pill, .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover .badge.badge-pill,
.badge.badge-pill, .badge.badge-pill,
.ide-navigator-button,
.bs-callout, .bs-callout,
.ide-navigator-btn,
.ide-pipeline .top-bar, .ide-pipeline .top-bar,
.ide-pipeline .top-bar .controllers .controllers-buttons { .ide-pipeline .top-bar .controllers .controllers-buttons {
color: var(--ide-text-color); color: var(--ide-text-color);
...@@ -49,29 +40,14 @@ ...@@ -49,29 +40,14 @@
background-color: var(--ide-dropdown-hover-background); background-color: var(--ide-dropdown-hover-background);
} }
.dropdown-menu-toggle svg,
.dropdown-menu-toggle svg:hover,
.ide-tree-header:not(.ide-pipeline-header) svg,
.file-row .file-row-icon svg, .file-row .file-row-icon svg,
.file-row:hover .file-row-icon svg, .file-row:hover .file-row-icon svg,
.controllers-buttons svg { .controllers-buttons svg {
fill: var(--ide-text-color); color: var(--ide-text-color-secondary);
}
.ide-pipeline svg {
--svg-status-bg: var(--ide-background);
}
.multi-file-tab-close:hover {
background-color: var(--ide-input-border);
}
.ide-review-sub-header:hover {
color: var(--ide-input-border);
} }
.text-secondary { .text-secondary {
color: var(--ide-text-color) !important; color: var(--ide-text-color-secondary) !important;
} }
input[type='search']::placeholder, input[type='search']::placeholder,
...@@ -82,23 +58,10 @@ ...@@ -82,23 +58,10 @@
} }
.ide-nav-form .input-icon { .ide-nav-form .input-icon {
fill: var(--ide-input-border); color: var(--ide-input-border);
} }
code, code,
.multi-file-commit-panel,
.multi-file-tabs,
.multi-file-tabs li,
.file-row:hover,
.file-row:focus,
.multi-file-commit-list-path:hover,
.multi-file-commit-list-path:focus,
.multi-file-commit-list-path.is-active,
.file-row.is-active,
.ide-commit-editor-header,
.ide-file-templates,
.ide-entry-dropdown-toggle,
.ide-staged-action-btn,
.badge.badge-pill, .badge.badge-pill,
.card-header, .card-header,
.bs-callout, .bs-callout,
...@@ -119,80 +82,33 @@ ...@@ -119,80 +82,33 @@
border-color: var(--ide-dropdown-hover-background); border-color: var(--ide-dropdown-hover-background);
} }
.ide-sidebar-link:hover,
.multi-file-tabs li {
background-color: var(--ide-background-hover);
}
.common-note-form .md-area { .common-note-form .md-area {
border-color: var(--ide-input-border); border-color: var(--ide-input-border);
} }
&, &,
.md table:not(.code) tr th, .md table:not(.code) tr th,
.multi-file-commit-panel-inner-content,
.multi-file-commit-form,
.multi-file-tabs li.active,
.ide-sidebar-link.active,
.ide-sidebar-link.active::after,
.ide-right-sidebar .multi-file-commit-panel-inner,
.common-note-form .md-area, .common-note-form .md-area,
.ide-commit-message-field, .card {
.card,
.multi-file-commit-panel-success-message,
.ide-preview-header {
background-color: var(--ide-highlight-background); background-color: var(--ide-highlight-background);
} }
.multi-file-commit-panel {
padding-right: 0;
}
.ide-mode-tabs,
.multi-file-commit-panel-inner,
.multi-file-commit-panel-inner-content,
.multi-file-commit-form,
.multi-file-edit-pane,
.ide-right-sidebar .ide-activity-bar,
.ide-sidebar-link.active,
.multi-file-tabs li.active,
.multi-file-tabs li,
.ide-status-bar,
.ide-commit-editor-header,
.ide-file-templates,
.card, .card,
.card-header, .card-header,
.ide-job-item:not(:last-child),
.ide-terminal .top-bar, .ide-terminal .top-bar,
.ide-pipeline .top-bar { .ide-pipeline .top-bar {
border-color: var(--ide-border-color); border-color: var(--ide-border-color);
} }
hr,
.md h1, .md h1,
.md h2, .md h2,
.md blockquote, .md blockquote,
pre, pre,
.md table:not(.code) tbody td, .md table:not(.code) tbody td,
.md table:not(.code) tr th, .md table:not(.code) tr th,
.multi-file-commit-form > .commit-form-compact, .nav-links:not(.quick-links) {
.ide-tree-header, border-color: var(--ide-border-color-alt);
.multi-file-commit-panel-header,
.multi-file-commit-form > form,
.multi-file-commit-form hr,
.ide-commit-list-container.is-first,
.multi-file-commit-form .nav-links:not(.quick-links),
.ide-pipeline-list .nav-links:not(.quick-links),
.ide-preview-header {
border-color: var(--ide-background);
}
.multi-file-tabs li.active {
border-bottom-color: var(--ide-highlight-background);
}
.multi-file-tabs,
.ide-commit-editor-header {
box-shadow: inset 0 -1px var(--ide-border-color);
} }
.ide-sidebar-link.active { .ide-sidebar-link.active {
...@@ -219,10 +135,6 @@ ...@@ -219,10 +135,6 @@
} }
} }
.ide-status-bar {
background-color: var(--ide-footer-background);
}
input[type='text'], input[type='text'],
input[type='search'], input[type='search'],
.filtered-search-box { .filtered-search-box {
...@@ -251,10 +163,6 @@ ...@@ -251,10 +163,6 @@
} }
} }
.ide-entry-dropdown-toggle:hover {
background: var(--ide-file-row-btn-hover-background);
}
@function calc-btn-hover-padding($original-padding, $original-border: 1px) { @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));
} }
...@@ -313,10 +221,6 @@ ...@@ -313,10 +221,6 @@
border-color: var(--ide-highlight-accent); border-color: var(--ide-highlight-accent);
} }
.ide-nav-form .nav-links li a:not(.active) {
background-color: var(--ide-dropdown-background);
}
.nav-links:not(.quick-links) li:not(.md-header-toolbar) a { .nav-links:not(.quick-links) li:not(.md-header-toolbar) a {
color: var(--ide-text-color); color: var(--ide-text-color);
...@@ -367,18 +271,11 @@ ...@@ -367,18 +271,11 @@
color: var(--ide-btn-disabled-color) !important; color: var(--ide-btn-disabled-color) !important;
} }
.md-previewer,
pre code, pre code,
.md table:not(.code) tbody, .md table:not(.code) tbody {
.ide-empty-state {
background-color: var(--ide-border-color); background-color: var(--ide-border-color);
} }
.ide-tree-header svg:focus,
.ide-tree-header svg:hover {
color: var(--ide-link-color);
}
.animation-container { .animation-container {
[class^='skeleton-line-'] { [class^='skeleton-line-'] {
background-color: var(--ide-animation-gradient-1); background-color: var(--ide-animation-gradient-1);
......
app/assets/stylesheets/page_bundles/ide.scss
View file @ d13ac0d6
...@@ -28,7 +28,7 @@ $ide-commit-header-height: 48px; ...@@ -28,7 +28,7 @@ $ide-commit-header-height: 48px;
position: relative; position: relative;
margin-top: 0; margin-top: 0;
padding-bottom: $ide-statusbar-height; padding-bottom: $ide-statusbar-height;
color: $gl-text-color; color: var(--ide-text-color, $gl-text-color);
min-height: 0; // firefox fix min-height: 0; // firefox fix
&.is-collapsed { &.is-collapsed {
...@@ -64,14 +64,14 @@ $ide-commit-header-height: 48px; ...@@ -64,14 +64,14 @@ $ide-commit-header-height: 48px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
border-left: 1px solid $white-dark; border-left: 1px solid var(--ide-border-color, $white-dark);
overflow: hidden; overflow: hidden;
} }
.multi-file-tabs { .multi-file-tabs {
display: flex; display: flex;
background-color: $gray-light; background-color: var(--ide-background, $gray-light);
box-shadow: inset 0 -1px $white-dark; box-shadow: inset 0 -1px var(--ide-border-color, $white-dark);
> ul { > ul {
display: flex; display: flex;
...@@ -82,13 +82,13 @@ $ide-commit-header-height: 48px; ...@@ -82,13 +82,13 @@ $ide-commit-header-height: 48px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: $grid-size $gl-padding; padding: $grid-size $gl-padding;
background-color: $gray-normal; background-color: var(--ide-background-hover, $gray-normal);
border-right: 1px solid $white-dark; border-right: 1px solid var(--ide-border-color, $white-dark);
border-bottom: 1px solid $white-dark; border-bottom: 1px solid var(--ide-border-color, $white-dark);
&.active { &.active {
background-color: $white; background-color: var(--ide-highlight-background, $white);
border-bottom-color: $white; border-bottom-color: var(--ide-border-color, $white);
} }
&:not(.disabled) { &:not(.disabled) {
...@@ -121,7 +121,7 @@ $ide-commit-header-height: 48px; ...@@ -121,7 +121,7 @@ $ide-commit-header-height: 48px;
background: none; background: none;
border: 0; border: 0;
border-radius: $border-radius-default; border-radius: $border-radius-default;
color: $gray-900; color: var(--ide-text-color, $gray-900);
svg { svg {
position: relative; position: relative;
...@@ -136,11 +136,11 @@ $ide-commit-header-height: 48px; ...@@ -136,11 +136,11 @@ $ide-commit-header-height: 48px;
} }
&:not([disabled]):hover { &:not([disabled]):hover {
background-color: $gray-200; background-color: var(--ide-input-border, $gray-200);
} }
&:not([disabled]):focus { &:not([disabled]):focus {
background-color: $blue-500; background-color: var(--ide-link-color, $blue-500);
color: $white; color: $white;
outline: 0; outline: 0;
...@@ -167,10 +167,11 @@ $ide-commit-header-height: 48px; ...@@ -167,10 +167,11 @@ $ide-commit-header-height: 48px;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
padding: $gl-padding; padding: $gl-padding;
background-color: var(--ide-border-color, transparent);
} }
.file-container { .file-container {
background-color: $gray-darker; background-color: var(--ide-border-color, $gray-darker);
display: flex; display: flex;
height: 100%; height: 100%;
align-items: center; align-items: center;
...@@ -186,13 +187,13 @@ $ide-commit-header-height: 48px; ...@@ -186,13 +187,13 @@ $ide-commit-header-height: 48px;
.file-info { .file-info {
font-size: $label-font-size; font-size: $label-font-size;
color: $diff-image-info-color; color: var(--ide-text-color, $diff-image-info-color);
} }
} }
} }
.ide-mode-tabs { .ide-mode-tabs {
border-bottom: 1px solid $white-dark; border-bottom: 1px solid var(--ide-border-color, $white-dark);
li a { li a {
padding: $gl-padding-8 $gl-padding; padding: $gl-padding-8 $gl-padding;
...@@ -206,9 +207,10 @@ $ide-commit-header-height: 48px; ...@@ -206,9 +207,10 @@ $ide-commit-header-height: 48px;
} }
.ide-status-bar { .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; padding: 2px $gl-padding-8 0;
background: $white; background-color: var(--ide-footer-background, $white);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: $ide-statusbar-height; height: $ide-statusbar-height;
...@@ -281,8 +283,7 @@ $ide-commit-header-height: 48px; ...@@ -281,8 +283,7 @@ $ide-commit-header-height: 48px;
position: relative; position: relative;
width: 340px; width: 340px;
padding: 0; padding: 0;
background-color: $gray-light; background-color: var(--ide-background, $gray-light);
padding-right: 1px;
.context-header { .context-header {
width: auto; width: auto;
...@@ -309,9 +310,9 @@ $ide-commit-header-height: 48px; ...@@ -309,9 +310,9 @@ $ide-commit-header-height: 48px;
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
background-color: $white; background-color: var(--ide-highlight-background, $white);
border-left: 1px solid $white-dark; border-left: 1px solid var(--ide-border-color, $white-dark);
border-top: 1px solid $white-dark; border-top: 1px solid var(--ide-border-color, $white-dark);
border-top-left-radius: $border-radius-small; border-top-left-radius: $border-radius-small;
min-height: 0; // firefox fix min-height: 0; // firefox fix
} }
...@@ -336,15 +337,10 @@ $ide-commit-header-height: 48px; ...@@ -336,15 +337,10 @@ $ide-commit-header-height: 48px;
.multi-file-commit-panel-header { .multi-file-commit-panel-header {
height: $ide-commit-header-height; 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; padding: 12px 0;
} }
.multi-file-commit-panel-collapse-btn {
border-left: 1px solid $white-dark;
margin-left: auto;
}
.multi-file-commit-list { .multi-file-commit-list {
flex: 1; flex: 1;
overflow: auto; overflow: auto;
...@@ -366,7 +362,7 @@ $ide-commit-header-height: 48px; ...@@ -366,7 +362,7 @@ $ide-commit-header-height: 48px;
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
color: $gray-700; color: var(--ide-text-color-secondary, $gray-700);
} }
.file-status-icon { .file-status-icon {
...@@ -390,17 +386,17 @@ $ide-commit-header-height: 48px; ...@@ -390,17 +386,17 @@ $ide-commit-header-height: 48px;
&:hover, &:hover,
&:focus { &:focus {
background: $gray-100; background: var(--ide-background, $gray-100);
outline: 0; outline: 0;
} }
&:active { &:active {
background: $gray-200; background: var(--ide-background, $gray-200);
} }
&.is-active { &.is-active {
background-color: $white-normal; background-color: var(--ide-background, $white-normal);
} }
svg { svg {
...@@ -421,8 +417,8 @@ $ide-commit-header-height: 48px; ...@@ -421,8 +417,8 @@ $ide-commit-header-height: 48px;
.multi-file-commit-form { .multi-file-commit-form {
position: relative; position: relative;
background-color: $white; background-color: var(--ide-highlight-background, $white);
border-left: 1px solid $white-dark; border-left: 1px solid var(--ide-border-color, $white-dark);
transition: all 0.3s ease; transition: all 0.3s ease;
> form, > form,
...@@ -430,7 +426,7 @@ $ide-commit-header-height: 48px; ...@@ -430,7 +426,7 @@ $ide-commit-header-height: 48px;
padding: $gl-padding 0; padding: $gl-padding 0;
margin-left: $gl-padding; margin-left: $gl-padding;
margin-right: $gl-padding; margin-right: $gl-padding;
border-top: 1px solid $white-dark; border-top: 1px solid var(--ide-border-color-alt, $white-dark);
} }
.btn { .btn {
...@@ -491,6 +487,7 @@ $ide-commit-header-height: 48px; ...@@ -491,6 +487,7 @@ $ide-commit-header-height: 48px;
height: 100vh; height: 100vh;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: var(--ide-border-color, transparent);
} }
.ide { .ide {
...@@ -507,7 +504,7 @@ $ide-commit-header-height: 48px; ...@@ -507,7 +504,7 @@ $ide-commit-header-height: 48px;
margin-right: $gl-padding; margin-right: $gl-padding;
&.is-first { &.is-first {
border-bottom: 1px solid $white-dark; border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
} }
} }
...@@ -515,12 +512,7 @@ $ide-commit-header-height: 48px; ...@@ -515,12 +512,7 @@ $ide-commit-header-height: 48px;
width: $ide-commit-row-height; width: $ide-commit-row-height;
height: $ide-commit-row-height; height: $ide-commit-row-height;
color: inherit; color: inherit;
} background-color: var(--ide-background, $white-normal);
.ide-commit-file-count {
min-width: 22px;
background-color: $gray-light;
border: 1px solid $white-dark;
} }
.ide-commit-options { .ide-commit-options {
...@@ -552,7 +544,7 @@ $ide-commit-header-height: 48px; ...@@ -552,7 +544,7 @@ $ide-commit-header-height: 48px;
height: 60px; height: 60px;
width: 100%; width: 100%;
padding: 0 $gl-padding; padding: 0 $gl-padding;
color: $gl-text-color-secondary; color: var(--ide-text-color-secondary, $gl-text-color-secondary);
background-color: transparent; background-color: transparent;
border: 0; border: 0;
border-top: 1px solid transparent; border-top: 1px solid transparent;
...@@ -565,22 +557,22 @@ $ide-commit-header-height: 48px; ...@@ -565,22 +557,22 @@ $ide-commit-header-height: 48px;
} }
&:hover { &:hover {
color: $gl-text-color; color: var(--ide-text-color, $gl-text-color);
background-color: $gray-100; background-color: var(--ide-background-hover, $gray-100);
} }
&:focus { &:focus {
color: $gl-text-color; color: var(--ide-text-color, $gl-text-color);
background-color: $gray-200; background-color: var(--ide-background-hover, $gray-200);
} }
&.active { &.active {
// extend width over border of sidebar section // extend width over border of sidebar section
width: calc(100% + 1px); width: calc(100% + 1px);
padding-right: $gl-padding + 1px; padding-right: $gl-padding + 1px;
background-color: $white; background-color: var(--ide-highlight-background, $white);
border-top-color: $white-dark; border-top-color: var(--ide-border-color, $white-dark);
border-bottom-color: $white-dark; border-bottom-color: var(--ide-border-color, $white-dark);
&::after { &::after {
content: ''; content: '';
...@@ -589,7 +581,7 @@ $ide-commit-header-height: 48px; ...@@ -589,7 +581,7 @@ $ide-commit-header-height: 48px;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 1px; width: 1px;
background: $white; background: var(--ide-highlight-background, $white);
} }
&.is-right { &.is-right {
...@@ -612,7 +604,7 @@ $ide-commit-header-height: 48px; ...@@ -612,7 +604,7 @@ $ide-commit-header-height: 48px;
.ide-commit-message-field { .ide-commit-message-field {
height: 200px; height: 200px;
background-color: $white; background-color: var(--ide-highlight-background, $white);
.md-area { .md-area {
display: flex; display: flex;
...@@ -626,7 +618,7 @@ $ide-commit-header-height: 48px; ...@@ -626,7 +618,7 @@ $ide-commit-header-height: 48px;
.form-text.text-muted { .form-text.text-muted {
margin-top: 2px; margin-top: 2px;
color: $blue-500; color: var(--ide-link-color, $blue-500);
cursor: pointer; cursor: pointer;
} }
} }
...@@ -689,14 +681,14 @@ $ide-commit-header-height: 48px; ...@@ -689,14 +681,14 @@ $ide-commit-header-height: 48px;
padding: 12px 0; padding: 12px 0;
margin-left: $ide-tree-padding; margin-left: $ide-tree-padding;
margin-right: $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 { svg {
color: $gray-700; color: var(--ide-text-color-secondary, $gray-700);
&:focus, &:focus,
&:hover { &:hover {
color: $blue-600; color: var(--ide-link-color, $blue-600);
} }
} }
...@@ -705,7 +697,7 @@ $ide-commit-header-height: 48px; ...@@ -705,7 +697,7 @@ $ide-commit-header-height: 48px;
} }
button { button {
color: $gl-text-color; color: var(--ide-text-color, $gl-text-color);
} }
} }
...@@ -721,21 +713,21 @@ $ide-commit-header-height: 48px; ...@@ -721,21 +713,21 @@ $ide-commit-header-height: 48px;
.dropdown-menu-toggle { .dropdown-menu-toggle {
svg { svg {
vertical-align: middle; vertical-align: middle;
color: $gray-700;
&,
&:hover { &:hover {
color: $gray-700; color: var(--ide-text-color-secondary, $gray-700);
} }
} }
&:hover { &:hover {
background-color: $white-normal; background-color: var(--ide-dropdown-btn-hover-background, $white-normal);
} }
} }
&.show { &.show {
.dropdown-menu-toggle { .dropdown-menu-toggle {
background-color: $white-dark; background-color: var(--ide-input-background, $white-dark);
} }
} }
} }
...@@ -801,12 +793,12 @@ $ide-commit-header-height: 48px; ...@@ -801,12 +793,12 @@ $ide-commit-header-height: 48px;
} }
a { a {
color: $blue-600; color: var(--ide-link-color, $blue-600);
} }
} }
.ide-review-sub-header { .ide-review-sub-header {
color: $gl-text-color-secondary; color: var(--ide-text-color-secondary, $gl-text-color-secondary);
} }
.ide-tree-changes { .ide-tree-changes {
...@@ -822,7 +814,7 @@ $ide-commit-header-height: 48px; ...@@ -822,7 +814,7 @@ $ide-commit-header-height: 48px;
bottom: 0; bottom: 0;
right: 0; right: 0;
z-index: 10; z-index: 10;
background: $white; background-color: var(--ide-highlight-background, $white);
overflow: auto; overflow: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -886,14 +878,14 @@ $ide-commit-header-height: 48px; ...@@ -886,14 +878,14 @@ $ide-commit-header-height: 48px;
.ide-right-sidebar { .ide-right-sidebar {
.ide-activity-bar { .ide-activity-bar {
border-left: 1px solid $white-dark; border-left: 1px solid var(--ide-border-color, $white-dark);
} }
.multi-file-commit-panel-inner { .multi-file-commit-panel-inner {
width: 350px; width: 350px;
padding: $grid-size 0; padding: $grid-size 0;
background-color: $white; background-color: var(--ide-highlight-background, $white);
border-left: 1px solid $white-dark; border-left: 1px solid var(--ide-border-color, $white-dark);
} }
.ide-right-sidebar-jobs-detail { .ide-right-sidebar-jobs-detail {
...@@ -908,6 +900,10 @@ $ide-commit-header-height: 48px; ...@@ -908,6 +900,10 @@ $ide-commit-header-height: 48px;
.ide-pipeline { .ide-pipeline {
@include ide-trace-view(); @include ide-trace-view();
svg {
--svg-status-bg: var(--ide-background, $white);
}
.empty-state { .empty-state {
p { p {
margin: $grid-size 0; margin: $grid-size 0;
...@@ -939,7 +935,7 @@ $ide-commit-header-height: 48px; ...@@ -939,7 +935,7 @@ $ide-commit-header-height: 48px;
padding: 16px; padding: 16px;
&:not(:last-child) { &:not(:last-child) {
border-bottom: 1px solid $border-color; border-bottom: 1px solid var(--ide-border-color, $border-color);
} }
.ci-status-icon { .ci-status-icon {
...@@ -981,7 +977,7 @@ $ide-commit-header-height: 48px; ...@@ -981,7 +977,7 @@ $ide-commit-header-height: 48px;
text-align: center; text-align: center;
&:not(.active) { &:not(.active) {
background-color: $gray-light; background-color: var(--ide-dropdown-background, $gray-light);
} }
} }
} }
...@@ -1030,7 +1026,7 @@ $ide-commit-header-height: 48px; ...@@ -1030,7 +1026,7 @@ $ide-commit-header-height: 48px;
.ide-merge-request-project-path { .ide-merge-request-project-path {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: $gl-text-color-secondary; color: var(--ide-text-color-secondary, $gl-text-color-secondary);
} }
.ide-merge-request-info { .ide-merge-request-info {
...@@ -1046,17 +1042,17 @@ $ide-commit-header-height: 48px; ...@@ -1046,17 +1042,17 @@ $ide-commit-header-height: 48px;
.ide-entry-dropdown-toggle { .ide-entry-dropdown-toggle {
padding: $gl-padding-4; padding: $gl-padding-4;
color: $gl-text-color; color: var(--ide-text-color, $gl-text-color);
background-color: $gray-100; background-color: var(--ide-background, $gray-100);
&:hover { &:hover {
background-color: $gray-200; background-color: var(--ide-file-row-btn-hover-background, $gray-200);
} }
&:active, &:active,
&:focus { &:focus {
color: $white-normal; color: $white-normal;
background-color: $blue-500; background-color: var(--ide-link-color, $blue-500);
outline: 0; outline: 0;
} }
} }
...@@ -1070,14 +1066,14 @@ $ide-commit-header-height: 48px; ...@@ -1070,14 +1066,14 @@ $ide-commit-header-height: 48px;
.dropdown.show .ide-entry-dropdown-toggle { .dropdown.show .ide-entry-dropdown-toggle {
color: $white-normal; color: $white-normal;
background-color: $blue-500; background-color: var(--ide-link-color, $blue-500);
} }
} }
.ide-preview-header { .ide-preview-header {
padding: 0 $grid-size; padding: 0 $grid-size;
border-bottom: 1px solid $white-dark; border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
background-color: $gray-light; background-color: var(--ide-highlight-background, $gray-light);
min-height: 44px; min-height: 44px;
} }
...@@ -1087,7 +1083,7 @@ $ide-commit-header-height: 48px; ...@@ -1087,7 +1083,7 @@ $ide-commit-header-height: 48px;
max-width: 24px; max-width: 24px;
padding: 0; padding: 0;
margin: 0 ($grid-size / 2); margin: 0 ($grid-size / 2);
color: $gl-gray-light; color: var(--ide-text-color-secondary, $gl-gray-light);
&:first-child { &:first-child {
margin-left: 0; margin-left: 0;
...@@ -1101,7 +1097,7 @@ $ide-commit-header-height: 48px; ...@@ -1101,7 +1097,7 @@ $ide-commit-header-height: 48px;
&:focus { &:focus {
outline: 0; outline: 0;
box-shadow: none; box-shadow: none;
border-color: $gray-200; border-color: var(--ide-border-color, $gray-200);
} }
} }
...@@ -1113,8 +1109,8 @@ $ide-commit-header-height: 48px; ...@@ -1113,8 +1109,8 @@ $ide-commit-header-height: 48px;
.ide-file-templates { .ide-file-templates {
padding: $grid-size $gl-padding; padding: $grid-size $gl-padding;
background-color: $gray-light; background-color: var(--ide-background, $gray-light);
border-bottom: 1px solid $white-dark; border-bottom: 1px solid var(--ide-border-color, $white-dark);
.dropdown { .dropdown {
min-width: 180px; min-width: 180px;
...@@ -1128,8 +1124,8 @@ $ide-commit-header-height: 48px; ...@@ -1128,8 +1124,8 @@ $ide-commit-header-height: 48px;
.ide-commit-editor-header { .ide-commit-editor-header {
height: 65px; height: 65px;
padding: 8px 16px; padding: 8px 16px;
background-color: $gray-50; background-color: var(--ide-background, $gray-50);
box-shadow: inset 0 -1px $white-dark; box-shadow: inset 0 -1px var(--ide-border-color, $white-dark);
} }
.ide-commit-list-changed-icon { .ide-commit-list-changed-icon {
...@@ -1140,16 +1136,26 @@ $ide-commit-header-height: 48px; ...@@ -1140,16 +1136,26 @@ $ide-commit-header-height: 48px;
.ide-file-icon-holder { .ide-file-icon-holder {
display: flex; display: flex;
align-items: center; 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:hover,
.file-row:focus { .file-row:focus {
background: var(--ide-background, $gray-100);
.ide-new-btn { .ide-new-btn {
display: block; display: block;
} }
.folder-icon { .folder-icon {
fill: $gl-text-color-secondary; fill: var(--ide-text-color-secondary, $gl-text-color-secondary);
} }
} }
app/assets/stylesheets/page_bundles/ide_themes/_dark.scss
View file @ d13ac0d6
...@@ -3,8 +3,10 @@ ...@@ -3,8 +3,10 @@
// ------- // -------
.ide.theme-dark { .ide.theme-dark {
--ide-border-color: #1d1f21; --ide-border-color: #1d1f21;
--ide-border-color-alt: #333;
--ide-highlight-accent: #fff; --ide-highlight-accent: #fff;
--ide-text-color: #ccc; --ide-text-color: #ccc;
--ide-text-color-secondary: #ccc;
--ide-background: #333; --ide-background: #333;
--ide-background-hover: #2d2d2d; --ide-background-hover: #2d2d2d;
--ide-highlight-background: #252526; --ide-highlight-background: #252526;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7