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.25; stroke-linecap: square; stroke-dasharray: none; stroke-opacity: 1; } .building .door-edges, .building .windows { stroke: #ff9900; stroke-width: 2.25; } .building .floor, .terrain .floor { opacity: 1; fill: #ffffff; fill-opacity: 0.5; stroke: none; } .building .inner-wall { fill: none; stroke: #ffffff; stroke-width: 1; stroke-linecap: square; } .building .outer-wall { fill: none; stroke: #000000; stroke-width: 2; stroke-linecap: square; } .view-elevation-roof .doors, .view-elevation-roof .inner-wall, .view-elevation-roof .outer-wall { display: none; } /* [class^="elevation"] { display: none; } [class="elevation-0"] { display: inline; } */ .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) { 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'] { 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'] { 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'] { 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; } .view-elevation-0 .elevation-0 { display: inline; } .view-elevation-1 .elevation-0 { display: inline; } .view-elevation-1 .elevation-1 { display: inline; } .view-elevation-1 .building .elevation-0 { display: none; } .view-elevation-1 .building .elevation-1 { /* display: none; */ } .view-elevation-roof .elevation-roof { display: inline; } .view-elevation-basement [class^="elevation"] { display: none; } .view-elevation-basement .elevation-basement { display: inline; } .view-elevation-basement .doors { display: none; } .building [class*="elevation"] use { /* fill-opacity: 0.33; */ stroke: black; } .building { /* display: none; */ /* opacity: 0.2 */ } #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); } .select-elevation { position: fixed; right: 0; top: 50%; margin-right: 10px; background-color: #FFFFFF99; border: 1px solid gray; padding: 2px; font-family: sans-serif; font-size: 10pt; } .select-elevation label { display: block; margin: 2px 0; text-align: center; border: 1px solid transparent; user-select: none; } .select-elevation input { display: none; } input:checked+label { border: 1px solid salmon; border-radius: 3px; background-color: #cdd9e9; } [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; } .furniture { fill: violet; }