query-monitor icon indicating copy to clipboard operation
query-monitor copied to clipboard

Issue with QM table styles

Open ooksanen opened this issue 2 years ago • 1 comments

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.

ooksanen avatar May 12 '22 14:05 ooksanen

Thanks!

johnbillion avatar May 12 '22 14:05 johnbillion