theme: Adjust CSS for RTL locales

Use :ltr/:rtl pseudo selectors where the CSS depends on the locale's
text direction.

https://bugzilla.gnome.org/show_bug.cgi?id=643835

data/Makefile.am

@@ -26,7 +26,8 @@ dist_theme_DATA =				\
 	theme/close.svg				\
 	theme/corner-ripple.png			\
 	theme/dash-placeholder.svg		\
-	theme/filter-selected.svg		\
+	theme/filter-selected-ltr.svg		\
+	theme/filter-selected-rtl.svg		\
 	theme/gnome-shell.css			\
 	theme/mosaic-view-active.svg		\
 	theme/mosaic-view.svg			\

data/theme/filter-selected-rtl.svg

@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="10"
+   height="20"
+   id="svg10003"
+   version="1.1"
+   inkscape:version="0.48.1 r9760"
+   sodipodi:docname="filter-selected-ltr.svg">
+  <defs
+     id="defs10005">
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="0 : 32 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="64 : 32 : 1"
+       inkscape:persp3d-origin="32 : 21.333333 : 1"
+       id="perspective10011" />
+    <inkscape:perspective
+       id="perspective9998"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.5"
+     inkscape:cx="32.363636"
+     inkscape:cy="10.181818"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:document-units="px"
+     inkscape:grid-bbox="true"
+     inkscape:window-width="1440"
+     inkscape:window-height="839"
+     inkscape:window-x="0"
+     inkscape:window-y="26"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata10008">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     transform="translate(0,-44)">
+    <path
+       inkscape:export-ydpi="90"
+       inkscape:export-xdpi="90"
+       inkscape:export-filename="/home/jimmac/src/cvs/gnome/gnome-shell-design/mockups/app-picker.png"
+       sodipodi:nodetypes="cccc"
+       inkscape:connector-curvature="0"
+       id="rect34320"
+       d="m 10.369085,54.181804 -10.55634072,10.55636 -1e-5,-21.11269 z"
+       style="opacity:0.21000001;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.99999988;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+  </g>
+</svg>

data/theme/gnome-shell.css

@@ -195,21 +195,19 @@ StTooltip StLabel {
     font-weight: bold;
 }
 
-#panelLeft {
+#panelLeft:ltr {
     padding-right: 4px;
 }
 
 #panelLeft:rtl {
-    padding-right: 0px;
     padding-left: 4px;
 }
 
-#panelRight {
+#panelRight:ltr {
     padding-left: 4px;
 }
 
 #panelRight:rtl {
-    padding-left: 0px;
     padding-right: 4px;
 }
 
@@ -297,6 +295,11 @@ StTooltip StLabel {
     padding-left: 14px;
 }
 
+#legacyTray:rtl {
+    padding-left: 0px;
+    padding-right: 14px;
+}
+
 #legacyTray:compact {
     spacing: 8px;
 }
@@ -360,6 +363,10 @@ StTooltip StLabel {
     -shell-close-overlap: 16px;
 }
 
+.window-close:rtl {
+    -st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5);
+}
+
 /* Dash */
 
 #dash {
@@ -473,10 +480,15 @@ StTooltip StLabel {
 }
 
 #searchResultsContent {
-    padding: 0 20px 0 0;
+    padding-right: 20px;
     spacing: 36px;
 }
 
+#searchResultsContent:rtl {
+    padding-right: 0px;
+    padding-left: 20px;
+}
+
 .search-statustext,
 .search-section-header {
     padding: 4px 12px;
@@ -541,6 +553,11 @@ StTooltip StLabel {
     spacing: 20px;
 }
 
+.all-app:rtl {
+    padding-right: 16px;
+    padding-left: 25px;
+}
+
 .app-filter {
     font-size: 14px;
     font-weight: bold;
@@ -551,10 +568,15 @@ StTooltip StLabel {
 
 .app-filter:selected {
     color: #ffffff;
-    background-image: url("filter-selected.svg");
+    background-image: url("filter-selected-ltr.svg");
     background-position: 190px 10px;
 }
 
+.app-filter:selected:rtl {
+    background-image: url("filter-selected-rtl.svg");
+    background-position: 10px 10px;
+}
+
 .dash-item-container > .app-well-app {
     padding: 4px 8px;
 }
@@ -765,6 +787,11 @@ StTooltip StLabel {
     background-image: url("calendar-arrow-left.svg");
     border-radius: 4px;
 }
+
+.calendar-change-month-back:rtl {
+    background-image: url("calendar-arrow-right.svg");
+}
+
 .calendar-change-month-back:hover {
     background-color: #999999;
 }
@@ -778,6 +805,11 @@ StTooltip StLabel {
     background-image: url("calendar-arrow-right.svg");
     border-radius: 4px;
 }
+
+.calendar-change-month-forward:rtl {
+    background-image: url("calendar-arrow-left.svg");
+}
+
 .calendar-change-month-forward:hover {
     background-color: #999999;
 }
@@ -872,18 +904,31 @@ StTooltip StLabel {
     padding-left: 0.3em;
 }
 
+.events-day-header:rtl {
+    padding-left: 0em;
+    padding-right: 0.3em;
+}
+
 .events-day-dayname {
     font-size: 12px;
     color: rgba(153, 153, 153, 1.0);
     text-align: left;
 }
 
+.events-day-dayname:rtl {
+    text-align: right;
+}
+
 .events-day-time {
     font-size: 12px;
     color: #fff;
     text-align: right;
 }
 
+.events-day-time:rtl {
+    text-align: left;
+}
+
 .events-day-task {
     font-size: 12px;
     color: rgba(153, 153, 153, 1.0);
@@ -898,6 +943,11 @@ StTooltip StLabel {
     padding-right: 8px;
 }
 
+.events-time-box:rtl {
+    padding-right: 0px;
+    padding-left: 8px;
+}
+
 .events-event-box {
 }
 
@@ -951,10 +1001,14 @@ StTooltip StLabel {
     height: 1em;
 }
 
-#notification-scrollview > StScrollBar {
+#notification-scrollview:ltr > StScrollBar {
     padding-left: 6px;
 }
 
+#notification-scrollview:rtl > StScrollBar {
+    padding-right: 6px;
+}
+
 #notification-body {
     spacing: 5px;
 }
@@ -1014,6 +1068,11 @@ StTooltip StLabel {
     border-radius: 4px;
 }
 
+.chat-received:rtl {
+    padding-left: 0px;
+    padding-right: 4px;
+}
+
 .chat-sent {
     background-gradient-direction: horizontal;
     background-gradient-start: rgba(255, 255, 255, 0);
@@ -1023,6 +1082,11 @@ StTooltip StLabel {
     border-radius: 4px;
 }
 
+.chat-sent:rtl {
+    padding-left: 0px;
+    padding-right: 4px;
+}
+
 .chat-meta-message {
     padding-left: 4px;
     border-radius: 4px;
@@ -1030,6 +1094,11 @@ StTooltip StLabel {
     color: #bbbbbb;
 }
 
+.chat-meta-message:rtl {
+    padding-left: 0px;
+    padding-right: 4px;
+}
+
 #notification StEntry {
     padding: 4px;
     border-radius: 4px;
@@ -1066,21 +1135,39 @@ StTooltip StLabel {
     height: 36px;
 }
 
-.summary-source-button {
+#summary-mode:rtl {
+    padding: 2px 4px 0px 0px;
+}
+
+.summary-source-button:ltr {
     padding-left: 4px;
     padding-right: 16px;
 }
 
-.summary-source-button:last-child {
+.summary-source-button:rtl {
+    padding-right: 4px;
+    padding-left: 16px;
+}
+
+.summary-source-button:last-child:ltr {
     padding-right: 12px;
 }
 
+.summary-source-button:last-child:rtl {
+    padding-left: 12px;
+}
+
 .source-title {
     font-size: 12px;
     font-weight: bold;
     padding-left: 4px;
 }
 
+.source-title:rtl {
+    padding-left: 0px;
+    padding-right: 4px;
+}
+
 /* App Switcher */
 #altTabPopup {
     padding: 8px;
@@ -1302,6 +1389,11 @@ StTooltip StLabel {
     padding-bottom: 30px;
 }
 
+.end-session-dialog-subject:rtl {
+    padding-left: 0px;
+    padding-right: 17px;
+}
+
 .end-session-dialog-description {
     font-size: 10pt;
     color: white;
@@ -1310,6 +1402,11 @@ StTooltip StLabel {
     width: 16em;
 }
 
+.end-session-dialog-description:rtl {
+    padding-right: 17px;
+    padding-left: 40px;
+}
+
 .end-session-dialog-logout-icon {
     border: 2px solid #8b8b8b;
     border-radius: 5px;
@@ -1331,14 +1428,27 @@ StTooltip StLabel {
     padding-right: 32px;
 }
 
-.end-session-dialog-app-list-item {
+.end-session-dialog-app-list:rtl {
+    padding-right: 17px;
+    padding-left: 32px;
+}
+
+.end-session-dialog-app-list-item:ltr {
     padding-right: 1em;
 }
 
-.end-session-dialog-app-list-item-icon {
+.end-session-dialog-app-list-item:rtl {
+    padding-left: 1em;
+}
+
+.end-session-dialog-app-list-item-icon:ltr {
     padding-right: 17px;
 }
 
+.end-session-dialog-app-list-item-icon:rtl {
+    padding-left: 17px;
+}
+
 .end-session-dialog-app-list-item-name {
     font-size: 10pt;
 }
@@ -1379,10 +1489,19 @@ StTooltip StLabel {
     spacing: 10px;
 }
 
-.polkit-dialog-password-label {
+.polkit-dialog-user-layout:rtl {
+    padding-left: 0px;
+    padding-right: 10px;
+}
+
+.polkit-dialog-password-label:ltr {
     padding-right: 0.5em;
 }
 
+.polkit-dialog-password-label:rtl {
+    padding-left: 0.5em;
+}
+
 .polkit-dialog-password-entry {
     background-color: white;
     color: black;