mirror of
https://github.com/gorhill/uBlock.git
synced 2024-09-30 06:37:10 +02:00
34aab95107
Specific plain CSS cosmetic filters are now supported. Cosmetic filtering will occur only after the user explicitly grant uBO extended permissions for a given site, so that it can inject CSS on the site. A new button in the popup panel allows a user to grant/revoke extended permissions to/from uBO Lite for the current site. More capabilities will be carefully added for when extended permissions are granted on a site, so specific cosmetic filtering through plain CSS is the first implemented capability. Generic and procedural cosmetic filtering is not implemented. The current implementation for plain CSS cosmetic filters is through declarative content injection, which does not require the service worker to be alive, the browser takes care to inject the cosmetic filters. However declarative CSS injection does not support user styles, so the injected cosmetic filters are "weak". I consider this is a browser issue, since user styles are supported by Chromium, there is just no way in the API to specify user styles for the injected content. Also: - Fixed dark theme issues - Added Steven Black's hosts file Keep in mind all this is very experimental and implementation details in this release may (will) greatly change in the future.
294 lines
6.7 KiB
CSS
294 lines
6.7 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;
|
|
margin: 0.5em 0;
|
|
}
|
|
#rulesetStats .rulesetDetails p {
|
|
font-size: var(--font-size-smaller);
|
|
margin: 0.5em 0 0.5em var(--popup-gap-thin);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
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.hasGreatPowers [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;
|
|
}
|