/* ============================================================================= FreePDFWorld — fpw-share.css v1.0 Action row (Download · Share · Google Drive · Delete) + Share modal + errors Loaded globally via public-head-assets.jsp so it is always in . ============================================================================= */ /* ── Action button row ─────────────────────────────────────────────────────── */ .duc-action-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; flex-shrink: 0; } /* Base token for all action buttons */ .duc-btn-action { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.9rem; border: none; border-radius: 8px; font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: inherit; line-height: 1; white-space: nowrap; text-decoration: none; transition: background 0.2s, box-shadow 0.2s, transform 0.15s, opacity 0.2s; } .duc-btn-action:hover:not(:disabled) { transform: translateY(-1px); } .duc-btn-action:active:not(:disabled) { transform: translateY(0); } /* Download ── green */ .duc-btn-dl { background: #10b981; color: #fff; } .duc-btn-dl:hover:not(:disabled) { background: #059669; box-shadow: 0 4px 12px rgba(16,185,129,.35); } .duc-btn-dl:disabled { opacity: 0.6; cursor: default; } /* Share / QR ── blue outline */ .duc-btn-share { background: #eff6ff; color: #2563eb; border: 1.5px solid #bfdbfe; } .duc-btn-share:hover:not(:disabled) { background: #dbeafe; box-shadow: 0 3px 10px rgba(59,130,246,.2); } /* Google Drive ── grey, disabled future-scope */ .duc-btn-gdrive-row { background: #f8fafc; color: #64748b; border: 1.5px solid #e2e8f0; } .duc-btn-gdrive-row[disabled], .duc-btn-gdrive-row:disabled { opacity: 0.7; cursor: not-allowed; transform: none !important; } .duc-gdrive-soon-badge { font-size: 0.65rem; background: #fef3c7; color: #92400e; padding: 0.1rem 0.4rem; border-radius: 4px; font-weight: 700; letter-spacing: 0.03em; line-height: 1.2; } /* Delete ── red outline, icon-only */ .duc-btn-del { background: #fef2f2; color: #dc2626; border: 1.5px solid #fecaca; padding: 0.5rem 0.65rem; /* narrower */ } .duc-btn-del:hover:not(:disabled) { background: #dc2626; color: #fff; border-color: #dc2626; box-shadow: 0 3px 10px rgba(220,38,38,.28); } /* ── Inline row error (shown when download expires / fails) ──────────────── */ .duc-row-error { width: 100%; /* spans full row width on next wrapped line */ font-size: 0.8rem; color: #dc2626; padding: 0.4rem 0.7rem; background: #fef2f2; border-left: 3px solid #dc2626; border-radius: 0 6px 6px 0; display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; order: 99; /* flexbox order: always last */ animation: ducFadeIn 0.2s ease; } /* ── Inline delete confirmation ──────────────────────────────────────────── */ .duc-del-confirm { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: #dc2626; font-weight: 600; } .duc-del-yes, .duc-del-no { padding: 0.3rem 0.75rem; border: none; border-radius: 6px; font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s; } .duc-del-yes { background: #dc2626; color: #fff; } .duc-del-yes:hover { background: #b91c1c; } .duc-del-no { background: #e2e8f0; color: #475569; } .duc-del-no:hover { background: #cbd5e1; } /* ══ SHARE MODAL ═══════════════════════════════════════════════════════════ */ /* The modal uses aria-hidden to toggle; CSS respects that attribute. */ #fpwShareModal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 9999; display: none; /* hidden by default */ align-items: center; justify-content: center; padding: 1rem; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* Shown when aria-hidden="false" (set by fpw-share.js) */ #fpwShareModal[aria-hidden="false"] { display: flex; } /* Box */ .fpw-modal-box { background: #fff; border-radius: 18px; padding: 2rem; max-width: 460px; width: 100%; box-shadow: 0 28px 64px rgba(0, 0, 0, 0.28); position: relative; animation: fpwModalIn 0.22s ease; } @keyframes fpwModalIn { from { opacity: 0; transform: scale(0.93) translateY(14px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Close button */ .fpw-modal-close { position: absolute; top: 1rem; right: 1rem; background: #f1f5f9; border: none; border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; line-height: 1; color: #64748b; cursor: pointer; transition: background 0.2s, color 0.2s; } .fpw-modal-close:hover { background: #e2e8f0; color: #1e293b; } /* Title */ .fpw-modal-title { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin: 0 0 0.2rem; padding-right: 2.5rem; display: flex; align-items: center; gap: 0.5rem; } .fpw-modal-title i { color: #3b82f6; } /* Filename subtitle */ .fpw-modal-sub { font-size: 0.825rem; color: #64748b; margin: 0 0 1.25rem; word-break: break-all; } /* Thin divider */ .fpw-modal-divider { height: 1px; background: #f1f5f9; margin: 1rem 0; } /* Section labels */ .fpw-modal-section-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #94a3b8; margin: 0 0 0.6rem; display: flex; align-items: center; gap: 0.35rem; } /* URL copy row */ .fpw-url-row { display: flex; gap: 0.5rem; align-items: stretch; margin-bottom: 1rem; } .fpw-url-input { flex: 1; min-width: 0; padding: 0.6rem 0.75rem; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: 0.8rem; color: #334155; background: #f8fafc; outline: none; cursor: text; font-family: 'Courier New', monospace; } /* Copy button */ .fpw-copy-btn { padding: 0.6rem 1rem; background: #3b82f6; color: #fff; border: none; border-radius: 8px; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.2s; display: inline-flex; align-items: center; gap: 0.35rem; font-family: inherit; } .fpw-copy-btn:hover { background: #2563eb; } .fpw-copy-btn.fpw-copied { background: #10b981; } /* QR code section */ .fpw-qr-section { text-align: center; } .fpw-qr-wrap { display: inline-flex; align-items: center; justify-content: center; width: 168px; height: 168px; background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 12px; overflow: hidden; margin: 0 auto; } .fpw-qr-wrap img { width: 152px; height: 152px; object-fit: contain; display: block; } .fpw-qr-loading { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: #94a3b8; } .fpw-qr-loading i { font-size: 1.5rem; animation: fpwQrSpin 1s linear infinite; } @keyframes fpwQrSpin { to { transform: rotate(360deg); } } /* ── Expiry timer banner ─────────────────────────────────────────────────── */ .fpw-expiry-banner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; margin-top: 1rem; padding: 0.85rem 1rem; background: #fffbeb; border: 1.5px solid #fde68a; border-radius: 12px; text-align: center; } .fpw-expiry-banner-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #92400e; display: flex; align-items: center; gap: 0.35rem; } .fpw-expiry-banner-label i { color: #d97706; } /* ── Live expiry countdown ─────────────────────────────────────────────── */ .fpw-expiry-countdown { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: 0.04em; transition: color 0.4s; } .fpw-expiry-ok { color: #10b981; } /* > 2 min — green */ .fpw-expiry-warn { color: #f59e0b; } /* 1–2 min — amber */ .fpw-expiry-urgent { color: #ef4444; } /* < 1 min — red */ .fpw-expiry-expired { color: #ef4444 !important; font-style: italic; font-size: 1.1rem !important; } /* ── Dark theme ─────────────────────────────────────────────────────────── */ [data-theme="dark"] .fpw-modal-box { background: #1e293b !important; box-shadow: 0 28px 64px rgba(0,0,0,.6) !important; } [data-theme="dark"] .fpw-modal-title { color: #f1f5f9 !important; } [data-theme="dark"] .fpw-modal-sub { color: #94a3b8 !important; } [data-theme="dark"] .fpw-modal-divider { background: #334155 !important; } [data-theme="dark"] .fpw-modal-section-label { color: #64748b !important; } [data-theme="dark"] .fpw-modal-close { background: #334155 !important; color: #94a3b8 !important; } [data-theme="dark"] .fpw-modal-close:hover { background: #475569 !important; color: #f1f5f9 !important; } [data-theme="dark"] .fpw-url-input { background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; } [data-theme="dark"] .fpw-qr-wrap { background: #0f172a !important; border-color: #334155 !important; } [data-theme="dark"] .fpw-expiry-banner { background: rgba(253,230,138,.06) !important; border-color: #78350f !important; } [data-theme="dark"] .fpw-expiry-banner-label { color: #fbbf24 !important; } [data-theme="dark"] .fpw-expiry-banner-label i{ color: #f59e0b !important; } [data-theme="dark"] .duc-btn-share { background: #1e3a5f !important; color: #60a5fa !important; border-color: #1e40af !important; } [data-theme="dark"] .duc-btn-gdrive-row { background: #1e293b !important; border-color: #334155 !important; color: #64748b !important; } [data-theme="dark"] .duc-btn-del { background: rgba(220,38,38,.12) !important; color: #f87171 !important; border-color: #7f1d1d !important; } [data-theme="dark"] .duc-btn-del:hover:not(:disabled) { background: #ef4444 !important; color: #fff !important; border-color: #ef4444 !important; } [data-theme="dark"] .duc-del-no { background: #334155 !important; color: #94a3b8 !important; } [data-theme="dark"] .duc-row-error { background: rgba(220,38,38,.12) !important; border-left-color: #ef4444 !important; color: #f87171 !important; } [data-theme="dark"] .fpw-share-public-notice { background: rgba(16,185,129,.12) !important; border-color: #059669 !important; color: #6ee7b7 !important; } /* ── Public share notice ─────────────────────────────────────────────────── */ .fpw-share-public-notice { display: flex; align-items: flex-start; gap: 0.5rem; background: #ecfdf5; border: 1.5px solid #6ee7b7; border-radius: 8px; padding: 0.6rem 0.8rem; margin-bottom: 0.75rem; font-size: 0.8rem; color: #065f46; animation: ducFadeIn 0.25s ease; } .fpw-share-public-notice i { color: #10b981; flex-shrink: 0; margin-top: 0.05rem; } /* ── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 600px) { .duc-action-row { gap: 0.3rem; } .duc-btn-action { padding: 0.45rem 0.65rem; font-size: 0.75rem; } .fpw-modal-box { padding: 1.25rem; border-radius: 14px; } .fpw-qr-wrap { width: 144px; height: 144px; } .fpw-qr-wrap img { width: 128px; height: 128px; } .fpw-expiry-countdown { font-size: 1.5rem; } }