Match reference plugin structure and styling
- Updated main plugin file to match reference plugin structure - Fixed CSS class naming to consistently use seoprostack prefix - Updated JavaScript selectors to match CSS classes - Restored original plugin functionality while maintaining new naming conventions - Ensured exact match with reference plugin appearance and behavior
This commit is contained in:
Marcus Quinn
@ -1,10 +1,10 @@
|
||||
.wp-allstars-wrap {
|
||||
.seoprostack-wrap {
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.wp-allstars-header {
|
||||
.seoprostack-header {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #c3c4c7;
|
||||
box-shadow: 0 1px 0 rgba(0,0,0,.04);
|
||||
@ -17,7 +17,7 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wp-allstars-header h1 {
|
||||
.seoprostack-header h1 {
|
||||
font-size: 23px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
@ -26,13 +26,13 @@
|
||||
color: #1d2327;
|
||||
}
|
||||
|
||||
.wp-allstars-header-actions {
|
||||
.seoprostack-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.wp-allstars-version {
|
||||
.seoprostack-version {
|
||||
color: #d35400; /* Updated to dark orange */
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
@ -84,7 +84,7 @@
|
||||
}
|
||||
|
||||
/* Base Toggle Switch Component */
|
||||
.wp-toggle-switch {
|
||||
.seoprostack-toggle-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 36px;
|
||||
@ -95,7 +95,7 @@
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.wp-toggle-switch input {
|
||||
.seoprostack-toggle-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
@ -240,15 +240,15 @@ input:checked + .wp-toggle-slider:before {
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
|
||||
.wp-allstars-setting-row {
|
||||
.seoprostack-setting-row {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.wp-allstars-setting-row:last-child {
|
||||
.seoprostack-setting-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.wp-allstars-setting-row label {
|
||||
.seoprostack-setting-row label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
@ -258,9 +258,9 @@ input:checked + .wp-toggle-slider:before {
|
||||
padding-right: 80px;
|
||||
}
|
||||
|
||||
.wp-allstars-setting-row input[type="text"],
|
||||
.wp-allstars-setting-row input[type="number"],
|
||||
.wp-allstars-setting-row textarea {
|
||||
.seoprostack-setting-row input[type="text"],
|
||||
.seoprostack-setting-row input[type="number"],
|
||||
.seoprostack-setting-row textarea {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 8px;
|
||||
@ -271,9 +271,9 @@ input:checked + .wp-toggle-slider:before {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wp-allstars-setting-row input[type="text"]:focus,
|
||||
.wp-allstars-setting-row input[type="number"]:focus,
|
||||
.wp-allstars-setting-row textarea:focus {
|
||||
.seoprostack-setting-row input[type="text"]:focus,
|
||||
.seoprostack-setting-row input[type="number"]:focus,
|
||||
.seoprostack-setting-row textarea:focus {
|
||||
border-color: #2271b1;
|
||||
box-shadow: 0 0 0 1px #2271b1;
|
||||
outline: 2px solid transparent;
|
||||
@ -631,7 +631,7 @@ input:checked + .wp-toggle-slider:before {
|
||||
}
|
||||
|
||||
/* Settings Notification */
|
||||
.wp-setting-notification {
|
||||
.seoprostack-setting-notification {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
@ -647,22 +647,22 @@ input:checked + .wp-toggle-slider:before {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wp-setting-notification.error {
|
||||
.seoprostack-setting-notification.error {
|
||||
background: #d63638;
|
||||
}
|
||||
|
||||
/* Add space for notification to prevent layout shifts */
|
||||
.wp-setting-left label,
|
||||
.wp-allstars-toggle-left label,
|
||||
.wp-allstars-setting-row label {
|
||||
.seoprostack-setting-row label {
|
||||
position: relative;
|
||||
padding-right: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.wp-setting-left label .wp-setting-notification,
|
||||
.wp-allstars-toggle-left label .wp-setting-notification,
|
||||
.wp-allstars-setting-row label .wp-setting-notification {
|
||||
.wp-setting-left label .seoprostack-setting-notification,
|
||||
.wp-allstars-toggle-left label .seoprostack-setting-notification,
|
||||
.seoprostack-setting-row label .seoprostack-setting-notification {
|
||||
position: absolute;
|
||||
right: -60px;
|
||||
top: -2px;
|
||||
@ -695,7 +695,7 @@ input:checked + .wp-toggle-slider:before {
|
||||
}
|
||||
|
||||
/* Panel styles for Pro Plugins, Hosting, and Tools tabs */
|
||||
.wpa-pro-plugins {
|
||||
.seoprostack-pro-plugins {
|
||||
padding: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
|
||||
@ -704,7 +704,7 @@ input:checked + .wp-toggle-slider:before {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.wpa-pro-plugin {
|
||||
.seoprostack-pro-plugin {
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
padding: 24px;
|
||||
@ -715,12 +715,12 @@ input:checked + .wp-toggle-slider:before {
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.wpa-pro-plugin:hover {
|
||||
.seoprostack-pro-plugin:hover {
|
||||
border-color: #2271b1;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.wpa-pro-plugin h3 {
|
||||
.seoprostack-pro-plugin h3 {
|
||||
margin: 0 0 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
@ -728,21 +728,21 @@ input:checked + .wp-toggle-slider:before {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.wpa-pro-plugin p {
|
||||
.seoprostack-pro-plugin p {
|
||||
margin: 0 0 16px;
|
||||
color: #50575e;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.wpa-pro-plugin .button-group {
|
||||
.seoprostack-pro-plugin .button-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.wpa-pro-plugin .button {
|
||||
.seoprostack-pro-plugin .button {
|
||||
text-decoration: none;
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
@ -762,45 +762,45 @@ input:checked + .wp-toggle-slider:before {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wpa-pro-plugin .button:hover {
|
||||
.seoprostack-pro-plugin .button:hover {
|
||||
background: #f0f0f1;
|
||||
border-color: #0071a1;
|
||||
color: #0071a1;
|
||||
}
|
||||
|
||||
.wpa-pro-plugin .button.button-primary {
|
||||
.seoprostack-pro-plugin .button.button-primary {
|
||||
background: #2271b1;
|
||||
border-color: #2271b1 !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wpa-pro-plugin .button.button-primary:hover {
|
||||
.seoprostack-pro-plugin .button.button-primary:hover {
|
||||
background: #135e96;
|
||||
border-color: #135e96 !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
.wpa-pro-plugins {
|
||||
.seoprostack-pro-plugins {
|
||||
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
||||
gap: 20px;
|
||||
padding: 16px;
|
||||
}
|
||||
.wpa-pro-plugin {
|
||||
.seoprostack-pro-plugin {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 782px) {
|
||||
.wpa-pro-plugins {
|
||||
.seoprostack-pro-plugins {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
padding: 12px;
|
||||
}
|
||||
.wpa-pro-plugin {
|
||||
.seoprostack-pro-plugin {
|
||||
padding: 16px;
|
||||
}
|
||||
.wpa-pro-plugin .button {
|
||||
.seoprostack-pro-plugin .button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -1020,14 +1020,14 @@ input:checked + .wp-toggle-slider:before {
|
||||
}
|
||||
|
||||
/* Toggle Switch */
|
||||
.wp-toggle-switch {
|
||||
.seoprostack-toggle-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.wp-toggle-switch input {
|
||||
.seoprostack-toggle-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
Reference in New Issue
Block a user