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; } .elevation-basement { fill: lightgray; display: none; } .elevation-0 use[href="#hex"] { /* fill: green; */ } .elevation-1, .elevation-2 { display: inline; } .elevation-1 use[href="#hex"] { fill: lightblue; } .elevation-2 use[href="#hex"] { fill: lightpink; } .building .elevation-1 { fill: lightblue; } .elevation-roof { display: none; } .building .elevation-basement use { fill: lightgray; } .building .elevation-0 use { fill: white; } .building .elevation-1 use { fill: lightblue; } .building .elevation-2 use { fill: lightgreen; } .building .elevation-3 use { fill: lightpink; } .view-elevation-roof .floor { fill: darkgray; } .building .elevation-1 { display: none; } .building > * { display: none; } [data-view-elevation="-1"] [class^="elevation"] { display: 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; } .building [class*="elevation"] use { /* fill-opacity: 0.33; */ stroke: black; } #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; }