mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-29 07:42:04 +00:00
Bug 1253500 - change forwardbutton-width to stop including the backbutton-urlbar-overlap so as to fix the forward button apperance on the default theme in Windows 10, r=dao
MozReview-Commit-ID: 4I6mC0OnQlF --HG-- extra : amend_source : 9cb84c98b446c11b7c137e9d5d13f10d9c33bc5e
This commit is contained in:
parent
67fb95f5f4
commit
3bd291ab08
@ -19,8 +19,8 @@
|
|||||||
|
|
||||||
:root {
|
:root {
|
||||||
--backbutton-urlbar-overlap: 6px;
|
--backbutton-urlbar-overlap: 6px;
|
||||||
/* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
|
/* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) */
|
||||||
--forwardbutton-width: 31px;
|
--forwardbutton-width: 25px;
|
||||||
|
|
||||||
--toolbarbutton-hover-background: rgba(255,255,255,.5) linear-gradient(rgba(255,255,255,.5), transparent);
|
--toolbarbutton-hover-background: rgba(255,255,255,.5) linear-gradient(rgba(255,255,255,.5), transparent);
|
||||||
--toolbarbutton-hover-bordercolor: rgba(0,0,0,.25);
|
--toolbarbutton-hover-bordercolor: rgba(0,0,0,.25);
|
||||||
@ -742,7 +742,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
|
|||||||
padding-right: 3px;
|
padding-right: 3px;
|
||||||
border-left-style: none;
|
border-left-style: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
max-width: var(--forwardbutton-width);
|
max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap));
|
||||||
}
|
}
|
||||||
|
|
||||||
@conditionalForwardWithUrlbar@:not([switchingtabs]) > #forward-button {
|
@conditionalForwardWithUrlbar@:not([switchingtabs]) > #forward-button {
|
||||||
@ -750,7 +750,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@conditionalForwardWithUrlbar@ > #forward-button[disabled] {
|
@conditionalForwardWithUrlbar@ > #forward-button[disabled] {
|
||||||
margin-left: calc(0px - var(--forwardbutton-width));
|
margin-left: calc(0px - var(--forwardbutton-width) - var(--backbutton-urlbar-overlap));
|
||||||
}
|
}
|
||||||
|
|
||||||
@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] {
|
@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] {
|
||||||
@ -760,7 +760,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
|
|||||||
|
|
||||||
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] {
|
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] {
|
||||||
/* when not hovered anymore, trigger a new transition to hide the forward button immediately */
|
/* when not hovered anymore, trigger a new transition to hide the forward button immediately */
|
||||||
margin-left: calc(-0.01px - var(--forwardbutton-width));
|
margin-left: calc(-0.01px - var(--forwardbutton-width) - var(--backbutton-urlbar-overlap));
|
||||||
}
|
}
|
||||||
|
|
||||||
/* undo close tab menu item */
|
/* undo close tab menu item */
|
||||||
|
@ -20,8 +20,8 @@
|
|||||||
--tabs-toolbar-color: #333;
|
--tabs-toolbar-color: #333;
|
||||||
|
|
||||||
--backbutton-urlbar-overlap: 6px;
|
--backbutton-urlbar-overlap: 6px;
|
||||||
/* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
|
/* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) */
|
||||||
--forwardbutton-width: 32px;
|
--forwardbutton-width: 26px;
|
||||||
|
|
||||||
--toolbarbutton-hover-background: hsla(0,0%,100%,.1) linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,.1)) padding-box;
|
--toolbarbutton-hover-background: hsla(0,0%,100%,.1) linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,.1)) padding-box;
|
||||||
--toolbarbutton-hover-bordercolor: hsla(0,0%,0%,.2);
|
--toolbarbutton-hover-bordercolor: hsla(0,0%,0%,.2);
|
||||||
@ -1354,7 +1354,7 @@ toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@conditionalForwardWithUrlbar@ > #forward-button[disabled] {
|
@conditionalForwardWithUrlbar@ > #forward-button[disabled] {
|
||||||
margin-left: calc(0px - var(--forwardbutton-width));
|
margin-left: calc(0px - var(--forwardbutton-width) - var(--backbutton-urlbar-overlap));
|
||||||
}
|
}
|
||||||
|
|
||||||
@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] {
|
@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] {
|
||||||
@ -1364,7 +1364,7 @@ toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
|
|||||||
|
|
||||||
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] {
|
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] {
|
||||||
/* when not hovered anymore, trigger a new transition to hide the forward button immediately */
|
/* when not hovered anymore, trigger a new transition to hide the forward button immediately */
|
||||||
margin-left: calc(-0.01px - var(--forwardbutton-width));
|
margin-left: calc(-0.01px - var(--forwardbutton-width) - var(--backbutton-urlbar-overlap));
|
||||||
}
|
}
|
||||||
|
|
||||||
.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
|
.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
|
||||||
|
@ -4,6 +4,10 @@
|
|||||||
|
|
||||||
%include ../shared/devedition.inc.css
|
%include ../shared/devedition.inc.css
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--forwardbutton-width: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
/* Use only 1px separator between nav toolbox and page content */
|
/* Use only 1px separator between nav toolbox and page content */
|
||||||
#navigator-toolbox::after {
|
#navigator-toolbox::after {
|
||||||
background: linear-gradient(to top, var(--chrome-navigator-toolbox-separator-color), var(--chrome-navigator-toolbox-separator-color) 1px, transparent 1px);
|
background: linear-gradient(to top, var(--chrome-navigator-toolbox-separator-color), var(--chrome-navigator-toolbox-separator-color) 1px, transparent 1px);
|
||||||
|
@ -20,8 +20,8 @@
|
|||||||
|
|
||||||
--backbutton-urlbar-overlap: 6px;
|
--backbutton-urlbar-overlap: 6px;
|
||||||
|
|
||||||
/* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
|
/* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) */
|
||||||
--forwardbutton-width: 31px;
|
--forwardbutton-width: 25px;
|
||||||
|
|
||||||
--toolbarbutton-vertical-inner-padding: 2px;
|
--toolbarbutton-vertical-inner-padding: 2px;
|
||||||
--toolbarbutton-vertical-outer-padding: 8px;
|
--toolbarbutton-vertical-outer-padding: 8px;
|
||||||
@ -938,7 +938,7 @@ toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
|
|||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
padding-left: calc(var(--backbutton-urlbar-overlap) + 3px) !important;
|
padding-left: calc(var(--backbutton-urlbar-overlap) + 3px) !important;
|
||||||
padding-right: 3px !important;
|
padding-right: 3px !important;
|
||||||
max-width: var(--forwardbutton-width) !important;
|
max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@conditionalForwardWithUrlbar@:not([switchingtabs]) > #forward-button {
|
@conditionalForwardWithUrlbar@:not([switchingtabs]) > #forward-button {
|
||||||
@ -946,7 +946,7 @@ toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@conditionalForwardWithUrlbar@ > #forward-button[disabled] {
|
@conditionalForwardWithUrlbar@ > #forward-button[disabled] {
|
||||||
margin-left: calc(0px - var(--forwardbutton-width));
|
margin-left: calc(0px - var(--forwardbutton-width) - var(--backbutton-urlbar-overlap));
|
||||||
}
|
}
|
||||||
|
|
||||||
@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] {
|
@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] {
|
||||||
@ -956,7 +956,7 @@ toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
|
|||||||
|
|
||||||
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] {
|
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] {
|
||||||
/* when not hovered anymore, trigger a new transition to hide the forward button immediately */
|
/* when not hovered anymore, trigger a new transition to hide the forward button immediately */
|
||||||
margin-left: calc(-0.01px - var(--forwardbutton-width));
|
margin-left: calc(-0.01px - var(--forwardbutton-width) - var(--backbutton-urlbar-overlap));
|
||||||
}
|
}
|
||||||
|
|
||||||
#back-button {
|
#back-button {
|
||||||
|
Loading…
Reference in New Issue
Block a user