PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #5330 from vector-im/matthew/cosmetics

Browse source 
fix groupview header editing visuals (pt 1)
This commit is contained in:
Luke Barnard 2017-10-19 09:20:46 +01:00 committed by GitHub
commit 4711356c3f
4 changed files with 84 additions and 396 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss
View file

@ -54,6 +54,23 @@ limitations under the License.
pointer-events: none;
}
.mx_GroupView_editable {
border-bottom: 1px solid $strong-input-border-color ! important;
min-width: 150px;
cursor: text;
}
.mx_GroupView_editable:focus {
border-bottom: 1px solid $accent-color ! important;
outline: none;
box-shadow: none;
}
.mx_GroupView_header_name:hover div:not(.mx_GroupView_editable) {
color: $accent-color;
cursor: pointer;
}
.mx_GroupView_avatarPicker {
position: relative;
}
@ -103,10 +120,6 @@ limitations under the License.
border-bottom: 1px solid transparent;
}
.mx_GroupView_header_name input, .mx_GroupView_header_shortDesc input {
width: 400px;
}
.mx_GroupView_header_shortDesc {
vertical-align: bottom;
float: left;

147
src/skins/vector/img/icons-groups.svg
View file

@ -1,127 +1,26 @@
<?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="25px"
height="25px"
viewBox="0 0 25 25"
version="1.1"
id="svg4196"
inkscape:version="0.91 r13725"
sodipodi:docname="icons-room.svg">
<metadata
id="metadata4216">
<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>81230A28-D944-4572-B5DB-C03CAA2B1FCA</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="1199"
inkscape:window-height="897"
id="namedview4214"
showgrid="false"
inkscape:zoom="18.441345"
inkscape:cx="12.5"
inkscape:cy="12.5"
inkscape:window-x="486"
inkscape:window-y="77"
inkscape:window-maximized="0"
inkscape:current-layer="g4240" />
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title
id="title4198">81230A28-D944-4572-B5DB-C03CAA2B1FCA</title>
<desc
id="desc4200">Created with sketchtool.</desc>
<defs
id="defs4202" />
<g
id="Symbols"
stroke="none"
stroke-width="1"
fill="none"
fill-rule="evenodd">
<g
id="Left-nav-default"
transform="translate(-50.000000, -725.000000)">
<g
id="Left-panel">
<g
id="g4207">
<g
id="icons_people"
transform="translate(50.000000, 725.000000)">
<path
d="M12.5,25 C19.4035594,25 25,19.4035594 25,12.5 C25,5.59644063 19.4035594,0 12.5,0 C5.59644063,0 0,5.59644063 0,12.5 C0,19.4035594 5.59644063,25 12.5,25 Z"
id="Oval-1-Copy-7"
fill="#76CFA6" />
<g
id="icons_people_svg"
transform="translate(2.1738878,5.8373221)"
style="stroke:#ffffff">
<path
d="m 10.5,12 c 0,-2.7614237 0,-5 -5,-5 -5.0000002,0 -5,2.2385763 -5,5 3.4756747,0 5.5712891,0 10,0 z"
id="Oval-40"
inkscape:connector-curvature="0"
style="stroke-linecap:round;stroke-linejoin:round" />
<circle
id="Oval"
cx="5.5"
cy="2.75"
r="2.75" />
</g>
<g
style="stroke:#ffffff"
transform="translate(12.151468,5.8373221)"
id="g4246">
<path
style="stroke-linecap:round;stroke-linejoin:round"
inkscape:connector-curvature="0"
id="path4248"
d="m 10.5,12 c 0,-2.7614237 0,-5 -5,-5 -5.0000002,0 -5,2.2385763 -5,5 3.4756747,0 5.5712891,0 10,0 z" />
<circle
r="2.75"
cy="2.75"
cx="5.5"
id="circle4250" />
</g>
<g
transform="translate(6.945774,9.0366549)"
id="g4240"
style="stroke:#ffffff">
<path
id="path4242"
d="m 10.5,12 c 0,-2.7614237 0,-5 -5,-5 -5.0000002,0 -5,2.2385763 -5,5 3.4756747,0 5.5712891,0 10,0 z"
inkscape:connector-curvature="0"
style="stroke-linecap:round;stroke-linejoin:round;fill:#76cfa6;fill-opacity:1" />
<circle
r="2.75"
cy="2.75"
cx="5.5"
id="circle4244"
style="fill:#76cfa6;fill-opacity:1" />
</g>
</g>
</g>
</g>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 25 25" style="enable-background:new 0 0 25 25;" xml:space="preserve">
<style type="text/css">
.st4{fill:none;stroke-miterlimit:10;}
</style>
<g id="icons_people" transform="translate(50.000000, 725.000000)">
<path id="Oval-1-Copy-7" fill="#76CFA6" d="M-37.5-700c6.9,0,12.5-5.6,12.5-12.5S-30.6-725-37.5-725S-50-719.4-50-712.5
S-44.4-700-37.5-700z"/>
<g id="g4240_1_" transform="translate(6.945774,9.0366549)">
<path id="path4242_1_" class="st4" stroke="#FFFFFF" d="M-38.8-714.1c0-3.2,0-5.7-5.7-5.7s-5.7,2.5-5.7,5.7C-46.2-714.1-43.8-714.1-38.8-714.1z"/>
<circle id="circle4244_1_" class="st4" stroke="#FFFFFF" cx="-44.5" cy="-724.7" r="3.2"/>
</g>
<g>
<path fill="#FFFFFF" d="M-45.8-708.7c0-2.5,0.3-4,4.5-4c0.3,0,0.6,0,0.8,0c-0.3-0.3-0.6-0.6-0.8-1c0,0,0,0-0.1,0
c-5.5,0-5.5,2.7-5.5,5.5v0.5h2.7c0.1-0.3,0.1-0.7,0.2-1H-45.8z"/>
<path fill="#FFFFFF" d="M-43.6-717.4c0-1.3,1-2.3,2.3-2.3c0.6,0,1.1,0.2,1.5,0.5c0.3-0.2,0.6-0.3,1-0.5c-0.6-0.7-1.5-1.1-2.4-1.1
c-1.8,0-3.3,1.5-3.3,3.3c0,1.8,1.4,3.2,3.2,3.3c-0.1-0.3-0.2-0.7-0.3-1C-42.8-715.3-43.6-716.2-43.6-717.4z"/>
<path fill="#FFFFFF" d="M-27.8-708.2c0-2.8,0-5.5-5.5-5.5c-0.2,0-0.3,0-0.5,0c-0.2,0.4-0.5,0.7-0.8,1c0.4,0,0.8-0.1,1.3-0.1
c4.2,0,4.5,1.5,4.5,4h-2.4c0.1,0.3,0.2,0.7,0.2,1h3.1V-708.2z"/>
<path fill="#FFFFFF" d="M-33.3-719.7c1.3,0,2.3,1,2.3,2.3c0,1.3-1,2.3-2.3,2.3c0,0,0,0,0,0c0,0.3-0.1,0.7-0.3,1c0.1,0,0.2,0,0.3,0
c1.8,0,3.3-1.5,3.3-3.3c0-1.8-1.5-3.3-3.3-3.3c-1,0-1.9,0.5-2.5,1.2c0.3,0.1,0.6,0.3,0.9,0.5C-34.6-719.4-34-719.7-33.3-719.7z"/>
</g>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

176
src/skins/vector/img/icons-room-add.svg
View file

@ -1,159 +1,27 @@
<?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="25px"
height="25px"
viewBox="0 0 25 25"
version="1.1"
id="svg4196"
inkscape:version="0.48.4 r9939"
sodipodi:docname="icons-room.svg">
<metadata
id="metadata4216">
<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>81230A28-D944-4572-B5DB-C03CAA2B1FCA</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="1918"
inkscape:window-height="1050"
id="namedview4214"
showgrid="false"
inkscape:zoom="18.441345"
inkscape:cx="-1.0720921"
inkscape:cy="5.6865774"
inkscape:window-x="0"
inkscape:window-y="28"
inkscape:window-maximized="0"
inkscape:current-layer="text3879"
inkscape:snap-object-midpoints="true"
inkscape:snap-global="true"
inkscape:snap-bbox="true"
inkscape:bbox-paths="false"
inkscape:snap-bbox-midpoints="true"
inkscape:snap-page="true"
showguides="true"
inkscape:guide-bbox="true" />
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title
id="title4198">81230A28-D944-4572-B5DB-C03CAA2B1FCA</title>
<desc
id="desc4200">Created with sketchtool.</desc>
<defs
id="defs4202" />
<g
id="Symbols"
stroke="none"
stroke-width="1"
fill="none"
fill-rule="evenodd">
<g
id="Left-nav-default"
transform="translate(-50.000000, -725.000000)">
<g
id="Left-panel">
<g
id="g4207">
<g
id="icons_people"
transform="translate(50.000000, 725.000000)">
<path
d="M12.5,25 C19.4035594,25 25,19.4035594 25,12.5 C25,5.59644063 19.4035594,0 12.5,0 C5.59644063,0 0,5.59644063 0,12.5 C0,19.4035594 5.59644063,25 12.5,25 Z"
id="Oval-1-Copy-7"
fill="#76CFA6"
style="fill:#76cfa6;fill-opacity:1" />
<path
style="fill:#a0a0a0;stroke:none"
d="m 4.4538552,16.721536 c 0.680539,-0.0086 1.7786151,-0.0086 2.4401691,2.1e-5 0.6615541,0.0086 0.1047495,0.01567 -1.2373435,0.01565 -1.342093,-1.2e-5 -1.8833645,-0.0071 -1.2028256,-0.01567 z"
id="path3032"
inkscape:connector-curvature="0" />
<g
transform="matrix(1.0243293,0,0,0.97624855,-24.996028,0.15844144)"
style="font-size:20.13689613px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Sans"
id="text3879">
<g
id="g3249"
transform="matrix(0.69732039,0,0,0.73166379,24.402336,-0.16229621)"
style="opacity:1;fill:#de8787">
<g
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-opacity:1"
id="g3183">
<g
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-opacity:1"
id="g3169">
<g
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-opacity:1"
id="g3156">
<g
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-opacity:1"
id="Symbols-3">
<g
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-opacity:1"
id="Right-panel/Footer"
transform="translate(-26,-34)">
<g
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-opacity:1"
id="icon_invite_people"
transform="translate(26,34)">
<g
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-opacity:1"
id="Group-5"
transform="translate(8,9)">
<g
style="opacity:0.80000000000000004;fill:none;fill-opacity:1;stroke-linecap:round;stroke:#ffffff;stroke-opacity:1"
id="Group-3"
transform="translate(14.4375,3.9375)">
<path
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-opacity:1"
inkscape:connector-curvature="0"
d="m 0,3.28125 6.5625,0"
id="Line" />
<path
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-opacity:1"
inkscape:connector-curvature="0"
d="m 3.28125,0 0,6.5625"
id="path3142" />
</g>
<g
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-opacity:1"
id="icons_people_svg" />
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<path
d="m 37.394645,11.340164 -0.511365,2.634303 2.19267,0 0,0.999487 -2.378621,0 -0.650828,3.331619 -1.06147,0 0.650829,-3.331619 -2.34763,0 -0.635332,3.331619 -1.053721,0 0.619835,-3.331619 -2.029963,0 0,-0.999487 2.223663,0 0.52686,-2.634303 -2.146183,0 0,-0.98399 2.316638,0 0.635332,-3.3781075 1.076965,0 -0.635332,3.3781075 2.363126,0 0.650827,-3.3781075 1.038226,0 -0.650827,3.3781075 2.045459,0 0,0.98399 -2.239158,0 m -3.920464,2.634303 2.347629,0 0.511365,-2.634303 -2.347629,0 -0.511365,2.634303"
style="font-variant:normal;font-stretch:normal;fill:#ffffff;font-family:Open Sans;-inkscape-font-specification:Open Sans"
id="path3002"
inkscape:connector-curvature="0" />
</g>
</g>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1"
id="svg4196" inkscape:version="0.48.4 r9939" sodipodi:docname="lukes-icons-room.svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 25 25"
style="enable-background:new 0 0 25 25;" xml:space="preserve">
<style type="text/css">
.st1{fill:none;stroke-linecap:round;stroke-miterlimit:10;}
</style>
<path id="Oval-1-Copy-7" fill="#76CFA6" d="M12.5,25C19.4,25,25,19.4,25,12.5S19.4,0,12.5,0S0,5.6,0,12.5S5.6,25,12.5,25z"/>
<g>
<g>
<g>
<line class="st1" stroke="#ffffff" x1="8.9" y1="8.3" x2="8.9" y2="19.5"/>
<line class="st1" stroke="#ffffff" x1="12.9" y1="8.3" x2="12.9" y2="19.5"/>
</g>
<g>
<line class="st1" stroke="#ffffff" x1="5.3" y1="15.9" x2="16.6" y2="15.9"/>
<line class="st1" stroke="#ffffff" x1="5.3" y1="11.9" x2="16.6" y2="11.9"/>
</g>
</g>
<g>
<line class="st1" stroke="#ffffff" x1="17.9" y1="5.5" x2="17.9" y2="9"/>
<line class="st1" stroke="#ffffff" x1="16.2" y1="7.3" x2="19.7" y2="7.3"/>
</g>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

124
src/skins/vector/img/icons-room.svg
View file

@ -1,109 +1,17 @@
<?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="25px"
height="25px"
viewBox="0 0 25 25"
version="1.1"
id="svg4196"
inkscape:version="0.48.4 r9939"
sodipodi:docname="lukes-icons-room.svg">
<metadata
id="metadata4216">
<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>81230A28-D944-4572-B5DB-C03CAA2B1FCA</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="1918"
inkscape:window-height="1078"
id="namedview4214"
showgrid="false"
inkscape:zoom="13.04"
inkscape:cx="3.0259155"
inkscape:cy="11.779524"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="0"
inkscape:current-layer="text3879"
inkscape:snap-object-midpoints="true"
inkscape:snap-global="true"
inkscape:snap-bbox="true"
inkscape:bbox-paths="false"
inkscape:snap-bbox-midpoints="true"
inkscape:snap-page="true"
showguides="true"
inkscape:guide-bbox="true">
<sodipodi:guide
orientation="0,1"
position="10.352761,19.555215"
id="guide4072" />
</sodipodi:namedview>
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title
id="title4198">81230A28-D944-4572-B5DB-C03CAA2B1FCA</title>
<desc
id="desc4200">Created with sketchtool.</desc>
<defs
id="defs4202" />
<g
id="Symbols"
stroke="none"
stroke-width="1"
fill="none"
fill-rule="evenodd">
<g
id="Left-nav-default"
transform="translate(-50.000000, -725.000000)">
<g
id="Left-panel">
<g
id="g4207">
<g
id="icons_people"
transform="translate(50.000000, 725.000000)">
<path
d="M12.5,25 C19.4035594,25 25,19.4035594 25,12.5 C25,5.59644063 19.4035594,0 12.5,0 C5.59644063,0 0,5.59644063 0,12.5 C0,19.4035594 5.59644063,25 12.5,25 Z"
id="Oval-1-Copy-7"
fill="#76CFA6"
style="fill:#76cfa6;fill-opacity:1" />
<path
style="fill:#a0a0a0;stroke:none"
d="m 4.4538552,16.721536 c 0.680539,-0.0086 1.7786151,-0.0086 2.4401691,2.1e-5 0.6615541,0.0086 0.1047495,0.01567 -1.2373435,0.01565 -1.342093,-1.2e-5 -1.8833645,-0.0071 -1.2028256,-0.01567 z"
id="path3032"
inkscape:connector-curvature="0" />
<g
transform="scale(1.0243293,0.97624855)"
style="font-size:20.13689613px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Sans"
id="text3879">
<path
d="m 15.354413,11.152262 -0.648943,3.343039 2.782589,0 0,1.268389 -3.018568,0 -0.825927,4.227962 -1.347049,0 0.825928,-4.227962 -2.979238,0 -0.8062628,4.227962 -1.3372158,0 0.7865976,-4.227962 -2.5761069,0 0,-1.268389 2.8219186,0 0.6686079,-3.343039 -2.7235939,0 0,-1.2487235 2.9399082,0 0.8062621,-4.2869564 1.366713,0 -0.806262,4.2869564 2.998903,0 0.825927,-4.2869564 1.317551,0 -0.825927,4.2869564 2.595772,0 0,1.2487235 -2.841584,0 m -4.975229,3.343039 2.979238,0 0.648943,-3.343039 -2.979238,0 -0.648943,3.343039"
style="font-variant:normal;font-stretch:normal;fill:#ffffff;font-family:Open Sans;-inkscape-font-specification:Open Sans"
id="path3002" />
</g>
</g>
</g>
</g>
</g>
</g>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1"
id="svg4196" inkscape:version="0.48.4 r9939" sodipodi:docname="lukes-icons-room.svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 25 25"
style="enable-background:new 0 0 25 25;" xml:space="preserve">
<style type="text/css">
.st1{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-miterlimit:10;}
</style>
<path id="Oval-1-Copy-7" fill="#76CFA6" d="M12.5,25C19.4,25,25,19.4,25,12.5S19.4,0,12.5,0S0,5.6,0,12.5S5.6,25,12.5,25z"/>
<g>
<line class="st1" stroke="#FFFFFF" x1="10" y1="6.9" x2="10" y2="18.1"/>
<line class="st1" stroke="#FFFFFF" x1="15" y1="6.9" x2="15" y2="18.1"/>
<line class="st1" stroke="#FFFFFF" x1="6.9" y1="15" x2="18.1" y2="15"/>
<line class="st1" stroke="#FFFFFF" x1="6.9" y1="10" x2="18.1" y2="10"/>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB