216 lines
3.4 KiB
CSS
216 lines
3.4 KiB
CSS
body{
|
|
font-family:sans-serif;
|
|
background: darkblue;
|
|
margin:0;
|
|
}
|
|
|
|
#svgCanvas{
|
|
width:100vw;
|
|
height:100vh;
|
|
}
|
|
.catNav{
|
|
position:absolute;
|
|
top:0;
|
|
color:white;
|
|
bottom:0;
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
}
|
|
#catNav {
|
|
left: 0;
|
|
}
|
|
#catNav2 {
|
|
right:0;
|
|
}
|
|
|
|
.catNav ul{
|
|
list-style:none;
|
|
padding:0px;
|
|
margin: 30px 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;
|
|
position:relative;
|
|
}
|
|
.catNav ul:before{
|
|
content: attr(data-name);
|
|
position:absolute;
|
|
top: 68px;
|
|
transform:rotate(-30deg);
|
|
transform-origin: top left;
|
|
font-weight:bold;
|
|
}
|
|
#catNav2 ul:before{
|
|
transform:rotate(30deg);
|
|
transform-origin:top right;
|
|
right:0;
|
|
top: 66px;
|
|
}
|
|
/*#catNav ul {
|
|
border-left-style: solid;
|
|
}
|
|
#catNav2 ul {
|
|
border-right-style: solid;
|
|
}*/
|
|
|
|
.catNav li{
|
|
padding: 2px 2px 2px 25px;
|
|
width:160px;
|
|
margin-left:-12px;
|
|
text-shadow: black 0 0 2px;
|
|
}
|
|
.catNav li:hover{
|
|
cursor:pointer;
|
|
text-decoration:underline;
|
|
}
|
|
#catNav li{
|
|
transform: rotate(-30deg);
|
|
transform-origin: top left;
|
|
}
|
|
#catNav2 li{
|
|
transform: rotate(30deg);
|
|
text-align:right;
|
|
transform-origin: top right;
|
|
padding-right: 25px;
|
|
padding-left: 2px;
|
|
margin-left:-25px;
|
|
}
|
|
|
|
g{
|
|
cursor:grab;
|
|
}
|
|
|
|
g:active{
|
|
cursor:grabbing;
|
|
}
|
|
|
|
svg text{
|
|
fill:white;
|
|
font-size: 40pt;
|
|
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.buttons{
|
|
position:absolute;
|
|
top: 10px;
|
|
text-align:center;
|
|
width: 300px;
|
|
left: calc(50% - 150px);
|
|
}
|
|
.buttons.buttons-inline{
|
|
position:static;
|
|
margin: 10px;
|
|
width:100%;
|
|
}
|
|
.buttons span, .buttons label{
|
|
color:white;
|
|
cursor:pointer;
|
|
}
|
|
.buttons span:hover{
|
|
text-decoration:underline;
|
|
}
|
|
.buttons #sceneLabel{
|
|
display:block;
|
|
}
|
|
|
|
body.hideImages svg image{
|
|
display:none;
|
|
}
|
|
body.hideLabels svg text{
|
|
display:none;
|
|
}
|
|
|
|
.supercategory-person:before{
|
|
color:rgb(250,8,0);
|
|
}
|
|
.supercategory-person li{
|
|
background:rgb(250,8,0);
|
|
}
|
|
.supercategory-vehicle:before{
|
|
color:rgb(128,255,0);
|
|
}
|
|
.supercategory-vehicle li{
|
|
background:rgb(128,255,0);
|
|
}
|
|
.supercategory-outdoor:before{
|
|
color:rgb(0,255,255);
|
|
}
|
|
.supercategory-outdoor li{
|
|
background:rgb(0,255,255);
|
|
}
|
|
.supercategory-animal:before{
|
|
color:rgb(255,0,255);
|
|
}
|
|
.supercategory-animal li{
|
|
background:rgb(255,0,255);
|
|
}
|
|
.supercategory-accessory:before{
|
|
color:rgb(255,255,0);
|
|
}
|
|
.supercategory-accessory li{
|
|
background:rgb(255,255,0);
|
|
}
|
|
.supercategory-sports:before{
|
|
color:rgb(0,128,255);
|
|
}
|
|
.supercategory-sports li{
|
|
background:rgb(0,128,255);
|
|
}
|
|
.supercategory-kitchen:before{
|
|
color:rgb(250,133,0);
|
|
}
|
|
.supercategory-kitchen li{
|
|
background:rgb(250,133,0);
|
|
}
|
|
.supercategory-furniture:before{
|
|
color:rgb(187,0,250);
|
|
}
|
|
.supercategory-furniture li{
|
|
background:rgb(187,0,250);
|
|
}
|
|
.supercategory-food:before{
|
|
color:rgb(0,250,133);
|
|
}
|
|
.supercategory-food li{
|
|
background:rgb(0,250,133);
|
|
}
|
|
.supercategory-electronic:before{
|
|
color:rgb(250,217,0);
|
|
}
|
|
.supercategory-electronic li{
|
|
background:rgb(250,217,0);
|
|
}
|
|
.supercategory-appliance:before{
|
|
color:rgb(255,0,128);
|
|
}
|
|
.supercategory-appliance li{
|
|
background:rgb(255,0,128);
|
|
}
|
|
.supercategory-indoor:before{
|
|
color:rgb(133,0,250);
|
|
}
|
|
.supercategory-indoor li{
|
|
background:rgb(133,0,250);
|
|
}
|
|
|
|
#save{margin: 5px;}
|
|
|
|
#saved{
|
|
text-align: center;
|
|
}
|
|
#saved svg{
|
|
width: 30vw;
|
|
height: 20vw;
|
|
margin: 10px;
|
|
border:solid 1px white;
|
|
}
|