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

Ticket icon

Browse Source
This commit is contained in:
archvillainette
2026-06-07 09:34:06 +02:00
parent 48039ee77e
commit cd8845cc6a
3 changed files with 263 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
GAME_ICONS.md
+2 -1
View File
@@ -11,7 +11,7 @@ The SVGs in `public/game-icons/` were sanitized for theme use by removing the de
## Recommended Mapping
| Category | Recommended icon | ACP custom class | Asset |
| --- | --- | --- | --- |
| ------------------------- | ------------------- | ----------------------------- | ------------------------------------------- |
| INFORMATION | Scroll unfurled | `wg-icon-scroll-unfurled` | `public/game-icons/scroll-unfurled.svg` |
| Player Guide | Compass | `wg-icon-compass` | `public/game-icons/compass.svg` |
| Announcements | Trumpet flag | `wg-icon-trumpet-flag` | `public/game-icons/trumpet-flag.svg` |
@@ -39,6 +39,7 @@ The SVGs in `public/game-icons/` were sanitized for theme use by removing the de
| Designs | Pencil ruler | `wg-icon-pencil-ruler` | `public/game-icons/pencil-ruler.svg` |
| Programming | Gears | `wg-icon-gears` | `public/game-icons/gears.svg` |
| Area Building | Castle ruins | `wg-icon-castle-ruins` | `public/game-icons/castle-ruins.svg` |
| Applications & Reports | Ticket | `wg-icon-ticket` | `public/game-icons/ticket.svg` |
The stylesheet still defines earlier classes such as `wg-icon-scroll-quill`, `wg-icon-rule-book`, `wg-icon-ringing-bell`, `wg-icon-saloon`, `wg-icon-large-paint-brush`, `wg-icon-flute`, `wg-icon-drama-masks`, `wg-icon-target-poster`, `wg-icon-chat-bubble`, `wg-icon-notebook`, `wg-icon-glowing-hands`, `wg-icon-question`, `wg-icon-monkey-wrench`, `wg-icon-idea`, `wg-icon-toolbox`, `wg-icon-open-book`, and `wg-icon-processor` as legacy fallbacks. Prefer the table above for new ACP configuration.
public/game-icons/ticket.svg
+1
View File
@@ -0,0 +1 @@
<svg style="height: 512px; width: 512px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 0h512v512H0z" fill="#000000" fill-opacity="0.01"></path><g class="" style="" transform="translate(-1,1)"><path d="m323.9 19.81-55.2 55.15L285 91.24 272.2 104 256 87.73 19.81 323.9l45.57 45.6c28.5-14.6 56.22-11.7 72.52 4.6 16.3 16.3 19.2 44 4.6 72.5l45.6 45.6 236.1-236.1-16.2-16.3 12.8-12.8 16.3 16.2 55.1-55.1-45.6-45.6c-28.5 14.6-56.2 11.7-72.5-4.6-16.3-16.3-19.2-44.02-4.6-72.52zm-16.2 93.99 33.9 34-12.8 12.8-33.9-34zM256 130.2 381.8 256 222.1 415.8 96.16 289.9 249.6 136.5zm0 25.4L121.6 289.9l100.5 100.5L356.4 256zm108.2 14.8 34 33.9-12.8 12.8-34-33.9z" fill="#000000" fill-opacity="1"></path></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 720 B

scss/westgate/_categories.scss
+54 -15
View File
@@ -17,7 +17,11 @@ li[component="categories/category"] {
margin: 0 !important;
padding: 1rem !important;
overflow: visible;
transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
transition:
background 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease;
}
li[component="categories/category"].unread {
@@ -97,7 +101,8 @@ $wg-game-icons: (
open-book: "open-book.svg",
pencil-ruler: "pencil-ruler.svg",
processor: "processor.svg",
castle-ruins: "castle-ruins.svg"
castle-ruins: "castle-ruins.svg",
ticket: "ticket.svg",
);
.westgate-category-header-icon {
@@ -107,7 +112,10 @@ $wg-game-icons: (
}
.westgate-category-header-icon[class*="wg-icon-"] > .icon,
li[component="categories/category"][class*="wg-icon-"] > .d-flex > .flex-shrink-0 > .icon,
li[component="categories/category"][class*="wg-icon-"]
> .d-flex
> .flex-shrink-0
> .icon,
.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon,
.category-item[class*="wg-icon-"] > .icon {
position: relative;
@@ -115,22 +123,33 @@ li[component="categories/category"][class*="wg-icon-"] > .d-flex > .flex-shrink-
}
.westgate-category-header-icon[class*="wg-icon-"] > .icon > i,
li[component="categories/category"][class*="wg-icon-"] > .d-flex > .flex-shrink-0 > .icon > i,
.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon > i,
li[component="categories/category"][class*="wg-icon-"]
> .d-flex
> .flex-shrink-0
> .icon
> i,
.category-children-item[class*="wg-icon-"]
> .westgate-category-child
> .icon
> i,
.category-item[class*="wg-icon-"] > .icon > i {
opacity: 0;
}
.westgate-category-header-icon[class*="wg-icon-"] > .icon::before,
li[component="categories/category"][class*="wg-icon-"] > .d-flex > .flex-shrink-0 > .icon::before,
.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon::before,
li[component="categories/category"][class*="wg-icon-"]
> .d-flex
> .flex-shrink-0
> .icon::before,
.category-children-item[class*="wg-icon-"]
> .westgate-category-child
> .icon::before,
.category-item[class*="wg-icon-"] > .icon::before {
content: "";
position: absolute;
inset: 13%;
background: currentColor;
filter:
drop-shadow(0 1px 0 rgba(0, 0, 0, 0.72))
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.72))
drop-shadow(0 -1px 0 rgba(255, 238, 190, 0.16));
mask-position: center;
mask-repeat: no-repeat;
@@ -142,7 +161,9 @@ li[component="categories/category"][class*="wg-icon-"] > .d-flex > .flex-shrink-
inset: 11%;
}
.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon::before {
.category-children-item[class*="wg-icon-"]
> .westgate-category-child
> .icon::before {
inset: 16%;
}
@@ -152,8 +173,13 @@ li[component="categories/category"][class*="wg-icon-"] > .d-flex > .flex-shrink-
@each $name, $file in $wg-game-icons {
.westgate-category-header-icon.wg-icon-#{$name} > .icon::before,
li[component="categories/category"].wg-icon-#{$name} > .d-flex > .flex-shrink-0 > .icon::before,
.category-children-item.wg-icon-#{$name} > .westgate-category-child > .icon::before,
li[component="categories/category"].wg-icon-#{$name}
> .d-flex
> .flex-shrink-0
> .icon::before,
.category-children-item.wg-icon-#{$name}
> .westgate-category-child
> .icon::before,
.category-item.wg-icon-#{$name} > .icon::before {
-webkit-mask-image: url("#{$wg-game-icon-path}#{$file}");
mask-image: url("#{$wg-game-icon-path}#{$file}");
@@ -179,7 +205,12 @@ li[component="categories/category"] h2.title::after {
right: 0;
bottom: -0.45rem;
height: 1px;
background: linear-gradient(to right, rgba(194, 163, 90, 0.13), rgba(194, 163, 90, 0.045) 58%, transparent 94%);
background: linear-gradient(
to right,
rgba(194, 163, 90, 0.13),
rgba(194, 163, 90, 0.045) 58%,
transparent 94%
);
pointer-events: none;
}
@@ -216,7 +247,10 @@ ul.category-children {
background: rgba(44, 22, 34, 0.3);
border: 1px solid rgba(194, 163, 90, 0.11);
border-radius: 8px;
transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
transition:
background 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease;
}
.westgate-category-child .icon,
@@ -228,7 +262,12 @@ ul.category-children {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, rgba(105, 82, 45, 0.48), rgba(30, 28, 34, 0.62) 46%, rgba(36, 18, 29, 0.78));
background: linear-gradient(
145deg,
rgba(105, 82, 45, 0.48),
rgba(30, 28, 34, 0.62) 46%,
rgba(36, 18, 29, 0.78)
);
border: 1px solid rgba(246, 223, 163, 0.3);
border-radius: 4px !important;
box-shadow: