Changeset ff3b8ce in Klonkt for src/assets/css/reply-editor.css


Ignore:
Timestamp:
07/19/2026 11:36:33 PM (7 weeks ago)
Author:
Robin <roboburr@…>
Branches:
main
Children:
8ed65a6
Parents:
e9c9ae1
git-author:
Robin <roboburr@…> (07/19/2026 11:36:10 PM)
git-committer:
Robin <roboburr@…> (07/19/2026 11:36:33 PM)
Message:

Polish: reply editor styled as a sibling of the post editor (klonkt-demo-3dp)

The rich reply editor worked but looked ad-hoc. This is a visual pass, no
behavior change:

  • Toolbar: text glyphs (B/I/link/list/quote/paperclip) replaced with the post editor's Feather SVG icons; 32px buttons, transparent border, 6px radius, hover only on hover-capable devices, and an is-active accent-filled state reflecting the caret's formatting (bold/italic/list) via queryCommandState.
  • Editor box: framed with a rule border and an accent focus ring, tidy paragraph/list/blockquote/link spacing.
  • Footer, language select, mentions chips and attachment chips restyled to the same rule/paper/accent tokens; the mobile full-screen top bar gets a divider.

Reuses the theme's --rule/--paper/--paper-2/--accent tokens so it tracks light
and dark. 97 tests green; browser-verified: 32px SVG buttons + separator, framed
editor (10px radius), bold shows is-active on selection, mobile full-screen top
bar order and z-index intact.

Co-Authored-By: Claude Opus 4.8 <noreply@…>

File:
1 edited

Legend:

Unmodified
Added
Removed

  • src/assets/css/reply-editor.css

    re9c9ae1 rff3b8ce  
    1 /* Rich reply editor (partials/reply-editor.ejs + js/reply-editor.js). */
     1/* Rich reply editor (partials/reply-editor.ejs + js/reply-editor.js).
     2   Styled as a small sibling of the post editor (pe-*): same 32px icon buttons,
     3   same accent-active state, same framed feel, scaled down for a reply. */
     4
    25/* !important: site CSS gives forms inside comment threads `display: contents`,
    36   which collapses the form to a 0x0 non-box — flex layout AND the fixed
    47   full-screen overlay silently break. This component must own its box. */
    5 .re-form[data-re] { display: flex !important; flex-direction: column; gap: .45rem; }
     8.re-form[data-re] { display: flex !important; flex-direction: column; gap: .5rem; }
    69
    7 .re-toolbar { display: flex; gap: .25rem; flex-wrap: wrap; }
     10/* ── Toolbar (matches .pe-toolbar) ─────────────────────────────────────── */
     11.re-toolbar { display: flex; align-items: center; gap: .1rem; flex-wrap: wrap; }
    812.re-toolbar button {
    9   border: 1px solid color-mix(in srgb, var(--ink, #000) 14%, transparent);
    10   background: none; color: inherit; border-radius: 8px;
    11   min-width: 2rem; height: 1.9rem; padding: 0 .45rem;
    12   font-size: .85rem; line-height: 1; cursor: pointer;
     13  display: inline-flex; align-items: center; justify-content: center;
     14  width: 32px; height: 32px; padding: 0;
     15  background: transparent; border: 1px solid transparent; border-radius: 6px;
     16  color: var(--ink, currentColor); cursor: pointer;
     17  touch-action: manipulation; -webkit-user-select: none; user-select: none;
     18  -webkit-tap-highlight-color: transparent;
     19  transition: background .15s ease, color .15s ease, border-color .15s ease;
    1320}
    14 .re-toolbar button:hover { background: color-mix(in srgb, var(--ink, #000) 8%, transparent); }
     21.re-toolbar button svg { width: 16px; height: 16px; }
     22@media (hover: hover) {
     23  .re-toolbar button:hover { background: var(--paper-2, color-mix(in srgb, var(--ink, #000) 8%, transparent)); color: var(--accent, #06c); }
     24}
     25.re-toolbar button:active { transform: scale(.94); }
     26.re-toolbar button.is-active { background: var(--accent, #06c); color: #fff; border-color: var(--accent, #06c); }
     27.re-toolbar button.is-active svg { color: #fff; }
     28.re-toolbar-sep { width: 1px; height: 18px; background: var(--rule, color-mix(in srgb, var(--ink, #000) 16%, transparent)); margin: 0 .3rem; flex-shrink: 0; }
    1529
     30/* ── Editor box (matches .pe-editor) ───────────────────────────────────── */
    1631.re-editor {
    17   min-height: 4.2rem; padding: .55rem .7rem; border-radius: 10px;
    18   border: 1px solid color-mix(in srgb, var(--ink, #000) 16%, transparent);
    19   background: transparent; overflow-wrap: anywhere; outline: none;
     32  min-height: 4rem; padding: .6rem .75rem; border-radius: 10px;
     33  border: 1px solid var(--rule, color-mix(in srgb, var(--ink, #000) 16%, transparent));
     34  background: var(--paper, transparent); color: inherit;
     35  overflow-wrap: anywhere; outline: none; line-height: 1.5;
     36  transition: border-color .15s ease, box-shadow .15s ease;
    2037}
    21 .re-editor:focus { border-color: var(--accent, #06c); }
     38.re-editor:focus {
     39  border-color: var(--accent, #06c);
     40  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #06c) 18%, transparent);
     41}
    2242.re-editor:empty::before { content: attr(data-ph); color: color-mix(in srgb, var(--ink, #000) 40%, transparent); pointer-events: none; }
    23 .re-editor blockquote { margin: .4rem 0; padding-left: .7rem; border-left: 3px solid color-mix(in srgb, var(--ink, #000) 20%, transparent); }
     43.re-editor p { margin: 0 0 .5rem; }
     44.re-editor p:last-child { margin-bottom: 0; }
     45.re-editor ul, .re-editor ol { margin: .4rem 0; padding-left: 1.4rem; }
     46.re-editor blockquote {
     47  margin: .4rem 0; padding: .1rem 0 .1rem .75rem;
     48  border-left: 3px solid color-mix(in srgb, var(--ink, #000) 22%, transparent);
     49  color: color-mix(in srgb, var(--ink, #000) 78%, transparent);
     50}
     51.re-editor a { color: var(--accent, #06c); }
     52.re-editor.re-drop { border-color: var(--accent, #06c); border-style: dashed; background: color-mix(in srgb, var(--accent, #06c) 6%, transparent); }
    2453
    25 .re-foot { display: flex; align-items: center; gap: .6rem; justify-content: flex-end; }
     54/* ── Footer: language + send ───────────────────────────────────────────── */
     55.re-foot { display: flex; align-items: center; gap: .6rem; }
     56.re-foot .re-send { margin-left: auto; }
    2657.re-lang {
    27   font: inherit; font-size: .82rem; padding: .3rem .45rem; border-radius: 8px;
    28   border: 1px solid color-mix(in srgb, var(--ink, #000) 16%, transparent);
    29   background: transparent; color: inherit; max-width: 10rem;
     58  font: inherit; font-size: .82rem; padding: .32rem .5rem; border-radius: 8px;
     59  border: 1px solid var(--rule, color-mix(in srgb, var(--ink, #000) 16%, transparent));
     60  background: transparent; color: inherit; max-width: 11rem;
    3061}
    3162
    32 /* Mentions bar (u02): conversation partners as removable chips. */
    33 .re-mentions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
    34 .re-mentions-label { font-size: .78rem; color: color-mix(in srgb, var(--ink, #000) 55%, transparent); }
     63/* ── Mentions bar (u02): removable partner chips ───────────────────────── */
     64.re-mentions { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
     65.re-mentions-label { font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; color: color-mix(in srgb, var(--ink, #000) 50%, transparent); }
    3566.re-mention {
    36   display: inline-flex; align-items: center; gap: .2rem;
    37   padding: .15rem .3rem .15rem .55rem; border-radius: 999px; font-size: .8rem;
    38   background: color-mix(in srgb, var(--accent, #06c) 14%, transparent);
    39   border: 1px solid color-mix(in srgb, var(--accent, #06c) 30%, transparent);
     67  display: inline-flex; align-items: center; gap: .1rem;
     68  padding: .12rem .2rem .12rem .5rem; border-radius: 999px; font-size: .78rem; line-height: 1.5;
     69  background: color-mix(in srgb, var(--accent, #06c) 12%, transparent);
     70  border: 1px solid color-mix(in srgb, var(--accent, #06c) 28%, transparent);
    4071  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    4172}
    42 .re-mention-del { border: none; background: none; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 .25rem; }
     73.re-mention-del { display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; border: none; background: none; color: inherit; opacity: .65; font-size: 1rem; line-height: 1; cursor: pointer; }
     74.re-mention-del:hover { opacity: 1; }
    4375
    44 /* Media attachments (chips under the editor). */
     76/* ── Media attachment chips (while composing) ──────────────────────────── */
    4577.re-attachments { display: flex; flex-wrap: wrap; gap: .4rem; }
    4678.re-att {
    47   display: inline-flex; align-items: center; gap: .35rem;
    48   padding: .25rem .4rem; border-radius: 8px; font-size: .8rem;
    49   background: color-mix(in srgb, var(--ink, #000) 7%, transparent);
     79  display: inline-flex; align-items: center; gap: .4rem;
     80  padding: .25rem .3rem .25rem .5rem; border-radius: 10px; font-size: .78rem;
     81  background: var(--paper-2, color-mix(in srgb, var(--ink, #000) 7%, transparent));
     82  border: 1px solid var(--rule, color-mix(in srgb, var(--ink, #000) 12%, transparent));
    5083  max-width: 100%; overflow: hidden;
    5184}
    52 .re-att img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; display: block; }
    53 .re-att-del { border: none; background: none; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 .15rem; }
    54 .re-att-err { background: color-mix(in srgb, #c00 18%, transparent); }
    55 .re-editor.re-drop { border-color: var(--accent, #06c); border-style: dashed; }
     85.re-att img { width: 40px; height: 40px; object-fit: cover; border-radius: 7px; display: block; }
     86.re-att-del { display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; border: none; background: none; color: inherit; opacity: .65; font-size: 1.05rem; line-height: 1; cursor: pointer; }
     87.re-att-del:hover { opacity: 1; }
     88.re-att-busy { opacity: .7; }
     89.re-att-err { background: color-mix(in srgb, #c00 16%, transparent); border-color: color-mix(in srgb, #c00 35%, transparent); }
    5690
    57 /* Media on a sent reply in the thread (fedi-node). */
    58 .re-reply-media { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
    59 .re-reply-media img { max-width: min(260px, 100%); max-height: 260px; border-radius: 10px; display: block; }
     91/* ── Media on a sent reply in the thread (fedi-node) ───────────────────── */
     92.re-reply-media { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
     93.re-reply-media img { max-width: min(260px, 100%); max-height: 260px; border-radius: 12px; display: block; }
    6094.re-reply-media audio { max-width: 100%; }
    61 .re-reply-media video { max-width: min(320px, 100%); border-radius: 10px; }
     95.re-reply-media video { max-width: min(320px, 100%); border-radius: 12px; }
    6296
    63 /* Full-screen compose (mobile). JS toggles .re-full on the form. */
    64 .re-head { display: flex; align-items: center; gap: .6rem; }
    65 .re-head-title { flex: 1; text-align: center; font-size: .95rem; }
    66 .re-cancel {
    67   border: none; background: none; color: inherit; font-size: 1.5rem;
    68   line-height: 1; padding: .25rem .5rem; cursor: pointer;
    69 }
     97/* ── Full-screen compose (mobile). JS toggles .re-full on the form. ────── */
     98.re-head { display: flex; align-items: center; gap: .6rem; padding-bottom: .2rem; border-bottom: 1px solid var(--rule, color-mix(in srgb, var(--ink, #000) 12%, transparent)); }
     99.re-head-title { flex: 1; text-align: center; font-size: .95rem; font-weight: 600; }
     100.re-cancel { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: none; background: none; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 8px; }
     101@media (hover: hover) { .re-cancel:hover { background: var(--paper-2, color-mix(in srgb, var(--ink, #000) 8%, transparent)); } }
     102
    70103.re-form.re-full {
    71104  /* Above the bottom tab bar (1050) and the profile/audio sheets (1100). */
    72105  position: fixed; inset: 0; z-index: 1200;
    73   background: var(--paper, #fff); padding: .8rem .9rem;
     106  background: var(--paper, #fff); padding: .8rem .9rem; gap: .55rem;
    74107  padding-top: calc(.8rem + env(safe-area-inset-top));
    75108  padding-bottom: calc(.8rem + env(safe-area-inset-bottom));
    76   gap: .6rem;
    77109}
    78110.re-form.re-full .re-head { order: -1; }   /* the top bar stays topmost, above the mentions bar */
    79 .re-form.re-full .re-editor { flex: 1; min-height: 0; overflow-y: auto; border: none; padding: .4rem .1rem; }
    80 .re-form.re-full .re-editor:focus { border: none; }
     111.re-form.re-full .re-editor { flex: 1; min-height: 0; overflow-y: auto; border: none; box-shadow: none; padding: .4rem .1rem; }
     112.re-form.re-full .re-editor:focus { border: none; box-shadow: none; }
    81113.re-form.re-full .re-send { display: none; }         /* send lives in the top bar */
    82114.re-form.re-full .re-foot { justify-content: flex-start; }
Note: See TracChangeset for help on using the changeset viewer.