diff --git a/index.html b/index.html
index 1f16d14..bff8c47 100755
--- a/index.html
+++ b/index.html
@@ -252,7 +252,7 @@
Other
@@ -282,7 +282,7 @@
-
+
diff --git a/scripts/firetext.js b/scripts/firetext.js
index f9b1843..0e6c05a 100644
--- a/scripts/firetext.js
+++ b/scripts/firetext.js
@@ -915,7 +915,20 @@ document.addEventListener('blur', function(event) {
function initGestures () {
new GestureDetector(document.body).startDetecting();
document.body.addEventListener('swipe', function (event) {
- processActions(('data-swipe-'+event.detail.direction), event.target);
+ // Detect direction
+ var direction;
+ if (document.body.classList.contains('rtl')) {
+ if (event.detail.direction == 'right') {
+ direction = 'left';
+ } else if (event.detail.direction == 'left') {
+ direction = 'right';
+ }
+ } else {
+ direction = event.detail.direction;
+ }
+
+ // Process the action
+ processActions(('data-swipe-'+direction), event.target);
});
}
diff --git a/scripts/language.js b/scripts/language.js
index 029038f..575a083 100644
--- a/scripts/language.js
+++ b/scripts/language.js
@@ -15,16 +15,27 @@ firetext.language = function () { return this.getCurrent(); };
/* Init
------------------------*/
firetext.language.init = function () {
- if (!firetext.settings.get('language')) {
- firetext.settings.save('language', document.webL10n.getLanguage());
- }
-
- // Localize interface
- var language = firetext.settings.get('language');
- document.webL10n.setLanguage(language);
- document.body.setAttribute('language', language);
+ if (!firetext.settings.get('language')) {
+ firetext.settings.save('language', document.webL10n.getLanguage());
+ }
+
+ // Localize interface
+ var language = firetext.settings.get('language');
+ document.webL10n.setLanguage(language);
+ document.body.setAttribute('data-language', language);
+
+ // LTR / RTL
+ if (language == 'he' |
+ language == 'ar' |
+ language == 'tr') {
+ document.body.classList.remove('ltr');
+ document.body.classList.add('rtl');
+ } else {
+ document.body.classList.remove('rtl');
+ document.body.classList.add('ltr');
+ }
}
firetext.language.getCurrent = function () {
- return (firetext.settings.get('language'));
+ return (firetext.settings.get('language'));
}
diff --git a/style/bb/buttons.css b/style/bb/buttons.css
index 3ea4bfb..b009d43 100755
--- a/style/bb/buttons.css
+++ b/style/bb/buttons.css
@@ -23,7 +23,7 @@ a[role="button"] {
background: #fafafa url(buttons/images/ui/default.png) repeat-x left bottom;
border: 0.1rem solid #a6a6a6;
border-radius: 0.2rem;
- font: 500 1.6rem/3.8rem 'MozTT', Sans-serif;
+ font: 500 1.5rem/3.8rem 'MozTT', Sans-serif;
color: #333;
text-align: center;
text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3);
@@ -113,18 +113,6 @@ li a[role="button"] {
overflow: visible;
}
-/* Hacking box-shadow */
-li button:after,
-li a[role="button"]:after {
- content: "";
- position: absolute;
- bottom: -0.3rem;
- left: 0;
- right: 0;
- height: 0.2rem;
- background: url(buttons/images/ui/shadow.png) repeat-x left bottom;
-}
-
/* Press */
li a[role="button"]:active:after,
li button:active:after {
diff --git a/style/bb/drawer.css b/style/bb/drawer.css
index 05f9c48..441894f 100755
--- a/style/bb/drawer.css
+++ b/style/bb/drawer.css
@@ -193,7 +193,6 @@ section[data-type="sidebar"] > nav {
max-height: calc(100% - 5rem);
max-height: -moz-calc(100% - 5rem);
max-height: -webkit-calc(100% - 5rem);
- margin-right: -0.8rem;
width: 100%;
}
@@ -270,4 +269,26 @@ section[data-type="sidebar"] > nav > ul > li > a {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
-}
\ No newline at end of file
+}
+
+
+/* RTL */
+.rtl section[data-type="sidebar"] {
+ left: auto;
+ right: 0;
+}
+
+.rtl section[data-type="sidebar"][data-position="right"] {
+ right: auto;
+ left: 0;
+}
+
+.rtl section[data-type="sidebar"] [role="toolbar"] {
+ left: auto;
+ right: 0;
+}
+
+.rtl section[data-type="sidebar"][data-position="right"] [role="toolbar"] {
+ right: auto;
+ left: 0;
+}
diff --git a/style/bb/input_areas.css b/style/bb/input_areas.css
index a1113be..1b678ce 100755
--- a/style/bb/input_areas.css
+++ b/style/bb/input_areas.css
@@ -294,42 +294,44 @@ form p button[type="reset"]::-moz-focus-inner,
* Right-to-Left layout
*/
-html[dir="rtl"] form p input:valid,
-html[dir="rtl"] form p input:valid:focus,
-html[dir="rtl"] .form p input:valid,
-html[dir="rtl"] .form p input:valid:focus {
+.rtl form p input:focus,
+.rtl .form p input:focus,
+.rtl form p input:valid,
+.rtl form p input:valid:focus,
+.rtl .form p input:valid,
+.rtl .form p input:valid:focus {
padding: 0 0.8rem 0 3.5rem;
}
-html[dir="rtl"] form p textarea:valid,
-html[dir="rtl"] form p textarea:valid:focus,
-html[dir="rtl"] .form p textarea:valid,
-html[dir="rtl"] .form p textarea:valid:focus {
+.rtl form p textarea:valid,
+.rtl form p textarea:valid:focus,
+.rtl .form p textarea:valid,
+.rtl .form p textarea:valid:focus {
padding: 0.8rem 0.8rem 0.8rem 3.5rem;
}
-html[dir="rtl"] form p input + button[type="reset"],
-html[dir="rtl"] form p textarea + button[type="reset"],
-html[dir="rtl"] .form p input + button[type="reset"],
-html[dir="rtl"] .form p textarea + button[type="reset"] {
+.rtl form p input + button[type="reset"],
+.rtl form p textarea + button[type="reset"],
+.rtl .form p input + button[type="reset"],
+.rtl .form p textarea + button[type="reset"] {
right: auto;
left: 0;
}
-html[dir="rtl"] fieldset legend.action:after {
+.rtl fieldset legend.action:after {
margin: 0 0.5rem 0 0;
}
-html[dir="rtl"] fieldset legend {
+.rtl fieldset legend {
padding: 0 1.8rem 0 0.5rem;
}
-html[dir="rtl"] form[role="search"] button[type="submit"] + p > textarea,
-html[dir="rtl"] .form[role="search"] button[type="submit"] + p > textarea {
+.rtl form[role="search"] button[type="submit"] + p > textarea,
+.rtl .form[role="search"] button[type="submit"] + p > textarea {
padding: 0.5rem 0.8rem 0.5rem 3rem;
}
-html[dir="rtl"] form[role="search"] button[type="submit"] + p > button,
-html[dir="rtl"] .form[role="search"] button[type="submit"] + p > button {
+.rtl form[role="search"] button[type="submit"] + p > button,
+.rtl .form[role="search"] button[type="submit"] + p > button {
left: 1rem;
-}
\ No newline at end of file
+}
diff --git a/style/bb/lists.css b/style/bb/lists.css
index 989d7fa..0e51300 100755
--- a/style/bb/lists.css
+++ b/style/bb/lists.css
@@ -110,7 +110,7 @@
[data-type="list"] aside[class^="icon-"],
[data-type="list"] aside[class*=" icon-"] {
- padding: 1.4rem .5rem;
+ padding: 1.4rem 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@@ -127,6 +127,15 @@
text-align: right;
}
+.pack-end button {
+ font-size: 1.5rem;
+ width: auto;
+ padding: 0 0.2rem;
+ margin-top: 0.5rem;
+ position: absolute;
+ right: 0;
+}
+
[data-type="list"] aside[data-icon] {
width: 3rem;
height: 6rem;
@@ -160,7 +169,6 @@
}
[data-type="list"] li p:first-of-type {
- font-size: 1.8rem;
line-height: 2.2rem;
color: #000;
padding: 1rem 0 0;
@@ -214,3 +222,19 @@
[data-type="list"] [data-type="edit"] li > a:active:after {
display: none;
}
+
+
+/* RTL */
+.rtl [data-type="list"] aside {
+ float: right;
+ margin: 0 0 0 0.5rem;
+}
+
+.rtl [data-type="list"] .pack-end {
+ float: left;
+}
+
+.pack-end button {
+ left: 0;
+ right: auto;
+}
diff --git a/style/bb/tabs.css b/style/bb/tabs.css
index da76692..ebfd23e 100755
--- a/style/bb/tabs.css
+++ b/style/bb/tabs.css
@@ -264,3 +264,25 @@
[role="tablist"][data-type="filter"].bottom > [role="tab"] > a {
height: auto;
}
+
+
+/* RTL */
+.rtl [role="tablist"] > [role="tab"] {
+ float: right;
+}
+
+.rtl [role="tablist"] [role="tabpanel"] {
+ -moz-transform: translateX(102%);
+ -webkit-transform: translateX(102%);
+ -o-transform: translateX(102%);
+ -ms-transform: translateX(102%);
+ transform: translateX(102%);
+}
+
+.rtl [role="tablist"] .selected ~ [role="tab"] [role="tabpanel"] {
+ -moz-transform: translateX(-102%);
+ -webkit-transform: translateX(-102%);
+ -o-transform: translateX(-102%);
+ -ms-transform: translateX(-102%);
+ transform: translateX(-102%);
+}
diff --git a/style/bb/toolbars.css b/style/bb/toolbars.css
index 0141611..a291fd2 100755
--- a/style/bb/toolbars.css
+++ b/style/bb/toolbars.css
@@ -54,3 +54,18 @@
box-sizing: border-box;
text-align: right;
}
+
+
+/* RTL */
+.rtl [role="toolbar"] ul {
+ float: right;
+}
+
+.rtl [role="toolbar"] ul:last-child {
+ float: left;
+ text-align: left;
+}
+
+.rtl [role="toolbar"] li {
+ float: right;
+}
diff --git a/style/headers.css b/style/headers.css
index 724702e..263ccb4 100755
--- a/style/headers.css
+++ b/style/headers.css
@@ -13,14 +13,14 @@ section > header:first-child {
}
section > header:first-child h1 {
- font: 2.5rem/4.8rem "MozTT", Sans-serif;
+ font: 2.4rem/4.6rem "MozTT", Sans-serif;
text-align: left;
color: inherit;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
overflow: hidden;
- margin: 0 0 0 4rem;
+ margin: 0 0 0 3.5rem;
height: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
@@ -121,9 +121,9 @@ section > header:first-child button {
text-decoration: none;
}
-section > header:first-child > button:first-child .icon,
-section > header:first-child > a:first-child .icon {
- padding-right: .7rem;
+section > header:first-child > button:first-child .icon-close,
+section > header:first-child > a:first-child .icon-close {
+ padding-right: 0.7rem;
}
section > header:first-child > button:first-child .icon-menu,
@@ -260,26 +260,66 @@ section > header h2 {
/* ----------------------------------
* HEADERS: right-to-left tweaks
* ---------------------------------- */
+.rtl section > header:first-child {
+ direction: ltr;
+}
-html[dir="rtl"] section > header:first-child h1 {
- text-align: right;
- margin: 0 3rem 0 0;
+.rtl section > header:first-child h1 {
+ direction: rtl;
+ text-align: right;
+ margin: 0 3.5rem 0 0 !important;
+}
+
+.rtl section > header:first-child > button,
+.rtl section > header:first-child > a {
+ right: 0;
+ left: auto;
+ direction: rtl;
+}
+
+.rtl section > header:first-child menu[type="toolbar"] {
+ float: left;
}
-html[dir="rtl"] section > header:first-child button,
-html[dir="rtl"] section > header:first-child a {
- left: inherit;
- right: 0;
+.rtl section > header:first-child menu[type="toolbar"] a,
+.rtl section > header:first-child menu[type="toolbar"] button {
+ float: right;
}
-html[dir="rtl"] section > header:first-child > button .icon,
-html[dir="rtl"] section > header:first-child > a .icon {
- margin-left: 0;
- margin-right: -2rem;
+.rtl section > header:first-child menu[type="toolbar"] .menu {
+ padding-left: 0;
+ text-align: left;
+ min-width: 2rem;
}
-html[dir="rtl"] section > header:first-child > button .icon:after,
-html[dir="rtl"] section > header:first-child > a .icon:after {
- left: inherit;
- right: 0;
+.rtl section > header:first-child > button:first-child .icon,
+.rtl section > header:first-child > a:first-child .icon {
+ padding-right: 0;
+ padding-left: 0.7rem;
+}
+
+.rtl section > header:first-child > button .icon:after,
+.rtl section > header:first-child > a .icon:after {
+ left: auto;
+ right: 0;
+}
+
+.rtl section > header:first-child > button:first-child .icon-menu,
+.rtl section > header:first-child > a:first-child .icon-menu {
+ padding-right: 0;
+ padding-left: 1.3rem;
+}
+
+.rtl section > header:first-child > button:first-child .icon-close,
+.rtl section > header:first-child > a:first-child .icon-close {
+ padding-right: 0.7rem;
+}
+
+.rtl section > header:first-child > button:first-child .icon-back,
+.rtl section > header:first-child > a:first-child .icon-back {
+ -moz-transform: scale(-1, 1);
+ -webkit-transform: scale(-1, 1);
+ -o-transform: scale(-1, 1);
+ transform: scale(-1, 1);
+ padding-right: 1rem;
}
diff --git a/style/icons.css b/style/icons.css
index 3b14697..dd57cdc 100644
--- a/style/icons.css
+++ b/style/icons.css
@@ -17,6 +17,7 @@
[class^="icon-"],
[class*=" icon-"] {
+ direction: ltr;
font-family: 'Firetext' !important;
speak: none;
font-style: normal;
diff --git a/style/icons/misc/spinner.png b/style/icons/misc/spinner.png
index 94aa7aa..6bf055d 100755
Binary files a/style/icons/misc/spinner.png and b/style/icons/misc/spinner.png differ
diff --git a/style/icons/night/misc/spinner-night.png b/style/icons/night/misc/spinner-night.png
index 6694aa7..cf205e7 100755
Binary files a/style/icons/night/misc/spinner-night.png and b/style/icons/night/misc/spinner-night.png differ
diff --git a/style/main.css b/style/main.css
index 122bfc3..d218c26 100755
--- a/style/main.css
+++ b/style/main.css
@@ -16,12 +16,6 @@ html, body {
color: #6f6f6f;
}
-@font-face {
- font-family: 'Open Sans';
- font-style: normal;
- src: local('OpenSans'), url(fonts/OpenSans.woff) format('woff');
-}
-
[role="main"].header-only {
height: calc(100% - 5rem);
height: -moz-calc(100% - 5rem);
@@ -30,8 +24,9 @@ html, body {
}
.firetext {
- text-align: center !important;
- padding-top: 0 !important;
+ text-align: center !important;
+ padding-top: 0 !important;
+ margin: 0 0 0 4rem !important;
}
.redAlert {
@@ -43,6 +38,15 @@ html, body {
}
+/* Fonts */
+@font-face {
+ font-family: 'Open Sans';
+ font-style: normal;
+ src: local('OpenSans'), url(fonts/OpenSans.woff) format('woff');
+}
+
+
+
/* Style hacks */
[role="toolbar"] button.ftanylitics {
background-color: #444;
@@ -105,7 +109,7 @@ form[role=dialog].current {
margin: 0 0;
font-family: "Open Sans";
font-weight: normal;
- font-size: 1.8rem;
+ font-size: 1.7rem;
}
[data-type="list"] li a,
@@ -164,11 +168,11 @@ form[role=dialog].current {
}
[data-type="list"] li.fileListItem .fileItemName {
- font-size: 1.8rem;
+ font-size: 1.6rem;
color: #2c2c2c;
font-weight: bold;
margin: 0;
- padding: 1rem 0 0;
+ padding: 0.5rem 0 0;
}
[data-type="list"] li.fileListItem .fileItemPath {
@@ -189,7 +193,7 @@ form[role=dialog].current {
/* Buttons */
.button-block {
width: 96%;
- margin-left: 2%;
+ margin-left: 1.5%;
}
@@ -234,27 +238,10 @@ legend.action select {
}
aside.pack-end select {
- background: none;
- outline: none;
- border: none;
- border-radius: 0px;
- font-size: 1.5rem;
position: absolute;
right: 0;
- padding-top: 1.3rem;
+ margin-top: 1.4rem;
text-align: right;
- text-indent: 1.5rem;
-}
-
-aside.pack-end select:after {
- content: "";
- position: absolute;
- top: 1.8rem;
- width: 0;
- height: 0;
- margin-left: 0.5rem;
- border: 0.4rem solid transparent;
- border-top-color: #333;
}
legend.action select.dummy,
@@ -326,39 +313,35 @@ aside select.dummy {
width: 100%;
border: none;
outline: none;
- height: calc(100% - 3.9rem);
height: -moz-calc(100% - 3.9rem);
height: -webkit-calc(100% - 3.9rem);
+ height: calc(100% - 3.9rem);
}
/* Spinner (Throbber) */
.spinner {
- border-radius: 8px;
- background-color: #fff;
+ border-radius: 100%;
+ background-color: rgba(255,255,255,0.5);
padding: 10px;
opacity: 0;
display: inline-block;
visibility: hidden;
- transition: opacity .3s, .3s visibility 0s;
-moz-transition: opacity .3s, .3s visibility 0s;
-webkit-transition: opacity .3s, .3s visibility 0s;
-o-transition: opacity .3s, .3s visibility 0s;
+ transition: opacity .3s, .3s visibility 0s;
pointer-events: none;
}
-.spinner:hover, .spinner:active, .spinner:focus {
- opacity: .3 !important;
-}
-
.spinner.center {
position: fixed;
- left: calc(50% - 53px / 2);
left: -moz-calc(50% - 53px / 2);
left: -webkit-calc(50% - 53px / 2);
- top: calc(50% - 53px / 2);
+ left: calc(50% - 53px / 2);
top: -moz-calc(50% - 53px / 2);
top: -webkit-calc(50% - 53px / 2);
+ top: calc(50% - 53px / 2);
}
.spinner.shown {
@@ -376,55 +359,149 @@ aside select.dummy {
background-position: center;
width: 33px;
height: 33px;
- animation: spin .5s steps(30) infinite;
- -moz-animation: spin .5s steps(30) infinite;
- -webkit-animation: spin .5s steps(30) infinite;
- -o-animation: spin .5s steps(30) infinite;
+ -moz-animation: spin 1s linear infinite;
+ -webkit-animation: spin 1s linear infinite;
+ -o-animation: spin 1s linear infinite;
+ animation: spin 1s linear infinite;
}
@keyframes spin{
0%{
- transform: rotate(0turn);
-moz-transform: rotate(0turn);
-webkit-transform: rotate(0turn);
-o-transform: rotate(0turn);
-ms-transform: rotate(0turn);
+ transform: rotate(0turn);
}
100%{
- transform: rotate(1turn);
-moz-transform: rotate(1turn);
-webkit-transform: rotate(1turn);
-o-transform: rotate(1turn);
-ms-transform: rotate(1turn);
+ transform: rotate(1turn);
}
}
@-moz-keyframes spin{
0%{
- transform: rotate(0turn);
-moz-transform: rotate(0turn);
+ transform: rotate(0turn);
}
100%{
- transform: rotate(1turn);
-moz-transform: rotate(1turn);
+ transform: rotate(1turn);
}
}
@-webkit-keyframes spin{
0%{
- transform: rotate(0turn);
-webkit-transform: rotate(0turn);
+ transform: rotate(0turn);
}
100%{
- transform: rotate(1turn);
-webkit-transform: rotate(1turn);
+ transform: rotate(1turn);
}
}
@-o-keyframes spin{
0%{
+ -o-transform: rotate(0turn);
transform: rotate(0turn);
+ }
+ 100%{
+ -o-transform: rotate(1turn);
+ transform: rotate(1turn);
+ }
+}
+
+
+/* RTL */
+.rtl {
+ direction: rtl;
+}
+
+.rtl aside.pack-end select {
+ left: 0;
+ right: auto;
+ direction: ltr;
+ text-indent: 0;
+ text-align: left;
+}
+
+.rtl .button-block {
+ margin-right: 1.5%;
+}
+
+.rtl #fileTypeLegend {
+ float: left;
+}
+
+.rtl .tabToolbar button,
+.rtl .tabToolbar .button,
+.rtl .tabToolbar input[type="button"] {
+ float: left;
+}
+
+.rtl .tabToolbar .icon-menu {
+ padding-left: 0;
+ width: 3rem;
+}
+
+.rtl .spinner > div {
+ -moz-animation-name: rtlSpin;
+ -webkit-animation-name: rtlSpin;
+ -o-animation-name: rtlSpin;
+ animation-name: rtlSpin;
+}
+
+.rtl .icon-arrow {
+ -moz-transform: scale(-1, 1);
+ -webkit-transform: scale(-1, 1);
+ -o-transform: scale(-1, 1);
+ transform: scale(-1, 1);
+}
+
+@keyframes rtlSpin{
+ 0%{
+ -moz-transform: rotate(1turn);
+ -webkit-transform: rotate(1turn);
+ -o-transform: rotate(1turn);
+ -ms-transform: rotate(1turn);
+ transform: rotate(1turn);
+ }
+ 100%{
+ -moz-transform: rotate(0turn);
+ -webkit-transform: rotate(0turn);
-o-transform: rotate(0turn);
+ -ms-transform: rotate(0turn);
+ transform: rotate(0turn);
+ }
+}
+@-moz-keyframes rtlSpin{
+ 0%{
+ -moz-transform: rotate(1turn);
+ transform: rotate(1turn);
}
100%{
+ -moz-transform: rotate(0turn);
+ transform: rotate(0turn);
+ }
+}
+@-webkit-keyframes rtlSpin{
+ 0%{
+ -webkit-transform: rotate(1turn);
transform: rotate(1turn);
+ }
+ 100%{
+ -webkit-transform: rotate(0turn);
+ transform: rotate(0turn);
+ }
+}
+@-o-keyframes rtlSpin{
+ 0%{
-o-transform: rotate(1turn);
+ transform: rotate(1turn);
+ }
+ 100%{
+ -o-transform: rotate(0turn);
+ transform: rotate(0turn);
}
}
diff --git a/style/night.css b/style/night.css
index 5d24443..192f378 100644
--- a/style/night.css
+++ b/style/night.css
@@ -39,7 +39,7 @@
/* Spinner */
.night .spinner {
- background: #2c2c2c;
+ background: rgba(44,44,44,0.5);
border: none;
}
diff --git a/style/regions.css b/style/regions.css
index 327a5fa..6ce648a 100755
--- a/style/regions.css
+++ b/style/regions.css
@@ -111,3 +111,46 @@ section[role="dialog"].current {
-ms-transform: translateX(-80%) !important;
transform: translateX(-80%) !important;
}
+
+
+/* RTL */
+.rtl section[role="region"] {
+ -moz-transform: translateX(100%);
+ -webkit-transform: translateX(100%);
+ -o-transform: translateX(100%);
+ -ms-transform: translateX(100%);
+ transform: translateX(100%);
+}
+
+.rtl section[role="region"].current,
+.rtl [role="region"].parent {
+ -moz-transform: none;
+ -webkit-transform: none;
+ -o-transform: none;
+ -ms-transform: none;
+ transform: none;
+}
+
+.rtl section[role="region"].current ~ section[role="region"] {
+ -moz-transform: translateX(-100%);
+ -webkit-transform: translateX(-100%);
+ -o-transform: translateX(-100%);
+ -ms-transform: translateX(-100%);
+ transform: translateX(-100%);
+}
+
+.rtl [data-state="drawer"].current {
+ -moz-transform: translateX(-80%) !important;
+ -webkit-transform: translateX(-80%) !important;
+ -o-transform: translateX(-80%) !important;
+ -ms-transform: translateX(-80%) !important;
+ transform: translateX(-80%) !important;
+}
+
+.rtl [data-state="drawer"][data-position="right"].current {
+ -moz-transform: translateX(80%) !important;
+ -webkit-transform: translateX(80%) !important;
+ -o-transform: translateX(80%) !important;
+ -ms-transform: translateX(80%) !important;
+ transform: translateX(80%) !important;
+}