commit 9156c5564a5da6bd8e17eab094d655034e4135b6 Author: Arthur Edelstein <arthuredelstein@gmail.com> Date: Thu Sep 13 02:18:41 2018 -0700 Bug 27478: Torbutton icons for dark theme --- src/chrome/skin/torbutton-dark-update-needed.svg | 13 +++++++++++++ src/chrome/skin/torbutton-dark.svg | 9 +++++++++ src/chrome/skin/torbutton.css | 15 +++++++++++++++ 3 files changed, 37 insertions(+) diff --git a/src/chrome/skin/torbutton-dark-update-needed.svg b/src/chrome/skin/torbutton-dark-update-needed.svg new file mode 100644 index 00000000..44df4a00 --- /dev/null +++ b/src/chrome/skin/torbutton-dark-update-needed.svg @@ -0,0 +1,13 @@ +<?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 id="Icon---Tor-Update---Grey10" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="Tor-Button-Icon" fill="#F9F9FA" fill-opacity="0.8"> + <path d="M7.06561268,5.02241519 C6.77772045,5.2116121 5.67952408,5.90554501 5.6853992,5.90178938 C5.35790364,6.11113858 5.09635335,6.28354515 4.86413018,6.44457064 C4.45268439,6.72987059 4.15887546,6.96359333 3.97499388,7.15193679 C2.95731966,8.16499644 2.66333288,8.97771922 2.77290903,10.3548433 C2.86347409,11.8242645 4.01769529,13.1628244 5.73360996,13.7141752 C6.42393225,13.9308094 7.08993386,14 8.24418607,14 C9.69409954,14 11.010192,13.6175745 11.8475477,12.9475461 C12.7611494,12.2214478 13.2954545,11.1244618 13.2954545,10.0058997 C13.2954545,8.86286776 12.7876949,7.76058164 11.8769727,6.9600938 C11.3838667,6.53505399 10.722397,6.11798563 9.75901067,5.60447735 C9.08955454,5.26286683 8.4719792,4.75203246 8.02479915,4.11379651 C7.77978416,4.4739196 7.45874047,4.78154253 7.06561268,5.02241519 Z M13.1898674,5.45132743 C14.5364638,6.63126844 15.2954545,8.28318584 15.2954545,10.0058997 C15.2954545,11.7286136 14.4874967,13.4041298 13.0919331,14.5132743 C11.7943039,15.551622 4 9.98251962,16 8.24418607,16 C7.16690894,16 6.1875661,15.9528024 5.13477254,15.6224189 C2.71089901,14.8436578 0.923598318,12.8613569 0.776696891,10.4778761 C0.629795465,8.63716814 1.07049974,7.22123894 2.56399758,5.73451327 C3.32298828,4.95575221 4.88993683,4.05899705 5.96721396,3.35103245 C6.50585253,3.02064897 7.06897466,2.02949853 5.99169753,0.16519174 L6.21204967,0 L9.41939748,1.27433628 C8.97869321,2.64306785 10.2518389,3.61061947 10.6680596,3.82300885 C11.5984353,4.31858407 12.4798439,4.83775811 13.1898674,5.45132743 Z" id="Border" fill-rule="nonzero"></path> + <path d="M9.63636041,6.5268042 C10.3279607,6.89485621 10.8036714,7.19446079 11.1684763,7.5087455 C11.8759239,8.12902347 12.2727273,8.98864463 12.2727273,9.88278877 C12.2727273,10.7655864 11.852758,11.6266312 11.1353943,12.1959748 C10.4876507,12.713565 9.5005326,13 8.42423809,13 C8.37244863,13 8.32197458,12.9998006 8.27272727,12.9993871 L8.27272727,5 C8.49625435,5.67889606 9.03172133,6.21869701 9.63636041,6.5268042 Z" id="Half-Content"></path> + </g> + <g id="!" transform="translate(0.000000, 6.100000)"> + <polygon id="Triangle-Copy" fill="#414141" points="5 0.714285714 9.28571429 9.28571429 0.714285714 9.28571429"></polygon> + <path d="M9.78067261,7.86561722 C10.0020131,8.30856238 9.97819173,8.83453755 9.71771774,9.25566142 C9.45724375,9.6767853 8.9972698,9.93299087 8.50210118,9.93276007 L1.42710118,9.93276007 C0.932880889,9.93225088 0.474029854,9.67633171 0.213899592,9.2561101 C-0.0462306709,8.83588849 -0.0706843715,8.31106384 0.149244037,7.86847436 L3.68710118,0.789902932 C3.92904842,0.305811394 4.42377158,0 4.96495832,0 C5.50614506,0 6.00086822,0.305811394 6.24281547,0.789902932 L9.78067261,7.86561722 Z M4.25067261,2.78990293 L4.25067261,5.64704579 C4.25067261,6.0415349 4.57046922,6.3613315 4.96495832,6.3613315 C5.35944743,6.3613315 5.67924404,6.0415349 5.67924404,5.64704579 L5.67924404,2.78990293 C5.67924404,2.39541382 5.35944743,2.07561722 4.96495832,2.07561722 C4.57046922,2.07561722 4.25067261,2.39541382 4.25067261,2.78990293 Z M4.96495832,8.68276007 C5.45806971,8.68276007 5.85781547,8.28301432 5.85781547,7.78990293 C5.85781547,7.29679155 5.45806971,6.89704579 4.96495832,6.89704579 C4.47 184694,6.89704579 4.07210118,7.29679155 4.07210118,7.78990293 C4.07210118,8.28301432 4.47184694,8.68276007 4.96495832,8.68276007 Z" id="Shape-Copy" fill="#FFE900" fill-rule="nonzero"></path> + </g> + </g> +</svg> diff --git a/src/chrome/skin/torbutton-dark.svg b/src/chrome/skin/torbutton-dark.svg new file mode 100644 index 00000000..55d633e8 --- /dev/null +++ b/src/chrome/skin/torbutton-dark.svg @@ -0,0 +1,9 @@ +<?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 id="Icon---Tor---Grey10" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.8"> + <g id="Tor-Button-Icon" fill="#F9F9FA"> + <path d="M7.06561268,5.02241519 C6.77772045,5.2116121 5.67952408,5.90554501 5.6853992,5.90178938 C5.35790364,6.11113858 5.09635335,6.28354515 4.86413018,6.44457064 C4.45268439,6.72987059 4.15887546,6.96359333 3.97499388,7.15193679 C2.95731966,8.16499644 2.66333288,8.97771922 2.77290903,10.3548433 C2.86347409,11.8242645 4.01769529,13.1628244 5.73360996,13.7141752 C6.42393225,13.9308094 7.08993386,14 8.24418607,14 C9.69409954,14 11.010192,13.6175745 11.8475477,12.9475461 C12.7611494,12.2214478 13.2954545,11.1244618 13.2954545,10.0058997 C13.2954545,8.86286776 12.7876949,7.76058164 11.8769727,6.9600938 C11.3838667,6.53505399 10.722397,6.11798563 9.75901067,5.60447735 C9.08955454,5.26286683 8.4719792,4.75203246 8.02479915,4.11379651 C7.77978416,4.4739196 7.45874047,4.78154253 7.06561268,5.02241519 Z M13.1898674,5.45132743 C14.5364638,6.63126844 15.2954545,8.28318584 15.2954545,10.0058997 C15.2954545,11.7286136 14.4874967,13.4041298 13.0919331,14.5132743 C11.7943039,15.551622 4 9.98251962,16 8.24418607,16 C7.16690894,16 6.1875661,15.9528024 5.13477254,15.6224189 C2.71089901,14.8436578 0.923598318,12.8613569 0.776696891,10.4778761 C0.629795465,8.63716814 1.07049974,7.22123894 2.56399758,5.73451327 C3.32298828,4.95575221 4.88993683,4.05899705 5.96721396,3.35103245 C6.50585253,3.02064897 7.06897466,2.02949853 5.99169753,0.16519174 L6.21204967,0 L9.41939748,1.27433628 C8.97869321,2.64306785 10.2518389,3.61061947 10.6680596,3.82300885 C11.5984353,4.31858407 12.4798439,4.83775811 13.1898674,5.45132743 Z" id="Border" fill-rule="nonzero"></path> + <path d="M8.27272727,5 C8.49625435,5.67889606 9.03172133,6.21869701 9.63636041,6.5268042 C10.3279607,6.89485621 10.8036714,7.19446079 11.1684763,7.5087455 C11.8759239,8.12902347 12.2727273,8.98864463 12.2727273,9.88278877 C12.2727273,10.7655864 11.852758,11.6266312 11.1353943,12.1959748 C10.4876507,12.713565 9.5005326,13 8.42423809,13 C8.37244863,13 8.32197458,12.9998006 8.27272727,12.9993871 L8.27272727,5 Z" id="Half-Content"></path> + </g> + </g> +</svg> diff --git a/src/chrome/skin/torbutton.css b/src/chrome/skin/torbutton.css index cf90ae6d..928ba93d 100644 --- a/src/chrome/skin/torbutton.css +++ b/src/chrome/skin/torbutton.css @@ -6,10 +6,21 @@ list-style-image: url("chrome://torbutton/skin/torbutton.svg"); } } +@keyframes blink-update-dark { + 0% { + list-style-image: url("chrome://torbutton/skin/torbutton-dark-update-needed.svg"); + } + 100% { + list-style-image: url("chrome://torbutton/skin/torbutton-dark.svg"); + } +} #torbutton-button { list-style-image: url("chrome://torbutton/skin/torbutton.svg"); } +toolbar[brighttext] #torbutton-button { + list-style-image: url("chrome://torbutton/skin/torbutton-dark.svg"); +} #torbutton-button[tbstatus="on"] { opacity: 1.0; } @@ -20,6 +31,10 @@ opacity: 1.0; animation: blink-update normal 1s infinite ease-in-out; } +toolbar[brighttext] #torbutton-button[tbUpdateNeeded="true"] { + opacity: 1.0; + animation: blink-update-dark normal 1s infinite ease-in-out; +} #torbutton-button-tb { list-style-image: url("chrome://torbutton/skin/torbutton.svg");