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

Fix tab navigation styling and CSS class consistency. Update all wp-allstars and wpa- prefixes to seoprostack prefix for CSS classes, text domains, and selectors.

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-24 03:51:56 +00:00
parent 3cf5f63174
commit a7537a000c
3 changed files with 41 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
admin/css/seoprostack-admin.css
View File

@ -104,7 +104,7 @@
position: absolute; position: absolute;
} }
.wp-toggle-slider { .seoprostack-toggle-slider {
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
top: 0; top: 0;
@ -116,7 +116,7 @@
border-radius: 20px; border-radius: 20px;
} }
.wp-toggle-slider:before { .seoprostack-toggle-slider:before {
position: absolute; position: absolute;
content: ""; content: "";
height: 16px; height: 16px;
@ -129,27 +129,27 @@
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
} }
input:checked + .wp-toggle-slider { input:checked + .seoprostack-toggle-slider {
background-color: #2271b1; background-color: #2271b1;
} }
input:checked + .wp-toggle-slider:before { input:checked + .seoprostack-toggle-slider:before {
transform: translateX(16px); transform: translateX(16px);
} }
/* Base Setting Styles (Shared between simple and expandable) */ /* Base Setting Styles (Shared between simple and expandable) */
.wp-setting-base, .seoprostack-setting-base,
.wp-setting-row, .seoprostack-setting-row,
.wp-allstars-toggle { .seoprostack-toggle {
background: #fff; background: #fff;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 8px; border-radius: 8px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.wp-setting-base:hover, .seoprostack-setting-base:hover,
.wp-setting-row:hover, .seoprostack-setting-row:hover,
.wp-allstars-toggle:hover { .seoprostack-toggle:hover {
border-color: #2271b1; border-color: #2271b1;
box-shadow: 0 2px 6px rgba(0,0,0,0.15); box-shadow: 0 2px 6px rgba(0,0,0,0.15);
} }

10
admin/css/seoprostack-plugins.css
View File

@ -1,5 +1,5 @@
/* Plugin Browser Styles */ /* Plugin Browser Styles */
.wp-allstars-wrap .wp-allstars-plugin-browser { .seoprostack-wrap .seoprostack-plugin-browser {
margin: 0 -8px !important; margin: 0 -8px !important;
padding: 0 8px !important; padding: 0 8px !important;
width: 100% !important; width: 100% !important;
@ -7,7 +7,7 @@
} }
/* Plugin List Container */ /* Plugin List Container */
.wp-allstars-wrap #wpa-plugin-list { .seoprostack-wrap #seoprostack-plugin-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0; margin: 0;
@ -15,7 +15,7 @@
} }
/* Filter Bar */ /* Filter Bar */
.wp-allstars-wrap #wpa-plugin-filters.wp-filter { .seoprostack-wrap #seoprostack-plugin-filters.wp-filter {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
width: 100%; width: 100%;
@ -23,13 +23,13 @@
} }
/* Standard WordPress Plugin Grid Layout - exactly matching core */ /* Standard WordPress Plugin Grid Layout - exactly matching core */
.wp-allstars-wrap .wp-list-table.plugin-install { .seoprostack-wrap .wp-list-table.plugin-install {
margin-top: 20px; margin-top: 20px;
clear: both; clear: both;
padding: 0; padding: 0;
} }
.wp-allstars-wrap #the-list { .seoprostack-wrap #the-list {
margin: 0; margin: 0;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

52
admin/settings.php
View File

@ -1500,7 +1500,7 @@ function wp_seoprostack_settings_page() {
</div> </div>
</div> </div>
<div class="wpa-settings-container"> <div class="seoprostack-settings-container">
<div class="seoprostack-nav"> <div class="seoprostack-nav">
<h2 class="nav-tab-wrapper"> <h2 class="nav-tab-wrapper">
<a href="?page=seoprostack&tab=general" class="nav-tab <?php echo $active_tab == 'general' ? 'nav-tab-active' : ''; ?>"> <a href="?page=seoprostack&tab=general" class="nav-tab <?php echo $active_tab == 'general' ? 'nav-tab-active' : ''; ?>">
@ -1530,28 +1530,28 @@ function wp_seoprostack_settings_page() {
</h2> </h2>
</div> </div>
<div class="wpa-settings-content"> <div class="seoprostack-settings-content">
<?php if ($active_tab == 'workflow'): ?> <?php if ($active_tab == 'workflow'): ?>
<div class="seoprostack-settings-content tab-content" id="workflow"> <div class="tab-content" id="workflow">
<div class="seoprostack-toggle"> <div class="seoprostack-toggle">
<div class="seoprostack-toggle-header" aria-expanded="false"> <div class="seoprostack-toggle-header" aria-expanded="false">
<div class="seoprostack-toggle-main"> <div class="seoprostack-toggle-main">
<div class="seoprostack-toggle-left"> <div class="seoprostack-toggle-left">
<div class="wp-toggle-switch"> <div class="seoprostack-toggle-switch">
<input type="checkbox" <input type="checkbox"
id="wp_seoprostack_auto_upload_images" id="wp_seoprostack_auto_upload_images"
name="wp_seoprostack_auto_upload_images" name="wp_seoprostack_auto_upload_images"
value="1" value="1"
<?php checked(get_option('wp_seoprostack_auto_upload_images', get_option('wp_allstars_auto_upload_images', false))); ?> <?php checked(get_option('wp_seoprostack_auto_upload_images', get_option('wp_allstars_auto_upload_images', false))); ?>
/> />
<span class="wp-toggle-slider"></span> <span class="seoprostack-toggle-slider"></span>
</div> </div>
<label for="wp_seoprostack_auto_upload_images"> <label for="wp_seoprostack_auto_upload_images">
<?php esc_html_e('Enable Auto Upload Images', 'seoprostack'); ?> <?php esc_html_e('Enable Auto Upload Images', 'seoprostack'); ?>
</label> </label>
</div> </div>
</div> </div>
<p class="wp-setting-description"> <p class="seoprostack-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.', 'seoprostack'); ?> <?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.', 'seoprostack'); ?>
</p> </p>
</div> </div>
@ -1936,29 +1936,29 @@ function wp_seoprostack_settings_page() {
</div> </div>
<?php elseif ($active_tab == 'general'): ?> <?php elseif ($active_tab == 'general'): ?>
<div class="tab-content" id="general"> <div class="tab-content" id="general">
<div class="wp-allstars-settings-section"> <div class="seoprostack-settings-section">
<div class="wp-allstars-settings-grid"> <div class="seoprostack-settings-grid">
<!-- Example of a simple toggle setting (no panel) --> <!-- Example of a simple toggle setting (no panel) -->
<div class="wp-setting-row"> <div class="seoprostack-setting-row">
<div class="wp-setting-header"> <div class="seoprostack-setting-header">
<div class="wp-setting-main"> <div class="seoprostack-setting-main">
<div class="wp-setting-left"> <div class="seoprostack-setting-left">
<div class="wp-toggle-switch"> <div class="seoprostack-toggle-switch">
<input type="checkbox" <input type="checkbox"
id="wp_seoprostack_simple_setting" id="wp_seoprostack_simple_setting"
name="wp_seoprostack_simple_setting" name="wp_seoprostack_simple_setting"
value="1" value="1"
<?php checked(get_option('wp_seoprostack_simple_setting', get_option('wp_allstars_simple_setting', false))); ?> <?php checked(get_option('wp_seoprostack_simple_setting', get_option('wp_allstars_simple_setting', false))); ?>
/> />
<span class="wp-toggle-slider"></span> <span class="seoprostack-toggle-slider"></span>
</div> </div>
<label for="wp_seoprostack_simple_setting" class="wp-setting-label"> <label for="wp_seoprostack_simple_setting" class="seoprostack-setting-label">
<?php esc_html_e('Example: Simple Toggle', 'wp-allstars'); ?> <?php esc_html_e('Example: Simple Toggle', 'seoprostack'); ?>
</label> </label>
</div> </div>
</div> </div>
<p class="wp-setting-description"> <p class="seoprostack-setting-description">
<?php esc_html_e('This is an example of a simple toggle setting without an expandable panel. Currently for demonstration purposes only.', 'wp-allstars'); ?> <?php esc_html_e('This is an example of a simple toggle setting without an expandable panel. Currently for demonstration purposes only.', 'seoprostack'); ?>
</p> </p>
</div> </div>
</div> </div>
@ -1966,34 +1966,34 @@ function wp_seoprostack_settings_page() {
</div> </div>
<?php elseif ($active_tab == 'advanced'): ?> <?php elseif ($active_tab == 'advanced'): ?>
<div class="tab-content" id="advanced"> <div class="tab-content" id="advanced">
<div class="wp-allstars-settings-section"> <div class="seoprostack-settings-section">
<div class="wp-allstars-settings-grid"> <div class="seoprostack-settings-grid">
<!-- Example of an expandable panel setting --> <!-- Example of an expandable panel setting -->
<div class="seoprostack-toggle"> <div class="seoprostack-toggle">
<div class="seoprostack-toggle-header" aria-expanded="false"> <div class="seoprostack-toggle-header" aria-expanded="false">
<div class="seoprostack-toggle-main"> <div class="seoprostack-toggle-main">
<div class="seoprostack-toggle-left"> <div class="seoprostack-toggle-left">
<div class="wp-toggle-switch"> <div class="seoprostack-toggle-switch">
<input type="checkbox" <input type="checkbox"
id="wp_seoprostack_auto_upload_images" id="wp_seoprostack_auto_upload_images"
name="wp_seoprostack_auto_upload_images" name="wp_seoprostack_auto_upload_images"
value="1" value="1"
<?php checked(get_option('wp_seoprostack_auto_upload_images', get_option('wp_allstars_auto_upload_images', false))); ?> <?php checked(get_option('wp_seoprostack_auto_upload_images', get_option('wp_allstars_auto_upload_images', false))); ?>
/> />
<span class="wp-toggle-slider"></span> <span class="seoprostack-toggle-slider"></span>
</div> </div>
<label for="wp_seoprostack_auto_upload_images"> <label for="wp_seoprostack_auto_upload_images">
<?php esc_html_e('Example: Expandable Panel', 'wp-allstars'); ?> <?php esc_html_e('Example: Expandable Panel', 'seoprostack'); ?>
</label> </label>
</div> </div>
</div> </div>
<p class="wp-setting-description"> <p class="seoprostack-setting-description">
<?php esc_html_e('This is an example of an expandable panel setting. Currently for demonstration purposes only - no actual functionality.', 'wp-allstars'); ?> <?php esc_html_e('This is an example of an expandable panel setting. Currently for demonstration purposes only - no actual functionality.', 'seoprostack'); ?>
</p> </p>
</div> </div>
<div class="seoprostack-toggle-settings"> <div class="seoprostack-toggle-settings">
<div class="seoprostack-setting-row"> <div class="seoprostack-setting-row">
<label for="example_text"><?php esc_html_e('Example Text Field', 'wp-allstars'); ?></label> <label for="example_text"><?php esc_html_e('Example Text Field', 'seoprostack'); ?></label>
<input type="text" <input type="text"
id="example_text" id="example_text"
name="example_text" name="example_text"