karavan-vscode/webview/index.css

/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
 
html,
body,
#root,
.App {
  height: 100%;
}

:root {
  --pf-v5-c-tooltip__content--FontSize: 8px;
}

body, :root, #root, .karavan {
  --pf-v5-global--primary-color--100: var(--vscode-focusBorder) !important;
  --pf-v5-global--primary-color--200: var(--vscode-focusBorder) !important;
  --pf-v5-global--active-color--100: var(--vscode-focusBorder) !important;
  --pf-v5-global--link--Color: var(--vscode-focusBorder) !important;
  --pf-v5-c-tabs__link--after--BorderColor: var(--vscode-focusBorder) !important;
  --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--vscode-focusBorder) !important;
  --pf-v5-c-button--m-plain--Color: var(--vscode-focusBorder) !important;
  --pf-v5-c-button--m-secondary--Color: var(--vscode-focusBorder) !important;

  --pf-v5-global--Color--100: var(--vscode-foreground) !important;

  /* --step-border-color: var(--pf-v5-global--active-color--200); */
  --step-border-color-selected:var(--vscode-focusBorder);

  padding: 0;
}

.karavan .properties .pf-v5-c-form-control > :is(input, select, textarea):focus {
  outline-color: var(--vscode-focusBorder);
}

.vscode-dark .pf-v5-c-page {
  background-color:  var(--vscode-editor-background);
}

.karavan .pf-v5-c-drawer__content {
  background-color: transparent;
}

.vscode-dark input {
  color: var(--vscode-foreground) !important;
}

.vscode-dark .pf-v5-c-button.pf-m-primary {
  color: var(--vscode-foreground) !important;
  background-color: var(--vscode-focusBorder) !important;
}

.vscode-dark .pf-v5-c-button.pf-m-primary:hover {
  color: var(--pf-v5-c-button--m-primary--hover--Color);
  background-color: var(--vscode-button-hoverBackground)  !important;
}

.vscode-dark .pf-v5-c-button.pf-m-secondary {
  color: var(--vscode-focusBorder) !important;
  background-color: var(--vscode-button-secondaryBackground) !important;
}

.vscode-dark .karavan {
  color: var(--pf-v5-global--Color--200);
}

.vscode-dark .karavan .top-icon {
  fill: var(--pf-v5-global--Color--200);
}

.vscode-dark .karavan .page .main-tabs-wrapper {
  background-color: var(--vscode-tab-inactiveBackground);
}

.vscode-dark .karavan .page .main-tabs-wrapper::before {
  border-bottom-color: transparent;
}

.vscode-dark .karavan .main-tabs {
  background-color: var(--vscode-tab-inactiveBackground);
}

.vscode-dark .karavan .main-tabs .pf-v5-c-tabs__list {
    background-color: var(--vscode-tab-inactiveBackground);
}

.vscode-dark .karavan .main-tabs::before {
  border-color: var(--vscode-tab-inactiveBackground);
}

.vscode-dark .karavan .main-tabs .pf-v5-c-tabs__item.pf-m-current {
  background-color: var(--vscode-tab-activeBackground);
}

.karavan .main-tabs .pf-v5-c-tabs__item-text {
  color: var(--pf-v5-global--palette--black-400);
}

.karavan .loading-page {
  background-color:  transparent;
  height: 100%;
  display: flex;
  margin: auto;
  justify-content: center;
  flex-direction: column;
}

/* .vscode-light .karavan .loading-page {
  background-color:  transparent;
}
.vscode-dark .karavan .loading-page {
  background-color: var(--vscode-editor-background);
} */

/* Tabs */
.vscode-dark .pf-v5-c-tabs__link::after {
  border-color: var(--pf-v5-global--active-color--100);
}

.vscode-dark .pf-v5-c-tabs__scroll-button {
  color: #cecece;
  background-color: var(--vscode-editor-background);
}

.vscode-dark .pf-v5-c-tabs__scroll-button::before {
  border-color: var(--vscode-tab-inactiveBackground);
}

/* Designer */
.vscode-dark .karavan .dsl-page .dsl-page-columns,
.vscode-dark .karavan .rest-designer,
.vscode-dark .karavan .bean-designer {  
  background-color: var(--vscode-editor-background);
}

.vscode-dark .karavan .dsl-page .flows .step-element .header-route {
  color: var(--pf-v5-global--Color--200);
}

.vscode-dark .karavan .dsl-page .flows .step-element-with-steps {
  border-color: var(--pf-v5-global--Color--200);
}

.vscode-dark .step-element .selected .text {
  color: var(--pf-v5-global--info-color--100);
}

.vscode-dark .step-element .selected .header-icon {
  border-color: var(--pf-v5-global--info-color--100);
  background: var(--pf-v5-global--info-color--100);
  border-width: 2px;
}

.vscode-dark .step-element .header-icon {
  background: var(--pf-v5-global--BorderColor--200);
  border-color: var(--pf-v5-global--Color--200);
}

.vscode-dark .karavan .step-element .header .text-bottom {
    background-color: rgb(var(--vscode-editor-background), 0.5);
    color: var(--vscode-editor-foreground);
}

.vscode-dark .karavan .step-element .header .header-text-required {
  color: var(--pf-v5-global--danger-color--100);
}

.vscode-dark .karavan .step-element .add-button {
  color: var(--vscode-focusBorder); 
}
.vscode-dark .karavan .add-button-icon, 
.vscode-dark .karavan .insert-button-icon, 
.vscode-dark .karavan .delete-button-icon {
  background:  var(--vscode-editor-background);
}


/* Connections */
.vscode-dark .karavan .dsl-page .graph .connections .arrow {
  stroke: var(--pf-v5-global--BorderColor--light-100);
  fill: var(--pf-v5-global--BorderColor--light-100);
}

.vscode-dark .karavan .dsl-page .graph .connections .path {
   stroke: var(--pf-v5-global--BorderColor--light-100);
}

.vscode-dark .karavan .dsl-page .graph .connections .path-incoming {
  stroke: var(--pf-v5-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-v5-global--Color--200);
  fill: var(--pf-v5-global--BorderColor--200);
}

/* Properties */
.vscode-dark .karavan .properties {
  border: none;
  background: var(--vscode-tab-inactiveBackground);
  color: var(--vscode-input-foreground);
  /* margin-bottom: 0; */
}

.vscode-dark .karavan .pf-v5-c-drawer__splitter {
  background: var(--vscode-tab-inactiveBackground);
}

.vscode-dark .karavan .pf-v5-c-drawer__splitter::after {
  border: var(--vscode-tab-inactiveBackground) solid;
  border-width: 2px;
}

.vscode-dark .karavan .pf-v5-c-switch {
  --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--vscode-focusBorder);
}

.vscode-dark .karavan .properties .text-field {
  background-color: var(--vscode-input-background);
  border-color: var(--vscode-input-background);
  color: var(--vscode-input-foreground);
}

.vscode-dark .pf-v5-c-select {
  --pf-v5-c-select__toggle--BackgroundColor: var(--vscode-input-background);
  --pf-v5-c-select__toggle--before--BorderTopColor: var(--vscode-input-background);
  --pf-v5-c-select__toggle--before--BorderRightColor: var(--vscode-input-background);
  --pf-v5-c-select__toggle--before--BorderBottomColor: var(--vscode-input-background);
  --pf-v5-c-select__toggle--before--BorderLeftColor: var(--vscode-input-background);
  --pf-v5-c-select__toggle--Color: var(--pf-v5-global--Color--200);
}

.vscode-dark .pf-v5-c-select__menu {
  background-color: var(--vscode-input-background);
  box-shadow: var(--pf-v5-c-select__menu--BoxShadow);
}

.vscode-dark .karavan .properties .pf-v5-c-form-control::before {
  border: none;
}
.vscode-dark .karavan .properties .pf-v5-c-form-control::after {
  border: none;
}

.vscode-dark .karavan .properties .pf-v5-c-select__menu-item {
  color: var(--vscode-input-foreground);
}

.vscode-dark .karavan .properties .pf-v5-c-select__menu-item:hover {
  color: var(--vscode-input-foreground);
  background-color: var(--vscode-focusBorder);
}

.vscode-dark .karavan .properties .pf-v5-c-select__menu-item:hover .pf-v5-c-select__menu-item-description {
  color: var(--vscode-input-foreground);
}

.vscode-dark .karavan .properties .pf-v5-c-select__toggle-typeahead {
  color: var(--vscode-input-foreground);
}

.vscode-dark .karavan .properties .pf-v5-c-input-group, 
.vscode-dark .karavan .properties .pf-v5-c-text-input-group {
  background-color: var(--vscode-input-background);
  border-color: var(--vscode-input-foreground);;
  color: var(--vscode-input-foreground);
  --pf-v5-c-text-input-group__text--before--BorderColor: transparent;
  --pf-v5-c-text-input-group__text--after--BorderBottomColor: transparent;
}

.vscode-dark .karavan .properties .pf-v5-c-input-group .pf-m-control {
  background-color: transparent;
  color: var(--vscode-input-foreground);
}

.vscode-dark .karavan .properties .pf-v5-c-input-group .pf-v5-c-button.pf-m-control::after {
  border-radius: initial;
  border-right: none;
  border-top: none;
  border-left-color: var(--vscode-tab-inactiveBackground);
  border-bottom-color: transparent;
}

.vscode-dark .karavan .properties .pf-v5-c-input-group .pf-v5-c-button.pf-m-control:hover::after {
  border-bottom-color: var(--vscode-focusBorder);
}

.vscode-dark .karavan .properties .input-group .pf-v5-c-chip-group .pf-v5-c-chip {
  --pf-v5-c-chip--BackgroundColor: transparent;
  --pf-v5-c-chip__text--Color: var(--vscode-input-foreground);
  --pf-v5-c-chip--before--BorderColor: var(--vscode-input-foreground);
}

.vscode-dark .karavan .properties .input-group .pf-v5-c-chip-group li:last-child .pf-v5-c-chip {
  --pf-v5-c-chip--before--BorderColor: transparent;
}

.vscode-dark .karavan .properties .pf-v5-c-select__toggle-text {
  color: var(--vscode-input-foreground);
}

.vscode-dark .karavan .properties .pf-v5-c-expandable-section__toggle-icon {
  color: var(--vscode-focusBorder);
}

.vscode-dark .karavan .properties .object-value {
  --pf-v5-c-card--BackgroundColor: transparent;
  border-color: var(--vscode-input-foreground);
}

/* Popover */
.vscode-dark .pf-v5-c-popover {
  --pf-v5-c-popover__content--BackgroundColor: var(--vscode-tab-activeBackground);
  --pf-v5-c-popover__arrow--BackgroundColor: var(--vscode-tab-activeBackground);
}

.vscode-dark .pf-v5-c-tooltip {
  --pf-v5-c-tooltip__content--BackgroundColor: var(--vscode-input-background);
}

/* Modal */
.vscode-dark .dsl-modal .dsl-card .icon {
  height: 24px;
  background: var(--pf-v5-global--BorderColor--200);
  border-color: var(--pf-v5-global--Color--200);
  border-radius: 24px;
  padding: 4px;
}

.vscode-dark .pf-v5-c-modal-box {
  --pf-v5-c-modal-box--BackgroundColor: var(--vscode-input-background);
}

.vscode-dark .dsl-modal .search .text-field {
  background-color:  var(--vscode-editor-background);
  border-color:  var(--vscode-input-foreground);
  color:  var(--vscode-input-foreground);
  padding-left: 8px;
}

/* Help */
.vscode-light .dont-show, 
.vscode-dark .dont-show {
  margin-right: auto;
}

/* Kamelets page */

.vscode-dark .karavan .kamelet-section,
.vscode-dark .karavan .tools-section,
.vscode-dark .karavan .tools-section .pf-v5-c-toolbar,
.vscode-dark .karavan .kamelets-page {
  background-color: transparent;
  border: none;
}

.vscode-dark .karavan .tools-section h1 {
color: var(--vscode-editor-foreground);
}

.vscode-dark .karavan .kamelets-page .kamelet-card {
  background-color: var(--vscode-badge-background);
}

.vscode-dark .karavan .tools-section .text-field {
  background-color:  var(--vscode-editor-background);
  border-color:  var(--vscode-input-foreground);
  color:  var(--vscode-input-foreground);
}

.vscode-dark .kamelet-modal-card .pf-v5-c-table {
  background-color: transparent;
  color:  var(--vscode-input-foreground);
}

.vscode-dark .pf-v5-c-table {
  --pf-v5-c-table--cell--Color:  var(--vscode-input-foreground);
  color:  var(--vscode-input-foreground);
}

/* Builder */
.vscode-dark .karavan .project-builder {
  background: var(--vscode-editor-background);
  border: none;
}
.vscode-dark .karavan .project-builder .header .pf-v5-c-badge {
  --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--primary-color--200);
}

.vscode-dark .karavan .project-builder h2,
.vscode-dark .karavan .project-builder .pf-v5-c-card__title,
.vscode-dark .karavan .project-builder .pf-v5-c-form__label-text {
  color: var(--vscode-editor-foreground);
}

.vscode-dark .karavan .project-builder .builder-card {
  background-color: var(--vscode-badge-background);
}

.vscode-dark .karavan .project-builder .builder-card .text-field {
  background-color: var(--vscode-input-background);
  border-color: var(--vscode-input-background);
  color: var(--vscode-input-foreground);
}

.vscode-dark .karavan .project-builder .pf-v5-c-input-group {
  background-color: transparent;
  border-color: var(--vscode-input-foreground);
  color: var(--vscode-input-foreground);
  --pf-v5-c-text-input-group__text--before--BorderColor: transparent;
  --pf-v5-c-text-input-group__text--after--BorderBottomColor: transparent;
}

.vscode-dark .karavan .project-builder .pf-v5-c-toggle-group {
  --pf-v5-c-toggle-group__button--BackgroundColor: transparent;
  --pf-v5-c-toggle-group__button--Color: var(--vscode-editor-foreground);
}

.vscode-dark .karavan .project-builder .pf-v5-c-toggle-group .pf-v5-c-toggle-group__button.pf-m-selected {
  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-global--primary-color--200);
}

.vscode-dark .karavan .project-builder .pf-v5-c-toggle-group .pf-v5-c-toggle-group__button:hover {
  --pf-v5-c-toggle-group__button--BackgroundColor: var(--vscode-input-background);
}

.vscode-dark .karavan .project-builder .pf-v5-c-progress-stepper__step-icon {
  background-color: var(--vscode-input-background);
}

.vscode-dark .karavan .project-builder .footer .buttons .pf-v5-c-toolbar {
  background: transparent;
}

.vscode-dark .project-builder .pf-v5-c-table {
  background-color: transparent;
  color:  var(--vscode-input-foreground);
}

.vscode-dark .pf-v5-c-table {
  --pf-v5-c-table--cell--Color:  var(--vscode-input-foreground);
  color:  var(--vscode-input-foreground);
}

.vscode-dark .profile-modal .text-field {
  background-color:  var(--vscode-editor-background);
  border-color:  var(--vscode-input-foreground);
  color:  var(--vscode-input-foreground);
}

.vscode-dark .karavan .tools-section .knowledge-tabs {
    background-color: transparent;
}

.vscode-dark .dsl-modal .pf-v5-c-page__main-section.pf-m-dark-100 {
  --pf-v5-c-page__main-section--BackgroundColor: transparent;
} 

.vscode-dark .dsl-modal .pf-v5-c-toggle-group .pf-v5-c-toggle-group__button.pf-m-selected {
  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-global--primary-color--200);
}

#root .karavan .bean-designer {
  padding-bottom: 0;
}

#root .karavan .dsl-page .dsl-page-columns {
  padding-bottom: 0;
}

.vscode-dark .karavan .topology-panel .pf-topology__node .pf-topology__node__background {
  fill: var(--pf-v5-global--palette--black-400); 
}