Changeset 3755228

Timestamp:

10/19/2026 04:48:49 PM (3 weeks ago)

Author:

vimagesericfabre

Message:

Update to 2.16.30

Location:

vefmusic/trunk

Files:

• assets/css/vefm-admin.css (modified) (4 diffs)
• assets/css/vefm-buttons.css (modified) (3 diffs)
• assets/css/vefm-frontend.css (modified) (3 diffs)
• assets/css/vefm-lightbox.css (modified) (2 diffs)
• includes/class-vefm-admin-help.php (modified) (2 diffs)
• includes/class-vefm-admin-ui.php (modified) (1 diff)
• includes/class-vefm-admin.php (modified) (16 diffs)
• includes/class-vefm-press-kit-admin.php (modified) (2 diffs)
• includes/core/class-vefm-button-shadow.php (modified) (1 diff)
• includes/core/class-vefm-button-states.php (modified) (6 diffs)
• includes/core/class-vefm-renderer.php (modified) (2 diffs)
• includes/core/class-vefm-settings-transfer.php (modified) (1 diff)
• includes/core/class-vefm-settings.php (modified) (1 diff)
• readme.txt (modified) (2 diffs)
• vefmusic.php (modified) (2 diffs)

vefmusic/trunk/assets/css/vefm-admin.css

@@ -576 +576 @@
 }
 
-/* Second level: the sub-tabs of the Style screen (General, Tracks, Albums, Shows, Next show). They keep
+/* Second level: the sub-tabs of a screen — Style (General, Tracks, Albums, Shows, Next show...) and the screens that gather Free and Pro (VEFmusic | VEFmusic Pro). They keep
    the classes WordPress knows (the script toggles `nav-tab-active`); only their look changes. */
-.vefm-admin .vefm-style-tabs.nav-tab-wrapper {
+.vefm-admin .vefm-style-tabs.nav-tab-wrapper,
+.vefm-admin .vefm-subtabs.nav-tab-wrapper {
         display: flex;
         flex-wrap: wrap;
@@ -587 +588 @@
 }
 
-.vefm-admin .vefm-style-tabs .nav-tab {
+.vefm-admin .vefm-style-tabs .nav-tab,
+.vefm-admin .vefm-subtabs .nav-tab {
         float: none;
         margin: 0;
@@ -601 +603 @@
 
 .vefm-admin .vefm-style-tabs .nav-tab:hover,
-.vefm-admin .vefm-style-tabs .nav-tab:focus {
+.vefm-admin .vefm-style-tabs .nav-tab:focus,
+.vefm-admin .vefm-subtabs .nav-tab:hover,
+.vefm-admin .vefm-subtabs .nav-tab:focus {
         color: var(--vefm-a-accent);
         background: color-mix(in srgb, var(--wp-admin-theme-color, #2271b1) 8%, #fff);
@@ -608 +612 @@
 .vefm-admin .vefm-style-tabs .nav-tab-active,
 .vefm-admin .vefm-style-tabs .nav-tab-active:hover,
-.vefm-admin .vefm-style-tabs .nav-tab-active:focus {
+.vefm-admin .vefm-style-tabs .nav-tab-active:focus,
+.vefm-admin .vefm-subtabs .nav-tab-active,
+.vefm-admin .vefm-subtabs .nav-tab-active:hover,
+.vefm-admin .vefm-subtabs .nav-tab-active:focus {
         color: #fff;
         background: var(--vefm-a-accent);
         border-color: var(--vefm-a-accent);
 }
+
+.vefm-subpanel[hidden] {
+        display: none;
+}

vefmusic/trunk/assets/css/vefm-buttons.css

@@ -12 +12 @@
  *
  * Adjustable from Style > General (or custom CSS):
+ *   --vefm-button-bg             background             (default: main color)
+ *   --vefm-button-text-color     text and icons
  *   --vefm-btn-hover-opacity     hover/focus strength   (default .85)
  *   --vefm-btn-disabled-opacity  disabled strength      (default .6)
@@ -27 +29 @@
 .vefm-ratings-submit {
         border: 0;
-        background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
+        background: var( --vefm-button-bg, var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) );
         color: var( --vefm-button-text-color, var( --wp--preset--color--background, #fff ) );
         cursor: pointer;
@@ -39 +41 @@
 .vefm-concert-ticket-link:focus,
 .vefm-concert-ticket-link:active {
-        background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
+        background: var( --vefm-button-bg, var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) );
         color: var( --vefm-button-text-color, var( --wp--preset--color--background, #fff ) );
         text-decoration: none;

vefmusic/trunk/assets/css/vefm-frontend.css

@@ -622 +622 @@
         flex: 0 0 auto;
         display: inline-flex;
-        justify-content: center;
-        margin: 0 auto;
         gap: 6px;
         border-radius: 20px;
@@ -757 +755 @@
         border: 0;
         border-radius: 50%;
-        background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
+        background: var( --vefm-button-bg, var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) );
         color: var( --vefm-button-text-color, var( --wp--preset--color--background, #fff ) );
         line-height: 1;
@@ -770 +768 @@
 .vefm-album-cover-flip .vefm-album-cover-toggle:focus,
 .vefm-album-cover-flip .vefm-album-cover-toggle:active {
-        background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
+        background: var( --vefm-button-bg, var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) );
         color: var( --vefm-button-text-color, var( --wp--preset--color--background, #fff ) );
 }

vefmusic/trunk/assets/css/vefm-lightbox.css

@@ -103 +103 @@
         border: 0;
         border-radius: 50%;
-        background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
+        background: var( --vefm-button-bg, var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) );
         color: var( --vefm-button-text-color, var( --wp--preset--color--background, #fff ) );
         line-height: 1;
@@ -116 +116 @@
 .vefm-lightbox .vefm-lightbox-button:focus,
 .vefm-lightbox .vefm-lightbox-button:active {
-        background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
+        background: var( --vefm-button-bg, var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) );
         color: var( --vefm-button-text-color, var( --wp--preset--color--background, #fff ) );
 }

vefmusic/trunk/includes/class-vefm-admin-help.php

@@ -451 +451 @@
                                 'overview',
                                 __( 'Overview', 'vefmusic' ),
-                                self::p( __( 'The simplest way to match the plugin to your site, valid everywhere (Gutenberg, Divi 5 and Elementor). Five sub-tabs: General, Tracks, Albums, Shows and Next show — each one adjustable separately.', 'vefmusic' ) )
-                                . self::p( __( 'A value left empty keeps the default. The main color, the font and the button text color set here are shared with VEFmusic Pro (cart, donations): no need to set them twice.', 'vefmusic' ) )
+                                self::p( __( 'The simplest way to match the plugin to your site, valid everywhere (Gutenberg, Divi 5 and Elementor). Six sub-tabs: General, Buttons, Tracks, Albums, Shows and Next show — each one adjustable separately.', 'vefmusic' ) )
+                                . self::p( __( 'A value left empty keeps the default. The main color, the font and the button colors set here are shared with VEFmusic Pro (cart, donations): no need to set them twice.', 'vefmusic' ) )
                         ),
                         self::topic(
@@ -461 +461 @@
                                                 array( __( 'Main color', 'vefmusic' ), __( 'the accent color of the blocks.', 'vefmusic' ) ),
                                                 array( __( 'Font', 'vefmusic' ), __( 'one default font for the whole site. Left empty, the blocks use the font of your theme.', 'vefmusic' ) ),
+                                        )
+                                )
+                        ),
+                        self::topic(
+                                'buttons',
+                                __( 'Buttons sub-tab', 'vefmusic' ),
+                                self::terms(
+                                        array(
+                                                array( __( 'Button colors', 'vefmusic' ), __( 'background, text, and the same two when the pointer is over a button, for all the buttons at once. Use them to reproduce the buttons of your theme. A color left empty keeps the default: the main color for the background, the theme\'s background color for the text, and on hover your theme\'s own button hover colors if it has any. A color you set always wins over the theme.', 'vefmusic' ) ),
                                                 array( __( 'Button shadow', 'vefmusic' ), __( 'one shadow for all the buttons. No color chosen means no shadow: the button style of your theme is kept.', 'vefmusic' ) ),
                                                 array( __( 'Button states', 'vefmusic' ), __( 'every button has the same look, only its shape differs. Set how much a button fades when the pointer is over it (or it has keyboard focus) and when it is disabled. Empty fields keep the defaults: 85% and 60%.', 'vefmusic' ) ),

vefmusic/trunk/includes/class-vefm-admin-ui.php

@@ -297 +297 @@
                 echo '</div>';
         }
+
+        /**
+         * One screen per subject: prints the content of a screen as one or several panels. A panel is
+         * a part of the screen (for instance "VEFmusic" and "VEFmusic Pro" on the Help screen). With a
+         * single panel the content is printed as it is, with nothing around it — so a site without Pro
+         * sees exactly what it always saw. With several, a row of pills switches between the panels,
+         * and a link ending with "#vefm-sub-{screen}-{key}" opens the matching panel directly.
+         *
+         * The panels of other plugins are added with the filter 'vefm_subpanels_{screen}'.
+         *
+         * @param string                           $screen Short name of the screen ("help", "diagnostic"...).
+         * @param array<string,array<string,mixed>> $panels Panel key => 'label' (string), 'callback' (callable).
+         * @return void
+         */
+        public static function render_subpanels( $screen, array $panels ) {
+                $screen = sanitize_key( $screen );
+                /**
+                 * Adds panels to a screen. Each panel: 'label' (string) and 'callback' (callable printing the
+                 * content, without the page header and without closing the page).
+                 *
+                 * @param array $panels Panel key => label, callback.
+                 */
+                $panels = apply_filters( 'vefm_subpanels_' . $screen, $panels );
+
+                if ( 1 === count( $panels ) ) {
+                        $panel = reset( $panels );
+                        call_user_func( $panel['callback'] );
+                        return;
+                }
+
+                echo '<h2 class="nav-tab-wrapper vefm-subtabs">';
+                $first = true;
+                foreach ( $panels as $key => $panel ) {
+                        printf(
+                                '<a href="#vefm-sub-%1$s-%2$s" class="nav-tab%3$s">%4$s</a>',
+                                esc_attr( $screen ),
+                                esc_attr( sanitize_key( $key ) ),
+                                $first ? ' nav-tab-active' : '',
+                                esc_html( $panel['label'] )
+                        );
+                        $first = false;
+                }
+                echo '</h2>';
+
+                $first = true;
+                foreach ( $panels as $key => $panel ) {
+                        printf(
+                                '<div id="vefm-sub-%1$s-%2$s" class="vefm-subpanel"%3$s>',
+                                esc_attr( $screen ),
+                                esc_attr( sanitize_key( $key ) ),
+                                $first ? '' : ' hidden'
+                        );
+                        call_user_func( $panel['callback'] );
+                        echo '</div>';
+                        $first = false;
+                }
+
+                VEFM_Admin::enqueue_inline_script(
+                        <<<'JS'
+jQuery( function ( $ ) {
+        var $links = $( '.vefm-subtabs a' );
+        function show( target ) {
+                $links.removeClass( 'nav-tab-active' ).filter( function () {
+                        return $( this ).attr( 'href' ) === target;
+                } ).addClass( 'nav-tab-active' );
+                $( '.vefm-subpanel' ).attr( 'hidden', true );
+                $( target ).removeAttr( 'hidden' );
+        }
+        $links.on( 'click', function ( e ) {
+                e.preventDefault();
+                var target = $( this ).attr( 'href' );
+                show( target );
+                if ( window.history && window.history.replaceState ) {
+                        window.history.replaceState( null, '', target );
+                }
+        } );
+        var hash = window.location.hash;
+        if ( hash && $links.filter( function () {
+                return $( this ).attr( 'href' ) === hash;
+        } ).length ) {
+                show( hash );
+        }
+} );
+JS,
+                        'vefm-subpanels',
+                        array( 'jquery' )
+                );
+        }
 }

vefmusic/trunk/includes/class-vefm-admin.php

@@ -507 +507 @@
                 );
                 if ( $pro_active ) {
-                        $parametres_tabs['vefmusic-pro-style']   = __( 'Pro Style', 'vefmusic' );
+                        // Pro Style is now a sub-tab of Style (added by VEFmusic Pro, see the 'vefm_style_tabs' action).
                         $parametres_tabs['vefmusic-pro-license'] = __( 'License', 'vefmusic' );
                 }
@@ -517 +517 @@
                 $vente_tabs = array();
                 if ( $pro_active ) {
+                        // What the owner opens every day (the sales and their figures) comes first; the settings
+                        // of the sales (payment, invoicing, shipping) follow.
                         $vente_tabs = array(
+                                'vefmusic-pro-orders'    => __( 'Completed sales', 'vefmusic' ),
+                                'vefmusic-pro-revenue'   => __( 'Statistics', 'vefmusic' ),
                                 'vefmusic-pro-payment'   => __( 'Payment', 'vefmusic' ),
                                 'vefmusic-pro-invoicing' => __( 'Invoicing', 'vefmusic' ),
@@ -529 +533 @@
                 }
                 $marketing_tabs['vefmusic-press-kit'] = __( 'Press kit', 'vefmusic' );
-                if ( $pro_active ) {
-                        // v2.11.0 (import VEFpressKit —) : formulaire de
-                        // contact/historique des demandes/statistiques de
-                        // téléchargement/liens limités/liste presse/kits multiples du
-                        // kit presse, basculés en Pro.
-                        $marketing_tabs['vefmusic-pro-press-kit'] = __( 'Press kit (Pro)', 'vefmusic' );
-                }
                 $marketing_tabs['vefmusic-ratings'] = __( 'Visitor ratings', 'vefmusic' );
                 $marketing_tabs['vefmusic-stats']   = __( 'Listening stats', 'vefmusic' );
-                if ( $pro_active ) {
-                        $marketing_tabs['vefmusic-pro-revenue'] = __( 'Statistics', 'vefmusic' );
-                        $marketing_tabs['vefmusic-pro-orders']  = __( 'Completed sales', 'vefmusic' );
-                }
 
                 $aide_tabs = array(
                         'vefmusic-help' => __( 'Help', 'vefmusic' ),
                 );
-                if ( $pro_active ) {
-                        $aide_tabs['vefmusic-pro-help'] = __( 'Pro Help', 'vefmusic' );
-                }
                 $aide_tabs['vefmusic-support']    = __( 'Support & feature requests', 'vefmusic' );
                 $aide_tabs['vefmusic-about']      = __( 'About', 'vefmusic' );
                 $aide_tabs['vefmusic-diagnostic'] = __( 'Diagnostics', 'vefmusic' );
-                if ( $pro_active ) {
-                        $aide_tabs['vefmusic-pro-diagnostic'] = __( 'Pro Diagnostics', 'vefmusic' );
-                }
 
                 // Order of the pages of the menu: what the owner works on first comes first (the menu entry
@@ -1008 +995 @@
                                         'style_accent'               => sanitize_text_field( wp_unslash( $_POST['style_accent'] ?? '' ) ),
                                         'style_button_text_color'    => sanitize_text_field( wp_unslash( $_POST['style_button_text_color'] ?? '' ) ),
+                                        // 2.16.29: button background and hover colors.
+                                        'style_button_bg_color'         => sanitize_text_field( wp_unslash( $_POST['style_button_bg_color'] ?? '' ) ),
+                                        'style_button_hover_bg_color'   => sanitize_text_field( wp_unslash( $_POST['style_button_hover_bg_color'] ?? '' ) ),
+                                        'style_button_hover_text_color' => sanitize_text_field( wp_unslash( $_POST['style_button_hover_text_color'] ?? '' ) ),
                                         // 2.15.51: global button shadow — see
                                         // VEFM_Button_Shadow (range clamped there).
@@ -1142 +1133 @@
 .vefm-alpha-label { font-size: 12px; color: #646970; min-width: 34px; display: inline-block; }
 .vefm-shadow-fields { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 0; }
-.vefm-shadow-field { display: inline-flex; flex-direction: column; gap: 2px; font-size: 12px; color: #646970; }',
+.vefm-shadow-field { display: inline-flex; flex-direction: column; gap: 2px; font-size: 12px; color: #646970; }
+.vefm-button-color { margin: 0 0 12px; }
+.vefm-button-color label { display: block; margin-bottom: 4px; font-weight: 600; }
+.vefm-style-savebar[hidden] { display: none; }
+.vefm-style-savebar, .vefmpro-style-panel > form > .submit { position: sticky; bottom: 0; z-index: 5; margin: 0 -1px; padding: .25rem 0; background: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ), #fff 35% ); }
+.vefm-style-savebar .submit, .vefmpro-style-panel > form > .submit { margin: 0; padding: .6rem 0; }',
                         'vefm-style-page-css'
                 );
@@ -1495 +1491 @@
                 self::render_page_header( __( 'Diagnostics', 'vefmusic' ) );
                 self::render_group_tabs( 'parametres', 'vefmusic-diagnostic' );
-                $this->render_diagnostic_tab();
+                VEFM_Admin_UI::render_subpanels(
+                        'diagnostic',
+                        array(
+                                'free' => array(
+                                        'label'    => 'VEFmusic',
+                                        'callback' => array( $this, 'render_diagnostic_tab' ),
+                                ),
+                        )
+                );
                 echo '</div>';
         }
@@ -1505 +1509 @@
                 self::render_page_header( __( 'Help', 'vefmusic' ) );
                 self::render_group_tabs( 'aide', 'vefmusic-help' );
-                $this->render_help_tab();
+                VEFM_Admin_UI::render_subpanels(
+                        'help',
+                        array(
+                                'free' => array(
+                                        'label'    => 'VEFmusic',
+                                        'callback' => array( $this, 'render_help_tab' ),
+                                ),
+                        )
+                );
                 echo '</div>';
         }
@@ -1565 +1577 @@
                 <h2 class="nav-tab-wrapper vefm-style-tabs">
                         <a href="#vefm-style-general" class="nav-tab nav-tab-active"><?php esc_html_e( 'General', 'vefmusic' ); ?></a>
+                        <a href="#vefm-style-buttons" class="nav-tab"><?php esc_html_e( 'Buttons', 'vefmusic' ); ?></a>
                         <a href="#vefm-style-tracks" class="nav-tab"><?php esc_html_e( 'Tracks', 'vefmusic' ); ?></a>
                         <a href="#vefm-style-albums" class="nav-tab"><?php esc_html_e( 'Albums', 'vefmusic' ); ?></a>
                         <a href="#vefm-style-concerts" class="nav-tab"><?php esc_html_e( 'Shows', 'vefmusic' ); ?></a>
                         <a href="#vefm-style-featured-concert" class="nav-tab"><?php esc_html_e( 'Next show', 'vefmusic' ); ?></a>
+                        <?php
+                        /**
+                         * Lets an add-on (VEFmusic Pro) add its own sub-tab to the Style screen.
+                         * The matching panel is printed by the 'vefm_style_panels' action, after the form.
+                         */
+                        do_action( 'vefm_style_tabs' );
+                        ?>
                 </h2>
 
@@ -1585 +1605 @@
                                         </tr>
                                         <tr>
-                                                <th><label for="style_button_text_color"><?php esc_html_e( 'Button text color', 'vefmusic' ); ?></label></th>
+                                                <th><label for="style_font_family"><?php esc_html_e( 'Font', 'vefmusic' ); ?></label></th>
                                                 <td>
-                                                        <input type="hidden" id="style_button_text_color" name="style_button_text_color" value="<?php echo esc_attr( $s['style_button_text_color'] ); ?>" class="vefm-color-field" data-default-color="" />
-                                                        <p class="description"><?php esc_html_e( 'Text and icons of every VEFmusic button (and VEFmusic Pro\'s) — unchecked follows the theme\'s background color, white by default.', 'vefmusic' ); ?></p>
+                                                        <input type="text" id="style_font_family" name="style_font_family" value="<?php echo esc_attr( $s['style_font_family'] ); ?>" class="regular-text" placeholder="'Poppins', sans-serif" />
+                                                        <p class="description">
+                                                                <?php esc_html_e( 'Optional — the theme\'s font already applies by default if this field is left empty. Enter it as in CSS: name in single quotes, then a fallback font (e.g. \'Poppins\', sans-serif).', 'vefmusic' ); ?>
+                                                                <br />
+                                                                <?php esc_html_e( 'Finer control is possible directly in Divi: every VEFmusic module has its own Design > Text tab, with a real native Divi font picker (Google Fonts included) — already working, nothing to configure here. This field is only useful if you want one default font shared across the whole site, without setting it module by module.', 'vefmusic' ); ?>
+                                                        </p>
+                                                </td>
+                                        </tr>
+                                </table>
+                        </div>
+
+                        <div id="vefm-style-buttons" class="vefm-style-panel" hidden>
+                                <p class="description"><?php esc_html_e( 'The look of every VEFmusic button (and VEFmusic Pro\'s). Leave a field empty and nothing is forced: the button keeps the plugin\'s default look and, on hover, your theme\'s own button hover style if it has one. Fill a field and your choice wins over the theme, on every button.', 'vefmusic' ); ?></p>
+                                <table class="form-table">
+                                        <tr>
+                                                <th><?php esc_html_e( 'Button colors', 'vefmusic' ); ?></th>
+                                                <td>
+                                                        <?php
+                                                        $vefm_button_colors = array(
+                                                                'style_button_bg_color'         => __( 'Background', 'vefmusic' ),
+                                                                'style_button_text_color'       => __( 'Text', 'vefmusic' ),
+                                                                'style_button_hover_bg_color'   => __( 'Background on hover', 'vefmusic' ),
+                                                                'style_button_hover_text_color' => __( 'Text on hover', 'vefmusic' ),
+                                                        );
+                                                        foreach ( $vefm_button_colors as $vefm_button_color_key => $vefm_button_color_label ) :
+                                                                ?>
+                                                                <div class="vefm-button-color">
+                                                                        <label for="<?php echo esc_attr( $vefm_button_color_key ); ?>"><?php echo esc_html( $vefm_button_color_label ); ?></label>
+                                                                        <input type="hidden" id="<?php echo esc_attr( $vefm_button_color_key ); ?>" name="<?php echo esc_attr( $vefm_button_color_key ); ?>" value="<?php echo esc_attr( $s[ $vefm_button_color_key ] ); ?>" class="vefm-color-field" data-default-color="" />
+                                                                </div>
+                                                        <?php endforeach; ?>
+                                                        <p class="description"><?php esc_html_e( 'Colors of every VEFmusic button (and VEFmusic Pro\'s), to match the buttons of your theme. A field left empty keeps the default: the background follows the main color, the text follows the theme\'s background color (white by default), and on hover your theme\'s own button hover colors apply if it has any, along with the opacity set in Button states. A color you set here always wins over the theme.', 'vefmusic' ); ?></p>
                                                 </td>
                                         </tr>
@@ -1636 +1686 @@
                                                 </td>
                                         </tr>
-                                        <tr>
-                                                <th><label for="style_font_family"><?php esc_html_e( 'Font', 'vefmusic' ); ?></label></th>
-                                                <td>
-                                                        <input type="text" id="style_font_family" name="style_font_family" value="<?php echo esc_attr( $s['style_font_family'] ); ?>" class="regular-text" placeholder="'Poppins', sans-serif" />
-                                                        <p class="description">
-                                                                <?php esc_html_e( 'Optional — the theme\'s font already applies by default if this field is left empty. Enter it as in CSS: name in single quotes, then a fallback font (e.g. \'Poppins\', sans-serif).', 'vefmusic' ); ?>
-                                                                <br />
-                                                                <?php esc_html_e( 'Finer control is possible directly in Divi: every VEFmusic module has its own Design > Text tab, with a real native Divi font picker (Google Fonts included) — already working, nothing to configure here. This field is only useful if you want one default font shared across the whole site, without setting it module by module.', 'vefmusic' ); ?>
-                                                        </p>
-                                                </td>
-                                        </tr>
                                 </table>
                         </div>
@@ -1874 +1913 @@
                         </div>
 
-                        <?php submit_button( __( 'Save', 'vefmusic' ) ); ?>
+                        <div class="vefm-style-savebar">
+                                <?php submit_button( __( 'Save', 'vefmusic' ) ); ?>
+                        </div>
                 </form>
                 <?php
+                /**
+                 * Prints the panels of the sub-tabs added with 'vefm_style_tabs'. They sit OUTSIDE the form of
+                 * this screen: each one carries its own form, its own nonce and its own save button, so a
+                 * save never touches the settings of another panel. Each panel is a <div> with the classes
+                 * "vefm-style-panel" and the attribute data-vefm-own-form, and starts hidden.
+                 */
+                do_action( 'vefm_style_panels' );
                 $vefm_opacity_label = esc_js( __( 'Opacity', 'vefmusic' ) );
                 $vefm_style_js       = <<<'JS'
@@ -1981 +2029 @@
                         } );
 
-                        // Sous-onglets internes à cette page — un seul formulaire, un
-                        // seul bouton Enregistrer en bas, quel que soit l’onglet actif
-                        // (tous les champs restent dans le DOM, juste masqués).
+                        // Sous-onglets internes à cette page. Les panneaux du formulaire Free
+                        // partagent un seul bouton Enregistrer (tous les champs restent dans le
+                        // DOM, juste masqués) ; un panneau ajouté par un module (data-vefm-own-form)
+                        // a son propre formulaire et son propre bouton : la barre Enregistrer de
+                        // Free est alors masquée pour ne pas laisser croire qu’elle l’enregistre.
+                        function vefmShowStylePanel( target ) {
+                                var $panel = $( target );
+                                $( '.vefm-style-tabs a' ).removeClass( 'nav-tab-active' ).filter( function () {
+                                        return $( this ).attr( 'href' ) === target;
+                                } ).addClass( 'nav-tab-active' );
+                                $( '.vefm-style-panel' ).attr( 'hidden', true );
+                                $panel.removeAttr( 'hidden' );
+                                $( '.vefm-style-savebar' ).prop( 'hidden', $panel.is( '[data-vefm-own-form]' ) );
+                        }
                         $( '.vefm-style-tabs a' ).on( 'click', function ( e ) {
                                 e.preventDefault();
                                 var target = $( this ).attr( 'href' );
-                                $( '.vefm-style-tabs a' ).removeClass( 'nav-tab-active' );
-                                $( this ).addClass( 'nav-tab-active' );
-                                $( '.vefm-style-panel' ).attr( 'hidden', true );
-                                $( target ).removeAttr( 'hidden' );
+                                vefmShowStylePanel( target );
+                                if ( window.history && window.history.replaceState ) {
+                                        window.history.replaceState( null, '', target );
+                                }
                         } );
+                        // Unsaved changes: the save bar stays visible at the bottom of the screen, and leaving
+                        // the page after a change (not yet saved) asks for confirmation. The state of each form
+                        // is compared with the one taken once the page, colour pickers included, is ready —
+                        // the colour pickers set their hidden field by script, which fires no event.
+                        var vefmForms = $( '.vefm-style-savebar' ).closest( 'form' ).add( '.vefmpro-style-panel form' );
+                        var vefmSnap = [];
+                        $( window ).on( 'load', function () {
+                                vefmForms.each( function ( i ) {
+                                        vefmSnap[ i ] = $( this ).serialize();
+                                } );
+                        } );
+                        var vefmSaving = false;
+                        vefmForms.on( 'submit', function () {
+                                vefmSaving = true;
+                        } );
+                        $( window ).on( 'beforeunload', function ( e ) {
+                                if ( vefmSaving ) {
+                                        return;
+                                }
+                                var dirty = false;
+                                vefmForms.each( function ( i ) {
+                                        if ( undefined !== vefmSnap[ i ] && $( this ).serialize() !== vefmSnap[ i ] ) {
+                                                dirty = true;
+                                        }
+                                } );
+                                if ( dirty ) {
+                                        e.preventDefault();
+                                        return '';
+                                }
+                        } );
+                        // Direct link to a sub-tab (e.g. the old Pro Style address redirects here).
+                        var vefmHash = window.location.hash;
+                        if ( vefmHash && $( '.vefm-style-tabs a' ).filter( function () {
+                                return $( this ).attr( 'href' ) === vefmHash;
+                        } ).length ) {
+                                vefmShowStylePanel( vefmHash );
+                        }
                 } );
 JS;
@@ -2432 +2528 @@
          * que le lien entre l’onglet et le rendu réel.
          */
-        private function render_diagnostic_tab() {
+        public function render_diagnostic_tab() {
                 VEFM_Diagnostic::render();
         }
 
-        private function render_help_tab() {
+        public function render_help_tab() {
                 $groups = self::get_groups();
 
@@ -2657 +2753 @@
                         <p class="description">
                                 <?php if ( class_exists( 'VEFM_Pro' ) && VEFM_Pro::is_active() ) : ?>
-                                        <?php echo wp_kses_post( sprintf( /* translators: %s: lien vers l'onglet Press kit (Pro) */ __( 'An optional contact form before download, download statistics, ready-made PDF templates, limited-use links, a press contact list, and additional independent kits are all available with VEFmusic Pro — see the %s tab.', 'vefmusic' ), '<a href="' . esc_url( admin_url( 'admin.php?page=vefmusic-pro-press-kit' ) ) . '">' . esc_html__( 'Press kit (Pro)', 'vefmusic' ) . '</a>' ) ); ?>
+                                        <?php echo wp_kses_post( sprintf( /* translators: %s: link to the VEFmusic Pro panel of the Press kit screen */ __( 'An optional contact form before download, download statistics, ready-made PDF templates, limited-use links, a press contact list, and additional independent kits are all available with VEFmusic Pro — see the %s panel of this screen.', 'vefmusic' ), '<a href="' . esc_url( admin_url( 'admin.php?page=vefmusic-press-kit#vefm-sub-press-kit-pro' ) ) . '">' . esc_html__( 'VEFmusic Pro', 'vefmusic' ) . '</a>' ) ); ?>
                                 <?php else : ?>
                                         <?php esc_html_e( 'An optional contact form before download, download statistics, ready-made PDF templates, limited-use links, a press contact list, and additional independent kits are all available with VEFmusic Pro — see the About tab for details.', 'vefmusic' ); ?>
@@ -2720 +2816 @@
                         <p class="description"><?php esc_html_e( 'Tracks and Albums sub-tabs: background and text colors of each track, main (accent) color, VU meter peak color, gap between tracks, padding inside each track and corner radius. A value left empty keeps the default.', 'vefmusic' ); ?></p>
                         <p class="description"><?php esc_html_e( 'Block titles (album, shows) use the theme\'s heading size and weight by default. A title size set in VEFmusic > Settings > Style replaces that size for the blocks concerned.', 'vefmusic' ); ?></p>
-                        <p class="description"><?php esc_html_e( 'The --vefm-accent, --vefm-font-family and --vefm-button-text-color variables set here are shared with VEFmusic Pro (cart, donations) — no need to set them twice.', 'vefmusic' ); ?></p>
+                        <p class="description"><?php esc_html_e( 'The --vefm-accent, --vefm-font-family, --vefm-button-bg and --vefm-button-text-color variables set here are shared with VEFmusic Pro (cart, donations) — no need to set them twice.', 'vefmusic' ); ?></p>
                         <p class="description"><?php esc_html_e( 'Button shadow (General sub-tab): one shadow for all buttons of VEFmusic and VEFmusic Pro — horizontal and vertical offset, blur, spread and color with opacity. No color chosen = no shadow, the theme\'s button style is kept. Icon-only controls (volume, lyrics, quantity) never get it. PayPal buttons are drawn by PayPal itself and can\'t receive it.', 'vefmusic' ); ?></p>
                 <p class="description"><?php esc_html_e( 'For the font, two options: set it once for the whole site in VEFmusic > Settings > Style (General tab), or more finely block by block directly in Divi — every VEFmusic module has its own Design > Text tab with a real native Divi font picker (Google Fonts included), already available with nothing to configure.', 'vefmusic' ); ?></p>
@@ -2729 +2825 @@
                                 <li><strong><?php esc_html_e( 'Divi 5', 'vefmusic' ); ?></strong> — <?php esc_html_e( 'module\'s Advanced tab > Custom CSS, with the same variables. The show poster\'s height now adjusts automatically to the content, no setting needed.', 'vefmusic' ); ?>
                                         <ul class="vefm-list vefm-list--circle">
-                                                <li><?php esc_html_e( 'Shared (all blocks)', 'vefmusic' ); ?> — <code>--vefm-accent</code>, <code>--vefm-font-family</code>, <code>--vefm-button-shadow</code>, <code>--vefm-button-text-color</code>, <code>--vefm-btn-hover-opacity</code>, <code>--vefm-btn-disabled-opacity</code></li>
+                                                <li><?php esc_html_e( 'Shared (all blocks)', 'vefmusic' ); ?> — <code>--vefm-accent</code>, <code>--vefm-font-family</code>, <code>--vefm-button-shadow</code>, <code>--vefm-button-bg</code>, <code>--vefm-button-text-color</code>, <code>--vefm-btn-hover-opacity</code>, <code>--vefm-btn-disabled-opacity</code></li>
                                                 <li><?php esc_html_e( 'Font sizes (all blocks)', 'vefmusic' ); ?> — <code>--vefm-font-size-small</code>, <code>--vefm-font-size-normal</code>, <code>--vefm-font-size-medium</code>, <code>--vefm-font-size-large</code>, <code>--vefm-font-size-x-large</code>, <code>--vefm-font-size-xx-large</code> <?php esc_html_e( '(fallback scale, only used where the active theme doesn\'t define its own font size presets — and always for the show date badge. Shared with VEFmusic Pro).', 'vefmusic' ); ?></li>
                                                 <li><?php esc_html_e( 'Tracks / Album (player) / Random Player', 'vefmusic' ); ?> — <code>--vefm-vu-peak</code>, <code>--vefm-track-bg</code>, <code>--vefm-track-text</code>, <code>--vefm-track-padding</code>, <code>--vefm-track-radius</code>, <code>--vefm-track-gap</code> <?php esc_html_e( '(Random Player has no dedicated Style tab of its own — it reuses --vefm-track-bg, --vefm-track-text and --vefm-track-padding from the Tracks sub-tab, not the others; set those to change how the Random Player looks).', 'vefmusic' ); ?></li>

vefmusic/trunk/includes/class-vefm-press-kit-admin.php

@@ -77 +77 @@
                 VEFM_Admin::render_group_tabs( 'marketing', 'vefmusic-press-kit' );
 
+                // Editing an additional kit (VEFmusic Pro) takes the whole screen: no panels around it.
+                /**
+                 * Lets VEFmusic Pro print the whole screen (the editor of an additional kit) and return true.
+                 *
+                 * @param bool $printed Whether a screen was printed.
+                 */
+                if ( isset( $_GET['kit'] ) && apply_filters( 'vefm_press_kit_custom_page', false ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- plain navigation, nothing is saved.
+                        echo '</div>';
+                        return;
+                }
+
+                // One screen per subject: the press kit of VEFmusic Pro is a panel of this screen.
+                VEFM_Admin_UI::render_subpanels(
+                        'press-kit',
+                        array(
+                                'free' => array(
+                                        'label'    => 'VEFmusic',
+                                        'callback' => array( $this, 'render_body' ),
+                                ),
+                        )
+                );
+
+                echo '</div>';
+        }
+
+        /**
+         * Content of the press kit screen of VEFmusic (a panel of the screen).
+         */
+        public function render_body() {
                 if ( isset( $_GET['vefm_msg'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- lecture seule d'un message de confirmation, aucune action.
                         $type  = isset( $_GET['vefm_msg_type'] ) && 'error' === sanitize_key( wp_unslash( $_GET['vefm_msg_type'] ) ) ? 'error' : 'success'; // phpcs:ignore WordPress.Security.NonceVerification.Recommended
@@ -111 +140 @@
                         $this->render_pro_upsell_notice();
                 }
-
-                echo '</div>';
         }
 

vefmusic/trunk/includes/core/class-vefm-button-shadow.php

@@ -117 +117 @@
                  * @param string[] $selectors CSS selectors, one button type each.
                  */
-                $selectors = apply_filters( 'vefm_button_shadow_selectors', self::SELECTORS );
-                $clean     = array();
-                foreach ( (array) $selectors as $selector ) {
-                        // A selector never needs braces, semicolons, at-rules or
-                        // markup: stripping them keeps a filtered value from breaking
-                        // out of the rule.
-                        $selector = trim( preg_replace( '/[{};@<\\\\]/', '', wp_strip_all_tags( (string) $selector ) ) );
-                        if ( '' !== $selector ) {
-                                $clean[] = $selector;
-                        }
-                }
-                return array_values( array_unique( $clean ) );
+                return VEFM_Button_States::clean_selectors( apply_filters( 'vefm_button_shadow_selectors', self::SELECTORS ) );
         }
 

vefmusic/trunk/includes/core/class-vefm-button-states.php

@@ -1 +1 @@
 <?php
 /**
- * Global button states (hover and disabled strength).
+ * Global button states (hover and disabled strength, hover colors).
  *
  * Every VEFmusic button shares one look (assets/css/vefm-buttons.css);
@@ -8 +8 @@
  *
  * - hover / keyboard-focus opacity (--vefm-btn-hover-opacity);
- * - disabled opacity (--vefm-btn-disabled-opacity).
+ * - disabled opacity (--vefm-btn-disabled-opacity);
+ * - background and text color of a filled button on hover / keyboard focus
+ *   (printed as rules, only when set, see build_css()).
  *
  * Plain values in, CSS out, like VEFM_Button_Shadow, so VEFmusic Pro
@@ -45 +47 @@
                 'disabled' => 60,
         );
+
+        /**
+         * Cleans a list of selectors coming from a filter: a selector never
+         * needs braces, semicolons, at-rules or markup, and stripping them keeps
+         * a filtered value from breaking out of the rule.
+         *
+         * @param mixed $selectors Selectors, one button type each.
+         * @return string[] Unique, cleaned selectors.
+         */
+        public static function clean_selectors( $selectors ) {
+                $clean = array();
+                foreach ( (array) $selectors as $selector ) {
+                        $selector = trim( preg_replace( '/[{};@<\\\\]/', '', wp_strip_all_tags( (string) $selector ) ) );
+                        if ( '' !== $selector ) {
+                                $clean[] = $selector;
+                        }
+                }
+                return array_values( array_unique( $clean ) );
+        }
+
+        /**
+         * Filled buttons, the ones that take a background and a hover color:
+         * the Free ones plus those added by other plugins (VEFmusic Pro)
+         * through the filter. Outlined buttons and icon-only controls are left
+         * out: a background on hover would turn them into filled ones.
+         *
+         * @return string[] Cleaned selectors.
+         */
+        public static function get_filled_selectors() {
+                /**
+                 * Filters the filled buttons that receive the hover colors.
+                 *
+                 * @since 2.16.29
+                 *
+                 * @param string[] $selectors CSS selectors, one button type each.
+                 */
+                return self::clean_selectors( apply_filters( 'vefm_button_filled_selectors', VEFM_Button_Shadow::SELECTORS ) );
+        }
+
+        /**
+         * Sanitizes one color for printing: hex, rgb()/hsl(), var(--x) and
+         * named colors pass, anything else (quotes, braces, semicolons) is dropped.
+         *
+         * @param mixed $raw Saved value.
+         * @return string Safe color, or '' when empty.
+         */
+        public static function sanitize_color( $raw ) {
+                return trim( preg_replace( '/[^#a-zA-Z0-9(),.%\s-]/', '', (string) $raw ) );
+        }
 
         /**
@@ -87 +138 @@
          * override the default carried by vefm-buttons.css.
          *
-         * @param array $settings Keys: hover, disabled (percent or '').
-         * @return string CSS rule.
+         * @param array $settings Keys: hover, disabled (percent or ''), hover_bg,
+         *                        hover_text (color or '').
+         * @return string CSS rules.
          */
         public static function build_css( array $settings ) {
@@ -101 +153 @@
                         }
                 }
-                return '' === $vars ? '' : ':root{' . $vars . '}';
+                $css = '' === $vars ? '' : ':root{' . $vars . '}';
+
+                // Hover / keyboard-focus colors of the filled buttons. One rule per
+                // selector (an invalid selector would drop a grouped rule for every
+                // button); ":root" raises the specificity above each component's own
+                // hover rule, so the setting wins everywhere.
+                $declarations = '';
+                $hover_bg     = isset( $settings['hover_bg'] ) ? self::sanitize_color( $settings['hover_bg'] ) : '';
+                $hover_text   = isset( $settings['hover_text'] ) ? self::sanitize_color( $settings['hover_text'] ) : '';
+                if ( '' !== $hover_bg ) {
+                        $declarations .= 'background:' . $hover_bg . ';';
+                }
+                if ( '' !== $hover_text ) {
+                        $declarations .= 'color:' . $hover_text . ';';
+                }
+                if ( '' !== $declarations ) {
+                        foreach ( self::get_filled_selectors() as $selector ) {
+                                $css .= ':root ' . $selector . ':is(:hover,:focus-visible):not(:disabled,.vefm-play--disabled){' . $declarations . '}';
+                        }
+                }
+                return $css;
         }
 
@@ -107 +179 @@
          * Reads the saved settings.
          *
-         * @return array Keys: hover, disabled.
+         * @return array Keys: hover, disabled, hover_bg, hover_text.
          */
         public static function get_settings() {
                 return array(
-                        'hover'    => VEFM_Settings::get( 'style_button_hover_opacity', '' ),
-                        'disabled' => VEFM_Settings::get( 'style_button_disabled_opacity', '' ),
+                        'hover'      => VEFM_Settings::get( 'style_button_hover_opacity', '' ),
+                        'disabled'   => VEFM_Settings::get( 'style_button_disabled_opacity', '' ),
+                        'hover_bg'   => VEFM_Settings::get( 'style_button_hover_bg_color', '' ),
+                        'hover_text' => VEFM_Settings::get( 'style_button_hover_text_color', '' ),
                 );
         }

vefmusic/trunk/includes/core/class-vefm-renderer.php

@@ -200 +200 @@
                                 'fontFamily'            => VEFM_Settings::get( 'style_font_family', '' ),
                                 'buttonTextColor'       => VEFM_Settings::get( 'style_button_text_color', '' ),
+                                'buttonBgColor'         => VEFM_Settings::get( 'style_button_bg_color', '' ),
                         )
                 );
@@ -408 +409 @@
                         // même principe accentColor ci-dessus, partagé avec Pro.
                         'buttonTextColor'    => '--vefm-button-text-color',
+                        // 2.16.29: button background (empty = main color).
+                        'buttonBgColor'      => '--vefm-button-bg',
                         'vuPeakColor'        => '--vefm-vu-peak',
                         'concertBadgeColor'  => '--vefm-concert-badge',

vefmusic/trunk/includes/core/class-vefm-settings-transfer.php

@@ -86 +86 @@
                                         // export (setting added 15/09/2026, list not updated).
                                         'style_button_text_color',
+                                        'style_button_bg_color',
+                                        'style_button_hover_bg_color',
+                                        'style_button_hover_text_color',
                                         'style_button_shadow_color',
                                         'style_button_shadow_x',

vefmusic/trunk/includes/core/class-vefm-settings.php

@@ -152 +152 @@
                         // séparé, même principe déjà établi pour ces deux-là.
                         'style_button_text_color' => '',
+                        // 2.16.29: button background and hover colors. Empty = unchanged
+                        // look (background follows the main color, no color change on hover).
+                        'style_button_bg_color'         => '',
+                        'style_button_hover_bg_color'   => '',
+                        'style_button_hover_text_color' => '',
                         // 2.15.51: global button shadow. Empty color = no
                         // shadow at all (theme button styles untouched); empty

vefmusic/trunk/readme.txt

@@ -6 +6 @@
 Tested up to: 7.1
 Requires PHP: 8.3
-Stable tag: 2.16.27
+Stable tag: 2.16.30
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -125 +125 @@
 == Changelog ==
 
+= 2.16.30 =
+* New: Style: the Save button stays visible at the bottom of the screen, and leaving the page with unsaved changes asks for confirmation.
+* Changed: Style: the button settings (colors, shadow, states) have their own "Buttons" sub-tab. Same settings, nothing is lost.
+* Changed: Style > Buttons now says what follows your theme and what the plugin forces: a field left empty keeps the default look and the theme's own hover style; a color you set always wins.
+* Changed: one screen per subject. Help, Diagnostics and Press kit can now carry the content of VEFmusic Pro in a second panel of the same screen, and the Pro style settings become a Style sub-tab. Without Pro, nothing changes.
+
+= 2.16.29 =
+* New: Style > General > Button colors. Set the background, the text, the background on hover and the text on hover of all the buttons (VEFmusic Pro's included) to reproduce the buttons of your theme. A field left empty keeps the current look: the background follows the main color and nothing changes color on hover. The button text color setting now lives in this group.
+* Changed: the buttons share their background and hover rules in fewer places, so the stylesheets are lighter and easier to maintain. No visual change.
+
+= 2.16.28 =
+* Fix: removed redundant centering rules on the cart and "Buy the full album" buttons. No visual change.
+
 = 2.16.27 =
 * Maintenance: code comments cleaned up. No change in behavior.

vefmusic/trunk/vefmusic.php

@@ -3 +3 @@
  * Plugin Name:       VEFmusic
  * Description:       Free plugin for a band’s website: audio player, album showcase, show calendar, visitor ratings, SEO structured data. Compatible with Gutenberg, Divi 5 and Elementor, no shortcode. No sales features — see VEFmusic Pro (v-images.com) to sell tracks/albums/merch, manage ticketing or accept donations.
- * Version:           2.16.27
+ * Version:           2.16.30
  * Requires at least: 6.0
  * Requires PHP:      8.3
@@ -55 +55 @@
 // ---------------------------------------------------------------------------
 
-define( 'VEFM_VERSION', '2.16.27' );
+define( 'VEFM_VERSION', '2.16.30' );
 define( 'VEFM_PLUGIN_FILE', __FILE__ );
 define( 'VEFM_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );