modified: serv_nginx/bbvue/src/App.vue

modified:   serv_nginx/bbvue/src/router/index.js
set notification

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);

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)