Print a guide light, whatever the screen theme is
Printing a dark-mode page lays a full page of toner down for the background and knocks the text out of it in white. On a shopfloor printer that is a cartridge for a handful of guides, and the result is harder to read than the plain version. Somebody would have found this the expensive way. The theme tokens are redefined for print only, in an unscoped block because overriding them has to reach :root. Every guide element already renders through those variables rather than literal colours, so this is a dozen lines instead of a rewrite - the same discipline that made dark mode work without dark-mode code. Backgrounds are dropped rather than printed grey: a callout is identified by its rule and its heading, which cost nothing. Checkboxes print EMPTY even where they are ticked on screen, because a printed guide is a worksheet somebody carries to the bay, and one person's progress is not part of the procedure. The footer gains the print date beside the version, so a stale copy pinned to a noticeboard can be spotted. Also corrects the model and migration found by running this against a real database rather than SQLite: BaseModel contributes createddate, modifieddate and isactive to every table and the migration never created them, so the first read failed on unknown columns; the model had also declared duplicate timestamps on top, now removed with the API field names kept stable. And the slug is 191 characters, not 300 - it is UNIQUE-indexed, MySQL caps an index key at 767 bytes, and utf8mb4 is 4 bytes per character.
This commit is contained in:
@@ -218,3 +218,54 @@ watch(() => route.params.slug, load)
|
||||
.gv-foot { border-top: 1px solid #999; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/*
|
||||
* PRINT IS ALWAYS LIGHT, whatever the screen theme is.
|
||||
*
|
||||
* Printing a dark-mode page lays down a full page of toner for the background
|
||||
* and then knocks the text out of it in white. On a shopfloor printer that is
|
||||
* a cartridge for a handful of guides, and the result is harder to read than
|
||||
* the plain version.
|
||||
*
|
||||
* So the theme tokens are redefined for print only. Every guide element already
|
||||
* renders through these variables rather than literal colours, which is what
|
||||
* makes this a dozen lines instead of a rewrite - and the same discipline that
|
||||
* made dark mode work at all.
|
||||
*
|
||||
* Deliberately NOT scoped: a scoped block cannot reach :root, and these have to
|
||||
* override tokens set on the document element.
|
||||
*/
|
||||
@media print {
|
||||
:root,
|
||||
:root[data-theme="dark"],
|
||||
:root[data-theme="light"] {
|
||||
--text: #000;
|
||||
--text-light: #333;
|
||||
--border: #999;
|
||||
--surface: #fff;
|
||||
--surface-2: #fff;
|
||||
--primary: #000;
|
||||
--info: #666;
|
||||
--warning: #666;
|
||||
--success: #666;
|
||||
}
|
||||
|
||||
html, body, .app-layout, .main-content {
|
||||
background: #fff !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
/* Backgrounds are dropped rather than printed grey: a callout is identified
|
||||
by its rule and its heading, which cost nothing to print. */
|
||||
.gb-callout, .gb-code, .gb-codehead, .gb-table th {
|
||||
background: #fff !important;
|
||||
}
|
||||
.gb-callout { border-left: 3px solid #000 !important; }
|
||||
.gb-code, .gb-table th, .gb-table td { border-color: #999 !important; }
|
||||
|
||||
/* Links: the text is what matters on paper, and a blue underline on a mono
|
||||
printer is just grey. */
|
||||
a { color: #000 !important; text-decoration: underline; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user