Ticket #4674 - Studio: Layout changes.

plugins_public/tailwind/css/tailwind.css

@@ -587,7 +587,7 @@
         @apply gap-y-4 lg:gap-y-6;
     }
     .bx-def-color-bg-page{
-	    @apply bg-gray-100 dark:bg-gray-900;
+        @apply bg-gray-100 dark:bg-gray-900;
     }
 
     /* Common elements: Blocks, Boxes, etc. */
@@ -1251,7 +1251,7 @@
     }
 
     .bx-std .bx-menu-top-center .bx-menu-tab-active .bx-mi-icon {
-        @apply ring ring-blue-600 ring-offset-2 ring-offset-black;
+        @apply ring-4 ring-blue-800 ring-offset-4 ring-offset-black;
     }
     .bx-std .bx-menu-top-center .bx-menu-item-static,
     .bx-std .bx-menu-top-center .bx-menu-item-dynamic {

studio/template/bp_blocks.html

@@ -1,12 +1,7 @@
 <bx_repeat:blocks>
     <div id="__html_id__" class="adm-bp-block<bx_if:is_inactive> adm-bpb-inactive</bx_if:is_inactive> bx-def-border">
         <div class="adm-bpb-content">
-            <bx_if:show_drag_handle>
-                <div class="adm-bpb-drag-handle bx-def-margin-thd-right">
-                    <i class="sys-icon align-justify"></i>
-                </div>
-            </bx_if:show_drag_handle>
-            <div class="adm-bpb-icon bx-def-margin-thd-right">
+            <div class="adm-bpb-icon<bx_if:show_drag_handle> adm-bpb-drag-handle</bx_if:show_drag_handle>">
             	<bx_if:icon>
                     <div class="adm-bpb-icon-bg"></div>
                     <i class="sys-icon __icon__"></i>
@@ -14,9 +9,9 @@
                 <bx_if:image><img src="__icon_url__" /></bx_if:image>
             </div>
             <div class="adm-bpb-info">
-                <div class="adm-bpb-title">
+                <div class="adm-bpb-title text-gray-900">
                     <bx_if:show_link>
-                        <a href="javascript:void(0)" onclick="javascript:__onclick__">__title__</a>
+                        <a class="text-gray-900 hover:text-gray-700" href="javascript:void(0)" onclick="javascript:__onclick__">__title__</a>
                     </bx_if:show_link>
                     <bx_if:show_text>__title__</bx_if:show_text>
                     <bx_if:show_api>

studio/template/bp_cell.html

@@ -1,5 +1,5 @@
-<div class="adm-bp-cell bx-def-margin-topbottom bx-def-border">
-    <div id="adm-bpc-__id__" class="adm-bp-cell-cnt">
+<div class="adm-bp-cell border border-dashed border-gray-300 bg-gray-100 rounded-lg">
+    <div id="adm-bpc-__id__" class="adm-bp-cell-cnt flex flex-col gap-2">
         <bx_include_auto:bp_blocks.html />
     </div>
 </div>

studio/template/css/builder_page.css

@@ -1,21 +1,22 @@
 /*--- Panel Top style ---*/
 div.bx-std-pt-pages {
-	position: relative;
+    position: relative;
     float: left;
 }
 div.bx-std-pt-pages div.bx-form-element-wrapper {
-	width: 165px;
+    width: 165px;
 }
 div.bx-std-pt-buttons {
-	float: right;
+    float: right;
 }
 
 /*--- Main section style ---*/
-div.adm-bp-cell {
-    background-color: rgba(255,255,255,0.8);
+.bx-std .bx-layout-wrapper {
+    padding-top: 0;
 }
+div.adm-bp-cell {}
 div.adm-bp-cell-cnt {
-    padding: 3px 6px 50px 6px;
+    padding: 1rem;
 }
 div.adm-bp-blocks {
     position: relative;
@@ -23,27 +24,20 @@ div.adm-bp-blocks {
 div.adm-bp-block {
     position: relative;
     overflow: hidden;
-    margin: 3px 0px;
 
-    border-style: solid;
-    border-width: 1px;
-    border-radius: 5px 5px 5px 5px;
+    border: 1px solid rgb(229 231 235);
+    border-radius: 1rem;
 
-    box-shadow: 0 0 1px rgba(51, 51, 51, 0.3);
+    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
 
-    background-color: #ececec;
-    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ececec));
-    background-image: -webkit-linear-gradient(top, #fff, #ececec); 
-    background-image: -moz-linear-gradient(top, #fff, #ececec); 
-    background-image: -ms-linear-gradient(top, #fff, #ececec); 
-    background-image: -o-linear-gradient(top, #fff, #ececec); 
-    background-image: linear-gradient(top, #fff, #ececec);	
-}
-div.adm-bpb-inactive {
+    background-color: #ffffff;
+}
+div.adm-bp-block.adm-bpb-inactive,
+div.bx-lr-dump div.adm-bp-block {
     opacity: 0.5;
 }
 div.adm-bp-block-empty {
-    height: 42px;
+    height: 4rem;
     border-style: dashed;
     box-shadow: none;
 }
@@ -52,25 +46,23 @@ div.adm-bpb-content {
     position: relative;
     display: -webkit-flex; 
     display: flex;
-
     -webkit-justify-content: flex-start;
     justify-content: flex-start;
-
     -webkit-align-items: center;
     align-items: center;
-
     -webkit-flex-flow: row nowrap;
     flex-flow: row nowrap;
-    
-    padding: 0.5rem;
+
+    padding: 0.625rem;
 }
 
 div.adm-bpb-icon,
 div.adm-bpb-icon-bg,
 div.adm-bpb-icon img,
 div.adm-bpb-icon i.sys-icon {
-    width: 2rem;
-    height: 2rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-right: 0.75rem;
 }
 div.adm-bpb-icon {
     position: relative;
@@ -87,11 +79,11 @@ div.adm-bpb-icon i.sys-icon {
     top: 0px;
     left: 0px;
 
+    text-align: center;
+    text-shadow: none;
+    line-height: 2.5rem;
+    font-size: 20px;
     color:white;
-    font-size:20px;
-    text-align:center;
-    text-shadow:none;
-    line-height: 2rem;
 }
 div.adm-bpb-info {
     -webkit-flex-grow: 2;
@@ -109,9 +101,12 @@ div.adm-bpb-title {
 
     white-space: nowrap;
     text-overflow: ellipsis;
-    overflow: hidden;
+    line-height: 1.25rem;    
+
+    letter-spacing: -0.4px;
+    font-weight: 600;
 
-    font-weight: bold;
+    overflow: hidden;
 }
 div.adm-bpb-title .bx-std-api {
     margin-left: 0.25rem;

studio/template/css/menu_top.css

@@ -102,6 +102,10 @@ div.bx-std-menu-top-right {
 
 /*--- Widgets (Center) ---*/
 div.bx-std-menu-top .bx-menu-top-center {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+
     padding: 0;
     margin: 0;
 
@@ -117,8 +121,8 @@ div.bx-std-menu-top .bx-menu-top-center li {
     -webkit-align-items: center;
     align-items: center;
 
-    width: 4.5rem;
-    height: 4.5rem;
+    width: 3.5rem;
+    height: 3.5rem;
 }
 
 /*
@@ -129,19 +133,34 @@ div.bx-std-menu-top .bx-menu-top-center li.bx-menu-item-static + li.bx-menu-item
 }
 */
 
+div.bx-std-menu-top .bx-menu-top-center li a {
+    display: block;
+    z-index: 2;
+    box-sizing: content-box;
+
+    width: 2.5rem;
+    height: 2.5rem;
+}
 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;
 
-div.bx-std-menu-top .bx-menu-top-center li a {
-    display: block;
-    box-sizing: content-box;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
 
-    width: 3rem;
-    height: 3rem;
+    filter: blur(6px);
+}
+div.bx-std-menu-top .bx-menu-top-center li.bx-menu-tab-active .bx-mi-bg {
+    display: block;
 }
 div.bx-std-menu-top .bx-menu-top-center li .bx-mi-icon {
-    border-radius: 0.625rem;
+    border-radius: 0.5rem;
     overflow: hidden;
 }
 div.bx-std-menu-top .bx-menu-top-center li img,
@@ -149,8 +168,8 @@ div.bx-std-menu-top .bx-menu-top-center li .sys-icon {
     display: block;
     box-sizing: content-box;
 
-    width: 3rem;
-    height: 3rem;
+    width: 2.5rem;
+    height: 2.5rem;
 
     margin: 0;
 }
@@ -170,6 +189,40 @@ div.bx-std-menu-top .bx-menu-top-center li .bx-mi-title {
     text-overflow: ellipsis;
     overflow: hidden;
 }
+div.bx-std-menu-top .bx-menu-top-center li.bx-menu-tab-divider {
+    width: 0.25rem;
+    height: 1.75rem;
+}
+div.bx-std-menu-top .bx-menu-top-center li.bx-menu-tab-search {
+    position: relative;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+
+    width: auto;
+    min-width: 3.5rem;
+    max-width: 24rem;
+}
+div.bx-std-menu-top .bx-menu-top-center li.bx-menu-tab-search img {
+    height: 2rem;
+}
+
+div.bx-std-menu-top .bx-menu-top-center li.bx-menu-tab-search .bx-form-input-text {
+    height: 3rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+
+    border-width: 0;
+    background-color: transparent;
+
+    font-size: 1.5rem;
+    font-style: normal;
+    font-weight: 500;
+    letter-spacing: -1.2px; 
+}
 
 
 /*--- Toolbar (Right) ---*/
@@ -197,31 +250,6 @@ div.bx-std-menu-top .bx-menu-toolbar li {
     line-height: 3.0rem;
     overflow: hidden;
 }
-div.bx-std-menu-top .bx-menu-toolbar li.bx-menu-tab-search {
-    position: relative;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-align-items: center;
-    align-items: center;
-    -webkit-flex-wrap: nowrap;
-    flex-wrap: nowrap;
-
-    max-width: 24rem;
-}
-div.bx-std-menu-top .bx-menu-toolbar li.bx-menu-tab-search img {
-    height: 2rem;
-}
-
-div.bx-std-menu-top .bx-menu-toolbar li.bx-menu-tab-search .bx-form-input-text {
-    height: 3rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-
-    border-width: 0;
-    background-color: transparent;
-
-    color: rgba(255, 255, 255, 1);
-}
 div.bx-std-menu-top .bx-menu-toolbar li a {
     position: relative;
     display: -webkit-flex;
@@ -233,9 +261,8 @@ div.bx-std-menu-top .bx-menu-toolbar li a {
 
     width: 100%;
     height: 100%;
-    
+
     border-radius: 1.5rem;
-    backgroud-color: rgba(55, 65, 81, 1);
 }
 
 div.bx-std-menu-top .bx-menu-toolbar li a:hover {

studio/template/images/icons/wi-launcher.svg

@@ -1,13 +1,118 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="48" height="48" fill="url(#paint0_linear_214_1875)"/>
-<path d="M9 33C9 30.6894 9 29.5339 9.52009 28.6852C9.81111 28.2103 10.2104 27.811 10.6853 27.52C11.534 27 12.6893 27 15 27C17.3107 27 18.466 27 19.3147 27.52C19.7896 27.811 20.1889 28.2103 20.4799 28.6852C21 29.5339 21 30.6894 21 33C21 35.3106 21 36.466 20.4799 37.3147C20.1889 37.7896 19.7896 38.1889 19.3147 38.4799C18.466 39 17.3107 39 15 39C12.6893 39 11.534 39 10.6853 38.4799C10.2104 38.1889 9.81111 37.7896 9.52009 37.3147C9 36.466 9 35.3106 9 33Z" stroke="white" stroke-width="2.25"/>
-<path d="M27 33C27 30.6894 27 29.5339 27.52 28.6852C27.811 28.2103 28.2103 27.811 28.6852 27.52C29.5339 27 30.6894 27 33 27C35.3106 27 36.466 27 37.3147 27.52C37.7896 27.811 38.1889 28.2103 38.4799 28.6852C39 29.5339 39 30.6894 39 33C39 35.3106 39 36.466 38.4799 37.3147C38.1889 37.7896 37.7896 38.1889 37.3147 38.4799C36.466 39 35.3106 39 33 39C30.6894 39 29.5339 39 28.6852 38.4799C28.2103 38.1889 27.811 37.7896 27.52 37.3147C27 36.466 27 35.3106 27 33Z" stroke="white" stroke-width="2.25"/>
-<path d="M9 15C9 12.6893 9 11.534 9.52009 10.6853C9.81111 10.2104 10.2104 9.81111 10.6853 9.52009C11.534 9 12.6893 9 15 9C17.3107 9 18.466 9 19.3147 9.52009C19.7896 9.81111 20.1889 10.2104 20.4799 10.6853C21 11.534 21 12.6893 21 15C21 17.3107 21 18.466 20.4799 19.3147C20.1889 19.7896 19.7896 20.1889 19.3147 20.4799C18.466 21 17.3107 21 15 21C12.6893 21 11.534 21 10.6853 20.4799C10.2104 20.1889 9.81111 19.7896 9.52009 19.3147C9 18.466 9 17.3107 9 15Z" stroke="white" stroke-width="2.25"/>
-<path d="M27 15C27 12.6893 27 11.534 27.52 10.6853C27.811 10.2104 28.2103 9.81111 28.6852 9.52009C29.5339 9 30.6894 9 33 9C35.3106 9 36.466 9 37.3147 9.52009C37.7896 9.81111 38.1889 10.2104 38.4799 10.6853C39 11.534 39 12.6893 39 15C39 17.3107 39 18.466 38.4799 19.3147C38.1889 19.7896 37.7896 20.1889 37.3147 20.4799C36.466 21 35.3106 21 33 21C30.6894 21 29.5339 21 28.6852 20.4799C28.2103 20.1889 27.811 19.7896 27.52 19.3147C27 18.466 27 17.3107 27 15Z" stroke="white" stroke-width="2.25"/>
+<svg width="81" height="80" viewBox="0 0 81 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="81" height="80" fill="#9CA3AF"/>
+<rect width="80" height="80" transform="translate(0.5)" fill="url(#paint0_linear_57_1234)"/>
+<g filter="url(#filter0_d_57_1234)">
+<mask id="path-1-inside-1_57_1234" fill="white">
+<path d="M34.5 54C34.5 58.4183 30.9184 62 26.5 62C22.0816 62 18.5 58.4183 18.5 54C18.5 49.5817 22.0816 46 26.5 46C30.9184 46 34.5 49.5817 34.5 54Z"/>
+</mask>
+<path d="M34.5 54C34.5 58.4183 30.9184 62 26.5 62C22.0816 62 18.5 58.4183 18.5 54C18.5 49.5817 22.0816 46 26.5 46C30.9184 46 34.5 49.5817 34.5 54Z" fill="url(#paint1_linear_57_1234)"/>
+<path d="M34.5 54C34.5 58.4183 30.9184 62 26.5 62C22.0816 62 18.5 58.4183 18.5 54C18.5 49.5817 22.0816 46 26.5 46C30.9184 46 34.5 49.5817 34.5 54Z" stroke="url(#paint2_linear_57_1234)" stroke-width="2" mask="url(#path-1-inside-1_57_1234)"/>
+</g>
+<g filter="url(#filter1_d_57_1234)">
+<mask id="path-2-inside-2_57_1234" fill="white">
+<path d="M62.5 26C62.5 30.4183 58.9184 34 54.5 34C50.0816 34 46.5 30.4183 46.5 26C46.5 21.5817 50.0816 18 54.5 18C58.9184 18 62.5 21.5817 62.5 26Z"/>
+</mask>
+<path d="M62.5 26C62.5 30.4183 58.9184 34 54.5 34C50.0816 34 46.5 30.4183 46.5 26C46.5 21.5817 50.0816 18 54.5 18C58.9184 18 62.5 21.5817 62.5 26Z" fill="url(#paint3_linear_57_1234)"/>
+<path d="M62.5 26C62.5 30.4183 58.9184 34 54.5 34C50.0816 34 46.5 30.4183 46.5 26C46.5 21.5817 50.0816 18 54.5 18C58.9184 18 62.5 21.5817 62.5 26Z" stroke="url(#paint4_linear_57_1234)" stroke-width="2" mask="url(#path-2-inside-2_57_1234)"/>
+</g>
+<g filter="url(#filter2_d_57_1234)">
+<mask id="path-3-inside-3_57_1234" fill="white">
+<path d="M29.6282 29.0527C32.4172 26.2828 36.2588 24.5714 40.5001 24.5714C40.9432 24.5714 41.382 24.5901 41.8157 24.6267C42.2339 24.662 42.6154 24.3759 42.7069 23.9663C43.5832 20.0437 46.4509 16.8725 50.1935 15.5692C50.543 15.4475 50.5788 14.9412 50.2336 14.8077C47.214 13.6402 43.9318 13 40.5001 13C36.5323 13 32.7643 13.8559 29.3709 15.3931C29.0996 15.516 28.9286 15.7881 28.9286 16.0859V28.7748C28.9286 29.1301 29.3761 29.3031 29.6282 29.0527Z"/>
+<path d="M56.5291 61.7292C56.2784 61.9143 55.9286 61.733 55.9286 61.421V40C55.9286 39.5568 55.91 39.118 55.8734 38.6843C55.8379 38.2661 56.1241 37.8847 56.5337 37.7932C60.4565 36.917 63.6274 34.0492 64.9308 30.3065C65.0523 29.957 65.5587 29.9213 65.6922 30.2664C66.8597 33.2861 67.5 36.5683 67.5 40C67.5 48.91 63.1842 56.8117 56.5291 61.7292Z"/>
+<path d="M16.0692 49.6934C15.9476 50.0428 15.4412 50.0787 15.3077 49.7335C14.1402 46.7139 13.5 43.4317 13.5 40C13.5 31.0902 17.8158 23.1883 24.4709 18.2708C24.7216 18.0855 25.0715 18.2671 25.0715 18.5789V40C25.0715 40.4432 25.0901 40.882 25.1268 41.3157C25.1621 41.7339 24.8759 42.1154 24.4663 42.2069C20.5437 43.0831 17.3725 45.9508 16.0692 49.6934Z"/>
+<path d="M51.6289 64.607C51.9004 64.484 52.0713 64.2121 52.0713 63.9143V51.2251C52.0713 50.8698 51.6239 50.697 51.3716 50.9474C48.5829 53.7172 44.7412 55.4286 40.4998 55.4286C40.0567 55.4286 39.6179 55.4101 39.1842 55.3734C38.766 55.3379 38.3845 55.6241 38.2931 56.0338C37.4168 59.9565 34.5491 63.1274 30.8064 64.4308C30.4569 64.5527 30.4211 65.0587 30.7663 65.1922C33.786 66.3597 37.0681 67 40.4998 67C44.4677 67 48.2357 66.1441 51.6289 64.607Z"/>
+</mask>
+<path d="M29.6282 29.0527C32.4172 26.2828 36.2588 24.5714 40.5001 24.5714C40.9432 24.5714 41.382 24.5901 41.8157 24.6267C42.2339 24.662 42.6154 24.3759 42.7069 23.9663C43.5832 20.0437 46.4509 16.8725 50.1935 15.5692C50.543 15.4475 50.5788 14.9412 50.2336 14.8077C47.214 13.6402 43.9318 13 40.5001 13C36.5323 13 32.7643 13.8559 29.3709 15.3931C29.0996 15.516 28.9286 15.7881 28.9286 16.0859V28.7748C28.9286 29.1301 29.3761 29.3031 29.6282 29.0527Z" fill="url(#paint5_linear_57_1234)"/>
+<path d="M56.5291 61.7292C56.2784 61.9143 55.9286 61.733 55.9286 61.421V40C55.9286 39.5568 55.91 39.118 55.8734 38.6843C55.8379 38.2661 56.1241 37.8847 56.5337 37.7932C60.4565 36.917 63.6274 34.0492 64.9308 30.3065C65.0523 29.957 65.5587 29.9213 65.6922 30.2664C66.8597 33.2861 67.5 36.5683 67.5 40C67.5 48.91 63.1842 56.8117 56.5291 61.7292Z" fill="url(#paint6_linear_57_1234)"/>
+<path d="M16.0692 49.6934C15.9476 50.0428 15.4412 50.0787 15.3077 49.7335C14.1402 46.7139 13.5 43.4317 13.5 40C13.5 31.0902 17.8158 23.1883 24.4709 18.2708C24.7216 18.0855 25.0715 18.2671 25.0715 18.5789V40C25.0715 40.4432 25.0901 40.882 25.1268 41.3157C25.1621 41.7339 24.8759 42.1154 24.4663 42.2069C20.5437 43.0831 17.3725 45.9508 16.0692 49.6934Z" fill="url(#paint7_linear_57_1234)"/>
+<path d="M51.6289 64.607C51.9004 64.484 52.0713 64.2121 52.0713 63.9143V51.2251C52.0713 50.8698 51.6239 50.697 51.3716 50.9474C48.5829 53.7172 44.7412 55.4286 40.4998 55.4286C40.0567 55.4286 39.6179 55.4101 39.1842 55.3734C38.766 55.3379 38.3845 55.6241 38.2931 56.0338C37.4168 59.9565 34.5491 63.1274 30.8064 64.4308C30.4569 64.5527 30.4211 65.0587 30.7663 65.1922C33.786 66.3597 37.0681 67 40.4998 67C44.4677 67 48.2357 66.1441 51.6289 64.607Z" fill="url(#paint8_linear_57_1234)"/>
+<path d="M29.6282 29.0527C32.4172 26.2828 36.2588 24.5714 40.5001 24.5714C40.9432 24.5714 41.382 24.5901 41.8157 24.6267C42.2339 24.662 42.6154 24.3759 42.7069 23.9663C43.5832 20.0437 46.4509 16.8725 50.1935 15.5692C50.543 15.4475 50.5788 14.9412 50.2336 14.8077C47.214 13.6402 43.9318 13 40.5001 13C36.5323 13 32.7643 13.8559 29.3709 15.3931C29.0996 15.516 28.9286 15.7881 28.9286 16.0859V28.7748C28.9286 29.1301 29.3761 29.3031 29.6282 29.0527Z" stroke="url(#paint9_linear_57_1234)" stroke-width="2" mask="url(#path-3-inside-3_57_1234)"/>
+<path d="M56.5291 61.7292C56.2784 61.9143 55.9286 61.733 55.9286 61.421V40C55.9286 39.5568 55.91 39.118 55.8734 38.6843C55.8379 38.2661 56.1241 37.8847 56.5337 37.7932C60.4565 36.917 63.6274 34.0492 64.9308 30.3065C65.0523 29.957 65.5587 29.9213 65.6922 30.2664C66.8597 33.2861 67.5 36.5683 67.5 40C67.5 48.91 63.1842 56.8117 56.5291 61.7292Z" stroke="url(#paint10_linear_57_1234)" stroke-width="2" mask="url(#path-3-inside-3_57_1234)"/>
+<path d="M16.0692 49.6934C15.9476 50.0428 15.4412 50.0787 15.3077 49.7335C14.1402 46.7139 13.5 43.4317 13.5 40C13.5 31.0902 17.8158 23.1883 24.4709 18.2708C24.7216 18.0855 25.0715 18.2671 25.0715 18.5789V40C25.0715 40.4432 25.0901 40.882 25.1268 41.3157C25.1621 41.7339 24.8759 42.1154 24.4663 42.2069C20.5437 43.0831 17.3725 45.9508 16.0692 49.6934Z" stroke="url(#paint11_linear_57_1234)" stroke-width="2" mask="url(#path-3-inside-3_57_1234)"/>
+<path d="M51.6289 64.607C51.9004 64.484 52.0713 64.2121 52.0713 63.9143V51.2251C52.0713 50.8698 51.6239 50.697 51.3716 50.9474C48.5829 53.7172 44.7412 55.4286 40.4998 55.4286C40.0567 55.4286 39.6179 55.4101 39.1842 55.3734C38.766 55.3379 38.3845 55.6241 38.2931 56.0338C37.4168 59.9565 34.5491 63.1274 30.8064 64.4308C30.4569 64.5527 30.4211 65.0587 30.7663 65.1922C33.786 66.3597 37.0681 67 40.4998 67C44.4677 67 48.2357 66.1441 51.6289 64.607Z" stroke="url(#paint12_linear_57_1234)" stroke-width="2" mask="url(#path-3-inside-3_57_1234)"/>
+</g>
 <defs>
-<linearGradient id="paint0_linear_214_1875" x1="24" y1="0" x2="24" y2="48" gradientUnits="userSpaceOnUse">
-<stop stop-color="#71717A"/>
-<stop offset="1" stop-color="#52525B"/>
+<filter id="filter0_d_57_1234" x="16.5" y="45" width="20" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_57_1234"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_57_1234" result="shape"/>
+</filter>
+<filter id="filter1_d_57_1234" x="44.5" y="17" width="20" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_57_1234"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_57_1234" result="shape"/>
+</filter>
+<filter id="filter2_d_57_1234" x="11.5" y="12" width="58" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_57_1234"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_57_1234" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_57_1234" x1="40" y1="0" x2="40" y2="80" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4B5563"/>
+<stop offset="1" stop-color="#1F2937"/>
+</linearGradient>
+<linearGradient id="paint1_linear_57_1234" x1="26.5" y1="46" x2="26.5" y2="62" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FDE68A"/>
+<stop offset="1" stop-color="#D97706"/>
+</linearGradient>
+<linearGradient id="paint2_linear_57_1234" x1="26.5" y1="46" x2="26.5" y2="62" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.8"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_57_1234" x1="54.5" y1="18" x2="54.5" y2="34" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FDE68A"/>
+<stop offset="1" stop-color="#D97706"/>
+</linearGradient>
+<linearGradient id="paint4_linear_57_1234" x1="54.5" y1="18" x2="54.5" y2="34" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.8"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_57_1234" x1="40.5" y1="13" x2="40.5" y2="67" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F3F4F6"/>
+<stop offset="1" stop-color="#9CA3AF"/>
+</linearGradient>
+<linearGradient id="paint6_linear_57_1234" x1="40.5" y1="13" x2="40.5" y2="67" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F3F4F6"/>
+<stop offset="1" stop-color="#9CA3AF"/>
+</linearGradient>
+<linearGradient id="paint7_linear_57_1234" x1="40.5" y1="13" x2="40.5" y2="67" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F3F4F6"/>
+<stop offset="1" stop-color="#9CA3AF"/>
+</linearGradient>
+<linearGradient id="paint8_linear_57_1234" x1="40.5" y1="13" x2="40.5" y2="67" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F3F4F6"/>
+<stop offset="1" stop-color="#9CA3AF"/>
+</linearGradient>
+<linearGradient id="paint9_linear_57_1234" x1="40.5" y1="13" x2="40.5" y2="67" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.8"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_57_1234" x1="40.5" y1="13" x2="40.5" y2="67" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.8"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint11_linear_57_1234" x1="40.5" y1="13" x2="40.5" y2="67" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.8"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint12_linear_57_1234" x1="40.5" y1="13" x2="40.5" y2="67" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.8"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
 </linearGradient>
 </defs>
 </svg>

studio/template/menu_top_center.html

@@ -1,9 +1,24 @@
 <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__">
-        <a href="__link__" onclick="__onclick__" title="__title_attr__"__attrs__>
-            <div class="bx-mi-icon 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">
-                <bx_include_auto:menu_icon.html />
+    <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 hover:ring-4 hover:ring-gray-800 hover:ring-offset-4 hover:ring-offset-black active:opacity-80 duration-300">
+                    <bx_include_auto:menu_icon.html />
+                </div>
+            </a>
+        </li>
+    </bx_repeat:menu_items>
+    <bx_if:show_search>
+        <li class="bx-menu-tab-divider rounded bg-gray-800"></li>
+        <li class="bx-menu-tab-search flex-auto text-gray-100">
+            <svg class="ml-2 hidden" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M4 13.3333C4 14.559 4.24141 15.7727 4.71046 16.905C5.1795 18.0374 5.86699 19.0663 6.73367 19.933C7.60035 20.7997 8.62925 21.4872 9.76162 21.9562C10.894 22.4253 12.1077 22.6667 13.3333 22.6667C14.559 22.6667 15.7727 22.4253 16.905 21.9562C18.0374 21.4872 19.0663 20.7997 19.933 19.933C20.7997 19.0663 21.4872 18.0374 21.9562 16.905C22.4253 15.7727 22.6667 14.559 22.6667 13.3333C22.6667 12.1077 22.4253 10.894 21.9562 9.76162C21.4872 8.62925 20.7997 7.60035 19.933 6.73367C19.0663 5.86699 18.0374 5.1795 16.905 4.71046C15.7727 4.24141 14.559 4 13.3333 4C12.1077 4 10.894 4.24141 9.76162 4.71046C8.62925 5.1795 7.60035 5.86699 6.73367 6.73367C5.86699 7.60035 5.1795 8.62925 4.71046 9.76162C4.24141 10.894 4 12.1077 4 13.3333Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M28 28L20 20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <div class="bx-form-input-wrapper bx-form-input-wrapper-text">
+                <input type="text" name="search" value="" placeholder="<bx_text_attribute:_adm_tmi_cpt_search />" class="bx-def-font-inputs bx-form-input-text" onkeydown="return oBxDolStudioMenuTop.searchWidget(event)" />
             </div>
-        </a>
-    </li></bx_repeat:menu_items>
+        </li>
+    </bx_if:show_search>
 </ul>

studio/template/menu_top_toolbar.html

@@ -1,18 +1,7 @@
 <ul class="bx-menu-toolbar gap-x-4">
-    <bx_if:show_search>
-        <li class="bx-menu-tab-search flex-auto text-gray-400">
-            <svg class="ml-2" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M4 13.3333C4 14.559 4.24141 15.7727 4.71046 16.905C5.1795 18.0374 5.86699 19.0663 6.73367 19.933C7.60035 20.7997 8.62925 21.4872 9.76162 21.9562C10.894 22.4253 12.1077 22.6667 13.3333 22.6667C14.559 22.6667 15.7727 22.4253 16.905 21.9562C18.0374 21.4872 19.0663 20.7997 19.933 19.933C20.7997 19.0663 21.4872 18.0374 21.9562 16.905C22.4253 15.7727 22.6667 14.559 22.6667 13.3333C22.6667 12.1077 22.4253 10.894 21.9562 9.76162C21.4872 8.62925 20.7997 7.60035 19.933 6.73367C19.0663 5.86699 18.0374 5.1795 16.905 4.71046C15.7727 4.24141 14.559 4 13.3333 4C12.1077 4 10.894 4.24141 9.76162 4.71046C8.62925 5.1795 7.60035 5.86699 6.73367 6.73367C5.86699 7.60035 5.1795 8.62925 4.71046 9.76162C4.24141 10.894 4 12.1077 4 13.3333Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M28 28L20 20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-            <div class="bx-form-input-wrapper bx-form-input-wrapper-text">
-                <input type="text" name="search" value="" placeholder="<bx_text_attribute:_adm_tmi_cpt_search />" class="bx-def-font-inputs bx-form-input-text" onkeydown="return oBxDolStudioMenuTop.searchWidget(event)" />
-            </div>
-        </li>
-    </bx_if:show_search>
     <bx_repeat:menu_items>
-        <li class="bx-menu-tab-__name__  __class_add__ hover:scale-105 active:scale-100 active:opacity-80 duration-300">
-            <a href="__link__" onclick="__onclick__" class="text-gray-400 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__ 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>
     </bx_repeat:menu_items>
 </ul>

studio/template/scripts/BxBaseStudioMenuTop.php

@@ -51,7 +51,7 @@ class BxBaseStudioMenuTop extends BxDolStudioMenuTop
                 ));
 
                 $sContent = $oMenu->getCode();
-                if($sPosition == BX_DOL_STUDIO_MT_RIGHT) {
+                if($sPosition == BX_DOL_STUDIO_MT_CENTER) {
                     $sContent = $oTemplate->parseHtmlByContent($sContent, [
                         'bx_if:show_search' => [
                             'condition' => $this->sPageName == 'home' && getParam('sys_std_show_header_right_search') == 'on',

template/_row_1_column_dump.html

@@ -1,9 +1,11 @@
 <bx_if:show_layout_row_dump>
     <div class="bx-layout-row bx-lr-dump bx-clearfix">
         <div class="bx-layout-col bx-layout-1-column-column1 bx-layout-column-fullwidth">
-            <div class="bx-layout-cell bx-def-margin-topbottom" id="bx-layout-cell-0">
-                <div class="bx-layout-cell-title bx-def-margin-thd-bottom"><bx_text:_adm_bp_txt_inactive_blocks /></div>
-                __cell_0__
+            <div class="bx-layout-cell" id="bx-layout-cell-0">
+                <div class="bx-layout-cell-cnt">
+                    <div class="bx-layout-cell-title bx-def-margin-thd-bottom"><bx_text:_adm_bp_txt_inactive_blocks /></div>
+                    __cell_0__
+                </div>
             </div>
         </div>
     </div>