mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2025-12-29 21:51:23 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix: Sidebar - Works with right sidebar(positionend)

Browse source
This commit is contained in:
alstjr7375 2022-07-20 00:20:04 +09:00
parent 08b8d3d6b2
commit beaa169c20
4 changed files with 88 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

49
css/leptonChrome.css
View file

@ -5343,6 +5343,7 @@
*/
--uc-sidebar-width: 40px;
--uc-sidebar-activate-width: 18em;
--uc-sidebar-activate-width-reverse: calc(-1 * var(--uc-sidebar-activate-width));
--uc-sidebar-fullscreen-width: 4px;
--uc-sidebar-shadow-color: #28282f;
--uc-autohide-sidebar-delay: 600ms;
@ -5351,22 +5352,32 @@
position: relative !important;
box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color);
}
#sidebar-box[positionend="true"] {
box-shadow: -1px 0px 15px -10px var(--uc-sidebar-shadow-color);
}
#sidebar-splitter {
display: none !important;
}
}
@supports -moz-bool-pref("userChrome.sidebar.overlap") {
#sidebar-box[positionend="true"] {
direction: rtl;
}
@supports not -moz-bool-pref("userChrome.autohide.sidebar") {
#sidebar-box {
min-width: var(--uc-sidebar-activate-width) !important;
max-width: var(--uc-sidebar-activate-width) !important;
margin-inline-start: calc(-1 * var(--uc-sidebar-activate-width)) !important;
margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important;
will-change: transform;
}
#sidebar-box:not([hidden="true"]) {
transform: translateX(var(--uc-sidebar-activate-width));
}
#sidebar-box[positionend="true"]:not([hidden="true"]) {
transform: translateX(var(--uc-sidebar-activate-width-reverse));
}
@media (prefers-reduced-motion: no-preference) {
#sidebar-box {
transition: transform 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, visibility 0s linear !important;
@ -5669,13 +5680,24 @@
}
:root[inFullscreen="true"] #sidebar-box {
margin-inline-start: calc(-1 * var(--uc-sidebar-activate-width)) !important;
transform: translateX(var(--uc-sidebar-fullscreen-width)) !important;
will-change: transform;
}
:root[inFullscreen="true"] #sidebar-box:hover {
:root[inFullscreen="true"] #sidebar-box:not([positionend="true"]) {
margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important;
transform: translateX(var(--uc-sidebar-fullscreen-width)) !important;
}
:root[inFullscreen="true"] #sidebar-box:not([positionend="true"]):hover {
transform: translateX(var(--uc-sidebar-activate-width)) !important;
}
:root[inFullscreen="true"] #sidebar-box[positionend="true"] {
margin-inline-end: var(--uc-sidebar-activate-width-reverse) !important;
transform: translateX(
calc(var(--uc-sidebar-activate-width) + -1 * var(--uc-sidebar-fullscreen-width))
) !important;
}
:root[inFullscreen="true"] #sidebar-box[positionend="true"]:hover {
transform: translateX(0) !important;
}
:root[inFullscreen="true"] #sidebar-box #sidebar-header,
:root[inFullscreen="true"] #sidebar-box #sidebar {
min-width: calc(var(--uc-sidebar-activate-width)) !important;
@ -5702,6 +5724,9 @@
}
@supports not -moz-bool-pref("userChrome.sidebar.overlap") {
#sidebar-box {
--uc-sidebar-fullscreen-margin: calc(
var(--uc-sidebar-fullscreen-width) + var(--uc-sidebar-activate-width-reverse)
);
overflow: hidden;
will-change: min-width, max-width;
}
@ -5710,13 +5735,20 @@
max-width: var(--uc-sidebar-activate-width) !important;
}
:root[inFullscreen="true"] #sidebar-box {
margin-inline-start: calc(var(--uc-sidebar-fullscreen-width) + -1 * var(--uc-sidebar-activate-width)) !important;
:root[inFullscreen="true"] #sidebar-box:not([positionend="true"]) {
margin-inline-start: var(--uc-sidebar-fullscreen-margin) !important;
will-change: margin-inline-start;
}
:root[inFullscreen="true"] #sidebar-box:hover {
:root[inFullscreen="true"] #sidebar-box:not([positionend="true"]):hover {
margin-inline-start: 0 !important;
}
:root[inFullscreen="true"] #sidebar-box[positionend="true"] {
margin-inline-end: var(--uc-sidebar-fullscreen-margin) !important;
will-change: margin-inline-end;
}
:root[inFullscreen="true"] #sidebar-box[positionend="true"]:hover {
margin-inline-end: 0 !important;
}
@media (prefers-reduced-motion: no-preference) {
#sidebar-box {
@ -5729,6 +5761,9 @@
:root[inFullscreen="true"] #sidebar-box {
transition: margin-inline-start 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
}
:root[inFullscreen="true"] #sidebar-box[positionend="true"] {
transition-property: margin-inline-end !important;
}
:root[inFullscreen="true"] #sidebar-box:hover {
transition-delay: 0ms !important;
}

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

@ -17,13 +17,23 @@
}
:root[inFullscreen="true"] #sidebar-box {
margin-inline-start: calc(-1 * var(--uc-sidebar-activate-width)) !important;
transform: translateX(var(--uc-sidebar-fullscreen-width)) !important;
will-change: transform;
&:hover {
transform: translateX(var(--uc-sidebar-activate-width)) !important;
&:not([positionend="true"]) {
margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important;
transform: translateX(var(--uc-sidebar-fullscreen-width)) !important;
&:hover {
transform: translateX(var(--uc-sidebar-activate-width)) !important;
}
}
&[positionend="true"] {
margin-inline-end: var(--uc-sidebar-activate-width-reverse) !important;
transform: translateX(calc(var(--uc-sidebar-activate-width) + (-1 * var(--uc-sidebar-fullscreen-width)))) !important;
&:hover {
transform: translateX(0) !important;
}
}
#sidebar-header,

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

@ -1,8 +1,8 @@
#sidebar-box {
--uc-sidebar-fullscreen-margin: calc(var(--uc-sidebar-fullscreen-width) + var(--uc-sidebar-activate-width-reverse));
overflow: hidden;
will-change: min-width, max-width;
&:hover {
min-width: var(--uc-sidebar-activate-width) !important;
max-width: var(--uc-sidebar-activate-width) !important;
@ -10,11 +10,22 @@
}
:root[inFullscreen="true"] #sidebar-box {
margin-inline-start: calc(var(--uc-sidebar-fullscreen-width) + (-1 * var(--uc-sidebar-activate-width))) !important;
will-change: margin-inline-start;
&:not([positionend="true"]) {
margin-inline-start: var(--uc-sidebar-fullscreen-margin) !important;
will-change: margin-inline-start;
&:hover {
margin-inline-start: 0 !important;
&:hover {
margin-inline-start: 0 !important;
}
}
&[positionend="true"] {
margin-inline-end: var(--uc-sidebar-fullscreen-margin) !important;
will-change: margin-inline-end;
&:hover {
margin-inline-end: 0 !important;
}
}
}
@ -31,6 +42,9 @@
:root[inFullscreen="true"] #sidebar-box {
transition: margin-inline-start 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
&[positionend="true"] {
transition-property: margin-inline-end !important;
}
&:hover {
transition-delay: 0ms !important;
}

13
src/sidebar/_overlap.scss
View file

@ -8,6 +8,7 @@
--uc-sidebar-width: 40px;
--uc-sidebar-activate-width: 18em;
--uc-sidebar-activate-width-reverse: calc(-1 * var(--uc-sidebar-activate-width));
--uc-sidebar-fullscreen-width: 4px;
--uc-sidebar-shadow-color: #28282F;
--uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */
@ -16,6 +17,9 @@
position: relative !important;
box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color);
&[positionend="true"] {
box-shadow: -1px 0px 15px -10px var(--uc-sidebar-shadow-color);
}
}
#sidebar-splitter {
@ -24,17 +28,24 @@
}
@include Option("userChrome.sidebar.overlap") {
#sidebar-box[positionend="true"] {
direction: rtl;
}
@include NotOption("userChrome.autohide.sidebar") {
#sidebar-box {
min-width: var(--uc-sidebar-activate-width) !important;
max-width: var(--uc-sidebar-activate-width) !important;
margin-inline-start: calc(-1 * var(--uc-sidebar-activate-width)) !important;
margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important;
will-change: transform;
&:not([hidden="true"]) {
transform: translateX(var(--uc-sidebar-activate-width));
}
&[positionend="true"]:not([hidden="true"]) {
transform: translateX(var(--uc-sidebar-activate-width-reverse));
}
@include Animate {
transition: transform 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out,