author | Ehsan Akhgari <ehsan@mozilla.com> |
Mon, 08 Nov 2010 01:38:24 -0500 | |
changeset 57454 | 51bcf78f8c5901eefe001f41921c976f3bc05502 |
parent 57453 | a1803da455615c0c730ab0e1c6b8cabbeca3ff9b |
child 57455 | e902872c33b08353285455fcec134b0f0450bce8 |
push id | 16934 |
push user | eakhgari@mozilla.com |
push date | Sat, 13 Nov 2010 22:50:22 +0000 |
treeherder | mozilla-central@674f2ed15cea [default view] [failures only] |
perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
reviewers | dao, blocking-betaN |
bugs | 587248 |
milestone | 2.0b8pre |
first release with | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
last release without | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
browser/themes/gnomestripe/browser/tabview/tabview.css | file | annotate | diff | comparison | revisions |
--- a/browser/themes/gnomestripe/browser/tabview/tabview.css +++ b/browser/themes/gnomestripe/browser/tabview/tabview.css @@ -8,81 +8,122 @@ body { #bg { background: -moz-linear-gradient(top,#C4C4C4,#9E9E9E); } /* Tabs ----------------------------------*/ .tab { - padding: 4px 6px 6px 4px; + padding-top: 4px; + -moz-padding-end: 6px; + padding-bottom: 6px; + -moz-padding-start: 4px; background-color: #D7D7D7; border-radius: 0.4em; 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 1.5px rgba(0, 0, 0, 0.4); cursor: pointer; margin: 4px; } +html[dir=rtl] .tab { + 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 1.5px rgba(0, 0, 0, 0.4); +} + .tab canvas, .cached-thumb { border: 1px solid rgba(0,0,0,0.2); } .thumb { box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2); background-color: white; } +html[dir=rtl] .thumb { + box-shadow: -1px 2px 0 rgba(0, 0, 0, 0.2); +} + .favicon { background-color: #D7D7D7; - border-bottom-right-radius: 0.4em; box-shadow: 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; + padding-top: 4px; + -moz-padding-end: 6px; + padding-bottom: 6px; + -moz-padding-start: 4px; top: 4px; left: 4px; - border-right: 1px solid rgba(0, 0, 0, 0.3); + -moz-border-end: 1px solid rgba(0, 0, 0, 0.3); border-bottom: 1px solid rgba(0, 0, 0, 0.3); height: 16px; width: 16px; } +html[dir=ltr] .favicon { + border-bottom-right-radius: 0.4em; +} + +html[dir=rtl] .favicon { + border-bottom-left-radius: 0.4em; + box-shadow: + 0 -1px 0 rgba(225, 225, 225, 0.8) inset, + 1px 0 0 rgba(225, 225, 225, 0.8) inset; + left: auto; + right: 2px; +} + .favicon img { border: none; width: 16px; height: 16px; } .close { top: 6px; right: 6px; width: 16px; height: 16px; opacity: 0.2; background: url("moz-icon://stock/gtk-close?size=menu") no-repeat; } +html[dir=rtl] .close { + right: auto; + left: 6px; +} + .close:hover { opacity: 1.0; } .expander { bottom: 8px; right: 6px; width: 16px; height: 16px; background: url(chrome://global/skin/icons/resizer.png) no-repeat; opacity: 0.2; } +html[dir=rtl] .expander { + right: auto; + left: 6px; + -moz-transform: scaleX(-1); +} + .expander:hover { opacity: 1.0; } .close:hover, .expander:hover { -moz-transition-property: opacity; -moz-transition-duration: 0.5s; @@ -107,22 +148,30 @@ body { .stacked { padding: 0; } .stacked .thumb { box-shadow: rgba(0,0,0,.2) 1px 1px 4px; } +html[dir=rtl] .stacked .thumb { + box-shadow: rgba(0,0,0,.2) -1px 1px 4px; +} + .stack-trayed .tab-title { text-shadow: rgba(0,0,0,1) 1px 1px 1.5px; color: #EEE; font-size: 11px; } +html[dir=rtl] .stack-trayed .tab-title { + text-shadow: rgba(0,0,0,1) -1px 1px 1.5px; +} + .stack-trayed .thumb { box-shadow: none !important; } .focus { box-shadow: rgba(54,79,225,1) 0px 0px 3.5px -1px !important; } @@ -154,42 +203,56 @@ body { border: 1px solid rgba(230,230,230,1); background-color: rgba(248,248,248,1); border-radius: 0.4em; box-shadow: inset rgba(255, 255, 255, 0.6) 0 0 0 2px, rgba(0,0,0,0.2) 1px 1px 3px; } +html[dir=rtl] .groupItem { + box-shadow: + inset rgba(255, 255, 255, 0.6) 0 0 0 2px, + rgba(0,0,0,0.2) -1px 1px 3px; +} + .groupItem.activeGroupItem { box-shadow: rgba(0,0,0,0.6) 1px 1px 5.5px; } +html[dir=rtl] .groupItem.activeGroupItem { + box-shadow: + rgba(0,0,0,0.6) -1px 1px 5.5px; +} + .phantom { border: 1px solid rgba(190,190,190,1); } .overlay { background-color: rgba(0,0,0,.7) !important; box-shadow: 3px 3px 5.5px rgba(0,0,0,.5); border-radius: 0.4em; - /* - border: 1px solid rgba(230,230,230,1); - background-color: rgba(248,248,248,1); - box-shadow: - rgba(0,0,0, .3) 2px 2px 5.5px, - inset rgba(255, 255, 255, 0.6) 0 0 0 2px; */ +} + +html[dir=rtl] .overlay { + box-shadow: -3px 3px 5.5px rgba(0,0,0,.5); } .appTabTray { top: 34px; right: 1px; } +html[dir=rtl] .appTabTray { + right: auto; + left: 1px; +} + .appTabIcon { width: 16px; height: 16px; cursor: pointer; } .undo { background-color: #A0A0A0; @@ -210,16 +273,21 @@ body { } .undo .close { top: 4px; left: 4px; opacity: 0.5; } +html[dir=rtl] .undo .close { + left: auto; + right: 4px; +} + .undo .close:hover{ opacity: 1.0; } /* InfoItems ----------------------------------*/ @@ -228,28 +296,38 @@ body { border: 1px solid rgba(230,230,230,1); background-color: rgba(248,248,248,1); border-radius: 0.4em; box-shadow: inset rgba(255, 255, 255, 0.6) 0 0 0 2px, rgba(0,0,0, .2) 1px 1px 3px; } +html[dir=rtl] .info-item { + box-shadow: + inset rgba(255, 255, 255, 0.6) 0 0 0 2px, + rgba(0,0,0, .2) -1px 1px 3px; +} + .intro { margin: 10px; } /* Trenches ----------------------------------*/ .guideTrench { opacity: 0.9; border: 1px dashed rgba(0,0,0,.12); border-bottom: none; - border-right: none; + -moz-border-end: none; + box-shadow: 1px 1px 0 rgba(255,255,255,.15); +} + +html[dir=rtl] .guideTrench { box-shadow: 1px 1px 0 rgba(255,255,255,.15); } .visibleTrench { opacity: 0.05; } .activeVisibleTrench { @@ -278,42 +356,62 @@ body { height: 15px; bottom: 10px; left: 10px; cursor: pointer; opacity: .3; background-image: url(chrome://browser/skin/tabview/new-tab.png); } +html[dir=rtl] .newTabButton { + left: auto; + right: 10px; +} + .newTabButton:hover { opacity: 1; } .active { box-shadow: 5px 5px 3px rgba(0,0,0,.5); } +html[dir=rtl] .active { + box-shadow: -5px 5px 3px rgba(0,0,0,.5); +} + .acceptsDrop { box-shadow: 2px 2px 7px -1px rgba(0,0,0,.6); } +html[dir=rtl] .acceptsDrop { + box-shadow: -2px 2px 7px -1px rgba(0,0,0,.6); +} + .titlebar { font-size: 12px; line-height: 18px; height: 18px; } input.name { background: transparent; border: 1px solid transparent; color: #999; - margin: 3px 0px 0px 3px; + margin-top: 3px; + -moz-margin-end: 0; + margin-bottom: 0; + -moz-margin-start: 3px; padding: 1px; background-image: url(chrome://browser/skin/tabview/edit-light.png); - padding-left: 20px; + -moz-padding-start: 20px; +} + +html[dir=rtl] input.name { + background-position: right top; } .title-container:hover input.name { border: 1px solid #ddd; } .title-container:hover input.name-locked { border: 1px solid transparent !important; @@ -334,24 +432,32 @@ input.defaultName { color: #CCC; } .title-container { cursor: text; } .title-shield { - margin: 3px 0px 0px 3px; + margin-top: 3px; + -moz-margin-end: 0; + margin-bottom: 0; + -moz-margin-start: 3px; padding: 1px; left: 0; top: 0; width: 100%; height: 100%; } +html[dir=rtl] .title-shield { + left: auto; + right: 0; +} + .transparentBorder { border: 1px solid transparent !important; } .stackExpander { opacity: .4; cursor: pointer; background-image: url(chrome://browser/skin/tabview/stack-expander.png); @@ -369,43 +475,61 @@ input.defaultName { background-image: url(chrome://global/skin/icons/resizer.png); width: 16px; height: 16px; bottom: 0px; right: 0px; opacity: .2; } +html[dir=rtl] .resizer { + right: auto; + left: 0; + -moz-transform: scaleX(-1); +} + .iq-resizable-handle { font-size: 0.1px; } .iq-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } +html[dir=rtl] .iq-resizable-se { + cursor: sw-resize; + right: auto; + left: 1px; +} + /* Exit button +----------------------------------*/ #exit-button { cursor: default; top: 0; right: 0; width: 28px; height: 27px; background: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 16, 16, 0) no-repeat scroll 7px 7px #b7b7b7; border-bottom: 1px solid #909090; - border-left: 1px solid #B7B7B7; + -moz-border-start: 1px solid #B7B7B7; border-top: 1px solid #CFCFCF; border-radius: 3px 0 0 3px; } +html[dir=rtl] #exit-button { + right: auto; + left: 0; + border-radius: 0 3px 3px 0; +} + /* Search ----------------------------------*/ #search{ background-color: rgba(0,0,0,.42); width: 100%; height: 100%; } @@ -413,32 +537,42 @@ input.defaultName { #searchbox{ width: 270px; height: 30px; box-shadow: 0px 1px 0px rgba(255,255,255,.5), 0px -1px 0px rgba(0,0,0,1), 0px 0px 9px rgba(0,0,0,.8); color: white; border: none; background-color: #272727; border-radius: 0.4em; - padding-left:5px; padding-right: 5px; + -moz-padding-start: 5px; + -moz-padding-end: 5px; font-size: 14px; } #actions{ width: 30px; height: 30px; background-color: #666; border: none; - border-bottom-left-radius: 0.4em; - border-top-left-radius: 0.4em; box-shadow: 0px 1px 0px rgba(255,255,255,.5), 0px -1px 0px rgba(0,0,0,.8), inset 6px 6px 9px rgba(0,0,0,.56); opacity: .64; text-align: center; } +html[dir=ltr] #actions { + border-bottom-left-radius: 0.4em; + border-top-left-radius: 0.4em; +} + +html[dir=rtl] #actions { + border-bottom-right-radius: 0.4em; + border-top-right-radius: 0.4em; + box-shadow: 0px 1px 0px rgba(255,255,255,.5), 0px -1px 0px rgba(0,0,0,.8), inset -6px 6px 9px rgba(0,0,0,.56); +} + #actions #searchbutton{ background: transparent url(chrome://browser/skin/tabview/search.png) no-repeat; border: none; width: 20px; height: 20px; margin-top:5px; opacity: .8; } @@ -455,41 +589,46 @@ input.defaultName { left: 0px; bottom: 0px; width: 100%; height: 30px; background-color: rgba(0,0,0,.3); box-shadow: 0px -1px 0px rgba(255,255,255,.1), inset 0px 2px 5px rgba(0,0,0,.3); } +html[dir=rtl] #otherresults { + left: auto; + right: 0; +} + #otherresults .label { color: #999; line-height: 30px; - margin-left: 5px; - margin-right: 5px; + -moz-margin-start: 5px; + -moz-margin-end: 5px; } .inlineMatch { background-color: #EBEBEB; border-radius: 0.4em; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.5); - padding-left: 3px; - padding-right: 3px; + -moz-padding-start: 3px; + -moz-padding-end: 3px; height: 20px; - margin-right: 5px; + -moz-margin-end: 5px; cursor: pointer; } .inlineMatch:hover { opacity: 1.0; } .inlineMatch > img { - margin-right: 5px; + -moz-margin-end: 5px; position: relative; top: 2px; } .inlineMatch > span { max-width: 200px; height: 15px; }