mirror of
https://github.com/gorhill/uBlock.git
synced 2024-11-16 23:42:39 +01:00
Popup refinements, SVG icons, sizing improvements
This commit is contained in:
Chris
parent
4e4a44d87b
commit
53768aff22
@ -1,21 +1,23 @@
|
||||
body {
|
||||
background-color: white;
|
||||
background-color: #fafafa;
|
||||
color: #333;
|
||||
border: 0;
|
||||
float: left;
|
||||
font: 13px sans-serif;
|
||||
font: 13px Helvetica Neue, Helvetica, sans-serif;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
h2 {
|
||||
background-color: #eee;
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
margin: 1em 0 0.5em 0;
|
||||
padding: 2px 0;
|
||||
margin: 10px 0 5px 0;
|
||||
padding: 5px 2px 4px 2px;
|
||||
text-align: center;
|
||||
}
|
||||
h2:nth-of-type(1) {
|
||||
@ -33,7 +35,8 @@ a {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 4px;
|
||||
color: white;
|
||||
padding-top: 5px;
|
||||
color: #eee;
|
||||
font-weight: bold;
|
||||
background-color: #444;
|
||||
text-align: center;
|
||||
@ -44,15 +47,21 @@ a {
|
||||
font-weight: normal;
|
||||
margin-left: 1em;
|
||||
}
|
||||
html {
|
||||
font-size: 0;
|
||||
}
|
||||
html, body, #panes {
|
||||
text-align: right;
|
||||
}
|
||||
#panes {
|
||||
white-space: nowrap;
|
||||
}
|
||||
body[dir="ltr"] #panes {
|
||||
direction: rtl;
|
||||
}
|
||||
body[dir="rtl"] #panes {
|
||||
direction: ltr;
|
||||
}
|
||||
body, #panes {
|
||||
text-align: right; /* this helps the popup render better at "intermediate" widths */
|
||||
}
|
||||
#panes > div {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@ -64,25 +73,26 @@ body[dir="ltr"] #panes > div {
|
||||
body[dir="rtl"] #panes > div {
|
||||
direction: rtl;
|
||||
}
|
||||
#panes > div:nth-of-type(2) {
|
||||
#panes > #dfPane {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
width: 320px;
|
||||
border-right: 1px solid #444;
|
||||
}
|
||||
body[dir="ltr"] #panes > div:nth-of-type(2) {
|
||||
body[dir="ltr"] #panes > #dfPane {
|
||||
direction: rtl; /* scroll bar to the left */
|
||||
margin-right: 1px;
|
||||
}
|
||||
body[dir="rtl"] #panes > div:nth-of-type(2) {
|
||||
body[dir="rtl"] #panes > #dfPane {
|
||||
direction: ltr; /* scroll bar to the right */
|
||||
margin-left: 1px;
|
||||
}
|
||||
#panes:not(.dfEnabled) > div:nth-of-type(2) {
|
||||
#panes:not(.dfEnabled) > #dfPane {
|
||||
display: none;
|
||||
}
|
||||
#panes > div:nth-of-type(1) {
|
||||
#panes > #switchPane {
|
||||
box-sizing: border-box;
|
||||
min-width: 150px;
|
||||
padding: 0;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
@ -90,17 +100,17 @@ p {
|
||||
}
|
||||
#switch {
|
||||
margin: 8px 0;
|
||||
font-size:0;
|
||||
}
|
||||
#switch .fa {
|
||||
color: #0046ff;
|
||||
#switch .icon {
|
||||
color: dodgerblue;
|
||||
cursor: pointer;
|
||||
font-size: 96px;
|
||||
margin: 0;
|
||||
font-size:96px;
|
||||
}
|
||||
#switch .fa:hover {
|
||||
#switch .icon:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
body.off #switch .fa {
|
||||
body.off #switch .icon {
|
||||
color: #ccc;
|
||||
}
|
||||
#switch-hint {
|
||||
@ -112,54 +122,26 @@ body.off #switch .fa {
|
||||
}
|
||||
.statName {
|
||||
color: #666;
|
||||
margin: 1em 0.2em 0.2em 0.2em;
|
||||
margin: 0;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.statValue {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
margin: 4px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.tool {
|
||||
color: #aaa;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
font-size: 14px;
|
||||
unicode-bidi: embed;
|
||||
}
|
||||
.tool.enabled {
|
||||
display: inline;
|
||||
.tool:not(.enabled) {
|
||||
display: none;
|
||||
}
|
||||
.tool:hover {
|
||||
color: #444;
|
||||
}
|
||||
#extraTools {
|
||||
background-color: #eee;
|
||||
border: 0;
|
||||
color: #aaa;
|
||||
font-weight: normal;
|
||||
margin: 1em 0 0 0;
|
||||
padding: 4px 0 2px 0;
|
||||
text-align: center;
|
||||
}
|
||||
#extraTools > span {
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
margin: 0 0.5em;
|
||||
position: relative;
|
||||
}
|
||||
#extraTools > span.on > span {
|
||||
color: #e00;
|
||||
font-size: 20px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
#extraTools > span.on > span:after {
|
||||
content: '\2715';
|
||||
}
|
||||
|
||||
body.advancedUser h2 {
|
||||
cursor: pointer;
|
||||
@ -173,26 +155,26 @@ body.advancedUser #panes.dfEnabled h2:before {
|
||||
}
|
||||
|
||||
#refresh {
|
||||
background-color: #ffe;
|
||||
border: 1px solid #eec;
|
||||
background-color: #444;
|
||||
border-radius: 4px;
|
||||
bottom: 4px;
|
||||
color: #888;
|
||||
color: #dedede;
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
font-size: 40px;
|
||||
left: 4px;
|
||||
line-height: 40px;
|
||||
padding: 4px 8px;
|
||||
height: 35px;
|
||||
font-size: 35px;
|
||||
padding: 8px;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
body.dirty #refresh {
|
||||
display: block;
|
||||
}
|
||||
body.dirty #refresh:hover {
|
||||
color: black;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#firewallContainer {
|
||||
@ -219,8 +201,8 @@ body.dirty #refresh:hover {
|
||||
#firewallContainer > div > span {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
color: #000;
|
||||
display: inline-block;
|
||||
height: 22px;
|
||||
@ -354,15 +336,15 @@ body.dirty #refresh:hover {
|
||||
}
|
||||
|
||||
#saveRules {
|
||||
background-color: #ffe;
|
||||
border: 1px solid #eec;
|
||||
opacity: 0.7;
|
||||
background-color: #444;
|
||||
border-radius: 4px;
|
||||
color: #888;
|
||||
color: rgb(255, 213, 123);
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
padding: 0.1em 0.4em;
|
||||
font-size: 35px;
|
||||
height: 35px;
|
||||
padding: 8px;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
}
|
||||
@ -370,5 +352,5 @@ body.dirty #refresh:hover {
|
||||
display: block;
|
||||
}
|
||||
#firewallContainer.dirty ~ #saveRules:hover {
|
||||
color: black;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -40,9 +40,9 @@ var dfPaneVisibleStored = vAPI.localStorage.getItem('popupFirewallPane') === 'tr
|
||||
// dictate the height of the popup. The right pane dictates the height
|
||||
// of the popup, and the left pane will have a scrollbar if ever its
|
||||
// height is more than what is available.
|
||||
document.querySelector('#panes > div:nth-of-type(2)').style.setProperty(
|
||||
document.getElementById('dfPane').style.setProperty(
|
||||
'height',
|
||||
document.querySelector('#panes > div:nth-of-type(1)').offsetHeight + 'px'
|
||||
document.getElementById('switchPane').offsetHeight + 'px'
|
||||
);
|
||||
|
||||
// The padlock must be manually positioned:
|
||||
@ -429,10 +429,6 @@ var renderPopup = function() {
|
||||
// This will collate all domains, touched or not
|
||||
renderPrivacyExposure();
|
||||
|
||||
// Extra tools
|
||||
uDom('#doBlockAllPopups').toggleClass('on', popupData.doBlockAllPopups === true);
|
||||
uDom('#dontBlockDoc').toggleClass('on', popupData.dontBlockDoc === true);
|
||||
|
||||
// https://github.com/gorhill/uBlock/issues/470
|
||||
// This must be done here, to be sure the popup is resized properly
|
||||
var dfPaneVisible = popupData.dfEnabled && popupData.advancedUserEnabled;
|
||||
@ -655,23 +651,6 @@ var saveFirewallRules = function() {
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
var toggleHostnameSwitch = function() {
|
||||
var elem = uDom(this);
|
||||
var switchName = elem.attr('id');
|
||||
if ( !switchName ) {
|
||||
return;
|
||||
}
|
||||
elem.toggleClass('on');
|
||||
messager.send({
|
||||
what: 'toggleHostnameSwitch',
|
||||
name: switchName,
|
||||
hostname: popupData.pageHostname,
|
||||
state: elem.hasClass('on')
|
||||
});
|
||||
};
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
// Poll for changes.
|
||||
//
|
||||
// I couldn't find a better way to be notified of changes which can affect
|
||||
@ -754,7 +733,6 @@ uDom.onLoad(function () {
|
||||
uDom('a[href]').on('click', gotoURL);
|
||||
uDom('h2').on('click', toggleFirewallPane);
|
||||
uDom('#refresh').on('click', reloadTab);
|
||||
uDom('.hnSwitch').on('click', toggleHostnameSwitch);
|
||||
uDom('#saveRules').on('click', saveFirewallRules);
|
||||
uDom('[data-i18n="popupAnyRulePrompt"]').on('click', toggleMinimize);
|
||||
});
|
||||
|
||||
@ -12,26 +12,21 @@
|
||||
<body>
|
||||
<a href="dashboard.html" target="_blank" id="gotoPrefs" title="popupTipDashboard"><span id="appname"> </span><span id="version"> </span></a>
|
||||
<div id="panes">
|
||||
<div>
|
||||
<p id="switch" data-i18n-tip="popupPowerSwitchInfo"><span class="fa"></span></p>
|
||||
<p id="switch-hint"></p>
|
||||
<div id="switchPane">
|
||||
<p id="switch" data-i18n-tip="popupPowerSwitchInfo"><svg class="icon icon-power"><use xlink:href="img/icons.svg#icon-power"></use></svg></p>
|
||||
<h2 id="dfToggler" data-i18n="popupBlockedRequestPrompt"> </h2>
|
||||
<p class="statName">
|
||||
<span data-i18n="popupBlockedOnThisPagePrompt"> </span> 
|
||||
<span id="gotoPick" class="fa tool" data-i18n-tip="popupTipPicker" data-tip-anchor="top"></span> 
|
||||
<a href="#" target="_blank" id="gotoLog" class="fa tool" data-i18n-tip="popupTipLog" data-tip-anchor="top"></a>
|
||||
<span id="gotoPick" class="tool" data-i18n-tip="popupTipPicker" data-tip-anchor="top"><svg class="icon icon-eyedropper"><use xlink:href="img/icons.svg#icon-eyedropper"></use></svg></span> 
|
||||
<a href="#" target="_blank" id="gotoLog" class="tool" data-i18n-tip="popupTipLog" data-tip-anchor="top"><svg class="icon icon-view"><use xlink:href="img/icons.svg#icon-view"></use></svg></a>
|
||||
</p>
|
||||
<p class="statValue" id="page-blocked">?</p>
|
||||
<p class="statName" data-i18n="popupBlockedSinceInstallPrompt"> </p>
|
||||
<p class="statValue" id="total-blocked">?</p>
|
||||
<h2 data-i18n="popupHitDomainCountPrompt"> </h2>
|
||||
<p class="statValue" id="popupHitDomainCount"> </p>
|
||||
<div id="extraTools">
|
||||
<span id="doBlockAllPopups" class="hnSwitch fa" data-i18n-tip="popupTipNoPopups" data-tip-anchor="topcenter"><span></span></span>
|
||||
<span id="dontBlockDoc" class="hnSwitch fa" data-i18n-tip="popupTipNoStrictBlocking" data-tip-anchor="topcenter"><span></span></span>
|
||||
</div>
|
||||
<div id="refresh" class="fa"></div>
|
||||
</div><!-- DO NOT REMOVE --><div>
|
||||
<div id="refresh"><svg class="icon icon-reload"><use xlink:href="img/icons.svg#icon-reload"></use></svg></div>
|
||||
</div><!--no spaces--><div id="dfPane">
|
||||
<div id="firewallContainer">
|
||||
<div><span data-i18n="popupAnyRulePrompt"></span><span data-src="/" data-des="*" data-type="*"> </span><span data-src="." data-des="*" data-type="*"> </span></div>
|
||||
<div><span data-i18n="popupImageRulePrompt"></span><span data-src="/" data-des="*" data-type="image"> </span><span data-src="." data-des="*" data-type="image"> </span></div>
|
||||
@ -40,7 +35,7 @@
|
||||
<div><span data-i18n="popup1pScriptRulePrompt"></span><span data-src="/" data-des="*" data-type="1p-script"> </span><span data-src="." data-des="*" data-type="1p-script"> </span></div>
|
||||
<div><span data-i18n="popup3pScriptRulePrompt"></span><span data-src="/" data-des="*" data-type="3p-script"> </span><span data-src="." data-des="*" data-type="3p-script"> </span></div>
|
||||
<div><span data-i18n="popup3pFrameRulePrompt"></span><span data-src="/" data-des="*" data-type="3p-frame"> </span><span data-src="." data-des="*" data-type="3p-frame"> </span></div>
|
||||
</div><div id="saveRules" class="fa"></div>
|
||||
</div><div id="saveRules"><svg class="icon icon-lock"><use xlink:href="img/icons.svg#icon-lock"></use></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user