3955 lines
112 KiB
HTML
3955 lines
112 KiB
HTML
<!DOCTYPE html>
|
||
<!-- saved from url=(0021)https://labdata.info/ -->
|
||
<html lang="zh-CN" class="scroll-smooth" data-immersive-translate-page-theme="dark"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>HiFi Agent Studio</title>
|
||
<!-- 引入 Tailwind CSS -->
|
||
<script src="./HiFi Agent Studio_files/saved_resource"></script>
|
||
<!-- 引入 Font Awesome 图标 -->
|
||
<link rel="stylesheet" href="./HiFi Agent Studio_files/all.min.css">
|
||
<!-- 引入 Google Fonts -->
|
||
<link href="./HiFi Agent Studio_files/css2" rel="stylesheet">
|
||
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
'hifi-dark': '#0f1115', // 更深的深空灰
|
||
'hifi-panel': '#18181b', // 面板背景
|
||
'hifi-green': '#4ade80', // 园丁思维 (Green)
|
||
'hifi-blue': '#3b82f6', // 逻辑轮机 (Blue)
|
||
'hifi-purple': '#a855f7', // 战略透镜 (Purple)
|
||
'hifi-warn': '#f59e0b', // 警告/熔断
|
||
'hifi-text': '#e2e8f0',
|
||
},
|
||
fontFamily: {
|
||
sans: ['Inter', 'sans-serif'],
|
||
mono: ['JetBrains Mono', 'monospace'],
|
||
},
|
||
backgroundImage: {
|
||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
/* 自定义微调 */
|
||
body {
|
||
background-color: #0f1115;
|
||
color: #e2e8f0;
|
||
}
|
||
.glass-panel {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
backdrop-filter: blur(12px);
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||
}
|
||
.glass-panel:hover {
|
||
border-color: rgba(255, 255, 255, 0.15);
|
||
background: rgba(255, 255, 255, 0.05);
|
||
}
|
||
.matrix-bg {
|
||
background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
|
||
background-size: 30px 30px;
|
||
}
|
||
.text-glow {
|
||
text-shadow: 0 0 10px rgba(74, 222, 128, 0.3);
|
||
}
|
||
/* 隐藏滚动条但保留功能 */
|
||
.no-scrollbar::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.no-scrollbar {
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
}
|
||
</style>
|
||
<style>*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:Inter, sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:JetBrains Mono, monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.left-1\/2{left:50%}.right-0{right:0px}.right-6{right:1.5rem}.top-0{top:0px}.top-1\/2{top:50%}.top-4{top:1rem}.-z-10{z-index:-10}.z-10{z-index:10}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.-mr-2{margin-right:-0.5rem}.-mr-8{margin-right:-2rem}.-mt-8{margin-top:-2rem}.mb-1{margin-bottom:0.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:0.5rem}.mb-3{margin-bottom:0.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:0.25rem}.ml-10{margin-left:2.5rem}.ml-2{margin-left:0.5rem}.ml-4{margin-left:1rem}.mr-2{margin-right:0.5rem}.mr-3{margin-right:0.75rem}.mr-4{margin-right:1rem}.mt-1{margin-top:0.25rem}.mt-3{margin-top:0.75rem}.mt-4{margin-top:1rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-16{height:4rem}.h-2{height:0.5rem}.h-32{height:8rem}.h-\[600px\]{height:600px}.w-16{width:4rem}.w-2{width:0.5rem}.w-32{width:8rem}.w-\[600px\]{width:600px}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-7xl{max-width:80rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.cursor-pointer{cursor:pointer}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-12{gap:3rem}.gap-2{gap:0.5rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-12{column-gap:3rem}.gap-y-6{row-gap:1.5rem}.space-x-6 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.5rem * var(--tw-space-x-reverse));margin-left:calc(1.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.25rem * var(--tw-space-y-reverse))}.space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.scroll-smooth{scroll-behavior:smooth}.rounded{border-radius:0.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.rounded-xl{border-radius:0.75rem}.rounded-bl-\[100px\]{border-bottom-left-radius:100px}.border{border-width:1px}.border-y{border-top-width:1px;border-bottom-width:1px}.border-b{border-bottom-width:1px}.border-l-4{border-left-width:4px}.border-t{border-top-width:1px}.border-t-2{border-top-width:2px}.border-blue-500\/30{border-color:rgb(59 130 246 / 0.3)}.border-hifi-green\/20{border-color:rgb(74 222 128 / 0.2)}.border-hifi-green\/30{border-color:rgb(74 222 128 / 0.3)}.border-purple-500\/30{border-color:rgb(168 85 247 / 0.3)}.border-white\/10{border-color:rgb(255 255 255 / 0.1)}.border-white\/5{border-color:rgb(255 255 255 / 0.05)}.border-l-hifi-green{--tw-border-opacity:1;border-left-color:rgb(74 222 128 / var(--tw-border-opacity, 1))}.border-l-hifi-warn{--tw-border-opacity:1;border-left-color:rgb(245 158 11 / var(--tw-border-opacity, 1))}.border-t-hifi-green{--tw-border-opacity:1;border-top-color:rgb(74 222 128 / var(--tw-border-opacity, 1))}.bg-\[\#0a0c0f\]{--tw-bg-opacity:1;background-color:rgb(10 12 15 / var(--tw-bg-opacity, 1))}.bg-black\/20{background-color:rgb(0 0 0 / 0.2)}.bg-black\/30{background-color:rgb(0 0 0 / 0.3)}.bg-black\/50{background-color:rgb(0 0 0 / 0.5)}.bg-blue-900\/50{background-color:rgb(30 58 138 / 0.5)}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.bg-hifi-blue\/10{background-color:rgb(59 130 246 / 0.1)}.bg-hifi-green{--tw-bg-opacity:1;background-color:rgb(74 222 128 / var(--tw-bg-opacity, 1))}.bg-hifi-green\/5{background-color:rgb(74 222 128 / 0.05)}.bg-hifi-purple\/10{background-color:rgb(168 85 247 / 0.1)}.bg-purple-900\/50{background-color:rgb(88 28 135 / 0.5)}.bg-white\/\[0\.01\]{background-color:rgb(255 255 255 / 0.01)}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-hifi-green{--tw-gradient-from:#4ade80 var(--tw-gradient-from-position);--tw-gradient-to:rgb(74 222 128 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-emerald-400{--tw-gradient-to:rgb(52 211 153 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #34d399 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-teal-500{--tw-gradient-to:#14b8a6 var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-2{padding:0.5rem}.p-3{padding:0.75rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1\.5{padding-left:0.375rem;padding-right:0.375rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem}.pb-24{padding-bottom:6rem}.pb-3{padding-bottom:0.75rem}.pt-2{padding-top:0.5rem}.pt-3{padding-top:0.75rem}.pt-32{padding-top:8rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.font-mono{font-family:JetBrains Mono, monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-thin{font-weight:100}.uppercase{text-transform:uppercase}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-0.025em}.tracking-wider{letter-spacing:0.05em}.tracking-widest{letter-spacing:0.1em}.text-blue-200{--tw-text-opacity:1;color:rgb(191 219 254 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-hifi-blue{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.text-hifi-dark{--tw-text-opacity:1;color:rgb(15 17 21 / var(--tw-text-opacity, 1))}.text-hifi-green{--tw-text-opacity:1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.text-hifi-purple{--tw-text-opacity:1;color:rgb(168 85 247 / var(--tw-text-opacity, 1))}.text-hifi-warn{--tw-text-opacity:1;color:rgb(245 158 11 / var(--tw-text-opacity, 1))}.text-purple-200{--tw-text-opacity:1;color:rgb(233 213 255 / var(--tw-text-opacity, 1))}.text-purple-400{--tw-text-opacity:1;color:rgb(192 132 252 / var(--tw-text-opacity, 1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-20{opacity:0.2}.opacity-50{opacity:0.5}.shadow-\[0_0_20px_rgba\(74\2c 222\2c 128\2c 0\.3\)\]{--tw-shadow:0 0 20px rgba(74,222,128,0.3);--tw-shadow-colored:0 0 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.blur-\[100px\]{--tw-blur:blur(100px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.selection\:bg-hifi-green *::selection{--tw-bg-opacity:1;background-color:rgb(74 222 128 / var(--tw-bg-opacity, 1))}.selection\:text-hifi-dark *::selection{--tw-text-opacity:1;color:rgb(15 17 21 / var(--tw-text-opacity, 1))}.selection\:bg-hifi-green::selection{--tw-bg-opacity:1;background-color:rgb(74 222 128 / var(--tw-bg-opacity, 1))}.selection\:text-hifi-dark::selection{--tw-text-opacity:1;color:rgb(15 17 21 / var(--tw-text-opacity, 1))}.hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:-translate-y-2:hover{--tw-translate-y:-0.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-gray-400:hover{--tw-border-opacity:1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}.hover\:border-hifi-blue\/50:hover{border-color:rgb(59 130 246 / 0.5)}.hover\:border-hifi-purple\/50:hover{border-color:rgb(168 85 247 / 0.5)}.hover\:bg-emerald-400:hover{--tw-bg-opacity:1;background-color:rgb(52 211 153 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-800:hover{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.hover\:bg-white\/5:hover{background-color:rgb(255 255 255 / 0.05)}.hover\:text-hifi-blue:hover{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.hover\:text-hifi-green:hover{--tw-text-opacity:1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.hover\:text-hifi-purple:hover{--tw-text-opacity:1;color:rgb(168 85 247 / var(--tw-text-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.group:hover .group-hover\:rotate-90{--tw-rotate:90deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:bg-hifi-blue\/20{background-color:rgb(59 130 246 / 0.2)}.group:hover .group-hover\:bg-hifi-purple\/20{background-color:rgb(168 85 247 / 0.2)}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width: 640px){.sm\:flex-row{flex-direction:row}.sm\:px-3{padding-left:0.75rem;padding-right:0.75rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width: 768px){.md\:block{display:block}.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.md\:flex-row{flex-direction:row}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-7xl{font-size:4.5rem;line-height:1}}@media (min-width: 1024px){.lg\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.lg\:px-8{padding-left:2rem;padding-right:2rem}}</style></head>
|
||
<body class="antialiased matrix-bg selection:bg-hifi-green selection:text-hifi-dark">
|
||
|
||
<!-- 导航栏 -->
|
||
<nav class="fixed w-full z-50 glass-panel border-b border-white/5 backdrop-blur-md">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex items-center justify-between h-16">
|
||
<div class="flex items-center group cursor-pointer">
|
||
<span class="text-hifi-green text-2xl mr-2 group-hover:rotate-90 transition duration-500"><i class="fa-solid fa-cube"></i></span>
|
||
<span class="font-bold text-xl tracking-tight font-mono">HiFi Agent Studio <span class="text-xs bg-hifi-green text-hifi-dark px-1.5 py-0.5 rounded ml-1 font-bold">v3.0</span></span>
|
||
</div>
|
||
<div class="hidden md:block">
|
||
<div class="ml-10 flex items-baseline space-x-6">
|
||
<a href="https://labdata.info/#definition" class="text-gray-300 hover:text-hifi-green hover:bg-white/5 px-3 py-2 rounded-md text-sm font-medium transition">产品定义</a>
|
||
<a href="https://labdata.info/#architecture" class="text-gray-300 hover:text-hifi-blue hover:bg-white/5 px-3 py-2 rounded-md text-sm font-medium transition">密封舱架构</a>
|
||
<a href="https://labdata.info/#methodology" class="text-gray-300 hover:text-hifi-purple hover:bg-white/5 px-3 py-2 rounded-md text-sm font-medium transition">方法论</a>
|
||
<a href="https://labdata.info/#roles" class="text-gray-300 hover:text-white hover:bg-white/5 px-3 py-2 rounded-md text-sm font-medium transition">四体系统</a>
|
||
</div>
|
||
</div>
|
||
<div class="-mr-2 flex md:hidden">
|
||
<button type="button" onclick="document.getElementById('mobile-menu').classList.toggle('hidden')" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none transition">
|
||
<i class="fa-solid fa-bars"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 移动端菜单 -->
|
||
<div class="hidden md:hidden glass-panel border-t border-white/5" id="mobile-menu">
|
||
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||
<a href="https://labdata.info/#definition" class="block hover:text-hifi-green px-3 py-2 rounded-md text-base font-medium">产品定义</a>
|
||
<a href="https://labdata.info/#architecture" class="block hover:text-hifi-blue px-3 py-2 rounded-md text-base font-medium">密封舱架构</a>
|
||
<a href="https://labdata.info/#methodology" class="block hover:text-hifi-purple px-3 py-2 rounded-md text-base font-medium">方法论</a>
|
||
<a href="https://labdata.info/#roles" class="block hover:text-white px-3 py-2 rounded-md text-base font-medium">四体系统</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero 区域 -->
|
||
<section id="hero" class="pt-32 pb-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto flex flex-col items-center text-center relative overflow-hidden">
|
||
<!-- 背景光晕 -->
|
||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-hifi-green/5 rounded-full blur-[100px] -z-10"></div>
|
||
|
||
<div class="inline-flex items-center px-3 py-1 rounded-full border border-hifi-green/20 bg-hifi-green/5 text-hifi-green text-xs font-mono mb-8 backdrop-blur-sm">
|
||
<span class="flex h-2 w-2 rounded-full bg-hifi-green mr-2 animate-pulse"></span>
|
||
Protocol v3.0 Active
|
||
</div>
|
||
|
||
<h1 class="text-4xl md:text-7xl font-extrabold tracking-tight mb-8 leading-tight">
|
||
不生产平庸工具<br>
|
||
只构建<span class="text-transparent bg-clip-text bg-gradient-to-r from-hifi-green via-emerald-400 to-teal-500 text-glow">专家级</span>数字员工
|
||
</h1>
|
||
|
||
<p class="text-xl text-gray-400 max-w-3xl mx-auto mb-12 font-light leading-relaxed">
|
||
我们不仅是架构师，更是<span class="text-gray-200 font-medium">模具师</span>。将认知建模与商业逻辑封装进<span class="text-gray-200 font-medium">“密封舱”</span>，打造穿越技术周期的反脆弱资产。
|
||
</p>
|
||
|
||
<div class="flex flex-col sm:flex-row gap-5">
|
||
<a href="https://labdata.info/#architecture" class="bg-hifi-green text-hifi-dark font-bold py-3.5 px-8 rounded hover:bg-emerald-400 transition transform hover:-translate-y-0.5 shadow-[0_0_20px_rgba(74,222,128,0.3)]">
|
||
<i class="fa-solid fa-microchip mr-2"></i> 探索密封舱
|
||
</a>
|
||
<a href="https://labdata.info/#roles" class="glass-panel text-white hover:border-gray-400 py-3.5 px-8 rounded transition transform hover:-translate-y-0.5">
|
||
<i class="fa-solid fa-users-viewfinder mr-2"></i> 组织架构
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 产品定义 -->
|
||
<section id="definition" class="py-20 border-y border-white/5 bg-white/[0.01]">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||
<!-- 左侧文字 -->
|
||
<div>
|
||
<h2 class="text-3xl font-bold mb-6 flex items-center">
|
||
<i class="fa-solid fa-seedling text-hifi-green mr-4"></i>
|
||
<span>园丁思维 <span class="text-gray-500 font-normal text-lg ml-2">/ Gardener Mindset</span></span>
|
||
</h2>
|
||
<p class="text-gray-300 mb-6 leading-relaxed text-lg">
|
||
我们不承认“出厂即完美”，我们承认不确定性。通过“人机回环”让智能体在反馈中生长。
|
||
</p>
|
||
<div class="space-y-4">
|
||
<div class="flex items-start">
|
||
<div class="flex-shrink-0 mt-1">
|
||
<div class="w-2 h-2 rounded-full bg-hifi-green"></div>
|
||
</div>
|
||
<div class="ml-4">
|
||
<h4 class="text-white font-bold">对外：拟人化专家 (Digital Workforce)</h4>
|
||
<p class="text-gray-400 text-sm mt-1">它是“资深教学评估专员”，有观点、不说废话、懂行话与潜规则。</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start">
|
||
<div class="flex-shrink-0 mt-1">
|
||
<div class="w-2 h-2 rounded-full bg-hifi-green"></div>
|
||
</div>
|
||
<div class="ml-4">
|
||
<h4 class="text-white font-bold">对内：密封舱 (Sealed Compartment)</h4>
|
||
<p class="text-gray-400 text-sm mt-1">构建气密性良好的逻辑单元，防止通用大模型的幻觉倒灌。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧卡片矩阵 -->
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div class="glass-panel p-6 rounded-xl border-t-2 border-t-hifi-green hover:bg-white/5 transition">
|
||
<div class="text-3xl font-bold mb-2 text-hifi-green">Small</div>
|
||
<div class="text-sm text-gray-400 font-mono">小而美<br>单点突破</div>
|
||
</div>
|
||
<div class="glass-panel p-6 rounded-xl border-t-2 border-t-hifi-green hover:bg-white/5 transition">
|
||
<div class="text-3xl font-bold mb-2 text-hifi-green">Deep</div>
|
||
<div class="text-sm text-gray-400 font-mono">深度认知<br>构建壁垒</div>
|
||
</div>
|
||
<div class="glass-panel p-6 rounded-xl border-t-2 border-t-hifi-green hover:bg-white/5 transition">
|
||
<div class="text-3xl font-bold mb-2 text-hifi-green">Hi-Fi</div>
|
||
<div class="text-sm text-gray-400 font-mono">高保真<br>逻辑严密</div>
|
||
</div>
|
||
<div class="glass-panel p-6 rounded-xl border-t-2 border-t-hifi-green hover:bg-white/5 transition">
|
||
<div class="text-3xl font-bold mb-2 text-hifi-green">Human</div>
|
||
<div class="text-sm text-gray-400 font-mono">拟人化<br>有性格</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 密封舱架构 -->
|
||
<section id="architecture" class="py-24">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<span class="text-hifi-green font-mono tracking-widest text-xs uppercase border border-hifi-green/30 px-2 py-1 rounded">Architectural Strategy</span>
|
||
<h2 class="text-3xl md:text-5xl font-bold mt-4">密封舱理论 <span class="text-gray-500 font-thin text-2xl">Sealed Compartment</span></h2>
|
||
<p class="text-gray-400 mt-4 max-w-2xl mx-auto">根据业务场景的<span class="text-white">熵值（混乱度）</span>与<span class="text-white">秩序</span>，采用两种截然不同的封装策略。</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-2 gap-8 mb-12">
|
||
<!-- A类：逻辑轮机 -->
|
||
<div class="glass-panel rounded-2xl p-8 hover:border-hifi-blue/50 transition duration-300 group relative overflow-hidden">
|
||
<div class="absolute top-0 right-0 w-32 h-32 bg-hifi-blue/10 rounded-bl-[100px] -mr-8 -mt-8 transition group-hover:bg-hifi-blue/20"></div>
|
||
|
||
<div class="flex justify-between items-start mb-6 relative z-10">
|
||
<div>
|
||
<span class="bg-blue-900/50 text-blue-200 border border-blue-500/30 text-xs font-bold px-2 py-1 rounded">TYPE A</span>
|
||
<h3 class="text-2xl font-bold mt-3 text-white">逻辑轮机 <span class="text-hifi-blue">Logic Engine</span></h3>
|
||
<p class="text-sm text-gray-500 font-mono mt-1">[替代型封装]</p>
|
||
</div>
|
||
<i class="fa-solid fa-gears text-4xl text-hifi-blue opacity-50 group-hover:opacity-100 transition"></i>
|
||
</div>
|
||
|
||
<div class="space-y-4 text-sm text-gray-300 relative z-10">
|
||
<div class="p-3 bg-black/20 rounded border border-white/5">
|
||
<strong class="text-blue-400 block mb-1">场景特征：繁杂域 (Complicated)</strong>
|
||
高秩序、低熵值，存在标准答案（如：作业批改）。
|
||
</div>
|
||
<ul class="list-disc list-inside space-y-2 text-gray-400">
|
||
<li>角色：<span class="text-white">黑盒执行器</span></li>
|
||
<li>控制：<span class="text-white">前馈控制</span> (追求 100% SOP 执行率)</li>
|
||
<li>异常：严禁自由发挥，Corner Case 必须抛出人工。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- B类：战略透镜 -->
|
||
<div class="glass-panel rounded-2xl p-8 hover:border-hifi-purple/50 transition duration-300 group relative overflow-hidden">
|
||
<div class="absolute top-0 right-0 w-32 h-32 bg-hifi-purple/10 rounded-bl-[100px] -mr-8 -mt-8 transition group-hover:bg-hifi-purple/20"></div>
|
||
|
||
<div class="flex justify-between items-start mb-6 relative z-10">
|
||
<div>
|
||
<span class="bg-purple-900/50 text-purple-200 border border-purple-500/30 text-xs font-bold px-2 py-1 rounded">TYPE B</span>
|
||
<h3 class="text-2xl font-bold mt-3 text-white">战略透镜 <span class="text-hifi-purple">Strategic Lens</span></h3>
|
||
<p class="text-sm text-gray-500 font-mono mt-1">[增强型封装]</p>
|
||
</div>
|
||
<i class="fa-solid fa-eye text-4xl text-hifi-purple opacity-50 group-hover:opacity-100 transition"></i>
|
||
</div>
|
||
|
||
<div class="space-y-4 text-sm text-gray-300 relative z-10">
|
||
<div class="p-3 bg-black/20 rounded border border-white/5">
|
||
<strong class="text-purple-400 block mb-1">场景特征：复杂域 (Complex)</strong>
|
||
低秩序、高熵值，无唯一解（如：情报分析、创意优化）。
|
||
</div>
|
||
<ul class="list-disc list-inside space-y-2 text-gray-400">
|
||
<li>角色：<span class="text-white">外骨骼 / 副驾驶</span></li>
|
||
<li>控制：<span class="text-white">反馈控制</span> (使能性约束)</li>
|
||
<li>模式：人机回环 (Human-in-the-loop) 共创洞察。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 校准接口 -->
|
||
<div class="glass-panel rounded-xl p-6 border-l-4 border-l-hifi-green flex flex-col md:flex-row items-center justify-between gap-6">
|
||
<div class="flex-1">
|
||
<h3 class="text-lg font-bold text-white mb-2"><i class="fa-solid fa-scale-balanced text-hifi-green mr-2"></i>校准接口 (Calibration Interface)</h3>
|
||
<p class="text-sm text-gray-400">所有密封舱必须预留“认知逆行”通道，将黑盒逻辑白盒化。</p>
|
||
</div>
|
||
<div class="flex gap-4 text-xs font-mono">
|
||
<div class="bg-black/30 px-4 py-2 rounded border border-white/10">
|
||
<span class="text-hifi-green block mb-1">01. 自我辩护</span>
|
||
CoT思维链摘要
|
||
</div>
|
||
<div class="bg-black/30 px-4 py-2 rounded border border-white/10">
|
||
<span class="text-hifi-green block mb-1">02. 结构化反馈</span>
|
||
非自然语言填空
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 核心方法论 -->
|
||
<section id="methodology" class="py-24 bg-white/[0.01]">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<h2 class="text-3xl font-bold mb-12 text-center">核心方法论 <span class="text-gray-600 font-normal">/ How We Work</span></h2>
|
||
|
||
<div class="grid md:grid-cols-3 gap-6">
|
||
<!-- 思想考古 -->
|
||
<div class="glass-panel p-8 rounded-xl relative hover:-translate-y-2 transition duration-300">
|
||
<div class="text-4xl text-gray-700 font-bold opacity-20 absolute top-4 right-6">01</div>
|
||
<h3 class="text-xl font-bold mb-4 text-white">思想考古</h3>
|
||
<div class="text-xs font-mono text-hifi-green mb-3">Intellectual Archaeology</div>
|
||
<p class="text-gray-400 text-sm mb-4 leading-relaxed">
|
||
利用 7 层模型作为深度标尺，从“应用层”下钻至“哲学基岩层”。
|
||
</p>
|
||
<div class="border-t border-white/10 pt-4 mt-4">
|
||
<span class="text-xs text-gray-500 block">原则：只对核心课题 (Issue) 深挖，不纠缠普通难题 (Problem)。</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CCPE 智核 -->
|
||
<div class="glass-panel p-8 rounded-xl relative hover:-translate-y-2 transition duration-300">
|
||
<div class="text-4xl text-gray-700 font-bold opacity-20 absolute top-4 right-6">02</div>
|
||
<h3 class="text-xl font-bold mb-4 text-white">CCPE 智核</h3>
|
||
<div class="text-xs font-mono text-hifi-blue mb-3">Cognitive Core Prompt</div>
|
||
<p class="text-gray-400 text-sm mb-4 leading-relaxed">
|
||
Agent 的灵魂注入协议。构建包含四层结构的指令体系。
|
||
</p>
|
||
<div class="grid grid-cols-2 gap-2 text-xs font-mono text-gray-400 mt-4">
|
||
<span class="bg-black/20 px-2 py-1 rounded">Core (身份)</span>
|
||
<span class="bg-black/20 px-2 py-1 rounded">Exec (能力)</span>
|
||
<span class="bg-black/20 px-2 py-1 rounded">Cons (边界)</span>
|
||
<span class="bg-black/20 px-2 py-1 rounded">Ops (流程)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 相互校准 -->
|
||
<div class="glass-panel p-8 rounded-xl relative hover:-translate-y-2 transition duration-300">
|
||
<div class="text-4xl text-gray-700 font-bold opacity-20 absolute top-4 right-6">03</div>
|
||
<h3 class="text-xl font-bold mb-4 text-white">相互校准协议</h3>
|
||
<div class="text-xs font-mono text-hifi-purple mb-3">Mutual Calibration</div>
|
||
<p class="text-gray-400 text-sm mb-4 leading-relaxed">
|
||
钢尺（AI）与皮尺（人类）的对话。
|
||
</p>
|
||
<div class="border-t border-white/10 pt-4 mt-4 text-xs text-gray-400 space-y-2">
|
||
<div class="flex items-center"><i class="fa-solid fa-filter text-gray-600 mr-2"></i> 灰度过滤：低置信度主动示弱</div>
|
||
<div class="flex items-center"><i class="fa-solid fa-check-double text-gray-600 mr-2"></i> 认知卸载：只做选择题，不做填空题</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 组织架构 (四体系统) -->
|
||
<section id="roles" class="py-24">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<h2 class="text-3xl font-bold mb-12 text-center">组织视角映射 <span class="text-gray-600 font-normal">/ The Five-Body System</span></h2>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
<!-- 船长 -->
|
||
<div class="glass-panel p-6 rounded-lg text-center hover:bg-white/5 transition group">
|
||
<div class="w-16 h-16 mx-auto bg-gray-800 rounded-full flex items-center justify-center mb-6 text-2xl group-hover:scale-110 transition shadow-lg">
|
||
⚓️
|
||
</div>
|
||
<h3 class="font-bold text-lg text-white">船长 Captain</h3>
|
||
<div class="text-xs text-hifi-green font-mono mb-3 uppercase tracking-wider">价值裁判官</div>
|
||
<p class="text-sm text-gray-400 border-t border-white/5 pt-3">
|
||
关注 ROI 与风险控制。<br>“是否在构建资产而非消耗成本？”
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 海图绘制者 -->
|
||
<div class="glass-panel p-6 rounded-lg text-center hover:bg-white/5 transition group">
|
||
<div class="w-16 h-16 mx-auto bg-gray-800 rounded-full flex items-center justify-center mb-6 text-2xl group-hover:scale-110 transition shadow-lg">
|
||
🗺️
|
||
</div>
|
||
<h3 class="font-bold text-lg text-white">海图绘制者</h3>
|
||
<div class="text-xs text-hifi-green font-mono mb-3 uppercase tracking-wider">建模者</div>
|
||
<p class="text-sm text-gray-400 border-t border-white/5 pt-3">
|
||
第一性原理与结构化。<br>将模糊直觉提炼为显性模型。
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 航行官 -->
|
||
<div class="glass-panel p-6 rounded-lg text-center hover:bg-white/5 transition group">
|
||
<div class="w-16 h-16 mx-auto bg-gray-800 rounded-full flex items-center justify-center mb-6 text-2xl group-hover:scale-110 transition shadow-lg">
|
||
🧭
|
||
</div>
|
||
<h3 class="font-bold text-lg text-white">航行官 Navigator</h3>
|
||
<div class="text-xs text-hifi-green font-mono mb-3 uppercase tracking-wider">业务/AI 翻译官</div>
|
||
<p class="text-sm text-gray-400 border-t border-white/5 pt-3">
|
||
Prompt 编写与交互设计。<br>负责上下行“翻译层”。
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 轮机长 -->
|
||
<div class="glass-panel p-6 rounded-lg text-center hover:bg-white/5 transition group">
|
||
<div class="w-16 h-16 mx-auto bg-gray-800 rounded-full flex items-center justify-center mb-6 text-2xl group-hover:scale-110 transition shadow-lg">
|
||
⚙️
|
||
</div>
|
||
<h3 class="font-bold text-lg text-white">轮机长 Chief Engineer</h3>
|
||
<div class="text-xs text-hifi-green font-mono mb-3 uppercase tracking-wider">工具工程师</div>
|
||
<p class="text-sm text-gray-400 border-t border-white/5 pt-3">
|
||
工程实现与稳定性。<br>确保逻辑轮机的黑盒够黑。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 航行纪律 -->
|
||
<section class="py-20 bg-black/50 border-t border-white/5">
|
||
<div class="max-w-4xl mx-auto px-4">
|
||
<h2 class="text-2xl font-bold mb-10 text-center text-hifi-warn flex items-center justify-center">
|
||
<i class="fa-solid fa-triangle-exclamation mr-3"></i>
|
||
航行纪律 (Execution Disciplines)
|
||
</h2>
|
||
<div class="glass-panel p-8 rounded-xl border-l-4 border-l-hifi-warn">
|
||
<div class="grid md:grid-cols-2 gap-y-6 gap-x-12">
|
||
<div class="flex items-start">
|
||
<span class="text-hifi-warn font-mono mr-3">01.</span>
|
||
<p class="text-sm text-gray-300"><strong class="text-white block mb-1">绿野仙踪协议 (Wizard of Oz)</strong>价值未经验证，禁止投入开发资源。</p>
|
||
</div>
|
||
<div class="flex items-start">
|
||
<span class="text-hifi-warn font-mono mr-3">02.</span>
|
||
<p class="text-sm text-gray-300"><strong class="text-white block mb-1">拥抱混合工程</strong>不确定性优先。先攻克 AI 核心，再做外壳。</p>
|
||
</div>
|
||
<div class="flex items-start">
|
||
<span class="text-hifi-warn font-mono mr-3">03.</span>
|
||
<p class="text-sm text-gray-300"><strong class="text-white block mb-1">过程即数据</strong>必须设计机制捕获专家的“修正痕迹”。</p>
|
||
</div>
|
||
<div class="flex items-start">
|
||
<span class="text-hifi-warn font-mono mr-3">04.</span>
|
||
<p class="text-sm text-gray-300"><strong class="text-white block mb-1">实测去魅</strong>拒绝“我觉得不错”，用自动化评测数据说话。</p>
|
||
</div>
|
||
<div class="flex items-start">
|
||
<span class="text-hifi-warn font-mono mr-3">05.</span>
|
||
<p class="text-sm text-gray-300"><strong class="text-white block mb-1">深度优先</strong>集中火力打穿一个极窄的垂直切片。</p>
|
||
</div>
|
||
<div class="flex items-start">
|
||
<span class="text-hifi-warn font-mono mr-3">06.</span>
|
||
<p class="text-sm text-gray-300"><strong class="text-white block mb-1">不仅做对，还要好改</strong>任何输出必须附带可解释路径与修正入口。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="py-12 border-t border-white/5 text-center bg-[#0a0c0f]">
|
||
<div class="max-w-7xl mx-auto px-4">
|
||
<div class="mb-4 text-2xl text-gray-600"><i class="fa-solid fa-cube"></i></div>
|
||
<p class="text-gray-500 text-sm mb-2">© 2025 HiFi Agent Studio. All Systems Operational.</p>
|
||
<p class="font-mono text-xs text-gray-600">Protocol v3.0 | Sealed Compartment Architecture</p>
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
|
||
</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;
|
||
--translate-language-background-color: #f3f5f6;
|
||
--translate-language-icon-color: #666666;
|
||
--translate-language-text-color: #222222;
|
||
--translate-language-hover-background-color: #fdedf3;
|
||
--translate-language-hover-icon-color: #e95d93;
|
||
--error-bg: #fdedf3;
|
||
--error-text: #222;
|
||
--error-link: #ea4c89;
|
||
}
|
||
|
||
[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;
|
||
--translate-language-background-color: #2d2e2f;
|
||
--translate-language-icon-color: #b3b3b3;
|
||
--translate-language-text-color: #b3b3b3;
|
||
--translate-language-hover-background-color: #a97b8c;
|
||
--translate-language-hover-icon-color: rgba(255, 255, 255, 0.9);
|
||
--error-bg: #26171d;
|
||
--error-text: #dbdbdb;
|
||
--error-link: #ea4c89;
|
||
}
|
||
|
||
#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;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.popup-content {
|
||
background-color: var(--popup-content-background-color);
|
||
border-radius: 0px 0px 12px 12px;
|
||
padding: 16px 20px;
|
||
}
|
||
|
||
.popup-userscript-three-feature-layout {
|
||
background-color: var(--popup-footer-background-color);
|
||
width: 350px;
|
||
min-width: 350px;
|
||
}
|
||
|
||
.popup-userscript-three-feature-layout .popup-content {
|
||
padding-bottom: 20px;
|
||
border-radius: 0 0 12px 12px;
|
||
}
|
||
|
||
.popup-userscript-three-feature-layout .popup-footer {
|
||
border-radius: 0;
|
||
}
|
||
|
||
.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: 16px;
|
||
font-weight: 700;
|
||
vertical-align: middle;
|
||
border-radius: 12px;
|
||
padding: unset;
|
||
height: 48px;
|
||
line-height: 48px;
|
||
flex: 1;
|
||
}
|
||
|
||
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);
|
||
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgOCA4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIG9wYWNpdHk9IjAuOCI+PHBhdGggZD0iTTMuNDc5NzMgNi4zODY0M0wwLjcyOTI5NyAzLjMyMjE2QzAuNjE2ODggMy4xOTY5NCAwLjU1NDY5NSAzLjAzNDU5IDAuNTU0Njg4IDIuODY2M0MwLjU1NDY4OCAyLjQ4OTI0IDAuODYwNTQ3IDIuMTgzNTkgMS4yMzc4NCAyLjE4MzU5SDYuNzM4NzFDNi45MDcwNyAyLjE4MzU4IDcuMDY5NTEgMi4yNDU3MiA3LjE5NDg4IDIuMzU4MDlDNy40NzU3NCAyLjYwOTg2IDcuNDk5MTkgMy4wNDE0OCA3LjI0NzI2IDMuMzIyMTZMNC40OTY4MiA2LjM4NjQ0QzQuNDgwMzIgNi40MDQ4MiA0LjQ2MjgzIDYuNDIyMjkgNC40NDQ0NCA2LjQzODc4QzQuMTYzNTggNi42OTA1NSAzLjczMTY2IDYuNjY3MTEgMy40Nzk3MyA2LjM4NjQzWiIgZmlsbD0iIzk5OTk5OSIvPjwvZz48L3N2Zz4K");
|
||
background-size: 8px auto;
|
||
}
|
||
|
||
.min-select-container.disabled {
|
||
opacity: 0.5;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.popup-footer {
|
||
background-color: var(--popup-footer-background-color);
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* Footer 三栏布局样式 */
|
||
.footer-link-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
flex-shrink: 0;
|
||
min-width: 72px;
|
||
}
|
||
|
||
.footer-icon-btn {
|
||
width: 20px;
|
||
height: 20px;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.footer-icon-btn svg {
|
||
color: #999999;
|
||
}
|
||
|
||
[data-theme="dark"] .footer-icon-btn svg {
|
||
color: #707070;
|
||
}
|
||
|
||
.footer-link-text {
|
||
font-size: 12px;
|
||
line-height: 18px;
|
||
color: #666666;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
[data-theme="dark"] .footer-link-text {
|
||
color: #b3b3b3;
|
||
}
|
||
|
||
.footer-link-btn-right {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.footer-center-text {
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
margin: 0 8px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
color: #999999;
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.footer-center-text.is-overflowing {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.footer-center-text.is-overflowing .footer-center-content {
|
||
animation: footer-scroll-text 12s linear infinite;
|
||
}
|
||
|
||
@keyframes footer-scroll-text {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
100% {
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
.footer-center-content {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.footer-scroll-gap {
|
||
display: inline-block;
|
||
width: 80px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
[data-theme="dark"] .footer-center-text {
|
||
color: #707070;
|
||
}
|
||
|
||
.footer-text-content {
|
||
display: inline-block;
|
||
}
|
||
|
||
.footer-privacy-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.footer-version-inline-text {
|
||
font-size: 12px;
|
||
color: #999999;
|
||
line-height: 1;
|
||
border-bottom: 1px solid transparent;
|
||
}
|
||
|
||
[data-theme="dark"] .footer-version-inline-text {
|
||
color: #707070;
|
||
}
|
||
|
||
.footer-version-inline-text:hover {
|
||
border-bottom-color: #999999;
|
||
}
|
||
|
||
[data-theme="dark"] .footer-version-inline-text:hover {
|
||
border-bottom-color: #707070;
|
||
}
|
||
|
||
.translate-language-row {
|
||
gap: 4px;
|
||
}
|
||
|
||
.translate-language-exchange {
|
||
width: 36px;
|
||
height: 48px;
|
||
background-color: var(--translate-language-background-color);
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--translate-language-icon-color);
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.translate-language-exchange:hover {
|
||
color: var(--translate-language-hover-icon-color);
|
||
}
|
||
|
||
.translate-language-exchange-active {
|
||
background-color: var(--translate-language-hover-background-color);
|
||
color: var(--translate-language-hover-icon-color);
|
||
}
|
||
|
||
.translate-language-exchange-active:hover {
|
||
background-color: var(--translate-language-hover-background-color);
|
||
color: var(--translate-language-hover-icon-color);
|
||
}
|
||
|
||
.translate-language-arrow {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin: 0;
|
||
}
|
||
|
||
.translation-service-container {
|
||
background-color: var(--popup-item-background-color);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.translation-service-primary-field {
|
||
position: relative;
|
||
}
|
||
|
||
.translation-service-guide-hitbox {
|
||
position: absolute;
|
||
right: 46px;
|
||
top: 0;
|
||
width: 1px;
|
||
height: 1px;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.popup-ai-context-label {
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
flex: 1;
|
||
min-width: 60px;
|
||
flex-shrink: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.popup-ai-context-switch {
|
||
align-self: center;
|
||
margin: 0;
|
||
margin-inline-end: 12px;
|
||
}
|
||
|
||
.translate-mode {
|
||
width: 36px;
|
||
height: 48px;
|
||
border-radius: 12px;
|
||
background-color: var(--translate-language-background-color);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
color: var(--translate-language-text-color);
|
||
margin-right: 8px;
|
||
}
|
||
|
||
/* 快捷操作设置标题栏 */
|
||
.widgets-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
padding: 0 4px;
|
||
margin-top: 20px;
|
||
margin-bottom: 12px;
|
||
font-size: 12px;
|
||
line-height: 18px;
|
||
}
|
||
|
||
.widgets-header-title {
|
||
color: #999999;
|
||
}
|
||
|
||
.widgets-header-action {
|
||
color: #999999;
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.widgets-header-action:hover {
|
||
color: #666666;
|
||
}
|
||
|
||
.widgets-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
width: 100%;
|
||
gap: 8px;
|
||
}
|
||
|
||
.popup-userscript-three-feature-layout .widgets-container-compact-monkey {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.widgets-container.widgets-single-item {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.widgets-container.widgets-single-item .widget-item {
|
||
max-width: none;
|
||
}
|
||
|
||
/* 当只有两个小组件时的样式优化 */
|
||
.widgets-container.widgets-two-items {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.widgets-container.widgets-two-items .widget-item {
|
||
max-width: none;
|
||
}
|
||
|
||
.widget-item {
|
||
display: flex;
|
||
width: 100%;
|
||
min-height: 44px;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: transparent;
|
||
border: 1px solid #eef0f2;
|
||
box-sizing: border-box;
|
||
font-size: 14px;
|
||
border-radius: 12px;
|
||
cursor: pointer;
|
||
padding: 0 14px;
|
||
text-align: left;
|
||
gap: 6px;
|
||
}
|
||
|
||
.widget-item.widget-item-single {
|
||
flex: 1 1 auto;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
border: 1px solid #eef0f2;
|
||
border-radius: 16px;
|
||
padding: 0 14px;
|
||
background: transparent;
|
||
}
|
||
|
||
.popup-userscript-three-feature-layout .widget-item-compact {
|
||
min-height: 60px;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: 2px;
|
||
padding: 8px 12px;
|
||
}
|
||
|
||
.widget-item svg {
|
||
width: 24px;
|
||
height: 24px;
|
||
flex: 0 0 24px;
|
||
}
|
||
|
||
.widget-icon-text {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
color: var(--c-66, #666666);
|
||
font-size: 14px;
|
||
line-height: 21px;
|
||
text-align: left;
|
||
word-break: keep-all;
|
||
}
|
||
|
||
.popup-userscript-three-feature-layout .widget-item-compact .widget-icon-text {
|
||
white-space: nowrap;
|
||
overflow: visible;
|
||
font-size: 12px;
|
||
line-height: 18px;
|
||
text-align: center;
|
||
}
|
||
|
||
.widget-item.widget-item-single .widget-icon-text {
|
||
white-space: nowrap;
|
||
text-align: left;
|
||
color: var(--c-66, #666666);
|
||
}
|
||
|
||
[data-theme="dark"] .widget-item,
|
||
[data-theme="dark"] .widget-item.widget-item-single {
|
||
border-color: #2e2e2e;
|
||
}
|
||
|
||
[data-theme="dark"] .widget-icon-text,
|
||
[data-theme="dark"] .widget-item.widget-item-single .widget-icon-text {
|
||
color: var(--c-66, #666666);
|
||
}
|
||
|
||
[data-theme="dark"] .more-settings-icon {
|
||
fill: #191919;
|
||
}
|
||
|
||
.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,
|
||
.widget-item: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;
|
||
}
|
||
|
||
.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: 50px;
|
||
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: 8px 8px 6px;
|
||
margin-top: 2px;
|
||
letter-spacing: 0.5px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.custom-select-group-header--recommendation {
|
||
color: #beb3a0;
|
||
font-weight: 400;
|
||
letter-spacing: 0;
|
||
padding-top: 4px;
|
||
}
|
||
|
||
.custom-select-group-header-tip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
color: #bcbcbc;
|
||
cursor: pointer;
|
||
line-height: 0;
|
||
}
|
||
|
||
.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.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;
|
||
height: 26px;
|
||
background: linear-gradient(
|
||
83deg,
|
||
#faccde -0.87%,
|
||
#fce7ef 43.13%,
|
||
#fbd6e4 72.08%,
|
||
#ffb3d1 96.34%
|
||
);
|
||
color: #333;
|
||
cursor: pointer;
|
||
gap: 4px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.activity-tips-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
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;
|
||
}
|
||
|
||
/* 非会员升级提示 */
|
||
.upgrade-tips {
|
||
padding: 0px 6px 0px 4px;
|
||
height: 18px;
|
||
color: #ea4c89;
|
||
cursor: pointer;
|
||
gap: 6px;
|
||
font-size: 12px;
|
||
line-height: 18px;
|
||
}
|
||
|
||
.upgrade-tips svg:first-child {
|
||
width: 16px;
|
||
height: 16px;
|
||
flex-shrink: 0;
|
||
filter: drop-shadow(0px 4px 4px rgba(236, 76, 140, 0.2));
|
||
}
|
||
|
||
.upgrade-tips-text {
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.upgrade-tips-switch {
|
||
position: relative;
|
||
width: 30px;
|
||
height: 18px;
|
||
border-radius: 24px;
|
||
background: #cccccc;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.upgrade-tips-switch-thumb {
|
||
position: absolute;
|
||
width: 14px;
|
||
height: 14px;
|
||
top: 2px;
|
||
left: 2px;
|
||
border-radius: 50%;
|
||
background: #ffffff;
|
||
}
|
||
|
||
/* 抽屉组件样式 */
|
||
.drawer-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
z-index: 100;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition:
|
||
opacity 0.25s ease,
|
||
visibility 0.25s ease;
|
||
}
|
||
|
||
.drawer-overlay.drawer-visible {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.drawer-panel {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: #ffffff;
|
||
border-radius: 12px 12px 0 0;
|
||
z-index: 101;
|
||
transform: translateY(100%);
|
||
transition: transform 0.3s ease;
|
||
max-height: 80vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.drawer-visible .drawer-panel {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
[data-theme="dark"] .drawer-panel {
|
||
background: #222222;
|
||
}
|
||
|
||
.drawer-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.drawer-title {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #333333;
|
||
}
|
||
|
||
[data-theme="dark"] .drawer-title {
|
||
color: #e0e0e0;
|
||
}
|
||
|
||
.drawer-close {
|
||
width: 24px;
|
||
height: 24px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #999999;
|
||
border-radius: 4px;
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.drawer-close:hover {
|
||
background-color: #f3f5f6;
|
||
}
|
||
|
||
[data-theme="dark"] .drawer-close:hover {
|
||
background-color: #333333;
|
||
}
|
||
|
||
.drawer-body {
|
||
padding: 16px 20px;
|
||
overflow-y: auto;
|
||
flex: 1;
|
||
}
|
||
|
||
.drawer-body.drawer-body-hover {
|
||
padding: 0 20px 20px 20px;
|
||
overflow-y: auto;
|
||
flex: 1;
|
||
}
|
||
|
||
.drawer-body.drawer-body-more-settings {
|
||
padding-top: 0;
|
||
}
|
||
|
||
.drawer-footer {
|
||
padding: 12px 20px;
|
||
border-top: 1px solid #eef0f2;
|
||
flex-shrink: 0;
|
||
text-align: center;
|
||
}
|
||
|
||
[data-theme="dark"] .drawer-footer {
|
||
border-top: 1px solid #2e2e2e;
|
||
}
|
||
|
||
.drawer-footer-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
}
|
||
|
||
.drawer-footer-actions-single {
|
||
justify-content: center;
|
||
}
|
||
|
||
.drawer-footer-text {
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
color: #999999;
|
||
text-decoration: none;
|
||
flex: 1 1 0;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
text-align: center;
|
||
}
|
||
|
||
.drawer-footer-actions-single .drawer-footer-text {
|
||
flex: 0 1 auto;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.drawer-footer-text:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* 抽屉内容区域样式 */
|
||
.drawer-section {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.drawer-section:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.drawer-section-highlight {
|
||
background-color: #f9f9f9;
|
||
border-radius: 12px;
|
||
padding: 16px;
|
||
}
|
||
|
||
[data-theme="dark"] .drawer-section-highlight {
|
||
background-color: #2a2a2a;
|
||
}
|
||
|
||
.drawer-section-title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #666666;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
[data-theme="dark"] .drawer-section-title {
|
||
color: #999999;
|
||
}
|
||
|
||
.drawer-section-divider {
|
||
height: 1px;
|
||
background-color: #eef0f2;
|
||
margin: 16px 0;
|
||
}
|
||
|
||
/* ========== 通用抽屉组件样式 ========== */
|
||
.popup-drawer-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.popup-drawer-card {
|
||
background: #f3f5f6;
|
||
border-radius: 12px;
|
||
padding: 12px 12px 16px;
|
||
}
|
||
|
||
[data-theme="dark"] .popup-drawer-card {
|
||
background: #2a2a2a;
|
||
}
|
||
|
||
.popup-drawer-card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
min-height: 21px;
|
||
gap: 12px;
|
||
}
|
||
|
||
.popup-drawer-card-header input[type="checkbox"][role="switch"] {
|
||
margin: 0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.popup-drawer-card-title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #222222;
|
||
line-height: 21px;
|
||
}
|
||
|
||
[data-theme="dark"] .popup-drawer-card-title {
|
||
color: #e0e0e0;
|
||
}
|
||
|
||
.popup-drawer-card-divider {
|
||
height: 1px;
|
||
width: calc(100% + 24px);
|
||
background-color: #ffffff;
|
||
margin: 12px -12px 16px;
|
||
}
|
||
|
||
[data-theme="dark"] .popup-drawer-card-divider {
|
||
background-color: #333333;
|
||
}
|
||
|
||
.popup-drawer-demo {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.popup-drawer-demo-region-fixed {
|
||
height: 51px;
|
||
max-height: 51px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.popup-drawer-demo-region-min {
|
||
min-height: 51px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.popup-drawer-demo-selection {
|
||
width: 100%;
|
||
min-width: 0;
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
.popup-drawer-demo-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.popup-drawer-demo-plus,
|
||
.popup-drawer-demo-equal {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
line-height: 21px;
|
||
color: #333333;
|
||
}
|
||
|
||
[data-theme="dark"] .popup-drawer-demo-plus,
|
||
[data-theme="dark"] .popup-drawer-demo-equal {
|
||
color: #e0e0e0;
|
||
}
|
||
|
||
.popup-drawer-demo-logo {
|
||
width: 28px;
|
||
height: 28px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.popup-drawer-demo-logo img {
|
||
width: 28px;
|
||
height: 28px;
|
||
display: block;
|
||
filter: drop-shadow(0 4px 12px rgba(255, 166, 201, 0.5));
|
||
}
|
||
|
||
.popup-drawer-demo-result {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 21px;
|
||
color: #333333;
|
||
}
|
||
|
||
.popup-drawer-demo-result-ellipsis {
|
||
min-width: 0;
|
||
max-width: calc(100% - 72px);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
[data-theme="dark"] .popup-drawer-demo-result {
|
||
color: #e0e0e0;
|
||
}
|
||
|
||
.popup-drawer-trigger {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.popup-drawer-trigger-label {
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
line-height: 18px;
|
||
color: #999999;
|
||
padding-left: 4px;
|
||
}
|
||
|
||
.popup-drawer-trigger-options {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.popup-drawer-trigger-option {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 8px 12px;
|
||
height: 34px;
|
||
border-radius: 8px;
|
||
border: 1px solid #eef0f2;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
line-height: 18px;
|
||
color: #333333;
|
||
background: #ffffff;
|
||
cursor: pointer;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.popup-drawer-trigger-option-disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.5;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.popup-drawer-trigger-option:not(.popup-drawer-trigger-option-selected):hover {
|
||
border-color: #d0d3d6;
|
||
}
|
||
|
||
.popup-drawer-trigger-option-selected {
|
||
border: 0.5px solid #ea4c89;
|
||
background: #fdedf3;
|
||
box-shadow: 0px 4px 12px rgba(255, 166, 201, 0.5);
|
||
}
|
||
|
||
[data-theme="dark"] .popup-drawer-trigger-option {
|
||
background: #1f1f1f;
|
||
border-color: #333333;
|
||
color: #e0e0e0;
|
||
}
|
||
|
||
[data-theme="dark"]
|
||
.popup-drawer-trigger-option:not(
|
||
.popup-drawer-trigger-option-selected
|
||
):hover {
|
||
border-color: #444444;
|
||
}
|
||
|
||
[data-theme="dark"] .popup-drawer-trigger-option-selected {
|
||
background: rgba(233, 76, 137, 0.2);
|
||
border-color: #ea4c89;
|
||
box-shadow: 0 4px 12px 0 rgba(255, 166, 201, 0.3);
|
||
}
|
||
|
||
.popup-drawer-trigger-option-with-icon {
|
||
gap: 8px;
|
||
}
|
||
|
||
/* ========== 通用抽屉演示区域样式 ========== */
|
||
/* 键帽样式 */
|
||
.popup-drawer-demo-keycap {
|
||
min-width: 72px;
|
||
padding: 9px;
|
||
height: auto;
|
||
box-sizing: border-box;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
line-height: 18px;
|
||
color: #ffffff;
|
||
background:
|
||
radial-gradient(
|
||
60px 36px at 85% 100%,
|
||
rgba(208, 208, 208, 0.2),
|
||
rgba(255, 255, 255, 0)
|
||
),
|
||
radial-gradient(72px 36px at 50% 0%, #101010 0%, #242424 100%);
|
||
box-shadow:
|
||
2px 2px 3.5px rgba(0, 0, 0, 0.4),
|
||
inset 0.5px 0.7px 0.4px rgba(255, 255, 255, 0.5),
|
||
inset -0.5px -0.5px 0.2px rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
.popup-drawer-demo-keycap-text {
|
||
max-width: 50px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 小圆点样式 */
|
||
.popup-drawer-demo-mini-dot {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 50%;
|
||
background: #ea4c89;
|
||
flex-shrink: 0;
|
||
align-self: center;
|
||
box-shadow: 0 4px 12px rgba(255, 166, 201, 0.5);
|
||
}
|
||
|
||
[data-theme="dark"] .drawer-section-divider {
|
||
background-color: #333333;
|
||
}
|
||
|
||
/* 开关行 */
|
||
.drawer-switch-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.drawer-switch-row.drawer-row-border {
|
||
border-bottom: 1px solid #eef0f2;
|
||
margin-bottom: 8px;
|
||
padding-bottom: 12px;
|
||
}
|
||
|
||
[data-theme="dark"] .drawer-switch-row.drawer-row-border {
|
||
border-bottom-color: #333333;
|
||
}
|
||
|
||
.drawer-switch-label {
|
||
font-size: 14px;
|
||
color: #222222;
|
||
}
|
||
|
||
[data-theme="dark"] .drawer-switch-label {
|
||
color: #e0e0e0;
|
||
}
|
||
|
||
/* 链接行 */
|
||
.drawer-link-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px 0;
|
||
cursor: pointer;
|
||
border-bottom: 1px solid #eef0f2;
|
||
font-size: 14px;
|
||
color: #222222;
|
||
}
|
||
|
||
.drawer-link-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
[data-theme="dark"] .drawer-link-row {
|
||
border-bottom-color: #333333;
|
||
color: #e0e0e0;
|
||
}
|
||
|
||
.drawer-link-row:hover {
|
||
color: #ea4c89;
|
||
}
|
||
|
||
/* 演示区域 */
|
||
.drawer-demo {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
padding: 12px 0;
|
||
}
|
||
|
||
.drawer-demo-icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #ffffff;
|
||
border-radius: 8px;
|
||
border: 1px solid #eef0f2;
|
||
}
|
||
|
||
[data-theme="dark"] .drawer-demo-icon {
|
||
background-color: #333333;
|
||
border-color: #444444;
|
||
}
|
||
|
||
.drawer-demo-plus,
|
||
.drawer-demo-equal {
|
||
font-size: 16px;
|
||
color: #999999;
|
||
}
|
||
|
||
.drawer-demo-logo {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.drawer-demo-logo img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.drawer-demo-result {
|
||
font-size: 14px;
|
||
color: #222222;
|
||
padding: 8px 12px;
|
||
background-color: #ffffff;
|
||
border-radius: 8px;
|
||
border: 1px solid #eef0f2;
|
||
}
|
||
|
||
[data-theme="dark"] .drawer-demo-result {
|
||
background-color: #333333;
|
||
border-color: #444444;
|
||
color: #e0e0e0;
|
||
}
|
||
|
||
/* 触发方式选项 */
|
||
.drawer-options {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.drawer-options-wrap {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.drawer-option {
|
||
padding: 8px 16px;
|
||
font-size: 14px;
|
||
color: #666666;
|
||
background-color: #f3f5f6;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
border: 1px solid transparent;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
[data-theme="dark"] .drawer-option {
|
||
background-color: #333333;
|
||
color: #b3b3b3;
|
||
}
|
||
|
||
.drawer-option:hover {
|
||
background-color: #eaeced;
|
||
}
|
||
|
||
[data-theme="dark"] .drawer-option:hover {
|
||
background-color: #3a3a3a;
|
||
}
|
||
|
||
.drawer-option-selected {
|
||
border-color: #ea4c89;
|
||
background-color: #fdedf3;
|
||
color: #ea4c89;
|
||
box-shadow: 0px 4px 12px rgba(255, 166, 201, 0.5);
|
||
}
|
||
|
||
[data-theme="dark"] .drawer-option-selected {
|
||
background-color: rgba(234, 76, 137, 0.2);
|
||
}
|
||
|
||
.drawer-body.drawer-body-selection {
|
||
padding: 0 20px 20px 20px;
|
||
overflow: hidden;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
/* ========== 更多设置抽屉样式 ========== */
|
||
.more-settings-drawer {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.more-settings-quick-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.more-settings-feature-card {
|
||
flex: 1 1 0;
|
||
min-width: 0;
|
||
height: 40px;
|
||
padding: 0 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
border-radius: 12px;
|
||
cursor: pointer;
|
||
background-color: #f3f5f6;
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.more-settings-feature-card:hover {
|
||
background-color: #e8eaec;
|
||
}
|
||
|
||
.more-settings-feature-card:active {
|
||
background-color: #dde0e2;
|
||
}
|
||
|
||
.more-settings-feature-card-label {
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
line-height: 18px;
|
||
color: #666666;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.more-settings-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.more-settings-switch-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
min-height: 21px;
|
||
gap: 12px;
|
||
}
|
||
|
||
.more-settings-switch-label {
|
||
flex: 1;
|
||
min-width: 0;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 21px;
|
||
color: #222222;
|
||
white-space: normal;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.more-settings-switch-row input[type="checkbox"] {
|
||
flex-shrink: 0;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
[data-theme="dark"] .more-settings-switch-label {
|
||
color: #e0e0e0;
|
||
}
|
||
|
||
[data-theme="dark"] .more-settings-feature-card {
|
||
background-color: #2a2a2a;
|
||
}
|
||
|
||
[data-theme="dark"] .more-settings-feature-card:hover {
|
||
background-color: #333333;
|
||
}
|
||
|
||
[data-theme="dark"] .more-settings-feature-card:active {
|
||
background-color: #3a3a3a;
|
||
}
|
||
|
||
[data-theme="dark"] .more-settings-feature-card-label {
|
||
color: #e0e0e0;
|
||
}
|
||
|
||
/* 动作按钮样式 */
|
||
.more-settings-action-button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
height: 40px;
|
||
padding: 0 12px;
|
||
color: #222222;
|
||
background-color: #f3f5f6;
|
||
border-radius: 12px;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.more-settings-action-button:hover {
|
||
background-color: #e8eaec;
|
||
}
|
||
|
||
.more-settings-action-button:active {
|
||
background-color: #dde0e2;
|
||
}
|
||
|
||
.more-settings-action-button-label {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
line-height: 21px;
|
||
color: inherit;
|
||
text-align: center;
|
||
}
|
||
|
||
[data-theme="dark"] .more-settings-action-button {
|
||
color: #e0e0e0;
|
||
background-color: #2a2a2a;
|
||
}
|
||
|
||
[data-theme="dark"] .more-settings-action-button:hover {
|
||
background-color: #333333;
|
||
}
|
||
|
||
[data-theme="dark"] .more-settings-action-button:active {
|
||
background-color: #3a3a3a;
|
||
}
|
||
|
||
[data-theme="dark"] .more-settings-action-button-label {
|
||
color: #e0e0e0;
|
||
}
|
||
|
||
/* 错误消息组件样式 */
|
||
.error-message-container {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 12px 16px;
|
||
margin-top: 6px;
|
||
margin-bottom: -14px;
|
||
border: 1px solid #f53f3f;
|
||
border-radius: 12px;
|
||
background-color: var(--error-bg);
|
||
}
|
||
|
||
.error-message-icon-wrapper {
|
||
width: 21px;
|
||
height: 21px;
|
||
min-width: 21px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.error-message-icon {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background-color: #f53f3f;
|
||
}
|
||
|
||
.error-message-text {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 21px;
|
||
color: var(--error-text);
|
||
}
|
||
|
||
.error-message-text a {
|
||
color: var(--error-link);
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.ad-banner-container {
|
||
margin-top: 16px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
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;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.popup-content {
|
||
border-radius: 20px 20px 12px 12px;
|
||
}
|
||
.popup-footer {
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.popup-userscript-three-feature-layout {
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.popup-userscript-three-feature-layout .popup-content {
|
||
border-radius: 20px 20px 12px 12px;
|
||
}
|
||
|
||
.popup-userscript-three-feature-layout .popup-footer {
|
||
border-radius: 0;
|
||
}
|
||
|
||
.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-fb-power-user-card {
|
||
position: absolute;
|
||
bottom: -130px;
|
||
width: 266px;
|
||
border-radius: 20px;
|
||
background: #fff;
|
||
box-shadow: 2px 10px 24px 0 rgba(14, 18, 22, 0.08);
|
||
border: 1px solid rgba(250, 251, 251, 1);
|
||
pointer-events: all;
|
||
z-index: 2;
|
||
background: linear-gradient(172deg, rgba(255, 255, 255, 0.30) 4.36%, #FFF 35.98%), linear-gradient(0deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.40) 100%), radial-gradient(39.95% 47.41% at -0.53% 55.22%, #E0C4F7 0%, rgba(224, 196, 247, 0.00) 100%), radial-gradient(56.37% 54.27% at 86.17% 0%, #E0C4F6 0%, rgba(224, 196, 246, 0.00) 100%), radial-gradient(42.04% 37.43% at -0.53% 3.75%, #AED5FF 0%, rgba(174, 213, 255, 0.00) 100%), radial-gradient(66.88% 52.09% at 36.81% 19.55%, #757ED8 0%, #6B6AC0 100%), #FFF;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.imt-fb-power-user-card.right {
|
||
right: 60px;
|
||
}
|
||
|
||
.imt-fb-power-user-card.right::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: -10px;
|
||
top: 130px;
|
||
border-width: 10px 0 10px 10px;
|
||
border-style: solid;
|
||
border-color: transparent transparent transparent #fff;
|
||
filter: drop-shadow(2px 0 2px rgba(14, 18, 22, 0.06));
|
||
}
|
||
|
||
.imt-fb-power-user-card.left {
|
||
left: 60px;
|
||
}
|
||
|
||
.imt-fb-power-user-card.left::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: -10px;
|
||
top: 130px;
|
||
border-width: 10px 10px 10px 0;
|
||
border-style: solid;
|
||
border-color: transparent #fff transparent transparent;
|
||
filter: drop-shadow(-2px 0 2px rgba(14, 18, 22, 0.06));
|
||
}
|
||
|
||
.imt-fb-power-user-card-banner {
|
||
display: block;
|
||
width: 128px;
|
||
height: auto;
|
||
margin-top: 8px;
|
||
border-radius: 8px 8px 0 0;
|
||
}
|
||
|
||
.imt-fb-power-user-card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
padding: 16px 24px 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.imt-fb-power-user-card-title {
|
||
color: #333;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
line-height: 24px;
|
||
text-align: center;
|
||
}
|
||
|
||
.imt-fb-power-user-card-close {
|
||
position: absolute;
|
||
top: 16px;
|
||
right: 16px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 14px;
|
||
height: 14px;
|
||
padding: 0;
|
||
border: 0;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.imt-fb-power-user-card-body {
|
||
padding: 12px 24px 24px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.imt-fb-power-user-card-desc {
|
||
color: #333;
|
||
font-size: 14px;
|
||
line-height: 22px;
|
||
text-align: center;
|
||
}
|
||
|
||
.imt-fb-power-user-card-primary {
|
||
margin-top: 16px;
|
||
height: 37px;
|
||
border-radius: 8px;
|
||
background: linear-gradient(110deg, #F497BC 17.37%, #EC4C8C 89.68%);
|
||
color: var(--ZX-FFFFFF, #FFF);
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
line-height: 21px; /* 150% */
|
||
display: flex;
|
||
padding: 8px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 4px;
|
||
flex: 1 0 0;
|
||
}
|
||
|
||
.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>
|