WIP log background colors for formations

1 files changed, 60 insertions, 4 deletions

diff --git a/play.html b/play.html
index 1155ccd..4db62b2 100644
--- a/play.html
+++ b/play.html
@@ -20,6 +20,17 @@
 	--pink: hsl(359, 81%, 78%);
 	--blue: hsl(211, 78%, 52%);
 	--dkblue: hsl(240, 69%, 57%);
+	--dkblue2: #04089f;
+
+	--fg-red: hsl(360, 77%, 31%);
+	--fg-pink: hsl(359, 81%, 58%);
+	--fg-blue: hsl(211, 78%, 32%);
+	--fg-dkblue: hsl(240, 69%, 37%);
+
+	--bg-red: hsl(360, 100%, 80%);
+	--bg-pink: hsl(360, 100%, 90%);
+	--bg-blue: hsl(210, 100%, 85%);
+	--bg-dkblue: hsl(220, 100%, 80%);
 
 	--hi-red: hsl(360, 77%, 61%);
 	--hi-pink: hsl(359, 81%, 83%);
@@ -95,11 +106,56 @@
 	padding-left: 8px;
 }
 
+/*
 #log .n { padding: 0 3px }
-#log .blue { background-color: aliceblue; }
-#log .dkblue { background-color: skyblue; }
-#log .red { background-color: pink; }
-#log .pink { background-color: mistyrose; }
+#log .blue, #log .dkblue { background-color: lightskyblue; }
+#log .red, #log .pink { background-color: pink; }
+*/
+
+/*
+#log .n.dkblue::before { content: "\2660 "; color: var(--dkblue2); }
+#log .n.blue::before { content: "\2663 "; color: var(--blue); }
+#log .n.red::before { content: "\2665 "; color: var(--red); }
+#log .n.pink::before { content: "\2666 "; color: var(--pink); }
+*/
+
+/*
+#log .n.dkblue::before { content: "\25fe"; color: var(--dkblue2); }
+#log .n.blue::before { content: "\25fe"; color: var(--blue); }
+#log .n.red::before { content: "\25fe"; color: var(--red); }
+#log .n.pink::before { content: "\25fe"; color: var(--pink); }
+*/
+
+/*
+#log .n.dkblue::after { content: "\25b6"; color: var(--dkblue2); }
+#log .n.blue::after { content: "\25b6"; color: var(--blue); }
+#log .n.red::after { content: "\25b6"; color: var(--red); }
+#log .n.pink::after { content: "\25b6"; color: var(--pink); }
+#log .n.dkblue::before { content: "\25c0"; color: var(--dkblue2); }
+#log .n.blue::before { content: "\25c0"; color: var(--blue); }
+#log .n.red::before { content: "\25c0"; color: var(--red); }
+#log .n.pink::before { content: "\25c0"; color: var(--pink); }
+#log .n.dkblue { text-decoration: 1px underline var(--dkblue2); }
+#log .n.blue { text-decoration: 1px underline var(--blue); }
+#log .n.red { text-decoration: 1px underline var(--red); }
+#log .n.pink { text-decoration: 1px underline var(--pink); }
+*/
+
+
+#log .n { padding: 0 3px }
+#log .n.dkblue { background-color: var(--bg-dkblue); }
+#log .n.blue { background-color: var(--bg-blue); }
+#log .n.red { background-color: var(--bg-red); }
+#log .n.pink { background-color: var(--bg-pink); }
+/*
+*/
+
+/*
+#log .n.dkblue { color: var(--fg-dkblue); }
+#log .n.blue { color: var(--fg-blue); }
+#log .n.red { color: var(--fg-red); }
+#log .n.pink { color: var(--fg-pink); }
+*/
 
 .mini {
 	display: inline-block;