/* ============================================================================ FuturBox PWA Styles ============================================================================ Install banner + update notification. Používa CSS premenné kompatibilné s FluentCommunity (--fcom-*) ak sú dostupné. ========================================================================== */ .futurbox-install-banner, .futurbox-update-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999; background: var(--fcom-bg, #ffffff); color: var(--fcom-text, #111827); border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08); transform: translateY(120%); opacity: 0; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .futurbox-install-banner.is-visible, .futurbox-update-banner.is-visible { transform: translateY(0); opacity: 1; } @media (min-width: 640px) { .futurbox-install-banner, .futurbox-update-banner { max-width: 480px; left: auto; right: 24px; bottom: 24px; } } /* Install banner — väčší, dvojriadkový */ .futurbox-install-banner__inner { padding: 16px; display: flex; flex-direction: column; gap: 12px; } @media (min-width: 480px) { .futurbox-install-banner__inner { flex-direction: row; align-items: center; justify-content: space-between; } } .futurbox-install-banner__content { flex: 1; min-width: 0; } .futurbox-install-banner__title { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; line-height: 1.3; } .futurbox-install-banner__body { margin: 0; font-size: 13px; line-height: 1.4; color: var(--fcom-text-secondary, #6b7280); } .futurbox-install-banner__actions { display: flex; gap: 8px; flex-shrink: 0; } .futurbox-install-banner__btn { appearance: none; -webkit-appearance: none; border: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 8px; transition: background 0.15s, transform 0.05s; line-height: 1; } .futurbox-install-banner__btn:active { transform: scale(0.98); } .futurbox-install-banner__btn--primary { background: var(--fcom-primary, #1a73e8); color: #ffffff; } .futurbox-install-banner__btn--primary:hover { background: var(--fcom-primary-hover, #1557b0); } .futurbox-install-banner__btn--ghost { background: transparent; color: var(--fcom-text-secondary, #6b7280); } .futurbox-install-banner__btn--ghost:hover { background: var(--fcom-hover-bg, rgba(0, 0, 0, 0.04)); } /* Update banner — kompaktný, jednoradový */ .futurbox-update-banner { padding: 12px 16px; display: flex; align-items: center; gap: 12px; font-size: 14px; } .futurbox-update-banner__btn { appearance: none; -webkit-appearance: none; border: none; background: var(--fcom-primary, #1a73e8); color: #ffffff; font-family: inherit; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 6px; cursor: pointer; margin-left: auto; } /* Dark mode support — ak FC má .dark třídu na */ @media (prefers-color-scheme: dark) { .futurbox-install-banner, .futurbox-update-banner { background: var(--fcom-bg, #1f2937); color: var(--fcom-text, #f9fafb); } .futurbox-install-banner__body { color: var(--fcom-text-secondary, #9ca3af); } } /* ============================================================================ Desktop / Mobile install banner variants ========================================================================== */ /* Banner ikona — chýbala v originálnej verzii */ .futurbox-install-banner__icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--fcom-primary, #1a73e8); color: #ffffff; display: flex; align-items: center; justify-content: center; } /* Desktop variant — kompaktnejší, v rohu obrazovky */ .futurbox-install-banner.is-desktop { max-width: 420px; left: auto; right: 24px; bottom: 24px; } .futurbox-install-banner.is-desktop .futurbox-install-banner__inner { padding: 14px; flex-direction: row; align-items: center; } /* Mobile variant — full-width na spodku */ .futurbox-install-banner.is-mobile { /* Zachová default plný-šírka layout z hlavného .futurbox-install-banner */ } @media (min-width: 640px) { .futurbox-install-banner.is-mobile { max-width: 480px; left: auto; right: 24px; bottom: 24px; } } /* ============================================================================ iOS install instructions modal — pre Safari users (no beforeinstallprompt) ========================================================================== */ .futurbox-ios-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .futurbox-ios-modal.is-visible { opacity: 1; pointer-events: auto; } .futurbox-ios-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); cursor: pointer; } .futurbox-ios-modal__content { position: relative; background: var(--fcom-bg, #ffffff); color: var(--fcom-text, #111827); border-radius: 12px; padding: 24px; max-width: 420px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); transform: translateY(8px); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); } .futurbox-ios-modal.is-visible .futurbox-ios-modal__content { transform: translateY(0); } .futurbox-ios-modal__content h3 { margin: 0 0 12px 0; font-size: 18px; font-weight: 600; } .futurbox-ios-modal__content ol { margin: 0 0 20px 0; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--fcom-text-secondary, #4b5563); } .futurbox-ios-modal__content ol li { margin-bottom: 8px; } .futurbox-ios-modal__content ol li strong { color: var(--fcom-text, #111827); } .futurbox-ios-modal__content button { width: 100%; } @media (prefers-color-scheme: dark) { .futurbox-ios-modal__content { background: var(--fcom-bg, #1f2937); color: var(--fcom-text, #f9fafb); } .futurbox-ios-modal__content ol { color: var(--fcom-text-secondary, #9ca3af); } .futurbox-ios-modal__content ol li strong { color: var(--fcom-text, #f9fafb); } } /* ============================================================================ Share toast — fallback notifikácia pri clipboard copy ========================================================================== */ .futurbox-share-toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 10001; background: #1f2937; color: #ffffff; padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); opacity: 0; transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; white-space: nowrap; } .futurbox-share-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================================================ Share-received panel (Feature 3 — Web Share Target landing UI) ========================================================================== */ .futurbox-share-received-panel { position: fixed; inset: 0; z-index: 10002; background: rgba(0, 0, 0, 0.4); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .futurbox-share-received-panel.is-visible { opacity: 1; pointer-events: auto; } @media (min-width: 640px) { .futurbox-share-received-panel { align-items: center; padding: 24px; } } .futurbox-share-received-panel__inner { background: var(--fcom-bg, #ffffff); color: var(--fcom-text, #1f2937); width: 100%; max-width: 480px; padding: 20px; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } @media (min-width: 640px) { .futurbox-share-received-panel__inner { border-radius: 16px; transform: translateY(20px); } } .futurbox-share-received-panel.is-visible .futurbox-share-received-panel__inner { transform: translateY(0); } .futurbox-share-received-panel__inner strong { display: block; font-size: 16px; margin-bottom: 12px; } .futurbox-share-received-panel__inner textarea { width: 100%; min-height: 120px; padding: 12px; border: 1px solid var(--fcom-border, #e5e7eb); border-radius: 8px; font-family: inherit; font-size: 14px; resize: vertical; background: var(--fcom-bg-soft, #f9fafb); color: inherit; box-sizing: border-box; } .futurbox-share-received-panel__actions { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; } .futurbox-share-received-panel__btn { appearance: none; border: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500; padding: 10px 18px; border-radius: 8px; transition: background 0.15s, transform 0.05s; line-height: 1; } .futurbox-share-received-panel__btn:active { transform: scale(0.98); } .futurbox-share-received-panel__btn--primary { background: var(--fcom-primary, #1a73e8); color: #ffffff; } .futurbox-share-received-panel__btn--primary:hover { background: var(--fcom-primary-hover, #1557b0); } .futurbox-share-received-panel__btn--ghost { background: transparent; color: var(--fcom-text-secondary, #6b7280); } .futurbox-share-received-panel__btn--ghost:hover { background: var(--fcom-hover-bg, rgba(0, 0, 0, 0.04)); } .futurbox-share-received-panel__hint { margin: 12px 0 0 0; font-size: 12px; color: var(--fcom-text-secondary, #9ca3af); } @media (prefers-color-scheme: dark) { .futurbox-share-received-panel__inner { background: var(--fcom-bg, #1f2937); color: var(--fcom-text, #f9fafb); } .futurbox-share-received-panel__inner textarea { background: var(--fcom-bg-soft, #111827); border-color: var(--fcom-border, #374151); } }