Ticket #4674 - Studio: Layout changes.

studio/template/bp_blocks_list.html

@@ -1,4 +1,4 @@
-<div id="__html_block_list_id__" class="adm-bp-blocks">
+<div id="__html_block_list_id__" class="adm-bp-blocks flex flex-col gap-2">
     <bx_include_auto:bp_blocks.html />
     <script language="javascript">
         $(document).ready(function () {

studio/template/css/general.css

@@ -125,7 +125,7 @@ div.bx-std-pcap-mp-right div.bx-std-pcap-action {
  */
 div.bx-std-pmen-item {
     position: relative;
-    height: 3.0rem;
+    height: 3.5rem;
     margin-top: 0.125rem;
 
     border-radius: 0.75rem;
@@ -160,8 +160,8 @@ div.bx-std-pmen-item .bx-std-pmen-ic-icon {
     display: none;
     flex: 0 0 auto;
 
-    width: 2.0rem;
-    height: 2.0rem;
+    width: 2.5rem;
+    height: 2.5rem;
     box-sizing: border-box;
 
     margin-right: 1rem;

studio/template/css/menu_top.css

@@ -143,9 +143,14 @@ div.bx-std-menu-top .bx-menu-top-center li.bx-menu-tab-active .bx-mi-bg {
 }
 div.bx-std-menu-top .bx-menu-breadcrumb li.bx-menu-bc-item .bx-mi-icon,
 div.bx-std-menu-top .bx-menu-top-center li .bx-mi-icon {
-    border-radius: 0.5rem;
     overflow: hidden;
 }
+div.bx-std-menu-top .bx-menu-breadcrumb li.bx-menu-bc-item .bx-mi-icon {
+    border-radius: 1.5rem;
+}
+div.bx-std-menu-top .bx-menu-top-center li .bx-mi-icon {
+    border-radius: 0.5rem;
+}
 div.bx-std-menu-top .bx-menu-breadcrumb li.bx-menu-bc-item .bx-mi-title {    
     text-align: center;
     letter-spacing: -1.2px; 

studio/template/menu_side.html

@@ -9,9 +9,9 @@
                     <bx_if:image><img src="__icon_url__" /></bx_if:image>
                     <bx_if:image_inline>__image__</bx_if:image_inline>
                 </div>
-                <div class="bx-std-pmen-ic-title">__title__</div>
+                <div class="bx-std-pmen-ic-title truncate">__title__</div>
             </div>
         </a>                
     </div>                
 </bx_repeat:menu_items>
-<div class="bx-clear"></div>
+<div class="bx-clear"></div>

studio/template/menu_top.html

@@ -5,7 +5,7 @@ var oBxDolStudioMenuTop = new BxDolStudioMenuTop({
 });
 -->
 </script>
-<div class="bx-std-menu-top-wrp bg-black/95 backdrop-blur">
+<div class="bx-std-menu-top-wrp bg-gray-900 backdrop-blur">
     <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_toolbar.html

@@ -1,7 +1,7 @@
 <ul class="bx-menu-toolbar gap-x-4">
     <bx_if:show_search>
         <li class="bx-menu-tab-search 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">
+            <div class="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')">
                     <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"/>
@@ -16,7 +16,7 @@
     </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>
+            <a href="__link__" onclick="__onclick__" class="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/page_breadcrumb.html

@@ -1,12 +1,12 @@
 <div class="bx-std-pcap-bx-std-pcap">
     <ul class="bx-menu-hor bx-menu-breadcrumb">
         <bx_repeat:menu_items>
-            <li class="bx-menu-bc-div">
+            <li class="bx-menu-bc-div px-2">
                 <img src="<bx_icon_url:bc-arrow.svg />" />
             </li>
             <li class="bx-menu-bc-item bx-menu-bc-__name__  __class_add__">
                 <a href="__link__" onclick="__onclick__" title="__title_attr__"__attrs__>
-                    <div class="bx-mi-icon flex-0">
+                    <div class="bx-mi-icon flex-0 hover:ring-4 hover:ring-gray-800 hover:ring-offset-4 hover:ring-offset-black active:opacity-80 duration-300">
                         <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>