@vaadin/vaadin-lumo-styles/src/components/rich-text-editor.css

Lumo is a design system foundation for modern web applications, used by Vaadin components

/**
 * @license
 * Copyright (c) 2000 - 2026 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
@media lumo_components_rich-text-editor {
  :host {
    min-height: calc(var(--lumo-size-m) * 8);
    font-family: var(--lumo-font-family);
    font-size: var(--lumo-font-size-m);
    line-height: var(--lumo-line-height-m);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
    --_item-indent: var(--lumo-space-m);
    --_marker-indent: var(--lumo-space-xs);
  }

  :host(:focus-within) {
    outline: none;
  }

  .vaadin-rich-text-editor-container {
    background: var(--vaadin-rich-text-editor-background, transparent);
    border: none;
    border-radius: 0;
  }

  [part='content'] {
    background-color: var(--lumo-base-color);
  }

  [part='toolbar'] {
    background-color: var(--vaadin-rich-text-editor-toolbar-background, var(--lumo-contrast-5pct));
    padding: var(--vaadin-rich-text-editor-toolbar-padding, calc(var(--lumo-space-s) - 1px) var(--lumo-space-xs));
    gap: var(--vaadin-rich-text-editor-toolbar-gap, 0);
  }

  [part~='toolbar-button'] {
    padding: var(--vaadin-rich-text-editor-toolbar-button-padding, 0);
    font: inherit;
    line-height: 1;
    text-transform: none;
    background: var(--vaadin-rich-text-editor-toolbar-button-background, transparent);
    border-width: var(--vaadin-rich-text-editor-toolbar-button-border-width, 0);
    width: var(--lumo-size-m);
    height: var(--lumo-size-m);
    border-radius: var(--lumo-border-radius-m);
    color: var(--vaadin-rich-text-editor-toolbar-button-text-color, var(--lumo-contrast-60pct));
    margin: 2px 1px;
    cursor: var(--lumo-clickable-cursor);
    transition:
      background-color 100ms,
      color 100ms;
  }

  [part~='toolbar-button']:not([part~='toolbar-button-pressed']):hover {
    outline: none;
    --vaadin-rich-text-editor-toolbar-button-background: var(--lumo-contrast-5pct);
    --vaadin-rich-text-editor-toolbar-button-text-color: var(--lumo-contrast-80pct);
  }

  [part~='toolbar-button']::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'lumo-icons', var(--lumo-font-family);
    font-size: var(--lumo-icon-size-m);
    mask-image: none;
    background: transparent;
    height: auto;
    width: auto;
  }

  [part~='toolbar-group'] {
    margin: 0 0.5em;
    margin: 0 calc(var(--lumo-space-l) / 2 - 1px);
  }

  [part~='toolbar-button-bold']::before {
    content: 'B';
    font-weight: 700;
  }

  [part~='toolbar-button-italic']::before {
    content: 'I';
    font-style: italic;
  }

  [part~='toolbar-button-underline']::before {
    content: 'U';
    text-decoration: underline;
  }

  [part~='toolbar-button-strike']::before {
    content: 'T';
    text-decoration: line-through;
  }

  [part~='toolbar-button-h1']::before {
    content: 'H1';
    font-size: 1.25em;
    font-size: var(--lumo-font-size-m);
  }

  [part~='toolbar-button-h2']::before {
    content: 'H2';
    font-size: 1em;
    font-size: var(--lumo-font-size-s);
  }

  [part~='toolbar-button-h3']::before {
    content: 'H3';
    font-size: 0.875em;
    font-size: var(--lumo-font-size-xs);
  }

  [part~='toolbar-button-h1']::before,
  [part~='toolbar-button-h2']::before,
  [part~='toolbar-button-h3']::before {
    letter-spacing: -0.05em;
    font-weight: 600;
  }

  [part~='toolbar-button-subscript']::before,
  [part~='toolbar-button-superscript']::before {
    content: 'X';
    font-weight: 600;
    font-size: var(--lumo-font-size-s);
  }

  [part~='toolbar-button-subscript']::after,
  [part~='toolbar-button-superscript']::after {
    content: '2';
    position: absolute;
    top: 50%;
    left: 70%;
    font-size: 0.625em;
    font-weight: 700;
  }

  [part~='toolbar-button-superscript']::after {
    top: 20%;
  }

  [part~='toolbar-button-blockquote']::before {
    content: '”';
    height: 0.6em;
    font-size: var(--lumo-font-size-xxl);
  }

  [part~='toolbar-button-code-block']::before {
    content: var(--lumo-icons-angle-left) var(--lumo-icons-angle-right);
    font-size: var(--lumo-font-size-l);
    letter-spacing: -0.5em;
    margin-left: -0.25em;
    font-weight: 600;
  }

  [part~='toolbar-button-background']::before,
  [part~='toolbar-button-color']::before {
    content: 'A';
    font-size: 1em;
  }

  [part~='toolbar-button-color']::after,
  [part~='toolbar-button-background']::after {
    width: auto;
    height: auto;
    mask-image: none;
    transform: none;
  }

  [part~='toolbar-button-color']::after {
    bottom: 4px;
    left: 25%;
    right: 25%;
    width: 50%;
    height: 4px;
  }

  [part~='toolbar-button-background']::before {
    z-index: 1;
    background-color: var(--lumo-base-color);
    background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
  }

  [part~='toolbar-button-background']::after {
    content: '';
    position: absolute;
    inset: 20%;
    background: repeating-linear-gradient(
      135deg,
      var(--_background-value, currentColor),
      var(--_background-value, currentColor) 1px,
      transparent 1px,
      transparent 2px
    );
  }

  :host([disabled]) [part~='toolbar-button'] {
    --vaadin-rich-text-editor-toolbar-button-background: transparent;
  }

  [part~='toolbar-button']:focus,
  [part~='toolbar-button'][aria-expanded='true'] {
    outline: none;
    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
  }

  @media (hover: none) {
    [part~='toolbar-button']:hover {
      --vaadin-rich-text-editor-toolbar-button-background: transparent;
    }
  }

  [part~='toolbar-button-pressed'] {
    --vaadin-rich-text-editor-toolbar-button-background: var(--vaadin-selection-color, var(--lumo-primary-color));
    --vaadin-rich-text-editor-toolbar-button-text-color: var(--lumo-primary-contrast-color);
  }

  [part~='toolbar-button']:not([part~='toolbar-button-pressed']):active {
    --vaadin-rich-text-editor-toolbar-button-background: var(--lumo-contrast-10pct);
    --vaadin-rich-text-editor-toolbar-button-text-color: var(--lumo-contrast-90pct);
  }

  [part~='toolbar-button-undo']::before {
    content: var(--lumo-icons-undo);
  }

  [part~='toolbar-button-redo']::before {
    content: var(--lumo-icons-redo);
  }

  [part~='toolbar-button-bold']::before,
  [part~='toolbar-button-background']::before,
  [part~='toolbar-button-color']::before,
  [part~='toolbar-button-italic']::before,
  [part~='toolbar-button-underline']::before,
  [part~='toolbar-button-strike']::before {
    font-size: var(--lumo-font-size-m);
    font-weight: 600;
  }

  [part~='toolbar-button-background']:hover::before {
    background-image:
      linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct)),
      linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
  }

  [part~='toolbar-button-background']:active::before {
    background-image:
      linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct)),
      linear-gradient(var(--lumo-contrast-10pct), var(--lumo-contrast-10pct));
  }

  [part~='toolbar-button-list-ordered']::before {
    content: var(--lumo-icons-ordered-list);
  }

  [part~='toolbar-button-list-bullet']::before {
    content: var(--lumo-icons-unordered-list);
  }

  [part~='toolbar-button-outdent']::before {
    content: var(--lumo-icons-outdent);
  }

  [part~='toolbar-button-indent']::before {
    content: var(--lumo-icons-indent);
  }

  [part~='toolbar-button-align-left']::before {
    content: var(--lumo-icons-align-left);
  }

  [part~='toolbar-button-align-center']::before {
    content: var(--lumo-icons-align-center);
  }

  [part~='toolbar-button-align-right']::before {
    content: var(--lumo-icons-align-right);
  }

  [part~='toolbar-button-image']::before {
    content: var(--lumo-icons-photo);
  }

  [part~='toolbar-button-link']::before {
    content: var(--lumo-icons-link);
  }

  [part~='toolbar-button-clean']::before {
    content: var(--lumo-icons-clean);
    font-size: var(--lumo-font-size-l);
  }

  /* Theme variants */

  /* No border */
  :host(:not([theme~='no-border'])) {
    border: 1px solid var(--lumo-contrast-20pct);
  }

  :host(:not([theme~='no-border']):not([readonly])) [part='content'] {
    border-top: 1px solid var(--lumo-contrast-20pct);
  }

  :host([theme~='no-border']) [part='toolbar'] {
    --vaadin-rich-text-editor-toolbar-padding: var(--lumo-space-s) var(--lumo-space-xs);
  }

  /* Compact */
  :host([theme~='compact']) {
    min-height: calc(var(--lumo-size-m) * 6);
  }

  :host([theme~='compact']) [part='toolbar'] {
    --vaadin-rich-text-editor-toolbar-padding: var(--lumo-space-xs) 0;
  }

  :host([theme~='compact'][theme~='no-border']) [part='toolbar'] {
    --vaadin-rich-text-editor-toolbar-padding: calc(var(--lumo-space-xs) + 1px) 0;
  }

  :host([theme~='compact']) [part~='toolbar-button'] {
    width: var(--lumo-size-s);
    height: var(--lumo-size-s);
  }

  :host([theme~='compact']) [part~='toolbar-group'] {
    margin: 0 calc(var(--lumo-space-m) / 2 - 1px);
  }

  .ql-editor {
    color: var(--vaadin-rich-text-editor-content-color, inherit);
    padding: var(--vaadin-rich-text-editor-content-padding, var(--lumo-space-s) var(--lumo-space-m));
  }

  .ql-code-block-container {
    background-color: var(--lumo-contrast-10pct);
    border-radius: var(--lumo-border-radius-m);
    margin-block: 0.3125em;
    padding: 0.3125em 0.625em;
  }

  blockquote {
    padding-left: 1em;
    margin-inline: 40px;
  }

  code {
    background-color: var(--lumo-contrast-10pct);
    font-size: 85%;
    padding: 0.125em 0.25em;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    margin-top: 1.25em;
  }

  :where(h1) {
    margin-bottom: 0.75em;
  }

  :where(h2, h3, h4) {
    margin-bottom: 0.5em;
  }

  :where(h5) {
    margin-bottom: 0.25em;
  }

  /* RTL specific styles */
  :host([dir='rtl']) [part~='toolbar-button-redo']::before {
    content: var(--lumo-icons-undo);
  }

  :host([dir='rtl']) [part~='toolbar-button-undo']::before {
    content: var(--lumo-icons-redo);
  }
}