marcus/wpa-superstar-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update toggle switches to match RankMath exactly: - Adjust dimensions and spacing - Use RankMath's color scheme - Improve transitions and animations - Refine focus and hover states

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-14 03:02:39 +00:00
parent f7aae0fee2
commit 0d55aa82ff
1 changed files with 29 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
admin/css/wpa-superstar-admin.css
View File

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