Files
sow-nodebb-theme/scss/westgate/_surfaces.scss
T
2026-04-22 14:40:59 +02:00

185 lines
3.6 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.2);
box-shadow:
inset 0 1px 0 rgba(255, 238, 190, 0.18),
inset 0 -2px 4px rgba(0, 0, 0, 0.44),
0 0 0 1px rgba(24, 13, 19, 0.82),
0 6px 14px rgba(0, 0, 0, 0.34) !important;
filter: saturate(0.9) contrast(1.05);
}
.user-icon {
background-image:
radial-gradient(circle at 34% 22%, rgba(255, 238, 190, 0.2), transparent 26%),
linear-gradient(145deg, rgba(90, 58, 32, 0.42), rgba(44, 17, 34, 0.22)) !important;
text-shadow:
0 1px 0 rgba(0, 0, 0, 0.78),
0 -1px 0 rgba(255, 238, 190, 0.12);
}
li[component="post"] .avatar,
li[component="category/topic"] .avatar,
li[component="category/topic"] .user-icon {
border-radius: 999px !important;
}
.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);
}