├── uBlockDeluxe Screenshot - Dropdown.png ├── userChrome.css ├── README.md └── userContent.css /uBlockDeluxe Screenshot - Dropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gitoffthelawn/uBlock-Deluxe/HEAD/uBlockDeluxe Screenshot - Dropdown.png -------------------------------------------------------------------------------- /userChrome.css: -------------------------------------------------------------------------------- 1 | /* 2 | uBlock Deluxe - Enhanced UI CSS overlay for uBlock Origin 3 | 4 | https://github.com/Gitoffthelawn/uBlock-Deluxe 5 | 6 | Designed for Mozilla Firefox 7 | 8 | Copyright (c) 2015-2017 Gitoffthelawn. All rights reserved. 9 | No warranties expressed or implied. Used at your own risk. 10 | 11 | If you are interested in this using this code or any of the resultant designs in another project, just ask by creating an issue on GitHub in this repository. 12 | 13 | If you find this project helpful and would like to make a donation, you can pick a charity or ask me to pick one. 14 | I am not accepting any money myself, but if my work helps any charities, that would make me happy. 15 | Let me know if you are inspired to donate to a charity. 16 | */ 17 | 18 | /* ----------------------- 19 | uBlock Origin: CHROME 20 | v3.0.5 21 | ----------------------- */ 22 | 23 | @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); 24 | 25 | /* uBlock Origin extension toolbar button: improve aesthetics when enabled */ 26 | #ublock0-button:not(.off) > .toolbarbutton-badge-stack > .toolbarbutton-icon { 27 | filter: hue-rotate(92deg) brightness(340%) !important; } 28 | #ublock0-button:not(.off) .toolbarbutton-badge { 29 | background-color: #222222 !important; font-family: Tahoma !important; font-weight: normal !important; } 30 | 31 | /* uBlock Origin extension button: enhance visibility when disabled by applying background color */ 32 | #ublock0-button.off { background-clip: content-box !important; background-color: red !important; } 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # uBlock-Deluxe 2 | *Enhanced UI CSS overlay for uBlock Origin* 3 | 4 | (If people express interest, regular uBlock support will come later.) 5 | 6 | Goals: Improved usability and accessibility 7 | 8 | Designed for Mozilla Firefox 9 | 10 | Copyright (c) 2015-2017 Gitoffthelawn. All rights reserved. 11 | No warranties expressed or implied. Use at your own risk. 12 | 13 | If you are interested in this using this code or any of the resultant designs in another project, just ask for permission by creating an issue on GitHub in this repository. 14 | 15 | If you find this project helpful and would like to make a donation, you can pick a charity or ask me to pick one. 16 | I am not accepting any money myself, but if my work helps any charities, that would make me happy. 17 | Let me know if you are inspired to donate to a charity. 18 | 19 | One of the many user interface areas improved by uBlock Deluxe: 20 | 21 | ![Screenshot of dropdown](https://github.com/Gitoffthelawn/uBlock-Deluxe/blob/master/uBlockDeluxe%20Screenshot%20-%20Dropdown.png) 22 | 23 | *Instructions for users with Stylish:* 24 | - Create a new User Style called `uBlock Deluxe Chrome`. 25 | - Point to `userChrome.css` in this repo (`https://github.com/Gitoffthelawn/uBlock-Deluxe/blob/master/userChrome.css`), or simply cut and paste the code. 26 | - Create a new User Style called `uBlock Deluxe Content`. 27 | - Point to `userContent.css` in this repo (`https://github.com/Gitoffthelawn/uBlock-Deluxe/blob/master/userContent.css`), or simply cut and paste the code. 28 | 29 | *Instructions for users without Stylish:* 30 | - Copy `userChrome.css` and `userContent.css` into the `chrome` folder in your Firefox *profile* folder. 31 | - If the `chrome` folder does not exist, simply create one first. 32 | - Note that the *profile* folder is not the same as the *application* folder. 33 | - To find your *profile* folder, enter `about:support` into the Firefox location bar, and then click on the `Show Folder` button in the `Profile Folder` line. 34 | 35 | If you have any feedback, difficulties, questions, suggestions, or praise, simply add an Issue to the Issue Tracker. 36 | 37 | Enjoy! 38 | -------------------------------------------------------------------------------- /userContent.css: -------------------------------------------------------------------------------- 1 | /* 2 | uBlock Deluxe - Enhanced UI CSS overlay for uBlock Origin 3 | 4 | https://github.com/Gitoffthelawn/uBlock-Deluxe 5 | 6 | Designed for Mozilla Firefox 7 | 8 | Copyright (c) 2015-2017 Gitoffthelawn. All rights reserved. 9 | No warranties expressed or implied. Use at your own risk. 10 | 11 | If you are interested in this using this code or any of the resultant designs in another project, just ask by creating an issue on GitHub in this repository. 12 | 13 | If you find this project helpful and would like to make a donation, you can pick a charity or ask me to pick one. 14 | I am not accepting any money myself, but if my work helps any charities, that would make me happy. 15 | Let me know if you are inspired to donate to a charity. 16 | */ 17 | 18 | /* ------------------------ 19 | uBlock Origin: CONTENT 20 | v5.0.2 21 | ------------------------ */ 22 | 23 | @namespace url(http://www.w3.org/1999/xhtml); 24 | 25 | 26 | /* uBlock Origin extension popup: improve usability and aesthetics 27 | using 'url-prefix' instead of 'url' to also apply to popup within logger */ 28 | @-moz-document url-prefix("chrome://ublock0/content/popup.html") { 29 | 30 | /* --- TOP LINE --- */ 31 | /* top line: increase height */ 32 | #gotoPrefs { padding-top: 6px !important; padding-bottom: 4px !important; } 33 | /* settings icon: move from left edge to right edge, move up */ 34 | #version + SPAN { right: -32em !important; margin-top: -1px !important; } 35 | /* extension name in top line: add string */ 36 | #appname::after { content: " Deluxe!"; } 37 | /* 'Deluxe!' string and settings icon: highlight on hover */ 38 | #gotoPrefs:hover > #appname::after, #gotoPrefs:hover > #version + SPAN { 39 | opacity: 1 !important; color: rgb(220, 255, 255) !important; text-shadow: 0 0 2px cyan !important; } 40 | 41 | /* --- LEFT PANE --- */ 42 | /* left pane of popup: allow more items to be displayed */ 43 | #panes > DIV { height: auto !important; max-height: 900px !important; } 44 | /* 'All' item in left pane: differentiate from other items */ 45 | #firewallContainer > DIV:first-of-type > SPAN:first-of-type { 46 | margin-left: -1.1em !important; 47 | background-color: darkgray !important; color: white !important; 48 | font-size: 88% !important; font-style: normal !important; font-weight: bold !important; 49 | text-transform: uppercase !important; } 50 | /* expander to left of 'All' item in left column: enhance appearance */ 51 | #firewallContainer > DIV:first-of-type > SPAN:first-of-type::before { 52 | color: black !important; font-weight: 800 !important; } 53 | /* rows in left pane common for all URLs: differentiate from other rows */ 54 | #firewallContainer 55 | > DIV:-moz-any(:nth-of-type(2), :nth-of-type(3), :nth-of-type(4), :nth-of-type(5), :nth-of-type(6), :nth-of-type(7)) 56 | > SPAN:first-of-type { 57 | background-color: lightcyan !important; font-style: italic !important; } 58 | /* rows in left pane that list hosts and domains: color entire row with green/yellow/red instead of only left edge */ 59 | #firewallContainer > DIV.allowed > SPAN:first-of-type::before, 60 | #firewallContainer > DIV.blocked > SPAN:first-of-type::before, 61 | #firewallContainer.minimized > DIV.isDomain.totalAllowed > SPAN:first-of-type::before, 62 | #firewallContainer.minimized > DIV.isDomain.totalBlocked > SPAN:first-of-type::before { 63 | opacity: 0.2 !important; width: 100% !important; } 64 | /* expanded domains: add down-triangle after domain name */ 65 | #firewallContainer:not(.minimized) .isDomain:-moz-any(.totalBlocked, .totalAllowed):not(:-moz-any(.blocked, .allowed)) 66 | > SPAN:first-of-type::after { 67 | font-size: 80% !important; content: " \25BC"; } 68 | /* domains, subdomains, and quantity allowed/blocked items: 69 | color text according whether allowed, fully blocked, or partially blocked */ 70 | .isDomain.totalBlocked > SPAN { color: #990000 !important; } 71 | .isDomain.totalAllowed > SPAN { color: #009900 !important; } 72 | .isDomain.totalAllowed.totalBlocked:-moz-any(.blocked.allowed, :not(.blocked):not(.allowed)) > SPAN { 73 | color: #887800 !important; } 74 | .isSubDomain.blocked > SPAN { color: #990000 !important; } 75 | .isSubDomain.allowed > SPAN { color: #009900 !important; } 76 | .isSubDomain.allowed.blocked > SPAN { color: #786800 !important; } 77 | 78 | /* --- RIGHT PANE --- */ 79 | /* new tools area in top of right pane: make spacious */ 80 | #switch { margin-top: 15px !important; margin-bottom: 14px !important; } 81 | /* tools for new tools area in top of right pane: add padding and increase size to make easier to click, 82 | apply consistent color */ 83 | #switch > .fa, .tool { padding: 2px !important; font-size: 200% !important; color: rgb(0, 70, 235) !important; } 84 | /* site toggle switch, element picker tool, log viewer tool in right pane on hover: increase opacity, apply glow */ 85 | #switch > .fa:hover, .tool:hover { opacity: 1 !important; text-shadow: 0 0 2px cyan !important; } 86 | /* site toggle switch in right pane: position in new tools area */ 87 | #switch > .fa { margin-right: 3.4em !important; } 88 | /* element picker and log viewer tools in right pane: position in new tools area */ 89 | .tool { position: absolute !important; top: 15px !important; } 90 | #gotoPick { right: 2.5em !important; } 91 | #gotoPick + A { right: 0.6em !important; } 92 | /* previous tools style (no major repositioning) */ 93 | /* site toggle switch in right pane: reduce size */ 94 | /* #switch > .fa { font-size: 36px !important; } */ 95 | /* tool icons for element picker and network request log: add more space to make easier to click */ 96 | /* .tool { padding-left: 2px !important; padding-right: 2px !important; } */ 97 | /* tool icons for element picker and network request log on hover: change color to indicate these are actions */ 98 | /* .tool:hover { color: #0000FF !important; } */ 99 | /* section headers in right pane: differentiate from items in left pane */ 100 | H2 { background-color: rgb(68, 68, 68) !important; color: white !important; } 101 | /* 'requests blocked' and 'domains connected' values: make sizes consistent */ 102 | #page-blocked, #popupHitDomainCount { font-size: 160% !important; } 103 | /* 'requests blocked' value: apply color cue to indicate meaning of number */ 104 | #page-blocked { color: #A00 !important; } 105 | /* 'on this site' string in 'requests blocked' area: remove text and its area */ 106 | .statName:nth-of-type(2) { margin-top: 0 !important; height: 0 !important; } 107 | .statName:nth-of-type(2) > SPAN:first-of-type { display: none !important; } 108 | /* 'since install' string in 'requests blocked' area: decrease size */ 109 | .statName:nth-of-type(4) { font-size: 80% !important; } 110 | /* 'since install' value in 'requests blocked' area: decrease size, apply subtle color cue to indicate meaning of numbers */ 111 | #total-blocked { font-size: 83% !important; color: #A66 !important; } 112 | /* 'domains connected' values: apply color cue to indicate meaning of numbers */ 113 | #popupHitDomainCount { color: #0A0 !important; } 114 | /* extra tools in bottom of right pane: improve spacing, differentiate from section headers by creating box */ 115 | .hnSwitch { padding-bottom: 2px !important; } 116 | #extraTools { 117 | margin-top: 16px !important; border: 1px solid rgb(68, 68, 68) !important; background-color: inherit !important; } 118 | /* extra tools in bottom of right pane: do not change icon color on hover, increase weight of 'X' when disabled */ 119 | #extraTools > SPAN { color: rgb(170, 170, 170) !important; } 120 | #extraTools > SPAN > SPAN:last-of-type { font-weight: bold !important; } 121 | /* extra tools in bottom of right pane on hover: indicate action by always showing 'X' on hover, 122 | provide cue to type of action and indicate hover by applying vibrant shadow to 'X' on hover, 123 | apply state-dependent color to 'X' regardless of whether or not hovering */ 124 | /* to create 'X' on hover when not enabled, use same code that creates 'X' when enabled, plus add enhancements */ 125 | #extraTools > SPAN:hover > SPAN:last-of-type { 126 | position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; 127 | text-align: center !important; font-size: 20px !important; 128 | color: gray !important; text-shadow: 0 0 2px red !important; } 129 | #extraTools > SPAN:hover > SPAN:last-of-type:after { content: "\2715"; } 130 | #extraTools > SPAN.on > SPAN:last-of-type { color: #E00 !important; } 131 | /* no-popups extra tool in bottom of right pane: improve icon by using FontAwesome fa-clone character 132 | requires FontAwesome v4.4, which is not yet included in uBlock */ 133 | /* #no-popups { font-size: 0 !important; } */ 134 | /* #no-popups::after { font-size: 20px; content: "\F24D"; } */ 135 | /* previous extra tools style (only subtle modification) */ 136 | /* toggle icons in bottom of right pane on hover: intensify color to make UI more crisp */ 137 | /* #extraTools > SPAN:hover { color: black !important; } */ 138 | /* refresh button that displays above tool icons in bottom of right pane when user toggles specific tools: 139 | adjust position and size, and enhance visibility by improving style */ 140 | #refresh { 141 | bottom: 30px !important; border-color: black !important; border-radius: 34px !important; 142 | background-color: #FF4 !important; font-size: 38px !important; } 143 | } 144 | 145 | 146 | /* uBlock Origin extension dashboard (in FF tab): improve aesthetics, add Deluxe tagline */ 147 | @-moz-document url-prefix("chrome://ublock0/content/dashboard.html") { 148 | /* title: reduce size, add italics, add Deluxe tagline */ 149 | #dashboard-nav-widgets > SPAN { font-size: 95% !important; font-style: italic !important; } 150 | #dashboard-nav-widgets > SPAN::after { content: " Deluxe"; } 151 | /* tabs: soften corners and enhance appearance (help tab requires special adjustments) 152 | alternate appearance: border-top-left-radius: 20px 12px !important; border-top-right-radius: 390px 42px !important; */ 153 | .tabButton { border-top-left-radius: 90px 12px !important; border-top-right-radius: 90px 12px !important; } 154 | .tabButton:last-of-type { 155 | border-top-left-radius: 60px 22px !important; border-top-right-radius: 60px 22px !important; 156 | padding-top: 2px !important; } 157 | /* tabs: change text color */ 158 | .tabButton { color: blue !important; } 159 | /* tabs: change font size, improve tab names, replace 'About' tab with question mark icon 160 | FontAwesome included in extension */ 161 | #dashboard-nav-widgets > A { font-size: 0 !important; } 162 | #dashboard-nav-widgets > A:first-of-type::before { font-size: medium !important; content: "Settings"; } 163 | #dashboard-nav-widgets > A:nth-of-type(2)::before { font-size: medium !important; content: "Filter Lists"; } 164 | #dashboard-nav-widgets > A:nth-of-type(3)::before { font-size: medium !important; content: "My Filters"; } 165 | #dashboard-nav-widgets > A:nth-of-type(4)::before { font-size: medium !important; content: "My Rules"; } 166 | #dashboard-nav-widgets > A:nth-of-type(5)::before { font-size: medium !important; content: "My Whitelist"; } 167 | #dashboard-nav-widgets > A:last-of-type::before { 168 | font-family: "FontAwesome" !important; font-size: medium !important; content: "\00A0\F059\00A0"; } 169 | /* tabs on hover: change background color */ 170 | .tabButton:not(.selected):hover { background-color: rgb(247, 247, 247) !important; } 171 | } 172 | 173 | 174 | /* uBlock Origin extension dashboard (in FF tab) 'Settings' tab: improve usability */ 175 | @-moz-document url("chrome://ublock0/content/settings.html") { 176 | /* 'Show the number of blocked requests on the icon' option: replace with more appropriate string */ 177 | #icon-badge + LABEL { visibility: hidden !important; } 178 | #icon-badge + LABEL::before { 179 | visibility: visible !important; content: "Display number of blocked requests on toolbar icon"; } 180 | /* 'Make use of context menu where appropriate' option: replace with more appropriate string */ 181 | #context-menu-enabled + LABEL { visibility: hidden !important; } 182 | #context-menu-enabled + LABEL::before { visibility: visible !important; content: "Add context menu items"; } 183 | /* 'I am an advanced user' option: replace with more appropriate string */ 184 | #advanced-user-enabled + LABEL { visibility: hidden !important; } 185 | #advanced-user-enabled + LABEL::before { visibility: visible !important; content: "Advanced mode"; } 186 | /* 'Required Reading' link: replace with more appropriate, less demanding, and more universal question mark icon */ 187 | #advanced-user-enabled + LABEL > A::before { 188 | visibility: visible !important; opacity: 0.3 !important; margin-left: -9.7em !important; 189 | font-family: "FontAwesome" !important; font-size: 110% !important; content: "\F059"; } 190 | /* new question mark icon on hover: emphasize */ 191 | #advanced-user-enabled + LABEL > A:hover::before { opacity: 1 !important; } 192 | /* advanced mode settings icon: adjust position */ 193 | #advanced-user-enabled + LABEL + A.info { margin-left: -9.7em !important; padding-bottom: 1px !important; } 194 | /* 'Privacy' section item information icons: enhance appearance */ 195 | #userSettings A.info { opacity: 0.3 !important; color: rgb(0, 0, 238) !important; } 196 | #userSettings A.info:hover { opacity: 1 !important; } 197 | /* horizontal rule between settings checkboxes and 'Storage used' line: remove */ 198 | #localData > DIV { border-top: none !important; } 199 | /* 'Storage used' line: push Backup/Restore section below it further down, make italic */ 200 | #localData > UL > LI:first-of-type { 201 | display: block !important; margin-bottom: 60px !important; font-style: italic !important; } 202 | /* 'Last backup' line: always display (even if no backup), flow onto single line, remove list style, adjust position */ 203 | #localData > UL > LI:nth-of-type(2) { 204 | display: inline-flex !important; position: absolute !important; margin-top: 0 !important; } 205 | /* 'Last backup' line: display 'None' if no backup */ 206 | #localData > UL > LI:nth-of-type(2)[style="display: none;"]::after { content: "None"; } 207 | /* 'Last restore' line when not hidden: flow onto single line, remove list style, adjust position */ 208 | #localData > UL > LI:nth-of-type(3):not([style="display: none;"]) { 209 | display: inline-flex !important; position: absolute !important; margin-top: 22px !important; } 210 | /* 'Last backup' and 'Last restore' lines: flow content nicely, remove list style, adjust position */ 211 | #localData > UL > LI:-moz-any(:nth-of-type(2), :nth-of-type(3)) > UL > LI { 212 | display: flex !important; position: relative !important; margin-top: 0 !important; } 213 | /* create backup/restore box using DIV that contains Backup and Restore buttons */ 214 | #localData + DIV { display: inline-flex !important; height: 8.1em !important; min-width: 24em !important; 215 | margin-top: -80px !important; border: 1px solid black !important; padding: 10px !important; } 216 | /* Backup and Restore buttons: adjust vertical position, hide old strings */ 217 | #export, #import { position: absolute !important; margin-top: 76px !important; font-size: 0 !important; } 218 | /* Backup and Restore buttons: adjust horizontal positions */ 219 | #export { margin-left: 2px !important; } 220 | #import { margin-left: 98px !important; } 221 | /* Reset button: adjust position, hide string */ 222 | #reset { margin-top: 140px !important; margin-left: 350px !important; font-size: 0 !important; } 223 | /* Backup, Restore, and Reset buttons: restore sizes since set font-size to 0 to hide old strings (above) */ 224 | :-moz-any(#export, #import, #reset)::before { 225 | font-size: small !important; line-height: 180% !important; padding: 10px !important; } 226 | /* Backup, Restore, and Reset buttons: improve strings */ 227 | #export::before { content: "Backup..."; } 228 | #import::before { content: "Restore..."; } 229 | #reset::before { content: "Reset..."; } 230 | } 231 | 232 | 233 | /* uBlock Origin extension dashboard (in FF tab) 'Filters List' (previously '3rd-party filters') tab: improve usability */ 234 | @-moz-document url("chrome://ublock0/content/3p-filters.html") { 235 | /* 'Auto-update filter lists' option: remove period at end of string */ 236 | #autoUpdate + LABEL { visibility: hidden !important; } 237 | #autoUpdate + LABEL::before { 238 | visibility: visible !important; margin-right: -9em !important; content: "Auto-update filter lists"; } 239 | /* 'Update now' button: add space between it and 'Purge all caches' button */ 240 | #buttonUpdate { margin-right: 8px !important; } 241 | /* 'Parse and enforce cosmetic filters' option: add critical information, remove period at end of string */ 242 | #parseCosmeticFilters + LABEL { visibility: hidden !important; } 243 | #parseCosmeticFilters + LABEL::before { 244 | visibility: visible !important; margin-right: -15.5em !important; 245 | content: "Parse and enforce cosmetic filters (site-specific cosmetic filters in My Filters and all uBlock Filters lists are always enforced)"; } 246 | /* 'Ignore generic cosmetic filters' option: improve option text, add critical information, adjust help button position */ 247 | #ignoreGenericCosmeticFilters + LABEL { visibility: hidden !important; } 248 | #ignoreGenericCosmeticFilters + LABEL::before { 249 | visibility: visible !important; margin-right: -13.7em !important; 250 | content: "Ignore cosmetic filters that get applied to every site (generic cosmetic filters in My Filters and all uBlock Filters lists will also not be enforced)"; } 251 | #ignoreGenericCosmeticFilters + LABEL + .whatisthis { margin-top: -3px !important; } 252 | /* number of filters installed: make more prominent */ 253 | #listsOfBlockedHostsPrompt { margin-top: 17px !important; font-weight: bold !important; } 254 | /* filter groups: increase space above each group to enhance clarity */ 255 | .groupEntry { margin-top: 10px !important; } 256 | /* filter groups enabled counters: make more prominent */ 257 | .geCount { opacity: 1 !important; color: #00C000 !important; } 258 | /* filter item number of filters used: improve readability by increasing opacity */ 259 | .counts.dim { opacity: 0.7 !important; } 260 | /* filter item information icons: enhance appearance */ 261 | LI.listEntry > A:nth-of-type(2) { opacity: 0.3 !important; font-size: 100% !important; } 262 | LI.listEntry > A:nth-of-type(2):hover { opacity: 1 !important; } 263 | /* filters downloaded via http: change 'http' indicators to not look like clickable buttons */ 264 | span.unsecure { background-color: transparent !important; border: none !important; } 265 | span.unsecure::before { content: "(via "; } 266 | span.unsecure::after { content: ")"; } 267 | /* 'purge cache' buttons: make look more like buttons */ 268 | span.purge { border-color: rgb(150, 150, 150) !important; } 269 | /* 'Apply changes' button: increase width */ 270 | #buttonApply { min-width: 300px !important; } 271 | /* 'Apply changes' button: add prominent glow when a change has been made 272 | (switching dashboard tabs without applying loses changes) */ 273 | #buttonApply:not([disabled]) { filter: drop-shadow(0 0 8px green) !important; color: #00B000 !important; } 274 | /* instructions for adding custom lists: improve */ 275 | #externalListsDiv > P:first-of-type > SPAN { font-size: 0 !important; } 276 | #externalListsDiv > P:first-of-type > SPAN::before { 277 | font-size: small !important; 278 | content: 279 | "Add URLs for custom lists below.\00A0\00A0One URL per line.\00A0\00A0Invalid URLs ignored.\00A0\00A0Prefix comments with '!'.\00A0"; } 280 | /* custom lists entry area: move up, reduce height */ 281 | #externalLists { margin-top: -8px !important; height: 5em !important; } 282 | /* Parse button: improve by changing to an 'Add' button */ 283 | #externalListsApply { font-size: 0 !important; } 284 | #externalListsApply::before { 285 | font-size: small !important; 286 | content: "\00A0\00A0\00A0 Add \00A0\00A0\00A0"; } 287 | } 288 | 289 | 290 | /* uBlock Origin extension dashboard (in FF tab) 'My Filters' tab: improve usability */ 291 | @-moz-document url("chrome://ublock0/content/1p-filters.html") { 292 | /* HTML and BODY: set heights for entire viewport so child objects will have a reference height to use percentages */ 293 | HTML, BODY { height: 100%; } 294 | /* BODY: remove bottom padding to allow more room for data */ 295 | BODY { padding-bottom: 0 !important; } 296 | /* heading: simplify and improve */ 297 | /* instructions line: eliminate impact on vertical size of filters list by moving to bottom, improve instructions 298 | instead of 'font-size: 0' can alternately use 'visibility: collapse' technique */ 299 | BODY > P:first-of-type { 300 | position: absolute !important; bottom: 0 !important; left: 310px !important; 301 | height: 36px !important; width: calc(100% - 314px) !important; 302 | overflow: hidden !important; 303 | font-size: 0 !important; } 304 | BODY > P:first-of-type::before { 305 | font-size: small !important; font-style: italic !important; 306 | content: 307 | "Filters can be host names or ABE/ABP-compatible entries. One entry per line. Prefix comments with '!'."; } 308 | /* 'Apply changes' button: make much more prominent as not pressing it will result in loss of all changes 309 | uBlock needs a warning message when edits are made and will be lost, but not possible in CSS */ 310 | BODY > P:nth-of-type(2) { margin: 0 !important; } 311 | #userFiltersApply { 312 | top: 10px !important; left: 12px !important; 313 | margin-top: 8px !important; margin-bottom: 4px !important; 314 | min-width: calc(100% - 6.2em) !important; } 315 | /* 'Apply changes' button: add prominent glow when a change has been made 316 | (switching dashboard tabs or closing the dashboard without applying loses changes) */ 317 | #userFiltersApply:not([disabled]) { filter: drop-shadow(0 0 8px green) !important; color: #00B000 !important; } 318 | /* increase height of filters textarea so more filters can be displayed (requires HTML and BODY to have a defined height) */ 319 | BODY > P:nth-of-type(3) { 320 | margin-top: 2px !important; margin-bottom: 2px !important; height: calc(100% - 14.9ex) !important; } 321 | .userFilters { height: 100% !important; } 322 | /* bottom button row: remove bottom margin to allow more room for data above */ 323 | .userFilters + P { margin-bottom: 0 !important; } 324 | /* 'Import and append' and 'Export' buttons: hide old strings */ 325 | #importUserFiltersFromFile, #exportUserFiltersToFile { font-size: 0 !important; } 326 | /* 'Import and append' and 'Export' buttons: restore sizes since previously setting font-size to 0 to hide old strings */ 327 | :-moz-any(#importUserFiltersFromFile, #exportUserFiltersToFile)::before { 328 | font-size: small !important; line-height: 180% !important; padding: 10px !important; } 329 | /* 'Import and append' and 'Export' buttons: improve strings */ 330 | #importUserFiltersFromFile::before { content: "Import and append..."; } 331 | #exportUserFiltersToFile::before { content: "Export..."; } 332 | } 333 | 334 | 335 | /* uBlock Origin extension dashboard (in FF tab) 'My Rules' tab: improve usability */ 336 | @-moz-document url("chrome://ublock0/content/dyna-rules.html") { 337 | /* description line: remove (include meaningful text in headings below) */ 338 | BODY > P:first-of-type { display: none !important; } 339 | /* instructions (syntax) line: change empty space above instructions line from margin to padding 340 | to work around FF bug that can cause vertical scrollbar to display */ 341 | BODY > P:nth-of-type(2) { margin-top: 0 !important; padding-top: 5px !important; } 342 | /* syntax details: replace hardcoded font size with percentage to improve accessibility for those with limited vision */ 343 | CODE { font-size: 85% !important; } 344 | /* 'full documentation' link: replace with more appropriate, less demanding, and more universal question mark icon */ 345 | BODY > P:nth-of-type(2) > A { font-size: 0 !important; } 346 | BODY > P:nth-of-type(2) > A::before { 347 | opacity: 0.3 !important; color: rgb(0, 0, 238) !important; 348 | font-family: "FontAwesome" !important; font-size: medium !important; content: "\F059"; } 349 | /* new question mark icon on hover: emphasize */ 350 | BODY > P:nth-of-type(2) > A:hover::before { opacity: 1 !important; } 351 | /* pane headings: adjust spacing, hide old strings */ 352 | DIV H2 { margin-bottom: 2px !important; font-size: 0 !important; } 353 | /* pane headings: restore sizes since previously set font-size to 0 to hide old strings */ 354 | DIV H2::before { font-size: large !important; } 355 | /* pane headings: improve strings */ 356 | DIV.left H2::before { content: "Permanent dynamic rules"; } 357 | DIV.right H2::before { content: "Temporary dynamic rules"; } 358 | /* Edit button: increase padding to increase width so it is more prominent */ 359 | #editEnterButton { padding-left: 24px !important; padding-right: 24px !important; } 360 | /* Export and Import buttons: hide old strings */ 361 | #exportButton, #importButton { font-size: 0 !important; } 362 | /* Export and Import buttons: restore sizes since previously set font-size to 0 to hide old strings */ 363 | :-moz-any(#exportButton, #importButton)::before { 364 | font-size: small !important; line-height: 180% !important; padding-left: 6px !important; padding-right: 6px !important; } 365 | /* Backup and Restore buttons: improve strings */ 366 | #exportButton::before { content: "Export..."; } 367 | #importButton::before { content: "Import..."; } 368 | } 369 | 370 | 371 | /* uBlock Origin extension dashboard (in FF tab) 'My Whitelist' tab: improve usability */ 372 | @-moz-document url("chrome://ublock0/content/whitelist.html") { 373 | 374 | /* --- BODY --- */ 375 | /* HTML and BODY: set heights to entire viewport so child objects will have a reference height to use percentages */ 376 | HTML, BODY { height: 100%; } 377 | /* BODY: remove bottom padding to allow more room for data */ 378 | BODY { padding-bottom: 0 !important; } 379 | 380 | /* --- HEADING --- */ 381 | /* instructions line: improve instructions and eliminate impact on vertical size of filters list 382 | instead of 'font-size: 0' can alternately use 'visibility: collapse' technique */ 383 | BODY > P:first-of-type { 384 | position: absolute !important; bottom: 0 !important; left: 310px !important; 385 | height: 36px !important; width: calc(100% - 314px) !important; 386 | overflow: hidden !important; 387 | font-size: 0 !important; } 388 | BODY > P:first-of-type::before { 389 | font-size: small !important; font-style: italic !important; 390 | content: 391 | "Blocking disabled for these hosts. One host per line. Invalid hosts ignored."; } 392 | /* 'Apply changes' button: make much more prominent as not pressing it will result in loss of all changes 393 | uBlock needs a warning message when edits are made and will be lost, but not possible in CSS */ 394 | BODY > P:nth-of-type(2) { margin: 0 !important; } 395 | #whitelistApply { 396 | top: 10px !important; left: 12px !important; 397 | margin-top: 8px !important; margin-bottom: 4px !important; 398 | min-width: calc(100% - 6.2em) !important; } 399 | /* 'Apply changes' button: add prominent glow when a change has been made 400 | (switching dashboard tabs without applying loses changes) */ 401 | #whitelistApply:not([disabled]) { filter: drop-shadow(0 0 8px green) !important; color: #00B000 !important; } 402 | 403 | /* --- FILTERS --- */ 404 | /* increase height of filters textarea so more filters can be displayed (requires HTML and BODY to have a defined height) */ 405 | BODY > P:nth-of-type(3) { 406 | margin-top: 2px !important; margin-bottom: 2px !important; height: calc(100% - 14.9ex) !important; } 407 | #whitelist { height: 100% !important; } 408 | 409 | /* --- BOTTOM AREA --- */ 410 | /* 'Import and append' and 'Export' buttons: hide old strings */ 411 | #importWhitelistFromFile, #exportWhitelistToFile { font-size: 0 !important; } 412 | /* 'Import and append' and 'Export' buttons: restore sizes since previously setting font-size to 0 to hide old strings */ 413 | :-moz-any(#importWhitelistFromFile, #exportWhitelistToFile)::before { 414 | font-size: small !important; line-height: 180% !important; padding: 10px !important; } 415 | /* 'Import and append' and 'Export' buttons: improve strings */ 416 | #importWhitelistFromFile::before { content: "Import and append..."; } 417 | #exportWhitelistToFile::before { content: "Export..."; } 418 | } 419 | 420 | 421 | /* uBlock Origin extension dashboard (in FF tab) 'About' tab: add 'Deluxe' marker and Deluxe version */ 422 | @-moz-document url("chrome://ublock0/content/about.html") { 423 | /* extension name and version line: add italicized bold Deluxe marker with Enhanced UI version number */ 424 | #aboutNameVer::after { 425 | font-style: italic !important; font-weight: bolder !important; content: " Deluxe (Enhanced UI v5.0.2)"; } 426 | } 427 | 428 | 429 | /* uBlock Origin extension request logger (in FF tab): improve usability, 430 | improve accessibility for persons with limited vision */ 431 | @-moz-document url-prefix("chrome://ublock0/content/logger-ui.html") { 432 | /* all toolbars: increase visual contrast between toolbars and data */ 433 | .permatoolbar, .fa { background-color: black !important; color: white !important; } 434 | /* upper toolbar: remove unneeded lower padding */ 435 | BODY > .permatoolbar { width: 100% !important; padding-bottom: 0 !important; } 436 | /* upper toolbar page selector: increase width, add ellipsis for long strings */ 437 | #pageSelector { min-width: 35.7em !important; text-overflow: ellipsis !important; } 438 | /* lower toolbars: move closer to upper toolbar and improve usability by delineating areas with borders 439 | for uBlock (not Origin): #toolbar > DIV:nth-of-type(2) { margin-top: -2px !important; } 440 | if toolbar colors are not inverted, these borders look great: 441 | border-top: 1px solid #FFF !important; border-right: 1px solid #CCC !important; 442 | border-bottom: 1px solid #CCC !important; */ 443 | .inspector > .permatoolbar { margin-top: -1px !important; padding-top: 0 !important; } 444 | /* network and DOM inspector toolbars: improve aesthetics and allow more data to be visible */ 445 | #netInspector > .permatoolbar { border-bottom-right-radius: 79px 56px !important; } 446 | #domInspector > .permatoolbar { border-bottom-right-radius: 12px 13px !important; } 447 | /* filter toggle button: move to right */ 448 | #filterButton { margin-left: 15px !important; } 449 | /* filter input field: increase width, dim when filter disabled 450 | for uBlock (not Origin) use BODY.f instead of #netInspector.f */ 451 | #filterInput { min-width: 16.4em !important; opacity: 0.3 !important; } 452 | #netInspector.f #filterButton + #filterInput { opacity: 1 !important; } 453 | /* filter and maximum log entries input fields: change focus background color to be different from anything in log table 454 | if toolbar colors are not inverted, this background looks great: background-color: hsla(180, 90%, 60%, 0.2) */ 455 | INPUT:focus { -moz-appearance: none !important; background-color: hsl(180, 80%, 60%) !important; } 456 | /* maximum log entries input field: add descriptive text (::before does not work on INPUT) 457 | for uBlock (not Origin): #maxEntries > DIV::after { content: " entries"; } */ 458 | #netInspector > DIV:first-of-type > DIV:first-of-type::after { 459 | font-size: 80%; margin-left: -24px !important; content: "entries\00A0\00A0\00A0"; } 460 | /* all toolbar buttons: add tooltips - first set empty transparent content */ 461 | .permatoolbar .button::after { 462 | background-color: #FFFFEE; border: 1px solid gray; border-radius: 3px; 463 | box-shadow: 1px 1px 3px gray; box-sizing: border-box; 464 | color: black; font: 12px sans-serif; line-height: 130%; margin: 0.5em 0; padding: 4px 6px; 465 | pointer-events: none; position: absolute; text-align: center; white-space: pre-line; z-index: 100; 466 | opacity: 0; content: ""; } 467 | /* all toolbar buttons: add tooltips - transition to opaque content */ 468 | .permatoolbar .button:hover::after { opacity: 1; transition: opacity 0.2s 1.2s; } 469 | /* all toolbar buttons: add tooltips - apply actual tooltip labels to opaque content */ 470 | #refresh:hover:after { content: "Reload page"; } 471 | #showdom:hover:after { content: "Toggle log/DOM view"; } 472 | #compactViewToggler:hover::after { content: "Toggle long entries"; } 473 | #clean:hover:after { content: "Remove entries for closed tabs"; } 474 | #clear:hover:after { content: "Clear log"; } 475 | #filterButton:hover::after { content: "Toggle filter"; } 476 | .revert:hover:after { content: "Clear proposed filters"; width: 11.5em; } 477 | .commit:hover:after { content: "View proposed filters"; width: 11em; } 478 | /* log table: ensure a discernible font (lowercase L and capital I look different) if available, 479 | modify font size to use a percentage to improve accessibility for persons with limited vision */ 480 | TABLE { font-family: "Trebuchet MS", sans-serif !important; font-size: 90% !important; } 481 | /* log table item-type column: increase width to fix undesired overflow with certain fonts (for 'inline-script' string) */ 482 | TABLE > COLGROUP > COL:nth-of-type(5) { width: 6.3em !important; } 483 | /* log table URL column of URL delimiter row: improve clarity by adding add up-arrows, 484 | improve centering by compensating for width of first two columns, italicize text to enhance differentiation */ 485 | TR.maindoc TD:last-of-type::before { content: "ꜛ "; } 486 | TR.maindoc TD:last-of-type::after { content: " ꜛ"; } 487 | TR.maindoc TD:last-of-type { overflow: visible !important; padding-right: 8em !important; font-style: italic !important; } 488 | /* log table yellow rows for blocked elements: increase background opacity to improve visibility of background color */ 489 | #netInspector TR.cb, #netInspector TR.rr { background-color: rgba(255, 255, 0, 0.2) !important; } 490 | /* modal overlay dialogs: add blue border */ 491 | .modalDialog .dialog { border: 2px solid blue !important; } 492 | /* modal overlay dialogs: fix bug that causes long filters to extend beyond the dialog and get clipped at window edge */ 493 | .modalDialog .dialog CODE { word-wrap: break-word !important; } 494 | } 495 | 496 | 497 | /* uBlock Origin extension blocked page notification (in FF tab): improve usability */ 498 | @-moz-document url-prefix("chrome://ublock0/content/document-blocked.html") { 499 | /* warning icon: reduce size to prevent scrolling on smaller windows and to reduce intensity of notification */ 500 | #warningSign > SPAN { font-size: 160px !important; } 501 | /* text notification: improve string */ 502 | #warningSign + DIV > P:first-of-type { font-size: 0 !important; } 503 | #warningSign + DIV > P:first-of-type::after { font-size: large !important; content: "uBlock prevented page from loading:"; } 504 | /* filter heading: improve string */ 505 | #warningSign + DIV + DIV > P:first-of-type { font-size: 0 !important; } 506 | #warningSign + DIV + DIV > P:first-of-type::after { font-size: large !important; content: "In response to filter:"; } 507 | /* filter list indicator: italicize, improve string */ 508 | #whyex { font-style: italic !important; } 509 | #whyex > SPAN:first-of-type { display: none !important; } 510 | #whyex > SPAN:last-of-type::before { content: "From list: "; } 511 | /* close action: 512 | increase spacing to improve usability, 513 | fix erroneous button (action does not necessarily close browser window) */ 514 | #bye { margin-top: 6px !important; font-size: 0 !important; } 515 | #bye::after { line-height: 180% !important; padding: 10px !important; font-size: large !important; content: "Close Tab"; } 516 | /* reload after disabling strict blocking action: 517 | increase spacing to improve usability, 518 | change string to indicate actual action taken */ 519 | #proceed { margin-top: 70px !important; } 520 | #proceed::before { padding-top: 130px !important; content: "Or reload after disabling strict blocking for"; } 521 | #proceedTemplate > SPAN:first-of-type { display: none !important; } 522 | #proceed + P { margin-top: 8px !important; } 523 | } 524 | --------------------------------------------------------------------------------