From 9748a3c1d25895808ad9173dea57189fc96af864 Mon Sep 17 00:00:00 2001 From: Vasilii Mikhailovskii Date: Sun, 8 Dec 2024 22:38:09 +0200 Subject: [PATCH] offline.html support light theme --- apps/frontend/public/css/offline.css | 51 +++++++++++++++++++++++++--- apps/frontend/public/offline.html | 9 +++-- 2 files changed, 51 insertions(+), 9 deletions(-) diff --git a/apps/frontend/public/css/offline.css b/apps/frontend/public/css/offline.css index 03f5470..aa2f9e4 100644 --- a/apps/frontend/public/css/offline.css +++ b/apps/frontend/public/css/offline.css @@ -1,11 +1,10 @@ +/* Общие стили */ body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; - background-color: #121212; - color: #ffffff; font-family: Arial, sans-serif; } @@ -16,8 +15,8 @@ body { .spinner { width: 50px; height: 50px; - border: 5px solid rgba(255, 255, 255, 0.3); - border-top-color: #ffffff; + border: 5px solid rgba(0, 0, 0, 0.1); + border-top-color: currentColor; border-radius: 50%; animation: spin 1s linear infinite; margin: 20px auto; @@ -41,3 +40,47 @@ button { button:hover { background-color: #0056b3; } + +/* Светлая тема */ +@media (prefers-color-scheme: light) { + body { + background-color: #ffffff; + color: #000000; + } + + .spinner { + border-color: rgba(0, 0, 0, 0.1); + border-top-color: #000000; + } + + button { + background-color: #007bff; + color: white; + } + + button:hover { + background-color: #0056b3; + } +} + +/* Тёмная тема */ +@media (prefers-color-scheme: dark) { + body { + background-color: #121212; + color: #ffffff; + } + + .spinner { + border-color: rgba(255, 255, 255, 0.3); + border-top-color: #ffffff; + } + + button { + background-color: #007bff; + color: white; + } + + button:hover { + background-color: #0056b3; + } +} diff --git a/apps/frontend/public/offline.html b/apps/frontend/public/offline.html index a6d848d..c6c6a01 100644 --- a/apps/frontend/public/offline.html +++ b/apps/frontend/public/offline.html @@ -3,7 +3,8 @@ - + + Загрузка… — НаСвязи @@ -85,11 +86,11 @@ checkConnectionWithServiceWorker().then((isOnline) => { if (!isOnline) showOfflineMessage(); - }) + }); if ('serviceWorker' in navigator) { navigator.serviceWorker.onmessage = (event) => { - console.log('onmessage', event.data && event.data.type) + console.log('onmessage', event.data && event.data.type); if (event.data && event.data.type === 'MAIN_PAGE_READY') { location.reload(); } @@ -104,7 +105,6 @@ window.addEventListener('online', handleOnlineStatus); addEventListener("offline", showOfflineMessage); - showLoadingMessage(); document.addEventListener('DOMContentLoaded', () => { @@ -118,7 +118,6 @@ console.warn('Service Worker is not available or not controlling this page.'); } }); -