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