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

Add debug CSS with higher specificity to diagnose styling issues

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-16 06:03:38 +00:00
parent 3669a33d61
commit 099c184ba0
1 changed files with 16 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -72,75 +72,43 @@
} }
} }
/* Force mobile styling to match desktop layout exactly */ /* Debug styling for all screens to help identify issues */
body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card {
border: 2px solid red !important;
}
/* Debug version of mobile styling */
@media screen and (max-width: 782px) { @media screen and (max-width: 782px) {
/* Override WordPress mobile styles with !important */ body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card {
.plugin-card { border: 3px solid blue !important;
width: 100% !important; width: 100% !important;
margin: 0 0 16px 0 !important; margin: 0 0 16px 0 !important;
display: block !important; padding: 0 !important;
position: relative !important;
text-align: left !important;
} }
/* Ensure plugin card top has desktop-like structure */ body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card .plugin-card-top {
.plugin-card-top { display: block !important;
padding: 20px !important;
position: relative !important;
min-height: 135px !important; min-height: 135px !important;
text-align: left !important; position: relative !important;
display: block !important; padding: 20px !important;
flex-direction: unset !important;
align-items: unset !important;
} }
/* Force icon to left side */ body.wp-admin .plugin-card .plugin-icon {
.plugin-icon {
position: absolute !important; position: absolute !important;
top: 20px !important; top: 20px !important;
left: 20px !important; left: 20px !important;
width: 128px !important;
height: 128px !important;
margin: 0 !important; margin: 0 !important;
display: inline-block !important;
} }
/* Force plugin name to appear next to icon */ body.wp-admin .plugin-card .name.column-name {
.name.column-name {
margin-left: 148px !important; margin-left: 148px !important;
margin-right: 0 !important;
width: auto !important;
text-align: left !important; text-align: left !important;
} }
.name.column-name h3 { body.wp-admin .plugin-card .action-links {
text-align: left !important;
margin: 0 0 12px !important;
}
/* Force action links position */
.action-links {
position: absolute !important; position: absolute !important;
top: 20px !important; top: 20px !important;
right: 20px !important; right: 20px !important;
width: auto !important;
margin: 0 !important;
}
.plugin-action-buttons {
float: right !important;
margin: 0 !important;
text-align: right !important;
display: block !important;
}
/* Force card bottom styling */
.plugin-card-bottom {
clear: both !important;
padding: 12px 20px !important;
background-color: #f6f7f7 !important;
overflow: hidden !important;
text-align: left !important;
} }
} }