.shrey-pdf-shell { --pdf-navy: #0A142B; --pdf-navy-2: #12244E; --pdf-red: #2E69EA; --pdf-ink: #0E1C3C; --pdf-muted: #505F7E; --pdf-line: #DDE1EA; --pdf-soft: #F2F5FB; max-width: 1180px; margin: 0 auto; padding: 18px 22px 74px; color: var(--pdf-ink); } /* * Document workspaces are moved directly under after a file is chosen. * Keep the tool palette available there instead of limiting it to the shell. */ .shrey-pdf-panel.is-document-mode { --pdf-navy: #0A142B; --pdf-navy-2: #12244E; --pdf-red: #2E69EA; --pdf-ink: #0E1C3C; --pdf-muted: #505F7E; --pdf-line: #DDE1EA; --pdf-soft: #F2F5FB; } .shrey-pdf-app { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 600px; overflow: hidden; border: 1px solid var(--pdf-line); border-radius: 22px; background: #fff; box-shadow: 0 24px 60px rgba(10, 20, 43, .1); } .shrey-pdf-nav { padding: 16px; background: linear-gradient(160deg, var(--pdf-navy), var(--pdf-navy-2)); } .shrey-pdf-nav button { display: grid; grid-template-columns: 30px 1fr; gap: 9px; align-items: center; width: 100%; padding: 14px 13px; border: 0; border-radius: 11px; background: transparent; color: rgba(255,255,255,.78); font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; } .shrey-pdf-nav button span { color: rgba(255,255,255,.45); font-size: 10px; letter-spacing: .08em; } .shrey-pdf-nav button:hover, .shrey-pdf-nav button:focus-visible { background: rgba(255,255,255,.08); color: #fff; } .shrey-pdf-nav button.is-active { background: #fff; color: var(--pdf-ink); box-shadow: 0 10px 24px rgba(0,0,0,.16); } .shrey-pdf-nav button.is-active span { color: var(--pdf-red); } .shrey-pdf-workspace { padding: clamp(28px, 5vw, 58px); background: #fff; } .shrey-pdf-panel { display: none; max-width: 760px; margin: 0 auto; } .shrey-pdf-panel.is-active { display: block; } .shrey-pdf-title { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; margin-bottom: 26px; } .shrey-pdf-title > span { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #F1F5FE; border-radius: 50%; background: #E9EFFD; color: var(--pdf-red); font-size: 11px; font-weight: 800; } .shrey-pdf-title h2 { margin: 0 0 5px; color: var(--pdf-ink); font-size: clamp(28px, 4vw, 40px); line-height: 1.05; letter-spacing: -.035em; } .shrey-pdf-title p { margin: 0; color: var(--pdf-muted); font-size: 15px; } .shrey-pdf-drop { display: grid; place-items: center; min-height: 186px; padding: 26px; border: 1.5px dashed #ABB5C9; border-radius: 16px; background: var(--pdf-soft); text-align: center; cursor: pointer; } .shrey-pdf-drop.is-dragging { border-color: var(--pdf-red); background: #E9EFFD; } .shrey-pdf-drop.is-invalid { border-color: #c7434c; background: #FAFBFD; box-shadow: 0 0 0 3px rgba(199, 67, 76, .1); } .shrey-pdf-drop > small { display: block; margin-top: 8px; color: #5B6882; font-size: 11px; } .shrey-pdf-drop-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 7px; border-radius: 50%; background: var(--pdf-navy); color: #fff; font-size: 25px; line-height: 1; } .shrey-pdf-drop strong { color: var(--pdf-ink); font-size: 16px; } .shrey-pdf-drop > span:last-of-type { color: var(--pdf-muted); font-size: 13px; } .shrey-pdf-drop input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .shrey-compress-panel .shrey-pdf-drop { min-height: 150px; } .shrey-compress-panel .shrey-pdf-drop input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0); white-space: nowrap; } .shrey-compress-panel .shrey-pdf-options { align-items: start; } .shrey-compression-control { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "control summary" "actions summary"; gap: 20px; } .shrey-compression-control > label, .shrey-compression-control > .shrey-compression-slider { grid-area: control; } .shrey-compression-slider { display: grid; gap: 10px; } .shrey-compression-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .shrey-compression-heading > strong { color: var(--pdf-ink); font-size: 13px; } .shrey-percentage-input { display: inline-flex; align-items: center; width: 78px; min-height: 38px; overflow: hidden; border: 1px solid var(--pdf-line); border-radius: 10px; background: #fff; box-shadow: 0 4px 12px rgba(10, 20, 43, .05); } .shrey-percentage-input input { width: 52px !important; min-height: 36px !important; padding: 7px 4px 7px 12px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--pdf-ink) !important; font-size: 14px !important; font-weight: 800 !important; text-align: right; outline: 0; } .shrey-percentage-input input::-webkit-inner-spin-button, .shrey-percentage-input input::-webkit-outer-spin-button { margin: 0; appearance: none; } .shrey-percentage-input b { padding-right: 11px; color: var(--pdf-red); font-size: 13px; } .shrey-compression-control .shrey-compress-summary { grid-area: summary; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; align-self: stretch; margin-top: 0; overflow: hidden; background: var(--pdf-soft); } .shrey-compression-control .shrey-compress-summary span { display: grid; align-content: center; gap: 5px; padding: 14px 16px; border-left: 1px solid var(--pdf-line); } .shrey-compression-control .shrey-compress-summary span:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--pdf-line); border-left: 0; } .shrey-compression-control .shrey-compress-summary span:nth-child(2) { border-left: 0; } .shrey-compression-control .shrey-compress-summary small { font-size: 9px; } .shrey-compression-control .shrey-compress-summary strong { font-size: 13px; } .shrey-compress-panel .shrey-pdf-actions { grid-area: actions; display: grid; grid-template-columns: 150px 150px; gap: 12px; min-height: 46px; margin-top: 0; } .shrey-compress-panel .shrey-pdf-run, .shrey-compress-panel .shrey-pdf-result, .shrey-compress-panel .shrey-pdf-download { width: 150px; } .shrey-compress-panel .shrey-pdf-result { min-height: 46px; } .shrey-compress-panel .shrey-pdf-result .shrey-pdf-download { justify-content: center; margin-right: 0; } .shrey-pdf-field { display: grid; gap: 8px; margin-top: 18px; color: var(--pdf-ink); font-size: 13px; font-weight: 800; } .shrey-pdf-field input, .shrey-pdf-field textarea, .shrey-pdf-options input, .shrey-pdf-options select { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--pdf-line); border-radius: 10px; background: #fff; color: var(--pdf-ink); font: inherit; } .shrey-pdf-field textarea { resize: vertical; } #pdf-sign-canvas { width: 100%; height: 150px; border: 1px solid var(--pdf-line); border-radius: 12px; background: #fff; touch-action: none; } .shrey-sign-workspace[hidden] { display: none !important; } .shrey-sign-panel.is-document-mode { position: fixed; inset: 0; z-index: 100000; display: block !important; width: 100%; max-width: none; min-height: 100vh; padding: 0; overflow: auto; border: 0; border-radius: 0; background: #F1F4FA; } .shrey-sign-panel.is-document-mode > .shrey-pdf-title, .shrey-sign-panel.is-document-mode > .shrey-pdf-drop { display: none; } .shrey-sign-workspace { min-height: 100vh; } .shrey-sign-toolbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding: 14px clamp(20px, 4vw, 64px); color: #fff; background: #0E1C3C; box-shadow: 0 10px 30px rgba(10, 20, 43, .12); } .shrey-sign-toolbar div { display: grid; gap: 2px; } .shrey-sign-toolbar span { color: #ABB5C9; font-size: 13px; } .shrey-sign-toolbar button { padding: 10px 15px; border: 1px solid rgba(255,255,255,.25); border-radius: 9px; color: #fff; background: transparent; font: inherit; font-weight: 700; cursor: pointer; } .shrey-sign-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 26px; width: min(1480px, calc(100% - 40px)); margin: 26px auto 100px; } .shrey-sign-pages { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); align-items: start; gap: 24px; } .shrey-sign-page { display: grid; gap: 10px; margin: 0; } .shrey-sign-page > strong { color: #505F7E; font-size: 13px; text-align: center; } .shrey-sign-sheet { position: relative; overflow: hidden; border: 1px solid #CFD5E0; border-radius: 8px; background: #fff; box-shadow: 0 14px 34px rgba(10, 20, 43, .1); cursor: crosshair; } .shrey-sign-sheet > img { display: block; width: 100%; height: auto; pointer-events: none; } .shrey-sign-editor { position: sticky; top: 88px; display: grid; gap: 16px; align-self: start; max-height: calc(100vh - 120px); padding: 20px; border: 1px solid #DAE2F2; border-radius: 16px; background: #fff; box-shadow: 0 16px 40px rgba(10, 20, 43, .09); overflow-y: auto; } .shrey-sign-methods { display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 10px; background: #F1F4FA; } .shrey-sign-methods button, .shrey-sign-fonts button { border: 0; border-radius: 8px; color: #47546E; background: transparent; font: inherit; font-weight: 700; cursor: pointer; } .shrey-sign-methods button { padding: 10px 8px; } .shrey-sign-methods button.is-active { color: #fff; background: #0E1C3C; } .shrey-sign-method { display: none; } .shrey-sign-method.is-active { display: grid; gap: 12px; } .shrey-sign-method label, .shrey-sign-clean, .shrey-sign-color { display: grid; gap: 7px; color: #0E1C3C; font-size: 13px; font-weight: 700; } .shrey-sign-method input[type="text"] { width: 100%; padding: 12px; border: 1px solid #CFD5E0; border-radius: 9px; font: inherit; } .shrey-sign-fonts { display: grid; gap: 6px; } .shrey-sign-fonts button { padding: 10px 12px; border: 1px solid #DDE1EA; font-size: 23px; font-weight: 400; line-height: 1.25; text-align: left; } .shrey-sign-fonts button:nth-child(1) { font-family: "Segoe Script", "Brush Script MT", cursive; } .shrey-sign-fonts button:nth-child(2) { font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 27px; font-style: italic; } .shrey-sign-fonts button:nth-child(3) { font-family: "Lucida Handwriting", "Segoe Script", cursive; font-size: 20px; } .shrey-sign-fonts button.is-active { border-color: #2E69EA; background: #E9EFFD; } .shrey-sign-upload { place-items: center; min-height: 110px; padding: 18px; border: 1px dashed #ABB5C9; border-radius: 12px; background: #FAFBFD; cursor: pointer; } .shrey-sign-upload span { color: #5B6882; font-weight: 500; } .shrey-sign-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; } .shrey-sign-preserve { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px !important; padding: 11px 12px; border: 1px solid #A6BAEA; border-radius: 10px; background: #F2F5FB; cursor: pointer; } .shrey-sign-preserve input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: #2E69EA; } .shrey-sign-preserve span { display: grid; gap: 2px; } .shrey-sign-preserve small { color: #505F7E; font-size: 11px; font-weight: 500; line-height: 1.35; } .shrey-sign-erase { padding-top: 4px; } .shrey-sign-erase[hidden] { display: none; } .shrey-sign-erase > summary { padding: 11px 13px; border: 1px solid #CFD5E0; border-radius: 9px; color: #0E1C3C; background: #F2F5FB; font-size: 13px; font-weight: 800; cursor: pointer; user-select: none; } .shrey-sign-erase[open] > summary { border-color: #7D8DAC; border-radius: 9px 9px 0 0; background: #E9EFFD; } .shrey-sign-erase-body { display: grid; gap: 10px; padding: 13px; border: 1px solid #CFD5E0; border-top: 0; border-radius: 0 0 9px 9px; } .shrey-sign-erase-heading { display: grid; gap: 2px; color: #0E1C3C; font-size: 13px; } .shrey-sign-erase-heading span { color: #505F7E; font-size: 12px; font-weight: 500; } .shrey-sign-erase-canvas-wrap { position: relative; overflow: hidden; border: 1px solid #ABB5C9; border-radius: 10px; background: #FAFBFD; } #pdf-sign-erase-canvas { display: block; width: 100%; max-height: 220px; background: transparent; cursor: none; touch-action: none; } #pdf-sign-erase-brush { position: absolute; z-index: 2; border: 2px solid #e94d5f; border-radius: 50%; background: rgba(255, 255, 255, .34); box-shadow: 0 0 0 1px rgba(14, 28, 60, .32), 0 2px 8px rgba(14, 28, 60, .18); pointer-events: none; transform: translate(-50%, -50%); } #pdf-sign-erase-brush[hidden] { display: none; } .shrey-sign-erase-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .shrey-sign-erase-actions button:disabled { cursor: not-allowed; opacity: .45; } .shrey-sign-preview { display: grid; place-items: center; min-height: 94px; padding: 12px; border: 1px solid #DDE1EA; border-radius: 11px; background: linear-gradient(45deg, #F1F4FA 25%, transparent 25%) 0 0 / 16px 16px, linear-gradient(-45deg, #F1F4FA 25%, transparent 25%) 0 8px / 16px 16px, #fff; } .shrey-sign-preview span { color: #5B6882; font-size: 12px; } .shrey-sign-preview img { display: none; max-width: 100%; max-height: 82px; } .shrey-sign-preview.has-signature span { display: none; } .shrey-sign-preview.has-signature img { display: block; } .shrey-sign-color { grid-template-columns: 1fr auto; align-items: center; } .shrey-sign-color input { width: 42px; height: 32px; padding: 2px; border: 1px solid #CFD5E0; border-radius: 8px; background: #fff; } .shrey-sign-help { margin: 0; color: #505F7E; font-size: 13px; line-height: 1.55; } .shrey-sign-placement { position: absolute; z-index: 5; min-width: 6px; box-sizing: border-box; padding: 0; border: 1px dashed #2E69EA; background: rgba(255,255,255,.18); cursor: move; touch-action: none; } .shrey-sign-placement img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; } .shrey-sign-placement .shrey-sign-remove { position: absolute; top: -17px; right: -17px; z-index: 8; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 3px solid #fff; border-radius: 50%; color: #fff !important; background: #2E69EA !important; box-shadow: 0 5px 14px rgba(46, 105, 234, .28); font: 800 25px/1 Arial, sans-serif !important; cursor: pointer; } .shrey-sign-placement .shrey-sign-remove::before, .shrey-sign-placement .shrey-sign-remove::after { display: none !important; content: none !important; } .shrey-sign-placement .shrey-sign-remove span { display: block; transform: translateY(-1px); } .shrey-sign-placement i[data-resize] { position: absolute; width: 15px; height: 15px; border: 2px solid #fff; border-radius: 3px; background: #2E69EA; } .shrey-sign-placement i[data-resize="nw"] { top: -7px; left: -7px; cursor: nwse-resize; } .shrey-sign-placement i[data-resize="ne"] { top: -7px; right: -7px; cursor: nesw-resize; } .shrey-sign-placement i[data-resize="sw"] { bottom: -7px; left: -7px; cursor: nesw-resize; } .shrey-sign-placement i[data-resize="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; } .shrey-sign-rotate { position: absolute; top: -37px; left: 50%; display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #0E1C3C; box-shadow: 0 5px 13px rgba(10, 20, 43, .22); font: 800 17px/1 sans-serif; cursor: grab; transform: translateX(-50%); } .shrey-sign-editor > .shrey-pdf-actions { display: flex; align-items: center; gap: 10px; margin: 2px 0 0; padding-top: 16px; border-top: 1px solid #DDE1EA; } .shrey-sign-editor > .shrey-pdf-actions .shrey-pdf-run { min-width: 0; } .shrey-sign-editor > .shrey-pdf-actions .shrey-pdf-run, .shrey-sign-editor > .shrey-pdf-actions .shrey-pdf-download { display: inline-flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; margin: 0; padding: 0 20px; border-radius: 10px; background: #2E69EA !important; color: #fff !important; box-shadow: 0 9px 22px rgba(46, 105, 234, .27); opacity: 1; white-space: nowrap; } .shrey-sign-editor > .shrey-pdf-actions .shrey-pdf-result:empty { display: none; } .shrey-sign-editor > .shrey-pdf-actions .shrey-pdf-result { flex: 1 1 0; margin: 0; } .shrey-sign-editor > .shrey-pdf-actions:has(.shrey-pdf-download) .shrey-pdf-run { display: none; } .shrey-sign-editor > .shrey-pdf-actions.has-signed-result { flex-direction: column; align-items: stretch; } .shrey-sign-editor > .shrey-pdf-actions.has-signed-result .shrey-pdf-run { display: inline-flex; order: 2; } .shrey-sign-editor > .shrey-pdf-actions.has-signed-result .shrey-pdf-result { order: 1; } @media (max-width: 900px) { .shrey-sign-layout { grid-template-columns: 1fr; width: min(100% - 24px, 720px); margin-top: 14px; } .shrey-sign-editor { position: relative; top: auto; grid-row: 1; } .shrey-sign-pages { grid-template-columns: 1fr; } .shrey-sign-editor { position: static; max-height: none; transform: none; overflow: visible; } .shrey-sign-editor > .shrey-pdf-actions .shrey-pdf-run, .shrey-sign-editor > .shrey-pdf-actions .shrey-pdf-result, .shrey-sign-editor > .shrey-pdf-actions .shrey-pdf-download { flex: 1 1 0; width: auto; } } /* PDF to JPG: clear primary actions and unmistakable follow-up choices. */ .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-run, .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-download { min-height: 52px; padding: 13px 18px; border-radius: 12px; font-size: 15px; font-weight: 800; line-height: 1.2; box-shadow: 0 10px 22px rgba(46, 105, 234, .18); } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-download { background: #0E1C3C !important; color: #fff !important; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-next { padding-top: 18px; border-top: 1px solid #DDE1EA; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-next .shrey-merge-followup-actions { gap: 9px; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-next .shrey-merge-followup-actions button { min-height: 48px; padding: 10px 12px; border: 1px solid #CFD5E0; border-radius: 10px; background: #FAFBFD; color: #0E1C3C; font-weight: 750; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-next .shrey-merge-followup-actions button:hover, .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-next .shrey-merge-followup-actions button:focus-visible { transform: translateY(-2px); border-color: #0E1C3C; background: #0E1C3C; color: #fff; box-shadow: 0 9px 20px rgba(14, 28, 60, .16); outline: none; } /* PDF to JPG uses the same document-workspace sidebar language as Merge & Organize. */ .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings { grid-column: 2; grid-row: 2 / 5; display: block; align-self: stretch; min-width: 0; margin: 0; padding: 24px 22px; overflow-y: auto; border: 0; border-left: 1px solid #CFD5E0; border-radius: 0; background: #fff; box-shadow: -12px 0 30px rgba(10, 20, 43, .07); z-index: 45; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings h3 { margin: 0 0 20px; color: #0E1C3C; font-size: 23px; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-options { display: grid; grid-template-columns: 1fr; gap: 15px; margin: 0; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-actions { position: static !important; display: grid; gap: 9px; width: 100%; margin: 22px 0 0 !important; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-result:not(:empty) { margin-top: 4px; padding: 12px; border: 1px solid #DAE2F2; border-radius: 12px; background: #F2F5FB; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-result:not(:empty)::before { min-height: 38px; padding: 8px 10px; border-radius: 9px; background: #fff; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-next:not([hidden]) { position: static; display: grid; gap: 9px; width: 100%; margin-top: 14px; padding: 12px; border: 1px solid #DAE2F2; border-radius: 12px; background: #F2F5FB; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-next > .shrey-merge-caption { display: none; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-next .shrey-merge-followup-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-next .shrey-merge-followup-actions button { min-height: 48px; padding: 10px 12px; border: 1px solid #DAE2F2; border-radius: 9px; background: #fff; color: #12244E; font-size: 13px; font-weight: 800; text-align: center; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-next .shrey-merge-followup-actions button:hover, .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-next .shrey-merge-followup-actions button:focus-visible { transform: translateY(-2px); border-color: #0E1C3C; background: #0E1C3C; color: #fff; box-shadow: 0 9px 20px rgba(14, 28, 60, .16); outline: none; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-add-files { display: flex; width: 100%; min-height: 42px; margin-top: 12px; padding: 0 12px; } .shrey-pdf-jpg-panel.is-document-mode > .shrey-pdf-drop { display: none; } .shrey-pdf-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; } .shrey-pdf-options-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .shrey-pdf-options label { display: grid; gap: 7px; color: var(--pdf-ink); font-size: 13px; font-weight: 800; } .shrey-pdf-options label small { color: var(--pdf-muted); font-size: 11px; font-weight: 500; line-height: 1.45; } .shrey-pdf-options output { float: right; color: var(--pdf-red); font-weight: 800; } .shrey-pdf-options input[type="range"] { width: 100%; min-height: 26px; padding: 0; border: 0; background: transparent; appearance: none; cursor: pointer; } .shrey-pdf-options input[type="range"]::-webkit-slider-runnable-track { height: 8px; border: 0; border-radius: 999px; background: linear-gradient(90deg, var(--pdf-red) 0 var(--compression-progress, 50%), #DDE1EA var(--compression-progress, 50%) 100%); box-shadow: inset 0 1px 2px rgba(10, 20, 43, .1); } .shrey-pdf-options input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -7px; border: 4px solid #fff; border-radius: 50%; background: var(--pdf-red); box-shadow: 0 3px 10px rgba(46, 105, 234, .35); appearance: none; } .shrey-pdf-options input[type="range"]::-moz-range-track { height: 8px; border: 0; border-radius: 999px; background: #DDE1EA; } .shrey-pdf-options input[type="range"]::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--pdf-red); } .shrey-pdf-options input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid #fff; border-radius: 50%; background: var(--pdf-red); box-shadow: 0 3px 10px rgba(46, 105, 234, .35); } .shrey-compress-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 16px; border: 1px solid var(--pdf-line); border-radius: 12px; background: #fff; } .shrey-compress-summary span { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 12px 14px; } .shrey-compress-summary small { color: var(--pdf-muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .shrey-compress-summary strong { overflow: hidden; color: var(--pdf-ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 699px) { .shrey-compression-control { grid-template-columns: 1fr; grid-template-areas: "control" "summary" "actions"; } .shrey-compress-summary { align-items: flex-start; flex-direction: column; gap: 0; } .shrey-compression-control .shrey-compress-summary { display: grid; grid-template-columns: 1fr; } .shrey-compression-control .shrey-compress-summary span, .shrey-compression-control .shrey-compress-summary span:first-child { grid-column: auto; width: 100%; border-bottom: 1px solid var(--pdf-line); border-left: 0; } .shrey-compression-control .shrey-compress-summary span:last-child { border-bottom: 0; } .shrey-compress-panel .shrey-pdf-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shrey-compress-panel .shrey-pdf-run, .shrey-compress-panel .shrey-pdf-result, .shrey-compress-panel .shrey-pdf-download { width: 100%; } } .shrey-pdf-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; } .shrey-pdf-run, .shrey-pdf-download, .shrey-pdf-minor { min-height: 46px; padding: 12px 21px; border: 0; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; } .shrey-pdf-run, .shrey-pdf-download { background: var(--pdf-red); color: #fff !important; box-shadow: 0 10px 22px rgba(46, 105, 234, .19); } .shrey-pdf-run:hover, .shrey-pdf-download:hover { background: #2E69EA; } .shrey-pdf-run:disabled { opacity: .55; cursor: wait; } .shrey-pdf-minor { margin-top: 12px; border: 1px solid var(--pdf-line); background: var(--pdf-soft); color: var(--pdf-ink); } .shrey-pdf-result { color: var(--pdf-muted); font-size: 13px; } .shrey-pdf-result.is-error { color: #2E69EA; } .shrey-pdf-result .shrey-pdf-download { display: inline-flex; align-items: center; margin-right: 10px; text-decoration: none; } .shrey-page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 16px; margin: 22px 0 6px; } .shrey-page-grid:empty { display: none; } .shrey-organizer-meta { display: none; } .shrey-organizer-panel.is-document-mode { position: fixed; inset: 0; z-index: 999999; box-sizing: border-box; width: 100vw; max-width: none; height: 100dvh; margin: 0; border: 0; border-radius: 0; display: grid; grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 0; overflow: hidden; padding: 0; background: #F1F4FA; box-shadow: none; } body.shrey-pdf-document-open { overflow: hidden; } .shrey-organizer-panel.is-document-mode.is-file-dragging { outline: 4px dashed var(--pdf-red); outline-offset: -14px; background: #E9EFFD; } .shrey-organizer-panel.is-document-mode.is-file-dragging::after { content: "Drop files to add them"; position: fixed; z-index: 12; left: 50%; top: 50%; translate: -50% -50%; padding: 16px 24px; border-radius: 14px; background: var(--pdf-ink); color: #fff; font-weight: 800; pointer-events: none; box-shadow: 0 16px 38px rgba(14, 28, 60, .25); } .shrey-organizer-panel.is-document-mode .shrey-pdf-title { grid-column: 1 / -1; margin: 0; padding: 18px min(390px, 31vw) 18px clamp(20px, 3vw, 52px); background: #0A142B; color: #fff; } .shrey-organizer-panel.is-document-mode .shrey-pdf-title > span { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #2E69EA; } .shrey-organizer-panel.is-document-mode .shrey-pdf-title h2, .shrey-organizer-panel.is-document-mode .shrey-pdf-title p { color: #fff; } .shrey-organizer-panel.is-document-mode .shrey-organizer-meta { position: fixed; top: 22px; right: clamp(20px, 3vw, 52px); bottom: auto; left: auto; z-index: 40; display: flex; align-items: center; gap: 12px; margin: 0; padding: 7px 8px 7px 14px; border-radius: 13px; background: #0A142B; color: #fff; box-shadow: 0 12px 30px rgba(10, 20, 43, .22); } .shrey-organizer-meta button { min-height: 42px; border: 1px solid rgba(255,255,255,.22); background: #fff; color: var(--pdf-ink); } .shrey-organizer-panel.is-document-mode #pdf-organize-close, .shrey-organizer-panel.is-document-mode #pdf-merge-close { position: static; padding: 0 17px; border: 1px solid #CFD5E0; border-radius: 11px; background: #fff; color: #0A142B; font-weight: 800; box-shadow: 0 10px 26px rgba(10, 20, 43, .16); } .shrey-organizer-panel.is-document-mode .shrey-pdf-drop { position: fixed; right: clamp(20px, 3vw, 52px); bottom: 82px; left: auto; z-index: 42; grid-column: auto; width: 52px; height: 52px; max-height: 52px; min-height: 52px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #2E69EA; color: #fff; overflow: hidden; box-shadow: 0 12px 30px rgba(46, 105, 234, .3); transform: none; } .shrey-organizer-panel.is-document-mode .shrey-pdf-drop::before { display: none; } .shrey-organizer-panel.is-document-mode .shrey-pdf-drop-icon { display: grid; width: 52px; height: 52px; place-items: center; font-size: 30px; line-height: 1; color: #fff; } .shrey-organizer-panel.is-document-mode .shrey-pdf-drop strong, .shrey-organizer-panel.is-document-mode .shrey-pdf-drop > span:not(.shrey-pdf-drop-icon) { display: none; } .shrey-organizer-panel.is-document-mode .shrey-pdf-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .shrey-organizer-panel.is-document-mode .shrey-page-grid { grid-column: 1; grid-template-columns: repeat(auto-fit, minmax(190px, 250px)); align-content: start; justify-content: center; gap: 18px; margin: 0; padding: 8px 20px 110px clamp(20px, 3vw, 52px); overflow: auto; } .shrey-merge-settings { display: none; } .shrey-merge-panel.is-document-mode .shrey-merge-settings { grid-column: 2; grid-row: 2 / 5; display: block; min-width: 0; margin: 0; padding: 24px 22px; overflow-y: auto; border-left: 1px solid #CFD5E0; background: #fff; box-shadow: -12px 0 30px rgba(10, 20, 43, .07); z-index: 45; } .shrey-merge-settings h3 { margin: 0 0 20px; color: #0E1C3C; font-size: 23px; } .shrey-merge-sort { padding: 10px; border: 1px solid #DAE2F2; border-radius: 12px; background: #F2F5FB; } .shrey-merge-sort > span { display: block; margin-bottom: 7px; color: #505F7E; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .shrey-merge-sort > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .shrey-merge-sort button { min-height: 34px; padding: 0 8px; border: 1px solid #A6BAEA; border-radius: 10px; background: #fff; color: #0E1C3C; font-weight: 800; } .shrey-merge-settings .shrey-pdf-options { display: grid; grid-template-columns: 1fr; gap: 15px; margin-top: 18px; } .shrey-merge-settings .shrey-pdf-actions { position: static !important; width: 100%; margin-top: 22px !important; } .shrey-merge-settings .shrey-pdf-run { width: 100%; } .shrey-merge-add-files { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 42px; margin-top: 12px; border: 1px solid #DAE2F2; border-radius: 10px; background: #fff; color: #0E1C3C; font-size: 13px; cursor: pointer; } .shrey-merge-add-files > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #2E69EA; color: #fff; font-size: 20px; font-weight: 500; line-height: 1; } .shrey-merge-panel.is-document-mode > .shrey-pdf-drop { display: none; } .shrey-merge-panel.is-document-mode > .shrey-pdf-actions { display: none; } .shrey-organizer-panel.is-document-mode .shrey-page-card { grid-template-rows: auto auto; align-self: start; padding: 10px; border: 1px solid #CFD5E0; border-radius: 14px; background: #fff; box-shadow: 0 10px 26px rgba(10, 20, 43, .08); } .shrey-organizer-panel.is-document-mode .shrey-page-card img { width: 100%; height: auto; min-height: 0; aspect-ratio: 1 / 1.414; object-fit: contain; background: #F2F5FB; cursor: zoom-in; } .shrey-organizer-panel.is-document-mode .shrey-page-label { padding: 8px 4px 2px; font-size: 14px; color: #183067; } .shrey-organizer-panel.is-document-mode .shrey-pdf-actions { position: absolute; right: clamp(20px, 3vw, 52px); bottom: 18px; z-index: 30; grid-column: 1 / -1; justify-content: flex-end; margin: 0; padding: 0; border: 0; background: transparent; } .shrey-organizer-panel.is-document-mode #pdf-organize-run, .shrey-organizer-panel.is-document-mode #pdf-organize-run:disabled, .shrey-organizer-panel.is-document-mode #pdf-merge-run, .shrey-organizer-panel.is-document-mode #pdf-merge-run:disabled { min-width: 156px; opacity: 1; background: #2E69EA; color: #fff !important; box-shadow: 0 12px 28px rgba(46, 105, 234, .28); } .shrey-merge-next { display: none; } .shrey-merge-panel.is-document-mode .shrey-merge-next:not([hidden]) { position: static; display: grid; gap: 9px; width: 100%; max-width: none; min-height: 0; margin-top: 14px; padding: 12px; overflow: visible; border: 1px solid #DAE2F2; border-radius: 12px; background: #F2F5FB; box-shadow: none; } .shrey-merge-next strong { display: flex; align-items: center; min-height: 38px; padding: 8px 10px; border-radius: 9px; background: #fff; color: #0E1C3C; font-size: 13px; line-height: 1.35; } .shrey-merge-next > .shrey-merge-caption { display: none; } .shrey-merge-next button { min-height: 36px; padding: 0 10px; border: 1px solid #DAE2F2; border-radius: 9px; background: #fff; color: #12244E; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .shrey-merge-download-slot { display: block; } .shrey-merge-followup-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .shrey-merge-download-slot .shrey-pdf-download { display: flex; width: 100%; min-height: 40px; margin: 0 !important; padding: 0 12px; border-radius: 9px; background: #2E69EA !important; color: #fff !important; box-shadow: 0 7px 18px rgba(46, 105, 234, .25); justify-content: center; white-space: nowrap; } .shrey-merge-download-slot .shrey-pdf-download:hover, .shrey-merge-download-slot .shrey-pdf-download:focus-visible { background: #2E69EA !important; } .shrey-jpg-settings { display: none; gap: 18px; } .shrey-jpg-settings h3 { margin: 0; color: var(--pdf-ink); font-size: 22px; } .shrey-pdf-jpg-settings { display: none; gap: 18px; } .shrey-pdf-jpg-settings h3 { margin: 0; color: var(--pdf-ink); font-size: 22px; } .shrey-jpg-panel.is-document-mode { grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto minmax(0, 1fr); } .shrey-jpg-panel.is-document-mode .shrey-page-grid { grid-column: 1; padding-right: 18px; } .shrey-jpg-panel.is-document-mode .shrey-jpg-settings { display: grid; grid-column: 2; grid-row: 2 / 5; align-self: start; align-content: start; gap: 16px; height: 100%; margin: 0; padding: 24px 22px; overflow-y: auto; border: 0; border-left: 1px solid #CFD5E0; border-radius: 0; background: #fff; box-shadow: -12px 0 30px rgba(10, 20, 43, .07); z-index: 45; } .shrey-jpg-panel.is-document-mode #jpg-pdf-close, .shrey-pdf-jpg-panel.is-document-mode #pdf-jpg-close { display: inline-flex; align-items: center; justify-content: center; min-width: 132px; padding: 0 17px; border: 1px solid #CFD5E0; border-radius: 10px; background: #fff; color: #0A142B; font-size: 13px; font-weight: 800; opacity: 1; } .shrey-jpg-panel.is-document-mode .shrey-jpg-settings, .shrey-jpg-panel.is-document-mode .shrey-jpg-settings h3, .shrey-jpg-panel.is-document-mode .shrey-jpg-settings label, .shrey-jpg-panel.is-document-mode .shrey-jpg-settings label > span { color: #0A142B; opacity: 1; } .shrey-jpg-panel.is-document-mode .shrey-jpg-settings select { border-color: #CFD5E0; background-color: #fff; color: #0A142B; opacity: 1; } .shrey-jpg-panel.is-document-mode .shrey-jpg-settings .shrey-pdf-run { min-height: 48px; border: 0; background: #2E69EA; color: #fff; font-weight: 800; opacity: 1; box-shadow: 0 12px 26px rgba(46, 105, 234, .24); } .shrey-jpg-sort { display: grid; gap: 7px; padding: 10px; border: 1px solid #DAE2F2; border-radius: 12px; background: #F2F5FB; } .shrey-jpg-sort > span { color: #505F7E; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .shrey-jpg-sort > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .shrey-jpg-sort button { min-height: 34px; border: 1px solid #CFD5E0; border-radius: 9px; background: #fff; color: #0A142B; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; } .shrey-jpg-sort button:hover, .shrey-jpg-sort button:focus-visible { border-color: #2E69EA; color: #2E69EA; } .shrey-jpg-next { display: grid; gap: 9px; margin-top: 0; padding: 12px; border: 1px solid #DAE2F2; border-radius: 12px; background: #F2F5FB; } .shrey-jpg-next[hidden] { display: none; } .shrey-jpg-output { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 0; background: transparent; } .shrey-jpg-output strong { display: flex; min-height: 38px; padding: 8px 10px; align-items: center; border-radius: 9px; background: #fff; color: #0E1C3C; font-size: 13px; line-height: 1.35; } .shrey-jpg-output .shrey-pdf-download { display: flex; width: 100%; min-height: 38px; padding: 0 14px; border-radius: 8px; background: #2E69EA; color: #fff; font-size: 12px; font-weight: 800; align-items: center; justify-content: center; text-decoration: none; } .shrey-jpg-next-label { display: none; } .shrey-jpg-next-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .shrey-jpg-next-actions button { min-height: 40px; padding: 8px; border: 1px solid #CFD5E0; border-radius: 9px; background: #F2F5FB; color: #0A142B; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; } .shrey-jpg-next-actions button:hover, .shrey-jpg-next-actions button:focus-visible { border-color: #0A142B; background: #0A142B; color: #fff; } .shrey-jpg-panel.is-document-mode .shrey-jpg-settings .shrey-pdf-options { grid-template-columns: 1fr; gap: 15px; margin: 0; } .shrey-jpg-panel.is-document-mode .shrey-jpg-settings .shrey-pdf-actions { position: static; width: 100%; margin: 0; } .shrey-jpg-panel.is-document-mode .shrey-jpg-settings .shrey-pdf-run, .shrey-jpg-panel.is-document-mode .shrey-jpg-settings .shrey-pdf-download { width: 100%; justify-content: center; } .shrey-jpg-add-files { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 42px; margin-top: 0; border: 1px solid #DAE2F2; border-radius: 10px; background: #fff; color: #0E1C3C; font-size: 13px; cursor: pointer; } .shrey-jpg-add-files > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #2E69EA; color: #fff; font-size: 20px; font-weight: 500; line-height: 1; } .shrey-jpg-panel.is-document-mode > .shrey-pdf-drop { display: none; } .shrey-pdf-jpg-panel.is-document-mode { grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto minmax(0, 1fr); } .shrey-pdf-jpg-panel.is-document-mode .shrey-page-grid { grid-column: 1; padding-right: 18px; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings { display: grid; gap: 18px; grid-column: 2; grid-row: 2; align-self: start; margin: 8px 28px 24px 0; padding: 24px; border: 1px solid #CFD5E0; border-radius: 16px; background: #fff; box-shadow: 0 16px 38px rgba(10, 20, 43, .1); } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings h3 { margin: 0; font-size: 24px; line-height: 1.15; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-options { grid-template-columns: 1fr; margin: 0; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-actions { position: static !important; display: grid; gap: 10px; width: 100%; margin: 0; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-options label { gap: 10px; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-options select { min-height: 48px; border: 1px solid #CFD5E0; border-radius: 10px; background-color: #fff; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-run, .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-download { display: inline-flex !important; min-height: 46px; width: 100%; margin: 0; border: 0; border-radius: 10px; background: #2E69EA !important; background-image: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 14px; font-weight: 800; line-height: 1.2; justify-content: center; align-items: center; text-align: center; text-decoration: none !important; opacity: 1 !important; visibility: visible !important; filter: none !important; box-shadow: 0 10px 22px rgba(46, 105, 234, .2); } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-result:empty { display: none; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-result { display: grid; gap: 10px; margin: 0; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-result:not(:empty) { padding: 12px; border: 1px solid #DAE2F2; border-radius: 12px; background: #F2F5FB; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-result:not(:empty)::before { content: attr(data-output-label) " · " attr(data-output-size); display: block; padding: 2px 2px 8px; color: #0E1C3C; font-size: 13px; font-weight: 800; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-drop { right: 388px; } .shrey-pdf-jpg-next { display: grid; grid-template-columns: 1fr; gap: 8px; padding-top: 14px; border-top: 1px solid var(--pdf-line); } .shrey-pdf-jpg-next[hidden] { display: none; } .shrey-pdf-jpg-next span { grid-column: 1 / -1; color: #505F7E; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .shrey-pdf-jpg-next button { min-height: 38px; padding: 8px 12px; border: 1px solid #CFD5E0; border-radius: 9px; background: #F2F5FB; color: var(--pdf-ink); font: inherit; font-size: 13px; font-weight: 800; text-align: left; cursor: pointer; } .shrey-pdf-jpg-next button:hover { border-color: var(--pdf-red); background: #FAFBFD; } .shrey-pdf-jpg-add-files { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 9px; padding: 9px 14px; border: 1px solid #CFD5E0; border-radius: 10px; background: #fff; color: #0E1C3C; cursor: pointer; } .shrey-pdf-jpg-add-files span { display: inline-grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #2E69EA; color: #fff; font-size: 18px; line-height: 1; } .shrey-pdf-jpg-add-files strong { font-size: 13px; font-weight: 800; } .shrey-pdf-jpg-add-files:hover { border-color: #2E69EA; background: #FAFBFD; } /* Initial upload screens stay focused. Tool options belong to the document workspace. */ .shrey-pdf-jpg-panel:not(.is-document-mode) .shrey-pdf-jpg-settings, .shrey-jpg-panel:not(.is-document-mode) .shrey-jpg-settings { display: none !important; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings, .shrey-jpg-panel.is-document-mode .shrey-jpg-settings { display: grid !important; } @media (max-width: 900px) { .shrey-organizer-panel.is-document-mode { grid-template-columns: minmax(0, 1fr) 280px; } .shrey-merge-panel.is-document-mode .shrey-merge-settings { padding: 18px 14px; } .shrey-jpg-panel.is-document-mode { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); } .shrey-jpg-panel.is-document-mode .shrey-jpg-settings { position: static; grid-column: 1; grid-row: 2; margin: 12px; } .shrey-jpg-panel.is-document-mode .shrey-page-grid { grid-column: 1; grid-row: 3; padding-right: 12px; } .shrey-jpg-panel.is-document-mode .shrey-pdf-drop { right: 12px; } .shrey-pdf-jpg-panel.is-document-mode { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings { position: static; grid-column: 1; grid-row: 2; margin: 12px; } .shrey-pdf-jpg-panel.is-document-mode .shrey-page-grid { grid-column: 1; grid-row: 3; padding-right: 12px; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-drop { right: 12px; } } .shrey-merge-next button:hover, .shrey-merge-next button:focus-visible { border-color: #0E1C3C; background: #0E1C3C; color: #fff; } .shrey-page-preview { width: min(92vw, 1040px); max-width: none; height: min(92vh, 1100px); padding: 0; border: 0; border-radius: 18px; background: #E5EBF6; box-shadow: 0 28px 80px rgba(7, 14, 29, .35); } .shrey-page-preview::backdrop { background: rgba(7, 14, 29, .78); } .shrey-page-preview-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px; background: #0E1C3C; color: #fff; } .shrey-page-preview-bar button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #0E1C3C; font-size: 24px; cursor: pointer; } .shrey-page-preview-controls { display: flex; align-items: center; gap: 7px; } .shrey-page-preview-controls output { min-width: 46px; color: #fff; font-size: 12px; font-weight: 800; text-align: center; } .shrey-page-preview-controls button[data-preview-zoom="fit"] { width: auto; padding: 0 13px; border-radius: 999px; font-size: 12px; font-weight: 800; } .shrey-page-preview-stage { height: calc(100% - 64px); overflow: auto; padding: 20px; text-align: center; } .shrey-page-preview-stage > img { display: block; width: auto; max-width: 100%; max-height: 100%; margin: 0 auto; object-fit: contain; background: #fff; box-shadow: 0 10px 28px rgba(10, 20, 43, .14); transform-origin: top center; } .shrey-page-preview.is-zoomed .shrey-page-preview-stage > img { width: calc(var(--preview-zoom, 1) * 100%); max-width: none; max-height: none; } .shrey-page-preview.is-rendering .shrey-page-preview-stage { cursor: progress; } .shrey-page-preview.is-rendering .shrey-page-preview-stage > img { opacity: .6; } .shrey-page-card { position: relative; display: grid; grid-template-rows: 176px auto; gap: 10px; min-width: 0; padding: 12px; border: 1px solid #DAE2F2; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px rgba(10, 20, 43, .08); cursor: grab; transition: border-color .18s ease, transform .18s ease, opacity .18s ease; } .shrey-page-card:hover { border-color: #2E69EA; transform: translateY(-2px); } .shrey-page-card.is-dragging { opacity: .42; cursor: grabbing; } .shrey-page-card.is-selected { border-color: #2E69EA; background: #E9EFFD; box-shadow: 0 0 0 3px rgba(46, 105, 234, .18), 0 10px 24px rgba(10, 20, 43, .08); } .shrey-page-card img { width: 100%; height: 176px; object-fit: contain; border-radius: 8px; background: #F1F4FA; transition: transform .2s ease; } .shrey-page-label { overflow: hidden; color: #505F7E; font-size: 12px; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .shrey-page-actions { position: absolute; top: 7px; right: 7px; display: flex; gap: 5px; } .shrey-page-actions button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid #DDE1EA; border-radius: 50%; background: #fff; color: #0E1C3C; box-shadow: 0 4px 12px rgba(10, 20, 43, .12); font-size: 18px; line-height: 1; cursor: pointer; } .shrey-page-actions button:hover, .shrey-page-actions button:focus-visible { border-color: #2E69EA; background: #2E69EA; color: #fff; } .shrey-page-actions [data-page-action="select"][aria-pressed="true"] { border-color: #2E69EA; background: #2E69EA; color: #fff; } .shrey-page-batch-toolbar { display: none; } .shrey-organizer-panel.is-document-mode .shrey-page-batch-toolbar { position: fixed; z-index: 35; bottom: 18px; left: clamp(20px, 3vw, 52px); display: flex; align-items: center; gap: 8px; max-width: min(760px, calc(100vw - 440px)); padding: 8px; border: 1px solid #A6BAEA; border-radius: 13px; background: rgba(255, 255, 255, .96); box-shadow: 0 12px 28px rgba(10, 20, 43, .16); backdrop-filter: blur(10px); } .shrey-page-batch-toolbar strong { padding: 0 8px; color: #12244E; font-size: 13px; white-space: nowrap; } .shrey-page-batch-toolbar button { min-height: 34px; padding: 0 11px; border: 1px solid #A6BAEA; border-radius: 9px; background: #fff; color: #0E1C3C; font: inherit; font-size: 12px; font-weight: 800; white-space: nowrap; } .shrey-page-batch-toolbar [data-page-batch="remove"] { border-color: #d8a5aa; color: #a02f3a; } .shrey-page-batch-toolbar button:disabled { cursor: not-allowed; opacity: .48; } .shrey-pdf-noscript { padding: 18px; border: 1px solid #F1F5FE; color: #2E69EA; } @media (max-width: 860px) { .shrey-pdf-shell { padding: 12px 14px 52px; } .shrey-pdf-app { display: block; min-height: 0; border-radius: 17px; } .shrey-pdf-nav { display: flex; gap: 8px; overflow-x: auto; padding: 11px; scrollbar-width: thin; } .shrey-pdf-nav button { grid-template-columns: 22px max-content; width: auto; flex: 0 0 auto; padding: 11px 13px; } .shrey-pdf-workspace { padding: 28px 18px 34px; } } @media (max-width: 600px) { .shrey-pdf-title { grid-template-columns: 40px 1fr; gap: 11px; } .shrey-pdf-title > span { width: 38px; height: 38px; } .shrey-pdf-options, .shrey-pdf-options-three { grid-template-columns: 1fr; } .shrey-pdf-drop { min-height: 155px; } .shrey-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .shrey-page-card { grid-template-rows: 140px auto; } .shrey-page-card img { height: 140px; } .shrey-organizer-panel.is-document-mode { grid-template-columns: 1fr; grid-template-rows: auto auto auto minmax(0, 1fr) auto; padding: 0; } .shrey-organizer-panel.is-document-mode .shrey-pdf-title, .shrey-organizer-panel.is-document-mode .shrey-organizer-meta { position: static; grid-column: 1; margin: 0; padding: 14px 16px; } .shrey-organizer-panel.is-document-mode .shrey-organizer-meta { position: fixed; top: 12px; right: 12px; bottom: auto; left: auto; z-index: 40; justify-content: flex-start; padding: 6px 7px 6px 12px; } .shrey-organizer-panel.is-document-mode #pdf-organize-close, .shrey-organizer-panel.is-document-mode #pdf-merge-close { position: static; } .shrey-organizer-panel.is-document-mode .shrey-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 6px 12px 96px; } .shrey-organizer-panel.is-document-mode .shrey-page-batch-toolbar { right: 12px; bottom: 14px; left: 12px; justify-content: center; max-width: none; overflow-x: auto; } .shrey-organizer-panel.is-document-mode .shrey-page-card { grid-template-rows: auto auto; padding: 9px; } .shrey-organizer-panel.is-document-mode .shrey-page-card img { min-height: 0; } .shrey-organizer-panel.is-document-mode .shrey-pdf-drop { right: 12px; bottom: 72px; left: auto; width: 48px; height: 48px; max-height: 48px; min-height: 48px; margin: 0; transform: none; } .shrey-organizer-panel.is-document-mode .shrey-pdf-drop-icon { width: 48px; height: 48px; } .shrey-organizer-panel.is-document-mode .shrey-pdf-actions { right: 12px; bottom: 12px; } .shrey-merge-panel.is-document-mode .shrey-merge-next:not([hidden]) { right: 12px; bottom: 72px; left: 12px; max-width: calc(100vw - 24px); overflow-x: auto; } .shrey-merge-next > .shrey-merge-caption { display: none; } .shrey-merge-panel.is-document-mode:has(.shrey-merge-next:not([hidden])) .shrey-pdf-drop { bottom: 132px; } } /* Keep the completed-document controls inside the settings rail. */ .shrey-merge-panel.is-document-mode .shrey-merge-settings .shrey-merge-next:not([hidden]) { position: static !important; inset: auto !important; display: grid; width: 100%; max-width: none; margin-top: 14px; overflow: visible; transform: none !important; } .shrey-merge-panel.is-document-mode:has(.shrey-merge-next:not([hidden])) .shrey-pdf-drop { bottom: 72px; } @media (max-width: 760px) { .shrey-merge-sort { padding: 9px; } .shrey-merge-sort button { min-height: 32px; } .shrey-merge-followup-actions { grid-template-columns: 1fr; } } /* Release 2.3.5: use the Merge/JPG-to-PDF settings system without the old floating action alignment or a second independent visual treatment. */ .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings { display: flex !important; width: 340px !important; min-width: 340px !important; height: 100% !important; margin: 0 !important; padding: 24px 22px !important; flex-direction: column !important; align-items: stretch !important; align-self: stretch !important; gap: 18px !important; overflow-x: hidden !important; border: 0 !important; border-left: 1px solid #CFD5E0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: -12px 0 30px rgba(10, 20, 43, .07) !important; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings h3 { width: 100% !important; margin: 0 !important; font-size: 23px !important; } .shrey-pdf-jpg-panel.is-document-mode .shrey-jpg-export-summary { width: 100% !important; margin: 0 !important; } .shrey-pdf-jpg-panel.is-document-mode .shrey-jpg-export-summary > div { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .shrey-pdf-jpg-panel.is-document-mode .shrey-jpg-export-summary strong { display: flex; min-height: 34px; padding: 6px 8px; align-items: center; justify-content: center; border: 1px solid #DAE2F2; border-radius: 9px; color: #0E1C3C; background: #fff; font-size: 11px; text-align: center; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-options, .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-options label, .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-actions, .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-result, .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-merge-add-files { position: static !important; display: flex !important; width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; align-self: stretch !important; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-options label { flex-direction: column !important; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings #pdf-jpg-run, .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-download { display: flex !important; width: 100% !important; max-width: none !important; min-height: 50px !important; margin: 0 !important; padding: 12px 16px !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-result:empty { display: none !important; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-jpg-next:not([hidden]) { display: grid !important; width: 100% !important; margin: 0 !important; } @media (max-width: 760px) { .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings { width: 100% !important; min-width: 0 !important; height: auto !important; border-top: 1px solid #CFD5E0 !important; border-left: 0 !important; } } /* Editorial PDF tools workspace */ .shrey-managed-page:has(.shrey-pdf-shell) { padding: 48px 24px 72px; background: #E5EBF6; } .shrey-pdf-shell { --pdf-navy: #0E1C3C; --pdf-navy-2: #12244E; --pdf-red: #134BC3; --pdf-gold: #B28D47; --pdf-ink: #0E1C3C; --pdf-muted: #505F7E; --pdf-line: #CFD5E0; --pdf-soft: #E9EFFD; max-width: 1240px; padding: 0; } .shrey-pdf-app { grid-template-columns: 260px minmax(0, 1fr); min-height: 620px; border-color: #CFD5E0; border-radius: 24px; background: #FAFBFD; box-shadow: 0 24px 64px rgba(10, 20, 43, .10); } .shrey-pdf-nav { display: flex; flex-direction: column; gap: 4px; padding: 34px 20px; background: linear-gradient(165deg, #0E1C3C, #0A142B); } .shrey-pdf-nav::before { margin: 0 14px 20px; color: #DBBC80; content: "PDF TOOLS"; font-size: 10px; font-weight: 800; letter-spacing: .18em; } .shrey-pdf-nav button { min-height: 58px; padding: 12px 14px; border: 1px solid transparent; border-radius: 12px; color: rgba(255, 255, 255, .72); transition: color .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease; } .shrey-pdf-nav button span { color: #779EF2; } .shrey-pdf-nav button:hover, .shrey-pdf-nav button:focus-visible { color: #ffffff; border-color: rgba(119, 158, 242, .20); background: rgba(119, 158, 242, .08); outline: none; } .shrey-pdf-nav button.is-active { color: #ffffff; border-color: rgba(219, 188, 128, .36); background: #12244E; box-shadow: inset 3px 0 #C9A45C; } .shrey-pdf-nav button.is-active span { color: #DBBC80; } .shrey-pdf-workspace { padding: 52px 56px; background: linear-gradient(180deg, #ffffff, #FAFBFD); } .shrey-pdf-title { grid-template-columns: 42px 1fr; gap: 18px; margin-bottom: 30px; padding: 0 0 22px 18px; border-bottom: 1px solid #DDE1EA; border-left: 3px solid var(--pdf-gold); } .shrey-pdf-title > span { width: 38px; height: 38px; border-color: #F1F5FE; color: #103FA3; background: #E9EFFD; } .shrey-pdf-title h2 { font-size: clamp(30px, 3.2vw, 42px); letter-spacing: -.04em; } .shrey-pdf-title p { margin-top: 7px; color: var(--pdf-muted); font-size: 14px; } .shrey-pdf-drop { min-height: 190px; border-color: #ABB5C9; border-radius: 16px; background: linear-gradient(145deg, #E9EFFD, #E9EFFD); transition: border-color .18s ease, background-color .18s ease; } .shrey-pdf-drop:hover, .shrey-pdf-drop:focus-within { border-color: #134BC3; background: #E9EFFD; } .shrey-pdf-drop-icon { width: 46px; height: 46px; color: #0E1C3C; background: #DBBC80; box-shadow: 0 8px 18px rgba(14, 28, 60, .12); } .shrey-pdf-options, .shrey-date-entry, .shrey-compress-summary { border-color: #CFD5E0; background: #E9EFFD; } .shrey-pdf-run, .shrey-pdf-download, .shrey-pdf-minor { min-height: 46px; border-radius: 10px; transition: color .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease; } .shrey-pdf-run, .shrey-pdf-download { background: #134BC3; box-shadow: 0 9px 20px rgba(19, 75, 195, .18); } .shrey-pdf-run:hover, .shrey-pdf-run:focus-visible, .shrey-pdf-download:hover, .shrey-pdf-download:focus-visible { color: #ffffff; background: #103FA3; box-shadow: inset 0 0 0 1px rgba(219, 188, 128, .42), 0 9px 20px rgba(19, 75, 195, .22); outline: none; } .shrey-percentage-input { border-color: #CFD5E0; box-shadow: none; } .shrey-percentage-input b { color: #103FA3; } input[type="range"] { accent-color: #134BC3; } @media (max-width: 860px) { .shrey-managed-page:has(.shrey-pdf-shell) { padding: 18px 10px 42px; } .shrey-pdf-app { min-height: 0; border-radius: 18px; } .shrey-pdf-nav { flex-direction: row; padding: 10px; gap: 7px; background: #0E1C3C; } .shrey-pdf-nav::before { display: none; } .shrey-pdf-nav button { min-height: 46px; padding: 10px 14px; } .shrey-pdf-nav button.is-active { box-shadow: inset 0 -2px #DBBC80; } .shrey-pdf-workspace { padding: 28px 16px 34px; } .shrey-pdf-title { margin-bottom: 22px; padding: 0 0 16px 13px; } .shrey-pdf-drop { min-height: 165px; } .shrey-pdf-nav { scrollbar-width: none; } .shrey-pdf-nav::-webkit-scrollbar { display: none; } } /* Release 2.3.15: selected-page export and clearer JPG result actions. */ .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings { width: 360px !important; min-width: 360px !important; padding: 22px 20px !important; gap: 14px !important; } .shrey-pdf-jpg-panel.is-document-mode .shrey-jpg-export-summary { display: grid !important; gap: 7px !important; padding: 14px !important; border: 1px solid #DAE2F2 !important; border-radius: 12px !important; background: linear-gradient(145deg, #FAFBFD, #E9EFFD) !important; } .shrey-pdf-jpg-panel.is-document-mode .shrey-jpg-export-summary > span { color: #505F7E; font-size: 10px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; } .shrey-pdf-jpg-panel.is-document-mode .shrey-jpg-export-summary > strong { display: block; color: #0E1C3C; font-size: 17px; line-height: 1.25; } .shrey-pdf-jpg-panel.is-document-mode .shrey-jpg-export-summary > small { color: #505F7E; font-size: 12px; line-height: 1.45; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-options { padding: 14px !important; border: 1px solid #DAE2F2; border-radius: 12px; background: #fff; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-result:not(:empty) { display: grid !important; gap: 10px !important; padding: 14px !important; border-color: #BED1F9 !important; background: #E9EFFD !important; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-download { background: #2E69EA !important; color: #fff !important; text-decoration: none !important; } .shrey-pdf-jpg-downloads, .shrey-pdf-jpg-next { width: 100%; } .shrey-pdf-jpg-downloads > summary, .shrey-pdf-jpg-next > summary { padding: 11px 12px; border: 1px solid #DAE2F2; border-radius: 9px; color: #0E1C3C; background: #fff; font-size: 12px; font-weight: 800; cursor: pointer; user-select: none; } .shrey-pdf-jpg-downloads[open] > summary, .shrey-pdf-jpg-next[open] > summary { border-radius: 9px 9px 0 0; background: #E9EFFD; } .shrey-pdf-jpg-download-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 190px; padding: 9px; overflow-y: auto; border: 1px solid #DAE2F2; border-top: 0; border-radius: 0 0 9px 9px; background: #fff; } .shrey-pdf-jpg-download-list a { display: grid; place-items: center; min-height: 36px; padding: 7px; border: 1px solid #DAE2F2; border-radius: 8px; color: #0E1C3C; background: #FAFBFD; font-size: 12px; font-weight: 800; text-decoration: none; } .shrey-pdf-jpg-download-list a:hover, .shrey-pdf-jpg-download-list a:focus-visible { border-color: #2E69EA; color: #fff; background: #2E69EA; outline: none; } .shrey-pdf-jpg-followups { margin-top: 0; padding: 9px; border: 1px solid #DAE2F2; border-top: 0; border-radius: 0 0 9px 9px; background: #FAFBFD; } .shrey-pdf-jpg-next:not([open]) > .shrey-pdf-jpg-followups { display: none !important; } .shrey-pdf-jpg-next[open] > .shrey-pdf-jpg-followups { display: grid !important; } @media (max-width: 760px) { .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings { width: 100% !important; min-width: 0 !important; } } /* PDF to JPG: full-width primary actions with an obvious interactive state. */ .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-actions, .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-result, .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-result:not(:empty) { width: 100%; max-width: none; box-sizing: border-box; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings #pdf-jpg-run, .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-download { display: flex !important; width: 100% !important; max-width: none !important; min-height: 50px; padding: 12px 16px; margin: 0 !important; box-sizing: border-box; border-radius: 10px; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings #pdf-jpg-run:hover, .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings #pdf-jpg-run:focus-visible, .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-download:hover, .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-download:focus-visible { transform: translateY(-2px); background: #2E69EA !important; box-shadow: 0 14px 28px rgba(46, 105, 234, .3); } /* Release 2.3.3: keep PDF-to-JPG visually identical to the other document workspaces and replace the old oversized floating settings card. */ .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings { display: grid; grid-column: 2; grid-row: 2 / 5; align-self: stretch; align-content: start; gap: 16px; width: auto; height: 100%; margin: 0; padding: 24px 22px; overflow-y: auto; border: 0; border-left: 1px solid #CFD5E0; border-radius: 0; background: #fff; box-shadow: -12px 0 30px rgba(10, 20, 43, .07); } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings h3 { margin: 0 0 4px; color: #0E1C3C; font-size: 23px; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings .shrey-pdf-actions { margin-top: 6px; } .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-next:not([hidden]) { position: static !important; inset: auto !important; width: 100%; max-width: none; margin-top: 4px; transform: none !important; } .shrey-sign-rotate { top: -34px; width: 30px; height: 30px; border: 2px solid #fff; color: #0E1C3C; background: #fff; box-shadow: 0 5px 16px rgba(10, 20, 43, .2); font: 700 18px/1 Arial, sans-serif; } .shrey-sign-rotate > span { display: block; transform: translateY(-1px); } .shrey-sign-rotate:active { cursor: grabbing; } @media (max-width: 760px) { .shrey-pdf-jpg-panel.is-document-mode .shrey-pdf-jpg-settings { grid-column: 1; grid-row: auto; height: auto; border-top: 1px solid #CFD5E0; border-left: 0; } }