├── .gitattributes ├── 01.png ├── 02.png ├── LICENSE ├── README.md ├── chrome ├── content │ ├── common.css │ └── newtab.css ├── global │ ├── browser.css │ ├── colors.css │ ├── popup.css │ ├── tree.css │ └── tweaks.css ├── icons │ ├── accessibility.svg │ ├── account-private.svg │ ├── account.svg │ ├── add-to-dictionary.svg │ ├── arrow-down.svg │ ├── arrow-filled-down.svg │ ├── arrow-filled-left.svg │ ├── arrow-filled-right.svg │ ├── arrow-left.svg │ ├── arrow-right.svg │ ├── arrow-up.svg │ ├── audio-save.svg │ ├── autoplay-media-blocked.svg │ ├── autoplay-media.svg │ ├── back.svg │ ├── bookmark-hollow.svg │ ├── bookmark-star-on-tray.svg │ ├── bookmark.svg │ ├── camera-blocked.svg │ ├── camera.svg │ ├── canvas-blocked.svg │ ├── canvas.svg │ ├── checkmark.svg │ ├── chevron.svg │ ├── close-9px.svg │ ├── close.svg │ ├── container-tab.svg │ ├── customize.svg │ ├── desktop-notification-blocked.svg │ ├── desktop-notification.svg │ ├── developer.svg │ ├── downloads.svg │ ├── duplicate-tab.svg │ ├── edit-copy-without-tracking.svg │ ├── edit-copy.svg │ ├── edit-cut.svg │ ├── edit-delete.svg │ ├── edit-paste.svg │ ├── edit-redo.svg │ ├── edit-select-all.svg │ ├── edit-undo.svg │ ├── edit.svg │ ├── extension-blocked.svg │ ├── extension.svg │ ├── firefox-view.svg │ ├── firefox.svg │ ├── folder.svg │ ├── folderDarkOutline.svg │ ├── folderFluentYellow.svg │ ├── forget.svg │ ├── forward.svg │ ├── fullscreen-exit.svg │ ├── fullscreen.svg │ ├── geo-blocked.svg │ ├── geo.svg │ ├── help.svg │ ├── history.svg │ ├── home.svg │ ├── icons.css │ ├── image-copy.svg │ ├── image-open.svg │ ├── image-save.svg │ ├── info.svg │ ├── inspect.svg │ ├── library.svg │ ├── link.svg │ ├── mail.svg │ ├── manage.svg │ ├── media-loop.svg │ ├── media-mute.svg │ ├── media-pause.svg │ ├── media-pip.svg │ ├── media-play.svg │ ├── media-speed.svg │ ├── media-unmute.svg │ ├── menu.svg │ ├── microphone-blocked.svg │ ├── microphone.svg │ ├── midi.svg │ ├── move-tab.svg │ ├── new-tab-image.svg │ ├── new-tab.svg │ ├── open.svg │ ├── page-portrait.svg │ ├── passwords.svg │ ├── paste-and-go.svg │ ├── permissions.svg │ ├── persistent-storage-blocked.svg │ ├── persistent-storage.svg │ ├── pin.svg │ ├── plus.svg │ ├── pocket-outline.svg │ ├── popup.svg │ ├── print.svg │ ├── private-window.svg │ ├── privateBrowsing.svg │ ├── reader-mode.svg │ ├── reload-to-stop.svg │ ├── reload.svg │ ├── report.svg │ ├── save.svg │ ├── screen-blocked.svg │ ├── screen.svg │ ├── screenshot.svg │ ├── search-glass.svg │ ├── search-page.svg │ ├── security-broken.svg │ ├── security-warning.svg │ ├── security.svg │ ├── send-to-device.svg │ ├── settings.svg │ ├── share.svg │ ├── sidebars-right.svg │ ├── sidebars.svg │ ├── source-code.svg │ ├── stop-to-reload.svg │ ├── tab-audio-blocked-small.svg │ ├── tab-audio-muted-small.svg │ ├── tab-audio-playing-small.svg │ ├── tab.svg │ ├── tag.svg │ ├── tool-profiler.svg │ ├── tracking-protection.svg │ ├── translate.svg │ ├── video-open.svg │ ├── video-save.svg │ ├── win11-close-dark.svg │ ├── win11-close.svg │ ├── win11-maximize.svg │ ├── win11-minimize.svg │ ├── win11-restore.svg │ ├── window.svg │ ├── xr-blocked.svg │ ├── xr.svg │ └── zoom-out.svg ├── toolbar │ ├── findbar.css │ ├── navbar.css │ ├── personalbar.css │ ├── tabbar.css │ └── urlbar.css ├── tweaks │ └── hide-tabs-bar.css ├── userChrome.css └── userContent.css ├── image-1.png ├── image-2.png ├── image-3.png ├── image-4.png ├── image-5.png ├── image-6.png ├── image.png ├── sidebery.css └── user.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VincentAzz/FirefoxCustomCSSConfig/4df3bfa5d380223ca41eb85b55e7b273fba04a00/01.png -------------------------------------------------------------------------------- /02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VincentAzz/FirefoxCustomCSSConfig/4df3bfa5d380223ca41eb85b55e7b273fba04a00/02.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 0xamiiich 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FirefoxCustomCSSConfig 2 | 3 | [![页面访问量](https://badges.toozhao.com/badges/01HPXGQP669GNMEDM0XV87B2TX/green.svg)](https://badges.toozhao.com/stats/01HPXGQP669GNMEDM0XV87B2TX "Get your own page views count badge on badges.toozhao.com") 4 | 5 | ## 🤔 这是什么 6 | 厌倦了Firefox的传统主题和默认界面？ 7 | 8 | 这是一个使用 [userChrome.css](https://support.mozilla.org/en-US/kb/contributors-guide-firefox-advanced-customization) 对 Firefox 进行高度自定义的主题 9 | 10 | 基于 [EdgeFrFox UserChrome Theme](https://github.com/bmFtZQ/edge-frfox/) 和 [Sidebery](https://addons.mozilla.org/firefox/addon/sidebery/) 进行修改 11 | 12 | 使用 userChrome 类型的主题不会影响你的用户数据 13 | 14 | 截图预览: 15 | 16 | ![alt text](image-4.png) 17 | ![alt text](01.png) 18 | ![alt text](02.png) 19 | 20 |

21 | 22 | ## 🏷️ 前置版本 23 | 24 | 仅在Windows下经过测试 25 | 26 | Firefox 120+ 稳定版 27 | 28 | 或 除 Floorp 外任何基于 Firefox 120+ Fork 的浏览器 - Floorp使用的内建样式的userChrome会导致冲突 29 | 30 |
31 | 32 | 🚨 上述版本在Linux和macOS下未经充分测试 33 | 34 | 🚨 Firefox Beta/Nightly 下可能会导致意想不到的问题 35 | 36 | 37 |

38 | 39 | ## 🛠️ 所需工具 40 | - 插件 41 | - Firefox插件: [Sidebery](https://addons.mozilla.org/firefox/addon/sidebery/) - 为Firefox增加垂直标签栏，并易于在垂直/水平之间切换 42 | - Firefox插件(可选): [Firefox Color](https://addons.mozilla.org/zh-CN/firefox/addon/firefox-color) - 自定义主题色彩 43 | 44 | - 主题 - 你也可以使用任何你喜欢的主题 45 | - Nord by Luca Sander: [Nord](https://addons.mozilla.org/zh-CN/firefox/addon/nord123/) - 图中所使用的主题 46 | - 一个基于Firefox Color的模仿VSCode默认主题现代深色的配色方案[VSCode Modern Dark](https://color.firefox.com/?theme=XQAAAALDAQAAAAAAAABBqYhm849SCia-yK6EGccwS-xMDPr3WmqUaaq-qy5QgqeHG4K15Qd2-fIkmgjiM6AAxM3X9F70ZoGsfXBn8NHNS5chMvkRB4ubMyj96LA5TsM9yBeD-fLr7M3wKLiyQYXJunBpGdorYm9z3wHMzauk38U4_tq7SUG4zgp1J7ZKKvcbF9coql_OeBAGVg3QFSC8DOEBKwUE1j9N55GWEThkzdsK6HxgUw13CHuLb-5ZPPeYrIiNLb1prL0tKYG47pZOHaPWA_tuQT1eWgwa_m2PNx-ivKCbwSfD9KXfwJZpmn3FAYZCnn__j927-A) - 图中所使用的第二套主题 47 | 48 | - 其他 49 | - 文本编辑器，例如VSCode，方便你用来改动CSS样式，如果你只想使用记事本也没关系 50 | 51 |

52 | 53 | ## 📦 包含哪些内容 54 | ### 对EdgeFrFox Theme的改动 55 | chrome目录和user.js是EdgeFrFox Theme的核心文件，在此基础上进行了一些改动 56 | - 增加圆角和边缘padding，修改按钮及URL地址栏圆角 57 | - 调整侧栏样式以适配Sidebery垂直标签页，去除Firefox原有侧栏顶部的菜单栏 58 | - 增加书签栏文件夹样式 59 | - 一些字体大小和图标按钮间距调整 60 | 61 | ### Sidebery的样式配置项 62 | - sidebery.css是Sidebery的CSS样式配置项 63 | 64 |

65 | 66 | ## 📖 如何使用 67 | 1. 安装上述所需工具中你想要的插件、工具和主题。 68 | 2. 在Firefox中打开about:support，点击下方'配置文件夹'右侧的'打开文件夹'，在资源管理器中打开Firefox配置文件夹 69 | 3. 点击本页上方的Code按钮，选择Download ZIP下载仓库中的全部文件，或者以你喜欢的方式克隆仓库到本地 70 | 4. 解压ZIP，复制其中的chrome文件夹(整个文件夹)和user.js文件到打开的Firefox配置文件夹中 71 | 5. 关闭全部Firefox窗口，重新打开Firefox，这时部分主题应该已经被正确启用 72 | 6. 打开about:config，对如下配置项进行新建并启用 73 | - 新建并启用配置项: 键入完整的配置项名称，选择布尔，点击右侧加号即可 74 | - 禁用配置项: 点击切换按钮，将配置项切换到false，或点击删除按钮，删除配置项 75 | - 仅在安装了Sidebery垂直标签页后，启用uc.tweak.hide-tabs-bar隐藏横向标签页才会生效。通过定制工具栏，将侧栏按钮摆放在工具栏上，可以实现启用/禁用垂直标签页(禁用时使用默认的横向标签页) 76 | - 如果你想了解每个配置项的详细含义，或启用本主题中未使用的某些配置项，请参考 [EdgeFrFox UserChrome Theme Tweaks](https://github.com/bmFtZQ/edge-frfox?tab=readme-ov-file#tweaks) 77 | 78 | |需启用的配置项|布尔值|用途| 79 | |-|-|-| 80 | |uc.tweak.disable-drag-space |true|去除隐藏横向标签页时顶部的冗余空间| 81 | |uc.tweak.floating-tabs |true|横向标签页的浮动样式| 82 | |uc.tweak.hide-forward-button |true|前进按钮不可用时将其隐藏| 83 | |uc.tweak.hide-tabs-bar |true|隐藏默认的横向标签页，以配合Sidebery使用| 84 | |uc.tweak.remove-tab-separators |true|去除横向标签页间的分隔符| 85 | |uc.tweak.rounded-corners |true|启用圆角| 86 | |uc.tweak.show-tab-close-button-on-hover |true|仅在鼠标移动到标签页上方时才显示关闭按钮| 87 | 88 |
89 | 90 | ![alt text](image-2.png) 91 | 92 |
93 | 94 | 7. 用文本编辑器打开sidebery.css，复制全部内容到垂直标签页Sidebery的设置-样式编辑器中右侧的文本框 95 | ![alt text](image-1.png) 96 | 97 | ### 🎉 现在，主题配置已经完成，效果应该和截图中的基本一致 98 | 99 |

100 | 101 | ## 📖 如何禁用 102 | 1. 打开Firefox配置文件夹 103 | 2. 删掉配置文件夹中的chrome目录和user.js 104 | 3. 重启Firefox即可还原 105 | 106 |

107 | 108 | ## ⚗️ 样式修改 109 | 如果你不喜欢我的主题样式，或者喜欢折腾，你也可以动手修改。下面是一些可能涉及到的样式调整的位置 110 | 111 | #### 1. Sidebery部分关键样式 112 | Sidebery设置-样式编辑器-侧边栏-General 113 | 114 | |属性名|单位|用途| 115 | |-|-|-| 116 | |Border radius|px|标签页和按钮圆角| 117 | |Margin|px|按钮及标签页之间的间隔| 118 | |Toolbar background|HEX色值|Sidebery工具栏背景色| 119 | |Frame background|HEX色值|整个Sidebery的背景色| 120 | 121 |
122 | 123 | #### 2. 窗口四周边距、侧栏和页面四周的圆角 124 | chrome/global/browser.css 125 | 126 | |行数|属性名|单位|用途| 127 | |-|-|-|-| 128 | |46|--uc-tweak-rounded-corners-padding|px|窗口四周边距| 129 | |47|--uc-tweak-rounded-corners-radius|px|侧栏、页面四周圆角| 130 | 131 |
132 | 133 | #### 3. URL地址栏圆角 134 | chrome/toolbar/urlbar.css 135 | 136 | |行数|属性名|单位|用途| 137 | |-|-|-|-| 138 | |51|border-radius|px|地址栏圆角| 139 | 140 |
141 | 142 | #### 4. 去掉窗口最小化按钮左侧的冗余区域 143 | 144 | 这个区域可以用来拖动窗口，如果不喜欢可以去掉或更改其宽度 145 | 146 | 在chrome/userChrome.css中添加 147 | ``` 148 | :root { 149 | --uc-titlebar-drag-space: 0px !important; 150 | } 151 | ``` 152 | 153 |
154 | 155 | #### 5. 隐藏地址栏上的插件标识 156 | |![alt text](image-5.png)|→|![alt text](image-6.png)| 157 | |-|-|-| 158 | 159 | 在chrome/userChrome.css中添加 160 | ``` 161 | /* 隐藏urlbar上的插件标识符 */ 162 | #identity-box.extensionPage #identity-icon-label { 163 | display: none !important; 164 | } 165 | 166 | #identity-icon-box { 167 | background: none !important; 168 | } 169 | ``` 170 | 171 |
172 | 173 | #### 6. 书签栏文件夹颜色调整 174 | chrome/icon目录中含有3种样式的文件夹图标，默认使用浅色线条(适合暗色主题)图标 175 | 176 | |默认使用|文件名|样式|图标| 177 | |-|-|-|-| 178 | |✅|folder.svg (folderLightOutline.svg)|浅色线条 (适合暗色主题)|![alt text](chrome/icons/folder.svg)| 179 | ||folderDarkOutline.svg|暗色线条 (适合浅色主题)|![alt text](chrome/icons/folderDarkOutline.svg)| 180 | ||folderFluentYellow.svg|FluentUI 黄色|![alt text](chrome/icons/folderFluentYellow.svg)| 181 | 182 | 如需更改文件夹样式以适配主题，请将原有的folder.svg更改为其他名称，并将要启用的文件名称更改为folder.svg 183 | 184 |

185 | ...还有很多，用到再补🫡 186 | 187 |

188 | 189 | ## 🌎 有用的链接 190 | [EdgeFrFox UserChrome Theme](https://github.com/bmFtZQ/edge-frfox/) 191 | 192 | [FirefoxCSS Store](https://firefoxcss-store.github.io/)：Firefox的userChromeCSS主题集合，你可以在这里找到很多优秀的主题来尝试 193 | 194 | [Reddit r/FirefoxCSS](https://www.reddit.com/r/FirefoxCSS/s-store.github.io/)：Reddit上的FirefoxCSS论坛 195 | 196 | [Browser Toolbox](https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html)：Firefox浏览器调试工具，可以方便的探测浏览器自身的UI元素和CSS样式 197 | 198 |

199 | 200 | ## 🥰 其他信息 201 | 202 | 截图中Firefox所使用的字体和图标： 203 | 204 | - 网页字体：OneUI Sans From OneUI 6 205 | - 系统字体：[更纱黑体SC UI](https://github.com/be5invis/Sarasa-Gothic) 206 | - 代码等宽字体：[Jetbrains Mono](https://www.jetbrains.com/lp/mono/) 207 | - 图标库：[Fluent UI System Icons](https://github.com/microsoft/fluentui-system-icons) 208 | 209 |

210 | --- 211 |
-------------------------------------------------------------------------------- /chrome/content/common.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox - content/common.css */ 2 | 3 | /* colours */ 4 | @-moz-document url-prefix(about:) { 5 | :root { 6 | --in-content-page-color: light-dark(#252525, #fff) !important; 7 | --in-content-page-background: light-dark(#f7f7f7, #252525) !important; 8 | --in-content-deemphasized-text: light-dark(#666, #bbb) !important; 9 | --in-content-box-background: light-dark(#fff, #333) !important; 10 | --in-content-box-background-odd: light-dark(rgb(0 0 0 / .05), rgb(255 255 255 / .05)) !important; 11 | --in-content-box-info-background: light-dark(#f7f7f7, rgb(255 255 255 / 0.15)) !important; 12 | --in-content-icon-color: light-dark(#666, #fff) !important; 13 | --in-content-accent-color: light-dark(#006CBE, #75B6E8) !important; 14 | --in-content-accent-color-active: light-dark(#1683D8, #4C98D1) !important; 15 | --in-content-border-hover: light-dark(rgb(0 0 0 / .5), rgb(255 255 255 / .3)) !important; 16 | --in-content-border-invalid: var(--red-50) !important; 17 | --in-content-border-color: light-dark(#bebebe, rgb(255 255 255 / .2)) !important; 18 | --in-content-error-text-color: light-dark(#FF848A, #FF9AA2) !important; 19 | --in-content-link-color: light-dark(#0078D4, #75B6E8) !important; 20 | --in-content-link-color-hover: light-dark(#006CBE, #63ADE5) !important; 21 | --in-content-link-color-active: light-dark(#0749AC, #4C98D1) !important; 22 | --in-content-link-color-visited: light-dark(#0078D4, #75B6E8) !important; 23 | --link-color: var(--in-content-link-color) !important; 24 | --link-color-hover: var(--in-content-link-color-hover) !important; 25 | --link-color-active: var(--in-content-link-color-active) !important; 26 | --link-color-visited: var(--in-content-link-color-visited) !important; 27 | --in-content-button-text-color: var(--in-content-text-color) !important; 28 | --in-content-button-text-color-hover: var(--in-content-text-color) !important; 29 | --in-content-button-text-color-active: var(--in-content-button-text-color-hover) !important; 30 | --in-content-button-background: light-dark(#EDEDED, #3B3B3B) !important; 31 | --in-content-button-background-hover: light-dark(#e5e5e5, #545454) !important; 32 | --in-content-button-background-active: light-dark(#d5d5d5, #606060) !important; 33 | --in-content-primary-button-text-color: light-dark(#fff, #fff) !important; 34 | --in-content-primary-button-background: light-dark(#0061e0, #006CBE) !important; 35 | --in-content-primary-button-background-hover: light-dark(#0250bb, #0078D4) !important; 36 | --in-content-primary-button-background-active: light-dark(#053e94, #005CA3) !important; 37 | --color-accent-primary: light-dark(#0078D4, #006CBE) !important; 38 | --color-accent-primary-hover: light-dark(#006CBE, #0078D4) !important; 39 | --color-accent-primary-active: light-dark(#0749AC, #005CA3) !important; 40 | --in-content-danger-button-background: light-dark(#DF4951, #E12424) !important; 41 | --in-content-danger-button-background-hover: light-dark(#EA656C, #F94343) !important; 42 | --in-content-danger-button-background-active: light-dark(#BB353C, #AA1E1E) !important; 43 | --in-content-focus-outline-color: light-dark(rgb(0 85 215 / .5), #63ADE5) !important; 44 | --focus-outline-color: var(--in-content-focus-outline-color) !important; 45 | --in-content-table-background: light-dark(#f7f7f7, #252525) !important; 46 | --in-content-text-color: var(--in-content-page-color) !important; 47 | --border-interactive-color: light-dark(#929292, #858585) !important; 48 | scrollbar-color: 49 | light-dark(rgb(37 37 37 / .4), rgb(255 255 255 / .4)) 50 | light-dark(#f7f7f7, #252525) !important; 51 | } 52 | 53 | ::selection { 54 | background-color: light-dark(#0078D4, #93B8E7); 55 | color: light-dark(#fff, #000); 56 | } 57 | } 58 | 59 | /* preferences */ 60 | @-moz-document url-prefix(about:preferences), 61 | url-prefix(about:addons) { 62 | .category[selected] { 63 | position: relative !important; 64 | border-radius: 4px !important; 65 | } 66 | 67 | .category[selected]:not(:hover, :active) { 68 | background-color: var(--in-content-button-background) !important; 69 | } 70 | 71 | .category[selected]::before { 72 | content: ""; 73 | position: absolute; 74 | inset-block: 0; 75 | margin-block: auto; 76 | height: 24px; 77 | width: 3px; 78 | left: 2px; 79 | background-color: var(--in-content-accent-color); 80 | border-radius: 3px; 81 | } 82 | 83 | button.tab-button:hover { 84 | border-block-color: transparent var(--in-content-box-border-color) !important; 85 | } 86 | 87 | button.tab-button[selected], 88 | button.tab-button[selected]:hover { 89 | border-block-color: transparent currentColor !important; 90 | } 91 | 92 | .toggle-button { 93 | --toggle-dot-margin: 4px !important; 94 | --toggle-width: 40px !important; 95 | --toggle-height: 20px !important; 96 | --toggle-background-color: transparent !important; 97 | --toggle-dot-background-color: var(--in-content-page-color) !important; 98 | --toggle-dot-background-color-on-pressed: #fff !important; 99 | --toggle-dot-transform-x: calc(var(--toggle-width) - 2 * var(--toggle-dot-margin) - 2 * var(--toggle-border-width) - var(--toggle-dot-width)) !important; 100 | } 101 | } 102 | 103 | /* fix page flashes when loading some websites */ 104 | @-moz-document url(about:blank) { 105 | body { 106 | background: var(--in-content-page-background); 107 | color: var(--in-content-page-color); 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /chrome/content/newtab.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox - content/newtab.css */ 2 | 3 | /* colours */ 4 | @-moz-document url-prefix("about:newtab"), 5 | url-prefix("about:home"), 6 | url-prefix("about:firefoxview") { 7 | :root:not([lwt-newtab], [lwt-newtab-brighttext]) { 8 | --newtab-background-color: #F7F7F7 !important; 9 | --newtab-background-color-secondary: #fff !important; 10 | --newtab-text-primary-color: #252525 !important; 11 | --newtab-primary-action-background: #0078D4 !important; 12 | --newtab-text-secondary-color: color-mix(in srgb, var(--newtab-text-primary-color) 80%, transparent) !important; 13 | --newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 95%, #000) !important; 14 | --newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 90%, #000) !important; 15 | --newtab-element-secondary-color: color-mix(in srgb, currentColor 5%, transparent) !important; 16 | --newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 12%, transparent) !important; 17 | --newtab-element-secondary-active-color: color-mix(in srgb, currentColor 25%, transparent) !important; 18 | --newtab-primary-element-hover-color: color-mix(in srgb, var(--newtab-primary-action-background) 90%, #000) !important; 19 | --newtab-primary-element-active-color: color-mix(in srgb, var(--newtab-primary-action-background) 80%, #000) !important; 20 | --newtab-primary-element-text-color: #fff !important; 21 | --newtab-primary-action-background-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent) !important; 22 | --newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #000) !important; 23 | --newtab-wordmark-color: #737373 !important; 24 | --newtab-status-success: #50B080 !important; 25 | --newtab-status-error: #FF848A !important; 26 | --newtab-inner-box-shadow-color: rgb(0 0 0 / .1) !important; 27 | --newtab-overlay-color: color-mix(in srgb, var(--newtab-background-color) 85%, transparent) !important; 28 | --newtab-text-emphasis-background: #FFED32 !important; 29 | --newtab-text-emphasis-text-color: #000 !important; 30 | --newtab-textbox-focus-color: var(--newtab-primary-action-background) !important; 31 | --newtab-textbox-focus-boxshadow: 0 0 0 1px var(--newtab-primary-action-background), 0 0 0 4px rgba(var(--newtab-primary-action-background), 0.3) !important; 32 | --newtab-button-secondary-color: inherit !important; 33 | } 34 | 35 | :root:not([style*="color"])[lwt-newtab-brighttext] { 36 | --newtab-background-color: #252525 !important; 37 | --newtab-background-color-secondary: #4A4A4A !important; 38 | --newtab-text-primary-color: #fff !important; 39 | --newtab-primary-action-background: #75B6E8 !important; 40 | --newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 95%, #FFF) !important; 41 | --newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 90%, #FFF) !important; 42 | --newtab-element-secondary-color: color-mix(in srgb, currentColor 10%, transparent) !important; 43 | --newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 17%, transparent) !important; 44 | --newtab-element-secondary-active-color: color-mix(in srgb, currentColor 30%, transparent) !important; 45 | --newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #FFF) !important; 46 | --newtab-primary-element-text-color: #252525 !important; 47 | --newtab-wordmark-color: #fff !important; 48 | --newtab-status-success: #50B080 !important; 49 | } 50 | 51 | /* Custom GTK colours. */ 52 | @media (-moz-gtk-csd-available) { 53 | :root:not([lwt-newtab]):not([style*="color"]) { 54 | /* Colour adjusted for readability. */ 55 | --uc-accent-adjusted: light-dark( 56 | color-mix(in oklch, AccentColor 92%, black), 57 | color-mix(in oklch, AccentColor 60%, white) 58 | ); 59 | --newtab-background-color: light-dark(-moz-dialog, color-mix(in srgb, -moz-dialog 82%, black)) !important; 60 | --newtab-background-color-secondary: light-dark(Field, color-mix(in srgb, -moz-dialog 86%, white)) !important; 61 | --newtab-text-primary-color: -moz-dialogtext !important; 62 | --newtab-wordmark-color: light-dark(color-mix(in srgb, -moz-dialogtext 65%, transparent), -moz-dialogtext) !important; 63 | --newtab-primary-action-background: var(--uc-accent-adjusted) !important; 64 | } 65 | } 66 | 67 | /* Adjustments for themes. */ 68 | :root[style*="--newtab-background-color"] { 69 | /* Make the Firefox logo workmark follow text colour. */ 70 | --newtab-wordmark-color: color-mix(in srgb, var(--newtab-text-primary-color) 60%, var(--newtab-background-color)) !important; 71 | 72 | /* If there is no secondary background, create one from other colours. */ 73 | &:not([style*="--newtab-background-color-secondary"]) { 74 | --newtab-background-color-secondary: color-mix(in srgb, var(--newtab-background-color) 15%, white) !important; 75 | } 76 | 77 | /* Dark adjustments for themes. */ 78 | &[lwt-newtab-brighttext] { 79 | /* Make the Firefox logo workmark follow text colour. */ 80 | --newtab-wordmark-color: var(--newtab-text-primary-color) !important; 81 | 82 | /* If there is no secondary background, create one from other colours. */ 83 | &:not([style*="--newtab-background-color-secondary"]) { 84 | --newtab-background-color-secondary: color-mix(in srgb, var(--newtab-text-primary-color) 15%, var(--newtab-background-color)) !important; 85 | } 86 | } 87 | } 88 | } 89 | 90 | @-moz-document url-prefix("about:newtab"), 91 | url-prefix("about:home") { 92 | /* Enforce system font selection. */ 93 | :where(body) { 94 | font-family: system-ui !important; 95 | } 96 | 97 | /* hide pin */ 98 | .icon.icon-pin-small { 99 | display: none !important; 100 | } 101 | 102 | /* unpinned sites have lower opacity title */ 103 | .top-site-button .title:not(.pinned) { 104 | opacity: 0.7 !important; 105 | } 106 | 107 | /* search bar */ 108 | .search-wrapper .search-inner-wrapper { 109 | min-height: 44px !important; 110 | } 111 | 112 | .search-handoff-button { 113 | border-radius: 99px !important; 114 | background-position: 12px !important; 115 | padding-inline-start: 48px !important; 116 | white-space: nowrap !important; 117 | text-overflow: ellipsis !important; 118 | --elevation: 4; 119 | box-shadow: 0 0 calc((var(--elevation) * 0.225px) + 2px) rgb(0 0 0 / .11), 0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgb(0 0 0 / .13) !important; 120 | } 121 | 122 | .search-handoff-button:hover { 123 | --elevation: 6; 124 | } 125 | 126 | .search-wrapper.fake-focus:not(.search.disabled) .search-handoff-button { 127 | border-color: transparent !important; 128 | outline: 2px solid var(--newtab-primary-action-background) !important; 129 | outline-offset: -1px !important; 130 | } 131 | 132 | .search-handoff-button .fake-caret { 133 | inset-inline-start: 48px !important; 134 | top: 13px !important; 135 | } 136 | 137 | .search-disabled .search-handoff-button { 138 | opacity: 0 !important; 139 | } 140 | 141 | .icon-settings { 142 | background-image: url("../icons/settings.svg") !important; 143 | } 144 | 145 | /* top sites */ 146 | .top-site-outer .tile { 147 | border-radius: 12px !important; 148 | height: 44px !important; 149 | width: 44px !important; 150 | box-shadow: none !important; 151 | } 152 | 153 | .top-site-outer .tile .icon-wrapper { 154 | border-radius: 4px !important; 155 | width: 24px !important; 156 | height: 24px !important; 157 | } 158 | 159 | .top-site-outer .default-icon, 160 | .top-site-outer .search-topsite { 161 | background-size: 16px !important; 162 | height: 24px !important; 163 | width: 24px !important; 164 | } 165 | 166 | .top-site-outer .tile .icon-wrapper.letter-fallback::before { 167 | font-size: 32px !important; 168 | } 169 | 170 | /* card */ 171 | .card-outer, 172 | .card-outer .card, 173 | .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) { 174 | border-radius: 6px !important; 175 | } 176 | 177 | .card-outer .card, 178 | .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) { 179 | box-shadow: 0 1px 4px rgb(0 0 0 / .3) !important; 180 | } 181 | 182 | .card-outer .card-preview-image-outer, 183 | .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) .img-wrapper .img img { 184 | border-radius: 6px 6px 0 0 !important 185 | } 186 | 187 | .fake-textbox { 188 | overflow: hidden !important; 189 | text-overflow: ellipsis !important; 190 | } 191 | 192 | .outer-wrapper.only-search { 193 | display: flex !important; 194 | padding: 30px !important; 195 | } 196 | 197 | @media (-moz-bool-pref: "uc.tweak.hide-newtab-logo") { 198 | .logo-and-wordmark { 199 | display: none !important; 200 | } 201 | 202 | .outer-wrapper:not(.fixed-search) .search-wrapper { 203 | padding-top: 0 !important; 204 | } 205 | } 206 | } 207 | 208 | /* private browsing newtab */ 209 | @-moz-document url-prefix(about:privatebrowsing) { 210 | :root { 211 | --uc-wordmark-color: light-dark(#737373, #fff); 212 | --uc-background-color-secondary: light-dark(#fff, #4a4a4a); 213 | 214 | @media (-moz-bool-pref: "browser.theme.dark-private-windows") { 215 | color-scheme: dark !important; 216 | } 217 | } 218 | 219 | /* Custom GTK colours. */ 220 | @media (-moz-gtk-csd-available) { 221 | :root:not([lwt-newtab]):not([style*="color"]) { 222 | /* Colour adjusted for readability. */ 223 | --uc-accent-adjusted: light-dark( 224 | color-mix(in oklch, AccentColor 92%, black), 225 | color-mix(in oklch, AccentColor 60%, white) 226 | ); 227 | 228 | --in-content-page-background: light-dark(-moz-dialog, color-mix(in srgb, -moz-dialog 82%, black)) !important; 229 | --uc-background-color-secondary: light-dark(Field, color-mix(in srgb, -moz-dialog 86%, white)) !important; 230 | --in-content-page-color: -moz-dialogtext !important; 231 | --in-content-focus-outline-color: var(--uc-accent-adjusted) !important; 232 | } 233 | } 234 | 235 | .search-inner-wrapper { 236 | height: 44px !important; 237 | } 238 | 239 | .search-handoff-button, 240 | .search-handoff-button:active, 241 | .search-handoff-button:enabled:hover:active { 242 | background-color: var(--uc-background-color-secondary) !important; 243 | background-size: 24px; 244 | border: 0 !important; 245 | border-radius: 99px !important; 246 | padding-inline-start: 48px !important; 247 | --elevation: 4; 248 | box-shadow: 0 0 calc((var(--elevation) * 0.225px) + 2px) rgb(0 0 0 / .11), 0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgb(0 0 0 / .13) !important; 249 | } 250 | 251 | .search-handoff-button:hover { 252 | --elevation: 6; 253 | } 254 | 255 | .search-handoff-button.focused:not(.disabled) { 256 | box-shadow: none !important; 257 | outline: 2px solid var(--in-content-focus-outline-color) !important; 258 | outline-offset: -1px !important; 259 | } 260 | 261 | .search-handoff-button.disabled { 262 | opacity: 0 !important; 263 | } 264 | 265 | .fake-textbox { 266 | color: var(--in-content-page-color) !important; 267 | } 268 | 269 | .wordmark { 270 | fill: var(--uc-wordmark-color) !important; 271 | } 272 | 273 | .info { 274 | background-color: var(--uc-background-color-secondary) !important; 275 | background-image: none !important; 276 | position: relative !important; 277 | } 278 | 279 | .info::before { 280 | content: ""; 281 | position: absolute; 282 | left: 32px; 283 | top: 20px; 284 | height: 32px; 285 | aspect-ratio: 1 / 1; 286 | background: center / contain url("../icons/account-private.svg"); 287 | border-radius: 99px; 288 | } 289 | } 290 | 291 | @media (-moz-bool-pref: "uc.tweak.newtab-background") { 292 | @-moz-document url(about:newtab), 293 | url(about:home), 294 | url(about:privatebrowsing), 295 | url-prefix("about:firefoxview") { 296 | :root body { 297 | /* Specify both jpg and png file extensions, but jpg images will always 298 | * have a higher priority. 299 | */ 300 | --bg-0: url(../background-0.jpg), url(../background-0.png); 301 | --bg-1: url(../background-1.jpg), url(../background-1.png); 302 | --newtab-element-hover-color: rgb(239 239 239 / .3) !important; 303 | --newtab-element-active-color: rgb(239 239 239 / .45) !important; 304 | --text-shadow: 0 1px 2px #000; 305 | --icon-shadow: drop-shadow(0 0.3px 0.6px #000); 306 | background-color: #252525 !important; 307 | background-image: var(--bg-0) !important; 308 | background-position: center !important; 309 | background-size: cover !important; 310 | background-attachment: fixed !important; 311 | } 312 | 313 | :root[lwt-newtab-brighttext] body, 314 | :root.private body { 315 | background-image: var(--bg-1), var(--bg-0) !important; 316 | --newtab-element-hover-color: rgb(66 66 66 / .4) !important; 317 | --newtab-element-active-color: rgb(66 66 66 / .55) !important; 318 | } 319 | 320 | @media not (-moz-bool-pref: "browser.theme.dark-private-windows") { 321 | :root.private body { 322 | background-image: var(--bg-0) !important; 323 | } 324 | 325 | @media (prefers-color-scheme: dark) { 326 | :root.private body { 327 | background-image: var(--bg-1), var(--bg-0) !important; 328 | } 329 | } 330 | } 331 | 332 | .top-site-outer .title, 333 | .ds-header, 334 | .ds-layout .section-title span, 335 | .ds-navigation, 336 | .page-section-header > h1, 337 | .page-section-header > .section-description, 338 | .closed-tab-li-main:not(:hover, :active), 339 | .closed-tab-li-dismiss, 340 | .brand-logo > .brand-feature-name, 341 | #colorways-collection-title, 342 | #colorways-collection-description, 343 | .synced-tabs-container > .loading-content { 344 | text-shadow: var(--text-shadow) !important; 345 | color: #fff !important; 346 | -moz-osx-font-smoothing: auto !important; 347 | } 348 | 349 | .wordmark, 350 | .icon-settings, 351 | .top-site-outer .context-menu-button, 352 | .closed-tab-li-main:not(:hover, :active) .favicon, 353 | .page-section-header:not(:hover) > .twisty, 354 | .synced-tab-li-favicon, 355 | .page-section-header:not(:hover) > .twisty, 356 | .closed-tab-li-dismiss:not(:hover), 357 | .synced-tabs-container > .loading-content .sync { 358 | filter: var(--icon-shadow) !important; 359 | color: #fff !important; 360 | fill: currentColor !important 361 | } 362 | 363 | .section-top-bar .learn-more-link a, 364 | .ds-navigation a { 365 | color: #b3d4ff !important; 366 | text-shadow: var(--text-shadow) !important; 367 | -moz-osx-font-smoothing: auto !important; 368 | } 369 | 370 | .top-site-outer .title .sponsored-label, 371 | .closed-tab-li-main:not(:hover, :active) :is(.closed-tab-li-url, .closed-tab-li-time) { 372 | color: #eee !important; 373 | } 374 | 375 | .fixed-search .search-wrapper { 376 | border-bottom: 0 !important; 377 | background: transparent linear-gradient(#0004, transparent) !important; 378 | } 379 | } 380 | } 381 | -------------------------------------------------------------------------------- /chrome/global/browser.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox - browser.css 2 | * https://github.com/bmFtZQ/edge-frfox */ 3 | 4 | /* Windows has 1px missing space on top of window, but not when accent colour is 5 | * applied to the title bar. */ 6 | @media (-moz-platform: windows) and (not (-moz-windows-accent-color-in-titlebar)) { 7 | :root[sizemode="normal"][tabsintitlebar]:not([inFullscreen]) #navigator-toolbox { 8 | padding-top: 1px !important; 9 | } 10 | } 11 | 12 | /* Add a shadow when the toolbars move over content, eg. in macOS hovering over 13 | * the menu bar in fullscreen mode. */ 14 | #navigator-toolbox[style*="transform"] { 15 | box-shadow: 0 -3px 5px 3px light-dark(rgb(0 0 0 / .3), rgb(0 0 0 / .6)) !important; 16 | } 17 | 18 | /* Rounded Corners Tweak */ 19 | @media (-moz-bool-pref: "uc.tweak.rounded-corners") { 20 | /* Since Firefox 120, when the bookmarks bar is set to only open on new tabs, 21 | * the bookmarks bar overlaps the #browser element. */ 22 | 23 | /* Change the element that shifts the browser content to the correct position. */ 24 | #main-window[BookmarksToolbarOverlapsBrowser] .newTabBrowserPanel, 25 | #main-window[BookmarksToolbarOverlapsBrowser] #sidebar-box { 26 | padding-top: 0 !important; 27 | } 28 | 29 | #main-window[BookmarksToolbarOverlapsBrowser] #browser { 30 | margin-top: var(--bookmarks-toolbar-overlapping-browser-height); 31 | } 32 | 33 | /* Make sure that the toolbars are not positioned in-front of the browser 34 | * element. */ 35 | #main-window[BookmarksToolbarOverlapsBrowser] #navigator-toolbox:not([style*="z-index"]) { 36 | z-index: auto !important; 37 | } 38 | 39 | /* Move the browser element in-front of the toolbars when on the new tab page. */ 40 | #main-window:not([BookmarksToolbarOverlapsBrowser]) #browser { 41 | z-index: 1 !important; 42 | } 43 | 44 | /* Variables used for the rounded corners. */ 45 | #main-window:not([chromehidden~="toolbar"]) { 46 | --uc-tweak-rounded-corners-padding: 8px; 47 | --uc-tweak-rounded-corners-radius: 10px; 48 | --uc-tweak-rounded-corners-shadow: 49 | 0 -.8px 0 0 rgb(0 0 0 / 0.02), 50 | 0 0.5px 1px 1px rgb(0 0 0 / 0.06), 51 | 0 1px 1px rgb(0 0 0 / 0.1); 52 | --browser-frame-bgcolor: var(--toolbar-bgcolor, var(--lwt-accent-color)); 53 | 54 | /* Different shadow for higher resolution displays. */ 55 | @media (resolution > 1.8dppx) { 56 | --uc-tweak-rounded-corners-shadow: 57 | 0 0 0.5px 0.5px rgb(0 0 0 / 0.06), 58 | 0 0.5px 1.5px rgb(0 0 0 / 0.1); 59 | } 60 | 61 | @media (-moz-bool-pref: "uc.tweak.floating-tabs") { 62 | --browser-frame-bgcolor: var(--lwt-accent-color); 63 | 64 | &:-moz-window-inactive { 65 | --browser-frame-bgcolor: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); 66 | } 67 | } 68 | } 69 | 70 | /* Hide border below titlebar on macOS, as its titlebar already has a border. */ 71 | @media (-moz-platform: macos) { 72 | :root[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] { 73 | border-top: none !important; 74 | } 75 | } 76 | 77 | /* Remove separator between toolbars and the browser window. */ 78 | #navigator-toolbox { 79 | border-bottom: none !important; 80 | } 81 | 82 | /* Disable rounded corners in fullscreen, only if the toolbar is hidden. */ 83 | :root[inFullscreen] #navigator-toolbox[style*="margin-top"] + #browser, 84 | :root[inDOMFullscreen] #browser { 85 | --uc-tweak-rounded-corners-padding: 0; 86 | --uc-tweak-rounded-corners-radius: 0; 87 | --uc-tweak-rounded-corners-shadow: unset; 88 | } 89 | 90 | /* Apply rounded corners to the browser container. */ 91 | #appcontent .browserStack { 92 | margin-inline: var(--uc-tweak-rounded-corners-padding) !important; 93 | margin-block-end: var(--uc-tweak-rounded-corners-padding) !important; 94 | border-radius: var(--uc-tweak-rounded-corners-radius) !important; 95 | box-shadow: var(--uc-tweak-rounded-corners-shadow) !important; 96 | background-color: var(--tabpanel-background-color) !important; 97 | position: relative !important; 98 | 99 | /* Use pseudo element overlay to simulate rounded corners, similar to the 100 | * tab corners, fixes bug with backdrop-filter. */ 101 | &::after { 102 | content: ""; 103 | position: absolute; 104 | inset: 0; 105 | border-radius: inherit; 106 | /* Draw toolbar background on the negative corner space, then draw the 107 | * same shadow from the browser window on top. */ 108 | box-shadow: 109 | var(--uc-tweak-rounded-corners-shadow, 0 0 transparent), 110 | 0 0 0 16px var(--browser-frame-bgcolor) !important; 111 | clip-path: inset(0); 112 | pointer-events: none; 113 | } 114 | } 115 | 116 | /* Prevent status panel corners and shadow from appearing outside the browser. */ 117 | #statuspanel { 118 | overflow: hidden; 119 | } 120 | 121 | /* Apply rounded corners to sidebar. */ 122 | #sidebar-box { 123 | margin-inline-start: var(--uc-tweak-rounded-corners-padding) !important; 124 | margin-block-end: var(--uc-tweak-rounded-corners-padding) !important; 125 | border-radius: var(--uc-tweak-rounded-corners-radius) !important; 126 | overflow: hidden !important; 127 | box-shadow: var(--uc-tweak-rounded-corners-shadow) !important; 128 | 129 | &[positionend] { 130 | margin-inline-start: 0 !important; 131 | margin-inline-end: var(--uc-tweak-rounded-corners-padding) !important; 132 | } 133 | } 134 | 135 | /* Devtools window when docked to the left or right. */ 136 | .devtools-toolbox-side-iframe { 137 | margin-block-end: var(--uc-tweak-rounded-corners-padding) !important; 138 | border-radius: var(--uc-tweak-rounded-corners-radius) !important; 139 | overflow: hidden !important; 140 | box-shadow: var(--uc-tweak-rounded-corners-shadow) !important; 141 | 142 | /* Devtools window when docked to the left. */ 143 | &:first-child { 144 | margin-inline-start: var(--uc-tweak-rounded-corners-padding) !important; 145 | } 146 | 147 | /* Devtools window when docked to the right. */ 148 | &:last-child { 149 | margin-inline-end: var(--uc-tweak-rounded-corners-padding) !important; 150 | } 151 | } 152 | 153 | /* Devtools window when docked to the bottom. */ 154 | .devtools-toolbox-bottom-iframe { 155 | margin: var(--uc-tweak-rounded-corners-padding) !important; 156 | margin-block-start: 0 !important; 157 | border-radius: var(--uc-tweak-rounded-corners-radius) !important; 158 | overflow: hidden !important; 159 | box-shadow: var(--uc-tweak-rounded-corners-shadow) !important; 160 | } 161 | 162 | /* Hide devtools splitter. */ 163 | .devtools-side-splitter, 164 | .devtools-horizontal-splitter { 165 | background-color: transparent !important; 166 | } 167 | 168 | /* Remove sidebar border when not in full screen. */ 169 | :not(:root[inFullscreen] #navigator-toolbox[style*="margin-top"]) + #browser #sidebar-splitter { 170 | border-inline-width: 0 !important; 171 | } 172 | 173 | /* Apply colour to the frame around the browser window. */ 174 | #browser { 175 | background-color: var(--browser-frame-bgcolor); 176 | } 177 | 178 | /* Change colour of page when loading */ 179 | #tabbrowser-tabpanels { 180 | background-color: transparent !important; 181 | } 182 | } 183 | -------------------------------------------------------------------------------- /chrome/global/colors.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox - colors.css 2 | * https://github.com/bmFtZQ/edge-frfox */ 3 | 4 | /* default colours (light & dark) */ 5 | :root:not(:-moz-lwtheme), 6 | /* `--newtab-background-color-secondary used` to differentiate between a dark 7 | * private window and private window with the 'Dark' theme enabled. 8 | * May not be the most reliable method, but works for now up to FF 123. */ 9 | :root[privatebrowsingmode="temporary"]:where([style*="--lwt-accent-color: rgb(28, 27, 34)"]:not([style*="--newtab-background-color-secondary: rgb(66, 65, 77)"])) { 10 | /* Toolbars */ 11 | --lwt-accent-color: light-dark(#cecece, #1C1C1C) !important; 12 | --lwt-accent-color-inactive: light-dark(#e8e8e8, #2e2e2e) !important; 13 | --lwt-text-color: light-dark(#000, #FFF) !important; 14 | --lwt-text-color-inactive: light-dark(#3A3A3A, #CBCBCB) !important; 15 | --tab-selected-textcolor: light-dark(#000, #fff) !important; 16 | --tab-selected-textcolor-inactive: light-dark(#3E3E3E, #CBCBCB) !important; 17 | --tab-selected-bgcolor: var(--toolbar-bgcolor) !important; 18 | --tab-attention-icon-color: light-dark(#0078D4, #93d0ff) !important; 19 | --toolbar-bgcolor: light-dark(#f7f7f7, #3B3B3B) !important; 20 | --toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor) !important; 21 | --toolbar-color: light-dark(#000, #fff) !important; 22 | --toolbarbutton-icon-fill: var(--toolbar-color) !important; 23 | --toolbarbutton-icon-fill-attention: light-dark(#0078D4, #4C98D1) !important; 24 | --toolbarseparator-color: color-mix(in srgb, currentColor 25%, transparent) !important; 25 | --chrome-content-separator-color: light-dark(#bfbfbf, #686868) !important; 26 | --newtab-background-color: light-dark(#f7f7f7, #252525) !important; 27 | --tabpanel-background-color: var(--newtab-background-color, var(--toolbar-bgcolor, transparent)) !important; 28 | /* Toolbar button overlays */ 29 | --toolbarbutton-hover-background: color-mix(in srgb, currentColor 8%, transparent) !important; 30 | --toolbarbutton-active-background: color-mix(in srgb, currentColor 13.5%, transparent) !important; 31 | /* Tab audio indicator overlay icon */ 32 | --tab-icon-overlay-fill: var(--toolbar-color) !important; 33 | --tab-icon-overlay-stroke: var(--toolbar-bgcolor) !important; 34 | /* URL bar */ 35 | --toolbar-field-background-color: light-dark(#fff, #2B2B2B) !important; 36 | --toolbar-field-color: light-dark(#000, #fff) !important; 37 | --toolbar-field-border-color: transparent !important; 38 | --toolbar-field-focus-background-color: var(--toolbar-field-background-color) !important; 39 | --toolbar-field-focus-color: var(--toolbar-field-color) !important; 40 | --toolbar-field-focus-border-color: light-dark(#0055D780, #63ADE5) !important; 41 | --urlbar-icon-fill-opacity: 0.58 !important; 42 | --urlbar-box-bgcolor: light-dark(rgb(0 0 0 / .09), rgb(255 255 255 / .11)) !important; 43 | --urlbar-box-hover-bgcolor: light-dark(rgb(0 0 0 / .09), rgb(255 255 255 / .11)) !important; 44 | --urlbar-box-active-bgcolor: light-dark(rgb(0 0 0 / .22), rgb(255 255 255 / .28)) !important; 45 | --urlbar-box-focus-bgcolor: var(--urlbar-box-hover-bgcolor) !important; 46 | /* URL bar suggestions */ 47 | --link-color: light-dark(#0078D4, #75B6E8) !important; 48 | --uc-urlbarView-accent-color: light-dark(#1A6397, #75B6E8) !important; 49 | --urlbarView-highlight-background: light-dark(#F2F2F2, #383838) !important; 50 | --urlbarView-highlight-color: light-dark(#000, #fff) !important; 51 | --urlbarView-hover-background: light-dark(#e5e5e5, #444444) !important; 52 | --urlbarView-separator-color: light-dark(#EFEFEF, #5F5F5F) !important; 53 | /* Menus/panels */ 54 | --arrowpanel-background: light-dark(#fff, #4A4A4A) !important; 55 | --arrowpanel-color: light-dark(#1c1c1c, #fff) !important; 56 | --arrowpanel-border-color: light-dark(#fff, #636363) !important; 57 | --arrowpanel-dimmed: light-dark(#565656, #565656) !important; 58 | --arrowpanel-dimmed-further: light-dark(#707070, #707070) !important; 59 | --panel-separator-color: light-dark(#dadada, #636363) !important; 60 | --panel-description-color: light-dark(#000a, #fffb) !important; 61 | --panel-disabled-color: light-dark(#9E9E9E, #B9B9B9) !important; 62 | --panel-item-hover-bgcolor: light-dark(#eee, #646464) !important; 63 | --panel-item-active-bgcolor: light-dark(#ddd, #747474) !important; 64 | --panel-banner-item-update-supported-bgcolor: light-dark(#188038, #81C995) !important; 65 | /* Primary button */ 66 | --button-primary-bgcolor: light-dark(#0078D4, #006CBE) !important; 67 | --button-primary-color: light-dark(#fff, #fff) !important; 68 | --button-primary-hover-bgcolor: light-dark(#006BBD, #1C7CC5) !important; 69 | --button-primary-active-bgcolor: light-dark(#0060AA, #3289CB) !important; 70 | /* Secondary button */ 71 | --button-bgcolor: light-dark(#EFEFEF, #5C5C5C) !important; 72 | --button-color: light-dark(#000, #fff) !important; 73 | --button-hover-bgcolor: light-dark(#D5D5D5, #6E6E6E) !important; 74 | --button-active-bgcolor: light-dark(#C0C0C0, #7C7C7C) !important; 75 | /* Text input field, e.g. bookmarks editor */ 76 | --focus-outline-color: light-dark(#0055D780, #63ADE5) !important; 77 | --input-bgcolor: light-dark(#fff, #4A4A4A) !important; 78 | --input-color: light-dark(#2b2b2b, #fff) !important; 79 | --input-border-color: light-dark(#bebebe, #808080) !important; 80 | --error-text-color: light-dark(#FF9AA2, #FF9AA2) !important; 81 | --input-error-border-color: light-dark(#FF848A, #FF848A) !important; 82 | /* Side bar colours. */ 83 | --sidebar-background-color: light-dark(#f7f7f7, #3b3b3b) !important; 84 | --sidebar-text-color: light-dark(#000, #fff) !important; 85 | --sidebar-border-color: light-dark(#bfbfbf, #686868) !important; 86 | 87 | /* ::::: Dialog theme ::::: */ 88 | & #window-modal-dialog::backdrop { 89 | /* Overlay when dialog is shown. */ 90 | background-color: rgb(20 20 20 / .2) !important; 91 | } 92 | 93 | &[dialogroot] { 94 | /* Dialog */ 95 | --in-content-page-background: var(--arrowpanel-background) !important; 96 | --in-content-page-color: var(--arrowpanel-color) !important; 97 | /* Primary button */ 98 | --in-content-primary-button-text-color: var(--button-primary-color) !important; 99 | --in-content-primary-button-background: var(--button-primary-bgcolor) !important; 100 | --in-content-primary-button-background-hover: var(--button-primary-hover-bgcolor) !important; 101 | --in-content-primary-button-background-active: var(--button-primary-active-bgcolor) !important; 102 | /* Secondary button */ 103 | --in-content-button-text-color: var(--button-color) !important; 104 | --in-content-button-background: var(--button-bgcolor) !important; 105 | --in-content-button-background-hover: var(--button-hover-bgcolor) !important; 106 | --in-content-button-background-active: var(--button-active-bgcolor) !important; 107 | /* Text input */ 108 | --in-content-box-background: var(--input-bgcolor) !important; 109 | --in-content-box-border-color: var(--input-border-color) !important; 110 | } 111 | } 112 | 113 | /* Ensure that dark mode is enabled completely in private browsing mode. */ 114 | @media (-moz-bool-pref: "browser.theme.dark-private-windows") { 115 | :root[privatebrowsingmode="temporary"], 116 | :root[privatebrowsingmode="temporary"] #nav-bar, 117 | :root[privatebrowsingmode="temporary"] #PersonalToolbar { 118 | --toolbar-color-scheme: dark !important; 119 | --tab-selected-color-scheme: dark !important; 120 | color-scheme: dark !important; 121 | } 122 | } 123 | 124 | /* Apply colours to the default 'Auto' theme. */ 125 | #navigator-toolbox:not(:-moz-lwtheme) { 126 | background-color: var(--lwt-accent-color) !important; 127 | color: var(--lwt-text-color) !important; 128 | 129 | /* Inactive window background colours. */ 130 | &:-moz-window-inactive { 131 | background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important; 132 | color: var(--lwt-text-color-inactive, var(--lwt-text-color)) !important; 133 | } 134 | } 135 | 136 | /* Make sure that the tab toolbar opacity is always 1, inactive window colours 137 | * are already supplied by this theme. */ 138 | :root[tabsintitlebar] #titlebar:-moz-window-inactive { 139 | opacity: 1 !important; 140 | } 141 | 142 | /* Make the titlebar buttons black/white on default themes */ 143 | :root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox { 144 | color: var(--lwt-text-color) !important; 145 | } 146 | 147 | /* Status/link preview panel */ 148 | #statuspanel-label { 149 | background-color: var(--toolbar-field-focus-background-color) !important; 150 | color: var(--toolbar-field-focus-color) !important; 151 | border-color: transparent !important; 152 | box-shadow: 0 2px 5px #0002, 0 0 0 1px light-dark(#0001, #0002) !important; 153 | border-radius: 0 4px 0 0 !important; 154 | 155 | #statuspanel[mirror] & { 156 | border-radius: 4px 0 0 0 !important; 157 | } 158 | } 159 | 160 | @media (-moz-platform: windows) { 161 | /* Colour the text selection background and foreground. */ 162 | ::selection { 163 | background-color: light-dark(#0078D4, #93B8E7) !important; 164 | color: light-dark(#fff, #000) !important; 165 | } 166 | 167 | tooltip { 168 | background-color: var(--arrowpanel-background) !important; 169 | color: var(--arrowpanel-color) !important; 170 | border-color: var(--arrowpanel-border-color) !important; 171 | } 172 | 173 | /* Use accent colour in titlebar when Windows option is enabled. */ 174 | @media (-moz-windows-accent-color-in-titlebar) and (-moz-bool-pref: "browser.theme.windows.accent-color-in-tabs.enabled") { 175 | /* Uses :root:root to beat specificity of floating tabs adjustments. */ 176 | :root:root:not(:-moz-lwtheme) { 177 | --lwt-accent-color: ActiveCaption !important; 178 | --lwt-text-color: CaptionText !important; 179 | --lwt-accent-color-inactive: InActiveCaption !important; 180 | --lwt-text-color-inactive: InActiveCaptionText !important; 181 | } 182 | } 183 | 184 | .titlebar-button:not(.titlebar-close):hover { 185 | background-color: color-mix(in srgb, currentColor 11%, transparent) !important; 186 | 187 | &:active { 188 | background-color: color-mix(in srgb, currentColor 20%, transparent) !important; 189 | } 190 | } 191 | 192 | .titlebar-close:hover { 193 | stroke: white !important; 194 | background-color: #e81123 !important; 195 | 196 | &:active { 197 | background-color: #DC5C66 !important; 198 | } 199 | 200 | toolbar[brighttext] &:active { 201 | background-color: #971821 !important; 202 | } 203 | } 204 | 205 | /* Library window colour theme. */ 206 | window#places { 207 | --organizer-color: light-dark(#000, #fff) !important; 208 | --organizer-deemphasized-color: light-dark(#666, #bbb) !important; 209 | --organizer-toolbar-background: light-dark(#f7f7f7, #3B3B3B) !important; 210 | --organizer-pane-background: light-dark(#f7f7f7, #2B2B2B) !important; 211 | --organizer-content-background: light-dark(#f7f7f7, #1C1C1C) !important; 212 | --organizer-hover-background: light-dark(#00000025, #ffffff25) !important; 213 | --organizer-selected-background: light-dark(#006CBE80, #006CBE80) !important; 214 | --organizer-outline-color: light-dark(#0055D7a0, #63ADE5) !important; 215 | --organizer-toolbar-field-background: light-dark(#fff, #2B2B2B) !important; 216 | --organizer-toolbar-field-background-focused: light-dark(#fff, #2B2B2B) !important; 217 | --organizer-border-color: light-dark(#bfbfbf, #686868) !important; 218 | scrollbar-color: 219 | light-dark(#0006, #fff6) 220 | light-dark(#f7f7f740, #2B2B2B40) !important; 221 | } 222 | 223 | #placesViewsBox #downloadsListBox richlistitem[selected="true"] { 224 | background-color: light-dark(#006CBE, #006CBE) !important; 225 | color: light-dark(#fff, #fff) !important; 226 | } 227 | 228 | #placeContentColumns :is(treecol, treecolpicker) { 229 | background-color: light-dark(#f7f7f7, #3B3B3B) !important; 230 | color: light-dark(#000, #fff) !important; 231 | border-inline-start: 1px solid light-dark(#bfbfbf, #686868) !important; 232 | box-shadow: inset 0 -1px light-dark(#bfbfbf, #686868) !important; 233 | appearance: none !important; 234 | } 235 | 236 | #placeContentColumns :is(treecol, treecolpicker):where(:hover) { 237 | background-color: light-dark(#cecece, #4A4A4A) !important; 238 | color: light-dark(#000, #fff) !important; 239 | } 240 | } 241 | 242 | /* Prevent macOS vibrancy appearance, instead using a solid background. */ 243 | #sidebar-box { 244 | appearance: none !important; 245 | } 246 | 247 | .sidebar-panel:not([lwt-sidebar]) { 248 | color: light-dark(#000, #fff) !important; 249 | scrollbar-color: light-dark(#0006, #fff6) light-dark(#f7f7f740, #3b3b3b40) !important; 250 | 251 | /* Sidebar search box (Windows) */ 252 | @media(-moz-platform: windows) { 253 | & #sidebar-search-container > #search-box, 254 | & #viewButton { 255 | appearance: none !important; 256 | background-color: var(--toolbar-field-background-color) !important; 257 | color: inherit !important; 258 | border: 1px solid var(--input-border-color) !important; 259 | border-radius: 4px !important; 260 | padding: 6px 8px !important; 261 | 262 | &:focus { 263 | outline: 2px solid var(--input-border-color) !important; 264 | outline-offset: -2px !important; 265 | border-color: transparent !important; 266 | } 267 | } 268 | } 269 | } 270 | 271 | @-moz-document url(chrome://browser/content/syncedtabs/sidebar.xhtml) { 272 | body { 273 | background: transparent !important; 274 | } 275 | } 276 | 277 | /* Linux / GTK csd support */ 278 | @media (-moz-gtk-csd-available) { 279 | :root:not(:-moz-lwtheme), 280 | /* `--newtab-background-color-secondary used` to differentiate between a dark 281 | * private window and private window with the 'Dark' theme enabled. 282 | * May not be the most reliable method, but works for now up to FF 123. */ 283 | :root[privatebrowsingmode="temporary"]:where([style*="--lwt-accent-color: rgb(28, 27, 34)"]:not([style*="--newtab-background-color-secondary: rgb(66, 65, 77)"])) { 284 | /* Used for mixing colours differently in light/dark themes. */ 285 | --uc-tint: light-dark(black, white); 286 | /* Colour adjusted for readability. */ 287 | --uc-accent-adjusted: light-dark( 288 | color-mix(in oklch, AccentColor 92%, black), 289 | color-mix(in oklch, AccentColor 60%, white) 290 | ); 291 | /* Toolbars */ 292 | --lwt-accent-color: light-dark(color-mix(in srgb, ActiveCaption 90%, black), ActiveCaption) !important; 293 | --lwt-accent-color-inactive: light-dark(color-mix(in srgb, InactiveCaption 94%, black), InactiveCaption) !important; 294 | --lwt-text-color: CaptionText !important; 295 | --lwt-text-color-inactive: color-mix(in srgb, CaptionText 65%, transparent) !important; 296 | --tab-selected-textcolor: var(--toolbar-color) !important; 297 | --tab-selected-textcolor-inactive: color-mix(in srgb, var(--toolbar-color) 65%, transparent) !important; 298 | --tab-selected-bgcolor: var(--toolbar-bgcolor) !important; 299 | --tab-attention-icon-color: var(--uc-accent-adjusted) !important; 300 | --toolbar-bgcolor: light-dark(-moz-dialog, color-mix(in srgb, -moz-dialog 92%, white)) !important; 301 | --toolbar-color: -moz-dialogtext !important; 302 | --toolbarbutton-icon-fill-attention: var(--uc-accent-adjusted) !important; 303 | --chrome-content-separator-color: color-mix(in srgb, currentColor 17%, var(--toolbar-bgcolor)) !important; 304 | --newtab-background-color: light-dark(-moz-dialog, color-mix(in srgb, -moz-dialog 82%, black)) !important; 305 | /* URL bar */ 306 | --toolbar-field-background-color: light-dark(Field, color-mix(in srgb, Field 96%, -moz-dialogtext)) !important; 307 | --toolbar-field-color: FieldText !important; 308 | --toolbar-field-focus-border-color: light-dark(color-mix(in srgb, var(--focus-outline-color) 50%, transparent), var(--focus-outline-color)) !important; 309 | --urlbar-box-bgcolor: var(--button-bgcolor) !important; 310 | --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor) !important; 311 | --urlbar-box-active-bgcolor: var(--button-active-bgcolor) !important; 312 | /* URL bar suggestions. */ 313 | --link-color: var(--uc-accent-adjusted) !important; 314 | --uc-urlbarView-accent-color: var(--uc-accent-adjusted) !important; 315 | --urlbarView-highlight-background: var(--panel-item-hover-bgcolor) !important; 316 | --urlbarView-highlight-color: var(--toolbar-field-color) !important; 317 | --urlbarView-hover-background: var(--panel-item-active-bgcolor) !important; 318 | --urlbarView-separator-color: var(--panel-separator-color) !important; 319 | /* Menus/panels */ 320 | --arrowpanel-background: Field !important; 321 | --arrowpanel-color: FieldText !important; 322 | --arrowpanel-border-color: light-dark(transparent, var(--panel-separator-color)) !important; 323 | --arrowpanel-dimmed: color-mix(in srgb, currentColor 17%, transparent) !important; 324 | --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 30%, transparent) !important; 325 | --panel-separator-color: color-mix(in srgb, currentColor 17%, var(--arrowpanel-background)) !important; 326 | --panel-description-color: GrayText !important; 327 | --panel-disabled-color: GrayText !important; 328 | --panel-item-hover-bgcolor: color-mix(in srgb, currentColor 8%, transparent) !important; 329 | --panel-item-active-bgcolor: color-mix(in srgb, currentColor 13%, transparent) !important; 330 | /* Primary button */ 331 | --button-primary-bgcolor: AccentColor !important; 332 | --button-primary-color: AccentColorText !important; 333 | --button-primary-hover-bgcolor: color-mix(in srgb, var(--uc-tint) 10%, var(--button-primary-bgcolor)) !important; 334 | --button-primary-active-bgcolor: color-mix(in srgb, var(--uc-tint) 20%, var(--button-primary-bgcolor)) !important; 335 | /* Secondary button */ 336 | --button-bgcolor: color-mix(in srgb, currentColor 10%, transparent) !important; 337 | --button-color: currentColor !important; 338 | --button-hover-bgcolor: color-mix(in srgb, currentColor 14%, transparent) !important; 339 | --button-active-bgcolor: color-mix(in srgb, currentColor 20%, transparent) !important; 340 | /* Text input field, e.g. bookmarks editor. */ 341 | --focus-outline-color: var(--uc-accent-adjusted) !important; 342 | --input-bgcolor: var(--arrowpanel-background) !important; 343 | --input-color: var(--arrowpanel-color) !important; 344 | --input-border-color: color-mix(in srgb, currentColor 35%, var(--arrowpanel-background)) !important; 345 | /* Sidebar */ 346 | --sidebar-background-color: var(--toolbar-bgcolor) !important; 347 | --sidebar-text-color: var(--toolbar-color) !important; 348 | --sidebar-border-color: var(--chrome-content-separator-color) !important; 349 | } 350 | 351 | /* Use the same sidebar splitter style as other platforms. */ 352 | .sidebar-splitter { 353 | border: 0 solid var(--sidebar-border-color) !important; 354 | border-inline-end-width: 1px !important; 355 | width: 4px !important; 356 | background-color: transparent !important; 357 | margin-inline-start: -4px !important; 358 | } 359 | } 360 | -------------------------------------------------------------------------------- /chrome/global/tree.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox - tree.css */ 2 | 3 | /* Change height of tree items and add rounded corners */ 4 | treechildren::-moz-tree-row, 5 | treecol:not([hideheader="true"]), 6 | .tree-columnpicker-button { 7 | min-height: max(28px, 1.3em) !important; 8 | border-radius: 2px !important; 9 | } 10 | 11 | /* Change the background colour on hover */ 12 | @media not (prefers-contrast) { 13 | treechildren::-moz-tree-row(hover) { 14 | background-color: var(--toolbarbutton-hover-background) !important; 15 | } 16 | } 17 | 18 | /* Change the background colour when pressed */ 19 | treechildren::-moz-tree-row(selected) { 20 | background-color: var(--toolbarbutton-active-background) !important; 21 | } 22 | 23 | /* Change the background colour when focused */ 24 | treechildren::-moz-tree-row(selected, focus) { 25 | background-color: var(--button-primary-bgcolor) !important; 26 | } 27 | 28 | treechildren::-moz-tree-row(current, focus) { 29 | outline: var(--default-focusring); 30 | outline-color: var(--button-primary-bgcolor) !important; 31 | outline-offset: calc(-1 * var(--default-focusring-width)); 32 | } 33 | 34 | treechildren::-moz-tree-image(selected), 35 | treechildren::-moz-tree-twisty(selected), 36 | treechildren::-moz-tree-cell-text(selected) { 37 | color: inherit !important; 38 | } 39 | 40 | treechildren::-moz-tree-image(selected, focus), 41 | treechildren::-moz-tree-twisty(selected, focus), 42 | treechildren::-moz-tree-cell-text(selected, focus) { 43 | color: var(--button-primary-color) !important; 44 | } 45 | 46 | /* Spacing between icon and label */ 47 | treechildren::-moz-tree-image { 48 | margin-inline-end: 8px !important; 49 | } 50 | 51 | /* Separator appearance */ 52 | treechildren::-moz-tree-separator { 53 | border-top: 1px solid var(--toolbarseparator-color) !important; 54 | border-bottom: none !important; 55 | } 56 | 57 | /* Change the colour of the drop feedback elements */ 58 | treechildren::-moz-tree-cell-text(primary, dropOn) { 59 | background-color: var(--button-primary-bgcolor) !important; 60 | color: var(--button-primary-color) !important; 61 | } 62 | 63 | treechildren::-moz-tree-drop-feedback { 64 | background-color: var(--toolbarbutton-icon-fill-attention) !important; 65 | border-radius: 2px !important; 66 | } 67 | 68 | /* Change the appearance for the expandable items */ 69 | treechildren::-moz-tree-twisty { 70 | padding-top: 0 !important; 71 | padding-inline: 4px !important; 72 | width: 16px !important; 73 | list-style-image: url("../icons/arrow-filled-right.svg") !important; 74 | } 75 | 76 | treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed) { 77 | list-style-image: url("../icons/arrow-filled-left.svg") !important; 78 | } 79 | 80 | treechildren::-moz-tree-twisty(open) { 81 | list-style-image: url("../icons/arrow-filled-down.svg") !important; 82 | } 83 | 84 | /* Change the identation of child items */ 85 | treechildren::-moz-tree-indentation { 86 | width: 16px !important; 87 | } 88 | -------------------------------------------------------------------------------- /chrome/global/tweaks.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox - tweaks.css */ 2 | 3 | /* disable drag space above tabs */ 4 | @media (-moz-bool-pref: "uc.tweak.disable-drag-space") { 5 | :root { 6 | --uc-tab-top-margin: 0px !important; 7 | } 8 | } 9 | 10 | /* force tabs to toolbar bg (useful for proton themes) (might experience some 11 | bugs with certain themes eg. dark text on dark background.) */ 12 | @media (-moz-bool-pref: "uc.tweak.force-tab-colour") { 13 | :root:-moz-lwtheme { 14 | --tab-selected-bgcolor: var(--toolbar-bgcolor) !important; 15 | --tab-selected-textcolor: var(--toolbar-color) !important; 16 | } 17 | } 18 | 19 | /* remove tab separators */ 20 | @media (-moz-bool-pref: "uc.tweak.remove-tab-separators") { 21 | .tabbrowser-tab .tab-stack { 22 | &::before, 23 | &::after { 24 | content: initial !important; 25 | } 26 | } 27 | } 28 | 29 | @media (-moz-bool-pref: "uc.tweak.floating-tabs") { 30 | :root:not(:-moz-lwtheme), 31 | /* `--newtab-background-color-secondary used` to differentiate between a dark 32 | * private window and private window with the 'Dark' theme enabled. 33 | * May not be the most reliable method, but works for now up to FF 123. */ 34 | :root[privatebrowsingmode="temporary"]:where([style*="--lwt-accent-color: rgb(28, 27, 34)"]:not([style*="--newtab-background-color-secondary: rgb(66, 65, 77)"])) { 35 | --lwt-accent-color: light-dark(#f3f3f3, #202020) !important; 36 | --lwt-accent-color-inactive: unset !important; 37 | --toolbar-bgcolor: light-dark(#fff, #3F3F3F) !important; 38 | --lwt-tab-text: light-dark(#262626, #fff) !important; 39 | --chrome-content-separator-color: light-dark(#bfbfbf, #535353) !important; 40 | --lwt-tab-line-color: light-dark(transparent, rgb(255 255 255 / 0.06)) !important; 41 | } 42 | 43 | /* Uses :root body to avoid affecting other variables by changing 44 | * --toolbar-color. */ 45 | :root body { 46 | /* Use tabbar colours for better readability when using custom themes. */ 47 | --toolbar-color: var(--lwt-text-color) !important; 48 | --toolbarbutton-icon-fill: var(--lwt-text-color) !important; 49 | 50 | &:-moz-window-inactive { 51 | --toolbar-color: var(--lwt-text-color-inactive, var(--lwt-text-color)) !important; 52 | --toolbarbutton-icon-fill: var(--lwt-text-color-inactive, var(--lwt-text-color)) !important; 53 | } 54 | } 55 | 56 | @media (-moz-gtk-csd-available) { 57 | :root:not(:-moz-lwtheme) { 58 | --toolbar-bgcolor: color-mix(in srgb, -moz-dialog 80%, #fff) !important; 59 | --toolbar-field-background-color: Field !important; 60 | --lwt-tab-text: -moz-dialogtext !important; 61 | --lwt-tab-line-color: rgb(255 255 255 / 0.06) !important; 62 | --lwt-accent-color: var(--toolbox-non-lwt-bgcolor) !important; 63 | 64 | &:-moz-window-inactive { 65 | --lwt-accent-color: var(--toolbox-non-lwt-bgcolor-inactive) !important; 66 | } 67 | } 68 | } 69 | 70 | /* Shadow for navbar and tabs */ 71 | :root, 72 | :root .tabbrowser-tab { 73 | --uc-titlebar-shadow: none; 74 | --uc-tab-shadow-outline: rgb(0 0 0 / .11); 75 | --uc-tab-shadow: 0 2.5px 3px 1px rgb(0 0 0 / .08); 76 | 77 | & [brighttext], 78 | & [brighttext] .tabbrowser-tab { 79 | --uc-titlebar-shadow: none; 80 | --uc-tab-shadow-outline: transparent; 81 | --uc-tab-shadow: 0 2px 3px rgb(0 0 0 / .12); 82 | } 83 | 84 | & #TabsToolbar { 85 | --tab-border-radius: 8px !important; 86 | } 87 | } 88 | 89 | /* remove toolbar bg */ 90 | #nav-bar, 91 | #PersonalToolbar { 92 | background-color: transparent !important; 93 | } 94 | 95 | /* invert bottom corner radius for tabs */ 96 | .tab-background { 97 | border-radius: var(--tab-border-radius) !important; 98 | 99 | &::before, 100 | &::after { 101 | display: none !important; 102 | } 103 | } 104 | 105 | .tab-background[selected] { 106 | border: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)) !important; 107 | outline: 1px solid var(--uc-tab-shadow-outline) !important; 108 | 109 | /* Fractional scaling adjustments (150%, 175%, etc.) */ 110 | @media (1dppx < resolution < 2dppx) { 111 | outline-width: 1.5px !important; 112 | } 113 | } 114 | 115 | /* adjust spacing of area above tabs */ 116 | @media not (-moz-platform: macos) { 117 | :root[sizemode="maximized"] { 118 | --uc-tab-top-margin: 4px !important; 119 | } 120 | } 121 | 122 | :root:is([inFullscreen], :not([tabsintitlebar])) { 123 | --uc-tab-top-margin: 4px !important; 124 | } 125 | 126 | @media (-moz-bool-pref: "uc.tweak.disable-drag-space") { 127 | :root { 128 | --uc-tab-top-margin: 4px !important; 129 | } 130 | } 131 | 132 | /* IMPORTANT: Adds padding and removes margin on top of tabs to allow user to 133 | * select it from the top edge of the window */ 134 | #tabbrowser-tabs { 135 | margin-top: calc(var(--uc-tab-top-margin) - 4px) !important; 136 | 137 | & .tabbrowser-tab, 138 | & #tabs-newtab-button { 139 | padding-top: 4px !important; 140 | } 141 | } 142 | 143 | #scrollbutton-up:not(.menupopup-scrollbutton), 144 | #scrollbutton-down:not(.menupopup-scrollbutton) { 145 | &, 146 | & ~ spacer { 147 | margin-top: 4px !important; 148 | } 149 | } 150 | 151 | /* move tab shadow behind urlbar */ 152 | .tabbrowser-tab[visuallyselected="true"], 153 | #nav-bar { 154 | z-index: 2 !important; 155 | } 156 | 157 | /* tab shadow adjustments */ 158 | .tabbrowser-tab { 159 | overflow-clip-margin: 8px !important; 160 | } 161 | 162 | #tabbrowser-arrowscrollbox > *, 163 | #scrollbutton-up:not(.menupopup-scrollbutton), 164 | #scrollbutton-up:not(.menupopup-scrollbutton) ~ spacer, 165 | #scrollbutton-down:not(.menupopup-scrollbutton) { 166 | margin-bottom: 8px !important; 167 | } 168 | 169 | #tabbrowser-arrowscrollbox { 170 | margin-bottom: -8px !important; 171 | } 172 | } 173 | 174 | @media (not (-moz-platform: macos)) and (not (-moz-bool-pref: "uc.tweak.revert-context-menu")) { 175 | @media (-moz-bool-pref: "uc.tweak.vertical-context-navigation") { 176 | #context-navigation { 177 | /* Stack menu items vertically. */ 178 | flex-direction: column !important; 179 | 180 | /* Align the image and label to the left edge. */ 181 | & > .menuitem-iconic { 182 | justify-content: start !important; 183 | 184 | &::after { 185 | /* Get the menuitem label from the aria-label attribute. */ 186 | content: attr(aria-label); 187 | } 188 | } 189 | } 190 | } 191 | } 192 | 193 | @media (-moz-bool-pref: "uc.tweak.context-menu.hide-access-key") { 194 | :where(menuitem, menu) > :is(.menu-text, .menu-iconic-text)[value]:not([value=""]) { 195 | &::before { 196 | /* The default value is -moz-label-content, which takes the data from the 197 | * value attribute and highlights the character found in the accesskey 198 | * attribute. This skips that and uses the value attribute directly. */ 199 | content: attr(value) !important; 200 | } 201 | } 202 | } 203 | 204 | @media (-moz-bool-pref: "uc.tweak.show-tab-close-button-on-hover") { 205 | #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([pinned], [selected]):hover .tab-close-button { 206 | display: flex !important; 207 | } 208 | } 209 | 210 | @media (-moz-bool-pref: "uc.tweak.hide-forward-button") { 211 | :root:not([customizing]) #forward-button[disabled] { 212 | display: none !important; 213 | } 214 | } 215 | 216 | @media (-moz-bool-pref: "uc.tweak.context-menu.hide-firefox-account") { 217 | #appMenu-fxa-status2, 218 | #appMenu-fxa-separator { 219 | display: none !important; 220 | } 221 | } 222 | -------------------------------------------------------------------------------- /chrome/icons/accessibility.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/account-private.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /chrome/icons/account.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /chrome/icons/add-to-dictionary.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/arrow-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/arrow-filled-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/arrow-filled-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/arrow-filled-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/arrow-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/audio-save.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/autoplay-media-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/autoplay-media.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/bookmark-hollow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/bookmark-star-on-tray.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/bookmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/camera-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/camera.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/canvas-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/canvas.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/checkmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/chevron.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/close-9px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/container-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/customize.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/desktop-notification-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/desktop-notification.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/developer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/downloads.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/duplicate-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/edit-copy-without-tracking.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/edit-copy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/edit-cut.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/edit-delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/edit-paste.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/edit-redo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/edit-select-all.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/edit-undo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/edit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/extension-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/extension.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/firefox-view.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/firefox.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/folder.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/folderDarkOutline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/folderFluentYellow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/forget.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/forward.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/fullscreen-exit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/fullscreen.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/geo-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/geo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/help.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/history.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/image-copy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/image-open.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chrome/icons/image-save.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/info.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/inspect.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/library.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/link.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/mail.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/manage.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/media-loop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/media-mute.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/media-pause.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/media-pip.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/media-play.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/media-speed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/media-unmute.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/microphone-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/microphone.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/midi.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/move-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/new-tab-image.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /chrome/icons/new-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/open.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/page-portrait.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/passwords.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/paste-and-go.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/permissions.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/persistent-storage-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/persistent-storage.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/pin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/pocket-outline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/popup.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/print.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/private-window.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/privateBrowsing.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/reader-mode.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/reload-to-stop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /chrome/icons/reload.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/report.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/save.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/screen-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/screen.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/screenshot.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/search-glass.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/search-page.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/security-broken.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/security-warning.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/security.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/send-to-device.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/share.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/sidebars-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/sidebars.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/source-code.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/stop-to-reload.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /chrome/icons/tab-audio-blocked-small.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/tab-audio-muted-small.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/tab-audio-playing-small.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/tag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/tool-profiler.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/tracking-protection.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/translate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/video-open.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/video-save.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/win11-close-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/win11-close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/win11-maximize.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/win11-minimize.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /chrome/icons/win11-restore.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/window.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/xr-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /chrome/icons/xr.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/zoom-out.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/toolbar/findbar.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox - findbar.css 2 | * https://github.com/bmFtZQ/edge-frfox */ 3 | 4 | /* Findbar text input box. */ 5 | .findbar-textbox { 6 | border: 0 !important; 7 | border-radius: var(--toolbarbutton-border-radius) !important; 8 | background-color: var(--toolbar-field-background-color) !important; 9 | 10 | /* Add shadow when in light mode with no theme applied, like the URL bar. */ 11 | &:not(:-moz-lwtheme) { 12 | box-shadow: 0 0 4px light-dark(rgb(0 0 0 / .1), transparent) !important; 13 | } 14 | 15 | &:focus { 16 | outline-width: 2px !important; 17 | outline-offset: -1px !important; 18 | } 19 | 20 | &[status="notfound"] { 21 | outline: 2px solid var(--input-error-border-color, #E22850) !important; 22 | outline-offset: -1px !important; 23 | } 24 | } 25 | 26 | /* Prevent focus outline from being cut off on the findbar textbox. */ 27 | .findbar-container { 28 | overflow-inline: visible !important; 29 | 30 | /* Add ability to drag window from empty space in the findbar. */ 31 | &::after { 32 | content: ""; 33 | flex: 1; 34 | align-self: stretch; 35 | margin-block: -6px; 36 | -moz-window-dragging: drag; 37 | } 38 | } 39 | 40 | /* Findbar buttons. */ 41 | .findbar-find-previous, 42 | .findbar-find-next, 43 | findbar .close-icon { 44 | border-radius: var(--toolbarbutton-border-radius) !important; 45 | 46 | &:not([disabled]):hover { 47 | background-color: var(--toolbarbutton-hover-background, rgb(190 190 190 / .2)) !important; 48 | 49 | &:active { 50 | background-color: var(--toolbarbutton-active-background, rgb(190 190 190 / .4)) !important; 51 | } 52 | } 53 | } 54 | 55 | /* Rounded corners optimisations. */ 56 | @media (-moz-bool-pref: "uc.tweak.rounded-corners") { 57 | findbar { 58 | border: none !important; 59 | margin-bottom: var(--uc-tweak-rounded-corners-padding, 0px) !important; 60 | background-color: transparent !important; 61 | padding-inline: var(--uc-tweak-rounded-corners-padding, 0px) !important; 62 | 63 | &[hidden] { 64 | margin-bottom: calc(var(--uc-tweak-rounded-corners-padding, 0px) - 40px) !important; 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /chrome/toolbar/navbar.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox - navbar.css 2 | * https://github.com/bmFtZQ/edge-frfox */ 3 | 4 | :root { 5 | --toolbarbutton-border-radius: 6px !important; 6 | --toolbarbutton-inner-padding: 7px !important; 7 | --uc-toolbarbutton-inner-inline-padding: 12px !important; 8 | --toolbarbutton-outer-padding: 2px !important; 9 | --tabs-navbar-shadow-size: 0px !important; 10 | } 11 | 12 | #nav-bar .toolbarbutton-1>.toolbarbutton-icon { 13 | width: calc(2 * var(--uc-toolbarbutton-inner-inline-padding) + 16px) !important; 14 | } 15 | 16 | #nav-bar .toolbarbutton-1>.toolbarbutton-icon, 17 | #nav-bar .toolbarbutton-1>.toolbarbutton-text, 18 | #nav-bar .toolbarbutton-1>.toolbarbutton-badge-stack { 19 | padding-inline: var(--uc-toolbarbutton-inner-inline-padding) !important; 20 | } 21 | 22 | /* move reload/stop icon to middle of button */ 23 | #reload-button>.toolbarbutton-animatable-box, 24 | #stop-button>.toolbarbutton-animatable-box { 25 | top: calc(50% - 10px) !important; 26 | } 27 | 28 | #nav-bar-customization-target :where(#reload-button, #stop-button)>.toolbarbutton-icon { 29 | padding: var(--toolbarbutton-inner-padding) var(--uc-toolbarbutton-inner-inline-padding) !important; 30 | } 31 | 32 | toolbar .toolbaritem-combined-buttons { 33 | margin-inline: var(--toolbarbutton-outer-padding) !important; 34 | } 35 | 36 | /* account button */ 37 | .browser-toolbar #fxa-toolbar-menu-button, 38 | .browser-toolbar #fxa-toolbar-menu-button>.toolbarbutton-badge-stack, 39 | #fxa-avatar-image { 40 | border-radius: 99px !important; 41 | } 42 | 43 | .browser-toolbar #fxa-toolbar-menu-button>.toolbarbutton-badge-stack { 44 | padding: var(--toolbarbutton-inner-padding) !important; 45 | margin-inline: calc(var(--uc-toolbarbutton-inner-inline-padding) - var(--toolbarbutton-inner-padding)) !important; 46 | } 47 | 48 | #fxa-toolbar-menu-button { 49 | display: flex !important; 50 | } 51 | 52 | #widget-overflow-list>#fxa-toolbar-menu-button #fxa-avatar-image { 53 | scale: 1.25 !important; 54 | } 55 | 56 | .customization-target>#fxa-toolbar-menu-button #fxa-avatar-image { 57 | scale: 1.5 !important; 58 | } 59 | 60 | /* button background transition */ 61 | @media not (prefers-reduced-motion) { 62 | .toolbarbutton-1>.toolbarbutton-icon, 63 | .toolbarbutton-1>.toolbarbutton-text, 64 | .toolbarbutton-1>.toolbarbutton-badge-stack, 65 | :not(.panel-subview-body>toolbaritem)>.bookmark-item:not(menu, menuitem), 66 | .urlbar-page-action, 67 | .identity-box-button, 68 | #tracking-protection-icon-container, 69 | panel button, 70 | panel menulist, 71 | .titlebar-button { 72 | transition: background-color 0.25s ease !important; 73 | } 74 | 75 | .toolbarbutton-1:not([disabled=true]):is([open], [checked], :hover:active)>.toolbarbutton-icon, 76 | .toolbarbutton-1:not([disabled=true]):is([open], [checked], :hover:active)>.toolbarbutton-text, 77 | .toolbarbutton-1:not([disabled=true]):is([open], [checked], :hover:active)>.toolbarbutton-badge-stack, 78 | :not(.panel-subview-body>toolbaritem)>.bookmark-item:not(menu, menuitem):not([disabled=true]):is([open], [checked], :hover:active), 79 | .urlbar-page-action:not([disabled=true]):is([open], [checked], :hover:active), 80 | .identity-box-button:not([disabled=true]):is([open], [checked], :hover:active), 81 | #tracking-protection-icon-container:not([disabled=true]):is([open], [checked], :hover:active), 82 | panel button:not([disabled=true]):is([open], [checked], :hover:active), 83 | panel menulist:not([disabled=true]):is([open], [checked], :hover:active), 84 | .titlebar-button:not([disabled=true]):hover:active { 85 | transition-duration: 0s !important; 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /chrome/toolbar/personalbar.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox - personalbar.css 2 | * https://github.com/bmFtZQ/edge-frfox */ 3 | 4 | :root { 5 | --bookmark-block-padding: 6px !important; 6 | --bookmark-inline-padding: 8px !important; 7 | --bookmark-block-margin: 2px !important; 8 | --bookmark-inline-margin: 1px !important; 9 | --uc-bookmark-toolbar-padding-bottom: 2px; 10 | --bookmarks-toolbar-overlapping-browser-height: calc(var(--uc-bookmark-toolbar-padding-bottom) + 16px + (var(--bookmark-block-margin) + var(--bookmark-block-padding)) * 2) !important; 11 | } 12 | 13 | #PersonalToolbar { 14 | padding-bottom: var(--uc-bookmark-toolbar-padding-bottom) !important; 15 | } 16 | 17 | /* Bookmarks bar item sizing */ 18 | #personal-toolbar-empty-description, 19 | #PersonalToolbar .toolbarbutton-1, 20 | toolbarbutton.bookmark-item:not(.subviewbutton) { 21 | margin-block: var(--bookmark-block-margin) !important; 22 | margin-inline: var(--bookmark-inline-margin) !important; 23 | padding-block: var(--bookmark-block-padding) !important; 24 | padding-inline: var(--bookmark-inline-padding) !important; 25 | font-size: 14px !important; 26 | 27 | /* Adjust vertical label position on Windows */ 28 | @media (-moz-platform: windows) { 29 | & .toolbarbutton-text { 30 | margin-block: -1px 0 !important; 31 | } 32 | } 33 | } 34 | 35 | #PersonalToolbar .toolbarbutton-1 { 36 | padding: 0 !important; 37 | } 38 | 39 | /* Bookmarks bar separators */ 40 | #PlacesToolbarItems > toolbarseparator { 41 | padding-inline: calc(3px - var(--bookmark-inline-margin)) !important; 42 | align-items: center !important; 43 | 44 | &::before { 45 | content: ""; 46 | border-inline-start: 1px solid var(--toolbarseparator-color) !important; 47 | height: 16px !important; 48 | border-image: none !important; 49 | } 50 | 51 | /* Fractional scaling adjustments (150%, 175%, etc.) */ 52 | @media (1dppx < resolution < 2dppx) { 53 | &::before { 54 | border-inline-start-width: 1.5px !important; 55 | } 56 | } 57 | } 58 | 59 | /* Left and Right padding of bookmarks bar */ 60 | #PersonalToolbar { 61 | padding-inline: calc(var(--toolbar-start-end-padding) - 2px) calc(var(--toolbar-start-end-padding) + 4px) !important; 62 | } 63 | 64 | /* Spacing between icon and label for bookmarks bar items */ 65 | #managed-bookmarks>.toolbarbutton-icon, 66 | #bookmarks-toolbar-placeholder>.toolbarbutton-icon, 67 | #PlacesToolbarItems>.bookmark-item>.toolbarbutton-icon[label]:not([label=""]), 68 | #OtherBookmarks.bookmark-item[container]>.toolbarbutton-icon { 69 | margin-inline-end: 8px !important; 70 | } 71 | 72 | /* Sizing for bookmarks bar icons */ 73 | #PersonalToolbar .toolbarbutton-1>.toolbarbutton-icon { 74 | width: calc(2 * var(--bookmark-block-padding) + 16px) !important; 75 | height: calc(2 * var(--bookmark-block-padding) + 16px) !important; 76 | padding: var(--bookmark-block-padding) !important; 77 | } 78 | -------------------------------------------------------------------------------- /chrome/toolbar/tabbar.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox - tabbar.css 2 | * https://github.com/bmFtZQ/edge-frfox */ 3 | 4 | /* Variables */ 5 | :root { 6 | /* Extra space at the top of the window. */ 7 | --uc-tab-top-margin: 8px !important; 8 | 9 | /* Remove extra space at the top of the window when in fullscreen or when 10 | * title bars are enabled. 11 | */ 12 | &[inFullscreen], 13 | &:not([tabsintitlebar]) { 14 | --uc-tab-top-margin: 0px !important; 15 | } 16 | 17 | /* Remove extra space at the top when the window is maximised or the menu bar 18 | * is active, only on platforms other than macOS. 19 | */ 20 | @media not (-moz-platform: macos) { 21 | &[sizemode="maximized"], 22 | & #toolbar-menubar:not([inactive]) + #TabsToolbar, 23 | &:has(#toolbar-menubar:not([inactive])) { 24 | --uc-tab-top-margin: 0px !important; 25 | } 26 | } 27 | 28 | & #TabsToolbar { 29 | --tab-min-height: 32px !important; 30 | --inline-tab-padding: 11px !important; 31 | --uc-inline-pinned-tab-padding: 12px !important; 32 | --tab-border-radius: 4px !important; 33 | --toolbarbutton-inner-padding: 6px !important; 34 | --uc-toolbarbutton-inner-inline-padding: 8px !important; 35 | --toolbarbutton-border-radius: 4px !important; 36 | --tabs-navbar-shadow-size: 0px !important; 37 | --tab-shadow-max-size: 0 !important; 38 | --uc-tab-separator-height: 20px; 39 | --uc-toolbarbutton-block-margin: 2px; 40 | } 41 | } 42 | 43 | /* ::::: Tab transitions ::::: */ 44 | 45 | /* Tab grow/shrink transition. */ 46 | .tabbrowser-tab:not([pinned]) { 47 | transition-property: min-width, max-width !important; 48 | transition-duration: 150ms !important; 49 | transition-timing-function: cubic-bezier(0, .75, .25, 1) !important; 50 | } 51 | 52 | /* Tab moving transition. */ 53 | #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[fadein]:not([selected]):not([multiselected]), 54 | .tabbrowser-tab[tab-grouping], 55 | .tabbrowser-tab[tabdrop-samewindow] { 56 | transition: transform 200ms cubic-bezier(0, .75, .25, 1) !important; 57 | } 58 | 59 | /* Remove tab toolbar background transition on inactive windows. */ 60 | #navigator-toolbox { 61 | transition: none !important; 62 | } 63 | 64 | /* ::::: Tabs toolbar & button appearance ::::: */ 65 | /* #region */ 66 | 67 | #TabsToolbar { 68 | /* Padding between the edge of the toolbar and its content. */ 69 | padding-inline-start: 8px !important; 70 | 71 | /* Remove any existing margins from toolbar buttons. */ 72 | & .toolbarbutton-1 { 73 | margin: 0 !important; 74 | } 75 | 76 | /* Tab toolbar button sizing. */ 77 | & .toolbarbutton-1 > .toolbarbutton-icon, 78 | & .toolbarbutton-1 > .toolbarbutton-badge-stack { 79 | border-radius: var(--toolbarbutton-border-radius) !important; 80 | padding: var(--toolbarbutton-inner-padding) var(--uc-toolbarbutton-inner-inline-padding) !important; 81 | /* Add margin-block to buttons so they are positioned correctly. */ 82 | margin: var(--uc-toolbarbutton-block-margin) 0 !important; 83 | } 84 | 85 | & .toolbarbutton-1 > .toolbarbutton-icon { 86 | width: calc(2 * var(--uc-toolbarbutton-inner-inline-padding) + 16px) !important; 87 | height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; 88 | } 89 | 90 | /* Keep certain buttons (such as new tab) square shaped. */ 91 | & #tabs-newtab-button > .toolbarbutton-icon, 92 | & #alltabs-button > .toolbarbutton-badge-stack, 93 | & #tabbrowser-tabs[hasadjacentnewtabbutton][overflow] ~ #new-tab-button > .toolbarbutton-icon { 94 | padding: var(--toolbarbutton-inner-padding) !important; 95 | width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; 96 | } 97 | 98 | /* Toolbar buttons should use the same colour as unselected tabs. */ 99 | & .toolbarbutton-animatable-box, 100 | & .toolbarbutton-1 { 101 | fill: currentColor !important; 102 | } 103 | 104 | & #TabsToolbar-customization-target { 105 | /* Vertically align toolbar buttons to the bottom of the tab bar. */ 106 | align-items: end !important; 107 | 108 | /* Reduce space between start of the window and first toolbar button. */ 109 | & > .toolbarbutton-1:nth-child(1 of .toolbarbutton-1:not(#tabbrowser-tabs ~ *)) { 110 | margin-inline-start: -2px !important; 111 | } 112 | 113 | /* Add space after the last toolbar button before the tabs. */ 114 | & > .toolbarbutton-1:nth-last-child(1 of .toolbarbutton-1:not(#tabbrowser-tabs ~ *)), 115 | :root[privatebrowsingmode] & > .toolbarbutton-1:nth-last-child(1 of .toolbarbutton-1:not(#tabbrowser-tabs ~ *):not(#firefox-view-button)) { 116 | margin-inline-end: 4px !important; 117 | 118 | /* Reduces space between this button and the tab scroll button when 119 | * overflowed for consistency. 120 | */ 121 | &:has(~ #tabbrowser-tabs[overflow]) { 122 | margin-inline-end: 2px !important; 123 | } 124 | } 125 | } 126 | } 127 | 128 | #tabbrowser-tabs { 129 | /* Remove the border from the left of the tab bar. */ 130 | border-inline: none !important; 131 | padding-inline-start: var(--tab-overflow-pinned-tabs-width) !important; 132 | 133 | /* Add space above the tabs. */ 134 | margin-top: var(--uc-tab-top-margin) !important; 135 | 136 | /* Pull tabs closer to toolbar buttons when overflowed. */ 137 | &[overflow]:not([haspinnedtabs]) { 138 | margin-inline-start: -2px !important; 139 | } 140 | 141 | /* Remove gap between pinned and unpinned tabs. */ 142 | &[haspinnedtabs]:not([positionpinnedtabs]) .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) { 143 | margin-inline-start: 0 !important; 144 | } 145 | } 146 | 147 | /* Add space between last tab and new tab button. */ 148 | #tabbrowser-tabs #tabs-newtab-button { 149 | margin-inline-start: 2px !important; 150 | } 151 | 152 | /* Tab scrolling buttons. */ 153 | #scrollbutton-up:not(.menupopup-scrollbutton), 154 | #scrollbutton-down:not(.menupopup-scrollbutton) { 155 | border-width: 2px !important; 156 | border-radius: calc(var(--toolbarbutton-border-radius) + 2px) !important; 157 | padding-inline: calc(var(--toolbarbutton-inner-padding) - 4px) !important; 158 | padding-block: var(--toolbarbutton-inner-padding) !important; 159 | } 160 | 161 | /* Add margin to the side of the button facing the tabs so the buttons line up 162 | * on the opposite side with others in the toolbar. 163 | */ 164 | #scrollbutton-up:not(.menupopup-scrollbutton) { 165 | margin-inline: 0 2px !important; 166 | } 167 | 168 | #scrollbutton-down:not(.menupopup-scrollbutton) { 169 | margin-inline: 2px 0 !important; 170 | } 171 | 172 | /* Hide pre-tabs spacer as it isn't needed. */ 173 | .titlebar-spacer[type="pre-tabs"] { 174 | display: none !important; 175 | } 176 | 177 | /* Make sure that the post-tabs spacer appears. */ 178 | .titlebar-spacer[type="post-tabs"] { 179 | display: flex !important; 180 | } 181 | 182 | /* macOS titlebar buttons positioning. */ 183 | @media (-moz-platform: macos) { 184 | /* Compensate for padding added to the Tabs Toolbar. */ 185 | .titlebar-buttonbox-container { 186 | margin-inline-start: -8px !important; 187 | 188 | /* Make sure that titlebar buttons have equal spacing on all sides. */ 189 | & .titlebar-buttonbox { 190 | margin-inline: calc((var(--tab-min-height) + var(--uc-tab-top-margin) - 14px) / 2) !important; 191 | } 192 | } 193 | } 194 | 195 | /* Linux titlebar button positioning. */ 196 | @media (-moz-platform: linux) { 197 | .titlebar-buttonbox-container { 198 | /* Add space between buttons and other toolbar buttons. */ 199 | margin-inline: 8px 0 !important; 200 | 201 | @media (-moz-gtk-csd-reversed-placement) { 202 | /* Compensate for padding added to the Tabs Toolbar. */ 203 | margin-inline: -8px 8px !important; 204 | } 205 | } 206 | } 207 | /* #endregion */ 208 | 209 | 210 | /* ::::: Tab appearance ::::: */ 211 | /* #region */ 212 | 213 | .tabbrowser-tab { 214 | font-size: 12px !important; 215 | padding-inline: 0 !important; 216 | /* Allow shadows to appear outside the tabs. */ 217 | overflow-clip-margin: 8px !important; 218 | 219 | /* Set width of tabs. */ 220 | &:not([pinned], [style*="max-width"])[fadein] { 221 | max-width: 240px !important; 222 | } 223 | 224 | /* Enforce tab foreground colour. */ 225 | &:is([visuallyselected], [multiselected]) { 226 | color: var(--tab-selected-textcolor) !important; 227 | 228 | &:-moz-window-inactive { 229 | color: var(--tab-selected-textcolor-inactive, var(--tab-selected-textcolor)) !important; 230 | } 231 | } 232 | } 233 | 234 | /* Tab inner content padding. */ 235 | .tab-content { 236 | padding-inline: var(--inline-tab-padding) 0 !important; 237 | 238 | /* Pinned tab padding. */ 239 | &[pinned] { 240 | padding: 0 var(--uc-inline-pinned-tab-padding) !important; 241 | } 242 | 243 | /* Indicator for when the title of a pinned tab changes. */ 244 | &[pinned][titlechanged]:not([selected]), 245 | .tabbrowser-tab:is([image], [pinned]) &[attention]:not([selected]) { 246 | background-position: center bottom 2px !important; 247 | } 248 | } 249 | 250 | /* Space between tab icons and the tab titles. */ 251 | .tab-throbber:not([pinned]), 252 | .tab-icon-pending:not([pinned]), 253 | .tab-icon-image:not([pinned]), 254 | .tab-sharing-icon-overlay:not([pinned]) { 255 | margin-inline-end: calc(var(--inline-tab-padding) - 1px) !important; 256 | } 257 | 258 | /* Make sure that the tabs are the correct height. */ 259 | #tabbrowser-tabs .tab-label-container { 260 | height: var(--tab-min-height) !important; 261 | 262 | /* Hide tab audio indicator label. */ 263 | & .tab-secondary-label { 264 | display: none !important; 265 | } 266 | } 267 | 268 | /* Tab close button styling. */ 269 | .tab-close-button { 270 | margin-inline-end: 8px !important; 271 | width: 17px !important; 272 | height: 17px !important; 273 | padding: 4px !important; 274 | border-radius: var(--toolbarbutton-border-radius) !important; 275 | } 276 | 277 | /* Ensure that unselected tabs use full opacity and correct colours. 278 | * Also ensures that the tab's icon is always visible. 279 | */ 280 | .tab-label-container:not([selected="true"], [multiselected]), 281 | .tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay) { 282 | opacity: 1 !important; 283 | } 284 | 285 | /* Change width of the gradient mask located on the right of the tab labels. */ 286 | #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab .tab-label-container { 287 | --tab-label-mask-size: 1em !important; 288 | } 289 | 290 | /* Tab container indicator. */ 291 | .tabbrowser-tab[usercontextid] { 292 | & .tab-context-line { 293 | height: 2px !important; 294 | border-radius: 2px !important; 295 | margin: 2px 7px 0 !important; 296 | } 297 | 298 | &[selected] .tab-context-line { 299 | margin-inline: 9px !important; 300 | } 301 | } 302 | 303 | /* ::::: Tab audio indicator ::::: */ 304 | 305 | /* Move the audio indicator to the right of the tab's icon. */ 306 | #tabbrowser-tabs:not([closebuttons="activetab"]) .tab-icon-overlay:not([pinned]) { 307 | margin-inline: 22px 6px !important; 308 | } 309 | 310 | /* When there is no tab icon, move indicator to the left. */ 311 | #tabbrowser-tabs .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned]) { 312 | margin-inline: 0px 6px !important; 313 | } 314 | 315 | /* Overlay the audio indicator onto the tab icon when there isn't enough space. */ 316 | .tab-icon-overlay:not([crashed]):is([pinned], [sharing]), 317 | #tabbrowser-tabs[closebuttons="activetab"] .tab-icon-overlay:not([crashed]) { 318 | top: -5.5px !important; 319 | inset-inline-end: -6px !important; 320 | } 321 | 322 | /* Set colour for the overlay tab audio indicator. */ 323 | #tabbrowser-tabs[closebuttons="activetab"] { 324 | & .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]):not([crashed]) { 325 | stroke: var(--tab-icon-overlay-stroke, light-dark(white, black)) !important; 326 | color: var(--tab-icon-overlay-fill, light-dark(black, white)) !important; 327 | fill-opacity: 1 !important; 328 | 329 | &:hover { 330 | background-color: var(--tab-icon-overlay-stroke, light-dark(white, black)) !important; 331 | } 332 | } 333 | } 334 | 335 | /* Add border radius to the tab audio indicator. */ 336 | .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]):not([crashed]) { 337 | border-radius: var(--toolbarbutton-border-radius) !important; 338 | padding: 0 !important; 339 | } 340 | 341 | /* Ensure the audio indicator is visible when needed. */ 342 | .tab-icon-stack:is([soundplaying], [muted], [activemedia-blocked]) > .tab-icon-overlay { 343 | opacity: 1 !important; 344 | } 345 | /* #endregion */ 346 | 347 | 348 | /* ::::: Tab background and bottom rounded corners ::::: */ 349 | /* #region */ 350 | 351 | .tab-background { 352 | border-radius: var(--tab-border-radius); 353 | border-bottom-left-radius: 0 !important; 354 | border-bottom-right-radius: 0 !important; 355 | margin-block: 0 !important; 356 | border: 0 !important; 357 | position: relative !important; 358 | --uc-tab-corner-bg: transparent; 359 | --uc-tab-corner-outline: transparent; 360 | 361 | /* Both rounded bottom corners. */ 362 | &::before, 363 | &::after { 364 | content: "" !important; 365 | position: absolute !important; 366 | width: var(--tab-border-radius) !important; 367 | aspect-ratio: 1 / 1; 368 | bottom: 0 !important; 369 | pointer-events: none !important; 370 | clip-path: inset(0); 371 | } 372 | 373 | /* Bottom left corner. */ 374 | &::before { 375 | border-bottom-right-radius: var(--tab-border-radius) !important; 376 | left: 0 !important; 377 | translate: calc(-1 * var(--tab-border-radius)) 0 !important; 378 | box-shadow: 379 | /* First shadow is a 1px outline for better theming support. */ 380 | -1px -1px var(--uc-tab-corner-outline) inset, 381 | /* Second shadow is to add the background colour to the corner. */ 382 | 0 0 0 var(--tab-border-radius) var(--uc-tab-corner-bg) !important; 383 | } 384 | 385 | /* Bottom right corner. */ 386 | &::after { 387 | border-bottom-left-radius: var(--tab-border-radius) !important; 388 | right: 0 !important; 389 | translate: var(--tab-border-radius) 0 !important; 390 | box-shadow: 391 | /* First shadow is a 1px outline for better theming support. */ 392 | 1px -1px var(--uc-tab-corner-outline) inset, 393 | /* Second shadow is to add the background colour to the corner. */ 394 | 0 0 0 var(--tab-border-radius) var(--uc-tab-corner-bg) !important; 395 | } 396 | 397 | /* Make sure that the bottom corners have the same background colour. */ 398 | &:is([selected], [multiselected]) { 399 | --uc-tab-corner-bg: var(--tab-selected-bgcolor, var(--lwt-selected-tab-background-color, var(--toolbar-bgcolor))); 400 | --uc-tab-corner-outline: var(--lwt-tab-line-color, transparent); 401 | /* Disable tab outlines when selected. */ 402 | outline: none !important; 403 | } 404 | 405 | /* Tab hover background colour. */ 406 | .tabbrowser-tab:hover &:not([selected], [multiselected]) { 407 | background-color: color-mix(in srgb, currentColor 8%, transparent) !important; 408 | --uc-tab-corner-bg: color-mix(in srgb, currentColor 8%, transparent) !important; 409 | 410 | /* When in light mode, the hover colour should be white. */ 411 | #TabsToolbar:not([brighttext]) & { 412 | background-color: rgb(255 255 255 / .3) !important; 413 | --uc-tab-corner-bg: rgb(255 255 255 / .3) !important; 414 | 415 | @media (-moz-bool-pref: "uc.tweak.floating-tabs") { 416 | background-color: var(--toolbar-bgcolor) !important; 417 | --uc-tab-corner-bg: var(--toolbar-bgcolor) !important; 418 | } 419 | } 420 | } 421 | 422 | /* When tabs are selected but not active, they should have a partially 423 | * transparent background. 424 | */ 425 | #tabbrowser-tabs &[multiselected]:not([selected]) { 426 | box-shadow: none !important; 427 | opacity: 0.7 !important; 428 | } 429 | } 430 | 431 | /* Disable bottom left rounded corner to prevent overlapping transparent tabs. 432 | * 433 | * If a tab is selected, then the next tab's bottom-left corner should be 434 | * inverted to prevent overlap with the transparent backgrounds. 435 | * 436 | * If the next tab is hidden, then find the next visible tab which would be 437 | * positioned next to the active tab. 438 | */ 439 | .tabbrowser-tab:is([selected], [multiselected]):not([hidden]) { 440 | & + .tabbrowser-tab .tab-background:not([selected]), 441 | & + .tabbrowser-tab[hidden] ~ .tabbrowser-tab:not([hidden]):is([hidden] + *) .tab-background:not([selected]) { 442 | border-bottom-left-radius: var(--tab-border-radius) !important; 443 | 444 | &::before { 445 | --uc-tab-corner-bg: transparent !important; 446 | } 447 | } 448 | } 449 | /* #endregion */ 450 | 451 | 452 | /* ::::: Tab separators ::::: */ 453 | /* #region */ 454 | 455 | .tabbrowser-tab .tab-stack { 456 | /* Both side separators. */ 457 | &::before, 458 | &::after { 459 | content: ""; 460 | position: absolute; 461 | height: var(--uc-tab-separator-height); 462 | inset-block: 0; 463 | margin-block: auto; 464 | border-left: 1px solid transparent; 465 | 466 | } 467 | 468 | /* Fractional scaling adjustments (150%, 175%, etc.) */ 469 | @media (1dppx < resolution < 2dppx) { 470 | &::before, 471 | &::after { 472 | border-left-width: 1.5px !important; 473 | } 474 | } 475 | 476 | /* Left side separators. */ 477 | &::before { 478 | left: 0; 479 | } 480 | 481 | /* Right side separators. */ 482 | &::after { 483 | right: 0; 484 | } 485 | } 486 | 487 | /* Set separator color and add separator for last visible tab. */ 488 | .tabbrowser-tab:not([selected], [multiselected], :hover) { 489 | /* All tabs. */ 490 | & .tab-stack::before, 491 | /* Last visible tab. */ 492 | &:nth-last-child(1 of .tabbrowser-tab:not([hidden])) .tab-stack::after, 493 | /* Last visible pinned tab when overflowed. */ 494 | #tabbrowser-tabs[overflow] &:nth-last-child(1 of .tabbrowser-tab[pinned]:not([hidden])) .tab-stack::after { 495 | border-color: color-mix(in srgb, currentColor 34%, transparent); 496 | } 497 | } 498 | 499 | /* Hide tab separator when previous tab is hovered or selected. 500 | * 501 | * If a tab is selected, then the next tab's left separator should be hidden. 502 | * 503 | * If the next tab is hidden, then find the next visible tab. 504 | */ 505 | .tabbrowser-tab:is([selected], [multiselected], :hover):not([hidden]) { 506 | & + .tabbrowser-tab .tab-stack::before, 507 | & + .tabbrowser-tab[hidden] ~ .tabbrowser-tab:not([hidden]):is([hidden] + *) .tab-stack::before { 508 | border-color: transparent !important; 509 | } 510 | } 511 | 512 | /* Hide the first tab's separator for specific buttons before the tabs. 513 | * 514 | * If in private browsing mode, the Firefox View button is hidden, so the 515 | * separator should also be hidden as long as there are no other buttons before 516 | * it. If the Firefox account button is just before the tabs, then the separator 517 | * should stay hidden. 518 | * 519 | * If the button directly before the tabs is the Firefox account button, the 520 | * separator should be hidden. 521 | * 522 | * If there are no buttons before the tabs, hide the separator. 523 | */ 524 | :root[privatebrowsingmode] #firefox-view-button + #tabbrowser-tabs:not(.toolbarbutton-1:not(#fxa-toolbar-menu-button) + #firefox-view-button + #tabbrowser-tabs), 525 | #fxa-toolbar-menu-button + #tabbrowser-tabs, 526 | #tabbrowser-tabs:first-child { 527 | & .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([hidden])) .tab-stack::before { 528 | border-color: transparent !important; 529 | } 530 | } 531 | /* #endregion */ 532 | 533 | 534 | /* ::::: Tab shadows ::::: */ 535 | /* #region */ 536 | 537 | /* Tab and toolbar shadows. */ 538 | :root, 539 | :root .tabbrowser-tab { 540 | /* Light mode shadows. */ 541 | --uc-titlebar-shadow: 542 | 0 -1px var(--tabs-navbar-shadow-color, transparent) inset, 543 | 0 -3px 2px -3px rgb(0 0 0 / .2) inset; 544 | --uc-tab-shadow: 545 | 0 0 0 1px var(--lwt-tab-line-color, transparent), 546 | 0 4px 5px rgb(0 0 0 / .21), 547 | 0 0px 2px rgb(0 0 0 / .18); 548 | 549 | & [brighttext], 550 | & [brighttext] .tabbrowser-tab { 551 | /* Dark mode shadows. */ 552 | --uc-titlebar-shadow: 553 | 0 -1px var(--tabs-navbar-shadow-color, transparent) inset, 554 | 0 -3px 2px -3px rgb(0 0 0 / .7) inset; 555 | --uc-tab-shadow: 556 | 0 0 0 1px var(--lwt-tab-line-color, transparent), 557 | 0 5px 7px rgb(0 0 0 / .44), 558 | 0 0px 2px rgb(0 0 0 / .7); 559 | } 560 | } 561 | 562 | /* Apply tab shadows. */ 563 | #tabbrowser-tabs .tab-background:is([selected], [multiselected]), 564 | #TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon { 565 | box-shadow: var(--uc-tab-shadow) !important; 566 | } 567 | 568 | /* Apply toolbar shadows. */ 569 | #TabsToolbar { 570 | box-shadow: var(--uc-titlebar-shadow) !important; 571 | } 572 | 573 | /* Prevent interference with context menu arrowscrollbox. */ 574 | #tabbrowser-arrowscrollbox { 575 | --uc-padding-top: 4px; 576 | --uc-margin-top: -4px; 577 | --uc-padding-inline-end: var(--tab-border-radius) 578 | } 579 | 580 | /* Make room for the tab shadows so they aren't clipped at the top. */ 581 | .scrollbox-clip > scrollbox { 582 | padding-top: var(--uc-padding-top, 0) !important; 583 | margin-top: var(--uc-margin-top, 0) !important; 584 | /* Used to fix tab overflow issue with rounded corners. */ 585 | padding-inline-end: var(--uc-padding-inline-end, 0) !important; 586 | } 587 | 588 | /* Add some room horizontally for the tab shadows and rounded corners. */ 589 | #tabbrowser-tabs { 590 | &:not([overflow]) { 591 | margin-inline-start: -8px !important; 592 | margin-inline-end: calc(-1 * var(--tab-border-radius)) !important; 593 | 594 | #tabbrowser-arrowscrollbox .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([hidden])) { 595 | margin-inline-start: 8px !important; 596 | } 597 | } 598 | } 599 | 600 | /* Clip the bottom of the tabs so the shadows don't bleed into other areas. */ 601 | #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { 602 | clip-path: inset(-8px -8px 0) !important; 603 | } 604 | /* #endregion */ 605 | 606 | 607 | /* ::::: Private browsing indicator ::::: */ 608 | /* #region */ 609 | 610 | :root[privatebrowsingmode="temporary"] { 611 | /* Move the other content in the Tabs Toolbar in-front of the indicator. */ 612 | & #TabsToolbar .toolbar-items, 613 | & #TabsToolbar .titlebar-buttonbox-container { 614 | position: relative; 615 | z-index: 1; 616 | } 617 | 618 | /* Hide the post tab spacer as it is not needed. */ 619 | .titlebar-spacer[type="post-tabs"] { 620 | display: none !important; 621 | } 622 | } 623 | 624 | /* String for the custom label. */ 625 | :root, 626 | :root[lang^="en"] { 627 | --uc-string-private: "Private"; 628 | } 629 | 630 | /* Appearance & sizing for the private browsing indicator. */ 631 | #private-browsing-indicator-with-label { 632 | position: relative !important; 633 | isolation: isolate; 634 | font-size: 12px; 635 | 636 | /* Allow space for the gradient to underlay other toolbar items. */ 637 | margin-inline: -16px -16px !important; 638 | padding-inline: 32px 24px !important; 639 | color: var(--button-primary-color, var(--toolbar-bgcolor)) !important; 640 | text-shadow: none !important; 641 | background: var(--uc-gradient); 642 | --uc-bg-color: var(--button-primary-bgcolor, var(--toolbarbutton-icon-fill-attention)); 643 | 644 | /* Primay gradient, fades to transparent on the left. */ 645 | --uc-gradient: linear-gradient(to right, transparent, var(--uc-bg-color) 35%); 646 | 647 | /* Alternate gradient, fades to transparent on both sides. */ 648 | --uc-gradient-alt: linear-gradient(to right, transparent, var(--uc-bg-color) 25%, var(--uc-bg-color) 75%, transparent); 649 | 650 | /* If the titlebar buttons are on the right, then use the alternate gradient 651 | * if the menu bar is not permanently enabled. 652 | */ 653 | @media (-moz-platform: windows), 654 | (-moz-gtk-csd-available) and (not (-moz-gtk-csd-reversed-placement)) { 655 | :root[tabsintitlebar] #toolbar-menubar:not([autohide="false"]) ~ #TabsToolbar & { 656 | background: var(--uc-gradient-alt); 657 | } 658 | } 659 | 660 | /* Private browsing icon size. */ 661 | & .private-browsing-indicator-icon { 662 | height: 24px !important; 663 | width: 24px !important; 664 | } 665 | 666 | /* Change "Private Browsing" text to "Private" (English locale only). */ 667 | :root:is([lang^="en"]) & { 668 | /* Hide original label. */ 669 | & > label { 670 | display: none !important; 671 | } 672 | 673 | /* Add custom "Private" label. */ 674 | &::after { 675 | content: var(--uc-string-private); 676 | margin-block: 1px 2px; 677 | margin-inline: 6px 5px; 678 | } 679 | } 680 | } 681 | /* #endregion */ 682 | -------------------------------------------------------------------------------- /chrome/toolbar/urlbar.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox - urlbar.css 2 | * https://github.com/bmFtZQ/edge-frfox */ 3 | 4 | /* Variables */ 5 | :root { 6 | --urlbar-min-height: 30px !important; 7 | --urlbarView-item-inline-padding: calc(1px + var(--uc-urlbar-inline-padding) + var(--uc-urlbar-icon-inline-padding)) !important; 8 | --urlbar-icon-border-radius: 6px !important; 9 | --urlbar-icon-padding: calc(var(--toolbarbutton-inner-padding) - 2px) !important; 10 | --urlbar-margin-inline: 6px !important; 11 | --identity-box-margin-inline: 6px !important; 12 | 13 | 14 | /* -------------------------- */ 15 | 16 | /* --uc-urlbar-icon-inline-padding: calc(var(--uc-toolbarbutton-inner-inline-padding) - 2px); 17 | --uc-urlbar-inline-padding: 6px; */ 18 | 19 | 20 | --uc-urlbar-icon-inline-padding: var(--uc-toolbarbutton-inner-inline-padding); 21 | --uc-urlbar-inline-padding: 5px; 22 | 23 | /* -------------------------- */ 24 | 25 | 26 | 27 | --uc-urlbar-shadow: 0 0 4px rgb(0 0 0 / .1); 28 | --urlbarView-rich-suggestion-default-icon-size: 32px !important; 29 | 30 | /* urlbar height */ 31 | & #urlbar-container { 32 | --urlbar-container-height: calc(8px + 16px + var(--toolbarbutton-inner-padding) * 2) !important; 33 | } 34 | 35 | & #urlbar { 36 | --urlbar-toolbar-height: calc(8px + 16px + var(--toolbarbutton-inner-padding) * 2) !important; 37 | --urlbar-height: calc(16px + var(--toolbarbutton-inner-padding) * 2) !important; 38 | --urlbar-min-height: calc(16px + var(--toolbarbutton-inner-padding) * 2) !important; 39 | } 40 | 41 | /* Spacing for urlbar suggestion icons. */ 42 | .urlbarView-row { 43 | --urlbarView-icon-margin-start: 0px !important; 44 | --urlbarView-icon-margin-end: calc(var(--uc-urlbar-icon-inline-padding) + var(--identity-box-margin-inline)) !important; 45 | } 46 | } 47 | 48 | /* Appearance for URL bar. */ 49 | #urlbar-background, 50 | #searchbar { 51 | border-radius: 8px !important; 52 | /* border-radius: calc(var(--urlbar-icon-border-radius) + 2px) !important; */ 53 | /* Shadow for URL bar, only appears in light mode. */ 54 | :root:not(:-moz-lwtheme) #nav-bar:not([brighttext]) & { 55 | box-shadow: var(--uc-urlbar-shadow, none); 56 | } 57 | 58 | /* Appearance when the URL bar is expanded. */ 59 | #urlbar[open] & { 60 | border-radius: 8px !important; 61 | border-color: transparent !important; 62 | box-shadow: 0 10px 16px rgb(0 0 0 / 0.18), 0 3px 5px rgb(0 0 0 / 0.33) !important; 63 | outline: 0.5px solid var(--arrowpanel-border-color) !important; 64 | 65 | &:not(:-moz-lwtheme) { 66 | outline-color: var(--panel-separator-color) !important; 67 | } 68 | } 69 | } 70 | 71 | /* Add padding to sides of URL bar. */ 72 | #urlbar-input-container, 73 | #searchbar { 74 | padding-inline: var(--uc-urlbar-inline-padding) !important; 75 | } 76 | 77 | /* URL bar suggestions container. */ 78 | .urlbarView { 79 | margin-inline: 0 !important; 80 | width: 100% !important; 81 | border-inline: 0 !important; 82 | padding-block: 0 !important; 83 | 84 | & .urlbarView-body-inner { 85 | width: 100% !important; 86 | margin-inline: 0 !important; 87 | } 88 | 89 | /* Remove padding from top of URL bar results, not needed as URL bar input already has padding. */ 90 | & .urlbarView-results { 91 | padding-block-start: 0 !important; 92 | } 93 | } 94 | 95 | /* URL bar item. */ 96 | .urlbarView-row { 97 | padding-block: 0 !important; 98 | border: none !important; 99 | border-radius: 0 !important; 100 | 101 | & .urlbarView-row-inner { 102 | padding-block: 8px !important; 103 | } 104 | 105 | /* Vertically align search suggestion thumbnail images. */ 106 | &[rich-suggestion] > .urlbarView-row-inner > .urlbarView-favicon { 107 | margin-inline-start: calc(var(--urlbarView-icon-margin-start) + (16px - var(--urlbarView-rich-suggestion-default-icon-size)) / 2) !important; 108 | margin-inline-end: calc(var(--urlbarView-icon-margin-end) + (16px - var(--urlbarView-rich-suggestion-default-icon-size)) / 2) !important; 109 | } 110 | } 111 | 112 | /* Add highlighted marker to the left of selected URL bar items. */ 113 | .urlbarView-row:not([type="tip"], [type="dynamic"])[selected] > .urlbarView-row-inner, 114 | .urlbarView-row-inner[selected] { 115 | box-shadow: 3px 0 var(--uc-urlbarView-accent-color, var(--toolbar-field-focus-border-color)) inset !important; 116 | } 117 | 118 | /* Keep URL bar in place when expanding. */ 119 | #urlbar[breakout][breakout-extend] { 120 | left: 0 !important; 121 | width: 100% !important; 122 | } 123 | 124 | /* Search engine selector */ 125 | .search-one-offs:not([hidden]) { 126 | padding-block: 6px !important; 127 | 128 | & .searchbar-engine-one-off-item { 129 | min-width: 30px !important; 130 | height: 30px !important; 131 | } 132 | 133 | .urlbarView:not([noresults]) > & { 134 | border-color: var(--urlbarView-separator-color) !important; 135 | } 136 | 137 | #urlbar-anon-search-settings { 138 | margin-inline-end: 8px !important; 139 | } 140 | } 141 | 142 | /* Search engine indicator. */ 143 | #urlbar-search-mode-indicator { 144 | :root:not(:-moz-lwtheme) & { 145 | background-color: var(--urlbar-box-hover-bgcolor) !important; 146 | } 147 | 148 | & #urlbar-search-mode-indicator-title { 149 | font-size: 0.9em !important; 150 | } 151 | } 152 | 153 | /* Remove border between URL bar input and suggestions. */ 154 | #urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner { 155 | border-top: 0 !important; 156 | } 157 | 158 | /* Buttons inside the URL bar. */ 159 | .urlbar-page-action, 160 | #urlbar-go-button, 161 | .search-go-button, 162 | #tracking-protection-icon-container, 163 | #identity-icon-box { 164 | padding-inline: var(--uc-urlbar-icon-inline-padding) !important; 165 | width: calc(var(--uc-urlbar-icon-inline-padding) * 2 + 16px) !important; 166 | } 167 | 168 | /* Site information and Permissions buttons. */ 169 | #identity-icon-box, 170 | #identity-permission-box, 171 | .notification-anchor-icon { 172 | padding-inline: var(--uc-urlbar-icon-inline-padding) !important; 173 | } 174 | 175 | /* Zoom level and tab container indicators. */ 176 | #userContext-icons, 177 | #urlbar-zoom-button { 178 | padding-inline: var(--uc-urlbar-icon-inline-padding) !important; 179 | margin-block: 0 !important; 180 | margin-inline: 0 !important; 181 | } 182 | 183 | /* Move tracking protection button. */ 184 | #tracking-protection-icon-container, 185 | #page-action-buttons { 186 | order: 2 !important; 187 | } 188 | 189 | /* Hide tracking protection button when not hovering over URL bar. */ 190 | #urlbar-container:not(:hover) #tracking-protection-icon-container:not([open]) { 191 | visibility: collapse !important; 192 | } 193 | 194 | /* Focus border for URL bar. */ 195 | #urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background, 196 | #searchbar:focus-within { 197 | outline-offset: calc(var(--focus-outline-width) * -1 + 1px) !important; 198 | } 199 | 200 | /* Pin icon for URL bar suggested sites. */ 201 | .urlbarView-row[pinned] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon { 202 | fill: var(--toolbar-field-color) !important; 203 | } 204 | 205 | #urlbar-input::placeholder, 206 | .searchbar-textbox::placeholder { 207 | opacity: 0.6 !important; 208 | } 209 | 210 | /* Make the lock icon brighter in dark mode. */ 211 | #nav-bar[brighttext] #identity-box:not([pageproxystate="invalid"]) #identity-icon { 212 | fill-opacity: calc(var(--urlbar-icon-fill-opacity) * 1.8) !important; 213 | } 214 | 215 | /* Make the URL bar label opaque in light mode, matching the icons. */ 216 | #nav-bar:not([brighttext]) #identity-box #identity-icon-label { 217 | opacity: var(--urlbar-icon-fill-opacity) !important; 218 | } 219 | 220 | /* Label on the left of the URL bar, shown when viewing Firefox or extension pages. */ 221 | #identity-box[pageproxystate="valid"]:is(.notSecureText, .chromeUI, .extensionPage) > .identity-box-button { 222 | position: relative; 223 | width: unset !important; 224 | 225 | /* Spacing between the icon and label. */ 226 | & #identity-icon-label { 227 | padding-inline-start: 8px !important; 228 | } 229 | 230 | /* Separator to the right of the label. */ 231 | &::after { 232 | content: ""; 233 | position: absolute; 234 | height: 16px; 235 | border-right: 1px solid currentColor; 236 | right: 0; 237 | inset-block: 0; 238 | margin-block: auto; 239 | opacity: 0; 240 | } 241 | 242 | /* Fractional scaling adjustments (150%, 175%, etc.) */ 243 | @media (1dppx < resolution < 2dppx) { 244 | &::after { 245 | border-right-width: 1.5px !important; 246 | } 247 | } 248 | 249 | /* Remove background from urlbar box. */ 250 | &:not(:hover, [open]) { 251 | background-color: transparent !important; 252 | 253 | /* Separator opacity */ 254 | &::after { 255 | opacity: 0.375; 256 | } 257 | } 258 | 259 | /* Fade transition for separator. */ 260 | @media not (prefers-reduced-motion) { 261 | &::after { 262 | transition: opacity 0.2s ease; 263 | } 264 | } 265 | } 266 | -------------------------------------------------------------------------------- /chrome/tweaks/hide-tabs-bar.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox - tweaks/hide-tabs-bar.css 2 | * https://github.com/bmFtZQ/edge-frfox */ 3 | 4 | /* Only hide the tabs toolbar if one of the following sidebar extensions is 5 | * active: */ 6 | /* Sidebery */ 7 | :root:not([customizing]):has(#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden])), 8 | /* Tree Style Tab */ 9 | :root:not([customizing]):has(#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:not([hidden])), 10 | /* Tab Center Reborn */ 11 | :root:not([customizing]):has(#sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"]:not([hidden])) { 12 | /* Height of navbar, used for determining height and position of window controls */ 13 | --uc-navbar-height: 38px; 14 | /* Drag space next to the window controls, allows you to move the window more easily */ 15 | --uc-titlebar-drag-space: 40px; 16 | 17 | /* Hide the tabs */ 18 | & #TabsToolbar { 19 | visibility: collapse !important; 20 | } 21 | 22 | 23 | 24 | 25 | /* !!!!!!!!!!!!!!!!!!!! 123+ */ 26 | /* Fix issue with missing window controls. */ 27 | &[tabsintitlebar] #titlebar { 28 | will-change: auto !important; 29 | } 30 | 31 | 32 | 33 | 34 | 35 | /* Add some padding to the top of the navbar */ 36 | &[tabsintitlebar] #nav-bar { 37 | padding-top: var(--uc-tab-top-margin, 0) !important; 38 | } 39 | 40 | /* Set background colour of the menu bar to maintain consistency with the navbar */ 41 | @media not (-moz-bool-pref: "uc.tweak.floating-tabs") { 42 | #toolbar-menubar { 43 | background-color: var(--toolbar-bgcolor) !important; 44 | color: var(--toolbar-color) !important; 45 | } 46 | } 47 | 48 | /* Make sure window controls are removed in full screen mode. */ 49 | &[inDOMFullscreen] #TabsToolbar .titlebar-buttonbox, 50 | &[inFullscreen] #navigator-toolbox[style*="margin-top"] #TabsToolbar .titlebar-buttonbox { 51 | visibility: collapse !important; 52 | } 53 | 54 | /* macOS specific positioning */ 55 | @media (-moz-platform: macos) { 56 | /* Offset navbar contents to make space for the window controls */ 57 | &[tabsintitlebar] #nav-bar:not([inFullscreen]) { 58 | padding-left: calc(70px + var(--uc-titlebar-drag-space)) !important; 59 | 60 | /* Remove the padding from the side of the navbar */ 61 | & #nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child { 62 | padding-inline-start: 0 !important; 63 | } 64 | } 65 | 66 | /* Positioning of the window controls */ 67 | #TabsToolbar .titlebar-buttonbox-container { 68 | visibility: visible !important; 69 | position: fixed !important; 70 | height: calc(var(--uc-navbar-height) + var(--uc-tab-top-margin, 0px)); 71 | margin: 0 !important; 72 | top: 0; 73 | left: 0; 74 | 75 | & .titlebar-buttonbox { 76 | margin-inline: calc((var(--uc-navbar-height) + var(--uc-tab-top-margin, 0px) - 14px) / 2) !important; 77 | } 78 | } 79 | } 80 | 81 | /* Windows specific positioning */ 82 | @media (-moz-platform: windows) { 83 | /* Offset navbar contents to make space for the window controls */ 84 | &:where([inFullscreen], [tabsintitlebar]) #nav-bar { 85 | padding-inline-end: calc(140px + var(--uc-titlebar-drag-space)) !important; 86 | 87 | /* Remove the padding from the side of the navbar */ 88 | & #PanelUI-menu-button { 89 | padding-inline-end: 0 !important; 90 | } 91 | } 92 | 93 | /* Positioning of the window controls */ 94 | & :where(#toolbar-menubar[inactive]) + #TabsToolbar .titlebar-buttonbox { 95 | visibility: visible !important; 96 | position: fixed !important; 97 | top: 0; 98 | inset-inline-end: 0; 99 | height: calc(var(--uc-navbar-height) + var(--uc-tab-top-margin, 0)) !important; 100 | z-index: 100 !important; 101 | color: var(--toolbar-color) !important; 102 | } 103 | 104 | } 105 | 106 | /* Linux/GTK specific positioning, only needed if there is at least one window 107 | * control button. */ 108 | @media (-moz-gtk-csd-minimize-button), 109 | (-moz-gtk-csd-maximize-button), 110 | (-moz-gtk-csd-close-button) { 111 | /* Width of single window control button. */ 112 | --uc-window-control-btn: 34px; 113 | 114 | /* Navbar space reserved for one button. */ 115 | --uc-window-controls-width: var(--uc-window-control-btn); 116 | 117 | /* Navbar space reserved for two buttons. */ 118 | @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button), 119 | (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button), 120 | (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { 121 | --uc-window-controls-width: calc(var(--uc-window-control-btn) * 2); 122 | } 123 | 124 | /* Navbar space reserved for three buttons. */ 125 | @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { 126 | --uc-window-controls-width: calc(var(--uc-window-control-btn) * 3); 127 | } 128 | 129 | /* Offset navbar contents to make space for the window controls */ 130 | &:where([inFullscreen], [tabsintitlebar]) #nav-bar { 131 | /* Window controls on the right. */ 132 | @media not (-moz-gtk-csd-reversed-placement) { 133 | 134 | /* -------------------------- */ 135 | 136 | /* padding-inline: 0 calc(var(--uc-window-controls-width, 0px) + var(--uc-titlebar-drag-space)) !important; */ 137 | 138 | padding-inline-end: calc(var(--uc-window-controls-width, 0px) + var(--uc-titlebar-drag-space)) !important; 139 | 140 | /* -------------------------- */ 141 | 142 | /* Remove the padding from the side of the navbar */ 143 | & #PanelUI-menu-button { 144 | padding-inline-end: 0 !important; 145 | } 146 | } 147 | 148 | /* Window controls on the left. */ 149 | @media (-moz-gtk-csd-reversed-placement) { 150 | 151 | /* -------------------------- */ 152 | 153 | /* padding-inline: calc(var(--uc-window-controls-width, 0px) + var(--uc-titlebar-drag-space)) 0 !important; */ 154 | 155 | padding-inline-start: calc(var(--uc-window-controls-width, 0px) + var(--uc-titlebar-drag-space)) !important; 156 | 157 | /* -------------------------- */ 158 | 159 | /* Remove the padding from the side of the navbar */ 160 | & #nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child { 161 | padding-inline-start: 0 !important; 162 | } 163 | } 164 | } 165 | 166 | /* Positioning of the window controls */ 167 | & :where(#toolbar-menubar[inactive]) + #TabsToolbar .titlebar-buttonbox { 168 | visibility: visible !important; 169 | position: fixed !important; 170 | top: 0; 171 | height: calc(var(--uc-navbar-height) + var(--uc-tab-top-margin, 0)) !important; 172 | z-index: 100 !important; 173 | inset-inline: auto 0; 174 | 175 | @media (-moz-gtk-csd-reversed-placement) { 176 | inset-inline: 0 auto !important; 177 | } 178 | } 179 | } 180 | } 181 | -------------------------------------------------------------------------------- /chrome/userChrome.css: -------------------------------------------------------------------------------- 1 | @import url("icons/icons.css"); 2 | @import url("toolbar/tabbar.css"); 3 | @import url("toolbar/navbar.css"); 4 | @import url("toolbar/personalbar.css"); 5 | @import url("toolbar/findbar.css"); 6 | @import url("toolbar/urlbar.css"); 7 | @import url("global/colors.css"); 8 | @import url("global/popup.css"); 9 | @import url("global/browser.css"); 10 | @import url("global/tree.css"); 11 | 12 | @import url("global/tweaks.css"); 13 | @import url("tweaks/hide-tabs-bar.css") (-moz-bool-pref: "uc.tweak.hide-tabs-bar"); 14 | @import url("custom.css"); 15 | 16 | /* ------------------------- */ 17 | /* Sidebery */ 18 | /* 隐藏侧栏的顶栏 */ 19 | /* https://github.com/HelgiMagic/FirefoxCSS/blob/main/userChrome.css */ 20 | /* https://www.reddit.com/r/FirefoxCSS/comments/197fgeo/firefox_sidebery_arclike_setup/ */ 21 | 22 | #sidebar-header { 23 | display: none; 24 | } 25 | 26 | /* #sidebar-splitter { 27 | display: none; 28 | } 29 | 30 | #sidebar-box { 31 | min-width: 300px !important; 32 | max-width: 300px !important; 33 | } */ 34 | 35 | /* :root { 36 | --uc-titlebar-drag-space: 0px !important; 37 | } */ -------------------------------------------------------------------------------- /chrome/userContent.css: -------------------------------------------------------------------------------- 1 | /* Edge-Frfox */ 2 | @import url("content/common.css"); 3 | @import url("content/newtab.css"); 4 | -------------------------------------------------------------------------------- /image-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VincentAzz/FirefoxCustomCSSConfig/4df3bfa5d380223ca41eb85b55e7b273fba04a00/image-1.png -------------------------------------------------------------------------------- /image-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VincentAzz/FirefoxCustomCSSConfig/4df3bfa5d380223ca41eb85b55e7b273fba04a00/image-2.png -------------------------------------------------------------------------------- /image-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VincentAzz/FirefoxCustomCSSConfig/4df3bfa5d380223ca41eb85b55e7b273fba04a00/image-3.png -------------------------------------------------------------------------------- /image-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VincentAzz/FirefoxCustomCSSConfig/4df3bfa5d380223ca41eb85b55e7b273fba04a00/image-4.png -------------------------------------------------------------------------------- /image-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VincentAzz/FirefoxCustomCSSConfig/4df3bfa5d380223ca41eb85b55e7b273fba04a00/image-5.png -------------------------------------------------------------------------------- /image-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VincentAzz/FirefoxCustomCSSConfig/4df3bfa5d380223ca41eb85b55e7b273fba04a00/image-6.png -------------------------------------------------------------------------------- /image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VincentAzz/FirefoxCustomCSSConfig/4df3bfa5d380223ca41eb85b55e7b273fba04a00/image.png -------------------------------------------------------------------------------- /sidebery.css: -------------------------------------------------------------------------------- 1 | #root.root {--ctx-menu-fg: #ccc;} 2 | #root.root {--toolbar-bg: #191a23;} 3 | #root.root {--frame-el-overlay-selected-border: #1f6feb;} 4 | #root.root {--toolbar-el-overlay-selected-border: #1f6feb;} 5 | #root.root {--frame-bg: #191a23;} 6 | 7 | 8 | #root.root {--tabs-height: 32px;} 9 | #root.root {--general-border-radius: 7px;} 10 | #root.root {--general-margin: 5px;} 11 | 12 | /* VSCode Modern Dark #181818 #1f1f1f #282828*/ 13 | /* Linear Blue #191a23 */ -------------------------------------------------------------------------------- /user.js: -------------------------------------------------------------------------------- 1 | // Edge-Frfox - user.js 2 | // https://github.com/bmFtZQ/edge-frfox 3 | // This file contains the settings required for the theme to function correctly. 4 | 5 | // Enables the userChrome.css and userContent.css files. 6 | user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true); 7 | // Allows the theme's SVG icons to be coloured properly. 8 | user_pref("svg.context-properties.content.enabled", true); 9 | // Allows colours used in the theme to be mixed with others. 10 | user_pref("layout.css.color-mix.enabled", true); 11 | // Allows theme to use different colours for light/dark mode. 12 | user_pref("layout.css.light-dark.enabled", true); 13 | // Enables the CSS :has() selector, required for hide tabs toolbar tweak. 14 | user_pref("layout.css.has-selector.enabled", true); 15 | --------------------------------------------------------------------------------