Studio: one button loader, phone page tabs, informer tint, dark panels

- bx_std_loading_btn (page.js) is the Studio-wide button loader: the tile
  wave at the button's width, the label kept as the accessible name, and a
  button that was disabled before stays so. Agents, Dashboard, Options and
  Store call it instead of the site's bx_loading_btn or their own copy.
- Phone page menu: 48px icon-only tabs on one even line; the active tab
  shows its label beside the tile; 8px after the last tab in the scroll.
- Informer messages over the launcher sit on a near-opaque page-colour
  base with the type tint on top, in light and dark.
- Dark panels (page menu column, store product and update cards) use
  white/10 like the top menu, instead of white/6.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

studio/js/agents.js

@@ -182,13 +182,13 @@ BxDolStudioPageAgents.prototype.approveCode = function(oSource, iCmtId) {
     oData = jQuery.extend({}, oData, {action: 'approveCode', Cmt: iCmtId});
 
     oSource = $(oSource);
-    bx_loading_btn(oSource, true);
+    bx_std_loading_btn(oSource, true);
 
     jQuery.post (
         this.sActionUrlCmts,
         oData,
         function(oData) {
-            bx_loading_btn(oSource, false);
+            bx_std_loading_btn(oSource, false);
 
             processJsonData(oData);
         },

studio/js/dashboard.js

@@ -46,34 +46,10 @@ BxDolStudioDashboard.prototype.loading = function(sDivId, bShow, oButton) {
 };
 
 /**
- * Trigger button loader: the button is disabled and its label gives way to the launcher's tile wave (page.css .bx-std-btn-loading) at the
- * button's width, so nothing moves; the label (and the button) comes back when the request ends. The label stays the accessible name meanwhile.
+ * Trigger button loader: the Studio-wide one (page.js bx_std_loading_btn).
  */
 BxDolStudioDashboard.prototype.loadingButton = function(oButton, bShow) {
-    oButton = $(oButton);
-    if(!oButton.length)
-        return;
-
-    if(bShow) {
-        if(oButton.data('bx-loading'))
-            return;
-
-        oButton.data('bx-loading', {html: oButton.html(), label: oButton.attr('aria-label')});
-        if(!oButton.attr('aria-label'))
-            oButton.attr('aria-label', oButton.text().trim());
-
-        oButton.css('min-width', oButton.outerWidth() + 'px').prop('disabled', true).attr('aria-disabled', 'true').addClass('bx-btn-disabled bx-btn-loading');
-        oButton.html('<span class="bx-std-btn-loading" aria-hidden="true"></span>');
-        return;
-    }
-
-    var oSaved = oButton.data('bx-loading');
-    if(!oSaved)
-        return;
-
-    oButton.removeData('bx-loading').css('min-width', '').prop('disabled', false).removeAttr('aria-disabled').removeClass('bx-btn-disabled bx-btn-loading').html(oSaved.html);
-    if(oSaved.label == undefined)
-        oButton.removeAttr('aria-label');
+    bx_std_loading_btn(oButton, bShow);
 };
 
 /**

studio/js/options.js

@@ -28,7 +28,7 @@ BxDolStudioOptions.prototype.onSubmit = function(oForm) {
     var oSubmit = $(oForm).find('input[type="submit"],button[type="submit"]');
 
     oSubmit.addClass('bx-btn-disabled');
-    bx_loading_btn(oSubmit, true);
+    bx_std_loading_btn(oSubmit, true);
 
     return (this.bBusy = true);
 };
@@ -40,7 +40,7 @@ BxDolStudioOptions.prototype.onSubmitted = function(sFormId, sTocken, oData) {
     oForm.find('input[name="csrf_token"]').val(sTocken);
 
     oSubmit.removeClass('bx-btn-disabled');
-    bx_loading_btn(oSubmit, false);
+    bx_std_loading_btn(oSubmit, false);
 
     this.bBusy = false;
 };

studio/js/page.js

@@ -210,4 +210,39 @@ $(document).ready(function() {
     bx_std_scrollbars();
 });
 
+/**
+ * Button loader (the launcher's tile wave, page.css .bx-std-btn-loading) for a button whose request is in flight: the button is disabled
+ * and its label gives way to the wave at the button's width, so nothing moves; the label (and the button) comes back when the request
+ * ends. The label stays the accessible name meanwhile. Replaces the site's bx_loading_btn spinner in Studio.
+ */
+function bx_std_loading_btn(oButton, bShow) {
+    oButton = $(oButton);
+    if(!oButton.length)
+        return;
+
+    if(bShow) {
+        if(oButton.data('bx-loading'))
+            return;
+
+        oButton.data('bx-loading', {html: oButton.html(), label: oButton.attr('aria-label'), disabled: oButton.prop('disabled') || oButton.hasClass('bx-btn-disabled')});
+        if(!oButton.attr('aria-label'))
+            oButton.attr('aria-label', oButton.text().trim());
+
+        oButton.css('min-width', oButton.outerWidth() + 'px').prop('disabled', true).attr('aria-disabled', 'true').addClass('bx-btn-disabled bx-btn-loading');
+        oButton.html('<span class="bx-std-btn-loading" aria-hidden="true"></span>');
+        return;
+    }
+
+    var oSaved = oButton.data('bx-loading');
+    if(!oSaved)
+        return;
+
+    // a button that was disabled before stays so
+    oButton.removeData('bx-loading').css('min-width', '').removeClass('bx-btn-loading').html(oSaved.html);
+    if(!oSaved.disabled)
+        oButton.prop('disabled', false).removeAttr('aria-disabled').removeClass('bx-btn-disabled');
+    if(oSaved.label == undefined)
+        oButton.removeAttr('aria-label');
+}
+
 /** @} */

studio/js/store.js

@@ -181,7 +181,7 @@ BxDolStudioStore.prototype._getFile = function(sAction, mixedId, onResult, oButt
 	var oDate = new Date();
 	var $this = this;
 
-	bx_loading_btn(oButton, true);
+	bx_std_loading_btn(oButton, true);
 	$(oButton).addClass('bx-btn-disabled');
 
 	$.get(
@@ -202,7 +202,7 @@ BxDolStudioStore.prototype._getFile = function(sAction, mixedId, onResult, oButt
 };
 
 BxDolStudioStore.prototype._onGetFile = function(oData, oButton) {
-    bx_loading_btn(oButton, false);
+    bx_std_loading_btn(oButton, false);
 
     oButton = $(oButton);
     switch(parseInt(oData.code)) {
@@ -354,7 +354,7 @@ BxDolStudioStore.prototype.perform = function(sType, sValue, onSuccess, oInput)
 	if(!sValue)
         return false;
 
-	bx_loading_btn(oInput, true);
+	bx_std_loading_btn(oInput, true);
 
     $.post(
     	this.sActionsUrl,
@@ -364,7 +364,7 @@ BxDolStudioStore.prototype.perform = function(sType, sValue, onSuccess, oInput)
     		_t:oDate.getTime()
     	},
     	function (oData) {
-    		bx_loading_btn(oInput, false);
+    		bx_std_loading_btn(oInput, false);
 
     		if(oData.message.length > 0)
     			$this.showNotification(oData.message);
@@ -418,7 +418,7 @@ BxDolStudioStore.prototype.changePagePaginate = function(oButton, sType, mixedVa
     var oDate = new Date();
     var $this = this;
 
-    bx_loading_btn(oButton, true);
+    bx_std_loading_btn(oButton, true);
 
     $.get(
         this.sActionsUrl,
@@ -431,7 +431,7 @@ BxDolStudioStore.prototype.changePagePaginate = function(oButton, sType, mixedVa
             _t:oDate.getTime()
         },
         function(oData) {
-            bx_loading_btn(oButton, false);
+            bx_std_loading_btn(oButton, false);
 
                 if(oData.code != 0) {
                     $this.showNotification(oData.message);

studio/template/css/general.css

@@ -243,7 +243,8 @@ img.bx-std-api {
 /*
  * Page menu on narrow screens (the columns themselves are in page_columns.css).
  * Tablet: a vertical strip of square tiles (as wide as the strip's items, 88px), the 32px icon and a small label centred in each.
- * Phone: a horizontal, scrollable row of tabs with 28px tiles and 16px glyphs.
+ * Phone: a horizontal, scrollable row of 48px tabs, each its 32px tile alone (the link's aria-label names it); the active tab shows its
+ * label beside the tile, so the row stays one even line whatever the labels' length.
  */
 @media (max-width: 1023px) {
     div.bx-std-pmen-item {
@@ -260,7 +261,7 @@ img.bx-std-api {
         justify-content: center;
 
         height: 100%;
-        padding: 0.5rem 0.25rem; /* room for a two-line label under the tile */
+        padding: 0.5rem; /* the 8px inset all round, as beside the tile on wide screens; the label wraps to two lines under the tile */
     }
     div.bx-std-pmen-item .bx-std-pmen-ic-icon,
     .bx-dir-rtl div.bx-std-pmen-item .bx-std-pmen-ic-icon {
@@ -291,26 +292,40 @@ img.bx-std-api {
     div.bx-std-pcm-menu > .bx-clear {
         display: none;
     }
+    div.bx-std-pcm-menu::after {
+        content: '';
+        -webkit-flex: 0 0 0.375rem;
+        flex: 0 0 0.375rem; /* with the 2px gap, 8px after the last tab: the column's inset is not part of the row's scroll range */
+    }
     div.bx-std-pmen-item {
         -webkit-flex: 0 0 auto;
         flex: 0 0 auto;
 
-        height: auto; /* tabs, not squares */
-        min-width: 4rem;
+        height: 3rem; /* the 32px tile with 8px around it, like the wide-screen list */
         margin-top: 0;
     }
     div.bx-std-pmen-item-cnt {
-        height: auto;
-        padding: 0.375rem 0.5rem;
+        -webkit-flex-direction: row;
+        flex-direction: row;
+        -webkit-justify-content: flex-start;
+        justify-content: flex-start;
     }
-    div.bx-std-pmen-item .bx-std-pmen-ic-icon {
-        width: 1.75rem;
-        height: 1.75rem;
-        padding: 0.375rem; /* 16px glyph in the 28px tile */
+    div.bx-std-pmen-item .bx-std-pmen-ic-title {
+        display: none; /* icon only */
     }
-    div.bx-std-pmen-item .bx-std-tile-btn > .sys-icon {
+    div.bx-std-pmen-item.bx-menu-tab-active .bx-std-pmen-ic-title {
+        display: block;
+        -webkit-line-clamp: unset;
+        max-width: none;
+        margin: 0 0.25rem 0 0.75rem; /* beside the tile, like the wide-screen list, with 4px of air before the tab's end */
+
         font-size: 1rem;
-        line-height: 1rem;
+        line-height: 1.5rem;
+        text-align: start;
+        white-space: nowrap;
+    }
+    .bx-dir-rtl div.bx-std-pmen-item.bx-menu-tab-active .bx-std-pmen-ic-title {
+        margin: 0 0.75rem 0 0.25rem;
     }
 }
 

studio/template/css/launcher.css

@@ -453,9 +453,32 @@ div.bx-std-widget-caption-jitter {
     width: calc(100% - 2.5rem);
     left: 1.25rem;
 }
-#bx-informer .bx-informer-msg{
-    background-color: rgba(255, 234, 193, 0.95);
+/* The informer floats over the tiles, so each message sits on a near-opaque base of the page colour; the type tint (the site's
+   bg-blue/yellow/red-50 and their dark 10% washes) goes on top as a background image, and the text colours stay the site's. */
+#bx-informer .bx-informer-msg {
     display: none;
+    background-color: rgb(255 255 255 / 0.95);
+}
+.dark #bx-informer .bx-informer-msg {
+    background-color: rgb(17 24 39 / 0.95);
+}
+#bx-informer .bx-informer-msg-info {
+    background-image: linear-gradient(rgb(239 246 255), rgb(239 246 255));
+}
+#bx-informer .bx-informer-msg-alert {
+    background-image: linear-gradient(rgb(254 252 232), rgb(254 252 232));
+}
+#bx-informer .bx-informer-msg-error {
+    background-image: linear-gradient(rgb(254 242 242), rgb(254 242 242));
+}
+.dark #bx-informer .bx-informer-msg-info {
+    background-image: linear-gradient(rgb(59 130 246 / 0.1), rgb(59 130 246 / 0.1));
+}
+.dark #bx-informer .bx-informer-msg-alert {
+    background-image: linear-gradient(rgb(234 179 8 / 0.1), rgb(234 179 8 / 0.1));
+}
+.dark #bx-informer .bx-informer-msg-error {
+    background-image: linear-gradient(rgb(239 68 68 / 0.1), rgb(239 68 68 / 0.1));
 }
 #bx-informer #sys-module-discontinued.bx-informer-msg,
 #bx-informer #sys-account-need-to-change-password.bx-informer-msg{

studio/template/css/page.css

@@ -396,7 +396,7 @@ div.bx-std-block-content > [id^="bx-grid-wrap-"] .bx-grid-table td:last-child {
 .dark form[name="adm-settings-form"] > .bx-form-advanced-wrapper > .bx-form-section-wrapper:last-child:not(:first-child),
 .dark div.bx-std-block-content > [id^="bx-grid-wrap-"] > .bx-grid-header,
 .dark div.bx-std-block-content > [id^="bx-grid-wrap-"] > .bx-grid-footer {
-    background-color: #0f0f0f; /* black page + the block's white/6 */
+    background-color: #1a1a1a; /* black page + the block's white/10, so the sticky row matches the block around it */
 }
 .dark form[name="adm-settings-form"] > .bx-form-advanced-wrapper > .bx-form-section-wrapper:last-child:not(:first-child),
 .dark div.bx-std-block-content > [id^="bx-grid-wrap-"] > .bx-grid-footer {

studio/template/page_content_2_col.html

@@ -1,5 +1,5 @@
 <div class="bx-std-page-columns-cnt bx-std-pc-stretch">
-    <div class="bx-std-page-column bx-std-page-menu bg-white/60 dark:bg-white/[0.06] ring-1 ring-inset ring-white/50 dark:ring-white/[0.025] smooth-shadow-sm">
+    <div class="bx-std-page-column bx-std-page-menu bg-white/60 dark:bg-white/10 ring-1 ring-inset ring-white/50 dark:ring-white/[0.025] smooth-shadow-sm">
         <div class="bx-std-page-column-cnt p-2 space-y-4">__page_menu_code__</div>
     </div>
     <main id="bx-std-page-content" class="bx-std-page-column bx-std-page-content bx-std-pc-stretch">

studio/template/str_product_v1.html

@@ -1,5 +1,5 @@
 <div class="bx-std-product bx-std-product-gallery" id="bx-std-product-__name__">
-	<div class="bx-std-product-cnt bx-std-product-gallery-cnt bx-def-padding-sec rounded-2xl bg-white/60 dark:bg-white/[0.06] ring-1 ring-inset ring-white/50 dark:ring-white/[0.025] smooth-shadow-sm">
+	<div class="bx-std-product-cnt bx-std-product-gallery-cnt bx-def-padding-sec rounded-2xl bg-white/60 dark:bg-white/10 ring-1 ring-inset ring-white/50 dark:ring-white/[0.025] smooth-shadow-sm">
             <!-- Title section -->
             <div class="bx-std-product-title">
                 <div class="bx-std-pt-cnt">

studio/template/str_product_v2.html

@@ -1,5 +1,5 @@
 <div class="bx-std-product bx-std-product-gallery" id="bx-std-product-__id__">
-    <div class="bx-std-product-cnt bx-std-product-gallery-cnt rounded-2xl bg-white/60 dark:bg-white/[0.06] ring-1 ring-inset ring-white/50 dark:ring-white/[0.025] smooth-shadow-sm">
+    <div class="bx-std-product-cnt bx-std-product-gallery-cnt rounded-2xl bg-white/60 dark:bg-white/10 ring-1 ring-inset ring-white/50 dark:ring-white/[0.025] smooth-shadow-sm">
         <!-- Cover section -->
         <div class="bx-std-product-cover m-1 rounded-xl overflow-hidden">
             <bx_if:no_image>

studio/template/str_update_v1.html

@@ -1,5 +1,5 @@
 <div class="bx-std-product bx-stdp-update bx-std-product-gallery bx-def-gal-unit-size" id="bx-std-update-__name__">
-    <div class="bx-std-product-cnt bx-std-product-gallery-cnt bx-def-margin-sec bx-def-padding-sec rounded-2xl bg-white/60 dark:bg-white/[0.06] ring-1 ring-inset ring-white/50 dark:ring-white/[0.025] smooth-shadow-sm">
+    <div class="bx-std-product-cnt bx-std-product-gallery-cnt bx-def-margin-sec bx-def-padding-sec rounded-2xl bg-white/60 dark:bg-white/10 ring-1 ring-inset ring-white/50 dark:ring-white/[0.025] smooth-shadow-sm">
         <!-- Title section -->
         <div class="bx-std-product-title">
             <div class="bx-std-pt-cnt">

studio/template/str_update_v2.html

@@ -1,5 +1,5 @@
 <div class="bx-std-product bx-stdp-update bx-std-product-gallery bx-def-gal-unit-size" id="bx-std-update-__name__">
-    <div class="bx-std-product-cnt bx-std-product-gallery-cnt bx-def-margin-sec rounded-2xl bg-white/60 dark:bg-white/[0.06] ring-1 ring-inset ring-white/50 dark:ring-white/[0.025] smooth-shadow-sm">
+    <div class="bx-std-product-cnt bx-std-product-gallery-cnt bx-def-margin-sec rounded-2xl bg-white/60 dark:bg-white/10 ring-1 ring-inset ring-white/50 dark:ring-white/[0.025] smooth-shadow-sm">
         <!-- Cover section -->
         <div class="bx-std-product-cover m-1 rounded-xl overflow-hidden">
             <bx_if:no_image>

template/css/tailwind.css

@@ -1342,7 +1342,7 @@
         @apply flex-1 min-w-0 font-medium;
     }
     .bx-informer-content a:not(.bx-btn) {
-        @apply font-semibold underline underline-offset-2 hover:opacity-80;
+        @apply font-semibold underline underline-offset-2 text-inherit hover:opacity-80; /* the message colour keeps 4.5:1 on the tinted plates; the site link blue does not on yellow */
     }
     .bx-informer-action {
         @apply flex-none whitespace-nowrap;
@@ -1532,7 +1532,7 @@
     /* Studio surfaces: translucent white (60% light, 6% dark) with an inset ring (white 50% light, 2.5% dark) and an outer shadow, no border. */
     .bx-std-block.cnt-ttl-bg,
     .bx-std-block.cnt-bg {
-        @apply bg-white/60 dark:bg-white/[0.06] ring-1 ring-inset ring-white/50 dark:ring-white/[0.025];
+        @apply bg-white/60 dark:bg-white/10 ring-1 ring-inset ring-white/50 dark:ring-white/[0.025];
         @apply rounded-3xl smooth-shadow-sm; /* 24px, the same corner as the header bar and the sidebar column */
     }
 
@@ -1577,7 +1577,7 @@
     }
 
     .bx-std .bx-def-color-bg-block {
-        @apply bg-white/60 dark:bg-white/[0.06] ring-1 ring-inset ring-white/50 dark:ring-white/[0.025] smooth-shadow-sm;
+        @apply bg-white/60 dark:bg-white/10 ring-1 ring-inset ring-white/50 dark:ring-white/[0.025] smooth-shadow-sm;
     }
     .bx-std .bx-popup-color-bg {
         @apply bg-white dark:bg-[#1a1a1a]; /* popups float over content, so the surface is solid: white, and in dark the black page plus white/10 composite (one step above the white/6 blocks) */