Fixed dark mode issue

This commit is contained in:
nobody 2020-03-11 06:13:04 +01:00
parent 36fa8588c4
commit 68ea623ccf
No known key found for this signature in database
GPG Key ID: AB5145CF05BFE119
7 changed files with 268 additions and 5 deletions

View File

@ -1,5 +1,5 @@
disabled.svg
enabled.svg
settings.svg
disabled.svg, disable-dark.svg, disable-light.svg (edited)
enabled.svg (edited)
settings-dark.svg, settings-light.svg (edited)
https://www.svgrepo.com/vectors/web-security-fill/
Creative Commons BY 4.0

View File

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

120
icons/disable-light.svg Normal file
View File

@ -0,0 +1,120 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
viewBox="0 0 283.722 283.722"
style="enable-background:new 0 0 283.722 283.722;"
xml:space="preserve"
sodipodi:docname="disable-light.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
id="metadata941"><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><defs
id="defs939" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1680"
inkscape:window-height="997"
id="namedview937"
showgrid="false"
inkscape:zoom="2.8795795"
inkscape:cx="80.220046"
inkscape:cy="140.4719"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="1"
inkscape:current-layer="Capa_1" />
<g
id="g904"
style="fill:#f2f2f2">
<path
d="M184.721,128.156c4.398-14.805,7.516-29.864,8.885-43.783c0.06-0.607-0.276-1.159-0.835-1.373l-70.484-26.932 c-0.152-0.058-0.312-0.088-0.475-0.088c-0.163,0-0.322,0.03-0.474,0.088L50.851,83c-0.551,0.21-0.894,0.775-0.835,1.373 c2.922,29.705,13.73,64.62,28.206,91.12c14.162,25.923,30.457,41.4,43.589,41.4c8.439,0,18.183-6.4,27.828-17.846l-16.375-16.375 c-14.645-14.645-14.645-38.389,0-53.033C147.396,115.509,169.996,115.017,184.721,128.156z"
id="path898"
style="fill:#f2f2f2" />
<path
d="M121.812,236.893c-46.932,0-85.544-87.976-91.7-150.562c-0.94-9.56,4.627-18.585,13.601-22.013l70.486-26.933 c2.451-0.937,5.032-1.405,7.613-1.405c2.581,0,5.162,0.468,7.614,1.405l70.484,26.932c8.987,3.434,14.542,12.439,13.6,22.013 c-1.773,18.028-6.244,38.161-12.826,57.693l11.068,11.068l17.865-17.866c6.907-20.991,11.737-42.285,13.845-61.972 c1.322-12.347-5.53-24.102-16.934-29.017l-93.512-40.3c-7.152-3.082-15.257-3.082-22.409,0l-93.512,40.3 C5.705,51.147-1.159,62.922,0.162,75.255c8.765,81.851,64.476,191.512,121.65,191.512c0.356,0,0.712-0.023,1.068-0.032 c-1.932-10.793,0.888-22.262,8.456-31.06C128.205,236.465,125.029,236.893,121.812,236.893z"
id="path900"
style="fill:#f2f2f2" />
<path
d="M240.037,208.125c7.327-7.326,30.419-30.419,37.827-37.827c7.81-7.811,7.81-20.475,0-28.285 c-7.811-7.811-20.475-7.811-28.285,0c-7.41,7.41-30.5,30.5-37.827,37.827l-37.827-37.827c-7.81-7.811-20.475-7.811-28.285,0 c-7.811,7.811-7.811,20.475,0,28.285l37.827,37.827c-7.326,7.326-30.419,30.419-37.827,37.827c-7.811,7.811-7.811,20.475,0,28.285 c7.809,7.809,20.474,7.811,28.285,0c7.41-7.41,30.5-30.499,37.827-37.827l37.827,37.827c7.809,7.809,20.474,7.811,28.285,0 c7.81-7.81,7.81-20.475,0-28.285L240.037,208.125z"
id="path902"
style="fill:#f2f2f2" />
</g>
<g
id="g906"
style="fill:#f2f2f2">
</g>
<g
id="g908"
style="fill:#f2f2f2">
</g>
<g
id="g910"
style="fill:#f2f2f2">
</g>
<g
id="g912"
style="fill:#f2f2f2">
</g>
<g
id="g914"
style="fill:#f2f2f2">
</g>
<g
id="g916"
style="fill:#f2f2f2">
</g>
<g
id="g918"
style="fill:#f2f2f2">
</g>
<g
id="g920"
style="fill:#f2f2f2">
</g>
<g
id="g922"
style="fill:#f2f2f2">
</g>
<g
id="g924"
style="fill:#f2f2f2">
</g>
<g
id="g926"
style="fill:#f2f2f2">
</g>
<g
id="g928"
style="fill:#f2f2f2">
</g>
<g
id="g930"
style="fill:#f2f2f2">
</g>
<g
id="g932"
style="fill:#f2f2f2">
</g>
<g
id="g934"
style="fill:#f2f2f2">
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

120
icons/settings-light.svg Normal file
View File

@ -0,0 +1,120 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
viewBox="0 0 478.703 478.703"
style="enable-background:new 0 0 478.703 478.703;"
xml:space="preserve"
sodipodi:docname="settings-light.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
id="metadata1069"><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><defs
id="defs1067" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1680"
inkscape:window-height="997"
id="namedview1065"
showgrid="false"
inkscape:zoom="0.49299879"
inkscape:cx="-124.74676"
inkscape:cy="239.3515"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="1"
inkscape:current-layer="Capa_1" />
<g
id="g1032"
style="fill:#f2f2f2">
<g
id="g1030"
style="fill:#f2f2f2">
<path
d="M454.2,189.101l-33.6-5.7c-3.5-11.3-8-22.2-13.5-32.6l19.8-27.7c8.4-11.8,7.1-27.9-3.2-38.1l-29.8-29.8 c-5.6-5.6-13-8.7-20.9-8.7c-6.2,0-12.1,1.9-17.1,5.5l-27.8,19.8c-10.8-5.7-22.1-10.4-33.8-13.9l-5.6-33.2 c-2.4-14.3-14.7-24.7-29.2-24.7h-42.1c-14.5,0-26.8,10.4-29.2,24.7l-5.8,34c-11.2,3.5-22.1,8.1-32.5,13.7l-27.5-19.8 c-5-3.6-11-5.5-17.2-5.5c-7.9,0-15.4,3.1-20.9,8.7l-29.9,29.8c-10.2,10.2-11.6,26.3-3.2,38.1l20,28.1 c-5.5,10.5-9.9,21.4-13.3,32.7l-33.2,5.6c-14.3,2.4-24.7,14.7-24.7,29.2v42.1c0,14.5,10.4,26.8,24.7,29.2l34,5.8 c3.5,11.2,8.1,22.1,13.7,32.5l-19.7,27.4c-8.4,11.8-7.1,27.9,3.2,38.1l29.8,29.8c5.6,5.6,13,8.7,20.9,8.7c6.2,0,12.1-1.9,17.1-5.5 l28.1-20c10.1,5.3,20.7,9.6,31.6,13l5.6,33.6c2.4,14.3,14.7,24.7,29.2,24.7h42.2c14.5,0,26.8-10.4,29.2-24.7l5.7-33.6 c11.3-3.5,22.2-8,32.6-13.5l27.7,19.8c5,3.6,11,5.5,17.2,5.5l0,0c7.9,0,15.3-3.1,20.9-8.7l29.8-29.8c10.2-10.2,11.6-26.3,3.2-38.1 l-19.8-27.8c5.5-10.5,10.1-21.4,13.5-32.6l33.6-5.6c14.3-2.4,24.7-14.7,24.7-29.2v-42.1 C478.9,203.801,468.5,191.501,454.2,189.101z M451.9,260.401c0,1.3-0.9,2.4-2.2,2.6l-42,7c-5.3,0.9-9.5,4.8-10.8,9.9 c-3.8,14.7-9.6,28.8-17.4,41.9c-2.7,4.6-2.5,10.3,0.6,14.7l24.7,34.8c0.7,1,0.6,2.5-0.3,3.4l-29.8,29.8c-0.7,0.7-1.4,0.8-1.9,0.8 c-0.6,0-1.1-0.2-1.5-0.5l-34.7-24.7c-4.3-3.1-10.1-3.3-14.7-0.6c-13.1,7.8-27.2,13.6-41.9,17.4c-5.2,1.3-9.1,5.6-9.9,10.8l-7.1,42 c-0.2,1.3-1.3,2.2-2.6,2.2h-42.1c-1.3,0-2.4-0.9-2.6-2.2l-7-42c-0.9-5.3-4.8-9.5-9.9-10.8c-14.3-3.7-28.1-9.4-41-16.8 c-2.1-1.2-4.5-1.8-6.8-1.8c-2.7,0-5.5,0.8-7.8,2.5l-35,24.9c-0.5,0.3-1,0.5-1.5,0.5c-0.4,0-1.2-0.1-1.9-0.8l-29.8-29.8 c-0.9-0.9-1-2.3-0.3-3.4l24.6-34.5c3.1-4.4,3.3-10.2,0.6-14.8c-7.8-13-13.8-27.1-17.6-41.8c-1.4-5.1-5.6-9-10.8-9.9l-42.3-7.2 c-1.3-0.2-2.2-1.3-2.2-2.6v-42.1c0-1.3,0.9-2.4,2.2-2.6l41.7-7c5.3-0.9,9.6-4.8,10.9-10c3.7-14.7,9.4-28.9,17.1-42 c2.7-4.6,2.4-10.3-0.7-14.6l-24.9-35c-0.7-1-0.6-2.5,0.3-3.4l29.8-29.8c0.7-0.7,1.4-0.8,1.9-0.8c0.6,0,1.1,0.2,1.5,0.5l34.5,24.6 c4.4,3.1,10.2,3.3,14.8,0.6c13-7.8,27.1-13.8,41.8-17.6c5.1-1.4,9-5.6,9.9-10.8l7.2-42.3c0.2-1.3,1.3-2.2,2.6-2.2h42.1 c1.3,0,2.4,0.9,2.6,2.2l7,41.7c0.9,5.3,4.8,9.6,10,10.9c15.1,3.8,29.5,9.7,42.9,17.6c4.6,2.7,10.3,2.5,14.7-0.6l34.5-24.8 c0.5-0.3,1-0.5,1.5-0.5c0.4,0,1.2,0.1,1.9,0.8l29.8,29.8c0.9,0.9,1,2.3,0.3,3.4l-24.7,34.7c-3.1,4.3-3.3,10.1-0.6,14.7 c7.8,13.1,13.6,27.2,17.4,41.9c1.3,5.2,5.6,9.1,10.8,9.9l42,7.1c1.3,0.2,2.2,1.3,2.2,2.6v42.1H451.9z"
id="path1026"
style="fill:#f2f2f2" />
<path
d="M239.4,136.001c-57,0-103.3,46.3-103.3,103.3s46.3,103.3,103.3,103.3s103.3-46.3,103.3-103.3S296.4,136.001,239.4,136.001 z M239.4,315.601c-42.1,0-76.3-34.2-76.3-76.3s34.2-76.3,76.3-76.3s76.3,34.2,76.3,76.3S281.5,315.601,239.4,315.601z"
id="path1028"
style="fill:#f2f2f2" />
</g>
</g>
<g
id="g1034"
style="fill:#f2f2f2">
</g>
<g
id="g1036"
style="fill:#f2f2f2">
</g>
<g
id="g1038"
style="fill:#f2f2f2">
</g>
<g
id="g1040"
style="fill:#f2f2f2">
</g>
<g
id="g1042"
style="fill:#f2f2f2">
</g>
<g
id="g1044"
style="fill:#f2f2f2">
</g>
<g
id="g1046"
style="fill:#f2f2f2">
</g>
<g
id="g1048"
style="fill:#f2f2f2">
</g>
<g
id="g1050"
style="fill:#f2f2f2">
</g>
<g
id="g1052"
style="fill:#f2f2f2">
</g>
<g
id="g1054"
style="fill:#f2f2f2">
</g>
<g
id="g1056"
style="fill:#f2f2f2">
</g>
<g
id="g1058"
style="fill:#f2f2f2">
</g>
<g
id="g1060"
style="fill:#f2f2f2">
</g>
<g
id="g1062"
style="fill:#f2f2f2">
</g>
</svg>

After

Width:  |  Height:  |  Size: 5.0 KiB

View File

@ -176,6 +176,21 @@ footer {
color: #339a6f;
}
#options-button-svg,
#protection-toggle-button-svg {
background-size: cover;
width: 15px;
height: 15px;
}
#options-button-svg {
background-image: url("../../icons/settings-dark.svg");
}
#protection-toggle-button-svg {
background-image: url("../../icons/disable-dark.svg");
}
/**
* Links
*/
@ -326,6 +341,14 @@ footer {
border-color: #323232;
}
#options-button-svg {
background-image: url("../../icons/settings-light.svg");
}
#protection-toggle-button-svg {
background-image: url("../../icons/disable-light.svg");
}
/**
* Links
*/

View File

@ -36,7 +36,7 @@
<div class="subpanel">
<div id="protection-toggle-button" class="button button-toggle active">
<img src="../../icons/disable.svg" alt="Enable/Disable" width="15" height="15">
<div id="protection-toggle-button-svg"></div>
</div>
<div class="label-domain">
@ -64,7 +64,7 @@
<span id="testing-utility-link" class="link-text">decentraleyes.org/test</span>
<div id="options-button" class="button" data-i18n-title="optionsTitle">
<img src="../../icons/settings.svg" alt="Settings" width="15" height="15">
<div id="options-button-svg"></div>
</div>
</footer>