diff --git a/css/styles.css b/css/styles.css index 7d9d9e1..b22f8ce 100644 --- a/css/styles.css +++ b/css/styles.css @@ -98,6 +98,64 @@ img { background-color: rgba(0, 0, 0, 0.05); } +/* PWA Install Button */ +.install-pwa-button { + background: var(--primary-red); + color: white; + border: none; + padding: 8px 12px; + border-radius: 6px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; + margin-right: 10px; +} + +.install-pwa-button:hover { + background: #cc0000; +} + +.install-pwa-button:active { + transform: scale(0.95); +} + +/* PWA Styles */ +@media (display-mode: standalone) { + body { + padding-top: env(safe-area-inset-top); + } + + .header { + padding-top: env(safe-area-inset-top); + } +} + +/* Offline indicator */ +.offline-indicator { + position: fixed; + top: 0; + left: 0; + right: 0; + background: #ff4444; + color: white; + text-align: center; + padding: 10px; + z-index: 1000; + display: none; +} + +.offline-indicator.show { + display: block; +} + +/* Enhanced mobile experience */ +@media (max-width: 768px) { + .install-pwa-button { + padding: 6px 10px; + font-size: 14px; + } +} + /* Styles pour la page active dans la sidebar */ .nav-item.active { background-color: rgba(255, 0, 0, 0.08);