Ticket #4876 - Artifcier Padding/Margin Spacing issue in RTL Language Mods.

modules/boonex/artificer/data/template/system/css/general.css

@@ -237,11 +237,21 @@ import url(../../../../../../../template/css/general.css);
 .sys-action-counter.sys-action-counter-iconset .sys-ac-link {
     padding-left: 0.75rem;
 }
+.bx-dir-rtl .sys-action-counter.sys-action-counter-iconset .sys-ac-link {
+    padding-left: 0;
+    padding-right: 0.75rem;
+}
 .bx-media-phone .sys-action-counter.sys-action-counter-iconset .sys-ac-link,
 .bx-media-tablet .bx-layout-column-thin .sys-action-counter.sys-action-counter-iconset .sys-ac-link,
 .bx-media-tablet .bx-layout-column-half .sys-action-counter.sys-action-counter-iconset .sys-ac-link {
     padding-left: 1.0rem;
 }
+.bx-media-phone .bx-dir-rtl .sys-action-counter.sys-action-counter-iconset .sys-ac-link,
+.bx-media-tablet .bx-dir-rtl .bx-layout-column-thin .sys-action-counter.sys-action-counter-iconset .sys-ac-link,
+.bx-media-tablet .bx-dir-rtl .bx-layout-column-half .sys-action-counter.sys-action-counter-iconset .sys-ac-link {
+    padding-left: 0;
+    padding-right: 1.0rem;
+}
 .sys-action-counter.sys-action-counter-iconset .bx-def-icon-size {
     width: 1.5rem;
     height: 1.5rem;
@@ -250,6 +260,11 @@ import url(../../../../../../../template/css/general.css);
 .sys-action-counter.sys-action-counter-iconset .sys-action-counter-icon {
     margin-left: -0.5rem;
 }
+.bx-dir-rtl .sys-action-counter.sys-action-counter-iconset .bx-base-pofile-unit-wo-info,
+.bx-dir-rtl .sys-action-counter.sys-action-counter-iconset .sys-action-counter-icon {
+    margin-left: 0;
+    margin-right: -0.5rem;
+}
 .bx-media-phone .sys-action-counter.sys-action-counter-iconset .bx-base-pofile-unit-wo-info,
 .bx-media-phone .sys-action-counter.sys-action-counter-iconset .sys-action-counter-icon,
 .bx-media-tablet .bx-layout-column-thin .sys-action-counter.sys-action-counter-iconset .bx-base-pofile-unit-wo-info,
@@ -257,4 +272,13 @@ import url(../../../../../../../template/css/general.css);
 .bx-media-tablet .bx-layout-column-half .sys-action-counter.sys-action-counter-iconset .bx-base-pofile-unit-wo-info,
 .bx-media-tablet .bx-layout-column-half .sys-action-counter.sys-action-counter-iconset .sys-action-counter-icon {
     margin-left: -0.75rem;
+}
+.bx-media-phone .bx-dir-rtl .sys-action-counter.sys-action-counter-iconset .bx-base-pofile-unit-wo-info,
+.bx-media-phone .bx-dir-rtl .sys-action-counter.sys-action-counter-iconset .sys-action-counter-icon,
+.bx-media-tablet .bx-dir-rtl .bx-layout-column-thin .sys-action-counter.sys-action-counter-iconset .bx-base-pofile-unit-wo-info,
+.bx-media-tablet .bx-dir-rtl .bx-layout-column-thin .sys-action-counter.sys-action-counter-iconset .sys-action-counter-icon,
+.bx-media-tablet .bx-dir-rtl .bx-layout-column-half .sys-action-counter.sys-action-counter-iconset .bx-base-pofile-unit-wo-info,
+.bx-media-tablet .bx-dir-rtl .bx-layout-column-half .sys-action-counter.sys-action-counter-iconset .sys-action-counter-icon {
+    margin-left: 0;
+    margin-right: -0.75rem;
 }

modules/boonex/timeline/template/block_async_outline.html

@@ -1,8 +1,8 @@
-<div class="bx-tl-cont-ph-boxes flex space-x-6">
+<div class="bx-tl-cont-ph-boxes flex space-x-6 rtl:space-x-reverse">
     <div class="flex-1 mb-4 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md">
         <div class="flex items-center p-4">
             <div class="flex-0 h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full">&nbsp;</div>
-            <div class="flex-1 ml-4 space-y-2 animate-pulse">
+            <div class="flex-1 ltr:ml-4 rtl:mr-4 space-y-2 animate-pulse">
                 <div class="h-3 w-1/3 bg-gray-300 dark:bg-gray-600 rounded-xl">&nbsp;</div>
                 <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
             </div>
@@ -10,7 +10,7 @@
         <div class="h-48 m-1 bg-gray-200 dark:bg-gray-700 rounded animate-pulse">&nbsp;</div>
         <div class="p-4 space-y-4 animate-pulse">
             <div class="h-5 w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full">&nbsp;</div>
-            <div class="flex space-x-1">
+            <div class="flex space-x-1 rtl:space-x-reverse">
                 <div class="h-3 w-1/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
                 <div class="h-3 w-2/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
             </div>
@@ -20,7 +20,7 @@
     <div class="flex-1 mb-4 p-4 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md">
         <div class="flex items-center">
             <div class="flex-0 h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full">&nbsp;</div>
-            <div class="flex-1 ml-4 space-y-2 animate-pulse">
+            <div class="flex-1 ltr:ml-4 rtl:mr-4 space-y-2 animate-pulse">
                 <div class="h-3 w-1/3 bg-gray-300 dark:bg-gray-600 rounded-xl">&nbsp;</div>
                 <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
             </div>
@@ -35,7 +35,7 @@
     <div class="flex-1 mb-4 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md">
         <div class="flex items-center p-4">
             <div class="flex-0 h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full">&nbsp;</div>
-            <div class="flex-1 ml-4 space-y-2 animate-pulse">
+            <div class="flex-1 ltr:ml-4 rtl:mr-4 space-y-2 animate-pulse">
                 <div class="h-3 w-1/3 bg-gray-300 dark:bg-gray-600 rounded-xl">&nbsp;</div>
                 <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
             </div>
@@ -43,7 +43,7 @@
         <div class="h-48 m-1 bg-gray-200 dark:bg-gray-700 rounded animate-pulse">&nbsp;</div>
         <div class="p-4 space-y-4 animate-pulse">
             <div class="h-5 w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full">&nbsp;</div>
-            <div class="flex space-x-1">
+            <div class="flex space-x-1 rtl:space-x-reverse">
                 <div class="h-3 w-1/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
                 <div class="h-3 w-2/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
             </div>

modules/boonex/timeline/template/block_async_timeline.html

@@ -1,7 +1,7 @@
 <div class="flex-1 mb-4 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md">
     <div class="flex items-center p-4">
         <div class="flex-0 h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full">&nbsp;</div>
-        <div class="flex-1 ml-4 space-y-2 animate-pulse">
+        <div class="flex-1 lrt:ml-4 rtl:mr-4 space-y-2 animate-pulse">
             <div class="bg-gray-300 dark:bg-gray-600 h-3 w-1/3 rounded-xl">&nbsp;</div>
             <div class="bg-gray-200 dark:bg-gray-600 h-3 w-1/2 rounded-xl">&nbsp;</div>
         </div>
@@ -9,7 +9,7 @@
     <div class="h-48 m-1 bg-gray-200 dark:bg-gray-700 rounded animate-pulse">&nbsp;</div>
     <div class="p-4 space-y-4 animate-pulse">
         <div class="h-5 w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full">&nbsp;</div>
-        <div class="flex space-x-1">
+        <div class="flex space-x-1 rtl:space-x-reverse">
             <div class="bg-gray-200 dark:bg-gray-700 h-3 w-1/3 rounded-xl"></div>
             <div class="bg-gray-200 dark:bg-gray-700 h-3 w-2/3 rounded-xl"></div>
         </div>
@@ -19,7 +19,7 @@
 <div class="flex-1 mb-4 p-4 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md">
     <div class="flex items-center">
         <div class="flex-0 h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full">&nbsp;</div>
-        <div class="flex-1 ml-4 space-y-2 animate-pulse">
+        <div class="flex-1 lrt:ml-4 rtl:mr-4 space-y-2 animate-pulse">
             <div class="h-3 w-1/3 bg-gray-300 dark:bg-gray-600 rounded-xl">&nbsp;</div>
             <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
         </div>

studio/js/forms.js

@@ -46,7 +46,8 @@ function fvtTogglePopup(sName, oLink) {
     oPopup.dolPopup({
     	moveToDocRoot: false,
         pointer:{
-            el:$(oLink)
+            el:$(oLink),
+            align: $('body').hasClass('bx-dir-rtl') ? 'left' : 'right'
         }
     });
 };

studio/template/css/builder_page.css

@@ -60,6 +60,12 @@ div.adm-bpb-icon i.sys-icon {
     max-width: none;
     margin-right: 0.75rem;
 }
+.bx-dir-rtl div.adm-bpb-icon,
+.bx-dir-rtl div.adm-bpb-icon-bg,
+.bx-dir-rtl div.adm-bpb-icon img {
+    margin-left: 0.75rem;
+    margin-right: 0;
+}
 div.adm-bpb-icon {
     position: relative;
 }
@@ -107,6 +113,10 @@ div.adm-bpb-title {
 div.adm-bpb-title .bx-std-api {
     margin-left: 0.25rem;
 }
+.bx-dir-rtl div.adm-bpb-title .bx-std-api {
+    margin-left: 0;
+    margin-right: 0.25rem;
+}
 div.adm-bpb-description {
     font-size: 0.75rem;
 }

studio/template/css/common.less

@@ -73,6 +73,12 @@ div.bx-db-note {
     -moz-box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.1);
     box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.1);
 }
+.dark .bx-popup-applied:not(.bx-popup-chain) .bx-popup,
+.dark .bx-popup-applied.bx-popup-chain .bx-popup-chain-item {
+    -webkit-box-shadow: 0px 3px 5px 1px rgba(255,255,255,0.1);
+    -moz-box-shadow: 0px 3px 5px 1px rgba(255,255,255,0.1);
+    box-shadow: 0px 3px 5px 1px rgba(255,255,255,0.1);
+}
 .bx-popup-applied.bx-popup-menu:not(.bx-popup-chain) .bx-popup {
     .radius(16px);
 }

studio/template/css/forms.css

@@ -32,8 +32,13 @@ div.bx-form-input-wrapper-textarea {
 div.bx-form-input-translator {
     position: absolute;
     top: -22px;
+}
+.bx-dir-ltr div.bx-form-input-translator {
     right: 0px;
 }
+.bx-dir-rtl div.bx-form-input-translator {
+    left: 0px;
+}
 
 div.bx-form-input-language,
 div.bx-form-input-language-current{

template/block_async_create_post.html

@@ -1,6 +1,6 @@
 <div class="flex items-center p-4">
     <div class="flex-0 h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full">&nbsp;</div>
-    <div class="flex-1 ml-4 space-y-2 animate-pulse">
+    <div class="flex-1 ltr:ml-4 rtl:mr-4 space-y-2 animate-pulse">
         <div class="h-8 w-full bg-gray-300 dark:bg-gray-600 rounded-md">&nbsp;</div>
     </div>
 </div>

template/block_async_profile_units.html

@@ -1,4 +1,4 @@
-<div class="bx-cont-ph-profile-unit relative flex space-x-6">
+<div class="bx-cont-ph-profile-unit relative flex space-x-6 rtl:space-x-reverse">
     <div class="flex-1 mb-4 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md">
         <div class="bx-base-pofile-unit-cover flex align-items justify-center p-4 bg-gray-100 dark:bg-gray-600 rounded-t-md">
             <div class="flex-0 h-24 w-24 bg-gray-200 dark:bg-gray-700 rounded-full">&nbsp;</div>
@@ -7,7 +7,7 @@
             <div class="flex justify-center">
                 <div class="h-5 w-1/2 bg-gray-300 dark:bg-gray-600 rounded-full">&nbsp;</div>
             </div>
-            <div class="flex mt-2 space-x-1">
+            <div class="flex mt-2 space-x-1 rtl:space-x-reverse">
                 <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
                 <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
             </div>

template/block_async_text_units_gallery.html

@@ -1,20 +1,20 @@
-<div class="bx-cont-ph-profile-unit relative flex space-x-6">
+<div class="bx-cont-ph-profile-unit relative flex space-x-6 rtl:space-x-reverse">
     <div class="flex-1 mb-4 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md">
         <div class="h-48 m-1 mb-0 bg-gray-200 dark:bg-gray-700 rounded animate-pulse">&nbsp;</div>
         <div class="p-4 space-y-4 animate-pulse">
             <div class="h-3 w-1/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
             <div class="space-y-2">
-                <div class="flex space-x-1">
+                <div class="flex space-x-1 rtl:space-x-reverse">
                     <div class="h-5 w-1/2 bg-gray-300 dark:bg-gray-600 rounded-xl"></div>
                     <div class="h-5 w-1/2 bg-gray-300 dark:bg-gray-600 rounded-xl"></div>
                 </div>
                 <div class="h-5 w-2/3 bg-gray-300 dark:bg-gray-600 rounded-xl"></div>
             </div>
-            <div class="flex space-x-1">
+            <div class="flex space-x-1 rtl:space-x-reverse">
                 <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
                 <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
             </div>
-            <div class="flex space-x-1">
+            <div class="flex space-x-1 rtl:space-x-reverse">
                 <div class="h-3 w-1/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
                 <div class="h-3 w-2/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
             </div>

template/block_async_text_units_list.html

@@ -4,17 +4,17 @@
         <div class="p-4 space-y-4 animate-pulse">
             <div class="h-3 w-1/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
             <div class="space-y-2">
-                <div class="flex space-x-1">
+                <div class="flex space-x-1 rtl:space-x-reverse">
                     <div class="h-5 w-1/2 bg-gray-300 dark:bg-gray-600 rounded-xl"></div>
                     <div class="h-5 w-1/2 bg-gray-300 dark:bg-gray-600 rounded-xl"></div>
                 </div>
                 <div class="h-5 w-2/3 bg-gray-300 dark:bg-gray-600 rounded-xl"></div>
             </div>
-            <div class="flex space-x-1">
+            <div class="flex space-x-1 rtl:space-x-reverse">
                 <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
                 <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
             </div>
-            <div class="flex space-x-1">
+            <div class="flex space-x-1 rtl:space-x-reverse">
                 <div class="h-3 w-1/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
                 <div class="h-3 w-2/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
             </div>

template/css/forms.css

@@ -256,6 +256,11 @@
 .bx-form-value .bx-form-input-checkbox_set label {
     padding-left: 0.75rem;
 }
+.bx-dir-rtl .bx-form-value .bx-form-input-radio_set label,
+.bx-dir-rtl .bx-form-value .bx-form-input-checkbox_set label {
+    padding-left: 0;
+    padding-right: 0.75rem;
+}
 
 .bx-form-input-textarea {
     padding:0.5rem;

template/css/tailwind.css

@@ -392,9 +392,15 @@
     .bx-artificer .bx-def-padding-sec-left {
         @apply pl-2;
     }
+    .bx-artificer .bx-def-padding-sec-left.bx-dir {
+        @apply pl-0 ltr:pl-2 rtl:pr-2;
+    }
     .bx-artificer .bx-def-padding-sec-left-auto {
         @apply pl-2 first:pl-0;
     }
+    .bx-artificer .bx-def-padding-sec-left-auto.bx-dir {
+        @apply pl-0 ltr:pl-2 ltr:first:pl-0 rtl:pr-2 rtl:first:pr-0;
+    }
     .bx-artificer .bx-def-padding-sec-right {
         @apply pr-2;
     }
@@ -1379,7 +1385,7 @@
     }
 
     .bx-std .bx-popup-color-bg {
-        @apply shadow;
+        @apply shadow dark:shadow-gray-500;
     }
     .bx-std .bx-popup-border {
         @apply m-px ring-1 ring-gray-300 dark:ring-gray-700 rounded-2xl;

template/css/vote.css

@@ -33,30 +33,61 @@
 .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-divided a.bx-vote-counter {
     margin-right: 0.5rem;
 }
+.bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound .sys-ac-link {
+    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
+}
+.bx-dir-rtl .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound .sys-ac-link {
+    padding-left: 0.25rem;
+    padding-right: 0.75rem;
+}
 .bx-media-phone .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound .sys-ac-link,
 .bx-media-tablet .bx-layout-column-thin .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound .sys-ac-link,
 .bx-media-tablet .bx-layout-column-half .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound .sys-ac-link {
     padding-left: 1.0rem;
 }
+.bx-media-phone .bx-dir-rtl .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound .sys-ac-link,
+.bx-media-tablet .bx-dir-rtl .bx-layout-column-thin .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound .sys-ac-link,
+.bx-media-tablet .bx-dir-rtl .bx-layout-column-half .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound .sys-ac-link {
+    padding-left: 0.25rem;
+    padding-right: 1.0rem;
+}
 .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound a.bx-vote-counter.total-count,
 .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound span.bx-vote-counter.total-count {
     width: auto;
     height: auto;
     margin-left: 0.5rem;
+}
+.bx-dir-rtl .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound a.bx-vote-counter.total-count,
+.bx-dir-rtl .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound span.bx-vote-counter.total-count {
+    margin-left: 0;
     margin-right: 0.5rem;
 }
-.bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound a.bx-vote-counter.total-count .sys-action-counter-text:first-child,
-.bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound span.bx-vote-counter.total-count .sys-action-counter-text:first-child {
+.bx-dir-ltr .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound a.bx-vote-counter.total-count .sys-action-counter-text:first-child,
+.bx-dir-ltr .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound span.bx-vote-counter.total-count .sys-action-counter-text:first-child {
     margin-left: 0;
 }
+.bx-dir-rtl .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound a.bx-vote-counter.total-count .sys-action-counter-text:first-child,
+.bx-dir-rtl .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound span.bx-vote-counter.total-count .sys-action-counter-text:first-child {
+    margin-right: 0;
+}
 .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound span.bx-vote-counter:not(.total-count) {
     margin-left: -0.5rem;
 }
+.bx-dir-rtl .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound span.bx-vote-counter:not(.total-count) {
+    margin-left: 0;
+    margin-right: -0.5rem;
+}
 .bx-media-phone .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound span.bx-vote-counter:not(.total-count),
 .bx-media-tablet .bx-layout-column-thin .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound span.bx-vote-counter:not(.total-count),
 .bx-media-tablet .bx-layout-column-half .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound span.bx-vote-counter:not(.total-count) {
     margin-left: -0.75rem;
 }
+.bx-media-phone .bx-dir-rtl .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound span.bx-vote-counter:not(.total-count),
+.bx-media-tablet .bx-dir-rtl .bx-layout-column-thin .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound span.bx-vote-counter:not(.total-count),
+.bx-media-tablet .bx-dir-rtl .bx-layout-column-half .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound span.bx-vote-counter:not(.total-count) {
+    margin-left: 0;
+    margin-right: -0.75rem;
+}
 .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound .bx-vote-counter-label {
     padding: 0;
 }

template/score_by_list.html

@@ -4,8 +4,8 @@
 			<bx_repeat:list>
 				<div class="__style_prefix__-by-item bx-def-padding-sec bx-clearfix">
 				    <div class="__style_prefix__-bi-vote">__vote__</div>
-				    <div class="__style_prefix__-bi-user bx-def-padding-sec-left">__user_unit__</div>
-				    <div class="__style_prefix__-bi-info bx-def-padding-sec-left">
+				    <div class="__style_prefix__-bi-user bx-def-padding-sec-left bx-dir">__user_unit__</div>
+				    <div class="__style_prefix__-bi-info bx-def-padding-sec-left bx-dir">
 				        <div><a href="__user_link__">__user_name__</a></div>
 				        <div class="bx-def-font-small bx-def-font-grayed">__date__</div>
 				    </div>

template/view_by_list.html

@@ -5,7 +5,7 @@
                 <div class="__style_prefix__-by-item p-2">
                     <div class="__style_prefix__-user flex items-center">
                         <div class="__style_prefix__-user-avatar h-10 w-10">__user_unit__</div>
-                        <div class="__style_prefix__-user-info ml-4">
+                        <div class="__style_prefix__-user-info ltr:ml-4 rtl:mr-4">
                             <div class="__style_prefix__-user-name text-sm text-gray-500 dark:text-gray-400">
                                 <a href="__user_url__" class="__style_prefix__-user-name" title="__user_title__">__user_name__</a>
                                 <bx_if:show_user_info><br /><span class="__style_prefix__-user-info">__user_info__</span></bx_if:show_user_info>