Web Dev Solutions

Catalin Mititiuc

polygon { fill: inherit; stroke: inherit; stroke-width: 0.25px; } svg { border: 1px solid slategray; fill: none; } text { font-size: 4px; text-anchor: middle; user-select: none; font-family: sans-serif; fill: black; /* display: none; */ } use[href="#hex"] { stroke: #666; /* fill: wheat; */ /* fill: navajowhite; */ /* fill: url(#asterisk); */ } .building .doors { display: inline; fill: none; fill-opacity: 1; stroke: white; stroke-width: 2.25px; stroke-linecap: square; stroke-dasharray: none; stroke-opacity: 1; } .building .door-edges, .building .windows { display: inline; stroke: #ff9900; stroke-width: 2.5px; } .building .floor, .terrain .floor { display: inline; opacity: 1; fill: #ffffff; /* fill-opacity: 0.5; */ /* fill: url(#asterisk); */ stroke: none; } .building .inner-wall { display: inline; fill: none; stroke: #ffffff; stroke-width: 1; stroke-linecap: square; } .building .outer-wall { display: inline; fill: none; stroke: #000000; stroke-width: 2; stroke-linecap: square; } .building [class*="elevation"] { display: none; } [data-view-elevation="-1"] [class*="elevation"] { display: none; } [data-view-elevation="-1"] #background { fill: #333; } [data-view-elevation="-1"] .building .elevation-basement { display: inline; } [data-view-elevation="0"] .building .elevation-0 { display: inline; } [data-view-elevation="1"] .building .elevation-1 { display: inline; } [data-view-elevation="2"] .building .elevation-2, [data-view-elevation="2"] .building .elevation-1:last-child { display: inline; } [data-view-elevation="3"] .building .elevation-3, [data-view-elevation="3"] .building .elevation-1:last-child, [data-view-elevation="3"] .building .elevation-2:last-child { display: inline; } #dots { pointer-events: none; } /* [data-view-elevation="-1"] .building > *, [data-view-elevation="-1"] .building > .structure > * { display: none; } */ /* [data-view-elevation="-1"] .building > .elevation-basement, [data-view-elevation="-1"] .building > .elevation-basement ~ .structure, [data-view-elevation="-1"] .building > .elevation-basement ~ .structure [class*="wall"], [data-view-elevation="-1"] .building > .elevation-basement ~ .structure .floor, [data-view-elevation="-1"] .building > .elevation-basement ~ .structure .doors:not(.exits), [data-view-elevation="-1"] .building > .elevation-basement ~ .structure .door-edges:not(.exits), [data-view-elevation="-1"] .building > .elevation-basement ~ .structure .furniture { display: inline; } */ /* [data-view-elevation="0"] .building .elevation-0, [data-view-elevation="0"] .building .elevation-0 ~ .structure { display: inline; } [data-view-elevation="1"] .building .elevation-1, [data-view-elevation="1"] .building .elevation-1 ~ .structure { display: inline; } [data-view-elevation="1"] .building .elevation-1 + .structure [class*='wall'], [data-view-elevation="1"] .building .elevation-1 + .structure .doors, [data-view-elevation="1"] .building .elevation-1 + .structure .door-edges, [data-view-elevation="1"] .building .elevation-1 + .structure .windows, [data-view-elevation="1"] .building .elevation-1 + .structure .furniture, [data-view-elevation="1"] .building .elevation-1 ~ .structure .exits { display: none; } [data-view-elevation="1"] .building .elevation-1 + .structure .floor { fill: gray; } [data-view-elevation="2"] .building .elevation-2, [data-view-elevation="2"] .building .elevation-2 ~ .structure { display: inline; } [data-view-elevation="2"] .building .elevation-2 + .structure [class*='wall'], [data-view-elevation="2"] .building .elevation-2 + .structure .doors, [data-view-elevation="2"] .building .elevation-2 + .structure .door-edges, [data-view-elevation="2"] .building .elevation-2 + .structure .windows, [data-view-elevation="2"] .building .elevation-2 + .structure .furniture, [data-view-elevation="2"] .building .elevation-2 ~ .structure .exits { display: none; } [data-view-elevation="2"] .building .elevation-2 + .structure .floor { fill: gray; } [data-view-elevation="3"] .building .elevation-3, [data-view-elevation="3"] .building .elevation-3 ~ .structure { display: inline; } [data-view-elevation="3"] .building .elevation-3 + .structure [class*='wall'], [data-view-elevation="3"] .building .elevation-3 + .structure .doors, [data-view-elevation="3"] .building .elevation-3 + .structure .door-edges, [data-view-elevation="3"] .building .elevation-3 + .structure .windows, [data-view-elevation="3"] .building .elevation-3 + .structure .furniture, [data-view-elevation="3"] .building .elevation-3 ~ .structure .exits { display: none; } [data-view-elevation="3"] .building .elevation-3 + .structure .floor { fill: gray; } [data-view-elevation="0"] .elevation-0 { display: inline; } [data-view-elevation="1"] > .elevation-0, [data-view-elevation="1"] > .elevation-1 { display: inline; } [data-view-elevation="1"] .building .elevation-1 { display: inline; } */ #tree .trunk { fill: brown; } #tree .branches { fill: rgb(141, 202, 141); stroke: green; } #bush { fill: rgb(141, 202, 141); stroke: green; stroke-width: 0.5px; transform: scale(0.9); } [class^="part"] use { fill-opacity: 0.75; } .part-1 use { fill: lightseagreen; } .part-2 use { fill: lightyellow; } .part-3 use { fill: lightblue; } .part-4 use { fill: lightsteelblue; } .part-5 use { fill: lightsalmon; } .part-6 use { fill: lightgreen; }