Ticket #3399 - For now custom Tailwind classes should be applied to Artificer template only.

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

@@ -1,7 +1,7 @@
 /*-- Entry Form: Attachments custom elements --*/
-.bx-base-text-attachment-item {
+.bx-form-advanced .bx-base-text-attachment-item {
     margin-top: 0;
 }
-.bx-base-text-attachment-item .bx-form-input-files-uploaders {
+.bx-form-advanced .bx-base-text-attachment-item .bx-form-input-files-uploaders {
     margin-top: 0;
 }

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

@@ -33,7 +33,7 @@
     <bx_injection:injection_head />
     <bx_include_auto:_header_meta.html />
 </head>
-<body class="bg-gray-100 dark:bg-black text-gray-500 dark:text-gray-400 font-inter <bx_injection:injection_body_class />" dir="__lang_direction__" <bx_injection:injection_body /> >
+<body class="bx-artificer bg-gray-100 dark:bg-black text-gray-500 dark:text-gray-400 font-inter <bx_injection:injection_body_class />" dir="__lang_direction__" <bx_injection:injection_body /> >
     __system_injection_header__
     <bx_injection:injection_header />
     <noscript>

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

@@ -62,6 +62,7 @@ import url(../../../../../../../template/css/menu.css);
     position: absolute;
     top: -0.375rem;
     right: -0.375rem;
+    padding: 0 0.25rem;
 }
 
 /*--- Account Popup ---*/

plugins_public/tailwind/css/tailwind.css

@@ -14,276 +14,268 @@
 
 @layer components {
     /* Defaults */
-    .bx-def-a-colored {
+    .bx-artificer .bx-def-a-colored {
         @apply no-underline text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600;
     }
 
-    .bx-def-hr {
+    .bx-artificer .bx-def-hr {
         @apply m-0 p-0 border-t border-gray-200 dark:border-gray-700;
     }
 
-    .bx-def-font-grayed {
+    .bx-artificer .bx-def-font-grayed {
         @apply text-gray-700 dark:text-gray-500 text-opacity-60;
     }
 
     /* Margins and Paddings */
-    .bx-def-margin {
+    .bx-artificer .bx-def-margin {
         @apply m-4;
     }
-    .bx-def-margin-left {
+    .bx-artificer .bx-def-margin-left {
         @apply ml-4;
     }
-    .bx-def-margin-left-auto {
+    .bx-artificer .bx-def-margin-left-auto {
         @apply ml-4 first:ml-0;
     }
-    .bx-def-margin-right {
+    .bx-artificer .bx-def-margin-right {
         @apply mr-4;
     }
-    .bx-def-margin-top {
+    .bx-artificer .bx-def-margin-top {
         @apply mt-4;
     }
-    .bx-def-margin-top-auto {
+    .bx-artificer .bx-def-margin-top-auto {
         @apply mt-4 first:mt-0;
     }
-    .bx-def-margin-bottom {
+    .bx-artificer .bx-def-margin-bottom {
         @apply mb-4;
     }
     
-    .bx-def-margin-sec {
+    .bx-artificer .bx-def-margin-sec {
         @apply m-2;
     }
-    .bx-def-margin-sec-left {
+    .bx-artificer .bx-def-margin-sec-left {
         @apply ml-2;
     }
-    .bx-def-margin-sec-left-auto {
+    .bx-artificer .bx-def-margin-sec-left-auto {
         @apply ml-2 first:ml-0;
     }
-    .bx-def-margin-sec-right {
+    .bx-artificer .bx-def-margin-sec-right {
         @apply mr-2;
     }
-    .bx-def-margin-sec-top {
+    .bx-artificer .bx-def-margin-sec-top {
         @apply mt-2;
     }
-    .bx-def-margin-sec-top-auto {
+    .bx-artificer .bx-def-margin-sec-top-auto {
         @apply mt-2 first:mt-0;
     }
-    .bx-def-margin-sec-bottom {
+    .bx-artificer .bx-def-margin-sec-bottom {
         @apply mb-2;
     }
 
-    .bx-def-padding {
+    .bx-artificer .bx-def-padding {
         @apply p-4;
     }
-    .bx-def-padding-left {
+    .bx-artificer .bx-def-padding-left {
         @apply pl-4;
     }
-    .bx-def-padding-left-auto {
+    .bx-artificer .bx-def-padding-left-auto {
         @apply pl-4 first:pl-0;
     }
-    .bx-def-padding-right {
+    .bx-artificer .bx-def-padding-right {
         @apply pr-4;
     }
-    .bx-def-padding-top {
+    .bx-artificer .bx-def-padding-top {
         @apply pt-4;
     }
-    .bx-def-padding-top-auto {
+    .bx-artificer .bx-def-padding-top-auto {
         @apply pt-4 first:pt-0;
     }
-    .bx-def-padding-bottom {
+    .bx-artificer .bx-def-padding-bottom {
         @apply pb-4;
     }
     
-    .bx-def-padding-sec {
+    .bx-artificer .bx-def-padding-sec {
         @apply p-2;
     }
-    .bx-def-padding-sec-left {
+    .bx-artificer .bx-def-padding-sec-left {
         @apply pl-2;
     }
-    .bx-def-padding-sec-left-auto {
+    .bx-artificer .bx-def-padding-sec-left-auto {
         @apply pl-2 first:pl-0;
     }
-    .bx-def-padding-sec-right {
+    .bx-artificer .bx-def-padding-sec-right {
         @apply pr-2;
     }
-    .bx-def-padding-sec-top {
+    .bx-artificer .bx-def-padding-sec-top {
         @apply pt-2;
     }
-    .bx-def-padding-sec-top-auto {
+    .bx-artificer .bx-def-padding-sec-top-auto {
         @apply pt-2 first:pt-0;
     }
-    .bx-def-padding-sec-bottom {
+    .bx-artificer .bx-def-padding-sec-bottom {
         @apply pb-2;
     }
 
     /* Common elements: Buttons */
-    .bx-btn {
+    .bx-artificer .bx-btn {
         @apply relative inline-flex justify-center items-center px-4 py-2 border border-gray-300 dark:border-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 dark:hover:text-white hover:text-gray-800 whitespace-nowrap 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 rounded-md shadow-sm hover:shadow-md;
     }
 
-    .bx-btn i, 
-    .bx-btn u {
+    .bx-artificer .bx-btn i, 
+    .bx-artificer .bx-btn u {
         @apply inline-block align-middle;
     }
 
-    .bx-btn i, 
-    .bx-btn img {
+    .bx-artificer .bx-btn i, 
+    .bx-artificer .bx-btn img {
         @apply w-5 h-5 leading-5 text-gray-600 dark:text-gray-300;
     }
 
-    .bx-btn:hover i, 
-    .bx-btn:hover img {
+    .bx-artificer .bx-btn:hover i, 
+    .bx-artificer .bx-btn:hover img {
         @apply text-gray-800 dark:text-gray-100;
     }
 
-    .bx-btn i {
+    .bx-artificer .bx-btn i {
         @apply text-center;
     }
 
-    .bx-btn u {
+    .bx-artificer .bx-btn u {
         @apply ml-2 first:ml-0 no-underline;
     }
 
-    .bx-btn.bx-btn-primary {
+    .bx-artificer .bx-btn.bx-btn-primary {
         @apply border-transparent text-white hover:text-white dark:hover:text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
     }
 
-    .bx-btn.bx-btn-primary i, 
-    .bx-btn.bx-btn-primary img {
+    .bx-artificer .bx-btn.bx-btn-primary i, 
+    .bx-artificer .bx-btn.bx-btn-primary img {
         @apply text-gray-300;
     }
     
-    .bx-btn.bx-btn-primary:hover i, 
-    .bx-btn.bx-btn-primary:hover img {
+    .bx-artificer .bx-btn.bx-btn-primary:hover i, 
+    .bx-artificer .bx-btn.bx-btn-primary:hover img {
         @apply text-gray-100;
     }
     
-    .bx-btn.bx-btn-disabled {
+    .bx-artificer .bx-btn.bx-btn-disabled {
         @apply bg-gray-50 dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-400 hover:text-gray-400 dark:hover:text-gray-400 !important;
     }
 
-    .bx-btn.bx-btn-small {
+    .bx-artificer .bx-btn.bx-btn-small {
         @apply py-1 text-xs;
     }
 
-    .bx-btn.bx-btn-small i, 
-    .bx-btn.bx-btn-small img {
+    .bx-artificer .bx-btn.bx-btn-small i, 
+    .bx-artificer .bx-btn.bx-btn-small img {
         @apply w-4 h-4 leading-4;
     }
 
 
     /* Common elements: Forms */
-    form {
+    .bx-artificer form {
         @apply text-sm font-normal text-gray-700 dark:text-gray-300;
     }
 
-    form a {
+    .bx-artificer form a {
         @apply font-normal text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600;
     }
 
-    .bx-form-required,
-    .bx-form-warn {
+    .bx-artificer .bx-form-required,
+    .bx-artificer .bx-form-warn {
         @apply text-red-400;
     }
 
 
     /* Common elements: Popups */
-    .bx-popup-wrapper {
+    .bx-artificer .bx-popup-wrapper {
         @apply overflow-visible;
     }
 
-    .bx-popup-applied {
+    .bx-artificer .bx-popup-applied {
         @apply rounded-lg;
     }
 
-    .bx-popup-responsive:not(.bx-popup-full-screen):not(.bx-popup-menu) {
+    .bx-artificer .bx-popup-responsive:not(.bx-popup-full-screen):not(.bx-popup-menu) {
         @apply w-full md:w-auto;
     }
 
-    .bx-popup-full-screen {
+    .bx-artificer .bx-popup-full-screen {
         @apply w-full;
     }
 
-    .bx-popup-width {
+    .bx-artificer .bx-popup-width {
         @apply w-full md:w-128;
     }
 
-    .bx-popup-full-screen .bx-popup-width {
+    .bx-artificer .bx-popup-full-screen .bx-popup-width {
         @apply w-full md:w-full;
     }
 
-    .bx-popup-fog {
+    .bx-artificer .bx-popup-fog {
         @apply bg-gray-600 opacity-75;
     }
 
 
     /* Common elements: Menus */
     /* Horizontal menu */
-    .bx-menu-hor li.bx-menu-tab-active a,
-    .bx-menu-custom-hor li.bx-menu-tab-active a {
+    .bx-artificer .bx-menu-hor li.bx-menu-tab-active a,
+    .bx-artificer .bx-menu-custom-hor li.bx-menu-tab-active a {
         @apply text-gray-700 dark:text-gray-200 font-medium;
     }
 
-    .bx-db-header .bx-menu-custom-hor li.bx-menu-tab-active a {
+    .bx-artificer .bx-db-header .bx-menu-custom-hor li.bx-menu-tab-active a {
         @apply bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white;
     }
 
     /* Vertical menu in Popup */
-    .bx-popup .bx-menu-ver > li:hover {
+    .bx-artificer .bx-popup .bx-menu-ver > li:hover {
         @apply hover:text-gray-900 dark:hover:text-gray-100;
     }
 
-    .bx-popup .bx-menu-ver > li.bx-def-color-bg-active {
+    .bx-artificer .bx-popup .bx-menu-ver > li.bx-def-color-bg-active {
         @apply bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white;
     }
 
     /* Main menu */
-    .bx-toolbar-item.bx-ti-menu .bx-menu-main .bx-menu-item.bx-menu-tab-active {
+    .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-800 text-gray-900 dark:text-white shadow;
     }
 
-    /* Main menu: Mobile */
-    .bx-media-phone .go-back a::before, 
-    .bx-media-phone .go-back a::after,
-    .bx-media-phone .has-children > a::before, 
-    .bx-media-phone .has-children > a::after {
-        @apply bg-gray-700 dark:bg-gray-300;
-    }
-
     /* Page Submenu */
-    .bx-menu-main-submenu .bx-menu-item.bx-menu-tab-active a {
+    .bx-artificer .bx-menu-main-submenu .bx-menu-item.bx-menu-tab-active a {
         @apply text-gray-900 dark:text-gray-100;
     }
-    .bx-menu-main-submenu .bx-menu-item.bx-menu-tab-active .bx-mi-underline {
+    .bx-artificer .bx-menu-main-submenu .bx-menu-item.bx-menu-tab-active .bx-mi-underline {
         @apply bg-blue-500 group-hover:bg-blue-500;
     }
 
     /* Profile Cover Actions */
-    .bx-base-pofile-cover-actions div.bx-base-general-entity-actions .bx-menu-custom-hor.bx-menu-hor-inline li.bx-mi-primary {
+    .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 {
         @apply border-transparent text-gray-200 hover:text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500;
     }
 
 
     /* Common elements: Alerts */
-    .bx-informer-msg a {
+    .bx-artificer .bx-informer-msg a {
         @apply text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600;
     }
-    .bx-informer-msg-info {
+    .bx-artificer .bx-informer-msg-info {
         @apply bg-blue-50 text-blue-700;
     }
-    .bx-informer-msg-alert {
+    .bx-artificer .bx-informer-msg-alert {
         @apply bg-yellow-50 text-yellow-700;
     }
-    .bx-informer-msg-error {
+    .bx-artificer .bx-informer-msg-error {
         @apply bg-red-50 text-red-700;
     }
 
     
     /* Modules: Timeline */
-    .bx-menu-custom-hor.bx-menu-object-bx_timeline_menu_view li.bx-menu-tab-active a {
+    .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-tl-view.bx-tl-view-timeline .bx-tl-cnt .bx-tl-items:before {
+    .bx-artificer .bx-tl-view.bx-tl-view-timeline .bx-tl-cnt .bx-tl-items:before {
         @apply bg-gray-200 dark:bg-gray-700;
     }
 }