/* WritingML Signature Container - Visual indicator for {sig} tags */ div.writingml-sig { position: relative; border-left: 3px solid #ccc; padding-left: 12px; margin-left: 8px; opacity: 0.9; } /* Signature label indicator */ div.writingml-sig::before { content: "SIGNATURE"; position: absolute; left: -15px; top: 10px; font-size: 9px; font-weight: bold; color: #999; background: #f5f5f5; padding: 4px 2px; border-radius: 3px; border: 1px solid #ddd; text-transform: uppercase; letter-spacing: 1px; writing-mode: vertical-rl; transform: rotate(180deg); } /* WritingML Lists - styled to match server output (plain text with format prefix) */ /* Lists render as divs (not ol/ul) to match server's flat text output */ .writingml-alist { display: block; margin: 0; padding: 0; counter-reset: wml-list-counter; --list-prefix: ""; --list-suffix: " "; } .writingml-list-item { display: block; counter-increment: wml-list-counter; } /* Remove margins from paragraphs inside list items */ .writingml-list-item > p { margin: 0; display: inline; } /* Put the marker inline with the first paragraph inside the list item */ /* Uses CSS variables for prefix and suffix to support formats like "%. " or "(%) " */ .writingml-alist .writingml-list-item > p:first-child::before { content: var(--list-prefix, "") counter(wml-list-counter) var(--list-suffix, " "); } /* Letter lists (lowercase) */ .writingml-alist[data-list-type="lower-alpha"] .writingml-list-item > p:first-child::before { content: var(--list-prefix, "") counter(wml-list-counter, lower-alpha) var(--list-suffix, " "); } /* Letter lists (uppercase) */ .writingml-alist[data-list-type="upper-alpha"] .writingml-list-item > p:first-child::before { content: var(--list-prefix, "") counter(wml-list-counter, upper-alpha) var(--list-suffix, " "); } /* Custom format lists - use the format string directly (no counter) */ .writingml-custom-list .writingml-list-item > p:first-child::before { content: var(--list-marker, "• "); } /* Emoticon format lists - hide CSS marker, use widget decoration instead */ .writingml-emoticon-list .writingml-list-item > p:first-child::before { content: none !important; } /* Style the emoticon marker widget */ .writingml-list-emoticon-marker { display: inline; user-select: none; pointer-events: none; } .writingml-list-emoticon-marker img { vertical-align: middle; height: 1em; width: auto; } /* ===================================================== EMPTY LIST ITEM HANDLING Empty list items should: 1. NOT display a marker (bullet/number) 2. NOT increment the counter ProseMirror empty paragraphs contain a
for cursor placement, so we need to handle both truly empty

and


cases. ===================================================== */ /* Hide markers on truly empty paragraphs */ .writingml-list-item > p:empty::before { content: none !important; } /* Hide markers on paragraphs with only a br (ProseMirror empty paragraph) */ .writingml-list-item > p:has(> br:only-child)::before { content: none !important; } /* Don't increment counter for truly empty items - use high specificity */ div.writingml-list-item:has(> p:empty) { counter-increment: none !important; } /* Don't increment counter for items with only br - remove nested :has() */ div.writingml-list-item:has(> p:has(> br:only-child)) { counter-increment: none !important; } /* Primary approach: data-empty attribute set by schema toDOM() at render time This ensures the attribute exists before CSS counters are calculated */ .writingml-list-item[data-empty="true"] { counter-increment: none !important; } .writingml-list-item[data-empty="true"] > p::before { content: none !important; } /* ===================================================== PENDING LIST ITEM STATE When a new list item is created via Enter, it's marked as "pending". Pending items show the marker even when empty, so the user sees the marker immediately after pressing Enter. The pending state is cleared when: - User types something (item is no longer empty) - User moves cursor away from the pending item while it's empty ===================================================== */ /* Override the empty hiding rules for pending items - show marker */ .writingml-list-item.writingml-list-item-pending { counter-increment: wml-list-counter !important; } /* Show marker on pending items even when they appear empty */ .writingml-list-item.writingml-list-item-pending > p:empty::before, .writingml-list-item.writingml-list-item-pending > p:has(> br:only-child)::before { /* Re-enable the marker content - inherit from parent rules */ content: var(--list-prefix, "") counter(wml-list-counter) var(--list-suffix, " ") !important; } /* For pending items with data-empty attribute, also show marker */ .writingml-list-item.writingml-list-item-pending[data-empty="true"] { counter-increment: wml-list-counter !important; } .writingml-list-item.writingml-list-item-pending[data-empty="true"] > p::before { content: var(--list-prefix, "") counter(wml-list-counter) var(--list-suffix, " ") !important; } /* Letter lists (lowercase) - pending override */ .writingml-alist[data-list-type="lower-alpha"] .writingml-list-item.writingml-list-item-pending > p:empty::before, .writingml-alist[data-list-type="lower-alpha"] .writingml-list-item.writingml-list-item-pending > p:has(> br:only-child)::before, .writingml-alist[data-list-type="lower-alpha"] .writingml-list-item.writingml-list-item-pending[data-empty="true"] > p::before { content: var(--list-prefix, "") counter(wml-list-counter, lower-alpha) var(--list-suffix, " ") !important; } /* Letter lists (uppercase) - pending override */ .writingml-alist[data-list-type="upper-alpha"] .writingml-list-item.writingml-list-item-pending > p:empty::before, .writingml-alist[data-list-type="upper-alpha"] .writingml-list-item.writingml-list-item-pending > p:has(> br:only-child)::before, .writingml-alist[data-list-type="upper-alpha"] .writingml-list-item.writingml-list-item-pending[data-empty="true"] > p::before { content: var(--list-prefix, "") counter(wml-list-counter, upper-alpha) var(--list-suffix, " ") !important; } /* Custom format lists - pending override */ .writingml-custom-list .writingml-list-item.writingml-list-item-pending > p:empty::before, .writingml-custom-list .writingml-list-item.writingml-list-item-pending > p:has(> br:only-child)::before, .writingml-custom-list .writingml-list-item.writingml-list-item-pending[data-empty="true"] > p::before { content: var(--list-marker, "• ") !important; } /* WritingML Color Classes - Generated from output.inc color definitions */ /* These match the site's custom color names (not standard CSS colors) */ .clilac { color: #CC99FF; } .cviolet { color: #9933FF; } .cgrape { color: #660099; } .cplum { color: #330066; } .cmagenta { color: #990099; } .crose { color: #990066; } .cmaroon { color: #660000; } .cred { color: #CC0000; } .clred { color: #FF0000; } .chotpink { color: #FF0099; } .cppink { color: #FF99FF; } .cpink { color: #FF66CC; } .cpred { color: #FF9999; } .cborange { color: #FF6600; } .corange { color: #FF6600; } .cdorange { color: #CC6600; } .cbrown { color: #663300; } .ctan { color: #CC9933; } .cbyellow { color: #FFFF00; } .cyellow { color: #CCCC00; } .clkhaki { color: #999966; } .ckhaki { color: #666633; } .cpgreen { color: #99FF99; } .cbgreen { color: #33FF00; } .clgreen { color: #66CC00; } .cgreen { color: #009900; } .chunter { color: #003300; } .cpteal { color: #99FFFF; } .clteal { color: #00FFFF; } .cteal { color: #00CCCC; } .cpblue { color: #99CCFF; } .clblue { color: #0099FF; } .cblue { color: #0000FF; } .cnavy { color: #000066; } .cindigo { color: #6633FF; } .clgrey { color: #999999; } .cmgrey { color: #676666; } .cgrey { color: #333333; } .clgray { color: #999999; } .cmgray { color: #676666; } .cgray { color: #333333; } .cblack { color: #000000; } /* V3 Editor wrapper - border around entire editor */ .writingml-editor-v3-wrapper { position: relative; border: 1px solid #ddd; border-radius: 4px; background: white; overflow: visible; /* Allow dropdowns and menus to extend beyond wrapper */ } /* Custom Resize Handle - positioned at bottom-right of editor area (vertical resize only) */ /* Note: The resize handle is appended to the wrapper (not the editor container) so it doesnt scroll with the content. Position is adjusted for status bar. */ .editor-resize-handle { position: absolute; bottom: 2px; right: 4px; width: 18px; height: 14px; cursor: ns-resize; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(240, 240, 240, 0.9); border-radius: 2px; border: 1px solid #ccc; opacity: 0.7; transition: opacity 0.15s, background 0.15s; } /* When status bar is present, position resize handle above it */ .writingml-editor-v3-wrapper.has-status-bar .editor-resize-handle { bottom: 45px; /* Position clearly within editor area, above status bar */ } /* Adjust resize handle position for tiny mode status bar */ .writingml-editor-v3-wrapper.has-status-bar.has-tiny-statusbar .editor-resize-handle { bottom: 39px; /* Adjust for shorter status bar (22px min-height vs 28px) */ } .editor-resize-handle:hover { opacity: 1; background: rgba(225, 225, 225, 0.95); } /* Horizontal lines indicating vertical resize */ .editor-resize-handle .resize-grip { width: 12px; height: 8px; background: repeating-linear-gradient( to bottom, #888 0px, #888 2px, transparent 2px, transparent 4px ); } /* Hide resize handle when editor is minimized */ .writingml-editor-v3-wrapper.is-minimized .editor-resize-handle { display: none !important; } /* Hide resize handle in fullscreen mode */ .writingml-editor-v3-wrapper.fullscreen .editor-resize-handle { display: none !important; } /* Visual feedback during resize */ .writingml-editor-v3-wrapper.is-resizing { user-select: none; } .writingml-editor-v3-wrapper.is-resizing .ProseMirror { pointer-events: none; /* CRITICAL: Disable transitions during resize for smooth dragging */ transition: none !important; } .writingml-editor-v3-wrapper.is-resizing .prosemirror-editor-container { /* Disable transitions on container too */ transition: none !important; } .writingml-editor-v3-wrapper.is-resizing .editor-resize-handle { opacity: 1; background: rgba(150, 150, 150, 0.9); } /* Ensure ProseMirror container has position relative for the resize handle */ .prosemirror-editor-container { position: relative; } /* Toolbar inside V3 wrapper */ .writingml-editor-v3-wrapper .editor-toolbar { border-bottom: 1px solid #ddd; background: #f2f4fa; padding: 5px 5px 4px 5px; /* Minimal bottom padding for breathing room */ overflow: hidden; /* Contain floated elements like fullscreen button */ user-select: none; -webkit-user-select: none; } /* Editor container - remove borders since wrapper has them */ .prosemirror-editor-container { position: relative; background: white; border: none; border-radius: 0; overflow-y: auto; overflow-x: hidden; cursor: text; /* Note: overflow here only affects scrolling within editor, not positioned dropdowns */ } /* Resizable editor - remove min-height constraint so container can be resized */ .is-resizable .ProseMirror { min-height: auto !important; } /* ProseMirror editor */ .ProseMirror { padding: 15px; min-height: 100%; outline: none; font-size: 10pt; line-height: 1.4; font-family: Arial, Helvetica, sans-serif; white-space: pre-wrap; word-wrap: break-word; cursor: text; } .ProseMirror:focus { border-color: #007bff; } /* Line nodes render as paragraphs - each line is a separate block */ .ProseMirror p { margin: 0; padding: 0; display: block; white-space: pre-wrap; /* Display \n characters as line breaks */ word-wrap: break-word; /* Allow long words to wrap */ } /* Hide ProseMirror's trailing break when there's any
before it in the same parent This prevents the extra visual line while still allowing cursor at end of text */ .ProseMirror br ~ br.ProseMirror-trailingBreak { display: none; } /* Paragraph alignment */ .ProseMirror p[style*="text-align: center"] { text-align: center; } .ProseMirror p[style*="text-align: right"] { text-align: right; } .ProseMirror p[style*="text-align: justify"] { text-align: justify; } /* Quote blocks - match server .bquote class styling (uses div.bquote, not blockquote) */ .ProseMirror .bquote { margin-top: 0; margin-bottom: 0; margin-left: 1cm; margin-right: 1cm; /* Pointer cursor on border/padding area to indicate clickability */ cursor: pointer; } /* Mobile quote styling - less indent for smaller screens */ .mobile .ProseMirror .bquote { margin-left: 0.3cm; margin-right: 0.3cm; } /* Text cursor for content inside quotes */ .ProseMirror .bquote > * { cursor: text; } /* Center block quotes when inside a {center} container */ .ProseMirror .writingml-center > .bquote { margin-left: auto; margin-right: auto; } /* Right-align block quotes when inside a {right} container */ .ProseMirror .writingml-right > .bquote { margin-left: auto; margin-right: 0; } /* Selected quote block - clickable border/padding area */ .ProseMirror .bquote.ProseMirror-selectednode { outline: 2px solid #2196F3; outline-offset: 2px; background: rgba(33, 150, 243, 0.05); } /* Email quote blocks - Gmail-style left border for {e-quote} */ .ProseMirror .em-quote { border-left: 3px solid #ccc; padding-left: 12px; margin: 8px 0 8px 4px; color: #555; } .mobile .ProseMirror .em-quote { margin-left: 2px; padding-left: 8px; } .ProseMirror .em-quote > * { cursor: text; } .ProseMirror .em-quote.ProseMirror-selectednode { outline: 2px solid #2196F3; outline-offset: 2px; background: rgba(33, 150, 243, 0.05); } .ProseMirror .em-quote .em-quote .em-quote .em-quote .em-quote { margin-left: 0; } /* Preformatted text */ .ProseMirror pre { background: #f5f5f5; border: 1px solid #ddd; border-radius: 3px; padding: 10px; font-family: 'Courier New', Courier, monospace; font-size: 14px; overflow-x: auto; } /* ============================================ COLUMNS LAYOUT {columns:count=N:gap=N:...}content{col}content{/columns} ============================================ */ /* Columns container */ .ProseMirror .writingml-columns { display: flex; position: relative; margin: 10px 0; } /* Individual column */ .ProseMirror .writingml-column { flex: 1; min-width: 0; position: relative; /* Ensure paragraphs inside columns don't have extra margins */ } .ProseMirror .writingml-column > p:first-child, .ProseMirror .writingml-column > .text_block:first-child { margin-top: 0; } .ProseMirror .writingml-column > p:last-child, .ProseMirror .writingml-column > .text_block:last-child { margin-bottom: 0; } /* Visual divider between columns using CSS variable from data attribute */ .ProseMirror .writingml-columns[data-divider]:not([data-divider="0"]) .writingml-column:not(:last-child)::after { content: ''; position: absolute; right: calc(var(--col-gap, 20px) / -2 - 1px); top: 0; bottom: 0; width: var(--divider-width, 1px); background-color: var(--divider-color, #ccc); } /* Column selection highlight */ .ProseMirror .writingml-column.ProseMirror-selectednode { outline: 2px solid #2196F3; outline-offset: -2px; background: rgba(33, 150, 243, 0.05); } /* Columns container selection */ .ProseMirror .writingml-columns.ProseMirror-selectednode { outline: 2px dashed #2196F3; outline-offset: 2px; } /* Empty column placeholder */ .ProseMirror .writingml-column:empty::before, .ProseMirror .writingml-column > p:only-child:empty::before { content: 'Column content...'; color: #999; font-style: italic; pointer-events: none; } /* Hover state for columns container - show column boundaries */ .ProseMirror .writingml-columns:hover { background: rgba(33, 150, 243, 0.03); } .ProseMirror .writingml-columns:hover .writingml-column { background: rgba(33, 150, 243, 0.05); outline: 1px dashed rgba(33, 150, 243, 0.3); outline-offset: -1px; } /* Individual column hover - highlight current column */ .ProseMirror .writingml-column:hover { background: rgba(33, 150, 243, 0.08) !important; outline: 1px dashed rgba(33, 150, 243, 0.5) !important; } /* ============================================ AUTO-MODE COLUMNS (CSS multi-column) ============================================ */ /* Auto-mode columns container */ .ProseMirror .writingml-columns-auto { display: block !important; position: relative; margin: 10px 0; width: 100% !important; box-sizing: border-box; /* Force proper column balancing */ column-fill: balance; } /* Default for auto-mode - apply multi-column by default */ .ProseMirror .writingml-columns-auto { column-count: 2; column-gap: 20px; } /* Apply column-count based on data attribute */ .ProseMirror .writingml-columns-auto[data-count="2"] { column-count: 2 !important; } .ProseMirror .writingml-columns-auto[data-count="3"] { column-count: 3 !important; } .ProseMirror .writingml-columns-auto[data-count="4"] { column-count: 4 !important; } /* Also respect data-mode to ensure auto mode is applied */ .ProseMirror [data-mode="auto"] { display: block !important; } /* Allow content to flow/break across columns in auto mode */ .ProseMirror .writingml-columns-auto > p, .ProseMirror .writingml-columns-auto > .text_block { /* Reset margins so text flows naturally */ margin: 0; /* Allow orphans/widows for better flow */ orphans: 1; widows: 1; } /* Auto columns selection highlight */ .ProseMirror .writingml-columns-auto.ProseMirror-selectednode { outline: 2px dashed #2196F3; outline-offset: 2px; } /* Hover state for auto columns container - show column boundaries */ /* Use column-rule to simulate the dashed outlines shown in manual mode */ .ProseMirror .writingml-columns-auto:hover { background: rgba(33, 150, 243, 0.05); outline: 1px dashed rgba(33, 150, 243, 0.3); outline-offset: -1px; /* Show column boundaries via column-rule - matches manual mode's dashed outline style */ column-rule: 1px dashed rgba(33, 150, 243, 0.3); } /* If auto columns already has a divider set, show it more prominently on hover */ .ProseMirror .writingml-columns-auto[data-divider]:not([data-divider="0"]):hover { column-rule-style: solid; outline: 1px dashed rgba(33, 150, 243, 0.3); outline-offset: -1px; } /* Empty auto columns placeholder */ .ProseMirror .writingml-columns-auto:empty::before, .ProseMirror .writingml-columns-auto > p:only-child:empty::before { content: 'Auto-flow columns content...'; color: #999; font-style: italic; pointer-events: none; } /* Block region gutter indicators (enabled via settings: showBlockBorders) */ .ProseMirror.editor-show-block-borders { --wml-gutter-bar-width: 6px; --wml-gutter-bar-offset: 14px; --wml-gutter-bar-gap: 2px; /* Fixed inset from the editor's left edge (JS positions indicators to this) */ --wml-gutter-anchor-inset: 3px; /* Gap between indicators and content */ --wml-gutter-content-gap: 2px; /* Default colors (can be overridden by inline styles from settings) */ --wml-indicator-center: #2e7d32; --wml-indicator-right: #ef6c00; --wml-indicator-left: #757575; --wml-indicator-justify: #00838f; --wml-indicator-quotes: #7b1fa2; --wml-indicator-lists: #6d4c41; --wml-indicator-other: #1976d2; /* Add small extra left padding for gap between indicators and content */ /* Just add the gap amount (2px) to the base 15px padding */ padding-left: calc(15px + var(--wml-gutter-content-gap)); } /* Ensure targets can position indicators without affecting layout */ .ProseMirror.editor-show-block-borders div.bquote, .ProseMirror.editor-show-block-borders pre, .ProseMirror.editor-show-block-borders div.writingml-center, .ProseMirror.editor-show-block-borders div.writingml-left, .ProseMirror.editor-show-block-borders div.writingml-right, .ProseMirror.editor-show-block-borders div.writingml-justify, .ProseMirror.editor-show-block-borders div.writingml-columns, .ProseMirror.editor-show-block-borders div.writingml-columns-auto, .ProseMirror.editor-show-block-borders ul, .ProseMirror.editor-show-block-borders ol, .ProseMirror.editor-show-block-borders .writingml-alist, .ProseMirror.editor-show-block-borders > p { position: relative; } /* Gutter handle elements (tooltips are on the handle via `title`) */ .ProseMirror .wml-gutter-indicator { display: none; /* Hidden unless setting is enabled */ } .ProseMirror.editor-show-block-borders .wml-gutter-indicator { display: block; position: absolute; top: 0; bottom: 0; left: 0; /* actual X is set by JS for consistent cross-browser placement */ width: var(--wml-gutter-bar-width); border-radius: 2px; opacity: 0.9; user-select: none; pointer-events: auto; /* tooltip hover target */ cursor: default; /* normal arrow cursor */ z-index: 2; } /* Avoid initial flash at left:0; show only after JS has positioned */ .ProseMirror.editor-show-block-borders .wml-gutter-indicator[data-positioned="0"] { visibility: hidden; } /* Tooltip element (position:fixed so it won't be clipped by editor overflow) */ .wml-gutter-tooltip { position: fixed; display: none; background: rgba(30, 30, 30, 0.92); color: #fff; font: 600 9px/1.4 system-ui, -apple-system, sans-serif; padding: 5px 4px; border-radius: 3px; white-space: pre; text-align: center; text-transform: uppercase; letter-spacing: 1px; pointer-events: none; z-index: 999999; box-shadow: 0 2px 8px rgba(0,0,0,0.3); } .wml-gutter-tooltip.is-visible { display: block; } /* Individual alignment colors */ .ProseMirror.editor-show-block-borders .wml-gutter-indicator--center { background: var(--wml-indicator-center); } .ProseMirror.editor-show-block-borders .wml-gutter-indicator--right { background: var(--wml-indicator-right); } .ProseMirror.editor-show-block-borders .wml-gutter-indicator--left { background: var(--wml-indicator-left); } .ProseMirror.editor-show-block-borders .wml-gutter-indicator--justify { background: var(--wml-indicator-justify); } /* Quotes */ .ProseMirror.editor-show-block-borders .wml-gutter-indicator--quote { background: var(--wml-indicator-quotes); } /* Lists */ .ProseMirror.editor-show-block-borders .wml-gutter-indicator--list { background: var(--wml-indicator-lists); } /* Other/Code blocks */ .ProseMirror.editor-show-block-borders .wml-gutter-indicator--pre { background: var(--wml-indicator-other); } /* Hide indicators when their category is disabled */ .ProseMirror.editor-show-block-borders[data-block-markers-center="0"] .wml-gutter-indicator--center { display: none !important; } .ProseMirror.editor-show-block-borders[data-block-markers-right="0"] .wml-gutter-indicator--right { display: none !important; } .ProseMirror.editor-show-block-borders[data-block-markers-left="0"] .wml-gutter-indicator--left { display: none !important; } .ProseMirror.editor-show-block-borders[data-block-markers-justify="0"] .wml-gutter-indicator--justify { display: none !important; } .ProseMirror.editor-show-block-borders[data-block-markers-quotes="0"] .wml-gutter-indicator--quote { display: none !important; } .ProseMirror.editor-show-block-borders[data-block-markers-lists="0"] .wml-gutter-indicator--list { display: none !important; } .ProseMirror.editor-show-block-borders[data-block-markers-other="0"] .wml-gutter-indicator--pre { display: none !important; } /* DB inline code (double braces - show WritingML code literally) */ code.writingml-db { display: inline; padding: 2px 6px; margin: 0 2px; background: #fff8e1; border: 1px solid #ffd54f; border-radius: 3px; font-family: 'Courier New', Courier, monospace; font-size: 0.9em; color: #d84315; white-space: pre-wrap; } /* Selected db inline node */ code.writingml-db.ProseMirror-selectednode { outline: 2px solid #ffa000; outline-offset: 1px; background: #ffe082; } /* Indent spacers */ .ProseMirror .writingml-indent { display: inline; white-space: pre; } /* Lists */ .ProseMirror ul { padding-left: 25px; } .ProseMirror li { margin: 5px 0; } /* Dynamic content placeholders */ .writingml-dynamic-content { display: inline-block; background: transparent; cursor: pointer; transition: background-color 0.15s ease, outline 0.15s ease; position: relative; user-select: none; } .writingml-dynamic-content:hover { background: #f0f0f0; outline: 1px solid #ccc; outline-offset: -1px; border-radius: 3px; } /* Selected state for dynamic content - when individually selected */ .writingml-dynamic-content.ProseMirror-selectednode { background: #e3f2fd; outline: 2px solid #2196F3 !important; outline-offset: 2px; border-radius: 4px; } /* Selected state for dynamic content - when part of a text/range selection */ .writingml-dynamic-content.dynamic-content-selected { background: #e3f2fd; outline: 2px solid #2196F3 !important; outline-offset: 2px; border-radius: 4px; } .writingml-dynamic-content .dynamic-content-inner { pointer-events: none; display: inline-block; white-space: normal; /* Collapse whitespace normally for server-rendered content */ } /* Ensure all children pass clicks through to parent */ .writingml-dynamic-content .dynamic-content-inner * { pointer-events: none; } /* X-Link (non-editable custom text link) - styled like dynamic content */ .writingml-xlink { display: inline; color: #0000ff !important; /* Standard link blue to match server duLink */ text-decoration: underline; border-bottom: 1px solid currentColor; /* Double-underline effect matching server */ cursor: pointer; padding-bottom: 0; transition: background-color 0.15s ease, outline 0.15s ease; position: relative; user-select: none; pointer-events: auto; /* Allow mousedown for selection, but click is prevented in NodeView */ } .writingml-xlink:hover { background: #e3f2fd; outline: 1px solid #90CAF9; outline-offset: -1px; color: #999966 !important; /* Hover color matching server duLink */ } /* Selected state for x-link - when individually selected */ .writingml-xlink.ProseMirror-selectednode { background: #e3f2fd !important; outline: 2px solid #2196F3 !important; outline-offset: 2px; border-radius: 4px; } /* X-Link loading state (while fetching embedded content) */ .writingml-xlink.xlink-loading-state { opacity: 0.7; } .writingml-xlink .xlink-loading { font-style: italic; color: #999; } /* X-Link rendered state (embedded content like sysimage displayed) */ .writingml-xlink.xlink-rendered { padding: 0; } .writingml-xlink.xlink-rendered img { display: inline-block; max-width: 100%; vertical-align: middle; } /* V3-Link (new format with text in attribute, URL in body) */ /* Same styling as x-link for visual consistency */ .writingml-v3link { display: inline; color: #0000ff !important; text-decoration: underline; border-bottom: 1px solid currentColor; cursor: pointer; padding-bottom: 0; transition: background-color 0.15s ease, outline 0.15s ease; position: relative; user-select: none; pointer-events: auto; } .writingml-v3link:hover { background: #e3f2fd; outline: 1px solid #90CAF9; outline-offset: -1px; color: #999966 !important; } /* Selected state for v3-link */ .writingml-v3link.ProseMirror-selectednode { background: #e3f2fd !important; outline: 2px solid #2196F3 !important; outline-offset: 2px; border-radius: 4px; } /* Link tooltip - shows Ctrl/Cmd+Click hint */ .writingml-link-tooltip { position: fixed; z-index: 2147483646; background: rgba(50, 50, 50, 0.9); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; white-space: nowrap; pointer-events: none; transform: translateX(-50%); opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } .writingml-link-tooltip.visible { opacity: 1; visibility: visible; } /* Location anchor - target for internal links like {xlink:#name} */ /* Styled similar to hide tag for consistency */ .writingml-location-anchor { display: inline; cursor: pointer; padding: 2px 6px; border-radius: 3px; background: #e8f4fc; border: 1px dashed #90CAF9; color: #1976D2; font-size: 0.85em; text-decoration: none; user-select: none; } .writingml-location-anchor::before { content: '\2693\00a0'; /* Anchor symbol + non-breaking space */ } .writingml-location-anchor:hover { background: #d4eafc; border-color: #2196F3; } /* Selected state for location anchor */ .writingml-location-anchor.ProseMirror-selectednode { outline: 2px solid #b3d9ff; outline-offset: 2px; } .dynamic-content-loading { background: #fff3cd; border-color: #ffc107; animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* Images */ .writingml-image { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; } /* Emoticons - use em units so they scale with font size */ .writingml-emoticon { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: middle; margin: 0 0.125em; } /* AJAX-rendered emoticons (from server) */ /* Server CSS (headerX.inc) handles sizing via transform: scale() based on .sizeXpt class */ /* Base emoticon size is 15x15, server scales appropriately per size class */ /* We only set vertical-align to match server behavior - do NOT add width/height */ /* as that would double-scale with the server's transform approach */ .ProseMirror .emoteZ { vertical-align: text-top; } /* ============================================ FONT SIZE CLASSES Matches server-side rendering from headerX.inc Uses em units for accessibility/scaling ============================================ */ /* PT-based sizes (formula: em = pt / 12) */ .ProseMirror .size8pt { font-size: 0.67em; } .ProseMirror .size9pt { font-size: 0.75em; } .ProseMirror .size10pt { font-size: 0.83em; } .ProseMirror .size11pt { font-size: 0.92em; } .ProseMirror .size12pt { font-size: 1.00em; } .ProseMirror .size13pt { font-size: 1.08em; } .ProseMirror .size14pt { font-size: 1.17em; } .ProseMirror .size15pt { font-size: 1.25em; } .ProseMirror .size16pt { font-size: 1.33em; } .ProseMirror .size18pt { font-size: 1.50em; } .ProseMirror .size20pt { font-size: 1.67em; } .ProseMirror .size24pt { font-size: 2.00em; } .ProseMirror .size28pt { font-size: 2.33em; } .ProseMirror .size32pt { font-size: 2.67em; } .ProseMirror .size36pt { font-size: 3.00em; } /* Legacy em-based sizes (for backward compatibility) */ .ProseMirror .size1 { font-size: 0.70em; } .ProseMirror .size2 { font-size: 0.80em; } .ProseMirror .size25 { font-size: 0.90em; } /* 2.5 */ .ProseMirror .size3 { font-size: 1.00em; } .ProseMirror .size35 { font-size: 1.10em; } /* 3.5 */ .ProseMirror .size4 { font-size: 1.20em; } .ProseMirror .size45 { font-size: 1.30em; } /* 4.5 */ .ProseMirror .size5 { font-size: 1.50em; } /* Placeholder */ .ProseMirror .placeholder { color: #aaa; pointer-events: none; height: 0; } .ProseMirror .placeholder::before { content: attr(data-placeholder); float: left; height: 0; } /* Selection */ .ProseMirror-selectednode { outline: 2px solid #8cf; outline-offset: 2px; } /* Drop cursor */ .ProseMirror-dropcursor { border-left: 2px solid #000; pointer-events: none; position: absolute; } /* Gap cursor */ .ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; } .ProseMirror-gapcursor:after { content: ""; display: block; position: absolute; top: -2px; width: 20px; border-top: 1px solid black; animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite; } @keyframes ProseMirror-cursor-blink { to { visibility: hidden; } } .ProseMirror-focused .ProseMirror-gapcursor { display: block; } /* Virtual cursor - replaces native caret for better positioning control */ /* In fullscreen mode, cursor position is recalculated after animation completes */ .ProseMirror.virtual-cursor-active { caret-color: transparent; } .ProseMirror-virtual-cursor { position: absolute; width: 2px; background: black; pointer-events: none; z-index: 10; opacity: 0; transition: opacity 0.05s ease-out; } .ProseMirror-virtual-cursor.visible { opacity: 1; animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite; } /* Debug mode styles */ .prosemirror-debug-mode .ProseMirror { border-color: #ff6b6b; background: #fff9e6; } .prosemirror-debug-overlay { position: relative; background: #ff6b6b; color: white; padding: 8px 12px; border-radius: 4px; font-size: 12px; font-weight: bold; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,0.2); margin-bottom: 10px; } .debug-info { display: flex; gap: 15px; align-items: center; } .debug-info > div { white-space: nowrap; } .debug-node-marker { color: #ff6b6b; font-size: 10px; font-weight: bold; opacity: 0.6; background: #fff; padding: 2px 4px; border-radius: 2px; margin: 0 2px; user-select: none; pointer-events: none; } .debug-dynamic-node { outline: 1px dashed #ff6b6b; outline-offset: 2px; } /* V3 Editor Wrapper */ .writingml-editor-v3-wrapper { position: relative; position: relative; } /* Toolbar integration with V2 styles */ .writingml-editor-v3-wrapper .editor-toolbar { /* V2 toolbar styles will apply here */ position: relative; /* For dropdown positioning */ } /* Inline menu container */ .inline-menu-container { width: 100%; height: 0; overflow: hidden; overflow-y: scroll; transition: height 0.25s ease-in-out; background: #f2f4fa; border: 1px solid #ddd; border-top: none; border-bottom: 2px solid #ccc; user-select: none; -webkit-user-select: none; max-height: 65px; } /* Force scrollbar to always show in inline menu */ .inline-menu-container::-webkit-scrollbar { width: 8px; background-color: #e8e8e8; } .inline-menu-container::-webkit-scrollbar-track { background-color: #e8e8e8; border-radius: 4px; } .inline-menu-container::-webkit-scrollbar-thumb { background-color: #999; border-radius: 4px; } .inline-menu-container::-webkit-scrollbar-thumb:hover { background-color: #777; } /* Firefox scrollbar */ .inline-menu-container { scrollbar-width: thin; scrollbar-color: #999 #e8e8e8; } /* Inline menu content wrapper */ .inline-menu-content { width: 100%; min-height: 100%; background: #f2f4fa; } /* Inline menu active item highlighting */ .inline-menu-container .color-swatch.active-color, .inline-menu-container .highlight-swatch.active-color { border: 2px solid #007bff !important; box-shadow: inset 0 0 5px rgba(0, 123, 255, 0.3) !important; } .inline-menu-container .font-option.active-option, .inline-menu-container .size-option.active-option { background-color: #e3f2fd !important; border: 1px solid #2196F3 !important; font-weight: bold !important; } /* Inline menu button hover effects */ .inline-menu-container button:hover { background-color: #f0f0f0 !important; transition: all 0.2s ease; } /* Close button hover effect */ .inline-menu-container button[title="Close menu"]:hover { background-color: #e0e0e0 !important; color: #000 !important; } /* Dropdown menu scrollable option containers */ .macro-options, .size-options, .font-options, .special-options, .linespace-options { padding: 10px; max-height: min(300px, 25vh); /* Viewport aware - never taller than 50% of screen */ overflow-y: scroll; overflow-x: hidden; } /* Scrollbar styling for dropdown menus - always visible */ .macro-options::-webkit-scrollbar, .size-options::-webkit-scrollbar, .font-options::-webkit-scrollbar, .special-options::-webkit-scrollbar, .linespace-options::-webkit-scrollbar { width: 10px; background-color: #e8e8e8; } .macro-options::-webkit-scrollbar-track, .size-options::-webkit-scrollbar-track, .font-options::-webkit-scrollbar-track, .special-options::-webkit-scrollbar-track, .linespace-options::-webkit-scrollbar-track { background-color: #e8e8e8; border-radius: 4px; } .macro-options::-webkit-scrollbar-thumb, .size-options::-webkit-scrollbar-thumb, .font-options::-webkit-scrollbar-thumb, .special-options::-webkit-scrollbar-thumb, .linespace-options::-webkit-scrollbar-thumb { background-color: #999; border-radius: 4px; } .macro-options::-webkit-scrollbar-thumb:hover, .size-options::-webkit-scrollbar-thumb:hover, .font-options::-webkit-scrollbar-thumb:hover, .special-options::-webkit-scrollbar-thumb:hover, .linespace-options::-webkit-scrollbar-thumb:hover { background-color: #777; } .macro-option { padding: 8px 10px; cursor: pointer; border-radius: 3px; display: flex; justify-content: space-between; align-items: center; } .macro-option:hover { background: #f5f5f5; } .macro-option span:first-child { flex: 1; } .macro-option span:last-child { font-size: 11px; color: #666; margin-left: 12px; } /* Editor container adjustments for toolbar */ .writingml-editor-v3-wrapper .prosemirror-editor-container { border-top: none; border-radius: 0 0 4px 4px; display: flex; flex-direction: column; } .writingml-editor-v3-wrapper .ProseMirror { flex: 1; min-height: 0; } /* Active button states for V3 - depressed/pressed-in appearance */ .writingml-editor-v3-wrapper .Editor_Button.active { background-color: #d0d0d0 !important; /* Slightly darker gray */ border-radius: 3px !important; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.25), inset 0 0 0 2px rgba(0, 0, 0, 0.15) !important; /* Inset shadow for pressed look with thicker border */ transform: translateY(1px); /* Slight downward shift */ } .writingml-editor-v3-wrapper .Editor_Button.active img { opacity: 0.85; filter: brightness(0.95); } /* Fallback for other button types (excludes tabs which have their own styling) */ .writingml-editor-v3-wrapper .toolbar-button.active, .writingml-editor-v3-wrapper button.active:not(.editor-tab):not(.mode-toggle-btn) { background: #007bff !important; color: white !important; border-color: #007bff !important; } /* Ensure toolbar buttons work with V3 */ .writingml-editor-v3-wrapper .toolbar-button { cursor: pointer; user-select: none; } .writingml-editor-v3-wrapper .toolbar-button:hover { opacity: 0.8; } /* Toolbar separators for visual grouping */ .writingml-editor-v3-wrapper .toolbar-separator { display: inline-block !important; width: 1px; height: 24px; margin: 0 4px; vertical-align: bottom; background-color: #d0d0d0; } /* Adjust button spacing for V3 */ .writingml-editor-v3-wrapper .Editor_Button { margin: 0 1px !important; display: inline-block; vertical-align: middle; } .writingml-editor-v3-wrapper .Editor_Button img { display: block; vertical-align: middle; } /* Hide blank button for now */ .writingml-editor-v3-wrapper [data-tool="blank"] { display: none !important; } /* ======================================== AUTOCOMPLETE DROPDOWN STYLES ======================================== */ .writingml-autocomplete-dropdown { position: fixed; background: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); max-height: 350px; min-width: 300px; max-width: 500px; overflow-y: scroll; overflow-x: hidden; transition: opacity 0.15s ease-in-out; z-index: 2147483640; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; } /* Ensure all menus/pickers appear above fullscreen editor */ body.writingml-editor-fullscreen .writingml-autocomplete-dropdown, body.writingml-editor-fullscreen .writingml-emoticon-picker, body.writingml-editor-fullscreen .writingml-giphy-picker, body.writingml-editor-fullscreen .writingml-dropdown-v2, body.writingml-editor-fullscreen .editor-tab-context-menu { z-index: 2147483645 !important; } /* Dropdowns need higher z-index when modal is open */ body.editor-modal-open .writingml-emoticon-picker, body.editor-modal-open .writingml-giphy-picker, body.editor-modal-open .writingml-dropdown-v2 { z-index: 2147483645 !important; } .writingml-autocomplete-list { padding: 6px 0; } .writingml-autocomplete-item { padding: 10px 14px; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: white; border-left: 3px solid transparent; color: #333; display: flex; align-items: center; min-height: 36px; } .writingml-autocomplete-item:hover { background: #f0f7ff; border-left-color: #64b5f6; } .writingml-autocomplete-item.active { background: #2196F3; color: white; border-left-color: #1976D2; font-weight: 500; } .writingml-autocomplete-item.no-results { color: #999; cursor: default; text-align: center; padding: 12px; } .writingml-autocomplete-item.no-results:hover { background: transparent; } .writingml-autocomplete-item.separator { padding: 4px 14px; margin: 0; cursor: default; pointer-events: none; min-height: auto; border-left-color: transparent !important; background: transparent !important; } .writingml-autocomplete-item.separator::before { content: ''; display: block; width: 100%; height: 1px; background: #ccc; } .writingml-autocomplete-item.separator:hover { background: transparent !important; border-left-color: transparent !important; } /* Compact autocomplete mode for IM and minimal editors */ .writingml-autocomplete-dropdown-compact { font-size: 11px; max-height: 130px; min-width: 200px; } .writingml-autocomplete-dropdown-compact .writingml-autocomplete-item { padding: 4px 14px !important; min-height: 25px !important; } .writingml-autocomplete-dropdown-compact .writingml-autocomplete-item:hover, .writingml-autocomplete-dropdown-compact .writingml-autocomplete-item.active { padding: 4px 14px !important; min-height: 25px !important; } .writingml-autocomplete-dropdown-compact .autocomplete-id { font-size: 10px; width: 55px; } .writingml-autocomplete-dropdown-compact .autocomplete-title { font-size: 11px; } .writingml-autocomplete-dropdown-compact::after { padding: 3px 6px; font-size: 9px; } /* Autocomplete item type-specific styling */ .autocomplete-id { display: inline-block; width: 70px; font-family: 'Courier New', Courier, monospace; color: #666; font-size: 13px; margin-right: 10px; font-weight: bold; } .writingml-autocomplete-item.active .autocomplete-id { color: rgba(255, 255, 255, 0.9); } .autocomplete-title { color: #333; font-size: 14px; } .writingml-autocomplete-item.active .autocomplete-title { color: white; } /* Active item styling handled by background color and left border */ .autocomplete-image-item { min-height: 50px; display: flex; align-items: center; } .autocomplete-image-item img { max-width: 40px; max-height: 40px; margin-right: 8px; border-radius: 3px; } /* Handle images in any autocomplete item (for user icons, etc.) */ .writingml-autocomplete-item img { max-width: 24px; max-height: 24px; margin-right: 8px; flex-shrink: 0; vertical-align: middle; } /* Loading state */ .writingml-autocomplete-item[data-loading="true"] { color: #999; font-style: italic; } /* Size items - ensure font size is visible and not overridden */ .writingml-autocomplete-item span[style*="font-size"] { line-height: 1.4; vertical-align: baseline; font-weight: normal !important; } /* Active size items - reduce bold to see size better */ .writingml-autocomplete-item.active span[style*="font-size"] { font-weight: normal !important; } /* Hint text for keyboard navigation */ .writingml-autocomplete-dropdown::after { content: '↑↓ Navigate • Enter/Tab Select • Esc Close'; display: block; padding: 8px 12px; background: #f5f5f5; border-top: 1px solid #e0e0e0; font-size: 11px; color: #666; text-align: center; } /* Scrollbar styling - always visible */ .writingml-autocomplete-dropdown::-webkit-scrollbar { width: 10px; background-color: #e8e8e8; } .writingml-autocomplete-dropdown::-webkit-scrollbar-track { background-color: #e8e8e8; border-radius: 4px; } .writingml-autocomplete-dropdown::-webkit-scrollbar-thumb { background-color: #999; border-radius: 4px; } .writingml-autocomplete-dropdown::-webkit-scrollbar-thumb:hover { background-color: #777; } /* ======================================== EMOTICON PICKER STYLES ======================================== */ .writingml-emoticon-picker { display: none; position: fixed; background: #fff !important; border: 1px solid #aaa; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); z-index: 2147483645 !important; padding: 10px; width: 520px; max-width: 90vw; user-select: none; overflow: hidden !important; /* Contain scrolling grid within picker */ } /* Header */ .emoticon-header { position: relative; margin-bottom: 10px; text-align: center; background: white; } .emoticon-close { position: absolute; right: 5px; top: 0; font-weight: bold; cursor: pointer; padding: 2px 8px; font-size: 18px; color: #666; background: rgba(255,255,255,0.8); border-radius: 3px; transition: all 0.2s; } .emoticon-close:hover { color: #fff; background: #f44336; } .emoticon-search-container { display: flex; align-items: center; gap: 8px; justify-content: center; max-width: 400px; margin: 0 auto; } /* Wrapper for search input and clear button */ .emoticon-search-wrapper { position: relative; flex: 1; max-width: 280px; } .emoticon-search-input { width: 100%; padding: 6px 28px 6px 8px; /* Add right padding for clear button */ border: 1px solid #ccc; border-radius: 4px; font-size: 14px !important; background: white; color: #333; height: 28px; box-sizing: border-box; line-height: 1.2; } .emoticon-search-input::placeholder { font-size: 14px !important; color: #999; } .emoticon-search-input:focus { outline: none; border-color: #2196F3; box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2); } /* Clear search button - positioned inside input field */ .emoticon-search-clear { position: absolute; right: 4px; /* Position inside the input field */ top: 50%; transform: translateY(-50%); width: 20px; height: 20px; padding: 0; border: none; background: transparent; color: #999; font-size: 18px; line-height: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s ease; z-index: 1; } .emoticon-search-clear:hover { background: #f0f0f0; color: #666; } .emoticon-search-clear:active { background: #e0e0e0; color: #333; } .emoticon-color-btn { padding: 6px 10px; cursor: pointer; background: white; border: 1px solid #ccc; border-radius: 4px; transition: all 0.2s; height: 28px; box-sizing: border-box; display: flex; align-items: center; } .emoticon-color-btn:hover { border-color: #2196F3; background: #f5f9ff; } .emoticon-color-btn .color-gradient { display: inline-block; width: 18px; height: 14px; background: linear-gradient(to right, red, orange, yellow, green, blue, purple); border-radius: 2px; } /* Categories */ .emoticon-categories-wrapper { position: relative; border-bottom: 0px solid #000; padding-bottom: 0px; margin-bottom: 10px; background: white !important; } .emoticon-categories { max-height: 60px; /* Reduced from 80px (25% less) */ overflow-y: scroll !important; overflow-x: hidden; position: relative; background: white !important; } .emoticon-category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 0 12px; background: white !important; justify-items: stretch; margin: 0 auto; max-width: 100%; } .emoticon-category { padding: 4px !important; /* Reduced from 6px for more compact look */ cursor: pointer; border: 1px solid #ccc; border-radius: 4px; background: #eee; color: #333; transition: all 0.2s; font-size: 0.85em; user-select: none; width: 100%; min-height: 28px; /* Reduced from 32px */ box-sizing: border-box; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } .emoticon-category:hover { background: #e8e8e8; border-color: #bbb; color: #000; } .emoticon-category.active { font-weight: bold; background: #2196F3; border-color: #1976D2; color: white; } /* Color picker */ .color-picker-container { display: flex; align-items: center; justify-content: center; gap: 3px; padding: 2px; } .color-picker-item { width: 24px; height: 24px; border: 1px solid #999; border-radius: 4px; cursor: pointer; flex-shrink: 0; } .color-picker-item[style*="background:white"] { border-color: #ccc; } .color-picker-item.active { border: 2px solid #333 !important; } .color-picker-item.multicolor { background: linear-gradient(to right, red, orange, yellow, green, blue, purple) !important; } .color-picker-close { margin-left: 12px; width: 24px; height: 24px; padding: 0; background: #f44336; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .color-picker-close:hover { background: #d32f2f; } /* Emoticon grid wrapper - handles scrolling (matches .emoticon-categories pattern) */ .emoticon-grid-wrapper { max-height: 300px; overflow-y: scroll !important; overflow-x: hidden; position: relative; background: white !important; } /* Emoticon grid - handles layout */ .writingml-emoticon-picker .emoticon-grid { display: grid !important; grid-template-columns: repeat(auto-fill, 36px) !important; gap: 4px !important; padding: 10px; padding-right: 4px; justify-content: center; align-content: start; background: white; } .writingml-emoticon-picker .emoticon-section-label { font-size: 0.8em; color: #666; margin-bottom: 0; padding-bottom: 0; line-height: 1.2; text-align: left; display: block; width: 100%; } /* Add spacing after the recent emoticons row */ .writingml-emoticon-picker .emoticon-item.recent-emoticon { margin-bottom: 0; } .writingml-emoticon-picker .emoticon-item { cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; user-select: none; border-radius: 3px; transition: background 0.15s; border: 1px solid transparent; } .writingml-emoticon-picker .emoticon-item:hover { background: #e8f4f8; border-color: #b3d9e6; transform: scale(1.1); } .writingml-emoticon-picker .emoticon-item img { width: 20px; height: 20px; display: block; } .emoticon-no-results { text-align: center; color: #666; padding: 20px; } /* Scrollbar styling for emoticon picker scrollable areas */ .emoticon-grid-wrapper::-webkit-scrollbar, .emoticon-categories::-webkit-scrollbar { width: 10px; background-color: #e8e8e8; } .emoticon-grid-wrapper::-webkit-scrollbar-track, .emoticon-categories::-webkit-scrollbar-track { background-color: #e8e8e8; border-radius: 4px; } .emoticon-grid-wrapper::-webkit-scrollbar-thumb, .emoticon-categories::-webkit-scrollbar-thumb { background-color: #999; border-radius: 4px; } .emoticon-grid-wrapper::-webkit-scrollbar-thumb:hover, .emoticon-categories::-webkit-scrollbar-thumb:hover { background-color: #777; } /* Emoticon Picker Size Variants */ /* Small size */ .writingml-emoticon-picker.emoticon-size-small { width: 450px !important; } .writingml-emoticon-picker.emoticon-size-small .emoticon-grid { grid-template-columns: repeat(auto-fill, 32px) !important; } .writingml-emoticon-picker.emoticon-size-small .emoticon-grid-wrapper { max-height: 280px !important; } .writingml-emoticon-picker.emoticon-size-small .emoticon-item { width: 24px !important; height: 24px !important; } .writingml-emoticon-picker.emoticon-size-small .emoticon-item img { width: 18px !important; height: 18px !important; } .writingml-emoticon-picker.emoticon-size-small .emoticon-categories { max-height: 53px !important; /* Reduced by ~25% from 70px */ } .writingml-emoticon-picker.emoticon-size-small .emoticon-category { padding: 3px !important; /* More compact */ font-size: 12px !important; min-height: 26px !important; } /* Tiny size */ .writingml-emoticon-picker.emoticon-size-tiny { width: 350px; /* JS sets width dynamically for full-size mode */ max-width: 80vw !important; max-height: 85vh !important; } .writingml-emoticon-picker.emoticon-size-tiny .emoticon-grid { grid-template-columns: repeat(auto-fill, 28px) !important; } .writingml-emoticon-picker.emoticon-size-tiny .emoticon-grid-wrapper { /* Height set dynamically by JavaScript for full-size mode */ min-height: 250px !important; } .writingml-emoticon-picker.emoticon-size-tiny .emoticon-item { width: 20px !important; height: 20px !important; padding: 2px !important; } /* Recent label in tiny mode - spans 2 grid cells inline */ .writingml-emoticon-picker.emoticon-size-tiny .emoticon-recent-label { grid-column: span 2 !important; text-align: left !important; font-size: 11px !important; padding: 4px !important; display: flex !important; align-items: center !important; } .writingml-emoticon-picker.emoticon-size-tiny .emoticon-item img { width: 16px !important; height: 16px !important; } .writingml-emoticon-picker.emoticon-size-tiny .emoticon-categories { max-height: 38px !important; /* Further reduced for compact view */ } .writingml-emoticon-picker.emoticon-size-tiny .emoticon-category-grid { grid-template-columns: repeat(3, 1fr) !important; } .writingml-emoticon-picker.emoticon-size-tiny .emoticon-category { padding: 2px !important; /* More compact */ font-size: 10px !important; min-height: 20px !important; /* Reduced from 24px */ line-height: 1.2 !important; } /* Remove spacing above Recent in tiny mode */ .writingml-emoticon-picker.emoticon-size-tiny .emoticon-grid { padding-top: 0 !important; } .writingml-emoticon-picker.emoticon-size-tiny .emoticon-categories-wrapper { margin-bottom: 5px !important; /* Reduced from default */ } .writingml-emoticon-picker.emoticon-size-tiny .emoticon-search-input { padding: 5px 24px 5px 6px !important; font-size: 13px !important; height: 26px !important; } .writingml-emoticon-picker.emoticon-size-tiny .emoticon-color-btn { padding: 5px 8px !important; font-size: 12px !important; } /* ======================================== GIPHY PICKER STYLES ======================================== */ .writingml-giphy-picker { display: none; /* JS controls visibility - no !important */ position: fixed !important; background: #fff !important; border: 1px solid #ccc !important; border-radius: 6px !important; box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important; z-index: 2147483640 !important; overflow: hidden !important; width: 710px; /* JS calculates width - no !important */ max-height: 90vh !important; } /* GIPHY Picker Size Variants */ .writingml-giphy-picker.giphy-size-small { width: 450px !important; } .writingml-giphy-picker.giphy-size-small .giphy-results { height: 280px !important; grid-template-columns: repeat(3, 1fr) !important; gap: 5px 25px !important; padding: 6px 40px 6px 20px !important; } .writingml-giphy-picker.giphy-size-small .giphy-result-container { height: 80px !important; } .writingml-giphy-picker.giphy-size-tiny { width: 350px !important; max-height: 85vh !important; /* Allow up to 85% of viewport */ } .writingml-giphy-picker.giphy-size-tiny .giphy-results { /* Height set dynamically by JavaScript */ grid-template-columns: repeat(2, 1fr) !important; gap: 5px 20px !important; padding: 6px 30px 6px 15px !important; min-height: 240px !important; /* Minimum height fallback */ } .writingml-giphy-picker.giphy-size-tiny .giphy-result-container { height: 70px !important; } .writingml-giphy-picker.giphy-size-tiny .giphy-search-container { padding: 10px 40px 10px 12px !important; } .writingml-giphy-picker.giphy-size-tiny .giphy-footer { padding: 6px 8px !important; } .writingml-giphy-picker.giphy-size-tiny .giphy-logo { height: 14px !important; } /* Compact search UI for tiny size */ .writingml-giphy-picker.giphy-size-tiny .giphy-search-input { padding: 6px 10px !important; font-size: 13px !important; } .writingml-giphy-picker.giphy-size-tiny .giphy-search-btn { padding: 6px 12px !important; font-size: 13px !important; } .writingml-giphy-picker.giphy-size-tiny .giphy-close { width: 28px !important; height: 28px !important; font-size: 20px !important; } /* Header */ .writingml-giphy-picker .giphy-header { position: absolute !important; top: 0 !important; right: 0 !important; z-index: 10 !important; padding: 8px !important; } .writingml-giphy-picker .giphy-close { font-size: 24px !important; color: #666 !important; background: rgba(255,255,255,0.9) !important; border: none !important; cursor: pointer !important; padding: 0 !important; width: 32px !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; border-radius: 4px !important; transition: all 0.2s !important; box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important; } .writingml-giphy-picker .giphy-close:hover { background: #fff !important; color: #333 !important; box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important; } /* Search container */ .writingml-giphy-picker .giphy-search-container { position: relative !important; padding: 12px 50px 12px 15px !important; background: #fff !important; border-bottom: 1px solid #e0e0e0 !important; } .writingml-giphy-picker .giphy-search { display: flex !important; gap: 8px !important; position: relative !important; } .writingml-giphy-picker .giphy-search-input { flex: 1 !important; padding: 8px 12px !important; border: 1px solid #ccc !important; border-radius: 4px !important; font-size: 14px !important; } .writingml-giphy-picker .giphy-search-input:focus { outline: none !important; border-color: #4a90e2 !important; box-shadow: 0 0 0 1px rgba(74,144,226,0.3) !important; } .writingml-giphy-picker .giphy-search-input.has-suggestions { border-radius: 4px 4px 0 0 !important; } .writingml-giphy-picker .giphy-search-btn, .writingml-giphy-picker .giphy-trending-btn { padding: 8px 16px !important; background: #4a90e2 !important; color: white !important; border: none !important; border-radius: 4px !important; cursor: pointer !important; font-size: 14px !important; font-weight: 500 !important; transition: background-color 0.2s !important; } .writingml-giphy-picker .giphy-search-btn:hover, .writingml-giphy-picker .giphy-trending-btn:hover { background: #357abd !important; } /* Suggestions dropdown */ .writingml-giphy-picker .giphy-suggestions { display: none; position: absolute !important; top: 48px !important; left: 0 !important; right: 0 !important; background: #fff !important; border: 1px solid #ccc !important; border-top: none !important; border-radius: 0 0 4px 4px !important; max-height: 200px !important; overflow-y: auto !important; z-index: 2147483641 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; } .writingml-giphy-picker .giphy-suggestion-item { padding: 8px 12px !important; cursor: pointer !important; transition: background 0.15s !important; font-size: 14px !important; } .writingml-giphy-picker .giphy-suggestion-item:hover { background: #f0f0f0 !important; } .writingml-giphy-picker .giphy-suggestion-item.selected { background: #e3f2fd !important; color: #000 !important; font-weight: bold !important; } /* Recent searches */ .writingml-giphy-picker .giphy-recent { padding: 8px 15px !important; background: #fff !important; border-bottom: 1px solid #e0e0e0 !important; display: none; /* JS controls this - no !important */ font-size: 12px !important; } .writingml-giphy-picker .giphy-recent-label { color: #666 !important; font-size: 11px !important; margin-right: 8px !important; } .writingml-giphy-picker .giphy-recent-term { display: inline-block !important; padding: 4px 8px !important; margin: 2px 4px 2px 0 !important; background: #f0f0f0 !important; border-radius: 3px !important; font-size: 12px !important; cursor: pointer !important; color: #555 !important; transition: background 0.15s !important; } .writingml-giphy-picker .giphy-recent-term:hover { background: #e3f2fd !important; color: #333 !important; } /* Results container */ .writingml-giphy-picker .giphy-results { display: none; /* JS controls visibility - no !important */ grid-template-columns: repeat(4, 1fr); /* JS adjusts columns - no !important */ gap: 5px 35px !important; /* vertical horizontal */ padding: 6px 60px 6px 25px !important; /* top right bottom left - extra right for scrollbar */ height: 350px !important; width: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; background: #fff !important; align-content: start !important; box-sizing: border-box !important; } .writingml-giphy-picker .giphy-results-header { grid-column: 1 / -1 !important; text-align: center !important; padding: 8px !important; font-weight: bold !important; font-size: 14px !important; color: #666 !important; } .writingml-giphy-picker .giphy-result-container { position: relative !important; height: 100px !important; border-radius: 4px !important; overflow: hidden !important; cursor: pointer !important; background: #f0f0f0 !important; transition: transform 0.1s, box-shadow 0.1s !important; display: flex !important; align-items: center !important; justify-content: center !important; } .writingml-giphy-picker .giphy-result-container:hover { transform: scale(1.30) !important; z-index: 10 !important; box-shadow: 0px 16px 32px rgba(0,0,0,0.6) !important; border: 1px solid rgba(0,0,0,0.6) !important; } .writingml-giphy-picker .giphy-result-container img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; } /* Overlay with insert/cancel buttons */ .writingml-giphy-picker .giphy-overlay { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(0,0,0,0.8) !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 4px !important; z-index: 1 !important; } .writingml-giphy-picker .giphy-overlay-buttons { display: flex !important; gap: 10px !important; } .writingml-giphy-picker .giphy-insert-btn, .writingml-giphy-picker .giphy-cancel-btn { padding: 4px 10px !important; border: none !important; border-radius: 3px !important; cursor: pointer !important; font-size: 12px !important; font-weight: bold !important; transition: all 0.2s !important; } .writingml-giphy-picker .giphy-insert-btn { background: #4CAF50 !important; color: white !important; } .writingml-giphy-picker .giphy-insert-btn:hover { background: #45a049 !important; } .writingml-giphy-picker .giphy-cancel-btn { background: #f44336 !important; color: white !important; } .writingml-giphy-picker .giphy-cancel-btn:hover { background: #da190b !important; } .writingml-giphy-picker .giphy-success { text-align: center !important; color: white !important; font-size: 20px !important; } .writingml-giphy-picker .giphy-success div { font-size: 12px !important; font-weight: bold !important; margin-top: 5px !important; } /* Loading states */ .writingml-giphy-picker .giphy-loading, .writingml-giphy-picker .giphy-loading-more { grid-column: 1 / -1 !important; text-align: center !important; padding: 20px !important; color: #666 !important; } /* No results */ .writingml-giphy-picker .giphy-no-results { grid-column: 1 / -1 !important; text-align: center !important; padding: 40px 20px !important; color: #666 !important; } .writingml-giphy-picker .giphy-no-results-icon { font-size: 48px !important; margin-bottom: 10px !important; } .writingml-giphy-picker .giphy-no-results-text { font-size: 16px !important; font-weight: 600 !important; margin-bottom: 5px !important; } .writingml-giphy-picker .giphy-no-results-term { font-size: 14px !important; color: #999 !important; } /* Error state */ .writingml-giphy-picker .giphy-error { grid-column: 1 / -1 !important; text-align: center !important; padding: 40px 20px !important; color: #f44336 !important; } .writingml-giphy-picker .giphy-error-icon { font-size: 48px !important; margin-bottom: 10px !important; } .writingml-giphy-picker .giphy-error-text { font-size: 16px !important; font-weight: 600 !important; } /* Footer */ .writingml-giphy-picker .giphy-footer { padding: 4px 15px !important; background: #000 !important; border-top: 1px solid #fff !important; display: flex !important; justify-content: center !important; align-items: center !important; min-height: 40px !important; } .writingml-giphy-picker .giphy-logo { height: 35px !important; width: auto !important; display: block !important; opacity: 0.9 !important; transition: opacity 0.2s !important; } .writingml-giphy-picker .giphy-logo:hover { opacity: 1 !important; } /* Scrollbar - always visible */ .writingml-giphy-picker .giphy-results::-webkit-scrollbar, .writingml-giphy-picker .giphy-suggestions::-webkit-scrollbar { width: 10px !important; background-color: #e8e8e8 !important; } .writingml-giphy-picker .giphy-results::-webkit-scrollbar-track, .writingml-giphy-picker .giphy-suggestions::-webkit-scrollbar-track { background-color: #e8e8e8 !important; border-radius: 4px !important; } .writingml-giphy-picker .giphy-results::-webkit-scrollbar-thumb, .writingml-giphy-picker .giphy-suggestions::-webkit-scrollbar-thumb { background-color: #999 !important; border-radius: 4px !important; } .writingml-giphy-picker .giphy-results::-webkit-scrollbar-thumb:hover, .writingml-giphy-picker .giphy-suggestions::-webkit-scrollbar-thumb:hover { background-color: #777 !important; } /* ================================================================== MINIMIZED EDITOR STATE (V3) Clean class-based styling for editors that start small and expand ================================================================== */ /* Minimized wrapper - left aligned by default, JS controls centering */ .writingml-editor-v3-wrapper.is-minimized { /* Remove any extra spacing */ padding: 0 !important; display: block !important; visibility: visible !important; opacity: 1 !important; transition: none; /* No transition for instant repositioning */ /* Note: margin and width are set via inline styles by JS */ /* Visual styling - match flat newsfeed boxes */ border: 1px solid #d0d0d0 !important; border-radius: 4px !important; background: white !important; box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; margin-top: 10px !important; margin-bottom: 5px !important; margin-left: 5px !important; /* Shift right a few pixels */ } /* Container inside minimized wrapper - remove borders and constraints */ .writingml-editor-v3-wrapper.is-minimized .prosemirror-editor-container { border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; height: auto !important; overflow: visible !important; } /* Toolbar hidden when minimized */ .writingml-editor-v3-wrapper.is-minimized .editor-toolbar { display: none; } /* Toolbar visible and animated when expanded */ .writingml-editor-v3-wrapper.is-expanded .editor-toolbar { display: block; animation: fadeIn 0.2s ease-in-out; border: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; /* Add border line under toolbar */ border-radius: 4px 4px 0 0; /* Rounded top corners - match wrapper radius */ background: #f5f5f5; overflow: visible; /* Don't cut off rounded corners */ margin: 0; padding: 5px; } /* ProseMirror editor in minimized state - compact textarea-like appearance */ .writingml-editor-v3-wrapper.is-minimized .ProseMirror { /* Size and overflow - height set by JS, can vary by context */ overflow: hidden !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; /* Visual styling - no border since wrapper has it */ border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; /* Text styling - font-size set here for desktop, overridden by mobile CSS */ color: #333 !important; font-size: 14px; line-height: 20px !important; white-space: normal !important; overflow-y: auto !important; /* Spacing */ padding: 10px 15px !important; margin: 0 !important; /* Positioning for placeholder */ position: relative; display: block !important; /* No transitions for instant minimized state */ transition: none; } /* Ensure paragraph elements inside minimized editor don't add extra space */ .writingml-editor-v3-wrapper.is-minimized .ProseMirror p { margin: 0 !important; padding: 0 !important; line-height: 20px !important; } /* Focus state for minimized editor - subtle highlight */ .writingml-editor-v3-wrapper.is-minimized .ProseMirror:focus { border-color: #4A90E2 !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05), 0 0 0 2px rgba(74, 144, 226, 0.1) !important; outline: none !important; } /* Expanded wrapper - centered, instant positioning */ .writingml-editor-v3-wrapper.is-expanded { transition: none; /* No wrapper transition for instant centering */ margin-bottom: 20px !important; /* Add space below when expanded */ } /* Container inside expanded wrapper - remove height constraint to allow expansion */ .writingml-editor-v3-wrapper.is-expanded .prosemirror-editor-container { height: auto !important; overflow: visible !important; border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; } /* ProseMirror editor in expanded state - full editor appearance */ .writingml-editor-v3-wrapper.is-expanded .ProseMirror { /* Size set by data-expanded-height via JavaScript */ overflow-y: auto !important; resize: none !important; /* Custom resize handle used instead */ /* Visual styling */ border: 1px solid #d0d0d0 !important; border-top: none !important; /* Remove top border - connects to toolbar */ border-radius: 0 0 4px 4px !important; /* Rounded bottom corners only */ background: white !important; box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; /* Text styling */ color: #000 !important; white-space: pre-wrap !important; /* Preserve spaces and line breaks */ text-overflow: clip !important; /* Spacing */ padding: 10px !important; margin: 0 !important; /* No gap between toolbar and editor */ /* Smooth height transition only */ transition: height 0.3s ease-in-out, min-height 0.3s ease-in-out; } /* When status bar is present, ProseMirror should not have rounded bottom corners */ .writingml-editor-v3-wrapper.is-expanded .ProseMirror:has(~ .editor-status-bar) { border-radius: 0 !important; border-bottom: none !important; /* Status bar provides bottom border */ } /* Alternative for browsers that don't support :has() - use class-based approach */ .writingml-editor-v3-wrapper.is-expanded.has-status-bar .ProseMirror { border-radius: 0 !important; border-bottom: none !important; /* Status bar provides bottom border */ } /* Status bar styling for expanded state */ .writingml-editor-v3-wrapper.is-expanded .editor-status-bar { border-left: 1px solid #d0d0d0; border-right: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; border-radius: 0 0 4px 4px; /* Rounded bottom corners to complete the wrapper */ margin: 0; } /* Focus state for expanded editor - no outline */ .writingml-editor-v3-wrapper.is-expanded .ProseMirror:focus { outline: none !important; } /* Placeholder for minimized editor - show when empty */ .writingml-editor-v3-wrapper.is-minimized .ProseMirror[data-placeholder]::before { content: attr(data-placeholder); color: #999; font-style: normal; pointer-events: none; position: absolute; top: 10px; left: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 30px); } /* Hide placeholder when minimized editor has content */ .writingml-editor-v3-wrapper.is-minimized .ProseMirror[data-placeholder]:not(.ProseMirror-empty)::before { display: none; } /* Always hide placeholder when minimized editor is focused (even if browser adds BR) */ .writingml-editor-v3-wrapper.is-minimized .ProseMirror[data-placeholder]:focus::before { content: none !important; display: none !important; } /* Placeholder for expanded editor - show when empty and not focused */ .writingml-editor-v3-wrapper.is-expanded .ProseMirror[data-placeholder]:empty:not(:focus)::before { content: attr(data-placeholder); color: #999; font-style: italic; pointer-events: none; position: absolute; top: 10px; left: 10px; } /* Always hide placeholder when expanded editor is focused */ .writingml-editor-v3-wrapper.is-expanded .ProseMirror[data-placeholder]:focus::before { content: none !important; display: none !important; } /* Ensure content is positioned above placeholder */ .writingml-editor-v3-wrapper.is-minimized .ProseMirror > *, .writingml-editor-v3-wrapper.is-expanded .ProseMirror > * { position: relative; z-index: 2; } /* ================================================================== MODAL EXPANSION MODE Used when expand_mode: 'modal' - editor expands to centered overlay ================================================================== */ /* Modal backdrop - semi-transparent overlay covering the page */ .editor-modal-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 2147483640; /* High enough to cover left nav and other fixed elements */ display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* Top alignment instead of center */ padding: 60px 20px 20px 20px; /* More top padding to position near top */ animation: modal-backdrop-fade-in 0.2s ease; overflow-y: auto; } @keyframes modal-backdrop-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Modal header with title and close button */ .editor-modal-header { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 900px; padding: 8px 12px; background: #f5f5f5; border-bottom: 1px solid #ddd; border-radius: 8px 8px 0 0; box-sizing: border-box; } .editor-modal-title { font-size: 16px; font-weight: 600; color: #333; flex: 1; } .editor-modal-close { background: none; border: none; font-size: 28px; cursor: pointer; color: #666; padding: 0 8px; line-height: 1; transition: color 0.15s ease; } .editor-modal-close:hover { color: #333; } /* Modal content container - wraps editor and controls */ .notebook-modal-content { width: 100%; } .editor-modal-backdrop .notebook-modal-content { background: white; border-radius: 0 0 8px 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); max-width: 900px; width: 100%; z-index: 2147483641; animation: modal-editor-appear 0.2s ease; padding: 15px; box-sizing: border-box; } @keyframes modal-editor-appear { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* Wrapper when in modal expanded mode */ .writingml-editor-v3-wrapper.is-modal-expanded { position: relative; width: 100% !important; margin: 0 !important; } /* Toolbar in modal mode */ .writingml-editor-v3-wrapper.is-modal-expanded .editor-toolbar { border-radius: 4px 4px 0 0; border: 1px solid #d0d0d0; border-bottom: none; } /* Editor container in modal mode */ .writingml-editor-v3-wrapper.is-modal-expanded .prosemirror-editor-container { border: none !important; background: transparent !important; box-shadow: none !important; } /* ProseMirror editor in modal mode - ensure adequate height */ .writingml-editor-v3-wrapper.is-modal-expanded .ProseMirror { min-height: 250px !important; height: auto !important; max-height: 50vh !important; overflow-y: auto !important; border: 1px solid #d0d0d0 !important; border-radius: 0 !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important; } /* Status bar in modal mode */ .writingml-editor-v3-wrapper.is-modal-expanded .editor-status-bar { border-radius: 0 0 4px 4px; border: 1px solid #d0d0d0; border-top: none; } /* Controls (underLine) in modal mode */ .editor-modal-backdrop #underLine0, .editor-modal-backdrop [id^="underLine"] { display: block !important; visibility: visible !important; padding: 15px 0 5px 0; text-align: center; } /* Body scroll lock when modal is open */ body.editor-modal-open { overflow: hidden !important; } /* Dynamic content blocks (items with c-, b-, l- prefixes, and inherently block tags like {line}) */ .writingml-dynamic-content-block { display: block !important; width: 100%; margin: 0 !important; } /* Inner wrapper for block dynamic content - full width, left aligned */ .writingml-dynamic-content-block .dynamic-content-inner { display: block !important; width: 100%; white-space: normal; /* Collapse whitespace normally for server-rendered content */ } /* Remove extra spacing from server-rendered content inside block nodes */ .writingml-dynamic-content-block .dynamic-content-inner > div { margin: 0 !important; } .writingml-dynamic-content-block .dynamic-content-inner > div > table { margin: 0 !important; } /* Line tags (block version) - respect their width attribute */ .writingml-dynamic-content-block[data-tag-type="line"] > div, .writingml-dynamic-content-block[data-tag-type="line"] .dynamic-content-inner > div { display: block !important; margin: 0 auto !important; min-height: 30px !important; line-height: 30px !important; } /* Line/hr-line tags (inline version) - display as block visually for mark flow-through */ .writingml-dynamic-content[data-tag-type="line"], .writingml-dynamic-content[data-tag-type="hr-line"] { display: block !important; width: 100%; } .writingml-dynamic-content[data-tag-type="line"] .dynamic-content-inner, .writingml-dynamic-content[data-tag-type="hr-line"] .dynamic-content-inner { display: block !important; width: 100%; } .writingml-dynamic-content[data-tag-type="line"] .dynamic-content-inner > div, .writingml-dynamic-content[data-tag-type="hr-line"] .dynamic-content-inner > div { display: block !important; margin: 0 auto !important; } /* Code tags (progress, countdown) - respect their structure */ .writingml-dynamic-content-block[data-tag-type="code"] > div, .writingml-dynamic-content-block[data-tag-type="code"] .dynamic-content-inner > div { display: block !important; margin: 0 auto !important; } /* Fade-in animation for toolbar */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } /* ===== Reusable Prompt Dialog System ===== */ .prompt-dialog-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 2147483647; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); } .prompt-dialog-popup { background: white; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); max-width: 90%; max-height: 90vh; display: flex; flex-direction: column; animation: fadeInScale 0.2s ease-out; } @keyframes fadeInScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .prompt-dialog-header { padding: 20px; border-bottom: 2px solid #f0f0f0; background: linear-gradient(to bottom, #fafafa, #ffffff); } .prompt-dialog-settings { padding: 20px; overflow-y: scroll; flex: 1; max-height: 50vh; } .prompt-dialog-settings::-webkit-scrollbar { width: 10px; background-color: #e8e8e8; } .prompt-dialog-settings::-webkit-scrollbar-track { background-color: #e8e8e8; border-radius: 4px; } .prompt-dialog-settings::-webkit-scrollbar-thumb { background-color: #999; border-radius: 4px; } .prompt-dialog-settings::-webkit-scrollbar-thumb:hover { background-color: #777; } /* Settings popup tab scroll container - always visible scrollbar */ .settings-tab-scroll-container::-webkit-scrollbar { width: 10px; background-color: #e8e8e8; } .settings-tab-scroll-container::-webkit-scrollbar-track { background-color: #e8e8e8; border-radius: 4px; } .settings-tab-scroll-container::-webkit-scrollbar-thumb { background-color: #999; border-radius: 4px; } .settings-tab-scroll-container::-webkit-scrollbar-thumb:hover { background-color: #777; } .prompt-dialog-preview { padding: 15px 20px; border-top: 2px solid #f0f0f0; background: #fafafa; } .prompt-dialog-preview-content { background: white; border: 1px solid #ddd; border-radius: 4px; padding: 10px 15px; min-height: 50px; max-width: 100%; overflow: hidden; text-align: center; box-sizing: border-box; } /* Line preview elements - respect their width/max-width from server */ .prompt-dialog-preview-content > div[width] { display: block !important; margin: 0 auto !important; min-height: 30px !important; line-height: 30px !important; /* Don't override width - let server's width/max-width take effect */ } .prompt-dialog-preview-content > div[style*="background-image"] { display: block !important; margin: 0 auto !important; min-height: 30px !important; line-height: 30px !important; /* Don't override width - let server's width/max-width take effect */ } .prompt-dialog-buttons { padding: 15px 20px; border-top: 1px solid #f0f0f0; display: flex; gap: 10px; justify-content: flex-end; background: #fafafa; } .prompt-dialog-btn { padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s; border: 1px solid; } .prompt-dialog-btn-cancel { background: #f0f0f0; color: #666; border-color: #ccc; } .prompt-dialog-btn-cancel:hover { background: #e0e0e0; border-color: #999; } .prompt-dialog-btn-primary { background: #2196F3; color: white; border-color: #2196F3; } .prompt-dialog-btn-primary:hover { background: #1976D2; border-color: #1976D2; } .prompt-dialog-btn-warning { background: #ff9800; color: white; border-color: #ff9800; } .prompt-dialog-btn-warning:hover { background: #f57c00; border-color: #f57c00; } /* ===== Slider Field Component ===== */ .slider-field { margin-bottom: 15px; } .slider-field-label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 500; color: #333; } .slider-field-control { display: flex; align-items: center; gap: 10px; } .slider-field-control input[type="range"] { flex: 1; height: 6px; border-radius: 3px; background: #ddd; outline: none; -webkit-appearance: none; } .slider-field-control input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #2196F3; cursor: pointer; transition: all 0.2s; } .slider-field-control input[type="range"]::-webkit-slider-thumb:hover { background: #1976D2; transform: scale(1.1); } .slider-field-control input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #2196F3; cursor: pointer; border: none; transition: all 0.2s; } .slider-field-control input[type="range"]::-moz-range-thumb:hover { background: #1976D2; transform: scale(1.1); } .slider-field-value { min-width: 50px; font-size: 13px; font-weight: 500; color: #333; text-align: right; } /* ===== List Container Component ===== */ .list-container { border: 1px solid #ddd; border-radius: 4px; padding: 10px; margin-bottom: 15px; background: #f9f9f9; min-height: 50px; } .list-container-empty { color: #999; font-style: italic; font-size: 13px; text-align: center; padding: 10px; } /* ===== Line Specific Styles ===== */ .emoticon-list-item { display: flex; align-items: center; gap: 10px; padding: 8px; background: white; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 8px; cursor: move; transition: all 0.2s; } .emoticon-list-item:hover { background: #f5f5f5; border-color: #999; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .emoticon-list-item.dragging { opacity: 0.4; cursor: grabbing; } .drag-handle { color: #999; cursor: move; font-size: 16px; line-height: 1; user-select: none; } .emoticon-preview { width: 24px; height: 24px; display: block; image-rendering: crisp-edges; } .emoticon-preview-container { display: inline-flex; align-items: center; margin-right: 5px; } .emoticon-preview-container img { width: 24px; height: 24px; display: block; } .emote-name { flex: 1; font-weight: 500; font-size: 13px; color: #333; } .transform-label { font-size: 11px; color: #666; font-style: italic; } .btn-icon { padding: 4px 8px; background: #f0f0f0; border: 1px solid #ddd; border-radius: 3px; cursor: pointer; font-size: 14px; transition: all 0.2s; } .btn-icon:hover { background: #e0e0e0; border-color: #999; } .btn-icon.btn-danger { background: #ffebee; color: #c62828; border-color: #ef9a9a; font-weight: bold; font-size: 16px; } .btn-icon.btn-danger:hover { background: #ffcdd2; border-color: #e57373; } /* =================================================================== CODE VIEW (ML View) STYLES =================================================================== */ /* ML View textarea - raw WritingML code editor */ .writingml-mlview-v2 { /* Remove blue focus outline */ outline: none !important; /* Subtle background to indicate code mode */ background-color: #fafafa !important; /* Keep monospace font for code */ font-family: 'Courier New', Courier, monospace !important; /* Border styling - subtle but visible */ border: 1px solid #ddd !important; border-radius: 0 0 4px 4px !important; /* Padding for comfort */ padding: 12px !important; /* Text styling - larger and semi-bold for better readability */ color: #333 !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.5 !important; /* Smooth transition */ transition: border-color 0.2s, background-color 0.2s; } /* Focus state - emphasize border slightly but no blue glow */ .writingml-mlview-v2:focus { background-color: #fff !important; border-color: #999 !important; } /* Wrapper indicator when in code view mode */ .writingml-editor-v3-wrapper:has(.writingml-mlview-v2[style*="display: block"]) { /* Add subtle indicator */ position: relative; } /* "ML" badge indicator - REMOVED: was covering fullscreen button */ /* The code toggle button already indicates when you're in code view */ /* .writingml-editor-v3-wrapper:has(.writingml-mlview-v2[style*="display: block"])::before { content: "ML"; position: absolute; top: 8px; right: 8px; background: #424242; color: #fff; font-size: 10px; font-weight: bold; padding: 4px 8px; border-radius: 3px; letter-spacing: 0.5px; z-index: 1000; pointer-events: none; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } */ /* Fullscreen Mode Styles */ .writingml-editor-v3-wrapper { position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Iframe fullscreen mode (parent enlarges iframe, no native Fullscreen API) */ .writingml-editor-v3-wrapper.writingml-fullscreen-iframe { width: 100vw !important; height: 100vh !important; max-width: 100% !important; margin: 0 !important; padding: 20px !important; background: #f5f5f5 !important; box-sizing: border-box; } .writingml-editor-v3-wrapper.writingml-fullscreen-iframe .prosemirror-editor-container { height: calc(100vh - 150px) !important; max-height: calc(100vh - 150px) !important; } /* Target ONLY the main editor - see fullscreen .ProseMirror comment below */ .writingml-editor-v3-wrapper.writingml-fullscreen-iframe > .prosemirror-editor-container > div > .ProseMirror { height: 100% !important; max-height: 100% !important; } /* Dark backdrop - standalone element (must be first to appear behind) */ .writingml-fullscreen-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); z-index: 2147483500 !important; animation: backdropFadeIn 0.5s ease-in-out; touch-action: none; /* Prevent scroll on iOS/iPad */ } .writingml-editor-v3-wrapper.fullscreen { position: fixed !important; top: 40px !important; left: 40px !important; right: 40px !important; bottom: 40px !important; z-index: 2147483600 !important; width: auto !important; height: auto !important; padding: 0 !important; margin: 0 auto !important; max-width: calc(1200px + 80px) !important; background: white !important; border: none !important; border-radius: 4px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important; display: flex !important; flex-direction: column !important; animation: fullscreenEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1); isolation: isolate !important; } /* Column-constrained fullscreen - stays within content column width */ .writingml-editor-v3-wrapper.fullscreen.fullscreen-column-constrained { left: var(--fullscreen-left, 40px) !important; right: var(--fullscreen-right, 40px) !important; max-width: none !important; /* Let column bounds control width instead */ } /* iPad keyboard open - editor adjusts to stay above keyboard */ .writingml-editor-v3-wrapper.fullscreen.ipad-keyboard-open { bottom: var(--ipad-keyboard-bottom, 40px) !important; transition: bottom 0.15s ease-out; } /* Fullscreen enter animation */ @keyframes fullscreenEnter { 0% { opacity: 0; transform: scale(0.9); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } } /* Fullscreen exit animation - transitions back to original position */ @keyframes fullscreenExit { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0.3; transform: translate(var(--exit-translate-x, 0), var(--exit-translate-y, 0)) scale(var(--exit-scale-x, 0.97), var(--exit-scale-y, 0.97)); } } /* Backdrop fade-in animation - slower and smoother */ @keyframes backdropFadeIn { 0% { opacity: 0; } 40% { opacity: 0.3; } 100% { opacity: 1; } } /* Backdrop fade-out animation */ @keyframes backdropFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* Exit animation class */ .writingml-editor-v3-wrapper.fullscreen-exiting { animation: fullscreenExit 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; transform-origin: top left !important; } .writingml-fullscreen-backdrop.backdrop-exiting { animation: backdropFadeOut 0.6s ease-out forwards !important; } /* Autosave banner in fullscreen - participates in flex flow */ .writingml-editor-v3-wrapper.fullscreen .autosave-recovery-banner { flex-shrink: 0; } /* Editor toolbar stays at top */ .writingml-editor-v3-wrapper.fullscreen .editor-toolbar { flex-shrink: 0; border-radius: 4px 4px 0 0; position: relative; z-index: 1; } /* Inline menu container in fullscreen - participates in flex flow */ .writingml-editor-v3-wrapper.fullscreen .inline-menu-container { position: relative !important; flex-shrink: 0; z-index: 2 !important; margin-top: 0 !important; /* height: 0 by default from base styles, expands when menu opens */ } /* Editor container fills remaining space via flexbox */ .writingml-editor-v3-wrapper.fullscreen .prosemirror-editor-container { flex: 1 !important; min-height: 0 !important; /* Critical for flex child scrolling */ position: relative !important; overflow-y: auto !important; border-radius: 0 !important; resize: none !important; /* Disable resize handle in fullscreen */ } /* Code view container in fullscreen - fills remaining space like editor container */ .writingml-editor-v3-wrapper.fullscreen .wml-codeview-editor { flex: 1 !important; min-height: 0 !important; position: relative !important; overflow-y: auto !important; } /* Tab bar in fullscreen mode */ .writingml-editor-v3-wrapper.fullscreen .editor-tabs-bar { flex-shrink: 0; position: relative; z-index: 1; } /* Status bar at bottom of fullscreen - participates in flex flow */ .writingml-editor-v3-wrapper.fullscreen .editor-status-bar { flex-shrink: 0; position: relative !important; z-index: 2; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } /* Container div (holds ProseMirror and footnotes) - use normal flow in fullscreen so footnotes scroll with content instead of being pinned at bottom */ .writingml-editor-v3-wrapper.fullscreen > .prosemirror-editor-container > div { display: block; min-height: 100%; } /* ProseMirror element in fullscreen - use normal flow (not absolute) so footnotes can appear after content and scroll together. IMPORTANT: Use direct child selectors (>) to target ONLY the main editor. Nested ProseMirror views (dropnote, popnote, footnote content previews) must NOT get these styles or they break layout. Do not simplify this selector! */ .writingml-editor-v3-wrapper.fullscreen > .prosemirror-editor-container > div > .ProseMirror { position: relative !important; height: auto !important; min-height: 100% !important; /* Fill container visually, can grow larger with content */ resize: none !important; /* Disable resize handle in fullscreen */ padding-top: 12px !important; /* Breathing room below toolbar */ padding-bottom: 20px !important; /* Breathing room at bottom regardless of status bar */ } /* Footnotes section in fullscreen - normal flow after content (scrolls with content) */ .writingml-editor-v3-wrapper.fullscreen .writingml-footnotes-section { position: relative !important; background: white !important; margin-top: 30px !important; padding: 15px !important; padding-top: 10px !important; border-top: 2px solid #333; } /* Ensure footnote entries display correctly in fullscreen */ .writingml-editor-v3-wrapper.fullscreen .footnote-entry { display: flex !important; flex-direction: row !important; align-items: flex-start !important; margin-bottom: 10px !important; } .writingml-editor-v3-wrapper.fullscreen .writingml-footnote-text { flex: 1 !important; display: block !important; color: #333 !important; } /* Position fullscreen button at far right of toolbar (desktop only) */ .Editor_Button.Editor_Fullscreen { float: right; font-weight: bold; margin-left: auto; } /* On mobile, hide fullscreen button - mobile is essentially already fullscreen */ @media (max-width: 768px) { .Editor_Button.Editor_Fullscreen { display: none !important; } } /* ESC hint text above editor in fullscreen */ .fullscreen-esc-hint { position: absolute; top: -28px; right: 0; color: rgba(255, 255, 255, 0.9); font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; z-index: 2147483601; cursor: pointer; pointer-events: auto; transition: color 0.2s ease, opacity 0.2s ease; user-select: none; -webkit-user-select: none; } .fullscreen-esc-hint:hover { color: rgba(255, 255, 255, 1); opacity: 0.8; } /* Block exit hint - shows when editing inside quote/columns/pre blocks */ .block-exit-hint { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(179, 217, 255, 0.95); border: 1px solid rgba(100, 150, 200, 0.4); border-radius: 12px; font-size: 11px; color: #4a6785; z-index: 100; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); opacity: 0; animation: block-hint-fade-in 0.2s ease forwards; } .block-exit-hint .block-hint-text { text-align: center; } .block-exit-hint .block-hint-dismiss { cursor: pointer; font-size: 14px; font-weight: bold; color: #4a6785; opacity: 0.6; line-height: 1; transition: opacity 0.15s ease; margin-left: 2px; } .block-exit-hint .block-hint-dismiss:hover { opacity: 1; } /* When hint is in overlay editor footer */ .block-exit-hint.in-overlay-footer { position: static; transform: none; margin-right: auto; animation: none; opacity: 1; } @keyframes block-hint-fade-in { from { opacity: 0; transform: translateX(-50%) translateY(5px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ============================================================ AUTOSAVE SYSTEM STYLES ============================================================ */ /* Autosave Recovery Banner - Compact single-line style */ .autosave-recovery-banner { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(to bottom, #fff8e1, #fff3cd); border-bottom: 1px solid #ffc107; padding: 4px 8px 4px 12px; font-size: 12px; color: #856404; } .autosave-recovery-message { flex: 1; } .autosave-stale-warning { color: #d9534f; font-weight: bold; } .autosave-recovery-buttons { display: flex; align-items: center; gap: 6px; margin-left: 12px; } .autosave-recovery-btn { padding: 2px 10px; border: none; border-radius: 3px; cursor: pointer; font-size: 11px; font-weight: 500; transition: background 0.15s; } .autosave-recovery-restore { background: #4CAF50; color: white; } .autosave-recovery-restore:hover { background: #45a049; } .autosave-recovery-discard { background: #e8e8e8; color: #555; } .autosave-recovery-discard:hover { background: #ddd; } .autosave-recovery-settings { background: transparent; color: #856404; font-size: 13px; padding: 2px 6px; } .autosave-recovery-settings:hover { background: rgba(0,0,0,0.08); } .autosave-recovery-close { background: none; border: none; font-size: 16px; color: #856404; cursor: pointer; padding: 0 4px; margin-left: 4px; line-height: 1; opacity: 0.6; transition: opacity 0.15s; } .autosave-recovery-close:hover { opacity: 1; } /* Editor Status Bar */ .editor-status-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; background: #f9f9f9; border-top: 1px solid #ddd; font-size: 12px; min-height: 28px; user-select: none; -webkit-user-select: none; } /* Compact status bar for tiny mode (IM editors) */ .editor-status-bar.status-bar-tiny { padding: 3px 8px; min-height: 22px; font-size: 11px; } /* Status bar in normal editor - ensure it's at the bottom with rounded corners */ .writingml-editor-v3-wrapper.has-status-bar .editor-status-bar { border-radius: 0 0 4px 4px; margin: 0; } /* When status bar present, container should not have bottom rounded corners */ .writingml-editor-v3-wrapper.has-status-bar .prosemirror-editor-container { border-radius: 0; } /* Status Bar Sections */ .editor-status-bar-left { display: flex; align-items: center; gap: 8px; flex: 1; } .editor-status-bar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; } /* Compact spacing for tiny mode */ .editor-status-bar.status-bar-tiny .editor-status-bar-left { gap: 6px; } .editor-status-bar.status-bar-tiny .editor-status-bar-right { gap: 8px; } /* Status Bar Counters */ .status-bar-counter { font-size: 12px; color: #666; padding: 4px 8px; border-radius: 3px; background: #fff; border: 1px solid #ddd; user-select: none; white-space: nowrap; } .status-bar-counter:hover { background: #f0f0f0; } /* Compact counters for tiny mode */ .editor-status-bar.status-bar-tiny .status-bar-counter { font-size: 11px; padding: 2px 6px; } /* Autosave Status Indicator */ .autosave-status-indicator { font-size: 12px; color: #666; cursor: pointer; padding: 4px 8px; border-radius: 3px; transition: background 0.2s; user-select: none; } .autosave-status-indicator:hover { background: #f0f0f0; } .autosave-status-indicator.autosave-saving { color: #999; font-style: italic; } .autosave-status-indicator.autosave-saved { color: #4CAF50; } .autosave-status-indicator.autosave-error { color: #f44336; font-weight: bold; } .autosave-status-indicator.autosave-disabled { color: #999; opacity: 0.7; } .autosave-status-indicator.autosave-idle { color: #666; } /* Dismissed Backup Notification (in status bar) */ .autosave-backup-notification { display: flex; align-items: center; margin-left: 15px; padding: 4px 10px; font-size: 12px; } /* Mobile Status Bar - Compact layout with stacked counters */ .writingml-editor-v3-wrapper.mobile .editor-status-bar { padding: 6px 8px; /* Reduced from 6px 12px */ } .writingml-editor-v3-wrapper.mobile .editor-status-bar-right { gap: 8px; /* Slightly reduced gap between counters */ } .writingml-editor-v3-wrapper.mobile .status-bar-counter { display: flex; flex-direction: column; align-items: center; padding: 4px 10px; min-width: 60px; text-align: center; } .writingml-editor-v3-wrapper.mobile .status-bar-counter .counter-label { font-size: 11px; color: #888; } .writingml-editor-v3-wrapper.mobile .status-bar-counter .counter-value { font-size: 13px; font-weight: 500; color: #444; } .writingml-editor-v3-wrapper.mobile .autosave-status-indicator { padding-left: 0; /* Reduce left padding for autosave text */ } /* ========================================== Bug Report Button and Modal ========================================== */ /* Bug Report Button in Status Bar */ .status-bar-bug-button { padding: 4px 10px; margin-left: 2px; background: #ffb74d; color: white; border: none; border-radius: 3px; font-size: 12px; cursor: pointer; transition: background 0.2s; user-select: none; white-space: nowrap; } .status-bar-bug-button:hover { background: #ffa726; } .status-bar-bug-button:active { background: #ff9800; } .status-bar-bug-button.disabled, .status-bar-bug-button:disabled { background: #999; color: #ccc; cursor: not-allowed; opacity: 0.7; } .status-bar-bug-button.disabled:hover, .status-bar-bug-button:disabled:hover { background: #999; } /* Preview Button in Status Bar */ .status-bar-preview-button { padding: 4px 8px; background: #e8f5e9; color: #333; border: 1px solid #c8e6c9; border-radius: 3px; font-size: 12px; cursor: pointer; user-select: none; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease; } .status-bar-preview-button:hover { background: #c8e6c9; border-color: #a5d6a7; } .status-bar-preview-button:active { background: #a5d6a7; } .status-bar-preview-button:disabled { background: #f5f5f5; color: #999; border-color: #ddd; cursor: wait; } /* Preview Modal Overlay */ .editor-preview-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 2147483647; padding: 20px; } .editor-preview-modal { background: white; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); max-width: 1000px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; animation: preview-modal-appear 0.2s ease; } @keyframes preview-modal-appear { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .editor-preview-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid #e0e0e0; background: #f5f5f5; border-radius: 8px 8px 0 0; } .editor-preview-modal-title { font-weight: bold; font-size: 16px; color: #333; } .editor-preview-modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #666; padding: 0 5px; line-height: 1; transition: color 0.15s ease; } .editor-preview-modal-close:hover { color: #333; } .editor-preview-modal-content { padding: 20px; overflow-y: auto; flex: 1; min-height: 100px; max-height: 60vh; } /* Preview modal scrollbar - always visible */ .editor-preview-modal-content::-webkit-scrollbar { width: 10px; background-color: #e8e8e8; } .editor-preview-modal-content::-webkit-scrollbar-track { background-color: #e8e8e8; border-radius: 4px; } .editor-preview-modal-content::-webkit-scrollbar-thumb { background-color: #999; border-radius: 4px; } .editor-preview-modal-content::-webkit-scrollbar-thumb:hover { background-color: #777; } .editor-preview-modal-footer { padding: 12px 20px; border-top: 1px solid #e0e0e0; background: #fafafa; border-radius: 0 0 8px 8px; text-align: center; } /* Bug Report Modal Overlay */ .bug-report-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 10000; } /* Bug Report Modal */ .bug-report-modal { background: white; border-radius: 8px; width: 90%; max-width: 600px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } /* Modal Header */ .bug-report-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid #ddd; } .bug-report-modal-header h3 { margin: 0; font-size: 1.3em; color: #333; } .bug-report-modal-close { background: none; border: none; font-size: 1.8em; color: #666; cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.2s; } .bug-report-modal-close:hover { background: #f0f0f0; color: #333; } /* Modal Body */ .bug-report-modal-body { padding: 20px; overflow-y: auto; flex: 1; } .bug-report-form-group { margin-bottom: 20px; } .bug-report-form-group label { display: block; margin-bottom: 8px; font-weight: bold; color: #333; } .bug-report-input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; font-family: inherit; box-sizing: border-box; } .bug-report-input:focus { outline: none; border-color: #2196F3; box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1); } .bug-report-textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; font-family: inherit; resize: vertical; min-height: 120px; box-sizing: border-box; } .bug-report-textarea:focus { outline: none; border-color: #2196F3; box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1); } .bug-report-info { padding: 12px; background: #f9f9f9; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; color: #666; line-height: 1.6; } .bug-report-error { padding: 12px; background: #ffebee; border: 1px solid #f44336; border-radius: 4px; color: #c62828; font-size: 14px; margin-top: 15px; } /* Modal Footer */ .bug-report-modal-footer { display: flex; align-items: center; justify-content: flex-end; padding: 15px 20px; border-top: 1px solid #ddd; gap: 10px; } .bug-report-modal-button { padding: 10px 20px; border: none; border-radius: 4px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.2s; } .bug-report-modal-button:disabled { opacity: 0.6; cursor: not-allowed; } .bug-report-modal-button-primary { background: #4CAF50; color: white; } .bug-report-modal-button-primary:hover:not(:disabled) { background: #45a049; } .bug-report-modal-button-secondary { background: #f0f0f0; color: #333; } .bug-report-modal-button-secondary:hover:not(:disabled) { background: #e0e0e0; } /* Explanation Modal List Styling */ .bug-report-modal-body ul { margin: 10px 0; padding-left: 25px; } .bug-report-modal-body li { margin: 8px 0; line-height: 1.5; } .bug-report-modal-body h4 { margin: 15px 0 10px; color: #333; font-size: 1.05em; } /* ========================================== Replay Viewer Interface ========================================== */ /* Replay Viewer Modal */ .replay-viewer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); z-index: 10000; display: flex; flex-direction: column; } .replay-viewer-container { display: flex; flex-direction: column; height: 100%; padding: 20px; } /* Replay Header */ .replay-viewer-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; background: #1a1a1a; color: white; border-radius: 8px; margin-bottom: 15px; } .replay-viewer-title { font-size: 1.2em; font-weight: bold; } .replay-viewer-close { background: #f44336; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; } .replay-viewer-close:hover { background: #d32f2f; } /* Replay Info Panel */ .replay-info-panel { background: #2a2a2a; color: white; padding: 15px 20px; border-radius: 8px; margin-bottom: 15px; line-height: 1.6; } .replay-info-panel strong { color: #4CAF50; } /* Replay Editor Container */ .replay-editor-container { flex: 1; background: white; border-radius: 8px; overflow: hidden; margin-bottom: 15px; display: flex; flex-direction: column; } /* Replay Controls */ .replay-controls { display: flex; align-items: center; gap: 15px; padding: 15px 20px; background: #1a1a1a; border-radius: 8px; } .replay-control-button { background: #4CAF50; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 500; transition: background 0.2s; } .replay-control-button:hover { background: #45a049; } .replay-control-button:disabled { background: #555; cursor: not-allowed; opacity: 0.5; } .replay-timeline { flex: 1; height: 8px; background: #333; border-radius: 4px; position: relative; cursor: pointer; } .replay-timeline-progress { height: 100%; background: #4CAF50; border-radius: 4px; transition: width 0.1s linear; } .replay-timeline-marker { position: absolute; top: -4px; width: 4px; height: 16px; background: #ff9800; border-radius: 2px; transform: translateX(-50%); } .replay-speed-control { display: flex; align-items: center; gap: 10px; color: white; } .replay-speed-select { background: #333; color: white; border: 1px solid #555; padding: 6px 12px; border-radius: 4px; cursor: pointer; } .replay-time-display { color: #aaa; font-size: 14px; min-width: 120px; text-align: center; } /* Replay Cursor and Selection Indicators */ .replay-cursor-indicator { position: absolute; width: 2px; background: #2196F3; pointer-events: none; z-index: 100; animation: blink 1s step-end infinite; } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .replay-selection-indicator { position: absolute; background: rgba(33, 150, 243, 0.3); border: 1px solid rgba(33, 150, 243, 0.6); pointer-events: none; z-index: 99; } /* Replay Autocomplete Dropdown */ .replay-autocomplete-dropdown { position: absolute; background: white; border: 1px solid #2196F3; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); max-height: 200px; overflow-y: auto; z-index: 1000; min-width: 200px; font-family: inherit; font-size: 14px; } /* Replay List Modal */ .replay-list-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; border-radius: 8px; width: 90%; max-width: 900px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); z-index: 10001; } .replay-list-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid #ddd; } .replay-list-body { flex: 1; overflow-y: auto; padding: 20px; } .replay-list-item { padding: 15px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 10px; transition: background 0.2s; } .replay-item-main { cursor: pointer; padding: 5px; border-radius: 4px; transition: background 0.2s; } .replay-item-main:hover { background: #f0f0f0; } .replay-list-item-title { font-weight: bold; font-size: 1.1em; margin-bottom: 5px; color: #333; } .replay-list-item-meta { font-size: 0.9em; color: #666; margin-bottom: 8px; } .replay-list-item-description { color: #555; line-height: 1.5; } /* ============================================================================== SPLITS / TABS - Document section tabs ============================================================================== */ /* Tab bar container - hidden by default, shown when splits exist */ .editor-tabs-bar { display: none; /* Shown via JS when tabs.length > 1 */ align-items: flex-end; /* Align tabs to bottom for seamless connection */ background: #f5f5f5; border-bottom: 1px solid #d0d0d0; padding: 4px 8px 0 8px; /* Minimal top padding, no bottom - tabs touch the border */ gap: 4px; min-height: 32px; overflow: visible; /* Let tabs container handle scrolling, not the bar */ flex-shrink: 0; position: relative; } /* Tabs container - holds all tab buttons, scrollable */ .editor-tabs { display: flex; gap: 2px; flex: 1; min-width: 0; /* Allow shrinking */ overflow-x: auto; overflow-y: hidden; padding-bottom: 0; /* Prevent scrollbar from adding extra space */ } /* Scrollbar styling for tabs container */ .editor-tabs::-webkit-scrollbar { height: 4px; } .editor-tabs::-webkit-scrollbar-track { background: transparent; } .editor-tabs::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; } /* Individual tab button */ .editor-tab { display: flex; align-items: center; gap: 6px; padding: 7px 14px; background: #e0e0e0; border: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; border-radius: 4px 4px 0 0; cursor: pointer; font-size: 13px; font-family: inherit; color: #555; white-space: nowrap; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; position: relative; margin-bottom: -1px; /* Overlap with tab bar border */ z-index: 1; } .editor-tab:hover { background: #e8e8e8; color: #333; } .editor-tab.active { background: #fff !important; border-color: #d0d0d0 !important; border-bottom: none !important; /* No bottom border on active tab */ color: #000 !important; z-index: 2; /* Above pseudo-element border (z-index: 0) and other tabs (z-index: 1) */ position: relative; /* Extend tab down to cover the pseudo-element border line */ margin-bottom: -1px; padding-bottom: 8px; } /* Tab name span */ .editor-tab-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; font-weight: bold; } /* Tab close button - removed, delete is in context menu */ /* Inline rename input */ .editor-tab-rename-input { width: 100px; padding: 2px 4px; font-size: 13px; font-family: inherit; border: 1px solid #007bff; border-radius: 2px; outline: none; } /* Add tab button */ .editor-tab-add { display: flex; align-items: center; justify-content: center; align-self: center; /* Vertically center in tab bar */ width: 28px; height: 28px; padding: 0; background: transparent; border: 1px dashed #adb5bd; border-radius: 4px; cursor: pointer; font-size: 18px; color: #6c757d; transition: all 0.15s; flex-shrink: 0; margin-bottom: 4px; /* Adjust for visual centering with tab heights */ } .editor-tab-add:hover { background: #e9ecef; border-style: solid; color: #495057; } /* Drag and drop states */ .editor-tab.dragging { opacity: 0.5; } .editor-tab.drag-over-left { box-shadow: -3px 0 0 0 #007bff; } .editor-tab.drag-over-right { box-shadow: 3px 0 0 0 #007bff; } /* Tab context menu */ .editor-tab-context-menu { position: fixed; background: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); padding: 4px 0; min-width: 160px; z-index: 10000; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .editor-tab-context-menu-item { padding: 8px 16px; cursor: pointer; font-size: 13px; color: #333; } .editor-tab-context-menu-item:hover { background: #f0f0f0; } .editor-tab-context-menu-item.danger { color: #dc3545; } .editor-tab-context-menu-item.danger:hover { background: #dc3545; color: #fff; } .editor-tab-context-menu-separator { height: 1px; background: #ddd; margin: 4px 0; } /* Wrapper class when splits are active */ .writingml-editor-v3-wrapper.has-splits .prosemirror-editor-container { border-radius: 0 0 4px 4px; border-top: none !important; /* Tab bar border connects directly */ } .writingml-editor-v3-wrapper.has-splits .ProseMirror { border-top: none !important; border-radius: 0 0 4px 4px !important; margin-top: 0 !important; } /* When splits are active in expanded mode, remove the shadow that creates the visual line */ .writingml-editor-v3-wrapper.has-splits.is-expanded .ProseMirror { box-shadow: none !important; border-top: none !important; } /* Tab bar connects to editor - use pseudo-element for bottom border */ .writingml-editor-v3-wrapper.has-splits .editor-tabs-bar { border-left: 1px solid #d0d0d0; border-right: 1px solid #d0d0d0; border-bottom: none; /* Use pseudo-element instead so tabs can cover it */ background: #f5f5f5; padding-bottom: 0; margin-left: 0; margin-right: 0; position: relative; } /* Pseudo-element draws the bottom border BEHIND the tabs */ .writingml-editor-v3-wrapper.has-splits .editor-tabs-bar::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: #d0d0d0; z-index: 0; /* Behind tabs which have z-index 1-2 */ } /* Code view (ML textarea) seamless connection to tabs */ .writingml-editor-v3-wrapper.has-splits .writingml-mlview-v2 { border-top: none !important; border-radius: 0 0 4px 4px !important; margin-top: 0 !important; } /* Tab marker - shows tab boundaries in collapsed view */ /* Styled like a tab sitting on a horizontal divider line */ .writingml-tab-marker { display: flex; align-items: flex-end; margin: 12px 0; position: relative; user-select: none; cursor: default; min-height: 28px; padding-bottom: 2px; } /* The horizontal line behind the tab */ .writingml-tab-marker::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #ccc; z-index: 0; } /* Container for icon and label - the actual "tab" shape */ .writingml-tab-marker .tab-marker-icon, .writingml-tab-marker .tab-marker-label { position: relative; z-index: 1; } .writingml-tab-marker .tab-marker-icon { display: flex; align-items: center; justify-content: center; background: #f5f5f5; border: 1px solid #ccc; border-right: none; border-bottom: 2px solid #ccc; border-radius: 4px 0 0 0; padding: 4px 6px 4px 8px; margin-left: 10px; margin-bottom: -2px; } .writingml-tab-marker .tab-marker-icon::before { content: '📁'; font-size: 12px; } .writingml-tab-marker .tab-marker-label { display: flex; align-items: center; background: #f5f5f5; border: 1px solid #ccc; border-left: none; border-bottom: 2px solid #ccc; border-radius: 0 4px 0 0; padding: 4px 10px 4px 4px; margin-bottom: -2px; font-size: 12px; font-weight: bold; color: #555; } /* Hover state for better click affordance */ .writingml-tab-marker:hover .tab-marker-icon, .writingml-tab-marker:hover .tab-marker-label { background: #e8e8e8; border-color: #bbb; } /* Selected state */ .writingml-tab-marker.ProseMirror-selectednode .tab-marker-icon, .writingml-tab-marker.ProseMirror-selectednode .tab-marker-label { background: #d0e8ff; border-color: #2196F3; } /* Tab marker with color - colored left accent strip */ .writingml-tab-marker[data-color] .tab-marker-icon { border-left: 6px solid var(--tab-color, #ccc); padding-left: 7px; } /* Tab bar tab with color - colored top border accent */ .editor-tab[data-color] { border-top: 4px solid var(--tab-color, transparent) !important; padding-top: 5px; /* Reduce padding to account for border */ } /* Active tab with color keeps the color border */ .editor-tab[data-color].active { border-top: 4px solid var(--tab-color, transparent) !important; border-left-color: #d0d0d0 !important; border-right-color: #d0d0d0 !important; } /* ===== Selection Drag Cursor Styles ===== */ /* Shows grab cursor when hovering over a text selection to indicate it's draggable */ .ProseMirror.selection-draggable { cursor: grab; } /* Shows grabbing cursor during active drag operation */ .ProseMirror.selection-dragging, .ProseMirror.selection-dragging * { cursor: grabbing !important; } /* ===== Code View Syntax Highlighting ===== */ /* Styles for the ProseMirror-based code view with WritingML syntax highlighting */ /* Code view editor container - Light theme with white background */ .wml-codeview-editor { font-family: 'Consolas', 'Monaco', 'Menlo', 'Courier New', monospace; font-size: 13px; line-height: 1.5; background: #ffffff; color: #333333; text-align: left; padding: 0; overflow: auto; box-sizing: border-box; border: 1px solid #ccc; } /* Code view ProseMirror editor */ .wml-codeview-editor .ProseMirror { outline: none; white-space: pre-wrap; word-wrap: break-word; padding: 8px 12px; min-height: 100%; text-align: left; box-sizing: border-box; } /* Code view line styling */ .wml-code-line { min-height: 1.5em; padding: 0 4px; position: relative; } /* Empty line placeholder */ .wml-code-line:empty::before { content: '\200B'; /* Zero-width space to maintain line height */ } /* Active line highlighting - more visible */ .wml-active-line { background: rgba(255, 255, 0, 0.15); border-left: 2px solid #f0c000; margin-left: -2px; } /* Syntax highlighting colors - Light theme */ /* Tag braces only - bold for visibility */ .wml-brace { font-weight: 700; } /* ========== TEXT FORMAT TAGS (Blue family) ========== */ /* Basic formatting: {b}, {i}, {u}, {x}, {sub}, {super} */ .wml-tag-format { color: #0066cc; } /* Closing tags: same as format */ .wml-tag-close { color: #0066cc; } /* ========== STYLE/APPEARANCE TAGS (Purple-Pink family) ========== */ /* Color tags: {c:red}, {color:blue} - Magenta/Pink */ .wml-tag-color { color: #d946ef; } /* Font tags: {font:Arial} - Deep violet */ .wml-tag-font { color: #7c3aed; } /* Size tags: {size:12pt} - Red-purple/Crimson */ .wml-tag-size { color: #be185d; } /* Highlight tags: {hilite:yellow} - Orange-pink */ .wml-tag-highlight { color: #ea580c; } /* Other style tags: {linespace:1.5} - Purple */ .wml-tag-style { color: #9333ea; } /* Legacy param class (fallback) */ .wml-tag-param { color: #9333ea; } /* Dynamic content tags: {item:123}, {user:name}, {x-link:url} - Purple */ .wml-tag-dynamic { color: #af00db; } /* Self-closing tags: {br}, {indent}, {hr}, {s} - Teal */ .wml-tag-self { color: #008080; } /* Line/separator tags: {hr-line}, {line} - Dark brown/sienna */ .wml-tag-line { color: #a0522d; } /* Block container tags: {quote}, {pre}, {hide}, {sig} - Green */ .wml-tag-block { color: #008000; } /* Code tags: {code:language} - Dark blue/navy (distinct from other blocks) */ .wml-tag-code { color: #0066cc; background: rgba(0, 102, 204, 0.08); border-radius: 2px; padding: 0 2px; } /* Alignment tags: {center}, {left}, {right}, {justify} - Brown/Orange */ .wml-tag-align { color: #795e26; } /* Emoticon tags: {e:smile}, {he:wink} - Pink */ .wml-tag-emoticon { color: #c41a7f; } /* Escaped braces: {{ and }} - Gray */ .wml-tag-escaped { color: #808080; } /* Code view cursor - dark for visibility on white background */ .wml-codeview-editor .ProseMirror-cursor { border-left: 2px solid #333; } /* Code view selection - light blue for white background */ .wml-codeview-editor .ProseMirror ::selection { background: #add6ff; } /* Code view focus ring */ .wml-codeview-editor .ProseMirror-focused { outline: none; } /* ============================================================ CREATIVE MODE STYLES Expanded tool panels in fullscreen mode ============================================================ */ /* Mode Toggle Buttons - positioned left of ESC hint */ .fullscreen-mode-toggle { position: absolute; top: -28px; left: 0; display: flex; gap: 2px; z-index: 2147483601; user-select: none; -webkit-user-select: none; } .mode-toggle-btn { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 4px; padding: 3px 12px; color: rgba(255, 255, 255, 0.7); font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all 0.2s ease; } .mode-toggle-btn:hover { background: rgba(255, 255, 255, 0.2) !important; color: rgba(255, 255, 255, 0.9); } .mode-toggle-btn.active { background: rgba(255, 255, 255, 0.25) !important; color: rgba(255, 255, 255, 0.95); border-color: rgba(255, 255, 255, 0.4) !important; } /* Side Panels */ .fullscreen-creative-panel { position: fixed; top: 60px; bottom: 60px; width: 200px; background: rgba(30, 30, 30, 0.95); border-radius: 8px; z-index: 2147483599; /* Start BEHIND the editor (2147483600) */ overflow-y: auto; overflow-x: hidden; padding: 8px; box-sizing: border-box; opacity: 0; transition: opacity 0.3s ease; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) transparent; user-select: none; -webkit-user-select: none; } .fullscreen-creative-panel::-webkit-scrollbar { width: 6px; } .fullscreen-creative-panel::-webkit-scrollbar-track { background: transparent; } .fullscreen-creative-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; } .fullscreen-creative-panel.visible { opacity: 1; z-index: 2147483601; /* Bring to front when visible */ } /* When overlay editor is open, panels need higher z-index to appear above backdrop */ .fullscreen-creative-panel.overlay-active { z-index: 2147483645 !important; /* Above backdrop (2147483640), below modal (2147483641 internal content) */ } /* Body class added when creative panels are targeting overlay editor */ body.creative-panels-overlay-active .writingml-emoticon-picker, body.creative-panels-overlay-active .writingml-giphy-picker, body.creative-panels-overlay-active .writingml-dropdown-v2 { z-index: 2147483648 !important; } .fullscreen-creative-panel-left { /* Fixed width panel, positioned next to editor with 10px gap */ left: calc(var(--fullscreen-left, 250px) - 210px); width: 200px; } .fullscreen-creative-panel-right { /* Fixed width panel, positioned next to editor with 10px gap */ right: calc(var(--fullscreen-right, 250px) - 210px); width: 200px; } /* Tight layout for constrained screens (e.g., iPad) - no gap between panels and editor */ .creative-panels-tight .fullscreen-creative-panel-left { left: calc(var(--fullscreen-left, 250px) - 200px); } .creative-panels-tight .fullscreen-creative-panel-right { right: calc(var(--fullscreen-right, 250px) - 200px); } /* Panel Sections */ .creative-panel-section { margin-bottom: 12px; background: rgba(255, 255, 255, 0.05); border-radius: 6px; overflow: hidden; /* Smooth animation when siblings shift during drag reorder */ transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.25s ease; } .creative-section-header { display: flex; align-items: center; padding: 8px 10px; background: rgba(255, 255, 255, 0.08); cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; transition: background 0.15s ease; } .creative-section-header:hover { background: rgba(255, 255, 255, 0.12); } .creative-section-header:active { cursor: grabbing; } /* Grip icon for drag affordance */ .creative-section-grip { color: rgba(255, 255, 255, 0.3); font-size: 10px; letter-spacing: 1px; margin-right: 8px; flex-shrink: 0; transition: color 0.15s ease; } .creative-section-header:hover .creative-section-grip { color: rgba(255, 255, 255, 0.6); } .creative-section-title { color: rgba(255, 255, 255, 0.9); font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; flex: 1; } .creative-section-arrow { color: rgba(255, 255, 255, 0.5); font-size: 9px; transition: transform 0.2s ease; margin-left: auto; } /* Dragging state */ .creative-panel-section.dragging { opacity: 0.4; pointer-events: none; /* Disable transition while dragging to prevent lag */ transition: none; } /* Ghost element (clone during drag) */ .creative-section-ghost { position: fixed; pointer-events: none; opacity: 0.9; z-index: 2147483650; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); border-radius: 6px; background: rgba(30, 30, 30, 0.95); transform: rotate(2deg); } /* Drop indicator line */ .creative-drop-indicator { height: 3px; background: #2196F3; border-radius: 2px; margin: 4px 8px; animation: dropIndicatorPulse 0.8s ease-in-out infinite; } @keyframes dropIndicatorPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* Panel highlight when dragging over */ .fullscreen-creative-panel.drag-over { outline: 2px dashed rgba(33, 150, 243, 0.5); outline-offset: -2px; } .creative-section-content { padding: 10px; max-height: 280px; overflow-y: auto; transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease; } /* Collapsed sections */ .creative-panel-section.collapsed .creative-section-content { max-height: 0; padding: 0 10px; opacity: 0; overflow: hidden; } /* Color/Highlight Grids */ .creative-color-grid, .creative-highlight-grid { display: grid; grid-template-columns: repeat(6, 24px); gap: 4px; justify-content: center; } .creative-swatch { width: 24px; height: 24px; border-radius: 4px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; box-sizing: border-box; } .creative-swatch:hover { transform: scale(1.1); z-index: 1; } .creative-swatch.active { border-color: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.3); } .creative-swatch-clear { background: #fff !important; border-color: rgba(255, 255, 255, 0.3); } /* Alignment Buttons */ .creative-alignment-buttons { display: flex; gap: 4px; } .creative-align-btn { flex: 1; padding: 8px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; color: rgba(255, 255, 255, 0.8); font-size: 14px; cursor: pointer; transition: all 0.15s ease; } .creative-align-btn:hover { background: rgba(255, 255, 255, 0.2); color: #fff; } .creative-align-btn.active { background: rgba(100, 150, 255, 0.4); border-color: rgba(100, 150, 255, 0.6); color: #fff; } /* Blocks Section */ .creative-blocks { display: flex; flex-direction: column; gap: 6px; max-height: 175px; /* ~3.5 rows */ overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) transparent; } .creative-block-btn { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; cursor: pointer; transition: all 0.15s ease; text-align: left; flex-shrink: 0; } .creative-block-btn:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.25); } .creative-block-btn .block-label { color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; } .creative-block-btn .block-desc { color: rgba(255, 255, 255, 0.5); font-size: 10px; margin-top: 2px; } /* Insert Section */ .creative-insert { display: flex; flex-direction: column; gap: 6px; max-height: 175px; /* ~3.5 rows */ overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) transparent; } .creative-insert-btn { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; cursor: pointer; transition: all 0.15s ease; text-align: left; } .creative-insert-btn:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.25); } .creative-insert-btn .insert-label { color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 600; } .creative-insert-btn .insert-desc { color: rgba(255, 255, 255, 0.5); font-size: 10px; margin-top: 2px; } /* Font Selector */ .creative-font-selector { display: flex; flex-direction: column; gap: 4px; max-height: 170px; /* ~4.5 rows */ overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) transparent; } .creative-font-btn { padding: 8px 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; color: rgba(255, 255, 255, 0.9); font-size: 14px; cursor: pointer; text-align: left; transition: all 0.15s ease; } .creative-font-btn:hover { background: rgba(255, 255, 255, 0.15); } .creative-font-btn.active { background: rgba(100, 150, 255, 0.3); border-color: rgba(100, 150, 255, 0.5); } /* Size Grid */ .creative-size-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .creative-size-btn { padding: 6px 4px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; color: rgba(255, 255, 255, 0.9); font-size: 11px; cursor: pointer; transition: all 0.15s ease; } .creative-size-btn:hover { background: rgba(255, 255, 255, 0.15); } .creative-size-btn.active { background: rgba(100, 150, 255, 0.3); border-color: rgba(100, 150, 255, 0.5); } /* Line Spacing Buttons - Vertical list with scroll */ .creative-linespace-buttons { display: flex; flex-direction: column; gap: 2px; max-height: 85px; overflow-y: auto; } .creative-linespace-btn { padding: 6px 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; color: rgba(255, 255, 255, 0.9); font-size: 11px; cursor: pointer; transition: all 0.15s ease; text-align: left; } .creative-linespace-btn:hover { background: rgba(255, 255, 255, 0.15); } .creative-linespace-btn.active { background: rgba(100, 150, 255, 0.3); border-color: rgba(100, 150, 255, 0.5); } /* Quick Insert Section */ .creative-quick-insert { display: flex; flex-direction: column; gap: 12px; } .creative-insert-emoticon, .creative-insert-giphy, .creative-insert-at { display: flex; flex-direction: column; gap: 6px; } .creative-quick-insert label { color: rgba(255, 255, 255, 0.6); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .creative-emoticon-search, .creative-giphy-search { display: block; width: 90%; margin: 0 auto; padding: 6px 10px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; color: #fff; font-size: 12px; outline: none; transition: border-color 0.15s ease, background 0.15s ease; box-sizing: border-box; } .creative-emoticon-search { margin-bottom: 8px; margin-left: auto; margin-right: auto; } .creative-emoticon-search::placeholder, .creative-giphy-search::placeholder { color: rgba(255, 255, 255, 0.4); } .creative-emoticon-search:focus, .creative-giphy-search:focus { border-color: rgba(100, 150, 255, 0.6); background: rgba(255, 255, 255, 0.15); } /* Recent Emoticons */ .creative-recent-emoticons { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 28px; max-height: 105px; /* ~3.5 rows - shows partial row to hint scrolling */ overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) transparent; } .creative-recent-emoticon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.9); border-radius: 4px; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; } .creative-recent-emoticon:hover { background: #fff; transform: scale(1.1); } .creative-recent-emoticon img { width: 18px; height: 18px; object-fit: contain; } .creative-recent-placeholder { color: rgba(255, 255, 255, 0.4); font-size: 11px; font-style: italic; } /* Line Insert Section */ .creative-line-section { display: flex; gap: 8px; } .creative-line-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; color: rgba(255, 255, 255, 0.9); font-size: 11px; cursor: pointer; transition: all 0.15s ease; } .creative-line-btn:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.25); } .creative-line-btn .line-icon { font-size: 14px; color: rgba(255, 255, 255, 0.7); } /* Hide creative mode toggle on mobile (uses PHP IS_MOBILE() detection via .mobile class) */ .writingml-editor-v3-wrapper.mobile .fullscreen-mode-toggle { display: none !important; }