Add a subtle CSS highlight to items with quantity >= 1

[electricmessiah]

This would, at a glance, make it easier to identify which items are being included. I usually have several different options to choose from, and it's difficult to look at the quantities. It would be much easier on the eyes if included items had a slightly different color as seen in many other gear lists.

[johnabela]

I have had an open case since October of last year asking to have the option to remove the quantity and not had any luck. This suggestion would be better than nothing, but would still love to just have the entire feature hiddenable.

[patrickwelker]

As a temporary fix you could inject your own CSS via a browser extension like User JavaScript and CSS

@electricmessiah I like the idea, since. Currently there is no way in CSS to target a parent element, for instance to highlight a whole row. Theoretically one would need JavaScript to do any content based changes, but luckily LighterPack keeps the customization spirit of our scene alive in that it puts invalid HTML content inside some elements to make such customization possible. So, consider everything here as a 'hack'.

You can target specific quantities via CSS. Instead of emphasizing everything that has a quantity of greater than or equal to 1, I have decided to only mark items that have a quantity of zero. (For me that's stuff I'm not sure I want to take with me on a trip.):

.lpQtyCell[qty0] {
    color: hsla(206, 12%, 56%, 0.64);          ;
    background: hsla(206, 12%, 56%, 0.64);
}

Since LightPack uses the qty attribute as a hack, one can't use the :not selector trick. But you could simply list a ton of quantity selectors like to mimic a ≥ rule like this:

.lpQtyCell[qty1],
.lpQtyCell[qty2],
.lpQtyCell[qty3],
.lpQtyCell[qty4],
.lpQtyCell[qty5],
.lpQtyCell[qty6],
.lpQtyCell[qty7] {
    color: #ed676f;
    background: hsla(111, 78%, 91%, 0.35);
}

NOTE: This is for shared sites only. You might have to adjust the CSS a bit to have the same styling when you're logged in to your account.

@johnabela You can hide the complete column by adding this CSS snippet:

.lpItems.lpDataTable .lpHeader .lpQtyCell, span.lpQtyCell.lpNumber {
    display: none;
}