├── .github └── ISSUE_TEMPLATE │ └── bug_report.md ├── .gitignore ├── LICENSE ├── README.md ├── chrome ├── findbar │ └── findbar.css ├── global │ ├── circle.svg │ ├── global.css │ └── variables.css ├── icons │ ├── addons.svg │ ├── arrow-back-1x.svg │ ├── arrow-back-2x.svg │ ├── audio-muted.svg │ ├── audio.svg │ ├── bookmark.svg │ ├── bug.svg │ ├── close.svg │ ├── copy.svg │ ├── cut.svg │ ├── developer.svg │ ├── email.svg │ ├── folder.svg │ ├── forget.svg │ ├── globe.svg │ ├── history.svg │ ├── home-1x.svg │ ├── home-2x.svg │ ├── hyperlink.svg │ ├── icons.css │ ├── incognito.svg │ ├── key.svg │ ├── library-1x.svg │ ├── library-2x.svg │ ├── media-blocked.svg │ ├── menu-update.svg │ ├── menu.svg │ ├── new-tab.svg │ ├── paste.svg │ ├── profile-inactive.svg │ ├── profile.svg │ ├── refresh-1x.svg │ ├── refresh-2x.svg │ ├── screenshot.svg │ ├── search.svg │ ├── search_dark.svg │ ├── settings.svg │ ├── share.svg │ ├── star-1x.svg │ ├── star-2x.svg │ ├── stop-1x.svg │ ├── stop-2x.svg │ ├── sync.svg │ └── tracking-protection.svg ├── navbar │ ├── connection-1x.svg │ ├── connection-2x.svg │ ├── connection-warning-1x.svg │ ├── connection-warning-2x.svg │ ├── identity-icons-brand.svg │ ├── info-1x.svg │ ├── info-2x.svg │ ├── naughty-shield-1x.svg │ ├── naughty-shield-2x.svg │ └── navbar.css ├── personalbar │ └── personalbar.css ├── popup │ ├── checkmark-18dp.svg │ ├── menu-right-1x.svg │ ├── menu-right-2x.svg │ ├── popup.css │ └── urlbar-results.css ├── tabbar │ ├── close-tab.svg │ ├── spinner-busy.svg │ ├── spinner-progress.svg │ └── tabbar.css ├── urlbar │ ├── connection-1x.svg │ ├── connection-2x.svg │ ├── connection-warning-1x.svg │ ├── connection-warning-2x.svg │ ├── go.svg │ ├── identity-icons-brand.svg │ ├── info-1x.svg │ ├── info-2x.svg │ ├── naughty-shield-1x.svg │ ├── naughty-shield-2x.svg │ └── urlbar.css └── userChrome.css └── user.js /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve the theme 4 | title: "[Feature/element] broken when [doing something]" 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Sanity checks (must complete)** 11 | - [ ] I have read and followed the installation instructions in the README 12 | - [ ] I have not modified the userChrome.css file 13 | - [ ] I have tested the latest release for my Firefox version, or commit on master/beta branch (beta is for Firefox Beta only) 14 | 15 | **Describe the bug** 16 | A clear and concise description of what the bug is. 17 | 18 | **To Reproduce** 19 | Steps to reproduce the behavior: 20 | 1. Enable '...' 21 | 2. Go to '....' 22 | 3. Click on '....' 23 | 4. See issue 24 | 25 | **Screenshots** 26 | Add screenshots to help explain your problem. 27 | 28 | **System info** 29 | - OS: [e.g. Windows 10] 30 | - Firefox version: [e.g. 75] 31 | 32 | **Additional context** 33 | Add any other context about the problem here. 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # macOS 2 | # General 3 | .DS_Store 4 | .AppleDouble 5 | .LSOverride 6 | 7 | # Icon must end with two \r 8 | Icon 9 | 10 | 11 | # Thumbnails 12 | ._* 13 | 14 | # Files that might appear in the root of a volume 15 | .DocumentRevisions-V100 16 | .fseventsd 17 | .Spotlight-V100 18 | .TemporaryItems 19 | .Trashes 20 | .VolumeIcon.icns 21 | .com.apple.timemachine.donotpresent 22 | 23 | # Directories potentially created on remote AFP share 24 | .AppleDB 25 | .AppleDesktop 26 | Network Trash Folder 27 | Temporary Items 28 | .apdisk 29 | 30 | # Windows 31 | # Windows thumbnail cache files 32 | Thumbs.db 33 | ehthumbs.db 34 | ehthumbs_vista.db 35 | 36 | # Dump file 37 | *.stackdump 38 | 39 | # Folder config file 40 | [Dd]esktop.ini 41 | 42 | # Recycle Bin used on file shares 43 | $RECYCLE.BIN/ 44 | 45 | # Windows Installer files 46 | *.cab 47 | *.msi 48 | *.msix 49 | *.msm 50 | *.msp 51 | 52 | # Windows shortcuts 53 | *.lnk 54 | 55 | # Linux 56 | *~ 57 | 58 | # temporary files which can be created if a process still has a handle open of a deleted file 59 | .fuse_hidden* 60 | 61 | # KDE directory preferences 62 | .directory 63 | 64 | # Linux trash folder which might appear on any partition or disk 65 | .Trash-* 66 | 67 | # .nfs files are created when an open file is removed but is still being accessed 68 | .nfs* 69 | 70 | # JetBrains 71 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm 72 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 73 | 74 | # User-specific stuff 75 | .idea/**/workspace.xml 76 | .idea/**/tasks.xml 77 | .idea/**/usage.statistics.xml 78 | .idea/**/dictionaries 79 | .idea/**/shelf 80 | 81 | # Generated files 82 | .idea/**/contentModel.xml 83 | 84 | # Sensitive or high-churn files 85 | .idea/**/dataSources/ 86 | .idea/**/dataSources.ids 87 | .idea/**/dataSources.local.xml 88 | .idea/**/sqlDataSources.xml 89 | .idea/**/dynamic.xml 90 | .idea/**/uiDesigner.xml 91 | .idea/**/dbnavigator.xml 92 | 93 | # Gradle 94 | .idea/**/gradle.xml 95 | .idea/**/libraries 96 | 97 | # Gradle and Maven with auto-import 98 | # When using Gradle or Maven with auto-import, you should exclude module files, 99 | # since they will be recreated, and may cause churn. Uncomment if using 100 | # auto-import. 101 | # .idea/modules.xml 102 | # .idea/*.iml 103 | # .idea/modules 104 | 105 | # CMake 106 | cmake-build-*/ 107 | 108 | # Mongo Explorer plugin 109 | .idea/**/mongoSettings.xml 110 | 111 | # File-based project format 112 | *.iws 113 | 114 | # IntelliJ 115 | out/ 116 | 117 | # mpeltonen/sbt-idea plugin 118 | .idea_modules/ 119 | 120 | # JIRA plugin 121 | atlassian-ide-plugin.xml 122 | 123 | # Cursive Clojure plugin 124 | .idea/replstate.xml 125 | 126 | # Crashlytics plugin (for Android Studio and IntelliJ) 127 | com_crashlytics_export_strings.xml 128 | crashlytics.properties 129 | crashlytics-build.properties 130 | fabric.properties 131 | 132 | # Editor-based Rest Client 133 | .idea/httpRequests 134 | 135 | # VSCode 136 | .vscode/* 137 | !.vscode/settings.json 138 | !.vscode/tasks.json 139 | !.vscode/launch.json 140 | !.vscode/extensions.json -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 muckSponge 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MaterialFox 2 | *A Material Design-inspired userChrome.css theme for Firefox* 3 | 4 | ![Preview](https://user-images.githubusercontent.com/5405629/45172944-21d91900-b24a-11e8-8bc5-03814121b0de.png) 5 | This theme is powered by blood, sweat, and coffee. If you like it, please consider helping out to support its continued development. 6 | 7 | [![Buy me a coffee](https://svgshare.com/i/8Yd.svg)](https://www.buymeacoffee.com/n4ho5QX2l) 8 | 9 | ## What this does 10 | Inspired by Google's Material Design and their latest Google Chrome UI, this theme turns your Firefox into a Material-styled web browser. The aim was to style the browser as closely as possible to Google Chrome, where practical. 11 | 12 | This is a userChrome.css theme, which means you must manually add it to your Firefox profile. The theme overrides certain browser styles. Currently, only the main UI is affected (settings pages, etc. are not). More elements of the UI may be styled in the future but a broader scope becomes harder to maintain as Mozilla updates their browser code so some UI styles may be culled or redone if they become unmaintainable. 13 | 14 | ## What version do I use? 15 | Check the [releases](https://github.com/muckSponge/MaterialFox/releases) section. Each release version will match the compatible Firefox version. For example, if you're using Firefox 88, try a v88.x release. If there's no matching release and you're not using an old version of Firefox, go for the latest one. If you're using a beta version of Firefox, you might want to try the master branch, which will have the latest bug fixes. 16 | 17 | ## Installation 18 | 1. Copy the chrome folder and user.js file into your Firefox profile directory. To find your profile directory, go to about:support or about:profiles. 19 | 2. See [Recommended instructions](#recommended-instructions) if you'd prefer a more Chrome-like experience. 20 | 3. Restart Firefox. 21 | 22 | ### Recommended instructions 23 | Add space above tab bar: 24 | * Right click on toolbar -> Customize. 25 | * Check Drag Space checkbox. 26 | 27 | Replicate Chrome behaviour for clipped tabs: 28 | * [about:config] Set ```browser.tabs.tabClipWidth``` to ```83``` (default is ```140```). 29 | 30 | Replicate Chrome's "Not Secure" text on HTTP: 31 | * [about:config] Set ```security.insecure_connection_text.enabled``` to ```true```. 32 | 33 | ## Please note 34 | * Linux is no longer officially supported but you can give it a try – if you'd like to work on it feel free to make a PR. 35 | * Some customisation settings may no longer work (such as compact/touch density). 36 | * Some custom themes may clash with the address bar. 37 | * Some themes using transparency might not work. 38 | -------------------------------------------------------------------------------- /chrome/findbar/findbar.css: -------------------------------------------------------------------------------- 1 | .findbar-container 2 | { 3 | overflow: visible !important; 4 | } 5 | 6 | .findbar-textbox 7 | { 8 | background-color: transparent !important; 9 | background-repeat: no-repeat !important; 10 | background-position: 5px center !important; 11 | fill: currentColor !important; 12 | fill-opacity: 1 !important; 13 | border: 0 !important; 14 | box-shadow: none !important; 15 | margin-inline-start: 2px !important; 16 | padding-inline-start: 28px !important; 17 | outline: none !important; 18 | } 19 | 20 | hbox[anonid="findbar-textbox-wrapper"] 21 | { 22 | background-color: var(--toolbar-field-background-color) !important; 23 | border-radius: 16px !important; 24 | position: relative !important; 25 | display: flex !important; 26 | padding: 2px !important; 27 | height: 28px !important; 28 | transition: background-color .1s var(--ease-basic) !important; 29 | } 30 | 31 | hbox[anonid="findbar-textbox-wrapper"]:hover 32 | { 33 | background-color: var(--toolbar-field-hover-background-color) !important; 34 | } 35 | 36 | hbox[anonid="findbar-textbox-wrapper"]:focus-within 37 | { 38 | background-color: var(--toolbar-field-focus-background-color) !important; 39 | /* won't work in a var... */ 40 | border: 2px solid -moz-accent-color !important; 41 | margin: -1px !important; 42 | padding: 1px !important; 43 | height: 30px !important; 44 | } 45 | 46 | hbox[anonid="findbar-textbox-wrapper"] toolbarbutton 47 | { 48 | border-radius: 99px !important; 49 | border: 0 !important; 50 | width: 24px !important; 51 | height: 24px !important; 52 | padding: 0 !important; 53 | display: flex !important; 54 | background: 0 !important; 55 | transition: background-color .2s var(--ease-basic) !important; 56 | margin: 0 !important; 57 | box-shadow: none !important; 58 | } 59 | 60 | hbox[anonid="findbar-textbox-wrapper"] toolbarbutton[disabled] 61 | { 62 | display: none !important; 63 | } 64 | 65 | hbox[anonid="findbar-textbox-wrapper"] toolbarbutton .toolbarbutton-text 66 | { 67 | visibility: collapse !important; 68 | } 69 | 70 | hbox[anonid="findbar-textbox-wrapper"] toolbarbutton:not([disabled]):hover 71 | { 72 | background-color: var(--toolbarbutton-hover-background) !important; 73 | } 74 | 75 | hbox[anonid="findbar-textbox-wrapper"] toolbarbutton:not([disabled]):hover:active 76 | { 77 | background-color: var(--toolbarbutton-active-background) !important; 78 | transition-duration: 0 !important; 79 | } 80 | -------------------------------------------------------------------------------- /chrome/global/circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/global/global.css: -------------------------------------------------------------------------------- 1 | @media (-moz-windows-compositor) 2 | { 3 | @media not (-moz-os-version: windows-win7) 4 | { 5 | @media not (-moz-os-version: windows-win8) 6 | { 7 | @media (-moz-windows-default-theme) 8 | { 9 | :root[tabsintitlebar] #TabsToolbar .titlebar-button 10 | { 11 | transform: translateY(-8px) !important; 12 | } 13 | 14 | @media (-moz-windows-accent-color-in-titlebar: 0) 15 | { 16 | :root[tabsintitlebar]:not(:-moz-lwtheme):not([privatebrowsingmode=temporary]) 17 | { 18 | background-color: #dee1e6 !important; 19 | color: #3c4043 !important; 20 | } 21 | 22 | :root[tabsintitlebar]:not(:-moz-lwtheme):not([privatebrowsingmode=temporary]):-moz-window-inactive 23 | { 24 | background-color: #e7eaed !important; 25 | color: #666a6d !important; 26 | } 27 | } 28 | } 29 | } 30 | } 31 | } 32 | 33 | #navigator-toolbox :-moz-any(toolbar, #nav-bar-customization-target):not(#toolbar-menubar) 34 | { 35 | -moz-box-align: center !important; 36 | } 37 | 38 | #navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)), 39 | /* no ::part workaround - may have side effects */ 40 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton), 41 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) 42 | { 43 | border-radius: 99px !important; 44 | transition-property: 45 | background-color, 46 | background-size, 47 | fill-opacity !important; 48 | transition-duration: .3s !important; 49 | transition-timing-function: 50 | var(--ease-basic), 51 | var(--ease-out), 52 | var(--ease-basic) !important; 53 | 54 | fill: currentColor !important; 55 | fill-opacity: 0 !important; 56 | 57 | background-image: 58 | url(circle.svg), 59 | url(circle.svg) !important; 60 | background-size: 25% !important; 61 | background-repeat: no-repeat !important; 62 | background-position: center !important; 63 | background-color: transparent !important; 64 | } 65 | 66 | #navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)), 67 | /* no ::part workaround - may have side effects */ 68 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton), 69 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) 70 | { 71 | font-size: 12px !important; 72 | padding: 0 !important; 73 | margin: 0 !important; 74 | border: 2px solid transparent !important; 75 | background-clip: padding-box !important; 76 | } 77 | 78 | #navigator-toolbox :-moz-any(.toolbarbutton-1, .scrollbutton-up, .scrollbutton-down), 79 | /* no ::part workaround - may have side effects */ 80 | .#scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton), 81 | .#scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) 82 | { 83 | max-height: 32px !important; 84 | height: 32px !important; 85 | min-height: 32px !important; 86 | } 87 | 88 | #navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton))[disabled], 89 | /* no ::part workaround - may have side effects */ 90 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton)[disabled], 91 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton)[disabled] 92 | { 93 | opacity: .42 !important; 94 | } 95 | 96 | #navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)):hover:not([disabled]), 97 | #navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)):-moz-any(:hover:active, [checked], [open]):not([disabled]), 98 | /* no ::part workaround - may have side effects */ 99 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton):hover:not([disabled]), 100 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton):hover:not([disabled]) 101 | { 102 | background-color: var(--toolbarbutton-hover-background) !important; 103 | } 104 | 105 | #navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)):-moz-any(:hover:active, [checked], [open]):not([disabled]), 106 | /* no ::part workaround - may have side effects */ 107 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton):hover:active:not([disabled]), 108 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton):hover:active:not([disabled]) 109 | { 110 | fill-opacity: .04 !important; 111 | background-size: 100% !important; 112 | } 113 | 114 | #navigator-toolbox :-moz-any(.toolbarbutton-icon, .toolbarbutton-badge-stack), 115 | /* no ::part workaround - may have side effects */ 116 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton) > .toolbarbutton-icon, 117 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) > .toolbarbutton-icon 118 | { 119 | fill-opacity: 1 !important; 120 | border: 0 !important; 121 | box-shadow: none !important; 122 | } 123 | 124 | #navigator-toolbox .toolbarbutton-1 > :-moz-any(.toolbarbutton-icon, .toolbarbutton-badge-stack) 125 | { 126 | width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; 127 | height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; 128 | } 129 | 130 | #navigator-toolbox > #PersonalToolbar .toolbarbutton-1 > .toolbarbutton-icon, 131 | #navigator-toolbox .toolbarbutton-1 > :-moz-any(.toolbarbutton-icon, .toolbarbutton-badge-stack), 132 | /* no ::part workaround - may have side effects */ 133 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton) > .toolbarbutton-icon, 134 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) > .toolbarbutton-icon 135 | { 136 | padding: 6px !important; 137 | background: 0 !important; 138 | width: auto !important; 139 | height: auto !important; 140 | } 141 | 142 | /* 143 | hack: fix customization screen popping bug when changing ui density 144 | icon size is enforced and it doesn't like it when the normal density 145 | nav-bar height is less than 38px (it's 36px due to smaller back icon) 146 | */ 147 | :root:not([uidensity=compact]) #customization-content-container 148 | { 149 | padding-top: 1px !important; 150 | } 151 | 152 | :root:not([uidensity=compact]) :-moz-any(#customization-palette-container, #customization-panel-container) 153 | { 154 | margin-top: -1px !important; 155 | } 156 | 157 | .menu-iconic, 158 | .menuitem-iconic 159 | { 160 | fill: currentColor !important; 161 | } 162 | 163 | /* legacy */ 164 | #navigator-toolbox 165 | { 166 | border-bottom: 1px solid var(--chrome-content-separator-color, var(--toolbox-border-bottom-color)) !important; 167 | } 168 | 169 | /* legacy */ 170 | #navigator-toolbox::after 171 | { 172 | display: none !important; 173 | } 174 | 175 | .pointerlockfswarning 176 | { 177 | display: flex !important; 178 | border-radius: 4px !important; 179 | padding: 6px !important; 180 | background: #333 !important; 181 | border: 0 !important; 182 | font-size: 14px !important; 183 | box-shadow: 184 | 0 3px 5px -1px rgba(0,0,0,.2), 185 | 0 6px 10px 0 rgba(0,0,0,.14), 186 | 0 1px 18px 0 rgba(0,0,0,.12) !important; 187 | color: hsla(0,0%,100%,.87) !important; 188 | transition-timing-function: var(--ease-out), linear !important; 189 | transition-property: transform, top !important; 190 | } 191 | 192 | #fullscreen-warning 193 | { 194 | flex-direction: column !important; 195 | min-width: 344px !important; 196 | } 197 | 198 | .pointerlockfswarning[hidden] 199 | { 200 | visibility: hidden !important; 201 | } 202 | 203 | /* hack to keep it in same place as [ontop] */ 204 | /* probably doesn't work for single-line */ 205 | .pointerlockfswarning:not([hidden]):not([ontop]) 206 | { 207 | top: -32px !important; 208 | } 209 | 210 | .pointerlockfswarning[ontop] 211 | { 212 | top: 28px !important; 213 | } 214 | 215 | .pointerlockfswarning::before 216 | { 217 | display: none !important; 218 | } 219 | 220 | .pointerlockfswarning-domain-text 221 | { 222 | margin-block: 8px 18px !important; 223 | margin-inline: 10px !important; 224 | font-size: unset !important; 225 | font-weight: unset !important; 226 | align-self: start !important; 227 | } 228 | 229 | .pointerlockfswarning-domain 230 | { 231 | font-weight: unset !important; 232 | } 233 | 234 | #fullscreen-exit-button 235 | { 236 | -moz-appearance: none !important; 237 | border: 0 !important; 238 | height: 32px !important; 239 | display: flex !important; 240 | align-items: center !important; 241 | margin-inline: 8px 0 !important; 242 | text-transform: uppercase !important; 243 | font-weight: 500 !important; 244 | letter-spacing: .0892857143em !important; 245 | background: 0 !important; 246 | position: relative !important; 247 | color: var(--toolbarbutton-icon-fill-attention) !important; 248 | align-self: end !important; 249 | font-family: Roboto, inherit !important; 250 | } 251 | 252 | #fullscreen-exit-button::before 253 | { 254 | content: "" !important; 255 | display: block !important; 256 | z-index: -1 !important; 257 | position: absolute !important; 258 | left: 0 !important; 259 | right: 0 !important; 260 | top: 0 !important; 261 | bottom: 0 !important; 262 | border-radius: 4px !important; 263 | background: currentColor !important; 264 | opacity: 0 !important; 265 | transition: opacity .3s var(--ease-basic) !important; 266 | } 267 | 268 | #fullscreen-exit-button:hover::before 269 | { 270 | opacity: .12 !important; 271 | } 272 | 273 | #fullscreen-exit-button:hover:active::before 274 | { 275 | opacity: .24 !important; 276 | transition-duration: .1s !important; 277 | } 278 | 279 | /* note: use Firefox account button instead */ 280 | #TabsToolbar .private-browsing-indicator 281 | { 282 | display: none !important; 283 | } 284 | 285 | /* high DPI adjustments */ 286 | @media (min--moz-device-pixel-ratio: 2) 287 | { 288 | #navigator-toolbox 289 | { 290 | border-bottom-width: .5px !important; 291 | padding-bottom: .5px !important; 292 | box-shadow: inset 0 -.5px var(--toolbar-bgcolor) !important; 293 | } 294 | } -------------------------------------------------------------------------------- /chrome/global/variables.css: -------------------------------------------------------------------------------- 1 | /* light mode */ 2 | :root:not([style]), 3 | :root[style*="--lwt-accent-color:rgb(227, 228, 230);"], 4 | :root[style*="--lwt-accent-color:white;"] 5 | { 6 | /* accentcolor */ 7 | --lwt-accent-color: #dee1e6 !important; 8 | 9 | /* textcolor */ 10 | --lwt-text-color: #606368 !important; 11 | 12 | /* toolbar */ 13 | --toolbar-bgcolor: #fff !important; 14 | 15 | /* toolbar_text */ 16 | --toolbar-color: #606368 !important; 17 | 18 | /* toolbar_bottom_separator */ 19 | --toolbox-border-bottom-color: #b3b1b3 !important; /* legacy */ 20 | --chrome-content-separator-color: #b3b1b3 !important; 21 | 22 | /* icons */ 23 | --lwt-toolbarbutton-icon-fill: #606368 !important; 24 | 25 | /* icons_attention */ 26 | --lwt-toolbarbutton-icon-fill-attention: #5086ec !important; 27 | 28 | /* button_background_hover */ 29 | --lwt-toolbarbutton-hover-background: rgba(0, 0, 0, .07) !important; 30 | 31 | /* button_background_active */ 32 | --lwt-toolbarbutton-active-background: rgba(0, 0, 0, .11) !important; 33 | 34 | --lwt-toolbar-field-color: #202124 !important; 35 | 36 | /* popup_highlight */ 37 | --autocomplete-popup-highlight-background: #f2f2f2 !important; 38 | 39 | /* popup_highlight_text */ 40 | --autocomplete-popup-highlight-color: #202124 !important; 41 | 42 | --search-icon-url: url("../icons/search.svg"); 43 | } 44 | 45 | /* don't bother with sidebar in light mode */ 46 | 47 | /* dark mode */ 48 | :root[style*="--lwt-accent-color:rgb(28, 27, 34);"], 49 | :root[privatebrowsingmode=temporary] 50 | { 51 | /* accentcolor */ 52 | --lwt-accent-color: #202124 !important; 53 | 54 | /* textcolor */ 55 | --lwt-text-color: #9ba0a5 !important; 56 | 57 | /* toolbar */ 58 | --toolbar-bgcolor: #333639 !important; 59 | 60 | /* toolbar_text */ 61 | --toolbar-color: #fff !important; 62 | 63 | /* toolbar_bottom_separator */ 64 | --toolbox-border-bottom-color: #282828 !important; /* legacy */ 65 | --chrome-content-separator-color: #282828 !important; 66 | 67 | /* icons */ 68 | --lwt-toolbarbutton-icon-fill: #fff !important; 69 | 70 | /* icons_attention */ 71 | --lwt-toolbarbutton-icon-fill-attention: #5086ec !important; 72 | 73 | /* button_background_hover */ 74 | --lwt-toolbarbutton-hover-background: #434649 !important; 75 | 76 | /* button_background_active */ 77 | --lwt-toolbarbutton-active-background: #4e5153 !important; 78 | 79 | --lwt-toolbar-field-color: #fff !important; 80 | 81 | /* popup */ 82 | --arrowpanel-background: #373737 !important; 83 | 84 | /* popup_text */ 85 | --arrowpanel-color: #fff !important; 86 | --autocomplete-popup-color: #fff !important; 87 | --panel-disabled-color: hsla(0, 0%, 100%, .5) !important; 88 | 89 | /* popup_border */ 90 | --arrowpanel-border-color: #555 !important; 91 | --autocomplete-popup-border-color: #555 !important; 92 | 93 | /* popup_highlight */ 94 | --autocomplete-popup-highlight-background: #4c4f52 !important; 95 | 96 | /* popup_highlight_text */ 97 | --autocomplete-popup-highlight-color: #fff !important; 98 | --search-icon-url: url("../icons/search_dark.svg"); 99 | } 100 | 101 | :-moz-any(#sidebar-box, #sidebar)[style*="--sidebar-background-color:rgb(56, 56, 61);"] 102 | { 103 | /* sidebar */ 104 | --sidebar-background-color: #333639 !important; 105 | 106 | /* sidebar_text */ 107 | --sidebar-text-color: #f1f3ee !important; 108 | } 109 | 110 | :-moz-any(.sidebar-panel, body)[style*="--lwt-sidebar-background-color:rgb(56, 56, 61);"] 111 | { 112 | /* sidebar */ 113 | --lwt-sidebar-background-color: #333639 !important; 114 | 115 | /* sidebar_text */ 116 | --lwt-sidebar-text-color: #f1f3ee !important; 117 | } 118 | 119 | :root 120 | { 121 | --ease-in: cubic-bezier(.4, 0, 1, 1); 122 | --ease-out: cubic-bezier(0, 0, .2, 1); 123 | --ease-basic: linear; 124 | 125 | --button-size: 32px; /* is this used? */ 126 | --icon-size: 24px; /* is this used? */ 127 | 128 | --downloads-item-height: 48px !important; 129 | 130 | --toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor) !important; 131 | --toolbar-non-lwt-textcolor: var(--toolbar-color) !important; 132 | 133 | --toolbar-field-fontsize: 14px !important; 134 | } 135 | 136 | #titlebar, 137 | #tabbrowser-tabs 138 | { 139 | --tab-min-height: 34px !important; 140 | } 141 | 142 | @supports -moz-bool-pref("materialFox.reduceTabOverflow") 143 | { 144 | #tabbrowser-tabs 145 | { 146 | --tab-min-width: 32px !important; 147 | } 148 | } 149 | 150 | :root 151 | { 152 | --tab-separator-opacity: .35 !important; 153 | 154 | --toolbar-field-background-color: hsl(200, 12%, 95%) !important; 155 | --toolbar-field-hover-background-color: hsl(216, 12%, 92%) !important; 156 | --toolbar-field-focus-background-color: hsl(0, 0%, 100%) !important; 157 | } 158 | 159 | :root:-moz-any(:-moz-lwtheme-brighttext, [privatebrowsingmode=temporary]) 160 | { 161 | --toolbar-field-background-color: #202124 !important; 162 | --toolbar-field-hover-background-color: #292a2d !important; 163 | --toolbar-field-focus-background-color: #202124 !important; 164 | } 165 | 166 | :root:not(:-moz-lwtheme):not([privatebrowsingmode=temporary]) 167 | { 168 | --toolbar-bgcolor: hsl(0, 0%, 100%) !important; 169 | --toolbar-color: hsl(213, 5%, 39%) !important; 170 | --toolbox-border-bottom-color: hsl(0, 0%, 70%) !important; 171 | } 172 | 173 | @media (-moz-mac-yosemite-theme) 174 | { 175 | :root[extradragspace] 176 | { 177 | --space-above-tabbar: 8px !important; 178 | } 179 | } 180 | 181 | /* Ubuntu */ 182 | @media (-moz-gtk-csd-available) 183 | { 184 | :root:not(:-moz-lwtheme):not([privatebrowsingmode=temporary]) 185 | { 186 | --toolbar-bgcolor: -moz-dialog !important; 187 | --toolbar-color: -moz-dialogtext !important; 188 | } 189 | } 190 | 191 | :root:-moz-lwtheme-darktext, 192 | :root toolbar:not([brighttext]), 193 | .tabbrowser-tab[visuallyselected] 194 | { 195 | --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, hsla(0, 0%, 0%, .07)) !important; 196 | --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, hsla(0, 0%, 0%, .11)) !important; 197 | } 198 | 199 | :root:-moz-lwtheme-brighttext, 200 | :root toolbar[brighttext], 201 | .tabbrowser-tab[visuallyselected]:-moz-lwtheme-brighttext 202 | { 203 | --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, hsla(0, 0%, 100%, .1)) !important; 204 | --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, hsla(0, 0%, 100%, .17)) !important; 205 | } 206 | 207 | /* special case for urlbar buttons */ 208 | :-moz-any(#urlbar, #searchbar) 209 | { 210 | --toolbarbutton-hover-background: hsl(210, 5%, 85%) !important; 211 | --toolbarbutton-active-background: hsl(210, 4%, 80%) !important; 212 | } 213 | 214 | :root:-moz-any([privatebrowsingmode=temporary], :-moz-lwtheme-brighttext) :-moz-any(#urlbar, #searchbar) 215 | { 216 | --toolbarbutton-hover-background: hsl(206, 5%, 26%) !important; 217 | --toolbarbutton-active-background: hsl(210, 4%, 31%) !important; 218 | } 219 | -------------------------------------------------------------------------------- /chrome/icons/addons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/arrow-back-1x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/arrow-back-2x.svg: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /chrome/icons/audio-muted.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/audio.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/bookmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/bug.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/copy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/cut.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/developer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/email.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/folder.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/forget.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/globe.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/history.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/home-1x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/home-2x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/hyperlink.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /chrome/icons/icons.css: -------------------------------------------------------------------------------- 1 | .toolbarbutton-1:-moz-any(#back-button, #forward-button), 2 | #context-back, 3 | #context-forward, 4 | .subviewbutton-back, 5 | .identity-popup-expander 6 | { 7 | list-style-image: url(arrow-back-1x.svg) !important; 8 | } 9 | 10 | #PanelUI-menu-button 11 | { 12 | list-style-image: url(menu.svg) !important; 13 | } 14 | 15 | #PanelUI-menu-button[badge-status|="update"] 16 | { 17 | list-style-image: url(menu-update.svg) !important; 18 | } 19 | 20 | #reload-button, 21 | #context-reload 22 | { 23 | list-style-image: url(refresh-1x.svg) !important; 24 | } 25 | 26 | #stop-button 27 | { 28 | list-style-image: url(stop-1x.svg) !important; 29 | } 30 | 31 | .toolbarbutton-1#forward-button .toolbarbutton-icon, 32 | #context-forward .menu-iconic-icon 33 | { 34 | transform: scaleX(-1) !important; 35 | } 36 | 37 | #home-button 38 | { 39 | list-style-image: url(home-1x.svg) !important; 40 | } 41 | 42 | #star-button, 43 | #context-bookmarkpage, 44 | #pageAction-panel-bookmark, 45 | #panelMenuBookmarkThisPage 46 | { 47 | list-style-image: url(star-1x.svg) !important; 48 | fill-opacity: 0 !important; 49 | } 50 | 51 | #star-button[starred], 52 | #tracking-protection-icon-box[active] 53 | { 54 | fill: var(--toolbarbutton-icon-fill-attention) !important; 55 | } 56 | 57 | #star-button[starred], 58 | #context-bookmarkpage[starred], 59 | #panelMenuBookmarkThisPage 60 | { 61 | fill-opacity: 1 !important; 62 | } 63 | 64 | #bookmarks-menu-button, 65 | #appMenu-library-bookmarks-button, 66 | #panelMenu_toggleBookmarksMenu 67 | { 68 | list-style-image: url(bookmark.svg) !important; 69 | } 70 | 71 | #library-button, 72 | #appMenu-library-button 73 | { 74 | list-style-image: url(library-1x.svg) !important; 75 | } 76 | 77 | #preferences-button, 78 | #appMenu-preferences-button, 79 | .identity-popup-preferences-button, 80 | #urlbar-anon-search-settings-compact .button-icon 81 | { 82 | list-style-image: url(settings.svg) !important; 83 | } 84 | 85 | #history-panelmenu, 86 | #appMenu-library-history-button 87 | { 88 | list-style-image: url(history.svg) !important; 89 | } 90 | 91 | #appMenu-logins-button, 92 | richlistitem[originaltype="loginWithOrigin"] .ac-site-icon, 93 | richlistitem[originaltype="loginsFooter"] .ac-site-icon 94 | { 95 | list-style-image: url(key.svg) !important; 96 | } 97 | 98 | .subviewbutton[type="highlight-history"]::after 99 | { 100 | content: url(history.svg) !important; 101 | } 102 | 103 | #panic-button 104 | { 105 | list-style-image: url(forget.svg) !important; 106 | } 107 | 108 | #developer-button 109 | { 110 | list-style-image: url(developer.svg) !important; 111 | } 112 | 113 | #add-ons-button, 114 | #appMenu-addons-button 115 | { 116 | list-style-image: url(addons.svg) !important; 117 | } 118 | 119 | #email-link-button, 120 | #pageAction-panel-emailLink 121 | { 122 | list-style-image: url(email.svg) !important; 123 | } 124 | 125 | #pageAction-panel-shareURL 126 | { 127 | list-style-image: url(share.svg) !important; 128 | } 129 | 130 | #pageAction-panel-copyURL 131 | { 132 | list-style-image: url(hyperlink.svg) !important; 133 | } 134 | 135 | #pageAction-panel-webcompat-reporter_mozilla_org 136 | { 137 | list-style-image: url(bug.svg) !important; 138 | } 139 | 140 | #pageAction-panel-webcompat-reporter_mozilla_org > .toolbarbutton-icon 141 | { 142 | list-style-image: inherit !important; 143 | } 144 | 145 | #screenshots_mozilla_org-menuitem-_create-screenshot .menu-iconic-left 146 | { 147 | background-image: url(screenshot.svg) !important; 148 | background-position: 4px center !important; 149 | background-repeat: no-repeat !important; 150 | } 151 | 152 | #screenshots_mozilla_org-menuitem-_create-screenshot .menu-iconic-icon 153 | { 154 | visibility: hidden !important; 155 | } 156 | 157 | #tabs-newtab-button, 158 | #new-tab-button 159 | { 160 | list-style-image: url(new-tab.svg) !important; 161 | } 162 | 163 | #fxa-avatar-image 164 | { 165 | /* icon should be 20px, but we don't want to affect button size */ 166 | transform: scale(1.25) !important; 167 | border-radius: 50% !important; 168 | } 169 | 170 | :root:not([fxastatus=signedin]) #fxa-avatar-image 171 | { 172 | list-style-image: url(profile-inactive.svg) !important; 173 | } 174 | 175 | :root[fxastatus=signedin]:not([style*="--avatar-image-url"]) #fxa-avatar-image 176 | { 177 | list-style-image: url(profile.svg) !important; 178 | } 179 | 180 | :root[privatebrowsingmode] #fxa-avatar-image 181 | { 182 | list-style-image: url(incognito.svg) !important; 183 | } 184 | 185 | #tracking-protection-icon 186 | { 187 | list-style-image: url(tracking-protection.svg) !important; 188 | } 189 | 190 | #pageActionButton 191 | { 192 | list-style-image: url(menu.svg) !important; 193 | } 194 | 195 | #urlbar[pageproxystate="invalid"] #identity-icon, 196 | .searchbar-search-icon, 197 | #PopupAutoCompleteRichResult .ac-type-icon[type="keyword"], 198 | #PopupAutoCompleteRichResult .ac-site-icon[type="searchengine"], 199 | #appMenu-find-button, 200 | #panelMenu_searchBookmarks 201 | { 202 | list-style-image: url(search.svg) !important; 203 | } 204 | 205 | .findbar-textbox 206 | { 207 | background-image: url(search.svg) !important; 208 | } 209 | 210 | #appMenu-cut-button 211 | { 212 | list-style-image: url(cut.svg) !important; 213 | } 214 | 215 | #appMenu-copy-button 216 | { 217 | list-style-image: url(copy.svg) !important; 218 | } 219 | 220 | #appMenu-paste-button 221 | { 222 | list-style-image: url(paste.svg) !important; 223 | } 224 | 225 | #appMenu-fxa-label, 226 | #PanelUI-fxa-menu-syncnow-button, 227 | #appMenu-fxa-icon, 228 | #PanelUI-remotetabs-syncnow 229 | { 230 | list-style-image: url(sync.svg) !important; 231 | } 232 | 233 | .tab-icon-image:not([src]) 234 | { 235 | list-style-image: url(globe.svg) !important; 236 | } 237 | 238 | .tab-icon-image[src="chrome://browser/skin/settings.svg"] 239 | { 240 | display: none !important; 241 | } 242 | 243 | .tab-icon-image[src="chrome://browser/skin/settings.svg"] ~ .tab-icon-overlay 244 | { 245 | display: -moz-box !important; 246 | margin: 0 !important; 247 | list-style-image: url(settings.svg) !important; 248 | -moz-context-properties: fill, fill-opacity !important; 249 | fill: currentColor !important; 250 | } 251 | 252 | .tab-icon-overlay[soundplaying], 253 | .tab-icon-sound 254 | { 255 | list-style-image: url(audio.svg) !important; 256 | } 257 | 258 | .tab-icon-overlay[muted], 259 | .tab-icon-sound[muted] 260 | { 261 | list-style-image: url(audio-muted.svg) !important; 262 | } 263 | 264 | .tab-icon-overlay[activemedia-blocked], 265 | .tab-icon-sound[activemedia-blocked] 266 | { 267 | list-style-image: url(media-blocked.svg) !important; 268 | } 269 | 270 | .downloadIconShow .button-icon 271 | { 272 | list-style-image: url(folder.svg) !important; 273 | } 274 | 275 | .panel-banner-item[notificationid^="update"] 276 | { 277 | list-style-image: url(menu-update.svg) !important; 278 | -moz-context-properties: fill, fill-opacity !important; 279 | fill: currentColor !important; 280 | } 281 | 282 | /* high DPI adjustments */ 283 | @media (min--moz-device-pixel-ratio: 2) 284 | { 285 | .toolbarbutton-1:-moz-any(#back-button, #forward-button), 286 | #context-back, 287 | #context-forward, 288 | .subviewbutton-back, 289 | .identity-popup-expander 290 | { 291 | list-style-image: url(arrow-back-2x.svg) !important; 292 | } 293 | 294 | #PanelUI-menu-button:not([badge-status|="update"]) .toolbarbutton-icon 295 | { 296 | transform: translate(-.5px, -.5px) !important; 297 | } 298 | 299 | #stop-button 300 | { 301 | list-style-image: url(stop-2x.svg) !important; 302 | } 303 | 304 | #reload-button, 305 | #context-reload 306 | { 307 | list-style-image: url(refresh-2x.svg) !important; 308 | } 309 | 310 | #home-button 311 | { 312 | list-style-image: url(home-2x.svg) !important; 313 | } 314 | 315 | #star-button, 316 | #context-bookmarkpage, 317 | #pageAction-panel-bookmark, 318 | #panelMenuBookmarkThisPage 319 | { 320 | list-style-image: url(star-2x.svg) !important; 321 | } 322 | 323 | #bookmarks-menu-button .toolbarbutton-icon 324 | { 325 | transform: translateX(.5px) !important; 326 | } 327 | 328 | #library-button 329 | { 330 | list-style-image: url(library-2x.svg) !important; 331 | } 332 | } -------------------------------------------------------------------------------- /chrome/icons/incognito.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chrome/icons/key.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/library-1x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/library-2x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/media-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/menu-update.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/new-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/paste.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/profile-inactive.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/profile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chrome/icons/refresh-1x.svg: -------------------------------------------------------------------------------- 1 | 6 | 11 | 16 | -------------------------------------------------------------------------------- /chrome/icons/refresh-2x.svg: -------------------------------------------------------------------------------- 1 | 6 | 11 | 16 | -------------------------------------------------------------------------------- /chrome/icons/screenshot.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/search.svg: -------------------------------------------------------------------------------- 1 | 5 | 10 | -------------------------------------------------------------------------------- /chrome/icons/search_dark.svg: -------------------------------------------------------------------------------- 1 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /chrome/icons/settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/share.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/star-1x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/star-2x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/stop-1x.svg: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /chrome/icons/stop-2x.svg: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /chrome/icons/sync.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/tracking-protection.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/navbar/connection-1x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/navbar/connection-2x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/navbar/connection-warning-1x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/navbar/connection-warning-2x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/navbar/identity-icons-brand.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/navbar/info-1x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/navbar/info-2x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/navbar/naughty-shield-1x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/navbar/naughty-shield-2x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/navbar/navbar.css: -------------------------------------------------------------------------------- 1 | #nav-bar 2 | { 3 | min-height: 36px !important; 4 | box-shadow: none !important; 5 | padding-inline: 5px 6px !important; 6 | background-color: var(--toolbar-bgcolor) !important; 7 | } 8 | 9 | #reload-button[disabled]:not(:-moz-window-inactive) > .toolbarbutton-icon 10 | { 11 | opacity: 1 !important; 12 | } 13 | 14 | /* Windows */ 15 | #PanelUI-button 16 | { 17 | border: none !important; 18 | margin: 0 !important; 19 | padding: 0 !important; 20 | } 21 | 22 | #PanelUI-menu-button[badge-status|="update"] .toolbarbutton-badge 23 | { 24 | display: none !important; 25 | } 26 | 27 | :root[privatebrowsingmode] #fxa-toolbar-menu-button 28 | { 29 | pointer-events: none !important; 30 | } 31 | 32 | /* show "Private" label for en languages only */ 33 | :root[titlemodifier="(Private Browsing)"] #fxa-toolbar-menu-button::before 34 | { 35 | content: "Private" !important; 36 | display: -moz-box !important; 37 | margin-inline-start: 12px !important; 38 | margin-inline-end: 6px !important; 39 | } 40 | 41 | #nav-bar-customization-target 42 | { 43 | overflow: visible !important; 44 | } -------------------------------------------------------------------------------- /chrome/personalbar/personalbar.css: -------------------------------------------------------------------------------- 1 | #navigator-toolbox toolbarbutton.bookmark-item:not(.subviewbutton) 2 | { 3 | padding: 6px !important; 4 | } -------------------------------------------------------------------------------- /chrome/popup/checkmark-18dp.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/popup/menu-right-1x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/popup/menu-right-2x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/popup/popup.css: -------------------------------------------------------------------------------- 1 | menupopup 2 | { 3 | appearance: none !important; 4 | background-color: var(--arrowpanel-background) !important; 5 | color: var(--arrowpanel-color) !important; 6 | -moz-context-properties: fill, fill-opacity !important; 7 | fill: currentColor !important; 8 | } 9 | 10 | menuitem, 11 | menu > menu, 12 | menupopup > menu 13 | { 14 | appearance: none !important; 15 | } 16 | 17 | menuitem[disabled=true], 18 | menu[disabled=true] 19 | { 20 | pointer-events: none !important; 21 | } 22 | 23 | .menu-right 24 | { 25 | appearance: none !important; 26 | list-style-image: url(menu-right-1x.svg) !important; 27 | } 28 | 29 | menuitem[type=radio][checked=true] 30 | { 31 | list-style-image: url(checkmark-18dp.svg) !important; 32 | } 33 | 34 | menuitem[type=radio] .menu-iconic-icon 35 | { 36 | width: 16px !important; 37 | height: 16px !important; 38 | margin-inline-start: 0 !important; 39 | } -------------------------------------------------------------------------------- /chrome/popup/urlbar-results.css: -------------------------------------------------------------------------------- 1 | .ac-type-icon 2 | { 3 | order: 9 !important; 4 | margin-inline-start: 16px !important; 5 | margin-inline-end: 0 !important; 6 | } 7 | 8 | .ac-site-icon 9 | { 10 | margin-inline-end: 16px !important; 11 | } 12 | 13 | .ac-separator 14 | { 15 | display: none !important; 16 | } 17 | 18 | .ac-title, 19 | .ac-url 20 | { 21 | flex: 1 !important; 22 | } 23 | 24 | .search-panel-one-offs 25 | { 26 | border-radius: 0 0 8px 8px !important; 27 | margin-bottom: 18px !important; 28 | } 29 | 30 | .search-one-offs 31 | { 32 | display: block !important; 33 | } 34 | 35 | #urlbarView-results 36 | { 37 | padding: 0 !important; 38 | } 39 | 40 | .urlbarView-row 41 | { 42 | padding: 0 16px !important; 43 | height: 32px !important; 44 | border-radius: 0 !important; 45 | } 46 | 47 | .urlbarView-row-inner 48 | { 49 | height: 100% !important; 50 | align-items: center !important; 51 | } 52 | 53 | .urlbarView-favicon 54 | { 55 | margin-inline-end: 16px !important; 56 | } 57 | 58 | .urlbarView-title-separator 59 | { 60 | flex: 1 !important; 61 | } 62 | 63 | .urlbarView-title-separator::before 64 | { 65 | display: none !important; 66 | } 67 | 68 | .urlbarView-type-icon 69 | { 70 | order: 1 !important; 71 | margin-inline-start: 16px !important; 72 | margin-inline-end: 0 !important; 73 | } 74 | 75 | /* .search-one-offs 76 | { 77 | padding: 4px !important; 78 | display: flex !important; 79 | flex-direction: column !important; 80 | } 81 | 82 | .search-panel-one-offs 83 | { 84 | display: flex !important; 85 | flex-direction: row !important; 86 | padding: 0 !important; 87 | } 88 | 89 | .searchbar-engine-one-off-item 90 | { 91 | height: 32px !important; 92 | border-radius: 16px !important; 93 | padding: 0 8px !important; 94 | margin: 4px !important; 95 | background-image: none !important; 96 | color: inherit !important; 97 | border: 0 !important; 98 | display: flex !important; 99 | justify-content: center !important; 100 | align-items: center !important; 101 | align-content: center !important; 102 | } 103 | 104 | .searchbar-engine-one-off-item > .button-box 105 | { 106 | width: 16px !important; 107 | max-height: 16px !important; 108 | transform: translateY(50%) !important; 109 | } 110 | 111 | .searchbar-engine-one-off-item::after 112 | { 113 | margin-inline-start: 8px !important; 114 | content: attr(tooltiptext) !important; 115 | line-height: 16px !important; 116 | transform: translateY(calc(50% - 1px)) !important; 117 | } 118 | 119 | 120 | .searchbar-engine-one-off-item.dummy 121 | { 122 | display: none !important; 123 | } */ 124 | 125 | /* 70+ */ 126 | 127 | #urlbar-container 128 | { 129 | max-height: 37px !important; 130 | } 131 | 132 | #urlbar, 133 | #searchbar 134 | { 135 | font-size: 14px !important; 136 | border-radius: 99px !important; 137 | background-color: var(--toolbar-field-background-color) !important; 138 | border: 0 !important; 139 | box-shadow: none !important; 140 | padding: 2px !important; 141 | background-clip: padding-box !important; 142 | min-height: 28px !important; 143 | transition: background-color .1s var(--ease-basic) !important; 144 | -moz-box-align: center !important; 145 | 146 | display: block !important; 147 | margin: 0 !important; 148 | } 149 | 150 | #urlbar:not(:-moz-lwtheme), 151 | #searchbar:not(:-moz-lwtheme) 152 | { 153 | color: inherit !important; 154 | } 155 | 156 | #urlbar:hover, 157 | #searchbar:hover 158 | { 159 | background-color: var(--toolbar-field-hover-background-color) !important; 160 | } 161 | 162 | #urlbar[focused], 163 | #urlbar[open], 164 | #searchbar[focused], 165 | #searchbar[open] 166 | { 167 | background-color: var(--toolbar-field-focus-background-color) !important; 168 | } 169 | 170 | #urlbar[focused], 171 | #searchbar[focused] 172 | { 173 | border: 2px solid var(--toolbar-field-focus-border-color) !important; 174 | padding: 0 !important; 175 | margin: 0 !important; 176 | } 177 | 178 | #urlbar[open], 179 | #searchbar[open] 180 | { 181 | border: 0 !important; 182 | padding: 0 !important; 183 | border-radius: 8px 8px 0 0 !important; 184 | min-height: 37px !important; 185 | margin: 0 -5px -1px !important; 186 | box-shadow: 187 | 0 5px 5px -3px rgba(0,0,0,.2), 188 | 0 8px 10px 1px rgba(0,0,0,.14), 189 | 0 3px 14px 2px rgba(0,0,0,.12) !important; 190 | position: relative !important; 191 | z-index: 99999 !important; 192 | } 193 | 194 | #urlbar-input-container 195 | { 196 | width: 100% !important; 197 | display: flex !important; 198 | align-items: center !important; 199 | } 200 | 201 | .urlbar-input-box 202 | { 203 | flex: 1 !important; 204 | } 205 | 206 | #urlbar-input 207 | { 208 | width: 100% !important; 209 | } 210 | 211 | #urlbar[open] #urlbar-input-container 212 | { 213 | height: 37px !important; 214 | } 215 | 216 | #urlbar[open] #identity-box 217 | { 218 | margin-inline-start: 8px !important; 219 | margin-inline-end: 8px !important; 220 | } 221 | 222 | .urlbarView 223 | { 224 | top: 0 !important; 225 | left: 0 !important; 226 | right: 0 !important; 227 | position: relative !important; 228 | box-shadow: none !important; 229 | background: 0 !important; 230 | border: 0 !important; 231 | background: white !important; 232 | } 233 | 234 | #urlbar[open] .urlbarView 235 | { 236 | display: block !important; 237 | width: 100% !important; 238 | } 239 | 240 | #urlbar-results 241 | { 242 | padding: 0 !important; 243 | } 244 | 245 | #urlbar-container, 246 | #searchbar-container 247 | { 248 | overflow: visible !important; 249 | padding: 0 5px !important; 250 | } 251 | 252 | .searchbar-textbox 253 | { 254 | color: inherit !important; 255 | font-size: inherit !important; 256 | min-height: auto !important; 257 | } 258 | 259 | #urlbar[pageproxystate=valid] > #identity-box:not(.no-hover) > #identity-icon 260 | { 261 | fill-opacity: 1 !important; 262 | } 263 | 264 | #identity-icon-labels 265 | { 266 | transform: translateY(-3px) !important; 267 | color: inherit !important; 268 | opacity: 1 !important; 269 | padding: 0 !important; 270 | margin-inline-start: 8px !important; 271 | display: none !important; 272 | } 273 | 274 | #identity-box, 275 | #urlbar-display-box 276 | { 277 | position: relative !important; 278 | } 279 | 280 | /* separator */ 281 | #urlbar[pageproxystate=valid]:not([open]) #identity-box:-moz-any(.notSecureText, .verifiedIdentity, .chromeUI, .extensionPage, .certUserOverridden)::after, 282 | #urlbar-display-box::after 283 | { 284 | content: "" !important; 285 | display: -moz-box !important; 286 | position: absolute !important; 287 | top: 4px !important; 288 | bottom: 4px !important; 289 | right: 0 !important; 290 | background: #9d9e9f !important; 291 | width: 1px !important; 292 | transition: opacity .2s var(--ease-basic) !important; 293 | } 294 | 295 | #urlbar[pageproxystate=valid]:not([open]) #identity-box:-moz-any(.notSecureText, .verifiedIdentity, .chromeUI, .extensionPage, .certUserOverridden), 296 | #urlbar-display-box 297 | { 298 | margin-inline-end: 8px !important; 299 | } 300 | 301 | #urlbar[pageproxystate=valid]:not([open]) #identity-box:-moz-any(.notSecureText, .verifiedIdentity, .chromeUI, .extensionPage, .certUserOverridden) #identity-icon-labels 302 | { 303 | display: -moz-box !important; 304 | } 305 | 306 | 307 | #urlbar[pageproxystate=valid] #identity-box:-moz-any(.notSecureText, .verifiedIdentity, .chromeUI, .extensionPage, .certUserOverridden):hover:not(.no-hover)::after, 308 | #urlbar[pageproxystate=valid] #identity-box:-moz-any(.notSecureText, .verifiedIdentity, .chromeUI, .extensionPage, .certUserOverridden)[open]::after 309 | { 310 | opacity: 0 !important; 311 | } 312 | 313 | #identity-box.extensionPage > #identity-icon 314 | { 315 | list-style-image: none !important; 316 | margin-inline-end: -16px !important; 317 | } 318 | 319 | /* no longer used as a connection icon */ 320 | #connection-icon 321 | { 322 | display: none !important; 323 | } 324 | 325 | #identity-box:-moz-any( 326 | .mixedActiveBlocked, 327 | .mixedDisplayContentLoadedActiveBlocked, 328 | .mixedActiveContent 329 | ) > #connection-icon 330 | { 331 | display: -moz-box !important; 332 | } 333 | 334 | #identity-box:-moz-any(.certUserOverridden, .unknownIdentity) 335 | { 336 | color: #c94031 !important; 337 | } 338 | 339 | .urlbar-input 340 | { 341 | padding: 0 !important; 342 | } 343 | 344 | .searchbar-textbox 345 | { 346 | border: 0 !important; 347 | background: 0 !important; 348 | box-shadow: none !important; 349 | margin: 0 !important; 350 | } 351 | 352 | #page-action-buttons > #pageActionSeparator, 353 | .urlbar-history-dropmarker 354 | { 355 | display: none !important; 356 | } 357 | 358 | #pageActionSeparator 359 | { 360 | height: 24px !important; 361 | } 362 | 363 | .urlbar-icon-wrapper 364 | { 365 | background: 0 !important; 366 | } 367 | 368 | .urlbar-icon, 369 | #identity-box, 370 | #tracking-protection-icon-container 371 | { 372 | min-width: 32px !important; 373 | height: 24px !important; 374 | padding: 4px 8px !important; 375 | margin: 0 !important; 376 | border: 0 !important; 377 | border-radius: 99px !important; 378 | fill-opacity: 1 !important; 379 | transition: background-color .2s var(--ease-basic) !important; 380 | background: 0 !important; 381 | background-color: transparent !important; 382 | } 383 | 384 | #identity-box #notification-popup-box 385 | { 386 | padding: 0 !important; 387 | margin: 0 !important; 388 | } 389 | 390 | #page-action-buttons 391 | { 392 | height: 24px !important; 393 | } 394 | 395 | #urlbar[open] #page-action-buttons 396 | { 397 | display: none !important; 398 | } 399 | 400 | .urlbar-icon:hover:not([disabled]), 401 | #identity-box:hover:not(.no-hover), 402 | #tracking-protection-icon-container:hover 403 | { 404 | background-color: var(--toolbarbutton-hover-background) !important; 405 | } 406 | 407 | .urlbar-icon:hover:active:not([disabled]), 408 | .urlbar-icon[open], 409 | #identity-box:hover:active:not(.no-hover), 410 | #identity-box[open]:not(.no-hover), 411 | #tracking-protection-icon-container[open] 412 | { 413 | background-color: var(--toolbarbutton-active-background) !important; 414 | transition-duration: 0 !important; 415 | } 416 | 417 | #star-button-box 418 | { 419 | -moz-box-ordinal-group: 99 !important; 420 | } 421 | 422 | #pageActionButton 423 | { 424 | -moz-box-ordinal-group: 98 !important; 425 | } 426 | 427 | #contextual-feature-recommendation 428 | { 429 | -moz-box-ordinal-group: 97 !important; 430 | width: auto !important; 431 | } 432 | 433 | .urlbar-page-action:-moz-any( 434 | #reader-mode-button, 435 | #pageActionButton, 436 | #pocket-button-box, 437 | #pageAction-urlbar-screenshots_mozilla_org, 438 | #pageAction-urlbar-sendToDevice, 439 | #pageAction-urlbar-emailLink, 440 | #pageAction-urlbar-copyURL, 441 | #pageAction-urlbar-shareURL, 442 | #pageAction-urlbar-addSearchEngine 443 | ) 444 | { 445 | transition: 446 | background-color .2s var(--ease-basic), 447 | margin .15s var(--ease-in), 448 | opacity .15s var(--ease-basic), 449 | visibility 0s .2s !important; 450 | opacity: 0 !important; 451 | visibility: hidden !important; 452 | margin-inline-start: -32px !important; 453 | } 454 | 455 | #urlbar:hover .urlbar-page-action:-moz-any( 456 | #reader-mode-button, 457 | #pageActionButton, 458 | #pocket-button-box, 459 | #pageAction-urlbar-screenshots_mozilla_org, 460 | #pageAction-urlbar-sendToDevice, 461 | #pageAction-urlbar-emailLink, 462 | #pageAction-urlbar-copyURL, 463 | #pageAction-urlbar-shareURL, 464 | #pageAction-urlbar-addSearchEngine 465 | ), 466 | .urlbar-page-action:-moz-any( 467 | #reader-mode-button, 468 | #pageActionButton, 469 | #pocket-button-box, 470 | #pageAction-urlbar-screenshots_mozilla_org, 471 | #pageAction-urlbar-sendToDevice, 472 | #pageAction-urlbar-emailLink, 473 | #pageAction-urlbar-copyURL, 474 | #pageAction-urlbar-shareURL, 475 | #pageAction-urlbar-addSearchEngine 476 | ):-moz-any(:hover, [open], [readeractive]) 477 | { 478 | transition: 479 | background-color .2s var(--ease-basic), 480 | margin .3s var(--ease-out), 481 | opacity .3s var(--ease-basic) !important; 482 | opacity: 1 !important; 483 | visibility: visible !important; 484 | margin-inline-start: 0 !important; 485 | } 486 | 487 | .urlbar-display 488 | { 489 | color: inherit !important; 490 | margin: 0 !important; 491 | } 492 | 493 | #pocket-button-box[animate] > #pocket-animatable-box 494 | { 495 | margin-inline-start: 6px !important; 496 | } 497 | 498 | #star-button-animatable-box 499 | { 500 | display: none !important; 501 | } 502 | 503 | #cfr-label-container 504 | { 505 | background: 0 !important; 506 | } 507 | 508 | #cfr-label 509 | { 510 | display: none !important; 511 | } 512 | 513 | #cfr-button 514 | { 515 | fill: currentColor !important; 516 | } 517 | 518 | #urlbar[open] .urlbar-go-button, 519 | #searchbar[open] .search-go-button 520 | { 521 | height: 32px !important; 522 | } 523 | 524 | /* icons 1x */ 525 | #urlbar 526 | { 527 | --info-icon: url(../navbar/info-1x.svg); 528 | --lock-icon: url(../navbar/connection-1x.svg); 529 | --warning-icon: url(../navbar/connection-warning-1x.svg); 530 | } 531 | 532 | /* icons 2x */ 533 | @media (min--moz-device-pixel-ratio: 2) 534 | { 535 | #urlbar 536 | { 537 | --info-icon: url(../navbar/info-2x.svg); 538 | --lock-icon: url(../navbar/connection-2x.svg); 539 | --warning-icon: url(../navbar/connection-warning-2x.svg); 540 | } 541 | } 542 | 543 | /* info (not secure) */ 544 | #identity-box[pageproxystate="valid"]:-moz-any(.notSecure, .insecureLoginForms, .mixedActiveContent) > #identity-icon 545 | { 546 | list-style-image: var(--info-icon) !important; 547 | } 548 | 549 | #identity-box[pageproxystate="valid"]:-moz-any( 550 | .certUserOverridden, 551 | .weakCipher, 552 | .unknownIdentity) > #identity-icon 553 | { 554 | list-style-image: var(--warning-icon) !important; 555 | } 556 | 557 | /* lock (secure) */ 558 | #identity-box[pageproxystate="valid"]:-moz-any(.verifiedDomain, .verifiedIdentity, .mixedActiveBlocked) > #identity-icon 559 | { 560 | list-style-image: var(--lock-icon) !important; 561 | } 562 | 563 | /* high DPI adjustments */ 564 | @media (min--moz-device-pixel-ratio: 2) 565 | { 566 | #identity-icon-labels 567 | { 568 | padding-inline-end: .5px !important; 569 | } 570 | 571 | #urlbar[pageproxystate=valid] > #identity-box:-moz-any(.unknownIdentity, .notSecure) > #identity-icon 572 | { 573 | transform: translate(.5px, .5px) !important; 574 | } 575 | 576 | #identity-icon-labels, 577 | .urlbar-input, 578 | .searchbar-textbox 579 | { 580 | transform: translateY(-.5px) !important; 581 | } 582 | } -------------------------------------------------------------------------------- /chrome/tabbar/close-tab.svg: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /chrome/tabbar/spinner-busy.svg: -------------------------------------------------------------------------------- 1 | 2 | 27 | 28 | -------------------------------------------------------------------------------- /chrome/tabbar/spinner-progress.svg: -------------------------------------------------------------------------------- 1 | 2 | 42 | 43 | -------------------------------------------------------------------------------- /chrome/tabbar/tabbar.css: -------------------------------------------------------------------------------- 1 | :-moz-any(.titlebar-placeholder, .titlebar-spacer)[type=pre-tabs] 2 | { 3 | width: 0 !important; 4 | } 5 | 6 | @media (-moz-mac-yosemite-theme) 7 | { 8 | #TabsToolbar 9 | { 10 | -moz-appearance: none !important; 11 | } 12 | 13 | :root:-moz-any([inFullscreen], [tabsintitlebar]):not([privatebrowsingmode=temporary]) #TabsToolbar:not(:-moz-lwtheme) 14 | { 15 | background-color: #dee1e5 !important; 16 | color: #606367 !important; 17 | --toolbarbutton-hover-background: #cbced2 !important; 18 | --toolbarbutton-active-background: #bec0c5 !important; 19 | } 20 | 21 | :root:-moz-any([inFullscreen], [tabsintitlebar]):not([privatebrowsingmode=temporary]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive 22 | { 23 | background-color: #e7eaed !important; 24 | } 25 | 26 | :-moz-any(.titlebar-placeholder, .titlebar-spacer)[type=pre-tabs] 27 | { 28 | width: 4px !important; 29 | } 30 | } 31 | 32 | @media (-moz-os-version: windows-win7) 33 | { 34 | :root:not([privatebrowsingmode=temporary]) #TabsToolbar:not(:-moz-lwtheme) 35 | { 36 | color: #808387 !important; 37 | --toolbarbutton-hover-background: rgba(196, 198, 204, .8) !important; 38 | --toolbarbutton-active-background: #bec0c6 !important; 39 | } 40 | 41 | :root:not([privatebrowsingmode=temporary]) #TabsToolbar toolbarbutton:not(:-moz-lwtheme):not(:hover):not([open]) 42 | { 43 | background-color: rgba(218, 220, 227, .8) !important; 44 | } 45 | 46 | :root:not([privatebrowsingmode=temporary]) .tabbrowser-tab:not([visuallyselected]):not(:-moz-lwtheme) 47 | { 48 | --tab-bgcolor: rgb(218, 220, 227) !important; 49 | --tab-opacity: .8 !important; 50 | } 51 | 52 | :root:not([privatebrowsingmode=temporary]) .tabbrowser-tab:hover:not([visuallyselected]):not(:-moz-lwtheme) 53 | { 54 | --tab-bgcolor: #e9ebef !important; 55 | } 56 | } 57 | 58 | /* < FF 65, >= FF 65 */ 59 | :-moz-any(.titlebar-placeholder, .titlebar-spacer) 60 | { 61 | border: 0 !important; 62 | display: -moz-box !important; 63 | } 64 | 65 | :-moz-any(.titlebar-placeholder, .titlebar-spacer)[type=post-tabs] 66 | { 67 | width: 48px !important; 68 | transition: width .666s cubic-bezier(.4, 0, .2, 1) !important; 69 | } 70 | 71 | @media (max-width: 700px) 72 | { 73 | :-moz-any(.titlebar-placeholder, .titlebar-spacer)[type=post-tabs] 74 | { 75 | width: 8px !important; 76 | } 77 | } 78 | 79 | /* vertically center buttons in tab bar */ 80 | #TabsToolbar toolbarbutton, 81 | #TabsToolbar .toolbar-items toolbarbutton.toolbarbutton-1, 82 | /* >= 72 */ 83 | #TabsToolbar .tabbrowser-arrowscrollbox::part(scrollbutton-up), 84 | #TabsToolbar .tabbrowser-arrowscrollbox::part(scrollbutton-down), 85 | /* no ::part workaround - may have side effects */ 86 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton), 87 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) 88 | { 89 | margin-top: calc(var(--tab-shadow-max-size) + 3px) !important; 90 | margin-bottom: 1px !important; 91 | } 92 | 93 | .tabbrowser-tab 94 | { 95 | min-height: var(--tab-min-height) !important; 96 | overflow: visible !important; 97 | font-size: 12px !important; 98 | background: 0 !important; 99 | border: 0 !important; 100 | padding: 0 !important; 101 | } 102 | 103 | .tabbrowser-tab[visuallyselected] 104 | { 105 | color: var(--toolbar-color) !important; 106 | } 107 | 108 | /* regular */ 109 | .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) 110 | { 111 | max-width: 240px !important; 112 | } 113 | 114 | /* neighbouring tabs should "pinch" together */ 115 | .tabbrowser-tab:not([last-visible-tab]) 116 | { 117 | margin-inline-end: -.5px !important; 118 | } 119 | 120 | /* special case for pinned tabs when overflowing */ 121 | #tabbrowser-tabs:not([overflow]) .tabbrowser-tab:not([first-visible-tab]), 122 | #tabbrowser-tabs[overflow] .tabbrowser-tab:not([first-visible-tab]):not([pinned]) 123 | { 124 | margin-inline-start: -.5px !important; 125 | } 126 | 127 | .tab-stack 128 | { 129 | margin-top: 4px !important; 130 | margin-bottom: -4px !important; 131 | } 132 | 133 | #tabbrowser-tabs[overflow] .tabbrowser-tab[pinned] .tab-background 134 | { 135 | margin: 0 -1px !important; 136 | } 137 | 138 | #tabbrowser-tabs[overflow] .tabbrowser-tab[pinned] .tab-stack 139 | { 140 | margin-top: 8px !important; 141 | margin-bottom: 0 !important; 142 | } 143 | 144 | .tab-content 145 | { 146 | position: relative !important; 147 | overflow: hidden !important; 148 | padding-inline-start: 12px !important; 149 | padding-inline-end: 8px !important; 150 | } 151 | 152 | .tab-content::before, 153 | .tab-content::after 154 | { 155 | content: "" !important; 156 | display: block !important; 157 | position: absolute !important; 158 | background-color: currentColor !important; 159 | width: 1px !important; 160 | height: 20px !important; 161 | transform: translateY(-10px) !important; 162 | opacity: 0 !important; 163 | transition: opacity .2s var(--ease-basic) !important; 164 | } 165 | 166 | .tab-content::before 167 | { 168 | left: 0 !important; 169 | } 170 | 171 | .tab-content::after 172 | { 173 | right: 0 !important; 174 | } 175 | 176 | .tab-throbber, 177 | .tab-throbber-fallback, 178 | .tab-icon-image, 179 | .tab-sharing-icon-overlay, 180 | .tab-icon-sound, 181 | .tab-close-button 182 | { 183 | margin-top: 0 !important; 184 | } 185 | 186 | .tabbrowser-tab::before, 187 | .tabbrowser-tab::after, 188 | .tab-line 189 | { 190 | display: none !important; 191 | } 192 | 193 | /* tab background color */ 194 | 195 | .tabbrowser-tab 196 | { 197 | --tab-opacity: 0; 198 | --tab-bgcolor: #000; 199 | --tab-transition-duration: .2s; 200 | } 201 | 202 | :-moz-any(:root[privatebrowsingmode=temporary], #TabsToolbar[brighttext]) .tabbrowser-tab 203 | { 204 | --tab-opacity: 0; 205 | --tab-bgcolor: #fff; 206 | } 207 | 208 | .tabbrowser-tab:not([selected=true]):hover, 209 | .tabbrowser-tab[multiselected]:not([selected=true]) 210 | { 211 | --tab-opacity: .1; 212 | } 213 | 214 | :-moz-any(:root[privatebrowsingmode=temporary], #TabsToolbar[brighttext]) .tabbrowser-tab:not([selected=true]):hover, 215 | :-moz-any(:root[privatebrowsingmode=temporary], #TabsToolbar[brighttext]) .tabbrowser-tab[multiselected]:not([selected=true]) 216 | { 217 | --tab-opacity: .06; 218 | } 219 | 220 | :-moz-any(#TabsToolbar) .tabbrowser-tab[visuallyselected] 221 | { 222 | --tab-bgcolor: var(--toolbar-bgcolor); 223 | --tab-opacity: 1; 224 | } 225 | 226 | .tab-background 227 | { 228 | background: var(--tab-bgcolor) !important; 229 | /* rounded top corners */ 230 | border-radius: 8px 8px 0 0 !important; 231 | position: relative !important; 232 | border: 0 !important; 233 | transition: 234 | opacity var(--tab-transition-duration) var(--ease-basic), 235 | background-color 0s var(--tab-transition-duration) var(--ease-basic) !important; 236 | opacity: var(--tab-opacity) !important; 237 | visibility: visible !important; 238 | box-shadow: none !important; 239 | } 240 | 241 | /* rounded bottom corners */ 242 | .tab-background::before, 243 | .tab-background::after 244 | { 245 | content: "" !important; 246 | display: block !important; 247 | position: absolute !important; 248 | width: 8px !important; 249 | height: 8px !important; 250 | bottom: 0 !important; 251 | pointer-events: none !important; 252 | transition: box-shadow 0s var(--tab-transition-duration) var(--ease-basic) !important; 253 | clip-path: inset(0) !important; 254 | } 255 | 256 | .tab-background::before 257 | { 258 | border-bottom-right-radius: 8px !important; 259 | left: 0 !important; 260 | transform: translateX(-8px) !important; 261 | box-shadow: 4px 4px 0 4px var(--tab-bgcolor) !important; 262 | } 263 | 264 | .tab-background::after 265 | { 266 | border-bottom-left-radius: 8px !important; 267 | right: 0 !important; 268 | transform: translateX(8px) !important; 269 | box-shadow: -4px 4px 0 4px var(--tab-bgcolor) !important; 270 | } 271 | 272 | .tabbrowser-tab[visuallyselected][style*=transform] + .tabbrowser-tab[style*=transform] .tab-content::after, 273 | .tabbrowser-tab[style*=transform]:not([visuallyselected]) .tab-content::before, 274 | .tabbrowser-tab[style*=transform] + .tabbrowser-tab:not([visuallyselected]) .tab-content::before, 275 | .tabbrowser-tab:not([visuallyselected]):not(:hover):not([multiselected]) + .tabbrowser-tab:not([visuallyselected]):not(:hover):not([multiselected]) .tab-content::before, 276 | #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow]) .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not(:hover):not([multiselected]) .tab-content::after 277 | { 278 | opacity: var(--tab-separator-opacity) !important; 279 | } 280 | 281 | #tabbrowser-tabs[overflow] .tabbrowser-tab[pinned] + .tabbrowser-tab:not([pinned]) .tab-content::before 282 | { 283 | opacity: 0 !important; 284 | } 285 | 286 | .tabbrowser-tab[visuallyselected] 287 | { 288 | --tab-transition-duration: 0s; 289 | } 290 | 291 | .tab-throbber, 292 | .tab-throbber-fallback 293 | { 294 | margin-inline-end: 8px !important; 295 | } 296 | 297 | .tab-icon-image 298 | { 299 | margin: 0 !important; 300 | } 301 | 302 | /* hide new tab favicon */ 303 | .tabbrowser-tab[image^="chrome://branding/"]:not([pinned]) .tab-icon-image 304 | { 305 | display: none !important; 306 | } 307 | 308 | .tab-label-container 309 | { 310 | margin-top: -2px !important; 311 | opacity: 1 !important; 312 | } 313 | 314 | .tabbrowser-tab[image]:not([image^="chrome://branding/"]) .tab-label-container, 315 | .tabbrowser-tab:-moz-any([progress], [busy]) .tab-label-container 316 | { 317 | padding-inline-start: 8px !important; 318 | } 319 | 320 | .tabbrowser-tab[pinned]:-moz-any([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image 321 | { 322 | visibility: hidden !important; 323 | } 324 | 325 | .tabbrowser-tab[fadein] .tab-close-button 326 | { 327 | visibility: visible !important; 328 | } 329 | 330 | .tab-close-button 331 | { 332 | list-style-image: url(close-tab.svg) !important; 333 | width: 16px !important; 334 | height: 16px !important; 335 | margin: 0 !important; 336 | padding: 0 !important; 337 | } 338 | 339 | .tab-close-button, 340 | .tab-icon-overlay:-moz-any([soundplaying], [muted], [activemedia-blocked]), 341 | .tab-icon-sound 342 | { 343 | border-radius: 99px !important; 344 | color: inherit !important; 345 | -moz-context-properties: fill, fill-opacity !important; 346 | transition-property: fill-opacity, background-color !important; 347 | transition-duration: .15s !important; 348 | transition-timing-function: var(--ease-basic) !important; 349 | fill-opacity: 1 !important; 350 | opacity: 1 !important; 351 | } 352 | 353 | .tab-close-button:hover, 354 | .tab-icon-overlay:-moz-any([soundplaying], [muted], [activemedia-blocked]):hover, 355 | .tab-icon-sound:hover 356 | { 357 | background-color: var(--toolbarbutton-hover-background) !important; 358 | } 359 | 360 | .tab-close-button:hover:active, 361 | .tab-icon-overlay:-moz-any([soundplaying], [muted], [activemedia-blocked]):hover:active, 362 | .tab-icon-sound:hover:active 363 | { 364 | background-color: var(--toolbarbutton-active-background) !important; 365 | } 366 | 367 | .tab-icon-overlay[pinned] 368 | { 369 | margin: 0 !important; 370 | margin-inline-start: -16px !important; 371 | } 372 | 373 | .tab-sharing-icon-overlay 374 | { 375 | margin-inline-start: -16px !important; 376 | } 377 | 378 | @keyframes rotate-360 379 | { 380 | 0% { transform: rotate(0); } 381 | 100% { transform: rotate(1turn); } 382 | } 383 | 384 | .tab-throbber 385 | { 386 | -moz-context-properties: fill !important; 387 | fill: currentColor !important; 388 | background-image: url(spinner-busy.svg) !important; 389 | margin: 0 !important; 390 | transform-origin: center !important; 391 | animation: rotate-360 1.333s linear infinite reverse !important; 392 | position: static !important; 393 | } 394 | 395 | .tab-throbber[progress] 396 | { 397 | background-image: url(spinner-progress.svg) !important; 398 | animation-direction: normal !important; 399 | } 400 | 401 | .tab-throbber::before 402 | { 403 | display: none !important; 404 | } 405 | 406 | /* clipped tabs */ 407 | #tabbrowser-tabs[closebuttons=activetab] .tab-content:not([pinned]) 408 | { 409 | padding-inline-start: 8px !important; 410 | } 411 | 412 | #tabbrowser-tabs[closebuttons=activetab] .tabbrowser-tab:not([visuallyselected]) .tab-close-button 413 | { 414 | visibility: collapse !important; 415 | } 416 | 417 | #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow][labeldirection="ltr"]:not([pinned]), 418 | #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(ltr):not([pinned]) 419 | { 420 | mask-image: linear-gradient(to right, black 70%, transparent) !important; 421 | } 422 | 423 | #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow][labeldirection="rtl"]:not([pinned]), 424 | #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(rtl):not([pinned]) 425 | { 426 | mask-image: linear-gradient(to left, black 70%, transparent) !important; 427 | } 428 | 429 | .tab-content[pinned] 430 | { 431 | -moz-box-pack: center !important; 432 | } 433 | 434 | .tab-icon-image[pinned], 435 | .tab-throbber[pinned] 436 | { 437 | margin: auto !important; 438 | } 439 | 440 | .tab-content[pinned] 441 | { 442 | width: 36px !important; 443 | padding: 0 !important; 444 | padding-inline-start: 10px !important; 445 | padding-inline-end: 0 !important; 446 | } 447 | 448 | .tab-label-container[pinned], 449 | .tab-close-button[pinned] 450 | { 451 | visibility: hidden !important; 452 | } 453 | 454 | /* close button / favicon is centered within 36px tab */ 455 | /* disabled for now because it's broken in recent version of Firefox */ 456 | @supports -moz-bool-pref("materialFox.reduceTabOverflow disabled") 457 | { 458 | #main-window 459 | { 460 | /* same as Chrome */ 461 | min-width: 500px !important; 462 | } 463 | 464 | #tabbrowser-tabs[overflow] .tab-content 465 | { 466 | -moz-box-pack: center !important; 467 | } 468 | 469 | #tabbrowser-tabs[overflow] .tab-icon-image 470 | { 471 | margin: auto !important; 472 | } 473 | 474 | #tabbrowser-tabs[overflow] .tab-content[image]:not([image^="chrome://branding/"]):not([pinned]) 475 | { 476 | width: 36px !important; 477 | padding: 0 !important; 478 | padding-inline-start: 0 !important; 479 | padding-inline-end: 0 !important; 480 | } 481 | 482 | #tabbrowser-tabs[overflow] .tabbrowser-tab:not([visuallyselected]):not([pinned]) .tab-close-button, 483 | #tabbrowser-tabs[overflow] .tabbrowser-tab[visuallyselected]:not([pinned]) :-moz-any(.tab-label-container, .tab-icon-image), 484 | #tabbrowser-tabs[overflow] .tabbrowser-tab[image]:not([image^="chrome://branding/"]):not([pinned]) .tab-label-container 485 | { 486 | display: none !important; 487 | } 488 | } 489 | 490 | #tabbrowser-tabs #tabs-newtab-button 491 | { 492 | margin-inline-start: 6px !important; 493 | } 494 | 495 | #tabbrowser-tabs[overflow] .tabbrowser-arrowscrollbox 496 | { 497 | border-radius: 8px 8px 0 0 !important; 498 | background-color: rgba(0, 0, 0, .1) !important; 499 | padding-inline-start: 0 !important; 500 | } 501 | 502 | #tabbrowser-tabs[overflow] 503 | { 504 | margin-inline-start: 8px !important; 505 | } 506 | 507 | #tabbrowser-tabs[overflow] .tabbrowser-tab[first-visible-tab]:not([pinned]), 508 | #tabbrowser-tabs[overflow] .tabbrowser-tab[pinned] + .tabbrowser-tab:not([pinned]), 509 | #tabbrowser-tabs:not([overflow]) .tabbrowser-tab[first-visible-tab] 510 | { 511 | margin-inline-start: 8px !important; 512 | } 513 | 514 | #tabbrowser-tabs[overflow] .tabbrowser-tab[last-visible-tab]:not([pinned]) 515 | { 516 | margin-inline-end: 7px !important; 517 | } 518 | 519 | .tabbrowser-tab[usercontextid] > .tab-stack::after 520 | { 521 | content: "" !important; 522 | position: absolute !important; 523 | display: flex !important; 524 | bottom: 0 !important; 525 | left: 8px !important; 526 | width: calc(100% - 16px) !important; 527 | height: 2px !important; 528 | box-sizing: border-box !important; 529 | border-radius: 99px 99px 0 0 !important; 530 | transform: none !important; 531 | background: var(--identity-tab-color) !important; 532 | transition-property: top, bottom, left, right, width, height, border-radius; 533 | transition-duration: .225s !important; 534 | transition-timing-function: var(--ease-out) !important; 535 | } 536 | 537 | .tab-bottom-line 538 | { 539 | display: none !important; 540 | } 541 | 542 | .tabbrowser-tab[usercontextid][selected] > .tab-stack::after 543 | { 544 | bottom: calc(100% - 9px) !important; 545 | left: calc(100% - 9px) !important; 546 | width: 6px !important; 547 | height: 6px !important; 548 | border-radius: 99px !important; 549 | } 550 | 551 | /* < 72 */ 552 | #tabbrowser-tabs .arrowscrollbox-overflow-start-indicator, 553 | #tabbrowser-tabs .arrowscrollbox-overflow-end-indicator, 554 | /* >= 72 */ 555 | #tabbrowser-tabs::part(arrowscrollbox-overflow-start-indicator), 556 | #tabbrowser-tabs::part(arrowscrollbox-overflow-end-indicator), 557 | /* no ::part workaround - may have side effects */ 558 | spacer[part="overflow-start-indicator"], 559 | spacer[part="overflow-end-indicator"] 560 | { 561 | display: none !important; 562 | } 563 | 564 | .tab-loading-burst[bursting]::before 565 | { 566 | display: none !important; 567 | } 568 | 569 | /* high DPI adjustments */ 570 | @media (min--moz-device-pixel-ratio: 2) 571 | { 572 | .tabbrowser-tab::before 573 | { 574 | transform: translateY(.5px) !important; 575 | } 576 | 577 | .tabbrowser-tab:last-of-type::after 578 | { 579 | transform: translate(-1px, .5px) !important; 580 | } 581 | 582 | /* macOS */ 583 | @media (-moz-mac-yosemite-theme) 584 | { 585 | .titlebar-buttonbox 586 | { 587 | margin-top: .5px !important; 588 | margin-bottom: -.5px !important; 589 | } 590 | } 591 | } 592 | -------------------------------------------------------------------------------- /chrome/urlbar/connection-1x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/urlbar/connection-2x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/urlbar/connection-warning-1x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/urlbar/connection-warning-2x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/urlbar/go.svg: -------------------------------------------------------------------------------- 1 | 5 | 14 | -------------------------------------------------------------------------------- /chrome/urlbar/identity-icons-brand.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/urlbar/info-1x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/urlbar/info-2x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/urlbar/naughty-shield-1x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/urlbar/naughty-shield-2x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/urlbar/urlbar.css: -------------------------------------------------------------------------------- 1 | .urlbarView-body-inner 2 | { 3 | border: 0 !important; 4 | } 5 | 6 | .urlbarView-row 7 | { 8 | padding: 0 !important; 9 | border-radius: 0 !important; 10 | } 11 | 12 | .urlbarView-row-inner 13 | { 14 | align-items: center !important; 15 | position: relative !important; 16 | padding: 12px 0 !important; 17 | padding-inline: 48px 16px !important; 18 | max-width: 100% !important; 19 | width: auto !important; 20 | } 21 | 22 | .urlbarView-no-wrap 23 | { 24 | height: 100% !important; 25 | align-items: center !important; 26 | margin-inline-start: 0 !important; 27 | max-width: 100% !important; 28 | } 29 | 30 | .urlbarView-row[has-url][type]:not([type=bookmark]) .urlbarView-row-inner 31 | { 32 | flex-direction: column !important; 33 | align-items: flex-start !important; 34 | } 35 | 36 | .urlbarView-row[has-url][type]:not([type=bookmark]) .urlbarView-no-wrap 37 | { 38 | height: auto !important; 39 | align-self: flex-start !important; 40 | width: 100% !important; 41 | } 42 | 43 | .urlbarView-title-separator 44 | { 45 | visibility: visible !important; 46 | } 47 | 48 | .urlbarView-title-separator::before 49 | { 50 | content: "-" !important; 51 | color: inherit !important; 52 | } 53 | 54 | .urlbarView-title-separator, 55 | .urlbarView-action 56 | { 57 | opacity: .6 !important; 58 | color: inherit !important; 59 | font-size: revert !important; 60 | } 61 | 62 | .urlbarView-favicon 63 | { 64 | position: absolute !important; 65 | left: 16px !important; 66 | top: 50% !important; 67 | transform: translateY(-50%) !important; 68 | fill-opacity: .6 !important; 69 | flex: unset !important; 70 | margin: unset !important; 71 | } 72 | 73 | .urlbarView-title, 74 | .urlbarView-url 75 | { 76 | text-overflow: ellipsis !important; 77 | mask-image: none !important; 78 | } 79 | 80 | .urlbarView-title 81 | { 82 | flex: 1 !important; 83 | flex-basis: unset !important; 84 | } 85 | 86 | .urlbarView-url 87 | { 88 | max-width: 100% !important; 89 | font-size: revert !important; 90 | color: var(--urlbar-popup-url-color) !important; 91 | padding: 0 !important; 92 | } 93 | 94 | .urlbarView-url:not(:empty) 95 | { 96 | visibility: visible !important; 97 | } 98 | 99 | .urlbarView-action:not(:empty) 100 | { 101 | display: flex !important; 102 | } 103 | 104 | .urlbarView-row[type=search] ~ .urlbarView-row[type=search] .urlbarView-title-separator, 105 | .urlbarView-row[type=search] ~ .urlbarView-row[type=search] .urlbarView-action, 106 | .urlbarView-row[has-url][type]:not([type=bookmark]) .urlbarView-title-separator, 107 | .urlbarView-type-icon 108 | { 109 | display: none !important; 110 | } 111 | 112 | .urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-favicon, 113 | .urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-title, 114 | .urlbarView-tip-button, 115 | .urlbarView-tip-help 116 | { 117 | margin-block-end: 0 !important; 118 | } 119 | 120 | .urlbarView .search-one-offs 121 | { 122 | padding: 4px !important; 123 | display: flex !important; 124 | } 125 | 126 | .urlbarView .search-panel-one-offs-header 127 | { 128 | margin-inline-start: 12px !important; 129 | line-height: 40px !important; 130 | transform: translateY(-1px) !important; 131 | } 132 | 133 | .urlbarView .search-panel-one-offs 134 | { 135 | border-radius: 0 0 8px 8px !important; 136 | display: inline-flex !important; 137 | flex-direction: row !important; 138 | padding: 0 !important; 139 | margin: 0 !important; 140 | float: left !important; 141 | max-width: none !important; 142 | height: auto !important; 143 | } 144 | 145 | .urlbarView .searchbar-engine-one-off-item 146 | { 147 | height: 32px !important; 148 | border-radius: 16px !important; 149 | padding: 0 8px !important; 150 | margin: 4px !important; 151 | background-image: none !important; 152 | color: inherit !important; 153 | border: 0 !important; 154 | } 155 | 156 | #urlbar-container 157 | { 158 | max-height: 36px !important; 159 | } 160 | 161 | #urlbar, 162 | #searchbar 163 | { 164 | font-size: var(--toolbar-field-fontsize) !important; 165 | border-radius: 99px !important; 166 | background-color: var(--toolbar-field-background-color) !important; 167 | border: 0 !important; 168 | box-shadow: none !important; 169 | padding: 2px !important; 170 | background-clip: padding-box !important; 171 | transition: background-color .1s var(--ease-basic) !important; 172 | -moz-box-align: center !important; 173 | display: block !important; 174 | margin: 0 !important; 175 | color: inherit !important; 176 | 177 | --urlbar-height: 28px !important; 178 | 179 | min-height: var(--urlbar-height) !important; 180 | } 181 | 182 | #urlbar:not(:-moz-lwtheme), 183 | #searchbar:not(:-moz-lwtheme) 184 | { 185 | color: inherit !important; 186 | } 187 | 188 | #urlbar:hover, 189 | #searchbar:hover 190 | { 191 | background-color: var(--toolbar-field-hover-background-color) !important; 192 | } 193 | 194 | #urlbar[focused], 195 | #urlbar[open], 196 | #searchbar[focused], 197 | #searchbar[open] 198 | { 199 | background-color: var(--toolbar-field-focus-background-color) !important; 200 | } 201 | 202 | #urlbar[focused], 203 | #searchbar[focused] 204 | { 205 | /* -moz-accent-color won't work in a var... */ 206 | border: 2px solid -moz-accent-color !important; 207 | padding: 0 !important; 208 | margin: 0 !important; 209 | } 210 | 211 | /* if only focused, don't break out the urlbar */ 212 | #urlbar[focused]:not([open]) 213 | { 214 | width: 100% !important; 215 | left: 0 !important; 216 | right: 0 !important; 217 | } 218 | 219 | #urlbar[open], 220 | #searchbar[open] 221 | { 222 | border: 0 !important; 223 | padding: 0 !important; 224 | border-radius: 8px !important; 225 | min-height: 37px !important; 226 | margin: -4px 0 -1px !important; 227 | box-shadow: 228 | 0 5px 5px -3px rgba(0,0,0,.2), 229 | 0 8px 10px 1px rgba(0,0,0,.14), 230 | 0 3px 14px 2px rgba(0,0,0,.12) !important; 231 | z-index: 99999 !important; 232 | } 233 | 234 | /* 71+ */ 235 | #urlbar-background 236 | { 237 | display: none !important; 238 | } 239 | 240 | #urlbar-input-container, 241 | #searchbar 242 | { 243 | display: flex !important; 244 | align-items: center !important; 245 | } 246 | 247 | #urlbar-input-container 248 | { 249 | height: auto !important; 250 | padding: 0 !important; 251 | border: 0 !important; 252 | } 253 | 254 | .urlbar-input-box, 255 | .searchbar-textbox 256 | { 257 | flex: 1 !important; 258 | } 259 | 260 | #urlbar-input 261 | { 262 | width: 100% !important; 263 | } 264 | 265 | #urlbar-input, 266 | .searchbar-textbox 267 | { 268 | color: var(--lwt-toolbar-field-color) !important; 269 | } 270 | 271 | #urlbar-input::placeholder, 272 | .searchbar-textbox::placeholder 273 | { 274 | opacity: .66 !important; 275 | } 276 | 277 | #urlbar[open] #urlbar-input-container 278 | { 279 | height: 37px !important; 280 | } 281 | 282 | #urlbar[open] #identity-box 283 | { 284 | margin-inline-start: 8px !important; 285 | margin-inline-end: 8px !important; 286 | } 287 | 288 | .urlbarView 289 | { 290 | top: 0 !important; 291 | left: 0 !important; 292 | right: 0 !important; 293 | position: relative !important; 294 | box-shadow: none !important; 295 | border: 0 !important; 296 | background: 0 !important; 297 | margin: 0 !important; 298 | } 299 | 300 | #urlbar[open] .urlbarView 301 | { 302 | display: block !important; 303 | width: 100% !important; 304 | } 305 | 306 | #urlbar-results 307 | { 308 | padding: 0 !important; 309 | } 310 | 311 | #urlbar-container, 312 | #searchbar-container 313 | { 314 | overflow: visible !important; 315 | padding: 0 !important; 316 | margin-inline: 6px !important; 317 | } 318 | 319 | #identity-icon 320 | { 321 | fill-opacity: 1 !important; 322 | } 323 | 324 | #identity-icon-labels 325 | { 326 | color: inherit !important; 327 | opacity: 1 !important; 328 | padding: 0 !important; 329 | margin-inline-start: 8px !important; 330 | margin-block-start: -1px !important; 331 | display: none !important; 332 | align-items: center !important; 333 | } 334 | 335 | #identity-box 336 | { 337 | display: flex !important; 338 | position: relative !important; 339 | } 340 | 341 | .identity-box-button, 342 | #tracking-protection-icon-container 343 | { 344 | background: none !important; 345 | } 346 | 347 | #identity-icon-box 348 | { 349 | border: 0 !important; 350 | padding: 0 !important; 351 | } 352 | 353 | /* separator */ 354 | #urlbar[pageproxystate=valid] #identity-box:-moz-any(.chromeUI, .extensionPage, .notSecureText) #identity-icon-box::after 355 | { 356 | content: "" !important; 357 | display: block !important; 358 | position: absolute !important; 359 | height: 16px !important; 360 | top: calc(50% - 8px) !important; 361 | right: 0 !important; 362 | background: #9d9e9f !important; 363 | width: 1px !important; 364 | transition: opacity .2s var(--ease-basic) !important; 365 | } 366 | 367 | 368 | #urlbar[pageproxystate=valid] #identity-box:-moz-any(.chromeUI, .extensionPage, .notSecureText) 369 | { 370 | padding-inline-end: 9px !important; 371 | margin-inline-end: 9px !important; 372 | } 373 | 374 | 375 | #urlbar[pageproxystate=valid] #identity-box:hover #identity-icon-box::after 376 | { 377 | opacity: 0 !important; 378 | } 379 | 380 | #urlbar[pageproxystate=valid] #identity-box.extensionPage > #identity-icon 381 | { 382 | list-style-image: none !important; 383 | margin-inline-end: -16px !important; 384 | } 385 | 386 | #identity-icon-label 387 | { 388 | margin: 0 !important; 389 | padding-inline-start: 8px !important; 390 | transform: translateY(-2px) !important; 391 | 392 | } 393 | 394 | /* no longer used as a connection icon */ 395 | #connection-icon 396 | { 397 | display: none !important; 398 | } 399 | 400 | #urlbar[pageproxystate=valid] #identity-box:-moz-any( 401 | .mixedActiveBlocked, 402 | .mixedDisplayContentLoadedActiveBlocked, 403 | .mixedActiveContent 404 | ) > #connection-icon 405 | { 406 | display: -moz-box !important; 407 | } 408 | 409 | #urlbar[pageproxystate=valid] #identity-box:-moz-any(.weakCipher, .certUserOverridden, .certErrorPage, .insecureLoginForms, .mixedActiveContent) 410 | { 411 | color: #c94031 !important; 412 | } 413 | 414 | .urlbar-input 415 | { 416 | padding: 0 !important; 417 | } 418 | 419 | .searchbar-textbox 420 | { 421 | border: 0 !important; 422 | background: 0 !important; 423 | box-shadow: none !important; 424 | margin: 0 !important; 425 | -moz-appearance: none !important; 426 | } 427 | 428 | .searchbar-search-icon 429 | { 430 | margin: 0 !important; 431 | fill-opacity: 1 !important; 432 | } 433 | 434 | .searchbar-search-icon-overlay 435 | { 436 | margin-inline-start: -11px !important; 437 | margin-inline-end: 0 !important; 438 | 439 | /* not really useful anyway */ 440 | display: none !important; 441 | } 442 | 443 | #page-action-buttons > #pageActionSeparator, 444 | .urlbar-history-dropmarker 445 | { 446 | display: none !important; 447 | } 448 | 449 | #pageActionSeparator 450 | { 451 | height: 24px !important; 452 | } 453 | 454 | .urlbar-icon-wrapper 455 | { 456 | background: 0 !important; 457 | } 458 | 459 | .urlbar-icon, 460 | #page-action-buttons > toolbarbutton, 461 | .searchbar-search-button, 462 | #identity-box, 463 | #tracking-protection-icon-box 464 | { 465 | min-width: 32px !important; 466 | height: 24px !important; 467 | padding: 4px 8px !important; 468 | margin: 0 !important; 469 | border: 0 !important; 470 | border-radius: 99px !important; 471 | fill-opacity: 1 !important; 472 | transition: background-color .2s var(--ease-basic) !important; 473 | background: 0 !important; 474 | background-color: transparent !important; 475 | } 476 | 477 | #tracking-protection-icon-container 478 | { 479 | background: 0 !important; 480 | border: 0 !important; 481 | margin: 0 !important; 482 | padding: 0 !important; 483 | width: auto !important; 484 | order: 97 !important; 485 | } 486 | 487 | #tracking-protection-icon-box 488 | { 489 | display: block !important; 490 | width: 32px !important; 491 | } 492 | 493 | #tracking-protection-icon-box 494 | { 495 | transition: 496 | background-color .2s var(--ease-basic), 497 | width .15s var(--ease-in), 498 | opacity .15s var(--ease-basic), 499 | visibility 0s .2s !important; 500 | opacity: 0 !important; 501 | visibility: hidden !important; 502 | width: 0 !important; 503 | } 504 | 505 | #urlbar:hover #tracking-protection-icon-box, 506 | #tracking-protection-icon-container[open] #tracking-protection-icon-box, 507 | #tracking-protection-icon-box[active] 508 | { 509 | transition: 510 | background-color .2s var(--ease-basic), 511 | width .3s var(--ease-out), 512 | opacity .3s var(--ease-basic) !important; 513 | opacity: 1 !important; 514 | visibility: visible !important; 515 | width: 32px !important; 516 | } 517 | 518 | #tracking-protection-icon 519 | { 520 | display: block !important; 521 | } 522 | 523 | #tracking-protection-icon-animatable-box 524 | { 525 | display: none !important; 526 | } 527 | 528 | #identity-box #notification-popup-box 529 | { 530 | padding: 0 !important; 531 | margin: 0 !important; 532 | } 533 | 534 | #page-action-buttons 535 | { 536 | height: 24px !important; 537 | display: flex !important; 538 | order: 99 !important; 539 | } 540 | 541 | #urlbar[open] #page-action-buttons, 542 | #urlbar[open] #tracking-protection-icon-container 543 | { 544 | display: none !important; 545 | } 546 | 547 | .urlbar-icon:hover:not([disabled]), 548 | #page-action-buttons > toolbarbutton:hover:not([disabled]), 549 | .searchbar-search-button:hover, 550 | #identity-box:hover:not(.no-hover), 551 | #tracking-protection-icon-container:hover #tracking-protection-icon-box 552 | { 553 | background-color: var(--toolbarbutton-hover-background) !important; 554 | } 555 | 556 | .urlbar-icon:hover:active:not([disabled]), 557 | .urlbar-icon[open], 558 | #page-action-buttons > toolbarbutton:hover:active:not([disabled]), 559 | .searchbar-search-button:hover:active, 560 | #identity-box:hover:active:not(.no-hover), 561 | #identity-box[open]:not(.no-hover), 562 | #tracking-protection-icon-container[open] #tracking-protection-icon-box 563 | { 564 | background-color: var(--toolbarbutton-active-background) !important; 565 | transition-duration: 0 !important; 566 | } 567 | 568 | #contextual-feature-recommendation 569 | { 570 | width: auto !important; 571 | } 572 | 573 | .urlbar-page-action 574 | { 575 | padding: 0 !important; 576 | background: 0 !important; 577 | border-radius: 0 !important; 578 | height: 24px !important; 579 | width: 32px !important; 580 | } 581 | 582 | .urlbar-page-action:-moz-any( 583 | #reader-mode-button, 584 | #pageActionButton, 585 | #pocket-button-box, 586 | #pageAction-urlbar-screenshots_mozilla_org, 587 | #pageAction-urlbar-sendToDevice, 588 | #pageAction-urlbar-emailLink, 589 | #pageAction-urlbar-copyURL, 590 | #pageAction-urlbar-shareURL, 591 | #pageAction-urlbar-addSearchEngine 592 | ) 593 | { 594 | transition: 595 | background-color .2s var(--ease-basic), 596 | margin .15s var(--ease-in), 597 | opacity .15s var(--ease-basic), 598 | visibility 0s 4s !important; 599 | opacity: 0 !important; 600 | visibility: hidden !important; 601 | margin-inline-start: -32px !important; 602 | } 603 | 604 | #urlbar:hover .urlbar-page-action:-moz-any( 605 | #reader-mode-button, 606 | #pageActionButton, 607 | #pocket-button-box, 608 | #pageAction-urlbar-screenshots_mozilla_org, 609 | #pageAction-urlbar-sendToDevice, 610 | #pageAction-urlbar-emailLink, 611 | #pageAction-urlbar-copyURL, 612 | #pageAction-urlbar-shareURL, 613 | #pageAction-urlbar-addSearchEngine 614 | ), 615 | .urlbar-page-action:-moz-any( 616 | #reader-mode-button, 617 | #pageActionButton, 618 | #pocket-button-box, 619 | #pageAction-urlbar-screenshots_mozilla_org, 620 | #pageAction-urlbar-sendToDevice, 621 | #pageAction-urlbar-emailLink, 622 | #pageAction-urlbar-copyURL, 623 | #pageAction-urlbar-shareURL, 624 | #pageAction-urlbar-addSearchEngine 625 | ):-moz-any(:hover, [open], [readeractive]), 626 | .urlbar-page-action:-moz-any(:hover, [open]) ~ .urlbar-page-action:-moz-any( 627 | #reader-mode-button, 628 | #pageActionButton, 629 | #pocket-button-box, 630 | #pageAction-urlbar-screenshots_mozilla_org, 631 | #pageAction-urlbar-sendToDevice, 632 | #pageAction-urlbar-emailLink, 633 | #pageAction-urlbar-copyURL, 634 | #pageAction-urlbar-shareURL, 635 | #pageAction-urlbar-addSearchEngine), 636 | #tracking-protection-icon-container[open] ~ #page-action-buttons .urlbar-page-action:-moz-any( 637 | #reader-mode-button, 638 | #pageActionButton, 639 | #pocket-button-box, 640 | #pageAction-urlbar-screenshots_mozilla_org, 641 | #pageAction-urlbar-sendToDevice, 642 | #pageAction-urlbar-emailLink, 643 | #pageAction-urlbar-copyURL, 644 | #pageAction-urlbar-shareURL, 645 | #pageAction-urlbar-addSearchEngine) 646 | { 647 | transition: 648 | background-color .2s var(--ease-basic), 649 | margin .3s var(--ease-out), 650 | opacity .3s var(--ease-basic) !important; 651 | opacity: 1 !important; 652 | visibility: visible !important; 653 | margin-inline-start: 0 !important; 654 | } 655 | 656 | .urlbar-display 657 | { 658 | color: inherit !important; 659 | margin: 0 !important; 660 | } 661 | 662 | #pocket-button-box[animate] > #pocket-animatable-box 663 | { 664 | margin-inline-start: 6px !important; 665 | } 666 | 667 | #star-button-animatable-box 668 | { 669 | display: none !important; 670 | } 671 | 672 | #userContext-icons 673 | { 674 | flex-direction: row !important; 675 | align-items: center !important; 676 | justify-content: center !important; 677 | position: relative !important; 678 | padding-inline: 8px !important; 679 | margin: 0 !important; 680 | color: var(--identity-tab-color) !important; 681 | } 682 | 683 | #userContext-icons:not([hidden]) 684 | { 685 | display: flex !important; 686 | } 687 | 688 | #userContext-icons > * 689 | { 690 | z-index: 1 !important; 691 | color: inherit !important; 692 | fill: currentColor !important; 693 | } 694 | 695 | #userContext-label 696 | { 697 | margin: 0 !important; 698 | } 699 | 700 | #userContext-label + #userContext-indicator 701 | { 702 | margin-inline-start: 6px !important; 703 | } 704 | 705 | #userContext-icons::before 706 | { 707 | content: '' !important; 708 | position: absolute !important; 709 | left: 0 !important; 710 | right: 0 !important; 711 | top: 0 !important; 712 | bottom: 0 !important; 713 | background: var(--identity-tab-color) !important; 714 | border-radius: 99px !important; 715 | opacity: .1 !important; 716 | } 717 | 718 | #cfr-label-container 719 | { 720 | background: 0 !important; 721 | } 722 | 723 | #cfr-label 724 | { 725 | display: none !important; 726 | } 727 | 728 | #cfr-button 729 | { 730 | fill: currentColor !important; 731 | } 732 | 733 | #urlbar[open] #urlbar-go-button, 734 | #searchbar[open] #search-go-button, 735 | /* < 71 */ 736 | #urlbar[open] .urlbar-go-button, 737 | #searchbar[open] .search-go-button 738 | { 739 | height: 32px !important; 740 | } 741 | 742 | #urlbar-go-button, 743 | #search-go-button, 744 | /* < 71 */ 745 | .urlbar-go-button, 746 | .search-go-button 747 | { 748 | list-style-image: url(go.svg) !important; 749 | } 750 | 751 | .search-go-container 752 | { 753 | display: flex !important; 754 | } 755 | 756 | #searchbar .textbox-input 757 | { 758 | padding: 0 !important; 759 | } 760 | 761 | /* lock (secure) */ 762 | #identity-box[pageproxystate="valid"].verifiedDomain #identity-icon, 763 | #identity-box[pageproxystate="valid"].mixedActiveBlocked #identity-icon 764 | { 765 | list-style-image: var(--lock-icon) !important; 766 | } 767 | 768 | /* warning (dangerous) */ 769 | #identity-box[pageproxystate="valid"].notSecure #identity-icon, 770 | #identity-box[pageproxystate="valid"].mixedActiveContent #identity-icon, 771 | #identity-box[pageproxystate="valid"].httpsOnlyErrorPage #identity-icon, 772 | #identity-box[pageproxystate="valid"].weakCipher #identity-icon, 773 | #identity-box[pageproxystate="valid"].mixedDisplayContent #identity-icon, 774 | #identity-box[pageproxystate="valid"].mixedDisplayContentLoadedActiveBlocked #identity-icon, 775 | #identity-box[pageproxystate="valid"].certUserOverridden #identity-icon, 776 | #identity-box[pageproxystate="valid"].certErrorPage #identity-icon 777 | { 778 | list-style-image: var(--warning-icon) !important; 779 | } 780 | 781 | #urlbar-input, 782 | #searchbar-input, 783 | .searchbar-textbox /* < 71 */ 784 | { 785 | transform: translateY(var(--input-offset)) !important; 786 | line-height: 1.745em !important; 787 | } 788 | 789 | /* 1x */ 790 | #urlbar 791 | { 792 | --info-icon: url(info-1x.svg); 793 | --lock-icon: url(connection-1x.svg); 794 | --warning-icon: url(connection-warning-1x.svg); 795 | } 796 | 797 | #urlbar, 798 | #searchbar 799 | { 800 | --input-offset: -1px; 801 | } 802 | 803 | /* 2x */ 804 | @media (min--moz-device-pixel-ratio: 2) 805 | { 806 | #urlbar 807 | { 808 | --info-icon: url(info-2x.svg); 809 | --lock-icon: url(connection-2x.svg); 810 | --warning-icon: url(connection-warning-2x.svg); 811 | } 812 | 813 | #urlbar, 814 | #searchbar 815 | { 816 | --input-offset: -.5px; 817 | } 818 | 819 | #identity-icon-labels 820 | { 821 | padding-inline-end: .5px !important; 822 | } 823 | } -------------------------------------------------------------------------------- /chrome/userChrome.css: -------------------------------------------------------------------------------- 1 | @import "global/variables.css"; 2 | @import "global/global.css"; 3 | @import "icons/icons.css"; 4 | @import "tabbar/tabbar.css"; 5 | @import "navbar/navbar.css"; 6 | @import "personalbar/personalbar.css"; 7 | @import "popup/popup.css"; 8 | @import "urlbar/urlbar.css"; 9 | @import "findbar/findbar.css"; -------------------------------------------------------------------------------- /user.js: -------------------------------------------------------------------------------- 1 | /*** MaterialFox ***/ 2 | /** Mandatory **/ 3 | user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true); // default is false 4 | user_pref("svg.context-properties.content.enabled", true); // default is false 5 | 6 | /** Recommended (uncomment to apply) **/ 7 | /* Replicate Chrome behaviour for clipped tabs */ 8 | //user_pref("browser.tabs.tabClipWidth", 83); // default is 140 9 | 10 | /* Replicate Chrome's "Not Secure" text on HTTP */ 11 | //user_pref("security.insecure_connection_text.enabled", true); --------------------------------------------------------------------------------