Add i18n

* add i18n for translation
* German translation
* Arabic translation
* RTL support

4 files changed, 41 insertions, 0 deletions

diff --git a/src/pages/stylesheets/NotoNaskhArabic-VariableFont_wght.ttf b/src/pages/stylesheets/NotoNaskhArabic-VariableFont_wght.ttf
new file mode 100644
index 00000000..93f2844f
--- /dev/null
+++ b/src/pages/stylesheets/NotoNaskhArabic-VariableFont_wght.ttf
Binary files differdiff --git a/src/pages/stylesheets/NotoSansArabic-VariableFont_wdth,wght.ttf b/src/pages/stylesheets/NotoSansArabic-VariableFont_wdth,wght.ttf
new file mode 100644
index 00000000..694b773c
--- /dev/null
+++ b/src/pages/stylesheets/NotoSansArabic-VariableFont_wdth,wght.ttf
Binary files differdiff --git a/src/pages/stylesheets/Vazirmatn-VariableFont_wght.ttf b/src/pages/stylesheets/Vazirmatn-VariableFont_wght.ttf
new file mode 100644
index 00000000..f4b97c01
--- /dev/null
+++ b/src/pages/stylesheets/Vazirmatn-VariableFont_wght.ttf
Binary files differdiff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css
index 5417242e..955c1759 100644
--- a/src/pages/stylesheets/styles.css
+++ b/src/pages/stylesheets/styles.css
@@ -17,6 +17,27 @@ body {
   font-style: normal;
 }
 
+@font-face {
+  font-family: 'Vazirmatn';
+  src: url('Vazirmatn-VariableFont_wght.ttf');
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* @font-face {
+  font-family: 'NotoSansArabic';
+  src: url('NotoSansArabic-VariableFont_wdth,wght.ttf');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'NotoNaskhArabic';
+  src: url('NotoNaskhArabic-VariableFont_wght.ttf');
+  font-weight: normal;
+  font-style: normal;
+} */
+
 body {
   margin: auto;
   padding: 0;
@@ -26,6 +47,11 @@ body {
   overflow-x: hidden
 }
 
+body.rtl {
+  font-family: 'Vazirmatn';
+  /* line-height: 1; */
+}
+
 div.some-block input[type="checkbox"] {
   appearance: none;
   -moz-appearance: none;
@@ -46,6 +72,11 @@ img, svg {
   color: var(--text);
 }
 
+body.rtl img, body.rtl svg {
+  margin-right: 0px;
+  margin-left: 10px;
+}
+
 input[type="url"],
 input[type="text"],
 select {
@@ -217,10 +248,20 @@ div.some-block input[type="checkbox"]::before {
   transition: .3s;
 }
 
+body.rtl div.some-block input[type="checkbox"]::before {
+  left: auto;
+  right: 4px;
+}
+
 div.some-block input[type="checkbox"]:checked::before {
   left: 24px;
 }
 
+body.rtl div.some-block input[type="checkbox"]:checked::before {
+  left: auto;
+  right: 24px;
+}
+
 div.buttons {
   display: flex;
   margin: 0 15px;