/* PDF Editor — Phase 1 styles */ /* Variables live on the card too: while maximized the card is portaled to (outside .pdfedit-page) and must keep resolving them. */ .pdfedit-page, .pdfedit-tool-card { --pdfedit-accent: #b91c1c; --pdfedit-border: #e5e7eb; } .pdfedit-hero { padding: 28px 0 18px; } .pdfedit-title { margin: 0 0 8px; } .pdfedit-subtitle { margin: 0; color: #555; } /* The ONE tool card. */ .pdfedit-tool-card { border: 1px solid #ddd; border-radius: 16px; box-shadow: 0 2px 14px rgba(0,0,0,.05); padding: 16px; background: #fff; } .pdfedit-toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; background: #f3f4f6; border-radius: 10px; margin-bottom: 12px; } .pdfedit-workspace { display: grid; grid-template-columns: 220px 1fr 240px; gap: 12px; min-height: 460px; } .pdfedit-rail, .pdfedit-panel { background: #f3f4f6; border-radius: 10px; padding: 10px; overflow: auto; } .pdfedit-canvas-wrap { background: #f3f4f6; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: auto; } .pdfedit-status { margin-top: 10px; min-height: 20px; font-size: 14px; color: #555; } .pdfedit-error { color: #b91c1c; } /* Content sections below the card: separators, never boxes. */ .pdfedit-seo-content, .pdfedit-faq { padding-top: 36px; border-top: 1px solid var(--pdfedit-border); margin-top: 28px; } .pdfedit-faq-inner { padding: 0; } .pdfedit-faq-item { border-bottom: 1px solid var(--pdfedit-border); } .pdfedit-faq-q { cursor: pointer; padding: 14px 0; font-weight: 600; } .pdfedit-faq-a { padding: 0 0 14px; color: #444; } @media (max-width: 900px) { .pdfedit-workspace { grid-template-columns: 1fr; } /* Drawer styles live below; they must not re-pad .pdfedit-faq-inner or cap content width. */ } .pdfedit-empty { text-align: center; color: #555; } .pdfedit-tool-card.is-drag { outline: 2px dashed var(--pdfedit-accent); outline-offset: -6px; } .pdfedit-thumb { position: relative; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px; margin-bottom: 10px; cursor: pointer; } .pdfedit-thumb.is-active { border-color: var(--pdfedit-accent); box-shadow: 0 0 0 2px rgba(185,28,28,.2); } .pdfedit-thumb.is-selected { background: #fef2f2; } .pdfedit-thumb:focus-visible { outline: 2px solid var(--pdfedit-accent); outline-offset: 2px; } .pdfedit-thumb-canvas canvas, .pdfedit-thumb-blank { width: 100%; height: auto; display: block; border: 1px solid #eee; } .pdfedit-thumb-blank { aspect-ratio: 1 / 1.414; display: flex; align-items: center; justify-content: center; color: #999; font-size: 12px; } .pdfedit-thumb-num { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; border-radius: 4px; padding: 1px 5px; } .pdfedit-active-canvas { max-width: 100%; height: auto; box-shadow: 0 1px 8px rgba(0,0,0,.15); background:#fff; } .pdfedit-active-blank { width: 60%; max-width: 420px; aspect-ratio: 1 / 1.414; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 1px 8px rgba(0,0,0,.15); } .pdfedit-active-loading { color: #555; font-size: 14px; } .pdfedit-faq-heading { margin: 0 0 8px; } /* Busy: indeterminate top bar on the card while a long op runs. */ .pdfedit-tool-card { position: relative; } .pdfedit-tool-card.is-busy::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 16px 16px 0 0; background: linear-gradient(90deg, transparent, var(--pdfedit-accent), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: pdfedit-bar 1.1s linear infinite; } @keyframes pdfedit-bar { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } } @media (prefers-reduced-motion: reduce) { .pdfedit-tool-card.is-busy::before { animation: none; background-position: 50% 0; } } .pdfedit-btn { border: 1px solid #d1d5db; background: #fff; border-radius: 8px; padding: 7px 12px; cursor: pointer; font-size: 14px; } .pdfedit-btn:focus-visible { outline: 2px solid var(--pdfedit-accent); outline-offset: 2px; } .pdfedit-btn-primary { background: var(--pdfedit-accent); border-color: var(--pdfedit-accent); color: #fff; } .pdfedit-btn:disabled { opacity: .5; cursor: not-allowed; } .pdfedit-thumb-controls { display: flex; gap: 6px; justify-content: center; margin-top: 6px; } .pdfedit-thumb-btn { border: 1px solid #d1d5db; background: #fff; border-radius: 6px; width: 28px; height: 24px; cursor: pointer; } .pdfedit-thumb-btn:focus-visible { outline: 2px solid var(--pdfedit-accent); outline-offset: 1px; } .pdfedit-thumb-btn:disabled { opacity: .4; cursor: not-allowed; } .pdfedit-thumb.is-dragging { opacity: .4; } .pdfedit-thumb.is-drop-target { border-color: var(--pdfedit-accent); box-shadow: 0 -3px 0 var(--pdfedit-accent); } .pdfedit-field { display: block; margin-bottom: 8px; font-size: 13px; color: #444; } .pdfedit-field input { width: 100%; padding: 7px 9px; border: 1px solid #e5e7eb; border-radius: 8px; } .pdfedit-field input:focus-visible { outline: 2px solid var(--pdfedit-accent); } .pdfedit-help { font-size: 12px; color: #777; margin: 6px 0 0; } .pdfedit-only-mobile { display: none; } @media (max-width: 900px) { .pdfedit-only-mobile { display: inline-block; } .pdfedit-rail, .pdfedit-panel { position: fixed; top: 0; bottom: 0; width: 80%; max-width: 320px; z-index: 50; transform: translateX(-100%); transition: transform .2s; } .pdfedit-panel { right: 0; transform: translateX(100%); } .pdfedit-rail.is-open, .pdfedit-panel.is-open { transform: translateX(0); box-shadow: 0 0 30px rgba(0,0,0,.3); } } /* --- Phase 2: annotate layer --- */ .pdfedit-page-stack { display: inline-block; position: relative; max-width: 100%; } .pdfedit-page-stack .pdfedit-active-canvas { display: block; } .pdfedit-fabric { position: absolute; left: 0; top: 0; } .canvas-container { position: absolute !important; left: 0; top: 0; z-index: 2; } .pdfedit-btn.is-on { background: var(--pdfedit-accent); color: #fff; border-color: var(--pdfedit-accent); } .pdfedit-panel-sec { padding: 10px 0; border-bottom: 1px solid var(--pdfedit-border); } .pdfedit-panel-sec:last-child { border-bottom: none; } .pdfedit-panel-sec strong { display: block; margin-bottom: 6px; text-transform: capitalize; } .pdfedit-field input[type=color] { width: 100%; height: 30px; padding: 0; border: 1px solid #e5e7eb; border-radius: 6px; } .pdfedit-field input[type=checkbox] { margin-right: 6px; width: auto; } .pdfedit-field select { width: 100%; padding: 6px; border: 1px solid #e5e7eb; border-radius: 8px; } /* --- Phase 3: layers panel + align --- */ .pdfedit-layer { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 6px; border: 1px solid #e5e7eb; border-radius: 6px; margin-bottom: 5px; background: #fff; cursor: pointer; font-size: 12px; } .pdfedit-layer:focus-visible { outline: 2px solid var(--pdfedit-accent); outline-offset: 1px; } .pdfedit-layer-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pdfedit-layer-acts { display: flex; gap: 2px; flex: none; } .pdfedit-layer-acts button { border: none; background: transparent; cursor: pointer; padding: 2px 3px; border-radius: 4px; line-height: 1; } .pdfedit-layer-acts button:hover { background: #f3f4f6; } .pdfedit-layer-acts button:focus-visible { outline: 2px solid var(--pdfedit-accent); } .pdfedit-align { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; } .pdfedit-align span { font-size: 12px; color: #555; margin-right: 4px; } .pdfedit-align button { border: 1px solid #d1d5db; background: #fff; border-radius: 6px; width: 30px; height: 26px; cursor: pointer; } .pdfedit-align button:focus-visible { outline: 2px solid var(--pdfedit-accent); } .pdfedit-link { background: none; border: none; color: var(--pdfedit-accent); cursor: pointer; padding: 0 0 6px; font-size: 13px; } .pdfedit-link:focus-visible { outline: 2px solid var(--pdfedit-accent); } /* --- Phase 4: form fill --- */ #pdfeditForm .pdfedit-btn-primary { width: 100%; margin-top: 8px; } /* --- UX fixes: two-row toolbar, fitted canvas, fullscreen --- */ .pdfedit-toolbar { display: block; } .pdfedit-toolbar-row { display: flex; flex-wrap: wrap; gap: 8px; } .pdfedit-toolbar-row + .pdfedit-toolbar-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid #e5e7eb; } .pdfedit-tool-card:fullscreen { overflow: auto; background: #fff; border-radius: 0; border: none; } .pdfedit-tool-card.is-max { position: fixed; inset: 0; z-index: 99999; overflow: auto; border-radius: 0; margin: 0; } /* --- fullscreen fixes: never let CSS clamp one axis of the fitted page (that turns a size mismatch into aspect distortion); JS computes exact post-layout sizes. --- */ .pdfedit-page-stack { max-width: none; } .pdfedit-page-stack .pdfedit-active-canvas { max-width: none; } .pdfedit-tool-card:fullscreen .pdfedit-workspace, .pdfedit-tool-card.is-max .pdfedit-workspace { min-height: calc(100vh - 150px); } /* --- CSS maximize (replaces native fullscreen — see ui.js note) --- */ html.pdfedit-noscroll, html.pdfedit-noscroll body { overflow: hidden; } .pdfedit-tool-card.is-max { background: #fff; } /* --- visual polish: SVG icon buttons + grouped toolbar --- */ .pdfedit-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d8dbe0; background: #fff; border-radius: 8px; padding: 7px 10px; cursor: pointer; font-size: 13px; line-height: 1; color: #3a4252; transition: background .12s, border-color .12s, color .12s, box-shadow .12s; } .pdfedit-btn:hover:not(:disabled) { background: #f7f8fa; border-color: #b3b9c4; color: #1f2533; } .pdfedit-btn:active:not(:disabled) { background: #eef0f4; } .pdfedit-ic { width: 16px; height: 16px; flex: 0 0 auto; display: block; } .pdfedit-btn-label { white-space: nowrap; } .pdfedit-btn-primary, .pdfedit-btn-primary:hover:not(:disabled) { background: var(--pdfedit-accent); border-color: var(--pdfedit-accent); color: #fff; } .pdfedit-btn-primary:hover:not(:disabled) { box-shadow: 0 1px 6px rgba(185,28,28,.35); } .pdfedit-btn.is-on { background: var(--pdfedit-accent); border-color: var(--pdfedit-accent); color: #fff; } .pdfedit-toolbar-sep { width: 1px; align-self: stretch; background: #e3e6eb; margin: 3px 3px; flex: 0 0 auto; } /* When the toolbar is cramped, drop labels to icon-only (keep the primary Download labeled). */ @media (max-width: 820px) { .pdfedit-toolbar-row .pdfedit-btn-label { display: none; } .pdfedit-toolbar-row .pdfedit-btn { padding: 8px; } .pdfedit-toolbar-row .pdfedit-btn-primary .pdfedit-btn-label { display: inline; } } /* mobile-only toggles must beat the new .pdfedit-btn display rule (same specificity -> use two classes). Without this they leaked onto desktop. */ .pdfedit-btn.pdfedit-only-mobile { display: none; } @media (max-width: 900px) { .pdfedit-btn.pdfedit-only-mobile { display: inline-flex; } } /* a touch tighter so the page-ops row fits on one line at typical widths */ .pdfedit-toolbar-row .pdfedit-btn { padding: 6px 9px; gap: 5px; } /* icon sizing for the small panel/thumb buttons (layers, align, move) */ .pdfedit-layer-acts button, .pdfedit-align button, .pdfedit-thumb-btn { display: inline-flex; align-items: center; justify-content: center; } .pdfedit-layer-acts .pdfedit-ic { width: 14px; height: 14px; } .pdfedit-align .pdfedit-ic, .pdfedit-thumb-btn .pdfedit-ic { width: 15px; height: 15px; } /* --- zoom + erase round --- */ .pdfedit-zoom-pct { align-self: center; font-size: 12px; color: #555; min-width: 38px; text-align: center; } /* Centered when it fits, scrollable from the very start when zoomed past the pane: flex centering clips the top/left of oversized children, margin:auto does not. */ .pdfedit-canvas-wrap { align-items: flex-start; justify-content: flex-start; padding: 12px; } .pdfedit-canvas-wrap > * { margin: auto; } /* while a long op runs, block thumb-level actions without re-rendering the rail */ .pdfedit-tool-card.is-busy .pdfedit-thumb-btn { pointer-events: none; opacity: .5; } .pdfedit-zoom-group { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }