From d5d597d3778d70e43835730a54f42634c44e250e Mon Sep 17 00:00:00 2001
From: Ruben van de Ven <git@rubenvandeven.com>
Date: Wed, 2 Dec 2020 11:45:06 +0100
Subject: [PATCH] style changes

---
 www/coco.css   | 48 ++++++++++++++++++++++++++++++++----------------
 www/index.html | 23 +++++++++++++----------
 2 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/www/coco.css b/www/coco.css
index e1df1bc..f4bf559 100644
--- a/www/coco.css
+++ b/www/coco.css
@@ -51,7 +51,7 @@ body.drawspace{
 	width:145px;
 	/*box-shadow: white 0 0 20px;*/
 	position:relative;
-	font-size: 16px;
+	font-size: 0.8em;
 
 }
 .catNav ul:first-child{
@@ -137,6 +137,9 @@ svg text{
 	margin: 10px;
 	width:100%;
 }
+.buttons #buttons-top{
+	display: block;
+}
 .buttons span, .buttons label{
 	/*color:white;*/
 	cursor:pointer;
@@ -145,7 +148,7 @@ svg text{
 	text-decoration:underline;
 }
 .buttons #sceneLabel{
-	display:block;
+	/* display:block; */
 }
 
 body{
@@ -168,62 +171,74 @@ body.hideLabels svg text{
 }
 
 .supercategory-person:before{
-	background:rgb(250,8,0);
+	/* background:rgb(250,8,0); */
+	background: black;
 }
 .supercategory-person li{
 }
 .supercategory-vehicle:before{
-	background:rgb(128,255,0);
+	/* background:rgb(128,255,0); */
+	background: black;
 }
 .supercategory-vehicle li{
 }
 .supercategory-outdoor:before{
-	background:rgb(0,255,255);
+	/* background:rgb(0,255,255); */
+	background: black;
 }
 .supercategory-outdoor li{
 }
 .supercategory-animal:before{
-	background:rgb(255,0,255);
+	/* background:rgb(255,0,255); */
+	background: black;
 }
 .supercategory-animal li{
 }
 .supercategory-accessory:before{
-	background:rgb(255,255,0);
+	/* background:rgb(255,255,0); */
+	background: black;
 }
 .supercategory-accessory li{
 }
 .supercategory-sports:before{
-	background:rgb(0,128,255);
+	/* background:rgb(0,128,255); */
+	background: black;
 }
 .supercategory-sports li{
 }
 .supercategory-kitchen:before{
-	background:rgb(250,133,0);
+	/* background:rgb(250,133,0); */
+	background: black;
 }
 .supercategory-kitchen li{
 }
 .supercategory-furniture:before{
-	background:rgb(187,0,250);
+	/* background:rgb(187,0,250); */
+	background: black;
 }
 .supercategory-furniture li{
 }
 .supercategory-food:before{
-	background:rgb(0,250,133);
+	/* background:rgb(0,250,133); */
+	background: black;
 }
 .supercategory-food li{
 }
 .supercategory-electronic:before{
-	background:rgb(250,217,0);
+	/* background:rgb(250,217,0); */
+	background: black;
 }
 .supercategory-electronic li{
 }
 .supercategory-appliance:before{
-	background:rgb(255,0,128);
+	/* background:rgb(255,0,128); */
+	background: black;
 }
 .supercategory-appliance li{
 }
 .supercategory-indoor:before{
-	background:rgb(133,0,250);
+	/* background:rgb(133,0,250); */
+	background: black;
 }
 .supercategory-indoor li{
 }
@@ -285,7 +300,7 @@ select{
 
 	font-family: "space_grotesk";
 	font-feature-settings: "salt";
-	font-size:16px;
+	font-size:0.8em;
 }
 option{
 	font-family: sans-serif;
@@ -293,6 +308,7 @@ option{
 }
 
 button, input[type='submit'],#godraw a,#saved a{
+	cursor: pointer;
     -webkit-appearance: button;
     -moz-appearance: button;
     appearance: button;
@@ -308,7 +324,7 @@ button, input[type='submit'],#godraw a,#saved a{
 
 	font-family: "space_grotesk";
 	font-feature-settings: "salt";
-	font-size:16px;
+	font-size:0.8em;
 
 	border-radius: 2px;
 }
diff --git a/www/index.html b/www/index.html
index 80e671c..cd1e527 100644
--- a/www/index.html
+++ b/www/index.html
@@ -46,16 +46,19 @@
 </svg>
 
 <div class='buttons'>
-<label id='scenelabel'>Scene <select id='scene'>
-<!-- 	<option>-</option> -->
-	<option data-background="drone_simple.svg" value="1">View from a drone</option>
-	<option data-background="car_simple.svg" value="2">View from a self driving car</option>
-	<option data-background="room_simple.svg" value="3">Product affiliation detector</option>
-	</select></label>
-<label id='convert'><input type='checkbox' id='loadImages'> <span>Images</span></label>
-<label id='labelcheck'><input type='checkbox' id='loadLabels'> <span>Labels</span></label>
-<label id='savewrap'><input type='submit' id='save' disabled='disabled' value='Save'></label>
-<label id='saved'><a href='saved'>Saved drawings</a></label>
+  <div id='buttons-top'>
+
+    <label id='scenelabel'>Pick a scene <select id='scene'>
+      <!-- 	<option>-</option> -->
+      <option data-background="drone_simple.svg" value="1">View from a drone</option>
+      <option data-background="car_simple.svg" value="2">View from a self driving car</option>
+      <option data-background="room_simple.svg" value="3">Product affiliation detector</option>
+    </select></label>
+    <label id='convert'><input type='checkbox' id='loadImages'> <span>Images</span></label>
+    <label id='labelcheck'><input type='checkbox' id='loadLabels'> <span>Labels</span></label>
+  </div>
+  <label id='savewrap'><input type='submit' id='save' disabled='disabled' value='Save'></label>
+  <label id='saved'><a href='saved'>View saved drawings</a></label>
 </div>
 
 <!--   <script src="svg-inject.min.js"></script> -->