diff --git a/serv_nginx/bbvue/src/App.vue b/serv_nginx/bbvue/src/App.vue index 758129b..dcc40a9 100644 --- a/serv_nginx/bbvue/src/App.vue +++ b/serv_nginx/bbvue/src/App.vue @@ -101,9 +101,6 @@ body { /* Header Styles */ .app-header { - background-color: rgba(46, 139, 86, 0.125); /* Полупрозрачный фон */ - backdrop-filter: blur(10px); /* Размытие фона */ - -webkit-backdrop-filter: blur(10px); /* Для Safari */ color: white; padding: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); diff --git a/serv_nginx/bbvue/src/router/index.js b/serv_nginx/bbvue/src/router/index.js index 072fe60..b07e0ed 100644 --- a/serv_nginx/bbvue/src/router/index.js +++ b/serv_nginx/bbvue/src/router/index.js @@ -93,18 +93,45 @@ function showNotification(message) { // Создаем элемент уведомления const notification = document.createElement('div') notification.style.cssText = ` - position: fixed; - top: 50px; - right: 20px; - background: rgba(46, 139, 87, 0.8); /* Прозрачный зеленый фон */ - backdrop-filter: blur(10px); /* Размытый фон */ - color: white; - padding: 15px 20px; - border-radius: 8px; - box-shadow: 0 4px 12px rgba(0,0,0,0.15); - z-index: 10000; - max-width: 300px; + position: fixed; + top: 50px; + right: 20px; + bottom: auto; /* Для предотвращения конфликта с другими фиксированными элементами */ + left: auto; + + /* Кросс-браузерное позиционирование */ + transform: translate(0, 0); + + background: rgba(46, 139, 86, 0.04); /* Основной фон */ + background-color: #fff3e048; /* Fallback для браузеров без поддержки rgba */ + + /* Поддержка размытия */ + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + + /* Fallback для старых браузеров */ + -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.15); + box-shadow: 0 4px 12px rgba(0,0,0,0.15); + + color: white; + color: #333; /* Fallback для темных фонов */ + + padding: 15px 20px; + border-radius: 8px; + z-index: 10000; + + /* Адаптивная ширина */ + max-width: 300px; + width: 90vw; + min-width: 200px; + + /* Анимация появления */ + opacity: 1; + transition: all 0.3s ease; `; + + + notification.textContent = message document.body.appendChild(notification)