chore: a bit of CSS cleaning in bar.css

This commit is contained in:
Yohan Boniface 2024-11-19 13:16:02 +01:00
parent 5ceda7b2a3
commit 346597533c
10 changed files with 80 additions and 827 deletions

View file

@ -254,8 +254,8 @@ input[type="submit"] {
}
.dark .button,
.dark [type="button"] {
background-color: #2a2e30;
color: #eeeeec;
background-color: var(--color-darkerGray);
color: var(--text-color);
border: 1px solid #1b1f20;
}
.dark .button:hover,
@ -264,7 +264,7 @@ input[type="submit"] {
background-color: #2e3436;
}
.dark a {
color: #eeeeec;
color: var(--text-color);
}
button.flat,
[type="button"].flat,

View file

@ -1,17 +1,16 @@
.umap-main-edit-toolbox [type="button"] {
.umap-main-edit-toolbox [type=button] {
color: #fff;
font-size: 1.2em;
font-size: 1em;
border: none;
background-color: var(--color-darkGray);
width: auto;
margin-bottom: 0;
}
.umap-main-edit-toolbox [type="button"]:hover {
.umap-main-edit-toolbox [type=button]:hover {
text-decoration: underline;
}
.leaflet-container [type="button"].umap-help-link {
font-size: 12px;
.leaflet-container [type=button].umap-help-link {
padding-bottom: 3px;
background-color: inherit;
}
@ -22,54 +21,18 @@
{
display: block;
border: none;
font-size: 12px;
border-radius: 20px;
color: #f8f8f8;
height: 32px;
line-height: 30px;
padding: 0 20px;
}
.leaflet-container .connected-peers,
.dark [type="button"].connected-peers:hover
.dark [type=button].connected-peers:hover
{
background-color: var(--color-lightCyan);
color: var(--color-dark);
}
.leaflet-container .edit-disable:before,
.leaflet-container .edit-save:before,
.leaflet-container .edit-cancel:before,
.leaflet-container .connected-peers:before {
display: inline-block;
width: 19px;
height: 24px;
background-position: -50px -122px;
background-repeat: no-repeat;
background-image: url('../img/16-white.svg');
vertical-align: middle;
content: ' ';
text-align: center;
}
.leaflet-container .connected-peers:before {
background-image: url('../img/16.svg');
}
.leaflet-container .edit-disable span,
.leaflet-container .edit-save span,
.leaflet-container .edit-cancel span,
.leaflet-container .connected-peers span{
margin-inline-start: 10px;
}
.leaflet-container .edit-save:before {
background-position: -148px -2px;
}
.leaflet-container .edit-disable:before {
background-position: -50px -25px;
}
.leaflet-container .connected-peers:before {
background-position: -2px -95px;
}
.leaflet-container .edit-cancel,
.leaflet-container .edit-disable,
.leaflet-container .connected-peers{
@ -87,7 +50,10 @@
border: 0.5px solid rgba(153, 153, 153, 0.40);
background: rgba(153, 153, 153, 0.10);
}
.dark [type="button"].edit-save:hover {
.leaflet-container .icon-save {
display: none;
}
.dark button.edit-save:hover {
background: rgba(153, 153, 153, 0.10);
text-decoration: none;
}
@ -96,12 +62,15 @@
cursor: pointer;
border: 0.5px solid rgba(66, 236, 230, 0.40);
background: rgba(66, 236, 230, 0.10);
color: #42ECE6;
color: var(--color-brightCyan);
}
.umap-is-dirty .edit-save:before {
background-position: -148px -26px;
.umap-is-dirty .icon-save {
display: inline-block;
}
.umap-is-dirty .dark [type="button"].edit-save:hover {
.umap-is-dirty .icon-save-disabled {
display: none;
}
.umap-is-dirty .dark button.edit-save:hover {
border-color: rgba(66, 236, 230, 0.80);
background: rgba(66, 236, 230, 0.10);
}
@ -123,12 +92,13 @@
display: none;
}
.umap-main-edit-toolbox {
top: -46px;
/* Show a transition from top to bottom when opening it */
top: calc(var(--header-height) * -1);
position: absolute;
width: 100%;
left: 0;
right: 0;
height: 46px;
height: var(--header-height);
padding: 0 10px;
text-align: start;
line-height: var(--control-size);
@ -172,7 +142,6 @@
text-align: start;
}
.umap-main-edit-toolbox .share-status {
font-size: 1em;
font-style: italic;
overflow: hidden;
text-overflow: ellipsis;
@ -200,9 +169,6 @@
content: '|';
padding-inline-end: 10px;
}
.umap-main-edit-toolbox .umap-user {
color: #fff;
}
.umap-main-edit-toolbox .umap-user:hover {
text-decoration: underline;
}
@ -211,8 +177,8 @@
padding-inline-start: 20px;
display: inline-block; /* Prevents underline on hover. */
}
.umap-caption-bar-enabled .umap-caption-bar {
display: block;
.umap-caption-bar {
display: none;
height: var(--footer-height);
background-color: #fff;
width: 100%;
@ -228,6 +194,9 @@
opacity: 0.93;
z-index: var(--zindex-panels);
}
.umap-caption-bar-enabled .umap-caption-bar {
display: block;
}
.umap-caption-bar-enabled {
--current-footer-height: var(--footer-height);
}

View file

@ -8,7 +8,6 @@
background-color: initial;
}
.icon-16 {
background-image: url('../img/16.svg');
height: 24px;
line-height: 24px;
width: 24px;
@ -43,6 +42,14 @@ html[dir="rtl"] .icon {
.dark .icon-24 {
background-image: url('../img/24-white.svg');
}
.icon-16.icon-black,
.icon-16 {
background-image: url('../img/16.svg');
}
.icon-24.icon-black,
.icon-24 {
background-image: url('../img/24.svg');
}
.icon-add {
background-position: var(--tile) var(--tile);
}
@ -106,6 +113,9 @@ html[dir="rtl"] .icon {
.icon-marker {
background-position: calc(var(--tile) * 3) calc(var(--tile) * 5);
}
.icon-peers {
background-position: calc(var(--tile) * 3) calc(var(--tile) * 2);
}
.icon-polygon {
background-position: var(--tile) calc(var(--tile) * 3);
}
@ -124,6 +134,13 @@ html[dir="rtl"] .icon {
.expanded .icon-resize {
background-position: calc(var(--tile) * 2) calc(var(--tile) * 6);
}
.icon-save {
background-position: calc(var(--tile) * 6) var(--tile);
}
/* FIXME move to a 16-disabled.svg sprite ? */
.icon-save-disabled {
background-position: calc(var(--tile) * 6) 0;
}
.icon-search {
background-position: var(--tile) calc(var(--tile) * 5);
}

View file

@ -37,9 +37,6 @@
<path id="table-5" d="m54 819.36v2h12v-2zm0 3v1h4v-1zm5 0v1h7v-1zm-5 2v1h4v-1zm5 0v1h7v-1zm-5 2v1h4v-1zm5 0v1h7v-1zm-5 2v1h4v-1zm5 0v1h7v-1z" fill="#f2f2f2"/>
<path id="path3684" d="m63.714 866.36-1.1428 1.1429 2.2857 2.2857 1.1428-1.1429zm-1.7143 1.7143-6.2857 6.2857 2.2857 2.2857 6.2857-6.2857zm-6.2857 6.2857-1.7143 4 4-1.7143z" fill="#f2f2f2" stroke="#999" stroke-width=".25"/>
<text id="text4457-6" x="41.647079" y="916.79706" fill="#000000" font-family="sans-serif" letter-spacing="0px" word-spacing="0px" style="line-height:0%" xml:space="preserve"><tspan id="tspan4459-6" x="41.647079" y="916.79706" font-family="sans-serif" font-size="30.476px" style="line-height:1.25"> </tspan></text>
<g id="text4356-2" transform="translate(44 -124)" fill="#fff">
<path id="path4384-2" d="m35.742 999.44 3.0762-3.0762-3.0664-3.0664 1.1914-1.1914 3.0664 3.0664 3.0566-3.0566 1.1719 1.1816-3.0469 3.0566 3.0664 3.0664-1.1914 1.1914-3.0664-3.0664-3.0762 3.0762-1.1816-1.1816" fill="#f2f2f2"/>
</g>
<path id="path3684-2" d="m63.714 890.36-1.1428 1.1428 2.2857 2.2858 1.1428-1.1429zm-1.7143 1.7143-6.2857 6.2857 2.2857 2.2857 6.2857-6.2857zm-6.2857 6.2857-1.7143 4 4-1.7143z" fill="#b3b3b3"/>
<g id="g4717" transform="translate(-54.789 -114.48)">
<path id="path3862" transform="translate(-1.2108 854.84)" d="m141.27 173.42-6.7559 2.6797 0.95313 6.3457 5.8711 3.127 4.1484-7.873zm-1.4473 2.4883 2.9902 1.6016-0.5918 2.4316-3.3574 1.5039-1.7383-3.8106z" fill="#f2f2f2" fill-rule="evenodd" stroke="#999" stroke-width=".25"/>
@ -196,5 +193,14 @@
<path id="path11" d="m12 914.86a2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5zm0 1a1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5z" style="paint-order:fill markers stroke"/>
</g>
</g>
<g id="g2-6" transform="matrix(1.22 0 0 1.22 75.51 864.01)" fill="none" stroke="#999" stroke-linecap="round" stroke-linejoin="round" stroke-width=".7">
<path id="path1-7" d="m2.5 4c0.82843 0 1.5-0.67157 1.5-1.5s-0.67157-1.5-1.5-1.5-1.5 0.67157-1.5 1.5 0.67157 1.5 1.5 1.5z"/>
<path id="path2-75" d="m4 5.3501h-3v2.39"/>
<path id="path3-3" d="m11.5 4c0.8284 0 1.5-0.67157 1.5-1.5s-0.6716-1.5-1.5-1.5-1.5 0.67157-1.5 1.5 0.6716 1.5 1.5 1.5z"/>
<path id="path4-5" d="m10 5.3501h3v2.39"/>
<path id="path5-6" d="m7 7.75c0.82843 0 1.5-0.67157 1.5-1.5s-0.67157-1.5-1.5-1.5-1.5 0.67157-1.5 1.5 0.67157 1.5 1.5 1.5z"/>
<path id="path6-6" d="m8.5 9.3501h-3v2.39"/>
<path id="path7-2" d="m5.5 9.3501h3v2.39"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 41 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

View file

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="168" height="168" id="svg2" version="1.1" inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)" sodipodi:docname="16-white.svg" inkscape:export-filename="16-white.png" inkscape:export-xdpi="96" inkscape:export-ydpi="96" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<svg width="168" height="168" id="svg2" version="1.1" inkscape:version="1.4 (e7c3feb100, 2024-10-09)" sodipodi:docname="16-white.svg" inkscape:export-filename="16-white.png" inkscape:export-xdpi="96" inkscape:export-ydpi="96" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs id="defs4">
<clipPath id="clip0_241_10857">
<rect width="18.049999" height="19.01" fill="#ffffff" id="rect586" x="0" y="0" />
@ -16,7 +16,7 @@
<path d="M 16.0401,2.3158 H 2.005 v 14.0351 h 14.0351 z" fill="#ffffff" id="path1259" />
</mask>
</defs>
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="3.8200527" inkscape:cx="86.517131" inkscape:cy="92.276214" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="true" inkscape:window-width="1920" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" showguides="true" inkscape:guide-bbox="true" inkscape:snap-grids="true" inkscape:snap-to-guides="true" inkscape:showpageshadow="2" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1">
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="11.587678" inkscape:cx="79.049488" inkscape:cy="68.779959" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="true" inkscape:window-width="1920" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" showguides="true" inkscape:guide-bbox="true" inkscape:snap-grids="true" inkscape:snap-to-guides="true" inkscape:showpageshadow="2" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1">
<inkscape:grid type="xygrid" id="grid3004" empspacing="4" visible="true" enabled="true" snapvisiblegridlinesonly="true" originx="0" originy="0" spacingy="1" spacingx="1" units="px" />
<sodipodi:guide orientation="-1,0" position="24,168" id="guide3084" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
<sodipodi:guide orientation="0,1" position="0,96" id="guide3086" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
@ -56,9 +56,6 @@
<g transform="translate(32,-48.000118)" style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#4d4d4d;fill-opacity:1;stroke:none" id="text3784-6" />
<path style="fill:#f2f2f2;fill-opacity:1;stroke:#999999;stroke-width:0.25;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 63.71429,866.36213 -1.14285,1.14286 2.28571,2.28572 L 66,868.64785 Z M 62,868.07641 l -6.285714,6.28574 2.285715,2.2857 6.285719,-6.28572 z M 55.714286,874.36215 54,878.36214 l 4.000001,-1.71429 z" id="path3684" inkscape:connector-curvature="0" sodipodi:nodetypes="cccccccccccccc" />
<text xml:space="preserve" style="font-style:normal;font-weight:normal;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none" x="41.647079" y="916.79706" id="text4457-6"><tspan y="916.79706" x="41.647079" sodipodi:role="line" id="tspan4459-6" style="font-size:30.4762px;line-height:1.25;font-family:sans-serif"> </tspan></text>
<g id="text4356-2" style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none" transform="translate(44,-124.00004)">
<path inkscape:connector-curvature="0" id="path4384-2" style="font-variant:normal;font-stretch:normal;font-size:20px;font-family:Arial;-inkscape-font-specification:Arial;fill:#f2f2f2;fill-opacity:1" d="m 35.742187,999.43835 3.076172,-3.07617 -3.066406,-3.0664 1.191406,-1.19141 3.066407,3.06641 3.05664,-3.05664 1.171875,1.18164 -3.046875,3.05664 3.066406,3.0664 -1.191406,1.19138 L 40,997.54382 36.923828,1000.62 35.742187,999.43835" />
</g>
<path style="fill:#b3b3b3;fill-opacity:1;stroke:none" d="m 63.71429,890.36216 -1.14285,1.1428 2.28571,2.2858 L 66,892.64786 Z M 62,892.07646 55.714286,898.36218 58,900.64788 l 6.28572,-6.2857 z m -6.285714,6.28572 -1.714286,4 4,-1.7143 z" id="path3684-2" inkscape:connector-curvature="0" sodipodi:nodetypes="cccccccccccccc" />
<g id="g4717" transform="translate(-54.789185,-114.477)">
<path style="fill:#f2f2f2;fill-opacity:1;fill-rule:evenodd;stroke:#999999;stroke-width:0.25;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 141.26953,173.42383 -6.75586,2.67969 0.95313,6.3457 5.87109,3.12695 4.14844,-7.87305 z m -1.44726,2.48828 2.99023,1.60156 -0.5918,2.43164 -3.35742,1.50391 -1.73828,-3.81055 z" transform="translate(-1.210815,854.83918)" id="path3862" inkscape:connector-curvature="0" />
@ -218,5 +215,14 @@
<path id="path11" style="fill:#f2f2f2;stroke:#999999;stroke-width:0.2;stroke-dasharray:none;paint-order:fill markers stroke" d="m 12,914.86218 a 2.5,2.5 0 0 0 -2.5,2.5 2.5,2.5 0 0 0 2.5,2.5 2.5,2.5 0 0 0 2.5,-2.5 2.5,2.5 0 0 0 -2.5,-2.5 z m 0,1 a 1.5,1.5 0 0 1 1.5,1.5 1.5,1.5 0 0 1 -1.5,1.5 1.5,1.5 0 0 1 -1.5,-1.5 1.5,1.5 0 0 1 1.5,-1.5 z" />
</g>
</g>
<g style="fill:none;stroke:#999999;stroke-opacity:1" id="g2-6" transform="matrix(1.2199965,0,0,1.2199965,75.510009,864.01174)">
<path d="m 2.5,4 c 0.82843,0 1.5,-0.67157 1.5,-1.5 0,-0.82843 -0.67157,-1.5 -1.5,-1.5 -0.82843,0 -1.5,0.67157 -1.5,1.5 0,0.82843 0.67157,1.5 1.5,1.5 z" stroke="#323737" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round" id="path1-7" style="stroke:#999999;stroke-opacity:1" />
<path d="m 4,5.3501 h -3 v 2.39" stroke="#323737" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round" id="path2-75" style="stroke:#999999;stroke-opacity:1" />
<path d="m 11.5,4 c 0.8284,0 1.5,-0.67157 1.5,-1.5 0,-0.82843 -0.6716,-1.5 -1.5,-1.5 -0.8284,0 -1.5,0.67157 -1.5,1.5 0,0.82843 0.6716,1.5 1.5,1.5 z" stroke="#323737" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round" id="path3-3" style="stroke:#999999;stroke-opacity:1" />
<path d="m 10,5.3501 h 3 v 2.39" stroke="#323737" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round" id="path4-5" style="stroke:#999999;stroke-opacity:1" />
<path d="m 7,7.75 c 0.82843,0 1.5,-0.67157 1.5,-1.5 0,-0.82843 -0.67157,-1.5 -1.5,-1.5 -0.82843,0 -1.5,0.67157 -1.5,1.5 0,0.82843 0.67157,1.5 1.5,1.5 z" stroke="#323737" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round" id="path5-6" style="stroke:#999999;stroke-opacity:1" />
<path d="m 8.5,9.3501 h -3 v 2.39" stroke="#323737" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round" id="path6-6" style="stroke:#999999;stroke-opacity:1" />
<path d="m 5.5,9.3501 h 3 v 2.39" stroke="#323737" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round" id="path7-2" style="stroke:#999999;stroke-opacity:1" />
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 74 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 45 KiB

View file

@ -11,19 +11,26 @@ const TOP_BAR_TEMPLATE = `
<button class="share-status" type="button" data-ref="share"></button>
</div>
<div class="umap-right-edit-toolbox" data-ref="right">
<button class="connected-peers" type="button" data-ref="peers"></button>
<button class="connected-peers round" type="button" data-ref="peers">
<i class="icon icon-16 icon-peers icon-black"></i>
<span></span>
</button>
<button class="umap-user flat" type="button" data-ref="user">
<i class="icon icon-16 icon-profile"></i>
<span class="username" data-ref="username"></span>
</button>
<button class="umap-help-link" type="button" title="${translate('Help')}" data-ref="help">${translate('Help')}</button>
<button class="edit-cancel" type="button" data-ref="cancel">
<button class="edit-cancel round" type="button" data-ref="cancel">
<i class="icon icon-16 icon-restore"></i>
<span class="">${translate('Cancel edits')}</span>
</button>
<button class="edit-disable" type="button" data-ref="view">
<button class="edit-disable round" type="button" data-ref="view">
<i class="icon icon-16 icon-eye"></i>
<span class="">${translate('View')}</span>
</button>
<button class="edit-save button" type="button" data-ref="save">
<button class="edit-save button round" type="button" data-ref="save">
<i class="icon icon-16 icon-save"></i>
<i class="icon icon-16 icon-save-disabled"></i>
<span class="">${translate('Save')}</span>
</button>
</div>
@ -89,7 +96,6 @@ export class TopBar extends WithTemplate {
})
const connectedPeers = this._umap.sync.getNumberOfConnectedPeers()
this.elements.peers.dataset.connected = connectedPeers
this.elements.peers.addEventListener('mouseover', () => {
if (!connectedPeers) return
this._umap.tooltip.open({

View file

@ -1318,7 +1318,7 @@ export default class Umap extends ServerStored {
}
},
numberOfConnectedPeers: () => {
Utils.eachElement('.connected-peers', (el) => {
Utils.eachElement('.connected-peers span', (el) => {
el.textContent = this.sync.getNumberOfConnectedPeers()
})
},

View file

@ -5,6 +5,7 @@
--color-lightGray: #ddd;
--color-mediumGray: #3e4444;
--color-darkGray: #323737;
--color-darkerGray: #2a2e30;
--color-light: white;
--color-dark: black;
--color-limeGreen: #b9f5d2;