word/debug.css

   1 figure:before {
   2         content: '';
   3         position: absolute;
   4         width: 100%;
   5         height: 100%;
   6 }
   7 figure .debug {
   8         position: absolute;
   9         left: .1em;
  10 }
  11
  12 /* essential = transparent white */
  13 .level0 > figure:before {
  14         box-shadow: inset 0 0 2em #FFF;
  15 }
  16
  17 /* ubiquitous = cyan */
  18 .level1 > figure:before {
  19         box-shadow: inset 0 0 1em #0FF;
  20 }
  21 .level1 > figure figcaption {
  22         background: #8FFA;
  23 }
  24
  25 /* basic = green */
  26 .level2 > figure {
  27         filter: hue-rotate(-70deg) sepia(.4) hue-rotate(70deg) saturate(2);
  28 }
  29 .level2 > figure:before {
  30         box-shadow: inset 0 0 1em #6FA;
  31 }
  32 .level2 > figure figcaption {
  33         background: #AFDC;
  34 }
  35
  36 /* common = lime */
  37 .level3 > figure {
  38         filter: hue-rotate(-45deg) sepia(.6) hue-rotate(45deg) saturate(2);
  39 }
  40 .level3 > figure:before {
  41         box-shadow: inset 0 0 1em #2F0;
  42 }
  43 .level3 > figure figcaption {
  44         background: #8F8C;
  45 }
  46
  47 /* distinctive = yellow */
  48 .level4 > figure {
  49         filter: hue-rotate(-15deg) sepia(.7) hue-rotate(15deg) saturate(2);
  50 }
  51 .level4 > figure:before {
  52         box-shadow: inset 0 0 1em #FD0;
  53 }
  54 .level4 > figure figcaption {
  55         background: #FE8C;
  56 }
  57
  58 /* specialised = orange */
  59 .level5 > figure {
  60         filter: hue-rotate(10deg) sepia(.8) hue-rotate(-10deg) saturate(2);
  61 }
  62 .level5 > figure:before {
  63         box-shadow: inset 0 0 2em #F80;
  64 }
  65 .level5 > figure figcaption {
  66         background: #FC8C;
  67 }
  68
  69 /* rare = red */
  70 .level6 > figure {
  71         filter: hue-rotate(40deg) sepia(.9) hue-rotate(-40deg) saturate(2);
  72 }
  73 .level6 > figure:before {
  74         box-shadow: inset 0 0 3em #F00;
  75 }
  76 .level6 > figure figcaption {
  77         background: #F88C;
  78 }
  79
  80 /* invisible = grey */
  81 .level7 > figure {
  82         filter: sepia(.9) hue-rotate(-60deg);
  83 }
  84 .level7 > figure:before {
  85         box-shadow: inset 0 0 3em #804;
  86 }
  87 .level7 > figure figcaption {
  88         background: #C68C;
  89 }