jodit-ui-themes
Version:
CSS themes for the Jodit editor, its file browser and the Jodit PRO finder: Office 2010, Windows 10/11, macOS, Material 3, Dracula, Nord, Catppuccin and more
412 lines (346 loc) • 9.82 kB
text/less
// Shared editor rules for token-based themes.
//
// `.jui-editor()` styles the editor, popups, menus, form fields and dialogs
// from the `--ui-*` custom properties a theme sets in the same block. It is
// a mixin (no CSS of its own): every theme calls it inside its
// `:is(.jodit_theme_<name>, .jodit-dialog_theme_<name>, .jodit-file-browser-pro_theme_<name>)`
// block, see themes/<name>/<name>.editor.less.
//
// Jodit names its custom properties `--jd-*` in the built CSS, so the mixin
// maps the theme tokens onto those names.
.jui-editor() {
--jd-color-border: var(--ui-line);
--jd-color-separator: var(--ui-line);
--jd-color-panel: var(--ui-surface);
--jd-color-text: var(--ui-text);
--jd-color-text-icons: var(--ui-icon);
--jd-color-icon: var(--ui-icon);
--jd-color-label: var(--ui-muted);
--jd-color-placeholder: var(--ui-muted);
--jd-color-white: var(--ui-field-bg);
--jd-color-gray: var(--ui-field-border);
--jd-color-background-default: var(--ui-surface);
--jd-color-background-light-gray: var(--ui-surface-alt);
--jd-color-background-gray: var(--ui-surface-alt);
--jd-color-background-gray-hover: var(--ui-hover-bg);
--jd-color-background-button-hover: var(--ui-hover-bg);
--jd-color-button-background-hover: var(--ui-hover-bg);
--jd-color-button-background-hover-opacity40: var(--ui-pressed-bg);
--jd-color-button-background-hover-opacity60: var(--ui-pressed-hover-bg);
--jd-color-background-selection: var(--ui-selection);
--jd-border-radius-default: var(--ui-btn-radius);
--jd-font-default: var(--ui-font);
--jd-font-size-default: var(--ui-font-size);
// Toolbar: one surface instead of the default ruled rows
.jodit-toolbar__box:not(:empty) {
border-bottom-color: var(--ui-toolbar-border);
background: var(--ui-toolbar-bg);
.jodit-toolbar-editor-collection::after {
display: none;
}
}
.jodit-toolbar-collection,
.jodit-toolbar-editor-collection {
&_mode_horizontal {
background-image: none;
}
}
.jodit-ui-separator,
.jodit-ui-group_separated_true:not(
:last-child,
.jodit-ui-group_before-spacer_true
)::after {
border-right-color: var(--ui-line);
}
.jodit-ui-break {
border-top-color: transparent;
}
// Toolbar and menu buttons
.jodit-toolbar-button,
.jodit-toolbar-select,
.jodit-ui-button {
border-radius: var(--ui-btn-radius);
color: var(--ui-icon);
svg,
.jodit-icon {
fill: var(--ui-icon);
}
&__text {
color: var(--ui-text);
}
}
.jodit-toolbar-button:hover:not([disabled]),
.jodit-toolbar-select:hover:not([disabled]) {
border-color: var(--ui-hover-border);
}
.jodit-toolbar-button:has(> [aria-pressed='true']:not([disabled])) {
border-color: var(--ui-pressed-border);
}
.jodit-toolbar-button__button,
.jodit-toolbar-button__trigger,
.jodit-toolbar-select__button,
.jodit-toolbar-select__trigger,
.jodit-ui-button:not([class*='_variant_']),
.jodit-ui-button_variant_initial {
&:hover:not([disabled]),
&:focus-visible:not([disabled]) {
background: var(--ui-hover-bg);
}
&:active:not([disabled]),
&[aria-pressed='true']:not([disabled]) {
background: var(--ui-pressed-bg);
svg {
fill: var(--ui-pressed-icon);
}
}
&[aria-pressed='true']:hover:not([disabled]) {
background: var(--ui-pressed-hover-bg);
}
}
.jodit-toolbar-button__button {
border-radius: var(--ui-btn-radius);
}
.jodit-toolbar-button_with-trigger_true {
.jodit-toolbar-button__button {
border-radius: var(--ui-btn-radius) 0 0 var(--ui-btn-radius);
}
.jodit-toolbar-button__trigger {
border-radius: 0 var(--ui-btn-radius) var(--ui-btn-radius) 0;
}
&:hover:not([disabled]) .jodit-toolbar-button__trigger {
opacity: 1;
}
}
.jodit-toolbar-button:focus-visible,
.jodit-toolbar-button__button:focus-visible {
outline: 2px solid var(--ui-accent);
outline-offset: -2px;
}
// Tabs (image and link popups): Jodit paints the active label separately
.jodit-tabs .jodit-tabs__buttons .jodit-ui-button {
&:active:not([disabled]),
&[aria-pressed='true']:not([disabled]) {
.jodit-ui-button__text {
background: transparent;
}
}
}
// Push buttons in dialogs and forms
.jodit-dialog__footer .jodit-ui-button,
.jodit-ui-button_variant_default,
.jodit-ui-button_variant_secondary {
border: 1px solid var(--ui-push-border);
border-radius: var(--ui-push-radius);
background: var(--ui-push-bg);
box-shadow: var(--ui-push-shadow);
color: var(--ui-push-text);
svg {
fill: var(--ui-push-text);
stroke: var(--ui-push-text);
}
.jodit-ui-button__text {
color: var(--ui-push-text);
}
&:focus-visible:not([disabled]) {
background: var(--ui-push-bg);
}
&:hover:not([disabled]) {
border-color: var(--ui-push-hover-border);
background: var(--ui-push-hover-bg);
color: var(--ui-push-text);
}
&:active:not([disabled]),
&[aria-pressed='true']:not([disabled]) {
background: var(--ui-push-active-bg);
color: var(--ui-push-text);
}
&:focus:not([disabled]) {
outline: 2px solid var(--ui-accent);
outline-offset: 1px;
}
}
.jodit-ui-button_variant_primary {
border: 1px solid var(--ui-primary-border);
border-radius: var(--ui-push-radius);
background: var(--ui-primary-bg);
color: var(--ui-primary-text);
svg {
fill: var(--ui-primary-text);
stroke: var(--ui-primary-text);
}
.jodit-ui-button__text {
color: var(--ui-primary-text);
}
&:hover:not([disabled]),
&:active:not([disabled]),
&:focus-visible:not([disabled]) {
border-color: var(--ui-primary-hover-bg);
background: var(--ui-primary-hover-bg);
color: var(--ui-primary-text);
}
}
// Editing surface
&.jodit-container {
border-color: var(--ui-frame);
border-radius: var(--ui-radius);
background-color: var(--ui-content-bg);
}
&.jodit-container:not(.jodit_inline) .jodit-workplace {
border-color: var(--ui-content-bg);
}
&.jodit-container .jodit-toolbar__box:not(:empty) {
border-radius: var(--ui-radius) var(--ui-radius) 0 0;
}
.jodit-wysiwyg,
.jodit-wysiwyg_iframe {
background-color: var(--ui-content-bg);
color: var(--ui-content-text);
}
.jodit-wysiwyg a {
color: var(--ui-link);
}
.jodit-placeholder {
color: var(--ui-muted);
}
// Status bar
.jodit-status-bar {
height: 24px;
border-radius: 0 0 var(--ui-radius) var(--ui-radius);
background: var(--ui-status-bg);
color: var(--ui-status-text);
text-transform: none;
&:not(:empty) {
border-top-color: var(--ui-toolbar-border);
}
&,
.jodit-status-bar__item,
.jodit-status-bar__item > span,
.jodit-status-bar__item a,
a.jodit-status-bar-link {
&,
&:hover,
&:visited {
color: var(--ui-status-text);
}
}
.jodit-status-bar__item a:hover {
background: var(--ui-hover-bg);
}
}
// Popups and menus
&.jodit-popup,
&.jodit-context-menu {
overflow: hidden;
border: 1px solid var(--ui-menu-border);
border-radius: var(--ui-menu-radius);
box-shadow: var(--ui-menu-shadow);
}
&.jodit-popup .jodit-popup__content,
&.jodit-context-menu,
&.jodit-context-menu [class*='__content'] {
background: var(--ui-menu-bg);
color: var(--ui-text);
}
.jodit-toolbar-collection_mode_vertical,
.jodit-toolbar-editor-collection_mode_vertical {
.jodit-toolbar-button {
border-color: transparent;
}
.jodit-toolbar-button__button {
&:hover:not([disabled]) {
background: var(--ui-menu-hover-bg);
.jodit-toolbar-button__text {
color: var(--ui-menu-hover-text);
}
svg {
fill: var(--ui-menu-hover-text);
}
}
&[aria-pressed='true']:not([disabled]) {
background: var(--ui-pressed-bg);
}
}
}
&.jodit-context-menu .jodit-ui-button:hover:not([disabled]) {
background: var(--ui-menu-hover-bg);
.jodit-ui-button__text {
color: var(--ui-menu-hover-text);
}
svg {
fill: var(--ui-menu-hover-text);
}
}
// Form fields
.jodit-input,
.jodit-select,
.jodit-ui-input__wrapper,
.jodit-ui-select__wrapper,
.jodit-ui-text-area__wrapper,
.jodit-form input[type='text'],
.jodit-form input[type='url'],
.jodit-form textarea {
border-color: var(--ui-field-border);
border-radius: var(--ui-field-radius);
background-color: var(--ui-field-bg);
color: var(--ui-field-text);
&:hover {
border-color: var(--ui-field-hover-border);
}
&:focus,
&:focus-within {
border-color: var(--ui-field-focus-border);
box-shadow: var(--ui-field-focus-ring);
outline: 0;
}
}
.jodit-ui-input__input,
.jodit-ui-select__input,
.jodit-ui-text-area__input {
background-color: transparent;
color: var(--ui-field-text);
}
.jodit-ui-input__icon svg,
.jodit-ui-input__clear svg {
fill: var(--ui-muted);
}
.jodit-drag-and-drop__file-box,
.jodit_uploadfile_button {
border-radius: var(--ui-field-radius);
color: var(--ui-text);
}
// Dialog window
&.jodit-dialog {
.jodit-dialog__panel {
overflow: hidden;
border: 1px solid var(--ui-dialog-border);
border-radius: var(--ui-dialog-radius);
background-color: var(--ui-surface);
box-shadow: var(--ui-shadow);
color: var(--ui-text);
}
.jodit-dialog__header {
min-height: 36px;
border-bottom-color: var(--ui-dialog-header-border);
background: var(--ui-dialog-header-bg);
}
.jodit-dialog__header-title {
color: var(--ui-dialog-title);
font-size: var(--ui-dialog-title-size);
font-weight: var(--ui-dialog-title-weight);
}
.jodit-dialog__header-toolbar [class*='_close'] .jodit-toolbar-button__button:hover:not([disabled]) {
background: var(--ui-close-hover-bg);
svg {
fill: var(--ui-close-hover-icon);
stroke: var(--ui-close-hover-icon);
}
}
.jodit-dialog__content {
color: var(--ui-text);
}
.jodit-dialog__footer {
border-top: 1px solid var(--ui-dialog-header-border);
background: var(--ui-dialog-footer-bg);
}
}
}