sendou.ink/app/components/layout/NotificationPopover.module.css
2026-03-20 04:35:07 +01:00

77 lines
1.2 KiB
CSS

.popoverContainer {
min-width: 300px;
padding: 0;
background-color: var(--color-bg);
}
.popoverContainer svg {
width: 16px;
}
.noNotificationsContainer {
min-height: 200px;
}
.topContainer {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--s-1) var(--s-2);
& svg {
min-width: 18px;
min-height: 18px;
max-width: 18px;
max-height: 18px;
}
}
.header {
display: flex;
align-items: center;
font-size: var(--font-sm);
gap: var(--s-2);
}
.noNotifications {
display: grid;
place-items: center;
font-weight: var(--weight-semi);
color: var(--color-text-high);
margin-block-start: 65px;
}
.divider {
border-color: var(--color-border);
}
.viewAllLink {
display: flex;
align-items: center;
gap: 2px;
width: fit-content;
margin: var(--s-2) auto;
font-size: var(--font-2xs);
color: var(--color-text-high);
text-decoration: none;
padding: 0 var(--s-3);
height: var(--selector-size);
background-color: var(--color-bg-high);
border-radius: var(--radius-field);
& svg {
stroke-width: 3;
}
}
@media screen and (max-width: 599px) {
.viewAllLink {
margin-top: var(--s-4);
}
}
.viewAllLink:hover {
color: var(--color-text);
background-color: var(--color-bg-higher);
}