Skip to content
Snippets Groups Projects

Dark theme for the Web IDE right sidebar

Merged Himanshu Kapoor requested to merge 213826-dark-theme-right-sidebar into master
All threads resolved!
5 files
+ 66
17
Compare changes
  • Side-by-side
  • Inline
Files
5
@@ -27,10 +27,13 @@
@@ -27,10 +27,13 @@
$btn-disabled-border: rgba(223, 223, 223, 0.24);
$btn-disabled-border: rgba(223, 223, 223, 0.24);
$btn-disabled-color: rgba(145, 145, 145, 0.48);
$btn-disabled-color: rgba(145, 145, 145, 0.48);
 
$dropdown-background: #404040;
 
$dropdown-hover-background: #525252;
 
$diff-insert: rgba(155, 185, 85, 0.2);
$diff-insert: rgba(155, 185, 85, 0.2);
$diff-remove: rgba(255, 0, 0, 0.2);
$diff-remove: rgba(255, 0, 0, 0.2);
a {
a:not(.btn) {
color: $link-color;
color: $link-color;
}
}
@@ -54,22 +57,38 @@
@@ -54,22 +57,38 @@
textarea,
textarea,
.md-area.is-focused,
.md-area.is-focused,
.ide-entry-dropdown-toggle,
.ide-entry-dropdown-toggle,
.nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover {
.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,
 
.ide-navigator-button,
 
.bs-callout {
color: $text-color;
color: $text-color;
}
}
 
.drag-handle:hover,
 
.card-header .badge.badge-pill {
 
background-color: $dropdown-hover-background;
 
}
 
.modal-body {
.modal-body {
color: $gl-text-color;
color: $gl-text-color;
}
}
.dropdown-menu-toggle svg,
.dropdown-menu-toggle svg,
.dropdown-menu-toggle svg:hover,
.dropdown-menu-toggle svg:hover,
.ide-tree-header svg,
.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 {
fill: $text-color;
fill: $text-color;
}
}
 
.ide-pipeline svg {
 
--svg-status-bg: transparent;
 
}
 
.multi-file-tab-close:hover {
.multi-file-tab-close:hover {
background-color: $input-border;
background-color: $input-border;
}
}
@@ -104,14 +123,34 @@
@@ -104,14 +123,34 @@
.ide-commit-editor-header,
.ide-commit-editor-header,
.ide-file-templates,
.ide-file-templates,
.ide-entry-dropdown-toggle,
.ide-entry-dropdown-toggle,
.ide-staged-action-btn {
.ide-staged-action-btn,
 
.badge.badge-pill,
 
.card-header,
 
.bs-callout,
 
.ide-terminal .top-bar {
background-color: $background;
background-color: $background;
}
}
 
.ide-terminal .top-bar {
 
margin-right: -1px; // collapse right margin of top bar and left margin of the right sidebar icons
 
}
 
pre code {
pre code {
background-color: inherit;
background-color: inherit;
}
}
 
.bs-callout {
 
border-color: $dropdown-background;
 
 
code {
 
background-color: $dropdown-background;
 
}
 
}
 
 
.nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover {
 
border-color: $dropdown-hover-background;
 
}
 
.ide-sidebar-link:hover {
.ide-sidebar-link:hover {
background-color: $background-hover;
background-color: $background-hover;
}
}
@@ -129,7 +168,10 @@
@@ -129,7 +168,10 @@
.ide-sidebar-link.active::after,
.ide-sidebar-link.active::after,
.ide-right-sidebar .multi-file-commit-panel-inner,
.ide-right-sidebar .multi-file-commit-panel-inner,
.common-note-form .md-area,
.common-note-form .md-area,
.ide-commit-message-field {
.ide-commit-message-field,
 
.card,
 
.multi-file-commit-panel-success-message,
 
.ide-preview-header {
background-color: $highlight-background;
background-color: $highlight-background;
}
}
@@ -148,7 +190,11 @@
@@ -148,7 +190,11 @@
.multi-file-tabs li,
.multi-file-tabs li,
.ide-status-bar,
.ide-status-bar,
.ide-commit-editor-header,
.ide-commit-editor-header,
.ide-file-templates {
.ide-file-templates,
 
.card,
 
.card-header,
 
.ide-job-item:not(:last-child),
 
.ide-terminal .top-bar {
border-color: $border-color;
border-color: $border-color;
}
}
@@ -164,7 +210,9 @@
@@ -164,7 +210,9 @@
.multi-file-commit-form > form,
.multi-file-commit-form > form,
.multi-file-commit-form hr,
.multi-file-commit-form hr,
.ide-commit-list-container.is-first,
.ide-commit-list-container.is-first,
.multi-file-commit-form .nav-links:not(.quick-links) {
.multi-file-commit-form .nav-links:not(.quick-links),
 
.ide-pipeline-list .nav-links:not(.quick-links),
 
.ide-preview-header {
border-color: $background;
border-color: $background;
}
}
@@ -186,7 +234,8 @@
@@ -186,7 +234,8 @@
}
}
}
}
.nav-links li.active a {
.nav-links li.active a,
 
.nav-links li a.active {
border-color: $highlight-accent;
border-color: $highlight-accent;
color: $text-color;
color: $text-color;
}
}
@@ -206,7 +255,7 @@
@@ -206,7 +255,7 @@
input[type='text'] {
input[type='text'] {
border-color: $input-border;
border-color: $input-border;
background: $input-background;
background: $input-background !important;
}
}
input[type='text'],
input[type='text'],
@@ -218,16 +267,16 @@
@@ -218,16 +267,16 @@
background: $gray-800;
background: $gray-800;
}
}
.btn:hover {
.btn:not([disabled]):hover {
border-width: 2px;
border-width: 2px;
padding: 5px 9px;
padding: 5px 9px;
}
}
.btn.btn-sm:hover {
.btn:not([disabled]).btn-sm:hover {
padding: 3px 9px;
padding: 3px 9px;
}
}
.btn.btn-block:hover {
.btn:not([disabled]).btn-block:hover {
padding: 5px 0;
padding: 5px 0;
}
}
Loading