Fix: Combined - Home button background size

This commit is contained in:
alstjr7375 2022-12-14 20:19:19 +09:00
parent 51e234ae55
commit 26e0f1e24b
4 changed files with 109 additions and 81 deletions

View file

@ -8234,6 +8234,13 @@
border-radius: 100%;
padding-block: 0 !important;
}
@supports -moz-bool-pref("userChrome.padding.toolbar_button") {
@supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") {
#nav-bar-customization-target > #back-button {
--toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default);
}
}
}
@supports not -moz-bool-pref("userChrome.autohide.back_button") {
#nav-bar-customization-target > #back-button {
padding-inline-end: 0 !important;
@ -8247,13 +8254,6 @@
padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important;
}
}
@supports -moz-bool-pref("userChrome.padding.toolbar_button") {
@supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") {
#nav-bar-customization-target > #back-button {
--toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default);
}
}
}
#nav-bar-customization-target > #back-button > menupopup {
margin-top: -1px !important;
}
@ -8275,6 +8275,13 @@
border-radius: 100%;
padding-block: 0 !important;
}
@supports -moz-bool-pref("userChrome.padding.toolbar_button") {
@supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") {
#nav-bar-customization-target > #back-button {
--toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default);
}
}
}
@supports not -moz-bool-pref("userChrome.autohide.back_button") {
#nav-bar-customization-target > #back-button {
padding-inline-end: 0 !important;
@ -8288,13 +8295,6 @@
padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important;
}
}
@supports -moz-bool-pref("userChrome.padding.toolbar_button") {
@supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") {
#nav-bar-customization-target > #back-button {
--toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default);
}
}
}
#nav-bar-customization-target > #back-button > menupopup {
margin-top: -1px !important;
}
@ -8312,14 +8312,24 @@
@supports -moz-bool-pref("userChrome.combined.nav_button") {
@supports -moz-bool-pref("userChrome.combined.nav_button.home_button") {
#nav-bar-customization-target > #home-button {
z-index: 3;
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;
}
@supports -moz-bool-pref("userChrome.padding.toolbar_button") {
@supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") {
#nav-bar-customization-target > #home-button {
--toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default);
}
}
}
#nav-bar-customization-target > #home-button > menupopup {
margin-top: -1px !important;
}
#nav-bar-customization-target > #home-button > .toolbarbutton-icon {
background-color: var(--uc-combined-circlebutton-background);
background-origin: padding-box;
@ -8385,14 +8395,24 @@
}
}
#nav-bar-customization-target > #home-button {
z-index: 3;
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;
}
@supports -moz-bool-pref("userChrome.padding.toolbar_button") {
@supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") {
#nav-bar-customization-target > #home-button {
--toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default);
}
}
}
#nav-bar-customization-target > #home-button > menupopup {
margin-top: -1px !important;
}
#nav-bar-customization-target > #home-button > .toolbarbutton-icon {
background-color: var(--uc-combined-circlebutton-background);
background-origin: padding-box;

View file

@ -1,17 +1,16 @@
//-- Mixin ---------------------------------------------------------------------
@import "combined_circle_button";
@mixin _combined_nav_button_background($autohideOptionName) {
> .toolbarbutton-icon {
background-color: var(--uc-combined-circlebutton-background);
@include circle_button_background;
}
&:not([disabled], [open]):hover > .toolbarbutton-icon {
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);
@include circle_button_background_hover;
}
&[open] > .toolbarbutton-icon,
&:not([disabled]):hover:active > .toolbarbutton-icon {
background-color: var(--uc-combined-circlebutton-active-background) !important;
border-color: hsla(240,5%,5%,.40);
@include circle_button_background_active;
}
&[disabled="true"] {
@ -34,42 +33,7 @@
}
@mixin _back_button_circle_shape() {
z-index: 3 !important;
background-color: var(--toolbar-bgcolor) !important;
background-clip: content-box !important;
border-radius: 100%;
padding-block: 0 !important;
@include NotOption("userChrome.autohide.back_button") {
padding-inline-end: 0 !important;
}
@include Option("userChrome.autohide.back_button") {
&:not([disabled="true"]) {
padding-inline-end: 0 !important;
}
&[disabled="true"] {
padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important;
}
}
@include Option("userChrome.padding.toolbar_button") {
@include Option("userChrome.padding.toolbar_button.compact") {
--toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default);
}
}
> 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
}
@include circle_button_shape($backButton: true);
}
//------------------------------------------------------------------------------

View file

@ -0,0 +1,62 @@
@mixin circle_button_shape($backButton: false) {
z-index: 3 !important;
background-color: var(--toolbar-bgcolor) !important;
background-clip: content-box !important;
border-radius: 100%;
padding-block: 0 !important;
@include Option("userChrome.padding.toolbar_button") {
@include Option("userChrome.padding.toolbar_button.compact") {
--toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default);
}
}
@if $backButton {
@include NotOption("userChrome.autohide.back_button") {
padding-inline-end: 0 !important;
}
@include Option("userChrome.autohide.back_button") {
&:not([disabled="true"]) {
padding-inline-end: 0 !important;
}
&[disabled="true"] {
padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important;
}
}
}
@else {
padding-inline-end: 0 !important;
}
> menupopup {
margin-top: -1px !important;
}
> .toolbarbutton-icon {
@if not $backButton {
@include circle_button_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
}
}
@mixin circle_button_background() {
background-color: var(--uc-combined-circlebutton-background);
}
@mixin circle_button_background_hover() {
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);
}
@mixin circle_button_background_active() {
background-color: var(--uc-combined-circlebutton-active-background) !important;
border-color: hsla(240,5%,5%,.40);
}

View file

@ -1,31 +1,13 @@
@import "combined_circle_button";
#nav-bar-customization-target > #home-button {
z-index: 3;
position: relative;
@include circle_button_shape;
background-color: var(--toolbar-bgcolor) !important;
background-clip: content-box !important;
border-radius: 100%;
padding-block: 0 !important;
padding-inline-end: 0 !important;
> .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
}
&:hover > .toolbarbutton-icon {
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);
@include circle_button_background_hover;
}
&:hover:active > .toolbarbutton-icon {
background-color: var(--uc-combined-circlebutton-active-background) !important;
border-color: hsla(240,5%,5%,.40);
@include circle_button_background_active;
}
}