@charset "UTF-8"; /** * Theme : Neutral * Version: 1.2.0 * Author : hybrid. * * SVG sprite icons (base, size variants) and CSS animated icons. * Animated icons use ::before/::after pseudo-elements with box-shadow * to reproduce glyphs without SVG or images. * * Animated icons * .icon-grid — 3×3 grid glyph * .icon-list — 4 horizontal strokes * .icon-arrow-* — directional arrow (left, right, up, down) + .alt variant * .icon-search — magnifying glass * .icon-download — arrow pointing down * .icon-expand — hamburger → cross (toggle .expanded on parent) * .icon-close — fixed cross * .icon-more — fixed plus * .icon-play — play → pause (toggle .is-playing/.is-paused on parent) * * Tokens * --icon-stroke-width stroke width for animated icons (default: var(--stroke-width)) * --icon-play-offset optical offset of the play triangle (default: 12.5%) * --icon-stroke-width stroke height for grid/list/arrow/search/download icons * * Dependencies * --stroke-width defined in structure.css * --duration-fast defined in animations.css * --elastic defined in animations.css */ /* ================================================================================================== */ /* ============================================= CONFIG ============================================= */ /* ================================================================================================== */ :root { --icon-stroke-width: var(--logo-line-height, .125rem); --icon-play-offset: 12.5%; --icon-play-clip-left: polygon(0% 0%, 50% 25%, 50% 75%, 0% 100%); --icon-play-clip-right: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%); --icon-pause-clip-left: polygon(0% 0%, 33% 0, 33% 100%, 0% 100%); --icon-pause-clip-right: polygon(66% 0, 100% 0, 100% 100%, 66% 100%); } /* ====================================================================================================== */ /* ============================================= ANIMATIONS ============================================= */ /* ====================================================================================================== */ [class^="icon-"].animated .label, [class^="icon-"].animated .label::before, [class^="icon-"].animated .label::after { transition: transform var(--duration-fast) var(--elastic), right var(--duration-fast) var(--elastic), margin var(--duration-fast) var(--elastic), clip-path var(--duration-fast) var(--elastic), height var(--duration-fast) var(--elastic), width var(--duration-fast) var(--elastic); } /* ================================================================================================ */ /* ============================================= CORE ============================================= */ /* ================================================================================================ */ /* ============================== MASK-IMAGE BASE ============================== */ /** * Base for ::before pseudo-element icons via mask-image. * Each icon selector (.icon-search:before, etc.) is auto-generated * in icons-vars.css by tool-icons.php. * Works with — same as IcoMoon. */ [class^="icon-"], [class*=" icon-"] { display: inline-flex; } [class^="icon-"]::before, [class*=" icon-"]::before { content: ""; display: inline-block; height: 1em; aspect-ratio: 1/1; background: currentColor; mask-size: contain; mask-repeat: no-repeat; mask-position: center; } /* ============================== SVG INLINE BASE ============================== */ /** * Base for inline SVG icons via get_icon() / the_icon(). * Supports stroke-width animation and currentColor. */ svg[class^="icon-"], svg[class*=" icon-"] { display: inline-block; width: 1em; height: 1em; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } svg[class^="icon-"].filled, svg[class*=" icon-"].filled { fill: currentColor; stroke: none; } /* ==================================================================================================== */ /* ============================================= ANIMATED ============================================= */ /* ==================================================================================================== */ /** * Animated icons: grid, list, arrow, search, download, expand, close, more, play/pause. * The SVG icon is hidden, replaced by pseudo-elements. * box-shadow inset simulates the stroke without SVG. */ /* ============================== DEFAULT ============================== */ [class^="icon-"].animated { position: relative; display: inline-flex; align-items: center; height: 1em; width: 1em; color: inherit; text-shadow: inherit; transform-origin: center center; background: transparent; fill: none; stroke: none; } [class^="icon-"].animated::before, [class^="icon-"].animated use { display: none; } [class^="icon-"].animated .label, [class^="icon-"].animated .label::before, [class^="icon-"].animated .label::after { position: absolute; display: block; height: var(--icon-stroke-width); font-size: inherit !important; line-height: inherit; color: inherit; text-shadow: inherit; box-shadow: inset 0 0 0 calc(var(--icon-stroke-width) * 2); } [class^="icon-"].animated .label::before, [class^="icon-"].animated .label::after { content: ""; transform-origin: center center; } /* Disable transitions on page load */ .icon-expand.animated, body.onload .icon-expand.animated .label, body.onload .icon-expand.animated .label::before, body.onload .icon-expand.animated .label::after { transition: none; } /* ============================== GRID ============================== */ .icon-grid.animated .label { height: calc((1em - var(--icon-stroke-width) * 4) / 3); width: calc((1em - var(--icon-stroke-width) * 4) / 3); box-shadow: inset 0 calc((1em - var(--icon-stroke-width) * 4) / 1) 0, 0 calc((1em - var(--icon-stroke-width) * 4) / 3 * 1 + var(--icon-stroke-width) * 1) 0, 0 calc((1em - var(--icon-stroke-width) * 4) / 3 * 2 + var(--icon-stroke-width) * 2) 0, calc((1em - var(--icon-stroke-width) * 4) / 3 * 1 + var(--icon-stroke-width) * 1) 0 0, calc((1em - var(--icon-stroke-width) * 4) / 3 * 1 + var(--icon-stroke-width) * 1) calc((1em - var(--icon-stroke-width) * 4) / 3 * 1 + var(--icon-stroke-width) * 1) 0, calc((1em - var(--icon-stroke-width) * 4) / 3 * 1 + var(--icon-stroke-width) * 1) calc((1em - var(--icon-stroke-width) * 4) / 3 * 2 + var(--icon-stroke-width) * 2) 0, calc((1em - var(--icon-stroke-width) * 4) / 3 * 2 + var(--icon-stroke-width) * 2) 0 0, calc((1em - var(--icon-stroke-width) * 4) / 3 * 2 + var(--icon-stroke-width) * 2) calc((1em - var(--icon-stroke-width) * 4) / 3 * 1 + var(--icon-stroke-width) * 1) 0, calc((1em - var(--icon-stroke-width) * 4) / 3 * 2 + var(--icon-stroke-width) * 2) calc((1em - var(--icon-stroke-width) * 4) / 3 * 2 + var(--icon-stroke-width) * 2) 0 !important; top: var(--icon-stroke-width); left: var(--icon-stroke-width); } /* ============================== LIST ============================== */ .icon-list.animated .label { height: var(--icon-stroke-width); width: 1em; box-shadow: inset 0 calc((1em - var(--icon-stroke-width) * 3) / 3) 0, 0 calc((1em - var(--icon-stroke-width) * 3) / 3 * 1) 0, 0 calc((1em - var(--icon-stroke-width) * 3) / 3 * 2) 0, 0 calc((1em - var(--icon-stroke-width) * 3) / 3 * 3) 0; top: var(--icon-stroke-width); left: 0; } /* ============================== ARROW ============================== */ [class^="icon-arrow-"].animated .label { left: 0; height: var(--icon-stroke-width); width: .9em; box-shadow: inset 0 0 0 calc(var(--icon-stroke-width) * 2); } [class^="icon-arrow-"].animated .label::before, [class^="icon-arrow-"].animated .label::after { left: 0; width: .45em; transform-origin: calc(var(--icon-stroke-width) / 2.5) calc(var(--icon-stroke-width) / 2); } [class^="icon-arrow-"].animated .label::before { transform: rotate(-45deg); } [class^="icon-arrow-"].animated .label::after { transform: rotate(45deg); } .icon-arrow-right.animated { transform: scale(-1); } .icon-arrow-up.animated { transform: rotate(90deg); } .icon-arrow-down.animated { transform: rotate(-90deg); } /* alt */ [class^="icon-arrow-"].animated.alt .label { height: 0; width: calc(var(--icon-stroke-width) * 2); } [class^="icon-arrow-"].animated.alt .label::before { transform: rotate(-45deg); } [class^="icon-arrow-"].animated.alt .label::after { transform: rotate(45deg); } /* ============================== SEARCH ============================== */ .icon-search.animated .label { height: 1em; width: 1em; border-radius: 50%; box-shadow: none !important; } .icon-search.animated .label::before { height: .9em; width: .9em; border-radius: 50%; box-shadow: inset 0 0 0 calc(var(--icon-stroke-width) * 1); } .icon-search.animated .label::after { height: var(--icon-stroke-width); width: .4em; box-shadow: inset 0 0 0 calc(var(--icon-stroke-width) * 1); bottom: 0; right: 0; transform-origin: 100% 100%; transform: rotate(45deg); } /* ============================== DOWNLOAD ============================== */ .icon-download.animated { transform: scale(-1); } .icon-download.animated .label { left: 0; height: var(--icon-stroke-width); width: 1em; box-shadow: inset 0 0 0 calc(var(--icon-stroke-width) * 2); transform: rotate(90deg); } .icon-download.animated .label::before, .icon-download.animated .label::after { left: 0; width: .6em; transform-origin: calc(var(--icon-stroke-width) / 2.5) calc(var(--icon-stroke-width) / 2); } .icon-download.animated .label::before { transform: rotate(-45deg); } .icon-download.animated .label::after { transform: rotate(45deg); } /* ============================== EXPAND ============================== */ /* 3 strokes → cross. Toggle via .expanded on parent. */ /* =============== DEFAULT =============== */ .icon-expand.animated .label, .icon-expand.animated .label::before, .icon-expand.animated .label::after { left: 0; width: 1em; } .icon-expand.animated .label { margin: auto; overflow: visible; } /* =============== NOT EXPANDED =============== */ .icon-expand.animated .label::before { transform: translate(0, -.375em); } .icon-expand.animated .label::after { transform: translate(0, .375em); } /* =============== EXPANDED =============== */ .expanded .icon-expand.animated .label { width: 0; transform: translate(.5em, 0); } .expanded .icon-expand.animated .label::before { transform: translate3d(-50%, 0, 0) rotate(-45deg); } .expanded .icon-expand.animated .label::after { transform: translate3d(-50%, 0, 0) rotate(45deg); } .expanded .icon-expand .label::before, .expanded .icon-expand .label::after { transform: translate(-.125em, 0); width: 1.289em; } /* ============================== CLOSE / MORE ============================== */ .icon-close.animated .label, .icon-more.animated .label { left: 0; height: 1em; width: 1em; box-shadow: none !important; } .icon-close.animated .label::before, .icon-close.animated .label::after, .icon-more.animated .label::before, .icon-more.animated .label::after { top: 50%; left: 50%; } .icon-more.animated .label::before, .icon-more.animated .label::after { width: 1em; } .icon-close.animated .label::before, .icon-close.animated .label::after { width: 1.289em; } .icon-close.animated .label::before { transform: translate(-50%, -50%) rotate(-45deg); } .icon-close.animated .label::after { transform: translate(-50%, -50%) rotate(45deg); } .icon-more.animated .label::before { transform: translate(-50%, -50%) rotate(0deg); } .icon-more.animated .label::after { transform: translate(-50%, -50%) rotate(90deg); } /* ============================== PLAY / PAUSE ============================== */ /** * Via clip-path. * Toggle via .is-playing / .is-paused on parent. * --icon-play-offset : décalage optique horizontal du triangle play (default: 12.5%) * Surcharger par contexte : .my-btn { --icon-play-offset: 5%; } * --icon-play-clip-left/right, --icon-pause-clip-left/right : consommables dans d'autres fichiers CSS. */ .icon-play.animated .label { height: 1em; width: 1em; box-shadow: none; margin-left: var(--icon-play-offset); } a.is-paused .icon-play.animated .label, a.is-playing:hover .icon-play.animated .label { margin-left: 0; } .icon-play.animated .label::before, .icon-play.animated .label::after { height: 1em; width: 1em; box-shadow: inset 0 0 0 1em; } .icon-play.animated .label::before { clip-path: var(--icon-play-clip-left); } .icon-play.animated .label::after { clip-path: var(--icon-play-clip-right); } /* ============================== HOVER ============================== */ @media (hover: hover) { /* arrow */ a:hover [class^="icon-arrow-"].animated .label { width: .8em; } a:hover [class^="icon-arrow-"].animated .label::before, a:hover [class^="icon-arrow-"].animated .label::after { width: .3em; } /* expand */ a:not(.expanded):hover .icon-expand.animated .label::before { transform: translate(0, -.25em); } a:not(.expanded):hover .icon-expand.animated .label::after { transform: translate(0, .25em); } a.expanded:hover .icon-expand .label::before, a.expanded:hover .icon-expand .label::after { width: 1em; } /* more, close */ a:hover .icon-more.animated .label::before, a:hover .icon-more.animated .label::after { width: .75em; } a:hover .icon-close.animated .label::before, a:hover .icon-close.animated .label::after { width: 1em; } /* search */ a:hover .icon-search.animated .label::before { height: .75em; width: .75em; } a:hover .icon-search.animated .label::after { width: .5em; } /* pause */ a.is-paused .icon-play.animated .label::before, a.is-playing:hover .icon-play.animated .label::before { clip-path: var(--icon-pause-clip-left); } a.is-paused .icon-play.animated .label::after, a.is-playing:hover .icon-play.animated .label::after { clip-path: var(--icon-pause-clip-right); } /* play */ a.is-paused:hover .icon-play.animated .label::before, a.is-playing .icon-play.animated .label::before { clip-path: var(--icon-play-clip-left); } a.is-paused:hover .icon-play.animated .label::after, a.is-playing .icon-play.animated .label::after { clip-path: var(--icon-play-clip-right); } } @media (hover: none) { /* arrow */ a.hover [class^="icon-arrow-"].animated .label { width: .8em; } a.hover [class^="icon-arrow-"].animated .label::before, a.hover [class^="icon-arrow-"].animated .label::after { width: .3em; } /* expand */ a.hover:not(.expanded) .icon-expand.animated .label::before { transform: translate(0, -.25em); } a.hover:not(.expanded) .icon-expand.animated .label::after { transform: translate(0, .25em); } a.expanded.hover .icon-expand .label::before, a.expanded.hover .icon-expand .label::after { width: 1em; } /* more, close */ a.hover .icon-more.animated .label::before, a.hover .icon-more.animated .label::after { width: .75em; } a.hover .icon-close.animated .label::before, a.hover .icon-close.animated .label::after { width: 1em; } /* search */ a.hover .icon-search.animated .label::before { height: .75em; width: .75em; } a.hover .icon-search.animated .label::after { width: .5em; } /* pause */ a.is-paused .icon-play.animated .label::before, a.is-playing.hover .icon-play.animated .label::before { clip-path: var(--icon-pause-clip-left); } a.is-paused .icon-play.animated .label::after, a.is-playing.hover .icon-play.animated .label::after { clip-path: var(--icon-pause-clip-right); } /* play */ a.is-paused.hover .icon-play.animated .label::before, a.is-playing .icon-play.animated .label::before { clip-path: var(--icon-play-clip-left); } a.is-paused.hover .icon-play.animated .label::after, a.is-playing .icon-play.animated .label::after { clip-path: var(--icon-play-clip-right); } } /* ================================================================================================= */ /* ============================================= THEME ============================================= */ /* ================================================================================================= */ /* here for project-specific overrides */