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

Update to RankMath-style UI: - Modern tab design with bottom borders - Larger, more prominent toggle switches - Enhanced hover and focus states - Improved spacing and typography

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-14 03:00:43 +00:00
parent e101eeb37f
commit f7aae0fee2
1 changed files with 56 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;
}