diff --git a/src/main/java/org/vaadin/tinymce/TinyMce.java b/src/main/java/org/vaadin/tinymce/TinyMce.java index 4394b62..1962d6d 100644 --- a/src/main/java/org/vaadin/tinymce/TinyMce.java +++ b/src/main/java/org/vaadin/tinymce/TinyMce.java @@ -22,7 +22,9 @@ import com.vaadin.flow.component.HasSize; import com.vaadin.flow.component.Tag; import com.vaadin.flow.component.UI; +import com.vaadin.flow.component.dependency.CssImport; import com.vaadin.flow.component.dependency.JavaScript; +import com.vaadin.flow.component.dependency.StyleSheet; import com.vaadin.flow.component.html.Div; import com.vaadin.flow.dom.Element; import com.vaadin.flow.dom.ShadowRoot; @@ -46,6 +48,7 @@ @Tag("div") @JavaScript("./tinymceConnector.js") @JavaScript("context://frontend/tinymce_addon/tinymce/tinymce.js") +@CssImport("./tinymceLumo.css") public class TinyMce extends AbstractCompositeField implements HasSize { diff --git a/src/main/resources/META-INF/resources/frontend/tinymceLumo.css b/src/main/resources/META-INF/resources/frontend/tinymceLumo.css new file mode 100644 index 0000000..da5f63a --- /dev/null +++ b/src/main/resources/META-INF/resources/frontend/tinymceLumo.css @@ -0,0 +1,131 @@ +.tox .tox-editor-header > .tox-menubar { + background-color: var(--lumo-contrast-5pct); + padding-left: var(--lumo-space-s); + padding-right: var(--lumo-space-s); +} + +.tox .tox-editor-container .tox-editor-header .tox-toolbar-overlord > .tox-toolbar__primary { + background-color: var(--lumo-contrast-5pct); + padding-left: var(--lumo-space-s); + padding-right: var(--lumo-space-s); + border-top: unset; +} + +.tox:not([dir=rtl]) .tox-toolbar-overlord .tox-toolbar__group:not(:last-of-type) { + border-right: 1px solid var(--lumo-contrast-20pct); +} + +.tox button.tox-tbtn--enabled { + background: var(--lumo-primary-color); +} + +.tox button.tox-tbtn--enabled:hover { + background: var(--lumo-primary-color); +} + +.tox button.tox-tbtn:hover { + background: var(--lumo-contrast-10pct); +} + +.tox .tox-tbtn--disabled[aria-disabled="true"] .tox-icon > svg { + fill: var(--lumo-contrast-20pct); +} + +.tox .tox-tbtn .tox-icon > svg { + fill: var(--lumo-contrast-60pct); +} + +.tox .tox-tbtn--enabled .tox-icon > svg { + fill: var(--lumo-primary-contrast-color); +} + +.tox .tox-tbtn--enabled:hover .tox-icon > svg { + fill: var(--lumo-primary-contrast-color); +} + +.tox.tox-tinymce { + border: 1px solid var(--lumo-contrast-20pct); + border-radius: var(--lumo-border-radius-m); +} + +.tox .tox-statusbar__text-container .tox-statusbar__path-item { + color: var(--lumo-secondary-text-color); +} + +.tox .tox-statusbar__text-container .tox-statusbar__path-divider { + color: var(--lumo-secondary-text-color); +} + +.tox .tox-statusbar__text-container { + font-size: var(--lumo-font-size-s); +} + +button.tox-mbtn.tox-mbtn--select.tox-mbtn--active { + background: var(--lumo-primary-color-50pct); + color: var(--lumo-primary-contrast-color); +} + +.tox-menubar > button.tox-mbtn.tox-mbtn--select:hover:not(:disabled) { + background: var(--lumo-primary-color-10pct); +} + +button.tox-mbtn.tox-mbtn--select { + color: var(--lumo-body-text-color); + font-size: var(--lumo-font-size-m); +} + +button.tox-tbtn.tox-tbtn--select.tox-tbtn--bespoke { + color: var(--lumo-body-text-color); +} + +.tox-menu.tox-collection.tox-collection--list.tox-selected-menu { + border-radius: var(--lumo-border-radius-m); +} + +.tox-menu.tox-collection.tox-collection--list { + background: var(--lumo-base-color); + box-shadow: var(--lumo-box-shadow-s); + box-shadow: var(--lumo-box-shadow-m); +} + +.tox .tox-menu.tox-collection--list .tox-collection__item.tox-collection__item--active { + color: var(--lumo-body-text-color); + background-color: var(--lumo-primary-color-10pct); +} + +.tox-menu-nav__js.tox-collection__item.tox-collection__item { + color: var(--lumo-body-text-color); +} + +.tox .tox-collection > .tox-collection__group { + border-color: var(--lumo-contrast-20pct) !important; + padding-top: var(--lumo-space-s) !important; + padding-bottom: var(--lumo-space-s) !important; +} + +div.tox-collection__item > div.tox-collection__item-accessory { + color: var(--lumo-secondary-text-color); +} + +div.tox-collection__item > div.tox-collection__item-label { + font-size: var(--lumo-font-size-m); + line-height: var(--lumo-line-height-m); +} + +div.tox-collection__item > div.tox-collection__item-icon { + width: var(--lumo-size-s); + height: var(--lumo-size-s); +} + +.tox .tox-collection__item > .tox-collection__item-caret svg { + fill: var(--lumo-contrast-50pct); +} + +.tox .tox-fancymenuitem .tox-insert-table-picker .tox-insert-table-picker__selected { + background-color: var(--lumo-primary-color-10pct); + border-color: var(--lumo-primary-color-50pct); +} + +.tox .tox-fancymenuitem .tox-insert-table-picker .tox-insert-table-picker { + border-color: var(--lumo-contrast-20pct); +}