once-campfire/app/assets/stylesheets/actiontext.css

/* Resolve Lexxy's palette to Campfire's, in the editor and in rendered messages,
   so everything follows Campfire's light/dark color scheme */
.lexxy-content {
  --lexxy-color-canvas: transparent;
  --lexxy-color-text: var(--color-text);
  --lexxy-color-text-subtle: var(--color-text);
  --lexxy-color-link: var(--color-link);
  --lexxy-color-ink: var(--color-text);
  --lexxy-color-ink-inverted: var(--color-text-reversed);
  --lexxy-color-ink-medium: var(--color-text);
  --lexxy-color-ink-lighter: var(--color-border-darker);
  --lexxy-color-ink-lightest: var(--color-bg);
  --lexxy-color-selected: var(--color-selected, var(--color-bg));
  --lexxy-color-code-bg: var(--color-bg);

  /* Campfire's message lines stack without extra block margins */
  --lexxy-content-margin: 0;
}

lexxy-editor {
  &.input {
    --lexxy-editor-padding: 0;

    /* One line high when empty. Lexxy derives this from attr(rows lh, 8lh),
       whose resolution differs between Chrome versions — pin it instead of
       risking the 8-line fallback */
    --lexxy-editor-rows: 1lh;

    background: transparent;
    border: 0;
    border-radius: 0;
    min-height: 24px;
  }

  .attachment--content {
    margin: 0;
    display: inline-flex;
  }
}

/* The mentions menu needs a solid surface — the editor's transparent canvas
   would let messages show through it */
.lexxy-prompt-menu {
  --lexxy-color-canvas: var(--color-bg);

  border: 1px solid var(--color-border-dark);
}

/* Same for the code block language picker: with a transparent canvas the
   native dropdown renders white-on-white in dark mode */
lexxy-editor lexxy-code-language-picker select {
  background-color: var(--color-bg);
  color: var(--color-text);

  option {
    background-color: var(--color-bg);
    color: var(--color-text);
  }
}

/* The toolbar only shows when rich text mode is toggled on (see composer.css) */
lexxy-toolbar {
  /* Wide, airy button spacing like the Trix toolbar */
  --lexxy-toolbar-gap: 1.3em;

  /* Match the compact size of the Trix toolbar buttons */
  --lexxy-toolbar-button-size: 1.7em;
  --lexxy-toolbar-icon-size: 1.125em;

  display: none;
  border-block-end: 0;
  min-width: 0;
  z-index: 3;

  /* Tools Campfire doesn't offer, matching the Trix toolbar: underline,
     color highlights, tables, dividers and undo/redo (history tools were
     hidden under Trix as well) */
  button[name="underline"],
  button[name="table"],
  button[name="divider"],
  button[name="undo"],
  button[name="redo"],
  lexxy-highlight-dropdown {
    display: none !important;
  }

  /* No group separator pipes, like the Trix toolbar */
  .lexxy-editor__toolbar-button.lexxy-editor__toolbar-group-end::after {
    display: none;
  }

  /* Dropdown panels: a solid surface with a uniform radius. Lexxy derives
     the panel's radius and gap from --lexxy-toolbar-gap, which Campfire
     repurposes for button spacing */
  .lexxy-editor__toolbar-dropdown [data-dropdown-panel] {
    --lexxy-color-canvas: var(--color-bg);
    --lexxy-color-ink-lightest: var(--color-message-bg);
    --lexxy-color-selected: var(--color-selected);
    --lexxy-color-selected-hover: var(--color-message-bg);

    border: 1px solid var(--color-border-dark);
    border-radius: 0.5em;
    gap: 0.25em;
    padding: 0.25em;
  }

  .lexxy-editor__toolbar-dropdown > .lexxy-editor__toolbar-button[aria-expanded="true"] {
    border-radius: var(--lexxy-radius);
  }
}

/* Attachment markup contains formatting whitespace that must not turn into
   line breaks under the editor's white-space: pre-wrap */
lexxy-editor action-text-attachment {
  white-space: normal;
}

action-text-attachment[content-type~="application/vnd.campfire.mention"] {
  display: inline-flex;
  margin: 0;
  padding: 0;
  position: relative;
}

action-text-attachment[content-type~="application/vnd.actiontext.opengraph-embed"] {
  lexxy-editor & {
    display: block;
    inline-size: fit-content;
    max-inline-size: 100%;
  }

  /* No selection background — it peeks through the card's rounded corners.
     The lexxy-editor prefix out-specifies Lexxy's own selection rule. */
  lexxy-editor &.node--selected {
    --lexxy-attachment-bg-color: transparent;
  }

  /* A prominent remove button on the card's top edge, horizontally
     centered, like the Trix one. The lexxy-editor prefix out-specifies
     Lexxy's own placement rules. */
  lexxy-editor & lexxy-node-delete-button {
    inset-block-start: 0;
    inset-inline-start: 50%;
    inset-inline-end: auto;
    transform: translate(-50%, -50%);

    .lexxy-floating-controls__group {
      --button-size: 2.2em;

      background-color: var(--color-negative);
      border-radius: 50%;
      color: white;
    }
  }
}

.lexxy-content {
  pre {
    background-color: var(--color-bg) !important;
    border-radius: 0.5em;
    border: 1px solid var(--color-border);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monaco, monospace;
    font-size: 0.8rem !important;
    margin: 0 !important;
    padding: 1em !important;
    white-space: pre-wrap !important;
    word-wrap: break-word;
  }

  --blockquote-border: var(--inline-space-half);
  --blockquote-padding: 1.5ch;
  --blockquote-margin: var(--inline-space);

  blockquote {
    border: 0 solid var(--color-border-darker) !important;
    border-inline-start-width: var(--blockquote-border) !important;
    font-style: normal;
    margin: 0 var(--blockquote-margin) !important;
    padding-inline-start: var(--blockquote-padding) !important;
  }

  cite {
    display: block;
    margin-inline-start: calc(var(--blockquote-padding));
    font-style: normal;
    font-size: 0.8rem;
    font-weight: 600;

    &::before {
      content: "— ";
      color: var(--color-border-darker);
    }
  }

  a {
    color: var(--color-link);
  }

  /* The composer's mention menu is a list inside the editor too, and keeps Lexxy's own spacing */
  ul:not(.lexxy-prompt-menu),
  ol {
    margin: 0 !important;
    padding: 0 !important;
  }

  li:not(.lexxy-prompt-menu__item) {
    margin: 0 0 0 var(--inline-space-double) !important;
    padding: 0 !important;
  }

  h1 {
    font-size: 1.4rem !important;
    margin: 0;
  }
}