mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2026-01-31 04:31:17 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Clean: Sidebar - Separated UI

Browse source
This commit is contained in:
alstjr7375 2022-07-12 13:25:38 +09:00
parent 0a1fe3fe17
commit 0aef856efb
4 changed files with 46 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

81
css/leptonChrome.css
View file

@ -5333,6 +5333,47 @@
--arrowpanel-menuitem-padding-inline: calc(var(--arrowpanel-menuitem-padding-block) + 8px) !important;
}
}
/** Sidebar UI ****************************************************************/
@supports -moz-bool-pref("userChrome.sidebar.overlap") or -moz-bool-pref("userChrome.autohide.sidebar") {
#sidebar-box {
/* Original
min-width: 14em;
width: 18em;
max-width: 36em;
*/
--uc-sidebar-width: 40px;
--uc-sidebar-activate-width: 18em;
--uc-sidebar-fullscreen-width: 4px;
--uc-sidebar-shadow-color: #28282f;
--uc-autohide-sidebar-delay: 600ms;
/* Wait 0.6s before hiding sidebar */
z-index: 1000 !important;
position: relative !important;
box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color);
}
#sidebar-splitter {
display: none !important;
}
}
@supports -moz-bool-pref("userChrome.sidebar.overlap") {
@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;
will-change: transform;
}
#sidebar-box:not([hidden="true"]) {
transform: translateX(var(--uc-sidebar-activate-width));
}
@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;
}
}
}
}
/** Other UI ******************************************************************/
/*= Bookmark Bar - Centered ==================================================*/
@supports -moz-bool-pref("userChrome.bookmarkbar.centered") {
@ -5390,46 +5431,6 @@
}
}
}
@supports -moz-bool-pref("userChrome.sidebar.overlap") or -moz-bool-pref("userChrome.autohide.sidebar") {
#sidebar-box {
/* Original
min-width: 14em;
width: 18em;
max-width: 36em;
*/
--uc-sidebar-width: 40px;
--uc-sidebar-activate-width: 18em;
--uc-sidebar-fullscreen-width: 4px;
--uc-sidebar-shadow-color: #28282f;
--uc-autohide-sidebar-delay: 600ms;
/* Wait 0.6s before hiding sidebar */
z-index: 1000 !important;
position: relative !important;
box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color);
}
#sidebar-splitter {
display: none !important;
}
}
@supports -moz-bool-pref("userChrome.sidebar.overlap") {
@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;
will-change: transform;
}
#sidebar-box:not([hidden="true"]) {
transform: translateX(var(--uc-sidebar-activate-width));
}
@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;
}
}
}
}
@supports -moz-bool-pref("userChrome.autohide.sidebar") {
#sidebar-box {
min-width: var(--uc-sidebar-width) !important;

48
src/autohide/_sidebar.scss
View file

@ -1,48 +1,4 @@
@include Option("userChrome.sidebar.overlap", "userChrome.autohide.sidebar") {
#sidebar-box {
/* Original
min-width: 14em;
width: 18em;
max-width: 36em;
*/
--uc-sidebar-width: 40px;
--uc-sidebar-activate-width: 18em;
--uc-sidebar-fullscreen-width: 4px;
--uc-sidebar-shadow-color: #28282F;
--uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */
z-index: 1000 !important;
position: relative !important;
box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color);
}
#sidebar-splitter {
display: none !important;
}
}
@include Option("userChrome.sidebar.overlap") {
@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;
will-change: transform;
&:not([hidden="true"]) {
transform: translateX(var(--uc-sidebar-activate-width));
}
@include Animate {
transition: transform 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out,
visibility 0s linear !important;
}
}
}
}
// Refer variable `src/sidebar/overlap`
@include Option("userChrome.autohide.sidebar") {
#sidebar-box {
@ -56,7 +12,7 @@
}
@include Option("userChrome.sidebar.overlap") {
@import "sidebar/overlay";
@import "sidebar/overlap";
}
@include NotOption("userChrome.sidebar.overlap") {
@import "sidebar/static";

0
src/autohide/sidebar/_overlay.scss → src/autohide/sidebar/_overlap.scss
View file

3
src/leptonChrome.scss
View file

@ -67,6 +67,9 @@
/** Panel UI ******************************************************************/
@import "panel/index";
/** Sidebar UI ****************************************************************/
@import "sidebar/index";
/** Other UI ******************************************************************/
@import "others/index";