UNPKG

1.05 kBCSSView Raw
1span.inline-color-wrapper {
2 /*
3 * The background image is the following SVG inline in base 64:
4 *
5 * <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
6 * <path fill="gray" d="M0 0h2v2H0z"/>
7 * <path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
8 * </svg>
9 *
10 * SVG-inlining explained:
11 * https://stackoverflow.com/a/21626701/7595472
12 */
13 background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4=");
14 /* This is to prevent visual glitches where one pixel from the repeating pattern could be seen. */
15 background-position: center;
16 background-size: 110%;
17
18 display: inline-block;
19 height: 1.333ch;
20 width: 1.333ch;
21 margin: 0 .333ch;
22 box-sizing: border-box;
23 border: 1px solid white;
24 outline: 1px solid rgba(0,0,0,.5);
25 overflow: hidden;
26}
27
28span.inline-color {
29 display: block;
30 /* To prevent visual glitches again */
31 height: 120%;
32 width: 120%;
33}