word-debug.css

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