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

inc/classes/BxDolTemplate.php

@@ -2000,14 +2000,16 @@ class BxDolTemplate extends BxDolFactory implements iBxDolSingleton
                     if(isset($aMix['dark']) && (int)$aMix['dark'] == 1)
                         $sRet .= ' dark';
                 }
+
+                $sRet .= ' bx-dir-' . strtolower(bx_lang_direction());
                 break;
-			case 'css_media_phone':
-			case 'css_media_phone2':
-			case 'css_media_tablet':
-			case 'css_media_tablet2':
-			case 'css_media_desktop':
+            case 'css_media_phone':
+            case 'css_media_phone2':
+            case 'css_media_tablet':
+            case 'css_media_tablet2':
+            case 'css_media_desktop':
                 $aData = json_decode(getParam('sys_css_media_classes'), true);
-				$sKey = str_replace('css_media_', '', $sKey);
+                $sKey = str_replace('css_media_', '', $sKey);
                 $sRet = $aData[$sKey];
                 break;
             case 'service_worker':

modules/base/profile/template/unit.html

@@ -12,7 +12,7 @@
             <div class="bx-base-pofile-unit-online"></div>
         </bx_if:show_online>
     </div>
-    <div class="bx-def-unit-info bx-def-__size__-size-min-height bx-def-__size__-size-max-height flex items-center max-w-32 ml-4">
+    <div class="bx-def-unit-info bx-def-__size__-size-min-height bx-def-__size__-size-max-height flex items-center max-w-32 ltr:ml-4 rtl:mr-4">
         <div class="bx-def-unit-info-cnt box-border overflow-hidden">
             <div class="bx-def-unit-line truncate">
                 <a class="bx-def-unit-info-title" href="__content_url__" onclick="__content_click__">__title__</a>

modules/base/text/template/css/main.css

@@ -29,17 +29,13 @@
 }
 
 .bx-base-text-unit-cover {
-	position: relative;
+    position: relative;
 }
 .bx-base-text-unit-text {
-	width: 100%;
-	overflow: hidden;
+    width: 100%;
+    overflow: hidden;
     text-overflow: ellipsis;
 }
-.bx-base-text-unit-ext .bx-base-text-unit-text {
-	text-align: left;
-}
-
 .bx-base-text-unit-title {
     display: flex;
     white-space: nowrap;

modules/boonex/ads/template/categories.html

@@ -2,12 +2,12 @@
     <div class="bx-ads-categories-cnt">
         <bx_repeat:categories>
             <div class="bx-ads-category bx-def-padding-thd-topbottom">
-                <bx_if:show_icon><span class="bx-def-padding-sec-right"><i class="sys-icon __icon__"></i></span></bx_if:show_icon>
+                <bx_if:show_icon><span class="ltr:pr-2 rtl:pl-2"><i class="sys-icon __icon__"></i></span></bx_if:show_icon>
                 <a href="__url__">__title__</a>
-                <bx_if:show_counter><span class="bx-def-padding-sec-left">(__items__)</span></bx_if:show_counter>
+                <bx_if:show_counter><span class="pl-2">(__items__)</span></bx_if:show_counter>
             </div>
             <bx_if:show_subcategories>
-                <div class="bx-ads-subcategories bx-def-margin-left bx-def-padding-sec-left">__subcategories__</div>
+                <div class="bx-ads-subcategories ltr:ml-4 ltr:pl-2 rtl:mr-4 rtl:pr-2">__subcategories__</div>
             </bx_if:show_subcategories>
         </bx_repeat:categories>
     </div>

modules/boonex/artificer/data/template/bx_timeline/item_outline.html

@@ -15,7 +15,7 @@
             </bx_if:show_note>
             <div class="__style_prefix__-item-owner flex items-center px-3 md:px-4 mt-3 md:mt-4 __class_owner__"> 
                 <div class="__style_prefix__-owner-avatar flex-shrink-0">__item_owner_unit__</div>
-                <div class="__style_prefix__-owner-info min-w-0 ml-3 overflow-hidden">
+                <div class="__style_prefix__-owner-info min-w-0 ltr:ml-3 rtl:mr-3 overflow-hidden">
                     <div class="__style_prefix__-owner-name flex flex-wrap items-center">
                         <a href="__item_owner_url__" class="__style_prefix__-owner-name bx-def-font-author flex items-center min-w-0 mr-1 hover:text-gray-900 dark:hover:text-white" title="__item_owner_title__"><div class="truncate">__item_owner_name__</div>__item_owner_badges__</a>
                         <bx_if:show_owner_actions>

modules/boonex/artificer/data/template/bx_timeline/item_timeline.html

@@ -14,7 +14,7 @@
         </bx_if:show_note>
         <div class="__style_prefix__-item-owner flex items-center px-3 md:px-4 mt-3 md:mt-4 __class_owner__"> 
             <div class="__style_prefix__-owner-avatar flex-shrink-0">__item_owner_unit__</div>
-            <div class="__style_prefix__-owner-info min-w-0 ml-3 overflow-hidden">
+            <div class="__style_prefix__-owner-info min-w-0 ltr:ml-3 rtl:mr-3 overflow-hidden">
                 <div class="__style_prefix__-owner-name flex flex-wrap items-center">
                     <a href="__item_owner_url__" class="__style_prefix__-owner-name bx-def-font-author flex items-center min-w-0 mr-1 hover:text-gray-900 dark:hover:text-white" title="__item_owner_title__"><div class="truncate">__item_owner_name__</div>__item_owner_badges__</a> 
                     <bx_if:show_owner_actions>

modules/boonex/artificer/data/template/mod_profile/cover.html

@@ -28,7 +28,7 @@
                     </bx_if:show_avatar_placeholder>
                     <div class="bx-base-pofile-cover-user relative flex flex-col lg:flex-row lg:items-start lg:justify-end mt-6 sm:pb-1 lg:w-full box-border">
                         <div class="bx-base-profile-cover-title-bages min-w-0 flex-1 lg:mt-14 lg:mr-12 mb-2">
-                            <h1 class="bx-def-unit-info pl-1 text-gray-900 dark:text-gray-50 text-center lg:text-left text-4xl leading-14 font-bold truncate">__title__ </h1>
+                            <h1 class="bx-def-unit-info pl-1 text-gray-900 dark:text-gray-50 text-center ltr:lg:text-left rtl:lg:text-right text-4xl leading-14 font-bold truncate">__title__ </h1>
                             <div class="bx-base-profile-cover-meta-holder mt-2 lg:h-8">
                                 <div class="bx-base-profile-cover-meta lg:absolute flex flex-row flex-wrap justify-center lg:justify-start text-sm">__meta__</div>
                             </div>

modules/boonex/artificer/data/template/mod_text/css/main.css

@@ -3,7 +3,7 @@
     width: 100%;
 }
 .bx-base-text-unit-cover {
-	position: relative;
+    position: relative;
 }
 .bx-base-text-unit-cover img {
     position: relative;
@@ -13,9 +13,6 @@
     min-height: 300px;
     object-fit: cover;
 }
-.bx-base-text-unit-ext .bx-base-text-unit-text {
-    text-align: left;
-}
 
 /*-- Browsing: Search results --*/
 .bx-base-text-unit-gallery-wrapper {

modules/boonex/artificer/data/template/mod_text/menu_custom_actions.html

@@ -1,6 +1,6 @@
-<ul id="__html_id__" class="bx-menu-custom bx-menu-custom-hor bx-menu-hor-inline<bx_if:show_more_auto_class> bx-menu-more-auto</bx_if:show_more_auto_class> bx-menu-object-__object__ flex justify-left items-stretch space-y-0 space-x-3">
+<ul id="__html_id__" class="bx-menu-custom bx-menu-custom-hor bx-menu-hor-inline<bx_if:show_more_auto_class> bx-menu-more-auto</bx_if:show_more_auto_class> bx-menu-object-__object__ flex justify-left items-stretch space-y-0 space-x-3 rtl:space-x-reverse">
     <bx_repeat:menu_items>
-        <li class="bx-menu-item bx-menu-item-__name____class__ group inline-flex items-center px-4 py-2 first:ml-0 border border-gray-300 dark:border-gray-700 shadow-sm hover:shadow-md text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 dark:hover:text-white hover:text-gray-800 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">__item__</li>
+        <li class="bx-menu-item bx-menu-item-__name____class__ group inline-flex items-center px-4 py-2 ltr:first:ml-0 rtl:first:mr-0 border border-gray-300 dark:border-gray-700 shadow-sm hover:shadow-md text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 dark:hover:text-white hover:text-gray-800 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">__item__</li>
     </bx_repeat:menu_items>
 </ul>
 __js_code__

modules/boonex/artificer/data/template/system/css/menu-sidebar.css

@@ -109,9 +109,16 @@
 }
 .bx-sidebar.bx-sidebar-account .bx-menu-account-popup-profile-notifications .bx-menu-item-addon.bx-def-unit-alert {
     top: auto;
-    right: 0.5rem;
     padding: 0 0.25rem;
 }
+.bx-dir-ltr .bx-sidebar.bx-sidebar-account .bx-menu-account-popup-profile-notifications .bx-menu-item-addon.bx-def-unit-alert {
+    left: auto;
+    right: 0.5rem;
+}
+.bx-dir-rtl .bx-sidebar.bx-sidebar-account .bx-menu-account-popup-profile-notifications .bx-menu-item-addon.bx-def-unit-alert {
+    left: 0.5rem;
+    right: auto;
+}
 
 .bx-sidebar.bx-sidebar-account .bx-menu-account-popup-profile-create .bx-map-profile-create-cnt {
     padding-bottom: 0;

modules/boonex/artificer/data/template/system/menu_floating_blocks_wide.html

@@ -2,7 +2,7 @@
     <bx_repeat:menu_items>
         <li class="bx-menu-item bx-menu-item-__name__ __class_add__ bx-stl-mil-hover group relative flex justify-between items-center px-4 text-gray-600 dark:text-gray-300 text-sm font-medium">
             <a class="flex flex-1 items-center py-2" href="__link__" <bx_if:onclick>onclick="__onclick__"</bx_if:onclick> __attrs__>
-                <div class="bx-menu-floating-blocks-icon flex items-center justify-center h-5 w-5 mr-2">
+                <div class="bx-menu-floating-blocks-icon flex items-center justify-center h-5 w-5 ltr:mr-2 rtl:ml-2">
                     <bx_if:icon><i class="sys-icon __icon__"></i></bx_if:icon>
                     <bx_if:image><img class="h-5 w-5 bg-contain" style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></bx_if:image>
                     <bx_if:icon-html>__icon__</bx_if:icon-html>

modules/boonex/artificer/data/template/system/menu_toolbar.html

@@ -1,12 +1,14 @@
 <ul class="bx-menu-toolbar bx-menu-object-__object__ flex items-center pr-0 md:pr-2">
     <bx_repeat:menu_items>
-        <li id="bx-menu-toolbar-item-__name__" class="bx-menu-toolbar-item bx-menu-item-__name__ group relative inline-flex items-center mr-2 last:mr-0 bx-mdr-hidden:mr-0 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 text-base font-medium leading-6 border border-transparent hover:border-gray-200/50 active:border-gray-300 dark:hover:border-gray-700/50 dark:active:border-gray-700 bg-gray-100 dark:bg-gray-700/50 active:bg-gray-300 dark:active:bg-black/50 hover:bg-gray-200/50 dark:hover:bg-gray-700/50 rounded-full __class_add__">
+        <li id="bx-menu-toolbar-item-__name__" class="bx-menu-toolbar-item bx-menu-item-__name__ group relative inline-flex items-center ltr:mr-2 ltr:last:mr-0 rtl:ml-2 rtl:last:ml-0 bx-mdr-hidden:mr-0 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 text-base font-medium leading-6 border border-transparent hover:border-gray-200/50 active:border-gray-300 dark:hover:border-gray-700/50 dark:active:border-gray-700 bg-gray-100 dark:bg-gray-700/50 active:bg-gray-300 dark:active:bg-black/50 hover:bg-gray-200/50 dark:hover:bg-gray-700/50 rounded-full __class_add__">
             <a href="__link__" <bx_if:onclick>onclick="__onclick__"</bx_if:onclick> class="inline-block rounded-full __class_add_a__"__attrs__>
-                <bx_if:icon><span class="relative flex items-center justify-center h-10 w-10"><i class="sys-icon __icon__"></i></bx_if:icon>
+                <bx_if:icon><span class="relative flex items-center justify-center h-10 w-10"><i class="sys-icon __icon__"></i></span></bx_if:icon>
                 <bx_if:icon-a><i class="sys-icon-a" data-rotate="down" data-icon="__icon-a__" data-color="#fff"></i></bx_if:icon-a>
                 <bx_if:image><img class="" src="__icon_url__" /></bx_if:image>
                 <bx_if:icon-html><span class="relative flex items-center justify-center h-10 w-10">__icon__</span></bx_if:icon-html>
-                <bx_if:unit><div class="bx-menu-toolbar-item-unit">__unit__</div></bx_if:unit><bx_if:addon>__addonf__</bx_if:addon><bx_if:title><span class="bx-menu-toolbar-item-title sr-only">__title__</span></bx_if:title>
+                <bx_if:unit><div class="bx-menu-toolbar-item-unit">__unit__</div></bx_if:unit>
+                <bx_if:addon>__addonf__</bx_if:addon>
+                <bx_if:title><span class="bx-menu-toolbar-item-title sr-only">__title__</span></bx_if:title>
             </a>
         </li>
     </bx_repeat:menu_items>

modules/boonex/credits/install/sql/enable.sql

@@ -104,7 +104,7 @@ INSERT INTO `sys_menu_items` (`set_name`, `module`, `name`, `title_system`, `tit
 -- MENU: member toolbar
 SET @iMenuToolbarMenuOrder = (SELECT IFNULL(MAX(`order`), 0) FROM `sys_menu_items` WHERE `set_name`='sys_toolbar_member' LIMIT 1);
 INSERT INTO `sys_menu_items`(`set_name`, `module`, `name`, `title_system`, `title`, `link`, `onclick`, `target`, `icon`, `addon`, `markers`, `submenu_object`, `submenu_popup`, `visible_for_levels`, `active`, `copyable`, `order`) VALUES 
-('sys_toolbar_member', 'bx_credits', 'credits-history', '_bx_credits_menu_item_title_system_history', '_bx_credits_menu_item_title_history', 'page.php?i=credits-history-common', '', '', '', '', 'a:2:{s:6:"module";s:10:"bx_credits";s:6:"method";s:26:"get_menu_item_addon_amount";}', '', 0, 2147483646, 0, 1, 0);
+('sys_toolbar_member', 'bx_credits', 'credits-history', '_bx_credits_menu_item_title_system_history', '_bx_credits_menu_item_title_history', 'page.php?i=credits-history-common', '', '', 'copyright col-green3', '', 'a:2:{s:6:"module";s:10:"bx_credits";s:6:"method";s:26:"get_menu_item_addon_amount";}', '', 0, 2147483646, 0, 1, 0);
 
 -- MENU: Notifications
 SET @iAccountNotificationsMenuOrder = (SELECT IFNULL(MAX(`order`), 0) FROM `sys_menu_items` WHERE `set_name` = 'sys_account_notifications' AND `order` < 9999);

modules/boonex/files/template/css/main.css

@@ -60,23 +60,11 @@
     max-width: 33.25%;
 }
 
-
-
-.bx-files-text-unit .bx-base-text-unit-text {
-    position:relative;
-}
-
 .bx-files-text-unit .bx-base-text-unit-text .sys-icon {
-    position: absolute;
     line-height: normal;
     font-size: 3.2rem;
 }
 
-.bx-files-text-unit .bx-base-text-unit-text h2,
-.bx-files-text-unit .bx-base-text-unit-text > div {
-    margin-left:3.5rem;
-}
-
 /*--- View page ---*/
 .bx-files-entity-preview {
     overflow: hidden;

modules/boonex/files/template/unit.html

@@ -4,12 +4,16 @@
             <img class="bx-base-text-unit-cover bx-def-round-corners aspect-video object-cover bg-cover" alt="__title__" src="__thumb_url__" />
         </div>
     </bx_if:thumb>
-    <div class="bx-base-text-unit-text bx-def-padding bx-def-box-sizing">
-        <i class="sys-icon __icon__"></i>
-        <h2><a href="__content_url__">__title__</a></h2>
-        <div class="bx-base-text-unit-info bx-def-margin-sec-top bx-def-font-small">
-            <bx_if:meta><div class="bx-base-general-unit-meta">__meta__</div></bx_if:meta>
+    <div class="bx-base-text-unit-text bx-def-padding bx-def-box-sizing flex flex-row flex-wrap">
+        <div class="flex-none">
+            <i class="sys-icon __icon__"></i>
         </div>
-        <div class="bx-base-text-unit-summary bx-def-margin-sec-top bx-clearfix">__summary__</div> 
+        <div class="flex-1 ltr:ml-4 rtl:mr-4">
+            <h2><a href="__content_url__">__title__</a></h2>
+            <div class="bx-base-text-unit-info bx-def-margin-sec-top bx-def-font-small">
+                <bx_if:meta><div class="bx-base-general-unit-meta">__meta__</div></bx_if:meta>
+            </div>
+        </div>
+        <div class="bx-base-text-unit-summary bx-def-margin-sec-top w-full">__summary__</div> 
     </div>
 </div>

modules/boonex/forum/template/score_element_inline.html

@@ -1,7 +1,7 @@
 <span id="__html_id__" class="sys-action __style_prefix__ __class__ inline-flex items-center whitespace-nowrap" bx_score_data_score="__score__" bx_score_data_cup="__cup__" bx_score_data_cdown="__cdown__">
     <span class="sys-action-cnt __style_prefix__-cnt relative z-0 inline-flex shadow-sm rounded-md">
         <bx_if:show_do_vote_up>
-            <span class="sys-action-element-holder __style_prefix__-element-holder __style_prefix__-eh-__style__ -mr-px border relative inline-flex items-center px-1.5 py-1 rounded-l-md shadow-sm hover:shadow active:shadow-none font-medium text-xs bg-gray-100 text-gray-600 hover:text-gray-900 active:text-gray-900 border-gray-300  active:bg-gray-300  active:border-gray-400 hover:bg-white dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-700/50  dark:active:bg-gray-800 dark:active:border-gray-700  dark:text-gray-300 dark:hover:text-white dark:active:text-gray-200">__do_vote__</span>
+            <span class="sys-action-element-holder __style_prefix__-element-holder __style_prefix__-eh-__style__ -mr-px border relative inline-flex items-center px-1.5 py-1 ltr:rounded-l-md rtl:rounded-r-md shadow-sm hover:shadow active:shadow-none font-medium text-xs bg-gray-100 text-gray-600 hover:text-gray-900 active:text-gray-900 border-gray-300  active:bg-gray-300  active:border-gray-400 hover:bg-white dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-700/50  dark:active:bg-gray-800 dark:active:border-gray-700  dark:text-gray-300 dark:hover:text-white dark:active:text-gray-200">__do_vote__</span>
             <bx_if:show_counter_up><span class="sys-action-counter-holder __style_prefix__-counter-holder __style_prefix__-ch-__style__ -mr-px border relative inline-flex items-center px-1.5 py-1 shadow-sm hover:shadow active:shadow-none font-medium text-xs bg-gray-100 text-gray-600 hover:text-gray-900 active:text-gray-900 border-gray-300  active:bg-gray-300  active:border-gray-400 hover:bg-white dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-700/50  dark:active:bg-gray-800 dark:active:border-gray-700 dark:text-gray-300 dark:hover:text-white dark:active:text-gray-200"<bx_if:show_cup_hidden> style="display:none"</bx_if:show_cup_hidden>>__counter__</span></bx_if:show_counter_up>
         </bx_if:show_do_vote_up>
         <bx_if:show_counter>
@@ -9,7 +9,7 @@
         </bx_if:show_counter>
         <bx_if:show_do_vote_down>
             <bx_if:show_counter_down><span class="sys-action-counter-holder __style_prefix__-counter-holder __style_prefix__-ch-__style__ -mr-px border relative inline-flex items-center px-1.5 py-1 shadow-sm hover:shadow active:shadow-none font-medium text-xs bg-gray-100 text-gray-600 hover:text-gray-900 active:text-gray-900 border-gray-300  active:bg-gray-300  active:border-gray-400 hover:bg-white dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-700/50  dark:active:bg-gray-800 dark:active:border-gray-700 dark:text-gray-300 dark:hover:text-white dark:active:text-gray-200"<bx_if:show_cdown_hidden> style="display:none"</bx_if:show_cdown_hidden>>__counter__</span></bx_if:show_counter_down>
-            <span class="sys-action-element-holder __style_prefix__-element-holder __style_prefix__-eh-__style__ -ml-px border relative inline-flex items-center px-1.5 py-1 rounded-r-md shadow-sm hover:shadow active:shadow-none font-medium text-xs bg-gray-100 text-gray-600 hover:text-gray-900 active:text-gray-900 border-gray-300  active:bg-gray-300  active:border-gray-400 hover:bg-white dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-700/50  dark:active:bg-gray-800 dark:active:border-gray-700  dark:text-gray-300 dark:hover:text-white dark:active:text-gray-200">__do_vote__</span>
+            <span class="sys-action-element-holder __style_prefix__-element-holder __style_prefix__-eh-__style__ -ml-px border relative inline-flex items-center px-1.5 py-1 ltr:rounded-r-md rtl:rounded-l-md shadow-sm hover:shadow active:shadow-none font-medium text-xs bg-gray-100 text-gray-600 hover:text-gray-900 active:text-gray-900 border-gray-300  active:bg-gray-300  active:border-gray-400 hover:bg-white dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-700/50  dark:active:bg-gray-800 dark:active:border-gray-700  dark:text-gray-300 dark:hover:text-white dark:active:text-gray-200">__do_vote__</span>
         </bx_if:show_do_vote_down>
     </span>__script__
 </span>

modules/boonex/reputation/install/sql/install.sql

@@ -88,7 +88,7 @@ INSERT INTO `sys_objects_form` (`object`, `module`, `title`, `action`, `form_att
 ('bx_reputation_level', @sName, '_bx_reputation_form_level', '', '', 'do_submit', 'bx_reputation_levels', 'id', '', '', '', 0, 1, 'BxReputationFormLevel', 'modules/boonex/reputation/classes/BxReputationFormLevel.php');
 
 INSERT INTO `sys_form_displays` (`display_name`, `module`, `object`, `title`, `view_mode`) VALUES
-('bx_reputation_level_add', @sName, 'bx_reputation_level', '_bx_reputation_form_level_display_add', 0);
+('bx_reputation_level_add', @sName, 'bx_reputation_level', '_bx_reputation_form_level_display_add', 0),
 ('bx_reputation_level_edit', @sName, 'bx_reputation_level', '_bx_reputation_form_level_display_edit', 0);
 
 INSERT INTO `sys_form_inputs` (`object`, `module`, `name`, `value`, `values`, `checked`, `type`, `caption_system`, `caption`, `info`, `required`, `collapsed`, `html`, `attrs`, `attrs_tr`, `attrs_wrapper`, `checker_func`, `checker_params`, `checker_error`, `db_pass`, `db_params`, `editable`, `deletable`) VALUES

template/_page_toolbar.html

@@ -16,7 +16,7 @@
                         <bx_injection:injection_logo_after />
                     </div>
                     <!-- Menu -->
-                    <div class="bx-toolbar-item bx-ti-menu flex-2 hidden lg:block w-64 ml-4">
+                    <div class="bx-toolbar-item bx-ti-menu flex-2 hidden lg:block w-64 ltr:ml-4 rtl:mr-4">
                         <div id="bx-menu-toolbar-1-container" class="bx-toolbar-item bx-ti-menu w-full">
                             <bx_menu:sys_site />
                         </div>

template/comment_do_comment_label.html

@@ -1 +1 @@
-<span class="sys-action-do __style_prefix__-do bx-def-valign-center"><bx_if:show_icon><span class="sys-action-do-icon __style_prefix__-do-icon bx-def-align-center">__icon__</span></bx_if:show_icon><bx_if:show_text><span class="sys-action-do-text __style_prefix__-do-text bx-def-margin-sec-left-auto">__text__</span></bx_if:show_text></span>
+<span class="sys-action-do __style_prefix__-do bx-def-valign-center"><bx_if:show_icon><span class="sys-action-do-icon __style_prefix__-do-icon bx-def-align-center">__icon__</span></bx_if:show_icon><bx_if:show_text><span class="sys-action-do-text __style_prefix__-do-text ltr:ml-2 ltr:first:ml-0 rtl:mr-2 rtl:first:mr-0">__text__</span></bx_if:show_text></span>

template/connection_counter_label.html

@@ -7,11 +7,11 @@
     <bx_if:show_profiles>
         <span class="sys-action-counter-profiles __style_prefix__-counter-profiles flex">
             <bx_repeat:profiles>
-                <span class="sys-action-counter-profile __style_prefix__-counter-profile block -ml-2 first:ml-0">__unit__</span>
+                <span class="sys-action-counter-profile __style_prefix__-counter-profile block ltr:-ml-2 ltr:first:ml-0 rtl:-mr-2 rtl:first:mr-0">__unit__</span>
             </bx_repeat:profiles>
         </span>
     </bx_if:show_profiles>
     <bx_if:show_text>
-        <span class="sys-action-counter-text __style_prefix__-counter-text ml-1">__text__</span>
+        <span class="sys-action-counter-text __style_prefix__-counter-text ltr:ml-1 rtl:mr-1">__text__</span>
     </bx_if:show_text>
 </span>

template/create_post_form.html

@@ -11,7 +11,7 @@
             </div>
             <div class="sys-cpf-form sys-cpf-default flex items-center p-4 bg-gray-50 hover:bg-white dark:bg-gray-900/50 dark:hover:bg-gray-900 shadow hover:shadow-md ring-1 ring-gray-300 dark:ring-gray-700 rounded-md cursor-pointer" onclick="__js_object__.getForm('__default__')">
                 <div class="sys-cpf-user">__user_thumb__</div>
-                <div class="sys-cpf-content flex text-base ml-4 text-gray-500 dark:text-gray-400">
+                <div class="sys-cpf-content flex text-base ltr:ml-4 rtl:mr-4 text-gray-500 dark:text-gray-400">
                     <div>__placeholder__</div>
                 </div>
             </div>

template/css/tailwind.css

@@ -1104,7 +1104,7 @@
     .bx-stl-mil-sm .sys-action-do-icon > *,
     .bx-stl-mil-wo-gaps .sys-action-do-icon > *,
     .bx-stl-mil-wo-gaps-sm .sys-action-do-icon > * {
-        @apply flex items-center justify-center h-6 w-6 mr-3;
+        @apply flex items-center justify-center h-6 w-6 ltr:mr-3 rtl:ml-3;
     }
     .bx-stl-mii:last-child > *,
     .bx-stl-mii-sm:last-child > *,
@@ -1182,7 +1182,7 @@
 
     /* Common elements: Profile Cover */
     .bx-artificer .bx-base-pofile-cover-thumb + .bx-base-pofile-cover-user {
-        @apply lg:pl-52;
+        @apply ltr:lg:pl-52 rtl:lg:pr-52;
     }
 
     .bx-artificer .bx-base-pofile-cover-actions div.bx-base-general-entity-actions .bx-menu-custom-hor.bx-menu-hor-inline li.bx-mi-primary {
@@ -1254,6 +1254,10 @@
         @apply text-gray-800 hover:text-blue-500 dark:text-gray-100 dark:hover:text-blue-400 hover:no-underline;
     }
 
+    .bx-base-text-unit-ext .bx-base-text-unit-text {
+	@apply ltr:text-left rtl:text-right;
+    }
+
     div.bx-tl-item-image{
         @apply aspect-video lg:aspect-auto rounded-lg;
     }

template/layout_2_columns.html

@@ -1,7 +1,7 @@
 <!-- layout 2 columns [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-2-columns">
     <div class="bx-layout-row">
-        <aside class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half md:w-1/2 md:pr-4 lg:pr-6" aria-label="Sidebar">
+        <aside class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half md:w-1/2 ltr:md:pr-4 ltr:lg:pr-6 rtl:md:pl-4 rtl:lg:pl-6" aria-label="Sidebar">
             <div class="bx-layout-cell" id="bx-layout-cell-1">
                 __cell_1__
             </div>

template/layout_3_columns.html

@@ -1,13 +1,13 @@
 <!-- layout 3 columns [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-3-columns">
     <div class="bx-layout-row">
-        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/3 flex-auto md:flex-none md:pr-4 lg:pr-6" aria-label="Sidebar" >
+        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/3 flex-auto md:flex-none ltr:md:pr-4 ltr:lg:pr-6 rtl:md:pl-4 rtl:lg:pl-6" aria-label="Sidebar" >
             <div class="bx-layout-cell" id="bx-layout-cell-1">
                 __cell_1__
             </div>
         </section>
         <section aria-label="Content" class="max-w-full md:w-2/3 flex-1 flex flex-wrap lg:flex-nowrap bx-layout-gap">
-            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto lg:flex-none lg:w-1/2 lg:pr-6" aria-label="Main">
+            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto lg:flex-none lg:w-1/2 ltr:lg:pr-6 rtl:lg:pl-6" aria-label="Main">
                 <div class="bx-layout-cell" id="bx-layout-cell-2">
                     __cell_2__
                 </div>

template/layout_bar_content_bar.html

@@ -1,13 +1,13 @@
 <!-- layout bar content bar (bcb) [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-bcb">
     <div class="bx-layout-row">
-        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/4 flex-auto md:flex-none md:pr-4 lg:pr-6" aria-label="Sidebar" >
+        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/4 flex-auto md:flex-none ltr:md:pr-4 ltr:lg:pr-6 rtl:md:pl-4 rtl:lg:pl-6" aria-label="Sidebar" >
             <div class="bx-layout-cell" id="bx-layout-cell-1">
                 __cell_1__
             </div>
         </section>
         <section aria-label="Content" class="max-w-full md:w-3/4 flex-1 flex flex-wrap lg:flex-nowrap bx-layout-gap">
-            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto lg:w-2/3 lg:pr-6" aria-label="Main">
+            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto lg:w-2/3 ltr:lg:pr-6 rtl:lg:pl-6" aria-label="Main">
                 <div class="bx-layout-cell" id="bx-layout-cell-2">
                     __cell_2__
                 </div>

template/layout_bar_left.html

@@ -1,7 +1,7 @@
 <!-- layout bar left [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-bar-left">
     <div class="bx-layout-row">
-        <aside class="bx-layout-col bx-layout-bar-left-bar bx-layout-column-thin md:w-1/3 md:pr-4 lg:pr-6" aria-label="Sidebar">
+        <aside class="bx-layout-col bx-layout-bar-left-bar bx-layout-column-thin md:w-1/3 ltr:md:pr-4 ltr:lg:pr-6 rtl:md:pl-4 rtl:lg:pl-6" aria-label="Sidebar">
             <div class="bx-layout-cell" id="bx-layout-cell-1">
                 __cell_1__
             </div>

template/layout_bar_right.html

@@ -1,7 +1,7 @@
 <!-- layout bar right [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-bar-right">
     <div class="bx-layout-row">
-        <main class="bx-layout-col bx-layout-bar-right-content bx-layout-column-wide md:w-2/3 md:pr-4 lg:pr-6" aria-label="Main">
+        <main class="bx-layout-col bx-layout-bar-right-content bx-layout-column-wide md:w-2/3 ltr:md:pr-4 ltr:lg:pr-6 rtl:md:pl-4 rtl:lg:pl-6" aria-label="Main">
             <div class="bx-layout-cell" id="bx-layout-cell-1">
                 __cell_1__
             </div>

template/layout_bottom_area_2_columns.html

@@ -1,7 +1,7 @@
 <!-- layout top area 2 columns [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-bottom-area-2-columns">
     <div class="bx-layout-row">
-        <aside class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half md:w-1/2 md:pr-4 lg:pr-6" aria-label="Sidebar">
+        <aside class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half md:w-1/2 ltr:md:pr-4 ltr:lg:pr-6 rtl:md:pl-4 rtl:lg:pl-6" aria-label="Sidebar">
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>

template/layout_top_area_2_columns.html

@@ -2,7 +2,7 @@
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-top-area-2-columns">
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row">
-        <aside class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half md:w-1/2 md:pr-4 lg:pr-6" aria-label="Sidebar">
+        <aside class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half md:w-1/2 ltr:md:pr-4 ltr:lg:pr-6 rtl:md:pl-4 rtl:lg:pl-6" aria-label="Sidebar">
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>

template/layout_top_area_3_columns.html

@@ -2,13 +2,13 @@
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-top-area-3-columns">
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row" >
-        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/3 flex-auto md:flex-none md:pr-4 lg:pr-6" aria-label="Sidebar">
+        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/3 flex-auto md:flex-none ltr:md:pr-4 ltr:lg:pr-6 rtl:md:pl-4 rtl:lg:pl-6" aria-label="Sidebar">
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>
         </section>
         <section aria-label="Content" class="max-w-full md:w-2/3 flex-1 flex flex-wrap lg:flex-nowrap bx-layout-gap" >
-            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto lg:flex-none lg:w-1/2 lg:pr-6" aria-label="Main">
+            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto lg:flex-none lg:w-1/2 ltr:lg:pr-6 rtl:lg:pl-6" aria-label="Main">
                 <div class="bx-layout-cell" id="bx-layout-cell-3">
                     __cell_3__
                 </div>

template/layout_top_area_bar_content_bar.html

@@ -2,13 +2,13 @@
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-top-area-bcb">
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row">
-        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/4 flex-auto md:flex-none md:pr-4 lg:pr-6" aria-label="Sidebar" >
+        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/4 flex-auto md:flex-none ltr:md:pr-4 ltr:lg:pr-6 rtl:md:pl-4 rtl:lg:pl-6" aria-label="Sidebar" >
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>
         </section>
         <section aria-label="Content" class="max-w-full md:w-3/4 flex-1 flex flex-wrap lg:flex-nowrap bx-layout-gap">
-            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto lg:flex-none lg:w-2/3 lg:pr-6" aria-label="Main">
+            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto lg:flex-none lg:w-2/3 ltr:lg:pr-6 rtl:lg:pl-6" aria-label="Main">
                 <div class="bx-layout-cell" id="bx-layout-cell-3">
                     __cell_3__
                 </div>

template/layout_top_area_bar_left.html

@@ -2,7 +2,7 @@
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-top-area-bar-left">
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row">
-        <main class="bx-layout-col bx-layout-bar-left-bar bx-layout-column-thin md:w-1/3 md:pr-4 lg:pr-6" aria-label="Main">
+        <main class="bx-layout-col bx-layout-bar-left-bar bx-layout-column-thin md:w-1/3 ltr:md:pr-4 ltr:lg:pr-6 rtl:md:pl-4 rtl::lg:pl-6" aria-label="Main">
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>

template/layout_top_area_bar_right.html

@@ -2,7 +2,7 @@
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-top-area-bar-right">
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row">
-        <main class="bx-layout-col bx-layout-bar-right-content bx-layout-column-wide md:w-2/3 md:pr-4 lg:pr-6" aria-label="Main">
+        <main class="bx-layout-col bx-layout-bar-right-content bx-layout-column-wide md:w-2/3 ltr:md:pr-4 ltr:lg:pr-6 rtl:md:pl-4 rtl:lg:pl-6" aria-label="Main">
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>

template/layout_topbottom_area_2_columns.html

@@ -2,7 +2,7 @@
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-topbottom-area-2-columns">
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row">
-        <aside class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half md:w-1/2 md:pr-4 lg:pr-6" aria-label="Sidebar">
+        <aside class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half md:w-1/2 ltr:md:pr-4 ltr:lg:pr-6 rtl:md:pl-4 rtl:lg:pl-6" aria-label="Sidebar">
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>

template/layout_topbottom_area_bar_left.html

@@ -2,7 +2,7 @@
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-topbottom-area-bar-left">
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row">
-        <aside class="bx-layout-col bx-layout-bar-left-bar bx-layout-column-thin md:w-1/3 md:pr-4 lg:pr-6" aria-label="Sidebar">
+        <aside class="bx-layout-col bx-layout-bar-left-bar bx-layout-column-thin md:w-1/3 ltr:md:pr-4 ltr:lg:pr-6 rtl:md:pl-4 rtl:lg:pl-6" aria-label="Sidebar">
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>

template/layout_topbottom_area_bar_right.html

@@ -2,7 +2,7 @@
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-topbottom-area-bar-right">
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row">
-        <main class="bx-layout-col bx-layout-bar-right-content bx-layout-column-wide md:w-2/3 md:pr-4 lg:pr-6" aria-label="Main">
+        <main class="bx-layout-col bx-layout-bar-right-content bx-layout-column-wide md:w-2/3 ltr:md:pr-4 ltr:lg:pr-6 rtl:md:pl-4 rtl:lg:pl-6" aria-label="Main">
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>

template/layout_topbottom_area_col1_col3_col2.html

@@ -3,13 +3,13 @@
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row flex flex-col md:flex-row">
         <div class="bx-layout-row">
-            <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/6 flex-auto md:flex-none md:pr-4 lg:pr-6" aria-label="Sidebar" >
+            <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/6 flex-auto md:flex-none ltr:md:pr-4 ltr:lg:pr-6 rtl:md:pl-4 rtl:lg:pl-6" aria-label="Sidebar" >
                 <div class="bx-layout-cell" id="bx-layout-cell-2">
                     __cell_2__
                 </div>
             </section>
             <section aria-label="Content" class="max-w-full md:w-5/6 flex-1 flex flex-wrap lg:flex-nowrap bx-layout-gap">
-                <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto md:flex-none lg:w-3/5 lg:pr-6" aria-label="Main">
+                <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto md:flex-none lg:w-3/5 ltr:lg:pr-6 rtl:lg:pl-6" aria-label="Main">
                     <div class="bx-layout-cell" id="bx-layout-cell-3">
                         __cell_3__
                     </div>

template/layout_topbottom_area_col1_col5.html

@@ -2,7 +2,7 @@
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-topbottom-area-col1-col5">
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row">
-        <aside class="bx-layout-col bx-layout-col1-col5-column1 bx-layout-column-thin md:w-1/6 md:pr-4 lg:pr-6" aria-label="Sidebar">
+        <aside class="bx-layout-col bx-layout-col1-col5-column1 bx-layout-column-thin md:w-1/6 ltr:md:pr-4 ltr:lg:pr-6 rtl:md:pl-4 rtl:lg:pl-6" aria-label="Sidebar">
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>

template/layout_topbottom_area_col2_col5_col3.html

@@ -2,13 +2,13 @@
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-topbottom-area-col2-col5-col3">
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row">
-        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-2/10 flex-auto md:flex-none md:pr-4 lg:pr-6" aria-label="Sidebar" >
+        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-2/10 flex-auto md:flex-none ltr:md:pr-4 ltr:lg:pr-6 rtl:md:pl-4 rtl:lg:pl-6" aria-label="Sidebar" >
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>
         </section>
         <section aria-label="Content" class="max-w-full md:w-8/10 flex-1 flex flex-wrap lg:flex-nowrap bx-layout-gap">
-            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto lg:flex-none lg:w-3/5 lg:pr-6" aria-label="Main">
+            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto lg:flex-none lg:w-3/5 ltr:lg:pr-6 rtl:lg:pl-6" aria-label="Main">
                 <div class="bx-layout-cell" id="bx-layout-cell-3">
                     __cell_3__
                 </div>

template/menu_buttons_hor.html

@@ -1,6 +1,6 @@
 <ul class="bx-menu-btns-hor bx-menu-object-__object__ flex flex-row @container/menu">
     <bx_repeat:menu_items>
-        <li class="bx-menu-item __name__ __class_add__ flex-1 @lg/menu:flex-none flex flex-row items-stretch min-w-0 my-1 mr-4 last:mr-0">
+        <li class="bx-menu-item __name__ __class_add__ flex-1 @lg/menu:flex-none flex flex-row items-stretch min-w-0 my-1 ltr:mr-4 ltr:last:mr-0 rtl:ml-4 rtl:last:ml-0">
             <a class="bx-btn __name__ flex flex-col @lg/menu:flex-row justify-center @lg/menu:justify-start w-full" href="__link__" <bx_if:onclick>onclick="__onclick__"</bx_if:onclick> title="__title_attr__"__attrs__>
                 <bx_include_auto:menu_icon.html />
                 <bx_if:title><u class="w-full mr-2 @lg/menu:mr-0 truncate text-center @lg/menu:text-left">__title__</u></bx_if:title>

template/menu_switch_language_title.html

@@ -1 +1 @@
-<span class="sys-sl-title">__icon__<span class="sys-sl-text bx-def-margin-sec-left-auto">__title__</span></span>
+<span class="sys-sl-title">__icon__<span class="sys-sl-text ltr:ml-2 ltr:first:ml-0 rtl:mr-2 rtl:first:mr-0">__title__</span></span>

template/vote_do_vote_label_likes.html

@@ -1 +1 @@
-<span class="sys-action-do __style_prefix__-do bx-def-valign-center"><bx_if:show_icon><span class="sys-action-do-icon __style_prefix__-do-icon bx-def-align-center">__icon__</span></bx_if:show_icon><bx_if:show_text><span class="sys-action-do-text __style_prefix__-do-text bx-def-margin-sec-left-auto">__text__</span></bx_if:show_text></span>
+<span class="sys-action-do __style_prefix__-do bx-def-valign-center"><bx_if:show_icon><span class="sys-action-do-icon __style_prefix__-do-icon bx-def-align-center">__icon__</span></bx_if:show_icon><bx_if:show_text><span class="sys-action-do-text __style_prefix__-do-text ltr:ml-2 rtl:mr-2">__text__</span></bx_if:show_text></span>

template/vote_element_block.html

@@ -4,7 +4,7 @@
             <div class="sys-action-element-holder __style_prefix__-element-holder">__do_vote__</div>
         </bx_if:show_do_vote>
         <bx_if:show_counter>
-            <div class="sys-action-counter-holder __style_prefix__-counter-holder ml-2 first:ml-0"<bx_if:show_hidden> style="display:none"</bx_if:show_hidden>>__counter__</div>
+            <div class="sys-action-counter-holder __style_prefix__-counter-holder ltr:ml-2 ltr:first:ml-0 rtl:mr-2 rtl:first:mr-0"<bx_if:show_hidden> style="display:none"</bx_if:show_hidden>>__counter__</div>
         </bx_if:show_counter>
     </div>
     <bx_if:show_legend>__legend__</bx_if:show_legend>

template/vote_element_inline.html

@@ -1,6 +1,6 @@
 <span id="__html_id__" class="sys-action __style_prefix__ __class__ inline-flex items-center whitespace-nowrap"<bx_if:show_vote_data> bx_vote_data_rate="__rate__" bx_vote_data_count="__count__"</bx_if:show_vote_data>>
     <span class="sys-action-cnt __style_prefix__-cnt __style_prefix__-do flex items-center">
         <bx_if:show_do_vote><span class="sys-action-element-holder __style_prefix__-element-holder group flex items-center">__do_vote__</span></bx_if:show_do_vote>
-        <bx_if:show_counter><span class="sys-action-counter-holder __style_prefix__-counter-holder ml-2 first:ml-0"<bx_if:show_hidden> style="display:none"</bx_if:show_hidden>>__counter__</span></bx_if:show_counter>
+        <bx_if:show_counter><span class="sys-action-counter-holder __style_prefix__-counter-holder ltr:ml-2 ltr:first:ml-0 rtl:mr-2 rtl:first:mr-0"<bx_if:show_hidden> style="display:none"</bx_if:show_hidden>>__counter__</span></bx_if:show_counter>
     </span>__script__
 </span>