| /* |
| * 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%; |
| } |
| |
| 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); |
| } |
| .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-page .rest-page-columns, |
| .vscode-dark .karavan .beans-page .beans-page-columns, |
| .vscode-dark .karavan .error-page .error-page-columns, |
| .vscode-dark .karavan .exception-page .exception-page-columns, |
| .vscode-dark .karavan .templates-page .templates-page-columns { |
| 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 .step-element .header .text-bottom { |
| background-color: rgb(var(--vscode-editor-background), 0.5); |
| color: var(--vscode-editor-foreground); |
| } |
| |
| .vscode-dark .karavan .step-element .add-button { |
| color: var(--vscode-focusBorder); |
| } |
| |
| /* 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; |
| } |