From d6ebaab0ec5f0a66d7d365d065c058cf84e09558 Mon Sep 17 00:00:00 2001 From: "Wei-Cheng Yeh (IID)" Date: Mon, 13 Dec 2021 18:27:30 +0800 Subject: [PATCH 1/2] feat: rework two-color-word effect & implement blinking 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), one for the left half (::before; controlled by non-prefixed CSS classes) and one for the right half (::after; controlled by CSS classes prefixed with 'r'), 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. See https://github.com/Ptt-official-app/demo-pttbbs/pull/122 for an explanation of a similar implementation. The blink effect for two-color-word characters is also implemented. The background color was dependent on both .b and .qq classes, which complicated the TwoColorWord blinking implementation. Therefore, the .qq classes are removed, while only the .qq class is left since it does not affect the background color. 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. --- .../Row/WordSegmentBuilder/ColorSpan.js | 2 +- .../Row/WordSegmentBuilder/TwoColorWord.js | 34 +- src/css/color.css | 394 +++--------------- 3 files changed, 77 insertions(+), 353 deletions(-) diff --git a/src/components/Row/WordSegmentBuilder/ColorSpan.js b/src/components/Row/WordSegmentBuilder/ColorSpan.js index c6909a5f..2574a88a 100644 --- a/src/components/Row/WordSegmentBuilder/ColorSpan.js +++ b/src/components/Row/WordSegmentBuilder/ColorSpan.js @@ -3,7 +3,7 @@ import cx from "classnames"; export const ColorSpan = ({ className, colorState, inner }) => ( {inner} diff --git a/src/components/Row/WordSegmentBuilder/TwoColorWord.js b/src/components/Row/WordSegmentBuilder/TwoColorWord.js index 6969c928..536fa01b 100644 --- a/src/components/Row/WordSegmentBuilder/TwoColorWord.js +++ b/src/components/Row/WordSegmentBuilder/TwoColorWord.js @@ -2,19 +2,33 @@ import cx from "classnames"; import { forceWidthStyle } from "./ForceWidthWord"; /** - * TODO: add blinking. + * TwoColorWord implements the two-color-word effect, + * where the first half ("head") and the last half ("tail") + * of a fullwidth character ("word") have different colors. + * + * The two-color-word effect is achieved + * by using two half-word pseudo elements (enabled by CSS class .o), + * one for the left half (::before; controlled by non-prefixed CSS classes) + * and one for the right half (::after; controlled by CSS classes prefixed with 'r'), + * 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. */ export const TwoColorWord = ({ colorLead, colorTail, forceWidth, text }) => ( diff --git a/src/css/color.css b/src/css/color.css index fbf41bdc..30e79a98 100644 --- a/src/css/color.css +++ b/src/css/color.css @@ -1,348 +1,58 @@ -.y +.y:not(.o), .y::before, .y::after { background-image: url(../icon/http.bmp?inline); background-repeat: repeat-x; background-position: 0% 90%; } -.y:hover { - color: inherit; -} -.blink--active .qq{color:RGBA(0,0,0,0);background-color:inherit;} -.blink--active .qq0{color:RGBA(0,0,0,0);background-color:inherit;} -.blink--active .qq1{color:RGBA(0,0,0,0);background-color:#800000;} -.blink--active .qq2{color:RGBA(0,0,0,0);background-color:#008000;} -.blink--active .qq3{color:RGBA(0,0,0,0);background-color:#808000;} -.blink--active .qq4{color:RGBA(0,0,0,0);background-color:#000080;} -.blink--active .qq5{color:RGBA(0,0,0,0);background-color:#800080;} -.blink--active .qq6{color:RGBA(0,0,0,0);background-color:#008080;} -.blink--active .qq7{color:RGBA(0,0,0,0);background-color:#c0c0c0;} -.blink--active .qq8{color:RGBA(0,0,0,0);background-color:#808080;} -.blink--active .qq9{color:RGBA(0,0,0,0);background-color:#ff0000;} -.blink--active .qq10{color:RGBA(0,0,0,0);background-color:#00ff00;} -.blink--active .qq11{color:RGBA(0,0,0,0);background-color:#ffff00;} -.blink--active .qq12{color:RGBA(0,0,0,0);background-color:#0000ff;} -.blink--active .qq13{color:RGBA(0,0,0,0);background-color:#ff00ff;} -.blink--active .qq14{color:RGBA(0,0,0,0);background-color:#00ffff;} -.blink--active .qq15{color:RGBA(0,0,0,0);background-color:#ffffff;} -.q0{color:#000000;} -.q1{color:#800000;} -.q2{color:#008000;} -.q3{color:#808000;} -.q4{color:#000080;} -.q5{color:#800080;} -.q6{color:#008080;} -.q7{color:#c0c0c0;} -.q8{color:#808080;} -.q9{color:#ff0000;} -.q10{color:#00ff00;} -.q11{color:#ffff00;} -.q12{color:#0000ff;} -.q13{color:#ff00ff;} -.q14{color:#00ffff;} -.q15{color:#ffffff;} -.b0{background-color:transparent;} -.b1{background-color:#800000;} -.b2{background-color:#008000;} -.b3{background-color:#808000;} -.b4{background-color:#000080;} -.b5{background-color:#800080;} -.b6{background-color:#008080;} -.b7{background-color:#c0c0c0;} -.b8{background-color:#808080;} -.b9{background-color:#ff0000;} -.b10{background-color:#00ff00;} -.b11{background-color:#ffff00;} -.b12{background-color:#0000ff;} -.b13{background-color:#ff00ff;} -.b14{background-color:#00ffff;} -.b15{background-color:#ffffff;} -.b0b0{background:-webkit-linear-gradient(left,transparent 50%,transparent 50%);} -.b0b1{background:-webkit-linear-gradient(left,transparent 50%,#800000 50%);} -.b0b2{background:-webkit-linear-gradient(left,transparent 50%,#008000 50%);} -.b0b3{background:-webkit-linear-gradient(left,transparent 50%,#808000 50%);} -.b0b4{background:-webkit-linear-gradient(left,transparent 50%,#000080 50%);} -.b0b5{background:-webkit-linear-gradient(left,transparent 50%,#800080 50%);} -.b0b6{background:-webkit-linear-gradient(left,transparent 50%,#008080 50%);} -.b0b7{background:-webkit-linear-gradient(left,transparent 50%,#c0c0c0 50%);} -.b0b8{background:-webkit-linear-gradient(left,transparent 50%,#808080 50%);} -.b0b9{background:-webkit-linear-gradient(left,transparent 50%,#ff0000 50%);} -.b0b10{background:-webkit-linear-gradient(left,transparent 50%,#00ff00 50%);} -.b0b11{background:-webkit-linear-gradient(left,transparent 50%,#ffff00 50%);} -.b0b12{background:-webkit-linear-gradient(left,transparent 50%,#0000ff 50%);} -.b0b13{background:-webkit-linear-gradient(left,transparent 50%,#ff00ff 50%);} -.b0b14{background:-webkit-linear-gradient(left,transparent 50%,#00ffff 50%);} -.b0b15{background:-webkit-linear-gradient(left,transparent 50%,#ffffff 50%);} -.b1b0{background:-webkit-linear-gradient(left,#800000 50%,transparent 50%);} -.b1b1{background:-webkit-linear-gradient(left,#800000 50%,#800000 50%);} -.b1b2{background:-webkit-linear-gradient(left,#800000 50%,#008000 50%);} -.b1b3{background:-webkit-linear-gradient(left,#800000 50%,#808000 50%);} -.b1b4{background:-webkit-linear-gradient(left,#800000 50%,#000080 50%);} -.b1b5{background:-webkit-linear-gradient(left,#800000 50%,#800080 50%);} -.b1b6{background:-webkit-linear-gradient(left,#800000 50%,#008080 50%);} -.b1b7{background:-webkit-linear-gradient(left,#800000 50%,#c0c0c0 50%);} -.b1b8{background:-webkit-linear-gradient(left,#800000 50%,#808080 50%);} -.b1b9{background:-webkit-linear-gradient(left,#800000 50%,#ff0000 50%);} -.b1b10{background:-webkit-linear-gradient(left,#800000 50%,#00ff00 50%);} -.b1b11{background:-webkit-linear-gradient(left,#800000 50%,#ffff00 50%);} -.b1b12{background:-webkit-linear-gradient(left,#800000 50%,#0000ff 50%);} -.b1b13{background:-webkit-linear-gradient(left,#800000 50%,#ff00ff 50%);} -.b1b14{background:-webkit-linear-gradient(left,#800000 50%,#00ffff 50%);} -.b1b15{background:-webkit-linear-gradient(left,#800000 50%,#ffffff 50%);} -.b2b0{background:-webkit-linear-gradient(left,#008000 50%,transparent 50%);} -.b2b1{background:-webkit-linear-gradient(left,#008000 50%,#800000 50%);} -.b2b2{background:-webkit-linear-gradient(left,#008000 50%,#008000 50%);} -.b2b3{background:-webkit-linear-gradient(left,#008000 50%,#808000 50%);} -.b2b4{background:-webkit-linear-gradient(left,#008000 50%,#000080 50%);} -.b2b5{background:-webkit-linear-gradient(left,#008000 50%,#800080 50%);} -.b2b6{background:-webkit-linear-gradient(left,#008000 50%,#008080 50%);} -.b2b7{background:-webkit-linear-gradient(left,#008000 50%,#c0c0c0 50%);} -.b2b8{background:-webkit-linear-gradient(left,#008000 50%,#808080 50%);} -.b2b9{background:-webkit-linear-gradient(left,#008000 50%,#ff0000 50%);} -.b2b10{background:-webkit-linear-gradient(left,#008000 50%,#00ff00 50%);} -.b2b11{background:-webkit-linear-gradient(left,#008000 50%,#ffff00 50%);} -.b2b12{background:-webkit-linear-gradient(left,#008000 50%,#0000ff 50%);} -.b2b13{background:-webkit-linear-gradient(left,#008000 50%,#ff00ff 50%);} -.b2b14{background:-webkit-linear-gradient(left,#008000 50%,#00ffff 50%);} -.b2b15{background:-webkit-linear-gradient(left,#008000 50%,#ffffff 50%);} -.b3b0{background:-webkit-linear-gradient(left,#808000 50%,transparent 50%);} -.b3b1{background:-webkit-linear-gradient(left,#808000 50%,#800000 50%);} -.b3b2{background:-webkit-linear-gradient(left,#808000 50%,#008000 50%);} -.b3b3{background:-webkit-linear-gradient(left,#808000 50%,#808000 50%);} -.b3b4{background:-webkit-linear-gradient(left,#808000 50%,#000080 50%);} -.b3b5{background:-webkit-linear-gradient(left,#808000 50%,#800080 50%);} -.b3b6{background:-webkit-linear-gradient(left,#808000 50%,#008080 50%);} -.b3b7{background:-webkit-linear-gradient(left,#808000 50%,#c0c0c0 50%);} -.b3b8{background:-webkit-linear-gradient(left,#808000 50%,#808080 50%);} -.b3b9{background:-webkit-linear-gradient(left,#808000 50%,#ff0000 50%);} -.b3b10{background:-webkit-linear-gradient(left,#808000 50%,#00ff00 50%);} -.b3b11{background:-webkit-linear-gradient(left,#808000 50%,#ffff00 50%);} -.b3b12{background:-webkit-linear-gradient(left,#808000 50%,#0000ff 50%);} -.b3b13{background:-webkit-linear-gradient(left,#808000 50%,#ff00ff 50%);} -.b3b14{background:-webkit-linear-gradient(left,#808000 50%,#00ffff 50%);} -.b3b15{background:-webkit-linear-gradient(left,#808000 50%,#ffffff 50%);} -.b4b0{background:-webkit-linear-gradient(left,#000080 50%,transparent 50%);} -.b4b1{background:-webkit-linear-gradient(left,#000080 50%,#800000 50%);} -.b4b2{background:-webkit-linear-gradient(left,#000080 50%,#008000 50%);} -.b4b3{background:-webkit-linear-gradient(left,#000080 50%,#808000 50%);} -.b4b4{background:-webkit-linear-gradient(left,#000080 50%,#000080 50%);} -.b4b5{background:-webkit-linear-gradient(left,#000080 50%,#800080 50%);} -.b4b6{background:-webkit-linear-gradient(left,#000080 50%,#008080 50%);} -.b4b7{background:-webkit-linear-gradient(left,#000080 50%,#c0c0c0 50%);} -.b4b8{background:-webkit-linear-gradient(left,#000080 50%,#808080 50%);} -.b4b9{background:-webkit-linear-gradient(left,#000080 50%,#ff0000 50%);} -.b4b10{background:-webkit-linear-gradient(left,#000080 50%,#00ff00 50%);} -.b4b11{background:-webkit-linear-gradient(left,#000080 50%,#ffff00 50%);} -.b4b12{background:-webkit-linear-gradient(left,#000080 50%,#0000ff 50%);} -.b4b13{background:-webkit-linear-gradient(left,#000080 50%,#ff00ff 50%);} -.b4b14{background:-webkit-linear-gradient(left,#000080 50%,#00ffff 50%);} -.b4b15{background:-webkit-linear-gradient(left,#000080 50%,#ffffff 50%);} -.b5b0{background:-webkit-linear-gradient(left,#800080 50%,transparent 50%);} -.b5b1{background:-webkit-linear-gradient(left,#800080 50%,#800000 50%);} -.b5b2{background:-webkit-linear-gradient(left,#800080 50%,#008000 50%);} -.b5b3{background:-webkit-linear-gradient(left,#800080 50%,#808000 50%);} -.b5b4{background:-webkit-linear-gradient(left,#800080 50%,#000080 50%);} -.b5b5{background:-webkit-linear-gradient(left,#800080 50%,#800080 50%);} -.b5b6{background:-webkit-linear-gradient(left,#800080 50%,#008080 50%);} -.b5b7{background:-webkit-linear-gradient(left,#800080 50%,#c0c0c0 50%);} -.b5b8{background:-webkit-linear-gradient(left,#800080 50%,#808080 50%);} -.b5b9{background:-webkit-linear-gradient(left,#800080 50%,#ff0000 50%);} -.b5b10{background:-webkit-linear-gradient(left,#800080 50%,#00ff00 50%);} -.b5b11{background:-webkit-linear-gradient(left,#800080 50%,#ffff00 50%);} -.b5b12{background:-webkit-linear-gradient(left,#800080 50%,#0000ff 50%);} -.b5b13{background:-webkit-linear-gradient(left,#800080 50%,#ff00ff 50%);} -.b5b14{background:-webkit-linear-gradient(left,#800080 50%,#00ffff 50%);} -.b5b15{background:-webkit-linear-gradient(left,#800080 50%,#ffffff 50%);} -.b6b0{background:-webkit-linear-gradient(left,#008080 50%,transparent 50%);} -.b6b1{background:-webkit-linear-gradient(left,#008080 50%,#800000 50%);} -.b6b2{background:-webkit-linear-gradient(left,#008080 50%,#008000 50%);} -.b6b3{background:-webkit-linear-gradient(left,#008080 50%,#808000 50%);} -.b6b4{background:-webkit-linear-gradient(left,#008080 50%,#000080 50%);} -.b6b5{background:-webkit-linear-gradient(left,#008080 50%,#800080 50%);} -.b6b6{background:-webkit-linear-gradient(left,#008080 50%,#008080 50%);} -.b6b7{background:-webkit-linear-gradient(left,#008080 50%,#c0c0c0 50%);} -.b6b8{background:-webkit-linear-gradient(left,#008080 50%,#808080 50%);} -.b6b9{background:-webkit-linear-gradient(left,#008080 50%,#ff0000 50%);} -.b6b10{background:-webkit-linear-gradient(left,#008080 50%,#00ff00 50%);} -.b6b11{background:-webkit-linear-gradient(left,#008080 50%,#ffff00 50%);} -.b6b12{background:-webkit-linear-gradient(left,#008080 50%,#0000ff 50%);} -.b6b13{background:-webkit-linear-gradient(left,#008080 50%,#ff00ff 50%);} -.b6b14{background:-webkit-linear-gradient(left,#008080 50%,#00ffff 50%);} -.b6b15{background:-webkit-linear-gradient(left,#008080 50%,#ffffff 50%);} -.b7b0{background:-webkit-linear-gradient(left,#c0c0c0 50%,transparent 50%);} -.b7b1{background:-webkit-linear-gradient(left,#c0c0c0 50%,#800000 50%);} -.b7b2{background:-webkit-linear-gradient(left,#c0c0c0 50%,#008000 50%);} -.b7b3{background:-webkit-linear-gradient(left,#c0c0c0 50%,#808000 50%);} -.b7b4{background:-webkit-linear-gradient(left,#c0c0c0 50%,#000080 50%);} -.b7b5{background:-webkit-linear-gradient(left,#c0c0c0 50%,#800080 50%);} -.b7b6{background:-webkit-linear-gradient(left,#c0c0c0 50%,#008080 50%);} -.b7b7{background:-webkit-linear-gradient(left,#c0c0c0 50%,#c0c0c0 50%);} -.b7b8{background:-webkit-linear-gradient(left,#c0c0c0 50%,#808080 50%);} -.b7b9{background:-webkit-linear-gradient(left,#c0c0c0 50%,#ff0000 50%);} -.b7b10{background:-webkit-linear-gradient(left,#c0c0c0 50%,#00ff00 50%);} -.b7b11{background:-webkit-linear-gradient(left,#c0c0c0 50%,#ffff00 50%);} -.b7b12{background:-webkit-linear-gradient(left,#c0c0c0 50%,#0000ff 50%);} -.b7b13{background:-webkit-linear-gradient(left,#c0c0c0 50%,#ff00ff 50%);} -.b7b14{background:-webkit-linear-gradient(left,#c0c0c0 50%,#00ffff 50%);} -.b7b15{background:-webkit-linear-gradient(left,#c0c0c0 50%,#ffffff 50%);} -.b8b0{background:-webkit-linear-gradient(left,#808080 50%,transparent 50%);} -.b8b1{background:-webkit-linear-gradient(left,#808080 50%,#800000 50%);} -.b8b2{background:-webkit-linear-gradient(left,#808080 50%,#008000 50%);} -.b8b3{background:-webkit-linear-gradient(left,#808080 50%,#808000 50%);} -.b8b4{background:-webkit-linear-gradient(left,#808080 50%,#000080 50%);} -.b8b5{background:-webkit-linear-gradient(left,#808080 50%,#800080 50%);} -.b8b6{background:-webkit-linear-gradient(left,#808080 50%,#008080 50%);} -.b8b7{background:-webkit-linear-gradient(left,#808080 50%,#c0c0c0 50%);} -.b8b8{background:-webkit-linear-gradient(left,#808080 50%,#808080 50%);} -.b8b9{background:-webkit-linear-gradient(left,#808080 50%,#ff0000 50%);} -.b8b10{background:-webkit-linear-gradient(left,#808080 50%,#00ff00 50%);} -.b8b11{background:-webkit-linear-gradient(left,#808080 50%,#ffff00 50%);} -.b8b12{background:-webkit-linear-gradient(left,#808080 50%,#0000ff 50%);} -.b8b13{background:-webkit-linear-gradient(left,#808080 50%,#ff00ff 50%);} -.b8b14{background:-webkit-linear-gradient(left,#808080 50%,#00ffff 50%);} -.b8b15{background:-webkit-linear-gradient(left,#808080 50%,#ffffff 50%);} -.b9b0{background:-webkit-linear-gradient(left,#ff0000 50%,transparent 50%);} -.b9b1{background:-webkit-linear-gradient(left,#ff0000 50%,#800000 50%);} -.b9b2{background:-webkit-linear-gradient(left,#ff0000 50%,#008000 50%);} -.b9b3{background:-webkit-linear-gradient(left,#ff0000 50%,#808000 50%);} -.b9b4{background:-webkit-linear-gradient(left,#ff0000 50%,#000080 50%);} -.b9b5{background:-webkit-linear-gradient(left,#ff0000 50%,#800080 50%);} -.b9b6{background:-webkit-linear-gradient(left,#ff0000 50%,#008080 50%);} -.b9b7{background:-webkit-linear-gradient(left,#ff0000 50%,#c0c0c0 50%);} -.b9b8{background:-webkit-linear-gradient(left,#ff0000 50%,#808080 50%);} -.b9b9{background:-webkit-linear-gradient(left,#ff0000 50%,#ff0000 50%);} -.b9b10{background:-webkit-linear-gradient(left,#ff0000 50%,#00ff00 50%);} -.b9b11{background:-webkit-linear-gradient(left,#ff0000 50%,#ffff00 50%);} -.b9b12{background:-webkit-linear-gradient(left,#ff0000 50%,#0000ff 50%);} -.b9b13{background:-webkit-linear-gradient(left,#ff0000 50%,#ff00ff 50%);} -.b9b14{background:-webkit-linear-gradient(left,#ff0000 50%,#00ffff 50%);} -.b9b15{background:-webkit-linear-gradient(left,#ff0000 50%,#ffffff 50%);} -.b10b0{background:-webkit-linear-gradient(left,#00ff00 50%,transparent 50%);} -.b10b1{background:-webkit-linear-gradient(left,#00ff00 50%,#800000 50%);} -.b10b2{background:-webkit-linear-gradient(left,#00ff00 50%,#008000 50%);} -.b10b3{background:-webkit-linear-gradient(left,#00ff00 50%,#808000 50%);} -.b10b4{background:-webkit-linear-gradient(left,#00ff00 50%,#000080 50%);} -.b10b5{background:-webkit-linear-gradient(left,#00ff00 50%,#800080 50%);} -.b10b6{background:-webkit-linear-gradient(left,#00ff00 50%,#008080 50%);} -.b10b7{background:-webkit-linear-gradient(left,#00ff00 50%,#c0c0c0 50%);} -.b10b8{background:-webkit-linear-gradient(left,#00ff00 50%,#808080 50%);} -.b10b9{background:-webkit-linear-gradient(left,#00ff00 50%,#ff0000 50%);} -.b10b10{background:-webkit-linear-gradient(left,#00ff00 50%,#00ff00 50%);} -.b10b11{background:-webkit-linear-gradient(left,#00ff00 50%,#ffff00 50%);} -.b10b12{background:-webkit-linear-gradient(left,#00ff00 50%,#0000ff 50%);} -.b10b13{background:-webkit-linear-gradient(left,#00ff00 50%,#ff00ff 50%);} -.b10b14{background:-webkit-linear-gradient(left,#00ff00 50%,#00ffff 50%);} -.b10b15{background:-webkit-linear-gradient(left,#00ff00 50%,#ffffff 50%);} -.b11b0{background:-webkit-linear-gradient(left,#ffff00 50%,transparent 50%);} -.b11b1{background:-webkit-linear-gradient(left,#ffff00 50%,#800000 50%);} -.b11b2{background:-webkit-linear-gradient(left,#ffff00 50%,#008000 50%);} -.b11b3{background:-webkit-linear-gradient(left,#ffff00 50%,#808000 50%);} -.b11b4{background:-webkit-linear-gradient(left,#ffff00 50%,#000080 50%);} -.b11b5{background:-webkit-linear-gradient(left,#ffff00 50%,#800080 50%);} -.b11b6{background:-webkit-linear-gradient(left,#ffff00 50%,#008080 50%);} -.b11b7{background:-webkit-linear-gradient(left,#ffff00 50%,#c0c0c0 50%);} -.b11b8{background:-webkit-linear-gradient(left,#ffff00 50%,#808080 50%);} -.b11b9{background:-webkit-linear-gradient(left,#ffff00 50%,#ff0000 50%);} -.b11b10{background:-webkit-linear-gradient(left,#ffff00 50%,#00ff00 50%);} -.b11b11{background:-webkit-linear-gradient(left,#ffff00 50%,#ffff00 50%);} -.b11b12{background:-webkit-linear-gradient(left,#ffff00 50%,#0000ff 50%);} -.b11b13{background:-webkit-linear-gradient(left,#ffff00 50%,#ff00ff 50%);} -.b11b14{background:-webkit-linear-gradient(left,#ffff00 50%,#00ffff 50%);} -.b11b15{background:-webkit-linear-gradient(left,#ffff00 50%,#ffffff 50%);} -.b12b0{background:-webkit-linear-gradient(left,#0000ff 50%,transparent 50%);} -.b12b1{background:-webkit-linear-gradient(left,#0000ff 50%,#800000 50%);} -.b12b2{background:-webkit-linear-gradient(left,#0000ff 50%,#008000 50%);} -.b12b3{background:-webkit-linear-gradient(left,#0000ff 50%,#808000 50%);} -.b12b4{background:-webkit-linear-gradient(left,#0000ff 50%,#000080 50%);} -.b12b5{background:-webkit-linear-gradient(left,#0000ff 50%,#800080 50%);} -.b12b6{background:-webkit-linear-gradient(left,#0000ff 50%,#008080 50%);} -.b12b7{background:-webkit-linear-gradient(left,#0000ff 50%,#c0c0c0 50%);} -.b12b8{background:-webkit-linear-gradient(left,#0000ff 50%,#808080 50%);} -.b12b9{background:-webkit-linear-gradient(left,#0000ff 50%,#ff0000 50%);} -.b12b10{background:-webkit-linear-gradient(left,#0000ff 50%,#00ff00 50%);} -.b12b11{background:-webkit-linear-gradient(left,#0000ff 50%,#ffff00 50%);} -.b12b12{background:-webkit-linear-gradient(left,#0000ff 50%,#0000ff 50%);} -.b12b13{background:-webkit-linear-gradient(left,#0000ff 50%,#ff00ff 50%);} -.b12b14{background:-webkit-linear-gradient(left,#0000ff 50%,#00ffff 50%);} -.b12b15{background:-webkit-linear-gradient(left,#0000ff 50%,#ffffff 50%);} -.b13b0{background:-webkit-linear-gradient(left,#ff00ff 50%,transparent 50%);} -.b13b1{background:-webkit-linear-gradient(left,#ff00ff 50%,#800000 50%);} -.b13b2{background:-webkit-linear-gradient(left,#ff00ff 50%,#008000 50%);} -.b13b3{background:-webkit-linear-gradient(left,#ff00ff 50%,#808000 50%);} -.b13b4{background:-webkit-linear-gradient(left,#ff00ff 50%,#000080 50%);} -.b13b5{background:-webkit-linear-gradient(left,#ff00ff 50%,#800080 50%);} -.b13b6{background:-webkit-linear-gradient(left,#ff00ff 50%,#008080 50%);} -.b13b7{background:-webkit-linear-gradient(left,#ff00ff 50%,#c0c0c0 50%);} -.b13b8{background:-webkit-linear-gradient(left,#ff00ff 50%,#808080 50%);} -.b13b9{background:-webkit-linear-gradient(left,#ff00ff 50%,#ff0000 50%);} -.b13b10{background:-webkit-linear-gradient(left,#ff00ff 50%,#00ff00 50%);} -.b13b11{background:-webkit-linear-gradient(left,#ff00ff 50%,#ffff00 50%);} -.b13b12{background:-webkit-linear-gradient(left,#ff00ff 50%,#0000ff 50%);} -.b13b13{background:-webkit-linear-gradient(left,#ff00ff 50%,#ff00ff 50%);} -.b13b14{background:-webkit-linear-gradient(left,#ff00ff 50%,#00ffff 50%);} -.b13b15{background:-webkit-linear-gradient(left,#ff00ff 50%,#ffffff 50%);} -.b14b0{background:-webkit-linear-gradient(left,#00ffff 50%,transparent 50%);} -.b14b1{background:-webkit-linear-gradient(left,#00ffff 50%,#800000 50%);} -.b14b2{background:-webkit-linear-gradient(left,#00ffff 50%,#008000 50%);} -.b14b3{background:-webkit-linear-gradient(left,#00ffff 50%,#808000 50%);} -.b14b4{background:-webkit-linear-gradient(left,#00ffff 50%,#000080 50%);} -.b14b5{background:-webkit-linear-gradient(left,#00ffff 50%,#800080 50%);} -.b14b6{background:-webkit-linear-gradient(left,#00ffff 50%,#008080 50%);} -.b14b7{background:-webkit-linear-gradient(left,#00ffff 50%,#c0c0c0 50%);} -.b14b8{background:-webkit-linear-gradient(left,#00ffff 50%,#808080 50%);} -.b14b9{background:-webkit-linear-gradient(left,#00ffff 50%,#ff0000 50%);} -.b14b10{background:-webkit-linear-gradient(left,#00ffff 50%,#00ff00 50%);} -.b14b11{background:-webkit-linear-gradient(left,#00ffff 50%,#ffff00 50%);} -.b14b12{background:-webkit-linear-gradient(left,#00ffff 50%,#0000ff 50%);} -.b14b13{background:-webkit-linear-gradient(left,#00ffff 50%,#ff00ff 50%);} -.b14b14{background:-webkit-linear-gradient(left,#00ffff 50%,#00ffff 50%);} -.b14b15{background:-webkit-linear-gradient(left,#00ffff 50%,#ffffff 50%);} -.b15b0{background:-webkit-linear-gradient(left,#ffffff 50%,transparent 50%);} -.b15b1{background:-webkit-linear-gradient(left,#ffffff 50%,#800000 50%);} -.b15b2{background:-webkit-linear-gradient(left,#ffffff 50%,#008000 50%);} -.b15b3{background:-webkit-linear-gradient(left,#ffffff 50%,#808000 50%);} -.b15b4{background:-webkit-linear-gradient(left,#ffffff 50%,#000080 50%);} -.b15b5{background:-webkit-linear-gradient(left,#ffffff 50%,#800080 50%);} -.b15b6{background:-webkit-linear-gradient(left,#ffffff 50%,#008080 50%);} -.b15b7{background:-webkit-linear-gradient(left,#ffffff 50%,#c0c0c0 50%);} -.b15b8{background:-webkit-linear-gradient(left,#ffffff 50%,#808080 50%);} -.b15b9{background:-webkit-linear-gradient(left,#ffffff 50%,#ff0000 50%);} -.b15b10{background:-webkit-linear-gradient(left,#ffffff 50%,#00ff00 50%);} -.b15b11{background:-webkit-linear-gradient(left,#ffffff 50%,#ffff00 50%);} -.b15b12{background:-webkit-linear-gradient(left,#ffffff 50%,#0000ff 50%);} -.b15b13{background:-webkit-linear-gradient(left,#ffffff 50%,#ff00ff 50%);} -.b15b14{background:-webkit-linear-gradient(left,#ffffff 50%,#00ffff 50%);} -.b15b15{background:-webkit-linear-gradient(left,#ffffff 50%,#ffffff 50%);} -.o{position:relative;display:inline-block;} -.o::after{content:attr(data-text);position:absolute;left:0px;width:50%;overflow:hidden;-webkit-user-select: none;pointer-events:none;} -.w0::after{color:#000000;text-shadow:#000000 0 0 0px,#000000 0 0 0px,#000000 0 0 0px,#000000 0 0 0px,#000000 0 0 0px;} -.w1::after{color:#800000;text-shadow:#800000 0 0 0px,#800000 0 0 0px,#800000 0 0 0px,#800000 0 0 0px,#800000 0 0 0px;} -.w2::after{color:#008000;text-shadow:#008000 0 0 0px,#008000 0 0 0px,#008000 0 0 0px,#008000 0 0 0px,#008000 0 0 0px;} -.w3::after{color:#808000;text-shadow:#808000 0 0 0px,#808000 0 0 0px,#808000 0 0 0px,#808000 0 0 0px,#808000 0 0 0px;} -.w4::after{color:#000080;text-shadow:#000080 0 0 0px,#000080 0 0 0px,#000080 0 0 0px,#000080 0 0 0px,#000080 0 0 0px;} -.w5::after{color:#800080;text-shadow:#800080 0 0 0px,#800080 0 0 0px,#800080 0 0 0px,#800080 0 0 0px,#800080 0 0 0px;} -.w6::after{color:#008080;text-shadow:#008080 0 0 0px,#008080 0 0 0px,#008080 0 0 0px,#008080 0 0 0px,#008080 0 0 0px;} -.w7::after{color:#c0c0c0;text-shadow:#c0c0c0 0 0 0px,#c0c0c0 0 0 0px,#c0c0c0 0 0 0px,#c0c0c0 0 0 0px,#c0c0c0 0 0 0px;} -.w8::after{color:#808080;text-shadow:#808080 0 0 0px,#808080 0 0 0px,#808080 0 0 0px,#808080 0 0 0px,#808080 0 0 0px;} -.w9::after{color:#ff0000;text-shadow:#ff0000 0 0 0px,#ff0000 0 0 0px,#ff0000 0 0 0px,#ff0000 0 0 0px,#ff0000 0 0 0px;} -.w10::after{color:#00ff00;text-shadow:#00ff00 0 0 0px,#00ff00 0 0 0px,#00ff00 0 0 0px,#00ff00 0 0 0px,#00ff00 0 0 0px;} -.w11::after{color:#ffff00;text-shadow:#ffff00 0 0 0px,#ffff00 0 0 0px,#ffff00 0 0 0px,#ffff00 0 0 0px,#ffff00 0 0 0px;} -.w12::after{color:#0000ff;text-shadow:#0000ff 0 0 0px,#0000ff 0 0 0px,#0000ff 0 0 0px,#0000ff 0 0 0px,#0000ff 0 0 0px;} -.w13::after{color:#ff00ff;text-shadow:#ff00ff 0 0 0px,#ff00ff 0 0 0px,#ff00ff 0 0 0px,#ff00ff 0 0 0px,#ff00ff 0 0 0px;} -.w14::after{color:#00ffff;text-shadow:#00ffff 0 0 0px,#00ffff 0 0 0px,#00ffff 0 0 0px,#00ffff 0 0 0px,#00ffff 0 0 0px;} -.w15::after{color:#ffffff;text-shadow:#ffffff 0 0 0px,#ffffff 0 0 0px,#ffffff 0 0 0px,#ffffff 0 0 0px,#ffffff 0 0 0px;} -.trans-fix .b1 { box-shadow:0 0 5px 5px #800000 inset; } -.trans-fix .b2 { box-shadow:0 0 5px 5px #008000 inset; } -.trans-fix .b3 { box-shadow:0 0 5px 5px #808000 inset; } -.trans-fix .b4 { box-shadow:0 0 5px 5px #000080 inset; } -.trans-fix .b5 { box-shadow:0 0 5px 5px #800080 inset; } -.trans-fix .b6 { box-shadow:0 0 5px 5px #008080 inset; } -.trans-fix .b7 { box-shadow:0 0 5px 5px #c0c0c0 inset; } -.trans-fix .b8 { box-shadow:0 0 5px 5px #808080 inset; } -.trans-fix .b9 { box-shadow:0 0 5px 5px #ff0000 inset; } -.trans-fix .b10 { box-shadow:0 0 5px 5px #00ff00 inset; } -.trans-fix .b11 { box-shadow:0 0 5px 5px #ffff00 inset; } -.trans-fix .b12 { box-shadow:0 0 5px 5px #0000ff inset; } -.trans-fix .b13 { box-shadow:0 0 5px 5px #ff00ff inset; } -.trans-fix .b14 { box-shadow:0 0 5px 5px #00ffff inset; } -.trans-fix .b15 { box-shadow:0 0 5px 5px #ffffff inset; } +.blink--active .qq, .blink--active .qq::before, .blink--active .rqq::after{color:RGBA(0,0,0,0);} +.q0, .q0::before, .rq0::after{color:#000000;} +.q1, .q1::before, .rq1::after{color:#800000;} +.q2, .q2::before, .rq2::after{color:#008000;} +.q3, .q3::before, .rq3::after{color:#808000;} +.q4, .q4::before, .rq4::after{color:#000080;} +.q5, .q5::before, .rq5::after{color:#800080;} +.q6, .q6::before, .rq6::after{color:#008080;} +.y:not(.o):hover, .y:hover::before, .y:hover::after, .q7, .q7::before, .rq7::after{color:#c0c0c0;} +.q8, .q8::before, .rq8::after{color:#808080;} +.q9, .q9::before, .rq9::after{color:#ff0000;} +.q10, .q10::before, .rq10::after{color:#00ff00;} +.q11, .q11::before, .rq11::after{color:#ffff00;} +.q12, .q12::before, .rq12::after{color:#0000ff;} +.q13, .q13::before, .rq13::after{color:#ff00ff;} +.q14, .q14::before, .rq14::after{color:#00ffff;} +.q15, .q15::before, .rq15::after{color:#ffffff;} +.b0, .b0::before, .rb0::after{background-color:transparent;} +.b1, .b1::before, .rb1::after{background-color:#800000;} +.b2, .b2::before, .rb2::after{background-color:#008000;} +.b3, .b3::before, .rb3::after{background-color:#808000;} +.b4, .b4::before, .rb4::after{background-color:#000080;} +.b5, .b5::before, .rb5::after{background-color:#800080;} +.b6, .b6::before, .rb6::after{background-color:#008080;} +.b7, .b7::before, .rb7::after{background-color:#c0c0c0;} +.b8, .b8::before, .rb8::after{background-color:#808080;} +.b9, .b9::before, .rb9::after{background-color:#ff0000;} +.b10, .b10::before, .rb10::after{background-color:#00ff00;} +.b11, .b11::before, .rb11::after{background-color:#ffff00;} +.b12, .b12::before, .rb12::after{background-color:#0000ff;} +.b13, .b13::before, .rb13::after{background-color:#ff00ff;} +.b14, .b14::before, .rb14::after{background-color:#00ffff;} +.b15, .b15::before, .rb15::after{background-color:#ffffff;} +.o{position:relative;display:inline-block;color:RGBA(0,0,0,0);background-color:RGBA(0,0,0,0);z-index:1;} +.o::before, .o::after{content:attr(data-text);position:absolute;left:0px;width:50%;overflow:hidden;z-index:-1;} +.o::after{left:50%;text-indent:-100%;} +.trans-fix .b1, .trans-fix .b1::before, .trans-fix .rb1::after { box-shadow:0 0 5px 5px #800000 inset; } +.trans-fix .b2, .trans-fix .b2::before, .trans-fix .rb2::after { box-shadow:0 0 5px 5px #008000 inset; } +.trans-fix .b3, .trans-fix .b3::before, .trans-fix .rb3::after { box-shadow:0 0 5px 5px #808000 inset; } +.trans-fix .b4, .trans-fix .b4::before, .trans-fix .rb4::after { box-shadow:0 0 5px 5px #000080 inset; } +.trans-fix .b5, .trans-fix .b5::before, .trans-fix .rb5::after { box-shadow:0 0 5px 5px #800080 inset; } +.trans-fix .b6, .trans-fix .b6::before, .trans-fix .rb6::after { box-shadow:0 0 5px 5px #008080 inset; } +.trans-fix .b7, .trans-fix .b7::before, .trans-fix .rb7::after { box-shadow:0 0 5px 5px #c0c0c0 inset; } +.trans-fix .b8, .trans-fix .b8::before, .trans-fix .rb8::after { box-shadow:0 0 5px 5px #808080 inset; } +.trans-fix .b9, .trans-fix .b9::before, .trans-fix .rb9::after { box-shadow:0 0 5px 5px #ff0000 inset; } +.trans-fix .b10, .trans-fix .b10::before, .trans-fix .rb10::after { box-shadow:0 0 5px 5px #00ff00 inset; } +.trans-fix .b11, .trans-fix .b11::before, .trans-fix .rb11::after { box-shadow:0 0 5px 5px #ffff00 inset; } +.trans-fix .b12, .trans-fix .b12::before, .trans-fix .rb12::after { box-shadow:0 0 5px 5px #0000ff inset; } +.trans-fix .b13, .trans-fix .b13::before, .trans-fix .rb13::after { box-shadow:0 0 5px 5px #ff00ff inset; } +.trans-fix .b14, .trans-fix .b14::before, .trans-fix .rb14::after { box-shadow:0 0 5px 5px #00ffff inset; } +.trans-fix .b15, .trans-fix .b15::before, .trans-fix .rb15::after { box-shadow:0 0 5px 5px #ffffff inset; } From 17fd98010a265169bed11fc99702c3f328efa501 Mon Sep 17 00:00:00 2001 From: "Wei-Cheng Yeh (IID)" Date: Mon, 13 Dec 2021 01:59:23 +0800 Subject: [PATCH 2/2] fix(components/Row): fix black bg on two-color char tail not causing visual effects MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This issue was described in commit a75d5501ece7a6c511984d0900af4cfcc628bcde ("Fix two-color character rendering bug when the right-half is black."). This issue was caused by the HTML layout of two-color chars, e.g.: ```html Ａ Ｍ ``` To fix this issue, WordSegmentBuilder is specialized for two-color chars (as JavaScript class TwoColorWordBuilder) so as to instead generate such layout as: ```html Ａ Ｍ ``` 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. Note that this requires the fix introduced in commit d6ebaab0ec5f0a66d7d365d065c058cf84e09558 ("feat: rework two-color-word effect & implement blinking") to make the un-nested span rendered expectedly. --- src/components/Row/ColorSegmentBuilder.js | 9 ++--- .../Row/WordSegmentBuilder/index.js | 34 +++++++++++++------ 2 files changed, 28 insertions(+), 15 deletions(-) diff --git a/src/components/Row/ColorSegmentBuilder.js b/src/components/Row/ColorSegmentBuilder.js index 50ff635e..71c3d7dd 100644 --- a/src/components/Row/ColorSegmentBuilder.js +++ b/src/components/Row/ColorSegmentBuilder.js @@ -1,4 +1,4 @@ -import WordSegmentBuilder from "./WordSegmentBuilder"; +import { WordSegmentBuilder, TwoColorWordBuilder } from "./WordSegmentBuilder"; import { b2u, isDBCSLead } from "../../js/string_util"; import { symbolTable } from "../../js/symbol_table"; @@ -56,13 +56,14 @@ export class ColorSegmentBuilder { return; } if (!leadColor.equals(ch.getColor())) { - this.beginSegment(leadColor); - this.wordBuilder.appendTwoColorWord( - text, + this.segs.push(this.wordBuilder.build()); + this.wordBuilder = new TwoColorWordBuilder( + this.segs.length, leadColor, ch.getColor(), this.forceWidth ); + this.wordBuilder.appendNormalText(text); return; } const forceWidth = shouldForceWidth(text) ? this.forceWidth : 0; diff --git a/src/components/Row/WordSegmentBuilder/index.js b/src/components/Row/WordSegmentBuilder/index.js index b46dad47..4498f3d7 100644 --- a/src/components/Row/WordSegmentBuilder/index.js +++ b/src/components/Row/WordSegmentBuilder/index.js @@ -32,24 +32,36 @@ export class WordSegmentBuilder { ); } - appendTwoColorWord(text, colorLead, colorTail, forceWidth) { - this.inner.push( - ); } +} + +export class TwoColorWordBuilder extends WordSegmentBuilder { + constructor(key, colorState, colorTail, forceWidth) { + super(key, colorState); + this.colorTail = colorTail; + this.forceWidth = forceWidth; + } + + isLastSegmentSameColor(color) { + return false; // forbid appending + } build() { return ( - ); }