Update firefox

This commit is contained in:
RealStickman 2022-05-11 21:19:02 +02:00
parent 48665ba389
commit ea279e52e5
167 changed files with 25398 additions and 8805 deletions

View File

@ -4,24 +4,11 @@
**Table of Contents**
- [Introduce](#introduce)
- [Code of Conduct](#code-of-conduct)
- [We Develop with Github](#we-develop-with-github)
- [Environment](#environment)
- [Your First Contribution](#your-first-contribution)
- [Contribution Targets](#contribution-targets)
- [Project Structure](#project-structure)
- [Icon files](#icon-files)
- [Meta Info files](#meta-info-files)
- [Restrictions](#restrictions)
- [Rules](#rules)
- [Version](#version)
- [Branch](#branch)
- [Issue](#issue)
- [Coding style](#coding-style)
- [Commit](#commit)
- [Commit Message](#commit-message)
- [Pull request](#pull-request)
- [License](#license)
* [Code of Conduct](#code-of-conduct)
* [We Develop with Github](#we-develop-with-github)
* [Your First Contribution](#your-first-contribution)
* [Contribution Targets](#contribution-targets)
- [License](#license)
- [References](#references)
<!-- markdown-toc end -->
@ -30,11 +17,15 @@
I'm really glad you're reading this, because we need volunteer developers to help this project come to fruition.
This document is intended to help, not burden you.
You can use it as a reference for various guidelines and information, and PR comfortably.
Please note we have a code of conduct, please follow it in all your interactions with the project.
### Code of Conduct
Refer to [CODE\_OF\_CONDUCT.md](https://github.com/black7375/Firefox-UI-Fix/blob/master/CODE_OF_CONDUCT.md).
Refer to [CODE\_OF\_CONDUCT.md](./CODE_OF_CONDUCT.md).
### We Develop with Github
@ -42,45 +33,40 @@ We use [github](https://github.com/black7375/Firefox-UI-Fix) to host code, to tr
After feedback has been given we expect responses within two weeks. After two weeks we may close the issue and pull request if it isn't showing any activity.
### Environment
You can configure it as follows:
```shell
## clone repository
git clone https://github.com/black7375/Firefox-UI-Fix.git
cd ./Firefox-UI-Fix
## checkout branch
git checkout <BRANCH_NAME>
```
### Your First Contribution
**Working on your first Pull Request?** You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
**Working on your first Pull Request?**
The following documents may be helpful:
- [Roadmap](https://github.com/black7375/Firefox-UI-Fix/issues/2)
- [Each Versions Plan](https://github.com/black7375/Firefox-UI-Fix/milestones)
- [Wiki:Compatibility Issues Solution](https://github.com/black7375/Firefox-UI-Fix/wiki/Compatibility-Issues-Solution)
- [Wiki:Tips](https://github.com/black7375/Firefox-UI-Fix/wiki/Tips)
You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
Live Debugging:
- [Tutorial: How to create and live-debug userChrome.css](https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/)
- [Browser Toolbox](https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox)
- [Style Editor](https://developer.mozilla.org/en-US/docs/Tools/Style_Editor)
Firefox Source Code:
- [Github](https://github.com/mozilla/gecko-dev)
- [Searchfox](https://searchfox.org/)
- [Firefox Source Docs](https://firefox-source-docs.mozilla.org/)
Test for None mac users:
- [Docker-OSX](https://github.com/sickcodes/Docker-OSX)
And, Please refer to the [development documentation](./docs/).
### Contribution Targets
We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's:
**Codes**
- New Features.
- Bug fixes.
- Improved compatibility or accessibility.
- Refactoring.
**Graphic Resources**
- Icons ([#213](https://github.com/black7375/Firefox-UI-Fix/issues/213), We need the help of a designer!!)
- Social preview image ([sample](https://github.com/topics/firefox-theme))
**Issues**
- Report a bug.
- Discussing the current state of the code.
- Tell us about related or relevant projects and documents.
- Help other users issue.
- Proposing others..
**Docs**
- Fix typos, alignments.
- Correct awkward sentences.
- Improve document readability.
**Promotions**
- Introduce project
- Video (Recommend!!, We need it)
@ -91,160 +77,7 @@ We love your input! We want to make contributing to this project as easy and tra
- [Producthunt](https://www.producthunt.com/posts/firefox-ui-fix-proton)([#43](https://github.com/black7375/Firefox-UI-Fix/issues/43))
- [Youtube](https://www.youtube.com/watch?v=ECta0icNMgY)
**Docs**
- Fix typos, alignments.
- Correct awkward sentences.
- Improve document readability.
**Issues**
- Report a bug.
- Discussing the current state of the code.
- Tell us about related or relevant projects and documents.
- Help other users issue.
- Proposing others..
**Codes**
- New Features.
- Bug fixes.
- Improved compatibility or accessibility.
- Refactoring.
### Project Structure
```
root
|- .gitattributes: Exclude at `Download Zip`
|- .github: Issue/PR Template, Github Actions
|- .prettierignore: Exclude coding style
|- .prettierrc.json: Coding style
|- icons/: Icons, illustrations
|- install.ps1: Install script write in powersehll
|- install.sh: Install script write in bash
|- LEPTON: Meta infos (branch, version)
|- user.js: about:config settings
|- userChrome.css: CSS for Browser UI
|- userContent.css: CSS for Web pages
```
#### Icon files
Most of them are made in SVG.
Except for illustrations, there must be an `fill="context-fill" fill-opacity="context-fill-opacity"` property to dynamically determine color and transparency.
Icons are mainly [FirefoxUX/photon-icons](https://github.com/FirefoxUX/photon-icons)
or [microsoft/fluentui-system-icons](https://github.com/microsoft/fluentui-system-icons).
#### Meta Info files
It comes from [install.sh](https://github.com/black7375/Firefox-UI-Fix/blob/01ae88bf2c4710e1f364d9eb2901ca2b722cefe7/install.sh#L442).
**`LEPTON` file format**
If this file exist in same directory as the `userChrome.css` file,
it is recognized as the "Lepton" installation directory.
```ini
[Info]
Branch=master | photon-style | proton-style
Ver=<git tag> | <git hash> | [NULL]
```
**`lepton.ini` file Format**
In `lepton.ini`, various information is stored during the installation process.\
This file is recreated every time the installer is created.
```ini
[Profile Name]
Type=Local | Release | Git
Branch=master | photon-style | proton-style
Ver=<git tag> | <git hash> | [NULL]
Path=<Full PATH>
```
**Update Policy according to `Type`**
- Local(unknown): force latest commit update
- Release(<git tag>): force latest tag update
- Git<git hash>: latest commit update
### Restrictions
- Cross Platform
- Different compatibility issues occur in Win7, Win8, Win10, KDE, Gnome, Mac, etc.
- Consider compatibility as much as possible, but use [dedicated media queries](https://github.com/mozilla/gecko-dev/blob/d6188c9ce02efeea309e7177fc14c9eb2f09db37/servo/components/style/gecko/media_features.rs#L906-L930) in special cases
- CSS Loading Order
- User CSS(`userChrome.css`, `userContent.css`) is usually loaded first.
- In many cases, overriding should be prevented with [`important!`](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#the_!important_exception)(Anti-pattern in general web), and side effects should also be considered.
- DOM structure cannot be modified
- It is possible with JS, but there are security and configuration issues, so we should make the most of CSS.
- [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`::after`](https://developer.mozilla.org/en-US/docs/Web/CSS/::after) can indirectly add CSS elements.
- [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)
- Firefox actively uses shadow dom internally
- To modify, it is often a roundabout approach or impossible to inherit
- [XUL](https://en.wikipedia.org/wiki/XUL)
- Sometimes written and bound in C++ for performance, like a treeview of bookmarks.
- The proper document does not exist, so we have to read the source code and work
- Available CSS features are also restricted.
- Side Effects
- Only CSS modifications can cause bugs that are hard to think of in the general web, such as the [context menu not appearing](https://github.com/black7375/Firefox-UI-Fix/issues/114).
## Rules
### Version
Milestone, The versioning scheme we use is [SemVer](https://semver.org/). (Maintainer decides, do not pull request.)
We will release the feature as soon as it is complete, but the cycle should be 2-4 weeks.
Rapid releases.
It comes from [#109](https://github.com/black7375/Firefox-UI-Fix/issues/109#issuecomment-873313945).
### Branch
Stable: Only bugfix, Documentation.
- `master`: Common bugfix, documentation.
- `photon-style`: Bugfix, documentation specified in `photon-style`.
- `proton-sryle`: Bugfix, documentation specified in `proton-style`.
Development: New Features.
- `dev`: Common new features.
- `photon-style-dev`: New features specified in `photon-style`.
- `proton-style-dev`: New features specified in `proton-style`.
### Issue
- **Versions:**
- Make sure youre on the latest version.
- Try older versions.
- Try switching up dependency versions.
- **Search:** Search the projects [issues](https://github.com/black7375/Firefox-UI-Fix/issues) to make sure it's not a known issue.
### Coding style
- **Indent:** 2 spaces for indentation rather than tabs.
- **Columns:** Fit `80`~`100` columns as much as possible. (Auto formatting is using 120 to avoid the worst case)
### Commit
- **Meaningfully:**: It doesn't make meaningless commits.
- **One per task:** It's difficult to distinguish when various tasks are mixed.
- **Often:** Codes may corrupt during large changes.
### Commit Message
For intuitive recognition, I [put a **prefix**](https://github.com/black7375/Firefox-UI-Fix/commits/master).
- `Add:` Add feature or enhanced.
- `Fix:` Bug fix or change default values.
- `Clean:` Refactoring.
- `Doc:` Update docs.
### Pull request
- **Branch:** Check the [Branch](#branch) section and PR to the correct branch.
- **Issue:** We recommend that you open the issue first to discuss the changes with the owner of this repository.
### License
## License
**Any contributions you make will be under the MPL 2.0 Software License**

View File

@ -4,6 +4,104 @@
Thanks,
black7375
----------
Major Contributors
N: AveYo
E: aveyo@yahoo.com
W: https://github.com/AveYo
N: Jan Janssen
E: medhefgo@web.de
W: https://github.com/medhefgo
N: Yunsup Sim
E: pedogunu@gmail.com
W: https://ethansup.net
----------
Contributors
N: 7k5x
E: 7k5xlp0onfire@gmail.com
W: https://github.com/7k5x
N: Ajith-stark
E: ajith.kum.12342@gmail.com
W: https://github.com/Ajith-stark
N: Andmagdo
W: https://github.com/andmagdo
N: anzz1
W: https://github.com/anzz1
N: Backseat-Driver
W: https://www.reddit.com/user/Backseat-Driver/
N: badprogramshere
W: https://github.com/badprogramshere
N: BPower0036
W: https://github.com/BPower0036
N: Burak Yigit Kaya
E: ben@byk.im
W: https://byk.im/
N: dr460nf1r3
E: njcrypted@protonmail.com
W: https://dr460nf1r3.me/
N: Filip Š
E: filip.stamcar@hotmail.com
W: https://www.filips.si/
N: hellojaccc
E: kim@taekyeong.me
W: https://github.com/hellojaccc
N: James Upjohn
E: jammehcow@jammehcow.co.nz
W: https://github.com/jammehcow
N: Jonta
W: https://github.com/Jonta
N: mamen
W: https://www.mamen.at
N: MarNicGit
W: https://github.com/MarNicGit
N: ph3b3
E: phoebeleong8@gmail.com
W: https://phoebe-leong.github.io/
N: Rahul Ramkumar
E: rahulram226@gmail.com
W: https://rahulramkumar.dev
N: Roel
E: Nyubis@gmail.com
W: https://github.com/Nyubis
N: SanderTheDragon
E: sanderthedragon@zoho.com
W: https://gitlab.com/SanderTheDragon
N: sean z
E: ean@vsxd.com
W: https://vsxd.com/
N: Sylvain
E: B00ze64@hotmail.com
W: https://github.com/B00ze64
N: Tatsuyuki Ishi
E: ishitatsuyuki@gmail.com
W: https://github.com/ishitatsuyuki
----------
Reference Projects & Resources
@ -107,91 +205,3 @@ N: Waterfox
W: https://github.com/WaterfoxCo/Waterfox
C: Copyright (c) 2012 Waterfox Limited
L: MPL 2.0
----------
Major Contributors
N: AveYo
E: aveyo@yahoo.com
W: https://github.com/AveYo
N: Jan Janssen
E: medhefgo@web.de
W: https://github.com/medhefgo
N: Yunsup Sim
E: pedogunu@gmail.com
W: https://ethansup.net
----------
Contributors
N: 7k5x
E: 7k5xlp0onfire@gmail.com
W: https://github.com/7k5x
N: Ajith-stark
E: ajith.kum.12342@gmail.com
W: https://github.com/Ajith-stark
N: Andmagdo
W: https://github.com/andmagdo
N: Backseat-Driver
W: https://www.reddit.com/user/Backseat-Driver/
N: badprogramshere
W: https://github.com/badprogramshere
N: Burak Yigit Kaya
E: ben@byk.im
W: https://byk.im/
N: dr460nf1r3
E: njcrypted@protonmail.com
W: https://dr460nf1r3.me/
N: hellojaccc
E: kim@taekyeong.me
W: https://github.com/hellojaccc
N: James Upjohn
E: jammehcow@jammehcow.co.nz
W: https://github.com/jammehcow
N: Jonta
W: https://github.com/Jonta
N: mamen
W: https://www.mamen.at
N: MarNicGit
W: https://github.com/MarNicGit
N: ph3b3
E: phoebeleong8@gmail.com
W: https://phoebe-leong.github.io/
N: Rahul Ramkumar
E: rahulram226@gmail.com
W: https://rahulramkumar.dev
N: Roel
E: Nyubis@gmail.com
W: https://github.com/Nyubis
N: SanderTheDragon
E: sanderthedragon@zoho.com
W: https://gitlab.com/SanderTheDragon
N: sean z
E: ean@vsxd.com
W: https://vsxd.com/
N: Sylvain
E: B00ze64@hotmail.com
W: https://github.com/B00ze64
N: Tatsuyuki Ishi
E: ishitatsuyuki@gmail.com
W: https://github.com/ishitatsuyuki

View File

@ -1,3 +1,3 @@
[Info]
Ver=v4.6.3
Ver=v5.1.0
Branch=photon-style

View File

@ -18,10 +18,14 @@
-----
🔔🔔 A project redesign is in progress. #351
🔔🔔 Did you set a custom, but not work?
It's built with SCSS and all configured as options. \\
It's in beta testing, and I'am looking forward to hearing from you.
You should copy [[./user.js][ ~user.js~ ]] file before the theme works.
The option system depends on user configuration, and nothing applies without settings. \\
Also, real-time changes are difficult for [[./docs/Restrictions.md#supports][technical limitations]] and require restarts.
Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-userjs][can be conflict]] and should be explicitly =false=.
-----
@ -35,8 +39,8 @@ It's in beta testing, and I'am looking forward to hearing from you.
Lepton's photon styled is preserve Photon's feeling while keep [[https://github.com/black7375/Firefox-UI-Fix][Original Lepton]].'s strengths.
/Disclaimer:/ It works on *Firefox 89* and above!!
| *Wiki* | | | |
| [[https://github.com/black7375/Firefox-UI-Fix/wiki/Installation-Guide][Installation Guide]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Screenshots][Screenshots]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Compatibility-Issues-Solution][Compatibility Issues Solution]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Tips][Tips]] |
| *Wiki* | | | | |
| [[https://github.com/black7375/Firefox-UI-Fix/wiki/Installation-Guide][Installation Guide]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Screenshots][Screenshots]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options][Options]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Compatibility-Issues-Solution][Compatibility Issues Solution]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Tips][Tips]] |
[[https://user-images.githubusercontent.com/25581533/120091976-41ea4e00-c0ff-11eb-88ca-a204cfcebe72.png]]
@ -116,7 +120,7 @@ It's in beta testing, and I'am looking forward to hearing from you.
bash -c "$(curl -fsSL https://raw.githubusercontent.com/black7375/Firefox-UI-Fix/master/install.sh)"
#+END_SRC
Windows users: Run with powershell
Windows users: Run with powershell ([[https://github.com/black7375/Firefox-UI-Fix/wiki/Compatibility-Issues-Solution#windows-7-powershell-script-not-works][Does not work at Win7?]])
#+BEGIN_SRC powershell
Powershell -c "Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iwr https://raw.githubusercontent.com/black7375/Firefox-UI-Fix/master/install.ps1 -useb | iex"
#+END_SRC

View File

@ -0,0 +1,126 @@
@use 'true' as *;
@use "example" as *;
@use "../src/utils/color_scheme";
@include test-module("Color scheme is dark [mix]") {
@include test("simple") {
@include assert {
@include output {
@include color_scheme.Dark {
@include example;
}
}
@include expect {
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
@include example;
}
}
}
}
@include test("simple reversed") {
@include assert {
@include output {
@include example_tag {
@include color_scheme.Dark {
@include example_property;
}
}
}
@include expect {
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
@include example_tag {
@include example_property;
}
}
}
}
}
}
@include test-module("Color scheme is light [mix]") {
@include test("simple") {
@include assert {
@include output {
@include color_scheme.Light {
@include example;
}
}
@include expect {
@media (-moz-toolbar-prefers-color-scheme: light), (prefers-color-scheme: light) {
@include example;
}
}
}
}
@include test("simple reversed") {
@include assert {
@include output {
@include example_tag {
@media (-moz-toolbar-prefers-color-scheme: light), (prefers-color-scheme: light) {
@include example_property;
}
}
}
@include expect {
@media (-moz-toolbar-prefers-color-scheme: light), (prefers-color-scheme: light) {
@include example_tag {
@include example_property;
}
}
}
}
}
}
@include test-module("Color contrast [mix]") {
@include test("simple") {
@include assert {
@include output {
@include color_scheme.Contrast {
@include example;
}
}
@include expect {
@media (prefers-contrast) {
@include example;
}
}
}
}
}
@include test-module("Color not contrast [mix]") {
@include test("simple") {
@include assert {
@include output {
@include color_scheme.NotContrast {
@include example;
}
}
@include expect {
@media not all and (prefers-contrast) {
@include example;
}
}
}
}
}
@include test-module("Animate, not reduced motion [mix]") {
@include test("simple") {
@include assert {
@include output {
@include color_scheme.Animate {
@include example;
}
}
@include expect {
@media (prefers-reduced-motion: no-preference) {
@include example;
}
}
}
}
}

View File

@ -0,0 +1,98 @@
@use 'true' as *;
@use "example" as *;
@use "../src/utils/each";
@include test-module("Create each at rules [mix]") {
@include test("prefix single") {
@include assert {
@include output {
@include each.AtEach("-moz-document", "about:home", "url") {
@include example;
}
}
@include expect {
@-moz-document url(about:home) {
@include example;
}
}
}
}
@include test("prefix multiple") {
@include assert {
@include output {
$input: "about:home" "about:newtab";
@include each.AtEach("-moz-document", $input, "url") {
@include example;
}
}
@include expect {
@-moz-document url(about:home), url(about:newtab) {
@include example;
}
}
}
}
@include test("null prefix single") {
@include assert {
@include output {
@include each.AtEach("media", "max-width: 1024px") {
@include example;
}
}
@include expect {
@media (max-width: 1024px) {
@include example;
}
}
}
}
@include test("null prefix multiple") {
@include assert {
@include output {
$input: "hover: hover" "max-width: 1024px";
@include each.AtEach("media", $input) {
@include example;
}
}
@include expect {
@media (hover: hover), (max-width: 1024px) {
@include example;
}
}
}
}
@include test("prefix custom option") {
@include assert {
@include output {
@include each.AtEach("supports", "userChrome.tab.photon", "-moz-bool-pref", ("seperator": " or ", "quoted": true)) {
@include example;
}
}
@include expect {
@supports -moz-bool-pref("userChrome.tab.photon") {
@include example;
}
}
}
}
@include test("prefix custom option multiple") {
@include assert {
@include output {
$input: "userChrome.tab.photon" "userChrome.padding.photon";
@include each.AtEach("supports", $input, "-moz-bool-pref", ("seperator": " or ", "quoted": true)) {
@include example;
}
}
@include expect {
@supports -moz-bool-pref("userChrome.tab.photon") or -moz-bool-pref("userChrome.padding.photon") {
@include example;
}
}
}
}
}

View File

@ -0,0 +1,14 @@
@mixin example_tag() {
body {
@content;
}
}
@mixin example_property() {
font-size: 16px;
}
@mixin example() {
@include example_tag {
@include example_property;
}
}

View File

@ -0,0 +1,31 @@
@use 'true' as *;
@use "../src/utils/list";
// TODO: Need more tests..
$simpleList: (ab cd efgh ijk);
$dupList: (ab cd efgh efgh efgh ijk);
@include test-module("Remove at list [fn]") {
@include test("simple") {
@include assert-equal(
list.remove($simpleList, "cd"),
(ab efgh ijk)
);
}
@include test("duplicate") {
@include assert-equal(
list.remove($dupList, "efgh"),
(ab cd ijk)
);
}
}
@include test-module("Convert to str [fn]") {
@include test("simple") {
@include assert-equal(
list.to-string($simpleList),
(((null ab) cd) efgh) ijk
);
}
}

View File

@ -0,0 +1,72 @@
@use 'true' as *;
@use "example" as *;
@use "../src/utils/media";
// TODO: Need more tests..
@include test-module("Create each media at once [mix]") {
@include test("simple") {
@include assert {
@include output {
$input: "hover: hover" "max-width: 1024px";
@include media.each($input...) {
@include example;
}
}
@include expect {
@media (hover: hover), (max-width: 1024px) {
@include example;
}
}
}
}
@include test("beyond") {
@include assert {
@include output {
$input: "hover: hover" "max-width: 1024px";
@include example_tag {
@include media.each($input...) {
font-size: 16px;
}
}
}
@include expect {
@media (hover: hover), (max-width: 1024px) {
@include example_tag {
@include example_property;
}
}
}
}
}
@include test("null") {
@include assert {
@include output {
$input: ();
@include example_tag {
@include media.each($input) {
@include example_property;
}
}
}
@include expect {
}
}
}
@include test("null element") {
@include assert {
@include output {
$input: (null);
@include example_tag {
@include media.each($input) {
@include example_property;
}
}
}
@include expect {
}
}
}
}

View File

@ -0,0 +1,54 @@
@use 'true' as *;
@use "example" as *;
@use "../src/utils/option";
@include test-module("If exist pref [mix]") {
@include test("simple") {
@include assert {
@include output {
@include option.Option("userChrome.tab.photon") {
@include example;
}
}
@include expect {
@supports -moz-bool-pref("userChrome.tab.photon") {
@include example;
}
}
}
}
@include test("multiple") {
@include assert {
@include output {
@include option.Option("userChrome.tab.photon", "userChrome.padding.photon") {
@include example;
}
}
@include expect {
@supports -moz-bool-pref("userChrome.tab.photon") or -moz-bool-pref("userChrome.padding.photon") {
@include example;
}
}
}
}
}
@include test-module("If not exist pref [mx]") {
@include test("simple") {
@include assert {
@include output {
@include option.NotOption("userChrome.tab.photon") {
@include example;
}
}
@include expect {
@supports not -moz-bool-pref("userChrome.tab.photon") {
@include example;
}
}
}
}
// Need multiple test
}

View File

@ -0,0 +1,147 @@
@use 'true' as *;
@use "example" as *;
@use "../src/utils/os" as *;
// TODO: Need more tests..
@include test-module("Create OS related media [mix]") {
@include test("win7") {
@include assert {
@include output {
@include OS($win7) {
@include example;
}
}
@include expect {
@media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) {
@include example;
}
}
}
}
@include test("win8") {
@include assert {
@include output {
@include OS($win8) {
@include example;
}
}
@include expect {
@media (-moz-os-version: windows-win8), (-moz-platform: windows-win8) {
@include example;
}
}
}
}
@include test("win10") {
@include assert {
@include output {
@include OS($win10) {
@include example;
}
}
@include expect {
@media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) {
@include example;
}
}
}
}
@include test("linux") {
@include assert {
@include output {
@include OS($linux) {
@include example;
}
}
@include expect {
@media (-moz-gtk-csd-available) {
@include example;
}
}
}
}
@include test("mac") {
@include assert {
@include output {
@include OS($mac) {
@include example;
}
}
@include expect {
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
@include example;
}
}
}
}
@include test("bigsur") {
@include assert {
@include output {
@include OS($bigsur) {
@include example;
}
}
@include expect {
@media (-moz-mac-big-sur-theme: 0) {
@include example;
}
}
}
}
@include test("win") {
@include assert {
@include output {
@include OS($win) {
@include example;
}
}
@include expect {
@media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) {
@include example;
}
}
}
}
@include test("all os - win7, win8, win10, mac, bigsur, linux") {
@include assert {
@include output {
@include OS($win7, $win8, $win10, $mac, $bigsur, $linux) {
@include example;
}
}
@include expect {
@media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10), (-moz-mac-big-sur-theme: 0), (-moz-gtk-csd-available) {
@include example;
}
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
@include example;
}
}
}
}
@include test("all os - win, mac, bigsur, linux") {
@include assert {
@include output {
@include OS($win, $mac, $bigsur, $linux) {
@include example;
}
}
@include expect {
@media (-moz-mac-big-sur-theme: 0), (-moz-gtk-csd-available), (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) {
@include example;
}
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
@include example;
}
}
}
}
}

View File

@ -0,0 +1,14 @@
const path = require("path");
const sassTrue = require("sass-true");
const glob = require("fast-glob");
// https://www.educative.io/blog/sass-tutorial-unit-testing-with-sass-true
// Find all of the Sass files that end in `*.test.scss` in any directory of this project.
// I use path.resolve because True requires absolute paths to compile test files.
const pattern = path.resolve(process.cwd(), "__tests__/**/*.test.scss");
const sassTestFiles = glob.sync([pattern]);
// Run True on every file found with the describe and it methods provided
sassTestFiles.forEach(file => {
describe(file, () => sassTrue.runSass({ file }, { describe, it }));
});

View File

@ -0,0 +1,192 @@
@use 'true' as *;
@use "example" as *;
@use "sass:selector";
@use "../src/utils/theme";
@include test-module("System Default Theme Selector [fn]") {
@include test("simple") {
@include assert {
@include output {
#{theme.system-default-theme()} {
@include example_property;
}
}
@include expect {
:root:not(:-moz-lwtheme), :root[lwt-default-theme-in-dark-mode] {
@include example_property;
}
}
}
}
@include test("append selector") {
@include assert {
@include output {
#{selector.append(theme.system-default-theme(), "[inFullscreen=true]")} {
@include example_property;
}
}
@include expect {
:root:not(:-moz-lwtheme)[inFullscreen=true], :root[lwt-default-theme-in-dark-mode][inFullscreen=true] {
@include example_property;
}
}
}
}
@include test("nested selector") {
@include assert {
@include output {
#{selector.nest(theme.system-default-theme(), "#navigator-toolbox")} {
@include example_property;
}
}
@include expect {
:root:not(:-moz-lwtheme) #navigator-toolbox, :root[lwt-default-theme-in-dark-mode] #navigator-toolbox {
@include example_property;
}
}
}
}
}
@include test-module("Built-In Default Theme Selector [fn]") {
@include test("simple") {
@include assert {
@include output {
#{theme.built-in-default-theme()} {
@include example_property;
}
}
@include expect {
:root[lwtheme-mozlightdark], :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) {
@include example_property;
}
}
}
}
@include test("append selector") {
@include assert {
@include output {
#{selector.append(theme.built-in-default-theme(), "[inFullscreen=true]")} {
@include example_property;
}
}
@include expect {
:root[lwtheme-mozlightdark][inFullscreen=true], :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])[inFullscreen=true] {
@include example_property;
}
}
}
}
@include test("nested selector") {
@include assert {
@include output {
#{selector.nest(theme.built-in-default-theme(), "#navigator-toolbox")} {
@include example_property;
}
}
@include expect {
:root[lwtheme-mozlightdark] #navigator-toolbox, :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #navigator-toolbox {
@include example_property;
}
}
}
}
}
@include test-module("Built-In Light Theme Selector [fn]") {
@include test("simple") {
@include assert {
@include output {
#{theme.built-in-light-theme()} {
@include example_property;
}
}
@include expect {
:root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright]), :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] {
@include example_property;
}
}
}
}
@include test("append selector") {
@include assert {
@include output {
#{selector.append(theme.built-in-light-theme(), "[inFullscreen=true]")} {
@include example_property;
}
}
@include expect {
:root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright])[inFullscreen=true], :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][inFullscreen=true] {
@include example_property;
}
}
}
}
@include test("nested selector") {
@include assert {
@include output {
#{selector.nest(theme.built-in-light-theme(), "#navigator-toolbox")} {
@include example_property;
}
}
@include expect {
:root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright]) #navigator-toolbox, :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox {
@include example_property;
}
}
}
}
}
@include test-module("Built-In Dark Theme Selector [fn]") {
@include test("simple") {
@include assert {
@include output {
#{theme.built-in-dark-theme()} {
@include example_property;
}
}
@include expect {
:root[lwtheme-mozlightdark][lwthemetextcolor=bright], :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] {
@include example_property;
}
}
}
}
@include test("append selector") {
@include assert {
@include output {
#{selector.append(theme.built-in-dark-theme(), "[inFullscreen=true]")} {
@include example_property;
}
}
@include expect {
:root[lwtheme-mozlightdark][lwthemetextcolor=bright][inFullscreen=true], :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][inFullscreen=true] {
@include example_property;
}
}
}
}
@include test("nested selector") {
@include assert {
@include output {
#{selector.nest(theme.built-in-dark-theme(), "#navigator-toolbox")} {
@include example_property;
}
}
@include expect {
:root[lwtheme-mozlightdark][lwthemetextcolor=bright] #navigator-toolbox, :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] #navigator-toolbox {
@include example_property;
}
}
}
}
}

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,40 @@
# Omni.ja
<!-- markdown-toc start - Don't edit this section. Run M-x markdown-toc-refresh-toc -->
**Table of Contents**
- [Basics](#basics)
- [Related Project](#related-project)
- [Related Source file](#related-source-file)
<!-- markdown-toc end -->
## Basics
**Related Docs**
- [UDN: omni.ja (formerly omni.jar)](https://udn.realityripple.com/docs/Mozilla/About_omni.ja_(formerly_omni.jar))
- [Firefox 4: jar jar jar](https://web.archive.org/web/20161003115800/https://blog.mozilla.org/tglek/2010/09/14/firefox-4-jar-jar-jar/)
- [Firefox's Optimized Zip Format: Reading Zip Files Really Quickly](https://taras.glek.net/post/optimized-zip-format/)
- [How to Optimize or Deoptimize Firefox OMNI.JA File](https://www.raymond.cc/blog/edit-files-inside-firefox-4-omni-jar-to-auto-save-password/)
**Explanation**
Firefox achieve performance improvements by moving many of their internal parts from being standalone files or sets of JAR files into just one JAR file called `omni.ja`.
This reduces the amount of I/O needed to load the application.
Chrome content, modules, non-binary components, and many other elements are packaged in an omni.jar file for each base directory.
- `actors/`: [JSActors](https://firefox-source-docs.mozilla.org/dom/ipc/jsactors.html) related files.
- `chrome.manifest`: The [chrome manifest](https://udn.realityripple.com/docs/Mozilla/Chrome_Registration) file.
- `chrome/`: User interface files for the application
- `components/`: XPCOM components the application relies upon.
- `defaults/`: Default preference files.
- `modules/`: [JavaScript code modules](https://udn.realityripple.com/docs/Mozilla/JavaScript_code_modules).
- `res/`: Miscellaneous resource files.
## Related Project
- https://github.com/SebastianSimon/firefox-omni-tweaks
## Related Source file
- https://github.com/mozilla/gecko-dev/blob/de91f5ee41251779ff2973d24d195d116cb6ebd7/python/mozbuild/mozpack/packager/formats.py#L258-L359
- https://github.com/humphd/mozilla-central-old/blob/9d4d9f265e24e6358c067ae1e300c1ce3227a91d/config/optimizejars.py

View File

@ -0,0 +1,246 @@
# Preference
<!-- markdown-toc start - Don't edit this section. Run M-x markdown-toc-refresh-toc -->
**Table of Contents**
- [Basics](#basics)
- [Default Config](#default-config)
- [User Config](#user-config)
* [about:config](#aboutconfig)
* [prefs.js](#prefsjs)
* [user.js](#userjs)
- [Auto Config](#auto-config)
- [Using with User Custom CSS](#using-with-user-custom-css)
- [Sync](#sync)
- [Related Source file](#related-source-file)
<!-- markdown-toc end -->
## Basics
**Related Docs**
- [Firefox Source Docs: libpref](https://firefox-source-docs.mozilla.org/modules/libpref/index.html)
**Key/Value**
- Key:
- Pref name
- Type: 8-bit string
- Convention is to use a dotted segmented form (Ex. `browser.cache.disk.enable`)
- Value:
- Type: bool, 32-bit ints, 8-bit C string
- When you need an float, use a string. (Ex. `general.smoothScroll.currentVelocityWeighting`: `"0.25"`)
**Main Purpose**
- Feature enable/disable flags (Ex. `xpinstall.signatures.required`).
- User preferences (Ex. things set from `about:preferences`)
- Internal application parameters (Ex. `javascript.options.mem.nursery.max_kb`).
- Application data (Ex. `browser.onboarding.tour.onboarding-tour-addons.completed`, `services.sync.clients.lastSync`).
- Things that might need locking in an enterprise installation.
**Preference file RFC**
Key information on the sets that can be used in the configuration file.
- `pref()`: Set default pref
- `sticky` attr: same as `sticky_pref()`
- `locked` attr: cannot change from default.
- `sticky_pref()`: Always logged even if the defaults match
- `user_pref()`: Set user pref
The following is a method of operating the configuration file parser.
See [EBNF(Extended Backus-Naur form)](https://en.wikipedia.org/wiki/Extended_Backus%E2%80%93Naur_form) if you want to know about syntax.
```ebnf
<pref-file> = <pref>*
<pref> = <pref-spec> "(" <pref-name> "," <pref-value> <pref-attrs> ")" ";"
<pref-spec> = "user_pref" | "pref" | "sticky_pref" // in default pref files
<pref-spec> = "user_pref" // in user pref files
<pref-name> = <string-literal>
<pref-value> = <string-literal> | "true" | "false" | <int-value>
<int-value> = <sign>? <int-literal>
<sign> = "+" | "-"
<int-literal> = [0-9]+ (and cannot be followed by [A-Za-z_])
<string-literal> =
A single or double-quoted string, with the following escape sequences
allowed: \", \', \\, \n, \r, \xNN, \uNNNN, where \xNN gives a raw byte
value that is copied directly into an 8-bit string value, and \uNNNN
gives a UTF-16 code unit that is converted to UTF-8 before being copied
into an 8-bit string value. \x00 and \u0000 are disallowed because they
would cause C++ code handling such strings to misbehave.
<pref-attrs> = ("," <pref-attr>)* // in default pref files
= <empty> // in user pref files
<pref-attr> = "sticky" | "locked" // default pref files only
```
## Default Config
- [`modules/libpref/init/all.js`](https://github.com/mozilla/gecko-dev/blob/master/modules/libpref/init/all.js): all products
- [`browser/app/profile/firefox.js`](https://github.com/mozilla/gecko-dev/blob/master/browser/app/profile/firefox.js): only firefox deskstop
In release builds these are all put into [`omni.ja`](./Omni_ja.md).
## User Config
**Related Docs**
- [mozillaZine: Editing configuration](https://kb.mozillazine.org/Editing_configuration)
- [Support Mozilla: How to fix preferences that won't save](https://support.mozilla.org/en-US/kb/how-to-fix-preferences-wont-save)
- [Support Mozilla: Reset Firefox preferences to troubleshoot and fix problems](https://support.mozilla.org/en-US/kb/reset-preferences-fix-problems)
- [UDN: A brief guide to Mozilla preferences](https://udn.realityripple.com/docs/Mozilla/Preferences/A_brief_guide_to_Mozilla_preferences)
**Restrictions**
It can be defined using only `user_pref()`.
> User pref file syntax is slightly more restrictive than default pref file syntax. In user pref files `user_pref` definitions are allowed but `pref` and `sticky_pref` definitions are not, and attributes (such as `locked`) are not allowed.
**File Path**
`prefs.js`, `user.js` is located in the profile directory.
### about:config
It is written to `prefs.js` in a way that can be set by the GUI.
- [Support Mozilla: Configuration Editor for Firefox](https://support.mozilla.org/en-US/kb/about-config-editor-firefox)
### prefs.js
**Related Docs**
- [mozillaZine: Prefs.js file](https://kb.mozillazine.org/Prefs.js_file)
**Basics**
It exists in the profile directory, and is used to store settings that are changed from *defaults* or when users added *new settings*.
In general, Do NOT edit `prefs.js` directly.
### user.js
**Related Docs**
- [mozillaZine: User.js file](https://kb.mozillazine.org/User.js_file)
**Restrictions**
A `user.js` file can make certain preference settings more or less "permanent" in a specific profile.
Once an entry for a preference setting exists in the `user.js` file, any change you make to that setting in the options and preference dialogs or via `about:config` will be lost when you restart your firefox because the `user.js` entry will override it.
You'll have to first delete or edit the `user.js` file to remove the entries before the preferences can be changed in the application.
**Example**
```javascript
// user.js
user_pref("browser.cache.disk.enable", false); // Bool
user_pref("layout.css.prefers-color-scheme.content-override", 3); // Int
user_pref("general.smoothScroll.currentVelocityWeighting", "0.12"); // String
```
## Auto Config
**Related Docs**
- [Support Mozilla: Customizing Firefox Using AutoConfig](https://support.mozilla.org/en-US/kb/customizing-firefox-using-autoconfig)
- [What is Autoconfig Startup Scripting (AKA userChrome.js)?](https://www.userchrome.org/what-is-userchrome-js.html)
- [UDN: Gecko Chrome](https://udn.realityripple.com/docs/Mozilla/Gecko/Chrome)
- [UDN: JavaScript code modules](https://udn.realityripple.com/docs/Mozilla/JavaScript_code_modules)
- [UDN: Limitations of chrome scripts](https://udn.realityripple.com/docs/Mozilla/Firefox/Multiprocess_Leftovers/Limitations_of_chrome_scripts)
**Basics**
Customizations that cannot be done with add-on and [`User Custom CSS`](./README.md#user-custom-css), such as adding browser UI elements directly or changing default behavior, must use `Auto Config`.
**How to**
```javascript
pref("general.config.filename", "config.js"); // alternative to "firefox.cfg", for using highlight
pref("general.config.obscure_value", 0);
```
**Example**
```javascript
pref("general.config.filename", "config.js"); // alternative to "firefox.cfg", for using highlight
pref("general.config.obscure_value", 0);
```
## Using with User Custom CSS
**Related Docs**
- [MDN: @supports](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)
- [UDN: `CSS -moz-bool-pref() @supports function`](https://udn.realityripple.com/docs/Mozilla/Gecko/Chrome/CSS/-moz-bool-pref)
**Restrictions**
Please refer to [Doc: Restrictions.md](./Restrictions.md#supports)'s `@support`.
**Example**
Test each case by turning on/off the following settings.
- `userChrome.navBar.red`
- `userChrome.navBar.margin`
```css
/* userChrome.css */
/* 1. If config is true */
@supports -moz-bool-pref("userChrome.navBar.red") {
#nav-bar {
background-color: red !important;
}
}
/* 2. When any one of the config is true */
@supports -moz-bool-pref("userChrome.navBar.red") or -moz-bool-pref("userChrome.navBar.margin") {
#nav-bar {
background-color: red !important;
margin-block: 20px;
}
}
/* 3. Multiple configs must all be satisfied */
@supports -moz-bool-pref("userChrome.navBar.red") and -moz-bool-pref("userChrome.navBar.margin") {
#nav-bar {
background-color: red !important;
margin-block: 20px;
}
}
/* 4. 3's Other version */
@supports -moz-bool-pref("userChrome.navBar.red") {
@supports -moz-bool-pref("userChrome.navBar.margin") {
#nav-bar {
background-color: red !important;
margin-block: 20px;
}
}
}
/* 5. If not exist or false */
@supports not -moz-bool-pref("userChrome.navBar.red") {
#nav-bar {
background-color: blue !important;
}
}
```
## Sync
**Related Docs**
- [Support Mozilla: Sync custom preferences](https://support.mozilla.org/en-US/kb/sync-custom-preferences)
**How to**
Firefox Sync allows you to [choose the types of data](https://support.mozilla.org/en-US/kb/how-do-i-choose-what-information-sync-firefox) to sync across all devices.
![Choose sync data](https://user-images.githubusercontent.com/25581533/162106009-85f8efe6-c310-488b-9940-763b6e7dd271.png)
The following options are required to sync custom configs.
- `services.sync.prefs.dangerously_allow_arbitrary` to `true`
Then, subsequently any pref can be pushed there by creating a remote with prefix.
- `services.sync.prefs.sync.`
**Example**
```javascript
// user.js
user_pref("services.sync.prefs.dangerously_allow_arbitrary", true); // Must need
// Sync UI
user_pref("services.sync.prefs.sync.browser.uiCustomization.state", true);
user_pref("services.sync.prefs.sync.browser.uidensity", true);
```
## Related Source file
- https://github.com/mozilla/gecko-dev/blob/master/modules/libpref/parser/src/lib.rs
- https://github.com/mozilla/gecko-dev/blob/master/extensions/pref/autoconfig/src/prefcalls.js

View File

@ -0,0 +1,98 @@
# Project Structure
<!-- markdown-toc start - Don't edit this section. Run M-x markdown-toc-refresh-toc -->
**Table of Contents**
- [Basics](#basics)
- [Icon files](#icon-files)
- [Install Scripts](#install-scripts)
* [Meta Info files](#meta-info-files)
* [Overriding](#overriding)
<!-- markdown-toc end -->
## Basics
The overall structure of this project.
```
root
|- __tests__/: Mixin spec test
|- icons/: Icons, illustrations
|- css/: Build result of SCSS Files
|- docs/: Development Documents
|- src/: Source files
|- src/leptonChrome.scss: Entry of SCSS for Browser UI
|- src/leptonContent.scss: Entry of SCSS for Web pages
|- .gitattributes: Exclude at `Download Zip`
|- .github: Issue/PR Template, Github Actions
|- .prettierignore: Exclude coding style
|- .prettierrc.json: Coding style
|- install.ps1: Install script write in powersehll
|- install.sh: Install script write in bash
|- package.json: Build setup, package dependency
|- LEPTON: Meta infos (branch, version)
|- user.js: about:config settings
|- userChrome.css: Entry of css for Browser UI (Don't modify directly!!)
|- userContent.css: Entry of css for Web pages (Don't modify directly!!)
|- yarn.lock: Auto generated dependency (Don't modify directly!!)
```
## Icon files
Most of them are made in SVG.
Except for illustrations, there must be an `fill="context-fill" fill-opacity="context-fill-opacity"` property to dynamically determine color and transparency.
Icons are mainly [FirefoxUX/photon-icons](https://github.com/FirefoxUX/photon-icons)
or [microsoft/fluentui-system-icons](https://github.com/microsoft/fluentui-system-icons).
Although not yet used, [tabler/tabler-icons](https://github.com/tabler/tabler-icons) and [feathericons/feather](https://github.com/feathericons/feather) can also be referred to.
You can see more in the issue, [Unify icon design langauge #213](https://github.com/black7375/Firefox-UI-Fix/issues/213).
## Install Scripts
### Meta Info files
It comes from [install.sh](https://github.com/black7375/Firefox-UI-Fix/blob/01ae88bf2c4710e1f364d9eb2901ca2b722cefe7/install.sh#L442).
**`LEPTON` file format**
If this file exist in same directory as the `userChrome.css` file,
it is recognized as the "Lepton" installation directory.
```ini
[Info]
Branch=master | photon-style | proton-style
Ver=<git tag> | <git hash> | [NULL]
```
**`lepton.ini` file Format**
In `lepton.ini`, various information is stored during the installation process.\
This file is recreated every time the installer is created.
```ini
[Profile Name]
Type=Local | Release | Git
Branch=master | photon-style | proton-style
Ver=<git tag> | <git hash> | [NULL]
Path=<Full PATH>
```
**Update Policy according to `Type`**
- Local(unknown): force latest commit update
- Release(<git tag>): force latest tag update
- Git<git hash>: latest commit update
## Overriding
Inspired by [arkenfox](https://github.com/arkenfox/user.js/wiki/3.1-Overrides).
These files need to use a shell script and has some priorities.
CSS override settings(`userChrome-overrides.css`, `userContent-overrides.css`) are relatively simple.
- `./<CSS_OVERRIDES>` (Will be copied `<FIREFOX_PROFILE>/chrome/`)
- `<FIREFOX_PROFILE>/chrome/<CSS_OVERRIDES>`
`user-overrides.js` needs to use a shell script and has some priorities.
- `<FIREFOX_PROFILE>/user-overrides.js`
- `./user-overrides.js` (Will be copied `<FIREFOX_PROFILE>/chrome/`)
- `<FIREFOX_PROFILE>/chrome/user-overrides.js`

View File

@ -0,0 +1,119 @@
# Develper Documents for Firefox Custom
<!-- markdown-toc start - Don't edit this section. Run M-x markdown-toc-refresh-toc -->
**Table of Contents**
- [Basics](#basics)
- [Project-Specific](#project-specific)
* [Environment](#environment)
* [Project Structure](#project-structure)
* [Rules](#rules)
- [Advanced Customizing](#advanced-customizing)
* [Smart Bookmarks](#smart-bookmarks)
* [Policies](#policies)
* [Preference](#preference)
- [User Custom CSS](#user-custom-css)
* [Basics](#basics-1)
* [Restrictions](#restrictions)
<!-- markdown-toc end -->
## Basics
The following documents may be helpful:
- [Roadmap](https://github.com/black7375/Firefox-UI-Fix/issues/2)
- [Each Versions Plan](https://github.com/black7375/Firefox-UI-Fix/milestones)
- [Wiki:Compatibility Issues Solution](https://github.com/black7375/Firefox-UI-Fix/wiki/Compatibility-Issues-Solution)
- [Wiki:Tips](https://github.com/black7375/Firefox-UI-Fix/wiki/Tips)
Firefox Source Code:
- [Github](https://github.com/mozilla/gecko-dev)
- [Searchfox](https://searchfox.org/)
- [Firefox Source Docs](https://firefox-source-docs.mozilla.org/)
Firefox Documents:
- [Support Mozilla: Firefox advanced customization and configuration options](https://support.mozilla.org/en-US/kb/firefox-advanced-customization-and-configuration)
- [Support Mozilla: Profiles - Where Firefox stores your bookmarks, passwords and other user data](https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data)
Test for None mac users:
- [Docker-OSX](https://github.com/sickcodes/Docker-OSX)
## Project-Specific
### Environment
[`git`](https://git-scm.com/) and [`yarn`](https://yarnpkg.com/) should be installed.
You can configure it as follows:
```shell
## clone repository
git clone https://github.com/black7375/Firefox-UI-Fix.git
cd ./Firefox-UI-Fix
## checkout branch
git checkout <BRANCH_NAME>
## env setup
yarn install
```
You can build with this command:
```shell
yarn build
```
You can check test and css validate:
```shell
## test - When you make mixin or function
# __tests__ direcory, You can also find out how to use internal utils.
yarn test
## validate - Will be failed, this project uses non-standard features.
# Just use only for checking.
yarn validate
```
### Project Structure
- [Doc: Project\_Structure.md](./Project_Structure.md).
### Rules
This is a rough guideline. (Not forced)
- [Doc: Rules.md](./Rules.md).
## Advanced Customizing
### Smart Bookmarks
- [Doc: Smart_Bookmarks.md](./Smart_Bookmarks.md).
### Policies
- [Support Mozilla: Policies overview](https://support.mozilla.org/en-US/products/firefox-enterprise/policies-customization-enterprise/policies-overview-enterprise)
- [Policy Templates](https://github.com/mozilla/policy-templates)
### Preference
- [Doc: Preference.md](./Preference.md).
## User Custom CSS
### Basics
`userChrome.css` file is for browser UI, `userContent.css` file is for web contents.
Unlike [User config](./Preference.md#user-config), they are located in `<FIREFPX_PROFILE>/chrome/`.
Start Guide:
- [What is userChrome.css? What can it do?](https://www.userchrome.org/what-is-userchrome-css.html)
- [How to Create a userChrome.css File](https://www.userchrome.org/how-create-userchrome-css.html)
- [Where to Find Style Recipes](https://www.userchrome.org/find-user-style-recipes.html)
CSS, SASS Documents:
- [MDN: CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
- [MDN: Introducing the CSS Cascade](https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade)
- [SASS(SCSS)](https://sass-lang.com/documentation)
- [SASS Live Compile](https://www.sassmeister.com/)
Live Debugging:
- [Tutorial: How to create and live-debug userChrome.css](https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/)
- [Browser Toolbox](https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox)
- [Style Editor](https://developer.mozilla.org/en-US/docs/Tools/Style_Editor)
Advanced CSS keywords:
- [UDN: Chrome-only CSS reference](https://udn.realityripple.com/docs/Mozilla/Gecko/Chrome/CSS)
- [UDN: Mozilla CSS extensions](https://udn.realityripple.com/docs/Web/CSS/Mozilla_Extensions)
### Restrictions
- [Doc: Restrictions.md](./Restrictions.md).

View File

@ -0,0 +1,216 @@
# Restrictions
<!-- markdown-toc start - Don't edit this section. Run M-x markdown-toc-refresh-toc -->
**Table of Contents**
- [Compatibility](#compatibility)
* [Cross Platform](#cross-platform)
* [Firefox Version](#firefox-version)
* [Side Effect](#side-effect)
- [Internals](#internals)
* [CSS Loading Order](#css-loading-order)
* [DOM structure cannot be modified](#dom-structure-cannot-be-modified)
* [Shadow DOM](#shadow-dom)
* [XUL](#xul)
* [Supports](#supports)
* [Namespace](#namespace)
* [Import](#import)
<!-- markdown-toc end -->
## Compatibility
### Cross Platform
Different compatibility issues occur in Win7, Win8, Win10, KDE, Gnome, Mac, etc.
For example, The appearance of the context menu varies from platform to platform.
![context menu](https://user-images.githubusercontent.com/25581533/124066951-0eb21c00-da29-11eb-9ac4-c6b82a268c6f.png)
Consider compatibility as much as possible, but use [dedicated media queries](https://github.com/mozilla/gecko-dev/blob/d6188c9ce02efeea309e7177fc14c9eb2f09db37/servo/components/style/gecko/media_features.rs#L906-L930) in special cases.
Even the implementation is also different like [Context menu's image](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L4558-L4595).
If you need to implement it in a variety of forms, make a sort of API using [`css var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var).
Problems that are not [`appearance: auto`](https://developer.mozilla.org/en-US/docs/Web/CSS/appearance#values) may require emulation like [Win7, 8's menu active color](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L146-L223).
Complex UI emulation is quite tricky. [[Linux's Proton UI Library Chrome](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L2113-L2504), [Linux's Proton UI Library Content](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userContent.css#L1458)]
[Bookmark menu](https://github.com/black7375/Firefox-UI-Fix/issues/136) is also similar example([code](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L4745-L4840)).
### Firefox Version
There may be changes that change by version of Firefox.
It's [more frequent than your thought](https://github.com/black7375/Firefox-UI-Fix/issues?q=is%3Aissue+label%3Aupstream+), and we need to respond to compatibility between [Nightly](https://www.mozilla.org/en-US/firefox/nightly/notes/) and [ESR](https://www.mozilla.org/en-US/firefox/organizations/notes/) versions.
This project is using SCSS to make a [reusable compatible mixins](../src/utils).
```scss
@include OS($linux) {
// Your CSS
}
@include Dark {
// Your CSS
}
```
### Side Effect
Only CSS modifications can cause bugs that are hard to think of in the general web, such as the [context menu not appearing](https://github.com/black7375/Firefox-UI-Fix/issues/114).
Especially be careful when customizing XUL elements.
The following code will cause extension panels fail to open and trying to open them might even crash Firefox. ([@MrOtherGuy](https://www.reddit.com/r/FirefoxCSS/comments/u1mdld/comment/i4eg29n/?utm_source=share&utm_medium=web2x&context=3) reports)
```css
#nav-bar {
display: flex;
}
```
Info: `#nav-bar` is [`toolbar`](https://udn.realityripple.com/docs/Archive/Mozilla/XUL/toolbar).
Another `display: flex`'s side effect examples. [#368](https://github.com/black7375/Firefox-UI-Fix/issues/368) [#372](https://github.com/black7375/Firefox-UI-Fix/issues/372)
## Internals
### CSS Loading Order
User CSS(`userChrome.css`, `userContent.css`) is usually loaded first.
In many cases, overriding should be prevented with [`important!`](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#the_!important_exception)(Anti-pattern in general web), and side effects should also be considered. [#11](https://github.com/black7375/Firefox-UI-Fix/issues/11)
### DOM structure cannot be modified
It is possible with [JS(Autoconfig)](./Preference.md#auto-config), but there are security and configuration issues, so we should make the most of CSS.
[`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`::after`](https://developer.mozilla.org/en-US/docs/Web/CSS/::after) can indirectly add CSS elements.
Many implementations using `::before`, `::after`.
- [Bottom Rounded Corner](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L3319-L3393)
- [Dynamic Tab Separator](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L3394-L3457)
- [Static Tab Separator](https://github.com/black7375/Firefox-UI-Fix/blob/0f78a73b856e1335954ecded93d377b85134bd61/userChrome.css#L3387-L3428)
- [Picture In Picture Indicator](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L3716-L3753)
- [Contaner Indicator](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L3754-L3852)
For icons, [`list-style-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image) and [`background-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) are available.
It is recommended to use `list-style-image` when a layout is provided for the image.
`background-image` may require many calculations to fit the layout.
- [Replace Library Icon](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L3923-L3965)
- [Panel Icon](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L4136-L4214)
- [Menu Item Icon](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L4551-L4744)
- [Error Illustration](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userContent.css#L275-L380)
You can use [`-moz-box-ordinal-group`](https://udn.realityripple.com/docs/Web/CSS/box-ordinal-group)([`-moz-box`](https://udn.realityripple.com/docs/Web/CSS/Mozilla_Extensions#display)) and [`order`](https://developer.mozilla.org/en-US/docs/Web/CSS/order)(at [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)) to change the order of the layout.
In experience, the detailed actions of `-moz-box` and `flex` are different, so tests are required.
- [Separator Order](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L4286-L4288)
- [Sync Menu Item's Image Order](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L4234-L4238)
- [Tabs On Bottom](https://github.com/black7375/Firefox-UI-Fix/blob/c453ef43a699759f55800a5d266a89ac11321b2b/src/tabbar/_tabs_on_bottom.scss#L4-L32)
Finally, it's time to respond to various states.
By default, [attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) is used, and sometimes [hard coding](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L873-L893) according to [selector specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) may be required.
If there is no state attributes, you can bypass by using [both transitions and keyframes](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L2704-L2730) for animation.
### Shadow DOM
Firefox actively uses [shadow dom](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) internally.
To modify, it is often a roundabout approach or impossible to inherit.
Onething bypass method is to declare [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var) to shadow root.
- [Scrollbutton Padding](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userChrome.css#L2906-L2924)
- [Audio, Video Player UI](https://github.com/black7375/Firefox-UI-Fix/blob/36e9c94844fee2417662251cbd50c2b874d5b576/userContent.css#L5-L47)
- [Video Player Twoline UI](https://github.com/black7375/Firefox-UI-Fix/blob/cbf14cd55a9edada7ab2f5f1b626608fb9fe38a2/src/contents/_video_player.scss#L68-L171): It is pretty difficult when the condition becomes complicated.
Another limitation of shadow dom in user style is that you cannot use shadow dom related selectors like [`:host`](https://developer.mozilla.org/en-US/docs/Web/CSS/:host_function) and [`::part`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).
- [Using ::part() selector in userchrome.css?](https://www.reddit.com/r/FirefoxCSS/comments/d2sukj/using_part_selector_in_userchromecss/)
- [Can't change some shadow-dom properties](https://www.reddit.com/r/FirefoxCSS/comments/rebn3s/cant_change_some_shadowdom_properties/)
- [Bug 1575507 - Shadow parts should work in user-origin stylesheets.](https://bugzilla.mozilla.org/show_bug.cgi?id=1575507)
### XUL
Sometimes firefox can use [XUL](https://en.wikipedia.org/wiki/XUL) that have been written and binded with C++ for performance like a treeview of bookmarks.
XUL's [box model](https://udn.realityripple.com/docs/Archive/Mozilla/XUL/Tutorial/The_Box_Model) and [DOM](https://udn.realityripple.com/docs/Archive/Mozilla/XUL/Tutorial/Document_Object_Model) are different from HTML.
There ar few appropriate documents, so we have to read the source code and work. (Ex. [1](https://github.com/mozilla/gecko-dev/blob/master/layout/style/nsCSSAnonBoxList.h), [2](https://github.com/mozilla/gecko-dev/blob/master/layout/xul/tree/nsITreeView.idl))
Available CSS features are also restricted.
Example of legacy documents that will help.
- [UDN: ::-moz-tree-cell](https://udn.realityripple.com/docs/Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell)
- [UDN: ::-moz-tree-cell-text](https://udn.realityripple.com/docs/Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text)
Another case.
Like [`<toolbar align="end"></toolbar>`](https://udn.realityripple.com/docs/Archive/Mozilla/XUL/Attribute/align), [`attributes`](https://udn.realityripple.com/docs/Archive/Mozilla/XUL/Attribute) is set and CSS of same property may not be appplied. (Ex. [`box-align: start`](https://udn.realityripple.com/docs/Web/CSS/box-align))
### Supports
[`@supports`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) change in CSS is not detected in real time. (Caching after checking only once)
So a restart is required, and if the mozilla need real time changes, are using `@media` to handle it.
If project only use pure CSS, we cannot add `@media rules`.
- [Bug 1267890 - Support detecting bool preferences in chrome stylesheets](https://bugzilla.mozilla.org/show_bug.cgi?id=1267890)
- [Bug 1698132 - Improve caching behaviour of -moz-bool-pref](https://bugzilla.mozilla.org/show_bug.cgi?id=1698132)
This restriction is also related to the [Doc: Preference.md](./Preference.md#using-with-user-custom-css).
### Namespace
In older codes, the following [namespace](https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace) is commonly seen:
```css
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
```
However, it is [only applicable to XUL](https://www.userchrome.org/adding-style-recipes-userchrome-css.html#namespaces), so it is recommended to use with `prefix`.
```css
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
/* Use */
xul|search-textbox {
border: 2px solid red !important;
}
html|input {
border: 2px solid green !important;
}
```
If you want to limit the coverage to some pages, you can use [`@-moz-document`](https://developer.mozilla.org/en-US/docs/Web/CSS/@document):
```css
/* Main browser UI */
@-moz-document url("chrome://browser/content/browser.xhtml") {
/* Your CSS */
}
/* Library UI */
@-moz-document url("chrome://browser/content/places/places.xhtml") {
/* Your CSS */
}
/* PageInfo UI */
@-moz-document url("chrome://browser/content/pageinfo/pageInfo.xhtml") {
/* Your CSS */
}
```
### Import
There are a few caveats when you [`@import`](https://developer.mozilla.org/en-US/docs/Web/CSS/@import) the CSS.
It's because of specification definition, not Firefox design, but to prevent some mistakes.
`@import` rule is not a [nested statement](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax#nested_statements). Therefore, it cannot be used inside [conditional group at-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule#conditional_group_rules).
```css
/* Precede */
@import url("YourFile.css"); /* Works */
/* Nested */
@supports -moz-bool-pref("userChrome.test.pref") {
@import url("AnotherFile.css"); /* Not Works */
}
```
Any [`@namespace`](https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace) rules must follow all `@charset` and @import rules, and precede all other at-rules and style declarations in a style sheet.
```css
/* Before - Namespace */
@import url("YourFile.css"); /* Works */
/* Declare - Namespace */
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
/* After - Namespace */
@import url("YourFile.css"); /* Not Works */
```

View File

@ -0,0 +1,86 @@
# Rules
<!-- markdown-toc start - Don't edit this section. Run M-x markdown-toc-refresh-toc -->
**Table of Contents**
- [Basics](#basics)
* [Issue](#issue)
* [Version](#version)
* [Branch](#branch)
- [Edit](#edit)
* [Modify only source file](#modify-only-source-file)
* [Coding style](#coding-style)
- [Commits](#commits)
* [Commit](#commit)
* [Commit Message](#commit-message)
* [Pull request](#pull-request)
<!-- markdown-toc end -->
## Basics
This is a rough guideline. (Not forced)
Feel free to make PR.
### Issue
**Search:**
- Search the projects [issues](https://github.com/black7375/Firefox-UI-Fix/issues) to make sure it's not a known issue.
**Versions:**
- Make sure youre on the latest version.
- Try older versions.
- Try switching up dependency versions.
### Version
Milestone, The versioning scheme we use is [SemVer](https://semver.org/). (Maintainer decides, do not pull request.)
We will release the feature as soon as it is complete, but the cycle should be 2-4 weeks.
Rapid releases.
It comes from [#109](https://github.com/black7375/Firefox-UI-Fix/issues/109#issuecomment-873313945).
### Branch
Stable: Only bugfix, Documentation.
- `master`: Common bugfix, documentation.
- `photon-style`: Bugfix, documentation specified in `photon-style`.
- `proton-sryle`: Bugfix, documentation specified in `proton-style`.
Development: New Features.
- `dev`: Common new features.
- `photon-style-dev`: New features specified in `photon-style`.
- `proton-style-dev`: New features specified in `proton-style`.
## Edit
### Modify only source file
Do not modify files that are built directly or automatically generated.
### Coding style
- **Indent:** 2 spaces for indentation rather than tabs.
- **Columns:** Fit `80`~`100` columns as much as possible. (Auto formatting is using 120 to avoid the worst case)
## Commits
### Commit
- **Meaningfully:**: It doesn't make meaningless commits.
- **One per task:** It's difficult to distinguish when various tasks are mixed.
- **Often:** Codes may corrupt during large changes.
### Commit Message
For intuitive recognition, I [put a **prefix**](https://github.com/black7375/Firefox-UI-Fix/commits/master).
- `Add:` Add feature or enhanced.
- `Bump:` Update dependency packages.
- `Fix:` Bug fix or change default values.
- `Clean:` Refactoring.
- `Doc:` Update docs.
### Pull request
- **Branch:** Check the [Branch](#branch) section and PR to the correct branch.
- **Issue:** We recommend that you open the issue first to discuss the changes with the owner of this repository.
- **Build:** Please check if it was built before PR.

View File

@ -0,0 +1,150 @@
# Smart Bookmarks(Query Bookmarks)
<!-- markdown-toc start - Don't edit this section. Run M-x markdown-toc-refresh-toc -->
**Table of Contents**
- [Basics](#basics)
- [Places query URIs](#places-query-uris)
- [Query parameters](#query-parameters)
- [Query operators](#query-operators)
<!-- markdown-toc end -->
## Basics
**Related Docs**
- [Support Mozilla: Restore the default Smart Bookmarks Folders](https://support.mozilla.org/en-US/kb/restore-default-smart-bookmarks-folders) (Not works)
- [Smart Bookmarks. A quick guide.](https://www.reddit.com/r/firefox/comments/2i4qcy/smart_bookmarks_a_quick_guide/)
- [Smart Bookmarks. A quick guide. (extended)](https://www.reddit.com/r/firefox/comments/fvcw96/query_bookmarks_smart_bookmarks_a_quick_guide/)
- [How to Create Custom Smart Bookmarks Folders in Firefox](https://www.howtogeek.com/111820/how-to-create-custom-smart-bookmarks-folders-in-firefox/)
- [MDN: Places query URIs(Archived)](https://web.archive.org/web/20210531033430/https://developer.mozilla.org/en-US/docs/Mozilla/Tech/Places/Places_query_URIs)
- [UDN: Querying Places](https://udn.realityripple.com/docs/Mozilla/Tech/Places/Querying)
- [mozillaZine: Places query syntax](https://forums.mozillazine.org/viewtopic.php?p=3260477)
**Explanation**
Firefox 3 switched to "places" sqlite database as a main bookmarks and history container. (Previously used [MDN: Mork file format(Achieved)](https://web.archive.org/web/20120509214427/https://developer.mozilla.org/en/Mork_Structure))
You can get a glimpse of SQL query power by using serialized `places:` query strings.
Simple strings that can be added to your bookmarks that will perform queries over database.
**Current State**
`browser.places.smartBookmarksVersion` does not work.
There is [no search in the source code](https://searchfox.org/mozilla-central/search?q=browser.places.smartBookmarksVersion&path=&case=false&regexp=false), and you can see that [the code in ESR 60](https://searchfox.org/mozilla-esr60/search?q=browser.places.smartBookmarksVersion&path=&case=false&regexp=false) has been removed.
Place query URIS related information was also removed from MDN, but fortunately it is still operable.
## Places query URIs
This article describes the parameters you can use when constructing `place` URIs. These URIs perform [Places](https://udn.realityripple.com/docs/Mozilla/Tech/Places) queries.
You can use a `place` URI as a bookmark. For example, if you right-click on the toolbar and choose "New Bookmark," you can enter a `place` URI there to create a new query on your toolbar that, when clicked, will reveal a popup containing the results of the query.
The following `place` URI is used to implement the "Most Visited" smart bookmark in the default set of smart bookmarks created when you first start using Firefox 3:
```
place:queryType=0&sort=8&maxResults=10
```
The parameters used in this query are:
- `queryType=0`: This indicates that the query should look only at the user's history and not at bookmarks.
- `sort=8`: The `sort` parameter indicates that the query results should be listed in reverse numeric order, based on visit count. In other words, the most visited result will be first, and the least visited result last.
- `maxResults=10`: This parameter specifies that a maximum of 10 results should be returned by the query.
If you wanted to change this query to only consider visits that took place today, you could change it to:
```
place:queryType=0&sort=8&maxResults=10&beginTimeRef=1&beginTime=0
```
The new parameters added here are:
- `beginTimeRef=1`: Indicates that the `beginTime` parameter that follows is specified as relative to midnight this morning.
- `beginTime`: Specifies the amount of time, in microseconds, from midnight at which to begin looking for visits. By specifying zero for this value, we indicate that we wish to consider all visits that occurred today.
## Query parameters
Here's a list of the parameters available that you can look for.
| **Parameter** | **Type** | **Description** |
|------------------|-----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `beginTime` | `unsigned long` | The time, in microseconds of the earliest result to return. |
| `beginTimeRef` | `unsigned long` | Indicates the type of reference specified in `beginTime`: |
| | | `0`: The time is relative to January 1, 1970 GMT. This is the default. |
| | | `1`: The time is relative to this morning at midnight. This is useful for queries relative to "today." |
| | | `2`: The time is relative to right now. |
| `endTime` | `unsigned long` | The time, in microseconds, of the latest result to return. |
| `endTimeRef` | `unsigned long` | Indicates the type of reference specified in `endTime`. The values are the same as for beginTime. |
| `terms` | `string` | The term to query. |
| `minVisits` | `long` | Filters results based on the minimum number of visits. Specify -1 (the default) to return all results, or any other number to only include results with a visit count higher than the given value. |
| `maxVisits` | `long` | Filters results based on the maximum number of visits. Only items that have been visited fewer than this number of times are included in the results. Specify -1 (which is the default) to not filter based on a maximum number of visits. |
| `onlyBookmarked` | `boolean` | If `true`, only bookmarked items are included in the results. |
| `domainIsHost` | `boolean` | If `true`, `domain` must be an exact match. Otherwise, anything that ends in `domain` is considered a match. |
| `domain` | `string` | Query for items matching this host or domain name. See `domainIsHost` for more information. |
| `folder` | `string` | The folder to query. This may be one of the following: |
| | | `PLACES_ROOT`: The Places root folder. |
| | | `BOOKMARKS_MENU`: The Bookmarks menu. |
| | | `TOOLBAR`: The bookmarks toolbar. |
| | | `TAGS`: Tags |
| | | `UNFILED_BOOKMARKS`: Unfiled bookmarks |
| `!annotation` | `boolean` | Indicates whether to include or reject items matching the annotation specified by `annotation`. If `true`, items that don't have the specified annotation are rejected. |
| `annotation` | `string` | The annotation to match when querying. |
| `uri` | `string` | The URI to match. |
| `uriIsPrefix` | `boolean` | If `false`, the uri must be an exact match; this is the default. If `true`, any entry that begins with the specified URI is considered a match. |
| `tag` | `string` | - |
| `!tas` | - | - |
## Query operators
The following attributes allow you to control the results more precisely.
| **Operator** | **Type** | **Description** |
|----------------------------------------------------------------|------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `OR` | | This is the OR logical operator. |
| `applyOptionsToContainers` | | |
| `excludeItemIfParentHasAnnotation` - Obsolete since Gecko 13.0 | `string` | Items whose parent has this value as an annotation are excluded from the query results. This parameter is ignored for queries over history. For example, you can exclude livemark entries by specifying "livemark/feedURI" here. |
| `excludeItems` | `boolean` | If `true`, all URIs and separators are excluded from the bookmark query results, so that only folders and queries are returned. If `false`, all items are returned; this is the default. |
| `excludeQueries` | `boolean` | If `true`, queries are excluded from the results; however, simple folder queries like bookmark folder symlinks will still be included. `false`, the default, indicates that queries should be included in the results. |
| `excludeReadOnlyFolders` | `boolean` | If `true`, read-only folders are excluded from the results. This only affects cases in which the actual folder result node would appear in its parent folder. The default is `false`. |
| `expandQueries` | `boolean` | If `true`, `place` URIs appear as containers in the results, with the contents filled in from the stored query. This doesn't do anything if `excludeQueries` is `true`. The default is `false`, which causes `place` URIs to appear as normal items. |
| `group` | | |
| `includeHidden` | `boolean` | If `true`, items that would normally be hidden in a history query (such as the content of iframes as well as images) are included in the results. This is `false` by default. |
| `maxResults` | `unsigned long` | The maximum number of results to return. This doesn't work when sorting by title. The result is `0`, which means that all results are returned. |
| `originalTitle` | `string` | Retrieves the original page title. |
| `queryType` | `unsigned short` | The type of search to use when querying the database. This attribute is only honored by query nodes. It's ignored for simple folder queries. |
| | | `0`: History |
| | | `1`: Bookmarks |
| | | `2`: Both history and bookmarks (**Not yet implemented** -- see [bug 378798](https://bugzilla.mozilla.org/show_bug.cgi?id=378798)) |
| `resolveNullBookmarkTitles` | `boolean` | If `true`, bookmarks with null titles get their page titles fetched from history if possible. This doesn't apply to bookmarks with empty titles. The default is `false`. |
| `showSessions` | `boolean` | If `true`, session information is used to group history items. This only makes a difference when sorting by date. The default is `false`. |
| `sort` | `unsigned short` | The sort order to use for the results. |
| | | `0`: Natural bookmark order |
| | | `1`: Sort by title, A-Z |
| | | `2`: Sort by title, Z-A |
| | | `3`: Sort by visit date, most recent last |
| | | `4`: Sort by visit date, most recent first |
| | | `5`: Sort by uri, A-Z |
| | | `6`: Sort by uri, Z-A |
| | | `7`: Sort by visit count, ascending |
| | | `8`: Sort by visit count, descending |
| | | `9`: Sort by keyword, A-Z |
| | | `10`: Sort by keyword, Z-A |
| | | `11`: Sort by date added, most recent last |
| | | `12`: Sort by date added, most recent first |
| | | `13`: Sort by last modified date, most recent last |
| | | `14`: Sort by last modified date, most recent first |
| | | `17`: Sort by tags, ascending |
| | | `18`: Sort by tags, descending |
| | | `19`: Sort by annotation, ascending |
| | | `20`: Sort by annotation, descending |
| `sortingAnnotation` | `string` | The annotation to use when sorting by annotation. |
| `type` | `unsigned short` | The type of results to return. |
| | | `0`: Results as URI ("URI" results, one for each URI visited in the range). |
| | | `1`: Results as visit ("visit" results, with one for each time a page was visited this will often give you multiple results for one URI). |
| | | `2`: Results as full visits (like "visit", but returns all attributes for each result) |
| | | `3`: Results as date query (returns results for given date range) |
| | | `4`: Results as site query (returns last visit for each url in the given host) |
| | | `5`: Results as date+site query (returns list of hosts visited in the given period) |
| | | `6`: Results as tag query (returns list of bookmarks with the given tag) |
| | | `7`: Results as tag container (returns bookmarks with given tag; for same uri uses last modified. `folder=tag_folder_id` must be present in the query |

View File

@ -49,13 +49,13 @@ https://github.com/black7375/Firefox-UI-Fix#readme
param(
[Alias("u")]
[Switch]$updateMode,
[switch]$updateMode,
[Alias("f")]
[string]$profileDir,
[Alias("p")]
[string]$profileName,
[Alias("h")]
[Switch]$help = $false
[switch]$help = $false
)
#** Helper Utils ***************************************************************
@ -92,25 +92,33 @@ function Verify-PowerShellVersion {
#== Required Tools =============================================================
function Install-Choco() {
# https://chocolatey.org/install
# https://docs.chocolatey.org/en-us/choco/setup#non-administrative-install
$InstallDir='C:\ProgramData\chocoportable'
$env:ChocolateyInstall="$InstallDir"
Set-ExecutionPolicy Bypass -Scope Process -Force
[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072
iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
$env:Path += ";C:\ProgramData\chocolatey"
$env:Path += ";C:\ProgramData\chocoportable" # Adimin: ";C:\ProgramData\chocolatey"
refreshenv
}
function Check-Git() {
if( -Not (Get-Command git) ) {
if ( -Not (Get-Command choco)) {
if ( -Not (Get-Command git -errorAction SilentlyContinue) ) {
if ( -Not (Get-Command choco -errorAction SilentlyContinue) ) {
Install-Choco
}
choco install git -y
$env:Path += ";C:\Program Files\Git\bin"
choco install git.commandline -y
$env:Path += ";C:\tools\git\bin" # Adimin: ";C:\Program Files\Git\bin"
refreshenv
}
Lepton-OKMessage "Required - git"
}
#== PATH / File ================================================================
$PSDefaultParameterValues['Out-File:Encoding'] = 'utf8'
$currentDir = (Get-Location).path
function Filter-Path() {
@ -634,6 +642,147 @@ function Check-InstallTypes() {
}
}
#== Custom Install =============================================================
$customFiles = @(
"user-overrides.js",
"userChrome-overrides.css",
"userContent-overrides.css"
)
$localCustomFiles = $customFiles.Clone()
$customFileExist = $false
function Check-CustomFiles() {
$global:localCustomFiles = Filter-Path $localCustomFiles
if ( $global:localCustomFiles.Length -gt 0 ) {
$global:customFileExist = $true
Lepton-OKMessage "Check custom file detected"
foreach ( $customFile in $global:localCustomFiles ) {
Write-Host "- ${customFile}"
}
}
}
function Copy-CustomFiles() {
if ( "${customFileExist}" -eq $true ) {
# If Release or Network mode, Local is passed (Already copied)
if ( "${leptonInstallType}" -ne "Local" ) {
foreach ( $profilePath in $global:firefoxProfilePaths ) {
foreach ( $customFile in $global:localCustomFiles ) {
if ( "${customFile}" -eq "user-overrides.js" ) {
Copy-Auto "${customFile}" "${profilePath}\${customFile}"
}
else {
Copy-Auto "${customFile}" "${profilePath}\chrome\${customFile}"
}
}
}
}
Lepton-OKMessage "End custom file copy"
}
}
$customMethod = ""
$customReset = $false
$customAppend = $false
function Set-CustomMethod() {
$local:menuAppend="Append - Maintain changes in existing files and apply custom"
$local:menuOverwrite="Overwrite - After initializing the change, apply only custom"
$local:menuNone="None - Maintain changes in existing files"
$local:menuReset="Reset- Reset to pure lepton theme without custom"
Write-Host "Select custom method"
while ( "${customMethod}" -eq "" ) {
$local:applyMethod = Menu @("${menuAppend}", "${menuOverwrite}", "${menuNone}", "${menuReset}")
switch ( $applyMethod ) {
"${menuAppend}" {
$global:customMethod = "Append"
$global:customAppend = $true
}
"${menuOverwrite}" {
$global:customMethod = "Overwrite"
$global:customReset = $true
$global:customAppend = $true
}
"${menuNone}" {
$global:customMethod = "None"
}
"${menuReset}" {
$global:customMethod = "Reset"
$global:customReset = $true
}
default { Write-Host "Invalid option, reselect please." }
}
}
Lepton-OKMessage "Selected ${customMethod}"
}
$customFileApplied = $false
function Apply-CustomFile() {
Param (
[Parameter(Mandatory=$true, Position=0)]
[string] $profilePath,
[Parameter(Mandatory=$true, Position=1)]
[string] $targetPath,
[Parameter(Mandatory=$true, Position=2)]
[string] $customPath,
[Parameter(Position=3)]
[string] $otherCustomPath = ""
)
$local:leptonDir = "${profilePath}\chrome"
$local:gitDir = "${leptonDir}\.git"
if ( Test-Path -Path "${customPath}" -PathType leaf ) {
$global:customFileApplied = $true
if ( "${customMethod}" -eq "" ) {
Set-CustomMethod
}
if ( "${customReset}" -eq $true ) {
if ( "${targetPath}" -like "*user.js" ) {
Copy-Item -Path "${leptonDir}\user.js" -Destination "${targetPath}" -Force
}
else {
git --git-dir "${gitDir}" --work-tree "${leptonDir}" checkout HEAD -- "${targetPath}"
}
}
if ( "${customAppend}" -eq $true ) {
# Apply without duplication
if ( -not (Write-Output "$(Write-Output $(Get-Content -Path "${targetPath}"))" | Select-String -Pattern "$(Write-Output $(Get-Content -Path "${customPath}"))" -SimpleMatch -Quiet) ) {
Get-Content -Path "${customPath}" | Out-File -FilePath "${targetPath}" -Append
}
}
}
elseif ( "${otherCustomPath}" -ne "" ) {
Apply-CustomFile "${profilePath}" "${targetPath}" "${otherCustomPath}"
}
}
function Apply-CustomFiles() {
foreach ( $profilePath in $global:firefoxProfilePaths ) {
foreach ( $customFile in $global:customFiles ) {
$local:targetFile = $customFile.Replace("-overrides", "")
if ( "${customFile}" -eq "user-overrides.js" ) {
$local:targetPath = "${profilePath}\${targetFile}"
$local:customPath = "${profilePath}\user-overrides.js"
$local:otherCustomPath = "${profilePath}\chrome\user-overrides.js"
Apply-CustomFile "${profilePath}" "${targetPath}" "${customPath}" "${otherCustomPath}"
}
else {
Apply-CustomFile "${profilePath}" "${profilePath}\chrome\${targetFile}" "${profilePath}\chrome\${customFile}"
}
}
}
if ( "${customFileApplied}" -eq $true ) {
Lepton-OKMessage "End custom file applied"
}
}
#== Install Helpers ============================================================
$chromeDuplicate = $false
function Check-ChromeExist() {
@ -692,10 +841,16 @@ function Copy-Lepton() {
#== Each Install ===============================================================
function Install-Local() {
Copy-Lepton "${currentDir}" "user.js"
Copy-CustomFiles
Apply-CustomFiles
}
function Install-Release() {
Copy-Lepton "chrome" "user.js"
Copy-CustomFiles
Apply-CustomFiles
}
function Install-Network() {
@ -704,9 +859,12 @@ function Install-Network() {
Clone-Lepton
Copy-Lepton
Copy-CustomFiles
Clean-Lepton
Check-ChromeRestore
Apply-CustomFiles
}
function Install-Profile() {
@ -722,6 +880,35 @@ function Install-Profile() {
}
#** Update *********************************************************************
function Stash-File() {
Param (
[Parameter(Mandatory=$true, Position=0)]
[string] $leptonDir,
[Parameter(Mandatory=$true, Position=1)]
[string] $gitDir
)
if ( "$(git --git-dir "${gitDir}" --work-tree "${leptonDir}" diff --stat)" -ne '' ) {
git --git-dir "${gitDir}" --work-tree "${leptonDir}" stash --quiet
return $true
}
return $false
}
function Restore-File() {
Param (
[Parameter(Mandatory=$true, Position=0)]
[string] $leptonDir,
[Parameter(Mandatory=$true, Position=1)]
[string] $gitDir,
[Parameter(Position=2)]
[string] $gitDirty = "$false"
)
if ( "${gitDirty}" -eq $true ) {
git --git-dir "${gitDir}" --work-tree "${leptonDir}" stash pop --quiet
}
}
function Update-Profile() {
Check-Git
foreach ( $profileDir in $global:firefoxProfileDirPaths ) {
@ -734,10 +921,15 @@ function Update-Profile() {
$local:Branch = $LEPTONINFO["${section}"]["Branch"]
$local:Path = $LEPTONINFO["${section}"]["Path"]
$local:LEPTONGITPATH="${Path}\chrome\.git"
if ( "${Type}" -eq "Git" ){
git --git-dir "${LEPTONGITPATH}" checkout "${Branch}"
git --git-dir "${LEPTONGITPATH}" pull --no-edit
$local:leptonDir = "${Path}\chrome"
$local:gitDir = "${leptonDir}\.git"
if ( "${Type}" -eq "Git" ) {
$local:gitDirty = $(Stash-File "${leptonDir}" "${gitDir}")
git --git-dir "${gitDir}" --work-tree "${leptonDir}" checkout "${Branch}"
git --git-dir "${gitDir}" --work-tree "${leptonDir}" pull --no-edit
Restore-File "${leptonDir}" "${gitDir}" "$gitDirty"
}
elseif ( "${Type}" -eq "Local" -or "${Type}" -eq "Release" ) {
Check-ChromeExist
@ -749,12 +941,15 @@ function Update-Profile() {
if ( "${Branch}" -eq $null ) {
$Branch = "${leptonBranch}"
}
git --git-dir "${LEPTONGITPATH}" checkout "${Branch}"
git --git-dir "${gitDir}" --work-tree "${leptonDir}" checkout "${Branch}"
if ( "${Type}" -eq "Release" ) {
$local:Ver=$(git --git-dir "${LEPTONINFOFILE}" describe --tags --abbrev=0)
git --git-dir "${LEPTONGITPATH}" checkout "tags/${Ver}"
$local:Ver=$(git --git-dir "${gitDir}" describe --tags --abbrev=0)
git --git-dir "${gitDir}" --work-tree "${leptonDir}" checkout "tags/${Ver}"
}
Clean-Lepton
Check-ChromeRestore
}
else {
Lepton-ErrorMessage "Unable to find update type, ${Type} at ${section}"
@ -762,8 +957,8 @@ function Update-Profile() {
}
}
}
Clean-Lepton
Check-ChromeRestore
Apply-CustomFiles
}
#** Main ***********************************************************************
@ -784,6 +979,8 @@ function Install-Lepton {
Update-ProfilePaths
Write-LeptonInfo
Check-CustomFiles
if ( $updateMode ) {
Update-Profile
}

View File

@ -0,0 +1,30 @@
{
"name": "Lepton",
"version": "5.0.0",
"description": "I respect proton UI and aim to improve it. ",
"author": "alstjr7375 <alstjr7375@daum.net>",
"license": "MPL 2.0",
"private": true,
"repository": {
"type": "git",
"url": "git+https://github.com/black7375/Firefox-UI-Fix.git"
},
"bugs": {
"url": "https://github.com/black7375/Firefox-UI-Fix/issues"
},
"homepage": "https://github.com/black7375/Firefox-UI-Fix#readme",
"scripts": {
"build": "sass --no-source-map src/leptonChrome.scss css/leptonChrome.css && sass --no-source-map src/leptonContent.scss css/leptonContent.css && prettier --write css/leptonChrome.css css/leptonContent.css",
"format": "prettier --write .",
"test": "jest",
"validate": "csstree-validator css/leptonChrome.css; csstree-validator css/leptonContent.css"
},
"devDependencies": {
"csstree-validator": "^3.0.0",
"fast-glob": "^3.2.11",
"jest": "^27.5.1",
"prettier": "^2.6.1",
"sass": "^1.49.0",
"sass-true": "^6.1.0"
}
}

View File

@ -0,0 +1,12 @@
/*= Theme - Compatibility ====================================================*/
@include Option("userChrome.compatibility.theme") {
@import "theme";
}
/*= OS - Compatibility =======================================================*/
@include Option("userChrome.compatibility.os") {
@import "os";
}
/*= Others - Compatibility ===================================================*/
@import "others";

View File

@ -0,0 +1,169 @@
/*= Windows 10 - Top border of accent color at ESR #358 ======================*/
@include OS($win10) {
:root[sizemode=normal][tabsintitlebar] {
#navigator-toolbox {
border-top: .5px solid rgb(47, 47, 47) !important;
}
&:-moz-window-inactive #navigator-toolbox {
border-top-color: rgb(57, 57, 57) !important;
}
@media (-moz-windows-accent-color-in-titlebar) {
#navigator-toolbox {
border-top-color: -moz-accent-color !important;
}
}
}
}
/*= Windows 7, 8 - Tab Bar Background *****************************************/
@include OS($win7, $win8) {
/* Header Color */
:root:not([lwtheme-image]):-moz-lwtheme {
background-color: var(--lwt-accent-color) !important;
}
}
@mixin _os_winTabBarTextColor {
/* background textcolor */
color: var(--lwt-text-color) !important;
}
@include OS($win7) {
#TabsToolbar {
&:-moz-lwtheme {
@include _os_winTabBarTextColor;
}
/* Remove Aero */
/* Original: radial-gradient(eclipse at bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 80%, transparent) */
background-image: unset !important;
}
}
@include OS($win8) {
#navigator-toolbox:-moz-lwtheme {
@include _os_winTabBarTextColor;
}
}
/*= Windows 7, 8 - Menu Active Color =========================================*/
@include OS($win7, $win8) {
menupopup > menu,
menupopup > menuitem,
#context-navigation > menuitem {
border: 1px solid transparent; /* Need reduce 2px at menu */
}
#main-menubar > menu[open="true"],
#main-menubar > menu[_moz-menuactive="true"] {
background-color: -moz-menuhover !important; /* Make to original */
}
:root:-moz-lwtheme #main-menubar > menu[open="true"],
:root:-moz-lwtheme #main-menubar > menu[_moz-menuactive="true"] {
color: inherit !important; /* Original: -moz-menubarhovertext */
background-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* Original: -moz-menuhover */
}
menulist > menupopup > menuitem[_moz-menuactive="true"],
menulist > menupopup > menu[_moz-menuactive="true"] {
background-color: highlight !important;
color: highlighttext !important;
}
#PlacesToolbar menu,
#PlacesToolbar menuitem,
#BMB_bookmarksPopup menu,
#BMB_bookmarksPopup menuitem {
border: none !important; /* Remove border */
&:not([disabled], :active)[_moz-menuactive="true"] {
background-color: var(--button-hover-bgcolor) !important;
}
}
}
@mixin _os_menuEmulate($bgRate, $bdRate) {
menu[_moz-menuactive="true"],
menuitem[_moz-menuactive="true"] {
background-color: color-mix(in srgb, -moz-menuhover $bgRate, transparent) !important;
border-color: color-mix(in srgb, -moz-menuhover $bdRate, transparent) !important;
}
menu[_moz-menuactive="true"][disabled="disabled"],
menuitem[_moz-menuactive="true"][disabled="true"] {
background-color: color-mix(in srgb, currentColor $bgRate, transparent) !important;
border-color: color-mix(in srgb, currentColor $bdRate, transparent) !important;
}
}
@include OS($win7) {
@include _os_menuEmulate(5%, 60%);
/* Remove text shadow */
:root:-moz-lwtheme #toolbar-menubar {
text-shadow: unset !important;
/* Original: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255, 255, 255, .4) */
}
/* Remove Color */
:root:-moz-lwtheme #main-menubar:not(:-moz-window-inactive) {
background-color: unset !important; /* Original: rgba(255, 255, 255, .5) */
color: unset !important; /* Original: black */
}
}
@include OS($win8) {
@include _os_menuEmulate(17%, 80%);
}
@include OS($linux) {
/*= Linux - Global Menubar Active Color ====================================*/
#main-menubar > menu[open="true"],
#main-menubar > menu[_moz-menuactive="true"] {
color: inherit !important; /* Original: -moz-menubarhovertext */
background-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* Original: -moz-menuhover */
}
/*= Linux - Titlebar button at lwtheme =====================================*/
@include NotOption("userChrome.compatiblity.os.linux_non_native_titlebar_button") {
.titlebar-button:-moz-lwtheme {
appearance: auto !important;
}
.titlebar-min:-moz-lwtheme,
.titlebar-max:-moz-lwtheme,
.titlebar-restore:-moz-lwtheme,
.titlebar-close:-moz-lwtheme {
list-style-image: none !important;
}
.titlebar-button:-moz-lwtheme:hover,
.titlebar-button:-moz-lwtheme:hover:active {
background-color: unset !important;
color: unset !important;
}
}
}
/*= Linux - Light System Default Theme's Selected Tab ========================*/
$_os_linuxDefaultShadow: 0 0 4px rgba(128, 128, 142, 0.5);
@mixin _os_linuxDefaultThemeSelectedTab {
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
> .tab-stack
> .tab-background:not(:-moz-lwtheme) {
@content;
}
}
@include OS($linux) {
@include Light {
/* Because of
#TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background {
border: 1px solid var(--tab-line-color, rgba(128,128,142,0.9));
box-shadow: 0 0 4px rgba(128,128,142,0.5);
}
*/
@include _os_linuxDefaultThemeSelectedTab {
box-shadow: $_os_linuxDefaultShadow !important;
}
#TabsToolbar:not([brighttext]) {
@include _os_linuxDefaultThemeSelectedTab {
box-shadow: 0 0 1px var(--tab-line-color, rgba(128, 128, 142, 0.9)), $_os_linuxDefaultShadow !important;
}
}
}
}

View File

@ -0,0 +1,11 @@
@include Option("userChrome.compatibility.panel_cutoff") {
#appMenu-popup panelview {
width: 24.5em !important; /* can modify panel width, Original: 22.5em */
}
}
@include Option("userChrome.compatibility.navbar_top_border") {
#nav-bar {
box-shadow: none !important;
}
}

View File

@ -0,0 +1,114 @@
/*= Hotfix #98 ===============================================================*/
/* Hidden Tab Panel Padding */
#allTabsMenu-hiddenTabsView .all-tabs-item {
margin-inline: 8px;
border-radius: 4px;
}
/*= Remote Tabs Panel's Bottom Padding =======================================*/
#PanelUI-remotetabs #PanelUI-remotetabs-main {
margin-bottom: 6px;
}
/*= Identity Popup Icon Crop =================================================*/
.identity-popup-security-connection.identity-button {
padding-block: 1px !important;
}
/*= Zoom in button's plus icon horizontal rate ===============================*/
#customization-palette-container,
#customization-panel-container,
#widget-overflow-mainView {
#zoom-in-button > .toolbarbutton-icon {
padding-inline-start: 0px !important;
}
}
/*= Icon Fill Color ==========================================================*/
:root:-moz-lwtheme {
/* Auto create --lwt-toolbarbutton-icon-fill-attention, fix for nightly default theme
Default Color: rgb(0,97,224) -> rgb(0, 120, 215) for more light
*/
--lwt-toolbarbutton-icon-fill-attention: var(--button-primary-bgcolor, rgb(0, 120, 215));
}
/*= First visible tab margin at maximized #332 ===============================*/
:root[tabsintitlebar="true"][sizemode="maximized"] #TabsToolbar {
margin-left: -1px;
}
/*= Disabled menu background color ===========================================*/
menuitem,
menu {
&[disabled="true"] {
background-color: transparent !important;
}
}
/*= Remove Tab Border ========================================================*/
@mixin _theme_removeTabBorder($options...) {
%noneBorder {
/* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */
border: unset !important;
}
@each $prefix, $postfix in $options {
#TabsToolbar#{$prefix}
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
> .tab-stack
> .tab-background#{$postfix} {
@extend %noneBorder;
}
}
}
@include Option("userChrome.tab.connect_to_window") {
/* TARGET: original, photon */
@include _theme_removeTabBorder(
// Light Theme
":not([brighttext])",
// Dark Theme
"[brighttext]" ":-moz-lwtheme"
);
#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon:-moz-lwtheme,
.tab-background[selected]:-moz-lwtheme {
// Nightly 102: outline: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor));
outline-color: transparent !important;
}
.keyboard-focused-tab > .tab-stack > .tab-background,
.tabbrowser-tab:focus:not([aria-activedescendant]) > .tab-stack > .tab-background {
outline: var(--focus-outline) !important;
}
}
/*= Light Weight Theme =======================================================*/
/* Header Image */
:root[lwtheme-image] {
background-image: var(--lwt-header-image) !important; /* Original: var(--lwt-header-image) */
background-repeat: no-repeat !important;
background-position: right top !important;
// For high-resolution screen's image ratio
@media (min-width: 2500px) {
background-size: contain;
@include Option("userChrome.compatibility.covered_header_image") {
background-size: cover;
}
}
// lwtheme compatibility
#navigator-toolbox:-moz-lwtheme {
background-image: var(--lwt-header-image), var(--lwt-additional-images) !important;
background-repeat: var(--lwt-background-tiling) !important;
background-position: var(--lwt-background-alignment) !important;
background-color: unset !important; /* Original: var(--lwt-accent-color) */
}
}
/* Navbar Border */
#navigator-toolbox:-moz-lwtheme {
--tabs-border-color: rgba(0, 0, 0, 0.3); /* Legacy: v96 */
--lwt-tabs-border-color: rgba(0, 0, 0, 0.3);
}

View File

@ -0,0 +1,192 @@
@-moz-document url("about:home"), url("about:newtab") {
/** Activity Stream - Search Focus Border: like URL *************************/
@include Option("userContent.page.field_border") {
/* At DarkMode, Color */
body[style*="--newtab-background-color:rgba(28, 27, 34, 1);"],
body[style*="--newtab-background-color:rgba(42, 42, 46, 1);"],
body[style*="--newtab-background-color: rgba(42, 42, 46, 1);"],
body[style*="--newtab-background-color: rgba(43, 42, 51, 1);"],
body[style*="--newtab-background-color: rgb(43, 42, 51);"] {
/* inner */
--newtab-focus-border: rgba(
0,
221,
255,
0.5
) !important; /* Original: #B5D3FF, Better color-mix(in srgb, #B5D3FF 70%, transparent) */
--newtab-focus-border-selected: var(--newtab-focus-border) !important; /* Original: #B5D3FF */
/* For Nightly */
--newtab-primary-action-background: var(--newtab-focus-border) !important;
@include Option("userContent.page.proton_color") {
@include Option("userContent.page.proton_color.dark_blue_accent") {
--newtab-focus-border: var(--in-content-focus-outline-color) !important;
}
}
}
}
/** Activity Stream - Web Site Icon: full size ******************************/
@include Option("userContent.newTab.full_icon") {
.top-site-outer .tile {
overflow: hidden;
}
.top-site-outer .tile .icon-wrapper {
width: 100% !important; /* Original: 48px */
height: 100% !important; /* Original: 48px */
}
}
/** Activity Stream - Animate ***********************************************/
@include Option("userContent.newTab.animate") {
@include Animate {
:root {
--animation-easing-function: cubic-bezier(0.07, 0.95, 0, 1);
}
/* Background */
.top-site-outer,
#searchSubmit,
button.icon,
button.close-button {
transition: background 1.5s var(--animation-easing-function);
}
.top-site-outer:hover,
#searchSubmit:hover,
button.icon:hover,
button.close-button:hover {
transition: background 0.5s var(--animation-easing-function);
}
/* Search Bar */
.search-inner-wrapper input {
transition: 1s var(--animation-easing-function);
transition-property: border-color, box-shadow;
}
.search-wrapper .search-inner-wrapper:active input,
.search-wrapper input:focus {
transition: border-color 0.5s var(--animation-easing-function), box-shadow 1s var(--animation-easing-function);
}
@include Option("userContent.page.field_border") {
.search-wrapper .search-inner-wrapper:hover input {
border-color: var(--newtab-primary-action-background) !important;
transition: border-color 0.5s var(--animation-easing-function);
}
}
}
}
/** Activity Stream - Pocket order to last **********************************/
@include Option("userContent.newTab.pocket_to_last") {
.body-wrapper.on {
display: flex;
flex-wrap: wrap;
}
.body-wrapper.on > .discovery-stream.ds-layout {
flex-basis: 100%;
}
.body-wrapper.on > .collapsible-section[data-section-id="topstories"],
.home-section > #pocket-section,
.home-section > .divider,
.home-section > div:not(.section) {
order: 2;
}
}
/** Activity Stream - Home Search Bar looks like proton *********************/
@include Option("userContent.newTab.animate") {
/* Dropdown Colors */
#root {
--newtab-search-background-color: rgba(255, 255, 255, 1); /* Same as light theme's --panel-background */
/* Set search dropdown background */
--newtab-search-dropdown-header-color: var(--newtab-search-background-color) !important;
--newtab-search-dropdown-color: var(--newtab-search-background-color) !important;
--newtab-element-hover-color: color-mix(in srgb, currentColor 9%, transparent) !important;
}
@include Dark {
#root {
/* Default Dark Mode */
--newtab-search-background-color: rgba(66, 65, 77, 1); /* Same as dark theme's --panel-background */
}
}
.activity-stream[lwt-sidebar]:not([style*="--newtab-background-color: rgba(43, 42, 51, 1);"]) #root {
/* Light weight theme */
--newtab-search-background-color: var(--lwt-sidebar-background-color);
}
/* Padding */
#searchSuggestionTable {
border-radius: 4px !important;
-moz-window-shadow: cliprounded;
}
.contentSearchSuggestionTable .contentSearchOneOffItem {
width: 32px !important;
height: 32px !important;
/* Margin */
margin-block: 5px !important;
margin-inline-start: 5px !important;
margin-inline-end: 8px !important;
/* Border */
border-radius: 4px !important;
border-image: none !important; /* Original: linear-gradient(transparent 18%, var(--newtab-border-secondary-color) 18%, var(--newtab-border-secondary-color) 82%, transparent 82%) 1; */
border-inline-end: none !important; /* Original: 1px solid; */
}
#contentSearchSettingsButton::before {
content: url("chrome://global/skin/icons/settings.svg") !important;
display: -moz-inline-box;
/* Color */
-moz-context-properties: fill, fill-opacity !important;
fill: currentColor !important;
/* Align */
margin-inline-end: 5px;
vertical-align: -25%;
}
/* Pointer */
.contentSearchSuggestionTable .contentSearchOneOffItem,
#contentSearchSettingsButton {
cursor: pointer;
}
/*- Fix Color For Nightly ------------------------------------------------*/
.contentSearchSuggestionTable,
.contentSearchHeaderRow,
.contentSearchHeader,
.contentSearchSuggestionsContainer {
color: var(--newtab-text-primary-color) !important;
background: var(--newtab-search-background-color) !important;
}
.contentSearchSuggestionTable .contentSearchSuggestionRow.selected,
.contentSearchSuggestionTable .contentSearchSettingsButton:hover {
color: var(--newtab-text-primary-color) !important;
}
.contentSearchSuggestionTable .contentSearchSuggestionRow.selected,
.contentSearchSuggestionTable .contentSearchSettingsButton:hover,
.contentSearchSuggestionTable .contentSearchOneOffItem.selected {
background: var(--newtab-element-hover-color) !important;
}
.contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active,
.contentSearchSuggestionTable .contentSearchOneOffItem:active {
background: var(--newtab-element-active-color) !important;
}
.contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon {
fill: var(--newtab-icon-secondary-color) !important;
}
}
}

View File

@ -0,0 +1,5 @@
@include Dark {
@import "dark_mode/addons_org";
@import "dark_mode/support_org";
@import "dark_mode/accounts_com";
}

View File

@ -0,0 +1,104 @@
@-moz-document url-prefix("about:neterror"),
url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"),
url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml")
{
/* Illustrations Position */
#errorPageContainer,
.description-wrapper {
min-height: 300px;
background-position: left center;
background-repeat: no-repeat;
background-size: 38%;
}
#errorPageContainer {
display: flex;
flex-direction: column;
}
.description-wrapper {
padding-inline-start: 38%;
}
/* Container */
.container {
min-width: var(--in-content-container-min-width); /* 13em */
max-width: var(--in-content-container-max-width); /* 52em */
}
/* Text Position */
#text-container {
margin: auto;
padding-inline-start: 38%;
}
}
@-moz-document url-prefix("about:neterror?e=connectionFailure"),
url-prefix("about:neterror?e=netInterrupt"),
url-prefix("about:neterror?e=netTimeout"),
url-prefix("about:neterror?e=netReset"),
url-prefix("about:neterror?e=netOffline"),
url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml")
{
#errorPageContainer {
background-image: url("../icons/error-connection-failure.svg");
}
}
@-moz-document url-prefix("about:neterror?e=dnsNotFound") {
#errorPageContainer {
background-image: url("../icons/error-server-not-found.svg");
}
}
@-moz-document url-prefix("about:neterror?e=malformedURI") {
#errorPageContainer {
background-image: url("chrome://browser/skin/illustrations/error-malformed-url.svg");
}
}
@-moz-document url-prefix("about:neterror?e=clockSkewError"),
url-prefix("about:neterror?e=nssFailure") {
#errorPageContainer {
background-image: url("../icons/blue-berror.svg");
background-size: 18.5em;
}
}
@-moz-document url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml")
{
.description-wrapper {
background-image: url("../icons/error-session-restore.svg");
}
}
@-moz-document url-prefix("about:neterror?e=fileNotFound") {
@media (min-width: 970px) {
.title {
background-image: url("chrome://global/skin/icons/info.svg") !important;
}
}
#text-container {
padding-inline-start: 0;
}
}
@-moz-document url-prefix("about:tabcrashed") {
@media (min-width: 970px) {
.title {
background-image: url("chrome://browser/skin/tab-crashed.svg") !important;
}
}
}
@-moz-document url("about:robots"), url("chrome://browser/content/aboutRobots.xhtml")
{
@media (min-width: 970px) {
.title {
background-image: url("chrome://browser/content/aboutRobots-icon.png") !important;
}
}
}
@-moz-document url("about:welcomeBack"), url("chrome://browser/content/aboutWelcomeBack.xhtml")
{
@media (min-width: 970px) {
.title {
background-image: url("../icons/welcome-back.svg") !important;
}
}
}

View File

@ -0,0 +1,27 @@
@-moz-document url-prefix("about:"),
url-prefix("https://addons.mozilla.org"),
url-prefix("https://support.mozilla.org"),
url-prefix("https://accounts.firefox.com"),
url-prefix("view-source"),
regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
@import "../theme/proton_color";
@include Option("userContent.page.proton_color.dark_blue_accent") {
@include Dark {
@import "../theme/dark_blue_color";
:host, :root {
@include DarkBlueContent;
}
}
}
@include Option("userContent.page.proton_color.system_accent") {
:host, :root {
--in-content-primary-button-text-color: -moz-accent-color-foreground !important;
--in-content-primary-button-background: Highlight !important;
--in-content-primary-button-background-hover: color-mix(in srgb, black 10%, Highlight) !important;
--in-content-primary-button-background-active: color-mix(in srgb, black 20%, Highlight) !important;
}
}
}

View File

@ -0,0 +1,30 @@
/*= Common contents ==========================================================*/
@import "proton_contents/proton_commons";
/*= Field Border =============================================================*/
@include Option("userContent.page.field_border") {
@include Animate {
@import "proton_contents/field_border";
}
}
/*= View Source ==============================================================*/
@import "proton_contents/view_source";
/*= Directory View ===========================================================*/
@import "proton_contents/directory_view";
/*= about:plugins ============================================================*/
@import "proton_contents/about_plugins";
/*= about:cache ==============================================================*/
@import "proton_contents/about_cache";
/*= about:checkerboard =======================================================*/
@import "proton_contents/about_checkerboard";
/*= about:memory =============================================================*/
@import "proton_contents/about_memory";
/*= chrome://browser/content/places/places.xhtml =============================*/
@import "../library/contents";

View File

@ -0,0 +1,236 @@
/* Control Bar Size */
@include Option("userContent.player.size") {
#controlsContainer {
--button-size: 32px !important; /* Original: 30px */
--controlBar-height: 40px; /* Original: 40px, Replace to this value */
}
#controlsContainer .touch {
--button-size: 48px !important; /* Original: 40px */
--controlBar-height: 52px; /* Original: 52px */
}
.videocontrols[inDOMFullscreen] #controlsContainer {
--button-size: 64px !important; /* Original: 30px */
--track-size: 6px !important; /* Original: 5px, Touch: 7px */
--thumb-size: 15px !important; /* Original: 13px, Touch: 16px */
--controlBar-height: 64px; /* Original: 40px */
}
.videocontrols[inDOMFullscreen] #controlsContainer .touch {
--button-size: 72px !important; /* Original: 40px */
--controlBar-height: 64px; /* Original: 52px */
}
#controlsContainer .controlBar {
height: var(--controlBar-height) !important; /* Original: 40px */
}
.videocontrols[inDOMFullscreen] #controlsContainer .controlBar {
padding-bottom: 8px !important;
}
}
/* Control Bar UI */
@include Option("userContent.player.ui") {
audio {
--duration-color: #929292; /* Like Original */
--media-background: rgba(26,26,26,.8); /* Like Original */
border-radius: 8px;
--box-shadow1: rgba(14,13,26,.12);
--box-shadow2: rgba(7,48,114,.12);
--box-shadow3: rgba(34,0,51,.04);
box-shadow: 0 5px 10px -3px var(--box-shadow1), 0 3px 16px 2px var(--box-shadow2),
0 8px 12px 1px var(--box-shadow3);
/* Or: 0 2px 15px rgba(0,0,0,.1); */
}
video {
--duration-color: #eee;
--media-background: linear-gradient(transparent, rgba(26,26,26,.85));
}
@include Dark {
audio {
--box-shadow1: rgba(249, 249, 250, 0.12);
--box-shadow2: rgba(91, 91, 102, 0.12);
--box-shadow3: rgba(82, 82, 94, 0.04);
}
}
@include Contrast {
video {
--duration-color: #929292; /* Like Original */
--media-background: rgba(26,26,26,.8); /* Like Original */
}
}
#controlsContainer .controlBar {
background: var(--media-background) !important;
}
#controlsContainer .duration {
color: var(--duration-color) !important; /* Original: #929292 */
}
@include Option("userContent.player.ui.twoline") {
audio {
// All thing like original
/* #controlsContainer .controlBar */
--controlBar-flex-wrap: unset;
--controlBar-justify-content: center;
--controlBar-align-content: unset;
--controlBar-twoline-more-height: 0px;
--controlBar-padding-inline: 9px;
/* #controlsContainer .scrubberStack */
/* .scrubberStack - Vertical */
--scrubberStack-order: unset;
--scrubberStack-height: 100%;
--scrubberStack-transform: none;
/* .scrubberStack - Horizontal */
--scrubberStack-margin-inline: 9px;
/* #controlsContainer .positionDurationBox */
--positionDurationBox-flex-grow: unset;
--positionDurationBox-margin-left: unset;
--positionDurationBox-text-align: center;
/* Others */
--button-outside-margin: 0;
}
video {
/* #scrubber .scrubber::-moz-range-thumb */
--scrubber-thumb-scale: 0;
--scrubber-thumb-color: #48a0f7; /* Color as hover, Prevent flashing */
/* .progressBar::-moz-progress-bar */
--progressBar-scale: 0.65;
/* #controlsContainer .controlBar */
--controlBar-flex-wrap: wrap;
--controlBar-justify-content: space-between;
--controlBar-align-content: space-around;
--controlBar-padding-inline: 0 !important; /* Original: 9px */
/* #controlsContainer .scrubberStack */
/* .scrubberStack - Vertical */
--scrubberStack-order: -1;
/* .scrubberStack - Horizontal */
--scrubberStack-flex-basis: auto;
--scrubberStack-twoline-width: 100%;
--scrubberStack-margin-inline: 0;
/* #controlsContainer .positionDurationBox */
--positionDurationBox-flex-grow: 2;
--positionDurationBox-margin-left: 15px;
--positionDurationBox-text-align: left;
/* Others */
--duration-color: #dadada;
--button-outside-margin: 9px;
}
.scrubber:not(:hover)::-moz-range-thumb {
transform: scale(var(--scrubber-thumb-scale, 1));
background-color: var(--scrubber-thumb-color, currentColor) !important;
}
.progressStack {
transform-origin: bottom;
transform: scaleY(var(--progressBar-scale, 1));
}
.scrubber:hover::-moz-range-thumb,
.progressContainer:hover .progressStack {
transform:scale(1);
}
#controlsContainer .controlBar {
flex-wrap: var(--controlBar-flex-wrap);
justify-content: var(--controlBar-justify-content);
align-content: var(--controlBar-align-content);
height: calc(var(--controlBar-height) + var(--controlBar-twoline-more-height, var(--thumb-size))) !important;
padding-inline: var(--controlBar-padding-inline) !important; /* Original: 9px */
}
#controlsContainer .scrubberStack {
/* Vertical */
order: var(--scrubberStack-order);
height: var(--scrubberStack-height, var(--thumb-size)) !important;
transform: var(--scrubberStack-transform, translateY(calc(var(--thumb-size) / 2)));
/* Horizontal */
flex-basis: var(--scrubberStack-flex-basis, calc(var(--scrubberStack-width) - 18px)) !important;
width: var(--scrubberStack-twoline-width, var(--scrubberStack-width));
margin-inline: var(--scrubberStack-margin-inline) !important;
}
#controlsContainer .positionDurationBox {
flex-grow: var(--positionDurationBox-flex-grow);
margin-left: var(--positionDurationBox-margin-left);
text-align: var(--positionDurationBox-text-align) !important;
}
#playButton {
margin-left: var(--button-outside-margin) !important;
}
#fullscreenButton {
margin-right: var(--button-outside-margin) !important;
}
}
}
@include Option("userContent.player.icon") {
#controlsContainer .fullscreenButton {
background-image: url("../icons/enter-fullscreen.svg") !important;
}
#controlsContainer .fullscreenButton[fullscreened] {
background-image: url("../icons/exit-fullscreen.svg") !important;
}
}
@include Option("userContent.player.noaudio") {
#controlsContainer .muteButton[noAudio] {
/* Remove volume button at noAudio */
display: none !important;
}
}
/* Click to play UI */
@include Option("userContent.player.click_to_play") {
#controlsContainer .clickToPlay {
cursor: pointer;
opacity: 0.65 !important;
}
#controlsContainer .controlsSpacerStack:hover > .clickToPlay {
opacity: 0.85 !important;
}
#controlsContainer .controlsSpacerStack:hover > .clickToPlay:hover {
opacity: 1 !important;
fill: #48a0f7 !important; /* color as .scrubber */
}
}
/* Animation */
@include Option("userContent.player.animate") {
@include Animate {
/* Control Bar */
#controlsContainer .controlBar {
transition: transform 350ms ease;
opacity: 1 !important;
}
#controlsContainer .controlBar[hidden] {
transform: translateY(100%);
transition: transform 350ms ease-in-out, opacity 1s ease 100ms !important;
opacity: 0 !important;
}
#controlsContainer .controlBar[hidden] .progressBar,
#controlsContainer .controlBar[hidden] .bufferBar {
display: unset !important;
opacity: 0.55;
transition: opacity 150ms ease 50ms;
}
/* Two line Control Bar */
.scrubber::-moz-range-thumb,
.progressStack {
transition:transform .1s cubic-bezier(0, 0, 0.2, 1);
}
/* Click to play */
#controlsContainer .clickToPlay {
transition: opacity 150ms ease-in-out, fill 150ms ease-in-out;
}
}
}

View File

@ -0,0 +1,149 @@
/*= Accounts.com ===========================================================*/
@-moz-document url-prefix("https://accounts.firefox.com")
{
/* Basic */
body {
color: var(--in-content-page-color) !important;
background: var(--in-content-page-background) !important;
}
.button.primary-button,
.button[type="submit"]:not(.secondary-button),
.settings-button.primary-button,
.settings-button[type="submit"]:not(.secondary-button),
button.primary-button,
button[type="submit"]:not(.secondary-button) {
color: var(--in-content-primary-button-text-color) !important;
background: var(--in-content-primary-button-background) !important;
}
/* Text */
header h1,
.info,
.info a,
.prefillEmail,
.faint a:hover,
.cta-neutral:hover {
color: var(--in-content-page-color) !important;
}
#main-content.panel a,
.links a,
.link-blue,
.text-blue-500 {
color: var(--in-content-link-color) !important;
}
.link-blue:hover {
color: var(--in-content-link-color-hover) !important;
}
.signed-in-email-message,
.verification-email-message,
.verification-message,
.verification-recovery-code-message,
.verification-totp-message,
.input-row input[type="email"],
.input-row input[type="number"],
.input-row input[type="password"],
.input-row input[type="tel"],
.input-row input[type="text"],
.input-row input::placeholder,
.firefox-family-services > ul > .firefox-service,
.faint,
.faint a,
.text-grey-400 {
color: var(--in-content-deemphasized-text) !important;
}
/* Background */
.flex .flex-wrap {
background: var(--in-content-page-background);
}
.password-row .show-password-label {
background-color: unset !important;
}
#main-content,
.modal,
.firefox-family-services,
.input-row input[type="email"],
.input-row input[type="number"],
.input-row input[type="password"],
.input-row input[type="tel"],
.input-row input[type="text"],
header,
.bg-white:not(nav) {
background: var(--in-content-box-background) !important;
}
#suggest-sync,
.cta-neutral {
background: var(--in-content-button-background) !important;
}
.cta-neutral:hover,
.bg-grey-50:hover,
.hover\:bg-grey-100:hover {
background: var(--in-content-button-background-hover) !important;
}
.text-blue-500 .cta-neutral,
.text-blue-500 .bg-grey-50,
.text-blue-500 .hover\:bg-grey-100 {
background: var(--in-content-button-background) !important;
}
.hover\:bg-grey-200:hover {
background: var(--in-content-button-background-active) !important;
}
.button.primary-button:hover:enabled,
.button[type="submit"]:not(.secondary-button):hover:enabled,
.settings-button.primary-button:hover:enabled,
.settings-button[type="submit"]:not(.secondary-button):hover:enabled,
button.primary-button:hover:enabled,
button[type="submit"]:not(.secondary-button):hover:enabled {
background: var(--in-content-primary-button-background-hover) !important;
}
.tooltip,
.tooltip::before {
background: var(--in-content-danger-button-background) !important;
}
/* Fill */
.dismiss,
#about-mozilla,
.show-password-label,
footer a[data-testid="link-mozilla"] {
filter: invert(95%) !important;
}
header button svg,
header .rounded svg,
#service svg {
filter: brightness(15) !important;
}
button.relative,
#fxa-settings nav svg {
filter: brightness(2) !important;
}
/* Others */
.input-row input[type="email"],
.input-row input[type="number"],
.input-row input[type="password"],
.input-row input[type="tel"],
.input-row input[type="text"],
.unit-row-hr .border-grey-100 {
border-color: var(--in-content-border-color) !important;
}
.input-row input[type="email"]:hover,
.input-row input[type="number"]:hover,
.input-row input[type="password"]:hover,
.input-row input[type="tel"]:hover,
.input-row input[type="text"]:hover {
border-color: var(--in-content-border-hover) !important;
}
#main-content {
box-shadow: 0 12px 18px 2px rgba(249, 249, 250, 0.12), 0 6px 22px 4px rgba(91, 91, 102, 0.12),
0 6px 10px -4px rgba(82, 82, 94, 0.04) !important;
}
.input-row input[type="email"]:focus,
.input-row input[type="number"]:focus,
.input-row input[type="password"]:focus,
.input-row input[type="tel"]:focus,
.input-row input[type="text"]:focus {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--in-content-primary-button-background-hover) 80%, transparent) !important;
}
}

View File

@ -0,0 +1,242 @@
/*= Addons.org =============================================================*/
@-moz-document url-prefix("https://addons.mozilla.org")
{
/* Basic */
.Page-content,
.SecondaryHero,
body:not(.developer-hub):not(.statistics),
main[aria-label="Content"] {
color: var(--in-content-page-color) !important;
background: var(--in-content-page-background) !important;
}
/* Text */
.AutoSearchInput-query,
.AutoSearchInput-suggestions-list,
.Page-content h1,
.Page-content h2,
.SearchResult-link,
.Home-SubjectShelf-link:link,
.Home-SubjectShelf-link:visited,
.DropdownMenuItem-link a,
.Select,
.Badge,
.Notice-generic,
.Notice-genericWarning,
.Notice-button,
.Paginate .Button.Paginate-item:first-child,
.Paginate .Button.Paginate-item:last-child,
.Paginate .Button.Paginate-item--current-page,
.Button--neutral,
.blog-entry-title,
.blogpost-nav * {
color: var(--in-content-text-color) !important;
}
.AutoSearchInput-suggestions-item:is(:active, :focus, :hover),
.AutoSearchInput-suggestions-item--highlighted,
.SecondaryHero-message-link,
.SecondaryHero-module-link,
.Card-contents a:not(.Button),
.Card-footer-link a,
.Card-shelf-footer-in-header a,
.SearchResult-link:is(:active, :focus, :hover),
.SearchResult:hover .SearchResult-link,
.Home-SubjectShelf-link:is(:active, :focus, :hover),
.DropdownMenuItem-link a:is(:active, :focus, :hover),
.AddonMeta .MetadataCard-title a:is(:active, :hover),
.AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link:is(:active, :hover),
.AddonMeta .MetadataCard-content a:is(:active, :hover),
.AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link:is(:active, :hover),
.Addon-summary a,
.RatingsByStar-count a:hover,
.RatingsByStar-star a:hover,
.Paginate .Button.Paginate-item:not(:first-child, :last-child, .Paginate-item--current-page),
.AddonTitle-author a,
.PermissionsCard-learn-more,
.DefinitionList a,
.ShowMoreCard-contents a,
.AddonDescription-contents a,
.AddonTitle a,
.TooltipMenu-opener,
.LanguageTools .Card-contents a,
.blog-entry-read-more-link,
.blogpost-nav-next.blogpost-nav-no-prev:hover p,
.blogpost-content-wrapper p a,
.blogpost-nav-prev:hover p,
.blogpost-nav-next:hover p {
color: var(--in-content-link-color) !important;
}
.SearchResult--meta-section,
.MetadataCard-title,
.MetadataCard-title a,
.MetadataCard-content a,
.CollectionSort-label,
.SearchResult-summary,
.AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link,
.AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link,
.PermissionsCard-subhead--optional,
.PermissionsCard-subhead--required,
.Definition-dt,
.RatingsByStar-count a,
.RatingsByStar-star a,
.Paginate-page-number,
.AddonSummaryCard-addonAverage,
.AddonReviewCard-authorByLine,
.UserReview-byLine,
.UserReview-reply-header,
.Home-heroHeader-subtitle,
.blog-entry-date,
.blogpost-breadcrumb *,
.AddonTitle-author,
.ExpandableCard-ToggleLink,
.SearchFilters-label,
.PromotedBadge-label--line {
color: var(--in-content-deemphasized-text) !important;
}
.PromotedBadge-label--recommended {
color: color-mix(in srgb, #712b00 15%, #ff9400) !important;
}
/* Background */
.Button--action {
color: var(--in-content-primary-button-text-color) !important;
background: var(--in-content-primary-button-background) !important;
}
.Select,
.Button--neutral,
.Button--neutral:link,
.Notice-button,
.AMInstallButton .AMInstallButton-loading-button {
background-color: var(--in-content-button-background) !important;
}
.Button--neutral.Button--micro:not(.Button--disabled):hover,
.Button--neutral:not(.Button--disabled):hover,
.Notice-button:hover {
background: var(--in-content-button-background-hover) !important;
}
.Button--action.Button--micro:not(.Button--disabled):hover,
.Button--action:not(.Button--disabled):hover {
background: var(--in-content-primary-button-background-hover) !important;
}
.ShowMoreCard-contents::after {
background: linear-gradient(hsla(0, 0%, 100%, 0), var(--in-content-table-background)) !important;
}
.AutoSearchInput-query,
.AutoSearchInput-suggestions-list,
.SecondaryHero-module,
.Card-header,
.Card-contents,
.CardList ul > li,
.AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:is(:focus, :hover),
.Paginate,
.LandingPage-header,
.DropdownMenu-items,
.DropdownMenu-items::after,
.MetadataCard,
.AddonsCard-list,
.Card-footer,
.StaticAddonCard,
.blogpost-nav,
.blogpost-nav * {
background: var(--in-content-table-background) !important;
}
.Paginate .Button.Paginate-item:is(:active, :hover) {
background: var(--in-content-button-background-hover) !important;
}
.Notice-generic,
.Notice-genericWarning {
background: color-mix(
in srgb,
var(--in-content-page-background) 40%,
var(--in-content-table-background)
) !important;
}
.LanguageTools-header-row {
color: var(--in-content-table-header-color) !important;
background: var(--in-content-table-header-background) !important;
}
.LanguageTools-table.responsiveTable tbody tr:nth-child(2n) {
background-color: var(--in-content-box-background-odd) !important;
}
/* Fill */
.Icon-arrow-blue.SearchSuggestion-icon-arrow {
filter: hue-rotate(330deg) brightness(1.3) !important;
}
.SecondaryHero-module-icon {
filter: invert(85%) !important;
}
.Icon-magnifying-glass,
.Notice-icon {
filter: invert(65%) !important;
}
.PermissionsCard-learn-more .Icon,
.Permission .Icon {
filter: invert(100%) !important;
}
.Icon-heart {
filter: brightness(0) !important;
}
/* Others */
.DropdownMenu-items {
box-shadow: 0 0 2px var(--in-content-border-color) !important;
}
.AutoSearchInput-query {
border: 1px solid var(--in-content-table-background) !important;
}
.AutoSearchInput-query:is(:hover, :focus) {
border-color: var(--in-content-primary-button-background) !important;
}
.AutoSearchInput-query:focus {
box-shadow: inset 0 0 0 1px var(--in-content-primary-button-background),
0 0 0 1px var(--in-content-primary-button-background), 0 0 0 4px rgba(0, 211, 255, 0.3) !important;
}
.PromotedBadge-link--line {
border-color: var(--in-content-deemphasized-text) !important;
}
.PromotedBadge-link--line:hover {
border-color: var(--in-content-button-background-hover) !important;
}
.blog-entry-read-more-link {
border-color: var(--in-content-link-color) !important;
}
.blogpost-nav-arrow-left .cls-1,
.blogpost-nav-arrow-right .cls-1 {
stroke: var(--in-content-text-color) !important;
}
/* /developers/ */
.DevHub-Navigation,
.DevHub-submit-addon,
.DevHub-get-involved,
.DevHub-MyAddons > * {
background: var(--in-content-page-background) !important;
color: var(--in-content-page-color) !important;
}
.DevHub-Footer,
.DevHub-callout-box {
background: var(--in-content-box-background) !important;
color: var(--in-content-page-color) !important;
}
.DevHub-Navigation.scheme-light ul li a,
.DevHub-Footer-sections-header,
.DevHub-Footer-section h4,
.DevHub-Footer-section p,
.DevHub-content-copy h2 {
color: var(--in-content-page-color) !important;
}
.DevHub-Banner a,
.DevHub-Footer a,
.DevHub-MyAddons-list a,
.DevHub-MyAddons-item-buttons-all {
color: var(--in-content-link-color) !important;
}
}

View File

@ -0,0 +1,181 @@
/*= Support.org ============================================================*/
@-moz-document url-prefix("https://support.mozilla.org")
{
/* Basic */
:root {
--color-blue-06: var(--in-content-link-color) !important;
--color-blue-07: var(--in-content-link-color-hover) !important;
--color-blue-09: var(--in-content-link-color-active) !important;
--page-bg: var(--in-content-page-background) !important;
--color-white: var(--in-content-page-background) !important;
--color-shade-bg: var(--in-content-page-background) !important;
--color-marketing-gray-02: var(--card-outline-color) !important;
--color-inverse-bg: var(--in-content-page-color) !important;
--color-inverse: var(--in-content-page-background) !important;
--color-text: var(--in-content-page-color) !important;
--color-moz-text: var(--in-content-page-color) !important;
--color-moz-heading: var(--in-content-page-color) !important;
--color-text-light: var(--in-content-deemphasized-text) !important;
--color-link: var(--in-content-link-color) !important;
--color-success: var(--green-70) !important;
--color-warning: var(--yellow-80) !important;
--color-error: var(--red-60) !important;
--color-error-hover: var(--red-50) !important;
--color-moz-heading: #fff;
--color-moz-inverse-bg: var(red) !important;
--focus-shadow: 0 0 0 4px color-mix(in srgb, var(--in-content-primary-button-background) 30%, transparent),
0 0 0 2px var(--in-content-primary-button-background-active);
}
.warning {
--color-link: rgb(55, 255, 255) !important;
}
body,
#main-content,
#instant-search-content,
#mzp-c-menu-panel-help,
.mzp-c-navigation,
.kbox-container {
color: var(--in-content-page-color) !important;
background: var(--in-content-page-background) !important;
}
#editor {
border: 2px solid var(--in-content-border-color) !important;
}
.CodeMirror-linenumbers {
background: var(--in-content-table-background);
}
.CodeMirror-lines {
color: var(--in-content-deemphasized-text) !important;
background: var(--in-content-page-background) !important;
}
.CodeMirror-scroll {
background: var(--in-content-page-background) !important;
}
/* Text */
.mzp-c-menu-category .mzp-c-menu-title,
.mzp-c-menu-item .mzp-c-menu-item-link,
.mzp-c-menu-item .mzp-c-menu-item-link > *,
.mzp-c-menu-item .mzp-c-menu-item-list a,
#doc-content .menu,
.document--content .menu,
.forum--entry-content .menu,
.tag-name a {
color: var(--in-content-page-color) !important;
}
.ts-select-trigger,
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
select,
textarea,
#doc-content .button,
#doc-content .key,
.document--content .button,
.document--content .key,
.forum--entry-content .button,
.forum--entry-content .key {
color: var(--in-content-deemphasized-text) !important;
}
.tag-list a {
color: var(--color-marketing-gray-10) !important;
}
.tag-list a:hover,
.sidebar-nav a:hover {
color: var(--color-link) !important;
}
.tag-list li {
background: var(--in-content-page-color) !important;
}
.tag-list li:hover {
background: var(--in-content-deemphasized-text) !important;
}
#remaining-characters {
color: var(--in-content-page-color) !important;
}
/* Background */
.sidebar-nav.topics,
.sidebar-nav.topics > li {
background: var(--in-content-page-background) !important;
}
.mzp-c-menu-panel {
color: var(--in-content-page-color) !important;
background: var(--in-content-page-background) !important;
}
.mzp-c-menu-list-list,
.mzp-c-menu-list-list:hover {
color: var(--in-content-page-color) !important;
background: var(--in-content-box-background) !important;
}
.mzp-c-menu-list-item:focus,
.mzp-c-menu-list-item:hover {
background: var(--in-content-button-background-hover) !important;
}
.cm-bold {
color: var(--in-content-page-color) !important;
}
/* Fill */
.sumo-nav--logo,
.sumo-nav--search-button,
.sumo-nav--toggle-button,
.card:not(.is-inverse) .card--icon-sm,
.mzp-c-menu-item-icon,
.mzp-c-menu-button-close,
.topic-article--icon,
.card--topic > .card--icon,
.mzp-c-details .is-summary button::before,
details .is-summary button::before,
summary::before,
.icon-button > button,
.search-button {
filter: invert(95%) !important;
}
button.markup-toolbar-button {
/*using 0.5 because in middle*/
filter: invert(0.5) !important;
}
/* Others */
.support-callouts > .card.is-inverse {
background: #20133a !important;
}
.support-callouts > .card.is-inverse :is(h1, h2, h3, h4, h5, h6, li, p) {
color: var(--in-content-page-color) !important;
}
.sumo-button.secondary-button {
border-color: transparent !important;
}
.mzp-c-menu-panel {
border-color: var(--in-content-button-background-hover) !important;
}
.mzp-c-menu-item:is(:focus, :hover, :active) .mzp-c-menu-item-link .mzp-c-menu-item-title {
border-color: var(--in-content-page-color) !important;
}
@media screen and (min-width: 768px) {
.mzp-c-menu-panel {
box-shadow: 0 16px 16px -16px rgba(255, 255, 255, 0.3) !important;
}
}
.card--product,
.card--topic,
.card--article {
box-shadow: 0 5px 10px -3px rgba(249, 249, 250, 0.12), 0 3px 16px 2px rgba(91, 91, 102, 0.12),
0 8px 12px 1px rgba(82, 82, 94, 0.04) !important;
}
}

View File

@ -0,0 +1,11 @@
@-moz-document url-prefix("about:cache") {
table {
padding: 0 !important;
}
th,
td {
padding: 4px !important;
text-align: match-parent !important;
}
}

View File

@ -0,0 +1,8 @@
@-moz-document url-prefix("about:checkerboard") {
#canvas {
border: 1px solid var(--in-content-border-color) !important;
}
#excludePageFromZoom {
vertical-align: bottom !important;
}
}

View File

@ -0,0 +1,10 @@
@-moz-document url-prefix("about:memory") {
.opsRow,
.section {
background-color: var(--in-content-box-background) !important;
color: var(--in-content-page-color) !important;
}
.opsRowLabel input {
vertical-align: bottom !important;
}
}

View File

@ -0,0 +1,6 @@
@-moz-document url-prefix("about:plugins") {
.notice {
background: var(--in-content-box-background) !important;
border: 1px solid var(--in-content-border-color) !important;
}
}

View File

@ -0,0 +1,13 @@
@-moz-document url-prefix("about:sync-log"),
regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
body {
background-color: var(--in-content-box-background) !important;
margin: 4em auto !important; /* Override to default */
}
thead a {
color: var(--in-content-page-color) !important;
}
td ::before {
vertical-align: top !important;
}
}

View File

@ -0,0 +1,12 @@
@-moz-document url-prefix("about:") {
xul|search-textbox:hover {
border-color: var(--in-content-focus-outline-color) !important;
transition: border-color 0.5s var(--animation-easing-function);
}
}
@-moz-document url-prefix("about:config") {
#about-config-search:hover {
border-color: var(--in-content-focus-outline-color) !important;
transition: border-color 0.5s var(--animation-easing-function);
}
}

View File

@ -0,0 +1,232 @@
/*= abouts' common ===========================================================*/
@-moz-document url-prefix("about:plugins"),
url-prefix("about:cache"),
url-prefix("about:checkerboard"),
url-prefix("about:sync-log"),
url-prefix("about:memory"),
regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
/* Base */
html,
body {
font: message-box !important;
appearance: none !important;
background-color: var(--in-content-page-background) !important;
color: var(--in-content-page-color) !important;
}
body {
font-size: 15px !important;
font-weight: normal !important;
margin: 0 !important;
}
h1 {
line-height: 1.2 !important;
}
h2 {
line-height: 1.4em !important;
}
/* Link */
a {
color: var(--in-content-link-color) !important;
}
a:hover,
.text-link:hover {
color: var(--in-content-link-color-hover) !important;
text-decoration: underline !important;
}
a:visited {
color: var(--in-content-link-color-visited) !important;
}
a:hover:active,
.text-link:hover:active {
color: var(--in-content-link-color-active) !important;
}
a:-moz-focusring,
.text-link:-moz-focusring {
outline: 2px solid var(--in-content-focus-outline-color) !important;
outline-offset: 1px !important;
border-radius: 4px !important;
}
/* Button */
button {
font: inherit;
}
button,
select,
input[type="color"] {
appearance: none !important;
min-height: 32px !important;
color: var(--in-content-button-text-color, inherit) !important;
border: 1px solid transparent !important; /* shows up in high-contrast mode */
border-radius: var(--in-content-button-border-radius) !important;
background-color: var(--in-content-button-background) !important;
font-weight: 400 !important;
padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important;
text-decoration: none !important;
margin: 4px 8px !important;
/* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */
font-size: 1em !important;
}
button {
font-weight: 600 !important;
/* Use the same margin of other elements for the alignment */
margin-inline: 4px !important;
min-width: 6.3em !important;
}
/* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding
* the 1px border): */
button.medium {
--in-content-button-vertical-padding: 6px;
--in-content-button-horizontal-padding: 13px;
min-height: 28px !important;
font-size: 0.95em !important;
}
button.small {
--in-content-button-vertical-padding: 5px;
--in-content-button-horizontal-padding: 11px;
min-height: 24px !important;
font-size: 0.9em !important;
}
::-moz-focus-inner {
border: none !important;
}
button:-moz-focusring {
box-shadow: none !important;
outline: 2px solid var(--in-content-focus-outline-color) !important;
outline-offset: 2px !important;
}
button:enabled:hover,
input[type="color"]:hover {
background-color: var(--in-content-button-background-hover) !important;
color: var(--in-content-button-text-color-hover) !important;
border-color: transparent !important;
}
button:enabled:hover:active,
input[type="color"]:enabled:hover:active {
background-color: var(--in-content-button-background-active) !important;
}
button:disabled,
input[type="color"]:disabled {
opacity: 0.4 !important;
}
button[autofocus],
button[type="submit"],
button.primary {
background-color: var(--in-content-primary-button-background) !important;
color: var(--in-content-primary-button-text-color) !important;
}
button[autofocus]:enabled:hover,
button[type="submit"]:enabled:hover,
button.primary:enabled:hover {
background-color: var(--in-content-primary-button-background-hover) !important;
color: var(--in-content-primary-button-text-color-hover) !important;
}
button[autofocus]:enabled:hover:active,
button[type="submit"]:enabled:hover:active,
button.primary:enabled:hover:active {
background-color: var(--in-content-primary-button-background-active) !important;
}
/* Checkbox */
input[type="checkbox"] {
margin-block: 2px !important;
}
input[type="checkbox"] {
appearance: none !important;
height: 16px !important;
width: 16px !important;
border: 1px solid var(--checkbox-border-color) !important;
background-color: var(--checkbox-unchecked-bgcolor) !important;
border-radius: 2px !important;
margin-inline: 0 6px !important;
flex-shrink: 0 !important; /* avoid shrinking inside flex container */
}
input[type="checkbox"]:enabled:hover {
background-color: var(--checkbox-unchecked-hover-bgcolor) !important;
}
input[type="checkbox"]:enabled:hover:active {
background-color: var(--checkbox-unchecked-active-bgcolor) !important;
}
input[type="checkbox"]:checked {
border-color: var(--checkbox-checked-border-color) !important;
background-color: var(--checkbox-checked-bgcolor) !important;
background-image: url("chrome://global/skin/icons/check.svg") !important;
background-position: center !important;
background-repeat: no-repeat !important;
-moz-context-properties: fill !important;
fill: currentColor !important;
color: var(--checkbox-checked-color) !important;
/* Style the button also when printing with "Print Backgrounds" unchecked */
color-adjust: exact !important;
}
input[type="checkbox"]:enabled:checked:hover {
background-color: var(--checkbox-checked-hover-bgcolor) !important;
}
input[type="checkbox"]:enabled:checked:hover:active {
background-color: var(--checkbox-checked-active-bgcolor) !important;
}
/* Textarea */
input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]),
textarea {
appearance: none !important;
border: 1px solid var(--in-content-box-border-color) !important;
border-radius: 4px !important;
color: inherit !important;
background-color: var(--in-content-box-background) !important;
}
input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]),
textarea {
font-family: inherit !important;
font-size: inherit !important;
padding: 8px !important;
margin: 2px 4px !important;
}
input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus,
textarea:focus,
search-textbox[focused],
tree:focus-visible,
richlistbox:focus-visible {
border-color: transparent !important;
outline: 2px solid var(--in-content-focus-outline-color) !important;
outline-offset: -1px !important; /* Prevents antialising around the corners */
}
input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):-moz-ui-invalid,
textarea:-moz-ui-invalid {
border-color: transparent !important;
outline: 2px solid var(--in-content-border-invalid) !important;
outline-offset: -1px !important; /* Prevents antialising around the corners */
}
input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):disabled,
textarea:disabled,
search-textbox[disabled="true"] {
opacity: 0.4 !important;
}
/* Table */
table {
width: 100% !important;
}
}
@-moz-document url-prefix("about:plugins"),
url-prefix("about:cache"),
url-prefix("about:checkerboard") {
table {
border: 1px solid var(--in-content-table-border-color) !important;
border-radius: 0 !important;
}
}
@-moz-document url-prefix("about:cache"),
url-prefix("about:checkerboard") {
th,
td {
border: 1px solid var(--in-content-table-border-color) !important;
}
th {
background-color: var(--in-content-table-header-background) !important;
color: var(--in-content-table-header-color) !important;
}
}

View File

@ -0,0 +1,59 @@
@-moz-document url-prefix("view-source") {
:root {
background-color: var(--in-content-page-background) !important; /* Original: white */
color: var(--in-content-page-color) !important; /* Original: black */
/* Colors */
--view-source-green: var(--green-80);
--view-source-purple: #800080; /* Like alphenglow */
}
@include Dark {
:root {
--view-source-green: var(--green-60);
--view-source-purple: #c68aff;
}
}
pre[id]::before,
span[id]::before {
color: color-mix(
in srgb,
var(--in-content-page-color) 70%,
var(--in-content-page-background)
) !important; /* Original: #ccc */
}
.highlight .start-tag,
.highlight .end-tag {
color: var(--view-source-purple) !important; /* Original: purple */
}
.highlight .comment {
color: var(--view-source-green) !important; /* Original: green */
}
.highlight .cdata {
color: var(--in-content-border-invalid) !important; /* Original: #CC0066 */
}
.highlight .doctype {
color: #4682b4 !important; /* Original: steelblue */
}
.highlight .pi {
color: orchid !important; /* Original: orchid */
}
.highlight .entity {
color: #ff4500 !important; /* Original: #FF4500 */
}
.highlight .attribute-name {
color: var(--view-source-green) !important; /* Original: black */
}
.highlight .attribute-value {
color: var(--in-content-link-color) !important; /* Original: blue */
}
.highlight .markupdeclaration {
color: #4682b4 !important; /* Original: steelblue */
}
.highlight .error,
.highlight
.error
> :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype, .pi, .entity, .attribute-name, .attribute-value) {
color: var(--in-content-error-text-color) !important; /* Original: red */
}
}

View File

@ -0,0 +1,197 @@
/*- Background Color -------------------------------------------------------*/
@mixin _animate_bgColor($duration, $presudo: "") {
button#{$presudo},
toolbarbutton#{$presudo},
stack#{$presudo},
vbox#{$presudo},
.toolbarbutton-icon#{$presudo},
#tabs-newtab-button#{$presudo} > .toolbarbutton-icon {
transition: background-color $duration var(--animation-easing-function) !important;
}
}
@include _animate_bgColor(1s);
@include _animate_bgColor(0.25s, ":hover");
@include OS($linux) {
.tabbrowser-tab:is([visuallyselected], [multiselected], [selected]) .tab-background:not(:-moz-lwtheme) {
transition: background-image 0.25s var(--animation-easing-function) !important;
}
}
.subviewbutton {
/* treechildren::-moz-tree-row: Can't apply
menu, menuitem is not apply.
*/
transition: background-color 0.5s var(--animation-easing-function) !important;
&:hover {
transition: background-color 0.1s var(--animation-easing-function) !important;
}
}
/*- Pinned Tab -------------------------------------------------------------*/
#tabbrowser-tabs:not([movingtab]) {
.tabbrowser-tab {
&:not([collapsed]) {
/* -moz-box-flex may be caused #tabbrowser-tabs[closebuttons] */
transition: -moz-box-flex 0.2s var(--animation-easing-function),
margin-inline-start 0.2s var(--animation-easing-function), min-width 0.1s ease-out, max-width 0.1s ease-out !important;
}
&[pinned] {
transition: -moz-box-flex 0.2s var(--animation-easing-function),
margin-inline-start 0.2s var(--animation-easing-function) !important;
}
}
.tab-content {
&::before,
&::after {
transition: width 0.2s var(--animation-easing-function), transform 0.2s var(--animation-easing-function) !important;
}
.tab-label-container {
transition: width 0.3s var(--animation-easing-function) !important;
}
.tab-icon-image {
transition: all 0.3s var(--animation-easing-function) !important;
}
}
}
/*- URL / Search Bar -------------------------------------------------------*/
#urlbar-background,
#searchbar {
transition: border-color 1s var(--animation-easing-function), background-color 1.5s var(--animation-easing-function) !important;
&:hover {
transition: border-color 0.5s var(--animation-easing-function), background-color 1s var(--animation-easing-function) !important;
}
}
/* Buttons in URL bar */
#tracking-protection-icon-container,
#identity-icon-box,
#identity-permission-box,
#notification-popup-box,
#page-action-buttons > .urlbar-page-action {
transition: background-color 2.5s var(--animation-easing-function) !important;
&:hover {
transition: background-color 1.25s var(--animation-easing-function) !important;
}
}
/*- Border - Other Fields --------------------------------------------------*/
#search-box,
xul|search-textbox.tabsFilter,
#editBMPanel_namePicker,
#editBMPanel_tagsField,
.findbar-container .findbar-textbox {
transition: border-color 1s var(--animation-easing-function) !important;
&:hover {
transition: border-color 0.5s var(--animation-easing-function) !important;
}
}
/*- Sidebar ----------------------------------------------------------------*/
@include NotOption("userChrome.decoration.disable_sidebar_animate") {
#sidebar-box {
/* like #sidebar-box > #sidebar */
min-width: 14em;
width: 18em;
max-width: 36em;
/* Animation */
transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out,
visibility 0s linear !important;
&[hidden="true"] {
display: -moz-box !important;
margin-inline-start: -18em;
opacity: 0;
visibility: collapse;
transition-delay: 0s, 0s, 0.25s !important;
}
}
}
/*- Full Screen ------------------------------------------------------------*/
#navigator-toolbox {
/* Full screen out */
transition: margin-top 1s ease;
transform-origin: top;
&[inFullscreen="true"] {
/* Full screen enter */
animation-duration: 1s;
animation-name: fullscreen;
animation-timing-function: ease;
/* Full screen navbar not hover */
// transition: margin-top 0.3s var(--animation-easing-function) 50ms;
transition: margin-top 1.3s var(--animation-easing-function) 50ms;
&:hover {
// Full screen navbar hover
// transition-duration: 1.5s; // Not works, because !important
// transition-delay: 0.5s;
margin-top: 0 !important;
}
}
}
@keyframes fullscreen {
from {
margin-top: 0;
}
/* Dont' use `to`: Depending on density */
}
/*- Expand - Synced Tabs ---------------------------------------------------*/
@-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml")
{
.item-tabs-list {
transition: transform 0.2s ease-out, opacity 0.2s ease-out;
transform: translateY(0%);
opacity: 1;
max-height: 100%;
}
.item.client.closed .item-tabs-list {
display: flex !important;
transition: transform 0.2s ease-out, opacity 0.2s ease-out,
max-height 0.25s cubic-bezier(0.82, 0.085, 0.395, 0.895) 0.05s;
visibility: hidden;
transform: translateY(-100%);
opacity: 0;
max-height: 0;
}
}
/*- Arrow - Synced Tabs ----------------------------------------------------*/
@-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml")
{
/* treechildren::-moz-tree-twisty: Can't apply */
#template-container .item.client {
.item-twisty-container {
transition: transform 0.1s var(--animation-easing-function) !important;
}
&.closed .item-twisty-container {
transform: rotate(-90deg);
background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
&:dir(rtl) {
transform: rotate(90deg);
}
}
}
}
/*- Arrow - Edit Bookmark Popup --------------------------------------------*/
#editBookmarkPanelRows .expander-up .button-icon,
#editBookmarkPanelRows .expander-down .button-icon {
transition: transform 0.1s var(--animation-easing-function) !important;
}
#editBookmarkPanelRows .expander-up {
list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
.button-icon {
transform: rotate(180deg);
}
}

View File

@ -0,0 +1,33 @@
#appMenu-proton-update-banner,
#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2,
#appMenu-zoomReduce-button2,
#appMenu-zoomReset-button2,
#appMenu-zoomEnlarge-button2,
#appMenu-fullscreen-button2,
#panelMenu_showAllBookmarks,
#PanelUI-historyMore,
#appMenuClearRecentHistory:not([disabled]),
#appMenu-library-recentlyClosedTabs > .restoreallitem.panel-subview-footer-button,
#appMenu-library-recentlyClosedWindows > .restoreallitem.panel-subview-footer-button,
#BMB_viewBookmarksSidebar,
#BMB_bookmarksShowAllTop,
#BMB_bookmarksShowAll,
#import-button,
menuitem.openintabs-menuitem,
#downloadsListBox .downloadButton,
#downloadsListBox .download-state[exists],
#downloadsListBox .download-state[exists] .downloadDetails,
#downloadsHistory,
#protections-popup-footer .protections-popup-footer-button,
#protections-popup-multiView .panel-subview-footer-button,
#identity-popup-clear-sitedata-button,
#identity-popup-more-info {
cursor: pointer !important;
}
/* TODO: For now, fxa-menu doesn't show any status.
(JS required, observe .syncNowBtn status)
#PanelUI-fxa-menu-syncnow-button[syncstatus="active"] {
cursor: progress !important;
}
*/

View File

@ -0,0 +1,18 @@
/* Accent Color for downloaded item */
#downloadsListBox .download-state[exists] .downloadDetails {
color: var(--button-primary-bgcolor);
&.downloadDetailsHover {
color: var(--button-primary-hover-bgcolor);
}
}
/* File moved or missing */
#downloadsListBox .download-state:not([exists], [state="0"]) {
.downloadTarget {
text-decoration: line-through;
text-decoration-color: color-mix(in srgb, currentColor 65%, transparent);
}
.downloadTypeIcon {
filter: grayscale(100%) !important;
}
}

View File

@ -0,0 +1,23 @@
/*- URL, Search Bar --------------------------------------------------------*/
#urlbar:hover:not([focused="true"]) > #urlbar-background,
#searchbar:hover:not(:focus-within) {
--toolbar-field-border-color: var(--toolbar-field-focus-border-color);
}
/*- Other Fields -----------------------------------------------------------*/
/* Sidebar */
.sidebar-panel[lwt-sidebar] #search-box:hover,
body[lwt-sidebar] xul|search-textbox.tabsFilter:hover {
border-color: var(--lwt-sidebar-highlight-background-color, Highlight) !important;
}
.sidebar-panel:not([lwt-sidebar]) #search-box:hover,
body:not([lwt-sidebar]) xul|search-textbox.tabsFilter:hover {
border-color: -moz-accent-color !important;
}
/* Others */
#editBMPanel_namePicker:hover,
#editBMPanel_tagsField:hover,
.findbar-container .findbar-textbox:hover {
--input-border-color: color-mix(in srgb, var(--focus-outline-color, -moz-accent-color) 50%, transparent);
}

View File

@ -0,0 +1,26 @@
/*= Cursor Types =============================================================*/
@include Option("userChrome.decoration.cursor") {
@import "cursor";
}
@include Animate {
/*= Field Border ===========================================================*/
@include Option("userChrome.decoration.field_border") {
@import "field_border";
}
/*= Downloads Panel ========================================================*/
@include Option("userChrome.decoration.download_panel") {
@import "download_panel";
}
/*= Animate ================================================================*/
@include Option("userChrome.decoration.animate") {
@import "animate";
}
@include Option("userChrome.decoration.disable_panel_animate") {
:root {
--panelui-subview-transition-duration: 1ms !important; /* Disable top right corner menu sliding animation (0ms will not work!) */
}
}
}

View File

@ -0,0 +1,9 @@
@include Option("userChrome.fullscreen.overlap") {
@include Option("browser.fullscreen.autohide") {
@import "overlap";
}
}
@include Option("userChrome.fullscreen.show_bookmarkbar") {
@import "show_bookmarkbar";
}

View File

@ -0,0 +1,5 @@
/** Context Menu - Icons ******************************************************/
@import "context_menu/tab_toolbar.scss";
@import "context_menu/content_area.scss";
@import "context_menu/place";
@import "context_menu/others";

View File

@ -0,0 +1,277 @@
/** Global Menu ***************************************************************/
/*= menu_FilePopup ===========================================================*/
#menu_newNavigatorTab {
--menuitem-image: url("chrome://browser/skin/new-tab.svg");
}
#menu_newUserContext {
}
#menu_newNavigator {
--menuitem-image: url("chrome://browser/skin/window.svg");
}
#menu_newPrivateWindow {
--menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
}
#menu_newFissionWindow {
}
#menu_newNonFissionWindow {
}
#menu_openLocation {
}
#menu_openFile {
--menuitem-image: url("chrome://browser/skin/open.svg");
}
#menu_close {
}
#menu_closeWindow {
}
#menu_savePage {
--menuitem-image: url("chrome://browser/skin/save.svg");
}
#menu_sendLink {
--menuitem-image: url("chrome://browser/skin/mail.svg");
}
#menu_printPreview {
}
#menu_print {
--menuitem-image: url("chrome://global/skin/icons/print.svg");
}
#menu_importFromAnotherBrowser {
--menuitem-image: url("chrome://browser/skin/import.svg");
}
#goOfflineMenuitem {
}
#menu_FileQuitItem {
--menuitem-image: url("../icons/quit.svg");
}
/* Mange Containers */
#menu_newUserContext menupopup menuitem:last-child {
--menuitem-image: url("chrome://global/skin/icons/settings.svg");
}
/*= menu_EditPopup ===========================================================*/
#menu_undo {
--menuitem-image: url("../icons/undo.svg");
}
#menu_redo {
}
#menu_cut {
--menuitem-image: url("chrome://browser/skin/edit-cut.svg");
}
#menu_copy {
--menuitem-image: url("../icons/edit-copy.svg");
}
#menu_paste {
--menuitem-image: url("chrome://browser/skin/edit-paste.svg");
}
#menu_delete {
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
#menu_selectAll {
--menuitem-image: url("../icons/select-all-on.svg");
}
#menu_find {
--menuitem-image: url("chrome://global/skin/icons/search-glass.svg");
}
#menu_findAgain {
}
#textfieldDirection-swap {
}
#menu_preferences {
--menuitem-image: url("chrome://global/skin/icons/settings.svg");
}
/*= menu_viewPopup ===========================================================*/
#viewToolbarsMenu {
--menuitem-image: url("../icons/toolbar.svg");
}
#viewSidebarMenuMenu {
--menuitem-image: url("chrome://browser/skin/sidebars.svg");
}
#viewFullZoomMenu {
--menuitem-image: url("../icons/screenshot.svg");
}
#pageStyleMenu {
--menuitem-image: url("../icons/document-css.svg");
}
#repair-text-encoding {
--menuitem-image: url("chrome://browser/skin/characterEncoding.svg");
}
#fullScreenItem {
--menuitem-image: url("chrome://browser/skin/fullscreen.svg");
}
#menu_readerModeItem {
--menuitem-image: url("chrome://browser/skin/reader-mode.svg");
}
#menu_showAllTabs {
}
#documentDirection-swap {
--menuitem-image: url("../icons/text-direction-horizontal-ltr.svg");
}
/* view-menu-popup sub menu */
#menu_customizeToolbars {
--menuitem-image: url("chrome://browser/skin/customize.svg");
}
/* viewFullZoomMenu sub menu */
#menu_zoomEnlarge {
--menuitem-image: url("chrome://browser/skin/add-circle-fill.svg");
}
#menu_zoomReduce {
--menuitem-image: url("chrome://browser/skin/subtract-circle-fill.svg");
}
#menu_zoomReset {
--menuitem-image: url("../icons/resize.svg");
}
/*= goPopup ==================================================================*/
#menu_showAllHistory {
--menuitem-image: url("chrome://browser/skin/history.svg");
}
#sanitizeItem {
--menuitem-image: url("chrome://browser/skin/forget.svg");
}
#sync-tabs-menuitem {
--menuitem-image: url("chrome://browser/skin/sync.svg");
}
#historyRestoreLastSession {
--menuitem-image: url("../icons/restore-session.svg");
}
#hiddenTabsMenu {
}
#historyUndoMenu {
--menuitem-image: url("chrome://browser/skin/tab.svg");
}
#historyUndoWindowMenu {
--menuitem-image: url("chrome://browser/skin/window.svg");
}
/* sub menu */
#historyUndoPopup .restoreallitem {
--menuitem-image: url("../icons/movetowindow-16.svg");
}
#historyUndoWindowPopup .restoreallitem {
--menuitem-image: url("../icons/restore-session.svg");
}
/*= bookmarksMenuPopup =======================================================*/
#bookmarksShowAll {
--menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
}
#menu_bookmarkThisPage,
#menu_bookmarkAllTabs {
--menuitem-image: url("chrome://browser/skin/bookmark-hollow.svg");
}
#menu_bookmarkThisPage[data-l10n-id="menu-bookmark-edit"] {
--menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
#bookmarksToolbarFolderMenu {
}
#menu_unsortedBookmarks {
}
#menu_mobileBookmarks {
}
/*= menu_ToolsPopup ==========================================================*/
#menu_openDownloads {
--menuitem-image: url("chrome://browser/skin/downloads/downloads.svg");
}
#menu_openAddons {
--menuitem-image: url("chrome://mozapps/skin/extensions/extension.svg");
}
#sync-setup {
--menuitem-image: url("chrome://browser/skin/fxa/avatar-empty.svg");
}
#sync-enable {
}
#sync-unverifieditem {
}
#sync-syncnowitem {
--menuitem-image: url("chrome://browser/skin/sync.svg");
}
#sync-reauthitem {
}
#webDeveloperMenu, /* Legacy */
#browserToolsMenu {
--menuitem-image: url("../icons/developer.svg");
}
#menu_pageInfo {
--menuitem-image: url("../icons/document-endnote.svg");
}
/* menuWebDeveloperPopup sub menu */
#enableDeveloperTools {
}
#menu_devToolbox {
}
#menu_taskManager {
--menuitem-image: url("../icons/performance.svg");
}
#menu_devtools_remotedebugging {
--menuitem-image: url("../icons/bug.svg");
}
#menu_browserToolbox {
--menuitem-image: url("../icons/window-dev-tools.svg");
}
#menu_browserContentToolbox {
--menuitem-image: url("../icons/command-frames.svg");
}
#menu_browserConsole {
--menuitem-image: url("chrome://devtools/skin/images/command-console.svg");
}
#menu_responsiveUI {
}
#menu_eyedropper {
}
#menu_pageSource {
--menuitem-image: url("../icons/document-search.svg");
}
#extensionsForDevelopers {
--menuitem-image: url("chrome://devtools/skin/images/debugging-addons.svg");
}
/*= menu_HelpPopup ===========================================================*/
#menu_openHelp {
--menuitem-image: url("chrome://global/skin/icons/help.svg");
}
#feedbackPage {
--menuitem-image: url("../icons/send.svg");
}
#helpSafeMode {
--menuitem-image: url("chrome://devtools/skin/images/debugging-workers.svg");
}
#troubleShooting {
--menuitem-image: url("chrome://global/skin/icons/more.svg");
}
#help_reportSiteIssue {
--menuitem-image: url("chrome://global/skin/icons/lightbulb.svg");
}
#menu_HelpPopup_reportPhishingtoolmenu {
--menuitem-image: url("chrome://global/skin/icons/warning.svg");
}
#menu_HelpPopup_reportPhishingErrortoolmenu {
}
#aboutName {
--menuitem-image: url("chrome://global/skin/icons/info.svg");
}
#helpPolicySupport {
}

View File

@ -0,0 +1,22 @@
/*= main-menubar =============================================================*/
#file-menu {
--menuitem-image: url("../icons/mail-inbox-all.svg");
}
#edit-menu {
--menuitem-image: url("chrome://global/skin/icons/edit.svg");
}
#view-menu {
--menuitem-image: url("../icons/content-view.svg");
}
#history-menu {
--menuitem-image: url("chrome://browser/skin/history.svg");
}
#bookmarksMenu {
--menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
#tools-menu {
--menuitem-image: url("../icons/toolbox.svg");
}
#helpMenu {
--menuitem-image: url("chrome://global/skin/icons/help.svg");
}

View File

@ -0,0 +1,93 @@
/*= Bookmark Menu - Layout ===================================================*/
/* #goPopup(Legacy of historyMenuPoup), #historyMenuPopup, #bookmarksMenuPopup: looks like global menu
* #BMB_bookmarksPopup: looks like arrow panel
*/
/* Empty Menu */
menupopup menupopup[emptyplacesresult] .menu-text,
#PersonalToolbar menupopup[emptyplacesresult] .menu-text {
margin-inline-start: 0 !important;
}
/* Bookmark Popup - As Arrow Panel */
#BMB_bookmarksPopup,
#PersonalToolbar {
--context-menu-background-padding: var(--arrowpanel-menuitem-padding-inline);
}
/* Windows 7, 8 */
@include OS($win7, $win8) {
/* Global Menu */
menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item {
padding-inline-start: 0 !important;
}
/* Bookmark Popup - None icon menu */
#BMB_bookmarksPopup,
#PersonalToolbar {
--arrowpanel-menuicon-padding: 9px;
}
menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic),
#PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
#PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
}
menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) {
padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding) + 2px) !important;
}
#PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
#PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
padding-inline-start: var(--arrowpanel-menuicon-padding) !important;
}
}
/* Windows */
@include OS($win10) {
/* Bookmark Popup - None icon menu */
menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic),
#PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
#PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding)) !important;
background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
}
}
/* Linux */
@include OS($linux) {
/* Global Menu */
menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item {
padding-inline-start: var(--context-menu-background-padding) !important;
}
/* Bookmark Popup - Iconic menu */
#BMB_bookmarksPopup .menu-iconic-text,
#PersonalToolbar menupopup[placespopup="true"] .bookmark-item .menu-iconic-text {
padding-inline-start: 1px !important;
}
/* Bookmark Popup - None icon menu */
menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic),
#PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
#PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 1px) !important;
}
}
@include OS($mac) {
/* Bookmark Popup - As Arrow Panel */
#PersonalToolbar menupopup menuitem,
#PersonalToolbar menupopup menu {
padding-inline: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding-inline)) !important;
}
/* Bookmark Popup - None icon menu */
menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) {
padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 3px) !important;
}
}

View File

@ -0,0 +1,209 @@
menupopup menuitem:not([type="checkbox"], [type="radio"]),
menupopup menu:not([type="checkbox"], [type="radio"]),
#main-menubar > menu {
-moz-appearance: none !important; /* Linux: menulist */
}
/* Icon */
:not(menu, #ContentSelectDropdown)
> menupopup
> menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
:not(menu, #ContentSelectDropdown)
> menupopup
> menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
#main-menubar > menu,
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
.openintabs-menuitem,
#blockedPopupDontShowMessage {
/* Color */
-moz-context-properties: fill, fill-opacity !important;
fill: currentColor !important;
/* Layout */
background-size: 16px !important;
background-repeat: no-repeat !important;
background-image: var(--menuitem-image);
}
/* For native context menus on macOS */
@supports -moz-bool-pref("widget.macos.native-context-menus") {
:not(menu, #ContentSelectDropdown)
> menupopup
> menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist),
:not(menu, #ContentSelectDropdown)
> menupopup
> menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist) {
list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important;
}
}
/* Padding */
:root {
--context-menu-background-padding-default: 5px;
--context-menu-background-padding: var(--context-menu-background-padding-default);
}
:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic),
:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic),
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item),
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
.openintabs-menuitem,
#blockedPopupDontShowMessage {
background-position: left var(--context-menu-background-padding) center !important;
padding-inline-start: var(--context-menu-background-padding) !important;
}
/* Menubar */
@include Option("userChrome.icon.global_menubar") {
#main-menubar > menu {
background-position: left var(--context-menu-background-padding-default) center !important;
padding-inline-start: calc(16px + var(--context-menu-background-padding-default)) !important;
padding-inline-end: 3px;
}
#main-menubar > menu:first-child {
background-position: left calc(3px + var(--context-menu-background-padding-default)) center !important;
padding-inline-start: calc(19px + var(--context-menu-background-padding-default)) !important;
}
#main-menubar > menu > menupopup {
--menuitem-image: none; /* Prevent Image Inheritance */
}
@include NotOption("userChrome.padding.global_menubar") {
#main-menubar > menu {
padding-block: 2px !important;;
}
}
}
/* Padding - Windows */
@include OS($win) {
/* Checkbox */
:root {
--context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px);
}
:not(menu, #ContentSelectDropdown, #context-navigation)
> menupopup
> menuitem[type="checkbox"]:not([checked="true"])
> .menu-iconic-left {
padding-inline-start: var(--context-menu-text-padding);
}
}
@include OS($win7) {
:root {
--context-menu-background-padding-default: 2px;
}
}
@include OS($win8) {
:root {
--context-menu-background-padding-default: 3px;
}
}
@include OS($win7, $win8) {
:not(menu, #ContentSelectDropdown, #context-navigation)
> menupopup
> menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist),
:not(menu, #ContentSelectDropdown, #context-navigation)
> menupopup
> menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist),
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item),
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
.openintabs-menuitem,
#blockedPopupDontShowMessage {
background-position: left var(--context-menu-background-padding) center !important;
padding-inline-start: 0 !important;
}
}
@include OS($win10) {
:root {
--context-menu-background-padding: 1em;
--context-menu-text-padding: 24px; /* 16px + 8px */
--menu-background-padding-default: calc(var(--context-menu-background-padding) + var(--context-menu-text-padding));
}
:not(menu, #ContentSelectDropdown, #context-navigation)
> menupopup
> menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist),
:not(menu, #ContentSelectDropdown, #context-navigation)
> menupopup
> menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist),
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item),
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
.openintabs-menuitem,
#blockedPopupDontShowMessage {
padding-inline-start: var(--menu-background-padding-default) !important;
margin-left: 0 !important;
}
}
/* Padding - Linux */
@include OS($linux) {
:root {
--context-menu-background-padding-default: 6px;
}
#main-menubar > menu > .menubar-text {
padding-inline-start: 3px;
}
}
/* Padding - Mac */
@include OS($mac) {
:root {
--context-menu-background-padding-default: 10px;
--context-menu-mac-padding: 21px;
}
/* context menu width */
:not(menu, #ContentSelectDropdown, #context-navigation)
> menupopup
> menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist),
:not(menu, #ContentSelectDropdown, #context-navigation)
> menupopup
> menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist),
#blockedPopupDontShowMessage {
padding-inline-end: var(--context-menu-background-padding) !important;
}
/* text position */
:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem > .menu-text,
:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu > menu-text {
padding-inline-start: var(--context-menu-mac-padding) !important;
}
/* Checkbox menuitem, None iconic menu */
:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem[type="checkbox"],
:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic) {
padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important;
}
/* Global Menu */
/* Disabled. some icons not appear
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item),
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) {
list-style-image: var(--menuitem-image, url("../icons/blank.svg"));
}
*/
}

View File

@ -0,0 +1,99 @@
/*= Padding ==================================================================*/
:root {
--arrowpanel-menuicon-padding: 8px;
--arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-padding) * 2 + var(var(--arrowpanel-menuitem-padding-inline))) !important;
--arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding-inline) - 2px) !important;
--arrowpanel-menuimageblank-padding-block: calc(var(--arrowpanel-menuitem-padding-block) - 2px) !important;
}
.subviewbutton > .toolbarbutton-icon {
width: 16px;
}
@include Option("userChrome.icon.panel_photon", "userChrome.icon.panel_sparse") {
:root {
/* Global */
--arrowpanel-menuicon-paddingx2: calc(var(--arrowpanel-menuicon-padding) * 2);
/* General Panel */
--arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-paddingx2) + 8px) !important;
--arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding-inline) - 2px) !important;
/* Blank Menu Left Padding */
--arrowpanel-menuimageblank-padding-horizontal: calc(
var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding-inline)
);
--arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding-block) + 1px);
}
}
#downloadsHistory .button-text,
.subviewbutton > .toolbarbutton-text {
padding-inline-start: var(--arrowpanel-menuicon-padding) !important;
}
.toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text {
padding-inline-start: 0 !important;
}
#panelMenu_bookmarksMenu .subviewbutton[disabled="true"] .toolbarbutton-text,
#appMenu_historyMenu .subviewbutton[disabled="true"] .toolbarbutton-text {
padding-inline-start: var(--arrowpanel-menublank-padding) !important;
}
#appMenu-proton-update-banner .toolbarbutton-text {
margin-inline-start: 0 !important;
}
#appMenu-multiView .subviewbutton::before,
#appMenu-proton-update-banner::before {
display: -moz-inline-box;
margin-inline-end: var(--arrowpanel-menuicon-padding);
width: 16px;
height: 16px;
}
#appMenu-proton-update-banner {
margin-bottom: 2px !important;
}
#appMenu-proton-update-banner::before {
margin-inline-start: var(--arrowpanel-menuitem-padding-inline) !important;
}
#appMenu-fxa-status2,
#appMenu-zoom-controls2 {
align-items: center;
padding-top: var(--arrowpanel-menuimageblank-padding-block) !important;
padding-bottom: var(--arrowpanel-menuimageblank-padding-block) !important;
}
#appMenu-zoom-controls2::before {
margin-inline-end: 0 !important;
}
#appMenu-zoomReduce-button2,
#appMenu-zoomReset-button2,
#appMenu-zoomEnlarge-button2,
#appMenu-fullscreen-button2 {
--arrowpanel-menuitem-padding-block: 0px;
}
.subviewbutton[type="checkbox"]:not([checked="true"]) > .toolbarbutton-text {
margin-left: 16px !important;
}
/* Icons Color */
#appMenu-multiView .subviewbutton::before,
#appMenu-proton-update-banner::before,
#downloadsHistory .button-icon,
.subviewbutton > image {
fill: currentColor !important;
fill-opacity: var(--toolbarbutton-icon-fill-opacity) !important;
-moz-context-properties: fill !important;
}
#appMenu-zoomReduce-button2 > .toolbarbutton-icon,
#appMenu-zoomEnlarge-button2 > .toolbarbutton-icon {
stroke: var(--zoom-controls-bgcolor, var(--button-bgcolor, ButtonFace)) !important;
-moz-context-properties: fill, stroke !important;
}
#appMenu-zoomReduce-button2:not([disabled], [open], :active):is(:hover) > .toolbarbutton-icon,
#appMenu-zoomEnlarge-button2:not([disabled], [open], :active):is(:hover) > .toolbarbutton-icon {
stroke: var(--button-hover-bgcolor) !important;
}
.subviewbutton[disabled="true"] > image {
/* Ghost icons when disabled */
opacity: 0.4;
}

View File

@ -0,0 +1,66 @@
/*= organizeButtonPopup ======================================================*/
#newbookmark {
--menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
#newfolder {
--menuitem-image: url("chrome://global/skin/icons/folder.svg");
@include Option("userChrome.icon.library") {
--menuitem-image: url("../icons/folder.svg");
}
}
#newseparator {
--menuitem-image: url("../icons/vertical-line.svg");
}
#orgUndo {
--menuitem-image: url("../icons/undo.svg");
}
#orgRedo {
}
#orgCut {
--menuitem-image: url("chrome://browser/skin/edit-cut.svg");
}
#orgCopy {
--menuitem-image: url("../icons/edit-copy.svg");
}
#orgPaste {
--menuitem-image: url("chrome://browser/skin/edit-paste.svg");
}
#orgDelete {
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
#orgSelectAll {
--menuitem-image: url("../icons/select-all-on.svg");
}
#orgClose {
--menuitem-image: url("chrome://global/skin/icons/close.svg");
}
/*= viewMenuPopup ============================================================*/
#viewColumns {
--menuitem-image: url("chrome://global/skin/icons/columnpicker.svg");
}
#viewSort {
--menuitem-image: url("../icons/text-sort-ascending.svg");
}
/*= maintenanceButtonPopup ===================================================*/
#backupBookmarks {
--menuitem-image: url("chrome://devtools/skin/images/datastore.svg");
}
#fileRestoreMenu {
}
#fileImport {
--menuitem-image: url("chrome://browser/skin/save.svg");
}
#fileExport {
--menuitem-image: url("chrome://browser/skin/open.svg");
}
#browserImport {
--menuitem-image: url("chrome://browser/skin/import.svg");
}

View File

@ -0,0 +1,460 @@
/*= Panel - Main =============================================================*/
#appMenu-proton-addon-banners > .addon-banner-item > .toolbarbutton-icon {
display: -moz-inline-box !important;
margin-inline-start: var(--arrowpanel-menuicon-padding);
-moz-box-ordinal-group: 0 !important;
}
#appMenu-proton-update-banner::before {
content: url("../icons/whatsnew.svg");
}
#appMenu-fxa-status2::before {
/* Don't exist img tag */
content: url("chrome://browser/skin/fxa/avatar-empty.svg");
}
#appMenu-fxa-status2:is([fxastatus="signedin"], [fxastatus="unverified"], [fxastatus="login-failed"])::before {
display: none;
}
#appMenu-fxa-status2:is([fxastatus="signedin"], [fxastatus="unverified"], [fxastatus="login-failed"])
#appMenu-fxa-label2::before {
/* url("https://profile.accounts.firefox.com/v1/avatar/a") */
content: "";
border-radius: 50% !important;
background-size: 16px !important;
background-image: var(--avatar-image-url) !important;
}
@include Option("userChrome.icon.panel_full", "userChrome.icon.panel_photon") {
#appMenu-new-tab-button2 {
list-style-image: url("chrome://browser/skin/new-tab.svg");
}
}
@include Option("userChrome.icon.panel_photon") {
#appMenu-save-file-button2,
#appMenu-find-button2,
#appMenu-more-button2 {
padding-top: var(--arrowpanel-menuitemblank-padding) !important;
padding-bottom: var(--arrowpanel-menuitemblank-padding) !important;
}
#appMenu-zoom-controls2 {
padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
}
}
@include Option("userChrome.icon.panel_sparse") {
#appMenu-new-tab-button2, /* Seperate */
#appMenu-passwords-button, /* Seperate */
#appMenu-extensions-themes-button,
#appMenu-save-file-button2, /* Seperate */
#appMenu-find-button2,
#appMenu-more-button2, /* Seperate */
#appMenu-help-button2,
#appMenu-quit-button2 /* Seperate */ {
padding-top: var(--arrowpanel-menuitemblank-padding-block) !important;
padding-bottom: var(--arrowpanel-menuitemblank-padding-block) !important;
}
#appMenu-zoom-controls2 {
padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
}
}
#appMenu-new-window-button2 {
list-style-image: url("chrome://browser/skin/window.svg");
}
#appMenu-new-private-window-button2 {
list-style-image: url("chrome://browser/skin/privateBrowsing.svg");
}
#appMenu-bookmarks-button {
list-style-image: url("chrome://browser/skin/bookmark.svg");
}
#appMenu-history-button {
list-style-image: url("chrome://browser/skin/history.svg");
}
#appMenu-downloads-button {
list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
}
@include Option("userChrome.icon.panel_full", "userChrome.icon.panel_photon") {
#appMenu-passwords-button {
list-style-image: url("chrome://browser/skin/login.svg");
}
#appMenu-extensions-themes-button {
list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
}
}
#appMenu-print-button2 {
list-style-image: url("chrome://global/skin/icons/print.svg");
}
@include Option("userChrome.icon.panel_full") {
#appMenu-save-file-button2 {
list-style-image: url("chrome://browser/skin/save.svg");
}
#appMenu-find-button2 {
list-style-image: url("chrome://global/skin/icons/search-glass.svg");
}
#appMenu-zoom-controls2::before {
content: url("../icons/screenshot.svg");
}
}
#appMenu-settings-button {
list-style-image: url("chrome://global/skin/icons/settings.svg");
}
@include Option("userChrome.icon.panel_full") {
#appMenu-more-button2 {
list-style-image: url("chrome://browser/skin/ion.svg");
}
}
@include Option("userChrome.icon.panel_full", "userChrome.icon.panel_photon") {
#appMenu-help-button2 {
list-style-image: url("chrome://global/skin/icons/help.svg");
}
#appMenu-quit-button2 {
list-style-image: url("../icons/quit.svg");
}
}
/*= Panel - Account ==========================================================*/
#PanelUI-fxa-menu-connect-device-button .toolbarbutton-icon,
#PanelUI-fxa-menu-account-signout-button .toolbarbutton-icon {
width: 16px !important;
height: 16px !important;
}
/* Default */
#fxa-manage-account-button::before {
content: "";
display: -moz-inline-box;
width: 32px !important;
height: 32px !important;
border-radius: 50%;
background-size: 32px;
background-image: var(--avatar-image-url);
margin-inline-end: var(--arrowpanel-menuicon-padding);
@include Option("userChrome.icon.account_image_to_right") {
-moz-box-ordinal-group: 2 !important;
}
}
@include Option("userChrome.icon.account_label_to_right") {
#fxa-menu-header-title, #fxa-menu-header-description {
text-align: right;
}
}
.syncNowBtn {
visibility: visible !important;
-moz-box-ordinal-group: 1 !important;
margin-inline-end: var(--arrowpanel-menuicon-padding);
}
#PanelUI-fxa-menu-setup-sync-button {
list-style-image: url("chrome://browser/skin/sync.svg");
}
#PanelUI-fxa-menu-connect-device-button {
list-style-image: url("chrome://browser/skin/fxa/add-device.svg");
}
#PanelUI-fxa-menu-sendtab-button {
list-style-image: url("../icons/send-to-device.svg");
}
#PanelUI-fxa-menu-sync-prefs-button {
list-style-image: url("chrome://global/skin/icons/settings.svg");
}
#PanelUI-fxa-menu-account-signout-button {
list-style-image: url("../icons/sign-out.svg");
}
#PanelUI-remotetabs-view-managedevices::before {
/* Box */
content: "";
padding-inline-end: 16px;
padding-block: 1px;
margin-inline-end: var(--arrowpanel-menuicon-padding);
/* Color */
fill: currentColor;
fill-opacity: var(--toolbarbutton-icon-fill-opacity);
-moz-context-properties: fill;
background-size: 16px;
background-repeat: no-repeat;
background-position: left center;
background-image: url("chrome://global/skin/icons/settings.svg");
}
.PanelUI-remotetabs-notabsforclient-label {
margin-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding-inline)) !important;
padding-inline-start: var(--arrowpanel-menublank-padding) !important;
}
/* Change Separator */
#PanelUI-fxa-menu::before {
content: "";
display: -moz-box;
border-bottom: 1px solid var(--panel-separator-color);
margin: var(--panel-separator-margin);
padding: 0;
}
#PanelUI-fxa-menu > :first-child {
-moz-box-ordinal-group: 0;
}
#PanelUI-sign-out-separator {
display: none;
}
.pageAction-sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target[clientType=""], /* Legacy */
.sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target[clientType=""] {
list-style-image: url("../icons/send-to-device.svg");
}
.pageAction-sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target:not([clientType]), /* Legacy */
.sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target:not([clientType]) {
list-style-image: url("chrome://global/skin/icons/settings.svg");
}
/*= Panel - Bookmark =========================================================*/
#panelMenuBookmarkThisPage {
list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
}
panelMenuBookmarkThisPage[starred] {
list-style-image: url("chrome://browser/skin/bookmark.svg");
}
#panelMenu_searchBookmarks {
list-style-image: url("chrome://global/skin/icons/search-glass.svg");
}
#panelMenu_viewBookmarksToolbar {
list-style-image: url("chrome://browser/skin/bookmarks-toolbar.svg");
}
#panelMenu_showAllBookmarks {
list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
}
/*= Panel - History ==========================================================*/
#appMenuRecentlyClosedTabs {
list-style-image: url("chrome://browser/skin/tab.svg");
}
#appMenuRecentlyClosedWindows {
list-style-image: url("chrome://browser/skin/window.svg");
}
#appMenuRestoreSession {
list-style-image: url("../icons/restore-session.svg");
}
#appMenuClearRecentHistory {
list-style-image: url("chrome://browser/skin/forget.svg");
}
#PanelUI-historyMore {
list-style-image: url("chrome://browser/skin/history.svg");
}
#appMenu-library-recentlyClosedTabs {
list-style-image: url("../icons/movetowindow-16.svg");
}
#appMenu-library-recentlyClosedWindows {
list-style-image: url("../icons/restore-session.svg");
}
/*= Panel - More tools =======================================================*/
#appmenu-moreTools-button {
list-style-image: url("chrome://browser/skin/customize.svg");
}
/* Web Developer Tools */
#appmenu-developer-tools-view .subviewbutton:nth-child(1),
#PanelUI-developer-tools-view .subviewbutton:nth-child(1) {
list-style-image: url("../icons/developer.svg");
}
/* Task Manager */
#appmenu-developer-tools-view .subviewbutton:nth-child(2),
#PanelUI-developer-tools-view .subviewbutton:nth-child(2) {
list-style-image: url("../icons/performance.svg");
}
/* Remote Debugging - Edge bug.svg */
#appmenu-developer-tools-view .subviewbutton:nth-child(3),
#PanelUI-developer-tools-view .subviewbutton:nth-child(3) {
list-style-image: url("../icons/bug.svg");
}
/* Browser Toolbox - Edge webdeveloper.svg */
#appmenu-developer-tools-view .subviewbutton:nth-child(4),
#PanelUI-developer-tools-view .subviewbutton:nth-child(4) {
list-style-image: url("../icons/window-dev-tools.svg");
}
/* Browser Content Toolbaox - */
#appmenu-developer-tools-view .subviewbutton:nth-child(5),
#PanelUI-developer-tools-view .subviewbutton:nth-child(5) {
list-style-image: url("../icons/command-frames.svg");
}
/* Browser Console */
#appmenu-developer-tools-view .subviewbutton:nth-last-child(5),
#PanelUI-developer-tools-view .subviewbutton:nth-last-child(5) {
list-style-image: url("chrome://devtools/skin/images/command-console.svg");
}
/* Responsive Design Mode */
#appmenu-developer-tools-view .subviewbutton:nth-last-child(4),
#PanelUI-developer-tools-view .subviewbutton:nth-last-child(4) {
list-style-image: url("../icons/command-responsivemode.svg");
}
/* Eyedropper */
#appmenu-developer-tools-view .subviewbutton:nth-last-child(3),
#PanelUI-developer-tools-view .subviewbutton:nth-last-child(3) {
list-style-image: url("chrome://devtools/skin/images/command-eyedropper.svg");
}
/* Page Source - Edge file-search.svg */
#appmenu-developer-tools-view .subviewbutton:nth-last-child(2),
#PanelUI-developer-tools-view .subviewbutton:nth-last-child(2) {
list-style-image: url("../icons/document-search.svg");
}
/* Extensions for Devel */
#appmenu-developer-tools-view .subviewbutton:nth-last-child(1),
#PanelUI-developer-tools-view .subviewbutton:nth-last-child(1) {
list-style-image: url("chrome://devtools/skin/images/debugging-addons.svg");
}
#appmenu-developer-tools-view .subviewbutton:last-child {
margin-bottom: 6px !important;
}
/*= Panel - Help =============================================================*/
#appMenu_menu_openHelp {
list-style-image: url("chrome://global/skin/icons/help.svg");
}
#appMenu_feedbackPage {
list-style-image: url("../icons/send.svg");
}
#appMenu_helpSafeMode {
list-style-image: url("chrome://devtools/skin/images/debugging-workers.svg");
}
#appMenu_troubleShooting {
list-style-image: url("chrome://global/skin/icons/more.svg");
}
#appMenu_help_reportSiteIssue {
list-style-image: url("chrome://global/skin/icons/lightbulb.svg");
}
#appMenu_menu_HelpPopup_reportPhishingtoolmenu {
list-style-image: url("chrome://global/skin/icons/warning.svg");
}
#appMenu_aboutName {
list-style-image: url("chrome://global/skin/icons/info.svg");
}
/*= Panel - Library ==========================================================*/
#appMenu-library-bookmarks-button {
list-style-image: url("chrome://browser/skin/bookmark.svg");
}
#appMenu-library-history-button {
list-style-image: url("chrome://browser/skin/history.svg");
}
#appMenu-library-downloads-button {
list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
}
/*= Panel - Downloads ========================================================*/
#downloadsHistory {
list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
}
#downloadsHistory .box-inherit.button-box {
display: -moz-inline-box !important;
}
/*= Toolbar - Overflow Menu ==================================================*/
#overflowMenu-customize-button {
list-style-image: url("chrome://browser/skin/customize.svg");
}
/*= Tabbar - All Tab Menu ====================================================*/
#allTabsMenu-undoCloseTab {
list-style-image: url("../icons/undo.svg");
}
#allTabsMenu-searchTabs {
list-style-image: url("chrome://global/skin/icons/search-glass.svg");
}
#allTabsMenu-containerTabsButton {
list-style-image: url("../icons/container-openin-16.svg");
}
#allTabsMenu-hiddenTabsButton {
list-style-image: url("../icons/password-hide.svg");
}
#allTabsMenu-containerTabsView .subviewbutton:last-child {
list-style-image: url("chrome://global/skin/icons/settings.svg");
}
/*= BMB_bookmarksPopup =======================================================*/
#BMB_viewBookmarksSidebar {
}
#BMB_bookmarksShowAllTop,
#BMB_bookmarksShowAll {
--menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
}
#BMB_bookmarksToolbar {
--menuitem-image: url("chrome://browser/skin/bookmarks-toolbar.svg");
}
@include OS($mac) {
#BMB_bookmarksShowAllTop {
list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg") !important;
}
#BMB_bookmarksShowAllTop > .menu-iconic-left {
display: -moz-box !important;
}
}
/*= protections-popup ========================================================*/
#protections-popup-settings-button > .protections-popup-settings-icon,
#protections-popup-show-report-button > .protections-popup-show-report-icon {
-moz-context-properties: fill;
fill: currentColor;
margin-inline-end: 1em;
}
#protections-popup-settings-button > .protections-popup-settings-icon,
#protections-popup-multiView .panel-subview-footer-button {
list-style-image: url("chrome://global/skin/icons/settings.svg");
}
#protections-popup-show-report-button > .protections-popup-show-report-icon {
/* chrome://browser/skin/controlcenter/dashboard.svg */
list-style-image: url("../icons/dashboard.svg");
}
/*= identity-popup ===========================================================*/
#identity-popup-clear-sitedata-button,
#identity-popup-more-info {
padding-inline: 5px !important;
}
#identity-popup-securityView-body {
margin-inline-start: 32px !important; /* Original: 10px */
}
#identity-popup-clear-sitedata-button {
list-style-image: url("../icons/broom.svg");
}
/*= sidebarMenu-popup ========================================================*/
#identity-popup-more-info {
list-style-image: url("chrome://global/skin/icons/info.svg");
}
#sidebar-switcher-bookmarks {
list-style-image: url("chrome://browser/skin/bookmark.svg");
}
#sidebar-switcher-history {
list-style-image: url("chrome://browser/skin/history.svg");
}
#sidebar-switcher-tabs {
list-style-image: url("chrome://browser/skin/tab.svg");
}
#sidebar-reverse-position {
list-style-image: url("chrome://browser/skin/sidebars-right.svg");
}
#sidebar-box[positionend="true"] #sidebar-reverse-position {
/* Can't apply this. shadow dom */
list-style-image: url("chrome://browser/skin/sidebars.svg");
}
#sidebarMenu-popup > .subviewbutton[data-l10n-id="sidebar-menu-close"] {
list-style-image: url("chrome://global/skin/icons/close.svg");
}

View File

@ -0,0 +1,23 @@
@include Option("userChrome.icon.panel") {
#appMenuNewIdentity{
list-style-image: url("chrome://browser/skin/new_identity.svg");
}
#appMenuNewCircuit {
list-style-image: url("chrome://browser/skin/new_circuit.svg");
}
#appMenu_torBrowserUserManual {
list-style-image: url("chrome://browser/skin/onion.svg");
}
}
@include Option("userChrome.icon.menu") {
#menu_newIdentity {
--menuitem-image: url("chrome://browser/skin/new_identity.svg");
}
#menu_newCircuit {
--menuitem-image: url("chrome://browser/skin/new_circuit.svg");
}
#torBrowserUserManual {
--menuitem-image: url("chrome://browser/skin/onion.svg");
}
}

View File

@ -0,0 +1,14 @@
@include Option("userChrome.icon.panel") {
#appMenu-restart-button {
list-style-image: url("../icons/refresh-cw.svg") !important;
}
}
@include Option("userChrome.icon.menu") {
#menu_FileRestartItem {
--menuitem-image: url("../icons/refresh-cw.svg");
}
menuitem.privatetab-icon {
--menuitem-image: url("../icons/private-favicon.svg");
}
}

View File

@ -0,0 +1,259 @@
/*= contentAreaContextMenu ===================================================*/
#context-viewsource-goToLine {
--menuitem-image: url("../icons/text-number-format.svg");
}
#context-viewsource-wrapLongLines {
/* checkbox */
/* --menuitem-image: url("../icons/arrow-sort-down-lines.svg"); */
}
#context-viewsource-highlightSyntax {
/* checkbox */
/* --menuitem-image: url("../icons/code.svg"); */
}
#spell-no-suggestions {
--menuitem-image: url("../icons/text-proofing-tools.svg");
}
#spell-add-to-dictionary {
--menuitem-image: url("../icons/book-add.svg");
}
#spell-undo-add-to-dictionary {
--menuitem-image: url("../icons/undo.svg");
}
#context-openlinkincurrent {
--menuitem-image: url("../icons/link-square.svg");
}
#context-openlinkincontainertab {
--menuitem-image: url("chrome://browser/skin/new-tab.svg");
}
#context-openlinkintab {
--menuitem-image: url("chrome://browser/skin/new-tab.svg");
}
#context-openlinkinusercontext-menu {
--menuitem-image: url("../icons/container-openin-16.svg");
}
#context-openlink {
--menuitem-image: url("chrome://browser/skin/window.svg");
}
#context-openlinkprivate {
--menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
}
#context-bookmarklink {
--menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
#context-savelink {
--menuitem-image: url("chrome://browser/skin/save.svg");
}
#context-savelinktopocket {
--menuitem-image: url("../icons/pocket-outline.svg");
}
#context-copyemail {
--menuitem-image: url("chrome://browser/skin/mail.svg");
}
#context-copylink {
--menuitem-image: url("../icons/link.svg");
}
#context-sendlinktodevice {
--menuitem-image: url("../icons/send-to-device.svg");
}
#context-media-play {
--menuitem-image: url("chrome://global/skin/media/play-fill.svg");
}
#context-media-pause {
--menuitem-image: url("chrome://global/skin/media/pause-fill.svg");
}
#context-media-mute {
--menuitem-image: url("chrome://global/skin/media/audio-muted.svg");
}
#context-media-unmute {
--menuitem-image: url("chrome://global/skin/media/audio.svg");
}
#context-media-playbackrate {
--menuitem-image: url("../icons/time-picker.svg");
}
#context-media-loop {
/* checkbox */
/* --menuitem-image: url("../icons/arrow-repeat-all.svg"); */
}
#context-leave-dom-fullscreen {
--menuitem-image: url("chrome://global/skin/media/fullscreenExitButton.svg");
}
#context-video-fullscreen {
--menuitem-image: url("chrome://global/skin/media/fullscreenEnterButton.svg");
}
#context-media-hidecontrols {
--menuitem-image: url("../icons/eye-hide.svg");
}
#context-media-showcontrols {
--menuitem-image: url("../icons/eye-show.svg");
}
#context-viewvideo {
--menuitem-image: url("../icons/video.svg");
}
#context-video-pictureinpicture {
/* checkbox */
/* --menuitem-image: url("chrome://global/skin/media/picture-in-picture-open.svg"); */
}
#context-reloadimage {
--menuitem-image: url("../icons/image-arrow-counterclockwise.svg");
}
#context-viewimage {
--menuitem-image: url("../icons/image-add.svg");
}
#context-saveimage {
--menuitem-image: url("../icons/image.svg");
}
#context-video-saveimage {
--menuitem-image: url("../icons/video-snapshot.svg");
}
#context-savevideo {
--menuitem-image: url("../icons/video.svg");
}
#context-saveaudio {
--menuitem-image: url("chrome://global/skin/media/audio.svg");
}
#context-copyimage-contents {
--menuitem-image: url("../icons/image-copy.svg");
}
#context-copyimage,
#context-copyvideourl,
#context-copyaudiourl {
--menuitem-image: url("../icons/link.svg");
}
#context-sendimage,
#context-sendvideo,
#context-sendaudio {
--menuitem-image: url("chrome://browser/skin/mail.svg");
}
#context-viewimageinfo {
--menuitem-image: url("chrome://global/skin/icons/info.svg");
}
#context-viewimagedesc {
--menuitem-image: url("../icons/image-alt-text.svg");
}
#context-setDesktopBackground {
--menuitem-image: url("../icons/resize-image.svg");
}
#context-ctp-play {
--menuitem-image: url("chrome://global/skin/icons/plugin.svg");
}
#context-ctp-hide {
--menuitem-image: url("chrome://global/skin/icons/plugin-blocked.svg");
}
#context-savepage {
--menuitem-image: url("chrome://browser/skin/save.svg");
}
#context-pocket {
--menuitem-image: url("../icons/pocket-outline.svg");
}
#context-sendpagetodevice {
--menuitem-image: url("../icons/send-to-device.svg");
}
#fill-login {
--menuitem-image: url("../icons/password.svg");
}
#fill-login-generated-password {
--menuitem-image: url("chrome://browser/skin/login.svg");
}
#manage-saved-logins {
--menuitem-image: url("../icons/key-multiple.svg");
}
#context-undo {
--menuitem-image: url("../icons/undo.svg");
}
#context-redo {
}
#context-cut {
--menuitem-image: url("chrome://browser/skin/edit-cut.svg");
}
#context-copy {
--menuitem-image: url("../icons/edit-copy.svg");
}
#context-paste {
--menuitem-image: url("chrome://browser/skin/edit-paste.svg");
}
#context-delete {
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
#context-selectall {
--menuitem-image: url("../icons/select-all-on.svg");
}
#context-print-selection {
--menuitem-image: url("chrome://global/skin/icons/print.svg");
}
#context-take-screenshot {
--menuitem-image: url("chrome://browser/skin/screenshot.svg");
}
#context-keywordfield {
--menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
#context-searchselect,
#context-searchselect-private {
--menuitem-image: url("chrome://global/skin/icons/search-glass.svg");
}
#frame {
--menuitem-image: url("../icons/command-frames.svg");
}
#spell-check-enabled {
/* checkbox */
}
#spell-add-dictionaries-main {
--menuitem-image: url("../icons/book-add.svg");
}
#spell-dictionaries {
--menuitem-image: url("../icons/book.svg");
}
#context-bidi-text-direction-toggle {
--menuitem-image: url("../icons/text-direction-horizontal-ltr.svg");
}
#context-bidi-page-direction-toggle {
--menuitem-image: url("../icons/document-landscape-split-hint.svg");
}
#context-viewpartialsource-selection,
#context-viewsource {
--menuitem-image: url("../icons/document-search.svg");
}
#context-inspect-a11y {
--menuitem-image: url("chrome://devtools/skin/images/tool-accessibility.svg");
}
#context-inspect {
--menuitem-image: url("../icons/command-pick.svg");
}
#context-media-eme-learnmore {
/* iconic */
}
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
#context-back {
--menuitem-image: url("chrome://browser/skin/back.svg");
}
#context-forward {
--menuitem-image: url("chrome://browser/skin/forward.svg");
}
#context-reload {
--menuitem-image: url("../icons/reload.svg");
}
#context-stop {
--menuitem-image: url("chrome://global/skin/icons/close.svg");
}
#context-bookmarkpage {
--menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
}

View File

@ -0,0 +1,248 @@
/*= blockedPopupOptions ======================================================*/
#blockedPopupAllowSite {
--menuitem-image: url("chrome://global/skin/icons/check.svg");
}
#blockedPopupOptions > menuitem[oncommand="gPopupBlockerObserver.editPopupSettings();"] {
--menuitem-image: url("chrome://global/skin/icons/edit.svg");
}
#blockedPopupDontShowMessage {
/* checkbox */
--menuitem-image: url("chrome://global/skin/icons/blocked.svg");
}
/*= autohide-context =========================================================*/
#autohide-context > menuitem[data-l10n-id="full-screen-autohide"] {
/* checkbox */
}
#autohide-context > menuitem[data-l10n-id="full-screen-exit"] {
--menuitem-image: url("chrome://browser/skin/fullscreen-exit.svg");
}
/*= pictureInPictureToggleContextMenu ========================================*/
#pictureInPictureToggleContextMenu > menuitem[oncommand="PictureInPicture.hideToggle();"] {
--menuitem-image: url("../icons/eye-hide.svg");
}
/*= pageActionContextMenu ====================================================*/
.pageActionContextMenuItem.extensionPinned.extensionUnpinned.manageExtensionItem {
--menuitem-image: url("chrome://global/skin/icons/settings.svg");
}
.pageActionContextMenuItem.extensionPinned.extensionUnpinned.removeExtensionItem {
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
/*= customizationPanelItemContextMenu ========================================*/
#customizationPanelItemContextMenuUnpin {
--menuitem-image: url("../icons/unpin-tab.svg");
}
.customize-context-removeFromPanel {
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
/*= customizationPaletteItemContextMenu ======================================*/
.customize-context-addToToolbar {
--menuitem-image: url("chrome://devtools/skin/images/dock-bottom.svg");
}
.customize-context-addToPanel {
--menuitem-image: url("chrome://browser/skin/menu.svg");
}
/*= customizationPanelContextMenu ============================================*/
#customizationPanelContextMenu > menuitem[command="cmd_CustomizeToolbars"] {
--menuitem-image: url("chrome://browser/skin/customize.svg");
}
/*= downloads-button-autohide-panel ==========================================*/
#downloads-button-autohide-checkbox {
/* checkbox */
}
/*= downloadsContextMenu =====================================================*/
.downloadPauseMenuItem {
--menuitem-image: url("chrome://global/skin/media/pause-fill.svg");
}
.downloadResumeMenuItem {
--menuitem-image: url("chrome://global/skin/media/play-fill.svg");
}
.downloadUnblockMenuItem {
--menuitem-image: url("../icons/checkmark-circle.svg");
}
.downloadUseSystemDefaultMenuItem {
--menuitem-image: url("chrome://browser/skin/open.svg");
}
.downloadAlwaysUseSystemDefaultMenuItem {
/* checkbox */
}
.downloadShowMenuItem {
--menuitem-image: url("chrome://global/skin/icons/folder.svg");
@include Option("userChrome.icon.library") {
--menuitem-image: url("../icons/folder.svg");
}
}
#downloadsContextMenu > menuitem[command="downloadsCmd_openReferrer"] {
--menuitem-image: url("../icons/link-square.svg");
}
#downloadsContextMenu > menuitem[command="downloadsCmd_copyLocation"] {
--menuitem-image: url("../icons/link.svg");
}
.downloadDeleteFileMenuItem {
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
.downloadRemoveFromHistoryMenuItem {
--menuitem-image: url("../icons/eraser.svg");
}
#downloadsContextMenu > menuitem[command="downloadsCmd_clearList"],
#downloadsContextMenu > menuitem[command="downloadsCmd_clearDownloads"] {
--menuitem-image: url("../icons/broom.svg");
}
/*= SyncedTabsSidebarContext =================================================*/
#syncedTabsOpenSelected {
--menuitem-image: url("../icons/link-square.svg");
}
#syncedTabsOpenSelectedInTab {
--menuitem-image: url("chrome://browser/skin/new-tab.svg");
}
#syncedTabsOpenSelectedInWindow {
--menuitem-image: url("chrome://browser/skin/window.svg");
}
#syncedTabsOpenSelectedInPrivateWindow {
--menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
}
#syncedTabsBookmarkSelected {
--menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
#syncedTabsCopySelected {
--menuitem-image: url("../icons/link.svg");
}
#syncedTabsOpenAllInTabs {
--menuitem-image: url("../icons/movetowindow-16.svg");
}
#syncedTabsManageDevices {
--menuitem-image: url("chrome://global/skin/icons/settings.svg");
}
#syncedTabsRefresh {
--menuitem-image: url("chrome://browser/skin/sync.svg");
}
/*= SyncedTabsSidebarTabsFilterContext =======================================*/
#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_undo"] {
--menuitem-image: url("../icons/undo.svg");
}
#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_cut"] {
--menuitem-image: url("chrome://browser/skin/edit-cut.svg");
}
#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_copy"] {
--menuitem-image: url("../icons/edit-copy.svg");
}
#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_paste"] {
--menuitem-image: url("chrome://browser/skin/edit-paste.svg");
}
#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_delete"] {
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
#SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_selectAll"] {
--menuitem-image: url("../icons/select-all-on.svg");
}
#syncedTabsRefreshFilter {
--menuitem-image: url("chrome://browser/skin/sync.svg");
}
/*= urlbar-input-container ===================================================*/
#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_undo"] {
--menuitem-image: url("../icons/undo.svg");
}
#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_redo"] {
}
#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_cut"] {
--menuitem-image: url("chrome://browser/skin/edit-cut.svg");
}
#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_copy"] {
--menuitem-image: url("../icons/edit-copy.svg");
}
#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_paste"] {
--menuitem-image: url("chrome://browser/skin/edit-paste.svg");
}
#paste-and-go {
}
#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_delete"] {
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_selectAll"] {
--menuitem-image: url("../icons/select-all-on.svg");
}
/*= textbox-contextmenu ======================================================*/
/* Browser's Searchbar, Libray's Searchbar, Page Info */
.textbox-contextmenu > menuitem[data-l10n-id="text-action-undo"] {
--menuitem-image: url("../icons/undo.svg");
}
.textbox-contextmenu > menuitem[data-l10n-id="text-action-redo"] {
}
.textbox-contextmenu > menuitem[data-l10n-id="text-action-cut"] {
--menuitem-image: url("chrome://browser/skin/edit-cut.svg");
}
.textbox-contextmenu > menuitem[data-l10n-id="text-action-copy"] {
--menuitem-image: url("../icons/edit-copy.svg");
}
.textbox-contextmenu > menuitem[data-l10n-id="text-action-paste"] {
--menuitem-image: url("chrome://browser/skin/edit-paste.svg");
}
.textbox-contextmenu > menuitem[data-l10n-id="text-action-delete"] {
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
.textbox-contextmenu > menuitem[data-l10n-id="text-action-select-all"] {
--menuitem-image: url("../icons/select-all-on.svg");
}
/* Only searchbar */
menuitem.searchbar-paste-and-search {
}
menuitem.searchbar-clear-history {
--menuitem-image: url("chrome://browser/skin/forget.svg");
}
/*= context_sendTabToDevicePopupMenu =========================================*/
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
> .sync-menuitem.sendtab-target[clientType="phone"] {
--menuitem-image: url("chrome://browser/skin/device-phone.svg");
}
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
> .sync-menuitem.sendtab-target[clientType="tablet"] {
--menuitem-image: url("chrome://browser/skin/device-tablet.svg");
}
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
> .sync-menuitem.sendtab-target[clientType="desktop"] {
--menuitem-image: url("chrome://browser/skin/device-desktop.svg");
}
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
> .sync-menuitem.sendtab-target[clientType="tv"] {
--menuitem-image: url("chrome://browser/skin/device-tv.svg");
}
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
> .sync-menuitem.sendtab-target[clientType="vr"] {
--menuitem-image: url("chrome://browser/skin/device-vr.svg");
}
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
> .sync-menuitem.sendtab-target[clientType=""] {
--menuitem-image: url("../icons/send-to-device.svg");
}
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
> .sync-menuitem.sendtab-target:not([clientType]) {
--menuitem-image: url("chrome://global/skin/icons/settings.svg");
}

View File

@ -0,0 +1,79 @@
/*= placeContext =============================================================*/
#placesContext_open {
--menuitem-image: url("../icons/link-square.svg");
}
#placesContext_openBookmarkContainer\:tabs,
#placesContext_openBookmarkLinks\:tabs {
--menuitem-image: url("../icons/movetowindow-16.svg");
}
#placesContext_open\:newtab,
#placesContext_openContainer\:tabs,
#placesContext_openLinks\:tabs {
--menuitem-image: url("chrome://browser/skin/new-tab.svg");
}
#placesContext_open\:newwindow {
--menuitem-image: url("chrome://browser/skin/window.svg");
}
#placesContext_open\:newprivatewindow {
--menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
}
#placesContext_show_bookmark\:info,
#placesContext_show\:info,
#placesContext_show_folder\:info {
--menuitem-image: url("chrome://global/skin/icons/edit.svg");
}
#placesContext_deleteBookmark,
#placesContext_deleteFolder,
#placesContext_delete,
#placesContext_delete_history {
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
#placesContext_deleteHost {
--menuitem-image: url("../icons/eye-hide.svg");
}
#placesContext_sortBy\:name {
--menuitem-image: url("../icons/text-sort-ascending.svg");
}
#placesContext_cut {
--menuitem-image: url("chrome://browser/skin/edit-cut.svg");
}
#placesContext_copy {
--menuitem-image: url("../icons/edit-copy.svg");
}
#placesContext_paste_group {
--menuitem-image: url("chrome://browser/skin/edit-paste.svg");
}
#placesContext_new\:bookmark {
--menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
#placesContext_new\:folder {
--menuitem-image: url("chrome://global/skin/icons/folder.svg");
@include Option("userChrome.icon.library") {
--menuitem-image: url("../icons/folder.svg");
}
}
#placesContext_new\:separator {
--menuitem-image: url("../icons/vertical-line.svg");
}
#placesContext_paste {
--menuitem-image: url("chrome://browser/skin/edit-paste.svg");
}
#placesContext_createBookmark {
--menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
#show-other-bookmarks_PersonalToolbar {
/* checkbox */
/* --menuitem-image: url("../icons/star-line-horizontal.svg"); */
}
#placesContext_showAllBookmarks {
--menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
}
.openintabs-menuitem {
--menuitem-image: url("../icons/movetowindow-16.svg");
}

View File

@ -0,0 +1,124 @@
/*= tabContextMenu ===========================================================*/
#context_openANewTab {
--menuitem-image: url("chrome://browser/skin/new-tab.svg");
}
#context_reloadTab,
#context_reloadSelectedTabs {
--menuitem-image: url("../icons/reload.svg");
}
#context_toggleMuteTab,
#context_toggleMuteSelectedTabs {
--menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
}
#context_toggleMuteTab[muted],
#context_toggleMuteSelectedTabs[muted] {
--menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
}
#context_pinTab,
#context_pinSelectedTabs {
--menuitem-image: url("../icons/pin-tab.svg");
}
#context_unpinTab,
#context_unpinSelectedTabs {
--menuitem-image: url("../icons/unpin-tab.svg");
}
#context_duplicateTab,
#context_duplicateTabs {
--menuitem-image: url("../icons/notebook-subsection.svg");
}
#context_bookmarkTab,
#context_bookmarkSelectedTabs {
--menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
#context_moveTabOptions {
--menuitem-image: url("../icons/arrow-swap.svg");
}
#context_sendTabToDevice {
--menuitem-image: url("../icons/send-to-device.svg");
}
#context_sendTabToDevice:is([disabled="true"]) + #context_shareTabURL, /* Legacy */
#context_sendTabToDevice:is([disabled="true"]) + menuitem.share-tab-url-item {
/* At windows */
--menuitem-image: url("../icons/share.svg");
}
#context_reopenInContainer {
--menuitem-image: url("../icons/container-openin-16.svg");
}
#context_selectAllTabs {
--menuitem-image: url("../icons/tab-multiple.svg");
}
#context_closeTab {
--menuitem-image: url("chrome://global/skin/icons/close.svg");
}
#context_closeTabOptions {
}
#context_undoCloseTab {
--menuitem-image: url("../icons/undo.svg");
}
/*= new-tab-button-popup =====================================================*/
#new-tab-button-popup > menuitem[command="Browser:NewUserContextTab"],
.new-tab-popup > menuitem[command="Browser:NewUserContextTab"] {
--menuitem-image: url("../icons/container-openin-16.svg");
}
#new-tab-button-popup > menuitem[command="Browser:OpenAboutContainers"],
.new-tab-popup > menuitem[command="Browser:OpenAboutContainers"] {
--menuitem-image: url("chrome://global/skin/icons/settings.svg");
}
/*= toolbar-context-menu =====================================================*/
.customize-context-manageExtension {
--menuitem-image: url("chrome://global/skin/icons/settings.svg");
}
.customize-context-removeExtension {
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
.customize-context-reportExtension {
--menuitem-image: url("../icons/send.svg");
}
.customize-context-moveToPanel {
--menuitem-image: url("chrome://browser/skin/pin-12.svg");
}
.toolbar-context-autohide-downloads-button {
--menuitem-image: url("../icons/password-hide.svg");
}
.customize-context-removeFromToolbar {
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
#toolbar-context-openANewTab {
--menuitem-image: url("chrome://browser/skin/new-tab.svg");
}
#toolbar-context-reloadSelectedTab,
#toolbar-context-reloadSelectedTabs {
--menuitem-image: url("../icons/reload.svg");
}
#toolbar-context-bookmarkSelectedTab,
#toolbar-context-bookmarkSelectedTabs {
--menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
#toolbar-context-selectAllTabs {
--menuitem-image: url("../icons/tab-multiple.svg");
}
#toolbar-context-undoCloseTab {
--menuitem-image: url("../icons/undo.svg");
}
#toggle_toolbar-menubar {
/* checkbox */
/* --menuitem-image: url("../icons/calendar-agenda.svg"); */
}
#toggle_PersonalToolbar {
/* Also placeContext */
--menuitem-image: url("chrome://browser/skin/bookmarks-toolbar.svg");
}
menuitem.viewCustomizeToolbar {
--menuitem-image: url("chrome://browser/skin/customize.svg");
}

View File

@ -0,0 +1,112 @@
@use "utils/os" as *;
@use "utils/option" as *;
@use "utils/color_scheme" as *;
@use "utils/theme" as *;
@use "sass:selector";
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
@namespace html "http://www.w3.org/1999/xhtml";
/** Default Thme - Contrast ***************************************************/
@include Option("userChrome.theme.built_in_contrast") {
@import "theme/built_in";
}
/** Compatibility Fixes *******************************************************/
@import "compatibility/index";
/** System Default Theme ******************************************************/
@include Option("userChrome.theme.system_default") {
@import "theme/system_default_theme";
}
/** Fully Theme Mode **********************************************************/
/* Default Themes
https://github.com/mozilla/gecko-dev/blob/master/toolkit/mozapps/extensions/default-theme/manifest.json
https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/light/manifest.json
https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/dark/manifest.json
*/
@include Option("userChrome.theme.proton_color") {
@import "theme/proton_color";
@include Option("userChrome.theme.proton_color.dark_blue_accent") {
@import "theme/dark_blue_accent";
}
}
@include Option("userChrome.theme.fully_color") {
@import "theme/fully_color";
}
/* Fully Dark Mode ************************************************************/
@include Option("userChrome.theme.fully_dark") {
@import "theme/fully_dark";
}
/* Proton Theme Mode **********************************************************/
@include Option("userChrome.theme.proton_chrome") {
@import "theme/proton_chrome";
}
/** Decoration ****************************************************************/
@import "decoration/index";
/** Rounding ******************************************************************/
@import "rounding/index";
/** Reduce Padding ************************************************************/
@import "padding/index";
/** Tab Bar UI ****************************************************************/
@import "tabbar/index";
/** Url View UI ***************************************************************/
@import "urlview/index";
/** Panel UI ******************************************************************/
@import "panel/index";
/** Fullscreen - Overlap toolbar **********************************************/
@import "fullscreen/index";
/** Library - Icons Replace ***************************************************/
@include Option("userChrome.icon.library") {
@import "library/chrome";
}
/** Panel - Icons *************************************************************/
@include Option("userChrome.icon.panel") {
@import "icons/layout_panel";
@import "icons/panel";
}
/** Menu - Icons Layout *******************************************************/
@include Option("userChrome.icon.menu") {
@import "icons/layout_menu";
@import "icons/layout_bookmark_menu";
@include Option("userChrome.icon.context_menu") {
@import "icons/context_menu";
}
@include Option("userChrome.icon.global_menubar") {
@import "icons/global_menubar";
}
@include Option("userChrome.icon.global_menu") {
@import "icons/global_menu";
}
}
/** Libray Menu ***************************************************************/
@include Option("userChrome.icon.library") {
@include Option("userChrome.icon.menu") {
@import "icons/library";
}
}
/*= Waterfox =================================================================*/
@import "icons/waterfox";
@include Option("userChrome.theme.fully_color") {
@import "theme/waterfox";
}
/*= Tor Browser ==============================================================*/
@import "icons/tor_browser";

View File

@ -0,0 +1,31 @@
@use "utils/os" as *;
@use "utils/option" as *;
@use "utils/color_scheme" as *;
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
/** Video player **************************************************************/
@import "contents/video_player";
/** Activity Stream ***********************************************************/
@import "contents/activity_stream";
/** Error Page - Restore illustrations ****************************************/
@include Option("userContent.page.illustration") {
@import "contents/error_page";
}
/** Fully Dark Mode ***********************************************************/
/*= Fully Dark Mode - Dark Mode Colors =======================================*/
@include Option("userContent.page.proton_color") {
@import "contents/proton_color";
}
@include Option("userContent.page.dark_mode") {
@import "contents/dark_mode";
}
/** Fully Proton Mode *********************************************************/
@include Option("userContent.page.proton") {
@import "contents/proton_contents";
}

View File

@ -0,0 +1,11 @@
@import "standard_folder";
@import "inbox";
@import "default_override";
@import "default_open";
@-moz-document url("chrome://browser/content/places/places.xhtml")
{
@include OS($linux) {
@import "menubar";
}
}

View File

@ -0,0 +1,35 @@
@-moz-document url("chrome://browser/content/places/places.xhtml")
{
/** Library - Icons Replace *************************************************/
@include Option("userChrome.icon.library") {
@import "standard_folder";
@import "inbox";
@import "default_override";
@import "default_open";
@import "menubar";
}
/*= Context Menu ===========================================================*/
@include Option("userChrome.icon.context_menu") {
@import "contents_menu";
}
@include OS($linux) {
/*= Layout Fixes =========================================================*/
menupopup menu {
padding-block: 4px;
}
.menu-right {
width: 16px !important; /* Original: 1ex */
background-image: url("chrome://global/skin/icons/arrow-right.svg");
background-position: right center;
}
/*= Proton ===============================================================*/
@include Option("userContent.page.proton") {
@import "proton";
@import "proton_contents";
}
}
}

View File

@ -0,0 +1,132 @@
menupopup menuitem:not([type="checkbox"], [type="radio"]),
menupopup menu:not([type="checkbox"], [type="radio"]),
#main-menubar > menu {
-moz-appearance: none !important; /* Linux: menulist */
}
#placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
#placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu {
/* Color */
-moz-context-properties: fill, fill-opacity !important;
fill: currentColor !important;
/* Layout */
background-size: 16px !important;
background-repeat: no-repeat !important;
background-image: var(--menuitem-image);
}
/* For native context menus on macOS */
@supports -moz-bool-pref("widget.macos.native-context-menus") {
:not(menu, #ContentSelectDropdown)
> menupopup
> menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist),
:not(menu, #ContentSelectDropdown)
> menupopup
> menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist) {
list-style-image: var(--menuitem-image) !important;
}
}
/* Padding */
:root {
--context-menu-background-padding-default: 5px;
--context-menu-background-padding: var(--context-menu-background-padding-default);
}
#placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
#placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu {
background-position: left var(--context-menu-background-padding) center !important;
padding-inline-start: var(--context-menu-background-padding) !important;
}
/* Padding - Windows */
@include OS($win) {
/* Checkbox */
:root {
--context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px);
}
:not(menu, #ContentSelectDropdown, #context-navigation)
> menupopup
> menuitem[type="checkbox"][checked="false"]
> .menu-iconic-left {
padding-inline-start: var(--context-menu-text-padding);
}
}
@include OS($win7) {
:root {
--context-menu-background-padding-default: 2px;
}
}
@include OS($win8) {
:root {
--context-menu-background-padding-default: 3px;
}
}
@include OS($win7, $win8) {
#placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
#placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu {
background-position: left var(--context-menu-background-padding) center !important;
padding-inline-start: 0 !important;
}
}
@include OS($win10) {
:root {
--context-menu-background-padding: 1em;
--context-menu-text-padding: 24px; /* 16px + 8px */
--menu-background-padding-default: calc(
var(--context-menu-background-padding) + var(--context-menu-text-padding)
);
}
#placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
#placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu {
padding-inline-start: var(--menu-background-padding-default) !important;
margin-left: 0 !important;
}
}
/* Padding - Linux */
@include OS($linux) {
:root {
--context-menu-background-padding-default: 6px;
}
}
/* Padding - Mac */
@include OS($mac) {
:root {
--context-menu-background-padding-default: 10px;
--context-menu-mac-padding: 21px;
}
/* context menu width */
#placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
#placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) {
padding-inline-end: var(--context-menu-background-padding) !important;
}
/* text position */
#placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]) > .menu-text,
#placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) > .menu-text {
padding-inline-start: var(--context-menu-mac-padding) !important;
}
/* Checkbox menuitem, None iconic menu */
#placesContext menuitem[type="checkbox"],
#placesContext menu:not(.menu-iconic) {
padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important;
}
}
/* Icon lists */
@import "../icons/context_menu/place";
@import "../icons/library";

View File

@ -0,0 +1,42 @@
/*= Default Icon - Open ======================================================*/
/* Query */
:-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu)
.bookmark-item[container="true"][query="true"]:not([tagContainer])[open="true"]
> .menu-iconic-left
> .menu-iconic-icon {
transform: rotate(15deg) !important;
}
/* History */
:-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query, open, dayContainer),
:-moz-any(#historyTree, #placesList, #placeContent)
treechildren::-moz-tree-image(query, open, OrganizerQuery_history____v) {
list-style-image: url("../icons/history-reverse.svg") !important;
}
/* Tag */
:-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu)
.bookmark-item[container="true"][tagContainer="true"][open="true"],
:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(title, query, open, tagContainer),
:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_tags_______v) {
list-style-image: url("../icons/tag-open.svg") !important;
}
/* Boomark */
:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_allbms_____v) {
list-style-image: url("chrome://browser/skin/bookmark-hollow.svg") !important;
}
/* Bookmark Toolbar */
#BMB_bookmarksPopup #BMB_bookmarksToolbar[open="true"],
#bookmarksMenuPopup #bookmarksToolbarFolderMenu[open="true"],
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
treechildren::-moz-tree-image(container, open, queryFolder_toolbar_____) {
list-style-image: url("../icons/bookmarksToolbar-open.svg") !important;
}
/* Bookmark Menu */
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
treechildren::-moz-tree-image(container, open, queryFolder_menu________) {
list-style-image: url("../icons/bookmarksMenu-open.svg") !important; /* or bookmarksMenu-open2.svg" */
}

View File

@ -0,0 +1,42 @@
/*= Default Icon - Override ===================================================*/
/* https://github.com/mozilla/gecko-dev/blob/master/browser/themes/shared/places/tree-icons.css */
/* Query */
:-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query) {
list-style-image: url("chrome://browser/skin/places/folder-smart.svg") !important;
}
/* History */
:-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query, dayContainer),
:-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_history____v) {
list-style-image: url("chrome://browser/skin/history.svg") !important;
}
/* Downloads */
:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) {
list-style-image: url("chrome://browser/skin/downloads/downloads.svg") !important;
}
/* Tag */
:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(title, query, tagContainer),
:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) {
list-style-image: url("chrome://browser/skin/places/tag.svg") !important;
}
/* Boomark */
:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) {
list-style-image: url("chrome://browser/skin/bookmark.svg") !important;
}
/* Bookmark Toolbar */
#BMB_bookmarksPopup #BMB_bookmarksToolbar, /* Original: Default folder icon */
#bookmarksMenuPopup #bookmarksToolbarFolderMenu, /* Original: Default folder icon */
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_toolbar_____) {
list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important;
}
/* Bookmark Menu */
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
treechildren::-moz-tree-image(container, queryFolder_menu________) {
list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important;
}

View File

@ -0,0 +1,23 @@
/*= Other Folder - Inbox Icon ================================================*/
/* on Menus */
#PlacesToolbar #OtherBookmarks,
#BMB_bookmarksPopup #BMB_unsortedBookmarks,
#bookmarksMenuPopup #menu_unsortedBookmarks,
/* Other Bookmarks -- in Sidebar, Library, Add/Edit Bookmark dialog */
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks),
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_unfiled_____),
#editBMPanel_unfiledRootItem,
#editBMPanel_folderMenuList[selectedGuid="unfiled_____"] {
list-style-image: url("../icons/mail-inbox-all.svg") !important;
}
/* Other Folder - Open */
#PlacesToolbar #OtherBookmarks[open="true"],
#BMB_bookmarksPopup #BMB_unsortedBookmarks[open="true"],
#bookmarksMenuPopup #menu_unsortedBookmarks[open="true"],
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
treechildren::-moz-tree-image(container, open, OrganizerQuery_UnfiledBookmarks),
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
treechildren::-moz-tree-image(container, open, queryFolder_unfiled_____) {
list-style-image: url("../icons/mail-inbox.svg") !important;
}

View File

@ -0,0 +1,45 @@
/*= Menubar - Icons ==========================================================*/
#organizeButton,
#viewMenu,
#maintenanceButton,
#back-button,
#forward-button,
#clearDownloadsButton {
fill: currentColor !important;
-moz-context-properties: fill !important;
}
/* Add */
#organizeButton {
list-style-image: url("chrome://global/skin/icons/settings.svg") !important;
}
#viewMenu {
list-style-image: url("../icons/sort.svg") !important;
}
#maintenanceButton {
list-style-image: url("../icons/import-export.svg") !important;
}
#clearDownloadsButton {
list-style-image: url("chrome://global/skin/icons/delete.svg") !important;
}
#clearDownloadsButton > .toolbarbutton-icon {
display: -moz-inline-box !important;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 2px;
}
/* Replace */
#back-button {
list-style-image: url("chrome://browser/skin/back.svg") !important;
}
#forward-button {
list-style-image: url("chrome://browser/skin/forward.svg") !important;
}
#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
transform: scaleX(-1) !important;
}

View File

@ -0,0 +1,386 @@
:root {
--organizer-color: -moz-DialogText;
--organizer-deemphasized-color: GrayText;
--organizer-toolbar-background: -moz-Dialog;
--organizer-pane-background: -moz-Dialog;
--organizer-content-background: -moz-Dialog;
--organizer-hover-background: SelectedItem;
--organizer-hover-color: SelectedItemText;
--organizer-selected-background: SelectedItem;
--organizer-selected-color: SelectedItemText;
--organizer-outline-color: SelectedItem;
--organizer-separator-color: ThreeDDarkShadow;
--organizer-border-color: ThreeDShadow;
--organizer-toolbar-field-background: Field;
--organizer-toolbar-field-background-focused: Field;
--organizer-toolbar-field-border-color: ThreeDShadow;
--organizer-toolbar-field-focus-border-color: var(--organizer-outline-color);
--organizer-toolbar-field-focus-box-shadow: unset;
--organizer-pane-field-border-color: ThreeDShadow;
}
@include NotContrast {
:root {
--organizer-color: var(--in-content-page-color);
--organizer-deemphasized-color: var(--in-content-deemphasized-text);
--organizer-toolbar-background: rgb(249, 249, 251); /* --toolbar-bgcolor */
--organizer-pane-background: rgb(229, 229, 235); /* --lwt-accent-color */
--organizer-content-background: var(--in-content-page-background);
--organizer-hover-background: var(--in-content-button-background-hover);
--organizer-hover-color: var(--organizer-color);
--organizer-selected-background: var(--in-content-button-background-active);
--organizer-selected-color: var(--organizer-color);
--organizer-outline-color: var(--in-content-focus-outline-color);
--organizer-separator-color: var(--organizer-pane-field-border-color);
--organizer-border-color: var(--in-content-border-color);
--organizer-toolbar-field-background: rgb(240, 240, 244); /* --lwt-accent-color */
--organizer-toolbar-field-background-focused: Field;
--organizer-toolbar-field-border-color: transparent;
--organizer-toolbar-field-focus-border-color: color-mix(
in srgb,
var(--organizer-outline-color) 50%,
transparent
);
--organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23);
--organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent);
}
@include Dark {
:root {
--organizer-color: rgb(251, 251, 254);
--organizer-deemphasized-color: rgb(191, 191, 201);
--organizer-toolbar-background: rgb(43, 42, 51);
--organizer-pane-background: rgb(35, 34, 43);
--organizer-content-background: rgb(28, 27, 34);
--organizer-hover-background: rgb(82, 82, 94);
--organizer-selected-background: rgb(91, 91, 102);
--organizer-toolbar-field-background: var(--in-content-page-background);
--organizer-toolbar-field-background-focused: rgb(66, 65, 77);
scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3);
}
}
}
/*- Toolbar & Menus ------------------------------------------------------*/
#placesToolbar {
appearance: none !important;
background-color: var(--organizer-toolbar-background) !important;
color: var(--organizer-color) !important;
border-bottom: 1px solid var(--organizer-border-color) !important;
padding: 4px !important;
padding-inline-end: 6px !important;
}
#placesToolbar > toolbarbutton {
appearance: none !important;
padding: 5px !important;
border-radius: 4px !important;
}
#placesToolbar > toolbarbutton[disabled] {
opacity: 0.6 !important;
}
#placesToolbar > toolbarbutton:not([disabled]):hover {
background-color: var(--organizer-hover-background) !important;
color: var(--organizer-hover-color) !important;
}
#placesToolbar > toolbarbutton:not([disabled]):hover:active {
background-color: var(--organizer-selected-background) !important;
}
#placesToolbar > toolbarbutton > .toolbarbutton-icon,
#placesMenu > menu > image,
#placesMenu > menu > .menubar-text {
-moz-context-properties: fill !important;
fill: currentColor !important;
}
#placesMenu {
margin-inline-start: 6px !important;
}
#placesMenu > menu {
appearance: none !important;
color: var(--organizer-color) !important;
border-radius: 4px !important;
padding-block: 5px !important;
padding-inline-start: 5px !important;
margin-inline-end: 2px !important;
}
#placesMenu > menu[_moz-menuactive="true"],
#placesMenu > menu:hover {
background-color: var(--organizer-hover-background) !important;
color: var(--organizer-hover-color) !important;
}
#placesMenu > menu:hover:active,
#placesMenu > menu[open] {
background-color: var(--organizer-selected-background) !important;
color: var(--organizer-selected-color) !important;
}
#placesMenu > menu > .menubar-text {
margin-block: 0 !important; /* override menu.css */
padding-inline-end: 4px !important;
}
/*- Search Bar & Input ---------------------------------------------------*/
#searchFilter,
#detailsPane html|input {
appearance: none !important;
background-color: var(--organizer-toolbar-field-background) !important;
color: var(--organizer-color) !important;
border: 1px solid var(--organizer-toolbar-field-border-color) !important;
border-radius: 4px !important;
margin: 0 !important;
padding-block: 2px !important;
min-height: 24px !important;
}
#searchFilter[focused] {
box-shadow: var(--organizer-toolbar-field-focus-box-shadow) !important;
background-color: var(--organizer-toolbar-field-background-focused) !important;
border-color: transparent !important;
outline: 2px solid var(--organizer-toolbar-field-focus-border-color) !important;
outline-offset: -2px !important;
}
/*- Sidebar & Splitter ---------------------------------------------------*/
#placesList {
background-color: var(--organizer-pane-background) !important;
}
#placesView > splitter {
border: 0 !important;
border-inline-end: 1px solid var(--organizer-border-color) !important;
min-width: 0 !important;
width: 3px !important;
background-color: transparent !important;
margin-inline-start: -3px !important;
position: relative !important;
}
/*- Downloads Pane -------------------------------------------------------*/
#downloadsRichListBox, /* Legacy - FF v98 */
#downloadsListBox {
color: var(--organizer-color) !important;
background-color: var(--organizer-content-background) !important;
}
#clearDownloadsButton:focus-visible {
outline: 2px solid var(--organizer-outline-color) !important;
}
richlistitem[selected="true"],
richlistitem:hover {
background-color: var(--organizer-hover-background) !important;
color: var(--organizer-color) !important;
}
richlistbox:where(:focus) > richlistitem[selected="true"] {
background-color: var(--organizer-selected-background) !important;
}
/*- Tree -----------------------------------------------------------------*/
#contentView treecol {
/* Use box-shadow to draw a bottom border instead of border-bottom
* because otherwise the items on contentView won't be perfectly
* aligned with the items on the sidebar. */
box-shadow: inset 0 -1px var(--organizer-border-color) !important;
}
tree {
background-color: var(--organizer-content-background) !important;
color: var(--organizer-color) !important;
}
treecol:not([hideheader="true"]),
treecolpicker {
appearance: none !important;
border: none !important;
background-color: var(--in-content-button-background) !important;
color: var(--organizer-color, inherit) !important;
padding: 5px 10px !important;
}
treecol:not([hideheader="true"], [sortable="false"]):hover,
treecolpicker:hover {
background-color: var(--organizer-hover-background) !important;
color: var(--organizer-color) !important;
}
treecol:not([hideheader="true"], [sortable="false"]):hover:active,
treecolpicker:hover:active {
background-color: var(--organizer-selected-background) !important;
}
treecol:not([hideheader="true"], :first-child),
treecolpicker {
padding-left: 10px !important;
border-inline-start-width: 1px !important;
border-inline-start-style: solid !important;
border-image: linear-gradient(
transparent 0%,
transparent 20%,
var(--organizer-border-color) 20%,
var(--organizer-border-color) 80%,
transparent 80%,
transparent 100%
)
1 1 !important;
}
treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection {
fill: currentColor !important;
width: 18px !important;
height: 18px !important;
}
treechildren::-moz-tree-row {
background-color: transparent !important;
}
treechildren::-moz-tree-row(hover) {
background-color: var(--organizer-hover-background) !important;
}
treechildren::-moz-tree-row(selected) {
background-color: var(--organizer-selected-background) !important;
color: var(--organizer-selected-color) !important;
border: 1px solid transparent !important;
}
treechildren::-moz-tree-image(hover),
treechildren::-moz-tree-twisty(hover),
treechildren::-moz-tree-cell-text(hover) {
color: var(--organizer-hover-color) !important;
}
treechildren::-moz-tree-image(selected),
treechildren::-moz-tree-twisty(selected),
treechildren::-moz-tree-cell-text(selected) {
color: var(--organizer-selected-color) !important;
}
treechildren::-moz-tree-separator {
height: 1px !important;
border-color: var(--organizer-separator-color) !important;
}
treechildren::-moz-tree-separator(hover) {
border-color: var(--organizer-hover-color) !important;
}
treechildren::-moz-tree-separator(selected) {
border-color: var(--organizer-selected-color) !important;
}
/*- Info Box -------------------------------------------------------------*/
#detailsPane {
background-color: var(--organizer-pane-background) !important;
color: var(--organizer-color) !important;
padding: 5px !important;
border-top: 1px solid var(--organizer-border-color) !important;
}
#editBookmarkPanelRows .expander-up,
#editBookmarkPanelRows .expander-down {
appearance: none !important;
min-width: 0 !important;
padding: 5px !important;
margin: 0 !important;
margin-inline-end: 4px !important;
border: 1px solid var(--organizer-pane-field-border-color) !important;
border-radius: 4px !important;
color: var(--organizer-color) !important;
background-color: var(--organizer-content-background) !important;
list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
-moz-context-properties: fill !important;
fill: currentColor !important;
}
#editBookmarkPanelRows .expander-up:hover,
#editBookmarkPanelRows .expander-down:hover {
background-color: var(--organizer-hover-background) !important;
color: var(--organizer-hover-color) !important;
}
#editBookmarkPanelRows .expander-up:hover:active,
#editBookmarkPanelRows .expander-down:hover:active {
background-color: var(--organizer-selected-background) !important;
color: var(--organizer-selected-color) !important;
}
#editBookmarkPanelRows .expander-up:focus-visible,
#editBookmarkPanelRows .expander-down:focus-visible {
outline: 2px solid var(--organizer-outline-color) !important;
outline-offset: -1px !important;
}
#editBookmarkPanelRows .expander-up {
list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
}
#editBookmarkPanelRows .expander-up > .button-box,
#editBookmarkPanelRows .expander-down > .button-box {
padding: 0 !important;
}
#places input {
border: 1px solid var(--organizer-pane-field-border-color) !important;
border-radius: 4px !important;
background-color: var(--organizer-content-background) !important;
color: var(--organizer-color) !important;
min-height: 20px !important;
padding-inline: 4px !important;
}
#places input:focus {
outline: 2px solid var(--organizer-outline-color) !important;
outline-offset: -1px !important;
}
#places input:not(:read-write):focus {
outline: none !important;
}
.caption-label {
margin-inline-start: 8px !important;
color: var(--organizer-deemphasized-color) !important;
}
#editBMPanel_tagsSelectorRow > richlistbox {
appearance: none !important;
color: var(--organizer-color) !important;
background-color: var(--organizer-content-background) !important;
border: 1px solid var(--organizer-border-color) !important;
border-radius: 4px !important;
}
#editBMPanel_tagsSelectorRow > richlistbox > richlistitem {
border: 1px solid transparent !important;
}
#editBMPanel_tagsSelectorRow > richlistbox > richlistitem:hover {
background-color: var(--organizer-hover-background) !important;
color: var(--organizer-hover-color) !important;
}
#editBMPanel_tagsSelectorRow > richlistbox > richlistitem[selected] {
background-color: var(--organizer-selected-background) !important;
color: var(--organizer-selected-color) !important;
}

View File

@ -0,0 +1,182 @@
/*- Radio Button ---------------------------------------------------------*/
menuitem[type="radio"] {
/* margin-inline-start: 0 !important; */
appearance: none !important;
}
menuitem[type="radio"] > .menu-iconic-left > .menu-iconic-icon {
appearance: none !important;
width: 16px !important;
height: 16px !important;
padding: 0 !important;
border: 1px solid var(--in-content-box-border-color) !important;
border-radius: 100% !important;
margin-block: 2px !important; /* extend the vertical clicktarget */
margin-inline: 0 6px !important;
background-color: var(--in-content-button-background) !important;
background-position: center !important;
flex-shrink: 0 !important; /* avoid shrinking inside flex container */
}
menuitem[type="radio"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon {
background-color: var(--in-content-button-background-hover) !important;
color: var(--in-content-button-text-color-hover) !important;
}
menuitem[type="radio"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon {
background-color: var(--in-content-button-background-active) !important;
}
menuitem[type="radio"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
-moz-context-properties: fill !important;
fill: currentColor !important;
color: var(--in-content-primary-button-text-color) !important;
background-color: var(--in-content-primary-button-background) !important;
background-image: url("chrome://global/skin/icons/radio.svg") !important;
border-color: transparent !important;
/* Style the button also when printing with "Print Backgrounds" unchecked */
color-adjust: exact !important;
}
menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover > .menu-iconic-left > .menu-iconic-icon {
background-color: var(--in-content-primary-button-background-hover) !important;
color: var(--in-content-primary-button-text-color-hover) !important;
}
menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover:active > .menu-iconic-left > .menu-iconic-icon {
background-color: var(--in-content-primary-button-background-active) !important;
}
menuitem[type="radio"] > .menu-iconic-text {
margin-inline: 0 8px !important;
padding-inline-start: 0 !important;
}
/* Disabled checkboxes, radios and labels */
menuitem[type="radio"][disabled="true"],
menuitem[type="checkbox"][disabled="true"] {
color: inherit !important;
}
menuitem[type="radio"][disabled="true"],
menuitem[type="checkbox"][disabled="true"] {
opacity: 0.5 !important;
}
/*- Check Box ------------------------------------------------------------*/
/* From checkbox.css */
menuitem[type="checkbox"] {
appearance: none !important;
-moz-box-align: center !important;
margin: 0px 2px !important;
}
menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon {
margin-inline-end: 2px !important;
}
menuitem[type="checkbox"] > .menu-iconic-text {
margin: 1px 0 !important;
}
menuitem[type="checkbox"][disabled="true"] {
opacity: 0.4 !important;
}
menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon {
appearance: none !important;
color: var(--checkbox-border-color, ThreeDDarkShadow) !important;
background-color: var(--checkbox-unchecked-bgcolor, Field) !important;
border: 1px solid currentColor !important;
border-radius: 2px !important;
margin-inline-end: 6px !important;
}
menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon {
height: 16px !important;
width: 16px !important;
}
menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon {
background-color: var(
--checkbox-unchecked-hover-bgcolor,
color-mix(in srgb, -moz-accent-color 4%, Field)
) !important;
}
menuitem[type="checkbox"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon {
background-color: var(
--checkbox-unchecked-active-bgcolor,
color-mix(in srgb, -moz-accent-color 8%, Field)
) !important;
}
menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
border-color: var(--checkbox-checked-border-color, transparent) !important;
background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important;
background-image: url("chrome://global/skin/icons/check.svg") !important;
background-position: center !important;
background-repeat: no-repeat !important;
-moz-context-properties: fill !important;
fill: currentColor !important;
color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
/* Style the button also when printing with "Print Backgrounds" unchecked */
color-adjust: exact !important;
}
menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
background-color: var(
--checkbox-checked-hover-bgcolor,
color-mix(in srgb, currentColor 12.5%, -moz-accent-color)
) !important;
}
menuitem[type="checkbox"]:not([disabled="true"]):hover:active
> .menu-iconic-left[checked="true"]
> .menu-iconic-icon {
background-color: var(
--checkbox-checked-active-bgcolor,
color-mix(in srgb, currentColor 25%, -moz-accent-color)
) !important;
}
menuitem[type="checkbox"]:focus > .menu-iconic-left > .menu-iconic-icon {
outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
outline-offset: var(--focus-outline-offset, 2px) !important;
}
@include Contrast {
menuitem[type="checkbox"]:not([disabled="true"]) > .menu-iconic-left > .menu-iconic-icon {
/* color will set the border-color on the check due to how HCM works for in-content pages. */
color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important;
}
menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] {
color: var(--checkbox-checked-border-color, currentColor) !important;
fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
}
menuitem[type="checkbox"]:not([disabled="true"]):hover:active
> .menu-iconic-left[checked="true"]
> .menu-iconic-icon,
menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
}
}
/* From common.css */
menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon {
margin-block: 2px !important;
}
/*- Menu Separtor --------------------------------------------------------*/
menuseparator {
appearance: none !important;
min-width: 2px;
min-height: 0;
border-top: 1px solid var(--in-content-box-border-color, ThreeDDarkShadow);
border-bottom: none;
margin: var(--panel-separator-margin, 6px);
padding: 0;
}

View File

@ -0,0 +1,21 @@
/*= Standard Folder - More Visible ===========================================*/
/* on Toolbar and Menus */
:-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) .bookmark-item[container="true"]:not([query="true"], [tagContainer], [dayContainer]),
/* in Sidebar, Library, Add/Edit Bookmark dialog */
/* https://github.com/rillian/firefox/blob/1f88437d263f56bdede4f20f69ba9c7b62f57001/layout/style/nsCSSAnonBoxList.h#L85-L98 */
/* Need to overide!!, can not use :not() */
:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, container),
#editBMPanel_folderMenuList:not([selectedGuid="toolbar_____"], [selectedGuid="menu________"]),
#editBMPanel_folderMenuList .folder-icon:not([id]),
/* Download Popup */
.downloadIconShow > .button-box > .button-icon {
list-style-image: url("../icons/folder.svg") !important;
}
/* Standard Folder - Open */
:-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu)
.bookmark-item[container="true"]:not([query="true"], [tagContainer], [dayContainer])[open="true"],
:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent)
treechildren::-moz-tree-image(title, container, open) {
list-style-image: url("../icons/folder-open.svg") !important;
}

View File

@ -0,0 +1,3 @@
:root[uidensity="compact"] #PersonalToolbar toolbarbutton {
margin-top: 0px; /* Original: 2px */
}

View File

@ -0,0 +1,27 @@
:root {
--bookmark-menu-padding: 3px;
}
:root[uidensity="compact"] {
--bookmark-menu-padding: 1.5px;
}
@include Option("userChrome.padding.menu_compact") {
:root {
--bookmark-menu-padding: 2px;
}
:root[uidensity=compact] {
--bookmark-menu-padding: 0px;
}
}
:root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton,
:root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .bookmark-item,
:root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .openintabs-menuitem {
padding-block: var(--bookmark-menu-padding) !important;
}
@include Option("userChrome.padding.menu_compact", "userChrome.padding.bookmark_menu.compact") {
:root:not([uidensity="touch"]) #BMB_bookmarksPopup .bookmark-item,
:root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .bookmark-item {
min-height: unset !important; /* Original: 24px */
}
}

View File

@ -0,0 +1,57 @@
/* for Extra Drag Space */
// https://searchfox.org/mozilla-esr78/search?q=--space-above-tabbar&path=&case=false&regexp=false
:root {
--space-above-tabbar: 8px; /* If the option is not specified, it is equivalent to 0px. */
}
@mixin dragSpaceHeight {
:root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] {
@content;
}
@include Option("userChrome.padding.drag_space.maximized") {
:root[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"] {
@content;
}
}
}
@mixin dragSpacePadding {
/* Add extra space to titlebar for dragging */
:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
@content;
}
@include Option("userChrome.padding.drag_space.maximized") {
:root[sizemode="maximized"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
:root[sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
@content;
}
}
}
@include OS($win10) {
@include dragSpaceHeight {
height: calc(var(--tab-min-height) + var(--space-above-tabbar) - var(--tabs-navbar-shadow-size));
}
}
@include OS($win7, $win8, $linux) {
@include dragSpaceHeight {
height: calc(var(--tab-min-height) + var(--space-above-tabbar));
}
}
@include OS($mac) {
#TabsToolbar > .toolbar-items {
padding-top: var(--space-above-tabbar) !important;
}
}
@include OS($win7) {
/* Add 4px extra margin on top of the tabs toolbar on Windows 7. */
@include dragSpacePadding {
padding-top: calc(var(--space-above-tabbar) + 4px) !important;
}
}
@include OS($win8, $win10, $linux) {
@include dragSpacePadding {
padding-top: var(--space-above-tabbar) !important;
}
}

View File

@ -0,0 +1,9 @@
/* for First Tab Space */
:root {
--space-left-tabbar: 8px; /* If the option is not specified, it is equivalent to 0px. */
}
:root:not([tabsintitlebar]) #tabbrowser-tabs:not([positionpinnedtabs]),
:root:is([sizemode="maximized"], [sizemode="fullscreen"]) #tabbrowser-tabs:not([positionpinnedtabs]) {
padding-inline-start: var(--space-left-tabbar) !important;
}

View File

@ -0,0 +1,29 @@
/* Vertical Align - Center & Height: 100% */
#main-menubar {
-moz-box-flex: 1 !important;
}
/* Rounding */
#main-menubar > menu {
border-radius: 4px;
}
/* Menubar item padding */
:root {
--global-menubar-padding: 2px;
}
:root[uidensity="compact"] {
--global-menubar-padding: 1px;
}
:root[uidensity="touch"] {
--global-menubar-padding: 4px;
}
#main-menubar > menu {
padding-block: var(--global-menubar-padding) !important;
}
/* Reduce items */
#main-menubar > menu > menupopup menuitem,
#main-menubar > menu > menupopup menu {
padding-block: var(--bookmark-menu-padding) !important;
}

View File

@ -0,0 +1,79 @@
/*= Tab Bar - Distribution padding, radius ===================================*/
@import "tab_padding";
/*= Tab Bar - Reduce Width, Show more tabs ===================================*/
@include Option("userChrome.padding.first_tab") {
@import "first_tab";
}
@include Option("userChrome.padding.tabbar_width") {
@import "tabbar_width";
}
/*= Tab Bar - Reduce Height, Show more contents ==============================*/
@include Option("userChrome.padding.drag_space") {
@import "drag_space";
}
@include Option("userChrome.padding.tabbar_height") {
@import "tabbar_height";
}
/*= Tool Bar - Button Padding ================================================*/
@include Option("userChrome.padding.toolbar_button") {
@import "toolbar_button";
}
/*= Nav Bar - Reduce Width ===================================================*/
@include Option("userChrome.padding.navbar_width") {
@import "nav_bar";
}
/*= URL Bar - Reduce Padding =================================================*/
@include Option("userChrome.padding.urlbar") {
@import "url_bar";
}
@include Option("userChrome.padding.urlView_expanding") {
@import "urlview_expanding";
}
@include Option("userChrome.padding.urlView_result") {
@import "urlview_result";
}
/*= BookMark Bar - Reduce Height =============================================*/
@include Option("userChrome.padding.bookmarkbar") {
@import "bookmark_bar";
}
/*= Info Bar - Reduce Padding ================================================*/
@include Option("userChrome.padding.infobar") {
@import "info_bar";
}
/*= Menu - Reduce Padding ====================================================*/
@include Option("userChrome.padding.menu") {
@import "menu";
}
/*= Bookmark Menu - Reduce Padding ===========================================*/
@include Option("userChrome.padding.bookmark_menu") {
@import "bookmark_menu";
}
/*= Global Menu - Set Padding ================================================*/
@include Option("userChrome.padding.global_menubar") {
@import "global_menubar";
}
/*= Panel - Reduce padding ===================================================*/
@include Option("userChrome.padding.panel") {
@import "panel";
}
@include Option("userChrome.padding.panel_header") {
@import "panel_header";
}
/*= Popup Panel - Reduce padding =============================================*/
@include Option("userChrome.padding.popup_panel") {
@import "popup_panel";
}

View File

@ -0,0 +1,44 @@
:root:not([uidensity]) #tab-notification-deck {
--infobar-message-margin: 0 4px 3px;
}
:root[uidensity="compact"] #tab-notification-deck {
--infobar-message-margin: 0 4px 2px;
}
#tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) {
margin: var(--infobar-message-margin, 0 4px 4px) !important;
}
:root:not([uidensity]) notification-message[message-bar-type="infobar"] {
--infobar-vertical-margin: 7px;
--infobar-button-vertical-margin: 3px;
}
:root[uidensity="compact"] notification-message[message-bar-type="infobar"] {
--infobar-vertical-margin: 6px;
--infobar-button-vertical-margin: 2px;
}
.infobar > .icon {
margin-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */
}
.notification-message {
padding-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */
}
.notification-button-container > .notification-button {
margin-block: var(--infobar-button-vertical-margin, 4px) !important; /* Original: 4px */
}
.notification-close {
margin: var(--infobar-button-vertical-margin, 4px) 8px !important; /* Original: 4px 8px */
}
/* Hard coded for compatibility - Disappearing phenomenon */
.container.infobar::before {
content: "";
display: block;
width: 2px;
position: absolute;
background-image: linear-gradient(0, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%);
top: 0;
inset-inline-start: 0;
height: 100%;
border-start-start-radius: 4px;
border-end-start-radius: 4px;
}

View File

@ -0,0 +1,69 @@
:root {
--menu-padding: 0.35em; /* Win7, 8: 0px */
}
:root[uidensity="compact"] {
--menu-padding: 0.25em;
}
:root[uidensity="touch"] {
--menu-padding: 0.5em;
}
@include Option("userChrome.padding.menu_compact") {
:root {
--menu-padding: 2px;
}
:root[uidensity=compact] {
--menu-padding: 0px;
}
}
menupopup:not(.in-menulist) > menuitem,
menupopup > menu {
/* Original: 0.5em */
padding-block: var(--menu-padding) !important;
}
#ContentSelectDropdown > menupopup > menucaption,
#ContentSelectDropdown > menupopup > menuitem {
padding-block: 0 !important;
}
@include OS($mac) {
:root:not([uidensity="touch"]) .menu-text,
:root:not([uidensity="touch"]) .menu-iconic-text {
padding-inline-end: 0 !important; /* Original: 2px */
}
:root:not([uidensity="touch"]) .menupopup-arrowscrollbox {
padding-block: 1px !important; /* Original: 4px*/
}
:root:not([uidensity="touch"]) #context-navigation:not([hidden]) {
padding: 0 0 1px !important; /* Original: 0 0 4px*/
}
:root:not([uidensity="touch"]) .menu-right {
margin-right: 6px !important; /* Original: 12px */
}
}
@include OS($win7, $win8) {
/* Remove border */
menupopup > menuitem,
menupopup > menu {
padding-block: calc(var(--menu-padding) - 2px) !important;
}
/* Make to original */
:root:not([uidensity="touch"]) #context-navigation:not([hidden]) {
padding: 0 0 4px !important;
}
}
@include OS($linux) {
menupopup > menu {
padding-inline-start: 0.5em;
}
}
/* Arrow Icon Align to Right */
.bookmark-item.subviewbutton > .menu-right {
margin-inline-end: 0 !important;
}

View File

@ -0,0 +1,4 @@
#nav-bar:not([customizing]) toolbarspring {
min-width: 1px !important;
max-width: 100px !important;
}

View File

@ -0,0 +1,16 @@
:root {
--arrowpanel-menuitem-margin: 0 var(--arrowpanel-menuicon-padding) !important; /* Original: 0 8px */
--arrowpanel-menuitem-padding-block: 5px !important; /* Original: 8px */
--arrowpanel-menuitem-padding-inline: 5px !important; /* Original: 8px */
--arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline) !important; /* Compatibility */
--arrowpanel-padding: 0.8em !important; /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */
}
:root[uidensity="compact"] {
--arrowpanel-menuitem-padding-block: 3px !important;
--arrowpanel-menuitem-padding-inline: 3px !important;
}
:root[uidensity="touch"] {
--arrowpanel-menuitem-padding-block: 8px !important; /* Original: 8px */
--arrowpanel-menuitem-padding-inline: 8px !important; /* Original: 8px */
}

View File

@ -0,0 +1,4 @@
.panel-header{
padding: unset !important;
padding-top: 4px !important;
}

View File

@ -0,0 +1,51 @@
#protections-popup-main-header-label {
height: unset !important; /* Original: 37.6px */
}
#identity-popup,
#permission-popup,
#protections-popup {
--vertical-section-padding: 0.8em; /* Original: 0.9em */
}
.protections-popup-footer-button,
.protections-popup-category {
min-height: 24px; /* Original: 32px */
height: unset !important;
}
/** Popup panel - Compact mode */
/* Footer Button Height */
:root[uidensity="compact"] .panel-footer.panel-footer-menulike > button {
padding: 3px 8px !important;
}
/* Footer Button Height */
:root[uidensity="compact"] #protections-popup-trackersView-settings-button {
margin: 4px 8px 0 !important;
}
/* not cut off for Protection popup Footer on windows */
:root[uidensity="compact"] #protections-popup-multiView #protections-popup-footer {
padding: 3px 0 10px !important;
}
/* Button and disabled category in Protection popup */
:root[uidensity="compact"] #protections-popup-multiView .protections-popup-footer-button,
:root[uidensity="compact"] #protections-popup-multiView .protections-popup-category {
height: 20px !important;
min-height: 20px !important;
}
/* Footer Button in Tracking Content Panel */
:root[uidensity="compact"] #protections-popup-multiView .panel-footer.panel-footer-menulike {
margin: 0 0 3px !important;
}
/* Identity popup header padding */
:root[uidensity="compact"] #identity-popup-multiView #identity-popup-mainView-panel-header {
padding: 2px 5px !important;
}
/* Text When There is no trackers */
:root[uidensity="compact"] #protections-popup-no-trackers-found-description {
margin: 2em 4em !important;
}
/* Download Item margin */
:root[uidensity="compact"] #downloadsListBox {
margin: 0 !important;
}

View File

@ -0,0 +1,21 @@
@include Option("userChrome.tab.lepton_like_padding", "userChrome.tab.photon_like_padding") {
:root {
// --tab-block-margin: New version of --proton-tab-block-margin
--proton-tab-block-margin: var(--tab-block-margin) !important; /* Original: 4px, Legacy */
}
:root[uidensity="touch"] {
/* Like Original */
--tab-block-margin: 4px !important;
}
}
@include Option("userChrome.tab.lepton_like_padding") {
:root {
--tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */
}
}
@include Option("userChrome.tab.photon_like_padding") {
:root {
--tab-block-margin: 0px !important;
}
}

View File

@ -0,0 +1,80 @@
/* Toolbar Height */
@include Option("userChrome.tab.lepton_like_padding") {
:root:not([uidensity]) #TabsToolbar {
--tab-min-height: 36px;
}
:root[uidensity="compact"] #TabsToolbar {
--tab-min-height: 32px;
}
:root[uidensity="touch"] #TabsToolbar {
--tab-min-height: 41px;
}
}
@include Option("userChrome.tab.photon_like_padding") {
:root:not([uidensity]) #TabsToolbar {
--tab-min-height: 32px;
}
:root[uidensity="compact"] #TabsToolbar {
--tab-min-height: 29px;
}
:root[uidensity="touch"] #TabsToolbar {
--tab-min-height: 41px;
}
/* Top Margin */
.tab-background,
.tab-content {
margin-top: 0 !important;
}
}
@include NotOption("userChrome.tab.lepton_like_padding") {
@include NotOption("userChrome.tab.photon_like_padding") {
:root:not([uidensity]) #TabsToolbar {
--tab-min-height: 36px; /* 38px -> 36px */
}
:root[uidensity="compact"] #TabsToolbar {
--tab-min-height: 29px; /* 36px -> 29px */
}
}
}
@include Option("userChrome.tab.connect_to_window") {
#TabsToolbar {
--toolbarbutton-inner-padding: calc((var(--tab-min-height) - 18px) / 2) !important; /* Prevent overflow pinned tab bottom margin */
}
:root:not([uidensity="compact"]) #tabbrowser-arrowscrollbox,
#tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"],
#tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack,
#tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content {
max-height: var(--tab-min-height) !important; /* Force apply height */
}
:root[uidensity="compact"] #tabbrowser-arrowscrollbox {
height: var(--tab-min-height) !important;
}
}
/* Scroll Button - Size Fix */
:root #tabbrowser-arrowscrollbox {
--scrollbtn-vertical-padding: 3px;
--scrollbtn-vertical-border: 2px;
--scrollbtn-border-radius: 7px;
}
#scrollbutton-up,
#scrollbutton-down {
/* Original: var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) - 6px) = 9px */
/* https://github.com/mozilla/gecko-dev/blob/71b1259afd1cdaf41871ae675c2dadb967ea5b34/browser/themes/shared/toolbarbuttons.inc.css#L142 */
padding-top: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important;
padding-bottom: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important;
/* Original: 4px */
border-top-width: var(--scrollbtn-vertical-border, 4px) !important;
border-bottom-width: var(--scrollbtn-vertical-border, 4px) !important;
/* Original: calc(var(--tab-border-radius) + 4px) = 8px */
border-radius: var(--scrollbtn-border-radius, calc(var(--tab-border-radius) + 4px)) !important;
}
:root[tabsintitlebar]:not([uidensity="compact"]) #toolbar-menubar[autohide="true"] {
height: calc(
var(--tab-min-height) - var(--tabs-navbar-shadow-size) - 2px
); /* Compact: 28px, Normal: 33px, Touch: 38px */
}

View File

@ -0,0 +1,87 @@
/* Titlebar Space */
.titlebar-spacer[type="pre-tabs"] {
width: 30px !important; /* Original: 40px */
}
.titlebar-spacer[type="post-tabs"] {
width: 25px !important; /* Original: 40px */
}
/* Tabbar Buttons */
:root {
--newtab-button-minus-width-padding: 2px;
--newtab-button-width-padding: calc(var(--toolbarbutton-inner-padding) - var(--newtab-button-minus-width-padding));
}
#new-tab-button > .toolbarbutton-icon,
#alltabs-button > .toolbarbutton-badge-stack {
/* Original: calc(2 * var(--toolbarbutton-inner-padding) + 16px) */
width: calc(2 * var(--newtab-button-width-padding) + 16px) !important;
/* Original: --toolbarbutton-inner-padding */
padding-left: var(--newtab-button-width-padding) !important;
padding-right: var(--newtab-button-width-padding) !important;
}
@include NotOption("userChrome.tab.photon_like_padding") {
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
> #tabbrowser-arrowscrollbox
> .tabbrowser-tab[first-visible-unpinned-tab] {
margin-inline-start: 1px !important;
}
}
@include Option("userChrome.tab.photon_like_padding") {
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
> #tabbrowser-arrowscrollbox
> .tabbrowser-tab[first-visible-unpinned-tab] {
margin-inline-start: 0 !important;
}
}
:root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox {
--scrollbtn-inner-padding: 1px;
--scrollbtn-outer-padding: 3px;
}
#scrollbutton-up {
padding-left: var(--scrollbtn-inner-padding, 4px) !important; /* Original: 4px */
padding-right: var(--scrollbtn-outer-padding, 4px) !important;
}
#scrollbutton-down {
padding-left: var(--scrollbtn-outer-padding, 4px) !important; /* Original: 4px */
padding-right: var(--scrollbtn-inner-padding, 4px) !important;
}
:root:not([uidensity="touch"]) #new-tab-button,
#alltabs-button {
--toolbarbutton-outer-padding: 1px; /* Original: 2px*/
}
/* Tab - Max Size */
@include NotOption("userChrome.tab.photon_like_padding") {
:root {
--tab-max-width: 240px;
}
}
@include Option("userChrome.tab.photon_like_padding") {
:root {
--tab-max-width: 225px;
}
}
.tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
max-width: var(--tab-max-width) !important; /* Original: 225px */
}
/* neighbouring tabs should "pinch" together */
@include NotOption("userChrome.tab.photon_like_padding") {
@include Option("userChrome.tab.lepton_like_padding") {
.tabbrowser-tab {
padding-inline: 1px !important;
}
}
.tabbrowser-tab:not([last-visible-tab]) {
margin-inline-end: -0.5px !important;
}
}
@include Option("userChrome.tab.photon_like_padding") {
.tabbrowser-tab {
padding-inline: 0 !important;
}
}

View File

@ -0,0 +1,3 @@
:root[uidensity="compact"] {
--toolbarbutton-outer-padding: 2px !important; /* Original: 3px, General is 2px */
}

View File

@ -0,0 +1,24 @@
:root:not([uidensity="touch"]) #urlbar-container,
:root:not([uidensity="touch"]) #search-container {
padding-block: 3px !important; /* Original: 4px */
margin-inline: 5px !important; /* Original: 5px */
}
:root:not([uidensity="compact"]) #urlbar-container,
:root:not([uidensity="compact"]) #search-container {
padding-block: 2px !important;
}
/* spread menu */
:root:not([uidensity]) .urlbarView-row {
padding-block: 1px !important; /* Original: 2px */
}
:root[uidensity="compact"] .urlbarView-row {
padding-block: 0px !important;
}
:root:not([uidensity]) #urlbar .search-one-offs:not([hidden]) {
padding-block: 8px !important; /* Original: 10px */
}
:root[uidensity="compact"] #urlbar .search-one-offs:not([hidden]) {
padding-block: 2px !important;
}

View File

@ -0,0 +1,16 @@
#urlbar[breakout][breakout-extend] {
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
left: 0 !important;
width: 100% !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-input-container {
height: var(--urlbar-height) !important;
padding-block: 0 !important;
padding-inline: 0 !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-background {
animation-name: none !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, .05) !important;
}

View File

@ -0,0 +1,8 @@
.urlbarView {
margin-inline: 0 !important;
width: 100% !important;
}
.urlbarView-row {
padding-block: 0 !important;
}

View File

@ -0,0 +1,12 @@
/* Original
--arrowpanel-menuitem-margin: 0 8px;
--arrowpanel-menuitem-padding-block: 8px;
--arrowpanel-menuitem-padding-inline: 8px;
--arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline);
*/
:root,
:root:is([uidensity="compact"], [uidensity="touch"]) {
--arrowpanel-menuitem-margin: 0 !important;
--arrowpanel-menuitem-padding-inline: calc(var(--arrowpanel-menuitem-padding-block) + 8px) !important;
}

View File

@ -0,0 +1,9 @@
/* Full width separators */
:root {
/* Original
--panel-separator-margin-vertical: 4px;
--panel-separator-margin-horizontal: 8px;
--panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal);
*/
--panel-separator-margin-horizontal: 0 !important;
}

View File

@ -0,0 +1,11 @@
@include Option("userChrome.panel.remove_strip") {
@import "remove_strip";
}
@include Option("userChrome.panel.full_width_separator") {
@import "full_width_separator";
}
@include Option("userChrome.panel.full_width_padding") {
@import "full_width_padding";
}

View File

@ -0,0 +1,3 @@
#appMenu-fxa-separator {
--panel-separator-zap-gradient: none; /* Original: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%) */
}

Some files were not shown because too many files have changed in this diff Show More