Skip to content

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

Migrate IDE dark theme to use CSS variables 

Generalize the _dark.scss file to use css variables so that future
themes only need to change the variables.
parent a1484cb6
Show whitespace changes
Inline Side-by-side
Showing with 131 additions and 122 deletions
app/assets/stylesheets/page_bundles/themes/_dark.scss → app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
View file @ e17fe859
.ide.theme-dark { .ide.theme-dark {
$border-color: #1d1f21;
$highlight-accent: #fff;
$text-color: #ccc;
$background: #333;
$background-hover: #2d2d2d;
$highlight-background: #252526;
$link-color: #428fdc;
$footer-background: #060606;
$input-border: #868686;
$input-background: transparent;
$input-color: $highlight-accent;
$btn-default-background: transparent;
$btn-default-border: #bfbfbf;
$btn-default-hover-border: #d8d8d8;
$btn-primary-background: #1068bf;
$btn-primary-border: #428fdc;
$btn-primary-hover-border: #63a6e9;
$btn-success-background: #217645;
$btn-success-border: #108548;
$btn-success-hover-border: #2da160;
$btn-disabled-border: rgba(223, 223, 223, 0.24);
$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-remove: rgba(255, 0, 0, 0.2);
a:not(.btn) { a:not(.btn) {
color: $link-color; color: var(--ide-link-color);
} }
h1, h1,
...@@ -72,12 +38,12 @@ ...@@ -72,12 +38,12 @@
.ide-navigator-btn, .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: $text-color; color: var(--ide-text-color);
} }
.drag-handle:hover, .drag-handle:hover,
.card-header .badge.badge-pill { .card-header .badge.badge-pill {
background-color: $dropdown-hover-background; background-color: var(--ide-dropdown-hover-background);
} }
.dropdown-menu-toggle svg, .dropdown-menu-toggle svg,
...@@ -86,38 +52,34 @@ ...@@ -86,38 +52,34 @@
.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: $text-color; fill: var(--ide-text-color);
} }
.ide-pipeline svg { .ide-pipeline svg {
--svg-status-bg: $background; --svg-status-bg: var(--ide-background);
} }
.multi-file-tab-close:hover { .multi-file-tab-close:hover {
background-color: $input-border; background-color: var(--ide-input-border);
} }
.ide-review-sub-header:hover { .ide-review-sub-header:hover {
color: $input-border; color: var(--ide-input-border);
} }
.text-secondary { .text-secondary {
color: $text-color !important; color: var(--ide-text-color) !important;
} }
input[type='search']::placeholder, input[type='search']::placeholder,
input[type='text']::placeholder, input[type='text']::placeholder,
textarea::placeholder, textarea::placeholder,
.dropdown-input .fa { .dropdown-input .fa {
color: $input-border; color: var(--ide-input-border);
} }
.ide-nav-form .input-icon { .ide-nav-form .input-icon {
fill: $input-border; fill: var(--ide-input-border);
}
.ide-staged-action-btn {
background-color: transparent;
} }
code, code,
...@@ -139,32 +101,28 @@ ...@@ -139,32 +101,28 @@
.bs-callout, .bs-callout,
.ide-pipeline .top-bar, .ide-pipeline .top-bar,
.ide-terminal .top-bar { .ide-terminal .top-bar {
background-color: $background; background-color: var(--ide-background);
}
pre code {
background-color: inherit;
} }
.bs-callout { .bs-callout {
border-color: $dropdown-background; border-color: var(--ide-dropdown-background);
code { code {
background-color: $dropdown-background; background-color: var(--ide-dropdown-background);
} }
} }
.nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover { .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover {
border-color: $dropdown-hover-background; border-color: var(--ide-dropdown-hover-background);
} }
.ide-sidebar-link:hover, .ide-sidebar-link:hover,
.multi-file-tabs li { .multi-file-tabs li {
background-color: $background-hover; background-color: var(--ide-background-hover);
} }
.common-note-form .md-area { .common-note-form .md-area {
border-color: $input-border; border-color: var(--ide-input-border);
} }
&, &,
...@@ -180,7 +138,7 @@ ...@@ -180,7 +138,7 @@
.card, .card,
.multi-file-commit-panel-success-message, .multi-file-commit-panel-success-message,
.ide-preview-header { .ide-preview-header {
background-color: $highlight-background; background-color: var(--ide-highlight-background);
} }
.multi-file-commit-panel { .multi-file-commit-panel {
...@@ -204,7 +162,7 @@ ...@@ -204,7 +162,7 @@
.ide-job-item:not(:last-child), .ide-job-item:not(:last-child),
.ide-terminal .top-bar, .ide-terminal .top-bar,
.ide-pipeline .top-bar { .ide-pipeline .top-bar {
border-color: $border-color; border-color: var(--ide-border-color);
} }
.md h1, .md h1,
...@@ -222,58 +180,58 @@ ...@@ -222,58 +180,58 @@
.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-pipeline-list .nav-links:not(.quick-links),
.ide-preview-header { .ide-preview-header {
border-color: $background; border-color: var(--ide-background);
} }
.multi-file-tabs li.active { .multi-file-tabs li.active {
border-bottom-color: $highlight-background; border-bottom-color: var(--ide-highlight-background);
} }
.multi-file-tabs, .multi-file-tabs,
.ide-commit-editor-header { .ide-commit-editor-header {
box-shadow: inset 0 -1px $border-color; box-shadow: inset 0 -1px var(--ide-border-color);
} }
.ide-sidebar-link.active { .ide-sidebar-link.active {
color: $highlight-accent; color: var(--ide-highlight-accent);
box-shadow: inset 3px 0 $highlight-accent; box-shadow: inset 3px 0 var(--ide-highlight-accent);
&.is-right { &.is-right {
box-shadow: inset -3px 0 $highlight-accent; box-shadow: inset -3px 0 var(--ide-highlight-accent);
} }
} }
.nav-links li.active a, .nav-links li.active a,
.nav-links li a.active { .nav-links li a.active {
border-color: $highlight-accent; border-color: var(--ide-highlight-accent);
color: $text-color; color: var(--ide-text-color);
} }
.avatar-container { .avatar-container {
&, &,
.avatar { .avatar {
color: $text-color; color: var(--ide-text-color);
background-color: $highlight-background; background-color: var(--ide-highlight-background);
border-color: $highlight-background; border-color: var(--ide-highlight-background);
} }
} }
.ide-status-bar { .ide-status-bar {
background-color: $footer-background; background-color: var(--ide-footer-background);
} }
input[type='text'], input[type='text'],
input[type='search'], input[type='search'],
.filtered-search-box { .filtered-search-box {
border-color: $input-border; border-color: var(--ide-input-border);
background: $input-background !important; background: var(--ide-input-background) !important;
} }
input[type='text'], input[type='text'],
input[type='search'], input[type='search'],
.filtered-search-box, .filtered-search-box,
textarea { textarea {
color: $input-color !important; color: var(--ide-input-color) !important;
} }
.filtered-search-box input[type='search'] { .filtered-search-box input[type='search'] {
...@@ -282,46 +240,49 @@ ...@@ -282,46 +240,49 @@
.filtered-search-token .value-container, .filtered-search-token .value-container,
.filtered-search-term .value-container { .filtered-search-term .value-container {
background-color: $dropdown-hover-background; background-color: var(--ide-dropdown-hover-background);
color: var(--ide-text-color);
color: $text-color;
&:hover { &:hover {
background-color: $input-border; background-color: var(--ide-input-border);
} }
} }
.ide-entry-dropdown-toggle:hover { .ide-entry-dropdown-toggle:hover {
background: $gray-800; 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));
} }
.btn:not(.btn-link):not([disabled]):hover { .btn:not(.btn-link):not([disabled]):hover {
border-width: 2px; border-width: var(--ide-btn-hover-border-width);
padding: 5px 9px; padding: calc-btn-hover-padding(6px) calc-btn-hover-padding(10px);
} }
.btn:not([disabled]).btn-sm:hover { .btn:not([disabled]).btn-sm:hover {
padding: 3px 9px; padding: calc-btn-hover-padding(4px) calc-btn-hover-padding(10px);
} }
.btn:not([disabled]).btn-block:hover { .btn:not([disabled]).btn-block:hover {
padding: 5px 0; padding: calc-btn-hover-padding(6px) 0;
} }
.btn-inverted, .btn-inverted,
.btn-default, .btn-default,
.dropdown, .dropdown,
.dropdown-menu-toggle { .dropdown-menu-toggle {
background-color: $input-background !important; background-color: var(--ide-input-background) !important;
color: $input-color !important; color: var(--ide-input-color) !important;
border-color: $btn-default-border; border-color: var(--ide-btn-default-border);
} }
.btn-inverted, .btn-inverted,
.btn-default { .btn-default {
&:hover, &:hover,
&:focus { &:focus {
border-color: $btn-default-hover-border !important; border-color: var(--ide-btn-default-hover-border) !important;
} }
} }
...@@ -329,35 +290,35 @@ ...@@ -329,35 +290,35 @@
.dropdown-menu-toggle { .dropdown-menu-toggle {
&:hover, &:hover,
&:focus { &:focus {
background-color: $gray-900 !important; background-color: var(--ide-dropdown-btn-hover-background) !important;
border-color: $gray-200 !important; border-color: var(--ide-dropdown-btn-hover-border) !important;
} }
} }
.dropdown-menu { .dropdown-menu {
color: $text-color; color: var(--ide-text-color);
border-color: $background; border-color: var(--ide-background);
background-color: $dropdown-background; background-color: var(--ide-dropdown-background);
.divider, .divider,
.nav-links:not(.quick-links) { .nav-links:not(.quick-links) {
background-color: $dropdown-hover-background; background-color: var(--ide-dropdown-hover-background);
border-color: $dropdown-hover-background; border-color: var(--ide-dropdown-hover-background);
} }
.nav-links li a.active { .nav-links li a.active {
border-color: $highlight-accent; border-color: var(--ide-highlight-accent);
} }
.ide-nav-form .nav-links li a:not(.active) { .ide-nav-form .nav-links li a:not(.active) {
background-color: $dropdown-background; 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: $text-color; color: var(--ide-text-color);
&.active { &.active {
color: $text-color; color: var(--ide-text-color);
} }
} }
...@@ -366,73 +327,75 @@ ...@@ -366,73 +327,75 @@
li button:not(.disable-hover):hover, li button:not(.disable-hover):hover,
li button:not(.disable-hover):focus, li button:not(.disable-hover):focus,
li button.is-focused { li button.is-focused {
background-color: $dropdown-hover-background; background-color: var(--ide-dropdown-hover-background);
color: $text-color; color: var(--ide-text-color);
} }
} }
.dropdown-title, .dropdown-title,
.dropdown-input { .dropdown-input {
border-color: $dropdown-hover-background !important; border-color: var(--ide-dropdown-hover-background) !important;
} }
.btn-primary { .btn-primary,
background-color: $btn-primary-background; .btn-info {
border-color: $btn-primary-border !important; background-color: var(--ide-btn-primary-background);
border-color: var(--ide-btn-primary-border) !important;
&:hover, &:hover,
&:focus { &:focus {
border-color: $btn-primary-hover-border !important; border-color: var(--ide-btn-primary-hover-border) !important;
} }
} }
.btn-success { .btn-success {
background-color: $btn-success-background; background-color: var(--ide-btn-success-background);
border-color: $btn-success-border !important; border-color: var(--ide-btn-success-border) !important;
&:hover, &:hover,
&:focus { &:focus {
border-color: $btn-success-hover-border !important; border-color: var(--ide-btn-success-hover-border) !important;
} }
} }
.btn[disabled] { .btn[disabled] {
background: $btn-default-background !important; background: var(--ide-btn-default-background) !important;
border: 1px solid $btn-disabled-border !important; border: 1px solid var(--ide-btn-disabled-border) !important;
color: $btn-disabled-color !important; color: var(--ide-btn-disabled-color) !important;
} }
.md-previewer, .md-previewer,
pre code,
.md table:not(.code) tbody, .md table:not(.code) tbody,
.ide-empty-state { .ide-empty-state {
background-color: $border-color; background-color: var(--ide-border-color);
} }
.ide-tree-header svg:focus, .ide-tree-header svg:focus,
.ide-tree-header svg:hover { .ide-tree-header svg:hover {
color: $blue-600; color: var(--ide-link-color);
} }
.animation-container { .animation-container {
[class^='skeleton-line-'] { [class^='skeleton-line-'] {
background-color: $gray-800; background-color: var(--ide-animation-gradient-1);
&::after { &::after {
background-image: linear-gradient(to right, background-image: linear-gradient(to right,
$gray-800 0%, var(--ide-animation-gradient-1) 0%,
$gray-700 20%, var(--ide-animation-gradient-2) 20%,
$gray-800 40%, var(--ide-animation-gradient-1) 40%,
$gray-800 100%); var(--ide-animation-gradient-1) 100%);
} }
} }
} }
.idiff.addition { .idiff.addition {
background-color: $diff-insert; background-color: var(--ide-diff-insert);
} }
.idiff.deletion { .idiff.deletion {
background-color: $diff-remove; background-color: var(--ide-diff-remove);
} }
} }
......
app/assets/stylesheets/page_bundles/ide.scss
View file @ e17fe859
...@@ -2,8 +2,9 @@ ...@@ -2,8 +2,9 @@
@import 'framework/mixins'; @import 'framework/mixins';
@import './ide_mixins'; @import './ide_mixins';
@import './ide_monaco_overrides'; @import './ide_monaco_overrides';
@import './ide_theme_overrides';
@import './themes/dark'; @import './ide_themes/dark';
$search-list-icon-width: 18px; $search-list-icon-width: 18px;
$ide-activity-bar-width: 60px; $ide-activity-bar-width: 60px;
......
app/assets/stylesheets/page_bundles/ide_themes/_dark.scss 0 → 100644
View file @ e17fe859
.ide.theme-dark {
--ide-border-color: #1d1f21;
--ide-highlight-accent: #fff;
--ide-text-color: #ccc;
--ide-background: #333;
--ide-background-hover: #2d2d2d;
--ide-highlight-background: #252526;
--ide-link-color: #428fdc;
--ide-footer-background: #060606;
--ide-input-border: #868686;
--ide-input-background: transparent;
--ide-input-color: #fff;
--ide-btn-default-background: transparent;
--ide-btn-default-border: #bfbfbf;
--ide-btn-default-hover-border: #d8d8d8;
--ide-btn-primary-background: #1068bf;
--ide-btn-primary-border: #428fdc;
--ide-btn-primary-hover-border: #63a6e9;
--ide-btn-success-background: #217645;
--ide-btn-success-border: #108548;
--ide-btn-success-hover-border: #2da160;
--ide-btn-disabled-border: rgba(223, 223, 223, 0.24);
--ide-btn-disabled-color: rgba(145, 145, 145, 0.48);
--ide-btn-hover-border-width: 2px;
--ide-dropdown-background: #404040;
--ide-dropdown-hover-background: #525252;
--ide-dropdown-btn-hover-border: #{$gray-200};
--ide-dropdown-btn-hover-background: #{$gray-900};
--ide-file-row-btn-hover-background: #{$gray-800};
--ide-diff-insert: rgba(155, 185, 85, 0.2);
--ide-diff-remove: rgba(255, 0, 0, 0.2);
--ide-animation-gradient-1: #{$gray-800};
--ide-animation-gradient-2: #{$gray-700};
}
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