Need to get serious about CSS for the search page

[martindholmes]

Our default CSS is pretty ugly, and is really focused mainly on functionality rather than attractiveness, but it needs a fair bit of work. Specifically:

1. The selectors are overly specific, including ancestor hierarchy where they don't need to. This means that any post-processing that re-organizes and re-groups controls to suit a project's needs has to be supplemented with more CSS overrides than should be necessary.
2. We should invoke some design expertise and make things look better.

[martindholmes]

We should also consider using SCSS/Sass, although that's one more dependency for the project.

[joeytakeda]

To be completely honest, I rarely use any of the CSS, either disabling it completely or overriding it so much that it doesn't do much.

I don't think we need Sass, though—I think most of what we do could be handled by better class selectors, or :is.

[joeytakeda]

Now that I read into the differences between :is and :where, we should probably use :where as much as possible, since it always have 0 specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/:where

Much of our CSS could easily be condensed too:

div.ssDescFilters fieldset,
div.ssDateFilters fieldset, 
div.ssNumFilters fieldset, 
div.ssBoolFilters fieldset, 
div.ssSearchInFilters fieldset

could be:

:where(.ssDescFilters, .ssDateFilters, .ssBoolFilters, .ssSearchInFilters) fieldset

[martindholmes]

I'm even wondering if we need those divs to have different classes. Everything could be done at the fieldset level, I think.

[martindholmes]

But nice call on :where -- that'll make it much easier to override at the project level. I think that should be a primary concern. We need to do enough to make the defaults usable and attractive, but make it trivial to override in your own stylesheet, even if that stylesheet is higher up the tree.