Ticket #4847 - Studio: Layout changes. Stage 3.

install/sql/system.sql

@@ -4941,7 +4941,7 @@ INSERT INTO `sys_menu_items` (`set_name`, `module`, `name`, `title_system`, `tit
 -- studio: account menu
 INSERT INTO `sys_menu_items` (`set_name`, `module`, `name`, `title_system`, `title`, `link`, `onclick`, `target`, `icon`, `submenu_object`, `visible_for_levels`, `active`, `copyable`, `editable`, `order`) VALUES
 ('sys_studio_account_popup', 'system', 'account', '_sys_menu_item_title_system_sa_account', '_sys_menu_item_title_sa_account', '{member_url}', '', '', 'ami-account.svg', '', 2147483647, 1, 0, 0, 1),
-('sys_studio_account_popup', 'system', 'site', '_sys_menu_item_title_system_sa_site', '_sys_menu_item_title_sa_site', '{url_root}', '', '', 'ami-site.svg', '', 2147483647, 0, 0, 0, 2),
+('sys_studio_account_popup', 'system', 'site', '_sys_menu_item_title_system_sa_site', '_sys_menu_item_title_sa_site', '{url_root}', '', '', 'ami-site.svg', '', 2147483647, 1, 0, 0, 2),
 ('sys_studio_account_popup', 'system', 'edit', '_sys_menu_item_title_system_sa_edit', '_sys_menu_item_title_sa_edit', 'javascript:void(0)', '{js_object}.clickEdit(this);', '', 'ami-edit.svg', '', 2147483647, 1, 0, 0, 3),
 ('sys_studio_account_popup', 'system', 'language', '_sys_menu_item_title_system_sa_language', '_sys_menu_item_title_sa_language', 'javascript:void(0)', 'bx_menu_popup(''sys_switch_language_popup'', window);', '', 'ami-language.svg', '', 2147483647, 1, 0, 0, 4),
 ('sys_studio_account_popup', 'system', 'logout', '_sys_menu_item_title_system_sa_logout', '_sys_menu_item_title_sa_logout', '{url_root}logout.php', '{js_object}.clickLogout(this);', '', 'ami-logout.svg', '', 2147483647, 1, 0, 0, 5);

plugins_public/tailwind/css/tailwind.css

@@ -1259,7 +1259,7 @@
     }
 
     .bx-std .bx-menu-top-center .bx-menu-tab-active .bx-mi-icon {
-        @apply ring-4 ring-blue-800 ring-offset-4 ring-offset-black;
+        @apply ring-4 ring-blue-500/50 ring-offset-2 ring-offset-white;
     }
     .bx-std .bx-menu-top-center .bx-menu-item-static,
     .bx-std .bx-menu-top-center .bx-menu-item-dynamic {

studio/template/css/general.css

@@ -201,7 +201,7 @@ div.bx-std-pmen-item a {
 }
 
 div.bx-std-pmen-item .sys-icon {
-    font-size: 1.25rem;
+    font-size: 1.0rem;
     color: #ffffff;
 }
 

studio/template/css/launcher.css

@@ -2,7 +2,7 @@
  * Overwrite
  */
 .bx-std-bg.bx-std-page-launcher {
-    background: rgba(0, 0, 0, 1);
+    background: rgb(229, 231, 235);
 }
 
 div.bx-std-menu-top-wrp {

studio/template/css/menu_top.css

@@ -10,7 +10,10 @@ div.bx-std-menu-top-wrp {
     flex-wrap: nowrap;
 
     width: 100%;
-    height: 5rem;
+    height: 4rem;
+
+    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
+    backdrop-filter: blur(16px);
 }
 div.bx-std-menu-top-wrp .bx-std-menu-top.bx-std-menu-top-center:first-child {
     padding-left: 0.75rem;
@@ -140,19 +143,7 @@ div.bx-std-menu-top .bx-menu-top-center li a {
     width: auto;
 }
 div.bx-std-menu-top .bx-menu-top-center li.bx-menu-tab-active a {
-    border-color: rgba(37, 99, 235, 0.8);
-}
-div.bx-std-menu-top .bx-menu-top-center li .bx-mi-bg {
-    position: absolute;
-    display: none;
-    z-index: 1;
-
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-
-    filter: blur(6px);
+    border-color: rgba(59, 130, 246, 0.5);
 }
 div.bx-std-menu-top .bx-menu-top-center li.bx-menu-tab-active .bx-mi-bg {
     display: block;
@@ -229,7 +220,7 @@ div.bx-std-menu-top ul li.bx-menu-tab-search > div {
     height: 2.5rem;
     right: 0;
 
-    border-radius: 1.5rem;
+    border-radius: 0.5rem;
 }
 div.bx-std-menu-top ul.bx-menu-breadcrumb li.bx-menu-tab-search > div {
     left: 0.5rem;
@@ -270,8 +261,7 @@ div.bx-std-menu-top .bx-menu-toolbar li {
     height: 2.5rem;
     min-width: 2.5rem;
     
-    border-radius: 1.5rem;
-    background-color: rgba(17, 24, 39, 1);
+    border-radius: 0.5rem;
 
     line-height: 2.5rem;
     overflow: hidden;
@@ -288,21 +278,11 @@ div.bx-std-menu-top .bx-menu-toolbar li:not(.bx-menu-tab-search) a {
     width: 100%;
     height: 100%;
 
-    border-radius: 1.5rem;
+    border-radius: 0.5rem;
 }
 
 div.bx-std-menu-top .bx-menu-toolbar li a:hover {
-    color: #ffffff;
-}
-
-div.bx-std-menu-top .bx-menu-toolbar li svg g {
-    opacity: 0.7;
-}
-div.bx-std-menu-top .bx-menu-toolbar li:hover {
-    background-color: rgba(31, 41, 55, 1);
-}
-div.bx-std-menu-top .bx-menu-toolbar li:hover svg g {
-    opacity: 0.85;
+    color: rgb(55, 65, 81);
 }
 
 div.bx-std-menu-top i.sys-icon {

studio/template/css/page_columns.css

@@ -32,8 +32,8 @@ div.bx-std-page-column.bx-std-page-menu {
     width: 20rem;
     height: 100%;
 
-    backdrop-filter: blur(40px);
     box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05);
+    backdrop-filter: blur(40px);
 
     overflow-y: auto;
 }
@@ -66,8 +66,6 @@ div.bx-std-page-column.bx-std-page-content {
 
     height: 100%;
 
-    background-color: rgba(229, 231, 235, 1.0);
-
     overflow-x: hidden;
     overflow-y: auto;
 }

studio/template/images/icons/tmi-assistant.svg

@@ -1,3 +1,3 @@
 <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M23.9748 12.5259L17.7403 10.2597L15.4741 4.02521C15.3624 3.7243 15.1613 3.46477 14.8978 3.2815C14.6343 3.09823 14.321 3 14 3C13.679 3 13.3657 3.09823 13.1022 3.2815C12.8387 3.46477 12.6376 3.7243 12.5259 4.02521L10.2597 10.2597L4.02521 12.5259C3.7243 12.6376 3.46477 12.8387 3.2815 13.1022C3.09823 13.3657 3 13.679 3 14C3 14.321 3.09823 14.6343 3.2815 14.8978C3.46477 15.1613 3.7243 15.3624 4.02521 15.4741L10.2597 17.7413L12.5259 23.9748C12.6376 24.2757 12.8387 24.5352 13.1022 24.7185C13.3657 24.9018 13.679 25 14 25C14.321 25 14.6343 24.9018 14.8978 24.7185C15.1613 24.5352 15.3624 24.2757 15.4741 23.9748L17.7413 17.7403L23.9748 15.4741C24.2757 15.3624 24.5352 15.1613 24.7185 14.8978C24.9018 14.6343 25 14.321 25 14C25 13.679 24.9018 13.3657 24.7185 13.1022C24.5352 12.8387 24.2757 12.6376 23.9748 12.5259ZM16.8578 16.3881C16.75 16.4273 16.652 16.4897 16.5709 16.5709C16.4897 16.652 16.4273 16.75 16.3881 16.8578L14 23.4245L11.6119 16.8578C11.5727 16.75 11.5103 16.652 11.4291 16.5709C11.348 16.4897 11.25 16.4273 11.1422 16.3881L4.57555 14L11.1422 11.6119C11.25 11.5727 11.348 11.5103 11.4291 11.4291C11.5103 11.348 11.5727 11.25 11.6119 11.1422L14 4.57555L16.3881 11.1422C16.4273 11.25 16.4897 11.348 16.5709 11.4291C16.652 11.5103 16.75 11.5727 16.8578 11.6119L23.4245 14L16.8578 16.3881Z" fill="#D1D5DB"/>
+<path d="M23.9748 12.5259L17.7403 10.2597L15.4741 4.02521C15.3624 3.7243 15.1613 3.46477 14.8978 3.2815C14.6343 3.09823 14.321 3 14 3C13.679 3 13.3657 3.09823 13.1022 3.2815C12.8387 3.46477 12.6376 3.7243 12.5259 4.02521L10.2597 10.2597L4.02521 12.5259C3.7243 12.6376 3.46477 12.8387 3.2815 13.1022C3.09823 13.3657 3 13.679 3 14C3 14.321 3.09823 14.6343 3.2815 14.8978C3.46477 15.1613 3.7243 15.3624 4.02521 15.4741L10.2597 17.7413L12.5259 23.9748C12.6376 24.2757 12.8387 24.5352 13.1022 24.7185C13.3657 24.9018 13.679 25 14 25C14.321 25 14.6343 24.9018 14.8978 24.7185C15.1613 24.5352 15.3624 24.2757 15.4741 23.9748L17.7413 17.7403L23.9748 15.4741C24.2757 15.3624 24.5352 15.1613 24.7185 14.8978C24.9018 14.6343 25 14.321 25 14C25 13.679 24.9018 13.3657 24.7185 13.1022C24.5352 12.8387 24.2757 12.6376 23.9748 12.5259ZM16.8578 16.3881C16.75 16.4273 16.652 16.4897 16.5709 16.5709C16.4897 16.652 16.4273 16.75 16.3881 16.8578L14 23.4245L11.6119 16.8578C11.5727 16.75 11.5103 16.652 11.4291 16.5709C11.348 16.4897 11.25 16.4273 11.1422 16.3881L4.57555 14L11.1422 11.6119C11.25 11.5727 11.348 11.5103 11.4291 11.4291C11.5103 11.348 11.5727 11.25 11.6119 11.1422L14 4.57555L16.3881 11.1422C16.4273 11.25 16.4897 11.348 16.5709 11.4291C16.652 11.5103 16.75 11.5727 16.8578 11.6119L23.4245 14L16.8578 16.3881Z" fill="currentColor"/>
 </svg>

studio/template/menu_top.html

@@ -5,7 +5,7 @@ var oBxDolStudioMenuTop = new BxDolStudioMenuTop({
 });
 -->
 </script>
-<div class="bx-std-menu-top-wrp bg-black backdrop-blur">
+<div class="bx-std-menu-top-wrp bg-white/90">
     <bx_repeat:menus>
         <div id="bx-std-menu-top bx-std-menu-top-__name__" class="bx-std-menu-top bx-std-menu-top-__name__ bx-def-font-contrasted bx-def-box-sizing">__content__</div>
     </bx_repeat:menus>

studio/template/menu_top_center.html

@@ -2,9 +2,8 @@
     <ul class="bx-menu-top-center bx-menu-object-__object__ bx-clearfix">
         <bx_repeat:menu_items>
             <li id="bx-menu-item-__name__" class="__class__ bx-def-box-sizing __class_add__">
-                <div class="bx-mi-bg bg-blue-800"></div>
                 <a href="__link__" onclick="__onclick__" title="__title_attr__"__attrs__>
-                    <div class="bx-mi-icon rounded-lg hover:ring-4 hover:ring-gray-800 hover:ring-offset-4 hover:ring-offset-black active:opacity-80 duration-300">
+                    <div class="bx-mi-icon rounded-lg hover:ring-4 hover:ring-gray-300 hover:ring-offset-2 hover:ring-offset-white active:opacity-80 duration-300">
                         <div class="block ring-white/5 ring-1 ring-inset rounded-lg">
                             <bx_include_auto:menu_icon.html />
                         </div>

studio/template/menu_top_toolbar.html

@@ -1,8 +1,8 @@
 <ul class="bx-menu-toolbar gap-x-4">
     <bx_if:show_search>
         <li class="bx-menu-tab-search<bx_if:show_active> bx-mt-active</bx_if:show_active> flex-auto">
-            <div class="bg-gray-800 hover:bg-gray-700 text-gray-300 hover:text-white hover:ring-4 hover:ring-gray-800 hover:ring-offset-4 hover:ring-offset-black active:opacity-80 duration-300">
-                <a class="text-gray-300 hover:text-white" href="javascript:void(0)" onclick="javascript:$(this).parents('li:first').toggleClass('bx-mt-active')">
+            <div class="bg-gray-200 hover:bg-gray-100 text-gray-600 border border-black/10 hover:text-gray-700 hover:ring-4 hover:ring-gray-200 hover:ring-offset-2 hover:ring-offset-white active:opacity-80 duration-300">
+                <a class="text-gray-600 hover:text-gray-700" href="javascript:void(0)" onclick="javascript:$(this).parents('li:first').toggleClass('bx-mt-active')">
                     <svg class="flex-none ml-1.5" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M5 12C5 12.9193 5.18106 13.8295 5.53284 14.6788C5.88463 15.5281 6.40024 16.2997 7.05025 16.9497C7.70026 17.5998 8.47194 18.1154 9.32122 18.4672C10.1705 18.8189 11.0807 19 12 19C12.9193 19 13.8295 18.8189 14.6788 18.4672C15.5281 18.1154 16.2997 17.5998 16.9497 16.9497C17.5998 16.2997 18.1154 15.5281 18.4672 14.6788C18.8189 13.8295 19 12.9193 19 12C19 11.0807 18.8189 10.1705 18.4672 9.32122C18.1154 8.47194 17.5998 7.70026 16.9497 7.05025C16.2997 6.40024 15.5281 5.88463 14.6788 5.53284C13.8295 5.18106 12.9193 5 12 5C11.0807 5 10.1705 5.18106 9.32122 5.53284C8.47194 5.88463 7.70026 6.40024 7.05025 7.05025C6.40024 7.70026 5.88463 8.47194 5.53284 9.32122C5.18106 10.1705 5 11.0807 5 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                         <path d="M23 23L17 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -15,8 +15,8 @@
         </li>
     </bx_if:show_search>
     <bx_repeat:menu_items>
-        <li class="bx-menu-tab-__name__  __class_add__ hover:ring-4 hover:ring-gray-800 hover:ring-offset-4 hover:ring-offset-black active:opacity-80 duration-300">
-            <a href="__link__" onclick="__onclick__" class="bg-gray-800 hover:bg-gray-700 text-gray-300 hover:text-white" title="__title__"__attrs__><bx_if:icon><i class="sys-icon __icon__ bx-def-round-corners bx-def-font-contrasted"></i></bx_if:icon><bx_if:image><img src="__icon_url__" /></bx_if:image><bx_if:image_inline>__image__</bx_if:image_inline></a>
+        <li class="bx-menu-tab-__name__  __class_add__ bg-gray-200 hover:bg-gray-100 border border-black/10 hover:ring-4 hover:ring-gray-200 hover:ring-offset-2 hover:ring-offset-white active:opacity-80 duration-300">
+            <a href="__link__" onclick="__onclick__" class="bg-gray-200 hover:bg-gray-100 text-gray-600" title="__title__"__attrs__><bx_if:icon><i class="sys-icon __icon__ bx-def-round-corners bx-def-font-contrasted"></i></bx_if:icon><bx_if:image><img src="__icon_url__" /></bx_if:image><bx_if:image_inline>__image__</bx_if:image_inline></a>
         </li>
     </bx_repeat:menu_items>
 </ul>

studio/template/page_breadcrumb.html

@@ -20,8 +20,8 @@
                 <img src="<bx_icon_url:bc-arrow.svg />" />
             </li>
             <li class="bx-menu-bc-item bx-menu-tab-search bx-mt-active flex-auto">
-                <div class="bg-gray-800 hover:bg-gray-700 text-gray-300 hover:text-white hover:ring-4 hover:ring-gray-800 hover:ring-offset-4 hover:ring-offset-black active:opacity-80 duration-300">
-                    <a class="text-gray-300 hover:text-white" href="javascript:void(0)" onclick="javascript:$(this).parents('li:first').toggleClass('bx-mt-active')">
+                <div class="bg-gray-200 hover:bg-gray-100 text-gray-600 border border-black/10 hover:text-gray-700 hover:ring-4 hover:ring-gray-200 hover:ring-offset-2 hover:ring-offset-white active:opacity-80 duration-300">
+                    <a class="text-gray-600 hover:text-gray-700" href="javascript:void(0)" onclick="javascript:$(this).parents('li:first').toggleClass('bx-mt-active')">
                         <svg class="flex-none ml-1.5" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M5 12C5 12.9193 5.18106 13.8295 5.53284 14.6788C5.88463 15.5281 6.40024 16.2997 7.05025 16.9497C7.70026 17.5998 8.47194 18.1154 9.32122 18.4672C10.1705 18.8189 11.0807 19 12 19C12.9193 19 13.8295 18.8189 14.6788 18.4672C15.5281 18.1154 16.2997 17.5998 16.9497 16.9497C17.5998 16.2997 18.1154 15.5281 18.4672 14.6788C18.8189 13.8295 19 12.9193 19 12C19 11.0807 18.8189 10.1705 18.4672 9.32122C18.1154 8.47194 17.5998 7.70026 16.9497 7.05025C16.2997 6.40024 15.5281 5.88463 14.6788 5.53284C13.8295 5.18106 12.9193 5 12 5C11.0807 5 10.1705 5.18106 9.32122 5.53284C8.47194 5.88463 7.70026 6.40024 7.05025 7.05025C6.40024 7.70026 5.88463 8.47194 5.53284 9.32122C5.18106 10.1705 5 11.0807 5 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                             <path d="M23 23L17 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

studio/template/page_content_2_col.html

@@ -1,8 +1,8 @@
 <div class="bx-std-page-columns-cnt bx-std-pc-stretch">
-    <div class="bx-std-page-column bx-std-page-menu bg-white/90 border-r">
-        <div class="bx-std-page-column-cnt bx-def-margin-sec-topbottom px-4 space-y-4">__page_menu_code__</div>
+    <div class="bx-std-page-column bx-std-page-menu bg-white/90">
+        <div class="bx-std-page-column-cnt px-4 space-y-4">__page_menu_code__</div>
     </div>
-    <div class="bx-std-page-column bx-std-page-content bx-std-pc-stretch">
+    <div class="bx-std-page-column bx-std-page-content bx-std-pc-stretch bg-gray-200">
         <div class="bx-std-page-column-cnt flex flex-col gap-6" id="bx-std-pc-content">__page_main_code__</div>
     </div>
 </div>

studio/template/widget.html

@@ -1,6 +1,6 @@
 <div id="bx-std-widget-__id__" class="bx-std-widget __widget_disabled_class__ __widget_featured_class__" style="__widget_styles__" data-name="__name__">
     <div class="bx-std-widget-cont">
-        <div class="bx-std-widget-icon bx-std-widget-icon-trans rounded-2xl overflow-hidden hover:ring hover:ring-blue-600 hover:ring-offset-2 hover:ring-offset-black hover:scale-105 active:scale-100 active:opacity-80 duration-300">
+        <div class="bx-std-widget-icon bx-std-widget-icon-trans rounded-2xl overflow-hidden hover:ring hover:ring-blue-600 hover:ring-offset-2 hover:ring-offset-gray-200 hover:scale-105 active:scale-100 active:opacity-80 duration-300">
             <a class="bx-std-widget-link block ring-white/5 ring-2 ring-inset rounded-2xl" href="__url__" <bx_if:show_click_icon>onClick="__content__"</bx_if:show_click_icon>>
                 <bx_if:icon>
                     <img src="<bx_icon_url:wi-empty.png />" />