@import "./pixel-icons.generated.css"; /* The pixel icon set (owner 2026-10-16: "these things need to all be same size - actually can you remake all logos like this and side bar logos so they fit the site better"): SiteIcon marks a "pixel:" icon "is-px"; every one is 24 px wherever it sits — the 12 x 12 grid at 2 screen px a block, crisp, all the same size and weight. Drawn in ../banner-work/pixel-icons-2026-10-16/tools/pixel-icons.mjs. Undo ../removed-features-backup/pixel-icon-set-2026-10-16/README.txt */ svg.is-px { width: 24px !important; height: 24px !important; flex-shrink: 0; shape-rendering: crispEdges; overflow: visible; } .sidebar-pc-icon:has(> svg.is-px) { width: 24px; height: 24px; } /* the side menu's top bar: the menu toggle and the search magnifiers in the menu's icon colour (no filter tint) */ .sidebar-menu-btn svg.is-px { color: var(--text-primary); } :is(.sidebar-search-bar, .sidebar-mobile-search) svg.search-icon { filter: none; opacity: 1; color: var(--sb-icon, var(--text-muted)); } /* the lobby's tab bar: real inline icons (CategoryNav.tsx), no mask */ .lobby-tab svg.tab-icon { position: relative; z-index: 1; background: none; -webkit-mask: none; mask: none; } /* above the sliding pill, like the label */ /* icons painted as a background — the lobby's row headings and the search pop-up's tabs — take the same pixel pictures (white; pixel-icons.generated.css), 24 px = 2 screen px a block. "html" puts these above the pages' own rules. */ /* EVERY row heading since 2026-10-21 (owner, with "Popular Slots" and "Originals": "some icons and words are not alined with the word and different sized icons from the next … please fix all"): Popular Slots (the old vector slot machine, 20 px), New Releases, Trending, Providers and Instant Games were vector pictures at 20 px beside the 24 px pixel ones, so the icons were two sizes and two styles and the words started 4 px apart from row to row. Now every heading icon is the set's 24 px box, so the words line up under each other; check ../banner-work/heading-icons-2026-10-21/tools/heading-check.mjs. Undo ../removed-features-backup/heading-icons-2026-10-21/README.txt */ html :is(.section-icon, .search-modal-tab-icon):is(.icon-slots, .icon-originals, .icon-live, .icon-shows, .icon-heart, .icon-all, .icon-new, .icon-popular, .icon-providers, .icon-instant) { flex-shrink: 0; width: 24px !important; height: 24px !important; background-size: 24px 24px !important; background-position: center !important; background-repeat: no-repeat !important; image-rendering: pixelated; } /* (in colour since 2026-10-25 — the next block: --pxc-; the white --px- pictures stay for anything one-colour) */ html .section-icon.icon-slots, html .search-modal-tab-icon.icon-slots { background-image: var(--pxc-slots); } html .section-icon.icon-originals, html .search-modal-tab-icon.icon-originals { background-image: var(--pxc-sword); } html .section-icon.icon-live, html .search-modal-tab-icon.icon-live { background-image: var(--pxc-cards); } html .section-icon.icon-shows, html .search-modal-tab-icon.icon-shows { background-image: var(--pxc-mic); } html .section-icon.icon-heart { background-image: var(--pxc-heart); } html .search-modal-tab-icon.icon-all { background-image: var(--pxc-grid); } html .section-icon.icon-new { background-image: var(--pxc-sparkle); } html .section-icon.icon-popular { background-image: var(--pxc-fire); } html .section-icon.icon-providers { background-image: var(--pxc-grid); } html .section-icon.icon-instant { background-image: var(--pxc-bolt); } /* ── COLOUR (owner 2026-10-25: "Can we add colour to all the logos for example originals logo sword and popular slots logo cherry can we add colours for them that make sense based on the icon and then when you hover over it or select it it gets brighter"): the navigation's pixel icons in their own colours — the cherries red on green stems, the sword steel with a gold guard, the crown gold with a ruby, the heart red … (../banner-work/pixel-icons-2026-10-16/tools/ pixel-icon-colours.mjs, the same 12 x 12 shapes): SiteIcon colour → svg.is-pxc, and --pxc- for the headings and the search pop-up's tabs. Where the icon can be pointed at or chosen — the side menu (and a studio's logo in its brand colour), the lobby's tabs, the phone bar, the search pop-up's tabs — it rests a little dim (--pxc-rest) and is at full colour while pointed at, pressed, focused, chosen or on its page. Opacity only, never a filter (a filtered icon draws soft on phones). The row headings, the loading screens and the headers' chat / rewards / account blocks show the full colour all the time (owner, the same day: "also chat and reward icon shouldnt be faint unless pressed it should be full colour" — the stone block itself shows pointed at / pressed / open: lighter, sunk, its gold outline). Menu, search, close, the chevrons, lock / tick and sound / music stay one colour. Check ../banner-work/icon-colours-2026-10-25/tools/icon-colours-check.mjs; undo ../removed-features-backup/icon-colours-2026-10-25/README.txt ── */ :root { --pxc-rest: 0.72; } .sidebar svg.is-pxc, .sidebar .sidebar-pc-icon--studio > svg, .lobby-tab svg.is-pxc, .mobile-bottom-nav svg.is-pxc, .search-modal-tab .search-modal-tab-icon { opacity: var(--pxc-rest); transition: opacity 0.15s ease; } /* chosen / on its page / pressed / focused */ .sidebar :is(.sidebar-pc-menu-item.active, .sidebar-pc-group-header.has-current[aria-expanded="false"]) :is(svg.is-pxc, .sidebar-pc-icon--studio > svg), .sidebar :is(.sidebar-pc-menu-item, .sidebar-pc-group-header):is(:active, .is-pressed, :focus-visible) :is(svg.is-pxc, .sidebar-pc-icon--studio > svg), .lobby-tab:is(.active, :active, :focus-visible) svg.is-pxc, .mobile-bottom-nav__item:is(.mobile-bottom-nav__item--active, :active) svg.is-pxc, .search-modal-tab:is(.active, :active, :focus-visible) .search-modal-tab-icon { opacity: 1; } /* pointed at (a mouse or a trackpad) */ @media (hover: hover) { .sidebar :is(.sidebar-pc-menu-item, .sidebar-pc-group-header):hover :is(svg.is-pxc, .sidebar-pc-icon--studio > svg), .lobby-tab:hover svg.is-pxc, .mobile-bottom-nav__item:hover svg.is-pxc, .search-modal-tab:hover .search-modal-tab-icon { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .sidebar svg.is-pxc, .sidebar .sidebar-pc-icon--studio > svg, .lobby-tab svg.is-pxc, .mobile-bottom-nav svg.is-pxc, .search-modal-tab .search-modal-tab-icon { transition: none; } } /* a Slots studio's logo (one-colour vector, Sidebar.tsx --studio = providerBrands.ts) in its brand colour in every state — the side menu's blue-grey / white / the page you are on's gold (theme-castle.css) never repaint it */ .sidebar .sidebar-pc-icon--studio > svg.sidebar-pc-glyph { color: var(--studio) !important; }