mirror of https://github.com/gorhill/uBlock.git
Re-design document-blocked page as per feedback
Related issue: - https://github.com/uBlockOrigin/uBlock-issues/issues/1005 There is probably more work to do regarding the shown URL -- it might be better to truncate it on small screen display since it can be quite long sometimes.
This commit is contained in:
Raymond Hill
parent
a1ef8b3ec8
commit
c7d196d472
|
|
@ -34,6 +34,19 @@
|
|||
src: url('fonts/fontawesome-webfont.ttf') format('truetype');
|
||||
}
|
||||
|
||||
/**
|
||||
Common uBO spacing.
|
||||
Ref: https://github.com/uBlockOrigin/uBlock-issues/issues/1005
|
||||
*/
|
||||
:root {
|
||||
--default-gap-xlarge: 32px;
|
||||
--default-gap-large: 24px;
|
||||
--default-gap: 16px;
|
||||
--default-gap-small: 12px;
|
||||
--default-gap-xsmall: 8px;
|
||||
--default-gap-xxsmall: 4px;
|
||||
}
|
||||
|
||||
/* Common uBO styles */
|
||||
body {
|
||||
background-color: var(--default-surface);
|
||||
|
|
@ -60,9 +73,10 @@ body {
|
|||
a {
|
||||
color: var(--link-ink);
|
||||
}
|
||||
code {
|
||||
background-color: var(--bg-code);
|
||||
padding: 0 0.25em;
|
||||
code, .code {
|
||||
background-color: var(--button-surface);
|
||||
font-family: monospace;
|
||||
padding: 4px;
|
||||
}
|
||||
hr {
|
||||
border: 0;
|
||||
|
|
@ -75,8 +89,10 @@ textarea {
|
|||
button {
|
||||
align-items: center;
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
border-radius: 5px;
|
||||
background-color: var(--button-surface);
|
||||
color: var(--button-ink);
|
||||
display: inline-flex;
|
||||
|
|
@ -86,8 +102,7 @@ button {
|
|||
letter-spacing: 0.5px;
|
||||
min-height: 36px;
|
||||
padding: 0 var(--font-size);
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
button.vflex {
|
||||
height: 100%;
|
||||
|
|
@ -117,6 +132,10 @@ button.important[disabled] {
|
|||
filter: var(--button-disabled-filter);
|
||||
pointer-events: none;
|
||||
}
|
||||
button.preferred {
|
||||
background-color: var(--button-preferred-surface);
|
||||
color: var(--button-preferred-ink);
|
||||
}
|
||||
button.iconifiable > .fa,
|
||||
button.iconifiable > .fa-icon {
|
||||
padding-left: 0;
|
||||
|
|
@ -183,6 +202,16 @@ label {
|
|||
stroke: var(--default-surface);
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 2px;
|
||||
}
|
||||
:root.desktop select {
|
||||
appearance: none;
|
||||
--webkit-appearance: none;
|
||||
background-color: var(--select-surface);
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
height: 0;
|
||||
|
|
|
|||
|
|
@ -19,46 +19,32 @@
|
|||
*/
|
||||
|
||||
body {
|
||||
padding: 0.5em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-height: 640px) {
|
||||
body {
|
||||
font-size: small;
|
||||
}
|
||||
}
|
||||
body > div {
|
||||
margin: 0 0 1em 0;
|
||||
margin: 0 0 var(--default-gap-large) 0;
|
||||
}
|
||||
body > div > p,
|
||||
body > div > div {
|
||||
margin: 4px 0;
|
||||
}
|
||||
body > div > p:first-child {
|
||||
margin: 1em 0 0 0;
|
||||
body > div > * {
|
||||
margin: 0 0 var(--default-gap-xsmall) 0;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
select {
|
||||
font: inherit;
|
||||
padding: 2px;
|
||||
}
|
||||
.code {
|
||||
background-color: var(--bg-code);
|
||||
font-family: monospace;
|
||||
line-height: 1;
|
||||
padding: 4px;
|
||||
font-size: 13px;
|
||||
word-break: break-all;
|
||||
}
|
||||
#warningSign {
|
||||
width: 100%;
|
||||
}
|
||||
#warningSign > a {
|
||||
fill: var(--large-icon-info-lvl-2);
|
||||
font-size: 10em;
|
||||
padding: 0;
|
||||
fill: var(--yellow-50);
|
||||
font-size: 96px;
|
||||
}
|
||||
#theURL {
|
||||
padding: 0;
|
||||
|
|
@ -77,7 +63,7 @@ select {
|
|||
color: var(--fg-0-60);
|
||||
cursor: pointer;
|
||||
fill: var(--fg-0-60);
|
||||
padding: 0.2em;
|
||||
padding: var(--default-gap-xxsmall);
|
||||
position: absolute;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
|
@ -103,8 +89,8 @@ body[dir="rtl"] #theURL > p > span {
|
|||
border-top: none;
|
||||
color: var(--fg-0-80);
|
||||
font-size: small;
|
||||
overflow-x: hidden;
|
||||
padding: 4px;
|
||||
overflow-x: auto;
|
||||
padding: var(--default-gap-xxsmall);
|
||||
text-align: initial;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
@ -126,8 +112,17 @@ body[dir="rtl"] #theURL > p > span {
|
|||
#whyex a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.proceedChoice {
|
||||
text-align: left;
|
||||
#proceed {
|
||||
margin-bottom: var(--default-gap);
|
||||
}
|
||||
:root.mobile .proceedButtons {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.proceedButtons > button {
|
||||
margin-inline-end: var(--default-gap);
|
||||
margin-block-end: var(--default-gap-xsmall);
|
||||
}
|
||||
|
||||
.filterList:first-child .filterListSeparator {
|
||||
|
|
@ -136,3 +131,8 @@ body[dir="rtl"] #theURL > p > span {
|
|||
.filterList .filterListSupport[href=""] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Small-screen devices */
|
||||
:root.mobile button {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
--blue-10: #80ebff;
|
||||
--blue-50: #0060df;
|
||||
--blue-60: #0250bb;
|
||||
--ink-20: #312a64;
|
||||
--ink-20: #312a65;
|
||||
--ink-50: #291d4f;
|
||||
--ink-80: #20123a;
|
||||
--ink-80-a4: #20123a0a;
|
||||
|
|
@ -96,11 +96,15 @@
|
|||
--button-disabled-filter: opacity(38%);
|
||||
--button-disabled-surface: var(--light-gray-30);
|
||||
--button-disabled-ink: var(--ink-20);
|
||||
--button-preferred-surface: var(--ink-20);
|
||||
--button-preferred-ink: white;
|
||||
|
||||
--checkbox-size: calc(var(--font-size) + 2px);
|
||||
--checkbox-ink: var(--light-gray-90);
|
||||
--checkbox-checked-ink: var(--ink-20);
|
||||
|
||||
--select-surface: white;
|
||||
|
||||
--bg-transient-notice: hsla(60, 100%, 95%, 1);
|
||||
|
||||
--dashboard-bar-shadow:
|
||||
|
|
|
|||
|
|
@ -17,36 +17,35 @@
|
|||
<div id="theURL" class="collapsed">
|
||||
<p class="code"></p>
|
||||
<ul id="parsed"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p data-i18n="docblockedPrompt2"></p>
|
||||
<p id="why" class="code"></p><!--
|
||||
--><p id="whyex" style="display: none;"><span data-i18n="docblockedFoundIn"></span> <span></span></p>
|
||||
<p id="why" class="code"></p>
|
||||
<p id="whyex" style="display: none;"><span data-i18n="docblockedFoundIn"></span> <span></span></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p><button id="back" data-i18n="docblockedBack" type="button"></button>
|
||||
<button id="bye" data-i18n="docblockedClose" type="button"></button></p>
|
||||
</div>
|
||||
<button id="back" class="preferred" data-i18n="docblockedBack" type="button"></button>
|
||||
<button id="bye" class="preferred" data-i18n="docblockedClose" type="button"></button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p id="proceed"></p>
|
||||
<p><button id="proceedTemporary" data-i18n="docblockedDisableTemporary" type="button"></button>
|
||||
<button id="proceedPermanent" data-i18n="docblockedDisablePermanent" type="button"></button></p>
|
||||
</div>
|
||||
<p class="proceedButtons">
|
||||
<button id="proceedTemporary" data-i18n="docblockedDisableTemporary" type="button"></button>
|
||||
<button id="proceedPermanent" data-i18n="docblockedDisablePermanent" type="button"></button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="templates" style="display: none;">
|
||||
<span class="proceed">
|
||||
<span></span>
|
||||
<span class="proceedChoice">
|
||||
<select>
|
||||
<option class="hn" value="" selected>
|
||||
<option class="dn" value="">
|
||||
</select>
|
||||
</span>
|
||||
<span class="proceedChoice code hn"></span>
|
||||
<select>
|
||||
<option class="hn" value="" selected>
|
||||
<option class="dn" value="">
|
||||
</select>
|
||||
<span></span>
|
||||
</span>
|
||||
<span class="filterList">
|
||||
|
|
|
|||
|
|
@ -84,16 +84,13 @@ let details = {};
|
|||
if ( matches === null ) { return; }
|
||||
const proceed = uDom('#templates .proceed').clone();
|
||||
proceed.descendants('span:nth-of-type(1)').text(matches[1]);
|
||||
proceed.descendants('span:nth-of-type(4)').text(matches[2]);
|
||||
|
||||
if ( details.hn === details.dn ) {
|
||||
proceed.descendants('span:nth-of-type(2)').remove();
|
||||
proceed.descendants('.hn').text(details.hn);
|
||||
} else {
|
||||
proceed.descendants('span:nth-of-type(3)').remove();
|
||||
proceed.descendants('span:nth-of-type(3)').text(matches[2]);
|
||||
if ( details.hn !== details.dn ) {
|
||||
proceed.descendants('.hn').text(details.hn).attr('value', details.hn);
|
||||
proceed.descendants('.dn').text(details.dn).attr('value', details.dn);
|
||||
} else {
|
||||
proceed.descendants('.hn').remove();
|
||||
}
|
||||
proceed.descendants('.dn').text(details.dn).attr('value', details.dn);
|
||||
|
||||
uDom('#proceed').append(proceed);
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in New Issue