Theme chat and notification surfaces

This commit is contained in:
2026-04-24 13:22:47 +02:00
parent b8a7fbf873
commit fb36745212
2 changed files with 109 additions and 0 deletions
+101
View File
@@ -185,3 +185,104 @@ li[component="category/topic"] .user-icon {
.profile-card {
color: var(--wg-text-soft);
}
.notifications-dropdown .notification-list > :where(div, li),
.notifications-list > :where(div, li),
.chats-dropdown [component="chat/recent/room"],
.chats-list [component="chat/recent/room"],
[component="chat/public/room"] {
background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.018), rgba(8, 7, 10, 0.08)),
var(--wg-velvet-panel) !important;
border: 1px solid rgba(194, 163, 90, 0.14) !important;
border-radius: 8px !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.028),
0 8px 18px rgba(0, 0, 0, 0.18) !important;
color: var(--wg-text-soft) !important;
}
.notifications-dropdown .notification-list > :where(div, li) + :where(div, li),
.notifications-list > :where(div, li) + :where(div, li),
.chats-dropdown [component="chat/recent/room"] + hr,
.chats-list [component="chat/recent/room"] + hr {
margin-top: 0.4rem !important;
}
.notifications-dropdown :where(.btn.btn-ghost, .mark-read),
.notifications-list :where(.btn.btn-ghost, .mark-read),
.chats-dropdown :where(.chat-room-btn, .mark-read),
.chats-list :where(.chat-room-btn, .mark-read),
[component="chat/public/room"] {
color: var(--wg-text-soft) !important;
}
.notifications-dropdown .mark-read,
.notifications-list .mark-read,
.chats-dropdown .mark-read,
.chats-list .mark-read {
border-color: rgba(194, 163, 90, 0.18) !important;
border-radius: 6px !important;
background: linear-gradient(to bottom, rgba(255, 244, 221, 0.018), rgba(0, 0, 0, 0.08)) !important;
}
.notifications-dropdown .mark-read:hover,
.notifications-dropdown .mark-read:focus,
.notifications-list .mark-read:hover,
.notifications-list .mark-read:focus,
.chats-dropdown .mark-read:hover,
.chats-dropdown .mark-read:focus,
.chats-list .mark-read:hover,
.chats-list .mark-read:focus {
background: rgba(194, 163, 90, 0.08) !important;
}
.chats-dropdown .chat-room-btn,
.chats-list .chat-room-btn,
[component="chat/public/room"] {
border: 1px solid rgba(194, 163, 90, 0.12) !important;
border-radius: 8px !important;
background: transparent !important;
box-shadow: none !important;
}
.chats-dropdown [component="chat/recent"] .active .chat-room-btn,
.chats-list .active .chat-room-btn,
[component="chat/public/room"]:hover,
[component="chat/public/room"]:focus,
[component="chat/public/room"].unread {
background: rgba(194, 163, 90, 0.08) !important;
border-color: rgba(194, 163, 90, 0.24) !important;
color: var(--wg-text) !important;
}
.notifications-dropdown [component="notifications/item/link"],
.notifications-list [component="notifications/item/link"],
.chats-dropdown .room-name,
.chats-list .room-name,
.chats-dropdown .teaser-content,
.chats-list .teaser-content,
[component="chat/public/room"] {
color: var(--wg-text-soft) !important;
}
.notifications-dropdown [component="notifications/item/link"]:hover,
.notifications-dropdown [component="notifications/item/link"]:focus,
.notifications-list [component="notifications/item/link"]:hover,
.notifications-list [component="notifications/item/link"]:focus,
.chats-dropdown .chat-room-btn:hover .room-name,
.chats-dropdown .chat-room-btn:focus .room-name,
.chats-list .chat-room-btn:hover .room-name,
.chats-list .chat-room-btn:focus .room-name,
[component="chat/public/room"]:hover {
color: var(--wg-text) !important;
}
[component="chat/public/room/unread/count"],
.chats-dropdown .badge.bg-light,
.chats-list .badge.bg-light {
background:
linear-gradient(to bottom, rgba(216, 194, 138, 0.13), rgba(70, 45, 52, 0.28)) !important;
border: 1px solid rgba(194, 163, 90, 0.28) !important;
color: var(--wg-ledger-ink) !important;
}