/* ═══ Canvas Editing Surface — the styles, in the ONE file both shells load ═══ Extracted from admin.css, unchanged, because of a real defect: every .ce-* and .ces-* rule lived only in admin.css, and platform.html does not load admin.css. So when the institution's private space opened the canvas page builder (m237), the editor rendered with NO styling at all — the toolbar came out as a row of bare 16px buttons and the Design/Sample Data and Desktop/Tablet/Mobile toggles as unstyled inline text. Reported from production: "the text, image, etc are too small. should have it as you did it in previous canvas with text next to it." Loading admin.css from platform.html was the other option and is the wrong one: it carries the whole staff console's chrome and would restyle the learner platform underneath itself. Extracting the ~670 lines the editor actually needs gives both shells the same editor and gives neither anything else. NOT A REWRITE. Every rule below is byte-for-byte what admin.css held; the only change is which file it lives in and that two pages now link it. admin/index.html and platform.html both load it AFTER their own stylesheet, so nothing about the staff console's appearance changes. */ /* ─── Canvas Engine v1.0 — freeform document authoring engine ─────────────── */ /* Implements docs/CANVAS_ENGINE_PRODUCT_DESIGN_SPEC.md. See admin-canvas-engine.js. Prefix .ce-* per the platform's established per-feature CSS prefix convention (.cd-*, .pb-*, .eb-*). */ /* Library shell */ .ce-lib-tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0.75rem 0 1rem; } .ce-lib-tab { padding: 0.4rem 0.85rem; border: 1px solid var(--border); border-radius: 999px; background: transparent; font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; font-family: var(--font-body); transition: var(--transition); } .ce-lib-tab:hover { background: var(--gold-soft); color: var(--text-primary); } .ce-lib-tab.active { background: var(--gold); color: #1A1D2B; font-weight: 600; border-color: var(--gold); } .ce-lib-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .ce-lib-card { border: 1px solid var(--border); border-radius: var(--radius-md, 8px); overflow: hidden; cursor: pointer; background: var(--surface, rgba(0,0,0,0.02)); transition: var(--transition); } .ce-lib-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); } .ce-lib-card-thumb { height: 120px; background: linear-gradient(135deg, var(--gold-soft), rgba(0,0,0,0.03)); } .ce-lib-card-thumb--certificate { aspect-ratio: 297/210; } .ce-lib-card-thumb--badge { aspect-ratio: 1/1; } .ce-lib-card-body { padding: 0.75rem 0.9rem; } .ce-lib-card-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); margin-bottom: 0.3rem; } .ce-lib-card-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: var(--text-muted); } .ce-lib-card-draft-flag { padding: 0.1rem 0.45rem; border-radius: 999px; background: rgba(240,192,96,0.12); color: #B8860B; border: 1px solid rgba(240,192,96,0.3); font-weight: 600; } /* New Document modal */ .ce-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 500; } .ce-modal { background: var(--bg-elevated, #fff); border-radius: var(--radius-md, 8px); padding: 1.5rem; width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); } .ce-modal h3 { margin: 0 0 1rem; font-size: 1.05rem; } .ce-modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; } /* Editor shell */ .ce-editor-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .ce-editor-header-left, .ce-editor-header-right { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } /* Top toolbar grouping (Canvas Engine usability pass, "group actions logically" — View / History / Editing / Publishing) — purely visual: the same buttons with the same ids/handlers, wrapped in labelled clusters separated by a thin divider instead of one undifferentiated row. */ .ce-header-group { display: flex; align-items: center; gap: 0.4rem; } .ce-header-divider { width: 1px; height: 22px; background: var(--border); margin: 0 0.2rem; } .ce-title-input { font-size: 1.2rem; font-weight: 600; font-family: var(--font-body); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm, 6px); padding: 0.15rem 0.4rem; color: inherit; min-width: 180px; } .ce-title-input:hover:not(:disabled), .ce-title-input:focus:not(:disabled) { border-color: var(--border); background: var(--surface, rgba(0,0,0,0.03)); outline: none; } .ce-version-label { font-size: 0.75rem; color: var(--text-muted); } /* Inspector redesign: moved from a permanent right-hand column to a horizontal strip along the BOTTOM of the workspace (explicit user request — reserving a ~300px side column was still starving the canvas of width the instant anything was selected, which is most of an editing session, even after the ce-no-selection column-collapse below). Only 2 grid columns now (toolbar / canvas) — the canvas gets its FULL width at all times, selection state or not. Rows are "auto auto" (not 1fr) deliberately: no forced viewport height here, same natural-scrolling constraint as the rest of this workspace — each row simply sizes to its own content. */ .ce-editor-body { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; min-height: 520px; } /* .ce-inspector spans both columns as row 2 — see the .ce-inspector rule itself (below) for the flex-wrap layout that turns its previously-stacked vertical fields into a horizontal, wrapping bar. */ .ce-inspector { grid-column: 1 / -1; grid-row: 2; } /* Workspace size fix (kept, repurposed): previously collapsed the Inspector's WIDTH column when nothing was selected; now that it's a bottom strip instead of a side column, this caps its HEIGHT to a slim single-line strip when empty instead, handing that vertical space back to the canvas — reappearing at full height the instant something is selected. Toggled from renderInspector() (admin-canvas-engine.js), same class, same call site, unchanged. */ .ce-editor-body.ce-no-selection .ce-inspector { max-height: 52px; } /* Provider Inspector authoring UX round (Website Pages on Canvas Engine) — independently scrolling Inspector: "The Canvas itself should remain visible at all times. Only the Inspector should scroll... similar to Figma, Canva or PowerPoint." As Runtime Providers gain richer, Provider-specific editors (canvas-provider-editors.js — e.g. a Programme Listing "Selected Programmes" checklist), the Inspector's own content can now grow arbitrarily tall. Without a bound, that tall content would push the whole workspace taller and force the PAGE to scroll just to see the bottom of the Inspector — dragging the Canvas out of view along with it, exactly what this fix prevents. Scoped to .ces-body — the one distinguishing root class canvas-editing-surface.js's own render() emits (`
`) that admin-canvas-engine.js's Certificate/Document editor root markup does NOT carry (confirmed via grep: that file emits bare `.ce-editor-body` only). This scoping is deliberate and load-bearing: an earlier, unscoped attempt at a similar bounded-height shell was reverted specifically because it broke that other editor (see this section's own git history / PROJECT_STATUS notes) — bounding only `.ces-body .ce-inspector` here cannot repeat that regression, because the selector never matches the Certificate/Document editor's DOM at all. Implementation: rather than bounding the whole .ce-editor-body shell to the viewport height (which would require knowing this screen's exact page chrome height above the editor — fragile, and the earlier reverted attempt's actual mistake), only the Inspector's own grid row (row 2, spanning full width below the Toolbar/Canvas row) is capped and given its own overflow-y:auto. Since the Inspector is the sole occupant of that "auto"-sized grid row, capping its own max-height caps the row too — the Canvas above is structurally untouched and never affected by how much content the Inspector holds. `.ce-editor-body.ce-no-selection .ce-inspector` (immediately above) has higher selector specificity (3 classes vs. this rule's 2) and so still correctly wins when nothing is selected, preserving that existing collapsed-to-52px behaviour unchanged. */ .ces-body .ce-inspector { max-height: min(46vh, 520px); overflow-y: auto; } /* Programme Showcase provider editor (canvas-provider-editors.js, "website_programme_showcase") — the ordered-list authoring UI for Available Programme + Coming Soon entries. Deliberately minimal: reuses .field-hint/.badge conventions already established elsewhere rather than introducing a new visual language for one Inspector panel. */ /* max-height + its own overflow-y:auto (Aug 2026 fix) — a Showcase with many placed entries used to push the "Add Available Programme"/"Add Coming Soon" selects further and further down the Inspector on every addition, forcing a scroll through the whole growing list just to reach them again. Capping the list's own height keeps those Add controls reachable at a fixed position right below it; the Inspector's own `.ces-body .ce-inspector` scroll region (immediately above) still handles the panel as a whole if its total content exceeds that. */ .cpe-ps-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.75rem; max-height: 260px; overflow-y: auto; } .cpe-ps-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-secondary, rgba(255,255,255,0.03)); } .cpe-ps-row-label { flex: 1; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cpe-ps-row-actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; } .cpe-ps-row-actions button { width: 1.6rem; height: 1.6rem; line-height: 1; border: 1px solid var(--border); border-radius: 4px; background: transparent; cursor: pointer; font-size: 0.85rem; } .cpe-ps-row-actions button:disabled { opacity: 0.35; cursor: not-allowed; } .cpe-ps-badge { display: inline-flex; align-items: center; flex-shrink: 0; font-size: 0.65rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px; } .cpe-ps-badge--available { background: rgba(110,231,183,0.12); color: #6EE7B7; border: 1px solid rgba(110,231,183,0.2); } .cpe-ps-badge--coming-soon { background: rgba(240,192,96,0.1); color: #F0C060; border: 1px solid rgba(240,192,96,0.2); } .cpe-ps-badge--missing { background: rgba(239,68,68,0.10); color: #F87171; border: 1px solid rgba(239,68,68,0.2); } /* Grid Container v1 (docs/GRID_LAYOUT_CONTAINER_ARCHITECTURE_PROPOSAL.md) — editor-stage visual indication of grid membership (proposal §4). A grid object itself gets a distinct dashed outline so an author can see its footprint even when empty; its children get a lighter/dotted outline on hover to read as "grid-managed," distinct from a free object's normal solid `.ce-selected` outline. Purely additive CSS — no effect on any page with no `grid` object, since `.ces-grid-container`/`.ce-grid-child` are never applied to anything else. */ .ces-grid-container { outline: 2px dashed rgba(201,162,75,0.55); outline-offset: -2px; } .ces-grid-container.ce-selected { outline-color: var(--gold, #C9A24B); } .ce-grid-child { transition: outline-color 0.1s ease; } .ce-grid-child:hover { outline: 1px dotted rgba(201,162,75,0.5); outline-offset: -1px; } .ce-grid-child.ce-selected { outline: 2px solid var(--gold, #C9A24B); outline-offset: -2px; } /* Left toolbar — grouped into Select / Draw / Content clusters (Canvas Engine usability pass, "review the toolbar, group actions logically") via a thin divider between .ce-toolbar-group blocks; no behaviour change, the same flat list of .ce-tool-btn buttons with the same data-tool values. */ .ce-toolbar { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.6rem 0.25rem; border-right: 1px solid var(--border); overflow-y: auto; } .ce-toolbar-group { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .ce-toolbar-divider { width: 24px; height: 1px; background: var(--border); margin: 0.15rem 0; flex-shrink: 0; } .ce-tool-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; background: transparent; border-radius: var(--radius-sm, 6px); cursor: pointer; font-size: 1.05rem; color: var(--text-secondary); transition: var(--transition); } .ce-tool-btn:hover { background: var(--gold-soft); color: var(--text-primary); } .ce-tool-btn.active { background: var(--gold); color: #1A1D2B; } /* Canvas surface — a slightly deeper workspace tint (0.02 -> 0.04 alpha) gives the white certificate page real figure-ground contrast so it reads as the page's primary focus, the same treatment Figma/Canva use behind their own canvas. */ .ce-canvas-area { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; overflow: auto; background: rgba(0,0,0,0.02); } .ce-page-nav { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--text-muted); } .ce-page-nav button { border: 1px solid var(--border); background: transparent; border-radius: 4px; cursor: pointer; padding: 0.1rem 0.5rem; } /* Bug fix (top-of-certificate cropping): align-items/justify-content:center here used to centre the STAGE inside the wrap using the stage's PRE-TRANSFORM layout box (transform:scale() in setZoom() never changes an element's own layout size, only its rendered appearance) — but the wrap itself is deliberately resized by setZoom() to the stage's POST-transform (scaled) footprint, so the wrap is always SMALLER than the box flexbox is trying to centre. That mismatch produces a permanent offset of exactly half the shrink amount in each axis, pushing the certificate's rendered top/left up and to the left of the wrap — at high zoom (this workspace's 80% floor) that offset is large enough to push the certificate's top edge above .ce-canvas-area's own scrollable boundary, i.e. permanently unreachable/cropped, no scroll position can reveal it. Fix: align to flex-start on both axes instead of center. Since wrap's box is already sized to exactly match the stage's scaled footprint, flex-start places the stage's top-left (== its transform-origin) exactly at the wrap's own top-left — a perfect, offset-free fit. Horizontal centring of the certificate within the wider workspace is untouched: it's handled by the OUTER .ce-canvas-area's own align-items:center (which centres the WRAP, already sized to the true visible footprint, inside itself) — this rule was only ever centring the stage inside the wrap, which is a different, and here actively harmful, second layer of centring. */ .ce-canvas-wrap { display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; } .ce-canvas-stage { /* z-index: 0 (with position: relative) deliberately establishes a LOCAL stacking context here. Canvas objects use very high inline z-index values (selected object: 9999 !important; resize/rotate handles: 10000 — see .ce-object.ce-selected / .ce-handle / .ce-rotate-handle below) to stay correctly ordered relative to EACH OTHER as z changes. Without this containing stacking context those values aren't scoped to the canvas — they compete directly against page-level UI z-indices (e.g. .ce-preview-overlay's z-index: 700) and can paint on TOP of a modal/overlay that opens while an object is still selected. This is the real cause of the Preview "duplicate image" bug: the overlay being opaque never mattered, because the still-selected canvas object was winning the stacking order and rendering above it regardless. */ position: relative; z-index: 0; width: 100%; max-width: 820px; background: #fff; border: 1px solid var(--border); box-shadow: 0 8px 32px rgba(0,0,0,0.14); transform-origin: top left; user-select: none; } .ce-zoom-control { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--text-muted); flex-shrink: 0; } .ce-zoom-control button { width: 24px; height: 24px; border: 1px solid var(--border); background: transparent; border-radius: 4px; cursor: pointer; } .ce-zoom-control button:hover { background: var(--gold-soft); border-color: var(--gold); } #ce-zoom-label { min-width: 38px; text-align: center; } /* "Fit" — re-runs the same fit-to-container calculation the editor already does once on first open, on demand (e.g. after resizing the browser window, or after collapsing/expanding a drawer changes the available height) — the professional-tool "zoom to fit" affordance Canva/Figma both have, so a lost/awkward zoom level is always one click from a sane default again. */ #ce-zoom-fit { width: auto; padding: 0 0.5rem; font-size: 0.72rem; } /* Objects, selection & handles — Canvas Engine usability pass ("the editor should feel similar to professional design tools such as Canva, Figma or PowerPoint"). The old selection treatment was a single 2px gold outline, which loses contrast against light/white certificate backgrounds (gold on near-white cream reads as barely-there). The new treatment layers a white halo INSIDE a gold ring INSIDE a soft drop shadow — visible against any object fill colour, light or dark, the same "outline + contrast ring" technique Figma/Canva use for exactly this reason. */ .ce-object { position: absolute; box-sizing: border-box; cursor: move; outline: 1px solid transparent; transition: outline-color 0.1s ease; } .ce-object:hover { outline: 1px solid rgba(201,162,75,0.55); } .ce-object.ce-selected { outline: none; box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--gold, #C9A24B), 0 2px 10px rgba(0,0,0,0.18); z-index: 9999 !important; } /* A small floating label above the selected object naming what it is — admin-canvas-engine.js sets data-object-label alongside data-object-id on every rendered object, so this is CSS-only, no extra wiring. Mirrors the same "what am I clicking on" affordance Figma shows on hover/selection. */ .ce-object.ce-selected::before { content: attr(data-object-label); position: absolute; left: 0; top: -1.5rem; padding: 0.1rem 0.5rem; border-radius: 4px; background: var(--gold, #C9A24B); color: #1A1D2B; font-size: 0.68rem; font-weight: 600; white-space: nowrap; pointer-events: none; z-index: 10001; } .ce-object-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.04); border: 1px dashed var(--border); font-size: 0.7rem; color: var(--text-muted); } .ce-object-img { width: 100%; height: 100%; } .ce-object-video { width: 100%; height: 100%; background: #000; } /* Canvas rendering contract unification (forensic WYSIWYG parity investigation follow-up) — canvas-editing-surface.js (Website Pages / Layout Templates) now renders image/video content through the exact same shared renderCanvasObjectContent() (canvas-object-renderer.js) the live SSR/Preview/Export path uses, which emits a bare /