114 lines
3.0 KiB
SCSS
114 lines
3.0 KiB
SCSS
.notification-center {
|
||
position: absolute;
|
||
top: 64px;
|
||
right: 0;
|
||
//width: 600px;
|
||
background: #fff; /* White background, Ant’s default */
|
||
color: rgba(0, 0, 0, 0.85); /* Primary text color in Ant 5 */
|
||
border: 1px solid #d9d9d9; /* Neutral gray border */
|
||
border-radius: 6px; /* Slightly larger radius per Ant 5 */
|
||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06); /* Subtle Ant 5 shadow */
|
||
z-index: 1000;
|
||
display: none;
|
||
|
||
&.visible {
|
||
display: block;
|
||
}
|
||
|
||
.notification-header {
|
||
padding: 16px;
|
||
border-bottom: 1px solid #f0f0f0; /* Light gray border from Ant 5 */
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: #fafafa; /* Light gray background for header */
|
||
|
||
h3 {
|
||
margin: 0;
|
||
font-size: 16px;
|
||
color: rgba(0, 0, 0, 0.85); /* Primary text color */
|
||
}
|
||
|
||
.notification-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
|
||
.ant-checkbox-wrapper {
|
||
color: rgba(0, 0, 0, 0.85); /* Match Ant’s text color */
|
||
}
|
||
|
||
.ant-btn-link {
|
||
color: #1677ff; /* Ant 5 primary blue */
|
||
&:hover {
|
||
color: #69b1ff; /* Lighter blue on hover */
|
||
}
|
||
&:disabled {
|
||
color: rgba(0, 0, 0, 0.25); /* Disabled text color from Ant 5 */
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.notification-read {
|
||
background: #fff; /* White background for read items */
|
||
color: rgba(0, 0, 0, 0.65); /* Secondary text color */
|
||
}
|
||
|
||
.notification-unread {
|
||
background: #f5f5f5; /* Very light gray for unread items */
|
||
color: rgba(0, 0, 0, 0.85); /* Primary text color */
|
||
}
|
||
|
||
.ant-list {
|
||
overflow: auto; /* Match Virtuoso’s default scrolling behavior */
|
||
max-height: 100%; /* Allow full height, let Virtuoso handle virtualization */
|
||
}
|
||
|
||
.ant-list-item {
|
||
padding: 2px 16px;
|
||
border-bottom: 1px solid #f0f0f0; /* Light gray border */
|
||
display: block; /* Ensure visibility */
|
||
overflow: visible; /* Prevent clipping within items */
|
||
min-height: 80px; /* Minimum height for multi-line content */
|
||
|
||
.ant-typography {
|
||
color: inherit; /* Inherit from parent (read/unread) */
|
||
}
|
||
|
||
.ant-typography-secondary {
|
||
font-size: 12px;
|
||
color: rgba(0, 0, 0, 0.45); /* Ant 5 secondary text color */
|
||
}
|
||
|
||
.ant-badge-dot {
|
||
background: #ff4d4f; /* Keep red dot for unread, consistent with Ant */
|
||
}
|
||
|
||
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: #fff1f0; /* Light red background for error per Ant 5 */
|
||
color: rgba(0, 0, 0, 0.85);
|
||
border: 1px solid #ffa39e; /* Light red border */
|
||
|
||
.ant-alert-message {
|
||
color: #ff4d4f; /* Red text for message */
|
||
}
|
||
|
||
.ant-alert-description {
|
||
color: rgba(0, 0, 0, 0.65); /* Slightly muted description */
|
||
}
|
||
}
|
||
}
|