mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2025-12-05 18:20:44 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'dev' into photon-style-dev

Browse source
This commit is contained in:
alstjr7375 2023-08-14 01:43:30 +09:00
commit 366ba55cd1
194 changed files with 25343 additions and 2920 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.gitattributes vendored
View file

@ -1,8 +1,9 @@
/.gitattributes export-ignore
/.gitignore export-ignore
/.github export-ignore
/.gitignore export-ignore
/.prettierignore export-ignore
/.prettierrc.json export-ignore
/CODE_OF_CONDUCT.md export-ignore
/CONTRIBUTING.md export-ignore
/README.org export-ignore
/css/* linguist-generated

49
.github/ISSUE_TEMPLATE/bug_report.md vendored
View file

@ -1,49 +0,0 @@
---
name: Bug report
about: Create a report to help us improve
title: ''
labels: Issue::Bug
assignees: ''
---
**Describe the bug**
<!-- A clear and concise description of what the bug is. -->
**Expected behavior**
<!-- A clear and concise description of what you expected to happen. -->
**Screenshots**
<!-- If applicable, add screenshots to help explain your problem. -->
**Environment:<!-- (please complete the following information) -->**
<!-- Check like `- [x]`. -->
- Distribution
- [ ] [Original Lepton](https://github.com/black7375/Firefox-UI-Fix)
- [ ] [Lepton's photon style](https://github.com/black7375/Firefox-UI-Fix/tree/photon-style)
- [ ] [Lepton's proton style](https://github.com/black7375/Firefox-UI-Fix/tree/proton-style)
- Firefox Version: <!--[write from `about:support` - `version`]-->
- OS:
- [ ] Linux
- [ ] Windows
- [ ] Mac
- [ ] Other:
- Theme:
- [ ] Light
- [ ] Dark
- [ ] Alpenglow (System: Light)
- [ ] Alpenglow (System: Dark)
- [ ] System Default
- GTK Theme Name (Linux only): <!-- For example: Adwaita, Adwaita-Dark, Breath, Breath-Dark. Run `gsettings get org.gnome.desktop.interface gtk-theme` to output this -->
- [ ] Other: (e.g. [Photon Colors](https://addons.mozilla.org/en-US/firefox/addon/photon-colors/), [Google Chrome Dark](https://addons.mozilla.org/en-US/firefox/addon/google-chrome-dark/), [Fairytale Of Nature](https://addons.mozilla.org/en-US/firefox/addon/fairytale-of-nature/))
<details><summary><strong><code>user.js</code> setup</strong></summary><br>
<!-- Your user.js setup -->
```javascript
// Your settings
```
</details>
**Additional context**
<!-- Add any other context about the problem here. -->

143
.github/ISSUE_TEMPLATE/bug_report.yml vendored Normal file
View file

@ -0,0 +1,143 @@
name: Bug report
description: Create a report to help us improve
labels: ["Issue::Bug"]
body:
# == Bug Infos =================================================================
- type: markdown
id: bug-infos
attributes:
value: "## Bug Infos"
- type: textarea
id: describe-the-bug
attributes:
label: Describe the bug
description: A clear and concise description of what the bug is.
placeholder: Tell us what you see!
validations:
required: true
- type: textarea
id: expected-behavior
attributes:
label: Expected behavior
description: A clear and concise description of what you expected to happen.
placeholder: Tell us what you want!
validations:
required: false
- type: textarea
id: screenshots
attributes:
label: Screenshots
description: If is helpful to attach screenshots or video similar to the desired features.
placeholder: Drag or paste images or videos to upload
validations:
required: false
# == Environments ===============================================================
- type: markdown
id: environments
attributes:
value: "## Environments"
- type: dropdown
id: os
attributes:
label: OS
options:
- Linux
- Mac OS
- Windows 11
- Windows 10
- Windows 8
- Windows 7
- Others
multiple: true
validations:
required: true
- type: input
id: os-others
attributes:
label: OS - Others
description: Enter only if you choose `Others` from the OS
placeholder: e.g. FreeBSD
validations:
required: false
- type: input
id: firefox-version
attributes:
label: Firefox Version
description: Write from `about:support` - `version`
placeholder: e.g. v101.1b3
validations:
required: true
- type: checkboxes
id: distribution
attributes:
label: Distribution
options:
- label: "[Original Lepton](https://github.com/black7375/Firefox-UI-Fix)"
- label: "[Lepton's photon style](https://github.com/black7375/Firefox-UI-Fix/tree/photon-style)"
- label: "[Lepton's proton style](https://github.com/black7375/Firefox-UI-Fix/tree/proton-style)"
validations:
required: true
- type: checkboxes
id: theme
attributes:
label: Theme
options:
- label: "Light"
- label: "Dark"
- label: "Alpenglow (System: Light)"
- label: "Alpenglow (System: Dark)"
- label: "System Default"
- label: "Others: (e.g. [Photon Colors](https://addons.mozilla.org/en-US/firefox/addon/photon-colors/), [Google Chrome Dark](https://addons.mozilla.org/en-US/firefox/addon/google-chrome-dark/), [Fairytale Of Nature](https://addons.mozilla.org/en-US/firefox/addon/fairytale-of-nature/))"
validations:
required: true
- type: textarea
id: theme-more-info
attributes:
label: Theme - More Info
description: |
Enter only for the following cases:
- Choose `System Default` with linux users
Tip: Run `gsettings get org.gnome.desktop.interface gtk-theme` to output this
- Choose `Others`
placeholder: |
Example for each case
- Adwaita, Adwaita-Dark, Breath, Breath-Dark
- Your theme links like https://addons.mozilla.org/en-US/firefox/addon/photon-colors/
validations:
required: false
- type: textarea
id: user-js-setup
attributes:
label: "`user.js` setup"
description: |
Your `user.js` or `about:config` settings
placeholder: Please tell me your settings
value: |
<details><summary><strong><code>user.js</code> setup</strong></summary><br>
```javascript
// Your settings
```
</details>
validations:
required: true
- type: textarea
id: additional-context
attributes:
label: Additional context
description: Add any other context about the problem here.
placeholder: Anything to write down or refer to is fine
validations:
required: false

95
.github/ISSUE_TEMPLATE/bug_report_install.yml vendored Normal file
View file

@ -0,0 +1,95 @@
name: Bug report - Install
description: Create a report for install
labels: ["Issue::Bug", "install"]
body:
# == Bug Infos =================================================================
- type: markdown
id: bug-infos
attributes:
value: "## Bug Infos"
- type: textarea
id: describe-the-bug
attributes:
label: Describe the bug
description: A clear and concise description of what the bug is.
placeholder: Tell us what you see!
validations:
required: true
- type: textarea
id: expected-behavior
attributes:
label: Expected behavior
description: A clear and concise description of what you expected to happen.
placeholder: Tell us what you want!
validations:
required: false
- type: textarea
id: screenshots
attributes:
label: Screenshots
description: If is helpful to attach screenshots or video similar to the desired features.
placeholder: Drag or paste images or videos to upload
validations:
required: false
# == Environments ===============================================================
- type: markdown
id: environments
attributes:
value: "## Environments"
- type: dropdown
id: os
attributes:
label: OS
options:
- Linux
- Mac OS
- Windows 11
- Windows 10
- Windows 8
- Windows 7
- Others
multiple: true
validations:
required: true
- type: input
id: os-others
attributes:
label: OS - Others
description: Enter only if you choose `Others` from the OS
placeholder: e.g. FreeBSD
validations:
required: false
- type: input
id: firefox-version
attributes:
label: Firefox Version
description: Write from `about:support` - `version`
placeholder: e.g. v101.1b3
validations:
required: true
- type: checkboxes
id: distribution
attributes:
label: Distribution
options:
- label: "[Original Lepton](https://github.com/black7375/Firefox-UI-Fix)"
- label: "[Lepton's photon style](https://github.com/black7375/Firefox-UI-Fix/tree/photon-style)"
- label: "[Lepton's proton style](https://github.com/black7375/Firefox-UI-Fix/tree/proton-style)"
validations:
required: true
- type: textarea
id: additional-context
attributes:
label: Additional context
description: Add any other context about the problem here.
placeholder: Anything to write down or refer to is fine
validations:
required: false

7
.github/ISSUE_TEMPLATE/config.yml vendored Normal file
View file

@ -0,0 +1,7 @@
# https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository#configuring-the-template-chooser
blank_issues_enabled: false
contact_links:
- name: GitHub Community Support
url: https://github.com/black7375/Firefox-UI-Fix/discussions
about: Please ask and answer questions/inquiries here.

23
.github/ISSUE_TEMPLATE/feature_request.md vendored
View file

@ -1,23 +0,0 @@
---
name: Feature request
about: Suggest an idea for this project
title: ''
labels: 'Issue::Enhancement'
assignees: ''
---
**Is your feature request related to a problem?**
<!-- A clear and concise description of what the problem is. Ex. I don't like this design that [...] -->
**The solution I'd like**
<!-- A clear and concise description of what you want to happen. -->
**Screenshots or video**
<!-- It is helpful to attach screenshots or video similar to the desired features. -->
**Alternatives I've considered**
<!-- A clear and concise description of any alternative solutions or features you've considered. -->
**Additional context**
<!-- Add any other context or screenshots about the feature request here. -->

49
.github/ISSUE_TEMPLATE/feature_request.yml vendored Normal file
View file

@ -0,0 +1,49 @@
name: Feature request
description: Suggest an idea for this project
labels: ["Issue::Enhancement"]
body:
- type: textarea
id: problem
attributes:
label: Is your feature request related to a problem?
description: A clear and concise description of what the problem is.
placeholder: Ex. I don't like this design that [...]
validations:
required: true
- type: textarea
id: solution
attributes:
label: The solution I'd like
description: A clear and concise description of what you want to happen.
placeholder: Tell us what you want!
validations:
required: true
- type: textarea
id: screenshots
attributes:
label: Screenshots or video
description: It is helpful to attach screenshots or video similar to the desired features.
placeholder: You can drag & drop to attach files
validations:
required: false
- type: textarea
id: alternatives
attributes:
label: Alternatives I've considered
description: A clear and concise description of any alternative solutions or features you've considered.
placeholder: It would be great if you have a relevant image or link
validations:
required: false
- type: textarea
id: additional-context
attributes:
label: Additional context
description: Add any other context or screenshots about the feature request here.
placeholder: Anything to write down or refer to is fine
validations:
required: false

26
.github/actions/node-setup/action.yml vendored Normal file
View file

@ -0,0 +1,26 @@
name: "Setup"
runs:
using: "composite"
steps:
# https://github.com/actions/cache/blob/main/examples.md#node---yarn
# https://github.blog/changelog/2022-10-11-github-actions-deprecating-save-state-and-set-output-commands/
- name: Get yarn cache directory path
id: yarn-cache-dir-path
run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
shell: bash
- name: Node cache
id: node-cache
uses: actions/cache@v3
with:
path: |
${{ steps.yarn-cache-dir-path.outputs.dir }}
"**/node_modules"
key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-node-
- name: Package Install
run: yarn install
shell: bash

21
.github/pull_request_template.md vendored
View file

@ -1,24 +1,19 @@
**Describe the PR**
<!-- A clear and concise description of what the PR is. -->
**PR Type**
<!-- Check like `- [x]`. -->
- [ ] `Add:` Add feature or enhanced.
- [ ] `Fix:` Bug fix or change default values.
- [ ] `Clean:` Refactoring.
- [ ] `Doc:` Update docs.
**Related Issue**
<!--Related or discussed issues. If it's a big change, it's a good idea to open an issue ahead of time. -->
**Screenshots**
<!-- If applicable, add screenshots to help explain your commit. -->
**Environment (please complete the following information):**
<!-- Check like `- [x]`. -->
- PR Type
- [ ] `Add:` Add feature or enhanced.
- [ ] `Fix:` Bug fix or change default values.
- [ ] `Clean:` Refactoring.
- [ ] `Doc:` Update docs.
- Distribution
- [ ] [Original Lepton](https://github.com/black7375/Firefox-UI-Fix)
- [ ] [Lepton's photon style](https://github.com/black7375/Firefox-UI-Fix/tree/photon-style)
- [ ] [Lepton's proton style](https://github.com/black7375/Firefox-UI-Fix/tree/proton-style)
**Additional context**
<!-- Add any other context about the commit here. -->

16
.github/workflows/ci.yml vendored
View file

@ -21,20 +21,10 @@ jobs:
steps:
- name: Checkout
uses: actions/checkout@v2
uses: actions/checkout@v3
- name: Node cache
id: node-cache
uses: actions/cache@v2
with:
path: node_modules
key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-node-
- name: Package Install
if: steps.node-cache.outputs.cache-hit != 'true'
run: yarn install
- name: Setup
uses: ./.github/actions/node-setup
- name: Build
run: yarn build

31
.github/workflows/release.yml vendored
View file

@ -7,7 +7,9 @@ jobs:
sync-branches:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
with:
fetch-depth: 0
- name: Merge master -> photon-style
uses: devmasx/merge-branch@1.4.0
@ -30,6 +32,7 @@ jobs:
needs: sync-branches
strategy:
matrix:
mode: ["STANDARD", "ESR"]
include:
- name: "Lepton"
branch: "master"
@ -38,7 +41,7 @@ jobs:
- name: "Lepton-Proton-Style"
branch: "proton-style"
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
with:
ref: ${{ matrix.branch }}
@ -53,6 +56,20 @@ jobs:
echo -e "[Info]\nVer=${TAGVER}\nBranch=${BRANCH}" > LEPTON
- name: Processing for STANDARD
if: matrix.mode == 'STANDARD'
run: |
rm css/leptonChromeESR.css
rm css/leptonContentESR.css
- name: Processing for ESR
if: matrix.mode == 'ESR'
run: |
sed -i "s/\.css/ESR\.css/g" userChrome.css
sed -i "s/\.css/ESR\.css/g" userContent.css
rm css/leptonChrome.css
rm css/leptonContent.css
- name: Release Structure
run: |
# Remove unnecessary files
@ -71,9 +88,17 @@ jobs:
zip -rv ${{ matrix.name }}.zip chrome CREDITS LICENSE user.js install.sh install.ps1
- uses: softprops/action-gh-release@v1 # actions/create-release, actions/upload-release-asset is deprecated
if: startsWith(github.ref, 'refs/tags/')
if: matrix.mode == 'STANDARD'
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
files: |
${{ matrix.name }}.zip
- uses: softprops/action-gh-release@v1
if: matrix.mode == 'ESR'
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
files: |
${{ matrix.name }}-ESR.zip

41
CREDITS
View file

@ -7,6 +7,9 @@
----------
Major Contributors
N: 2641a40fd44383320adde4b027a1d0b03bd550
W: https://github.com/2641a40fd44383320adde4b027a1d0b03bd550
N: AveYo
E: aveyo@yahoo.com
W: https://github.com/AveYo
@ -26,16 +29,26 @@ N: Jani Haiko
E: haiko.jani@gmail.com
W: https://github.com/ojaha065
N: Jiho Lee
E: optional.int@kakao.com
W: https://github.com/DPS0340
N: kanlukasz
W: https://github.com/kanlukasz
N: nikkehtine
E: nikkehtine@int.pl
W: https://github.com/nikkehtine
N: OSS.kr
W: https://www.oss.kr/
N: ZachKnife1
W: https://github.com/ZachKnife1
----------
Contributors
N: 2641a40fd44383320adde4b027a1d0b03bd550
W: https://github.com/2641a40fd44383320adde4b027a1d0b03bd550
N: 7k5x
E: 7k5xlp0onfire@gmail.com
W: https://github.com/7k5x
@ -70,6 +83,10 @@ N: dr460nf1r3
E: njcrypted@protonmail.com
W: https://dr460nf1r3.me/
N: Dusk Banks
E: me@bb010g.com
W: https://static.bb010g.com/
N: Filip Š
E: filip.stamcar@hotmail.com
W: https://www.filips.si/
@ -94,6 +111,10 @@ W: https://github.com/MarNicGit
N: Oondanomala
W: https://github.com/Oondanomala
N: Patricek
E: pk22.games@gmail.com
W: https://github.com/Patricek0056
N: ph3b3
E: phoebeleong8@gmail.com
W: https://phoebe-leong.github.io/
@ -109,6 +130,10 @@ W: https://github.com/Nyubis
N: roland-rollo
W: https://github.com/roland-rollo
N: ryenyuku
E: teamworks1732@gmail.com
W: https://github.com/ryenyuku
N: SanderTheDragon
E: sanderthedragon@zoho.com
W: https://gitlab.com/SanderTheDragon
@ -131,6 +156,11 @@ W: https://github.com/thunderstone135
----------
Reference Projects & Resources
N: BEST-WALLPAPER.NET
W: https://best-wallpaper.net/
C: Copyright (c) 2011-2022 best-wallpaper.net
L: Unspecified License
N: Compact Mode Firefox Css
W: https://github.com/Godiesc/compactmodefirefoxcss
C: Copyright (c) 2021 Godiesc
@ -161,6 +191,11 @@ W: https://github.com/MrOtherGuy/firefox-csshacks
C: Copyright (c) 2018 MrOtherGuy
L: MPL 2.0
N: Firefox Custom CSS
W: https://github.com/hakan-demirli/Firefox_Custom_CSS
C: Copyright (c) 2022 hakan-demirli
L: MIT
N: Fluent UI System Icons
W: https://github.com/microsoft/fluentui-system-icons
C: Copyright (c) 2020 Microsoft Corporation

40
README.org
View file

@ -12,7 +12,8 @@
- [[#why-proton][WHY Proton?]]
- [[#why-not-proton][WHY Not Proton?]]
- [[#padding-comparisons][Padding Comparisons]]
- [[#contributors][Contributors]]
- [[#sponsors--contributors][Sponsors & Contributors]]
- [[#bug--questions][Bug / Questions?]]
- [[#faq][FAQ]]
:END:
@ -29,6 +30,12 @@ Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-u
-----
🔔🔔 Is your Firefox version =v102= or lower?
You [[https://github.com/black7375/Firefox-UI-Fix/wiki/Compatibility-Issues-Solution#accent-color-at-v102-or-lower][have to set]] =userChrome.compatibility.accent_color= to =true= additionally.
-----
** Introduction
[[https://wiki.mozilla.org/Firefox/Proton][Proton]] is Firefox's new design, starting from Firefox 89. \\
[[https://design.firefox.com/photon/][Photon]] is the old design of Firefox which was used until version 88.
@ -65,7 +72,7 @@ Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-u
- Panel
- Menu
- Density
- Others...
- Others…
- *Tab Bar Layouts*
- Tabs on Bottom
- One Liner
@ -77,7 +84,7 @@ Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-u
- Context Line: like Photon
- Bottom Rounding: Natural
- MultiSelected
- Adjust Color: Easily recognizable.
- Adjust Color: Easily recognizable
- Unselect:
- Divide Line: like Photon
- Unloaded:
@ -90,7 +97,7 @@ Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-u
- Show Favicon: Always show favicon
- PIP Icon
- Container Tab:
- Highlight line position: Displayed under tab.
- Highlight line position: Displayed under tab
- *Button Design*
- New tab: like Photon
- *Activity Stream Design*
@ -137,14 +144,15 @@ Windows users: Run with powershell ([[https://github.com/black7375/Firefox-UI-Fi
- Select ":package: Download ZIP"
2. Find your profile directory
- Open =about:support= in a new tab
- Find the =Profile Folder= entry and click the =Open Folder= button
- Find the =Profile Directory(Linux)= / =Profile Folder(Windows)= entry
- Click the =Open Directory(Linux)= / =Open Folder(Windows)= button
3. Copy downloaded files
- Extract the downloaded zip file
- Copy the =user.js= file to the previously opened profile directory
- Create a new directory inside your profile directory called =chrome=
- Copy the remaining files from the extracted zip-file into previously created the =chrome= directory
4. Restart Firefox
- Click the =Clear startup cache...= at the top of =about:support=
- Click the =Clear startup cache…= at the top of =about:support=
If you prefer Proton(89 or above), see [[https://github.com/black7375/Firefox-UI-Fix][Original Lepton]].\\
If you prefer Proton tab shape, see [[https://github.com/black7375/Firefox-UI-Fix/tree/proton-style][Lepton's proton-style]].
@ -186,14 +194,30 @@ Windows users: Run with powershell ([[https://github.com/black7375/Firefox-UI-Fi
- Lepton
** Contributors
** Sponsors & Contributors
Thanks to all contributors to this project for providing help and developing features!
Thanks to all sponsors & contributors to this project for providing help and developing features!
*Sponsors*
[[https://www.oss.kr/][https://user-images.githubusercontent.com/25581533/203210367-9f2eed69-666a-4218-acde-128892aa09d8.png]]
[[https://github.com/ojaha065][@@html:<img src="https://avatars.githubusercontent.com/u/37581768?s=60&v=4"/>@@]]
[[https://github.com/DPS0340][@@html:<img src="https://avatars.githubusercontent.com/u/32592965?s=60&v=4"/>@@]]
[[https://github.com/ZachKnife1][@@html:<img width="60" height="60" src="https://avatars.githubusercontent.com/u/114311925?s=60&v=4"/>@@]]
[[https://github.com/kanlukasz][@@html:<img src="https://avatars.githubusercontent.com/u/30685349?s=60&v=4"/>@@]]
[[https://github.com/nikkehtine][@@html:<img src="https://avatars.githubusercontent.com/u/27138416?s=60&v=4"/>@@]]
*Contributors*
[[https://github.com/black7375/Firefox-UI-Fix/graphs/contributors][@@html:<img src="https://contrib.rocks/image?repo=black7375/Firefox-UI-Fix"/>@@]]
A list of all contributors can be found in [[./CREDITS][CREDITS]].
** Bug / Questions?
If you found a bug, please contact [[https://github.com/black7375/Firefox-UI-Fix/issues][issue]]. \\
If you have any questions or inquiries, please contact [[https://github.com/black7375/Firefox-UI-Fix/discussions][discussions]].
** FAQ
- *Black pixels around the selected tab bottom corners* \\

12
__tests__/accent_color.test.scss
View file

@ -7,6 +7,7 @@
@include output {
@include AccentColor {
body {
border-color: $accentBorder;
background-color: $accentColor;
color: $accentTextColor;
}
@ -14,11 +15,13 @@
}
@include expect {
body {
border-color: ActiveBorder;
background-color: AccentColor;
color: AccentColorText;
}
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
body {
border-color: -moz-accent-color;
background-color: -moz-accent-color;
color: -moz-accent-color-foreground;
}
@ -32,10 +35,12 @@
:root {
@include AccentColor {
// Don't use like this!!
--uc-accent-border: $accentBorder;
--uc-accent-color: $accentColor;
--uc-accent-text-color: $accentTextColor;
// Use like this
--uc-accent-border: #{$accentBorder};
--uc-accent-color: #{$accentColor};
--uc-accent-text-color: #{$accentTextColor};
}
@ -43,15 +48,19 @@
}
@include expect {
:root {
--uc-accent-border: $accentBorder;
--uc-accent-color: $accentColor;
--uc-accent-text-color: $accentTextColor;
--uc-accent-border: ActiveBorder;
--uc-accent-color: AccentColor;
--uc-accent-text-color: AccentColorText;
}
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
:root {
--uc-accent-border: $accentBorder;
--uc-accent-color: $accentColor;
--uc-accent-text-color: $accentTextColor;
--uc-accent-border: -moz-accent-color;
--uc-accent-color: -moz-accent-color;
--uc-accent-text-color: -moz-accent-color-foreground;
}
@ -64,6 +73,7 @@
@include output {
@include AccentColor("Highlight") {
body {
border-color: $accentBorder;
background-color: $accentColor;
color: $accentTextColor;
}
@ -71,11 +81,13 @@
}
@include expect {
body {
border-color: ActiveBorder;
background-color: AccentColor;
color: AccentColorText;
}
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
body {
border-color: -moz-accent-color;
background-color: Highlight;
color: HighlightText;
}

85
__tests__/color_scheme.test.scss
View file

@ -1,8 +1,11 @@
@use "true" as *;
@use "example" as *;
@use "../src/utils/color_scheme";
@use "../src/utils/mode";
@include test-module("Color scheme is dark - ESR [mix]") {
@include mode.ESR;
@include test-module("Color scheme is dark [mix]") {
@include test("simple") {
@include assert {
@include output {
@ -38,7 +41,9 @@
}
}
@include test-module("Color scheme is light [mix]") {
@include test-module("Color scheme is light - ESR [mix]") {
@include mode.ESR;
@include test("simple") {
@include assert {
@include output {
@ -74,6 +79,82 @@
}
}
@include test-module("Color scheme is dark - Standard [mix]") {
@include mode.STANDARD;
@include test("simple") {
@include assert {
@include output {
@include color_scheme.Dark {
@include example;
}
}
@include expect {
@media (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 (prefers-color-scheme: dark) {
@include example_tag {
@include example_property;
}
}
}
}
}
}
@include test-module("Color scheme is light - Standard [mix]") {
@include mode.STANDARD;
@include test("simple") {
@include assert {
@include output {
@include color_scheme.Light {
@include example;
}
}
@include expect {
@media (prefers-color-scheme: light) {
@include example;
}
}
}
}
@include test("simple reversed") {
@include assert {
@include output {
@include example_tag {
@media (prefers-color-scheme: light) {
@include example_property;
}
}
}
@include expect {
@media (prefers-color-scheme: light) {
@include example_tag {
@include example_property;
}
}
}
}
}
}
@include test-module("Color contrast [mix]") {
@include test("simple") {
@include assert {

4
__tests__/each.test.scss
View file

@ -11,7 +11,7 @@
}
}
@include expect {
@-moz-document url(about:home) {
@#{-moz-document} url(about:home) {
@include example;
}
}
@ -27,7 +27,7 @@
}
}
@include expect {
@-moz-document url(about:home), url(about:newtab) {
@#{-moz-document} url(about:home), url(about:newtab) {
@include example;
}
}

16
__tests__/list.test.scss
View file

@ -21,6 +21,22 @@ $dupList: (ab cd efgh efgh efgh ijk);
}
}
@include test-module("Remove at list using list [fn]") {
@include test("simple") {
@include assert-equal(
list.remove-list($simpleList, ("cd" "efgh")),
(ab ijk)
);
}
@include test("duplicate") {
@include assert-equal(
list.remove-list($dupList, ("cd" "efgh")),
(ab ijk)
);
}
}
@include test-module("Convert to str [fn]") {
@include test("simple") {
@include assert-equal(

57
__tests__/mode.test.scss Normal file
View file

@ -0,0 +1,57 @@
@use "true" as *;
@use "example" as *;
@use "../src/utils/mode";
@include test-module("ESR Mode [mix]") {
@include mode.ESR;
@include test("simple") {
@include assert {
@include output {
@if mode.isESR() {
@include example;
}
}
@include expect {
@include example;
}
}
@include assert {
@include output {
@if mode.isSTANDARD() {
@include example;
}
}
@include expect {
// IGNORE
}
}
}
}
@include test-module("STANDARD Mode [mix]") {
@include mode.STANDARD;
@include test("simple") {
@include assert {
@include output {
@if mode.isESR() {
@include example;
}
}
@include expect {
// IGNORE
}
}
@include assert {
@include output {
@if mode.isSTANDARD() {
@include example;
}
}
@include expect {
@include example;
}
}
}
}

65
__tests__/moz_document.test.scss Normal file
View file

@ -0,0 +1,65 @@
@use "true" as *;
@use "example" as *;
@use "../src/utils/moz_document" as *;
@include test-module("Moz Documents [mix]") {
@include test("simple") {
@include assert {
@include output {
@include moz-document(unobservable-document) {
@include example;
}
@include moz-document(url "about:downloads") {
@include example;
}
@include moz-document(url-prefix "about:") {
@include example;
}
@include moz-document(regexp "^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
@include example;
}
}
@include expect {
@-moz-document #{unobservable-document()} { // Invalid function name.
@include example;
}
@-moz-document url("about:downloads") {
@include example;
}
@-moz-document url-prefix("about:") {
@include example;
}
@-moz-document regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
@include example;
}
}
}
}
@include test("multiple") {
@include assert {
@include output {
@include moz-document(
url "about:downloads",
url-prefix "about:",
regexp "^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$"
) {
@include example;
}
@include moz-document(
url-prefix "about:cache",
url-prefix "about:checkerboard"
) {
@include example;
}
}
@include expect {
@-moz-document url("about:downloads"), url-prefix("about:"), regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
@include example;
}
@-moz-document url-prefix("about:cache"), url-prefix("about:checkerboard") {
@include example;
}
}
}
}
}

238
__tests__/native_menu.test.scss
View file

@ -1,12 +1,19 @@
@use "true" as *;
@use "example" as *;
@use "../src/utils/native_menu";
@use "../src/utils/mode";
@include test-module("Native Menu Option - ESR [mix]") {
@include mode.ESR;
@include test-module("Native Menu Option [mix]") {
@include test("simple") {
@include assert {
@include output {
@include native_menu.NativeMenu {
@include native_menu.NativeToolkitMenu {
@include example;
}
@include native_menu.NativeMenuPopup {
@include example;
}
}
@ -14,6 +21,233 @@
@supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") {
@include example;
}
menupopup:is(#historyMenuPopup, #bookmarksMenuPopup),
menupopup:not([placespopup="true"]) {
@include example;
}
}
}
}
@include test("native menu - with windows media") {
@include assert {
@include output {
@include native_menu.NativeMenu(true) {
@include example;
}
@include native_menu.NonNativeMenu(true) {
@include example;
}
@include native_menu.WinNativeMenu(true) {
@include example;
}
@include native_menu.WinNonNativeMenu(true) {
@include example;
}
}
@include expect {
@media not (-moz-windows-non-native-menus) {
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows) {
@include example;
}
}
@supports not -moz-bool-pref("userChrome.theme.non_native_menu") {
@media (-moz-gtk-csd-available) {
@include example;
}
}
@media (-moz-windows-non-native-menus) {
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows) {
@include example;
}
}
@supports -moz-bool-pref("userChrome.theme.non_native_menu") {
@media (-moz-gtk-csd-available) {
@include example;
}
}
@media not (-moz-windows-non-native-menus) {
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows) {
@include example;
}
}
@media (-moz-windows-non-native-menus) {
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows) {
@include example;
}
}
}
}
}
@include test("native menu - without windows media") {
@include assert {
@include output {
@include native_menu.NativeMenu {
@include example;
}
@include native_menu.NonNativeMenu {
@include example;
}
@include native_menu.WinNativeMenu {
@include example;
}
@include native_menu.WinNonNativeMenu {
@include example;
}
}
@include expect {
@media not (-moz-windows-non-native-menus) {
@include example;
}
@supports not -moz-bool-pref("userChrome.theme.non_native_menu") {
@media (-moz-gtk-csd-available) {
@include example;
}
}
@media (-moz-windows-non-native-menus) {
@include example;
}
@supports -moz-bool-pref("userChrome.theme.non_native_menu") {
@media (-moz-gtk-csd-available) {
@include example;
}
}
@media not (-moz-windows-non-native-menus) {
@include example;
}
@media (-moz-windows-non-native-menus) {
@include example;
}
}
}
}
}
@include test-module("Native Menu Option - Standard [mix]") {
@include mode.STANDARD;
@include test("simple") {
@include assert {
@include output {
@include native_menu.NativeToolkitMenu {
@include example;
}
@include native_menu.NativeMenuPopup {
@include example;
}
}
@include expect {
@supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") {
@include example;
}
menupopup:is(#historyMenuPopup, #bookmarksMenuPopup),
menupopup:not([placespopup="true"]) {
@include example;
}
}
}
}
@include test("native menu - with windows media") {
@include assert {
@include output {
@include native_menu.NativeMenu(true) {
@include example;
}
@include native_menu.NonNativeMenu(true) {
@include example;
}
@include native_menu.WinNativeMenu(true) {
@include example;
}
@include native_menu.WinNonNativeMenu(true) {
@include example;
}
}
@include expect {
@supports not -moz-bool-pref("userChrome.theme.non_native_menu") {
@media (-moz-gtk-csd-available) {
@include example;
}
}
// Only Windows
@media (-moz-platform: windows) {
@include example;
}
@supports -moz-bool-pref("userChrome.theme.non_native_menu") {
@media (-moz-gtk-csd-available) {
@include example;
}
}
// IGNORE
// Only Windows
@media (-moz-platform: windows) {
@include example;
}
}
}
}
@include test("native menu - without windows media") {
@include assert {
@include output {
@include native_menu.NativeMenu {
@include example;
}
@include native_menu.NonNativeMenu {
@include example;
}
@include native_menu.WinNativeMenu {
@include example;
}
@include native_menu.WinNonNativeMenu {
@include example;
}
}
@include expect {
@supports not -moz-bool-pref("userChrome.theme.non_native_menu") {
@media (-moz-gtk-csd-available) {
@include example;
}
}
// AS Windows
@media (-moz-platform: windows) {
@include example;
}
@supports -moz-bool-pref("userChrome.theme.non_native_menu") {
@media (-moz-gtk-csd-available) {
@include example;
}
}
// IGNORE
// AS Windows
@media (-moz-platform: windows) {
@include example;
}
}
}
}

100
__tests__/option.test.scss
View file

@ -32,6 +32,48 @@
}
}
}
@include test("simple `and`") {
@include assert {
@include output {
@include option.Option("userChrome.tab.photon" "userChrome.padding.photon") {
@include example;
}
}
@include expect {
@supports (-moz-bool-pref("userChrome.tab.photon") and -moz-bool-pref("userChrome.padding.photon")) {
@include example;
}
}
}
}
@include test("multiple `and`") {
@include assert {
@include output {
@include option.Option("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow") {
@include example;
}
@include option.Option("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow", "userChrome.icon.panel_full") {
@include example;
}
@include option.Option("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow" "userChrome.icon.panel_full") {
@include example;
}
}
@include expect {
@supports (-moz-bool-pref("userChrome.tab.photon") and -moz-bool-pref("userChrome.padding.photon")) or -moz-bool-pref("userChrome.tab.box_shadow") {
@include example;
}
@supports (-moz-bool-pref("userChrome.tab.photon") and -moz-bool-pref("userChrome.padding.photon")) or -moz-bool-pref("userChrome.tab.box_shadow") or -moz-bool-pref("userChrome.icon.panel_full") {
@include example;
}
@supports (-moz-bool-pref("userChrome.tab.photon") and -moz-bool-pref("userChrome.padding.photon")) or (-moz-bool-pref("userChrome.tab.box_shadow") and -moz-bool-pref("userChrome.icon.panel_full")) {
@include example;
}
}
}
}
}
@include test-module("If not exist pref [mx]") {
@ -50,5 +92,61 @@
}
}
// Need multiple test
@include test("multiple") {
@include assert {
@include output {
@include option.NotOption("userChrome.tab.photon", "userChrome.padding.photon") {
@include example;
}
}
@include expect {
@supports (not -moz-bool-pref("userChrome.tab.photon")) or (not -moz-bool-pref("userChrome.padding.photon")) {
@include example;
}
}
}
}
// @include test("simple `and`") {
// @include assert {
// @include output {
// @include option.NotOption("userChrome.tab.photon" "userChrome.padding.photon") {
// @include example;
// }
// }
// @include expect {
// // top level parens
// @supports ((not -moz-bool-pref("userChrome.tab.photon")) and (not -moz-bool-pref("userChrome.padding.photon"))) {
// @include example;
// }
// }
// }
// }
@include test("multiple `and`") {
@include assert {
@include output {
@include option.NotOption("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow") {
@include example;
}
@include option.NotOption("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow", "userChrome.icon.panel_full") {
@include example;
}
@include option.NotOption("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow" "userChrome.icon.panel_full") {
@include example;
}
}
@include expect {
@supports ((not -moz-bool-pref("userChrome.tab.photon")) and (not -moz-bool-pref("userChrome.padding.photon"))) or (not -moz-bool-pref("userChrome.tab.box_shadow")) {
@include example;
}
@supports ((not -moz-bool-pref("userChrome.tab.photon")) and (not -moz-bool-pref("userChrome.padding.photon"))) or (not -moz-bool-pref("userChrome.tab.box_shadow")) or (not -moz-bool-pref("userChrome.icon.panel_full")) {
@include example;
}
@supports ((not -moz-bool-pref("userChrome.tab.photon")) and (not -moz-bool-pref("userChrome.padding.photon"))) or ((not -moz-bool-pref("userChrome.tab.box_shadow")) and (not -moz-bool-pref("userChrome.icon.panel_full"))) {
@include example;
}
}
}
}
}

180
__tests__/os.test.scss
View file

@ -1,9 +1,11 @@
@use "true" as *;
@use "example" as *;
@use "../src/utils/os" as *;
@use "../src/utils/mode";
@include test-module("Create OS related media - ESR [mix]") {
@include mode.ESR;
// TODO: Need more tests..
@include test-module("Create OS related media [mix]") {
@include test("win7") {
@include assert {
@include output {
@ -102,7 +104,7 @@
}
}
@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) {
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows) {
@include example;
}
}
@ -135,7 +137,7 @@
}
}
@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) {
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows), (-moz-mac-big-sur-theme: 0), (-moz-gtk-csd-available) {
@include example;
}
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
@ -144,4 +146,174 @@
}
}
}
@include test("windows classic theme") {
@include assert {
@include output {
@include WinClassic {
@include example;
}
}
@include expect {
@media (-moz-windows-classic) {
@include example;
}
}
}
}
}
@include test-module("Create OS related media - Standard [mix]") {
@include mode.STANDARD;
@include test("win7") {
@include assert {
@include output {
@include OS($win7) {
@include example;
}
}
@include expect {
// IGNORE
}
}
}
@include test("win8") {
@include assert {
@include output {
@include OS($win8) {
@include example;
}
}
@include expect {
// IGNORE
}
}
}
@include test("win10") {
@include assert {
@include output {
@include OS($win10) {
@include example;
}
}
@include expect {
// AS Windows
@media (-moz-platform: windows) {
@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-platform: windows) {
@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-platform: windows), (-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-platform: windows), (-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("windows classic theme") {
@include assert {
@include output {
@include WinClassic {
@include example;
}
}
@include expect {
// IGNORE
}
}
}
}

5
__tests__/scss.spec.js
View file

@ -10,5 +10,8 @@ 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 }));
sassTrue.runSass(
{describe, it},
file
);
});

2880
css/leptonChrome.css generated
View file

File diff suppressed because it is too large Load diff

13650
css/leptonChromeESR.css generated Normal file
View file

File diff suppressed because it is too large Load diff

661
css/leptonContent.css generated
View file

@ -1,5 +1,37 @@
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
/** Compatibility *************************************************************/
@-moz-document url-prefix("about:preferences") {
.content-blocking-warning.info-box-container > hbox > .content-blocking-warning-image {
margin-inline-start: -7px !important;
margin-inline-end: 8px !important;
width: 20px !important;
}
#pane-experimental-search-results-header,
#pane-experimental-subtitle {
min-height: 27px !important;
padding-inline-start: 35px !important;
}
#firefoxExperimentalCategory:not([hidden="true"]) {
display: inline-block;
}
#firefoxExperimentalCategory > label {
float: left;
}
#firefoxExperimentalCategory > hbox {
transform: translateY(5px);
}
#pane-experimental-featureGates > html|p[data-l10n-id="pane-experimental-description2"] {
border-bottom: 1px solid var(--in-content-border-color);
padding-bottom: 1.5em;
}
}
@-moz-document url-prefix("about:addons") {
#updates-message + .page-options-menu > .more-options-button {
box-sizing: content-box;
padding: 0 !important;
}
}
/** Video player **************************************************************/
/* Control Bar Size */
@supports -moz-bool-pref("userContent.player.size") {
@ -39,7 +71,7 @@
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); */
}
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
audio {
--box-shadow1: rgba(249, 249, 250, 0.12);
--box-shadow2: rgba(91, 91, 102, 0.12);
@ -242,7 +274,8 @@
}
}
}
} /** Activity Stream - Menu Icons ********************************************/
}
/** Activity Stream - Menu Icons ********************************************/
@supports -moz-bool-pref("userChrome.icon.context_menu") {
.context-menu-list .context-menu-item button {
padding-inline-start: 0 !important;
@ -251,6 +284,7 @@
/* Color */
-moz-context-properties: fill, fill-opacity, stroke !important;
fill: currentColor !important;
stroke: currentColor;
/* Layout */
background-size: 16px !important;
background-repeat: no-repeat !important;
@ -333,16 +367,20 @@
transition: background 0.5s var(--animation-easing-function);
}
/* Search Bar */
.search-inner-wrapper input {
.search-wrapper .search-inner-wrapper > input,
.search-wrapper .search-inner-wrapper > .search-handoff-button {
transition: 1s var(--animation-easing-function);
transition-property: border-color, box-shadow;
}
.search-wrapper .search-inner-wrapper:active input,
.search-wrapper input:focus {
.search-wrapper .search-inner-wrapper:active > input,
.search-wrapper .search-inner-wrapper:active > .search-handoff-button,
.search-wrapper .search-inner-wrapper > input:focus,
.search-wrapper .search-inner-wrapper > .search-handoff-button:focus {
transition: border-color 0.5s var(--animation-easing-function), box-shadow 1s var(--animation-easing-function);
}
@supports -moz-bool-pref("userContent.page.field_border") {
.search-wrapper .search-inner-wrapper:hover input {
.search-wrapper .search-inner-wrapper:hover > input,
.search-wrapper .search-inner-wrapper:hover > .search-handoff-button {
border-color: var(--newtab-primary-action-background) !important;
transition: border-color 0.5s var(--animation-easing-function);
}
@ -375,7 +413,7 @@
--newtab-search-dropdown-color: var(--newtab-search-background-color) !important;
--newtab-element-hover-color: color-mix(in srgb, currentColor 9%, transparent) !important;
}
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
#root {
/* Default Dark Mode */
--newtab-search-background-color: rgba(66, 65, 77, 1); /* Same as dark theme's --panel-background */
@ -404,6 +442,7 @@
}
#contentSearchSettingsButton::before {
content: url("chrome://global/skin/icons/settings.svg") !important;
display: inline-flex;
display: -moz-inline-box;
/* Color */
-moz-context-properties: fill, fill-opacity !important;
@ -442,12 +481,29 @@
fill: var(--newtab-icon-secondary-color) !important;
}
}
/** Activity Stream - Hide Firefox's logo ***********************************/
@supports -moz-bool-pref("userContent.newTab.hidden_logo") {
.logo-and-wordmark {
display: none !important;
}
.outer-wrapper:not(.fixed-search) .search-wrapper {
padding-top: 0 !important;
}
}
/** Activity Stream - Hide Firefox's logo ***********************************/
@supports -moz-bool-pref("userContent.newTab.background_image") {
body {
background-image: var(--uc-newTab-wallpaper, url("../icons/Forest-trees-sunset-art-picture_3840x2160.jpg"));
background-size: cover; /* or auto auto */
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
}
}
/** Error Page - Restore illustrations ****************************************/
@supports -moz-bool-pref("userContent.page.illustration") {
@-moz-document url-prefix("about:neterror"),
url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"),
url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml")
@-moz-document url-prefix("about:neterror"), url-prefix("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"), url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml")
{
/* Illustrations Position */
#errorPageContainer,
@ -477,12 +533,7 @@
padding-inline-start: 38%;
}
}
@-moz-document url-prefix("about:neterror?e=connectionFailure"),
url-prefix("about:neterror?e=netInterrupt"),
url-prefix("about:neterror?e=netReset"),
url-prefix("about:neterror?e=netTimeout"),
url-prefix("about:neterror?e=netOffline"),
url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml")
@-moz-document url-prefix("about:neterror?e=connectionFailure"), url-prefix("about:neterror?e=netInterrupt"), url-prefix("about:neterror?e=netReset"), url-prefix("about:neterror?e=netTimeout"), url-prefix("about:neterror?e=netOffline"), url-prefix("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml")
{
:root {
--uc-error-llustration: url(../icons/error-connection-failure.svg);
@ -493,15 +544,12 @@
--uc-error-llustration: url(../icons/error-server-not-found.svg);
}
}
@-moz-document url-prefix("about:neterror?e=blockedByPolicy"),
url-prefix("about:neterror?e=deniedPortAccess"),
url-prefix("about:neterror?e=malformedURI") {
@-moz-document url-prefix("about:neterror?e=blockedByPolicy"), url-prefix("about:neterror?e=deniedPortAccess"), url-prefix("about:neterror?e=malformedURI") {
:root {
--uc-error-llustration: url(chrome://browser/skin/illustrations/error-malformed-url.svg);
}
}
@-moz-document url-prefix("about:neterror?e=clockSkewError"),
url-prefix("about:neterror?e=nssFailure") {
@-moz-document url-prefix("about:neterror?e=clockSkewError"), url-prefix("about:neterror?e=nssFailure") {
:root {
--uc-error-llustration: url(../icons/blue-berror.svg);
}
@ -549,17 +597,20 @@
}
}
}
@-moz-document url-prefix("about:preferences") {
#no-results-message::after {
content: url("../icons/no-search-results.svg");
width: 380px;
height: 293px;
margin-top: 64px;
margin-inline: auto;
}
}
}
/** Fully Dark Mode ***********************************************************/
/*= Fully Dark Mode - Dark Mode Colors =======================================*/
@supports -moz-bool-pref("userContent.page.proton_color") {
@-moz-document url-prefix("about:"),
url-prefix("chrome://browser/content/places/places.xhtml"),
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://)).*/$")
@-moz-document url-prefix("about:"), url-prefix("chrome://"), 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:///).*/$")
{
/*= Default Colors - Hard Coded ==============================================*/
/* Based on chrome://global/skin/in-content/common.css */
@ -666,8 +717,9 @@
--card-shadow: var(--shadow-10);
--card-outline-color: var(--grey-30);
--card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color);
--uc-warning-icon-bgcolor: #ffa436;
}
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
:host,
:root {
/* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */
@ -702,10 +754,84 @@
--in-content-link-color-visited: var(--in-content-link-color);
--card-outline-color: var(--grey-60);
--dialog-warning-text-color: var(--red-40);
--uc-warning-icon-bgcolor: #ffbd4f;
}
}
@media (prefers-contrast) {
:host,
:root {
--uc-warning-icon-bgcolor: var(--in-content-page-color);
}
}
/*= Menu color #477 ==========================================================*/
@media (-moz-platform: windows) {
:root {
/* Override some menu color variables for light browser themes. */
--menuitem-hover-background-color: #e0e0e6;
--menu-background-color: #f9f9fb;
--menu-color: #15141a;
--menuitem-disabled-hover-background-color: rgba(224, 224, 230, 0.4);
--menu-disabled-color: rgba(21, 20, 26, 0.4);
--menu-border-color: #cfcfd8;
--menu-icon-opacity: 0.7;
/* Declare menu colors for dark themes, but don't override anything yet. */
--dark-menuitem-hover-background-color: #52525e;
--dark-menu-background-color: #2b2a33;
--dark-menu-color: #fbfbfe;
--dark-menuitem-disabled-hover-background-color: rgba(82, 82, 94, 0.4);
--dark-menu-disabled-color: rgba(251, 251, 254, 0.4);
--dark-menu-border-color: #5b5b66;
--dark-menu-icon-opacity: 1;
}
/* Override the menu color variables for dark browser themes. */
}
@media (-moz-platform: windows) and (prefers-color-scheme: dark) {
:root {
--menuitem-hover-background-color: var(--dark-menuitem-hover-background-color);
--menu-background-color: var(--dark-menu-background-color);
--menu-color: var(--dark-menu-color);
--menuitem-disabled-hover-background-color: var(--dark-menuitem-disabled-hover-background-color);
--menu-disabled-color: var(--dark-menu-disabled-color);
--menu-border-color: var(--dark-menu-border-color);
--menu-icon-opacity: var(--dark-menu-icon-opacity);
}
}
@supports -moz-bool-pref("userChrome.theme.non_native_menu") {
@media (-moz-gtk-csd-available) {
:root {
/* Override some menu color variables for light browser themes. */
--menuitem-hover-background-color: #e0e0e6;
--menu-background-color: #f9f9fb;
--menu-color: #15141a;
--menuitem-disabled-hover-background-color: rgba(224, 224, 230, 0.4);
--menu-disabled-color: rgba(21, 20, 26, 0.4);
--menu-border-color: #cfcfd8;
--menu-icon-opacity: 0.7;
/* Declare menu colors for dark themes, but don't override anything yet. */
--dark-menuitem-hover-background-color: #52525e;
--dark-menu-background-color: #2b2a33;
--dark-menu-color: #fbfbfe;
--dark-menuitem-disabled-hover-background-color: rgba(82, 82, 94, 0.4);
--dark-menu-disabled-color: rgba(251, 251, 254, 0.4);
--dark-menu-border-color: #5b5b66;
--dark-menu-icon-opacity: 1;
}
/* Override the menu color variables for dark browser themes. */
}
@media (-moz-gtk-csd-available) and (prefers-color-scheme: dark) {
:root {
--menuitem-hover-background-color: var(--dark-menuitem-hover-background-color);
--menu-background-color: var(--dark-menu-background-color);
--menu-color: var(--dark-menu-color);
--menuitem-disabled-hover-background-color: var(--dark-menuitem-disabled-hover-background-color);
--menu-disabled-color: var(--dark-menu-disabled-color);
--menu-border-color: var(--dark-menu-border-color);
--menu-icon-opacity: var(--dark-menu-icon-opacity);
}
}
}
@supports -moz-bool-pref("userContent.page.proton_color.dark_blue_accent") {
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
:host,
:root {
/* Color Memo
@ -781,7 +907,7 @@
}
}
@supports -moz-bool-pref("userContent.page.dark_mode") {
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
/*= Addons.org =============================================================*/
@-moz-document url-prefix("https://addons.mozilla.org")
{
@ -1482,8 +1608,7 @@
.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 (-moz-toolbar-prefers-color-scheme: dark) and (min-width: 768px),
screen and (prefers-color-scheme: dark) and (min-width: 768px) {
@media screen and (prefers-color-scheme: dark) and (min-width: 768px) {
.mzp-c-menu-panel {
box-shadow: 0 16px 16px -16px rgba(255, 255, 255, 0.3) !important;
}
@ -1642,17 +1767,35 @@
box-shadow: 0 0 0 3px color-mix(in srgb, var(--in-content-primary-button-background-hover) 80%, transparent) !important;
}
}
@supports -moz-bool-pref("userContent.page.dark_mode.pdf") {
@-moz-document unobservable-document() {
@-moz-document regexp("^(?!.*\\.pdf\\?n).*") {
#outerContainer {
--sidebaritem-bg-color: #38383d;
--uc-pdf-dark-filter: grayscale(10%) invert(90%);
}
#sidebarContainer > #sidebarContent > #thumbnailView .thumbnailImage {
filter: var(--uc-pdf-dark-filter);
box-shadow: 0 0 0 1px hsla(0deg, 0%, 100%, 0.5), 0 2px 8px hsla(0deg, 0%, 100%, 0.3) !important;
}
#viewerContainer > #viewer > .page > .canvasWrapper > canvas {
filter: var(--uc-pdf-dark-filter);
}
}
}
}
}
}
/** Fully Proton Mode *********************************************************/
@supports -moz-bool-pref("userContent.page.proton") {
/*= Common contents ==========================================================*/ /*= 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://)).*/$")
@-moz-document url-prefix("about:"), url-prefix("chrome://pippki/content/"), url-prefix("chrome://browser/content/")
{
xul|treecols {
border-bottom-color: var(--in-content-box-border-color) !important;
}
}
@-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,
@ -1715,6 +1858,13 @@
/* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */
font-size: 1em !important;
}
@supports -moz-bool-pref("userChrome.rounding.square_button") {
button,
select,
input[type="color"] {
border-radius: 0 !important;
}
}
button {
font-weight: 600 !important;
/* Use the same margin of other elements for the alignment */
@ -1788,6 +1938,11 @@
margin-inline: 0 6px !important;
flex-shrink: 0 !important; /* avoid shrinking inside flex container */
}
@supports -moz-bool-pref("userChrome.rounding.square_checklabel") {
input[type="checkbox"] {
border-radius: 0 !important;
}
}
input[type="checkbox"]:enabled:hover {
background-color: var(--checkbox-unchecked-hover-bgcolor) !important;
}
@ -1837,7 +1992,14 @@
outline: 2px solid var(--in-content-focus-outline-color) !important;
outline-offset: -1px !important; /* Prevents antialiasing around the corners */
}
input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):-moz-ui-invalid,
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;
@ -1853,16 +2015,13 @@
width: 100% !important;
}
}
@-moz-document url-prefix("about:plugins"),
url-prefix("about:cache"),
url-prefix("about:checkerboard") {
@-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") {
@-moz-document url-prefix("about:cache"), url-prefix("about:checkerboard") {
th,
td {
border: 1px solid var(--in-content-table-border-color) !important;
@ -1876,7 +2035,14 @@
@supports -moz-bool-pref("userContent.page.field_border") {
@media (prefers-reduced-motion: no-preference) {
@-moz-document url-prefix("about:") {
html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):not(#newtab-search-text):hover,
html|input:is(
[type="email"],
[type="tel"],
[type="text"],
[type="password"],
[type="url"],
[type="number"]
):not(#newtab-search-text):hover,
html|textarea:hover,
xul|search-textbox:hover {
border-color: var(--in-content-focus-outline-color) !important;
@ -1894,7 +2060,7 @@
--view-source-green: var(--green-80);
--view-source-purple: #800080; /* Like alphenglow */
}
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
:root {
--view-source-green: var(--green-60);
--view-source-purple: #c68aff;
@ -1944,8 +2110,7 @@
}
}
/*= Directory View ===========================================================*/
@-moz-document url-prefix("about:sync-log"),
regexp("^(((jar:)?file:///)|(chrome://)).*/$")
@-moz-document url-prefix("about:sync-log"), regexp("^(((jar:)?file:///)|(chrome://)).*/$")
{
body {
background-color: var(--in-content-box-background) !important;
@ -1996,6 +2161,33 @@
vertical-align: bottom !important;
}
}
/*= about:preferences ========================================================*/
@-moz-document url-prefix("chrome://browser/content")
{
#sanitizeEverythingWarningIcon {
list-style-image: url("chrome://global/skin/icons/warning.svg") !important;
-moz-context-properties: fill;
fill: var(--uc-warning-icon-bgcolor);
width: 48px;
height: 48px;
}
}
@-moz-document url-prefix("about:preferences") {
#handlersView > richlistitem:hover,
#translations-manage-install-list > .translations-manage-language:hover {
background-color: var(--in-content-item-hover);
color: var(--in-content-item-hover-text);
}
#handlersView > richlistitem[selected="true"],
#translations-manage-install-list > .translations-manage-language[selected="true"] {
background-color: var(--in-content-item-selected);
color: var(--in-content-item-selected-text);
}
#handlersView > richlistitem:nth-child(even):not([selected="true"], :hover),
#translations-manage-install-list > .translations-manage-language:nth-child(even):not([selected="true"], :hover) {
background-color: var(--in-content-box-background-odd);
}
}
/*= chrome://browser/content/places/places.xhtml =============================*/
@-moz-document url("chrome://browser/content/places/places.xhtml")
{
@ -2141,6 +2333,7 @@
list-style-image: url("chrome://global/skin/icons/delete.svg") !important;
}
#clearDownloadsButton > .toolbarbutton-icon {
display: inline-flex !important;
display: -moz-inline-box !important;
margin-top: 0;
margin-bottom: 0;
@ -2216,7 +2409,7 @@
--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);
}
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
:root {
--organizer-color: rgb(251, 251, 254);
--organizer-deemphasized-color: rgb(191, 191, 201);
@ -2245,6 +2438,11 @@
padding: 5px !important;
border-radius: 4px !important;
}
@supports -moz-bool-pref("userChrome.rounding.square_button") {
#placesToolbar > toolbarbutton {
border-radius: 0 !important;
}
}
#placesToolbar > toolbarbutton[disabled] {
opacity: 0.6 !important;
}
@ -2267,11 +2465,16 @@
#placesMenu > menu {
appearance: none !important;
color: var(--organizer-color) !important;
border-radius: 4px !important;
padding-block: 5px !important;
padding-inline-start: 5px !important;
border-radius: 4px !important;
margin-inline-end: 2px !important;
}
@supports -moz-bool-pref("userChrome.rounding.square_button") {
#placesMenu > menu {
border-radius: 0 !important;
}
}
#placesMenu > menu[_moz-menuactive="true"],
#placesMenu > menu:hover {
background-color: var(--organizer-hover-background) !important;
@ -2298,6 +2501,12 @@
padding-block: 2px !important;
min-height: 24px !important;
}
@supports -moz-bool-pref("userChrome.rounding.square_field") {
#searchFilter,
#detailsPane html|input {
border-radius: 0 !important;
}
}
#searchFilter[focused] {
box-shadow: var(--organizer-toolbar-field-focus-box-shadow) !important;
background-color: var(--organizer-toolbar-field-background-focused) !important;
@ -2439,6 +2648,12 @@
-moz-context-properties: fill !important;
fill: currentColor !important;
}
@supports -moz-bool-pref("userChrome.rounding.square_button") {
#editBookmarkPanelRows .expander-up,
#editBookmarkPanelRows .expander-down {
border-radius: 0 !important;
}
}
#editBookmarkPanelRows .expander-up:hover,
#editBookmarkPanelRows .expander-down:hover {
background-color: var(--organizer-hover-background) !important;
@ -2472,6 +2687,11 @@
min-height: 20px !important;
padding-inline: 4px !important;
}
@supports -moz-bool-pref("userChrome.rounding.square_field") {
#places input {
border-radius: 0 !important;
}
}
#places input:focus {
outline: 2px solid var(--organizer-outline-color) !important;
outline-offset: -1px !important;
@ -2490,6 +2710,11 @@
border: 1px solid var(--organizer-border-color) !important;
border-radius: 4px !important;
}
@supports -moz-bool-pref("userChrome.rounding.square_field") {
#editBMPanel_tagsSelectorRow > richlistbox {
border-radius: 0 !important;
}
}
#editBMPanel_tagsSelectorRow > richlistbox > richlistitem {
border: 1px solid transparent !important;
}
@ -2559,6 +2784,7 @@
/* From checkbox.css */
menuitem[type="checkbox"] {
appearance: none !important;
align-items: center !important;
-moz-box-align: center !important;
margin: 0px 2px !important;
}
@ -2662,7 +2888,7 @@
outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
}
}
@media (prefers-contrast) {
@media (-moz-gtk-csd-available) and (prefers-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, AccentColor 4%, Field)) !important;
@ -2723,11 +2949,202 @@
}
}
}
/** Rounding ******************************************************************/
@supports -moz-bool-pref("userChrome.rounding.square_button") {
@-moz-document url-prefix("about:"), regexp("^chrome://\\w+/content/.*.xhtml$")
{
button:not(.toggle-button),
.close-icon,
.action-icon::before,
.page-section-header > .twisty,
.closed-tab-li-main,
#categories > .category,
.sidebar-footer-link {
border-radius: 0 !important;
}
}
@-moz-document url-prefix("about:debugging") {
.sidebar-item {
border-radius: 0 !important;
}
}
@-moz-document url-prefix("chrome://browser/content/places/places.xhtml"), url-prefix("about:downloads")
{
.downloadButton > .button-box {
border-radius: 0 !important;
}
}
@-moz-document url-prefix("about:protections") {
#manage-protections,
#sign-up-for-monitor-link,
#get-proxy-extension-link,
#get-vpn-link,
#vpn-banner-link,
.monitor-partial-breaches-link-wrapper,
.monitor-breaches-link-wrapper {
border-radius: 0 !important;
}
}
@-moz-document regexp(".*.pdf$") {
.toolbarButton,
.dropdownToolbarButton,
.secondaryToolbarButton,
.dialogButton {
border-radius: 0 !important;
}
}
}
@supports -moz-bool-pref("userChrome.rounding.square_dialog") {
@-moz-document url("about:home"), url("about:newtab") {
.modal {
border-radius: 0 !important;
}
}
}
@supports -moz-bool-pref("userChrome.rounding.square_checklabel") {
@-moz-document url-prefix("about:"), regexp("^chrome://\\w+/content/.*.xhtml$")
{
input[type="checkbox"]:not(.toggle-button),
.checkbox-check {
border-radius: 0 !important;
}
}
}
@supports -moz-bool-pref("userChrome.rounding.square_field") {
@-moz-document url-prefix("about:"), regexp("^chrome://\\w+/content/.*.xhtml$")
{
input:is(
[type="color"],
[type="email"],
[type="tel"],
[type="text"],
[type="password"],
[type="url"],
[type="number"]
),
textarea,
select,
menulist,
tree,
treecols,
listheader,
richlistbox,
search-textbox,
.web-appearance-choice,
.content-blocking-category,
#translations-manage-install-list {
border-radius: 0 !important;
}
}
@-moz-document url-prefix("about:debugging") {
.default-input {
border-radius: 0 !important;
}
}
@-moz-document url("about:home"), url("about:newtab") {
.search-wrapper .search-handoff-button,
.search-wrapper input {
border-radius: 0 !important;
}
}
@-moz-document regexp(".*.pdf$") {
.toolbarField,
.thumbnailSelectionRing {
border-radius: 0 !important;
}
}
}
@supports -moz-bool-pref("userChrome.rounding.square_menupopup") {
@-moz-document url-prefix("about:"), url-prefix("chrome://")
{
panel,
menupopup {
--panel-border-radius: 0 !important;
}
}
@-moz-document url-prefix("about:addons") {
panel-list {
border-radius: 0 !important;
}
}
@-moz-document url-prefix("about:logins") {
.menu {
border-radius: 0 !important;
}
}
@-moz-document url("about:home"), url("about:newtab") {
.context-menu {
border-radius: 0 !important;
}
}
@-moz-document regexp(".*.pdf$") {
.doorHanger,
.doorHangerRight {
border-radius: 0 !important;
}
}
}
@supports -moz-bool-pref("userChrome.rounding.square_infobox") {
@-moz-document url-prefix("about:"), regexp("^chrome://\\w+/content/.*.xhtml$")
{
/*
* .container is inside shadow DOM,
* and it does not have any other classes,
* but there may be other elements with the same class,
* hence the weird selector.
*/
link[href="chrome://global/content/elements/message-bar.css"] + .container,
.info-box-container:not(.content-blocking-category),
.options-container,
#sanitizeEverythingWarningBox {
border-radius: 0 !important;
}
}
@-moz-document url-prefix("about:debugging") {
.message {
border-radius: 0 !important;
}
}
@-moz-document url-prefix("about:firefoxview") {
.card,
.card::before,
.empty-container,
.synced-tab-a,
.synced-tab-li-placeholder {
border-radius: 0 !important;
}
}
}
@-moz-document url-prefix("about:"), regexp(".*.pdf$") {
@supports -moz-bool-pref("userChrome.rounding.square_dialog") {
dialog,
.dialogBox {
border-radius: 0 !important;
}
}
}
@-moz-document url("chrome://browser/content/places/places.xhtml")
{
/*= Library ==============================================================*/
@supports -moz-bool-pref("userChrome.rounding.square_button") {
#placesToolbar > toolbarbutton,
#placesMenu > menu,
#editBookmarkPanelRows .expander-up,
#editBookmarkPanelRows .expander-down {
border-radius: 0 !important;
}
}
@supports -moz-bool-pref("userChrome.rounding.square_field") {
#searchFilter,
#detailsPane html|input,
#places input #editBMPanel_tagsSelectorRow > richlistbox {
border-radius: 0 !important;
}
}
}
/** Monospace *****************************************************************/
@supports -moz-bool-pref("userContent.page.monospace") {
@-moz-document url-prefix("about:"),
url-prefix("chrome://browser/content/places/places.xhtml"),
regexp("^(((jar:)?file:///)|(chrome://)).*/$")
@-moz-document url-prefix("about:"), url-prefix("chrome://"), regexp("^((jar:)?file:///).*/$")
{
* {
font-family: -moz-fixed;
@ -2737,10 +3154,12 @@
/** Menu - Icons Layout *******************************************************/
@supports not -moz-bool-pref("userChrome.icon.disabled") {
@supports -moz-bool-pref("userChrome.icon.menu") {
@-moz-document url("chrome://browser/content/places/places.xhtml"),
url("about:downloads") {
@-moz-document url("chrome://browser/content/places/places.xhtml"), url("about:downloads")
{
menupopup menuitem:not([type="checkbox"][checked="true"], [type="radio"]),
menupopup menu:not([type="checkbox"][checked="true"], [type="radio"]) {
menupopup menu:not([type="checkbox"][checked="true"], [type="radio"]),
menupopup menuitem:not([type="checkbox"][checked="true"], [type="radio"]) > .menu-iconic-left > .menu-iconic-icon,
menupopup menu:not([type="checkbox"][checked="true"], [type="radio"]) > .menu-iconic-left > .menu-iconic-icon {
-moz-appearance: none !important; /* Linux: menulist */
}
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
@ -2753,6 +3172,7 @@
/* Color */
-moz-context-properties: fill, fill-opacity, stroke !important;
fill: currentColor !important;
stroke: currentColor;
/* Layout */
background-size: 16px !important;
background-repeat: no-repeat !important;
@ -2761,9 +3181,11 @@
/* For native context menus */
@supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") {
:not(menu, #ContentSelectDropdown)
> menupopup
> menupopup:not(.in-menulist)
> menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
:not(menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
:not(menu, #ContentSelectDropdown)
> menupopup:not(.in-menulist)
> menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important;
}
}
@ -2786,39 +3208,17 @@
background-position: var(--uc-menu-background-position) var(--context-menu-background-padding) center !important;
padding-inline-start: var(--context-menu-background-padding) !important;
}
/* Padding - Windows */
@media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) {
:root {
--context-menu-background-padding-default: 2px;
}
}
@media (-moz-os-version: windows-win8), (-moz-platform: windows-win8) {
:root {
--context-menu-background-padding-default: 3px;
}
}
@media (-moz-os-version: windows-win7),
(-moz-platform: windows-win7),
(-moz-os-version: windows-win8),
(-moz-platform: windows-win8) {
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
menu:not(.menu-iconic, .in-menulist, [checked="true"]),
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
> menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
background-position: left var(--context-menu-background-padding) center !important;
padding-inline-start: 0 !important;
}
}
@media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) {
/* Padding - Non Native */
@media (-moz-platform: windows) and (-moz-platform: windows),
(-moz-gtk-csd-available) and (-moz-platform: windows) {
:root {
--context-menu-background-padding: 1em;
--context-menu-text-padding: 24px; /* 16px + 8px */
--context-menu-text-padding-default: 24px;
--context-menu-text-padding: var(--context-menu-text-padding-default);
--menu-background-padding-default: calc(
var(--context-menu-background-padding) + var(--context-menu-text-padding)
);
--bookmark-menu-icon-align-padding: 0px;
}
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
@ -2831,10 +3231,49 @@
margin-left: 0 !important;
}
}
@media (-moz-platform: windows), (-moz-gtk-csd-available) {
@supports -moz-bool-pref("userChrome.theme.non_native_menu") {
@media (-moz-platform: windows) and (-moz-gtk-csd-available),
(-moz-gtk-csd-available) and (-moz-gtk-csd-available) {
:root {
--context-menu-background-padding: 1em;
--context-menu-text-padding-default: 24px;
--context-menu-text-padding: var(--context-menu-text-padding-default);
--menu-background-padding-default: calc(
var(--context-menu-background-padding) + var(--context-menu-text-padding)
);
--bookmark-menu-icon-align-padding: 0px;
}
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
menu:not(.menu-iconic, .in-menulist, [checked="true"]),
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
> menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup)
> menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
padding-inline-start: var(--menu-background-padding-default) !important;
margin-left: 0 !important;
}
}
}
}
/* Padding - Windows */
@media (-moz-platform: windows) {
:root {
--bookmark-menu-icon-text-padding: calc(
var(--context-menu-text-padding) + var(--arrowpanel-menuitem-padding-inline)
);
--bookmark-menu-icon-background-padding: calc(
var(--arrowpanel-menuitem-padding-inline) + var(--bookmark-menu-icon-align-padding)
);
}
}
/* Padding - Linux */
@media (-moz-gtk-csd-available) {
:root {
--context-menu-background-padding-default: 6px;
--context-menu-text-padding: 21px;
}
/* Contextmenu Checkbox Unset */
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menuitem[type="checkbox"] {
@ -2898,7 +3337,7 @@
--menuitem-image: url("../icons/checkmark-circle.svg");
}
.downloadUseSystemDefaultMenuItem {
--menuitem-image: url("chrome://browser/skin/open.svg");
--menuitem-image: url("../icons/toolbarButton-upload.svg");
}
.downloadAlwaysUseSystemDefaultMenuItem {
/* checkbox */
@ -3034,6 +3473,11 @@
#orgUndo {
--menuitem-image: url("../icons/undo.svg");
}
@supports -moz-bool-pref("userChrome.icon.menu.full") {
#orgRedo {
--menuitem-image: url("../icons/redo.svg");
}
}
#orgCut {
--menuitem-image: url("chrome://browser/skin/edit-cut.svg");
}
@ -3061,19 +3505,54 @@
}
/*= maintenanceButtonPopup ===================================================*/
#backupBookmarks {
--menuitem-image: url("chrome://devtools/skin/images/datastore.svg");
--menuitem-image: url("../icons/datastore.svg");
}
@supports -moz-bool-pref("userChrome.icon.menu.full") {
#fileRestoreMenu {
--menuitem-image: url("../icons/datarestore.svg");
}
}
#fileImport {
--menuitem-image: url("../icons/toolbarButton-download.svg");
}
#fileExport {
--menuitem-image: url("chrome://browser/skin/open.svg");
--menuitem-image: url("../icons/toolbarButton-upload.svg");
}
#browserImport {
--menuitem-image: url("chrome://browser/skin/import.svg");
}
}
}
@-moz-document url-prefix("about:addons") {
@supports -moz-bool-pref("userChrome.icon.context_menu") {
button[role="menuitem"] {
background-image: var(--icon, url("../icons/blank.svg")); /* Don't use !important. because of [checked] */
}
panel-item[action="check-for-updates"] {
--icon: url("../icons/refresh-cw.svg");
}
panel-item[action="view-recent-updates"] {
--icon: url("chrome://global/skin/icons/info.svg");
}
panel-item[action="install-from-file"] {
--icon: url("chrome://devtools/skin/images/import.svg");
}
panel-item[action="debug-addons"] {
--icon: url("../icons/bug.svg");
}
panel-item[action="set-update-automatically"] {
--icon: url("chrome://devtools/skin/images/profiler-stopwatch.svg");
}
panel-item[action="reset-update-states"] {
--icon: url("chrome://devtools/skin/images/debugging-workers.svg");
}
panel-item[action="manage-shortcuts"],
panel-item[data-l10n-id="preferences-addon-button"],
panel-item[data-l10n-id="manage-addon-button"] {
--icon: url("chrome://global/skin/icons/settings.svg");
}
}
}
}
}
/** Download Panel ************************************************************/

3721
css/leptonContentESR.css generated Normal file
View file

File diff suppressed because it is too large Load diff

57
docs/Preference.md
View file

@ -50,25 +50,26 @@ 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> =
<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
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
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
?;
<pref-attrs> = ("," <pref-attr>)* (* in default pref files *)
= <empty>; (* in user pref files *)
<pref-attr> = "sticky" | "locked"; (* default pref files only *)
```
## Default Config
@ -145,16 +146,32 @@ Customizations that cannot be done with add-on and [`User Custom CSS`](./README.
- [Bug 1432901 - Prototype loading ES6 Module as JSM](https://bugzilla.mozilla.org/show_bug.cgi?id=1432901)
**How to**
- `<FIREFOX_DIR>/defaults/pref/autoconfig.js`
```javascript
pref("general.config.filename", "config.js"); // alternative to "firefox.cfg", for using highlight
pref("general.config.obscure_value", 0);
pref("general.config.sandbox_enabled", false); // Sandbox needs to be disabled in release and Beta versions
```
- `<FIREFOX_DIR>/config.js`
```javascript
// skip 1st line
try {
const cmanifest = Cc['@mozilla.org/file/directory_service;1'].getService(Ci.nsIProperties).get('UChrm', Ci.nsIFile);
cmanifest.append('utils');
cmanifest.append('chrome.manifest');
if(cmanifest.exists()){
Components.manager.QueryInterface(Ci.nsIComponentRegistrar).autoRegister(cmanifest);
ChromeUtils.import('chrome://userchromejs/content/boot.jsm');
}
} catch(ex) {};
```
**Example**
```javascript
pref("general.config.filename", "config.js"); // alternative to "firefox.cfg", for using highlight
pref("general.config.obscure_value", 0);
```
- [MrOtherGuy/fx-autoconfig](https://github.com/MrOtherGuy/fx-autoconfig)
- [xiaoxiaoflood/firefox-scripts](https://github.com/xiaoxiaoflood/firefox-scripts)
## Using with User Custom CSS
**Related Docs**

10
docs/Project_Structure.md
View file

@ -18,7 +18,7 @@ The overall structure of this project.
root
|- __tests__/: Mixin spec test
|- icons/: Icons, illustrations
|- css/: Build result of SCSS Files
|- css/: Build result of SCSS Files (Don't modify directly!!)
|- docs/: Development Documents
|- src/: Source files
|- src/leptonChrome.scss: Entry of SCSS for Browser UI
@ -32,18 +32,20 @@ root
|- 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!!)
|- userChrome.css: Entry of css for Browser UI (Modify only when customizing!!)
|- userContent.css: Entry of css for Web pages (Modify only when customizing!!)
|- yarn.lock: Auto generated dependency (Don't modify directly!!)
```
If you first come, it's a good idea to see the [`/src/leptonChrome.scss`](/src/leptonChrome.scss) and [`leptonContent.scss`](/src/leptonContent.scss) files to understand the flow.
## 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)
Icons are mainly [FirefoxUX/acorn-icons](https://github.com/FirefoxUX/acorn-icons), [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.

11
docs/README.md
View file

@ -71,23 +71,23 @@ yarn validate
```
### Project Structure
- [Doc: Project\_Structure.md](./Project_Structure.md).
- [Doc: Project\_Structure.md](./Project_Structure.md)
### Rules
This is a rough guideline. (Not forced)
- [Doc: Rules.md](./Rules.md).
- [Doc: Rules.md](./Rules.md)
## Advanced Customizing
### Smart Bookmarks
- [Doc: Smart_Bookmarks.md](./Smart_Bookmarks.md).
- [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).
- [Doc: Preference.md](./Preference.md)
## User Custom CSS
### Basics
@ -103,6 +103,7 @@ Start Guide:
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)
- [MDN: Introducing the CSS Specific](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
- [SASS(SCSS)](https://sass-lang.com/documentation)
- [SASS Live Compile](https://www.sassmeister.com/)
@ -116,4 +117,4 @@ Advanced CSS keywords:
- [UDN: Mozilla CSS extensions](https://udn.realityripple.com/docs/Web/CSS/Mozilla_Extensions)
### Restrictions
- [Doc: Restrictions.md](./Restrictions.md).
- [Doc: Restrictions.md](./Restrictions.md)

17
docs/Restrictions.md
View file

@ -10,6 +10,7 @@
* [`-moz-accent-color`](#-moz-accent-color)
* [Fork Browsers](#fork-browsers)
* [Add-ons](#add-ons)
* [SCSS](#scss)
- [Internals](#internals)
* [CSS Loading Order](#css-loading-order)
* [DOM structure cannot be modified](#dom-structure-cannot-be-modified)
@ -39,6 +40,8 @@ Complex UI emulation is quite tricky. [[Linux's Proton UI Library Chrome](https:
[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)).
In the case of the Mac native menu, there may be a menu that [cannot be displayed icon or added at the OS level](https://github.com/black7375/Firefox-UI-Fix/issues/699).
### Firefox Version
There may be changes that change by version of Firefox.
@ -61,6 +64,7 @@ This project is using SCSS to make a [reusable compatible mixins](../src/utils).
- `:root[lwtheme-mozlightdark]` is removed [#288](https://github.com/black7375/Firefox-UI-Fix/issues/288)
- `-moz-os-version` -> `-moz-platform` [#331](https://github.com/black7375/Firefox-UI-Fix/issues/331)
- Breaking change with `-moz-accent-color`/`-moz-accent-color-foreground` -> `AccentColor`/`AccentColorText` [#433](https://github.com/black7375/Firefox-UI-Fix/issues/433)
- `-moz-box` to `flex` layout [670](https://github.com/black7375/Firefox-UI-Fix/issues/670)
### 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).
@ -76,6 +80,10 @@ The following code will cause extension panels fail to open and trying to open t
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)
After FF `v107`, breakage due to `-moz-box` may occur.
- [Bug 1783934 - Add a way to incrementally migrate -moz-box layout to modern flexbox](https://bugzilla.mozilla.org/show_bug.cgi?id=1783934)
- [Bug 1790616 - Use modern flexbox in the browser toolbox.](https://bugzilla.mozilla.org/show_bug.cgi?id=1790616)
### RTL
@ -93,6 +101,7 @@ Fork browsers have a different installation location ([bash](https://github.com/
List of fork browsers supported by this project:
- [Waterfox](https://www.waterfox.net/)
- [Floorp](https://floorp.app/)
- [LibreWolf](https://librewolf.net/)
- [Tor Browser](https://www.torproject.org/download/)
- [Pulse Browser](https://pulsebrowser.app/)
@ -122,6 +131,14 @@ Legacy addons can be loaded by [Auto config's feature](./Preference.md#auto-conf
List of legacy addons supported by this project:
- [Tab Mix Plus](https://github.com/onemen/TabMixPlus)
### SCSS
Due to [various compatibility](#firefox-version) and [option dependency](https://github.com/black7375/Firefox-UI-Fix/wiki/Options) requirements, we are using a CSS preprocessor, [SCSS](https://sass-lang.com/).
[`-moz-document`](https://developer.mozilla.org/en-US/docs/Web/CSS/@document) has been [deprecated in SCSS](https://sass-lang.com/documentation/breaking-changes/moz-document), and displays a lot of warnings.
Unlike normal cases, this project works because it is [at the UA sheet level](https://bugzilla.mozilla.org/show_bug.cgi?id=1035091), and we have to [hide warnings](https://github.com/black7375/Firefox-UI-Fix/commit/300d3d9c77108520c3757a8898819d8af6a00c62) to show other critical errors.
## Internals
### CSS Loading Order
User CSS (`userChrome.css`, `userContent.css`) is usually loaded first.

10
docs/Rules.md
View file

@ -45,13 +45,15 @@ It comes from [#109](https://github.com/black7375/Firefox-UI-Fix/issues/109#issu
Stable: Only bugfix, Documentation.
- `master`: Common bugfix, documentation.
- `photon-style`: Bugfix, documentation specified in `photon-style`.
- `proton-style`: Bugfix, documentation specified in `proton-style`.
- `photon-style`: Config, documentation specified in `photon-style`.
- `proton-style`: Config, 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`.
- `photon-style-dev`: New config specified in `photon-style`.
- `proton-style-dev`: New config specified in `proton-style`.
After version [`v5.0.0`](https://github.com/black7375/Firefox-UI-Fix/releases/tag/v5.0.0), the distribution is just a [setting difference](https://github.com/black7375/Firefox-UI-Fix/wiki/Options#distribution-settings).
## Edit
### Modify only source file

58
docs/Smart_Bookmarks.md
View file

@ -87,7 +87,7 @@ Here's a list of the parameters available that you can look for.
| | | `PLACES_ROOT`: The Places root folder. |
| | | `BOOKMARKS_MENU`: The Bookmarks menu. |
| | | `TOOLBAR`: The bookmarks toolbar. |
| | | `TAGS`: Tags |
| | | `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. |
@ -113,38 +113,38 @@ The following attributes allow you to control the results more precisely.
| `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)) |
| | | `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 |
| | | `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 |
| | | `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. |

BIN
icons/Forest-trees-sunset-art-picture_3840x2160.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 297 KiB

7
icons/add-device.svg Normal file
View file

@ -0,0 +1,7 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M14 5h-3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm-3 8V7h3v6z"/>
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M2 3h8v1h2V3a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h3v1H3a1 1 0 0 0 0 2h5v-2H7v-1h1V9H2z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 623 B

2
icons/checkmark-circle.svg
View file

@ -1,3 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
<path d="M8 2C11.3137 2 14 4.68629 14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2ZM8 3C5.23858 3 3 5.23858 3 8C3 10.7614 5.23858 13 8 13C10.7614 13 13 10.7614 13 8C13 5.23858 10.7614 3 8 3ZM7.24953 9.04242L10.1203 6.16398C10.3153 5.96846 10.6319 5.96803 10.8274 6.16304C11.0012 6.33637 11.0208 6.60577 10.8861 6.80082L10.8283 6.87014L7.60403 10.1031C7.43053 10.277 7.16082 10.2965 6.96576 10.1615L6.89645 10.1036L5.14645 8.35355C4.95118 8.15829 4.95118 7.84171 5.14645 7.64645C5.32001 7.47288 5.58944 7.4536 5.78431 7.58859L5.85355 7.64645L7.24953 9.04242L10.1203 6.16398L7.24953 9.04242Z"/>
<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm0 1.333a6.667 6.667 0 1 0 0 13.334A6.667 6.667 0 0 0 8 1.333zM7 9.39l3.827-3.838a.667.667 0 0 1 1.021.85l-.077.092-4.299 4.31a.667.667 0 0 1-.851.078l-.092-.077L4.195 8.47a.667.667 0 0 1 .85-1.02l.093.078L7 9.389l3.828-3.837z"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 773 B

After

Width:  |  Height:  |  Size: 422 B

Before After
Before After

6
icons/datarestore.svg Normal file
View file

@ -0,0 +1,6 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
<path d="M4.438 0a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h3.091a6 6 0 0 1-.62-1.213H4.437c-.553 0-1.788-1.235-1.788-1.787V3c0-.552 1.235-1.787 1.788-1.787h7.125c.552 0 1.787 1.235 1.787 1.787v3.742a6 6 0 0 1 1.213.303V3a3 3 0 0 0-3-3H4.436z"/>
<path d="M2.6 7v1h6.173a6 6 0 0 1 1.842-1H2.6z"/>
<rect width="4.8" height="1" x="5.6" y="4" rx=".6"/>
<path d="M6.2 10c-.333 0-.6.223-.6.5s.267.5.6.5h.554a6 6 0 0 1 .39-1H6.2zm5.898-1.177c-1.423.007-2.729.726-3.408 1.88V9.496c0-.3-.487-.3-.487 0v2.245c0 .124.11.224.243.224h2.435a.225.225 0 0 0 0-.449H9.344a.413.413 0 0 0 .027-.038c1.137-2.817 5.66-2.062 5.66.94 0 3-4.523 3.756-5.66.94-.235-.545-1.12-.24-.912.313 1.104 2.711 5.056 3.162 6.843.781 1.786-2.38-.064-5.633-3.204-5.63z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 878 B

6
icons/datastore.svg Normal file
View file

@ -0,0 +1,6 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
<path d="M4.437 0h7.126a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H4.437a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm0 1.213C3.885 1.213 2.65 2.448 2.65 3v10c0 .552 1.235 1.787 1.787 1.787h7.126c.552 0 1.787-1.235 1.787-1.787V3c0-.552-1.235-1.787-1.787-1.787z"/>
<path d="M2.6 7h10.8v1H2.6Z"/>
<rect width="4.8" height="1" x="5.6" y="4" rx=".6"/>
<rect width="4.8" height="1" x="5.6" y="10" rx=".6"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 531 B

3
icons/highlight.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M14.604 0a.6.6 0 0 1 .594.52l.005.08-.003 3.6a1.804 1.804 0 0 1-1.6 1.787l-.001 1.808a1.8 1.8 0 0 1-1.677 1.796l-.123.004h-.201v2.233a1.8 1.8 0 0 1-.913 1.567l-.123.064-5.308 2.485a.6.6 0 0 1-.85-.463L4.4 15.4V9.593h-.202A1.8 1.8 0 0 1 2.4 7.917l-.004-.123V5.986A1.8 1.8 0 0 1 .8 4.33l-.004-.132V.6A.6.6 0 0 1 1.99.519L1.997.6v3.597a.6.6 0 0 0 .518.595l.082.005h10.801a.603.603 0 0 0 .596-.519L14 4.197l.003-3.598a.6.6 0 0 1 .6-.599Zm-4.206 9.594H5.599v4.862l4.454-2.085a.6.6 0 0 0 .34-.458l.005-.086zm2-3.597h-8.8v1.797a.6.6 0 0 0 .518.594l.082.006H11.8a.6.6 0 0 0 .594-.519l.006-.081z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 748 B

6
icons/link.svg
View file

@ -1,8 +1,6 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
<rect x="7" y="3.286" width="2" height="9.429" rx="1" ry="1" transform="rotate(-45 8 8)"/>
<path d="M2.354 4.522L4.485 2.39a.5.5 0 0 1 .711 0l3.19 3.19.014-.015a2 2 0 0 0 0-2.821L6.272.616a2 2 0 0 0-2.821 0L.616 3.451a2 2 0 0 0 0 2.821L2.744 8.4a1.993 1.993 0 0 0 2.8.02l-3.19-3.186a.5.5 0 0 1 0-.712z"/>
<path d="M15.416 9.759L13.287 7.63a2 2 0 0 0-2.821 0l-.015.015 3.189 3.189a.5.5 0 0 1 0 .711l-2.132 2.132a.5.5 0 0 1-.711 0L7.61 10.49a1.993 1.993 0 0 0 .02 2.8l2.128 2.128a2 2 0 0 0 2.821 0l2.835-2.835a2 2 0 0 0 .002-2.824z"/>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="16" height="16" viewBox="0 0 16 16" fill="none" fill-opacity="context-fill-opacity" style="enable-background:new 0 0 16 16">
<path stroke="context-stroke" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" d="M10.824 10.824 5.176 5.176m2.294 5.825a1.249 1.249 0 0 0 0 1.765l2.118 2.118a1.249 1.249 0 0 0 1.765 0l3.53-3.53a1.249 1.249 0 0 0 0-1.765L12.766 7.47a1.249 1.249 0 0 0-1.765 0M8.53 4.999a1.249 1.249 0 0 0 0-1.765L6.411 1.116a1.249 1.249 0 0 0-1.765 0l-3.53 3.53a1.249 1.249 0 0 0 0 1.765L3.234 8.53a1.249 1.249 0 0 0 1.765 0"/>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 897 B

After

Width:  |  Height:  |  Size: 842 B

Before After
Before After

6
icons/menu-check.svg Normal file
View file

@ -0,0 +1,6 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M13.8639 3.65609C14.0533 3.85704 14.0439 4.17348 13.8429 4.36288L5.91309 11.8368C5.67573 12.0605 5.30311 12.0536 5.07417 11.8213L2.39384 9.10093C2.20003 8.90422 2.20237 8.58765 2.39907 8.39384C2.59578 8.20003 2.91235 8.20237 3.10616 8.39908L5.51192 10.8407L13.1571 3.63517C13.358 3.44577 13.6745 3.45513 13.8639 3.65609Z" fill="context-fill" fill-opacity="context-fill-opacity"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 693 B

36
icons/no-search-results.svg Normal file
View file

@ -0,0 +1,36 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 293"><script xmlns=""/>
<path fill="#FFFFFF" d="M2.72 39.24h40.9s-12.8-28.6 14.37-32.3c24.22-3.3 33.8 21.6 33.8 21.6s2.87-14.36 17.29-11.61c14.2 2.7 24.7 25.56 24.7 25.56h35.6"/>
<path fill="#E1E1E6" d="M170.09 35.84h-35.62c-.4 0-.75-.22-.93-.57-.1-.2-10.43-20.33-23.96-22.9-13.2-2.53-15.95 10.24-16.06 10.79-.1.45-.48.8-.94.83-.47.05-.9-.23-1.07-.66a41.04 41.04 0 0 0-7.65-11.75c-6.94-7.41-15.36-10.5-25.04-9.2-7.04.97-11.89 3.74-14.4 8.26-5.06 9.1.8 22.45.85 22.58a1.06 1.06 0 0 1-.96 1.48H3.41a1.05 1.05 0 0 1 0-2.1h39.35C41.3 28.68 38 17.86 42.58 9.63 45.43 4.5 50.8 1.36 58.54.3c20.08-2.73 30.5 13.43 33.77 19.78 1.72-4.25 6.43-11.93 17.66-9.79 13.37 2.55 23.28 19.96 25.14 23.44h34.98a1.05 1.05 0 0 1 0 2.1"/>
<path fill="#FFFFFF" d="M171.26 43.2H2.71a2.1 2.1 0 1 1 0-4.2h168.55a2.1 2.1 0 0 1 0 4.2"/>
<path fill="#E1E1E6" d="M338.53 124.92H211.12a2.1 2.1 0 1 1 0-4.2h127.41a2.1 2.1 0 0 1 0 4.2M121.81 99.33H55.02a2.1 2.1 0 1 1 0-4.2h66.8a2.1 2.1 0 0 1 0 4.2m-32.54-9.76H70.34a1.05 1.05 0 0 1 0-2.1h18.94a1.05 1.05 0 0 1 0 2.1m47.26 95.55H2.1a2.1 2.1 0 1 1 0-4.2h134.44a2.1 2.1 0 0 1 0 4.2m-21.96-9.57H50.03a1.05 1.05 0 0 1 0-2.1h64.55a1.05 1.05 0 0 1 0 2.1m206.66-61.59h-56.42a1.05 1.05 0 0 1 0-2.1h56.42a1.05 1.05 0 0 1 0 2.1m50.17 19.83H179.66a1.05 1.05 0 0 1 0-2.1H371.4a1.05 1.05 0 0 1 0 2.1"/>
<path fill="#FFFFFF" d="M283.11 65.18h22.75s-7.12-15.9 7.99-17.96c13.48-1.84 18.8 12.01 18.8 12.01s1.6-7.99 9.61-6.46c7.9 1.5 13.74 14.21 13.74 14.21h19.8"/>
<path fill="#E1E1E6" d="M306.56 62.73h-22.74a1.05 1.05 0 1 1 0-2.1h21.21c-.88-2.61-2.26-8.18.16-12.53 1.66-2.99 4.76-4.81 9.22-5.42 10.6-1.44 16.48 6.34 18.78 10.37 1.42-2.86 4.5-5.84 9.97-4.8 7.32 1.39 12.8 9.82 14.14 12.09h19.2a1.05 1.05 0 0 1 0 2.1h-19.8c-.39 0-.74-.2-.92-.55-.06-.1-5.7-10.19-13.01-11.58-6.93-1.33-8.33 5.35-8.4 5.63a1.05 1.05 0 0 1-2 .17c-.2-.53-5.2-13.06-17.68-11.35-3.77.52-6.35 1.98-7.67 4.36-2.7 4.86.46 12.06.5 12.14.14.32.11.7-.08 1-.2.3-.53.47-.88.47"/>
<path fill="#FFFFFF" d="M377.27 69.19h-93.74a2.1 2.1 0 1 1 0-4.2h93.74a2.1 2.1 0 1 1 0 4.2"/>
<path fill="#E1E1E6" d="M117.87 251.41H9.4a2.1 2.1 0 1 1 0-4.2h108.47a2.1 2.1 0 0 1 0 4.2m242.44 0H241.8a2.1 2.1 0 1 1 0-4.2h118.5a2.1 2.1 0 0 1 0 4.2m-232.88-32.15a4.2 4.2 0 0 1-4.16-3.62l-4.55-32.19a4.2 4.2 0 0 1 8.32-1.17l4.55 32.19a4.2 4.2 0 0 1-4.16 4.79"/>
<path fill="#E1E1E6" d="M125.24 205.61c-.47-.94-10.5-16.8-13.65-16.8-3.15 0-11.55 7-11.55 8.05 0 1.05 2.45 5.25 8.05 3.85l5.6-1.4s8.05 15.05 9.8 17.15c1.75 2.1 8.4 2.45 1.75-10.85"/>
<path fill="#0A84FF" d="M105.66 197.3c-.4 0-.8-.11-1.17-.35l-5.24-3.5a2.1 2.1 0 0 1 2.33-3.5l5.25 3.5a2.1 2.1 0 0 1-1.17 3.85"/>
<path fill="#5CE6E6" d="M122.9 182l5.64 1.3"/>
<path fill="#E1E1E6" d="M128.54 187.5c-.32 0-.64-.03-.96-.1l-5.64-1.32a4.2 4.2 0 0 1 1.9-8.18l5.65 1.31a4.2 4.2 0 0 1-.95 8.3m106.4 31.75a4.2 4.2 0 0 1-4.17-4.7l3.7-30.92a4.2 4.2 0 1 1 8.33 1l-3.7 30.91a4.2 4.2 0 0 1-4.16 3.7"/>
<path fill="#E1E1E6" d="M236.5 205.61c.48-.94 10.5-16.8 13.65-16.8 3.15 0 11.55 7 11.55 8.05 0 1.05-2.45 5.25-8.05 3.85l-5.6-1.4s-8.04 15.05-9.8 17.15c-1.74 2.1-8.4 2.45-1.74-10.85"/>
<path fill="#E1E1E6" d="M257.07 198.18a2.1 2.1 0 0 1-.35-4.17l6.12-1.05a2.1 2.1 0 1 1 .7 4.14l-6.11 1.04c-.12.03-.24.04-.36.04"/>
<path fill="#E1E1E6" d="M253.75 196.08a2.1 2.1 0 0 1-.73-4.07l6.65-2.45a2.1 2.1 0 0 1 1.45 3.94l-6.64 2.45a2.1 2.1 0 0 1-.73.13m-21.1-6.57a4.2 4.2 0 0 1-.96-8.29l5.64-1.31a4.2 4.2 0 0 1 1.9 8.18l-5.63 1.31c-.32.07-.64.1-.96.1m-82.18-33.66c-3.22 0-6.44-1.23-8.9-3.7l-19.6-19.58a12.6 12.6 0 1 1 17.82-17.82l19.6 19.6a12.6 12.6 0 0 1-8.92 21.5m59.48.7a12.6 12.6 0 0 1-8.9-21.5l19.58-19.6a12.6 12.6 0 0 1 17.82 17.81l-19.6 19.6a12.56 12.56 0 0 1-8.9 3.69"/>
<path fill="#EDEDF2" d="M121.36 283.07c0-5.1 27.22-9.24 60.8-9.24s60.8 4.13 60.8 9.24c0 5.1-27.22 9.23-60.8 9.23s-60.8-4.13-60.8-9.23"/>
<path fill="#E1E1E6" d="M130.06 129.95c-6.4 4.08-4.99 121.7 8.65 130.86 9.37 6.3 75.64 8.4 85.73-1.4 2.97-2.88 17.29-74.88 10.08-125.96-1.88-13.34-81.4-18.2-104.46-3.5"/>
<path fill="#E1E1E6" d="M132.23 229.32s2.1 25.64 6.3 37.6c4.2 11.96 9.1 17.95 11.2 16.24 2.1-1.71 0-39.31 0-39.31l-17.5-14.53zm97.51 0s-2.1 25.64-6.3 37.6c-4.2 11.96-9.1 17.95-11.2 16.24-2.1-1.71 0-39.31 0-39.31l17.5-14.53zM138.71 120.5s26.24-7.87 33.59-8.92c7.35-1.05 23.1-8.92 23.1-8.92l-3.68 8.4 8.92-2.63v4.72l21.52 5.78-4.72 6.3h-69.81l-8.92-4.73z"/>
<path fill="#F5F5F7" d="M142.82 129.42c-15.06 9.98-5.7 104.71 3.93 116.52 15.84 19.42 63.87 17.85 73.07-3.67 1.52-3.57 15.91-71.38 5-108.65-3.58-12.28-45.7-28.25-82-4.2"/>
<path fill="#7A7B7E" d="M149.28 141.48a2.27 2.27 0 0 1 2.27 2.27v5.1a2.27 2.27 0 0 1-4.55 0v-5.1a2.26 2.26 0 0 1 2.28-2.27m56.4 0a2.27 2.27 0 0 1 2.26 2.27v5.1a2.27 2.27 0 0 1-4.54 0v-5.1a2.27 2.27 0 0 1 2.27-2.27"/>
<path fill="#C8C8CC" d="M149.27 161.44a9.75 9.75 0 0 1-7.88-4.1 2.1 2.1 0 0 1 3.51-2.3 5.5 5.5 0 0 0 4.37 2.2 5.52 5.52 0 0 0 4.37-2.2 2.1 2.1 0 0 1 3.52 2.28c-.1.18-2.72 4.12-7.89 4.12m56.4 0a9.75 9.75 0 0 1-7.88-4.1 2.1 2.1 0 0 1 3.51-2.3 5.5 5.5 0 0 0 4.37 2.2 5.52 5.52 0 0 0 4.37-2.2 2.1 2.1 0 0 1 3.52 2.28c-.11.18-2.72 4.12-7.89 4.12m-26 10.75a2.1 2.1 0 0 1-.6-4.11c.18-.05 3.7-1.18 4.6-4.8.7-2.76-.1-6.02-.11-6.05a2.1 2.1 0 0 1 3.95-1.37c.75 1.66 2.3 4.32 3.41 5.03 2 1.28 3.68.7 3.76.68a2.12 2.12 0 0 1 2.69 1.23c.4 1.07-.1 2.26-1.17 2.68a8.71 8.71 0 0 1-8.34-1.66l-.11.48c-1.5 6-7.24 7.74-7.49 7.8-.2.07-.39.1-.58.1"/>
<path fill="#7A7B7E" d="M175.69 155.33c-1.31 1.4 8.6 3.75 9.86 3.48 1.9-.4 10-6.46 8.92-9.38-.58-1.57-13.61.37-18.78 5.9"/>
<path fill="#7A7B7E" d="M178.95 155.28a31 31 0 0 0 6.23 1.45c1.54-.54 5.53-3.76 6.85-5.73-2.86.13-9.1 1.46-13.08 4.28m6.54 5.62c-2.45 0-10.34-1.68-11.69-4.05a2.47 2.47 0 0 1 .35-2.95c4.91-5.25 16.2-7.72 19.97-6.95 1.5.3 2.08 1.12 2.32 1.76.43 1.18.25 2.5-.54 3.93-1.9 3.43-7.72 7.75-9.9 8.22-.13.03-.3.04-.51.04"/>
<path fill="#E1E1E6" d="M231.08 178.78s-1.05 8.4-6.3 13.12c-5.24 4.72 6.83 11.54 6.3 22.04-.52 10.5 0-35.16 0-35.16m-98.93-4.73s1.05 8.4 6.3 13.12c5.25 4.73-6.82 11.55-6.3 22.05.52 10.5 0-35.17 0-35.17"/>
<path fill="#C8C8CC" d="M195.5 105.2h.01-.01zm0-4.2c-.32 0-.64.07-.94.21-.15.08-15.5 7.73-22.42 8.72-5.1.73-18.85 4.6-27.37 7.07l-3.32-3.32a14.57 14.57 0 0 0-10.37-4.3 14.7 14.7 0 0 0-10.38 25.05l5.08 5.09c-.96 8.47-1.4 21.64-1.24 36.66a6.26 6.26 0 0 0-7.69 6.47c-.05.51-.04.97.02 1.42l1.05 7.45c-3.8-4.5-5.22-4.5-6.1-4.5-1.59 0-3.83 1-6.66 2.94l-2.17-1.44a4.2 4.2 0 0 0-6.49 2.96 4.19 4.19 0 0 0-.9 8.26l4.46 1.14a8.3 8.3 0 0 0 6.1 2.5c.86 0 1.77-.1 2.68-.34l4-1c2.04 3.78 7.16 13.17 8.98 15.68a6.29 6.29 0 0 0 5.02 3.85c1.27 12.93 3.54 29.01 7.42 36.75a75.23 75.23 0 0 0 2.49 9.5c1.47 4.2 6.72 17.9 12.35 17.9.78 0 1.52-.26 2.13-.76.97-.79 1.97-1.6 1.65-18.26 8.4 1.12 19.07 1.75 29.79 1.75 7.3 0 17.6-.3 26.69-1.65-.32 16.56.68 17.37 1.64 18.16.61.5 1.35.76 2.13.76 5.64 0 10.88-13.7 12.36-17.9 1.3-3.72 2.53-9.04 3.65-15.82 1.89-7.91 3.84-18.87 5.43-30.39l.42.01a6.29 6.29 0 0 0 6.23-5.46 355.82 355.82 0 0 0 7.94-14.12l4 1c.92.23 1.82.35 2.68.35a8.38 8.38 0 0 0 7.1-3.76l.97-.17a4.17 4.17 0 0 0 3.43-4.84 4.18 4.18 0 0 0-2.76-3.26 4.21 4.21 0 0 0-5.62-3.46l-3.38 1.24c-3.38-2.11-4.88-2.11-5.4-2.11-.86 0-2.27 0-6 4.37l.74-6.2a6.3 6.3 0 0 0-4.2-6.69c-.74-.3-1.5-.46-2.28-.48.53-14.85.12-28.34-1.25-40.13l2.77-2.77a14.58 14.58 0 0 0 4.3-10.38c0-3.92-1.52-7.6-4.3-10.38a14.58 14.58 0 0 0-10.37-4.3c-3.92 0-7.61 1.53-10.38 4.3l-1.56 1.57-14.81-3.97v-3.11a2.1 2.1 0 0 0-2.7-2.02l-4.58 1.35 1.86-4.26a2.1 2.1 0 0 0-1.92-2.94zm0 2.1l-3.67 8.38 8.91-2.62v4.71l17.53 4.7 2.42-2.41a12.54 12.54 0 0 1 17.79 0 12.58 12.58 0 0 1 0 17.79l-3.49 3.49c1.66 13.68 1.88 28.68 1.25 43.36l1.14-.27a4.12 4.12 0 0 1 2.6.25 4.2 4.2 0 0 1 2.86 4.48l-1.66 13.86c3.2-4.58 7.21-9.7 9-9.7 1.2 0 3.17 1.03 5.15 2.35l4.35-1.6a2.1 2.1 0 0 1 2.7 1.24c.32.88 0 1.8-.7 2.35l1.17-.2.36-.03a2.1 2.1 0 0 1 .35 4.16l-2 .35a6.07 6.07 0 0 1-5.72 3.55 9 9 0 0 1-2.17-.28l-5.59-1.4s-6.2 11.6-8.9 15.83l-.04.39a4.2 4.2 0 0 1-6.32 3.08c-1.83 13.82-4 25.42-5.74 32.68-.94 5.73-2.13 11.43-3.57 15.53-3.72 10.6-8 16.5-10.38 16.5-.3 0-.57-.1-.8-.29-1-.81-1.05-9.82-.82-19-7.97 1.4-18.37 2.02-28.84 2.02-11.66 0-23.4-.77-31.95-2.08.23 9.2.2 18.24-.81 19.06-.24.2-.51.29-.81.29-2.38 0-6.65-5.9-10.37-16.5a74.98 74.98 0 0 1-2.47-9.5c-3.48-6.7-5.95-21.27-7.52-38.26-.17.04-.33.1-.5.12a4.2 4.2 0 0 1-4.55-2.79c-1.8-2.19-9.77-17.08-9.77-17.08l-5.59 1.4c-.78.2-1.5.28-2.17.28a6.24 6.24 0 0 1-4.96-2.29l-5.07-1.3a2.1 2.1 0 1 1 1.04-4.05l3.52.9-1.19-.8a2.1 2.1 0 0 1 2.33-3.49l3.37 2.26c2.42-1.79 5.12-3.4 6.63-3.4 1.84 0 6.05 5.46 9.31 10.16l-2.2-15.5a4.08 4.08 0 0 1 .02-1.09c-.05-.43-.04-.88.07-1.33a4.2 4.2 0 0 1 5.03-3.13l2.6.6c-.24-16.38.23-31.22 1.32-40.08l-5.8-5.8a12.58 12.58 0 0 1 17.79-17.79l4.2 4.2c8.04-2.35 23-6.6 28.27-7.36 7.34-1.05 23.06-8.9 23.06-8.9zM52.65 141.37a25.41 25.41 0 0 1 38.25 33.29l3.91 3.91-4.96 4.96-3.91-3.9a25.42 25.42 0 0 1-33.29-38.26"/>
<path fill="#F5F5F7" d="M70.62 138.63a20.72 20.72 0 1 1 0 41.45 20.72 20.72 0 0 1 0-41.45"/>
<path fill="#C8C8CC" d="M71.95 141.08a20.72 20.72 0 0 0-18.74 29.58 20.72 20.72 0 0 1 36.2-20.02 20.7 20.7 0 0 0-17.46-9.56"/>
<path fill="#7A7B7E" d="M115.81 204.54c2.38-2.38 3.3-5.36 2.03-6.63L95.7 177.6c-1.27-1.27-3.34-1.26-5.72 1.12s-2.39 4.46-1.12 5.72l20.31 22.13c1.27 1.26 4.25.35 6.63-2.03"/>
<polygon fill="#626366" points="113.396 193.835 105.106 202.128 95.104 191.234 102.502 183.834"/>
<path fill="#E1E1E6" d="M101.75 189.01s-9.1 2.1-8.75 4.9c.35 2.8 5.39 11.38 8.75 9.8 3.36-1.58 8.75-13.3 0-14.7"/>
<path fill="#C8C8CC" d="M134.37 128.24c-.1 0-.2-.02-.3-.05a1.04 1.04 0 0 1-.71-1.29c.08-.29 2.1-7.15 11.74-9.9.55-.16 1.14.16 1.3.71.16.56-.17 1.14-.73 1.3-8.45 2.42-10.22 8.22-10.3 8.47-.13.45-.55.76-1 .76m95.52-.26c-.37 0-.73-.2-.92-.55-4.4-8.07-11.78-9.43-11.85-9.44a1.05 1.05 0 0 1 .35-2.07c.34.05 8.43 1.5 13.34 10.5a1.04 1.04 0 0 1-.92 1.56m-76.1 139.08h-.1c-5.5-.55-11.09-5.03-11.32-5.22a1.05 1.05 0 1 1 1.32-1.63c.05.04 5.33 4.27 10.2 4.76a1.05 1.05 0 0 1-.1 2.1m56.42-.27a1.05 1.05 0 0 1-.22-2.07c3.53-.76 9.45-3.33 9.5-3.35a1.05 1.05 0 0 1 .85 1.92c-.25.11-6.18 2.68-9.91 3.48a.99.99 0 0 1-.22.02m23.35-45.4c-.85 0-1.58-.37-2.12-1.07-2.52-3.29-.2-14.94 1.29-21.2l-1.08 1a1.05 1.05 0 0 1-1.42-1.54l3.67-3.41a1.05 1.05 0 0 1 1.73 1.04c-2.01 7.48-4.47 20.29-2.53 22.83.16.2.3.25.46.25a1.05 1.05 0 0 1 0 2.1m-105.5.26a1.05 1.05 0 0 1-.04-2.1c.16 0 .36-.05.6-.36 2.4-3.08.3-18.67-1.58-27.76a1.05 1.05 0 0 1 1.77-.96l2.89 2.88c.4.42.4 1.08 0 1.5-.41.4-1.08.4-1.49 0l-.46-.47c1.27 7.02 3.58 22.18.52 26.1a2.84 2.84 0 0 1-2.16 1.17h-.04M100.6 205.1c-.79 0-1.73-.23-2.77-.92-3.5-2.34-6.98-6.52-6.35-10.18.26-1.48 1.3-3.43 4.84-4.31a1.05 1.05 0 0 1 .5 2.03c-1.95.5-3.05 1.38-3.27 2.64-.4 2.27 1.95 5.74 5.44 8.07.86.57 1.62.7 2.34.43 2.25-.88 3.8-5.46 4.2-7.15.13-.56.7-.9 1.26-.78.57.14.91.7.78 1.27-.17.73-1.8 7.17-5.48 8.61-.4.16-.9.29-1.49.29"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

4
icons/pin-tab.svg
View file

@ -1,6 +1,6 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" >
<path d="M14.707 13.293L11.414 10l2.293-2.293a1 1 0 0 0 0-1.414A4.384 4.384 0 0 0 10.586 5h-.172A2.415 2.415 0 0 1 8 2.586V2a1 1 0 0 0-1.707-.707l-5 5A1 1 0 0 0 2 8h.586A2.415 2.415 0 0 1 5 10.414v.169a4.036 4.036 0 0 0 1.337 3.166 1 1 0 0 0 1.37-.042L10 11.414l3.293 3.293a1 1 0 0 0 1.414-1.414zm-7.578-1.837A2.684 2.684 0 0 1 7 10.583v-.169a4.386 4.386 0 0 0-1.292-3.121 4.414 4.414 0 0 0-1.572-1.015l2.143-2.142a4.4 4.4 0 0 0 1.013 1.571A4.384 4.384 0 0 0 10.414 7h.172a2.4 2.4 0 0 1 .848.152z"/>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="16" height="16" viewBox="0 0 16 16" fill="none" fill-opacity="context-fill-opacity" style="enable-background:new 0 0 16 16">
<path stroke="context-stroke" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5" d="m2.131 6.044 3.735 3.735.143 2.83c.044.866 1.093 1.269 1.706.656l5.55-5.55c.613-.613.209-1.662-.656-1.706l-2.83-.143-3.735-3.735M.53 7.644 7.644.53m7.825 14.94-4.979-4.98"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 862 B

After

Width:  |  Height:  |  Size: 686 B

Before After
Before After

3
icons/pulse-square.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M13.999 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2Zm0 1.333H2A.667.667 0 0 0 1.335 2v12c0 .368.298.667.666.667H14a.667.667 0 0 0 .666-.667V2A.667.667 0 0 0 14 1.333zM4.672 7.555l1.384-3.156a.667.667 0 0 1 1.185-.072l.044.092 2.116 5.285.892-1.78a.667.667 0 0 1 .503-.362l.093-.007h1.778a.667.667 0 0 1 .09 1.327l-.09.006H11.3l-1.37 2.738a.667.667 0 0 1-1.172.039l-.043-.09L6.638 6.39l-.92 2.1a.667.667 0 0 1-.512.39l-.098.008H3.334a.667.667 0 0 1-.09-1.327l.09-.006h1.338l1.384-3.156z" style="stroke-width:.888775"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 697 B

12
icons/synced-tabs.svg Normal file
View file

@ -0,0 +1,12 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M13.75 7V6L13.75 5.99215L13.0079 5.25004L13 5.25H12V4H13C14.1046 4 15 4.89543 15 6V7H13.75Z"/>
<path d="M4.25 10V11L4.25004 11.0079L4.99215 11.75L5 11.75H6V13H5C3.89543 13 3 12.1046 3 11V10H4.25Z"/>
<path d="M13 11.75H12V13H13C14.1046 13 15 12.1046 15 11V10H13.75V11L13.75 11.0079L13.0079 11.75L13 11.75Z"/>
<path fill-rule="evenodd" d="M1 3C1 1.89543 1.89543 1 3 1H9C10.1046 1 11 1.89543 11 3V6C11 7.10457 10.1046 8 9 8H3C1.89543 8 1 7.10457 1 6V3ZM7 2.25H3C2.58579 2.25 2.25 2.58579 2.25 3V6C2.25 6.41421 2.58579 6.75 3 6.75H7V2.25ZM9 3C9.41421 3 9.75 3.33579 9.75 3.75V5.25C9.75 5.66421 9.41421 6 9 6C8.58579 6 8.25 5.66421 8.25 5.25V3.75C8.25 3.33579 8.58579 3 9 3Z"/>
<path fill-rule="evenodd" d="M3 11V9H4.25V11C4.25 11.4142 4.58579 11.75 5 11.75H13C13.4142 11.75 13.75 11.4142 13.75 11V6C13.75 5.58579 13.4142 5.25 13 5.25H12V4H13C14.1046 4 15 4.89543 15 6V11C15 12.1046 14.1046 13 13 13H14.5C15.3284 13 16 13.6716 16 14.5C16 15.3284 15.3284 16 14.5 16H3.5C2.67157 16 2 15.3284 2 14.5C2 13.6716 2.67157 13 3.5 13H5C3.89543 13 3 12.1046 3 11ZM7.5 13.75C7.5 13.3358 7.83579 13 8.25 13H9.75C10.1642 13 10.5 13.3358 10.5 13.75C10.5 14.1642 10.1642 14.5 9.75 14.5H8.25C7.83579 14.5 7.5 14.1642 7.5 13.75Z"/>
<path d="M4 2.25H3L2.99215 2.25004L2.25004 2.99215L2.25 3V4H1V3C1 1.89543 1.89543 1 3 1H4V2.25Z"/>
<path d="M2.25 5V6L2.25004 6.00785L2.99215 6.74996L3 6.75H4V8H3C1.89543 8 1 7.10457 1 6L1 5H2.25Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

4
icons/toolbarButton-upload.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
<path d="M9.709 6.078h-1.84a.477.477 0 0 1-.337-.813l2.555-2.554a.477.477 0 0 1 .673 0l2.554 2.554c.3.3.088.813-.337.813h-1.84v2.796h.002v1.19h-.002v.786H9.71v-.785h-.003v-1.19h.004V6.078z"/>
<path d="M13.714 3.357h-.98l1.08 1.19h.067c.329 0 .429.267.429.596v7.619a.595.595 0 0 1-.596.595H2.286a.595.595 0 0 1-.596-.595V3.238c0-.328.267-.595.596-.595h3.47a.6.6 0 0 1 .442.197l.941 1.091c.112.126.211.138.38.138l.382-.35.347-.423-.576-.532-.59-.722a1.79 1.79 0 0 0-1.328-.59H2.286C1.3 1.452.5 2.252.5 3.237v9.524c0 .985.801 1.786 1.786 1.786h11.428c.985 0 1.786-.801 1.786-1.786v-7.62c0-.984-.801-1.785-1.786-1.785z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 769 B

4
icons/unpin-tab.svg
View file

@ -2,5 +2,7 @@
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M11.414 10l2.293-2.293a1 1 0 0 0 0-1.414 4.418 4.418 0 0 0-.8-.622L11.425 7.15h.008l-4.3 4.3v-.017l-1.48 1.476a3.865 3.865 0 0 0 .692.834 1 1 0 0 0 1.37-.042L10 11.414l3.293 3.293a1 1 0 0 0 1.414-1.414zm3.293-8.707a1 1 0 0 0-1.414 0L9.7 4.882A2.382 2.382 0 0 1 8 2.586V2a1 1 0 0 0-1.707-.707l-5 5A1 1 0 0 0 2 8h.586a2.382 2.382 0 0 1 2.3 1.7l-3.593 3.593a1 1 0 1 0 1.414 1.414l12-12a1 1 0 0 0 0-1.414zm-9 6a4.414 4.414 0 0 0-1.571-1.015l2.143-2.142a4.4 4.4 0 0 0 1.013 1.571 4.191 4.191 0 0 0 .9.684l-1.8 1.8a4.2 4.2 0 0 0-.684-.898z"/>
<path d="M7.253 1 1 7.253l.867.867L8.12 1.867 7.253 1Zm3.367 8.754-.866.867L14.133 15l.866-.867-4.379-4.379Z"/>
<path d="m8.236 5.663.866-.867-2.388-2.389a.613.613 0 1 0-.867.867l2.389 2.389Zm-3.439 3.44.867-.867-2.39-2.389a.613.613 0 1 0-.867.867l2.39 2.389Zm7.311-3.536-2.242-.05-.887.888.325.325 2.777.062a.253.253 0 0 1 .242.167c.024.061.05.18-.06.287l-5.016 5.017a.253.253 0 0 1-.288.059.253.253 0 0 1-.166-.242L6.73 9.304l-.325-.326-.888.888.05 2.242c.014.607.371 1.124.936 1.35a1.475 1.475 0 0 0 1.61-.329l5.017-5.016c.43-.43.555-1.047.33-1.61a1.471 1.471 0 0 0-1.353-.936Z"/>
<path stroke="context-stroke" stroke-miterlimit="10" stroke-width="1.5" d="M1.513 14.742 14.297 1.958"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 907 B

After

Width:  |  Height:  |  Size: 1 KiB

Before After
Before After

12
package.json
View file

@ -1,6 +1,6 @@
{
"name": "Lepton",
"version": "5.0.0",
"version": "8.0.0",
"description": "I respect proton UI and aim to improve it. ",
"author": "alstjr7375 <alstjr7375@daum.net>",
"license": "MPL 2.0",
@ -14,8 +14,10 @@
},
"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",
"build": "yarn build:scss && yarn format:build",
"build:scss": "sass --no-source-map src/leptonChrome.scss:css/leptonChrome.css src/leptonContent.scss:css/leptonContent.css src/leptonChromeESR.scss:css/leptonChromeESR.css src/leptonContentESR.scss:css/leptonContentESR.css",
"format": "prettier --write .",
"format:build": "prettier --write css/leptonChrome.css css/leptonContent.css css/leptonChromeESR.css css/leptonContentESR.css",
"test": "jest",
"validate": "csstree-validator css/leptonChrome.css; csstree-validator css/leptonContent.css"
},
@ -24,9 +26,9 @@
"fast-glob": "^3.2.12",
"jest": "^29.3.1",
"jest-environment-node-single-context": "^29.0.0",
"prettier": "^2.7.1",
"sass": "^1.56.1",
"sass-true": "^6.1.0"
"prettier": "^2.8.1",
"sass": "^1.57.1",
"sass-true": "^7.0.0"
},
"jest": {
"testEnvironment": "jest-environment-node-single-context"

2
src/autohide/_back_button.scss
View file

@ -1,4 +1,4 @@
#back-button[disabled="true"] {
:root:not([customizing="true"]) #back-button[disabled="true"] {
margin-left: var(--uc-toolbarbutton-hide-size) !important;
opacity: 0 !important;
pointer-events: none;

17
src/autohide/_common.scss
View file

@ -3,7 +3,15 @@
--uc-autohide-toolbar-delay: 600ms;
}
@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.tabbar.one_liner", "userChrome.tabbar.on_bottom.menubar_on_top", "userChrome.hidden.tabbar", "userChrome.navbar.as_sidebar") {
@include Option(
"userChrome.autohide.tabbar",
"userChrome.autohide.navbar",
"userChrome.autohide.bookmarkbar",
"userChrome.tabbar.one_liner",
"userChrome.tabbar.on_bottom.menubar_on_top",
"userChrome.hidden.tabbar",
"userChrome.navbar.as_sidebar"
) {
:root {
--uc-tabbar-height: var(--uc-tabbar-height-default);
--uc-tabbar-height-default: var(--tab-min-height); // calc((var(--tab-block-margin) * 2) + var(--tab-min-height));
@ -84,7 +92,12 @@
}
}
@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.autohide.infobar") {
@include Option(
"userChrome.autohide.tabbar",
"userChrome.autohide.navbar",
"userChrome.autohide.bookmarkbar",
"userChrome.autohide.infobar"
) {
#navigator-toolbox {
position: relative;
&:is(:hover, :focus-within) {

2
src/autohide/_fill_urlbar.scss
View file

@ -1,5 +1,5 @@
#nav-bar:not(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container {
-moz-box-ordinal-group: 0;
@include BoxOrder(0);
min-width: calc(var(--uc-navbar-width, 100vw) - ((2 * var(--urlbar-margin-inline)) + var(--uc-window-drag-space-pre, 0px) + var(--uc-navbar-gap, 0px))) !important;
}

2
src/autohide/_forward_button.scss
View file

@ -1,4 +1,4 @@
#forward-button[disabled="true"] {
:root:not([customizing="true"]) #forward-button[disabled="true"] {
margin-left: var(--uc-toolbarbutton-hide-size) !important;
opacity: 0 !important;
pointer-events: none;

5
src/autohide/_index.scss
View file

@ -1,15 +1,18 @@
@include Option("userChrome.autohide.back_button", "userChrome.autohide.forward_button") {
:root {
--uc-toolbarbutton-hide-size: calc(-1 * (16px + (2 * var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding))));
--uc-toolbarbutton-hide-size: calc(-1 * (16px + (2 * (var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)))));
}
}
@include moz-document(url "chrome://browser/content/browser.xhtml")
{
@include Option("userChrome.autohide.back_button") {
@import "back_button";
}
@include Option("userChrome.autohide.forward_button") {
@import "forward_button";
}
}
@include Option("userChrome.autohide.page_action") {
@import "page_action";
}

28
src/autohide/sidebar/_overlap.scss
View file

@ -6,20 +6,29 @@
will-change: min-width, max-width;
}
#sidebar-box:is(:hover, :focus-within) > {
#sidebar-box:is(:hover, :focus-within),
#sidebar-box:has(#sidebar-switcher-target.active) {
--uc-sidebar-shadow-width: calc(var(--uc-sidebar-activate-width) - var(--uc-sidebar-width));
> {
#sidebar-header,
#sidebar {
min-width: var(--uc-sidebar-activate-width) !important;
max-width: var(--uc-sidebar-activate-width) !important;
}
}
}
:root[inFullscreen="true"] #sidebar-box {
--uc-sidebar-shadow-width: var(--uc-sidebar-fullscreen-width);
margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important;
padding-inline-start: var(--uc-sidebar-fullscreen-width);
will-change: padding-inline-start;
will-change: padding-inline-start, opacity, box-shadow, visibility;
&:is(:hover, :focus-within) {
--uc-sidebar-shadow-width: var(--uc-sidebar-activate-width);
padding-inline-start: var(--uc-sidebar-activate-width);
}
@ -38,17 +47,26 @@
transition: min-width var(--uc-autohide-sidebar-speed) var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
}
#sidebar-box:is(:hover, :focus-within) > {
#sidebar-box:is(:hover, :focus-within),
#siebar-box:has(#sidebar-switcher-target.active) {
transition: margin-inline-start var(--uc-autohide-sidebar-speed) var(--animation-easing-function), opacity var(--uc-autohide-sidebar-speed) ease-in-out,
box-shadow var(--uc-autohide-sidebar-speed) var(--animation-easing-function) var(--uc-autohide-sidebar-speed), visibility 0s linear !important;
> {
#sidebar-header,
#sidebar {
transition-delay: 0ms !important;
}
}
}
:root[inFullscreen="true"] #sidebar-box {
transition: padding-inline-start var(--uc-autohide-fullscreen-sidebar-speed) var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
transition: padding-inline-start var(--uc-autohide-fullscreen-sidebar-speed) var(--animation-easing-function) var(--uc-autohide-sidebar-delay),
opacity var(--uc-autohide-fullscreen-sidebar-speed) ease-in-out,
box-shadow calc(var(--uc-autohide-fullscreen-sidebar-speed) + 0.05s) var(--animation-easing-function),
visibility 0s linear !important;
&:is(:hover, :focus-within) {
&:is(:hover, :focus-within),
&:has(#sidebar-switcher-target.active) {
transition-delay: 0ms !important;
}
}

12
src/autohide/sidebar/_static.scss
View file

@ -3,7 +3,8 @@
overflow: hidden;
will-change: min-width, max-width;
&:is(:hover, :focus-within) {
&:is(:hover, :focus-within),
&:has(#sidebar-switcher-target.active) {
min-width: var(--uc-sidebar-activate-width) !important;
max-width: var(--uc-sidebar-activate-width) !important;
}
@ -32,9 +33,11 @@
@include Animate {
#sidebar-box {
transition: min-width var(--uc-autohide-sidebar-speed) var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
transition: min-width var(--uc-autohide-sidebar-speed) var(--animation-easing-function) var(--uc-autohide-sidebar-delay),
max-width var(--uc-autohide-sidebar-speed) var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
&:is(:hover, :focus-within) {
&:is(:hover, :focus-within),
&:has(#sidebar-switcher-target.active) {
transition-delay: 0ms !important;
}
}
@ -45,7 +48,8 @@
&[positionend="true"] {
transition-property: margin-inline-end !important;
}
&:is(:hover, :focus-within) {
&:is(:hover, :focus-within),
&:has(#sidebar-switcher-target.active) {
transition-delay: 0ms !important;
}
}

2
src/centered/tab/_content.scss
View file

@ -1,4 +1,4 @@
.tab-icon-stack {
-moz-box-flex: 1;
@include BoxFlex(1);
justify-content: end;
}

4
src/centered/tab/_label.scss
View file

@ -6,10 +6,10 @@
}
.tab-label,
.tab-secondary-label {
overflow: hidden;
overflow: clip;
}
.tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]),
.tabbrowser-tab:not(:hover,[pinned]) .tab-label-container:not([textoverflow]) {
margin-inline-end: 5px;
margin-inline-end: 5px; // userChrome.tab.close_button_at_hover 6px - 1px
}

98
src/combined/_back_forward_button.scss
View file

@ -1,17 +1,16 @@
//-- Mixin ---------------------------------------------------------------------
@mixin _combined_nav_button_background() {
@import "combined_circle_button";
@mixin _combined_nav_button_background($autohideOptionName) {
> .toolbarbutton-icon {
background-color: var(--uc-combined-circlebutton-background);
@include circle_button_background;
}
&:not([disabled], [open]):hover > .toolbarbutton-icon {
background-color: var(--uc-combined-circlebutton-hover-background) !important;
box-shadow: 0 1px 6px hsla(0,0%,0%,.1);
border-color: hsla(240,5%,5%,.35);
@include circle_button_background_hover;
}
&[open] > .toolbarbutton-icon,
&:not([disabled]):hover:active > .toolbarbutton-icon {
background-color: var(--uc-combined-circlebutton-active-background) !important;
border-color: hsla(240,5%,5%,.40);
@include circle_button_background_active;
}
&[disabled="true"] {
@ -19,46 +18,34 @@
background-color: color-mix(in srgb, var(--toolbarbutton-hover-background), var(--toolbar-field-background-color) 40%) !important;
fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%);
}
@include NotOption($autohideOptionName) {
&[disabled="true"] {
opacity: 1 !important; /* Original: 0.4 */
}
}
}
}
@mixin _combined_forward_button_background() {
@include _combined_nav_button_background("userChrome.autohide.forward_button");
}
@mixin _combined_back_button_background() {
@include _combined_nav_button_background("userChrome.autohide.back_button");
}
@mixin _back_button_circle_shape() {
z-index: 3 !important;
background-color: var(--toolbar-bgcolor) !important;
background-clip: content-box !important;
border-radius: 100%;
padding-block: 0 !important;
@include NotOption("userChrome.autohide.back_button") {
padding-inline-end: 0 !important;
}
@include Option("userChrome.autohide.back_button") {
&:not([disabled="true"]) {
padding-inline-end: 0 !important;
}
&[disabled="true"] {
padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important;
}
}
> menupopup {
margin-top: -1px !important;
}
> .toolbarbutton-icon {
background-origin: padding-box;
background-clip: padding-box;
border: 1px solid var(--uc-combined-circlebutton-border-color);
border-radius: 10000px !important;
padding-inline-end: var(--urlbar-icon-padding) !important;
height: auto !important
}
@include circle_button_shape($backButton: true);
}
//------------------------------------------------------------------------------
#nav-bar-customization-target > {
@supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") or
((not -moz-bool-pref("userChrome.combined.sub_button.as_normal")) or
(
-moz-bool-pref("userChrome.combined.nav_button") and
-moz-bool-pref("userChrome.combined.urlbar.home_button")
)
) {
#forward-button {
--uc-forward-button-margin: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px);
@ -75,24 +62,14 @@
padding-inline-end: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */
}
@include NotOption("userChrome.combined.urlbar.nav_button") {
@include NotOption("userChrome.combined.nav_button.none_forward_background") {
@include NotOption("userChrome.combined.sub_button.none_background") {
@include Option("userChrome.combined.urlbar.home_button") {
@include NotOption("userChrome.combined.nav_button.home_button") {
@include _combined_nav_button_background;
@include NotOption("userChrome.autohide.forward_button") {
&[disabled="true"] {
opacity: 1 !important; /* Original: 0.4 */
}
}
@include _combined_forward_button_background;
}
}
@include NotOption("userChrome.combined.urlbar.home_button") {
@include _combined_nav_button_background;
@include NotOption("userChrome.autohide.forward_button") {
&[disabled="true"] {
opacity: 1 !important; /* Original: 0.4 */
}
}
@include _combined_forward_button_background;
}
}
}
@ -106,28 +83,35 @@
}
}
}
}
#back-button {
position: relative;
@include _combined_nav_button_background;
@include NotOption("userChrome.autohide.back_button") {
&[disabled="true"] {
opacity: 1 !important; /* Original: 0.4 */
@include NotOption("userChrome.combined.urlbar.home_button") {
@include NotOption("userChrome.combined.nav_button.home_button") {
@include _combined_back_button_background;
}
}
@include Option("userChrome.combined.nav_button.home_button", "userChrome.combined.urlbar.home_button") {
@include Option(
"userChrome.combined.nav_button.home_button",
"userChrome.combined.urlbar.home_button"
) {
z-index: 2;
@include NotOption("userChrome.combined.sub_button.as_normal") {
margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important;
padding-inline-start: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */
@include NotOption("userChrome.combined.sub_button.none_background") {
@include _combined_back_button_background;
}
> .toolbarbutton-icon {
padding-inline-start: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */
padding-block: var(--urlbar-icon-padding) !important;
height: var(--uc-urlbar-icon-size) !important;
}
}
}
@include NotOption("userChrome.combined.nav_button.home_button") {
@include Option("userChrome.combined.urlbar.nav_button") {

62
src/combined/_combined_circle_button.scss Normal file
View file

@ -0,0 +1,62 @@
@mixin circle_button_shape($backButton: false) {
z-index: 3 !important;
background-color: var(--toolbar-bgcolor) !important;
background-clip: content-box !important;
border-radius: 100%;
padding-block: 0 !important;
@include Option("userChrome.padding.toolbar_button") {
@include Option("userChrome.padding.toolbar_button.compact") {
--toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default);
}
}
@if $backButton {
@include NotOption("userChrome.autohide.back_button") {
padding-inline-end: 0 !important;
}
@include Option("userChrome.autohide.back_button") {
&:not([disabled="true"]) {
padding-inline-end: 0 !important;
}
&[disabled="true"] {
padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important;
}
}
}
@else {
padding-inline-end: 0 !important;
}
> menupopup {
margin-top: -1px !important;
}
> .toolbarbutton-icon {
@if not $backButton {
@include circle_button_background;
}
background-origin: padding-box;
background-clip: padding-box;
border: 1px solid var(--uc-combined-circlebutton-border-color);
border-radius: 10000px !important;
padding-inline-end: var(--urlbar-icon-padding) !important;
height: auto !important
}
}
@mixin circle_button_background() {
background-color: var(--uc-combined-circlebutton-background);
}
@mixin circle_button_background_hover() {
background-color: var(--uc-combined-circlebutton-hover-background) !important;
box-shadow: 0 1px 6px hsla(0,0%,0%,.1);
border-color: hsla(240,5%,5%,.35);
}
@mixin circle_button_background_active() {
background-color: var(--uc-combined-circlebutton-active-background) !important;
border-color: hsla(240,5%,5%,.40);
}

28
src/combined/_home_button.scss
View file

@ -1,31 +1,13 @@
@import "combined_circle_button";
#nav-bar-customization-target > #home-button {
z-index: 3;
position: relative;
@include circle_button_shape;
background-color: var(--toolbar-bgcolor) !important;
background-clip: content-box !important;
border-radius: 100%;
padding-block: 0 !important;
padding-inline-end: 0 !important;
> .toolbarbutton-icon {
background-color: var(--uc-combined-circlebutton-background);
background-origin: padding-box;
background-clip: padding-box;
border: 1px solid var(--uc-combined-circlebutton-border-color);
border-radius: 10000px !important;
padding-inline-end: var(--urlbar-icon-padding) !important;
height: auto !important
}
&:hover > .toolbarbutton-icon {
background-color: var(--uc-combined-circlebutton-hover-background) !important;
box-shadow: 0 1px 6px hsla(0,0%,0%,.1);
border-color: hsla(240,5%,5%,.35);
@include circle_button_background_hover;
}
&:hover:active > .toolbarbutton-icon {
background-color: var(--uc-combined-circlebutton-active-background) !important;
border-color: hsla(240,5%,5%,.40);
@include circle_button_background_active;
}
}

60
src/combined/_index.scss
View file

@ -1,7 +1,10 @@
/*= Combined - At URL bar ====================================================*/
@include Option(
"userChrome.combined.nav_button", "userChrome.combined.nav_button.home_button",
"userChrome.combined.urlbar.nav_button", "userChrome.combined.urlbar.home_button", "userChrome.combined.urlbar.reload_button"
"userChrome.combined.nav_button",
"userChrome.combined.nav_button.home_button",
"userChrome.combined.urlbar.nav_button",
"userChrome.combined.urlbar.home_button",
"userChrome.combined.urlbar.reload_button"
) {
// Init
#nav-bar {
@ -27,18 +30,18 @@
}
#nav-bar-customization-target > * {
-moz-box-ordinal-group: 1;
@include BoxOrder(1);
}
// Preserve
// `back` -> 2
// `home` -> 3
// `forward` -> 4
#nav-bar-customization-target > #urlbar-container {
-moz-box-ordinal-group: 5;
@include BoxOrder(5);
}
// `reload` -> 6
#nav-bar-customization-target > #urlbar-container ~ * {
-moz-box-ordinal-group: 7;
@include BoxOrder(7);
}
}
@ -92,22 +95,57 @@
}
@include Option("userChrome.combined.urlbar.nav_button") {
#nav-bar-customization-target > #back-button {
-moz-box-ordinal-group: 2;
#nav-bar-customization-target > {
#back-button {
@include BoxOrder(2);
}
#forward-button {
@include BoxOrder(4);
}
$button: ":is(toolbarbutton, toolbaritem)";
@include Option("userChrome.combined.urlbar.home_button") {
$combindButtons: "#back-button, #forward-button, #home-button";
$target: ":is(#{$combindButtons})";
$notTarget: "#{$button}:not(#{$combindButtons})";
:first-child#{$target} + {
#{$notTarget},
#{$target} + #{$notTarget},
#{$target} + #{$target} + #{$button} {
padding-inline-start: var(--toolbar-start-end-padding) !important;
}
}
}
@include NotOption("userChrome.combined.urlbar.home_button") {
$combindButtons: "#back-button, #forward-button";
$target: ":is(#{$combindButtons})";
$notTarget: "#{$button}:not(#{$combindButtons})";
:first-child#{$target} + {
#{$notTarget},
#{$target} + #{$button} {
padding-inline-start: var(--toolbar-start-end-padding) !important;
}
}
}
#nav-bar-customization-target > #forward-button {
-moz-box-ordinal-group: 4;
}
}
@include Option("userChrome.combined.urlbar.home_button") {
#nav-bar-customization-target > #home-button {
-moz-box-ordinal-group: 3;
@include BoxOrder(3);
@include NotOption("userChrome.combined.urlbar.nav_button") {
&:is(:first-child) + :is(toolbarbutton, toolbaritem) {
padding-inline-start: var(--toolbar-start-end-padding) !important;
}
}
}
@import "home_button";
}
@include Option("userChrome.combined.urlbar.reload_button") {
#nav-bar-customization-target > #stop-reload-button {
-moz-box-ordinal-group: 6;
@include BoxOrder(6);
}
@import "reload_button";

104
src/compatibility/_os.scss
View file

@ -20,9 +20,15 @@
/*= Windows 7, 8 - Tab Bar Background *****************************************/
@include OS($win7, $win8) {
@include NotOption("userChrome.theme.transparent.frame") {
/* Header Color */
:root:not([lwtheme-image]):-moz-lwtheme {
background-color: var(--lwt-accent-color) !important;
&:-moz-window-inactive {
background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important;
}
}
}
}
@ -51,7 +57,7 @@
}
}
/*= Windows 7, 8 - Menu Active Color =========================================*/
/*= Windows 7, 8 - Menu Bar ==================================================*/
@include OS($win7, $win8) {
menupopup > menu,
menupopup > menuitem,
@ -68,6 +74,39 @@
color: inherit !important; /* Original: -moz-menubarhovertext */
background-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* Original: -moz-menuhover */
}
}
/*= Windows - Native Menu ====================================================*/
//-- Mixin ---------------------------------------------------------------------
@mixin _os_menuEmulateActive($activeBg, $activeBd, $disabledBg, $disabledBd) {
menu[_moz-menuactive="true"],
menuitem[_moz-menuactive="true"] {
background-color: $activeBg !important;
border-color: $activeBd !important;
&[disabled="true"] {
background-color: $disabledBg !important;
border-color: $disabledBd !important;
}
}
}
@mixin _os_menuEmulate($bgRate, $bdRate) {
@include _os_menuEmulateActive(
color-mix(in srgb, -moz-menuhover $bgRate, transparent),
color-mix(in srgb, -moz-menuhover $bdRate, transparent),
color-mix(in srgb, currentColor $bgRate, transparent),
color-mix(in srgb, currentColor $bdRate, transparent)
);
}
//------------------------------------------------------------------------------
@include WinNativeMenu() {
@include OS($win) {
// UI Density Menu Item Padding #649
.customization-uidensity-menuitem > .menu-iconic-left {
width: unset !important;
}
menulist > menupopup > menuitem[_moz-menuactive="true"],
menulist > menupopup > menu[_moz-menuactive="true"] {
@ -87,23 +126,8 @@
}
}
//-- Mixin ---------------------------------------------------------------------
@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;
&[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) {
@media (-moz-windows-classic: 0) {
@include _os_menuEmulate(5%, 60%);
/* Remove text shadow */
@ -118,10 +142,24 @@
color: unset !important; /* Original: black */
}
}
}
@include OS($win8) {
@include _os_menuEmulate(17%, 80%);
}
@include OS($win10) {
@include NativeMenuPopup {
@include _os_menuEmulateActive(
#91c9f7, // color-mix(in srgb, -moz-menuhover 40%, transparent)
transparent,
color-mix(in srgb, currentColor 9%, transparent),
transparent
);
}
}
}
@include OS($linux) {
/*= Linux - Global Menubar Active Color ====================================*/
#main-menubar > menu[open="true"],
@ -208,3 +246,35 @@ $_os_linuxDefaultShadow: 0 0 4px rgba(128, 128, 142, 0.5);
}
}
}
/*= Windows - Classic Theme #734 =============================================*/
// It occurs by #titlebar { appearance: none !important; } above
// https://github.com/mozilla/gecko-dev/blob/4334cb91a3762ac497c50a1c7b86b8004690229e/browser/themes/windows/browser.css#L96-L109
// https://github.com/mozilla/gecko-dev/blob/4334cb91a3762ac497c50a1c7b86b8004690229e/browser/themes/windows/browser.css#L164-L174
// https://github.com/mozilla/gecko-dev/blob/4334cb91a3762ac497c50a1c7b86b8004690229e/browser/themes/windows/browser-aero.css#L71-L81
@include OS($win) {
@include WinClassic {
:root[tabsintitlebar][sizemode="normal"]:not(:-moz-lwtheme) #navigator-toolbox {
appearance: auto !important;
-moz-default-appearance: -moz-window-titlebar !important;;
}
:root[tabsintitlebar][sizemode="maximized"]:not(:-moz-lwtheme) #navigator-toolbox {
appearance: auto !important;;
-moz-default-appearance:-moz-window-titlebar !important;;
}
:root[tabsintitlebar]:not(:-moz-lwtheme) #tabbrowser-arrowscrollbox {
color: -moz-dialogtext !important;
}
:root[tabsintitlebar][sizemode="normal"] #navigator-toolbox:-moz-lwtheme {
background-image: linear-gradient(
to bottom,
ThreeDLightShadow 0, ThreeDLightShadow 1px,
ThreeDHighlight 1px, ThreeDHighlight 2px,
ActiveBorder 2px, ActiveBorder 4px, transparent 4px
) !important;
}
}
}

59
src/compatibility/_theme.scss
View file

@ -24,6 +24,16 @@
}
}
/*= Subview button, Menu's right padding #597 ================================*/
.subviewbutton.toolbaritem-combined-buttons:not([shortcut]),
.subviewbutton.subviewbutton-nav:not([shortcut]),
menu.subviewbutton {
padding-inline-end: 0 !important;
}
#allTabsMenu-allTabsView .subviewbutton.subviewbutton-nav:not([shortcut]) {
padding-inline-end: var(--arrowpanel-menuitem-padding-inline) !important; // #717
}
/*= Icon Fill Color ==========================================================*/
:root:-moz-lwtheme {
/* Auto create --lwt-toolbarbutton-icon-fill-attention, fix for nightly default theme
@ -136,45 +146,20 @@ vbox[part="drop-indicator-bar"] > image[part="drop-indicator"] {
--focus-outline-color: var(--in-content-focus-outline-color, AccentColor) !important;
}
/*= Menu color #477 ==========================================================*/
@media (-moz-windows-non-native-menus) {
:root {
/* Override some menu color variables for light browser themes. */
--menuitem-hover-background-color: #e0e0e6;
--menu-background-color: #f9f9fb;
--menu-color: #15141a;
--menuitem-disabled-hover-background-color: rgba(224, 224, 230, 0.4);
--menu-disabled-color: rgba(21, 20, 26, 0.4);
--menu-border-color: #cfcfd8;
--menu-icon-opacity: 0.7;
/* Declare menu colors for dark themes, but don't override anything yet. */
--dark-menuitem-hover-background-color: #52525e;
--dark-menu-background-color: #2b2a33;
--dark-menu-color: #fbfbfe;
--dark-menuitem-disabled-hover-background-color: rgba(82, 82, 94, 0.4);
--dark-menu-disabled-color: rgba(251, 251, 254, 0.4);
--dark-menu-border-color: #5b5b66;
--dark-menu-icon-opacity: 1;
}
/* Override the menu color variables for dark browser themes. */
@include Dark {
:root {
--menuitem-hover-background-color: var(--dark-menuitem-hover-background-color);
--menu-background-color: var(--dark-menu-background-color);
--menu-color: var(--dark-menu-color);
--menuitem-disabled-hover-background-color: var(--dark-menuitem-disabled-hover-background-color);
--menu-disabled-color: var(--dark-menu-disabled-color);
--menu-border-color: var(--dark-menu-border-color);
--menu-icon-opacity: var(--dark-menu-icon-opacity);
}
}
}
/*= Firefox View Border #498 =================================================*/
:root:not([privatebrowsingmode=temporary])[firefoxviewhidden] #firefox-view-button + #tabbrowser-tabs {
@mixin _firefox_view_border_remove() {
#tabbrowser-tabs {
border-inline-start: none !important;
padding-inline-start: var(--tab-overflow-pinned-tabs-width) !important;
margin-inline-start: 0 !important;
}
}
:root:not([privatebrowsingmode=temporary])[firefoxviewhidden] #firefox-view-button + {
@include _firefox_view_border_remove;
}
@include Option("userChrome.tab.static_separator") {
// #531
@include _firefox_view_border_remove;
}

48
src/contents/_activity_stream.scss
View file

@ -1,4 +1,4 @@
@-moz-document url("about:home"), url("about:newtab") {
@include moz-document(url "about:home", url "about:newtab") {
/** Activity Stream - Search Focus Border: like URL *************************/
@include Option("userContent.page.field_border") {
/* At DarkMode, Color */
@ -64,22 +64,36 @@
}
/* Search Bar */
.search-inner-wrapper input {
.search-wrapper .search-inner-wrapper {
// When `browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar`
// input(#newtab-search-text): false
// .search-handoff-button: true
$_activityStreamSearchbar: "> input, > .search-handoff-button";
$_activeSearchbar: selector.nest(":active", $_activityStreamSearchbar);
$_activeSearchbarResult: ();
@each $searchbarSelctor in $_activeSearchbar {
$_activeSearchbarResult: append($_activeSearchbarResult, "&" + $searchbarSelctor, $separator: comma);
}
#{$_activityStreamSearchbar} {
transition: 1s var(--animation-easing-function);
transition-property: border-color, box-shadow;
}
.search-wrapper .search-inner-wrapper:active input,
.search-wrapper input:focus {
#{$_activeSearchbarResult},
#{selector.append($_activityStreamSearchbar, ":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 {
&:hover {
#{$_activityStreamSearchbar} {
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") {
@ -145,7 +159,7 @@
#contentSearchSettingsButton::before {
content: url("chrome://global/skin/icons/settings.svg") !important;
display: -moz-inline-box;
@include InlineBox;
/* Color */
-moz-context-properties: fill, fill-opacity !important;
@ -193,4 +207,26 @@
}
}
}
/** Activity Stream - Hide Firefox's logo ***********************************/
@include Option("userContent.newTab.hidden_logo") {
.logo-and-wordmark {
display: none !important;
}
.outer-wrapper:not(.fixed-search) .search-wrapper {
padding-top: 0 !important;
}
}
/** Activity Stream - Hide Firefox's logo ***********************************/
@include Option("userContent.newTab.background_image") {
body {
// https://best-wallpaper.net/Forest-trees-sunset-art-picture_wallpapers.html
background-image: var(--uc-newTab-wallpaper, url("../icons/Forest-trees-sunset-art-picture_3840x2160.jpg"));
background-size: cover; /* or auto auto */
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
}
}

39
src/contents/_compatibility.scss Normal file
View file

@ -0,0 +1,39 @@
@include moz-document(url-prefix "about:preferences") {
.content-blocking-warning.info-box-container > hbox > .content-blocking-warning-image {
margin-inline-start: -7px !important;
margin-inline-end: 8px !important; // Original: 6px
width: 20px !important; // ESR(102): 16px, Nightly(116): 27px
}
#pane-experimental-search-results-header,
#pane-experimental-subtitle {
min-height: 27px !important; // Original: 30px
padding-inline-start: 35px !important;
}
// Align & Separator #722
#firefoxExperimentalCategory {
&:not([hidden="true"]) {
display: inline-block;
}
> label {
float: left;
}
> hbox {
transform: translateY(5px);
}
}
#pane-experimental-featureGates > html|p[data-l10n-id="pane-experimental-description2"] {
border-bottom: 1px solid var(--in-content-border-color);
padding-bottom: 1.5em;
}
}
// #695
@include moz-document(url-prefix "about:addons") {
#updates-message + .page-options-menu > .more-options-button {
box-sizing: content-box;
padding: 0 !important;
}
}

12
src/contents/_context_menu.scss
View file

@ -1,5 +1,7 @@
@-moz-document url("chrome://browser/content/places/places.xhtml"),
url("about:downloads") {
@include moz-document(
url "chrome://browser/content/places/places.xhtml",
url "about:downloads"
) {
@import "../icons/layout/menu_contents";
/*= Context Menu ===========================================================*/
@ -12,3 +14,9 @@
@import "../icons/library";
}
}
@include moz-document(url-prefix "about:addons") {
@include Option("userChrome.icon.context_menu") {
@import "../icons/addon_page";
}
}

19
src/contents/_dark_mode.scss
View file

@ -2,4 +2,23 @@
@import "dark_mode/addons_org";
@import "dark_mode/support_org";
@import "dark_mode/accounts_com";
@include Option("userContent.page.dark_mode.pdf") {
@include moz-document(unobservable-document) {
@include moz-document(regexp "^(?!.*\\.pdf\\?n).*") {
#outerContainer {
--sidebaritem-bg-color: #38383D;
--uc-pdf-dark-filter: grayscale(10%) invert(90%);
}
#sidebarContainer > #sidebarContent > #thumbnailView .thumbnailImage {
filter: var(--uc-pdf-dark-filter);
box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.5), 0 2px 8px hsla(0, 0%, 100%, 0.3) !important;
}
#viewerContainer > #viewer > .page > .canvasWrapper > canvas {
filter: var(--uc-pdf-dark-filter);
}
}
}
}
}

2
src/contents/_downloads.scss
View file

@ -1,4 +1,4 @@
@-moz-document url-prefix("about:downloads") {
@include moz-document(url-prefix "about:downloads") {
@include Animate {
@include Option("userChrome.decoration.download_panel") {
@import "../decoration/download_panel";

66
src/contents/_error_page.scss
View file

@ -1,7 +1,10 @@
@-moz-document url-prefix("about:neterror"),
url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"),
url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml")
{
@include moz-document(
url-prefix "about:neterror",
url-prefix "about:restartrequired",
url "chrome://browser/content/aboutRestartRequired.xhtml",
url "about:sessionrestore",
url "chrome://browser/content/aboutSessionRestore.xhtml"
) {
/* Illustrations Position */
#errorPageContainer,
.neterror > .container,
@ -66,50 +69,63 @@
//------------------------------------------------------------------------------
@-moz-document url-prefix("about:neterror?e=connectionFailure"),
url-prefix("about:neterror?e=netInterrupt"),
url-prefix("about:neterror?e=netReset"),
url-prefix("about:neterror?e=netTimeout"),
url-prefix("about:neterror?e=netOffline"),
url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml")
{
@include moz-document(
url-prefix "about:neterror?e=connectionFailure",
url-prefix "about:neterror?e=netInterrupt",
url-prefix "about:neterror?e=netReset",
url-prefix "about:neterror?e=netTimeout",
url-prefix "about:neterror?e=netOffline",
url-prefix "about:restartrequired",
url "chrome://browser/content/aboutRestartRequired.xhtml"
) {
@include _errorContainerImage("../icons/error-connection-failure.svg");
}
@-moz-document url-prefix("about:neterror?e=dnsNotFound") {
@include moz-document(url-prefix "about:neterror?e=dnsNotFound") {
@include _errorContainerImage("../icons/error-server-not-found.svg");
}
@-moz-document url-prefix("about:neterror?e=blockedByPolicy"),
url-prefix("about:neterror?e=deniedPortAccess"),
url-prefix("about:neterror?e=malformedURI") {
@include moz-document(
url-prefix "about:neterror?e=blockedByPolicy",
url-prefix "about:neterror?e=deniedPortAccess",
url-prefix "about:neterror?e=malformedURI"
) {
@include _errorContainerImage("chrome://browser/skin/illustrations/error-malformed-url.svg");
}
@-moz-document url-prefix("about:neterror?e=clockSkewError"),
url-prefix("about:neterror?e=nssFailure") {
@include moz-document(
url-prefix "about:neterror?e=clockSkewError",
url-prefix "about:neterror?e=nssFailure"
) {
@include _errorContainerImage("../icons/blue-berror.svg") {
background-size: 18.5em;
}
}
@-moz-document url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml")
{
@include moz-document(url "about:sessionrestore" , url "chrome://browser/content/aboutSessionRestore.xhtml") {
@include _errorDescriptionImage("../icons/error-session-restore.svg");
}
@-moz-document url-prefix("about:neterror?e=fileNotFound") {
@include moz-document(url-prefix "about:neterror?e=fileNotFound") {
@include _errorTitleImage("chrome://global/skin/icons/info.svg");
#text-container {
padding-inline-start: 0;
}
}
@-moz-document url-prefix("about:tabcrashed") {
@include moz-document(url-prefix "about:tabcrashed") {
@include _errorTitleImage("chrome://browser/skin/tab-crashed.svg");
}
@-moz-document url("about:robots"), url("chrome://browser/content/aboutRobots.xhtml")
{
@include moz-document(url "about:robots", url "chrome://browser/content/aboutRobots.xhtml") {
@include _errorTitleImage("chrome://browser/content/aboutRobots-icon.png");
}
@-moz-document url("about:welcomeBack"), url("chrome://browser/content/aboutWelcomeBack.xhtml")
{
@include moz-document(url "about:welcomeBack", url "chrome://browser/content/aboutWelcomeBack.xhtml") {
@include _errorTitleImage("../icons/welcome-back.svg");
}
@include moz-document(url-prefix "about:preferences") {
#no-results-message::after {
content: url("../icons/no-search-results.svg");
width: 380px;
height: 293px;
margin-top: 64px;
margin-inline: auto;
}
}

8
src/contents/_monospace.scss
View file

@ -1,5 +1,7 @@
@-moz-document url-prefix("about:"),
url-prefix("chrome://browser/content/places/places.xhtml"),
regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
@include moz-document(
url-prefix "about:",
url-prefix "chrome://",
regexp "^((jar:)?file:\/\/\/).*\/$"
) {
@import "../theme/monospace";
}

16
src/contents/_proton_color.scss
View file

@ -1,10 +1,12 @@
@-moz-document url-prefix("about:"),
url-prefix("chrome://browser/content/places/places.xhtml"),
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:\/\/)).*\/$") {
@include moz-document(
url-prefix "about:",
url-prefix "chrome://",
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:\/\/\/).*\/$"
) {
@import "../theme/proton_color";
@include Option("userContent.page.proton_color.dark_blue_accent") {

3
src/contents/_proton_contents.scss
View file

@ -26,5 +26,8 @@
/*= about:memory =============================================================*/
@import "proton_contents/about_memory";
/*= about:preferences ========================================================*/
@import "proton_contents/about_preferences";
/*= chrome://browser/content/places/places.xhtml =============================*/
@import "../library/contents";

183
src/contents/_rounding.scss Normal file
View file

@ -0,0 +1,183 @@
@include Option("userChrome.rounding.square_button") {
@include moz-document(
url-prefix "about:",
regexp "^chrome:\/\/\\w+\/content\/.*\.xhtml$"
) {
button:not(.toggle-button),
.close-icon,
.action-icon::before,
.page-section-header > .twisty,
.closed-tab-li-main,
#categories > .category,
.sidebar-footer-link {
border-radius: 0 !important;
}
}
@include moz-document(url-prefix "about:debugging") {
.sidebar-item {
border-radius: 0 !important;
}
}
@include moz-document(url-prefix "chrome://browser/content/places/places.xhtml", url-prefix "about:downloads") {
.downloadButton > .button-box {
border-radius: 0 !important;
}
}
@include moz-document(url-prefix "about:protections") {
#manage-protections,
#sign-up-for-monitor-link,
#get-proxy-extension-link,
#get-vpn-link,
#vpn-banner-link,
.monitor-partial-breaches-link-wrapper,
.monitor-breaches-link-wrapper {
border-radius: 0 !important;
}
}
@include moz-document(regexp ".*\.pdf$") {
.toolbarButton,
.dropdownToolbarButton,
.secondaryToolbarButton,
.dialogButton {
border-radius: 0 !important;
}
}
}
@include Option("userChrome.rounding.square_dialog") {
@include moz-document(url "about:home", url "about:newtab") {
.modal {
border-radius: 0 !important;
}
}
}
@include Option("userChrome.rounding.square_checklabel") {
@include moz-document(
url-prefix "about:",
regexp "^chrome:\/\/\\w+\/content\/.*\.xhtml$"
) {
input[type="checkbox"]:not(.toggle-button),
.checkbox-check {
border-radius: 0 !important;
}
}
}
@include Option("userChrome.rounding.square_field") {
@include moz-document(
url-prefix "about:",
regexp "^chrome:\/\/\\w+\/content\/.*\.xhtml$"
) {
input:is([type="color"], [type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]),
textarea,
select,
menulist,
tree,
treecols,
listheader,
richlistbox,
search-textbox,
.web-appearance-choice,
.content-blocking-category,
#translations-manage-install-list {
border-radius: 0 !important;
}
}
@include moz-document(url-prefix "about:debugging") {
.default-input {
border-radius: 0 !important;
}
}
@include moz-document(url "about:home", url "about:newtab") {
.search-wrapper {
.search-handoff-button,
input {
border-radius: 0 !important;
}
}
}
@include moz-document(regexp ".*\.pdf$") {
.toolbarField,
.thumbnailSelectionRing {
border-radius: 0 !important;
}
}
}
@include Option("userChrome.rounding.square_menupopup") {
@include moz-document(url-prefix "about:", url-prefix "chrome://") {
panel,
menupopup {
--panel-border-radius: 0 !important;
}
}
@include moz-document(url-prefix "about:addons") {
panel-list {
border-radius: 0 !important;
}
}
@include moz-document(url-prefix "about:logins") {
.menu {
border-radius: 0 !important;
}
}
@include moz-document(url "about:home", url "about:newtab") {
.context-menu {
border-radius: 0 !important;
}
}
@include moz-document(regexp ".*\.pdf$") {
.doorHanger,
.doorHangerRight {
border-radius: 0 !important;
}
}
}
@include Option("userChrome.rounding.square_infobox") {
@include moz-document(
url-prefix "about:",
regexp "^chrome:\/\/\\w+\/content\/.*\.xhtml$"
) {
/*
* .container is inside shadow DOM,
* and it does not have any other classes,
* but there may be other elements with the same class,
* hence the weird selector.
*/
link[href="chrome://global/content/elements/message-bar.css"] + .container,
.info-box-container:not(.content-blocking-category),
.options-container,
#sanitizeEverythingWarningBox {
border-radius: 0 !important;
}
}
@include moz-document(url-prefix "about:debugging") {
.message {
border-radius: 0 !important;
}
}
@include moz-document(url-prefix "about:firefoxview") {
.card,
.card::before, // .zap-card border
.empty-container,
.synced-tab-a,
.synced-tab-li-placeholder {
border-radius: 0 !important;
}
}
}

3
src/contents/dark_mode/_accounts_com.scss
View file

@ -1,6 +1,5 @@
/*= Accounts.com ===========================================================*/
@-moz-document url-prefix("https://accounts.firefox.com")
{
@include moz-document(url-prefix "https://accounts.firefox.com") {
/* Basic */
body {
color: var(--in-content-page-color) !important;

3
src/contents/dark_mode/_addons_org.scss
View file

@ -1,6 +1,5 @@
/*= Addons.org =============================================================*/
@-moz-document url-prefix("https://addons.mozilla.org")
{
@include moz-document(url-prefix "https://addons.mozilla.org") {
/* Basic */
.Page-content,
.SecondaryHero,

3
src/contents/dark_mode/_support_org.scss
View file

@ -1,6 +1,5 @@
/*= Support.org ============================================================*/
@-moz-document url-prefix("https://support.mozilla.org")
{
@include moz-document(url-prefix "https://support.mozilla.org") {
/* Basic */
:root {
--color-blue-06: var(--in-content-link-color) !important;

2
src/contents/proton_contents/_about_cache.scss
View file

@ -1,4 +1,4 @@
@-moz-document url-prefix("about:cache") {
@include moz-document(url-prefix "about:cache") {
table {
padding: 0 !important;
}

2
src/contents/proton_contents/_about_checkerboard.scss
View file

@ -1,4 +1,4 @@
@-moz-document url-prefix("about:checkerboard") {
@include moz-document(url-prefix "about:checkerboard") {
#canvas {
border: 1px solid var(--in-content-border-color) !important;
}

2
src/contents/proton_contents/_about_memory.scss
View file

@ -1,4 +1,4 @@
@-moz-document url-prefix("about:memory") {
@include moz-document(url-prefix "about:memory") {
.opsRow,
.section {
background-color: var(--in-content-box-background) !important;

2
src/contents/proton_contents/_about_plugins.scss
View file

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

21
src/contents/proton_contents/_about_preferences.scss Normal file
View file

@ -0,0 +1,21 @@
@include moz-document(url-prefix "chrome://browser/content") {
@import "../../theme/proton_chrome/sanitize_everything";
}
@include moz-document(url-prefix "about:preferences") {
// Odd table #737
#handlersView > richlistitem,
#translations-manage-install-list > .translations-manage-language {
&:hover {
background-color: var(--in-content-item-hover);
color: var(--in-content-item-hover-text);
}
&[selected="true"] {
background-color: var(--in-content-item-selected);
color: var(--in-content-item-selected-text);
}
&:nth-child(even):not([selected="true"], :hover) {
background-color: var(--in-content-box-background-odd);
}
}
}

6
src/contents/proton_contents/_directory_view.scss
View file

@ -1,5 +1,7 @@
@-moz-document url-prefix("about:sync-log"),
regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
@include 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 */

2
src/contents/proton_contents/_field_border.scss
View file

@ -1,4 +1,4 @@
@-moz-document url-prefix("about:") {
@include moz-document(url-prefix "about:") {
html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):not(#newtab-search-text):hover,
html|textarea:hover,
xul|search-textbox:hover {

49
src/contents/proton_contents/_proton_commons.scss
View file

@ -1,10 +1,25 @@
/*= 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:\/\/)).*\/$") {
@include moz-document(
url-prefix "about:",
url-prefix "chrome://pippki/content/",
url-prefix "chrome://browser/content/"
) {
// The first row separator line #736
xul|treecols {
// border-bottom: 1px solid var(--in-content-border-color);
border-bottom-color: var(--in-content-box-border-color) !important;
}
}
@include 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 {
@ -68,6 +83,10 @@
margin: 4px 8px !important;
/* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */
font-size: 1em !important;
@include Option("userChrome.rounding.square_button") {
border-radius: 0 !important;
}
}
button {
font-weight: 600 !important;
@ -142,6 +161,10 @@
border-radius: 2px !important;
margin-inline: 0 6px !important;
flex-shrink: 0 !important; /* avoid shrinking inside flex container */
@include Option("userChrome.rounding.square_checklabel") {
border-radius: 0 !important;
}
}
input[type="checkbox"]:enabled:hover {
background-color: var(--checkbox-unchecked-hover-bgcolor) !important;
@ -211,16 +234,20 @@
}
}
@-moz-document url-prefix("about:plugins"),
url-prefix("about:cache"),
url-prefix("about:checkerboard") {
@include 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") {
@include moz-document(
url-prefix "about:cache",
url-prefix "about:checkerboard"
) {
th,
td {
border: 1px solid var(--in-content-table-border-color) !important;

2
src/contents/proton_contents/_view_source.scss
View file

@ -1,4 +1,4 @@
@-moz-document url-prefix("view-source") {
@include 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 */

4
src/counter/_bookmark_menu.scss
View file

@ -2,14 +2,14 @@ menupopup[placespopup="true"] > menu.bookmark-item > .menu-right {
counter-reset: bookmark-counts 0;
}
menupopup[placespopup="true"] > menu.bookmark-item::after {
display: -moz-inline-box;
@include InlineBox;
content: "(" counter(bookmark-counts) ")";
}
menupopup[placespopup="true"] > menu.bookmark-item > .menu-iconic-highlightable-text,
menupopup[placespopup="true"] > menu.bookmark-item > .menu-accel-container,
menupopup[placespopup="true"] > menu.bookmark-item > .menu-right {
-moz-box-ordinal-group: 2;
@include BoxOrder(2);
}
menu.bookmark-item > menupopup[placespopup="true"] > .bookmark-item {

9
src/decoration/_animate.scss
View file

@ -37,6 +37,7 @@
&:not([collapsed]) {
/* -moz-box-flex may be caused #tabbrowser-tabs[closebuttons] */
transition: -moz-box-flex 0.2s var(--animation-easing-function),
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] {
@ -114,7 +115,7 @@ xul|search-textbox.tabsFilter,
will-change: margin-inline-start, opacity, visibility;
&[hidden="true"] {
display: -moz-box !important;
@include Box(true);
margin-inline-start: -18em;
opacity: 0;
visibility: collapse;
@ -155,8 +156,7 @@ xul|search-textbox.tabsFilter,
}
/*- Expand - Synced Tabs ---------------------------------------------------*/
@-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml")
{
@include 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%);
@ -177,8 +177,7 @@ xul|search-textbox.tabsFilter,
}
/*- Arrow - Synced Tabs ----------------------------------------------------*/
@-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml")
{
@include moz-document(url "chrome://browser/content/syncedtabs/sidebar.xhtml") {
/* treechildren::-moz-tree-twisty: Can't apply */
#template-container .item.client {
.item-twisty-container {

15
src/decoration/_cursor.scss
View file

@ -23,13 +23,14 @@ menuitem.openintabs-menuitem,
#identity-popup-clear-sitedata-button,
#identity-popup-more-info,
#unified-extensions-manage-extensions,
.unified-extensions-item-open-menu {
.unified-extensions-item-open-menu,
.unified-extensions-item-menu-button.subviewbutton,
#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title > .ac-text-overflow-container > .ac-title-text {
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;
}
*/
// 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;
// }

0
src/fullscreen/_show_bookmarkbar.css → src/fullscreen/_show_bookmarkbar.scss
View file

26
src/hidden/_index.scss
View file

@ -27,6 +27,24 @@
}
}
@include Option("userChrome.hidden.private_indicator") {
// :root:not([privatebrowsingmode=temporary]) .private-browsing-indicator,
// :root[privatebrowsingnewindicator] .private-browsing-indicator,
// :root:not([privatebrowsingnewindicator]) #private-browsing-indicator-with-label,
// :root:not([privatebrowsingmode=temporary]) #private-browsing-indicator-with-label {
// }
.private-browsing-indicator,
#private-browsing-indicator-with-label {
display: none;
}
}
@include Option("userChrome.hidden.titlebar_container") {
.titlebar-buttonbox-container {
display: none !important;
}
}
@include Option("userChrome.hidden.sidebar_header") {
@include NotOption("userChrome.hidden.sidebar_header.vertical_tab_only") {
#sidebar-header {
@ -59,6 +77,12 @@
}
}
@include Option("userChrome.hidden.urlbar_iconbox.label_only") {
&.notSecureText,
&.chromeUI,
&.extensionPage {
margin-inline-end: var(--identity-box-margin-inline) !important;
}
&.chromeUI #identity-icon-box,
&.extensionPage #identity-icon-box {
&:not(:hover) {
@ -98,7 +122,7 @@
}
}
@include NativeMenu {
@include NativeToolkitMenu {
#context-back,
#context-forward {
&[disabled="true"] {

41
src/icons/_addon_page.scss Normal file
View file

@ -0,0 +1,41 @@
// https://github.com/mozilla/gecko-dev/commit/260e4270fca18f2f6f59a1ffe4deccb5080a15f7
button[role="menuitem"] {
background-image: var(--icon, url("../icons/blank.svg")); /* Don't use !important. because of [checked] */
}
panel-item {
&[action="check-for-updates"] {
// --icon: url("chrome://global/skin/icons/update-icon.svg");
// --icon: url("chrome://mozapps/skin/extensions/category-recent.svg");
// --icon: url("chrome://browser/skin/sync.svg");
--icon: url("../icons/refresh-cw.svg");
}
&[action="view-recent-updates"] {
// --icon: url("chrome://browser/skin/controlcenter/dashboard.svg");
--icon: url("chrome://global/skin/icons/info.svg");
}
&[action="install-from-file"] {
// --icon: url("chrome://browser/skin/import.svg");
--icon: url("chrome://devtools/skin/images/import.svg");
}
&[action="debug-addons"] {
--icon: url("../icons/bug.svg");
}
&[action="set-update-automatically"] {
--icon: url("chrome://devtools/skin/images/profiler-stopwatch.svg");
}
&[action="reset-update-states"] {
--icon: url("chrome://devtools/skin/images/debugging-workers.svg");
}
&[action="manage-shortcuts"],
&[data-l10n-id="preferences-addon-button"],
&[data-l10n-id="manage-addon-button"] {
--icon: url("chrome://global/skin/icons/settings.svg");
}
}

29
src/icons/_global_menu.scss
View file

@ -19,7 +19,7 @@
#menu_openLocation {
}
#menu_openFile {
--menuitem-image: url("chrome://browser/skin/open.svg");
--menuitem-image: url("../icons/toolbarButton-upload.svg");
}
#menu_close {
}
@ -104,7 +104,8 @@ menu.share-tab-url-item {
--menuitem-image: url("../icons/toolbar.svg");
}
#viewSidebarMenuMenu {
--menuitem-image: url("chrome://browser/skin/sidebars.svg");
// --menuitem-image: url("chrome://browser/skin/sidebars.svg");
--menuitem-image: var(--uc-sidebar-icon);
}
#viewFullZoomMenu {
@ -143,12 +144,25 @@ menu.share-tab-url-item {
--menuitem-image: url("chrome://browser/skin/customize.svg");
}
/* viewSidebarMenu sub menu */
#menu_bookmarksSidebar {
--menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
#menu_historySidebar {
--menuitem-image: url("chrome://browser/skin/history.svg");
}
#menu_tabsSidebar {
--menuitem-image: url("../icons/synced-tabs.svg");
}
/* viewFullZoomMenu sub menu */
#menu_zoomEnlarge {
--menuitem-image: url("chrome://browser/skin/add-circle-fill.svg");
stroke: transparent !important;
}
#menu_zoomReduce {
--menuitem-image: url("chrome://browser/skin/subtract-circle-fill.svg");
stroke: transparent !important;
}
#menu_zoomReset {
--menuitem-image: url("../icons/resize.svg");
@ -175,6 +189,9 @@ menu.share-tab-url-item {
#hiddenTabsMenu {
--menuitem-image: url("../icons/eye-hide.svg")
}
#menu_searchHistory {
--menuitem-image: url("chrome://global/skin/icons/search-glass.svg");
}
#historyUndoMenu {
--menuitem-image: url("chrome://browser/skin/tab.svg");
}
@ -203,6 +220,10 @@ menu.share-tab-url-item {
--menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
#menu_searchBookmarks {
--menuitem-image: url("chrome://global/skin/icons/search-glass.svg");
}
#bookmarksToolbarFolderMenu {
}
#menu_unsortedBookmarks {
@ -308,6 +329,10 @@ menu.share-tab-url-item {
--menuitem-image: url("chrome://global/skin/icons/warning.svg");
}
#menu_HelpPopup_reportPhishingErrortoolmenu {
--menuitem-image: url("../icons/checkmark-circle.svg");
}
#helpSwitchDevice {
--menuitem-image: url("../icons/add-device.svg");
}
#aboutName {

17
src/icons/_index.scss
View file

@ -4,6 +4,16 @@
}
/** Panel - Icons *************************************************************/
:root {
--uc-sidebar-icon: url("chrome://browser/skin/sidebars.svg");
--uc-sidebar-icon-reverse: url("chrome://browser/skin/sidebars-right.svg");
@include Has {
&:has(#sidebar-box[positionend="true"]) {
--uc-sidebar-icon: url("chrome://browser/skin/sidebars-right.svg");
--uc-sidebar-icon-reverse: url("chrome://browser/skin/sidebars.svg");
}
}
}
@include Option("userChrome.icon.panel") {
@import "layout/panel";
@import "panel";
@ -28,8 +38,5 @@
}
}
/** Waterfox ******************************************************************/
@import "waterfox";
/** Tor Browser ***************************************************************/
@import "tor_browser";
/** Icons for fork browsers ***************************************************/
@import "fork_browsers/index";

10
src/icons/_library.scss
View file

@ -16,6 +16,9 @@
--menuitem-image: url("../icons/undo.svg");
}
#orgRedo {
@include Option("userChrome.icon.menu.full") {
--menuitem-image: url("../icons/redo.svg");
}
}
#orgCut {
@ -49,16 +52,19 @@
/*= maintenanceButtonPopup ===================================================*/
#backupBookmarks {
--menuitem-image: url("chrome://devtools/skin/images/datastore.svg");
--menuitem-image: url("../icons/datastore.svg");
}
#fileRestoreMenu {
@include Option("userChrome.icon.menu.full") {
--menuitem-image: url("../icons/datarestore.svg");
}
}
#fileImport {
--menuitem-image: url("../icons/toolbarButton-download.svg");
}
#fileExport {
--menuitem-image: url("chrome://browser/skin/open.svg");
--menuitem-image: url("../icons/toolbarButton-upload.svg");
}
#browserImport {

85
src/icons/_panel.scss
View file

@ -1,8 +1,8 @@
/*= Panel - Main =============================================================*/
#appMenu-proton-addon-banners > .addon-banner-item > .toolbarbutton-icon {
display: -moz-inline-box !important;
@include InlineBox(true);
margin-inline-start: var(--arrowpanel-menuicon-padding);
-moz-box-ordinal-group: 0 !important;
@include BoxOrder(0, true);
}
#appMenu-proton-update-banner::before {
@ -95,11 +95,18 @@
#appMenu-find-button2 {
list-style-image: url("chrome://global/skin/icons/search-glass.svg");
}
#appMenu-translate-button {
list-style-image: url(chrome://browser/skin/translations.svg);
}
#appMenu-zoom-controls2::before, /* Legacy v104 */
#appMenu-zoom-controls::before {
content: url("../icons/screenshot.svg");
}
}
#save-page-button {
// #496 #553
list-style-image: url("../icons/toolbarButton-download.svg") !important;
}
#appMenu-settings-button {
list-style-image: url("chrome://global/skin/icons/settings.svg");
@ -129,7 +136,7 @@
/* Default */
#fxa-manage-account-button::before {
content: "";
display: -moz-inline-box;
@include InlineBox;
width: 32px !important;
height: 32px !important;
border-radius: 50%;
@ -138,7 +145,7 @@
margin-inline-end: var(--arrowpanel-menuicon-padding);
@include Option("userChrome.icon.account_image_to_right") {
-moz-box-ordinal-group: 2 !important;
@include BoxOrder(2, true);
}
}
@include Option("userChrome.icon.account_label_to_right") {
@ -149,7 +156,8 @@
.syncNowBtn {
visibility: visible !important;
-moz-box-ordinal-group: 1 !important;
@include BoxOrder(0, true);
margin-inline-end: var(--arrowpanel-menuicon-padding);
}
#PanelUI-fxa-menu-setup-sync-button {
@ -157,7 +165,7 @@
}
#PanelUI-fxa-menu-connect-device-button {
list-style-image: url("chrome://browser/skin/fxa/add-device.svg");
list-style-image: url("../icons/add-device.svg");
}
#PanelUI-fxa-menu-sendtab-button {
list-style-image: url("../icons/send-to-device.svg");
@ -194,13 +202,13 @@
/* Change Separator */
#PanelUI-fxa-menu::before {
content: "";
display: -moz-box;
@include 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;
@include BoxOrder(0);
}
#PanelUI-sign-out-separator {
display: none;
@ -240,6 +248,9 @@ panelMenuBookmarkThisPage[starred] {
#appMenuRecentlyClosedWindows {
list-style-image: url("chrome://browser/skin/window.svg");
}
#appMenuSearchHistory {
list-style-image: url("chrome://global/skin/icons/search-glass.svg");
}
#appMenuRestoreSession, /* Legacy - v103 */
#appMenu-restoreSession {
list-style-image: url("../icons/restore-session.svg");
@ -337,6 +348,9 @@ panelMenuBookmarkThisPage[starred] {
#appMenu_menu_HelpPopup_reportPhishingtoolmenu {
list-style-image: url("chrome://global/skin/icons/warning.svg");
}
#appMenu_helpSwitchDevice {
list-style-image: url("../icons/add-device.svg");
}
#appMenu_aboutName {
list-style-image: url("chrome://global/skin/icons/info.svg");
}
@ -357,7 +371,7 @@ panelMenuBookmarkThisPage[starred] {
list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
}
#downloadsHistory .box-inherit.button-box {
display: -moz-inline-box !important;
@include InlineBox(true);
}
/*= Toolbar - Overflow Menu ==================================================*/
@ -386,6 +400,13 @@ panelMenuBookmarkThisPage[starred] {
/*= BMB_bookmarksPopup =======================================================*/
#BMB_viewBookmarksSidebar {
--menuitem-image: var(--uc-sidebar-icon);
&[data-l10n-args='{"isVisible":true}'] {
--menuitem-image: url("chrome://global/skin/icons/close.svg");
}
}
#BMB_searchBookmarks {
--menuitem-image: url("chrome://global/skin/icons/search-glass.svg");
}
#BMB_bookmarksShowAllTop,
#BMB_bookmarksShowAll {
@ -400,7 +421,7 @@ panelMenuBookmarkThisPage[starred] {
list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg") !important;
}
#BMB_bookmarksShowAllTop > .menu-iconic-left {
display: -moz-box !important;
@include Box(true);
}
}
@ -448,35 +469,57 @@ panelMenuBookmarkThisPage[starred] {
}
/*= sidebarMenu-popup ========================================================*/
@mixin _subviewMenuitem($icon, $selector: null) {
&.subviewbutton#{$selector} {
list-style-image: $icon;
}
&:is(menuitem)#{$selector} {
--menuitem-image: #{$icon};
}
}
#identity-popup-more-info {
list-style-image: url("chrome://global/skin/icons/info.svg");
@include _subviewMenuitem(url("chrome://global/skin/icons/info.svg"));
}
#sidebar-switcher-bookmarks {
list-style-image: url("chrome://browser/skin/bookmark.svg");
@include _subviewMenuitem(url("chrome://browser/skin/bookmark.svg"));
}
#sidebar-switcher-history {
list-style-image: url("chrome://browser/skin/history.svg");
@include _subviewMenuitem(url("chrome://browser/skin/history.svg"));
}
#sidebar-switcher-tabs {
list-style-image: url("chrome://browser/skin/tab.svg");
@include _subviewMenuitem(url("../icons/synced-tabs.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");
@include _subviewMenuitem(var(--uc-sidebar-icon-reverse));
}
#sidebarMenu-popup > .subviewbutton[data-l10n-id="sidebar-menu-close"] {
list-style-image: url("chrome://global/skin/icons/close.svg");
#sidebarMenu-popup > * {
@include _subviewMenuitem(
url("chrome://global/skin/icons/close.svg"),
"[data-l10n-id=\"sidebar-menu-close\"]"
);
}
/*= unified-extensions-view ===================================================*/
#unified-extensions-manage-extensions {
list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
}
/*= Compatibility ============================================================*/
// https://github.com/mozilla/gecko-dev/commit/d8ad6ecc983133a46a30cc998073d30a5e0e5f00
.sync-engine-tabs .checkbox-icon,
.sync-engine-tabs.sync-engine-image,
#sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon,
#sync-button {
list-style-image: url("../icons/synced-tabs.svg") !important;
}
/*= Tab Mix Plus =============================================================*/
#allTabsMenu_sortTabsButton {
list-style-image: url("../icons/text-sort-ascending.svg");
}

44
src/icons/context_menu/_content_area.scss
View file

@ -9,7 +9,7 @@
#context-viewsource-highlightSyntax {
/* checkbox */
--menuitem-image: url("../icons/code.svg");
--menuitem-image: url("../icons/highlight.svg");
}
#spell-no-suggestions {
@ -190,6 +190,9 @@
#context-selectall {
--menuitem-image: url("../icons/select-all-on.svg");
}
#context-reveal-password {
--menuitem-image: url("../icons/eye-show.svg");
}
#context-print-selection {
--menuitem-image: url("chrome://global/skin/icons/print.svg");
}
@ -262,6 +265,45 @@
}
}
/*= main-context-menu-frame ==================================================*/
#context-showonlythisframe {
--menuitem-image: url("../icons/eye-show.svg");
}
#context-openframeintab {
--menuitem-image: url("chrome://browser/skin/new-tab.svg");
}
#context-openframe {
--menuitem-image: url("chrome://browser/skin/window.svg");
}
#context-reloadframe {
--menuitem-image: url("../icons/reload.svg");
}
#context-bookmarkframe {
--menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
#context-saveframe{
--menuitem-image: url("../icons/toolbarButton-download.svg");
}
#context-printframe {
--menuitem-image: url("chrome://global/skin/icons/print.svg");
}
#context-take-frame-screenshot {
--menuitem-image: url("chrome://browser/skin/screenshot.svg");
}
#context-viewframesource {
--menuitem-image: url("../icons/document-search.svg");
}
#context-viewframeinfo {
--menuitem-image: url("chrome://global/skin/icons/info.svg");
}
#context-frameOsPid {
}
/*= Tab Mix Plus =============================================================*/
#tm-autoreload_menu {
// --menuitem-image: url("../icons/reload-auto.svg");

2
src/icons/context_menu/_downloads.scss
View file

@ -9,7 +9,7 @@
--menuitem-image: url("../icons/checkmark-circle.svg");
}
.downloadUseSystemDefaultMenuItem {
--menuitem-image: url("chrome://browser/skin/open.svg");
--menuitem-image: url("../icons/toolbarButton-upload.svg");
}
.downloadAlwaysUseSystemDefaultMenuItem {
/* checkbox */

16
src/icons/context_menu/_others.scss
View file

@ -42,7 +42,7 @@
&.manageExtensionItem {
--menuitem-image: url("chrome://global/skin/icons/settings.svg");
}
.removeExtensionItem {
&.removeExtensionItem {
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
}
@ -227,6 +227,10 @@ menuitem.searchbar-clear-history {
}
/*= unified-extensions-context-menu ==========================================*/
.unified-extensions-context-menu-pin-to-toolbar {
--menuitem-image: url("../icons/pin-tab.svg");
}
.unified-extensions-context-menu-manage-extension {
--menuitem-image: url("chrome://global/skin/icons/settings.svg");
}
@ -236,3 +240,13 @@ menuitem.searchbar-clear-history {
.unified-extensions-context-menu-report-extension {
--menuitem-image: url("../icons/send.svg");
}
/*= urlbarView-result-menu ===================================================*/
.urlbarView-result-menuitem {
&[data-command="dismiss"] {
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
&[data-command="help"] {
--menuitem-image: url("chrome://global/skin/icons/info.svg");
}
}

1
src/icons/context_menu/_tab_toolbar.scss
View file

@ -28,6 +28,7 @@
#tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab,
#sidebartabs_asamuzak_jp-menuitem-_muteTab {
--menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
stroke: transparent !important;
}
#context_toggleMuteTab[muted],
#context_toggleMuteSelectedTabs[muted],

34
src/icons/fork_browsers/_floorp.scss Normal file
View file

@ -0,0 +1,34 @@
@include Option("userChrome.icon.panel") {
#rebootappmenu {
list-style-image: url("../icons/refresh-cw.svg");
}
#openprofiledir {
list-style-image: url("../icons//folder.svg");
}
}
@include Option("userChrome.icon.menu") {
#usercssloader-menu {
--menuitem-image: url("../icons/developer.svg");
}
#toggle_statusBar {
--menuitem-image: url("../icons/pulse-square.svg");
}
// Sidebar
#muteMenu {
--menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
stroke: transparent !important;
}
#unloadWebpanelMenu {
--menuitem-image: url("../icons/tab-unload.svg");
}
#changeUAWebpanelMenu {
--menuitem-image: url("chrome://devtools/skin/images/command-responsivemode.svg");
fill-opacity: 0;
}
#deleteWebpanelMenu {
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
}

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