34 lines
1.0 KiB
Plaintext
34 lines
1.0 KiB
Plaintext
span.inline-color-wrapper {
|
|
/*
|
|
* The background image is the following SVG inline in base 64:
|
|
*
|
|
* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
|
|
* <path fill="gray" d="M0 0h2v2H0z"/>
|
|
* <path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
|
|
* </svg>
|
|
*
|
|
* SVG-inlining explained:
|
|
* https://stackoverflow.com/a/21626701/7595472
|
|
*/
|
|
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4=");
|
|
/* This is to prevent visual glitches where one pixel from the repeating pattern could be seen. */
|
|
background-position: center;
|
|
background-size: 110%;
|
|
|
|
display: inline-block;
|
|
height: 1.333ch;
|
|
width: 1.333ch;
|
|
margin: 0 .333ch;
|
|
box-sizing: border-box;
|
|
border: 1px solid white;
|
|
outline: 1px solid rgba(0,0,0,.5);
|
|
overflow: hidden;
|
|
}
|
|
|
|
span.inline-color {
|
|
display: block;
|
|
/* To prevent visual glitches again */
|
|
height: 120%;
|
|
width: 120%;
|
|
}
|