Ticket icon
This commit is contained in:
+30
-29
@@ -10,35 +10,36 @@ The SVGs in `public/game-icons/` were sanitized for theme use by removing the de
|
|||||||
|
|
||||||
## Recommended Mapping
|
## Recommended Mapping
|
||||||
|
|
||||||
| Category | Recommended icon | ACP custom class | Asset |
|
| Category | Recommended icon | ACP custom class | Asset |
|
||||||
| --- | --- | --- | --- |
|
| ------------------------- | ------------------- | ----------------------------- | ------------------------------------------- |
|
||||||
| INFORMATION | Scroll unfurled | `wg-icon-scroll-unfurled` | `public/game-icons/scroll-unfurled.svg` |
|
| INFORMATION | Scroll unfurled | `wg-icon-scroll-unfurled` | `public/game-icons/scroll-unfurled.svg` |
|
||||||
| Player Guide | Compass | `wg-icon-compass` | `public/game-icons/compass.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` |
|
| Announcements | Trumpet flag | `wg-icon-trumpet-flag` | `public/game-icons/trumpet-flag.svg` |
|
||||||
| Patch Notes | Spinning wheel | `wg-icon-spinning-wheel` | `public/game-icons/spinning-wheel.svg` |
|
| Patch Notes | Spinning wheel | `wg-icon-spinning-wheel` | `public/game-icons/spinning-wheel.svg` |
|
||||||
| COMMUNITY | Tavern sign | `wg-icon-tavern-sign` | `public/game-icons/tavern-sign.svg` |
|
| COMMUNITY | Tavern sign | `wg-icon-tavern-sign` | `public/game-icons/tavern-sign.svg` |
|
||||||
| General Discussion | Beer stein | `wg-icon-beer-stein` | `public/game-icons/beer-stein.svg` |
|
| General Discussion | Beer stein | `wg-icon-beer-stein` | `public/game-icons/beer-stein.svg` |
|
||||||
| Introductions | Shaking hands | `wg-icon-shaking-hands` | `public/game-icons/shaking-hands.svg` |
|
| Introductions | Shaking hands | `wg-icon-shaking-hands` | `public/game-icons/shaking-hands.svg` |
|
||||||
| Screenshots | Wood frame | `wg-icon-wood-frame` | `public/game-icons/wood-frame.svg` |
|
| Screenshots | Wood frame | `wg-icon-wood-frame` | `public/game-icons/wood-frame.svg` |
|
||||||
| Creations | Harp | `wg-icon-harp` | `public/game-icons/harp.svg` |
|
| Creations | Harp | `wg-icon-harp` | `public/game-icons/harp.svg` |
|
||||||
| ROLEPLAY | Duality mask | `wg-icon-duality-mask` | `public/game-icons/duality-mask.svg` |
|
| ROLEPLAY | Duality mask | `wg-icon-duality-mask` | `public/game-icons/duality-mask.svg` |
|
||||||
| Notices | Stabbed note | `wg-icon-stabbed-note` | `public/game-icons/stabbed-note.svg` |
|
| Notices | Stabbed note | `wg-icon-stabbed-note` | `public/game-icons/stabbed-note.svg` |
|
||||||
| Rumors & Gossip | Mute | `wg-icon-mute` | `public/game-icons/mute.svg` |
|
| Rumors & Gossip | Mute | `wg-icon-mute` | `public/game-icons/mute.svg` |
|
||||||
| Journals & Biographies | Sword altar | `wg-icon-sword-altar` | `public/game-icons/sword-altar.svg` |
|
| Journals & Biographies | Sword altar | `wg-icon-sword-altar` | `public/game-icons/sword-altar.svg` |
|
||||||
| Factions & Guilds | Cowled | `wg-icon-cowled` | `public/game-icons/cowled.svg` |
|
| Factions & Guilds | Cowled | `wg-icon-cowled` | `public/game-icons/cowled.svg` |
|
||||||
| Organization Registry | Wax seal | `wg-icon-wax-seal` | `public/game-icons/wax-seal.svg` |
|
| Organization Registry | Wax seal | `wg-icon-wax-seal` | `public/game-icons/wax-seal.svg` |
|
||||||
| SUPPORT | Candle flame | `wg-icon-candle-flame` | `public/game-icons/candle-flame.svg` |
|
| SUPPORT | Candle flame | `wg-icon-candle-flame` | `public/game-icons/candle-flame.svg` |
|
||||||
| Common Issues & Questions | Key lock | `wg-icon-key-lock` | `public/game-icons/key-lock.svg` |
|
| Common Issues & Questions | Key lock | `wg-icon-key-lock` | `public/game-icons/key-lock.svg` |
|
||||||
| Technical Help | Round potion | `wg-icon-round-potion` | `public/game-icons/round-potion.svg` |
|
| Technical Help | Round potion | `wg-icon-round-potion` | `public/game-icons/round-potion.svg` |
|
||||||
| Bug Reports | Long antennae bug | `wg-icon-long-antennae-bug` | `public/game-icons/long-antennae-bug.svg` |
|
| Bug Reports | Long antennae bug | `wg-icon-long-antennae-bug` | `public/game-icons/long-antennae-bug.svg` |
|
||||||
| Feedback | Envelope | `wg-icon-envelope` | `public/game-icons/envelope.svg` |
|
| Feedback | Envelope | `wg-icon-envelope` | `public/game-icons/envelope.svg` |
|
||||||
| DEVELOPMENT | Anvil | `wg-icon-anvil` | `public/game-icons/anvil.svg` |
|
| DEVELOPMENT | Anvil | `wg-icon-anvil` | `public/game-icons/anvil.svg` |
|
||||||
| Tools & References | Spanner | `wg-icon-spanner` | `public/game-icons/spanner.svg` |
|
| Tools & References | Spanner | `wg-icon-spanner` | `public/game-icons/spanner.svg` |
|
||||||
| General | Wax tablet | `wg-icon-wax-tablet` | `public/game-icons/wax-tablet.svg` |
|
| General | Wax tablet | `wg-icon-wax-tablet` | `public/game-icons/wax-tablet.svg` |
|
||||||
| Lore | Classical knowledge | `wg-icon-classical-knowledge` | `public/game-icons/classical-knowledge.svg` |
|
| Lore | Classical knowledge | `wg-icon-classical-knowledge` | `public/game-icons/classical-knowledge.svg` |
|
||||||
| Designs | Pencil ruler | `wg-icon-pencil-ruler` | `public/game-icons/pencil-ruler.svg` |
|
| Designs | Pencil ruler | `wg-icon-pencil-ruler` | `public/game-icons/pencil-ruler.svg` |
|
||||||
| Programming | Gears | `wg-icon-gears` | `public/game-icons/gears.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` |
|
| 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.
|
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.
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
After Width: | Height: | Size: 720 B |
+232
-193
@@ -1,306 +1,345 @@
|
|||||||
body.template-categories #content > .row,
|
body.template-categories #content > .row,
|
||||||
.westgate-categories-page {
|
.westgate-categories-page {
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.categories-list,
|
ul.categories-list,
|
||||||
ul.westgate-categories-list {
|
ul.westgate-categories-list {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 0.75rem;
|
gap: 0.75rem;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
li[component="categories/category"] {
|
li[component="categories/category"] {
|
||||||
position: relative;
|
position: relative;
|
||||||
isolation: isolate;
|
isolation: isolate;
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
padding: 1rem !important;
|
padding: 1rem !important;
|
||||||
overflow: visible;
|
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 {
|
li[component="categories/category"].unread {
|
||||||
border-color: rgba(194, 163, 90, 0.24) !important;
|
border-color: rgba(194, 163, 90, 0.24) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
li[component="categories/category"] .icon {
|
li[component="categories/category"] .icon {
|
||||||
border: 1px solid rgba(246, 223, 163, 0.34);
|
border: 1px solid rgba(246, 223, 163, 0.34);
|
||||||
border-radius: 6px !important;
|
border-radius: 6px !important;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
inset 0 1px 0 rgba(255, 242, 204, 0.28),
|
inset 0 1px 0 rgba(255, 242, 204, 0.28),
|
||||||
inset 0 0 0 1px rgba(18, 15, 22, 0.62),
|
inset 0 0 0 1px rgba(18, 15, 22, 0.62),
|
||||||
inset 0 -3px 7px rgba(0, 0, 0, 0.52),
|
inset 0 -3px 7px rgba(0, 0, 0, 0.52),
|
||||||
0 0 0 1px rgba(56, 48, 42, 0.9),
|
0 0 0 1px rgba(56, 48, 42, 0.9),
|
||||||
0 0 0 2px rgba(124, 105, 62, 0.24),
|
0 0 0 2px rgba(124, 105, 62, 0.24),
|
||||||
0 9px 18px rgba(0, 0, 0, 0.32);
|
0 9px 18px rgba(0, 0, 0, 0.32);
|
||||||
filter: saturate(0.82) contrast(1.12);
|
filter: saturate(0.82) contrast(1.12);
|
||||||
text-shadow:
|
text-shadow:
|
||||||
0 1px 0 rgba(0, 0, 0, 0.72),
|
0 1px 0 rgba(0, 0, 0, 0.72),
|
||||||
0 -1px 0 rgba(255, 238, 190, 0.18),
|
0 -1px 0 rgba(255, 238, 190, 0.18),
|
||||||
0 0 8px rgba(0, 0, 0, 0.22);
|
0 0 8px rgba(0, 0, 0, 0.22);
|
||||||
}
|
}
|
||||||
|
|
||||||
body.template-category .category-header .icon {
|
body.template-category .category-header .icon {
|
||||||
border: 1px solid rgba(246, 223, 163, 0.34);
|
border: 1px solid rgba(246, 223, 163, 0.34);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
inset 0 1px 0 rgba(255, 242, 204, 0.28),
|
inset 0 1px 0 rgba(255, 242, 204, 0.28),
|
||||||
inset 0 0 0 1px rgba(18, 15, 22, 0.62),
|
inset 0 0 0 1px rgba(18, 15, 22, 0.62),
|
||||||
inset 0 -3px 7px rgba(0, 0, 0, 0.52),
|
inset 0 -3px 7px rgba(0, 0, 0, 0.52),
|
||||||
0 0 0 1px rgba(56, 48, 42, 0.9),
|
0 0 0 1px rgba(56, 48, 42, 0.9),
|
||||||
0 0 0 2px rgba(124, 105, 62, 0.24),
|
0 0 0 2px rgba(124, 105, 62, 0.24),
|
||||||
0 9px 18px rgba(0, 0, 0, 0.32);
|
0 9px 18px rgba(0, 0, 0, 0.32);
|
||||||
}
|
}
|
||||||
|
|
||||||
$wg-game-icon-path: "./plugins/nodebb-theme-westgate/game-icons/";
|
$wg-game-icon-path: "./plugins/nodebb-theme-westgate/game-icons/";
|
||||||
$wg-game-icons: (
|
$wg-game-icons: (
|
||||||
scroll-unfurled: "scroll-unfurled.svg",
|
scroll-unfurled: "scroll-unfurled.svg",
|
||||||
scroll-quill: "scroll-quill.svg",
|
scroll-quill: "scroll-quill.svg",
|
||||||
rule-book: "rule-book.svg",
|
rule-book: "rule-book.svg",
|
||||||
trumpet-flag: "trumpet-flag.svg",
|
trumpet-flag: "trumpet-flag.svg",
|
||||||
ringing-bell: "ringing-bell.svg",
|
ringing-bell: "ringing-bell.svg",
|
||||||
spinning-wheel: "spinning-wheel.svg",
|
spinning-wheel: "spinning-wheel.svg",
|
||||||
tavern-sign: "tavern-sign.svg",
|
tavern-sign: "tavern-sign.svg",
|
||||||
beer-stein: "beer-stein.svg",
|
beer-stein: "beer-stein.svg",
|
||||||
saloon: "saloon.svg",
|
saloon: "saloon.svg",
|
||||||
shaking-hands: "shaking-hands.svg",
|
shaking-hands: "shaking-hands.svg",
|
||||||
wood-frame: "wood-frame.svg",
|
wood-frame: "wood-frame.svg",
|
||||||
large-paint-brush: "large-paint-brush.svg",
|
large-paint-brush: "large-paint-brush.svg",
|
||||||
harp: "harp.svg",
|
harp: "harp.svg",
|
||||||
flute: "flute.svg",
|
flute: "flute.svg",
|
||||||
duality-mask: "duality-mask.svg",
|
duality-mask: "duality-mask.svg",
|
||||||
drama-masks: "drama-masks.svg",
|
drama-masks: "drama-masks.svg",
|
||||||
stabbed-note: "stabbed-note.svg",
|
stabbed-note: "stabbed-note.svg",
|
||||||
target-poster: "target-poster.svg",
|
target-poster: "target-poster.svg",
|
||||||
mute: "mute.svg",
|
mute: "mute.svg",
|
||||||
chat-bubble: "chat-bubble.svg",
|
chat-bubble: "chat-bubble.svg",
|
||||||
sword-altar: "sword-altar.svg",
|
sword-altar: "sword-altar.svg",
|
||||||
notebook: "notebook.svg",
|
notebook: "notebook.svg",
|
||||||
cowled: "cowled.svg",
|
cowled: "cowled.svg",
|
||||||
wax-seal: "wax-seal.svg",
|
wax-seal: "wax-seal.svg",
|
||||||
candle-flame: "candle-flame.svg",
|
candle-flame: "candle-flame.svg",
|
||||||
glowing-hands: "glowing-hands.svg",
|
glowing-hands: "glowing-hands.svg",
|
||||||
key-lock: "key-lock.svg",
|
key-lock: "key-lock.svg",
|
||||||
question: "question.svg",
|
question: "question.svg",
|
||||||
round-potion: "round-potion.svg",
|
round-potion: "round-potion.svg",
|
||||||
monkey-wrench: "monkey-wrench.svg",
|
monkey-wrench: "monkey-wrench.svg",
|
||||||
long-antennae-bug: "long-antennae-bug.svg",
|
long-antennae-bug: "long-antennae-bug.svg",
|
||||||
envelope: "envelope.svg",
|
envelope: "envelope.svg",
|
||||||
idea: "idea.svg",
|
idea: "idea.svg",
|
||||||
anvil: "anvil.svg",
|
anvil: "anvil.svg",
|
||||||
gears: "gears.svg",
|
gears: "gears.svg",
|
||||||
spanner: "spanner.svg",
|
spanner: "spanner.svg",
|
||||||
toolbox: "toolbox.svg",
|
toolbox: "toolbox.svg",
|
||||||
compass: "compass.svg",
|
compass: "compass.svg",
|
||||||
wax-tablet: "wax-tablet.svg",
|
wax-tablet: "wax-tablet.svg",
|
||||||
classical-knowledge: "classical-knowledge.svg",
|
classical-knowledge: "classical-knowledge.svg",
|
||||||
open-book: "open-book.svg",
|
open-book: "open-book.svg",
|
||||||
pencil-ruler: "pencil-ruler.svg",
|
pencil-ruler: "pencil-ruler.svg",
|
||||||
processor: "processor.svg",
|
processor: "processor.svg",
|
||||||
castle-ruins: "castle-ruins.svg"
|
castle-ruins: "castle-ruins.svg",
|
||||||
|
ticket: "ticket.svg",
|
||||||
);
|
);
|
||||||
|
|
||||||
.westgate-category-header-icon {
|
.westgate-category-header-icon {
|
||||||
flex-basis: auto;
|
flex-basis: auto;
|
||||||
width: auto;
|
width: auto;
|
||||||
max-width: none;
|
max-width: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.westgate-category-header-icon[class*="wg-icon-"] > .icon,
|
.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-children-item[class*="wg-icon-"] > .westgate-category-child > .icon,
|
||||||
.category-item[class*="wg-icon-"] > .icon {
|
.category-item[class*="wg-icon-"] > .icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
color: var(--wg-ledger-ink);
|
color: var(--wg-ledger-ink);
|
||||||
}
|
}
|
||||||
|
|
||||||
.westgate-category-header-icon[class*="wg-icon-"] > .icon > i,
|
.westgate-category-header-icon[class*="wg-icon-"] > .icon > i,
|
||||||
li[component="categories/category"][class*="wg-icon-"] > .d-flex > .flex-shrink-0 > .icon > i,
|
li[component="categories/category"][class*="wg-icon-"]
|
||||||
.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon > i,
|
> .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 {
|
.category-item[class*="wg-icon-"] > .icon > i {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.westgate-category-header-icon[class*="wg-icon-"] > .icon::before,
|
.westgate-category-header-icon[class*="wg-icon-"] > .icon::before,
|
||||||
li[component="categories/category"][class*="wg-icon-"] > .d-flex > .flex-shrink-0 > .icon::before,
|
li[component="categories/category"][class*="wg-icon-"]
|
||||||
.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon::before,
|
> .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 {
|
.category-item[class*="wg-icon-"] > .icon::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 13%;
|
inset: 13%;
|
||||||
background: currentColor;
|
background: currentColor;
|
||||||
filter:
|
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.72))
|
||||||
drop-shadow(0 1px 0 rgba(0, 0, 0, 0.72))
|
drop-shadow(0 -1px 0 rgba(255, 238, 190, 0.16));
|
||||||
drop-shadow(0 -1px 0 rgba(255, 238, 190, 0.16));
|
mask-position: center;
|
||||||
mask-position: center;
|
mask-repeat: no-repeat;
|
||||||
mask-repeat: no-repeat;
|
mask-size: contain;
|
||||||
mask-size: contain;
|
pointer-events: none;
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.westgate-category-header-icon[class*="wg-icon-"] > .icon::before {
|
.westgate-category-header-icon[class*="wg-icon-"] > .icon::before {
|
||||||
inset: 11%;
|
inset: 11%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon::before {
|
.category-children-item[class*="wg-icon-"]
|
||||||
inset: 16%;
|
> .westgate-category-child
|
||||||
|
> .icon::before {
|
||||||
|
inset: 16%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-item[class*="wg-icon-"] > .icon::before {
|
.category-item[class*="wg-icon-"] > .icon::before {
|
||||||
inset: 18%;
|
inset: 18%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $name, $file in $wg-game-icons {
|
@each $name, $file in $wg-game-icons {
|
||||||
.westgate-category-header-icon.wg-icon-#{$name} > .icon::before,
|
.westgate-category-header-icon.wg-icon-#{$name} > .icon::before,
|
||||||
li[component="categories/category"].wg-icon-#{$name} > .d-flex > .flex-shrink-0 > .icon::before,
|
li[component="categories/category"].wg-icon-#{$name}
|
||||||
.category-children-item.wg-icon-#{$name} > .westgate-category-child > .icon::before,
|
> .d-flex
|
||||||
.category-item.wg-icon-#{$name} > .icon::before {
|
> .flex-shrink-0
|
||||||
-webkit-mask-image: url("#{$wg-game-icon-path}#{$file}");
|
> .icon::before,
|
||||||
mask-image: url("#{$wg-game-icon-path}#{$file}");
|
.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}");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li[component="categories/category"] h2.title {
|
li[component="categories/category"] h2.title {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-bottom: 0.18rem;
|
padding-bottom: 0.18rem;
|
||||||
font-size: 1.24rem !important;
|
font-size: 1.24rem !important;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
li[component="categories/category"] h2.title a {
|
li[component="categories/category"] h2.title a {
|
||||||
color: var(--wg-text) !important;
|
color: var(--wg-text) !important;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
li[component="categories/category"] h2.title::after {
|
li[component="categories/category"] h2.title::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: -0.45rem;
|
bottom: -0.45rem;
|
||||||
height: 1px;
|
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(
|
||||||
pointer-events: none;
|
to right,
|
||||||
|
rgba(194, 163, 90, 0.13),
|
||||||
|
rgba(194, 163, 90, 0.045) 58%,
|
||||||
|
transparent 94%
|
||||||
|
);
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
li[component="categories/category"] .description {
|
li[component="categories/category"] .description {
|
||||||
color: var(--wg-text-muted) !important;
|
color: var(--wg-text-muted) !important;
|
||||||
line-height: 1.45;
|
line-height: 1.45;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.category-children {
|
ul.category-children {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
margin-top: 0.55rem !important;
|
margin-top: 0.55rem !important;
|
||||||
padding-top: 0.35rem;
|
padding-top: 0.35rem;
|
||||||
border-top: 0 !important;
|
border-top: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-children-item {
|
.category-children-item {
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
max-width: none !important;
|
max-width: none !important;
|
||||||
flex: initial !important;
|
flex: initial !important;
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-children-item > div,
|
.category-children-item > div,
|
||||||
.westgate-category-child {
|
.westgate-category-child {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: none;
|
max-width: none;
|
||||||
min-height: 2.1rem;
|
min-height: 2.1rem;
|
||||||
padding: 0.25rem 0.65rem 0.25rem 0.3rem;
|
padding: 0.25rem 0.65rem 0.25rem 0.3rem;
|
||||||
background: rgba(44, 22, 34, 0.3);
|
background: rgba(44, 22, 34, 0.3);
|
||||||
border: 1px solid rgba(194, 163, 90, 0.11);
|
border: 1px solid rgba(194, 163, 90, 0.11);
|
||||||
border-radius: 8px;
|
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,
|
.westgate-category-child .icon,
|
||||||
.westgate-child-icon,
|
.westgate-child-icon,
|
||||||
.category-children-item i.fa-caret-right {
|
.category-children-item i.fa-caret-right {
|
||||||
width: 27px !important;
|
width: 27px !important;
|
||||||
height: 27px !important;
|
height: 27px !important;
|
||||||
min-width: 27px;
|
min-width: 27px;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: 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(
|
||||||
border: 1px solid rgba(246, 223, 163, 0.3);
|
145deg,
|
||||||
border-radius: 4px !important;
|
rgba(105, 82, 45, 0.48),
|
||||||
box-shadow:
|
rgba(30, 28, 34, 0.62) 46%,
|
||||||
inset 0 1px 0 rgba(255, 240, 190, 0.28),
|
rgba(36, 18, 29, 0.78)
|
||||||
inset 0 0 0 1px rgba(17, 13, 18, 0.58),
|
);
|
||||||
inset 0 -1px 3px rgba(0, 0, 0, 0.46),
|
border: 1px solid rgba(246, 223, 163, 0.3);
|
||||||
0 0 0 1px rgba(31, 25, 24, 0.72),
|
border-radius: 4px !important;
|
||||||
0 0 0 2px rgba(124, 105, 62, 0.18);
|
box-shadow:
|
||||||
filter: saturate(0.8) contrast(1.12);
|
inset 0 1px 0 rgba(255, 240, 190, 0.28),
|
||||||
font-size: 0.82rem !important;
|
inset 0 0 0 1px rgba(17, 13, 18, 0.58),
|
||||||
line-height: 27px !important;
|
inset 0 -1px 3px rgba(0, 0, 0, 0.46),
|
||||||
|
0 0 0 1px rgba(31, 25, 24, 0.72),
|
||||||
|
0 0 0 2px rgba(124, 105, 62, 0.18);
|
||||||
|
filter: saturate(0.8) contrast(1.12);
|
||||||
|
font-size: 0.82rem !important;
|
||||||
|
line-height: 27px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-children-item i.fa-caret-right {
|
.category-children-item i.fa-caret-right {
|
||||||
color: var(--wg-ledger-ink) !important;
|
color: var(--wg-ledger-ink) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-children-item > div:hover,
|
.category-children-item > div:hover,
|
||||||
.westgate-category-child:hover {
|
.westgate-category-child:hover {
|
||||||
background: rgba(70, 30, 48, 0.4);
|
background: rgba(70, 30, 48, 0.4);
|
||||||
border-color: rgba(194, 163, 90, 0.24);
|
border-color: rgba(194, 163, 90, 0.24);
|
||||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-children-item a {
|
.category-children-item a {
|
||||||
color: #d8c28a !important;
|
color: #d8c28a !important;
|
||||||
display: block;
|
display: block;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-children-item a:hover {
|
.category-children-item a:hover {
|
||||||
color: #e0c878 !important;
|
color: #e0c878 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
li[component="categories/category"] .meta.stats > div {
|
li[component="categories/category"] .meta.stats > div {
|
||||||
min-height: 3.55rem;
|
min-height: 3.55rem;
|
||||||
background: rgba(255, 255, 255, 0.018) !important;
|
background: rgba(255, 255, 255, 0.018) !important;
|
||||||
border: 1px solid rgba(194, 163, 90, 0.09) !important;
|
border: 1px solid rgba(194, 163, 90, 0.09) !important;
|
||||||
border-radius: 3px !important;
|
border-radius: 3px !important;
|
||||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
|
||||||
}
|
}
|
||||||
|
|
||||||
li[component="categories/category"] .meta.stats .fs-5,
|
li[component="categories/category"] .meta.stats .fs-5,
|
||||||
li[component="categories/category"] .meta.stats .ff-secondary {
|
li[component="categories/category"] .meta.stats .ff-secondary {
|
||||||
color: var(--wg-text) !important;
|
color: var(--wg-text) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
li[component="categories/category"] .meta.stats .text-xs,
|
li[component="categories/category"] .meta.stats .text-xs,
|
||||||
li[component="categories/category"] .meta.stats .text-muted,
|
li[component="categories/category"] .meta.stats .text-muted,
|
||||||
li[component="categories/category"] .teaser,
|
li[component="categories/category"] .teaser,
|
||||||
li[component="categories/category"] .post-content {
|
li[component="categories/category"] .post-content {
|
||||||
color: var(--wg-text-muted) !important;
|
color: var(--wg-text-muted) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
li[component="categories/category"] .meta.stats .text-xs,
|
li[component="categories/category"] .meta.stats .text-xs,
|
||||||
li[component="categories/category"] .meta.stats .text-muted {
|
li[component="categories/category"] .meta.stats .text-muted {
|
||||||
font-family: var(--wg-font-ui);
|
font-family: var(--wg-font-ui);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
li[component="categories/category"] .lastpost {
|
li[component="categories/category"] .lastpost {
|
||||||
border-left-color: rgba(194, 163, 90, 0.36) !important;
|
border-left-color: rgba(194, 163, 90, 0.36) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
li[component="categories/category"] .teaser .avatar {
|
li[component="categories/category"] .teaser .avatar {
|
||||||
box-shadow:
|
box-shadow:
|
||||||
inset 0 1px 0 rgba(255, 242, 204, 0.18),
|
inset 0 1px 0 rgba(255, 242, 204, 0.18),
|
||||||
inset 0 0 0 1px rgba(18, 15, 22, 0.58),
|
inset 0 0 0 1px rgba(18, 15, 22, 0.58),
|
||||||
inset 0 -2px 5px rgba(0, 0, 0, 0.42),
|
inset 0 -2px 5px rgba(0, 0, 0, 0.42),
|
||||||
0 0 0 1px rgba(53, 46, 49, 0.88),
|
0 0 0 1px rgba(53, 46, 49, 0.88),
|
||||||
0 0 0 2px rgba(124, 105, 62, 0.2) !important;
|
0 0 0 2px rgba(124, 105, 62, 0.2) !important;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user