web: change colours

1 files changed, 23 insertions, 18 deletions

diff --git a/web/static/style.css b/web/static/style.css
index 912a832..a4572d8 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -53,7 +53,7 @@ div#controls #keypad-init .key {
 div#oi {
 	visibility: hidden;
 
-	background-color: #6c0d0d;
+	background-color: #640016;
 	font-size: 3em;
 	height: 1.2em;
 	width: 3ch;
@@ -104,7 +104,7 @@ div#p2-info {
 }
 
 div#p1-info.active, div#p2-info.active {
-	background-color: #2a390a;
+	background-color: #2d3d0b;
 }
 
 div#p1-rem, div#p2-rem {
@@ -113,7 +113,7 @@ div#p1-rem, div#p2-rem {
 }
 
 div#p1-name, div#p2-name {
-	color: #aaa;
+	color: #ccc;
 }
 
 div#p1-sugg, div#p2-sugg {
@@ -148,7 +148,7 @@ div#prompt {
 }
 
 div#prompt.active {
-	background-color: #3d2466;
+	background-color: #311d52;
 }
 
 div#prompt-msg-l, div#prompt-input, div#prompt-msg-r {
@@ -161,7 +161,7 @@ div#prompt-msg-l, div#prompt-input, div#prompt-msg-r {
 
 div#prompt-msg-l, div#prompt-msg-r {
 	flex: 1;
-	color: #aaa;
+	color: #ccc;
 	padding: 0 0.4rem;
 }
 
@@ -176,7 +176,7 @@ div#prompt-input {
 }
 
 div.key {
-	color: #aaa;
+	color: #ccc;
 	background-color: #282828;
 	font-size: 1.5em;
 
@@ -187,7 +187,7 @@ div.key {
 
 @media (hover: hover) and (pointer: fine) {
 	div.key:hover {
-		background-color: #2a390a;
+		background-color: #32440c;
 	}
 }
 
@@ -197,6 +197,7 @@ div.key:active {
 }
 
 div.key.active {
+	color: #eee;
 	background-color: #3d2466;
 }
 
@@ -211,6 +212,11 @@ div.key.active:active {
 	background-color: #6e41b8;
 }
 
+div.key span.keyboard-val {
+	display: contents;
+	color: #aaa;
+}
+
 div.key.num {
 	font-size: 2.5em;
 	font-weight: 700;
@@ -257,7 +263,7 @@ div#settings-bar span {
 }
 
 div#settings-bar input {
-	color: #ddd;
+	color: #eee;
 	background-color: #3d2466;
 	font-family: inherit;
 	font-size: 1em;
@@ -322,16 +328,15 @@ div#visits div {
 }
 
 div#visits .visit-col1 { grid-column: 2; }
-div#visits .visit-col3 { color: #888; grid-column: 4; }
-div#visits .p0 { color: #f00; font-weight: bold; }
-div#visits .p1 { color: #f00; }
-div#visits .p20 { color: #f60; }
-div#visits .p40 { color: #fa0; }
-div#visits .p60 { color: #dd0; }
-div#visits .p100 { color: #2c2; }
-div#visits .p140 { color: #0f0; }
-div#visits .p180 { color: #0f0; font-weight: bold; }
-div#visits .visit-col6 { color: #888; justify-content: left; font-family: monospace; white-space: pre; }
+div#visits .visit-col3 { color: #666; grid-column: 4; }
+div#visits .p0 { color: #ee0016; }
+div#visits .p20 { color: #ee6400; }
+div#visits .p40 { color: #ee9600; }
+div#visits .p60 { color: #cccc16; }
+div#visits .p100 { color: #64cc16; }
+div#visits .p140 { color: #64ee16; }
+div#visits .p180 { color: #64ee16; font-weight: bold; }
+div#visits .visit-col6 { color: #666; justify-content: left; font-family: monospace; white-space: pre; }
 
 .modal {
 	background-color: rgba(0, 0, 0, 0.6);