/* ===================================================================== * icons.css โ€” one icon system, switched by Design Language * * WHY * --- * Icons used to be emoji dropped inline (๐Ÿ“ ๐Ÿ‘ค โš™๏ธ โ€ฆ). Emoji are drawn by * the operating system, so the same page looked different on Windows, * Android and iPhone; they ignore the theme palette completely; and the * codebase had drifted to using the SAME icon in two forms (U+1F5D1 with * and without the VS16 selector, likewise โš  and ๐Ÿ–ผ). * * HOW IT WORKS * ------------ * Icons are SVG files on disk, one folder per design language: * * images/icons/default/.svg rounded stroke, weight 1.8 * images/icons/atelier/.svg editorial hairline, 1.1 * * They're applied as a CSS mask over `currentColor`, NOT as . That * matters: a mask takes the text colour of whatever it sits in, so an * icon follows the theme (all 21 of them) and any hover/active state for * free, with no per-theme icon files. * * USAGE โ€” one span, no JS: * Home * * Icons are decorative: the visible text label next to them carries the * meaning. Always keep the text, and always mark the span aria-hidden so * a screen reader doesn't announce a nameless element. For an icon-only * control, put the name in aria-label on the BUTTON, not the span. * * ADDING AN ICON * -------------- * Add the file to EVERY design folder under the same name, then add one * line to the map at the bottom. A name that exists in one folder but * not another would show nothing under that design โ€” the map is the * single place that decides. * * theme.js sets data-design on ; these rules re-point --ic to the * matching folder, so switching design swaps every icon on the page with * no markup change and no reload. * ===================================================================== */ .ic { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.125em; /* sits on the text baseline */ background-color: currentColor; /* Fail INVISIBLE, not as a solid block. `background-color: currentColor` + `mask-image: var(--ic)` means an .ic with no --ic (a typo'd name, or an element that happens to carry the class for another reason) has no mask at all and paints as a filled rectangle. That is exactly what happened when this file claimed the bare `.ic` name and collided with the kink test's own long-standing `.kt-score-row .ic` cell: every archetype icon became a white box. An empty SVG masks everything away, so the failure is silent instead of loud. The .ic- rules below override it. */ --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"); -webkit-mask-image: var(--ic); mask-image: var(--ic); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Size helpers โ€” default is 1em (matches the text it sits beside). */ .ic-sm { width: 0.85em; height: 0.85em; } .ic-lg { width: 1.35em; height: 1.35em; } .ic-xl { width: 2em; height: 2em; } /* Status tints, for the few places an icon carries a state. */ .ic-ok { color: #4caf50; } .ic-warn { color: #ffc107; } .ic-err { color: #f44336; } /* ===================================================================== * The map. Default is the base set; a design only needs a block here * once its folder exists. * * Halo and Kinetik are still "ยท soon" in the admin picker and have no * folder yet, so they inherit Default through this base block rather * than shipping duplicate files that would drift out of sync. * ===================================================================== */ .ic-age18 { --ic: url("images/icons/default/age18.svg"); } .ic-arrow-down { --ic: url("images/icons/default/arrow-down.svg"); } .ic-arrow-left { --ic: url("images/icons/default/arrow-left.svg"); } .ic-arrow-right { --ic: url("images/icons/default/arrow-right.svg"); } .ic-arrow-up { --ic: url("images/icons/default/arrow-up.svg"); } .ic-attach { --ic: url("images/icons/default/attach.svg"); } .ic-bank { --ic: url("images/icons/default/bank.svg"); } .ic-bell { --ic: url("images/icons/default/bell.svg"); } .ic-bio { --ic: url("images/icons/default/bio.svg"); } .ic-blocked { --ic: url("images/icons/default/blocked.svg"); } .ic-bolt { --ic: url("images/icons/default/bolt.svg"); } .ic-brain { --ic: url("images/icons/default/brain.svg"); } .ic-bulb { --ic: url("images/icons/default/bulb.svg"); } .ic-cake { --ic: url("images/icons/default/cake.svg"); } .ic-calendar { --ic: url("images/icons/default/calendar.svg"); } .ic-card { --ic: url("images/icons/default/card.svg"); } .ic-chart { --ic: url("images/icons/default/chart.svg"); } .ic-chat { --ic: url("images/icons/default/chat.svg"); } .ic-city { --ic: url("images/icons/default/city.svg"); } .ic-clapper { --ic: url("images/icons/default/clapper.svg"); } .ic-clipboard { --ic: url("images/icons/default/clipboard.svg"); } .ic-cocktail { --ic: url("images/icons/default/cocktail.svg"); } .ic-compass { --ic: url("images/icons/default/compass.svg"); } .ic-dance { --ic: url("images/icons/default/dance.svg"); } .ic-dashboard { --ic: url("images/icons/default/dashboard.svg"); } .ic-delete { --ic: url("images/icons/default/delete.svg"); } .ic-disco { --ic: url("images/icons/default/disco.svg"); } .ic-download { --ic: url("images/icons/default/download.svg"); } .ic-edit { --ic: url("images/icons/default/edit.svg"); } .ic-error { --ic: url("images/icons/default/error.svg"); } .ic-fire { --ic: url("images/icons/default/fire.svg"); } .ic-flag { --ic: url("images/icons/default/flag.svg"); } .ic-folder { --ic: url("images/icons/default/folder.svg"); } .ic-friends { --ic: url("images/icons/default/friends.svg"); } .ic-gem { --ic: url("images/icons/default/gem.svg"); } .ic-gift { --ic: url("images/icons/default/gift.svg"); } .ic-globe { --ic: url("images/icons/default/globe.svg"); } .ic-grid { --ic: url("images/icons/default/grid.svg"); } .ic-handshake { --ic: url("images/icons/default/handshake.svg"); } .ic-heart { --ic: url("images/icons/default/heart.svg"); } .ic-home { --ic: url("images/icons/default/home.svg"); } .ic-id { --ic: url("images/icons/default/id.svg"); } .ic-image { --ic: url("images/icons/default/image.svg"); } .ic-info { --ic: url("images/icons/default/info.svg"); } .ic-item { --ic: url("images/icons/default/item.svg"); } .ic-key { --ic: url("images/icons/default/key.svg"); } .ic-legal { --ic: url("images/icons/default/legal.svg"); } .ic-link { --ic: url("images/icons/default/link.svg"); } .ic-list { --ic: url("images/icons/default/list.svg"); } .ic-location { --ic: url("images/icons/default/location.svg"); } .ic-lock { --ic: url("images/icons/default/lock.svg"); } .ic-logout { --ic: url("images/icons/default/logout.svg"); } .ic-mail { --ic: url("images/icons/default/mail.svg"); } .ic-manage { --ic: url("images/icons/default/manage.svg"); } .ic-menu { --ic: url("images/icons/default/menu.svg"); } .ic-message { --ic: url("images/icons/default/message.svg"); } .ic-mic { --ic: url("images/icons/default/mic.svg"); } .ic-minus { --ic: url("images/icons/default/minus.svg"); } .ic-money { --ic: url("images/icons/default/money.svg"); } .ic-muscle { --ic: url("images/icons/default/muscle.svg"); } .ic-news { --ic: url("images/icons/default/news.svg"); } .ic-package { --ic: url("images/icons/default/package.svg"); } .ic-page { --ic: url("images/icons/default/page.svg"); } .ic-palette { --ic: url("images/icons/default/palette.svg"); } .ic-phone { --ic: url("images/icons/default/phone.svg"); } .ic-photo { --ic: url("images/icons/default/photo.svg"); } .ic-play { --ic: url("images/icons/default/play.svg"); } .ic-plus { --ic: url("images/icons/default/plus.svg"); } .ic-profile { --ic: url("images/icons/default/profile.svg"); } .ic-refresh { --ic: url("images/icons/default/refresh.svg"); } .ic-ruler { --ic: url("images/icons/default/ruler.svg"); } .ic-search { --ic: url("images/icons/default/search.svg"); } .ic-shield { --ic: url("images/icons/default/shield.svg"); } .ic-smoking { --ic: url("images/icons/default/smoking.svg"); } .ic-sparkle { --ic: url("images/icons/default/sparkle.svg"); } .ic-star { --ic: url("images/icons/default/star.svg"); } .ic-success { --ic: url("images/icons/default/success.svg"); } .ic-tools { --ic: url("images/icons/default/tools.svg"); } .ic-trend { --ic: url("images/icons/default/trend.svg"); } .ic-trophy { --ic: url("images/icons/default/trophy.svg"); } .ic-unlock { --ic: url("images/icons/default/unlock.svg"); } .ic-uploads { --ic: url("images/icons/default/uploads.svg"); } .ic-users { --ic: url("images/icons/default/users.svg"); } .ic-video { --ic: url("images/icons/default/video.svg"); } .ic-view { --ic: url("images/icons/default/view.svg"); } .ic-warning { --ic: url("images/icons/default/warning.svg"); } .ic-wine { --ic: url("images/icons/default/wine.svg"); } .ic-zodiac { --ic: url("images/icons/default/zodiac.svg"); } .ic-zs-aquarius { --ic: url("images/icons/default/zs-aquarius.svg"); } .ic-zs-aries { --ic: url("images/icons/default/zs-aries.svg"); } .ic-zs-cancer { --ic: url("images/icons/default/zs-cancer.svg"); } .ic-zs-capricorn { --ic: url("images/icons/default/zs-capricorn.svg"); } .ic-zs-gemini { --ic: url("images/icons/default/zs-gemini.svg"); } .ic-zs-leo { --ic: url("images/icons/default/zs-leo.svg"); } .ic-zs-libra { --ic: url("images/icons/default/zs-libra.svg"); } .ic-zs-pisces { --ic: url("images/icons/default/zs-pisces.svg"); } .ic-zs-sagittarius { --ic: url("images/icons/default/zs-sagittarius.svg"); } .ic-zs-scorpio { --ic: url("images/icons/default/zs-scorpio.svg"); } .ic-zs-taurus { --ic: url("images/icons/default/zs-taurus.svg"); } .ic-zs-virgo { --ic: url("images/icons/default/zs-virgo.svg"); } .ic-zy-dog { --ic: url("images/icons/default/zy-dog.svg"); } .ic-zy-dragon { --ic: url("images/icons/default/zy-dragon.svg"); } .ic-zy-goat { --ic: url("images/icons/default/zy-goat.svg"); } .ic-zy-horse { --ic: url("images/icons/default/zy-horse.svg"); } .ic-zy-monkey { --ic: url("images/icons/default/zy-monkey.svg"); } .ic-zy-ox { --ic: url("images/icons/default/zy-ox.svg"); } .ic-zy-pig { --ic: url("images/icons/default/zy-pig.svg"); } .ic-zy-rabbit { --ic: url("images/icons/default/zy-rabbit.svg"); } .ic-zy-rat { --ic: url("images/icons/default/zy-rat.svg"); } .ic-zy-rooster { --ic: url("images/icons/default/zy-rooster.svg"); } .ic-zy-snake { --ic: url("images/icons/default/zy-snake.svg"); } .ic-zy-tiger { --ic: url("images/icons/default/zy-tiger.svg"); } /* โ”€โ”€ ATELIER โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ * Same names, hairline personality โ€” matches the design's gold rules and * flat print surfaces. */ html[data-design="atelier"] .ic-age18 { --ic: url("images/icons/atelier/age18.svg"); } html[data-design="atelier"] .ic-arrow-down { --ic: url("images/icons/atelier/arrow-down.svg"); } html[data-design="atelier"] .ic-arrow-left { --ic: url("images/icons/atelier/arrow-left.svg"); } html[data-design="atelier"] .ic-arrow-right { --ic: url("images/icons/atelier/arrow-right.svg"); } html[data-design="atelier"] .ic-arrow-up { --ic: url("images/icons/atelier/arrow-up.svg"); } html[data-design="atelier"] .ic-attach { --ic: url("images/icons/atelier/attach.svg"); } html[data-design="atelier"] .ic-bank { --ic: url("images/icons/atelier/bank.svg"); } html[data-design="atelier"] .ic-bell { --ic: url("images/icons/atelier/bell.svg"); } html[data-design="atelier"] .ic-bio { --ic: url("images/icons/atelier/bio.svg"); } html[data-design="atelier"] .ic-blocked { --ic: url("images/icons/atelier/blocked.svg"); } html[data-design="atelier"] .ic-bolt { --ic: url("images/icons/atelier/bolt.svg"); } html[data-design="atelier"] .ic-brain { --ic: url("images/icons/atelier/brain.svg"); } html[data-design="atelier"] .ic-bulb { --ic: url("images/icons/atelier/bulb.svg"); } html[data-design="atelier"] .ic-cake { --ic: url("images/icons/atelier/cake.svg"); } html[data-design="atelier"] .ic-calendar { --ic: url("images/icons/atelier/calendar.svg"); } html[data-design="atelier"] .ic-card { --ic: url("images/icons/atelier/card.svg"); } html[data-design="atelier"] .ic-chart { --ic: url("images/icons/atelier/chart.svg"); } html[data-design="atelier"] .ic-chat { --ic: url("images/icons/atelier/chat.svg"); } html[data-design="atelier"] .ic-city { --ic: url("images/icons/atelier/city.svg"); } html[data-design="atelier"] .ic-clapper { --ic: url("images/icons/atelier/clapper.svg"); } html[data-design="atelier"] .ic-clipboard { --ic: url("images/icons/atelier/clipboard.svg"); } html[data-design="atelier"] .ic-cocktail { --ic: url("images/icons/atelier/cocktail.svg"); } html[data-design="atelier"] .ic-compass { --ic: url("images/icons/atelier/compass.svg"); } html[data-design="atelier"] .ic-dance { --ic: url("images/icons/atelier/dance.svg"); } html[data-design="atelier"] .ic-dashboard { --ic: url("images/icons/atelier/dashboard.svg"); } html[data-design="atelier"] .ic-delete { --ic: url("images/icons/atelier/delete.svg"); } html[data-design="atelier"] .ic-disco { --ic: url("images/icons/atelier/disco.svg"); } html[data-design="atelier"] .ic-download { --ic: url("images/icons/atelier/download.svg"); } html[data-design="atelier"] .ic-edit { --ic: url("images/icons/atelier/edit.svg"); } html[data-design="atelier"] .ic-error { --ic: url("images/icons/atelier/error.svg"); } html[data-design="atelier"] .ic-fire { --ic: url("images/icons/atelier/fire.svg"); } html[data-design="atelier"] .ic-flag { --ic: url("images/icons/atelier/flag.svg"); } html[data-design="atelier"] .ic-folder { --ic: url("images/icons/atelier/folder.svg"); } html[data-design="atelier"] .ic-friends { --ic: url("images/icons/atelier/friends.svg"); } html[data-design="atelier"] .ic-gem { --ic: url("images/icons/atelier/gem.svg"); } html[data-design="atelier"] .ic-gift { --ic: url("images/icons/atelier/gift.svg"); } html[data-design="atelier"] .ic-globe { --ic: url("images/icons/atelier/globe.svg"); } html[data-design="atelier"] .ic-grid { --ic: url("images/icons/atelier/grid.svg"); } html[data-design="atelier"] .ic-handshake { --ic: url("images/icons/atelier/handshake.svg"); } html[data-design="atelier"] .ic-heart { --ic: url("images/icons/atelier/heart.svg"); } html[data-design="atelier"] .ic-home { --ic: url("images/icons/atelier/home.svg"); } html[data-design="atelier"] .ic-id { --ic: url("images/icons/atelier/id.svg"); } html[data-design="atelier"] .ic-image { --ic: url("images/icons/atelier/image.svg"); } html[data-design="atelier"] .ic-info { --ic: url("images/icons/atelier/info.svg"); } html[data-design="atelier"] .ic-item { --ic: url("images/icons/atelier/item.svg"); } html[data-design="atelier"] .ic-key { --ic: url("images/icons/atelier/key.svg"); } html[data-design="atelier"] .ic-legal { --ic: url("images/icons/atelier/legal.svg"); } html[data-design="atelier"] .ic-link { --ic: url("images/icons/atelier/link.svg"); } html[data-design="atelier"] .ic-list { --ic: url("images/icons/atelier/list.svg"); } html[data-design="atelier"] .ic-location { --ic: url("images/icons/atelier/location.svg"); } html[data-design="atelier"] .ic-lock { --ic: url("images/icons/atelier/lock.svg"); } html[data-design="atelier"] .ic-logout { --ic: url("images/icons/atelier/logout.svg"); } html[data-design="atelier"] .ic-mail { --ic: url("images/icons/atelier/mail.svg"); } html[data-design="atelier"] .ic-manage { --ic: url("images/icons/atelier/manage.svg"); } html[data-design="atelier"] .ic-menu { --ic: url("images/icons/atelier/menu.svg"); } html[data-design="atelier"] .ic-message { --ic: url("images/icons/atelier/message.svg"); } html[data-design="atelier"] .ic-mic { --ic: url("images/icons/atelier/mic.svg"); } html[data-design="atelier"] .ic-minus { --ic: url("images/icons/atelier/minus.svg"); } html[data-design="atelier"] .ic-money { --ic: url("images/icons/atelier/money.svg"); } html[data-design="atelier"] .ic-muscle { --ic: url("images/icons/atelier/muscle.svg"); } html[data-design="atelier"] .ic-news { --ic: url("images/icons/atelier/news.svg"); } html[data-design="atelier"] .ic-package { --ic: url("images/icons/atelier/package.svg"); } html[data-design="atelier"] .ic-page { --ic: url("images/icons/atelier/page.svg"); } html[data-design="atelier"] .ic-palette { --ic: url("images/icons/atelier/palette.svg"); } html[data-design="atelier"] .ic-phone { --ic: url("images/icons/atelier/phone.svg"); } html[data-design="atelier"] .ic-photo { --ic: url("images/icons/atelier/photo.svg"); } html[data-design="atelier"] .ic-play { --ic: url("images/icons/atelier/play.svg"); } html[data-design="atelier"] .ic-plus { --ic: url("images/icons/atelier/plus.svg"); } html[data-design="atelier"] .ic-profile { --ic: url("images/icons/atelier/profile.svg"); } html[data-design="atelier"] .ic-refresh { --ic: url("images/icons/atelier/refresh.svg"); } html[data-design="atelier"] .ic-ruler { --ic: url("images/icons/atelier/ruler.svg"); } html[data-design="atelier"] .ic-search { --ic: url("images/icons/atelier/search.svg"); } html[data-design="atelier"] .ic-shield { --ic: url("images/icons/atelier/shield.svg"); } html[data-design="atelier"] .ic-smoking { --ic: url("images/icons/atelier/smoking.svg"); } html[data-design="atelier"] .ic-sparkle { --ic: url("images/icons/atelier/sparkle.svg"); } html[data-design="atelier"] .ic-star { --ic: url("images/icons/atelier/star.svg"); } html[data-design="atelier"] .ic-success { --ic: url("images/icons/atelier/success.svg"); } html[data-design="atelier"] .ic-tools { --ic: url("images/icons/atelier/tools.svg"); } html[data-design="atelier"] .ic-trend { --ic: url("images/icons/atelier/trend.svg"); } html[data-design="atelier"] .ic-trophy { --ic: url("images/icons/atelier/trophy.svg"); } html[data-design="atelier"] .ic-unlock { --ic: url("images/icons/atelier/unlock.svg"); } html[data-design="atelier"] .ic-uploads { --ic: url("images/icons/atelier/uploads.svg"); } html[data-design="atelier"] .ic-users { --ic: url("images/icons/atelier/users.svg"); } html[data-design="atelier"] .ic-video { --ic: url("images/icons/atelier/video.svg"); } html[data-design="atelier"] .ic-view { --ic: url("images/icons/atelier/view.svg"); } html[data-design="atelier"] .ic-warning { --ic: url("images/icons/atelier/warning.svg"); } html[data-design="atelier"] .ic-wine { --ic: url("images/icons/atelier/wine.svg"); } html[data-design="atelier"] .ic-zodiac { --ic: url("images/icons/atelier/zodiac.svg"); } html[data-design="atelier"] .ic-zs-aquarius { --ic: url("images/icons/atelier/zs-aquarius.svg"); } html[data-design="atelier"] .ic-zs-aries { --ic: url("images/icons/atelier/zs-aries.svg"); } html[data-design="atelier"] .ic-zs-cancer { --ic: url("images/icons/atelier/zs-cancer.svg"); } html[data-design="atelier"] .ic-zs-capricorn { --ic: url("images/icons/atelier/zs-capricorn.svg"); } html[data-design="atelier"] .ic-zs-gemini { --ic: url("images/icons/atelier/zs-gemini.svg"); } html[data-design="atelier"] .ic-zs-leo { --ic: url("images/icons/atelier/zs-leo.svg"); } html[data-design="atelier"] .ic-zs-libra { --ic: url("images/icons/atelier/zs-libra.svg"); } html[data-design="atelier"] .ic-zs-pisces { --ic: url("images/icons/atelier/zs-pisces.svg"); } html[data-design="atelier"] .ic-zs-sagittarius { --ic: url("images/icons/atelier/zs-sagittarius.svg"); } html[data-design="atelier"] .ic-zs-scorpio { --ic: url("images/icons/atelier/zs-scorpio.svg"); } html[data-design="atelier"] .ic-zs-taurus { --ic: url("images/icons/atelier/zs-taurus.svg"); } html[data-design="atelier"] .ic-zs-virgo { --ic: url("images/icons/atelier/zs-virgo.svg"); } html[data-design="atelier"] .ic-zy-dog { --ic: url("images/icons/atelier/zy-dog.svg"); } html[data-design="atelier"] .ic-zy-dragon { --ic: url("images/icons/atelier/zy-dragon.svg"); } html[data-design="atelier"] .ic-zy-goat { --ic: url("images/icons/atelier/zy-goat.svg"); } html[data-design="atelier"] .ic-zy-horse { --ic: url("images/icons/atelier/zy-horse.svg"); } html[data-design="atelier"] .ic-zy-monkey { --ic: url("images/icons/atelier/zy-monkey.svg"); } html[data-design="atelier"] .ic-zy-ox { --ic: url("images/icons/atelier/zy-ox.svg"); } html[data-design="atelier"] .ic-zy-pig { --ic: url("images/icons/atelier/zy-pig.svg"); } html[data-design="atelier"] .ic-zy-rabbit { --ic: url("images/icons/atelier/zy-rabbit.svg"); } html[data-design="atelier"] .ic-zy-rat { --ic: url("images/icons/atelier/zy-rat.svg"); } html[data-design="atelier"] .ic-zy-rooster { --ic: url("images/icons/atelier/zy-rooster.svg"); } html[data-design="atelier"] .ic-zy-snake { --ic: url("images/icons/atelier/zy-snake.svg"); } html[data-design="atelier"] .ic-zy-tiger { --ic: url("images/icons/atelier/zy-tiger.svg"); }