mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 702225 - revised nav bar button styling. r=shorlander
This commit is contained in:
Dão Gottwald
parent
01e301067a
commit
651a9023c2
@ -1055,11 +1055,7 @@
|
||||
<svg:svg height="0">
|
||||
<svg:mask id="winstripe-keyhole-forward-mask" maskContentUnits="objectBoundingBox">
|
||||
<svg:rect x="0" y="0" width="1" height="1" fill="white"/>
|
||||
<svg:circle cx="-0.46" cy="0.5" r="0.63"/>
|
||||
</svg:mask>
|
||||
<svg:mask id="winstripe-keyhole-forward-mask-hover" maskContentUnits="objectBoundingBox">
|
||||
<svg:rect x="0" y="0" width="1" height="1" fill="white"/>
|
||||
<svg:circle cx="-0.35" cy="0.5" r="0.58"/>
|
||||
<svg:circle cx="-0.34" cy="0.5" r="0.61"/>
|
||||
</svg:mask>
|
||||
<svg:mask id="winstripe-urlbar-back-button-mask" maskContentUnits="userSpaceOnUse">
|
||||
<svg:rect x="0" y="0" width="10000" height="50" fill="white"/>
|
||||
|
||||
@ -686,17 +686,22 @@ menuitem.bookmark-item {
|
||||
@navbarLargeIcons@ .toolbarbutton-1 {
|
||||
-moz-appearance: none;
|
||||
padding: 1px 5px;
|
||||
background: rgba(151,152,153,.05)
|
||||
-moz-linear-gradient(rgba(251,252,253,.95), rgba(246,247,248,.47) 49%,
|
||||
rgba(231,232,233,.45) 51%, rgba(225,226,229,.3));
|
||||
background-clip: padding-box;
|
||||
background: hsla(210,48%,90%,.1)
|
||||
-moz-linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.45) 49%,
|
||||
rgba(255,255,255,.35) 51%, rgba(255,255,255,.1))
|
||||
padding-box;
|
||||
border-radius: 2.5px;
|
||||
border: 1px solid;
|
||||
border-color: rgba(0,0,0,.12) rgba(0,0,0,.19) rgba(0,0,0,.38);
|
||||
box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
|
||||
0 0 0 2px rgba(255,255,255,.1) inset;
|
||||
border-color: hsla(210,54%,20%,.13) hsla(210,54%,20%,.16) hsla(210,54%,20%,.2);
|
||||
box-shadow: 0 1px 0 rgba(255,255,255,.3) inset,
|
||||
0 0 0 1px rgba(255,255,255,.3) inset,
|
||||
0 1px 0 hsla(210,54%,20%,.02),
|
||||
/* allows winstripe-keyhole-forward-mask to be used for non-hover as well as hover: */
|
||||
0 0 2px hsla(210,54%,20%,0);
|
||||
color: black;
|
||||
text-shadow: 0 0 2px white;
|
||||
-moz-transition-property: background-color, border-color, box-shadow;
|
||||
-moz-transition-duration: 250ms;
|
||||
}
|
||||
|
||||
@navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
|
||||
@ -755,16 +760,13 @@ menuitem.bookmark-item {
|
||||
|
||||
@navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled="true"]):not(:active):hover,
|
||||
@navbarLargeIcons@ .toolbarbutton-1:not([open="true"]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]),
|
||||
@navbarLargeIcons@ .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):not([checked="true"]):not([open="true"]):not(:active):hover,
|
||||
@navbarLargeIcons@ #back-button:not([disabled="true"]):not([open]):not(:active):hover > .toolbarbutton-icon {
|
||||
background-color: hsla(190,60%,70%,.5);
|
||||
border-color: hsla(190,50%,65%,.8) hsla(190,50%,50%,.8) hsla(190,50%,40%,.8);
|
||||
box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
|
||||
0 0 0 1.5px rgba(255,255,255,.1) inset,
|
||||
0 0 3.5px hsl(190,90%,80%);
|
||||
-moz-transition: background-color .4s ease-in,
|
||||
border-color .3s ease-in,
|
||||
box-shadow .3s ease-in;
|
||||
@navbarLargeIcons@ .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):not([checked="true"]):not([open="true"]):not(:active):hover {
|
||||
background-color: hsla(210,48%,96%,.75);
|
||||
border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4);
|
||||
box-shadow: 0 1px 0 rgba(255,255,255,.3) inset,
|
||||
0 0 0 1px rgba(255,255,255,.3) inset,
|
||||
0 1px 0 hsla(210,54%,20%,.03),
|
||||
0 0 2px hsla(210,54%,20%,.1);
|
||||
}
|
||||
|
||||
@navbarLargeIcons@ .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled="true"]):hover:active,
|
||||
@ -773,12 +775,15 @@ menuitem.bookmark-item {
|
||||
@navbarLargeIcons@ .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):hover:active,
|
||||
@navbarLargeIcons@ .toolbarbutton-1:not([type="menu-button"])[checked="true"],
|
||||
@navbarLargeIcons@ .toolbarbutton-1[open="true"] {
|
||||
background-color: transparent;
|
||||
border-color: rgba(0,0,0,.65) rgba(0,0,0,.55) rgba(0,0,0,.5);
|
||||
box-shadow: 0 0 6.5px rgba(0,0,0,.4) inset,
|
||||
0 0 2px rgba(0,0,0,.4) inset,
|
||||
0 1px 0 rgba(255,255,255,.4);
|
||||
background-color: hsla(210,54%,20%,.2);
|
||||
border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4);
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.1) inset,
|
||||
0 0 2px rgba(0,0,0,.3) inset,
|
||||
/* allows winstripe-keyhole-forward-mask to be used for non-hover as well as hover: */
|
||||
0 1px 0 hsla(210,54%,20%,0),
|
||||
0 0 2px hsla(210,54%,20%,0);
|
||||
text-shadow: none;
|
||||
-moz-transition: none;
|
||||
}
|
||||
|
||||
@navbarLargeIcons@ .toolbarbutton-1[checked="true"]:not(:active):hover {
|
||||
@ -904,28 +909,33 @@ toolbar[mode="full"] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
|
||||
border-radius: 10000px;
|
||||
padding: 5px;
|
||||
border: none;
|
||||
background-image: -moz-linear-gradient(rgba(251,252,253,.97), rgba(246,247,248,.5) 49%,
|
||||
rgba(231,232,233,.45) 51%, rgba(225,226,229,.2));
|
||||
box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
|
||||
0 0 0 2px rgba(255,255,255,.1) inset,
|
||||
0 0 0 1px rgba(0,0,0,.15),
|
||||
0 1px 0 rgba(0,0,0,.4);
|
||||
background: hsla(210,48%,90%,.1)
|
||||
-moz-linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.45) 49%,
|
||||
rgba(255,255,255,.35) 51%, rgba(255,255,255,.67));
|
||||
box-shadow: 0 1px 0 rgba(255,255,255,.3) inset,
|
||||
0 0 0 1px rgba(255,255,255,.3) inset,
|
||||
0 1px 0 hsla(210,54%,20%,.02),
|
||||
0 0 0 1px rgba(0,0,0,.15);
|
||||
-moz-transition-property: background-color, box-shadow;
|
||||
-moz-transition-duration: 250ms;
|
||||
}
|
||||
|
||||
@navbarLargeIcons@ #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
|
||||
box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
|
||||
0 0 0 2px rgba(255,255,255,.1) inset,
|
||||
0 0 0 1px hsla(190,50%,40%,.3),
|
||||
0 1px 0 rgba(0,0,0,.4),
|
||||
0 0 5px 1px hsl(190,90%,80%);
|
||||
background-color: hsla(210,48%,96%,.75);
|
||||
box-shadow: 0 1px 0 rgba(255,255,255,.3) inset,
|
||||
0 0 0 1px rgba(255,255,255,.1) inset,
|
||||
0 1px 0 hsla(210,54%,20%,.03),
|
||||
0 0 0 1px rgba(0,0,0,.2),
|
||||
0 0 2px 1px hsla(210,54%,20%,.2);
|
||||
}
|
||||
|
||||
@navbarLargeIcons@ #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
|
||||
@navbarLargeIcons@ #back-button[open="true"] > .toolbarbutton-icon {
|
||||
box-shadow: 0 0 6.5px rgba(0,0,0,.4) inset,
|
||||
0 0 2px rgba(0,0,0,.4) inset,
|
||||
0 0 0 1px rgba(0,0,0,.65),
|
||||
0 2px 0 rgba(255,255,255,.4);
|
||||
background-color: hsla(210,54%,20%,.2);
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.1) inset,
|
||||
0 0 2px rgba(0,0,0,.3) inset,
|
||||
0 0 0 1px rgba(0,0,0,.2);
|
||||
-moz-transition: none;
|
||||
}
|
||||
|
||||
@navbarLargeIcons@[currentset*="unified-back-forward-button"],
|
||||
@ -947,13 +957,6 @@ toolbar[mode="full"] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
@navbarLargeIcons@ #forward-button:not([disabled="true"]):not(:active):hover {
|
||||
/*mask: url(keyhole-forward-mask.svg#mask-hover);*/
|
||||
mask: url(chrome://browser/content/browser.xul#winstripe-keyhole-forward-mask-hover);
|
||||
/* Don't animate the box shadow, as the blur and spread radii affect the mask. */
|
||||
-moz-transition: background-color .4s ease-in;
|
||||
}
|
||||
|
||||
.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
|
||||
.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
|
||||
list-style-image: url("chrome://browser/skin/menu-back.png") !important;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user