├── LICENSE ├── README.md ├── preview ├── ff-midnight-cosmos-palette.png ├── ff-midnight-galaxy-palette.png ├── ff-midnight-preview-cosmos-1.png ├── ff-midnight-preview-cosmos-2.png └── ff-midnight-redshift-palette.png └── theme ├── css └── ff-midnight │ ├── about-pages.css │ ├── background-image.css │ ├── colors │ ├── ff-midnight-colors-cosmos.css │ ├── ff-midnight-colors-galaxy.css │ ├── ff-midnight-colors-redshift.css │ └── ff-midnight-colors-utility.css │ ├── extensions │ ├── multi-account-containers.css │ └── ublock-origin.css │ ├── ff-midnight-userchrome.css │ ├── page-info.css │ ├── pdf-viewer.css │ ├── shared-styles.css │ ├── tab-indicator.css │ └── view-source.css ├── userChrome.css └── userContent.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 heartfield 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🌚 FF Midnight - A Dark Theme for Firefox 2 | 3 | FF Midnight is a comprehensive dark theme system for Mozilla Firefox. It features interface styling that goes beyond the default built-in dark theme of the browser. 4 | 5 | FF Midnight styles the complete interface in a dark color scheme, including Sidebars, Preference pages, View source page, PDF Viewer, all Firefox About:Pages and it also features a dark theme for popular addons such as uBlock Origin and Multi-Account Containers. 6 | 7 | ## 🎨 Theme color options 8 | 9 | FF Midnight has 3 different dark color schemes that you can choose from: 10 | 11 | - **Galaxy** - A dark gray theme (default) 12 | - **Cosmos** - A dark blue theme 13 | - **Redshift** - A dark brown theme 14 | 15 | Adding your own color scheme is easy. Use one of the existing color scheme files as a starting point and change the colors. 16 | 17 | ## ⚙️ Installation 18 | 19 | 1. As a prerequisite you should use the Firefox dark theme. It can be selected on the `about:addons#themes` page. 20 | 2. Firefox does not load userChrome.css or userContent.css automatically anymore. To enable this go to the `about:config` page, search for `toolkit.legacyUserProfileCustomizations.stylesheets` and set the option to `True`. 21 | 3. Find your Profile folder (Profile folder names are different for everyone): 22 | Go to the URL `about:support` > Profile Folder > Show in Finder (MacOS) or Open folder (Windows). 23 | Alternatively go to `about:profiles` > Root Directory > Show in Finder (MacOS) or Open Folder (Windows). 24 | 4. Copy the contents of this repository's `theme` folder to the `chrome` folder in your Profile folder. Create the `chrome` folder in your Profile folder if there is none yet. 25 | 5. Optional: To change the default **Galaxy** color scheme to **Cosmos** or **Redshift** open `userChrome.css` and `userContent.css` and follow the instructions in there. 26 | 6. Optional: If you have the uBlock Origin and/or Multi-Account Containers extensions installed you can add theme styling to their interfaces as well. 27 | Go to `about:debugging#addons` and find and copy the UUID of these addons. Open the CSS files for these addons located in `theme\css\ff-midnight\extensions` and paste the UUID in the correct location (Instructions found in the css file). 28 | 7. Optional: Add a custom background image for the About:Home and About:Newtab pages: Open `background-image.css` and follow the instructions in there. 29 | 8. Restart the browser. 30 | 31 | 32 | ## 🌌 Preview 33 | 34 | ![FF Midnight screenshot](preview/ff-midnight-preview-cosmos-1.png) 35 | 36 | > Preferences page, Sidebar, Custom background for About:Newtab, Custom Tab indicators, uBlock Origin and Multi-Account Containers panels 37 | 38 | ![FF Midnight screenshot](preview/ff-midnight-preview-cosmos-2.png) 39 | 40 | > View Source page, About:Addons page, Page Info dialog window 41 | 42 | 43 | ![FF Midnight Cosmos palette](preview/ff-midnight-cosmos-palette.png) 44 | ![FF Midnight Galaxy palette](preview/ff-midnight-galaxy-palette.png) 45 | ![FF Midnight Redshift palette](preview/ff-midnight-redshift-palette.png) 46 | 47 | ## 👯‍♀️ Contributions 48 | 49 | This theme is tested on MacOS but it should work fine on Windows and Linux. If you find any bugs or have suggestions; all feedback is welcome. 50 | -------------------------------------------------------------------------------- /preview/ff-midnight-cosmos-palette.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heartfield/ff-midnight/547eefa8fd8b46acc8d93712fc8b5ca1a36cd53b/preview/ff-midnight-cosmos-palette.png -------------------------------------------------------------------------------- /preview/ff-midnight-galaxy-palette.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heartfield/ff-midnight/547eefa8fd8b46acc8d93712fc8b5ca1a36cd53b/preview/ff-midnight-galaxy-palette.png -------------------------------------------------------------------------------- /preview/ff-midnight-preview-cosmos-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heartfield/ff-midnight/547eefa8fd8b46acc8d93712fc8b5ca1a36cd53b/preview/ff-midnight-preview-cosmos-1.png -------------------------------------------------------------------------------- /preview/ff-midnight-preview-cosmos-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heartfield/ff-midnight/547eefa8fd8b46acc8d93712fc8b5ca1a36cd53b/preview/ff-midnight-preview-cosmos-2.png -------------------------------------------------------------------------------- /preview/ff-midnight-redshift-palette.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heartfield/ff-midnight/547eefa8fd8b46acc8d93712fc8b5ca1a36cd53b/preview/ff-midnight-redshift-palette.png -------------------------------------------------------------------------------- /theme/css/ff-midnight/about-pages.css: -------------------------------------------------------------------------------- 1 | /* ############################################################### 2 | // 3 | // Firefox About pages - combined styles (reference about:about) 4 | // 5 | // ############################################################### 6 | // 7 | // - url-prefix("about:") -> matches all Firefox About pages 8 | // - url-prefix("chrome://") -> matches content loaded in dialogs (Using a general prefix might cause some issues with other extensions. Further testing needed) 9 | // 10 | // - Regular expression in @-moz-document is allowed as: regexp("") 11 | // - Wildcard in @moz-document is not allowed 12 | // 13 | // #############################################################*/ 14 | 15 | @-moz-document 16 | url-prefix("about:"), 17 | url-prefix("chrome://") { 18 | 19 | :root { 20 | 21 | /* --------------------------------------------------------------- 22 | // Customized Custom Properties 23 | // -------------------------------------------------------------*/ 24 | 25 | --in-content-page-color: var(--ff-midnight-color-base30) !important; 26 | --in-content-page-background: var(--ff-midnight-color-base) !important; 27 | --in-content-text-color: var(--ff-midnight-color-base30) !important; 28 | --in-content-selected-text: var(--ff-midnight-color-base95) !important; 29 | --in-content-box-background: var(--ff-midnight-color-base95) !important; 30 | --in-content-box-background-odd: var(--ff-midnight-color-base95) !important; 31 | --in-content-box-background-hover: var(--ff-midnight-color-base92) !important; 32 | --in-content-box-background-active: var(--ff-midnight-color-base90) !important; 33 | --in-content-box-border-color: var(--ff-midnight-color-base70) !important; 34 | --in-content-item-hover: var(--ff-midnight-color-base120) !important; 35 | --in-content-item-selected: var(--ff-midnight-color-accent) !important; 36 | --in-content-border-highlight: var(--ff-midnight-color-accent) !important; 37 | --in-content-border-focus: var(--ff-midnight-color-accent) !important; 38 | --in-content-border-color: var(--ff-midnight-color-base70) !important; 39 | --in-content-category-outline-focus: 1px dotted var(--ff-midnight-color-accent) !important; 40 | --in-content-category-text: var(--ff-midnight-color-base5) !important; 41 | --in-content-category-text-active: var(--ff-midnight-color-base5) !important; 42 | --in-content-category-text-selected: var(--ff-midnight-color-accent) !important; 43 | --in-content-category-text-selected-active: var(--ff-midnight-color-accent) !important; 44 | --in-content-category-background-hover: var(--ff-midnight-color-base90) !important; 45 | --in-content-category-background-active: var(--ff-midnight-color-base92) !important; 46 | --in-content-category-background-selected-hover: var(--ff-midnight-color-base92) !important; 47 | --in-content-category-background-selected-active: var(--ff-midnight-color-base95) !important; 48 | --in-content-tab-color: var(--ff-midnight-color-base80) !important; 49 | --in-content-link-color: var(--ff-midnight-color-accent-dark) !important; 50 | --in-content-link-color-hover: var(--ff-midnight-color-accent) !important; 51 | --in-content-link-color-active: var(--ff-midnight-color-accent-light) !important; 52 | --in-content-link-color-visited: var(--ff-midnight-color-accent-dark) !important; 53 | --in-content-primary-button-background: var(--ff-midnight-color-accent) !important; 54 | --in-content-primary-button-background-hover: var(--ff-midnight-color-accent) !important; 55 | --in-content-primary-button-background-active: var(--ff-midnight-color-accent-light) !important; 56 | --in-content-table-background: var(--ff-midnight-color-base) !important; 57 | --in-content-table-border-dark-color: var(--ff-midnight-color-base92) !important; 58 | --in-content-table-header-background: var(--ff-midnight-color-base110) !important; 59 | --in-content-deemphasized-text: var(--ff-midnight-color-base50) !important; 60 | 61 | --blue-50: var(--ff-midnight-color-accent) !important; 62 | --blue-50-a30: var(--ff-midnight-color-accent) !important; 63 | --grey-20: #ededf0; 64 | --grey-30: var(--ff-midnight-color-base70) !important; 65 | --grey-60: #4a4a4f; 66 | --grey-90: #0c0c0d; 67 | --grey-90-a10: rgba(12, 12, 13, 0.1); 68 | --grey-90-a20: rgba(12, 12, 13, 0.2); 69 | --grey-90-a30: rgba(12, 12, 13, 0.3); 70 | --yellow-50: var(--ff-midnight-color-highlight-yellow) !important; 71 | --yellow-90: var(--ff-midnight-color-notice) !important; 72 | 73 | --shadow-10: 0 1px 4px var(--grey-90-a10); 74 | --card-shadow: var(--shadow-10); 75 | --card-outline-color: var(--grey-30); 76 | --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color); 77 | --card-shadow-focus: 0 0 0 2px var(--blue-50), 0 0 0 6px var(--blue-50-a30); 78 | 79 | 80 | } 81 | 82 | /* general text selection */ 83 | ::selection { 84 | color: var(--ff-midnight-color-base10) !important; 85 | background: var(--ff-midnight-color-base120) !important; 86 | text-shadow: none !important; 87 | } 88 | 89 | /* Checkboxes and radio styling */ 90 | .checkbox-check { 91 | background-color: var(--ff-midnight-color-base95) !important; 92 | background-image: none !important; 93 | box-shadow: 0 1px 1px 0 var(--ff-midnight-color-base95), inset 0 2px 0 0 #0000 !important; 94 | } 95 | 96 | .radio-check { 97 | background-color: var(--ff-midnight-color-base95) !important; 98 | background-image: none !important; 99 | box-shadow: 0 1px 1px 0 var(--ff-midnight-color-base95), inset 0 2px 0 0 #0000 !important; 100 | } 101 | 102 | .checkbox-check[checked], 103 | .radio-check[selected] { 104 | fill: var(--ff-midnight-color-accent) !important; 105 | } 106 | 107 | label[disabled="true"] { 108 | color: var(--ff-midnight-color-base50) !important; 109 | } 110 | 111 | button:not(.close-icon):not(.icon-settings), 112 | select, 113 | input[type="color"], 114 | menulist, 115 | *.numberbox-input::-moz-number-spin-up, 116 | *.numberbox-input::-moz-number-spin-down { 117 | border: 1px solid var(--ff-midnight-color-base90) !important; 118 | } 119 | 120 | /* Focus outline styles */ 121 | button:-moz-focusring, 122 | menulist:-moz-focusring, 123 | checkbox:-moz-focusring > .checkbox-check, 124 | input[type="checkbox"]:-moz-focusring + label:before, 125 | radio[focused="true"] > .radio-check { 126 | outline: 2px solid var(--ff-midnight-color-accent) !important; 127 | outline-offset: 0 !important; 128 | -moz-outline-radius: 3px !important; 129 | } 130 | 131 | radio[focused="true"] > .radio-check { 132 | -moz-outline-radius: 100% !important; 133 | } 134 | 135 | /* tables */ 136 | table { 137 | border-collapse: collapse; 138 | } 139 | 140 | th { 141 | color: var(--ff-midnight-color-base10) !important; 142 | } 143 | 144 | /* Menulist disabled items */ 145 | menulist > menupopup > menu[disabled="true"], 146 | menulist > menupopup > menuitem[disabled="true"], 147 | button[type="menu"] > menupopup > menu[disabled="true"], 148 | button[type="menu"] > menupopup > menuitem[disabled="true"] { 149 | color: var(--ff-midnight-color-base30) !important; 150 | } 151 | 152 | /* Menulist icon color */ 153 | menulist:not([editable="true"]) > .menulist-dropmarker { 154 | fill: var(--ff-midnight-color-accent) !important; 155 | } 156 | 157 | /* Checkbox and Radio button label disabled color */ 158 | [disabled="true"] .checkbox-label, 159 | [disabled="true"] .radio-label { 160 | color: var(--ff-midnight-color-base50) !important; 161 | } 162 | 163 | /* Checkbox and Radio button disabled description text color */ 164 | description.indent, .indent > description { 165 | color: var(--ff-midnight-color-base50) !important; 166 | } 167 | 168 | /* Searchbox icon color */ 169 | textbox[type="search"]:not([searchbutton]) > .textbox-input-box > .textbox-search-sign { 170 | -moz-context-properties: fill; 171 | fill: var(--ff-midnight-color-accent) !important; 172 | } 173 | 174 | 175 | /* --------------------------------------------------------------- 176 | // Richlistbox 177 | // -------------------------------------------------------------*/ 178 | 179 | /* 180 | richlistbox { 181 | background-color: -moz-Field; 182 | color: -moz-FieldText; 183 | } 184 | */ 185 | 186 | richlistbox:not(#categories):not(.list):-moz-focusring { 187 | border: 1px solid var(--ff-midnight-color-base70) !important; 188 | } 189 | 190 | richlistbox[disabled="true"] { 191 | color: var(--ff-midnight-color-base50) !important; 192 | } 193 | 194 | richlistitem[selected="true"] { 195 | background-color: var(--ff-midnight-color-base120) !important; 196 | color: var(--ff-midnight-color-base10) !important; 197 | } 198 | 199 | richlistbox:focus > richlistitem[selected="true"] { 200 | background-color: var(--ff-midnight-color-base120) !important; 201 | color: var(--ff-midnight-color-base0) !important; 202 | } 203 | 204 | 205 | /* --------------------------------------------------------------- 206 | // Dialogs 207 | // -------------------------------------------------------------*/ 208 | 209 | dialog, 210 | window, 211 | .prefpane, 212 | .windowDialog { 213 | background-color: var(--ff-midnight-color-base) !important; 214 | color: var(--ff-midnight-color-base30) !important; 215 | } 216 | 217 | .dialogBox { 218 | background-color: var(--ff-midnight-color-base) !important; 219 | color: var(--ff-midnight-color-base30) !important; 220 | } 221 | 222 | .dialogBox > .groupbox-title { 223 | background-color: var(--ff-midnight-color-base110) !important; 224 | border-bottom: 1px solid var(--ff-midnight-color-base92) !important; 225 | } 226 | 227 | #permissionsDisableDescription { 228 | color: var(--ff-midnight-color-base50) !important; 229 | } 230 | 231 | .dialogTitleBar { 232 | background-color: var(--ff-midnight-color-base95) !important; 233 | border-bottom: 1px solid var(--ff-midnight-color-base90) !important; 234 | } 235 | 236 | 237 | /* update history dialog */ 238 | #historyItems { 239 | -moz-appearance: none !important; 240 | } 241 | 242 | /* clear all history warning box */ 243 | #sanitizeEverythingWarningBox { 244 | background-color: var(--ff-midnight-color-base90) !important; 245 | border: 1px solid var(--ff-midnight-color-base70) !important; 246 | } 247 | 248 | 249 | /* Message bar */ 250 | .message-bar { 251 | background-color: var(--ff-midnight-color-highlight-yellow) !important; 252 | color: var(--ff-midnight-color-base80) !important; 253 | } 254 | 255 | } /* End main about: pages moz-document wrapper */ 256 | 257 | 258 | 259 | /* ############################################################### 260 | // 261 | // Firefox About pages - individual styles 262 | // 263 | // #############################################################*/ 264 | 265 | 266 | /* --------------------------------------------------------------- 267 | // About:Home 268 | // About:Newtab 269 | // 270 | // These custom properties don't work when placed inside @-moz-document wrapper (!?) 271 | // -------------------------------------------------------------*/ 272 | 273 | /* --------------------------------------------------------------- 274 | // New Tab Custom Properties - ref. activity-stream.css 275 | // -------------------------------------------------------------*/ 276 | 277 | body.activity-stream { 278 | 279 | --newtab-background-color: var(--ff-midnight-color-base) !important; 280 | --newtab-border-primary-color: rgba(249, 249, 250, 0.8); 281 | --newtab-border-secondary-color: rgba(249, 249, 250, 0.1); 282 | --newtab-button-primary-color: var(--ff-midnight-color-accent) !important; 283 | --newtab-button-secondary-color: var(--ff-midnight-color-base90) !important; 284 | --newtab-element-active-color: rgba(249, 249, 250, 0.2); 285 | --newtab-element-hover-color: rgba(249, 249, 250, 0.1); 286 | --newtab-icon-primary-color: rgba(249, 249, 250, 0.8); 287 | --newtab-icon-secondary-color: rgba(249, 249, 250, 0.4); 288 | --newtab-icon-tertiary-color: rgba(249, 249, 250, 0.4); 289 | --newtab-inner-box-shadow-color: rgba(249, 249, 250, 0.2); 290 | --newtab-link-primary-color: var(--ff-midnight-color-accent) !important; 291 | --newtab-link-secondary-color: var(--ff-midnight-color-accent-dark) !important; 292 | --newtab-text-conditional-color: var(--ff-midnight-color-base10) !important; 293 | --newtab-text-primary-color: var(--ff-midnight-color-base30) !important; 294 | --newtab-text-secondary-color: rgba(249, 249, 250, 0.8); 295 | --newtab-textbox-background-color: var(--ff-midnight-color-base92) !important; 296 | --newtab-textbox-border: rgba(249, 249, 250, 0.1) !important; 297 | --newtab-textbox-focus-color: var(--ff-midnight-color-base70) !important; 298 | --newtab-textbox-focus-boxshadow: 0 0 0 1px var(--ff-midnight-color-base70), 0 0 0 3px var(--ff-midnight-color-base70) !important; /* rgba(69, 161, 255, 0.3); */ 299 | --newtab-contextmenu-background-color: var(--ff-midnight-color-base95) !important; 300 | --newtab-contextmenu-button-color: var(--ff-midnight-color-base) !important; 301 | --newtab-modal-color: var(--ff-midnight-color-base) !important; 302 | --newtab-overlay-color: rgba(12, 12, 13, 0.8); 303 | --newtab-section-header-text-color: rgba(249, 249, 250, 0.8); 304 | --newtab-section-navigation-text-color: rgba(249, 249, 250, 0.8); 305 | --newtab-section-active-contextmenu-color: var(--ff-midnight-color-base0) !important; 306 | --newtab-search-border-color: rgba(249, 249, 250, 0.2); 307 | --newtab-search-dropdown-color: var(--ff-midnight-color-base90) !important; 308 | --newtab-search-dropdown-header-color: var(--ff-midnight-color-base90) !important; 309 | --newtab-search-header-background-color: var(--ff-midnight-color-base80) !important; 310 | --newtab-search-icon-color: rgba(249, 249, 250, 0.6); 311 | --newtab-topsites-background-color: var(--ff-midnight-color-base90) !important; 312 | --newtab-topsites-icon-shadow: none; 313 | --newtab-topsites-label-color: rgba(249, 249, 250, 0.8); 314 | --newtab-card-active-outline-color: var(--ff-midnight-color-base80) !important; 315 | --newtab-card-background-color: var(--ff-midnight-color-base90) !important; 316 | --newtab-card-hairline-color: rgba(249, 249, 250, 0.1); 317 | --newtab-card-shadow: 0 1px 8px 0 rgba(12, 12, 13, 0.2); 318 | --newtab-snippets-background-color: var(--ff-midnight-color-base110) !important; 319 | --newtab-snippets-hairline-color: rgba(255, 255, 255, 0.1); 320 | } 321 | 322 | /* Tweak the context menu dropdown hovers */ 323 | body.activity-stream.dark-theme .context-menu > ul > li > a:-moz-any(:focus, :hover) { 324 | background: var(--ff-midnight-color-base120) !important; 325 | color: var(--ff-midnight-color-base10) !important; 326 | } 327 | 328 | 329 | /* Hide the Firefox icon for the Guide Tour - Default: not hidden */ 330 | /* 331 | #onboarding-overlay-button { 332 | display: none !important; 333 | } 334 | */ 335 | 336 | #onboarding-overlay { 337 | color: var(--ff-midnight-color-base30) !important; 338 | } 339 | 340 | #onboarding-overlay-button::after { 341 | border: 2px solid var(--ff-midnight-color-base95) !important; 342 | background: var(--ff-midnight-color-accent) !important; 343 | } 344 | 345 | #onboarding-overlay-button:hover::after, 346 | #onboarding-overlay-button.onboarding-speech-bubble::after { 347 | background: var(--ff-midnight-color-accent-dark) !important; 348 | color: var(--ff-midnight-color-base) !important; 349 | } 350 | 351 | #onboarding-overlay-button-watermark-icon { 352 | fill: var(--ff-midnight-color-base50) !important; 353 | } 354 | 355 | #onboarding-overlay.onboarding-opened > #onboarding-overlay-dialog { 356 | background: var(--ff-midnight-color-base) !important; 357 | border: none !important; 358 | box-shadow: none !important; 359 | } 360 | 361 | #onboarding-tour-list .onboarding-tour-item { 362 | --onboarding-tour-item-active-color: var(--ff-midnight-color-accent) !important; 363 | } 364 | 365 | #onboarding-tour-list .onboarding-tour-item::after { 366 | background-color: var(--ff-midnight-color-base10) !important; 367 | } 368 | 369 | .onboarding-tour-action-button { 370 | background: var(--ff-midnight-color-accent) !important; 371 | color: var(--ff-midnight-color-base) !important; 372 | } 373 | 374 | .onboarding-tour-action-button:hover:not([disabled]) { 375 | background: var(--ff-midnight-color-accent-dark) !important; 376 | } 377 | 378 | .onboarding-tour-action-button:active:not([disabled]) { 379 | background: var(--ff-midnight-color-accent-dark) !important; 380 | } 381 | 382 | .onboarding-action-button { 383 | background: var(--ff-midnight-color-base95) !important; 384 | border: 1px solid var(--ff-midnight-color-base70) !important; 385 | color: var(--ff-midnight-color-base30) !important; 386 | } 387 | 388 | .onboarding-action-button:hover { 389 | background-color: var(--ff-midnight-color-base92) !important; 390 | } 391 | 392 | .onboarding-action-button:active { 393 | background-color: var(--ff-midnight-color-base90) !important; 394 | } 395 | 396 | .onboarding-tour-content > img { 397 | filter: invert(1) brightness(200%); 398 | } 399 | 400 | /* --------------------------------------------------------------- 401 | // About:Home, Newtab, Blank 402 | // 403 | // Prevent white flash when opening new tabs 404 | // ** buggy, may not always work! ** 405 | // -------------------------------------------------------------*/ 406 | 407 | @-moz-document url-prefix("about:newtab"), 408 | @-moz-document url-prefix("about:home"), 409 | @-moz-document url-prefix("about:blank") { 410 | html:not(#ublock0-epicker), 411 | html:not(#ublock0-epicker) body, 412 | html:not(#ublock0-epicker) #newtab-customize-overlay { 413 | background-color: var(--ff-midnight-color-base) !important; 414 | color: var(--ff-midnight-color-base10) !important; 415 | } 416 | } 417 | 418 | 419 | /* --------------------------------------------------------------- 420 | // About:Addons 421 | // -------------------------------------------------------------*/ 422 | 423 | @-moz-document url-prefix("about:addons") { 424 | 425 | /* make scrollbox border invisible when focused */ 426 | .list:-moz-focusring > scrollbox > .scrollbox-innerbox { 427 | border-color: transparent !important; 428 | } 429 | 430 | /* Needed to override normal button style from inContent.css */ 431 | button.button-link:not([disabled="true"]):active:hover { 432 | color: var(--ff-midnight-color-accent) !important; 433 | } 434 | 435 | /* Text color for disabled extensions */ 436 | #addon-list .addon[active="false"] > .content-container > .content-inner-container { 437 | color: var(--ff-midnight-color-base50) !important; 438 | } 439 | 440 | /* Set text color for all content */ 441 | .detail-view-container { 442 | color: inherit !important; 443 | } 444 | 445 | /* Remove the text shadows in details rows */ 446 | .detail-row, 447 | .detail-row-complex { 448 | text-shadow: none !important; 449 | } 450 | 451 | /* Addon options content is loaded in a frame and is not stylable so we can only set a background for this section */ 452 | #addon-options-prompts-stack { 453 | background: var(--ff-midnight-color-base10) !important; 454 | margin-top: 20px; 455 | padding: 20px; 456 | border-radius: 3px; 457 | } 458 | 459 | /* Header options button */ 460 | .header-button:not([disabled="true"]):hover, 461 | #header-utils-btn:not([disabled="true"]):hover { 462 | background-color: var(--ff-midnight-color-base90) !important; 463 | } 464 | 465 | #header-utils-btn { 466 | fill: var(--ff-midnight-color-base30) !important; 467 | } 468 | 469 | /* disable gradient from deleted addon message header */ 470 | .addon-view[notification], 471 | .addon-view[pending] { 472 | background-image:none !important; 473 | } 474 | 475 | .addon-view[pending="disable"] .pending, 476 | .addon-view[pending="uninstall"] .pending { 477 | color: var(--ff-midnight-color-base10) !important; 478 | } 479 | 480 | .category-badge { 481 | background-color: var(--ff-midnight-color-accent-dark) !important; 482 | color: var(--ff-midnight-color-base0) !important; 483 | } 484 | 485 | .update-info-container .update-available-notice { 486 | color: var(--ff-midnight-color-accent-dark) !important; 487 | } 488 | 489 | .addon .relnotes-toggle > .button-box > .button-icon { 490 | filter: invert(70%); 491 | } 492 | 493 | } 494 | 495 | /* Get Addons page */ 496 | @-moz-document url-prefix("https://discovery.addons.mozilla.org/en-US/firefox/discovery/pane/") { 497 | html, body { 498 | background: var(--ff-midnight-color-base) !important; 499 | } 500 | 501 | header h1 { 502 | color: var(--ff-midnight-color-base30) !important; 503 | } 504 | 505 | .disco-content { 506 | color: var(--ff-midnight-color-base30) !important; 507 | } 508 | 509 | .Button--action { 510 | background: var(--ff-midnight-color-accent-dark) !important; 511 | } 512 | } 513 | 514 | 515 | /* --------------------------------------------------------------- 516 | // About:Preferences 517 | // -------------------------------------------------------------*/ 518 | 519 | @-moz-document url-prefix("about:preferences") { 520 | 521 | /* Preferences Category section border */ 522 | .subcategory:not([hidden]) ~ .subcategory { 523 | border-top: 1px solid var(--ff-midnight-color-base92) !important; 524 | } 525 | 526 | /* Preferences > Home - icons */ 527 | #homeContentsGroup checkbox[src] .checkbox-icon { 528 | fill: var(--ff-midnight-color-accent) !important; 529 | -moz-context-properties: fill; 530 | } 531 | 532 | /* disconnect sync modal */ 533 | .deleteData { 534 | color: var(--ff-midnight-color-base50) !important; 535 | } 536 | 537 | .deleteOptions { 538 | border: thin solid var(--ff-midnight-color-base70) !important; 539 | } 540 | 541 | .extension-controlled { 542 | background: var(--ff-midnight-color-base80) !important; 543 | color: var(--ff-midnight-color-base10) !important; 544 | } 545 | 546 | .spotlight { 547 | background-color: var(--ff-midnight-color-base92) !important; 548 | color: var(--ff-midnight-color-base10) !important; 549 | } 550 | 551 | description.indent, .indent > description { 552 | color: var(--ff-midnight-color-base50) !important; 553 | } 554 | 555 | 556 | /* Privacy settings */ 557 | .content-blocking-category { 558 | border: 1px solid var(--ff-midnight-color-base90) !important; 559 | background-color: var(--ff-midnight-color-base110) !important; 560 | } 561 | 562 | .content-blocking-category.selected { 563 | border: 1px solid var(--ff-midnight-color-accent) !important; 564 | background-color: var(--ff-midnight-color-base92) !important; 565 | } 566 | 567 | .content-blocking-warning { 568 | background-color: var(--ff-midnight-color-base) !important; 569 | } 570 | 571 | #trackingGroup description.indent, #trackingGroup .indent > description { 572 | color: var(--ff-midnight-color-base20) !important; 573 | } 574 | 575 | .reload-tabs-button { 576 | fill: var(--ff-midnight-color-base120) !important; 577 | background-color: var(--ff-midnight-color-accent) !important; 578 | } 579 | 580 | .reload-tabs-button:not([disabled="true"]):hover { 581 | background-color: var(--ff-midnight-color-accent-darker) !important; 582 | } 583 | 584 | .reload-tabs-button .button-text { 585 | color: var(--ff-midnight-color-base120) !important; 586 | } 587 | 588 | } 589 | 590 | /* --------------------------------------------------------------- 591 | // About:studies 592 | // -------------------------------------------------------------*/ 593 | 594 | @-moz-document url-prefix("about:studies") { 595 | .study-description code { 596 | background-color: var(--ff-midnight-color-base120) !important; 597 | } 598 | } 599 | 600 | /* --------------------------------------------------------------- 601 | // About:Credits 602 | // -------------------------------------------------------------*/ 603 | 604 | @-moz-document 605 | url-prefix("about:credits"), 606 | url-prefix("https://www.mozilla.org/credits/") { 607 | html { 608 | background: var(--ff-midnight-color-base) !important; 609 | } 610 | 611 | body { 612 | color: var(--ff-midnight-color-base30) !important; 613 | } 614 | } 615 | 616 | 617 | /* --------------------------------------------------------------- 618 | // About:Debugging 619 | // -------------------------------------------------------------*/ 620 | 621 | @-moz-document url-prefix("about:debugging") { 622 | 623 | /* List items */ 624 | .addon-target-container { 625 | background: var(--ff-midnight-color-base95) !important; 626 | border-radius: 2px; 627 | } 628 | 629 | /* Checkbox */ 630 | html input[type="checkbox"] { 631 | background-color: var(--ff-midnight-color-base95) !important; 632 | background-image: url("chrome://global/skin/in-content/check.svg") !important; 633 | box-shadow: 0 1px 1px 0 var(--ff-midnight-color-base95), inset 0 2px 0 0 #0000 !important; 634 | fill: var(--ff-midnight-color-accent) !important; 635 | } 636 | 637 | .addon-target-button:disabled { 638 | color: var(--ff-midnight-color-base50); 639 | } 640 | 641 | /* Service workers tab - notification */ 642 | .service-worker-multi-process { 643 | background-color: var(--ff-midnight-color-base120) !important; 644 | border-radius: 2px; 645 | } 646 | 647 | .addons-install-error .warning, 648 | .service-worker-multi-process .warning { 649 | filter: inherit !important; 650 | } 651 | 652 | .addons-install-error { 653 | background-color: var(--ff-midnight-color-notice) !important; 654 | color: var(--ff-midnight-color-base) !important; 655 | } 656 | 657 | .addon-target-button { 658 | color: var(--ff-midnight-color-accent) !important; 659 | } 660 | 661 | .target-status-stopped { 662 | border-color: var(--ff-midnight-color-base50) !important; 663 | background-color: var(--ff-midnight-color-base50) !important; 664 | border-radius: 2px; 665 | } 666 | 667 | .addon-target-button:enabled:focus, 668 | .addon-target-button:enabled:hover { 669 | color: var(--ff-midnight-color-accent-dark) !important; 670 | } 671 | 672 | .addon-target-button:enabled:hover:active { 673 | color: var(--ff-midnight-color-accent-darker) !important; 674 | } 675 | } 676 | 677 | 678 | /* --------------------------------------------------------------- 679 | // About:Devtools 680 | // -------------------------------------------------------------*/ 681 | 682 | @-moz-document url-prefix("about:devtools") { 683 | .external, 684 | .external:hover, 685 | .external:visited, 686 | .external:hover:active { 687 | color: var(--ff-midnight-color-accent) !important; 688 | } 689 | } 690 | 691 | /* --------------------------------------------------------------- 692 | // About:WebRTC 693 | // -------------------------------------------------------------*/ 694 | 695 | @-moz-document url-prefix("about:webrtc") { 696 | html { 697 | background: var(--ff-midnight-color-base) !important; 698 | color: var(--ff-midnight-color-base30) !important; 699 | } 700 | 701 | #content > div { 702 | border-color: var(--ff-midnight-color-base92) !important; 703 | background: var(--ff-midnight-color-base95) !important; 704 | } 705 | 706 | /* todo: buttons */ 707 | } 708 | 709 | 710 | /* --------------------------------------------------------------- 711 | // About:Memory 712 | // -------------------------------------------------------------*/ 713 | 714 | @-moz-document url-prefix("about:memory") { 715 | html { 716 | background: var(--ff-midnight-color-base) !important; 717 | color: var(--ff-midnight-color-base30) !important; 718 | } 719 | 720 | div.section, 721 | div.opsRow { 722 | border-color: var(--ff-midnight-color-base92) !important; 723 | background: var(--ff-midnight-color-base95) !important; 724 | color: var(--ff-midnight-color-base30) !important; 725 | } 726 | 727 | a { 728 | color: var(--ff-midnight-color-accent) !important; 729 | } 730 | 731 | /* todo: buttons */ 732 | } 733 | 734 | 735 | /* --------------------------------------------------------------- 736 | // About:Performance 737 | // -------------------------------------------------------------*/ 738 | 739 | @-moz-document url-prefix("about:performance") { 740 | #subprocess-reports { 741 | background: var(--ff-midnight-color-base95) !important; 742 | border-collapse: collapse !important; 743 | } 744 | 745 | #subprocess-reports td { 746 | background: var(--ff-midnight-color-base95) !important; 747 | } 748 | } 749 | 750 | 751 | /* --------------------------------------------------------------- 752 | // About:Plugins 753 | // -------------------------------------------------------------*/ 754 | 755 | @-moz-document url-prefix("about:plugins") { 756 | body { 757 | background-color: var(--ff-midnight-color-base) !important; 758 | color: var(--ff-midnight-color-base30) !important; 759 | font: inherit !important; 760 | } 761 | 762 | .notice { 763 | background: var(--ff-midnight-color-base95) !important; 764 | border: 1px solid var(--ff-midnight-color-base80) !important; 765 | border-radius: 3px; 766 | } 767 | 768 | a { 769 | color: var(--ff-midnight-color-accent) !important; 770 | } 771 | 772 | th { 773 | background-color: var(--ff-midnight-color-base110) !important; 774 | color: var(--ff-midnight-color-base30) !important; 775 | } 776 | 777 | table, th, td { 778 | border-color: var(--ff-midnight-color-base90) !important; 779 | border-collapse: collapse !important; 780 | } 781 | } 782 | 783 | /* --------------------------------------------------------------- 784 | // About:Serviceworkers 785 | // -------------------------------------------------------------*/ 786 | 787 | @-moz-document url-prefix("about:serviceworkers") { 788 | html { 789 | background: var(--ff-midnight-color-base) !important; 790 | color: var(--ff-midnight-color-base30) !important; 791 | } 792 | 793 | a { 794 | color: var(--ff-midnight-color-accent) !important; 795 | } 796 | 797 | a:visited { 798 | color: var(--ff-midnight-color-accent-darker) !important; 799 | } 800 | 801 | hr { 802 | border-bottom: 1px solid var(--ff-midnight-color-base90) !important; 803 | height: 0; 804 | border-top: 0; 805 | } 806 | 807 | button { 808 | -moz-appearance: none; 809 | background: var(--ff-midnight-color-base110) !important; 810 | color: var(--ff-midnight-color-base30) !important; 811 | padding: 10px 7px; 812 | margin: 10px 10px 10px 0; 813 | border-radius: 3px; 814 | cursor: pointer; 815 | } 816 | 817 | button:hover { 818 | background: var(--ff-midnight-color-base120) !important; 819 | } 820 | 821 | } 822 | 823 | 824 | 825 | /* --------------------------------------------------------------- 826 | // About:Studies 827 | // -------------------------------------------------------------*/ 828 | 829 | @-moz-document url-prefix("about:studies") { 830 | :root { 831 | --icon-background-disabled-color: var(--ff-midnight-color-base50) !important; 832 | --body-text-disabled-color: var(--ff-midnight-color-base50) !important; 833 | --info-box-background-color: var(--ff-midnight-color-base120) !important; 834 | --info-box-border-color: var(--ff-midnight-color-base95) !important; 835 | --study-status-active-color: var(--ff-midnight-color-accent-dark) !important; 836 | --study-status-disabled-color: var(--ff-midnight-color-base50) !important; 837 | } 838 | } 839 | 840 | /* --------------------------------------------------------------- 841 | // About:Sync-log 842 | // -------------------------------------------------------------*/ 843 | 844 | @-moz-document url-prefix("about:sync-log") { 845 | :root { 846 | background: var(--ff-midnight-color-base) !important; 847 | color: var(--ff-midnight-color-base30) !important; 848 | font: 14px message-box !important; 849 | } 850 | 851 | body { 852 | background: var(--ff-midnight-color-base110) !important; 853 | border: 1px solid var(--ff-midnight-color-base90) !important; 854 | color: var(--ff-midnight-color-base30) !important; 855 | } 856 | 857 | h1 { 858 | font-size: 120% !important; 859 | border-bottom: 1px solid var(--ff-midnight-color-base90) !important; 860 | } 861 | 862 | a { 863 | padding: 5px 0; 864 | display: inline-block; 865 | color: var(--ff-midnight-color-accent) !important; 866 | } 867 | 868 | a:visited { 869 | color: var(--ff-midnight-color-accent-darker) !important; 870 | } 871 | 872 | body > table > tbody > tr:hover { 873 | outline: 1px solid var(--ff-midnight-color-base90) !important; 874 | } 875 | 876 | .dir::before, .file > img { 877 | filter: invert(50%); 878 | } 879 | } 880 | 881 | /* --------------------------------------------------------------- 882 | // About:Cache 883 | // About:Buildconfig 884 | // -------------------------------------------------------------*/ 885 | 886 | @-moz-document url-prefix("about:cache"),url-prefix("about:buildconfig") { 887 | html { 888 | background: var(--ff-midnight-color-base) !important; 889 | color: var(--ff-midnight-color-base30) !important; 890 | font-size: 14px !important; 891 | } 892 | 893 | a { 894 | color: var(--ff-midnight-color-accent) !important; 895 | } 896 | } 897 | 898 | /* --------------------------------------------------------------- 899 | // About:Telemetry 900 | // -------------------------------------------------------------*/ 901 | 902 | @-moz-document url-prefix("about:telemetry") { 903 | .dropdown { 904 | fill: var(--ff-midnight-color-base10) !important; 905 | } 906 | 907 | #ping-type { 908 | border: 1px solid var(--ff-midnight-color-base90); 909 | background-color: var(--ff-midnight-color-base110); 910 | border-radius: 3px; 911 | padding: 3px 0; 912 | } 913 | 914 | #ping-picker { 915 | background-color: var(--ff-midnight-color-base90) !important; 916 | } 917 | 918 | 919 | #page-description { 920 | border: 1px solid var(--ff-midnight-color-base70) !important; 921 | } 922 | 923 | .bar-inner { 924 | background-color: var(--ff-midnight-color-accent) !important; 925 | border: 1px solid var(--ff-midnight-color-accent) !important; 926 | } 927 | } 928 | 929 | /* --------------------------------------------------------------- 930 | // Reader view 931 | // 932 | // Avoid adding ID selector rules in this style sheet, since they 933 | // could match elements in the article content. 934 | // -------------------------------------------------------------*/ 935 | 936 | @-moz-document url-prefix("about:reader") { 937 | body.light { 938 | color: var(--ff-midnight-color-base90) !important; 939 | background-color: var(--ff-midnight-color-base10) !important; 940 | } 941 | 942 | body.dark { 943 | color: var(--ff-midnight-color-base30) !important; 944 | background-color: var(--ff-midnight-color-base) !important; 945 | } 946 | 947 | body.dark *::-moz-selection { 948 | background-color: var(--ff-midnight-color-base120) !important; 949 | color: var(--ff-midnight-color-base10) !important; 950 | } 951 | 952 | body.dark a::-moz-selection { 953 | color: var(--ff-midnight-color-base30) !important; 954 | } 955 | 956 | /* Expanded font-stack */ 957 | body.sans-serif { 958 | font-family: "Avenir Next", Helvetica, Arial, sans-serif !important; 959 | } 960 | 961 | body.serif, 962 | body.serif .remove-button { 963 | font-family: Georgia, "Times New Roman", serif; 964 | } 965 | 966 | .light-button { 967 | color: var(--ff-midnight-color-base90) !important; 968 | background-color: var(--ff-midnight-color-base10) !important; 969 | } 970 | 971 | .dark-button { 972 | color: var(--ff-midnight-color-base30) !important; 973 | background-color: var(--ff-midnight-color-base) !important; 974 | } 975 | 976 | /* 977 | .sans-serif-button { 978 | font-family: "Avenir Next", Helvetica, Arial, sans-serif !important; 979 | } 980 | */ 981 | 982 | /* 983 | .serif-button { 984 | font-family: Georgia, "Times New Roman", serif; 985 | } 986 | */ 987 | 988 | 989 | /* Header */ 990 | .domain { 991 | color: var(--ff-midnight-color-accent) !important; 992 | } 993 | 994 | /* Controls toolbar */ 995 | .toolbar { 996 | background-color: var(--ff-midnight-color-base110) !important; 997 | border-right: 1px solid var(--ff-midnight-color-base120) !important; 998 | } 999 | 1000 | .button { 1001 | color: var(--ff-midnight-color-base30) !important; 1002 | background-color: var(--ff-midnight-color-base110) !important; 1003 | } 1004 | 1005 | .toolbar .button { 1006 | border-right: 1px solid var(--ff-midnight-color-base120) !important; 1007 | border-bottom: 1px solid var(--ff-midnight-color-base) !important; 1008 | } 1009 | 1010 | 1011 | /* Popup */ 1012 | /* These styles are unchanged for now */ 1013 | .dropdown-popup { 1014 | background-color: #fbfbfb; 1015 | border: 1px solid #b5b5b5; 1016 | box-shadow: 0 1px 3px var(--ff-midnight-color-base120) !important; 1017 | } 1018 | 1019 | .font-type-buttons > button, 1020 | .font-size-buttons > button, 1021 | .content-width-buttons > button, 1022 | .line-height-buttons > button { 1023 | border-left: 1px solid #B5B5B5; 1024 | border-bottom: 1px solid #B5B5B5; 1025 | } 1026 | 1027 | .font-type-buttons > button:active:hover, 1028 | .font-type-buttons > button.selected, 1029 | .color-scheme-buttons > button:active:hover, 1030 | .color-scheme-buttons > button.selected { 1031 | box-shadow: inset 0 -3px 0 0 #fc6420; 1032 | } 1033 | 1034 | .font-type-buttons > button:active:hover, 1035 | .font-type-buttons > button.selected { 1036 | border-bottom: 1px solid #FC6420; 1037 | } 1038 | 1039 | /* Make the serif button content the same size as the sans-serif button content. */ 1040 | .font-type-buttons > button > .description { 1041 | color: #666; 1042 | } 1043 | 1044 | .button:hover, 1045 | .font-size-buttons > button:hover, 1046 | .font-type-buttons > button:hover, 1047 | .content-width-buttons > button:hover, 1048 | .line-height-buttons > button:hover { 1049 | background-color: #ebebeb; 1050 | } 1051 | 1052 | .dropdown.open, 1053 | .button:active, 1054 | .font-size-buttons > button:active, 1055 | .font-size-buttons > button.selected, 1056 | .content-width-buttons > button:active, 1057 | .content-width-buttons > button.selected, 1058 | .line-height-buttons > button:active, 1059 | .line-height-buttons > button.selected { 1060 | background-color: #dadada; 1061 | } 1062 | 1063 | /* Toolbar icons */ 1064 | .close-button { 1065 | fill: var(--ff-midnight-color-base30) !important; 1066 | } 1067 | 1068 | .close-button:hover, 1069 | .close-button:hover:active { 1070 | fill: var(--ff-midnight-color-base10) !important; 1071 | background-color: var(--ff-midnight-color-base120) !important; 1072 | border-bottom: 1px solid var(--ff-midnight-color-base120) !important; 1073 | border-right: 1px solid var(--ff-midnight-color-base120) !important; 1074 | } 1075 | 1076 | .moz-reader-content a:link, 1077 | .moz-reader-content a:link:hover, 1078 | .moz-reader-content a:link:active { 1079 | color: var(--ff-midnight-color-accent) !important; 1080 | } 1081 | 1082 | .moz-reader-content a:visited { 1083 | color: var(--ff-midnight-color-base50) !important; 1084 | } 1085 | } 1086 | 1087 | /* --------------------------------------------------------------- 1088 | // About Certification error page 1089 | // -------------------------------------------------------------*/ 1090 | 1091 | body.certerror, 1092 | body.caution { 1093 | --exception-button-container-background: var(--ff-midnight-color-base90); 1094 | } 1095 | 1096 | body.caution { 1097 | border-color: var(--ff-midnight-color-notice) !important; 1098 | } 1099 | 1100 | body.certerror .advanced-panel, 1101 | body.connectionFailure .advanced-panel, 1102 | body.netInterrupt .advanced-panel, 1103 | body.netTimeout .advanced-panel, 1104 | body.netReset .advanced-panel, 1105 | body.netOffline .advanced-panel, 1106 | body.dnsNotFound .advanced-panel, 1107 | body.malformedURI .advanced-panel, 1108 | body.clockSkewError .advanced-panel { 1109 | background: var(--ff-midnight-color-base95) !important; 1110 | border-color: var(--ff-midnight-color-base90) !important; 1111 | } 1112 | 1113 | /* --------------------------------------------------------------- 1114 | // Private window 1115 | // -------------------------------------------------------------*/ 1116 | 1117 | html.private .search-handoff-button, .search-handoff-button:active, .search-handoff-button:enabled:hover:active { 1118 | background-color: var(--ff-midnight-color-base70) !important; 1119 | color: var(--ff-midnight-color-base10) !important; 1120 | } 1121 | 1122 | html.private .search-inner-wrapper .search-handoff-button:hover { 1123 | background-color: var(--ff-midnight-color-base70) !important; 1124 | } 1125 | 1126 | html.private .search-handoff-button.focused { 1127 | border: solid 1px var(--ff-midnight-color-accent) !important; 1128 | box-shadow: 0 0 0 1px var(--ff-midnight-color-accent) !important; 1129 | } -------------------------------------------------------------------------------- /theme/css/ff-midnight/background-image.css: -------------------------------------------------------------------------------- 1 | /* ############################################################### 2 | // 3 | // About:Home - Custom background image 4 | // 5 | // 1. Add an image to the /chrome/img/ folder and set the path to it below 6 | // 2. Recommended: Use the same image as your desktop wallpaper 7 | // 3. Recommended Firefox settings: Preferences > Home > New Windows and Tabs > Set both to Firefox Home 8 | // 4. Optional Firefox settings: Preferences > Home > Firefox Home Content > Uncheck all unwanted 9 | // 10 | // #############################################################*/ 11 | 12 | body.activity-stream { 13 | background-image: url("./../../img/ff-midnight-bg.jpg") !important; 14 | background-repeat: no-repeat !important; 15 | background-position: center center !important; 16 | background-size: cover !important; 17 | min-height: 100vh !important; 18 | } -------------------------------------------------------------------------------- /theme/css/ff-midnight/colors/ff-midnight-colors-cosmos.css: -------------------------------------------------------------------------------- 1 | /* ############################################################### 2 | | 3 | | ** COSMOS ** (Dark Blue) 4 | | 5 | | - Color-base is the main theme color and has a color palette from light (0) to dark (120) 6 | | - Color-accent is for links, highlights, etc. 7 | | 8 | | ############################################################# */ 9 | 10 | :root { 11 | --ff-midnight-color-base0: #E6EFF8; 12 | --ff-midnight-color-base5: #D7E6F6; 13 | --ff-midnight-color-base10: #CAD9E8; 14 | --ff-midnight-color-base30: #889BBD; 15 | --ff-midnight-color-base50: #57688A; 16 | --ff-midnight-color-base70: #495B7B; 17 | --ff-midnight-color-base80: #42516D; 18 | --ff-midnight-color-base90: #394661; 19 | --ff-midnight-color-base92: #303E5A; 20 | --ff-midnight-color-base95: #27344E; 21 | --ff-midnight-color-base: #212D45; /* main theme color */ 22 | --ff-midnight-color-base110: #1C2639; 23 | --ff-midnight-color-base120: #141B29; 24 | 25 | --ff-midnight-color-accent-light: #90E8F2; 26 | --ff-midnight-color-accent: #65C9D5; 27 | --ff-midnight-color-accent-dark: #2AABBA; 28 | --ff-midnight-color-accent-darker: #228B97; 29 | } -------------------------------------------------------------------------------- /theme/css/ff-midnight/colors/ff-midnight-colors-galaxy.css: -------------------------------------------------------------------------------- 1 | /* ############################################################### 2 | | 3 | | ** GALAXY ** (Dark Grey-blue) 4 | | 5 | | - Color-base is the main theme color and has a color palette from light (0) to dark (120) 6 | | - Color-accent is for links, highlights, etc. 7 | | 8 | | ############################################################# */ 9 | 10 | :root { 11 | --ff-midnight-color-base0: #EAEDF1; 12 | --ff-midnight-color-base5: #DEE4EA; 13 | --ff-midnight-color-base10: #D0D6DC; 14 | --ff-midnight-color-base30: #929AA7; 15 | --ff-midnight-color-base50: #5F6674; 16 | --ff-midnight-color-base70: #525966; 17 | --ff-midnight-color-base80: #494F5A; 18 | --ff-midnight-color-base90: #3F454F; 19 | --ff-midnight-color-base92: #373C48; 20 | --ff-midnight-color-base95: #2D323D; 21 | --ff-midnight-color-base: #272C35; /* main theme color */ 22 | --ff-midnight-color-base110: #21252C; 23 | --ff-midnight-color-base120: #181A20; 24 | 25 | --ff-midnight-color-accent-light: #B7D1FF; 26 | --ff-midnight-color-accent: #88B0F8; 27 | --ff-midnight-color-accent-dark: #588BE8; 28 | --ff-midnight-color-accent-darker: #4871BD; 29 | } -------------------------------------------------------------------------------- /theme/css/ff-midnight/colors/ff-midnight-colors-redshift.css: -------------------------------------------------------------------------------- 1 | /* ############################################################### 2 | | 3 | | ** REDSHIFT ** (Dark Brown) 4 | | 5 | | - Color-base is the main theme color and has a color palette from light (0) to dark (120) 6 | | - Color-accent is for links, highlights, etc. 7 | | 8 | | ############################################################# */ 9 | 10 | :root { 11 | --ff-midnight-color-base0: #F0EBE7; 12 | --ff-midnight-color-base5: #EAE1DA; 13 | --ff-midnight-color-base10: #DCD4CD; 14 | --ff-midnight-color-base30: #A39489; 15 | --ff-midnight-color-base50: #615448; 16 | --ff-midnight-color-base70: #56483D; 17 | --ff-midnight-color-base80: #4E4239; 18 | --ff-midnight-color-base90: #443930; 19 | --ff-midnight-color-base92: #3E3329; 20 | --ff-midnight-color-base95: #352B22; 21 | --ff-midnight-color-base: #30261D; /* main theme color */ 22 | --ff-midnight-color-base110: #29211A; 23 | --ff-midnight-color-base120: #1F1914; 24 | 25 | --ff-midnight-color-accent-light: #E5AA93; 26 | --ff-midnight-color-accent: #E68157; 27 | --ff-midnight-color-accent-dark: #DB561F; 28 | --ff-midnight-color-accent-darker: #C43F09; 29 | } -------------------------------------------------------------------------------- /theme/css/ff-midnight/colors/ff-midnight-colors-utility.css: -------------------------------------------------------------------------------- 1 | /* --------------------------------------------------------------- 2 | // Utility Colors 3 | // -------------------------------------------------------------*/ 4 | 5 | :root { 6 | --ff-midnight-color-alert: #C23636; 7 | --ff-midnight-color-ok: #78D348; 8 | --ff-midnight-color-notice: #E7D73B; 9 | 10 | --ff-midnight-color-highlight-green: #86DE74; 11 | --ff-midnight-color-highlight-blue: #75BFFF; 12 | --ff-midnight-color-highlight-purple: #B98EFF; 13 | --ff-midnight-color-highlight-red: #FE6262; 14 | --ff-midnight-color-highlight-yellow: #FFF89E; 15 | --ff-midnight-color-highlight-bluegrey: #5E88B0; 16 | --ff-midnight-color-highlight-salmon: #DEA174; 17 | --ff-midnight-color-highlight-orange: #D96629; 18 | --ff-midnight-color-highlight-pink: #DF80FF; 19 | --ff-midnight-color-highlight-orchid: #CC0066; 20 | } -------------------------------------------------------------------------------- /theme/css/ff-midnight/extensions/multi-account-containers.css: -------------------------------------------------------------------------------- 1 | /* ############################################################### 2 | // 3 | // Firefox Multi-account Containers Extension 4 | // 5 | // ############################################################### 6 | // 7 | // Required configuration: 8 | // 1. Find and Copy the UUID of your Multi-account Containers on the URL about:debugging#addons 9 | // 2. Replace the UUID code below in "moz-extension://UUID/" with your UUID: 10 | // 3. Optional: Select a tab indicator style in ff-midnight-userchrome.css 11 | // 12 | // #############################################################*/ 13 | 14 | 15 | @-moz-document url-prefix("moz-extension://effefc15-b9d6-5d47-9945-965d3a741ba3/") { 16 | 17 | :root { 18 | --primary-action-color: var(--ff-midnight-color-accent) !important; 19 | --title-text-color: var(--ff-midnight-color-base10) !important; 20 | --text-normal-color: var(--ff-midnight-color-base30) !important; 21 | --text-heading-color: var(--ff-midnight-color-base10) !important; 22 | } 23 | 24 | html, 25 | body { 26 | background-color: var(--ff-midnight-color-base) !important; 27 | } 28 | 29 | .scrollable { 30 | border-block-start: 1px solid var(--ff-midnight-color-base95) !important; 31 | } 32 | 33 | .button { 34 | color: var(--ff-midnight-color-base0) !important; 35 | } 36 | 37 | .button.primary { 38 | background-color: var(--ff-midnight-color-accent) !important; 39 | color: var(--ff-midnight-color-base) !important; 40 | } 41 | 42 | .button.primary:hover, 43 | .button.primary:focus { 44 | background-color: var(--ff-midnight-color-accent-dark) !important; 45 | } 46 | 47 | .button.secondary:hover, 48 | .button.secondary:focus { 49 | background-color: rgba(0, 0, 0, 0.05); 50 | } 51 | 52 | .panel-back-arrow { 53 | background: var(--ff-midnight-color-base92) !important; 54 | box-shadow: inset -2px 0 4px -2px rgba(0, 0, 0, 0.4); 55 | } 56 | 57 | .panel-back-arrow:hover, 58 | .panel-back-arrow:focus { 59 | background: var(--ff-midnight-color-base90) !important; 60 | } 61 | 62 | .back-arrow-img { 63 | filter: invert(65%)!important 64 | } 65 | 66 | .onboarding-title { 67 | color: var(--ff-midnight-color-base50) !important; 68 | } 69 | 70 | .onboarding-button { 71 | background-color: var(--ff-midnight-color-accent) !important; 72 | color: var(--ff-midnight-color-base) !important; 73 | } 74 | 75 | .onboarding-button:hover, 76 | .onboarding-button:active { 77 | background-color: var(--ff-midnight-color-accent-dark) !important; 78 | } 79 | 80 | #container-panel .panel-header { 81 | background-color: var(--ff-midnight-color-base110) !important; 82 | } 83 | 84 | #container-panel .panel-header-text { 85 | color: var(--ff-midnight-color-base50) !important; 86 | } 87 | 88 | #container-panel #sort-containers-link { 89 | border: 1px solid var(--ff-midnight-color-base70) !important; 90 | } 91 | 92 | #container-panel #sort-containers-link:hover, 93 | #container-panel #sort-containers-link:focus { 94 | background: var(--ff-midnight-color-base90) !important; 95 | } 96 | 97 | #current-tab > label > input { 98 | border: 1px solid var(--ff-midnight-color-base70) !important; 99 | } 100 | 101 | #current-tab > label > input:checked { 102 | filter: invert(100%); 103 | border-color: var(--ff-midnight-color-base70) !important 104 | } 105 | 106 | #current-tab > label > input[disabled] { 107 | background-color: var(--ff-midnight-color-base95) !important; 108 | } 109 | 110 | .container-panel-row { 111 | background-color: var(--ff-midnight-color-base95) !important; 112 | border-block-end: 1px solid var(--ff-midnight-color-base92) !important; 113 | } 114 | 115 | .container-panel-row:hover .clickable.userContext-wrapper, 116 | .container-panel-row:focus .clickable.userContext-wrapper { 117 | background: var(--ff-midnight-color-base92) !important; 118 | } 119 | 120 | .container-panel-row:hover .clickable .usercontext-icon, 121 | .container-panel-row:focus .clickable .usercontext-icon, 122 | .container-panel-row .clickable:focus .usercontext-icon { 123 | fill: var(--ff-midnight-color-base30) !important; 124 | } 125 | 126 | .container-panel-row .clickable:hover .usercontext-icon, 127 | .container-panel-row .clickable:focus .usercontext-icon { 128 | fill: var(--ff-midnight-color-accent) !important; 129 | } 130 | 131 | .container-name, 132 | legend { 133 | color: var(--ff-midnight-color-base30) !important; 134 | } 135 | 136 | button .container-name { 137 | color: var(--ff-midnight-color-base) !important; 138 | } 139 | 140 | .panel-footer { 141 | background: var(--ff-midnight-color-base110) !important; 142 | border-block-end: 1px solid var(--ff-midnight-color-base90) !important; 143 | color: var(--ff-midnight-color-base30) !important; 144 | } 145 | 146 | .edit-containers-text { 147 | border-inline-end: solid 1px var(--ff-midnight-color-base90) !important; 148 | } 149 | 150 | .edit-containers-text a { 151 | color: var(--ff-midnight-color-base10) !important; 152 | } 153 | 154 | .edit-container-panel input[type=text] { 155 | background: var(--ff-midnight-color-base) !important; 156 | color: var(--ff-midnight-color-base10) !important; 157 | border: 1px solid var(--ff-midnight-color-base70) !important; 158 | } 159 | 160 | .edit-container-panel input[type=text]:focus { 161 | color: var(--ff-midnight-color-base90) !important; 162 | } 163 | 164 | .clickable:hover, 165 | .clickable:focus { 166 | background-color: var(--ff-midnight-color-base90) !important; 167 | } 168 | 169 | .edit-containers-exit-text { 170 | color: var(--ff-midnight-color-base110) !important; 171 | } 172 | 173 | .exit-edit-mode-link::before { 174 | filter: none !important; 175 | } 176 | 177 | .delete-container-confirm-title { 178 | color: var(--ff-midnight-color-base10) !important; 179 | } 180 | 181 | .radio-choice > .radio-container > [type="radio"]:checked + label { 182 | background: var(--ff-midnight-color-base80) !important; 183 | } 184 | 185 | .radio-choice > .radio-container > [type="radio"]:focus + label { 186 | outline: 1px solid var(--ff-midnight-color-accent) !important; 187 | } 188 | 189 | .cta { 190 | color: var(--ff-midnight-color-base) !important; 191 | } 192 | 193 | .container-notification { 194 | background: var(--ff-midnight-color-base95) !important; 195 | color: var(--ff-midnight-color-base10) !important; 196 | } 197 | 198 | .pop-button-image { 199 | filter: invert(65%); 200 | } 201 | 202 | [data-identity-color=grey] { 203 | --identity-icon-color: var(--ff-midnight-color-base30) !important; 204 | } 205 | 206 | /* confirm page */ 207 | 208 | .title-text, 209 | body { 210 | color: var(--ff-midnight-color-base30) !important; 211 | } 212 | 213 | #redirect-url { 214 | background: var(--ff-midnight-color-base95) !important; 215 | } 216 | 217 | button#deny { 218 | background: var(--ff-midnight-color-base) !important; 219 | border-color: var(--ff-midnight-color-base70) !important; 220 | color: var(--ff-midnight-color-base30) !important; 221 | } 222 | 223 | button#deny:hover { 224 | background: var(--ff-midnight-color-base92) !important; 225 | color: var(--ff-midnight-color-base10) !important; 226 | } 227 | 228 | #never-ask { 229 | -moz-appearance: none !important; 230 | background-color: var(--ff-midnight-color-base95) !important; 231 | border-color: var(--ff-midnight-color-base70) !important; 232 | background-image: none !important; 233 | box-shadow: none !important; 234 | } 235 | 236 | #never-ask:checked { 237 | background-image: url(chrome://global/skin/in-content/check.svg) !important; 238 | background-color: var(--ff-midnight-color-base95) !important; 239 | } 240 | 241 | } -------------------------------------------------------------------------------- /theme/css/ff-midnight/extensions/ublock-origin.css: -------------------------------------------------------------------------------- 1 | /* ############################################################### 2 | // 3 | // Ublock Origin Popup Panel and Dashboard pages 4 | // 5 | // ############################################################### 6 | // 7 | // Required configuration: 8 | // 1. Find and Copy the UUID of your uBlock Origin on the URL about:debugging#addons 9 | // 2. Replace the UUID code below in "moz-extension://UUID/" with your UUID: 10 | // 11 | // #############################################################*/ 12 | 13 | 14 | @-moz-document url-prefix("moz-extension://9a8c0684-523f-8845-86ac-2408a8a94e47/") { 15 | 16 | body { 17 | background-color: var(--ff-midnight-color-base) !important; 18 | color: var(--ff-midnight-color-base30) !important; 19 | } 20 | 21 | a { 22 | color: var(--ff-midnight-color-accent-dark) !important; 23 | } 24 | 25 | h2 { 26 | background-color: var(--ff-midnight-color-base95) !important; 27 | color: var(--ff-midnight-color-base30) !important; 28 | } 29 | 30 | #appinfo { 31 | background-color: var(--ff-midnight-color-base110) !important; 32 | color: var(--ff-midnight-color-base30) !important; 33 | } 34 | 35 | #switch .fa { 36 | color: var(--ff-midnight-color-accent-dark) !important; 37 | } 38 | 39 | body.off #switch .fa { 40 | color: var(--ff-midnight-color-base80) !important; 41 | } 42 | 43 | .tool { 44 | color: var(--ff-midnight-color-base50) !important; 45 | } 46 | 47 | .tool.enabled:hover { 48 | color: var(--ff-midnight-color-base10) !important; 49 | } 50 | 51 | .statName { 52 | color: var(--ff-midnight-color-base50) !important; 53 | } 54 | 55 | #extraTools { 56 | background-color: var(--ff-midnight-color-base92) !important; 57 | color: var(--ff-midnight-color-base30) !important; 58 | } 59 | 60 | #extraTools>span>span.badge { 61 | color: var(--ff-midnight-color-base10) !important; 62 | } 63 | 64 | #extraTools > span > span:last-of-type { 65 | color: var(--ff-midnight-color-alert) !important; 66 | } 67 | 68 | #extraTools > span > span:last-of-type > svg { 69 | stroke: var(--ff-midnight-color-alert) !important; 70 | } 71 | 72 | #extraTools > span:hover { 73 | color: var(--ff-midnight-color-base30) !important; 74 | } 75 | 76 | #refresh { 77 | background-color: var(--ff-midnight-color-base92) !important; 78 | border: 1px solid var(--ff-midnight-color-base80) !important; 79 | color: var(--ff-midnight-color-base50) !important; 80 | } 81 | 82 | body.dirty #refresh:hover { 83 | color: var(--ff-midnight-color-base10) !important; 84 | } 85 | 86 | #tooltip { 87 | background-color: var(--ff-midnight-color-base95) !important; 88 | border: 1px solid var(--ff-midnight-color-base50) !important; 89 | box-shadow: 1px 1px 3px var(--ff-midnight-color-base110) !important; 90 | color: var(--ff-midnight-color-base10) !important; 91 | } 92 | 93 | #firewallContainer > div { 94 | background-color: var(--ff-midnight-color-base95) !important; 95 | margin-top: 0 !important; 96 | } 97 | 98 | #firewallContainer > div:hover { 99 | background-color: var(--ff-midnight-color-base92) !important; 100 | } 101 | 102 | #firewallContainer > div > span { 103 | background-color: transparent !important; 104 | border-bottom: 1px solid var(--ff-midnight-color-base110) !important; 105 | color: var(--ff-midnight-color-base10) !important; 106 | } 107 | 108 | #firewallContainer > div.isDomain > span.isIDN:first-of-type > sup:before { 109 | color: var(--ff-midnight-color-base70) !important; 110 | } 111 | 112 | #firewallContainer > div > span:first-of-type~span { 113 | border-left: 1px solid var(--ff-midnight-color-base110) !important; 114 | } 115 | 116 | #firewallContainer > div > span:nth-of-type(3), 117 | #firewallContainer > div > span:nth-of-type(4) { 118 | color: var(--ff-midnight-color-base30) !important; 119 | } 120 | 121 | #firewallContainer > div:first-of-type > span:first-of-type:before { 122 | color: var(--ff-midnight-color-base80) !important; 123 | } 124 | 125 | #firewallContainer>div.allowed>span:first-of-type:before, 126 | #firewallContainer.minimized>div.isDomain.totalAllowed>span:first-of-type:before { 127 | background-color: rgb(0, 160, 0) !important; 128 | } 129 | 130 | #firewallContainer.colorBlind>div.allowed>span:first-of-type:before, 131 | #firewallContainer.colorBlind.minimized>div.isDomain.totalAllowed>span:first-of-type:before { 132 | background-color: rgb(255, 194, 57) !important; 133 | } 134 | 135 | #firewallContainer>div.blocked>span:first-of-type:before, 136 | #firewallContainer.minimized>div.isDomain.totalBlocked>span:first-of-type:before { 137 | background-color: rgb(192, 0, 0) !important; 138 | } 139 | 140 | #firewallContainer.colorBlind>div.blocked>span:first-of-type:before, 141 | #firewallContainer.colorBlind.minimized>div.isDomain.totalBlocked>span:first-of-type:before { 142 | background-color: rgb(0, 19, 110) !important; 143 | } 144 | 145 | #firewallContainer>div.allowed.blocked>span:first-of-type:before, 146 | #firewallContainer.minimized>div.isDomain.totalAllowed.totalBlocked>span:first-of-type:before { 147 | background-color: rgb(192, 160, 0) !important; 148 | } 149 | 150 | 151 | /* Rule cells */ 152 | 153 | body.advancedUser #firewallContainer>div>span.allowRule { 154 | background-color: rgba(0, 160, 0, 0.3) !important; 155 | } 156 | 157 | body.advancedUser #firewallContainer.colorBlind>div>span.allowRule { 158 | background-color: rgba(255, 194, 57, 0.4) !important; 159 | } 160 | 161 | body.advancedUser #firewallContainer>div>span.blockRule { 162 | background-color: rgba(192, 0, 0, 0.3) !important; 163 | } 164 | 165 | body.advancedUser #firewallContainer.colorBlind>div>span.blockRule { 166 | background-color: rgba(0, 19, 110, 0.4) !important; 167 | } 168 | 169 | body.advancedUser #firewallContainer>div>span.noopRule { 170 | background-color: rgba(108, 108, 108, 0.3) !important; 171 | } 172 | 173 | body.advancedUser #firewallContainer.colorBlind>div>span.noopRule { 174 | background-color: rgba(96, 96, 96, 0.4) !important; 175 | } 176 | 177 | body.advancedUser #firewallContainer>div>span.ownRule { 178 | color: white; 179 | } 180 | 181 | body.advancedUser #firewallContainer>div>span.allowRule.ownRule { 182 | background-color: rgba(0, 160, 0, 1) !important; 183 | } 184 | 185 | body.advancedUser #firewallContainer.colorBlind>div>span.allowRule.ownRule { 186 | background-color: rgba(255, 194, 57, 1) !important; 187 | } 188 | 189 | body.advancedUser #firewallContainer>div>span.blockRule.ownRule { 190 | background-color: rgba(192, 0, 0, 1) !important; 191 | } 192 | 193 | body.advancedUser #firewallContainer.colorBlind>div>span.blockRule.ownRule { 194 | background-color: rgba(0, 19, 110, 1) !important; 195 | } 196 | 197 | body.advancedUser #firewallContainer>div>span.noopRule.ownRule { 198 | background-color: var(--ff-midnight-color-base50) !important; /* rgba(108, 108, 108, 1); */ 199 | } 200 | 201 | #actionSelector>span:first-of-type { 202 | background-color: rgb(0, 160, 0) !important; 203 | } 204 | 205 | #actionSelector.colorBlind>span:first-of-type { 206 | background-color: rgb(255, 194, 57) !important; 207 | } 208 | 209 | #actionSelector>span:nth-of-type(2) { 210 | background-color: var(--ff-midnight-color-base50) !important; /* rgb(108, 108, 108); */ 211 | } 212 | 213 | #actionSelector>span:nth-of-type(3) { 214 | background-color: rgb(192, 0, 0) !important; 215 | } 216 | 217 | #actionSelector.colorBlind>span:nth-of-type(3) { 218 | background-color: rgb(0, 19, 110) !important; 219 | } 220 | 221 | #rulesetTools { 222 | color: var(--ff-midnight-color-base50) !important; 223 | } 224 | 225 | #rulesetTools > span { 226 | background-color: var(--ff-midnight-color-base95) !important; 227 | border: 1px solid var(--ff-midnight-color-base90) !important; 228 | } 229 | 230 | #firewallContainer.dirty~#rulesetTools > span:hover { 231 | color: var(--ff-midnight-color-base10) !important; 232 | } 233 | 234 | 235 | /* --------------------------------------------------------------- 236 | // Dashboard 237 | // -------------------------------------------------------------*/ 238 | 239 | #dashboard-nav-widgets { 240 | background-color: var(--ff-midnight-color-base) !important; 241 | border-bottom: 1px solid var(--ff-midnight-color-base90) !important; 242 | } 243 | 244 | .tabButton { 245 | background-color: var(--ff-midnight-color-base90) !important; 246 | border: 1px solid var(--ff-midnight-color-base90) !important; 247 | border-bottom: 1px solid var(--ff-midnight-color-base90) !important; 248 | color: var(--ff-midnight-color-base10) !important; 249 | } 250 | 251 | .tabButton.selected { 252 | background-color: var(--ff-midnight-color-base) !important; 253 | border-bottom: 1px solid var(--ff-midnight-color-base) !important; 254 | } 255 | 256 | a.fa.info { 257 | color: var(--ff-midnight-color-accent) !important; 258 | opacity: 0.6 !important; 259 | } 260 | 261 | a.fa.info.important { 262 | color: var(--ff-midnight-color-alert) !important; 263 | } 264 | 265 | a.fa.info:hover { 266 | opacity: 1 !important; 267 | } 268 | 269 | #localData div { 270 | border-top: 1px solid var(--ff-midnight-color-base90) !important; 271 | } 272 | 273 | /* --------------------------------------------------------------- 274 | // Logger page 275 | // -------------------------------------------------------------*/ 276 | 277 | .permatoolbar { 278 | background-color: var(--ff-midnight-color-base) !important; 279 | } 280 | 281 | .permatoolbar .button { 282 | background-color: var(--ff-midnight-color-base) !important; 283 | } 284 | 285 | .permatoolbar .button:hover { 286 | background-color: var(--ff-midnight-color-base90) !important; 287 | } 288 | 289 | .inspector { 290 | border-top: 1px solid var(--ff-midnight-color-base90) !important; 291 | } 292 | 293 | #netInspector tr td { 294 | border-top: 1px solid var(--ff-midnight-color-base90) !important; 295 | } 296 | 297 | body #netInspector td { 298 | border: 1px solid var(--ff-midnight-color-base90) !important; 299 | } 300 | 301 | #netInspector tr.maindoc { 302 | background-color: var(--ff-midnight-color-base110) !important; 303 | color: var(--ff-midnight-color-base30) !important; 304 | } 305 | 306 | 307 | /* --------------------------------------------------------------- 308 | // Codemirror 309 | // -------------------------------------------------------------*/ 310 | 311 | #diff { 312 | border-color: var(--ff-midnight-color-base90) !important; 313 | } 314 | 315 | #ruleFilter input, 316 | .cm-search-widget input, 317 | .commandEntries input { 318 | -moz-appearance: none !important; 319 | background: var(--ff-midnight-color-base95) !important; 320 | border: 1px solid var(--ff-midnight-color-base90) !important; 321 | padding: 4px; 322 | border-radius: 3px; 323 | color: var(--ff-midnight-color-base10) !important; 324 | } 325 | 326 | #ruleFilter input::placeholder, 327 | .cm-search-widget input::placeholder, 328 | .commandEntries input::placeholder { 329 | color: var(--ff-midnight-color-base30) !important; 330 | } 331 | 332 | .CodeMirror { 333 | background: none !important; 334 | color: var(--ff-midnight-color-base30) !important; 335 | } 336 | 337 | .CodeMirror-merge { 338 | border: 1px solid var(--ff-midnight-color-base90) !important; 339 | } 340 | 341 | .CodeMirror-gutters { 342 | border-right: 1px solid var(--ff-midnight-color-base92) !important; 343 | background-color: var(--ff-midnight-color-base95) !important; 344 | } 345 | 346 | .CodeMirror-merge-gap { 347 | border-left: 1px solid var(--ff-midnight-color-base92) !important; 348 | border-right: 1px solid var(--ff-midnight-color-base92) !important; 349 | background: var(--ff-midnight-color-base95) !important; 350 | } 351 | 352 | .CodeMirror-activeline-background { 353 | background: var(--ff-midnight-color-base120) !important; 354 | color: var(--ff-midnight-color-base0) !important; 355 | } 356 | 357 | .CodeMirror-activeline { 358 | color: var(--ff-midnight-color-base10) !important; 359 | } 360 | 361 | .CodeMirror-linenumber { 362 | color: var(--ff-midnight-color-base10) !important; 363 | } 364 | 365 | .cm-search-widget { 366 | background-color: var(--ff-midnight-color-base92) !important; 367 | } 368 | 369 | .cm-search-widget .fa { 370 | color: var(--ff-midnight-color-base30) !important; 371 | } 372 | 373 | .cm-s-default .cm-comment { 374 | color: var(--ff-midnight-color-base50) !important; 375 | } 376 | 377 | .cm-staticext { 378 | color: var(--ff-midnight-color-accent) !important; 379 | } 380 | 381 | .cm-staticnetBlock { 382 | color: var(--ff-midnight-color-alert) !important; 383 | } 384 | 385 | .cm-staticnetAllow { 386 | color: #004f00; /* default darkgreen */ 387 | } 388 | 389 | .cm-staticOpt { 390 | background-color: var(--ff-midnight-color-base70) !important; 391 | } 392 | 393 | } /* end moz-document wrapper */ 394 | -------------------------------------------------------------------------------- /theme/css/ff-midnight/ff-midnight-userchrome.css: -------------------------------------------------------------------------------- 1 | /* --------------------------------------------------------------- 2 | // Customized color variables 3 | // -------------------------------------------------------------*/ 4 | 5 | :root { 6 | 7 | /* general */ 8 | --chrome-color: var(--ff-midnight-color-base10) !important; 9 | --chrome-background-color: var(--ff-midnight-color-base120) !important; 10 | --chrome-secondary-background-color: var(--ff-midnight-color-base) !important; 11 | --toolbox-border-bottom-color: var(--ff-midnight-color-base120) !important; 12 | --chrome-nav-bar-controls-border-color: var(--ff-midnight-color-base30) !important; 13 | --chrome-selection-color: var(--ff-midnight-color-base0) !important; 14 | --chrome-selection-background-color: var(--ff-midnight-color-base120) !important; 15 | 16 | --chrome-content-separator-color: var(--ff-midnight-color-base120) !important; 17 | 18 | /* toolbar button background */ 19 | --toolbarbutton-hover-background: var(--ff-midnight-color-base70) !important; 20 | --lwt-toolbarbutton-hover-background: var(--ff-midnight-color-base70) !important; 21 | --toolbarbutton-active-background: var(--ff-midnight-color-base50) !important; 22 | --lwt-toolbarbutton-active-background: var(--ff-midnight-color-base50) !important; 23 | 24 | /* toolbar icon attention color */ 25 | --lwt-toolbarbutton-icon-fill-attention: var(--ff-midnight-color-accent) !important; 26 | --toolbarbutton-icon-fill-attention: var(--ff-midnight-color-accent) !important; 27 | 28 | /* urlbar */ 29 | --toolbar-bgcolor: var(--ff-midnight-color-base) !important; 30 | --lwt-toolbar-field-color: var(--chrome-color) !important; 31 | --toolbar-field-background-color: var(--ff-midnight-color-base) !important; 32 | --lwt-toolbar-field-background-color: var(--ff-midnight-color-base) !important; 33 | --toolbar-field-focus: var(--ff-midnight-color-base92) !important; 34 | --lwt-toolbar-field-focus-color: var(--chrome-color) !important; 35 | --lwt-toolbar-field-focus: var(--ff-midnight-color-base92) !important; 36 | --toolbar-field-border-color: var(--ff-midnight-color-base) !important; 37 | --lwt-toolbar-field-border-color: var(--ff-midnight-color-base) !important; 38 | --toolbar-field-focus-border-color: var(--ff-midnight-color-base) !important; 39 | --lwt-toolbar-field-focus-border-color: var(--ff-midnight-color-base) !important; 40 | --urlbar-separator-color: var(--ff-midnight-color-base70) !important; 41 | 42 | /* autocomplete popup */ 43 | --autocomplete-popup-color: var(--ff-midnight-color-base30) !important; 44 | --autocomplete-popup-background: var(--ff-midnight-color-base) !important; 45 | --autocomplete-popup-highlight-background: var(--ff-midnight-color-base120) !important; 46 | --urlbar-popup-url-color: var(--ff-midnight-color-accent) !important; 47 | 48 | /* dropdown popups */ 49 | --lwt-accent-color: var(--ff-midnight-color-base120) !important; 50 | --lwt-text-color: var(--ff-midnight-color-base10) !important; 51 | --panel-disabled-color: var(--ff-midnight-color-base50) !important; 52 | --arrowpanel-background: var(--ff-midnight-color-base) !important; 53 | --arrowpanel-color: var(--ff-midnight-color-base10) !important; 54 | --arrowpanel-border-color: var(--ff-midnight-color-base92) !important; 55 | 56 | --tab-line-color: var(--ff-midnight-color-accent) !important; 57 | } 58 | 59 | 60 | /* --------------------------------------------------------------- 61 | // Toolbar Tabs 62 | // -------------------------------------------------------------*/ 63 | 64 | /* tab hover */ 65 | #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]) { 66 | background-color: var(--ff-midnight-color-base95) !important; 67 | } 68 | 69 | #TabsToolbar, #navigator-toolbox { 70 | color: var(--ff-midnight-color-base30) !important; 71 | 72 | } 73 | 74 | #TabsToolbar .tabbrowser-tab:hover { 75 | color: var(--ff-midnight-color-base10) !important; 76 | } 77 | 78 | #TabsToolbar tab[selected] { 79 | color: var(--ff-midnight-color-base0) !important; 80 | } 81 | 82 | /* --------------------------------------------------------------- 83 | // Urlbar and searchbar 84 | // -------------------------------------------------------------*/ 85 | 86 | #urlbar, 87 | .searchbar-textbox { 88 | border: none !important; 89 | box-shadow: none !important; 90 | } 91 | 92 | #urlbar:hover, 93 | .searchbar-textbox:hover { 94 | border: none !important; 95 | box-shadow: none !important; 96 | } 97 | 98 | #urlbar[focused="true"], 99 | .searchbar-textbox[focused="true"] { 100 | border: none !important; 101 | box-shadow: none !important; 102 | } 103 | 104 | #urlbar:-moz-lwtheme[focused="true"] input::selection, 105 | #navigator-toolbox .searchbar-textbox:-moz-lwtheme[focused="true"] input::selection { 106 | color: var(--ff-midnight-color-base0) !important; 107 | background: var(--ff-midnight-color-base120) !important 108 | } 109 | 110 | #urlbar-search-mode-indicator { 111 | background-color: var(--ff-midnight-color-base120) !important; 112 | outline-color: var(--ff-midnight-color-base80) !important; 113 | color: var(--ff-midnight-color-base10) !important; 114 | } 115 | 116 | 117 | /* --------------------------------------------------------------- 118 | // Toolbar 119 | // -------------------------------------------------------------*/ 120 | 121 | toolbarbutton[disabled="true"], 122 | toolbarbutton[disabled="true"]:hover, 123 | toolbarbutton[disabled="true"]:hover:active, 124 | toolbarbutton[disabled="true"][open="true"] { 125 | color: rgba(255,255,255,0.3) !important; 126 | } 127 | 128 | /* --------------------------------------------------------------- 129 | // Findbar 130 | // -------------------------------------------------------------*/ 131 | 132 | .browserContainer > findbar { 133 | border-top: 1px solid var(--ff-midnight-color-base90) !important; 134 | } 135 | 136 | 137 | /* --------------------------------------------------------------- 138 | // Sidebar (history, bookmarks, synced tabs) ref:places.css 139 | // -------------------------------------------------------------*/ 140 | 141 | #sidebar-box { 142 | -moz-appearance: none !important; 143 | background: var(--ff-midnight-color-base95) !important; 144 | } 145 | 146 | sidebarheader { 147 | color: var(--ff-midnight-color-base10) !important; 148 | background: var(--ff-midnight-color-base110) !important; 149 | } 150 | 151 | .sidebar-panel[lwt-sidebar] { 152 | background-color: var(--ff-midnight-color-base110) !important; 153 | } 154 | 155 | /* section of the panel with searchbox */ 156 | #bookmarksPanel, 157 | #history-panel { 158 | -moz-appearance: none !important; 159 | } 160 | 161 | #sidebar-search-container #search-box { 162 | -moz-appearance:none !important; /* this also removes the magnifying glass icon */ 163 | background-color: var(--ff-midnight-color-base92) !important; 164 | border: 1px solid var(--ff-midnight-color-base80) !important; 165 | border-radius: 3px; 166 | padding: 6px 6px 6px 22px !important; 167 | color: var(--ff-midnight-color-base10) !important; 168 | 169 | /* add the magnifying glass icon */ 170 | background-image: url("chrome://global/skin/icons/search-textbox.svg") !important; 171 | background-repeat: no-repeat; 172 | background-position: left 6px center; 173 | -moz-context-properties: fill; 174 | fill: var(--ff-midnight-color-base30) !important; 175 | } 176 | 177 | #sidebar-search-container #search-box[focused="true"] { 178 | outline: 1px solid var(--ff-midnight-color-base80) !important; 179 | -moz-outline-radius: 3px; 180 | } 181 | 182 | /* viewbutton next to searchfield */ 183 | #viewButton { 184 | color: var(--ff-midnight-color-base10) !important; 185 | } 186 | 187 | #viewButton > .button-box > .button-menu-dropmarker { 188 | -moz-context-properties: fill; /* enables svg fill */ 189 | fill: var(--ff-midnight-color-base10) !important; 190 | } 191 | 192 | /* re-style from shared styles */ 193 | tree#historyTree:-moz-focusring, 194 | tree#bookmarks-view:-moz-focusring { 195 | border: none !important; 196 | } 197 | 198 | #historyTree treechildren::-moz-tree-row, 199 | #bookmarks-view treechildren::-moz-tree-row { 200 | background-color: var(--ff-midnight-color-base95) !important; /* -moz-field; */ 201 | } 202 | 203 | /* Sidebar content */ 204 | .sidebar-placesTree { 205 | -moz-appearance: none !important; 206 | background: var(--ff-midnight-color-base95) !important; 207 | color: var(--ff-midnight-color-base10) !important; 208 | } 209 | 210 | /* Sidebar - list items */ 211 | .sidebar-placesTreechildren::-moz-tree-row(selected) { 212 | -moz-appearance: none !important; /* -moz-mac-source-list-selection; */ 213 | background: var(--ff-midnight-color-base120) !important; 214 | } 215 | .sidebar-placesTreechildren::-moz-tree-row(selected,focus) { 216 | -moz-appearance: none !important; /* -moz-mac-active-source-list-selection; */ 217 | } 218 | 219 | .sidebar-placesTreechildren::-moz-tree-twisty(selected), 220 | .sidebar-placesTreechildren::-moz-tree-cell-text(selected) { 221 | color: var(--ff-midnight-color-base10) !important; 222 | } 223 | 224 | @media (-moz-mac-yosemite-theme) { 225 | .sidebar-placesTreechildren::-moz-tree-twisty(selected), 226 | .sidebar-placesTreechildren::-moz-tree-cell-text(selected) { 227 | color: var(--ff-midnight-color-accent) !important; 228 | } 229 | 230 | .sidebar-placesTreechildren::-moz-tree-twisty(selected, focus), 231 | .sidebar-placesTreechildren::-moz-tree-cell-text(selected, focus) { 232 | color: var(--ff-midnight-color-accent) !important; 233 | } 234 | } 235 | 236 | /* Sidebar system icons color */ 237 | .sidebar-placesTree treechildren::-moz-tree-image { 238 | fill: var(--ff-midnight-color-base30) !important; 239 | -moz-context-properties: fill; 240 | } 241 | 242 | /* --------------------------------------------------------------- 243 | // Synced tabs - content container 244 | // -------------------------------------------------------------*/ 245 | 246 | @-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml") { 247 | 248 | body { 249 | background-color: var(--ff-midnight-color-base95) !important; 250 | } 251 | 252 | .content-container { 253 | -moz-appearance: none !important; 254 | background-color: var(--ff-midnight-color-base95) !important; 255 | } 256 | 257 | .item { 258 | color: var(--ff-midnight-color-base30) !important; 259 | } 260 | 261 | .item.client[clientType] > .item-title-container > .item-icon-container { 262 | fill: var(--ff-midnight-color-base30) !important; 263 | } 264 | 265 | .item.selected > .item-title-container { 266 | color: var(--ff-midnight-color-accent) !important; 267 | } 268 | 269 | .item.selected > .item-title-container { 270 | -moz-appearance: none !important; /* -moz-mac-source-list-selection; */ 271 | background: var(--ff-midnight-color-base120) !important; 272 | } 273 | 274 | .item.selected:focus > .item-title-container { 275 | -moz-appearance: none !important; /* -moz-mac-active-source-list-selection; */ 276 | } 277 | 278 | @media (-moz-mac-yosemite-theme) { 279 | .item.selected > .item-title-container { 280 | color: var(--ff-midnight-color-accent) !important; 281 | } 282 | 283 | .item.selected:focus > .item-title-container { 284 | color: var(--ff-midnight-color-accent) !important; 285 | } 286 | } 287 | 288 | .deck .sync-state { 289 | border-top: 1px solid var(--ff-midnight-color-base90) !important; 290 | } 291 | 292 | .deck .button { 293 | background-color: var(--ff-midnight-color-accent) !important; 294 | color: var(--ff-midnight-color-base) !important; 295 | } 296 | 297 | .deck .button:hover { 298 | background-color: var(--ff-midnight-color-accent-dark) !important; 299 | } 300 | 301 | .deck .button:hover:active { 302 | background-color: var(--ff-midnight-color-accent-darker) !important; 303 | } 304 | 305 | .deck .instructions { 306 | color: var(--ff-midnight-color-base30) !important; 307 | } 308 | 309 | .sync-state > p { 310 | color: var(--ff-midnight-color-base30) !important; 311 | } 312 | 313 | .item.empty .item-title-container { 314 | color: var(--ff-midnight-color-base80) !important; 315 | } 316 | 317 | .text-link { 318 | color: var(--ff-midnight-color-accent) !important; 319 | } 320 | 321 | .search-box { 322 | -moz-appearance: none !important; /* searchfield; */ 323 | padding: 6px 6px 6px 22px !important; 324 | background-color: var(--ff-midnight-color-base90) !important; 325 | color: var(--ff-midnight-color-base10) !important; 326 | border: 1px solid var(--ff-midnight-color-base80) !important; 327 | border-radius: 3px; 328 | 329 | /* add the magnifying glass icon */ 330 | background-image: url("chrome://global/skin/icons/search-textbox.svg") !important; 331 | background-repeat: no-repeat; 332 | background-position: left 6px center; 333 | -moz-context-properties: fill; 334 | fill: var(--ff-midnight-color-base30) !important; 335 | } 336 | 337 | .search-box[focused="true"] { 338 | outline: 1px solid var(--ff-midnight-color-base80) !important; 339 | -moz-outline-radius: 3px; 340 | } 341 | 342 | } 343 | 344 | 345 | /* --------------------------------------------------------------- 346 | // Panels, Arrowpanels 347 | // -------------------------------------------------------------*/ 348 | 349 | 350 | .panel-footer > button:not([disabled])[default] { 351 | color: var(--ff-midnight-color-base120) !important; 352 | background-color: var(--ff-midnight-color-accent-dark) !important; 353 | } 354 | 355 | .panel-footer > button:not([disabled])[default]:hover { 356 | background-color: var(--ff-midnight-color-accent-darker) !important; 357 | } 358 | 359 | .panel-footer > button:not([disabled])[default]:hover:active { 360 | background-color: var(--ff-midnight-color-accent-darker) !important; 361 | } 362 | 363 | 364 | :root[lwt-popup-brighttext] panel .text-link { 365 | color: var(--ff-midnight-color-accent) !important; 366 | } 367 | 368 | /* --------------------------------------------------------------- 369 | // Common Dialog 370 | // -------------------------------------------------------------*/ 371 | 372 | @-moz-document url("chrome://global/content/commonDialog.xul") { 373 | #commonDialog { 374 | -moz-appearance: none !important; 375 | background: var(--ff-midnight-color-base) !important; 376 | color: var(--ff-midnight-color-base30) !important; 377 | } 378 | } 379 | 380 | /* --------------------------------------------------------------- 381 | // Toggle button in dialog 382 | // -------------------------------------------------------------*/ 383 | 384 | #appMenu-tp-toggle[enabled="true"] { 385 | background-color: var(--ff-midnight-color-accent) !important; 386 | border: 1px solid var(--ff-midnight-color-accent) !important; 387 | } 388 | 389 | #appMenu-tp-toggle[enabled="true"]:hover, 390 | #appMenu-tp-toggle[enabled="true"]:-moz-focusring { 391 | background-color: var(--ff-midnight-color-accent) !important; 392 | } 393 | 394 | 395 | /* --------------------------------------------------------------- 396 | // Customization page 397 | // -------------------------------------------------------------*/ 398 | 399 | .customizationmode-button { 400 | border: 1px solid var(--ff-midnight-color-base70) !important; 401 | background-color: var(--ff-midnight-color-base95) !important; 402 | } 403 | 404 | .customizationmode-checkbox:not(:-moz-lwtheme), 405 | .customizationmode-button { 406 | color: var(--ff-midnight-color-base10) !important; 407 | } 408 | 409 | .customizationmode-button > .box-inherit > .button-menu-dropmarker { 410 | -moz-context-properties: fill; 411 | fill: var(--ff-midnight-color-base10) !important; 412 | } 413 | 414 | #customization-done-button:-moz-any(:active, :hover):not([disabled]) { 415 | background-color: var(--ff-midnight-color-accent) !important; 416 | } 417 | 418 | #customization-done-button { 419 | color: var(--ff-midnight-color-base) !important; 420 | border-color: var(--ff-midnight-color-accent) !important; 421 | background-color: var(--ff-midnight-color-accent) !important; 422 | } 423 | 424 | /* --------------------------------------------------------------- 425 | // Statuspanel 426 | // 427 | // panel shown at bottom of viewport when hovering over links (default: off) 428 | // -------------------------------------------------------------*/ 429 | 430 | /* 431 | #statuspanel #statuspanel-label, 432 | statuspanel .statuspanel-label { 433 | background-color: var(--ff-midnight-color-base110) !important; 434 | color: var(--ff-midnight-color-base10) !important; 435 | border: none !important; 436 | } 437 | */ 438 | 439 | 440 | /* --------------------------------------------------------------- 441 | // Miscellaneous 442 | // -------------------------------------------------------------*/ 443 | 444 | /* Prevent white bg color flash when opening new tabs */ 445 | /* buggy, may not always work! */ 446 | #browser vbox#appcontent tabbrowser, 447 | #content, 448 | #tabbrowser-tabpanels, 449 | browser[type=content-primary], 450 | browser[type=content] > html:not(#ublock0-epicker) { 451 | background: var(--ff-midnight-color-base) !important; 452 | } -------------------------------------------------------------------------------- /theme/css/ff-midnight/page-info.css: -------------------------------------------------------------------------------- 1 | @-moz-document url(chrome://browser/content/pageinfo/pageInfo.xul) { 2 | #topBar { 3 | -moz-appearance: none !important; 4 | background: var(--ff-midnight-color-base110) !important; 5 | } 6 | 7 | #mainDeck { 8 | background: var(--ff-midnight-color-base) !important; 9 | color: var(--ff-midnight-color-base30) !important; 10 | } 11 | 12 | textbox { 13 | color: var(--ff-midnight-color-base30)!important; 14 | } 15 | 16 | .text-link { 17 | color: var(--ff-midnight-color-accent) !important; 18 | } 19 | 20 | button { 21 | -moz-appearance: none !important; 22 | background-color: var(--ff-midnight-color-base) !important; 23 | border: 1px solid !important; 24 | border-radius: 3px !important; 25 | color: var(--ff-midnight-color-base30) !important; 26 | border-color: var(--ff-midnight-color-base90) !important; 27 | } 28 | 29 | button:hover { 30 | background-color: var(--ff-midnight-color-base95) !important; 31 | } 32 | 33 | #feedListbox, 34 | #feedListbox > richlistitem, 35 | #imagecontainerbox, 36 | .groupbox-body, 37 | .permission { 38 | -moz-appearance: none !important; 39 | background: var(--ff-midnight-color-base95) !important; 40 | color: var(--ff-midnight-color-base30) !important; 41 | border-color: var(--ff-midnight-color-base90) !important; 42 | } 43 | 44 | #feedListbox richlistitem { 45 | border-color: var(--ff-midnight-color-base90) !important; 46 | } 47 | 48 | #permPluginTemplate { 49 | color: var(--ff-midnight-color-base30) !important; 50 | } 51 | 52 | #feedListbox, 53 | #imagecontainerbox, 54 | #permList, 55 | .groupbox-body { 56 | -moz-appearance: none !important; 57 | border: 1px solid !important; 58 | border-color: var(--ff-midnight-color-base90) !important; 59 | } 60 | 61 | groupbox.collapsable caption .caption-icon { 62 | filter: invert(65%) !important; 63 | } 64 | 65 | tree { 66 | -moz-appearance: none !important; 67 | color: var(--ff-midnight-color-base30) !important; 68 | } 69 | 70 | treecol { 71 | -moz-appearance: none !important; 72 | border: 0 solid !important; 73 | border-color: var(--ff-midnight-color-base95) !important; 74 | } 75 | 76 | treecolpicker { 77 | -moz-appearance: none !important; 78 | border: none !important; 79 | } 80 | 81 | #viewGroup > radio { 82 | -moz-appearance: none!important; 83 | background-color: var(--ff-midnight-color-base95) !important; 84 | text-shadow: none!important; 85 | padding: 0 8px!important; 86 | color: var(--ff-midnight-color-base30); 87 | border-right: 1px solid!important; 88 | border-color: var(--ff-midnight-color-base90) !important; 89 | } 90 | 91 | #viewGroup > radio[selected=true] { 92 | color: var(--ff-midnight-color-base10) !important; 93 | background-color: var(--ff-midnight-color-base90) !important; 94 | } 95 | 96 | #viewGroup > radio:first-of-type { 97 | border-top-left-radius: 4px !important; 98 | border-bottom-left-radius: 4px !important; 99 | } 100 | 101 | #viewGroup > radio:last-of-type { 102 | border: none !important; 103 | border-top-right-radius: 4px !important; 104 | border-bottom-right-radius: 4px !important; 105 | } 106 | 107 | label { 108 | color: var(--ff-midnight-color-base10) !important; 109 | } 110 | 111 | @media screen and (-moz-windows-theme), 112 | screen and (-moz-windows-classic), 113 | screen and (-moz-windows-default-theme), 114 | screen and (-moz-os-version:windows-win7), 115 | screen and (-moz-os-version:windows-win8), 116 | screen and (-moz-os-version:windows-win10), 117 | screen and (-moz-mac-yosemite-theme) { 118 | #topBar { 119 | -moz-appearance: none !important; 120 | background-color: var(--ff-midnight-color-base110) !important; 121 | border: none !important; 122 | padding-top: 5px !important; 123 | padding-bottom: 5px !important; 124 | color: var(--ff-midnight-color-base10) !important; 125 | } 126 | 127 | #metaTagsCaption, 128 | #security-identity, 129 | #security-identity-groupbox, 130 | #security-privacy, 131 | #security-privacy-groupbox, 132 | #security-technical, 133 | #security-technical-groupbox { 134 | -moz-appearance: none !important; 135 | background-color: var(--ff-midnight-color-base) !important; 136 | border: none !important; 137 | color: var(--ff-midnight-color-base30) !important; 138 | } 139 | 140 | #security-identity-groupbox, 141 | #security-privacy-groupbox, 142 | #security-technical-groupbox { 143 | -moz-appearance: none !important; 144 | background-color: var(--ff-midnight-color-base) !important; 145 | } 146 | } 147 | } 148 | 149 | @-moz-document url-prefix(chrome://browser/content/preferences/cookies.xul) { 150 | #CookiesDialog { 151 | -moz-appearance: none !important; 152 | background-color: var(--ff-midnight-color-base) !important; 153 | } 154 | 155 | #domainCol, 156 | #nameCol { 157 | -moz-appearance: none !important; 158 | border: none !important; 159 | } 160 | 161 | #domainCol { 162 | border-right: 1px solid !important; 163 | border-color: var(--ff-midnight-color-base70) !important; 164 | } 165 | 166 | .windowDialog, 167 | textbox { 168 | color: var(--ff-midnight-color-base30) !important; 169 | } 170 | 171 | textbox[type=search] { 172 | -moz-appearance: none !important; 173 | background-color: var(--ff-midnight-color-base92) !important; 174 | border: 1px solid; 175 | border-color: var(--ff-midnight-color-base70) !important; 176 | border-radius: 3px !important; 177 | padding: 2px 4px 2px 2px !important; 178 | } 179 | 180 | #cookiesList { 181 | -moz-appearance: none !important; 182 | border: 1px solid !important; 183 | border-color: var(--ff-midnight-color-base70) !important; 184 | } 185 | 186 | button { 187 | -moz-appearance: none !important; 188 | background-color: var(--ff-midnight-color-base95) !important; 189 | border: 1px solid !important; 190 | border-radius: 3px !important; 191 | color: var(--ff-midnight-color-base10) !important; 192 | border-color: var(--ff-midnight-color-base70) !important; 193 | } 194 | 195 | button:hover { 196 | background-color: var(--ff-midnight-color-base92) !important; 197 | } 198 | } -------------------------------------------------------------------------------- /theme/css/ff-midnight/pdf-viewer.css: -------------------------------------------------------------------------------- 1 | /* --------------------------------------------------------------- 2 | // PDF Viewer 3 | // another regexp(".*\\.(p|P)(d|D)(f|F).*") 4 | // -------------------------------------------------------------*/ 5 | 6 | @-moz-document regexp(".*\\.pdf((\\?|#).*)?") { 7 | 8 | body { 9 | background-color: var(--ff-midnight-color-base) !important; 10 | background-image: none !important; /* url(images/texture.png); */ 11 | } 12 | 13 | #toolbarContainer, 14 | .findbar, 15 | .secondaryToolbar { 16 | background-color: var(--ff-midnight-color-base110) !important; 17 | background-image: none !important; /* url(images/texture.png), linear-gradient(#525252, #454545); */ 18 | } 19 | 20 | #toolbarSidebar { 21 | background-color: var(--ff-midnight-color-base95) !important; 22 | background-image: none !important; /* url(images/texture.png), linear-gradient(#4d4d4d, #404040); */ 23 | 24 | } 25 | } -------------------------------------------------------------------------------- /theme/css/ff-midnight/shared-styles.css: -------------------------------------------------------------------------------- 1 | @-moz-document 2 | url-prefix("about:"), 3 | url-prefix("chrome://") { 4 | 5 | /* --------------------------------------------------------------- 6 | // Context menu 7 | // -------------------------------------------------------------*/ 8 | 9 | menupopup, 10 | panel { 11 | -moz-appearance: none !important; 12 | background: var(--ff-midnight-color-base) !important; 13 | color: var(--ff-midnight-color-base10) !important; 14 | border-radius: 6px; 15 | } 16 | 17 | menu, 18 | menuitem, 19 | menucaption { 20 | -moz-appearance: none !important; 21 | -moz-font-smoothing-background-color: var(--ff-midnight-color-base90) !important; 22 | } 23 | 24 | menubar > menu[_moz-menuactive="true"][open="true"] { 25 | -moz-appearance: none !important; 26 | -moz-font-smoothing-background-color: var(--ff-midnight-color-base90) !important; 27 | color: var(--ff-midnight-color-base10) !important; 28 | } 29 | 30 | menu[_moz-menuactive="true"], 31 | menuitem[_moz-menuactive="true"] { 32 | -moz-font-smoothing-background-color: var(--ff-midnight-color-base10) !important; 33 | color: var(--ff-midnight-color-base10) !important; 34 | background-color: var(--ff-midnight-color-base90) !important; 35 | } 36 | 37 | menulist > menupopup > menuitem, 38 | menulist > menupopup > menucaption, 39 | menulist > menupopup > menu { 40 | color: var(--ff-midnight-color-base10) !important; 41 | } 42 | 43 | menuseparator { 44 | -moz-appearance: none !important; 45 | background: var(--ff-midnight-color-base92) !important; 46 | padding: 1px 0 0 0 !important; 47 | } 48 | 49 | .menu-right { 50 | -moz-appearance: menuarrow; 51 | } 52 | 53 | menulist > menupopup > menu:not([disabled="true"])[selected="true"], 54 | menulist > menupopup > menuitem:not([disabled="true"])[selected="true"] { 55 | color: var(--ff-midnight-color-base10) !important; 56 | background-color: var(--ff-midnight-color-accent-darker) !important; 57 | } 58 | 59 | 60 | /* --------------------------------------------------------------- 61 | // Tree list box 62 | // -------------------------------------------------------------*/ 63 | 64 | tree { 65 | background-color: var(--ff-midnight-color-base) !important; 66 | color: var(--ff-midnight-color-base30) !important; 67 | } 68 | 69 | tree:-moz-focusring { 70 | border: 1px solid var(--ff-midnight-color-base70) !important; 71 | } 72 | 73 | #places tree:-moz-focusring { 74 | border: 0px solid var(--ff-midnight-color-base70) !important; 75 | } 76 | 77 | treechildren::-moz-tree-row { 78 | background-color: var(--ff-midnight-color-base) !important; /* -moz-field; */ 79 | } 80 | 81 | treechildren::-moz-tree-row(multicol, odd) { 82 | background-color: var(--ff-midnight-color-base95) !important; /* -moz-oddtreerow; */ 83 | } 84 | 85 | treechildren::-moz-tree-row(selected) { 86 | background-color: var(--ff-midnight-color-base90) !important; 87 | } 88 | 89 | treechildren::-moz-tree-row(selected, focus) { 90 | background-color: var(--ff-midnight-color-base90) !important; 91 | color: var(--ff-midnight-color-base10) !important; 92 | } 93 | 94 | tree[seltype="cell"] > treechildren::-moz-tree-cell(active, selected) { 95 | background-color: var(--ff-midnight-color-base90) !important; 96 | } 97 | 98 | tree[seltype="cell"] > treechildren::-moz-tree-cell-text(active, selected) { 99 | color: var(--ff-midnight-color-base10) !important; 100 | } 101 | 102 | tree[seltype="text"] > treechildren::-moz-tree-cell-text(active, selected) { 103 | background-color: var(--ff-midnight-color-base90) !important; 104 | color: var(--ff-midnight-color-base10) !important; 105 | } 106 | 107 | treechildren::-moz-tree-cell-text(selected, focus) { 108 | color: var(--ff-midnight-color-base10) !important; 109 | } 110 | 111 | tree[seltype="cell"] > treechildren::-moz-tree-cell(active, selected, focus) { 112 | background-color: var(--ff-midnight-color-base90) !important; 113 | } 114 | 115 | tree[seltype="cell"] > treechildren::-moz-tree-cell-text(active, selected, focus) { 116 | color: var(--ff-midnight-color-base10) !important; 117 | } 118 | 119 | tree[seltype="text"] > treechildren::-moz-tree-cell-text(active, selected, focus) { 120 | background-color: var(--ff-midnight-color-base90) !important; 121 | color: var(--ff-midnight-color-base10) !important; 122 | } 123 | 124 | treecol[dragging="true"] { 125 | color: var(--ff-midnight-color-base10) !important; 126 | } 127 | 128 | treecol:not([hideheader="true"]), 129 | treecolpicker { 130 | -moz-appearance: none !important; 131 | color: var(--ff-midnight-color-base30) !important; 132 | background-color: var(--ff-midnight-color-base110) !important; 133 | } 134 | 135 | treecol, 136 | treecolpicker { 137 | padding: 4px !important; 138 | } 139 | 140 | treecol:not([hideheader="true"]) > .treecol-sortdirection[sortDirection] { 141 | fill: var(--ff-midnight-color-accent) !important; 142 | } 143 | 144 | /* Treecol header seperator color */ 145 | treecol:not([hideheader="true"]):not(:first-child), 146 | treecolpicker { 147 | border-image: linear-gradient(transparent 0%, transparent 20%, var(--ff-midnight-color-base50) 20%, var(--ff-midnight-color-base50) 80%, transparent 80%, transparent 100%) 1 1 !important; 148 | } 149 | 150 | 151 | 152 | @media screen and (-moz-os-version:windows-win7) { 153 | treechildren { 154 | --treechildren-outline: none!important 155 | } 156 | } 157 | 158 | /* --------------------------------------------------------------- 159 | // Bookmarks window 160 | // -------------------------------------------------------------*/ 161 | 162 | 163 | #main-menubar { 164 | background-color: var(--ff-midnight-color-base120) !important; 165 | padding-top: 2px; 166 | padding-bottom: 2px; 167 | } 168 | 169 | #main-menubar > * { 170 | color: var(--ff-midnight-color-base10) !important; 171 | } 172 | 173 | #main-menubar > :hover, 174 | menubar > menu[_moz-menuactive=true][open=true] { 175 | -moz-appearance: none !important; 176 | background: var(--ff-midnight-color-base110) !important 177 | } 178 | 179 | 180 | #placesToolbar { 181 | -moz-appearance: none !important; 182 | background-color: var(--ff-midnight-color-base110) !important; 183 | border: none !important; 184 | border-bottom: 1px solid var(--ff-midnight-color-base95) !important; 185 | } 186 | 187 | #placesToolbar toolbarbutton { 188 | -moz-appearance: none !important; 189 | background: var(--ff-midnight-color-base95) !important; 190 | border-radius: 3px; 191 | } 192 | 193 | #placesToolbar search-textbox { 194 | -moz-appearance: none !important; 195 | padding: 3px 4px !important; 196 | background-color: var(--ff-midnight-color-base95) !important; 197 | color: var(--ff-midnight-color-base10) !important; 198 | border-radius: 3px; 199 | } 200 | 201 | #placesToolbar > toolbarbutton > .toolbarbutton-icon, 202 | #placesToolbar > toolbarbutton[type="menu"] > .toolbarbutton-menu-dropmarker { 203 | fill: var(--ff-midnight-color-base10) !important; 204 | } 205 | 206 | #placesView > splitter { 207 | border-color: var(--ff-midnight-color-base70) !important; 208 | } 209 | 210 | #placeContent > treechildren::-moz-tree-cell, 211 | #placeContent > treechildren::-moz-tree-column { 212 | border-right: 1px solid var(--ff-midnight-color-base70) !important; 213 | } 214 | 215 | .plain { 216 | -moz-appearance: none !important; 217 | } 218 | 219 | #detailsDeck { 220 | background: var(--ff-midnight-color-base110) !important; 221 | border-top: 1px solid var(--ff-midnight-color-base120) !important; 222 | } 223 | 224 | #editBookmarkPanelRows label { 225 | color: var(--ff-midnight-color-base30) !important; 226 | } 227 | 228 | #detailsDeck input{ 229 | -moz-appearance: none; 230 | border: 1px solid var(--ff-midnight-color-base90) !important; 231 | border-radius: 3px; 232 | padding: 3px; 233 | background: var(--ff-midnight-color-base95) !important; 234 | color: var(--ff-midnight-color-base10) !important; 235 | } 236 | 237 | #editBMPanel_tagsSelectorExpander.expander-down { 238 | -moz-appearance: -moz-mac-disclosure-button-closed !important; 239 | filter: invert(79%) !important 240 | } 241 | 242 | #editBMPanel_tagsSelectorExpander.expander-up { 243 | -moz-appearance: -moz-mac-disclosure-button-open !important; 244 | filter: invert(79%) !important 245 | } 246 | 247 | /* --------------------------------------------------------------- 248 | // Tabs 249 | // -------------------------------------------------------------*/ 250 | 251 | tab { 252 | color: var(--ff-midnight-color-base10) !important; 253 | } 254 | 255 | tab:hover { 256 | color: var(--ff-midnight-color-base5) !important; 257 | } 258 | 259 | tab[selected] { 260 | color: var(--ff-midnight-color-accent) !important; 261 | } 262 | 263 | tab:-moz-focusring > .tab-middle > .tab-text { 264 | outline: 2px solid transparent !important; 265 | } 266 | 267 | } -------------------------------------------------------------------------------- /theme/css/ff-midnight/tab-indicator.css: -------------------------------------------------------------------------------- 1 | /* Selected-tab line color */ 2 | .tab-line[multiselected], 3 | .tab-line[selected=true] { 4 | background-color: var(--ff-midnight-color-accent) !important; 5 | } 6 | 7 | /* --------------------------------------------------------------- 8 | // Multi-account Container Extension - Tab-indicator options 9 | // 10 | // Styles: 11 | // - Triangle (default) 12 | // - Dot 13 | // - Top line 14 | // -------------------------------------------------------------*/ 15 | 16 | .tab-background { 17 | position: relative; 18 | } 19 | 20 | /* FF71 > remove spacer for positioning of triangle indicator */ 21 | .tab-background-inner { 22 | display: none; 23 | } 24 | 25 | /* Triangle */ 26 | .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-bottom-line { 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | width: 0; 31 | height: 0 !important; 32 | border-style: solid; 33 | border-width: 0 14px 14px 0; 34 | border-color: transparent var(--identity-tab-color) transparent transparent; 35 | background: none !important; 36 | } 37 | 38 | /* Dot */ 39 | /* 40 | .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-bottom-line { 41 | background: var(--identity-tab-color) !important; 42 | height: 7px !important; 43 | width: 7px; 44 | position: absolute; 45 | top: calc(50% - 3.5px); 46 | right: 4px; 47 | border-radius: 50%; 48 | } 49 | */ 50 | 51 | 52 | /* Top line, over the default line */ 53 | /* 54 | .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-bottom-line { 55 | background: linear-gradient(to right, transparent 0%, var(--identity-tab-color) 0%, var(--identity-tab-color) 100%, transparent 100%) !important; 56 | height: 2px; 57 | top: calc(-100% + 2px); 58 | position: absolute; 59 | left: 0; 60 | } 61 | */ 62 | -------------------------------------------------------------------------------- /theme/css/ff-midnight/view-source.css: -------------------------------------------------------------------------------- 1 | @-moz-document url-prefix(view-source:) { 2 | :root { 3 | background-color: var(--ff-midnight-color-base) !important; 4 | color: var(--ff-midnight-color-base30) !important; 5 | } 6 | 7 | pre[id]:before, 8 | span[id]:before { 9 | color: var(--ff-midnight-color-base30) !important; 10 | } 11 | 12 | .highlight .end-tag, 13 | .highlight .start-tag { 14 | color: var(--ff-midnight-color-highlight-purple) !important; 15 | } 16 | 17 | .highlight .comment { 18 | color: var(--ff-midnight-color-highlight-green) !important; 19 | } 20 | 21 | .highlight .cdata { 22 | color: var(--ff-midnight-color-highlight-orchid) !important; 23 | } 24 | 25 | .highlight .doctype { 26 | color: var(--ff-midnight-color-highlight-bluegrey) !important; 27 | } 28 | 29 | .highlight .pi { 30 | color: var(--ff-midnight-color-highlight-red) !important; 31 | } 32 | 33 | .highlight .entity { 34 | color: var(--ff-midnight-color-highlight-salmon) !important; 35 | } 36 | 37 | .highlight .attribute-name { 38 | color: var(--ff-midnight-color-base0) !important; 39 | } 40 | 41 | .highlight .attribute-value { 42 | color: var(--ff-midnight-color-highlight-blue) !important; 43 | } 44 | 45 | .highlight .markupdeclaration { 46 | color: var(--ff-midnight-color-highlight-bluegrey) !important; 47 | } 48 | 49 | .highlight .error, 50 | .highlight .error > :-moz-any(.start-tag,.end-tag,.comment,.cdata,.doctype,.pi,.entity,.attribute-name,.attribute-value) { 51 | color: var(--ff-midnight-color-alert) !important; 52 | } 53 | } -------------------------------------------------------------------------------- /theme/userChrome.css: -------------------------------------------------------------------------------- 1 | /* ############################################################### 2 | | 3 | | FF Midnight Theme for Firefox 4 | | 5 | | ############################################################# */ 6 | 7 | 8 | /* ############################################################### 9 | // 10 | // 1. Choose a color palette below or add your own 11 | // 2. Required Firefox setting: Preferences > Themes > Dark Theme 12 | // 13 | // - Don't use the default xul @namespace in this file 14 | // 15 | // #############################################################*/ 16 | 17 | 18 | /* --------------------------------------------------------------- 19 | // 1. FF Midnight - Colors Themes 20 | // -------------------------------------------------------------*/ 21 | 22 | /* @import "./css/ff-midnight/colors/ff-midnight-colors-cosmos.css"; */ 23 | @import "./css/ff-midnight/colors/ff-midnight-colors-galaxy.css"; 24 | /* @import "./css/ff-midnight/colors/ff-midnight-colors-redshift.css"; */ 25 | 26 | /* Required */ 27 | @import "./css/ff-midnight/colors/ff-midnight-colors-utility.css"; 28 | 29 | /* --------------------------------------------------------------- 30 | // FF Midnight - Userchrome styles 31 | // -------------------------------------------------------------*/ 32 | 33 | @import "./css/ff-midnight/shared-styles.css"; 34 | @import "./css/ff-midnight/ff-midnight-userchrome.css"; 35 | 36 | @import "./css/ff-midnight/tab-indicator.css"; 37 | @import "./css/ff-midnight/page-info.css"; 38 | 39 | /* --------------------------------------------------------------- 40 | // End FF Midnight Theme 41 | // -------------------------------------------------------------*/ -------------------------------------------------------------------------------- /theme/userContent.css: -------------------------------------------------------------------------------- 1 | /* ############################################################### 2 | | 3 | | FF Midnight Theme for Firefox 4 | | 5 | | ############################################################# */ 6 | 7 | 8 | /* ############################################################### 9 | // 10 | // 1. Choose a color palette below or add your own 11 | // 2. Optional: Add a background image to About:Home 12 | // 3. Optional: Ublock Origin theme 13 | // 4. Optional: Firefox Multi-account Containers theme 14 | // 5. Required Firefox setting: Preferences > Themes > Dark Theme 15 | // 16 | // #############################################################*/ 17 | 18 | 19 | /* --------------------------------------------------------------- 20 | // 1. FF Midnight - Colors Themes 21 | // -------------------------------------------------------------*/ 22 | 23 | /* @import "./css/ff-midnight/colors/ff-midnight-colors-cosmos.css"; */ 24 | @import "./css/ff-midnight/colors/ff-midnight-colors-galaxy.css"; 25 | /* @import "./css/ff-midnight/colors/ff-midnight-colors-redshift.css"; */ 26 | 27 | /* Required */ 28 | @import "./css/ff-midnight/colors/ff-midnight-colors-utility.css"; 29 | 30 | /* --------------------------------------------------------------- 31 | // 2. Background image for About:Home 32 | 33 | // Required configuration: see instructions in ff-midnight-background-image.css 34 | // -------------------------------------------------------------*/ 35 | 36 | @import "./css/ff-midnight/background-image.css"; 37 | 38 | 39 | /* --------------------------------------------------------------- 40 | // All Firefox About: pages 41 | // -------------------------------------------------------------*/ 42 | 43 | @import "./css/ff-midnight/shared-styles.css"; 44 | @import "./css/ff-midnight/about-pages.css"; 45 | 46 | 47 | /* --------------------------------------------------------------- 48 | // 3. Ublock Origin Extension 49 | // 50 | // Required configuration: set UUID in ff-midnight-ublock.css 51 | // -------------------------------------------------------------*/ 52 | 53 | @import "./css/ff-midnight/extensions/ublock-origin.css"; 54 | 55 | /* --------------------------------------------------------------- 56 | // 4. Firefox Multi-account Containers Extension 57 | // 58 | // Disabled; extension has native darkmode 59 | // Required configuration: set UUID in ff-midnight-multi-account-containers.css 60 | // -------------------------------------------------------------*/ 61 | 62 | /* @import "./css/ff-midnight/extensions/multi-account-containers.css"; */ 63 | 64 | /* --------------------------------------------------------------- 65 | // PDF Viewer 66 | // -------------------------------------------------------------*/ 67 | 68 | @import "./css/ff-midnight/pdf-viewer.css"; 69 | 70 | 71 | /* --------------------------------------------------------------- 72 | // View Source 73 | // -------------------------------------------------------------*/ 74 | 75 | @import "./css/ff-midnight/view-source.css"; 76 | 77 | 78 | /* --------------------------------------------------------------- 79 | // End FF Midnight Theme 80 | // -------------------------------------------------------------*/ --------------------------------------------------------------------------------