UNPKG

n8n-editor-ui

Version:

Workflow Editor UI for n8n

1,215 lines 25.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 -------------------------- */ ._floatingNodes_1bfoo_123 { position: absolute; bottom: 0; top: 0; right: 0; left: 0; z-index: 10; pointer-events: none; } ._nodesList_1bfoo_133 { list-style: none; padding: 0; position: absolute; display: flex; align-items: center; justify-content: center; flex-direction: column; width: min-content; margin: auto; transform-origin: center; gap: var(--spacing--sm); transition: transform 0.2s ease-in-out; } ._nodesList_1bfoo_133._inputSub_1bfoo_147, ._nodesList_1bfoo_133._outputSub_1bfoo_147 { right: 0; left: 0; flex-direction: row; } ._nodesList_1bfoo_133._outputSub_1bfoo_147 { top: 0; transform: translateY(-50%); } ._nodesList_1bfoo_133._inputSub_1bfoo_147 { bottom: 0; transform: translateY(50%); } ._nodesList_1bfoo_133._outputMain_1bfoo_160, ._nodesList_1bfoo_133._inputMain_1bfoo_160 { top: 0; bottom: 0; } ._nodesList_1bfoo_133._outputMain_1bfoo_160 { right: 0; transform: translateX(50%); } ._nodesList_1bfoo_133._inputMain_1bfoo_160 { left: 0; transform: translateX(-50%); } ._connectedNode_1bfoo_173 { border: var(--border); background-color: var(--node--color--background); border-radius: 100%; padding: var(--spacing--sm); cursor: pointer; pointer-events: all; transition: transform 0.2s cubic-bezier(0.19, 1, 0.22, 1); position: relative; transform: scale(0.8); display: flex; justify-self: center; align-self: center; } ._connectedNode_1bfoo_173::after { content: ""; position: absolute; top: -35%; right: -15%; bottom: -35%; left: -15%; z-index: -1; } ._outputMain_1bfoo_160 ._connectedNode_1bfoo_173, ._inputMain_1bfoo_160 ._connectedNode_1bfoo_173 { border-radius: var(--radius--lg); display: flex; align-items: center; justify-content: center; } ._outputMain_1bfoo_160 ._connectedNode_1bfoo_173:hover { transform: scale(1.2) translateX(-50%); } ._outputSub_1bfoo_147 ._connectedNode_1bfoo_173:hover { transform: scale(1.2) translateY(50%); } ._inputMain_1bfoo_160 ._connectedNode_1bfoo_173:hover { transform: scale(1.2) translateX(50%); } ._inputSub_1bfoo_147 ._connectedNode_1bfoo_173:hover { transform: scale(1.2) translateY(-50%); } ._v2_1bfoo_214 ._connectedNode_1bfoo_173 { padding: var(--spacing--xs); } ._v2_1bfoo_214 ._connectedNode_1bfoo_173::after { display: none; } ._v2_1bfoo_214 ._connectedNode_1bfoo_173:hover { transform: scale(1.1); }/* 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 -------------------------- */ ._tooltipRow_1uvh5_123 { display: flex; column-gap: 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 -------------------------- */ ._block_1mcvs_123 { padding: var(--spacing--sm) 0 var(--spacing--2xs) var(--spacing--2xs); border: 1px solid var(--color--foreground--tint-1); margin-top: var(--spacing--sm); border-radius: var(--radius); } :root ._blockContent_1mcvs_130 { height: 0; overflow: hidden; } :root ._blockContent_1mcvs_130._blockContentExpanded_1mcvs_134 { height: auto; } ._rawSwitch_1mcvs_138 { opacity: 0; height: -moz-fit-content; height: fit-content; margin-left: auto; margin-right: var(--spacing--2xs); } ._block_1mcvs_123:hover ._rawSwitch_1mcvs_138 { opacity: 1; } ._blockHeader_1mcvs_148 { display: flex; gap: var(--spacing--xs); cursor: pointer; /* This hack is needed to make the whole surface of header clickable */ margin: calc(-1 * var(--spacing--xs)); padding: var(--spacing--2xs) var(--spacing--xs); align-items: center; } ._blockHeader_1mcvs_148 * { -webkit-user-select: none; user-select: none; } ._blockTitle_1mcvs_161 { font-size: var(--font-size--sm); color: var(--color--text--shade-1); margin: 0; padding-bottom: var(--spacing--4xs); } ._blockToggle_1mcvs_168 { border: none; background: none; padding: 0; color: var(--color--text); margin-top: calc(-1 * var(--spacing--3xs)); } ._error_1mcvs_176 { padding: var(--spacing--sm) 0; } ._warning_1mcvs_180 { padding: var(--spacing--sm) var(--spacing--md); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--spacing--sm); } ._warningState_1mcvs_189 { width: 100%; } ._warningActions_1mcvs_193 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--spacing--2xs); width: 100%; align-items: center; } ._warningActions_1mcvs_193 .n8n-button { min-width: 9rem; } ._container_1ddvo_2 { padding: 0 var(--spacing--sm) var(--spacing--sm); } ._nodeIcon_1ddvo_5 { margin-top: calc(var(--spacing--3xs) * -1); } ._header_1ddvo_8 { display: flex; align-items: center; gap: var(--spacing--3xs); margin-bottom: var(--spacing--sm); } ._headerWrap_1ddvo_14 { display: flex; flex-direction: column; } ._title_1ddvo_18 { display: flex; align-items: center; font-size: var(--font-size--sm); gap: var(--spacing--3xs); color: var(--color--text--shade-1); } ._meta_1ddvo_25 { list-style: none; display: flex; align-items: center; flex-wrap: wrap; font-size: var(--font-size--xs); & > li:not(:last-child) { border-right: 1px solid var(--color--text); padding-right: var(--spacing--3xs); } & > li:not(:first-child) { padding-left: var(--spacing--3xs); } } ._tokensUsage_1ddvo_41 { display: flex; align-items: center; gap: var(--spacing--3xs); } /* 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 -------------------------- */ ._noData_owvsu_123 { display: flex; align-items: center; justify-content: center; width: 100%; color: var(--color--text--tint-1); } ._empty_owvsu_131 { padding: var(--spacing--lg); } ._tree_owvsu_135 { flex-shrink: 0; flex-grow: 0; width: 30%; min-width: 180px; } ._runData_owvsu_142 { width: 100%; height: 100%; overflow: auto; } ._container_owvsu_148 { height: 100%; padding: 0 var(--spacing--xs); display: flex; gap: var(--spacing--xs); }/* 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 -------------------------- */ [data-output-type="logs"] [class*="itemsCount"], [data-output-type="logs"] [class*="displayModes"] { display: none; } ._runData_w7r0e_128 { background-color: var(--run-data--color--background); } ._runDataV2_w7r0e_132 { background-color: var(--ndvv2--run-data--color--background); } ._outputTypeSelect_w7r0e_136 { margin-bottom: var(--spacing--4xs); width: -moz-fit-content; width: fit-content; } ._titleSection_w7r0e_141 { display: flex; align-items: center; } ._titleSection_w7r0e_141 > * { margin-right: var(--spacing--2xs); } ._titleSectionV2_w7r0e_149 { padding-left: var(--spacing--4xs); } ._title_w7r0e_141 { text-transform: uppercase; color: var(--color--text--tint-1); letter-spacing: 2px; font-weight: var(--font-weight--bold); font-size: var(--font-size--sm); } ._titleV2_w7r0e_161 { letter-spacing: 2px; font-size: var(--font-size--xs); } ._noOutputData_w7r0e_166 { max-width: 180px; } ._noOutputData_w7r0e_166 > *:first-child { margin-bottom: var(--spacing--md); } ._noOutputData_w7r0e_166 > * { margin-bottom: var(--spacing--2xs); } ._link_w7r0e_176 { display: inline; padding: 0; font-size: var(--font-size--sm); font-weight: var(--font-weight--regular); } ._spinner_w7r0e_183 { display: flex; justify-content: center; margin-bottom: var(--ndv--spacing); } ._spinner_w7r0e_183 * { color: var(--color--primary); min-height: 40px; min-width: 40px; }/* 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_6tej3_123 { position: relative; width: 100%; height: 100%; background-color: var(--run-data--color--background); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing--sm) var(--spacing--sm) var(--spacing--xl) var(--spacing--sm); text-align: center; overflow: hidden; } ._container_6tej3_123 > * { width: 100%; } ._header_6tej3_140 { margin-bottom: var(--spacing--sm); } ._header_6tej3_140 > * { margin-bottom: var(--spacing--2xs); } ._action_6tej3_147 { margin-bottom: var(--spacing--2xl); } ._shake_6tej3_151 { animation: _shake_6tej3_151 8s infinite; } @keyframes _shake_6tej3_151 { 90% { transform: translateX(0); } 92.5% { transform: translateX(6px); } 95% { transform: translateX(-6px); } 97.5% { transform: translateX(6px); } 100% { transform: translateX(0); } } ._accordion_6tej3_172 { position: absolute; bottom: 0; left: 0; width: 100%; }/* 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 -------------------------- */ .fade-enter-active[data-v-d428ffd7], .fade-leave-active[data-v-d428ffd7] { transition: opacity 200ms; } .fade-enter[data-v-d428ffd7], .fade-leave-to[data-v-d428ffd7] { opacity: 0; }