/* * Canonical stylesheet for new-editor rendered output. * * All rules are scoped under `.pb-rendered` so they can be loaded onto any * page (staff issue detail accordion, public newsroom, playground preview) * without bleeding into surrounding Bootstrap/site styles. * * Wrap rendered submission HTML in `

…

` (or set * the class on `` for full-document previews). * * Reason: a `*` reset that zeros all margin/padding would break Bootstrap * inside the accordion preview, so we only apply `box-sizing` here and rely * on the renderer's per-widget inline styles for spacing. */ .pb-rendered, .pb-rendered *, .pb-rendered *::before, .pb-rendered *::after { box-sizing: border-box; } .pb-rendered { /*font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;*/ /*color: #1f2937;*/ line-height: 1.5; } .pb-rendered img { max-width: 100%; height: auto; display: block; } .pb-rendered .pb-container { max-width: 960px; /*margin: 0 auto;*/ padding: 0 20px; } .pb-rendered .pb-row { display: flex; flex-wrap: wrap; } .pb-rendered .pb-col { min-height: 1px; } .pb-rendered .pb-col-1 { width: 8.333%; } .pb-rendered .pb-col-2 { width: 16.667%; } .pb-rendered .pb-col-3 { width: 25%; } .pb-rendered .pb-col-4 { width: 33.333%; } .pb-rendered .pb-col-5 { width: 41.667%; } .pb-rendered .pb-col-6 { width: 50%; } .pb-rendered .pb-col-7 { width: 58.333%; } .pb-rendered .pb-col-8 { width: 66.667%; } .pb-rendered .pb-col-9 { width: 75%; } .pb-rendered .pb-col-10 { width: 83.333%; } .pb-rendered .pb-col-11 { width: 91.667%; } .pb-rendered .pb-col-12 { width: 100%; } .pb-rendered .pb-align-left { text-align: left; } .pb-rendered .pb-align-center { text-align: center; } .pb-rendered .pb-align-right { text-align: right; } /* * Quill per-paragraph classes. Inside the editor these come from Quill's own * stylesheet (bundled into editor.css), but rendered output only loads this * file, so they must be redefined here. Left alignment is Quill's classless * default. Indent steps 3em per level, matching Quill's scale. */ .pb-rendered .ql-align-center { text-align: center; } .pb-rendered .ql-align-right { text-align: right; } .pb-rendered .ql-align-justify { text-align: justify; } .pb-rendered .ql-indent-1 { padding-left: 3em; } .pb-rendered .ql-indent-2 { padding-left: 6em; } .pb-rendered .ql-indent-3 { padding-left: 9em; } .pb-rendered .ql-indent-4 { padding-left: 12em; } .pb-rendered .ql-indent-5 { padding-left: 15em; } .pb-rendered .ql-indent-6 { padding-left: 18em; } .pb-rendered .ql-indent-7 { padding-left: 21em; } .pb-rendered .ql-indent-8 { padding-left: 24em; } .pb-rendered .pb-rich-text ul, .pb-rendered .pb-rich-text ol { padding-left: 1.5em; } .pb-rendered .pb-rich-text a { /* Reason: the link colour is set per-school via the editor theme. The * renderer emits `--pb-link-color` on each rich-text widget (resolved from * the page's design.linkColor, then the school's EditorTheme); the fallback * keeps legacy content readable. */ color: var(--pb-link-color, #3b82f6); text-decoration: underline; } .pb-rendered .pb-video-wrapper { position: relative; overflow: hidden; } .pb-rendered .pb-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .pb-rendered .pb-html-widget { text-align: left; } /* * Reason: schools occasionally use an H1 inside submission content (often * carried over from the legacy free editor), which renders much larger than * the submission's own title. Each submission card already has its own * heading, so any H1 nested inside `.pb-rendered` is subdued down to ~20px. * `!important` is required because the editor emits H1s with inline * `font-size` from the user's chosen style. */ .pb-rendered h1 { font-size: 1.25rem !important; line-height: 1.3 !important; } .pb-rendered .pb-html-widget iframe, .pb-rendered .pb-html-widget img, .pb-rendered .pb-html-widget video, .pb-rendered .pb-html-widget embed { display: block; max-width: 100%; margin-left: auto; margin-right: auto; }