height: 100%;
}
.parent > figure:after {
- content: '+';
position: absolute;
right: 0;
+ content: '+';
color: #FFF;
- width: 1em;
- line-height: 1em;
background: #0008;
border-radius: 1em;
+ padding: 0 .2em;
+}
+figure .debug {
+ position: absolute;
+ left: .1em;
}
-/* essential = blue */
+/* essential = transparent white */
.level0 > figure:before {
- box-shadow: inset 0 0 1em #0FF;
+ box-shadow: inset 0 0 2em #FFF;
}
-/* basic = cyan */
-.level1 > figure {
- filter: sepia(.8) hue-rotate(70deg) saturate(2);
-}
+/* ubiquitous = cyan */
.level1 > figure:before {
- box-shadow: inset 0 0 1em #0F0;
+ box-shadow: inset 0 0 1em #0FF;
}
.level1 > figure figcaption {
- background: #080C;
+ background: #8FFA;
}
-/* common = green */
+/* basic = green */
.level2 > figure {
- filter: sepia(.9) hue-rotate(45deg) saturate(2);
+ filter: hue-rotate(-70deg) sepia(.4) hue-rotate(70deg) saturate(2);
}
.level2 > figure:before {
- box-shadow: inset 0 0 1em #FF0;
+ box-shadow: inset 0 0 1em #6FA;
}
.level2 > figure figcaption {
- background: #480C;
+ background: #AFDC;
}
-/* distinct = yellow */
+/* common = lime */
.level3 > figure {
- filter: sepia(.9) hue-rotate(15deg) saturate(2);
+ filter: hue-rotate(-45deg) sepia(.6) hue-rotate(45deg) saturate(2);
}
.level3 > figure:before {
- box-shadow: inset 0 0 1em #FC0;
+ box-shadow: inset 0 0 1em #2F0;
}
.level3 > figure figcaption {
- background: #880C;
+ background: #8F8C;
}
-/* rare = orange */
+/* distinctive = yellow */
.level4 > figure {
- filter: sepia(.9) hue-rotate(-10deg) saturate(2);
+ filter: hue-rotate(-15deg) sepia(.7) hue-rotate(15deg) saturate(2);
}
.level4 > figure:before {
- box-shadow: inset 0 0 2em #F80;
+ box-shadow: inset 0 0 1em #FD0;
}
.level4 > figure figcaption {
- background: #840C;
+ background: #FE8C;
}
+/* specialised = orange */
.level5 > figure {
- filter: sepia(.9) hue-rotate(-40deg) saturate(2);
+ filter: hue-rotate(10deg) sepia(.8) hue-rotate(-10deg) saturate(2);
}
.level5 > figure:before {
- box-shadow: inset 0 0 3em #F00;
+ box-shadow: inset 0 0 2em #F80;
}
.level5 > figure figcaption {
- background: #800C;
+ background: #FC8C;
+}
+
+/* rare = red */
+.level6 > figure {
+ filter: hue-rotate(40deg) sepia(.9) hue-rotate(-40deg) saturate(2);
+}
+.level6 > figure:before {
+ box-shadow: inset 0 0 3em #F00;
+}
+.level6 > figure figcaption {
+ background: #F88C;
+}
+
+/* invisible = grey */
+.level7 > figure {
+ filter: sepia(.9) hue-rotate(-60deg);
+}
+.level7 > figure:before {
+ box-shadow: inset 0 0 3em #804;
+}
+.level7 > figure figcaption {
+ background: #C68C;
}