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

inc/js/functions.js

@@ -1422,7 +1422,12 @@ function bx_prompt(sMessage, sValue, fOnClickOk, fOnClickCancel, oParams)
 function bx_is_color_scheme_dark()
 {
     return localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
-};
+}
+
+function bx_get_color_scheme()
+{
+    return 'theme' in localStorage ? localStorage.theme : 'auto';    
+}
 
 function bx_set_color_scheme(iCode)
 {
@@ -1453,7 +1458,7 @@ function bx_set_color_scheme(iCode)
     for(var i = 0; i < glOnColorSchemeChange.length; i++)
         if(typeof glOnColorSchemeChange[i] === 'function')
             glOnColorSchemeChange[i](iCode);
-};
+}
 
 function bx_set_color_scheme_html()
 {

install/sql/system.sql

@@ -4944,9 +4944,7 @@ INSERT INTO `sys_menu_items` (`set_name`, `module`, `name`, `title_system`, `tit
 ('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', 'scheme_light', '_sys_menu_item_title_system_sa_scheme_light', '_sys_menu_item_title_sa_scheme_light', 'javascript:void(0)', '{js_object}.setColorScheme(this, 1);', '', 'ami-scheme-light.svg', '', 2147483647, 1, 0, 0, 5),
-('sys_studio_account_popup', 'system', 'scheme_dark', '_sys_menu_item_title_system_sa_scheme_dark', '_sys_menu_item_title_sa_scheme_dark', 'javascript:void(0)', '{js_object}.setColorScheme(this, 2);', '', 'ami-scheme-dark.svg', '', 2147483647, 1, 0, 0, 6),
-('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, 7);
+('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);
 -- --------------------------------------------------------
 
 

modules/boonex/developer/template/css/main.css

@@ -6,9 +6,6 @@ body.bx-dev-page-body-single div.bx-std-page-menu,
 body.bx-dev-page-body-columns div.bx-std-page-menu {
     -webkit-flex-basis: 67px;
     flex-basis: 67px;
-
-    background-color: #4c6678;
-    box-shadow: inset -1px 0px 0px rgba(240, 240, 240, 0.2);
 }
 body.bx-dev-page-body-single div.bx-std-page-menu div.bx-std-page-column-cnt,
 body.bx-dev-page-body-columns div.bx-std-page-menu div.bx-std-page-column-cnt {
@@ -65,17 +62,17 @@ div.bx-dev-menu-main li.bx-def-color-bg-active {
     opacity:1;
     -moz-box-shadow: 0 0 9px 0px #ffffff;
     -webkit-box-shadow: 0 0 9px 0px #ffffff;
-	box-shadow: 0 0 9px 0px #ffffff;
+    box-shadow: 0 0 9px 0px #ffffff;
 }
 
 div.bx-dev-menu-main div.bx-dev-mm-item {
-	position: relative;
-	width: 32px;
-	height: 32px;
+    position: relative;
+    width: 32px;
+    height: 32px;
 } 
 
 div.bx-dev-menu-main div.bx-dev-mm-item img {
-	width: 32px;
+    width: 32px;
     height: 32px;
 }
 
@@ -113,7 +110,6 @@ div.bx-dev-page-column.bx-dev-page-menu {
     -webkit-flex: 0 0 20rem;
     flex: 0 0 20rem;
     width: 20rem;
-    background-color: #ffffff;
     
     overflow-y: auto;
 }
@@ -134,8 +130,6 @@ div.bx-dev-page-column.bx-dev-page-content {
 
     height: 100%;
 
-    background: #e5e5e5;
-
     overflow-x: hidden;
     overflow-y: auto;
 }

modules/boonex/developer/template/page_content.html

@@ -1,5 +1,5 @@
 <div class="bx-dev-page-columns-cnt">
-    <div class="bx-dev-page-column bx-dev-page-menu border-r">
+    <div class="bx-dev-page-column bx-dev-page-menu">
         <div class="bx-dev-page-column-cnt p-4" id="bx-dev-pc-menu">__page_menu_code__</div>
     </div>
     <div class="bx-dev-page-column bx-dev-page-content">

modules/boonex/english/data/langs/system/en.xml

@@ -1916,6 +1916,7 @@
         <string name="_adm_tmi_cpt_assistant"><![CDATA[Assistant]]></string>
 	<string name="_adm_tmi_cpt_site"><![CDATA[Go To Site]]></string>
         <string name="_adm_tmi_cpt_search"><![CDATA[Search...]]></string>
+        <string name="_adm_tmi_cpt_scheme"><![CDATA[Color Scheme]]></string>
 	<string name="_adm_tmi_cpt_tour"><![CDATA[Tour]]></string>
 	<string name="_adm_tmi_cpt_launcher"><![CDATA[Launcher]]></string>
         <string name="_adm_txt_active_api"><![CDATA[Available in App]]></string>
@@ -3475,9 +3476,8 @@ If it is not enabled then please consider implement this optimization, since it
     <string name="_sys_menu_item_title_sa_edit"><![CDATA[Manage Apps]]></string>
     <string name="_sys_menu_item_title_system_sa_language"><![CDATA[Language]]></string>
     <string name="_sys_menu_item_title_sa_language"><![CDATA[Language]]></string>
-    <string name="_sys_menu_item_title_system_sa_scheme_light"><![CDATA[Light Mode]]></string>
+    <string name="_sys_menu_item_title_sa_scheme_auto"><![CDATA[System]]></string>
     <string name="_sys_menu_item_title_sa_scheme_light"><![CDATA[Light Mode]]></string>
-    <string name="_sys_menu_item_title_system_sa_scheme_dark"><![CDATA[Dark Mode]]></string>
     <string name="_sys_menu_item_title_sa_scheme_dark"><![CDATA[Dark Mode]]></string>
     <string name="_sys_menu_item_title_system_sa_logout"><![CDATA[Sign out]]></string>
     <string name="_sys_menu_item_title_sa_logout"><![CDATA[Sign out]]></string>

modules/boonex/russian/data/langs/system/ru.xml

@@ -1892,6 +1892,7 @@
         <string name="_adm_tmi_cpt_assistant"><![CDATA[Ассистент]]></string>
 	<string name="_adm_tmi_cpt_site"><![CDATA[Перейти на сайт]]></string>
         <string name="_adm_tmi_cpt_search"><![CDATA[Искать...]]></string>
+        <string name="_adm_tmi_cpt_scheme"><![CDATA[Цветовая схема]]></string>
 	<string name="_adm_tmi_cpt_tour"><![CDATA[Инструкции]]></string>
 	<string name="_adm_tmi_cpt_launcher"><![CDATA[Загрузчик]]></string>
         <string name="_adm_txt_active_api"><![CDATA[Доступно в приложении]]></string>
@@ -3437,9 +3438,8 @@
     <string name="_sys_menu_item_title_sa_edit"><![CDATA[Управление приложениями]]></string>
     <string name="_sys_menu_item_title_system_sa_language"><![CDATA[Язык]]></string>
     <string name="_sys_menu_item_title_sa_language"><![CDATA[Язык]]></string>
-    <string name="_sys_menu_item_title_system_sa_scheme_light"><![CDATA[Светлый режим]]></string>
+    <string name="_sys_menu_item_title_sa_scheme_auto"><![CDATA[Системный]]></string>
     <string name="_sys_menu_item_title_sa_scheme_light"><![CDATA[Светлый режим]]></string>
-    <string name="_sys_menu_item_title_system_sa_scheme_dark"><![CDATA[Темный режим]]></string>
     <string name="_sys_menu_item_title_sa_scheme_dark"><![CDATA[Темный режим]]></string>
     <string name="_sys_menu_item_title_system_sa_logout"><![CDATA[Выйти]]></string>
     <string name="_sys_menu_item_title_sa_logout"><![CDATA[Выйти]]></string>

plugins_public/tailwind/css/tailwind.css

@@ -71,6 +71,9 @@
 
 
     /* Color Palette */
+    .bx-std .bx-def-color-bg-hl,
+    .bx-std .bx-def-color-bg-hl-even:nth-child(even),
+    .bx-std .bx-def-color-bg-hl-hover:hover,
     .bx-artificer .bx-def-color-bg-hl,
     .bx-artificer .bx-def-color-bg-hl-even:nth-child(even),
     .bx-artificer .bx-def-color-bg-hl-hover:hover {
@@ -631,6 +634,7 @@
     }
 
     /* Common Elements: HR */
+    .bx-std .bx-def-hr,
     .bx-artificer .bx-def-hr {
         @apply mx-0 p-0 border-t border-gray-200 dark:border-gray-700;
     }
@@ -750,6 +754,7 @@
     }
 
     /* Common elements: Forms */
+    .bx-std form,
     .bx-artificer form {
         @apply text-sm font-normal text-gray-700 dark:text-gray-300;
     }
@@ -790,6 +795,18 @@
     }
 
     /* Common elements: Forms: Text Input */
+    .bx-std .bx-form-input-slider,
+    .bx-std .bx-form-input-doublerange,
+    .bx-std .bx-form-input-select_multiple,
+    .bx-std .bx-form-input-select,
+    .bx-std .bx-form-input-number,
+    .bx-std .bx-form-input-time,
+    .bx-std .bx-form-input-datepicker,
+    .bx-std .bx-form-input-datetime,
+    .bx-std .bx-form-input-textarea:not(.bx-form-input-html),
+    .bx-std .bx-form-input-text,
+    .bx-std .bx-form-input-price,
+    .bx-std .bx-form-input-wrapper-price span,
     .bx-artificer .bx-form-input-slider,
     .bx-artificer .bx-form-input-doublerange,
     .bx-artificer .bx-form-input-select_multiple,
@@ -811,6 +828,7 @@
     }
 	
     /* Common elements: Forms: Password Input */
+    .bx-std .bx-form-input-wrapper-password,
     .bx-artificer .bx-form-input-wrapper-password {
         @apply relative block w-full pl-3 pr-8;
         @apply bg-gray-50 dark:bg-gray-900/50 focus:bg-white dark:focus:bg-gray-900;
@@ -821,6 +839,8 @@
     }
     
     /* Common elements: Forms: Checkbox/Radio Set Input */
+    .bx-std .bx-form-input-wrapper-checkbox_set,
+    .bx-std .bx-form-input-wrapper-radio_set,
     .bx-artificer .bx-form-input-wrapper-checkbox_set,
     .bx-artificer .bx-form-input-wrapper-radio_set {
         @apply relative block w-full py-2 px-3;
@@ -972,7 +992,14 @@
     .bx-stl-mil-wo-bg,
     .bx-stl-mil-wo-bg-gaps,
     .bx-stl-mil-wo-gaps,
-    .bx-stl-mil-wo-gaps-sm {
+    .bx-stl-mil-wo-gaps-sm,
+    .bx-std .bx-stl-mil,
+    .bx-std .bx-stl-mil-sm,
+    .bx-std .bx-stl-mil-wo-bg,
+    .bx-std .bx-stl-mil-wo-bg-gaps,
+    .bx-std .bx-stl-mil-wo-gaps,
+    .bx-std .bx-stl-mil-wo-gaps a,
+    .bx-std .bx-stl-mil-wo-gaps-sm {
         @apply flex items-center;
         @apply text-base text-gray-600 dark:text-gray-400 font-medium;
         @apply bx-stl-mil-hover-text;
@@ -1053,6 +1080,7 @@
     }
     
     .bx-stl-mii > *,
+    .bx-std .bx-stl-mii > *,
     .bx-stl-mii-sm > *,
     .bx-stl-mil .sys-action-do-icon > *,
     .bx-stl-mil-sm .sys-action-do-icon > *,
@@ -1284,6 +1312,12 @@
         @apply rounded-2xl;
     }
 
+    #bx-std-pcap-menu-popup-account .bx-popup li a,
+    #bx-std-pcap-menu-popup-account .bx-popup li .sys-icon,
+    #bx-std-pcap-menu-popup-scheme .bx-popup li a {
+        @apply text-gray-800 dark:text-gray-200 hover:text-black dark:hover:text-white;
+    }
+
     .bx-std-pmen-item {
         @apply hover:bg-gray-200 dark:hover:bg-gray-800;
         @apply hover:font-medium;
@@ -1303,16 +1337,44 @@
         @apply text-gray-800 dark:text-gray-200;
     }
 
+    .bx-std .bx-popup-color-bg {
+        @apply bg-white dark:bg-gray-900 shadow;
+    }
+    .bx-std .bx-popup-border {
+        @apply m-px ring-1 ring-gray-300 dark:ring-gray-700 rounded-2xl;
+    }
+    .bx-std .bx-popup-header h2 {
+        @apply text-gray-800 dark:text-gray-100;
+    }
+    .bx-std .bx-popup-header .bx-icon-close {
+        @apply text-gray-900 dark:text-white;
+    }
+    
+    .bx-std .bx-btn {
+        @apply inline-flex items-center;
+        @apply h-10;
+    }
+
     .bx-std .bx-btn:not(.bx-btn-primary) {
-        @apply bg-gray-200 dark:bg-gray-800 hover:bg-white dark:hover:bg-gray-700 active:bg-gray-100 dark:active:bg-gray-800;
-        @apply border-black/10 dark:border-white/10;
-        @apply text-gray-800 dark:text-gray-200;
+        @apply bg-gray-200 dark:bg-gray-800 hover:bg-white dark:hover:bg-gray-700 active:bg-gray-200/80 dark:active:bg-gray-800/50;
+        @apply border-gray-300 dark:border-0;
+        @apply text-sm font-medium leading-10;
     }
+    .bx-std .bx-btn:not(.bx-btn-primary),
+    .bx-std .bx-btn:not(.bx-btn-primary) .sys-icon:not(.sys-colored) {
+        @apply text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-50 active:text-gray-900 dark:active:text-gray-50;
+    }
+
     .bx-std .bx-btn.bx-btn-primary {
-        @apply bg-black/80 dark:bg-white/80 hover:bg-black/90 dark:hover:bg-white/90;
-        @apply border-white/20 dark:border-white/20;
-        @apply text-white/80 dark:text-black/40;
+        @apply bg-black/80 dark:bg-white hover:bg-black dark:hover:bg-white/80 active:bg-black/80 dark:active:bg-white/80;
+        @apply border-0 border-white/20 dark:border-white/20;
+        @apply text-white dark:text-black text-sm font-medium leading-10;
+        @apply active:opacity-50;
     }
+    .bx-std .bx-btn.bx-btn-primary .sys-icon:not(.sys-colored) {
+        @apply text-black dark:text-white;
+    }
+    
     
     /* Studio: Launcher */
     .bx-std-bg.bx-std-page-launcher {

studio/js/menu_top.js

@@ -14,16 +14,15 @@ function BxDolStudioMenuTop(oOptions) {
     bx_set_color_scheme_html();
 
     $(document).ready(function() {
-        var bDark = bx_is_color_scheme_dark();
-        $('.scheme.dark').toggle(!bDark);
-        $('.scheme.light').toggle(bDark);
+        $('.scheme-' + bx_get_color_scheme()).addClass('bx-menu-tab-active');
     });
 }
 
 BxDolStudioMenuTop.prototype.setColorScheme = function(oItem, iCode) {
     bx_set_color_scheme(iCode);
     
-    $(oItem).parents('li:first').hide().siblings('.scheme').show();
+    var sClassActive = 'bx-menu-tab-active';
+    $(oItem).parents('li:first').addClass(sClassActive).siblings('.' + sClassActive).removeClass(sClassActive);
 };
 
 BxDolStudioMenuTop.prototype.clickEdit = function(oItem) {

studio/template/block_caption.html

@@ -1,4 +1,4 @@
-<div class="bx-std-block-caption border-b border-b-zinc-200">
+<div class="bx-std-block-caption">
     <div class="bx-std-bcap-text">__caption__</div>
     <bx_if:show_actions>
         <div class="bx-std-bcap-actions">

studio/template/bp_add_block.html

@@ -1,4 +1,4 @@
-<div class="adm-bp-__action__-block-form bx-def-margin-top-neg">
+<div class="adm-bp-__action__-block-form">
     <div class="adm-bp-__action__-block-form-cnt">
         __form__
         <script language="javascript">

studio/template/bp_add_block_form.html

@@ -1,17 +1,13 @@
-<div class="adm-bp-cbf-left bx-def-border-color-layout">
-    <div class="adm-bp-cbf-left-cnt pt-4 px-2">
-        __menu__
-    </div>
+<div class="adm-bp-cbf-left">
+    <div class="adm-bp-cbf-left-cnt px-5">__menu__</div>
 </div>
-<div class="adm-bp-cbf-right bx-def-border-color-layout">
-    <div class="adm-bp-cbf-right-cnt bx-def-padding">
+<div class="adm-bp-cbf-right">
+    <div class="adm-bp-cbf-right-cnt px-5 py-0.5">
         <div id="__html_block_lists_id__" class="adm-bp-cbf-right-cnt">__blocks__</div>
     </div>
 </div>
-<div class="bx-std-cb"></div>
-<div class="adm-bp-cbf-controls bx-def-padding-top bx-def-padding-leftright bx-def-border-color-layout">
+<div class="adm-bp-cbf-controls bx-def-padding-top px-5">
     <button class="bx-btn bx-btn-primary" name="do_submit" value="<bx_text:_adm_bp_btn_block_add />" type="submit"><bx_text:_adm_bp_btn_block_add /></button>
     <button class="bx-btn bx-def-margin-sec-left" name="do_cancel" value="<bx_text:_adm_bp_btn_block_cancel />" type="button" onclick="$('.bx-popup-applied:visible').dolPopupHide()"><bx_text:_adm_bp_btn_block_cancel /></button>
     <div class="adm-bp-cbf-counter bx-def-font-h3"><span id="adm-bp-cbf-counter">0</span> <bx_text:_adm_bp_txt_block_selected /></div>
-    <div class="bx-std-cb"></div>
 </div>

studio/template/bp_add_page.html

@@ -1,4 +1,4 @@
-<div class="adm-bp-add-form bx-def-margin-top-neg">
+<div class="adm-bp-add-form">
     <div class="adm-bp-add-form-cnt">
         __form__
         <script language="javascript">

studio/template/bp_blocks.html

@@ -1,5 +1,5 @@
 <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 id="__html_id__" class="adm-bp-block<bx_if:is_inactive> adm-bpb-inactive</bx_if:is_inactive> bg-white dark:bg-black border border-gray-200 dark:border-gray-800 rounded-2xl">
         <div class="adm-bpb-content">
             <div class="adm-bpb-icon<bx_if:show_drag_handle> adm-bpb-drag-handle</bx_if:show_drag_handle>">
             	<bx_if:icon>
@@ -11,7 +11,7 @@
             <div class="adm-bpb-info">
                 <div class="adm-bpb-title text-gray-900">
                     <bx_if:show_link>
-                        <a class="text-gray-900 hover:text-gray-700" href="javascript:void(0)" onclick="javascript:__onclick__">__title__</a>
+                        <a class="text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100" 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,4 +1,4 @@
-<div class="adm-bp-cell border border-dashed border-gray-300 bg-gray-100 rounded-lg">
+<div class="adm-bp-cell bg-white dark:bg-gray-900 border border-dashed border-black/20 dark:border-white/20 rounded-lg">
     <div id="adm-bpc-__id__" class="adm-bp-cell-cnt flex flex-col gap-2">
         <bx_include_auto:bp_blocks.html />
     </div>

studio/template/bp_edit_page.html

@@ -1,4 +1,4 @@
-<div class="adm-bp-edit-form bx-def-margin-top-neg">
+<div class="adm-bp-edit-form">
     <div class="adm-bp-edit-form-cnt">
         __form__
         <script language="javascript">

studio/template/bp_edit_page_form.html

@@ -1,18 +1,14 @@
-<div class="adm-bp-epf-left bx-def-border-color-layout">
-    <div class="adm-bp-epf-left-cnt pt-4 px-2">
-        __menu__
-    </div>
+<div class="adm-bp-epf-left">
+    <div class="adm-bp-epf-left-cnt px-5">__menu__</div>
 </div>
-<div class="adm-bp-epf-right bx-def-border-color-layout">
-    <div id="__html_settings_groups_id__" class="adm-bp-epf-right-cnt bx-def-padding">
+<div class="adm-bp-epf-right">
+    <div id="__html_settings_groups_id__" class="adm-bp-epf-right-cnt px-5 py-0.5">
         <bx_repeat:settings_groups>
             <div id="__html_settings_group_id__" class="adm-bp-settings" style="<bx_if:hidden>display: none;</bx_if:hidden>">__content__</div>
         </bx_repeat:settings_groups>
     </div>
 </div>
-<div class="bx-std-cb"></div>
-<div class="adm-bp-epf-controls bx-def-padding-top bx-def-padding-leftright bx-def-border-color-layout">
+<div class="adm-bp-epf-controls bx-def-padding-top px-5">
     <button class="bx-btn bx-btn-primary" name="do_submit" value="__submit__" type="submit">__submit__</button>
     <button class="bx-btn bx-def-margin-sec-left" name="do_cancel" value="<bx_text:_adm_bp_btn_page_cancel />" type="button" onclick="__js_object__.onCloseSettings()"><bx_text:_adm_bp_btn_page_cancel /></button>
-    <div class="bx-std-cb"></div>
 </div>

studio/template/css/builder_forms.css

@@ -38,15 +38,19 @@ div.bx-grid-header div#bx-form-element-display {
 
 /*--- Fields page -> Add/Edit Field block style ---*/
 div#bx-form-element-type .bx-menu-ver li {
-	position: relative;
-	float: left;
-	width: 50%;
+    position: relative;
+    float: left;
+    width: 50%;
+}
+div#bx-form-element-type .bx-menu-ver li a {
+    width: 100%;
 }
+    
 div#bx-form-element-type .bx-menu-ver .bx-def-hr {
-	display: none;
+    display: none;
 }
 div#bx-form-element-info textarea.bx-form-input-textarea {
-	height: 53px;
+    height: 53px;
 }
 
 /*--- Pre Lists page -> Add/Edit Form block ---*/

studio/template/css/builder_page.css

@@ -25,12 +25,7 @@ div.adm-bp-block {
     position: relative;
     overflow: hidden;
 
-    border: 1px solid rgb(229 231 235);
-    border-radius: 1rem;
-
     box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
-
-    background-color: #ffffff;
 }
 div.adm-bp-block.adm-bpb-inactive,
 div.bx-lr-dump div.adm-bp-block {
@@ -62,6 +57,7 @@ div.adm-bpb-icon img,
 div.adm-bpb-icon i.sys-icon {
     width: 2.5rem;
     height: 2.5rem;
+    max-width: none;
     margin-right: 0.75rem;
 }
 div.adm-bpb-icon {
@@ -133,41 +129,32 @@ div.adm-bp-create-block-form {}
 div.adm-bp-create-block-form-cnt {}
 
 div.adm-bp-create-block-form fieldset.bx-form-section {
-	padding-bottom: 0px;
+    padding-bottom: 0px;
 }
 div.adm-bp-create-block-form div.adm-bp-block:first-child {
-	margin-top: 0px;
+    margin-top: 0px;
 }
 div.adm-bp-cbf-left {
-	position: absolute;
-        top: 0px;
-        left: 0px;
-	width: 179px;
-	height: 300px;
-	border-style: solid;
-	border-width: 1px 1px 0px 0px;
-	overflow-y: auto; 
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 14rem;
+    height: 20rem;
+    overflow-y: auto; 
 }
 div.adm-bp-cbf-left-cnt {}
 div.adm-bp-cbf-right {
-	position: relative;
-	width: 620px;
-	height: 300px;
-	margin-left: 180px;
-	border-style: solid;
-	border-width: 1px 0px 0px 0px;
-	overflow-y: auto;
+    position: relative;
+    height: 20rem;
+    margin-left: 14rem;
+    overflow-y: auto;
 }
 div.adm-bp-cbf-right-cnt {}
-div.adm-bp-cbf-controls {
-	border-style: solid;
-	border-width: 1px 0px 0px 0px;
-}
 div.adm-bp-cbf-counter {
-	position: relative;
-	float: right;
-	line-height: 38px;
-	color: #b5b5b5;
+    position: relative;
+    float: right;
+    line-height: 38px;
+    color: #b5b5b5;
 }
 
 /*--- Edit Block popup style ---*/
@@ -212,10 +199,8 @@ div.adm-bp-epf-left {
     position: absolute;
     top: 0px;
     left: 0px;
-    width: 179px;
-    height: 310px;
-    border-right-style: solid;
-    border-right-width: 1px;
+    width: 14rem;
+    height: 20rem;
     overflow-y: auto; 
 }
 div.adm-bp-epf-left-cnt {}
@@ -224,16 +209,11 @@ div.adm-bp-epf-left .bx-std-pmen-item {
 }
 div.adm-bp-epf-right {
     position: relative;
-    width: 620px;
-    height: 310px;
-    margin-left: 180px;
+    height: 20rem;
+    margin-left: 14rem;
     overflow-y: auto;
 }
 div.adm-bp-epf-right-cnt {}
-div.adm-bp-epf-controls {
-    border-style: solid;
-    border-width: 1px 0px 0px 0px;
-}
 div.adm-bp-epf-controls .bx-def-margin-sec-left {
     margin-left: 0.5rem;
 }

studio/template/css/common.less

@@ -7,10 +7,10 @@
 
 /* body */
 a {
-	color: rgba(30, 140, 240, 1); 
+    color: rgba(30, 140, 240, 1); 
 }
 a:hover {
-	color: rgba(10, 120, 220, 1); 
+    color: rgba(10, 120, 220, 1); 
 }
 .sys-icon:not(.sys-colored),
 .sys-icon-a {
@@ -93,22 +93,17 @@ div.bx-db-note {
 .bx-popup-content-indent {
     padding: 1.25rem;
 }
-.bx-popup-header {
-    padding: 1.25rem;
-    border-bottom: 1px solid rgba(228, 228, 231, 1.0);
+.bx-popup-header.bx-def-padding {
+    padding: 1.25rem 1.25rem 0 1.25rem;
 }
 .bx-popup-header-color-bg {
-    background-color: rgba(255, 255, 255, 1.0);
+    background-color: transparent;
 }
 .bx-popup-header h2 {
     line-height: 1.5rem;
     text-align: left;
     font-size: 1.5rem;
     font-weight: 600;
-    color: rgba(39, 39, 42, 1);
-}
-.bx-popup-header .bx-icon-close {
-    color: rgba(0, 0, 0, 1);
 }
 
 /* button large */
@@ -117,7 +112,6 @@ div.bx-db-note {
     .box-sizing(border-box);
 
     height: 2.5rem;
-    line-height: 2.5rem;
     padding: 0 1rem;
 
     .radius(8px);
@@ -127,23 +121,6 @@ div.bx-db-note {
     box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
 
     text-shadow: none;
-
-    font-size: 0.875rem;
-    font-weight: 500;
-}
-
-.bx-btn.bx-btn-primary {
-    border-width: 0px;
-    .background-color(rgba(28, 100, 242, 1));
-    color: rgba(255, 255, 255, 1);
-}
-
-.bx-btn:not(.bx-btn-primary) .sys-icon:not(.sys-colored) {
-    color: rgba(82, 82, 91, 1.0);
-}
-.bx-btn:not(.bx-btn-primary):hover .sys-icon:not(.sys-colored),
-.bx-btn:not(.bx-btn-primary):active .sys-icon:not(.sys-colored) {
-    color: rgba(82, 82, 91, 0.8);
 }
 
 .bx-btn.bx-btn-primary:hover,

studio/template/css/forms.css

@@ -1,104 +1,13 @@
 @import url(../../../template/css/forms.css);
 
-/**
- * Overwrite default styles
- */
-.bx-form-element-wrapper.bx-def-margin-top-auto {
-    margin-top: 2rem;
-}
-.bx-form-element-wrapper.bx-def-margin-top-auto:first-child {
-    margin-top: 0;
-}
-
-.bx-form-value .bx-form-input-slider,
-.bx-form-value .bx-form-input-doublerange,
-.bx-form-value .bx-form-input-select_multiple,
-.bx-form-value .bx-form-input-select,
-.bx-form-value .bx-form-input-radio_set,
-.bx-form-value .bx-form-input-checkbox_set,
-.bx-form-value .bx-form-input-number,
-.bx-form-value .bx-form-input-time,
-.bx-form-value .bx-form-input-datepicker,
-.bx-form-value .bx-form-input-datetime,
-.bx-form-value .bx-form-input-textarea,
-.bx-form-value .bx-form-input-wrapper-password,
-.bx-form-value .bx-form-input-text,
-.bx-form-value .bx-form-input-price,
-.bx-form-value .bx-form-input-wrapper-price span {
-    height: 2.5rem;
-    padding: 0 0.75rem;
-    box-sizing: border-box;
-
-    border: 1px solid rgba(107, 114, 128, 0.2);
-    border-radius: 0.5rem;
-
-    line-height: 1.25rem;
-    font-size: 1.0rem;
-}
-.bx-form-input-rgb-list{
-    color:#fff;
-}
-
-.bx-form-value .bx-form-input-select_multiple,
-.bx-form-value .bx-form-input-radio_set,
-.bx-form-value .bx-form-input-checkbox_set {
-    height: auto;
-    padding: .5rem .75rem;
-}
-
-.bx-form-value .bx-form-input-textarea {
-    height: 15rem;
-    padding: 0.5rem;
-
-    line-height:normal;
-}
-
-.bx-form-value .bx-form-input-textarea-small {
-    height: 4.5rem;
-}
-
-.bx-form-value .bx-form-input-wrapper-textarea .CodeMirror {
-    height: 30rem;
-}
-
-.bx-form-value .bx-form-input-slider:focus,
-.bx-form-value .bx-form-input-doublerange:focus,
-.bx-form-value .bx-form-input-number:focus,
-.bx-form-value .bx-form-input-time:focus,
-.bx-form-value .bx-form-input-datepicker:focus,
-.bx-form-value .bx-form-input-datetime:focus,
-.bx-form-value .bx-form-input-textarea:focus,
-.bx-form-value .bx-form-input-text:focus,
-.bx-form-value .bx-form-input-price:focus,
-.bx-form-value .bx-form-input-wrapper-password.bx-form-input-focus {
-    outline: 2px solid rgba(59,130,246,.5);
-    outline-offset: 2px;
-
-    background-color: rgba(255, 255, 255, 1);
-
-    transition-duration: .1s;
-}
-
-.bx-form-value .bx-form-input-select_multiple,
-.bx-form-value .bx-form-input-radio_set,
-.bx-form-value .bx-form-input-checkbox_set {
-    height:auto;
-}
-.bx-form-value .bx-form-input-checkbox_set {
-    line-height: 1.75rem;
-}
-
-.bx-form-caption-oneline.bx-def-margin-left {
-    margin-left: 0.5rem;
-}
 
 /**
  * General
  */
 select.bx-form-field-type option {
-	padding-left: 25px;
-	background-repeat: no-repeat;
-	background-position: 5px 0px;
+    padding-left: 25px;
+    background-repeat: no-repeat;
+    background-position: 5px 0px;
 }
 
 
@@ -117,20 +26,20 @@ div.bx-form-input-preview-empty {}
  * Translatable fields.
  */
 div.bx-form-input-wrapper-textarea {
-	position: relative;
+    position: relative;
 }
 
 div.bx-form-input-translator {
-	position: absolute;
-	top: -22px;
-	right: 0px;
+    position: absolute;
+    top: -22px;
+    right: 0px;
 }
 
 div.bx-form-input-language,
 div.bx-form-input-language-current{
-	position: relative;
-	height: 17px;
-	line-height: 17px;
+    position: relative;
+    height: 17px;
+    line-height: 17px;
 }
 
 div.bx-form-input-language {
@@ -138,15 +47,5 @@ div.bx-form-input-language {
 }
 
 div.bx-form-input-language-current {
-	font-weight: bold;
-}
-
-/**
- * Forms in popup.
- */
-.bx-popup .bx-form-element .bx-form-input-wrapper-input_set {
-    margin: 0 -1.5rem;
-    padding: 1.5rem 1.5rem 0 1.5rem;
-
-    border-top: 1px solid rgba(228, 228, 231, 1.0);
+    font-weight: bold;
 }

studio/template/css/menu.css

@@ -24,41 +24,6 @@ ul.bx-menu-toolbar li a .sys-icon-a {
 }
 
 /* --------------- Vertical in Popup */
-.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil, 
-.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-sm, 
-.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps, 
-.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps-sm {
-    border-radius: 16px;
-}
-
-.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil:hover,
-.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-sm:hover, 
-.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps:hover, 
-.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps-sm:hover {
-    background-color: rgba(243, 244, 246, 1);
-}
-
-.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil a, 
-.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-sm a, 
-.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps a, 
-.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps-sm a {
-    color: rgba(55, 65, 81, 1);
-}
-
-.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil:hover a, 
-.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-sm:hover a, 
-.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps:hover a, 
-.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps-sm:hover a {
-    color: rgba(17, 24, 39, 1);
-}
-
-.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil .bx-menu-item-icon, 
-.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-sm .bx-menu-item-icon, 
-.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps .bx-menu-item-icon, 
-.bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps-sm .bx-menu-item-icon {
-    margin-right: 0.75rem;
-}
-
 .bx-popup .bx-menu-ver.bx-menu-object-sys_switch_language_popup .bx-menu-item-icon {
     margin-right: 0 !important;
 }

studio/template/css/menu_top.css

@@ -309,13 +309,13 @@ body > .bx-popup-wrapper.bx-std-mod-popup-settings-wrapper,
 #bx-std-pcap-menu-popup-assistant .bx-popup-gap,
 #bx-std-pcap-menu-popup-actions .bx-popup-gap,
 #bx-std-pcap-menu-popup-account .bx-popup-gap,
+#bx-std-pcap-menu-popup-scheme .bx-popup-gap,
 #bx-std-pmenu-popup-actions .bx-popup-gap {
     margin-left: 0;
     margin-right: 0;
 }
 #bx-std-pcap-menu-popup-help .bx-popup,
 #bx-std-pcap-menu-popup-actions .bx-popup,
-#bx-std-pcap-menu-popup-account .bx-popup,
 .bx-std-mod-popup-settings-wrapper.bx-popup-applied:not(.bx-popup-chain) .bx-popup {
     border-width: 0; 
     background-color: #ffffff;
@@ -324,10 +324,12 @@ body > .bx-popup-wrapper.bx-std-mod-popup-settings-wrapper,
 #bx-std-pmenu-popup-actions .bx-popup-content {
     padding: 1.0rem;
 }
-#bx-std-pcap-menu-popup-account .bx-popup-content {
-    padding: 0.5rem 0;
+#bx-std-pcap-menu-popup-account .bx-popup-content,
+#bx-std-pcap-menu-popup-scheme .bx-popup-content {
+    padding: 1.0rem 0;
 }
-#bx-std-pcap-menu-popup-account .bx-popup li {
+#bx-std-pcap-menu-popup-account .bx-popup li,
+#bx-std-pcap-menu-popup-scheme .bx-popup li {
     position: relative;
     height: 2.5rem;
     margin: 0;
@@ -339,14 +341,16 @@ body > .bx-popup-wrapper.bx-std-mod-popup-settings-wrapper,
     font-weight: 400;
     overflow: hidden;
 }
-#bx-std-pcap-menu-popup-account .bx-popup li a {
+#bx-std-pcap-menu-popup-account .bx-popup li a,
+#bx-std-pcap-menu-popup-scheme .bx-popup li a {
     position: relative;
     display: -webkit-flex;
     display: flex;
     -webkit-align-items: center;
     align-items: center;
 }
-#bx-std-pcap-menu-popup-account .bx-popup li svg {
+#bx-std-pcap-menu-popup-account .bx-popup li svg,
+#bx-std-pcap-menu-popup-scheme .bx-popup li svg {
     margin-right: 0.75rem;
 }
 
@@ -358,21 +362,18 @@ body > .bx-popup-wrapper.bx-std-mod-popup-settings-wrapper,
 #bx-std-pcap-menu-popup-assistant .bx-popup .bx-popup-header h2,
 #bx-std-pcap-menu-popup-assistant .bx-popup .bx-popup-header .bx-icon,
 #bx-std-pcap-menu-popup-assistant .bx-popup a,
-#bx-std-pcap-menu-popup-actions .bx-popup,
-#bx-std-pcap-menu-popup-account .bx-popup li a,
-#bx-std-pcap-menu-popup-account .bx-popup li .sys-icon {
+#bx-std-pcap-menu-popup-actions .bx-popup {
     color: rgba(0, 0, 0, 0.7);
 }
 #bx-std-pcap-menu-popup-account .bx-popup li svg g {
     opacity: 0.7;
 }
 #bx-std-pcap-menu-popup-help .bx-popup a:hover,
-#bx-std-pcap-menu-popup-assistant .bx-popup a:hover,
-#bx-std-pcap-menu-popup-account .bx-popup li:hover a,
-#bx-std-pcap-menu-popup-account .bx-popup li:hover a .sys-icon {
+#bx-std-pcap-menu-popup-assistant .bx-popup a:hover {
     color: rgba(0, 0, 0, 0.85);
 }
-#bx-std-pcap-menu-popup-account .bx-popup li.bx-menu-tab-active {
+#bx-std-pcap-menu-popup-account .bx-popup li.bx-menu-tab-active,
+#bx-std-pcap-menu-popup-scheme .bx-popup li.bx-menu-tab-active {
     background-color: rgba(24, 144, 255, 0.2);
     box-shadow: inset 3px 0px 0px rgba(24, 144, 255, 1.0);
 }

studio/template/css/page.css

@@ -30,12 +30,6 @@ div.bx-std-blocks-line .bx-std-block-wrp {
 /**
  * Block Styles
  */
-div.bx-std-block {
-    /*
-    min-height: calc(100vh - 5rem);
-    background-color: rgba(229, 231, 235, 1.0);
-    */
-}
 div.bx-std-block-caption {
     position: relative;
     display: -webkit-flex;
@@ -43,7 +37,7 @@ div.bx-std-block-caption {
     -webkit-align-items: center;
     align-items: center;
 
-    padding: 1.25rem 1.5rem;
+    padding: 1.25rem 1.5rem 0 1.5rem;
 }
 div.bx-std-bcap-text {
     -webkit-flex: 1 1 auto;

studio/template/images/icons/tmi-scheme-auto.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-monitor"><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg>

studio/template/images/icons/tmi-scheme-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>

studio/template/images/icons/tmi-scheme-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>

studio/template/scripts/BxBaseStudioFunctions.php

@@ -220,6 +220,19 @@ class BxBaseStudioFunctions extends BxBaseFunctions implements iBxDolSingleton
     {
         $sResult = '';
 
+        $oMenuScheme = new BxTemplStudioMenu(['template' => 'menu_vertical_lite.html', 'menu_items' => [
+            ['name' => 'scheme-auto', 'class' => 'auto', 'icon' => 'tmi-scheme-auto.svg', 'link' => 'javascript:void(0)', 'onclick' => '{js_object}.setColorScheme(this, 0);', 'title' => _t('_sys_menu_item_title_sa_scheme_auto')],
+            ['name' => 'scheme-light', 'class' => 'light', 'icon' => 'tmi-scheme-light.svg', 'link' => 'javascript:void(0)', 'onclick' => '{js_object}.setColorScheme(this, 1);', 'title' => _t('_sys_menu_item_title_sa_scheme_light')],
+            ['name' => 'scheme-dark', 'class' => 'dark', 'icon' => 'tmi-scheme-dark.svg', 'link' => 'javascript:void(0)', 'onclick' => '{js_object}.setColorScheme(this, 2);', 'title' => _t('_sys_menu_item_title_sa_scheme_dark')]
+        ]]);
+
+        $oMenuScheme->setInlineIcons(true);
+        $oMenuScheme->addMarkers([
+            'js_object' => BxTemplStudioMenuTop::getInstance()->getJsObject()
+        ]);
+
+        $sResult .= $this->transBox('bx-std-pcap-menu-popup-scheme', $oMenuScheme->getCode(), true);
+
         $oAccounMenu = BxDolMenu::getObjectInstance('sys_studio_account_popup');
         if($oAccounMenu)
             $sResult .= $this->transBox('bx-std-pcap-menu-popup-account', $oAccounMenu->getCode(), true);

studio/template/scripts/BxBaseStudioMenu.php

@@ -39,6 +39,11 @@ class BxBaseStudioMenu extends BxDolStudioMenu
             return $aItem;
 
         $aItem['class'] = isset($aItem['class']) ? $aItem['class'] : '';
+
+        if(!isset($aItem['class_add']))
+            $aItem['class_add'] = '';
+        $aItem['class_add'] .= ' ' . str_replace('_', '-', $aItem['name']);
+
         if($this->_bInlineIcons && $aItem['bx_if:image']['condition'] && ($sImage = $this->_oTemplate->getIconContent($aItem['icon'])) !== false)
             $aItem = array_merge($aItem, [
                 'bx_if:image' => [

studio/template/scripts/BxBaseStudioMenuAccountPopup.php

@@ -20,20 +20,6 @@ class BxBaseStudioMenuAccountPopup extends BxDolStudioMenuAccountPopup
             'url_studio' => BX_DOL_URL_STUDIO
         ));
     }
-    
-    protected function _getMenuItem ($aItem)
-    {
-        $aItem = parent::_getMenuItem($aItem);
-        if($aItem === false)
-            return $aItem;
-        
-        if(!isset($aItem['class_add']))
-            $aItem['class_add'] = '';
-
-        $aItem['class_add'] .= str_replace('_', ' ', $aItem['name']);
-
-        return $aItem;
-    }
 }
 
 /** @} */

studio/template/scripts/BxBaseStudioWidget.php

@@ -100,6 +100,14 @@ class BxBaseStudioWidget extends BxDolStudioWidget
                 'title' => '_adm_tmi_cpt_site'
             ];
 
+        $aItemsRight['scheme'] = [
+            'name' => 'scheme',
+            'icon' => 'tmi-scheme-auto.svg',
+            'link' => 'javascript:void(0);',
+            'onclick' => 'bx_menu_popup_inline(\'#bx-std-pcap-menu-popup-scheme\', this);',
+            'title' => '_adm_tmi_cpt_scheme'
+        ];
+
         $aItemsRight['account'] = [
             'name' => 'account',
             'icon' => 'tmi-account.svg',

studio/template/scripts/BxBaseStudioWidgets.php

@@ -95,6 +95,13 @@ class BxBaseStudioWidgets extends BxDolStudioWidgets
                     'link' => '{url_root}',
                     'title' => '_adm_tmi_cpt_site'
                 ),
+                'scheme' => array(
+                    'name' => 'scheme',
+                    'icon' => 'tmi-scheme-auto.svg',
+                    'link' => 'javascript:void(0);',
+                    'onclick' => 'bx_menu_popup_inline(\'#bx-std-pcap-menu-popup-scheme\', this);',
+                    'title' => '_adm_tmi_cpt_scheme'
+                ),
                 'account' => array(
                     'name' => 'account',
                     'icon' => 'tmi-account.svg',
@@ -105,14 +112,18 @@ class BxBaseStudioWidgets extends BxDolStudioWidgets
             )
         );
 
+        if($this->_sType != BX_DOL_STUDIO_WTYPE_DEFAULT || getParam('site_tour_studio') != 'on')
+            unset($aItemsRight['menu_items']['tour']);
+
+        if(!$this->_bShowHeaderRightAssistant)
+            unset($aItemsRight['menu_items']['assistant']);
+
         if(!$this->_bShowHeaderRightSite)
             unset($aItemsRight['menu_items']['site']);
         
-        if(!$this->_bShowHeaderRightAssistant)
-            unset($aItemsRight['menu_items']['assistant']);
+        
 
-        if($this->_sType != BX_DOL_STUDIO_WTYPE_DEFAULT || getParam('site_tour_studio') != 'on')
-            unset($aItemsRight['menu_items']['tour']);
+        
 
         $oTopMenu = BxTemplStudioMenuTop::getInstance();
         $oTopMenu->setPageName($this->aPage['name']);