Welcome to mirror list, hosted at ThFree Co, Russian Federation.

gitlab.com/gitlab-org/gitlab-foss.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets')
-rw-r--r--app/assets/javascripts/alert_management/components/alert_details.vue18
-rw-r--r--app/assets/javascripts/alert_management/components/alert_management_list.vue10
-rw-r--r--app/assets/javascripts/alert_management/constants.js9
-rw-r--r--app/assets/javascripts/diffs/components/edit_button.vue36
-rw-r--r--app/assets/javascripts/monitoring/stores/actions.js15
-rw-r--r--app/assets/stylesheets/components/related_items_list.scss21
-rw-r--r--app/assets/stylesheets/framework/buttons.scss4
-rw-r--r--app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss (renamed from app/assets/stylesheets/page_bundles/themes/_dark.scss)205
-rw-r--r--app/assets/stylesheets/page_bundles/ide.scss3
-rw-r--r--app/assets/stylesheets/page_bundles/ide_themes/_dark.scss45
10 files changed, 206 insertions, 160 deletions
diff --git a/app/assets/javascripts/alert_management/components/alert_details.vue b/app/assets/javascripts/alert_management/components/alert_details.vue
index ef060713d3d..cee1988e3ec 100644
--- a/app/assets/javascripts/alert_management/components/alert_details.vue
+++ b/app/assets/javascripts/alert_management/components/alert_details.vue
@@ -1,5 +1,12 @@
<script>
-import { GlNewDropdown, GlNewDropdownItem, GlTabs, GlTab, GlButton } from '@gitlab/ui';
+import {
+ GlLoadingIcon,
+ GlNewDropdown,
+ GlNewDropdownItem,
+ GlTabs,
+ GlTab,
+ GlButton,
+} from '@gitlab/ui';
import { s__ } from '~/locale';
import query from '../graphql/queries/details.query.graphql';
import { fetchPolicies } from '~/lib/graphql';
@@ -16,6 +23,7 @@ export default {
overviewTitle: s__('AlertManagement|Overview'),
},
components: {
+ GlLoadingIcon,
GlNewDropdown,
GlNewDropdownItem,
GlTab,
@@ -55,10 +63,16 @@ export default {
data() {
return { alert: null };
},
+ computed: {
+ loading() {
+ return this.$apollo.queries.alert.loading;
+ },
+ },
};
</script>
<template>
<div>
+ <div v-if="loading"><gl-loading-icon size="lg" class="mt-3" /></div>
<div
v-if="alert"
class="gl-display-flex justify-content-end gl-border-b-1 gl-border-b-gray-200 gl-border-b-solid gl-p-4"
@@ -73,7 +87,7 @@ export default {
{{ s__('AlertManagement|Create issue') }}
</gl-button>
</div>
- <div class="gl-display-flex justify-content-end">
+ <div v-if="alert" class="gl-display-flex justify-content-end">
<gl-new-dropdown right>
<gl-new-dropdown-item
v-for="(label, field) in $options.statuses"
diff --git a/app/assets/javascripts/alert_management/components/alert_management_list.vue b/app/assets/javascripts/alert_management/components/alert_management_list.vue
index 7fe74eb1da8..a2efa6f0e0c 100644
--- a/app/assets/javascripts/alert_management/components/alert_management_list.vue
+++ b/app/assets/javascripts/alert_management/components/alert_management_list.vue
@@ -15,7 +15,7 @@ import {
import { s__ } from '~/locale';
import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
import getAlerts from '../graphql/queries/getAlerts.query.graphql';
-import { ALERTS_STATUS, ALERTS_STATUS_TABS } from '../constants';
+import { ALERTS_STATUS, ALERTS_STATUS_TABS, ALERTS_SEVERITY_LABELS } from '../constants';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
const tdClass = 'table-col d-flex d-md-table-cell align-items-center';
@@ -68,6 +68,7 @@ export default {
[ALERTS_STATUS.ACKNOWLEDGED]: s__('AlertManagement|Acknowledged'),
[ALERTS_STATUS.RESOLVED]: s__('AlertManagement|Resolved'),
},
+ severityLabels: ALERTS_SEVERITY_LABELS,
statusTabs: ALERTS_STATUS_TABS,
components: {
GlEmptyState,
@@ -185,14 +186,17 @@ export default {
stacked="md"
>
<template #cell(severity)="{ item }">
- <div class="d-inline-flex align-items-center justify-content-between">
+ <div
+ class="d-inline-flex align-items-center justify-content-between"
+ data-testid="severityField"
+ >
<gl-icon
class="mr-2"
:size="12"
:name="`severity-${item.severity.toLowerCase()}`"
:class="`icon-${item.severity.toLowerCase()}`"
/>
- {{ item.severity }}
+ {{ $options.severityLabels[item.severity] }}
</div>
</template>
diff --git a/app/assets/javascripts/alert_management/constants.js b/app/assets/javascripts/alert_management/constants.js
index c95a3c29f04..ddaf8242b68 100644
--- a/app/assets/javascripts/alert_management/constants.js
+++ b/app/assets/javascripts/alert_management/constants.js
@@ -1,5 +1,14 @@
import { s__ } from '~/locale';
+export const ALERTS_SEVERITY_LABELS = {
+ CRITICAL: s__('AlertManagement|Critical'),
+ HIGH: s__('AlertManagement|High'),
+ MEDIUM: s__('AlertManagement|Medium'),
+ LOW: s__('AlertManagement|Low'),
+ INFO: s__('AlertManagement|Info'),
+ UNKNOWN: s__('AlertManagement|Unknown'),
+};
+
export const ALERTS_STATUS = {
OPEN: 'open',
TRIGGERED: 'triggered',
diff --git a/app/assets/javascripts/diffs/components/edit_button.vue b/app/assets/javascripts/diffs/components/edit_button.vue
index 91e296f8572..21fdb19287d 100644
--- a/app/assets/javascripts/diffs/components/edit_button.vue
+++ b/app/assets/javascripts/diffs/components/edit_button.vue
@@ -1,5 +1,6 @@
<script>
import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui';
+import { __ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
export default {
@@ -13,7 +14,8 @@ export default {
props: {
editPath: {
type: String,
- required: true,
+ required: false,
+ default: '',
},
canCurrentUserFork: {
type: Boolean,
@@ -25,6 +27,18 @@ export default {
default: false,
},
},
+ computed: {
+ tooltipTitle() {
+ if (this.isDisabled) {
+ return __("Can't edit as source branch was deleted");
+ }
+
+ return __('Edit file');
+ },
+ isDisabled() {
+ return !this.editPath;
+ },
+ },
methods: {
handleEditClick(evt) {
if (this.canCurrentUserFork && !this.canModifyBlob) {
@@ -37,13 +51,15 @@ export default {
</script>
<template>
- <gl-deprecated-button
- v-gl-tooltip.top
- :href="editPath"
- :title="__('Edit file')"
- class="js-edit-blob"
- @click.native="handleEditClick"
- >
- <icon name="pencil" />
- </gl-deprecated-button>
+ <span v-gl-tooltip.top :title="tooltipTitle">
+ <gl-deprecated-button
+ :href="editPath"
+ :disabled="isDisabled"
+ :class="{ 'cursor-not-allowed': isDisabled }"
+ class="rounded-0 js-edit-blob"
+ @click.native="handleEditClick"
+ >
+ <icon name="pencil" />
+ </gl-deprecated-button>
+ </span>
</template>
diff --git a/app/assets/javascripts/monitoring/stores/actions.js b/app/assets/javascripts/monitoring/stores/actions.js
index 0134378868b..903105babeb 100644
--- a/app/assets/javascripts/monitoring/stores/actions.js
+++ b/app/assets/javascripts/monitoring/stores/actions.js
@@ -13,11 +13,7 @@ import trackDashboardLoad from '../monitoring_tracking_helper';
import getEnvironments from '../queries/getEnvironments.query.graphql';
import getAnnotations from '../queries/getAnnotations.query.graphql';
import statusCodes from '../../lib/utils/http_status';
-import {
- backOff,
- convertObjectPropsToCamelCase,
- isFeatureFlagEnabled,
-} from '../../lib/utils/common_utils';
+import { backOff, convertObjectPropsToCamelCase } from '../../lib/utils/common_utils';
import { s__, sprintf } from '../../locale';
import {
@@ -116,14 +112,7 @@ export const clearExpandedPanel = ({ commit }) => {
export const fetchData = ({ dispatch }) => {
dispatch('fetchEnvironmentsData');
dispatch('fetchDashboard');
- /**
- * Annotations data is not yet fetched. This will be
- * ready after the BE piece is implemented.
- * https://gitlab.com/gitlab-org/gitlab/-/issues/211330
- */
- if (isFeatureFlagEnabled('metricsDashboardAnnotations')) {
- dispatch('fetchAnnotations');
- }
+ dispatch('fetchAnnotations');
};
// Metrics dashboard
diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss
index e4466b44358..c9a8d5e5975 100644
--- a/app/assets/stylesheets/components/related_items_list.scss
+++ b/app/assets/stylesheets/components/related_items_list.scss
@@ -85,6 +85,10 @@ $item-weight-max-width: 48px;
white-space: nowrap;
}
+ .health-label-short {
+ display: none;
+ }
+
@include media-breakpoint-down(lg) {
.issue-count-badge {
padding: 0;
@@ -96,7 +100,6 @@ $item-weight-max-width: 48px;
.item-body,
.card-header {
.health-label-short {
- display: initial;
max-width: 0;
}
@@ -131,6 +134,12 @@ $item-weight-max-width: 48px;
}
}
+.card-header {
+ .health-label-short {
+ display: initial;
+ }
+}
+
.item-meta {
flex-basis: 100%;
font-size: $gl-font-size;
@@ -265,7 +274,6 @@ $item-weight-max-width: 48px;
max-width: 90%;
}
- .item-body,
.card-header {
.health-label-short {
max-width: 30px;
@@ -306,7 +314,6 @@ $item-weight-max-width: 48px;
}
}
- .item-body,
.card-header {
.health-label-short {
max-width: 60px;
@@ -326,7 +333,6 @@ $item-weight-max-width: 48px;
}
}
- .item-body,
.card-header {
.health-label-short {
max-width: 100px;
@@ -364,10 +370,6 @@ $item-weight-max-width: 48px;
}
}
- .health-label-short {
- display: initial;
- }
-
.health-label-long {
display: none;
}
@@ -411,8 +413,7 @@ $item-weight-max-width: 48px;
}
@media only screen and (min-width: 1500px) {
- .card-header,
- .item-body {
+ .card-header {
.health-label-short {
display: none;
}
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index ecf2097dc87..f47d0cab31f 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -507,6 +507,10 @@
opacity: 1 !important;
cursor: default !important;
+ &.cursor-not-allowed {
+ cursor: not-allowed !important;
+ }
+
i {
color: $gl-text-color-disabled !important;
}
diff --git a/app/assets/stylesheets/page_bundles/themes/_dark.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
index 1d316ca2e3f..86dffb4d7df 100644
--- a/app/assets/stylesheets/page_bundles/themes/_dark.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
@@ -1,40 +1,6 @@
.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) {
- color: $link-color;
+ color: var(--ide-link-color);
}
h1,
@@ -72,12 +38,12 @@
.ide-navigator-btn,
.ide-pipeline .top-bar,
.ide-pipeline .top-bar .controllers .controllers-buttons {
- color: $text-color;
+ color: var(--ide-text-color);
}
.drag-handle:hover,
.card-header .badge.badge-pill {
- background-color: $dropdown-hover-background;
+ background-color: var(--ide-dropdown-hover-background);
}
.dropdown-menu-toggle svg,
@@ -86,38 +52,34 @@
.file-row .file-row-icon svg,
.file-row:hover .file-row-icon svg,
.controllers-buttons svg {
- fill: $text-color;
+ fill: var(--ide-text-color);
}
.ide-pipeline svg {
- --svg-status-bg: $background;
+ --svg-status-bg: var(--ide-background);
}
.multi-file-tab-close:hover {
- background-color: $input-border;
+ background-color: var(--ide-input-border);
}
.ide-review-sub-header:hover {
- color: $input-border;
+ color: var(--ide-input-border);
}
.text-secondary {
- color: $text-color !important;
+ color: var(--ide-text-color) !important;
}
input[type='search']::placeholder,
input[type='text']::placeholder,
textarea::placeholder,
.dropdown-input .fa {
- color: $input-border;
+ color: var(--ide-input-border);
}
.ide-nav-form .input-icon {
- fill: $input-border;
- }
-
- .ide-staged-action-btn {
- background-color: transparent;
+ fill: var(--ide-input-border);
}
code,
@@ -139,32 +101,28 @@
.bs-callout,
.ide-pipeline .top-bar,
.ide-terminal .top-bar {
- background-color: $background;
- }
-
- pre code {
- background-color: inherit;
+ background-color: var(--ide-background);
}
.bs-callout {
- border-color: $dropdown-background;
+ border-color: var(--ide-dropdown-background);
code {
- background-color: $dropdown-background;
+ background-color: var(--ide-dropdown-background);
}
}
.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,
.multi-file-tabs li {
- background-color: $background-hover;
+ background-color: var(--ide-background-hover);
}
.common-note-form .md-area {
- border-color: $input-border;
+ border-color: var(--ide-input-border);
}
&,
@@ -180,7 +138,7 @@
.card,
.multi-file-commit-panel-success-message,
.ide-preview-header {
- background-color: $highlight-background;
+ background-color: var(--ide-highlight-background);
}
.multi-file-commit-panel {
@@ -204,7 +162,7 @@
.ide-job-item:not(:last-child),
.ide-terminal .top-bar,
.ide-pipeline .top-bar {
- border-color: $border-color;
+ border-color: var(--ide-border-color);
}
.md h1,
@@ -222,58 +180,58 @@
.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: var(--ide-background);
}
.multi-file-tabs li.active {
- border-bottom-color: $highlight-background;
+ border-bottom-color: var(--ide-highlight-background);
}
.multi-file-tabs,
.ide-commit-editor-header {
- box-shadow: inset 0 -1px $border-color;
+ box-shadow: inset 0 -1px var(--ide-border-color);
}
.ide-sidebar-link.active {
- color: $highlight-accent;
- box-shadow: inset 3px 0 $highlight-accent;
+ color: var(--ide-highlight-accent);
+ box-shadow: inset 3px 0 var(--ide-highlight-accent);
&.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 a.active {
- border-color: $highlight-accent;
- color: $text-color;
+ border-color: var(--ide-highlight-accent);
+ color: var(--ide-text-color);
}
.avatar-container {
&,
.avatar {
- color: $text-color;
- background-color: $highlight-background;
- border-color: $highlight-background;
+ color: var(--ide-text-color);
+ background-color: var(--ide-highlight-background);
+ border-color: var(--ide-highlight-background);
}
}
.ide-status-bar {
- background-color: $footer-background;
+ background-color: var(--ide-footer-background);
}
input[type='text'],
input[type='search'],
.filtered-search-box {
- border-color: $input-border;
- background: $input-background !important;
+ border-color: var(--ide-input-border);
+ background: var(--ide-input-background) !important;
}
input[type='text'],
input[type='search'],
.filtered-search-box,
textarea {
- color: $input-color !important;
+ color: var(--ide-input-color) !important;
}
.filtered-search-box input[type='search'] {
@@ -282,46 +240,49 @@
.filtered-search-token .value-container,
.filtered-search-term .value-container {
- background-color: $dropdown-hover-background;
-
- color: $text-color;
+ background-color: var(--ide-dropdown-hover-background);
+ color: var(--ide-text-color);
&:hover {
- background-color: $input-border;
+ background-color: var(--ide-input-border);
}
}
.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 {
- border-width: 2px;
- padding: 5px 9px;
+ border-width: var(--ide-btn-hover-border-width);
+ padding: calc-btn-hover-padding(6px) calc-btn-hover-padding(10px);
}
.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 {
- padding: 5px 0;
+ padding: calc-btn-hover-padding(6px) 0;
}
.btn-inverted,
.btn-default,
.dropdown,
.dropdown-menu-toggle {
- background-color: $input-background !important;
- color: $input-color !important;
- border-color: $btn-default-border;
+ background-color: var(--ide-input-background) !important;
+ color: var(--ide-input-color) !important;
+ border-color: var(--ide-btn-default-border);
}
.btn-inverted,
.btn-default {
&:hover,
&:focus {
- border-color: $btn-default-hover-border !important;
+ border-color: var(--ide-btn-default-hover-border) !important;
}
}
@@ -329,35 +290,35 @@
.dropdown-menu-toggle {
&:hover,
&:focus {
- background-color: $gray-900 !important;
- border-color: $gray-200 !important;
+ background-color: var(--ide-dropdown-btn-hover-background) !important;
+ border-color: var(--ide-dropdown-btn-hover-border) !important;
}
}
.dropdown-menu {
- color: $text-color;
- border-color: $background;
- background-color: $dropdown-background;
+ color: var(--ide-text-color);
+ border-color: var(--ide-background);
+ background-color: var(--ide-dropdown-background);
.divider,
.nav-links:not(.quick-links) {
- background-color: $dropdown-hover-background;
- border-color: $dropdown-hover-background;
+ background-color: var(--ide-dropdown-hover-background);
+ border-color: var(--ide-dropdown-hover-background);
}
.nav-links li a.active {
- border-color: $highlight-accent;
+ border-color: var(--ide-highlight-accent);
}
.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 {
- color: $text-color;
+ color: var(--ide-text-color);
&.active {
- color: $text-color;
+ color: var(--ide-text-color);
}
}
@@ -366,73 +327,75 @@
li button:not(.disable-hover):hover,
li button:not(.disable-hover):focus,
li button.is-focused {
- background-color: $dropdown-hover-background;
- color: $text-color;
+ background-color: var(--ide-dropdown-hover-background);
+ color: var(--ide-text-color);
}
}
.dropdown-title,
.dropdown-input {
- border-color: $dropdown-hover-background !important;
+ border-color: var(--ide-dropdown-hover-background) !important;
}
- .btn-primary {
- background-color: $btn-primary-background;
- border-color: $btn-primary-border !important;
+ .btn-primary,
+ .btn-info {
+ background-color: var(--ide-btn-primary-background);
+ border-color: var(--ide-btn-primary-border) !important;
&:hover,
&:focus {
- border-color: $btn-primary-hover-border !important;
+ border-color: var(--ide-btn-primary-hover-border) !important;
}
}
.btn-success {
- background-color: $btn-success-background;
- border-color: $btn-success-border !important;
+ background-color: var(--ide-btn-success-background);
+ border-color: var(--ide-btn-success-border) !important;
&:hover,
&:focus {
- border-color: $btn-success-hover-border !important;
+ border-color: var(--ide-btn-success-hover-border) !important;
}
}
.btn[disabled] {
- background: $btn-default-background !important;
- border: 1px solid $btn-disabled-border !important;
- color: $btn-disabled-color !important;
+ background: var(--ide-btn-default-background) !important;
+ border: 1px solid var(--ide-btn-disabled-border) !important;
+ color: var(--ide-btn-disabled-color) !important;
}
.md-previewer,
+ pre code,
.md table:not(.code) tbody,
.ide-empty-state {
- background-color: $border-color;
+ background-color: var(--ide-border-color);
}
.ide-tree-header svg:focus,
.ide-tree-header svg:hover {
- color: $blue-600;
+ color: var(--ide-link-color);
}
.animation-container {
[class^='skeleton-line-'] {
- background-color: $gray-800;
+ background-color: var(--ide-animation-gradient-1);
&::after {
background-image: linear-gradient(to right,
- $gray-800 0%,
- $gray-700 20%,
- $gray-800 40%,
- $gray-800 100%);
+ var(--ide-animation-gradient-1) 0%,
+ var(--ide-animation-gradient-2) 20%,
+ var(--ide-animation-gradient-1) 40%,
+ var(--ide-animation-gradient-1) 100%);
}
}
}
.idiff.addition {
- background-color: $diff-insert;
+ background-color: var(--ide-diff-insert);
}
.idiff.deletion {
- background-color: $diff-remove;
+ background-color: var(--ide-diff-remove);
}
}
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index d0660422f7e..cb41d960307 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -2,8 +2,9 @@
@import 'framework/mixins';
@import './ide_mixins';
@import './ide_monaco_overrides';
+@import './ide_theme_overrides';
-@import './themes/dark';
+@import './ide_themes/dark';
$search-list-icon-width: 18px;
$ide-activity-bar-width: 60px;
diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss
new file mode 100644
index 00000000000..809abc42a69
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss
@@ -0,0 +1,45 @@
+.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};
+}