mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2026-02-05 15:00:41 -08:00
Add: URL Bar - Combined Home button
This commit is contained in:
alstjr7375
parent
79fdf7380e
commit
9a0aa09c07
4 changed files with 147 additions and 56 deletions
|
|
@ -7342,13 +7342,24 @@
|
|||
}
|
||||
}
|
||||
/*= Url Bar - Combined buttons ===============================================*/
|
||||
@supports -moz-bool-pref("userChrome.urlbar.combined_with_reload") or -moz-bool-pref("userChrome.urlbar.combined_with_back_forward") {
|
||||
@supports -moz-bool-pref("userChrome.urlbar.combined_with_reload") or -moz-bool-pref(
|
||||
"userChrome.urlbar.combined_with_back_forward"
|
||||
) or -moz-bool-pref("userChrome.urlbar.combined_with_home") {
|
||||
#nav-bar {
|
||||
--uc-combined-circlebutton-background: hsla(0, 100%, 100%, 0.5);
|
||||
--uc-combined-circlebutton-hover-background: var(--uc-combined-circlebutton-background);
|
||||
--uc-combined-circlebutton-active-background: var(--toolbarbutton-active-background);
|
||||
--uc-combined-circlebutton-border-color: hsla(240, 5%, 5%, 0.3);
|
||||
--uc-toolbarbutton-boundary: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding));
|
||||
--uc-toolbarbutton-padding: calc(2 * var(--uc-toolbarbutton-boundary));
|
||||
--uc-toolbarbutton-size: calc(12px + var(--uc-toolbarbutton-padding));
|
||||
--uc-urlbar-icon-size: calc(16px + 2 * var(--urlbar-icon-padding));
|
||||
}
|
||||
#nav-bar[brighttext] {
|
||||
--uc-combined-circlebutton-background: var(--toolbarbutton-hover-background);
|
||||
--uc-combined-circlebutton-hover-background: var(--toolbarbutton-active-background);
|
||||
--uc-combined-circlebutton-active-background: color-mix(in srgb, currentColor 20%, transparent);
|
||||
}
|
||||
|
||||
#nav-bar-customization-target > * {
|
||||
-moz-box-ordinal-group: 1;
|
||||
|
|
@ -7394,12 +7405,6 @@
|
|||
-moz-box-ordinal-group: 4;
|
||||
}
|
||||
|
||||
#nav-bar {
|
||||
--uc-backbutton-background: var(--toolbarbutton-hover-background, hsla(0, 100%, 100%, 0.5));
|
||||
--uc-backbutton-hover-background: var(--toolbarbutton-active-background);
|
||||
--uc-backbutton-active-background: color-mix(in srgb, currentColor 20%, transparent);
|
||||
}
|
||||
|
||||
#nav-bar-customization-target > #urlbar-container {
|
||||
/* var(--urlbar-margin-inline) */
|
||||
margin-inline-start: calc(-1 * var(--uc-toolbarbutton-size)) !important;
|
||||
|
|
@ -7422,33 +7427,18 @@
|
|||
}
|
||||
#nav-bar-customization-target > #back-button {
|
||||
position: relative;
|
||||
z-index: 3 !important;
|
||||
background-color: var(--toolbar-bgcolor) !important;
|
||||
background-clip: content-box !important;
|
||||
border-radius: 100%;
|
||||
padding-block: 0 !important;
|
||||
padding-inline-end: 0 !important;
|
||||
}
|
||||
#nav-bar-customization-target > #back-button > menupopup {
|
||||
margin-top: -1px !important;
|
||||
}
|
||||
#nav-bar-customization-target > #back-button > .toolbarbutton-icon {
|
||||
background-color: var(--uc-backbutton-background);
|
||||
background-origin: padding-box;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid var(--uc-backbutton-border-color);
|
||||
border-radius: 10000px !important;
|
||||
padding-inline-end: var(--urlbar-icon-padding) !important;
|
||||
height: auto !important;
|
||||
background-color: var(--uc-combined-circlebutton-background);
|
||||
}
|
||||
#nav-bar-customization-target > #back-button:not([disabled], [open]):hover > .toolbarbutton-icon {
|
||||
background-color: var(--uc-backbutton-hover-background) !important;
|
||||
background-color: var(--uc-combined-circlebutton-hover-background) !important;
|
||||
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
|
||||
border-color: rgba(12, 12, 13, 0.35);
|
||||
}
|
||||
#nav-bar-customization-target > #back-button[open] > .toolbarbutton-icon,
|
||||
#nav-bar-customization-target > #back-button:not([disabled]):hover:active > .toolbarbutton-icon {
|
||||
background-color: var(--uc-backbutton-active-background) !important;
|
||||
background-color: var(--uc-combined-circlebutton-active-background) !important;
|
||||
border-color: rgba(12, 12, 13, 0.4);
|
||||
}
|
||||
#nav-bar-customization-target > #back-button[disabled="true"] {
|
||||
|
|
@ -7463,6 +7453,74 @@
|
|||
) !important;
|
||||
fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%);
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.urlbar.combined_with_home") {
|
||||
#nav-bar-customization-target > #back-button {
|
||||
z-index: 2;
|
||||
margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important;
|
||||
padding-inline-start: 0px !important;
|
||||
/* Original: var(--toolbarbutton-outer-padding) */
|
||||
}
|
||||
#nav-bar-customization-target > #back-button > .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;
|
||||
}
|
||||
}
|
||||
@supports not -moz-bool-pref("userChrome.urlbar.combined_with_home") {
|
||||
#nav-bar-customization-target > #back-button {
|
||||
z-index: 3 !important;
|
||||
background-color: var(--toolbar-bgcolor) !important;
|
||||
background-clip: content-box !important;
|
||||
border-radius: 100%;
|
||||
padding-block: 0 !important;
|
||||
padding-inline-end: 0 !important;
|
||||
}
|
||||
#nav-bar-customization-target > #back-button > menupopup {
|
||||
margin-top: -1px !important;
|
||||
}
|
||||
#nav-bar-customization-target > #back-button > .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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.urlbar.combined_with_home") {
|
||||
#nav-bar-customization-target > #home-button {
|
||||
-moz-box-ordinal-group: 3;
|
||||
}
|
||||
|
||||
#nav-bar-customization-target > #home-button {
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
background-color: var(--toolbar-bgcolor) !important;
|
||||
background-clip: content-box !important;
|
||||
border-radius: 100%;
|
||||
padding-block: 0 !important;
|
||||
padding-inline-end: 0 !important;
|
||||
}
|
||||
#nav-bar-customization-target > #home-button > .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;
|
||||
}
|
||||
#nav-bar-customization-target > #home-button:hover > .toolbarbutton-icon {
|
||||
background-color: var(--uc-combined-circlebutton-hover-background) !important;
|
||||
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
|
||||
border-color: rgba(12, 12, 13, 0.35);
|
||||
}
|
||||
#nav-bar-customization-target > #home-button:hover:active > .toolbarbutton-icon {
|
||||
background-color: var(--uc-combined-circlebutton-active-background) !important;
|
||||
border-color: rgba(12, 12, 13, 0.4);
|
||||
}
|
||||
}
|
||||
/** Url View UI ***************************************************************/
|
||||
/*= Url View - Move icon to left =============================================*/
|
||||
|
|
|
|||
|
|
@ -1,9 +1,3 @@
|
|||
#nav-bar {
|
||||
--uc-backbutton-background: var(--toolbarbutton-hover-background, hsla(0,100%,100%,.5));
|
||||
--uc-backbutton-hover-background: var(--toolbarbutton-active-background);
|
||||
--uc-backbutton-active-background: color-mix(in srgb, currentColor 20%, transparent);
|
||||
}
|
||||
|
||||
#nav-bar-customization-target > {
|
||||
#urlbar-container {
|
||||
/* var(--urlbar-margin-inline) */
|
||||
|
|
@ -31,37 +25,17 @@
|
|||
#back-button {
|
||||
position: relative;
|
||||
|
||||
z-index: 3 !important;
|
||||
background-color: var(--toolbar-bgcolor) !important;
|
||||
background-clip: content-box !important;
|
||||
border-radius: 100%;
|
||||
|
||||
padding-block: 0 !important;
|
||||
padding-inline-end: 0 !important;
|
||||
|
||||
> menupopup {
|
||||
margin-top: -1px !important;
|
||||
}
|
||||
|
||||
> .toolbarbutton-icon {
|
||||
background-color: var(--uc-backbutton-background);
|
||||
background-origin: padding-box;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid var(--uc-backbutton-border-color);
|
||||
border-radius: 10000px !important;
|
||||
|
||||
padding-inline-end: var(--urlbar-icon-padding) !important;
|
||||
height: auto !important
|
||||
background-color: var(--uc-combined-circlebutton-background);
|
||||
}
|
||||
|
||||
&:not([disabled], [open]):hover > .toolbarbutton-icon {
|
||||
background-color: var(--uc-backbutton-hover-background) !important;
|
||||
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);
|
||||
}
|
||||
&[open] > .toolbarbutton-icon,
|
||||
&:not([disabled]):hover:active > .toolbarbutton-icon {
|
||||
background-color: var(--uc-backbutton-active-background) !important;
|
||||
background-color: var(--uc-combined-circlebutton-active-background) !important;
|
||||
border-color: hsla(240,5%,5%,.40);
|
||||
}
|
||||
|
||||
|
|
@ -73,5 +47,42 @@
|
|||
fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%);
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userChrome.urlbar.combined_with_home") {
|
||||
z-index: 2;
|
||||
|
||||
margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important;
|
||||
padding-inline-start: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */
|
||||
|
||||
> .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.urlbar.combined_with_home") {
|
||||
z-index: 3 !important;
|
||||
background-color: var(--toolbar-bgcolor) !important;
|
||||
background-clip: content-box !important;
|
||||
border-radius: 100%;
|
||||
|
||||
padding-block: 0 !important;
|
||||
padding-inline-end: 0 !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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,9 +4,22 @@
|
|||
}
|
||||
|
||||
/*= Url Bar - Combined buttons ===============================================*/
|
||||
@include Option("userChrome.urlbar.combined_with_reload", "userChrome.urlbar.combined_with_back_forward") {
|
||||
@include Option("userChrome.urlbar.combined_with_reload", "userChrome.urlbar.combined_with_back_forward", "userChrome.urlbar.combined_with_home") {
|
||||
// Init
|
||||
#nav-bar {
|
||||
// Color
|
||||
--uc-combined-circlebutton-background: hsla(0,100%,100%,.5);
|
||||
--uc-combined-circlebutton-hover-background: var(--uc-combined-circlebutton-background);
|
||||
--uc-combined-circlebutton-active-background: var(--toolbarbutton-active-background);
|
||||
--uc-combined-circlebutton-border-color: hsla(240,5%,5%,.3);
|
||||
&[brighttext] {
|
||||
// Original: Using :-moz-lwtheme
|
||||
--uc-combined-circlebutton-background: var(--toolbarbutton-hover-background);
|
||||
--uc-combined-circlebutton-hover-background: var(--toolbarbutton-active-background);
|
||||
--uc-combined-circlebutton-active-background: color-mix(in srgb, currentColor 20%, transparent);
|
||||
}
|
||||
|
||||
// Padding & Size
|
||||
--uc-toolbarbutton-boundary: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding));
|
||||
--uc-toolbarbutton-padding: calc(2 * var(--uc-toolbarbutton-boundary));
|
||||
--uc-toolbarbutton-size: calc(12px + var(--uc-toolbarbutton-padding));
|
||||
|
|
@ -48,3 +61,11 @@
|
|||
|
||||
@import "back_forward_button";
|
||||
}
|
||||
|
||||
@include Option("userChrome.urlbar.combined_with_home") {
|
||||
#nav-bar-customization-target > #home-button {
|
||||
-moz-box-ordinal-group: 3;
|
||||
}
|
||||
|
||||
@import "home_button";
|
||||
}
|
||||
|
|
|
|||
3
user.js
3
user.js
|
|
@ -128,9 +128,10 @@ user_pref("userChrome.rounding.square_tab", false);
|
|||
// user_pref("userChrome.padding.urlView_result", true);
|
||||
// user_pref("userChrome.padding.panel_header", true);
|
||||
|
||||
// user_pref("userChrome.urlbar.always_show_page_actions", true);
|
||||
// user_pref("userChrome.urlbar.always_show_page_actions", true);
|
||||
// user_pref("userChrome.urlbar.combined_with_reload", true);
|
||||
// user_pref("userChrome.urlbar.combined_with_back_forward", true);
|
||||
// user_pref("userChrome.urlbar.combined_with_home", true);
|
||||
|
||||
// user_pref("userChrome.urlView.move_icon_to_left", true);
|
||||
// user_pref("userChrome.urlView.go_button_when_typing", true);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue