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
482 lines (401 loc) • 10.5 kB
text/less
// Shared file browser rules for token-based themes.
//
// `.jui-finder()` styles the free Jodit file browser and the Jodit PRO
// finder from the `--ui-*` custom properties a theme sets in the same block.
// It is a mixin (no CSS of its own), see themes/<name>/<name>.finder.less.
.jui-finder() {
// Free Jodit file browser
.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);
&::-webkit-scrollbar-track {
box-shadow: none;
}
&::-webkit-scrollbar-thumb {
background-color: var(--ui-scrollbar);
outline: 0;
}
&__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);
&-title {
display: flex;
align-items: center;
color: var(--ui-pane-text);
&::before {
width: 16px;
height: 14px;
flex: none;
margin-right: 8px;
background: var(--ui-folder-icon) no-repeat center / contain;
content: '';
}
}
&:hover {
border-color: var(--ui-item-hover-border);
background: var(--ui-item-hover-bg);
}
&:hover .jodit-file-browser-tree__item-title {
color: var(--ui-pane-text);
}
.jodit-ui-button svg {
fill: var(--ui-muted);
stroke: var(--ui-muted);
}
}
&__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;
}
&__plus {
margin: 6px;
}
}
.jodit-file-browser-files {
background: var(--ui-files-bg);
&::-webkit-scrollbar-thumb {
background-color: var(--ui-scrollbar);
}
&__item {
border-color: transparent;
border-radius: var(--ui-item-radius);
text-decoration: none;
&:hover {
border-color: var(--ui-item-hover-border);
background: var(--ui-item-hover-bg);
}
&_active_true,
&_active_true:hover {
border-color: var(--ui-item-selected-border);
background: var(--ui-item-selected-bg);
.jodit-file-browser-files__item-info,
.jodit-file-browser-files__item-info > span {
background-color: transparent;
color: var(--ui-item-selected-text);
}
}
}
// Tiles: picture with a caption underneath, no overlay
&_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;
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);
}
.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;
> span {
color: var(--ui-muted);
font-size: 11px;
line-height: 15px;
}
> .jodit-file-browser-files__item-info-filename {
color: var(--ui-text);
font-size: 12px;
font-weight: normal;
}
}
}
// List: details rows
&_view_list a {
border-color: transparent;
&:hover {
border-color: var(--ui-item-hover-border);
background: var(--ui-item-hover-bg);
.jodit-file-browser-files__item-info {
color: var(--ui-text);
}
}
.jodit-file-browser-files__item-info > span {
color: var(--ui-muted);
font-weight: normal;
}
.jodit-file-browser-files__item-info > .jodit-file-browser-files__item-info-filename {
color: var(--ui-text);
}
}
}
.jodit-file-browser-preview__navigation {
svg {
fill: var(--ui-muted);
}
&:hover svg {
fill: var(--ui-text);
}
}
// Jodit PRO finder
&.jodit-file-browser-pro {
font-family: var(--jd-font-default);
}
.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);
}
.jodit-file-browser-pro__header {
min-height: 40px;
border-bottom-color: var(--ui-toolbar-border);
background: var(--ui-toolbar-bg);
}
.jodit-file-browser-pro__header-title,
.jodit-file-browser-pro__header-toolbar {
line-height: 38px;
}
.jodit-file-browser-pro__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-file-browser-pro__resizer svg {
fill: var(--ui-muted);
}
// The finder's own tokens
.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);
}
.jodit-ui-sidebar__box,
.jodit-ui-virtual-scroll {
&::-webkit-scrollbar-track {
box-shadow: none;
}
&::-webkit-scrollbar-thumb {
background-color: var(--ui-scrollbar);
outline: 0;
}
}
// Navigation pane
.jodit-ui-sidebar {
background: var(--ui-pane-bg);
}
.jodit-ui-sidebar__hide-btn svg {
fill: var(--ui-muted);
}
.jodit-ui-browser-source__name {
height: auto;
padding: 8px 12px;
background: var(--ui-source-bg);
color: var(--ui-source-text);
font-weight: 600;
}
.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);
&:hover {
border-color: var(--ui-item-hover-border);
background: var(--ui-item-hover-bg);
}
&_active_true,
&_active_true:hover {
border-color: var(--ui-item-selected-border);
background: var(--ui-item-selected-bg);
color: var(--ui-item-selected-text);
}
&__icon-wrapper {
background: var(--ui-folder-icon) no-repeat center / contain;
svg {
display: none;
}
}
&__arrow svg {
fill: var(--ui-muted);
}
}
// Files
.jodit-ui-browser-item {
border: 1px solid transparent;
border-radius: var(--ui-item-radius);
&:hover {
border-color: var(--ui-item-hover-border);
background: var(--ui-item-hover-bg);
}
&_active_true,
&_active_true:hover {
border-color: var(--ui-item-selected-border);
background: var(--ui-item-selected-bg);
outline: 0;
.jodit-ui-browser-item__name,
.jodit-ui-browser-item__time,
.jodit-ui-browser-item__filesize {
color: var(--ui-item-selected-text);
}
}
&__name {
color: var(--ui-text);
font-weight: normal;
}
&__heart svg {
fill: var(--ui-muted);
}
}
// Large tiles: picture with a caption underneath instead of an overlay
.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;
.jodit-ui-browser-item__image {
width: 100%;
height: calc(var(--jd-item-size) - 40px);
border-radius: var(--ui-thumb-radius);
}
// Outweighs the PRO rule that hides the caption on hover
.jodit-ui-browser-item__info,
&.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;
}
.jodit-ui-browser-item__name {
font-size: 12px;
}
.jodit-ui-browser-item__time,
.jodit-ui-browser-item__filesize {
color: var(--ui-muted);
font-size: 11px;
}
}
// Settings panel (gear button): the theme switch is hidden because it
// would replace this theme with Jodit's light or dark one; the options
// become segmented controls
.jodit-ui-browser-settings {
border-left-color: var(--ui-pane-border);
background: var(--ui-surface);
color: var(--ui-text);
&__theme {
display: none;
}
&__title {
color: var(--ui-text);
}
&__close {
color: var(--ui-muted);
svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
}
&:hover {
color: var(--ui-text);
}
}
&__options {
&::-webkit-scrollbar-track {
box-shadow: none;
}
&::-webkit-scrollbar-thumb {
background-color: var(--ui-scrollbar);
outline: 0;
}
}
.jodit-ui-button-group__label {
color: var(--ui-muted);
}
.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);
}
.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;
svg {
fill: var(--ui-push-text);
}
.jodit-ui-button__text {
color: var(--ui-push-text);
}
& + .jodit-ui-button,
&[aria-pressed='true']:not([disabled]) + .jodit-ui-button {
border-left: 1px solid var(--ui-push-border);
}
&:hover:not([disabled]) {
background: var(--ui-push-hover-bg);
}
&[aria-pressed='true']:not([disabled]) {
background: var(--ui-pressed-bg);
box-shadow: none;
.jodit-ui-button__text {
color: var(--ui-pressed-icon);
font-weight: 600;
}
svg {
fill: var(--ui-pressed-icon);
}
}
}
}
// Status bar
.jodit-ui-browser-status-bar {
border-top-color: var(--ui-toolbar-border);
background: var(--ui-status-bg);
color: var(--ui-status-text);
[class*='__slot-'] {
opacity: 1;
}
}
}