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

Update header to match ACF style: - Add white header container with border and shadow - Add version number and documentation link - Improve tab styling and navigation - Update colors and typography to match WordPress standards - Refine spacing and layout

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-14 02:51:48 +00:00
parent 04f0b70030
commit a417766151
2 changed files with 80 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
admin/css/wpa-superstar-admin.css
View File

@ -1,36 +1,78 @@
.wpa-superstar-wrap { .wpa-superstar-wrap {
max-width: 800px; max-width: 1100px;
margin: 20px 0; margin: 25px 40px 0 20px;
} }
.wpa-superstar-wrap h1 { .wpa-superstar-header {
background: #fff;
border: 1px solid #ccd0d4;
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
margin-bottom: 20px;
padding: 15px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.wpa-superstar-header h1 {
font-size: 23px; font-size: 23px;
font-weight: 400; font-weight: 400;
margin: 0; margin: 0;
padding: 9px 0 4px 0; padding: 0;
line-height: 1.3; line-height: 1.3;
color: #1d2327;
}
.wpa-superstar-header-actions {
display: flex;
align-items: center;
gap: 10px;
}
.wpa-superstar-version {
color: #646970;
font-size: 13px;
font-weight: 400;
} }
.nav-tab-wrapper { .nav-tab-wrapper {
margin-bottom: 20px; margin: 0;
border-bottom: 1px solid #ccd0d4; padding-top: 0;
border-bottom: 1px solid #c3c4c7;
line-height: inherit;
} }
.nav-tab { .nav-tab {
background: #f8f9fa; margin-left: 0;
border: 1px solid #ccd0d4; margin-right: 4px;
border-bottom: none; padding: 8px 12px;
padding: 8px 16px;
font-size: 14px; font-size: 14px;
line-height: 1.71428571; line-height: 1.71428571;
font-weight: 600; font-weight: 600;
margin-right: 5px; background: #f0f0f1;
border: 1px solid #c3c4c7;
border-bottom: none;
color: #50575e;
} }
.nav-tab-active { .nav-tab:hover,
.nav-tab:focus {
background: #fff;
color: #1d2327;
}
.nav-tab-active,
.nav-tab-active:focus,
.nav-tab-active:focus:active,
.nav-tab-active:hover {
background: #fff; background: #fff;
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
margin-bottom: -1px; color: #1d2327;
}
.wpa-settings-content {
margin-top: 20px;
} }
/* ACF-style toggle switches */ /* ACF-style toggle switches */
@ -38,7 +80,7 @@
margin: 15px 0; margin: 15px 0;
padding: 15px; padding: 15px;
background: #fff; background: #fff;
border: 1px solid #ccd0d4; border: 1px solid #c3c4c7;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 1px 1px rgba(0,0,0,0.04); box-shadow: 0 1px 1px rgba(0,0,0,0.04);
} }
@ -49,13 +91,14 @@
font-size: 14px; font-size: 14px;
line-height: 1.4; line-height: 1.4;
font-weight: 600; font-weight: 600;
color: #23282d; color: #1d2327;
cursor: pointer; cursor: pointer;
} }
.wpa-superstar-toggle .description { .wpa-superstar-toggle .description {
margin: 5px 0 0 44px; margin: 5px 0 0 44px;
color: #666; color: #646970;
font-size: 13px;
} }
/* Toggle Switch Container */ /* Toggle Switch Container */
@ -83,10 +126,10 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #ccd0d4; background-color: #c3c4c7;
transition: .3s; transition: .3s;
border-radius: 20px; border-radius: 20px;
border: 2px solid #ccd0d4; border: 2px solid #c3c4c7;
} }
/* Slider knob */ /* Slider knob */

28
admin/settings.php
View File

@ -38,16 +38,26 @@ function wpa_superstar_settings_page() {
$active_tab = isset( $_GET['tab'] ) ? $_GET['tab'] : 'general'; $active_tab = isset( $_GET['tab'] ) ? $_GET['tab'] : 'general';
?> ?>
<div class="wrap wpa-superstar-wrap"> <div class="wrap wpa-superstar-wrap">
<h1><?php echo esc_html( get_admin_page_title() ); ?></h1> <div class="wpa-superstar-header">
<h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
<div class="wpa-superstar-header-actions">
<span class="wpa-superstar-version">Version <?php echo esc_html( WPA_SUPERSTAR_VERSION ); ?></span>
<a href="https://www.wpallstars.com/docs/superstar-plugin/" target="_blank" class="button button-secondary">
<?php esc_html_e( 'Documentation', 'wpa-superstar' ); ?>
</a>
</div>
</div>
<h2 class="nav-tab-wrapper"> <div class="wpa-superstar-nav">
<a href="?page=wpa-superstar&tab=general" class="nav-tab <?php echo $active_tab == 'general' ? 'nav-tab-active' : ''; ?>"> <h2 class="nav-tab-wrapper">
<?php esc_html_e( 'General', 'wpa-superstar' ); ?> <a href="?page=wpa-superstar&tab=general" class="nav-tab <?php echo $active_tab == 'general' ? 'nav-tab-active' : ''; ?>">
</a> <?php esc_html_e( 'General', 'wpa-superstar' ); ?>
<a href="?page=wpa-superstar&tab=advanced" class="nav-tab <?php echo $active_tab == 'advanced' ? 'nav-tab-active' : ''; ?>"> </a>
<?php esc_html_e( 'Advanced', 'wpa-superstar' ); ?> <a href="?page=wpa-superstar&tab=advanced" class="nav-tab <?php echo $active_tab == 'advanced' ? 'nav-tab-active' : ''; ?>">
</a> <?php esc_html_e( 'Advanced', 'wpa-superstar' ); ?>
</h2> </a>
</h2>
</div>
<div class="wpa-settings-content"> <div class="wpa-settings-content">
<?php settings_fields( 'wpa-superstar-settings' ); ?> <?php settings_fields( 'wpa-superstar-settings' ); ?>