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
947 lines (946 loc) • 29.6 kB
CSS
/*!
* jodit-ui-themes: Chrome Dark theme for Jodit
* https://github.com/TimurSeyidov/jodit-ui-themes
* Released under the MIT license, see LICENSE in the project root.
*/
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) {
--ui-font: system-ui, -apple-system, 'Segoe UI', roboto, 'Helvetica Neue', arial, sans-serif;
--ui-font-size: 13px;
--ui-text: #1f1f1f;
--ui-muted: #6b6b6b;
--ui-icon: var(--ui-text);
--ui-accent: #0067c0;
--ui-link: var(--ui-accent);
--ui-selection: #b4d7ff;
--ui-surface: #fff;
--ui-surface-alt: #f3f3f3;
--ui-content-bg: #fff;
--ui-content-text: var(--ui-text);
--ui-line: #e0e0e0;
--ui-frame: #d1d1d1;
--ui-radius: 0;
--ui-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
--ui-toolbar-bg: var(--ui-surface);
--ui-toolbar-border: var(--ui-line);
--ui-btn-radius: 4px;
--ui-hover-bg: #ebebeb;
--ui-hover-border: transparent;
--ui-pressed-bg: #dcdcdc;
--ui-pressed-border: transparent;
--ui-pressed-hover-bg: var(--ui-pressed-bg);
--ui-pressed-icon: var(--ui-icon);
--ui-status-bg: var(--ui-toolbar-bg);
--ui-status-text: var(--ui-muted);
--ui-menu-bg: var(--ui-surface);
--ui-menu-border: var(--ui-line);
--ui-menu-radius: 4px;
--ui-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
--ui-menu-hover-bg: var(--ui-hover-bg);
--ui-menu-hover-text: var(--ui-text);
--ui-field-bg: var(--ui-surface);
--ui-field-text: var(--ui-text);
--ui-field-border: #c8c8c8;
--ui-field-hover-border: #a0a0a0;
--ui-field-focus-border: var(--ui-accent);
--ui-field-focus-ring: none;
--ui-field-radius: 4px;
--ui-push-bg: var(--ui-surface);
--ui-push-text: var(--ui-text);
--ui-push-border: var(--ui-field-border);
--ui-push-hover-bg: var(--ui-hover-bg);
--ui-push-hover-border: var(--ui-push-border);
--ui-push-active-bg: var(--ui-pressed-bg);
--ui-push-radius: var(--ui-btn-radius);
--ui-push-shadow: none;
--ui-primary-bg: var(--ui-accent);
--ui-primary-text: #fff;
--ui-primary-border: var(--ui-primary-bg);
--ui-primary-hover-bg: var(--ui-primary-bg);
--ui-dialog-border: var(--ui-frame);
--ui-dialog-radius: var(--ui-radius);
--ui-dialog-header-bg: var(--ui-surface);
--ui-dialog-header-border: var(--ui-line);
--ui-dialog-title: var(--ui-text);
--ui-dialog-title-size: 14px;
--ui-dialog-title-weight: 600;
--ui-dialog-footer-bg: var(--ui-surface-alt);
--ui-close-hover-bg: #c42b1c;
--ui-close-hover-icon: #fff;
--ui-pane-bg: var(--ui-surface-alt);
--ui-pane-text: var(--ui-text);
--ui-pane-border: var(--ui-line);
--ui-source-bg: var(--ui-pane-bg);
--ui-source-text: var(--ui-muted);
--ui-files-bg: var(--ui-content-bg);
--ui-item-radius: 4px;
--ui-item-hover-bg: var(--ui-hover-bg);
--ui-item-hover-border: transparent;
--ui-item-selected-bg: var(--ui-pressed-bg);
--ui-item-selected-border: transparent;
--ui-item-selected-text: var(--ui-text);
--ui-thumb-radius: 4px;
--ui-thumb-border: 0;
--ui-thumb-shadow: none;
--ui-scrollbar: #c2c2c2;
--ui-folder-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M1 1.5h5l1.5 1.5H15v10H1z' fill='%23e0a838'/%3E%3Cpath d='M1 4.5h14V13H1z' fill='%23ffd35c'/%3E%3C/svg%3E");
color-scheme: dark;
--ui-font: 'Google Sans', roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
--ui-text: #e3e3e3;
--ui-muted: #c7c7c7;
--ui-icon: #c7c7c7;
--ui-accent: #a8c7fa;
--ui-selection: #004a77;
--ui-surface: #282828;
--ui-surface-alt: #1f2020;
--ui-content-bg: #282828;
--ui-line: #3c3c3c;
--ui-frame: #1f2020;
--ui-radius: 12px;
--ui-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.5);
--ui-toolbar-bg: #1f2020;
--ui-toolbar-border: #1f2020;
--ui-btn-radius: 16px;
--ui-hover-bg: #353636;
--ui-pressed-bg: #3c3c3c;
--ui-pressed-hover-bg: #474747;
--ui-pressed-icon: #a8c7fa;
--ui-status-bg: #1f2020;
--ui-status-text: #c7c7c7;
--ui-menu-bg: #2d2e31;
--ui-menu-border: transparent;
--ui-menu-radius: 8px;
--ui-menu-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.5);
--ui-menu-hover-bg: #3c3c3c;
--ui-field-bg: #1f2020;
--ui-field-border: #474747;
--ui-field-hover-border: #8e918f;
--ui-field-focus-border: #a8c7fa;
--ui-field-focus-ring: 0 0 0 1px #a8c7fa;
--ui-field-radius: 8px;
--ui-push-bg: #282828;
--ui-push-text: #a8c7fa;
--ui-push-border: #8e918f;
--ui-push-hover-bg: #323539;
--ui-push-active-bg: #3a3e45;
--ui-push-radius: 20px;
--ui-primary-text: #062e6f;
--ui-primary-hover-bg: #b9d2fb;
--ui-dialog-border: transparent;
--ui-dialog-radius: 12px;
--ui-dialog-header-bg: #282828;
--ui-dialog-header-border: transparent;
--ui-dialog-title-size: 15px;
--ui-dialog-title-weight: 500;
--ui-dialog-footer-bg: #282828;
--ui-close-hover-bg: #3c3c3c;
--ui-close-hover-icon: #e3e3e3;
--ui-pane-bg: #1f2020;
--ui-pane-border: #1f2020;
--ui-source-text: #c7c7c7;
--ui-files-bg: #282828;
--ui-item-radius: 12px;
--ui-item-hover-bg: #353636;
--ui-item-selected-bg: #004a77;
--ui-item-selected-text: #c2e7ff;
--ui-thumb-radius: 8px;
--ui-scrollbar: #5e5e5e;
--ui-folder-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M1 2.5C1 1.7 1.7 1 2.5 1h3.6l1.6 1.6h5.8c.8 0 1.5.7 1.5 1.5v7.4c0 .8-.7 1.5-1.5 1.5h-11C1.7 13 1 12.3 1 11.5z' fill='%234c8df6'/%3E%3Cpath d='M1 5h14v6.5c0 .8-.7 1.5-1.5 1.5h-11C1.7 13 1 12.3 1 11.5z' fill='%237cacf8'/%3E%3C/svg%3E");
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-tree {
--jd-color-background-filebrowser-folders: var(--ui-pane-bg);
--jd-color-folder-title: var(--ui-pane-text);
padding-top: 4px;
border-right: 1px solid var(--ui-pane-border);
background: var(--ui-pane-bg);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-tree::-webkit-scrollbar-track {
box-shadow: none;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-tree::-webkit-scrollbar-thumb {
background-color: var(--ui-scrollbar);
outline: 0;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-tree__item {
min-height: 26px;
padding: 2px 8px;
border: 1px solid transparent;
margin: 1px 6px;
border-radius: var(--ui-item-radius);
color: var(--ui-pane-text);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-tree__item-title {
display: flex;
align-items: center;
color: var(--ui-pane-text);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-tree__item-title::before {
width: 16px;
height: 14px;
flex: none;
margin-right: 8px;
background: var(--ui-folder-icon) no-repeat center / contain;
content: '';
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-tree__item:hover {
border-color: var(--ui-item-hover-border);
background: var(--ui-item-hover-bg);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-tree__item:hover .jodit-file-browser-tree__item-title {
color: var(--ui-pane-text);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-tree__item .jodit-ui-button svg {
fill: var(--ui-muted);
stroke: var(--ui-muted);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-tree__source-title {
padding: 6px 12px;
border-bottom: 1px solid var(--ui-pane-border);
background: var(--ui-source-bg);
color: var(--ui-source-text);
font-weight: 600;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-tree__plus {
margin: 6px;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-files {
background: var(--ui-files-bg);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-files::-webkit-scrollbar-thumb {
background-color: var(--ui-scrollbar);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-files__item {
border-color: transparent;
border-radius: var(--ui-item-radius);
text-decoration: none;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-files__item:hover {
border-color: var(--ui-item-hover-border);
background: var(--ui-item-hover-bg);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-files__item_active_true,
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-files__item_active_true:hover {
border-color: var(--ui-item-selected-border);
background: var(--ui-item-selected-bg);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-files__item_active_true .jodit-file-browser-files__item-info,
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-files__item_active_true:hover .jodit-file-browser-files__item-info,
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-files__item_active_true .jodit-file-browser-files__item-info > span,
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-files__item_active_true:hover .jodit-file-browser-files__item-info > span {
background-color: transparent;
color: var(--ui-item-selected-text);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-files_view_tiles .jodit-file-browser-files__item {
height: auto;
min-height: var(--jd-col-size);
flex-direction: column;
justify-content: flex-start;
padding: 6px 6px 4px;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-files_view_tiles .jodit-file-browser-files__item img {
max-height: calc(var(--jd-col-size) - 56px);
box-sizing: border-box;
border: var(--ui-thumb-border);
margin: auto 0;
border-radius: var(--ui-thumb-radius);
box-shadow: var(--ui-thumb-shadow);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-files_view_tiles .jodit-file-browser-files__item .jodit-file-browser-files__item-info {
position: static;
width: 100%;
padding: 4px 0 0;
background: transparent;
color: var(--ui-text);
opacity: 1;
text-align: center;
text-shadow: none;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-files_view_tiles .jodit-file-browser-files__item .jodit-file-browser-files__item-info > span {
color: var(--ui-muted);
font-size: 11px;
line-height: 15px;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-files_view_tiles .jodit-file-browser-files__item .jodit-file-browser-files__item-info > .jodit-file-browser-files__item-info-filename {
color: var(--ui-text);
font-size: 12px;
font-weight: normal;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-files_view_list a {
border-color: transparent;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-files_view_list a:hover {
border-color: var(--ui-item-hover-border);
background: var(--ui-item-hover-bg);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-files_view_list a:hover .jodit-file-browser-files__item-info {
color: var(--ui-text);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-files_view_list a .jodit-file-browser-files__item-info > span {
color: var(--ui-muted);
font-weight: normal;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-files_view_list a .jodit-file-browser-files__item-info > .jodit-file-browser-files__item-info-filename {
color: var(--ui-text);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-preview__navigation svg {
fill: var(--ui-muted);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-preview__navigation:hover svg {
fill: var(--ui-text);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
).jodit-file-browser-pro {
font-family: var(--jd-font-default);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-pro__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);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-pro__header {
min-height: 40px;
border-bottom-color: var(--ui-toolbar-border);
background: var(--ui-toolbar-bg);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-pro__header-title,
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-pro__header-toolbar {
line-height: 38px;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-pro__header-toolbar [class*='_close'] .jodit-toolbar-button__button:hover:not([disabled]) {
background: var(--ui-close-hover-bg);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-pro__header-toolbar [class*='_close'] .jodit-toolbar-button__button:hover:not([disabled]) svg {
fill: var(--ui-close-hover-icon);
stroke: var(--ui-close-hover-icon);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-pro__resizer svg {
fill: var(--ui-muted);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-panel {
--jd-fb-color: var(--ui-text);
--jd-files-bg: var(--ui-files-bg);
--jd-item-bg: transparent;
--jd-item-bg-hover: var(--ui-item-hover-bg);
--jd-item-border-color: transparent;
--jd-item-border-selected-color: var(--ui-item-selected-border);
--jd-item-border-bg-selected-color: var(--ui-item-selected-bg);
--jd-item-info-color: var(--ui-text);
--jd-item-info-bg: transparent;
--jd-sidebar-bg: var(--ui-pane-bg);
--jd-sidebar-color: var(--ui-pane-text);
--jd-sidebar-border-color: var(--ui-pane-border);
--jd-sidebar-hide-btn-bg: var(--ui-pane-bg);
--jd-folder-bg: var(--ui-item-hover-bg);
--jd-folder-border: var(--ui-item-hover-border);
--jd-source-bg: var(--ui-source-bg);
--jd-source-border: var(--ui-pane-border);
--jd-message-bg: var(--ui-surface);
--jd-message-color: var(--ui-text);
--jd-message-shadow-color: var(--ui-line);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-sidebar__box::-webkit-scrollbar-track,
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-virtual-scroll::-webkit-scrollbar-track {
box-shadow: none;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-sidebar__box::-webkit-scrollbar-thumb,
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-virtual-scroll::-webkit-scrollbar-thumb {
background-color: var(--ui-scrollbar);
outline: 0;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-sidebar {
background: var(--ui-pane-bg);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-sidebar__hide-btn svg {
fill: var(--ui-muted);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-source__name {
height: auto;
padding: 8px 12px;
background: var(--ui-source-bg);
color: var(--ui-source-text);
font-weight: 600;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-folder {
padding: 3px 8px;
border: 1px solid transparent;
margin: 1px 6px;
border-radius: var(--ui-item-radius);
color: var(--ui-pane-text);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-folder:hover {
border-color: var(--ui-item-hover-border);
background: var(--ui-item-hover-bg);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-folder_active_true,
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-folder_active_true:hover {
border-color: var(--ui-item-selected-border);
background: var(--ui-item-selected-bg);
color: var(--ui-item-selected-text);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-folder__icon-wrapper {
background: var(--ui-folder-icon) no-repeat center / contain;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-folder__icon-wrapper svg {
display: none;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-folder__arrow svg {
fill: var(--ui-muted);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-item {
border: 1px solid transparent;
border-radius: var(--ui-item-radius);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-item:hover {
border-color: var(--ui-item-hover-border);
background: var(--ui-item-hover-bg);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-item_active_true,
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-item_active_true:hover {
border-color: var(--ui-item-selected-border);
background: var(--ui-item-selected-bg);
outline: 0;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-item_active_true .jodit-ui-browser-item__name,
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-item_active_true:hover .jodit-ui-browser-item__name,
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-item_active_true .jodit-ui-browser-item__time,
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-item_active_true:hover .jodit-ui-browser-item__time,
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-item_active_true .jodit-ui-browser-item__filesize,
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-item_active_true:hover .jodit-ui-browser-item__filesize {
color: var(--ui-item-selected-text);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-item__name {
color: var(--ui-text);
font-weight: normal;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-item__heart svg {
fill: var(--ui-muted);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-item_view_tiles:not(
.jodit-ui-browser-item_size_small,
.jodit-ui-browser-item_size_xsmall
) {
display: flex;
height: auto;
flex-direction: column;
padding: 6px 6px 4px;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-item_view_tiles:not(
.jodit-ui-browser-item_size_small,
.jodit-ui-browser-item_size_xsmall
) .jodit-ui-browser-item__image {
width: 100%;
height: calc(var(--jd-item-size) - 40px);
border-radius: var(--ui-thumb-radius);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-item_view_tiles:not(
.jodit-ui-browser-item_size_small,
.jodit-ui-browser-item_size_xsmall
) .jodit-ui-browser-item__info,
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-item_view_tiles:not(
.jodit-ui-browser-item_size_small,
.jodit-ui-browser-item_size_xsmall
).jodit-ui-browser-item.jodit-ui-browser-item_view_tiles:hover .jodit-ui-browser-item__info {
position: static;
padding: 4px 0 0;
background: transparent;
opacity: 1;
text-align: center;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-item_view_tiles:not(
.jodit-ui-browser-item_size_small,
.jodit-ui-browser-item_size_xsmall
) .jodit-ui-browser-item__name {
font-size: 12px;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-item_view_tiles:not(
.jodit-ui-browser-item_size_small,
.jodit-ui-browser-item_size_xsmall
) .jodit-ui-browser-item__time,
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-item_view_tiles:not(
.jodit-ui-browser-item_size_small,
.jodit-ui-browser-item_size_xsmall
) .jodit-ui-browser-item__filesize {
color: var(--ui-muted);
font-size: 11px;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-settings {
border-left-color: var(--ui-pane-border);
background: var(--ui-surface);
color: var(--ui-text);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-settings__theme {
display: none;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-settings__title {
color: var(--ui-text);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-settings__close {
color: var(--ui-muted);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-settings__close svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-settings__close:hover {
color: var(--ui-text);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-settings__options::-webkit-scrollbar-track {
box-shadow: none;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-settings__options::-webkit-scrollbar-thumb {
background-color: var(--ui-scrollbar);
outline: 0;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-settings .jodit-ui-button-group__label {
color: var(--ui-muted);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-settings .jodit-ui-button-group__options {
display: inline-flex;
overflow: hidden;
border: 1px solid var(--ui-push-border);
border-radius: var(--ui-push-radius);
box-shadow: var(--ui-push-shadow);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-settings .jodit-ui-button-group .jodit-ui-button {
border: 0;
border-radius: 0;
background: var(--ui-push-bg);
box-shadow: none;
color: var(--ui-push-text);
outline: 0;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-settings .jodit-ui-button-group .jodit-ui-button svg {
fill: var(--ui-push-text);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-settings .jodit-ui-button-group .jodit-ui-button .jodit-ui-button__text {
color: var(--ui-push-text);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-settings .jodit-ui-button-group .jodit-ui-button + .jodit-ui-button,
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-settings .jodit-ui-button-group .jodit-ui-button[aria-pressed='true']:not([disabled]) + .jodit-ui-button {
border-left: 1px solid var(--ui-push-border);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-settings .jodit-ui-button-group .jodit-ui-button:hover:not([disabled]) {
background: var(--ui-push-hover-bg);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-settings .jodit-ui-button-group .jodit-ui-button[aria-pressed='true']:not([disabled]) {
background: var(--ui-pressed-bg);
box-shadow: none;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-settings .jodit-ui-button-group .jodit-ui-button[aria-pressed='true']:not([disabled]) .jodit-ui-button__text {
color: var(--ui-pressed-icon);
font-weight: 600;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-settings .jodit-ui-button-group .jodit-ui-button[aria-pressed='true']:not([disabled]) svg {
fill: var(--ui-pressed-icon);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-status-bar {
border-top-color: var(--ui-toolbar-border);
background: var(--ui-status-bg);
color: var(--ui-status-text);
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-status-bar [class*='__slot-'] {
opacity: 1;
}
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-file-browser-tree__item,
:is(
.jodit_theme_chrome-dark,
.jodit-dialog_theme_chrome-dark,
.jodit-file-browser-pro_theme_chrome-dark
) .jodit-ui-browser-folder {
border-radius: 16px;
}