├── .github └── ISSUE_TEMPLATE │ └── bug_report.md ├── .gitignore ├── LICENSE ├── README.md ├── chrome ├── bookmarkAutoHide.css ├── 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 │ ├── 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-BigSur 2 | Forked from [MaterialFox](https://github.com/muckSponge/MaterialFox) 3 | 4 | ![Preview](https://i.imgur.com/qvgq4yP.png) 5 | 6 | ## What is the difference? 7 | * macOS Big Sur Style UI 8 | * macOS style translucent blur effect is applied on the tab bar. 9 | * The gray background is removed from the URL & search bar. 10 | * Every icon is given a little bit more space to breathe. 11 | * Cleaner Look 12 | * The bookmark bar appears only when you hover over the top of the window. If you are not a fan of this, you can [disable it](#if-you-dont-like-the-auto-hiding-bookmark-bar). 13 | * The tab close button from inactive tabs are hidden. You can hover over the tab to make it appear. 14 | * Animations have been refined. 15 | 16 | ## How do I install? 17 | Follow [Installation](#installation). 18 | Please note that you can install this on both Windows and macOS but it'll work as intended *only on macOS*. 19 | 20 | ## If you don't like the auto-hiding bookmark bar 21 | After installation, open userChrome.css and *delete* the line 10, save the file, and then restart Firefox. 22 | ```css 23 | @import "bookmarkAutoHide.css"; 24 | ``` 25 | You can also delete the file bookmarkAutoHide.css or keep it for later. 26 | 27 | ## Acknowledgements 28 | * [MaterialFox](https://github.com/muckSponge/MaterialFox) 29 | * [firefox-macos-native-tabbar](https://github.com/zvuc/firefox-macos-native-tabbar) 30 | * [firefox-sliding-bookmarks-bar](https://github.com/zvuc/firefox-sliding-bookmarks-bar) 31 | 32 | *** 33 | Below is the original README.md from MaterialFox. 34 | *** 35 | 36 | *A Material Design-inspired userChrome.css theme for Firefox* 37 | 38 | ![Preview](https://user-images.githubusercontent.com/5405629/45172944-21d91900-b24a-11e8-8bc5-03814121b0de.png) 39 | This theme is powered by blood, sweat, and coffee. If you like it, please consider helping out to support its continued development. 40 | 41 | [![Buy me a coffee](https://svgshare.com/i/8Yd.svg)](https://www.buymeacoffee.com/n4ho5QX2l) 42 | 43 | ## What this does 44 | 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 the latest Google Chrome dev builds, where practical. 45 | 46 | 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. 47 | 48 | ## What version do I use? 49 | 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 76, try a v76.x release. The master branch is compatible with stable Firefox; the beta branch is compatible with Firefox Beta. This requires a periodic rebase of master on beta as Mozilla update their release cycle (which doesn't always occur immediately). 50 | 51 | ## Installation 52 | 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. 53 | 2. See [Recommended instructions](#recommended-instructions) if you'd prefer a more Chrome-like experience. 54 | 3. Restart Firefox. 55 | 56 | ### Recommended instructions 57 | Add space above tab bar: 58 | * Right click on toolbar -> Customize. 59 | * Check Drag Space checkbox. 60 | 61 | Replicate Chrome behaviour for clipped tabs: 62 | * [about:config] Set ```browser.tabs.tabClipWidth``` to ```83``` (default is ```140```). 63 | 64 | Replicate Chrome's "Not Secure" text on HTTP: 65 | * [about:config] Set ```security.insecure_connection_text.enabled``` to ```true```. 66 | 67 | ## Please note 68 | * Linux is not frequently tested; last tested on 21/05/2019. 69 | * Some customisation settings may no longer work (such as compact/touch density). 70 | * Some custom themes may clash with address bar. 71 | -------------------------------------------------------------------------------- /chrome/bookmarkAutoHide.css: -------------------------------------------------------------------------------- 1 | #PersonalToolbar:not([customizing]) { 2 | position: fixed !important; 3 | margin-top: -44px !important; 4 | padding-bottom: 5px !important; 5 | height: 40px !important; 6 | width: 100% !important; 7 | border: none !important; 8 | transform: scaleY(0.8); 9 | transform-origin: center bottom; 10 | transition: transform cubic-bezier(.22,.61,.36,1) 0.15s !important; 11 | z-index: 2; 12 | } 13 | 14 | #PersonalToolbar:not([customizing]) #personal-bookmarks { 15 | opacity: 0; 16 | transition: opacity 0.15s; 17 | } 18 | 19 | #titlebar { 20 | z-index: 4 !important; 21 | } 22 | 23 | #nav-bar { 24 | z-index: 3 !important; 25 | } 26 | 27 | /* bring up nav-bar z-index when megabar is open */ 28 | #nav-bar[urlbar-exceeds-toolbar-bounds="true"] { 29 | z-index: 5 !important; 30 | } 31 | 32 | .tabbrowser-tab[selected="true"] { 33 | z-index: 4 !important; 34 | } 35 | 36 | #navigator-toolbox:hover > #PersonalToolbar:not([customizing]) { 37 | position: fixed !important; 38 | transform: translateY(100%) scaleY(1); 39 | } 40 | 41 | #navigator-toolbox:hover > #PersonalToolbar:not([customizing]) #personal-bookmarks { 42 | opacity: 1; 43 | } 44 | 45 | /* compact theme */ 46 | :root[lwtheme="true"] #PersonalToolbar:not([customizing]) { 47 | top: var(--toolbar-offset-height) !important; 48 | } 49 | 50 | /* compact + titlebar active */ 51 | :root[lwtheme="true"]:not([tabsintitlebar="true"]) 52 | #nav-bar ~ #PersonalToolbar:not([customizing]) { 53 | top: var(--toolbar-offset-height) !important; 54 | } 55 | 56 | /* default theme */ 57 | :root:not([lwtheme="true"]) #PersonalToolbar:not([customizing]) { 58 | top: var(--toolbar-offset-height) !important; 59 | } 60 | 61 | /* default + titlebar active */ 62 | :root:not([lwtheme="true"]):not([tabsintitlebar="true"]) 63 | #nav-bar ~ #PersonalToolbar:not([customizing]) { 64 | top: var(--toolbar-offset-height) !important; 65 | } 66 | 67 | #tabbrowser-tabs { 68 | margin-left: 6px !important; 69 | } 70 | -------------------------------------------------------------------------------- /chrome/findbar/findbar.css: -------------------------------------------------------------------------------- 1 | .findbar-textbox 2 | { 3 | background-color: transparent !important; 4 | background-image: url(../icons/search.svg) !important; 5 | background-repeat: no-repeat !important; 6 | background-position: 5px center !important; 7 | fill-opacity: 1 !important; 8 | border: 0 !important; 9 | box-shadow: none !important; 10 | margin-inline-start: 4px !important; 11 | padding-inline-start: 28px !important; 12 | } 13 | 14 | hbox[anonid="findbar-textbox-wrapper"] 15 | { 16 | background-color: var(--toolbar-field-background-color) !important; 17 | border-radius: 26px !important; 18 | position: relative !important; 19 | display: flex !important; 20 | padding: 2px !important; 21 | transition: background-color .1s var(--ease-basic) !important; 22 | } 23 | 24 | hbox[anonid="findbar-textbox-wrapper"]:hover 25 | { 26 | background-color: var(--toolbar-field-hover-background-color) !important; 27 | } 28 | 29 | hbox[anonid="findbar-textbox-wrapper"]:focus-within 30 | { 31 | background-color: var(--toolbar-field-focus-background-color) !important; 32 | border: 2px solid var(--toolbar-field-focus-border-color) !important; 33 | margin: -1px !important; 34 | padding: 1px !important; 35 | } 36 | 37 | hbox[anonid="findbar-textbox-wrapper"] toolbarbutton 38 | { 39 | border-radius: 99px !important; 40 | border: 0 !important; 41 | width: 30px !important; 42 | height: 30px !important; 43 | padding: 0 !important; 44 | display: flex !important; 45 | background: 0 !important; 46 | transition: background-color .2s var(--ease-basic) !important; 47 | margin: 0 !important; 48 | box-shadow: none !important; 49 | } 50 | 51 | hbox[anonid="findbar-textbox-wrapper"] toolbarbutton .toolbarbutton-text 52 | { 53 | visibility: collapse !important; 54 | } 55 | 56 | hbox[anonid="findbar-textbox-wrapper"] toolbarbutton:not([disabled]):hover 57 | { 58 | background-color: var(--toolbarbutton-hover-background) !important; 59 | } 60 | 61 | hbox[anonid="findbar-textbox-wrapper"] toolbarbutton:not([disabled]):hover:active 62 | { 63 | background-color: var(--toolbarbutton-active-background) !important; 64 | transition-duration: 0 !important; 65 | } -------------------------------------------------------------------------------- /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] .titlebar-buttonbox-container 10 | { 11 | height: 30px !important; 12 | } 13 | 14 | :root[tabsintitlebar][sizemode=normal] .titlebar-buttonbox-container 15 | { 16 | margin-block-start: calc(0px - (var(--space-above-tabbar) + 5px)) !important; 17 | } 18 | 19 | :root[tabsintitlebar][sizemode=maximized] .titlebar-buttonbox-container 20 | { 21 | margin-block-start: calc(2px - (var(--space-above-tabbar))) !important; 22 | } 23 | 24 | :root[tabsintitlebar][sizemode=maximized]:not([extradragspace]) .titlebar-buttonbox-container 25 | { 26 | -moz-box-align: start !important; 27 | margin-block-start: -5px !important; 28 | } 29 | 30 | @media (-moz-windows-accent-color-in-titlebar: 0) 31 | { 32 | :root[tabsintitlebar]:not(:-moz-lwtheme):not([privatebrowsingmode=temporary]) 33 | { 34 | background-color: #dee1e6 !important; 35 | color: #3c4043 !important; 36 | } 37 | 38 | :root[tabsintitlebar]:not(:-moz-lwtheme):not([privatebrowsingmode=temporary]):-moz-window-inactive 39 | { 40 | background-color: #e7eaed !important; 41 | color: #666a6d !important; 42 | } 43 | } 44 | } 45 | } 46 | } 47 | } 48 | 49 | #navigator-toolbox :-moz-any(toolbar, #nav-bar-customization-target):not(#toolbar-menubar) 50 | { 51 | -moz-box-align: center !important; 52 | } 53 | 54 | #navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)), 55 | /* no ::part workaround - may have side effects */ 56 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton), 57 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) 58 | { 59 | border-radius: 99px !important; 60 | transition-property: 61 | background-color, 62 | background-size, 63 | fill-opacity !important; 64 | transition-duration: .3s !important; 65 | transition-timing-function: 66 | var(--ease-basic), 67 | var(--ease-out), 68 | var(--ease-basic) !important; 69 | 70 | fill: currentColor !important; 71 | fill-opacity: 0 !important; 72 | 73 | background-image: 74 | url(circle.svg), 75 | url(circle.svg) !important; 76 | background-size: 25% !important; 77 | background-repeat: no-repeat !important; 78 | background-position: center !important; 79 | background-color: transparent !important; 80 | } 81 | 82 | #navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)), 83 | /* no ::part workaround - may have side effects */ 84 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton), 85 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) 86 | { 87 | font-size: 12px !important; 88 | padding: 0 !important; 89 | margin: 0 !important; 90 | border: 2px solid transparent !important; 91 | background-clip: padding-box !important; 92 | } 93 | 94 | #navigator-toolbox :-moz-any(.toolbarbutton-1, .scrollbutton-up, .scrollbutton-down), 95 | /* no ::part workaround - may have side effects */ 96 | .#scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton), 97 | .#scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) 98 | { 99 | max-height: 32px !important; 100 | height: 32px !important; 101 | min-height: 32px !important; 102 | } 103 | 104 | #navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton))[disabled], 105 | /* no ::part workaround - may have side effects */ 106 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton)[disabled], 107 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton)[disabled] 108 | { 109 | opacity: .42 !important; 110 | } 111 | 112 | #navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)):hover:not([disabled]), 113 | #navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)):-moz-any(:hover:active, [checked], [open]):not([disabled]), 114 | /* no ::part workaround - may have side effects */ 115 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton):hover:not([disabled]), 116 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton):hover:not([disabled]) 117 | { 118 | background-color: var(--toolbarbutton-hover-background) !important; 119 | } 120 | 121 | #navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)):-moz-any(:hover:active, [checked], [open]):not([disabled]), 122 | /* no ::part workaround - may have side effects */ 123 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton):hover:active:not([disabled]), 124 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton):hover:active:not([disabled]) 125 | { 126 | fill-opacity: .04 !important; 127 | background-size: 100% !important; 128 | } 129 | 130 | #navigator-toolbox :-moz-any(.toolbarbutton-icon, .toolbarbutton-badge-stack), 131 | /* no ::part workaround - may have side effects */ 132 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton) > .toolbarbutton-icon, 133 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) > .toolbarbutton-icon 134 | { 135 | fill-opacity: 1 !important; 136 | border: 0 !important; 137 | box-shadow: none !important; 138 | } 139 | 140 | #navigator-toolbox .toolbarbutton-1 > .toolbarbutton-icon 141 | { 142 | width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; 143 | height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; 144 | } 145 | 146 | #navigator-toolbox > #PersonalToolbar .toolbarbutton-1 > .toolbarbutton-icon, 147 | #navigator-toolbox .toolbarbutton-1 > :-moz-any(.toolbarbutton-icon, .toolbarbutton-badge-stack), 148 | /* no ::part workaround - may have side effects */ 149 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton) > .toolbarbutton-icon, 150 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) > .toolbarbutton-icon 151 | { 152 | padding: 6px !important; 153 | background: 0 !important; 154 | } 155 | 156 | /* 157 | hack: fix customization screen popping bug when changing ui density 158 | icon size is enforced and it doesn't like it when the normal density 159 | nav-bar height is less than 38px (it's 36px due to smaller back icon) 160 | */ 161 | :root:not([uidensity=compact]) #customization-content-container 162 | { 163 | padding-top: 1px !important; 164 | } 165 | 166 | :root:not([uidensity=compact]) :-moz-any(#customization-palette-container, #customization-panel-container) 167 | { 168 | margin-top: -1px !important; 169 | } 170 | 171 | .menu-iconic, 172 | .menuitem-iconic 173 | { 174 | fill: currentColor !important; 175 | } 176 | 177 | .pointerlockfswarning 178 | { 179 | display: flex !important; 180 | border-radius: 4px !important; 181 | padding: 6px !important; 182 | background: #333 !important; 183 | border: 0 !important; 184 | font-size: 14px !important; 185 | box-shadow: 186 | 0 3px 5px -1px rgba(0,0,0,.2), 187 | 0 6px 10px 0 rgba(0,0,0,.14), 188 | 0 1px 18px 0 rgba(0,0,0,.12) !important; 189 | color: hsla(0,0%,100%,.87) !important; 190 | transition-timing-function: var(--ease-out), linear !important; 191 | transition-property: transform, top !important; 192 | } 193 | 194 | #fullscreen-warning 195 | { 196 | flex-direction: column !important; 197 | min-width: 344px !important; 198 | } 199 | 200 | .pointerlockfswarning[hidden] 201 | { 202 | visibility: hidden !important; 203 | } 204 | 205 | /* hack to keep it in same place as [ontop] */ 206 | /* probably doesn't work for single-line */ 207 | .pointerlockfswarning:not([hidden]):not([ontop]) 208 | { 209 | top: -32px !important; 210 | } 211 | 212 | .pointerlockfswarning[ontop] 213 | { 214 | top: 28px !important; 215 | } 216 | 217 | .pointerlockfswarning::before 218 | { 219 | display: none !important; 220 | } 221 | 222 | .pointerlockfswarning-domain-text 223 | { 224 | margin-block: 8px 18px !important; 225 | margin-inline: 10px !important; 226 | font-size: unset !important; 227 | font-weight: unset !important; 228 | align-self: start !important; 229 | } 230 | 231 | .pointerlockfswarning-domain 232 | { 233 | font-weight: unset !important; 234 | } 235 | 236 | #fullscreen-exit-button 237 | { 238 | -moz-appearance: none !important; 239 | border: 0 !important; 240 | height: 32px !important; 241 | display: flex !important; 242 | align-items: center !important; 243 | margin-inline: 8px 0 !important; 244 | text-transform: uppercase !important; 245 | font-weight: 500 !important; 246 | letter-spacing: .0892857143em !important; 247 | background: 0 !important; 248 | position: relative !important; 249 | color: var(--toolbarbutton-icon-fill-attention) !important; 250 | align-self: end !important; 251 | font-family: Roboto, inherit !important; 252 | } 253 | 254 | #fullscreen-exit-button::before 255 | { 256 | content: "" !important; 257 | display: block !important; 258 | z-index: -1 !important; 259 | position: absolute !important; 260 | left: 0 !important; 261 | right: 0 !important; 262 | top: 0 !important; 263 | bottom: 0 !important; 264 | border-radius: 4px !important; 265 | background: currentColor !important; 266 | opacity: 0 !important; 267 | transition: opacity .3s var(--ease-basic) !important; 268 | } 269 | 270 | #fullscreen-exit-button:hover::before 271 | { 272 | opacity: .12 !important; 273 | } 274 | 275 | #fullscreen-exit-button:hover:active::before 276 | { 277 | opacity: .24 !important; 278 | transition-duration: .1s !important; 279 | } 280 | 281 | /* note: use Firefox account button instead */ 282 | #TabsToolbar .private-browsing-indicator 283 | { 284 | display: none !important; 285 | } 286 | 287 | /* high DPI adjustments */ 288 | @media (min--moz-device-pixel-ratio: 2) 289 | { 290 | #navigator-toolbox 291 | { 292 | border-bottom-width: .5px !important; 293 | padding-bottom: .5px !important; 294 | box-shadow: inset 0 -.5px var(--toolbar-bgcolor) !important; 295 | } 296 | } -------------------------------------------------------------------------------- /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 | --toolbar-color-unselected: #929497 !important; 18 | 19 | /* toolbar_bottom_separator */ 20 | --toolbox-border-bottom-color: none !important; /* legacy */ 21 | --chrome-content-separator-color: none !important; 22 | 23 | /* icons */ 24 | --lwt-toolbarbutton-icon-fill: #606368 !important; 25 | 26 | /* icons_attention */ 27 | --lwt-toolbarbutton-icon-fill-attention: #5086ec !important; 28 | 29 | /* button_background_hover */ 30 | --lwt-toolbarbutton-hover-background: rgba(0, 0, 0, .07) !important; 31 | 32 | /* button_background_active */ 33 | --lwt-toolbarbutton-active-background: rgba(0, 0, 0, .11) !important; 34 | 35 | --lwt-toolbar-field-color: #202124 !important; 36 | 37 | /* popup_highlight */ 38 | --autocomplete-popup-highlight-background: #f2f2f2 !important; 39 | 40 | /* popup_highlight_text */ 41 | --autocomplete-popup-highlight-color: #202124 !important; 42 | } 43 | 44 | /* don't bother with sidebar in light mode */ 45 | 46 | /* dark mode */ 47 | :root[style*="--lwt-accent-color:rgb(12, 12, 13);"], 48 | :root[privatebrowsingmode=temporary] 49 | { 50 | /* accentcolor */ 51 | --lwt-accent-color: #202124 !important; 52 | 53 | /* textcolor */ 54 | --lwt-text-color: #9ba0a5 !important; 55 | 56 | /* toolbar */ 57 | --toolbar-bgcolor: #333639 !important; 58 | 59 | /* toolbar_text */ 60 | --toolbar-color: #fff !important; 61 | --toolbar-color-unselected: #8F9091 !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: #ffffff !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 | } 99 | 100 | /* private mode specific */ 101 | :root[privatebrowsingmode=temporary] 102 | { 103 | --private-accent-color: #421163 !important; 104 | } 105 | 106 | :-moz-any(#sidebar-box, #sidebar)[style*="--sidebar-background-color:rgb(56, 56, 61);"] 107 | { 108 | /* sidebar */ 109 | --sidebar-background-color: #333639 !important; 110 | 111 | /* sidebar_text */ 112 | --sidebar-text-color: #f1f3ee !important; 113 | } 114 | 115 | :-moz-any(.sidebar-panel, body)[style*="--lwt-sidebar-background-color:rgb(56, 56, 61);"] 116 | { 117 | /* sidebar */ 118 | --lwt-sidebar-background-color: #333639 !important; 119 | 120 | /* sidebar_text */ 121 | --lwt-sidebar-text-color: #f1f3ee !important; 122 | } 123 | 124 | :root 125 | { 126 | --ease-in: cubic-bezier(.4, 0, 1, 1); 127 | --ease-out: cubic-bezier(0, 0, .2, 1); 128 | --ease-basic: linear; 129 | 130 | --button-size: 32px; /* is this used? */ 131 | --icon-size: 24px; /* is this used? */ 132 | 133 | --downloads-item-height: 48px !important; 134 | 135 | --toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor) !important; 136 | --toolbar-non-lwt-textcolor: var(--toolbar-color) !important; 137 | } 138 | 139 | #titlebar, 140 | #tabbrowser-tabs 141 | { 142 | --tab-min-height: 36px !important; 143 | } 144 | 145 | @supports -moz-bool-pref("materialFox.reduceTabOverflow") 146 | { 147 | #tabbrowser-tabs 148 | { 149 | --tab-min-width: 32px !important; 150 | } 151 | } 152 | 153 | :root 154 | { 155 | --tab-separator-opacity: .35 !important; 156 | 157 | --toolbar-field-background-color: none !important; 158 | --toolbar-field-hover-background-color: hsl(216, 12%, 92%) !important; 159 | --toolbar-field-focus-background-color: hsl(0, 0%, 100%) !important; 160 | } 161 | 162 | :root:-moz-lwtheme-brighttext 163 | { 164 | --toolbar-field-background-color: none !important; 165 | --toolbar-field-hover-background-color: #292a2d !important; 166 | --toolbar-field-focus-background-color: #202124 !important; 167 | } 168 | 169 | :root[privatebrowsingmode=temporary] 170 | { 171 | --toolbar-field-background-color: none !important; 172 | --toolbar-field-hover-background-color: rgba(0, 0, 0, 0.2) !important; 173 | --toolbar-field-focus-background-color: rgba(0, 0, 0, 0.4) !important; 174 | 175 | /* button_background_hover */ 176 | --lwt-toolbarbutton-hover-background: rgba(0, 0, 0, 0.2) !important; 177 | 178 | /* button_background_active */ 179 | --lwt-toolbarbutton-active-background: rgba(0, 0, 0, 0.4) !important; 180 | } 181 | 182 | :root[privatebrowsingmode=temporary] #urlbar 183 | { 184 | --toolbar-field-background-color: none !important; 185 | --toolbar-field-hover-background-color: #350D50 !important; 186 | --toolbar-field-focus-background-color: #2B0B41 !important; 187 | 188 | /* button_background_hover */ 189 | --toolbarbutton-hover-background: #350D50 !important; 190 | 191 | /* button_background_active */ 192 | --toolbarbutton-active-background: #2B0B41 !important; 193 | } 194 | 195 | :root:not(:-moz-lwtheme):not([privatebrowsingmode=temporary]) 196 | { 197 | --toolbar-bgcolor: hsl(0, 0%, 100%) !important; 198 | --toolbar-color: hsl(213, 5%, 39%) !important; 199 | --toolbox-border-bottom-color: hsl(0, 0%, 70%) !important; 200 | } 201 | 202 | @media (-moz-mac-yosemite-theme) 203 | { 204 | :root[extradragspace] 205 | { 206 | --space-above-tabbar: 8px !important; 207 | } 208 | } 209 | 210 | /* Ubuntu */ 211 | @media (-moz-gtk-csd-available) 212 | { 213 | :root:not(:-moz-lwtheme):not([privatebrowsingmode=temporary]) 214 | { 215 | --toolbar-bgcolor: -moz-dialog !important; 216 | --toolbar-color: -moz-dialogtext !important; 217 | } 218 | } 219 | 220 | :root:-moz-lwtheme-darktext, 221 | :root toolbar:not([brighttext]), 222 | .tabbrowser-tab[visuallyselected] 223 | { 224 | --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, hsla(0, 0%, 0%, .07)) !important; 225 | --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, hsla(0, 0%, 0%, .11)) !important; 226 | } 227 | 228 | :root:-moz-lwtheme-brighttext, 229 | :root toolbar[brighttext], 230 | .tabbrowser-tab[visuallyselected]:-moz-lwtheme-brighttext 231 | { 232 | --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, hsla(0, 0%, 100%, .1)) !important; 233 | --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, hsla(0, 0%, 100%, .17)) !important; 234 | } 235 | 236 | /* special case for urlbar buttons */ 237 | :-moz-any(#urlbar, #searchbar) 238 | { 239 | --toolbarbutton-hover-background: hsl(210, 5%, 85%) !important; 240 | --toolbarbutton-active-background: hsl(210, 4%, 80%) !important; 241 | } 242 | 243 | :root:-moz-any([privatebrowsingmode=temporary], :-moz-lwtheme-brighttext) :-moz-any(#urlbar, #searchbar) 244 | { 245 | --toolbarbutton-hover-background: hsl(206, 5%, 26%) !important; 246 | --toolbarbutton-active-background: hsl(210, 4%, 31%) !important; 247 | } -------------------------------------------------------------------------------- /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, 32 | #context-forward 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 | #appMenu-cut-button 206 | { 207 | list-style-image: url(cut.svg) !important; 208 | } 209 | 210 | #appMenu-copy-button 211 | { 212 | list-style-image: url(copy.svg) !important; 213 | } 214 | 215 | #appMenu-paste-button 216 | { 217 | list-style-image: url(paste.svg) !important; 218 | } 219 | 220 | #appMenu-fxa-label, 221 | #PanelUI-fxa-menu-syncnow-button, 222 | #appMenu-fxa-icon, 223 | #PanelUI-remotetabs-syncnow 224 | { 225 | list-style-image: url(sync.svg) !important; 226 | } 227 | 228 | .tab-icon-image:not([src]) 229 | { 230 | list-style-image: url(globe.svg) !important; 231 | } 232 | 233 | .tab-icon-image[src="chrome://browser/skin/settings.svg"] 234 | { 235 | display: none !important; 236 | } 237 | 238 | .tab-icon-image[src="chrome://browser/skin/settings.svg"] ~ .tab-icon-overlay 239 | { 240 | display: -moz-box !important; 241 | margin: 0 !important; 242 | list-style-image: url(settings.svg) !important; 243 | -moz-context-properties: fill, fill-opacity !important; 244 | fill: currentColor !important; 245 | } 246 | 247 | .tab-icon-overlay[soundplaying], 248 | .tab-icon-sound 249 | { 250 | list-style-image: url(audio.svg) !important; 251 | } 252 | 253 | .tab-icon-overlay[muted], 254 | .tab-icon-sound[muted] 255 | { 256 | list-style-image: url(audio-muted.svg) !important; 257 | } 258 | 259 | .tab-icon-overlay[activemedia-blocked], 260 | .tab-icon-sound[activemedia-blocked] 261 | { 262 | list-style-image: url(media-blocked.svg) !important; 263 | } 264 | 265 | .downloadIconShow .button-icon 266 | { 267 | list-style-image: url(folder.svg) !important; 268 | } 269 | 270 | .panel-banner-item[notificationid^="update"] 271 | { 272 | list-style-image: url(menu-update.svg) !important; 273 | -moz-context-properties: fill, fill-opacity !important; 274 | fill: currentColor !important; 275 | } 276 | 277 | /* high DPI adjustments */ 278 | @media (min--moz-device-pixel-ratio: 2) 279 | { 280 | .toolbarbutton-1:-moz-any(#back-button, #forward-button), 281 | #context-back, 282 | #context-forward, 283 | .subviewbutton-back, 284 | .identity-popup-expander 285 | { 286 | list-style-image: url(arrow-back-2x.svg) !important; 287 | } 288 | 289 | #PanelUI-menu-button:not([badge-status|="update"]) .toolbarbutton-icon 290 | { 291 | transform: translate(-.5px, -.5px) !important; 292 | } 293 | 294 | #stop-button 295 | { 296 | list-style-image: url(stop-2x.svg) !important; 297 | } 298 | 299 | #reload-button, 300 | #context-reload 301 | { 302 | list-style-image: url(refresh-2x.svg) !important; 303 | } 304 | 305 | #home-button 306 | { 307 | list-style-image: url(home-2x.svg) !important; 308 | } 309 | 310 | #star-button, 311 | #context-bookmarkpage, 312 | #pageAction-panel-bookmark, 313 | #panelMenuBookmarkThisPage 314 | { 315 | list-style-image: url(star-2x.svg) !important; 316 | } 317 | 318 | #bookmarks-menu-button .toolbarbutton-icon 319 | { 320 | transform: translateX(.5px) !important; 321 | } 322 | 323 | #library-button 324 | { 325 | list-style-image: url(library-2x.svg) !important; 326 | } 327 | } -------------------------------------------------------------------------------- /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/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: 46px !important; 4 | box-shadow: none !important; 5 | padding-inline: 6px 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: 8px !important; 4 | } 5 | -------------------------------------------------------------------------------- /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 | menupopup menuitem, 3 | menupopup menu, 4 | menupopup menuseparator 5 | { 6 | -moz-appearance: none !important; 7 | } 8 | 9 | menupopup, 10 | panel[type="autocomplete-richlistbox"] 11 | { 12 | -moz-window-shadow: none !important; 13 | background: 0 !important; 14 | border: 0 !important; 15 | color: var(--arrowpanel-color) !important; 16 | box-sizing: content-box !important; 17 | } 18 | 19 | menupopup 20 | { 21 | padding: 11px 14px 18px !important; 22 | margin: -19px -14px 0 !important; 23 | } 24 | 25 | /* needs to align with textbox/bookmark-button but can't overlap it */ 26 | panel[type="autocomplete-richlistbox"], 27 | .bookmark-item:not(menu) > menupopup[placespopup] 28 | { 29 | padding: 1px 14px 18px !important; 30 | margin: 0 -14px 0 !important; 31 | } 32 | 33 | .panel-arrowcontent 34 | { 35 | background: 0 !important; 36 | padding: 0 !important; 37 | box-shadow: none !important; 38 | font: -moz-pull-down-menu !important; 39 | border: 0 !important; 40 | } 41 | 42 | .popup-internal-box, 43 | panel[type="autocomplete-richlistbox"] > .autocomplete-richlistbox, 44 | #PopupSearchAutoComplete > *, 45 | .menupopup-arrowscrollbox 46 | { 47 | background: var(--arrowpanel-background) !important; 48 | } 49 | 50 | /* themes a menupopup (or other root level / shadow dom popup) as a panel */ 51 | /* Mozilla's use of shadow dom means we can't use a menupopup > .popup-internal-box */ 52 | .popup-internal-box, 53 | panel[type="autocomplete-richlistbox"] > .autocomplete-richlistbox, 54 | .menupopup-arrowscrollbox 55 | { 56 | margin: 0 !important; 57 | padding: 8px 0 !important; 58 | border-radius: 4px !important; 59 | color: inherit !important; 60 | } 61 | 62 | .popup-internal-box, 63 | .menupopup-arrowscrollbox 64 | { 65 | box-shadow: 66 | 0 5px 5px -3px rgba(0,0,0,.2), 67 | 0 8px 10px 1px rgba(0,0,0,.14), 68 | 0 3px 14px 2px rgba(0,0,0,.12) !important; 69 | } 70 | 71 | #PopupSearchAutoComplete > * 72 | { 73 | border-radius: 0 !important; 74 | } 75 | 76 | #PopupSearchAutoComplete > :first-child 77 | { 78 | border-radius: 4px 4px 0 0 !important; 79 | } 80 | 81 | #PopupSearchAutoComplete > :last-child 82 | { 83 | border-radius: 0 0 4px 4px !important; 84 | } 85 | 86 | /* autocomplete panel can't overlap the textbox, so shadow can't go up 87 | more than 1px */ 88 | panel[type="autocomplete-richlistbox"] > .autocomplete-richlistbox 89 | { 90 | box-shadow: 91 | 0 0 0 1px rgba(0, 0, 0, .03), 92 | 0 5px 5px -3px rgba(0, 0, 0, .2), 93 | 0 8px 10px -0px rgba(0, 0, 0, .14), 94 | 0 3px 14px -5px rgba(0, 0, 0, .12) !important; 95 | } 96 | 97 | /* search panel gets special treatment; it has multiple children */ 98 | #PopupSearchAutoComplete > .autocomplete-richlistbox 99 | { 100 | box-shadow: none !important; 101 | } 102 | 103 | #PopupSearchAutoComplete 104 | { 105 | filter: 106 | drop-shadow(0 8px 6px rgba(0, 0, 0, .25)) 107 | drop-shadow(0 1px 1px rgba(0, 0, 0, .125)) !important; 108 | } 109 | 110 | /* reset non-layout props when embedded in a panel 111 | (panel handles panel theming in this case) */ 112 | .panel-arrowcontent > .popup-internal-box 113 | { 114 | background: 0 !important; 115 | border-radius: 0 !important; 116 | box-shadow: none !important; 117 | } 118 | 119 | /* shotgun approach to undo this selector... 120 | #BMB_bookmarksPopup menupopup[placespopup="true"]:-moz-lwtheme::part(innerbox) 121 | ...without being able to use ::part() in userChrome.css */ 122 | [part="innerbox"] 123 | { 124 | /* this could cause side effects elsewhere */ 125 | box-shadow: none !important; 126 | margin: 0 !important; 127 | } 128 | 129 | menupopup menuseparator 130 | { 131 | margin: 8px 0 !important; 132 | padding: 0 !important; 133 | height: 1px !important; 134 | background: currentColor !important; 135 | opacity: .12 !important; 136 | } 137 | 138 | menupopup menuitem, 139 | menupopup menu, 140 | .autocomplete-richlistitem 141 | { 142 | height: 32px !important; 143 | padding: 0 16px !important; 144 | border: 0 !important; 145 | background: 0 !important; 146 | color: inherit !important; 147 | fill-opacity: initial !important; 148 | } 149 | 150 | menupopup menuitem:hover:not([disabled=true]), 151 | menupopup menu:hover:not([disabled=true]), 152 | .autocomplete-richlistitem:hover:not([disabled=true]):not([selected=true]) 153 | { 154 | background-color: var(--arrowpanel-dimmed) !important; 155 | } 156 | 157 | menupopup menuitem:hover:active:not([disabled=true]), 158 | menupopup menu:hover:active:not([disabled=true]), 159 | .autocomplete-richlistitem:hover:active:not([disabled=true]), 160 | .autocomplete-richlistitem[selected=true] 161 | { 162 | background-color: var(--arrowpanel-dimmed-further) !important; 163 | } 164 | 165 | menupopup menuitem[disabled=true], 166 | menupopup menu[disabled=true], 167 | .autocomplete-richlistitem[disabled=true] 168 | { 169 | opacity: .5 !important; 170 | } 171 | 172 | /* disable vertical menu scroll buttons and use a good ol' scrollbar */ 173 | /* this is a shotgun approach, expect side effects */ 174 | scrollbox[orient=vertical] /* >=71 */ 175 | { 176 | overflow-y: auto !important; 177 | } 178 | 179 | /* why still use scroll buttons; is this the middle ages? */ 180 | .menupopup-scrollbutton 181 | { 182 | display: none !important; 183 | } 184 | 185 | .menu-iconic-left 186 | { 187 | -moz-appearance: none !important; 188 | } 189 | 190 | /* hide icon if no image (default on macOS but not Windows) */ 191 | .subviewbutton:not(:-moz-any([image], [targetURI], .bookmark-item)) > .menu-iconic-left 192 | { 193 | display: none; 194 | } 195 | 196 | .menu-iconic-icon 197 | { 198 | fill: currentColor !important; 199 | -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important; 200 | margin-inline-start: 0 !important; 201 | margin-inline-end: 16px !important; 202 | width: 24px !important; 203 | height: 24px !important; 204 | padding: 4px !important; 205 | } 206 | 207 | .menu-text 208 | { 209 | -moz-appearance: none !important; 210 | padding: 0 !important; 211 | } 212 | 213 | .menu-right 214 | { 215 | -moz-appearance: none !important; 216 | -moz-context-properties: fill !important; 217 | fill: currentColor !important; 218 | list-style-image: url(menu-right-2x.svg) !important; 219 | margin-inline-end: 0 !important; 220 | margin-inline-start: 16px !important; 221 | } 222 | 223 | menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon, 224 | menuitem[checked="true"] > .menu-iconic-left > .menu-iconic-icon, 225 | menuitem[type="radio"] > .menu-iconic-left > .menu-iconic-icon 226 | { 227 | display: -moz-box !important; 228 | padding: 3px !important; 229 | } 230 | 231 | menuitem[checked="true"] > .menu-iconic-left > .menu-iconic-icon 232 | { 233 | /* checkmark is 18px, not 16px, hence reduced padding */ 234 | list-style-image: url(checkmark-18dp.svg) !important; 235 | } 236 | 237 | #context-navigation 238 | { 239 | background: 0 !important; 240 | } 241 | 242 | #context-navigation .menuitem-iconic 243 | { 244 | background: 0 !important; 245 | padding: 0 !important; 246 | margin: 0 !important; 247 | } 248 | 249 | #context-navigation .menu-iconic-left 250 | { 251 | border-radius: 50% !important; 252 | padding: 8px !important; 253 | } 254 | 255 | #context-navigation .menu-iconic-icon 256 | { 257 | padding: 0 !important; 258 | margin: 0 !important; 259 | width: 16px !important; 260 | height: 16px !important; 261 | } 262 | 263 | #context-navigation .menuitem-iconic:hover:not([disabled]) .menu-iconic-left 264 | { 265 | background-color: var(--arrowpanel-dimmed) !important; 266 | } 267 | 268 | #context-navigation .menuitem-iconic:hover:active:not([disabled]) .menu-iconic-left 269 | { 270 | background-color: var(--arrowpanel-dimmed-further) !important; 271 | } 272 | 273 | panel[type="arrow"] 274 | { 275 | -moz-window-shadow: none !important; 276 | 277 | margin: 0 -14px -18px !important; 278 | padding: 0 14px 18px !important; 279 | } 280 | 281 | panel[type="arrow"][side="top"], 282 | panel[type="arrow"][side="bottom"] 283 | { 284 | margin-left: -39px !important; 285 | margin-right: -39px !important; 286 | } 287 | 288 | panel[type="arrow"][side="left"], 289 | panel[type="arrow"][side="right"] 290 | { 291 | margin-top: -44px; 292 | margin-bottom: -44px; 293 | } 294 | 295 | .panel-arrowcontent 296 | { 297 | background: var(--arrowpanel-background) !important; 298 | border: 0 !important; 299 | border-radius: 4px !important; 300 | box-shadow: 301 | 0 5px 5px -3px rgba(0, 0, 0, .2), 302 | 0 8px 10px 1px rgba(0, 0, 0, .14), 303 | 0 3px 14px 2px rgba(0, 0, 0, .12) !important; 304 | color: var(--arrowpanel-color) !important; 305 | } 306 | 307 | .panel-arrowbox, 308 | .cui-widget-panel .panel-arrowbox 309 | { 310 | display: none !important; 311 | } 312 | 313 | /* .subview-subheader, */ 314 | panelview .toolbarbutton-1, 315 | .subviewbutton, 316 | .widget-overflow-list .toolbarbutton-1, 317 | .panel-banner-item 318 | { 319 | min-height: 32px !important; 320 | padding: 0 16px !important; 321 | } 322 | 323 | .subviewbutton .toolbarbutton-icon, 324 | .panel-banner-item .toolbarbutton-icon 325 | { 326 | margin-inline-end: 16px !important; 327 | width: 24px !important; 328 | height: 24px !important; 329 | padding: 4px !important; 330 | } 331 | 332 | .subviewbutton label, 333 | .panel-banner-item label 334 | { 335 | padding-inline-start: 0 !important; 336 | } 337 | 338 | #appMenu-zoom-controls > .subviewbutton, 339 | #appMenu-edit-controls > .subviewbutton 340 | { 341 | min-width: 32px !important; 342 | border-radius: 16px !important; 343 | padding: 0 8px !important; 344 | border: 0 !important; 345 | margin-inline-start: 4px !important; 346 | } 347 | 348 | #appMenu-zoom-controls > toolbarseparator[orient="vertical"] + .subviewbutton 349 | { 350 | margin-inline-start: 0 !important; 351 | } 352 | 353 | #appMenu-zoom-controls > .subviewbutton-iconic, 354 | #appMenu-edit-controls > .subviewbutton-iconic 355 | { 356 | padding: 0 !important; 357 | } 358 | 359 | .panel-banner-item 360 | { 361 | border: 0 !important; 362 | } 363 | 364 | #appMenu-addon-banners:not(:empty) ~ #appMenu-fxa-status, 365 | .panel-banner-item:not([hidden]) + #appMenu-fxa-status 366 | { 367 | border-top: 1px solid var(--panel-separator-color) !important; 368 | margin-top: 5px !important; 369 | padding-top: 5px !important; 370 | } 371 | 372 | #appMenu-fxa-avatar 373 | { 374 | display: none !important; 375 | } 376 | 377 | :root[fxastatus="signedin"] #appMenu-fxa-label 378 | { 379 | list-style-image: var(--avatar-image-url) !important; 380 | margin: 0 !important; 381 | } 382 | 383 | :root[fxastatus="signedin"] #appMenu-fxa-label > .toolbarbutton-icon 384 | { 385 | display: -moz-box !important; 386 | border-radius: 99px !important; 387 | padding: 2px !important; 388 | } 389 | 390 | .panel-banner-item[notificationid="update-restart"]::after 391 | { 392 | display: none !important; 393 | } 394 | 395 | .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), 396 | [overflowedItem="true"]) > toolbarbutton > .toolbarbutton-icon 397 | { 398 | margin: 0 !important; 399 | } 400 | 401 | panelmultiview .toolbaritem-combined-buttons > spacer.before-label 402 | { 403 | width: 20px !important; 404 | } 405 | 406 | panelmultiview .toolbaritem-combined-buttons > spacer.after-label 407 | { 408 | width: 14px !important; 409 | } 410 | 411 | .subviewbutton-back 412 | { 413 | padding: 4px !important; 414 | border-radius: 16px !important; 415 | } 416 | 417 | .subviewbutton-back .toolbarbutton-icon 418 | { 419 | margin: 0 !important; 420 | } 421 | 422 | .subviewbutton[type="highlight-history"]::after 423 | { 424 | transform: none !important; 425 | } 426 | 427 | .subviewbutton[type="highlight-history"]::after, 428 | .subviewbutton[shortcut]::after, 429 | .PanelUI-subView .subviewbutton-nav::after 430 | { 431 | margin-inline-start: 14px !important; 432 | } 433 | 434 | .PanelUI-subView .subviewbutton-nav::after 435 | { 436 | transform: none !important; 437 | content: url(menu-right-1x.svg) !important; 438 | fill-opacity: 1 !important; 439 | } 440 | 441 | #identity-popup > .panel-arrowcontainer > .panel-arrowcontent 442 | { 443 | fill-opacity: inherit !important; 444 | } 445 | 446 | .identity-popup-preferences-button 447 | { 448 | border-radius: 16px !important; 449 | background-image: none !important; 450 | } 451 | 452 | .identity-popup-preferences-button > .toolbarbutton-icon 453 | { 454 | margin: 0 !important; 455 | } 456 | 457 | #identity-popup-permission-preferences-button 458 | { 459 | padding: 0 !important; 460 | } 461 | 462 | #tracking-protection-preferences-button > .toolbarbutton-icon 463 | { 464 | margin-inline-end: -8px !important; 465 | } 466 | 467 | #tracking-protection-preferences-button > .toolbarbutton-text 468 | { 469 | padding-inline-end: 4px !important; 470 | -moz-box-ordinal-group: 0 !important; 471 | } 472 | 473 | .identity-popup-section 474 | { 475 | padding: 16px !important; 476 | display: flex !important; 477 | } 478 | 479 | .identity-popup-security-content, 480 | #identity-popup-content-blocking-content, 481 | #identity-popup-permissions-content 482 | { 483 | padding: 0 !important; 484 | background: 0 !important; 485 | fill-opacity: inherit !important; 486 | } 487 | 488 | .identity-popup-expander 489 | { 490 | border-radius: 16px !important; 491 | width: 32px !important; 492 | max-height: 32px !important; 493 | margin-inline-start: auto !important; 494 | -moz-box-pack: center !important; 495 | -moz-box-align: center !important; 496 | background-image: none !important; 497 | } 498 | 499 | .identity-popup-expander > .button-box 500 | { 501 | border: 0 !important; 502 | display: flex !important; 503 | justify-content: center !important; 504 | } 505 | 506 | .identity-popup-expander .button-icon 507 | { 508 | margin: 0 !important; 509 | } 510 | 511 | .identity-popup-expander .button-text 512 | { 513 | display: none !important; 514 | } 515 | 516 | .identity-popup-headline 517 | { 518 | margin: 0 !important; 519 | } 520 | 521 | .PanelUI-subView > .identity-popup-security-content, 522 | #identity-popup-securityView-body 523 | { 524 | padding: 16px !important; 525 | } 526 | 527 | #identity-popup-mainView-panel-header 528 | { 529 | -moz-box-align: start !important; 530 | padding: 16px !important; 531 | } 532 | 533 | #identity-popup-securityView-body 534 | { 535 | margin: 0 !important; 536 | } 537 | 538 | #identity-popup-content-blocking-content, 539 | #identity-popup-permissions-content 540 | { 541 | display: flex !important; 542 | flex-direction: column !important; 543 | width: 100% !important; 544 | } 545 | 546 | #identity-popup-content-blocking-content > hbox:first-child, 547 | #identity-popup-permissions-content > hbox:first-child 548 | { 549 | display: flex !important; 550 | } 551 | 552 | #identity-popup-content-blocking-category-list, 553 | #identity-popup-permission-list 554 | { 555 | display: flex !important; 556 | flex-direction: column !important; 557 | margin: 0 -16px !important; 558 | width: calc(100% + 32px) !important; 559 | padding-top: 8px !important; 560 | } 561 | 562 | .identity-popup-permission-item 563 | { 564 | display: flex !important; 565 | align-items: center !important; 566 | } 567 | 568 | .identity-popup-permission-label, 569 | #identity-popup-content-blocking-report-breakage 570 | { 571 | flex: 1 !important; 572 | text-decoration: none !important; 573 | cursor: auto !important; 574 | color: inherit !important; 575 | } 576 | 577 | .identity-popup-content-blocking-category, 578 | .identity-popup-permission-item 579 | { 580 | height: 32px !important; 581 | padding: 0 16px !important; 582 | } 583 | 584 | .identity-popup-content-blocking-category-icon, 585 | .identity-popup-permission-icon 586 | { 587 | margin: 0 !important; 588 | margin-inline-end: 16px !important; 589 | } 590 | 591 | .popup-notification-icon, 592 | .identity-popup-permission-icon 593 | { 594 | fill-opacity: 1 !important; 595 | } 596 | 597 | .identity-popup-content-blocking-category-label, 598 | .identity-popup-permission-label 599 | { 600 | margin: 0 !important; 601 | } 602 | 603 | .identity-popup-content-blocking-category::after 604 | { 605 | transform: translateY(1px) !important; 606 | content: url(menu-right-1x.svg) !important; 607 | margin: 0 !important; 608 | } 609 | 610 | .identity-popup-preferences-button 611 | { 612 | margin-inline-start: auto !important; 613 | } 614 | 615 | .identity-popup-permission-remove-button 616 | { 617 | opacity: 1 !important; 618 | } 619 | 620 | .tracking-protection-button, 621 | #identity-popup-content-blocking-report-breakage 622 | { 623 | margin: 0 -16px !important; 624 | height: 32px !important; 625 | padding: 0 16px !important; 626 | background: 0 !important; 627 | color: inherit !important; 628 | line-height: 32px !important; 629 | } 630 | 631 | #identity-popup-content-blocking-report-breakage 632 | { 633 | padding-inline-start: 50px !important; 634 | } 635 | 636 | .tracking-protection-button > .button-box 637 | { 638 | padding: 0 !important; 639 | } 640 | 641 | .tracking-protection-button .button-icon 642 | { 643 | margin: 0 !important; 644 | } 645 | 646 | #customization-lwtheme-menu-header 647 | { 648 | display: none !important; 649 | } 650 | 651 | #identity-popup-content-blocking-report-breakage, 652 | { 653 | padding-inline-start: 48px !important; 654 | line-height: 32px !important; 655 | text-decoration: none !important; 656 | cursor: auto !important; 657 | } 658 | 659 | .tracking-protection-button:hover:not([disabled=true]), 660 | #identity-popup-content-blocking-report-breakage:hover, 661 | #blocked-popup-indicator-item:hover, 662 | .customization-lwtheme-menu-theme:hover, 663 | #customization-lwtheme-menu-footer toolbarbutton:hover 664 | { 665 | background-color: var(--arrowpanel-dimmed) !important; 666 | } 667 | 668 | .tracking-protection-button:hover:active:not([disabled=true]), 669 | #identity-popup-content-blocking-report-breakage:hover:active, 670 | #blocked-popup-indicator-item:hover:active, 671 | .customization-lwtheme-menu-theme:hover:active, 672 | #customization-lwtheme-menu-footer toolbarbutton:hover:active 673 | { 674 | background-color: var(--arrowpanel-dimmed-further) !important; 675 | } 676 | 677 | .identity-popup-content-blocking-empty-label, 678 | #tracking-protection-preferences-button > .toolbarbutton-text, 679 | .tracking-protection-button, 680 | #identity-popup-trackersView-strict-info > label, 681 | .identity-popup-cookiesView-list-header, 682 | .identity-popup-content-blocking-list-item > label, 683 | #identity-popup-mainView-panel-header > label, 684 | #identity-popup-trackersView > .panel-header, 685 | #identity-popup-securityView > .panel-header, 686 | #identity-popup-breakageReportView > .panel-header, 687 | #identity-popup-content-blocking-report-breakage, 688 | .identity-popup-content-blocking-category-label, 689 | .identity-popup-content-blocking-category-state-label, 690 | .identity-popup-permission-label, 691 | .identity-popup-permission-state-label, 692 | #identity-popup-security-descriptions > description, 693 | #identity-popup-securityView-body > description, 694 | #identity-popup-permissions-content > description, 695 | #identity-popup-content-blocking-content > description 696 | { 697 | font-size: 100% !important; 698 | } 699 | 700 | .panel-header > label 701 | { 702 | text-align: start !important; 703 | margin-inline-start: 4px !important; 704 | } 705 | 706 | .identity-popup-headline 707 | { 708 | font-size: 110% !important; 709 | } 710 | 711 | .identity-popup-security-content > description, 712 | #identity-popup-content-blocking-content > description, 713 | #identity-popup-permissions-content > description, 714 | .identity-popup-content-blocking-category-state-label, 715 | .identity-popup-permission-state-label 716 | { 717 | font-size: 85% !important; 718 | } 719 | 720 | #identity-popup-permissions-content > description, 721 | #identity-popup-content-blocking-content > description 722 | { 723 | color: inherit !important; 724 | opacity: .6 !important; 725 | } 726 | 727 | .identity-popup-content-blocking-category-state-label 728 | { 729 | transform: translateY(1px) !important; 730 | } 731 | 732 | .tracking-protection-button > .button-box, 733 | .panel-footer button > .button-box 734 | { 735 | display: flex !important; 736 | align-items: center !important; 737 | } 738 | 739 | .tracking-protection-button .button-icon, 740 | .panel-footer button .button-icon 741 | { 742 | padding-inline-end: 16px !important; 743 | } 744 | 745 | .tracking-protection-button .button-text, 746 | .panel-footer button .button-text 747 | { 748 | margin: 0 !important; 749 | } 750 | 751 | #downloadsPanel-multiView 752 | { 753 | padding-top: 8px !important; 754 | } 755 | 756 | #downloadsListBox .download-state 757 | { 758 | display: flex !important; 759 | width: 100% !important; 760 | align-items: center !important; 761 | } 762 | 763 | #downloadsListBox .downloadMainArea 764 | { 765 | padding: 0 !important; 766 | display: flex !important; 767 | flex: 1 !important; 768 | margin-inline-end: -48px !important; 769 | padding-inline-end: 48px !important; 770 | padding-inline-start: 16px !important; 771 | height: 100% !important; 772 | align-items: center !important; 773 | } 774 | 775 | #downloadsListBox .downloadContainer 776 | { 777 | display: flex !important; 778 | flex-direction: column !important; 779 | flex: 1 !important; 780 | } 781 | 782 | #downloadsListBox .downloadTypeIcon 783 | { 784 | margin: 0 !important; 785 | margin-inline-end: 16px !important; 786 | } 787 | 788 | #downloadsListBox .downloadTarget 789 | { 790 | font-size: 100% !important; 791 | } 792 | 793 | #downloadsListBox .downloadDetails 794 | { 795 | font-size: 85% !important; 796 | } 797 | 798 | #downloadsListBox > richlistitem > toolbarseparator 799 | { 800 | display: none !important; 801 | } 802 | 803 | #downloadsListBox .downloadButton 804 | { 805 | margin-inline-end: 16px !important; 806 | height: 32px !important; 807 | min-width: 32px !important; 808 | border-radius: 16px !important; 809 | fill: currentColor !important; 810 | -moz-context-properties: fill, fill-opacity !important; 811 | display: block !important; 812 | } 813 | 814 | #downloadsListBox .downloadButton .button-box 815 | { 816 | display: flex !important; 817 | align-items: center !important; 818 | justify-content: center !important; 819 | max-width: 32px !important; 820 | } 821 | 822 | #confirmation-hint .panel-arrowcontent, 823 | #UITourTooltip .panel-arrowcontent, 824 | #customization-lwtheme-menu .panel-arrowcontent, 825 | #customization-uidensity-menu .panel-arrowcontent 826 | { 827 | padding: 16px !important; 828 | } 829 | 830 | #customization-uidensity-menu .panel-arrowcontent, 831 | #customization-lwtheme-menu .panel-arrowcontent 832 | { 833 | padding-top: 8px !important; 834 | } 835 | 836 | .customization-lwtheme-menu-theme, 837 | .customization-uidensity-menuitem 838 | { 839 | padding: 0 16px !important; 840 | margin: 0 -16px !important; 841 | border: 0 !important; 842 | height: 48px !important; 843 | } 844 | 845 | .customization-lwtheme-menu-theme .toolbarbutton-icon, 846 | .customization-uidensity-menuitem .menu-iconic-icon 847 | { 848 | margin: 0 !important; 849 | margin-inline-end: 16px !important; 850 | padding: 0 !important; 851 | width: 24px !important; 852 | height: 24px !important; 853 | } 854 | 855 | .customization-lwtheme-menu-theme[active]:not(:hover):not(:active), 856 | .customization-uidensity-menuitem[active]:not(:hover):not(:active) 857 | { 858 | background: 0 !important; 859 | } 860 | 861 | .customization-lwtheme-menu-theme[active]::after, 862 | .customization-uidensity-menuitem[active]::after 863 | { 864 | content: url(checkmark-18dp.svg) !important; 865 | -moz-context-properties: fill, fill-opacity !important; 866 | fill: currentColor !important; 867 | display: -moz-box !important; 868 | width: 18px !important; 869 | height: 18px !important; 870 | margin-inline-start: 16px !important; 871 | } 872 | 873 | #customization-lwtheme-menu-footer 874 | { 875 | padding: 0 !important; 876 | background: 0 !important; 877 | border: 0 !important; 878 | display: flex !important; 879 | flex-direction: column !important; 880 | } 881 | 882 | #customization-lwtheme-menu-footer toolbarbutton 883 | { 884 | border: 0 !important; 885 | margin: 0 -6px 0 !important; 886 | height: 48px !important; 887 | padding: 0 16px !important; 888 | display: flex !important; 889 | background-image: none !important; 890 | } 891 | 892 | #customization-lwtheme-menu-footer toolbarbutton .toolbarbutton-text 893 | { 894 | text-align: start !important; 895 | } 896 | 897 | .panel-footer 898 | { 899 | padding: 4px !important; 900 | background: 0 !important; 901 | border-top: 1px solid var(--panel-separator-color) !important; 902 | justify-content: end !important; 903 | display: flex !important; 904 | } 905 | 906 | .panel-footer button 907 | { 908 | border: 0 !important; 909 | border-radius: 4px !important; 910 | margin: 4px !important; 911 | height: 32px !important; 912 | padding: 0 !important; 913 | flex: 0 0 auto !important; 914 | position: relative !important; 915 | outline: 0 !important; 916 | } 917 | 918 | .panel-footer button > .button-box 919 | { 920 | -moz-appearance: none !important; 921 | position: relative !important; 922 | padding-inline-end: 16px !important; 923 | } 924 | 925 | .panel-footer button .button-menu-dropmarker 926 | { 927 | margin-inline-start: 8px !important; 928 | margin-inline-end: -8px !important; 929 | } 930 | 931 | .panel-footer button:not([default]) > .button-box::before 932 | { 933 | content: "" !important; 934 | display: block !important; 935 | border-radius: 4px !important; 936 | position: absolute !important; 937 | left: 0 !important; 938 | top: 0 !important; 939 | width: 100% !important; 940 | height: 100% !important; 941 | border: 1px solid currentColor !important; 942 | opacity: .42 !important; 943 | box-sizing: border-box !important; 944 | } 945 | 946 | .panel-footer button:not([default]):hover:active:not([disabled]) > .button-box::before 947 | { 948 | border-width: 0 !important; 949 | } 950 | 951 | .panel-footer button:not([default]):hover:active:not([disabled]) 952 | { 953 | border-width: 0 !important; 954 | background: #002275 !important; 955 | color: #FFF !important; 956 | } 957 | 958 | #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] 959 | { 960 | height: 48px !important; 961 | } 962 | 963 | richlistitem[originaltype="loginsFooter"], 964 | richlistitem[originaltype="generatedPassword"] > .two-line-wrapper 965 | { 966 | display: flex !important; 967 | align-items: center !important; 968 | } 969 | 970 | richlistitem:-moz-any( 971 | [originaltype="generatedPassword"], 972 | [originaltype="loginWithOrigin"], 973 | [originaltype="login"], 974 | [originaltype="loginsFooter"]) .ac-site-icon 975 | { 976 | display: block !important; 977 | align-self: center !important; 978 | margin-inline: 0 16px !important; 979 | fill: currentColor !important; 980 | } 981 | 982 | richlistitem[originaltype="loginsFooter"] .ac-site-icon 983 | { 984 | visibility: hidden !important; 985 | } 986 | 987 | richlistitem:-moz-any( 988 | [originaltype="generatedPassword"], 989 | [originaltype="loginWithOrigin"], 990 | [originaltype="login"], 991 | [originaltype="loginsFooter"]) .ac-title 992 | { 993 | margin: 0 !important; 994 | } 995 | 996 | #confirmation-hint-message-container, 997 | #confirmation-hint-checkmark-animation-container 998 | { 999 | margin-block: 8px !important; 1000 | margin-inline: 8px !important; 1001 | } 1002 | 1003 | #confirmation-hint-checkmark-animation-container 1004 | { 1005 | margin-inline-end: 0 !important; 1006 | } 1007 | 1008 | /* high DPI adjustments */ 1009 | @media (min--moz-device-pixel-ratio: 2) 1010 | { 1011 | .PanelUI-subView .subviewbutton-nav::after, 1012 | .identity-popup-content-blocking-category::after 1013 | { 1014 | content: url(menu-right-2x.svg) !important; 1015 | } 1016 | } -------------------------------------------------------------------------------- /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 | /* >= 72 */ 82 | #TabsToolbar .tabbrowser-arrowscrollbox::part(scrollbutton-up), 83 | #TabsToolbar .tabbrowser-arrowscrollbox::part(scrollbutton-down), 84 | /* no ::part workaround - may have side effects */ 85 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton), 86 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) 87 | { 88 | margin-top: calc((var(--tab-min-height) - var(--button-size)) / 2) !important; 89 | margin-bottom: calc((var(--tab-min-height) - var(--button-size)) / 2) !important; 90 | } 91 | 92 | .tabbrowser-tab 93 | { 94 | min-height: var(--tab-min-height) !important; 95 | overflow: visible !important; 96 | font-size: 13px !important; 97 | background: 0 !important; 98 | border: 0 !important; 99 | } 100 | 101 | .tabbrowser-tab[visuallyselected] 102 | { 103 | color: var(--toolbar-color) !important; 104 | font-weight: 500 !important; 105 | } 106 | 107 | .tabbrowser-tab:not([visuallyselected]) 108 | { 109 | color: var(--toolbar-color-unselected) !important; 110 | } 111 | 112 | /* regular */ 113 | .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) 114 | { 115 | max-width: 240px !important; 116 | } 117 | 118 | /* neighbouring tabs should "pinch" together */ 119 | .tabbrowser-tab:not([last-visible-tab]) 120 | { 121 | margin-inline-end: -.5px !important; 122 | } 123 | 124 | /* special case for pinned tabs when overflowing */ 125 | #tabbrowser-tabs:not([overflow]) .tabbrowser-tab:not([first-visible-tab]), 126 | #tabbrowser-tabs[overflow] .tabbrowser-tab:not([first-visible-tab]):not([pinned]) 127 | { 128 | margin-inline-start: -.5px !important; 129 | } 130 | 131 | #tabbrowser-tabs[overflow] .tabbrowser-tab[pinned] .tab-background 132 | { 133 | margin: 0 -1px !important; 134 | } 135 | 136 | .tab-content 137 | { 138 | position: relative !important; 139 | overflow: hidden !important; 140 | padding-inline-start: 12px !important; 141 | padding-inline-end: 8px !important; 142 | } 143 | 144 | .tab-content::before, 145 | .tab-content::after 146 | { 147 | content: "" !important; 148 | display: block !important; 149 | position: absolute !important; 150 | background-color: currentColor !important; 151 | width: 1px !important; 152 | height: 20px !important; 153 | transform: translateY(-10px) !important; 154 | opacity: 0 !important; 155 | transition: opacity .2s var(--ease-basic) !important; 156 | } 157 | 158 | .tab-content::before 159 | { 160 | left: 0 !important; 161 | } 162 | 163 | .tab-content::after 164 | { 165 | right: 0 !important; 166 | } 167 | 168 | .tab-throbber, 169 | .tab-throbber-fallback, 170 | .tab-icon-image, 171 | .tab-sharing-icon-overlay, 172 | .tab-icon-sound, 173 | .tab-close-button 174 | { 175 | margin-top: 0 !important; 176 | } 177 | 178 | .tabbrowser-tab::before, 179 | .tabbrowser-tab::after, 180 | .tab-line 181 | { 182 | display: none !important; 183 | } 184 | 185 | /* tab background color */ 186 | 187 | .tabbrowser-tab 188 | { 189 | --tab-opacity: 0; 190 | --tab-bgcolor: #000; 191 | --tab-transition-duration: .2s; 192 | } 193 | 194 | :-moz-any(#TabsToolbar[brighttext]) .tabbrowser-tab 195 | { 196 | --tab-bgcolor: var(--toolbar-bgcolor) !important; 197 | } 198 | 199 | .tabbrowser-tab:not([selected=true]):hover, 200 | .tabbrowser-tab[multiselected]:not([selected=true]) 201 | { 202 | --tab-opacity: 0.5 !important; 203 | } 204 | 205 | :-moz-any(#TabsToolbar[brighttext]) .tabbrowser-tab:not([selected=true]):hover, 206 | :-moz-any(#TabsToolbar[brighttext]) .tabbrowser-tab[multiselected]:not([selected=true]) 207 | { 208 | --tab-opacity: .4; 209 | } 210 | 211 | :-moz-any(#TabsToolbar) .tabbrowser-tab[visuallyselected] 212 | { 213 | --tab-bgcolor: var(--toolbar-bgcolor); 214 | --tab-opacity: 1; 215 | } 216 | 217 | .tab-background 218 | { 219 | background: var(--tab-bgcolor) !important; 220 | /* rounded top corners */ 221 | border-radius: 8px 8px 0 0 !important; 222 | position: relative !important; 223 | border: 0 !important; 224 | transition: 225 | opacity var(--tab-transition-duration) var(--ease-basic), 226 | background-color 0s var(--tab-transition-duration) var(--ease-basic) !important; 227 | opacity: var(--tab-opacity) !important; 228 | visibility: visible !important; 229 | } 230 | 231 | /* rounded bottom corners */ 232 | .tab-background::before, 233 | .tab-background::after 234 | { 235 | content: "" !important; 236 | display: block !important; 237 | position: absolute !important; 238 | width: 8px !important; 239 | height: 8px !important; 240 | bottom: 0 !important; 241 | pointer-events: none !important; 242 | transition: box-shadow 0s var(--tab-transition-duration) var(--ease-basic) !important; 243 | } 244 | 245 | .tab-background::before 246 | { 247 | border-bottom-right-radius: 8px !important; 248 | left: 0 !important; 249 | transform: translateX(-8px) !important; 250 | box-shadow: 4px 4px 0 4px var(--tab-bgcolor) !important; 251 | } 252 | 253 | .tab-background::after 254 | { 255 | border-bottom-left-radius: 8px !important; 256 | right: 0 !important; 257 | transform: translateX(8px) !important; 258 | box-shadow: -4px 4px 0 4px var(--tab-bgcolor) !important; 259 | } 260 | 261 | .tabbrowser-tab[visuallyselected][style*=transform] + .tabbrowser-tab[style*=transform] .tab-content::after, 262 | .tabbrowser-tab[style*=transform]:not([visuallyselected]) .tab-content::before, 263 | .tabbrowser-tab[style*=transform] + .tabbrowser-tab:not([visuallyselected]) .tab-content::before, 264 | .tabbrowser-tab:not([visuallyselected]):not(:hover):not([multiselected]) + .tabbrowser-tab:not([visuallyselected]):not(:hover):not([multiselected]) .tab-content::before, 265 | #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow]) .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not(:hover):not([multiselected]) .tab-content::after 266 | { 267 | opacity: var(--tab-separator-opacity) !important; 268 | } 269 | 270 | #tabbrowser-tabs[overflow] .tabbrowser-tab[pinned] + .tabbrowser-tab:not([pinned]) .tab-content::before 271 | { 272 | opacity: 0 !important; 273 | } 274 | 275 | .tabbrowser-tab[visuallyselected] 276 | { 277 | --tab-transition-duration: 0s; 278 | } 279 | 280 | .tab-throbber, 281 | .tab-throbber-fallback 282 | { 283 | margin-inline-end: 8px !important; 284 | } 285 | 286 | .tab-icon-image 287 | { 288 | margin: 0 !important; 289 | } 290 | 291 | /* hide new tab favicon */ 292 | .tabbrowser-tab[image^="chrome://branding/"]:not([pinned]) .tab-icon-image 293 | { 294 | display: none !important; 295 | } 296 | 297 | .tab-label-container 298 | { 299 | margin-top: -2px !important; 300 | opacity: 1 !important; 301 | } 302 | 303 | .tabbrowser-tab[image]:not([image^="chrome://branding/"]) .tab-label-container, 304 | .tabbrowser-tab:-moz-any([progress], [busy]) .tab-label-container 305 | { 306 | padding-inline-start: 8px !important; 307 | } 308 | 309 | .tabbrowser-tab[pinned]:-moz-any([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image 310 | { 311 | visibility: hidden !important; 312 | } 313 | 314 | .tabbrowser-tab[fadein] .tab-close-button 315 | { 316 | visibility: visible !important; 317 | } 318 | 319 | .tab-close-button 320 | { 321 | list-style-image: url(close-tab.svg) !important; 322 | width: 16px !important; 323 | height: 16px !important; 324 | margin: 0 !important; 325 | margin-left: 4px !important; 326 | margin-right: 2px !important; 327 | padding: 0 !important; 328 | } 329 | 330 | .tabbrowser-tab[selected=true] .tab-close-button 331 | { 332 | border-radius: 99px !important; 333 | color: var(--toolbar-color) !important; 334 | -moz-context-properties: fill, fill-opacity !important; 335 | transition-property: fill-opacity, background-color !important; 336 | transition-duration: .15s !important; 337 | transition-timing-function: var(--ease-basic) !important; 338 | fill-opacity: 1 !important; 339 | opacity: 1 !important; 340 | } 341 | 342 | .tab-icon-overlay:-moz-any([soundplaying], [muted], [activemedia-blocked]), 343 | .tab-icon-sound 344 | { 345 | border-radius: 99px !important; 346 | color: var(--toolbar-color) !important; 347 | -moz-context-properties: fill, fill-opacity !important; 348 | transition-property: fill-opacity, background-color !important; 349 | transition-duration: .15s !important; 350 | transition-timing-function: var(--ease-basic) !important; 351 | fill-opacity: 1 !important; 352 | opacity: 1 !important; 353 | } 354 | 355 | .tabbrowser-tab:not([selected=true]) .tab-close-button 356 | { 357 | border-radius: 99px !important; 358 | color: var(--toolbar-color) !important; 359 | -moz-context-properties: fill, fill-opacity !important; 360 | transition-property: fill-opacity, opacity, background-color !important; 361 | transition-duration: .15s !important; 362 | transition-timing-function: var(--ease-basic) !important; 363 | display: none !important; 364 | fill-opacity: 0 !important; 365 | opacity: 0 !important; 366 | } 367 | 368 | .tabbrowser-tab:not([selected=true]):hover .tab-close-button 369 | { 370 | display: initial !important; 371 | fill-opacity: 1 !important; 372 | opacity: 1 !important; 373 | color: var(--toolbar-color-unselected) !important; 374 | } 375 | 376 | .tabbrowser-tab[pinned] .tab-close-button 377 | { 378 | visibility: hidden !important; 379 | } 380 | 381 | .tab-close-button:hover, 382 | .tab-icon-overlay:-moz-any([soundplaying], [muted], [activemedia-blocked]):hover, 383 | .tab-icon-sound:hover 384 | { 385 | background-color: var(--toolbarbutton-hover-background) !important; 386 | } 387 | 388 | .tab-close-button:hover:active, 389 | .tab-icon-overlay:-moz-any([soundplaying], [muted], [activemedia-blocked]):hover:active, 390 | .tab-icon-sound:hover:active 391 | { 392 | background-color: var(--toolbarbutton-active-background) !important; 393 | } 394 | 395 | .tab-icon-overlay[pinned] 396 | { 397 | margin: 0 !important; 398 | margin-inline-start: -16px !important; 399 | } 400 | 401 | @keyframes rotate-360 402 | { 403 | 0% { transform: rotate(0); } 404 | 100% { transform: rotate(1turn); } 405 | } 406 | 407 | .tab-throbber 408 | { 409 | -moz-context-properties: fill !important; 410 | fill: currentColor !important; 411 | background-image: url(spinner-busy.svg) !important; 412 | margin: 0 !important; 413 | transform-origin: center !important; 414 | animation: rotate-360 1.333s linear infinite reverse !important; 415 | position: static !important; 416 | } 417 | 418 | .tab-throbber[progress] 419 | { 420 | background-image: url(spinner-progress.svg) !important; 421 | animation-direction: normal !important; 422 | } 423 | 424 | .tab-throbber::before 425 | { 426 | display: none !important; 427 | } 428 | 429 | /* clipped tabs */ 430 | #tabbrowser-tabs[closebuttons=activetab] .tab-content:not([pinned]) 431 | { 432 | padding-inline-start: 8px !important; 433 | } 434 | 435 | #tabbrowser-tabs[closebuttons=activetab] .tabbrowser-tab:not([visuallyselected]) .tab-close-button 436 | { 437 | visibility: collapse !important; 438 | } 439 | 440 | #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow][labeldirection="ltr"]:not([pinned]), 441 | #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(ltr):not([pinned]) 442 | { 443 | mask-image: linear-gradient(to right, black 70%, transparent) !important; 444 | } 445 | 446 | #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow][labeldirection="rtl"]:not([pinned]), 447 | #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(rtl):not([pinned]) 448 | { 449 | mask-image: linear-gradient(to left, black 70%, transparent) !important; 450 | } 451 | 452 | .tab-content[pinned] 453 | { 454 | -moz-box-pack: center !important; 455 | } 456 | 457 | .tab-icon-image[pinned], 458 | .tab-throbber[pinned] 459 | { 460 | margin: auto !important; 461 | } 462 | 463 | .tab-content[pinned] 464 | { 465 | width: 40px !important; 466 | padding: 0px !important; 467 | padding-inline-start: 12px !important; 468 | padding-inline-end: 0 !important; 469 | } 470 | 471 | .tab-label-container[pinned], 472 | .tab-close-button[pinned] 473 | { 474 | visibility: hidden !important; 475 | } 476 | 477 | /* close button / favicon is centered within 36px tab */ 478 | @supports -moz-bool-pref("materialFox.reduceTabOverflow") 479 | { 480 | #main-window 481 | { 482 | /* same as Chrome */ 483 | min-width: 500px !important; 484 | } 485 | 486 | #tabbrowser-tabs[overflow] .tab-content 487 | { 488 | -moz-box-pack: center !important; 489 | } 490 | 491 | #tabbrowser-tabs[overflow] .tab-icon-image 492 | { 493 | margin: auto !important; 494 | } 495 | 496 | #tabbrowser-tabs[overflow] .tab-content[image]:not([image^="chrome://branding/"]):not([pinned]) 497 | { 498 | width: 36px !important; 499 | padding: 0 !important; 500 | padding-inline-start: 0 !important; 501 | padding-inline-end: 0 !important; 502 | } 503 | 504 | #tabbrowser-tabs[overflow] .tabbrowser-tab:not([visuallyselected]):not([pinned]) .tab-close-button, 505 | #tabbrowser-tabs[overflow] .tabbrowser-tab[visuallyselected]:not([pinned]) :-moz-any(.tab-label-container, .tab-icon-image), 506 | #tabbrowser-tabs[overflow] .tabbrowser-tab[image]:not([image^="chrome://branding/"]):not([pinned]) .tab-label-container 507 | { 508 | display: none !important; 509 | } 510 | } 511 | 512 | #tabbrowser-tabs #tabs-newtab-button 513 | { 514 | margin-inline-start: 2px !important; 515 | padding-left: 2px !important; 516 | padding-right: 2px !important; 517 | color: var(--toolbar-color) !important; 518 | } 519 | 520 | #tabbrowser-tabs[overflow] .tabbrowser-arrowscrollbox 521 | { 522 | border-radius: 8px 8px 0 0 !important; 523 | background-color: rgba(0, 0, 0, .1) !important; 524 | padding-inline-start: 0 !important; 525 | } 526 | 527 | #tabbrowser-tabs[overflow] 528 | { 529 | margin-inline-start: 8px !important; 530 | } 531 | 532 | #tabbrowser-tabs[overflow] .tabbrowser-tab[first-visible-tab]:not([pinned]), 533 | #tabbrowser-tabs[overflow] .tabbrowser-tab[pinned] + .tabbrowser-tab:not([pinned]), 534 | #tabbrowser-tabs:not([overflow]) .tabbrowser-tab[first-visible-tab] 535 | { 536 | margin-inline-start: 8px !important; 537 | } 538 | 539 | #tabbrowser-tabs[overflow] .tabbrowser-tab[last-visible-tab]:not([pinned]) 540 | { 541 | margin-inline-end: 8px !important; 542 | } 543 | 544 | .tabbrowser-tab[usercontextid] > .tab-stack::after 545 | { 546 | content: "" !important; 547 | position: absolute !important; 548 | display: flex !important; 549 | bottom: 0 !important; 550 | left: 8px !important; 551 | width: calc(100% - 16px) !important; 552 | height: 2px !important; 553 | box-sizing: border-box !important; 554 | border-radius: 99px 99px 0 0 !important; 555 | transform: none !important; 556 | background: var(--identity-tab-color) !important; 557 | transition-property: top, bottom, left, right, width, height, border-radius; 558 | transition-duration: .225s !important; 559 | transition-timing-function: var(--ease-out) !important; 560 | } 561 | 562 | .tab-bottom-line 563 | { 564 | display: none !important; 565 | } 566 | 567 | .tabbrowser-tab[usercontextid][selected] > .tab-stack::after 568 | { 569 | bottom: calc(100% - 9px) !important; 570 | left: calc(100% - 9px) !important; 571 | width: 6px !important; 572 | height: 6px !important; 573 | border-radius: 99px !important; 574 | } 575 | 576 | /* < 72 */ 577 | #tabbrowser-tabs .arrowscrollbox-overflow-start-indicator, 578 | #tabbrowser-tabs .arrowscrollbox-overflow-end-indicator, 579 | /* >= 72 */ 580 | #tabbrowser-tabs::part(arrowscrollbox-overflow-start-indicator), 581 | #tabbrowser-tabs::part(arrowscrollbox-overflow-end-indicator), 582 | /* no ::part workaround - may have side effects */ 583 | spacer[part="overflow-start-indicator"], 584 | spacer[part="overflow-end-indicator"] 585 | { 586 | display: none !important; 587 | } 588 | 589 | .tab-loading-burst[bursting]::before 590 | { 591 | display: none !important; 592 | } 593 | 594 | /* high DPI adjustments */ 595 | @media (min--moz-device-pixel-ratio: 2) 596 | { 597 | .tabbrowser-tab::before 598 | { 599 | transform: translateY(.5px) !important; 600 | } 601 | 602 | .tabbrowser-tab:last-of-type::after 603 | { 604 | transform: translate(-1px, .5px) !important; 605 | } 606 | 607 | /* macOS */ 608 | @media (-moz-mac-yosemite-theme) 609 | { 610 | .titlebar-buttonbox 611 | { 612 | margin-top: .5px !important; 613 | margin-bottom: -.5px !important; 614 | } 615 | } 616 | } 617 | -------------------------------------------------------------------------------- /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: 15px !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: 4px !important; 170 | background-clip: padding-box !important; 171 | transition: background-color .3s var(--ease-basic) !important; 172 | -moz-box-align: center !important; 173 | display: block !important; 174 | margin: 0 !important; 175 | position: relative !important; /* 74+ */ 176 | 177 | --urlbar-height: 32px !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 | #navigator-toolbox:hover #urlbar, 189 | #navigator-toolbox:hover #searchbar 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 | border: 2px solid var(--toolbar-field-focus-border-color) !important; 206 | padding: 0 !important; 207 | margin: 0 !important; 208 | } 209 | 210 | #urlbar[open], 211 | #searchbar[open] 212 | { 213 | border: 0 !important; 214 | padding: 0 !important; 215 | border-radius: 8px !important; 216 | min-height: 37px !important; 217 | margin: 0 -5px -1px !important; 218 | box-shadow: 219 | 0 5px 5px -3px rgba(0,0,0,.2), 220 | 0 8px 10px 1px rgba(0,0,0,.14), 221 | 0 3px 14px 2px rgba(0,0,0,.12) !important; 222 | position: relative !important; 223 | z-index: 99999 !important; 224 | } 225 | 226 | /* 71+ */ 227 | #urlbar-background 228 | { 229 | display: none !important; 230 | } 231 | 232 | #urlbar-input-container, 233 | #searchbar 234 | { 235 | display: flex !important; 236 | align-items: center !important; 237 | } 238 | 239 | #urlbar-input-container 240 | { 241 | height: auto !important; 242 | padding: 0 !important; 243 | border: 0 !important; 244 | } 245 | 246 | .urlbar-input-box, 247 | .searchbar-textbox 248 | { 249 | flex: 1 !important; 250 | } 251 | 252 | #urlbar-input 253 | { 254 | width: 100% !important; 255 | } 256 | 257 | #urlbar-input, 258 | .searchbar-textbox 259 | { 260 | color: var(--lwt-toolbar-field-color) !important; 261 | } 262 | 263 | #urlbar-input::placeholder, 264 | .searchbar-textbox::placeholder 265 | { 266 | opacity: .66 !important; 267 | } 268 | 269 | #urlbar[open] #urlbar-input-container 270 | { 271 | height: 37px !important; 272 | } 273 | 274 | #urlbar[open] #identity-box 275 | { 276 | margin-inline-start: 8px !important; 277 | margin-inline-end: 8px !important; 278 | } 279 | 280 | .urlbarView 281 | { 282 | top: 0 !important; 283 | left: 0 !important; 284 | right: 0 !important; 285 | position: relative !important; 286 | box-shadow: none !important; 287 | border: 0 !important; 288 | background: 0 !important; 289 | margin: 0 !important; 290 | } 291 | 292 | #urlbar[open] .urlbarView 293 | { 294 | display: block !important; 295 | width: 100% !important; 296 | } 297 | 298 | #urlbar-results 299 | { 300 | padding: 0 !important; 301 | } 302 | 303 | #urlbar-container, 304 | #searchbar-container 305 | { 306 | overflow: visible !important; 307 | padding: 0 !important; 308 | margin-inline: 6px !important; 309 | } 310 | 311 | #identity-icon 312 | { 313 | fill-opacity: 1 !important; 314 | } 315 | 316 | #identity-icon-labels 317 | { 318 | color: inherit !important; 319 | opacity: 1 !important; 320 | padding: 0 !important; 321 | margin-inline-start: 8px !important; 322 | margin-block-start: -1px !important; 323 | display: none !important; 324 | align-items: center !important; 325 | } 326 | 327 | #identity-box 328 | { 329 | display: flex !important; 330 | position: relative !important; 331 | font-size: 13px !important; 332 | } 333 | 334 | #urlbar-label-box 335 | { 336 | border: 0 !important; 337 | padding: 0 !important; 338 | } 339 | 340 | /* separator */ 341 | #identity-icon-labels::after 342 | { 343 | content: "" !important; 344 | display: block !important; 345 | position: absolute !important; 346 | height: 16px !important; 347 | right: 0 !important; 348 | background: #9d9e9f !important; 349 | width: 1px !important; 350 | transition: opacity .2s var(--ease-basic) !important; 351 | } 352 | 353 | #urlbar[pageproxystate=valid]:not([open]) #identity-box:-moz-any(.notSecureText, .verifiedIdentity, .chromeUI, .extensionPage, .certUserOverridden), 354 | #urlbar-label-box 355 | { 356 | margin-inline-end: 8px !important; 357 | } 358 | 359 | #urlbar[pageproxystate=valid]:not([open]) #identity-box:-moz-any(.notSecureText, .verifiedIdentity, .chromeUI, .extensionPage, .certUserOverridden) #identity-icon-labels 360 | { 361 | display: flex !important; 362 | } 363 | 364 | 365 | #urlbar[pageproxystate=valid] #identity-box:-moz-any(.notSecureText, .verifiedIdentity, .chromeUI, .extensionPage, .certUserOverridden):not(.no-hover):-moz-any([open], :hover) #identity-icon-labels::after 366 | { 367 | opacity: 0 !important; 368 | } 369 | 370 | #identity-box.extensionPage > #identity-icon 371 | { 372 | list-style-image: none !important; 373 | margin-inline-end: -16px !important; 374 | } 375 | 376 | /* no longer used as a connection icon */ 377 | #connection-icon 378 | { 379 | display: none !important; 380 | } 381 | 382 | #urlbar[pageproxystate=valid] #identity-box:-moz-any( 383 | .mixedActiveBlocked, 384 | .mixedDisplayContentLoadedActiveBlocked, 385 | .mixedActiveContent 386 | ) > #connection-icon 387 | { 388 | display: -moz-box !important; 389 | } 390 | 391 | #urlbar[pageproxystate=valid] #identity-box:-moz-any(.weakCipher, .certUserOverridden, .certErrorPage, .insecureLoginForms, .mixedActiveContent) 392 | { 393 | color: #c94031 !important; 394 | } 395 | 396 | .urlbar-input 397 | { 398 | padding: 0 !important; 399 | } 400 | 401 | .searchbar-textbox 402 | { 403 | border: 0 !important; 404 | background: 0 !important; 405 | box-shadow: none !important; 406 | margin: 0 !important; 407 | -moz-appearance: none !important; 408 | } 409 | 410 | .searchbar-search-icon 411 | { 412 | margin: 0 !important; 413 | fill-opacity: 1 !important; 414 | } 415 | 416 | .searchbar-search-icon-overlay 417 | { 418 | margin-inline-start: -11px !important; 419 | margin-inline-end: 0 !important; 420 | 421 | /* not really useful anyway */ 422 | display: none !important; 423 | } 424 | 425 | #page-action-buttons > #pageActionSeparator, 426 | .urlbar-history-dropmarker 427 | { 428 | display: none !important; 429 | } 430 | 431 | #pageActionSeparator 432 | { 433 | height: 24px !important; 434 | } 435 | 436 | .urlbar-icon-wrapper 437 | { 438 | background: 0 !important; 439 | } 440 | 441 | .urlbar-icon, 442 | #page-action-buttons > toolbarbutton, 443 | .searchbar-search-button, 444 | #identity-box, 445 | #tracking-protection-icon-box 446 | { 447 | min-width: 32px !important; 448 | height: 24px !important; 449 | padding: 4px 8px !important; 450 | margin: 0 !important; 451 | border: 0 !important; 452 | border-radius: 99px !important; 453 | fill-opacity: 1 !important; 454 | background: 0 !important; 455 | background-color: transparent !important; 456 | } 457 | 458 | #tracking-protection-icon-container 459 | { 460 | background: 0 !important; 461 | border: 0 !important; 462 | margin: 0 !important; 463 | padding: 0 !important; 464 | width: auto !important; 465 | order: 99 !important; 466 | } 467 | 468 | #tracking-protection-icon-box 469 | { 470 | display: block !important; 471 | width: 32px !important; 472 | transition: 473 | background-color .3s var(--ease-basic) !important; 474 | width: 32px !important; 475 | } 476 | 477 | #tracking-protection-icon 478 | { 479 | opacity: 0 !important; 480 | transition: opacity .3s var(--ease-basic) !important; 481 | } 482 | 483 | #navigator-toolbox:hover #tracking-protection-icon 484 | { 485 | opacity: 1 !important; 486 | transition: opacity .3s var(--ease-basic) !important; 487 | } 488 | 489 | #tracking-protection-icon 490 | { 491 | display: block !important; 492 | } 493 | 494 | #tracking-protection-icon-animatable-box 495 | { 496 | display: none !important; 497 | } 498 | 499 | #identity-box #notification-popup-box 500 | { 501 | padding: 0 !important; 502 | margin: 0 !important; 503 | } 504 | 505 | #page-action-buttons 506 | { 507 | height: 24px !important; 508 | display: flex !important; 509 | order: 99 !important; 510 | } 511 | 512 | #urlbar[open] #page-action-buttons, 513 | #urlbar[open] #tracking-protection-icon-container 514 | { 515 | display: none !important; 516 | } 517 | 518 | .urlbar-icon:hover:not([disabled]), 519 | #page-action-buttons > toolbarbutton:hover:not([disabled]), 520 | .searchbar-search-button:hover, 521 | #identity-box:hover:not(.no-hover), 522 | #tracking-protection-icon-container:hover #tracking-protection-icon-box 523 | { 524 | background-color: var(--toolbarbutton-hover-background) !important; 525 | } 526 | 527 | .urlbar-icon:hover:active:not([disabled]), 528 | .urlbar-icon[open], 529 | #page-action-buttons > toolbarbutton:hover:active:not([disabled]), 530 | .searchbar-search-button:hover:active, 531 | #identity-box:hover:active:not(.no-hover), 532 | #identity-box[open]:not(.no-hover), 533 | #tracking-protection-icon-container[open] #tracking-protection-icon-box 534 | { 535 | background-color: var(--toolbarbutton-active-background) !important; 536 | transition-duration: 0 !important; 537 | } 538 | 539 | #contextual-feature-recommendation 540 | { 541 | width: auto !important; 542 | } 543 | 544 | .urlbar-page-action:-moz-any( 545 | #reader-mode-button, 546 | #pageActionButton, 547 | #pocket-button-box, 548 | #pageAction-urlbar-screenshots_mozilla_org, 549 | #pageAction-urlbar-sendToDevice, 550 | #pageAction-urlbar-emailLink, 551 | #pageAction-urlbar-copyURL, 552 | #pageAction-urlbar-shareURL, 553 | #pageAction-urlbar-addSearchEngine 554 | ) 555 | { 556 | transition: 557 | background-color .3s var(--ease-basic), 558 | opacity .3s var(--ease-basic); 559 | opacity: 0 !important; 560 | margin-inline-start: 0px !important; 561 | } 562 | 563 | #navigator-toolbox:hover .urlbar-page-action:-moz-any( 564 | #reader-mode-button, 565 | #pageActionButton, 566 | #pocket-button-box, 567 | #pageAction-urlbar-screenshots_mozilla_org, 568 | #pageAction-urlbar-sendToDevice, 569 | #pageAction-urlbar-emailLink, 570 | #pageAction-urlbar-copyURL, 571 | #pageAction-urlbar-shareURL, 572 | #pageAction-urlbar-addSearchEngine 573 | ), 574 | .urlbar-page-action:-moz-any( 575 | #reader-mode-button, 576 | #pageActionButton, 577 | #pocket-button-box, 578 | #pageAction-urlbar-screenshots_mozilla_org, 579 | #pageAction-urlbar-sendToDevice, 580 | #pageAction-urlbar-emailLink, 581 | #pageAction-urlbar-copyURL, 582 | #pageAction-urlbar-shareURL, 583 | #pageAction-urlbar-addSearchEngine 584 | ):-moz-any(:hover, [open], [readeractive]), 585 | .urlbar-page-action:-moz-any(:hover, [open]) ~ .urlbar-page-action:-moz-any( 586 | #reader-mode-button, 587 | #pageActionButton, 588 | #pocket-button-box, 589 | #pageAction-urlbar-screenshots_mozilla_org, 590 | #pageAction-urlbar-sendToDevice, 591 | #pageAction-urlbar-emailLink, 592 | #pageAction-urlbar-copyURL, 593 | #pageAction-urlbar-shareURL, 594 | #pageAction-urlbar-addSearchEngine), 595 | #tracking-protection-icon-container[open] ~ #page-action-buttons .urlbar-page-action:-moz-any( 596 | #reader-mode-button, 597 | #pageActionButton, 598 | #pocket-button-box, 599 | #pageAction-urlbar-screenshots_mozilla_org, 600 | #pageAction-urlbar-sendToDevice, 601 | #pageAction-urlbar-emailLink, 602 | #pageAction-urlbar-copyURL, 603 | #pageAction-urlbar-shareURL, 604 | #pageAction-urlbar-addSearchEngine) 605 | { 606 | transition: 607 | background-color .3s var(--ease-basic), 608 | opacity .3s var(--ease-basic) !important; 609 | opacity: 1 !important; 610 | margin-inline-start: 0 !important; 611 | } 612 | 613 | .urlbar-display 614 | { 615 | color: inherit !important; 616 | margin: 0 !important; 617 | } 618 | 619 | #pocket-button-box[animate] > #pocket-animatable-box 620 | { 621 | margin-inline-start: 6px !important; 622 | } 623 | 624 | #star-button-animatable-box 625 | { 626 | display: none !important; 627 | } 628 | 629 | #userContext-icons 630 | { 631 | flex-direction: row !important; 632 | align-items: center !important; 633 | justify-content: center !important; 634 | position: relative !important; 635 | padding-inline: 8px !important; 636 | margin: 0 !important; 637 | margin-left: -4px !important; 638 | color: var(--identity-tab-color) !important; 639 | order: 999 !important; 640 | } 641 | 642 | #userContext-icons:not([hidden]) 643 | { 644 | display: flex !important; 645 | } 646 | 647 | #userContext-icons > * 648 | { 649 | z-index: 1 !important; 650 | color: inherit !important; 651 | fill: currentColor !important; 652 | } 653 | 654 | #userContext-label 655 | { 656 | margin: 0 !important; 657 | } 658 | 659 | #userContext-label + #userContext-indicator 660 | { 661 | margin-inline-start: 6px !important; 662 | } 663 | 664 | #userContext-icons::before 665 | { 666 | content: '' !important; 667 | position: absolute !important; 668 | left: 0 !important; 669 | right: 0 !important; 670 | bottom: 0 !important; 671 | background: var(--identity-tab-color) !important; 672 | border-radius: 99px !important; 673 | opacity: .1 !important; 674 | } 675 | 676 | #cfr-label-container 677 | { 678 | background: 0 !important; 679 | } 680 | 681 | #cfr-label 682 | { 683 | display: none !important; 684 | } 685 | 686 | #cfr-button 687 | { 688 | fill: currentColor !important; 689 | } 690 | 691 | #urlbar[open] #urlbar-go-button, 692 | #searchbar[open] #search-go-button, 693 | /* < 71 */ 694 | #urlbar[open] .urlbar-go-button, 695 | #searchbar[open] .search-go-button 696 | { 697 | height: 32px !important; 698 | } 699 | 700 | #urlbar-go-button, 701 | #search-go-button, 702 | /* < 71 */ 703 | .urlbar-go-button, 704 | .search-go-button 705 | { 706 | list-style-image: url(go.svg) !important; 707 | } 708 | 709 | .search-go-container 710 | { 711 | display: flex !important; 712 | } 713 | 714 | #searchbar .textbox-input 715 | { 716 | padding: 0 !important; 717 | } 718 | 719 | /* lock (secure) */ 720 | #identity-box[pageproxystate="valid"]:-moz-any(.verifiedDomain, .verifiedIdentity, .mixedActiveBlocked) > #identity-icon 721 | { 722 | list-style-image: var(--lock-icon) !important; 723 | } 724 | 725 | /* info (not secure) */ 726 | #identity-box[pageproxystate="valid"]:-moz-any(.mixedDisplayContent, .mixedDisplayContentLoadedActiveBlocked, .unknownIdentity) > #identity-icon 727 | { 728 | list-style-image: var(--info-icon) !important; 729 | } 730 | 731 | /* warning (dangerous) */ 732 | #identity-box[pageproxystate="valid"]:-moz-any(.notSecure, .weakCipher, .certUserOverridden, .certErrorPage, .insecureLoginForms, .mixedActiveContent) > #identity-icon 733 | { 734 | list-style-image: var(--warning-icon) !important; 735 | } 736 | 737 | #urlbar-input, 738 | #searchbar-input, 739 | .searchbar-textbox /* < 71 */ 740 | { 741 | transform: translateY(var(--input-offset)) !important; 742 | line-height: 1.745em !important; 743 | } 744 | 745 | /* 1x */ 746 | #urlbar 747 | { 748 | --info-icon: url(info-1x.svg); 749 | --lock-icon: url(connection-1x.svg); 750 | --warning-icon: url(connection-warning-1x.svg); 751 | } 752 | 753 | #urlbar, 754 | #searchbar 755 | { 756 | --input-offset: -1px; 757 | } 758 | 759 | /* 2x */ 760 | @media (min--moz-device-pixel-ratio: 2) 761 | { 762 | #urlbar 763 | { 764 | --info-icon: url(info-2x.svg); 765 | --lock-icon: url(connection-2x.svg); 766 | --warning-icon: url(connection-warning-2x.svg); 767 | } 768 | 769 | #urlbar, 770 | #searchbar 771 | { 772 | --input-offset: -.5px; 773 | } 774 | 775 | #identity-icon-labels 776 | { 777 | padding-inline-end: .5px !important; 778 | } 779 | } -------------------------------------------------------------------------------- /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"; 10 | @import "bookmarkAutoHide.css"; 11 | 12 | :root:not(:-moz-window-inactive) { 13 | background: transparent !important; 14 | } 15 | 16 | :root #TabsToolbar, 17 | :root #titlebar, 18 | :root #tabbrowser-tabs { 19 | -moz-appearance: -moz-mac-vibrant-titlebar-light !important; 20 | background-color: transparent !important; 21 | } 22 | 23 | :root[lwthemetextcolor="dark"] #TabsToolbar, 24 | :root[lwthemetextcolor="dark"] #titlebar, 25 | :root[lwthemetextcolor="dark"] #tabbrowser-tabs { 26 | -moz-appearance: -moz-mac-vibrant-titlebar-light !important; 27 | } 28 | 29 | :root[lwthemetextcolor="bright"] #TabsToolbar, 30 | :root[lwthemetextcolor="bright"] #titlebar, 31 | :root[lwthemetextcolor="bright"] #tabbrowser-tabs { 32 | -moz-appearance: -moz-mac-vibrancy-dark !important; 33 | } 34 | 35 | :root[lwthemetextcolor="bright"]:-moz-window-inactive { 36 | --lwt-accent-color-inactive: #282828 !important; 37 | } 38 | 39 | :-moz-any(:root[privatebrowsingmode=temporary]) #Tabstoolbar, 40 | :-moz-any(:root[privatebrowsingmode=temporary]) #titlebar, 41 | :-moz-any(:root[privatebrowsingmode=temporary]) #tabbrowser-tabs 42 | { 43 | -moz-appearance: -moz-mac-vibrancy-dark !important; 44 | } 45 | 46 | :-moz-any(:root[privatebrowsingmode=temporary]):-moz-window-inactive { 47 | --lwt-accent-color-inactive: #282828 !important; 48 | } 49 | 50 | :root { 51 | --toolbar-offset-height: 44px; 52 | } 53 | 54 | :-moz-any(:root[privatebrowsingmode=temporary]) .tab-background 55 | { 56 | background: var(--private-accent-color) !important; 57 | } 58 | 59 | :-moz-any(:root[privatebrowsingmode=temporary]) #PersonalToolbar 60 | { 61 | background-color: var(--private-accent-color) !important; 62 | } 63 | 64 | :-moz-any(:root[privatebrowsingmode=temporary]) #nav-bar 65 | { 66 | background-color: var(--private-accent-color) !important; 67 | } 68 | 69 | :-moz-any(:root[privatebrowsingmode=temporary]) .tab-background::before 70 | { 71 | box-shadow: 4px 4px 0 4px var(--private-accent-color) !important; 72 | } 73 | 74 | :-moz-any(:root[privatebrowsingmode=temporary]) .tab-background::after 75 | { 76 | box-shadow: -4px 4px 0 4px var(--private-accent-color) !important; 77 | } -------------------------------------------------------------------------------- /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); --------------------------------------------------------------------------------