Styling
This commit is contained in:
Ruben van de Ven
parent
125a09b87e
commit
4662a8f167
3 changed files with 122 additions and 67 deletions
164
www/coco.css
164
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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in a new issue