From 08659f8efdd34eab554b447b944c181769c79115 Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Sun, 16 Mar 2025 03:24:22 +0000
Subject: [PATCH] Fix panel styling by replacing CSS composes with proper
 inheritance

---
 admin/css/wp-allstars-admin.css | 55 +++++++++++++--------------------
 admin/settings.php              |  8 ++---
 2 files changed, 25 insertions(+), 38 deletions(-)

diff --git a/admin/css/wp-allstars-admin.css b/admin/css/wp-allstars-admin.css
index 06dab38..f8c158b 100644
--- a/admin/css/wp-allstars-admin.css
+++ b/admin/css/wp-allstars-admin.css
@@ -136,37 +136,49 @@ input:checked + .wp-toggle-slider:before {
 }
 
 /* Base Setting Styles (Shared between simple and expandable) */
-.wp-setting-base {
+.wp-setting-base, 
+.wp-setting-row,
+.wp-allstars-toggle {
     background: #fff;
     border: 1px solid #ccc;
     border-radius: 8px;
     margin-bottom: 15px;
 }
 
-.wp-setting-base:hover {
+.wp-setting-base:hover,
+.wp-setting-row:hover,
+.wp-allstars-toggle:hover {
     border-color: #2271b1;
     box-shadow: 0 2px 6px rgba(0,0,0,0.15);
 }
 
-.wp-setting-header {
+.wp-setting-header,
+.wp-allstars-toggle-header {
     padding: 15px;
     position: relative;
 }
 
-.wp-setting-main {
+.wp-setting-main,
+.wp-allstars-toggle-main {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-right: 15px;
 }
 
-.wp-setting-left {
+.wp-allstars-toggle-main {
+    padding-right: 40px; /* Extra space for chevron */
+}
+
+.wp-setting-left,
+.wp-allstars-toggle-left {
     display: flex;
     align-items: center;
     gap: 10px;
 }
 
-.wp-setting-label {
+.wp-setting-label,
+.wp-allstars-toggle label {
     font-size: 16px;
     font-weight: 600;
     color: #1d2327;
@@ -175,25 +187,17 @@ input:checked + .wp-toggle-slider:before {
     cursor: default;
 }
 
-.wp-setting-description {
+.wp-setting-description,
+.wp-allstars-toggle .description,
+.description {
     margin: 8px 0 0;
     color: #50575e;
     font-size: 14px;
     line-height: 1.6;
 }
 
-/* Simple Setting Row (No Panel) */
-.wp-setting-row {
-    composes: wp-setting-base;
-}
-
 /* Expandable Panel Component */
-.wp-allstars-toggle {
-    composes: wp-setting-base;
-}
-
 .wp-allstars-toggle-header {
-    composes: wp-setting-header;
     cursor: pointer;
 }
 
@@ -214,23 +218,6 @@ input:checked + .wp-toggle-slider:before {
     transform: translateY(-50%) rotate(180deg);
 }
 
-.wp-allstars-toggle-main {
-    composes: wp-setting-main;
-    padding-right: 40px; /* Extra space for chevron */
-}
-
-.wp-allstars-toggle-left {
-    composes: wp-setting-left;
-}
-
-.wp-allstars-toggle label {
-    composes: wp-setting-label;
-}
-
-.wp-allstars-toggle .description {
-    composes: wp-setting-description;
-}
-
 .wp-allstars-expand-settings {
     display: none;
 }
diff --git a/admin/settings.php b/admin/settings.php
index fc25682..8f59fd8 100644
--- a/admin/settings.php
+++ b/admin/settings.php
@@ -658,7 +658,7 @@ function wp_allstars_settings_page() {
                 <?php if ($active_tab == 'workflow'): ?>
                     <div class="wp-allstars-settings-content">
                         <div class="wp-allstars-toggle">
-                            <div class="wp-allstars-toggle-header">
+                            <div class="wp-allstars-toggle-header" aria-expanded="false">
                                 <div class="wp-allstars-toggle-main">
                                     <div class="wp-allstars-toggle-left">
                                         <div class="wp-toggle-switch">
@@ -672,10 +672,10 @@ function wp_allstars_settings_page() {
                                         </div>
                                         <label for="wp_allstars_auto_upload_images">
                                             <?php esc_html_e('Enable Auto Upload Images', 'wp-allstars'); ?>
-                    </label>
-                </div>
+                                        </label>
+                                    </div>
                                 </div>
-                                <p class="description">
+                                <p class="wp-setting-description">
                                     <?php esc_html_e('Import images that have external URLs into your Media Library when saving. Consider disabling during large data imports with many external image URLs.', 'wp-allstars'); ?>
                                 </p>
                             </div>