├── LICENSE ├── README.md ├── arcline-pages ├── arcline-pages.css └── modules │ ├── pdfjs.css │ └── preload.css ├── arcline ├── Arcline.css └── modules │ ├── compact-mode-full-screen-mode.css │ ├── control-button-left.css │ ├── control-button-right.css │ ├── findbar.css │ ├── pinned-extensions.css │ ├── pip.css │ ├── sidebar-attached.css │ ├── sidebar-dark-tinted.css │ ├── sidebar-dark.css │ ├── sidebar-floating.css │ ├── sidebar-glass-tinted.css │ ├── sidebar-normal.css │ ├── ~arcline-adjustments-icons.css │ ├── ~context-menu.css │ ├── ~experiments.css │ ├── ~extras.css │ ├── ~features.css │ ├── ~fonts.css │ ├── ~url-bar.css │ └── ~workspace.css ├── image.png ├── preferences.json ├── theme.json ├── userChrome.css └── userContent.css /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | Preamble 9 | 10 | The GNU General Public License is a free, copyleft license for 11 | software and other kinds of works. 12 | 13 | The licenses for most software and other practical works are designed 14 | to take away your freedom to share and change the works. By contrast, 15 | the GNU General Public License is intended to guarantee your freedom to 16 | share and change all versions of a program--to make sure it remains free 17 | software for all its users. We, the Free Software Foundation, use the 18 | GNU General Public License for most of our software; it applies also to 19 | any other work released this way by its authors. You can apply it to 20 | your programs, too. 21 | 22 | When we speak of free software, we are referring to freedom, not 23 | price. Our General Public Licenses are designed to make sure that you 24 | have the freedom to distribute copies of free software (and charge for 25 | them if you wish), that you receive source code or can get it if you 26 | want it, that you can change the software or use pieces of it in new 27 | free programs, and that you know you can do these things. 28 | 29 | To protect your rights, we need to prevent others from denying you 30 | these rights or asking you to surrender the rights. Therefore, you have 31 | certain responsibilities if you distribute copies of the software, or if 32 | you modify it: responsibilities to respect the freedom of others. 33 | 34 | For example, if you distribute copies of such a program, whether 35 | gratis or for a fee, you must pass on to the recipients the same 36 | freedoms that you received. You must make sure that they, too, receive 37 | or can get the source code. And you must show them these terms so they 38 | know their rights. 39 | 40 | Developers that use the GNU GPL protect your rights with two steps: 41 | (1) assert copyright on the software, and (2) offer you this License 42 | giving you legal permission to copy, distribute and/or modify it. 43 | 44 | For the developers' and authors' protection, the GPL clearly explains 45 | that there is no warranty for this free software. For both users' and 46 | authors' sake, the GPL requires that modified versions be marked as 47 | changed, so that their problems will not be attributed erroneously to 48 | authors of previous versions. 49 | 50 | Some devices are designed to deny users access to install or run 51 | modified versions of the software inside them, although the manufacturer 52 | can do so. This is fundamentally incompatible with the aim of 53 | protecting users' freedom to change the software. The systematic 54 | pattern of such abuse occurs in the area of products for individuals to 55 | use, which is precisely where it is most unacceptable. Therefore, we 56 | have designed this version of the GPL to prohibit the practice for those 57 | products. If such problems arise substantially in other domains, we 58 | stand ready to extend this provision to those domains in future versions 59 | of the GPL, as needed to protect the freedom of users. 60 | 61 | Finally, every program is threatened constantly by software patents. 62 | States should not allow patents to restrict development and use of 63 | software on general-purpose computers, but in those that do, we wish to 64 | avoid the special danger that patents applied to a free program could 65 | make it effectively proprietary. To prevent this, the GPL assures that 66 | patents cannot be used to render the program non-free. 67 | 68 | The precise terms and conditions for copying, distribution and 69 | modification follow. 70 | 71 | TERMS AND CONDITIONS 72 | 73 | 0. Definitions. 74 | 75 | "This License" refers to version 3 of the GNU General Public License. 76 | 77 | "Copyright" also means copyright-like laws that apply to other kinds of 78 | works, such as semiconductor masks. 79 | 80 | "The Program" refers to any copyrightable work licensed under this 81 | License. Each licensee is addressed as "you". "Licensees" and 82 | "recipients" may be individuals or organizations. 83 | 84 | To "modify" a work means to copy from or adapt all or part of the work 85 | in a fashion requiring copyright permission, other than the making of an 86 | exact copy. The resulting work is called a "modified version" of the 87 | earlier work or a work "based on" the earlier work. 88 | 89 | A "covered work" means either the unmodified Program or a work based 90 | on the Program. 91 | 92 | To "propagate" a work means to do anything with it that, without 93 | permission, would make you directly or secondarily liable for 94 | infringement under applicable copyright law, except executing it on a 95 | computer or modifying a private copy. Propagation includes copying, 96 | distribution (with or without modification), making available to the 97 | public, and in some countries other activities as well. 98 | 99 | To "convey" a work means any kind of propagation that enables other 100 | parties to make or receive copies. Mere interaction with a user through 101 | a computer network, with no transfer of a copy, is not conveying. 102 | 103 | An interactive user interface displays "Appropriate Legal Notices" 104 | to the extent that it includes a convenient and prominently visible 105 | feature that (1) displays an appropriate copyright notice, and (2) 106 | tells the user that there is no warranty for the work (except to the 107 | extent that warranties are provided), that licensees may convey the 108 | work under this License, and how to view a copy of this License. If 109 | the interface presents a list of user commands or options, such as a 110 | menu, a prominent item in the list meets this criterion. 111 | 112 | 1. Source Code. 113 | 114 | The "source code" for a work means the preferred form of the work 115 | for making modifications to it. "Object code" means any non-source 116 | form of a work. 117 | 118 | A "Standard Interface" means an interface that either is an official 119 | standard defined by a recognized standards body, or, in the case of 120 | interfaces specified for a particular programming language, one that 121 | is widely used among developers working in that language. 122 | 123 | The "System Libraries" of an executable work include anything, other 124 | than the work as a whole, that (a) is included in the normal form of 125 | packaging a Major Component, but which is not part of that Major 126 | Component, and (b) serves only to enable use of the work with that 127 | Major Component, or to implement a Standard Interface for which an 128 | implementation is available to the public in source code form. A 129 | "Major Component", in this context, means a major essential component 130 | (kernel, window system, and so on) of the specific operating system 131 | (if any) on which the executable work runs, or a compiler used to 132 | produce the work, or an object code interpreter used to run it. 133 | 134 | The "Corresponding Source" for a work in object code form means all 135 | the source code needed to generate, install, and (for an executable 136 | work) run the object code and to modify the work, including scripts to 137 | control those activities. However, it does not include the work's 138 | System Libraries, or general-purpose tools or generally available free 139 | programs which are used unmodified in performing those activities but 140 | which are not part of the work. For example, Corresponding Source 141 | includes interface definition files associated with source files for 142 | the work, and the source code for shared libraries and dynamically 143 | linked subprograms that the work is specifically designed to require, 144 | such as by intimate data communication or control flow between those 145 | subprograms and other parts of the work. 146 | 147 | The Corresponding Source need not include anything that users 148 | can regenerate automatically from other parts of the Corresponding 149 | Source. 150 | 151 | The Corresponding Source for a work in source code form is that 152 | same work. 153 | 154 | 2. Basic Permissions. 155 | 156 | All rights granted under this License are granted for the term of 157 | copyright on the Program, and are irrevocable provided the stated 158 | conditions are met. This License explicitly affirms your unlimited 159 | permission to run the unmodified Program. The output from running a 160 | covered work is covered by this License only if the output, given its 161 | content, constitutes a covered work. This License acknowledges your 162 | rights of fair use or other equivalent, as provided by copyright law. 163 | 164 | You may make, run and propagate covered works that you do not 165 | convey, without conditions so long as your license otherwise remains 166 | in force. You may convey covered works to others for the sole purpose 167 | of having them make modifications exclusively for you, or provide you 168 | with facilities for running those works, provided that you comply with 169 | the terms of this License in conveying all material for which you do 170 | not control copyright. Those thus making or running the covered works 171 | for you must do so exclusively on your behalf, under your direction 172 | and control, on terms that prohibit them from making any copies of 173 | your copyrighted material outside their relationship with you. 174 | 175 | Conveying under any other circumstances is permitted solely under 176 | the conditions stated below. Sublicensing is not allowed; section 10 177 | makes it unnecessary. 178 | 179 | 3. Protecting Users' Legal Rights From Anti-Circumvention Law. 180 | 181 | No covered work shall be deemed part of an effective technological 182 | measure under any applicable law fulfilling obligations under article 183 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or 184 | similar laws prohibiting or restricting circumvention of such 185 | measures. 186 | 187 | When you convey a covered work, you waive any legal power to forbid 188 | circumvention of technological measures to the extent such circumvention 189 | is effected by exercising rights under this License with respect to 190 | the covered work, and you disclaim any intention to limit operation or 191 | modification of the work as a means of enforcing, against the work's 192 | users, your or third parties' legal rights to forbid circumvention of 193 | technological measures. 194 | 195 | 4. Conveying Verbatim Copies. 196 | 197 | You may convey verbatim copies of the Program's source code as you 198 | receive it, in any medium, provided that you conspicuously and 199 | appropriately publish on each copy an appropriate copyright notice; 200 | keep intact all notices stating that this License and any 201 | non-permissive terms added in accord with section 7 apply to the code; 202 | keep intact all notices of the absence of any warranty; and give all 203 | recipients a copy of this License along with the Program. 204 | 205 | You may charge any price or no price for each copy that you convey, 206 | and you may offer support or warranty protection for a fee. 207 | 208 | 5. Conveying Modified Source Versions. 209 | 210 | You may convey a work based on the Program, or the modifications to 211 | produce it from the Program, in the form of source code under the 212 | terms of section 4, provided that you also meet all of these conditions: 213 | 214 | a) The work must carry prominent notices stating that you modified 215 | it, and giving a relevant date. 216 | 217 | b) The work must carry prominent notices stating that it is 218 | released under this License and any conditions added under section 219 | 7. This requirement modifies the requirement in section 4 to 220 | "keep intact all notices". 221 | 222 | c) You must license the entire work, as a whole, under this 223 | License to anyone who comes into possession of a copy. This 224 | License will therefore apply, along with any applicable section 7 225 | additional terms, to the whole of the work, and all its parts, 226 | regardless of how they are packaged. This License gives no 227 | permission to license the work in any other way, but it does not 228 | invalidate such permission if you have separately received it. 229 | 230 | d) If the work has interactive user interfaces, each must display 231 | Appropriate Legal Notices; however, if the Program has interactive 232 | interfaces that do not display Appropriate Legal Notices, your 233 | work need not make them do so. 234 | 235 | A compilation of a covered work with other separate and independent 236 | works, which are not by their nature extensions of the covered work, 237 | and which are not combined with it such as to form a larger program, 238 | in or on a volume of a storage or distribution medium, is called an 239 | "aggregate" if the compilation and its resulting copyright are not 240 | used to limit the access or legal rights of the compilation's users 241 | beyond what the individual works permit. Inclusion of a covered work 242 | in an aggregate does not cause this License to apply to the other 243 | parts of the aggregate. 244 | 245 | 6. Conveying Non-Source Forms. 246 | 247 | You may convey a covered work in object code form under the terms 248 | of sections 4 and 5, provided that you also convey the 249 | machine-readable Corresponding Source under the terms of this License, 250 | in one of these ways: 251 | 252 | a) Convey the object code in, or embodied in, a physical product 253 | (including a physical distribution medium), accompanied by the 254 | Corresponding Source fixed on a durable physical medium 255 | customarily used for software interchange. 256 | 257 | b) Convey the object code in, or embodied in, a physical product 258 | (including a physical distribution medium), accompanied by a 259 | written offer, valid for at least three years and valid for as 260 | long as you offer spare parts or customer support for that product 261 | model, to give anyone who possesses the object code either (1) a 262 | copy of the Corresponding Source for all the software in the 263 | product that is covered by this License, on a durable physical 264 | medium customarily used for software interchange, for a price no 265 | more than your reasonable cost of physically performing this 266 | conveying of source, or (2) access to copy the 267 | Corresponding Source from a network server at no charge. 268 | 269 | c) Convey individual copies of the object code with a copy of the 270 | written offer to provide the Corresponding Source. This 271 | alternative is allowed only occasionally and noncommercially, and 272 | only if you received the object code with such an offer, in accord 273 | with subsection 6b. 274 | 275 | d) Convey the object code by offering access from a designated 276 | place (gratis or for a charge), and offer equivalent access to the 277 | Corresponding Source in the same way through the same place at no 278 | further charge. You need not require recipients to copy the 279 | Corresponding Source along with the object code. If the place to 280 | copy the object code is a network server, the Corresponding Source 281 | may be on a different server (operated by you or a third party) 282 | that supports equivalent copying facilities, provided you maintain 283 | clear directions next to the object code saying where to find the 284 | Corresponding Source. Regardless of what server hosts the 285 | Corresponding Source, you remain obligated to ensure that it is 286 | available for as long as needed to satisfy these requirements. 287 | 288 | e) Convey the object code using peer-to-peer transmission, provided 289 | you inform other peers where the object code and Corresponding 290 | Source of the work are being offered to the general public at no 291 | charge under subsection 6d. 292 | 293 | A separable portion of the object code, whose source code is excluded 294 | from the Corresponding Source as a System Library, need not be 295 | included in conveying the object code work. 296 | 297 | A "User Product" is either (1) a "consumer product", which means any 298 | tangible personal property which is normally used for personal, family, 299 | or household purposes, or (2) anything designed or sold for incorporation 300 | into a dwelling. In determining whether a product is a consumer product, 301 | doubtful cases shall be resolved in favor of coverage. For a particular 302 | product received by a particular user, "normally used" refers to a 303 | typical or common use of that class of product, regardless of the status 304 | of the particular user or of the way in which the particular user 305 | actually uses, or expects or is expected to use, the product. A product 306 | is a consumer product regardless of whether the product has substantial 307 | commercial, industrial or non-consumer uses, unless such uses represent 308 | the only significant mode of use of the product. 309 | 310 | "Installation Information" for a User Product means any methods, 311 | procedures, authorization keys, or other information required to install 312 | and execute modified versions of a covered work in that User Product from 313 | a modified version of its Corresponding Source. The information must 314 | suffice to ensure that the continued functioning of the modified object 315 | code is in no case prevented or interfered with solely because 316 | modification has been made. 317 | 318 | If you convey an object code work under this section in, or with, or 319 | specifically for use in, a User Product, and the conveying occurs as 320 | part of a transaction in which the right of possession and use of the 321 | User Product is transferred to the recipient in perpetuity or for a 322 | fixed term (regardless of how the transaction is characterized), the 323 | Corresponding Source conveyed under this section must be accompanied 324 | by the Installation Information. But this requirement does not apply 325 | if neither you nor any third party retains the ability to install 326 | modified object code on the User Product (for example, the work has 327 | been installed in ROM). 328 | 329 | The requirement to provide Installation Information does not include a 330 | requirement to continue to provide support service, warranty, or updates 331 | for a work that has been modified or installed by the recipient, or for 332 | the User Product in which it has been modified or installed. Access to a 333 | network may be denied when the modification itself materially and 334 | adversely affects the operation of the network or violates the rules and 335 | protocols for communication across the network. 336 | 337 | Corresponding Source conveyed, and Installation Information provided, 338 | in accord with this section must be in a format that is publicly 339 | documented (and with an implementation available to the public in 340 | source code form), and must require no special password or key for 341 | unpacking, reading or copying. 342 | 343 | 7. Additional Terms. 344 | 345 | "Additional permissions" are terms that supplement the terms of this 346 | License by making exceptions from one or more of its conditions. 347 | Additional permissions that are applicable to the entire Program shall 348 | be treated as though they were included in this License, to the extent 349 | that they are valid under applicable law. If additional permissions 350 | apply only to part of the Program, that part may be used separately 351 | under those permissions, but the entire Program remains governed by 352 | this License without regard to the additional permissions. 353 | 354 | When you convey a copy of a covered work, you may at your option 355 | remove any additional permissions from that copy, or from any part of 356 | it. (Additional permissions may be written to require their own 357 | removal in certain cases when you modify the work.) You may place 358 | additional permissions on material, added by you to a covered work, 359 | for which you have or can give appropriate copyright permission. 360 | 361 | Notwithstanding any other provision of this License, for material you 362 | add to a covered work, you may (if authorized by the copyright holders of 363 | that material) supplement the terms of this License with terms: 364 | 365 | a) Disclaiming warranty or limiting liability differently from the 366 | terms of sections 15 and 16 of this License; or 367 | 368 | b) Requiring preservation of specified reasonable legal notices or 369 | author attributions in that material or in the Appropriate Legal 370 | Notices displayed by works containing it; or 371 | 372 | c) Prohibiting misrepresentation of the origin of that material, or 373 | requiring that modified versions of such material be marked in 374 | reasonable ways as different from the original version; or 375 | 376 | d) Limiting the use for publicity purposes of names of licensors or 377 | authors of the material; or 378 | 379 | e) Declining to grant rights under trademark law for use of some 380 | trade names, trademarks, or service marks; or 381 | 382 | f) Requiring indemnification of licensors and authors of that 383 | material by anyone who conveys the material (or modified versions of 384 | it) with contractual assumptions of liability to the recipient, for 385 | any liability that these contractual assumptions directly impose on 386 | those licensors and authors. 387 | 388 | All other non-permissive additional terms are considered "further 389 | restrictions" within the meaning of section 10. If the Program as you 390 | received it, or any part of it, contains a notice stating that it is 391 | governed by this License along with a term that is a further 392 | restriction, you may remove that term. If a license document contains 393 | a further restriction but permits relicensing or conveying under this 394 | License, you may add to a covered work material governed by the terms 395 | of that license document, provided that the further restriction does 396 | not survive such relicensing or conveying. 397 | 398 | If you add terms to a covered work in accord with this section, you 399 | must place, in the relevant source files, a statement of the 400 | additional terms that apply to those files, or a notice indicating 401 | where to find the applicable terms. 402 | 403 | Additional terms, permissive or non-permissive, may be stated in the 404 | form of a separately written license, or stated as exceptions; 405 | the above requirements apply either way. 406 | 407 | 8. Termination. 408 | 409 | You may not propagate or modify a covered work except as expressly 410 | provided under this License. Any attempt otherwise to propagate or 411 | modify it is void, and will automatically terminate your rights under 412 | this License (including any patent licenses granted under the third 413 | paragraph of section 11). 414 | 415 | However, if you cease all violation of this License, then your 416 | license from a particular copyright holder is reinstated (a) 417 | provisionally, unless and until the copyright holder explicitly and 418 | finally terminates your license, and (b) permanently, if the copyright 419 | holder fails to notify you of the violation by some reasonable means 420 | prior to 60 days after the cessation. 421 | 422 | Moreover, your license from a particular copyright holder is 423 | reinstated permanently if the copyright holder notifies you of the 424 | violation by some reasonable means, this is the first time you have 425 | received notice of violation of this License (for any work) from that 426 | copyright holder, and you cure the violation prior to 30 days after 427 | your receipt of the notice. 428 | 429 | Termination of your rights under this section does not terminate the 430 | licenses of parties who have received copies or rights from you under 431 | this License. If your rights have been terminated and not permanently 432 | reinstated, you do not qualify to receive new licenses for the same 433 | material under section 10. 434 | 435 | 9. Acceptance Not Required for Having Copies. 436 | 437 | You are not required to accept this License in order to receive or 438 | run a copy of the Program. Ancillary propagation of a covered work 439 | occurring solely as a consequence of using peer-to-peer transmission 440 | to receive a copy likewise does not require acceptance. However, 441 | nothing other than this License grants you permission to propagate or 442 | modify any covered work. These actions infringe copyright if you do 443 | not accept this License. Therefore, by modifying or propagating a 444 | covered work, you indicate your acceptance of this License to do so. 445 | 446 | 10. Automatic Licensing of Downstream Recipients. 447 | 448 | Each time you convey a covered work, the recipient automatically 449 | receives a license from the original licensors, to run, modify and 450 | propagate that work, subject to this License. You are not responsible 451 | for enforcing compliance by third parties with this License. 452 | 453 | An "entity transaction" is a transaction transferring control of an 454 | organization, or substantially all assets of one, or subdividing an 455 | organization, or merging organizations. If propagation of a covered 456 | work results from an entity transaction, each party to that 457 | transaction who receives a copy of the work also receives whatever 458 | licenses to the work the party's predecessor in interest had or could 459 | give under the previous paragraph, plus a right to possession of the 460 | Corresponding Source of the work from the predecessor in interest, if 461 | the predecessor has it or can get it with reasonable efforts. 462 | 463 | You may not impose any further restrictions on the exercise of the 464 | rights granted or affirmed under this License. For example, you may 465 | not impose a license fee, royalty, or other charge for exercise of 466 | rights granted under this License, and you may not initiate litigation 467 | (including a cross-claim or counterclaim in a lawsuit) alleging that 468 | any patent claim is infringed by making, using, selling, offering for 469 | sale, or importing the Program or any portion of it. 470 | 471 | 11. Patents. 472 | 473 | A "contributor" is a copyright holder who authorizes use under this 474 | License of the Program or a work on which the Program is based. The 475 | work thus licensed is called the contributor's "contributor version". 476 | 477 | A contributor's "essential patent claims" are all patent claims 478 | owned or controlled by the contributor, whether already acquired or 479 | hereafter acquired, that would be infringed by some manner, permitted 480 | by this License, of making, using, or selling its contributor version, 481 | but do not include claims that would be infringed only as a 482 | consequence of further modification of the contributor version. For 483 | purposes of this definition, "control" includes the right to grant 484 | patent sublicenses in a manner consistent with the requirements of 485 | this License. 486 | 487 | Each contributor grants you a non-exclusive, worldwide, royalty-free 488 | patent license under the contributor's essential patent claims, to 489 | make, use, sell, offer for sale, import and otherwise run, modify and 490 | propagate the contents of its contributor version. 491 | 492 | In the following three paragraphs, a "patent license" is any express 493 | agreement or commitment, however denominated, not to enforce a patent 494 | (such as an express permission to practice a patent or covenant not to 495 | sue for patent infringement). To "grant" such a patent license to a 496 | party means to make such an agreement or commitment not to enforce a 497 | patent against the party. 498 | 499 | If you convey a covered work, knowingly relying on a patent license, 500 | and the Corresponding Source of the work is not available for anyone 501 | to copy, free of charge and under the terms of this License, through a 502 | publicly available network server or other readily accessible means, 503 | then you must either (1) cause the Corresponding Source to be so 504 | available, or (2) arrange to deprive yourself of the benefit of the 505 | patent license for this particular work, or (3) arrange, in a manner 506 | consistent with the requirements of this License, to extend the patent 507 | license to downstream recipients. "Knowingly relying" means you have 508 | actual knowledge that, but for the patent license, your conveying the 509 | covered work in a country, or your recipient's use of the covered work 510 | in a country, would infringe one or more identifiable patents in that 511 | country that you have reason to believe are valid. 512 | 513 | If, pursuant to or in connection with a single transaction or 514 | arrangement, you convey, or propagate by procuring conveyance of, a 515 | covered work, and grant a patent license to some of the parties 516 | receiving the covered work authorizing them to use, propagate, modify 517 | or convey a specific copy of the covered work, then the patent license 518 | you grant is automatically extended to all recipients of the covered 519 | work and works based on it. 520 | 521 | A patent license is "discriminatory" if it does not include within 522 | the scope of its coverage, prohibits the exercise of, or is 523 | conditioned on the non-exercise of one or more of the rights that are 524 | specifically granted under this License. You may not convey a covered 525 | work if you are a party to an arrangement with a third party that is 526 | in the business of distributing software, under which you make payment 527 | to the third party based on the extent of your activity of conveying 528 | the work, and under which the third party grants, to any of the 529 | parties who would receive the covered work from you, a discriminatory 530 | patent license (a) in connection with copies of the covered work 531 | conveyed by you (or copies made from those copies), or (b) primarily 532 | for and in connection with specific products or compilations that 533 | contain the covered work, unless you entered into that arrangement, 534 | or that patent license was granted, prior to 28 March 2007. 535 | 536 | Nothing in this License shall be construed as excluding or limiting 537 | any implied license or other defenses to infringement that may 538 | otherwise be available to you under applicable patent law. 539 | 540 | 12. No Surrender of Others' Freedom. 541 | 542 | If conditions are imposed on you (whether by court order, agreement or 543 | otherwise) that contradict the conditions of this License, they do not 544 | excuse you from the conditions of this License. If you cannot convey a 545 | covered work so as to satisfy simultaneously your obligations under this 546 | License and any other pertinent obligations, then as a consequence you may 547 | not convey it at all. For example, if you agree to terms that obligate you 548 | to collect a royalty for further conveying from those to whom you convey 549 | the Program, the only way you could satisfy both those terms and this 550 | License would be to refrain entirely from conveying the Program. 551 | 552 | 13. Use with the GNU Affero General Public License. 553 | 554 | Notwithstanding any other provision of this License, you have 555 | permission to link or combine any covered work with a work licensed 556 | under version 3 of the GNU Affero General Public License into a single 557 | combined work, and to convey the resulting work. The terms of this 558 | License will continue to apply to the part which is the covered work, 559 | but the special requirements of the GNU Affero General Public License, 560 | section 13, concerning interaction through a network will apply to the 561 | combination as such. 562 | 563 | 14. Revised Versions of this License. 564 | 565 | The Free Software Foundation may publish revised and/or new versions of 566 | the GNU General Public License from time to time. Such new versions will 567 | be similar in spirit to the present version, but may differ in detail to 568 | address new problems or concerns. 569 | 570 | Each version is given a distinguishing version number. If the 571 | Program specifies that a certain numbered version of the GNU General 572 | Public License "or any later version" applies to it, you have the 573 | option of following the terms and conditions either of that numbered 574 | version or of any later version published by the Free Software 575 | Foundation. If the Program does not specify a version number of the 576 | GNU General Public License, you may choose any version ever published 577 | by the Free Software Foundation. 578 | 579 | If the Program specifies that a proxy can decide which future 580 | versions of the GNU General Public License can be used, that proxy's 581 | public statement of acceptance of a version permanently authorizes you 582 | to choose that version for the Program. 583 | 584 | Later license versions may give you additional or different 585 | permissions. However, no additional obligations are imposed on any 586 | author or copyright holder as a result of your choosing to follow a 587 | later version. 588 | 589 | 15. Disclaimer of Warranty. 590 | 591 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY 592 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT 593 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY 594 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, 595 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 596 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM 597 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF 598 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 599 | 600 | 16. Limitation of Liability. 601 | 602 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 603 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS 604 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY 605 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE 606 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF 607 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD 608 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), 609 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF 610 | SUCH DAMAGES. 611 | 612 | 17. Interpretation of Sections 15 and 16. 613 | 614 | If the disclaimer of warranty and limitation of liability provided 615 | above cannot be given local legal effect according to their terms, 616 | reviewing courts shall apply local law that most closely approximates 617 | an absolute waiver of all civil liability in connection with the 618 | Program, unless a warranty or assumption of liability accompanies a 619 | copy of the Program in return for a fee. 620 | 621 | END OF TERMS AND CONDITIONS 622 | 623 | How to Apply These Terms to Your New Programs 624 | 625 | If you develop a new program, and you want it to be of the greatest 626 | possible use to the public, the best way to achieve this is to make it 627 | free software which everyone can redistribute and change under these terms. 628 | 629 | To do so, attach the following notices to the program. It is safest 630 | to attach them to the start of each source file to most effectively 631 | state the exclusion of warranty; and each file should have at least 632 | the "copyright" line and a pointer to where the full notice is found. 633 | 634 | 635 | Copyright (C) 636 | 637 | This program is free software: you can redistribute it and/or modify 638 | it under the terms of the GNU General Public License as published by 639 | the Free Software Foundation, either version 3 of the License, or 640 | (at your option) any later version. 641 | 642 | This program is distributed in the hope that it will be useful, 643 | but WITHOUT ANY WARRANTY; without even the implied warranty of 644 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 645 | GNU General Public License for more details. 646 | 647 | You should have received a copy of the GNU General Public License 648 | along with this program. If not, see . 649 | 650 | Also add information on how to contact you by electronic and paper mail. 651 | 652 | If the program does terminal interaction, make it output a short 653 | notice like this when it starts in an interactive mode: 654 | 655 | Copyright (C) 656 | This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 657 | This is free software, and you are welcome to redistribute it 658 | under certain conditions; type `show c' for details. 659 | 660 | The hypothetical commands `show w' and `show c' should show the appropriate 661 | parts of the General Public License. Of course, your program's commands 662 | might be different; for a GUI interface, you would use an "about box". 663 | 664 | You should also get your employer (if you work as a programmer) or school, 665 | if any, to sign a "copyright disclaimer" for the program, if necessary. 666 | For more information on this, and how to apply and follow the GNU GPL, see 667 | . 668 | 669 | The GNU General Public License does not permit incorporating your program 670 | into proprietary programs. If your program is a subroutine library, you 671 | may consider it more useful to permit linking proprietary applications with 672 | the library. If this is what you want to do, use the GNU Lesser General 673 | Public License instead of this License. But first, please read 674 | . 675 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 |

Arcline 🌌

3 |

4 | 5 |

How I customize my zen browser 🌸

6 | 7 | ![image](https://github.com/user-attachments/assets/150a3d3b-6484-4b5b-864e-aeba23096602) 8 | 9 | ### 10 | 11 | # 🍋‍🟩 Arcline Browser Theme 12 | 13 | **A modern, minimalist browser theme inspired by organic architecture** 14 | 15 | 16 | 17 | ## 🌶️ Stable Release Coming Soon! ## 18 | 19 | **CSS UPLOADED IS NOT OF STABLE RELEASE** it is of beta , waiting for tab folders to get implemented on zen for stable release 20 | _Please see bottom of readme for simple installation._ 21 | ## Stable Release Features 22 | 23 | - **URL-bar** with custom scaling animations 24 | 25 | 26 | 27 | https://github.com/user-attachments/assets/27ae1ab4-4ec8-4645-884f-98f808d4f06f 28 | 29 | 30 | 31 | - **ARC like tidy tabs** with improved animations 32 | 33 | https://github.com/user-attachments/assets/a1b63b7a-e32d-4d84-9132-584bff56f6bd 34 | 35 | - **Pinned Extension** also supports pinning of extensions like essentials may have width conflict with `arch.four.essen` preference 36 | 37 | ![image](https://github.com/user-attachments/assets/b31d35ec-af3e-49ef-a149-ae545b720683) 38 | 39 | - **Performance-optimized** CSS animations 40 | - **platform consistency** across Windows11 41 | - **Enhanced compatibility** with Zen Browser v3.2+ 42 | 43 |

Arc-h is a personal-grade theme for Zen browser that reimagines the browser interface with focus-preserving design principles.

This userChrome customization offers:
- Adaptive transparency effects
- Ergonomic spacing system
- Unified visual language
- Configurable accent colors

44 | 45 | ### 46 | 47 | ## 🛠️ Setup Instructions 48 | 49 | ### 1. Profile Preparation 50 | - Works best on **new profiles** or profiles without conflicting CSS modifications 51 | - Compatible with most content-blocking extensions 52 | 53 | ### 2. Window Control Alignment 54 | - In `about:config`, set: 55 | `zen.view.experimental-force-window-controls-left = true` 56 | *(requires browser restart)* 57 | 58 | ### 3. Interface Optimization 59 | 1. Right-click tabs area → **Customize Toolbar** → Set **Density** to **Touch** 60 | ![Screenshot 2025-04-16 172014](https://github.com/user-attachments/assets/f2197a98-3332-4db0-823b-ea666968634e) 61 | 2. Enable **Single Toolbar Mode** in Zen Settings → Look & Feel 62 | 3. Set `zen.theme.content-element-separation = 10` in `about:config` 63 | 64 | ### 4. Tab Groups Activation 65 | - In `about:config`, set: 66 | `browser.tabs.groups.enabled = true` 67 | 68 | ### 5. Performance Considerations 69 | - Hardware acceleration recommended for best animation performance 70 | - URL bar animations automatically disable during media playback 71 | 72 | ### 6. Preferences 73 | - In `about:config` , make these prefernces according to your wish 74 | - `arch.traffic.lights` to get mac os like title bar button on windows 75 | - `arch.borders` for adding a white border around the browser 76 | - `arch.urlbar.scale` for adding scaling effect url bar search results 77 | - `arch.usable.blur.sidebar` to add a psuedo background behind tabs section(navigator tool box) in compact mode to ensure blur , you will need to adjust width according to you system 78 | - `arch.four.essen` for making essential always stay in 4x grid style 79 | - `arch.workspace.transition` very initial stage and can cause lagging very resource intensive 80 | - `arch.workspace.buttons` for making inactive workspace button into circles arc style has some limitions can only work for 3 workspaces and width of tabs section should be fixed accordingly 81 | ### Tutorial of setting preferences 82 | 83 | 84 | https://github.com/user-attachments/assets/29eaf351-5d33-4d09-8717-64eac22b3fd2 85 | 86 | 87 | 88 |

💿 Installation

89 | 90 | ### 91 | 92 |

1. Theme Installation

93 | 94 | ### 95 | 96 |

1. Follow Zen's Live Editing Guide to create chrome folder
97 | 2. Download latest release from Releases page
98 | 3. Extract these into your chrome folder:
99 | - arc-h folder
100 | - arc-h-config.css
101 | - userChrome.css
102 | - userContent.css
103 | 4. Restart browser and enable:
104 | `browser.tabs.allow_transparent_browser = true` in about:config

105 | 106 | ### 107 | 108 |

2. Visual Enhancements (Windows 11)

109 | 110 | ### 111 | 112 |

1. Install MicaForEveryone
113 | 2. Add process rule for Zen with:
114 | - Backdrop Type: Acrylic
115 | - Enable "Blur Behind" in advanced settings

116 | 117 | ### 118 | 119 |

3. Optional Components

120 | 121 | ### 122 | 123 |

• Tacky Borders - Preconfigured rules included
124 | • Zen Internet Extension - For page transparency

125 | 126 | ## Simple Installation 127 | 1. Install latest version of [Sine](https://github.com/CosmoCreeper/Sine/releases/tag/v1.1.8) by following all prompted instructions. 128 | 2. Restart Zen Browser. 129 | 3. Open settings and go the the "Sine" tab. 130 | 4. Locate the local installation section. 131 | 5. Install `ferrocyante/Arcline`. 132 | 6. Restart Zen Browser. 133 | 7. Customize the settings to match your prefrences. 134 | 8. Enjoy! 135 | 136 | ## 🙏 Acknowledgments 137 | Special thanks to **Mr. Green**, creator of the **Natsumi Browser**, for inspiring this project. 138 | 139 | 140 | ### 141 | 142 |

Credits & Resources

143 | 144 | ### 145 | 146 |

• Tab Group implementation: Advanced Tab Groups
147 | • Design inspiration: Natsumi Browser
148 | • Community contributions welcome via Issues and PRs

149 | 150 | ### 151 | 152 |
153 | 154 |
155 | -------------------------------------------------------------------------------- /arcline-pages/arcline-pages.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | @import "modules/preload.css"; 5 | @import "modules/pdfjs.css"; 6 | 7 | 8 | /* Do NOT enter any additional CSS below. */ 9 | -------------------------------------------------------------------------------- /arcline-pages/modules/pdfjs.css: -------------------------------------------------------------------------------- 1 | /* ------------ BETTER PDF VIEWER ----------- */ 2 | 3 | /* ---- Config ----- */ 4 | 5 | /* 6 | Feel free to change these values to whatever you want, as long 7 | as they use the correct format. 8 | */ 9 | 10 | * { 11 | /* Accent color */ 12 | --natsumi-pages-accent-color: #19728b; 13 | 14 | /* Natsumi Glass Effect */ 15 | --glass-blur-radius: 30px; 16 | --glass-shadow-size: 10px; 17 | --glass-shadow-opacity: 65%; 18 | 19 | /* Custom fonts experiment (must be an installed font) */ 20 | --custom-font: 'Poppins'; 21 | 22 | /* pdf.js */ 23 | --pdfjs-topbar-max-width: calc(100% - 10px); /* use calc(100% - 10px) for max width */ 24 | 25 | } 26 | 27 | /* preload */ 28 | /* ==== Apply config ==== */ 29 | 30 | /* 31 | NOTE: DO NOT USE THIS AS YOUR CONFIG FILE. 32 | 33 | The below code applies your config (or default values if needed) and they should never be modified. 34 | Edit the natsumi-config.css file instead. 35 | */ 36 | 37 | * { 38 | /* Colors */ 39 | --natsumi-primary-color: var(--natsumi-pages-accent-color, #aac7ff); 40 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 41 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-colors-primary) 20%, white 80%); 42 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 2%, white 98%); 43 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 44 | 45 | @media (prefers-color-scheme: dark) { 46 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 20%, #202020 80%); 47 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 30%, #202020 70%); 48 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 1%, #202020 99%); 49 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 50 | 51 | @media (-moz-bool-pref: 'zen.theme.color-prefs.colorful') { 52 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 53 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 40%, black 60%); 54 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 15%, black 85%); 55 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 56 | } 57 | } 58 | 59 | /* Glass effect */ 60 | --natsumi-glass-background: color-mix(in srgb, var(--natsumi-colors-secondary) 60%, transparent); 61 | --natsumi-glass-blur-radius: var(--glass-blur-radius, 10px); 62 | --natsumi-glass-shadow-size: var(--glass-shadow-size, 10px); 63 | --natsumi-glass-shadow-opacity: var(--glass-shadow-opacity, 75%); 64 | 65 | /* pdf.js */ 66 | --natsumi-pdfjs-topbar-max-width: var(--pdfjs-topbar-max-width, 1050px); 67 | 68 | } 69 | 70 | 71 | /* pdfjs */ 72 | 73 | /* ==== PDF viewer tweaks ==== */ 74 | 75 | @keyframes pdfjs-appear { 76 | from { 77 | opacity: 0; 78 | filter: blur(5px); 79 | } 80 | 81 | to { 82 | opacity: 1; 83 | filter: blur(0); 84 | } 85 | } 86 | 87 | @keyframes secondary-appear { 88 | 0% { 89 | opacity: 0; 90 | margin-top: -10px; 91 | filter: blur(5px); 92 | } 93 | 94 | 100% { 95 | opacity: 1; 96 | margin-top: 0; 97 | filter: blur(0); 98 | } 99 | } 100 | 101 | @keyframes properties-appear { 102 | 0% { 103 | opacity: 0; 104 | top: 50px; 105 | } 106 | 107 | 100% { 108 | opacity: 1; 109 | top: 0; 110 | } 111 | } 112 | 113 | @media not (-moz-bool-pref: "natsumi.pdfjs.disabled") { 114 | html[mozdisallowselectionprint] { 115 | &:has(head link:nth-of-type(1)[href^="resource://pdf.js"]) { 116 | --natsumi-colors-border: color-mix(in srgb, var(--natsumi-colors-secondary) 80%, black 20%); 117 | --toolbarbutton-active-background: rgba(255, 255, 255, 0.9); 118 | --toolbarbutton-hover-background: color-mix(in srgb, #202020 10%, transparent); 119 | 120 | @media (prefers-color-scheme: dark) { 121 | --toolbarbutton-active-background: color-mix(in srgb, var(--natsumi-primary-color) 50%, rgba(255, 255, 255, .1)); 122 | --toolbarbutton-hover-background: color-mix(in srgb, #ebebeb 10%, transparent); 123 | } 124 | 125 | body { 126 | @media (prefers-color-scheme: dark) { 127 | background: transparent !important; 128 | background-color: transparent !important; 129 | } 130 | } 131 | 132 | #viewerContainer { 133 | inset: 0 !important; 134 | background: transparent !important; 135 | background-color: transparent !important; 136 | 137 | #viewer > .page:first-of-type, 138 | #viewer .spread:first-of-type .page { 139 | margin-top: 43px !important; 140 | transition: margin-top 0.3s ease; 141 | } 142 | } 143 | 144 | .toolbar { 145 | width: 100%; 146 | height: 10px; 147 | 148 | @media (-moz-bool-pref: "natsumi.theme.compact-marginless") { 149 | height: 15px; 150 | } 151 | } 152 | 153 | #toolbarContainer, #sidebarContainer { 154 | background: var(--natsumi-glass-background) !important; 155 | backdrop-filter: blur(25px); 156 | border-radius: 10px; 157 | } 158 | 159 | #toolbarContainer { 160 | position: absolute !important; 161 | top: 5px !important; 162 | left: 50% !important; 163 | transform: translate(-50%, 0); 164 | width: calc(100% - 10px) !important; 165 | max-width: min(var(--natsumi-pdfjs-topbar-max-width), calc(100% - 10px)) !important; 166 | border-radius: 10px; 167 | padding-top: 5px !important; 168 | padding-bottom: 5px !important; 169 | height: calc(var(--toolbar-height) + 10px) !important; 170 | border: 1px solid rgba(20, 20, 20, 0.2) !important; 171 | box-shadow: 0 0 var(--natsumi-glass-shadow-size) var(--natsumi-glass-shadow-color) !important; 172 | animation: pdfjs-appear 0.3s ease; 173 | overflow: hidden !important; 174 | 175 | @media (prefers-color-scheme: dark) { 176 | border-color: rgba(235, 235, 235, 0.3) !important; 177 | } 178 | 179 | &:has(#loadingBar.hidden) { 180 | overflow: visible !important; 181 | } 182 | 183 | #toolbarViewer { 184 | padding-left: 5px; 185 | padding-right: 5px; 186 | } 187 | 188 | .doorHangerRight { 189 | padding: 5px !important; 190 | top: 40px !important; 191 | right: -7px !important; 192 | background: var(--natsumi-glass-background) !important; 193 | backdrop-filter: blur(25px); 194 | border-radius: 11px !important; 195 | border: 1px solid rgba(20, 20, 20, 0.2) !important; 196 | box-shadow: 0 0 var(--natsumi-glass-shadow-size) var(--natsumi-glass-shadow-color) !important; 197 | animation: secondary-appear 0.3s ease; 198 | 199 | &.hidden { 200 | animation: none !important; 201 | } 202 | 203 | @media (prefers-color-scheme: dark) { 204 | border-color: rgba(235, 235, 235, 0.3) !important; 205 | } 206 | 207 | &::before, &::after { 208 | display: none !important; 209 | } 210 | } 211 | 212 | .thicknessPicker { 213 | &::before, &::after { 214 | @media (prefers-color-scheme: dark) { 215 | background-color: white !important; 216 | } 217 | } 218 | } 219 | 220 | #loadingBar { 221 | top: unset !important; 222 | bottom: 0 !important; 223 | border: none !important; 224 | 225 | .progress { 226 | background-color: var(--natsumi-primary-color) !important; 227 | } 228 | } 229 | } 230 | 231 | #sidebarContainer { 232 | height: calc(100% - 62px) !important; 233 | left: -5px !important; 234 | top: auto !important; 235 | bottom: 5px !important; 236 | opacity: 0 !important; 237 | transition: left 0.2s ease, opacity 0.2s ease, filter 0.2s ease !important; 238 | border: 1px solid rgba(20, 20, 20, 0.2) !important; 239 | box-shadow: 0 0 var(--natsumi-glass-shadow-size) var(--natsumi-glass-shadow-color) !important; 240 | filter: blur(5px); 241 | 242 | @media (prefers-color-scheme: dark) { 243 | border-color: rgba(235, 235, 235, 0.3) !important; 244 | } 245 | 246 | #toolbarSidebar { 247 | background: transparent !important; 248 | box-shadow: none !important; 249 | padding: 5px !important; 250 | height: calc(var(--toolbar-height) + 10px) !important; 251 | } 252 | 253 | #sidebarContent { 254 | margin-top: 10px !important; 255 | box-shadow: none !important; 256 | } 257 | 258 | .treeItem { 259 | a, .treeItems { 260 | border-radius: 5px !important; 261 | transition: background-color 0.2s ease; 262 | } 263 | 264 | .treeItemToggler { 265 | &::before { 266 | background-color: transparent !important; 267 | 268 | 269 | @media (prefers-color-scheme: dark) { 270 | filter: invert(); 271 | } 272 | } 273 | 274 | &.treeItemsHidden::before { 275 | 276 | } 277 | } 278 | } 279 | 280 | .thumbnail { 281 | margin-bottom: 22px !important; 282 | transition: border-color 0.2s ease; 283 | 284 | &::after { 285 | content: attr(data-page-number); 286 | display: block; 287 | color: black; 288 | width: 100%; 289 | margin-top: 8px; 290 | text-align: center; 291 | 292 | @media (prefers-color-scheme: dark) { 293 | color: white; 294 | } 295 | } 296 | } 297 | } 298 | 299 | #outerContainer.sidebarOpen #sidebarContainer { 300 | left: 5px !important; 301 | opacity: 1 !important; 302 | filter: blur(0); 303 | } 304 | 305 | #scaleSelectContainer { 306 | border-radius: 4px !important; 307 | overflow: hidden !important; 308 | 309 | select { 310 | background-color: #f1f1f1 !important; 311 | 312 | @media (prefers-color-scheme: dark) { 313 | background-color: #363636 !important; 314 | } 315 | } 316 | } 317 | 318 | #pageNumber { 319 | border-radius: 4px !important; 320 | overflow: hidden !important; 321 | background-color: #ffffff !important; 322 | border-color: var(--natsumi-colors-border) !important; 323 | 324 | @media (prefers-color-scheme: dark) { 325 | background-color: #23222b !important; 326 | } 327 | } 328 | 329 | .verticalToolbarSeparator, .splitToolbarButtonSeparator, .horizontalToolbarSeparator, .separator { 330 | border-color: rgba(20, 20, 20, 0.2) !important; 331 | 332 | @media (prefers-color-scheme: dark) { 333 | border-color: rgba(235, 235, 235, 0.3) !important; 334 | } 335 | } 336 | 337 | #editorHighlightVisibility .divider { 338 | background-color: rgba(20, 20, 20, 0.2) !important; 339 | 340 | @media (prefers-color-scheme: dark) { 341 | background-color: rgba(235, 235, 235, 0.3) !important; 342 | } 343 | } 344 | 345 | .toolbarButton { 346 | border-radius: 6px !important; 347 | transition: background-color 0.2s ease; 348 | 349 | &:hover { 350 | background-color: var(--toolbarbutton-hover-background) !important; 351 | } 352 | 353 | &.toggled { 354 | background-color: var(--toolbarbutton-active-background) !important; 355 | } 356 | 357 | &::before { 358 | mask-size: contain !important; 359 | mask-repeat: no-repeat; 360 | -moz-context-properties: fill; 361 | } 362 | } 363 | 364 | /* Document properties */ 365 | 366 | #documentPropertiesDialog { 367 | background: var(--natsumi-glass-background) !important; 368 | backdrop-filter: blur(5px); 369 | border-radius: 10px !important; 370 | border: 1px solid rgba(20, 20, 20, 0.2) !important; 371 | box-shadow: 0 0 var(--natsumi-glass-shadow-size) var(--natsumi-glass-shadow-color) !important; 372 | 373 | @media (prefers-color-scheme: dark) { 374 | border-color: rgba(235, 235, 235, 0.3) !important; 375 | } 376 | 377 | &:is([open]) { 378 | animation: properties-appear 0.3s ease !important; 379 | } 380 | 381 | #documentPropertiesClose { 382 | border-radius: 5px !important; 383 | background-color: #f1f1f1 !important; 384 | 385 | @media (prefers-color-scheme: dark) { 386 | background-color: #363636 !important; 387 | } 388 | } 389 | } 390 | 391 | /* Compact mode */ 392 | 393 | @media (-moz-bool-pref: "natsumi.pdfjs.compact") { 394 | .toolbar { 395 | #toolbarContainer { 396 | opacity: 0 !important; 397 | pointer-events: none; 398 | top: -5px !important; 399 | transition: opacity 0.3s ease, top 0.3s ease, filter 0.3s ease; 400 | filter: blur(5px); 401 | } 402 | 403 | &:hover, &:has(.toolbarButton:not(#sidebarToggleButton)[aria-expanded="true"]), 404 | &:has(input:focus), &:has(select:focus) { 405 | height: 52px; 406 | 407 | #toolbarContainer { 408 | top: 5px !important; 409 | opacity: 1 !important; 410 | pointer-events: auto; 411 | filter: blur(0); 412 | } 413 | } 414 | } 415 | 416 | @media (-moz-bool-pref: "natsumi.pdfjs.compact-dynamic") { 417 | .toolbar:has(#sidebarToggleButton[aria-expanded="true"]) { 418 | height: 52px; 419 | 420 | #toolbarContainer { 421 | top: 5px !important; 422 | opacity: 1 !important; 423 | pointer-events: auto; 424 | filter: blur(0); 425 | } 426 | } 427 | 428 | &:has(#sidebarToggleButton:not([aria-expanded="true"])) { 429 | #viewer > .page:first-of-type, 430 | #viewer .spread:first-of-type .page { 431 | margin-top: 0 !important; 432 | } 433 | } 434 | } 435 | 436 | @media not (-moz-bool-pref: "natsumi.pdfjs.compact-dynamic") { 437 | #viewer > .page:first-of-type, 438 | #viewer .spread:first-of-type .page { 439 | margin-top: 0 !important; 440 | } 441 | } 442 | } 443 | 444 | 445 | } 446 | } 447 | } 448 | 449 | :root { 450 | --pdf-js-pseudobg-bg: #dedede; 451 | @media (prefers-color-scheme: dark) { 452 | --pdf-js-pseudobg-bg: #2e2e2e; 453 | } 454 | } 455 | 456 | #mainContainer::before { 457 | content: '' !important; 458 | position: absolute !important; 459 | background: var(--pdf-js-pseudobg-bg) !important; 460 | top: 5px !important; 461 | left: 50% !important; 462 | transform: translate(-50%, 0); 463 | width: calc(100% - 10px) !important; 464 | max-width: min(var(--natsumi-pdfjs-topbar-max-width), calc(100% - 10px)) !important; 465 | border-radius: 10px; 466 | padding-top: 5px !important; 467 | padding-bottom: 5px !important; 468 | height: calc(var(--toolbar-height)) !important; 469 | z-index: -10000 !important; 470 | } 471 | 472 | .sidebarOpen::before { 473 | content: ''; 474 | background: var(--pdf-js-pseudobg-bg) !important; 475 | position: absolute !important; 476 | height: calc(100% - 62px) !important; 477 | left: 5px !important; 478 | top: auto !important; 479 | bottom: 5px !important; 480 | border-radius: 10px !important; 481 | width: var(--sidebar-width) !important; 482 | 483 | } 484 | -------------------------------------------------------------------------------- /arcline-pages/modules/preload.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | *{ 4 | /* Accent color */ 5 | --natsumi-accent-color: #11b5bb ; /* rgba(67, 236, 228,1);*/ 6 | --natsumi-pages-accent-color: #08595b; /* rgba(67, 285, 288,1);*/ 7 | 8 | /* Natsumi Glass Effect */ 9 | --glass-blur-radius: 25px; 10 | --glass-shadow-size: 1px; 11 | --glass-shadow-opacity: 100%; 12 | 13 | /* Natsumi URLbar appear animations */ 14 | --urlbar-appear-animation-duration: 0.25s; 15 | --urlbar-results-animation-duration: 0.5s; 16 | --urlbar-individual-result-animation-duration: 0s; 17 | --urlbar-individual-result-animation-delay: 0s; 18 | --urlbar-individual-result-animation-delay-offset: 0s; 19 | --urlbar-individual-result-expand-size: 1.1; 20 | 21 | 22 | 23 | /* Natsumi border reload animations */ 24 | --reload-border-animation-duration: 0.2s; 25 | --reload-border-animation-rotation-duration: 2s; 26 | --reload-border-animation-exit-duration: 1s; 27 | --reload-border-margin: 4px; 28 | 29 | /* Natsumi URLbar reload animations */ 30 | --reload-urlbar-animation-duration: 0.2s; 31 | --reload-urlbar-animation-fadein-duration: 2s; 32 | 33 | /* Container tabs gradient */ 34 | --container-tabs-normal-gradient-width: 25%; 35 | --container-tabs-expanded-gradient-width: 50%; 36 | 37 | /* Floating Firefox sidebar panels */ 38 | --ff-sidebar-x-offset: 20px; 39 | --ff-sidebar-y-offset: 20px; 40 | 41 | /* Custom fonts experiment (must be an installed font) */ 42 | --custom-font: 'Nunito'; 43 | 44 | /* pdf.js */ 45 | --pdfjs-topbar-max-width: 950px !important; /*calc(100% - 10px) ;*/ 46 | 47 | /* FF home */ 48 | --home-background-url: url(''); 49 | } 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | * { 59 | /* Colors */ 60 | --natsumi-primary-color: var(--natsumi-pages-accent-color, #aac7ff); 61 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 62 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-colors-primary) 20%, white 80%); 63 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 2%, white 98%); 64 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 65 | 66 | @media (prefers-color-scheme: dark) { 67 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 20%, #202020 80%); 68 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 30%, #202020 70%); 69 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 1%, #202020 99%); 70 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 71 | 72 | @media (-moz-bool-pref: 'zen.theme.color-prefs.colorful') { 73 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 74 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 40%, black 60%); 75 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 15%, black 85%); 76 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 77 | } 78 | } 79 | 80 | /* Glass effect */ 81 | --natsumi-glass-background: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, transparent); 82 | --natsumi-glass-blur-radius: var(--glass-blur-radius, 10px); 83 | --natsumi-glass-shadow-size: var(--glass-shadow-size, 10px); 84 | --natsumi-glass-shadow-opacity: var(--glass-shadow-opacity, 75%); 85 | 86 | /* pdf.js */ 87 | --natsumi-pdfjs-topbar-max-width: var(--pdfjs-topbar-max-width, 750px); 88 | 89 | /* FF home */ 90 | --natsumi-home-bg: var(--home-background-url, none); 91 | } 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /arcline/Arcline.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | /*-------------------------------MINE W skin -------------------------------------------------------------------------------*/ 5 | 6 | 7 | 8 | 9 | 10 | 11 | @import "modules/~experiments.css"; 12 | @import "modules/~extras.css"; 13 | @import "modules/~arcline-adjustments-icons.css"; 14 | @import "modules/~features.css"; 15 | @import "modules/~fonts.css"; 16 | @import "modules/~url-bar.css"; 17 | @import "modules/~workspace.css"; 18 | @import "modules/~context-menu.css"; 19 | @import "modules/sidebar-normal.css"; 20 | @import "modules/sidebar-dark.css"; 21 | @import "modules/sidebar-dark-tinted.css"; 22 | @import "modules/sidebar-glass-tinted.css"; 23 | @import "modules/sidebar-attached.css"; 24 | @import "modules/sidebar-floating.css"; 25 | @import "modules/pinned-extensions.css"; 26 | @import "modules/control-button-right.css"; 27 | @import "modules/control-button-left.css"; 28 | @import "modules/compact-mode-full-screen-mode.css"; 29 | @import "modules/pip.css"; 30 | @import "modules/findbar.css"; 31 | 32 | 33 | -------------------------------------------------------------------------------- /arcline/modules/compact-mode-full-screen-mode.css: -------------------------------------------------------------------------------- 1 | 2 | @media (-moz-pref("arcline.compact.mode.full.screen.mode", 1)) { 3 | 4 | :root[zen-compact-mode="true"]:not([customizing]) { 5 | #zen-appcontent-wrapper:not(:has(#tabbrowser-tabpanels[zen-split-view]), :has(#zen-sidebar-web-panel:not([hidden]):not([pinned]))) { 6 | margin: 0 !important; 7 | 8 | #zen-tabbox-wrapper { 9 | margin: 0 !important; 10 | } 11 | #zen-appcontent-navbar-wrapper{ 12 | display: none !important; 13 | 14 | } 15 | 16 | #zen-tabbox-wrapper .browserSidebarContainer, 17 | #zen-tabbox-wrapper browser { 18 | margin: 0 !important; 19 | 20 | border-radius: 0 !important; 21 | } 22 | 23 | @media (-moz-bool-pref: "zen.view.use-single-toolbar") { 24 | #zen-appcontent-navbar-container { 25 | 26 | visibility: collapse !important; 27 | } 28 | } 29 | } 30 | } 31 | 32 | @media (-moz-pref("arcline.compact.sidebar.position", 0)) { 33 | 34 | 35 | 36 | 37 | #navigator-toolbox:not([animate='true']) #titlebar { 38 | 39 | &::before { 40 | border-radius: 8px !important; 41 | background: transparent !important;}} 42 | 43 | 44 | 45 | /* === BLUR COMPACT SIDEBAR ================================================================================================ */ 46 | /* Compact sidebar with blurred transparent background */ 47 | body:has([zen-compact-mode="true"]) #titlebar { 48 | 49 | 50 | 51 | 52 | top: -4px !important; 53 | margin-left: -4px !important; 54 | 55 | 56 | 57 | min-width: 15px !important; 58 | border-radius: 8px !important; 59 | scale: 1 !important; 60 | 61 | 62 | min-height: calc(100% + (var(--zen-element-separation) * 1)) !important; 63 | 64 | 65 | .titlebar-buttonbox { 66 | margin-right: 0px; 67 | margin-left: 1px !important; 68 | margin-top: 1px !important; 69 | gap: 2.3px !important; 70 | } 71 | 72 | 73 | 74 | .zen-essentials-container{ 75 | margin-top: 0px !important; 76 | margin-bottom: 0px !important; 77 | } 78 | 79 | 80 | .zen-current-workspace-indicator[active="true"] { 81 | 82 | margin-left: 1px !important; 83 | margin-top: 52px !important; 84 | 85 | top: 0px !important; 86 | filter: invert(0) brightness(150%) contrast(105%); 87 | scale:1; 88 | 89 | 90 | } 91 | 92 | #nav-bar { 93 | height: 34px !important; 94 | } 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | #urlbar:not([open]) { 103 | #urlbar-background { border-radius: 12px !important; 104 | height: 88% !important; 105 | left: 0px !important; 106 | width: 99% !important; 107 | margin-bottom: 0px !important; 108 | height: 35px !important; 109 | margin-right: 0px !important; 110 | margin-top: 6px !important; 111 | 112 | }} 113 | 114 | 115 | #urlbar[open][zen-floating-urlbar="true"] { 116 | #urlbar-container:has(&) { 117 | border-radius: 2px !important; 118 | 119 | 120 | 121 | 122 | height: 34.5px !important; 123 | min-height: 34.5px !important; 124 | margin-right: 2px !important; 125 | margin-left: 1.5px !important; 126 | margin-top: 5px !important; 127 | background: var(--toolbarbutton-hover-background); 128 | } 129 | } 130 | 131 | 132 | 133 | 134 | } 135 | 136 | 137 | 138 | #browser::after { 139 | 140 | content: "" !important; /* <<<< ----- THIS IS THE CRITICAL FIX ----- */ 141 | position: absolute !important; /* Recommended for pseudo-elements positioned with top/left/etc. */ 142 | z-index: 0; /* Or -1 if it needs to be behind other content within #browser, adjust as needed */ 143 | opacity: 0 !important; 144 | left: calc((var(--zen-sidebar-width) - 0px) * -1) !important; 145 | width: calc(var(--zen-sidebar-width) + 6px) !important; 146 | min-width: 15px !important; 147 | border-radius: 2px !important; 148 | 149 | margin-right: calc(var(--zen-element-separation)/8) !important; 150 | margin-left: calc((var(--zen-element-separation) / 1) * -1) !important; 151 | margin-top: -3.5px !important; 152 | margin-bottom: calc(var(--zen-element-separation)) !important; 153 | height: calc(100% - (var(--zen-element-separation) * 0.2)) !important; 154 | top: 0px !important; 155 | background: linear-gradient(to right, light-dark(#eee, #444) 0px, light-dark(#eee, #444) calc(var(--zen-sidebar-width, --zen-sidebar-width-fallback) + 25px), transparent calc(var(--zen-sidebar-width, --zen-sidebar-width-fallback) + 100px)) !important; 156 | 157 | transition: left 0.2s cubic-bezier(0.175, 0.585, 0.32, 1) !important; 158 | top: calc(var(--zen-element-separation) / 2) !important; 159 | } 160 | 161 | body:has([zen-compact-mode="true"] [zen-user-show=""], [zen-compact-mode="true"] #navigator-toolbox[zen-has-hover="true"]) #browser::after{ 162 | opacity: 1.2 !important; 163 | left: var(--zen-element-separation) !important; 164 | } 165 | 166 | } 167 | 168 | @media (-moz-pref("arch.compact.sidebar.position", 1)){ 169 | 170 | 171 | 172 | #navigator-toolbox:not([animate='true']) #titlebar { 173 | 174 | &::before { 175 | border-radius: 12px !important; 176 | background: transparent !important;}} 177 | 178 | 179 | 180 | /* === BLUR COMPACT SIDEBAR ================================================================================================ */ 181 | /* Compact sidebar with blurred transparent background */ 182 | body:has([zen-compact-mode="true"]) #titlebar { 183 | 184 | 185 | 186 | 187 | top: calc(var(--zen-element-separation) / 0.77) !important; 188 | margin-left: calc(var(--zen-element-separation) / 0.83) !important; 189 | 190 | 191 | 192 | min-width: 15px !important; 193 | border-radius: 11px !important; 194 | scale: 1 !important; 195 | padding: 8px !important; 196 | 197 | height: calc(100% - (var(--zen-element-separation) * 2.43)) !important; 198 | 199 | 200 | .titlebar-buttonbox { 201 | margin-right: 0px; 202 | margin-left: 1px !important; 203 | margin-top: 1px !important; 204 | gap: 2.3px !important; 205 | } 206 | 207 | 208 | 209 | .zen-essentials-container{ 210 | margin-top: 0px !important; 211 | margin-bottom: 0px !important; 212 | } 213 | 214 | 215 | .zen-current-workspace-indicator[active="true"] { 216 | 217 | margin-left: 1px !important; 218 | margin-top: 52px !important; 219 | 220 | top: 0px !important; 221 | filter: invert(0) brightness(150%) contrast(105%); 222 | scale:1; 223 | 224 | 225 | } 226 | 227 | #nav-bar { 228 | height: 34px !important; 229 | } 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | #urlbar:not([open]) { 238 | #urlbar-background { border-radius: 12px !important; 239 | height: 88% !important; 240 | left: 0px !important; 241 | width: 99% !important; 242 | margin-bottom: 0px !important; 243 | height: 35px !important; 244 | margin-right: 0px !important; 245 | margin-top: 6px !important; 246 | 247 | }} 248 | 249 | 250 | #urlbar[open][zen-floating-urlbar="true"] { 251 | #urlbar-container:has(&) { 252 | border-radius: 12px !important; 253 | 254 | 255 | 256 | 257 | height: 34.5px !important; 258 | min-height: 34.5px !important; 259 | margin-right: 2px !important; 260 | margin-left: 1.5px !important; 261 | margin-top: 5px !important; 262 | background: var(--toolbarbutton-hover-background); 263 | } 264 | } 265 | 266 | 267 | 268 | 269 | } 270 | 271 | 272 | 273 | #browser::after { 274 | 275 | content: "" !important; /* <<<< ----- THIS IS THE CRITICAL FIX ----- */ 276 | position: absolute !important; /* Recommended for pseudo-elements positioned with top/left/etc. */ 277 | z-index: 0; /* Or -1 if it needs to be behind other content within #browser, adjust as needed */ 278 | opacity: 0 !important; 279 | left: calc((var(--zen-sidebar-width) - 0rem) * -1) !important; 280 | width: calc(var(--zen-sidebar-width) + 6px) !important; 281 | min-width: 15px !important; 282 | border-radius: 11px !important; 283 | 284 | margin-right: calc(var(--zen-element-separation)/2) 0 !important; 285 | margin-left: calc((var(--zen-element-separation) / 1.5) * 1) !important; 286 | margin-top: calc(var(--zen-element-separation)/0.76) !important; 287 | margin-bottom: calc(var(--zen-element-separation)) !important; 288 | height: calc(100% - (var(--zen-element-separation) * 3.365)) !important; 289 | top: 0px !important; 290 | background: linear-gradient(to right, light-dark(#eee, #444) 0px, light-dark(#eee, #444) calc(var(--zen-sidebar-width, --zen-sidebar-width-fallback) + 25px), transparent calc(var(--zen-sidebar-width, --zen-sidebar-width-fallback) + 100px)) !important; 291 | 292 | transition: left 0.2s cubic-bezier(0.175, 0.585, 0.32, 1) !important; 293 | top: calc(var(--zen-element-separation) / 2) !important; 294 | } 295 | 296 | body:has([zen-compact-mode="true"] [zen-user-show=""], [zen-compact-mode="true"] #navigator-toolbox[zen-has-hover="true"]) #browser::after{ 297 | opacity: 1.2 !important; 298 | left: var(--zen-element-separation) !important; 299 | } 300 | } 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | } 314 | 315 | -------------------------------------------------------------------------------- /arcline/modules/control-button-right.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | @media (-moz-pref("arcline.control.button", 2)) { 4 | 5 | #PanelUI-menu-button{ 6 | 7 | margin-left: 3px !important; 8 | } 9 | 10 | 11 | .titlebar-buttonbox-container{ 12 | padding: 8px !important; 13 | margin-right: 8px !important; 14 | } 15 | 16 | 17 | 18 | .titlebar-buttonbox { 19 | gap: 18px !important; 20 | 21 | 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /arcline/modules/findbar.css: -------------------------------------------------------------------------------- 1 | 2 | /* ==== Findbar ==== */ 3 | 4 | @keyframes initial-animation { 5 | from { 6 | top: 0; 7 | opacity: 0; 8 | } 9 | 10 | to { 11 | top: 20px; 12 | opacity: 1; 13 | } 14 | } 15 | 16 | @keyframes glass-disappear { 17 | 0% { 18 | backdrop-filter: blur(25px); 19 | } 20 | 21 | 99% { 22 | backdrop-filter: blur(25px); 23 | } 24 | 25 | 100% { 26 | backdrop-filter: none; 27 | } 28 | } 29 | 30 | @media not (-moz-bool-pref: "natsumi.findbar.disabled") { 31 | /*noinspection CssInvalidFunction*/ 32 | findbar { 33 | position: absolute; 34 | top: 20px; 35 | width: min(550px, 90%); 36 | right: 20px; 37 | min-height: 70px; 38 | height: auto !important; 39 | flex-wrap: wrap; 40 | border-radius: 15px; 41 | background: var(--natsumi-mat-ga-background) !important; 42 | backdrop-filter: blur(25px); 43 | border: 1px solid light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.3)) !important; 44 | opacity: 1; 45 | transition: background 0.2s ease, opacity 0.2s ease, visibility 0.2s ease, top 0.2s ease, box-shadow 0.2s ease !important; 46 | animation: initial-animation 0.2s ease; 47 | 48 | 49 | 50 | /* Restore old width */ 51 | @media (-moz-bool-pref: "arcline.wide.findbar") { 52 | width: min(720px, 90%); 53 | } 54 | 55 | /*noinspection CssInvalidPropertyValue*/ 56 | &:is([hidden="true"]) { 57 | visibility: inherit !important; 58 | pointer-events: none !important; 59 | opacity: 0 !important; 60 | top: 0 !important; 61 | animation: glass-disappear 0.2s linear !important; 62 | animation-fill-mode: forwards !important; 63 | } 64 | 65 | /*noinspection CssInvalidFunction*/ 66 | &:has(.findbar-textbox:is([status="notfound"])) { 67 | @media not (-moz-bool-pref: "natsumi.findbar.disable-not-found-bg") { 68 | background: color-mix(in srgb, light-dark(rgb(255, 146, 146), rgb(255, 100, 100)) 75%, transparent) !important; 69 | 70 | /*noinspection CssInvalidFunction*/ 71 | @media not (-moz-bool-pref: "natsumi.theme.disable-glass-shadow") { 72 | box-shadow: 0 0 10px color-mix(in srgb, light-dark(rgb(255, 146, 146), rgb(255, 100, 100)) 75%, light-dark(black, white)) !important; 73 | } 74 | } 75 | } 76 | 77 | /*noinspection CssInvalidPropertyValue*/ 78 | .findbar-closebutton { 79 | outline: none !important; 80 | order: 1; 81 | } 82 | 83 | .findbar-container { 84 | margin-left: 10px !important; 85 | margin-bottom: 5px !important; 86 | flex-wrap: wrap; 87 | height: auto !important; 88 | row-gap: 10px; 89 | 90 | /*noinspection CssInvalidFunction*/ 91 | & > :first-child { 92 | width: 100% !important; 93 | margin-top: 5px !important; 94 | padding-bottom: 10px !important; 95 | border-bottom: 1px solid light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.3)) !important; 96 | 97 | &::before { 98 | content: ""; 99 | width: 16px !important; 100 | min-width: 16px !important; 101 | background-image: url(chrome://global/skin/icons/search-glass.svg) !important; 102 | background-repeat: no-repeat; 103 | margin-top: 4px; 104 | margin-right: 15px; 105 | margin-left: 5px; 106 | 107 | @media (prefers-color-scheme: dark) { 108 | filter: invert(); 109 | } 110 | } 111 | 112 | .findbar-textbox { 113 | background: none !important; 114 | padding: 0 !important; 115 | font-size: 16px !important; 116 | box-shadow: none !important; 117 | width: 100% !important; 118 | border: none !important; 119 | 120 | /*noinspection CssInvalidFunction*/ 121 | 122 | &::-moz-selection { 123 | background: light-dark(var(--natsumi-primary-color), color-mix(in srgb, var(--natsumi-colors-primary) 60%, white)) !important; 124 | } 125 | } 126 | 127 | toolbarbutton { 128 | width: 24px !important; 129 | justify-content: space-between !important; 130 | padding: 4px !important; 131 | margin-left: 4px !important; 132 | margin-right: 0 !important; 133 | } 134 | } 135 | 136 | checkbox, label, description { 137 | margin-left: 4px !important; 138 | margin-right: 6px !important; 139 | } 140 | 141 | .findbar-label { 142 | display: flex; 143 | flex-basis: 100% !important; 144 | 145 | &:is([hidden="true"]) { 146 | display: none; 147 | } 148 | } 149 | 150 | .found-matches { 151 | font-size: 14px !important; 152 | margin-top: 10px !important; 153 | 154 | &:not([hidden]) { 155 | &::before { 156 | background-image: url('chrome://browser/skin/zen-icons/search-page.svg') !important; 157 | background-repeat: no-repeat !important; 158 | padding-left: 25px !important; 159 | color: black !important; 160 | 161 | @media (prefers-color-scheme: dark) { 162 | filter: invert(); 163 | } 164 | } 165 | } 166 | } 167 | 168 | .findbar-find-status { 169 | display: none; 170 | margin-left: 29px !important; 171 | 172 | &:is([status="notfound"]) { 173 | margin-left: 4px !important; 174 | margin-top: 10px !important; 175 | font-size: 14px !important; 176 | font-weight: normal !important; 177 | flex-basis: 100% !important; 178 | display: flex; 179 | align-items: center; 180 | background-repeat: no-repeat !important; 181 | 182 | &::before { 183 | content: ""; 184 | min-width: 17px !important; 185 | min-height: 17px !important; 186 | background-image: url(chrome://global/skin/icons/close.svg) !important; 187 | margin-right: 8px !important; 188 | background-repeat: no-repeat !important; 189 | 190 | @media (prefers-color-scheme: dark) { 191 | filter: invert(1); 192 | } 193 | } 194 | } 195 | 196 | &:is([data-l10n-id]) { 197 | display: flex; 198 | } 199 | } 200 | 201 | .checkbox-label { 202 | font-size: 12px !important; 203 | } 204 | } 205 | } 206 | } 207 | 208 | 209 | 210 | 211 | 212 | 213 | -------------------------------------------------------------------------------- /arcline/modules/pinned-extensions.css: -------------------------------------------------------------------------------- 1 | @media (-moz-pref("arcline.pinned.extensions", 1)) { 2 | 3 | 4 | #back-button { 5 | margin-top: 5px !important; 6 | } 7 | 8 | 9 | #forward-button{ 10 | 11 | margin-top: 5px !important; 12 | } 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | #zen-sidebar-top-buttons-customization-target { 32 | align-items: flex-start !important; 33 | padding: 4px 0px !important; 34 | 35 | /* Feel free to delete this. This is the number of toolbar buttons you want at the top * 32px + 1px */ 36 | min-width: calc(32px * 5 + 1px) !important; 37 | } 38 | :root[customizing] #TabsToolbar-customization-target { 39 | visibility: visible !important; 40 | } 41 | 42 | .zen-workspace-pinned-tabs-section { 43 | display: flex !important; 44 | flex-direction: column; 45 | } 46 | 47 | 48 | 49 | /* Pinned extensions */ 50 | #TabsToolbar-customization-target { 51 | display: flex !important; 52 | flex-direction: row !important; 53 | flex-wrap: wrap !important; 54 | gap: calc(var(--zen-toolbox-padding) - 3px) !important; 55 | 56 | #tabbrowser-tabs { 57 | min-width: 100% !important; 58 | height: calc(100% - 35px) !important; 59 | } 60 | 61 | #Zen-tabs-wrapper { 62 | max-height: 700px !important; 63 | } 64 | 65 | .unified-extensions-item-action-button { 66 | padding: 0px !important; 67 | } 68 | 69 | 70 | 71 | 72 | 73 | #zen-sidebar-bottom-buttons { 74 | background: transparent; 75 | gap: 5px; 76 | align-items: center; 77 | padding-top: var(--zen-element-separation); 78 | --toolbarbutton-inner-padding: 5px; 79 | 80 | 81 | } 82 | 83 | /* gap between urlbar and pinned extensions */ 84 | #nav-bar { 85 | margin-bottom: 8px !important; /* Adjust gap size as needed */ 86 | } 87 | 88 | 89 | /* Pinned Extensions */ 90 | .unified-extensions-item { 91 | margin-inline: 2px !important; 92 | border-bottom: 0px !important; 93 | margin-top: 2px !important; 94 | padding: 0px !important; 95 | height: 32px !important; 96 | width: 32px !important; 97 | flex-grow: 1 !important; 98 | order: -1 !important; 99 | background-color: light-dark(rgba(255,255,255,0.4), rgba(255,255,255,0.1)) !important; 100 | 101 | border-radius: 11.5px !important; 102 | transition: background-color 0.3s ease, box-shadow 0.3s ease !important; 103 | } 104 | 105 | .unified-extensions-item:hover { 106 | background-color: light-dark(rgba(255,255,255,0.5), rgba(255,255,255,0.2)) !important; 107 | 108 | } 109 | 110 | toolbarbutton:not([id="tabs-newtab-button"]) { 111 | toolbarbutton, 112 | stack { 113 | --toolbarbutton-active-background: transparent !important; 114 | --toolbarbutton-hover-background: transparent !important; 115 | } 116 | 117 | 118 | .toolbarbutton-badge { 119 | display: none !important; 120 | } 121 | } 122 | 123 | >toolbarbutton:not([id="tabs-newtab-button"]), 124 | >toolbaritem { 125 | background-color: light-dark(rgba(255,255,255,0.4), rgba(0,0,0,0.4)) !important; 126 | 127 | border-radius: 13px !important; 128 | margin: 2px !important; 129 | order: -1 !important; 130 | flex-grow: 1 !important; 131 | transition: background-color 0.3s ease, box-shadow 0.3s ease !important; 132 | } 133 | 134 | 135 | } 136 | 137 | 138 | } 139 | 140 | 141 | -------------------------------------------------------------------------------- /arcline/modules/pip.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | /* ==== natsumi-PiP ==== */ 5 | 6 | @media not (-moz-bool-pref: "natsumi.pip.disabled") { 7 | @-moz-document url("chrome://global/content/pictureinpicture/player.xhtml") { 8 | /*noinspection CssInvalidFunction*/ 9 | * { 10 | --natsumi-primary-color: #a0d490; 11 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 12 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-colors-primary) 20%, white 80%); 13 | 14 | @media (prefers-color-scheme: dark) { 15 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 20%, #1d1d1d 80%); 16 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 30%, #1d1d1d 70%); 17 | } 18 | 19 | /* Material: Haze */ 20 | --natsumi-mat-hz-background: rgba(255, 255, 255, 0.8); 21 | --natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-primary-color) 30%, rgba(255, 255, 255, 0.8)); 22 | --natsumi-mat-hz-blur-radius: 100px; 23 | 24 | @media (prefers-color-scheme: dark) { 25 | --natsumi-mat-hz-background: rgba(0, 0, 0, 0.8); 26 | --natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-colors-secondary) 40%, rgba(0, 0, 0, 0.8)); 27 | } 28 | 29 | /* Material: Glass */ 30 | --natsumi-mat-ga-background: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, transparent); 31 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, light-dark(black, white)); 32 | --toolbarbutton-hover-background: color-mix(in srgb, light-dark(#1d1d1d, #ebebeb) 10%, transparent 90%); 33 | --toolbarbutton-active-background: light-dark(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.11)); 34 | 35 | @media (-moz-bool-pref: "natsumi.theme.force-dark-shadows") { 36 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, black); 37 | } 38 | } 39 | 40 | @keyframes pip-fadein-html { 41 | 0% { 42 | background-color: transparent; 43 | scale: 0.8; 44 | } 45 | 46 | 99% { 47 | background-color: transparent; 48 | scale: 1; 49 | } 50 | 51 | 100% { 52 | background-color: black; 53 | } 54 | } 55 | 56 | @keyframes pip-fadein-player { 57 | 0% { 58 | filter: blur(30px); 59 | opacity: 0; 60 | } 61 | 62 | 70% { 63 | filter: blur(5px); 64 | } 65 | 66 | 100% { 67 | filter: blur(0); 68 | opacity: 1; 69 | } 70 | } 71 | 72 | @media (-moz-bool-pref: "natsumi.pip.rounded") { 73 | /* This won't work on Linux (sadly), might be just a Gnome thing. */ 74 | /* If you're seeing this, create an issue if it does indeed work */ 75 | 76 | @media (-moz-platform: windows) { 77 | window, html, body { 78 | /* Share same radius as macOS for the sake of simplicity later */ 79 | border-radius: 9px !important; 80 | } 81 | } 82 | } 83 | 84 | html { 85 | animation: pip-fadein-html 0.5s ease !important; 86 | } 87 | 88 | .player-holder { 89 | animation: pip-fadein-player 0.5s ease !important; 90 | clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 91 | } 92 | 93 | #controls { 94 | opacity: 1 !important; 95 | 96 | /*noinspection CssInvalidFunction*/ 97 | & > button { 98 | opacity: 0 !important; 99 | top: 0 !important; 100 | filter: blur(5px); 101 | border-radius: 6px !important; 102 | transition: opacity 0.3s ease, top 0.3s ease, filter 0.3s ease, background-color 0.2s ease !important; 103 | backdrop-filter: saturate(var(--natsumi-mat-hz-saturation)) contrast(var(--natsumi-mat-hz-contrast)) blur(var(--natsumi-mat-hz-blur-radius)) !important; 104 | background-image: none !important; 105 | background-color: var(--natsumi-mat-hz-background) !important; 106 | box-shadow: 0 0 6px rgba(0, 0, 0, 0.5) !important; 107 | border: 2px solid light-dark(rgba(20, 20, 20, 0.1), rgba(235, 235, 235, 0.1)) !important; 108 | 109 | @media (-moz-bool-pref: "natsumi.pip.tinted-haze") { 110 | background-color: var(--natsumi-mat-hz-background-tinted) !important; 111 | } 112 | 113 | &::before { 114 | content: ""; 115 | width: 16px; 116 | height: 16px; 117 | padding: 2px; 118 | display: flex; 119 | position: absolute; 120 | left: 50%; 121 | top: 50%; 122 | transform: translate(-50%, -50%); 123 | align-content: center; 124 | justify-content: center; 125 | fill: white !important; 126 | 127 | @media (prefers-color-scheme: light) { 128 | fill: black !important; 129 | } 130 | } 131 | 132 | &#close::before { 133 | content: url("chrome://browser/skin/zen-icons/close.svg") !important; 134 | } 135 | 136 | &#minimize::before { 137 | content: url("chrome://browser/skin/zen-icons/unpin.svg") !important; 138 | } 139 | 140 | &#unpip::before { 141 | content: url("chrome://browser/skin/zen-icons/screen.svg") !important; 142 | } 143 | 144 | &:hover { 145 | background-color: color-mix(in srgb, var(--natsumi-mat-ga-background) 80%, white) !important; 146 | 147 | @media (prefers-color-scheme: light) { 148 | background-color: color-mix(in srgb, var(--natsumi-mat-ga-background) 80%, black) !important; 149 | } 150 | } 151 | } 152 | 153 | #controls-bottom-gradient { 154 | display: none !important; 155 | } 156 | 157 | /*noinspection CssInvalidFunction*/ 158 | #controls-bottom { 159 | opacity: 0 !important; 160 | bottom: -5px !important; 161 | background-color: var(--natsumi-mat-hz-background) !important; 162 | border-radius: 10px !important; 163 | padding: 10px 15px !important; 164 | margin: 0 5px !important; 165 | width: calc(100% - 10px) !important; 166 | box-sizing: border-box !important; 167 | box-shadow: 0 0 6px rgba(0, 0, 0, 0.5) !important; 168 | backdrop-filter: saturate(3) contrast(2) blur(var(--natsumi-mat-hz-blur-radius)) !important; 169 | filter: blur(10px); 170 | transition: opacity 0.3s ease, bottom 0.3s ease, filter 0.3s ease !important; 171 | border: 2px solid light-dark(rgba(20, 20, 20, 0.1), rgba(235, 235, 235, 0.1)) !important; 172 | 173 | @media (-moz-bool-pref: "natsumi.pip.tinted-haze") { 174 | background-color: var(--natsumi-mat-hz-background-tinted) !important; 175 | } 176 | 177 | @media (-moz-bool-pref: "natsumi.pip.native-border-radius") { 178 | /* For the sake of adding native radius, we'll reduce the margin of the controls here */ 179 | width: 100% !important; 180 | margin: 0 !important; 181 | bottom: -10px !important; 182 | 183 | /* 184 | For now this config is available on macOS only, this'll be added to Windows and Linux 185 | once curved PiP for those platforms moves out of experiment status 186 | */ 187 | @media (-moz-platform: macos) { 188 | border-radius: 5px !important; 189 | } 190 | } 191 | 192 | .start-controls { 193 | @media (width > 300px) { 194 | display: flex !important; 195 | } 196 | 197 | /*noinspection CssInvalidFunction*/ 198 | #timestamp { 199 | font-size: 12px !important; 200 | color: light-dark(black, white) !important; 201 | } 202 | } 203 | 204 | .end-controls { 205 | display: flex !important; 206 | } 207 | 208 | #scrubber, #audio-scrubber { 209 | margin: 0 !important; 210 | 211 | /*noinspection CssInvalidFunction*/ 212 | &::-moz-range-progress { 213 | background: light-dark(var(--natsumi-colors-primary), var(--natsumi-primary-color)) !important; 214 | } 215 | 216 | /*noinspection CssInvalidFunction*/ 217 | &::-moz-range-track { 218 | background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)) !important; 219 | } 220 | 221 | /*noinspection CssInvalidFunction*/ 222 | &::-moz-range-thumb { 223 | background-color: light-dark(var(--natsumi-colors-primary), var(--natsumi-primary-color)) !important; 224 | width: 12px !important; 225 | height: 12px !important; 226 | border: none !important; 227 | scale: 1; 228 | transition: scale 0.2s ease; 229 | } 230 | 231 | &:hover { 232 | &::-moz-range-thumb { 233 | opacity: 1; 234 | } 235 | } 236 | } 237 | 238 | #audio-scrubber { 239 | &::-moz-range-thumb { 240 | width: 8px !important; 241 | height: 8px !important; 242 | opacity: 1 !important; 243 | } 244 | } 245 | 246 | /*noinspection CssInvalidFunction*/ 247 | button { 248 | opacity: 1 !important; 249 | position: relative; 250 | padding: 6px !important; 251 | background-size: 16px !important; 252 | width: 28px !important; 253 | height: 28px !important; 254 | border-radius: 6px !important; 255 | transition: background-color 0.2s ease !important; 256 | -moz-context-properties: fill; 257 | fill: light-dark(black, white) !important; 258 | 259 | &[disabled] { 260 | cursor: default !important; 261 | fill-opacity: 0.4 !important; 262 | 263 | &::after { 264 | display: none !important; 265 | } 266 | } 267 | 268 | &:not([disabled]) { 269 | &:hover { 270 | background-color: var(--toolbarbutton-hover-background) !important; 271 | } 272 | 273 | &:active { 274 | background-color: var(--toolbarbutton-active-background) !important; 275 | } 276 | } 277 | 278 | &#playpause { 279 | background-image: url("chrome://browser/skin/zen-icons/media-play.svg") !important; 280 | } 281 | 282 | &#audio { 283 | background-image: url("chrome://browser/skin/zen-icons/media-unmute.svg") !important; 284 | } 285 | 286 | &#seekBackward { 287 | background-image: url("chrome://browser/skin/zen-icons/reload.svg") !important; 288 | scale: -1 1; 289 | 290 | &::before { 291 | content: "5"; 292 | font-size: 8px; 293 | position: absolute; 294 | top: 50%; 295 | left: 50%; 296 | transform: translate(50%, -50%); 297 | scale: -1 1; 298 | } 299 | 300 | &::after { 301 | scale: -1 1; 302 | } 303 | } 304 | 305 | &#seekForward { 306 | background-image: url("chrome://browser/skin/zen-icons/reload.svg") !important; 307 | 308 | &::before { 309 | content: "5"; 310 | font-size: 8px; 311 | position: absolute; 312 | top: 50%; 313 | left: 50%; 314 | transform: translate(-50%, -50%); 315 | } 316 | } 317 | 318 | &#fullscreen { 319 | background-image: url("chrome://browser/skin/zen-icons/fullscreen.svg") !important; 320 | } 321 | } 322 | 323 | .controls-bottom-upper { 324 | margin: 0 !important; 325 | margin-bottom: 5px !important; 326 | width: 100% !important; 327 | height: fit-content !important; 328 | 329 | .scrubber-no-drag { 330 | margin: 0 !important; 331 | } 332 | 333 | &:has(#scrubber[hidden]) { 334 | display: none !important; 335 | margin: 0 !important; 336 | } 337 | } 338 | 339 | .controls-bottom-lower { 340 | margin: 0 !important; 341 | } 342 | } 343 | 344 | #settings { 345 | bottom: 80px !important; 346 | right: 0 !important; 347 | display: block !important; 348 | transition: opacity 0.3s ease, bottom 0.3s ease !important; 349 | 350 | .arrow { 351 | display: none !important; 352 | } 353 | 354 | /*noinspection CssInvalidFunction*/ 355 | label, legend { 356 | font-family: system-ui !important; 357 | color: light-dark(black, white) !important; 358 | } 359 | 360 | /*noinspection CssInvalidFunction*/ 361 | .slider { 362 | background-color: rgba(0, 0, 0, 0.07) !important; 363 | outline: 1px solid light-dark(#8f8f9d, #bfbfc9) !important; 364 | 365 | /*noinspection CssInvalidFunction*/ 366 | &::before { 367 | background-color: light-dark(#8f8f9d, #bfbfc9) !important; 368 | } 369 | } 370 | 371 | input { 372 | /*noinspection CssInvalidFunction*/ 373 | &:checked { 374 | border-color: light-dark(var(--natsumi-colors-primary), var(--natsumi-primary-color)) !important; 375 | } 376 | 377 | /*noinspection CssInvalidFunction*/ 378 | &:checked + .slider { 379 | background-color: light-dark(var(--natsumi-colors-primary), var(--natsumi-primary-color)) !important; 380 | outline-color: light-dark(var(--natsumi-colors-primary), var(--natsumi-primary-color)) !important; 381 | 382 | &::before { 383 | background-color: white !important; 384 | } 385 | } 386 | } 387 | 388 | /*noinspection CssInvalidFunction*/ 389 | & > .panel-fieldset { 390 | background-color: var(--natsumi-mat-ga-background) !important; 391 | backdrop-filter: blur(15px); 392 | filter: blur(0); 393 | transition: backdrop-filter 0.3s ease, filter 0.3s ease; 394 | border: 1px solid light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.3)) !important; 395 | box-shadow: 0 0 10px var(--natsumi-mat-ga-shadow-color) !important; 396 | padding: 0 !important; 397 | } 398 | 399 | /*noinspection CssInvalidFunction*/ 400 | .grey-line { 401 | width: calc(100% - 10px) !important; 402 | margin: 0 auto !important; 403 | background-color: light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.3)) !important; 404 | } 405 | 406 | &.hide { 407 | bottom: 70px !important; 408 | opacity: 0 !important; 409 | pointer-events: none !important; 410 | 411 | & > .panel-fieldset { 412 | backdrop-filter: none !important; 413 | filter: blur(5px); 414 | } 415 | } 416 | } 417 | 418 | &.muted { 419 | #controls-bottom { 420 | #audio { 421 | background-image: url("chrome://browser/skin/zen-icons/media-mute.svg") !important; 422 | } 423 | } 424 | } 425 | 426 | &.playing { 427 | #controls-bottom { 428 | #playpause { 429 | background-image: url("chrome://browser/skin/zen-icons/media-pause.svg") !important; 430 | } 431 | } 432 | } 433 | 434 | &:hover { 435 | & > button { 436 | opacity: 1 !important; 437 | top: 10px !important; 438 | filter: blur(0) !important; 439 | } 440 | 441 | #controls-bottom { 442 | opacity: 1 !important; 443 | bottom: 5px !important; 444 | filter: blur(0); 445 | 446 | @media (-moz-bool-pref: "natsumi.pip.native-border-radius") { 447 | bottom: 0 !important; 448 | } 449 | } 450 | } 451 | } 452 | 453 | body:fullscreen { 454 | #controls { 455 | #controls-bottom { 456 | #fullscreen { 457 | background-image: url("chrome://browser/skin/zen-icons/fullscreen-exit.svg") !important; 458 | } 459 | } 460 | } 461 | } 462 | } 463 | } 464 | 465 | 466 | -------------------------------------------------------------------------------- /arcline/modules/sidebar-attached.css: -------------------------------------------------------------------------------- 1 | 2 | @media (-moz-pref("arcline.compact.sidebar.position", 0)) 3 | 4 | { 5 | 6 | 7 | #navigator-toolbox:not([animate='true']) #titlebar { 8 | 9 | &::before { 10 | border-radius: 2px !important; 11 | background: transparent !important;}} 12 | 13 | 14 | 15 | /* === BLUR COMPACT SIDEBAR ================================================================================================ */ 16 | /* Compact sidebar with blurred transparent background */ 17 | body:has([zen-compact-mode="true"]) #titlebar { 18 | 19 | 20 | 21 | 22 | top: calc(var(--zen-element-separation) / 1.9) !important; 23 | margin-left: calc(var(--zen-element-separation) / 1.7) !important; 24 | 25 | 26 | 27 | min-width: 15px !important; 28 | border-radius: 2px !important; 29 | scale: 1 !important; 30 | padding: 8px !important; 31 | 32 | height: calc(100% - (var(--zen-element-separation) * 1)) !important; 33 | 34 | 35 | .titlebar-buttonbox { 36 | margin-right: 0px; 37 | margin-left: 1px !important; 38 | margin-top: 1px !important; 39 | gap: 2.3px !important; 40 | } 41 | 42 | 43 | 44 | .zen-essentials-container{ 45 | margin-top: 0px !important; 46 | margin-bottom: 0px !important; 47 | } 48 | 49 | 50 | .zen-current-workspace-indicator[active="true"] { 51 | 52 | margin-left: 1px !important; 53 | margin-top: 52px !important; 54 | 55 | top: 0px !important; 56 | filter: invert(0) brightness(150%) contrast(105%); 57 | scale:1; 58 | 59 | 60 | } 61 | 62 | #nav-bar { 63 | height: 34px !important; 64 | } 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | #urlbar:not([open]) { 73 | #urlbar-background { border-radius: 12px !important; 74 | height: 88% !important; 75 | left: 0px !important; 76 | width: 99% !important; 77 | margin-bottom: 0px !important; 78 | height: 35px !important; 79 | margin-right: 0px !important; 80 | margin-top: 6px !important; 81 | 82 | }} 83 | 84 | 85 | #urlbar[open][zen-floating-urlbar="true"] { 86 | #urlbar-container:has(&) { 87 | border-radius: 2px !important; 88 | 89 | 90 | 91 | 92 | height: 34.5px !important; 93 | min-height: 34.5px !important; 94 | margin-right: 2px !important; 95 | margin-left: 1.5px !important; 96 | margin-top: 5px !important; 97 | background: var(--toolbarbutton-hover-background); 98 | } 99 | } 100 | 101 | 102 | 103 | 104 | } 105 | 106 | 107 | 108 | #browser::after { 109 | 110 | content: "" !important; /* <<<< ----- THIS IS THE CRITICAL FIX ----- */ 111 | position: absolute !important; /* Recommended for pseudo-elements positioned with top/left/etc. */ 112 | z-index: 0; /* Or -1 if it needs to be behind other content within #browser, adjust as needed */ 113 | opacity: 0 !important; 114 | left: calc((var(--zen-sidebar-width) - 0px) * -1) !important; 115 | width: calc(var(--zen-sidebar-width) + 6px) !important; 116 | min-width: 15px !important; 117 | border-radius: 2px !important; 118 | 119 | margin-right: calc(var(--zen-element-separation)/1) !important; 120 | margin-left: calc((var(--zen-element-separation) / 19.1) * 1) !important; 121 | margin-top: calc(var(--zen-element-separation)/2) !important; 122 | margin-bottom: calc(var(--zen-element-separation)) !important; 123 | height: calc(100% - (var(--zen-element-separation) * 2)) !important; 124 | top: 0px !important; 125 | background: linear-gradient(to right, light-dark(#eee, #444) 0px, light-dark(#eee, #444) calc(var(--zen-sidebar-width, --zen-sidebar-width-fallback) + 25px), transparent calc(var(--zen-sidebar-width, --zen-sidebar-width-fallback) + 100px)) !important; 126 | 127 | transition: left 0.2s cubic-bezier(0.175, 0.585, 0.32, 1) !important; 128 | top: calc(var(--zen-element-separation) / 2) !important; 129 | } 130 | 131 | body:has([zen-compact-mode="true"] [zen-user-show=""], [zen-compact-mode="true"] #navigator-toolbox[zen-has-hover="true"]) #browser::after{ 132 | opacity: 1.2 !important; 133 | left: var(--zen-element-separation) !important; 134 | } 135 | 136 | 137 | 138 | } 139 | 140 | 141 | 142 | -------------------------------------------------------------------------------- /arcline/modules/sidebar-dark-tinted.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | @media (-moz-pref("arcline.compact.sidebar.bg", 2)) { 4 | 5 | *{ 6 | /* Colors */ 7 | --natsumi-primary-color: var(--natsumi-accent-color, var(--zen-primary-color)); 8 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 9 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-colors-primary) 20%, white 80%); 10 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 2%, white 98%); 11 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 12 | 13 | @media (prefers-color-scheme: dark) { 14 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 20%, var(--zen-dark-color-mix-base) 80%); 15 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 30%, var(--zen-dark-color-mix-base) 70%); 16 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 1%, var(--zen-dark-color-mix-base) 99%); 17 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 18 | 19 | @media -moz-pref('zen.theme.color-prefs.colorful') { 20 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 21 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 40%, black 60%); 22 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 15%, black 85%); 23 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 24 | } 25 | } 26 | 27 | /* Material: Mistcrylic */ 28 | --natsumi-mat-mc-background: color-mix(in srgb, var(--natsumi-primary-color) 40%, rgba(255, 255, 255, 0.8)); 29 | --natsumi-mat-mc-shadow-color: rgba(0, 0, 0, 0.3); 30 | --natsumi-mat-mc-border-color: rgba(255, 255, 255, 0.1); 31 | --natsumi-mat-mc-shadow-size: 10px; 32 | --natsumi-mat-mc-blur-radius: 15px; 33 | 34 | @media (prefers-color-scheme: dark) { 35 | --natsumi-mat-mc-background: color-mix(in srgb, var(--natsumi-colors-secondary) 50%, rgba(0, 0, 0, 0.8)); 36 | } 37 | 38 | /* Material: Haze */ 39 | --natsumi-mat-hz-background: rgba(255, 255, 255, 0.8); 40 | --natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-primary-color) 20%, rgba(255, 255, 255, 0.8)); 41 | --natsumi-mat-hz-blur-radius: 100px; 42 | --natsumi-mat-hz-shadow-color: rgba(0, 0, 0, 0.3); 43 | --natsumi-mat-hz-shadow-size: 10px; 44 | --natsumi-mat-hz-saturation: 3; 45 | --natsumi-mat-hz-contrast: 2; 46 | 47 | @media (prefers-color-scheme: dark) { 48 | --natsumi-mat-hz-background: rgba(0, 0, 0, 0.8); 49 | --natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-colors-secondary) 20%, rgba(0, 0, 0, 0.8)); 50 | } 51 | 52 | /* Material: Glass */ 53 | --natsumi-mat-ga-background: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, transparent); 54 | --natsumi-mat-ga-blur-radius: 10px; 55 | --natsumi-mat-ga-shadow-size: 10px; 56 | --natsumi-mat-ga-shadow-opacity: 75%; 57 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) var(--natsumi-mat-ga-shadow-opacity), black); 58 | 59 | @media (prefers-color-scheme: dark) { 60 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) var(--natsumi-mat-ga-shadow-opacity), white); 61 | 62 | @media -moz-pref("natsumi.theme.force-glass-dark-shadows") { 63 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) var(--natsumi-mat-ga-shadow-opacity), black); 64 | } 65 | } 66 | 67 | } 68 | 69 | 70 | 71 | 72 | *{ 73 | 74 | 75 | --natsumi-primary-color: color-mix(in srgb, var(--zen-primary-color) 100%, transparent); 76 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 77 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-colors-primary) 20%, white 80%); 78 | 79 | @media (prefers-color-scheme: dark) { 80 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 20%, #1d1d1d 80%); 81 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 30%, #1d1d1d 70%); 82 | } 83 | 84 | /* Material: Haze */ 85 | --natsumi-mat-hz-background: rgba(255, 255, 255, 0.8); 86 | --natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-primary-color) 30%, rgba(255, 255, 255, 0.8)); 87 | --natsumi-mat-hz-blur-radius: 100px; 88 | 89 | @media (prefers-color-scheme: dark) { 90 | --natsumi-mat-hz-background: rgba(0, 0, 0, 0.8); 91 | --natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-colors-secondary) 40%, rgba(0, 0, 0, 0.8)); 92 | } 93 | 94 | /* Material: Glass */ 95 | --natsumi-mat-ga-background: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, transparent); 96 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, light-dark(black, white)); 97 | --toolbarbutton-hover-background: color-mix(in srgb, light-dark(#1d1d1d, #ebebeb) 10%, transparent 90%); 98 | --toolbarbutton-active-background: light-dark(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.11)); 99 | 100 | @media -moz-pref("natsumi.theme.force-dark-shadows") { 101 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, black); 102 | }} 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | /* === BLUR COMPACT SIDEBAR ================================================================================================ */ 111 | /* Compact sidebar with blurred transparent background */ 112 | body:has([zen-compact-mode="true"]) #titlebar { 113 | 114 | backdrop-filter: saturate(3) contrast(2) blur(100px) !important; 115 | 116 | background-color: var(--natsumi-mat-hz-background-tinted) !important; 117 | box-shadow: 0 0 8px rgba(0, 0, 0, 0.5) !important; 118 | 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /arcline/modules/sidebar-dark.css: -------------------------------------------------------------------------------- 1 | 2 | @media (-moz-pref("arcline.compact.sidebar.bg", 1)){ 3 | 4 | /*----------------------------------------------------------------------------------------------------------------------------------*/ 5 | *{ 6 | /* Colors */ 7 | --natsumi-primary-color: var(--natsumi-accent-color, var(--zen-primary-color)); 8 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 9 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-colors-primary) 20%, white 80%); 10 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 2%, white 98%); 11 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 12 | 13 | @media (prefers-color-scheme: dark) { 14 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 20%, var(--zen-dark-color-mix-base) 80%); 15 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 30%, var(--zen-dark-color-mix-base) 70%); 16 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 1%, var(--zen-dark-color-mix-base) 99%); 17 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 18 | 19 | @media -moz-pref('zen.theme.color-prefs.colorful') { 20 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 21 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 40%, black 60%); 22 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 15%, black 85%); 23 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 24 | } 25 | } 26 | 27 | /* Material: Mistcrylic */ 28 | --natsumi-mat-mc-background: color-mix(in srgb, var(--natsumi-primary-color) 40%, rgba(255, 255, 255, 0.8)); 29 | --natsumi-mat-mc-shadow-color: rgba(0, 0, 0, 0.3); 30 | --natsumi-mat-mc-border-color: rgba(255, 255, 255, 0.1); 31 | --natsumi-mat-mc-shadow-size: 10px; 32 | --natsumi-mat-mc-blur-radius: 15px; 33 | 34 | @media (prefers-color-scheme: dark) { 35 | --natsumi-mat-mc-background: color-mix(in srgb, var(--natsumi-colors-secondary) 50%, rgba(0, 0, 0, 0.8)); 36 | } 37 | 38 | /* Material: Haze */ 39 | --natsumi-mat-hz-background: rgba(255, 255, 255, 0.8); 40 | --natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-primary-color) 20%, rgba(255, 255, 255, 0.8)); 41 | --natsumi-mat-hz-blur-radius: 100px; 42 | --natsumi-mat-hz-shadow-color: rgba(0, 0, 0, 0.3); 43 | --natsumi-mat-hz-shadow-size: 10px; 44 | --natsumi-mat-hz-saturation: 3; 45 | --natsumi-mat-hz-contrast: 2; 46 | 47 | @media (prefers-color-scheme: dark) { 48 | --natsumi-mat-hz-background: rgba(0, 0, 0, 0.8); 49 | --natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-colors-secondary) 20%, rgba(0, 0, 0, 0.8)); 50 | } 51 | 52 | /* Material: Glass */ 53 | --natsumi-mat-ga-background: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, transparent); 54 | --natsumi-mat-ga-blur-radius: 10px; 55 | --natsumi-mat-ga-shadow-size: 10px; 56 | --natsumi-mat-ga-shadow-opacity: 75%; 57 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) var(--natsumi-mat-ga-shadow-opacity), black); 58 | 59 | @media (prefers-color-scheme: dark) { 60 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) var(--natsumi-mat-ga-shadow-opacity), white); 61 | 62 | @media -moz-pref("natsumi.theme.force-glass-dark-shadows") { 63 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) var(--natsumi-mat-ga-shadow-opacity), black); 64 | } 65 | } 66 | 67 | } 68 | 69 | 70 | 71 | 72 | *{ 73 | 74 | 75 | --natsumi-primary-color: rgba(255,255,255,0.5); 76 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 77 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-colors-primary) 20%, white 80%); 78 | 79 | @media (prefers-color-scheme: dark) { 80 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 20%, #1d1d1d 80%); 81 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 30%, #1d1d1d 70%); 82 | } 83 | 84 | /* Material: Haze */ 85 | --natsumi-mat-hz-background: rgba(255, 255, 255, 0.8); 86 | --natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-primary-color) 30%, rgba(255, 255, 255, 0.8)); 87 | --natsumi-mat-hz-blur-radius: 100px; 88 | 89 | @media (prefers-color-scheme: dark) { 90 | --natsumi-mat-hz-background: rgba(0, 0, 0, 0.8); 91 | --natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-colors-secondary) 40%, rgba(0, 0, 0, 0.8)); 92 | } 93 | 94 | /* Material: Glass */ 95 | --natsumi-mat-ga-background: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, transparent); 96 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, light-dark(black, white)); 97 | --toolbarbutton-hover-background: color-mix(in srgb, light-dark(#1d1d1d, #ebebeb) 10%, transparent 90%); 98 | --toolbarbutton-active-background: light-dark(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.11)); 99 | 100 | @media -moz-pref("natsumi.theme.force-dark-shadows") { 101 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, black); 102 | }} 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | /* === BLUR COMPACT SIDEBAR ================================================================================================ */ 111 | /* Compact sidebar with blurred transparent background */ 112 | body:has([zen-compact-mode="true"]) #titlebar { 113 | 114 | backdrop-filter: saturate(3) contrast(2) blur(100px) !important; 115 | 116 | background-color: var(--natsumi-mat-hz-background) !important; 117 | box-shadow: 0 0 8px rgba(0, 0, 0, 0.5) !important; 118 | } 119 | } 120 | 121 | -------------------------------------------------------------------------------- /arcline/modules/sidebar-floating.css: -------------------------------------------------------------------------------- 1 | 2 | @media (-moz-pref("arcline.compact.sidebar.position", 1)){ 3 | 4 | 5 | 6 | #navigator-toolbox:not([animate='true']) #titlebar { 7 | 8 | &::before { 9 | border-radius: 12px !important; 10 | background: transparent !important;}} 11 | 12 | 13 | 14 | /* === BLUR COMPACT SIDEBAR ================================================================================================ */ 15 | /* Compact sidebar with blurred transparent background */ 16 | body:has([zen-compact-mode="true"]) #titlebar { 17 | 18 | 19 | 20 | 21 | top: calc(var(--zen-element-separation) / 0.77) !important; 22 | margin-left: calc(var(--zen-element-separation) / 0.83) !important; 23 | 24 | 25 | 26 | min-width: 15px !important; 27 | border-radius: 11px !important; 28 | scale: 1 !important; 29 | padding: 8px !important; 30 | 31 | height: calc(100% - (var(--zen-element-separation) * 2.43)) !important; 32 | 33 | 34 | .titlebar-buttonbox { 35 | margin-right: 0px; 36 | margin-left: 1px !important; 37 | margin-top: 1px !important; 38 | gap: 2.3px !important; 39 | } 40 | 41 | 42 | 43 | .zen-essentials-container{ 44 | margin-top: 0px !important; 45 | margin-bottom: 0px !important; 46 | } 47 | 48 | 49 | .zen-current-workspace-indicator[active="true"] { 50 | 51 | margin-left: 1px !important; 52 | margin-top: 52px !important; 53 | 54 | top: 0px !important; 55 | filter: invert(0) brightness(150%) contrast(105%); 56 | scale:1; 57 | 58 | 59 | } 60 | 61 | #nav-bar { 62 | height: 34px !important; 63 | } 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | #urlbar:not([open]) { 72 | #urlbar-background { border-radius: 12px !important; 73 | height: 88% !important; 74 | left: 0px !important; 75 | width: 99% !important; 76 | margin-bottom: 0px !important; 77 | height: 35px !important; 78 | margin-right: 0px !important; 79 | margin-top: 6px !important; 80 | 81 | }} 82 | 83 | 84 | #urlbar[open][zen-floating-urlbar="true"] { 85 | #urlbar-container:has(&) { 86 | border-radius: 12px !important; 87 | 88 | 89 | 90 | 91 | height: 34.5px !important; 92 | min-height: 34.5px !important; 93 | margin-right: 2px !important; 94 | margin-left: 1.5px !important; 95 | margin-top: 5px !important; 96 | background: var(--toolbarbutton-hover-background); 97 | } 98 | } 99 | 100 | 101 | 102 | 103 | } 104 | 105 | 106 | 107 | #browser::after { 108 | 109 | content: "" !important; /* <<<< ----- THIS IS THE CRITICAL FIX ----- */ 110 | position: absolute !important; /* Recommended for pseudo-elements positioned with top/left/etc. */ 111 | z-index: 0; /* Or -1 if it needs to be behind other content within #browser, adjust as needed */ 112 | opacity: 0 !important; 113 | left: calc((var(--zen-sidebar-width) - 0rem) * -1) !important; 114 | width: calc(var(--zen-sidebar-width) + 6px) !important; 115 | min-width: 15px !important; 116 | border-radius: 11px !important; 117 | 118 | margin-right: calc(var(--zen-element-separation)/2) 0 !important; 119 | margin-left: calc((var(--zen-element-separation) / 1.5) * 1) !important; 120 | margin-top: calc(var(--zen-element-separation)/0.76) !important; 121 | margin-bottom: calc(var(--zen-element-separation)) !important; 122 | height: calc(100% - (var(--zen-element-separation) * 3.365)) !important; 123 | top: 0px !important; 124 | background: linear-gradient(to right, light-dark(#eee, #444) 0px, light-dark(#eee, #444) calc(var(--zen-sidebar-width, --zen-sidebar-width-fallback) + 25px), transparent calc(var(--zen-sidebar-width, --zen-sidebar-width-fallback) + 100px)) !important; 125 | 126 | transition: left 0.2s cubic-bezier(0.175, 0.585, 0.32, 1) !important; 127 | top: calc(var(--zen-element-separation) / 2) !important; 128 | } 129 | 130 | body:has([zen-compact-mode="true"] [zen-user-show=""], [zen-compact-mode="true"] #navigator-toolbox[zen-has-hover="true"]) #browser::after{ 131 | opacity: 1.2 !important; 132 | left: var(--zen-element-separation) !important; 133 | } 134 | } 135 | 136 | -------------------------------------------------------------------------------- /arcline/modules/sidebar-glass-tinted.css: -------------------------------------------------------------------------------- 1 | @media (-moz-pref("arcline.compact.sidebar.bg", 3)){ 2 | 3 | *{ 4 | /* Colors */ 5 | --natsumi-primary-color: var(--natsumi-accent-color, var(--zen-primary-color)); 6 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 7 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-colors-primary) 20%, white 80%); 8 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 2%, white 98%); 9 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 10 | 11 | @media (prefers-color-scheme: dark) { 12 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 20%, var(--zen-dark-color-mix-base) 80%); 13 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 30%, var(--zen-dark-color-mix-base) 70%); 14 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 1%, var(--zen-dark-color-mix-base) 99%); 15 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 16 | 17 | @media -moz-pref('zen.theme.color-prefs.colorful') { 18 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 19 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 40%, black 60%); 20 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 15%, black 85%); 21 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 22 | } 23 | } 24 | 25 | /* Material: Mistcrylic */ 26 | --natsumi-mat-mc-background: color-mix(in srgb, var(--natsumi-primary-color) 40%, rgba(255, 255, 255, 0.8)); 27 | --natsumi-mat-mc-shadow-color: rgba(0, 0, 0, 0.3); 28 | --natsumi-mat-mc-border-color: rgba(255, 255, 255, 0.1); 29 | --natsumi-mat-mc-shadow-size: 10px; 30 | --natsumi-mat-mc-blur-radius: 15px; 31 | 32 | @media (prefers-color-scheme: dark) { 33 | --natsumi-mat-mc-background: color-mix(in srgb, var(--natsumi-colors-secondary) 50%, rgba(0, 0, 0, 0.8)); 34 | } 35 | 36 | /* Material: Haze */ 37 | --natsumi-mat-hz-background: rgba(255, 255, 255, 0.8); 38 | --natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-primary-color) 20%, rgba(255, 255, 255, 0.8)); 39 | --natsumi-mat-hz-blur-radius: 100px; 40 | --natsumi-mat-hz-shadow-color: rgba(0, 0, 0, 0.3); 41 | --natsumi-mat-hz-shadow-size: 10px; 42 | --natsumi-mat-hz-saturation: 3; 43 | --natsumi-mat-hz-contrast: 2; 44 | 45 | @media (prefers-color-scheme: dark) { 46 | --natsumi-mat-hz-background: rgba(0, 0, 0, 0.8); 47 | --natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-colors-secondary) 20%, rgba(0, 0, 0, 0.8)); 48 | } 49 | 50 | /* Material: Glass */ 51 | --natsumi-mat-ga-background: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, transparent); 52 | --natsumi-mat-ga-blur-radius: 10px; 53 | --natsumi-mat-ga-shadow-size: 10px; 54 | --natsumi-mat-ga-shadow-opacity: 75%; 55 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) var(--natsumi-mat-ga-shadow-opacity), black); 56 | 57 | @media (prefers-color-scheme: dark) { 58 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) var(--natsumi-mat-ga-shadow-opacity), white); 59 | 60 | @media -moz-pref("natsumi.theme.force-glass-dark-shadows") { 61 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) var(--natsumi-mat-ga-shadow-opacity), black); 62 | } 63 | } 64 | 65 | } 66 | 67 | 68 | 69 | 70 | *{ 71 | 72 | 73 | --natsumi-primary-color: color-mix(in srgb, var(--zen-primary-color) 100%, transparent); 74 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 75 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-colors-primary) 20%, white 80%); 76 | 77 | @media (prefers-color-scheme: dark) { 78 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 20%, #1d1d1d 80%); 79 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 30%, #1d1d1d 70%); 80 | } 81 | 82 | /* Material: Haze */ 83 | --natsumi-mat-hz-background: rgba(255, 255, 255, 0.8); 84 | --natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-primary-color) 30%, rgba(255, 255, 255, 0.8)); 85 | --natsumi-mat-hz-blur-radius: 100px; 86 | 87 | @media (prefers-color-scheme: dark) { 88 | --natsumi-mat-hz-background: rgba(0, 0, 0, 0.8); 89 | --natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-colors-secondary) 40%, rgba(0, 0, 0, 0.8)); 90 | } 91 | 92 | /* Material: Glass */ 93 | --natsumi-mat-ga-background: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, transparent); 94 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, light-dark(black, white)); 95 | --toolbarbutton-hover-background: color-mix(in srgb, light-dark(#1d1d1d, #ebebeb) 10%, transparent 90%); 96 | --toolbarbutton-active-background: light-dark(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.11)); 97 | 98 | @media -moz-pref("natsumi.theme.force-dark-shadows") { 99 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, black); 100 | }} 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | /* === BLUR COMPACT SIDEBAR ================================================================================================ */ 109 | /* Compact sidebar with blurred transparent background */ 110 | body:has([zen-compact-mode="true"]) #titlebar { 111 | 112 | backdrop-filter: saturate(3) contrast(2) blur(100px) !important; 113 | 114 | background-color: var(--natsumi-mat-ga-background) !important; 115 | box-shadow: 0 0 8px rgba(0, 0, 0, 0.5) !important; 116 | } 117 | 118 | 119 | } 120 | -------------------------------------------------------------------------------- /arcline/modules/sidebar-normal.css: -------------------------------------------------------------------------------- 1 | 2 | @media (-moz-pref("arcline.compact.sidebar.bg", 0)) { 3 | 4 | *{ 5 | /* Colors */ 6 | --natsumi-primary-color: var(--natsumi-accent-color, var(--zen-primary-color)); 7 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 8 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-colors-primary) 20%, white 80%); 9 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 2%, white 98%); 10 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 11 | 12 | @media (prefers-color-scheme: dark) { 13 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 20%, var(--zen-dark-color-mix-base) 80%); 14 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 30%, var(--zen-dark-color-mix-base) 70%); 15 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 1%, var(--zen-dark-color-mix-base) 99%); 16 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 17 | 18 | @media -moz-pref('zen.theme.color-prefs.colorful') { 19 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 20 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 40%, black 60%); 21 | --natsumi-colors-tertiary: color-mix(in srgb, var(--natsumi-primary-color) 15%, black 85%); 22 | --natsumi-colors-primary-foreground: color-mix(in srgb, var(--natsumi-primary-color) 80%, white 20%); 23 | } 24 | } 25 | 26 | /* Material: Mistcrylic */ 27 | --natsumi-mat-mc-background: color-mix(in srgb, var(--natsumi-primary-color) 40%, rgba(255, 255, 255, 0.8)); 28 | --natsumi-mat-mc-shadow-color: rgba(0, 0, 0, 0.3); 29 | --natsumi-mat-mc-border-color: rgba(255, 255, 255, 0.1); 30 | --natsumi-mat-mc-shadow-size: 10px; 31 | --natsumi-mat-mc-blur-radius: 15px; 32 | 33 | @media (prefers-color-scheme: dark) { 34 | --natsumi-mat-mc-background: color-mix(in srgb, var(--natsumi-colors-secondary) 50%, rgba(0, 0, 0, 0.8)); 35 | } 36 | 37 | /* Material: Haze */ 38 | --natsumi-mat-hz-background: rgba(255, 255, 255, 0.8); 39 | --natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-primary-color) 20%, rgba(255, 255, 255, 0.8)); 40 | --natsumi-mat-hz-blur-radius: 100px; 41 | --natsumi-mat-hz-shadow-color: rgba(0, 0, 0, 0.3); 42 | --natsumi-mat-hz-shadow-size: 10px; 43 | --natsumi-mat-hz-saturation: 3; 44 | --natsumi-mat-hz-contrast: 2; 45 | 46 | @media (prefers-color-scheme: dark) { 47 | --natsumi-mat-hz-background: rgba(0, 0, 0, 0.8); 48 | --natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-colors-secondary) 20%, rgba(0, 0, 0, 0.8)); 49 | } 50 | 51 | /* Material: Glass */ 52 | --natsumi-mat-ga-background: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, transparent); 53 | --natsumi-mat-ga-blur-radius: 10px; 54 | --natsumi-mat-ga-shadow-size: 10px; 55 | --natsumi-mat-ga-shadow-opacity: 75%; 56 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) var(--natsumi-mat-ga-shadow-opacity), black); 57 | 58 | @media (prefers-color-scheme: dark) { 59 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) var(--natsumi-mat-ga-shadow-opacity), white); 60 | 61 | @media -moz-pref("natsumi.theme.force-glass-dark-shadows") { 62 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) var(--natsumi-mat-ga-shadow-opacity), black); 63 | } 64 | } 65 | 66 | } 67 | 68 | 69 | 70 | 71 | *{ 72 | 73 | 74 | --natsumi-primary-color: rgba(255,255,255,0.5); 75 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 50%, black 50%); 76 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-colors-primary) 20%, white 80%); 77 | 78 | @media (prefers-color-scheme: dark) { 79 | --natsumi-colors-primary: color-mix(in srgb, var(--natsumi-primary-color) 20%, #1d1d1d 80%); 80 | --natsumi-colors-secondary: color-mix(in srgb, var(--natsumi-primary-color) 30%, #1d1d1d 70%); 81 | } 82 | 83 | /* Material: Haze */ 84 | --natsumi-mat-hz-background: rgba(255, 255, 255, 0.8); 85 | --natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-primary-color) 30%, rgba(255, 255, 255, 0.8)); 86 | --natsumi-mat-hz-blur-radius: 100px; 87 | 88 | @media (prefers-color-scheme: dark) { 89 | --natsumi-mat-hz-background: rgba(0, 0, 0, 0.8); 90 | --natsumi-mat-hz-background-tinted: color-mix(in srgb, var(--natsumi-colors-secondary) 40%, rgba(0, 0, 0, 0.8)); 91 | } 92 | 93 | /* Material: Glass */ 94 | --natsumi-mat-ga-background: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, transparent); 95 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, light-dark(black, white)); 96 | --toolbarbutton-hover-background: color-mix(in srgb, light-dark(#1d1d1d, #ebebeb) 10%, transparent 90%); 97 | --toolbarbutton-active-background: light-dark(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.11)); 98 | 99 | @media -moz-pref("natsumi.theme.force-dark-shadows") { 100 | --natsumi-mat-ga-shadow-color: color-mix(in srgb, var(--natsumi-colors-secondary) 75%, black); 101 | }} 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | /* === BLUR COMPACT SIDEBAR ================================================================================================ */ 110 | /* Compact sidebar with blurred transparent background */ 111 | body:has([zen-compact-mode="true"]) #titlebar { 112 | 113 | backdrop-filter: saturate(3) contrast(2) blur(100px) !important; 114 | 115 | background-color: var(--natsumi-mat-hz-background-tinted) !important; 116 | box-shadow: 0 0 8px rgba(0, 0, 0, 0.5) !important; 117 | } 118 | 119 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /arcline/modules/~context-menu.css: -------------------------------------------------------------------------------- 1 | 2 | @media (-moz-pref("arcline.context.menu", 1)) { 3 | 4 | @media (prefers-color-scheme: dark) { 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | /*--------------------CONTEXT MENU------------------------------*/ 16 | #tabContextMenu:has( 17 | #context_reloadTab:not([hidden]) 18 | ):has(:is(#context_zen-add-essential, #context_zen-remove-essential):not([hidden]) 19 | ):has(:is(#context_pinTab, #context_unpinTab, #context_bookmarkTab):not([hidden])) { 20 | :nth-child(1 of menuseparator) { 21 | display: flex !important; 22 | visibility: visible !important; 23 | order: -1 !important; 24 | } 25 | 26 | #context_reloadTab, 27 | :is(#context_zen-add-essential, #context_zen-remove-essential), 28 | :is(#context_pinTab, #context_unpinTab), 29 | #context_bookmarkTab { 30 | order: -999 !important; 31 | --height: 42px; 32 | width: 25% !important; 33 | height: var(--height) !important; 34 | background-position: center !important; 35 | 36 | .menu-text { 37 | display: none !important; 38 | } 39 | } 40 | 41 | #context_zen-remove-essential { 42 | margin-left: 37.5% !important; 43 | margin-top: calc(0px - var(--height)) !important; 44 | } 45 | 46 | #context_zen-add-essential { 47 | margin-left: 50% !important; 48 | margin-top: calc(0px - var(--height)) !important; 49 | } 50 | 51 | :is(#context_pinTab, #context_unpinTab) { 52 | margin-left: 25% !important; 53 | margin-top: calc(0px - var(--height)) !important; 54 | } 55 | 56 | #context_bookmarkTab { 57 | margin-left: 75% !important; 58 | margin-top: calc(0px - var(--height)) !important; 59 | } 60 | } 61 | 62 | 63 | menuseparator { 64 | 65 | /* Hide first separator */ 66 | &:first-of-type { 67 | display: none !important; 68 | } 69 | 70 | /* Reduce separator opacity */ 71 | &::before { 72 | opacity: 0.2; 73 | } 74 | } 75 | 76 | /*---------------------------------------------------------------------------*/ 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | #_4f2a7aa8-cbe9-49cd-9cf9-5a3ec0c48476_-menuitem-_copy-url.menuitem-iconic, #context-bookmarklink ,#toolbar-context-reloadSelectedTab, #toolbar-context-bookmarkSelectedTab 100 | 101 | { 102 | display: none !important; 103 | } 104 | 105 | 106 | :not(:not(menubar) > menu, #ContentSelectDropdown) 107 | > menupopup 108 | > menuitem:not( 109 | .menuitem-iconic, 110 | [type='checkbox'], 111 | [type='radio'], 112 | .in-menulist, 113 | .in-menulist menuitem, 114 | .unified-nav-current 115 | ), 116 | :not(:not(menubar) > menu, #ContentSelectDropdown) 117 | > menupopup 118 | > menu:not( 119 | .menu-iconic, 120 | [type='checkbox'], 121 | [type='radio'], 122 | .in-menulist, 123 | .in-menulist menu, 124 | .unified-nav-current 125 | ), 126 | #toggle_toolbar-menubar, 127 | #PanelUI-history toolbarbutton, 128 | #unified-extensions-context-menu menuitem { 129 | background-image: var(--menu-image) !important; 130 | background-size: 16px !important; 131 | 132 | background-position: var(--zen-contextmenu-menuitem-padding-inline) center !important; 133 | background-repeat: no-repeat !important; 134 | -moz-context-properties: fill, fill-opacity !important; 135 | fill: currentColor !important; 136 | } 137 | 138 | 139 | #context-setDesktopBackground, 140 | .viewCustomizeToolbar { 141 | --menu-image: url('customize.svg'); 142 | } 143 | 144 | #context-reloadimage, 145 | #context_reloadTab, 146 | #context_reloadSelectedTabs, 147 | #toolbar-context-reloadSelectedTab, 148 | #toolbar-context-reloadSelectedTabs, 149 | #context_zen-reset-pinned-tab { 150 | --menu-image: url("data:image/svg+xml,%3Csvg width='16.8' height='18' viewBox='0 0 16 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.57617 1.01987C8.31099 0.701658 7.83807 0.658665 7.51986 0.923838C7.20165 1.18901 7.15866 1.66193 7.42383 1.98014L8.49597 3.2667C8.33208 3.25563 8.1667 3.25 8 3.25C3.99594 3.25 0.75 6.49594 0.75 10.5C0.75 14.5041 3.99594 17.75 8 17.75C12.0041 17.75 15.25 14.5041 15.25 10.5C15.25 10.2183 15.0143 10 14.7326 10H14.2292C13.9599 10 13.75 10.2308 13.75 10.5C13.75 13.6756 11.1756 16.25 8 16.25C4.82436 16.25 2.25 13.6756 2.25 10.5C2.25 7.32437 4.82436 4.75 8 4.75C8.34186 4.75 8.67674 4.77984 9.0022 4.83704C9.08019 4.85075 9.15841 4.85357 9.23486 4.84664L7.42383 7.01987C7.15866 7.33807 7.20165 7.811 7.51986 8.07617C7.83807 8.34134 8.31099 8.29835 8.57617 7.98014L11.0762 4.98014C11.3079 4.70201 11.3079 4.298 11.0762 4.01987L8.57617 1.01987Z' fill='white' fill-opacity='1'/%3E%3C/svg%3E ") !important; 151 | 152 | } 153 | 154 | #context_pinTab, 155 | #context_unpinTab, 156 | #context_pinSelectedTabs, 157 | #context_unpinSelectedTabs, 158 | .customize-context-moveToPanel, 159 | #context_zen-replace-pinned-url-with-current { 160 | --menu-image: url("data:image/svg+xml,%3Csvg width='44.30078125px' height='66.107421875px' direction='ltr' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cg fill-rule='nonzero' transform='scale(1,-1) translate(0,-69.107421875)'%3E%3Cpath fill='white' stroke='white' fill-opacity='1.0' stroke-width='1.0' d=' M 7.43359375,27.994140625 C 7.43359375,26.94140625 8.25,26.232421875 9.49609375,26.232421875 L 21.35546875,26.232421875 L 21.35546875,12.2890625 C 21.35546875,10.763671875 21.87109375,9.32421875 22.150390625,9.32421875 C 22.408203125,9.32421875 22.9453125,10.763671875 22.9453125,12.2890625 L 22.9453125,26.232421875 L 34.8046875,26.232421875 C 36.05078125,26.232421875 36.8671875,26.94140625 36.8671875,27.994140625 C 36.8671875,32.69921875 33.279296875,36.99609375 27.80078125,38.80078125 L 27.134765625,49.048828125 C 29.00390625,50.31640625 31.58203125,52.25 32.7421875,53.904296875 C 33.0859375,54.419921875 33.322265625,54.9140625 33.322265625,55.322265625 C 33.322265625,56.16015625 32.65625,56.783203125 31.625,56.783203125 L 12.67578125,56.783203125 C 11.64453125,56.783203125 10.978515625,56.16015625 10.978515625,55.322265625 C 10.978515625,54.9140625 11.193359375,54.419921875 11.55859375,53.904296875 C 12.697265625,52.25 15.275390625,50.2734375 17.14453125,49.048828125 L 16.5,38.80078125 C 11.021484375,36.99609375 7.43359375,32.69921875 7.43359375,27.994140625 Z%0A' /%3E%3C/g%3E%3C/svg%3E%0A"); 161 | } 162 | 163 | #context_zen-add-essential { 164 | --menu-image: url("data:image/svg+xml,%3Csvg width='49.328125px' height='62.400390625px' direction='ltr' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cg fill-rule='nonzero' transform='scale(1,-1) translate(-4,-52.400390625)'%3E%3Cpath fill='white' stroke='white' fill-opacity='1.0' stroke-width='1.0' d=' M 24.6640625,5.37109375 C 36.115234375,5.37109375 45.482421875,14.73828125 45.482421875,26.2109375 C 45.482421875,37.662109375 36.115234375,47.029296875 24.6640625,47.029296875 C 13.212890625,47.029296875 3.845703125,37.662109375 3.845703125,26.2109375 C 3.845703125,14.73828125 13.212890625,5.37109375 24.6640625,5.37109375 Z M 19.056640625,36.48046875 C 21.52734375,36.48046875 23.6328125,34.84765625 24.6640625,33.021484375 C 25.716796875,34.84765625 27.822265625,36.48046875 30.271484375,36.48046875 C 34.07421875,36.48046875 36.91015625,33.55859375 36.91015625,29.69140625 C 36.91015625,22.837890625 29.21875,17.05859375 25.373046875,14.56640625 C 25.13671875,14.39453125 24.857421875,14.265625 24.6640625,14.265625 C 24.470703125,14.265625 24.212890625,14.39453125 23.955078125,14.56640625 C 20.109375,17.05859375 12.41796875,22.837890625 12.41796875,29.69140625 C 12.41796875,33.55859375 15.25390625,36.48046875 19.056640625,36.48046875 Z%0A' /%3E%3C/g%3E%3C/svg%3E%0A"); 165 | 166 | 167 | } 168 | 169 | #context_zen-remove-essential { 170 | --menu-image: url('essential-remove.svg'); 171 | } 172 | 173 | .customize-context-removeFromToolbar { 174 | --menu-image: url("data:image/svg+xml,%3Csvg width='44.4296875px' height='66.107421875px' direction='ltr' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cg fill-rule='nonzero' transform='scale(1,-1) translate(0,-66.107421875)'%3E%3Cpath fill='white' stroke='white' fill-opacity='1.0' stroke-width='1.0' d=' M 12.67578125,56.783203125 C 11.64453125,56.783203125 11.0,56.16015625 11.0,55.322265625 C 11.0,54.95703125 11.150390625,54.548828125 11.4296875,54.09765625 C 12.482421875,52.421875 15.2109375,50.337890625 17.166015625,49.048828125 L 16.88671875,44.880859375 L 35.44921875,26.318359375 C 36.330078125,26.51171875 36.8671875,27.134765625 36.8671875,27.994140625 C 36.8671875,32.69921875 33.279296875,36.99609375 27.80078125,38.80078125 L 27.15625,49.048828125 C 28.982421875,50.2734375 31.517578125,52.20703125 32.69921875,53.818359375 C 33.064453125,54.35546875 33.322265625,54.87109375 33.322265625,55.322265625 C 33.322265625,56.16015625 32.677734375,56.783203125 31.625,56.783203125 Z M 40.17578125,17.423828125 C 40.390625,17.208984375 40.734375,17.208984375 40.94921875,17.423828125 C 41.185546875,17.66015625 41.1640625,17.982421875 40.94921875,18.17578125 L 4.2109375,54.9140625 C 4.0390625,55.107421875 3.6953125,55.150390625 3.458984375,54.9140625 C 3.244140625,54.69921875 3.244140625,54.376953125 3.458984375,54.162109375 Z M 7.43359375,27.994140625 C 7.43359375,26.94140625 8.25,26.232421875 9.49609375,26.232421875 L 21.35546875,26.232421875 L 21.35546875,12.2890625 C 21.35546875,10.763671875 21.892578125,9.32421875 22.150390625,9.32421875 C 22.4296875,9.32421875 22.966796875,10.763671875 22.966796875,12.2890625 L 22.966796875,26.25390625 L 28.74609375,26.25390625 L 16.263671875,38.71484375 C 10.9140625,36.8671875 7.43359375,32.634765625 7.43359375,27.994140625 Z%0A' /%3E%3C/g%3E%3C/svg%3E%0A"); 175 | 176 | } 177 | 178 | #zen-sidebar-web-panel-pinned[pinned='true'] { 179 | list-style-image: url("data:image/svg+xml,%3Csvg width='44.30078125px' height='66.107421875px' direction='ltr' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cg fill-rule='nonzero' transform='scale(1,-1) translate(0,-66.107421875)'%3E%3Cpath fill='white' stroke='white' fill-opacity='1.0' stroke-width='1.0' d=' M 7.43359375,27.994140625 C 7.43359375,26.94140625 8.25,26.232421875 9.49609375,26.232421875 L 21.35546875,26.232421875 L 21.35546875,12.2890625 C 21.35546875,10.763671875 21.87109375,9.32421875 22.150390625,9.32421875 C 22.408203125,9.32421875 22.9453125,10.763671875 22.9453125,12.2890625 L 22.9453125,26.232421875 L 34.8046875,26.232421875 C 36.05078125,26.232421875 36.8671875,26.94140625 36.8671875,27.994140625 C 36.8671875,32.69921875 33.279296875,36.99609375 27.80078125,38.80078125 L 27.134765625,49.048828125 C 29.00390625,50.31640625 31.58203125,52.25 32.7421875,53.904296875 C 33.0859375,54.419921875 33.322265625,54.9140625 33.322265625,55.322265625 C 33.322265625,56.16015625 32.65625,56.783203125 31.625,56.783203125 L 12.67578125,56.783203125 C 11.64453125,56.783203125 10.978515625,56.16015625 10.978515625,55.322265625 C 10.978515625,54.9140625 11.193359375,54.419921875 11.55859375,53.904296875 C 12.697265625,52.25 15.275390625,50.2734375 17.14453125,49.048828125 L 16.5,38.80078125 C 11.021484375,36.99609375 7.43359375,32.69921875 7.43359375,27.994140625 Z%0A' /%3E%3C/g%3E%3C/svg%3E%0A") !important; 180 | } 181 | 182 | #zen-sidebar-web-panel-pinned { 183 | list-style-image: url("data:image/svg+xml,%3Csvg width='44.4296875px' height='66.107421875px' direction='ltr' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cg fill-rule='nonzero' transform='scale(1,-1) translate(0,-66.107421875)'%3E%3Cpath fill='black' stroke='black' fill-opacity='1.0' stroke-width='1.0' d=' M 12.67578125,56.783203125 C 11.64453125,56.783203125 11.0,56.16015625 11.0,55.322265625 C 11.0,54.95703125 11.150390625,54.548828125 11.4296875,54.09765625 C 12.482421875,52.421875 15.2109375,50.337890625 17.166015625,49.048828125 L 16.88671875,44.880859375 L 35.44921875,26.318359375 C 36.330078125,26.51171875 36.8671875,27.134765625 36.8671875,27.994140625 C 36.8671875,32.69921875 33.279296875,36.99609375 27.80078125,38.80078125 L 27.15625,49.048828125 C 28.982421875,50.2734375 31.517578125,52.20703125 32.69921875,53.818359375 C 33.064453125,54.35546875 33.322265625,54.87109375 33.322265625,55.322265625 C 33.322265625,56.16015625 32.677734375,56.783203125 31.625,56.783203125 Z M 40.17578125,17.423828125 C 40.390625,17.208984375 40.734375,17.208984375 40.94921875,17.423828125 C 41.185546875,17.66015625 41.1640625,17.982421875 40.94921875,18.17578125 L 4.2109375,54.9140625 C 4.0390625,55.107421875 3.6953125,55.150390625 3.458984375,54.9140625 C 3.244140625,54.69921875 3.244140625,54.376953125 3.458984375,54.162109375 Z M 7.43359375,27.994140625 C 7.43359375,26.94140625 8.25,26.232421875 9.49609375,26.232421875 L 21.35546875,26.232421875 L 21.35546875,12.2890625 C 21.35546875,10.763671875 21.892578125,9.32421875 22.150390625,9.32421875 C 22.4296875,9.32421875 22.966796875,10.763671875 22.966796875,12.2890625 L 22.966796875,26.25390625 L 28.74609375,26.25390625 L 16.263671875,38.71484375 C 10.9140625,36.8671875 7.43359375,32.634765625 7.43359375,27.994140625 Z%0A' /%3E%3C/g%3E%3C/svg%3E%0A") !important; 184 | } 185 | 186 | #context_duplicateTab, 187 | #context_duplicateTabs { 188 | --menu-image: url('duplicate-tab.svg'); 189 | } 190 | 191 | #zen-context-menu-compact-mode { 192 | --menu-image: url('sidebar.svg'); 193 | } 194 | 195 | #context_bookmarkTab, 196 | #context_bookmarkSelectedTabs, 197 | #toggle_PersonalToolbar, 198 | #context-bookmarklink, 199 | #toolbar-context-bookmarkSelectedTab, 200 | #toolbar-context-bookmarkSelectedTabs { 201 | --menu-image: url("data:image/svg+xml,%3Csvg width='43.0546875px' height='50.40625px' direction='ltr' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cg fill-rule='nonzero' transform='scale(1,-0.9) translate(0,-52.40625)'%3E%3Cpath fill='white' stroke='white' fill-opacity='1.0' stroke-width='1.0' d=' M 6.853515625,6.6171875 C 7.369140625,6.6171875 7.798828125,6.853515625 8.228515625,7.283203125 L 20.23828125,19.29296875 C 20.796875,19.8515625 21.140625,19.958984375 21.52734375,19.958984375 C 21.9140625,19.958984375 22.279296875,19.8515625 22.81640625,19.29296875 L 34.8046875,7.3046875 C 35.27734375,6.810546875 35.685546875,6.6171875 36.201171875,6.6171875 C 37.0390625,6.6171875 37.576171875,7.21875 37.576171875,8.12109375 L 37.576171875,45.267578125 C 37.576171875,48.85546875 35.6640625,50.7890625 32.0546875,50.7890625 L 11.0,50.7890625 C 7.390625,50.7890625 5.478515625,48.85546875 5.478515625,45.267578125 L 5.478515625,8.12109375 C 5.478515625,7.21875 6.015625,6.6171875 6.853515625,6.6171875 Z%0A' /%3E%3C/g%3E%3C/svg%3E%0A"); 202 | } 203 | 204 | menuitem[id='placesContext_show_bookmark:info'], 205 | menuitem[id='placesContext_show_folder:info'], 206 | menuitem[id='placesContext_show:info'] { 207 | --menu-image: url('edit.svg'); 208 | } 209 | 210 | menuitem[id='placesContext_showAllBookmarks'], 211 | #BMB_bookmarksShowAllTop, 212 | #BMB_bookmarksShowAll, 213 | .customize-context-manageExtension, 214 | .unified-extensions-context-menu-manage-extension { 215 | --menu-image: url('manage.svg'); 216 | } 217 | 218 | #BMB_viewBookmarksSidebar { 219 | --menu-image: url('chrome://browser/skin/sidebars.svg'); 220 | } 221 | 222 | #BMB_searchBookmarks { 223 | --menu-image: url('search-page.svg'); 224 | } 225 | 226 | 227 | menuseparator { 228 | &::before { 229 | display: none !important; 230 | } 231 | } 232 | 233 | 234 | 235 | #context_closeTabOptions,#context_closeTab ,#context_openANewTab, #context_moveTabOptions, #context_zen-replace-pinned-url-with-current , #context_zen-reset-pinned-tab { 236 | display: none !important; 237 | } 238 | 239 | 240 | 241 | } 242 | } 243 | -------------------------------------------------------------------------------- /arcline/modules/~extras.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | .tab-audio-button { 8 | display: none !important; 9 | } 10 | 11 | 12 | #navigator-toolbox:not([animate='true']) #titlebar { 13 | 14 | &::before { 15 | 16 | background: transparent !important; 17 | 18 | 19 | 20 | 21 | }} 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | /*-----------------------new tab button in sidebar-------------------------------------*/ 31 | 32 | 33 | 34 | 35 | @media (prefers-color-scheme: light) { 36 | 37 | 38 | 39 | #tabbrowser-arrowscrollbox[orient="vertical"] #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button, 40 | #vertical-tabs-newtab-button { 41 | appearance: none; 42 | border-radius: 12px !important; 43 | height: 0.5rem !important; 44 | min-height: 38px !important; 45 | filter: brightness(190%) !important; 46 | line-height: var(--tab-label-line-height); 47 | border-radius: var(--border-radius-medium); 48 | padding-left: 9px !important; 49 | width: var(--tab-collapsed-background-width); 50 | margin-inline: 0px !important; 51 | 52 | #tabbrowser-tabs[orient="vertical"]:not([expanded]) & > .toolbarbutton-text { 53 | display: flex; 54 | 55 | } 56 | 57 | &:hover { 58 | border-radius: 12px !important; 59 | height: 8px !important; 60 | background-color: var(--tab-hover-background-color); 61 | outline-color: var(--tab-hover-outline-color); 62 | } 63 | 64 | &:focus-visible { 65 | outline: var(--focus-outline); 66 | outline-offset: var(--focus-outline-inset); 67 | } 68 | 69 | > .toolbarbutton-text { 70 | text-align: start; 71 | margin-left: 5px !important; 72 | padding-inline-start: var(--tab-icon-end-margin); 73 | } 74 | } 75 | 76 | 77 | } 78 | 79 | 80 | 81 | 82 | 83 | 84 | @media (prefers-color-scheme: dark) { 85 | 86 | 87 | #tabbrowser-arrowscrollbox[orient="vertical"] #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button, 88 | #vertical-tabs-newtab-button { 89 | appearance: none; 90 | border-radius: 12px !important; 91 | height: 0.5rem !important; 92 | min-height: 38px !important; 93 | line-height: var(--tab-label-line-height); 94 | border-radius: var(--border-radius-medium); 95 | padding-left: 9px !important; 96 | width: var(--tab-collapsed-background-width); 97 | margin-inline: 0px !important; 98 | 99 | #tabbrowser-tabs[orient="vertical"]:not([expanded]) & > .toolbarbutton-text { 100 | display: flex; 101 | 102 | } 103 | 104 | &:hover { 105 | border-radius: 12px !important; 106 | height: 8px !important; 107 | background-color: var(--tab-hover-background-color); 108 | outline-color: var(--tab-hover-outline-color); 109 | } 110 | 111 | &:focus-visible { 112 | outline: var(--focus-outline); 113 | outline-offset: var(--focus-outline-inset); 114 | } 115 | 116 | > .toolbarbutton-text { 117 | text-align: start; 118 | margin-left: 5px !important; 119 | padding-inline-start: var(--tab-icon-end-margin); 120 | } 121 | } 122 | 123 | } 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | /*------------------------------------------------------------------------------------------------------------------------------------*/ 135 | /*------------------------------------------------------------------------------------------------------------------------------------*/ 136 | 137 | 138 | 139 | 140 | 141 | #zen-media-controls-toolbar toolbaritem { 142 | border-radius: 12px !important; 143 | margin-bottom: -12px !important; 144 | 145 | } 146 | 147 | @media not (-moz-pref("arcline.pinned.extensions", 1)) { 148 | 149 | 150 | #tabbrowser-tabs { 151 | 152 | min-height: calc(100% + 4px) !important; 153 | } 154 | } 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | .tab-text{ 166 | width: 98% !important; 167 | overflow: hidden; 168 | display: inline-block; 169 | text-overflow: ellipsis; 170 | white-space: nowrap; 171 | opacity: 1 !important; 172 | 173 | filter: brightness(100%) !important; 174 | 175 | } 176 | 177 | 178 | 179 | 180 | 181 | 182 | #zen-media-focus-button { 183 | align-self: center; 184 | transition: 185 | opacity 0.2s ease, 186 | transform 0.2s ease; 187 | position: relative; 188 | 189 | & image { 190 | &:-moz-broken { 191 | content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3C/svg%3E") !important; 192 | background: color-mix(in srgb, var(--zen-primary-color) 70%, transparent 30%); 193 | } 194 | } 195 | } 196 | 197 | 198 | 199 | 200 | #zen-media-info-vbox { 201 | #zen-media-controls-toolbar:not([media-position-hidden]) & { 202 | transition-delay: 0.01s !important; 203 | } 204 | overflow-x: hidden; 205 | 206 | overflow-x: visible; 207 | 208 | white-space: nowrap 209 | /* Overflow inner box shadow from the left to simulate overflow */ 210 | 211 | min-width: 1px; 212 | 213 | &::before { 214 | content: ''; 215 | position: absolute; 216 | width: 0.6em; 217 | background: none !important; 218 | background: linear-gradient(to right, var(--zen-media-control-bg) 0%, transparent 100%); 219 | pointer-events: none; 220 | top: 6px; 221 | left: 0; 222 | height: calc(100% - 6px); 223 | z-index: 1; 224 | } 225 | 226 | & label { 227 | min-height: 16px; 228 | margin-left: 0; 229 | font-weight: 500; 230 | position: relative; /* For the animation */ 231 | 232 | &[overflow] { 233 | animation: zen-back-and-forth-text 10s infinite ease-in-out; 234 | } 235 | } 236 | } 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | /*-------------------------------------------------------------------------------------------------------*/ 256 | 257 | /* === SVG Separator Line === */ 258 | .vertical-pinned-tabs-container-separator { 259 | background: none !important; /* Remove original background line */ 260 | height: 16px !important; /* Set fixed height */ 261 | max-height: none !important; /* Remove max-height restriction */ 262 | display: flex !important; /* Use flexbox to center SVG */ 263 | flex-direction: row !important; /* Arrange items horizontally */ 264 | align-items: center !important; /* Vertically center items */ 265 | justify-content: flex-end !important; /* Align items to the right */ 266 | overflow: hidden !important; /* Hide overflow during animation */ 267 | border: none !important; /* Ensure no border is applied by default */ 268 | width: 100% !important;; /* Ensure separator takes full available width */ 269 | box-sizing: border-box !important; /* Include padding in width */ 270 | gap: 0; /* Set initial gap to 0 */ 271 | margin: 5px 0 5px 0 !important; 272 | } 273 | 274 | 275 | 276 | .vertical-pinned-tabs-container-separator svg { 277 | width: 100% !important; /* Set width explicitly to account for padding */ 278 | height: 1px; /* Reduced from 2px to make thinner line */ 279 | min-height: 1.5px !important; 280 | display: block; /* Ensure SVG behaves as a block element */ 281 | overflow: visible; /* Allow potential animations to go outside bounds */ 282 | transition: width 0.15s ease-in-out; /* Add transition for width */ 283 | min-width: 0; /* Allow shrinking below intrinsic size */ 284 | margin-right: 0; /* Reduced from 8px to decrease space between line and buttons */ 285 | } 286 | 287 | /* Shrink SVG width on separator hover */ 288 | .vertical-pinned-tabs-container-separator:hover svg { 289 | width: calc(100% - 100px) !important; 290 | } 291 | 292 | /* Update SVG line selectors to path */ 293 | .vertical-pinned-tabs-container-separator svg path { 294 | stroke: light-dark(rgba(1, 1, 1, 0.15), rgba(255, 255, 255, 0.2)); /* Line color */ 295 | stroke-width: 1px !important; /* Reduced from 1.5px to make thinner line */ 296 | vector-effect: non-scaling-stroke; /* Keep stroke width consistent on scaling */ 297 | fill: none; /* Ensure path isn't filled */ 298 | transition: stroke 0.15s ease-in-out; /* Add transition for color */ 299 | } 300 | 301 | /* Optional: Change path color slightly on hover */ 302 | .vertical-pinned-tabs-container-separator:hover svg path { 303 | stroke: light-dark(rgba(1, 1, 1, 0.3), rgba(255, 255, 255, 0.4)); 304 | } 305 | 306 | /* --- End SVG Path Animation --- */ 307 | 308 | /* Sort & Clear Button Styling & Animation */ 309 | .vertical-pinned-tabs-container-separator #sort-button, 310 | .vertical-pinned-tabs-container-separator #clear-button { 311 | /* Inherits font-size, color from tab_sort.uc.js */ 312 | flex-shrink: 0; /* Prevent button from shrinking */ 313 | min-width: 0; /* Ensure it can shrink to zero */ 314 | max-width: 0; /* Use max-width to control hidden state */ 315 | opacity: 0; /* Start fully transparent */ 316 | overflow: hidden; /* Hide content when width is 0 */ 317 | pointer-events: none; /* Not interactive initially */ 318 | transition: max-width 0.15s ease-in-out, opacity 0.1s ease-in-out 0.05s; /* Transition max-width */ 319 | margin: 0 !important; /* Override any potential margins */ 320 | padding: 0 !important; /* Force zero padding initially */ 321 | white-space: nowrap; /* Prevent label wrapping */ 322 | border-radius: 4px; /* Match hover state */ 323 | } 324 | 325 | .vertical-pinned-tabs-container-separator:hover #sort-button, 326 | .vertical-pinned-tabs-container-separator:hover #clear-button { 327 | max-width: 45px !important; /* Reduced from 55px to make buttons smaller */ 328 | opacity: 1; /* Fade in */ 329 | pointer-events: auto; /* Become interactive */ 330 | padding: 1px !important; /* Restore original padding */ 331 | margin-left: 2px !important; /* Reduced from 4px to decrease space between buttons */ 332 | cursor: pointer !important; 333 | } 334 | 335 | /* Hide the line if the separator is meant to be hidden (e.g., no sortable tabs) */ 336 | #vertical-pinned-tabs-container .zen-workspace-tabs-section[hide-separator] .vertical-pinned-tabs-container-separator, 337 | .vertical-pinned-tabs-container-separator.has-no-sortable-tabs { 338 | max-height: 0 !important; 339 | margin: 0 auto !important; 340 | padding: 0 !important; /* Remove padding when hidden */ 341 | border: none !important; /* Ensure no border shows up */ 342 | overflow: hidden !important; /* Hide content when container is hidden */ 343 | gap: 0 !important; /* Remove gap when hidden */ 344 | } 345 | 346 | .vertical-pinned-tabs-container-separator.has-no-sortable-tabs svg, 347 | .vertical-pinned-tabs-container-separator.has-no-sortable-tabs #sort-button, 348 | .vertical-pinned-tabs-container-separator.has-no-sortable-tabs #clear-button { 349 | display: none !important; /* Specifically hide the SVG and buttons */ 350 | width: 0 !important; 351 | opacity: 0 !important; 352 | } 353 | /* === END SVG Separator Line === */ 354 | 355 | /* Button icons styling */ 356 | #sort-button, #clear-button { 357 | display: flex !important; 358 | align-items: center !important; 359 | justify-content: center !important; 360 | font-size: 11px !important; /* Reduced font size */ 361 | } 362 | 363 | #sort-button .broom-icon { 364 | width: 12px !important; /* Reduced from 14px */ 365 | height: 12px !important; /* Reduced from 14px */ 366 | margin-right: 2px !important; /* Reduced from 4px */ 367 | fill: currentColor !important; 368 | } 369 | 370 | #clear-button .arrow-icon { 371 | width: 12px !important; /* Reduced from 14px */ 372 | height: 12px !important; /* Reduced from 14px */ 373 | margin-right: 2px !important; /* Reduced from 4px */ 374 | stroke: currentColor !important; 375 | } 376 | 377 | #sort-button .toolbarbutton-text, 378 | #clear-button .toolbarbutton-text { 379 | margin-left: 1px !important; /* Reduced from 2px */ 380 | } 381 | 382 | /* Broom brushing animation - updated */ 383 | @keyframes brush-sweep { 384 | 0% { transform: rotate(0deg); } 385 | 20% { transform: rotate(-15deg); } 386 | 40% { transform: rotate(15deg); } 387 | 60% { transform: rotate(-15deg); } 388 | 80% { transform: rotate(15deg); } 389 | 100% { transform: rotate(0deg); } 390 | } 391 | 392 | #sort-button.brushing .broom-icon { 393 | animation: brush-sweep 0.8s ease-in-out; 394 | transform-origin: 50% 50%; /* Center of broom */ 395 | } 396 | 397 | /* Arrow pulse animation */ 398 | @keyframes arrow-pulse { 399 | 0% { transform: scale(1); } 400 | 50% { transform: scale(1.2); } 401 | 100% { transform: scale(1); } 402 | } 403 | 404 | #clear-button.clearing .arrow-icon { 405 | animation: arrow-pulse 0.6s ease-in-out; 406 | } 407 | 408 | #sort-button.hidden-button, #clear-button.hidden-button { 409 | display: none !important; 410 | pointer-events: none !important; 411 | opacity: 0 !important; 412 | max-width: 0 !important; 413 | margin: 0 !important; 414 | padding: 0 !important; 415 | } 416 | 417 | /* Shrink SVG width on separator hover when no buttons are visible */ 418 | .vertical-pinned-tabs-container-separator:hover svg { 419 | /* Calculate width relative to the base width */ 420 | width: calc(100% - 421 | (100px * 422 | (1 - 423 | (var(--sort-button-hidden, 0) * var(--clear-button-hidden, 0)) 424 | ) 425 | ) 426 | ) !important; 427 | } 428 | 429 | /* Hide the buttons entirely when they're hidden */ 430 | .vertical-pinned-tabs-container-separator.has-no-sortable-tabs #sort-button, 431 | .vertical-pinned-tabs-container-separator.has-no-sortable-tabs #clear-button { 432 | display: none !important; /* Specifically hide the buttons */ 433 | width: 0 !important; 434 | opacity: 0 !important; 435 | } 436 | 437 | /* The separator is always visible, even if buttons are hidden */ 438 | .vertical-pinned-tabs-container-separator { 439 | display: flex !important; 440 | flex-direction: row !important; 441 | align-items: center !important; 442 | width: 93% !important; 443 | margin-left: 6.5px !important; 444 | justify-content: flex-end !important; 445 | } 446 | 447 | 448 | 449 | 450 | @media (-moz-pref("arcline.pinned.tabs.bg", 1)) { 451 | 452 | .tabbrowser-tab[pinned] .tab-background { 453 | background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)) !important; 454 | box-shadow: 0 0px 3px transparent !important; 455 | border-radius: 12px !important; 456 | position: relative !important; 457 | transition: background-color 0.3s ease, box-shadow 0.3s ease !important; 458 | } 459 | } 460 | 461 | 462 | -------------------------------------------------------------------------------- /arcline/modules/~features.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | @media (prefers-color-scheme: light) { 6 | #zen-media-controls-toolbar toolbaritem{ 7 | 8 | } 9 | #zen-media-controls-toolbar toolbaritem::before { 10 | content: '' !important; 11 | position: absolute !important; 12 | background: transparent !important; 13 | top: 0px !important; 14 | bottom: 5px !important; 15 | left: 50% !important; 16 | transform: translate(-50%, 0); 17 | width: 9% !important; 18 | 19 | border-radius: 10px; 20 | padding-top: 34px !important; 21 | 22 | height: calc(var(--toolbar-height)) !important; 23 | z-index: -10000 !important; 24 | 25 | } 26 | 27 | #zen-media-controls-toolbar { 28 | & > toolbaritem::before { 29 | content: '' !important; 30 | position: absolute !important; 31 | background: transparent !important; 32 | --zen-media-control-bg: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0)) !important; 33 | flex-grow: 1; 34 | 35 | border-radius: 12px !important; 36 | transition: padding 0.3s ease-out; 37 | z-index: -10000 !important; 38 | left: 0; 39 | bottom: 0; 40 | padding: 0px 6px; 41 | border-radius: var(--border-radius-medium); 42 | box-shadow: none !important; 43 | background-color: transparent !important; 44 | margin-bottom: -5px !important; 45 | backdrop-filter: saturate(3) contrast(1) blur(10px) brightness(90%) !important; 46 | width: 95% !important; 47 | } 48 | } 49 | 50 | 51 | } 52 | 53 | 54 | 55 | @media (prefers-color-scheme: dark) { 56 | 57 | #zen-media-controls-toolbar toolbaritem::before { 58 | content: '' !important; 59 | position: absolute !important; 60 | background: transparent !important; 61 | top: 0px !important; 62 | left: 50% !important; 63 | transform: translate(-50%, 0); 64 | width: 9% !important; 65 | 66 | border-radius: 10px; 67 | padding-top: 34px !important; 68 | padding-bottom: 5px !important; 69 | height: calc(var(--toolbar-height)) !important; 70 | z-index: -10000 !important; 71 | 72 | } 73 | 74 | #zen-media-controls-toolbar { 75 | & > toolbaritem::before { 76 | content: '' !important; 77 | position: absolute !important; 78 | background: transparent !important; 79 | --zen-media-control-bg: light-dark(rgba(255, 255, 255, 0.87), rgba(0, 0, 0, 0)) !important; 80 | flex-grow: 1; 81 | 82 | border-radius: 12px !important; 83 | transition: padding 0.3s ease-out; 84 | z-index: -10000 !important; 85 | left: 0; 86 | bottom: 0; 87 | padding: 0px 4px; 88 | border-radius: var(--border-radius-medium); 89 | box-shadow: none !important; 90 | background-color: transparent !important; 91 | backdrop-filter: saturate(3) contrast(1) blur(10px) !important; 92 | width: 95% !important; 93 | } 94 | } 95 | } 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | /* ============ COMPACT EXTENSIONS (Credit: KiKaraage) ================== */ 108 | #unified-extensions-view{ 109 | 110 | --uei-icon-size: 20px !important; 111 | --extensions-in-row: 4; 112 | 113 | width: 100% !important; 114 | 115 | /* hide not needed */ 116 | #unified-extensions-description, 117 | toolbarseparator, 118 | .unified-extensions-item-menu-button.subviewbutton, 119 | .unified-extensions-item-action-button .unified-extensions-item-contents 120 | {display: none !important;} 121 | 122 | /* spacing */ 123 | 124 | .panel-header {margin-top: 4px !important;} 125 | 126 | [data-l10n-id="unified-extensions-header-title"]::before 127 | {margin-inline-end: 14px !important;} 128 | 129 | #unified-extensions-manage-extensions 130 | {padding-left: 10px !important;} 131 | 132 | #unified-extensions-messages-container::empty 133 | {margin: 0px !important;} 134 | 135 | #overflowed-extensions-list 136 | {padding-bottom: 5px !important;} 137 | 138 | #unified-extensions-area 139 | {padding-block: 5px !important;} 140 | 141 | .unified-extensions-list 142 | {padding-top: 5px !important;} 143 | 144 | /* grid layout */ 145 | #overflowed-extensions-list, 146 | #unified-extensions-area, 147 | .unified-extensions-list { 148 | display: grid !important; 149 | grid-template-columns: repeat( var(--extensions-in-row), calc(var(--uei-icon-size) + 32px) ); 150 | justify-items: center !important; 151 | align-items: center !important; 152 | } 153 | 154 | /* buttons */ 155 | .unified-extensions-item{ 156 | padding: 4px !important; 157 | border-radius: var(--zen-border-radius) !important; 158 | 159 | .unified-extensions-item-icon, 160 | .toolbarbutton-badge-stack 161 | {margin: 0px !important;} 162 | 163 | .unified-extensions-item-action-button 164 | {padding-inline: 5px !important;} 165 | 166 | } 167 | 168 | /* top & bottom borders */ 169 | #unified-extensions-area { 170 | border-top: 1px solid var(--panel-separator-color); 171 | border-bottom: 1px solid var(--panel-separator-color); 172 | padding-top: 5px !important; 173 | padding-bottom: 5px !important; 174 | } 175 | 176 | } 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | /*---------------------------------music notes from playing tab---------------------------------------*/ 186 | #navigator-toolbox { 187 | .tab-icon-overlay { 188 | &:is([soundplaying], [muted], [activemedia-blocked]) { 189 | display: block !important; 190 | background: transparent !important; 191 | border: 0 !important; 192 | border-radius: 0 !important; 193 | right: -2px !important; 194 | scale: 2 !important; 195 | } 196 | 197 | &[soundplaying] { 198 | list-style-image: url('chrome://browser/content/zen-images/note-indicator.svg') !important; 199 | top: -13px !important; 200 | } 201 | 202 | &:is([activemedia-blocked]) { 203 | list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEb0lEQVR4nO2YW4hWVRTHP7URvM6ooWYa1kPlQ4GXxISyC4mUVg/RZQyjKLUsUcsmJRm8pqUgXSCRbhZCqT1mkARaWm+l9qK9jCKZ2KhUD4nWLxbuM/1ncfb3nfPNGaeH84cPPtZ/n7XX2pe1/3tXKiVKlChR4v8I4BZgFtCnB/q+AnjQYuiqo2bgby6htbAIs/e/KvRtMTxWr5PpwHn+w3uFR1o7hg+kf4vlnrwOrgHaxckp4Npuizgex3Wh7wS/AWOyftwH2C8f/wFM6Pao4/FMDDEk+BboneXDBXTGbMe/CvwKbOqGoFcCx4Hlzv64i2l+LUdXAmflg22Of9E5bCowif7O92LHfyLcGWBYNWerXePhwt0JXBT+G6BXUYmEPvaKf+trmnAj3CCvjDkZ5Bq2CDcwTHmCX4DRRSYR+hkNnJR+jgEDhH/FDfTANCdPukaDhXtNuL+AKe7Qmgc8kjNoKyrPAwuBBrHfGvpIsEa4wSG2BE+kOf5aGrwl9mGuarzhvtsqXOZkgOfku3cdt1G434Ghwr0t3B7vtNGt/8nCLXUzpU7nC5c+QvFEnnXfzhVuqFvmS4WbIvYLunIqQUslOKWbGDgk3GqxD3HTvE+XSGjTFxgXfn1TOPtGD7sm4dcId1DsvYHTwt2nTtcJ8anbfIrxkQrX7ipc/7A8zkkb+/860E/aDXeDsUq4Ca7vq4XbkbaHjNglRMdhZEJN7G1upn4W7mWXxHfEccAl0yLcEbH3cpXyUXcoJ9ihiRwU4qHIqOtM3Sh2U6YjIhs1hg3S/ipR2IYbhNtOyrkBPCz2HzURzfx2sW8T+2axPyD2Q27d63KK4awruT8Jd3+KjDd8KPZpYj+miZyJ7IPPI8tHK84XYrdNnRU68rvTdBSwROy7IvunPW8iLZGyuzuy5GrhevnuS7HP60oiurRuE/tHGZbW4R5eWm15N/tnkZG3jTpSOCuxtbBe2o8C/onM1PYMm/0HTWRnpPzanV0FnJbfo5Fl1y+U2Bj2u/K7rI7yuyJWftdGyuwYF8T4yLR7yW/JbHAyw/6vd0lEpTmXboaxA3FnmtowYmYViXI4okSb3L0+TaI0iERJ46pJlLVpZ0WQKNY2wb1eNJoAS9DxjmRl142qisa5btSeqdSnfg1PO8WtM/WScFPFbjEPqibj36wi4ze677YI15wjEbuLJNjiuE1VZPw7wn2V92K1zr0vTXUXq6dsM+a5+oZS/UKYmQY34ucjirvRzdScvFfdAa6CnMz8vtS1q26biVDhlwvXnnrVzfD4cIe7fH1f5OND2MQH3PpX3TfSHbattZ6DVK587PjFdEZjgYlY34pFjtfD0arWkLzVxD/Q2fSeUCleYDKbQ5DLnH1O7uoYXjfsWTKBVayJlR4CMAn4U+LZm+nJVE50/4g9ttujdrCHc/eIfVpP+EywJ3xXBjvV+ssB4H3p32K5q15HzVKpOp5kLheA1tD3RRWN9Tq7Cbi7sOjyl+QZwM090X+JEiVKlKjUwr/rwkME7dPwYwAAAABJRU5ErkJggg==") !important; 204 | margin: 0px 3px !important; 205 | top: 0px !important; 206 | } 207 | 208 | &:is([muted]) { 209 | list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAMAAAAL34HQAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAb9QTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AlH9xQAAAJV0Uk5TAAgcOltfVzEYBCl4zN/r7+a+Yx4PPlBPMA0DVK//mzgBE1ym0urpmUwLBihxqdrcs30K0fu7hf7ld8ny9+JpESu2/JL0dmeEBYNhbkrZVr/9lwmJsfnD+uju7c7U8cbKoQ6u15hzB4FmkDeqJhqe+BmPrGvNLpzsjhWr87lLsgIbfsf1aIrYpCr24CBVckcdnTNYe1JodJtZAAADqElEQVR4nO2WW0gUYRSAz0kRjVolDGUXL4UaXirJyMJbRYRUKEQXkFK0ILOCLvQoJj70Fj4ElVRSFoVYkYhkRGSKZTcK1NSgNPOS2YMSCZJOu+7MP//Yzk4HIhXO9zKHb/6d+XZ2HAdhToKzHeAZzqLAWRQ4iwJnUeAsCpxFgbMocBYFzqLAWRQ4iwJnUeAsCpxFgbMocBYFzqLAWRQ4iwJnUeAsCpxFgbMocBYFzqLAWRQ4iwJnUeAsCpxFgbMocBaF+ZCFGuOzlSNKpHmhu2nSF/G7YVEwoit5cMZnTfS/zbI7zyAsYo/YsczVCjjgQHwvfdJEQxy6d2BH/BtJr2mPUxRQXHSApdezHKHDYg7B4V5t9l+FA1r3M/2DJhrAdx1+dm0jnHGNwmY4Tzt9yHDlxS9ptYkXWRvx54Cuo/tH1N8xwxe7NDua/EW7MCYa7AnjPdo8th4fqGMmttg0HRnQJs5k5rUszGwDAyvr3dvtzTZdOoLrwKsGn+Q+3SdirTplKW91HdY6CRZeXK2gxcas0JfubbZ8gyThPfCoO9XLtRMnX0s7kmvUYVervNxHuevZ3/kja/dzY9aSd+6tLVC2YS3gVcMew30W0K0OMYZHzoZqsPAia28LGHComam9sk25DV41pPXIfsUjddjSJevIJrDwImvzB2NW6i1P5xdf30TP+PoRzRbLzbzIWvvVmKUtmeUss3srp0m26TfBq4Z9jbIfG1WHQJusM26AhRdZ+58YszZdd2/zHkvSHtsw6FXnY7v09IOtV9ThwEN5ebxSaeG1rHyfBmNWJlZMbw/VSzLErj2ITLQ9q1u+R3dcVNxnKayTbHRMrdpu5vWrVTRi+NPOwvPu4Rii9pCB8IRO7Tcy0XAcm8RNmrR8Qj0IHPX7KJ5nIWlKOVh4/X/iqYogMSdFVYmDn0b1bxJyEM+ChYbQAlR/fsjDMqGLlWvqlKtcHQIrr2fFbusT1yv/UmGp2HEGsSoXoD3Kv3xEP56ZhgVleMG1dWTjuH6QkgDlfr9rOKwUT0mrTbz8vlU06J/46lOKHcer2+UTRR5xvqhUFuAJgL/Qzgs2segkXE5fWmqwJd+eHoRzP/yGZqz26A1vp/mJiG1Tq2tiKmae6X8zH97l5w6cRYGzKHAWBc6iwFkUOIsCZ1HgLAqcRYGzKHAWBc6iwFkUOIsCZ1HgLAqcRYGzKHAWBc6iwFkUOIsCZ1HgLAqcRYGzKHAWBc6iwFkUOIsCZ1H4DdCcIqZ2xl9xAAAAAElFTkSuQmCC") !important; 210 | top: 0px !important; 211 | } 212 | } 213 | 214 | .tabbrowser-tab:is([muted], [activemedia-blocked]) .tab-icon-image { 215 | opacity: 0; 216 | 217 | &:hover { 218 | opacity: 1; 219 | } 220 | } 221 | } 222 | 223 | 224 | 225 | 226 | /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/ 227 | @media (-moz-pref("arcline.force.blur", 1)) { 228 | 229 | 230 | browser { 231 | clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 232 | } 233 | 234 | 235 | } 236 | 237 | 238 | /* === COMPACT SIDEBAR ===================================================================================================== */ 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | /*------------------------------------------------------------------------------------------------------------*/ 248 | 249 | 250 | 251 | /* Rounded Tabs with Workspace Transitions */ 252 | .tab-background { 253 | border-radius: 12px !important; 254 | 255 | 256 | z-index: 0 !important; 257 | position: relative; 258 | } 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | @media (prefers-color-scheme: light) { 268 | @media (-moz-pref("arcline.borders", 1)) { 269 | #browser{ 270 | 271 | 272 | margin-top: -1.5px !important; 273 | 274 | 275 | } 276 | 277 | #zen-main-app-wrapper{ 278 | padding: 0px !important; 279 | margin-top: 0px !important; 280 | margin-left: -1px !important; 281 | margin-right: -1px !important; 282 | margin-bottom: -1px !important; 283 | border: 2px solid rgba(255, 255, 255, calc(var(--zen-gradient-opacity) + 0.3)); 284 | 285 | border-radius: 8.9px !important; 286 | } 287 | 288 | 289 | 290 | } 291 | 292 | 293 | } 294 | 295 | 296 | 297 | @media (prefers-color-scheme: dark) { 298 | 299 | @media (-moz-pref("arcline.borders", 1)) { 300 | #browser{ 301 | 302 | 303 | margin-top: -1.5px !important; 304 | 305 | 306 | } 307 | 308 | #zen-main-app-wrapper{ 309 | padding: 0px !important; 310 | margin-top: 0px !important; 311 | margin-left: -1px !important; 312 | margin-right: -1px !important; 313 | margin-bottom: -1px !important; 314 | border: 2px solid rgba(215, 215, 217, calc(var(--zen-gradient-opacity) + 0.4)); 315 | 316 | border-radius: 8.9px !important; 317 | } 318 | 319 | 320 | 321 | } 322 | 323 | } 324 | -------------------------------------------------------------------------------- /arcline/modules/~url-bar.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | @-moz-document url("chrome://global/content/pictureinpicture/player.xhtml") { 5 | html { 6 | border-radius: 60px !important; 7 | } 8 | } 9 | 10 | 11 | /* The following rules apply overflow masks to the unfocused urlbar 12 | This mask may be overriden when a Contextual Feature Recommendation is shown. */ 13 | #urlbar:not([focused])[textoverflow="both"] > .urlbar-input-container > .urlbar-input-box > & { 14 | mask-image: none !important; 15 | 16 | 17 | } 18 | #urlbar:not([focused])[textoverflow="right"] > .urlbar-input-container > .urlbar-input-box > & { 19 | mask-image: none !important; 20 | margin-top: 0.4rem !important; 21 | 22 | } 23 | #urlbar:not([focused])[textoverflow="left"] > .urlbar-input-container > .urlbar-input-box > & { 24 | mask-image: none !important; 25 | 26 | } 27 | #urlbar:not([focused])[textoverflow="left"][domaindir="rtl"] > .urlbar-input-container > .urlbar-input-box > & { 28 | mask-image: none !important; 29 | } 30 | } 31 | 32 | #urlbar:not([focused]) .urlbar-input-container , .urlbar-input-box { 33 | mask-image: none !important; 34 | margin-top: -0.04rem !important; 35 | } 36 | 37 | #urlbar-searchmode-switcher { 38 | margin-top: 0.34rem !important; 39 | height: 2rem !important; 40 | margin-left: -3px !important; 41 | min-height: 2px !important; 42 | border-radius: 9px !important; 43 | padding: 5px !important; 44 | scale: 0.8 !important; 45 | background-color: light-dark(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.15)) !important; 46 | padding-top: 1.1rem !important; 47 | padding-bottom: 1.1rem !important; 48 | text-align: center !important; 49 | } 50 | 51 | 52 | #searchmode-switcher-chicklet { 53 | background-color: light-dark(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.15)) !important; 54 | border-start-end-radius: var(--toolbarbutton-border-radius); 55 | border-end-end-radius: var(--urlbar-icon-border-radius); 56 | align-items: center; 57 | scale: 0.9 !important; 58 | margin-left: -4px !important; 59 | padding-left: 8px !important; 60 | margin-top: 0.35rem !important; 61 | border-radius: 9px !important; 62 | height: 2rem !important; 63 | padding-top: 1.1rem !important; 64 | padding-bottom: 1.1rem !important; 65 | 66 | margin-inline-end: var(--urlbar-searchmodeswitcher-margin-inline-end); 67 | display: none; 68 | } 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | @media (prefers-color-scheme: light) { 98 | 99 | 100 | 101 | 102 | 103 | 104 | .urlbar-revert-button { 105 | background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg viewBox='-9 1 40 22' fill='none' xmlns='http://www.w3.org/2000/svg' width='24' height='24' xmlns:bx='https://boxy-svg.com'%3E%3Cdefs%3E%3Cbx:export%3E%3Cbx:file format='svg' path='site icon.svg'/%3E%3C/bx:export%3E%3C/defs%3E%3Cpath d='M 22.754 14.892 L 22.746 8.892 C 22.738 3.462 20.414 1.165 14.985 1.22 L 8.985 1.28 C 3.555 1.335 1.238 3.678 1.246 9.108 L 1.254 15.108 C 1.262 20.538 3.586 22.835 9.015 22.78 L 15.015 22.72 C 20.445 22.665 22.762 20.322 22.754 14.892 Z M 2.746 9.093 C 2.739 4.483 4.377 2.827 8.987 2.78 L 14.987 2.72 C 19.597 2.673 21.239 4.297 21.246 8.907 L 21.254 14.907 C 21.261 19.517 19.623 21.173 15.013 21.22 L 9.013 21.28 C 4.403 21.327 2.761 19.703 2.754 15.093 L 2.746 9.093 Z' style='transform-origin: 12px 12px; fill: rgb(255, 255, 255);'/%3E%3Cpath d='M 19.257 15.507 C 19.256 15.097 18.916 14.76 18.506 14.765 L 14.606 14.804 C 14.196 14.808 13.857 15.151 13.857 15.561 C 13.858 15.971 14.198 16.308 14.608 16.304 L 18.508 16.265 C 18.918 16.26 19.258 15.917 19.257 15.507 Z' style='transform-origin: 12px 12px; fill: rgb(255, 255, 255);'/%3E%3Cpath d='M 8.205 15.618 C 8.205 15.208 7.864 14.872 7.454 14.876 L 5.504 14.895 C 5.094 14.9 4.755 15.243 4.755 15.653 C 4.756 16.063 5.096 16.4 5.506 16.395 L 7.456 16.376 C 7.866 16.372 8.206 16.028 8.205 15.618 Z' style='transform-origin: 12px 12px; fill: rgb(255, 255, 255);'/%3E%3Cpath d='M 13.404 15.567 C 13.401 13.717 11.899 12.232 10.049 12.251 C 8.2 12.269 6.703 13.784 6.705 15.634 C 6.708 17.484 8.21 18.969 10.059 18.951 C 11.909 18.932 13.407 17.407 13.404 15.567 Z M 8.205 15.619 C 8.204 14.599 9.033 13.761 10.052 13.751 C 11.071 13.74 11.903 14.562 11.904 15.582 C 11.906 16.602 11.077 17.44 10.057 17.451 C 9.038 17.461 8.207 16.629 8.205 15.619 Z' style='transform-origin: 12px 12px; fill: rgb(255, 255, 255);'/%3E%3Cpath d='M 19.246 8.347 C 19.245 7.937 18.905 7.6 18.495 7.605 L 16.545 7.624 C 16.135 7.628 15.795 7.972 15.796 8.382 C 15.796 8.792 16.137 9.128 16.547 9.124 L 18.497 9.105 C 18.907 9.1 19.246 8.767 19.246 8.347 Z' style='transform-origin: 12px 12px; fill: rgb(255, 255, 255);'/%3E%3Cpath d='M 10.145 8.439 C 10.144 8.029 9.804 7.692 9.394 7.696 L 5.494 7.735 C 5.084 7.74 4.744 8.083 4.745 8.493 C 4.746 8.903 5.086 9.24 5.496 9.235 L 9.396 9.196 C 9.806 9.192 10.145 8.859 10.145 8.439 Z' style='transform-origin: 12px 12px; fill: rgb(255, 255, 255);'/%3E%3Cpath d='M 17.297 8.367 C 17.294 6.517 15.792 5.032 13.942 5.05 C 12.092 5.069 10.594 6.584 10.597 8.434 C 10.6 10.284 12.102 11.769 13.952 11.75 C 15.802 11.732 17.299 10.217 17.297 8.367 Z M 12.097 8.419 C 12.095 7.399 12.924 6.561 13.944 6.55 C 14.964 6.54 15.795 7.362 15.797 8.382 C 15.798 9.402 14.969 10.24 13.949 10.25 C 12.93 10.261 12.098 9.449 12.097 8.419 Z' style='transform-origin: 12px 12px; fill: rgb(255, 255, 255);'/%3E%3C/svg%3E%0A") !important; 106 | filter: invert(1) !important; 107 | fill: none !important; 108 | scale: 0.8 !important; 109 | list-style-image: none !important; 110 | background-size: contain !important; 111 | margin-top: 1.8px !important; 112 | height: 32px !important; 113 | width: 33px !important; 114 | margin-right: -6px !important; 115 | } 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | #urlbar-background{ 131 | background-color: rgba(0,0,0,0.1) !important; 132 | 133 | 134 | } 135 | 136 | 137 | 138 | 139 | 140 | 141 | .urlbarView-row { 142 | &[rich-suggestion][type="search"] { 143 | :root:not([uidensity="touch"]) & { 144 | min-height: 26px !important; 145 | max-height: 45px !important; 146 | } 147 | } 148 | } 149 | 150 | .urlbarView-row { 151 | &:not([type="tip"], [type="dynamic"]) { 152 | :root[uidensity="touch"] & { 153 | padding-block: 5px !important; 154 | 155 | 156 | } 157 | } 158 | } 159 | 160 | .urlbarView-button { 161 | transform-origin: center !important; 162 | transform: translateX(-5px) !important; 163 | } 164 | 165 | 166 | 167 | #urlbar[open][zen-floating-urlbar='true'] { 168 | 169 | top: 15rem !important; 170 | min-width: 57rem !important; 171 | 172 | #pageAction-urlbar-copy-frame-url_jeffersonscher_com { 173 | 174 | 175 | top: -0.5px !important; 176 | left: -3.4rem !important; 177 | 178 | 179 | } 180 | 181 | #reader-mode-button{ 182 | transform: translateX(-35px) !important; 183 | } 184 | 185 | #urlbar-zoom-button { 186 | appearance: none; 187 | transform: translateY(1px) translateX(17px)!important; 188 | font-size: 0.7em !important; 189 | padding-left: 8px !important; 190 | padding-top: 4px !important; 191 | margin-top: -0.1px !important; 192 | margin-right: 60px !important; 193 | padding-bottom: 4px !important; 194 | padding-right: 7px !important; 195 | border-radius: var(--urlbar-icon-border-radius); 196 | background: none !important; 197 | background-color: light-dark(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.2)) !important; 198 | color: var(--urlbar-box-text-color); 199 | margin-block: calc((var(--urlbar-min-height) - 20px) / 2 - 1px - var(--urlbar-container-padding)); 200 | overflow: hidden; 201 | } 202 | 203 | 204 | 205 | #pageAction-panel-bookmark, #star-button, #zen-bookmark-button { 206 | list-style-image: url("data:image/svg+xml,%3Csvg width='92' height='40' viewBox='0 0 92 40' xmlns='http://www.w3.org/2000/svg' font-family='Segoe UI, Arial, sans-serif' font-size='18' font-weight='600'%3E%3Ctitle%3ECtrl K Keys Icon%3C/title%3E%3Cdesc%3EIcon showing keyboard keys for Ctrl and K.%3C/desc%3E%3Cstyle%3E .key %7B fill: %233A3A3A; /* Dark grey background for keys */ rx: 5; /* Rounded corners */ ry: 5; %7D .key-text %7B fill: %23BDBDBD; /* Lighter grey text color */ text-anchor: middle; /* Center text horizontally */ dominant-baseline: middle; /* Center text vertically */ %7D %3C/style%3E%3C!-- Ctrl Key --%3E%3Cg id='ctrl-key'%3E%3Crect class='key' x='1' y='3' width='48' height='34' /%3E%3Ctext class='key-text' x='25' y='20.5'%3ECtrl%3C/text%3E%3C!-- Adjusted y slightly for visual centering --%3E%3C/g%3E%3C!-- K Key --%3E%3Cg id='k-key'%3E%3Crect class='key' x='53' y='3' width='36' height='34' /%3E%3Ctext class='key-text' x='71' y='20.5'%3EK%3C/text%3E%3C!-- Adjusted y slightly for visual centering --%3E%3C/g%3E%3C/svg%3E%0A") !important; 207 | scale: 2 !important; 208 | height: 28px !important; 209 | width: 28px !important; 210 | margin-left: -40px !important; 211 | } 212 | 213 | .urlbar-input:root { 214 | font-size: 14px !important; 215 | /* color: #FFFFFF !important;*/ 216 | 217 | max-width: 85% !important; 218 | /* padding-right: 12px !important;*/ 219 | font-weight: 510 !important; 220 | /* padding-top: 0px !important;*/ 221 | filter: brightness(75%) !important; 222 | margin-top: 2px !important; 223 | overflow: hidden !important; 224 | display: inline-block !important; 225 | text-overflow: ellipsis !important; 226 | white-space: nowrap !important; 227 | opacity: 1 !important; 228 | } 229 | 230 | 231 | 232 | 233 | } 234 | 235 | 236 | /* Acrylic/Mica floating Urlbar */ 237 | #urlbar[zen-floating-urlbar="true"] #urlbar-background { 238 | 239 | background: light-dark(rgba(220,220,220,0.69),rgba(20,20,20,0.69)) !important; 240 | 241 | 242 | backdrop-filter: blur(64px) brightness(1) saturate(1.1) contrast(1.1) !important; 243 | } 244 | 245 | .urlbarView-row { 246 | &[selected] { 247 | & .urlbarView-favicon { 248 | background: color-mix(in srgb, #fff 5%, var(--urlbarView-highlight-background) 95%) !important; 249 | } 250 | } 251 | } 252 | 253 | 254 | .urlbarView-body-inner { 255 | #urlbar[open] > .urlbarView > .urlbarView-body-outer > & { 256 | border-top: 2px solid rgba(255,255,255,0.1) !important; 257 | } 258 | } 259 | 260 | /* === In your userChrome.css === */ 261 | 262 | /* Make sure the #browser element is a positioning context */ 263 | #browser { 264 | position: relative !important; /* Or absolute/fixed depending on context */ 265 | isolation: isolate; /*might be useful too */ 266 | } 267 | 268 | /* === SECOND PSEUDO-ELEMENT (::before - Your Floating Background) === */ 269 | #browser::before { 270 | /* Basic setup */ 271 | content: ""; 272 | position: absolute; 273 | pointer-events: none !important; 274 | 275 | padding-bottom: 5rem !important; 276 | /* --- Appearance --- */ 277 | background-color: var(--toolbar-bgcolor, #f0f0f0) !important; 278 | border-radius: 14px !important; 279 | background: linear-gradient(to right, light-dark(#eee, #666) 0px, light-dark(#eee, #666)) !important; 280 | 281 | 282 | 283 | 284 | /* --- Positioning & Size --- */ 285 | margin-top: 15.04rem !important; /* Your fixed vertical position */ 286 | left: 50% !important; /* Using left/transform for robustness */ 287 | transform: translateX(-50%) !important; 288 | width: min(90%, 56.86rem) !important; 289 | 290 | /* --- DYNAMIC HEIGHT --- */ 291 | /* Use the JS variable, fallback to your fixed height if variable isn't set */ 292 | height: var(--urlbar-view-dynamic-height, 39rem) !important; 293 | 294 | /* --- Stacking & Visibility --- */ 295 | z-index: -1 !important; 296 | opacity: 0 !important; /* Start hidden */ 297 | 298 | /* --- Animation --- */ 299 | /* Transition opacity. Height changes might be instant or you could transition height too */ 300 | transition: opacity 0s ease-out !important; 301 | /* height 0.1s ease-out !important; /* Optional: animate height changes */ 302 | } 303 | 304 | /* --- Trigger for ::before (When URL bar is open) --- */ 305 | body:has(#urlbar[open]) #browser::before { 306 | opacity: 1 !important; 307 | } 308 | 309 | 310 | 311 | 312 | 313 | #urlbar[zen-floating-urlbar="true"] { 314 | padding: 4px !important; 315 | #identity-box[pageproxystate="invalid"] { 316 | & #identity-icon { 317 | scale: 0.9 !important; 318 | margin-top: 0px !important; 319 | fill-opacity: 1 !important; 320 | } 321 | } 322 | 323 | .urlbar-input-container { 324 | display: flex !important; 325 | align-items: center !important; 326 | } 327 | 328 | .urlbarView-row { 329 | padding: 0 0px !important; 330 | &:not([type="tip"], [type="dynamic"]) { 331 | padding-block: 0px !important; 332 | 333 | } 334 | } 335 | } 336 | 337 | 338 | .urlbar-input { 339 | font-size: 13.5px !important; 340 | /* color: #FFFFFF !important;*/ 341 | 342 | /* padding-right: 12px !important;*/ 343 | font-weight: 510 !important; 344 | /* padding-top: 0px !important;*/ 345 | filter: brightness(85%) !important; 346 | margin-top: 2px !important; 347 | 348 | } 349 | 350 | 351 | 352 | 353 | 354 | #urlbar-label-box { 355 | background: color-mix(in srgb, var(--zen-primary-color) 50%, transparent 50%) !important; 356 | font-weight: 600 !important; 357 | color: #fff !important; 358 | margin-top: 3px !important; 359 | scale: 0.89 !important; 360 | margin-left: -9px !important; 361 | border-radius: 18px !important; 362 | padding: 7px 8px !important; 363 | scale: 0.8 !important; 364 | } 365 | 366 | 367 | 368 | 369 | 370 | .urlbarView-row { 371 | &:not([type="tip"], [type="dynamic"]) { 372 | :root[uidensity="touch"] & { 373 | padding-block: 4px !important; 374 | } 375 | } 376 | } 377 | 378 | #urlbar[breakout][breakout-extend] { 379 | & > .urlbar-input-container { 380 | height: 60px !important; 381 | } 382 | } 383 | 384 | #urlbar-search-mode-indicator-close, #searchmode-switcher-close { 385 | fill-opacity: 1 !important; 386 | } 387 | 388 | .urlbarView-row[has-action]:is([type="switchtab"], [type="remotetab"], [type="clipboard"]) { 389 | & > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action { 390 | 391 | background: transparent !important; 392 | border: none !important; 393 | padding: none !important; 394 | 395 | } 396 | } 397 | 398 | .urlbarView-row[type='dynamic']{ 399 | width: 100% !important; 400 | display: block !important; 401 | height: 0 !important; 402 | position: relative !important; 403 | 404 | .urlbarView-action-btn { 405 | position: absolute !important; 406 | right: 0% !important; 407 | bottom: 0% !important; 408 | transform: translateY(-13.5px) !important; 409 | display: none !important; 410 | color: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%) !important; 411 | background-color: #fff !important; 412 | margin-inline-end: var(--space-large); 413 | border-radius: 8px !important; 414 | } 415 | } 416 | 417 | 418 | 419 | } 420 | 421 | 422 | 423 | 424 | /*------------------------------------------------------------*/ 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | @media (prefers-color-scheme: dark) { 440 | 441 | 442 | 443 | 444 | 445 | 446 | .urlbar-revert-button { 447 | background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg viewBox='52 40 35 35' fill='none' xmlns='http://www.w3.org/2000/svg' width='24' height='24' xmlns:bx='https://boxy-svg.com'%3E%3Cdefs%3E%3Cbx:export%3E%3Cbx:file format='svg' path='fill site.svg'/%3E%3C/bx:export%3E%3C/defs%3E%3Cpath d='M 79.333 52.766 C 79.951 54.14 79.742 62.673 79.374 61.856 C 79.682 64.781 77.666 67.257 74.386 66.594 C 74.386 67.084 65.698 67.668 65.698 66.844 C 62.491 67.434 60.687 64.663 60.96 61.773 C 60.02 61.896 59.172 53.097 60.752 52.891 C 60 50.79 61.408 49.653 62.911 49.017 C 61.256 49.908 60.6 51.643 60.604 54.565 C 60.604 54.81 60.612 60.977 60.612 60.565 C 61.666 64.546 62.267 66.796 66.871 66.752 L 72.871 66.692 C 77.481 66.645 79.119 64.989 79.112 60.379 L 79.104 54.379 C 79.099 51.406 78.415 49.675 76.694 48.833 C 78.388 49.671 79.517 51.074 79.333 52.766 Z M 72.873 68.192 L 66.873 68.252 C 61.444 68.307 59.12 66.01 59.112 60.58 L 59.104 54.58 C 59.096 49.15 61.413 46.807 66.843 46.752 L 72.843 46.692 C 78.272 46.637 80.596 48.934 80.604 54.364 L 80.612 60.364 C 80.62 65.794 78.303 68.137 72.873 68.192 Z M 76.983 61.287 C 76.982 60.877 76.642 60.54 76.232 60.545 L 72.332 60.584 C 71.922 60.588 71.583 60.931 71.583 61.341 C 71.584 61.751 71.924 62.088 72.334 62.084 L 76.234 62.045 C 76.644 62.04 76.984 61.697 76.983 61.287 Z M 65.931 61.398 L 65.931 61.397 C 65.931 60.378 66.76 59.541 67.778 59.531 C 68.797 59.52 69.629 60.342 69.63 61.362 C 69.632 62.382 68.803 63.22 67.783 63.231 C 66.764 63.241 65.934 62.41 65.931 61.4 C 65.931 61.399 65.931 61.399 65.931 61.398 Z M 63.23 60.675 C 62.82 60.68 62.481 61.023 62.481 61.433 C 62.482 61.843 62.822 62.18 63.232 62.175 L 64.516 62.162 C 64.859 63.648 66.193 64.747 67.785 64.731 C 69.635 64.712 71.133 63.187 71.13 61.347 C 71.127 59.497 69.625 58.012 67.775 58.031 C 66.184 58.046 64.854 59.17 64.515 60.662 L 63.23 60.675 Z M 76.972 54.127 C 76.971 53.717 76.631 53.38 76.221 53.385 L 74.937 53.398 C 74.594 51.912 73.26 50.815 71.668 50.83 C 69.818 50.849 68.32 52.364 68.323 54.214 C 68.326 56.064 69.828 57.549 71.678 57.53 C 73.27 57.515 74.601 56.39 74.94 54.898 L 76.223 54.885 C 76.633 54.88 76.972 54.547 76.972 54.127 Z M 73.522 54.162 C 73.522 54.173 73.522 54.184 73.523 54.195 C 73.506 55.2 72.684 56.02 71.675 56.03 C 70.656 56.041 69.824 55.229 69.823 54.199 C 69.821 53.179 70.65 52.341 71.67 52.33 C 72.679 52.32 73.503 53.124 73.523 54.129 C 73.522 54.14 73.522 54.151 73.522 54.162 Z M 67.871 54.219 C 67.87 53.809 67.53 53.472 67.12 53.476 L 63.22 53.515 C 62.81 53.52 62.47 53.863 62.471 54.273 C 62.472 54.683 62.812 55.02 63.222 55.015 L 67.122 54.976 C 67.532 54.972 67.871 54.639 67.871 54.219 Z' style='stroke: rgb(157, 90, 90); stroke-width: 0px; fill: rgb(255, 255, 255);'/%3E%3Crect x='-55.312' y='47.91' width='41.859' height='28.433' style='fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);'/%3E%3Cpath d='M -24.239 20.421 L -24.247 14.421 C -24.255 8.991 -26.579 6.694 -32.008 6.749 L -38.008 6.809 C -43.438 6.864 -45.755 9.207 -45.747 14.637 L -45.739 20.637 C -45.731 26.067 -43.407 28.364 -37.978 28.309 L -31.978 28.249 C -26.548 28.194 -24.231 25.851 -24.239 20.421 Z M -44.247 14.622 C -44.254 10.012 -42.616 8.356 -38.006 8.309 L -32.006 8.249 C -27.396 8.202 -25.754 9.826 -25.747 14.436 L -25.739 20.436 C -25.732 25.046 -27.37 26.702 -31.98 26.749 L -37.98 26.809 C -42.59 26.856 -44.232 25.232 -44.239 20.622 L -44.247 14.622 Z' style='fill: rgb(255, 255, 255); transform-origin: -34.993px 17.529px;'/%3E%3Cpath d='M 67.884 27.942 L 67.875 20.838 C 67.866 14.41 65.134 11.69 58.753 11.755 L 51.702 11.826 C 45.32 11.891 42.597 14.666 42.606 21.093 L 42.615 28.197 C 42.624 34.625 45.356 37.345 51.737 37.28 L 58.789 37.209 C 65.17 37.144 67.893 34.369 67.884 27.942 Z M 44.369 21.077 C 44.361 15.618 46.286 13.658 51.704 13.601 L 58.756 13.531 C 64.174 13.476 66.103 15.397 66.112 20.856 L 66.121 27.958 C 66.129 33.417 64.204 35.376 58.786 35.434 L 51.734 35.504 C 46.316 35.559 44.387 33.639 44.378 28.179 L 44.369 21.077 Z' style='fill: rgb(255, 255, 255); stroke-width: 7px; transform-origin: 55.246px 24.516px;'/%3E%3C/svg%3E%0A") !important; 448 | list-style-image: none !important; 449 | fill: none !important; 450 | scale: 0.7 !important; 451 | background-size: contain !important; 452 | margin-top: 0.1rem !important; 453 | height: 32px !important; 454 | width: 33px !important; 455 | margin-right: -6px !important; 456 | } 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | .urlbarView-row { 471 | &[rich-suggestion][type="search"] { 472 | :root:not([uidensity="touch"]) & { 473 | min-height: 26px !important; 474 | max-height: 45px !important; 475 | } 476 | } 477 | } 478 | 479 | .urlbarView-row { 480 | &:not([type="tip"], [type="dynamic"]) { 481 | :root[uidensity="touch"] & { 482 | padding-block: 5px !important; 483 | 484 | 485 | } 486 | } 487 | } 488 | 489 | .urlbarView-button { 490 | transform-origin: center !important; 491 | transform: translateX(-5px) !important; 492 | } 493 | 494 | 495 | 496 | #urlbar[open][zen-floating-urlbar='true'] { 497 | 498 | top: 15rem !important; 499 | min-width: 57rem !important; 500 | 501 | #pageAction-urlbar-copy-frame-url_jeffersonscher_com { 502 | 503 | 504 | top: -0.5px !important; 505 | left: -3.4rem !important; 506 | 507 | 508 | } 509 | 510 | #reader-mode-button{ 511 | transform: translateX(-35px) !important; 512 | } 513 | 514 | #urlbar-zoom-button { 515 | appearance: none; 516 | transform: translateY(1px) translateX(17px)!important; 517 | font-size: 0.7em !important; 518 | padding-left: 8px !important; 519 | padding-top: 4px !important; 520 | margin-top: -0.1px !important; 521 | margin-right: 60px !important; 522 | padding-bottom: 4px !important; 523 | padding-right: 7px !important; 524 | border-radius: var(--urlbar-icon-border-radius); 525 | background: none !important; 526 | background-color: light-dark(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.2)) !important; 527 | color: var(--urlbar-box-text-color); 528 | margin-block: calc((var(--urlbar-min-height) - 20px) / 2 - 1px - var(--urlbar-container-padding)); 529 | overflow: hidden; 530 | } 531 | 532 | 533 | 534 | #pageAction-panel-bookmark, #star-button, #zen-bookmark-button { 535 | list-style-image: url("data:image/svg+xml,%3Csvg width='92' height='40' viewBox='0 0 92 40' xmlns='http://www.w3.org/2000/svg' font-family='Segoe UI, Arial, sans-serif' font-size='18' font-weight='600'%3E%3Ctitle%3ECtrl K Keys Icon%3C/title%3E%3Cdesc%3EIcon showing keyboard keys for Ctrl and K.%3C/desc%3E%3Cstyle%3E .key %7B fill: %233A3A3A; /* Dark grey background for keys */ rx: 5; /* Rounded corners */ ry: 5; %7D .key-text %7B fill: %23BDBDBD; /* Lighter grey text color */ text-anchor: middle; /* Center text horizontally */ dominant-baseline: middle; /* Center text vertically */ %7D %3C/style%3E%3C!-- Ctrl Key --%3E%3Cg id='ctrl-key'%3E%3Crect class='key' x='1' y='3' width='48' height='34' /%3E%3Ctext class='key-text' x='25' y='20.5'%3ECtrl%3C/text%3E%3C!-- Adjusted y slightly for visual centering --%3E%3C/g%3E%3C!-- K Key --%3E%3Cg id='k-key'%3E%3Crect class='key' x='53' y='3' width='36' height='34' /%3E%3Ctext class='key-text' x='71' y='20.5'%3EK%3C/text%3E%3C!-- Adjusted y slightly for visual centering --%3E%3C/g%3E%3C/svg%3E%0A") !important; 536 | scale: 2 !important; 537 | height: 28px !important; 538 | width: 28px !important; 539 | margin-left: -40px !important; 540 | } 541 | 542 | .urlbar-input:root { 543 | font-size: 14px !important; 544 | /* color: #FFFFFF !important;*/ 545 | 546 | max-width: 85% !important; 547 | /* padding-right: 12px !important;*/ 548 | font-weight: 510 !important; 549 | /* padding-top: 0px !important;*/ 550 | filter: brightness(75%) !important; 551 | margin-top: 2px !important; 552 | overflow: hidden !important; 553 | display: inline-block !important; 554 | text-overflow: ellipsis !important; 555 | white-space: nowrap !important; 556 | opacity: 1 !important; 557 | } 558 | 559 | 560 | 561 | 562 | } 563 | 564 | 565 | /* Acrylic/Mica floating Urlbar */ 566 | #urlbar[zen-floating-urlbar="true"] #urlbar-background { 567 | background: rgba(20, 20, 20, 0.69) !important; 568 | 569 | backdrop-filter: blur(64px) brightness(1) saturate(1.1) contrast(1.1) !important; 570 | } 571 | 572 | .urlbarView-row { 573 | &[selected] { 574 | & .urlbarView-favicon { 575 | background: color-mix(in srgb, #fff 5%, var(--urlbarView-highlight-background) 95%) !important; 576 | } 577 | } 578 | } 579 | 580 | 581 | .urlbarView-body-inner { 582 | #urlbar[open] > .urlbarView > .urlbarView-body-outer > & { 583 | border-top: 2px solid rgba(255,255,255,0.1) !important; 584 | } 585 | } 586 | 587 | /* === In your userChrome.css === */ 588 | 589 | /* Make sure the #browser element is a positioning context */ 590 | #browser { 591 | position: relative !important; /* Or absolute/fixed depending on context */ 592 | isolation: isolate; /*might be useful too */ 593 | } 594 | 595 | /* === SECOND PSEUDO-ELEMENT (::before - Your Floating Background) === */ 596 | #browser::before { 597 | /* Basic setup */ 598 | content: ""; 599 | position: absolute; 600 | pointer-events: none !important; 601 | 602 | padding-bottom: 5rem !important; 603 | /* --- Appearance --- */ 604 | background-color: var(--toolbar-bgcolor, #f0f0f0) !important; 605 | border-radius: 14px !important; 606 | background: linear-gradient(to right, light-dark(#eee, #666) 0px, light-dark(#eee, #666)) !important; 607 | 608 | 609 | 610 | 611 | /* --- Positioning & Size --- */ 612 | margin-top: 15.04rem !important; /* Your fixed vertical position */ 613 | left: 50% !important; /* Using left/transform for robustness */ 614 | transform: translateX(-50%) !important; 615 | width: min(90%, 56.86rem) !important; 616 | 617 | /* --- DYNAMIC HEIGHT --- */ 618 | /* Use the JS variable, fallback to your fixed height if variable isn't set */ 619 | height: var(--urlbar-view-dynamic-height, 39rem) !important; 620 | 621 | /* --- Stacking & Visibility --- */ 622 | z-index: -1 !important; 623 | opacity: 0 !important; /* Start hidden */ 624 | 625 | /* --- Animation --- */ 626 | /* Transition opacity. Height changes might be instant or you could transition height too */ 627 | transition: opacity 0s ease-out !important; 628 | /* height 0.1s ease-out !important; /* Optional: animate height changes */ 629 | } 630 | 631 | /* --- Trigger for ::before (When URL bar is open) --- */ 632 | body:has(#urlbar[open]) #browser::before { 633 | opacity: 1 !important; 634 | } 635 | 636 | 637 | 638 | 639 | 640 | #urlbar[zen-floating-urlbar="true"] { 641 | padding: 4px !important; 642 | #identity-box[pageproxystate="invalid"] { 643 | & #identity-icon { 644 | scale: 0.9 !important; 645 | margin-top: 0px !important; 646 | fill-opacity: 1 !important; 647 | } 648 | } 649 | 650 | .urlbar-input-container { 651 | display: flex !important; 652 | align-items: center !important; 653 | } 654 | 655 | .urlbarView-row { 656 | padding: 0 0px !important; 657 | &:not([type="tip"], [type="dynamic"]) { 658 | padding-block: 0px !important; 659 | 660 | } 661 | } 662 | } 663 | 664 | 665 | .urlbar-input { 666 | font-size: 13.5px !important; 667 | /* color: #FFFFFF !important;*/ 668 | 669 | /* padding-right: 12px !important;*/ 670 | font-weight: 510 !important; 671 | /* padding-top: 0px !important;*/ 672 | filter: brightness(75%) !important; 673 | margin-top: 2px !important; 674 | 675 | } 676 | 677 | 678 | 679 | 680 | 681 | #urlbar-label-box { 682 | background: color-mix(in srgb, var(--zen-primary-color) 50%, transparent 50%) !important; 683 | font-weight: 600 !important; 684 | color: #fff !important; 685 | margin-top: 3px !important; 686 | scale: 0.89 !important; 687 | margin-left: -9px !important; 688 | border-radius: 18px !important; 689 | padding: 7px 8px !important; 690 | scale: 0.8 !important; 691 | } 692 | 693 | 694 | 695 | 696 | 697 | .urlbarView-row { 698 | &:not([type="tip"], [type="dynamic"]) { 699 | :root[uidensity="touch"] & { 700 | padding-block: 4px !important; 701 | } 702 | } 703 | } 704 | 705 | #urlbar[breakout][breakout-extend] { 706 | & > .urlbar-input-container { 707 | height: 60px !important; 708 | } 709 | } 710 | 711 | #urlbar-search-mode-indicator-close, #searchmode-switcher-close { 712 | fill-opacity: 1 !important; 713 | } 714 | 715 | .urlbarView-row[has-action]:is([type="switchtab"], [type="remotetab"], [type="clipboard"]) { 716 | & > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action { 717 | 718 | background: transparent !important; 719 | border: none !important; 720 | padding: none !important; 721 | 722 | } 723 | } 724 | 725 | .urlbarView-row[type='dynamic']{ 726 | width: 100% !important; 727 | display: block !important; 728 | height: 0 !important; 729 | position: relative !important; 730 | 731 | .urlbarView-action-btn { 732 | position: absolute !important; 733 | right: 0% !important; 734 | bottom: 0% !important; 735 | transform: translateY(-13.5px) !important; 736 | display: none !important; 737 | color: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%) !important; 738 | background-color: #fff !important; 739 | margin-inline-end: var(--space-large); 740 | border-radius: 8px !important; 741 | } 742 | } 743 | 744 | } 745 | 746 | 747 | -------------------------------------------------------------------------------- /image.png: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /preferences.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "property": "browser.tabs.allow_transparent_browser", 4 | "label": "Allow browser to be transparent.", 5 | "default": true, 6 | "type": "checkbox", 7 | "force": true 8 | }, 9 | { 10 | "property": "zen.view.experimental-force-window-controls-left", 11 | "label": "Turn on experimental left window controls.", 12 | "default": true, 13 | "type": "checkbox", 14 | "force": true, 15 | "restart": true 16 | }, 17 | { 18 | "property": "browser.tabs.groups.enabled", 19 | "label": "Turn on browser tab groups.", 20 | "default": true, 21 | "type": "checkbox", 22 | "force": true 23 | }, 24 | { 25 | "property": "browser.urlbar.scotchBonnet.enableOverride", 26 | "label": "Enable ability to search directly through any search engine.", 27 | "default": false, 28 | "type": "checkbox" 29 | }, 30 | { 31 | "property": "browser.uidensity", 32 | "label": "Browser density.", 33 | "type": "string", 34 | "value": "number", 35 | "default": 2, 36 | "force": true 37 | }, 38 | { 39 | "property": "browser.urlbar.maxRichResults", 40 | "label": "Url bar search result", 41 | "type": "string", 42 | "value": "number", 43 | "default": 5, 44 | "force": true 45 | }, 46 | { 47 | "property": "widget.windows.mica.toplevel-backdrop", 48 | "label": "darkens tone of browser", 49 | "type": "string", 50 | "value": "number", 51 | "default": 1, 52 | "force": true 53 | }, 54 | { 55 | "property": "zen.theme.content-element-separation", 56 | "label": "border of browser (10 is best)", 57 | "type": "string", 58 | "value": "number", 59 | "default": 10, 60 | "force": true 61 | }, 62 | { 63 | "property": "zen.urlbar.behavior", 64 | "label": "Url bar behavior (float by default.)", 65 | "type": "dropdown", 66 | "placeholder": false, 67 | "defaultValue": "float", 68 | "options": [ 69 | { 70 | "value": "floating-on-type", 71 | "label": "floating-on-type" 72 | }, 73 | { 74 | "value": "float", 75 | "label": "float" 76 | } 77 | ], 78 | "force": true 79 | }, 80 | { 81 | "property": "arcline.pinned.extensions", 82 | "label": "Add support for pinned extensions ( make sure you disable it when you have not pinned any extension)", 83 | "type": "dropdown", 84 | "placeholder": false, 85 | "value": "number", 86 | "default": 0, 87 | "options": [ 88 | { 89 | "value": 0, 90 | "label": "Disabled" 91 | }, 92 | { 93 | "value": 1, 94 | "label": "Enabled" 95 | } 96 | ] 97 | }, 98 | { 99 | "property": "arcline.compact.mode.full.screen.mode", 100 | "label": "Add a support for marginless full screen compact mode", 101 | "type": "dropdown", 102 | "placeholder": false, 103 | "value": "number", 104 | "default": 0, 105 | "options": [ 106 | { 107 | "value": 0, 108 | "label": "Disabled" 109 | }, 110 | { 111 | "value": 1, 112 | "label": "Enabled" 113 | } 114 | ] 115 | }, 116 | { 117 | "property": "arcline.tab.grps", 118 | "label": "Add a support for rwx animated tab group icons", 119 | "type": "dropdown", 120 | "placeholder": false, 121 | "value": "number", 122 | "default": 0, 123 | "options": [ 124 | { 125 | "value": 0, 126 | "label": "Disabled" 127 | }, 128 | { 129 | "value": 1, 130 | "label": "Enabled" 131 | } 132 | ] 133 | }, 134 | { 135 | "property": "arcline.borders", 136 | "label": "Add border around browser (makes window look like mac.)", 137 | "type": "dropdown", 138 | "placeholder": false, 139 | "value": "number", 140 | "default": 1, 141 | "options": [ 142 | { 143 | "value": 0, 144 | "label": "Disabled" 145 | }, 146 | { 147 | "value": 1, 148 | "label": "Enabled" 149 | } 150 | ] 151 | }, 152 | { 153 | "property": "arcline.force.blur", 154 | "label": "Add support for clip path in case your blur is not working toggle this on", 155 | "type": "dropdown", 156 | "placeholder": false, 157 | "value": "number", 158 | "default": 0, 159 | "options": [ 160 | { 161 | "value": 0, 162 | "label": "Disabled" 163 | }, 164 | { 165 | "value": 1, 166 | "label": "Enabled" 167 | } 168 | ] 169 | }, 170 | { 171 | "property": "arcline.pinned.tabs.bg", 172 | "label": "Add background to pinned tabs.", 173 | "type": "dropdown", 174 | "placeholder": false, 175 | "value": "number", 176 | "default": 0, 177 | "options": [ 178 | { 179 | "value": 0, 180 | "label": "Disabled" 181 | }, 182 | { 183 | "value": 1, 184 | "label": "Enabled" 185 | } 186 | ] 187 | }, 188 | { 189 | "type": "separator", 190 | "label": "Sidebar Styles" 191 | }, 192 | { 193 | "property": "arcline.compact.sidebar.bg", 194 | "label": "Add different background to compact mode sidebar", 195 | "type": "dropdown", 196 | "placeholder": false, 197 | "value": "number", 198 | "default": 0, 199 | "options": [ 200 | { 201 | "value": 0, 202 | "label": "normal" 203 | }, 204 | { 205 | "value": 1, 206 | "label": "dark" 207 | }, 208 | { 209 | "value": 2, 210 | "label": "dark-tinted" 211 | }, 212 | { 213 | "value": 3, 214 | "label": "glass-tinted" 215 | } 216 | ] 217 | }, 218 | { 219 | "property": "arcline.compact.sidebar.position", 220 | "label": "Changes compact mode sidebar style", 221 | "type": "dropdown", 222 | "placeholder": false, 223 | "value": "number", 224 | "default": 0, 225 | "options": [ 226 | { 227 | "value": 0, 228 | "label": "attached" 229 | }, 230 | { 231 | "value": 1, 232 | "label": "floating" 233 | } 234 | ] 235 | }, 236 | { 237 | "property": "arcline.essential.always.four.in.a.row", 238 | "label": "make esssentials to be always four in a row", 239 | "type": "dropdown", 240 | "placeholder": false, 241 | "value": "number", 242 | "default": 0, 243 | "options": [ 244 | { 245 | "value": 0, 246 | "label": "Disabled" 247 | }, 248 | { 249 | "value": 1, 250 | "label": "Enabled" 251 | } 252 | ] 253 | }, 254 | { 255 | "property": "arcline.addon.visible", 256 | "label": "set addon/extension button opacity to zero, button will be still there just invisible", 257 | "type": "dropdown", 258 | "placeholder": false, 259 | "value": "number", 260 | "default": 0, 261 | "options": [ 262 | { 263 | "value": 0, 264 | "label": "Disabled" 265 | }, 266 | { 267 | "value": 1, 268 | "label": "Enabled" 269 | } 270 | ] 271 | }, 272 | { 273 | "type": "separator", 274 | "label": "Control Buttons Styles" 275 | }, 276 | { 277 | "property": "arcline.control.button", 278 | "label": "helps in switching from control buttons postions", 279 | "type": "dropdown", 280 | "placeholder": false, 281 | "value": "number", 282 | "default": 1, 283 | "options": [ 284 | { 285 | "value": 1, 286 | "label": "left" 287 | }, 288 | { 289 | "value": 2, 290 | "label": "right" 291 | } 292 | ] 293 | }, 294 | { 295 | "type": "separator", 296 | "label": "Fonts" 297 | }, 298 | { 299 | "property": "arcline.fonts.sf-pro", 300 | "type": "dropdown", 301 | "label": "Use SF Pro font.", 302 | "placeholder": false, 303 | "value": "number", 304 | "default": 1, 305 | "options": [ 306 | { 307 | "value": 0, 308 | "label": "Disabled" 309 | }, 310 | { 311 | "value": 1, 312 | "label": "Enabled" 313 | } 314 | ] 315 | }, 316 | { 317 | "property": "mod.arcline.font", 318 | "type": "string", 319 | "defaultValue": "SF Pro", 320 | "placeholder": "Font name installed on your computer.", 321 | "label": "Display font.", 322 | "conditions": [ 323 | {"if":{"property":"arch.fonts.sf-pro","value":0}} 324 | ] 325 | }, 326 | { 327 | "type": "separator", 328 | "label": "AI" 329 | }, 330 | { 331 | "property": "extensions.tab_sort.mistral_api_key", 332 | "label": "Insert mistral api key for sort button.", 333 | "type": "string", 334 | "placeholder": "API Key." 335 | } 336 | ] 337 | -------------------------------------------------------------------------------- /theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "53cfe9d6-9079-46f8-b42f-453c46ebf0fa", 3 | "js": true, 4 | "name": "Arcline", 5 | "description": "How I Customize my Zen Browser", 6 | "homepage": "https://github.com/ferrocyante/Arcline", 7 | "preferences": "https://raw.githubusercontent.com/ferrocyante/Arcline/refs/heads/main/preferences.json", 8 | "readme": "https://raw.githubusercontent.com/ferrocyante/Arcline/refs/heads/main/README.md", 9 | "image": "https://raw.githubusercontent.com/ferrocyante/Arcline/main/image.jpg", 10 | "author": "ferrocyante", 11 | "version": "0.9.0", 12 | "tags": [ 13 | "Theme", 14 | "Arcline", 15 | "Tab Folders", 16 | "fx-autoconfig" 17 | ], 18 | "createdAt": "2025-06-03", 19 | "updatedAt": "2025-06-03" 20 | } 21 | -------------------------------------------------------------------------------- /userChrome.css: -------------------------------------------------------------------------------- 1 | @import "arcline/Arcline.css"; 2 | 3 | -------------------------------------------------------------------------------- /userContent.css: -------------------------------------------------------------------------------- 1 | @import "arcline-pages/arcline-pages.css"; 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | /*---------------------------------transparent zen windows lie setting about config etc--------------------------------------*/ 25 | :root{ 26 | --zen-colors-tertiary: transparent !important; 27 | --zen-settings-secondary-background: transparent !important; 28 | } 29 | 30 | groupbox{ 31 | /* background: var(--zen-colors-tertiary) !important; */ 32 | background: var(--zen-colors-border-contrast) !important; 33 | border: none 34 | } 35 | 36 | @-moz-document url(about:home), url(about:newtab), url(about:privatebrowsing) { 37 | body, .App{ 38 | background-color: #00000000 !important; 39 | } 40 | 41 | .top-sites-list, .personalizeButtonWrapper{ 42 | opacity: 0 !important; 43 | transition: opacity 0.3s ease-in-out; 44 | 45 | &:hover{ 46 | opacity: 1 !important; 47 | } 48 | } 49 | 50 | .App > div:nth-child(2), .wallpaper{ 51 | display: none !important; 52 | } 53 | } 54 | 55 | @-moz-document url(addons.mozilla.org) { 56 | /* transparency */ 57 | html, body, nav, header{ 58 | background-color: transparent !important; 59 | background: none !important; 60 | border: none !important; 61 | box-shadow: none !important; 62 | } 63 | 64 | /* darkreader */ 65 | :root{ 66 | --darkreader-background-ffffff: transparent !important; 67 | } 68 | 69 | /* no footer */ 70 | footer{ 71 | display: none !important; 72 | } 73 | } 74 | 75 | 76 | 77 | @-moz-document url(about:config){ 78 | tr, table{ 79 | background-color: transparent !important; 80 | border: none !important; 81 | } 82 | tr{ 83 | outline: solid 1px #88888822 !important; 84 | } 85 | } 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | /*--------------------------------------------------second css----------------------------------------------------------*/ 95 | 96 | /*---------------------------------------------------------------------------------------------------------3rd css-----------------------------------------------------------------------------*/ 97 | 98 | @-moz-document url-prefix("about:") { 99 | /* Exclude about:reader */ 100 | @-moz-document regexp("about:(?!reader).*") { 101 | @font-face { 102 | font-family: "SFProText-Regular"; 103 | } 104 | * { 105 | font-family: "SFProText-Regular", system-ui; 106 | } 107 | } 108 | } 109 | --------------------------------------------------------------------------------