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

Merge branch 'master' into dev

Browse source
This commit is contained in:
alstjr7375 2022-12-07 11:56:34 +09:00
commit 529baece76
21 changed files with 368 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

21
.github/pull_request_template.md vendored
View file

@ -1,24 +1,19 @@
**Describe the PR** **Describe the PR**
<!-- A clear and concise description of what the PR is. --> <!-- 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 Issue**
<!--Related or discussed issues. If it's a big change, it's a good idea to open an issue ahead of time. --> <!--Related or discussed issues. If it's a big change, it's a good idea to open an issue ahead of time. -->
**Screenshots** **Screenshots**
<!-- If applicable, add screenshots to help explain your commit. --> <!-- 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** **Additional context**
<!-- Add any other context about the commit here. --> <!-- Add any other context about the commit here. -->

10
CREDITS
View file

@ -26,10 +26,16 @@ N: Jani Haiko
E: haiko.jani@gmail.com E: haiko.jani@gmail.com
W: https://github.com/ojaha065 W: https://github.com/ojaha065
N: kanlukasz
W: https://github.com/kanlukasz
N: nikkehtine N: nikkehtine
E: nikkehtine@int.pl E: nikkehtine@int.pl
W: https://github.com/nikkehtine W: https://github.com/nikkehtine
N: OSS.kr
W: https://www.oss.kr/
---------- ----------
Contributors Contributors
@ -109,6 +115,10 @@ W: https://github.com/Nyubis
N: roland-rollo N: roland-rollo
W: https://github.com/roland-rollo W: https://github.com/roland-rollo
N: ryenyuku
E: teamworks1732@gmail.com
W: https://github.com/ryenyuku
N: SanderTheDragon N: SanderTheDragon
E: sanderthedragon@zoho.com E: sanderthedragon@zoho.com
W: https://gitlab.com/SanderTheDragon W: https://gitlab.com/SanderTheDragon

21
README.org
View file

@ -12,7 +12,8 @@
- [[#why-proton][WHY Proton?]] - [[#why-proton][WHY Proton?]]
- [[#why-not-proton][WHY Not Proton?]] - [[#why-not-proton][WHY Not Proton?]]
- [[#padding-comparisons][Padding Comparisons]] - [[#padding-comparisons][Padding Comparisons]]
- [[#contributors][Contributors]] - [[#sponsors--contributors][Sponsors & Contributors]]
- [[#bug--questions][Bug / Questions?]]
- [[#faq][FAQ]] - [[#faq][FAQ]]
:END: :END:
@ -185,14 +186,28 @@ Windows users: Run with powershell ([[https://github.com/black7375/Firefox-UI-Fi
- Lepton - 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/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"/>@@]] [[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]]. 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 ** FAQ
- *Black pixels around the selected tab bottom corners* \\ - *Black pixels around the selected tab bottom corners* \\

56
css/leptonChrome.css
View file

@ -1295,8 +1295,9 @@
--panel-background: var(--menu-background-color) !important; --panel-background: var(--menu-background-color) !important;
--panel-border-color: var(--menu-border-color) !important; --panel-border-color: var(--menu-border-color) !important;
} }
html#main-window menupopup:not(.in-menulist) menuseparator { html#main-window menupopup:not(.in-menulist):not([placespopup]) menuseparator,
border-top: 1px solid var(--menu-border-color); html#main-window menupopup:not(.in-menulist)[placespopup] menuseparator::before {
border-top: 1px solid var(--menu-border-color) !important;
} }
html#main-window menupopup:not(.in-menulist) menu[disabled="true"], html#main-window menupopup:not(.in-menulist) menu[disabled="true"],
html#main-window menupopup:not(.in-menulist) menu[_moz-menuactive="true"][disabled="true"], html#main-window menupopup:not(.in-menulist) menu[_moz-menuactive="true"][disabled="true"],
@ -5910,6 +5911,10 @@
#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
z-index: 0 !important; z-index: 0 !important;
} }
#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] .tab-stack {
/* Temporary solution for compatibility #513 */
overflow-y: clip;
}
} }
/*= Selected Tab =============================================================*/ /*= Selected Tab =============================================================*/
/*= Selected Tab - Color like toolbar ========================================*/ /*= Selected Tab - Color like toolbar ========================================*/
@ -6612,7 +6617,6 @@
} }
} }
@supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-stack::before,
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab]
.tab-stack::after { .tab-stack::after {
@ -6685,6 +6689,9 @@
} }
/*= Unselected Tab - Static Separator ========================================*/ /*= Unselected Tab - Static Separator ========================================*/
@supports -moz-bool-pref("userChrome.tab.static_separator") { @supports -moz-bool-pref("userChrome.tab.static_separator") {
#TabsToolbar {
--toolbarseparator-color: color-mix(in srgb, currentColor 30%, transparent);
}
.tabbrowser-tab[first-visible-tab="true"] .tab-stack::before, .tabbrowser-tab[first-visible-tab="true"] .tab-stack::before,
.tab-stack::after { .tab-stack::after {
content: ""; content: "";
@ -6696,13 +6703,12 @@
position: absolute; position: absolute;
/* Position */ /* Position */
top: 50%; top: 50%;
transform: translateY(-50%) !important; transform: translateY(-50%);
/* Bar shape */ /* Bar shape */
width: 0px; width: 0px;
height: 100%; height: 100%;
/* Bar Color */ /* Bar Color */
opacity: 0.3; border-right: 1px solid var(--toolbarseparator-color);
border-right: 1px solid var(--lwt-background-tab-separator-color, currentColor) !important;
} }
.tab-stack::after { .tab-stack::after {
right: 0; right: 0;
@ -6711,8 +6717,7 @@
.tabbrowser-tab[visuallyselected] .tab-stack::before, .tabbrowser-tab[visuallyselected] .tab-stack::before,
.tabbrowser-tab[visuallyselected] .tab-stack::after, .tabbrowser-tab[visuallyselected] .tab-stack::after,
.tabbrowser-tab[beforeselected-visible] .tab-stack::after { .tabbrowser-tab[beforeselected-visible] .tab-stack::after {
--lwt-background-tab-separator-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255))); --toolbarseparator-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255)));
opacity: 1;
} }
} }
@supports not -moz-bool-pref("userChrome.tab.static_separator.selected_accent") { @supports not -moz-bool-pref("userChrome.tab.static_separator.selected_accent") {
@ -7909,6 +7914,11 @@
--uc-sidebar-activate-width: 18rem; --uc-sidebar-activate-width: 18rem;
--uc-sidebar-activate-width-reverse: calc(-1 * var(--uc-sidebar-activate-width)); --uc-sidebar-activate-width-reverse: calc(-1 * var(--uc-sidebar-activate-width));
--uc-sidebar-fullscreen-width: 4px; --uc-sidebar-fullscreen-width: 4px;
--uc-sidebar-shadow-size: 1px;
--uc-sidebar-shadow-width: 0px;
--uc-sidebar-shadow-position: var(--uc-sidebar-shadow-position-default);
--uc-sidebar-shadow-position-default: calc(var(--uc-sidebar-shadow-size) + var(--uc-sidebar-shadow-width));
--uc-sidebar-shadow-color: #28282f;
--uc-autohide-sidebar-speed: 750ms; --uc-autohide-sidebar-speed: 750ms;
--uc-autohide-fullscreen-sidebar-speed: 1s; --uc-autohide-fullscreen-sidebar-speed: 1s;
--uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */
@ -7922,10 +7932,10 @@
--uc-sidebar-shadow-color: #28282f; --uc-sidebar-shadow-color: #28282f;
z-index: 1 !important; z-index: 1 !important;
position: relative !important; position: relative !important;
box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color); box-shadow: var(--uc-sidebar-shadow-position) 0px 15px -10px var(--uc-sidebar-shadow-color);
} }
#sidebar-box[positionend="true"] { #sidebar-box[positionend="true"] {
box-shadow: -1px 0px 15px -10px var(--uc-sidebar-shadow-color); --uc-sidebar-shadow-position: calc(-1 * var(--uc-sidebar-shadow-position-default));
} }
#sidebar { #sidebar {
display: block; display: block;
@ -7957,6 +7967,7 @@
#sidebar-box { #sidebar-box {
margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important;
will-change: padding-inline; will-change: padding-inline;
--uc-sidebar-shadow-width: var(--uc-sidebar-activate-width);
} }
#sidebar-box:not([hidden="true"]) { #sidebar-box:not([hidden="true"]) {
padding-inline-start: var(--uc-sidebar-activate-width) !important; padding-inline-start: var(--uc-sidebar-activate-width) !important;
@ -7964,7 +7975,7 @@
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
#sidebar-box { #sidebar-box {
transition: padding-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, transition: padding-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out,
visibility 0s linear !important; box-shadow 0s linear, visibility 0s linear !important;
} }
} }
} }
@ -8595,7 +8606,7 @@
} }
.tab-label, .tab-label,
.tab-secondary-label { .tab-secondary-label {
overflow: hidden; overflow: clip;
} }
.tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]), .tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]),
.tabbrowser-tab:not(:hover, [pinned]) .tab-label-container:not([textoverflow]) { .tabbrowser-tab:not(:hover, [pinned]) .tab-label-container:not([textoverflow]) {
@ -9257,17 +9268,22 @@
max-width: var(--uc-sidebar-width) !important; max-width: var(--uc-sidebar-width) !important;
will-change: min-width, max-width; will-change: min-width, max-width;
} }
#sidebar-box:is(:hover, :focus-within) {
--uc-sidebar-shadow-width: calc(var(--uc-sidebar-activate-width) - var(--uc-sidebar-width));
}
#sidebar-box:is(:hover, :focus-within) > #sidebar-header, #sidebar-box:is(:hover, :focus-within) > #sidebar-header,
#sidebar-box:is(:hover, :focus-within) > #sidebar { #sidebar-box:is(:hover, :focus-within) > #sidebar {
min-width: var(--uc-sidebar-activate-width) !important; min-width: var(--uc-sidebar-activate-width) !important;
max-width: var(--uc-sidebar-activate-width) !important; max-width: var(--uc-sidebar-activate-width) !important;
} }
:root[inFullscreen="true"] #sidebar-box { :root[inFullscreen="true"] #sidebar-box {
--uc-sidebar-shadow-width: var(--uc-sidebar-fullscreen-width);
margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important;
padding-inline-start: var(--uc-sidebar-fullscreen-width); padding-inline-start: var(--uc-sidebar-fullscreen-width);
will-change: padding-inline-start; will-change: padding-inline-start, opacity, box-shadow, visibility;
} }
:root[inFullscreen="true"] #sidebar-box:is(:hover, :focus-within) { :root[inFullscreen="true"] #sidebar-box:is(:hover, :focus-within) {
--uc-sidebar-shadow-width: var(--uc-sidebar-activate-width);
padding-inline-start: var(--uc-sidebar-activate-width); padding-inline-start: var(--uc-sidebar-activate-width);
} }
:root[inFullscreen="true"] #sidebar-box #sidebar-header, :root[inFullscreen="true"] #sidebar-box #sidebar-header,
@ -9282,13 +9298,22 @@
transition: min-width var(--uc-autohide-sidebar-speed) var(--animation-easing-function) transition: min-width var(--uc-autohide-sidebar-speed) var(--animation-easing-function)
var(--uc-autohide-sidebar-delay) !important; var(--uc-autohide-sidebar-delay) !important;
} }
#sidebar-box:is(:hover, :focus-within) {
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-box:is(:hover, :focus-within) > #sidebar-header, #sidebar-box:is(:hover, :focus-within) > #sidebar-header,
#sidebar-box:is(:hover, :focus-within) > #sidebar { #sidebar-box:is(:hover, :focus-within) > #sidebar {
transition-delay: 0ms !important; transition-delay: 0ms !important;
} }
:root[inFullscreen="true"] #sidebar-box { :root[inFullscreen="true"] #sidebar-box {
transition: padding-inline-start var(--uc-autohide-fullscreen-sidebar-speed) var(--animation-easing-function) transition: padding-inline-start var(--uc-autohide-fullscreen-sidebar-speed) var(--animation-easing-function)
var(--uc-autohide-sidebar-delay) !important; 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;
} }
:root[inFullscreen="true"] #sidebar-box:is(:hover, :focus-within) { :root[inFullscreen="true"] #sidebar-box:is(:hover, :focus-within) {
transition-delay: 0ms !important; transition-delay: 0ms !important;
@ -9324,7 +9349,8 @@
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
#sidebar-box { #sidebar-box {
transition: min-width var(--uc-autohide-sidebar-speed) var(--animation-easing-function) transition: min-width var(--uc-autohide-sidebar-speed) var(--animation-easing-function)
var(--uc-autohide-sidebar-delay) !important; var(--uc-autohide-sidebar-delay),
max-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) {
transition-delay: 0ms !important; transition-delay: 0ms !important;

9
css/leptonContent.css
View file

@ -442,6 +442,15 @@
fill: var(--newtab-icon-secondary-color) !important; 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;
}
}
} }
/** Error Page - Restore illustrations ****************************************/ /** Error Page - Restore illustrations ****************************************/
@supports -moz-bool-pref("userContent.page.illustration") { @supports -moz-bool-pref("userContent.page.illustration") {

33
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. 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 ```ebnf
<pref-file> = <pref>* <pref-file> = <pref>*;
<pref> = <pref-spec> "(" <pref-name> "," <pref-value> <pref-attrs> ")" ";" <pref> = <pref-spec> "(" <pref-name> "," <pref-value> <pref-attrs> ")" ";";
<pref-spec> = "user_pref" | "pref" | "sticky_pref" // in default pref files <pref-spec> = "user_pref" | "pref" | "sticky_pref"; (* in default pref files *)
<pref-spec> = "user_pref" // in user pref files <pref-spec> = "user_pref"; (* in user pref files *)
<pref-name> = <string-literal> <pref-name> = <string-literal>;
<pref-value> = <string-literal> | "true" | "false" | <int-value> <pref-value> = <string-literal> | "true" | "false" | <int-value>;
<int-value> = <sign>? <int-literal> <int-value> = <sign>? <int-literal>;
<sign> = "+" | "-" <sign> = "+" | "-";
<int-literal> = [0-9]+ (and cannot be followed by [A-Za-z_]) <int-literal> = [0-9]+ (and cannot be followed by [A-Za-z_]);
<string-literal> = <string-literal> = ?
A single or double-quoted string, with the following escape sequences A single or double-quoted string, with the following escape sequences
allowed: \", \', \\, \n, \r, \xNN, \uNNNN, where \xNN gives a raw byte allowed: "\"", "\'" "\\", "\n", "\r", "\xNN", "\uNNNN", where "\xNN" gives a raw byte
value that is copied directly into an 8-bit string value, and \uNNNN 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 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. would cause C++ code handling such strings to misbehave.
<pref-attrs> = ("," <pref-attr>)* // in default pref files ?;
= <empty> // in user pref files <pref-attrs> = ("," <pref-attr>)* (* in default pref files *)
<pref-attr> = "sticky" | "locked" // default pref files only = <empty>; (* in user pref files *)
<pref-attr> = "sticky" | "locked"; (* default pref files only *)
``` ```
## Default Config ## Default Config

4
docs/Restrictions.md
View file

@ -76,6 +76,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). 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) 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 ### RTL

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

@ -6,20 +6,28 @@
will-change: min-width, max-width; will-change: min-width, max-width;
} }
#sidebar-box:is(:hover, :focus-within) > { #sidebar-box:is(:hover, :focus-within) {
--uc-sidebar-shadow-width: calc(var(--uc-sidebar-activate-width) - var(--uc-sidebar-width));
> {
#sidebar-header, #sidebar-header,
#sidebar { #sidebar {
min-width: var(--uc-sidebar-activate-width) !important; min-width: var(--uc-sidebar-activate-width) !important;
max-width: var(--uc-sidebar-activate-width) !important; max-width: var(--uc-sidebar-activate-width) !important;
} }
} }
}
:root[inFullscreen="true"] #sidebar-box { :root[inFullscreen="true"] #sidebar-box {
--uc-sidebar-shadow-width: var(--uc-sidebar-fullscreen-width);
margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important;
padding-inline-start: var(--uc-sidebar-fullscreen-width); 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) { &:is(:hover, :focus-within) {
--uc-sidebar-shadow-width: var(--uc-sidebar-activate-width);
padding-inline-start: var(--uc-sidebar-activate-width); padding-inline-start: var(--uc-sidebar-activate-width);
} }
@ -38,15 +46,22 @@
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) !important;
} }
#sidebar-box:is(:hover, :focus-within) > { #sidebar-box:is(:hover, :focus-within) {
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-header,
#sidebar { #sidebar {
transition-delay: 0ms !important; transition-delay: 0ms !important;
} }
} }
}
:root[inFullscreen="true"] #sidebar-box { :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) {
transition-delay: 0ms !important; transition-delay: 0ms !important;

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

@ -32,7 +32,8 @@
@include Animate { @include Animate {
#sidebar-box { #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) {
transition-delay: 0ms !important; transition-delay: 0ms !important;

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

@ -6,10 +6,10 @@
} }
.tab-label, .tab-label,
.tab-secondary-label { .tab-secondary-label {
overflow: hidden; overflow: clip;
} }
.tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]), .tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]),
.tabbrowser-tab:not(:hover,[pinned]) .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
} }

10
src/contents/_activity_stream.scss
View file

@ -193,4 +193,14 @@
} }
} }
} }
/** 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;
}
}
} }

12
src/sidebar/_overlap.scss
View file

@ -9,6 +9,11 @@
--uc-sidebar-activate-width: 18rem; --uc-sidebar-activate-width: 18rem;
--uc-sidebar-activate-width-reverse: calc(-1 * var(--uc-sidebar-activate-width)); --uc-sidebar-activate-width-reverse: calc(-1 * var(--uc-sidebar-activate-width));
--uc-sidebar-fullscreen-width: 4px; --uc-sidebar-fullscreen-width: 4px;
--uc-sidebar-shadow-size: 1px;
--uc-sidebar-shadow-width: 0px;
--uc-sidebar-shadow-position: var(--uc-sidebar-shadow-position-default);
--uc-sidebar-shadow-position-default: calc(var(--uc-sidebar-shadow-size) + var(--uc-sidebar-shadow-width));
--uc-sidebar-shadow-color: #28282F;
--uc-autohide-sidebar-speed: 750ms; --uc-autohide-sidebar-speed: 750ms;
--uc-autohide-fullscreen-sidebar-speed: 1s; --uc-autohide-fullscreen-sidebar-speed: 1s;
@ -27,9 +32,9 @@
z-index: 1 !important; z-index: 1 !important;
position: relative !important; position: relative !important;
box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color); box-shadow: var(--uc-sidebar-shadow-position) 0px 15px -10px var(--uc-sidebar-shadow-color);
&[positionend="true"] { &[positionend="true"] {
box-shadow: -1px 0px 15px -10px var(--uc-sidebar-shadow-color); --uc-sidebar-shadow-position: calc(-1 * var(--uc-sidebar-shadow-position-default));
} }
} }
@ -70,13 +75,14 @@
margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important;
will-change: padding-inline; will-change: padding-inline;
--uc-sidebar-shadow-width: var(--uc-sidebar-activate-width);
&:not([hidden="true"]) { &:not([hidden="true"]) {
padding-inline-start: var(--uc-sidebar-activate-width) !important; padding-inline-start: var(--uc-sidebar-activate-width) !important;
} }
@include Animate { @include Animate {
transition: padding-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, transition: padding-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out,
visibility 0s linear !important; box-shadow 0s linear, visibility 0s linear !important;
} }
} }
} }

5
src/tab/_connect_to_window.scss
View file

@ -25,4 +25,9 @@
/* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */
#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
z-index: 0 !important; z-index: 0 !important;
.tab-stack {
/* Temporary solution for compatibility #513 */
overflow-y: clip;
}
} }

1
src/tab/unselected_tab/_dynamic_separator.scss
View file

@ -85,7 +85,6 @@
} }
} }
@include NotOption("userChrome.tab.newtab_button_like_tab") { @include NotOption("userChrome.tab.newtab_button_like_tab") {
#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-stack::before,
#tabbrowser-arrowscrollbox:not([overflowing]) #tabbrowser-arrowscrollbox:not([overflowing])
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab]
.tab-stack::after { .tab-stack::after {

12
src/tab/unselected_tab/_static_separator.scss
View file

@ -1,3 +1,7 @@
#TabsToolbar {
--toolbarseparator-color: color-mix(in srgb, currentColor 30%, transparent);
}
.tabbrowser-tab[first-visible-tab="true"] .tab-stack::before, .tabbrowser-tab[first-visible-tab="true"] .tab-stack::before,
.tab-stack::after { .tab-stack::after {
content: ""; content: "";
@ -11,15 +15,14 @@
/* Position */ /* Position */
top: 50%; top: 50%;
transform: translateY(-50%) !important; transform: translateY(-50%);
/* Bar shape */ /* Bar shape */
width: 0px; width: 0px;
height: 100%; height: 100%;
/* Bar Color */ /* Bar Color */
opacity: 0.3; border-right: 1px solid var(--toolbarseparator-color);
border-right: 1px solid var(--lwt-background-tab-separator-color, currentColor) !important;
} }
.tab-stack::after { .tab-stack::after {
right: 0; right: 0;
@ -29,8 +32,7 @@
.tabbrowser-tab[visuallyselected] .tab-stack::after, .tabbrowser-tab[visuallyselected] .tab-stack::after,
.tabbrowser-tab[beforeselected-visible] .tab-stack::after { .tabbrowser-tab[beforeselected-visible] .tab-stack::after {
@include Option("userChrome.tab.static_separator.selected_accent") { @include Option("userChrome.tab.static_separator.selected_accent") {
--lwt-background-tab-separator-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255))); --toolbarseparator-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255)));
opacity: 1;
} }
@include NotOption("userChrome.tab.static_separator.selected_accent") { @include NotOption("userChrome.tab.static_separator.selected_accent") {
opacity: 0; opacity: 0;

6
src/theme/_fully_color.scss
View file

@ -29,8 +29,10 @@ html#main-window menupopup:not(.in-menulist) {
--panel-background: var(--menu-background-color) !important; --panel-background: var(--menu-background-color) !important;
--panel-border-color: var(--menu-border-color) !important; --panel-border-color: var(--menu-border-color) !important;
menuseparator { &:not([placespopup]) menuseparator,
border-top: 1px solid var(--menu-border-color); &[placespopup] menuseparator::before {
// toolbarbutton menupopup[placespopup] menuseparator::before
border-top: 1px solid var(--menu-border-color) !important;
} }
menu, menu,

4
user.js
View file

@ -196,6 +196,8 @@ user_pref("userChrome.rounding.square_tab", false);
// -- User Content ------------------------------------------------------------- // -- User Content -------------------------------------------------------------
// user_pref("userContent.player.ui.twoline", true); // user_pref("userContent.player.ui.twoline", true);
// user_pref("userContent.newTab.hidden_logo", true);
// user_pref("userContent.page.proton_color.dark_blue_accent", true); // user_pref("userContent.page.proton_color.dark_blue_accent", true);
// user_pref("userContent.page.proton_color.system_accent", true); // user_pref("userContent.page.proton_color.system_accent", true);
// user_pref("userContent.page.monospace", true); // user_pref("userContent.page.monospace", true);
@ -258,12 +260,12 @@ user_pref("userContent.player.size", true);
user_pref("userContent.player.click_to_play", true); user_pref("userContent.player.click_to_play", true);
user_pref("userContent.player.animate", true); user_pref("userContent.player.animate", true);
user_pref("userContent.newTab.field_border", true);
user_pref("userContent.newTab.full_icon", true); user_pref("userContent.newTab.full_icon", true);
user_pref("userContent.newTab.animate", true); user_pref("userContent.newTab.animate", true);
user_pref("userContent.newTab.pocket_to_last", true); user_pref("userContent.newTab.pocket_to_last", true);
user_pref("userContent.newTab.searchbar", true); user_pref("userContent.newTab.searchbar", true);
user_pref("userContent.page.field_border", true);
user_pref("userContent.page.illustration", true); user_pref("userContent.page.illustration", true);
user_pref("userContent.page.proton_color", true); user_pref("userContent.page.proton_color", true);
user_pref("userContent.page.dark_mode", true); // Need proton_color user_pref("userContent.page.dark_mode", true); // Need proton_color