R524809
2962 lines
111 KiB
HTML
2962 lines
111 KiB
HTML
<!DOCTYPE html>
|
||
<!-- saved from url=(0043)https://js.design/site/w/?id=js_i5VViyXCrg7 -->
|
||
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<link rel="icon" href="https://js.design/site/w/favicon.png">
|
||
<meta name="description" content="即时设计 创作页面">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>英语字母描红</title>
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
}
|
||
|
||
#tip {
|
||
position: fixed;
|
||
bottom: 16px;
|
||
right: 16px;
|
||
z-index: 9999;
|
||
cursor: pointer;
|
||
border-radius: 8px;
|
||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 4px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
#tip img {
|
||
display: block;
|
||
}
|
||
|
||
#content {
|
||
visibility: hidden;
|
||
}
|
||
|
||
.unchecked-tips {
|
||
width: 100%;
|
||
text-align: center;
|
||
height: 44px;
|
||
background-color: rgba(255, 149, 79, 0.1);
|
||
color: rgba(255, 146, 51, 1);
|
||
line-height: 44px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
position: fixed;
|
||
top: 0;
|
||
z-index: 99999;
|
||
display: none;
|
||
}
|
||
</style>
|
||
<style data-id="immersive-translate-input-injected-css">.immersive-translate-input {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
z-index: 2147483647;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.immersive-translate-attach-loading::after {
|
||
content: " ";
|
||
|
||
--loading-color: #f78fb6;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
display: block;
|
||
margin: 12px auto;
|
||
position: relative;
|
||
color: white;
|
||
left: -100px;
|
||
box-sizing: border-box;
|
||
animation: immersiveTranslateShadowRolling 1.5s linear infinite;
|
||
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-2000%, -50%);
|
||
z-index: 100;
|
||
}
|
||
|
||
.immersive-translate-loading-spinner {
|
||
vertical-align: middle !important;
|
||
width: 10px !important;
|
||
height: 10px !important;
|
||
display: inline-block !important;
|
||
margin: 0 4px !important;
|
||
border: 2px rgba(221, 244, 255, 0.6) solid !important;
|
||
border-top: 2px rgba(0, 0, 0, 0.375) solid !important;
|
||
border-left: 2px rgba(0, 0, 0, 0.375) solid !important;
|
||
border-radius: 50% !important;
|
||
padding: 0 !important;
|
||
-webkit-animation: immersive-translate-loading-animation 0.6s infinite linear !important;
|
||
animation: immersive-translate-loading-animation 0.6s infinite linear !important;
|
||
}
|
||
|
||
@-webkit-keyframes immersive-translate-loading-animation {
|
||
from {
|
||
-webkit-transform: rotate(0deg);
|
||
}
|
||
|
||
to {
|
||
-webkit-transform: rotate(359deg);
|
||
}
|
||
}
|
||
|
||
@keyframes immersive-translate-loading-animation {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
to {
|
||
transform: rotate(359deg);
|
||
}
|
||
}
|
||
|
||
.immersive-translate-input-loading {
|
||
--loading-color: #f78fb6;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
display: block;
|
||
margin: 12px auto;
|
||
position: relative;
|
||
color: white;
|
||
left: -100px;
|
||
box-sizing: border-box;
|
||
animation: immersiveTranslateShadowRolling 1.5s linear infinite;
|
||
}
|
||
|
||
@keyframes immersiveTranslateShadowRolling {
|
||
0% {
|
||
box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0),
|
||
0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
|
||
}
|
||
|
||
12% {
|
||
box-shadow: 100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0),
|
||
0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
|
||
}
|
||
|
||
25% {
|
||
box-shadow: 110px 0 var(--loading-color), 100px 0 var(--loading-color),
|
||
0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
|
||
}
|
||
|
||
36% {
|
||
box-shadow: 120px 0 var(--loading-color), 110px 0 var(--loading-color),
|
||
100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0);
|
||
}
|
||
|
||
50% {
|
||
box-shadow: 130px 0 var(--loading-color), 120px 0 var(--loading-color),
|
||
110px 0 var(--loading-color), 100px 0 var(--loading-color);
|
||
}
|
||
|
||
62% {
|
||
box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color),
|
||
120px 0 var(--loading-color), 110px 0 var(--loading-color);
|
||
}
|
||
|
||
75% {
|
||
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
|
||
130px 0 var(--loading-color), 120px 0 var(--loading-color);
|
||
}
|
||
|
||
87% {
|
||
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
|
||
200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color);
|
||
}
|
||
|
||
100% {
|
||
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
|
||
200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
|
||
}
|
||
}
|
||
|
||
.immersive-translate-modal {
|
||
position: fixed;
|
||
z-index: 2147483647;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto;
|
||
background-color: rgb(0, 0, 0);
|
||
background-color: rgba(0, 0, 0, 0.4);
|
||
font-size: 15px;
|
||
}
|
||
|
||
.immersive-translate-modal-content {
|
||
background-color: #fefefe;
|
||
margin: 10% auto;
|
||
padding: 40px 24px 24px;
|
||
border-radius: 12px;
|
||
width: 350px;
|
||
font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
|
||
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
||
"Segoe UI Symbol", "Noto Color Emoji";
|
||
position: relative;
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
.immersive-translate-modal-content {
|
||
margin: 25% auto !important;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 480px) {
|
||
.immersive-translate-modal-content {
|
||
width: 80vw !important;
|
||
margin: 20vh auto !important;
|
||
padding: 20px 12px 12px !important;
|
||
}
|
||
|
||
.immersive-translate-modal-title {
|
||
font-size: 14px !important;
|
||
}
|
||
|
||
.immersive-translate-modal-body {
|
||
font-size: 13px !important;
|
||
max-height: 60vh !important;
|
||
}
|
||
|
||
.immersive-translate-btn {
|
||
font-size: 13px !important;
|
||
padding: 8px 16px !important;
|
||
margin: 0 4px !important;
|
||
}
|
||
|
||
.immersive-translate-modal-footer {
|
||
gap: 6px !important;
|
||
margin-top: 16px !important;
|
||
}
|
||
}
|
||
|
||
.immersive-translate-modal .immersive-translate-modal-content-in-input {
|
||
max-width: 500px;
|
||
}
|
||
.immersive-translate-modal-content-in-input .immersive-translate-modal-body {
|
||
text-align: left;
|
||
max-height: unset;
|
||
}
|
||
|
||
.immersive-translate-modal-title {
|
||
text-align: center;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #333333;
|
||
}
|
||
|
||
.immersive-translate-modal-body {
|
||
text-align: center;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
.immersive-translate-modal-body {
|
||
max-height: 250px;
|
||
overflow-y: auto;
|
||
}
|
||
}
|
||
|
||
.immersive-translate-close {
|
||
color: #666666;
|
||
position: absolute;
|
||
right: 16px;
|
||
top: 16px;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.immersive-translate-close:hover,
|
||
.immersive-translate-close:focus {
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.immersive-translate-modal-footer {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.immersive-translate-btn {
|
||
width: fit-content;
|
||
color: #fff;
|
||
background-color: #ea4c89;
|
||
border: none;
|
||
font-size: 14px;
|
||
margin: 0 8px;
|
||
padding: 9px 30px;
|
||
border-radius: 5px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.immersive-translate-btn-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.immersive-translate-btn:hover {
|
||
background-color: #f082ac;
|
||
}
|
||
.immersive-translate-btn:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
}
|
||
.immersive-translate-btn:disabled:hover {
|
||
background-color: #ea4c89;
|
||
}
|
||
|
||
.immersive-translate-link-btn {
|
||
background-color: transparent;
|
||
color: #ea4c89;
|
||
border: none;
|
||
cursor: pointer;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
|
||
.immersive-translate-cancel-btn {
|
||
/* gray color */
|
||
background-color: rgb(89, 107, 120);
|
||
}
|
||
|
||
.immersive-translate-cancel-btn:hover {
|
||
background-color: hsl(205, 20%, 32%);
|
||
}
|
||
|
||
.immersive-translate-action-btn {
|
||
background-color: transparent;
|
||
color: #ea4c89;
|
||
border: 1px solid #ea4c89;
|
||
}
|
||
|
||
.immersive-translate-btn svg {
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.immersive-translate-link {
|
||
cursor: pointer;
|
||
user-select: none;
|
||
-webkit-user-drag: none;
|
||
text-decoration: none;
|
||
color: #ea4c89;
|
||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.immersive-translate-primary-link {
|
||
cursor: pointer;
|
||
user-select: none;
|
||
-webkit-user-drag: none;
|
||
text-decoration: none;
|
||
color: #ea4c89;
|
||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.immersive-translate-modal input[type="radio"] {
|
||
margin: 0 6px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.immersive-translate-modal label {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.immersive-translate-close-action {
|
||
position: absolute;
|
||
top: 2px;
|
||
right: 0px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.imt-primary-button {
|
||
display: flex;
|
||
padding: 12px 80px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 8px;
|
||
border-radius: 8px;
|
||
background: #ea4c89;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
line-height: 24px;
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.imt-retry-text {
|
||
color: #999;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: 21px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.imt-action-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.imt-modal-content-text {
|
||
text-align: left;
|
||
color: #333;
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.imt-linear-gradient-text {
|
||
background: linear-gradient(90deg, #00a6ff 0%, #c369ff 52.4%, #ff4590 100%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.imt-flex-center {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.imt-linear-black-btn {
|
||
border-radius: 50px;
|
||
background: linear-gradient(66deg, #222 19%, #696969 94.25%);
|
||
height: 48px;
|
||
width: 100%;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
justify-content: center;
|
||
}
|
||
</style></head>
|
||
|
||
<body>
|
||
<div id="content" style="visibility: visible;"><js-frame src="https://ds.js.design/elements/js_i5VViyXCrg7#"><template shadowrootmode="open"><div data-type="scroll-container" style="padding-bottom: 0px;"><div data-ty="0" style="transform: translateY(0px);"><div style="position: relative;"><style>
|
||
.img-nnU-1::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.vec-rectangle-LkI-2::before{background-repeat: no-repeat;background-size: 70.62501915826248px 70.58823529411765px;background-position: 0px -15.29411792755127px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);}.img-Imp-1{position: absolute;z-index: 0;border:unset !important;box-shadow:unset;left:23.9981689453125px;top:788.5px;width:547.003662109375px;height:52px;mix-blend-mode: normal;--bg-img:var(--img-url);--img-url:url(https://img.js.design/assets/element/js_i5VViyXCrg7/image/3d91ef6c873efd6751d02385af2d8fcdc8a6846c.png);}.img-Imp-1::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-JjM-1{position: absolute;z-index: 0;border:unset !important;box-shadow:unset;left:-0.0018310546875px;top:84px;width:547.003662109375px;height:3px;mix-blend-mode: normal;--bg-img:var(--img-url);--img-url:url(https://img.js.design/assets/element/js_i5VViyXCrg7/image/96bc3a25d7405292a9a9f3afa240023fd7ee0d94.png);}.img-JjM-1::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.span-Caw-1{text-decoration-line:none;}.p-text-RLT-2{display:inline;margin: 0px;width: 100%;text-align: center;}.text-RLT-2{position: absolute;display:flex;flex-direction:column;z-index: 1;justify-content:start;left: 212px;top: 2px;height: 25px;mix-blend-mode: normal;color:rgba(50, 46, 37, 1);font-size:18px;font-weight:400;opacity: 1;font-family:'AlibabaPuHuiTi-Regular';letter-spacing:0px;white-space:nowrap;}.text-RLT-2-br{display: block;margin-bottom:0px;overflow: hidden;}.span-AoG-1{text-decoration-line:none;}.p-text-NnL-1{display:inline;margin: 0px;width: 100%;text-align: left;}.text-NnL-1{position: absolute;display:flex;flex-direction:column;z-index: 0;justify-content:start;left: 0px;top: 0px;height: 17px;mix-blend-mode: normal;color:rgba(124, 118, 106, 1);font-size:12px;font-weight:400;opacity: 1;font-family:'AlibabaPuHuiTi-Regular';letter-spacing:0px;white-space:nowrap;}.text-NnL-1-br{display: block;margin-bottom:0px;overflow: hidden;}.img-MDS-2{position: absolute;z-index: 1;border:unset !important;box-shadow:unset;left:31.989990234375px;top:12.92999267578125px;width:60px;height:1px;mix-blend-mode: normal;--bg-img:var(--img-url);--img-url:url(https://img.js.design/assets/element/js_i5VViyXCrg7/image/9f8269f8c20f29a3e28ca038d25d7debc1969f48.png);}.img-MDS-2::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.frame-PYi-1{position: absolute;z-index:1;left: 215.98px;top: 0px;width: 91.99px;height: 17px;mix-blend-mode: normal;}.frame-PYi-1.fixed-width{width: 91.99px;}.span-Vqu-1{text-decoration-line:none;}.p-text-Wvd-1{display:inline;margin: 0px;width: 100%;text-align: left;}.text-Wvd-1{position: absolute;display:flex;flex-direction:column;z-index: 0;justify-content:start;left: 0px;top: 0px;height: 17px;mix-blend-mode: normal;color:rgba(124, 118, 106, 1);font-size:12px;font-weight:400;opacity: 1;font-family:'AlibabaPuHuiTi-Regular';letter-spacing:0px;white-space:nowrap;}.text-Wvd-1-br{display: block;margin-bottom:0px;overflow: hidden;}.img-Tvd-2{position: absolute;z-index: 1;border:unset !important;box-shadow:unset;left:31.989990234375px;top:12.92999267578125px;width:60px;height:1px;mix-blend-mode: normal;--bg-img:var(--img-url);--img-url:url(https://img.js.design/assets/element/js_i5VViyXCrg7/image/9f8269f8c20f29a3e28ca038d25d7debc1969f48.png);}.img-Tvd-2::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.frame-TLL-2{position: absolute;z-index:2;left: 107.99px;top: 0px;width: 91.99px;height: 17px;mix-blend-mode: normal;}.frame-TLL-2.fixed-width{width: 91.99px;}.span-KKa-1{text-decoration-line:none;}.p-text-CGp-1{display:inline;margin: 0px;width: 100%;text-align: left;}.text-CGp-1{position: absolute;display:flex;flex-direction:column;z-index: 0;justify-content:start;left: 0px;top: 0px;height: 17px;mix-blend-mode: normal;color:rgba(124, 118, 106, 1);font-size:12px;font-weight:400;opacity: 1;font-family:'AlibabaPuHuiTi-Regular';letter-spacing:0px;white-space:nowrap;}.text-CGp-1-br{display: block;margin-bottom:0px;overflow: hidden;}.img-WDh-2{position: absolute;z-index: 1;border:unset !important;box-shadow:unset;left:31.989990234375px;top:12.92999267578125px;width:60px;height:1px;mix-blend-mode: normal;--bg-img:var(--img-url);--img-url:url(https://img.js.design/assets/element/js_i5VViyXCrg7/image/9f8269f8c20f29a3e28ca038d25d7debc1969f48.png);}.img-WDh-2::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.frame-Pay-3{position: absolute;z-index:3;left: 0px;top: 0px;width: 91.99px;height: 17px;mix-blend-mode: normal;}.frame-Pay-3.fixed-width{width: 91.99px;}.frame-SPY-3{position: absolute;z-index:3;left: 140px;top: 51px;width: 307.97px;height: 17px;mix-blend-mode: normal;}.frame-SPY-3.fixed-width{width: 307.97px;}.vec-rectangle-wtW-4{position: absolute;z-index:3;left: 0px;top: 0px;width: 68px;height: 68px;mix-blend-mode: normal;--bg-img:var(--img-url);--img-url:url(https://img.js.design/assets/img/69d7a9d4053c4e58a732e5fd.jpg#dab28f6e9a3b5e9bdcf36699b50ee3fe);}.vec-rectangle-wtW-4::before{background-position: center;background-size: cover;background-repeat: no-repeat;position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);}.frame-ODp-2{position: absolute;z-index:2;left: 24px;top: 14px;width: 547px;height: 86px;mix-blend-mode: normal;}.frame-ODp-2.fixed-width{width: 547px;}.span-BvS-1{text-decoration-line:none;}.span-BvS-2{text-decoration-line:none;color:rgba(0, 0, 0, 1);}.span-BvS-3{text-decoration-line:none;}.span-BvS-4{text-decoration-line:none;color:rgba(0, 0, 0, 1);}.p-text-Gvi-1{display:inline;margin: 0px;width: 100%;text-align: left;}.text-Gvi-1{position: absolute;display:flex;flex-direction:column;z-index: 0;justify-content:start;left: 0px;top: 120px;height: 41px;mix-blend-mode: normal;color:rgba(252, 46, 0, 1);font-size:36px;font-weight:400;opacity: 1;font-family:'ArialθRegularθMonotype:Arial Regular:Version 5.01 (Microsoft)';letter-spacing:0px;white-space:nowrap;}.text-Gvi-1-br{display: block;margin-bottom:0px;overflow: hidden;}.vec-rectangle-Nss-1{position: absolute;z-index:0;left: 0px;top: 0px;width: 180px;height: 103.5px;mix-blend-mode: normal;background: rgba(255, 255, 255, 1);}.vec-rectangle-Waf-2{position: absolute;z-index:1;left: 4.95px;top: 9px;width: 169.65px;height: 85.36px;mix-blend-mode: normal;--bg-img:var(--img-url);--img-url:url(https://img.js.design/assets/img/69ddff87b5e8b987e508da03.png#13149ec13aa4e12cfa0663031cf20345);}.vec-rectangle-Waf-2::before{background-repeat: no-repeat;background-size: 448.75394569757736px 583.6799874791319px;background-position: -54.22734412128921px -118.98750227192795px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);}.frame-HQk-2{position: absolute;z-index:2;left: 15px;top: 0px;width: 180px;height: 103.5px;mix-blend-mode: normal;}.frame-HQk-2.fixed-width{width: 180px;}.frame-iYw-1{position: absolute;z-index:1;left: 0px;top: 9px;width: 211px;height: 161px;mix-blend-mode: normal;}.frame-iYw-1.fixed-width{width: 211px;}.vec-rectangle-rfY-2{position: absolute;z-index:1;left: 271px;top: 0px;width: 180px;height: 180px;mix-blend-mode: normal;--bg-img:var(--img-url);--img-url:url(https://img.js.design/assets/img/692d3517b5e8b987e5389456.png#cc62a84c1df57d455f9ccfd5d5a1b6d0);}.vec-rectangle-rfY-2::before{background-repeat: no-repeat;background-size: 249.65753424657532px 249.65753424657532px;background-position: -34.82872009277344px -34.82875496149063px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);}.frame-wRh-3{position: absolute;z-index:3;left: 78px;top: 120px;width: 451px;height: 180px;mix-blend-mode: normal;}.frame-wRh-3.fixed-width{width: 451px;}.vec-rectangle-Zqw-4{position: absolute;z-index: 3;left: 298px;top: 320px;width: 272px;height: 181px;mix-blend-mode: normal;box-sizing: border-box;opacity: 1;background: rgba(255, 255, 255, 1);}.vec-rectangle-Zqw-4::after{display: block;content: "";position: absolute;left: -0.5px;top: -0.5px;width: calc(100% + 1px);height: calc(100% + 1px);box-sizing: border-box;z-index: 999;pointer-events: none;border: 1px solid rgba(50, 46, 37, 1);}.vec-rectangle-WYp-5{position: absolute;z-index: 4;left: 26px;top: 320px;width: 272px;height: 181px;mix-blend-mode: normal;box-sizing: border-box;opacity: 1;background: rgba(255, 255, 255, 1);}.vec-rectangle-WYp-5::after{display: block;content: "";position: absolute;left: -0.5px;top: -0.5px;width: calc(100% + 1px);height: calc(100% + 1px);box-sizing: border-box;z-index: 999;pointer-events: none;border: 1px solid rgba(50, 46, 37, 1);}.vec-rectangle-CfE-1{position: absolute;z-index: 0;left: 0px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;box-sizing: border-box;opacity: 1;background: rgba(255, 255, 255, 1);}.vec-rectangle-CfE-1::after{display: block;content: "";position: absolute;left: -0.5px;top: -0.5px;width: calc(100% + 1px);height: calc(100% + 1px);box-sizing: border-box;z-index: 999;pointer-events: none;border: 1px solid rgba(0, 0, 0, 1);}.span-zUL-1{text-decoration-line:none;}.p-text-ZLs-2{display:inline;margin: 0px;width: 100%;text-align: center;}.text-ZLs-2{position: absolute;display:flex;flex-direction:column;z-index: 1;justify-content:center;left: 15px;top: 7px;height: 27px;mix-blend-mode: normal;color:rgba(0, 0, 0, 1);font-size:18px;font-weight:400;opacity: 1;font-family:'SourceHanSansCN-Regular';letter-spacing:0px;white-space:nowrap;}.text-ZLs-2-br{display: block;margin-bottom:0px;overflow: hidden;}.frame-res-1{position: absolute;z-index:1;left: 0px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;}.frame-res-1.fixed-width{width: 40px;}.vec-rectangle-mjR-1{position: absolute;z-index: 0;left: 0px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;box-sizing: border-box;opacity: 1;background: rgba(255, 255, 255, 1);}.vec-rectangle-mjR-1::after{display: block;content: "";position: absolute;left: -0.5px;top: -0.5px;width: calc(100% + 1px);height: calc(100% + 1px);box-sizing: border-box;z-index: 999;pointer-events: none;border: 1px solid rgba(0, 0, 0, 1);}.span-MDS-1{text-decoration-line:none;}.p-text-wAG-2{display:inline;margin: 0px;width: 100%;text-align: center;}.text-wAG-2{position: absolute;display:flex;flex-direction:column;z-index: 1;justify-content:center;left: 15px;top: 7px;height: 27px;mix-blend-mode: normal;color:rgba(0, 0, 0, 1);font-size:18px;font-weight:400;opacity: 1;font-family:'SourceHanSansCN-Regular';letter-spacing:0px;white-space:nowrap;}.text-wAG-2-br{display: block;margin-bottom:0px;overflow: hidden;}.frame-fzc-2{position: absolute;z-index:2;left: 0px;top: 40px;width: 40px;height: 40px;mix-blend-mode: normal;}.frame-fzc-2.fixed-width{width: 40px;}.vec-rectangle-RXd-1{position: absolute;z-index: 0;left: 0px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;box-sizing: border-box;opacity: 1;background: rgba(255, 255, 255, 1);}.vec-rectangle-RXd-1::after{display: block;content: "";position: absolute;left: -0.5px;top: -0.5px;width: calc(100% + 1px);height: calc(100% + 1px);box-sizing: border-box;z-index: 999;pointer-events: none;border: 1px solid rgba(0, 0, 0, 1);}.span-Jtq-1{text-decoration-line:none;}.p-text-Kcq-2{display:inline;margin: 0px;width: 100%;text-align: center;}.text-Kcq-2{position: absolute;display:flex;flex-direction:column;z-index: 1;justify-content:center;left: 15px;top: 7px;height: 27px;mix-blend-mode: normal;color:rgba(0, 0, 0, 1);font-size:18px;font-weight:400;opacity: 1;font-family:'SourceHanSansCN-Regular';letter-spacing:0px;white-space:nowrap;}.text-Kcq-2-br{display: block;margin-bottom:0px;overflow: hidden;}.frame-qlr-3{position: absolute;z-index:3;left: 0px;top: 80px;width: 40px;height: 40px;mix-blend-mode: normal;}.frame-qlr-3.fixed-width{width: 40px;}.vec-rectangle-CNf-1{position: absolute;z-index: 0;left: 0px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;box-sizing: border-box;opacity: 1;background: rgba(255, 255, 255, 1);}.vec-rectangle-CNf-1::after{display: block;content: "";position: absolute;left: -0.5px;top: -0.5px;width: calc(100% + 1px);height: calc(100% + 1px);box-sizing: border-box;z-index: 999;pointer-events: none;border: 1px solid rgba(0, 0, 0, 1);}.span-vlY-1{text-decoration-line:none;}.p-text-mCa-2{display:inline;margin: 0px;width: 100%;text-align: center;}.text-mCa-2{position: absolute;display:flex;flex-direction:column;z-index: 1;justify-content:center;left: 15px;top: 7px;height: 27px;mix-blend-mode: normal;color:rgba(0, 0, 0, 1);font-size:18px;font-weight:400;opacity: 1;font-family:'SourceHanSansCN-Regular';letter-spacing:0px;white-space:nowrap;}.text-mCa-2-br{display: block;margin-bottom:0px;overflow: hidden;}.frame-Ruv-4{position: absolute;z-index:4;left: 40px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;}.frame-Ruv-4.fixed-width{width: 40px;}.vec-rectangle-OLY-1{position: absolute;z-index: 0;left: 0px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;box-sizing: border-box;opacity: 1;background: rgba(255, 255, 255, 1);}.vec-rectangle-OLY-1::after{display: block;content: "";position: absolute;left: -0.5px;top: -0.5px;width: calc(100% + 1px);height: calc(100% + 1px);box-sizing: border-box;z-index: 999;pointer-events: none;border: 1px solid rgba(0, 0, 0, 1);}.span-Ikl-1{text-decoration-line:none;}.p-text-VFD-2{display:inline;margin: 0px;width: 100%;text-align: center;}.text-VFD-2{position: absolute;display:flex;flex-direction:column;z-index: 1;justify-content:center;left: 15px;top: 7px;height: 27px;mix-blend-mode: normal;color:rgba(0, 0, 0, 1);font-size:18px;font-weight:400;opacity: 1;font-family:'SourceHanSansCN-Regular';letter-spacing:0px;white-space:nowrap;}.text-VFD-2-br{display: block;margin-bottom:0px;overflow: hidden;}.frame-OaU-5{position: absolute;z-index:5;left: 40px;top: 40px;width: 40px;height: 40px;mix-blend-mode: normal;}.frame-OaU-5.fixed-width{width: 40px;}.vec-rectangle-xPd-1{position: absolute;z-index: 0;left: 0px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;box-sizing: border-box;opacity: 1;background: rgba(255, 255, 255, 1);}.vec-rectangle-xPd-1::after{display: block;content: "";position: absolute;left: -0.5px;top: -0.5px;width: calc(100% + 1px);height: calc(100% + 1px);box-sizing: border-box;z-index: 999;pointer-events: none;border: 1px solid rgba(0, 0, 0, 1);}.span-thi-1{text-decoration-line:none;}.p-text-NIP-2{display:inline;margin: 0px;width: 100%;text-align: center;}.text-NIP-2{position: absolute;display:flex;flex-direction:column;z-index: 1;justify-content:center;left: 15px;top: 7px;height: 27px;mix-blend-mode: normal;color:rgba(0, 0, 0, 1);font-size:18px;font-weight:400;opacity: 1;font-family:'SourceHanSansCN-Regular';letter-spacing:0px;white-space:nowrap;}.text-NIP-2-br{display: block;margin-bottom:0px;overflow: hidden;}.frame-Agg-6{position: absolute;z-index:6;left: 40px;top: 80px;width: 40px;height: 40px;mix-blend-mode: normal;}.frame-Agg-6.fixed-width{width: 40px;}.vec-rectangle-rwN-1{position: absolute;z-index: 0;left: 0px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;box-sizing: border-box;opacity: 1;background: rgba(255, 255, 255, 1);}.vec-rectangle-rwN-1::after{display: block;content: "";position: absolute;left: -0.5px;top: -0.5px;width: calc(100% + 1px);height: calc(100% + 1px);box-sizing: border-box;z-index: 999;pointer-events: none;border: 1px solid rgba(0, 0, 0, 1);}.span-gVx-1{text-decoration-line:none;}.p-text-Xjl-2{display:inline;margin: 0px;width: 100%;text-align: center;}.text-Xjl-2{position: absolute;display:flex;flex-direction:column;z-index: 1;justify-content:center;left: 15px;top: 7px;height: 27px;mix-blend-mode: normal;color:rgba(0, 0, 0, 1);font-size:18px;font-weight:400;opacity: 1;font-family:'SourceHanSansCN-Regular';letter-spacing:0px;white-space:nowrap;}.text-Xjl-2-br{display: block;margin-bottom:0px;overflow: hidden;}.frame-wNG-7{position: absolute;z-index:7;left: 80px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;}.frame-wNG-7.fixed-width{width: 40px;}.vec-rectangle-yNC-1{position: absolute;z-index: 0;left: 0px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;box-sizing: border-box;opacity: 1;background: rgba(255, 255, 255, 1);}.vec-rectangle-yNC-1::after{display: block;content: "";position: absolute;left: -0.5px;top: -0.5px;width: calc(100% + 1px);height: calc(100% + 1px);box-sizing: border-box;z-index: 999;pointer-events: none;border: 1px solid rgba(0, 0, 0, 1);}.span-CRl-1{text-decoration-line:none;}.p-text-EMc-2{display:inline;margin: 0px;width: 100%;text-align: center;}.text-EMc-2{position: absolute;display:flex;flex-direction:column;z-index: 1;justify-content:center;left: 15px;top: 7px;height: 27px;mix-blend-mode: normal;color:rgba(0, 0, 0, 1);font-size:18px;font-weight:400;opacity: 1;font-family:'SourceHanSansCN-Regular';letter-spacing:0px;white-space:nowrap;}.text-EMc-2-br{display: block;margin-bottom:0px;overflow: hidden;}.frame-PWX-8{position: absolute;z-index:8;left: 80px;top: 40px;width: 40px;height: 40px;mix-blend-mode: normal;}.frame-PWX-8.fixed-width{width: 40px;}.vec-rectangle-oLc-1{position: absolute;z-index: 0;left: 0px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;box-sizing: border-box;opacity: 1;background: rgba(255, 255, 255, 1);}.vec-rectangle-oLc-1::after{display: block;content: "";position: absolute;left: -0.5px;top: -0.5px;width: calc(100% + 1px);height: calc(100% + 1px);box-sizing: border-box;z-index: 999;pointer-events: none;border: 1px solid rgba(0, 0, 0, 1);}.span-NHN-1{text-decoration-line:none;}.p-text-Xqp-2{display:inline;margin: 0px;width: 100%;text-align: center;}.text-Xqp-2{position: absolute;display:flex;flex-direction:column;z-index: 1;justify-content:center;left: 15px;top: 7px;height: 27px;mix-blend-mode: normal;color:rgba(0, 0, 0, 1);font-size:18px;font-weight:400;opacity: 1;font-family:'SourceHanSansCN-Regular';letter-spacing:0px;white-space:nowrap;}.text-Xqp-2-br{display: block;margin-bottom:0px;overflow: hidden;}.frame-dwk-9{position: absolute;z-index:9;left: 80px;top: 80px;width: 40px;height: 40px;mix-blend-mode: normal;}.frame-dwk-9.fixed-width{width: 40px;}.vec-rectangle-yyV-1{position: absolute;z-index: 0;left: 0px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;box-sizing: border-box;opacity: 1;background: rgba(255, 255, 255, 1);}.vec-rectangle-yyV-1::after{display: block;content: "";position: absolute;left: -0.5px;top: -0.5px;width: calc(100% + 1px);height: calc(100% + 1px);box-sizing: border-box;z-index: 999;pointer-events: none;border: 1px solid rgba(0, 0, 0, 1);}.span-agJ-1{text-decoration-line:none;}.p-text-rLO-2{display:inline;margin: 0px;width: 100%;text-align: center;}.text-rLO-2{position: absolute;display:flex;flex-direction:column;z-index: 1;justify-content:center;left: 15px;top: 7px;height: 27px;mix-blend-mode: normal;color:rgba(0, 0, 0, 1);font-size:18px;font-weight:400;opacity: 1;font-family:'SourceHanSansCN-Regular';letter-spacing:0px;white-space:nowrap;}.text-rLO-2-br{display: block;margin-bottom:0px;overflow: hidden;}.frame-Oyw-10{position: absolute;z-index:10;left: 120px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;}.frame-Oyw-10.fixed-width{width: 40px;}.vec-rectangle-sgQ-1{position: absolute;z-index: 0;left: 0px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;box-sizing: border-box;opacity: 1;background: rgba(255, 255, 255, 1);}.vec-rectangle-sgQ-1::after{display: block;content: "";position: absolute;left: -0.5px;top: -0.5px;width: calc(100% + 1px);height: calc(100% + 1px);box-sizing: border-box;z-index: 999;pointer-events: none;border: 1px solid rgba(0, 0, 0, 1);}.span-lUa-1{text-decoration-line:none;}.p-text-hJD-2{display:inline;margin: 0px;width: 100%;text-align: center;}.text-hJD-2{position: absolute;display:flex;flex-direction:column;z-index: 1;justify-content:center;left: 15px;top: 7px;height: 27px;mix-blend-mode: normal;color:rgba(0, 0, 0, 1);font-size:18px;font-weight:400;opacity: 1;font-family:'SourceHanSansCN-Regular';letter-spacing:0px;white-space:nowrap;}.text-hJD-2-br{display: block;margin-bottom:0px;overflow: hidden;}.frame-MJs-11{position: absolute;z-index:11;left: 120px;top: 40px;width: 40px;height: 40px;mix-blend-mode: normal;}.frame-MJs-11.fixed-width{width: 40px;}.vec-rectangle-PsB-1{position: absolute;z-index: 0;left: 0px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;box-sizing: border-box;opacity: 1;background: rgba(255, 255, 255, 1);}.vec-rectangle-PsB-1::after{display: block;content: "";position: absolute;left: -0.5px;top: -0.5px;width: calc(100% + 1px);height: calc(100% + 1px);box-sizing: border-box;z-index: 999;pointer-events: none;border: 1px solid rgba(0, 0, 0, 1);}.span-qvV-1{text-decoration-line:none;}.p-text-CwM-2{display:inline;margin: 0px;width: 100%;text-align: center;}.text-CwM-2{position: absolute;display:flex;flex-direction:column;z-index: 1;justify-content:center;left: 15px;top: 7px;height: 27px;mix-blend-mode: normal;color:rgba(0, 0, 0, 1);font-size:18px;font-weight:400;opacity: 1;font-family:'SourceHanSansCN-Regular';letter-spacing:0px;white-space:nowrap;}.text-CwM-2-br{display: block;margin-bottom:0px;overflow: hidden;}.frame-bXj-12{position: absolute;z-index:12;left: 120px;top: 80px;width: 40px;height: 40px;mix-blend-mode: normal;}.frame-bXj-12.fixed-width{width: 40px;}.vec-rectangle-YWX-1{position: absolute;z-index: 0;left: 0px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;box-sizing: border-box;opacity: 1;background: rgba(255, 255, 255, 1);}.vec-rectangle-YWX-1::after{display: block;content: "";position: absolute;left: -0.5px;top: -0.5px;width: calc(100% + 1px);height: calc(100% + 1px);box-sizing: border-box;z-index: 999;pointer-events: none;border: 1px solid rgba(0, 0, 0, 1);}.span-kEz-1{text-decoration-line:none;}.p-text-YVc-2{display:inline;margin: 0px;width: 100%;text-align: center;}.text-YVc-2{position: absolute;display:flex;flex-direction:column;z-index: 1;justify-content:center;left: 15px;top: 7px;height: 27px;mix-blend-mode: normal;color:rgba(0, 0, 0, 1);font-size:18px;font-weight:400;opacity: 1;font-family:'SourceHanSansCN-Regular';letter-spacing:0px;white-space:nowrap;}.text-YVc-2-br{display: block;margin-bottom:0px;overflow: hidden;}.frame-ZnZ-13{position: absolute;z-index:13;left: 160px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;}.frame-ZnZ-13.fixed-width{width: 40px;}.vec-rectangle-EEz-1{position: absolute;z-index: 0;left: 0px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;box-sizing: border-box;opacity: 1;background: rgba(255, 255, 255, 1);}.vec-rectangle-EEz-1::after{display: block;content: "";position: absolute;left: -0.5px;top: -0.5px;width: calc(100% + 1px);height: calc(100% + 1px);box-sizing: border-box;z-index: 999;pointer-events: none;border: 1px solid rgba(0, 0, 0, 1);}.span-uxJ-1{text-decoration-line:none;}.p-text-HXe-2{display:inline;margin: 0px;width: 100%;text-align: center;}.text-HXe-2{position: absolute;display:flex;flex-direction:column;z-index: 1;justify-content:center;left: 15px;top: 7px;height: 27px;mix-blend-mode: normal;color:rgba(0, 0, 0, 1);font-size:18px;font-weight:400;opacity: 1;font-family:'SourceHanSansCN-Regular';letter-spacing:0px;white-space:nowrap;}.text-HXe-2-br{display: block;margin-bottom:0px;overflow: hidden;}.frame-ZQC-14{position: absolute;z-index:14;left: 160px;top: 40px;width: 40px;height: 40px;mix-blend-mode: normal;}.frame-ZQC-14.fixed-width{width: 40px;}.vec-rectangle-Emw-1{position: absolute;z-index: 0;left: 0px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;box-sizing: border-box;opacity: 1;background: rgba(255, 255, 255, 1);}.vec-rectangle-Emw-1::after{display: block;content: "";position: absolute;left: -0.5px;top: -0.5px;width: calc(100% + 1px);height: calc(100% + 1px);box-sizing: border-box;z-index: 999;pointer-events: none;border: 1px solid rgba(0, 0, 0, 1);}.span-mLj-1{text-decoration-line:none;}.p-text-obi-2{display:inline;margin: 0px;width: 100%;text-align: center;}.text-obi-2{position: absolute;display:flex;flex-direction:column;z-index: 1;justify-content:center;left: 15px;top: 7px;height: 27px;mix-blend-mode: normal;color:rgba(0, 0, 0, 1);font-size:18px;font-weight:400;opacity: 1;font-family:'SourceHanSansCN-Regular';letter-spacing:0px;white-space:nowrap;}.text-obi-2-br{display: block;margin-bottom:0px;overflow: hidden;}.frame-LqB-15{position: absolute;z-index:15;left: 160px;top: 80px;width: 40px;height: 40px;mix-blend-mode: normal;}.frame-LqB-15.fixed-width{width: 40px;}.vec-rectangle-OFx-1{position: absolute;z-index: 0;left: 0px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;box-sizing: border-box;opacity: 1;background: rgba(255, 255, 255, 1);}.vec-rectangle-OFx-1::after{display: block;content: "";position: absolute;left: -0.5px;top: -0.5px;width: calc(100% + 1px);height: calc(100% + 1px);box-sizing: border-box;z-index: 999;pointer-events: none;border: 1px solid rgba(0, 0, 0, 1);}.span-MRV-1{text-decoration-line:none;}.p-text-yNA-2{display:inline;margin: 0px;width: 100%;text-align: center;}.text-yNA-2{position: absolute;display:flex;flex-direction:column;z-index: 1;justify-content:center;left: 15px;top: 7px;height: 27px;mix-blend-mode: normal;color:rgba(0, 0, 0, 1);font-size:18px;font-weight:400;opacity: 1;font-family:'SourceHanSansCN-Regular';letter-spacing:0px;white-space:nowrap;}.text-yNA-2-br{display: block;margin-bottom:0px;overflow: hidden;}.frame-hli-16{position: absolute;z-index:16;left: 200px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;}.frame-hli-16.fixed-width{width: 40px;}.vec-rectangle-hnS-1{position: absolute;z-index: 0;left: 0px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;box-sizing: border-box;opacity: 1;background: rgba(255, 255, 255, 1);}.vec-rectangle-hnS-1::after{display: block;content: "";position: absolute;left: -0.5px;top: -0.5px;width: calc(100% + 1px);height: calc(100% + 1px);box-sizing: border-box;z-index: 999;pointer-events: none;border: 1px solid rgba(0, 0, 0, 1);}.span-zJb-1{text-decoration-line:none;}.p-text-pXB-2{display:inline;margin: 0px;width: 100%;text-align: center;}.text-pXB-2{position: absolute;display:flex;flex-direction:column;z-index: 1;justify-content:center;left: 15px;top: 7px;height: 27px;mix-blend-mode: normal;color:rgba(0, 0, 0, 1);font-size:18px;font-weight:400;opacity: 1;font-family:'SourceHanSansCN-Regular';letter-spacing:0px;white-space:nowrap;}.text-pXB-2-br{display: block;margin-bottom:0px;overflow: hidden;}.frame-GMj-17{position: absolute;z-index:17;left: 200px;top: 40px;width: 40px;height: 40px;mix-blend-mode: normal;}.frame-GMj-17.fixed-width{width: 40px;}.vec-rectangle-gWw-1{position: absolute;z-index: 0;left: 0px;top: 0px;width: 40px;height: 40px;mix-blend-mode: normal;box-sizing: border-box;opacity: 1;background: rgba(255, 255, 255, 1);}.vec-rectangle-gWw-1::after{display: block;content: "";position: absolute;left: -0.5px;top: -0.5px;width: calc(100% + 1px);height: calc(100% + 1px);box-sizing: border-box;z-index: 999;pointer-events: none;border: 1px solid rgba(0, 0, 0, 1);}.span-aCL-1{text-decoration-line:none;}.p-text-xxZ-2{display:inline;margin: 0px;width: 100%;text-align: center;}.text-xxZ-2{position: absolute;display:flex;flex-direction:column;z-index: 1;justify-content:center;left: 15px;top: 7px;height: 27px;mix-blend-mode: normal;color:rgba(0, 0, 0, 1);font-size:18px;font-weight:400;opacity: 1;font-family:'SourceHanSansCN-Regular';letter-spacing:0px;white-space:nowrap;}.text-xxZ-2-br{display: block;margin-bottom:0px;overflow: hidden;}.frame-tYb-18{position: absolute;z-index:18;left: 200px;top: 80px;width: 40px;height: 40px;mix-blend-mode: normal;}.frame-tYb-18.fixed-width{width: 40px;}.frame-SBG-6{position: absolute;z-index:6;left: 42px;top: 365px;width: 240px;height: 120px;mix-blend-mode: normal;}.frame-SBG-6.fixed-width{width: 240px;}.span-VUF-1{text-decoration-line:none;}.p-text-WOb-1{display:inline;margin: 0px;width: 100%;text-align: left;}.text-WOb-1{position: absolute;display:flex;flex-direction:column;z-index: 0;justify-content:start;left: 19px;top: 0px;height: 21px;mix-blend-mode: normal;color:rgba(0, 0, 0, 1);font-size:14px;font-weight:400;opacity: 1;font-family:'SourceHanSansCN-Regular';letter-spacing:0px;white-space:nowrap;}.text-WOb-1-br{display: block;margin-bottom:0px;overflow: hidden;}.img-hdU-1::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-XMl-2{position: absolute;z-index: 1;border:unset !important;box-shadow:unset;left:0px;top:4px;width:16px;height:16px;mix-blend-mode: normal;--bg-img:var(--img-url);--img-url:url(https://img.js.design/assets/element/js_i5VViyXCrg7/image/2e36875bdeffb96f3153332ffe15512286a690cb.png);}.img-XMl-2::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.frame-bCk-7{position: absolute;z-index:7;left: 42px;top: 332px;width: 100px;height: 21px;mix-blend-mode: normal;}.frame-bCk-7.fixed-width{width: 100px;}.span-Cyx-1{text-decoration-line:none;}.p-text-DFy-1{display:inline;margin: 0px;width: 100%;text-align: left;}.text-DFy-1{position: absolute;display:flex;flex-direction:column;z-index: 0;justify-content:start;left: 21px;top: 0px;height: 21px;mix-blend-mode: normal;color:rgba(0, 0, 0, 1);font-size:14px;font-weight:400;opacity: 1;font-family:'SourceHanSansCN-Regular';letter-spacing:0px;white-space:nowrap;}.text-DFy-1-br{display: block;margin-bottom:0px;overflow: hidden;}.img-VvX-1::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-iUR-2::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-AKW-3::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-pkT-1::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-MEY-2{position: absolute;z-index: 1;border:unset !important;box-shadow:unset;left:0px;top:3px;width:16px;height:16px;mix-blend-mode: normal;--bg-img:var(--img-url);--img-url:url(https://img.js.design/assets/element/js_i5VViyXCrg7/image/e59bdf8179e88f8122be9e7727f357a43fe512e2.png);}.img-MEY-2::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.frame-moL-8{position: absolute;z-index:8;left: 323px;top: 332px;width: 79px;height: 21px;mix-blend-mode: normal;}.frame-moL-8.fixed-width{width: 79px;}.img-YqU-1::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-YmD-2::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-aLr-3::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-dHz-4::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-iPd-9{position: absolute;z-index: 8;border:unset !important;box-shadow:unset;left:24px;top:524.5px;width:547.0146484375px;height:43px;mix-blend-mode: normal;--bg-img:var(--img-url);--img-url:url(https://img.js.design/assets/element/js_i5VViyXCrg7/image/10cdf9cd8c61c8b64b6ebc0f93c07c4401ddea7f.png);}.img-iPd-9::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-zMh-1::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-Uub-2::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-gaW-3::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-Fcm-4::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-Jzx-10{position: absolute;z-index: 9;border:unset !important;box-shadow:unset;left:24px;top:590.5px;width:547.0146484375px;height:43px;mix-blend-mode: normal;--bg-img:var(--img-url);--img-url:url(https://img.js.design/assets/element/js_i5VViyXCrg7/image/10cdf9cd8c61c8b64b6ebc0f93c07c4401ddea7f.png);}.img-Jzx-10::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-zxd-1::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-dRK-2::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-Wsy-3::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-Juz-4::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-IYY-11{position: absolute;z-index: 10;border:unset !important;box-shadow:unset;left:24px;top:656.5px;width:547.0146484375px;height:43px;mix-blend-mode: normal;--bg-img:var(--img-url);--img-url:url(https://img.js.design/assets/element/js_i5VViyXCrg7/image/10cdf9cd8c61c8b64b6ebc0f93c07c4401ddea7f.png);}.img-IYY-11::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-wJj-1::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-hCH-2::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-fDU-3::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-JWm-4::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-Mbe-12{position: absolute;z-index: 11;border:unset !important;box-shadow:unset;left:24px;top:722.5px;width:547.0146484375px;height:43px;mix-blend-mode: normal;--bg-img:var(--img-url);--img-url:url(https://img.js.design/assets/element/js_i5VViyXCrg7/image/10cdf9cd8c61c8b64b6ebc0f93c07c4401ddea7f.png);}.img-Mbe-12::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-Gma-13{position: absolute;z-index: 12;border:unset !important;box-shadow:unset;left:316.00006103515625px;top:364.5px;width:236.0084228515625px;height:1px;mix-blend-mode: normal;--bg-img:var(--img-url);--img-url:url(https://img.js.design/assets/element/js_i5VViyXCrg7/image/fb7bb7cf38d6009076aa5916e5bbb51226f48b8c.png);}.img-Gma-13::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-kse-14{position: absolute;z-index: 13;border:unset !important;box-shadow:unset;left:316.00006103515625px;top:404.5px;width:236.0084228515625px;height:1px;mix-blend-mode: normal;--bg-img:var(--img-url);--img-url:url(https://img.js.design/assets/element/js_i5VViyXCrg7/image/a3886d5667c49b9e714d1bc90fffed78f9ab9077.png);}.img-kse-14::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-wfB-15{position: absolute;z-index: 14;border:unset !important;box-shadow:unset;left:316.00006103515625px;top:444.5px;width:236.0084228515625px;height:1px;mix-blend-mode: normal;--bg-img:var(--img-url);--img-url:url(https://img.js.design/assets/element/js_i5VViyXCrg7/image/a3886d5667c49b9e714d1bc90fffed78f9ab9077.png);}.img-wfB-15::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.img-Vdl-16{position: absolute;z-index: 15;border:unset !important;box-shadow:unset;left:316.00006103515625px;top:484.5px;width:236.0084228515625px;height:1px;mix-blend-mode: normal;--bg-img:var(--img-url);--img-url:url(https://img.js.design/assets/element/js_i5VViyXCrg7/image/fb7bb7cf38d6009076aa5916e5bbb51226f48b8c.png);}.img-Vdl-16::before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);background-size:cover;}.vec-rectangle-lyA-17{position: absolute;z-index:16;left: 337px;top: 365px;width: 159px;height: 80px;mix-blend-mode: normal;--bg-img:var(--img-url);--img-url:url(https://img.js.design/assets/img/69ddff87b5e8b987e508da03.png#13149ec13aa4e12cfa0663031cf20345);}.vec-rectangle-lyA-17::before{background-repeat: no-repeat;background-size: 420.5739949874687px 547.0450751252087px;background-position: -50.822084069252014px -111.51920318603516px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';opacity: 1;background-image: var(--bg-img);}.frame-IaJ-2{position:relative;z-index:2;height: 842px;mix-blend-mode: normal;background: rgba(255, 255, 255, 1);overflow:hidden;}.frame-IaJ-2.fixed-width{width: 595px;}
|
||
::-webkit-scrollbar {display: none;}
|
||
.pointer-link,
|
||
.pointer-link > * {
|
||
cursor: var(--cursor-pointer) !important;
|
||
}
|
||
* {
|
||
--cursor-pointer:-webkit-image-set(url(data:image/png;base64,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) 2x, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAAEEfUpiAAAAAXNSR0IArs4c6QAAA9xJREFUWAntV8tLVFEYnzvvpzTazIijprZRpqRFhFLUooUglSFDs2vXInAxuBaX9RcEbVNBsHAlYtbGRUK4CnMhLoxQQ8lkZGZ0Xvf2+13m3O6dmYujhAT2wcc95zvf45zvdc61WEzABbpVW1PKAEJIECWHw5HERBIE4/fw8FDRU2w6HRY7VkqSJD3Sc9Q99lN3OBxWotHoR0j92SdV2Gy2h8IWvyBdIv08oaWlpQT33Kq0adjp7Ozs54GBgXxjY2OfgbG1tXVhaWlJO0Rvb++xYFA1bG1tPZ6fny8J4sHBgTbWhyOCPSRKAFmW34J5Twic/1dCvEZxsDRMe85i3kefMvB2u30ACtxAG1B/3pp6paampufIlAIVaD4tD46OjhTsqgBJn15aHyhpf3//E5JV2t7e1tNVfrfbbfF4PMwygwK9MjEO+ny+F8lkspjJZBRiKpVS4vF4HikbB5NTMPJrdi7SeW5HmYeWi2U0FBxoFx7oqEpwIw/SCNtONpv9gsXTOQ0hvM/cYfuBsL9Se+W8KmEgqyWK1+sNQIDdsIpPKKpcYPy13Jibm9sZHBzMIoW/d3R0vMcaG7cpOJubm4s4/yaPoIfJyUmlUCgofr9/GNKVRjWF0UQiUTg+PtbLGsaBQGAU3DxSTfDDgS83NjYMQvoJFDyDpKkCnr2jra1tSy8kxsvLy4zKbaDpEbCmFtBN9ITc+vq6WomsxpWVFaW9vf0n1jvJpAfN4zoiy/U6Svea1WoNkg4H/sJnFfiVU6AGtRRwkdukIrFd9nGWs9bPMf4P/4gHzIJYuT0GU4rFYmr7WVtbkzEXWMn71+d29LYrrPPFxUVlenqa91sGV1QUltgc6j3EmTeGruZ9IC5b8VTDrX0PGvkSE6l+JgOmfUGnjSes6vxo2B9wh1uKxeIrPIcyGJdyudwb3ME/wM+aEyE63Y1QNsxTOSKRSGcwGLwDdz8RHuATo7u7W4YxtU319PTIu7u7attBmOTx8XFlbGyshJ62B8+1UA/wVGGi8caurq5vExMTSjqdVoaGhvLob1XvHdEoa335zGxoaBihLmCVB0EzBTJHnE7nMJ94U1NTci0DJ9G4gfL9EYa+ekJt2BAFKHg3FAot9Pf354XLTzLMdfIiR2SXyzUIHZeBp/IA+FVgKHjBx6BoBN7IzczM1GOfIStgA+8ge6OswzQHTBcgKIBJxDhexUb68I/xFOMY/gWq3IobOY37bxXP3NdY59W1CTwEmt5C9WwA8moW06AXyNrnc4cvd8oTWWosO/7fpIEpYBYoyhHD2lDvBmpLG8vrTPVupvji0H8DAsFwgXvDpDQAAAAASUVORK5CYII=) 1x) 9 9, auto !important;
|
||
}
|
||
*:not(.pointer-link *) {
|
||
cursor: -webkit-image-set(url(data:image/png;base64,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) 2x, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAAEEfUpiAAAAAXNSR0IArs4c6QAAArtJREFUWAntV01rGlEUHWuibcU2TVPTRonJpiL2a1FbaEtpAvobanGnIK4qKQjuhP4GseDWjYuii9CNiyJCN134segiJGlAcKELQWJDFZmeM+0TDRM/ppVuvHCceXfuPXPvfe/dN0qSmmxvb8vn9cvnFWPGFouF/pcHJjIEA/1AoXoTjUZpdfGbyFssFuVAIDDKP0Q34R1DlppuN/D+t+M87Qyy0Wh8VjO6RKVer5cymcyrXq/XUjPahPIxQOMlNQOdmvLf6wxI9SloNVdUKYXb7ZYPDg4+gMgwbYwiQRKcCCedTicdHh4emc3mB9D9EPpxVyWCVqvVgNET4CHwHHADJmCirMDiHnB1ouXCQLUCunq9/gZPrqg+nUK5zN7Rbre7sOVsiLUxhetvEwMJuCmPj4/ZNdYAZR9OyzAgIEmhUJB3d3fts5CMEJAklUrJ8Xicm3zi5hrpAHCUut2uVCqVpEgk8nV9ff1FOBz+AiKmdqEoEfh8PtnpdL6G1X2Ae+AlwFQmikKQTqeTsBQFZOiMbmIKZF8yGo13cbUBM1WfzkL4Js3OgmRx1ViB4XnmLvxvM8FAVrCpe/1+/zSfz7O/XAO4GGduD/CZWXiQbYq2srOzw/O+Xy6X30O/CvALZq6BMAC7CIAdhXC5XHKlUpFrtdrHra2t27AxAnOZJtUARCA2m03OZrMyDt5SMBh0Igi2/+H1g6E2mSobtshQKCQ5HI5H+Jb9dnZ2dpRIJNjteOr/VSBiXlmBO5iCE/RgJZVYLCZ5vd5KMpncR5u9brVa1/7I6g2IyWQy5HK5d36//xMcToGxPVshHfMzmAKPxyM3m82fOAj2YM/efhNgpmaAhyZbNqO8BVA3cqhgrEm4yjc6nc73arW6j/tnHANzW3TgVkRMAdcCM+H/DOr4iUD0gYUsKrCowFwr8AukF+p8blYsTwAAAABJRU5ErkJggg==) 1x) 4 4, auto;
|
||
}
|
||
</style><div class="frame-IaJ-2 "><div class="img-Imp-1"></div><div class="frame-ODp-2"><div class="img-JjM-1"></div><div class="text-RLT-2"><div class="p-text-RLT-2"><span class="span-Caw-1 ">数一数，连一连</span></div></div><div class="frame-SPY-3"><div class="frame-PYi-1"><div class="text-NnL-1"><div class="p-text-NnL-1"><span class="span-AoG-1 ">得分：</span></div></div><div class="img-MDS-2"></div></div><div class="frame-TLL-2"><div class="text-Wvd-1"><div class="p-text-Wvd-1"><span class="span-Vqu-1 ">日期：</span></div></div><div class="img-Tvd-2"></div></div><div class="frame-Pay-3"><div class="text-CGp-1"><div class="p-text-CGp-1"><span class="span-KKa-1 ">姓名：</span></div></div><div class="img-WDh-2"></div></div></div><div class="vec-rectangle-wtW-4"></div></div><div class="frame-wRh-3"><div class="frame-iYw-1"><div class="text-Gvi-1"><div class="p-text-Gvi-1"><span class="span-BvS-1 ">A</span><span class="span-BvS-2 "> is for </span><span class="span-BvS-3 ">A</span><span class="span-BvS-4 ">pple</span></div></div><div class="frame-HQk-2"><div class="vec-rectangle-Nss-1"></div><div class="vec-rectangle-Waf-2"></div></div></div><div class="vec-rectangle-rfY-2"></div></div><div class="vec-rectangle-Zqw-4"></div><div class="vec-rectangle-WYp-5"></div><div class="frame-SBG-6"><div class="frame-res-1"><div class="vec-rectangle-CfE-1"></div><div class="text-ZLs-2"><div class="p-text-ZLs-2"><span class="span-zUL-1 ">A</span></div></div></div><div class="frame-fzc-2"><div class="vec-rectangle-mjR-1"></div><div class="text-wAG-2"><div class="p-text-wAG-2"><span class="span-MDS-1 ">A</span></div></div></div><div class="frame-qlr-3"><div class="vec-rectangle-RXd-1"></div><div class="text-Kcq-2"><div class="p-text-Kcq-2"><span class="span-Jtq-1 ">A</span></div></div></div><div class="frame-Ruv-4"><div class="vec-rectangle-CNf-1"></div><div class="text-mCa-2"><div class="p-text-mCa-2"><span class="span-vlY-1 ">A</span></div></div></div><div class="frame-OaU-5"><div class="vec-rectangle-OLY-1"></div><div class="text-VFD-2"><div class="p-text-VFD-2"><span class="span-Ikl-1 ">A</span></div></div></div><div class="frame-Agg-6"><div class="vec-rectangle-xPd-1"></div><div class="text-NIP-2"><div class="p-text-NIP-2"><span class="span-thi-1 ">A</span></div></div></div><div class="frame-wNG-7"><div class="vec-rectangle-rwN-1"></div><div class="text-Xjl-2"><div class="p-text-Xjl-2"><span class="span-gVx-1 ">A</span></div></div></div><div class="frame-PWX-8"><div class="vec-rectangle-yNC-1"></div><div class="text-EMc-2"><div class="p-text-EMc-2"><span class="span-CRl-1 ">A</span></div></div></div><div class="frame-dwk-9"><div class="vec-rectangle-oLc-1"></div><div class="text-Xqp-2"><div class="p-text-Xqp-2"><span class="span-NHN-1 ">A</span></div></div></div><div class="frame-Oyw-10"><div class="vec-rectangle-yyV-1"></div><div class="text-rLO-2"><div class="p-text-rLO-2"><span class="span-agJ-1 ">A</span></div></div></div><div class="frame-MJs-11"><div class="vec-rectangle-sgQ-1"></div><div class="text-hJD-2"><div class="p-text-hJD-2"><span class="span-lUa-1 ">A</span></div></div></div><div class="frame-bXj-12"><div class="vec-rectangle-PsB-1"></div><div class="text-CwM-2"><div class="p-text-CwM-2"><span class="span-qvV-1 ">A</span></div></div></div><div class="frame-ZnZ-13"><div class="vec-rectangle-YWX-1"></div><div class="text-YVc-2"><div class="p-text-YVc-2"><span class="span-kEz-1 ">A</span></div></div></div><div class="frame-ZQC-14"><div class="vec-rectangle-EEz-1"></div><div class="text-HXe-2"><div class="p-text-HXe-2"><span class="span-uxJ-1 ">A</span></div></div></div><div class="frame-LqB-15"><div class="vec-rectangle-Emw-1"></div><div class="text-obi-2"><div class="p-text-obi-2"><span class="span-mLj-1 ">A</span></div></div></div><div class="frame-hli-16"><div class="vec-rectangle-OFx-1"></div><div class="text-yNA-2"><div class="p-text-yNA-2"><span class="span-MRV-1 ">A</span></div></div></div><div class="frame-GMj-17"><div class="vec-rectangle-hnS-1"></div><div class="text-pXB-2"><div class="p-text-pXB-2"><span class="span-zJb-1 ">A</span></div></div></div><div class="frame-tYb-18"><div class="vec-rectangle-gWw-1"></div><div class="text-xxZ-2"><div class="p-text-xxZ-2"><span class="span-aCL-1 ">A</span></div></div></div></div><div class="frame-bCk-7"><div class="text-WOb-1"><div class="p-text-WOb-1"><span class="span-VUF-1 ">Highlight it !</span></div></div><div class="img-XMl-2"></div></div><div class="frame-moL-8"><div class="text-DFy-1"><div class="p-text-DFy-1"><span class="span-Cyx-1 ">Trace It !</span></div></div><div class="img-MEY-2"></div></div><div class="img-iPd-9"></div><div class="img-Jzx-10"></div><div class="img-IYY-11"></div><div class="img-Mbe-12"></div><div class="img-Gma-13"></div><div class="img-kse-14"></div><div class="img-wfB-15"></div><div class="img-Vdl-16"></div><div class="vec-rectangle-lyA-17"></div></div><style>.overlay_center {
|
||
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
margin: auto;
|
||
z-index: 9999;
|
||
}
|
||
.overlay_top_left {
|
||
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 9999;
|
||
}
|
||
.overlay_top_center {
|
||
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
z-index: 9999;
|
||
}
|
||
.overlay_top_right {
|
||
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0
|
||
z-index: 9999;
|
||
}
|
||
.overlay_bottom_left {
|
||
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
margin: auto;
|
||
z-index: 9999;
|
||
}
|
||
.overlay_bottom_center {
|
||
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
|
||
z-index: 9999;
|
||
}
|
||
|
||
.popupMask {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
z-index: 9999;
|
||
}
|
||
</style></div></div></div></template></js-frame></div>
|
||
<a href="https://js.design/" id="tip" target="_blank">
|
||
<img width="132" height="32" src="./英语字母描红_files/tip.svg">
|
||
</a>
|
||
<!-- 未审核 -->
|
||
<div class="unchecked-tips" id="unchecked">
|
||
当前页面未通过审核，此地址仅用于效果预览，不可分享
|
||
</div>
|
||
|
||
|
||
<script>
|
||
const log = console.log.bind(console)
|
||
const e = (sel) => document.querySelector(sel)
|
||
|
||
// 获取url参数值
|
||
const getUrlField = (key) => {
|
||
let url = location.search.slice(1).split('&')
|
||
let urlForm = url.reduce((pre, cur) => {
|
||
let list = cur.split('=')
|
||
pre[list[0]] = list[1]
|
||
return pre
|
||
}, {})
|
||
return urlForm[key];
|
||
}
|
||
|
||
// 获取url的hash值，#后面的内容
|
||
const getHashValue = function () {
|
||
const url = window.location.href
|
||
if (url.includes('#')) {
|
||
const v = url.split('#')[1]
|
||
return decodeURIComponent(v)
|
||
}
|
||
return ''
|
||
}
|
||
|
||
// 是否是预发布环境，url参数staging=true标记为预发布环境
|
||
const isStaging = function () {
|
||
return getUrlField('staging') === 'true'
|
||
}
|
||
|
||
// 获取后端api前缀
|
||
const getApi = function () {
|
||
return isStaging() ? 'https://staging.ds.js.design' : 'https://ds.js.design'
|
||
}
|
||
|
||
// 根据参数id，获取d2c组件url
|
||
const getUrlXComponent = function () {
|
||
const id = getUrlField('id');
|
||
const versionId = getUrlField('versionId')
|
||
const hashValue = getHashValue()
|
||
if (versionId) {
|
||
const accessKey = getUrlField('accessKey')
|
||
return `${getApi()}/elements/${id}?unionId=${id}&versionId=${versionId}&accessKey=${accessKey}#${hashValue}`;
|
||
}
|
||
return `${getApi()}/elements/${id}#${hashValue}`;
|
||
}
|
||
|
||
// 加载jsframe
|
||
const loadJsFrame = function () {
|
||
// 加载js-frame
|
||
let jsFrameScript = document.createElement('script');
|
||
jsFrameScript.src = 'https://img.js.design/assets/Resources/xframe/latest/jsframe.js';
|
||
document.body.appendChild(jsFrameScript);
|
||
}
|
||
|
||
/**
|
||
* 监听画板切换事件
|
||
*/
|
||
function addListenerSwitchFrame() {
|
||
const jsFrame = document.querySelector('js-frame');
|
||
if (jsFrame) {
|
||
jsFrame.on('__global__SWITCH_FRAME', function (event) {
|
||
document.title = event.frameName;
|
||
})
|
||
}
|
||
}
|
||
|
||
const addListenerReadyStateChange = function (jsFrame) {
|
||
const _onceListener = (function () {
|
||
let _isListener = false;
|
||
return () => {
|
||
if (_isListener) return;
|
||
_isListener = true;
|
||
addListenerSwitchFrame();
|
||
}
|
||
})();
|
||
jsFrame.addEventListener('jsFrameReadystatechange', function (e) {
|
||
if (jsFrame.readyState.label === 'inited') {
|
||
_onceListener();
|
||
}
|
||
})
|
||
}
|
||
|
||
// 加载d2c组件
|
||
const loadXComponent = function (onLoadSuccess) {
|
||
let id = getUrlField('id');
|
||
let content = document.getElementById("content");
|
||
if (id) {
|
||
let node = document.createElement('js-frame');
|
||
const src = getUrlXComponent()
|
||
node.setAttribute('src', src)
|
||
addListenerReadyStateChange(node);
|
||
content.appendChild(node);
|
||
} else {
|
||
let node = document.createElement('div');
|
||
node.innerText = '请输入id字段，例如：?id=xxxx';
|
||
content.appendChild(node);
|
||
}
|
||
}
|
||
|
||
// 监听hash值，对jsframe src进行更新
|
||
const listenHashChange = function () {
|
||
window.addEventListener('hashchange', () => {
|
||
const jsFrame = document.querySelector('js-frame')
|
||
if (jsFrame) {
|
||
jsFrame.setAttribute('src', getUrlXComponent())
|
||
}
|
||
})
|
||
}
|
||
|
||
// 监听reload，触发页面刷新
|
||
const listenReload = function () {
|
||
window.addEventListener('message', (event) => {
|
||
if (event.data === 'reload') {
|
||
location.reload()
|
||
}
|
||
}, false)
|
||
}
|
||
|
||
// 小宽度，居中显示
|
||
const changeContentWidth = function () {
|
||
const w = window.jsdD2CfirstFrameWidth
|
||
if (w && w <= 500) {
|
||
const content = e('#content')
|
||
content.style = `
|
||
margin: 0 auto;
|
||
width: ${w}px;
|
||
`
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 显示内容
|
||
* */
|
||
const showContent = function () {
|
||
const content = e('#content')
|
||
content.style.visibility = 'visible'
|
||
}
|
||
|
||
/**
|
||
* 是否已经被审核的处理
|
||
* */
|
||
function uncheckedHandler() {
|
||
const accessKey = getUrlField('accessKey');
|
||
if (accessKey) {
|
||
const uncheckedEl = document.getElementById('unchecked');
|
||
if (!uncheckedEl) return;
|
||
uncheckedEl.style.display = 'block';
|
||
}
|
||
}
|
||
|
||
const __main = function () {
|
||
loadJsFrame()
|
||
loadXComponent()
|
||
listenHashChange()
|
||
listenReload()
|
||
uncheckedHandler()
|
||
|
||
window.onload = () => {
|
||
changeContentWidth()
|
||
showContent()
|
||
}
|
||
}
|
||
|
||
__main()
|
||
</script><script src="./英语字母描红_files/jsframe.js"></script>
|
||
|
||
</body><div id="immersive-translate-browser-popup" style="all: initial"><template shadowrootmode="open"><style>/** 基础色阶定义 **/
|
||
:root,
|
||
#mount[data-theme="light"],
|
||
#mount:not([data-theme="dark"]) {
|
||
/* 中性灰阶（light） */
|
||
--c-00: #000000;
|
||
--c-22: #222222;
|
||
--c-33: #333333;
|
||
--c-66: #666666;
|
||
--c-83: #838383;
|
||
--c-99: #999999;
|
||
--c-c7: #c7c7c7;
|
||
--c-cc: #cccccc;
|
||
--c-e6: #e6e6e6;
|
||
--c-f5: #f5f5f5;
|
||
--c-ff: #ffffff;
|
||
/* 品牌主色阶（light） */
|
||
--p-main: #ea4c89;
|
||
--p-hover: #ec5e95;
|
||
--p-active: #e34a85;
|
||
--p-special: #ee71a2;
|
||
--p-disabled: #f4a5c4;
|
||
--p-text-disabled: #f9c9dc;
|
||
--p-weak: #fdedf3;
|
||
/* Surface 层级（light，TC 填充-1） */
|
||
--s-1: #f3f5f6;
|
||
--s-1-hover: #f6f8f9;
|
||
--s-1-active: #edf1f2;
|
||
--s-1-weak: #fafbfb;
|
||
/* 输入/边框（light，TC 填充-2） */
|
||
--input-bg-base: #fafbfc;
|
||
--input-border: #ecf0f7;
|
||
--input-border-strong: #e0e0e6;
|
||
--input-bg-strong: #fafdff;
|
||
}
|
||
|
||
:root[data-theme="dark"],
|
||
[data-theme="dark"] {
|
||
/* 中性灰阶（dark） */
|
||
--c-00: #ffffff;
|
||
--c-22: #dbdbdb;
|
||
--c-33: #dbdbdb;
|
||
--c-66: #b3b3b3;
|
||
--c-83: #838383;
|
||
--c-99: #707070;
|
||
--c-c7: #666666;
|
||
--c-cc: #5c5c5c;
|
||
--c-e6: #3b3b3b;
|
||
--c-f5: #262626;
|
||
--c-ff: #222222;
|
||
/* 品牌主色阶（dark） */
|
||
--p-main: #e23c7c;
|
||
--p-hover: #ea4c89;
|
||
--p-active: #d5467d;
|
||
--p-special: #a93a65;
|
||
--p-disabled: #7e2f4d;
|
||
--p-text-disabled: #522335;
|
||
--p-weak: #26171d;
|
||
/* Surface 层级（dark，TC 填充-1） */
|
||
--s-1: #2d2e2f;
|
||
--s-1-hover: #323434;
|
||
--s-1-active: #202121;
|
||
--s-1-weak: #262627;
|
||
/* 输入/边框（dark，TC 填充-2） */
|
||
--input-bg-base: #2b2d30;
|
||
--input-border: #3e434b;
|
||
--input-border-strong: #43474b;
|
||
--input-bg-strong: #1f2123;
|
||
}
|
||
|
||
:root,
|
||
#mount [data-theme] {
|
||
/* 业务/通用变量引用色阶（全局可见，含 Shadow DOM） */
|
||
--primary: var(--p-main);
|
||
--primary-hover: var(--p-hover);
|
||
--primary-inverse: #fff;
|
||
--modal-background: var(--s-1);
|
||
--modal-border: var(--input-border);
|
||
--modal-text: var(--c-22);
|
||
--modal-text-secondary: var(--c-66);
|
||
--modal-error: var(--p-main);
|
||
--modal-required: #f53f3f;
|
||
--modal-success: #68cd52;
|
||
--modal-button-background: var(--p-main);
|
||
--modal-button-text: var(--c-ff);
|
||
--modal-input-background: var(--input-bg-base);
|
||
--modal-check-color: var(--p-main);
|
||
--background-color: var(--c-ff);
|
||
--background-light-green: var(--s-1-weak, #f5f7f9);
|
||
--text-black-2: var(--c-22);
|
||
--text-gray-2: var(--c-22);
|
||
--text-gray-6: var(--c-66);
|
||
--text-gray-9: var(--c-99);
|
||
--text-gray-c2: var(--c-c7);
|
||
--switch-background-color: var(--c-c7, hsl(205deg, 16%, 77%));
|
||
--float-ball-more-button-border-color: var(--c-f5, #f6f6f6);
|
||
--float-ball-more-button-background-color: var(--c-ff);
|
||
--float-ball-more-button-hover-color: var(--p-weak);
|
||
--float-ball-more-button-svg-color: #6c6f73;
|
||
--service-bg-hover: var(--s-1-hover, #f7faff);
|
||
--service-bg: var(--s-1-weak, #fafbfb);
|
||
}
|
||
|
||
#mount {
|
||
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
|
||
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
||
"Segoe UI Symbol", "Noto Color Emoji";
|
||
/* PC/H5 兼容的字号、间距、圆角、阴影变量 */
|
||
--f-12: 12px;
|
||
--f-14: 14px;
|
||
--f-15: 15px;
|
||
--f-16: 16px;
|
||
--f-18: 18px;
|
||
--f-20: 20px;
|
||
--space-4: 4px;
|
||
--space-6: 6px;
|
||
--space-8: 8px;
|
||
--space-12: 12px;
|
||
--space-16: 16px;
|
||
--space-18: 18px;
|
||
--space-24: 24px;
|
||
--radius-8: 8px;
|
||
--radius-12: 12px;
|
||
--radius-16: 16px;
|
||
--control-height-lg: 44px;
|
||
--width-28: 28px;
|
||
--width-24: 24px;
|
||
--width-20: 20px;
|
||
--width-18: 18px;
|
||
--width-16: 16px;
|
||
--width-label-md: 56px;
|
||
--shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.12);
|
||
|
||
/* 常规变量 */
|
||
--line-height: 1.5;
|
||
--font-weight: 400;
|
||
--font-size: 16px;
|
||
--border-radius: 4px;
|
||
--border-width: 2px;
|
||
--outline-width: 3px;
|
||
--spacing: 16px;
|
||
--typography-spacing-vertical: 24px;
|
||
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||
--block-spacing-horizontal: var(--spacing);
|
||
--grid-spacing-vertical: 0;
|
||
--grid-spacing-horizontal: var(--spacing);
|
||
--form-element-spacing-vertical: 12px;
|
||
--form-element-spacing-horizontal: 16px;
|
||
--nav-element-spacing-vertical: 16px;
|
||
--nav-element-spacing-horizontal: 8px;
|
||
--nav-link-spacing-vertical: 8px;
|
||
--nav-link-spacing-horizontal: 8px;
|
||
--form-label-font-weight: var(--font-weight);
|
||
--transition: 0.2s ease-in-out;
|
||
--modal-overlay-backdrop-filter: blur(4px);
|
||
--switch-color: var(--primary-inverse);
|
||
--switch-checked-background-color: var(--primary);
|
||
--icon-xia: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkZyYW1lIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTguMDAyOTEgOS42Nzk4M0wzLjgzMzM5IDUuNTEyMjFMMy4wMjUzOSA2LjMxOTgzTDguMDAzMjkgMTEuMjk1MUwxMi45NzYyIDYuMzE5ODNMMTIuMTY3OSA1LjUxMjIxTDguMDAyOTEgOS42Nzk4M1oiIGZpbGw9IiM4MzgzODMiLz4KPC9nPgo8L3N2Zz4K");
|
||
/* 兼容旧变量：主色直接引用品牌主色阶 */
|
||
--primary: var(--p-main);
|
||
--primary-hover: var(--p-hover);
|
||
--primary-inverse: #fff;
|
||
/* Modal 业务变量引用色阶 */
|
||
--modal-background: var(--s-1);
|
||
--modal-border: var(--input-border);
|
||
--modal-text: var(--c-22);
|
||
--modal-text-secondary: var(--c-66);
|
||
--modal-error: var(--p-main);
|
||
--modal-required: #f53f3f;
|
||
--modal-success: #68cd52;
|
||
--modal-button-background: var(--p-main);
|
||
--modal-button-text: var(--c-ff);
|
||
--modal-input-background: var(--input-bg-base);
|
||
--modal-check-color: var(--p-main);
|
||
--background-color: var(--c-ff);
|
||
--background-light-green: var(--s-1-weak, #f5f7f9);
|
||
--text-black-2: var(--c-22);
|
||
--text-gray-2: var(--c-22);
|
||
--text-gray-6: var(--c-66);
|
||
--text-gray-9: var(--c-99);
|
||
--text-gray-c2: var(--c-c7);
|
||
--switch-background-color: var(--c-c7, hsl(205deg, 16%, 77%));
|
||
--float-ball-more-button-border-color: var(--c-f5, #f6f6f6);
|
||
--float-ball-more-button-background-color: var(--c-ff);
|
||
--float-ball-more-button-hover-color: var(--p-weak);
|
||
--float-ball-more-button-svg-color: #6c6f73;
|
||
--service-bg-hover: var(--s-1-hover, #f7faff);
|
||
--service-bg: var(--s-1-weak, #fafbfb);
|
||
line-height: var(--line-height);
|
||
font-family: var(--font-family);
|
||
font-size: var(--font-size);
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
:root,
|
||
#mount {
|
||
--f-12: 10px;
|
||
--f-14: 12px;
|
||
--f-15: 13px;
|
||
--f-16: 14px;
|
||
--f-18: 16px;
|
||
--f-20: 18px;
|
||
--space-4: 4px;
|
||
--space-6: 4px;
|
||
--space-8: 6px;
|
||
--space-12: 8px;
|
||
--space-16: 12px;
|
||
--space-18: 14px;
|
||
--space-24: 18px;
|
||
--radius-8: 6px;
|
||
--radius-12: 10px;
|
||
--radius-16: 12px;
|
||
--control-height-lg: 38px;
|
||
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1);
|
||
--width-28: 24px;
|
||
--width-24: 20px;
|
||
--width-20: 16px;
|
||
--width-18: 14px;
|
||
--width-16: 12px;
|
||
--width-label-md: 52px;
|
||
}
|
||
}
|
||
|
||
#mount * {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
[hidden] {
|
||
display: none !important;
|
||
}
|
||
|
||
:where(#mount) a,
|
||
:where(#mount) [role="link"] {
|
||
--color: var(--primary);
|
||
--background-color: transparent;
|
||
outline: none;
|
||
background-color: var(--background-color);
|
||
color: var(--color);
|
||
-webkit-text-decoration: var(--text-decoration);
|
||
text-decoration: var(--text-decoration);
|
||
transition: background-color var(--transition), color var(--transition),
|
||
box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
||
transition: background-color var(--transition), color var(--transition),
|
||
text-decoration var(--transition), box-shadow var(--transition);
|
||
transition: background-color var(--transition), color var(--transition),
|
||
text-decoration var(--transition), box-shadow var(--transition),
|
||
-webkit-text-decoration var(--transition);
|
||
}
|
||
:where(#mount) a:is([aria-current], :hover, :active, :focus),
|
||
:where(#mount) [role="link"]:is([aria-current], :hover, :active, :focus) {
|
||
--color: var(--primary-hover);
|
||
--text-decoration: underline;
|
||
}
|
||
|
||
:where(#mount) label {
|
||
font-size: 13px;
|
||
line-height: 1.3;
|
||
color: var(--text-gray-2, #222222);
|
||
}
|
||
|
||
:where(#mount) button {
|
||
width: 100%;
|
||
font-family: inherit;
|
||
font-size: 15px;
|
||
line-height: 1.3;
|
||
min-height: 44px;
|
||
border-radius: 12px;
|
||
padding: 0 14px;
|
||
border: none;
|
||
background-color: var(--primary, #ea4c89);
|
||
color: #ffffff;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
|
||
}
|
||
|
||
:where(#mount) button:hover {
|
||
background-color: var(--primary-hover, #f082ac);
|
||
}
|
||
|
||
:where(#mount) button:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
:where(#mount) select,
|
||
:where(#mount) input,
|
||
:where(#mount) textarea {
|
||
font-family: inherit;
|
||
color: var(--text-gray-2, #222222);
|
||
}
|
||
|
||
:where(#mount) select {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
font-family: inherit;
|
||
color: var(--text-gray-2, inherit);
|
||
font-size: 13px;
|
||
line-height: 1.3;
|
||
outline: none;
|
||
padding: 8px 16px;
|
||
border: none;
|
||
border-radius: 12px;
|
||
background-color: var(--popup-item-background-color, transparent);
|
||
background-image: var(--icon-xia, none);
|
||
background-repeat: no-repeat;
|
||
background-position: center right 12px;
|
||
background-size: 16px auto;
|
||
cursor: pointer;
|
||
}
|
||
|
||
:where(#mount) input[type="checkbox"] {
|
||
accent-color: var(--primary, #ea4c89);
|
||
}
|
||
|
||
[type="checkbox"],
|
||
[type="radio"] {
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
appearance: none;
|
||
width: 1.25em;
|
||
height: 1.25em;
|
||
margin-top: -0.125em;
|
||
margin-right: 0.375em;
|
||
margin-left: 0;
|
||
-webkit-margin-start: 0;
|
||
margin-inline-start: 0;
|
||
-webkit-margin-end: 0.375em;
|
||
margin-inline-end: 0.375em;
|
||
border-width: var(--border-width);
|
||
font-size: inherit;
|
||
vertical-align: middle;
|
||
cursor: pointer;
|
||
}
|
||
[type="checkbox"]::-ms-check,
|
||
[type="radio"]::-ms-check {
|
||
display: none;
|
||
}
|
||
[type="checkbox"]:checked,
|
||
[type="checkbox"]:checked:active,
|
||
[type="checkbox"]:checked:focus,
|
||
[type="radio"]:checked,
|
||
[type="radio"]:checked:active,
|
||
[type="radio"]:checked:focus {
|
||
--background-color: var(--primary);
|
||
--border-color: var(--primary);
|
||
background-image: var(--icon-checkbox);
|
||
background-position: center;
|
||
background-size: 0.75em auto;
|
||
background-repeat: no-repeat;
|
||
}
|
||
[type="checkbox"] ~ label,
|
||
[type="radio"] ~ label {
|
||
display: inline-block;
|
||
margin-right: 0.375em;
|
||
margin-bottom: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
[type="checkbox"]:indeterminate {
|
||
--background-color: var(--primary);
|
||
--border-color: var(--primary);
|
||
background-image: var(--icon-minus);
|
||
background-position: center;
|
||
background-size: 0.75em auto;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
[type="radio"] {
|
||
border-radius: 50%;
|
||
}
|
||
[type="radio"]:checked,
|
||
[type="radio"]:checked:active,
|
||
[type="radio"]:checked:focus {
|
||
--background-color: var(--primary-inverse);
|
||
border-width: 0.35em;
|
||
background-image: none;
|
||
}
|
||
|
||
:where(#mount) [type="checkbox"][role="switch"] {
|
||
--background-color: var(--switch-background-color);
|
||
--border-color: var(--switch-background-color);
|
||
--color: var(--switch-color);
|
||
width: 2.25em;
|
||
height: 1.25em;
|
||
border: var(--border-width) solid var(--border-color);
|
||
border-radius: 1.25em;
|
||
background-color: var(--background-color);
|
||
line-height: 1.25em;
|
||
}
|
||
:where(#mount) [type="checkbox"][role="switch"]:focus {
|
||
--background-color: var(--switch-background-color);
|
||
--border-color: var(--switch-background-color);
|
||
}
|
||
:where(#mount) [type="checkbox"][role="switch"]:checked {
|
||
--background-color: var(--switch-checked-background-color);
|
||
--border-color: var(--switch-checked-background-color);
|
||
}
|
||
:where(#mount) [type="checkbox"][role="switch"]:before {
|
||
display: block;
|
||
width: calc(1.25em - (var(--border-width) * 2));
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
background-color: var(--color);
|
||
content: "";
|
||
transition: margin 0.1s ease-in-out;
|
||
}
|
||
:where(#mount) [type="checkbox"][role="switch"]:checked {
|
||
background-image: none;
|
||
}
|
||
:where(#mount) [type="checkbox"][role="switch"]:checked::before {
|
||
margin-left: calc(1.125em - var(--border-width));
|
||
-webkit-margin-start: calc(1.125em - var(--border-width));
|
||
margin-inline-start: calc(1.125em - var(--border-width));
|
||
}
|
||
|
||
:where(#mount) [type="checkbox"][aria-invalid="false"],
|
||
:where(#mount) [type="checkbox"]:checked[aria-invalid="false"],
|
||
:where(#mount) [type="radio"][aria-invalid="false"],
|
||
:where(#mount) [type="radio"]:checked[aria-invalid="false"],
|
||
:where(#mount) [type="checkbox"][role="switch"][aria-invalid="false"],
|
||
:where(#mount) [type="checkbox"][role="switch"]:checked[aria-invalid="false"] {
|
||
--border-color: var(--form-element-valid-border-color);
|
||
}
|
||
:where(#mount) [type="checkbox"][aria-invalid="true"],
|
||
:where(#mount) [type="checkbox"]:checked[aria-invalid="true"],
|
||
:where(#mount) [type="radio"][aria-invalid="true"],
|
||
:where(#mount) [type="radio"]:checked[aria-invalid="true"],
|
||
:where(#mount) [type="checkbox"][role="switch"][aria-invalid="true"],
|
||
:where(#mount) [type="checkbox"][role="switch"]:checked[aria-invalid="true"] {
|
||
--border-color: var(--form-element-invalid-border-color);
|
||
}
|
||
|
||
.text-black {
|
||
color: var(--text-black-2);
|
||
}
|
||
|
||
.text-gray-2 {
|
||
color: var(--text-gray-2);
|
||
}
|
||
|
||
.text-gray-6 {
|
||
color: var(--text-gray-6);
|
||
}
|
||
|
||
.text-gray-9 {
|
||
color: var(--text-gray-9);
|
||
}
|
||
|
||
.text-gray-c2 {
|
||
color: var(--text-gray-c2);
|
||
}
|
||
|
||
.pt-4 {
|
||
padding-top: 16px;
|
||
}
|
||
|
||
.p-2 {
|
||
padding: 8px;
|
||
}
|
||
|
||
.pl-5 {
|
||
padding-left: 48px;
|
||
}
|
||
|
||
.p-0 {
|
||
padding: 0;
|
||
}
|
||
|
||
.pl-2 {
|
||
padding-left: 8px;
|
||
}
|
||
|
||
.pl-4 {
|
||
padding-left: 24px;
|
||
}
|
||
|
||
.pt-2 {
|
||
padding-top: 8px;
|
||
}
|
||
|
||
.pb-2 {
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.pb-4 {
|
||
padding-bottom: 16px;
|
||
}
|
||
|
||
.pb-5 {
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.pr-5 {
|
||
padding-right: 48px;
|
||
}
|
||
|
||
.text-sm {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.text-base {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.w-full {
|
||
width: 100%;
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
}
|
||
|
||
.flex-row {
|
||
flex-direction: row;
|
||
}
|
||
|
||
.flex-wrap {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.flex-end {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.flex-grow {
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.justify-between {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.mb-0 {
|
||
margin-bottom: 0px;
|
||
}
|
||
|
||
.mb-2 {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.mb-4 {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.mb-3 {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.inline-block {
|
||
display: inline-block;
|
||
}
|
||
|
||
.py-2 {
|
||
padding-top: 8px;
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.py-2-5 {
|
||
padding-top: 6px;
|
||
padding-bottom: 6px;
|
||
}
|
||
|
||
.mt-0 {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.mt-2 {
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.mt-3 {
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.mt-4 {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.mt-5 {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.mt-6 {
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.mb-1 {
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.ml-4 {
|
||
margin-left: 24px;
|
||
}
|
||
|
||
.ml-3 {
|
||
margin-left: 16px;
|
||
}
|
||
|
||
.ml-2 {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.ml-1 {
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.mr-1 {
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.mr-2 {
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.mr-3 {
|
||
margin-right: 16px;
|
||
}
|
||
|
||
.mx-2 {
|
||
margin-left: 8px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.pl-3 {
|
||
padding-left: 12px;
|
||
}
|
||
|
||
.pr-3 {
|
||
padding-right: 12px;
|
||
}
|
||
|
||
.p-3 {
|
||
padding: 12px;
|
||
}
|
||
|
||
.px-1 {
|
||
padding-left: 4px;
|
||
padding-right: 4px;
|
||
}
|
||
|
||
.px-3 {
|
||
padding-left: 12px;
|
||
padding-right: 12px;
|
||
}
|
||
|
||
.pt-3 {
|
||
padding-top: 12px;
|
||
}
|
||
|
||
.px-6 {
|
||
padding-left: 18px;
|
||
padding-right: 18px;
|
||
}
|
||
|
||
.px-4 {
|
||
padding-left: 16px;
|
||
padding-right: 16px;
|
||
}
|
||
|
||
.pt-6 {
|
||
padding-top: 20px;
|
||
}
|
||
|
||
.py-3 {
|
||
padding-top: 12px;
|
||
padding-bottom: 12px;
|
||
}
|
||
|
||
.py-0 {
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.left-auto {
|
||
left: auto !important;
|
||
}
|
||
|
||
.max-h-28 {
|
||
max-height: 112px;
|
||
}
|
||
|
||
.max-h-30 {
|
||
max-height: 120px;
|
||
}
|
||
|
||
.overflow-y-scroll {
|
||
overflow-y: scroll;
|
||
}
|
||
|
||
.text-xs {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.inline-flex {
|
||
display: inline-flex;
|
||
}
|
||
|
||
.flex-1 {
|
||
flex: 1;
|
||
}
|
||
|
||
.flex-3 {
|
||
flex: 3;
|
||
}
|
||
|
||
.flex-4 {
|
||
flex: 4;
|
||
}
|
||
|
||
.flex-2 {
|
||
flex: 2;
|
||
}
|
||
|
||
.items-center {
|
||
align-items: center;
|
||
}
|
||
|
||
.max-content {
|
||
width: max-content;
|
||
}
|
||
|
||
.justify-center {
|
||
justify-content: center;
|
||
}
|
||
|
||
.items-end {
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.items-baseline {
|
||
align-items: baseline;
|
||
}
|
||
|
||
.my-5 {
|
||
margin-top: 48px;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.my-4 {
|
||
margin-top: 24px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.my-3 {
|
||
margin-top: 16px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.pt-3 {
|
||
padding-top: 12px;
|
||
}
|
||
|
||
.px-3 {
|
||
padding-left: 12px;
|
||
padding-right: 12px;
|
||
}
|
||
|
||
.pt-2 {
|
||
padding-top: 8px;
|
||
}
|
||
|
||
.px-2 {
|
||
padding-left: 8px;
|
||
padding-right: 8px;
|
||
}
|
||
|
||
.pt-1 {
|
||
padding-top: 4px;
|
||
}
|
||
|
||
.px-1 {
|
||
padding-left: 4px;
|
||
padding-right: 4px;
|
||
}
|
||
|
||
.pb-2 {
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.justify-end {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.w-auto {
|
||
width: auto;
|
||
}
|
||
|
||
.shrink-0 {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.text-right {
|
||
text-align: right;
|
||
}
|
||
|
||
.clickable {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.close {
|
||
cursor: pointer;
|
||
width: 16px;
|
||
height: 16px;
|
||
background-image: var(--icon-close);
|
||
background-position: center;
|
||
background-size: auto 1rem;
|
||
background-repeat: no-repeat;
|
||
opacity: 0.5;
|
||
transition: opacity var(--transition);
|
||
}
|
||
|
||
.padding-two-column {
|
||
padding-left: 40px;
|
||
padding-right: 40px;
|
||
}
|
||
|
||
.muted {
|
||
color: #999;
|
||
}
|
||
|
||
.text-label {
|
||
color: #666;
|
||
}
|
||
|
||
.display-none {
|
||
display: none;
|
||
}
|
||
|
||
/* dark use #18232c */
|
||
@media (prefers-color-scheme: dark) {
|
||
.text-label {
|
||
color: #9ca3af;
|
||
}
|
||
}
|
||
|
||
.text-decoration-none {
|
||
text-decoration: none;
|
||
}
|
||
|
||
.text-decoration-none:is([aria-current], :hover, :active, :focus),
|
||
[role="link"]:is([aria-current], :hover, :active, :focus) {
|
||
--text-decoration: none !important;
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
.text-overflow-ellipsis {
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.max-w-20 {
|
||
max-width: 180px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
[data-theme="light"],
|
||
#mount:not([data-theme="dark"]) {
|
||
--popup-footer-background-color: #e8eaeb;
|
||
--popup-content-background-color: #ffffff;
|
||
--popup-item-background-color: #f3f5f6;
|
||
--popup-item-hover-background-color: #eaeced;
|
||
--popup-trial-pro-background-color: #f9fbfc;
|
||
--service-select-content-shadow: 0px 2px 12px 0px rgba(75, 76, 77, 0.2);
|
||
--service-select-border-color: #fafafa;
|
||
--service-select-selected-background-color: #f3f5f6;
|
||
--download-app-background: #f3f5f6;
|
||
}
|
||
|
||
[data-theme="dark"] {
|
||
--popup-footer-background-color: #0d0d0d;
|
||
--popup-content-background-color: #191919;
|
||
--popup-item-background-color: #272727;
|
||
--popup-item-hover-background-color: #333333;
|
||
--popup-trial-pro-background-color: #222222;
|
||
--service-select-content-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.9);
|
||
--service-select-border-color: #2c2c2c;
|
||
--service-select-selected-background-color: #333333;
|
||
--download-app-background: #333;
|
||
}
|
||
|
||
#mount {
|
||
min-width: 268px;
|
||
}
|
||
|
||
body {
|
||
padding: 0;
|
||
margin: 0 auto;
|
||
min-width: 268px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.popup-container {
|
||
font-size: 16px;
|
||
--font-size: 16px;
|
||
color: #666;
|
||
background-color: var(--popup-footer-background-color);
|
||
width: 316px;
|
||
min-width: 316px;
|
||
}
|
||
|
||
.popup-content {
|
||
background-color: var(--popup-content-background-color);
|
||
border-radius: 0px 0px 12px 12px;
|
||
padding: 16px 20px;
|
||
}
|
||
|
||
.immersive-translate-popup-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
touch-action: none;
|
||
}
|
||
|
||
.immersive-translate-popup-wrapper {
|
||
background: var(--background-color);
|
||
border-radius: 10px;
|
||
border: 1px solid var(--muted-border-color);
|
||
}
|
||
|
||
.main-button {
|
||
font-size: 15px;
|
||
vertical-align: middle;
|
||
border-radius: 12px;
|
||
padding: unset;
|
||
height: 44px;
|
||
line-height: 44px;
|
||
}
|
||
|
||
select.language-select,
|
||
select.translate-service,
|
||
select.min-select {
|
||
--form-element-spacing-horizontal: 0;
|
||
margin-bottom: 0px;
|
||
max-width: unset;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
font-size: 13px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
padding-right: 30px;
|
||
padding-left: 0px;
|
||
background-position: center right 12px;
|
||
background-size: 16px auto;
|
||
background-image: var(--icon-xia);
|
||
text-overflow: ellipsis;
|
||
color: var(--text-gray-2);
|
||
background-color: transparent;
|
||
box-shadow: unset !important;
|
||
cursor: pointer;
|
||
}
|
||
|
||
select.more {
|
||
background-position: center right;
|
||
padding-right: 20px;
|
||
}
|
||
|
||
select.translate-service {
|
||
color: var(--text-black-2);
|
||
}
|
||
|
||
.min-select-container.disabled {
|
||
opacity: 0.5;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.popup-footer {
|
||
background-color: var(--popup-footer-background-color);
|
||
height: 40px;
|
||
}
|
||
|
||
.language-select-container {
|
||
position: relative;
|
||
width: 100%;
|
||
background-color: var(--popup-item-background-color);
|
||
height: 55px;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
select.language-select {
|
||
color: var(--text-black-2);
|
||
font-size: 14px;
|
||
padding: 8px 24px 24px 16px;
|
||
position: absolute;
|
||
border-radius: 12px;
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
.language-select-container label {
|
||
position: absolute;
|
||
bottom: 10px;
|
||
left: 16px;
|
||
font-size: 12px;
|
||
color: var(--text-gray-9);
|
||
line-height: 12px;
|
||
margin: 0;
|
||
}
|
||
|
||
.translation-service-container {
|
||
background-color: var(--popup-item-background-color);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.min-select-container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 44px;
|
||
background-color: var(--popup-item-background-color);
|
||
padding-left: 16px;
|
||
}
|
||
|
||
.min-select-container:first-child {
|
||
border-top-left-radius: 10px;
|
||
border-top-right-radius: 10px;
|
||
}
|
||
|
||
.min-select-container:last-child {
|
||
border-bottom-left-radius: 10px;
|
||
border-bottom-right-radius: 10px;
|
||
}
|
||
|
||
.min-select-container:only-child {
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.translate-mode {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 22px;
|
||
background-color: var(--popup-item-background-color);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.translate-mode svg {
|
||
fill: var(--text-gray-2);
|
||
}
|
||
|
||
.widgets-container {
|
||
display: flex;
|
||
align-items: stretch;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
gap: 9px;
|
||
}
|
||
|
||
/* 当只有两个小组件时的样式优化 */
|
||
.widgets-container.widgets-two-items {
|
||
gap: 16px;
|
||
}
|
||
|
||
.widgets-container.widgets-two-items .widget-item {
|
||
flex: 0 1 auto;
|
||
min-width: 93px;
|
||
max-width: 120px;
|
||
}
|
||
|
||
.widget-item {
|
||
display: flex;
|
||
max-width: 93px;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: var(--popup-item-background-color);
|
||
font-size: 12px;
|
||
min-height: 44px;
|
||
height: 100%;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
flex: 1;
|
||
padding: 8px 4px;
|
||
text-align: center;
|
||
}
|
||
|
||
.widget-icon-text {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
color: var(--text-gray-2);
|
||
}
|
||
|
||
.widgets-container svg {
|
||
fill: var(--text-gray-2);
|
||
color: var(--text-gray-2);
|
||
}
|
||
|
||
.share-button-container {
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
padding: 2px 3px 0 8px;
|
||
}
|
||
|
||
.share-button-container svg {
|
||
fill: var(--text-gray-9);
|
||
}
|
||
|
||
.min-select-container:hover,
|
||
.language-select-container:hover,
|
||
.widget-item:hover,
|
||
.translate-mode:hover {
|
||
background-color: var(--popup-item-hover-background-color);
|
||
}
|
||
|
||
.main-button:hover {
|
||
background-color: #f5508f;
|
||
}
|
||
|
||
.share-button-container:hover {
|
||
background-color: var(--popup-item-background-color);
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.error-boundary {
|
||
background: #fff2f0;
|
||
border: 1px solid #ffccc7;
|
||
display: flex;
|
||
padding: 12px;
|
||
font-size: 14px;
|
||
color: rgba(0, 0, 0, 0.88);
|
||
word-break: break-all;
|
||
margin: 12px;
|
||
border-radius: 12px;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.upgrade-pro {
|
||
border-radius: 11px;
|
||
background: linear-gradient(57deg, #272727 19.8%, #696969 82.2%);
|
||
padding: 2px 8px;
|
||
transform: scale(0.85);
|
||
}
|
||
|
||
.upgrade-pro span {
|
||
background: linear-gradient(180deg, #ffeab4 17.65%, #f8c235 85.29%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
font-size: 12px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.upgrade-pro svg {
|
||
margin-top: -2px;
|
||
}
|
||
|
||
.upgrade-pro:hover {
|
||
background: linear-gradient(57deg, #3d3d3d 19.8%, #949494 82.2%);
|
||
}
|
||
|
||
.border-bottom-radius-0 {
|
||
border-bottom-left-radius: 0 !important;
|
||
border-bottom-right-radius: 0 !important;
|
||
}
|
||
|
||
.trial-pro-container {
|
||
border-radius: 0px 0px 12px 12px;
|
||
background: var(--popup-trial-pro-background-color);
|
||
display: flex;
|
||
align-items: center;
|
||
height: 44px;
|
||
padding-left: 16px;
|
||
padding-right: 12px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.trial-pro-container label {
|
||
line-height: 13px;
|
||
color: var(--text-black-2);
|
||
}
|
||
|
||
.trial-pro-container img {
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.cursor-pointer {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.upgrade-pro-discount-act {
|
||
height: 25px;
|
||
display: flex;
|
||
padding: 0 4px;
|
||
align-items: center;
|
||
border-radius: 15px;
|
||
background: linear-gradient(
|
||
90deg,
|
||
#cefbfa 11.33%,
|
||
#d7f56f 63.75%,
|
||
#fccd5e 100%
|
||
);
|
||
transform: scale(0.9);
|
||
box-shadow: 0px 1.8px 3.6px 0px rgba(0, 0, 0, 0.1);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.upgrade-pro-discount-act span {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
margin-left: 4px;
|
||
color: #222222;
|
||
}
|
||
|
||
.upgrade-pro-discount-act:hover {
|
||
text-decoration: unset;
|
||
background: linear-gradient(
|
||
90deg,
|
||
#e2fffe 11.33%,
|
||
#e6ff91 63.75%,
|
||
#ffdf93 100%
|
||
);
|
||
}
|
||
|
||
.custom-select-container {
|
||
width: 200px;
|
||
position: relative;
|
||
flex: 1;
|
||
}
|
||
|
||
#translation-service-select {
|
||
padding-right: 12px;
|
||
padding-left: 6px;
|
||
}
|
||
|
||
.custom-select-content {
|
||
border-radius: 12px;
|
||
background: var(--popup-content-background-color);
|
||
box-shadow: var(--service-select-content-shadow);
|
||
border: 1px solid var(--service-select-border-color);
|
||
padding: 8px;
|
||
position: absolute;
|
||
left: -68px;
|
||
right: 0;
|
||
z-index: 100;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.custom-select-item.default {
|
||
width: 100%;
|
||
padding: 0;
|
||
}
|
||
|
||
.custom-select-item {
|
||
font-size: 14px;
|
||
padding: 5px 8px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
color: var(--text-black-2);
|
||
width: auto;
|
||
overflow: hidden;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
|
||
.custom-select-item-img {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
.custom-select-item-img {
|
||
margin-right: 6px;
|
||
}
|
||
}
|
||
|
||
.custom-select-content .custom-select-item.selected,
|
||
.custom-select-content .custom-select-item:hover {
|
||
background: var(--service-select-selected-background-color);
|
||
}
|
||
|
||
.custom-select-item > span {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.custom-select-item-pro {
|
||
font-size: 12px;
|
||
margin-left: 6px;
|
||
display: flex;
|
||
}
|
||
|
||
.custom-select-item-pro img {
|
||
margin: 0 3px;
|
||
width: 20px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.service-select-inline-sponsor-container {
|
||
width: 40px;
|
||
min-width: 0;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.service-select-inline-sponsor-marquee {
|
||
min-width: max-content;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
column-gap: 12px;
|
||
animation: service-select-inline-sponsor-scroll 10s linear infinite;
|
||
}
|
||
|
||
.service-select-inline-sponsor-track {
|
||
min-width: max-content;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
@keyframes service-select-inline-sponsor-scroll {
|
||
from {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
to {
|
||
transform: translateX(calc(-50% - 6px));
|
||
}
|
||
}
|
||
|
||
.custom-select-group-header {
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: var(--text-gray-9);
|
||
padding: 6px 8px 4px;
|
||
margin-top: 2px;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.more-container {
|
||
position: relative;
|
||
}
|
||
|
||
.new-menu-indicator {
|
||
position: absolute;
|
||
width: 8px;
|
||
height: 8px;
|
||
background-color: #ef3434;
|
||
border-radius: 50%;
|
||
right: 18px;
|
||
top: 4px;
|
||
}
|
||
|
||
.download-app {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
border-radius: 8px;
|
||
background: var(--download-app-background);
|
||
padding: 4px 8px;
|
||
color: var(--text-gray-6);
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease-in-out;
|
||
}
|
||
|
||
/* Popup 动画效果 */
|
||
@keyframes popup-fade-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(10px) scale(0.95);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
}
|
||
|
||
@keyframes popup-fade-out {
|
||
from {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
to {
|
||
opacity: 0;
|
||
transform: translateY(10px) scale(0.95);
|
||
}
|
||
}
|
||
|
||
.popup-generic-content {
|
||
animation: popup-fade-in 0.2s ease-out;
|
||
}
|
||
|
||
.popup-generic-content.hiding {
|
||
animation: popup-fade-out 0.15s ease-in;
|
||
}
|
||
|
||
select.min-select {
|
||
--form-element-spacing-horizontal: 0;
|
||
max-width: 128px;
|
||
overflow: hidden;
|
||
color: var(--primary);
|
||
font-size: 13px;
|
||
border: none;
|
||
padding: 0;
|
||
padding-right: 20px;
|
||
text-overflow: ellipsis;
|
||
color: var(--color);
|
||
}
|
||
select.min-select-secondary {
|
||
color: var(--color);
|
||
}
|
||
select.min-select:focus {
|
||
outline: none;
|
||
border: none;
|
||
--box-shadow: none;
|
||
}
|
||
|
||
select.min-select-left {
|
||
padding-right: 0px;
|
||
/* padding-left: 24px; */
|
||
/* background-position: center left 0; */
|
||
text-overflow: ellipsis;
|
||
text-align: left;
|
||
}
|
||
|
||
select.transform-padding-left {
|
||
padding-left: 12px;
|
||
transform: translateX(-12px);
|
||
background-position: center right 0px;
|
||
}
|
||
|
||
select.text-gray-6 {
|
||
color: var(--text-gray-6);
|
||
}
|
||
|
||
/* dark use black, for windows */
|
||
@media (prefers-color-scheme: dark) {
|
||
select.language-select option,
|
||
select.translate-service option,
|
||
select.min-select option {
|
||
background-color: #666666;
|
||
}
|
||
}
|
||
|
||
select.min-select-no-arrow {
|
||
background-image: none;
|
||
padding-right: 0;
|
||
}
|
||
|
||
|
||
|
||
.activity-tips {
|
||
border-radius: 8px;
|
||
padding: 0px 8px;
|
||
min-height: 28px;
|
||
background: linear-gradient(83deg, #FACCDE -0.87%, #FCE7EF 43.13%, #FBD6E4 72.08%, #FFB3D1 96.34%); gap: 2px;
|
||
color: #333;
|
||
cursor: pointer;
|
||
gap: 4px;
|
||
}
|
||
|
||
.activity-tips-icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.countdown-container {
|
||
min-width: 50px;
|
||
text-align: left;
|
||
font-weight: 600;
|
||
font-size: 12px;
|
||
letter-spacing: 0.01em;
|
||
}
|
||
|
||
.activity-tips-text {
|
||
font-weight: 600;
|
||
max-width: 100px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
html {
|
||
font-size: 17px;
|
||
}
|
||
|
||
@media print {
|
||
.imt-fb-container {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
#mount {
|
||
position: absolute;
|
||
display: none;
|
||
min-width: 250px;
|
||
height: auto;
|
||
--font-size: 17px;
|
||
font-size: 17px;
|
||
}
|
||
|
||
/* float-ball */
|
||
.imt-fb-container {
|
||
position: fixed;
|
||
padding: 0;
|
||
top: 335px;
|
||
width: fit-content;
|
||
display: flex;
|
||
flex-direction: column;
|
||
display: none;
|
||
direction: ltr;
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
.imt-fb-container:hover .imt-manga-button {
|
||
opacity: 1;
|
||
}
|
||
|
||
.imt-fb-container.left {
|
||
align-items: flex-start;
|
||
left: 0;
|
||
}
|
||
|
||
.imt-fb-container.right {
|
||
align-items: flex-end;
|
||
right: 0;
|
||
}
|
||
|
||
.imt-fb-btn {
|
||
cursor: pointer;
|
||
background: var(--float-ball-more-button-background-color);
|
||
height: 36px;
|
||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.imt-fb-btn.left {
|
||
border-top-right-radius: 36px;
|
||
border-bottom-right-radius: 36px;
|
||
padding-left: 3px;
|
||
}
|
||
|
||
.imt-fb-btn.right {
|
||
border-top-left-radius: 36px;
|
||
border-bottom-left-radius: 36px;
|
||
padding-right: 3px;
|
||
}
|
||
|
||
.imt-fb-btn.mini.left {
|
||
transform: translateX(-22px);
|
||
}
|
||
|
||
.imt-fb-btn.mini.right {
|
||
transform: translateX(22px);
|
||
}
|
||
|
||
.imt-fb-btn.mini.active {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
.imt-fb-btn div {
|
||
height: 36px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
.imt-fb-btn .imt-fb-hit-area {
|
||
position: absolute;
|
||
top: 0;
|
||
height: 36px;
|
||
bottom: -6px;
|
||
left: -6px;
|
||
right: -6px;
|
||
background: transparent;
|
||
}
|
||
|
||
.imt-fb-btn.mini.right .imt-fb-hit-area {
|
||
left: -10px;
|
||
}
|
||
|
||
.imt-fb-btn.mini.left .imt-fb-hit-area {
|
||
right: -10px;
|
||
}
|
||
|
||
.imt-fb-btn.left div {
|
||
border-top-right-radius: 34px;
|
||
border-bottom-right-radius: 34px;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.imt-fb-btn.right div {
|
||
border-top-left-radius: 34px;
|
||
border-bottom-left-radius: 34px;
|
||
}
|
||
|
||
.imt-fb-logo-img {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin: 0 10px;
|
||
}
|
||
|
||
.imt-fb-logo-img-big-bg {
|
||
width: 28px;
|
||
height: 28px;
|
||
margin: 0;
|
||
background-color: #ed6d8f;
|
||
border-radius: 50%;
|
||
margin: 0 5px;
|
||
}
|
||
|
||
.imt-float-ball-translated {
|
||
position: absolute;
|
||
width: 11px;
|
||
height: 11px;
|
||
bottom: 4px;
|
||
right: 4px;
|
||
}
|
||
|
||
.btn-animate {
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
transform: translate3d(0, 0, 0);
|
||
-webkit-transition: -webkit-transform ease-out 250ms;
|
||
transition: -webkit-transform ease-out 250ms;
|
||
transition: transform ease-out 250ms;
|
||
transition: transform ease-out 250ms, -webkit-transform ease-out 250ms;
|
||
}
|
||
|
||
.imt-fb-setting-btn {
|
||
margin-right: 18px;
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
|
||
.immersive-translate-popup-wrapper {
|
||
background: var(--background-color);
|
||
border-radius: 20px;
|
||
box-shadow: 2px 10px 24px 0px #0e121614;
|
||
border: none;
|
||
}
|
||
|
||
.popup-container {
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.popup-content {
|
||
border-radius: 20px 20px 12px 12px;
|
||
}
|
||
.popup-footer {
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.imt-fb-close-button {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
left: -10px;
|
||
bottom: -20px;
|
||
}
|
||
.imt-fb-container.left .imt-fb-close-button {
|
||
left: auto;
|
||
right: -10px;
|
||
}
|
||
|
||
.imt-fb-close-content {
|
||
padding: 22px;
|
||
width: 320px;
|
||
pointer-events: all;
|
||
}
|
||
|
||
.imt-fb-close-title {
|
||
font-weight: 500;
|
||
color: var(--text-black-2);
|
||
}
|
||
|
||
.imt-fb-close-radio-content {
|
||
background-color: var(--background-light-green);
|
||
padding: 8px 20px;
|
||
}
|
||
|
||
.imt-fb-radio-sel,
|
||
.imt-fb-radio-nor {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.imt-fb-radio-sel {
|
||
border: 2px solid var(--primary);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.imt-fb-radio-sel div {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 4px;
|
||
background-color: var(--primary);
|
||
}
|
||
|
||
.imt-fb-radio-nor {
|
||
border: 2px solid var(--input-border-strong);
|
||
}
|
||
|
||
.imt-fb-primary-btn {
|
||
background-color: var(--primary);
|
||
width: 72px;
|
||
height: 32px;
|
||
color: white;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
line-height: 32px;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.imt-fb-default-btn {
|
||
border: 1px solid var(--primary);
|
||
width: 72px;
|
||
height: 32px;
|
||
border-radius: 8px;
|
||
color: var(--primary);
|
||
line-height: 32px;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.imt-fb-guide-container {
|
||
width: 312px;
|
||
transform: translateY(-45%);
|
||
}
|
||
|
||
.imt-fb-guide-bg {
|
||
position: absolute;
|
||
left: 30px;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
z-index: -1;
|
||
height: 100%;
|
||
width: 90%;
|
||
}
|
||
|
||
.imt-fb-guide-bg.left {
|
||
transform: scaleX(-1);
|
||
}
|
||
|
||
.imt-fb-guide-content {
|
||
margin: 16px -30px 80px 0px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.imt-fb-guide-content.left {
|
||
margin: 16px 21px 60px 32px;
|
||
}
|
||
|
||
.imt-fb-guide-img {
|
||
width: 220px;
|
||
height: 112px;
|
||
}
|
||
|
||
.imt-fb-guide-message {
|
||
font-size: 14px;
|
||
line-height: 28px;
|
||
color: #333333;
|
||
white-space: pre-wrap;
|
||
text-align: center;
|
||
font-weight: 700;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.imt-manga-guide-message {
|
||
font-size: 16px;
|
||
line-height: 24px;
|
||
color: #333333;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.imt-fb-guide-button {
|
||
margin-top: 16px;
|
||
line-height: 40px;
|
||
height: 40px;
|
||
padding: 0 20px;
|
||
width: unset;
|
||
}
|
||
|
||
.imt-fb-side {
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
pointer-events: all;
|
||
position: relative;
|
||
}
|
||
|
||
.imt-fb-side {
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.imt-fb-side::before,
|
||
.imt-manga-button::before,
|
||
.imt-fb-round-button::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 2px;
|
||
right: 2px;
|
||
bottom: 2px;
|
||
left: 2px;
|
||
border-radius: 50%;
|
||
background-color: transparent;
|
||
transition: background-color 0.15s ease;
|
||
}
|
||
|
||
.imt-fb-side:hover::before,
|
||
.imt-manga-button:hover::before,
|
||
.imt-fb-round-button:hover::before {
|
||
background-color: var(--float-ball-more-button-hover-color);
|
||
}
|
||
|
||
.imt-fb-new-badge {
|
||
width: 26px;
|
||
height: 14px;
|
||
padding: 3px;
|
||
background-color: #f53f3f;
|
||
border-radius: 4px;
|
||
position: absolute;
|
||
top: -5px;
|
||
right: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.imt-fb-side * {
|
||
pointer-events: all;
|
||
}
|
||
|
||
.imt-fb-pin-icon {
|
||
position: absolute;
|
||
left: -16px;
|
||
bottom: -12px;
|
||
opacity: 0;
|
||
cursor: pointer;
|
||
}
|
||
.imt-fb-container.left .imt-fb-pin-icon {
|
||
left: auto;
|
||
right: -16px;
|
||
}
|
||
|
||
.imt-fb-side:hover .imt-fb-pin-icon {
|
||
opacity: 1;
|
||
}
|
||
|
||
.imt-fb-more-button {
|
||
width: 36px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
/* Sheet.css */
|
||
.immersive-translate-sheet {
|
||
position: fixed;
|
||
transform: translateY(100%);
|
||
/* Start off screen */
|
||
left: 0;
|
||
right: 0;
|
||
background-color: var(--background-color);
|
||
transition: transform 0.3s ease-out;
|
||
/* Smooth slide transition */
|
||
box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
|
||
/* Ensure it's above other content */
|
||
bottom: 0;
|
||
border-top-left-radius: 16px;
|
||
border-top-right-radius: 16px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.immersive-translate-sheet.visible {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.immersive-translate-sheet-backdrop {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease-out;
|
||
}
|
||
|
||
.immersive-translate-sheet-backdrop.visible {
|
||
opacity: 1;
|
||
}
|
||
|
||
.popup-container-sheet {
|
||
max-width: 100vw;
|
||
width: 100vw;
|
||
}
|
||
|
||
.imt-no-events svg * {
|
||
pointer-events: none !important;
|
||
}
|
||
|
||
.imt-manga-button {
|
||
width: 36px;
|
||
height: 36px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
pointer-events: all;
|
||
margin: 0 0 10px 0;
|
||
background-color: var(--float-ball-more-button-background-color);
|
||
border-radius: 50%;
|
||
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08);
|
||
right: 8px;
|
||
}
|
||
|
||
.imt-manga-feedback {
|
||
cursor: pointer;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.imt-fb-round-button {
|
||
width: 36px;
|
||
height: 36px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
background: var(--float-ball-more-button-background-color);
|
||
border-radius: 50%;
|
||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
|
||
position: relative;
|
||
}
|
||
|
||
.imt-fb-round-button > svg {
|
||
z-index: 1;
|
||
}
|
||
|
||
.imt-fb-upgrade-button {
|
||
cursor: pointer;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.imt-manga-translated {
|
||
position: absolute;
|
||
left: 24px;
|
||
top: 20px;
|
||
}
|
||
|
||
.imt-float-ball-loading {
|
||
animation: imt-loading-animation 0.6s infinite linear !important;
|
||
}
|
||
|
||
.imt-manga-guide-bg {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
z-index: -1;
|
||
width: 100%;
|
||
transform: translateY(-50%);
|
||
}
|
||
.imt-manga-guide-content {
|
||
position: absolute;
|
||
top: 15px;
|
||
left: 0;
|
||
right: 0;
|
||
margin: 0 40px 0;
|
||
}
|
||
|
||
.img-manga-guide-button {
|
||
width: fit-content;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.img-manga-close {
|
||
position: absolute;
|
||
bottom: -200px;
|
||
width: 32px;
|
||
height: 32px;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.imt-fb-container.dragging .imt-manga-button,
|
||
.imt-fb-container.dragging .btn-animate:not(.imt-fb-btn) {
|
||
display: none !important;
|
||
}
|
||
|
||
.imt-fb-container.dragging .imt-fb-btn {
|
||
border-radius: 50% !important;
|
||
width: 36px !important;
|
||
height: 36px !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
cursor: move !important;
|
||
}
|
||
|
||
.imt-fb-container.dragging .imt-fb-btn div {
|
||
border-radius: 50% !important;
|
||
width: 36px !important;
|
||
height: 36px !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
.imt-fb-container.dragging .imt-fb-btn.left,
|
||
.imt-fb-container.dragging .imt-fb-btn.right {
|
||
border-radius: 50% !important;
|
||
}
|
||
|
||
.imt-fb-container.dragging .imt-fb-btn.left div,
|
||
.imt-fb-container.dragging .imt-fb-btn.right div {
|
||
border-radius: 50% !important;
|
||
}
|
||
|
||
.imt-fb-container.dragging .imt-fb-logo-img {
|
||
margin: 0 !important;
|
||
}
|
||
|
||
.imt-fb-container.dragging .imt-float-ball-translated {
|
||
right: 2px !important;
|
||
bottom: 2px !important;
|
||
}
|
||
|
||
@-webkit-keyframes imt-loading-animation {
|
||
from {
|
||
-webkit-transform: rotate(0deg);
|
||
}
|
||
|
||
to {
|
||
-webkit-transform: rotate(359deg);
|
||
}
|
||
}
|
||
|
||
@keyframes imt-loading-animation {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
to {
|
||
transform: rotate(359deg);
|
||
}
|
||
}
|
||
|
||
.imt-fb-icon {
|
||
color: #666666;
|
||
}
|
||
|
||
[data-theme="dark"] .imt-fb-icon {
|
||
color: #b3b3b3;
|
||
}
|
||
|
||
[data-theme="light"] .imt-fb-icon {
|
||
color: #666666;
|
||
}
|
||
|
||
/* 悬浮球设置弹窗样式 */
|
||
.imt-fb-setting-wrapper {
|
||
border-radius: 12px;
|
||
box-shadow: 2px 10px 24px 0px rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.imt-fb-setting-content {
|
||
padding: 16px;
|
||
width: 350px;
|
||
pointer-events: all;
|
||
}
|
||
|
||
.imt-fb-setting-title {
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
line-height: 24px;
|
||
color: var(--text-black-2);
|
||
}
|
||
|
||
.imt-fb-setting-preview {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 24px 0;
|
||
}
|
||
|
||
.imt-fb-preview-wrapper {
|
||
display: flex;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.imt-fb-preview-item {
|
||
width: 99px;
|
||
height: 57px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.imt-fb-preview-item.light {
|
||
background-color: #f3f5f6;
|
||
border-top-left-radius: 12px;
|
||
border-bottom-left-radius: 12px;
|
||
}
|
||
|
||
.imt-fb-preview-item.dark {
|
||
background-color: #444;
|
||
border-top-right-radius: 12px;
|
||
border-bottom-right-radius: 12px;
|
||
}
|
||
|
||
.imt-fb-preview-ball {
|
||
height: 36px;
|
||
display: flex;
|
||
align-items: center;
|
||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.imt-fb-preview-ball.light {
|
||
background-color: #fff;
|
||
border-top-left-radius: 36px;
|
||
border-bottom-left-radius: 36px;
|
||
}
|
||
|
||
.imt-fb-preview-ball.dark {
|
||
background-color: #111;
|
||
border-top-left-radius: 36px;
|
||
border-bottom-left-radius: 36px;
|
||
}
|
||
|
||
.imt-fb-preview-ball.full {
|
||
width: 41px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.imt-fb-preview-ball.mini {
|
||
width: 41px;
|
||
justify-content: center;
|
||
transform: translateX(21px);
|
||
}
|
||
|
||
.imt-fb-preview-ball .imt-fb-preview-logo {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 选项区域 */
|
||
.imt-fb-setting-options {
|
||
margin-top: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.imt-fb-setting-option-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 4px;
|
||
}
|
||
|
||
.imt-fb-setting-option-label {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 21px;
|
||
color: var(--text-black-2);
|
||
}
|
||
|
||
/* Toggle 开关样式 */
|
||
.imt-fb-toggle {
|
||
width: 30px;
|
||
height: 18px;
|
||
background-color: var(--switch-background-color);
|
||
border-radius: 24px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s ease;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.imt-fb-toggle.checked {
|
||
background-color: var(--primary);
|
||
}
|
||
|
||
.imt-fb-toggle.disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.imt-fb-toggle-thumb {
|
||
width: 14px;
|
||
height: 14px;
|
||
background-color: var(--switch-color);
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 2px;
|
||
left: 2px;
|
||
transition: transform 0.2s ease;
|
||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.imt-fb-toggle.checked .imt-fb-toggle-thumb {
|
||
transform: translateX(12px);
|
||
}
|
||
|
||
.imt-fb-setting-hide-options {
|
||
background-color: var(--background-light-green);
|
||
padding: 8px 20px;
|
||
border-radius: 8px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.imt-fb-setting-save-btn {
|
||
background-color: var(--primary);
|
||
color: white;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
line-height: 45px;
|
||
height: 45px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
margin-top: 16px;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
|
||
.imt-fb-setting-save-btn:hover {
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.imt-fb-setting-save-btn:active {
|
||
opacity: 0.8;
|
||
}
|
||
</style><div id="mount" style="display: block;"><div hidden="" id="immersive-translate-popup-overlay" class="immersive-translate-popup-overlay" style="z-index: 2147483647; background-color: rgba(0, 0, 0, 0.5);"><div class="immersive-translate-popup-wrapper" style="position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"></div></div></div></template></div></html> |