← All changes
|
includes/widgets/Styled_Text_Builder/style.css
+32
-25
51.1.44
→
51.1.86
View file →
| @@ -26,42 +26,49 @@ | ||
| 26 | 26 | |
| 27 | 27 | /* Spoiler / Thanos effect (Pro) */ |
| 28 | 28 | .king-addons-styled-text--spoiler .king-addons-styled-text-inner { |
| 29 | 29 | position: relative; |
| 30 | - color: transparent; | |
| 31 | - -webkit-text-fill-color: transparent; | |
| 32 | 30 | cursor: pointer; |
| 31 | + display: inline-block; | |
| 33 | 32 | } |
| 34 | 33 | |
| 35 | -.king-addons-styled-text--spoiler .king-addons-styled-text-inner::after { | |
| 36 | - content: ''; | |
| 37 | - position: absolute; | |
| 38 | - inset: -4px -6px; | |
| 39 | - background: radial-gradient(circle, var(--kng-spoiler-color, #9ca3af) 35%, transparent 36%) 0 0 / 8px 8px repeat; | |
| 40 | - opacity: var(--kng-spoiler-opacity, 0.92); | |
| 41 | - mix-blend-mode: multiply; | |
| 42 | - pointer-events: none; | |
| 43 | - animation: king-addons-spoiler-move var(--kng-spoiler-speed, 1.6s) linear infinite; | |
| 44 | - border-radius: 6px; | |
| 45 | - filter: blur(0.3px); | |
| 34 | +/* Spoiler text is masked: only a "spotlight" area is visible while hovering/scrubbing */ | |
| 35 | +.king-addons-styled-text--spoiler .king-addons-styled-text-inner > span { | |
| 36 | + visibility: visible; | |
| 37 | + -webkit-mask-image: radial-gradient( | |
| 38 | + circle var(--kng-spoiler-spot-r, 0px) at var(--kng-spoiler-spot-x, 0px) var(--kng-spoiler-spot-y, 0px), | |
| 39 | + #000 0%, | |
| 40 | + #000 65%, | |
| 41 | + transparent 100% | |
| 42 | + ); | |
| 43 | + mask-image: radial-gradient( | |
| 44 | + circle var(--kng-spoiler-spot-r, 0px) at var(--kng-spoiler-spot-x, 0px) var(--kng-spoiler-spot-y, 0px), | |
| 45 | + #000 0%, | |
| 46 | + #000 65%, | |
| 47 | + transparent 100% | |
| 48 | + ); | |
| 49 | + -webkit-mask-repeat: no-repeat; | |
| 50 | + mask-repeat: no-repeat; | |
| 46 | 51 | } |
| 47 | 52 | |
| 48 | -.king-addons-styled-text--spoiler .king-addons-styled-text-inner.is-revealed { | |
| 49 | - color: inherit; | |
| 50 | - -webkit-text-fill-color: initial; | |
| 53 | +.king-addons-styled-text--spoiler .king-addons-styled-text-inner.is-revealed > span { | |
| 54 | + -webkit-mask-image: none; | |
| 55 | + mask-image: none; | |
| 51 | 56 | } |
| 52 | 57 | |
| 53 | -.king-addons-styled-text--spoiler .king-addons-styled-text-inner.is-revealed::after { | |
| 54 | - opacity: 0; | |
| 58 | +.king-addons-styled-text--spoiler .king-addons-spoiler-canvas { | |
| 59 | + position: absolute; | |
| 60 | + inset: -2px; | |
| 61 | + width: calc(100% + 4px); | |
| 62 | + height: calc(100% + 4px); | |
| 63 | + pointer-events: none; | |
| 64 | + display: block; | |
| 65 | + opacity: 1; | |
| 66 | + transition: opacity 0.25s ease; | |
| 55 | 67 | } |
| 56 | 68 | |
| 57 | -@keyframes king-addons-spoiler-move { | |
| 58 | - 0% { | |
| 59 | - transform: translate3d(0, 0, 0); | |
| 60 | - } | |
| 61 | - 100% { | |
| 62 | - transform: translate3d(8px, 6px, 0); | |
| 63 | - } | |
| 69 | +.king-addons-styled-text--spoiler .king-addons-styled-text-inner.is-revealed .king-addons-spoiler-canvas { | |
| 70 | + opacity: 0; | |
| 64 | 71 | } |
| 65 | 72 | |
| 66 | 73 | /* Typing text (Pro) */ |
| 67 | 74 | .king-addons-styled-text--typing { |