mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-12 12:55:46 +00:00
Bug 590742 - Incorporate new CSS for Tab Candy appearance polish [r+a=dietrich]
This commit is contained in:
Michael Yoshitaka Erlewine
parent
b6710672ce
commit
92cc84ffa8
@ -59,7 +59,7 @@ function TabItem(tab) {
|
||||
// ___ set up div
|
||||
var $div = iQ('<div>')
|
||||
.addClass('tab')
|
||||
.html("<div class='thumb'><div class='thumb-shadow'></div>" +
|
||||
.html("<div class='thumb'>" +
|
||||
"<img class='cached-thumb' style='display:none'/><canvas/></div>" +
|
||||
"<div class='favicon'><img/></div>" +
|
||||
"<span class='tab-title'> </span>"
|
||||
@ -489,17 +489,14 @@ TabItem.prototype = Utils.extend(new Item(), new Subscribable(), {
|
||||
// Function: makeActive
|
||||
// Updates this item to visually indicate that it's active.
|
||||
makeActive: function TabItem_makeActive() {
|
||||
iQ(this.container).find("canvas").addClass("focus");
|
||||
iQ(this.container).find("img.cached-thumb").addClass("focus");
|
||||
|
||||
iQ(this.container).addClass("focus");
|
||||
},
|
||||
|
||||
// ----------
|
||||
// Function: makeDeactive
|
||||
// Updates this item to visually indicate that it's not active.
|
||||
makeDeactive: function TabItem_makeDeactive() {
|
||||
iQ(this.container).find("canvas").removeClass("focus");
|
||||
iQ(this.container).find("img.cached-thumb").removeClass("focus");
|
||||
iQ(this.container).removeClass("focus");
|
||||
},
|
||||
|
||||
// ----------
|
||||
|
||||
@ -52,10 +52,6 @@ body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.thumb-shadow {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.favicon {
|
||||
position: absolute;
|
||||
}
|
||||
@ -73,8 +69,7 @@ body {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.stacked .tab-title,
|
||||
.stacked .thumb-shadow {
|
||||
.stacked .tab-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
*/
|
||||
|
||||
body {
|
||||
background-color: transparent;
|
||||
font-family: Tahoma, sans-serif !important;
|
||||
color: rgba(0,0,0,0.4);
|
||||
font-size: 12px;
|
||||
@ -19,10 +18,13 @@ body {
|
||||
|
||||
.tab {
|
||||
padding: 4px 6px 6px 4px;
|
||||
border: 1px solid rgba(230,230,230,1);
|
||||
background-color: rgba(245,245,245,1);
|
||||
background-color: #D7D7D7;
|
||||
-moz-border-radius: 0.4em;
|
||||
-moz-box-shadow: inset rgba(255, 255, 255, 0.6) 0 0 0 2px;
|
||||
-moz-box-shadow: 0 1px 0 #FFFFFF inset,
|
||||
0 -1px 1px rgba(255, 255, 255, 0.4) inset,
|
||||
1px 0 1px rgba(255, 255, 255, 0.4) inset,
|
||||
-1px 0 1px rgba(255, 255, 255, 0.4) inset,
|
||||
0 1px 2px rgba(0, 0, 0, 0.4);
|
||||
cursor: pointer;
|
||||
margin: 4px;
|
||||
}
|
||||
@ -32,26 +34,23 @@ body {
|
||||
border: 1px solid rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.thumb-shadow {
|
||||
border-bottom: 5px solid rgba(0,0,0,0.05);
|
||||
margin-right: -12px;
|
||||
bottom: 2px;
|
||||
width: 94.5%;
|
||||
.thumb {
|
||||
-moz-box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.favicon {
|
||||
background-color: rgba(245,245,245,1);
|
||||
background-color: #D7D7D7;
|
||||
-moz-border-radius-bottomright: 0.4em;
|
||||
-moz-box-shadow:
|
||||
inset rgba(255, 255, 255, 0.6) 0 -2px 0px,
|
||||
inset rgba(255, 255, 255, 0.6) -2px 0px 0px;
|
||||
0 -1px 0 rgba(225, 225, 225, 0.8) inset,
|
||||
-1px 0 0 rgba(225, 225, 225, 0.8) inset;
|
||||
padding: 4px 6px 6px 4px;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
border-right: 1px solid rgba(0,0,0,0.2);
|
||||
border-bottom: 1px solid rgba(0,0,0,0.2);
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.favicon img {
|
||||
@ -74,7 +73,7 @@ body {
|
||||
}
|
||||
|
||||
.expander {
|
||||
bottom: 6px;
|
||||
bottom: 8px;
|
||||
right: 6px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
@ -86,6 +85,13 @@ body {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.expander:hover {
|
||||
-moz-transition-property: opacity;
|
||||
-moz-transition-duration: 0.5s;
|
||||
-moz-transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
.favicon img:hover,
|
||||
.close img:hover,
|
||||
.expander img:hover {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
body {
|
||||
background-color: transparent;
|
||||
font-family: Tahoma, sans-serif !important;
|
||||
color: rgba(0,0,0,0.4);
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
@ -19,39 +19,36 @@ body {
|
||||
|
||||
.tab {
|
||||
padding: 4px 6px 6px 4px;
|
||||
border: 1px solid rgba(230,230,230,1);
|
||||
background-color: rgba(245,245,245,1);
|
||||
background-color: #D7D7D7;
|
||||
-moz-border-radius: 0.4em;
|
||||
-moz-box-shadow: inset rgba(255, 255, 255, 0.6) 0 0 0 2px;
|
||||
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
cursor: pointer;
|
||||
margin: 4px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.tab canvas,
|
||||
.cached-thumb {
|
||||
border: 1px solid rgba(0,0,0,0.2);
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.thumb-shadow {
|
||||
border-bottom: 5px solid rgba(0,0,0,0.05);
|
||||
margin-right: -12px;
|
||||
bottom: 2px;
|
||||
width: 94.5%;
|
||||
.thumb {
|
||||
-moz-box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.favicon {
|
||||
background-color: rgba(245,245,245,1);
|
||||
background-color: #D7D7D7;
|
||||
-moz-border-radius-bottomright: 0.4em;
|
||||
-moz-box-shadow:
|
||||
inset rgba(255, 255, 255, 0.6) 0 -2px 0px,
|
||||
inset rgba(255, 255, 255, 0.6) -2px 0px 0px;
|
||||
0 -1px 0 rgba(225, 225, 225, 0.8) inset,
|
||||
-1px 0 0 rgba(225, 225, 225, 0.8) inset;
|
||||
padding: 4px 6px 6px 4px;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
border-right: 1px solid rgba(0,0,0,0.2);
|
||||
border-bottom: 1px solid rgba(0,0,0,0.2);
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.favicon img {
|
||||
@ -65,24 +62,30 @@ body {
|
||||
right: 6px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0.2;
|
||||
background: url(chrome://global/skin/icons/closetab.png) no-repeat;
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
opacity: 1.0;
|
||||
-moz-transition-property: opacity;
|
||||
-moz-transition-duration: 0.5s;
|
||||
-moz-transition-timing-function: ease-out;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.expander {
|
||||
bottom: 6px;
|
||||
bottom: 8px;
|
||||
right: 6px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: url(chrome://global/skin/icons/resizer.png) no-repeat;
|
||||
-moz-transition-property: opacity;
|
||||
-moz-transition-duration: 0.5s;
|
||||
-moz-transition-timing-function: ease-out;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.expander:hover {
|
||||
-moz-transition-property: opacity;
|
||||
-moz-transition-duration: 0.5s;
|
||||
-moz-transition-timing-function: ease-out;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
@ -94,11 +97,12 @@ body {
|
||||
}
|
||||
|
||||
.tab-title {
|
||||
top: 100%;
|
||||
bottom: -20px;
|
||||
text-align: center;
|
||||
width: 94.5%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.stacked {
|
||||
@ -119,8 +123,9 @@ body {
|
||||
-moz-box-shadow: none !important;
|
||||
}
|
||||
|
||||
.focus {
|
||||
-moz-box-shadow: rgba(54,79,225,1) 0px 0px 5px -1px !important;
|
||||
.tab.focus {
|
||||
-moz-box-shadow: 0 0 8px -moz-mac-menuselect/*#0060D6*/;
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
/* Tab: Zooming
|
||||
@ -134,26 +139,34 @@ body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.front .thumb {
|
||||
-moz-box-shadow: none !important;
|
||||
}
|
||||
|
||||
.front.focus {
|
||||
-moz-box-shadow: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Tab GroupItem
|
||||
----------------------------------*/
|
||||
|
||||
.tabInGroupItem {
|
||||
border: none;
|
||||
-moz-box-shadow: none !important;
|
||||
-moz-box-shadow: none;
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.tabInGroupItem .favicon {
|
||||
background-color: #EBEBEB;
|
||||
}
|
||||
|
||||
.groupItem {
|
||||
cursor: move;
|
||||
border: 1px solid rgba(230,230,230,1);
|
||||
background-color: rgba(248,248,248,1);
|
||||
background-color: #EBEBEB;
|
||||
-moz-border-radius: 0.4em;
|
||||
-moz-box-shadow:
|
||||
inset rgba(255, 255, 255, 0.6) 0 0 0 2px,
|
||||
rgba(0,0,0,0.2) 1px 1px 4px;
|
||||
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.groupItem.activeGroupItem {
|
||||
@ -162,7 +175,7 @@ body {
|
||||
}
|
||||
|
||||
.phantom {
|
||||
border: 1px solid rgba(190,190,190,1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.overlay {
|
||||
|
||||
BIN
browser/themes/winstripe/browser/tabview/grain.png
Normal file
BIN
browser/themes/winstripe/browser/tabview/grain.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
@ -3,15 +3,14 @@
|
||||
*/
|
||||
|
||||
body {
|
||||
background-color: transparent;
|
||||
font-family: Tahoma, sans-serif !important;
|
||||
color: rgba(0,0,0,0.4);
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
#bg {
|
||||
background: -moz-linear-gradient(top,#F1F5FB,#EDF4FB);
|
||||
background: url("chrome://browser/skin/tabview/grain.png") repeat scroll center top, -moz-linear-gradient(center top , #CCD9EA, #C7D5E7) repeat scroll 0 0 transparent;
|
||||
}
|
||||
|
||||
/* Tabs
|
||||
@ -19,37 +18,35 @@ body {
|
||||
|
||||
.tab {
|
||||
padding: 4px 6px 6px 4px;
|
||||
border: 1px solid rgba(230,230,230,1);
|
||||
background-color: rgba(245,245,245,1);
|
||||
background-color: #E0EAF5;
|
||||
-moz-border-radius: 0.4em;
|
||||
-moz-box-shadow: inset rgba(255, 255, 255, 0.6) 0 0 0 2px;
|
||||
-moz-box-shadow:
|
||||
0 1px 0 #FFFFFF inset,
|
||||
0 -1px 1px rgba(255, 255, 255, 0.8) inset,
|
||||
1px 0 1px rgba(255, 255, 255, 0.8) inset,
|
||||
-1px 0 1px rgba(255, 255, 255, 0.8) inset,
|
||||
0 1px 2px rgba(4, 38, 60, 0.4);
|
||||
cursor: pointer;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.tab canvas,
|
||||
.cached-thumb {
|
||||
border: 1px solid rgba(0,0,0,0.2);
|
||||
border: 1px solid rgba(73, 99, 119, 0.3);
|
||||
}
|
||||
|
||||
.thumb-shadow {
|
||||
border-bottom: 5px solid rgba(0,0,0,0.05);
|
||||
margin-right: -12px;
|
||||
bottom: 2px;
|
||||
width: 94.5%;
|
||||
.thumb {
|
||||
-moz-box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.favicon {
|
||||
background-color: rgba(245,245,245,1);
|
||||
background-color: #E0EAF5;
|
||||
-moz-border-radius-bottomright: 0.4em;
|
||||
-moz-box-shadow:
|
||||
inset rgba(255, 255, 255, 0.6) 0 -2px 0px,
|
||||
inset rgba(255, 255, 255, 0.6) -2px 0px 0px;
|
||||
padding: 4px 6px 6px 4px;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
border-right: 1px solid rgba(0,0,0,0.2);
|
||||
border-bottom: 1px solid rgba(0,0,0,0.2);
|
||||
border-right: 1px solid rgba(73, 99, 119, 0.3);
|
||||
border-bottom: 1px solid rgba(73, 99, 119, 0.3);
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
}
|
||||
@ -65,12 +62,11 @@ body {
|
||||
right: 6px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0.2;
|
||||
background: url(chrome://global/skin/icons/Close.gif) no-repeat;
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
opacity: 1.0;
|
||||
-moz-transition-property: opacity;
|
||||
-moz-transition-duration: 0.5s;
|
||||
-moz-transition-timing-function: ease-out;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.expander {
|
||||
@ -79,10 +75,17 @@ body {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: url(chrome://global/skin/icons/resizer.png) no-repeat;
|
||||
-moz-transition-property: opacity;
|
||||
-moz-transition-duration: 0.5s;
|
||||
-moz-transition-timing-function: ease-out;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.expander:hover {
|
||||
-moz-transition-property: opacity;
|
||||
-moz-transition-duration: 0.5s;
|
||||
-moz-transition-timing-function: ease-out;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
@ -94,11 +97,12 @@ body {
|
||||
}
|
||||
|
||||
.tab-title {
|
||||
top: 100%;
|
||||
bottom: -20px;
|
||||
text-align: center;
|
||||
width: 94.5%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.stacked {
|
||||
@ -119,8 +123,13 @@ body {
|
||||
-moz-box-shadow: none !important;
|
||||
}
|
||||
|
||||
.focus {
|
||||
-moz-box-shadow: rgba(54,79,225,1) 0px 0px 5px -1px !important;
|
||||
.tab.focus {
|
||||
-moz-box-shadow:
|
||||
0 1px 0 #FFFFFF inset,
|
||||
0 -1px 1px #FFFFFF inset,
|
||||
1px 0 1px #FFFFFF inset,
|
||||
-1px 0 1px #FFFFFF inset,
|
||||
0 0 8px #007ECE;
|
||||
}
|
||||
|
||||
/* Tab: Zooming
|
||||
@ -134,6 +143,10 @@ body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.front .thumb {
|
||||
-moz-box-shadow: none !important;
|
||||
}
|
||||
|
||||
.front.focus {
|
||||
-moz-box-shadow: none !important;
|
||||
}
|
||||
@ -142,18 +155,24 @@ body {
|
||||
----------------------------------*/
|
||||
|
||||
.tabInGroupItem {
|
||||
border: none;
|
||||
-moz-box-shadow: none !important;
|
||||
-moz-box-shadow: none;
|
||||
background-color: #E0EAF5;
|
||||
}
|
||||
|
||||
.tabInGroupItem .favicon {
|
||||
background-color: #E0EAF5;
|
||||
}
|
||||
|
||||
.groupItem {
|
||||
cursor: move;
|
||||
border: 1px solid rgba(230,230,230,1);
|
||||
background-color: rgba(248,248,248,1);
|
||||
background-color: #E0EAF5;
|
||||
-moz-border-radius: 0.4em;
|
||||
-moz-box-shadow:
|
||||
inset rgba(255, 255, 255, 0.6) 0 0 0 2px,
|
||||
rgba(0,0,0,0.2) 1px 1px 4px;
|
||||
0 1px 0 #FFFFFF inset,
|
||||
0 -1px 1px rgba(255, 255, 255, 0.8) inset,
|
||||
1px 0 1px rgba(255, 255, 255, 0.8) inset,
|
||||
-1px 0 1px rgba(255, 255, 255, 0.8) inset,
|
||||
0 1px 4px rgba(4, 38, 60, 0.6);
|
||||
}
|
||||
|
||||
.groupItem.activeGroupItem {
|
||||
@ -162,7 +181,6 @@ body {
|
||||
}
|
||||
|
||||
.phantom {
|
||||
border: 1px solid rgba(190,190,190,1);
|
||||
}
|
||||
|
||||
.overlay {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user