Jason Zimdars
49 lines
948 B
CSS
49 lines
948 B
CSS
@layer components {
|
|
/* Notifications list
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
.notifications-list {
|
|
.tray__item {
|
|
position: relative;
|
|
}
|
|
|
|
.card {
|
|
@media (prefers-color-scheme: dark) {
|
|
box-shadow: 0 0 0 1px var(--color-ink-lighter);
|
|
}
|
|
}
|
|
|
|
.card__header {
|
|
column-gap: var(--inline-space-half);
|
|
}
|
|
|
|
.card__notification-unread-indicator {
|
|
font-size: var(--text-small);
|
|
}
|
|
|
|
&:has(.card--notification) {
|
|
.notifications-list__empty-message {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Read items
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
.notifications-list--read {
|
|
&:not(:has(.card--notification)) {
|
|
display: none;
|
|
}
|
|
|
|
.card {
|
|
box-shadow: 0 0 0 1px var(--color-ink-lighter);
|
|
}
|
|
|
|
.card__notification-unread-indicator {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|