/* ══════════════════════════════════════════════════════════════════ * WP E-Newspaper Pro — Clip & Share v6 * Box: position:fixed (direct child of ) * Scroll fix: JS wireScrollAnchor() re-applies stored viewport coords * on every scroll/resize event (compensates for themes with * CSS transforms that break native position:fixed) * ══════════════════════════════════════════════════════════════════ */ /* During drag: prevent text selection + touch scroll. NO overflow:hidden * because that resets scrollTop and makes the box appear to jump. */ body.wenp-dragging { user-select: none; touch-action: none; } /* ── Nav buttons ──────────────────────────────────────────────── */ .wenp-clip-btn { background: #7c3aed; color: #fff !important; border: none; padding: 6px 14px; border-radius: 6px; font-size: .8rem; font-weight: 700; cursor: pointer; transition: background .2s, box-shadow .2s; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .wenp-clip-btn:hover { background: #5b21b6; } .wenp-clip-btn.is-active { background: #5b21b6; box-shadow: 0 0 0 3px rgba(124, 58, 237, .4); } .wenp-pdf-download { background: #16a34a; color: #fff !important; border: none; padding: 6px 14px; border-radius: 6px; font-size: .8rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; transition: background .2s; white-space: nowrap; } .wenp-pdf-download:hover { background: #15803d; color: #fff !important; } /* ── Dim overlay (pointer-events none — nav stays clickable) ────── */ .wenp-clip-wrapper { display: none; position: fixed; inset: 0; z-index: 8800; background: rgba(0, 0, 0, .42); pointer-events: none; /* Let clicks pass through to nav */ } .wenp-clip-wrapper.is-active { display: block; } /* ══════════════════════════════════════════════════════════════════ * SELECTION BOX (position:fixed, direct child of body) * ══════════════════════════════════════════════════════════════════ */ .wenp-clip-box { display: none; position: fixed; /* viewport-relative — no scroll math needed */ z-index: 9200; border: 2px solid #7c3aed; background: rgba(124, 58, 237, .07); box-sizing: border-box; box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); pointer-events: auto; /* always receive pointer events */ touch-action: none; /* prevent page scroll interfering with drag */ } .wenp-clip-box.is-active { display: block; } /* Move-area covers the inner region — leave 14 px for handles on each edge */ .wenp-clip-move-area { position: absolute; inset: 14px; cursor: move; z-index: 1; touch-action: none; } /* ── Hint label ───────────────────────────────────────────────── */ .wenp-clip-hint { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, .65); color: #fff; font-size: .7rem; padding: 2px 10px; border-radius: 20px; white-space: nowrap; pointer-events: none; z-index: 2; } /* ── 8 resize handles ─────────────────────────────────────────── */ .wenp-ch { position: absolute; width: 20px; /* larger for easy touch tapping */ height: 20px; background: #fff; border: 2.5px solid #7c3aed; border-radius: 50%; z-index: 9300; /* always on top */ box-shadow: 0 2px 7px rgba(0, 0, 0, .35); transition: background .15s; touch-action: none; /* prevent scroll override on mobile */ cursor: pointer; } .wenp-ch:hover { background: #7c3aed; border-color: #fff; transform: scale(1.3) !important; } /* Corners — offset = half handle size (10px) */ .wenp-ch-nw { top: -10px; left: -10px; cursor: nw-resize; } .wenp-ch-ne { top: -10px; right: -10px; cursor: ne-resize; } .wenp-ch-sw { bottom: -10px; left: -10px; cursor: sw-resize; } .wenp-ch-se { bottom: -10px; right: -10px; cursor: se-resize; } /* Edge midpoints */ .wenp-ch-n { top: -10px; left: 50%; transform: translateX(-50%); cursor: n-resize; } .wenp-ch-s { bottom: -10px; left: 50%; transform: translateX(-50%); cursor: s-resize; } .wenp-ch-w { left: -10px; top: 50%; transform: translateY(-50%); cursor: w-resize; } .wenp-ch-e { right: -10px; top: 50%; transform: translateY(-50%); cursor: e-resize; } /* ── Toolbar row (Clip It / Cancel) ───────────────────────────── */ .wenp-clip-toolbar { position: absolute; bottom: -48px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 9300; white-space: nowrap; } .wenp-clip-do-btn, .wenp-clip-cancel-btn { padding: 8px 20px; border: none; border-radius: 8px; font-size: .83rem; font-weight: 700; cursor: pointer; box-shadow: 0 3px 10px rgba(0, 0, 0, .28); transition: background .2s, transform .15s; } .wenp-clip-do-btn { background: #7c3aed; color: #fff; } .wenp-clip-do-btn:hover { background: #5b21b6; transform: scale(1.04); } .wenp-clip-cancel-btn { background: #fff; color: #374151; } .wenp-clip-cancel-btn:hover { background: #f3f4f6; } /* ══════════════════════════════════════════════════════════════════ * RESULT MODAL * ══════════════════════════════════════════════════════════════════ */ .wenp-clip-modal { display: none; position: fixed; inset: 0; z-index: 9600; background: rgba(0, 0, 0, .62); align-items: center; justify-content: center; padding: 20px; } .wenp-clip-modal.is-visible { display: flex; } .wenp-clip-modal-inner { background: #fff; border-radius: 16px; padding: 26px 28px 22px; max-width: 520px; width: 100%; position: relative; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); animation: wenpModalIn .24s ease; max-height: 92vh; overflow-y: auto; } @keyframes wenpModalIn { from { opacity: 0; transform: scale(.93) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } .wenp-clip-modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #9ca3af; line-height: 1; padding: 2px 7px; border-radius: 6px; transition: background .15s; } .wenp-clip-modal-close:hover { background: #f3f4f6; color: #374151; } .wenp-clip-modal-title { font-size: 1.1rem; font-weight: 800; color: #1e1e2d; margin: 0 0 16px; } /* Preview */ .wenp-clip-preview-wrap { border: 1px solid #e2e4e7; border-radius: 10px; overflow: hidden; margin-bottom: 16px; background: #f8f8f8; display: flex; align-items: center; justify-content: center; min-height: 80px; max-height: 280px; } .wenp-clip-preview-img { max-width: 100%; max-height: 280px; display: block; object-fit: contain; } /* Action row */ .wenp-clip-result-actions { display: flex; gap: 10px; margin-bottom: 14px; } .wenp-clip-save-btn, .wenp-clip-share-open-btn { flex: 1; padding: 10px 16px; border: none; border-radius: 10px; font-size: .88rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background .2s, transform .15s; } .wenp-clip-save-btn { background: #0f3460; color: #fff; } .wenp-clip-save-btn:hover { background: #1a1a2e; transform: scale(1.03); } .wenp-clip-share-open-btn { background: #7c3aed; color: #fff; } .wenp-clip-share-open-btn:hover { background: #5b21b6; transform: scale(1.03); } /* Share panel */ .wenp-clip-share-panel { border-top: 1px solid #e2e4e7; padding-top: 14px; } .wenp-clip-share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; } .wenp-clip-share-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 6px; border-radius: 10px; background: var(--sc, #374151); color: #fff !important; text-decoration: none !important; font-size: .72rem; font-weight: 700; transition: opacity .2s, transform .15s; line-height: 1; } .wenp-clip-share-btn:hover { opacity: .83; transform: translateY(-3px); color: #fff !important; } .wenp-clip-share-btn span { font-size: .71rem; margin-top: 3px; } /* Copy link row */ .wenp-clip-link-row { display: flex; gap: 8px; } .wenp-clip-link-input { flex: 1; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: .79rem; color: #374151; background: #f9fafb; min-width: 0; } .wenp-clip-copy-link { padding: 8px 14px; background: #0f3460; color: #fff; border: none; border-radius: 8px; font-size: .79rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .2s; } .wenp-clip-copy-link:hover { background: #1a1a2e; } /* Toast */ .wenp-clip-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(14px); background: #1e1e2d; color: #fff; padding: 10px 24px; border-radius: 30px; font-size: .84rem; font-weight: 600; z-index: 9900; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, .3); } .wenp-clip-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* Responsive */ @media (max-width:520px) { .wenp-clip-modal-inner { padding: 18px 12px; } .wenp-clip-share-grid { grid-template-columns: repeat(2, 1fr); } .wenp-clip-result-actions { flex-direction: column; } .wenp-clip-toolbar { bottom: -90px; flex-direction: column; align-items: center; } }