Mirrors
/
uBlock
mirror of https://github.com/gorhill/uBlock.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
uBlock/platform/mv3/extension/css/popup.css

304 lines
6.9 KiB
CSS
Raw Normal View History

Add per-site on/off switch to mv3 experimental version
2022-09-07 08:15:36 -06:00
/* 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 {
Report ruleset stats in popup panel
2022-09-08 08:04:08 -06:00
font-size: var(--font-size-larger);
margin: var(--popup-gap) var(--popup-gap-thin);
Add per-site on/off switch to mv3 experimental version
2022-09-07 08:15:36 -06:00
text-align: center;
}
#hostname > span {
word-break: break-all;
}
#hostname > span + span {
font-weight: 600;
}
Report ruleset stats in popup panel
2022-09-08 08:04:08 -06:00
#rulesetStats {
padding: 0 var(--popup-gap-thin);
}
[mv3] Add support for specific cosmetic filtering 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.
2022-09-15 11:14:08 -06:00
#rulesetStats .rulesetDetails h1 {
Report ruleset stats in popup panel
2022-09-08 08:04:08 -06:00
font-size: 1em;
[mv3] Add support for specific cosmetic filtering 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.
2022-09-15 11:14:08 -06:00
margin: 0.5em 0;
Report ruleset stats in popup panel
2022-09-08 08:04:08 -06:00
}
[mv3] Add support for specific cosmetic filtering 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.
2022-09-15 11:14:08 -06:00
#rulesetStats .rulesetDetails p {
Report ruleset stats in popup panel
2022-09-08 08:04:08 -06:00
font-size: var(--font-size-smaller);
[mv3] Add support for specific cosmetic filtering 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.
2022-09-15 11:14:08 -06:00
margin: 0.5em 0 0.5em var(--popup-gap-thin);
Report ruleset stats in popup panel
2022-09-08 08:04:08 -06:00
}
Add per-site on/off switch to mv3 experimental version
2022-09-07 08:15:36 -06:00
.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;
[mv3] Add support for specific cosmetic filtering 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.
2022-09-15 11:14:08 -06:00
grid-template: auto / repeat(5, 1fr);
Add per-site on/off switch to mv3 experimental version
2022-09-07 08:15:36 -06:00
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;
}
[mv3] Add support for specific cosmetic filtering 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.
2022-09-15 11:14:08 -06:00
.toolRibbon.genericTools {
margin-bottom: 0;
}
Add per-site on/off switch to mv3 experimental version
2022-09-07 08:15:36 -06:00
[mv3] Add scriptlet support; improve reliability of cosmetic filtering First iteration of adding scriptlet support. As with cosmetic filtering, scriptlet niijection occurs only on sites for which uBO Lite was granted extended permissions. At the moment, only three scriptlets are supported: - abort-current-script - json-prune - set-constant More will be added in the future.
2022-09-16 13:56:35 -06:00
#toggleGreatPowers {
position: relative;
}
#toggleGreatPowers .badge {
font-size: var(--font-size-xsmall);
line-height: 1;
right: 4px;
position: absolute;
bottom: 2px;
}
[mv3] Add support for specific cosmetic filtering 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.
2022-09-15 11:14:08 -06:00
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;
}
[mv3] Add scriptlet support; improve reliability of cosmetic filtering First iteration of adding scriptlet support. As with cosmetic filtering, scriptlet niijection occurs only on sites for which uBO Lite was granted extended permissions. At the moment, only three scriptlets are supported: - abort-current-script - json-prune - set-constant More will be added in the future.
2022-09-16 13:56:35 -06:00
body [data-i18n-title="popupRevokeGreatPowers"] {
[mv3] Add support for specific cosmetic filtering 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.
2022-09-15 11:14:08 -06:00
fill: var(--popup-power-ink);
Add per-site on/off switch to mv3 experimental version
2022-09-07 08:15:36 -06:00
}
Report ruleset stats in popup panel
2022-09-08 08:04:08 -06:00
#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;
}
[mv3] Add support for specific cosmetic filtering 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.
2022-09-15 11:14:08 -06:00
body[data-section="a b"] #moreButton {
Report ruleset stats in popup panel
2022-09-08 08:04:08 -06:00
pointer-events: none;
visibility: hidden;
}
body[data-section=""] #lessButton {
pointer-events: none;
visibility: hidden;
}
body:not([data-section~="a"]) [data-section="a"] {
display: none;
}
[mv3] Add support for specific cosmetic filtering 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.
2022-09-15 11:14:08 -06:00
body:not([data-section~="b"]) [data-section="b"] {
display: none;
}
Report ruleset stats in popup panel
2022-09-08 08:04:08 -06:00
Add per-site on/off switch to mv3 experimental version
2022-09-07 08:15:36 -06:00
/* 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);
}
Report ruleset stats in popup panel
2022-09-08 08:04:08 -06:00
:root.mobile #moreOrLess > span {
padding: var(--popup-gap);
}
Add per-site on/off switch to mv3 experimental version
2022-09-07 08:15:36 -06:00
/* 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); */
}
[mv3] Add support for specific cosmetic filtering 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.
2022-09-15 11:14:08 -06:00
#templates {
display: none;
}