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 @@ - - - + + + 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 @@ -
+