UNPKG

go-captcha-test

Version:

This is the react package for go-captcha

481 lines (475 loc) 11.6 kB
/** * @Author Awen * @Date 2024/06/01 * @Email wengaolng@gmail.com **/ .index-module_iconBlock__Y1IUb { flex: 1; } .index-module_dots__2OJFw { position: absolute; top: 0; right: 0; left: 0; bottom: 0; } .index-module_dots__2OJFw .dot { position: absolute; z-index: 2; width: 22px; height: 22px; color: #cedffe; background: #3e7cff; border: 3px solid #f7f9fb; display: flex; align-items: center; justify-content: center; border-radius: 22px; cursor: default; } /** * @Author Awen * @Date 2024/06/01 * @Email wengaolng@gmail.com **/ :root { --go-captcha-theme-text-color: #333333; --go-captcha-theme-bg-color: #ffffff; --go-captcha-theme-btn-color: #ffffff; --go-captcha-theme-btn-disabled-color: #749ff9; --go-captcha-theme-btn-bg-color: #4e87ff; --go-captcha-theme-btn-border-color: #4e87ff; --go-captcha-theme-active-color: #3e7cff; --go-captcha-theme-border-color: rgba(206, 223, 254, 0.5); --go-captcha-theme-icon-color: #3C3C3C; --go-captcha-theme-drag-bar-color: #e0e0e0; --go-captcha-theme-drag-bg-color: #3e7cff; --go-captcha-theme-drag-icon-color: #ffffff; --go-captcha-theme-round-color: #e0e0e0; --go-captcha-theme-loading-icon-color: #3e7cff; --go-captcha-theme-body-bg-color: #34383e; --go-captcha-theme-default-color: #3e7cff; --go-captcha-theme-default-bg-color: #ecf5ff; --go-captcha-theme-default-border-color: #3e7cff; --go-captcha-theme-default-hover-color: #e0efff; --go-captcha-theme-error-color: #ed4630; --go-captcha-theme-error-bg-color: #fef0f0; --go-captcha-theme-error-border-color: #ff5a34; --go-captcha-theme-warn-color: #ffa000; --go-captcha-theme-warn-bg-color: #fdf6ec; --go-captcha-theme-warn-border-color: #ffbe09; --go-captcha-theme-success-color: #5eaa2f; --go-captcha-theme-success-bg-color: #f0f9eb; --go-captcha-theme-success-border-color: #8bc640; } .gocaptcha-module_wrapper__Kpdey { padding: 12px 16px; background-color: var(--go-captcha-theme-bg-color); -webkit-touch-callout: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; box-sizing: border-box; } .gocaptcha-module_theme__h-Ytl { border: 1px solid rgba(206, 223, 254, 0.5); border-color: var(--go-captcha-theme-border-color); border-radius: 8px; box-shadow: 0 0 20px rgba(100, 100, 100, 0.1); -webkit-box-shadow: 0 0 20px rgba(100, 100, 100, 0.1); -moz-box-shadow: 0 0 20px rgba(100, 100, 100, 0.1); } .gocaptcha-module_header__LjDUC { height: 36px; width: 100%; font-size: 15px; color: var(--go-captcha-theme-text-color); display: flex; align-items: center; -webkit-touch-callout: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .gocaptcha-module_header__LjDUC span { flex: 1; padding-right: 5px; } .gocaptcha-module_header__LjDUC em { padding: 0 3px; font-weight: bold; color: var(--go-captcha-theme-active-color); font-style: normal; } .gocaptcha-module_body__KJKNu { position: relative; width: 100%; margin-top: 10px; display: flex; background: var(--go-captcha-theme-body-bg-color); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; overflow: hidden; } .gocaptcha-module_bodyInner__jahqH { background: var(--go-captcha-theme-body-bg-color); } .gocaptcha-module_picture__LRwbY { position: relative; z-index: 2; width: 100%; } .gocaptcha-module_hide__TUOZE { visibility: hidden; } .gocaptcha-module_loading__Y-PYK { position: absolute; z-index: 1; top: 50%; left: 50%; width: 68px; height: 68px; margin-left: -34px; margin-top: -34px; line-height: 68px; text-align: center; display: flex; align-content: center; justify-content: center; } .gocaptcha-module_loading__Y-PYK svg, .gocaptcha-module_loading__Y-PYK circle { color: var(--go-captcha-theme-loading-icon-color); fill: var(--go-captcha-theme-loading-icon-color); } .gocaptcha-module_footer__Ywdpy { width: 100%; height: 50px; color: #34383e; display: flex; align-items: center; padding-top: 10px; -webkit-touch-callout: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .gocaptcha-module_iconBlock__mVB8B { display: flex; align-items: center; } .gocaptcha-module_iconBlock__mVB8B svg { color: var(--go-captcha-theme-icon-color); fill: var(--go-captcha-theme-icon-color); margin: 0 5px; cursor: pointer; } .gocaptcha-module_buttonBlock__EZ4vg { width: 120px; height: 40px; } .gocaptcha-module_buttonBlock__EZ4vg button { width: 100%; height: 40px; text-align: center; padding: 9px 15px; font-size: 15px; border-radius: 5px; display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; color: var(--go-captcha-theme-btn-color); background-color: var(--go-captcha-theme-btn-bg-color); border: 1px solid transparent; border-color: var(--go-captcha-theme-btn-bg-color); -webkit-appearance: none; box-sizing: border-box; outline: none; margin: 0; transition: 0.1s; font-weight: 500; -moz-user-select: none; -webkit-user-select: none; } .gocaptcha-module_buttonBlock__EZ4vg button.disabled { pointer-events: none; background-color: var(--go-captcha-theme-btn-disabled-color); border-color: var(--go-captcha-theme-btn-disabled-color); } .gocaptcha-module_dragSlideBar__noauW { width: 100%; height: 100%; position: relative; touch-action: none; } .gocaptcha-module_dragLine__3B9KR { position: absolute; height: 14px; background-color: var(--go-captcha-theme-drag-bar-color); left: 0; right: 0; top: 50%; margin-top: -7px; border-radius: 7px; } .gocaptcha-module_dragBlock__bFlwx { position: absolute; left: 0; top: 50%; margin-top: -20px; width: 82px; height: 40px; z-index: 2; background-color: var(--go-captcha-theme-drag-bg-color); cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-touch-callout: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; border-radius: 24px; box-shadow: 0 0 20px rgba(100, 100, 100, 0.35); -webkit-box-shadow: 0 0 20px rgba(100, 100, 100, 0.35); -moz-box-shadow: 0 0 20px rgba(100, 100, 100, 0.35); } .gocaptcha-module_dragBlock__bFlwx svg { color: var(--go-captcha-theme-drag-icon-color); fill: var(--go-captcha-theme-drag-icon-color); } .gocaptcha-module_disabled__4kN6w { pointer-events: none; background-color: var(--go-captcha-theme-btn-disabled-color); border-color: var(--go-captcha-theme-btn-disabled-color); } .gocaptcha-module_dragBlockInline__PpF3f { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /** * @Author Awen * @Date 2024/06/01 * @Email wengaolng@gmail.com **/ .index-module_tile__8pkQD { position: absolute; z-index: 2; cursor: pointer; } .index-module_tile__8pkQD img { display: block; cursor: pointer; width: 100%; height: 100%; } /** * @Author Awen * @Date 2024/06/01 * @Email wengaolng@gmail.com **/ .index-module_header__jVeEs { text-align: center; } .index-module_tile__VR9Ut { position: absolute; z-index: 2; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .index-module_tile__VR9Ut img { display: block; cursor: pointer; width: 100%; height: 100%; } /** * @Author Awen * @Date 2024/06/01 * @Email wengaolng@gmail.com **/ .index-module_body__5eTaZ { background: transparent !important; display: flex; display: -webkit-flex; justify-content: center; align-items: center; margin: 10px auto 0; } .index-module_bodyInner__Lb3mp { border-radius: 100%; } .index-module_picture__M-qbX { position: relative; max-width: 100%; max-height: 100%; z-index: 2; border-radius: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; } .index-module_picture__M-qbX img { max-width: 100%; max-height: 100%; } .index-module_round__zaOPS { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 100%; z-index: 2; border: 6px solid #e0e0e0; border-color: var(--go-captcha-theme-round-color); } .index-module_thumb__jChIh { position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; } .index-module_thumb__jChIh img { max-width: 100%; max-height: 100%; } .index-module_thumbBlock__u3U1X { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } /** * @Author Awen * @Date 2024/06/01 * @Email wengaolng@gmail.com **/ .index-module_btnBlock__L96Vx { position: relative; box-sizing: border-box; display: block; font-size: 13px; -webkit-border-radius: 5px; -moz-border-radius: 5px; letter-spacing: 1px; border-radius: 5px; line-height: 1; white-space: nowrap; -webkit-appearance: none; outline: none; margin: 0; transition: 0.1s; font-weight: 500; -moz-user-select: none; -webkit-user-select: none; display: flex; align-items: center; justify-content: center; justify-items: center; box-shadow: 0 0 20px rgba(62, 124, 255, 0.1); -webkit-box-shadow: 0 0 20px rgba(62, 124, 255, 0.1); -moz-box-shadow: 0 0 20px rgba(62, 124, 255, 0.1); } .index-module_btnBlock__L96Vx span { padding-left: 8px; } .index-module_disabled__U5sNo { pointer-events: none; } .index-module_default__r2sQq { color: var(--go-captcha-theme-default-color); border: 1px solid #50a1ff; border-color: var(--go-captcha-theme-default-border-color); background-color: var(--go-captcha-theme-default-bg-color); cursor: pointer; } .index-module_default__r2sQq:hover { background-color: var(--go-captcha-theme-default-hover-color) !important; } .index-module_error__mCm6a { cursor: pointer; color: var(--go-captcha-theme-error-color); background-color: var(--go-captcha-theme-error-bg-color); border: 1px solid #ff5a34; border-color: var(--go-captcha-theme-error-border-color); } .index-module_warn__CT1sW { cursor: pointer; color: var(--go-captcha-theme-warn-color); background-color: var(--go-captcha-theme-warn-bg-color); border: 1px solid #ffbe09; border-color: var(--go-captcha-theme-warn-border-color); } .index-module_success__61kOU { color: var(--go-captcha-theme-success-color); background-color: var(--go-captcha-theme-success-bg-color); border: 1px solid #8bc640; border-color: var(--go-captcha-theme-success-border-color); pointer-events: none; } .index-module_ripple__KF4IK { position: relative; display: flex; align-items: center; justify-content: center; justify-items: center; } .index-module_ripple__KF4IK svg { position: relative; z-index: 2; } .index-module_ripple__KF4IK > * { z-index: 2; } .index-module_ripple__KF4IK::after { background-color: var(--go-captcha-theme-default-border-color); border-radius: 50px; content: ""; display: block; width: 21px; height: 21px; opacity: 0; position: absolute; top: 50%; left: 50%; margin-top: -11px; margin-left: -11px; z-index: 1; animation: index-module_ripple__KF4IK 1.3s infinite; -moz-animation: index-module_ripple__KF4IK 1.3s infinite; -webkit-animation: index-module_ripple__KF4IK 1.3s infinite; animation-delay: 2s; -moz-animation-delay: 2s; -webkit-animation-delay: 2s; } @keyframes index-module_ripple__KF4IK { 0% { opacity: 0; } 5% { opacity: 0.05; } 20% { opacity: 0.35; } 65% { opacity: 0.01; } 100% { transform: scaleX(2) scaleY(2); opacity: 0; } }