371 lines
9.2 KiB
SCSS
371 lines
9.2 KiB
SCSS
html,
|
|
body {
|
|
background: var(--wg-bg);
|
|
color: var(--wg-text-soft);
|
|
}
|
|
|
|
body {
|
|
font-family: var(--wg-font-text);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
#panel {
|
|
background: var(--wg-bg);
|
|
}
|
|
|
|
.layout-container,
|
|
#content {
|
|
color: var(--wg-text-soft);
|
|
}
|
|
|
|
a {
|
|
color: var(--wg-gold);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: #e0c878;
|
|
}
|
|
}
|
|
|
|
.text-muted,
|
|
.text-secondary,
|
|
.link-secondary {
|
|
color: var(--wg-text-muted) !important;
|
|
}
|
|
|
|
.bg-body,
|
|
.bg-light,
|
|
.card,
|
|
.card-header,
|
|
.list-group-item {
|
|
background-color: var(--wg-panel) !important;
|
|
color: var(--wg-text-soft);
|
|
border-color: var(--wg-border-soft) !important;
|
|
}
|
|
|
|
.westgate-surface,
|
|
.topic-list-header > .card,
|
|
.category-header,
|
|
li[component="categories/category"],
|
|
li[component="category/topic"],
|
|
li[component="post"] .post-container,
|
|
.quick-reply textarea,
|
|
textarea[component="topic/quickreply/text"] {
|
|
background: var(--wg-velvet-panel) !important;
|
|
border: 1px solid var(--wg-border) !important;
|
|
border-radius: 8px !important;
|
|
box-shadow: var(--wg-velvet-shadow) !important;
|
|
}
|
|
|
|
.westgate-surface-hover,
|
|
li[component="categories/category"]:hover,
|
|
li[component="category/topic"]:hover,
|
|
li[component="post"] .post-container:hover {
|
|
background: var(--wg-velvet-panel-hover) !important;
|
|
border-color: rgba(194, 163, 90, 0.22) !important;
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.035),
|
|
inset 0 0 38px rgba(120, 36, 84, 0.14),
|
|
0 12px 30px rgba(0, 0, 0, 0.3) !important;
|
|
}
|
|
|
|
.badge,
|
|
.btn,
|
|
.dropdown-menu,
|
|
.form-control,
|
|
.form-select,
|
|
.pagination,
|
|
.topic-list-header,
|
|
.category-tools,
|
|
.meta.stats,
|
|
.timeago {
|
|
font-family: var(--wg-font-ui);
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
.category-title,
|
|
.topic-title,
|
|
li[component="categories/category"] h2.title,
|
|
li[component="category/topic"] h3[component="topic/header"] {
|
|
color: var(--wg-text);
|
|
font-family: var(--wg-font-display);
|
|
font-weight: 600;
|
|
letter-spacing: 0;
|
|
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9), 0 0 10px rgba(104, 32, 76, 0.16);
|
|
}
|
|
|
|
p,
|
|
li,
|
|
.description,
|
|
.post-content,
|
|
.topic-text,
|
|
[component="post/content"],
|
|
[component="chat/message/body"] {
|
|
font-family: var(--wg-font-text);
|
|
}
|
|
|
|
code,
|
|
kbd,
|
|
pre,
|
|
samp,
|
|
.text-tabular {
|
|
font-family: var(--wg-font-code) !important;
|
|
}
|
|
|
|
.breadcrumb {
|
|
--bs-breadcrumb-divider-color: var(--wg-gold-soft);
|
|
color: var(--wg-text-muted);
|
|
}
|
|
|
|
.breadcrumb a,
|
|
.breadcrumb-item.active {
|
|
color: var(--wg-text-muted);
|
|
}
|
|
|
|
.alert {
|
|
background: rgba(194, 163, 90, 0.08);
|
|
border-color: rgba(194, 163, 90, 0.18);
|
|
color: var(--wg-text-soft);
|
|
}
|
|
|
|
.alert-danger {
|
|
background: rgba(142, 52, 56, 0.16);
|
|
border-color: rgba(142, 52, 56, 0.32);
|
|
color: #d8b1b1;
|
|
}
|
|
|
|
.avatar,
|
|
[component="user/picture"] img,
|
|
.user-icon,
|
|
.avatar-tooltip .avatar,
|
|
.avatar-tooltip img {
|
|
border: 1px solid rgba(216, 194, 138, 0.32);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 242, 204, 0.2),
|
|
inset 0 0 0 1px rgba(18, 15, 22, 0.58),
|
|
inset 0 -3px 6px rgba(0, 0, 0, 0.48),
|
|
0 0 0 1px rgba(53, 46, 49, 0.92),
|
|
0 0 0 2px rgba(124, 105, 62, 0.22),
|
|
0 7px 16px rgba(0, 0, 0, 0.36) !important;
|
|
filter: saturate(0.88) contrast(1.08);
|
|
}
|
|
|
|
.user-icon {
|
|
background-image:
|
|
radial-gradient(circle at 34% 22%, rgba(255, 238, 190, 0.22), transparent 25%),
|
|
linear-gradient(145deg, rgba(111, 86, 45, 0.36), rgba(30, 29, 34, 0.28) 42%, rgba(44, 17, 34, 0.2)) !important;
|
|
text-shadow:
|
|
0 1px 0 rgba(0, 0, 0, 0.78),
|
|
0 -1px 0 rgba(255, 238, 190, 0.16),
|
|
0 0 8px rgba(0, 0, 0, 0.24);
|
|
}
|
|
|
|
li[component="post"] .avatar,
|
|
li[component="category/topic"] .avatar,
|
|
li[component="category/topic"] .user-icon {
|
|
border-radius: 999px !important;
|
|
}
|
|
|
|
.status {
|
|
box-shadow:
|
|
0 0 0 2px var(--wg-status-ring),
|
|
0 0 0 3px rgba(216, 194, 138, 0.14),
|
|
0 0 12px rgba(0, 0, 0, 0.34);
|
|
|
|
&.online {
|
|
color: var(--wg-status-online) !important;
|
|
background-color: var(--wg-status-online) !important;
|
|
}
|
|
|
|
&.away {
|
|
color: var(--wg-status-away) !important;
|
|
background-color: var(--wg-status-away) !important;
|
|
}
|
|
|
|
&.dnd {
|
|
color: var(--wg-status-dnd) !important;
|
|
background-color: var(--wg-status-dnd) !important;
|
|
}
|
|
|
|
&.offline {
|
|
color: var(--wg-status-offline) !important;
|
|
background-color: var(--wg-status-offline) !important;
|
|
}
|
|
}
|
|
|
|
.fa-circle.status {
|
|
text-shadow:
|
|
0 0 0 2px var(--wg-status-ring),
|
|
0 0 10px rgba(0, 0, 0, 0.34);
|
|
}
|
|
|
|
.account,
|
|
.account .profile,
|
|
.account .cover,
|
|
.users .users-container,
|
|
.groups.list,
|
|
.notifications-list,
|
|
.chats-list,
|
|
.settings,
|
|
.user-profile,
|
|
.user-card,
|
|
.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;
|
|
}
|
|
|
|
[component="chat/user/list"] [component="chat/user/list/username"] {
|
|
color: var(--wg-text-muted) !important;
|
|
}
|
|
|
|
[component="chat/user/list"] [data-uid].online [component="chat/user/list/username"] {
|
|
color: var(--wg-text) !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.page-flags [component="flags/filters"] {
|
|
border-bottom-color: rgba(194, 163, 90, 0.12) !important;
|
|
}
|
|
|
|
.page-flags [component="flags/list"] {
|
|
--bs-table-bg: transparent;
|
|
--bs-table-color: var(--wg-text-soft);
|
|
--bs-table-border-color: rgba(194, 163, 90, 0.1);
|
|
--bs-table-hover-bg: rgba(194, 163, 90, 0.04);
|
|
--bs-table-hover-color: var(--wg-text);
|
|
color: var(--wg-text-soft) !important;
|
|
}
|
|
|
|
.page-flags [component="flags/list"] :where(th, td) {
|
|
color: var(--wg-text-soft) !important;
|
|
border-color: rgba(194, 163, 90, 0.1) !important;
|
|
}
|
|
|
|
.page-flags [component="flags/list"] thead :where(th, td) {
|
|
color: var(--wg-ledger-ink-muted) !important;
|
|
}
|
|
|
|
.page-flags [component="flags/list"] a.text-reset {
|
|
color: var(--wg-text-muted) !important;
|
|
}
|
|
|
|
.page-flags [component="flags/list"] a.text-reset:hover,
|
|
.page-flags [component="flags/list"] a.text-reset:focus {
|
|
color: var(--wg-text) !important;
|
|
}
|
|
|
|
.page-flags [component="flags/list"] input[type="checkbox"] {
|
|
accent-color: var(--wg-gold);
|
|
}
|
|
|
|
.page-flags [component="flags/list"] .badge,
|
|
.page-flags .card.card-header {
|
|
color: var(--wg-text) !important;
|
|
}
|