diff --git a/media/css/zamboni/mobile.css b/media/css/zamboni/mobile.css index 689f8f04c83..9b9ec44394e 100644 --- a/media/css/zamboni/mobile.css +++ b/media/css/zamboni/mobile.css @@ -196,6 +196,10 @@ table th { font-weight: bold; color: #666; } +.html-rtl table th { + text-align: left; + padding: 0 0 8px 8px; +} #content { width: 100%; overflow: hidden; @@ -283,10 +287,16 @@ table th { overflow: hidden; position: relative; } +.html-rtl .mini-header .moz-menu .tab { + float: left; +} .mini-header .moz-menu .tab a { text-indent: -9999px; text-align: left; } +.html-rtl .mini-header .moz-menu .tab a { + text-indent: 9999px; +} .moz-menu .menu-items li { border-bottom: 1px solid #294976; border-top: 1px solid #537ab4; @@ -312,6 +322,7 @@ table th { position: absolute; width: 100%; left: -14px; + right: -14px; bottom: 46px; } .mini-header .moz-menu .menu-items { @@ -337,6 +348,13 @@ header hgroup { position: relative; padding-left: 80px; } +.html-rtl header hgroup { + padding-left: 0; + padding-right: 80px; +} +.html-rtl .mini-header hgroup { + padding-right: 0; +} header #home, header .back-link { clear: both; color: #447BC4; @@ -344,9 +362,16 @@ header #home, header .back-link { padding: 14px 0; line-height: 14px; } +.html-rtl header #home, header .back-link { + float: right; +} .mini-header .site-title { padding-right: 120px; } +.html-rtl .mini-header .site-title { + padding-right: 0; + padding-left: 120px; +} .mini-header .site-title a { font-size: 22px; line-height: 22px; @@ -371,6 +396,10 @@ header #home, header .back-link { left: 0; top: 0; } +.html-rtl #home-header .site-title img { + left: auto; + right: 0; +} .site-title a { text-decoration: none; color: black; @@ -387,6 +416,10 @@ header #home, header .back-link { height: 50px; margin-right: 6px; } +.html-rtl .mini-header .site-title img { + float: right; + margin: 0 0 0 6px; +} #home-header #search { margin: 0; } @@ -504,10 +537,22 @@ a.listview:before { margin-top: -8px; background: url(../../img/zamboni/mobile/arrow.svg) no-repeat center center; } +.html-rtl .listview li > a:before, +.html-rtl a.listview:before { + right: auto; + left: 10px; + background: url(../../img/zamboni/mobile/arrow.svg) no-repeat center center; + -moz-transform: scaleX(-1); +} .icon { float: left; margin-right: 8px; } +.html-rtl .icon { + float: right; + margin-left: 8px; + margin-right: 0; +} .item { line-height: 1.3em; @@ -547,6 +592,12 @@ a.listview:before { font-size: 18px; vertical-align: bottom; } +.html-rtl #search input[type=search] { + margin: 0 0 0 7px; + padding-left: 0; + padding-right: 40px; + background-position: -moz-calc(100% - 10px) center; +} #search button[type=submit] { height: 45px; @@ -562,6 +613,9 @@ a.listview:before { -moz-border-radius: 6px; border-radius: 6px; } +.html-rtl #search button[type=submit] { + -moz-transform: scaleX(-1); +} /************************************/ /* SORT MENU */ @@ -701,8 +755,14 @@ a.listview:before { white-space:nowrap; position: relative; left: 0; - -moz-transition: .3s left ease; - -webkit-transition: .3s left ease; + -moz-transition-duration: .3s; + -moz-transition-property: left, right; + -webkit-transition-duration: .3s; + -webkit-transition-property: left, right; +} +.html-rtl .slider { + left: auto; + right: 0; } .slider-mask { width: 100%; @@ -780,10 +840,18 @@ a.listview:before { left: 0; -moz-transition: .3s opacity ease; } +.html-rtl #lightbox .control.prev { + left: auto; + right: 0; +} #lightbox .control.next { left: auto; right: 0; } +.html-rtl #lightbox .control.next { + right: auto; + left: 0; +} #lightbox .control.disabled { opacity: 0; } @@ -1159,6 +1227,8 @@ td .versions li a { } .html-rtl .stars { float: right; + margin-left: 0.5em; + margin-right: 0; } .stars-4 { @@ -1277,12 +1347,16 @@ td .versions li a { .carousel .control.disabled { color: #ccc; } -.carousel .control.prev { +.carousel .control.prev, +.html-rtl .carousel .control.next { background-image: -moz-linear-gradient(left, #fff 20%, rgba(255,255,255,0)); + right: auto; left: 0; } -.carousel .control.next { +.carousel .control.next, +.html-rtl .carousel .control.prev { background-image: -moz-linear-gradient(left, rgba(255,255,255,0), #fff 80%); + left: auto; right: 0; } @@ -1301,8 +1375,10 @@ td .versions li a { white-space: nowrap; position: relative; left: 0; - -moz-transition: .5s left ease; - -webkit-transition: .5s left ease; + -moz-transition-duration: .5s; + -moz-transition-property: left, right; + -webkit-transition-duration: .5s; + -webkit-transition-property: left, right; } .carousel li { @@ -1338,6 +1414,9 @@ a.expando { float: right; color: #447BC4; } +.html-rtl .menu a.expando { + float: left; +} .menu a.expando:after { border-top-color: #447BC4; top: 15px; diff --git a/media/js/zamboni/mobile.js b/media/js/zamboni/mobile.js index d2f5cf2669b..3cfc845f190 100644 --- a/media/js/zamboni/mobile.js +++ b/media/js/zamboni/mobile.js @@ -30,11 +30,12 @@ $(function() { $strip = $("ul", $self), $prev = $(".prev", $self), $next = $(".next", $self), + prop = $("body").hasClass("html-rtl") ? "right" : "left", currentPos = 0, maxPos = $("li", $strip).length/2-1; function render(pos) { currentPos = Math.min(Math.max(0, pos), maxPos); - $strip.css("left", currentPos * -100 + "%"); + $strip.css(prop, currentPos * -100 + "%"); $prev.toggleClass("disabled", currentPos == 0); $next.toggleClass("disabled", currentPos == maxPos); } @@ -74,6 +75,7 @@ $(function() { $managed = $("#"+$strip.attr("data-manages")), isManaged = $managed.length, isSlider = isManaged && $managed.hasClass("slider"), + prop = $("body").hasClass("html-rtl") ? "right" : "left", current = $strip.find(".selected a").attr("href"); if (isManaged) { if (isSlider) @@ -94,10 +96,8 @@ $(function() { $tgt.parent().addClass("selected"); $tgt.blur(); if (isManaged && isSlider && $pane.index() >= 0) { - $managed.css({ - "left": ($pane.index() * -100) + "%", - height: $pane.outerHeight() + "px" - }); + $managed.css(prop, ($pane.index() * -100) + "%"); + $managed.css("height", $pane.outerHeight() + "px"); } } });