mirrors/mycorrhiza
1
0
Fork 0
mirror of https://github.com/osmarks/mycorrhiza.git synced 2024-12-12 05:20:26 +00:00
Code Issues Releases Wiki Activity

Add dark theme

Browse Source
This commit is contained in:
bouncepaw 2021-01-15 19:10:08 +05:00
parent b4655dbe33
commit e73c3f8289
3 changed files with 136 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
templates/asset.qtpl.go
View File

@ -23,17 +23,18 @@ func StreamDefaultCSS(qw422016 *qt422016.Writer) {
qw422016.N().S(` qw422016.N().S(`
`) `)
//line templates/asset.qtpl:2 //line templates/asset.qtpl:2
qw422016.N().S(`@media screen and (min-width: 700px) { qw422016.N().S(`/* Layout stuff */
main {margin: 0 auto; width: 700px;} @media screen and (min-width: 800px) {
main {margin: 0 auto; width: 800px;}
} }
@media screen and (max-width: 700px) { @media screen and (max-width: 800px) {
main {margin: 0; width: 100%;} main {margin: 0; width: 100%;}
} }
*, *::before, *::after {box-sizing: border-box;} *, *::before, *::after {box-sizing: border-box;}
html {height:100%; padding:0; background-color:#ddd; html {height:100%; padding:0;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23bbbbbb' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");} /* heropatterns.com */ background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23bbbbbb' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");} /* heropatterns.com */
body {height:100%; margin:0; font-size:16px; font-family: 'PT Sans', 'Liberation Sans', sans-serif;} body {height:100%; margin:0; font-size:16px; font-family: 'PT Sans', 'Liberation Sans', sans-serif;}
main {padding:1rem; background-color: white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); border-radius: 0 0 .25rem .25rem; } main {padding:1rem 2rem; border-radius: 0 0 .25rem .25rem; }
main > form {margin-bottom:1rem;} main > form {margin-bottom:1rem;}
textarea {font-size:16px; font-family: 'PT Sans', 'Liberation Sans', sans-serif;} textarea {font-size:16px; font-family: 'PT Sans', 'Liberation Sans', sans-serif;}
.edit {height:100%;} .edit {height:100%;}
@ -42,22 +43,19 @@ textarea {font-size:16px; font-family: 'PT Sans', 'Liberation Sans', sans-serif;
.icon {margin-right: .25rem; vertical-align: bottom; } .icon {margin-right: .25rem; vertical-align: bottom; }
main h1:not(.navi-title) {font-size:1.7rem;} main h1:not(.navi-title) {font-size:1.7rem;}
blockquote {border-left: 4px black solid; margin-left: 0; padding-left: 1rem;} blockquote { margin-left: 0; padding-left: 1rem; }
.wikilink_new {color:#a55858;}
.wikilink_new:visited {color:#a55858;}
.wikilink__destination-type {display: inline; margin: 0 .25rem; vertical-align: sub; } .wikilink__destination-type {display: inline; margin: 0 .25rem; vertical-align: sub; }
article { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; line-height: 150%; } article { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; line-height: 150%; }
article h1, article h2, article h3, article h4, article h5, article h6 { margin: 1.5rem 0 0 0; } article h1, article h2, article h3, article h4, article h5, article h6 { margin: 1.5rem 0 0 0; }
article p { margin: .5rem 0; } article p { margin: .5rem 0; }
article ul, ol { padding-left: 1.5rem; margin: .5rem 0; } article ul, ol { padding-left: 1.5rem; margin: .5rem 0; }
article code {background-color:#eee; padding: .1rem .3rem; border-radius: .25rem; font-size: 90%; } article code { padding: .1rem .3rem; border-radius: .25rem; font-size: 90%; }
article pre.codeblock {background-color:#eee; padding:.5rem; white-space: pre-wrap; border-radius: .25rem;} article pre.codeblock { padding:.5rem; white-space: pre-wrap; border-radius: .25rem;}
.codeblock code {padding:0; font-size:15px;} .codeblock code {padding:0; font-size:15px;}
.transclusion code, .transclusion .codeblock {background-color:#ddd;} .transclusion { border-radius: .25rem; }
.transclusion {background-color:#eee; border-radius: .25rem; }
.transclusion__content > *:not(.binary-container) {margin: 0.5rem; } .transclusion__content > *:not(.binary-container) {margin: 0.5rem; }
.transclusion__link {display: block; text-align: right; font-style: italic; margin-top: .5rem; margin-right: .25rem; color: black; text-decoration: none;} .transclusion__link {display: block; text-align: right; font-style: italic; margin-top: .5rem; margin-right: .25rem; text-decoration: none;}
.transclusion__link::before {content: "⇐ ";} .transclusion__link::before {content: "⇐ ";}
/* Derived from https://commons.wikimedia.org/wiki/File:U%2B21D2.svg */ /* Derived from https://commons.wikimedia.org/wiki/File:U%2B21D2.svg */
@ -67,14 +65,15 @@ article pre.codeblock {background-color:#eee; padding:.5rem; white-space: pre-wr
.binary-container_with-video video, .binary-container_with-video video,
.binary-container_with-audio audio {width: 100%} .binary-container_with-audio audio {width: 100%}
.navi-title { border-bottom: #eee 1px solid; padding-bottom: .5rem; margin-bottom: .25rem; } .navi-title { padding-bottom: .5rem; margin-bottom: .25rem; }
.navi-title a {text-decoration:none; } .navi-title a {text-decoration:none; }
.navi-title__separator { margin: 0 .25rem; } .navi-title__separator { margin: 0 .25rem; }
.navi-title__colon { margin-right: .5rem; } .navi-title__colon { margin-right: .5rem; }
.upload-amnt { clear: both; border: #eee 1px solid; padding: .5rem; border-radius: .25rem; } .upload-amnt { clear: both; padding: .5rem; border-radius: .25rem; }
aside { clear: both; }
.img-gallery { text-align: center; margin-top: .25rem; margin-bottom: .25rem; } .img-gallery { text-align: center; margin-top: .25rem; margin-bottom: .25rem; }
.img-gallery_many-images { background-color: #eee; border-radius: .25rem; padding: .5rem; } .img-gallery_many-images { border-radius: .25rem; padding: .5rem; }
.img-gallery img { max-width: 100%; max-height: 50vh; } .img-gallery img { max-width: 100%; max-height: 50vh; }
figure { margin: 0; } figure { margin: 0; }
figcaption { padding-bottom: .5rem; } figcaption { padding-bottom: .5rem; }
@ -85,13 +84,13 @@ nav ul li {list-style-type:none;margin-right:1rem;}
#new-name {width:100%;} #new-name {width:100%;}
.navlinks__user {font-style:italic;} .navlinks__user {font-style:italic;}
.rc-entry { display: grid; list-style-type: none; padding: .25rem; background-color: #eee; grid-template-columns: 1fr 1fr; } .rc-entry { display: grid; list-style-type: none; padding: .25rem; grid-template-columns: 1fr 1fr; }
.rc-entry__time { font-style: italic; } .rc-entry__time { font-style: italic; }
.rc-entry__hash { font-style: italic; text-align: right; } .rc-entry__hash { font-style: italic; text-align: right; }
.rc-entry__links { grid-column: 1 / span 2; } .rc-entry__links { grid-column: 1 / span 2; }
.rc-entry__author { font-style: italic; } .rc-entry__author { font-style: italic; }
.prevnext__el { display: block-inline; min-width: 40%; padding: .5rem; margin-bottom: .25rem; text-decoration: none; background-color: #eee; border-radius: .25rem; } .prevnext__el { display: block-inline; min-width: 40%; padding: .5rem; margin-bottom: .25rem; text-decoration: none; border-radius: .25rem; }
.prevnext__prev { float: left; } .prevnext__prev { float: left; }
.prevnext__next { float: right; text-align: right; } .prevnext__next { float: right; text-align: right; }
@ -103,10 +102,57 @@ nav ul li {list-style-type:none;margin-right:1rem;}
.history-entry__time { font-weight: bold; } .history-entry__time { font-weight: bold; }
.history-entry__author { font-style: italic; } .history-entry__author { font-style: italic; }
table { background-color: #eee; border: #ddd 1px solid; border-radius: .25rem; table { border: #ddd 1px solid; border-radius: .25rem; min-width: 4rem; }
min-width: 4rem; } td { padding: .25rem; }
td { padding: .25rem; border: #ddd 1px solid; }
caption { caption-side: top; font-size: small; } caption { caption-side: top; font-size: small; }
/* Color stuff */
svg path { fill: currentColor !important; }
/* Lighter stuff #eee */
article code,
article .codeblock,
.transclusion,
.img-gallery_many-images,
.rc-entry,
.prevnext__el,
table { background-color: #eee; }
/* Other stuff */
html { background-color: #ddd; }
main { background-color: white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); }
blockquote { border-left: 4px black solid; }
.wikilink_new {color:#a55858;}
.transclusion code, .transclusion .codeblock {background-color:#ddd;}
.transclusion__link { color: black; }
.wikilink_new:visited {color:#a55858;}
.navi-title { border-bottom: #eee 1px solid; }
.upload-amnt { border: #eee 1px solid; }
td { border: #ddd 1px solid; }
/* Dark theme! */
@media (prefers-color-scheme: dark) {
html { background-color: black; color: #ddd; }
main, article { background-color: #121212; }
blockquote { border-left: 4px #ddd solid; }
a, .wikilink_external { color: #22AA22; }
a:visited, .wikilink_external:visited { color: #228822; }
.transclusion .transclusion__link { color: #ddd; }
article code,
article .codeblock,
.transclusion,
.img-gallery_many-images,
.rc-entry,
.history__entry,
.prevnext__el,
.upload-amnt,
textarea,
table { border: 0; background-color: #232323; color: #ddd; }
.transclusion code,
.transclusion .codeblock { background-color: #343434; }
}
`) `)
//line templates/asset.qtpl:2 //line templates/asset.qtpl:2
qw422016.N().S(` qw422016.N().S(`
@ -148,7 +194,7 @@ func StreamIconHTTP(qw422016 *qt422016.Writer) {
qw422016.N().S(` qw422016.N().S(`
`) `)
//line templates/asset.qtpl:7 //line templates/asset.qtpl:7
qw422016.N().S(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-2.29-2.333A17.9 17.9 0 0 1 8.027 13H4.062a8.008 8.008 0 0 0 5.648 6.667zM10.03 13c.151 2.439.848 4.73 1.97 6.752A15.905 15.905 0 0 0 13.97 13h-3.94zm9.908 0h-3.965a17.9 17.9 0 0 1-1.683 6.667A8.008 8.008 0 0 0 19.938 13zM4.062 11h3.965A17.9 17.9 0 0 1 9.71 4.333 8.008 8.008 0 0 0 4.062 11zm5.969 0h3.938A15.905 15.905 0 0 0 12 4.248 15.905 15.905 0 0 0 10.03 11zm4.259-6.667A17.9 17.9 0 0 1 15.973 11h3.965a8.008 8.008 0 0 0-5.648-6.667z"/></svg> qw422016.N().S(`<svg xmlns="http://www.w3.org/2000/svg" color="currentColor" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-2.29-2.333A17.9 17.9 0 0 1 8.027 13H4.062a8.008 8.008 0 0 0 5.648 6.667zM10.03 13c.151 2.439.848 4.73 1.97 6.752A15.905 15.905 0 0 0 13.97 13h-3.94zm9.908 0h-3.965a17.9 17.9 0 0 1-1.683 6.667A8.008 8.008 0 0 0 19.938 13zM4.062 11h3.965A17.9 17.9 0 0 1 9.71 4.333 8.008 8.008 0 0 0 4.062 11zm5.969 0h3.938A15.905 15.905 0 0 0 12 4.248 15.905 15.905 0 0 0 10.03 11zm4.259-6.667A17.9 17.9 0 0 1 15.973 11h3.965a8.008 8.008 0 0 0-5.648-6.667z"/></svg>
`) `)
//line templates/asset.qtpl:7 //line templates/asset.qtpl:7
qw422016.N().S(` qw422016.N().S(`

88
templates/default.css
View File

@ -1,14 +1,15 @@
@media screen and (min-width: 700px) { /* Layout stuff */
main {margin: 0 auto; width: 700px;} @media screen and (min-width: 800px) {
main {margin: 0 auto; width: 800px;}
} }
@media screen and (max-width: 700px) { @media screen and (max-width: 800px) {
main {margin: 0; width: 100%;} main {margin: 0; width: 100%;}
} }
*, *::before, *::after {box-sizing: border-box;} *, *::before, *::after {box-sizing: border-box;}
html {height:100%; padding:0; background-color:#ddd; html {height:100%; padding:0;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23bbbbbb' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");} /* heropatterns.com */ background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23bbbbbb' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");} /* heropatterns.com */
body {height:100%; margin:0; font-size:16px; font-family: 'PT Sans', 'Liberation Sans', sans-serif;} body {height:100%; margin:0; font-size:16px; font-family: 'PT Sans', 'Liberation Sans', sans-serif;}
main {padding:1rem; background-color: white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); border-radius: 0 0 .25rem .25rem; } main {padding:1rem 2rem; border-radius: 0 0 .25rem .25rem; }
main > form {margin-bottom:1rem;} main > form {margin-bottom:1rem;}
textarea {font-size:16px; font-family: 'PT Sans', 'Liberation Sans', sans-serif;} textarea {font-size:16px; font-family: 'PT Sans', 'Liberation Sans', sans-serif;}
.edit {height:100%;} .edit {height:100%;}
@ -17,22 +18,19 @@ textarea {font-size:16px; font-family: 'PT Sans', 'Liberation Sans', sans-serif;
.icon {margin-right: .25rem; vertical-align: bottom; } .icon {margin-right: .25rem; vertical-align: bottom; }
main h1:not(.navi-title) {font-size:1.7rem;} main h1:not(.navi-title) {font-size:1.7rem;}
blockquote {border-left: 4px black solid; margin-left: 0; padding-left: 1rem;} blockquote { margin-left: 0; padding-left: 1rem; }
.wikilink_new {color:#a55858;}
.wikilink_new:visited {color:#a55858;}
.wikilink__destination-type {display: inline; margin: 0 .25rem; vertical-align: sub; } .wikilink__destination-type {display: inline; margin: 0 .25rem; vertical-align: sub; }
article { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; line-height: 150%; } article { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; line-height: 150%; }
article h1, article h2, article h3, article h4, article h5, article h6 { margin: 1.5rem 0 0 0; } article h1, article h2, article h3, article h4, article h5, article h6 { margin: 1.5rem 0 0 0; }
article p { margin: .5rem 0; } article p { margin: .5rem 0; }
article ul, ol { padding-left: 1.5rem; margin: .5rem 0; } article ul, ol { padding-left: 1.5rem; margin: .5rem 0; }
article code {background-color:#eee; padding: .1rem .3rem; border-radius: .25rem; font-size: 90%; } article code { padding: .1rem .3rem; border-radius: .25rem; font-size: 90%; }
article pre.codeblock {background-color:#eee; padding:.5rem; white-space: pre-wrap; border-radius: .25rem;} article pre.codeblock { padding:.5rem; white-space: pre-wrap; border-radius: .25rem;}
.codeblock code {padding:0; font-size:15px;} .codeblock code {padding:0; font-size:15px;}
.transclusion code, .transclusion .codeblock {background-color:#ddd;} .transclusion { border-radius: .25rem; }
.transclusion {background-color:#eee; border-radius: .25rem; }
.transclusion__content > *:not(.binary-container) {margin: 0.5rem; } .transclusion__content > *:not(.binary-container) {margin: 0.5rem; }
.transclusion__link {display: block; text-align: right; font-style: italic; margin-top: .5rem; margin-right: .25rem; color: black; text-decoration: none;} .transclusion__link {display: block; text-align: right; font-style: italic; margin-top: .5rem; margin-right: .25rem; text-decoration: none;}
.transclusion__link::before {content: "⇐ ";} .transclusion__link::before {content: "⇐ ";}
/* Derived from https://commons.wikimedia.org/wiki/File:U%2B21D2.svg */ /* Derived from https://commons.wikimedia.org/wiki/File:U%2B21D2.svg */
@ -42,14 +40,15 @@ article pre.codeblock {background-color:#eee; padding:.5rem; white-space: pre-wr
.binary-container_with-video video, .binary-container_with-video video,
.binary-container_with-audio audio {width: 100%} .binary-container_with-audio audio {width: 100%}
.navi-title { border-bottom: #eee 1px solid; padding-bottom: .5rem; margin-bottom: .25rem; } .navi-title { padding-bottom: .5rem; margin-bottom: .25rem; }
.navi-title a {text-decoration:none; } .navi-title a {text-decoration:none; }
.navi-title__separator { margin: 0 .25rem; } .navi-title__separator { margin: 0 .25rem; }
.navi-title__colon { margin-right: .5rem; } .navi-title__colon { margin-right: .5rem; }
.upload-amnt { clear: both; border: #eee 1px solid; padding: .5rem; border-radius: .25rem; } .upload-amnt { clear: both; padding: .5rem; border-radius: .25rem; }
aside { clear: both; }
.img-gallery { text-align: center; margin-top: .25rem; margin-bottom: .25rem; } .img-gallery { text-align: center; margin-top: .25rem; margin-bottom: .25rem; }
.img-gallery_many-images { background-color: #eee; border-radius: .25rem; padding: .5rem; } .img-gallery_many-images { border-radius: .25rem; padding: .5rem; }
.img-gallery img { max-width: 100%; max-height: 50vh; } .img-gallery img { max-width: 100%; max-height: 50vh; }
figure { margin: 0; } figure { margin: 0; }
figcaption { padding-bottom: .5rem; } figcaption { padding-bottom: .5rem; }
@ -60,13 +59,13 @@ nav ul li {list-style-type:none;margin-right:1rem;}
#new-name {width:100%;} #new-name {width:100%;}
.navlinks__user {font-style:italic;} .navlinks__user {font-style:italic;}
.rc-entry { display: grid; list-style-type: none; padding: .25rem; background-color: #eee; grid-template-columns: 1fr 1fr; } .rc-entry { display: grid; list-style-type: none; padding: .25rem; grid-template-columns: 1fr 1fr; }
.rc-entry__time { font-style: italic; } .rc-entry__time { font-style: italic; }
.rc-entry__hash { font-style: italic; text-align: right; } .rc-entry__hash { font-style: italic; text-align: right; }
.rc-entry__links { grid-column: 1 / span 2; } .rc-entry__links { grid-column: 1 / span 2; }
.rc-entry__author { font-style: italic; } .rc-entry__author { font-style: italic; }
.prevnext__el { display: block-inline; min-width: 40%; padding: .5rem; margin-bottom: .25rem; text-decoration: none; background-color: #eee; border-radius: .25rem; } .prevnext__el { display: block-inline; min-width: 40%; padding: .5rem; margin-bottom: .25rem; text-decoration: none; border-radius: .25rem; }
.prevnext__prev { float: left; } .prevnext__prev { float: left; }
.prevnext__next { float: right; text-align: right; } .prevnext__next { float: right; text-align: right; }
@ -78,7 +77,54 @@ nav ul li {list-style-type:none;margin-right:1rem;}
.history-entry__time { font-weight: bold; } .history-entry__time { font-weight: bold; }
.history-entry__author { font-style: italic; } .history-entry__author { font-style: italic; }
table { background-color: #eee; border: #ddd 1px solid; border-radius: .25rem; table { border: #ddd 1px solid; border-radius: .25rem; min-width: 4rem; }
min-width: 4rem; } td { padding: .25rem; }
td { padding: .25rem; border: #ddd 1px solid; }
caption { caption-side: top; font-size: small; } caption { caption-side: top; font-size: small; }
/* Color stuff */
svg path { fill: currentColor !important; }
/* Lighter stuff #eee */
article code,
article .codeblock,
.transclusion,
.img-gallery_many-images,
.rc-entry,
.prevnext__el,
table { background-color: #eee; }
/* Other stuff */
html { background-color: #ddd; }
main { background-color: white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); }
blockquote { border-left: 4px black solid; }
.wikilink_new {color:#a55858;}
.transclusion code, .transclusion .codeblock {background-color:#ddd;}
.transclusion__link { color: black; }
.wikilink_new:visited {color:#a55858;}
.navi-title { border-bottom: #eee 1px solid; }
.upload-amnt { border: #eee 1px solid; }
td { border: #ddd 1px solid; }
/* Dark theme! */
@media (prefers-color-scheme: dark) {
html { background-color: black; color: #ddd; }
main, article { background-color: #121212; }
blockquote { border-left: 4px #ddd solid; }
a, .wikilink_external { color: #22AA22; }
a:visited, .wikilink_external:visited { color: #228822; }
.transclusion .transclusion__link { color: #ddd; }
article code,
article .codeblock,
.transclusion,
.img-gallery_many-images,
.rc-entry,
.history__entry,
.prevnext__el,
.upload-amnt,
textarea,
table { border: 0; background-color: #232323; color: #ddd; }
.transclusion code,
.transclusion .codeblock { background-color: #343434; }
}

2
templates/icon/http-protocol-icon.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-2.29-2.333A17.9 17.9 0 0 1 8.027 13H4.062a8.008 8.008 0 0 0 5.648 6.667zM10.03 13c.151 2.439.848 4.73 1.97 6.752A15.905 15.905 0 0 0 13.97 13h-3.94zm9.908 0h-3.965a17.9 17.9 0 0 1-1.683 6.667A8.008 8.008 0 0 0 19.938 13zM4.062 11h3.965A17.9 17.9 0 0 1 9.71 4.333 8.008 8.008 0 0 0 4.062 11zm5.969 0h3.938A15.905 15.905 0 0 0 12 4.248 15.905 15.905 0 0 0 10.03 11zm4.259-6.667A17.9 17.9 0 0 1 15.973 11h3.965a8.008 8.008 0 0 0-5.648-6.667z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" color="currentColor" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-2.29-2.333A17.9 17.9 0 0 1 8.027 13H4.062a8.008 8.008 0 0 0 5.648 6.667zM10.03 13c.151 2.439.848 4.73 1.97 6.752A15.905 15.905 0 0 0 13.97 13h-3.94zm9.908 0h-3.965a17.9 17.9 0 0 1-1.683 6.667A8.008 8.008 0 0 0 19.938 13zM4.062 11h3.965A17.9 17.9 0 0 1 9.71 4.333 8.008 8.008 0 0 0 4.062 11zm5.969 0h3.938A15.905 15.905 0 0 0 12 4.248 15.905 15.905 0 0 0 10.03 11zm4.259-6.667A17.9 17.9 0 0 1 15.973 11h3.965a8.008 8.008 0 0 0-5.648-6.667z"/></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 652 B

After

Width:  |  Height:  |  Size: 673 B