Bug 1363869 - Increase vertical padding of toolbar buttons. r=dao
MozReview-Commit-ID: 9AOdM5hEQtY
--- a/browser/extensions/pocket/skin/osx/pocket.css
+++ b/browser/extensions/pocket/skin/osx/pocket.css
@@ -1,9 +1,9 @@
@import url("chrome://pocket-shared/skin/pocket.css");
#nav-bar #pocket-button > .toolbarbutton-icon {
- padding: calc(var(--toolbarbutton-vertical-inner-padding)) 6px;
+ padding: calc(var(--toolbarbutton-inner-padding)) 6px;
}
#PanelUI-pocketView[mainview=true] > .panel-subview-body > #pocket-panel-iframe {
border-radius: var(--arrowpanel-border-radius);
}
--- a/browser/extensions/pocket/skin/windows/pocket.css
+++ b/browser/extensions/pocket/skin/windows/pocket.css
@@ -1,10 +1,10 @@
@import url("chrome://pocket-shared/skin/pocket.css");
#nav-bar #pocket-button > .toolbarbutton-icon {
- padding: calc(var(--toolbarbutton-vertical-inner-padding)) 6px;
+ padding: calc(var(--toolbarbutton-inner-padding)) 6px;
}
:-moz-any(#TabsToolbar, .widget-overflow-list) #pocket-button > .toolbarbutton-icon {
max-width: 18px;
padding: 0;
}
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -20,17 +20,17 @@
--backbutton-background: rgba(255,255,255,.15);
%ifdef MOZ_PHOTON_THEME
--toolbarbutton-border-radius: 2px;
%else
--toolbarbutton-border-radius: 1px;
%endif
- --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-vertical-inner-padding) - 1px);
+ --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
--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-boxshadow: none;
--toolbarbutton-active-background: rgba(154,154,154,.5) linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.4));
--toolbarbutton-active-bordercolor: rgba(0,0,0,.3);
--toolbarbutton-active-boxshadow: 0 1px 1px rgba(0,0,0,.1) inset, 0 0 1px rgba(0,0,0,.3) inset;
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -17,17 +17,17 @@
:root {
--space-above-tabbar: 9px;
--tabs-toolbar-color: #333;
--backbutton-border-color: rgba(0,0,0,0.2);
--backbutton-background: linear-gradient(rgba(255,255,255,0.9),
rgba(255,255,255,0.7)) repeat-x;
- --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px);
+ --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) + 1px);
%ifdef MOZ_PHOTON_THEME
--toolbarbutton-border-radius: 4px;
%else
--toolbarbutton-border-radius: 3px;
--toolbarbutton-hover-background: hsla(0,0%,100%,.1) linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,.1)) padding-box;
--toolbarbutton-active-background: hsla(0,0%,0%,.02) linear-gradient(hsla(0,0%,0%,.12), transparent) border-box;
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -183,17 +183,17 @@ toolbar:-moz-lwtheme-darktext {
}
/* Back and forward button */
#back-button > .toolbarbutton-icon,
#forward-button > .toolbarbutton-icon {
background: var(--chrome-nav-buttons-background) !important;
border-radius: 0 !important;
- padding: var(--toolbarbutton-vertical-inner-padding) 5px !important;
+ padding: var(--toolbarbutton-inner-padding) 5px !important;
margin: 0 !important;
border: 1px solid var(--chrome-nav-bar-controls-border-color) !important;
box-shadow: none !important;
height: auto !important;
}
#back-button > .toolbarbutton-icon {
/* 18px icon + 2 * 5px padding + 2 * 1px border */
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -5,26 +5,28 @@
%filter substitution
%define toolbarShadowColor hsla(209,67%,12%,0.35)
%define forwardTransitionLength 150ms
%ifndef MOZ_PHOTON_THEME
%define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-wrapper
%endif
:root {
- --toolbarbutton-vertical-inner-padding: 3px;
+%ifdef MOZ_PHOTON_THEME
+ --toolbarbutton-hover-background: hsla(240, 5%, 5%, .1);
+ --toolbarbutton-active-background: hsla(240, 5%, 5%, .15);
-%ifndef MOZ_PHOTON_THEME
+ --toolbarbutton-inner-padding: 5px;
+%else
--backbutton-urlbar-overlap: 6px;
/* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) */
--forwardbutton-width: 25px;
-%else
- --toolbarbutton-hover-background: hsla(240, 5%, 5%, .1);
- --toolbarbutton-active-background: hsla(240, 5%, 5%, .15);
+
+ --toolbarbutton-inner-padding: 3px;
%endif
}
toolbar:-moz-lwtheme {
%ifndef MOZ_PHOTON_THEME
--toolbarbutton-hover-background: rgba(255,255,255,.25);
--toolbarbutton-active-background: rgba(70%,70%,70%,.25);
%endif
@@ -153,17 +155,21 @@ toolbar[brighttext] .toolbarbutton-1 > .
%endif
.findbar-button > .toolbarbutton-text,
toolbarbutton.bookmark-item:not(.subviewbutton),
#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1 > .toolbarbutton-text,
#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
- padding: var(--toolbarbutton-vertical-inner-padding) 7px;
+%ifdef MOZ_PHOTON_THEME
+ padding: var(--toolbarbutton-inner-padding);
+%else
+ padding: var(--toolbarbutton-inner-padding) 7px;
+%endif
background-origin: padding-box !important;
background-clip: padding-box !important;
border: 1px solid transparent;
border-radius: var(--toolbarbutton-border-radius);
transition-property: background-color, border-color, box-shadow;
transition-duration: 150ms;
}
@@ -209,28 +215,28 @@ toolbarbutton.bookmark-item:not(.subview
}
#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
/* horizontal padding + border + actual icon width */
max-width: 31px;
}
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
- padding-top: calc(var(--toolbarbutton-vertical-inner-padding) + 6px);
- padding-bottom: calc(var(--toolbarbutton-vertical-inner-padding) + 6px);
+ padding-top: calc(var(--toolbarbutton-inner-padding) + 6px);
+ padding-bottom: calc(var(--toolbarbutton-inner-padding) + 6px);
}
#nav-bar .toolbarbutton-1 > .toolbarbutton-text {
padding-top: var(--toolbarbutton-vertical-text-padding);
padding-bottom: 0;
/* To make the hover feedback line up with sibling buttons, it needs the same
* height (16px) + padding (2 * 3px) + border (2 * 1px), but as a minimum
* because otherwise an increase in text sizes would break things.
*/
- min-height: calc(18px + 2 * var(--toolbarbutton-vertical-inner-padding));
+ min-height: calc(18px + 2 * var(--toolbarbutton-inner-padding));
}
#nav-bar .toolbaritem-combined-buttons {
margin-left: 2px;
margin-right: 2px;
}
#nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
@@ -385,18 +391,18 @@ toolbarbutton.bookmark-item[open="true"]
/* bookmarks menu-button */
#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
-moz-appearance: none !important;
}
#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
- padding-top: var(--toolbarbutton-vertical-inner-padding);
- padding-bottom: var(--toolbarbutton-vertical-inner-padding);
+ padding-top: var(--toolbarbutton-inner-padding);
+ padding-bottom: var(--toolbarbutton-inner-padding);
}
#BMB_bookmarksPopup[side="top"],
#BMB_bookmarksPopup[side="bottom"] {
margin-left: -20px;
margin-right: -20px;
}
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -12,17 +12,17 @@
%include windowsShared.inc
%define toolbarShadowColor hsla(209,67%,12%,0.35)
%include ../shared/browser.inc.css
:root {
--space-above-tabbar: 15px;
- --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-vertical-inner-padding) - 1px);
+ --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
%ifdef MOZ_PHOTON_THEME
--toolbarbutton-border-radius: 2px;
%else
--toolbarbutton-border-radius: 1px;
--toolbarbutton-hover-background: rgba(0,0,0,.1);
--toolbarbutton-active-background: rgba(0,0,0,.15);
@@ -752,17 +752,17 @@ toolbar[brighttext] #close-button {
#urlbar,
.searchbar-textbox {
font-size: 1.15em;
min-height: 28px;
}
:root {
/* let toolbar buttons match the location and search bar's minimum height */
- --toolbarbutton-vertical-inner-padding: 5px;
+ --toolbarbutton-inner-padding: 5px;
}
}
#urlbar:-moz-lwtheme,
.searchbar-textbox:-moz-lwtheme {
background-color: rgba(255,255,255,.8);
color: black;
}