From 9a0aa09c07d66d7dbd5e7f18cf2ca9fd9493ba02 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 4 Oct 2022 00:57:34 +0900 Subject: [PATCH] Add: URL Bar - Combined Home button --- css/leptonChrome.css | 108 ++++++++++++++++++++------- src/urlbar/_back_forward_button.scss | 69 ++++++++++------- src/urlbar/_index.scss | 23 +++++- user.js | 3 +- 4 files changed, 147 insertions(+), 56 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 0172471..d3722c0 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -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 =============================================*/ diff --git a/src/urlbar/_back_forward_button.scss b/src/urlbar/_back_forward_button.scss index a67bb00..4a5af94 100644 --- a/src/urlbar/_back_forward_button.scss +++ b/src/urlbar/_back_forward_button.scss @@ -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 + } + } } } diff --git a/src/urlbar/_index.scss b/src/urlbar/_index.scss index 82d362f..a857213 100644 --- a/src/urlbar/_index.scss +++ b/src/urlbar/_index.scss @@ -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"; +} diff --git a/user.js b/user.js index 58d0b49..85ff362 100644 --- a/user.js +++ b/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);