Ticket #3941 - Artificer template (part 4): Move to core: View, Vote, etc.

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

@@ -1,12 +0,0 @@
-/*--
-import url(../../../../../../../template/css/view.css);
---*/
-
-/*--- Viewed By ---*/
-div.bx-view-by-list {}
-div.bx-view-by-list-cnt {}
-div.bx-view-by-items {
-    max-height: 12.5rem;
-    min-width: 13.75rem;
-    overflow: auto;
-}

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

@@ -1,232 +0,0 @@
-/*--
-import url(../../../../../../../template/css/vote.css);
---*/
-
-
-.bx-vote .bx-vote-counter .bx-vote-counter-label {
-    padding: 0;
-}
-.bx-vote .bx-vote-counter .bx-vote-counter-label .bx-vote-counter-text {
-    margin: 0;
-}
-
-/*----------------------------------*/
-/*--- Likes based Element Styles ---*/
-/*----------------------------------*/
-.bx-vote-counter-likes span.bx-vote-counter-text {
-    width: auto;
-    height: auto;
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
-}
-
-/*--------------------------------------*/
-/*--- Reactions based Element Styles ---*/
-/*--------------------------------------*/
-.bx-vote-counter-wrapper-reactions .bx-vote-counter {
-    display: inline-block;
-}
-.bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound {
-    position: relative;
-}
-.bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound .bx-vote-counter {
-    display: block;
-}
-.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 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;
-    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 {
-    margin-left: 0;
-}
-.bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound span.bx-vote-counter:not(.total-count) {
-    margin-left: -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: -1.0rem;
-}
-.bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound .bx-vote-counter-label {
-    padding: 0;
-}
-.bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound span.bx-vote-counter:not(.total-count) span.bx-vote-counter-text {
-    display: none;
-}
-.bx-vote-counter-wrapper-reactions.bx-vc-hidden,
-.bx-vote-counter-wrapper-reactions .bx-vote-counter.bx-vc-hidden {
-    display: none;
-}
-.bx-menu-object-sys_vote_reactions_do li.bx-menu-item {
-    padding: 0.25rem;
-}
-.bx-menu-object-sys_vote_reactions_do li.bx-menu-item .sys-icon {
-    width: 2rem;
-    height: 2rem;
-    font-size: 1.5rem;
-}
-
-/*----------------------------------*/
-/*--- Stars based Element Styles ---*/
-/*----------------------------------*/
-.bx-vote-stars {
-    -webkit-flex-direction: column;
-    flex-direction: column;
-    -webkit-align-items: flex-start;
-    align-items: flex-start;
-}
-.bx-vote-stars .bx-vote-element-holder a.bx-vote-button,
-.bx-vote-stars .bx-vote-element-holder i.bx-vote-star,
-.bx-vote-stars .bx-vote-element-holder span.bx-vote-star {
-    position: relative;
-    display: inline-block;
-    vertical-align: top;
-    height: 1rem;
-    width: 1rem;
-    margin: 0;
-    padding: 0;
-    text-align: center;
-}
-
-
-/*--- Voted By ---*/
-div.bx-vote-by-list {}
-div.bx-vote-by-list-cnt {
-    max-height: 12.5rem;
-    min-width: 13.75rem;
-    overflow: auto;
-}
-div.bx-vote-by-list div.bx-base-pofile-unit {
-    float: none;
-    margin-right: 0px;
-    margin-bottom: 0px;
-}
-.bx-vote-bls-header {
-    display: -webkit-flex;
-    display: flex;
-
-    margin: -1.25rem -1.25rem 0 -1.25rem;
-    
-    border-bottom-color: #e6f0fa;
-    border-bottom-width: 2px;
-}
-.bx-vote-bls-content {
-    margin-left: -0.5rem;
-    margin-right: -0.5rem;
-}
-.bx-vote-bls-title,
-.bx-vote-bls-submenu {
-    -webkit-flex: 0 1 auto; 
-    -ms-flex:  0 1 auto; 
-    flex:  0 1 auto;
-    line-height: 3.125rem;
-}
-.bx-vote-bls-title,
-.bx-vote-bls-submenu-cnt,
-.bx-vote-bls-filler {
-    height: 3.125rem;
-}
-.bx-vote-bls-title,
-.bx-vote-bls-filler {
-    -webkit-flex-grow: 3;
-    flex-grow: 3;
-
-    border-bottom: 2px solid rgba(232, 232, 232, 1.0);
-}
-.bx-vote-bls-title {
-    display: none;
-
-    white-space: nowrap;
-    font-size: 1rem;
-    font-weight: 400;
-}
-.bx-vote-bls-submenu {
-    overflow-x: auto;
-    overflow-y: hidden;
-
-    -webkit-overflow-scrolling: touch;
-}
-.bx-vote-bls-submenu-cnt {
-    box-sizing: border-box;
-    padding: 0 0.5rem;
-    border-bottom: 2px solid rgba(232, 232, 232, 1.0);
-}
-.bx-vote-bls-submenu::-webkit-scrollbar {
-    width: 0.5rem;
-}
-.bx-vote-bls-submenu::-webkit-scrollbar-track {
-    -webkit-border-radius: 0.5rem;
-    border-radius: 0.5rem;
-
-    background-color: rgba(0, 0, 0, 0.1); 
-}
-.bx-vote-bls-submenu::-webkit-scrollbar-thumb {
-    -webkit-border-radius: 0.5rem;
-    border-radius: 0.5rem;
-
-    background: rgba(255, 255, 255, 0.9); 
-    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
-}
-.bx-vote-bls-submenu::-webkit-scrollbar-thumb:window-inactive {
-    background: rgba(255, 255, 255, 0.4); 
-}
-.bx-vote-bls-submenu-cnt ul {
-    display: -webkit-flex;
-    display: flex;
-}
-.bx-vote-bls-submenu-cnt ul li {
-    -webkit-flex: 0 1 auto; 
-    -ms-flex:  0 1 auto; 
-    flex:  0 1 auto;
-    box-sizing: border-box;
-    height: 3.125rem;
-
-    border-bottom: 2px solid rgba(232, 232, 232, 1.0);
-    border-radius: 0;
-
-    line-height: 3.125rem;
-    white-space: nowrap;
-}
-.bx-vote-bls-submenu-cnt ul li div {
-    padding: 0 0.625rem;
-}
-.bx-vote-bls-submenu-cnt ul li.bx-menu-inter-act {
-    border-bottom-color: #364f6b;
-}
-.bx-vote-bls-submenu-cnt ul li.bx-menu-inter-act > div {
-    font-weight: bold;
-}
-.bx-vote-bls-content .bx-vote-by-list:not(.bx-vote-bl-summary) {
-    display: none;
-}
-.bx-vote-bls-content .bx-vote-by-items {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-}
-.bx-vote-bls-content .bx-vote-by-item {
-    position: relative;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-justify-content: space-between;
-    justify-content: space-between;
-    -webkit-align-items: center;
-    align-items: center;
-}
-.bx-vote-bls-content .bx-vote-by-item:first-child {
-    padding-top: 1rem;
-}
-.bx-vote-bls-content .bx-vote-by-item:last-child {
-    padding-bottom: 0;
-}
-
-.bx-vote-bls-content .bx-vote-by-item:before,
-.bx-vote-bls-content .bx-vote-by-item:after {
-    display: none;
-}

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

@@ -1,20 +0,0 @@
-<div class="__style_prefix__-by-list">
-    <div class="__style_prefix__-by-list-cnt">
-        <div class="__style_prefix__-by-items">
-            <bx_repeat:list>
-                <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-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> 
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </bx_repeat:list>
-        </div>
-        <div class="__style_prefix__-by-paginate">__paginate__</div>
-    </div>
-</div>

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

@@ -1,7 +0,0 @@
-<bx_if:show_text>
-    <span class="__class__" <bx_repeat:attrs>__key__="__value__"</bx_repeat:attrs>>__content__</span>
-</bx_if:show_text>
-<bx_if:show_link>
-    <a class="__class__ sys-ac-link group" <bx_repeat:attrs>__key__="__value__"</bx_repeat:attrs>>__content__</a>
-</bx_if:show_link>
-__script__

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

@@ -1,8 +0,0 @@
-<span class="__style_prefix__-counter-label flex items-center text-sm font-normal p-1">
-    <bx_if:show_icon>
-        <span class="sys-action-counter-icon __style_prefix__-counter-icon relative flex items-center justify-center ring-1 h-6 w-6 ring-white dark:ring-gray-700 h-6 w-6 bg-gray-200 dark:bg-gray-700 rounded-full">__icon__</span>
-    </bx_if:show_icon>
-    <bx_if:show_text>
-        <span class="sys-action-counter-text __style_prefix__-counter-text ml-1.5">__text__</span>
-    </bx_if:show_text>
-</span>

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

@@ -1,11 +0,0 @@
-<div id="__html_id__" class="sys-action __style_prefix__ __class__ flex items-center whitespace-nowrap" bx_view_data_count="__count__">
-    <div class="sys-action-cnt __style_prefix__-cnt bx-def-valign-center bx-clearfix">
-        <bx_if:show_do_view>
-            <div class="sys-action-element-holder __style_prefix__-element-holder">__do_view__</div>
-        </bx_if:show_do_view>
-        <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>
-        </bx_if:show_counter>
-    </div>
-    __script__
-</div>

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

@@ -1,3 +0,0 @@
-<span id="__html_id__" class="sys-action __style_prefix__ __class__ inline-flex items-center whitespace-nowrap" bx_view_data_count="__count__">
-    <span class="sys-action-cnt __style_prefix__-cnt bx-def-valign-center"><bx_if:show_do_view><span class="sys-action-element-holder __style_prefix__-element-holder">__do_view__</span></bx_if:show_do_view><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></span>__script__
-</span>

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

@@ -1,7 +0,0 @@
-<bx_if:show_text>
-    <span class="__class__" <bx_repeat:attrs>__key__="__value__"</bx_repeat:attrs>>__content__</span>
-</bx_if:show_text>
-<bx_if:show_link>
-    <a class="__class__ sys-ac-link group" <bx_repeat:attrs>__key__="__value__"</bx_repeat:attrs>>__content__</a>
-</bx_if:show_link>
-__script__

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

@@ -1,8 +0,0 @@
-<span class="sys-action-counter-label __style_prefix__-counter-label flex items-center text-sm font-normal p-1">
-    <bx_if:show_icon>
-        <span class="sys-action-counter-icon __style_prefix__-counter-icon relative flex items-center justify-center ring-1 h-6 w-6 ring-white dark:ring-gray-700 h-6 w-6 bg-gray-200 dark:bg-gray-700 rounded-full">__icon__</span>
-    </bx_if:show_icon>
-    <bx_if:show_text>
-        <span class="sys-action-counter-text __style_prefix__-counter-text ml-1.5">__text__</span>
-    </bx_if:show_text>
-</span>

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

@@ -1,10 +0,0 @@
-<span class="__style_prefix__-counter-label flex items-center text-sm font-normal p-1">
-    <bx_if:show_icon>
-        <span class="sys-action-counter-icon __style_prefix__-counter-icon relative flex items-center justify-center ring-1  h-6 w-6 ring-white dark:ring-gray-700 h-6 w-6 bg-gray-200 dark:bg-gray-700 rounded-full">
-            <i class="sys-icon __name__">__emoji__</i>
-        </span>
-    </bx_if:show_icon>
-    <bx_if:show_text>
-        <span class="sys-action-counter-text __style_prefix__-counter-text ml-1.5">__text__</span>
-    </bx_if:show_text>
-</span>

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

@@ -1,9 +0,0 @@
-<div id="__html_id__" class="__style_prefix__-counter-wrapper __style_prefix__-counter-wrapper-__type__ __style_prefix__-counter-wrapper-__type__-__style__ __class__">
-    <div class="__style_prefix__-counter-wrapper-cnt flex items-center">
-        <bx_if:show_text>__counter__</bx_if:show_text>
-        <bx_if:show_link>
-            <a class="sys-ac-link group p-1 pl-3" href="__href__" onclick="__onclick__" title="__title__">__counter__</a>
-        </bx_if:show_link>
-        __script__
-    </div>
-</div>

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

@@ -1,16 +0,0 @@
-<div class="__style_prefix__-element relative inline-block">
-    <div class="__style_prefix__-underlay">
-        <bx_repeat:stars><bx_image_auto:far,star|__style_prefix__-star,text-yellow-500 /></bx_repeat:stars>
-    </div>
-    <bx_if:show_legend>
-        <div class="__style_prefix__-legend text-xs">
-            <bx_repeat:legend><span class="bx-vote-star text-yellow-500">__value__</span></bx_repeat:legend>
-        </div>
-    </bx_if:show_legend>
-    <div class="__style_prefix__-slider absolute z-1 top-0 left-0 whitespace-nowrap overflow-hidden">
-        <bx_repeat:slider><bx_image_auto:star|__style_prefix__-star,text-yellow-500 /></bx_repeat:slider>
-    </div>
-    <div class="__style_prefix__-buttons absolute z-2 top-0 left-0">
-        <bx_repeat:buttons><a class="__style_prefix__-button hover:no-underline" href="javascript:void(0);" onmouseover="__js_object__.over(this);" onmouseout="__js_object__.out(this);" onclick="__js_object__.vote(this, __value__)"><bx_image_auto:star|__style_prefix__-star,text-transparent,hover:text-yellow-600 /></a></bx_repeat:buttons>
-    </div>
-</div>

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

@@ -1,12 +0,0 @@
-<div id="__html_id__" class="sys-action __style_prefix__ __class__ 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>>
-    <div class="sys-action-cnt __style_prefix__-cnt __style_prefix__-do bx-def-valign-center bx-clearfix">
-        <bx_if:show_do_vote>
-            <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>
-        </bx_if:show_counter>
-    </div>
-    <bx_if:show_legend>__legend__</bx_if:show_legend>
-    __script__
-</div>

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

@@ -1,6 +0,0 @@
-<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>
-    </span>__script__
-</span>

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

@@ -1,15 +0,0 @@
-<div id="__html_id__" class="__style_prefix__-legend __style_prefix__-legend-__type__ mt-4:first">
-    <bx_repeat:items>
-        <div class="__style_prefix__-legend-item flex items-center my-1" bx_vote_item_value="__value__">
-            <div class="bx-vote-element-holder relative inline-block">
-                <div class="__style_prefix__-underlay">
-                    <bx_repeat:stars><i class="__style_prefix__-star sys-icon far star text-yellow-500"></i></bx_repeat:stars>
-                </div>
-                <div class="__style_prefix__-slider absolute z-1 top-0 left-0 whitespace-nowrap overflow-hidden">
-                    <bx_repeat:slider><i class="__style_prefix__-star sys-icon star text-yellow-500"></i></bx_repeat:slider>
-                </div>
-            </div>
-            <div class="bx-vote-counter-holder ml-2 bx-def-font-grayed">__label__</div>
-        </div>
-    </bx_repeat:items>
-</div>

template/css/view.css

@@ -1,100 +1,8 @@
-/*--- Comment Viewed By ---*/
+/*--- Viewed By ---*/
 div.bx-view-by-list {}
 div.bx-view-by-list-cnt {}
 div.bx-view-by-items {
-    max-height: 200px;
     max-height: 12.5rem;
-    min-width: 220px;
     min-width: 13.75rem;
     overflow: auto;
-}
-div.bx-view-user {
-    position: relative;
-}
-div.bx-view-user-avatar {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-}
-div.bx-view-user-info {
-    display: -webkit-flex;
-    display: flex;
-    -webkit-align-items: center;
-    align-items: center;
-}
-div.bx-view-user-name {
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-div.bx-view-user-name a.bx-view-user-name {
-    font-weight: 700;
-}
-div.bx-view-user-name span.bx-view-user-info {
-    white-space: nowrap;
-}
-div.bx-view-by-paginate {
-    text-align: right;
-}
-div.bx-view-by-paginate div.bx-paginate {
-    display: inline-block;
-    margin-top: 0.5rem;
-}
-
-/*--- View Element Styles ---*/
-div.bx-view-element-holder,
-div.bx-view-counter-holder {
-    position: relative;
-    float: left;
-
-    line-height: 20px;
-    line-height: 1.25rem;
-}
-
-.bx-view-button .bx-view-element-holder,
-.bx-view-button .bx-view-counter-holder {
-    line-height: 36px;
-    line-height: 2.2rem;
-}
-
-.bx-view-button-small .bx-view-element-holder,
-.bx-view-button-small .bx-view-counter-holder {
-    line-height: 24px;
-    line-height: 1.6rem;
-}
-
-.bx-view-element-holder .bx-view-do-view.bx-view-disabled,
-.bx-view-element-holder .bx-view-do-view.bx-view-disabled .sys-icon {
-    color: #ddd;
-}
-
-.bx-view-button .bx-view-counter-holder .bx-btn-height,
-.bx-view-button-small .bx-view-counter-holder .bx-btn-height {
-    font-size: 1.5rem;
-}
-
-/*--- Counter Styles ---*/
-.bx-view-counter .bx-view-counter-label.bx-def-valign-center .bx-view-counter-text {
-    line-height: normal;
-}
-.bx-view-counter span.bx-view-counter-icon {
-    position: relative;
-    box-sizing: border-box;
-
-    width: 2.0rem;
-    height: 2.0rem;
-
-    background-color: rgba(232, 232, 232, 1.0);
-    border: 1px solid #ffffff;
-    border-radius: 1rem;
-
-    font-size: 1.0rem;
-}
-.bx-view-counter span.bx-view-counter-icon:not(.bx-def-align-center) {
-    display: inline-block;
-
-    line-height: 1.9rem;
-    text-align: center;
-}
-.bx-view-counter span.bx-view-counter-icon .sys-icon {
-    vertical-align: top;
 }

template/css/vote.css

@@ -1,106 +1,23 @@
-/*--- Voted By ---*/
-div.bx-vote-by-list {}
-div.bx-vote-by-list-cnt {
-    max-height: 200px;
-    max-height: 12.5rem;
-    min-width: 220px;
-    min-width: 13.75rem;
-    overflow: auto;
-}
-div.bx-vote-by-list div.bx-base-pofile-unit {
-    float: none;
-    margin-right: 0px;
-    margin-bottom: 0px;
+.bx-vote .bx-vote-counter .bx-vote-counter-label {
+    padding: 0;
 }
-
-/*--- Vote Element Styles ---*/
-div.bx-vote div.bx-vote-element-holder,
-div.bx-vote div.bx-vote-counter-holder {
-	position: relative;
-	float: left;
+.bx-vote .bx-vote-counter .bx-vote-counter-label .bx-vote-counter-text {
+    margin: 0;
 }
 
-
 /*----------------------------------*/
 /*--- Likes based Element Styles ---*/
 /*----------------------------------*/
-span.bx-vote-likes {
-    display: inline-block;
-}
-
-.bx-vote-likes .bx-vote-element-holder,
-.bx-vote-likes .bx-vote-counter-holder {
-    line-height: 20px;
-    line-height: 1.25rem;
-}
-
-.bx-vote-likes-button .bx-vote-element-holder,
-.bx-vote-likes-button .bx-vote-counter-holder {
-    line-height: 36px;
-    line-height: 2.2rem;
-}
-
-.bx-vote-likes-button-small .bx-vote-element-holder,
-.bx-vote-likes-button-small .bx-vote-counter-holder {
-    line-height: 24px;
-    line-height: 1.6rem;
-}
-
-.bx-vote-likes .bx-vote-element-holder .bx-vote-do-vote.bx-vote-disabled,
-.bx-vote-likes .bx-vote-element-holder .bx-vote-do-vote.bx-vote-disabled .sys-icon {
-    color: #ddd;
-}
-
-.bx-vote-likes-button .bx-vote-counter-holder .bx-btn-height,
-.bx-vote-likes-button-small .bx-vote-counter-holder .bx-btn-height {
-    font-size: 1.5rem;
-}
-
-.bx-vote-likes .bx-vote-counter-holder.bx-btn-border {
-    border-width: 0px;
+.bx-vote-counter-likes span.bx-vote-counter-text {
+    width: auto;
+    height: auto;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
 }
 
-
 /*--------------------------------------*/
 /*--- Reactions based Element Styles ---*/
 /*--------------------------------------*/
-.bx-vote-reactions .bx-vote-element-holder,
-.bx-vote-reactions .bx-vote-counter-holder {
-	line-height: 20px;
-	line-height: 1.25rem;
-}
-
-.bx-vote-reactions-button .bx-vote-element-holder,
-.bx-vote-reactions-button .bx-vote-counter-holder {
-	line-height: 36px;
-	line-height: 2.2rem;
-}
-
-.bx-vote-reactions-button-small .bx-vote-element-holder,
-.bx-vote-reactions-button-small .bx-vote-counter-holder {
-	line-height: 24px;
-	line-height: 1.6rem;
-}
-
-.bx-vote-reactions .bx-vote-element-holder .bx-vote-do-vote.bx-vote-disabled,
-.bx-vote-reactions .bx-vote-element-holder .bx-vote-do-vote.bx-vote-disabled .sys-icon {
-	color: #ddd;
-}
-
-.bx-vote-reactions-button .bx-vote-counter-holder,
-.bx-vote-reactions-button-small .bx-vote-counter-holder {
-	font-size: 1.5rem;
-}
-
-.bx-vote-reactions .bx-vote-element-holder a.bx-vote-do-vote {
-    position: relative;
-    display: inline-block;
-}
-
-.bx-vote-reactions .bx-vote-counter-holder.bx-btn-border {
-    border-width: 0px;
-}
-
 .bx-vote-counter-wrapper-reactions .bx-vote-counter {
     display: inline-block;
 }
@@ -115,23 +32,26 @@ span.bx-vote-likes {
 }
 .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;
+    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 {
+    margin-left: 0;
 }
 .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound span.bx-vote-counter:not(.total-count) {
-    width: 2.0rem;
-    height: 2.0rem;
-    box-sizing: border-box;
-
     margin-left: -0.5rem;
 }
-.bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound div.bx-vote-counter-wrapper-cnt {
-    margin-left: 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: -1.0rem;
 }
+.bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound .bx-vote-counter-label {
+    padding: 0;
+}
 .bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound span.bx-vote-counter:not(.total-count) span.bx-vote-counter-text {
     display: none;
 }
@@ -139,48 +59,42 @@ span.bx-vote-likes {
 .bx-vote-counter-wrapper-reactions .bx-vote-counter.bx-vc-hidden {
     display: none;
 }
-.bx-menu-object-sys_vote_reactions_do li .sys-icon {
+.bx-menu-object-sys_vote_reactions_do li.bx-menu-item {
+    padding: 0.25rem;
+}
+.bx-menu-object-sys_vote_reactions_do li.bx-menu-item .sys-icon {
+    width: 2rem;
+    height: 2rem;
     font-size: 1.5rem;
 }
 
-/*--- Counter Styles ---*/
-.bx-vote-counter .bx-vote-counter-label.bx-def-valign-center .bx-vote-counter-text {
-    line-height: normal;
+/*----------------------------------*/
+/*--- Stars based Element Styles ---*/
+/*----------------------------------*/
+.bx-vote-stars {
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    -webkit-align-items: flex-start;
+    align-items: flex-start;
 }
-
-.bx-vote-counter.bx-vote-counter-likes span.bx-vote-counter-icon,
-.bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound .bx-vote-counter.bx-vote-counter-reactions span.bx-vote-counter-icon {
+.bx-vote-stars .bx-vote-element-holder a.bx-vote-button,
+.bx-vote-stars .bx-vote-element-holder i.bx-vote-star,
+.bx-vote-stars .bx-vote-element-holder span.bx-vote-star {
     position: relative;
-    box-sizing: border-box;
-
-    width: 2.0rem;
-    height: 2.0rem;
-
-    background-color: rgba(232, 232, 232, 1.0);
-    border: 1px solid #ffffff;
-    border-radius: 1rem;
-
-    line-height: normal;
-    font-size: 1.0rem;
-}
-.bx-vote-counter.bx-vote-counter-likes span.bx-vote-counter-icon:not(.bx-def-align-center),
-.bx-vote-counter-wrapper-reactions.bx-vote-counter-wrapper-reactions-compound .bx-vote-counter.bx-vote-counter-reactions span.bx-vote-counter-icon:not(.bx-def-align-center) {
     display: inline-block;
-
-    line-height: 1.9rem;
-    text-align: center;
-}
-.bx-vote-counter span.bx-vote-counter-icon .sys-icon {
     vertical-align: top;
+    height: 1rem;
+    width: 1rem;
+    margin: 0;
+    padding: 0;
+    text-align: center;
 }
 
 
 /*--- Voted By ---*/
 div.bx-vote-by-list {}
 div.bx-vote-by-list-cnt {
-    max-height: 200px;
     max-height: 12.5rem;
-    min-width: 220px;
     min-width: 13.75rem;
     overflow: auto;
 }
@@ -310,78 +224,4 @@ div.bx-vote-by-list div.bx-base-pofile-unit {
 .bx-vote-bls-content .bx-vote-by-item:before,
 .bx-vote-bls-content .bx-vote-by-item:after {
     display: none;
-}
-
-
-/*----------------------------------*/
-/*--- Stars based Element Styles ---*/
-/*----------------------------------*/
-.bx-vote-stars,
-.bx-vote-stars .bx-vote-do,
-.bx-vote-stars .bx-vote-element-holder,
-.bx-vote-stars .bx-vote-counter-holder {
-    position: relative;
-    display: inline-block;
-    vertical-align: top;
-
-    line-height: 16px;
-    line-height: 1rem;
-    font-size: 16px;
-    font-size: 1rem;
-}
-
-.bx-vote-stars .bx-vote-counter-holder {
-    border-width: 0px;
-}
-
-
-/*--- Stars Styles ---*/
-div.bx-vote-element {
-    position: relative;
-    display: inline-block;
-}
-div.bx-vote-underlay {}
-div.bx-vote-slider {
-    position: absolute;
-    z-index: 1;
-    top: 0px;
-    left: 0px;
-    white-space: nowrap;
-    overflow: hidden;
-}
-.bx-vote-stars .bx-vote-element-holder a.bx-vote-button,
-.bx-vote-stars .bx-vote-element-holder i.bx-vote-star,
-.bx-vote-stars .bx-vote-element-holder span.bx-vote-star {
-    position: relative;
-    display: inline-block;
-    vertical-align: top;
-    height: 16px;
-    width: 16px;
-    margin: 0;
-    padding: 0;
-    text-align: center;
-}
-div.bx-vote-underlay i.bx-vote-star,
-div.bx-vote-underlay span.bx-vote-star {
-    color: rgba(255, 204, 102, 1);
-}
-div.bx-vote-slider i.bx-vote-star,
-div.bx-vote-slider span.bx-vote-star,
-div.bx-vote-buttons a:hover i.bx-vote-star,
-div.bx-vote-buttons a:hover span.bx-vote-star {
-    color: rgba(255, 100, 0, 1);
-}
-
-div.bx-vote-buttons {
-    position: absolute;
-    z-index: 2;
-    top: 0px;
-    left: 0px;
-}
-div.bx-vote-buttons a:hover {
-	text-decoration: none;
-}
-div.bx-vote-buttons i.bx-vote-star,
-div.bx-vote-buttons span.bx-vote-star {
-	color: transparent;
 }

template/view_by_list.html

@@ -2,13 +2,11 @@
     <div class="__style_prefix__-by-list-cnt">
         <div class="__style_prefix__-by-items">
             <bx_repeat:list>
-                <div class="__style_prefix__-by-item bx-def-padding-sec">
-                    <div class="__style_prefix__-user bx-clearfix">
-                        <div class="__style_prefix__-user-avatar bx-def-thumb-size">
-                            __user_unit__
-                        </div>
-                        <div class="__style_prefix__-user-info bx-def-thumb-size-min-height bx-def-thumb-size-left-indent">
-                            <div class="__style_prefix__-user-name bx-def-font-middle bx-def-font-light bx-def-font-grayed">
+                <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-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> 
                             </div>

template/view_counter.html

@@ -1,2 +1,7 @@
-<bx_if:show_text><span class="__class__" <bx_repeat:attrs>__key__="__value__"</bx_repeat:attrs>>__content__</span></bx_if:show_text><bx_if:show_link><a class="__class__" <bx_repeat:attrs>__key__="__value__"</bx_repeat:attrs>>__content__</a></bx_if:show_link>
+<bx_if:show_text>
+    <span class="__class__" <bx_repeat:attrs>__key__="__value__"</bx_repeat:attrs>>__content__</span>
+</bx_if:show_text>
+<bx_if:show_link>
+    <a class="__class__ sys-ac-link group" <bx_repeat:attrs>__key__="__value__"</bx_repeat:attrs>>__content__</a>
+</bx_if:show_link>
 __script__

template/view_counter_label.html

@@ -1,8 +1,8 @@
-<span class="__style_prefix__-counter-label bx-def-valign-center">
+<span class="__style_prefix__-counter-label flex items-center text-sm font-normal p-1">
     <bx_if:show_icon>
-        <span class="sys-action-counter-icon __style_prefix__-counter-icon bx-def-align-center">__icon__</span>
+        <span class="sys-action-counter-icon __style_prefix__-counter-icon relative flex items-center justify-center ring-1 h-6 w-6 ring-white dark:ring-gray-700 h-6 w-6 bg-gray-200 dark:bg-gray-700 rounded-full">__icon__</span>
     </bx_if:show_icon>
     <bx_if:show_text>
-        <span class="sys-action-counter-text __style_prefix__-counter-text bx-def-margin-sec-left-auto">__text__</span>
+        <span class="sys-action-counter-text __style_prefix__-counter-text ml-1.5">__text__</span>
     </bx_if:show_text>
 </span>

template/view_element_block.html

@@ -1,10 +1,10 @@
-<div id="__html_id__" class="sys-action __style_prefix__ __class__ bx-def-margin-right-auto bx-def-margin-thd-topbottom" bx_view_data_count="__count__">
+<div id="__html_id__" class="sys-action __style_prefix__ __class__ flex items-center whitespace-nowrap" bx_view_data_count="__count__">
     <div class="sys-action-cnt __style_prefix__-cnt bx-def-valign-center bx-clearfix">
         <bx_if:show_do_view>
             <div class="sys-action-element-holder __style_prefix__-element-holder">__do_view__</div>
         </bx_if:show_do_view>
         <bx_if:show_counter>
-            <div class="sys-action-counter-holder __style_prefix__-counter-holder bx-def-margin-sec-left-auto bx-btn-border"<bx_if:show_hidden> style="display:none"</bx_if:show_hidden>>__counter__</div>
+            <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>
         </bx_if:show_counter>
     </div>
     __script__

template/view_element_inline.html

@@ -1,3 +1,3 @@
-<span id="__html_id__" class="sys-action __style_prefix__ __class__ bx-def-margin-right-auto bx-def-margin-thd-topbottom" bx_view_data_count="__count__">
-    <span class="sys-action-cnt __style_prefix__-cnt bx-def-valign-center"><bx_if:show_do_view><span class="sys-action-element-holder __style_prefix__-element-holder">__do_view__</span></bx_if:show_do_view><bx_if:show_counter><span class="sys-action-counter-holder __style_prefix__-counter-holder bx-def-margin-thd-left-auto bx-btn-border"<bx_if:show_hidden> style="display:none"</bx_if:show_hidden>>__counter__</span></bx_if:show_counter></span>__script__
+<span id="__html_id__" class="sys-action __style_prefix__ __class__ inline-flex items-center whitespace-nowrap" bx_view_data_count="__count__">
+    <span class="sys-action-cnt __style_prefix__-cnt bx-def-valign-center"><bx_if:show_do_view><span class="sys-action-element-holder __style_prefix__-element-holder">__do_view__</span></bx_if:show_do_view><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></span>__script__
 </span>

template/vote_counter.html

@@ -1,2 +1,7 @@
-<bx_if:show_text><span class="__class__" <bx_repeat:attrs>__key__="__value__"</bx_repeat:attrs>>__content__</span></bx_if:show_text><bx_if:show_link><a class="__class__" <bx_repeat:attrs>__key__="__value__"</bx_repeat:attrs>>__content__</a></bx_if:show_link>
+<bx_if:show_text>
+    <span class="__class__" <bx_repeat:attrs>__key__="__value__"</bx_repeat:attrs>>__content__</span>
+</bx_if:show_text>
+<bx_if:show_link>
+    <a class="__class__ sys-ac-link group" <bx_repeat:attrs>__key__="__value__"</bx_repeat:attrs>>__content__</a>
+</bx_if:show_link>
 __script__

template/vote_counter_label_likes.html

@@ -1,8 +1,8 @@
-<span class="sys-action-counter-label __style_prefix__-counter-label bx-def-valign-center">
+<span class="sys-action-counter-label __style_prefix__-counter-label flex items-center text-sm font-normal p-1">
     <bx_if:show_icon>
-        <span class="sys-action-counter-icon __style_prefix__-counter-icon bx-def-align-center">__icon__</span>
+        <span class="sys-action-counter-icon __style_prefix__-counter-icon relative flex items-center justify-center ring-1 h-6 w-6 ring-white dark:ring-gray-700 h-6 w-6 bg-gray-200 dark:bg-gray-700 rounded-full">__icon__</span>
     </bx_if:show_icon>
     <bx_if:show_text>
-        <span class="sys-action-counter-text __style_prefix__-counter-text bx-def-margin-sec-left-auto">__text__</span>
+        <span class="sys-action-counter-text __style_prefix__-counter-text ml-1.5">__text__</span>
     </bx_if:show_text>
 </span>

template/vote_counter_label_reactions.html

@@ -1 +1,10 @@
-<span class="__style_prefix__-counter-label bx-def-valign-center"><bx_if:show_icon><span class="sys-action-counter-icon __style_prefix__-counter-icon bx-def-align-center"><i class="sys-icon __name__">__emoji__</i></span></bx_if:show_icon><bx_if:show_text><span class="sys-action-counter-text __style_prefix__-counter-text bx-def-margin-sec-left-auto">__text__</span></bx_if:show_text></span>
+<span class="__style_prefix__-counter-label flex items-center text-sm font-normal p-1">
+    <bx_if:show_icon>
+        <span class="sys-action-counter-icon __style_prefix__-counter-icon relative flex items-center justify-center ring-1  h-6 w-6 ring-white dark:ring-gray-700 h-6 w-6 bg-gray-200 dark:bg-gray-700 rounded-full">
+            <i class="sys-icon __name__">__emoji__</i>
+        </span>
+    </bx_if:show_icon>
+    <bx_if:show_text>
+        <span class="sys-action-counter-text __style_prefix__-counter-text ml-1.5">__text__</span>
+    </bx_if:show_text>
+</span>

template/vote_counter_wrapper_reactions.html

@@ -1,3 +1,9 @@
 <div id="__html_id__" class="__style_prefix__-counter-wrapper __style_prefix__-counter-wrapper-__type__ __style_prefix__-counter-wrapper-__type__-__style__ __class__">
-    <div class="__style_prefix__-counter-wrapper-cnt bx-def-valign-center"><bx_if:show_link><a class="bx-def-valign-center" href="__href__" onclick="__onclick__" title="__title__">__counter__</a></bx_if:show_link><bx_if:show_text>__counter__</bx_if:show_text>__script__</div>
+    <div class="__style_prefix__-counter-wrapper-cnt flex items-center">
+        <bx_if:show_text>__counter__</bx_if:show_text>
+        <bx_if:show_link>
+            <a class="sys-ac-link group p-1 pl-3" href="__href__" onclick="__onclick__" title="__title__">__counter__</a>
+        </bx_if:show_link>
+        __script__
+    </div>
 </div>

template/vote_do_vote_stars.html

@@ -1,16 +1,16 @@
-<div class="__style_prefix__-element">
+<div class="__style_prefix__-element relative inline-block">
     <div class="__style_prefix__-underlay">
-        <bx_repeat:stars><bx_image_auto:far,star|__style_prefix__-star /></bx_repeat:stars>
+        <bx_repeat:stars><bx_image_auto:far,star|__style_prefix__-star,text-yellow-500 /></bx_repeat:stars>
     </div>
     <bx_if:show_legend>
-        <div class="__style_prefix__-legend bx-def-font-small">
-            <bx_repeat:legend><span class="bx-vote-star">__value__</span></bx_repeat:legend>
+        <div class="__style_prefix__-legend text-xs">
+            <bx_repeat:legend><span class="bx-vote-star text-yellow-500">__value__</span></bx_repeat:legend>
         </div>
     </bx_if:show_legend>
-    <div class="__style_prefix__-slider">
-        <bx_repeat:slider><bx_image_auto:star|__style_prefix__-star /></bx_repeat:slider>
+    <div class="__style_prefix__-slider absolute z-1 top-0 left-0 whitespace-nowrap overflow-hidden">
+        <bx_repeat:slider><bx_image_auto:star|__style_prefix__-star,text-yellow-500 /></bx_repeat:slider>
     </div>
-    <div class="__style_prefix__-buttons">
-        <bx_repeat:buttons><a class="__style_prefix__-button" href="javascript:void(0);" onmouseover="__js_object__.over(this);" onmouseout="__js_object__.out(this);" onclick="__js_object__.vote(this, __value__)"><bx_image_auto:star|__style_prefix__-star /></a></bx_repeat:buttons>
+    <div class="__style_prefix__-buttons absolute z-2 top-0 left-0">
+        <bx_repeat:buttons><a class="__style_prefix__-button hover:no-underline" href="javascript:void(0);" onmouseover="__js_object__.over(this);" onmouseout="__js_object__.out(this);" onclick="__js_object__.vote(this, __value__)"><bx_image_auto:star|__style_prefix__-star,text-transparent,hover:text-yellow-600 /></a></bx_repeat:buttons>
     </div>
 </div>

template/vote_element_block.html

@@ -1,10 +1,10 @@
-<div id="__html_id__" class="sys-action __style_prefix__ __class__ bx-def-margin-right-auto bx-def-margin-thd-topbottom"<bx_if:show_vote_data> bx_vote_data_rate="__rate__" bx_vote_data_count="__count__"</bx_if:show_vote_data>>
+<div id="__html_id__" class="sys-action __style_prefix__ __class__ 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>>
     <div class="sys-action-cnt __style_prefix__-cnt __style_prefix__-do bx-def-valign-center bx-clearfix">
         <bx_if:show_do_vote>
             <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 bx-def-margin-sec-left-auto bx-btn-border"<bx_if:show_hidden> style="display:none"</bx_if:show_hidden>>__counter__</div>
+            <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>
         </bx_if:show_counter>
     </div>
     <bx_if:show_legend>__legend__</bx_if:show_legend>

template/vote_element_inline.html

@@ -1,3 +1,6 @@
-<span id="__html_id__" class="sys-action __style_prefix__ __class__"<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 bx-def-valign-center"><bx_if:show_do_vote><span class="sys-action-element-holder __style_prefix__-element-holder">__do_vote__</span></bx_if:show_do_vote><bx_if:show_counter><span class="sys-action-counter-holder __style_prefix__-counter-holder bx-def-margin-thd-left-auto bx-btn-border"<bx_if:show_hidden> style="display:none"</bx_if:show_hidden>>__counter__</span></bx_if:show_counter></span>__script__
+<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>
+    </span>__script__
 </span>

template/vote_legend.html

@@ -1,15 +1,15 @@
-<div id="__html_id__" class="__style_prefix__-legend __style_prefix__-legend-__type__ bx-def-margin-top-auto">
+<div id="__html_id__" class="__style_prefix__-legend __style_prefix__-legend-__type__ mt-4:first">
     <bx_repeat:items>
-        <div class="__style_prefix__-legend-item bx-def-margin-thd-topbottom bx-clearfix" bx_vote_item_value="__value__">
-            <div class="bx-vote-element-holder">
+        <div class="__style_prefix__-legend-item flex items-center my-1" bx_vote_item_value="__value__">
+            <div class="bx-vote-element-holder relative inline-block">
                 <div class="__style_prefix__-underlay">
-                    <bx_repeat:stars><i class="__style_prefix__-star sys-icon far star"></i></bx_repeat:stars>
+                    <bx_repeat:stars><i class="__style_prefix__-star sys-icon far star text-yellow-500"></i></bx_repeat:stars>
                 </div>
-                <div class="__style_prefix__-slider">
-                    <bx_repeat:slider><i class="__style_prefix__-star sys-icon star"></i></bx_repeat:slider>
+                <div class="__style_prefix__-slider absolute z-1 top-0 left-0 whitespace-nowrap overflow-hidden">
+                    <bx_repeat:slider><i class="__style_prefix__-star sys-icon star text-yellow-500"></i></bx_repeat:slider>
                 </div>
             </div>
-            <div class="bx-vote-counter-holder bx-def-margin-sec-left bx-def-font-grayed">__label__</div>
+            <div class="bx-vote-counter-holder ml-2 bx-def-font-grayed">__label__</div>
         </div>
     </bx_repeat:items>
 </div>