diff --git a/admin/css/wpa-superstar-admin.css b/admin/css/wpa-superstar-admin.css index 1b8e975..0d84f8e 100644 --- a/admin/css/wpa-superstar-admin.css +++ b/admin/css/wpa-superstar-admin.css @@ -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 */ diff --git a/admin/settings.php b/admin/settings.php index 33f98ea..edc32db 100644 --- a/admin/settings.php +++ b/admin/settings.php @@ -38,16 +38,26 @@ function wpa_superstar_settings_page() { $active_tab = isset( $_GET['tab'] ) ? $_GET['tab'] : 'general'; ?> <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"> - <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' ); ?> - </a> - <a href="?page=wpa-superstar&tab=advanced" class="nav-tab <?php echo $active_tab == 'advanced' ? 'nav-tab-active' : ''; ?>"> - <?php esc_html_e( 'Advanced', 'wpa-superstar' ); ?> - </a> - </h2> + <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' ); ?> + </a> + <a href="?page=wpa-superstar&tab=advanced" class="nav-tab <?php echo $active_tab == 'advanced' ? 'nav-tab-active' : ''; ?>"> + <?php esc_html_e( 'Advanced', 'wpa-superstar' ); ?> + </a> + </h2> + </div> <div class="wpa-settings-content"> <?php settings_fields( 'wpa-superstar-settings' ); ?>