diff --git a/scss/westgate/_categories.scss b/scss/westgate/_categories.scss index 80adf5b..611c4db 100644 --- a/scss/westgate/_categories.scss +++ b/scss/westgate/_categories.scss @@ -20,8 +20,7 @@ li[component="categories/category"] { transition: background 0.18s ease, border-color 0.18s ease, - box-shadow 0.18s ease, - transform 0.18s ease; + box-shadow 0.18s ease; } li[component="categories/category"].unread { @@ -29,8 +28,15 @@ li[component="categories/category"].unread { } li[component="categories/category"] .icon { - border: 1px solid rgba(246, 223, 163, 0.34); + border: 1px solid var(--wg-etched-highlight); border-radius: 6px !important; + // ACP colors arrive candy-bright; the plum wash and filter pull the + // plate into the velvet register while keeping the per-category hue + background-image: linear-gradient( + 160deg, + rgba(42, 18, 34, 0.42), + rgba(9, 8, 11, 0.58) + ); box-shadow: inset 0 1px 0 rgba(255, 242, 204, 0.28), inset 0 0 0 1px rgba(18, 15, 22, 0.62), @@ -38,7 +44,7 @@ li[component="categories/category"] .icon { 0 0 0 1px rgba(56, 48, 42, 0.9), 0 0 0 2px rgba(124, 105, 62, 0.24), 0 9px 18px rgba(0, 0, 0, 0.32); - filter: saturate(0.82) contrast(1.12); + filter: saturate(0.62) contrast(1.12); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.72), 0 -1px 0 rgba(255, 238, 190, 0.18), @@ -46,7 +52,13 @@ li[component="categories/category"] .icon { } body.template-category .category-header .icon { - border: 1px solid rgba(246, 223, 163, 0.34); + border: 1px solid var(--wg-etched-highlight); + background-image: linear-gradient( + 160deg, + rgba(42, 18, 34, 0.42), + rgba(9, 8, 11, 0.58) + ); + filter: saturate(0.62) contrast(1.12); box-shadow: inset 0 1px 0 rgba(255, 242, 204, 0.28), inset 0 0 0 1px rgba(18, 15, 22, 0.62), @@ -272,7 +284,7 @@ ul.category-children { rgba(30, 28, 34, 0.62) 46%, rgba(36, 18, 29, 0.78) ); - border: 1px solid rgba(246, 223, 163, 0.3); + border: 1px solid var(--wg-etched-highlight); border-radius: 4px !important; box-shadow: inset 0 1px 0 rgba(255, 240, 190, 0.28), diff --git a/scss/westgate/_surfaces.scss b/scss/westgate/_surfaces.scss index 4a3564d..4408585 100644 --- a/scss/westgate/_surfaces.scss +++ b/scss/westgate/_surfaces.scss @@ -224,8 +224,26 @@ li[component="category/topic"] .user-icon { text-transform: none; } +// 404: core ships a beige dog glyph; wear the cowl instead +.template-404 i.fa-dog { + display: inline-block; + width: 4.5rem; + height: 4.5rem; + background-color: var(--wg-gold-soft); + -webkit-mask: url("./plugins/nodebb-theme-westgate/game-icons/cowled.svg") + center / contain no-repeat; + mask: url("./plugins/nodebb-theme-westgate/game-icons/cowled.svg") + center / contain no-repeat; + + &::before { + content: ""; + } +} + // replace core's grey-triangle default cover with the velvet material -.cover[style*="cover-default.png"] { +// (.cover on profiles, .list-cover on the groups list) +.cover[style*="cover-default.png"], +.list-cover[style*="cover-default.png"] { background-image: radial-gradient(120% 90% at 18% 0%, rgba(58, 24, 48, 0.6), transparent 60%), linear-gradient(100deg, #2a1222, #110f15 55%, #09080b) !important;