Bug 587248 - Part 4: Add RTL support to theme CSS for TabView on Windows; r=dao a=blocking-betaN+
authorEhsan Akhgari <ehsan@mozilla.com>
Mon, 08 Nov 2010 01:38:24 -0500
changeset 57453 a1803da455615c0c730ab0e1c6b8cabbeca3ff9b
parent 57452 52a7905f4cc48c3b6a70319368fb749688101bc4
child 57454 51bcf78f8c5901eefe001f41921c976f3bc05502
push id1
push usershaver@mozilla.com
push dateTue, 04 Jan 2011 17:58:04 +0000
reviewersdao, blocking-betaN
bugs587248
milestone2.0b8pre
Bug 587248 - Part 4: Add RTL support to theme CSS for TabView on Windows; r=dao a=blocking-betaN+
browser/themes/winstripe/browser/tabview/tabview.css
--- 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;
 }