├── chrome ├── global │ ├── circle.svg │ ├── variables.css │ └── global.css ├── popup │ ├── menu-right-1x.svg │ ├── menu-right-2x.svg │ ├── checkmark-18dp.svg │ ├── popup.css │ └── urlbar-results.css ├── icons │ ├── audio.svg │ ├── folder.svg │ ├── new-tab.svg │ ├── menu-update.svg │ ├── close.svg │ ├── home-1x.svg │ ├── key.svg │ ├── stop-1x.svg │ ├── stop-2x.svg │ ├── developer.svg │ ├── media-blocked.svg │ ├── email.svg │ ├── menu.svg │ ├── bookmark.svg │ ├── profile-inactive.svg │ ├── star-1x.svg │ ├── audio-muted.svg │ ├── copy.svg │ ├── library-1x.svg │ ├── arrow-back-2x.svg │ ├── hyperlink.svg │ ├── library-2x.svg │ ├── paste.svg │ ├── star-2x.svg │ ├── screenshot.svg │ ├── sync.svg │ ├── search_dark.svg │ ├── search.svg │ ├── home-2x.svg │ ├── globe.svg │ ├── history.svg │ ├── arrow-back-1x.svg │ ├── bug.svg │ ├── refresh-2x.svg │ ├── refresh-1x.svg │ ├── addons.svg │ ├── profile.svg │ ├── cut.svg │ ├── share.svg │ ├── forget.svg │ ├── tracking-protection.svg │ ├── settings.svg │ ├── incognito.svg │ └── icons.css ├── personalbar │ └── personalbar.css ├── navbar │ ├── connection-warning-1x.svg │ ├── connection-warning-2x.svg │ ├── info-1x.svg │ ├── connection-1x.svg │ ├── connection-2x.svg │ ├── info-2x.svg │ ├── naughty-shield-1x.svg │ ├── naughty-shield-2x.svg │ ├── navbar.css │ └── identity-icons-brand.svg ├── urlbar │ ├── connection-warning-1x.svg │ ├── connection-warning-2x.svg │ ├── info-1x.svg │ ├── connection-1x.svg │ ├── info-2x.svg │ ├── connection-2x.svg │ ├── go.svg │ ├── naughty-shield-1x.svg │ ├── naughty-shield-2x.svg │ ├── identity-icons-brand.svg │ └── urlbar.css ├── userChrome.css ├── tabbar │ ├── close-tab.svg │ ├── spinner-busy.svg │ ├── spinner-progress.svg │ └── tabbar.css └── findbar │ └── findbar.css ├── .github └── ISSUE_TEMPLATE │ └── bug_report.md ├── LICENSE ├── README_ja.md ├── README.md └── .gitignore /chrome/global/circle.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/popup/menu-right-1x.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/audio.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/popup/menu-right-2x.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/personalbar/personalbar.css: -------------------------------------------------------------------------------- 1 | #navigator-toolbox toolbar#PersonalToolbar 2 | { 3 | background-image: unset !important; 4 | } 5 | 6 | #navigator-toolbox toolbarbutton.bookmark-item:not(.subviewbutton) 7 | { 8 | padding: 6px !important; 9 | } 10 | -------------------------------------------------------------------------------- /chrome/navbar/connection-warning-1x.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/urlbar/connection-warning-1x.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/folder.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/new-tab.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/navbar/connection-warning-2x.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/urlbar/connection-warning-2x.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/menu-update.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/close.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/home-1x.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/key.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/urlbar/info-1x.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/stop-1x.svg: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /chrome/navbar/info-1x.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/popup/checkmark-18dp.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/stop-2x.svg: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /chrome/icons/developer.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/media-blocked.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/navbar/connection-1x.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/urlbar/connection-1x.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/email.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/menu.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/bookmark.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /chrome/icons/profile-inactive.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /chrome/icons/star-1x.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/urlbar/info-2x.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/audio-muted.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/copy.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/navbar/connection-2x.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/navbar/info-2x.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/urlbar/connection-2x.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/library-1x.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/arrow-back-2x.svg: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /chrome/icons/hyperlink.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /chrome/icons/library-2x.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/paste.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/star-2x.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/tabbar/close-tab.svg: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /chrome/icons/screenshot.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/sync.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/search_dark.svg: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /chrome/icons/search.svg: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /chrome/urlbar/go.svg: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /chrome/icons/home-2x.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/globe.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/history.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/arrow-back-1x.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/bug.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/refresh-2x.svg: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /chrome/icons/refresh-1x.svg: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /chrome/icons/addons.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/profile.svg: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /chrome/icons/cut.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/share.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/forget.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/tracking-protection.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/navbar/naughty-shield-1x.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /chrome/urlbar/naughty-shield-1x.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /chrome/navbar/naughty-shield-2x.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /chrome/urlbar/naughty-shield-2x.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /chrome/tabbar/spinner-busy.svg: -------------------------------------------------------------------------------- 1 | 29 | -------------------------------------------------------------------------------- /chrome/icons/settings.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/icons/incognito.svg: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /.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 tested it with the latest version or ESR91 version of Firefox 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 11] 30 | - Firefox version: [e.g. 97] 31 | 32 | **Additional context** 33 | Add any other context about the problem here. 34 | -------------------------------------------------------------------------------- /chrome/popup/popup.css: -------------------------------------------------------------------------------- 1 | menupopup 2 | { 3 | appearance: none !important; 4 | background-color: var(--arrowpanel-background) !important; 5 | color: var(--arrowpanel-color) !important; 6 | -moz-context-properties: fill, fill-opacity !important; 7 | fill: currentColor !important; 8 | } 9 | 10 | menuitem, 11 | menu > menu, 12 | menupopup > menu 13 | { 14 | appearance: none !important; 15 | } 16 | 17 | menuitem[disabled=true], 18 | menu[disabled=true] 19 | { 20 | pointer-events: none !important; 21 | } 22 | 23 | .menu-right 24 | { 25 | appearance: none !important; 26 | list-style-image: url(menu-right-1x.svg) !important; 27 | } 28 | 29 | menuitem[type=radio][checked=true] 30 | { 31 | list-style-image: url(checkmark-18dp.svg) !important; 32 | } 33 | 34 | menuitem[type=radio] .menu-iconic-icon 35 | { 36 | width: 16px !important; 37 | height: 16px !important; 38 | margin-inline-start: 0 !important; 39 | } 40 | 41 | menupopup::part(content), 42 | .menupopup-arrowscrollbox { 43 | box-shadow: unset !important; 44 | margin: 0 !important; 45 | } 46 | -------------------------------------------------------------------------------- /chrome/navbar/navbar.css: -------------------------------------------------------------------------------- 1 | #nav-bar 2 | { 3 | min-height: 36px !important; 4 | box-shadow: none !important; 5 | padding-inline: 5px 6px !important; 6 | background-color: var(--toolbar-bgcolor) !important; 7 | background-image: unset !important; 8 | } 9 | 10 | #reload-button[disabled]:not(:-moz-window-inactive) > .toolbarbutton-icon 11 | { 12 | opacity: 1 !important; 13 | } 14 | 15 | /* Windows */ 16 | #PanelUI-button 17 | { 18 | border: none !important; 19 | margin: 0 !important; 20 | padding: 0 !important; 21 | } 22 | 23 | #PanelUI-menu-button[badge-status|="update"] .toolbarbutton-badge 24 | { 25 | display: none !important; 26 | } 27 | 28 | :root[privatebrowsingmode] #fxa-toolbar-menu-button 29 | { 30 | pointer-events: none !important; 31 | } 32 | 33 | /* show "Private" label for en languages only */ 34 | :root[titlemodifier="(Private Browsing)"] #fxa-toolbar-menu-button::before 35 | { 36 | content: "Private" !important; 37 | display: -moz-box !important; 38 | margin-inline-start: 12px !important; 39 | margin-inline-end: 6px !important; 40 | } 41 | 42 | #nav-bar-customization-target 43 | { 44 | overflow: visible !important; 45 | } 46 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 muckSponge 4 | Copyright (c) 2021 typeling1578 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | -------------------------------------------------------------------------------- /README_ja.md: -------------------------------------------------------------------------------- 1 | # MaterialFox-Plus 2 | ***Firefox用のマテリアルデザインにインスパイアされたuserChrome.cssテーマ*** 3 | 4 | ![Preview](https://user-images.githubusercontent.com/5405629/45172944-21d91900-b24a-11e8-8bc5-03814121b0de.png) 5 | このテーマは、血と汗とコーヒーによって支えられています。もし気に入っていただけたなら、継続的な開発をサポートするために、ぜひ支援をご検討ください。 6 | 7 | [![Buy fork source a coffee](https://typeling1578.github.io/MaterialFox-Plus/68747470733a2f2f73766773686172652e636f6d2f692f3859642e737667.svg)](https://www.buymeacoffee.com/n4ho5QX2l) 8 | 9 | ## 説明 10 | Google の Material Design と最新の Google Chrome UI にインスパイアされたこのテーマは、Firefox を Material スタイルの Web ブラウザに変身させます。目的は、ブラウザをできるだけ Google Chrome に近いスタイルにすることです。 11 | 12 | このテーマは userChrome.css であり、手動で Firefox のプロファイルに追加する必要があります。このテーマは特定のブラウザスタイルをオーバーライドします。現在のところ、メイン UI のみが影響を受けます。(設定ページなどは影響を受けません) 将来的には、より多くの UI の要素がスタイル化されるかもしれませんが、Mozilla がブラウザのコードを更新するため、より広い範囲を維持することは難しくなり、維持できなくなった場合、一部の UI スタイルを削除またはやり直す可能性があります。 13 | 14 | ## 対応バージョン 15 | Firefoxの最新版か91ESRで動作します。 16 | 17 | ## インストール 18 | 1. chrome フォルダと user.js ファイルを Firefox のプロファイルディレクトリにコピーします。プロファイルディレクトリは、about:supportまたはabout:profilesにアクセスして確認してください。 19 | 2. よりChromeに近い使い方をしたい場合は、[おすすめの設定](#おすすめの設定)を参照してください。 20 | 3. Firefoxを再起動します。 21 | 22 | ### おすすめの設定 23 | Chromeの切り抜きタブの動作を再現する。 24 | * [about:config] ``browser.tabs.tabClipWidth`` を ``83`` に設定します (デフォルトは ``140``) 25 | 26 | Chrome の HTTP での "安全ではありません" テキストを表示する。 27 | * [about:config] ``security.insecure_connection_text.enabled`` を ``true`` に設定します。 28 | 29 | ## 注意 30 | * Windows 7はサポートされなくなりました。 31 | * Linuxは正式にはサポートされなくなりましたが、試してみることはできます。Linuxに取り組みたい場合は、気軽にプルリクを送ってください。 32 | * 一部のカスタマイズ設定は動作しないかもしれません（コンパクトやタッチの密度など） 33 | * カスタムテーマによっては、アドレスバーと衝突する可能性があります。 34 | * 透明度を使用した一部のテーマが動作しない場合があります。 35 | -------------------------------------------------------------------------------- /chrome/tabbar/spinner-progress.svg: -------------------------------------------------------------------------------- 1 | 44 | -------------------------------------------------------------------------------- /chrome/findbar/findbar.css: -------------------------------------------------------------------------------- 1 | .findbar-container 2 | { 3 | overflow: visible !important; 4 | } 5 | 6 | .findbar-textbox 7 | { 8 | color: var(--lwt-toolbar-field-color) !important; 9 | background-color: transparent !important; 10 | background-repeat: no-repeat !important; 11 | background-position: 5px center !important; 12 | fill: currentColor !important; 13 | fill-opacity: 1 !important; 14 | border: 0 !important; 15 | box-shadow: none !important; 16 | margin-inline-start: 2px !important; 17 | padding-inline-start: 28px !important; 18 | outline: none !important; 19 | } 20 | 21 | hbox[anonid="findbar-textbox-wrapper"] 22 | { 23 | background-color: var(--toolbar-field-background-color) !important; 24 | border-radius: 16px !important; 25 | position: relative !important; 26 | display: flex !important; 27 | padding: 2px !important; 28 | height: 28px !important; 29 | transition: background-color .1s var(--ease-basic) !important; 30 | } 31 | 32 | hbox[anonid="findbar-textbox-wrapper"]:hover 33 | { 34 | background-color: var(--toolbar-field-hover-background-color) !important; 35 | } 36 | 37 | hbox[anonid="findbar-textbox-wrapper"]:focus-within 38 | { 39 | background-color: var(--toolbar-field-focus-background-color) !important; 40 | /* won't work in a var... */ 41 | border: 2px solid -moz-accent-color !important; 42 | margin: -1px !important; 43 | padding: 1px !important; 44 | height: 30px !important; 45 | } 46 | 47 | hbox[anonid="findbar-textbox-wrapper"] toolbarbutton 48 | { 49 | border-radius: 99px !important; 50 | border: 0 !important; 51 | width: 24px !important; 52 | height: 24px !important; 53 | padding: 0 !important; 54 | display: flex !important; 55 | background: 0 !important; 56 | transition: background-color .2s var(--ease-basic) !important; 57 | margin: 0 !important; 58 | box-shadow: none !important; 59 | } 60 | 61 | hbox[anonid="findbar-textbox-wrapper"] toolbarbutton[disabled] 62 | { 63 | display: none !important; 64 | } 65 | 66 | hbox[anonid="findbar-textbox-wrapper"] toolbarbutton .toolbarbutton-text 67 | { 68 | visibility: collapse !important; 69 | } 70 | 71 | hbox[anonid="findbar-textbox-wrapper"] toolbarbutton:not([disabled]):hover 72 | { 73 | background-color: var(--toolbarbutton-hover-background) !important; 74 | } 75 | 76 | hbox[anonid="findbar-textbox-wrapper"] toolbarbutton:not([disabled]):hover:active 77 | { 78 | background-color: var(--toolbarbutton-active-background) !important; 79 | transition-duration: 0 !important; 80 | } 81 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MaterialFox-Plus 2 | ***A Material Design-inspired userChrome.css theme for Firefox*** 3 | 4 | ![Preview](https://typeling1578.github.io/MaterialFox-Plus/MaterialFox-Plus.png) 5 | This theme is powered by blood, sweat, and coffee. If you like it, please consider helping out to support its continued development. 6 | 7 | [![Buy fork source a coffee](https://typeling1578.github.io/MaterialFox-Plus/68747470733a2f2f73766773686172652e636f6d2f692f3859642e737667.svg)](https://www.buymeacoffee.com/n4ho5QX2l) 8 | 9 | ## What this does 10 | Inspired by Google's Material Design and their latest Google Chrome UI, this theme turns your Firefox into a Material-styled web browser. The aim was to style the browser as closely as possible to Google Chrome, where practical. 11 | 12 | This is a userChrome.css theme, which means you must manually add it to your Firefox profile. The theme overrides certain browser styles. Currently, only the main UI is affected (settings pages, etc. are not). More elements of the UI may be styled in the future but a broader scope becomes harder to maintain as Mozilla updates their browser code so some UI styles may be culled or redone if they become unmaintainable. 13 | 14 | ## What version do I use? 15 | It works with the latest version or 102ESR of Firefox. 16 | 17 | ## Installation 18 | 1. [about:config] Set ```toolkit.legacyUserProfileCustomizations.stylesheets``` to ```true``` (default is ```false```). 19 | 2. [about:config] Set ```svg.context-properties.content.enabled``` to ```true``` (default is ```false```). 20 | 3. Copy the chrome folder into your Firefox profile directory. To find your profile directory, go to about:support or about:profiles. 21 | 4. See [Recommended instructions](#recommended-instructions) if you'd prefer a more Chrome-like experience. 22 | 5. Restart Firefox. 23 | 24 | ### Recommended instructions 25 | Replicate Chrome behaviour for clipped tabs: 26 | * [about:config] Set ```browser.tabs.tabClipWidth``` to ```83``` (default is ```140```). 27 | 28 | Replicate Chrome's "Not Secure" text on HTTP: 29 | * [about:config] Set ```security.insecure_connection_text.enabled``` to ```true```. 30 | 31 | ## Please note 32 | * Windows 7 is no longer supported. 33 | * Linux is no longer officially supported but you can give it a try – if you'd like to work on it feel free to make a PR. 34 | * Some customisation settings may no longer work (such as compact/touch density). 35 | * Some custom themes may clash with the address bar. 36 | * Some themes using transparency might not work. 37 | -------------------------------------------------------------------------------- /chrome/navbar/identity-icons-brand.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /chrome/urlbar/identity-icons-brand.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /.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 -------------------------------------------------------------------------------- /chrome/global/variables.css: -------------------------------------------------------------------------------- 1 | /* light mode */ 2 | :root:not([style]), 3 | :root[style*="--lwt-accent-color: rgb(240, 240, 244);"], 4 | :root[style*="--lwt-accent-color: white;"] 5 | { 6 | /* accentcolor */ 7 | --lwt-accent-color: #dee1e6 !important; 8 | 9 | /* textcolor */ 10 | --lwt-text-color: #606368 !important; 11 | 12 | /* toolbar */ 13 | --toolbar-bgcolor: #fff !important; 14 | 15 | /* toolbar_text */ 16 | --toolbar-color: #606368 !important; 17 | 18 | /* toolbar_bottom_separator */ 19 | --toolbox-border-bottom-color: #b3b1b3 !important; /* legacy */ 20 | --chrome-content-separator-color: #b3b1b3 !important; 21 | 22 | /* icons */ 23 | --lwt-toolbarbutton-icon-fill: #606368 !important; 24 | 25 | /* icons_attention */ 26 | --lwt-toolbarbutton-icon-fill-attention: #5086ec !important; 27 | 28 | /* button_background_hover */ 29 | --lwt-toolbarbutton-hover-background: rgba(0, 0, 0, .07) !important; 30 | 31 | /* button_background_active */ 32 | --lwt-toolbarbutton-active-background: rgba(0, 0, 0, .11) !important; 33 | 34 | --lwt-toolbar-field-color: #202124 !important; 35 | 36 | /* popup_highlight */ 37 | --autocomplete-popup-highlight-background: #f2f2f2 !important; 38 | 39 | /* popup_highlight_text */ 40 | --autocomplete-popup-highlight-color: #202124 !important; 41 | 42 | --search-icon-url: url("../icons/search.svg"); 43 | } 44 | 45 | /* don't bother with sidebar in light mode */ 46 | 47 | /* dark mode */ 48 | :root[style*="--lwt-accent-color: rgb(28, 27, 34);"], 49 | :root[privatebrowsingmode=temporary] 50 | { 51 | /* accentcolor */ 52 | --lwt-accent-color: #202124 !important; 53 | 54 | /* textcolor */ 55 | --lwt-text-color: #9ba0a5 !important; 56 | 57 | /* toolbar */ 58 | --toolbar-bgcolor: #333639 !important; 59 | 60 | /* toolbar_text */ 61 | --toolbar-color: #fff !important; 62 | 63 | /* toolbar_bottom_separator */ 64 | --toolbox-border-bottom-color: #282828 !important; /* legacy */ 65 | --chrome-content-separator-color: #282828 !important; 66 | 67 | /* icons */ 68 | --lwt-toolbarbutton-icon-fill: #fff !important; 69 | 70 | /* icons_attention */ 71 | --lwt-toolbarbutton-icon-fill-attention: #5086ec !important; 72 | 73 | /* button_background_hover */ 74 | --lwt-toolbarbutton-hover-background: #434649 !important; 75 | 76 | /* button_background_active */ 77 | --lwt-toolbarbutton-active-background: #4e5153 !important; 78 | 79 | --lwt-toolbar-field-color: #fff !important; 80 | 81 | /* popup */ 82 | --arrowpanel-background: #373737 !important; 83 | 84 | /* popup_text */ 85 | --arrowpanel-color: #fff !important; 86 | --autocomplete-popup-color: #fff !important; 87 | --panel-disabled-color: hsla(0, 0%, 100%, .5) !important; 88 | 89 | /* popup_border */ 90 | --arrowpanel-border-color: #555 !important; 91 | --autocomplete-popup-border-color: #555 !important; 92 | 93 | /* popup_highlight */ 94 | --autocomplete-popup-highlight-background: #4c4f52 !important; 95 | 96 | /* popup_highlight_text */ 97 | --autocomplete-popup-highlight-color: #fff !important; 98 | --search-icon-url: url("../icons/search_dark.svg"); 99 | } 100 | 101 | :-moz-any(#sidebar-box, #sidebar)[style*="--sidebar-background-color:rgb(56, 56, 61);"] 102 | { 103 | /* sidebar */ 104 | --sidebar-background-color: #333639 !important; 105 | 106 | /* sidebar_text */ 107 | --sidebar-text-color: #f1f3ee !important; 108 | } 109 | 110 | :-moz-any(.sidebar-panel, body)[style*="--lwt-sidebar-background-color:rgb(56, 56, 61);"] 111 | { 112 | /* sidebar */ 113 | --lwt-sidebar-background-color: #333639 !important; 114 | 115 | /* sidebar_text */ 116 | --lwt-sidebar-text-color: #f1f3ee !important; 117 | } 118 | 119 | :root 120 | { 121 | --ease-in: cubic-bezier(.4, 0, 1, 1); 122 | --ease-out: cubic-bezier(0, 0, .2, 1); 123 | --ease-basic: linear; 124 | 125 | --button-size: 32px; /* is this used? */ 126 | --icon-size: 24px; /* is this used? */ 127 | 128 | --downloads-item-height: 48px !important; 129 | 130 | --toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor) !important; 131 | --toolbar-non-lwt-textcolor: var(--toolbar-color) !important; 132 | 133 | --toolbar-field-fontsize: 14px !important; 134 | } 135 | 136 | #titlebar, 137 | #tabbrowser-tabs 138 | { 139 | --tab-min-height: 34px !important; 140 | } 141 | 142 | @supports -moz-bool-pref("materialFox.reduceTabOverflow") 143 | { 144 | #tabbrowser-tabs 145 | { 146 | --tab-min-width: 32px !important; 147 | } 148 | } 149 | 150 | :root 151 | { 152 | --tab-separator-opacity: .35 !important; 153 | 154 | --toolbar-field-background-color: hsl(200, 12%, 95%) !important; 155 | --toolbar-field-hover-background-color: hsl(216, 12%, 92%) !important; 156 | --toolbar-field-focus-background-color: hsl(0, 0%, 100%) !important; 157 | } 158 | 159 | :root:-moz-any([lwtheme-brighttext], [privatebrowsingmode=temporary]) 160 | { 161 | --toolbar-field-background-color: #202124 !important; 162 | --toolbar-field-hover-background-color: #292a2d !important; 163 | --toolbar-field-focus-background-color: #202124 !important; 164 | } 165 | 166 | :root:not(:-moz-lwtheme):not([privatebrowsingmode=temporary]) 167 | { 168 | --toolbar-bgcolor: hsl(0, 0%, 100%) !important; 169 | --toolbar-color: hsl(213, 5%, 39%) !important; 170 | --toolbox-border-bottom-color: hsl(0, 0%, 70%) !important; 171 | } 172 | 173 | @media (-moz-mac-yosemite-theme) 174 | { 175 | :root[extradragspace] 176 | { 177 | --space-above-tabbar: 8px !important; 178 | } 179 | } 180 | 181 | /* Ubuntu */ 182 | @media (-moz-gtk-csd-available) 183 | { 184 | :root:not(:-moz-lwtheme):not([privatebrowsingmode=temporary]) 185 | { 186 | --toolbar-bgcolor: -moz-dialog !important; 187 | --toolbar-color: -moz-dialogtext !important; 188 | } 189 | } 190 | 191 | :root:not([lwtheme-brighttext]), 192 | :root toolbar:not([brighttext]), 193 | .tabbrowser-tab[visuallyselected] 194 | { 195 | --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, hsla(0, 0%, 0%, .07)) !important; 196 | --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, hsla(0, 0%, 0%, .11)) !important; 197 | } 198 | 199 | :root[lwtheme-brighttext], 200 | :root toolbar[brighttext], 201 | :root[lwtheme-brighttext] .tabbrowser-tab[visuallyselected] 202 | { 203 | --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, hsla(0, 0%, 100%, .1)) !important; 204 | --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, hsla(0, 0%, 100%, .17)) !important; 205 | } 206 | 207 | /* special case for urlbar buttons */ 208 | :-moz-any(#urlbar, #searchbar) 209 | { 210 | --toolbarbutton-hover-background: hsl(210, 5%, 85%) !important; 211 | --toolbarbutton-active-background: hsl(210, 4%, 80%) !important; 212 | } 213 | 214 | :root:-moz-any([privatebrowsingmode=temporary], [lwtheme-brighttext]) :-moz-any(#urlbar, #searchbar) 215 | { 216 | --toolbarbutton-hover-background: hsl(206, 5%, 26%) !important; 217 | --toolbarbutton-active-background: hsl(210, 4%, 31%) !important; 218 | } 219 | -------------------------------------------------------------------------------- /chrome/icons/icons.css: -------------------------------------------------------------------------------- 1 | .toolbarbutton-1:-moz-any(#back-button, #forward-button), 2 | #context-back, 3 | #context-forward, 4 | .subviewbutton-back, 5 | .identity-popup-expander 6 | { 7 | list-style-image: url(arrow-back-1x.svg) !important; 8 | } 9 | 10 | #PanelUI-menu-button 11 | { 12 | list-style-image: url(menu.svg) !important; 13 | } 14 | 15 | #PanelUI-menu-button[badge-status|="update"] 16 | { 17 | list-style-image: url(menu-update.svg) !important; 18 | } 19 | 20 | #reload-button, 21 | #context-reload 22 | { 23 | list-style-image: url(refresh-1x.svg) !important; 24 | } 25 | 26 | #stop-button 27 | { 28 | list-style-image: url(stop-1x.svg) !important; 29 | } 30 | 31 | .toolbarbutton-1#forward-button .toolbarbutton-icon, 32 | #context-forward .menu-iconic-icon 33 | { 34 | transform: translate(0px, -0.5px) scaleX(-1) !important; 35 | } 36 | 37 | #home-button 38 | { 39 | list-style-image: url(home-1x.svg) !important; 40 | } 41 | 42 | #star-button, 43 | #context-bookmarkpage, 44 | #pageAction-panel-bookmark, 45 | #panelMenuBookmarkThisPage 46 | { 47 | list-style-image: url(star-1x.svg) !important; 48 | fill-opacity: 0 !important; 49 | } 50 | 51 | #star-button[starred], 52 | #tracking-protection-icon-box[active] 53 | { 54 | fill: var(--toolbarbutton-icon-fill-attention) !important; 55 | } 56 | 57 | #star-button[starred], 58 | #context-bookmarkpage[starred], 59 | #panelMenuBookmarkThisPage 60 | { 61 | fill-opacity: 1 !important; 62 | } 63 | 64 | #bookmarks-menu-button, 65 | #appMenu-library-bookmarks-button, 66 | #panelMenu_toggleBookmarksMenu 67 | { 68 | list-style-image: url(bookmark.svg) !important; 69 | } 70 | 71 | #library-button, 72 | #appMenu-library-button 73 | { 74 | list-style-image: url(library-1x.svg) !important; 75 | } 76 | 77 | #preferences-button, 78 | #appMenu-preferences-button, 79 | .identity-popup-preferences-button, 80 | #urlbar-anon-search-settings-compact .button-icon 81 | { 82 | list-style-image: url(settings.svg) !important; 83 | } 84 | 85 | #history-panelmenu, 86 | #appMenu-library-history-button 87 | { 88 | list-style-image: url(history.svg) !important; 89 | } 90 | 91 | #appMenu-logins-button, 92 | richlistitem[originaltype="loginWithOrigin"] .ac-site-icon, 93 | richlistitem[originaltype="loginsFooter"] .ac-site-icon 94 | { 95 | list-style-image: url(key.svg) !important; 96 | } 97 | 98 | .subviewbutton[type="highlight-history"]::after 99 | { 100 | content: url(history.svg) !important; 101 | } 102 | 103 | #panic-button 104 | { 105 | list-style-image: url(forget.svg) !important; 106 | } 107 | 108 | #developer-button 109 | { 110 | list-style-image: url(developer.svg) !important; 111 | } 112 | 113 | #add-ons-button, 114 | #appMenu-addons-button 115 | { 116 | list-style-image: url(addons.svg) !important; 117 | } 118 | 119 | #email-link-button, 120 | #pageAction-panel-emailLink 121 | { 122 | list-style-image: url(email.svg) !important; 123 | } 124 | 125 | #pageAction-panel-shareURL 126 | { 127 | list-style-image: url(share.svg) !important; 128 | } 129 | 130 | #pageAction-panel-copyURL 131 | { 132 | list-style-image: url(hyperlink.svg) !important; 133 | } 134 | 135 | #pageAction-panel-webcompat-reporter_mozilla_org 136 | { 137 | list-style-image: url(bug.svg) !important; 138 | } 139 | 140 | #pageAction-panel-webcompat-reporter_mozilla_org > .toolbarbutton-icon 141 | { 142 | list-style-image: inherit !important; 143 | } 144 | 145 | #screenshots_mozilla_org-menuitem-_create-screenshot .menu-iconic-left 146 | { 147 | background-image: url(screenshot.svg) !important; 148 | background-position: 4px center !important; 149 | background-repeat: no-repeat !important; 150 | } 151 | 152 | #screenshots_mozilla_org-menuitem-_create-screenshot .menu-iconic-icon 153 | { 154 | visibility: hidden !important; 155 | } 156 | 157 | #tabs-newtab-button, 158 | #new-tab-button 159 | { 160 | list-style-image: url(new-tab.svg) !important; 161 | } 162 | 163 | #fxa-avatar-image 164 | { 165 | /* icon should be 20px, but we don't want to affect button size */ 166 | transform: scale(1.25) !important; 167 | border-radius: 50% !important; 168 | } 169 | 170 | :root:not([fxastatus=signedin]) #fxa-avatar-image 171 | { 172 | list-style-image: url(profile-inactive.svg) !important; 173 | } 174 | 175 | :root[fxastatus=signedin]:not([style*="--avatar-image-url"]) #fxa-avatar-image 176 | { 177 | list-style-image: url(profile.svg) !important; 178 | } 179 | 180 | :root[privatebrowsingmode] #fxa-avatar-image 181 | { 182 | list-style-image: url(incognito.svg) !important; 183 | } 184 | 185 | #tracking-protection-icon 186 | { 187 | list-style-image: url(tracking-protection.svg) !important; 188 | } 189 | 190 | #pageActionButton 191 | { 192 | list-style-image: url(menu.svg) !important; 193 | } 194 | 195 | #urlbar[pageproxystate="invalid"] #identity-icon, 196 | .searchbar-search-icon, 197 | #PopupAutoCompleteRichResult .ac-type-icon[type="keyword"], 198 | #PopupAutoCompleteRichResult .ac-site-icon[type="searchengine"], 199 | #appMenu-find-button, 200 | #panelMenu_searchBookmarks 201 | { 202 | list-style-image: url(search.svg) !important; 203 | } 204 | 205 | .findbar-textbox 206 | { 207 | background-image: url(search.svg) !important; 208 | } 209 | 210 | #appMenu-cut-button 211 | { 212 | list-style-image: url(cut.svg) !important; 213 | } 214 | 215 | #appMenu-copy-button 216 | { 217 | list-style-image: url(copy.svg) !important; 218 | } 219 | 220 | #appMenu-paste-button 221 | { 222 | list-style-image: url(paste.svg) !important; 223 | } 224 | 225 | #appMenu-fxa-label, 226 | #PanelUI-fxa-menu-syncnow-button, 227 | #appMenu-fxa-icon, 228 | #PanelUI-remotetabs-syncnow 229 | { 230 | list-style-image: url(sync.svg) !important; 231 | } 232 | 233 | .tab-icon-image:not([src]) 234 | { 235 | list-style-image: url(globe.svg) !important; 236 | } 237 | 238 | .tab-icon-image[src="chrome://browser/skin/settings.svg"] 239 | { 240 | display: none !important; 241 | } 242 | 243 | .tab-icon-image[src="chrome://browser/skin/settings.svg"] ~ .tab-icon-overlay 244 | { 245 | display: -moz-box !important; 246 | margin: 0 !important; 247 | list-style-image: url(settings.svg) !important; 248 | -moz-context-properties: fill, fill-opacity !important; 249 | fill: currentColor !important; 250 | } 251 | 252 | .tab-icon-overlay[soundplaying], 253 | .tab-icon-sound 254 | { 255 | list-style-image: url(audio.svg) !important; 256 | } 257 | 258 | .tab-icon-overlay[muted], 259 | .tab-icon-sound[muted] 260 | { 261 | list-style-image: url(audio-muted.svg) !important; 262 | } 263 | 264 | .tab-icon-overlay[activemedia-blocked], 265 | .tab-icon-sound[activemedia-blocked] 266 | { 267 | list-style-image: url(media-blocked.svg) !important; 268 | } 269 | 270 | .downloadIconShow .button-icon 271 | { 272 | list-style-image: url(folder.svg) !important; 273 | } 274 | 275 | .panel-banner-item[notificationid^="update"] 276 | { 277 | list-style-image: url(menu-update.svg) !important; 278 | -moz-context-properties: fill, fill-opacity !important; 279 | fill: currentColor !important; 280 | } 281 | 282 | /* high DPI adjustments */ 283 | @media (min--moz-device-pixel-ratio: 2) 284 | { 285 | .toolbarbutton-1:-moz-any(#back-button, #forward-button), 286 | #context-back, 287 | #context-forward, 288 | .subviewbutton-back, 289 | .identity-popup-expander 290 | { 291 | list-style-image: url(arrow-back-2x.svg) !important; 292 | } 293 | 294 | #PanelUI-menu-button:not([badge-status|="update"]) .toolbarbutton-icon 295 | { 296 | transform: translate(-.5px, -.5px) !important; 297 | } 298 | 299 | #stop-button 300 | { 301 | list-style-image: url(stop-2x.svg) !important; 302 | } 303 | 304 | #reload-button, 305 | #context-reload 306 | { 307 | list-style-image: url(refresh-2x.svg) !important; 308 | } 309 | 310 | #home-button 311 | { 312 | list-style-image: url(home-2x.svg) !important; 313 | } 314 | 315 | #star-button, 316 | #context-bookmarkpage, 317 | #pageAction-panel-bookmark, 318 | #panelMenuBookmarkThisPage 319 | { 320 | list-style-image: url(star-2x.svg) !important; 321 | } 322 | 323 | #bookmarks-menu-button .toolbarbutton-icon 324 | { 325 | transform: translateX(.5px) !important; 326 | } 327 | 328 | #library-button 329 | { 330 | list-style-image: url(library-2x.svg) !important; 331 | } 332 | } 333 | -------------------------------------------------------------------------------- /chrome/global/global.css: -------------------------------------------------------------------------------- 1 | @media (-moz-windows-compositor) 2 | { 3 | @media not (-moz-platform: windows-win7) 4 | { 5 | @media not (-moz-platform: windows-win8) 6 | { 7 | @media (-moz-windows-default-theme) 8 | { 9 | :root[tabsintitlebar] #TabsToolbar .titlebar-button 10 | { 11 | transform: translateY(-10px) !important; 12 | } 13 | 14 | @supports not -moz-bool-pref("materialfox-plus.oldversion") { 15 | :root[tabsintitlebar][sizemode="maximized"] #TabsToolbar .titlebar-button { 16 | transform: translateY(-2px) !important; 17 | } 18 | } 19 | 20 | .titlebar-button { 21 | padding: 10px 17px !important; 22 | } 23 | 24 | .titlebar-buttonbox-container { 25 | margin-bottom: 0 !important; 26 | } 27 | 28 | @media (-moz-windows-accent-color-in-titlebar: 0) 29 | { 30 | :root[tabsintitlebar]:not(:-moz-lwtheme):not([privatebrowsingmode=temporary]) 31 | { 32 | background-color: #dee1e6 !important; 33 | color: #3c4043 !important; 34 | } 35 | 36 | :root[tabsintitlebar]:not(:-moz-lwtheme):not([privatebrowsingmode=temporary]):-moz-window-inactive 37 | { 38 | background-color: #e7eaed !important; 39 | color: #666a6d !important; 40 | } 41 | } 42 | } 43 | } 44 | } 45 | } 46 | 47 | @supports not -moz-bool-pref("materialfox-plus.oldversion") { 48 | :root[sizemode="maximized"] #TabsToolbar { 49 | margin-top: -8px; 50 | } 51 | } 52 | 53 | #navigator-toolbox :-moz-any(toolbar, #nav-bar-customization-target):not(#toolbar-menubar) 54 | { 55 | -moz-box-align: center !important; 56 | } 57 | 58 | #navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)), 59 | /* no ::part workaround - may have side effects */ 60 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton), 61 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) 62 | { 63 | border-radius: 99px !important; 64 | transition-property: 65 | background-color, 66 | background-size, 67 | fill-opacity !important; 68 | transition-duration: .3s !important; 69 | transition-timing-function: 70 | var(--ease-basic), 71 | var(--ease-out), 72 | var(--ease-basic) !important; 73 | 74 | fill: currentColor !important; 75 | fill-opacity: 0 !important; 76 | 77 | background-image: 78 | url(circle.svg), 79 | url(circle.svg) !important; 80 | background-size: 25% !important; 81 | background-repeat: no-repeat !important; 82 | background-position: center !important; 83 | background-color: transparent !important; 84 | } 85 | 86 | #navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)), 87 | /* no ::part workaround - may have side effects */ 88 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton), 89 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) 90 | { 91 | font-size: 12px !important; 92 | padding: 0 !important; 93 | margin: 0 !important; 94 | border: 2px solid transparent !important; 95 | background-clip: padding-box !important; 96 | } 97 | 98 | #navigator-toolbox :-moz-any(.toolbarbutton-1, .scrollbutton-up, .scrollbutton-down), 99 | /* no ::part workaround - may have side effects */ 100 | .#scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton), 101 | .#scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) 102 | { 103 | max-height: 32px !important; 104 | height: 32px !important; 105 | min-height: 32px !important; 106 | } 107 | 108 | #navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton))[disabled], 109 | /* no ::part workaround - may have side effects */ 110 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton)[disabled], 111 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton)[disabled] 112 | { 113 | opacity: .42 !important; 114 | } 115 | 116 | #navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)):hover:not([disabled]), 117 | #navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)):-moz-any(:hover:active, [checked], [open]):not([disabled]), 118 | /* no ::part workaround - may have side effects */ 119 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton):hover:not([disabled]), 120 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton):hover:not([disabled]) 121 | { 122 | background-color: var(--toolbarbutton-hover-background) !important; 123 | } 124 | 125 | #navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)):-moz-any(:hover:active, [checked], [open]):not([disabled]), 126 | /* no ::part workaround - may have side effects */ 127 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton):hover:active:not([disabled]), 128 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton):hover:active:not([disabled]) 129 | { 130 | fill-opacity: .04 !important; 131 | background-size: 100% !important; 132 | } 133 | 134 | #navigator-toolbox :-moz-any(.toolbarbutton-icon, .toolbarbutton-badge-stack), 135 | /* no ::part workaround - may have side effects */ 136 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton) > .toolbarbutton-icon, 137 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) > .toolbarbutton-icon 138 | { 139 | fill-opacity: 1 !important; 140 | border: 0 !important; 141 | box-shadow: none !important; 142 | } 143 | 144 | #navigator-toolbox .toolbarbutton-1 > :-moz-any(.toolbarbutton-icon, .toolbarbutton-badge-stack) 145 | { 146 | width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; 147 | height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; 148 | } 149 | 150 | #navigator-toolbox > #PersonalToolbar .toolbarbutton-1 > .toolbarbutton-icon, 151 | #navigator-toolbox .toolbarbutton-1 > :-moz-any(.toolbarbutton-icon, .toolbarbutton-badge-stack), 152 | /* no ::part workaround - may have side effects */ 153 | #scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton) > .toolbarbutton-icon, 154 | #scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) > .toolbarbutton-icon 155 | { 156 | padding: 6px !important; 157 | background: 0 !important; 158 | width: auto !important; 159 | height: auto !important; 160 | } 161 | 162 | #navigator-toolbox .toolbarbutton-1 > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { 163 | width: 28px !important; 164 | height: 28px !important; 165 | } 166 | 167 | /* 168 | hack: fix customization screen popping bug when changing ui density 169 | icon size is enforced and it doesn't like it when the normal density 170 | nav-bar height is less than 38px (it's 36px due to smaller back icon) 171 | */ 172 | :root:not([uidensity=compact]) #customization-content-container 173 | { 174 | padding-top: 1px !important; 175 | } 176 | 177 | :root:not([uidensity=compact]) :-moz-any(#customization-palette-container, #customization-panel-container) 178 | { 179 | margin-top: -1px !important; 180 | } 181 | 182 | .menu-iconic, 183 | .menuitem-iconic 184 | { 185 | fill: currentColor !important; 186 | } 187 | 188 | /* legacy */ 189 | #navigator-toolbox 190 | { 191 | border-bottom: 1px solid var(--chrome-content-separator-color, var(--toolbox-border-bottom-color)) !important; 192 | } 193 | 194 | /* legacy */ 195 | #navigator-toolbox::after 196 | { 197 | display: none !important; 198 | } 199 | 200 | .pointerlockfswarning 201 | { 202 | display: flex !important; 203 | border-radius: 4px !important; 204 | padding: 6px !important; 205 | background: #333 !important; 206 | border: 0 !important; 207 | font-size: 14px !important; 208 | box-shadow: 209 | 0 3px 5px -1px rgba(0,0,0,.2), 210 | 0 6px 10px 0 rgba(0,0,0,.14), 211 | 0 1px 18px 0 rgba(0,0,0,.12) !important; 212 | color: hsla(0,0%,100%,.87) !important; 213 | transition-timing-function: var(--ease-out), linear !important; 214 | transition-property: transform, top !important; 215 | } 216 | 217 | #fullscreen-warning 218 | { 219 | flex-direction: column !important; 220 | min-width: 344px !important; 221 | } 222 | 223 | .pointerlockfswarning[hidden] 224 | { 225 | visibility: hidden !important; 226 | } 227 | 228 | /* hack to keep it in same place as [ontop] */ 229 | /* probably doesn't work for single-line */ 230 | .pointerlockfswarning:not([hidden]):not([ontop]) 231 | { 232 | top: -32px !important; 233 | } 234 | 235 | .pointerlockfswarning[ontop] 236 | { 237 | top: 28px !important; 238 | } 239 | 240 | .pointerlockfswarning::before 241 | { 242 | display: none !important; 243 | } 244 | 245 | .pointerlockfswarning-domain-text 246 | { 247 | margin-block: 8px 18px !important; 248 | margin-inline: 10px !important; 249 | font-size: unset !important; 250 | font-weight: unset !important; 251 | align-self: start !important; 252 | } 253 | 254 | .pointerlockfswarning-domain 255 | { 256 | font-weight: unset !important; 257 | } 258 | 259 | #fullscreen-exit-button 260 | { 261 | -moz-appearance: none !important; 262 | border: 0 !important; 263 | height: 32px !important; 264 | display: flex !important; 265 | align-items: center !important; 266 | margin-inline: 8px 0 !important; 267 | text-transform: uppercase !important; 268 | font-weight: 500 !important; 269 | letter-spacing: .0892857143em !important; 270 | background: 0 !important; 271 | position: relative !important; 272 | color: var(--toolbarbutton-icon-fill-attention) !important; 273 | align-self: end !important; 274 | font-family: Roboto, inherit !important; 275 | } 276 | 277 | #fullscreen-exit-button::before 278 | { 279 | content: "" !important; 280 | display: block !important; 281 | z-index: -1 !important; 282 | position: absolute !important; 283 | left: 0 !important; 284 | right: 0 !important; 285 | top: 0 !important; 286 | bottom: 0 !important; 287 | border-radius: 4px !important; 288 | background: currentColor !important; 289 | opacity: 0 !important; 290 | transition: opacity .3s var(--ease-basic) !important; 291 | } 292 | 293 | #fullscreen-exit-button:hover::before 294 | { 295 | opacity: .12 !important; 296 | } 297 | 298 | #fullscreen-exit-button:hover:active::before 299 | { 300 | opacity: .24 !important; 301 | transition-duration: .1s !important; 302 | } 303 | 304 | /* note: use Firefox account button instead */ 305 | #TabsToolbar .private-browsing-indicator 306 | { 307 | display: none !important; 308 | } 309 | 310 | /* high DPI adjustments */ 311 | @media (min--moz-device-pixel-ratio: 2) 312 | { 313 | #navigator-toolbox 314 | { 315 | border-bottom-width: .5px !important; 316 | padding-bottom: .5px !important; 317 | box-shadow: inset 0 -.5px var(--toolbar-bgcolor) !important; 318 | } 319 | } 320 | -------------------------------------------------------------------------------- /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 | } 583 | -------------------------------------------------------------------------------- /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-platform: 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 | :root[privatebrowsingmode] #TabsToolbar 59 | { 60 | color: #808387 !important; 61 | } 62 | 63 | /* < FF 65, >= FF 65 */ 64 | :-moz-any(.titlebar-placeholder, .titlebar-spacer) 65 | { 66 | border: 0 !important; 67 | display: -moz-box !important; 68 | } 69 | 70 | :-moz-any(.titlebar-placeholder, .titlebar-spacer)[type=post-tabs] 71 | { 72 | width: 48px !important; 73 | transition: width .666s cubic-bezier(.4, 0, .2, 1) !important; 74 | } 75 | 76 | @media (max-width: 700px) 77 | { 78 | :-moz-any(.titlebar-placeholder, .titlebar-spacer)[type=post-tabs] 79 | { 80 | width: 8px !important; 81 | } 82 | } 83 | 84 | :root[privatebrowsingmode] #TabsToolbar 85 | { 86 | background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important; 87 | } 88 | 89 | /* vertically center buttons in tab bar */ 90 | #TabsToolbar toolbarbutton, 91 | #TabsToolbar .toolbar-items toolbarbutton.toolbarbutton-1, 92 | /* >= 72 */ 93 | #TabsToolbar .tabbrowser-arrowscrollbox::part(scrollbutton-up), 94 | #TabsToolbar .tabbrowser-arrowscrollbox::part(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 | margin-top: calc(var(--tab-shadow-max-size) + 3px) !important; 100 | margin-bottom: 1px !important; 101 | } 102 | 103 | .tabbrowser-tab 104 | { 105 | min-height: var(--tab-min-height) !important; 106 | overflow: visible !important; 107 | font-size: 12px !important; 108 | background: 0 !important; 109 | border: 0 !important; 110 | padding: 0 !important; 111 | } 112 | 113 | .tabbrowser-tab[visuallyselected] 114 | { 115 | color: var(--toolbar-color) !important; 116 | } 117 | 118 | /* regular */ 119 | .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) 120 | { 121 | max-width: 240px !important; 122 | } 123 | 124 | /* neighbouring tabs should "pinch" together */ 125 | .tabbrowser-tab:not([last-visible-tab]) 126 | { 127 | margin-inline-end: -.5px !important; 128 | } 129 | 130 | /* special case for pinned tabs when overflowing */ 131 | #tabbrowser-tabs:not([overflow]) .tabbrowser-tab:not([first-visible-tab]), 132 | #tabbrowser-tabs[overflow] .tabbrowser-tab:not([first-visible-tab]):not([pinned]) 133 | { 134 | margin-inline-start: -.5px !important; 135 | } 136 | 137 | .tab-stack 138 | { 139 | margin-top: 4px !important; 140 | margin-bottom: -4px !important; 141 | } 142 | 143 | #tabbrowser-tabs[overflow] .tabbrowser-tab[pinned] .tab-background 144 | { 145 | margin: 0 -1px !important; 146 | } 147 | 148 | #tabbrowser-tabs[overflow] .tabbrowser-tab[pinned] .tab-stack 149 | { 150 | margin-top: 8px !important; 151 | margin-bottom: 0 !important; 152 | } 153 | 154 | .tab-content 155 | { 156 | position: relative !important; 157 | overflow: hidden !important; 158 | padding-inline-start: 12px !important; 159 | padding-inline-end: 8px !important; 160 | } 161 | 162 | .tab-content::before, 163 | .tab-content::after 164 | { 165 | content: "" !important; 166 | display: block !important; 167 | position: absolute !important; 168 | background-color: currentColor !important; 169 | width: 1px !important; 170 | height: 20px !important; 171 | transform: translateY(10px) !important; 172 | opacity: 0 !important; 173 | transition: opacity .2s var(--ease-basic) !important; 174 | } 175 | 176 | .tab-content::before 177 | { 178 | left: 0 !important; 179 | } 180 | 181 | .tab-content::after 182 | { 183 | right: 0 !important; 184 | } 185 | 186 | .tab-throbber, 187 | .tab-throbber-fallback, 188 | .tab-icon-image, 189 | .tab-sharing-icon-overlay, 190 | .tab-icon-sound, 191 | .tab-close-button 192 | { 193 | margin-top: 0 !important; 194 | } 195 | 196 | .tabbrowser-tab::before, 197 | .tabbrowser-tab::after, 198 | .tab-line 199 | { 200 | display: none !important; 201 | } 202 | 203 | /* tab background color */ 204 | 205 | .tabbrowser-tab 206 | { 207 | --tab-opacity: 0; 208 | --tab-bgcolor: #000; 209 | --tab-transition-duration: .2s; 210 | } 211 | 212 | :-moz-any(:root[privatebrowsingmode=temporary], #TabsToolbar[brighttext]) .tabbrowser-tab 213 | { 214 | --tab-opacity: 0; 215 | --tab-bgcolor: #fff; 216 | } 217 | 218 | .tabbrowser-tab:not([selected=true]):hover, 219 | .tabbrowser-tab[multiselected]:not([selected=true]) 220 | { 221 | --tab-opacity: .1; 222 | } 223 | 224 | :-moz-any(:root[privatebrowsingmode=temporary], #TabsToolbar[brighttext]) .tabbrowser-tab:not([selected=true]):hover, 225 | :-moz-any(:root[privatebrowsingmode=temporary], #TabsToolbar[brighttext]) .tabbrowser-tab[multiselected]:not([selected=true]) 226 | { 227 | --tab-opacity: .06; 228 | } 229 | 230 | :-moz-any(#TabsToolbar) .tabbrowser-tab[visuallyselected] 231 | { 232 | --tab-bgcolor: var(--toolbar-bgcolor); 233 | --tab-opacity: 1; 234 | } 235 | 236 | .tab-background 237 | { 238 | background: var(--tab-bgcolor) !important; 239 | /* rounded top corners */ 240 | border-radius: 8px 8px 0 0 !important; 241 | position: relative !important; 242 | border: 0 !important; 243 | transition: 244 | opacity var(--tab-transition-duration) var(--ease-basic), 245 | background-color 0s var(--tab-transition-duration) var(--ease-basic) !important; 246 | opacity: var(--tab-opacity) !important; 247 | visibility: visible !important; 248 | box-shadow: none !important; 249 | outline: none !important; 250 | } 251 | 252 | /* rounded bottom corners */ 253 | .tab-background::before, 254 | .tab-background::after 255 | { 256 | content: "" !important; 257 | display: block !important; 258 | position: absolute !important; 259 | width: 8px !important; 260 | height: 8px !important; 261 | bottom: 0 !important; 262 | pointer-events: none !important; 263 | transition: box-shadow 0s var(--tab-transition-duration) var(--ease-basic) !important; 264 | clip-path: inset(0) !important; 265 | } 266 | 267 | .tab-background::before 268 | { 269 | border-bottom-right-radius: 8px !important; 270 | left: 0 !important; 271 | transform: translateX(-8px) !important; 272 | box-shadow: 4px 4px 0 4px var(--tab-bgcolor) !important; 273 | } 274 | 275 | .tab-background::after 276 | { 277 | border-bottom-left-radius: 8px !important; 278 | right: 0 !important; 279 | transform: translateX(8px) !important; 280 | box-shadow: -4px 4px 0 4px var(--tab-bgcolor) !important; 281 | } 282 | 283 | .tabbrowser-tab[visuallyselected][style*=transform] + .tabbrowser-tab[style*=transform] .tab-content::after, 284 | .tabbrowser-tab[style*=transform]:not([visuallyselected]) .tab-content::before, 285 | .tabbrowser-tab[style*=transform] + .tabbrowser-tab:not([visuallyselected]) .tab-content::before, 286 | .tabbrowser-tab:not([visuallyselected]):not(:hover):not([multiselected]) + .tabbrowser-tab:not([visuallyselected]):not(:hover):not([multiselected]) .tab-content::before, 287 | #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow]) .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not(:hover):not([multiselected]) .tab-content::after 288 | { 289 | opacity: var(--tab-separator-opacity) !important; 290 | } 291 | 292 | #tabbrowser-tabs[overflow] .tabbrowser-tab[pinned] + .tabbrowser-tab:not([pinned]) .tab-content::before 293 | { 294 | opacity: 0 !important; 295 | } 296 | 297 | .tabbrowser-tab[visuallyselected] 298 | { 299 | --tab-transition-duration: 0s; 300 | } 301 | 302 | .tab-throbber, 303 | .tab-throbber-fallback 304 | { 305 | margin-inline-end: 8px !important; 306 | } 307 | 308 | .tab-icon-image 309 | { 310 | margin: 0 !important; 311 | } 312 | 313 | /* hide new tab favicon */ 314 | .tabbrowser-tab[image^="chrome://branding/"]:not([pinned]) .tab-icon-image 315 | { 316 | display: none !important; 317 | } 318 | 319 | .tab-label-container 320 | { 321 | margin-top: -2px !important; 322 | opacity: 1 !important; 323 | } 324 | 325 | .tabbrowser-tab[image]:not([image^="chrome://branding/"]) .tab-label-container, 326 | .tabbrowser-tab:-moz-any([progress], [busy]) .tab-label-container 327 | { 328 | padding-inline-start: 8px !important; 329 | } 330 | 331 | .tabbrowser-tab:-moz-any([soundplaying], [muted], [activemedia-blocked]):not([pinned]) .tab-icon-image 332 | { 333 | visibility: hidden !important; 334 | } 335 | 336 | .tab-icon-sound-label 337 | { 338 | display: none !important; 339 | } 340 | 341 | .tabbrowser-tab[fadein] .tab-close-button 342 | { 343 | visibility: visible !important; 344 | } 345 | 346 | .tab-close-button 347 | { 348 | list-style-image: url(close-tab.svg) !important; 349 | width: 16px !important; 350 | height: 16px !important; 351 | margin: 0 !important; 352 | padding: 0 !important; 353 | } 354 | 355 | .tab-close-button, 356 | .tab-icon-overlay:-moz-any([soundplaying], [muted], [activemedia-blocked]), 357 | .tab-icon-sound 358 | { 359 | border-radius: 99px !important; 360 | color: inherit !important; 361 | -moz-context-properties: fill, fill-opacity !important; 362 | transition-property: fill-opacity, background-color !important; 363 | transition-duration: .15s !important; 364 | transition-timing-function: var(--ease-basic) !important; 365 | fill-opacity: 1 !important; 366 | opacity: 1 !important; 367 | } 368 | 369 | .tab-close-button:hover, 370 | .tab-icon-overlay:-moz-any([soundplaying], [muted], [activemedia-blocked]):hover, 371 | .tab-icon-sound:hover 372 | { 373 | background-color: var(--toolbarbutton-hover-background) !important; 374 | } 375 | 376 | .tab-close-button:hover:active, 377 | .tab-icon-overlay:-moz-any([soundplaying], [muted], [activemedia-blocked]):hover:active, 378 | .tab-icon-sound:hover:active 379 | { 380 | background-color: var(--toolbarbutton-active-background) !important; 381 | } 382 | 383 | .tab-icon-overlay[pinned] 384 | { 385 | margin: 0 !important; 386 | margin-inline-start: -16px !important; 387 | } 388 | 389 | .tab-sharing-icon-overlay 390 | { 391 | margin-inline-start: -16px !important; 392 | } 393 | 394 | @keyframes rotate-360 395 | { 396 | 0% { transform: rotate(0); } 397 | 100% { transform: rotate(1turn); } 398 | } 399 | 400 | .tab-throbber 401 | { 402 | -moz-context-properties: fill !important; 403 | fill: currentColor !important; 404 | background-image: url(spinner-busy.svg) !important; 405 | margin: 0 !important; 406 | transform-origin: center !important; 407 | animation: rotate-360 1.333s linear infinite reverse !important; 408 | position: static !important; 409 | } 410 | 411 | .tab-throbber[progress] 412 | { 413 | background-image: url(spinner-progress.svg) !important; 414 | animation-direction: normal !important; 415 | } 416 | 417 | .tab-throbber::before 418 | { 419 | display: none !important; 420 | } 421 | 422 | /* clipped tabs */ 423 | #tabbrowser-tabs[closebuttons=activetab] .tab-content:not([pinned]) 424 | { 425 | padding-inline-start: 8px !important; 426 | } 427 | 428 | #tabbrowser-tabs[closebuttons=activetab] .tabbrowser-tab:not([visuallyselected]) .tab-close-button 429 | { 430 | visibility: collapse !important; 431 | } 432 | 433 | #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow][labeldirection="ltr"]:not([pinned]), 434 | #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(ltr):not([pinned]) 435 | { 436 | mask-image: linear-gradient(to right, black 70%, transparent) !important; 437 | } 438 | 439 | #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow][labeldirection="rtl"]:not([pinned]), 440 | #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(rtl):not([pinned]) 441 | { 442 | mask-image: linear-gradient(to left, black 70%, transparent) !important; 443 | } 444 | 445 | .tab-content[pinned] 446 | { 447 | -moz-box-pack: center !important; 448 | } 449 | 450 | .tab-icon-image[pinned], 451 | .tab-throbber[pinned] 452 | { 453 | margin: auto !important; 454 | } 455 | 456 | .tab-content[pinned] 457 | { 458 | width: 36px !important; 459 | padding: 0 !important; 460 | padding-inline-start: 10px !important; 461 | padding-inline-end: 0 !important; 462 | } 463 | 464 | .tab-label-container[pinned], 465 | .tab-close-button[pinned] 466 | { 467 | visibility: hidden !important; 468 | } 469 | 470 | /* close button / favicon is centered within 36px tab */ 471 | /* disabled for now because it's broken in recent version of Firefox */ 472 | @supports -moz-bool-pref("materialFox.reduceTabOverflow disabled") 473 | { 474 | #main-window 475 | { 476 | /* same as Chrome */ 477 | min-width: 500px !important; 478 | } 479 | 480 | #tabbrowser-tabs[overflow] .tab-content 481 | { 482 | -moz-box-pack: center !important; 483 | } 484 | 485 | #tabbrowser-tabs[overflow] .tab-icon-image 486 | { 487 | margin: auto !important; 488 | } 489 | 490 | #tabbrowser-tabs[overflow] .tab-content[image]:not([image^="chrome://branding/"]):not([pinned]) 491 | { 492 | width: 36px !important; 493 | padding: 0 !important; 494 | padding-inline-start: 0 !important; 495 | padding-inline-end: 0 !important; 496 | } 497 | 498 | #tabbrowser-tabs[overflow] .tabbrowser-tab:not([visuallyselected]):not([pinned]) .tab-close-button, 499 | #tabbrowser-tabs[overflow] .tabbrowser-tab[visuallyselected]:not([pinned]) :-moz-any(.tab-label-container, .tab-icon-image), 500 | #tabbrowser-tabs[overflow] .tabbrowser-tab[image]:not([image^="chrome://branding/"]):not([pinned]) .tab-label-container 501 | { 502 | display: none !important; 503 | } 504 | } 505 | 506 | #tabbrowser-tabs #tabs-newtab-button 507 | { 508 | margin-inline-start: 6px !important; 509 | } 510 | 511 | #tabbrowser-tabs[overflow] .tabbrowser-arrowscrollbox 512 | { 513 | border-radius: 8px 8px 0 0 !important; 514 | background-color: rgba(0, 0, 0, .1) !important; 515 | padding-inline-start: 0 !important; 516 | } 517 | 518 | #tabbrowser-tabs[overflow] 519 | { 520 | margin-inline-start: 8px !important; 521 | } 522 | 523 | #tabbrowser-tabs[overflow] .tabbrowser-tab[first-visible-tab]:not([pinned]), 524 | #tabbrowser-tabs[overflow] .tabbrowser-tab[pinned] + .tabbrowser-tab:not([pinned]), 525 | #tabbrowser-tabs:not([overflow]) .tabbrowser-tab[first-visible-tab] 526 | { 527 | margin-inline-start: 8px !important; 528 | } 529 | 530 | #tabbrowser-tabs[overflow] .tabbrowser-tab[last-visible-tab]:not([pinned]) 531 | { 532 | margin-inline-end: 8px !important; 533 | } 534 | 535 | .tabbrowser-tab[usercontextid] > .tab-stack::after 536 | { 537 | content: "" !important; 538 | position: absolute !important; 539 | display: flex !important; 540 | bottom: calc(100% - 12px) !important; 541 | left: calc(100% - 9px) !important; 542 | width: 6px !important; 543 | height: 6px !important; 544 | border-radius: 99px !important; 545 | box-sizing: border-box !important; 546 | transform: none !important; 547 | background: var(--identity-tab-color) !important; 548 | transition-property: top, bottom, left, right, width, height, border-radius; 549 | transition-duration: .225s !important; 550 | transition-timing-function: var(--ease-out) !important; 551 | } 552 | 553 | .tab-context-line { 554 | visibility: hidden !important; 555 | } 556 | 557 | .tab-bottom-line 558 | { 559 | display: none !important; 560 | } 561 | 562 | /* < 72 */ 563 | #tabbrowser-tabs .arrowscrollbox-overflow-start-indicator, 564 | #tabbrowser-tabs .arrowscrollbox-overflow-end-indicator, 565 | /* >= 72 */ 566 | #tabbrowser-tabs::part(arrowscrollbox-overflow-start-indicator), 567 | #tabbrowser-tabs::part(arrowscrollbox-overflow-end-indicator), 568 | /* no ::part workaround - may have side effects */ 569 | spacer[part="overflow-start-indicator"], 570 | spacer[part="overflow-end-indicator"] 571 | { 572 | display: none !important; 573 | } 574 | 575 | .tab-loading-burst[bursting]::before 576 | { 577 | display: none !important; 578 | } 579 | 580 | /* high DPI adjustments */ 581 | @media (min--moz-device-pixel-ratio: 2) 582 | { 583 | .tabbrowser-tab::before 584 | { 585 | transform: translateY(.5px) !important; 586 | } 587 | 588 | .tabbrowser-tab:last-of-type::after 589 | { 590 | transform: translate(-1px, .5px) !important; 591 | } 592 | 593 | /* macOS */ 594 | @media (-moz-mac-yosemite-theme) 595 | { 596 | .titlebar-buttonbox 597 | { 598 | margin-top: .5px !important; 599 | margin-bottom: -.5px !important; 600 | } 601 | } 602 | } 603 | -------------------------------------------------------------------------------- /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 | color: inherit !important; 21 | } 22 | 23 | .urlbarView-row-inner:hover { 24 | background-color: var(--toolbar-field-hover-background-color) !important; 25 | } 26 | 27 | .urlbarView-row-inner:focus { 28 | background-color: var(--toolbar-field-focus-background-color) !important; 29 | } 30 | 31 | .urlbarView-no-wrap 32 | { 33 | height: 100% !important; 34 | align-items: center !important; 35 | margin-inline-start: 0 !important; 36 | max-width: 100% !important; 37 | } 38 | 39 | .urlbarView-row[has-url][type]:not([type=bookmark]) .urlbarView-row-inner 40 | { 41 | flex-direction: column !important; 42 | align-items: flex-start !important; 43 | } 44 | 45 | .urlbarView-row[has-url][type]:not([type=bookmark]) .urlbarView-no-wrap 46 | { 47 | height: auto !important; 48 | align-self: flex-start !important; 49 | width: 100% !important; 50 | } 51 | 52 | .urlbarView-title-separator 53 | { 54 | visibility: visible !important; 55 | } 56 | 57 | .urlbarView-title-separator::before 58 | { 59 | content: "-" !important; 60 | color: inherit !important; 61 | } 62 | 63 | .urlbarView-title-separator, 64 | .urlbarView-action 65 | { 66 | opacity: .6 !important; 67 | color: inherit !important; 68 | font-size: revert !important; 69 | } 70 | 71 | .urlbarView-favicon 72 | { 73 | position: absolute !important; 74 | left: 16px !important; 75 | top: 50% !important; 76 | transform: translateY(-50%) !important; 77 | fill-opacity: .6 !important; 78 | flex: unset !important; 79 | margin: unset !important; 80 | } 81 | 82 | .urlbarView-title, 83 | .urlbarView-url 84 | { 85 | text-overflow: ellipsis !important; 86 | mask-image: none !important; 87 | } 88 | 89 | .urlbarView-title 90 | { 91 | flex: 1 !important; 92 | flex-basis: unset !important; 93 | } 94 | 95 | .urlbarView-url 96 | { 97 | max-width: 100% !important; 98 | font-size: revert !important; 99 | color: var(--urlbar-popup-url-color) !important; 100 | padding: 0 !important; 101 | } 102 | 103 | .urlbarView-url:not(:empty) 104 | { 105 | visibility: visible !important; 106 | } 107 | 108 | .urlbarView-action:not(:empty) 109 | { 110 | display: flex !important; 111 | } 112 | 113 | .urlbarView-row[type=search] ~ .urlbarView-row[type=search] .urlbarView-title-separator, 114 | .urlbarView-row[type=search] ~ .urlbarView-row[type=search] .urlbarView-action, 115 | .urlbarView-row[has-url][type]:not([type=bookmark]) .urlbarView-title-separator, 116 | .urlbarView-type-icon 117 | { 118 | display: none !important; 119 | } 120 | 121 | .urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-favicon, 122 | .urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-title, 123 | .urlbarView-tip-button, 124 | .urlbarView-tip-help 125 | { 126 | margin-block-end: 0 !important; 127 | } 128 | 129 | .urlbarView .search-one-offs 130 | { 131 | padding: 4px !important; 132 | display: flex !important; 133 | } 134 | 135 | .urlbarView .search-panel-one-offs-header 136 | { 137 | margin-inline-start: 12px !important; 138 | line-height: 40px !important; 139 | transform: translateY(-1px) !important; 140 | } 141 | 142 | .urlbarView .search-panel-one-offs 143 | { 144 | border-radius: 0 0 8px 8px !important; 145 | display: inline-flex !important; 146 | flex-direction: row !important; 147 | padding: 0 !important; 148 | margin: 0 !important; 149 | float: left !important; 150 | max-width: none !important; 151 | height: auto !important; 152 | } 153 | 154 | .urlbarView .searchbar-engine-one-off-item 155 | { 156 | height: 32px !important; 157 | border-radius: 16px !important; 158 | padding: 0 8px !important; 159 | margin: 4px !important; 160 | background-image: none !important; 161 | color: inherit !important; 162 | border: 0 !important; 163 | } 164 | 165 | .searchbar-engine-one-off-item:hover { 166 | background-color: var(--toolbarbutton-hover-background) !important; 167 | } 168 | 169 | .searchbar-engine-one-off-item:focus { 170 | background-color: var(--toolbarbutton-hover-background) !important; 171 | } 172 | 173 | #urlbar-container 174 | { 175 | max-height: 36px !important; 176 | } 177 | 178 | #urlbar, 179 | #searchbar 180 | { 181 | font-size: var(--toolbar-field-fontsize) !important; 182 | border-radius: 99px !important; 183 | background-color: var(--toolbar-field-background-color) !important; 184 | border: 0 !important; 185 | box-shadow: none !important; 186 | padding: 2px !important; 187 | background-clip: padding-box !important; 188 | transition: background-color .1s var(--ease-basic) !important; 189 | -moz-box-align: center !important; 190 | display: block !important; 191 | margin: 0 !important; 192 | top: 0 !important; 193 | color: inherit !important; 194 | 195 | --urlbar-height: 28px !important; 196 | 197 | min-height: var(--urlbar-height) !important; 198 | } 199 | 200 | #urlbar:not(:-moz-lwtheme), 201 | #searchbar:not(:-moz-lwtheme) 202 | { 203 | color: inherit !important; 204 | } 205 | 206 | #urlbar:hover, 207 | #searchbar:hover 208 | { 209 | background-color: var(--toolbar-field-hover-background-color) !important; 210 | } 211 | 212 | #urlbar[focused], 213 | #urlbar[open], 214 | #searchbar[focused], 215 | #searchbar[open] 216 | { 217 | background-color: var(--toolbar-field-focus-background-color) !important; 218 | } 219 | 220 | #urlbar[focused], 221 | #searchbar[focused] 222 | { 223 | /* -moz-accent-color won't work in a var... */ 224 | border: 2px solid -moz-accent-color !important; 225 | padding: 0 !important; 226 | margin: 0 !important; 227 | } 228 | 229 | /* if only focused, don't break out the urlbar */ 230 | #urlbar[focused]:not([open]) 231 | { 232 | width: 100% !important; 233 | left: 0 !important; 234 | right: 0 !important; 235 | } 236 | 237 | #urlbar[open], 238 | #searchbar[open] 239 | { 240 | border: 0 !important; 241 | padding: 0 !important; 242 | border-radius: 8px !important; 243 | min-height: 37px !important; 244 | margin: -4px 0 -1px !important; 245 | box-shadow: 246 | 0 5px 5px -3px rgba(0,0,0,.2), 247 | 0 8px 10px 1px rgba(0,0,0,.14), 248 | 0 3px 14px 2px rgba(0,0,0,.12) !important; 249 | z-index: 99999 !important; 250 | } 251 | 252 | /* 71+ */ 253 | #urlbar-background 254 | { 255 | display: none !important; 256 | } 257 | 258 | #urlbar-input-container, 259 | #searchbar 260 | { 261 | display: flex !important; 262 | align-items: center !important; 263 | } 264 | 265 | #urlbar-input-container 266 | { 267 | height: auto !important; 268 | padding: 0 !important; 269 | border: 0 !important; 270 | } 271 | 272 | .urlbar-input-box, 273 | .searchbar-textbox 274 | { 275 | flex: 1 !important; 276 | } 277 | 278 | #urlbar[breakout-extend="true"] .urlbar-input-box { 279 | transform: translateX(-9px) !important; 280 | } 281 | 282 | #urlbar-input 283 | { 284 | width: 100% !important; 285 | } 286 | 287 | #urlbar-input, 288 | .searchbar-textbox 289 | { 290 | color: var(--lwt-toolbar-field-color) !important; 291 | } 292 | 293 | #urlbar-input::placeholder, 294 | .searchbar-textbox::placeholder 295 | { 296 | opacity: .66 !important; 297 | } 298 | 299 | #urlbar[open] #urlbar-input-container 300 | { 301 | height: 37px !important; 302 | } 303 | 304 | #urlbar[open] #identity-box 305 | { 306 | margin-inline-start: 8px !important; 307 | margin-inline-end: 8px !important; 308 | } 309 | 310 | :root[privatebrowsingmode] #urlbar-search-mode-indicator 311 | { 312 | background-color: var(--toolbar-bgcolor) !important; 313 | } 314 | 315 | .urlbarView 316 | { 317 | top: 0 !important; 318 | left: 0 !important; 319 | right: 0 !important; 320 | position: relative !important; 321 | box-shadow: none !important; 322 | border: 0 !important; 323 | background: 0 !important; 324 | margin: 0 !important; 325 | } 326 | 327 | #urlbar[open] .urlbarView 328 | { 329 | display: block !important; 330 | width: 100% !important; 331 | } 332 | 333 | #urlbar-results 334 | { 335 | padding: 0 !important; 336 | } 337 | 338 | #urlbar-container, 339 | #searchbar-container 340 | { 341 | overflow: visible !important; 342 | padding: 0 !important; 343 | margin-inline: 6px !important; 344 | } 345 | 346 | #identity-icon 347 | { 348 | fill-opacity: 1 !important; 349 | } 350 | 351 | #identity-icon-labels 352 | { 353 | color: inherit !important; 354 | opacity: 1 !important; 355 | padding: 0 !important; 356 | margin-inline-start: 8px !important; 357 | margin-block-start: -1px !important; 358 | display: none !important; 359 | align-items: center !important; 360 | } 361 | 362 | #identity-box 363 | { 364 | display: flex !important; 365 | position: relative !important; 366 | } 367 | 368 | .identity-box-button, 369 | #tracking-protection-icon-container 370 | { 371 | background: none !important; 372 | } 373 | 374 | #identity-icon-box 375 | { 376 | border: 0 !important; 377 | padding: 0 !important; 378 | } 379 | 380 | #notification-popup-box { 381 | width: auto !important; 382 | height: auto !important; 383 | } 384 | 385 | #notification-popup-box image { 386 | width: 16px !important; 387 | height: 16px !important; 388 | padding: 0 !important; 389 | } 390 | 391 | /* separator */ 392 | #urlbar[pageproxystate=valid] #identity-box:-moz-any(.chromeUI, .extensionPage, .notSecureText) #identity-icon-box::after 393 | { 394 | content: "" !important; 395 | display: block !important; 396 | position: absolute !important; 397 | height: 16px !important; 398 | top: calc(50% - 8px) !important; 399 | right: 0 !important; 400 | background: #9d9e9f !important; 401 | width: 1px !important; 402 | transition: opacity .2s var(--ease-basic) !important; 403 | } 404 | 405 | 406 | #urlbar[pageproxystate=valid] #identity-box:-moz-any(.chromeUI, .extensionPage, .notSecureText) 407 | { 408 | padding-inline-end: 9px !important; 409 | margin-inline-end: 9px !important; 410 | } 411 | 412 | 413 | #urlbar[pageproxystate=valid] #identity-box:hover #identity-icon-box::after 414 | { 415 | opacity: 0 !important; 416 | } 417 | 418 | #urlbar[pageproxystate=valid] #identity-box.extensionPage > #identity-icon 419 | { 420 | list-style-image: none !important; 421 | margin-inline-end: -16px !important; 422 | } 423 | 424 | #identity-icon-label 425 | { 426 | margin: 0 !important; 427 | padding-inline-start: 8px !important; 428 | transform: translateY(-2px) !important; 429 | 430 | } 431 | 432 | /* no longer used as a connection icon */ 433 | #connection-icon 434 | { 435 | display: none !important; 436 | } 437 | 438 | #urlbar[pageproxystate=valid] #identity-box:-moz-any( 439 | .mixedActiveBlocked, 440 | .mixedDisplayContentLoadedActiveBlocked, 441 | .mixedActiveContent 442 | ) > #connection-icon 443 | { 444 | display: -moz-box !important; 445 | } 446 | 447 | #urlbar[pageproxystate=valid] #identity-box:-moz-any(.weakCipher, .certUserOverridden, .certErrorPage, .insecureLoginForms, .mixedActiveContent) 448 | { 449 | color: #c94031 !important; 450 | } 451 | 452 | .urlbar-input 453 | { 454 | padding: 0 !important; 455 | } 456 | 457 | .searchbar-textbox 458 | { 459 | border: 0 !important; 460 | background: 0 !important; 461 | box-shadow: none !important; 462 | margin: 0 !important; 463 | -moz-appearance: none !important; 464 | } 465 | 466 | .searchbar-search-icon 467 | { 468 | margin: 0 !important; 469 | fill-opacity: 1 !important; 470 | } 471 | 472 | .searchbar-search-icon-overlay 473 | { 474 | margin-inline-start: -11px !important; 475 | margin-inline-end: 0 !important; 476 | 477 | /* not really useful anyway */ 478 | display: none !important; 479 | } 480 | 481 | #page-action-buttons > #pageActionSeparator, 482 | .urlbar-history-dropmarker 483 | { 484 | display: none !important; 485 | } 486 | 487 | #pageActionSeparator 488 | { 489 | height: 24px !important; 490 | } 491 | 492 | .urlbar-icon-wrapper 493 | { 494 | background: 0 !important; 495 | } 496 | 497 | .urlbar-icon, 498 | #page-action-buttons > toolbarbutton, 499 | .searchbar-search-button, 500 | #identity-box, 501 | #tracking-protection-icon-box 502 | { 503 | min-width: 32px !important; 504 | height: 24px !important; 505 | padding: 4px 8px !important; 506 | margin: 0 !important; 507 | border: 0 !important; 508 | border-radius: 99px !important; 509 | fill-opacity: 1 !important; 510 | transition: background-color .2s var(--ease-basic) !important; 511 | background: 0 !important; 512 | background-color: transparent !important; 513 | } 514 | 515 | #tracking-protection-icon-container 516 | { 517 | background: 0 !important; 518 | border: 0 !important; 519 | margin: 0 !important; 520 | padding: 0 !important; 521 | width: auto !important; 522 | order: 97 !important; 523 | } 524 | 525 | #tracking-protection-icon-box 526 | { 527 | display: block !important; 528 | width: 32px !important; 529 | } 530 | 531 | #tracking-protection-icon-box 532 | { 533 | transition: 534 | background-color .2s var(--ease-basic), 535 | width .15s var(--ease-in), 536 | opacity .15s var(--ease-basic), 537 | visibility 0s .2s !important; 538 | opacity: 0 !important; 539 | visibility: hidden !important; 540 | width: 0 !important; 541 | } 542 | 543 | #urlbar:hover #tracking-protection-icon-box, 544 | #tracking-protection-icon-container[open] #tracking-protection-icon-box, 545 | #tracking-protection-icon-box[active] 546 | { 547 | transition: 548 | background-color .2s var(--ease-basic), 549 | width .3s var(--ease-out), 550 | opacity .3s var(--ease-basic) !important; 551 | opacity: 1 !important; 552 | visibility: visible !important; 553 | width: 32px !important; 554 | } 555 | 556 | #tracking-protection-icon 557 | { 558 | display: block !important; 559 | } 560 | 561 | #tracking-protection-icon-animatable-box 562 | { 563 | display: none !important; 564 | } 565 | 566 | #identity-box #notification-popup-box 567 | { 568 | padding: 0 !important; 569 | margin: 0 !important; 570 | } 571 | 572 | #page-action-buttons 573 | { 574 | height: 24px !important; 575 | display: flex !important; 576 | order: 99 !important; 577 | } 578 | 579 | #urlbar[open] #page-action-buttons, 580 | #urlbar[open] #tracking-protection-icon-container 581 | { 582 | display: none !important; 583 | } 584 | 585 | .urlbar-icon:hover:not([disabled]), 586 | #page-action-buttons > toolbarbutton:hover:not([disabled]), 587 | .searchbar-search-button:hover, 588 | #identity-box:hover:not(.no-hover), 589 | #tracking-protection-icon-container:hover #tracking-protection-icon-box 590 | { 591 | background-color: var(--toolbarbutton-hover-background) !important; 592 | } 593 | 594 | .urlbar-icon:hover:active:not([disabled]), 595 | .urlbar-icon[open], 596 | #page-action-buttons > toolbarbutton:hover:active:not([disabled]), 597 | .searchbar-search-button:hover:active, 598 | #identity-box:hover:active:not(.no-hover), 599 | #identity-box[open]:not(.no-hover), 600 | #tracking-protection-icon-container[open] #tracking-protection-icon-box 601 | { 602 | background-color: var(--toolbarbutton-active-background) !important; 603 | transition-duration: 0 !important; 604 | } 605 | 606 | #contextual-feature-recommendation 607 | { 608 | width: auto !important; 609 | } 610 | 611 | .urlbar-page-action 612 | { 613 | padding: 0 !important; 614 | background: 0 !important; 615 | border-radius: 0 !important; 616 | height: 24px !important; 617 | width: 32px !important; 618 | } 619 | 620 | .urlbar-page-action:-moz-any( 621 | #reader-mode-button, 622 | #pageActionButton, 623 | #pocket-button-box, 624 | #pageAction-urlbar-screenshots_mozilla_org, 625 | #pageAction-urlbar-sendToDevice, 626 | #pageAction-urlbar-emailLink, 627 | #pageAction-urlbar-copyURL, 628 | #pageAction-urlbar-shareURL, 629 | #pageAction-urlbar-addSearchEngine 630 | ) 631 | { 632 | transition: 633 | background-color .2s var(--ease-basic), 634 | margin .15s var(--ease-in), 635 | opacity .15s var(--ease-basic), 636 | visibility 0s 4s !important; 637 | opacity: 0 !important; 638 | visibility: hidden !important; 639 | margin-inline-start: -32px !important; 640 | } 641 | 642 | #urlbar:hover .urlbar-page-action:-moz-any( 643 | #reader-mode-button, 644 | #pageActionButton, 645 | #pocket-button-box, 646 | #pageAction-urlbar-screenshots_mozilla_org, 647 | #pageAction-urlbar-sendToDevice, 648 | #pageAction-urlbar-emailLink, 649 | #pageAction-urlbar-copyURL, 650 | #pageAction-urlbar-shareURL, 651 | #pageAction-urlbar-addSearchEngine 652 | ), 653 | .urlbar-page-action:-moz-any( 654 | #reader-mode-button, 655 | #pageActionButton, 656 | #pocket-button-box, 657 | #pageAction-urlbar-screenshots_mozilla_org, 658 | #pageAction-urlbar-sendToDevice, 659 | #pageAction-urlbar-emailLink, 660 | #pageAction-urlbar-copyURL, 661 | #pageAction-urlbar-shareURL, 662 | #pageAction-urlbar-addSearchEngine 663 | ):-moz-any(:hover, [open], [readeractive]), 664 | .urlbar-page-action:-moz-any(:hover, [open]) ~ .urlbar-page-action:-moz-any( 665 | #reader-mode-button, 666 | #pageActionButton, 667 | #pocket-button-box, 668 | #pageAction-urlbar-screenshots_mozilla_org, 669 | #pageAction-urlbar-sendToDevice, 670 | #pageAction-urlbar-emailLink, 671 | #pageAction-urlbar-copyURL, 672 | #pageAction-urlbar-shareURL, 673 | #pageAction-urlbar-addSearchEngine), 674 | #tracking-protection-icon-container[open] ~ #page-action-buttons .urlbar-page-action:-moz-any( 675 | #reader-mode-button, 676 | #pageActionButton, 677 | #pocket-button-box, 678 | #pageAction-urlbar-screenshots_mozilla_org, 679 | #pageAction-urlbar-sendToDevice, 680 | #pageAction-urlbar-emailLink, 681 | #pageAction-urlbar-copyURL, 682 | #pageAction-urlbar-shareURL, 683 | #pageAction-urlbar-addSearchEngine) 684 | { 685 | transition: 686 | background-color .2s var(--ease-basic), 687 | margin .3s var(--ease-out), 688 | opacity .3s var(--ease-basic) !important; 689 | opacity: 1 !important; 690 | visibility: visible !important; 691 | margin-inline-start: 0 !important; 692 | } 693 | 694 | .urlbar-display 695 | { 696 | color: inherit !important; 697 | margin: 0 !important; 698 | } 699 | 700 | #pocket-button-box[animate] > #pocket-animatable-box 701 | { 702 | margin-inline-start: 6px !important; 703 | } 704 | 705 | #star-button-animatable-box 706 | { 707 | display: none !important; 708 | } 709 | 710 | #userContext-icons 711 | { 712 | flex-direction: row !important; 713 | align-items: center !important; 714 | justify-content: center !important; 715 | position: relative !important; 716 | padding-inline: 8px !important; 717 | margin: 0 !important; 718 | color: var(--identity-tab-color) !important; 719 | } 720 | 721 | #userContext-icons:not([hidden]) 722 | { 723 | display: flex !important; 724 | } 725 | 726 | #userContext-icons > * 727 | { 728 | z-index: 1 !important; 729 | color: inherit !important; 730 | fill: currentColor !important; 731 | } 732 | 733 | #userContext-label 734 | { 735 | margin: 0 !important; 736 | } 737 | 738 | #userContext-label + #userContext-indicator 739 | { 740 | margin-inline-start: 6px !important; 741 | } 742 | 743 | #userContext-icons::before 744 | { 745 | content: '' !important; 746 | position: absolute !important; 747 | left: 0 !important; 748 | right: 0 !important; 749 | top: 0 !important; 750 | bottom: 0 !important; 751 | background: var(--identity-tab-color) !important; 752 | border-radius: 99px !important; 753 | opacity: .1 !important; 754 | } 755 | 756 | #cfr-label-container 757 | { 758 | background: 0 !important; 759 | } 760 | 761 | #cfr-label 762 | { 763 | display: none !important; 764 | } 765 | 766 | #cfr-button 767 | { 768 | fill: currentColor !important; 769 | } 770 | 771 | #urlbar[open] #urlbar-go-button, 772 | #searchbar[open] #search-go-button, 773 | /* < 71 */ 774 | #urlbar[open] .urlbar-go-button, 775 | #searchbar[open] .search-go-button 776 | { 777 | height: 32px !important; 778 | } 779 | 780 | #urlbar-go-button, 781 | #search-go-button, 782 | /* < 71 */ 783 | .urlbar-go-button, 784 | .search-go-button 785 | { 786 | list-style-image: url(go.svg) !important; 787 | } 788 | 789 | .search-go-container 790 | { 791 | display: flex !important; 792 | } 793 | 794 | #searchbar .textbox-input 795 | { 796 | padding: 0 !important; 797 | } 798 | 799 | /* lock (secure) */ 800 | #identity-box[pageproxystate="valid"].verifiedDomain #identity-icon, 801 | #identity-box[pageproxystate="valid"].mixedActiveBlocked #identity-icon 802 | { 803 | list-style-image: var(--lock-icon) !important; 804 | } 805 | 806 | /* warning (dangerous) */ 807 | #identity-box[pageproxystate="valid"].notSecure #identity-icon, 808 | #identity-box[pageproxystate="valid"].mixedActiveContent #identity-icon, 809 | #identity-box[pageproxystate="valid"].httpsOnlyErrorPage #identity-icon, 810 | #identity-box[pageproxystate="valid"].weakCipher #identity-icon, 811 | #identity-box[pageproxystate="valid"].mixedDisplayContent #identity-icon, 812 | #identity-box[pageproxystate="valid"].mixedDisplayContentLoadedActiveBlocked #identity-icon, 813 | #identity-box[pageproxystate="valid"].certUserOverridden #identity-icon, 814 | #identity-box[pageproxystate="valid"].certErrorPage #identity-icon 815 | { 816 | list-style-image: var(--warning-icon) !important; 817 | } 818 | 819 | #urlbar-input, 820 | #searchbar-input, 821 | .searchbar-textbox /* < 71 */ 822 | { 823 | transform: translateY(var(--input-offset)) !important; 824 | line-height: 1.745em !important; 825 | } 826 | 827 | /* 1x */ 828 | #urlbar 829 | { 830 | --info-icon: url(info-1x.svg); 831 | --lock-icon: url(connection-1x.svg); 832 | --warning-icon: url(connection-warning-1x.svg); 833 | } 834 | 835 | #urlbar, 836 | #searchbar 837 | { 838 | --input-offset: -1px; 839 | } 840 | 841 | /* 2x */ 842 | @media (min--moz-device-pixel-ratio: 2) 843 | { 844 | #urlbar 845 | { 846 | --info-icon: url(info-2x.svg); 847 | --lock-icon: url(connection-2x.svg); 848 | --warning-icon: url(connection-warning-2x.svg); 849 | } 850 | 851 | #urlbar, 852 | #searchbar 853 | { 854 | --input-offset: -.5px; 855 | } 856 | 857 | #identity-icon-labels 858 | { 859 | padding-inline-end: .5px !important; 860 | } 861 | } 862 | --------------------------------------------------------------------------------