query-monitor
query-monitor copied to clipboard
Issue with QM table styles
I ran in to an issue where my theme CSS rules for tables override QM styles and tables become unreadable when using dark theme. My CSS rules affecting the tables are
thead, tbody, tfoot {
border: 1px solid #f1f1f1;
background-color: #fefefe;
}
tbody tr:nth-child(2n) {
border-bottom: 0;
background-color: #f1f1f1;
}
Problem could be solved by adding these rules / declarations with a higher specificity to query-monitor.css
/* New rule */
#query-monitor-main table thead,
#query-monitor-main table tbody,
#query-monitor-main table tfoot {
border: none;
background-color: inherit;
}
and
#query-monitor-main .qm tr {
border: none !important;
background-color: inherit; /* New declaration */
}
The higher specificity (under #query-monitor-main) should prevent any themes from overriding the values and help keep QM interface properly styled.
Thanks!