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

Precise UI adjustments: Fix plugin icon position at small screens, realign action buttons with description text, adjust compatibility checkmark alignment

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-17 03:19:51 +00:00
parent 2694d9d9d6
commit 05b846644d
1 changed files with 36 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
admin/css/wp-allstars-plugins.css
View File

@ -85,32 +85,58 @@
/* Position action buttons to align with description */
body.wp-admin .plugin-card .action-links {
top: 65px !important;
top: auto !important;
bottom: auto !important;
position: relative !important;
float: right !important;
margin-top: -45px !important;
margin-right: 20px !important;
}
/* Ensure description stays below the name and doesn't overlap with buttons */
body.wp-admin .plugin-card .desc.column-description {
clear: left !important;
}
}
/* Specific adjustments for very small screens */
@media screen and (max-width: 768px) {
/* Force icon position for small screens */
body.wp-admin .plugin-card .plugin-icon {
/* Ensure proper card layout at small sizes */
body.wp-admin .plugin-card .plugin-card-top {
position: static !important;
}
/* Force complete icon positioning for small screens */
body.wp-admin .plugin-card .plugin-icon,
body.wp-admin .plugin-card img.plugin-icon {
position: absolute !important;
float: none !important;
left: 20px !important;
top: 20px !important;
left: 55px !important; /* Added 35px to the left position */
margin: 0 !important;
z-index: 10 !important;
border: 1px solid #ddd !important;
}
/* Adjust the name column for proper wrapping */
body.wp-admin .plugin-card .name.column-name {
margin-left: 75px !important;
margin-left: 110px !important; /* Adjusted for new icon position */
padding-left: 0 !important;
width: calc(75% - 155px) !important;
}
/* Make images 100% important on small screens to override any other rules */
body.wp-admin .plugin-card img.plugin-icon {
position: absolute !important;
left: 20px !important;
/* Add an !important style to override any plugin-specific styles */
body.wp-admin #the-list .plugin-card:before {
content: "" !important;
display: block !important;
clear: both !important;
}
/* Force icon visibility */
body.wp-admin .plugin-card .plugin-icon {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
}
@ -243,7 +269,7 @@
vertical-align: middle !important;
display: inline-block !important;
position: relative !important;
top: -3px !important;
top: 0px !important; /* Adjusted from -3px to 0px */
margin-right: 2px !important;
}