├── LICENSE ├── README.md ├── dark.png ├── light.png ├── media ├── Adaptive Theme.gif ├── Auto Hide Sidebery.gif ├── Custom Icon.gif ├── Enchanted URL Bar.gif ├── Highlight Border.gif ├── Hovering Bookmark.gif ├── IIXLiV9iZrsHJlRzcWqpOQPu5nTI2kVheTz6iZ8ynnwJb8mc2Xdyrc8d6zkpbRRn6a4OEdL02tai6EIM0mzgbxWNmKjv3zY5oJUvGHddEl8uwE7RVPYOKUsfphA26KONO3lw30RpqHBpO24kbP1RooZDG7IRRjf6yrlrOOnBKIf3dFmfIr5q5FptuF6QOiSgmOP8a3FrmnLWM8SAIoB9Qq1cd93rhPLYVw3aXq6VhJuPpMxnhLEuYkDQf7.png ├── MacOS button.gif ├── Minimal Extension Menu.gif ├── placeholder └── t1jwYxBFR7SimysiWYN5ZQmdgKSREYETuzEXhMXHdB9NC02gw6ghjRp4twz1Oryt9gCkmkHVqUvg7M7yGNfp3MreQrlYa6QcLrllA5wJIZaocdStB54gTQgujVdXBoFocvYUubOxLomxQwvrRhhZH4kzDANTPGM2spoUSymrRo7BheOuTOgMMgSACLRjCCUNUd3KlVqr9yFcloiCSgzZQ0LssMpm5URnUPwk0278M7nkwcLVYYJUJPxmyK.png └── userChrome.css /LICENSE: -------------------------------------------------------------------------------- 1 | Mozilla Public License Version 2.0 2 | ================================== 3 | 4 | 1. Definitions 5 | -------------- 6 | 7 | 1.1. "Contributor" 8 | means each individual or legal entity that creates, contributes to 9 | the creation of, or owns Covered Software. 10 | 11 | 1.2. "Contributor Version" 12 | means the combination of the Contributions of others (if any) used 13 | by a Contributor and that particular Contributor's Contribution. 14 | 15 | 1.3. "Contribution" 16 | means Covered Software of a particular Contributor. 17 | 18 | 1.4. "Covered Software" 19 | means Source Code Form to which the initial Contributor has attached 20 | the notice in Exhibit A, the Executable Form of such Source Code 21 | Form, and Modifications of such Source Code Form, in each case 22 | including portions thereof. 23 | 24 | 1.5. "Incompatible With Secondary Licenses" 25 | means 26 | 27 | (a) that the initial Contributor has attached the notice described 28 | in Exhibit B to the Covered Software; or 29 | 30 | (b) that the Covered Software was made available under the terms of 31 | version 1.1 or earlier of the License, but not also under the 32 | terms of a Secondary License. 33 | 34 | 1.6. "Executable Form" 35 | means any form of the work other than Source Code Form. 36 | 37 | 1.7. "Larger Work" 38 | means a work that combines Covered Software with other material, in 39 | a separate file or files, that is not Covered Software. 40 | 41 | 1.8. "License" 42 | means this document. 43 | 44 | 1.9. "Licensable" 45 | means having the right to grant, to the maximum extent possible, 46 | whether at the time of the initial grant or subsequently, any and 47 | all of the rights conveyed by this License. 48 | 49 | 1.10. "Modifications" 50 | means any of the following: 51 | 52 | (a) any file in Source Code Form that results from an addition to, 53 | deletion from, or modification of the contents of Covered 54 | Software; or 55 | 56 | (b) any new file in Source Code Form that contains any Covered 57 | Software. 58 | 59 | 1.11. "Patent Claims" of a Contributor 60 | means any patent claim(s), including without limitation, method, 61 | process, and apparatus claims, in any patent Licensable by such 62 | Contributor that would be infringed, but for the grant of the 63 | License, by the making, using, selling, offering for sale, having 64 | made, import, or transfer of either its Contributions or its 65 | Contributor Version. 66 | 67 | 1.12. "Secondary License" 68 | means either the GNU General Public License, Version 2.0, the GNU 69 | Lesser General Public License, Version 2.1, the GNU Affero General 70 | Public License, Version 3.0, or any later versions of those 71 | licenses. 72 | 73 | 1.13. "Source Code Form" 74 | means the form of the work preferred for making modifications. 75 | 76 | 1.14. "You" (or "Your") 77 | means an individual or a legal entity exercising rights under this 78 | License. For legal entities, "You" includes any entity that 79 | controls, is controlled by, or is under common control with You. For 80 | purposes of this definition, "control" means (a) the power, direct 81 | or indirect, to cause the direction or management of such entity, 82 | whether by contract or otherwise, or (b) ownership of more than 83 | fifty percent (50%) of the outstanding shares or beneficial 84 | ownership of such entity. 85 | 86 | 2. License Grants and Conditions 87 | -------------------------------- 88 | 89 | 2.1. Grants 90 | 91 | Each Contributor hereby grants You a world-wide, royalty-free, 92 | non-exclusive license: 93 | 94 | (a) under intellectual property rights (other than patent or trademark) 95 | Licensable by such Contributor to use, reproduce, make available, 96 | modify, display, perform, distribute, and otherwise exploit its 97 | Contributions, either on an unmodified basis, with Modifications, or 98 | as part of a Larger Work; and 99 | 100 | (b) under Patent Claims of such Contributor to make, use, sell, offer 101 | for sale, have made, import, and otherwise transfer either its 102 | Contributions or its Contributor Version. 103 | 104 | 2.2. Effective Date 105 | 106 | The licenses granted in Section 2.1 with respect to any Contribution 107 | become effective for each Contribution on the date the Contributor first 108 | distributes such Contribution. 109 | 110 | 2.3. Limitations on Grant Scope 111 | 112 | The licenses granted in this Section 2 are the only rights granted under 113 | this License. No additional rights or licenses will be implied from the 114 | distribution or licensing of Covered Software under this License. 115 | Notwithstanding Section 2.1(b) above, no patent license is granted by a 116 | Contributor: 117 | 118 | (a) for any code that a Contributor has removed from Covered Software; 119 | or 120 | 121 | (b) for infringements caused by: (i) Your and any other third party's 122 | modifications of Covered Software, or (ii) the combination of its 123 | Contributions with other software (except as part of its Contributor 124 | Version); or 125 | 126 | (c) under Patent Claims infringed by Covered Software in the absence of 127 | its Contributions. 128 | 129 | This License does not grant any rights in the trademarks, service marks, 130 | or logos of any Contributor (except as may be necessary to comply with 131 | the notice requirements in Section 3.4). 132 | 133 | 2.4. Subsequent Licenses 134 | 135 | No Contributor makes additional grants as a result of Your choice to 136 | distribute the Covered Software under a subsequent version of this 137 | License (see Section 10.2) or under the terms of a Secondary License (if 138 | permitted under the terms of Section 3.3). 139 | 140 | 2.5. Representation 141 | 142 | Each Contributor represents that the Contributor believes its 143 | Contributions are its original creation(s) or it has sufficient rights 144 | to grant the rights to its Contributions conveyed by this License. 145 | 146 | 2.6. Fair Use 147 | 148 | This License is not intended to limit any rights You have under 149 | applicable copyright doctrines of fair use, fair dealing, or other 150 | equivalents. 151 | 152 | 2.7. Conditions 153 | 154 | Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted 155 | in Section 2.1. 156 | 157 | 3. Responsibilities 158 | ------------------- 159 | 160 | 3.1. Distribution of Source Form 161 | 162 | All distribution of Covered Software in Source Code Form, including any 163 | Modifications that You create or to which You contribute, must be under 164 | the terms of this License. You must inform recipients that the Source 165 | Code Form of the Covered Software is governed by the terms of this 166 | License, and how they can obtain a copy of this License. You may not 167 | attempt to alter or restrict the recipients' rights in the Source Code 168 | Form. 169 | 170 | 3.2. Distribution of Executable Form 171 | 172 | If You distribute Covered Software in Executable Form then: 173 | 174 | (a) such Covered Software must also be made available in Source Code 175 | Form, as described in Section 3.1, and You must inform recipients of 176 | the Executable Form how they can obtain a copy of such Source Code 177 | Form by reasonable means in a timely manner, at a charge no more 178 | than the cost of distribution to the recipient; and 179 | 180 | (b) You may distribute such Executable Form under the terms of this 181 | License, or sublicense it under different terms, provided that the 182 | license for the Executable Form does not attempt to limit or alter 183 | the recipients' rights in the Source Code Form under this License. 184 | 185 | 3.3. Distribution of a Larger Work 186 | 187 | You may create and distribute a Larger Work under terms of Your choice, 188 | provided that You also comply with the requirements of this License for 189 | the Covered Software. If the Larger Work is a combination of Covered 190 | Software with a work governed by one or more Secondary Licenses, and the 191 | Covered Software is not Incompatible With Secondary Licenses, this 192 | License permits You to additionally distribute such Covered Software 193 | under the terms of such Secondary License(s), so that the recipient of 194 | the Larger Work may, at their option, further distribute the Covered 195 | Software under the terms of either this License or such Secondary 196 | License(s). 197 | 198 | 3.4. Notices 199 | 200 | You may not remove or alter the substance of any license notices 201 | (including copyright notices, patent notices, disclaimers of warranty, 202 | or limitations of liability) contained within the Source Code Form of 203 | the Covered Software, except that You may alter any license notices to 204 | the extent required to remedy known factual inaccuracies. 205 | 206 | 3.5. Application of Additional Terms 207 | 208 | You may choose to offer, and to charge a fee for, warranty, support, 209 | indemnity or liability obligations to one or more recipients of Covered 210 | Software. However, You may do so only on Your own behalf, and not on 211 | behalf of any Contributor. You must make it absolutely clear that any 212 | such warranty, support, indemnity, or liability obligation is offered by 213 | You alone, and You hereby agree to indemnify every Contributor for any 214 | liability incurred by such Contributor as a result of warranty, support, 215 | indemnity or liability terms You offer. You may include additional 216 | disclaimers of warranty and limitations of liability specific to any 217 | jurisdiction. 218 | 219 | 4. Inability to Comply Due to Statute or Regulation 220 | --------------------------------------------------- 221 | 222 | If it is impossible for You to comply with any of the terms of this 223 | License with respect to some or all of the Covered Software due to 224 | statute, judicial order, or regulation then You must: (a) comply with 225 | the terms of this License to the maximum extent possible; and (b) 226 | describe the limitations and the code they affect. Such description must 227 | be placed in a text file included with all distributions of the Covered 228 | Software under this License. Except to the extent prohibited by statute 229 | or regulation, such description must be sufficiently detailed for a 230 | recipient of ordinary skill to be able to understand it. 231 | 232 | 5. Termination 233 | -------------- 234 | 235 | 5.1. The rights granted under this License will terminate automatically 236 | if You fail to comply with any of its terms. However, if You become 237 | compliant, then the rights granted under this License from a particular 238 | Contributor are reinstated (a) provisionally, unless and until such 239 | Contributor explicitly and finally terminates Your grants, and (b) on an 240 | ongoing basis, if such Contributor fails to notify You of the 241 | non-compliance by some reasonable means prior to 60 days after You have 242 | come back into compliance. Moreover, Your grants from a particular 243 | Contributor are reinstated on an ongoing basis if such Contributor 244 | notifies You of the non-compliance by some reasonable means, this is the 245 | first time You have received notice of non-compliance with this License 246 | from such Contributor, and You become compliant prior to 30 days after 247 | Your receipt of the notice. 248 | 249 | 5.2. If You initiate litigation against any entity by asserting a patent 250 | infringement claim (excluding declaratory judgment actions, 251 | counter-claims, and cross-claims) alleging that a Contributor Version 252 | directly or indirectly infringes any patent, then the rights granted to 253 | You by any and all Contributors for the Covered Software under Section 254 | 2.1 of this License shall terminate. 255 | 256 | 5.3. In the event of termination under Sections 5.1 or 5.2 above, all 257 | end user license agreements (excluding distributors and resellers) which 258 | have been validly granted by You or Your distributors under this License 259 | prior to termination shall survive termination. 260 | 261 | ************************************************************************ 262 | * * 263 | * 6. Disclaimer of Warranty * 264 | * ------------------------- * 265 | * * 266 | * Covered Software is provided under this License on an "as is" * 267 | * basis, without warranty of any kind, either expressed, implied, or * 268 | * statutory, including, without limitation, warranties that the * 269 | * Covered Software is free of defects, merchantable, fit for a * 270 | * particular purpose or non-infringing. The entire risk as to the * 271 | * quality and performance of the Covered Software is with You. * 272 | * Should any Covered Software prove defective in any respect, You * 273 | * (not any Contributor) assume the cost of any necessary servicing, * 274 | * repair, or correction. This disclaimer of warranty constitutes an * 275 | * essential part of this License. No use of any Covered Software is * 276 | * authorized under this License except under this disclaimer. * 277 | * * 278 | ************************************************************************ 279 | 280 | ************************************************************************ 281 | * * 282 | * 7. Limitation of Liability * 283 | * -------------------------- * 284 | * * 285 | * Under no circumstances and under no legal theory, whether tort * 286 | * (including negligence), contract, or otherwise, shall any * 287 | * Contributor, or anyone who distributes Covered Software as * 288 | * permitted above, be liable to You for any direct, indirect, * 289 | * special, incidental, or consequential damages of any character * 290 | * including, without limitation, damages for lost profits, loss of * 291 | * goodwill, work stoppage, computer failure or malfunction, or any * 292 | * and all other commercial damages or losses, even if such party * 293 | * shall have been informed of the possibility of such damages. This * 294 | * limitation of liability shall not apply to liability for death or * 295 | * personal injury resulting from such party's negligence to the * 296 | * extent applicable law prohibits such limitation. Some * 297 | * jurisdictions do not allow the exclusion or limitation of * 298 | * incidental or consequential damages, so this exclusion and * 299 | * limitation may not apply to You. * 300 | * * 301 | ************************************************************************ 302 | 303 | 8. Litigation 304 | ------------- 305 | 306 | Any litigation relating to this License may be brought only in the 307 | courts of a jurisdiction where the defendant maintains its principal 308 | place of business and such litigation shall be governed by laws of that 309 | jurisdiction, without reference to its conflict-of-law provisions. 310 | Nothing in this Section shall prevent a party's ability to bring 311 | cross-claims or counter-claims. 312 | 313 | 9. Miscellaneous 314 | ---------------- 315 | 316 | This License represents the complete agreement concerning the subject 317 | matter hereof. If any provision of this License is held to be 318 | unenforceable, such provision shall be reformed only to the extent 319 | necessary to make it enforceable. Any law or regulation which provides 320 | that the language of a contract shall be construed against the drafter 321 | shall not be used to construe this License against a Contributor. 322 | 323 | 10. Versions of the License 324 | --------------------------- 325 | 326 | 10.1. New Versions 327 | 328 | Mozilla Foundation is the license steward. Except as provided in Section 329 | 10.3, no one other than the license steward has the right to modify or 330 | publish new versions of this License. Each version will be given a 331 | distinguishing version number. 332 | 333 | 10.2. Effect of New Versions 334 | 335 | You may distribute the Covered Software under the terms of the version 336 | of the License under which You originally received the Covered Software, 337 | or under the terms of any subsequent version published by the license 338 | steward. 339 | 340 | 10.3. Modified Versions 341 | 342 | If you create software not governed by this License, and you want to 343 | create a new license for such software, you may create and use a 344 | modified version of this License if you rename the license and remove 345 | any references to the name of the license steward (except to note that 346 | such modified license differs from this License). 347 | 348 | 10.4. Distributing Source Code Form that is Incompatible With Secondary 349 | Licenses 350 | 351 | If You choose to distribute Source Code Form that is Incompatible With 352 | Secondary Licenses under the terms of this version of the License, the 353 | notice described in Exhibit B of this License must be attached. 354 | 355 | Exhibit A - Source Code Form License Notice 356 | ------------------------------------------- 357 | 358 | This Source Code Form is subject to the terms of the Mozilla Public 359 | License, v. 2.0. If a copy of the MPL was not distributed with this 360 | file, You can obtain one at http://mozilla.org/MPL/2.0/. 361 | 362 | If it is not possible or desirable to put the notice in a particular 363 | file, then You may include the notice in a location (such as a LICENSE 364 | file in a relevant directory) where a recipient would be likely to look 365 | for such a notice. 366 | 367 | You may add additional accurate notices of copyright ownership. 368 | 369 | Exhibit B - "Incompatible With Secondary Licenses" Notice 370 | --------------------------------------------------------- 371 | 372 | This Source Code Form is "Incompatible With Secondary Licenses", as 373 | defined by the Mozilla Public License, v. 2.0. 374 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | # Shina Fox - Make Firefox a Cozy Home 4 | Shina's Discord 5 | 6 | Welcome to Shina Fox, a project that seeks to transform your Firefox experience into something homely and comfortable. At the moment, it primarily focuses on theme development. Enjoy! 7 | 8 | 9 | 10 |
11 | 12 | 13 | ![](media/t1jwYxBFR7SimysiWYN5ZQmdgKSREYETuzEXhMXHdB9NC02gw6ghjRp4twz1Oryt9gCkmkHVqUvg7M7yGNfp3MreQrlYa6QcLrllA5wJIZaocdStB54gTQgujVdXBoFocvYUubOxLomxQwvrRhhZH4kzDANTPGM2spoUSymrRo7BheOuTOgMMgSACLRjCCUNUd3KlVqr9yFcloiCSgzZQ0LssMpm5URnUPwk0278M7nkwcLVYYJUJPxmyK.png) 14 | ![](media/IIXLiV9iZrsHJlRzcWqpOQPu5nTI2kVheTz6iZ8ynnwJb8mc2Xdyrc8d6zkpbRRn6a4OEdL02tai6EIM0mzgbxWNmKjv3zY5oJUvGHddEl8uwE7RVPYOKUsfphA26KONO3lw30RpqHBpO24kbP1RooZDG7IRRjf6yrlrOOnBKIf3dFmfIr5q5FptuF6QOiSgmOP8a3FrmnLWM8SAIoB9Qq1cd93rhPLYVw3aXq6VhJuPpMxnhLEuYkDQf7.png) 15 | 16 | 17 | ## Set-up Guide 🛠️ 18 | 19 | ##### Step 1: Sidebery Configuration 🦔 20 | - Firstly, install the [Sidebery Addon](https://addons.mozilla.org/firefox/addon/sidebery/). 21 | - Navigate to Sidebery's `Settings` ⚙️ --> `Navigation bar` 📍 22 | - Turn off the `Show navigation bar in one line` option. 23 | - Proceed to Sidebery's `Setting` ⚙️ --> `Style editor` 🎨 24 | - Finally, copy and paste the following CSS code snippet into the provided space: 25 | 26 | ```csharp 27 | #root.root {--tabs-font: 1rem Monospace;} 28 | #root.root {--ctx-menu-font: 1rem Monospace;} 29 | #root.root {--ctx-menu-min-width: 256px;} 30 | #root.root {--ctx-menu-max-width: 9999px;} 31 | 32 | /* unloaded tab title style */ 33 | .Tab[data-discarded="true"] .title { 34 | opacity: 80%; 35 | } 36 | 37 | /* adjustments */ 38 | #root.root {--tabs-indent: 16px;} 39 | #root.root {--tabs-audio-btn-width: 32px;} 40 | #root.root {--tabs-inner-gap: 4px;} 41 | 42 | /*** hover effects ***/ 43 | #root:not(:hover) { 44 | --tabs-indent: 0px; 45 | } 46 | /* ident indicator ********************************************/ 47 | /* Settings > Tabs > Show marks to indicate tabs sub-tree levels > on */ 48 | .Tab .title { 49 | transition: margin-left 300ms ease; 50 | } 51 | .Tab:hover { 52 | --tabs-inner-gap: 8px; 53 | } 54 | .Tab:hover .title { 55 | margin-left: 8px; 56 | } 57 | ``` 58 | 59 | ##### Step 2: Firefox Configuration ⚙️ 60 | - In the URL bar, enter `about:config` (Accept the Risk and Continue) 61 | - Adjust the configuration as per the following table: 62 | 63 | | Configuration Parameter 🛠️ | Required Setting 🎛️ | 64 | | ---- | ---- | 65 | | `toolkit.legacyUserProfileCustomizations.stylesheets` | `true` | 66 | | `widget.gtk.ignore-bogus-leave-notify` | `1` | 67 | | `floorp.browser.user.interface` (Only if you are using Floorp) | `1` | 68 | | `browser.newtabpage.activity-stream.floorp.newtab.backdrop.blur.disable` (Only if you are using Floorp) | `true` | 69 | 70 | ##### Step 3: Theme Selection 🎨 71 | - In the URL bar, type `about:addons` 72 | - Navigate to the `Theme` section and select ‘Dark’, ‘Light’, or any other preferred [theme](https://addons.mozilla.org/en-US/firefox/themes/). Ensure it is not the `System theme - auto`. 73 | 74 | ##### Step 4: File Installation 🗂️ 75 | - Enter `about:profiles` in the URL bar 76 | - Identify your current profile and click on `Open Directory` in the `Root Directory` section 77 | - Create a `chrome` folder if one doesn't already exist 78 | - Download the [latest version](https://github.com/Shina-SG/Shina-Fox/releases/latest) 79 | - Unzip the downloaded files and transfer them into the `chrome` folder 80 | 81 | Restart Firefox to experience your new cozy haven! 💓🎉 82 | 83 | ## Feature Breakdown 🌟 84 | | Feature Name 🌈 | Preview 📸 | 85 | | ---- | ---- | 86 | | Adaptive Theme | ![](/media/Adaptive%20Theme.gif) | 87 | | MacOS Buttons | ![](/media/MacOS%20button.gif) | 88 | | Highlight Border | ![](/media/Highlight%20Border.gif) | 89 | | Auto Hide Sidebery | ![](/media/Auto%20Hide%20Sidebery.gif) | 90 | | Minimal Extension Menu | ![](/media/Minimal%20Extension%20Menu.gif) | 91 | | Enchanted URL Bar | ![](/media/Enchanted%20URL%20Bar.gif) | 92 | | Custom Icon | ![](/media/Custom%20Icon.gif) | 93 | | Hovering Bookmark | ![](/media/Hovering%20Bookmark.gif) | 94 | 95 | ## Upcoming Improvements: 96 | | Project Section | Current Status | 97 | | ---- | ---- | 98 | | Theme | Released | 99 | | Extension | In Progress | 100 | | Config | In Progress | 101 | | Guide | In Progress | 102 | 103 | ## Appreciation 🌟: 104 | Whilst I am a newbie in the world of programming, I've been using codes and inspiration of the community. Please check out their incredible work: 105 | 106 | | Credits 📝 | 107 | | ---- | 108 | | [Firefox Mod Blur - datguypiko](https://github.com/datguypiko/Firefox-Mod-Blur) | 109 | | [Firefox-ONE - Godiesc](https://github.com/Godiesc/firefox-one) | 110 | | And more... | 111 | -------------------------------------------------------------------------------- /dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shina-SG/Shina-Fox/b1e4f7a9d9bf3d83eeae86e7c42b6ce1d4999ea5/dark.png -------------------------------------------------------------------------------- /light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shina-SG/Shina-Fox/b1e4f7a9d9bf3d83eeae86e7c42b6ce1d4999ea5/light.png -------------------------------------------------------------------------------- /media/Adaptive Theme.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shina-SG/Shina-Fox/b1e4f7a9d9bf3d83eeae86e7c42b6ce1d4999ea5/media/Adaptive Theme.gif -------------------------------------------------------------------------------- /media/Auto Hide Sidebery.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shina-SG/Shina-Fox/b1e4f7a9d9bf3d83eeae86e7c42b6ce1d4999ea5/media/Auto Hide Sidebery.gif -------------------------------------------------------------------------------- /media/Custom Icon.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shina-SG/Shina-Fox/b1e4f7a9d9bf3d83eeae86e7c42b6ce1d4999ea5/media/Custom Icon.gif -------------------------------------------------------------------------------- /media/Enchanted URL Bar.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shina-SG/Shina-Fox/b1e4f7a9d9bf3d83eeae86e7c42b6ce1d4999ea5/media/Enchanted URL Bar.gif -------------------------------------------------------------------------------- /media/Highlight Border.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shina-SG/Shina-Fox/b1e4f7a9d9bf3d83eeae86e7c42b6ce1d4999ea5/media/Highlight Border.gif -------------------------------------------------------------------------------- /media/Hovering Bookmark.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shina-SG/Shina-Fox/b1e4f7a9d9bf3d83eeae86e7c42b6ce1d4999ea5/media/Hovering Bookmark.gif -------------------------------------------------------------------------------- /media/IIXLiV9iZrsHJlRzcWqpOQPu5nTI2kVheTz6iZ8ynnwJb8mc2Xdyrc8d6zkpbRRn6a4OEdL02tai6EIM0mzgbxWNmKjv3zY5oJUvGHddEl8uwE7RVPYOKUsfphA26KONO3lw30RpqHBpO24kbP1RooZDG7IRRjf6yrlrOOnBKIf3dFmfIr5q5FptuF6QOiSgmOP8a3FrmnLWM8SAIoB9Qq1cd93rhPLYVw3aXq6VhJuPpMxnhLEuYkDQf7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shina-SG/Shina-Fox/b1e4f7a9d9bf3d83eeae86e7c42b6ce1d4999ea5/media/IIXLiV9iZrsHJlRzcWqpOQPu5nTI2kVheTz6iZ8ynnwJb8mc2Xdyrc8d6zkpbRRn6a4OEdL02tai6EIM0mzgbxWNmKjv3zY5oJUvGHddEl8uwE7RVPYOKUsfphA26KONO3lw30RpqHBpO24kbP1RooZDG7IRRjf6yrlrOOnBKIf3dFmfIr5q5FptuF6QOiSgmOP8a3FrmnLWM8SAIoB9Qq1cd93rhPLYVw3aXq6VhJuPpMxnhLEuYkDQf7.png -------------------------------------------------------------------------------- /media/MacOS button.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shina-SG/Shina-Fox/b1e4f7a9d9bf3d83eeae86e7c42b6ce1d4999ea5/media/MacOS button.gif -------------------------------------------------------------------------------- /media/Minimal Extension Menu.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shina-SG/Shina-Fox/b1e4f7a9d9bf3d83eeae86e7c42b6ce1d4999ea5/media/Minimal Extension Menu.gif -------------------------------------------------------------------------------- /media/placeholder: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /media/t1jwYxBFR7SimysiWYN5ZQmdgKSREYETuzEXhMXHdB9NC02gw6ghjRp4twz1Oryt9gCkmkHVqUvg7M7yGNfp3MreQrlYa6QcLrllA5wJIZaocdStB54gTQgujVdXBoFocvYUubOxLomxQwvrRhhZH4kzDANTPGM2spoUSymrRo7BheOuTOgMMgSACLRjCCUNUd3KlVqr9yFcloiCSgzZQ0LssMpm5URnUPwk0278M7nkwcLVYYJUJPxmyK.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shina-SG/Shina-Fox/b1e4f7a9d9bf3d83eeae86e7c42b6ce1d4999ea5/media/t1jwYxBFR7SimysiWYN5ZQmdgKSREYETuzEXhMXHdB9NC02gw6ghjRp4twz1Oryt9gCkmkHVqUvg7M7yGNfp3MreQrlYa6QcLrllA5wJIZaocdStB54gTQgujVdXBoFocvYUubOxLomxQwvrRhhZH4kzDANTPGM2spoUSymrRo7BheOuTOgMMgSACLRjCCUNUd3KlVqr9yFcloiCSgzZQ0LssMpm5URnUPwk0278M7nkwcLVYYJUJPxmyK.png -------------------------------------------------------------------------------- /userChrome.css: -------------------------------------------------------------------------------- 1 | /* GLOBAL SETTING */ 2 | 3 | /* Fonts */ 4 | 5 | * { 6 | font-family: monospace !important; 7 | } 8 | 9 | /*------------------------------------------------*/ 10 | /* Background Color */ 11 | 12 | @media (prefers-color-scheme: dark) { 13 | #navigator-toolbox, 14 | #sidebar-box, 15 | #tabbrowser-tabbox, 16 | #tabbrowser-tabpanels, 17 | #browser, 18 | #appcontent, 19 | #sidebar-select-box, 20 | .browser-sidebar2, 21 | tab.tabbrowser-tab *{ 22 | background-color: #1a1a1a !important; 23 | } 24 | 25 | } 26 | @media (prefers-color-scheme: light) { 27 | #navigator-toolbox, 28 | #sidebar-box, 29 | #tabbrowser-tabbox, 30 | #tabbrowser-tabpanels, 31 | #browser, 32 | #appcontent, 33 | #sidebar-select-box, 34 | .browser-sidebar2, 35 | tab.tabbrowser-tab *{ 36 | background-color: #e6e6e6 !important; 37 | } 38 | } 39 | 40 | @media (prefers-color-scheme: dark) { 41 | #navigator-toolbox { 42 | background: #1a1a1a !important; 43 | } 44 | } 45 | 46 | @media (prefers-color-scheme: light) { 47 | #navigator-toolbox { 48 | background: #e6e6e6 !important; 49 | } 50 | } 51 | 52 | #PersonalToolbar, 53 | #nav-bar { 54 | background: transparent !important; 55 | } 56 | 57 | /*============================================================================================*/ 58 | /* NAV BAR */ 59 | 60 | /* Auto hide icons on the Nav Bar */ 61 | #nav-bar > #nav-bar-customization-target *:not(#urlbar-container):not(#urlbar-container *), 62 | #PanelUI-button { 63 | opacity: 0 !important; 64 | transition: opacity 0.7s ease !important; 65 | } 66 | 67 | #nav-bar:hover > #nav-bar-customization-target *:not(#urlbar-container):not(#urlbar-container *), 68 | #nav-bar:hover > #PanelUI-button { 69 | opacity: 1 !important; 70 | transition: opacity 0.3s ease !important; 71 | } 72 | 73 | /*------------------------------------------------*/ 74 | /* Remove line between website content and top bar */ 75 | 76 | #navigator-toolbox { 77 | border-bottom: var(--firefoxcss-top-bar-border-bottom-size) solid 78 | var(--firefoxcss-top-bar-border-bottom-color) !important; 79 | } 80 | 81 | /*------------------------------------------------*/ 82 | /* Remove the all tab and new tab button */ 83 | #alltabs-button, 84 | #tabs-newtab-button { 85 | display: none !important; 86 | } 87 | 88 | /*------------------------------------------------*/ 89 | /* Remove the 3 dots from Alt Key */ 90 | 91 | #titlebar #toolbar-menubar .titlebar-buttonbox-container{ 92 | display: none !important; 93 | } 94 | 95 | /*------------------------------------------------*/ 96 | /* Move menu buttons to the left side */ 97 | 98 | #nav-bar #PanelUI-button #PanelUI-menu-button { 99 | padding-right: 2px !important; 100 | padding-left: 4px !important; 101 | } 102 | 103 | #nav-bar #PanelUI-button { 104 | -moz-box-ordinal-group: 0 !important; 105 | order: 0 !important; 106 | } 107 | 108 | toolbar:not([customizing]) > #nav-bar-overflow-button { 109 | -moz-box-ordinal-group: 1 !important; 110 | order: 1 !important; 111 | } 112 | 113 | toolbar:not([customizing]) > #nav-bar-customization-target { 114 | -moz-box-ordinal-group: 2 !important; 115 | order: 2 !important; 116 | } 117 | 118 | #appMenu-popup { 119 | margin-inline: -244px !important; 120 | } 121 | 122 | #widget-overflow { 123 | margin-inline: -320px !important; 124 | } 125 | 126 | /*------------------------------------------------*/ 127 | /* Macos Style window buttons */ 128 | 129 | :root { 130 | --firefoxcss-control-buttons-margin: 95px; 131 | } 132 | 133 | #navigator-toolbox #nav-bar { 134 | padding-right: calc(var(--firefoxcss-control-buttons-margin) - 10px) !important; 135 | } 136 | 137 | #navigator-toolbox:not([inFullscreen]) 138 | #TabsToolbar 139 | .titlebar-buttonbox-container { 140 | visibility: visible !important; 141 | display: flex !important; 142 | position: absolute !important; 143 | top: 2px !important; 144 | left: unset !important; 145 | right: 0 !important; 146 | padding-top: 10px !important; 147 | padding-bottom: 2px !important; 148 | padding-right: 8px !important; 149 | padding-left: 2px !important; 150 | } 151 | 152 | #TabsToolbar .titlebar-buttonbox-container .titlebar-button { 153 | width: 14px !important; 154 | min-width: 14px !important; 155 | min-height: 14px !important; 156 | height: 14px !important; 157 | } 158 | 159 | #navigator-toolbox[inFullscreen] #TabsToolbar .titlebar-buttonbox-container{ 160 | padding-top:4px !important; 161 | padding-bottom: 4px !important; 162 | padding-right: 8px !important; 163 | padding-left: 4px !important; 164 | margin: 0 !important; 165 | align-items: center !important; 166 | } 167 | 168 | :root:-moz-window-inactive:not([customizing]) 169 | :is(.titlebar-buttonbox) 170 | > toolbarbutton:not(:hover) { 171 | opacity: 0.65 !important; 172 | } 173 | 174 | :is(.titlebar-buttonbox) .toolbarbutton-icon { 175 | opacity: 1 !important; 176 | appearance: none !important; 177 | } 178 | 179 | #TabsToolbar .titlebar-button > .toolbarbutton-icon { 180 | width: 14px !important; 181 | min-width: 14px !important; 182 | min-height: 14px !important; 183 | height: 14px !important; 184 | stroke: none !important; 185 | } 186 | 187 | #TabsToolbar .titlebar-buttonbox { 188 | margin-right: 2px !important; 189 | margin-left: 0px !important; 190 | } 191 | 192 | #TabsToolbar .titlebar-button { 193 | background-color: transparent !important; 194 | appearance: none !important; 195 | padding: 0px !important; 196 | margin: 0 !important; 197 | padding-left: 0px !important; 198 | padding-right: 0px !important; 199 | } 200 | 201 | #TabsToolbar .titlebar-close { 202 | appearance: none !important; 203 | -moz-box-ordinal-group: 2 !important; 204 | order:2 !important; 205 | } 206 | 207 | #TabsToolbar .titlebar-min { 208 | appearance: none !important; 209 | -moz-box-ordinal-group: 0 !important; 210 | order:0 !important; 211 | } 212 | 213 | #TabsToolbar .titlebar-max, 214 | #TabsToolbar .titlebar-restore { 215 | appearance: none !important; 216 | -moz-box-ordinal-group: 1 !important; 217 | order:1!important; 218 | } 219 | 220 | #TabsToolbar .titlebar-buttonbox-container:not(:hover) .titlebar-buttonbox .titlebar-button { 221 | background-color: hsla(0, 0%, 65%, 1) !important; 222 | transition: background-color 400ms ease 400ms !important; 223 | } 224 | 225 | #TabsToolbar .titlebar-buttonbox-container .titlebar-button > .toolbarbutton-icon { 226 | list-style-image: none !important; 227 | margin: 0px !important; 228 | padding: 0px !important; 229 | } 230 | 231 | #TabsToolbar .titlebar-buttonbox-container .titlebar-buttonbox .titlebar-button { 232 | border-radius: 50% !important; 233 | margin-left: 8px !important; 234 | position: relative !important; 235 | } 236 | 237 | #TabsToolbar .titlebar-buttonbox-container .titlebar-min{ 238 | background-color: #fac536 !important; 239 | overflow: hidden !important; 240 | transition: background-color 200ms ease !important; 241 | } 242 | 243 | #TabsToolbar .titlebar-buttonbox-container .titlebar-min::before{ 244 | content: ''; 245 | position: absolute; 246 | top: 100%; 247 | left: 50%; 248 | transform: translate(-50%, -50%); 249 | width: 70%; 250 | height: 2px; 251 | opacity: 0; 252 | background: rgba(0, 0, 0, 0.6); 253 | border-radius: 2px; 254 | transition: 200ms; 255 | } 256 | 257 | #TabsToolbar .titlebar-buttonbox-container .titlebar-min:hover::before{ 258 | opacity: 1; 259 | top: 50%; 260 | } 261 | 262 | #TabsToolbar .titlebar-buttonbox-container .titlebar-max, 263 | #TabsToolbar .titlebar-buttonbox-container .titlebar-restore{ 264 | background: #39ea49 !important; 265 | overflow: hidden !important; 266 | transition: background-color 200ms ease !important; 267 | } 268 | #TabsToolbar .titlebar-buttonbox-container .titlebar-max::before{ 269 | content: ''; 270 | position: absolute; 271 | top: 100%; 272 | left: 50%; 273 | transform: translate(-50%, -50%); 274 | width: 55%; 275 | height: 55%; 276 | opacity: 0; 277 | background: rgba(0, 0, 0, 0.6); 278 | border-radius: 2px; 279 | transition: 200ms; 280 | } 281 | #TabsToolbar .titlebar-buttonbox-container .titlebar-max::after{ 282 | content: ''; 283 | position: absolute; 284 | top: 100%; 285 | left: 50%; 286 | transform: translate(-50%, -50%) rotate(-45deg); 287 | width: 3px; 288 | height: 80%; 289 | opacity: 0; 290 | background: #39ea49; 291 | transition: 200ms; 292 | } 293 | #TabsToolbar .titlebar-buttonbox-container .titlebar-max:hover::before, 294 | #TabsToolbar .titlebar-buttonbox-container .titlebar-max:hover::after{ 295 | opacity: 1; 296 | top: 50%; 297 | } 298 | #TabsToolbar .titlebar-buttonbox-container .titlebar-close{ 299 | background: #f25056 !important; 300 | overflow: hidden !important; 301 | transition: background-color 200ms ease !important; 302 | } 303 | #TabsToolbar .titlebar-buttonbox-container .titlebar-close::before{ 304 | content: ''; 305 | position: absolute; 306 | top: 100%; 307 | left: 50%; 308 | transform: translate(-50%, -50%) rotate(-45deg); 309 | width: 2px; 310 | height: 9px; 311 | opacity: 0; 312 | background: rgba(0, 0, 0, 0.65); 313 | border-radius: 1px; 314 | transition: 200ms; 315 | } 316 | #TabsToolbar .titlebar-buttonbox-container .titlebar-close::after{ 317 | content: ''; 318 | position: absolute; 319 | top: 100%; 320 | left: 50%; 321 | transform: translate(-50%, -50%) rotate(45deg); 322 | width: 2px; 323 | height: 9px; 324 | opacity: 0; 325 | background: rgba(0, 0, 0, 0.65); 326 | border-radius: 1px; 327 | transition: 200ms; 328 | 329 | } 330 | #TabsToolbar .titlebar-buttonbox-container .titlebar-close:hover::before, 331 | #TabsToolbar .titlebar-buttonbox-container .titlebar-close:hover::after{ 332 | opacity: 1; 333 | top: 50%; 334 | } 335 | 336 | #TabsToolbar .titlebar-buttonbox-container .titlebar-restore:before { 337 | content: ''; 338 | position: absolute; 339 | top: 100%; 340 | left: 50%; 341 | transform: translate(-50%, -50%); 342 | width: 8px; 343 | height: 8px; 344 | opacity: 0; 345 | background: rgba(0, 0, 0, 0.65); 346 | border-radius: 2px; 347 | transition:200ms; 348 | } 349 | 350 | #TabsToolbar .titlebar-buttonbox-container .titlebar-restore:after{ 351 | content: ''; 352 | position: absolute; 353 | top: 100%; 354 | left: 50%; 355 | transform: translate(-50%, -50%); 356 | width: 4px; 357 | height: 4px; 358 | opacity: 0; 359 | background: #39ea49; 360 | border-radius: 0px; 361 | transition: 200ms; 362 | } 363 | 364 | #TabsToolbar .titlebar-buttonbox-container .titlebar-restore:hover::before, 365 | #TabsToolbar .titlebar-buttonbox-container .titlebar-restore:hover::after{ 366 | opacity: 1; 367 | top: 50%; 368 | } 369 | 370 | #navigator-toolbox #TabsToolbar .titlebar-buttonbox-container { 371 | -moz-box-ordinal-group: 1 !important; 372 | } 373 | #navigator-toolbox[inFullscreen] #navigator-toolbox #TabsToolbar .titlebar-buttonbox-container { 374 | -moz-box-ordinal-group: 1 !important; 375 | } 376 | 377 | @media only screen and (max-width: 370px) { 378 | #main-window #navigator-toolbox:not([inFullscreen]) 379 | #TabsToolbar 380 | .titlebar-buttonbox-container { 381 | visibility: visible !important; 382 | position: relative !important; 383 | padding-top: 4px !important; 384 | padding-bottom: 2px !important; 385 | padding-right: 8px !important; 386 | padding-left: 2px !important; 387 | } 388 | 389 | #main-window #navigator-toolbox:not([inFullscreen]) #nav-bar { 390 | padding-right: initial !important; 391 | } 392 | } 393 | 394 | /*------------------------------------------------*/ 395 | /* Make Tab Bar join with URL Bar on the left */ 396 | 397 | :root { 398 | --tab-border-radius: 3px !important; 399 | --NavbarWidth: 2; 400 | --TabsHeight: 36; 401 | --TabsBorder: 8; 402 | --NavbarHeightSmall: calc(var(--TabsHeight) + var(--TabsBorder)) 403 | } 404 | 405 | #nav-bar { 406 | margin-top:calc(var(--TabsHeight) * -1px - var(--TabsBorder) * 1px)!important; 407 | height: calc((var(--TabsHeight) * 1px + var(--TabsBorder) * 1px) + 0px) 408 | } 409 | 410 | 411 | 412 | #nav-bar { 413 | margin-left: 35px !important; 414 | } 415 | 416 | #urlbar-container { 417 | min-width: 0px !important; 418 | flex: auto !important; 419 | } 420 | 421 | 422 | @media screen and (max-width:100px) { 423 | #TabsToolbar { 424 | margin-right: 0 !important; 425 | } 426 | #nav-bar { 427 | margin-left: 0 !important; 428 | } 429 | } 430 | 431 | /* Fix for Firefox 123 */ 432 | #nav-bar:not([tabs-hidden="true"]) 433 | { 434 | position: static !important;; 435 | } 436 | 437 | #nav-bar-customization-target, 438 | #PanelUI-button { 439 | position: relative !important; 440 | z-index: 3 !important; 441 | } 442 | 443 | /*------------------------------------------------*/ 444 | /* Make active tab to hidden tab */ 445 | 446 | tab:not([selected="true"]), 447 | [part="overflow-start-indicator"], 448 | [part="overflow-end-indicator"], 449 | #scrollbutton-up, 450 | #scrollbutton-down, 451 | #TabsToolbar .titlebar-spacer, 452 | .tabbrowser-tab[selected="true"] .tab-text, 453 | .tabbrowser-tab[selected="true"] .tab-close-button, 454 | .tab-line, 455 | .tab-throbber { 456 | display: none !important; 457 | } 458 | 459 | .tabbrowser-tab[selected="true"] { 460 | min-width: 37px !important; 461 | max-width: 37px !important; 462 | } 463 | 464 | tab, 465 | .tabbrowser-tab { 466 | padding-left: 0 !important; 467 | margin-left: 0 !important; 468 | } 469 | 470 | .tab-background { 471 | outline: none !important; 472 | box-shadow: none !important; 473 | } 474 | 475 | .tab-icon-image { 476 | height: 32px !important; 477 | width: 32px !important; 478 | border-radius: 10px !important; 479 | } 480 | 481 | @media (prefers-color-scheme: dark) { 482 | .tab-icon-image { 483 | content: url('dark.png') !important; 484 | } 485 | } 486 | 487 | @media (prefers-color-scheme: light) { 488 | .tab-icon-image { 489 | content: url('light.png') !important; 490 | } 491 | } 492 | 493 | 494 | /*------------------------------------------------*/ 495 | /* Hide all buttons in active tab context menu except for split tab and extensions */ 496 | 497 | #main-window #context_openANewTab, 498 | #main-window #context_reloadTab, 499 | #main-window #context_toggleMuteTab, 500 | #main-window #context_playTab, 501 | #main-window #context_pinTab, 502 | #main-window #context_duplicateTab, 503 | #main-window #context_bookmarkTab, 504 | #main-window #context_moveTabOptions, 505 | #main-window #context_reopenInContainer, 506 | #main-window #context_toggleToPrivateContainer, 507 | #main-window #context_selectAllTabs, 508 | #main-window #context_closeTab, 509 | #main-window #context_closeTabOptions, 510 | #main-window #context_undoCloseTab, 511 | #context_MoveTabToOtherWorkspace, 512 | #main-window #tabContextMenu menuseparator { 513 | display: none !important; 514 | } 515 | 516 | 517 | 518 | /*============================================================================================*/ 519 | /* EXTENSION */ 520 | 521 | /* Make extensions looks minimal */ 522 | 523 | #unified-extensions-view #unified-extensions-manage-extensions .toolbarbutton-text::before { 524 | content: "• • •"; 525 | font-size: 15px; 526 | visibility: visible !important; 527 | display: block; 528 | text-align: center; 529 | } 530 | 531 | #unified-extensions-panel #unified-extensions-view { 532 | width: 100% !important; 533 | } 534 | 535 | #unified-extensions-view{ 536 | --uei-icon-size: 22px; 537 | --firefoxcss-number-of-extensions-in-a-row: 4; 538 | } 539 | 540 | 541 | #unified-extensions-view .unified-extensions-item-menu-button.subviewbutton, 542 | #unified-extensions-view .unified-extensions-item-action-button .unified-extensions-item-contents{ 543 | display:none !important; 544 | } 545 | 546 | #unified-extensions-view .panel-subview-body { 547 | padding: 10px !important; 548 | } 549 | 550 | #unified-extensions-view .unified-extensions-item .unified-extensions-item-icon, 551 | #unified-extensions-view .unified-extensions-item .toolbarbutton-badge-stack { 552 | margin-inline-end: 0px !important; 553 | } 554 | 555 | #unified-extensions-view #overflowed-extensions-list, 556 | #unified-extensions-view #unified-extensions-area, 557 | #unified-extensions-view .unified-extensions-list { 558 | display: grid !important; 559 | grid-template-columns: repeat(var(--firefoxcss-number-of-extensions-in-a-row),auto); 560 | justify-items:left !important; 561 | align-items:left !important; 562 | } 563 | 564 | 565 | 566 | /*============================================================================================*/ 567 | /* URL BAR */ 568 | 569 | /* Make text in URL bar in the center */ 570 | 571 | #nav-bar { 572 | display: flex; 573 | justify-content: center; 574 | } 575 | 576 | #urlbar-container { 577 | flex: 1; 578 | max-width: 1000px; 579 | min-width: 200px; 580 | margin: auto !important; 581 | } 582 | 583 | #main-window #urlbar { 584 | z-index: 9999 !important; 585 | width: 100% !important; 586 | margin-top: 0 !important; 587 | margin-left: 0 !important; 588 | margin-right: 0 !important; 589 | transition: width 0.3s ease, left 0.3s ease, margin-top 0.3s ease, margin-left 0.3s ease, margin-right 0.3s ease; 590 | } 591 | 592 | #main-window #urlbar[breakout][breakout-extend] { 593 | opacity: 0.97 !important; 594 | width: 100% !important; 595 | left: 0; 596 | right: 0; 597 | margin-left: auto !important; 598 | margin-right: auto !important; 599 | margin-top: 30vh !important; 600 | transition: width 0.3s ease, left 0.3s ease, margin-top 0.3s ease, margin-left 0.3s ease, margin-right 0.3s ease; 601 | } 602 | 603 | #urlbar-background, 604 | #urlbar-input-container { 605 | --toolbarbutton-border-radius: calc(var(--urlbar-min-height) / 2); 606 | } 607 | 608 | #urlbar-input-container { 609 | --urlbar-icon-border-radius: calc(var(--toolbarbutton-border-radius) - 1px); 610 | } 611 | 612 | #urlbar:not([focused]) #urlbar-input { 613 | text-align: center !important; 614 | } 615 | 616 | #urlbar:not([breakout][breakout-extend]) #urlbar-input { 617 | text-align: center !important; 618 | } 619 | 620 | /*------------------------------------------------*/ 621 | /* Change URL Bar background color */ 622 | @media (prefers-color-scheme: dark) { 623 | #urlbar-background { 624 | background-color: #2a2a2a !important; 625 | } 626 | } 627 | 628 | @media (prefers-color-scheme: light) { 629 | #urlbar-background { 630 | background-color: #d6d6d6 !important; 631 | } 632 | } 633 | 634 | @media (prefers-color-scheme: dark) { 635 | #urlbar-results > *[selected=""] { 636 | background-color: #424242 !important; 637 | } 638 | } 639 | 640 | @media (prefers-color-scheme: light) { 641 | #urlbar-results > *[selected=""] { 642 | background-color: #e8e8e8 !important; 643 | } 644 | } 645 | 646 | 647 | /*------------------------------------------------*/ 648 | /* Hide and Hover icons in URL Bar */ 649 | 650 | #nav-bar:not([customizing="true"]):not(.searchButton) 651 | > #nav-bar-customization-target 652 | > #urlbar-container:not(:hover) 653 | > #urlbar:not([focused]) 654 | > #urlbar-input-container 655 | > #page-action-buttons 656 | .urlbar-page-action { 657 | opacity: 0; 658 | transition-delay: 500ms; 659 | } 660 | 661 | #nav-bar:not([customizing="true"]):not(.searchButton) 662 | > #nav-bar-customization-target 663 | > #urlbar-container:not(:hover) 664 | > #urlbar:not([focused]) 665 | > #urlbar-input-container 666 | > #identity-box 667 | > #identity-permission-box:not([open]) { 668 | opacity: 0; 669 | transition-delay: 500ms; 670 | } 671 | 672 | #page-action-buttons .urlbar-page-action, 673 | #identity-permission-box, 674 | #notification-popup-box .notification-anchor-icon { 675 | transition: opacity 0.2s ease; 676 | } 677 | 678 | #urlbar #identity-icon-box, 679 | #urlbar #identity-permission-box { 680 | opacity: 0 !important; 681 | margin-inline-start: calc(-16px - 2 * var(--urlbar-icon-padding)); 682 | transition: margin-inline-start 100ms linear, opacity 200ms linear; 683 | } 684 | 685 | #urlbar #identity-box.notSecureText #identity-icon-box { 686 | margin-inline-start: initial !important; 687 | opacity: 1 !important; 688 | color: #e36f6f !important; 689 | } 690 | 691 | #urlbar #identity-box.extensionPage #identity-icon-box { 692 | margin-inline-start: initial !important; 693 | opacity: 1 !important; 694 | } 695 | 696 | #identity-box:hover #identity-icon-box, 697 | #identity-box:hover #identity-permission-box, 698 | #identity-box #identity-permission-box[open="true"] { 699 | opacity: 1 !important; 700 | margin-inline-start: initial !important; 701 | } 702 | 703 | #urlbar-input-container .urlbar-input-box { 704 | padding-inline-start: 2px !important; 705 | } 706 | 707 | #identity-box:hover ~ .urlbar-input-box > #urlbar-input { 708 | mask-image: linear-gradient(to right, transparent, black 3ch) !important; 709 | } 710 | 711 | #page-action-buttons { 712 | padding-inline-start: 8px; 713 | } 714 | 715 | #page-action-buttons .urlbar-page-action { 716 | margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding)); 717 | opacity: 0; 718 | transition: margin-inline-end 100ms linear, opacity 200ms linear; 719 | } 720 | 721 | #page-action-buttons:hover > .urlbar-page-action, 722 | .urlbar-page-action[open], 723 | .urlbar-page-action[open] ~ .urlbar-page-action { 724 | opacity: 1; 725 | margin-inline-end: 0px !important; 726 | } 727 | 728 | #identity-box.chromeUI #identity-icon-box { 729 | opacity: 1 !important; 730 | margin-inline-start: initial; 731 | } 732 | 733 | #identity-box.chromeUI::after, 734 | #identity-box.chromeUI:hover::after { 735 | opacity: 0 !important; 736 | } 737 | 738 | #page-action-buttons:not(:hover) #translations-button[translationsactive="true"]:not([open]) { 739 | visibility:collapse !important; 740 | } 741 | 742 | 743 | /*------------------------------------------------*/ 744 | /* Create visual dots on both sides */ 745 | #identity-box::after, 746 | #page-action-buttons::before { 747 | position: relative; 748 | content: "•••"; 749 | pointer-events: none; 750 | transition: opacity 100ms ease; 751 | align-self: center; 752 | font-size: 0.7em; 753 | } 754 | 755 | #identity-box::after, 756 | #page-action-buttons::before { 757 | opacity: 0.2; 758 | } 759 | 760 | #identity-box::after { 761 | transform: rotate(90deg); 762 | left: 4px; 763 | } 764 | 765 | #page-action-buttons::before { 766 | transform: rotate(-90deg); 767 | right: 4px; 768 | } 769 | 770 | #identity-box:hover::after, 771 | #page-action-buttons:hover::before { 772 | opacity: 0.2 !important; 773 | transition: opacity 50ms ease; 774 | pointer-events: none; 775 | } 776 | 777 | #identity-box[pageproxystate="invalid"]::after, 778 | #urlbar-input-container[pageproxystate="invalid"] 779 | > #page-action-buttons::before { 780 | opacity: 0 !important; 781 | transition: opacity 50ms ease; 782 | } 783 | 784 | /* Linux changes for visual dots */ 785 | @media (-moz-platform: linux) { 786 | #identity-box::after, 787 | #page-action-buttons::before { 788 | content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>'); 789 | transform: none; 790 | font-size: unset; 791 | } 792 | 793 | #page-action-buttons::before { 794 | right: 2px; 795 | } 796 | 797 | #identity-box::after { 798 | left: 2px; 799 | } 800 | } 801 | 802 | #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button, 803 | #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button, 804 | #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button, 805 | #urlbar-label-box, 806 | #urlbar-zoom-button { 807 | background-color: var(--firefoxcss-item-bg-color) !important; 808 | } 809 | 810 | #urlbar-zoom-button:hover { 811 | background-color: var(--firefoxcss-urlbar-zoom-button) !important; 812 | } 813 | 814 | #urlbar-input-container #identity-box > .identity-box-button, 815 | #tracking-protection-icon-container, 816 | #urlbar-go-button, 817 | #page-action-buttons .urlbar-page-action, 818 | #notification-popup-box { 819 | border-radius: 8px !important; 820 | } 821 | 822 | #urlbar-go-button, 823 | #tracking-protection-icon-container 824 | { 825 | display: none !important; 826 | } 827 | 828 | 829 | 830 | /*============================================================================================*/ 831 | /* BOOKMARK BAR */ 832 | 833 | /* Variables for toolbar & bookmark attributes */ 834 | :root { 835 | --uc-bm-height: 24px; 836 | --uc-bm-padding: 6px; 837 | } 838 | 839 | /* Style for Personal Toolbar */ 840 | #PersonalToolbar { 841 | position: relative !important; 842 | padding: 1px 6px !important; 843 | } 844 | 845 | /* Additional padding for touch density */ 846 | :root[uidensity="touch"] #PersonalToolbar { 847 | --uc-bm-padding: 6px; 848 | } 849 | 850 | /* Transform and delay transition of Personal Toolbar */ 851 | #PersonalToolbar:not([customizing]) { 852 | margin-bottom: calc(2px - var(--uc-bm-height) - 2 * var(--uc-bm-padding)) !important; 853 | transform: rotateX(90deg) !important; 854 | transform-origin: top !important; 855 | transition: transform 0.1s ease-in-out 0.6s !important; 856 | z-index: 2 !important; 857 | } 858 | 859 | /* Bookmark item padding and icon transition */ 860 | #PlacesToolbarItems > .bookmark-item { 861 | padding-block: var(--uc-bm-padding) !important; 862 | padding-left: 6px !important; 863 | padding-right: 6px !important; 864 | } 865 | #PlacesToolbarItems > .bookmark-item .toolbarbutton-icon { 866 | transition: opacity 0.1s ease-in-out 0.4s !important; 867 | opacity: 0 !important; 868 | } 869 | 870 | /* Hover effect for toolbar and bookmark icon/text */ 871 | #navigator-toolbox:hover > #PersonalToolbar, 872 | #navigator-toolbox:hover #PlacesToolbarItems > .bookmark-item .toolbarbutton-icon, 873 | #navigator-toolbox:hover #PlacesToolbarItems > .bookmark-item .toolbarbutton-text { 874 | transition-delay: 100ms !important; 875 | transform: rotateX(0) !important; 876 | opacity: 1 !important; 877 | } 878 | 879 | /* Bookmark item text transition */ 880 | #PlacesToolbarItems > .bookmark-item .toolbarbutton-text { 881 | transition: opacity 0.1s ease-in-out 0.4s !important; 882 | opacity: 0 !important; 883 | } 884 | 885 | /* Fix the white line above the bookmarks bar when it's empty */ 886 | #personal-toolbar-empty { 887 | padding: 2px !important; 888 | } 889 | 890 | /*------------------------------------------------*/ 891 | /* Make it good in transparent bg */ 892 | 893 | @media (prefers-color-scheme: dark) { 894 | #PlacesToolbarItems > * { 895 | background: #333333 !important; 896 | } 897 | 898 | #PlacesToolbarItems > *:hover { 899 | background: #555555 !important; 900 | } 901 | } 902 | 903 | @media (prefers-color-scheme: light) { 904 | #PlacesToolbarItems > * { 905 | background: #cccccc !important; 906 | } 907 | 908 | #PlacesToolbarItems > *:hover { 909 | background: #eeeeee !important; 910 | } 911 | } 912 | 913 | 914 | 915 | /*============================================================================================*/ 916 | /* SIDE BAR */ 917 | 918 | /* Expand Side bar on hover */ 919 | 920 | #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] { 921 | --sidebar-width: 40px; 922 | --sidebar-hover-width: 512px; 923 | position: relative; 924 | min-width: var(--sidebar-width) !important; 925 | width: var(--sidebar-width) !important; 926 | max-width: var(--sidebar-width) !important; 927 | z-index: 1; 928 | } 929 | 930 | #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]>#sidebar { 931 | transition: min-width 200ms ease-in-out !important; 932 | min-width: var(--sidebar-width) !important; 933 | will-change: min-width; 934 | transition-delay: 0.3s !important; /* Delay on hover off */ 935 | } 936 | 937 | #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover>#sidebar { 938 | min-width: var(--sidebar-hover-width) !important; 939 | transition-delay: 0.1s !important; /* No delay on hover on */ 940 | } 941 | 942 | #sidebar-box { 943 | opacity: 0.9; 944 | 945 | } 946 | 947 | /*------------------------------------------------*/ 948 | /* Hide Side bar header and line */ 949 | 950 | #sidebar-header, 951 | #sidebar-splitter { 952 | display: none !important; 953 | } 954 | 955 | /*------------------------------------------------*/ 956 | /* Sidebar Border */ 957 | 958 | @media (prefers-color-scheme: dark) { 959 | #sidebar-box #sidebar, 960 | #sidebar-box #webextpanels-window { 961 | border-radius: 15px !important; 962 | margin: 15px 15px 15px 5px !important; 963 | border: 3px solid rgba(204, 204, 204, 0.3); 964 | transition: border 0.3s ease; 965 | box-shadow: 0 0 10px 5px rgba(0,0,0,0.5); 966 | } 967 | 968 | #sidebar-box #sidebar:hover, 969 | #sidebar-box #webextpanels-:hover { 970 | border: 3px solid rgba(204, 204, 204, 0.6); 971 | box-shadow: 0 0 10px 5px rgba(0,0,0,0.5); 972 | } 973 | } 974 | 975 | @media (prefers-color-scheme: light) { 976 | #sidebar-box #sidebar, 977 | #sidebar-box #webextpanels-window { 978 | border-radius: 15px !important; 979 | margin: 15px 15px 15px 5px !important; 980 | border: 3px solid rgba(51, 51, 51, 0.1); 981 | transition: border 0.3s ease; 982 | box-shadow: 0 0 10px 5px rgba(255,255,255,0.5); 983 | } 984 | 985 | #sidebar-box #sidebar:hover, 986 | #sidebar-box #webextpanels-window:hover { 987 | border: 3px solid rgba(51, 51, 51, 0.6); 988 | box-shadow: 0 0 10px 5px rgba(255,255,255,0.5); 989 | } 990 | } 991 | 992 | /*============================================================================================*/ 993 | /* SIDE BAR 2 (FLOORP) */ 994 | 995 | /* Make splitter invisible */ 996 | 997 | #sidebar-splitter2 { 998 | appearance: none !important; 999 | width: 10px !important;; /* Set initial width */ 1000 | transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Add transitions */ 1001 | } 1002 | 1003 | #sidebar-splitter2:hover { 1004 | width: 20px !important; /* Width on hover */ 1005 | opacity: 1; /* Opacity on hover */ 1006 | } 1007 | 1008 | 1009 | /*------------------------------------------------*/ 1010 | /* Hide Floorp sidebar header */ 1011 | 1012 | #sidebar2-header { 1013 | max-height: 0.5em !important; 1014 | min-height: 0.5em !important; 1015 | opacity: 0 !important; 1016 | transition: max-height 0.3s ease-in-out, min-height 0.3s ease-in-out, opacity 0.3s ease-in-out; 1017 | } 1018 | 1019 | #sidebar2-header:hover { 1020 | max-height: 2.5em !important; 1021 | min-height: 2.5em !important; 1022 | opacity: 1 !important; 1023 | } 1024 | 1025 | 1026 | /*------------------------------------------------*/ 1027 | /* Floorp Sidebar Border */ 1028 | 1029 | @media (prefers-color-scheme: dark) { 1030 | #sidebar2-box browser { 1031 | border-radius: 15px !important; 1032 | margin: 15px 15px 15px 0px !important; 1033 | border: 3px solid rgba(0, 0, 0, 0); 1034 | transition: border 0.3s ease; 1035 | box-shadow: 0 0 10px 5px rgba(0,0,0,0.5); 1036 | } 1037 | 1038 | #sidebar2-box browser:hover { 1039 | border: 3px solid rgba(204, 204, 204, 0.6); 1040 | box-shadow: 0 0 10px 5px rgba(0,0,0,0.2); 1041 | } 1042 | } 1043 | 1044 | @media (prefers-color-scheme: light) { 1045 | #sidebar2-box browser { 1046 | border-radius: 15px !important; 1047 | margin: 15px 15px 15px 0px !important; 1048 | border: 3px solid rgba(51, 51, 51, 0.1); 1049 | transition: border 0.3s ease; 1050 | box-shadow: 0 0 10px 5px rgba(255,255,255,0.5); 1051 | } 1052 | 1053 | #sidebar2-box browser:hover { 1054 | border: 3px solid rgba(51, 51, 51, 0.6); 1055 | box-shadow: 0 0 10px 5px rgba(255,255,255,0.2); 1056 | } 1057 | } 1058 | 1059 | /*------------------------------------------------*/ 1060 | /* Floorp Sidebar Select Box Styling */ 1061 | 1062 | #sidebar-select-box { 1063 | align-items: center !important; 1064 | background-color: transparent !important; 1065 | } 1066 | 1067 | .sidepanel-icon { 1068 | border-radius: 10px !important; 1069 | } 1070 | 1071 | /*------------------------------------------------*/ 1072 | /* Floorp Sidebar Border */ 1073 | 1074 | @media (prefers-color-scheme: dark) { 1075 | #sidebar-select-box { 1076 | border-radius: 15px !important; 1077 | margin: 15px 10px 15px 15px !important; 1078 | border: 3px solid rgba(204, 204, 204, 0) !important; 1079 | transition: border 0.3s ease; 1080 | box-shadow: 0 0 10px 5px rgba(0,0,0,0.5); 1081 | } 1082 | 1083 | #sidebar-select-box:hover { 1084 | border: 3px solid rgba(204, 204, 204, 0.6) !important; 1085 | box-shadow: 0 0 10px 5px rgba(0,0,0,0.5); 1086 | } 1087 | } 1088 | 1089 | @media (prefers-color-scheme: light) { 1090 | #sidebar-select-box { 1091 | border-radius: 15px !important; 1092 | margin: 15px 10px 15px 15px !important; 1093 | border: 3px solid rgba(51, 51, 51, 0.1) !important; 1094 | transition: border 0.3s ease; 1095 | box-shadow: 0 0 10px 5px rgba(255,255,255,0.5); 1096 | } 1097 | 1098 | #sidebar-select-box:hover { 1099 | border: 3px solid rgba(51, 51, 51, 0.6) !important; 1100 | box-shadow: 0 0 10px 5px rgba(255,255,255,0.5); 1101 | } 1102 | } 1103 | 1104 | /*------------------------------------------------*/ 1105 | /* Hide random stuff coming out of Floorp Sidebar */ 1106 | 1107 | .browser-sidebar2 { 1108 | border: none !important; 1109 | border-bottom: none !important; 1110 | } 1111 | 1112 | #sidebar2-box[style="min-width: 0px; order: 6; width: 415px; max-width: 0px;"] > * { 1113 | display: none !important; 1114 | } 1115 | 1116 | /*============================================================================================*/ 1117 | /* MAIN BROWSER */ 1118 | 1119 | /* Browser Border */ 1120 | 1121 | @media (prefers-color-scheme: dark) { 1122 | #main-window:not([sizemode="fullscreen"]) #appcontent browser { 1123 | border-radius: 15px !important; 1124 | margin: 15px 15px 15px 15px !important; 1125 | border: 3px solid rgba(0, 0, 0, 0); 1126 | transition: border 0.3s ease; 1127 | box-shadow: 0 0 10px 5px rgba(0,0,0,0.5); 1128 | clip-path: circle(80%) !important; 1129 | } 1130 | 1131 | #main-window:not([sizemode="fullscreen"]) #appcontent browser:hover { 1132 | border: 3px solid rgba(204, 204, 204, 0.6); 1133 | box-shadow: 0 0 10px 5px rgba(0,0,0,0.5); 1134 | } 1135 | } 1136 | 1137 | @media (prefers-color-scheme: light) { 1138 | #main-window:not([sizemode="fullscreen"]) #appcontent browser { 1139 | border-radius: 15px !important; 1140 | margin: 15px 15px 15px 15px !important; 1141 | border: 3px solid rgba(51, 51, 51, 0.1); 1142 | transition: border 0.3s ease; 1143 | box-shadow: 0 0 10px 5px rgba(255,255,255,0.5); 1144 | clip-path: circle(80%) !important; 1145 | } 1146 | 1147 | #main-window:not([sizemode="fullscreen"]) #appcontent browser:hover { 1148 | border: 3px solid rgba(51, 51, 51, 0.6); 1149 | box-shadow: 0 0 10px 5px rgba(255,255,255,0.5); 1150 | } 1151 | } 1152 | 1153 | /*============================================================================================*/ 1154 | /* FIND BAR */ 1155 | 1156 | /* CTRL+F Search Bar Border */ 1157 | 1158 | @media (prefers-color-scheme: dark) { 1159 | .browserContainer > findbar { 1160 | border-radius: 15px !important; 1161 | margin: 0px 15px 0px 15px !important; 1162 | border: 3px solid rgba(204, 204, 204, 0.3) !important; 1163 | transition: border 0.3s ease !important; 1164 | box-shadow: 0 0 10px 5px rgba(0,0,0,0.5); 1165 | } 1166 | 1167 | .browserContainer > findbar:hover { 1168 | border: 3px solid #ccc !important; 1169 | box-shadow: 0 0 10px 5px rgba(0,0,0,0.5); 1170 | } 1171 | } 1172 | 1173 | @media (prefers-color-scheme: light) { 1174 | .browserContainer > findbar { 1175 | border-radius: 15px !important; 1176 | margin: 0px 15px 0px 15px !important; 1177 | border: 3px solid rgba(51, 51, 51, 0.1) !important; 1178 | transition: border 0.3s ease !important; 1179 | box-shadow: 0 0 10px 5px rgba(255,255,255,0.5); 1180 | } 1181 | 1182 | .browserContainer > findbar:hover { 1183 | border: 3px solid rgba(51, 51, 51, 0.6) !important; 1184 | box-shadow: 0 0 10px 5px rgba(255,255,255,0.5); 1185 | } 1186 | } 1187 | 1188 | /*------------------------------------------------*/ 1189 | /* Text in the center */ 1190 | .browserContainer > findbar .findbar-textbox { 1191 | border-radius: 10px !important; 1192 | text-align: center !important; 1193 | } 1194 | 1195 | 1196 | 1197 | 1198 | --------------------------------------------------------------------------------