| // 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. |
| |
| .data-providers { |
| min-width: 875px; |
| } |
| |
| .data-provider-row { |
| |
| display: flex; |
| width: 100%; |
| padding: 24px 12px; |
| transition: background-color 0.3s ease; |
| border-bottom: 1px solid rgba(0, 0, 0, 0.08); |
| border-radius: 8px; |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| position: relative; |
| |
| &:after { |
| display: inline-block; |
| width: 150px; |
| height: 24px; |
| line-height: 24px; |
| font-size: 11px; |
| position: absolute; |
| top: -5px; |
| right: -10px; |
| opacity: 0; |
| visibility: hidden; |
| content: '(Turn ON to Configure)'; |
| color: rgba(100, 100, 100, 0.25); |
| transition: all 0.4s ease-in; |
| } |
| |
| &:hover { |
| background-color: rgba(0, 0, 0, 0.03); |
| } |
| |
| &.on { |
| .provider-name { |
| text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); |
| } |
| } |
| |
| &.off { |
| .provider-name { |
| opacity: 0.7; |
| } |
| |
| .provider-icon { |
| opacity: 0.7; |
| transform: scale(0.9); |
| } |
| |
| &:hover { |
| &:after { |
| top: 5px; |
| right: 5px; |
| opacity: 1; |
| visibility: visible; |
| } |
| } |
| } |
| |
| .provider-info { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| align-content: center; |
| min-width: 80px; |
| |
| .provider-icon { |
| transition: all 0.3s ease; |
| |
| >svg, >img { |
| transition: all 0.3s ease; |
| } |
| } |
| |
| .provider-name { |
| font-weight: 900; |
| font-size: 14px; |
| margin-bottom: 3px; |
| transition: all 0.3s ease; |
| |
| &:hover { |
| color: #007cff; |
| } |
| } |
| |
| .bp3-popover-wrapper { |
| width: auto; |
| } |
| } |
| |
| .provider-settings { |
| width: 100%; |
| padding: 0 20px; |
| align-items: flex-end; |
| display: flex; |
| flex-wrap: wrap; |
| |
| .bp3-form-group { |
| margin-bottom: 0; |
| } |
| |
| p { |
| margin-bottom: 0; |
| } |
| |
| label { |
| strong { |
| font-weight: 800; |
| } |
| } |
| } |
| |
| .provider-actions { |
| display: flex; |
| justify-content: flex-end; |
| flex-direction: column; |
| } |
| } |
| |
| .btn-pipeline { |
| font-weight: 800; |
| transition: all 0.4s ease; |
| white-space: nowrap; |
| |
| &.btn-run-pipeline:hover { |
| background-color: #007cff |
| } |
| } |
| |
| .advanced-mode { |
| .btn-pipeline { |
| &.btn-run-pipeline:not(:hover) { |
| background-color: #252525; |
| } |
| } |
| } |
| |
| .bp3-switch { |
| &.provider-toggle-switch { |
| margin-bottom: 0; |
| |
| &:not(.bp3-align-right) { |
| padding-left: 43px |
| } |
| |
| } |
| } |
| |
| .pipeline-action-btn { |
| transition: all 0.4s ease; |
| |
| &:hover { |
| svg { |
| fill: #007cff !important |
| } |
| } |
| } |
| |
| .provider-datarow-enter { |
| transform: rotateX(-40deg); |
| opacity: 0.7; |
| transition: opacity 300ms, transform 300ms; |
| } |
| |
| .provider-datarow-enter-done { |
| transform: rotateX(0deg); |
| opacity: 1; |
| transition: opacity 300ms, transform 300ms; |
| } |
| |
| .provider-datarow-exit { |
| transform: rotateX(20deg); |
| transition: opacity 300ms, transform 300ms; |
| } |
| |
| .provider-datarow-exit-active { |
| transform: rotateX(40deg); |
| transition: opacity 300ms, transform 300ms; |
| } |
| |
| .lastrun-module-enter { |
| transform: scale(0.5); |
| opacity: 0.7; |
| transition: opacity 300ms, transform 300ms; |
| } |
| |
| .lastrun-module-enter-done { |
| transform: scale(1); |
| opacity: 1; |
| transition: opacity 300ms, transform 300ms; |
| } |
| |
| .lastrun-module-exit { |
| transform: scale(0.7); |
| transition: opacity 300ms, transform 300ms; |
| } |
| |
| .lastrun-module-exit-active { |
| transform: scale(0); |
| transition: opacity 300ms, transform 300ms; |
| } |
| |
| .pipeline-task-fx-enter { |
| transform: scale(0.6); |
| opacity: 0; |
| transition: opacity 300ms, transform 300ms; |
| } |
| |
| .pipeline-task-fx-enter-done { |
| transform: scale(1); |
| opacity: 1; |
| transition: opacity 300ms, transform 300ms; |
| } |
| |
| .pipeline-task-fx-exit { |
| transform: scale(0.8); |
| opacity: 0.8; |
| transition: opacity 300ms, transform 300ms; |
| } |
| |
| .pipeline-task-fx-exit-active { |
| transform: scale(0.7); |
| opacity: 0; |
| transition: opacity 300ms, transform 300ms; |
| } |
| |
| .activity-panel-enter { |
| transform: scale(1); |
| background-color: #f0f0f0; |
| opacity: 1; |
| transition: opacity 300ms, transform 300ms, background-color 800ms, background-image 800ms; |
| } |
| |
| .activity-panel-enter-done { |
| transform: scale(1); |
| background-color: #ffffff; |
| opacity: 1; |
| transition: opacity 300ms, transform 300ms, background-color 800ms, background-image 800ms; |
| } |
| |
| .activity-panel-exit { |
| background-color: #f7f7f7; |
| opacity: 1; |
| transition: opacity 300ms, transform 300ms, background-color 800ms, background-image 800ms; |
| } |
| |
| .activity-panel-exit-active { |
| background-color: #eeeeee; |
| opacity: 1; |
| transition: opacity 300ms, transform 300ms, background-color 800ms, background-image 800ms; |
| } |
| |
| .bp3-spinner { |
| &.lastrun-spinner { |
| position: absolute; |
| top: 0; |
| left: 0; |
| |
| } |
| } |
| |
| .bp3-popover { |
| &.popover-lastrun { |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| } |
| } |
| |
| .bp3-popover-wrapper { |
| &.popover-trigger-lastrun { |
| width: auto; |
| } |
| } |
| |
| .trigger-module-lastrun {} |
| |
| .bp3-button { |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| |
| &.bp3-intent-primary:not(.bp3-minimal, .bp3-disabled) { |
| // box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.65); |
| // border: 1px solid rgba(24, 32, 38, 0.2); |
| transition: all 0.3s ease-out; |
| |
| &:hover { |
| // box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75); |
| } |
| |
| &:not(.bp3-minimal) { |
| // box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.45); |
| } |
| } |
| |
| &.btn-cancel-pipeline { |
| transition: all 0.4s ease; |
| background-color: darken(#FFA8A8, 5%); |
| border: 1px solid darken(#FF6D6D, 5%); |
| box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.35); |
| border-radius: 6px; |
| font-style: normal; |
| font-weight: 900; |
| color: #ffffff; |
| |
| &:hover, |
| :active, |
| &.bp3-active { |
| background-color: darken(#FFA8A8, 10%) !important; |
| border: 1px solid darken(#FF6D6D, 10%) !important; |
| box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.40) !important; |
| } |
| } |
| |
| &.btn-retry-pipeline { |
| transition: all 0.4s ease; |
| box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.35); |
| border-radius: 6px; |
| font-style: normal; |
| font-weight: 900; |
| color: #ffffff; |
| |
| &:hover, |
| :active, |
| &.bp3-active { |
| box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.40); |
| } |
| } |
| |
| .bp3-button-text { |
| white-space: nowrap; |
| } |
| } |
| |
| .bp3-input-group { |
| .bp3-input { |
| transition: all 0.3s ease; |
| } |
| |
| &.is-invalid { |
| .bp3-input { |
| background-color: lighten(#FFA8A8, 13%); |
| color: darken(#FF6D6D, 20%); |
| border: 1px solid darken(#FF6D6D, 10%); |
| |
| &::placeholder { |
| color: lighten(#FF6D6D, 10%); |
| } |
| } |
| } |
| |
| &.is-valid { |
| .bp3-input { |
| background-color: lighten(#b5ffe0, 11%); |
| color: darken(#00cf8a, 5%); |
| border: 1px solid darken(#6dffce, 15%); |
| |
| &::placeholder { |
| color: lighten(#6dffce, 10%); |
| } |
| |
| &:focus { |
| box-shadow: 0 0 0 1px #1ce878, 0 0 0 3px rgba(28, 232, 188, 0.3), inset 0 1px 1px rgba(16, 26, 23, 0.2) |
| } |
| } |
| } |
| } |
| |
| .bp3-popover-wrapper, |
| .bp3-popover-target { |
| width: auto; |
| } |
| |
| .bp3-spinner { |
| &.bp3-intent-success { |
| .bp3-spinner-head { |
| stroke: rgb(59, 212, 119); |
| } |
| } |
| } |
| |
| .bp3-menu { |
| &.pipeline-presets-menu { |
| .bp3-menu-item { |
| &.bp3-active { |
| background-color: transparent; |
| color: #007cff; |
| font-weight: 800; |
| |
| &:hover { |
| background-color: rgba(66, 66, 66, 0.08); |
| color: darken(#007cff, 5%); |
| } |
| } |
| } |
| } |
| &.refdiff-tasks-menu { |
| > li { |
| margin-bottom: 2px; |
| border-radius: 8px; |
| outline: none !important; |
| |
| .bp3-menu-item { |
| outline: none !important; |
| border-radius: inherit; |
| &.bp3-active { |
| font-weight: bold; |
| } |
| } |
| } |
| } |
| } |
| |
| .pipeline-row { |
| td.cell-id { |
| font-weight: bold; |
| } |
| |
| &.pipeline-failed { |
| &:hover { |
| background-color: #ffd4d42f; |
| |
| td.cell-id { |
| a { |
| color: #ff6464; |
| } |
| } |
| |
| td.cell-name { |
| color: #ff6464; |
| } |
| } |
| } |
| } |
| |
| .pagination-btn { |
| font-weight: 900; |
| font-size: 12px; |
| transition: all 0.3s ease-out; |
| } |
| |
| .bp3-button.btn-pipeline-filter { |
| &:hover { |
| .bp3-tag { |
| opacity: 1; |
| |
| &.tag-data-count { |
| border-radius: 8px; |
| background-color: #dddddd; |
| border: 1px solid #333333; |
| color: #222222; |
| } |
| } |
| } |
| |
| &.bp3-intent-primary { |
| .bp3-tag { |
| opacity: 1.0; |
| |
| &.tag-data-count { |
| border-radius: 8px; |
| background-color: #ffffff; |
| border: 1px solid #333; |
| color: #222222; |
| font-weight: 800; |
| } |
| } |
| } |
| |
| .bp3-tag { |
| opacity: 0.8; |
| transition: all 0.3s ease-out; |
| |
| &.tag-data-count { |
| border-radius: 8px; |
| background-color: #eeeeee; |
| border: 1px solid #666666; |
| color: #555555; |
| } |
| } |
| } |
| |
| .bp3-button-group { |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| |
| &.filter-status-group { |
| box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35); |
| border-radius: 3px; |
| |
| .bp3-button {} |
| |
| .bp3-button:not(.bp3-intent-primary):hover { |
| background-color: #dddddd; |
| background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) |
| } |
| |
| .bp3-button.bp3-intent-primary:hover { |
| // background-color: #007cff |
| } |
| } |
| } |
| |
| .bp3-drawer { |
| &.drawer-json-inspector { |
| .bp3-drawer-header { |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| } |
| |
| .bp3-drawer-body { |
| background-color: #f3f3f3; |
| |
| .bp3-card.code-inspector-card { |
| border-radius: 7px; |
| box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.20) inset; |
| -webkit-box-shadow: 1px 1px 3px 0px rgba(104, 37, 37, 0.20) inset; |
| -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.20) inset; |
| transition: all 0.3s linear; |
| border: 1px solid #cccccc; |
| |
| &:hover { |
| border: 1px solid #0278ffab; |
| } |
| } |
| } |
| |
| |
| } |
| } |
| |
| .pipeline-multistage-activity { |
| display: flex; |
| justify-content: flex-start; |
| height: auto; |
| // min-height: calc(8vh + 300px); |
| max-height: 50vh; |
| max-width: 100%; |
| // border-top: 1px solid rgb(240, 240, 240); |
| // border-bottom: 1px solid rgb(240, 240, 240); |
| overflow: hidden; |
| overflow-x: auto; |
| } |
| |
| .stage-panel-card { |
| background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); |
| z-index: -1; |
| } |
| |
| .pipeline-task-activity { |
| border-bottom-left-radius: 3px; |
| border-bottom-right-radius: 3px; |
| } |
| |
| .stage-lane { |
| min-width: 210px; |
| margin: 0 5px; |
| // border-right: 1px solid rgb(233, 233, 233); |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| |
| &:first-of-type { |
| border-bottom-left-radius: 3px; |
| } |
| |
| &:last-of-type { |
| border-bottom-right-radius: 3px; |
| border-right: 0; |
| } |
| |
| &.stage-running { |
| background-color: rgba(255, 255, 255, 1); |
| |
| .stage-title { |
| // font-weight: 800; |
| // font-size: 15px; |
| // text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12); |
| background-color: #F0F4FE; |
| color: #7497F7; |
| } |
| } |
| |
| &.stage-completed { |
| // background-color: rgba(61, 204, 145, 0.15); |
| // border-right: 1px solid rgba(61, 204, 145, 0.35); |
| .stage-title { |
| background-color: #EDFBF0; |
| color: #4DB764; |
| } |
| } |
| |
| &.stage-failed { |
| // background-color: rgba(204, 61, 97, 0.06); |
| // border-right: 1px solid rgba(204, 61, 97, 0.25); |
| .stage-title { |
| background-color: #FEEFEF; |
| color: #E34040; |
| } |
| } |
| |
| &.stage-created, |
| &.stage-pending { |
| // background-color: rgba(238, 238, 238, 0.35); |
| |
| .stage-title { |
| background-color: #F9F9FA; |
| color: #94959F; |
| // opacity: 0.7; |
| } |
| } |
| |
| .stage-title { |
| text-align: left; |
| justify-content: center; |
| width: 100%; |
| padding: 5px; |
| // display: flex; |
| align-self: center; |
| justify-self: flex-start; |
| font-size: 14px; |
| color: #222; |
| } |
| |
| .bp3-card.pipeline-task-module { |
| display: flex; |
| padding: 0 0 10px 0; |
| transition: all 0.3s ease-out; |
| width: 100%; |
| border-radius: 12px; |
| margin: 5px; |
| min-width: 100px; |
| max-width: 100%; |
| min-height: 32px; |
| height: auto; |
| // border: 2px solid #ddd; |
| border-bottom: 1px solid #ddd; |
| justify-content: flex-start; |
| align-items: center; |
| overflow: hidden; |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| cursor: pointer; |
| background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); |
| box-shadow: none; |
| border-radius: 0; |
| |
| &.task-completed { |
| // border: 2px solid rgba(61, 204, 145, 0.95); |
| // background-color: #fff; |
| |
| &.active { |
| // transform: scale(1.06); |
| } |
| |
| &:hover, |
| &.active { |
| // border: 2px solid rgba(29, 167, 109, 0.95); |
| // background-color: rgba(61, 204, 145, 0.75); |
| // color: #ffffff; |
| |
| .bp3-icon>svg { |
| fill: #fff; |
| } |
| } |
| |
| .task-module-name { |
| // border-right: 1px solid rgba(61, 204, 145, 0.95); |
| font-weight: 400; |
| } |
| } |
| |
| &.task-running { |
| // border: 2px solid rgba(136, 136, 136, 0.95); |
| // background-color: #ffffff; |
| |
| &.active { |
| // transform: scale(1.06); |
| } |
| |
| &:hover, |
| &.active { |
| // border: 2px solid rgba(0, 140, 255, 0.95); |
| // background-color: rgba(194, 225, 255, 0.75); |
| |
| // color: #ffffff; |
| .bp3-spinner.task-module-spinner { |
| .bp3-spinner-head { |
| stroke: rgb(0, 102, 255); |
| } |
| } |
| |
| .task-module-name { |
| // border-right: 1px solid rgba(0, 140, 255, 0.95); |
| } |
| } |
| |
| .task-module-name { |
| // border-right: 1px solid rgba(136, 136, 136, 0.95); |
| } |
| |
| } |
| |
| &.task-failed { |
| // border: 2px solid rgba(255, 115, 115, 0.9); |
| |
| &.active { |
| // transform: scale(1.06); |
| } |
| |
| &:hover, |
| &.active { |
| // border: 2px solid rgba(233, 65, 65, 0.9); |
| // background-color: rgba(255, 115, 115, 0.9); |
| // color: #ffffff; |
| |
| .bp3-spinner.task-module-spinner { |
| .bp3-spinner-head { |
| // stroke: #fff; |
| } |
| |
| } |
| } |
| |
| .task-module-name { |
| // border-right: 1px solid rgba(233, 65, 65, 0.9); |
| } |
| } |
| |
| &.task-created { |
| opacity: 0.8; |
| |
| .bp3-spinner.task-module-spinner { |
| .bp3-spinner-head { |
| stroke: transparent; |
| } |
| } |
| |
| &.active { |
| // transform: scale(1.06); |
| } |
| |
| &:hover, |
| &.active { |
| // border: 2px solid rgba(136, 136, 136, 0.95); |
| // background-color: rgba(223, 223, 223, 0.75); |
| |
| .bp3-spinner.task-module-spinner { |
| .bp3-spinner-head { |
| stroke: rgb(87, 87, 87); |
| } |
| } |
| |
| .task-module-name { |
| border-right: 0; |
| } |
| } |
| |
| .task-module-name { |
| border-right: 0; |
| } |
| |
| .task-module-progress { |
| display: none; |
| } |
| } |
| |
| |
| .task-module-name { |
| // transition: all 0.2s linear; |
| display: flex; |
| flex: 1; |
| // border-right: 1px solid #ddd; |
| // max-width: calc(100% - 50px); |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| .task-module-progress { |
| display: flex; |
| width: 50px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| padding: 8px; |
| justify-content: flex-end; |
| } |
| |
| .task-module-status {} |
| } |
| |
| .bp3-progress-bar.stage-lane-progressbar { |
| border-radius: 0; |
| height: 4px; |
| margin: 0; |
| position: absolute; |
| bottom: -1px; |
| |
| .bp3-progress-meter { |
| border-radius: 0; |
| margin: 0; |
| background-color: rgba(61, 204, 145, 0.95); |
| } |
| } |
| } |
| |
| .pipeline-activity { |
| background-image: linear-gradient(to bottom, rgba(220, 220, 220, 0.2), rgba(255, 255, 255, 0)); |
| } |
| |
| .code-editor-controls { |
| > .bp3-button, .bp3-popover-wrapper { |
| > .bp3-icon, > .bp3-popover-target .bp3-icon { |
| svg { |
| width: 12px; |
| height: 12px; |
| } |
| } |
| } |
| |
| .bp3-intent-success { |
| background-color: #2eaa5f; |
| } |
| |
| } |
| |
| .w-tc-editor { |
| height: 100%; |
| textarea { |
| min-height: 384px; |
| } |
| } |
