diff --git a/styless.css b/styless.css index 7239841..8cffa61 100644 --- a/styless.css +++ b/styless.css @@ -151,8 +151,7 @@ button:hover { border-radius: 8px; background-color: #f9f9f9; } - -/* Notification Bell and Dropdown Styles */ + /* Notification Bell and Dropdown Styles */ .notification-wrapper { position: fixed; /* Use fixed positioning for top-right corner */ top: 10px; /* Position 10px from the top */ @@ -167,6 +166,7 @@ button:hover { font-size: 24px; cursor: pointer; padding: 10px; + z-index: 1001; /* Ensure the bell stays on top */ } .notification-dot { @@ -186,21 +186,21 @@ button:hover { .notifications-dropdown { display: none; - position: absolute; - top: 40px; + position: fixed; /* Use fixed positioning to make it full-screen */ + top: 0; right: 0; - width: 95vw; - max-height: 90vh; /* Limit max height to viewport height */ + width: 100vw; /* Take full viewport width */ + height: 100vh; /* Take full viewport height */ background-color: #fff; - border: 1px solid #ddd; - border-radius: 5px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); - padding: 10px; + border: none; /* No border for full-screen dropdown */ + box-shadow: none; /* No shadow for clean full-screen effect */ z-index: 1000; - box-sizing: border-box; /* Prevent padding from increasing the dropdown width */ - overflow-y: auto; + overflow: auto; /* Allow scrolling for long content */ + padding: 20px; + box-sizing: border-box; } +/* Styling for notification items in full-screen dropdown */ .notification-item { padding: 10px; border-bottom: 1px solid #f0f0f0; @@ -238,3 +238,8 @@ button:hover { .notification-bell:hover { color: #007bff; } + +/* Ensure the dropdown is visible when there are new notifications */ +.new-notification .notifications-dropdown { + display: block; +}