diff --git a/baseTemplate/templates/baseTemplate/index.html b/baseTemplate/templates/baseTemplate/index.html index 1d7283cd5..7c5aac72c 100644 --- a/baseTemplate/templates/baseTemplate/index.html +++ b/baseTemplate/templates/baseTemplate/index.html @@ -489,6 +489,90 @@ min-height: 100vh; } + /* Notification Banner */ + .notification-banner { + position: fixed; + top: 80px; + left: 260px; + right: 0; + background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); + border-bottom: 1px solid #f59e0b; + padding: 12px 30px; + z-index: 999; + box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15); + animation: slideDown 0.3s ease-out; + display: none; /* Hidden by default */ + } + + .notification-banner.show { + display: block; + } + + .notification-content { + display: flex; + align-items: center; + gap: 1rem; + max-width: 1400px; + margin: 0 auto; + } + + .notification-icon { + color: #d97706; + font-size: 1.25rem; + flex-shrink: 0; + } + + .notification-text { + flex: 1; + color: #92400e; + font-size: 0.875rem; + font-weight: 500; + } + + .configure-link { + color: #d97706; + font-weight: 600; + text-decoration: underline; + margin-left: 0.5rem; + transition: color 0.2s ease; + } + + .configure-link:hover { + color: #b45309; + } + + .notification-close { + background: transparent; + border: none; + color: #92400e; + font-size: 1.125rem; + cursor: pointer; + padding: 0.25rem; + transition: all 0.2s ease; + border-radius: 4px; + } + + .notification-close:hover { + background: rgba(217, 119, 6, 0.1); + color: #b45309; + } + + /* Adjust main content padding when notification is shown */ + .notification-shown #main-content { + padding-top: 160px; + } + + @keyframes slideDown { + from { + transform: translateY(-100%); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } + } + /* Scrollbar */ ::-webkit-scrollbar { width: 8px; @@ -557,6 +641,19 @@ #header .info-text { display: none; } + + .notification-banner { + left: 0; + padding: 12px 15px; + } + + .notification-shown #main-content { + padding-top: 140px; + } + + .notification-text { + font-size: 0.813rem; + } } @@ -1333,6 +1430,22 @@ {% endif %} + +