Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-11-07 03:12:33 +01:00
Code Issues Releases Wiki Activity

Allow customization of some popup panel CSS properties

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