Bug 1222747 - fix width of forward button on devedition theme by making it a CSS variable, r=dao

This commit is contained in:
Gijs Kruitbosch 2015-11-17 14:30:18 +00:00
parent 806d64d163
commit c5b504f817
5 changed files with 23 additions and 12 deletions

View File

@ -16,10 +16,11 @@
%define forwardTransitionLength 150ms
%define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-wrapper
%define conditionalForwardWithUrlbarWidth 31
:root {
--backbutton-urlbar-overlap: 6px;
/* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
--forwardbutton-width: 31px;
--toolbarbutton-hover-background: rgba(255,255,255,.5) linear-gradient(rgba(255,255,255,.5), transparent);
--toolbarbutton-hover-bordercolor: rgba(0,0,0,.25);
@ -743,7 +744,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
padding-right: 3px;
border-left-style: none;
border-radius: 0;
max-width: @conditionalForwardWithUrlbarWidth@px;
max-width: var(--forwardbutton-width);
}
@conditionalForwardWithUrlbar@:not([switchingtabs]) > #forward-button {
@ -751,7 +752,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
}
@conditionalForwardWithUrlbar@ > #forward-button[disabled] {
margin-left: -@conditionalForwardWithUrlbarWidth@px;
margin-left: calc(0px - var(--forwardbutton-width));
}
@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] {
@ -761,7 +762,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: -@conditionalForwardWithUrlbarWidth@.01px;
margin-left: calc(-0.01px - var(--forwardbutton-width));
}
/* undo close tab menu item */

View File

@ -4,6 +4,10 @@
%include ../shared/devedition.inc.css
:root {
--forwardbutton-width: 29px;
}
:root[devtoolstheme="dark"] .findbar-closebutton:not(:hover),
:root[devtoolstheme="dark"] #sidebar-header > .close-icon:not(:hover),
.tab-close-button[visuallyselected]:not(:hover) {

View File

@ -8,7 +8,6 @@
%filter substitution
%define forwardTransitionLength 150ms
%define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-wrapper
%define conditionalForwardWithUrlbarWidth 32
%define toolbarButtonPressed :hover:active:not([disabled="true"]):not([cui-areatype="menu-panel"])
%define windowButtonMarginTop 11px
@ -21,6 +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;
--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);
@ -1371,7 +1372,7 @@ toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
}
@conditionalForwardWithUrlbar@ > #forward-button[disabled] {
margin-left: -@conditionalForwardWithUrlbarWidth@px;
margin-left: calc(0px - var(--forwardbutton-width));
}
@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] {
@ -1381,7 +1382,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: -@conditionalForwardWithUrlbarWidth@.01px;
margin-left: calc(-0.01px - var(--forwardbutton-width));
}
.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),

View File

@ -20,6 +20,9 @@
--backbutton-urlbar-overlap: 6px;
/* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
--forwardbutton-width: 31px;
--toolbarbutton-vertical-inner-padding: 2px;
--toolbarbutton-vertical-outer-padding: 8px;
@ -939,9 +942,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;
% icon width + border + horizontal padding without --backbutton-urlbar-overlap
%define forwardButtonWidth 25
max-width: calc(@forwardButtonWidth@px + var(--backbutton-urlbar-overlap)) !important;
max-width: var(--forwardbutton-width) !important;
}
@conditionalForwardWithUrlbar@:not([switchingtabs]) > #forward-button {
@ -949,7 +950,7 @@ toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
}
@conditionalForwardWithUrlbar@ > #forward-button[disabled] {
margin-left: calc(-@forwardButtonWidth@px - var(--backbutton-urlbar-overlap));
margin-left: calc(0px - var(--forwardbutton-width));
}
@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] {
@ -959,7 +960,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(-@forwardButtonWidth@.01px - var(--backbutton-urlbar-overlap));
margin-left: calc(-0.01px - var(--forwardbutton-width));
}
#back-button {

View File

@ -4,6 +4,10 @@
%include ../shared/devedition.inc.css
:root {
--forwardbutton-width: 29px;
}
:root[devtoolstheme="dark"],
:root[devtoolstheme="light"] {
/* Matches the #browser-border-start, #browser-border-end color */