/* ============================================================================= The icon set ----------------------------------------------------------------------------- Roadmap II Prompt 51. The rail, the transport bar and the lesson instruments used emoji as icons, which the operating system draws: glossy cartoons on a Mac, a flat set on Windows, tofu boxes on a Linux machine without an emoji font, and in no case the interface's color, so a daylight theme or a disabled button changed everything on the control but its picture. A screen reader also read each one out - "clapper board Record Clip". These are drawn once, on a 16-unit grid, as the alpha mask of a box filled with the text color, so they are exactly as crisp as the type at any zoom and take their color from wherever they sit: Every use is aria-hidden and sits beside words, or on a control with an aria-label: an icon is never the only name a control has. Size and color are tokens (--icon-size, --icon-color in css/tokens.css) that a context can override. A .object-glyph (js/inspectorView.js) is the other kind of picture: the eight things a reader can add, in their own class hues. ========================================================================== */ @layer components { .icon { display: inline-block; flex: none; inline-size: var(--icon-size); block-size: var(--icon-size); vertical-align: -0.2em; background-color: var(--icon-color); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } /* Drawn facing right; these are the same pictures facing left. */ .icon-back, .icon-step-back, .icon-rewind { transform: scaleX(-1); } /* Transport */ .icon-play, .icon-back { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5v11L13.5 8z'/%3E%3C/svg%3E"); } .icon-pause { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 2.5h3v11h-3zm6 0h3v11h-3z'/%3E%3C/svg%3E"); } .icon-stop { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='3' width='10' height='10' rx='1'/%3E%3C/svg%3E"); } .icon-step-fwd, .icon-step-back { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 2.5v11L10 8zm8.5 0h2.5v11H11z'/%3E%3C/svg%3E"); } .icon-fast-forward, .icon-rewind { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 3v10l7-5zm7 0v10l7-5z'/%3E%3C/svg%3E"); } /* Measuring */ .icon-ruler { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5h13v5h-13zM4 5.5V8m2.5-2.5V7M9 5.5V8m2.5-2.5V7' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E"); } .icon-angle { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.5 13.5H2L10 3M8 13.5a6 6 0 0 0-2.4-4.8' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .icon-stopwatch { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8' cy='9.5' r='5.2'/%3E%3Cpath d='M6.2 1.5h3.6M8 1.5V4m0 5.5V6.7m4.3-2.5 1-1'/%3E%3C/g%3E%3C/svg%3E"); } .icon-flag { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 1.5h1.5v13H3zM5.5 2H13l-2.5 3.5L13 9H5.5z'/%3E%3C/svg%3E"); } /* Capture and presenting */ .icon-camera { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 5h3.2l1.5-2h4.6l1.5 2H15v8.5H1zm7 1.6a2.8 2.8 0 1 0 0 5.6 2.8 2.8 0 0 0 0-5.6z'/%3E%3C/svg%3E"); } .icon-video { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 4.5h9.5v7H1zM11.5 7 15 4.8v6.4L11.5 9z'/%3E%3C/svg%3E"); } .icon-clapper { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 7.5h13V14h-13zm-.4-1.6 12.5-3.4.4 1.5L1.5 7.4z'/%3E%3C/svg%3E"); } .icon-present { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.5h14m-12.5 0v8h11v-8M8 10.5V14m-2.5 0h5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* The rail's other actions */ .icon-cap { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2 .5 5.5 8 9l7.5-3.5zM3.5 7.9V11c0 1.2 2 2.2 4.5 2.2s4.5-1 4.5-2.2V7.9L8 10zM14 6.2h1v4.3h-1z'/%3E%3C/svg%3E"); } .icon-link { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m6.5 9.5 3-3M7.2 4.8l1.3-1.3A2.5 2.5 0 0 1 12 7l-1.3 1.3m-1.9 2.9-1.3 1.3A2.5 2.5 0 0 1 4 9l1.3-1.3' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); } .icon-chart { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 13.5h12V15H2zM3 8h2.5v4.5H3zm3.75-4h2.5v8.5h-2.5zm3.75 2.5H13v6h-2.5z'/%3E%3C/svg%3E"); } .icon-star { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m8 1.2 2.1 4.3 4.7.7-3.4 3.3.8 4.7L8 12l-4.2 2.2.8-4.7-3.4-3.3 4.7-.7z'/%3E%3C/svg%3E"); } /* Sound: off (muted or blocked), permitted but silent, and playing */ .icon-sound-off { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5h3L8.5 2v12l-4-3.5h-3z'/%3E%3Cpath d='m10.5 5.5 4 5m0-5-4 5' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); } .icon-sound { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5h3L8.5 2v12l-4-3.5h-3z'/%3E%3Cpath d='M10.5 6a2.5 2.5 0 0 1 0 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); } .icon-sound-on { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5h3L8.5 2v12l-4-3.5h-3z'/%3E%3Cpath d='M10.5 6a2.5 2.5 0 0 1 0 4M12 3.5a6 6 0 0 1 0 9' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); } /* Forced colors repaints backgrounds as the canvas, which would erase a mask-drawn icon; its color is already the forced text color. */ @media (forced-colors: active) { .icon { forced-color-adjust: none; } } }