OwlBurst/Ponysearch
1
0
Fork 0
forked from Ponysearch/Ponysearch
Code Pull requests Activity

Merge pull request #460 from dalf/simple-minor-fixes

Browse source 
Simple theme: various fixes
This commit is contained in:
Alexandre Flament 2021-10-31 11:22:12 +01:00 committed by GitHub
commit e4025cd164
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 102 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
searx/static/themes/oscar/css/logicodev-dark.min.css.map
View file

File diff suppressed because one or more lines are too long

2
searx/static/themes/oscar/css/logicodev.min.css.map
View file

File diff suppressed because one or more lines are too long

2
searx/static/themes/oscar/css/pointhi.min.css.map
View file

File diff suppressed because one or more lines are too long

41
searx/static/themes/simple/css/searxng-rtl.css
View file

@ -819,8 +819,9 @@ template {
* *
* To change the colors of the site, simple edit this variables * To change the colors of the site, simple edit this variables
*/ */
html { :root {
--color-base-font: #444; --color-base-font: #444;
--color-base-font-rgb: 68, 68, 68;
--color-base-background: #fff; --color-base-background: #fff;
--color-url-font: #29314d; --color-url-font: #29314d;
--color-url-visited-font: #80b; --color-url-visited-font: #80b;
@ -901,8 +902,9 @@ html {
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0); --color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html { :root {
--color-base-font: #bbb; --color-base-font: #bbb;
--color-base-font-rgb: 187, 187, 187;
--color-base-background: #222; --color-base-background: #222;
--color-url-font: #8af; --color-url-font: #8af;
--color-url-visited-font: #96b; --color-url-visited-font: #96b;
@ -1690,7 +1692,7 @@ select:focus {
-moz-appearance: none; -moz-appearance: none;
border: none; border: none;
border-bottom: 1px solid var(--color-toolkit-select-border); border-bottom: 1px solid var(--color-toolkit-select-border);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTI4LDE5MiAyNTYsMzIwIDM4NCwxOTIiLz48L2c+PC9zdmc+Cg==) no-repeat; background: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cg%3E%3Cpolygon%20points%3D%22128%2C192%20256%2C320%20384%2C192%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E") no-repeat;
background-position-x: 105%; background-position-x: 105%;
background-size: 2em; background-size: 2em;
background-origin: content-box; background-origin: content-box;
@ -1700,6 +1702,11 @@ select:focus {
select:focus { select:focus {
border-bottom: 1px solid var(--color-search-border); border-bottom: 1px solid var(--color-search-border);
} }
@media (prefers-color-scheme: dark) {
select {
background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cg%3E%3Cpolygon%20fill%3D%22%23ddd%22%20points%3D%22128%2C192%20256%2C320%20384%2C192%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
}
}
} }
/* -- checkbox-onoff -- */ /* -- checkbox-onoff -- */
@supports (border-radius: 50px) { @supports (border-radius: 50px) {
@ -1882,8 +1889,8 @@ td:hover .engine-tooltip,
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
flex-basis: unset; flex-basis: unset;
background: #000000; background: var(--color-base-font);
border: 1px solid rgba(0, 0, 0, 0.9); border: 1px solid rgba(var(--color-base-font-rgb), 0.9);
padding: 0.3rem 0; padding: 0.3rem 0;
} }
.stacked-bar-chart-rate80 { .stacked-bar-chart-rate80 {
@ -1892,7 +1899,7 @@ td:hover .engine-tooltip,
flex-grow: 0; flex-grow: 0;
flex-basis: unset; flex-basis: unset;
background: transparent; background: transparent;
border: 1px solid rgba(0, 0, 0, 0.3); border: 1px solid rgba(var(--color-base-font-rgb), 0.3);
padding: 0.3rem 0; padding: 0.3rem 0;
} }
.stacked-bar-chart-rate95 { .stacked-bar-chart-rate95 {
@ -1901,7 +1908,7 @@ td:hover .engine-tooltip,
flex-grow: 0; flex-grow: 0;
flex-basis: unset; flex-basis: unset;
background: transparent; background: transparent;
border-bottom: 1px dotted rgba(0, 0, 0, 0.5); border-bottom: 1px dotted rgba(var(--color-base-font-rgb), 0.5);
padding: 0; padding: 0;
} }
.stacked-bar-chart-rate100 { .stacked-bar-chart-rate100 {
@ -1910,7 +1917,7 @@ td:hover .engine-tooltip,
flex-grow: 0; flex-grow: 0;
flex-basis: unset; flex-basis: unset;
background: transparent; background: transparent;
border-left: 1px solid rgba(0, 0, 0, 0.9); border-left: 1px solid rgba(var(--color-base-font-rgb), 0.9);
padding: 0.4rem 0; padding: 0.4rem 0;
width: 1px; width: 1px;
} }
@ -2284,16 +2291,23 @@ article.result-images .detail {
text-align: center; text-align: center;
} }
#main_preferences table.cookies { #main_preferences table.cookies {
width: auto; width: 100%;
} }
#main_preferences table.cookies th, #main_preferences table.cookies th,
#main_preferences table.cookies td { #main_preferences table.cookies td {
text-align: left; text-align: left;
padding: 0.25em; font-family: monospace;
font-size: 1rem;
padding: 0.5em;
vertical-align: top;
} }
#main_preferences table.cookies th:first-child,
#main_preferences table.cookies td:first-child { #main_preferences table.cookies td:first-child {
padding-right: 4em; word-break: keep-all;
width: 14rem;
padding-right: 1rem;
}
#main_preferences table.cookies td:last-child {
word-break: break-all;
} }
#main_preferences table.cookies > tbody > tr:nth-child(even) > th, #main_preferences table.cookies > tbody > tr:nth-child(even) > th,
#main_preferences table.cookies > tbody > tr:nth-child(even) > td { #main_preferences table.cookies > tbody > tr:nth-child(even) > td {
@ -2316,7 +2330,6 @@ article.result-images .detail {
padding: 0.7em; padding: 0.7em;
} }
#main_preferences .preferences_back a { #main_preferences .preferences_back a {
display: block;
color: var(--color-settings-return-font); color: var(--color-settings-return-font);
} }
#main_preferences .preferences_back a::first-letter { #main_preferences .preferences_back a::first-letter {
@ -2968,7 +2981,7 @@ article.result-images[data-vim-selected] .image_thumbnail {
max-width: 100%; max-width: 100%;
max-height: 12em; max-height: 12em;
display: block; display: block;
margin: 0; margin: 0 auto;
padding: 0; padding: 0;
} }
#sidebar .infobox dl { #sidebar .infobox dl {

2
searx/static/themes/simple/css/searxng-rtl.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
searx/static/themes/simple/css/searxng-rtl.min.css.map
View file

File diff suppressed because one or more lines are too long

41
searx/static/themes/simple/css/searxng.css
View file

@ -819,8 +819,9 @@ template {
* *
* To change the colors of the site, simple edit this variables * To change the colors of the site, simple edit this variables
*/ */
html { :root {
--color-base-font: #444; --color-base-font: #444;
--color-base-font-rgb: 68, 68, 68;
--color-base-background: #fff; --color-base-background: #fff;
--color-url-font: #29314d; --color-url-font: #29314d;
--color-url-visited-font: #80b; --color-url-visited-font: #80b;
@ -901,8 +902,9 @@ html {
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0); --color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html { :root {
--color-base-font: #bbb; --color-base-font: #bbb;
--color-base-font-rgb: 187, 187, 187;
--color-base-background: #222; --color-base-background: #222;
--color-url-font: #8af; --color-url-font: #8af;
--color-url-visited-font: #96b; --color-url-visited-font: #96b;
@ -1690,7 +1692,7 @@ select:focus {
-moz-appearance: none; -moz-appearance: none;
border: none; border: none;
border-bottom: 1px solid var(--color-toolkit-select-border); border-bottom: 1px solid var(--color-toolkit-select-border);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTI4LDE5MiAyNTYsMzIwIDM4NCwxOTIiLz48L2c+PC9zdmc+Cg==) no-repeat; background: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cg%3E%3Cpolygon%20points%3D%22128%2C192%20256%2C320%20384%2C192%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E") no-repeat;
background-position-x: 105%; background-position-x: 105%;
background-size: 2em; background-size: 2em;
background-origin: content-box; background-origin: content-box;
@ -1700,6 +1702,11 @@ select:focus {
select:focus { select:focus {
border-bottom: 1px solid var(--color-search-border); border-bottom: 1px solid var(--color-search-border);
} }
@media (prefers-color-scheme: dark) {
select {
background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cg%3E%3Cpolygon%20fill%3D%22%23ddd%22%20points%3D%22128%2C192%20256%2C320%20384%2C192%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
}
}
} }
/* -- checkbox-onoff -- */ /* -- checkbox-onoff -- */
@supports (border-radius: 50px) { @supports (border-radius: 50px) {
@ -1882,8 +1889,8 @@ td:hover .engine-tooltip,
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
flex-basis: unset; flex-basis: unset;
background: #000000; background: var(--color-base-font);
border: 1px solid rgba(0, 0, 0, 0.9); border: 1px solid rgba(var(--color-base-font-rgb), 0.9);
padding: 0.3rem 0; padding: 0.3rem 0;
} }
.stacked-bar-chart-rate80 { .stacked-bar-chart-rate80 {
@ -1892,7 +1899,7 @@ td:hover .engine-tooltip,
flex-grow: 0; flex-grow: 0;
flex-basis: unset; flex-basis: unset;
background: transparent; background: transparent;
border: 1px solid rgba(0, 0, 0, 0.3); border: 1px solid rgba(var(--color-base-font-rgb), 0.3);
padding: 0.3rem 0; padding: 0.3rem 0;
} }
.stacked-bar-chart-rate95 { .stacked-bar-chart-rate95 {
@ -1901,7 +1908,7 @@ td:hover .engine-tooltip,
flex-grow: 0; flex-grow: 0;
flex-basis: unset; flex-basis: unset;
background: transparent; background: transparent;
border-bottom: 1px dotted rgba(0, 0, 0, 0.5); border-bottom: 1px dotted rgba(var(--color-base-font-rgb), 0.5);
padding: 0; padding: 0;
} }
.stacked-bar-chart-rate100 { .stacked-bar-chart-rate100 {
@ -1910,7 +1917,7 @@ td:hover .engine-tooltip,
flex-grow: 0; flex-grow: 0;
flex-basis: unset; flex-basis: unset;
background: transparent; background: transparent;
border-left: 1px solid rgba(0, 0, 0, 0.9); border-left: 1px solid rgba(var(--color-base-font-rgb), 0.9);
padding: 0.4rem 0; padding: 0.4rem 0;
width: 1px; width: 1px;
} }
@ -2284,16 +2291,23 @@ article.result-images .detail {
text-align: center; text-align: center;
} }
#main_preferences table.cookies { #main_preferences table.cookies {
width: auto; width: 100%;
} }
#main_preferences table.cookies th, #main_preferences table.cookies th,
#main_preferences table.cookies td { #main_preferences table.cookies td {
text-align: left; text-align: left;
padding: 0.25em; font-family: monospace;
font-size: 1rem;
padding: 0.5em;
vertical-align: top;
} }
#main_preferences table.cookies th:first-child,
#main_preferences table.cookies td:first-child { #main_preferences table.cookies td:first-child {
padding-right: 4em; word-break: keep-all;
width: 14rem;
padding-right: 1rem;
}
#main_preferences table.cookies td:last-child {
word-break: break-all;
} }
#main_preferences table.cookies > tbody > tr:nth-child(even) > th, #main_preferences table.cookies > tbody > tr:nth-child(even) > th,
#main_preferences table.cookies > tbody > tr:nth-child(even) > td { #main_preferences table.cookies > tbody > tr:nth-child(even) > td {
@ -2316,7 +2330,6 @@ article.result-images .detail {
padding: 0.7em; padding: 0.7em;
} }
#main_preferences .preferences_back a { #main_preferences .preferences_back a {
display: block;
color: var(--color-settings-return-font); color: var(--color-settings-return-font);
} }
#main_preferences .preferences_back a::first-letter { #main_preferences .preferences_back a::first-letter {
@ -2968,7 +2981,7 @@ article.result-images[data-vim-selected] .image_thumbnail {
max-width: 100%; max-width: 100%;
max-height: 12em; max-height: 12em;
display: block; display: block;
margin: 0; margin: 0 auto;
padding: 0; padding: 0;
} }
#sidebar .infobox dl { #sidebar .infobox dl {

2
searx/static/themes/simple/css/searxng.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
searx/static/themes/simple/css/searxng.min.css.map
View file

File diff suppressed because one or more lines are too long

10
searx/static/themes/simple/src/less/definitions.less
View file

@ -5,9 +5,10 @@
*/ */
/// Light Theme /// Light Theme
html { :root {
/// Base Colors /// Base Colors
--color-base-font: #444; --color-base-font: #444;
--color-base-font-rgb: 68, 68, 68;
--color-base-background: #fff; --color-base-background: #fff;
--color-url-font: #29314d; --color-url-font: #29314d;
--color-url-visited-font: #80b; --color-url-visited-font: #80b;
@ -105,9 +106,10 @@ html {
/// Dark Theme (autoswitch based on device pref) /// Dark Theme (autoswitch based on device pref)
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html { :root {
/// Base Colors /// Base Colors
--color-base-font: #bbb; --color-base-font: #bbb;
--color-base-font-rgb: 187, 187, 187;
--color-base-background: #222; --color-base-background: #222;
--color-url-font: #8af; --color-url-font: #8af;
--color-url-visited-font: #96b; --color-url-visited-font: #96b;
@ -230,3 +232,7 @@ html {
@icon-font-name: "glyphicons-halflings-regular"; @icon-font-name: "glyphicons-halflings-regular";
//** Element ID within SVG icon file. //** Element ID within SVG icon file.
@icon-font-svg-id: "glyphicons_halflingsregular"; @icon-font-svg-id: "glyphicons_halflingsregular";
// decoration of the select HTML elements
@select-light-svg-path: "../svg/select-light.svg";
@select-dark-svg-path: "../svg/select-dark.svg";

17
searx/static/themes/simple/src/less/preferences.less
View file

@ -52,17 +52,25 @@
} }
table.cookies { table.cookies {
width: auto; width: 100%;
th, th,
td { td {
text-align: left; text-align: left;
padding: 0.25em; font-family: monospace;
font-size: 1rem;
padding: 0.5em;
vertical-align: top;
} }
th:first-child,
td:first-child { td:first-child {
padding-right: 4em; word-break: keep-all;
width: 14rem;
padding-right: 1rem;
}
td:last-child {
word-break: break-all;
} }
& > tbody > tr:nth-child(even) > th, & > tbody > tr:nth-child(even) > th,
@ -88,7 +96,6 @@
padding: 0.7em; padding: 0.7em;
a { a {
display: block;
color: var(--color-settings-return-font); color: var(--color-settings-return-font);
} }

2
searx/static/themes/simple/src/less/style.less
View file

@ -468,7 +468,7 @@ article.result-images[data-vim-selected] {
max-width: 100%; max-width: 100%;
max-height: 12em; max-height: 12em;
display: block; display: block;
margin: 0; margin: 0 auto;
padding: 0; padding: 0;
} }

18
searx/static/themes/simple/src/less/toolkit.less
View file

@ -328,7 +328,7 @@ select {
-moz-appearance: none; -moz-appearance: none;
border: none; border: none;
border-bottom: 1px solid var(--color-toolkit-select-border); border-bottom: 1px solid var(--color-toolkit-select-border);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTI4LDE5MiAyNTYsMzIwIDM4NCwxOTIiLz48L2c+PC9zdmc+Cg==) no-repeat; background: data-uri('image/svg+xml;charset=UTF-8', @select-light-svg-path) no-repeat;
background-position-x: 105%; background-position-x: 105%;
background-size: 2em; background-size: 2em;
background-origin: content-box; background-origin: content-box;
@ -339,6 +339,12 @@ select {
border-bottom: 1px solid var(--color-search-border); border-bottom: 1px solid var(--color-search-border);
} }
} }
@media (prefers-color-scheme: dark) {
select {
background-image: data-uri('image/svg+xml;charset=UTF-8', @select-dark-svg-path);
}
}
} }
/* -- checkbox-onoff -- */ /* -- checkbox-onoff -- */
@ -541,8 +547,8 @@ td:hover .engine-tooltip,
.stacked-bar-chart-median { .stacked-bar-chart-median {
.stacked-bar-chart-base(); .stacked-bar-chart-base();
background: @stacked-bar-chart; background: var(--color-base-font);
border: 1px solid fade(@stacked-bar-chart, 90%); border: 1px solid rgba(var(--color-base-font-rgb), 0.9);
padding: 0.3rem 0; padding: 0.3rem 0;
} }
@ -550,7 +556,7 @@ td:hover .engine-tooltip,
.stacked-bar-chart-base(); .stacked-bar-chart-base();
background: transparent; background: transparent;
border: 1px solid fade(@stacked-bar-chart, 30%); border: 1px solid rgba(var(--color-base-font-rgb), 0.3);
padding: 0.3rem 0; padding: 0.3rem 0;
} }
@ -558,7 +564,7 @@ td:hover .engine-tooltip,
.stacked-bar-chart-base(); .stacked-bar-chart-base();
background: transparent; background: transparent;
border-bottom: 1px dotted fade(@stacked-bar-chart, 50%); border-bottom: 1px dotted rgba(var(--color-base-font-rgb), 0.5);
padding: 0; padding: 0;
} }
@ -566,7 +572,7 @@ td:hover .engine-tooltip,
.stacked-bar-chart-base(); .stacked-bar-chart-base();
background: transparent; background: transparent;
border-left: 1px solid fade(@stacked-bar-chart, 90%); border-left: 1px solid rgba(var(--color-base-font-rgb), 0.9);
padding: 0.4rem 0; padding: 0.4rem 0;
width: 1px; width: 1px;
} }

4
searx/static/themes/simple/src/svg/select-dark.svg Normal file
View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
<g><polygon fill="#ddd" points="128,192 256,320 384,192"/></g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 196 B

4
searx/static/themes/simple/src/svg/select-light.svg Normal file
View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
<g><polygon points="128,192 256,320 384,192"/></g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 184 B