fix: rework two-color-word effect & implement blinking 重作雙色字效果與實作閃爍

[IepIweidieng]

Instead of overlaying a half of the two-color-word character, the two-color-word effect is now achieved by using two half-word pseudo elements (enabled by CSS class .o):
不再透過覆蓋雙色字的半側達成，現在雙色字已改爲透過使用兩個半型寬度的僞元素（用 CSS class .o 啟用）達成：

• One for the left half (::before; controlled by non-prefixed CSS classes) and
  一個給左半（::before，用無前綴的 CSS classes 控制）；
• One for the right half (::after; controlled by CSS classes prefixed with 'r'),
  一個給右半（::after，用有 r 前綴的 CSS classes 控制）。

so that the two halves of the word can be controlled independently.
故全形字的兩半側可被獨立控制。

Additionally, to make the text selection appear normal, the real element is made invisible and placed on top of the pseudo elements.
此外，爲了使文字選擇看起來正常，眞實元素被弄得看不到且置在僞元素上。

This greatly reduces the number of CSS classes needed.
這大大地減少了所需的 CSS classes 數量。

See https://github.com/Ptt-official-app/demo-pttbbs/pull/122 for an explanation of a similar implementation.
見 https://github.com/Ptt-official-app/demo-pttbbs/pull/122 的對類似實作的說明。

The blink effect for two-color-word characters is also implemented.
雙色字的閃爍效果也被實作了。

The background color was dependent on both .b<bg> and .qq<bg> classes, which complicated the TwoColorWord blinking implementation.
原本背景的顏色同時取決於 .b<背景色> 與 .qq<背景色> classes，複雜化了 TwoColorWord 的閃爍實作。

Therefore, the .qq<bg> classes are removed, while only the .qq class is left since it does not affect the background color.
因此 .qq<背景色> classes 已移除，而僅留下不影響背景色的 .qq class。

Since the color of two-color-word characters is now transparent, the color of hovered hyperlinks is now explicitly assigned as the color of q7 to prevent the link text with the two-color-word effect from being invisible.
由於現在雙色字的顏色是透明的，被游標指著的超鏈結的顏色現在已顯式指定爲 q7 的顏色，以避免看不到具雙色字效果的鏈結文字。

This supersedes robertabcd/PttChrome#86.
取代 robertabcd/PttChrome#86。

Fixes 修正

This also fixes the issue that black bg on the right half of two-color characters may not be black.
也修正了雙色字右半的黑背景不黑的問題。

This issue was described in commit a75d5501ece7a6c511984d0900af4cfcc628bcde.
此問題已先爲 commit a75d5501ece7a6c511984d0900af4cfcc628bcde 所述。

This issue was caused by the HTML layout of two-color chars, e.g.:
此問題由雙色字的 HTML 排版導致，範例：

<span class="q15 b1">
    <span class="q15 b1 rb0 wpadding" data-text="Ａ" style="display: inline-block; width: 24px;">
        Ａ
    </span>
    Ｍ
</span>

The "black" part of the background of the inner span is actually transparent, but the outer span has its own background (of the bg color of the left-half char), thus the "black" part of the inner span appeared to be not black.
內層 span 的背景的「黑色」部份實際上是透明的，但外層 span 有自己的背景（帶有左半雙色字的背景顏色），故內層 span 的「黑色」部份看起來並不黑。

To fix this issue, WordSegmentBuilder is specialized for two-color chars (as JavaScript class TwoColorWordBuilder) so as to instead generate such layout as:
爲了解決這個問題，WordSegmentBuilder 已對雙色字特例化（爲 JavaScript 類型 TwoColorWordBuilder）來把前述的排版改產生爲：

<span class="q15 b1 rb0 wpadding" data-text="Ａ" style="display: inline-block; width: 24px;">
    Ａ
</span>
<span class="q15 b1">
    Ｍ
</span>

This not only avoids the unwanted background color introduced by the outer span but also eliminates the unnecessary outer span for a sole two-color char.
這不僅避免了外層 span 所導致的不想要的背景顏色，也消除了單獨出現的雙色字的不必要的外層 span。

Note that this requires the forementioned fix to TwoColorWord.js to make the un-nested span rendered expectedly. See the commit message for details.
注意這需要對 TwoColorWord.js 進行前述的修正以讓未經多層套置的 span 按預期彩現。詳見 commit 訊息。

This supersedes robertabcd/PttChrome#101.
取代 robertabcd/PttChrome#101。

Test case

測試案例

The text of the test case is the same as robertabcd/PttChrome#101.
測試案例的文字與 robertabcd/PttChrome#101 中的相同。

Current behavior 目前行爲

(This is a still image 此爲靜止畫面)

Expected behavior 預期行爲

This screenshot is the new behavior with the corresponding fix of robertabcd/PttChrome#101.
此畫面擷取中的是已經套用了對應 robertabcd/PttChrome#101 的修正的新的行爲。

Sample text 範例文字

• SampleText-PCMan.txt (exported with PCMan)
• SampleText-PttChrome.txt (copied with PttChrome)