UNPKG

n8n-editor-ui

Version:

Workflow Editor UI for n8n

557 lines 12.6 kB
/* BEM support Func -------------------------- */ /* Transition -------------------------- */ /* Color -------------------------- */ /* Link -------------------------- */ /* Border -------------------------- */ /* Outline -------------------------- */ /* Box shadow -------------------------- */ /* Fill -------------------------- */ /* Typography -------------------------- */ /* z-index -------------------------- */ /* Disable base -------------------------- */ /* Icon -------------------------- */ /* Checkbox -------------------------- */ /* Radio -------------------------- */ /* Select -------------------------- */ /* Alert -------------------------- */ /* MessageBox -------------------------- */ /* Message -------------------------- */ /* Notification -------------------------- */ /* Input -------------------------- */ /* Cascader -------------------------- */ /* Group -------------------------- */ /* Tab -------------------------- */ /* Button -------------------------- */ /* cascader -------------------------- */ /* Switch -------------------------- */ /* Dialog -------------------------- */ /* Table -------------------------- */ /* Pagination -------------------------- */ /* Popup -------------------------- */ /* Popover -------------------------- */ /* Tooltip -------------------------- */ /* Tag -------------------------- */ /* Tree -------------------------- */ /* Dropdown -------------------------- */ /* Badge -------------------------- */ /* Card --------------------------*/ /* Slider --------------------------*/ /* Steps --------------------------*/ /* Menu --------------------------*/ /* Rate --------------------------*/ /* DatePicker --------------------------*/ /* Loading --------------------------*/ /* Scrollbar --------------------------*/ /* Carousel --------------------------*/ /* Collapse --------------------------*/ /* Transfer --------------------------*/ /* Header --------------------------*/ /* Footer --------------------------*/ /* Main --------------------------*/ /* Timeline --------------------------*/ /* Backtop --------------------------*/ /* Link --------------------------*/ /* Calendar --------------------------*/ /* Form -------------------------- */ /* Avatar --------------------------*/ /* Break-point --------------------------*/ /* Break-points -------------------------- */ /* Scrollbar -------------------------- */ /* Placeholder -------------------------- */ /* BEM -------------------------- */ ._name_1qhq5_123 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ._name_1qhq5_123 del:not(:last-child) { margin-right: var(--spacing--4xs); }/* BEM support Func -------------------------- */ /* Transition -------------------------- */ /* Color -------------------------- */ /* Link -------------------------- */ /* Border -------------------------- */ /* Outline -------------------------- */ /* Box shadow -------------------------- */ /* Fill -------------------------- */ /* Typography -------------------------- */ /* z-index -------------------------- */ /* Disable base -------------------------- */ /* Icon -------------------------- */ /* Checkbox -------------------------- */ /* Radio -------------------------- */ /* Select -------------------------- */ /* Alert -------------------------- */ /* MessageBox -------------------------- */ /* Message -------------------------- */ /* Notification -------------------------- */ /* Input -------------------------- */ /* Cascader -------------------------- */ /* Group -------------------------- */ /* Tab -------------------------- */ /* Button -------------------------- */ /* cascader -------------------------- */ /* Switch -------------------------- */ /* Dialog -------------------------- */ /* Table -------------------------- */ /* Pagination -------------------------- */ /* Popup -------------------------- */ /* Popover -------------------------- */ /* Tooltip -------------------------- */ /* Tag -------------------------- */ /* Tree -------------------------- */ /* Dropdown -------------------------- */ /* Badge -------------------------- */ /* Card --------------------------*/ /* Slider --------------------------*/ /* Steps --------------------------*/ /* Menu --------------------------*/ /* Rate --------------------------*/ /* DatePicker --------------------------*/ /* Loading --------------------------*/ /* Scrollbar --------------------------*/ /* Carousel --------------------------*/ /* Collapse --------------------------*/ /* Transfer --------------------------*/ /* Header --------------------------*/ /* Footer --------------------------*/ /* Main --------------------------*/ /* Timeline --------------------------*/ /* Backtop --------------------------*/ /* Link --------------------------*/ /* Calendar --------------------------*/ /* Form -------------------------- */ /* Avatar --------------------------*/ /* Break-point --------------------------*/ /* Break-points -------------------------- */ /* Scrollbar -------------------------- */ /* Placeholder -------------------------- */ /* BEM -------------------------- */ ._container_1742e_123 { display: flex; align-items: center; justify-content: stretch; overflow: hidden; position: relative; z-index: 1; padding-inline-end: var(--spacing--5xs); cursor: pointer; } ._container_1742e_123 > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: var(--spacing--2xs); } ._background_1742e_140 { position: absolute; /* stylelint-disable-next-line @n8n/css-var-naming */ left: calc(var(--indent-depth) * 32px); top: 0; /* stylelint-disable-next-line @n8n/css-var-naming */ width: calc(100% - var(--indent-depth) * 32px); height: 100%; border-radius: var(--radius); z-index: -1; } ._selected_1742e_151 ._background_1742e_140 { background-color: var(--color--foreground); } ._container_1742e_123:hover:not(._selected_1742e_151) ._background_1742e_140 { background-color: var(--color--background--light-1); } ._selected_1742e_151:not(:hover)._error_1742e_157 ._background_1742e_140 { background-color: var(--callout--color--background--danger); } ._indent_1742e_161 { flex-grow: 0; flex-shrink: 0; width: var(--spacing--xl); align-self: stretch; position: relative; overflow: hidden; margin-bottom: 0; } ._indent_1742e_161._connectorCurved_1742e_170:before { content: ""; position: absolute; left: var(--spacing--sm); bottom: var(--spacing--sm); border: 2px solid var(--canvas--dot--color); width: var(--spacing--lg); height: var(--spacing--lg); border-radius: var(--radius--lg); } ._indent_1742e_161._connectorStraight_1742e_180:after { content: ""; position: absolute; left: var(--spacing--sm); top: 0; border-left: 2px solid var(--canvas--dot--color); height: 100%; } ._icon_1742e_189 { /* stylelint-disable-next-line @n8n/css-var-naming */ margin-left: var(--row-gap-thickness); flex-grow: 0; flex-shrink: 0; } ._name_1742e_196 { flex-basis: 0; flex-grow: 1; padding-inline-start: 0; } ._timeTook_1742e_202 { flex-grow: 0; flex-shrink: 0; width: 20%; } ._timeTook_1742e_202 ._statusTextIcon_1742e_207 { margin-right: var(--spacing--5xs); vertical-align: text-bottom; } ._startedAt_1742e_212 { flex-grow: 0; flex-shrink: 0; width: 25%; } ._consumedTokens_1742e_218 { flex-grow: 0; flex-shrink: 0; width: 15%; text-align: right; } ._compactErrorIcon_1742e_225 { flex-grow: 0; flex-shrink: 0; width: 26px; display: flex; align-items: center; justify-content: center; } ._container_1742e_123:hover ._compactErrorIcon_1742e_225 { display: none; } ._partialExecutionButton_1742e_237, ._openNdvButton_1742e_238 { transition: none; /* By default, take space but keep invisible */ visibility: hidden; } ._container_1742e_123._compact_1742e_225 ._partialExecutionButton_1742e_237, ._container_1742e_123._compact_1742e_225 ._openNdvButton_1742e_238 { /* When compact, collapse to save space */ display: none; } ._container_1742e_123:hover ._partialExecutionButton_1742e_237:not(._unavailable_1742e_248), ._container_1742e_123:hover ._openNdvButton_1742e_238:not(._unavailable_1742e_248) { visibility: visible; display: inline-flex; } ._partialExecutionButton_1742e_237, ._openNdvButton_1742e_238, ._toggleButton_1742e_256 { flex-grow: 0; flex-shrink: 0; border: none; background: transparent; color: var(--color--text); align-items: center; justify-content: center; } ._partialExecutionButton_1742e_237:hover, ._openNdvButton_1742e_238:hover, ._toggleButton_1742e_256:hover { background: transparent; } ._partialExecutionButton_1742e_237:disabled, ._openNdvButton_1742e_238:disabled, ._toggleButton_1742e_256:disabled { visibility: hidden !important; } ._toggleButton_1742e_256 { display: inline-flex; } ._statusIcon_1742e_280 { color: var(--color--text--tint-1); flex-grow: 0; flex-shrink: 0; width: 26px; height: 26px; padding: var(--spacing--3xs); } ._statusIcon_1742e_280._placeholder_1742e_288 { color: transparent; }/* BEM support Func -------------------------- */ /* Transition -------------------------- */ /* Color -------------------------- */ /* Link -------------------------- */ /* Border -------------------------- */ /* Outline -------------------------- */ /* Box shadow -------------------------- */ /* Fill -------------------------- */ /* Typography -------------------------- */ /* z-index -------------------------- */ /* Disable base -------------------------- */ /* Icon -------------------------- */ /* Checkbox -------------------------- */ /* Radio -------------------------- */ /* Select -------------------------- */ /* Alert -------------------------- */ /* MessageBox -------------------------- */ /* Message -------------------------- */ /* Notification -------------------------- */ /* Input -------------------------- */ /* Cascader -------------------------- */ /* Group -------------------------- */ /* Tab -------------------------- */ /* Button -------------------------- */ /* cascader -------------------------- */ /* Switch -------------------------- */ /* Dialog -------------------------- */ /* Table -------------------------- */ /* Pagination -------------------------- */ /* Popup -------------------------- */ /* Popover -------------------------- */ /* Tooltip -------------------------- */ /* Tag -------------------------- */ /* Tree -------------------------- */ /* Dropdown -------------------------- */ /* Badge -------------------------- */ /* Card --------------------------*/ /* Slider --------------------------*/ /* Steps --------------------------*/ /* Menu --------------------------*/ /* Rate --------------------------*/ /* DatePicker --------------------------*/ /* Loading --------------------------*/ /* Scrollbar --------------------------*/ /* Carousel --------------------------*/ /* Collapse --------------------------*/ /* Transfer --------------------------*/ /* Header --------------------------*/ /* Footer --------------------------*/ /* Main --------------------------*/ /* Timeline --------------------------*/ /* Backtop --------------------------*/ /* Link --------------------------*/ /* Calendar --------------------------*/ /* Form -------------------------- */ /* Avatar --------------------------*/ /* Break-point --------------------------*/ /* Break-points -------------------------- */ /* Scrollbar -------------------------- */ /* Placeholder -------------------------- */ /* BEM -------------------------- */ ._tree_92rld_123 { padding: 0 var(--spacing--2xs) var(--spacing--2xs) var(--spacing--2xs); /* For programmatically triggered scroll in useVirtualList to animate, make it scroll smoothly */ scroll-behavior: smooth; } ._container_92rld_128:not(._staticScrollBar_92rld_128) ._tree_92rld_123 { scroll-padding-block: var(--spacing--3xs); } @supports not (selector(::-webkit-scrollbar)) { ._container_92rld_128:not(._staticScrollBar_92rld_128) ._tree_92rld_123 { scrollbar-width: thin; } } @supports selector(::-webkit-scrollbar) { ._container_92rld_128:not(._staticScrollBar_92rld_128) ._tree_92rld_123 { padding-right: var(--spacing--5xs); scrollbar-gutter: stable; } ._container_92rld_128:not(._staticScrollBar_92rld_128) ._tree_92rld_123::-webkit-scrollbar { width: var(--spacing--4xs); } ._container_92rld_128:not(._staticScrollBar_92rld_128) ._tree_92rld_123::-webkit-scrollbar-thumb { border-radius: var(--spacing--4xs); background: var(--color--foreground--shade-1); } } ._tree_92rld_123 .el-icon { display: none; }