Example: Main Menu + Inbox + Premium Bars
| Variable | What It Changes | Value |
|---|---|---|
--ui-menu-main-button-hover-bg | Main menu action hover material. | linear-gradient(135deg, #d0d3d8, #8b8f97) |
--ui-menu-inbox-bg | Inbox top-right button base. | radial-gradient(circle at 20% 20%, rgba(212,175,55,0.34), rgba(28,28,28,0.96)) |
--ui-menu-inbox-hover-bg | Inbox button hover response. | radial-gradient(circle at 20% 20%, rgba(236,236,236,0.26), rgba(30,30,30,0.98)) |
--ui-premium-resource-pill-track-bg | Premium purchase requirement track. | rgba(24,24,24,0.92) |
--ui-premium-resource-pill-fill-missing | Missing requirement fill. | linear-gradient(90deg, #b14646, #733030) |
--ui-premium-resource-pill-fill-met | Met requirement fill. | linear-gradient(90deg, #c8c8c8, #d8bc6a) |
Example: Season Pass Full Module Fix
"#seasonPassModal .season-pass-bar, #seasonPassModal .season-pass-preview-bar, #seasonPassModal .season-pass-track-line": {
"background": "var(--ui-premium-resource-pill-track-bg) !important",
"borderColor": "var(--ui-border-subtle) !important"
},
"#seasonPassModal .season-pass-bar-fill, #seasonPassModal .season-pass-preview-fill, #seasonPassModal .season-pass-track-fill": {
"background": "var(--ui-progress-xp-fill) !important"
}Use modal-scoped selectors so your override applies only to Season Pass and does not affect other progress bars.
Example: Flat + Minimal (Wormhole Style)
"advancedCss": {
"variables": {
"--ui-advanced-flat-surface": "rgba(12,10,20,0.95)",
"--ui-advanced-flat-border": "rgba(177,92,255,0.34)",
"--ui-advanced-flat-hover": "rgba(177,92,255,0.14)"
},
"rules": {
".ccb-start, .ccb-group, .ccb-tile": {
"background": "var(--ui-advanced-flat-surface)",
"borderColor": "var(--ui-advanced-flat-border)",
"boxShadow": "none"
}
}
}Example: Imperial Material Pack
"advancedCss": {
"variables": {
"--ui-imperial-card": "linear-gradient(180deg, rgba(18,18,18,0.98), rgba(12,12,12,0.98))",
"--ui-imperial-marble-a": "rgba(255,255,255,0.03)",
"--ui-imperial-edge": "rgba(206,206,206,0.78)"
},
"rules": {
".ccb-group, .season-pass-preview": {
"background": "var(--ui-imperial-card)",
"backgroundImage": "repeating-linear-gradient(118deg, var(--ui-imperial-marble-a) 0 1px, transparent 1px 20px)",
"border": "1px solid var(--ui-imperial-edge)"
}
}
}Example: Comic Sketchboard + Paint Splashes
"advancedCss": {
"variables": {
"--ui-sketch-base": "rgba(13,13,13,0.96)",
"--ui-sketch-ink": "rgba(242,242,242,0.84)",
"--ui-sketch-paint-red": "rgba(210,86,78,0.2)",
"--ui-sketch-paint-cyan": "rgba(109,186,213,0.18)",
"--ui-sketch-paint-gold": "rgba(226,192,108,0.16)"
},
"rules": {
".ccb-start, .ccb-group, .ccb-tile, .modal-content": {
"background": "var(--ui-sketch-base)",
"border": "1px solid var(--ui-sketch-ink)",
"backgroundImage": "repeating-linear-gradient(115deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 19px), repeating-linear-gradient(64deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 23px)"
},
".season-pass-panel::before, .stats-panel::before": {
"content": "''",
"position": "absolute",
"inset": "0",
"pointerEvents": "none",
"background": "radial-gradient(circle at 22% 28%, var(--ui-sketch-paint-red), transparent 42%), radial-gradient(circle at 78% 64%, var(--ui-sketch-paint-cyan), transparent 45%), radial-gradient(circle at 58% 20%, var(--ui-sketch-paint-gold), transparent 39%)"
}
}
}This keeps the UI monochrome-first and applies color as accent splashes, not uniform theme fills.