ShadowsOverWestgate/sow-nodebb-theme
3
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Activity

Theme chat and notification surfaces

Browse Source
This commit is contained in:
archvillainette
2026-04-24 13:22:47 +02:00
parent b8a7fbf873
commit fb36745212
2 changed files with 109 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/westgate/_controls.scss
+8
View File
@@ -17,6 +17,7 @@
} }
.btn-secondary, .btn-secondary,
.btn-light,
.btn-ghost, .btn-ghost,
.btn-outline-secondary { .btn-outline-secondary {
--bs-btn-color: #d8cec0; --bs-btn-color: #d8cec0;
@@ -31,6 +32,13 @@
box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035); box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035);
} }
.btn-light {
--bs-btn-hover-bg: rgba(194, 163, 90, 0.09);
--bs-btn-hover-border-color: rgba(216, 194, 138, 0.5);
--bs-btn-active-bg: rgba(194, 163, 90, 0.15);
--bs-btn-active-border-color: rgba(216, 194, 138, 0.56);
}
.modal-footer .btn-secondary, .modal-footer .btn-secondary,
.bootbox .modal-footer .btn-secondary, .bootbox .modal-footer .btn-secondary,
.modal-footer .btn[data-bs-dismiss="modal"], .modal-footer .btn[data-bs-dismiss="modal"],
scss/westgate/_surfaces.scss
+101
View File
@@ -185,3 +185,104 @@ li[component="category/topic"] .user-icon {
.profile-card { .profile-card {
color: var(--wg-text-soft); 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;
}