author | Ehsan Akhgari <ehsan@mozilla.com> |
Mon, 08 Nov 2010 01:38:24 -0500 | |
changeset 57453 | a1803da455615c0c730ab0e1c6b8cabbeca3ff9b |
parent 57452 | 52a7905f4cc48c3b6a70319368fb749688101bc4 |
child 57454 | 51bcf78f8c5901eefe001f41921c976f3bc05502 |
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/winstripe/browser/tabview/tabview.css | file | annotate | diff | comparison | revisions |
--- a/browser/themes/winstripe/browser/tabview/tabview.css +++ b/browser/themes/winstripe/browser/tabview/tabview.css @@ -9,51 +9,79 @@ body { 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 ----------------------------------*/ .tab { - padding: 4px 6px 6px 4px; + padding-top: 4px; + -moz-padding-end: 6px; + padding-bottom: 6px; + -moz-padding-start: 4px; background-color: #E0EAF5; border-radius: 0.4em; 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 1.5px rgba(4, 38, 60, 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.8) inset, + -1px 0 1px rgba(255, 255, 255, 0.8) inset, + 1px 0 1px rgba(255, 255, 255, 0.8) inset, + 0 1px 1.5px rgba(4, 38, 60, 0.4); +} + .tab canvas, .cached-thumb { border: 1px solid rgba(73, 99, 119, 0.3); } .thumb { box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.1); background-color: white; } +html[dir=rtl] .thumb { + box-shadow: -1px 2px 0 rgba(0, 0, 0, 0.1); +} + .favicon { background-color: #E0EAF5; - border-bottom-right-radius: 0.4em; - 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(73, 99, 119, 0.3); + -moz-border-end: 1px solid rgba(73, 99, 119, 0.3); border-bottom: 1px solid rgba(73, 99, 119, 0.3); height: 17px; width: 17px; } +html[dir=ltr] .favicon { + border-bottom-right-radius: 0.4em; +} + +html[dir=rtl] .favicon { + border-bottom-left-radius: 0.4em; + left: auto; + right: 2px; +} + .favicon img { border: none; width: 16px; height: 16px; } .close { top: 6px; @@ -62,28 +90,39 @@ body { height: 16px; background: url(chrome://global/skin/icons/Close.gif) no-repeat; -moz-transition-property: opacity; -moz-transition-duration: 0.5s; -moz-transition-timing-function: ease-out; opacity: 0.2; } +html[dir=rtl] .close { + right: auto; + left: 6px; +} + .expander { bottom: 6px; 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; } +html[dir=rtl] .expander { + right: auto; + left: 6px; + -moz-transform: scaleX(-1); +} + .close:hover, .expander:hover { -moz-transition-property: opacity; -moz-transition-duration: 0.5s; -moz-transition-timing-function: ease-out; opacity: 1.0; } @@ -106,35 +145,52 @@ 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; } .tab.focus { box-shadow: 0 1px 0 #FFFFFF inset, 0 -1px 1px #FFFFFF inset, 1px 0 1px #FFFFFF inset, -1px 0 1px #FFFFFF inset, 0 0 5.5px #007ECE; } +html[dir=rtl] .tab.focus { + box-shadow: + 0 1px 0 #FFFFFF inset, + 0 -1px 1px #FFFFFF inset, + -1px 0 1px #FFFFFF inset, + 1px 0 1px #FFFFFF inset, + 0 0 5.5px #007ECE; +} + /* Tab: Zooming ----------------------------------*/ .front .tab-title, .front .close, .front .favicon, .front .expander, .front .thumb-shadow { @@ -168,41 +224,55 @@ body { 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 3px rgba(4, 38, 60, 0.6); } +html[dir=rtl] .groupItem { + 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 3px rgba(4, 38, 60, 0.6); +} + .groupItem.activeGroupItem { box-shadow: rgba(0,0,0,0.6) 1px 1px 5.5px; } -.phantom { +html[dir=rtl] .groupItem.activeGroupItem { + box-shadow: + rgba(0,0,0,0.6) -1px 1px 5.5px; } .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; @@ -223,16 +293,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 ----------------------------------*/ .info-item { @@ -240,31 +315,41 @@ 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; } +.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 { opacity: 0; } @@ -290,42 +375,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; @@ -346,24 +451,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); @@ -381,43 +494,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, 18, 18, 0) no-repeat scroll 4px 4px #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%; } @@ -425,32 +556,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: #CFDBE8; 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; } @@ -467,41 +608,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; }