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

Completely refactor CSS for consistent icon positioning at all screen sizes, especially below 780px

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-17 03:38:59 +00:00
parent 4dcc28c048
commit b505990902
1 changed files with 23 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -96,58 +96,7 @@
}
}
/* Mobile viewport specific icon positioning fixes */
@media screen and (max-width: 768px) {
/* Add a global important style */
body.wp-admin .plugin-card {
position: relative !important;
}
/* Extra forceful positioning for small screens - targeting specific elements with highest specificity */
body.wp-admin .plugin-card .plugin-icon,
body.wp-admin .plugin-card img.plugin-icon,
.plugin-card img.plugin-icon,
.plugin-card .plugin-icon,
body.wp-admin #the-list .plugin-card .plugin-icon,
body.wp-admin .plugin-card-top .plugin-icon,
body#wpbody .plugin-card .plugin-icon,
html body.wp-admin .plugin-card-top img.plugin-icon {
position: absolute !important;
float: none !important;
display: block !important;
left: 35px !important; /* Adjusted to match the required position */
top: 20px !important;
/* Add extra positioning properties to override any other styles */
right: auto !important;
bottom: auto !important;
transform: none !important;
box-shadow: none !important;
opacity: 1 !important;
visibility: visible !important;
margin: 0 !important;
border: 0 !important;
}
/* Adjust name column margin to align correctly with new icon position */
body.wp-admin .plugin-card .name.column-name {
margin-left: 80px !important;
}
/* Make plugin card items arrange properly */
body.wp-admin .plugin-card .plugin-card-top {
padding-top: 20px !important;
padding-left: 20px !important;
position: relative !important;
min-height: 110px !important;
}
/* Make plugin icon container and image have proper z-index */
body.wp-admin .plugin-card .plugin-icon-container {
position: relative !important;
z-index: 10 !important;
}
}
/* Mobile styles - now working with correct positioning */
/* Mobile styles - combined and simplified */
@media screen and (max-width: 1200px) {
body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card {
border: 1px solid #dcdcde !important;
@ -175,7 +124,7 @@
overflow: hidden !important;
}
/* Place plugin icon on the left side in a consistent position */
/* ADDING SUPER SPECIFIC MOBILE STYLING FOR ICONS - exact same as above 780px */
body.wp-admin .plugin-card .plugin-icon {
position: relative !important;
float: left !important;
@ -188,6 +137,8 @@
z-index: 1 !important;
}
/* Removed duplicate plugin icon styling */
/* Position name next to the icon with wider width for better text wrap */
body.wp-admin .plugin-card .name.column-name {
margin-left: 0 !important;
@ -293,6 +244,25 @@
}
}
/* Add special override for very small screens */
@media screen and (max-width: 780px) {
/* Super specific selector to override WordPress core styles */
html body.wp-admin #wpbody-content .plugin-card .plugin-icon,
html body.wp-admin #wpbody .plugin-card img.plugin-icon,
body.wp-admin .plugin-card .plugin-icon,
html body.wp-admin #the-list .plugin-card img.plugin-icon {
position: relative !important;
float: left !important;
top: auto !important;
right: auto !important;
left: 0 !important;
margin: 0 20px 0 0 !important;
width: 64px !important;
height: 64px !important;
z-index: 10 !important;
}
}
/* Center More Details under all buttons */
body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card .action-links a.thickbox,
body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card .plugin-action-buttons a.thickbox,