UNPKG

n8n-editor-ui

Version:

Workflow Editor UI for n8n

1,260 lines 26.8 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 -------------------------- */ ._container_9i963_123 { display: flex; align-items: stretch; gap: var(--spacing--2xs); background: var(--color--background--light-3); border: var(--border); border-radius: var(--radius); font-size: var(--font-size--sm); overflow: hidden; } ._container_9i963_123 button { border: none; border-radius: 0; } ._container_9i963_123 button:hover { border-color: inherit; } ._container_9i963_123 button + button { border-left: var(--border); } @media screen and (max-width: 820px) { ._container_9i963_123 { word-wrap: break-word; margin-top: var(--spacing--2xs); } } code { text-overflow: ellipsis; overflow: hidden; white-space: pre; padding: var(--spacing--2xs) var(--spacing--3xs); } ._copy-button-wrapper_9i963_157 { display: flex; align-items: center; border-left: var(--border); } ._copy-button_9i963_157 { border: none; border-radius: 0; }/* 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 -------------------------- */ ._header_yr8i2_123 { display: flex; justify-content: space-between; align-items: center; }/* 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_k3h69_123 { display: flex; flex-direction: column; padding: var(--spacing--xs) var(--spacing--xs) 0; } ._instructions_k3h69_129 { display: flex; flex-direction: column; gap: var(--spacing--xs); padding-left: var(--spacing--lg); margin: var(--spacing--sm); } ._instructions_k3h69_129 li { min-height: var(--spacing--lg); } ._instructions_k3h69_129 ._item_k3h69_139 { display: flex; align-items: center; gap: var(--spacing--2xs); } ._instructions_k3h69_129 ._item_k3h69_139 .n8n-loading div { height: 32px; width: 300px; margin: 0; } ._instructions_k3h69_129 ._label_k3h69_149 { font-size: var(--font-size--sm); flex: none; } ._instructions_k3h69_129 ._url_k3h69_153 { display: flex; align-items: stretch; gap: var(--spacing--2xs); background: var(--color--background--light-3); border: var(--border); border-radius: var(--radius); font-size: var(--font-size--sm); overflow: hidden; } ._instructions_k3h69_129 ._url_k3h69_153 code { text-overflow: ellipsis; overflow: hidden; white-space: pre; padding: var(--spacing--2xs) var(--spacing--3xs); } ._instructions_k3h69_129 ._url_k3h69_153 ._copy-url-wrapper_k3h69_169 { display: flex; align-items: center; border-left: var(--border); } ._instructions_k3h69_129 ._url_k3h69_153 ._copy-url-button_k3h69_174 { border: none; border-radius: 0; } @media screen and (max-width: 820px) { ._instructions_k3h69_129 ._url_k3h69_153 { word-wrap: break-word; margin-top: var(--spacing--2xs); } } ._clients-table_k3h69_185 { padding: 0 var(--spacing--lg); }/* 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_1r8bk_123 { display: flex; flex-direction: column; padding: var(--spacing--xs); } ._instructions-container_1r8bk_129 .notice { margin: var(--spacing--sm) var(--spacing--lg) var(--spacing--md); } ._instructions_1r8bk_129 { display: flex; flex-direction: column; gap: var(--spacing--xs); padding-left: var(--spacing--lg); margin: var(--spacing--sm); } ._instructions_1r8bk_129 li { min-height: var(--spacing--lg); } ._instructions_1r8bk_129 ._item_1r8bk_143 { display: flex; align-items: center; gap: var(--spacing--2xs); } ._instructions_1r8bk_129 ._item_1r8bk_143 .n8n-loading div { height: 32px; width: 300px; margin: 0; } ._instructions_1r8bk_129 ._label_1r8bk_153 { font-size: var(--font-size--sm); flex: none; } ._instructions_1r8bk_129 ._url_1r8bk_157 { display: flex; align-items: stretch; gap: var(--spacing--2xs); background: var(--color--background--light-3); border: var(--border); border-radius: var(--radius); font-size: var(--font-size--sm); overflow: hidden; } ._instructions_1r8bk_129 ._url_1r8bk_157 code { text-overflow: ellipsis; overflow: hidden; white-space: pre; padding: var(--spacing--2xs) var(--spacing--3xs); } ._instructions_1r8bk_129 ._url_1r8bk_157 ._copy-url-wrapper_1r8bk_173 { display: flex; align-items: center; border-left: var(--border); } ._instructions_1r8bk_129 ._url_1r8bk_157 ._copy-url-button_1r8bk_178 { border: none; border-radius: 0; } @media screen and (max-width: 820px) { ._instructions_1r8bk_129 ._url_1r8bk_157 { word-wrap: break-word; margin-top: var(--spacing--2xs); } } ._connectionString_1r8bk_189 { flex-grow: 1; position: relative; padding: 0 var(--spacing--lg); margin-bottom: var(--spacing--sm); } ._connectionString_1r8bk_189 .n8n-markdown { width: 100%; } ._connectionString_1r8bk_189 code { font-size: var(--font-size--xs); tab-size: 1; } ._connectionString_1r8bk_189:hover ._copy-json-button_1r8bk_202 { display: flex; } ._copy-json-button_1r8bk_202 { position: absolute; top: var(--spacing--xl); right: var(--spacing--2xl); display: none; }/* 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_1n2r0_123 { display: flex; flex-direction: column; gap: var(--spacing--md); }/* 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 -------------------------- */ ._workflow-table-container_1c109_123 .table-pagination { display: none; } ._header_1c109_127 { display: flex; justify-content: space-between; align-items: center; } ._workflow-table_1c109_123 tr:last-child { border-bottom: none !important; } ._workflow-cell_1c109_137, ._parent-folder_1c109_138 { display: flex; align-items: center; gap: var(--spacing--4xs); } ._workflow-cell_1c109_137 ._separator_1c109_143, ._workflow-cell_1c109_137 ._ellipsis_1c109_144, ._parent-folder_1c109_138 ._separator_1c109_143, ._parent-folder_1c109_138 ._ellipsis_1c109_144 { padding-bottom: 1px; color: var(--color--text--tint-1); } ._description-cell_1c109_151 { display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; font-style: italic; } ._description-popper_1c109_160 { min-width: 300px; } ._table-link_1c109_164 { color: var(--color--text); } ._table-link_1c109_164 .n8n-text { display: flex; align-items: center; gap: var(--spacing--3xs); } ._table-link_1c109_164 .n8n-text ._link-icon_1c109_172 { display: none; } ._table-link_1c109_164 .n8n-text:hover ._link-icon_1c109_172 { display: inline-flex; } ._table-link_1c109_164._project-link_1c109_178 .n8n-text { gap: 0; } ._table-link_1c109_164._project-link_1c109_178 ._link-icon_1c109_172 { margin-left: 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 -------------------------- */ ._mcp-access-toggle_p4msq_123 { display: flex; flex-direction: column; gap: var(--spacing--sm); width: 100%; } ._main-toggle-container_p4msq_130 { display: flex; align-items: center; padding: var(--spacing--sm); justify-content: space-between; flex-shrink: 0; border-radius: var(--radius); border: var(--border); } ._main-toggle-info_p4msq_140 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } ._main-toggle_p4msq_130 { display: flex; justify-content: flex-end; align-items: center; flex-shrink: 0; } ._toggle-notice_p4msq_154 { display: flex; align-items: center; 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 -------------------------- */ ._container_727ie_123 { display: flex; flex-direction: column; gap: var(--spacing--lg); }