Skip to content

G
gitlab-ce
Commit 0965ca8d authored by Martin Wortschack's avatar Martin Wortschack
Browse files
Options

Merge branch '217432-dark-theme-css-cleanup' into 'master' 

Move some css variables from _ide_theme_overrides.scss file to ide.scss

See merge request gitlab-org/gitlab!31865
parents 226bd0cc d13ac0d6
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 @ 0965ca8d
......@@ -148,19 +148,6 @@ export default {
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 {
display: flex;
width: 100%;
......
app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
View file @ 0965ca8d
......@@ -16,18 +16,11 @@
.md table:not(.code),
.md,
.md p,
.ide-view,
.context-header > a,
.ide-sidebar-link,
.multi-file-tab-close,
.ide-tree-header button,
.ide-status-bar,
input,
textarea,
.md-area.is-focused,
.ide-entry-dropdown-toggle,
.dropdown-menu li button,
.ide-merge-request-project-path,
.dropdown-menu-selectable li a.is-active,
.dropdown-menu-inner-title,
.dropdown-menu-inner-content,
......@@ -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:hover .badge.badge-pill,
.badge.badge-pill,
.ide-navigator-button,
.bs-callout,
.ide-navigator-btn,
.ide-pipeline .top-bar,
.ide-pipeline .top-bar .controllers .controllers-buttons {
color: var(--ide-text-color);
......@@ -49,29 +40,14 @@
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:hover .file-row-icon svg,
.controllers-buttons svg {
fill: var(--ide-text-color);
}
.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);
color: var(--ide-text-color-secondary);
}
.text-secondary {
color: var(--ide-text-color) !important;
color: var(--ide-text-color-secondary) !important;
}
input[type='search']::placeholder,
......@@ -82,23 +58,10 @@
}
.ide-nav-form .input-icon {
fill: var(--ide-input-border);
color: var(--ide-input-border);
}
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,
.card-header,
.bs-callout,
......@@ -119,80 +82,33 @@
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 {
border-color: var(--ide-input-border);
}
&,
.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,
.ide-commit-message-field,
.card,
.multi-file-commit-panel-success-message,
.ide-preview-header {
.card {
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-header,
.ide-job-item:not(:last-child),
.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,
.multi-file-commit-form > .commit-form-compact,
.ide-tree-header,
.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);
.nav-links:not(.quick-links) {
border-color: var(--ide-border-color-alt);
}
.ide-sidebar-link.active {
......@@ -219,10 +135,6 @@
}
}
.ide-status-bar {
background-color: var(--ide-footer-background);
}
input[type='text'],
input[type='search'],
.filtered-search-box {
......@@ -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) {
@return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width));
}
......@@ -313,10 +221,6 @@
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 {
color: var(--ide-text-color);
......@@ -367,18 +271,11 @@
color: var(--ide-btn-disabled-color) !important;
}
.md-previewer,
pre code,
.md table:not(.code) tbody,
.ide-empty-state {
.md table:not(.code) tbody {
background-color: var(--ide-border-color);
}
.ide-tree-header svg:focus,
.ide-tree-header svg:hover {
color: var(--ide-link-color);
}
.animation-container {
[class^='skeleton-line-'] {
background-color: var(--ide-animation-gradient-1);
......
app/assets/stylesheets/page_bundles/ide.scss
View file @ 0965ca8d
......@@ -28,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 {
......@@ -64,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;
......@@ -82,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) {
......@@ -121,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;
......@@ -136,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;
......@@ -167,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;
......@@ -186,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;
......@@ -206,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;
......@@ -281,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;
......@@ -309,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
}
......@@ -336,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;
......@@ -366,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 {
......@@ -390,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 {
......@@ -421,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,
......@@ -430,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 {
......@@ -491,6 +487,7 @@ $ide-commit-header-height: 48px;
height: 100vh;
align-items: center;
justify-content: center;
background-color: var(--ide-border-color, transparent);
}
.ide {
......@@ -507,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);
}
}
......@@ -515,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 {
......@@ -552,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;
......@@ -565,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: '';
......@@ -589,7 +581,7 @@ $ide-commit-header-height: 48px;
top: 0;
bottom: 0;
width: 1px;
background: $white;
background: var(--ide-highlight-background, $white);
}
&.is-right {
......@@ -612,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;
......@@ -626,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;
}
}
......@@ -689,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);
}
}
......@@ -705,7 +697,7 @@ $ide-commit-header-height: 48px;
}
button {
color: $gl-text-color;
color: var(--ide-text-color, $gl-text-color);
}
}
......@@ -721,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);
}
}
}
......@@ -801,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 {
......@@ -822,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;
......@@ -886,14 +878,14 @@ $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 0;
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);
}
.ide-right-sidebar-jobs-detail {
......@@ -908,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;
......@@ -939,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 {
......@@ -981,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);
}
}
}
......@@ -1030,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 {
......@@ -1046,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;
}
}
......@@ -1070,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;
}
......@@ -1087,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;
......@@ -1101,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);
}
}
......@@ -1113,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;
......@@ -1128,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-50);
box-shadow: inset 0 -1px var(--ide-border-color, $white-dark);
}
.ide-commit-list-changed-icon {
......@@ -1140,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);
}
}
app/assets/stylesheets/page_bundles/ide_themes/_dark.scss
View file @ 0965ca8d
......@@ -3,8 +3,10 @@
// -------
.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;
......
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