Browse Source

Styling

master
Ruben van de Ven 2 years ago
parent
commit
4662a8f167
  1. 140
      www/coco.css
  2. 6
      www/index.html
  3. 19
      www/saved.html

140
www/coco.css

@ -19,9 +19,7 @@ body{ @@ -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{ @@ -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{ @@ -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{ @@ -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{ @@ -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{ @@ -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{ @@ -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{ @@ -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{ @@ -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{ @@ -142,79 +149,82 @@ body.hideLabels svg text{
}
.supercategory-person:before{
color:rgb(250,8,0);
/*color:rgb(250,8,0);*/
background:rgb(250,8,0);
}
.supercategory-person li{
background:rgb(250,8,0);
}
.supercategory-vehicle:before{
color:rgb(128,255,0);
/*color:rgb(128,255,0);*/
background:rgb(128,255,0);
}
.supercategory-vehicle li{
background:rgb(128,255,0);
}
.supercategory-outdoor:before{
color:rgb(0,255,255);
/*color:rgb(0,255,255);*/
background:rgb(0,255,255);
}
.supercategory-outdoor li{
background:rgb(0,255,255);
}
.supercategory-animal:before{
color:rgb(255,0,255);
/*color:rgb(255,0,255);*/
background:rgb(255,0,255);
}
.supercategory-animal li{
background:rgb(255,0,255);
}
.supercategory-accessory:before{
color:rgb(255,255,0);
/*color:rgb(255,255,0);*/
background:rgb(255,255,0);
}
.supercategory-accessory li{
background:rgb(255,255,0);
}
.supercategory-sports:before{
color:rgb(0,128,255);
/*color:rgb(0,128,255);*/
background:rgb(0,128,255);
}
.supercategory-sports li{
background:rgb(0,128,255);
}
.supercategory-kitchen:before{
color:rgb(250,133,0);
/*color:rgb(250,133,0);*/
background:rgb(250,133,0);
}
.supercategory-kitchen li{
background:rgb(250,133,0);
}
.supercategory-furniture:before{
color:rgb(187,0,250);
/*color:rgb(187,0,250);*/
background:rgb(187,0,250);
}
.supercategory-furniture li{
background:rgb(187,0,250);
}
.supercategory-food:before{
color:rgb(0,250,133);
/*color:rgb(0,250,133);*/
background:rgb(0,250,133);
}
.supercategory-food li{
background:rgb(0,250,133);
}
.supercategory-electronic:before{
color:rgb(250,217,0);
/*color:rgb(250,217,0);*/
background:rgb(250,217,0);
}
.supercategory-electronic li{
background:rgb(250,217,0);
}
.supercategory-appliance:before{
color:rgb(255,0,128);
/*color:rgb(255,0,128);*/
background:rgb(255,0,128);
}
.supercategory-appliance li{
background:rgb(255,0,128);
}
.supercategory-indoor:before{
color:rgb(133,0,250);
/*color:rgb(133,0,250);*/
background:rgb(133,0,250);
}
.supercategory-indoor li{
background:rgb(133,0,250);
}
#save{margin: 5px;}
#save{
margin: 5px;
}
#saved{
text-align: center;
@ -223,8 +233,16 @@ body.hideLabels svg text{ @@ -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{ @@ -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;
}

6
www/index.html

@ -51,9 +51,9 @@ @@ -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>

19
www/saved.html

@ -7,7 +7,7 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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>
Loading…
Cancel
Save