diff --git a/admin/css/wpa-superstar-admin.css b/admin/css/wpa-superstar-admin.css index 0bd76e9..f69a978 100644 --- a/admin/css/wpa-superstar-admin.css +++ b/admin/css/wpa-superstar-admin.css @@ -1,30 +1,91 @@ .wpa-superstar-wrap { max-width: 800px; - background: #fff; - padding: 20px; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); + margin: 20px 0; } + .wpa-superstar-wrap h1 { - font-size: 24px; - margin-bottom: 20px; -} -.wpa-superstar-toggle { - margin: 10px 0; + font-size: 23px; + font-weight: 400; + margin: 0; + padding: 9px 0 4px 0; + line-height: 1.3; } + .nav-tab-wrapper { margin-bottom: 20px; + border-bottom: 1px solid #ccd0d4; } + .nav-tab { - background: #f1f1f1; + background: #f8f9fa; + border: 1px solid #ccd0d4; + border-bottom: none; padding: 8px 16px; - border-radius: 4px 4px 0 0; + font-size: 14px; + line-height: 1.71428571; + font-weight: 600; + margin-right: 5px; } + .nav-tab-active { background: #fff; border-bottom: 1px solid #fff; + margin-bottom: -1px; } + +/* ACF-style checkbox toggles */ +.wpa-superstar-toggle { + margin: 15px 0; + padding: 15px; + background: #fff; + border: 1px solid #ccd0d4; + border-radius: 3px; + box-shadow: 0 1px 1px rgba(0,0,0,0.04); +} + .wpa-superstar-toggle label { display: flex; align-items: center; + font-size: 14px; + line-height: 1.4; + font-weight: 600; + color: #23282d; + cursor: pointer; +} + +.wpa-superstar-toggle input[type="checkbox"] { + margin: 0 8px 0 0; + border: 1px solid #7e8993; + border-radius: 4px; + background: #fff; + color: #555; + clear: none; + cursor: pointer; + display: inline-block; + line-height: 0; + height: 16px; + width: 16px; + min-width: 16px; + outline: 0; + padding: 0 !important; + text-align: center; + vertical-align: middle; + -webkit-appearance: none; + box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); + transition: .05s border-color ease-in-out; +} + +.wpa-superstar-toggle input[type="checkbox"]:checked { + background: #2271b1; + border-color: #2271b1; +} + +.wpa-superstar-toggle input[type="checkbox"]:checked::before { + content: url('data:image/svg+xml;utf8,'); + float: left; + display: inline-block; + vertical-align: middle; + width: 16px; + height: 16px; + margin: -1px 0 0 -1px; } \ No newline at end of file diff --git a/admin/settings.php b/admin/settings.php index 9794424..5d4a942 100644 --- a/admin/settings.php +++ b/admin/settings.php @@ -37,37 +37,70 @@ add_action( 'wp_ajax_wpa_superstar_update_option', 'wpa_superstar_update_option' function wpa_superstar_settings_page() { $active_tab = isset( $_GET['tab'] ) ? $_GET['tab'] : 'general'; ?> -
+

+ +
+
-
-
+
-
- + +