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

Fix: Sidebar - Right side overlap #1052

Browse source
This commit is contained in:
alstjr7375 2024-12-29 05:44:00 +09:00
parent 7d96af3abe
commit f5287014e2
6 changed files with 46 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

48
css/leptonChrome.css generated
View file

@ -8860,7 +8860,7 @@
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
} }
:root:has(#sidebar-box[positionend="true"]) #nav-bar { :root:has(#sidebar-box[positionend]) #nav-bar {
right: 0; right: 0;
} }
} }
@ -8923,7 +8923,7 @@
position: absolute; position: absolute;
height: 100%; height: 100%;
} }
:root[customizing="true"] #browser[collapsed="true"] #sidebar-box[positionend="true"] { :root[customizing="true"] #browser[collapsed="true"] #sidebar-box[positionend] {
right: 0; right: 0;
} }
:root[customizing="true"] #customization-container { :root[customizing="true"] #customization-container {
@ -8936,10 +8936,10 @@
--uc-customization-conatiner-margin: calc(var(--uc-navbar-height-default) - var(--uc-tabbar-height-default)); --uc-customization-conatiner-margin: calc(var(--uc-navbar-height-default) - var(--uc-tabbar-height-default));
} }
} }
:root[customizing="true"]:has(#sidebar-box:not([positionend="true"])) #customization-container { :root[customizing="true"]:has(#sidebar-box:not([positionend])) #customization-container {
margin-inline-start: var(--uc-sidebar-activate-width); margin-inline-start: var(--uc-sidebar-activate-width);
} }
:root[customizing="true"]:has(#sidebar-box[positionend="true"]) #customization-container { :root[customizing="true"]:has(#sidebar-box[positionend]) #customization-container {
margin-inline-end: var(--uc-sidebar-activate-width); margin-inline-end: var(--uc-sidebar-activate-width);
} }
:root[customizing="true"] #customization-palette-container, :root[customizing="true"] #customization-palette-container,
@ -9255,7 +9255,7 @@
position: relative !important; position: relative !important;
box-shadow: var(--uc-sidebar-shadow-position) 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] {
--uc-sidebar-shadow-position: calc(-1 * var(--uc-sidebar-shadow-position-default)); --uc-sidebar-shadow-position: calc(-1 * var(--uc-sidebar-shadow-position-default));
} }
#sidebar { #sidebar {
@ -9266,7 +9266,7 @@
} }
} }
@supports -moz-bool-pref("userChrome.sidebar.overlap") { @supports -moz-bool-pref("userChrome.sidebar.overlap") {
#sidebar-box[positionend="true"] { #sidebar-box[positionend] {
direction: rtl; direction: rtl;
} }
#sidebar-header, #sidebar-header,
@ -10825,18 +10825,18 @@
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:not([positionend="true"]) { :root[inFullscreen="true"] #sidebar-box:not([positionend]) {
margin-inline-start: var(--uc-sidebar-fullscreen-margin) !important; margin-inline-start: var(--uc-sidebar-fullscreen-margin) !important;
will-change: margin-inline-start; will-change: margin-inline-start;
} }
:root[inFullscreen="true"] #sidebar-box:not([positionend="true"]):is(:hover, :focus-within) { :root[inFullscreen="true"] #sidebar-box:not([positionend]):is(:hover, :focus-within) {
margin-inline-start: 0 !important; margin-inline-start: 0 !important;
} }
:root[inFullscreen="true"] #sidebar-box[positionend="true"] { :root[inFullscreen="true"] #sidebar-box[positionend] {
margin-inline-end: var(--uc-sidebar-fullscreen-margin) !important; margin-inline-end: var(--uc-sidebar-fullscreen-margin) !important;
will-change: margin-inline-end; will-change: margin-inline-end;
} }
:root[inFullscreen="true"] #sidebar-box[positionend="true"]:is(:hover, :focus-within) { :root[inFullscreen="true"] #sidebar-box[positionend]:is(:hover, :focus-within) {
margin-inline-end: 0 !important; margin-inline-end: 0 !important;
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
@ -10853,7 +10853,7 @@
transition: margin-inline-start var(--uc-autohide-fullscreen-sidebar-speed) var(--animation-easing-function) transition: margin-inline-start var(--uc-autohide-fullscreen-sidebar-speed) var(--animation-easing-function)
var(--uc-autohide-sidebar-delay) !important; var(--uc-autohide-sidebar-delay) !important;
} }
:root[inFullscreen="true"] #sidebar-box[positionend="true"] { :root[inFullscreen="true"] #sidebar-box[positionend] {
transition-property: margin-inline-end !important; transition-property: margin-inline-end !important;
} }
:root[inFullscreen="true"] #sidebar-box:is(:hover, :focus-within), :root[inFullscreen="true"] #sidebar-box:is(:hover, :focus-within),
@ -11087,7 +11087,7 @@
} }
} }
@supports selector(:has(a)) { @supports selector(:has(a)) {
:root:has(#sidebar-box[positionend="true"]) { :root:has(#sidebar-box[positionend]) {
--uc-sidebar-icon: url("chrome://browser/skin/sidebars-right.svg"); --uc-sidebar-icon: url("chrome://browser/skin/sidebars-right.svg");
--uc-sidebar-icon-reverse: url("chrome://browser/skin/sidebars.svg"); --uc-sidebar-icon-reverse: url("chrome://browser/skin/sidebars.svg");
} }
@ -23696,7 +23696,7 @@
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
} }
:root:has(#sidebar-box[positionend="true"]) #nav-bar { :root:has(#sidebar-box[positionend]) #nav-bar {
right: 0; right: 0;
} }
} }
@ -23762,7 +23762,7 @@
position: absolute; position: absolute;
height: 100%; height: 100%;
} }
:root[customizing="true"] #browser[collapsed="true"] #sidebar-box[positionend="true"] { :root[customizing="true"] #browser[collapsed="true"] #sidebar-box[positionend] {
right: 0; right: 0;
} }
:root[customizing="true"] #customization-container { :root[customizing="true"] #customization-container {
@ -23777,12 +23777,12 @@
} }
} }
@media (-moz-bool-pref: "userChrome.navbar.as_sidebar") { @media (-moz-bool-pref: "userChrome.navbar.as_sidebar") {
:root[customizing="true"]:has(#sidebar-box:not([positionend="true"])) #customization-container { :root[customizing="true"]:has(#sidebar-box:not([positionend])) #customization-container {
margin-inline-start: var(--uc-sidebar-activate-width); margin-inline-start: var(--uc-sidebar-activate-width);
} }
} }
@media (-moz-bool-pref: "userChrome.navbar.as_sidebar") { @media (-moz-bool-pref: "userChrome.navbar.as_sidebar") {
:root[customizing="true"]:has(#sidebar-box[positionend="true"]) #customization-container { :root[customizing="true"]:has(#sidebar-box[positionend]) #customization-container {
margin-inline-end: var(--uc-sidebar-activate-width); margin-inline-end: var(--uc-sidebar-activate-width);
} }
} }
@ -24120,7 +24120,7 @@
position: relative !important; position: relative !important;
box-shadow: var(--uc-sidebar-shadow-position) 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] {
--uc-sidebar-shadow-position: calc(-1 * var(--uc-sidebar-shadow-position-default)); --uc-sidebar-shadow-position: calc(-1 * var(--uc-sidebar-shadow-position-default));
} }
#sidebar { #sidebar {
@ -24131,7 +24131,7 @@
} }
} }
@media (-moz-bool-pref: "userChrome.sidebar.overlap") { @media (-moz-bool-pref: "userChrome.sidebar.overlap") {
#sidebar-box[positionend="true"] { #sidebar-box[positionend] {
direction: rtl; direction: rtl;
} }
#sidebar-header, #sidebar-header,
@ -25966,18 +25966,18 @@
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:not([positionend="true"]) { :root[inFullscreen="true"] #sidebar-box:not([positionend]) {
margin-inline-start: var(--uc-sidebar-fullscreen-margin) !important; margin-inline-start: var(--uc-sidebar-fullscreen-margin) !important;
will-change: margin-inline-start; will-change: margin-inline-start;
} }
:root[inFullscreen="true"] #sidebar-box:not([positionend="true"]):is(:hover, :focus-within) { :root[inFullscreen="true"] #sidebar-box:not([positionend]):is(:hover, :focus-within) {
margin-inline-start: 0 !important; margin-inline-start: 0 !important;
} }
:root[inFullscreen="true"] #sidebar-box[positionend="true"] { :root[inFullscreen="true"] #sidebar-box[positionend] {
margin-inline-end: var(--uc-sidebar-fullscreen-margin) !important; margin-inline-end: var(--uc-sidebar-fullscreen-margin) !important;
will-change: margin-inline-end; will-change: margin-inline-end;
} }
:root[inFullscreen="true"] #sidebar-box[positionend="true"]:is(:hover, :focus-within) { :root[inFullscreen="true"] #sidebar-box[positionend]:is(:hover, :focus-within) {
margin-inline-end: 0 !important; margin-inline-end: 0 !important;
} }
} }
@ -25995,7 +25995,7 @@
transition: margin-inline-start var(--uc-autohide-fullscreen-sidebar-speed) var(--animation-easing-function) transition: margin-inline-start var(--uc-autohide-fullscreen-sidebar-speed) var(--animation-easing-function)
var(--uc-autohide-sidebar-delay) !important; var(--uc-autohide-sidebar-delay) !important;
} }
:root[inFullscreen="true"] #sidebar-box[positionend="true"] { :root[inFullscreen="true"] #sidebar-box[positionend] {
transition-property: margin-inline-end !important; transition-property: margin-inline-end !important;
} }
:root[inFullscreen="true"] #sidebar-box:is(:hover, :focus-within), :root[inFullscreen="true"] #sidebar-box:is(:hover, :focus-within),
@ -26216,7 +26216,7 @@
} }
@media not (-moz-bool-pref: "userChrome.icon.disabled") { @media not (-moz-bool-pref: "userChrome.icon.disabled") {
@supports selector(:has(a)) { @supports selector(:has(a)) {
:root:has(#sidebar-box[positionend="true"]) { :root:has(#sidebar-box[positionend]) {
--uc-sidebar-icon: url("chrome://browser/skin/sidebars-right.svg"); --uc-sidebar-icon: url("chrome://browser/skin/sidebars-right.svg");
--uc-sidebar-icon-reverse: url("chrome://browser/skin/sidebars.svg"); --uc-sidebar-icon-reverse: url("chrome://browser/skin/sidebars.svg");
} }

24
css/leptonChromeESR.css generated
View file

@ -9290,7 +9290,7 @@
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
} }
:root:has(#sidebar-box[positionend="true"]) #nav-bar { :root:has(#sidebar-box[positionend]) #nav-bar {
right: 0; right: 0;
} }
} }
@ -9353,7 +9353,7 @@
position: absolute; position: absolute;
height: 100%; height: 100%;
} }
:root[customizing="true"] #browser[collapsed="true"] #sidebar-box[positionend="true"] { :root[customizing="true"] #browser[collapsed="true"] #sidebar-box[positionend] {
right: 0; right: 0;
} }
:root[customizing="true"] #customization-container { :root[customizing="true"] #customization-container {
@ -9366,10 +9366,10 @@
--uc-customization-conatiner-margin: calc(var(--uc-navbar-height-default) - var(--uc-tabbar-height-default)); --uc-customization-conatiner-margin: calc(var(--uc-navbar-height-default) - var(--uc-tabbar-height-default));
} }
} }
:root[customizing="true"]:has(#sidebar-box:not([positionend="true"])) #customization-container { :root[customizing="true"]:has(#sidebar-box:not([positionend])) #customization-container {
margin-inline-start: var(--uc-sidebar-activate-width); margin-inline-start: var(--uc-sidebar-activate-width);
} }
:root[customizing="true"]:has(#sidebar-box[positionend="true"]) #customization-container { :root[customizing="true"]:has(#sidebar-box[positionend]) #customization-container {
margin-inline-end: var(--uc-sidebar-activate-width); margin-inline-end: var(--uc-sidebar-activate-width);
} }
:root[customizing="true"] #customization-palette-container, :root[customizing="true"] #customization-palette-container,
@ -9685,7 +9685,7 @@
position: relative !important; position: relative !important;
box-shadow: var(--uc-sidebar-shadow-position) 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] {
--uc-sidebar-shadow-position: calc(-1 * var(--uc-sidebar-shadow-position-default)); --uc-sidebar-shadow-position: calc(-1 * var(--uc-sidebar-shadow-position-default));
} }
#sidebar { #sidebar {
@ -9696,7 +9696,7 @@
} }
} }
@supports -moz-bool-pref("userChrome.sidebar.overlap") { @supports -moz-bool-pref("userChrome.sidebar.overlap") {
#sidebar-box[positionend="true"] { #sidebar-box[positionend] {
direction: rtl; direction: rtl;
} }
#sidebar-header, #sidebar-header,
@ -11263,18 +11263,18 @@
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:not([positionend="true"]) { :root[inFullscreen="true"] #sidebar-box:not([positionend]) {
margin-inline-start: var(--uc-sidebar-fullscreen-margin) !important; margin-inline-start: var(--uc-sidebar-fullscreen-margin) !important;
will-change: margin-inline-start; will-change: margin-inline-start;
} }
:root[inFullscreen="true"] #sidebar-box:not([positionend="true"]):is(:hover, :focus-within) { :root[inFullscreen="true"] #sidebar-box:not([positionend]):is(:hover, :focus-within) {
margin-inline-start: 0 !important; margin-inline-start: 0 !important;
} }
:root[inFullscreen="true"] #sidebar-box[positionend="true"] { :root[inFullscreen="true"] #sidebar-box[positionend] {
margin-inline-end: var(--uc-sidebar-fullscreen-margin) !important; margin-inline-end: var(--uc-sidebar-fullscreen-margin) !important;
will-change: margin-inline-end; will-change: margin-inline-end;
} }
:root[inFullscreen="true"] #sidebar-box[positionend="true"]:is(:hover, :focus-within) { :root[inFullscreen="true"] #sidebar-box[positionend]:is(:hover, :focus-within) {
margin-inline-end: 0 !important; margin-inline-end: 0 !important;
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
@ -11291,7 +11291,7 @@
transition: margin-inline-start var(--uc-autohide-fullscreen-sidebar-speed) var(--animation-easing-function) transition: margin-inline-start var(--uc-autohide-fullscreen-sidebar-speed) var(--animation-easing-function)
var(--uc-autohide-sidebar-delay) !important; var(--uc-autohide-sidebar-delay) !important;
} }
:root[inFullscreen="true"] #sidebar-box[positionend="true"] { :root[inFullscreen="true"] #sidebar-box[positionend] {
transition-property: margin-inline-end !important; transition-property: margin-inline-end !important;
} }
:root[inFullscreen="true"] #sidebar-box:is(:hover, :focus-within), :root[inFullscreen="true"] #sidebar-box:is(:hover, :focus-within),
@ -11525,7 +11525,7 @@
} }
} }
@supports selector(:has(a)) { @supports selector(:has(a)) {
:root:has(#sidebar-box[positionend="true"]) { :root:has(#sidebar-box[positionend]) {
--uc-sidebar-icon: url("chrome://browser/skin/sidebars-right.svg"); --uc-sidebar-icon: url("chrome://browser/skin/sidebars-right.svg");
--uc-sidebar-icon-reverse: url("chrome://browser/skin/sidebars.svg"); --uc-sidebar-icon-reverse: url("chrome://browser/skin/sidebars.svg");
} }

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

@ -11,7 +11,7 @@
} }
:root[inFullscreen="true"] #sidebar-box { :root[inFullscreen="true"] #sidebar-box {
&:not([positionend="true"]) { &:not([positionend]) {
margin-inline-start: var(--uc-sidebar-fullscreen-margin) !important; margin-inline-start: var(--uc-sidebar-fullscreen-margin) !important;
will-change: margin-inline-start; will-change: margin-inline-start;
@ -20,7 +20,7 @@
} }
} }
&[positionend="true"] { &[positionend] {
margin-inline-end: var(--uc-sidebar-fullscreen-margin) !important; margin-inline-end: var(--uc-sidebar-fullscreen-margin) !important;
will-change: margin-inline-end; will-change: margin-inline-end;
@ -45,7 +45,7 @@
:root[inFullscreen="true"] #sidebar-box { :root[inFullscreen="true"] #sidebar-box {
transition: margin-inline-start var(--uc-autohide-fullscreen-sidebar-speed) var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; transition: margin-inline-start var(--uc-autohide-fullscreen-sidebar-speed) var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important;
&[positionend="true"] { &[positionend] {
transition-property: margin-inline-end !important; transition-property: margin-inline-end !important;
} }
&:is(:hover, :focus-within), &:is(:hover, :focus-within),

2
src/icons/_index.scss
View file

@ -28,7 +28,7 @@
--uc-sidebar-icon: url("chrome://browser/skin/sidebars.svg"); --uc-sidebar-icon: url("chrome://browser/skin/sidebars.svg");
--uc-sidebar-icon-reverse: url("chrome://browser/skin/sidebars-right.svg"); --uc-sidebar-icon-reverse: url("chrome://browser/skin/sidebars-right.svg");
@include Has { @include Has {
&:has(#sidebar-box[positionend="true"]) { &:has(#sidebar-box[positionend]) {
--uc-sidebar-icon: url("chrome://browser/skin/sidebars-right.svg"); --uc-sidebar-icon: url("chrome://browser/skin/sidebars-right.svg");
--uc-sidebar-icon-reverse: url("chrome://browser/skin/sidebars.svg"); --uc-sidebar-icon-reverse: url("chrome://browser/skin/sidebars.svg");
} }

8
src/navbar/_as_sidebar.scss
View file

@ -41,7 +41,7 @@
opacity: 0; opacity: 0;
visibility: hidden; // If use `collapse`, inline `--urlbar-toolbar-height` variable is calculated strangely small. visibility: hidden; // If use `collapse`, inline `--urlbar-toolbar-height` variable is calculated strangely small.
} }
:root:has(#sidebar-box[positionend="true"]) #nav-bar { :root:has(#sidebar-box[positionend]) #nav-bar {
right: 0; right: 0;
} }
} }
@ -109,7 +109,7 @@
position: absolute; position: absolute;
height: 100%; height: 100%;
&[positionend="true"] { &[positionend] {
right: 0; right: 0;
} }
} }
@ -125,10 +125,10 @@
height: calc(100% - var(--uc-customization-conatiner-margin)); height: calc(100% - var(--uc-customization-conatiner-margin));
} }
&:has(#sidebar-box:not([positionend="true"])) #customization-container { &:has(#sidebar-box:not([positionend])) #customization-container {
margin-inline-start: var(--uc-sidebar-activate-width); margin-inline-start: var(--uc-sidebar-activate-width);
} }
&:has(#sidebar-box[positionend="true"]) #customization-container { &:has(#sidebar-box[positionend]) #customization-container {
margin-inline-end: var(--uc-sidebar-activate-width); margin-inline-end: var(--uc-sidebar-activate-width);
} }

4
src/sidebar/_overlap.scss
View file

@ -37,7 +37,7 @@
position: relative !important; position: relative !important;
box-shadow: var(--uc-sidebar-shadow-position) 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] {
--uc-sidebar-shadow-position: calc(-1 * var(--uc-sidebar-shadow-position-default)); --uc-sidebar-shadow-position: calc(-1 * var(--uc-sidebar-shadow-position-default));
} }
} }
@ -53,7 +53,7 @@
} }
@include Option("userChrome.sidebar.overlap") { @include Option("userChrome.sidebar.overlap") {
#sidebar-box[positionend="true"] { #sidebar-box[positionend] {
direction: rtl; direction: rtl;
} }