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 {
max-width: 800px;
margin: 20px 0;
max-width: 1100px;
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-weight: 400;
margin: 0;
padding: 9px 0 4px 0;
padding: 0;
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 {
margin-bottom: 20px;
border-bottom: 1px solid #ccd0d4;
margin: 0;
padding-top: 0;
border-bottom: 1px solid #c3c4c7;
line-height: inherit;
}
.nav-tab {
background: #f8f9fa;
border: 1px solid #ccd0d4;
border-bottom: none;
padding: 8px 16px;
margin-left: 0;
margin-right: 4px;
padding: 8px 12px;
font-size: 14px;
line-height: 1.71428571;
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;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
color: #1d2327;
}
.wpa-settings-content {
margin-top: 20px;
}
/* ACF-style toggle switches */
@ -38,7 +80,7 @@
margin: 15px 0;
padding: 15px;
background: #fff;
border: 1px solid #ccd0d4;
border: 1px solid #c3c4c7;
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}
@ -49,13 +91,14 @@
font-size: 14px;
line-height: 1.4;
font-weight: 600;
color: #23282d;
color: #1d2327;
cursor: pointer;
}
.wpa-superstar-toggle .description {
margin: 5px 0 0 44px;
color: #666;
color: #646970;
font-size: 13px;
}
/* Toggle Switch Container */
@ -83,10 +126,10 @@
left: 0;
right: 0;
bottom: 0;
background-color: #ccd0d4;
background-color: #c3c4c7;
transition: .3s;
border-radius: 20px;
border: 2px solid #ccd0d4;
border: 2px solid #c3c4c7;
}
/* Slider knob */

10
admin/settings.php
View File

@ -38,8 +38,17 @@ function wpa_superstar_settings_page() {
$active_tab = isset( $_GET['tab'] ) ? $_GET['tab'] : 'general';
?>
<div class="wrap wpa-superstar-wrap">
<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>
<div class="wpa-superstar-nav">
<h2 class="nav-tab-wrapper">
<a href="?page=wpa-superstar&tab=general" class="nav-tab <?php echo $active_tab == 'general' ? 'nav-tab-active' : ''; ?>">
<?php esc_html_e( 'General', 'wpa-superstar' ); ?>
@ -48,6 +57,7 @@ function wpa_superstar_settings_page() {
<?php esc_html_e( 'Advanced', 'wpa-superstar' ); ?>
</a>
</h2>
</div>
<div class="wpa-settings-content">
<?php settings_fields( 'wpa-superstar-settings' ); ?>