This is an automated email from the ASF dual-hosted git repository.
marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
The following commit(s) were added to refs/heads/main by this push:
new b32d205 Colors adjust vscode (#238)
b32d205 is described below
commit b32d205efcd321dfe4e6c776ea1818b6b65aa794
Author: Marat Gubaidullin <marat.gubaidul...@gmail.com>
AuthorDate: Mon Mar 28 13:00:51 2022 -0400
Colors adjust vscode (#238)
---
karavan-designer/src/designer/karavan.css | 47 ++++---
karavan-vscode/webview/index.css | 201 +++++++++++++++++++++---------
2 files changed, 162 insertions(+), 86 deletions(-)
diff --git a/karavan-designer/src/designer/karavan.css
b/karavan-designer/src/designer/karavan.css
index 217c17e..49f753a 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -199,10 +199,11 @@
.karavan .main-tabs .top-menu-item .count {
background: var(--pf-global--active-color--100);
- /*color: white;*/
+ color: white;
height: fit-content;
margin-top: auto;
margin-bottom: auto;
+ min-width: 0px;
}
.karavan .main-tabs .pf-c-tabs__link .pf-c-tabs__item-icon {
@@ -218,10 +219,6 @@
margin-right: 6px;
}
-.karavan .main-tabs .pf-c-tabs__item.pf-m-current {
- --pf-c-tabs__link--after--BorderColor:
var(--pf-global--primary-color--100);
-}
-
/*Properties*/
.karavan .properties {
border: 1px solid #eee;
@@ -308,6 +305,7 @@
.karavan .properties .input-group .pf-c-text-input-group__utilities {
align-items: end;
+ margin-top: auto;
}
.karavan .properties .chip .pf-c-button{
@@ -446,7 +444,6 @@
padding: 0;
margin: auto auto auto 6px;
background: transparent;
- color: var(--pf-global--primary-color--100);
}
.karavan .properties .add-button svg {
@@ -572,7 +569,7 @@
z-index: 101;
}
-.step-element .header-route .delete-button {
+.karavan .step-element .header-route .delete-button {
position: absolute;
top: 4px;
right: 4px;
@@ -586,7 +583,7 @@
visibility: hidden;
}
-.step-element .header .delete-button,
+.karavan .step-element .header .delete-button,
.element-builder .header .delete-button {
position: absolute;
top: 0px;
@@ -600,8 +597,8 @@
visibility: hidden;
}
-.step-element .header:hover .delete-button,
-.step-element .header-route:hover .delete-button,
+.karavan .step-element .header:hover .delete-button,
+.karavan .step-element .header-route:hover .delete-button,
.element-builder .header:hover .delete-button {
visibility: visible;
}
@@ -610,21 +607,21 @@
width: 350px !important;
}
-.step-element .header {
+.karavan .step-element .header {
height: 50px;
}
-.step-element-selected {
+.karavan .step-element-selected {
background-color: rgba(var(--pf-global--palette--blue-50), 1);
}
-.step-element .selected .header-icon {
+.karavan .step-element .selected .header-icon {
border-color: var(--pf-global--primary-color--100);
background-color: var(--pf-global--palette--blue-50);
border-width: 2px;
}
-.step-element .header .header-text {
+.karavan .step-element .header .header-text {
position: absolute;
top: 8px;
left: 0;
@@ -632,19 +629,19 @@
display: flex;
flex-direction: row;
}
-.step-element .header .spacer {
+.karavan .step-element .header .spacer {
width: 50%
}
-.step-element .header .text-bottom {
+.karavan .step-element .header .text-bottom {
background-color: rgba(255, 255, 255, 0.5);
}
-.step-element .header .text-right {
+.karavan .step-element .header .text-right {
padding-left: 17px;
width: 50%;
text-align:start;
}
-.step-element .header-icon {
+.karavan .step-element .header-icon {
border-color: var(--pf-global--Color--200);
border-style: solid;
border-radius: 30px;
@@ -658,7 +655,7 @@
align-items: center;
}
-.step-element .header .icon,
+.karavan .step-element .header .icon,
.element-builder .header .icon {
height: 20px;
width: auto;
@@ -670,7 +667,7 @@
user-select: none;
}
-.step-element .add-element-button {
+.karavan .step-element .add-element-button {
top: 5px;
left: 5px;
font-size: 15px;
@@ -685,17 +682,17 @@
position: absolute;
}
-.step-element .add-button-bottom {
+.karavan .step-element .add-button-bottom {
position: relative;
}
-.step-element .add-button-left {
+.karavan .step-element .add-button-left {
position: absolute;
top: 4px;
left: 4px;
}
-.step-element .add-button {
+.karavan .step-element .add-button {
font-size: 15px;
height: 15px;
line-height: 1;
@@ -732,8 +729,8 @@
.element-builder:hover .add-button,
-.step-element:hover .add-element-button,
-.step-element:hover .add-button {
+.karavan .step-element:hover .add-element-button,
+.karavan .step-element:hover .add-button {
visibility: visible;
}
diff --git a/karavan-vscode/webview/index.css b/karavan-vscode/webview/index.css
index ffe3029..8bec106 100644
--- a/karavan-vscode/webview/index.css
+++ b/karavan-vscode/webview/index.css
@@ -5,8 +5,36 @@ body,
height: 100%;
}
-.vscode-dark {
- --pf-global--primary-color--200: var(--pf-global--active-color--400)
!important;
+body, :root, #root, .karavan {
+ --pf-global--primary-color--100: var(--vscode-focusBorder) !important;
+ --pf-global--primary-color--200: var(--vscode-focusBorder) !important;
+ --pf-global--active-color--100: var(--vscode-focusBorder) !important;
+ --pf-global--link--Color: var(--vscode-focusBorder) !important;
+ --pf-c-tabs__link--after--BorderColor: var(--vscode-focusBorder) !important;
+ --pf-c-switch__input--checked__toggle--BackgroundColor:
var(--vscode-focusBorder) !important;
+ --pf-c-button--m-plain--Color: var(--vscode-focusBorder) !important;
+ --pf-c-button--m-secondary--Color: var(--vscode-focusBorder) !important;
+
+ --pf-global--Color--100: var(--vscode-foreground) !important;
+}
+
+.vscode-dark input {
+ color: var(--vscode-foreground) !important;
+}
+
+.vscode-dark .pf-c-button.pf-m-primary {
+ color: var(--vscode-foreground) !important;
+ background-color: var(--vscode-focusBorder) !important;
+}
+
+.vscode-dark .pf-c-button.pf-m-primary:hover {
+ color: var(--pf-c-button--m-primary--hover--Color);
+ background-color: var(--vscode-button-hoverBackground) !important;
+}
+
+.vscode-dark .pf-c-button.pf-m-secondary {
+ color: var(--vscode-focusBorder) !important;
+ background-color: var(--vscode-button-secondaryBackground) !important;
}
.vscode-dark .karavan {
@@ -18,19 +46,19 @@ body,
}
.vscode-dark .karavan .main-tabs {
- background-color: rgb(37, 37, 38);
+ background-color: var(--vscode-tab-inactiveBackground);
}
.vscode-dark .karavan .main-tabs .pf-c-tabs__list {
- background-color: rgb(37, 37, 38);
+ background-color: var(--vscode-tab-inactiveBackground);
}
.vscode-dark .karavan .main-tabs::before {
- border-color: rgb(37, 37, 38);
+ border-color: var(--vscode-tab-inactiveBackground);
}
.vscode-dark .karavan .main-tabs .pf-c-tabs__item.pf-m-current {
- background-color: rgb(30, 30, 30);
+ background-color: var(--vscode-tab-activeBackground);
}
.karavan .main-tabs .pf-c-tabs__item-text {
@@ -44,10 +72,25 @@ body,
flex-direction: column;
}
-.vscode-dark .karavan .progress-stepper{
+.vscode-dark .karavan .progress-stepper {
margin: auto;
}
+/* Tabs */
+.vscode-dark .pf-c-tabs__link::after {
+ border-color: var(--pf-global--active-color--100);
+}
+
+.vscode-dark .pf-c-tabs__scroll-button {
+ color: #cecece;
+ background-color: rgb(50, 50, 50);
+}
+
+.vscode-dark .pf-c-tabs__scroll-button::before {
+ border-color: var(--vscode-tab-inactiveBackground);
+}
+
+/* Designer */
.vscode-dark .karavan .dsl-page .dsl-page-columns,
.vscode-dark .karavan .rest-page .rest-page-columns,
.vscode-dark .karavan .beans-page .beans-page-columns,
@@ -82,81 +125,134 @@ body,
.vscode-dark .step-element .header .text-bottom {
background-color: rgb(50, 50, 50, 0.5);
- color: var(--pf-global--palette--black-400);
+ /* color: var(--pf-global--palette--black-400); */
}
+.vscode-dark .karavan .step-element .add-button {
+ color: var(--vscode-focusBorder);
+}
+
+/* Connections */
+.vscode-dark .karavan .dsl-page .graph .connections .arrow {
+ stroke: var(--pf-global--BorderColor--light-100);
+ fill: var(--pf-global--BorderColor--light-100);
+}
+
+.vscode-dark .karavan .dsl-page .graph .connections .path {
+ stroke: var(--pf-global--BorderColor--light-100);
+}
+
+.vscode-dark .karavan .dsl-page .graph .connections .path-incoming {
+ stroke: var(--pf-global--BorderColor--light-100);
+}
+.vscode-dark .karavan .dsl-page .graph .connections .circle-outgoing,
+.vscode-dark .karavan .dsl-page .graph .connections .circle-incoming {
+ stroke: var(--pf-global--Color--200);
+ fill: var(--pf-global--BorderColor--200);
+}
+
+/* Properties */
.vscode-dark .karavan .properties {
border: none;
- background: rgb(37, 37, 38);
+ background: var(--vscode-tab-inactiveBackground);
+ color: var(--vscode-input-foreground);
+}
+
+.vscode-dark .karavan .pf-c-switch {
+ --pf-c-switch__input--checked__toggle--BackgroundColor:
var(--vscode-focusBorder);
}
.vscode-dark .karavan .properties .text-field {
- background-color: rgb(50, 50, 50);
- border-color: rgb(50, 50, 50);
- color: var(--pf-global--Color--200);
+ background-color: var(--vscode-input-background);
+ border-color: var(--vscode-input-background);
+ color: var(--vscode-input-foreground);
}
.vscode-dark .pf-c-select {
- --pf-c-select__toggle--BackgroundColor: #3B3B3B;
- --pf-c-select__toggle--before--BorderTopColor: #3B3B3B;
- --pf-c-select__toggle--before--BorderRightColor: #3B3B3B;
- --pf-c-select__toggle--before--BorderBottomColor: #3B3B3B;
- --pf-c-select__toggle--before--BorderLeftColor: #3B3B3B;
+ --pf-c-select__toggle--BackgroundColor: var(--vscode-input-background);
+ --pf-c-select__toggle--before--BorderTopColor:
var(--vscode-input-background);
+ --pf-c-select__toggle--before--BorderRightColor:
var(--vscode-input-background);
+ --pf-c-select__toggle--before--BorderBottomColor:
var(--vscode-input-background);
+ --pf-c-select__toggle--before--BorderLeftColor:
var(--vscode-input-background);
--pf-c-select__toggle--Color: var(--pf-global--Color--200);
}
.vscode-dark .pf-c-select__menu {
- background-color: #3B3B3B;
+ background-color: var(--vscode-input-background);
box-shadow: var(--pf-c-select__menu--BoxShadow);
}
.vscode-dark .karavan .properties .pf-c-select__menu-item {
- color: var(--pf-global--Color--200);
+ color: var(--vscode-input-foreground);
}
.vscode-dark .karavan .properties .pf-c-select__menu-item:hover {
- color: black;
+ color: var(--vscode-input-foreground);
+ background-color: var(--vscode-focusBorder);
+}
+
+.vscode-dark .karavan .properties .pf-c-select__menu-item:hover
.pf-c-select__menu-item-description {
+ color: var(--vscode-input-foreground);
}
.vscode-dark .karavan .properties .pf-c-select__toggle-typeahead {
- color: var(--pf-global--Color--200);
+ color: var(--vscode-input-foreground);
}
-.vscode-dark .karavan .properties .pf-c-switch {
- --pf-c-switch__input--checked__toggle--BackgroundColor:
var(--pf-global--active-color--100);
+.vscode-dark .karavan .properties .pf-c-text-input-group {
+ background-color: var(--vscode-input-background);
+ border-color: var(--vscode-input-foreground);;
+ color: var(--vscode-input-foreground);
+ --pf-c-text-input-group__text--before--BorderColor: transparent;
+ --pf-c-text-input-group__text--after--BorderBottomColor: transparent;
}
-.vscode-dark .karavan .dsl-page .graph .connections .arrow {
- stroke: var(--pf-global--BorderColor--light-100);
- fill: var(--pf-global--BorderColor--light-100);
+.vscode-dark .karavan .properties .input-group .pf-c-chip-group .pf-c-chip {
+ --pf-c-chip--BackgroundColor: transparent;
+ --pf-c-chip__text--Color: var(--vscode-input-foreground);
+ --pf-c-chip--before--BorderColor: var(--vscode-input-foreground);
}
-.vscode-dark .karavan .dsl-page .graph .connections .path {
- stroke: var(--pf-global--BorderColor--light-100);
+.vscode-dark .karavan .properties .input-group .pf-c-chip-group li:last-child
.pf-c-chip {
+ --pf-c-chip--before--BorderColor: transparent;
}
-.vscode-dark .karavan .dsl-page .graph .connections .path-incoming {
- stroke: var(--pf-global--BorderColor--light-100);
+.vscode-dark .karavan .properties .pf-c-select__toggle-text {
+ color: var(--vscode-input-foreground);
}
-.vscode-dark .karavan .dsl-page .graph .connections .circle-outgoing,
-.vscode-dark .karavan .dsl-page .graph .connections .circle-incoming {
- stroke: var(--pf-global--Color--200);
- fill: var(--pf-global--BorderColor--200);
+
+.vscode-dark .karavan .properties .pf-c-expandable-section__toggle-icon {
+ color: var(--vscode-focusBorder);
}
-.vscode-dark .pf-c-tabs__link::after {
- border-color: var(--pf-global--active-color--100);
+/* Popover */
+.vscode-dark .pf-c-popover {
+ --pf-c-popover__content--BackgroundColor: var(--vscode-tab-activeBackground);
+ --pf-c-popover__arrow--BackgroundColor: var(--vscode-tab-activeBackground);
}
-.vscode-dark .pf-c-tabs__scroll-button {
- color: #cecece;
- background-color: rgb(50, 50, 50);
+.vscode-dark .pf-c-tooltip {
+ --pf-c-tooltip__content--BackgroundColor: var(--vscode-tab-activeBackground);
}
+/*
-.vscode-dark .pf-c-tabs__scroll-button::before {
- border-color: rgb(37, 37, 38);
+
+
+
+
+
+
+
+
+
+.vscode-dark .karavan .properties .pf-c-switch {
+ --pf-c-switch__input--checked__toggle--BackgroundColor:
var(--pf-global--active-color--100);
}
+
+
+
+
.vscode-dark .pf-c-tab-content .pf-c-card__header p {
color: #cecece;
}
@@ -165,14 +261,7 @@ body,
--pf-c-modal-box--BackgroundColor: #505050;
}
-.vscode-dark .pf-c-popover {
- --pf-c-popover__content--BackgroundColor: #505050;
- --pf-c-popover__arrow--BackgroundColor: #505050;
-}
-.vscode-dark .pf-c-tooltip {
- --pf-c-tooltip__content--BackgroundColor: #505050;
-}
.vscode-dark .step-element .add-button,
.vscode-dark .step-element .add-element-button,
@@ -186,19 +275,9 @@ body,
color: var(--pf-global--Color--200);
}
-.vscode-dark .karavan .properties .pf-c-text-input-group {
- background-color: rgb(50, 50, 50);
- border-color: #3B3B3B;
- color: var(--pf-global--Color--200);
- --pf-c-text-input-group__text--before--BorderColor: transparent;
- --pf-c-text-input-group__text--after--BorderBottomColor: transparent;
-}
-.vscode-dark .karavan .properties .input-group .pf-c-chip-group .pf-c-chip {
- --pf-c-chip--BackgroundColor: transparent;
- --pf-c-chip__text--Color: var(--pf-global--Color--200);
- --pf-c-chip--before--BorderColor: grey;
-}
+
+
.vscode-dark .karavan .pf-c-expandable-section__toggle,
.vscode-dark .karavan .pf-c-expandable-section__toggle-icon {
@@ -231,5 +310,5 @@ body,
.vscode-dark .karavan .add-dependency .pf-c-button.pf-m-secondary {
background-color: var(--pf-global--primary-color--200);
color: var(--pf-global--BackgroundColor--dark-200);
-}
+} */
