Add “spoiler” as new tag avaiable

[Palloxin]

Describe your suggested feature

Add this to the default css that the app uses in the reader mode.

spoiler{
    background-color: #212121;
    color: transparent;
    border-radius: 3.4px;
    box-decoration-break: clone;
   -webkit-box-decoration-break: clone;
}
spoiler:active{
    color: inherit;
}
spoiler:not(:active) {
    transition-delay: 150ms;
}

I suggest to use this (the following) version to make the text selector not work on the censored word since clicking on the it might trigger the text selector and that is annoying.

spoiler{
    background-color: #212121;
    color: transparent;
    border-radius: 3.4px;
    box-decoration-break: clone;
   -webkit-box-decoration-break: clone;
}
spoiler:active{
    color: inherit;
    user-select: none;
}
spoiler:not(:active) {
    transition-delay: 150ms;
}

Note: user-select: none; must stay in spoiler:active.

In both of them the transition-delay is facoltative. but i strongly suggest it to be added.

Why

A cool spoiler tag that can be applied using JS.

https://github.com/LNReader/lnreader/assets/75091899/900eed8e-dc00-4076-bf4c-7e3a4ac6d4cf

Pratical uses: A future toggle option that includes this script to hide chapter number and titles everywhere (titles are spoilers) and the spoiler tag might cover the case where it matches something that is not the chapter title but.. a book chapter indicated in the novel itself (part of its story). In that case one can just click on the word.

.replace(/(<h[1-4]>(<span>)?|<p>)(Chapter ([1-9]\d{0,3})\:?[^\<\>]+)/, "$1<spoiler>$3<\/spoiler>")

Other details

Facoltative addition to the feature. The background color of the spoiler can be adaptive to the theme making it more darker or lighter than the background. This sub-feature can be wrapped in a checkbox called "Adaptive color" in the settings.

https://github.com/LNReader/lnreader/assets/75091899/3fdaf43f-797e-4fce-803f-49cee0573cd1

This adaptation can happen breaking down the color code into three parameters (lile red, blue and yellow) and adding x value to the parameter to make it darker like in the video. HSV method should be more useful for it than RGB.

The "darker or lighter" are decided based on the background brightness (or his other names idk). If the background is pitch black it can't be darker so the spoiler-background must be lighter; If the background is white (or 100% brightness of another color) the spoiler-background can't be lighter; In these cases I suggest to add a condition where...

1. IF the "brigthness" is >10%, make the spoiler background-color darker (3% less);
2. IF the "brightness" is <10%, make the spoiler background-color lighter (3% more);

The "brightness" i am talking about is like the value V (in the video above). The "%" variation to add is 3-4% (to add or remove). ... Advantages of a dedicated setting in "Reader":

1. Make the user aware that the custom tag Spoiler exists and can be used with <spoiler></spoiler>...
2. sub-toggle options to enrich the feature, like the adaptive color checkbox I menzioned in the issue and the other sub-features that add css code to it like user-select: none;
3. Easy to manage.

Acknowledgements

• [X] I have searched the existing issues and this is a new ticket, NOT a duplicate or related to another open or closed issue.
• [X] I have written a short but informative title.
• [X] If this is an issue with a source, I should be opening an issue in the sources repository.
• [X] I have updated the app to version 1.1.18.
• [X] I will fill out all of the requested information in this form.