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 */
.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 */