/* Forum/composer.css — WYSIWYG composer for forum textareas.
*
* Mount: add data-composer="1" to any (form value)
*
*
* The original textarea is hidden via .composer-shadow but stays in the form
* so its `name`, `required`, `minlength`, `maxlength` keep working. JS
* mirrors editor.innerHTML into textarea.value on every input.
*/
.composer-wrap {
border: 1px solid rgba(255,255,255,0.1);
border-radius: 6px;
background: rgba(0,0,0,0.2);
box-sizing: border-box;
}
.composer-wrap:focus-within {
border-color: var(--neon-blue);
box-shadow: 0 0 5px rgba(0,247,255,0.3);
}
/* Mirror the red :required:invalid border from the inner textarea. */
.composer-wrap:has(textarea:required:invalid) {
border-color: #ff4444;
box-shadow: none;
}
.composer-bar {
display: flex; gap: 4px; padding: 6px 8px;
border-bottom: 1px solid rgba(255,255,255,0.08);
flex-wrap: wrap; align-items: center;
}
.composer-btn {
background: transparent;
border: 1px solid rgba(255,255,255,0.08);
color: var(--text-secondary);
padding: 4px 9px;
border-radius: 4px;
font-size: 0.9rem;
cursor: pointer;
line-height: 1;
min-height: 28px;
min-width: 30px;
display: inline-flex; align-items: center; justify-content: center;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.composer-btn:hover {
color: var(--accent-secondary);
border-color: var(--accent-secondary);
}
/* Quick-toolbar B/I/U/S are one-shot operations on the current selection.
When there is no selection we disable them outright — no hover, no click,
visually muted — so users don't accidentally arm a format and start
typing into it. Insert buttons (link/image/code/emoji) stay enabled. */
.composer-btn:disabled,
.composer-btn:disabled:hover {
opacity: 0.35;
cursor: not-allowed;
color: var(--text-secondary);
border-color: rgba(255,255,255,0.08);
background: transparent;
}
.composer-btn b { font-weight: 800; }
.composer-btn i { font-style: italic; }
.composer-btn u { text-decoration: underline; }
.composer-btn s { text-decoration: line-through; }
.composer-btn code {
background: transparent; padding: 0; font-size: 0.78rem;
color: inherit; border: none;
}
/* The contenteditable editor — styled to look like a textarea. */
.composer-editor {
min-height: 140px;
padding: 12px;
color: var(--text-primary);
font-family: inherit;
font-size: 1rem;
line-height: 1.55;
outline: none;
white-space: pre-wrap;
word-wrap: break-word;
overflow-y: auto;
box-sizing: border-box;
}
.composer-editor:empty::before {
content: attr(data-placeholder);
color: var(--text-muted);
pointer-events: none;
}
/* Format formatted-inline-children of the editor the way the rendered post
shows them — so what the user sees while typing matches the post body. */
/* Links read as classic blue + underline so they're obviously clickable
against the dark body text. --neon-blue is the project brand blue;
--accent-secondary was used before but isn't defined in style.css, so it
fell back to inherited text colour and links looked like regular prose. */
.composer-editor a { color: var(--neon-blue); text-decoration: underline; }
/* Reply quote-header inserted by the ↩ Reply action. Highlighted as a
distinct block so it reads as "this is a reference to another post",
not as part of the user's own prose. Same styling lives on .post-body
blockquote.reply-quote in topic.php so the editor preview matches the
rendered post 1:1. */
.composer-editor blockquote.reply-quote {
margin: 0 0 12px 0;
padding: 8px 12px;
background: rgba(5,217,232,0.07);
border-left: 3px solid var(--neon-blue);
border-radius: 4px;
font-size: 0.9rem;
color: var(--text-secondary);
font-style: normal;
line-height: 1.4;
}
.composer-editor blockquote.reply-quote a {
color: var(--neon-blue);
text-decoration: underline;
font-weight: 700;
}
.composer-editor img { max-width: 100%; vertical-align: middle; }
/* YouTube embed (server validates the src is a YouTube embed URL).
16:9 box that grows to the message column width. Same styling lives
on .post-body iframe in topic.php for an identical look post-save. */
.composer-editor iframe {
display: block;
width: 100%;
max-width: 100%;
aspect-ratio: 16 / 9;
border: none;
border-radius: 6px;
margin: 12px 0;
background: #000;
}
.composer-editor code {
background: rgba(255,255,255,0.06);
padding: 1px 5px;
border-radius: 3px;
font-family: 'Courier New', Consolas, monospace;
font-size: 0.9em;
}
/* Full-width code block. Inserted by the Code toolbar button; users paste
or type snippets inside. white-space: pre preserves source whitespace +
newlines; overflow-x: auto keeps overlong lines scrollable instead of
blowing out the post column. Light theme on purpose — code reads
better as dark-on-light against the surrounding dark editor chrome,
same convention as GitHub / Stack Overflow snippet boxes. The same
styling is mirrored on .post-body pre in topic.php. */
.composer-editor pre {
display: block;
margin: 12px 0;
padding: 12px 14px;
background: #f1f1f3;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 6px;
font-family: 'Consolas', 'Courier New', monospace;
font-size: 0.88rem;
font-weight: 500;
line-height: 1.5;
color: #1a1a1f;
white-space: pre;
overflow-x: auto;
max-width: 100%;
}
/* Inside a the inline reset (no bg / no border) keeps the
block from looking like nested boxes if both tags happen to coexist. */
.composer-editor pre code,
.post-body pre code {
background: transparent;
padding: 0;
border-radius: 0;
font-size: inherit;
}
/* Hide the underlying textarea but keep it submittable (display:none keeps
it in the form). The wrap provides the visible chrome. */
.composer-shadow {
display: none !important;
}
/* Emoji picker — compact grid with FIXED-SIZE square cells. Picker font
stays at 1.15rem (the size that was OK) — the 1.25em bump only applies
to inline emoji inside posts / editor (see .emoji rule below). Cell is
small (28x28) so the emoji fills it tightly, not floating in a big box. */
.composer-emoji {
display: none;
padding: 8px;
border-bottom: 1px solid rgba(255,255,255,0.08);
max-height: 240px;
overflow-y: auto;
}
.composer-emoji.open {
display: grid;
/* auto-fill = as many 28px columns as the container width allows */
grid-template-columns: repeat(auto-fill, 28px);
column-gap: 1px;
row-gap: 2px;
justify-content: start;
}
.composer-emoji-cell {
width: 28px; height: 28px;
background: transparent; border: none; padding: 0;
cursor: pointer; border-radius: 4px;
font-size: 1.35rem; line-height: 1;
display: flex; align-items: center; justify-content: center;
}
.composer-emoji-cell:hover { background: rgba(5,217,232,0.12); }
/* Inline emoji wrapper — used inside the editor and in rendered posts.
Surrounding text is NOT affected; only the .emoji span itself gets the
1.25em bump so emojis read better next to regular text. */
.composer-editor .emoji,
.post-body .emoji {
font-size: 1.25em;
line-height: 1;
vertical-align: -0.1em;
}
/* Mobile tweaks. */
@media (max-width: 600px) {
.composer-btn { padding: 3px 7px; font-size: 0.85rem; }
}
/* Composer input dialog — our own replacement for window.prompt() used by
the Link / Image / YouTube toolbar buttons, so the composer never relies
on browser dialogs (some browsers let the user disable them page-wide via
a "don't show again" checkbox). z-index sits above the page modals
(report / ticket modals use ~1000) so it always layers on top. */
.composer-prompt-overlay {
position: fixed; inset: 0;
background: rgba(10, 10, 18, 0.85);
display: flex; align-items: center; justify-content: center;
z-index: 3000;
padding: 20px;
}
.composer-prompt-box {
background: var(--bg-secondary, #1a1a2e);
border: 1px solid rgba(5,217,232,0.4);
border-radius: 10px;
padding: 22px;
width: 100%; max-width: 440px;
box-shadow: 0 10px 40px rgba(0,0,0,0.6);
box-sizing: border-box;
}
.composer-prompt-title {
font-weight: 700; font-size: 1rem;
color: var(--text-light, #fff);
margin-bottom: 12px;
}
.composer-prompt-input {
width: 100%; box-sizing: border-box;
padding: 10px 12px;
background: rgba(0,0,0,0.25);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 6px;
color: var(--text-primary, #eee);
font-family: inherit; font-size: 0.95rem;
}
.composer-prompt-input:focus {
outline: none;
border-color: var(--neon-blue, #05d9e8);
box-shadow: 0 0 5px rgba(0,247,255,0.3);
}
.composer-prompt-error {
margin-top: 10px;
color: #ff8888; font-size: 0.85rem;
}
.composer-prompt-actions {
display: flex; justify-content: flex-end; gap: 10px;
margin-top: 18px;
}
.composer-prompt-btn {
padding: 7px 16px; border-radius: 4px;
font: inherit; font-size: 0.9rem; font-weight: 600;
cursor: pointer;
}
.composer-prompt-cancel {
background: transparent;
color: var(--text-secondary, #aaa);
border: 1px solid rgba(255,255,255,0.18);
}
.composer-prompt-cancel:hover { color: var(--text-primary, #fff); border-color: rgba(255,255,255,0.35); }
.composer-prompt-ok {
background: transparent;
color: var(--accent-secondary, #05d9e8);
border: 1px solid rgba(5,217,232,0.5);
}
.composer-prompt-ok:hover { background: rgba(5,217,232,0.12); }