diff --git a/admin/css/wpa-superstar-admin.css b/admin/css/wpa-superstar-admin.css index f1214a5..01899d8 100644 --- a/admin/css/wpa-superstar-admin.css +++ b/admin/css/wpa-superstar-admin.css @@ -86,17 +86,17 @@ /* RankMath-style toggle switches */ .wpa-superstar-toggle { margin: 15px 0; - padding: 20px; + padding: 16px 20px; background: #fff; border: 1px solid #ddd; - border-radius: 6px; - box-shadow: 0 2px 4px rgba(0,0,0,0.02); - transition: all .2s ease; + border-radius: 4px; + box-shadow: 0 1px 4px rgba(0,0,0,0.02); + transition: all .15s ease-in-out; } .wpa-superstar-toggle:hover { - border-color: #2271b1; - box-shadow: 0 2px 8px rgba(0,0,0,0.05); + border-color: #4caf50; + box-shadow: 0 2px 6px rgba(0,0,0,0.04); } .wpa-superstar-toggle label { @@ -110,8 +110,8 @@ } .wpa-superstar-toggle .description { - margin: 8px 0 0 52px; - color: #646970; + margin: 6px 0 0 52px; + color: #666; font-size: 13px; line-height: 1.5; } @@ -120,9 +120,16 @@ .wpa-toggle-switch { position: relative; display: inline-block; - width: 44px; - height: 24px; - margin-right: 8px; + width: 40px; + height: 20px; + margin-right: 12px; +} + +.wpa-toggle-switch input { + opacity: 0; + width: 0; + height: 0; + margin: 0; } .wpa-toggle-slider { @@ -132,27 +139,27 @@ left: 0; right: 0; bottom: 0; - background-color: #e5e5e5; - transition: .3s; - border-radius: 24px; + background-color: #b5bfc9; + transition: .15s ease-in-out; + border-radius: 100px; border: 0; } .wpa-toggle-slider:before { position: absolute; content: ""; - height: 18px; - width: 18px; - left: 3px; - bottom: 3px; + height: 16px; + width: 16px; + left: 2px; + bottom: 2px; background-color: white; - transition: .3s; + transition: .15s ease-in-out; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .wpa-toggle-switch input:checked + .wpa-toggle-slider { - background-color: #2271b1; + background-color: #4caf50; } .wpa-toggle-switch input:checked + .wpa-toggle-slider:before { @@ -160,11 +167,11 @@ } .wpa-toggle-switch input:focus + .wpa-toggle-slider { - box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(34, 113, 177, 0.3); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(76, 175, 80, 0.25); } .wpa-toggle-switch:hover .wpa-toggle-slider:before { - box-shadow: 0 2px 6px rgba(0,0,0,0.3); + box-shadow: 0 2px 4px rgba(0,0,0,0.3); } /* Settings content spacing */