midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Hide controls when needed

Browse source
This commit is contained in:
pietervdvn 2021-02-21 03:51:29 +01:00
parent 604d7863fe
commit 0e5b69f6cf
8 changed files with 671 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
InitUiElements.ts
View file

@ -236,7 +236,8 @@ export class InitUiElements {
});
// ?-Button on Desktop, opens panel with close-X.
const help = Svg.help_svg().SetClass("open-welcome-button block");
const help = new MapControlButton(Svg.help_svg());
// .SetClass("open-welcome-button block");
const checkbox = new CheckBox(
fullOptions
.SetClass("welcomeMessage")
@ -295,7 +296,7 @@ export class InitUiElements {
).SetClass("p-0.5 md:hidden")
new Combine([copyrightButton, checkbox])
.AttachTo("layer-selection");
.AttachTo("bottom-left");
State.state.locationControl

2
UI/Base/ScrollableFullScreen.ts
View file

@ -43,7 +43,7 @@ export default class ScrollableFullScreen extends UIElement {
.SetClass("block p-2 md:pt-4 w-full h-full overflow-y-auto md:max-h-65vh"),
// We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
]).SetClass("flex flex-col h-full relative bg-white")
]).SetClass("fixed top-0 left-0 right-0 h-screen w-screen md:max-h-65vh md:w-auto md:relative");
]).SetClass("fixed top-0 left-0 right-0 h-screen w-screen md:max-h-65vh md:w-auto md:relative z-above-controls");
this.dumbMode = false;
}

2
UI/BigComponents/Basemap.ts
View file

@ -18,6 +18,8 @@ export class Basemap {
center: [location.data.lat ?? 0, location.data.lon ?? 0],
zoom: location.data.zoom ?? 2,
layers: [currentLayer.data.layer],
zoomControl: false
});
L.control.scale(

272
assets/svg/min.svg Normal file
View file

@ -0,0 +1,272 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="98"
height="98"
viewBox="0 0 98 98"
version="1.1"
id="svg132"
sodipodi:docname="min.svg"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
style="fill:none">
<metadata
id="metadata136">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="999"
id="namedview134"
showgrid="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:zoom="5.5166017"
inkscape:cx="44.241615"
inkscape:cy="51.981151"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg132">
<sodipodi:guide
position="48.580633,-10.69499"
orientation="1,0"
id="guide959"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs130">
<filter
id="filter0_d"
x="58.84"
y="52.703999"
width="25.4126"
height="17.436001"
filterUnits="userSpaceOnUse"
style="color-interpolation-filters:sRGB">
<feFlood
flood-opacity="0"
result="BackgroundImageFix"
id="feFlood52" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
id="feColorMatrix54" />
<feOffset
dy="4"
id="feOffset56" />
<feGaussianBlur
stdDeviation="2"
id="feGaussianBlur58" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
id="feColorMatrix60" />
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow"
id="feBlend62" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow"
result="shape"
id="feBlend64" />
</filter>
<filter
id="filter1_d"
x="14"
y="15"
width="38.000099"
height="38"
filterUnits="userSpaceOnUse"
style="color-interpolation-filters:sRGB">
<feFlood
flood-opacity="0"
result="BackgroundImageFix"
id="feFlood67" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
id="feColorMatrix69" />
<feOffset
dy="4"
id="feOffset71" />
<feGaussianBlur
stdDeviation="2"
id="feGaussianBlur73" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
id="feColorMatrix75" />
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow"
id="feBlend77" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow"
result="shape"
id="feBlend79" />
</filter>
<filter
id="filter2_d"
x="39.5"
y="7"
width="53"
height="53"
filterUnits="userSpaceOnUse"
style="color-interpolation-filters:sRGB">
<feFlood
flood-opacity="0"
result="BackgroundImageFix"
id="feFlood82" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
id="feColorMatrix84" />
<feOffset
dy="4"
id="feOffset86" />
<feGaussianBlur
stdDeviation="2"
id="feGaussianBlur88" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
id="feColorMatrix90" />
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow"
id="feBlend92" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow"
result="shape"
id="feBlend94" />
</filter>
<filter
id="filter3_d"
x="11"
y="54"
width="54.766701"
height="38.142899"
filterUnits="userSpaceOnUse"
style="color-interpolation-filters:sRGB">
<feFlood
flood-opacity="0"
result="BackgroundImageFix"
id="feFlood97" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
id="feColorMatrix99" />
<feOffset
dy="4"
id="feOffset101" />
<feGaussianBlur
stdDeviation="2"
id="feGaussianBlur103" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
id="feColorMatrix105" />
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow"
id="feBlend107" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow"
result="shape"
id="feBlend109" />
</filter>
<filter
id="filter4_d"
x="41"
y="64"
width="28"
height="29"
filterUnits="userSpaceOnUse"
style="color-interpolation-filters:sRGB">
<feFlood
flood-opacity="0"
result="BackgroundImageFix"
id="feFlood112" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
id="feColorMatrix114" />
<feOffset
dy="4"
id="feOffset116" />
<feGaussianBlur
stdDeviation="2"
id="feGaussianBlur118" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
id="feColorMatrix120" />
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow"
id="feBlend122" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow"
result="shape"
id="feBlend124" />
</filter>
<clipPath
id="clip0">
<rect
width="31.819799"
height="31.819799"
transform="rotate(-45,57.35965,-37.759145)"
id="rect127"
x="0"
y="0"
style="fill:#ffffff" />
</clipPath>
</defs>
<path
style="fill:none;stroke:#000000;stroke-width:23.81633949;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 85.63011,49.228524 -73.131482,6e-6 v 0"
id="path815"
inkscape:connector-curvature="0" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7.3 KiB

111
assets/svg/osm-copyright.svg Normal file
View file

@ -0,0 +1,111 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
class="osm-logo"
height="100px"
width="100px"
version="1.1"
viewBox="0 0 66 64"
id="svg10"
sodipodi:docname="osm-copyright.svg"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
<metadata
id="metadata16">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs14">
</defs>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="999"
id="namedview12"
showgrid="false"
inkscape:zoom="3.337544"
inkscape:cx="10.407816"
inkscape:cy="28.151759"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg10" />
<g
transform="translate(-0.849, -61)"
fill="#7ebc6f"
id="g8"
style="fill:#050000;fill-opacity:1">
<path
d="M0.849,61 L6.414,75.609 L0.849,90.217 L6.414,104.826 L0.849,119.435 L4.266,120.739 L22.831,102.183 L26.162,102.696 L30.205,98.652 C27.819,95.888 26.033,92.59 25.057,88.948 L26.953,87.391 C26.627,85.879 26.449,84.313 26.449,82.704 C26.449,74.67 30.734,67.611 37.136,63.696 L30.066,61 L15.457,66.565 L0.849,61 z"
id="path2"
style="fill:#050000;fill-opacity:1" />
<path
style="stroke-width:1.5151515;fill:#050000;fill-opacity:1"
d="M 72.517578 6.9960938 C 72.056972 6.9960938 71.599077 7.0139441 71.144531 7.0351562 C 70.712713 7.0563684 70.281226 7.086044 69.855469 7.1269531 C 69.511529 7.1602865 69.167519 7.2006392 68.828125 7.2460938 C 68.470549 7.2930634 68.124953 7.3436908 67.773438 7.4042969 C 67.662831 7.4239938 67.55245 7.449053 67.443359 7.46875 C 67.222147 7.5111742 67.004853 7.556108 66.785156 7.6015625 C 66.610914 7.6394413 66.432055 7.6661222 66.257812 7.7070312 C 66.050237 7.7555161 65.846248 7.8122041 65.638672 7.8652344 C 65.294732 7.9546283 64.950722 8.0532197 64.611328 8.15625 C 64.355268 8.2320076 64.100687 8.3092448 63.847656 8.3925781 C 63.591596 8.4774266 63.335062 8.5638258 63.082031 8.65625 C 63.06991 8.6607955 63.056605 8.6653764 63.042969 8.6699219 C 52.985393 12.360831 45.717495 21.770537 45.152344 32.990234 C 45.128101 33.458416 45.111328 33.926148 45.111328 34.400391 C 45.111328 34.870088 45.125071 35.334754 45.152344 35.796875 C 45.152344 35.80142 45.150829 35.806001 45.152344 35.810547 C 45.172041 36.154486 45.200166 36.496982 45.230469 36.837891 C 46.38956 50.056072 56.859943 60.526456 70.078125 61.685547 C 70.419034 61.71585 70.761529 61.748958 71.105469 61.765625 L 71.119141 61.765625 C 71.581262 61.792898 72.045928 61.804688 72.515625 61.804688 C 79.985322 61.804688 86.737027 58.837275 91.671875 54.017578 C 91.943087 53.752427 92.217472 53.490601 92.476562 53.214844 C 92.522017 53.166359 92.563482 53.118797 92.607422 53.070312 C 92.622573 53.053646 92.632848 53.034245 92.646484 53.017578 C 92.852545 52.796366 93.056937 52.572976 93.253906 52.345703 C 93.334209 52.253279 93.411446 52.160784 93.490234 52.068359 C 93.552356 51.994117 93.61366 51.919508 93.675781 51.84375 C 93.896993 51.575568 94.108191 51.304616 94.320312 51.027344 C 94.590009 50.672798 94.859813 50.301776 95.111328 49.933594 C 95.617389 49.198745 96.088151 48.439145 96.521484 47.654297 C 96.685121 47.358842 96.830907 47.061281 96.982422 46.759766 C 97.032422 46.661281 97.09214 46.567235 97.140625 46.46875 C 97.167898 46.412689 97.191477 46.354451 97.21875 46.296875 C 97.386932 45.94536 97.552486 45.591075 97.707031 45.230469 C 97.726728 45.181984 97.752225 45.133984 97.773438 45.083984 C 97.926468 44.721863 98.069152 44.349728 98.207031 43.978516 C 98.225213 43.930031 98.241584 43.882469 98.259766 43.833984 C 98.397644 43.453681 98.533523 43.075379 98.65625 42.6875 C 98.668371 42.648106 98.683191 42.609706 98.695312 42.570312 C 98.81804 42.170312 98.931049 41.763482 99.037109 41.357422 C 99.044685 41.325604 99.056877 41.295928 99.064453 41.265625 C 99.170514 40.851989 99.26759 40.433369 99.355469 40.013672 C 99.360014 39.986399 99.362642 39.960866 99.367188 39.933594 C 99.3884 39.835109 99.400225 39.732375 99.419922 39.630859 C 99.488104 39.280859 99.550923 38.93267 99.605469 38.578125 C 99.672135 38.135701 99.729936 37.693063 99.775391 37.246094 L 99.775391 37.207031 C 99.820845 36.755516 99.858132 36.295028 99.880859 35.835938 L 99.880859 35.810547 C 99.905102 35.342365 99.921875 34.874633 99.921875 34.400391 C 99.921875 19.227663 87.68879 6.9960938 72.517578 6.9960938 z M 72.226562 13.107422 C 84.287434 13.107422 94.068359 22.522446 94.068359 34.140625 C 94.068359 45.757649 84.287434 55.177734 72.226562 55.177734 C 65.21042 55.177734 58.98861 51.98128 54.988281 47.033203 L 61.824219 42.951172 L 62.814453 42.357422 C 65.139193 44.826846 68.488975 46.384766 72.224609 46.384766 C 79.245546 46.384766 84.939453 40.902996 84.939453 34.140625 C 84.939453 27.377096 79.245546 21.898438 72.224609 21.898438 C 68.488975 21.898438 65.139193 23.454051 62.814453 25.925781 L 61.824219 25.330078 L 54.988281 21.25 C 58.986215 16.300767 65.211617 13.107422 72.226562 13.107422 z "
transform="matrix(0.66,0,0,0.66,0.849,60)"
id="path4" />
<path
d="M62.936,99.809 C59.074,103.028 54.115,104.965 48.71,104.965 C47.101,104.965 45.535,104.787 44.023,104.461 L42.466,106.357 C39.007,105.43 35.855,103.781 33.179,101.574 L28.996,105.765 L29.51,108.861 L13.953,124.426 L15.457,125 L30.066,119.435 L44.675,125 L59.283,119.435 L64.849,104.826 L62.936,99.809 z"
id="path6"
style="fill:#050000;fill-opacity:1" />
</g>
<flowRoot
xml:space="preserve"
id="flowRoot823"
style="fill:#050000;fill-opacity:1;stroke:none;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;letter-spacing:0px;word-spacing:0px;"><flowRegion
id="flowRegion825"
style="fill:#050000;fill-opacity:1;"><rect
id="rect827"
width="41.952568"
height="48.02853"
x="52.118645"
y="12.288136"
style="fill:#050000;fill-opacity:1;" /></flowRegion><flowPara
id="flowPara829"></flowPara></flowRoot> <text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:26.39999962px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#050000;fill-opacity:1;stroke:none;stroke-width:0.66000003;"
x="-53.974579"
y="84.296608"
id="text833"><tspan
sodipodi:role="line"
id="tspan831"
x="-53.974579"
y="108.31731"
style="stroke-width:0.66000003;fill:#050000;fill-opacity:1;"></tspan><tspan
sodipodi:role="line"
x="-53.974579"
y="141.31731"
style="stroke-width:0.66000003;fill:#050000;fill-opacity:1;"
id="tspan835"> </tspan><tspan
sodipodi:role="line"
x="-53.974579"
y="174.31731"
style="stroke-width:0.66000003;fill:#050000;fill-opacity:1;"
id="tspan837"> </tspan><tspan
sodipodi:role="line"
x="-53.974579"
y="207.31731"
style="stroke-width:0.66000003;fill:#050000;fill-opacity:1;"
id="tspan839" /></text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7.7 KiB

277
assets/svg/plus.svg Normal file
View file

@ -0,0 +1,277 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="98"
height="98"
viewBox="0 0 98 98"
version="1.1"
id="svg132"
sodipodi:docname="plus.svg"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
style="fill:none">
<metadata
id="metadata136">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="999"
id="namedview134"
showgrid="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:zoom="5.5166017"
inkscape:cx="44.241615"
inkscape:cy="51.981151"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg132">
<sodipodi:guide
position="48.580633,-10.69499"
orientation="1,0"
id="guide959"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs130">
<filter
id="filter0_d"
x="58.84"
y="52.703999"
width="25.4126"
height="17.436001"
filterUnits="userSpaceOnUse"
style="color-interpolation-filters:sRGB">
<feFlood
flood-opacity="0"
result="BackgroundImageFix"
id="feFlood52" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
id="feColorMatrix54" />
<feOffset
dy="4"
id="feOffset56" />
<feGaussianBlur
stdDeviation="2"
id="feGaussianBlur58" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
id="feColorMatrix60" />
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow"
id="feBlend62" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow"
result="shape"
id="feBlend64" />
</filter>
<filter
id="filter1_d"
x="14"
y="15"
width="38.000099"
height="38"
filterUnits="userSpaceOnUse"
style="color-interpolation-filters:sRGB">
<feFlood
flood-opacity="0"
result="BackgroundImageFix"
id="feFlood67" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
id="feColorMatrix69" />
<feOffset
dy="4"
id="feOffset71" />
<feGaussianBlur
stdDeviation="2"
id="feGaussianBlur73" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
id="feColorMatrix75" />
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow"
id="feBlend77" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow"
result="shape"
id="feBlend79" />
</filter>
<filter
id="filter2_d"
x="39.5"
y="7"
width="53"
height="53"
filterUnits="userSpaceOnUse"
style="color-interpolation-filters:sRGB">
<feFlood
flood-opacity="0"
result="BackgroundImageFix"
id="feFlood82" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
id="feColorMatrix84" />
<feOffset
dy="4"
id="feOffset86" />
<feGaussianBlur
stdDeviation="2"
id="feGaussianBlur88" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
id="feColorMatrix90" />
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow"
id="feBlend92" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow"
result="shape"
id="feBlend94" />
</filter>
<filter
id="filter3_d"
x="11"
y="54"
width="54.766701"
height="38.142899"
filterUnits="userSpaceOnUse"
style="color-interpolation-filters:sRGB">
<feFlood
flood-opacity="0"
result="BackgroundImageFix"
id="feFlood97" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
id="feColorMatrix99" />
<feOffset
dy="4"
id="feOffset101" />
<feGaussianBlur
stdDeviation="2"
id="feGaussianBlur103" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
id="feColorMatrix105" />
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow"
id="feBlend107" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow"
result="shape"
id="feBlend109" />
</filter>
<filter
id="filter4_d"
x="41"
y="64"
width="28"
height="29"
filterUnits="userSpaceOnUse"
style="color-interpolation-filters:sRGB">
<feFlood
flood-opacity="0"
result="BackgroundImageFix"
id="feFlood112" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
id="feColorMatrix114" />
<feOffset
dy="4"
id="feOffset116" />
<feGaussianBlur
stdDeviation="2"
id="feGaussianBlur118" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
id="feColorMatrix120" />
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow"
id="feBlend122" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow"
result="shape"
id="feBlend124" />
</filter>
<clipPath
id="clip0">
<rect
width="31.819799"
height="31.819799"
transform="rotate(-45,57.35965,-37.759145)"
id="rect127"
x="0"
y="0"
style="fill:#ffffff" />
</clipPath>
</defs>
<path
style="fill:none;stroke:#000000;stroke-width:23.81633949;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 85.267568,49.047253 -73.131482,6e-6 v 0"
id="path815"
inkscape:connector-curvature="0" />
<path
style="fill:none;stroke:#000000;stroke-width:23.81633949;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 48.580653,12.250061 -1.5e-5,73.131491 v 0"
id="path815-3"
inkscape:connector-curvature="0" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7.6 KiB

51
index.css
View file

@ -16,6 +16,10 @@
z-index: 10000
}
.z-above-controls{
z-index: 10001
}
}
.btn {
@ -347,38 +351,6 @@ a {
color: var(--foreground-color);
}
.close-welcome-button {
position: absolute;
display: inline-block;
height: 100%;
background-color: var(--subtle-detail-color);
color: var(--subtle-detail-color-contrast);
box-sizing: border-box;
width: 4em;
padding: 1em;
border-top-left-radius: 1em;
border-bottom-left-radius: 1em;
}
.close-welcome-button svg {
width: 2em;
height: 2em;
}
.open-welcome-button {
box-sizing: border-box;
background: var(--subtle-detail-color);
color: var(--foreground-color);
height: 3.5em;
width: 3.5em;
padding: 0.75em;
}
.open-welcome-button svg {
width: 2em;
height: 2em;
}
#messagesbox {
/*Only shown on big screens*/
@ -438,21 +410,6 @@ a {
}
.iframe-escape {
background-color: var(--background-color);
color: var(--foreground-color);
border-radius: 2em;
display: block;
width: min-content;
}
.iframe-escape img {
padding: 1em;
width: 2em;
height: 2em;
}
/** Switch layout **/
.small-image img {
height: 1em;

2
index.html
View file

@ -55,7 +55,7 @@
<div id="messagesbox" class="rounded-3xl overflow-hidden ml-3"></div>
</div>
<div id="layer-selection" class="absolute bottom-3 left-3 rounded-3xl clutter z-above-map"></div>
<div id="bottom-left" class="absolute bottom-3 left-3 rounded-3xl clutter z-above-map"></div>
<div id="bottom-right" class="absolute bottom-3 right-2 rounded-3xl clutter z-above-map"></div>
<div id="centermessage" class="clutter absolute rounded-3xl h-24 left-24 right-24 top-56 bg-white p-3 pt-5 sm:pt-8 text-xl font-bold text-center">