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

@@ -96,15 +96,42 @@ function showNotification(message) {
   position: fixed;
   top: 50px;
   right: 20px;
-    background: rgba(46, 139, 87, 0.8); /* Прозрачный зеленый фон */
+  bottom: auto; /* Для предотвращения конфликта с другими фиксированными элементами */
-    backdrop-filter: blur(10px); /* Размытый фон */
+  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;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
   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)