99 lines
2.1 KiB
Plaintext
99 lines
2.1 KiB
Plaintext
.__captcha-parent {
|
|
box-shadow: 0 0 11px 0 #999999;
|
|
width: 316px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
z-index: 997;
|
|
box-sizing: border-box;
|
|
border-radius: 5px;
|
|
padding: 8px;
|
|
.captcha-box {
|
|
height: 260px;
|
|
width: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
.loading {
|
|
width: 120px;
|
|
height: 20px;
|
|
mask: linear-gradient(90deg, #000 70%, #0000 0) 0/20%;
|
|
background: linear-gradient(#f7b645 0 0) 0 / 0% no-repeat #dddddd6b;
|
|
animation: cartoon 1s infinite steps(6);
|
|
margin: 120px auto;
|
|
@keyframes cartoon {
|
|
100% {
|
|
background-size: 120%;
|
|
}
|
|
}
|
|
}
|
|
.captcha {
|
|
transform-style: preserve-3d;
|
|
will-change: transform;
|
|
transition-duration: 0.45s;
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
|
|
.slider-bottom {
|
|
text-align: right;
|
|
margin-top: 8px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
.close-btn, .refresh-btn {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-repeat: no-repeat;
|
|
cursor: pointer;
|
|
}
|
|
.close-btn {
|
|
background-image: url("../images/icon.png");
|
|
background-position: 0 -14px;
|
|
}
|
|
.refresh-btn {
|
|
background-image: url("../images/icon.png");
|
|
background-position: 0 -167px;
|
|
}
|
|
|
|
}
|
|
.slider-move-shadow {
|
|
animation: move-shadow 2s infinite;
|
|
height: 100%;
|
|
width: 5px;
|
|
background-color: #fff;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
filter: opacity(0.5);
|
|
box-shadow: 1px 1px 1px #fff;
|
|
border-radius: 50%;
|
|
}
|
|
.captcha-slider-move-track-mask {
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: #00f4ab;
|
|
|
|
width: 0;
|
|
height: 32px;
|
|
background-color: #a9ffe5;
|
|
opacity: 0.5;
|
|
position: absolute;
|
|
top: -1px;
|
|
left: -1px;
|
|
border-radius: 5px;
|
|
}
|
|
@keyframes move-shadow {
|
|
from {
|
|
left: 0;
|
|
}
|
|
to {
|
|
left: 289px;
|
|
}
|
|
}
|
|
@import "./common/common.less";
|
|
@import "./slider/slider.less";
|
|
@import "./rotate/rotate.less";
|
|
@import "./concat/concat.less";
|
|
@import "./disable/disable.less";
|
|
@import "./image_click/image_click.less";
|
|
}
|