[Feature] Add/expose ID tags on HTML elements

[Dark-Obsidian]

Is your feature request related to a problem? Please describe.

• When creating custom .css for stash, some elements are problematic to select as they have identical class combinations as other elements and don't have an ID, etc to uniquely identify them.

---

EXAMPLE:

• I wrote CSS to highlight the Scene Tagger so it would be "super easy, barely an inconvenience" for new users to find...
• However the only way I could do this, was the target the CSS changes to the "4th button"...

<div role="group" class="mb-2 btn-group">
    <button type="button" class="btn active btn-secondary"><svg ... /></button>
    <button type="button" class="btn btn-secondary"><svg ... /></button>
    <button type="button" class="btn btn-secondary"><svg ... /></button>
    <button type="button" class="btn btn-secondary"><svg ... /></button>
</div>

div.mb-2.btn-group > button:nth-child(4){
    background-color: #db3737;
}

• This is not ideal as if the UI is modified -- say if stash remove a button or a userscript adds a button, this will then break the CSS selection

⚠️ Having to use these problematic CSS selectors is making me reluctant to share the code or create a PR to suggest they are rolled into the official CSS theme, as I can't guarantee their reliability

---

Describe the solution you'd like

• Create ID tags for various HTML elements (or expose these if they already exist) allow for specific controls to be selected directly. For example, the HTML above would instead be...

<div role="group" class="mb-2 btn-group">
    <button type="button" id="grid" class="btn active btn-secondary"><svg ... /></button>
    <button type="button" id="list" class="btn btn-secondary"><svg ... /></button>
    <button type="button" id="wall" class="btn btn-secondary"><svg ... /></button>
    <button type="button" id="tagger" class="btn btn-secondary"><svg ... /></button>
</div>

• Meaning the CSS above could be simplified to just...

button#tagger{
    background-color: #db3737;
}

• This makes the CSS easier to write, easier to maintain, and more resilient to things like userscripts modifying elements on the page.

---

Describe alternatives you've considered

• The current method I am using (with nth-child selectors) is the only other way I am aware of changing the styling for an element without any unique ID or class.

[DingDongSoLong4]

This has been on my todo list for a while, along with generally adding more CSS classes everywhere, and making the existing ones more consistent.

Using IDs can cause issues, since they're supposed to be globally unique - generic names like "list" probably aren't a good idea. But that can be figured out on a case by case basis.

[xx790]

Would love to have ids of the tag and all its parents as data attributes in HTML so I can make custom CSS easier.
(Same for other things that could've also been tags in a different world.)

Something like this:

<div data-tag-id="1" data-tag-parents="2 3 4" ...>Tag</div>

Currently, it is relatively easy to select tags when they link to the tag page at least. But not so much when they link to scene search.

(Note: from a past reply, getting parent ids may require more than just HTML template changes - graphql queries might need to be updated, so it's a stretch goal.)