mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2026-04-24 14:30:31 -07:00
Fix: Combined - Home button background size
This commit is contained in:
parent
51e234ae55
commit
26e0f1e24b
4 changed files with 109 additions and 81 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
|
|
|
|||
62
src/combined/_combined_circle_button.scss
Normal file
62
src/combined/_combined_circle_button.scss
Normal 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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue