wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 1091001 - Convert tabToolbarNavbarOverlap and tabMinHeight to CSS variables. r=MattN

Browse Source
This commit is contained in:
Brian Grinstead 2015-01-09 14:42:00 -05:00
parent 2a62ff8672
commit 4157d04e95
5 changed files with 22 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
browser/themes/linux/browser.css
View File

@ -1777,7 +1777,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
#TabsToolbar {
min-height: 0;
padding: 0;
margin-bottom: -@tabToolbarNavbarOverlap@;
margin-bottom: calc(-1 * var(--tab-toolbar-navbar-overlap));
}
#TabsToolbar:not(:-moz-lwtheme) {
@ -1852,7 +1852,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
.tabbrowser-arrowscrollbox > .scrollbutton-down {
-moz-appearance: none;
list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-left.png");
margin: 0 0 @tabToolbarNavbarOverlap@;
margin: 0 0 var(--tab-toolbar-navbar-overlap);
}
#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .scrollbutton-up,
@ -1880,7 +1880,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
}
#TabsToolbar .toolbarbutton-1 {
margin-bottom: @tabToolbarNavbarOverlap@;
margin-bottom: var(--tab-toolbar-navbar-overlap);
}
#alltabs-button {

12
browser/themes/osx/browser.css
View File

@ -117,7 +117,7 @@
* tabstrip can overlap it.
*/
#main-window[tabsintitlebar] > #titlebar {
min-height: calc(@tabMinHeight@ + var(--space-above-tabbar) - @tabToolbarNavbarOverlap@);
min-height: calc(var(--tab-min-height) + var(--space-above-tabbar) - var(--tab-toolbar-navbar-overlap));
}
/**
@ -191,7 +191,7 @@ toolbarseparator {
#TabsToolbar:not([collapsed="true"]) + #nav-bar:-moz-lwtheme {
border-top: 1px solid hsla(0,0%,0%,.3);
background-clip: padding-box;
margin-top: -@tabToolbarNavbarOverlap@;
margin-top: calc(-1 * var(--tab-toolbar-navbar-overlap));
/* Position the toolbar above the bottom of background tabs */
position: relative;
z-index: 1;
@ -203,7 +203,7 @@ toolbarseparator {
#main-window[tabsintitlebar] #TabsToolbar:not([collapsed="true"]) + #nav-bar:not(:-moz-lwtheme) {
border-top: 1px solid hsla(0,0%,0%,.2);
background-clip: padding-box;
margin-top: -@tabToolbarNavbarOverlap@;
margin-top: calc(-1 * var(--tab-toolbar-navbar-overlap));
/* Position the toolbar above the bottom of background tabs */
position: relative;
z-index: 1;
@ -3184,7 +3184,7 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
.tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-arrowscrollbox > .scrollbutton-down {
-moz-image-region: rect(0, 13px, 20px, 0);
margin: 0 0 @tabToolbarNavbarOverlap@;
margin: 0 0 var(--tab-toolbar-navbar-overlap);
padding: 0 4px;
border: none;
}
@ -3310,7 +3310,7 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
}
#TabsToolbar .toolbarbutton-1 {
margin-bottom: @tabToolbarNavbarOverlap@;
margin-bottom: var(--tab-toolbar-navbar-overlap);
}
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
@ -4729,7 +4729,7 @@ window > chatbox {
@media (-moz-mac-lion-theme) {
#TabsToolbar > .private-browsing-indicator {
transform: translateY(calc(0px - var(--space-above-tabbar)));
transform: translateY(calc(-1 * var(--space-above-tabbar)));
/* We offset by 38px for mask graphic, plus 4px to account for the
* margin-left, which sums to 42px.
*/

2
browser/themes/shared/browser.inc
View File

@ -11,5 +11,3 @@
%endif
%define inAnyPanel :-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
%define tabToolbarNavbarOverlap 1px
%define tabMinHeight 31px

15
browser/themes/shared/tabs.inc.css
View File

@ -4,6 +4,11 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%endif
:root {
--tab-toolbar-navbar-overlap: 1px;
--tab-min-height: 31px;
}
%define tabCurveWidth 30px
%define tabCurveHalfWidth 15px
@ -20,7 +25,7 @@
}
#tabbrowser-tabs {
min-height: @tabMinHeight@;
min-height: var(--tab-min-height);
}
.tabbrowser-tab,
@ -118,7 +123,7 @@
background-image: url(chrome://browser/skin/tabbrowser/tab-overflow-indicator.png);
background-size: 100% 100%;
width: 14px;
margin-bottom: @tabToolbarNavbarOverlap@;
margin-bottom: var(--tab-toolbar-navbar-overlap);
pointer-events: none;
position: relative;
z-index: 3; /* the selected tab's z-index + 1 */
@ -155,7 +160,7 @@
.tab-background-end,
.tab-background-end[selected=true]::after,
.tab-background-end[selected=true]::before {
min-height: @tabMinHeight@;
min-height: var(--tab-min-height);
width: @tabCurveWidth@;
}
@ -295,7 +300,7 @@
.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) > .tab-stack > .tab-content {
background-image: radial-gradient(farthest-corner at center bottom, rgb(255,255,255) 3%, rgba(186,221,251,0.75) 20%, rgba(127,179,255,0.25) 40%, transparent 70%);
background-position: center bottom @tabToolbarNavbarOverlap@;
background-position: center bottom var(--tab-toolbar-navbar-overlap);
background-repeat: no-repeat;
background-size: 85% 100%;
}
@ -308,7 +313,7 @@
-moz-margin-start: -1.5px;
-moz-margin-end: -1.5px;
background-image: url(chrome://browser/skin/tabbrowser/tab-separator.png);
background-position: left bottom @tabToolbarNavbarOverlap@;
background-position: left bottom var(--tab-toolbar-navbar-overlap);
background-repeat: no-repeat;
background-size: 3px 100%;
content: "";

6
browser/themes/windows/browser.css
View File

@ -887,7 +887,7 @@ toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
}
#TabsToolbar .toolbarbutton-1 {
margin-bottom: @tabToolbarNavbarOverlap@;
margin-bottom: var(--tab-toolbar-navbar-overlap);
}
#TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
@ -1786,7 +1786,7 @@ toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
#TabsToolbar {
min-height: 0;
padding: 0;
margin-bottom: -@tabToolbarNavbarOverlap@; /* overlap the nav-bar's top border */
margin-bottom: calc(-1 * var(--tab-toolbar-navbar-overlap)); /* overlap the nav-bar's top border */
}
%ifndef WINDOWS_AERO
@ -1881,7 +1881,7 @@ toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
.tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-arrowscrollbox > .scrollbutton-down {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-left.png");
margin: 0 0 @tabToolbarNavbarOverlap@;
margin: 0 0 var(--tab-toolbar-navbar-overlap);
}
#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .scrollbutton-up,