/* Sortable column headers — the visual half of static/js/grms-table-sort.js. * * In its own file rather than in theme-lokentra.css because `.grms-sortable-th` * and `.grms-sort-icon` are new class names that nothing else in the console * styles. Load order therefore cannot matter here, which is not true of the * theme: that sheet has to stay LAST in so its unlayered rules win the * :root token ties, and adding unrelated rules to it dilutes a file whose whole * job is to be the last word on the palette. */ .grms-sortable-th { cursor: pointer; user-select: none; white-space: nowrap; } /* The indicator is always present, at low contrast until the column is the one * being sorted. Showing it only on hover hides that the table sorts at all from * anyone not using a mouse. */ .grms-sort-icon { font-size: 0.75em; margin-left: 0.25rem; vertical-align: baseline; } .grms-sortable-th:hover .grms-sort-icon, .grms-sortable-th:focus-visible .grms-sort-icon { opacity: 1; } /* These headers are keyboard-reachable (tabindex + Enter/Space), so they need a * focus ring. `currentColor` keeps it correct on the tinted table heads without * hardcoding a palette value here. */ .grms-sortable-th:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; border-radius: 2px; } .grms-sortable-th[aria-sort="ascending"], .grms-sortable-th[aria-sort="descending"] { font-weight: 700; }