/* * Project: DMsHelper * File: modals.css * Description: Shared presentation for every modal on the site -- the * generic modal-surface wrapper / dh-modal-title title-bar * convention (upload modals, Character's Add/Edit modals, and * any other Save/Cancel form modal), plus the dh-text-edit-modal/ * dh-text-read-modal family (Trumbowyg rich-text read/edit * popups -- Area Description, DM Notes, Backstory, Help topics). * The rich-text family was textmodals.css, a separate file, * until it merged in here (see history below) -- it's a * genuinely different visual language (the read modal especially: * red-bordered card, solid-red header, fullscreen toggle, footer * badge -- nothing like the plain dh-modal-title bar), but it's * still all modal chrome, and splitting "modal CSS" across two * files by content-shape was itself a source of drift (the * dh-modal-title/dh-text-edit-modal__title classes had ended up * with duplicated margin/width declarations neither file's * author noticed because they never looked at the other one). * Feature-specific modal content (e.g. the Community library * grid inside _CS-Sketch's modal, or an Area image type picker) * stays in that feature's own stylesheet -- only shared chrome * belongs here. * File Location: \wwwroot\css\modals.css * Created: GRK 08/09/2026 * History: GRK 08/09/2026 Initial Release -- consolidated .modal-surface * (was site.css), .campaign-modal-title/.Modal-title (was * campaign.css), and their .subheaderbar layout selectors * (were site.css/character.css) into one file, since they'd * ended up scattered across three unrelated stylesheets * despite all being generic modal chrome, not feature CSS. * GRK 08/09/2026 Renamed .Modal-title -> .dh-modal-title -- a bare * capitalized class name is one keystroke away from * Bootstrap's own real, built-in .modal-title (used inside * .modal-header/.modal-content), and CSS is case-sensitive, * so the two don't collide today but easily could later. * Every other shared/generic class here already uses the * dh- prefix specifically to make that impossible -- this * was the one that broke the pattern. We tweak Bootstrap's * own classes (modal, modal-dialog, modal-content, * modal-header, modal-body, modal-footer, modal-title, * fade, show, etc.) via dh-* classes layered alongside * them; we never redefine or shadow Bootstrap's own names. * GRK 08/09/2026 Dropped the .campaign-modal-title alias -- every * .cshtml file was migrated to .dh-modal-title (14 files in * one pass), so the old name had zero remaining callers. * GRK 08/09/2026 Merged textmodals.css in and deleted it, at * user's request after the rich-text edit modal's title * class (dh-text-edit-modal__title) was found duplicating * dh-modal-title's margin/width instead of layering on top * of it, the same way modal-surface/dh-text-edit-modal__inner * already do -- two files for "modal CSS" made that kind of * duplicate easy to miss. Checked for actual class-name * collisions between the two files first (none -- dh-modal-* * vs dh-text-*, cleanly disjoint), confirming this was a * pure move, not a rename-collision situation. Fixed the * title duplication itself: dh-text-edit-modal__title's * redundant margin/width removed (now layered from * dh-modal-title, see _DescriptionEditModal.cshtml), and * the .subheaderbar:has(> h3.dh-modal-title) flex-row rule * below got a :not(.dh-text-edit-modal__header) exclusion * so that layering doesn't also flip the rich-text edit * header's stacked title+subtitle into a flex row it isn't * built for (it has no close-X yet to space against -- see * Open items in the worklog). * GRK 08/09/2026 dh-modal-title and dh-text-edit-modal__header * both centered their title text (text-align: center) -- * user flagged this as unnoticed drift (in practice * invisible for dh-modal-title, since every real caller has * a close-X sibling that puts it in the flex-row branch * above, where a shrink-to-fit h3 doesn't visibly show * text-align either way -- but very visible for * dh-text-edit-modal__header, which stays block-layout and * was centering its title+subtitle text across the whole * modal width). Both switched to left. dh-text-read-modal__title * was already left (flex layout, no override) -- the one * that had it right the whole time. * GRK 08/09/2026 Added the close-X the rich-text edit modal was * missing (every other modal on the site already had one, * Done #36 -- this family was explicitly scoped out of that * pass at the time). dh-text-edit-modal__header is now its * own flex row (title+subtitle block on the left, close-X * on the right, mirroring dh-text-read-modal__header's * existing shape) instead of centered block text -- * _DescriptionEditModal.cshtml now wraps the title/subtitle * in their own div so they stay one flex item together. * Simplified the .subheaderbar:has(> h3.dh-modal-title) rule * above back down from the :not(.dh-text-edit-modal__header) * exclusion added earlier the same session -- with the title * now wrapped, the h3 is no longer a direct .subheaderbar * child there at all, so that selector structurally can't * match this family anymore; the exclusion was dead weight. * GRK 08/16/2026 dh-modal-title dropped its margin-bottom * duplicate of Bootstrap's own .modal-title (now paired on * every title h3 instead of shadowed); the * .subheaderbar:has(> h3...) flex-row selectors switched * from keying off h3.dh-modal-title to h3.modal-title to * match, so the layout no longer depends on the app- * specific class at all. Renamed .dh-modal-surface -> * .modal-surface, dropping the app prefix so it can move * as-is into other solutions. The corner upload/edit * button (was .modal-upload-edit-btn) moved to site.css as * .btn-upload, paired with the real .btn class -- * Bootstrap's own btn/btn-{variant} pattern instead of a * one-off dh- class. */ .modal-header { } .modal-surface { background-color: white; border-radius: 6px; padding: 10px; } /* Layers onto Bootstrap's own .modal-title (margin-bottom: 0; line-height: 1.5) rather than duplicating it -- every h3.modal-title in the markup also carries the real .modal-title class alongside it. margin-top: 0 covers the half Bootstrap's version doesn't (it's normally used inside .modal-header, which this app doesn't use -- see subheaderbar below), and text-align/width make the title shrink-to-fit so the subheaderbar flex row below can put the close-X beside it instead of below it. */ .modal-title { margin-top: 0; text-align: left; width: auto; } .modal-message { color: red; background-color:whitesmoke; border-radius: 0.5em; padding: 0.5em; display:none; } /* ── Rich-text read/edit modal family (formerly textmodals.css) ──────────── */ .dh-empty-note { color: var(--dh-ink-light); display: block; font-family: var(--dh-serif-body); font-size: 0.98rem; font-style: italic; font-weight: 400; margin: 0; opacity: 0.72; } /* Rendered rich text shown beside its editor. Always use a block container (normally a div): Trumbowyg output commonly contains paragraphs, lists, and headings, which are invalid children of an inline span. */ .dh-text-display { /*background-color: white;*/ border: 1px solid var(--dh-panel-border); border-radius: 4px; box-shadow: var(--dh-panel-shadow-inset); color: var(--dh-ink); display: block; font-family: 'Times New Roman', Georgia, serif; /*font-size: 1.05rem;*/ font-size: 0.9rem; line-height: 1.7; min-width: 0; padding: 0.85rem 1rem; } .dh-text-display > :last-child { margin-bottom: 0; } .dh-text-display--scrollable { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; } .dh-text-display--reading { /*font-size: 1.15rem;*/ font-size: 0.9rem; line-height: 1.6; padding: 1rem 1.25rem; white-space: pre-line; } /* Read-only rich-text modal. */ .dh-text-read-modal { /*background-color: white;*/ border: 2px solid var(--dh-red); border-radius: 8px; overflow: hidden; } .dh-text-read-modal__header { background-color: var(--dh-red); color: white; padding: 1rem 1.25rem; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: none; } .dh-text-read-modal__title { font-family: 'Times New Roman', serif; font-size: 1.3rem; font-weight: bold; margin: 0 0 0.15rem; color: white; width: auto; max-width: 100%; } .dh-text-read-modal__subtitle { font-size: 0.8rem; opacity: 0.85; font-weight: bold; letter-spacing: 0.05em; text-transform: uppercase; } .dh-text-read-modal__body { /*background-color: white;*/ color: var(--dh-ink); padding: 1.5rem 2rem; font-family: 'Times New Roman', Georgia, serif; font-size: 1.05rem; line-height: 1.8; max-height: 65vh; overflow-y: auto; } .dh-text-read-modal__body :is(h1, h2, h3, h4, h5, h6) { color: var(--dh-red); } .dh-text-read-modal__footer { background-color: #f8f8f8; border-top: 1px solid #ddd; display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1.25rem; } .dh-text-read-modal__badge { font-size: 0.78rem; color: #888; font-style: italic; } .dh-text-read-modal__fullscreen-btn { color: white; opacity: 0.8; padding: 0.1rem 0.4rem; font-size: 0.95rem; line-height: 1; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 4px; background: transparent; transition: opacity 0.15s, background 0.15s; } .dh-text-read-modal__fullscreen-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.2); color: white; } /* Rich-text edit modal. */ .dh-text-edit-modal-dialog { max-width: min(60em, calc(100vw - 2rem)); } .dh-text-edit-modal { background-color: white; border: none; border-radius: 6px; overflow: hidden; width: 100%; } .dh-text-edit-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5em; margin-bottom: 0.75rem; text-align: left; } .dh-text-edit-modal__title { color: var(--dh-red); font-family: inherit; font-size: 1.75rem; font-weight: 500; } .dh-text-edit-modal__subtitle { color: var(--dh-red); font-family: inherit; font-size: 1rem; font-weight: 500; letter-spacing: 0; margin: 0; text-transform: none; } .dh-text-edit-modal textarea { min-height: 18rem; width: 100%; } .dh-text-edit-modal :is(.trumbowyg-box, .trumbowyg-editor) { background-color: white; color: #212529; } .dh-text-edit-modal__divider { border-color: var(--dh-panel-border); margin: 0.85rem 0; opacity: 1; } .dh-text-edit-modal__actions { display: flex; justify-content: center; text-align: center; }