/* * com_mindmap frontend styles. * Everything is scoped under .com-mindmap so nothing here leaks onto or * clashes with the Gantry 5 template's global styles elsewhere on the site * (same convention as com_storyboard's storyboard.css). */ .com-mindmap { --mm-border: #e2e5eb; --mm-border-strong: #cbd1db; --mm-bg: #f4f6fb; --mm-surface: #ffffff; --mm-accent: #4f46e5; --mm-accent-dark: #4338ca; --mm-accent-soft: #eef0fe; --mm-danger: #dc2626; --mm-danger-soft: #fdecec; --mm-success: #16a34a; --mm-text: #1c2130; --mm-text-muted: #6b7280; --mm-radius: 10px; --mm-radius-sm: 6px; --mm-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05); --mm-shadow-md: 0 6px 20px rgba(17, 24, 39, 0.08); /* Child-friendly node palette — kept as CSS vars too so JS-set inline colours (per-node, from DataHelper::COLOURS) and CSS-driven chrome stay visually related without duplicating hex values in two places. */ --mm-palette-blue: #4F8EF7; --mm-palette-green: #22A55A; --mm-palette-yellow: #F4C430; --mm-palette-orange: #F5871F; --mm-palette-red: #E24C4C; --mm-palette-purple: #9B59B6; --mm-palette-pink: #EC6FAD; --mm-palette-grey: #8A94A6; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; box-sizing: border-box; color: var(--mm-text); line-height: 1.5; } .com-mindmap *, .com-mindmap *::before, .com-mindmap *::after { box-sizing: inherit; } .com-mindmap h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.25rem; } .com-mindmap a { transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .com-mindmap :focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 2px; } /* ---------- Page-transition loader (unscoped — appended to ) ---------- */ .mm-page-loader { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; background: rgba(244, 246, 251, 0.75); backdrop-filter: blur(1px); } .mm-page-loader.is-visible { display: flex; } .mm-page-loader-spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid #d7dbe8; border-top-color: var(--mm-accent, #4f46e5); animation: mm-spin 0.7s linear infinite; } @keyframes mm-spin { to { transform: rotate(360deg); } } /* ---------- Toast notifications (unscoped) ---------- */ .mm-toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 100001; display: flex; flex-direction: column; gap: 0.5rem; max-width: 22rem; } .mm-toast { display: flex; align-items: flex-start; gap: 0.6rem; background: #1c2130; color: #fff; padding: 0.75rem 0.9rem; border-radius: 8px; box-shadow: 0 6px 20px rgba(17, 24, 39, 0.25); font-size: 0.9rem; opacity: 0; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease; } .mm-toast.is-visible { opacity: 1; transform: translateY(0); } .mm-toast-success i:first-child { color: #4ade80; } .mm-toast-error i:first-child { color: #f87171; } .mm-toast-info i:first-child { color: #93c5fd; } .mm-toast span { flex: 1; } .mm-toast-close { background: none; border: none; color: inherit; opacity: 0.7; cursor: pointer; padding: 0; line-height: 1; } .mm-toast-close:hover { opacity: 1; } /* ---------- Buttons ---------- */ .com-mindmap .mm-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; border-radius: var(--mm-radius-sm); border: 1px solid var(--mm-border-strong); background: var(--mm-surface); color: var(--mm-text); font-size: 0.9rem; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.2; } .com-mindmap .mm-btn:hover { border-color: var(--mm-accent); color: var(--mm-accent); } .com-mindmap .mm-btn-primary { background: var(--mm-accent); border-color: var(--mm-accent); color: #fff; } .com-mindmap .mm-btn-primary:hover { background: var(--mm-accent-dark); border-color: var(--mm-accent-dark); color: #fff; } .com-mindmap .mm-btn-danger { color: var(--mm-danger); } .com-mindmap .mm-btn-danger:hover { background: var(--mm-danger-soft); border-color: var(--mm-danger); } /* ---------- Guest CTA ---------- */ .mm-guest-cta { max-width: 640px; margin: 3rem auto; text-align: center; padding: 2.5rem 2rem; background: linear-gradient(180deg, var(--mm-accent-soft) 0%, var(--mm-surface) 65%); border: 1px solid var(--mm-border); border-radius: var(--mm-radius); box-shadow: var(--mm-shadow-sm); } .mm-guest-cta h1 { font-size: 1.75rem; } .mm-guest-cta p { color: var(--mm-text-muted); margin: 0.5rem 0; } .mm-guest-cta-actions { display: flex; justify-content: center; gap: 0.75rem; margin: 1.5rem 0 1rem; } .mm-guest-cta-note { font-size: 0.85rem; color: var(--mm-text-muted); } .mm-sandbox-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; background: #fff7e6; border: 1px solid #f3c969; border-radius: var(--mm-radius-sm); padding: 0.65rem 1rem; margin-bottom: 0.75rem; font-size: 0.9rem; color: #7c4a03; } /* ---------- Dashboard ---------- */ .com-mindmap-dashboard { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 3rem; } .mm-dashboard-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; } .mm-dashboard-header-actions { display: flex; gap: 0.5rem; } .mm-recycle-bin-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.1rem; height: 1.1rem; padding: 0 0.3rem; border-radius: 999px; background: var(--mm-danger); color: #fff; font-size: 0.7rem; } .mm-dashboard-placeholder { color: var(--mm-text-muted); padding: 3rem 0; text-align: center; } .mm-mindmap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; } .mm-mindmap-card { background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: var(--mm-radius); box-shadow: var(--mm-shadow-sm); overflow: hidden; display: flex; flex-direction: column; } .mm-mindmap-card-thumb { height: 110px; display: flex; align-items: center; justify-content: center; background: var(--mm-accent-soft); color: var(--mm-accent); font-size: 2rem; } .mm-mindmap-card-title { display: block; padding: 0.75rem 0.9rem 0.2rem; font-weight: 700; color: var(--mm-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mm-feedback-indicator { color: var(--mm-accent); margin-left: 0.3rem; } .mm-mindmap-card-meta { padding: 0 0.9rem; color: var(--mm-text-muted); font-size: 0.8rem; } .mm-mindmap-card-actions { display: flex; gap: 0.4rem; padding: 0.75rem 0.9rem 0.9rem; margin-top: auto; } .mm-mindmap-card-actions .mm-btn:first-child { flex: 1; justify-content: center; } /* ---------- Generic modal chrome ---------- */ .mm-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; } .mm-modal[hidden] { display: none; } .mm-modal-backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.45); } .mm-modal-dialog { position: relative; background: var(--mm-surface); border-radius: var(--mm-radius); box-shadow: var(--mm-shadow-md); width: min(560px, 92vw); max-height: 85vh; display: flex; flex-direction: column; } .mm-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--mm-border); } .mm-modal-header h2 { margin: 0; font-size: 1.1rem; } .mm-modal-close { background: none; border: none; color: var(--mm-text-muted); cursor: pointer; font-size: 1rem; padding: 0.25rem; } .mm-modal-close:hover { color: var(--mm-danger); } .mm-modal-body { padding: 1rem 1.25rem; overflow-y: auto; } .mm-modal-empty { color: var(--mm-text-muted); text-align: center; padding: 1.5rem 0; } .mm-recycle-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .mm-recycle-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.75rem; border: 1px solid var(--mm-border); border-radius: var(--mm-radius-sm); } .mm-recycle-item-info { display: flex; flex-direction: column; min-width: 0; } .mm-recycle-item-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mm-recycle-item-meta { font-size: 0.78rem; color: var(--mm-text-muted); } .mm-recycle-item-actions { display: flex; gap: 0.4rem; flex-shrink: 0; } /* ---------- Teacher accordion ---------- */ /* Plain nested

— class -> student -> mind maps — needs no JS at all for expand/collapse, and degrades gracefully (still readable, just all "open") with CSS/JS disabled. Mirrors com_storyboard's .cs-teacher-* / .cs-list-table treatment (see storyboard.css) so the two teacher dashboards look and feel the same. */ .mm-breadcrumb { display: flex; gap: 0.4rem; font-size: 0.85rem; margin-bottom: 1rem; color: var(--mm-text-muted); } .mm-breadcrumb a { color: var(--mm-accent-dark); text-decoration: none; font-weight: 500; } .mm-breadcrumb a:hover { text-decoration: underline; } .mm-teacher-accordion { display: flex; flex-direction: column; gap: 0.6rem; } .mm-teacher-class { background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: var(--mm-radius); box-shadow: var(--mm-shadow-sm); padding: 0.15rem 0; } .mm-teacher-class > summary { padding: 0.75rem 1rem; font-weight: 700; } .mm-teacher-class-body { padding: 0.25rem 1rem 0.9rem; } .mm-teacher-student-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .mm-teacher-student { background: var(--mm-bg); border: 1px solid var(--mm-border); border-radius: var(--mm-radius-sm); padding: 0.1rem 0; } .mm-teacher-student > summary { padding: 0.55rem 0.75rem; font-weight: 600; } .mm-teacher-student .mm-list-table { margin: 0 0.75rem 0.75rem; width: calc(100% - 1.5rem); box-shadow: none; } .mm-teacher-class summary, .mm-teacher-student summary { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; cursor: pointer; list-style: none; } .mm-teacher-class summary::-webkit-details-marker, .mm-teacher-student summary::-webkit-details-marker { display: none; } .mm-teacher-item-name { display: flex; align-items: center; gap: 0.5rem; } .mm-teacher-item-name::before { content: '\25B8'; display: inline-block; color: var(--mm-text-muted); transition: transform 0.15s ease; } details[open] > summary .mm-teacher-item-name::before { transform: rotate(90deg); } .mm-teacher-count-badge { flex-shrink: 0; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--mm-accent-soft); color: var(--mm-accent-dark); font-size: 0.75rem; font-weight: 700; } .mm-list-table { width: 100%; border-collapse: collapse; background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: var(--mm-radius); overflow: hidden; box-shadow: var(--mm-shadow-sm); } .mm-list-table th { text-align: left; padding: 0.65rem 0.85rem; background: var(--mm-bg); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--mm-text-muted); border-bottom: 1px solid var(--mm-border); } .mm-list-table td { text-align: left; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--mm-border); } .mm-list-table tbody tr:last-child td { border-bottom: none; } .mm-list-table tbody tr:hover { background: var(--mm-bg); } /* ---------- Editor shell ---------- */ /* * Deliberately NOT position:fixed/inset:0 — this platform's Gantry 5 * template wraps page content in containers that can establish their own * containing block (transforms, etc.), which silently changes what a * fixed-position "full viewport" element is actually measured against and * can collapse or misplace it entirely. com_storyboard's editor hit the * same "full-screen canvas editor inside this template" problem and * settled on staying in normal flow, sized to fit under the template's own * header/nav/footer chrome instead — same values reused here since it's * the same platform/template. */ .com-mindmap-editor { display: flex; flex-direction: column; height: calc(100vh - 120px); min-height: 560px; background: var(--mm-bg); } .mm-editor-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 1rem; background: var(--mm-surface); border-bottom: 1px solid var(--mm-border); flex-shrink: 0; } .mm-editor-title-group { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .mm-editor-title-display, .mm-editor-title-input { font-size: 1.15rem; font-weight: 700; margin: 0; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mm-editor-title-display { padding: 0.2rem 0.4rem; border-radius: var(--mm-radius-sm); cursor: text; } .mm-editor-title-display:not(.mm-editor-title-static):hover { background: var(--mm-bg); } .mm-editor-title-input { border: 1px solid var(--mm-accent); border-radius: var(--mm-radius-sm); padding: 0.2rem 0.4rem; font-family: inherit; color: inherit; } .mm-autosave-status { font-size: 0.78rem; color: var(--mm-text-muted); white-space: nowrap; } .mm-autosave-status[data-state="saving"]::before, .mm-autosave-status[data-state="saved"]::before, .mm-autosave-status[data-state="unsaved"]::before, .mm-autosave-status[data-state="error"]::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 999px; margin-right: 0.35rem; vertical-align: middle; } .mm-autosave-status[data-state="saving"]::before { background: #f59e0b; } .mm-autosave-status[data-state="saved"]::before { background: var(--mm-success); } .mm-autosave-status[data-state="unsaved"]::before { background: var(--mm-text-muted); } .mm-autosave-status[data-state="error"]::before { background: var(--mm-danger); } .mm-editor-header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } /* The badge's containing block must be the Comments button itself, not the wider .mm-editor-header-actions row it sits in — that bug placed a comments-count badge in the corner of the *row*, which (since Exit is the next element along) visually landed on the Exit button instead. */ #mm-comments-toggle { position: relative; } .mm-comments-count-badge { position: absolute; top: -0.35rem; right: -0.35rem; min-width: 1rem; height: 1rem; padding: 0 0.25rem; border-radius: 999px; background: var(--mm-danger); color: #fff; font-size: 0.65rem; display: inline-flex; align-items: center; justify-content: center; } .mm-editor-body { flex: 1; display: flex; min-height: 0; position: relative; } /* ---------- Toolbar ---------- */ .mm-toolbar { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.6rem 0.4rem; background: var(--mm-surface); border-right: 1px solid var(--mm-border); flex-shrink: 0; overflow-y: auto; } .mm-tool-btn { width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--mm-radius-sm); border: 1px solid transparent; background: none; color: var(--mm-text); cursor: pointer; font-size: 1rem; position: relative; } .mm-tool-btn:hover:not(:disabled) { background: var(--mm-accent-soft); color: var(--mm-accent); } .mm-tool-btn:disabled { color: var(--mm-border-strong); cursor: not-allowed; } .mm-tool-btn-primary { background: var(--mm-accent); color: #fff; } .mm-tool-btn-primary:hover:not(:disabled) { background: var(--mm-accent-dark); color: #fff; } /* Font weight is a toggle (Normal/Bold), not a popover — aria-pressed reflects the selected node's current fontWeight (see updateToolbarState() in mindmap-interaction.js). */ .mm-tool-btn[aria-pressed="true"] { background: var(--mm-accent-soft); color: var(--mm-accent); border-color: var(--mm-accent); } .mm-tool-divider { width: 60%; height: 1px; background: var(--mm-border); margin: 0.3rem 0; } .mm-readonly-badge { margin-top: 0.5rem; font-size: 0.7rem; color: var(--mm-text-muted); display: flex; flex-direction: column; align-items: center; gap: 0.2rem; text-align: center; } /* * position:fixed with left/top computed in JS from the trigger button's own * getBoundingClientRect() (see positionFloating() in * mindmap-interaction.js) — NOT position:absolute relative to * .mm-tool-popover-wrap. The toolbar scrolls (overflow-y:auto, for when * there are more tools than fit a short viewport), and a CSS overflow rule * that clips one axis as non-visible silently clips the other axis too * unless a browser honours both being declared independently — which * previously clipped every popover invisible the instant it tried to * extend outside the toolbar's own bounds. Computing screen coordinates * directly sidesteps that whole class of bug. */ .mm-popover { position: fixed; z-index: 250; background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: var(--mm-radius-sm); box-shadow: var(--mm-shadow-md); padding: 0.5rem; display: grid; grid-template-columns: repeat(4, auto); gap: 0.4rem; max-height: calc(100vh - 8px); overflow-y: auto; } .mm-popover[hidden] { display: none; } /* Font size/family and export popovers are single-column text lists, not the shape/colour swatch grid — reuses .mm-context-menu-item for each row (see buildListPopoverItem() in mindmap-interaction.js). */ .mm-popover-list { grid-template-columns: 1fr; min-width: 170px; } /* ---------- Right-click context menu ---------- */ /* Appended directly to (see wireContextMenu() in mindmap-interaction.js), same as .mm-page-loader/.mm-toast-container above — OUTSIDE .com-mindmap, so var(--mm-*) custom properties (only defined on .com-mindmap and its descendants) do not resolve here. Every colour below is a literal value for that reason, matching the --mm-* palette by eye rather than by reference. .mm-context-menu-item is also reused (unscoped concerns aside) by the font-size/font-family/ export toolbar popovers, which ARE inside .com-mindmap — hardcoded values work identically in both places, so nothing is lost by not using var() here. */ .mm-context-menu { position: fixed; z-index: 200; min-width: 170px; background: #ffffff; border: 1px solid #e2e5eb; border-radius: 6px; box-shadow: 0 6px 20px rgba(17, 24, 39, 0.08); padding: 0.35rem; display: flex; flex-direction: column; } .mm-context-menu[hidden] { display: none; } .mm-context-menu-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.45rem 0.6rem; border: none; background: none; border-radius: 6px; font-size: 0.85rem; font-weight: 600; color: #1c2130; text-align: left; cursor: pointer; } .mm-context-menu-item i { width: 1rem; text-align: center; color: #6b7280; } .mm-context-menu-item:hover:not(:disabled), .mm-context-menu-item:focus-visible:not(:disabled) { background: #eef0fe; color: #4f46e5; } .mm-context-menu-item:hover:not(:disabled) i, .mm-context-menu-item:focus-visible:not(:disabled) i { color: #4f46e5; } .mm-context-menu-item.mm-context-menu-item-danger { color: #dc2626; } .mm-context-menu-item.mm-context-menu-item-danger:hover:not(:disabled) { background: #fdecec; color: #dc2626; } .mm-context-menu-item.mm-context-menu-item-danger:hover:not(:disabled) i { color: #dc2626; } .mm-context-menu-item:disabled { color: #cbd1db; cursor: not-allowed; } .mm-context-menu-item:disabled i { color: #cbd1db; } .mm-context-menu-divider { height: 1px; background: #e2e5eb; margin: 0.3rem 0.2rem; } /* ---------- Hover tooltip (node type / "Branch") ---------- */ /* Appended directly to (see mindmap-interaction.js), same as .mm-context-menu above — outside .com-mindmap, so hardcoded colours rather than var(--mm-*), which wouldn't resolve here. */ .mm-hover-tooltip { position: fixed; z-index: 300; background: #1c2130; color: #ffffff; font-size: 0.75rem; font-weight: 600; padding: 0.3rem 0.55rem; border-radius: 4px; box-shadow: 0 4px 12px rgba(17, 24, 39, 0.25); pointer-events: none; white-space: nowrap; } .mm-hover-tooltip[hidden] { display: none; } .mm-shape-swatch, .mm-colour-swatch { width: 2rem; height: 2rem; border-radius: var(--mm-radius-sm); border: 1px solid var(--mm-border-strong); background: var(--mm-surface); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; } .mm-colour-swatch { border-radius: 999px; border: 2px solid var(--mm-surface); outline: 1px solid var(--mm-border-strong); } .mm-colour-swatch:hover, .mm-colour-swatch:focus-visible { outline: 2px solid var(--mm-accent); } .mm-shape-preview { display: block; width: 1.2rem; height: 1.2rem; background: var(--mm-text-muted); } .mm-shape-preview-rounded { border-radius: 5px; } .mm-shape-preview-rect { border-radius: 0; } .mm-shape-preview-circle { border-radius: 50%; } .mm-shape-preview-diamond { transform: rotate(45deg); width: 0.9rem; height: 0.9rem; } .mm-shape-preview-cloud { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; } /* ---------- Hex colour wheel picker ---------- */ /* Ported from com_storyboard's colour wheel (see mindmap-colorpicker.js for the hexagon-grid hue/saturation math this styles) — ships inside .mm-colour-popover / .mm-text-colour-popover, which stay inside .com-mindmap, so var(--mm-*) resolves normally here (unlike the context menu above). */ .mm-color-popover { display: block; width: 220px; } .mm-color-wheel-wrap { position: relative; margin: 0 auto 0.6rem; /* width/height set inline by mindmap-colorpicker.js to fit exactly the generated hex grid — this only centres that box. */ } .mm-color-hex-swatch { position: absolute; padding: 0; border: none; cursor: pointer; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); transition: transform 0.1s ease, filter 0.1s ease; } .mm-color-hex-swatch:hover { filter: brightness(1.08); transform: scale(1.15); z-index: 2; } .mm-color-hex-swatch.is-selected { filter: brightness(1.08); transform: scale(1.2); z-index: 3; } .mm-color-tones-label { display: block; font-size: 0.7rem; font-weight: 600; color: var(--mm-text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.3rem; } .mm-color-tones { display: flex; gap: 0.3rem; margin-bottom: 0.7rem; } .mm-color-tone { flex: 1; aspect-ratio: 1 / 1; padding: 0; border: 1px solid var(--mm-border-strong); border-radius: var(--mm-radius-sm); cursor: pointer; } .mm-color-tone:hover { border-color: var(--mm-accent); box-shadow: 0 0 0 2px var(--mm-accent-soft); } .mm-color-fields { display: flex; flex-direction: column; gap: 0.5rem; } .mm-color-fields > label, .mm-color-rgb label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.68rem; font-weight: 600; color: var(--mm-text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .mm-color-rgb label { text-align: center; } .mm-color-fields input[type="text"] { width: 100%; padding: 0.2rem 0.35rem; border: 1px solid var(--mm-border-strong); border-radius: var(--mm-radius-sm); font-size: 0.82rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; } .mm-color-rgb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; } .mm-color-rgb input[type="number"] { width: 100%; padding: 0.2rem 0.2rem; border: 1px solid var(--mm-border-strong); border-radius: var(--mm-radius-sm); font-size: 0.8rem; text-align: center; } .mm-color-fields input:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 1px; } /* ---------- Canvas ---------- */ .mm-canvas-wrap { flex: 1; position: relative; overflow: hidden; background-image: radial-gradient(circle, var(--mm-border-strong) 1px, transparent 1px); background-size: 22px 22px; background-color: var(--mm-bg); } .mm-canvas { width: 100%; height: 100%; outline: none; touch-action: none; cursor: grab; } .mm-canvas.is-panning { cursor: grabbing; } /* Persistent warnings while any two branches cross, or a branch folds back no farther from the centre than its own parent (see Model.findCrossingChildIds()/findBackwardChildIds() and updateCrossingBanner() in mindmap-interaction.js) — each stays visible until the student moves a node to resolve it, not a one-off toast. Neither is ever blocked outright, just flagged; stacked in a shared wrapper so both can show at once without overlapping each other. */ .mm-canvas-banners { position: absolute; top: 0.75rem; left: 50%; transform: translateX(-50%); z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; pointer-events: none; } .mm-warning-banner { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem; background: var(--mm-danger-soft); color: var(--mm-danger); border: 1px solid var(--mm-danger); border-radius: var(--mm-radius-sm); font-size: 0.82rem; font-weight: 700; box-shadow: var(--mm-shadow-sm); } .mm-warning-banner[hidden] { display: none; } .mm-canvas svg { width: 100%; height: 100%; display: block; -webkit-user-select: none; user-select: none; } .mm-connector { fill: none; stroke: var(--mm-border-strong); stroke-width: 2.5; } .mm-connector.is-crossing { stroke: var(--mm-danger); stroke-dasharray: 6 4; } .mm-connector.is-backward { stroke: var(--mm-danger); stroke-dasharray: 2 3; } /* Invisible, much wider twin of each connector (same path data — see draw() in mindmap-render.js), used only as the hover/pointer target. A path's default pointer-events (visiblePainted) only respond within the actual painted stroke, and the visible connector's stroke is just 2.5px wide — too thin to reliably hover for a tooltip. This sits on top of it with a much fatter transparent stroke instead. */ .mm-connector-hit { fill: none; stroke: transparent; stroke-width: 16; cursor: pointer; } .mm-node-shape { stroke: rgba(0, 0, 0, 0.12); stroke-width: 1.5; cursor: pointer; } .mm-node.is-selected .mm-node-shape { stroke: var(--mm-accent); stroke-width: 3; } /* Highlights the offending node itself, not just its connector (see .mm-connector.is-backward above) — dashed rather than solid so it never reads as "selected". Combines cleanly with is-selected: whichever rule comes later here wins the shared stroke properties, which is fine since a selected+backward node just needs SOME visible warning, not both at once. */ .mm-node.is-backward .mm-node-shape { stroke: var(--mm-danger); stroke-width: 3; stroke-dasharray: 4 3; } /* Applied the instant the pointer is pressed down on a node (see onPointerDown() in mindmap-interaction.js) — not only once an actual drag threshold is crossed — so "click and hold" gives immediate cursor feedback rather than waiting to see if it turns into a real drag. */ .mm-node.is-dragging .mm-node-shape { cursor: grab; } .mm-node-fo { pointer-events: none; } .mm-node-text { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px 10px; font-size: 14px; font-weight: 600; line-height: 1.25; /* Words are never broken mid-word — wrapping only happens at whitespace. A single word/token too long to fit the normal wrap width just makes the node wider instead (see ABSOLUTE_MAX_TEXT_BOX_ WIDTH / measureText() in mindmap-render.js), rather than splitting the word itself. */ word-break: normal; overflow-wrap: normal; /* Newlines are meaningful (Shift+Enter — see mindmap-interaction.js) rather than collapsed, but still wrap normally, unlike plain "pre". */ white-space: pre-wrap; pointer-events: none; outline: none; -webkit-user-select: none; user-select: none; } .mm-node-text.is-placeholder { opacity: 0.6; font-style: italic; font-weight: 500; } .mm-node.is-editing .mm-node-text { pointer-events: auto; cursor: text; -webkit-user-select: text; user-select: text; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.35); border-radius: 4px; background: rgba(255, 255, 255, 0.35); } /* ---------- Comments panel ---------- */ .mm-comments-panel { width: 320px; flex-shrink: 0; background: var(--mm-surface); border-left: 1px solid var(--mm-border); display: flex; flex-direction: column; } .mm-comments-panel[hidden] { display: none; } .mm-comments-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--mm-border); } .mm-comments-panel-header h2 { margin: 0; font-size: 1rem; } .mm-comments-list { flex: 1; overflow-y: auto; padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; } .mm-comments-empty { color: var(--mm-text-muted); text-align: center; padding: 1.5rem 0; font-size: 0.85rem; } .mm-comment { border: 1px solid var(--mm-border); border-radius: var(--mm-radius-sm); padding: 0.6rem 0.7rem; } .mm-comment.is-read { opacity: 0.6; } .mm-comment-header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.3rem; } .mm-comment-author { font-weight: 700; font-size: 0.85rem; } .mm-comment-date { font-size: 0.72rem; color: var(--mm-text-muted); white-space: nowrap; } .mm-comment-body { font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; } .mm-comment-read-tag { display: inline-block; margin-top: 0.3rem; font-size: 0.7rem; font-weight: 700; color: var(--mm-success); } .mm-comment-actions { display: flex; gap: 0.4rem; margin-top: 0.45rem; flex-wrap: wrap; } .mm-comment-actions button { background: none; border: 1px solid var(--mm-border-strong); border-radius: var(--mm-radius-sm); padding: 0.2rem 0.55rem; font-size: 0.72rem; cursor: pointer; color: var(--mm-text-muted); } .mm-comment-actions button:hover { color: var(--mm-accent); border-color: var(--mm-accent); } .mm-comment-edit-textarea { width: 100%; min-height: 4rem; font-family: inherit; font-size: 0.85rem; border: 1px solid var(--mm-accent); border-radius: var(--mm-radius-sm); padding: 0.4rem; resize: vertical; } .mm-comment-form { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 1rem; /* Extra bottom clearance — the platform's own floating chatbot button sits fixed at the bottom-right of every page, which otherwise sits right on top of the Add Comment button here. */ padding-bottom: calc(0.75rem + 2rem); border-top: 1px solid var(--mm-border); } .mm-comment-form textarea { width: 100%; min-height: 4.5rem; font-family: inherit; font-size: 0.85rem; border: 1px solid var(--mm-border-strong); border-radius: var(--mm-radius-sm); padding: 0.5rem; resize: vertical; } .mm-comment-form .mm-btn { align-self: flex-end; } /* ---------- Responsive (desktop / laptop / tablet) ---------- */ @media (max-width: 1024px) { .mm-comments-panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 40; box-shadow: var(--mm-shadow-md); } .mm-editor-title-display, .mm-editor-title-input { max-width: 30vw; } } @media (max-width: 700px) { /* The editor no longer fits in a fixed viewport-height box once the toolbar wraps to multiple rows and the body stacks vertically below — let the page grow and scroll naturally instead of clipping the canvas (same reasoning as com_storyboard's editor at this breakpoint). */ .com-mindmap-editor { height: auto; min-height: 0; } .mm-canvas-wrap { min-height: 60vh; } .mm-toolbar { flex-direction: row; flex-wrap: wrap; width: 100%; border-right: none; border-bottom: 1px solid var(--mm-border); } .mm-editor-body { flex-direction: column; } .mm-comments-panel { width: 100%; } .mm-editor-title-display, .mm-editor-title-input { max-width: 45vw; } }