word-debug.css

   1 figure:before {
   2         content: '';
   3         position: absolute;
   4         width: 100%;
   5         height: 100%;
   6 }
   7 .parent > figure:after {
   8         content: '+';
   9         position: absolute;
  10         right: 0;
  11         color: #FFF;
  12         width: 1em;
  13         line-height: 1em;
  14         background: #0008;
  15         border-radius: 1em;
  16 }
  17
  18 /* essential = blue */
  19 .level0 > figure:before {
  20         box-shadow: inset 0 0 1em #0FF;
  21 }
  22
  23 /* basic = cyan */
  24 .level1 > figure {
  25         filter: sepia(.8) hue-rotate(70deg) saturate(2);
  26 }
  27 .level1 > figure:before {
  28         box-shadow: inset 0 0 1em #0F0;
  29 }
  30 .level1 > figure figcaption {
  31         background: #080C;
  32 }
  33
  34 /* common = green */
  35 .level2 > figure {
  36         filter: sepia(.9) hue-rotate(45deg) saturate(2);
  37 }
  38 .level2 > figure:before {
  39         box-shadow: inset 0 0 1em #FF0;
  40 }
  41 .level2 > figure figcaption {
  42         background: #480C;
  43 }
  44
  45 /* distinct = yellow */
  46 .level3 > figure {
  47         filter: sepia(.9) hue-rotate(15deg) saturate(2);
  48 }
  49 .level3 > figure:before {
  50         box-shadow: inset 0 0 1em #FC0;
  51 }
  52 .level3 > figure figcaption {
  53         background: #880C;
  54 }
  55
  56 /* rare = orange */
  57 .level4 > figure {
  58         filter: sepia(.9) hue-rotate(-10deg) saturate(2);
  59 }
  60 .level4 > figure:before {
  61         box-shadow: inset 0 0 2em #F80;
  62 }
  63 .level4 > figure figcaption {
  64         background: #840C;
  65 }
  66
  67 .level5 > figure {
  68         filter: sepia(.9) hue-rotate(-40deg) saturate(2);
  69 }
  70 .level5 > figure:before {
  71         box-shadow: inset 0 0 3em #F00;
  72 }
  73 .level5 > figure figcaption {
  74         background: #800C;
  75 }