commit ad8abfab6030a92d3893166f0ba3bc33b186122b Author: Alex Catarineu <acat@torproject.org> Date: Tue Oct 8 16:52:56 2019 +0200 Bug 31778: Support dark-theme for the Circuit Display UI --- chrome/skin/tor-circuit-display.css | 29 ++++++++++++++++++++++++----- chrome/skin/tor-circuit-line-first.svg | 6 ++++++ chrome/skin/tor-circuit-line-last.svg | 6 ++++++ chrome/skin/tor-circuit-line.svg | 6 ++++++ chrome/skin/torbutton.svg | 4 ++-- 5 files changed, 44 insertions(+), 7 deletions(-) diff --git a/chrome/skin/tor-circuit-display.css b/chrome/skin/tor-circuit-display.css index 576590a4..485ae7a5 100644 --- a/chrome/skin/tor-circuit-display.css +++ b/chrome/skin/tor-circuit-display.css @@ -12,13 +12,15 @@ and lines drawn between them to represent Tor network inter-relay connections. background-position: 1em 1em; background-repeat: no-repeat; background-size: 24px auto; - background-color: rgba(255,255,255,0.15); background-blend-mode: overlay; cursor: default; padding: 0.5em 0px 0.5em; padding-inline-end: 1em; padding-inline-start: calc(2em + 24px); width: 100%; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: .6; } #circuit-display-content:-moz-locale-dir(rtl) { @@ -26,7 +28,6 @@ and lines drawn between them to represent Tor network inter-relay connections. } #circuit-reload-content { - background-color: #f7f7f7; cursor: default; padding: 1em 0px 1em; padding-inline-end: 3em; @@ -57,7 +58,7 @@ ul#circuit-display-nodes { /* Hide default bullets, and draw our own bullets */ ul#circuit-display-nodes li { - background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2715%27%20height%3D%2740%27%3E%3Cg%20style%3D%27stroke%3A%234a4a4a%3Bstroke-width%3A3px%3Bfill%3Awhite%3B%27%3E%3Cline%20x1%3D%2750%25%27%20y1%3D%270%25%27%20x2%3D%2750%25%27%20y2%3D%27100%25%27%2F%3E%3Ccircle%20cx%3D%2750%25%27%20cy%3D%2750%25%27%20r%3D%274.5%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A"); + background-image: url(chrome://torbutton/skin/tor-circuit-line.svg); background-position: left center; background-repeat: no-repeat; list-style: none; @@ -70,11 +71,11 @@ ul#circuit-display-nodes li:dir(rtl) { } ul#circuit-display-nodes li:first-child { - background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2715%27%20height%3D%2740%27%3E%3Cg%20style%3D%27stroke%3A%234a4a4a%3Bstroke-width%3A3px%3Bfill%3Awhite%3B%27%3E%3Cline%20x1%3D%2750%25%27%20y1%3D%2750%25%27%20x2%3D%2750%25%27%20y2%3D%27100%25%27%2F%3E%3Ccircle%20cx%3D%2750%25%27%20cy%3D%2750%25%27%20r%3D%274.5%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A"); + background-image: url(chrome://torbutton/skin/tor-circuit-line-first.svg); } ul#circuit-display-nodes li:last-child { - background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2715%27%20height%3D%2740%27%3E%3Cg%20style%3D%27stroke%3A%234a4a4a%3Bstroke-width%3A3px%3Bfill%3Awhite%3B%27%3E%3Cline%20x1%3D%2750%25%27%20y1%3D%270%25%27%20x2%3D%2750%25%27%20y2%3D%2750%25%27%2F%3E%3Ccircle%20cx%3D%2750%25%27%20cy%3D%2750%25%27%20r%3D%274.5%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A"); + background-image: url(chrome://torbutton/skin/tor-circuit-line-last.svg); } .circuit-guard-help { @@ -83,6 +84,11 @@ ul#circuit-display-nodes li:last-child { stroke: #6200a4; } +.circuit-guard-help:-moz-lwtheme-brighttext { + fill: #D476FF; + stroke: #D476FF; +} + .circuit-ip-address { font-size: 80%; opacity: 0.4; @@ -96,6 +102,10 @@ ul#circuit-display-nodes li:last-child { padding-inline-start: 3px; } +.circuit-guard-info:-moz-lwtheme-brighttext { + color:#D476FF; +} + #circuit-reload-button { background-color: #0060df; border-radius: 3px; @@ -128,11 +138,20 @@ ul#circuit-display-nodes li:last-child { color: #6200a4; } +.circuit-guard-name:-moz-lwtheme-brighttext { + color:#D476FF; +} + .circuit-link { cursor: pointer; color: #0000ee; } + +.circuit-link:-moz-lwtheme-brighttext { + color: #A9A9A9; +} + .circuit-link:hover { text-decoration: underline; } diff --git a/chrome/skin/tor-circuit-line-first.svg b/chrome/skin/tor-circuit-line-first.svg new file mode 100644 index 00000000..6c070daa --- /dev/null +++ b/chrome/skin/tor-circuit-line-first.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="15" height="40"> + <g stroke="#9a9a9a" stroke-width="3" fill="white"> + <line x1='50%' y1='50%' x2='50%' y2='100%'/> + <circle cx='50%' cy='50%' r='4.5'/> + </g> +</svg> \ No newline at end of file diff --git a/chrome/skin/tor-circuit-line-last.svg b/chrome/skin/tor-circuit-line-last.svg new file mode 100644 index 00000000..4ed0ff05 --- /dev/null +++ b/chrome/skin/tor-circuit-line-last.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="15" height="40"> + <g stroke="#9a9a9a" stroke-width="3" fill="white"> + <line x1='50%' y1='0%' x2='50%' y2='50%'/> + <circle cx='50%' cy='50%' r='4.5'/> + </g> +</svg> \ No newline at end of file diff --git a/chrome/skin/tor-circuit-line.svg b/chrome/skin/tor-circuit-line.svg new file mode 100644 index 00000000..ada7cd59 --- /dev/null +++ b/chrome/skin/tor-circuit-line.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="15" height="40"> + <g stroke="#9a9a9a" stroke-width="3" fill="white"> + <line x1="50%" y1="0%" x2="50%" y2="100%"/> + <circle cx="50%" cy="50%" r="4.5"/> + </g> +</svg> diff --git a/chrome/skin/torbutton.svg b/chrome/skin/torbutton.svg index d0e4a69c..f39e67b1 100644 --- a/chrome/skin/torbutton.svg +++ b/chrome/skin/torbutton.svg @@ -1,7 +1,7 @@ <?xml version="1.0" encoding="UTF-8"?> <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="context-fill" fill-opacity="context-fill-opacity"> - <path d="M7.06561268 5.02241519C6.77772045 5.2116121 5.67952408 5.90554501 5.6853992 5.90178938C5.35790364 6.11113858 5.09635335 6.28354515 4.86413018 6.44457064C4.45268439 6.72987059 4.15887546 6.96359333 3.97499388 7.15193679C2.95731966 8.16499644 2.66333288 8.97771922 2.77290903 10.3548433C2.86347409 11.8242645 4.01769529 13.1628244 5.73360996 13.7141752C6.42393225 13.9308094 7.08993386 14.0 8.24418607 14.0C9.69409954 14.0 11.010192 13.6175745 11.8475477 12.9475461C12.7611494 12.2214478 13.2954545 11.1244618 13.2954545 10.0058997C13.2954545 8.86286776 12.7876949 7.76058164 11.8769727 6.9600938C11.3838667 6.53505399 10.722397 6.11798563 9.75901067 5.60447735C9.08955454 5.26286683 8.4719792 4.75203246 8.02479915 4.11379651C7.77978416 4.4739196 7.45874047 4.78154253 7.06561268 5.02241519C7.06561268 5.02241519 7.06561268 5.02241519 7.06561268 5.02241519M13.1898674 5.45132743C14.5364638 6.63126844 15.2954545 8.28318584 15.2954545 10.0058997C15.2954545 11.7286136 14.4874967 13.4041 298 13.0919331 14.5132743C11.7943039 15.5516224 9.98251962 16.0 8.24418607 16.0C7.16690894 16.0 6.1875661 15.9528024 5.13477254 15.6224189C2.71089901 14.8436578 0.923598318 12.8613569 0.776696891 10.4778761C0.629795465 8.63716814 1.07049974 7.22123894 2.56399758 5.73451327C3.32298828 4.95575221 4.88993683 4.05899705 5.96721396 3.35103245C6.50585253 3.02064897 7.06897466 2.02949853 5.99169753 0.16519174C5.99169753 0.16519174 6.21204967 0.0 6.21204967 0.0C6.21204967 0.0 9.41939748 1.27433628 9.41939748 1.27433628C8.97869321 2.64306785 10.2518389 3.61061947 10.6680596 3.82300885C11.5984353 4.31858407 12.4798439 4.83775811 13.1898674 5.45132743C13.1898674 5.45132743 13.1898674 5.45132743 13.1898674 5.45132743" /> - <path d="M8.27272727 5.0C8.49625435 5.67889606 9.03172133 6.21869701 9.63636041 6.5268042C10.3279607 6.89485621 10.8036714 7.19446079 11.1684763 7.5087455C11.8759239 8.12902347 12.2727273 8.98864463 12.2727273 9.88278877C12.2727273 10.7655864 11.852758 11.6266312 11.1353943 12.1959748C10.4876507 12.713565 9.5005326 13.0 8.42423809 13.0C8.37244863 13.0 8.32197458 12.9998006 8.27272727 12.9993871C8.27272727 12.9993871 8.27272727 5.0 8.27272727 5.0C8.27272727 5.0 8.27272727 5.0 8.27272727 5.0" /> + <path d="M7.06561268 5.02241519C6.77772045 5.2116121 5.67952408 5.90554501 5.6853992 5.90178938C5.35790364 6.11113858 5.09635335 6.28354515 4.86413018 6.44457064C4.45268439 6.72987059 4.15887546 6.96359333 3.97499388 7.15193679C2.95731966 8.16499644 2.66333288 8.97771922 2.77290903 10.3548433C2.86347409 11.8242645 4.01769529 13.1628244 5.73360996 13.7141752C6.42393225 13.9308094 7.08993386 14.0 8.24418607 14.0C9.69409954 14.0 11.010192 13.6175745 11.8475477 12.9475461C12.7611494 12.2214478 13.2954545 11.1244618 13.2954545 10.0058997C13.2954545 8.86286776 12.7876949 7.76058164 11.8769727 6.9600938C11.3838667 6.53505399 10.722397 6.11798563 9.75901067 5.60447735C9.08955454 5.26286683 8.4719792 4.75203246 8.02479915 4.11379651C7.77978416 4.4739196 7.45874047 4.78154253 7.06561268 5.02241519C7.06561268 5.02241519 7.06561268 5.02241519 7.06561268 5.02241519M13.1898674 5.45132743C14.5364638 6.63126844 15.2954545 8.28318584 15.2954545 10.0058997C15.2954545 11.7286136 14.4874967 13.4041 298 13.0919331 14.5132743C11.7943039 15.5516224 9.98251962 16.0 8.24418607 16.0C7.16690894 16.0 6.1875661 15.9528024 5.13477254 15.6224189C2.71089901 14.8436578 0.923598318 12.8613569 0.776696891 10.4778761C0.629795465 8.63716814 1.07049974 7.22123894 2.56399758 5.73451327C3.32298828 4.95575221 4.88993683 4.05899705 5.96721396 3.35103245C6.50585253 3.02064897 7.06897466 2.02949853 5.99169753 0.16519174C5.99169753 0.16519174 6.21204967 0.0 6.21204967 0.0C6.21204967 0.0 9.41939748 1.27433628 9.41939748 1.27433628C8.97869321 2.64306785 10.2518389 3.61061947 10.6680596 3.82300885C11.5984353 4.31858407 12.4798439 4.83775811 13.1898674 5.45132743C13.1898674 5.45132743 13.1898674 5.45132743 13.1898674 5.45132743" fill="context-fill" fill-opacity="context-fill-opacity"/> + <path d="M8.27272727 5.0C8.49625435 5.67889606 9.03172133 6.21869701 9.63636041 6.5268042C10.3279607 6.89485621 10.8036714 7.19446079 11.1684763 7.5087455C11.8759239 8.12902347 12.2727273 8.98864463 12.2727273 9.88278877C12.2727273 10.7655864 11.852758 11.6266312 11.1353943 12.1959748C10.4876507 12.713565 9.5005326 13.0 8.42423809 13.0C8.37244863 13.0 8.32197458 12.9998006 8.27272727 12.9993871C8.27272727 12.9993871 8.27272727 5.0 8.27272727 5.0C8.27272727 5.0 8.27272727 5.0 8.27272727 5.0" fill="context-fill" fill-opacity="context-fill-opacity"/> </g> </svg>