From 4662a8f167fdbeaa70c88d834d43e4a38d280d19 Mon Sep 17 00:00:00 2001
From: Ruben van de Ven <git@rubenvandeven.com>
Date: Tue, 10 Mar 2020 15:07:29 +0100
Subject: [PATCH] Styling

---
 www/coco.css   | 164 +++++++++++++++++++++++++++++++------------------
 www/index.html |   6 +-
 www/saved.html |  19 ++++--
 3 files changed, 122 insertions(+), 67 deletions(-)

diff --git a/www/coco.css b/www/coco.css
index 543280d..a9c84df 100644
--- a/www/coco.css
+++ b/www/coco.css
@@ -19,9 +19,7 @@ body{
 	position:absolute;
 	top:0;
 	color:white;
-	/*bottom:0;*/
-	/*overflow-y: auto;*/
-	padding: 10px;
+	padding: 80px 10px 10px 10px;
 }
 #catNav {
 	left:calc(7vh + 10px);
@@ -33,16 +31,12 @@ body{
 .catNav ul{
 	list-style:none;
 	padding:0px;
-	margin: 30px 0px;
+	margin: 60px 0px;
 	border-width: 3px;
 	width:145px;
-	overflow-x:hidden;
-	/*Due to rotation the overlfow hidden does anoying things*/
-	padding-top:93px;
-	margin-bottom:-85px;
-	box-shadow: white 0 0 20px;
+	/*box-shadow: white 0 0 20px;*/
 	position:relative;
-	font-size: 12px;
+	font-size: 16px;
 }
 .catNav ul:first-child{
 	margin-top:0;
@@ -50,16 +44,20 @@ body{
 .catNav ul:before{
 	content: attr(data-name);
 	position:absolute;
-	top: 68px;
+	bottom: 100%;
 	transform:rotate(-30deg);
 	transform-origin: top left;
 	font-weight:bold;
+	padding: 2px 10px;
+	margin-left: -4px;
 }
 #catNav2 ul:before{
 	transform:rotate(30deg);
 	transform-origin:top right;
 	right:0;
-	top: 66px;
+	bottom: 100%;
+	margin-right: -4px;
+	margin-left: 0px;
 }
 /*#catNav ul {
 	border-left-style: solid;
@@ -69,9 +67,8 @@ body{
 }*/
 
 .catNav li{
-	padding: 2px 2px 2px 25px;
-	width:160px;
-	margin-left:-12px;
+	padding: 2px;
+	/*margin-left:-12px;*/
 	text-shadow: black 0 0 2px;
 }
 .catNav li:hover{
@@ -86,9 +83,7 @@ body{
 	transform: rotate(30deg);
 	text-align:right;
 	transform-origin: top right;
-	padding-right: 25px;
-	padding-left: 2px;
-	margin-left:-25px;
+	
 }
 
 g{
@@ -101,7 +96,7 @@ g:active{
 
 svg text{
 	fill:white;
-	font-size: 40pt;
+	font-size: 25pt;
 
 	-webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -115,8 +110,9 @@ svg text{
 	position:absolute;
 	top: 10px;
 	text-align:center;
-	width: 300px;
+	width: 400px;
 	left: calc(50% - 150px);
+
 }
 .buttons.buttons-inline{
 	position:static;
@@ -124,7 +120,7 @@ svg text{
 	width:100%;
 }
 .buttons span, .buttons label{
-	color:white;
+	/*color:white;*/
 	cursor:pointer;
 }
 .buttons span:hover{
@@ -134,6 +130,17 @@ svg text{
 	display:block;
 }
 
+body{
+	color:white;
+}
+body.saved{
+	background:yellow;
+	color:black;
+}
+body.saved label{
+
+}
+
 body.hideImages svg image{
 	display:none;
 }
@@ -142,79 +149,82 @@ body.hideLabels svg text{
 }
 
 .supercategory-person:before{
-	color:rgb(250,8,0);
-}
-.supercategory-person li{
+	/*color:rgb(250,8,0);*/
 	background:rgb(250,8,0);
 }
-.supercategory-vehicle:before{
-	color:rgb(128,255,0);
+.supercategory-person li{
 }
-.supercategory-vehicle li{
+.supercategory-vehicle:before{
+	/*color:rgb(128,255,0);*/
 	background:rgb(128,255,0);
 }
-.supercategory-outdoor:before{
-	color:rgb(0,255,255);
+.supercategory-vehicle li{
 }
-.supercategory-outdoor li{
+.supercategory-outdoor:before{
+	/*color:rgb(0,255,255);*/
 	background:rgb(0,255,255);
 }
-.supercategory-animal:before{
-	color:rgb(255,0,255);
+.supercategory-outdoor li{
 }
-.supercategory-animal li{
+.supercategory-animal:before{
+	/*color:rgb(255,0,255);*/
 	background:rgb(255,0,255);
 }
-.supercategory-accessory:before{
-	color:rgb(255,255,0);
+.supercategory-animal li{
 }
-.supercategory-accessory li{
+.supercategory-accessory:before{
+	/*color:rgb(255,255,0);*/
 	background:rgb(255,255,0);
 }
-.supercategory-sports:before{
-	color:rgb(0,128,255);
+.supercategory-accessory li{
 }
-.supercategory-sports li{
+.supercategory-sports:before{
+	/*color:rgb(0,128,255);*/
 	background:rgb(0,128,255);
 }
-.supercategory-kitchen:before{
-	color:rgb(250,133,0);
+.supercategory-sports li{
 }
-.supercategory-kitchen li{
+.supercategory-kitchen:before{
+	/*color:rgb(250,133,0);*/
 	background:rgb(250,133,0);
 }
-.supercategory-furniture:before{
-	color:rgb(187,0,250);
+.supercategory-kitchen li{
 }
-.supercategory-furniture li{
+.supercategory-furniture:before{
+	/*color:rgb(187,0,250);*/
 	background:rgb(187,0,250);
 }
-.supercategory-food:before{
-	color:rgb(0,250,133);
+.supercategory-furniture li{
 }
-.supercategory-food li{
+.supercategory-food:before{
+	/*color:rgb(0,250,133);*/
 	background:rgb(0,250,133);
 }
-.supercategory-electronic:before{
-	color:rgb(250,217,0);
+.supercategory-food li{
 }
-.supercategory-electronic li{
+.supercategory-electronic:before{
+	/*color:rgb(250,217,0);*/
 	background:rgb(250,217,0);
 }
-.supercategory-appliance:before{
-	color:rgb(255,0,128);
+.supercategory-electronic li{
 }
-.supercategory-appliance li{
+.supercategory-appliance:before{
+	/*color:rgb(255,0,128);*/
 	background:rgb(255,0,128);
 }
-.supercategory-indoor:before{
-	color:rgb(133,0,250);
+.supercategory-appliance li{
 }
-.supercategory-indoor li{
+.supercategory-indoor:before{
+	/*color:rgb(133,0,250);*/
 	background:rgb(133,0,250);
 }
+.supercategory-indoor li{
+}
 
-#save{margin: 5px;}
+
+#save{
+	margin: 5px;
+}
 
 #saved{
 	text-align: center;
@@ -223,8 +233,16 @@ body.hideLabels svg text{
 	width: 30vw;
 	height: 20vw;
 	margin: 10px;
+	border:solid 1px yellow;
+}
+
+body.hideBg #saved svg{
 	border:solid 1px white;
 }
+body.hideBg #saved svg{
+	background-image: none !important;
+	background-color:black;
+}
 
 
 #saved svg.scene1{
@@ -251,11 +269,37 @@ a:hover{
 	text-decoration: underline;
 }
 
-#godraw a,#saved a{
+select{
+	padding: 5px;
+	color:white;
+	background:black;
+	border:none;
+	white-space: nowrap;
+
+	font-family: "space_grotesk";
+	font-feature-settings: "salt";
+	font-size:16px;
+}
+
+button, input[type='submit'],#godraw a,#saved a{
     -webkit-appearance: button;
     -moz-appearance: button;
     appearance: button;
 
     text-decoration: none;
-    color: initial;
+    /*color: initial;*/
+
+	padding: 10px;
+	color:white;
+	background:black;
+	border:none;
+	white-space: nowrap;
+
+	font-family: "space_grotesk";
+	font-feature-settings: "salt";
+	font-size:16px;
+}
+
+input:checked + span{
+	color:red;
 }
\ No newline at end of file
diff --git a/www/index.html b/www/index.html
index 9621498..b7d25d9 100644
--- a/www/index.html
+++ b/www/index.html
@@ -51,9 +51,9 @@
 	<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'> images</label>
-<label id='labelcheck'><input type='checkbox' id='loadLabels'> labels</label>
-<label id='savewrap'><input type='submit' id='save' disabled='disabled' value='save'></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>
 
diff --git a/www/saved.html b/www/saved.html
index cb08634..e1b9f33 100644
--- a/www/saved.html
+++ b/www/saved.html
@@ -7,7 +7,7 @@
 
 	<link rel="stylesheet" type="text/css" href="coco.css">
 </head>
-<body class='hideImages'>
+<body class='hideImages saved'>
 
 <nav id='publication'>
   <a href="/a/introduction.html">
@@ -31,9 +31,10 @@
 </nav>
 
 <div class='buttons buttons-inline'>
-<label id='convert'><input type='checkbox' id='loadImages'> images</label>
-<label id='labelcheck'><input type='checkbox' id='loadLabels'> labels</label>
-<label id='godraw'><a href='/a/coco'>Draw your own!</a></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='bgcheck'><input type='checkbox' id='loadBg' checked> <span>scenes</span></label>
+<label id='godraw'><a href='/a/coco/'>Draw your own!</a></label>
 </div>
 	<div id='saved'>
 	{images}
@@ -41,6 +42,7 @@
 <script type="text/javascript">
 	let loadImagesEl = document.getElementById('loadImages');
 	let loadLabelsEl = document.getElementById('loadLabels');
+	let loadBgsEl  = document.getElementById('loadBg');
 
 	let setImageClass = function() {
 		if(loadImagesEl.checked) {
@@ -56,11 +58,20 @@
 			document.body.classList.add('hideLabels');
 		}
 	}
+	let setBgClass = function() {
+		if(loadBgsEl.checked) {
+			document.body.classList.remove('hideBg');
+		} else {
+			document.body.classList.add('hideBg');
+		}
+	}
 
 	loadImagesEl.addEventListener('change', (e) => setImageClass());
 	loadLabelsEl.addEventListener('change', (e) => setLabelClass());
+	loadBgsEl.addEventListener('change', (e) => setBgClass());
 	setImageClass();
 	setLabelClass();
+	setBgClass();
 </script>
 </body>
 </html>
\ No newline at end of file