Ticket #3629 - Artificer template (Part 2): Menus, Boxes, etc.

modules/base/groups/template/unit.html

@@ -1,5 +1,5 @@
 <div class="__class__ p-2 box-border">
-    <div class="bx-base-pofile-unit-cnt relative rounded ring-1 ring-gray-200 dark:ring-gray-700 overflow-hidden bg-white dark:bg-gray-800 shadow-sm h-full">
+    <div class="bx-base-pofile-unit-cnt bx-def-box bx-def-box-round-corners bx-def-color-bg-box relative h-full overflow-hidden">
         <div class="absolute z-0 w-full h-40 bg-gradient-to-b from-green-400 to-green-500"></div>
         <a class="bx-base-pofile-unit-cover relative flex items-center justify-start w-full h-40 bg-no-repeat bg-center bg-cover" style="background-image:url(__cover_url__);" href="__content_url__" onclick="__content_click__">
             <bx_if:show_thumbnail>

modules/base/groups/template/unit_live_search.html

@@ -1,5 +1,5 @@
 <div class="bx-base-group-unit bx-def-unit bx-def-unit-live-search group flex items-center mb-2 last:mb-0" data-ts="__ts__">
-    <a class="relative flex items-center w-full p-2 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-200 rounded-md box-border" href="__content_url__">
+    <a class="bx-def-box bx-def-box-hor bx-def-box-round-corners bx-def-color-bg-box bx-def-color-bg-box-hover relative items-center w-full p-2 box-border" href="__content_url__">
         <div class="bx-def-unit-img bx-def-__size__-size">
             <bx_if:show_thumb_image>
                 <img class="bx-base-pofile-unit-thumb bx-def-__size__ bx-def-__size__-size" src="__thumb_url__" />

modules/base/notifications/template/unit_live_search.html

@@ -1,5 +1,5 @@
 <div class="bx-base-notifications-unit bx-def-unit bx-def-unit-live-search group flex items-center mb-2 last:mb-0" data-ts="__ts__">
-    <a class="relative flex items-center w-full p-2 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-200 rounded-md box-border" href="__item_url__">
+    <a class="bx-def-box bx-def-box-hor bx-def-box-round-corners bx-def-color-bg-box bx-def-color-bg-box-hover relative items-center w-full p-2 box-border" href="__item_url__">
         <bx_if:show_icon><img class="bx-def-thumb bx-def-thumb-size rounded box-border" src="__author_icon__" /></bx_if:show_icon>
         <bx_if:show_icon_empty><i class="sys-icon user"></i></bx_if:show_icon_empty>
         <div class="bx-def-unit-info flex flex-col pl-2">

modules/base/profile/template/unit_live_search.html

@@ -1,5 +1,5 @@
 <div class="bx-base-profile-unit bx-def-unit bx-def-unit-live-search group flex items-center mb-2 last:mb-0" data-ts="__ts__">
-    <a class="relative flex items-center w-full p-2 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-200 rounded-md box-border" href="__content_url__">
+    <a class="bx-def-box bx-def-box-hor bx-def-box-round-corners bx-def-color-bg-box bx-def-color-bg-box-hover relative items-center w-full p-2 box-border" href="__content_url__">
         <div class="bx-def-unit-img bx-def-__size__-size">
             <bx_if:show_thumb_image>
                 <img class="bx-base-pofile-unit-thumb bx-def-__size__ bx-def-__size__-size" src="__thumb_url__" />

modules/base/profile/template/unit_with_cover.html

@@ -1,5 +1,5 @@
 <div class="__class__ p-2 box-border">
-    <div class="bx-base-pofile-unit-cnt relative h-full ring-1 ring-gray-200 dark:ring-gray-700 overflow-hidden bg-white dark:bg-gray-800 rounded-md shadow-sm">
+    <div class="bx-base-pofile-unit-cnt bx-def-box bx-def-box-round-corners bx-def-color-bg-box relative h-full overflow-hidden">
         <div class="absolute z-0 w-full h-40 bg-gradient-to-b from-blue-400 to-blue-500"></div>
         <a class="bx-base-pofile-unit-cover relative flex items-center justify-center w-full h-40 bg-no-repeat bg-center bg-cover" style="background-image:url(__cover_url__);" href="__content_url__" onclick="__content_click__">
             <bx_if:show_thumbnail>

modules/base/text/template/poll_item.html

@@ -1,5 +1,5 @@
 <div id="__html_id__" class="bx-base-text-poll p-2 box-border">
-    <div class="bx-base-text-poll-cnt w-full p-4 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md box-border">
+    <div class="bx-base-text-poll-cnt bx-def-box bx-def-box-round-corners bx-def-color-bg-box w-full p-4 box-border">
         <div class="bx-base-text-poll-plate">
             <div class="bx-base-text-poll-actions flex justify-end pb-2">
                 __action_menu__

modules/base/text/template/unit.html

@@ -1,4 +1,4 @@
-<div class="bx-base-text-unit bx-base-text-unit-ext flex flex-col mb-3 md:mb-4 lg:mb-6 bx-def-color-bg-box ring-1 ring-gray-200 dark:ring-gray-700 overflow-hidden text-left rounded-md">
+<div class="bx-base-text-unit bx-base-text-unit-ext bx-def-box bx-def-box-round-corners bx-def-color-bg-box mb-3 md:mb-4 lg:mb-6 text-left">
     <bx_if:thumb>
         <div class="bx-base-text-unit-cover flex-shrink-0 m-1">
             <img class="h-48 w-full object-cover rounded" src="__gallery_url__" alt="">

modules/base/text/template/unit_gallery.html

@@ -1,5 +1,5 @@
 <div class="__class__ bx-base-text-unit bx-base-text-unit-gallery bx-def-gal-unit-size flex flex-col w-full p-2 box-border">
-    <div class="bx-base-text-unit-cnt rounded ring-1 ring-gray-200 dark:ring-gray-700 overflow-hidden bg-white dark:bg-gray-800">
+    <div class="bx-base-text-unit-cnt bx-def-box bx-def-box-round-corners bx-def-color-bg-box">
         <bx_if:thumb>
             <a href="__content_url__" title="__summary_attr__">
                 <div class="flex-shrink-0 m-1">

modules/base/text/template/unit_live_search.html

@@ -1,5 +1,5 @@
 <div class="bx-base-text-unit bx-def-unit bx-def-unit-live-search group flex items-center mb-2 last:mb-0" data-ts="__ts__">
-    <a class="relative flex items-center w-full p-2 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-200 rounded-md box-border" href="__content_url__">
+    <a class="bx-def-box bx-def-box-hor bx-def-box-round-corners bx-def-color-bg-box bx-def-color-bg-box-hover relative items-center w-full p-2 box-border" href="__content_url__">
         <bx_if:thumb>
             <div class="bx-def-unit-img bx-def-thumb-size bx-def-box bg-white dark:bg-gray-700 rounded box-border" style="background-image:url(__thumb_url__);"></div>
         </bx_if:thumb>

modules/boonex/artificer/data/template/bx_albums/unit.html

@@ -1,4 +1,4 @@
-<div class="bx-base-text-unit bx-base-text-unit-ext flex flex-col mb-3 md:mb-4 lg:mb-6 ring-1 ring-gray-200 dark:ring-gray-700 overflow-hidden bg-white dark:bg-gray-800 text-left rounded-md">
+<div class="bx-base-text-unit bx-base-text-unit-ext bx-def-box bx-def-box-round-corners bx-def-color-bg-box mb-3 md:mb-4 lg:mb-6 text-left">
     <div class="bx-albums-unit-text-cont px-4 pt-4 pb-2">
         <div class="bx-base-text-unit-title">
             <a class="text-lg lg:text-xl font-semibold text-gray-700 group-hover:text-gray-900 dark:text-gray-200 dark:group-hover:text-white" href="__content_url__">__title__</a>

modules/boonex/artificer/data/template/bx_albums/unit_gallery.html

@@ -1,5 +1,5 @@
 <div class="bx-base-text-unit bx-base-text-unit-gallery bx-def-gal-unit-size p-2">
-    <div class="bx-base-text-unit-cnt flex flex-col mb-3 md:mb-4 lg:mb-6 ring-1 ring-gray-200 dark:ring-gray-700 overflow-hidden bg-white dark:bg-gray-800 text-left rounded-md">
+    <div class="bx-base-text-unit-cnt bx-def-box bx-def-box-round-corners bx-def-color-bg-box mb-3 md:mb-4 lg:mb-6 text-left">
         <div class="bx-albums-unit-images-cont">
             <div class="bx-albums-unit-images">
                 <bx_repeat:browse><a class="bx-albums-unit-image" title="__title_attr__" href="__url__"><img alt="__title_attr__" src="__img_url__" /></a></bx_repeat:browse>

modules/boonex/artificer/data/template/bx_albums/unit_media.html

@@ -1,5 +1,5 @@
-<div class="__class__ bx-albums-media-wrapper flex flex-col sm:w-full md:w-1/2 lg:w-1/3 p-2 box-border">
-    <div class="bx-albums-media-cnt ring-1 ring-gray-200 dark:ring-gray-700 overflow-hidden bg-white dark:bg-gray-800 rounded-md">
+<div class="__class__ bx-albums-media-wrapper sm:w-full md:w-1/2 lg:w-1/3 p-2 box-border">
+    <div class="bx-albums-media-cnt bx-def-box bx-def-box-round-corners bx-def-color-bg-box">
         <div class="bx-albums-media-thumb bx-albums-unit-size h-48 rounded-md">
             <bx_if:image>
                 <a href="__url__" title="__title_attr__">

modules/boonex/artificer/data/template/bx_albums/unit_media_gallery.html

@@ -1,5 +1,5 @@
-<div class="__class__ bx-albums-media-wrapper flex flex-col sm:w-full md:w-1/2 lg:w-1/3 p-2 box-border">
-    <div class="bx-albums-media-cnt ring-1 ring-gray-200 dark:ring-gray-700 overflow-hidden bg-white dark:bg-gray-800 rounded-md">
+<div class="__class__ bx-albums-media-wrapper sm:w-full md:w-1/2 lg:w-1/3 p-2 box-border">
+    <div class="bx-albums-media-cnt bx-def-box bx-def-box-round-corners bx-def-color-bg-box">
         <div class="bx-albums-media-thumb bx-albums-unit-size h-48 rounded-md">
             <bx_if:image>
                 <a href="__url__" title="__title_attr__">

modules/boonex/artificer/data/template/bx_market/unit_gallery.html

@@ -1,5 +1,5 @@
 <div class="__class__  bx-base-text-unit bx-base-text-unit-gallery bx-def-gal-unit-size p-2">
-    <div class="bx-market-unit-gallery-cnt bx-def-box bx-def-color-bg-box ring-1 ring-gray-200 dark:ring-gray-700 rounded">
+    <div class="bx-market-unit-gallery-cnt bx-def-box bx-def-box-round-corners bx-def-color-bg-box">
         <!-- Author section -->
         <bx_if:show_section_author>
             <div class="bx-market-unit-cnt p-4">

modules/boonex/artificer/data/template/bx_notifications/event.html

@@ -1,4 +1,4 @@
-<div id="__html_id__" class="__style_prefix__-event relative mb-2 rounded-md ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-800 dark:hover:text-gray-200 overflow-hidden __class__">
+<div id="__html_id__" class="__style_prefix__-event bx-def-box bx-def-box-round-corners bx-def-color-bg-box bx-def-color-bg-box-hover relative mb-2 __class__">
     <a class="__style_prefix__-event-link" href="__link__">
         <div class="__style_prefix__-event-gap p-4">
             <div class="__style_prefix__-event-cnt flex items-center">

modules/boonex/artificer/data/template/bx_posts/unit_gallery.html

@@ -1,5 +1,5 @@
 <div class="__class__ bx-base-text-unit bx-base-text-unit-gallery bx-def-gal-unit-size flex flex-col w-full p-2 box-border">
-    <div class="bx-base-text-unit-cnt flex flex-col h-full bx-def-color-bg-box ring-1 ring-gray-200 dark:ring-gray-700 overflow-hidden rounded">
+    <div class="bx-base-text-unit-cnt bx-def-box bx-def-box-round-corners bx-def-color-bg-box h-full">
         <bx_if:thumb>
             <a href="__content_url__" title="__summary_attr__">
                 <div class="shrink-0 m-1">

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

@@ -103,11 +103,8 @@ div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom.bx-menu-custom-hor {
 }
 
 /*--- Menu: Item Manage ---*/
-.bx-menu-object-bx_timeline_menu_item_manage .sys-icon, .bx-menu-object-bx_timeline_menu_item_manage .sys-icon {
-    display: inline-block;
-    width: 1.25rem;
-    height: 1.25rem;
-    text-align: center;
+.bx-menu-object-bx_timeline_menu_item_manage .sys-action-do-text {
+    margin-left: 0rem;
 }
 
 /*--- Item Action Style ---*/

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

@@ -1,7 +1,7 @@
 <div id="__html_id__" class="__style_prefix__-item __class__">
     <a name="timeline-event-__id__"></a>
     <div class="__style_prefix__-item-ind p-2">
-        <div class="__style_prefix__-item-cnt flex flex-col rounded ring-1 ring-gray-200 dark:ring-gray-700  overflow-hidden bg-white dark:bg-gray-800 __class_content__">
+        <div class="__style_prefix__-item-cnt bx-def-box bx-def-box-round-corners bx-def-color-bg-box __class_content__">
             <div class="__style_prefix__-blink-plate"></div>
             <bx_if:show_note>
                 <div class="__style_prefix__-item-notes mt-3 md:mt-4">

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

@@ -1,6 +1,6 @@
 <div id="__html_id__" class="__style_prefix__-item __class__ bx-def-thumb-size-min-height relative pb-3 md:pb-4 lg:pb-6 bx-clearfix">
     <a name="timeline-event-__id__"></a>
-    <div class="__style_prefix__-item-cnt flex flex-col rounded ring-1 ring-gray-200 dark:ring-gray-700 overflow-hidden bg-white dark:bg-gray-800 __class_content__">
+    <div class="__style_prefix__-item-cnt bx-def-box bx-def-box-round-corners bx-def-color-bg-box __class_content__">
         <div class="__style_prefix__-blink-plate"></div>
         <bx_if:show_note>
             <div class="__style_prefix__-item-notes mt-3 md:mt-4">

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

@@ -1,8 +1,8 @@
 <div class="relative w-full __class_wrp__">
-    <a class="__class_link__ group flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 text-sm font-normal rounded-md" href="__link__" onclick="__onclick__" title="__title_attr__"__attrs__>
-        <bx_if:icon><span class="bx-mi-icon flex items-center justify-center text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 h-5 w-5"><i class="sys-icon __icon__"></i></span></bx_if:icon>
-        <bx_if:image><span class="bx-mi-icon flex items-center justify-center h-5 w-5"><img style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></span></bx_if:image>
-        <bx_if:icon-html><span class="bx-mi-icon flex items-center justify-center h-5 w-5">__icon__</span></bx_if:icon-html>
-        <bx_if:title><span class="bx-mi-title ml-2 first:ml-0">__title__</span></bx_if:title></a>
+    <a class="__class_link__ bx-stl-mil-sm group" href="__link__" onclick="__onclick__" title="__title_attr__"__attrs__>
+        <bx_if:icon><div class="bx-menu-item-icon bx-stl-mii-sm mr-0 group-hover:text-gray-700 dark:group-hover:text-gray-300"><i class="sys-icon __icon__"></i></div></bx_if:icon>
+        <bx_if:image><div class="bx-menu-item-icon bx-stl-mii-sm mr-0"><img style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></div></bx_if:image>
+        <bx_if:icon-html><div class="bx-menu-item-icon bx-stl-mii-sm mr-0 group-hover:text-gray-700 dark:group-hover:text-gray-300">__icon__</div></bx_if:icon-html>
+        <bx_if:title><div class="bx-menu-item-title bx-stl-mit ml-1 first:ml-0">__title__</div></bx_if:title></a>
     <bx_if:addon>__addon__</bx_if:addon>
 </div>

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

@@ -1,4 +1,11 @@
 <span class="__class_wrp__ menu-custom-item-ver mci-manage">
-    <a class="__class_link__ flex items-center space-x-1" href="__link__" onclick="__onclick__" title="__title_attr__"__attrs__><span class="flex items-center"><bx_if:icon><span class="bx-menu-item-icon text-center mr-2"><i class="sys-icon __icon__"></i></span></bx_if:icon><bx_if:image><img style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></bx_if:image><bx_if:title><span class="bx-menu-item-title ">__title__</span></bx_if:title></span></a>
+    <a class="__class_link__ flex items-center space-x-1" href="__link__" onclick="__onclick__" title="__title_attr__"__attrs__>
+        <span class="flex items-center">
+            <span class="bx-menu-item-icon bx-stl-mii group-hover:text-gray-700 dark:group-hover:text-gray-300">
+                <bx_include_auto:menu_icon.html />
+            </span>
+            <bx_if:title><span class="bx-menu-item-title bx-stl-mit">__title__</span></bx_if:title>
+        </span>
+    </a>
     <bx_if:addon>__addon__</bx_if:addon>
 </span>

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

@@ -1,5 +1,5 @@
 <ul class="bx-menu-custom bx-menu-custom-ver bx-menu-object-__object__ bx-clearfix">
     <bx_repeat:menu_items>
-        <li class="bx-menu-item bx-menu-item-__name____class__ group">__item__</li>
+        <li class="bx-menu-item bx-menu-item-__name____class__">__item__</li>
     </bx_repeat:menu_items>
 </ul>

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

@@ -1,7 +1,7 @@
 <div class="w-full md:w-56 box-border">
     <ul class="bx-menu-custom bx-menu-custom-ver bx-menu-object-__object__ bx-clearfix">
         <bx_repeat:menu_items>
-            <li class="bx-menu-item bx-menu-item-__name____class__ group opacity-80 hover:opacity-100 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:text-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 flex items-center px-4 py-2 text-sm font-normal">__item__</li>
+            <li class="bx-menu-item bx-menu-item-__name____class__ bx-stl-mil group">__item__</li>
         </bx_repeat:menu_items>
     </ul>
 </div>

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

@@ -1,6 +1,6 @@
 <div id="bx-sliding-menu-account" class="bx-popup-wrapper bx-popup-trans-wrapper box-border bx-def-z-index-nav" style="display:none; opacity:1;">
     <div class="bx-popup-gap mx-4 my-px md:m-px">
-        <div class="bx-popup bx-popup-trans relative ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md shadow overflow-hidden">
+        <div class="bx-popup bx-popup-trans bx-popup-border bx-popup-color-bg">
             <div class="bx-popup-content relative">
                 <div class="bx-menu-account-popup bx-menu-object-__object__ pt-4">
                     <div class="bx-menu-account-popup-profile bx-clearfix px-4">__active_profile__</div>

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

@@ -1,12 +1,14 @@
 <ul id="__html_id__" class="bx-menu-main<bx_if:show_more_auto_class> bx-menu-more-auto</bx_if:show_more_auto_class> bx-menu-object-__object__ flex flex-nowrap space-x-2">
-    <bx_repeat:menu_items><li class="bx-menu-item bx-menu-item-__name__ __class_add__ rounded-md">
-        <a href="__link__" onclick="__onclick__" class="group opacity-80 hover:opacity-100 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100 flex items-center px-2 py-2 text-sm font-normal rounded-md"__attrs__>
-            <div class="bx-menu-floating-blocks-icon flex items-center justify-center text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 mr-2 h-5 w-5">
-                <bx_include_auto:menu_icon.html />
-            </div>
-            <div class="bx-menu-floating-blocks-title whitespace-nowrap">__title__</div>
-        </a>__popup__
-    </li></bx_repeat:menu_items>
+    <bx_repeat:menu_items>
+        <li class="bx-menu-item bx-menu-item-__name__ __class_add__ rounded-md">
+            <a href="__link__" onclick="__onclick__" class="bx-stl-mil group"__attrs__>
+                <div class="bx-menu-item-icon bx-menu-floating-blocks-icon bx-stl-mii group-hover:text-gray-700 dark:group-hover:text-gray-300">
+                    <bx_include_auto:menu_icon.html />
+                </div>
+                <div class="bx-menu-item-title bx-menu-floating-blocks-title bx-stl-mit whitespace-nowrap">__title__</div>
+            </a>__popup__
+        </li>
+    </bx_repeat:menu_items>
 </ul>
 <script language="javascript">
     $(document).ready(function () {

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

@@ -1,5 +1,5 @@
 <div id="__id__" class="__class__ bx-popup-wrapper bx-popup-trans-wrapper box-border bx-def-z-index-nav" style="__style__">
-    <div class="bx-popup bx-popup-trans relative ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md shadow">
+    <div class="bx-popup bx-popup-trans bx-popup-border bx-popup-color-bg">
         <div class="bx-popup-content box-border overflow-hidden">__content__</div>
     </div>
 </div>

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

@@ -2,14 +2,12 @@
     <bx_repeat:menu_items>
         <li class="bx-menu-item bx-menu-item-__name__ __class_add__ text-sm font-medium">
             <div class="bx-menu-item-cnt">
-                <div class="bx-menu-item-link flex items-center justify-between p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-slate-900/5 dark:hover:bg-slate-700 rounded-md">
-                    <a class="flex items-center w-full uppercase" href="__link__" onclick="__onclick__"__attrs__>
-                        <span class="bx-menu-item-icon flex items-center justify-center h-6 w-6 leading-6 text-base">
-                            <bx_if:icon><i class="sys-icon __icon__"></i></bx_if:icon>
-                            <bx_if:image><img class="w-6 bg-contain bx-no-repeat bg-center" style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></bx_if:image>
-                            <bx_if:icon-html>__icon__</bx_if:icon-html>
+                <div class="bx-menu-item-link bx-stl-mil">
+                    <a class="flex items-center w-full" href="__link__" onclick="__onclick__"__attrs__>
+                        <span class="bx-menu-item-icon bx-stl-mii group-hover:text-gray-700 dark:group-hover:text-gray-300">
+                            <bx_include_auto:menu_icon.html />
                         </span>
-                        <span class="bx-menu-item-title ml-2" sidebar-toggle-item>__title__</span>
+                        <span class="bx-menu-item-title bx-stl-mit" sidebar-toggle-item>__title__</span>
                     </a>
                     <span class="bx-menu-collapse pl-2" sidebar-toggle-item>
                         <a href="javascript:void(0)" onclick="javascript:bx_toggle_pf(this)">

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

@@ -1,17 +1,15 @@
 <ul class="bx-menu-item-subitems bx-menu-pf-subitems bx-menu-ver">
     <bx_repeat:menu_items>
-        <li class="bx-menu-subitem bx-menu-subitem-__name__ __class_add__ text-sm font-medium">
-            <div class="bx-menu-item-cnt flex items-center pl-4 pr-2 py-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-slate-900/5 dark:hover:bg-slate-700 rounded-md">
-                <a class="flex items-center" href="__link__" onclick="__onclick__"__attrs__>
-                    <span class="bx-menu-item-icon flex items-center justify-center h-6 w-6 mr-2 leading-6 text-xl">
-                        <bx_if:icon><i class="sys-icon __icon__"></i></bx_if:icon>
-                        <bx_if:image><img class="w-6 bg-contain bx-no-repeat bg-center" style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></bx_if:image>
-                        <bx_if:icon-html>__icon__</bx_if:icon-html>
+        <li class="bx-menu-subitem bx-menu-subitem-__name__ __class_add__">
+            <div class="bx-menu-item-cnt bx-stl-mil">
+                <a class="flex items-center truncate" href="__link__" onclick="__onclick__"__attrs__>
+                    <span class="bx-menu-item-icon bx-stl-mii group-hover:text-gray-700 dark:group-hover:text-gray-300">
+                        <bx_include_auto:menu_icon.html />
                     </span>
-                    <span class="bx-menu-item-title ml-2" sidebar-toggle-item>__title__</span>
+                    <span class="bx-menu-item-title bx-stl-mit" sidebar-toggle-item>__title__</span>
                 </a>
                 <bx_if:addon>
-                    <div class="bx-menu-addon pl-2">
+                    <div class="bx-menu-addon bx-stl-mia group-hover:text-gray-800 dark:group-hover:text-gray-100">
                         <div class="bx-menu-addon-cnt bx-def-label menu">__addon__</div>
                     </div>
                 </bx_if:addon>

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

@@ -1,18 +1,16 @@
 <ul class="bx-menu-profile-stats bx-menu-ver bx-menu-object-__object__">
     <bx_repeat:menu_items>
-        <li class="bx-menu-item-__name__ __class_add__ group text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-slate-900/5 dark:hover:bg-slate-700 text-sm font-medium rounded-md">
-            <div class="bx-menu-item-cnt flex items-center justify-between p-2">
-                <a class="flex flex-1 items-center truncate" href="__link__" onclick="__onclick__"__attrs__>
-                    <span class="bx-menu-item-icon flex items-center justify-center h-6 w-6 leading-6 text-base">
-                        <bx_if:icon><i class="sys-icon __icon__"></i></bx_if:icon>
-                        <bx_if:image><img class="h-6 w-6" style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></bx_if:image>
-                        <bx_if:icon-html>__icon__</bx_if:icon-html>
+        <li class="bx-menu-item-__name__ __class_add__ rounded-md">
+            <div class="bx-menu-item-cnt bx-stl-mil group justify-between">
+                <a class="flex items-center truncate" href="__link__" onclick="__onclick__"__attrs__>
+                    <span class="bx-menu-item-icon bx-stl-mii group-hover:text-gray-700 dark:group-hover:text-gray-300">
+                        <bx_include_auto:menu_icon.html />
                     </span>
-                    <span class="bx-menu-item-title ml-2 truncate" sidebar-toggle-item>__title__</span>
+                    <span class="bx-menu-item-title bx-stl-mit" sidebar-toggle-item>__title__</span>
                 </a>
                 <bx_if:addon>
-                    <div class="bx-menu-addon inline-block ml-auto bg-blue-200 text-blue-800 text-xs rounded-full" sidebar-toggle-item>
-                        <div class="bx-menu-addon-cnt py-0.5 px-2">__addon__</div>
+                    <div class="bx-menu-addon bx-stl-mia group-hover:text-gray-800 dark:group-hover:text-gray-100" sidebar-toggle-item>
+                        <div class="bx-menu-addon-cnt">__addon__</div>
                     </div>
                 </bx_if:addon>
             </div>

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

@@ -1,6 +1,6 @@
 <div id="__id__" class="bx-popup-wrapper bx-popup-box-wrapper box-border" style="__wrapper_style__" role="dialog" aria-describedby="__id___title">
     <div class="bx-popup-gap mx-4 my-px">
-        <div class="bx-popup bx-popup-box bx-popup-width relative ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md shadow">
+        <div class="bx-popup bx-popup-box bx-popup-width bx-popup-border bx-popup-color-bg">
             <div class="bx-popup-header flex items-center justify-between p-3 md:p-4 lg:p-6">
                 <div class="text-lg lg:text-xl leading-6 font-semibold text-gray-800 dark:text-gray-100" id="__id___title">__title__</div>
                 <div class="bx-popup-close-wrapper relative">

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

@@ -1,6 +1,6 @@
 <div  id="__id__" class="bx-popup-wrapper bx-popup-responsive bx-popup-trans-wrapper box-border __wrapper_class__" style="__wrapper_style__" role="alert">
     <div class="bx-popup-gap mx-4 my-px">
-        <div class="bx-popup bx-popup-trans relative ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md shadow">
+        <div class="bx-popup bx-popup-trans bx-popup-border bx-popup-color-bg">
             <div class="bx-popup-close-wrapper bx-def-media-desktop-hide bx-def-media-tablet-hide relative pt-2 px-2 text-right">
                 <a href="javascript:void(0);" class="bx-popup-element-close flex items-center justify-center w-6 h-6 text-base"><i class="sys-icon times text-gray-800 dark:text-gray-100"></i></a>
             </div>

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

@@ -1,6 +1,6 @@
 <div class="bx-profile-membership-stats">
     <div class="bx-pms-membership">__membership__</div>
-    <div class="bx-pms-stats flex flex-col mt-4 p-4 ring-1 ring-gray-200 dark:ring-gray-700 overflow-hidden bg-white dark:bg-gray-800 rounded-md">
+    <div class="bx-pms-stats bx-def-box bx-def-box-round-corners bx-def-color-bg-box mt-4 p-4">
         <bx_repeat:stat_items>
             <div class="bx-pms-stat-item mt-4 first:mt-0">
                 <div class="bx-pms-si-title">__title__</div>

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

@@ -1,5 +1,5 @@
 <div class="bx-base-general-unit bx-def-unit bx-def-unit-live-search group flex items-center mb-2 last:mb-0" data-ts="__ts__">
-    <a class="relative flex items-center w-full p-2 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-200 rounded-md box-border" href="__content_url__">
+    <a class="bx-def-box bx-def-box-hor bx-def-box-round-corners bx-def-color-bg-box bx-def-color-bg-box-hover relative items-center w-full p-2 box-border" href="__content_url__">
         <div class="bx-def-unit-img">
             <div class="bx-def-unit-img-empty bx-def-thumb-size bg-white dark:bg-gray-700 rounded box-border"><i class="sys-icon __icon__"></i></div>
         </div>

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

@@ -1 +1 @@
-<div id="__html_id__" class="__class__ relative w-full mt-2 p-4 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md shadow box-border"<bx_if:show_hidden> style="display:none"</bx_if:show_hidden>>__content__</div>
+<div id="__html_id__" class="__class__ bx-def-box bx-def-box-round-corners bx-def-color-bg-box relative w-full mt-2 p-4 box-border"<bx_if:show_hidden> style="display:none"</bx_if:show_hidden>>__content__</div>

plugins_public/tailwind/css/tailwind.css

@@ -32,10 +32,6 @@
         @apply font-normal text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600;
     }
 
-    .bx-artificer .bx-def-box {
-        @apply flex flex-col ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 overflow-hidden rounded;
-    }
-
     .bx-artificer .bx-def-box-sizing {
         @apply box-border;
     }
@@ -335,11 +331,32 @@
     }
 
     /* Common elements: Blocks, Boxes, etc. */
-    .bx-artificer .bx-def-color-bg-block {
-        @apply bg-white dark:bg-gray-900;
+    .bx-artificer .bx-def-box {
+        @apply flex flex-col overflow-hidden;
+    }
+    .bx-artificer .bx-def-box.bx-def-box-hor {
+        @apply flex-row;
     }
-    .bx-artificer .bx-def-color-bg-box {
-        @apply bg-gray-50 dark:bg-gray-800;
+    .bx-artificer .bx-def-color-bg-block,
+    .bx-artificer .bx-def-color-bg-box,
+    .bx-artificer .bx-popup-color-bg {
+        @apply bg-white dark:bg-gray-800 shadow;
+    }
+    .bx-artificer .bx-def-border-block,
+    .bx-artificer .bx-def-box,
+    .bx-artificer .bx-popup-border {
+        @apply ring-1 ring-gray-300 dark:ring-gray-700;
+    }
+    .bx-artificer .bx-def-border-radius-block,
+    .bx-artificer .bx-def-box-round-corners,
+    .bx-artificer .bx-popup-border {
+        @apply rounded-md;
+    }
+    .bx-artificer .bx-content-padding-block {
+        @apply p-4;
+    }
+    .bx-artificer .bx-def-color-bg-box-hover {
+        @apply hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-800 dark:hover:text-gray-200;
     }
     .bx-artificer .bx-def-color-bg-box-active {
         @apply bg-gray-100 dark:bg-gray-700;
@@ -433,6 +450,10 @@
         @apply font-normal text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600;
     }
 
+    .bx-artificer .bx-form-caption {
+        @apply text-gray-700 dark:text-gray-300 text-sm font-medium;
+    }
+
     .bx-artificer .bx-form-value {
         @apply mt-1 first:mt-0;
     }
@@ -517,7 +538,15 @@
     }
 
     .bx-artificer .bx-popup {
-        @apply relative ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md shadow;
+        @apply relative;
+    }
+
+    .bx-artificer .bx-popup-color-bg {
+        @apply bg-white dark:bg-gray-800 shadow;
+    }
+
+    .bx-artificer .bx-popup-border {
+        @apply ring-1 ring-gray-300 dark:ring-gray-700 rounded-md;
     }
 
     .bx-artificer .bx-popup-width {
@@ -539,6 +568,40 @@
 
 
     /* Common elements: Menus */
+    .bx-artificer .bx-stl-mil,
+    .bx-artificer .bx-stl-mil-sm {
+        @apply flex items-center px-3 py-1.5 leading-6 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 active:bg-gray-300 dark:active:bg-black hover:bg-gray-50 dark:hover:bg-gray-700 text-sm font-medium rounded-md;
+    }
+    .bx-artificer .bx-stl-mil-sm {
+        @apply px-2 leading-4;
+    }
+    .bx-artificer .bx-popup .bx-stl-mil,
+    .bx-artificer .bx-popup .bx-stl-mil-sm {
+        @apply rounded-none;
+    }
+    .bx-artificer .bx-menu-tab-active .bx-stl-mil,
+    .bx-artificer .bx-menu-tab-active .bx-stl-mil-sm {
+        @apply ring-1 ring-white dark:ring-gray-800 bg-gray-200 dark:bg-gray-900 text-gray-900 dark:text-white;
+    }
+    .bx-artificer .bx-popup .bx-menu-tab-active .bx-stl-mil,
+    .bx-artificer .bx-popup .bx-menu-tab-active .bx-stl-mil-sm {
+        @apply ring-0;
+    }
+    .bx-artificer .bx-stl-mii,
+    .bx-artificer .bx-stl-mii-sm,
+    .bx-artificer .bx-stl-mil .sys-action-do-icon {
+        @apply flex items-center justify-center h-6 w-6 mr-3 leading-6 text-gray-500 text-lg;
+    }
+    .bx-artificer .bx-stl-mii-sm {
+        @apply h-4 w-4 mr-1 leading-4 text-sm;
+    }
+    .bx-artificer .bx-stl-mit {
+        @apply truncate;
+    }
+    .bx-artificer .bx-stl-mia {
+        @apply inline-block py-0.5 px-2 bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-300 text-xs rounded-full;
+    }
+
     /* Horizontal menu */
     .bx-artificer .bx-menu-hor li.bx-menu-tab-active a,
     .bx-artificer .bx-menu-custom-hor li.bx-menu-tab-active a {
@@ -566,16 +629,6 @@
     }
 
     /* Main menu */
-    .bx-artificer .bx-toolbar-item.bx-ti-menu .bx-menu-main .bx-menu-item.bx-menu-tab-active {
-        @apply opacity-100 ring-1 ring-gray-200 dark:ring-gray-600 bg-gray-50 dark:bg-gray-700 shadow;
-    }
-    .bx-artificer .bx-toolbar-item.bx-ti-menu .bx-menu-main .bx-menu-item.bx-menu-tab-active a {
-        @apply text-gray-900 dark:text-white;
-    }
-    .bx-artificer .bx-toolbar-item.bx-ti-menu .bx-menu-main .bx-popup .bx-menu-item.bx-menu-tab-active {
-        @apply opacity-100 ring-0 bg-gray-50 dark:bg-gray-700 shadow-none;
-    }
-
     /* Page Submenu */
     .bx-artificer .bx-menu-main-submenu .bx-menu-item.bx-menu-tab-active a {
         @apply text-gray-900 dark:text-gray-100;
@@ -663,10 +716,6 @@
 
     
     /* Modules: Timeline */
-    .bx-artificer .bx-menu-custom-hor.bx-menu-object-bx_timeline_menu_view li.bx-menu-tab-active a {
-        @apply bg-gray-50 dark:bg-gray-700 ring-1 ring-gray-200 dark:ring-gray-600 text-gray-900 dark:text-white shadow;
-    }
-
     .bx-artificer .bx-tl-item-text .bx-tl-content.bx-tl-overflow:before {
         @apply bg-gradient-to-b from-transparent to-white dark:to-gray-800;
     }

plugins_public/tailwind/js/tailwind.config.js

@@ -55,11 +55,15 @@ module.exports = {
     'bx-def-icon-size', 'bx-def-thumb-size', 'bx-def-ava-size', 'bx-def-ava-big-size',
     'bx-def-color-bg-box-active', 
 
-    'bx-form-required', 'bx-form-warn', 'bx-switcher-cont', 
-    '.bx-form-input-wrapper-checkbox_set', 'bx-form-input-wrapper-radio_set',
+    'bx-form-caption', 'bx-form-value', 'bx-form-required', 'bx-form-warn', 
+    'bx-form-input-wrapper-checkbox_set', 'bx-form-input-wrapper-radio_set',
     'bx-form-input-slider', 'bx-form-input-doublerange', 'bx-form-input-select_multiple', 'bx-form-input-select', 'bx-form-input-radio_set', 'bx-form-input-checkbox_set', 'bx-form-input-number', 'bx-form-input-time', 'bx-form-input-datepicker', 'bx-form-input-datetime', 'bx-form-input-textarea', 'bx-form-input-text', 'bx-form-input-price', 'bx-form-input-checkbox', 'bx-form-input-radio', 
+    'bx-switcher-cont', 
 
     'bx-popup-full-screen', 'bx-popup-fog',
+
+    'bx-stl-mil', 'bx-stl-mii', 'bx-stl-mit', 'bx-stl-mia', 
+
     'bx-informer-msg-info', 'bx-informer-msg-alert', 'bx-informer-msg-error',
 
     'bx-base-general-unit-meta-username',
@@ -73,7 +77,7 @@ module.exports = {
   darkMode: 'class', // false or 'media' or 'class'
   theme: {
     fontFamily: {
-        'inter': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'],
+        'inter': ['Inter var', 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'],
     },
     extend: {
         width: {

template/designbox_1.html

@@ -1,5 +1,5 @@
 <!-- Design Box 1 [start]: Content + title + background -->
-<div class="bx-db-container bx-dbc-nopadding bx-def-color-bg-block ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm rounded-md">
+<div class="bx-db-container bx-dbc-nopadding bx-def-color-bg-block bx-def-border-block bx-def-border-radius-block">
     <div class="bx-db-header px-4 py-2 lg:px-6 lg:py-4">
         <div class="bx-db-title text-lg lg:text-xl leading-6 font-bold text-gray-800 dark:text-gray-100 align-middle">__title__</div>__caption_item__
     </div>

template/designbox_11.html

@@ -1,8 +1,8 @@
 <!-- Design Box 11 [start]: Content + title + background + padding -->
-<div class="bx-db-container bx-def-color-bg-block ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm rounded-md">
+<div class="bx-db-container bx-def-color-bg-block bx-def-border-block bx-def-border-radius-block">
     <div class="bx-db-header px-3 md:px-4 pt-2 md:pt-3">
         <div class="bx-db-title text-lg lg:text-xl leading-6 font-bold text-gray-800 dark:text-gray-100 align-middle">__title__</div>__caption_item__
     </div>
-    <div class="bx-db-content relative p-3 md:p-4">__designbox_content__</div>
+    <div class="bx-db-content bx-content-padding-block relative">__designbox_content__</div>
 </div>
 <!-- Design Box 11 [ end ] -->

template/designbox_13.html

@@ -1,5 +1,5 @@
 <!-- Design Box 13 [start]: Content + background + padding -->
-<div class="bx-db-container bx-def-color-bg-block ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm rounded-md">
-    <div class="bx-db-content relative p-3 md:p-4">__designbox_content__</div>
+<div class="bx-db-container bx-def-color-bg-block bx-def-border-block bx-def-border-radius-block">
+    <div class="bx-db-content bx-content-padding-block relative">__designbox_content__</div>
 </div>
 <!-- Design Box 13 [ end ] -->

template/designbox_3.html

@@ -1,5 +1,5 @@
 <!-- Design Box 3 [start]: Content + background -->
-<div class="bx-db-container bx-dbc-nopadding bx-def-color-bg-block ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm rounded-md">
+<div class="bx-db-container bx-dbc-nopadding bx-def-color-bg-block bx-def-border-block bx-def-border-radius-block">
     <div class="bx-db-content relative">__designbox_content__</div>
 </div>
 <!-- Design Box 3 [ end ] -->

template/menu_main_in_panel.html

@@ -1,12 +1,12 @@
 <ul class="bx-menu-main-in-panel bx-menu-ver bx-menu-object-__object__ bx-clearfix">
     <bx_repeat:menu_items>
-        <li class="bx-menu-item __name__ __class_add__ group text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-700 text-sm font-medium rounded-md">
-            <div class="bx-menu-item-cnt flex items-center justify-between p-2">
-                <a class="__name__ flex flex-1 items-center truncate" href="__link__" onclick="__onclick__"__attrs__>
-                    <span class="flex items-center justify-center h-5 w-5 mr-2">
+        <li class="bx-menu-item __name__ __class_add__ rounded-md">
+            <div class="bx-menu-item-cnt bx-stl-mil group">
+                <a class="__name__ flex items-center justify-between truncate" href="__link__" onclick="__onclick__"__attrs__>
+                    <span class="bx-menu-item-icon bx-stl-mii">
                         <bx_include_auto:menu_icon.html />
                     </span>
-                    <span class="truncate" sidebar-toggle-item>__title__</span>
+                    <span class="bx-menu-item-title bx-stl-mit" sidebar-toggle-item>__title__</span>
                 </a>
             </div>
         </li>