13a6e3ca1c
Three gaps, one theme: the editor could produce a file but not decide where it went, what format it was in, or look like anything in the dock. **Save as…** opens a real file dialog, and the extension typed there picks the format. Save then writes to that file instead of dropping another copy in Downloads every time. The renderer never names a path: the dialog returns an opaque token, and the add-on will only write to a path a dialog actually returned. An extension page is the least trusted thing in the add-on, and "write these bytes anywhere" is not a capability it needs. **PDF** goes through Chromium's own print pipeline in a hidden window — the same engine as Ctrl+P — on the paper size read out of the document's own sectPr. For that to match what the user was looking at, the page's typography had to stop living in editor.css, which the export window can't reach: it moves to lib/doc-css.js and both surfaces read the one string. The result embeds subsetted fonts, keeps images, and turns hyperlinks into real PDF link annotations. **The icon** is ours. Microsoft's Word mark is a trademark and borrowing it to look official is not something a browser that talks about sovereignty should do. icon.svg says "text document" in its own words — a turned corner, a heading rule, body lines, a pilcrow badge in Silent Mode green — and `npm run icons` derives the PNGs and addon.json's copy from it, so there is one drawing rather than several that drift. Also: the scratch folder follows the profile rename to extensions-data/ via the api.dataDir the host now provides, instead of creating a stale addons-data/ beside it.
198 lines
11 KiB
CSS
198 lines
11 KiB
CSS
/* Word editor — full-tab. Shares the screenshot editor's shell (same
|
|
variables, same topbar + toolbar + footer skeleton) with a ribbon-ish
|
|
toolbar over a continuous document surface.
|
|
|
|
"Ribbon-ish" means grouped button sets with labelled groups, not a real
|
|
ribbon widget: no tabs, no gallery, no contextual tab strip. It reads as
|
|
Office without pretending to be it. */
|
|
:root { color-scheme: light dark;
|
|
--bg:#0e131c; --panel:#141a24; --panel2:#191f2b; --line:rgba(255,255,255,.09);
|
|
--ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#d6ff3d;
|
|
--danger:#ff5b5b; --warn:#ffb648; --board:#0a0d13;
|
|
--paper:#ffffff; --paper-ink:#14161a; --paper-edge:rgba(0,0,0,.4); }
|
|
@media (prefers-color-scheme: light) {
|
|
:root { --bg:#f8faff; --panel:#ffffff; --panel2:#eff3fb; --line:rgba(0,0,0,.10);
|
|
--ink:#1a1f2b; --mut:#5c6577; --dim:#8a93a5; --acid:#0AC18E;
|
|
--board:#dde3ee; --paper-edge:rgba(0,0,0,.18); }
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; height: 100%; }
|
|
body { background: var(--bg); color: var(--ink);
|
|
font: 13px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
|
display: flex; flex-direction: column; overflow: hidden; }
|
|
[hidden] { display: none !important; }
|
|
|
|
/* ---- top bar --------------------------------------------------------- */
|
|
.topbar { display: flex; align-items: center; gap: 4px; padding: 6px 8px;
|
|
border-bottom: 1px solid var(--line); background: var(--panel);
|
|
user-select: none; flex-wrap: nowrap; }
|
|
.topbar .spacer { flex: 1; }
|
|
.topbar .docname { color: var(--ink); font-size: 12.5px; font-weight: 600;
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
max-width: 42vw; margin: 0 6px; }
|
|
.topbar .docname .dirty { color: var(--acid); margin-left: 4px; }
|
|
|
|
/* ---- ribbon ---------------------------------------------------------- */
|
|
.ribbon { display: flex; align-items: stretch; gap: 0;
|
|
padding: 4px 6px 2px; border-bottom: 1px solid var(--line);
|
|
background: linear-gradient(180deg, var(--panel), var(--panel2));
|
|
user-select: none; overflow-x: auto; overflow-y: hidden; }
|
|
.rgroup { display: flex; flex-direction: column; align-items: center;
|
|
gap: 3px; padding: 0 8px; flex: 0 0 auto;
|
|
border-right: 1px solid var(--line); }
|
|
.rgroup:last-child { border-right: 0; }
|
|
.rgroup .rrow { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; }
|
|
.rgroup .rlabel { font-size: 10px; color: var(--dim); letter-spacing: .02em;
|
|
text-transform: lowercase; }
|
|
.rgroup[data-contextual] { opacity: .45; pointer-events: none; }
|
|
.rgroup[data-contextual="on"] { opacity: 1; pointer-events: auto; }
|
|
|
|
.btn {
|
|
border: 1px solid transparent; background: transparent; color: var(--ink);
|
|
min-width: 26px; height: 26px; border-radius: 5px; cursor: pointer;
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
padding: 0 4px; font: inherit; line-height: 0;
|
|
transition: background 90ms, border-color 90ms;
|
|
}
|
|
.btn:hover:not(:disabled) { background: var(--panel2); border-color: var(--line); }
|
|
.btn.on { background: rgb(from var(--acid) r g b / .16);
|
|
border-color: rgb(from var(--acid) r g b / .55); color: var(--acid); }
|
|
.btn:disabled { opacity: .35; cursor: default; }
|
|
.btn svg { width: 15px; height: 15px; display: block; }
|
|
.btn.wide { min-width: auto; padding: 0 8px; gap: 5px; line-height: 1; }
|
|
.btn.wide span { font-size: 12px; }
|
|
.btn.primary { background: var(--acid); color: #101418; border-color: transparent; font-weight: 600; }
|
|
.btn.primary:hover:not(:disabled) { filter: brightness(1.06); background: var(--acid); }
|
|
.btn.danger:hover:not(:disabled) { border-color: rgba(255,91,91,.55); color: var(--danger); }
|
|
.btn .caret { width: 8px; height: 8px; opacity: .6; }
|
|
|
|
select.rsel, input.rnum {
|
|
height: 26px; border-radius: 5px; border: 1px solid var(--line);
|
|
background: var(--panel2); color: var(--ink); font: inherit; font-size: 12px;
|
|
padding: 0 4px; cursor: pointer; max-width: 150px;
|
|
}
|
|
select.rsel:focus, input.rnum:focus { outline: 1px solid rgb(from var(--acid) r g b / .5); }
|
|
input.rnum { width: 52px; cursor: text; text-align: center; }
|
|
.swatch-btn { position: relative; }
|
|
.swatch-btn .bar { position: absolute; left: 4px; right: 4px; bottom: 3px;
|
|
height: 3px; border-radius: 1px; background: #c00; }
|
|
|
|
/* colour / highlight popovers */
|
|
.pop { position: absolute; z-index: 60; background: var(--panel);
|
|
border: 1px solid var(--line); border-radius: 8px; padding: 8px;
|
|
box-shadow: 0 10px 28px rgba(0,0,0,.35); }
|
|
.pop .grid { display: grid; grid-template-columns: repeat(8, 20px); gap: 4px; }
|
|
.pop .chip { width: 20px; height: 20px; border-radius: 4px; cursor: pointer;
|
|
border: 1px solid var(--line); padding: 0; }
|
|
.pop .chip:hover { outline: 2px solid rgb(from var(--acid) r g b / .6); }
|
|
.pop .prow { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
|
|
.pop .prow .btn { height: 24px; }
|
|
|
|
/* ---- banners --------------------------------------------------------- */
|
|
.banners { background: var(--board); }
|
|
.banner { display: flex; align-items: flex-start; gap: 10px;
|
|
padding: 9px 14px; font-size: 12.5px; line-height: 1.45;
|
|
border-bottom: 1px solid var(--line); background: var(--panel); }
|
|
.banner .ico { flex: 0 0 auto; font-size: 14px; line-height: 1.3; }
|
|
.banner .body { flex: 1 1 auto; min-width: 0; }
|
|
.banner .body b { font-weight: 600; }
|
|
.banner .acts { flex: 0 0 auto; display: flex; gap: 6px; }
|
|
.banner.warn { border-left: 3px solid var(--warn); }
|
|
.banner.block { border-left: 3px solid var(--danger); }
|
|
.banner.info { border-left: 3px solid var(--acid); }
|
|
.banner .btn { border-color: var(--line); background: var(--panel2); }
|
|
|
|
/* ---- document surface ------------------------------------------------ */
|
|
.board { flex: 1; overflow: auto; background: var(--board); padding: 20px 16px 60px; }
|
|
.sheet { max-width: 8.27in; margin: 0 auto; background: var(--paper);
|
|
color: var(--paper-ink); box-shadow: 0 2px 18px var(--paper-edge);
|
|
padding: 0.9in 1in; min-height: 60vh; }
|
|
.sheet:focus { outline: none; }
|
|
.sheet .ProseMirror { outline: none; min-height: 50vh; }
|
|
|
|
/* The document's own typography lives in lib/doc-css.js, injected at boot.
|
|
It is shared verbatim with the PDF export, which renders in a throwaway
|
|
window that can't reach this stylesheet — one copy means the PDF can't
|
|
drift away from what the editor showed. Only the "paper on a desk"
|
|
framing stays here. */
|
|
|
|
|
|
/* prosemirror-tables' own furniture */
|
|
.sheet .selectedCell:after {
|
|
content: ""; position: absolute; inset: 0; background: rgba(100,150,255,.25);
|
|
pointer-events: none; z-index: 2;
|
|
}
|
|
.sheet .column-resize-handle {
|
|
position: absolute; right: -2px; top: 0; bottom: 0; width: 4px;
|
|
background: #6ba0ff; pointer-events: none; z-index: 3;
|
|
}
|
|
.resize-cursor { cursor: col-resize; }
|
|
.ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; }
|
|
.ProseMirror-gapcursor:after {
|
|
content: ""; display: block; position: absolute; top: -2px;
|
|
width: 20px; border-top: 1px solid var(--paper-ink); animation: pm-blink 1.1s steps(2, start) infinite;
|
|
}
|
|
.ProseMirror-focused .ProseMirror-gapcursor { display: block; }
|
|
@keyframes pm-blink { to { visibility: hidden; } }
|
|
.ProseMirror-selectednode { outline: 2px solid #6ba0ff; }
|
|
|
|
.empty-state { color: var(--dim); text-align: center; padding: 60px 20px; }
|
|
|
|
/* ---- footer ---------------------------------------------------------- */
|
|
.footer { display: flex; align-items: center; gap: 14px;
|
|
padding: 5px 12px; border-top: 1px solid var(--line);
|
|
background: var(--panel); font-size: 11.5px; color: var(--dim); }
|
|
.footer .stat { flex: 0 0 auto; white-space: nowrap; }
|
|
.footer .msg { flex: 1 1 auto; min-width: 0; overflow: hidden;
|
|
text-overflow: ellipsis; white-space: nowrap; text-align: right; }
|
|
.footer .msg.err { color: var(--danger); }
|
|
.footer .msg.ok { color: var(--acid); }
|
|
.footer .fbtn { border: 1px solid var(--line); background: var(--panel2);
|
|
color: var(--ink); border-radius: 5px; cursor: pointer;
|
|
padding: 3px 7px; font: inherit; font-size: 11px; flex: 0 0 auto; }
|
|
.footer .fbtn:hover { border-color: rgb(from var(--acid) r g b / .55); }
|
|
|
|
/* ---- dialogs --------------------------------------------------------- */
|
|
.scrim { position: fixed; inset: 0; background: rgba(4,7,12,.6); z-index: 80;
|
|
display: flex; align-items: center; justify-content: center; padding: 24px; }
|
|
.dialog { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
|
|
box-shadow: 0 18px 50px rgba(0,0,0,.45); width: min(560px, 100%);
|
|
max-height: 80vh; display: flex; flex-direction: column; }
|
|
.dialog h2 { margin: 0; padding: 14px 18px 10px; font-size: 14.5px; font-weight: 600; }
|
|
.dialog .dbody { padding: 0 18px 4px; overflow: auto; font-size: 12.5px; line-height: 1.55; color: var(--mut); }
|
|
.dialog .dbody h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
|
|
color: var(--dim); margin: 14px 0 6px; font-weight: 600; }
|
|
.dialog .dbody ul { margin: 0 0 8px; padding-left: 18px; }
|
|
.dialog .dbody li { margin: 2px 0; }
|
|
.dialog .dbody code { font-family: Consolas, monospace; font-size: 11.5px; color: var(--ink); }
|
|
.dialog .dfoot { display: flex; gap: 8px; justify-content: flex-end;
|
|
padding: 12px 18px 14px; border-top: 1px solid var(--line); margin-top: 10px; }
|
|
.dialog .field { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
|
|
.dialog .field label { font-size: 11.5px; color: var(--dim); }
|
|
.dialog .field input {
|
|
height: 30px; border-radius: 6px; border: 1px solid var(--line);
|
|
background: var(--panel2); color: var(--ink); font: inherit; padding: 0 8px;
|
|
}
|
|
.dialog .field input:focus { outline: 1px solid rgb(from var(--acid) r g b / .5); }
|
|
.dialog .row { display: flex; gap: 12px; }
|
|
.dialog .row .field { flex: 1; }
|
|
.pill { display: inline-block; font-size: 10.5px; padding: 1px 6px; border-radius: 99px;
|
|
border: 1px solid var(--line); margin-right: 6px; }
|
|
.pill.keep { color: var(--acid); border-color: rgb(from var(--acid) r g b / .45); }
|
|
.pill.lose { color: var(--warn); border-color: rgba(255,182,72,.45); }
|
|
.pill.stop { color: var(--danger); border-color: rgba(255,91,91,.45); }
|
|
|
|
/* ---- drop target ----------------------------------------------------- */
|
|
.dropzone { position: fixed; inset: 0; z-index: 90; background: rgba(10,14,20,.82);
|
|
display: flex; align-items: center; justify-content: center;
|
|
border: 3px dashed var(--acid); font-size: 16px; color: var(--ink); }
|
|
|
|
/* ---- print ----------------------------------------------------------- */
|
|
@media print {
|
|
.topbar, .ribbon, .footer, .banners, .pop, .scrim, .dropzone { display: none !important; }
|
|
html, body { height: auto; overflow: visible; background: #fff; }
|
|
.board { overflow: visible; padding: 0; background: #fff; }
|
|
.sheet { box-shadow: none; max-width: none; margin: 0; padding: 0; background: #fff; color: #000; }
|
|
/* Page breaks and widow control come from lib/doc-css.js, which carries
|
|
its own @media print block so Ctrl+P and the PDF export agree. */
|
|
}
|