captcha-web-sdk 1.0.6 → 1.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/tac/css/tac.css +2 -2
- package/package.json +1 -1
- package/readme.md +5 -3
package/dist/tac/css/tac.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
#captcha-web-sdk-parent{--captcha-primary: #0f6fdc;--captcha-primary-strong: #0a58b6;--captcha-primary-soft: #
|
|
1
|
+
#captcha-web-sdk-parent{--captcha-primary: #0f6fdc;--captcha-primary-strong: #0a58b6;--captcha-primary-soft: #dff0ff;--captcha-surface: #ffffff;--captcha-surface-soft: #f3f6fa;--captcha-border: #d9e4ee;--captcha-text: #1f2a36;--captcha-text-muted: #73808d;--captcha-success: #0f9f6e;--captcha-error: #e85b52;box-shadow:0 14px 28px rgba(15,23,42,.12);width:348px;min-height:388px;overflow:hidden;position:relative;z-index:997;box-sizing:border-box;border-radius:8px;padding:14px 14px 12px;background:#fff}#captcha-web-sdk-parent .captcha-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;position:relative;z-index:1}#captcha-web-sdk-parent .captcha-heading{min-width:0;flex:1 1 auto}#captcha-web-sdk-parent .captcha-title{color:var(--captcha-text);font-size:17px;line-height:1.25;font-weight:600;letter-spacing:-0.02em}#captcha-web-sdk-parent .captcha-subtitle{color:var(--captcha-text-muted);font-size:12px;line-height:1.45;margin-top:3px}#captcha-web-sdk-parent .captcha-icon-btn{width:32px;height:32px;flex:0 0 32px;border:0;background:rgba(0,0,0,0);border-radius:0;cursor:pointer;position:relative;box-shadow:none;transition:color .2s ease,transform .2s ease}#captcha-web-sdk-parent .captcha-icon-btn:hover{background-color:rgba(0,0,0,0)}#captcha-web-sdk-parent .captcha-icon-btn:focus-visible{outline:3px solid rgba(15,111,220,.18);outline-offset:2px}#captcha-web-sdk-parent .captcha-icon-btn:before,#captcha-web-sdk-parent .captcha-icon-btn:after{content:"";position:absolute;left:15px;top:7px;width:2px;height:18px;border-radius:999px;background:#8e9aa8}#captcha-web-sdk-parent .captcha-icon-btn:before{transform:rotate(45deg)}#captcha-web-sdk-parent .captcha-icon-btn:after{transform:rotate(-45deg)}#captcha-web-sdk-parent #captcha-web-sdk-box{height:260px;width:100%;position:relative;overflow:hidden;border-radius:4px;background:rgba(0,0,0,0)}#captcha-web-sdk-parent #captcha-web-sdk-box .loading{width:120px;height:20px;-webkit-mask:linear-gradient(90deg, #000 70%, rgba(0, 0, 0, 0) 0) 0/20%;background:linear-gradient(var(--captcha-primary) 0 0) 0/0% no-repeat rgba(15,111,220,.15);animation:cartoon 1s infinite steps(6);margin:120px auto}@keyframes cartoon{100%{background-size:120%}}#captcha-web-sdk-parent #captcha-web-sdk-box #captcha-web-sdk{transform-style:preserve-3d;will-change:transform;transition-duration:.45s;transform:translateX(-300px)}#captcha-web-sdk-parent #captcha-web-sdk-bg-img{background-color:#fff;background-position:top;background-size:cover;z-index:-1;width:100%;height:100%;top:0;left:0;position:absolute;border-radius:4px}#captcha-web-sdk-parent .slider-bottom{margin-top:12px;min-height:32px;display:flex;align-items:center;justify-content:space-between;gap:12px}#captcha-web-sdk-parent .slider-bottom .captcha-action-btn{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border:0;background:rgba(255,255,255,.94);color:#405060;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 6px 14px rgba(15,23,42,.08);transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}#captcha-web-sdk-parent .slider-bottom .refresh-btn.captcha-action-btn{min-height:20px;width:20px;height:20px;padding:0;gap:0;background:rgba(0,0,0,0);box-shadow:none;border-radius:0}#captcha-web-sdk-parent .slider-bottom .refresh-btn.captcha-action-btn:hover{background:rgba(0,0,0,0);box-shadow:none;color:var(--captcha-primary)}#captcha-web-sdk-parent .slider-bottom .captcha-action-btn:hover{background:#fff;color:var(--captcha-primary);box-shadow:0 8px 18px rgba(15,23,42,.1)}#captcha-web-sdk-parent .slider-bottom .captcha-action-btn:focus-visible{outline:3px solid rgba(15,111,220,.18);outline-offset:2px}#captcha-web-sdk-parent .slider-bottom .captcha-action-icon{position:relative;width:20px;height:20px;display:inline-block;flex:0 0 20px}#captcha-web-sdk-parent .slider-bottom .captcha-action-icon-refresh{background-image:url(../../tac/images/icon.png);background-repeat:no-repeat;background-position:0 -167px}#captcha-web-sdk-parent .slider-bottom .refresh-btn .captcha-action-text{display:none}#captcha-web-sdk-parent .slider-bottom .captcha-action-btn.is-refreshing .captcha-action-icon-refresh{animation:captcha-refresh-spin .65s ease-in-out}#captcha-web-sdk-parent .slider-bottom .logo{height:18px;width:auto;object-fit:contain;margin-left:auto;opacity:.72}#captcha-web-sdk-parent .slider-move-shadow{height:100%;width:12px;background:linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 55%, rgba(255, 255, 255, 0) 100%);position:absolute;top:0;left:0;filter:opacity(0.35)}#captcha-web-sdk-parent #captcha-web-sdk-slider-move-track-mask{border-width:0;width:0;height:100%;background:#78bdf2;opacity:1;position:absolute;top:0;left:0;border-radius:0}@keyframes captcha-refresh-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
|
|
2
2
|
#captcha-web-sdk{text-align:left;box-sizing:content-box;width:300px;height:260px;z-index:999;color:var(--captcha-text)}#captcha-web-sdk .slider-bottom .logo{height:30px}#captcha-web-sdk .slider-bottom{height:19px;width:100%}#captcha-web-sdk .content .captcha-web-sdk-tips{min-height:30px;width:100%;position:absolute;bottom:-32px;left:0;z-index:999;font-size:12px;line-height:1.35;padding:6px 10px;color:#fff;text-align:center;box-sizing:border-box;transition:bottom .3s ease-in-out;border-bottom-left-radius:8px;border-bottom-right-radius:8px}#captcha-web-sdk .content .captcha-web-sdk-tips.captcha-web-sdk-tips-error{background:rgba(232,91,82,.96)}#captcha-web-sdk .content .captcha-web-sdk-tips.captcha-web-sdk-tips-success{background:rgba(15,159,110,.96)}#captcha-web-sdk .content .captcha-web-sdk-tips.captcha-web-sdk-tips-on{bottom:0}#captcha-web-sdk .content #captcha-web-sdk-loading{z-index:9999;background-color:#f7fafc;text-align:center;height:100%;overflow:hidden;position:relative;display:flex;justify-content:center;align-items:center}#captcha-web-sdk .content #captcha-web-sdk-loading img{display:block;width:45px;height:45px}#captcha-web-sdk #captcha-web-sdk-slider-bg-canvas{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:4px}#captcha-web-sdk #captcha-web-sdk-slider-bg-div{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:4px}#captcha-web-sdk #captcha-web-sdk-slider-bg-div .captcha-web-sdk-slider-bg-div-slice{position:absolute}@keyframes myanimation{from{left:0}to{left:289px}}
|
|
3
|
-
#captcha-web-sdk.captcha-web-sdk-slider{z-index:999;position:absolute;left:0;top:0;display:flex;flex-direction:column;height:100%;user-select:none}#captcha-web-sdk.captcha-web-sdk-slider .content{width:100%;height:auto;min-height:0;flex:1 1 auto;position:relative;overflow:hidden;border-radius:4px;background
|
|
3
|
+
#captcha-web-sdk.captcha-web-sdk-slider{z-index:999;position:absolute;left:0;top:0;display:flex;flex-direction:column;height:100%;user-select:none}#captcha-web-sdk.captcha-web-sdk-slider .content{width:100%;height:auto;min-height:0;flex:1 1 auto;position:relative;overflow:hidden;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px rgba(217,228,238,.55),0 3px 10px rgba(15,23,42,.04)}#captcha-web-sdk.captcha-web-sdk-slider .bg-img-div{width:100%;height:100%;position:absolute;transform:translate(0px, 0px)}#captcha-web-sdk.captcha-web-sdk-slider .bg-img-div img{height:100%;width:100%;border-radius:4px;object-fit:cover}#captcha-web-sdk.captcha-web-sdk-slider .slider-img-div{height:100%;position:absolute;left:0;transform:translate(0px, 0px)}#captcha-web-sdk.captcha-web-sdk-slider .slider-img-div #captcha-web-sdk-slider-move-img{height:100%}#captcha-web-sdk.captcha-web-sdk-slider .slider-move{height:42px;width:100%;margin:12px 0 0;position:relative;flex:0 0 auto}#captcha-web-sdk.captcha-web-sdk-slider .slider-move-track{position:relative;height:42px;line-height:42px;text-align:center;background:#f3f6fa;color:#7f8b99;transition:0s;font-size:12px;box-sizing:content-box;border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(217,228,238,.95)}#captcha-web-sdk.captcha-web-sdk-slider .refresh-btn,#captcha-web-sdk.captcha-web-sdk-slider .close-btn{display:inline-block}#captcha-web-sdk.captcha-web-sdk-slider .slider-move{line-height:42px;font-size:12px;text-align:center;white-space:nowrap;color:#88949d;-moz-user-select:none;-webkit-user-select:none;user-select:none;filter:opacity(0.8)}#captcha-web-sdk.captcha-web-sdk-slider .slider-move-track-text{position:relative;z-index:2;display:block;padding:0 48px 0 56px;font-size:12px;font-weight:500;line-height:42px;color:#6f7d89;overflow:hidden;text-overflow:ellipsis;letter-spacing:0}#captcha-web-sdk.captcha-web-sdk-slider .slider-move .slider-move-btn{transform:translate(0px, 0px);position:absolute;top:3px;left:0;width:38px;height:36px;background:#fff;background-repeat:no-repeat;background-size:16px 16px;background-position:center center;border-radius:6px;box-shadow:0 1px 3px rgba(15,23,42,.12),inset 0 0 0 1px rgba(217,228,238,.9);z-index:3}#captcha-web-sdk.captcha-web-sdk-slider .slider-move .slider-move-btn:before,#captcha-web-sdk.captcha-web-sdk-slider .slider-move .slider-move-btn:after{content:"";position:absolute;top:50%;width:2px;height:11px;margin-top:-5.5px;border-radius:2px;background:#b6c0c9}#captcha-web-sdk.captcha-web-sdk-slider .slider-move .slider-move-btn:before{left:15px}#captcha-web-sdk.captcha-web-sdk-slider .slider-move .slider-move-btn:after{left:21px}#captcha-web-sdk.captcha-web-sdk-slider .slider-tip{margin-bottom:8px;font-weight:600;font-size:12px;line-height:1.4;color:#536170;flex:0 0 auto}#captcha-web-sdk.captcha-web-sdk-slider .slider-tip #captcha-web-sdk-slider-move-track-font{display:block;max-height:2.7em;overflow:hidden;white-space:normal;word-break:break-word;overflow-wrap:anywhere;font-weight:600;letter-spacing:0}#captcha-web-sdk.captcha-web-sdk-slider .slider-move-btn:hover{cursor:pointer}
|
|
4
4
|
#captcha-web-sdk.captcha-web-sdk-rotate .rotate-img-div{height:100%;text-align:center}#captcha-web-sdk.captcha-web-sdk-rotate .rotate-img-div img{height:100%;transform:rotate(0deg);display:inline-block}
|
|
5
5
|
#captcha-web-sdk.captcha-web-sdk-concat .captcha-web-sdk-slider-concat-img-div{background-size:100% 100%;position:absolute;transform:translate(0px, 0px);z-index:1;width:100%}#captcha-web-sdk.captcha-web-sdk-concat .captcha-web-sdk-slider-concat-bg-img{width:100%;height:100%;position:absolute;transform:translate(0px, 0px);background-size:100% 100%}
|
|
6
6
|
#captcha-web-sdk.captcha-web-sdk-word-click{box-sizing:border-box;display:flex;flex-direction:column;height:100%}#captcha-web-sdk.captcha-web-sdk-word-click .click-tip{position:relative;min-height:40px;width:100%;margin-bottom:6px;padding-right:56px;box-sizing:border-box;flex:0 0 auto}#captcha-web-sdk.captcha-web-sdk-word-click .click-tip .tip-img{height:35px;position:absolute;right:15px;top:0}#captcha-web-sdk.captcha-web-sdk-word-click .click-tip #captcha-web-sdk-click-track-font{font-size:18px;display:block;max-height:2.7em;overflow:hidden;line-height:1.35;white-space:normal;word-break:break-word;overflow-wrap:anywhere;position:static}#captcha-web-sdk.captcha-web-sdk-word-click .slider-bottom{position:relative;top:6px}#captcha-web-sdk.captcha-web-sdk-word-click .content{flex:1 1 auto;min-height:0}#captcha-web-sdk.captcha-web-sdk-word-click .content #bg-img-click-mask{width:100%;height:100%;position:absolute;left:0;top:0}#captcha-web-sdk.captcha-web-sdk-word-click .content #bg-img-click-mask .click-span{position:absolute;left:0;top:0;border-radius:50px;background-color:#409eff;width:20px;height:20px;text-align:center;line-height:20px;color:#fff;border:2px solid #fff;box-sizing:content-box}#captcha-web-sdk.captcha-web-sdk-word-click .click-confirm-btn{width:100%;height:35px;border-radius:4px;background-image:linear-gradient(173deg, hsl(38.09, 91%, 57.89%) 0%, hsl(38.09, 89.38%, 71.74%) 100%);font-size:15px;text-align:center;box-sizing:border-box;line-height:35px;color:#fff;margin-top:8px;flex:0 0 auto}#captcha-web-sdk.captcha-web-sdk-word-click .click-confirm-btn:hover{cursor:pointer}
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -146,13 +146,13 @@ const tac = new TAC(config, style);
|
|
|
146
146
|
| `modal_title` | `请完成安全验证` | 弹窗头部主标题 |
|
|
147
147
|
| `modal_subtitle` | `验证通过后即可继续操作` | 弹窗头部副标题 |
|
|
148
148
|
| `close_button_aria_label` | `关闭验证` | 关闭按钮无障碍文案 |
|
|
149
|
-
| `slider_title` | `拖动滑块完成拼图` |
|
|
149
|
+
| `slider_title` | `拖动滑块完成拼图` | 滑块验证码任务说明 |
|
|
150
150
|
| `slider_action_hint` | `按住滑块，拖动完成上方拼图` | 滑块验证码轨道提示文案 |
|
|
151
|
-
| `concat_title` | `拖动滑块完成拼图` |
|
|
151
|
+
| `concat_title` | `拖动滑块完成拼图` | 拼接验证码任务说明 |
|
|
152
152
|
| `concat_action_hint` | `按住滑块，拖动完成上方拼图` | 拼接验证码轨道提示文案 |
|
|
153
153
|
| `image_click_title` | `请依次点击:` | 点选验证码标题 |
|
|
154
154
|
| `image_click_confirm_text` | `确定` | 点选验证码确认按钮文案 |
|
|
155
|
-
| `rotate_title` | `拖动滑块完成拼图` |
|
|
155
|
+
| `rotate_title` | `拖动滑块完成拼图` | 旋转验证码任务说明 |
|
|
156
156
|
| `rotate_action_hint` | `按住滑块，旋转至正确角度` | 旋转验证码轨道提示文案 |
|
|
157
157
|
| `disable_title` | `当前验证码不可用` | 禁用态标题 |
|
|
158
158
|
| `disable_default_message` | `接口异常` | 禁用态默认提示 |
|
|
@@ -332,6 +332,8 @@ tac.init();
|
|
|
332
332
|
|
|
333
333
|
本次 SDK UI 与国际化做了以下调整：
|
|
334
334
|
|
|
335
|
+
- 统一滑块类验证码的信息层级：头部 `modal_title / modal_subtitle` 作为主标题区，内部 `slider_title / concat_title / rotate_title` 调整为图片区上方的任务说明
|
|
336
|
+
- 重做 `SLIDER / CONCAT / ROTATE` 三类滑块轨道，统一为更接近系统控件的浅底轨道、实体把手和完整蓝色进度底块
|
|
335
337
|
- 新增弹窗头部文案国际化：`modal_title`、`modal_subtitle`
|
|
336
338
|
- 新增关闭按钮无障碍文案国际化：`close_button_aria_label`
|
|
337
339
|
- 新增滑块轨道提示国际化：`slider_action_hint`、`concat_action_hint`、`rotate_action_hint`
|