body{ background-color: darkblue; margin:0; background-size:cover; background-position: center center; font-size:12.8px; } body.drawspace{ overflow: hidden; } #svgCanvas{ width:100%; height:100vh; /*position: fixed; top:0; left:0; bottom:0; right:0;*/ z-index: -1; } .catNav{ position:absolute; top:0; bottom:0; color:white; padding: 90px 10px 10px 10px; overflow-y: auto; overflow-x: hidden; } #catNav { left:calc(7vh + 10px); direction: rtl; } #catNav ul{ direction: ltr; margin-left:10px; } #catNav2 { right:0; } #catNav2 ul{ margin-right:10px; } .catNav ul{ list-style:none; padding:0px; margin: 70px 0px 10px 0; border-width: 3px; width:145px; /*box-shadow: white 0 0 20px;*/ position:relative; font-size: 12.8px; } .catNav ul:first-child{ margin-top:0; } .catNav ul:before{ content: attr(data-name); position:absolute; bottom: 100%; transform:rotate(-30deg); transform-origin: top left; font-weight:bold; padding: 2px 10px; margin-left: -4px; border-radius: 2px; margin-bottom: 1em; } #catNav2 ul:before{ transform:rotate(30deg); transform-origin:top right; right:0; bottom: 100%; margin-right: -4px; margin-left: 0px; } /*#catNav ul { border-left-style: solid; } #catNav2 ul { border-right-style: solid; }*/ .catNav li{ padding: 2px; /*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; } g{ cursor:grab; } g:active{ cursor:grabbing; } svg text{ fill:white; font-size: 16pt; -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: 20px; text-align:center; width: 600px; left: calc(50% - 300px); } .buttons.buttons-inline{ position:static; margin: 10px; width:100%; } .buttons #buttons-top{ display: block; } .buttons span, .buttons label:not(#scenelabel){ /*color:white;*/ cursor:pointer; } .buttons #convert{ margin-right:15px; } .buttons span:hover{ text-decoration:underline; } .buttons #sceneLabel{ display:block; } body{ color:white; } body.saved{ background:yellow; color:black; margin-left: 7vh; } body.saved label{ } body.hideImages svg image{ display:none; } body.hideLabels svg text{ display:none; } .supercategory-person:before{ /* background:rgb(250,8,0); */ background: black; } .supercategory-person li{ } .supercategory-vehicle:before{ /* background:rgb(128,255,0); */ background: black; } .supercategory-vehicle li{ } .supercategory-outdoor:before{ /* background:rgb(0,255,255); */ background: black; } .supercategory-outdoor li{ } .supercategory-animal:before{ /* background:rgb(255,0,255); */ background: black; } .supercategory-animal li{ } .supercategory-accessory:before{ /* background:rgb(255,255,0); */ background: black; } .supercategory-accessory li{ } .supercategory-sports:before{ /* background:rgb(0,128,255); */ background: black; } .supercategory-sports li{ } .supercategory-kitchen:before{ /* background:rgb(250,133,0); */ background: black; } .supercategory-kitchen li{ } .supercategory-furniture:before{ /* background:rgb(187,0,250); */ background: black; } .supercategory-furniture li{ } .supercategory-food:before{ /* background:rgb(0,250,133); */ background: black; } .supercategory-food li{ } .supercategory-electronic:before{ /* background:rgb(250,217,0); */ background: black; } .supercategory-electronic li{ } .supercategory-appliance:before{ /* background:rgb(255,0,128); */ background: black; } .supercategory-appliance li{ } .supercategory-indoor:before{ /* background:rgb(133,0,250); */ background: black; } .supercategory-indoor li{ } #save{ margin: 5px; } #saved{ text-align: center; } #saved svg{ 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{ background-image:url('drone_simple.svg'); background-size: cover; background-origin: center center; } #saved svg.scene2{ background-image:url('car_simple.svg'); background-size: cover; background-origin: center center; } #saved svg.scene3{ background-image:url('room_simple.svg'); background-size: cover; background-origin: center center; } a, a:link, a:visited{ color:white; text-decoration:none; } a:hover{ text-decoration: underline; } select{ padding: 2px; color:white; background:black; border:none; white-space: nowrap; font-family: "space_grotesk"; font-feature-settings: "salt"; font-size: 12.8px; cursor: pointer; } option{ font-family: sans-serif; line-height: 1.4; } button, input[type='submit'],#godraw a,#saved a{ cursor: pointer; -webkit-appearance: button; -moz-appearance: button; appearance: button; text-decoration: none; /*color: initial;*/ padding: 4px 7px; color:white; background:black; border:none; white-space: nowrap; font-family: "space_grotesk"; font-feature-settings: "salt"; font-size: 12.8px; border-radius: 2px; } /*input:checked + span{ color:red; }*/