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:
Gijs Kruitbosch 2016-03-04 10:37:11 +00:00
parent 67fb95f5f4
commit 3bd291ab08
4 changed files with 18 additions and 14 deletions

View File

@ -19,8 +19,8 @@
:root {
--backbutton-urlbar-overlap: 6px;
/* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
--forwardbutton-width: 31px;
/* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) */
--forwardbutton-width: 25px;
--toolbarbutton-hover-background: rgba(255,255,255,.5) linear-gradient(rgba(255,255,255,.5), transparent);
--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;
border-left-style: none;
border-radius: 0;
max-width: var(--forwardbutton-width);
max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap));
}
@conditionalForwardWithUrlbar@:not([switchingtabs]) > #forward-button {
@ -750,7 +750,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
}
@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] {
@ -760,7 +760,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] {
/* 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 */

View File

@ -20,8 +20,8 @@
--tabs-toolbar-color: #333;
--backbutton-urlbar-overlap: 6px;
/* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
--forwardbutton-width: 32px;
/* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) */
--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-bordercolor: hsla(0,0%,0%,.2);
@ -1354,7 +1354,7 @@ toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
}
@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] {
@ -1364,7 +1364,7 @@ toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] {
/* 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),

View File

@ -4,6 +4,10 @@
%include ../shared/devedition.inc.css
:root {
--forwardbutton-width: 32px;
}
/* Use only 1px separator between nav toolbox and page content */
#navigator-toolbox::after {
background: linear-gradient(to top, var(--chrome-navigator-toolbox-separator-color), var(--chrome-navigator-toolbox-separator-color) 1px, transparent 1px);

View File

@ -20,8 +20,8 @@
--backbutton-urlbar-overlap: 6px;
/* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
--forwardbutton-width: 31px;
/* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) */
--forwardbutton-width: 25px;
--toolbarbutton-vertical-inner-padding: 2px;
--toolbarbutton-vertical-outer-padding: 8px;
@ -938,7 +938,7 @@ toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
border-radius: 0 !important;
padding-left: calc(var(--backbutton-urlbar-overlap) + 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 {
@ -946,7 +946,7 @@ toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
}
@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] {
@ -956,7 +956,7 @@ toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] {
/* 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 {