mirror of
https://github.com/gorhill/uBlock.git
synced 2024-09-14 23:12:28 +02:00
Fine tune power button; fix no-popups switch visual regression
This commit is contained in:
Raymond Hill
parent
c56607fe27
commit
42dedfbd90
@ -75,6 +75,7 @@ hr {
|
||||
margin: 0 var(--popup-gap-thin);
|
||||
padding: 0;
|
||||
stroke: none;
|
||||
stroke-width: 64;
|
||||
}
|
||||
body.off #switch {
|
||||
fill: var(--default-surface);
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
--light-gray-60: #afafba;
|
||||
--light-gray-70: #9f9fad;
|
||||
--light-gray-90: #80808f;
|
||||
--red-70-a80: #c50042cc;
|
||||
--red-60: #e22850;
|
||||
--violet-70: #592acb;
|
||||
--violet-80: #45278d;
|
||||
--yellow-30: #ffd567;
|
||||
@ -143,7 +143,7 @@
|
||||
--bg-popup-cell-block: hsla(0, 50%, 80%, 1);
|
||||
--bg-popup-cell-block-own: hsla(0, 100%, 40%, 1);
|
||||
--bg-popup-cell-label-mixed: hsla(45, 100%, 38%, 1);
|
||||
--popup-icon-x-ink: var(--red-70-a80);
|
||||
--popup-icon-x-ink: var(--red-60);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -24,7 +24,7 @@ License - https://github.com/FortAwesome/Font-Awesome/tree/a8386aae19e200ddb0f68
|
||||
|
||||
-->
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<symbol id="angle-up" viewBox="0 0 998 582"><path d="m 998,499 q 0,13 -10,23 l -50,50 q -10,10 -23,10 -13,0 -23,-10 L 499,179 106,572 Q 96,582 83,582 70,582 60,572 L 10,522 Q 0,512 0,499 0,486 10,476 L 476,10 q 10,-10 23,-10 13,0 23,10 l 466,466 q 10,10 10,23 z"/></symbol>
|
||||
<symbol id="bar-chart" viewBox="0 0 2048 1536"><path d="m 640,768 0,512 -256,0 0,-512 256,0 z m 384,-512 0,1024 -256,0 0,-1024 256,0 z m 1024,1152 0,128 L 0,1536 0,0 l 128,0 0,1408 1920,0 z m -640,-896 0,768 -256,0 0,-768 256,0 z m 384,-384 0,1152 -256,0 0,-1152 256,0 z"/></symbol>
|
||||
@ -57,7 +57,7 @@ License - https://github.com/FortAwesome/Font-Awesome/tree/a8386aae19e200ddb0f68
|
||||
<symbol id="pause-circle-o" viewBox="0 0 1536 1536"><path d="M 768,0 Q 977,0 1153.5,103 1330,206 1433,382.5 1536,559 1536,768 1536,977 1433,1153.5 1330,1330 1153.5,1433 977,1536 768,1536 559,1536 382.5,1433 206,1330 103,1153.5 0,977 0,768 0,559 103,382.5 206,206 382.5,103 559,0 768,0 Z m 0,1312 q 148,0 273,-73 125,-73 198,-198 73,-125 73,-273 0,-148 -73,-273 -73,-125 -198,-198 -125,-73 -273,-73 -148,0 -273,73 -125,73 -198,198 -73,125 -73,273 0,148 73,273 73,125 198,198 125,73 273,73 z m 96,-224 q -14,0 -23,-9 -9,-9 -9,-23 l 0,-576 q 0,-14 9,-23 9,-9 23,-9 l 192,0 q 14,0 23,9 9,9 9,23 l 0,576 q 0,14 -9,23 -9,9 -23,9 l -192,0 z m -384,0 q -14,0 -23,-9 -9,-9 -9,-23 l 0,-576 q 0,-14 9,-23 9,-9 23,-9 l 192,0 q 14,0 23,9 9,9 9,23 l 0,576 q 0,14 -9,23 -9,9 -23,9 l -192,0 z"/></symbol>
|
||||
<symbol id="play-circle-o" viewBox="0 0 1536 1536"><path d="m 1184,768 q 0,37 -32,55 l -544,320 q -15,9 -32,9 -16,0 -32,-8 -32,-19 -32,-56 l 0,-640 q 0,-37 32,-56 33,-18 64,1 l 544,320 q 32,18 32,55 z m 128,0 q 0,-148 -73,-273 -73,-125 -198,-198 -125,-73 -273,-73 -148,0 -273,73 -125,73 -198,198 -73,125 -73,273 0,148 73,273 73,125 198,198 125,73 273,73 148,0 273,-73 125,-73 198,-198 73,-125 73,-273 z m 224,0 q 0,209 -103,385.5 Q 1330,1330 1153.5,1433 977,1536 768,1536 559,1536 382.5,1433 206,1330 103,1153.5 0,977 0,768 0,559 103,382.5 206,206 382.5,103 559,0 768,0 977,0 1153.5,103 1330,206 1433,382.5 1536,559 1536,768 Z"/></symbol>
|
||||
<symbol id="plus" viewBox="0 0 1408 1408"><path d="m 1408,608 0,192 q 0,40 -28,68 -28,28 -68,28 l -416,0 0,416 q 0,40 -28,68 -28,28 -68,28 l -192,0 q -40,0 -68,-28 -28,-28 -28,-68 l 0,-416 -416,0 Q 56,896 28,868 0,840 0,800 L 0,608 q 0,-40 28,-68 28,-28 68,-28 l 416,0 0,-416 Q 512,56 540,28 568,0 608,0 l 192,0 q 40,0 68,28 28,28 28,68 l 0,416 416,0 q 40,0 68,28 28,28 28,68 z"/></symbol>
|
||||
<symbol id="power-off" viewBox="0 0 1568 1696"><path d="m 1552,912 q 0,156 -61,298 -61,142 -164,245 -103,103 -245,164 -142,61 -298,61 -156,0 -298,-61 Q 344,1558 241,1455 138,1352 77,1210 16,1068 16,912 16,730 96.5,569 177,408 323,299 q 43,-32 95.5,-25 52.5,7 83.5,50 32,42 24.5,94.5 Q 519,471 477,503 379,577 325.5,684 272,791 272,912 q 0,104 40.5,198.5 40.5,94.5 109.5,163.5 69,69 163.5,109.5 94.5,40.5 198.5,40.5 104,0 198.5,-40.5 Q 1077,1343 1146,1274 1215,1205 1255.5,1110.5 1296,1016 1296,912 1296,791 1242.5,684 1189,577 1091,503 1049,471 1041.5,418.5 1034,366 1066,324 q 31,-43 84,-50 53,-7 95,25 146,109 226.5,270 80.5,161 80.5,343 z M 912,144 v 640 q 0,52 -38,90 -38,38 -90,38 -52,0 -90,-38 -38,-38 -38,-90 V 144 q 0,-52 38,-90 38,-38 90,-38 52,0 90,38 38,38 38,90 z" style="stroke-width:32"/></symbol>
|
||||
<symbol id="power-off" viewBox="0 0 1536 1664"><path d="m 1536,896 q 0,156 -61,298 -61,142 -164,245 -103,103 -245,164 -142,61 -298,61 -156,0 -298,-61 Q 328,1542 225,1439 122,1336 61,1194 0,1052 0,896 0,714 80.5,553 161,392 307,283 q 43,-32 95.5,-25 52.5,7 83.5,50 32,42 24.5,94.5 Q 503,455 461,487 363,561 309.5,668 256,775 256,896 q 0,104 40.5,198.5 40.5,94.5 109.5,163.5 69,69 163.5,109.5 94.5,40.5 198.5,40.5 104,0 198.5,-40.5 Q 1061,1327 1130,1258 1199,1189 1239.5,1094.5 1280,1000 1280,896 1280,775 1226.5,668 1173,561 1075,487 1033,455 1025.5,402.5 1018,350 1050,308 q 31,-43 84,-50 53,-7 95,25 146,109 226.5,270 80.5,161 80.5,343 z m -640,-768 0,640 q 0,52 -38,90 -38,38 -90,38 -52,0 -90,-38 -38,-38 -38,-90 l 0,-640 q 0,-52 38,-90 38,-38 90,-38 52,0 90,38 38,38 38,90 z"/></symbol>
|
||||
<symbol id="question-circle" viewBox="0 0 1536 1536"><path d="m 896,1248 v -192 q 0,-14 -9,-23 -9,-9 -23,-9 H 672 q -14,0 -23,9 -9,9 -9,23 v 192 q 0,14 9,23 9,9 23,9 h 192 q 14,0 23,-9 9,-9 9,-23 z m 256,-672 q 0,-88 -55.5,-163 Q 1041,338 958,297 875,256 788,256 q -243,0 -371,213 -15,24 8,42 l 132,100 q 7,6 19,6 16,0 25,-12 53,-68 86,-92 34,-24 86,-24 48,0 85.5,26 37.5,26 37.5,59 0,38 -20,61 -20,23 -68,45 -63,28 -115.5,86.5 Q 640,825 640,892 v 36 q 0,14 9,23 9,9 23,9 h 192 q 14,0 23,-9 9,-9 9,-23 0,-19 21.5,-49.5 Q 939,848 972,829 q 32,-18 49,-28.5 17,-10.5 46,-35 29,-24.5 44.5,-48 15.5,-23.5 28,-60.5 12.5,-37 12.5,-81 z m 384,192 q 0,209 -103,385.5 Q 1330,1330 1153.5,1433 977,1536 768,1536 559,1536 382.5,1433 206,1330 103,1153.5 0,977 0,768 0,559 103,382.5 206,206 382.5,103 559,0 768,0 977,0 1153.5,103 1330,206 1433,382.5 1536,559 1536,768 Z"/></symbol>
|
||||
<symbol id="refresh" viewBox="0 0 1536 1536"><path d="m 1511,928 q 0,5 -1,7 -64,268 -268,434.5 Q 1038,1536 764,1536 618,1536 481.5,1481 345,1426 238,1324 l -129,129 q -19,19 -45,19 -26,0 -45,-19 Q 0,1434 0,1408 L 0,960 q 0,-26 19,-45 19,-19 45,-19 l 448,0 q 26,0 45,19 19,19 19,45 0,26 -19,45 l -137,137 q 71,66 161,102 90,36 187,36 134,0 250,-65 116,-65 186,-179 11,-17 53,-117 8,-23 30,-23 l 192,0 q 13,0 22.5,9.5 9.5,9.5 9.5,22.5 z m 25,-800 0,448 q 0,26 -19,45 -19,19 -45,19 l -448,0 q -26,0 -45,-19 -19,-19 -19,-45 0,-26 19,-45 L 1117,393 Q 969,256 768,256 q -134,0 -250,65 -116,65 -186,179 -11,17 -53,117 -8,23 -30,23 L 50,640 Q 37,640 27.5,630.5 18,621 18,608 l 0,-7 Q 83,333 288,166.5 493,0 768,0 914,0 1052,55.5 1190,111 1297,212 L 1427,83 q 19,-19 45,-19 26,0 45,19 19,19 19,45 z"/></symbol>
|
||||
<symbol id="search" viewBox="0 0 1664 1664"><path d="M 1152,704 Q 1152,519 1020.5,387.5 889,256 704,256 519,256 387.5,387.5 256,519 256,704 256,889 387.5,1020.5 519,1152 704,1152 889,1152 1020.5,1020.5 1152,889 1152,704 Z m 512,832 q 0,52 -38,90 -38,38 -90,38 -54,0 -90,-38 L 1103,1284 Q 924,1408 704,1408 561,1408 430.5,1352.5 300,1297 205.5,1202.5 111,1108 55.5,977.5 0,847 0,704 0,561 55.5,430.5 111,300 205.5,205.5 300,111 430.5,55.5 561,0 704,0 q 143,0 273.5,55.5 130.5,55.5 225,150 94.5,94.5 150,225 55.5,130.5 55.5,273.5 0,220 -124,399 l 343,343 q 37,37 37,90 z"/></symbol>
|
||||
|
||||
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
@ -29,9 +29,10 @@ const faIconsInit = function(root) {
|
||||
if ( icon.firstChild === null || icon.firstChild.nodeType !== 3 ) {
|
||||
continue;
|
||||
}
|
||||
const name = icon.firstChild.nodeValue.trim();
|
||||
if ( name === '' ) { continue; }
|
||||
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
|
||||
const name = icon.firstChild.nodeValue;
|
||||
let file;
|
||||
if ( name.startsWith('ph-') ) {
|
||||
file = 'photon';
|
||||
|
||||
@ -397,6 +397,9 @@ const renderPrivacyExposure = function() {
|
||||
/******************************************************************************/
|
||||
|
||||
const updateHnSwitches = function() {
|
||||
uDom.nodeFromId('no-popups').classList.toggle(
|
||||
'on', popupData.noPopups === true
|
||||
);
|
||||
uDom.nodeFromId('no-large-media').classList.toggle(
|
||||
'on', popupData.noLargeMedia === true
|
||||
);
|
||||
@ -475,6 +478,11 @@ const renderPopup = function() {
|
||||
// Extra tools
|
||||
updateHnSwitches();
|
||||
|
||||
// Report popup count on badge
|
||||
total = popupData.popupBlockedCount;
|
||||
uDom.nodeFromSelector('#no-popups .fa-icon-badge')
|
||||
.textContent = total ? Math.min(total, 99).toLocaleString() : '';
|
||||
|
||||
// Report large media count on badge
|
||||
total = popupData.largeMediaCount;
|
||||
uDom.nodeFromSelector('#no-large-media .fa-icon-badge')
|
||||
|
||||
@ -20,7 +20,19 @@
|
||||
<span id="revertRules" class="fa-icon" data-i18n-title="popupTipRevertRules">eraser</span>
|
||||
</div>
|
||||
<div id="switch" role="button" aria-label tabindex="0" title>
|
||||
<span class="fa-icon">power-off</span>
|
||||
<span class="fa-icon"><!--
|
||||
Power button taken from Font Awesome v4.7.0 by Dave Gandy.
|
||||
Unlike other FA icons, the power button is inlined here so
|
||||
that we can use a clip-path in order to ensure that the stroke
|
||||
does not "bleed" outside the fill area.
|
||||
--><svg viewBox="0 0 1536 1664">
|
||||
<defs>
|
||||
<path id="power-off-path" d="m 1536,896 q 0,156 -61,298 -61,142 -164,245 -103,103 -245,164 -142,61 -298,61 -156,0 -298,-61 Q 328,1542 225,1439 122,1336 61,1194 0,1052 0,896 0,714 80.5,553 161,392 307,283 q 43,-32 95.5,-25 52.5,7 83.5,50 32,42 24.5,94.5 Q 503,455 461,487 363,561 309.5,668 256,775 256,896 q 0,104 40.5,198.5 40.5,94.5 109.5,163.5 69,69 163.5,109.5 94.5,40.5 198.5,40.5 104,0 198.5,-40.5 Q 1061,1327 1130,1258 1199,1189 1239.5,1094.5 1280,1000 1280,896 1280,775 1226.5,668 1173,561 1075,487 1033,455 1025.5,402.5 1018,350 1050,308 q 31,-43 84,-50 53,-7 95,25 146,109 226.5,270 80.5,161 80.5,343 z m -640,-768 0,640 q 0,52 -38,90 -38,38 -90,38 -52,0 -90,-38 -38,-38 -38,-90 l 0,-640 q 0,-52 38,-90 38,-38 90,-38 52,0 90,38 38,38 38,90 z"/>
|
||||
<clipPath id="power-off-clip"><use href="#power-off-path"/></clipPath>
|
||||
</defs>
|
||||
<use href="#power-off-path" clip-path="url(#power-off-clip)"/>
|
||||
</svg><!--
|
||||
--></span>
|
||||
</div>
|
||||
<div class="rulesetTools">
|
||||
<span id="refresh" class="fa-icon">refresh</span>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user