optimize key and add bg

2 files changed, 22 insertions, 6 deletions

diff --git a/webAO/styles/chatbox/bricks.svg b/webAO/styles/chatbox/bricks.svg
new file mode 100644
index 0000000..6baca51
--- /dev/null
+++ b/webAO/styles/chatbox/bricks.svg
@@ -0,0 +1,11 @@
+<svg id="SVGRoot" width="16px" height="16px" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+ <rect width="16" height="16" fill="#a55"/>
+ <g transform="matrix(.9814 0 0 .9816 .04907 .04908)" fill="none" stroke="#744">
+  <path d="m0 0.2h16" stroke-width=".5"/>
+  <path d="m-0.05 16h16.3" stroke-width=".5"/>
+  <path d="m-0.05 8.1h16.3" stroke-width=".9"/>
+  <path d="m8.101 8.1v8.15" stroke-width=".9px"/>
+  <path d="m0.2047-0.05v8.15" stroke-width=".5"/>
+  <path d="m16-0.05v8.15" stroke-width=".5"/>
+ </g>
+</svg>
diff --git a/webAO/styles/chatbox/key.css b/webAO/styles/chatbox/key.css
index 50d2bc1..f6c8a7d 100644
--- a/webAO/styles/chatbox/key.css
+++ b/webAO/styles/chatbox/key.css
@@ -146,9 +146,11 @@
 	left: 1%;
 	width: 12%;
 	height: 15%;
-	background-color: #d59a9a;
+	background: url("bricks.svg");
+	background-size: 1.5em;
 	border: #ffbe9f 3px ridge;
 	border-radius: 100%;
+	font-family: serif;
 }
 
 #client_clock_month {
@@ -171,12 +173,15 @@
 	position: absolute;
 	width: 50%;
 	height: 50%;
-	left: 25%;
-	top: 25%;
+	left: 11%;
+	top: 11%;
 	margin: 0;
-	color: #fdf5e4;
+	color: #ffe;
 	text-shadow: -1px -1px 0 #78320b, 1px -1px 0 #78320b, -1px 1px 0 #78320b, 1px 1px 0 #78320b;
 	font-size: 3em;
+	background: rgba(255,255,255,0.7);
+	border-radius: 100%;
+	padding: 0.25em;
 }
 
 #client_clock_weekday {
@@ -186,8 +191,8 @@
 	right: 0;
 	bottom: 0;
 	margin: 0;
-	color: gray;
-	text-shadow: -1px -1px 0 darkgray, 1px -1px 0 darkgray, -1px 1px 0 darkgray, 1px 1px 0 darkgray;
+	color: #ccc;
+	text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333;
 	text-decoration: underline;
 	font-size: smaller;
 	font-weight: bold;