/* * WattMatch icon system — shared CSS. * * Renders any SVG from /public/icons as a colourable silhouette via * CSS mask-image. Beats

because freezes the * SVG's `currentColor` to whatever its own context resolves (usually * black) — masks let the icon adopt the parent's CSS color. * * Usage: * * *

Branchez votre * * installation au réseau. *

* * Variants: * .wm-icon base 32x32 block (card icon) * .wm-icon--lg 36x36 block (slightly bigger card icon) * .wm-icon--sm 16x16 block (compact / table-cell badge) * .wm-icon--inline 1em x 1em inline (in a phrase, button label, * verified pill — follows surrounding font-size) * * This file is auto-injected into the by public/js/shared-nav.js * on every page that mounts the shared nav. Pages without the shared * nav (aide/*, discover.html) link it explicitly so the icons paint * before the deferred JS executes — avoids a flash of unstyled icon. */ .wm-icon { display: block; width: 32px; height: 32px; margin-bottom: 12px; background-color: currentColor; -webkit-mask-image: var(--icon); mask-image: var(--icon); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: left center; mask-position: left center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .wm-icon--lg { width: 36px; height: 36px; margin-bottom: 14px; } .wm-icon--sm { width: 16px; height: 16px; margin-bottom: 0; } .wm-icon--inline { display: inline-block; width: 1em; height: 1em; margin: 0 0.25em 0 0; vertical-align: -0.15em; -webkit-mask-position: center; mask-position: center; }