Continuing on with the theme-system overhaul, this adds some more
definable colors, some more "fallback" logic, and moves Solarized colors
into a particular theme file instead of using them throughout the CSS.
Solarized colors are still used in the base theme, but all are hardcoded
and labeled as such, so that they can be spotted/replaced more easily.
This replaces the previous CSS theme system with a new one based around
using SCSS map-merge to define different "color sets" that can overwrite
the base theme to generate new themes.
The original theme system was heavily based around Solarized with only
light and dark variants, and other themes weren't able to replace many
of the colors (link colors, buttons, alerts, etc.). This new system will
make it possible to have themes that are completely unrelated to the
Solarized variants.
Previously, there were a number of issues coming up repeatedly related
to unexpected behavior of nested lists and similar cases. This is
because we're trying to use lists for their semantic value occasionally
(such as for lists of topics inside a particular group), but the default
styles (including the ones from Spectre.css) have set them up
specifically for text-based lists.
This commit addresses this by changing the base ol/ul styles back to
something very neutral (no margins or marker for list items), and then
adding a specific "placeholder class" that can be extended in places
that will have text-based lists, like inside comment or topic text.
* Enables wrapping when the buttons will go offscreen
* Turns on minimum touch size
* Adds a "..." on the labels that require a reason
* Moves the info about the cooldown on Exemplary into the prompt
Solarized's green color is pretty awful, not really attractive for
Exemplary comments. This switches Exemplary to blue, Joke to green, and
Offtopic to cyan. It also rearranges the order a bit so that the colors
in the labeling menu go in a progression that looks right.
This is a bit of a hacky way of doing it in a few aspects and definitely
still needs some work, but it's a reasonable start. Specifically, a
major miss is that there's no way to remove an Exemplary label unless
you currently have one available. This should definitely be fixed, but
I'm not sure what might be the best approach yet.
This adds an "exemplary" comment tag which has a few special behaviors:
* Requires a reason, which is visible (anonymously) to the tagged
comment's author.
* Highlights the comment's left side in green
* Acts as a multiplier to the comment's voting
I think we'll still want to add a cooldown or something similar on using
this tag, but this covers the basic functionality for it.
Using orange had a bit of a "this is a bad thing" implication to it (and
was hard to tell apart from the red of Malice). It also makes a bit more
sense to have the more-negative tags (Noise and Malice) to the right.
No functionality impact yet, but changes these two tags into a single
one. The alembic migration is a bit tricky to deal with the potential
constraint violation if a user had tagged a comment with both "flame"
and "troll".
Some (mostly minor) adjustments to the syntax highlighting:
* Take advantage of SCSS nesting
* Switch to using a <code> tag instead of a <div> (requires creating a
custom Pygments formatter class)
* Change "syntax_" prefix to "syntax-" for consistency
* Refactor Bleach attribute-checking function a bit and drop unnecessary
one (the "language-" class gets dropped before sanitization)
Instead of lightening the text of collapsed comments and displaying them
in italics, this shrinks the font size a little but still keeps them at
the normal level of contrast. That should make them more easily readable
while still de-emphasizing them somewhat.
Now that a bit more info (link publication dates) is being shown inside
the topic content metadata sometimes, white-space: nowrap probably isn't
a very good idea and has a chance of causing issues on mobile. Just
letting it wrap should be fine most of the time, though it could look a
little strange when it wraps in the middle of a word count or date.
This uses the CSS :not(:target) selector to make collapsing have no
effect on the "target comment" (the one that's being linked to or
navigated to using the Link/Parent links).
This isn't really a full solution and the collapsing button will still
toggle between + and - when clicked, but it's an improvement anyway.
This follows the REUSE practices to add license and copyright info to
all source files: https://reuse.software/practices/2.0/
In addition, LICENSE.md was switched to a plaintext LICENSE file, to
support the tag-value header as recommended.
Note that files that are closer to configuration than code did not have
headers added. This includes all Salt files, Alembic files, and Python
files such as most __init__.py files that only import other files, since
those are similar to header files which are not considered
copyrightable.
Just some small adjustments to how @extend is used here, so that some of
the styles that apply to "fully collapsed" chains don't get brought over
to the "individually collapsed" comments when they're not wanted.
The % syntax is SASS's recommendation for "@extend-only selectors".
For users that have the "mark new comments" feature enabled, this will
collapse old comments when they re-visit a topic that has new ones. It
involves adding a new "individual collapse" style that only collapses a
single comment and doesn't also hide all of its replies.
New comments and their direct parents will stay uncollapsed, and all
other comments in a path up to the root will be individually collapsed.
Any branches with no expanded comments will be fully collapsed. We
should probably add an indicator for how many comments are in a
collapsed chain so that we can distinguish between individually
collapsed ones and larger collapsed chains.
Bauke
Deimos
Jared McAteer
Petr Stastny
Chad Birch
Celeo
Jeff Kayser