├── .gitignore ├── LICENSE ├── README.md ├── pages ├── about-dark.css ├── about-light.css ├── about.css └── view-source-dark.css ├── screenshot.png ├── screenshot2.png ├── ui ├── csd-elementary.css ├── gnome-3.18-dark.css ├── gnome-3.18-light.css ├── gnome-3.26-dark.css ├── gnome-3.26-light.css ├── gnome-icons.css ├── hide-single-tab.css ├── matching-autocomplete-width.css ├── parts │ ├── csd-fullscreen.css │ ├── csd-left-controls.css │ ├── csd.css │ ├── custom-icons.css │ ├── headerbar-buttons.css │ ├── headerbar-private-urlbar.css │ ├── headerbar-urlbar.css │ ├── headerbar.css │ ├── popups.css │ ├── remove-white-flash.css │ ├── tabsbar.css │ └── toolbox.css ├── symbolic-tab-icons.css └── theme.css ├── userChrome.css └── userContent.css /.gitignore: -------------------------------------------------------------------------------- 1 | customChrome.css 2 | customContent.css 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | This is free and unencumbered software released into the public domain. 2 | 3 | Anyone is free to copy, modify, publish, use, compile, sell, or 4 | distribute this software, either in source code form or as a compiled 5 | binary, for any purpose, commercial or non-commercial, and by any 6 | means. 7 | 8 | In jurisdictions that recognize copyright laws, the author or authors 9 | of this software dedicate any and all copyright interest in the 10 | software to the public domain. We make this dedication for the benefit 11 | of the public at large and to the detriment of our heirs and 12 | successors. We intend this dedication to be an overt act of 13 | relinquishment in perpetuity of all present and future rights to this 14 | software under copyright law. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | 24 | For more information, please refer to 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Firefox GNOME Theme 2 | 3 | ![Screenshot of the theme](screenshot.png) 4 | ![Screenshot of the theme](screenshot2.png) 5 | 6 | ## Description 7 | 8 | This is a bunch of CSS code to make Firefox 57+ look closer to GNOME's default 9 | theme. It styles the UI and internal Firefox' pages like `about:` and 10 | `view-source:`. Both light and dark variants are supported. 11 | 12 | The `master` branch track current Firefox stable. If you need support 13 | for older versions, they are archived under version-specific git tags. Eg. if 14 | you're using Firefox 57, switch to the `57` tag after cloning the repo: 15 | 16 | ```sh 17 | git checkout 57 18 | ``` 19 | 20 | ## Installation 21 | 22 | Extensions can no longer style UI elements, but we can still use good old 23 | `userChrome.css` and `userContent.css` files. Just drop this repo to your 24 | `chrome` directory: 25 | 26 | 1. Go to your Firefox profile's directory, if it's located in the default 27 | location, this should work: 28 | 29 | ```sh 30 | cd ~/.mozilla/firefox/*.default 31 | ``` 32 | 33 | 2. Create a `chrome` directory if it doesn't exist. 34 | 35 | ```sh 36 | mkdir -p chrome 37 | cd chrome 38 | ``` 39 | 40 | 3. Clone this repo to a subdirectory: 41 | 42 | ```sh 43 | git clone https://github.com/kurogetsusai/firefox-gnome-theme.git 44 | ``` 45 | 46 | 4. Create single-line user CSS files if non-existent or empty (at least one line 47 | is needed for `sed`): 48 | 49 | ```sh 50 | [[ -s userChrome.css ]] || echo >> userChrome.css 51 | [[ -s userContent.css ]] || echo >> userContent.css 52 | ``` 53 | 54 | 5. Import this theme at the beginning of the CSS files (all `@import`s must come 55 | before any existing `@namespace` declarations): 56 | 57 | ```sh 58 | sed -i '1s/^/@import "firefox-gnome-theme\/userChrome.css";\n/' userChrome.css 59 | sed -i '1s/^/@import "firefox-gnome-theme\/userContent.css";\n/' userContent.css 60 | ``` 61 | 62 | 6. Enable the theme in the `firefox-gnome-theme/userChrome.css` file. Open it 63 | with a text editor and follow instructions to enable one of the theme variants. 64 | You can also enable extra features here. Keep in mind this file might change in 65 | future versions and your configuration will be lost. You can copy the `@import`s 66 | you want to enable to the `userChrome.css` file directly in your `chrome` 67 | directory if you want it to survive updates. Remember all `@import`s must be at 68 | the top of the file, before other statements. 69 | 70 | The GTK theme variant must match the variant you picked for this Firefox 71 | theme, which means you must either enable (for the dark variant) or disable (for 72 | the light one) global dark theme in GNOME Tweak Tools, or alternatively, you 73 | can run Firefox with a specific variant without changing the global theme by 74 | supplying the `GTK_THEME` variable like this: 75 | 76 | ```sh 77 | # for the dark theme 78 | GTK_THEME=Adwaita:dark firefox 79 | # for the light one 80 | GTK_THEME=Adwaita:light firefox 81 | ``` 82 | 83 | 7. Optionally you can enable styling of Firefox' internal pages in the 84 | `userContent.css` file analogous to the `userChrome.css` file. 85 | 86 | You might want to adjust your default link colors so they are more visible on 87 | dark background, either drop the code below into your 88 | `(firefox profile)/user.js` file or change them manually in `about:config`. 89 | 90 | ```js 91 | user_pref("browser.active_color", "#cc1a1a"); 92 | user_pref("browser.anchor_color", "#0a8dff"); 93 | user_pref("browser.visited_color", "#0871cc"); 94 | user_pref("browser.display.background_color", "#2e3436"); 95 | user_pref("browser.display.foreground_color", "#ccc"); 96 | ``` 97 | 98 | You can't get rid of the title bar for now (except for Fedora, where you can 99 | enable CSD), but you will be able to do it in Firefox 60, when Firefox adds 100 | client-side decoration support. For now you can use a GNOME extension like 101 | [No Title Bar](https://extensions.gnome.org/extension/1267/no-title-bar/) 102 | to hide it. 103 | 104 | ## Broken stuff 105 | 106 | Icons might appear black where they should be white on some systems. I have no 107 | idea why, but you can adjust them in the `ui/theme.css` file, look for 108 | `filter: invert`. 109 | 110 | I haven't finished styling the new tab page. I just replaced it with a 111 | blank page, because I don't like all that clutter anyway, but feel free to 112 | finish it yourself (my attempts are in the `userContent.css` file, look for 113 | `about:newtab`). 114 | 115 | Feel free to report issues here on GitHub and share your ideas if you know how 116 | to fix them. Since I can't do everything alone, this project relies on 117 | contributors, many existing features were added by our contributors, so don't 118 | hesitate to become one of them! 119 | 120 | ## Development 121 | 122 | If you wanna mess around the styles and change something, you might find these 123 | things useful. 124 | 125 | To use the Inspector to debug the UI, open the developer tools (F12) on any 126 | page, go to options, check both of those: 127 | 128 | - Enable browser chrome and add-on debugging toolboxes 129 | - Enable remote debugging 130 | 131 | Now you can close those tools and press Ctrl+Alt+Shift+I to Inspect the browser 132 | UI. 133 | 134 | Also you can inspect any GTK3 application, for example type this into a terminal 135 | and it will run Epiphany with the GTK Inspector, so you can check the CSS styles 136 | of its elements too. 137 | 138 | ```sh 139 | GTK_DEBUG=interactive epiphany 140 | ``` 141 | 142 | Feel free to use any parts of my code to develop your own themes, I don't force 143 | any specific license on your code. 144 | -------------------------------------------------------------------------------- /pages/about-dark.css: -------------------------------------------------------------------------------- 1 | @import "about.css"; 2 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 3 | @namespace html url("http://www.w3.org/1999/xhtml"); 4 | 5 | /* keep this selector the same as the next one */ 6 | *|*:root:not(#ublock0-epicker) { 7 | /* Variables that start with --gnome- are added by me and are assigned 8 | * to elements somewhere in this code. The rest of the variables are 9 | * built-in in Firefox, so you need to add an !important if you wanna 10 | * override them. */ 11 | 12 | --gnome-privatebrowsing-page-bgcolor: #111; 13 | 14 | --in-content-page-color: #ccc !important; 15 | --in-content-page-background: #2e3436 !important; 16 | --in-content-text-color: #ccc !important; 17 | --in-content-selected-text: #fff; 18 | --in-content-box-background: #232729 !important; 19 | --in-content-box-background-odd: #292e30 !important; 20 | --in-content-box-background-hover: #232729 !important; 21 | --in-content-box-background-active: #171a1b !important; 22 | --in-content-box-border-color: #1e2123 !important; 23 | --in-content-item-hover: rgba(0, 149, 221, .25); 24 | --in-content-item-selected: #0a84ff; 25 | --in-content-border-highlight: #0a84ff; 26 | --in-content-border-focus: #0a84ff; 27 | --in-content-border-color: #1e2123 !important; 28 | --in-content-category-border-focus: 1px dotted #0a84ff; 29 | --in-content-category-text: #ccc !important; 30 | --in-content-category-text-active: #eee !important; 31 | --in-content-category-text-selected: #2981dc !important; 32 | --in-content-category-text-selected-active: #0060df; 33 | --in-content-category-background-hover: rgba(12, 12, 13, .1); 34 | --in-content-category-background-active: rgba(12, 12, 13, .15); 35 | --in-content-category-background-selected-hover: rgba(12, 12, 13, .15); 36 | --in-content-category-background-selected-active: rgba(12, 12, 13, .2); 37 | --in-content-tab-color: #ccc !important; 38 | --in-content-link-color: #0a8dff; 39 | --in-content-link-color-hover: #0060df; 40 | --in-content-link-color-active: #003eaa; 41 | --in-content-link-color-visited: #0a8dff; 42 | --in-content-primary-button-background: #0a84ff; 43 | --in-content-primary-button-background-hover: #0060df; 44 | --in-content-primary-button-background-active: #003eaa; 45 | --in-content-table-border-dark-color: #1e2123 !important; 46 | --in-content-table-header-background: #0a84ff; 47 | 48 | /* Extensions' popups */ 49 | --popup-background: -moz-field; 50 | } 51 | 52 | /* A workaround for the screenshot tool, issue #7 */ 53 | @-moz-document regexp("^moz-extension://.+/blank.html$") { 54 | /* keep this selector the same as the previous one */ 55 | *|*:root:not(#ublock0-epicker) { 56 | --in-content-page-background: unset !important; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /pages/about-light.css: -------------------------------------------------------------------------------- 1 | @import "about.css"; 2 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 3 | @namespace html url("http://www.w3.org/1999/xhtml"); 4 | 5 | /* keep this selector the same as the next one */ 6 | *|*:root:not(#ublock0-epicker) { 7 | /* Variables that start with --gnome- are added by me and are assigned 8 | * to elements somewhere in this code. The rest of the variables are 9 | * built-in in Firefox, so you need to add an !important if you wanna 10 | * override them. */ 11 | 12 | --gnome-privatebrowsing-page-bgcolor: #ededed; 13 | 14 | --in-content-page-color: #2e3436 !important; 15 | --in-content-page-background: #ededed !important; 16 | --in-content-text-color: #2e3436 !important; 17 | --in-content-selected-text: #fff; 18 | --in-content-box-background: #fff; 19 | --in-content-box-background-odd: #f3f6fa; 20 | --in-content-box-background-hover: #ebebeb; 21 | --in-content-box-background-active: #dadada; 22 | --in-content-box-border-color: #d7d7db; 23 | --in-content-item-hover: rgba(0, 149, 221, .25); 24 | --in-content-item-selected: #0a84ff; 25 | --in-content-border-highlight: #0a84ff; 26 | --in-content-border-focus: #0a84ff; 27 | --in-content-border-color: #d7d7db; 28 | --in-content-category-border-focus: 1px dotted #0a84ff; 29 | --in-content-category-text: rgba(12, 12, 13); 30 | --in-content-category-text-active: #0c0c0d; 31 | --in-content-category-text-selected: #2981dc !important; 32 | --in-content-category-text-selected-active: #0060df; 33 | --in-content-category-background-hover: rgba(12, 12, 13, .1); 34 | --in-content-category-background-active: rgba(12, 12, 13, .15); 35 | --in-content-category-background-selected-hover: rgba(12, 12, 13, .15); 36 | --in-content-category-background-selected-active: rgba(12, 12, 13, .2); 37 | --in-content-tab-color: #424f5a; 38 | --in-content-link-color: #0a8dff; 39 | --in-content-link-color-hover: #0060df; 40 | --in-content-link-color-active: #003eaa; 41 | --in-content-link-color-visited: #0a8dff; 42 | --in-content-primary-button-background: #0a84ff; 43 | --in-content-primary-button-background-hover: #0060df; 44 | --in-content-primary-button-background-active: #003eaa; 45 | --in-content-table-border-dark-color: #d1d1d1; 46 | --in-content-table-header-background: #0a84ff; 47 | 48 | /* Extensions' popups */ 49 | --popup-background: -moz-field; 50 | } 51 | 52 | /* A workaround for the screenshot tool, issue #7 */ 53 | @-moz-document regexp("^moz-extension://.+/blank.html$") { 54 | /* keep this selector the same as the previous one */ 55 | *|*:root:not(#ublock0-epicker) { 56 | --in-content-page-background: unset !important; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /pages/about.css: -------------------------------------------------------------------------------- 1 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 2 | @namespace html url("http://www.w3.org/1999/xhtml"); 3 | 4 | /* Checkboxes and radios */ 5 | xul|*.checkbox-check, xul|*.radio-check { 6 | background-color: var(--in-content-box-background) !important; 7 | box-shadow: none !important; 8 | } 9 | xul|*.checkbox-check[checked], xul|*.radio-check[selected] { 10 | background-color: var(--in-content-box-background) !important; 11 | fill: var(--in-content-page-color) !important; 12 | } 13 | html|input[type="checkbox"] { 14 | background-color: var(--in-content-box-background) !important; 15 | background-image: none !important; 16 | box-shadow: none !important; 17 | } 18 | html|input[type="checkbox"]:checked { 19 | background-image: url("chrome://global/skin/in-content/check.svg") !important; 20 | fill: var(--in-content-page-color) !important; 21 | } 22 | 23 | /* Fixes for treecol's sort icon and border between header cells, examples: 24 | * about:preferences, about:sessionrestore */ 25 | xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] { 26 | fill: var(--in-content-page-color) !important; 27 | } 28 | xul|treecol:not([hideheader="true"]):not(:first-child), xul|treecolpicker { 29 | border-image: linear-gradient(transparent 0%, transparent 20%, var(--in-content-border-color) 20%, var(--in-content-border-color) 80%, transparent 80%, transparent 100%) 1 1 !important; 30 | } 31 | 32 | /* Try to apply styles to add-ons' settings pages */ 33 | @-moz-document url-prefix("moz-extension://") { 34 | body { 35 | background-color: var(--in-content-page-background) !important; 36 | color: var(--in-content-page-color) !important; 37 | } 38 | } 39 | 40 | /* Try to make popups added by add-ons and their settings pages look dark too, 41 | * doesn't always work tho because of their weird styles */ 42 | @-moz-document regexp("^moz-extension://.+/popup.html$") { 43 | body { 44 | background-color: var(--popup-background) !important; 45 | color: var(--in-content-page-color) !important; 46 | } 47 | } 48 | 49 | @-moz-document url("about:"), url("about:accounts"), url("about:buildconfig"), 50 | url("about:cache"), url("about:checkerboard"), url("about:memory"), 51 | url("about:mozilla"), url("about:webrtc") { 52 | html { 53 | background: var(--in-content-page-background) !important; 54 | color: var(--in-content-page-color) !important; 55 | } 56 | } 57 | 58 | @-moz-document url("about:accounts") { 59 | #stage { 60 | background: var(--in-content-box-background) !important; 61 | color: var(--in-content-page-color) !important; 62 | } 63 | } 64 | 65 | @-moz-document url("about:addons") { 66 | /* Gear button */ 67 | #header-utils-btn:active:hover:not([disabled="true"]), 68 | #header-utils-btn[open="true"] { 69 | background-color: var(--in-content-box-background-active) !important; 70 | } 71 | .header-button:hover:not([disabled="true"]), 72 | #header-utils-btn:hover:not([disabled="true"]) { 73 | background-color: var(--in-content-box-background-hover) !important; 74 | } 75 | 76 | /* Text on the addon list */ 77 | .addon { 78 | color: var(--in-content-page-color) !important; 79 | } 80 | 81 | /* Shadow on removed addons */ 82 | .addon-view[notification], .addon-view[pending] { 83 | background-image: none !important; 84 | } 85 | 86 | /* Addon details */ 87 | .detail-view-container { 88 | color: var(--in-content-page-color) !important; 89 | } 90 | .detail-row, .detail-row-complex, setting { 91 | text-shadow: none !important; 92 | } 93 | 94 | /* Tabs when searching addons */ 95 | .sorter { 96 | color: var(--in-content-tab-color) !important; 97 | } 98 | .sorter[checkState="1"], .sorter[checkState="2"] { 99 | background-color: transparent !important; 100 | } 101 | 102 | /* Some hints above lists in themes and plugins */ 103 | .alert { 104 | background-color: var(--in-content-box-background) !important; 105 | } 106 | } 107 | 108 | @-moz-document url("about:newtab"), url("about:home"), url("about:blank") { 109 | body { 110 | background: var(--in-content-page-background) !important; 111 | color: var(--in-content-page-color) !important; 112 | overflow: auto !important; 113 | } 114 | 115 | /* Preferences button */ 116 | .prefs-pane-button button, #newtab-customize-button { 117 | fill: var(--in-content-page-color) !important; 118 | } 119 | .prefs-pane-button button:hover, #newtab-customize-button:hover { 120 | background-color: transparent !important; 121 | fill: var(--in-content-item-selected) !important; 122 | } 123 | 124 | /* Old about:newtab's overlay */ 125 | #newtab-customize-overlay { 126 | background-color: transparent !important; 127 | } 128 | 129 | /* Old about:newtab's preferences menu */ 130 | #newtab-customize-panel-anchor, #newtab-customize-panel-inner-wrapper, #newtab-customize-panel-inner-wrapper * { 131 | background-color: var(--in-content-box-background) !important; 132 | border-color: var(--in-content-box-border-color) !important; 133 | color: var(--in-content-page-color) !important; 134 | } 135 | 136 | /* Sidebar (after clicking the preferences button) */ 137 | .prefs-pane .sidebar { 138 | background-color: var(--in-content-box-background) !important; 139 | border-color: var(--in-content-box-border-color) !important; 140 | color: var(--in-content-page-color) !important; 141 | } 142 | .prefs-pane .prefs-modal-inner-wrapper .options { 143 | background: none !important; 144 | } 145 | .icon.icon-topsites { 146 | fill: var(--in-content-page-color) !important; 147 | } 148 | .prefs-pane .actions { 149 | background-color: var(--in-content-box-background) !important; 150 | border-color: var(--in-content-box-border-color) !important; 151 | } 152 | 153 | /* Let's get started tour (after clicking the Firefox button) */ 154 | #onboarding-overlay { 155 | background-color: var(--in-content-page-background) !important; 156 | } 157 | #onboarding-overlay.onboarding-opened > #onboarding-overlay-dialog { 158 | background-color: var(--in-content-box-background) !important; 159 | border-color: var(--in-content-box-border-color) !important; 160 | color: var(--in-content-page-color) !important; 161 | } 162 | 163 | /* Search bar */ 164 | .search-wrapper .search-label, .search-wrapper .search-button, 165 | #searchIcon, #searchSubmit { 166 | fill: var(--in-content-page-color) !important; 167 | } 168 | 169 | /* Snippets on the old about:home page */ 170 | #snippets { 171 | color: inherit !important; 172 | } 173 | 174 | /* Some other parts (partial) */ 175 | .section-top-bar .info-option-icon { 176 | fill: var(--in-content-page-color) !important; 177 | } 178 | .section-top-bar .info-option { 179 | background-color: var(--in-content-box-background) !important; 180 | border-color: var(--in-content-box-border-color) !important; 181 | } 182 | .section-title span { 183 | color: var(--in-content-page-color) !important; 184 | fill: var(--in-content-page-color) !important; 185 | } 186 | } 187 | 188 | @-moz-document url("about:config") { 189 | #warningTitle { 190 | color: unset !important; 191 | } 192 | } 193 | 194 | @-moz-document url("about:debugging") { 195 | .addon-target-container, .service-worker-multi-process { 196 | background-color: var(--in-content-box-background) !important; 197 | } 198 | } 199 | 200 | @-moz-document url("about:performance") { 201 | #subprocess-reports td { 202 | background-color: var(--in-content-box-background) !important; 203 | } 204 | } 205 | 206 | @-moz-document url("about:plugins"), url("about:robots") { 207 | html, body { 208 | background: var(--in-content-page-background) !important; 209 | color: var(--in-content-page-color) !important; 210 | } 211 | } 212 | 213 | @-moz-document url-prefix("about:preferences"), 214 | url-prefix("chrome://browser/content/preferences/"), 215 | url("chrome://passwordmgr/content/passwordManager.xul"), 216 | url("chrome://mozapps/content/preferences/changemp.xul"), 217 | url("chrome://mozapps/content/update/history.xul"), 218 | url("chrome://browser/content/sanitize.xul"), 219 | url("chrome://pippki/content/certManager.xul"), 220 | url("chrome://pippki/content/device_manager.xul") { 221 | /* Dialogs */ 222 | .dialogBox, dialog, window, prefpane, prefwindow, .windowDialog { 223 | background-color: var(--in-content-page-background) !important; 224 | color: var(--in-content-page-color) !important; 225 | } 226 | .dialogBox > .groupbox-title { 227 | background-color: var(--in-content-box-background) !important; 228 | border-bottom-color: var(--in-content-box-border-color) !important; 229 | } 230 | } 231 | 232 | @-moz-document url("about:privatebrowsing") { 233 | body { 234 | background-color: var(--gnome-privatebrowsing-page-bgcolor); 235 | } 236 | 237 | a.button { 238 | background-color: transparent !important; 239 | border-color: var(--in-content-page-color) !important; 240 | } 241 | } 242 | 243 | @-moz-document url("about:profiles") { 244 | html { 245 | --aboutProfiles-table-background: var(--in-content-box-background) !important; 246 | } 247 | } 248 | 249 | @-moz-document url("about:studies") { 250 | :root { 251 | --info-box-background-color: var(--in-content-box-background) !important; 252 | --info-box-border-color: var(--in-content-box-border-color) !important; 253 | } 254 | } 255 | 256 | @-moz-document url("about:support") { 257 | html { 258 | --aboutSupport-table-background: var(--in-content-box-background) !important; 259 | } 260 | } 261 | 262 | @-moz-document url("about:telemetry") { 263 | #ping-picker { 264 | background-color: var(--in-content-box-background) !important; 265 | } 266 | } 267 | 268 | @-moz-document url("about:url-classifier") { 269 | html { 270 | --aboutUrlClassifier-table-background: var(--in-content-box-background) !important; 271 | } 272 | } 273 | 274 | @-moz-document url("about:webrtc") { 275 | #content > div { 276 | background-color: var(--in-content-box-background) !important; 277 | border-color: var(--in-content-box-border-color) !important; 278 | border-radius: 3px !important; 279 | } 280 | } 281 | -------------------------------------------------------------------------------- /pages/view-source-dark.css: -------------------------------------------------------------------------------- 1 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 2 | @namespace html url("http://www.w3.org/1999/xhtml"); 3 | 4 | @-moz-document url("chrome://global/content/viewSource.xul"), 5 | url("chrome://global/content/viewPartialSource.xul"), 6 | url-prefix("view-source:") { 7 | html, body { 8 | background: #2e3436 !important; 9 | color: #babdb6 !important; 10 | font-family: "Ubuntu Mono", monospace; 11 | font-size: 14px; 12 | -moz-tab-size: 8 !important; 13 | } 14 | 15 | ::-moz-selection { 16 | background-color: #888a85 !important; 17 | color: #eeeeec !important; 18 | } 19 | 20 | pre[id]::before, span[id]::before { 21 | background: #2e3436 !important; 22 | color: #888a85 !important; 23 | } 24 | 25 | span { 26 | font-style: normal !important; 27 | font-weight: normal !important; 28 | text-decoration: none !important; 29 | } 30 | 31 | a { 32 | color: #0a8dff !important; 33 | } 34 | 35 | .comment { 36 | color: #888a85 !important; 37 | } 38 | 39 | .start-tag, .end-tag { 40 | color: #729fcf !important; 41 | } 42 | 43 | .attribute-name { 44 | color: #ce5c00 !important; 45 | } 46 | 47 | .attribute-value { 48 | color: #669900 !important; 49 | } 50 | 51 | .entity, .doctype, .pi { 52 | color: #dd4a68 !important; 53 | } 54 | 55 | .error { 56 | background: #cc0000 !important; 57 | color: #eeeeec !important; 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lunakurame/firefox-gnome-theme/ae2bcec92f80ff5af782b45a855520deeddcfc9c/screenshot.png -------------------------------------------------------------------------------- /screenshot2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lunakurame/firefox-gnome-theme/ae2bcec92f80ff5af782b45a855520deeddcfc9c/screenshot2.png -------------------------------------------------------------------------------- /ui/csd-elementary.css: -------------------------------------------------------------------------------- 1 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 2 | 3 | /* Adjust empty space on the headerbar's sides */ 4 | :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { 5 | margin-left: 43px !important; 6 | margin-right: 43px !important; 7 | padding-left: 7px !important; 8 | padding-right: 7px !important; 9 | } 10 | 11 | /* Remove window controls separator */ 12 | :root[tabsintitlebar]:not([inFullscreen]) #nav-bar::after { 13 | display: none; 14 | } 15 | 16 | /* Remove the spacer pushing window controls to the right */ 17 | :root[tabsintitlebar] #titlebar-spacer { 18 | display: none; 19 | } 20 | :root[tabsintitlebar] #titlebar { 21 | margin-left: -4px; 22 | } 23 | :root[tabsintitlebar] #titlebar-buttonbox { 24 | padding-left: 4px; 25 | } 26 | 27 | /* Expand window controls' container to the window's width */ 28 | :root[tabsintitlebar] #titlebar-content, 29 | :root[tabsintitlebar] #titlebar-buttonbox-container { 30 | display: block; 31 | } 32 | :root[tabsintitlebar] #titlebar-buttonbox { 33 | display: flex; 34 | } 35 | 36 | /* Don't let the title bar cover the headerbar */ 37 | :root[tabsintitlebar] #nav-bar { 38 | z-index: 1; 39 | } 40 | 41 | /* Reorder titlebar buttons */ 42 | :root[tabsintitlebar] #titlebar-min { 43 | display: none; 44 | } 45 | :root[tabsintitlebar] #titlebar-buttonbox { 46 | direction: rtl; 47 | } 48 | :root[tabsintitlebar] #titlebar-buttonbox * { 49 | direction: initial; 50 | } 51 | 52 | /* Move the close button to the left and the maximize button to the right */ 53 | :root[tabsintitlebar] #titlebar-buttonbox { 54 | justify-content: space-between; 55 | } 56 | -------------------------------------------------------------------------------- /ui/gnome-3.18-dark.css: -------------------------------------------------------------------------------- 1 | @import "theme.css"; 2 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 3 | 4 | /* Colors */ 5 | :root { 6 | /* Variables that start with --gnome- are added by me and are assigned 7 | * to elements somewhere in this code. The rest of the variables are 8 | * built-in in Firefox, so you need to add an !important if you wanna 9 | * override them. */ 10 | 11 | /* Browser area before a page starts loading */ 12 | --gnome-browser-before-load-bgcolor: #2e3436; 13 | 14 | /* Extra toolbars like the bookmark bar */ 15 | --toolbar-bgcolor: var(--gnome-tabbar-bgcolor) !important; 16 | --toolbar-bgimage: none !important; 17 | 18 | /* Header bar */ 19 | --gnome-headerbar-bgimage: linear-gradient(rgb(67, 74, 74), rgb(57, 63, 63)); 20 | --gnome-headerbar-border-bottom: 1px solid rgb(28, 31, 31); 21 | --gnome-headerbar-box-shadow: 0 -1px rgb(45, 50, 50) inset, 0 1px rgba(238, 238, 236, .1) inset; 22 | --gnome-headerbar-button-bgimage: linear-gradient(rgb(69, 76, 76), rgb(57, 63, 63) 40%, rgb(45, 50, 50)); 23 | --gnome-headerbar-button-border: 1px solid rgba(28, 31, 31); 24 | --gnome-headerbar-button-border-bottom: var(--gnome-headerbar-button-border); 25 | --gnome-headerbar-button-box-shadow: 0 1px rgba(255, 255, 255, .1) inset, 0 1px rgba(238, 238, 236, .1); 26 | --gnome-headerbar-button-hover-bgimage: linear-gradient(rgb(91, 100, 100), rgb(67, 73, 73) 40%, rgb(55, 60, 60)); 27 | --gnome-headerbar-button-active-bgimage: linear-gradient(rgb(35, 39, 39), rgb(41, 45, 45) 40%, rgb(45, 50, 50)); 28 | --gnome-headerbar-button-active-box-shadow: 0 1px rgba(0, 0, 0, .07) inset, 0 2px 1px -2px rgba(0, 0, 0, .6) inset, 0 1px rgba(238, 238, 236, .1); 29 | --gnome-headerbar-button-disabled-bgcolor: #323636; 30 | --gnome-headerbar-button-disabled-border: var(--gnome-headerbar-button-border); 31 | --gnome-headerbar-button-disabled-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(238, 238, 236, .1); 32 | --gnome-inactive-headerbar-bgimage: linear-gradient(rgba(57, 63, 63), rgba(57, 63, 63)); 33 | --gnome-inactive-headerbar-border-bottom: 1px solid rgb(30, 34, 34); 34 | --gnome-inactive-headerbar-box-shadow: 0 1px rgba(238, 238, 236, .1) inset; 35 | --gnome-inactive-headerbar-button-bgimage: linear-gradient(rgb(57, 63, 63), rgb(57, 63, 63)); 36 | --gnome-inactive-headerbar-button-border: 1px solid rgba(30, 34, 34); 37 | --gnome-inactive-headerbar-button-border-bottom: var(--gnome-inactive-headerbar-button-border); 38 | --gnome-inactive-headerbar-button-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(238, 238, 236, 0); 39 | --gnome-inactive-headerbar-button-disabled-bgcolor: var(--gnome-headerbar-button-disabled-bgcolor); 40 | --gnome-inactive-headerbar-button-disabled-border: var(--gnome-inactive-headerbar-button-border); 41 | --gnome-inactive-headerbar-button-disabled-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(238, 238, 236, 0); 42 | 43 | /* URL bar */ 44 | --gnome-urlbar-bgimage: linear-gradient(rgb(28, 31, 31), rgb(35, 37, 37) 3px, rgb(41, 41, 41) 90%); 45 | --gnome-urlbar-border: 1px solid #1e2222; 46 | --gnome-urlbar-box-shadow: 0 0 0 1px rgba(33, 93, 156, 0) inset, 0 1px rgba(238, 238, 236, .1); 47 | --gnome-urlbar-color: #fff; 48 | --gnome-urlbar-height: 32px; 49 | --gnome-inactive-urlbar-bgimage: linear-gradient(rgb(44, 44, 44), rgb(44, 44, 44)); 50 | --gnome-inactive-urlbar-border: 1px solid rgb(30, 34, 34); 51 | --gnome-inactive-urlbar-box-shadow: 0 1px rgba(238, 238, 236, 0); 52 | --gnome-inactive-urlbar-color: rgb(212, 212, 212); 53 | --gnome-focused-urlbar-border-color: #0f2a46; 54 | --gnome-focused-urlbar-outline: 1px solid #21578f; 55 | /* for private-urlbar.css only */ 56 | --gnome-private-urlbar-bgimage: linear-gradient(#25003e, #25003e); 57 | 58 | /* Tab bar */ 59 | --gnome-tabbar-bgcolor: #2f3434; 60 | --gnome-tabbar-border-bottom: 1px solid #1e2222; 61 | --gnome-tabbar-tab-color: rgb(147, 150, 149); 62 | --gnome-tabbar-tab-hover-bgcolor: var(--gnome-tabbar-bgcolor); 63 | --gnome-tabbar-tab-hover-border-bottom: 3px solid #1c1f1f; 64 | --gnome-tabbar-tab-hover-border-sides: 1px solid #2a2f2f; 65 | --gnome-tabbar-tab-hover-color: rgb(192, 194, 192); 66 | --gnome-tabbar-tab-active-bgcolor: #343939; 67 | --gnome-tabbar-tab-active-border-bottom: 3px solid #215d9c; 68 | --gnome-tabbar-tab-active-border-color-sides: #282b2b; 69 | --gnome-tabbar-tab-active-color: rgb(238, 238, 236); 70 | --gnome-tabbar-tab-active-hover-bgcolor: #363c3c; 71 | --gnome-inactive-tabbar-bgcolor: var(--gnome-tabbar-bgcolor); 72 | --gnome-inactive-tabbar-border-bottom: var(--gnome-tabbar-border-bottom); 73 | --gnome-inactive-tabbar-tab-color: rgb(120, 126, 126); 74 | --gnome-inactive-tabbar-tab-active-bgcolor: #393f3f; 75 | --gnome-inactive-tabbar-tab-active-border-bottom: var(--gnome-tabbar-tab-active-border-bottom); 76 | --gnome-inactive-tabbar-tab-active-border-color-sides: #1e2222; 77 | --gnome-inactive-tabbar-tab-active-color: rgb(147, 150, 149); 78 | --gnome-tabbar-tab-icon-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%); 79 | 80 | /* Bookmark bar */ 81 | --gnome-bookmarkbar-border-bottom: 1px solid #1e2222; 82 | --gnome-bookmarkbar-height: 38px; 83 | --gnome-inactive-bookmarkbar-border-bottom: var(--gnome-bookmarkbar-border-bottom); 84 | 85 | /* Burger menu */ 86 | /*--arrowpanel-padding: 10px;*/ 87 | /*--arrowpanel-background: -moz-field;*/ 88 | --arrowpanel-color: #d3d4d2 !important; /* applies to text and icons */ 89 | /*--arrowpanel-border-color: ThreeDShadow;*/ 90 | 91 | /* Dirty hack for replaced symbolic icons, they load from 92 | * /usr/share/icons// and on some systems they need to be 93 | * inverted, on others they don't, adjusts the filters below to your 94 | * needs (you may also adjust icon brightness here). */ 95 | --gnome-icons-hack-filter: invert(85%); /* without invert: none */ 96 | --gnome-icons-hack-close-button-border: 1px solid #e3e0e0; /* without invert: 1px solid #1c1f1f */ 97 | --gnome-icons-hack-close-button-border-bottom: var(--gnome-icons-hack-close-button-border); 98 | --gnome-icons-hack-close-button-filter: invert(100%); /* without invert: none */ 99 | --gnome-icons-hack-close-button-hover-bgimage: none; /* without invert: none */ 100 | --gnome-icons-hack-close-button-hover-box-shadow: none; /* without invert: none */ 101 | --gnome-icons-hack-close-button-active-bgimage: linear-gradient(rgb(220, 216, 216), rgb(214, 210, 210) 40%, rgb(210, 205, 205)); 102 | /* ^ without invert: linear-gradient(rgb(35, 39, 39), rgb(41, 45, 45) 40%, rgb(45, 50, 50)) */ 103 | --gnome-icons-hack-close-button-active-box-shadow: 0 1px rgba(255, 255, 255, .07) inset, 0 2px 1px -2px rgba(255, 255, 255, .6) inset, 0 1px rgba(17, 17, 19, .1); 104 | /* ^ without invert: 0 1px rgba(0, 0, 0, .07) inset, 0 2px 1px -2px rgba(0, 0, 0, .6) inset, 0 1px rgba(238, 238, 236, .1) */ 105 | } 106 | -------------------------------------------------------------------------------- /ui/gnome-3.18-light.css: -------------------------------------------------------------------------------- 1 | @import "theme.css"; 2 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 3 | 4 | /* Colors */ 5 | :root { 6 | /* Variables that start with --gnome- are added by me and are assigned 7 | * to elements somewhere in this code. The rest of the variables are 8 | * built-in in Firefox, so you need to add an !important if you wanna 9 | * override them. */ 10 | 11 | /* Browser area before a page starts loading */ 12 | --gnome-browser-before-load-bgcolor: #d6d6d6; 13 | 14 | /* Extra toolbars like the bookmark bar */ 15 | --toolbar-bgcolor: var(--gnome-tabbar-bgcolor) !important; 16 | --toolbar-bgimage: none !important; 17 | 18 | /* Header bar */ 19 | --gnome-headerbar-bgimage: linear-gradient(rgb(247, 247, 247), rgb(237, 237, 237)); 20 | --gnome-headerbar-border-bottom: 1px solid rgb(161, 161, 161); 21 | --gnome-headerbar-box-shadow: 0 -1px rgb(217, 217, 217) inset, 0 1px #fff inset; 22 | --gnome-headerbar-button-bgimage: linear-gradient(rgb(250, 250, 250), rgb(237, 237, 237) 40%, rgb(224, 224, 224)); 23 | --gnome-headerbar-button-border: 1px solid rgba(161, 161, 161); 24 | --gnome-headerbar-button-border-bottom: var(--gnome-headerbar-button-border); 25 | --gnome-headerbar-button-box-shadow: 0 1px #fff inset, 0 1px #fff; 26 | --gnome-headerbar-button-hover-bgimage: linear-gradient(#fff, rgb(247, 247, 247) 40%, rgb(237, 237, 237)); 27 | --gnome-headerbar-button-active-bgimage: linear-gradient(rgb(214, 214, 214), rgb(220, 220, 220) 40%, rgb(224, 224, 224)); 28 | --gnome-headerbar-button-active-box-shadow: 0 1px rgba(0, 0, 0, .07) inset, 0 2px 0px -2px rgba(0, 0, 0, .6) inset, 0 1px #fff; 29 | --gnome-headerbar-button-disabled-bgcolor: rgb(244, 244, 244); 30 | --gnome-headerbar-button-disabled-border: var(--gnome-headerbar-button-border); 31 | --gnome-headerbar-button-disabled-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(255, 255, 255, 0); 32 | --gnome-inactive-headerbar-bgimage: linear-gradient(rgba(237, 237, 237), rgba(237, 237, 237)); 33 | --gnome-inactive-headerbar-border-bottom: 1px solid rgb(168, 168, 168); 34 | --gnome-inactive-headerbar-box-shadow: 0 1px #fff inset; 35 | --gnome-inactive-headerbar-button-bgimage: linear-gradient(rgb(237, 237, 237), rgb(237, 237, 237)); 36 | --gnome-inactive-headerbar-button-border: 1px solid rgb(168, 168, 168); 37 | --gnome-inactive-headerbar-button-border-bottom: var(--gnome-inactive-headerbar-button-border); 38 | --gnome-inactive-headerbar-button-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(255, 255, 255, 0); 39 | --gnome-inactive-headerbar-button-disabled-bgcolor: var(--gnome-headerbar-button-disabled-bgcolor); 40 | --gnome-inactive-headerbar-button-disabled-border: var(--gnome-inactive-headerbar-button-border); 41 | --gnome-inactive-headerbar-button-disabled-box-shadow: var(--gnome-headerbar-button-disabled-box-shadow); 42 | 43 | /* URL bar */ 44 | --gnome-urlbar-bgimage: linear-gradient(rgb(222, 222, 222), rgb(248, 248, 248) 3px, rgb(255, 255, 255) 90%); 45 | --gnome-urlbar-border: 1px solid rgb(161, 161, 161); 46 | --gnome-urlbar-box-shadow: 0 0 0 1px rgba(74, 144, 217, 0) inset, 0 1px #fff; 47 | --gnome-urlbar-color: #000; 48 | --gnome-urlbar-height: 32px; 49 | --gnome-inactive-urlbar-bgimage: linear-gradient(#fff, #fff); 50 | --gnome-inactive-urlbar-border: 1px solid rgb(168, 168, 168); 51 | --gnome-inactive-urlbar-box-shadow: 0 1px rgba(255, 255, 255, 0); 52 | --gnome-inactive-urlbar-color: rgb(50, 50, 50); 53 | --gnome-focused-urlbar-border-color: #0f2a46; 54 | --gnome-focused-urlbar-outline: 1px solid #21578f; 55 | /* for private-urlbar.css only */ 56 | --gnome-private-urlbar-bgimage: linear-gradient(#e6c2ff, #e6c2ff); 57 | 58 | /* Tab bar */ 59 | --gnome-tabbar-bgcolor: #d6d6d6; 60 | --gnome-tabbar-border-bottom: 1px solid #a1a1a1; 61 | --gnome-tabbar-tab-color: rgb(141, 144, 145); 62 | --gnome-tabbar-tab-hover-bgcolor: var(--gnome-tabbar-bgcolor); 63 | --gnome-tabbar-tab-hover-border-bottom: 3px solid #a1a1a1; 64 | --gnome-tabbar-tab-hover-border-sides: 1px solid #c9c9c9; 65 | --gnome-tabbar-tab-hover-color: rgb(93, 98, 99); 66 | --gnome-tabbar-tab-active-bgcolor: #e1e1e1; 67 | --gnome-tabbar-tab-active-border-bottom: 4px solid #4a90d9; 68 | --gnome-tabbar-tab-active-border-color-sides: #c0c0c0; 69 | --gnome-tabbar-tab-active-color: rgb(46, 52, 54); 70 | --gnome-tabbar-tab-active-hover-bgcolor: #e6e6e6; 71 | --gnome-inactive-tabbar-bgcolor: #d4d4d4; 72 | --gnome-inactive-tabbar-border-bottom: 1px solid #a8a8a8; 73 | --gnome-inactive-tabbar-tab-color: rgb(170, 171, 172); 74 | --gnome-inactive-tabbar-tab-active-bgcolor: #ededed; 75 | --gnome-inactive-tabbar-tab-active-border-bottom: var(--gnome-tabbar-tab-active-border-bottom); 76 | --gnome-inactive-tabbar-tab-active-border-color-sides: #a8a8a8; 77 | --gnome-inactive-tabbar-tab-active-color: rgb(141, 144, 145); 78 | --gnome-tabbar-tab-icon-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%) invert(100%); 79 | 80 | /* Bookmark bar */ 81 | --gnome-bookmarkbar-border-bottom: 1px solid #a1a1a1; 82 | --gnome-bookmarkbar-height: 38px; 83 | --gnome-inactive-bookmarkbar-border-bottom: var(--gnome-bookmarkbar-border-bottom); 84 | 85 | /* Burger menu */ 86 | /*--arrowpanel-padding: 10px;*/ 87 | /*--arrowpanel-background: -moz-field;*/ 88 | --arrowpanel-color: rgb(46, 52, 54) !important; /* applies to text and icons */ 89 | /*--arrowpanel-border-color: ThreeDShadow;*/ 90 | 91 | /* Dirty hack for replaced symbolic icons, they load from 92 | * /usr/share/icons// and on some systems they need to be 93 | * inverted, on others they don't, adjusts the filters below to your 94 | * needs (you may also adjust icon brightness here). */ 95 | --gnome-icons-hack-filter: invert(30%); /* with invert: invert(85%) */ 96 | --gnome-icons-hack-close-button-border: 1px solid #a1a1a1; /* with invert: 1px solid #5e5e5e */ 97 | --gnome-icons-hack-close-button-border-bottom: var(--gnome-icons-hack-close-button-border); 98 | --gnome-icons-hack-close-button-filter: none; /* with invert: invert(100%) */ 99 | --gnome-icons-hack-close-button-hover-bgimage: none; /* without invert: none */ 100 | --gnome-icons-hack-close-button-hover-box-shadow: none; /* without invert: none */ 101 | --gnome-icons-hack-close-button-active-bgimage: linear-gradient(rgb(214, 214, 214), rgb(220, 220, 220) 40%, rgb(224, 224, 224)); 102 | /* ^ with invert: linear-gradient(rgb(41, 41, 41), rgb(35, 35, 35) 40%, rgb(31, 31, 31)) */ 103 | --gnome-icons-hack-close-button-active-box-shadow: 0 1px rgba(0, 0, 0, .07) inset, 0 2px 1px -2px rgba(0, 0, 0, .6) inset; 104 | /* ^ with invert: 0 1px rgba(255, 255, 255, .07) inset, 0 2px 1px -2px rgba(255, 255, 255, .6) inset */ 105 | } 106 | -------------------------------------------------------------------------------- /ui/gnome-3.26-dark.css: -------------------------------------------------------------------------------- 1 | @import "theme.css"; 2 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 3 | 4 | /* Colors */ 5 | :root { 6 | /* Variables that start with --gnome- are added by me and are assigned 7 | * to elements somewhere in this code. The rest of the variables are 8 | * built-in in Firefox, so you need to add an !important if you wanna 9 | * override them. */ 10 | 11 | /* Browser area before a page starts loading */ 12 | --gnome-browser-before-load-bgcolor: #2e3436; 13 | 14 | /* Extra toolbars like the bookmark bar */ 15 | --toolbar-bgcolor: var(--gnome-tabbar-bgcolor) !important; 16 | --toolbar-bgimage: none !important; 17 | 18 | /* Window */ 19 | --gnome-window-border-color: #1b1f20; 20 | 21 | /* Popups */ 22 | --gnome-menu-bgcolor: #262b2d; 23 | --gnome-popup-bgcolor: #33393b; 24 | --gnome-popup-border: 1px solid; 25 | --gnome-popup-border-color: #1b1f20; 26 | --gnome-popup-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); 27 | --gnome-popup-button-hover-bgcolor: #3f4649; 28 | --gnome-popup-separator-color: rgba(0, 0, 0, 0.1); 29 | 30 | /* Header bar */ 31 | --gnome-headerbar-bgimage: linear-gradient(to top, #262a2c, #2c3133 3px, #2c3133); 32 | --gnome-headerbar-border-bottom: 1px solid #0b0c0c; 33 | --gnome-headerbar-box-shadow: 0 1px #393e40 inset; 34 | --gnome-headerbar-button-bgimage: linear-gradient(#2e3436, #2b2f31 60%, #262a2b); 35 | --gnome-headerbar-button-border: 1px solid #1b1f20; 36 | --gnome-headerbar-button-border-bottom: 1px solid #0c0d0d; 37 | --gnome-headerbar-button-box-shadow: 0 1px #383e3f inset; 38 | --gnome-headerbar-button-hover-bgimage: linear-gradient(#343b3d, #2f3537 50%, #2a2e30); 39 | --gnome-headerbar-button-active-bgimage: linear-gradient(rgb(35, 39, 39), rgb(41, 45, 45) 40%, rgb(45, 50, 50)); 40 | --gnome-headerbar-button-active-box-shadow: 0 1px rgba(0, 0, 0, .07) inset, 0 2px 1px -2px rgba(0, 0, 0, .6) inset, 0 1px rgba(238, 238, 236, .1); 41 | --gnome-headerbar-button-disabled-bgcolor: #2d3234; 42 | --gnome-headerbar-button-disabled-border: var(--gnome-headerbar-button-border); 43 | --gnome-headerbar-button-disabled-box-shadow: none; 44 | 45 | --gnome-headerbar-button-suggested-action-bgimage: linear-gradient(to bottom, #1f5894, #1d538b 60%, #1b4e83); 46 | --gnome-headerbar-button-suggested-action-border-color: #0f2b48; 47 | --gnome-headerbar-button-suggested-action-border-bottom-color: #06121e; 48 | --gnome-headerbar-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); 49 | --gnome-headerbar-button-suggested-action-hover-bgimage: linear-gradient(to bottom, #2260a0, #1f5894 60%, #1d538b); 50 | 51 | --gnome-headerbar-button-destructive-action-bgimage: linear-gradient(to bottom, #cc0f0f, #c20f0f 60%, #b90e0e); 52 | --gnome-headerbar-button-destructive-action-border-color: #760909; 53 | --gnome-headerbar-button-destructive-action-border-bottom-color: #470505; 54 | --gnome-headerbar-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2); 55 | --gnome-headerbar-button-destructive-action-hover-bgimage: linear-gradient(to bottom, #da1010, #cc0f0f 60%, #c20f0f); 56 | 57 | --gnome-inactive-headerbar-bgimage: linear-gradient(#33393b, #33393b); 58 | --gnome-inactive-headerbar-border-bottom: 1px solid #202425; 59 | --gnome-inactive-headerbar-box-shadow: 0 1px rgba(238, 238, 236, .1) inset; 60 | --gnome-inactive-headerbar-button-bgimage: linear-gradient(#33393b, #33393b); 61 | --gnome-inactive-headerbar-button-border: 1px solid #202425; 62 | --gnome-inactive-headerbar-button-border-bottom: var(--gnome-inactive-headerbar-button-border); 63 | --gnome-inactive-headerbar-button-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(238, 238, 236, 0); 64 | --gnome-inactive-headerbar-button-disabled-bgcolor: var(--gnome-headerbar-button-disabled-bgcolor); 65 | --gnome-inactive-headerbar-button-disabled-border: var(--gnome-inactive-headerbar-button-border); 66 | --gnome-inactive-headerbar-button-disabled-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(238, 238, 236, 0); 67 | 68 | /* URL bar */ 69 | --gnome-urlbar-bgimage: linear-gradient(#232729, #232729); 70 | --gnome-urlbar-border: 1px solid #1e2222; 71 | --gnome-urlbar-box-shadow: none; 72 | --gnome-urlbar-color: #fdfdfd; 73 | --gnome-urlbar-height: 34px; 74 | --gnome-inactive-urlbar-bgimage: linear-gradient(#252a2c, #252a2c); 75 | --gnome-inactive-urlbar-border: 1px solid #202425; 76 | --gnome-inactive-urlbar-box-shadow: none; 77 | --gnome-inactive-urlbar-color: #d3d4d5; 78 | --gnome-focused-urlbar-border-color: #0f2a46; 79 | --gnome-focused-urlbar-outline: 1px solid #21578f; 80 | /* for private-urlbar.css only */ 81 | --gnome-private-urlbar-bgimage: linear-gradient(#25003e, #25003e); 82 | 83 | /* Tab bar */ 84 | --gnome-tabbar-bgcolor: #272c2d; 85 | --gnome-tabbar-border-bottom: 1px solid #1b1f20; 86 | --gnome-tabbar-tab-color: #919494; 87 | --gnome-tabbar-tab-hover-bgcolor: #292e2f; 88 | --gnome-tabbar-tab-hover-border-bottom: var(--gnome-tabbar-border-bottom); 89 | --gnome-tabbar-tab-hover-border-sides: 1px solid #25292a; 90 | --gnome-tabbar-tab-hover-color: #c0c1c0; 91 | --gnome-tabbar-tab-active-bgcolor: #2c3233; 92 | --gnome-tabbar-tab-active-border-bottom: 3px solid #215d9c; 93 | --gnome-tabbar-tab-active-border-color-sides: #232829; 94 | --gnome-tabbar-tab-active-color: #eeeeec; 95 | --gnome-tabbar-tab-active-hover-bgcolor: #2f3536; 96 | --gnome-inactive-tabbar-bgcolor: #2c3233; 97 | --gnome-inactive-tabbar-border-bottom: var(--gnome-tabbar-border-bottom); 98 | --gnome-inactive-tabbar-tab-color: var(--gnome-tabbar-tab-color); 99 | --gnome-inactive-tabbar-tab-active-bgcolor: #33393b; 100 | --gnome-inactive-tabbar-tab-active-border-bottom: var(--gnome-tabbar-tab-active-border-bottom); 101 | --gnome-inactive-tabbar-tab-active-border-color-sides: #202425; 102 | --gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color); 103 | --gnome-tabbar-tab-icon-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%); 104 | 105 | /* Bookmark bar */ 106 | --gnome-bookmarkbar-border-bottom: 1px solid #1b1f20; 107 | --gnome-bookmarkbar-height: 38px; 108 | --gnome-inactive-bookmarkbar-border-bottom: var(--gnome-bookmarkbar-border-bottom); 109 | 110 | /* Burger menu */ 111 | /*--arrowpanel-padding: 10px;*/ 112 | /*--arrowpanel-background: -moz-field;*/ 113 | --arrowpanel-color: #d3d4d2 !important; /* applies to text and icons */ 114 | --arrowpanel-border-color: #1b1f20 !important; 115 | 116 | /* Dirty hack for replaced symbolic icons, they load from 117 | * /usr/share/icons// and on some systems they need to be 118 | * inverted, on others they don't, adjusts the filters below to your 119 | * needs (you may also adjust icon brightness here). */ 120 | --gnome-icons-hack-filter: invert(85%); /* without invert: none */ 121 | --gnome-icons-hack-close-button-border: 1px solid #e3e0e0; 122 | --gnome-icons-hack-close-button-border-bottom: 1px solid #F3F2F2; 123 | --gnome-icons-hack-close-button-filter: invert(100%); /* without invert: none */ 124 | --gnome-icons-hack-close-button-hover-bgimage: linear-gradient(#CBC4C2, #D0CAC8 50%, #D5D1CF); /* without invert: none */ 125 | --gnome-icons-hack-close-button-hover-box-shadow: 0 1px #C7C1C0 inset; /* without invert: none */ 126 | --gnome-icons-hack-close-button-active-bgimage: linear-gradient(rgb(220, 216, 216), rgb(214, 210, 210) 40%, rgb(210, 205, 205)); 127 | /* ^ without invert: linear-gradient(rgb(35, 39, 39), rgb(41, 45, 45) 40%, rgb(45, 50, 50)) */ 128 | --gnome-icons-hack-close-button-active-box-shadow: 0 1px rgba(255, 255, 255, .07) inset, 0 2px 1px -2px rgba(255, 255, 255, .6) inset, 0 1px rgba(17, 17, 19, .1); 129 | /* ^ without invert: 0 1px rgba(0, 0, 0, .07) inset, 0 2px 1px -2px rgba(0, 0, 0, .6) inset, 0 1px rgba(238, 238, 236, .1) */ 130 | } 131 | 132 | -------------------------------------------------------------------------------- /ui/gnome-3.26-light.css: -------------------------------------------------------------------------------- 1 | @import "theme.css"; 2 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 3 | 4 | /* Colors */ 5 | :root { 6 | /* Variables that start with --gnome- are added by me and are assigned 7 | * to elements somewhere in this code. The rest of the variables are 8 | * built-in in Firefox, so you need to add an !important if you wanna 9 | * override them. */ 10 | 11 | /* Browser area before a page starts loading */ 12 | --gnome-browser-before-load-bgcolor: #d6d6d6; 13 | 14 | /* Extra toolbars like the bookmark bar */ 15 | --toolbar-bgcolor: var(--gnome-tabbar-bgcolor) !important; 16 | --toolbar-bgimage: none !important; 17 | 18 | /* Window */ 19 | --gnome-window-border-color: #a1a1a1; 20 | 21 | /* Popups */ 22 | --gnome-menu-bgcolor: #ffffff; 23 | --gnome-popup-bgcolor: #e8e8e7; 24 | --gnome-popup-border: 1px solid; 25 | --gnome-popup-border-color: #b6b6b3; 26 | --gnome-popup-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); 27 | --gnome-popup-button-hover-bgcolor: #f4f4f4; 28 | --gnome-popup-separator-color: rgba(0, 0, 0, 0.1); 29 | 30 | /* Header bar */ 31 | --gnome-headerbar-bgimage: linear-gradient(to top, #dbdbd9, #f4f4f4 3px, #f4f4f4); 32 | --gnome-headerbar-border-bottom: 1px solid #91918c; 33 | --gnome-headerbar-box-shadow: 0 -1px rgb(217, 217, 217) inset, 0 1px #fff inset; 34 | --gnome-headerbar-button-bgimage: linear-gradient(#e7e7e6, #dfdfde 60%, #d0d0ce); 35 | --gnome-headerbar-button-border: 1px solid #b7b7b4; 36 | --gnome-headerbar-button-border-bottom: 1px solid #94948f; 37 | --gnome-headerbar-button-box-shadow: 0 1px #f9f9f9 inset; 38 | --gnome-headerbar-button-hover-bgimage: linear-gradient(#f6f6f6, #eaeae9 50%, #dededd); 39 | --gnome-headerbar-button-active-bgimage: linear-gradient(#d9d9d7, #d9d9d7); 40 | --gnome-headerbar-button-active-box-shadow: 0 1px rgba(0, 0, 0, .07) inset, 0 2px 0px -2px rgba(0, 0, 0, .6) inset, 0 1px #fff; 41 | --gnome-headerbar-button-disabled-bgcolor: #f1f1f1; 42 | --gnome-headerbar-button-disabled-border: 1px solid #b7b7b4; 43 | --gnome-headerbar-button-disabled-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(255, 255, 255, 0); 44 | 45 | --gnome-headerbar-button-suggested-action-bgimage: linear-gradient(to bottom, #4a90d9, #3986d5 60%, #2a76c6); 46 | --gnome-headerbar-button-suggested-action-border-color: #215d9c; 47 | --gnome-headerbar-button-suggested-action-border-bottom-color: #184472; 48 | --gnome-headerbar-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4); 49 | --gnome-headerbar-button-suggested-action-hover-bgimage: linear-gradient(to bottom, #63a0de, #4a90d9 60%, #3986d5); 50 | 51 | --gnome-headerbar-button-destructive-action-bgimage: linear-gradient(to bottom, #ef2929, #ee1616 60%, #d51010); 52 | --gnome-headerbar-button-destructive-action-border-color: #a60c0c; 53 | --gnome-headerbar-button-destructive-action-border-bottom-color: #760909; 54 | --gnome-headerbar-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4); 55 | --gnome-headerbar-button-destructive-action-hover-bgimage: linear-gradient(to bottom, #f14545, #ef2929 60%, #ee1616); 56 | 57 | --gnome-inactive-headerbar-bgimage: linear-gradient(#e8e8e7, #e8e8e7); 58 | --gnome-inactive-headerbar-border-bottom: 1px solid #c0c0bd; 59 | --gnome-inactive-headerbar-box-shadow: 0 1px #fff inset; 60 | --gnome-inactive-headerbar-button-bgimage: linear-gradient(#e8e8e7, #e8e8e7); 61 | --gnome-inactive-headerbar-button-border: 1px solid #c0c0bd; 62 | --gnome-inactive-headerbar-button-border-bottom: var(--gnome-inactive-headerbar-button-border); 63 | --gnome-inactive-headerbar-button-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(255, 255, 255, 0); 64 | --gnome-inactive-headerbar-button-disabled-bgcolor: var(--gnome-headerbar-button-disabled-bgcolor); 65 | --gnome-inactive-headerbar-button-disabled-border: var(--gnome-inactive-headerbar-button-border); 66 | --gnome-inactive-headerbar-button-disabled-box-shadow: var(--gnome-headerbar-button-disabled-box-shadow); 67 | 68 | /* URL bar */ 69 | --gnome-urlbar-bgimage: linear-gradient(#fff, #fff); 70 | --gnome-urlbar-border: 1px solid #b6b6b3; 71 | --gnome-urlbar-box-shadow: none; 72 | --gnome-urlbar-color: #020202; 73 | --gnome-urlbar-height: 34px; 74 | --gnome-inactive-urlbar-bgimage: linear-gradient(#fcfcfc, #fcfcfc); 75 | --gnome-inactive-urlbar-border: 1px solid #c0c0bd; 76 | --gnome-inactive-urlbar-box-shadow: none; 77 | --gnome-inactive-urlbar-color: #323232; 78 | --gnome-focused-urlbar-border-color: #4a90d9; 79 | --gnome-focused-urlbar-outline: none; 80 | /* for private-urlbar.css only */ 81 | --gnome-private-urlbar-bgimage: linear-gradient(#e6c2ff, #e6c2ff); 82 | 83 | /* Tab bar */ 84 | --gnome-tabbar-bgcolor: #cfcfcd; 85 | --gnome-tabbar-border-bottom: 1px solid #b6b6b3; 86 | --gnome-tabbar-tab-color: rgb(141, 144, 145); 87 | --gnome-tabbar-tab-hover-bgcolor: #d4d4d2; 88 | --gnome-tabbar-tab-hover-border-bottom: 3px solid #b6b6b3; 89 | --gnome-tabbar-tab-hover-border-sides: 1px solid #c9c9c9; 90 | --gnome-tabbar-tab-hover-color: rgb(93, 98, 99); 91 | --gnome-tabbar-tab-active-bgcolor: #dbdbd9; 92 | --gnome-tabbar-tab-active-border-bottom: 3px solid #4a90d9; 93 | --gnome-tabbar-tab-active-border-color-sides: #c8c8c5; 94 | --gnome-tabbar-tab-active-color: rgb(46, 52, 54); 95 | --gnome-tabbar-tab-active-hover-bgcolor: #e6e6e6; 96 | --gnome-inactive-tabbar-bgcolor: #dadad8; 97 | --gnome-inactive-tabbar-border-bottom: 1px solid #c0c0bd; 98 | --gnome-inactive-tabbar-tab-color: #8b8e8f; 99 | --gnome-inactive-tabbar-tab-active-bgcolor: #e8e8e7; 100 | --gnome-inactive-tabbar-tab-active-border-bottom: var(--gnome-tabbar-tab-active-border-bottom); 101 | --gnome-inactive-tabbar-tab-active-border-color-sides: #c0c0bd; 102 | --gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color); 103 | --gnome-tabbar-tab-icon-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%) invert(100%); 104 | 105 | /* Bookmark bar */ 106 | --gnome-bookmarkbar-border-bottom: 1px solid #a1a1a1; 107 | --gnome-bookmarkbar-height: 38px; 108 | --gnome-inactive-bookmarkbar-border-bottom: var(--gnome-bookmarkbar-border-bottom); 109 | 110 | /* Burger menu */ 111 | /*--arrowpanel-padding: 10px;*/ 112 | /*--arrowpanel-background: -moz-field;*/ 113 | --arrowpanel-color: rgb(46, 52, 54) !important; /* applies to text and icons */ 114 | /*--arrowpanel-border-color: ThreeDShadow;*/ 115 | 116 | /* Dirty hack for replaced symbolic icons, they load from 117 | * /usr/share/icons// and on some systems they need to be 118 | * inverted, on others they don't, adjusts the filters below to your 119 | * needs (you may also adjust icon brightness here). */ 120 | --gnome-icons-hack-filter: invert(30%); /* without invert: none */ 121 | --gnome-icons-hack-close-button-border: 1px solid #b7b7b4; 122 | --gnome-icons-hack-close-button-border-bottom: 1px solid #94948f; 123 | --gnome-icons-hack-close-button-filter: none; /* without invert: none */ 124 | --gnome-icons-hack-close-button-hover-bgimage: linear-gradient(#f6f6f6, #eaeae9 50%, #dededd); /* without invert: none */ 125 | --gnome-icons-hack-close-button-hover-box-shadow: 0 1px #f9f9f9 inset; /* without invert: none */ 126 | --gnome-icons-hack-close-button-active-bgimage: linear-gradient(rgb(220, 216, 216), rgb(214, 210, 210) 40%, rgb(210, 205, 205)); 127 | /* ^ without invert: linear-gradient(rgb(35, 39, 39), rgb(41, 45, 45) 40%, rgb(45, 50, 50)) */ 128 | --gnome-icons-hack-close-button-active-box-shadow: 0 1px rgba(255, 255, 255, .07) inset, 0 2px 1px -2px rgba(255, 255, 255, .6) inset, 0 1px rgba(17, 17, 19, .1); 129 | /* ^ without invert: 0 1px rgba(0, 0, 0, .07) inset, 0 2px 1px -2px rgba(0, 0, 0, .6) inset, 0 1px rgba(238, 238, 236, .1) */ 130 | } 131 | 132 | -------------------------------------------------------------------------------- /ui/gnome-icons.css: -------------------------------------------------------------------------------- 1 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 2 | 3 | /* Menu button */ 4 | #PanelUI-menu-button .toolbarbutton-icon { 5 | filter: var(--gnome-icons-hack-filter); 6 | list-style-image: url("moz-icon://stock/open-menu-symbolic?size=dialog") !important; 7 | } 8 | 9 | /* New tab button */ 10 | #new-tab-button .toolbarbutton-icon { 11 | filter: var(--gnome-icons-hack-filter); 12 | list-style-image: url("moz-icon://stock/tab-new-symbolic?size=dialog") !important; 13 | } 14 | 15 | /* Home button */ 16 | #home-button .toolbarbutton-icon { 17 | filter: var(--gnome-icons-hack-filter); 18 | list-style-image: url("moz-icon://stock/user-home-symbolic?size=dialog") !important; 19 | } 20 | 21 | /* Preferences button */ 22 | #preferences-button .toolbarbutton-icon { 23 | filter: var(--gnome-icons-hack-filter); 24 | list-style-image: url("moz-icon://stock/preferences-system-symbolic?size=dialog") !important; 25 | } 26 | 27 | /* Fullscreen button */ 28 | #fullscreen-button .toolbarbutton-icon { 29 | filter: var(--gnome-icons-hack-filter); 30 | list-style-image: url("moz-icon://stock/view-fullscreen-symbolic?size=dialog") !important; 31 | } 32 | 33 | /* Developer button */ 34 | #developer-button .toolbarbutton-icon { 35 | filter: var(--gnome-icons-hack-filter); 36 | list-style-image: url("moz-icon://stock/applications-engineering-symbolic?size=dialog") !important; 37 | } 38 | 39 | /* Email link button */ 40 | #email-link-button .toolbarbutton-icon { 41 | filter: var(--gnome-icons-hack-filter); 42 | list-style-image: url("moz-icon://stock/mail-unread-symbolic?size=dialog") !important; 43 | } 44 | 45 | /* Print button */ 46 | #print-button .toolbarbutton-icon { 47 | filter: var(--gnome-icons-hack-filter); 48 | list-style-image: url("moz-icon://stock/printer-symbolic?size=dialog") !important; 49 | } 50 | 51 | /* Addons button */ 52 | #add-ons-button .toolbarbutton-icon { 53 | filter: var(--gnome-icons-hack-filter); 54 | list-style-image: url("moz-icon://stock/application-x-addon-symbolic?size=dialog") !important; 55 | } 56 | 57 | /* Find button */ 58 | #find-button .toolbarbutton-icon { 59 | filter: var(--gnome-icons-hack-filter); 60 | list-style-image: url("moz-icon://stock/edit-find-symbolic?size=dialog") !important; 61 | } 62 | 63 | /* History button */ 64 | #history-panelmenu .toolbarbutton-icon { 65 | filter: var(--gnome-icons-hack-filter); 66 | list-style-image: url("moz-icon://stock/preferences-system-time-symbolic?size=dialog") !important; 67 | } 68 | 69 | /* Cut button */ 70 | #cut-button .toolbarbutton-icon { 71 | filter: var(--gnome-icons-hack-filter); 72 | list-style-image: url("moz-icon://stock/edit-cut-symbolic?size=dialog") !important; 73 | } 74 | /* Copy button */ 75 | #copy-button .toolbarbutton-icon { 76 | filter: var(--gnome-icons-hack-filter); 77 | list-style-image: url("moz-icon://stock/edit-copy-symbolic?size=dialog") !important; 78 | } 79 | /* Paste button */ 80 | #paste-button .toolbarbutton-icon { 81 | filter: var(--gnome-icons-hack-filter); 82 | list-style-image: url("moz-icon://stock/edit-paste-symbolic?size=dialog") !important; 83 | } 84 | 85 | /* Navbar overflow button */ 86 | #nav-bar-overflow-button .toolbarbutton-icon { 87 | filter: var(--gnome-icons-hack-filter); 88 | list-style-image: url("moz-icon://stock/view-more-symbolic?size=dialog") !important; 89 | } 90 | -------------------------------------------------------------------------------- /ui/hide-single-tab.css: -------------------------------------------------------------------------------- 1 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 2 | 3 | :root:not([inFullscreen]) #tabbrowser-tabs tab:only-of-type, /* Temporal fix */ 4 | #TabsToolbar .private-browsing-indicator { 5 | display: none !important; 6 | } 7 | -------------------------------------------------------------------------------- /ui/matching-autocomplete-width.css: -------------------------------------------------------------------------------- 1 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 2 | 3 | #PopupAutoCompleteRichResult { 4 | border-radius: 6px; 5 | margin-left: 0 !important; 6 | margin-top: -1px; 7 | } 8 | #PopupAutoCompleteRichResult .autocomplete-richlistbox { 9 | --box-width: calc(100vw - var(--item-padding-start) - var(--item-padding-end) - 26px); 10 | /* bookmark icon, site icon, separator */ 11 | --fixed-widths: calc((6px + 16px + 6px) + (16px + 9px) + 11px); 12 | max-width: var(--box-width); 13 | } 14 | #PopupAutoCompleteRichResult .autocomplete-richlistitem { 15 | padding-left: 0 !important; 16 | padding-right: 5px !important; 17 | border-inline-end-width: 0 !important; 18 | max-width: calc(var(--box-width) - 5px); 19 | display: flex; 20 | align-items: center; 21 | } 22 | #PopupAutoCompleteRichResult .ac-type-icon, 23 | #PopupAutoCompleteRichResult .ac-site-icon, 24 | #PopupAutoCompleteRichResult .ac-separator { 25 | flex: 0 0 auto; 26 | } 27 | #PopupAutoCompleteRichResult .ac-title, 28 | #PopupAutoCompleteRichResult .ac-tags, 29 | #PopupAutoCompleteRichResult .ac-url, 30 | #PopupAutoCompleteRichResult .ac-action { 31 | flex: 1 0 0; 32 | min-width: 0; 33 | max-width: -moz-fit-content; 34 | } 35 | /* Relative widths with tags */ 36 | #PopupAutoCompleteRichResult .ac-title { 37 | flex-grow: 2; 38 | } 39 | #PopupAutoCompleteRichResult .ac-tags { 40 | flex-grow: 4; 41 | } 42 | #PopupAutoCompleteRichResult .ac-url, 43 | #PopupAutoCompleteRichResult .ac-action { 44 | flex-grow: 3; 45 | } 46 | /* */ 47 | /* Relative widths without tags */ 48 | #PopupAutoCompleteRichResult .ac-tags[empty] { 49 | flex-grow: 0; 50 | } 51 | #PopupAutoCompleteRichResult .ac-tags[empty] ~ .ac-url, 52 | #PopupAutoCompleteRichResult .ac-tags[empty] ~ .ac-action { 53 | flex-grow: 1; 54 | } 55 | /* */ 56 | #PopupAutoCompleteRichResult .ac-text-overflow-container { 57 | max-width: 100%; 58 | } 59 | #PopupAutoCompleteRichResult .ac-title-text, 60 | #PopupAutoCompleteRichResult .ac-tags-text, 61 | #PopupAutoCompleteRichResult .ac-url-text, 62 | #PopupAutoCompleteRichResult .ac-action-text { 63 | max-width: 100% !important; 64 | text-overflow: ellipsis; 65 | } 66 | -------------------------------------------------------------------------------- /ui/parts/csd-fullscreen.css: -------------------------------------------------------------------------------- 1 | /* GNOME CSD styles for headerbar on Firefox [tabsintitlebar]+[inFullscreen] */ 2 | 3 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 4 | 5 | :root[tabsintitlebar][inFullscreen] #nav-bar { 6 | margin-right: 123px !important; 7 | } 8 | 9 | /* Move window buttons next to the header bar */ 10 | :root[tabsintitlebar][inFullscreen] #window-controls { 11 | -moz-appearance: none !important; 12 | background-image: var(--gnome-headerbar-bgimage) !important; 13 | border-bottom: var(--gnome-headerbar-border-bottom) !important; 14 | box-shadow: var(--gnome-headerbar-box-shadow); 15 | height: unset !important; 16 | padding-right: 3px; 17 | position: absolute !important; 18 | right: 0; 19 | top: 0; 20 | } 21 | :root[tabsintitlebar][inFullscreen] #window-controls:-moz-window-inactive { 22 | background-image: var(--gnome-inactive-headerbar-bgimage) !important; 23 | border-bottom: var(--gnome-inactive-headerbar-border-bottom) !important; 24 | box-shadow: var(--gnome-inactive-headerbar-box-shadow) !important; 25 | } 26 | 27 | /* Window buttons */ 28 | :root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton { 29 | -moz-appearance: none !important; 30 | border: var(--gnome-headerbar-button-border) !important; 31 | border-color: transparent !important; 32 | border-radius: 3px !important; 33 | height: 34px; 34 | margin: 6px 3px !important; 35 | padding: 0 2px !important; 36 | width: 34px; 37 | } 38 | :root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton .toolbarbutton-icon { 39 | filter: invert(85%); 40 | width: 16px; 41 | } 42 | :root[tabsintitlebar][inFullscreen] #window-controls:-moz-window-inactive toolbarbutton .toolbarbutton-icon { 43 | opacity: .7 !important; 44 | } 45 | :root[tabsintitlebar][inFullscreen] #window-controls:not(:-moz-window-inactive) toolbarbutton:not([disabled]):hover { 46 | background-image: var(--gnome-headerbar-button-hover-bgimage); 47 | border: var(--gnome-headerbar-button-border) !important; 48 | } 49 | :root[tabsintitlebar][inFullscreen] #window-controls:not(:-moz-window-inactive) toolbarbutton:not([disabled]):active { 50 | background-image: var(--gnome-headerbar-button-active-bgimage); 51 | box-shadow: var(--gnome-headerbar-button-active-box-shadow); 52 | border: var(--gnome-headerbar-button-border) !important; 53 | } 54 | :root[tabsintitlebar][inFullscreen] #window-controls:not(:-moz-window-inactive) toolbarbutton[disabled] { 55 | background-color: var(--gnome-headerbar-button-disabled-bgcolor); 56 | box-shadow: var(--gnome-headerbar-button-disabled-box-shadow); 57 | border: var(--gnome-headerbar-button-border) !important; 58 | } 59 | 60 | :root[tabsintitlebar][inFullscreen] #window-controls #close-button .toolbarbutton-icon { 61 | filter: var(--gnome-icons-hack-filter); 62 | list-style-image: url("moz-icon://stock/window-close-symbolic?size=dialog") !important; 63 | } 64 | :root[tabsintitlebar][inFullscreen] #window-controls #restore-button .toolbarbutton-icon { 65 | filter: var(--gnome-icons-hack-filter); 66 | list-style-image: url("moz-icon://stock/view-restore-symbolic?size=dialog") !important; 67 | } 68 | :root[tabsintitlebar][inFullscreen] #window-controls #minimize-button .toolbarbutton-icon { 69 | filter: var(--gnome-icons-hack-filter); 70 | list-style-image: url("moz-icon://stock/window-minimize-symbolic?size=dialog") !important; 71 | } -------------------------------------------------------------------------------- /ui/parts/csd-left-controls.css: -------------------------------------------------------------------------------- 1 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 2 | 3 | @media (-moz-gtk-csd-reversed-placement) { 4 | /* Navbar */ 5 | :root[tabsintitlebar] #nav-bar { 6 | padding-left: 7px !important; 7 | padding-right: 3px !important; 8 | position: relative; 9 | } 10 | 11 | /* Window controls separator */ 12 | :root[tabsintitlebar] #nav-bar::after { 13 | left: 3px; 14 | right: auto !important; 15 | } 16 | 17 | /* Window buttons position */ 18 | :root[tabsintitlebar] #titlebar .titlebar-buttonbox-container { 19 | left: 0; 20 | right: auto !important; 21 | } 22 | 23 | :root[tabsintitlebar] #titlebar .titlebar-buttonbox { 24 | padding-left: 3px; 25 | padding-right: 0 !important;; 26 | } 27 | 28 | /* Window controls: at least 1 button */ 29 | @media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button), (-moz-gtk-csd-close-button) { 30 | :root[tabsintitlebar] #nav-bar { 31 | margin-left: 43px; 32 | margin-right: 0 !important; 33 | } 34 | } 35 | /* Window controls: at least 2 buttons */ 36 | @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button), 37 | (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button), 38 | (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { 39 | :root[tabsintitlebar] #nav-bar { 40 | margin-left: 83px; 41 | margin-right: 0 !important; 42 | } 43 | } 44 | /* Window controls: 3 buttons */ 45 | @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { 46 | :root[tabsintitlebar] #nav-bar { 47 | margin-left: 123px; 48 | margin-right: 0 !important; 49 | } 50 | } 51 | 52 | /* CSD rounded corners */ 53 | :root[tabsintitlebar]:not([sizemode="maximized"]):not([inFullscreen]) #nav-bar { 54 | border-top-left-radius: 0 !important; 55 | border-top-right-radius: 8px !important; 56 | } 57 | :root[tabsintitlebar]:not([sizemode="maximized"]):not([inFullscreen]) .titlebar-buttonbox { 58 | border-top-left-radius: 8px !important; 59 | border-top-right-radius: 0 !important; 60 | } 61 | 62 | /* Fullscreen */ 63 | :root[tabsintitlebar][inFullscreen] #nav-bar { 64 | margin-left: 123px !important; 65 | margin-right: 0 !important; 66 | } 67 | :root[tabsintitlebar][inFullscreen] #window-controls { 68 | padding-left: 3px; 69 | padding-right: 0 !important; 70 | left: 0; 71 | right: auto !important;; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /ui/parts/csd.css: -------------------------------------------------------------------------------- 1 | /* GNOME CSD styles for headerbar on Firefox [tabsintitlebar] */ 2 | 3 | @import "csd-fullscreen.css"; 4 | @import "csd-left-controls.css"; 5 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 6 | 7 | /* Navbar position */ 8 | :root[tabsintitlebar] #nav-bar { 9 | padding-right: 7px !important; 10 | position: relative; 11 | } 12 | :root[tabsintitlebar] #toolbar-menubar:not([inactive=true]) { 13 | height: 30px !important; 14 | margin-bottom: 8px; 15 | } 16 | :root[tabsintitlebar] #titlebar { 17 | -moz-appearance: none !important; 18 | } 19 | 20 | /* Add window controls separator */ 21 | :root[tabsintitlebar] #nav-bar::after { 22 | content: ""; 23 | position: absolute; 24 | right: 3px; 25 | top: 6px; 26 | height: 34px; 27 | border-right: 1px solid rgba(0, 0, 0, .1); 28 | } 29 | 30 | /* Move window buttons next to the header bar */ 31 | :root[tabsintitlebar] #titlebar .titlebar-buttonbox-container { 32 | position: absolute !important; 33 | right: 0; 34 | top: 0; 35 | -moz-appearance: none !important; 36 | } 37 | :root[tabsintitlebar] #titlebar .titlebar-buttonbox { 38 | background-image: var(--gnome-headerbar-bgimage) !important; 39 | border-bottom: var(--gnome-headerbar-border-bottom) !important; 40 | box-shadow: var(--gnome-headerbar-box-shadow); 41 | height: unset !important; 42 | padding-right: 3px; 43 | -moz-appearance: none !important; 44 | } 45 | :root[tabsintitlebar] #titlebar .titlebar-buttonbox:-moz-window-inactive { 46 | background-image: var(--gnome-inactive-headerbar-bgimage) !important; 47 | border-bottom: var(--gnome-inactive-headerbar-border-bottom) !important; 48 | box-shadow: var(--gnome-inactive-headerbar-box-shadow) !important; 49 | } 50 | 51 | /* Window buttons */ 52 | :root[tabsintitlebar] #titlebar .titlebar-button { 53 | -moz-appearance: none !important; 54 | border: var(--gnome-headerbar-button-border) !important; 55 | border-color: transparent !important; 56 | border-radius: 3px !important; 57 | height: 34px; 58 | margin: 6px 3px !important; 59 | padding: 0 2px !important; 60 | transition: all .3s ease-out; 61 | width: 34px; 62 | } 63 | :root[tabsintitlebar] #titlebar .titlebar-button .toolbarbutton-icon { 64 | filter: invert(85%); 65 | width: 16px; 66 | } 67 | :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-button .toolbarbutton-icon { 68 | opacity: .7 !important; 69 | } 70 | :root[tabsintitlebar] #titlebar:not(:-moz-window-inactive) .titlebar-button:not([disabled]):hover { 71 | background-image: var(--gnome-headerbar-button-hover-bgimage); 72 | border: var(--gnome-headerbar-button-border) !important; 73 | } 74 | :root[tabsintitlebar] #titlebar:not(:-moz-window-inactive) .titlebar-button:not([disabled]):active { 75 | background-image: var(--gnome-headerbar-button-active-bgimage); 76 | box-shadow: var(--gnome-headerbar-button-active-box-shadow); 77 | border: var(--gnome-headerbar-button-border) !important; 78 | } 79 | :root[tabsintitlebar] #titlebar:not(:-moz-window-inactive) .titlebar-button[disabled] { 80 | background-color: var(--gnome-headerbar-button-disabled-bgcolor); 81 | box-shadow: var(--gnome-headerbar-button-disabled-box-shadow); 82 | border: var(--gnome-headerbar-button-border) !important; 83 | } 84 | 85 | :root[tabsintitlebar] #titlebar .titlebar-buttonbox .titlebar-close .toolbarbutton-icon { 86 | filter: var(--gnome-icons-hack-filter); 87 | list-style-image: url("moz-icon://stock/window-close-symbolic?size=dialog") !important; 88 | } 89 | :root[tabsintitlebar] #titlebar .titlebar-buttonbox .titlebar-max .toolbarbutton-icon { 90 | filter: var(--gnome-icons-hack-filter); 91 | list-style-image: url("moz-icon://stock/window-maximize-symbolic?size=dialog") !important; 92 | } 93 | :root[tabsintitlebar] #titlebar .titlebar-buttonbox .titlebar-min .toolbarbutton-icon { 94 | filter: var(--gnome-icons-hack-filter); 95 | list-style-image: url("moz-icon://stock/window-minimize-symbolic?size=dialog") !important; 96 | } 97 | 98 | /* Fix the issue when dragging tabs */ 99 | :root[tabsintitlebar] #navigator-toolbox[movingtab] #TabsToolbar { 100 | padding-bottom: 0 !important; 101 | } 102 | 103 | /* Window controls: at least 1 button */ 104 | @media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button), (-moz-gtk-csd-close-button) { 105 | :root[tabsintitlebar] #nav-bar { 106 | margin-right: 43px; 107 | } 108 | } 109 | /* Window controls: at least 2 buttons */ 110 | @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button), 111 | (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button), 112 | (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { 113 | :root[tabsintitlebar] #nav-bar { 114 | margin-right: 83px; 115 | } 116 | } 117 | /* Window controls: 3 buttons */ 118 | @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { 119 | :root[tabsintitlebar] #nav-bar { 120 | margin-right: 123px; 121 | } 122 | } 123 | 124 | /* CSD rounded corners */ 125 | :root[tabsintitlebar]:not([sizemode="maximized"]):not([inFullscreen]) #navigator-toolbox { 126 | border: 1px solid var(--gnome-window-border-color) !important; 127 | border-radius: 8px 8px 0 0 !important; 128 | margin: -1px -1px 0 -1px !important; 129 | } 130 | :root[tabsintitlebar]:not([sizemode="maximized"]):not([inFullscreen]) #nav-bar { 131 | border-top-left-radius: 8px; 132 | } 133 | :root[tabsintitlebar]:not([sizemode="maximized"]):not([inFullscreen]) .titlebar-buttonbox { 134 | border-top-right-radius: 8px; 135 | } -------------------------------------------------------------------------------- /ui/parts/custom-icons.css: -------------------------------------------------------------------------------- 1 | /* Replace icons */ 2 | 3 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 4 | 5 | /* Back button */ 6 | #back-button .toolbarbutton-icon { 7 | filter: var(--gnome-icons-hack-filter); 8 | list-style-image: url("moz-icon://stock/go-previous-symbolic?size=dialog") !important; 9 | } 10 | 11 | /* Forward button */ 12 | #forward-button .toolbarbutton-icon { 13 | filter: var(--gnome-icons-hack-filter); 14 | list-style-image: url("moz-icon://stock/go-next-symbolic?size=dialog") !important; 15 | } 16 | 17 | /* Reload button */ 18 | /* Glitch - animations (may be possible to fix in about:config) 19 | #reload-button .toolbarbutton-icon { 20 | filter: var(--gnome-icons-hack-filter); 21 | list-style-image: url("moz-icon://stock/view-refresh-symbolic?size=dialog") !important; 22 | }*/ 23 | /* Reload button */ 24 | /* Glitch - animations (may be possible to fix in about:config) 25 | #stop-button .toolbarbutton-icon { 26 | filter: var(--gnome-icons-hack-filter); 27 | list-style-image: url("moz-icon://stock/process-stop-symbolic?size=dialog") !important; 28 | }*/ 29 | 30 | /* New tab button */ 31 | /* Default looks nicer 32 | #new-tab-button .toolbarbutton-icon { 33 | filter: var(--gnome-icons-hack-filter); 34 | list-style-image: url("moz-icon://stock/tab-new-symbolic?size=dialog") !important; 35 | }*/ 36 | 37 | /* Zoom out button */ 38 | #zoom-out-button .toolbarbutton-icon { 39 | filter: var(--gnome-icons-hack-filter); 40 | list-style-image: url("moz-icon://stock/zoom-out-symbolic?size=dialog") !important; 41 | } 42 | 43 | /* Zoom reset button */ 44 | /* No icon, just text 45 | #zoom-reset-button .toolbarbutton-icon { 46 | filter: var(--gnome-icons-hack-filter); 47 | list-style-image: url("moz-icon://stock/zoom-original-symbolic?size=dialog") !important; 48 | } */ 49 | 50 | /* Zoom in button */ 51 | #zoom-in-button .toolbarbutton-icon { 52 | filter: var(--gnome-icons-hack-filter); 53 | list-style-image: url("moz-icon://stock/zoom-in-symbolic?size=dialog") !important; 54 | } 55 | 56 | /* Navbar overflow button */ 57 | /* Default is ok 58 | #nav-bar-overflow-button .toolbarbutton-icon { 59 | filter: var(--gnome-icons-hack-filter); 60 | list-style-image: url("moz-icon://stock/view-more-symbolic?size=dialog") !important; 61 | } */ 62 | 63 | /* Downloads button */ 64 | /* Glitch - it swaps to the default one anyway 65 | #downloads-button { 66 | filter: var(--gnome-icons-hack-filter); 67 | list-style-image: url("moz-icon://stock/folder-download-symbolic?size=dialog") !important; 68 | } */ 69 | 70 | /* Downloads button */ 71 | /* Default is ok 72 | #PanelUI-menu-button { 73 | filter: var(--gnome-icons-hack-filter); 74 | list-style-image: url("moz-icon://stock/open-menu-symbolic?size=dialog") !important; 75 | } */ 76 | 77 | -------------------------------------------------------------------------------- /ui/parts/headerbar-buttons.css: -------------------------------------------------------------------------------- 1 | /* Header bar's buttons */ 2 | 3 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 4 | 5 | /* Header bar */ 6 | #nav-bar { 7 | padding: 0 3px !important; 8 | } 9 | 10 | /* Overrides: Make the back button the same as other buttons */ 11 | :root:not([uidensity=compact]) #back-button { 12 | border-radius: var(--toolbarbutton-border-radius) !important; 13 | } 14 | :root:not([uidensity=compact]) #back-button > .toolbarbutton-icon { 15 | background-color: unset !important; 16 | border: unset !important; 17 | width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; 18 | height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; 19 | padding: var(--toolbarbutton-inner-padding) !important; 20 | border-radius: var(--toolbarbutton-border-radius); 21 | box-shadow: none !important; 22 | } 23 | :root:not([uidensity=compact]) #back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon { 24 | background-color: var(--toolbarbutton-hover-background) !important; 25 | box-shadow: unset; 26 | border-color: unset; 27 | } 28 | :root:not([uidensity=compact]) #back-button[open] > .toolbarbutton-icon, 29 | :root:not([uidensity=compact]) #back-button:not([disabled]):hover:active > .toolbarbutton-icon { 30 | background-color: var(--toolbarbutton-active-background) !important; 31 | border-color: unset; 32 | } 33 | 34 | /* Remove the header bar buttons' hover styles */ 35 | #nav-bar { 36 | --toolbarbutton-active-background: transparent !important; 37 | --toolbarbutton-hover-background: transparent !important; 38 | } 39 | 40 | /* Header bar buttons */ 41 | #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton) { 42 | border: var(--gnome-headerbar-button-border); 43 | border-bottom: var(--gnome-headerbar-button-border-bottom); 44 | border-radius: 3px; 45 | margin: 6px 3px !important; 46 | padding: 0 2px !important; 47 | width: 34px; 48 | height: 34px; 49 | } 50 | /* Inactive window */ 51 | :root:-moz-window-inactive #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton) { 52 | border: var(--gnome-inactive-headerbar-button-border); 53 | border-bottom: var(--gnome-inactive-headerbar-button-border-bottom); 54 | } 55 | :root:-moz-window-inactive #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton) image, 56 | /* Glitch: Downloads button's icon */ 57 | :root:-moz-window-inactive #downloads-indicator-anchor { 58 | opacity: .7 !important; 59 | } 60 | 61 | /* Enabled header bar buttons */ 62 | #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not([disabled]), 63 | /* Glitch: Reload button */ 64 | :root[customizing] #nav-bar > hbox toolbaritem toolbarbutton { 65 | background-image: var(--gnome-headerbar-button-bgimage); 66 | box-shadow: var(--gnome-headerbar-button-box-shadow); 67 | } 68 | /* Glitch: Cut / Copy / Paste buttons' icons 69 | * :not(#hack) is there just to elevate rule priority */ 70 | :root[customizing] #nav-bar > hbox toolbaritem toolbarbutton image:not(#hack) { 71 | opacity: 1 !important; 72 | } 73 | /* Hovered */ 74 | #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not([open]):not([disabled]):hover { 75 | background-image: var(--gnome-headerbar-button-hover-bgimage); 76 | } 77 | /* Active */ 78 | #nav-bar toolbarbutton:not(#urlbar-zoom-button):not([disabled]):active, 79 | #nav-bar toolbarbutton:not(#urlbar-zoom-button):not([disabled])[open] { 80 | background-image: var(--gnome-headerbar-button-active-bgimage); 81 | box-shadow: var(--gnome-headerbar-button-active-box-shadow); 82 | } 83 | /* Inactive window */ 84 | :root:-moz-window-inactive #nav-bar toolbarbutton:not(#urlbar-zoom-button):not([disabled]) { 85 | background-image: var(--gnome-inactive-headerbar-button-bgimage); 86 | box-shadow: var(--gnome-inactive-headerbar-button-box-shadow); 87 | } 88 | /* Glitch: Reload and Cut / Copy / Paste buttons */ 89 | :root:-moz-window-inactive[customizing] #nav-bar #stop-reload-button toolbarbutton, 90 | :root:-moz-window-inactive[customizing] #nav-bar #edit-controls toolbarbutton { 91 | background-image: var(--gnome-inactive-headerbar-button-bgimage); 92 | box-shadow: var(--gnome-inactive-headerbar-button-box-shadow); 93 | } 94 | /* Glitch: Reload and Cut / Copy / Paste buttons' icons */ 95 | :root:-moz-window-inactive[customizing] #nav-bar #stop-reload-button image.toolbarbutton-icon, 96 | :root:-moz-window-inactive[customizing] #nav-bar #edit-controls image.toolbarbutton-icon { 97 | opacity: .7 !important; 98 | } 99 | 100 | /* Disabled header bar buttons */ 101 | #nav-bar toolbarbutton:not(#urlbar-zoom-button)[disabled] { 102 | background-color: var(--gnome-headerbar-button-disabled-bgcolor); 103 | border: var(--gnome-headerbar-button-disabled-border) !important; 104 | box-shadow: var(--gnome-headerbar-button-disabled-box-shadow); 105 | opacity: 1 !important; 106 | } 107 | #nav-bar toolbarbutton:not(#urlbar-zoom-button)[disabled] image { 108 | opacity: .4 !important; 109 | } 110 | /* Glitch: Overflow and Burger buttons 111 | * :not(#hack) is there just to elevate rule priority */ 112 | :root[customizing] #nav-bar > toolbarbutton[disabled]:not(#hack), 113 | :root[customizing] #nav-bar > toolbaritem > toolbarbutton[disabled]:not(#hack) { 114 | opacity: .5 !important; 115 | } 116 | /* Glitch: Overflow button's icon */ 117 | :root[customizing] #nav-bar toolbarbutton:not(#urlbar-zoom-button)[disabled] image { 118 | fill-opacity: var(--toolbarbutton-icon-fill-opacity) !important; 119 | } 120 | /* Inactive window */ 121 | :root:-moz-window-inactive #nav-bar toolbarbutton:not(#urlbar-zoom-button)[disabled] { 122 | background-color: var(--gnome-inactive-headerbar-button-disabled-bgcolor); 123 | border: var(--gnome-inactive-headerbar-button-disabled-border); 124 | box-shadow: var(--gnome-inactive-headerbar-button-disabled-box-shadow); 125 | } 126 | :root:-moz-window-inactive #nav-bar toolbarbutton:not(#urlbar-zoom-button)[disabled] image { 127 | opacity: .3 !important; 128 | } 129 | 130 | /* Combined buttons 131 | * :not(#hack) is there just to elevate rule priority */ 132 | #nav-bar .toolbaritem-combined-buttons toolbarbutton:not(:last-child):not(#hack), 133 | #nav-bar #back-button:not(#hack) { 134 | border-top-right-radius: 0 !important; 135 | border-bottom-right-radius: 0 !important; 136 | border-right-width: 0 !important; 137 | margin-right: 0 !important; 138 | } 139 | #nav-bar .toolbaritem-combined-buttons toolbarbutton:not(:first-child):not(#hack), 140 | #nav-bar #forward-button:not(#hack) { 141 | border-top-left-radius: 0 !important; 142 | border-bottom-left-radius: 0 !important; 143 | margin-left: 0 !important; 144 | } 145 | /* Glitch: Combined buttons' margin */ 146 | #nav-bar .toolbaritem-combined-buttons { 147 | margin-left: 0 !important; 148 | margin-right: 0 !important; 149 | } 150 | /* Remove combined buttons' separators */ 151 | #nav-bar .toolbaritem-combined-buttons separator { 152 | display: none !important; 153 | } 154 | 155 | /* Bookmark buttons */ 156 | #nav-bar toolbarbutton.bookmark-item { 157 | width: auto !important; 158 | } 159 | #nav-bar toolbarbutton.bookmark-item .toolbarbutton-icon { 160 | margin-left: 6px; 161 | } 162 | #nav-bar toolbarbutton.bookmark-item .toolbarbutton-text { 163 | padding-right: 6px; 164 | } 165 | 166 | /* Remove Burger button's left separator */ 167 | #PanelUI-button { 168 | border: 0 !important; 169 | margin: 0 !important; 170 | } 171 | 172 | /* User sync menu, bigger avatar */ 173 | #fxa-toolbar-menu-button .toolbarbutton-badge-stack { 174 | padding: 0 !important; 175 | margin: 0 !important; 176 | } 177 | #fxa-avatar-image { 178 | height: 26px !important; 179 | margin: 0 !important; 180 | padding: 0 !important; 181 | width: 26px !important; 182 | } -------------------------------------------------------------------------------- /ui/parts/headerbar-private-urlbar.css: -------------------------------------------------------------------------------- 1 | /* Private window header bar's URL bar */ 2 | 3 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 4 | 5 | :root[privatebrowsingmode="temporary"] #urlbar { 6 | background-image: var(--gnome-private-urlbar-bgimage) !important; 7 | } 8 | 9 | #TabsToolbar .private-browsing-indicator { 10 | display: none !important; 11 | } 12 | -------------------------------------------------------------------------------- /ui/parts/headerbar-urlbar.css: -------------------------------------------------------------------------------- 1 | /* Header bar's URL bar */ 2 | 3 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 4 | 5 | /* Center the URL bar */ 6 | toolbarspring { 7 | max-width: 10000px !important; 8 | } 9 | 10 | /* URL bar and Search bar */ 11 | #urlbar, 12 | #searchbar > .searchbar-textbox { 13 | background-image: var(--gnome-urlbar-bgimage) !important; 14 | border: var(--gnome-urlbar-border) !important; 15 | border-radius: 3px; 16 | box-shadow: var(--gnome-urlbar-box-shadow) !important; 17 | color: var(--gnome-urlbar-color) !important; 18 | height: var(--gnome-urlbar-height); 19 | } 20 | /* Focused */ 21 | #urlbar[focused], 22 | #searchbar > .searchbar-textbox[focused] { 23 | border-width: 2px !important; 24 | border-style: solid !important; 25 | border-color: var(--gnome-focused-urlbar-border-color) !important; 26 | outline: var(--gnome-focused-urlbar-outline); 27 | outline-offset: -2px; 28 | -moz-outline-radius: 3px; 29 | } 30 | #urlbar[focused] .urlbar-textbox-container { 31 | margin: -1px !important; 32 | } 33 | #searchbar > .searchbar-textbox[focused] .searchbar-search-button { 34 | margin-left: -1px !important; 35 | } 36 | #searchbar > .searchbar-textbox[focused] .search-go-button { 37 | margin-right: -1px !important; 38 | } 39 | /* Inactive window */ 40 | :root:-moz-window-inactive #urlbar, 41 | :root:-moz-window-inactive #searchbar > .searchbar-textbox { 42 | background-image: var(--gnome-inactive-urlbar-bgimage) !important; 43 | border: var(--gnome-inactive-urlbar-border) !important; 44 | box-shadow: var(--gnome-inactive-urlbar-box-shadow) !important; 45 | color: var(--gnome-inactive-urlbar-color) !important; 46 | } 47 | 48 | /* URL bar and Search bar's icons */ 49 | .urlbar-icon:hover, 50 | .urlbar-icon-wrapper:hover, 51 | .urlbar-icon[open], 52 | .urlbar-icon-wrapper[open], 53 | .urlbar-icon:hover:active, 54 | .urlbar-icon-wrapper:hover:active, 55 | .searchbar-search-button:hover .searchbar-search-icon, 56 | .searchbar-search-button[open] .searchbar-search-icon, 57 | .searchbar-search-button:hover:active .searchbar-search-icon { 58 | background-color: transparent !important; 59 | fill-opacity: 1 !important; 60 | } 61 | -------------------------------------------------------------------------------- /ui/parts/headerbar.css: -------------------------------------------------------------------------------- 1 | /* Header bar */ 2 | 3 | @import "headerbar-buttons.css"; 4 | @import "headerbar-urlbar.css"; 5 | @import "headerbar-private-urlbar.css"; 6 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 7 | 8 | /* Header bar colors */ 9 | #nav-bar { 10 | background-image: var(--gnome-headerbar-bgimage) !important; 11 | border: none !important; 12 | border-bottom: var(--gnome-headerbar-border-bottom) !important; 13 | box-shadow: var(--gnome-headerbar-box-shadow) !important; 14 | } 15 | #nav-bar:-moz-window-inactive { 16 | background-image: var(--gnome-inactive-headerbar-bgimage) !important; 17 | border-bottom: var(--gnome-inactive-headerbar-border-bottom) !important; 18 | box-shadow: var(--gnome-inactive-headerbar-box-shadow) !important; 19 | } 20 | -------------------------------------------------------------------------------- /ui/parts/popups.css: -------------------------------------------------------------------------------- 1 | /* Popup menus and context menus */ 2 | 3 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 4 | 5 | /* Adjust popup position */ 6 | panel[type=arrow] { 7 | margin-top: 9px !important; 8 | } 9 | /* Bookmarks (header bar's bookmarks button) */ 10 | #BMB_bookmarksPopup { 11 | margin-top: 3px !important; 12 | } 13 | /* Identity (URL bar's locker icon) */ 14 | #identity-popup { 15 | margin-top: 12px !important; 16 | } 17 | 18 | /* Style menus */ 19 | menupopup { 20 | -moz-appearance: none !important; 21 | background: var(--gnome-menu-bgcolor); 22 | margin: -2px 0 0 -2px; 23 | padding: 2px 0; 24 | } 25 | 26 | /* Style popups */ 27 | .panel-arrowcontent, .panel-header, .PanelUI-subView, .panel-subview-body, #widget-overflow-mainView { 28 | background: var(--gnome-popup-bgcolor) !important; 29 | } 30 | .panel-arrowcontent { 31 | border: var(--gnome-popup-border) !important; 32 | border-color: var(--gnome-popup-border-color) !important; 33 | border-radius: 5px; 34 | box-shadow: var(--gnome-popup-shadow) !important; 35 | padding: 8px 12px !important; 36 | } 37 | .panel-arrow { 38 | fill: var(--gnome-popup-bgcolor) !important; 39 | stroke: var(--gnome-popup-border-color) !important; 40 | } 41 | 42 | /* Style popups menu buttons */ 43 | .subviewbutton, .toolbarbutton-1 { 44 | border-radius: 3px !important; 45 | } 46 | .subviewbutton:hover, .toolbarbutton-1:hover { 47 | background-color: var(--gnome-popup-button-hover-bgcolor) !important; 48 | } 49 | 50 | /* Style popups separator */ 51 | toolbarseparator, menuseparator { 52 | border-color: var(--gnome-popup-separator-color) !important; 53 | } 54 | .panel-header { 55 | border-bottom: 1px solid var(--gnome-popup-separator-color) !important; 56 | } 57 | 58 | /* Style popups menu footer buttons */ 59 | .subviewbutton.panel-subview-footer, 60 | .downloadsPanelFooter { 61 | background-image: var(--gnome-headerbar-button-bgimage); 62 | box-shadow: var(--gnome-headerbar-button-box-shadow); 63 | border: var(--gnome-headerbar-button-border); 64 | border-bottom: var(--gnome-headerbar-button-border-bottom); 65 | border-radius: 3px; 66 | margin: 6px 3px !important; 67 | padding: 2px 16px !important; 68 | width: 34px; 69 | height: 34px; 70 | } 71 | 72 | .subviewbutton.panel-subview-footer:hover, 73 | .downloadsPanelFooter:hover { 74 | background-image: var(--gnome-headerbar-button-hover-bgimage) !important; 75 | } 76 | 77 | /* Burger menu's zoom controls colors */ 78 | #appMenu-zoomReset-button { 79 | background-color: var(--arrowpanel-background) !important; 80 | border-color: var(--panel-separator-color) !important; 81 | } 82 | 83 | /* Remove icons from the burger menu */ 84 | panelview vbox.panel-subview-body > toolbarbutton image { 85 | display: none; 86 | } 87 | panelview vbox.panel-subview-body > toolbarbutton label { 88 | padding-inline-start: 0 !important; 89 | } 90 | #appMenu-zoom-controls > spacer, 91 | #appMenu-edit-controls > spacer { 92 | width: 12px !important; 93 | } 94 | 95 | /* Remove icons from the context menu */ 96 | #contentAreaContextMenu menuitem image, 97 | #contentAreaContextMenu menu image { 98 | visibility: hidden; 99 | } 100 | #contentAreaContextMenu menugroup menuitem image { 101 | visibility: visible; 102 | } 103 | 104 | /* Edit bookmark panel */ 105 | .editBookmarkPanelBottomButton { 106 | color: white !important; 107 | margin: 6px 0 !important; 108 | padding: 2px 16px !important; 109 | width: 34px; 110 | height: 34px; 111 | } 112 | #editBookmarkPanelRemoveButton { 113 | background-image: var(--gnome-headerbar-button-destructive-action-bgimage); 114 | border-radius: 3px 0 0 3px; 115 | border-color: var(--gnome-headerbar-button-destructive-action-border-color) !important; 116 | border-bottom-color: var(--gnome-headerbar-button-destructive-action-border-bottom-color) !important; 117 | box-shadow: var(--gnome-headerbar-button-destructive-action-box-shadow); 118 | text-shadow: 0 -1px rgba(0, 0, 0, 0.560784); 119 | } 120 | #editBookmarkPanelRemoveButton:hover { 121 | background-image: var(--gnome-headerbar-button-destructive-action-hover-bgimage); 122 | } 123 | #editBookmarkPanelDoneButton { 124 | background-image: var(--gnome-headerbar-button-suggested-action-bgimage); 125 | border-left: 0 !important; 126 | border-radius: 0 3px 3px 0; 127 | border-color: var(--gnome-headerbar-button-suggested-action-border-color) !important; 128 | border-bottom-color: var(--gnome-headerbar-button-suggested-action-border-bottom-color) !important; 129 | box-shadow: var(--gnome-headerbar-button-suggested-action-box-shadow); 130 | text-shadow: 0 -1px rgba(0, 0, 0, 0.543529); 131 | } 132 | #editBookmarkPanelDoneButton:hover { 133 | background-image: var(--gnome-headerbar-button-suggested-action-hover-bgimage); 134 | } 135 | 136 | /* Customization overflow menu position */ 137 | #customization-panel-container { 138 | padding: 0 75px 25px !important; 139 | margin-top: 10px; 140 | z-index: 10; 141 | } 142 | #customization-panelWrapper > .panel-arrowbox { 143 | margin-bottom: -5px !important; 144 | } 145 | 146 | /* Confirmation Hint */ 147 | #confirmation-hint .panel-arrowcontent { 148 | background: var(--gnome-headerbar-button-suggested-action-bgimage) !important; 149 | border-color: var(--gnome-headerbar-button-suggested-action-border-color) !important; 150 | } 151 | #confirmation-hint .panel-arrow { 152 | fill: var(--gnome-headerbar-button-suggested-action-border-color) !important; 153 | stroke: var(--gnome-headerbar-button-suggested-action-border-color) !important; 154 | } 155 | #confirmation-hint-message { 156 | color: white !important; 157 | } 158 | 159 | /* User sync account menu */ 160 | #fxa-menu-avatar { 161 | display: none; 162 | } -------------------------------------------------------------------------------- /ui/parts/remove-white-flash.css: -------------------------------------------------------------------------------- 1 | /* Removes a white flash after you open or close a tab. Affects all variants, 2 | * but it's more visible on dark variants. */ 3 | 4 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 5 | 6 | /* Overrides: Change the flash color */ 7 | #tabbrowser-tabpanels, 8 | #tabbrowser-tabpanels[pendingpaint], 9 | browser { 10 | background-color: var(--gnome-browser-before-load-bgcolor) !important; 11 | } 12 | -------------------------------------------------------------------------------- /ui/parts/tabsbar.css: -------------------------------------------------------------------------------- 1 | /* Tabs bar */ 2 | 3 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 4 | 5 | /* Tabs bar height */ 6 | #tabbrowser-tabs, 7 | #tabbrowser-tabs arrowscrollbox { 8 | height: initial !important; 9 | min-height: initial !important; 10 | } 11 | tab > stack { 12 | height: 38px; 13 | } 14 | /* Extra margin for the first and last tabs */ 15 | .tabbrowser-tab[first-tab]:not([pinned=true]) { 16 | margin-left: 8px !important; 17 | } 18 | .tabbrowser-tab[last-tab]:not([pinned=true]) { 19 | margin-right: 8px !important; 20 | } 21 | 22 | /* Remove hover effects on tab bar buttons */ 23 | #TabsToolbar { 24 | --toolbarbutton-active-background: transparent !important; 25 | --toolbarbutton-hover-background: transparent !important; 26 | margin-bottom: -1px !important; 27 | padding: 0 3px !important; 28 | } 29 | 30 | /* New hover effect */ 31 | #TabsToolbar toolbarbutton { 32 | fill-opacity: .6 !important; 33 | } 34 | #TabsToolbar toolbarbutton:not([disabled]):hover, 35 | #TabsToolbar toolbarbutton[open=true] { 36 | fill-opacity: 1 !important; 37 | } 38 | 39 | /* Remove shadow next to tab scroll buttons */ 40 | .arrowscrollbox-overflow-start-indicator, 41 | .arrowscrollbox-overflow-end-indicator { 42 | display: none; 43 | } 44 | 45 | /* Remove tab separators */ 46 | .tabbrowser-tab::after, 47 | .tabbrowser-tab::before { 48 | border-color: transparent !important; 49 | border-image: none !important; 50 | } 51 | 52 | /* Space between tabs */ 53 | .tabbrowser-tab:not([pinned=true]) { 54 | margin: 0 4px !important; 55 | } 56 | 57 | /* Tab labels */ 58 | tab { 59 | color: var(--gnome-tabbar-tab-color) !important; 60 | font-family: Cantarell, inherit; 61 | font-weight: bold; 62 | font-size: 1em; 63 | } 64 | tab:hover { 65 | color: var(--gnome-tabbar-tab-hover-color) !important; 66 | } 67 | tab[selected] { 68 | color: var(--gnome-tabbar-tab-active-color) !important; 69 | } 70 | tab:-moz-window-inactive { 71 | color: var(--gnome-inactive-tabbar-tab-color) !important; 72 | } 73 | tab[selected]:-moz-window-inactive { 74 | color: var(--gnome-inactive-tabbar-tab-active-color) !important; 75 | } 76 | 77 | /* Center all inside tab */ 78 | .tab-content { 79 | display: flex; 80 | justify-content: center; 81 | align-items: center; 82 | margin-top: -1px; 83 | min-width: 100% !important; 84 | padding: 0 10px !important; 85 | } 86 | 87 | /* Prevent tab icons size breaking */ 88 | .tab-icon-image, .tab-icon-sound, .tab-throbber, .tab-throbber-fallback, .tab-close-button { 89 | min-width: 16px; 90 | } 91 | 92 | /* Adjust tab label width */ 93 | .tab-label-container { 94 | min-width: 0 !important; 95 | } 96 | 97 | /* Put tab close button and icon sound to the right */ 98 | .tab-icon-sound[soundplaying="true"], .tab-icon-sound[muted="true"], 99 | .tab-icon-sound[activemedia-blocked="true"] { 100 | margin-left: auto !important; 101 | } 102 | .tabbrowser-tab:not([soundplaying]):not([muted]):not([activemedia-blocked]) .tab-close-button { 103 | margin-left: auto !important; 104 | } 105 | 106 | /* Force tab favicon to the center */ 107 | .tab-throbber, .tab-throbber-fallback { 108 | margin-left: auto; 109 | } 110 | .tabbrowser-tab:not([busy]) .tab-icon-image { 111 | margin-left: auto; 112 | } 113 | 114 | /* If tab favicon is not present, force tab label to the center */ 115 | .tabbrowser-tab .tab-label-container { 116 | margin-left: 0 !important; 117 | } 118 | .tabbrowser-tab:not([image]):not([busy]):not([progress]) .tab-label-container { 119 | margin-left: auto !important; 120 | } 121 | 122 | /* If tab close button is not present, don't force favicon to the center */ 123 | #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected="true"]) .tab-throbber, 124 | #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected="true"]) .tab-throbber-fallback, 125 | #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected="true"]):not([busy]) .tab-icon-image, 126 | #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected="true"]):not([image]) .tab-label-container { 127 | margin-left: 0 !important; 128 | } 129 | 130 | /* Remove tab icons */ 131 | /* tab:not([pinned=true]) .tab-icon-image { 132 | display: none; 133 | } */ 134 | 135 | /* Close tab button */ 136 | .tab-close-button { 137 | border: 1px solid transparent; 138 | box-sizing: content-box; /* Avoid deformation on flexbox */ 139 | filter: var(--gnome-icons-hack-filter); 140 | list-style-image: url("moz-icon://stock/window-close-symbolic?size=dialog") !important; 141 | height: 16px; 142 | opacity: .3; 143 | padding: 2px; 144 | width: 16px; 145 | } 146 | :root:-moz-window-inactive .tab-close-button { 147 | opacity: .18; 148 | } 149 | :root:not(:-moz-window-inactive) .tab-close-button:hover { 150 | background-image: var(--gnome-icons-hack-close-button-hover-bgimage); 151 | border: var(--gnome-icons-hack-close-button-border); 152 | border-bottom: var(--gnome-icons-hack-close-button-border-bottom); 153 | border-radius: 3px; 154 | box-shadow: var(--gnome-icons-hack-close-button-hover-box-shadow); 155 | filter: var(--gnome-icons-hack-close-button-filter); 156 | opacity: 1; 157 | } 158 | :root:not(:-moz-window-inactive) .tab-close-button:active { 159 | background-image: var(--gnome-icons-hack-close-button-active-bgimage); 160 | box-shadow: var(--gnome-icons-hack-close-button-active-box-shadow); 161 | } 162 | .tab-close-button:active:not(:hover) { 163 | background-image: none !important; 164 | box-shadow: none !important; 165 | } 166 | 167 | /* Tab close button etc. positioning */ 168 | .tab-throbber, .tab-icon-image, .tab-sharing-icon-overlay, .tab-icon-sound, .tab-close-button { 169 | margin-top: 0 !important; 170 | } 171 | 172 | /* Remove blue line above tabs */ 173 | .tab-line { 174 | display: none; 175 | } 176 | 177 | /* Move container lines to the top */ 178 | .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background { 179 | border-top: 2px solid var(--identity-tab-color) !important; 180 | } 181 | 182 | .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-bottom-line { 183 | display: none; 184 | } 185 | 186 | /* Active tab */ 187 | .tab-background[selected=true] { 188 | background-color: var(--gnome-tabbar-tab-active-bgcolor) !important; 189 | background-image: none !important; 190 | border-bottom: var(--gnome-tabbar-tab-active-border-bottom) !important; 191 | border-right-color: var(--gnome-tabbar-tab-active-border-color-sides) !important; 192 | border-right-style: solid !important; 193 | border-left-color: var(--gnome-tabbar-tab-active-border-color-sides) !important; 194 | border-left-style: solid !important; 195 | border-image: none !important; 196 | border-top-style: none !important; 197 | } 198 | .tab-background[selected=true]:-moz-window-inactive { 199 | background-color: var(--gnome-inactive-tabbar-tab-active-bgcolor) !important; 200 | border-right-color: var(--gnome-inactive-tabbar-tab-active-border-color-sides) !important; 201 | border-left-color: var(--gnome-inactive-tabbar-tab-active-border-color-sides) !important; 202 | border-bottom: var(--gnome-inactive-tabbar-tab-active-border-bottom) !important; 203 | } 204 | 205 | /* Tab hover */ 206 | :root:not(:-moz-window-inactive) .tabbrowser-tab:hover > .tab-stack > .tab-background[selected=true] { 207 | background-color: var(--gnome-tabbar-tab-active-hover-bgcolor) !important; 208 | } 209 | .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), 210 | #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), 211 | #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]) { 212 | background-color: transparent !important; 213 | } 214 | :root:not(:-moz-window-inactive) .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) { 215 | background-color: var(--gnome-tabbar-tab-hover-bgcolor) !important; 216 | border-image: none !important; 217 | border-right: var(--gnome-tabbar-tab-hover-border-sides) !important; 218 | border-left: var(--gnome-tabbar-tab-hover-border-sides) !important; 219 | border-bottom: var(--gnome-tabbar-tab-hover-border-bottom) !important; 220 | } 221 | 222 | /* Full width tabs */ 223 | .tabbrowser-tab:not([style^="max-width"]):not([pinned]), 224 | .tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) { 225 | max-width: 100% !important; 226 | } 227 | 228 | .tabbrowser-tab:not([style^="max-width"]):not([pinned]):not([fadein]), 229 | .tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]):not([fadein]) { 230 | max-width: .1px !important; 231 | } 232 | 233 | /* Remove blank spaces on tabs start and end */ 234 | #TabsToolbar .titlebar-spacer { 235 | display: none !important; 236 | } 237 | -------------------------------------------------------------------------------- /ui/parts/toolbox.css: -------------------------------------------------------------------------------- 1 | /* Toolbox, a container for all toolbars (toolbox#navigator-toolbox): 2 | * - menu bar (toolbar#toolbar-menubar) 3 | * - tab bar (toolbar#TabsToolbar) 4 | * - header bar (toolbar#nav-bar) 5 | * - bookmark bar (toolbar#PersonalToolbar) 6 | * - add-ons can add their own toolbars (toolbar) */ 7 | 8 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 9 | 10 | /* Toolbox colors */ 11 | #navigator-toolbox { 12 | background-color: var(--gnome-tabbar-bgcolor) !important; 13 | border-bottom: var(--gnome-tabbar-border-bottom); 14 | } 15 | #navigator-toolbox:-moz-window-inactive { 16 | background-color: var(--gnome-inactive-tabbar-bgcolor) !important; 17 | border-bottom: var(--gnome-inactive-tabbar-border-bottom); 18 | } 19 | 20 | /* Menu bar */ 21 | #toolbar-menubar:not([inactive=true]) { 22 | border-bottom: var(--gnome-bookmarkbar-border-bottom) !important; 23 | margin-bottom: 0 !important; 24 | } 25 | 26 | /* Bookmark bar */ 27 | #PersonalToolbar { 28 | border-bottom: var(--gnome-bookmarkbar-border-bottom) !important; 29 | height: var(--gnome-bookmarkbar-height); 30 | } 31 | #PersonalToolbar:-moz-window-inactive { 32 | background-color: var(--gnome-inactive-tabbar-bgcolor) !important; 33 | border-top: var(--gnome-inactive-bookmarkbar-border-bottom) !important; 34 | } 35 | 36 | /* Overrides: Remove border below the menu bar / above the header bar */ 37 | #TabsToolbar:not([collapsed="true"]) + #nav-bar { 38 | border-top-width: 0 !important; 39 | } 40 | #navigator-toolbox::after { 41 | border-bottom-width: 0 !important; 42 | } 43 | 44 | /* Reorder toolbars */ 45 | #navigator-toolbox #nav-bar { 46 | -moz-box-ordinal-group: 0; 47 | } 48 | #navigator-toolbox #PersonalToolbar { 49 | -moz-box-ordinal-group: 1; 50 | } 51 | #navigator-toolbox #titlebar { 52 | -moz-box-ordinal-group: 2; 53 | } 54 | #navigator-toolbox toolbar { 55 | -moz-box-ordinal-group: 10; 56 | } 57 | #navigator-toolbox #TabsToolbar { 58 | -moz-box-ordinal-group: 100; 59 | } 60 | 61 | /* Overrides: Don't shift other toolbars on tab drag and drop */ 62 | #TabsToolbar[movingtab] { 63 | padding-bottom: 0 !important; 64 | } 65 | #TabsToolbar[movingtab] > .tabbrowser-tabs { 66 | padding-bottom: 0 !important; 67 | margin-bottom: 0 !important; 68 | } 69 | #TabsToolbar[movingtab] + #nav-bar { 70 | margin-top: 0 !important; 71 | } 72 | -------------------------------------------------------------------------------- /ui/symbolic-tab-icons.css: -------------------------------------------------------------------------------- 1 | @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 2 | 3 | /* Make tab icons look kinda like symbolic icons */ 4 | tab .tab-icon-image { 5 | filter: var(--gnome-tabbar-tab-icon-filter); 6 | } 7 | -------------------------------------------------------------------------------- /ui/theme.css: -------------------------------------------------------------------------------- 1 | @import "parts/toolbox.css"; 2 | @import "parts/headerbar.css"; 3 | @import "parts/csd.css"; 4 | @import "parts/popups.css"; 5 | @import "parts/tabsbar.css"; 6 | @import "parts/remove-white-flash.css"; 7 | @import "parts/custom-icons.css"; 8 | @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; 9 | 10 | :root { 11 | --space-above-tabbar: 0 !important; 12 | } 13 | 14 | /* Sidebar */ 15 | #search-box { 16 | box-shadow: var(--gnome-urlbar-box-shadow) !important; 17 | height: var(--gnome-urlbar-height); 18 | } 19 | -------------------------------------------------------------------------------- /userChrome.css: -------------------------------------------------------------------------------- 1 | /* 2 | * In this file you can enable styles which apply to Firefox' user interface. 3 | * To enable a specific feature, uncomment its @import line by removing "/*" at 4 | * the beginning of the line. To disable it, put the "/*" back. 5 | */ 6 | 7 | /******************************************************************************* 8 | * GNOME Theme 9 | * Pick whichever variant you like, it doesn't have to match your GNOME version, 10 | * but it will probably look better if it does. Remember that your GTK theme 11 | * variant must match the variant you pick here, eg. if you pick a light 12 | * variant, you must also run Firefox using the light variant by either 13 | * disabling global dark theme in GNOME Tweak Tool or running Firefox explicity 14 | * with the light theme: 15 | * $ GTK_THEME=Adwaita:light firefox 16 | * The opposite applies to the dark variant, you must either enable global dark 17 | * theme or run Firefox like this: 18 | * $ GTK_THEME=Adwaita:dark firefox 19 | */ 20 | 21 | /* GNOME 3.18 light theme */ 22 | /*@import "ui/gnome-3.18-light.css"; /**/ 23 | /* GNOME 3.18 dark theme */ 24 | /*@import "ui/gnome-3.18-dark.css"; /**/ 25 | /* GNOME 3.26 light theme */ 26 | /*@import "ui/gnome-3.26-light.css"; /**/ 27 | /* GNOME 3.26 dark theme */ 28 | /*@import "ui/gnome-3.26-dark.css"; /**/ 29 | 30 | /******************************************************************************* 31 | /* CSD elementary OS fixes 32 | * (window controls: close on the left, maximize on the right) */ 33 | /*@import "ui/csd-elementary.css"; /**/ 34 | 35 | /******************************************************************************* 36 | * Other features (optional) 37 | */ 38 | 39 | /* Hide the tab bar when only one tab is open 40 | * Warning: This also hides the private browsing indicator in private windows. 41 | * If you are using it, you might wanna enable the next feature too. Also you 42 | * should move the new tab button somewhere else for this to work, because by 43 | * default it is on the tab bar too. */ 44 | /*@import "ui/hide-single-tab.css"; /**/ 45 | 46 | /* Limit the URL bar's autocompletion popup's width to the URL bar's width */ 47 | /*@import "ui/matching-autocomplete-width.css"; /**/ 48 | 49 | /* Use GNOME stack icons */ 50 | /*@import "ui/gnome-icons.css"; /**/ 51 | 52 | /* Make all tab icons look kinda like symbolic icons */ 53 | /*@import "ui/symbolic-tab-icons.css"; /**/ 54 | 55 | /* Import a custom stylesheet 56 | * Everything you add in your customChrome.css file (it doesn't exist by 57 | * default) will be included here and preserved between updates, so you can move 58 | * your configuration to that file if you don't like setting it up after every 59 | * update. You can also apply your own custom styles in that file. */ 60 | @import "customChrome.css"; /**/ 61 | -------------------------------------------------------------------------------- /userContent.css: -------------------------------------------------------------------------------- 1 | /* 2 | * In this file you can enable styles which apply to web pages' content. 3 | * To enable a specific feature, uncomment its @import line by removing "/*" at 4 | * the beginning of the line. To disable it, put the "/*" back. 5 | */ 6 | 7 | /* Firefox' internal pages 8 | * Applies to all about: pages (settings, addons, new tab, etc). */ 9 | /*@import "pages/about-light.css"; /**/ 10 | /*@import "pages/about-dark.css"; /**/ 11 | 12 | /* Firefox' source viewer 13 | * Applies to all view-source: pages. */ 14 | /*@import "pages/view-source-dark.css"; /**/ 15 | 16 | /* Import a custom stylesheet 17 | * Everything you add in your customContent.css file (it doesn't exist by 18 | * default) will be included here and preserved between updates, so you can move 19 | * your configuration to that file if you don't like setting it up after every 20 | * update. You can also apply your own custom styles in that file. */ 21 | @import "customContent.css"; /**/ 22 | --------------------------------------------------------------------------------