Automata/packages/editor-ui/src/n8n-theme.scss

@import '@n8n/chat/css';
@import 'styles';

:root {
	--node-type-background-l: 95%;

	--node-type-supplemental-label-color-h: 235;
	--node-type-supplemental-label-color-s: 28%;
	--node-type-supplemental-label-color-l: 40%;
	--node-type-supplemental-label-color: hsl(
		var(--node-type-supplemental-label-color-h),
		var(--node-type-supplemental-label-color-s),
		var(--node-type-supplemental-label-color-l)
	);
	--node-type-supplemental-color-h: 235;
	--node-type-supplemental-color-s: 28%;
	--node-type-supplemental-color-l: 60%;
	--node-type-supplemental-icon: var(--color-foreground-dark);
	--node-type-supplemental-color: hsl(
		var(--node-type-supplemental-color-h),
		var(--node-type-supplemental-color-s),
		var(--node-type-supplemental-color-l)
	);
	--node-type-supplemental-background: hsl(
		var(--node-type-supplemental-color-h),
		var(--node-type-supplemental-color-s),
		var(--node-type-background-l)
	);
	--node-type-supplemental-connector-color: var(--color-foreground-dark);
	--node-type-ai_chain-color-h: var(--node-type-supplemental-color-h);
	--node-type-ai_chain-color-s: var(--node-type-supplemental-color-s);
	--node-type-ai_chain-color-l: var(--node-type-supplemental-color-l);
	--node-type-ai_chain-color: hsl(
		var(--node-type-ai_chain-color-h),
		var(--node-type-ai_chain-color-s),
		var(--node-type-ai_chain-color-l)
	);
	--node-type-chain-background: hsl(
		var(--node-type-ai_chain-color-h),
		var(--node-type-ai_chain-color-s),
		var(--node-type-background-l)
	);
	--node-type-ai_document-color-h: var(--node-type-supplemental-color-h);
	--node-type-ai_document-color-s: var(--node-type-supplemental-color-s);
	--node-type-ai_document-color-l: var(--node-type-supplemental-color-l);
	--node-type-ai_document-color: hsl(
		var(--node-type-ai_document-color-h),
		var(--node-type-ai_document-color-s),
		var(--node-type-ai_document-color-l)
	);
	--node-type-ai_document-background: hsl(
		var(--node-type-ai_document-color-h),
		var(--node-type-ai_document-color-s),
		var(--node-type-background-l)
	);
	--node-type-ai_embedding-color-h: var(--node-type-supplemental-color-h);
	--node-type-ai_embedding-color-s: var(--node-type-supplemental-color-s);
	--node-type-ai_embedding-color-l: var(--node-type-supplemental-color-l);
	--node-type-ai_embedding-color: hsl(
		var(--node-type-ai_embedding-color-h),
		var(--node-type-ai_embedding-color-s),
		var(--node-type-ai_embedding-color-l)
	);
	--node-type-ai_embedding-background: hsl(
		var(--node-type-ai_embedding-color-h),
		var(--node-type-ai_embedding-color-s),
		var(--node-type-background-l)
	);
	--node-type-ai_languageModel-color-h: var(--node-type-supplemental-color-h);
	--node-type-ai_languageModel-color-s: var(--node-type-supplemental-color-s);
	--node-type-ai_languageModel-color-l: var(--node-type-supplemental-color-l);
	--node-type-ai_languageModel-color: hsl(
		var(--node-type-ai_languageModel-color-h),
		var(--node-type-ai_languageModel-color-s),
		var(--node-type-ai_languageModel-color-l)
	);
	--node-type-ai_languageModel-background: hsl(
		var(--node-type-ai_languageModel-color-h),
		var(--node-type-ai_languageModel-color-s),
		var(--node-type-background-l)
	);
	--node-type-ai_memory-color-h: var(--node-type-supplemental-color-h);
	--node-type-ai_memory-color-s: var(--node-type-supplemental-color-s);
	--node-type-ai_memory-color-l: var(--node-type-supplemental-color-l);
	--node-type-ai_memory-color: hsl(
		var(--node-type-ai_memory-color-h),
		var(--node-type-ai_memory-color-s),
		var(--node-type-ai_memory-color-l)
	);
	--node-type-ai_memory-background: hsl(
		var(--node-type-ai_memory-color-h),
		var(--node-type-ai_memory-color-s),
		var(--node-type-background-l)
	);
	--node-type-ai_outputParser-color-h: var(--node-type-supplemental-color-h);
	--node-type-ai_outputParser-color-s: var(--node-type-supplemental-color-s);
	--node-type-ai_outputParser-color-l: var(--node-type-supplemental-color-l);
	--node-type-ai_outputParser-color: hsl(
		var(--node-type-ai_outputParser-color-h),
		var(--node-type-ai_outputParser-color-s),
		var(--node-type-ai_outputParser-color-l)
	);
	--node-type-ai_outputParser-background: hsl(
		var(--node-type-ai_outputParser-color-h),
		var(--node-type-ai_outputParser-color-s),
		var(--node-type-background-l)
	);
	--node-type-ai_tool-color-h: var(--node-type-supplemental-color-h);
	--node-type-ai_tool-color-s: var(--node-type-supplemental-color-s);
	--node-type-ai_tool-color-l: var(--node-type-supplemental-color-l);
	--node-type-ai_tool-color: hsl(
		var(--node-type-ai_tool-color-h),
		var(--node-type-ai_tool-color-s),
		var(--node-type-ai_tool-color-l)
	);
	--node-type-ai_tool-background: hsl(
		var(--node-type-ai_tool-color-h),
		var(--node-type-ai_tool-color-s),
		var(--node-type-background-l)
	);
	--node-type-ai_retriever-color-h: var(--node-type-supplemental-color-h);
	--node-type-ai_retriever-color-s: var(--node-type-supplemental-color-s);
	--node-type-ai_retriever-color-l: var(--node-type-supplemental-color-l);
	--node-type-ai_retriever-color: hsl(
		var(--node-type-ai_retriever-color-h),
		var(--node-type-ai_retriever-color-s),
		var(--node-type-ai_retriever-color-l)
	);
	--node-type-ai_retriever-background: hsl(
		var(--node-type-ai_retriever-color-h),
		var(--node-type-ai_retriever-color-s),
		var(--node-type-background-l)
	);
	--node-type-ai_textSplitter-color-h: var(--node-type-supplemental-color-h);
	--node-type-ai_textSplitter-color-s: var(--node-type-supplemental-color-s);
	--node-type-ai_textSplitter-color-l: var(--node-type-supplemental-color-l);
	--node-type-ai_textSplitter-color: hsl(
		var(--node-type-ai_textSplitter-color-h),
		var(--node-type-ai_textSplitter-color-s),
		var(--node-type-ai_textSplitter-color-l)
	);
	--node-type-ai_textSplitter-background: hsl(
		var(--node-type-ai_textSplitter-color-h),
		var(--node-type-ai_textSplitter-color-s),
		var(--node-type-background-l)
	);
	--node-type-ai_vectorRetriever-color-h: var(--node-type-supplemental-color-h);
	--node-type-ai_vectorRetriever-color-s: var(--node-type-supplemental-color-s);
	--node-type-ai_vectorRetriever-color-l: var(--node-type-supplemental-color-l);
	--node-type-ai_vectorRetriever-color: hsl(
		var(--node-type-ai_vectorRetriever-color-h),
		var(--node-type-ai_vectorRetriever-color-s),
		var(--node-type-ai_vectorRetriever-color-l)
	);
	--node-type-ai_vectorRetriever-background: hsl(
		var(--node-type-ai_vectorRetriever-color-h),
		var(--node-type-ai_vectorRetriever-color-s),
		var(--node-type-background-l)
	);
	--node-type-ai_vectorStore-color-h: var(--node-type-supplemental-color-h);
	--node-type-ai_vectorStore-color-s: var(--node-type-supplemental-color-s);
	--node-type-ai_vectorStore-color-l: var(--node-type-supplemental-color-l);
	--node-type-ai_vectorStore-color: hsl(
		var(--node-type-ai_vectorStore-color-h),
		var(--node-type-ai_vectorStore-color-s),
		var(--node-type-ai_vectorStore-color-l)
	);
	--node-type-ai_vectorStore-background: hsl(
		var(--node-type-ai_vectorStore-color-h),
		var(--node-type-ai_vectorStore-color-s),
		var(--node-type-background-l)
	);

	// Using native css variable enables us to use this value in JS
	--header-height: 65;
	--chat-width: 350;

	// n8n-chat customizations
	--chat--spacing: var(--spacing-2xs);

	--chat--header-height: calc(var(--header-height) * 1px);
	--chat--header--padding: 0 var(--spacing-xs);
	--chat--heading--font-size: var(--font-size-m);
	--chat--subtitle--font-size: var(--font-size-s);
	--chat--subtitle--line-height: var(--font-line-height-base);
	--chat--header--background: var(--color-background-xlight);
	--chat--header--color: var(--color-text-dark);
	--chat--header--border-bottom: var(--border-base);
	--chat--close--button--color-hover: var(--color-primary);
	// Message styles
	--chat--message--padding: var(--spacing-3xs);
	--chat--message--font-size: 14px;
	--chat--message-line-height: 1.5;
	--chat--message--bot--border: 1px solid var(--color-foreground-light);
	--chat--message--bot--color: var(--color-text-dark);
	--chat--message--user--color: var(--color-text-dark);
	--chat--message--user--background: var(--color-success-tint-1);
	--chat--message--user--border: 1px solid var(--color-success-light-2);
	// Chat input
	--chat--input--font-size: var(--font-size-s);
	--chat--input--send--button--color: var(--color-success);
}

.clickable {
	cursor: pointer !important;
}
.primary-color {
	color: $color-primary;
}
.text-light {
	color: $custom-font-light;
	font-weight: 400;
}

// Dialog
.el-overlay {
	background-color: var(--color-dialog-overlay-background-dark);
}

.el-dialog {
	border: var(--border-base);
	box-shadow: 0px 6px 16px rgb(68 28 23 / 6%);
	border-radius: 8px;

	&.classic {
		.el-dialog__header {
			padding: 15px 20px;
		}

		.el-dialog__headerbtn {
			position: absolute;
			top: 0;
			right: -50px;
			color: var(--color-foreground-xlight);
			background-color: var(--color-background-dark);
			border-radius: 0 18px 18px 0;
			z-index: 110;
			font-size: 1.7em;
			text-align: center;
			line-height: 30px;
			height: 50px;
			width: 50px;
			.el-dialog__close {
				color: var(--color-foreground-xlight);
				font-weight: 400;
			}
			.el-dialog__close:hover {
				transform: scale(1.2);
			}
		}
		.el-dialog__body {
			color: $custom-dialog-text-color;
			padding: 0 20px 20px 20px;
		}
		.el-dialog__title {
			color: $custom-dialog-text-color;
		}
	}
}

.el-message-box {
	background-color: $custom-dialog-background;
	border: none;
	.el-message-box__headerbtn {
		.el-message-box__close {
			color: $custom-dialog-text-color;
		}
	}
	.el-message-box__content,
	.el-message-box__title {
		color: $custom-dialog-text-color;
	}
	.el-message-box-icon {
		width: var(--spacing-l);
		height: var(--spacing-l);
		&--warning {
			color: var(--color-warning);
		}
	}
}

// Notification Message
.el-message p {
	line-height: 1.5em;
}

// Table
.el-table {
	thead th {
		color: var(--color-text-base);
		background-color: var(--color-background-base);
	}
	tr {
		color: var(--color-text-dark);

		td {
			border: none;
		}
	}
	.tr {
		color: var(--color-text-dark);
	}
}

// Tabs
.type-selector:focus,
.el-tabs__header:focus,
.el-tabs__nav-wrap:focus,
.el-tabs__nav-scroll:focus,
.el-tabs__nav:focus {
	outline: none;
}
.el-tabs__item.is-active {
	font-weight: bold;
}

.el-tabs__content {
	border: 1px solid var(--color-foreground-base);
	border-radius: 0px var(--border-radius-base) var(--border-radius-base);
}
.el-tabs__header {
	border-bottom: 0 !important;
}
.el-tabs__nav {
	padding: 0;
	overflow: hidden;
}
.el-tabs__item {
	padding: var(--spacing-5xs) var(--spacing-2xs) !important;
	height: auto;
	line-height: var(--font-line-height-xloose);
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size-2xs);

	&:not([aria-selected='true']) {
		background-color: var(--color-background-base);
		border-bottom: 1px solid var(--color-foreground-base) !important;
	}
}

// Loading Indicator
.el-loading-mask {
	background-color: var(--color-foreground-xlight);
	opacity: 0.8;
}

// Pagination
.el-pager li,
.el-pagination .btn-prev,
.el-pagination .btn-next {
	background: none;
	color: var(--color-text-dark);
}
.el-pagination button:disabled {
	background: none;
	color: var(--color-text-lighter);
}
.el-pager li.btn-quicknext,
.el-pager li.btn-quickprev {
	color: var(--color-text-dark);
}

// Notification
.el-notification {
	border-radius: 4px;
	border: none;
}

.el-notification__content {
	text-align: left;
	word-break: break-word;
	max-height: 60vh;
	overflow-y: auto;
}

.tags-container {
	.el-select-tags-wrapper .el-tag {
		font-size: 12px;
		font-weight: 400;
		display: flex;
		align-items: center;

		&.is-closable {
			overflow-y: hidden;
		}

		.el-tag__close {
			max-height: 15px;
			max-width: 15px;
			margin-left: var(--spacing-4xs);

			&:hover {
				background-color: $tag-close-background-hover-color !important;
			}
		}
	}
}

.add-option {
	> * {
		border: none;
	}

	.el-select .el-input.is-disabled {
		.el-input__icon {
			opacity: 1 !important;
			cursor: not-allowed;
			color: var(--color-foreground-dark);
		}
		.el-input__inner,
		.el-input__inner::placeholder {
			opacity: 1;
			color: var(--color-foreground-dark);
		}
	}
	.el-select .el-input:not(.is-disabled) .el-input__icon {
		color: var(--color-text-dark);
	}
	.el-input .el-input__inner {
		text-align: center;
	}
	.el-input:not(.is-disabled) .el-input__inner {
		&,
		&:hover,
		&:focus {
			padding-left: 35px;
			border-radius: var(--border-radius-base);
			color: var(--color-text-dark);
			background-color: var(--color-background-base);
			border-color: var(--color-foreground-base);
			text-align: center;
		}

		&::placeholder {
			color: var(--color-text-dark);
			opacity: 1; /** Firefox */
		}
	}
}