kmx.io/prism.js/plugins/inline-color/prism-inline-color.css

• Show log

  Commit

• Hash : 8d2c5a3e
  Author :
  Date : 2020-03-10T15:11:13
  

  Inline color: Support for (semi-)transparent colors and minor improvements (#2223) - This changes the inline preview to include a background image, so (semi-)transparent colors can be identified as such instead of blending with the background color of the current theme. - The black outline is now more transparent to better blend in with light themes. - The `transparent` color was added to CSS Extras. - This fixes the `parseHexColor` function.

Download

• plugins/inline-color/prism-inline-color.css

• 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%;
  }
  

Download