plottingdata/coco
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Styling

Browse source
This commit is contained in:
Ruben van de Ven 2020-03-10 15:07:29 +01:00
parent 125a09b87e
commit 4662a8f167
3 changed files with 122 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

164
www/coco.css
View file

@ -19,9 +19,7 @@ body{
position:absolute; position:absolute;
top:0; top:0;
color:white; color:white;
/*bottom:0;*/ padding: 80px 10px 10px 10px;
/*overflow-y: auto;*/
padding: 10px;
} }
#catNav { #catNav {
left:calc(7vh + 10px); left:calc(7vh + 10px);
@ -33,16 +31,12 @@ body{
.catNav ul{ .catNav ul{
list-style:none; list-style:none;
padding:0px; padding:0px;
margin: 30px 0px; margin: 60px 0px;
border-width: 3px; border-width: 3px;
width:145px; width:145px;
overflow-x:hidden; /*box-shadow: white 0 0 20px;*/
/*Due to rotation the overlfow hidden does anoying things*/
padding-top:93px;
margin-bottom:-85px;
box-shadow: white 0 0 20px;
position:relative; position:relative;
font-size: 12px; font-size: 16px;
} }
.catNav ul:first-child{ .catNav ul:first-child{
margin-top:0; margin-top:0;
@ -50,16 +44,20 @@ body{
.catNav ul:before{ .catNav ul:before{
content: attr(data-name); content: attr(data-name);
position:absolute; position:absolute;
top: 68px; bottom: 100%;
transform:rotate(-30deg); transform:rotate(-30deg);
transform-origin: top left; transform-origin: top left;
font-weight:bold; font-weight:bold;
padding: 2px 10px;
margin-left: -4px;
} }
#catNav2 ul:before{ #catNav2 ul:before{
transform:rotate(30deg); transform:rotate(30deg);
transform-origin:top right; transform-origin:top right;
right:0; right:0;
top: 66px; bottom: 100%;
margin-right: -4px;
margin-left: 0px;
} }
/*#catNav ul { /*#catNav ul {
border-left-style: solid; border-left-style: solid;
@ -69,9 +67,8 @@ body{
}*/ }*/
.catNav li{ .catNav li{
padding: 2px 2px 2px 25px; padding: 2px;
width:160px; /*margin-left:-12px;*/
margin-left:-12px;
text-shadow: black 0 0 2px; text-shadow: black 0 0 2px;
} }
.catNav li:hover{ .catNav li:hover{
@ -86,9 +83,7 @@ body{
transform: rotate(30deg); transform: rotate(30deg);
text-align:right; text-align:right;
transform-origin: top right; transform-origin: top right;
padding-right: 25px;
padding-left: 2px;
margin-left:-25px;
} }
g{ g{
@ -101,7 +96,7 @@ g:active{
svg text{ svg text{
fill:white; fill:white;
font-size: 40pt; font-size: 25pt;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -115,8 +110,9 @@ svg text{
position:absolute; position:absolute;
top: 10px; top: 10px;
text-align:center; text-align:center;
width: 300px; width: 400px;
left: calc(50% - 150px); left: calc(50% - 150px);
} }
.buttons.buttons-inline{ .buttons.buttons-inline{
position:static; position:static;
@ -124,7 +120,7 @@ svg text{
width:100%; width:100%;
} }
.buttons span, .buttons label{ .buttons span, .buttons label{
color:white; /*color:white;*/
cursor:pointer; cursor:pointer;
} }
.buttons span:hover{ .buttons span:hover{
@ -134,6 +130,17 @@ svg text{
display:block; display:block;
} }
body{
color:white;
}
body.saved{
background:yellow;
color:black;
}
body.saved label{
}
body.hideImages svg image{ body.hideImages svg image{
display:none; display:none;
} }
@ -142,79 +149,82 @@ body.hideLabels svg text{
} }
.supercategory-person:before{ .supercategory-person:before{
color:rgb(250,8,0); /*color:rgb(250,8,0);*/
}
.supercategory-person li{
background:rgb(250,8,0); background:rgb(250,8,0);
} }
.supercategory-vehicle:before{ .supercategory-person li{
color:rgb(128,255,0);
} }
.supercategory-vehicle li{ .supercategory-vehicle:before{
/*color:rgb(128,255,0);*/
background:rgb(128,255,0); background:rgb(128,255,0);
} }
.supercategory-outdoor:before{ .supercategory-vehicle li{
color:rgb(0,255,255);
} }
.supercategory-outdoor li{ .supercategory-outdoor:before{
/*color:rgb(0,255,255);*/
background:rgb(0,255,255); background:rgb(0,255,255);
} }
.supercategory-animal:before{ .supercategory-outdoor li{
color:rgb(255,0,255);
} }
.supercategory-animal li{ .supercategory-animal:before{
/*color:rgb(255,0,255);*/
background:rgb(255,0,255); background:rgb(255,0,255);
} }
.supercategory-accessory:before{ .supercategory-animal li{
color:rgb(255,255,0);
} }
.supercategory-accessory li{ .supercategory-accessory:before{
/*color:rgb(255,255,0);*/
background:rgb(255,255,0); background:rgb(255,255,0);
} }
.supercategory-sports:before{ .supercategory-accessory li{
color:rgb(0,128,255);
} }
.supercategory-sports li{ .supercategory-sports:before{
/*color:rgb(0,128,255);*/
background:rgb(0,128,255); background:rgb(0,128,255);
} }
.supercategory-kitchen:before{ .supercategory-sports li{
color:rgb(250,133,0);
} }
.supercategory-kitchen li{ .supercategory-kitchen:before{
/*color:rgb(250,133,0);*/
background:rgb(250,133,0); background:rgb(250,133,0);
} }
.supercategory-furniture:before{ .supercategory-kitchen li{
color:rgb(187,0,250);
} }
.supercategory-furniture li{ .supercategory-furniture:before{
/*color:rgb(187,0,250);*/
background:rgb(187,0,250); background:rgb(187,0,250);
} }
.supercategory-food:before{ .supercategory-furniture li{
color:rgb(0,250,133);
} }
.supercategory-food li{ .supercategory-food:before{
/*color:rgb(0,250,133);*/
background:rgb(0,250,133); background:rgb(0,250,133);
} }
.supercategory-electronic:before{ .supercategory-food li{
color:rgb(250,217,0);
} }
.supercategory-electronic li{ .supercategory-electronic:before{
/*color:rgb(250,217,0);*/
background:rgb(250,217,0); background:rgb(250,217,0);
} }
.supercategory-appliance:before{ .supercategory-electronic li{
color:rgb(255,0,128);
} }
.supercategory-appliance li{ .supercategory-appliance:before{
/*color:rgb(255,0,128);*/
background:rgb(255,0,128); background:rgb(255,0,128);
} }
.supercategory-indoor:before{ .supercategory-appliance li{
color:rgb(133,0,250);
} }
.supercategory-indoor li{ .supercategory-indoor:before{
/*color:rgb(133,0,250);*/
background:rgb(133,0,250); background:rgb(133,0,250);
} }
.supercategory-indoor li{
}
#save{margin: 5px;}
#save{
margin: 5px;
}
#saved{ #saved{
text-align: center; text-align: center;
@ -223,8 +233,16 @@ body.hideLabels svg text{
width: 30vw; width: 30vw;
height: 20vw; height: 20vw;
margin: 10px; margin: 10px;
border:solid 1px yellow;
}
body.hideBg #saved svg{
border:solid 1px white; border:solid 1px white;
} }
body.hideBg #saved svg{
background-image: none !important;
background-color:black;
}
#saved svg.scene1{ #saved svg.scene1{
@ -251,11 +269,37 @@ a:hover{
text-decoration: underline; 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; -webkit-appearance: button;
-moz-appearance: button; -moz-appearance: button;
appearance: button; appearance: button;
text-decoration: none; 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;
} }

6
www/index.html
View file

@ -51,9 +51,9 @@
<option data-background="car_simple.svg" value="2">View from a self driving car</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> <option data-background="room_simple.svg" value="3">Product affiliation detector</option>
</select></label> </select></label>
<label id='convert'><input type='checkbox' id='loadImages'> images</label> <label id='convert'><input type='checkbox' id='loadImages'> <span>images</span></label>
<label id='labelcheck'><input type='checkbox' id='loadLabels'> labels</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='savewrap'><input type='submit' id='save' disabled='disabled' value='Save'></label>
<label id='saved'><a href='saved'>Saved drawings</a></label> <label id='saved'><a href='saved'>Saved drawings</a></label>
</div> </div>

19
www/saved.html
View file

@ -7,7 +7,7 @@
<link rel="stylesheet" type="text/css" href="coco.css"> <link rel="stylesheet" type="text/css" href="coco.css">
</head> </head>
<body class='hideImages'> <body class='hideImages saved'>
<nav id='publication'> <nav id='publication'>
<a href="/a/introduction.html"> <a href="/a/introduction.html">
@ -31,9 +31,10 @@
</nav> </nav>
<div class='buttons buttons-inline'> <div class='buttons buttons-inline'>
<label id='convert'><input type='checkbox' id='loadImages'> images</label> <label id='convert'><input type='checkbox' id='loadImages'> <span>images</span></label>
<label id='labelcheck'><input type='checkbox' id='loadLabels'> labels</label> <label id='labelcheck'><input type='checkbox' id='loadLabels'> <span>labels</span></label>
<label id='godraw'><a href='/a/coco'>Draw your own!</a></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>
<div id='saved'> <div id='saved'>
{images} {images}
@ -41,6 +42,7 @@
<script type="text/javascript"> <script type="text/javascript">
let loadImagesEl = document.getElementById('loadImages'); let loadImagesEl = document.getElementById('loadImages');
let loadLabelsEl = document.getElementById('loadLabels'); let loadLabelsEl = document.getElementById('loadLabels');
let loadBgsEl = document.getElementById('loadBg');
let setImageClass = function() { let setImageClass = function() {
if(loadImagesEl.checked) { if(loadImagesEl.checked) {
@ -56,11 +58,20 @@
document.body.classList.add('hideLabels'); 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()); loadImagesEl.addEventListener('change', (e) => setImageClass());
loadLabelsEl.addEventListener('change', (e) => setLabelClass()); loadLabelsEl.addEventListener('change', (e) => setLabelClass());
loadBgsEl.addEventListener('change', (e) => setBgClass());
setImageClass(); setImageClass();
setLabelClass(); setLabelClass();
setBgClass();
</script> </script>
</body> </body>
</html> </html>