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

Allow customization of some popup panel CSS properties 

Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/1254

The advanced setting `uiStyles`[1] can be used to control
the minimum width of both the main and firewall panes
in the popup panel:

- `--popup-main-min-width`, default to `18em`
- `--popup-firewall-min-width`, default to `30em`

* * *

[1] https://github.com/gorhill/uBlock/wiki/Advanced-settings#uistyles
This commit is contained in:
Raymond Hill 2020-09-21 07:18:11 -04:00
parent 3c5f6ca101
commit 1cdffea618
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
1 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/css/popup-fenix.css
View File

@ -13,7 +13,10 @@
--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(--font-size));
--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;
}
@ -38,7 +41,7 @@ a {
#main {
align-self: flex-start;
max-width: 340px;
min-width: 18em;
min-width: var(--popup-main-min-width);
}
:root.portrait #main {
align-self: inherit;
@ -258,11 +261,10 @@ body[data-more=""] #lessButton {
margin: 0;
max-height: 600px;
max-width: 460px;
min-width: 30em;
min-width: var(--popup-firewall-min-width);
padding: 0;
overflow-y: auto;
text-align: right;
--rule-cell-width: 5em;
}
:root.desktop body.vMin #firewall {
max-height: 100vh;
@ -306,7 +308,7 @@ body[data-more=""] #lessButton {
justify-content: flex-end;
padding-right: 2px;
white-space: normal;
width: calc(100% - var(--rule-cell-width));
width: calc(100% - var(--popup-rule-cell-width));
word-break: break-word;
}
#firewall > div.isCname > span:first-of-type {
@ -324,7 +326,7 @@ body[data-more=""] #lessButton {
#firewall > div > span:first-of-type ~ span {
flex-shrink: 0;
margin-left: 1px;
width: var(--rule-cell-width);
width: var(--popup-rule-cell-width);
}
#firewall > div > span:nth-of-type(2) {
display: none;
@ -398,7 +400,7 @@ body[data-more=""] #lessButton {
}
body.advancedUser #firewall > div > span:first-of-type {
width: calc(100% - 2 * var(--rule-cell-width));
width: calc(100% - 2 * var(--popup-rule-cell-width));
}
body.advancedUser #firewall > div > span:nth-of-type(2) {
display: inline-flex;