editorjs-ui.css

.codex-editor {
	--bg-color: var(--background-normal) !important;
	--front-color: var(--foreground-normal) !important;
	--border-color: var(--border-normal) !important;
}

.codex-editor .ce-toolbar__plus,
.codex-editor .ce-toolbar__settings-btn {
	color: var(--foreground-normal);
	background-color: var(--background-normal);
	border-radius: var(--border-radius);
}

.codex-editor .ce-toolbar__plus:hover,
.codex-editor .ce-toolbar__settings-btn:hover {
	background-color: var(--background-normal-alt);
}

.codex-editor .ce-toolbar__plus svg,
.codex-editor .ce-toolbar__settings-btn svg {
	fill: var(--foreground-normal) !important;
}

.codex-editor .cdx-settings-button svg,
.codex-editor .ce-inline-toolbar__dropdown svg,
.codex-editor .ce-inline-toolbar .ce-inline-tool svg,
.codex-editor .ce-settings .ce-settings__button svg {
	fill: var(--v-list-color) !important;
}

.codex-editor .ce-inline-toolbar .ce-inline-tool--active svg,
.codex-editor .ce-settings .cdx-settings-button--active svg {
	fill: var(--primary) !important;
}

.codex-editor .ce-toolbar .ce-toolbox__button svg,
.codex-editor .ce-toolbar .ce-toolbox__button:hover svg {
	fill: var(--foreground-normal);
}

.codex-editor .cdx-loader::before {
	border: 3px solid var(--background-normal-alt);
	border-left-color: var(--primary);
}

.codex-editor .cdx-search-field {
	border-radius: var(--border-radius) !important;
	border: none;
	background: var(--background-subdued);
}

.codex-editor .ce-popover {
	background: var(--background-page);
	border-color: var(--border-normal);
	border-width: var(--border-width);
	border-radius: var(--border-radius);
}

.codex-editor .ce-popover__item--focused {
	--webkit-box-shadow: none;
	box-shadow: none;
	background: var(--v-list-background-color-active) !important;
}

.codex-editor .ce-popover__item:hover {
	background: var(--v-list-background-color-hover) !important;
}

.codex-editor .ce-popover__item-icon {
	background: var(--background-page);
	border-color: var(--background-normal-alt);
}

.codex-editor .ce-popover__item-icon svg {
	fill: var(--foreground-normal);
}

.codex-editor .ce-popover__item-secondary-label {
	color: var(--foreground-subdued);
}

.codex-editor .ce-popover__items:not(:first-child) {
	border-top: var(--border-width) solid var(--border-normal);
	padding-top: 8px;
}

.codex-editor .image-tool--loading .image-tool__image,
.codex-editor .ce-block--selected .ce-block__content {
	background: var(--module-background-alt);
}

.codex-editor .image-tool--loading .image-tool__image {
	border-color: var(--border-normal);
}

.codex-editor .ce-inline-toolbar__toggler-and-button-wrapper {
	padding: 0;
}

.codex-editor .ce-inline-toolbar__dropdown {
	margin: 0;
	border-color: var(--border-normal);
}

.codex-editor .ce-inline-tool {
	padding: 0 10px !important;
}

.codex-editor .ce-settings__button--confirm.ce-settings__button--confirm {
	background-color: var(--danger-110) !important;
}

.codex-editor .ce-settings__button--confirm.ce-settings__button--confirm svg {
	fill: var(--foreground-normal-alt) !important;
}

/* Tooltips */
.ct {
	-webkit-box-shadow: none;
	box-shadow: none;
}

.ct:before,
.ct:after {
	background-color: var(--background-inverted);
}

.ct__content {
	background-color: var(--background-inverted);
	color: var(--foreground-inverted);
	border-radius: 4px;
	padding: 8px;
	font-size: inherit;
}

/* Button balloons */

.codex-editor .ce-toolbox__button.ce-toolbox__button--active {
	background: var(--background-normal-alt);
}

.codex-editor .ce-toolbox__button.ce-toolbox__button--active svg {
	fill: var(--primary);
}

.codex-editor .ce-conversion-toolbar,
.codex-editor .ce-inline-toolbar,
.codex-editor .ce-settings {
	background: var(--background-subdued);
	border-color: var(--border-normal);
	border-width: var(--border-width);
	border-radius: var(--border-radius);
}

.codex-editor .cdx-settings-button:hover,
.codex-editor .ce-conversion-tool:hover,
.codex-editor .ce-inline-toolbar__dropdown:hover,
.codex-editor .ce-inline-toolbar .ce-inline-tool:hover,
.codex-editor .ce-settings .ce-settings__button:hover {
	background: var(--background-normal-alt);
}

.codex-editor .ce-conversion-toolbar .ce-conversion-tool--focused:not(:hover) {
	--webkit-box-shadow: unset;

	color: var(--primary);
	background-color: var(--v-list-item-background-color-hover) !important;
	box-shadow: unset;
}

.codex-editor .ce-conversion-tool:hover {
	--webkit-box-shadow: unset;

	color: var(--v-list-item-color-hover);
	background-color: var(--v-list-item-background-color-hover) !important;
	box-shadow: unset;
}

.codex-editor .ce-conversion-toolbar__label {
	color: var(--foreground-normal);
}

.codex-editor .ce-conversion-tool__icon {
	background: transparent;
}

/* Textarea and inputs */

.codex-editor [contentEditable='true'][data-placeholder]::before {
	font-weight: unset;
}

.codex-editor .ce-code__textarea {
	font-family: var(--family-monospace);
}

.codex-editor .cdx-input,
.codex-editor .ce-code__textarea {
	color: var(--foreground-normal);
	font-size: inherit;
	background-color: var(--background-page);
	border: var(--border-width) solid var(--border-normal);
	border-radius: var(--border-radius);
	box-shadow: unset;
}

.codex-editor .cdx-input:hover,
.codex-editor .ce-code__textarea:hover {
	border-color: var(--border-normal-alt);
}

.codex-editor .cdx-input:focus,
.codex-editor .ce-code__textarea:focus {
	border-color: var(--primary);
}

.codex-editor .ce-inline-tool-input {
	color: var(--primary);
	background: var(--background-normal);
	border-top-color: var(--border-normal);
}

/* Buttons */

.codex-editor .cdx-button {
	color: var(--v-button-color);
	font-weight: var(--v-button-font-weight);
	font-size: var(--v-button-font-size);
	text-decoration: none;
	background-color: var(--v-button-background-color);
	border: var(--border-width) solid var(--v-button-background-color);
	border-radius: var(--border-radius);
	cursor: pointer;
}

.codex-editor .cdx-button:hover {
	color: var(--v-button-color-hover);
	background-color: var(--v-button-background-color-hover);
	border-color: var(--v-button-background-color-hover);
}