diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 6aa3755..7e74d85 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -8076,7 +8076,7 @@ } } @supports not -moz-bool-pref("userChrome.combined.urlbar.nav_button") { - @supports not -moz-bool-pref("userChrome.combined.nav_button.none_forward_background") { + @supports not -moz-bool-pref("userChrome.combined.nav_button.none_background") { @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") { @supports not -moz-bool-pref("userChrome.combined.nav_button.home_button") { #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { @@ -8101,7 +8101,7 @@ fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); } @supports not -moz-bool-pref("userChrome.autohide.forward_button") { - #nav-bar-customization-target > #forward-button[disabled="true"] { + #nav-bar-customization-target > #forward-button[disabled="true"][disabled="true"] { opacity: 1 !important; /* Original: 0.4 */ } } @@ -8130,7 +8130,7 @@ fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); } @supports not -moz-bool-pref("userChrome.autohide.forward_button") { - #nav-bar-customization-target > #forward-button[disabled="true"] { + #nav-bar-customization-target > #forward-button[disabled="true"][disabled="true"] { opacity: 1 !important; /* Original: 0.4 */ } } @@ -8151,30 +8151,64 @@ #nav-bar-customization-target > #back-button { position: relative; } - #nav-bar-customization-target > #back-button > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-background); + @supports not -moz-bool-pref("userChrome.combined.urlbar.home_button") { + @supports not -moz-bool-pref("userChrome.combined.nav_button.home_button") { + #nav-bar-customization-target > #back-button > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-background); + } + #nav-bar-customization-target > #back-button:not([disabled], [open]):hover > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-hover-background) !important; + box-shadow: 0 1px 6px hsla(0deg, 0%, 0%, 0.1); + border-color: hsla(240deg, 5%, 5%, 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-combined-circlebutton-active-background) !important; + border-color: hsla(240deg, 5%, 5%, 0.4); + } + #nav-bar-customization-target > #back-button[disabled="true"] > .toolbarbutton-icon { + background-color: color-mix( + in srgb, + var(--toolbarbutton-hover-background), + var(--toolbar-field-background-color) 40% + ) !important; + fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); + } + @supports not -moz-bool-pref("userChrome.autohide.back_button") { + #nav-bar-customization-target > #back-button[disabled="true"][disabled="true"] { + opacity: 1 !important; /* Original: 0.4 */ + } + } + } } - #nav-bar-customization-target > #back-button:not([disabled], [open]):hover > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-hover-background) !important; - box-shadow: 0 1px 6px hsla(0deg, 0%, 0%, 0.1); - border-color: hsla(240deg, 5%, 5%, 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-combined-circlebutton-active-background) !important; - border-color: hsla(240deg, 5%, 5%, 0.4); - } - #nav-bar-customization-target > #back-button[disabled="true"] > .toolbarbutton-icon { - background-color: color-mix( - in srgb, - var(--toolbarbutton-hover-background), - var(--toolbar-field-background-color) 40% - ) !important; - fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); - } - @supports not -moz-bool-pref("userChrome.autohide.back_button") { - #nav-bar-customization-target > #back-button[disabled="true"] { - opacity: 1 !important; /* Original: 0.4 */ + @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") or -moz-bool-pref("userChrome.combined.nav_button.home_button") { + @supports not -moz-bool-pref("userChrome.combined.nav_button.none_background") { + #nav-bar-customization-target > #back-button > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-background); + } + #nav-bar-customization-target > #back-button:not([disabled], [open]):hover > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-hover-background) !important; + box-shadow: 0 1px 6px hsla(0deg, 0%, 0%, 0.1); + border-color: hsla(240deg, 5%, 5%, 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-combined-circlebutton-active-background) !important; + border-color: hsla(240deg, 5%, 5%, 0.4); + } + #nav-bar-customization-target > #back-button[disabled="true"] > .toolbarbutton-icon { + background-color: color-mix( + in srgb, + var(--toolbarbutton-hover-background), + var(--toolbar-field-background-color) 40% + ) !important; + fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); + } + @supports not -moz-bool-pref("userChrome.autohide.back_button") { + #nav-bar-customization-target > #back-button[disabled="true"][disabled="true"] { + opacity: 1 !important; /* Original: 0.4 */ + } + } } } @supports -moz-bool-pref("userChrome.combined.nav_button.home_button") or -moz-bool-pref("userChrome.combined.urlbar.home_button") { diff --git a/src/combined/_back_forward_button.scss b/src/combined/_back_forward_button.scss index 5801af8..926a10a 100644 --- a/src/combined/_back_forward_button.scss +++ b/src/combined/_back_forward_button.scss @@ -1,5 +1,5 @@ //-- Mixin --------------------------------------------------------------------- -@mixin _combined_nav_button_background() { +@mixin _combined_nav_button_background($autohideOptionName) { > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-background); } @@ -19,8 +19,19 @@ background-color: color-mix(in srgb, var(--toolbarbutton-hover-background), var(--toolbar-field-background-color) 40%) !important; fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); } + @include NotOption($autohideOptionName) { + &[disabled="true"] { + opacity: 1 !important; /* Original: 0.4 */ + } + } } } +@mixin _combined_forward_button_background() { + @include _combined_nav_button_background("userChrome.autohide.forward_button"); +} +@mixin _combined_back_button_background() { + @include _combined_nav_button_background("userChrome.autohide.back_button"); +} @mixin _back_button_circle_shape() { z-index: 3 !important; @@ -81,24 +92,14 @@ padding-inline-end: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */ } @include NotOption("userChrome.combined.urlbar.nav_button") { - @include NotOption("userChrome.combined.nav_button.none_forward_background") { + @include NotOption("userChrome.combined.nav_button.none_background") { @include Option("userChrome.combined.urlbar.home_button") { @include NotOption("userChrome.combined.nav_button.home_button") { - @include _combined_nav_button_background; - @include NotOption("userChrome.autohide.forward_button") { - &[disabled="true"] { - opacity: 1 !important; /* Original: 0.4 */ - } - } + @include _combined_forward_button_background; } } @include NotOption("userChrome.combined.urlbar.home_button") { - @include _combined_nav_button_background; - @include NotOption("userChrome.autohide.forward_button") { - &[disabled="true"] { - opacity: 1 !important; /* Original: 0.4 */ - } - } + @include _combined_forward_button_background; } } } @@ -117,10 +118,14 @@ #back-button { position: relative; - @include _combined_nav_button_background; - @include NotOption("userChrome.autohide.back_button") { - &[disabled="true"] { - opacity: 1 !important; /* Original: 0.4 */ + @include NotOption("userChrome.combined.urlbar.home_button") { + @include NotOption("userChrome.combined.nav_button.home_button") { + @include _combined_back_button_background; + } + } + @include Option("userChrome.combined.urlbar.home_button", "userChrome.combined.nav_button.home_button") { + @include NotOption("userChrome.combined.nav_button.none_background") { + @include _combined_back_button_background; } } @include Option("userChrome.combined.nav_button.home_button", "userChrome.combined.urlbar.home_button") { diff --git a/user.js b/user.js index cbfc566..e6216d9 100644 --- a/user.js +++ b/user.js @@ -113,7 +113,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.combined.nav_button", true); // user_pref("userChrome.combined.nav_button.home_button", true); // user_pref("userChrome.combined.nav_button.normal_foward", true); -// user_pref("userChrome.combined.nav_button.none_forward_background", true); +// user_pref("userChrome.combined.nav_button.none_background", true); // user_pref("userChrome.combined.urlbar.nav_button", true); // user_pref("userChrome.combined.urlbar.home_button", true); // user_pref("userChrome.combined.urlbar.reload_button", true);