1
0
mirror of https://github.com/gorhill/uBlock.git synced 2024-09-29 22:27:12 +02:00
uBlock/platform/mv3/extension/css/popup.css
Raymond Hill 28aee736a5
[mv3] Add support for removeparam= filter option
Consequently, AdGuard URL Tracking Protection (AUTP) has been
added to the set of available filter lists.

However, removeparam= equivalent DNR rules can only be enforced
when granting uBOL broad permissions. If broad permissions are
not granted, removeparam= equivalent DNR rules are ignored.

Exception removeparam= filters are not supported, and these are
present in AUTP and meant to unbreak some websites which are
known to break as a result of removing query parameters.

This is issue might be mitigated in the future by making the
conversion from filters to DNR rules more complicated but this
can never replace the accuracy of uBO's filtering engine being
able to fully enforce arbitrary exception removeparam= filters.

Also, it is not possible to translate regex-based removeparam=
values to DNR rules, so these are dropped at conversion time.

As with other filters to DNR rules conversion, the converter
coallesce many distinct removeparam= filters into fewer DNR
rules.
2022-09-29 19:51:33 -04:00

311 lines
7.1 KiB
CSS

/* External CSS values override */
.fa-icon.fa-icon-badged > .fa-icon-badge {
bottom: auto;
top: -20%;
}
/* Internal CSS values */
:root body {
overflow: hidden;
}
:root body,
:root.mobile body {
--font-size: 14px;
--popup-gap: var(--font-size);
--popup-gap-thin: calc(0.5 * var(--popup-gap));
--popup-gap-extra-thin: calc(0.25 * var(--popup-gap));
--popup-main-min-width: 18em;
--popup-firewall-min-width: 30em;
--popup-rule-cell-width: 5em;
font-size: var(--font-size);
line-height: 20px;
}
:root body.loading {
opacity: 0;
}
a {
color: var(--ink-1);
fill: var(--ink-1);
text-decoration: none;
}
:focus {
outline: 0;
}
#main {
align-self: flex-start;
max-width: 340px;
min-width: var(--popup-main-min-width);
}
:root.portrait #main {
align-self: inherit;
}
hr {
border: 0;
border-top: 1px solid var(--hr-ink);
margin: 0;
padding: 0;
}
#sticky {
background-color: var(--surface-1);
position: sticky;
top: 0;
z-index: 100;
}
#stickyTools {
align-items: stretch;
display: flex;
justify-content: space-between;
}
#switch {
color: var(--popup-power-ink);
cursor: pointer;
display: flex;
fill: var(--popup-power-ink);
flex-grow: 1;
font-size: 96px;
justify-content: center;
margin: var(--popup-gap-thin) var(--popup-gap-thin) 0;
padding: 0;
stroke: none;
stroke-width: 64;
}
body.off #switch {
fill: var(--surface-1);
stroke: var(--checkbox-ink);
}
.rulesetTools {
background-color: transparent;
border: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 25%;
}
.rulesetTools [id] {
background-color: var(--popup-ruleset-tool-surface);
border-radius: 4px;
cursor: pointer;
fill: var(--popup-ruleset-tool-ink);
flex-grow: 1;
font-size: 2.2em;
padding: 0;
visibility: hidden;
}
.rulesetTools [id]:not(:first-of-type) {
margin-block-start: 1px;
}
.rulesetTools [id] > svg {
fill: var(--ink-4);
}
body.needReload #refresh,
body.needSave #saveRules,
body.needSave #revertRules {
visibility: visible;
}
#hostname {
font-size: var(--font-size-larger);
margin: var(--popup-gap) var(--popup-gap-thin);
text-align: center;
}
#hostname > span {
word-break: break-all;
}
#hostname > span + span {
font-weight: 600;
}
#rulesetStats {
padding: 0 var(--popup-gap-thin);
}
#rulesetStats .rulesetDetails h1 {
font-size: 1em;
font-weight: normal;
margin: 0.5em 0 0.25em 0;
text-transform: capitalize;
}
#rulesetStats .rulesetDetails p {
color: var(--ink-2);
font-size: var(--font-size-smaller);
margin: 0.25em 0 0.5em 0.5em;
}
.itemRibbon {
column-gap: var(--popup-gap);
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
grid-template: auto / 1fr 1fr;
margin: var(--popup-gap);
}
.itemRibbon > span + span {
text-align: end;
}
.toolRibbon {
align-items: start;
background-color: var(--popup-toolbar-surface);
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
grid-template: auto / repeat(5, 1fr);
justify-items: center;
white-space: normal;
}
.toolRibbon .tool {
cursor: pointer;
display: flex;
flex-direction: column;
font-size: 1.4em;
min-width: 32px;
padding: var(--popup-gap)
var(--popup-gap-thin);
unicode-bidi: embed;
visibility: hidden;
}
.toolRibbon .tool:hover {
color: var(--ink-1);
fill: var(--ink-1);
}
.toolRibbon .tool.enabled {
visibility: visible;
}
.toolRibbon .tool .caption {
font: 10px/12px sans-serif;
margin-top: 6px;
text-align: center;
}
body.mobile.no-tooltips .toolRibbon .tool {
font-size: 1.6em;
}
.toolRibbon.genericTools {
margin-bottom: 0;
}
#toggleGreatPowers {
position: relative;
}
body.hasOmnipotence #toggleGreatPowers {
pointer-events: none;
}
#toggleGreatPowers .badge {
bottom: 4px;
font-size: var(--font-size-xsmall);
line-height: 1;
pointer-events: none;
position: absolute;
right: 4px;
}
body:not(.hasGreatPowers) [data-i18n-title="popupGrantGreatPowers"],
body.hasGreatPowers [data-i18n-title="popupRevokeGreatPowers"] {
display: flex;
}
body:not(.hasGreatPowers) [data-i18n-title="popupRevokeGreatPowers"],
body.hasGreatPowers [data-i18n-title="popupGrantGreatPowers"] {
display: none;
}
body:not(.hasOmnipotence) [data-i18n-title="popupRevokeGreatPowers"] {
fill: var(--popup-power-ink);
}
#moreOrLess {
column-gap: 0;
display: grid;
grid-template: auto / 1fr 1fr;
justify-items: stretch;
margin: 1px 0 0 0;
}
#moreOrLess > span {
cursor: pointer;
margin: 0;
padding: var(--popup-gap-thin) var(--popup-gap);
user-select: none;
white-space: nowrap;
}
#moreButton .fa-icon {
transform: rotate(180deg);
}
#lessButton {
border-inline-start: 1px solid var(--surface-1);
text-align: end;
}
body[data-section="a b"] #moreButton {
pointer-events: none;
visibility: hidden;
}
body[data-section=""] #lessButton {
pointer-events: none;
visibility: hidden;
}
body:not([data-section~="a"]) [data-section="a"] {
display: none;
}
body:not([data-section~="b"]) [data-section="b"] {
display: none;
}
/* configurable UI elements */
:root:not(.mobile) .toolRibbon .caption,
:root.mobile body.no-tooltips .toolRibbon .caption,
:root.mobile body[data-ui~="-captions"] .toolRibbon .caption {
display: none;
}
:root.mobile .toolRibbon .caption,
:root:not(.mobile) body[data-ui~="+captions"] .toolRibbon .caption {
display: inherit;
}
:root:not(.mobile) .toolRibbon .tool,
:root.mobile body.no-tooltips .toolRibbon .tool,
:root.mobile body[data-ui~="-captions"] .toolRibbon .tool {
padding: var(--popup-gap) var(--popup-gap-thin);
}
:root.mobile #moreOrLess > span {
padding: var(--popup-gap);
}
/* horizontally-constrained viewport */
:root.portrait body {
overflow-y: auto;
width: 100%;
}
:root.portrait #main {
max-width: unset;
}
/* mouse-driven devices */
:root.desktop {
display: flex;
justify-content: flex-end;
}
:root.desktop body {
--popup-gap: calc(var(--font-size) * 0.875);
}
:root.desktop body:not(.off) #switch:hover {
fill: rgb(var(--popup-power-ink-rgb) / 90%);
}
:root.desktop body.off #switch:hover {
stroke: var(--popup-power-ink);
}
:root.desktop .rulesetTools [id]:hover {
background-color: var(--popup-ruleset-tool-surface-hover);
}
:root.desktop .rulesetTools [id]:hover > svg {
fill: var(--ink-2);
}
:root.desktop #firewall {
direction: rtl;
line-height: 1.4;
}
:root.desktop .tool:hover {
background-color: var(--popup-toolbar-surface-hover);
}
:root.desktop #moreOrLess > span:hover {
background-color: var(--surface-2);
/* background-color: var(--popup-toolbar-surface-hover); */
}
#templates {
display: none;
}