95 lines
1.9 KiB
SCSS
95 lines
1.9 KiB
SCSS
.notification-center {
|
||
position: absolute;
|
||
top: 64px;
|
||
right: 0;
|
||
width: 400px;
|
||
background: #2a2d34;
|
||
color: #d9d9d9;
|
||
border: 1px solid #434343;
|
||
border-radius: 4px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||
z-index: 1000;
|
||
display: none;
|
||
|
||
&.visible {
|
||
display: block;
|
||
}
|
||
|
||
.notification-header {
|
||
padding: 16px;
|
||
border-bottom: 1px solid #434343;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: #1f2229;
|
||
|
||
h3 {
|
||
margin: 0;
|
||
font-size: 16px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.notification-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
|
||
.ant-checkbox-wrapper {
|
||
color: #d9d9d9;
|
||
}
|
||
|
||
.ant-btn-link {
|
||
color: #40c4ff;
|
||
&:hover { color: #80deea; }
|
||
&:disabled { color: #616161; }
|
||
}
|
||
}
|
||
}
|
||
|
||
.notification-read {
|
||
background: #2a2d34;
|
||
color: #b0b0b0;
|
||
}
|
||
.notification-unread {
|
||
background: #353942;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.ant-list {
|
||
overflow: auto; // Match Virtuoso’s default scrolling behavior
|
||
max-height: 100%; // Allow full height, let Virtuoso handle virtualization
|
||
}
|
||
|
||
.ant-list-item {
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid #434343;
|
||
display: block; // Ensure visibility
|
||
overflow: visible; // Prevent clipping within items
|
||
min-height: 80px; // Minimum height to ensure visibility of multi-line content
|
||
|
||
.ant-typography { color: inherit; }
|
||
.ant-typography-secondary { font-size: 12px; color: #b0b0b0; }
|
||
.ant-badge-dot { background: #ff4d4f; }
|
||
|
||
ul {
|
||
margin: 0;
|
||
padding-left: 20px; // Standard list padding
|
||
list-style-type: disc; // Ensure bullet points
|
||
}
|
||
|
||
li {
|
||
margin-bottom: 4px; // Space between list items
|
||
}
|
||
}
|
||
|
||
.ant-alert {
|
||
margin: 8px;
|
||
background: #ff4d4f;
|
||
color: #fff;
|
||
border: none;
|
||
|
||
.ant-alert-message { color: #fff; }
|
||
.ant-alert-description { color: #ffebee; }
|
||
}
|
||
}
|