diff --git a/admin/css/wpa-superstar-admin.css b/admin/css/wpa-superstar-admin.css index 4db1244..f1214a5 100644 --- a/admin/css/wpa-superstar-admin.css +++ b/admin/css/wpa-superstar-admin.css @@ -42,53 +42,61 @@ max-width: 1100px; } +/* RankMath-style Tabs */ .nav-tab-wrapper { margin: 0; padding-top: 0; - border-bottom: 1px solid #c3c4c7; + border-bottom: 1px solid #ddd; line-height: inherit; + position: relative; + z-index: 1; } .nav-tab { - margin-left: 0; - margin-right: 4px; - padding: 8px 12px; + margin: 0 6px 0 0; + padding: 12px 20px; font-size: 14px; - line-height: 1.71428571; - font-weight: 600; - background: #f0f0f1; - border: 1px solid #c3c4c7; - border-bottom: none; - color: #50575e; + line-height: 1.4; + font-weight: 500; + background: transparent; + border: 0; + border-bottom: 2px solid transparent; + color: #646970; + transition: all .2s ease; } .nav-tab:hover, .nav-tab:focus { - background: #fff; - color: #1d2327; + background: transparent; + color: #2271b1; + border-bottom-color: rgba(34, 113, 177, 0.4); } .nav-tab-active, .nav-tab-active:focus, .nav-tab-active:focus:active, .nav-tab-active:hover { - background: #fff; - border-bottom: 1px solid #fff; - color: #1d2327; + background: transparent; + color: #2271b1; + border: 0; + border-bottom: 2px solid #2271b1; + font-weight: 600; } -.wpa-settings-content { - margin-top: 20px; -} - -/* ACF-style toggle switches */ +/* RankMath-style toggle switches */ .wpa-superstar-toggle { margin: 15px 0; - padding: 15px; + padding: 20px; background: #fff; - border: 1px solid #c3c4c7; - border-radius: 3px; - box-shadow: 0 1px 1px rgba(0,0,0,0.04); + border: 1px solid #ddd; + border-radius: 6px; + box-shadow: 0 2px 4px rgba(0,0,0,0.02); + transition: all .2s ease; +} + +.wpa-superstar-toggle:hover { + border-color: #2271b1; + box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .wpa-superstar-toggle label { @@ -96,35 +104,27 @@ align-items: center; font-size: 14px; line-height: 1.4; - font-weight: 600; + font-weight: 500; color: #1d2327; cursor: pointer; } .wpa-superstar-toggle .description { - margin: 5px 0 0 44px; + margin: 8px 0 0 52px; color: #646970; font-size: 13px; + line-height: 1.5; } -/* Toggle Switch Container */ +/* RankMath-style Toggle Switch */ .wpa-toggle-switch { position: relative; display: inline-block; - width: 36px; - height: 20px; + width: 44px; + height: 24px; margin-right: 8px; } -/* Hide default checkbox */ -.wpa-toggle-switch input { - opacity: 0; - width: 0; - height: 0; - margin: 0; -} - -/* The slider */ .wpa-toggle-slider { position: absolute; cursor: pointer; @@ -132,41 +132,43 @@ left: 0; right: 0; bottom: 0; - background-color: #c3c4c7; + background-color: #e5e5e5; transition: .3s; - border-radius: 20px; - border: 2px solid #c3c4c7; + border-radius: 24px; + border: 0; } -/* Slider knob */ .wpa-toggle-slider:before { position: absolute; content: ""; - height: 12px; - width: 12px; - left: 2px; - bottom: 2px; + height: 18px; + width: 18px; + left: 3px; + bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; + box-shadow: 0 2px 4px rgba(0,0,0,0.2); } -/* Active/checked state */ .wpa-toggle-switch input:checked + .wpa-toggle-slider { background-color: #2271b1; - border-color: #2271b1; } .wpa-toggle-switch input:checked + .wpa-toggle-slider:before { - transform: translateX(16px); + transform: translateX(20px); } -/* Focus state */ .wpa-toggle-switch input:focus + .wpa-toggle-slider { - box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2271b1; + box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(34, 113, 177, 0.3); } -/* Hover state */ -.wpa-toggle-switch:hover .wpa-toggle-slider { - border-color: #2271b1; +.wpa-toggle-switch:hover .wpa-toggle-slider:before { + box-shadow: 0 2px 6px rgba(0,0,0,0.3); +} + +/* Settings content spacing */ +.wpa-settings-content { + margin-top: 30px; + padding: 0 10px; } \ No newline at end of file