fix(pwa): improve install prompt visibility and styling
All checks were successful
Deploy to Production / deploy (push) Successful in 6s

This commit is contained in:
2026-02-26 23:49:55 +00:00
parent 8655533a2d
commit c3f96bacc7

View File

@@ -1,5 +1,5 @@
<template>
<div v-if="showInstallPrompt" class="install-prompt">
<div v-if="showInstallPrompt" class="install-prompt glass-panel unselectable">
<div class="prompt-content">
<span class="prompt-text">Zainstaluj aplikację dla szybszego dostępu</span>
<div class="prompt-actions">
@@ -57,18 +57,15 @@ onBeforeUnmount(() => {
<style scoped>
.install-prompt {
position: fixed;
bottom: 80px; /* Above footer */
bottom: calc(5rem + env(safe-area-inset-bottom)); /* Above footer with extra space */
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 400px;
background-color: var(--card-bg);
border: 1px solid var(--accent-color);
border-radius: 12px;
padding: 1rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
z-index: 100;
z-index: 9999;
animation: slideUp 0.3s ease-out;
border-radius: 12px;
}
.prompt-content {
@@ -81,7 +78,7 @@ onBeforeUnmount(() => {
.prompt-text {
font-size: 0.9rem;
font-weight: 500;
color: var(--text-color);
color: var(--text-strong);
}
.prompt-actions {
@@ -91,8 +88,8 @@ onBeforeUnmount(() => {
}
.install-btn {
background-color: var(--accent-color);
color: white;
background-color: var(--primary-accent);
color: #000; /* Dark text on bright cyan accent for dark mode */
border: none;
padding: 0.5rem 1rem;
border-radius: 6px;
@@ -141,4 +138,10 @@ onBeforeUnmount(() => {
}
}
}
/* Light theme overrides for better contrast */
:global(:root[data-theme="light"]) .install-btn {
background-color: var(--accent-purple);
color: #fff;
}
</style>