editor.css

/* stylelint-disable selector-no-qualifying-type */

/* Lexical */

.editor-container {
  margin: 0 0 20px;
  border-radius: 2px;
  color: #000;
  position: relative;
  line-height: 20px;
  font-weight: 400;
  text-align: start;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.editor-toolbar-container-readonly {
  display: none;
}

.editor-toolbar-container-editable {
  display: inline;
}

.editor-inner {
  background: #fff;
  position: relative;
}

.editor-input {
  min-height: 150px;
  resize: none;
  font-size: 15px;
  position: relative;
  tab-size: 1;
  outline: 0;
  padding: 15px 10px;
  flex: auto;
}

/* The second selector is not redundant: in the block verse layout paragraphs are nested inside a
   .verse-block wrapper, so a child combinator on .editor-input alone stops matching them and the
   UA default `margin: 1em 0` comes back on every paragraph. */
.editor-input > p,
.editor-input .verse-block > p {
  direction: inherit;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.5;
}

.editor-placeholder {
  color: #999;
  overflow: hidden;
  position: absolute;
  text-overflow: ellipsis;
  top: 15px;
  font-size: 15px;
  user-select: none;
  display: inline-block;
  pointer-events: none;
  margin-block-start: 1em;
  margin-inline-start: calc(10px + 2.5vw);
  width: stretch;
}

.editor-text-bold {
  font-weight: bold;
}

.editor-text-italic {
  font-style: italic;
}

.editor-text-underline {
  text-decoration: underline;
}

.editor-text-strikethrough {
  text-decoration: line-through;
}

/* stylelint-disable-next-line selector-class-pattern */
.editor-text-underlineStrikethrough {
  text-decoration: underline line-through;
}

.editor-typed-mark-external-spelling {
  background: inherit;
  text-decoration: underline wavy red;
}

.editor-typed-mark-external-grammar {
  background: inherit;
  text-decoration: underline wavy grey;
}

.editor-typed-mark-external-other {
  background: inherit;
  text-decoration: underline wavy green;
}

.editor-typed-mark-external-spelling.editor-typed-mark-external-grammar {
  text-decoration-color: rgb(192, 64, 64);
}

.editor-typed-mark-external-spelling.editor-typed-mark-external-grammar.editor-typed-mark-external-other {
  text-decoration-color: rgb(128, 85, 43);
}

.editor-typed-mark-internal-comment {
  background: rgba(255, 212, 0, 0.14);
  border-bottom: 2px solid rgba(255, 212, 0, 0.3);
  padding-bottom: 2px;
}

.editor-typed-mark-internal-comment.selected {
  background: rgba(255, 212, 0, 0.5);
  border-bottom: 2px solid rgba(255, 212, 0, 1);
}

/* stylelint-disable-next-line selector-class-pattern */
.editor-typed-markOverlap-internal-comment {
  background: rgba(255, 212, 0, 0.3);
  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
}

/* stylelint-disable-next-line selector-class-pattern */
.editor-typed-markOverlap-internal-comment.selected {
  background: rgba(255, 212, 0, 0.7);
  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
}

/* TreeView (only used if `debug=true`) */

.tree-view-output {
  display: block;
  background: #222;
  color: #fff;
  padding: 5px;
  font-size: 12px;
  white-space: pre-wrap;
  margin: 1px auto 10px;
  max-height: 250px;
  position: relative;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: auto;
  line-height: 14px;
}

pre::-webkit-scrollbar {
  background: transparent;
  width: 10px;
}

pre::-webkit-scrollbar-thumb {
  background: #999;
}

.debug-timetravel-panel {
  overflow: hidden;
  padding: 0 0 10px;
  margin: auto;
  display: flex;
}

.debug-timetravel-panel-slider {
  padding: 0;
  flex: 8;
}

.debug-timetravel-panel-button {
  padding: 0;
  border: 0;
  background: none;
  flex: 1;
  color: #fff;
  font-size: 12px;
}

.debug-timetravel-panel-button:hover {
  text-decoration: underline;
}

.debug-timetravel-button {
  border: 0;
  padding: 0;
  font-size: 12px;
  top: 10px;
  right: 15px;
  position: absolute;
  background: none;
  color: #fff;
}

.debug-timetravel-button:hover {
  text-decoration: underline;
}

/* ContextMenuPlugin */

.auto-embed-menu {
  width: 150px;
}

.typeahead-popover {
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.typeahead-popover ul {
  padding: 0;
  list-style: none;
  margin: 0;
  border-radius: 8px;
  max-height: 200px;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* The 200px cap on `.typeahead-popover ul` is sized for the marker typeahead's long, FILTERABLE
   list, where scrolling past a fold is the point. The right-click context menu reuses the same
   popover markup but is a short fixed list (~36px per item) with no filter to narrow it, so under
   that cap its last items sit behind a fold. Capped to the viewport instead: the menu portal is
   `position: fixed`, so `vh` is the height of the panel it opens in. Every item shows whenever
   there is room, and the menu still can't outgrow the panel when there isn't.
   Needs the `.typeahead-popover` qualifier to out-specify that rule — the plugin puts both classes
   on the menu's outer element and nests a second `.typeahead-popover` inside it. */
.typeahead-popover.auto-embed-menu ul {
  max-height: calc(100vh - 16px);

  /* The vendored rule pairs `overflow-y: scroll` with a hidden scrollbar, which suits the marker
     typeahead — you narrow that list by typing, not by scrolling. This menu has no filter, so when
     the panel is too short for the whole list the only way to the rest of it is to scroll, and a
     hidden scrollbar leaves nothing on screen saying there is more. `auto` keeps the gutter out of
     the way at the heights where the whole menu already fits. */
  overflow-y: auto;
  scrollbar-width: thin;

  /* Without this, a wheel gesture that reaches the end of the list chains to the ancestor
     scroller. That ancestor's scroll event does not originate inside the menu, so the
     close-on-scroll listener reads it as the page moving out from under a fixed-positioned menu
     and closes the menu mid-read — exactly when the list is long enough to need scrolling. */
  overscroll-behavior: contain;
}

.typeahead-popover ul::-webkit-scrollbar {
  display: none;
}

.typeahead-popover ul li {
  margin: 0;
  min-width: 180px;
  font-size: 14px;
  outline: none;
  cursor: pointer;
  border-radius: 8px;
}

.typeahead-popover ul li.selected {
  background: #eee;
}

.typeahead-popover ul li.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.typeahead-popover li {
  margin: 0 8px;
  padding: 8px;
  color: #050505;
  cursor: pointer;
  line-height: 16px;
  font-size: 15px;
  display: flex;
  align-content: center;
  flex-direction: row;
  flex-shrink: 0;
  background-color: #fff;
  border-radius: 8px;
  border: 0;
}

.typeahead-popover li.active {
  display: flex;
  width: 20px;
  height: 20px;
  background-size: contain;
}

.typeahead-popover li:first-child {
  border-radius: 8px 8px 0 0;
}

.typeahead-popover li:last-child {
  border-radius: 0 0 8px 8px;
}

.typeahead-popover li:hover {
  background-color: #eee;
}

.typeahead-popover li .text {
  display: flex;
  line-height: 20px;
  flex-grow: 1;
  min-width: 150px;
}

.typeahead-popover li .icon {
  display: flex;
  width: 20px;
  height: 20px;
  user-select: none;
  margin-right: 8px;
  line-height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Built-in toolbar (only used if `hasExternalUI=false`) */

.dropdown {
  z-index: 100;
  display: block;
  position: fixed;
  box-shadow:
    0 12px 28px 0 rgba(0, 0, 0, 0.2),
    0 2px 4px 0 rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  min-height: 40px;
  background-color: #fff;
}

.dropdown .item {
  margin: 0 8px 0 8px;
  padding: 8px;
  color: #050505;
  cursor: pointer;
  line-height: 16px;
  font-size: 15px;
  display: flex;
  align-content: center;
  flex-direction: row;
  flex-shrink: 0;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 8px;
  border: 0;
  max-width: 250px;
}

.dropdown .item.block-marker {
  min-width: 420px;
}

.dropdown .item:first-child {
  margin-top: 8px;
}

.dropdown .item:last-child {
  margin-bottom: 8px;
}

.dropdown .item:hover {
  background-color: #eee;
}

.dropdown .item .text {
  display: flex;
  line-height: 20px;
  flex-grow: 1;
  min-width: 150px;
  margin: 0;
  text-indent: 0;
}

.dropdown .item .icon {
  display: flex;
  width: 20px;
  height: 20px;
  user-select: none;
  margin-right: 12px;
  line-height: 16px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.dropdown .divider {
  width: auto;
  background-color: #eee;
  margin: 4px 8px;
  height: 1px;
}

button.item.dropdown-item-active {
  background-color: rgba(223, 232, 250, 0.3);
}

button.item.dropdown-item-active i {
  opacity: 1;
}

i.undo {
  background-image: url("/assets/images/icons/arrow-counterclockwise.svg");
}

i.redo {
  background-image: url("/assets/images/icons/arrow-clockwise.svg");
}

.icon.m,
.icon.nb,
.icon.p,
.icon.pi {
  background-image: url("/assets/images/icons/text-paragraph.svg");
}

.icon.ms,
.icon.ms1,
.icon.r,
.icon.s,
.icon.h1 {
  background-image: url("/assets/images/icons/type-h1.svg");
}

.icon.ms2,
.icon.h2 {
  background-image: url("/assets/images/icons/type-h2.svg");
}

.icon.ms3,
.icon.h3 {
  background-image: url("/assets/images/icons/type-h3.svg");
}

.icon.mt,
.icon.mt1 {
  background-image: url("/assets/images/icons/1-square.svg");
}

.icon.mt2 {
  background-image: url("/assets/images/icons/2-square.svg");
}

.icon.mt3 {
  background-image: url("/assets/images/icons/3-square.svg");
}

.icon.mt4 {
  background-image: url("/assets/images/icons/4-square.svg");
}

.icon.cl {
  background-image: url("/assets/images/icons/bookmark.svg");
}

.icon.ide,
.icon.h,
.icon.h1,
.icon.h2,
.icon.h3,
.icon.toc1,
.icon.toc2,
.icon.toc3 {
  background-image: url("/assets/images/icons/file-earmark.svg");
}

.icon.b,
.icon.q1,
.icon.q2 {
  background-image: url("/assets/images/icons/chat-square-quote.svg");
}

.icon.ban {
  background-image: url("/assets/images/icons/ban.svg");
}

i.chevron-down {
  background-color: transparent;
  background-size: contain;
  display: inline-block;
  height: 8px;
  width: 8px;
  background-image: url("/assets/images/icons/chevron-down.svg");
}

.toolbar {
  display: flex;
  margin-bottom: 1px;
  background: #fff;
  padding: 4px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  vertical-align: middle;
  overflow: auto;
  height: 36px;
  position: sticky;
  top: 0;
  z-index: 2;
}

button.toolbar-item {
  border: 0;
  display: flex;
  background: none;
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
}

button.toolbar-item:disabled {
  cursor: not-allowed;
}

button.toolbar-item.spaced {
  margin-right: 2px;
}

button.toolbar-item i.format {
  background-size: contain;
  height: 18px;
  width: 18px;
  vertical-align: -0.25em;
  display: flex;
  opacity: 0.6;
}

button.toolbar-item:disabled .icon,
button.toolbar-item:disabled .text,
button.toolbar-item:disabled i.format,
button.toolbar-item:disabled .chevron-down {
  opacity: 0.2;
}

.toolbar-item:hover:not([disabled]) {
  background-color: #eee;
}

.toolbar .toolbar-item .text {
  line-height: 20px;
  vertical-align: middle;
  font-size: 14px;
  color: #777;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 170px;
  white-space: nowrap;
  display: inline-block;
  height: 20px;
  text-align: start;
  padding-right: 10px;
}

.toolbar .toolbar-item .icon {
  display: flex;
  width: 20px;
  height: 20px;
  user-select: none;
  margin-right: 8px;
  line-height: 16px;
  background-size: contain;
}

.toolbar i.chevron-down,
.toolbar-item i.chevron-down {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  display: flex;
  user-select: none;
}

.toolbar .divider {
  width: 1px;
  height: 100%;
  background-color: #eee;
  margin: 0 4px;
}

/* Verse marker armed for the two-step intentional delete (first Backspace/Delete selects it).
   Destructive (shadcn) styling — light red background, red text, roomier padding — signals
   "press again to delete". The glow-underline blink is gated on the `verse-delete-armed` root
   class so a verse merely inside an ordinary range selection shows the tint but does not blink.
   Literal reds render in any context (this demo's theme stores --destructive as HSL components, so
   it can't be referenced directly here); the platform app binds these to its live `--destructive`
   theme token instead — see paranext-core's editor-overrides.scss. Lives here in editor.css (not
   usj-nodes.css) because that file will be generated per-project by core, which would drop these. */
/* `verse-selected` is on the inner decorator span (VerseDecorator), NOT the outer `.verse` element
   that carries the marker's own padding/margin. So the roomier background must be applied here, on
   the element that actually paints the red. Padding widens the painted background; an equal negative
   margin cancels the added width so neighboring text does not shift when the marker arms (the red
   fills the space that was previously the outer marker's ~3px gap). */
.verse-selected {
  background-color: color-mix(in srgb, #dc2626 15%, transparent);
  color: #dc2626;
  border-radius: 4px;
  padding: 0 3px;
  margin: 0 -3px;
}

/* Caret-like glow-underline blink, only while armed (see StructureKeyboardPlugin root class). */
@keyframes verse-armed-glow {
  0%,
  100% {
    box-shadow: 0 2px 0 -1px #dc2626;
  }
  50% {
    box-shadow: 0 2px 0 -1px transparent;
  }
}
.verse-delete-armed .verse-selected {
  animation: verse-armed-glow 1.06s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .verse-delete-armed .verse-selected {
    animation: none;
    box-shadow: 0 2px 0 -1px #dc2626; /* static glow underline — still signals "armed" */
  }
}

/* Paragraph marker selected (paragraph-structure view), set by ParaMarkerSelectionPlugin: a tint
   on the paragraph, distinct from the `psc-active-text` focus box, carried across the gutter by an
   offset box-shadow, since the glyph sits outside the paragraph's box. The gutter width is a
   registered length so it computes once on the root; an unregistered `4em` would resolve in each
   paragraph's own font size, and a `\mt1` would overshoot the editor's edge. The tint is a demo
   placeholder the platform app overrides; it lives here, not in usj-nodes.css, which core
   generates per project. */
@property --psc-para-marker-gutter-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
.psc-gutter-markers {
  --psc-para-marker-gutter-width: var(--psc-gutter-width, 4em);
}
.psc-gutter-markers .para.psc-para-marker-selected {
  --psc-para-marker-selected-tint: color-mix(
    in srgb,
    var(--scripture-accent, #c4956a) 18%,
    transparent
  );
  background-color: var(--psc-para-marker-selected-tint);
  box-shadow: calc(-1 * (var(--psc-para-marker-gutter-width) + var(--para-indent, 0px))) 0 0 0
    var(--psc-para-marker-selected-tint);
}
.psc-gutter-markers[dir="rtl"] .para.psc-para-marker-selected {
  box-shadow: calc(var(--psc-para-marker-gutter-width) + var(--para-indent, 0px)) 0 0 0
    var(--psc-para-marker-selected-tint);
}
.psc-gutter-markers .para.psc-para-marker-selected > .marker:not(.verse):not(.chapter):first-child {
  color: var(--scripture-accent, #c4956a);
  font-weight: 700;
}

/* Gutter marker of a paragraph armed for the two-step merge: the same destructive colour, tint and
   blink as an armed verse marker. Only the marker goes, so the paragraph's text is left untinted.
   The marker's text does not sit inside its box (the paragraph's first-line indent carries over to
   it), so the tint is a box drawn behind the text from the bounds StructureKeyboardPlugin measures
   and publishes; without them it covers the marker's whole box, with the same margin. The selector
   out-ranks the gutter marker's own rule. */
.psc-gutter-markers .para > .marker.para-merge-armed:not(.verse):not(.chapter):first-child {
  color: #dc2626;
  isolation: isolate;
}
.psc-gutter-markers .para > .marker.para-merge-armed:not(.verse):not(.chapter):first-child::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--para-merge-armed-text-left, 0px) - 3px);
  width: calc(var(--para-merge-armed-text-width, 100%) + 6px);
  z-index: -1;
  pointer-events: none;
  background-color: color-mix(in srgb, #dc2626 15%, transparent);
  border-radius: 4px;
  animation: verse-armed-glow 1.06s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .psc-gutter-markers
    .para
    > .marker.para-merge-armed:not(.verse):not(.chapter):first-child::before {
    animation: none;
    box-shadow: 0 2px 0 -1px #dc2626;
  }
}