marcus/wpa-superstar-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix panel styling by replacing CSS composes with proper inheritance

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-16 03:24:22 +00:00
parent 81e464b0fb
commit 08659f8efd
2 changed files with 25 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
admin/css/wp-allstars-admin.css
View File

@ -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;
}

4
admin/settings.php
View File

@ -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">
@ -675,7 +675,7 @@ function wp_allstars_settings_page() {
</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>