3791 lines
187 KiB
HTML
3791 lines
187 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" data-theme="dark" data-trae-theme="dark"><head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>调度App H5 - 行驶证拍摄取景引导原型（基于现有流程改造）</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
|
||
background: linear-gradient(180deg, #eef1f6 0%, #e4e8f0 100%);
|
||
color: #323643;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
min-height: 100vh;
|
||
padding: 20px;
|
||
gap: 24px;
|
||
}
|
||
|
||
/* ===== 手机外框 ===== */
|
||
.phone-frame {
|
||
width: 375px;
|
||
height: 812px;
|
||
background: #000;
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow: 0 12px 48px rgba(0,0,0,.22);
|
||
border-radius: 40px;
|
||
border: 3px solid #1a1a1a;
|
||
flex-shrink: 0;
|
||
}
|
||
.phone-notch {
|
||
width: 150px; height: 28px;
|
||
background: #1a1a1a;
|
||
border-radius: 0 0 18px 18px;
|
||
position: absolute; top: 0; left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 100;
|
||
}
|
||
.phone-home-bar {
|
||
width: 134px; height: 5px;
|
||
background: rgba(255,255,255,.35);
|
||
border-radius: 3px;
|
||
position: absolute; bottom: 8px; left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 100;
|
||
}
|
||
|
||
/* ===== 页面内容区 ===== */
|
||
.page-content {
|
||
height: 100%; width: 100%;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ===== 车辆管理页（现有页面） ===== */
|
||
.vehicle-page {
|
||
position: absolute; inset: 0;
|
||
background: #F7F8FA;
|
||
display: flex; flex-direction: column;
|
||
z-index: 1;
|
||
}
|
||
.vehicle-page.hide { display: none; }
|
||
|
||
.vehicle-nav {
|
||
display: flex; align-items: center;
|
||
height: 48px; padding: 0 12px;
|
||
padding-top: 28px;
|
||
background: #2C395F; color: #fff;
|
||
}
|
||
.vehicle-nav .back-btn {
|
||
font-size: 22px; width: 36px; cursor: pointer; line-height: 1; opacity: .7;
|
||
}
|
||
.vehicle-nav .title {
|
||
flex: 1; text-align: center;
|
||
font-size: 18px; font-weight: bolder; opacity: .7;
|
||
}
|
||
.vehicle-nav .spacer { width: 36px; }
|
||
|
||
.vehicle-body {
|
||
flex: 1; overflow-y: auto;
|
||
padding: 0;
|
||
}
|
||
.vehicle-body::-webkit-scrollbar { display: none; }
|
||
|
||
.vehicle-card {
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 2px 10px 0px rgba(216,216,216,0.5);
|
||
border-radius: 6px;
|
||
margin: 10px 13px;
|
||
padding: 0 15px;
|
||
}
|
||
|
||
.upload-item {
|
||
display: flex; align-items: center;
|
||
padding: 14px 0;
|
||
border-bottom: 1px solid #E9E9EA;
|
||
gap: 12px;
|
||
}
|
||
.upload-item:last-child { border-bottom: none; }
|
||
.upload-label {
|
||
font-size: 14px; color: #323643;
|
||
white-space: nowrap; line-height: 1;
|
||
flex-shrink: 0; width: 100px;
|
||
font-weight: bold;
|
||
}
|
||
.upload-label .required { color: #e74c3c; margin-right: 2px; }
|
||
.upload-slot {
|
||
width: 80px; height: 54px;
|
||
border: 1.5px dashed #bbb;
|
||
border-radius: 6px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
cursor: pointer; transition: all .2s;
|
||
background: #fafafa;
|
||
position: relative;
|
||
}
|
||
.upload-slot:hover { border-color: #354D93; background: #f0f4ff; }
|
||
.upload-slot.has-image {
|
||
border: none; background: none;
|
||
}
|
||
.upload-slot .plus-icon {
|
||
font-size: 24px; color: #ccc; line-height: 1;
|
||
}
|
||
.upload-slot .slot-img {
|
||
width: 100%; height: 100%;
|
||
object-fit: cover; border-radius: 6px;
|
||
}
|
||
.upload-slot .guide-badge {
|
||
position: absolute; top: -6px; right: -6px;
|
||
background: #354D93; color: #fff;
|
||
font-size: 9px; padding: 2px 5px;
|
||
border-radius: 8px; white-space: nowrap;
|
||
}
|
||
|
||
.form-field {
|
||
display: flex; align-items: center;
|
||
padding: 14px 0;
|
||
border-bottom: 1px solid #E9E9EA;
|
||
}
|
||
.form-field:last-child { border-bottom: none; }
|
||
.form-field .field-label {
|
||
font-size: 14px; width: 100px; flex-shrink: 0;
|
||
font-weight: bold; color: #323643;
|
||
}
|
||
.form-field .field-value {
|
||
flex: 1; font-size: 14px; color: #323643; opacity: .5;
|
||
text-align: right;
|
||
}
|
||
|
||
.vehicle-footer {
|
||
padding: 12px 16px;
|
||
padding-bottom: calc(20px + env(safe-area-inset-bottom));
|
||
}
|
||
.submit-btn {
|
||
width: 100%; height: 46px;
|
||
background: #354D93; color: #fff;
|
||
border: none; border-radius: 23px;
|
||
font-size: 16px; font-weight: 600;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* ===== 拍摄引导页 ===== */
|
||
.camera-page {
|
||
--accent: #354D93;
|
||
--accent-soft: rgba(53,77,147,.42);
|
||
position: absolute; inset: 0;
|
||
background: #F5F5F5;
|
||
display: none;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
z-index: 10;
|
||
}
|
||
.camera-page.show { display: flex; }
|
||
|
||
.camera-bg {
|
||
position: absolute; inset: 0;
|
||
background: linear-gradient(160deg, #F7F9FC 0%, #EEF1F6 50%, #E6EAF1 100%);
|
||
z-index: 1;
|
||
}
|
||
.camera-bg::after {
|
||
content: '相机预览画面';
|
||
position: absolute;
|
||
left: 50%; bottom: 120px;
|
||
transform: translateX(-50%);
|
||
color: rgba(53,77,147,.25);
|
||
font-size: 12px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.camera-nav {
|
||
position: relative; z-index: 10;
|
||
display: flex; align-items: center;
|
||
height: 52px; padding: 0 0 0 14px;
|
||
padding-top: 28px;
|
||
background: #2C395F;
|
||
color: #fff;
|
||
}
|
||
.camera-nav .back-btn {
|
||
font-size: 22px; width: 36px; cursor: pointer;
|
||
line-height: 1; color: #fff;
|
||
flex-shrink: 0; text-align: left;
|
||
}
|
||
.camera-nav .title {
|
||
flex: 1; text-align: left;
|
||
font-size: 18px; font-weight: bolder;
|
||
letter-spacing: .5px; color: #fff;
|
||
padding-left: 4px;
|
||
}
|
||
.camera-nav .spacer { display: none; }
|
||
|
||
.guide-layer {
|
||
position: absolute; inset: 0;
|
||
z-index: 5;
|
||
display: flex; flex-direction: column;
|
||
align-items: center; justify-content: center;
|
||
padding-top: 80px; padding-bottom: 100px;
|
||
}
|
||
|
||
/* ===== 顶部主指令 Hero ===== */
|
||
.guide-hero {
|
||
display: flex; align-items: center; gap: 12px;
|
||
background: #FFFFFF;
|
||
border: 1px solid #E9E9EA;
|
||
border-radius: 6px;
|
||
padding: 12px 15px;
|
||
margin-bottom: 24px;
|
||
max-width: 322px; width: calc(100% - 48px);
|
||
box-shadow: 0 2px 10px rgba(20,30,50,.08);
|
||
}
|
||
.guide-hero-icon {
|
||
width: 42px; height: 42px; flex-shrink: 0;
|
||
border-radius: 6px;
|
||
background: rgba(53,77,147,.10);
|
||
display: flex; align-items: center; justify-content: center;
|
||
color: #354D93;
|
||
}
|
||
.guide-hero-icon svg { width: 23px; height: 23px; }
|
||
.guide-hero-text { text-align: left; }
|
||
.guide-hero-title {
|
||
color: #222; font-size: 16px; font-weight: 700; line-height: 1.3;
|
||
letter-spacing: .3px;
|
||
}
|
||
.guide-hero-sub {
|
||
color: #5B606E; font-size: 12.5px; margin-top: 4px; line-height: 1.4;
|
||
}
|
||
|
||
/* ===== 取景要点（do / don't 图标卡） ===== */
|
||
.guide-tips {
|
||
display: flex; gap: 10px; margin-top: 22px;
|
||
padding: 0 14px; max-width: 340px; width: 100%;
|
||
}
|
||
.tip-item {
|
||
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
|
||
background: #FFFFFF;
|
||
border-radius: 6px; padding: 11px 4px 9px;
|
||
border: 1px solid #E9E9EA;
|
||
box-shadow: 0 2px 8px rgba(20,30,50,.06);
|
||
}
|
||
.tip-ico {
|
||
width: 28px; height: 28px; border-radius: 50%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.tip-ico svg { width: 17px; height: 17px; }
|
||
.tip-item.ok .tip-ico { background: rgba(53,77,147,.10); color: #354D93; }
|
||
.tip-item.warn .tip-ico { background: rgba(255,85,59,.12); color: #FF553B; }
|
||
.tip-label { color: #5B606E; font-size: 11.5px; line-height: 1.3; text-align: center; }
|
||
|
||
.guide-frame-outer {
|
||
position: relative;
|
||
width: 300px; height: 210px;
|
||
flex-shrink: 0;
|
||
filter: drop-shadow(0 4px 16px rgba(20,30,50,.12));
|
||
}
|
||
.corner {
|
||
position: absolute;
|
||
width: 30px; height: 30px;
|
||
border-color: var(--accent);
|
||
border-style: solid; z-index: 10;
|
||
}
|
||
.corner.tl { top: -4px; left: -4px; border-width: 4px 0 0 4px; border-radius: 4px 0 0 0; }
|
||
.corner.tr { top: -4px; right: -4px; border-width: 4px 4px 0 0; border-radius: 0 4px 0 0; }
|
||
.corner.bl { bottom: -4px; left: -4px; border-width: 0 0 4px 4px; border-radius: 0 0 0 4px; }
|
||
.corner.br { bottom: -4px; right: -4px; border-width: 0 4px 4px 0; border-radius: 0 0 4px 0; }
|
||
|
||
.guide-hole {
|
||
position: absolute; inset: 0;
|
||
border-radius: 8px; overflow: hidden;
|
||
}
|
||
.guide-mask {
|
||
position: absolute; inset: 0;
|
||
border-radius: 8px;
|
||
background: #FFFFFF;
|
||
pointer-events: none;
|
||
}
|
||
.guide-frame-border {
|
||
position: absolute; inset: 0;
|
||
border: 3px solid #C2C8D2;
|
||
border-radius: 8px;
|
||
pointer-events: none;
|
||
z-index: 9;
|
||
}
|
||
|
||
/* ===== 证件模板叠层（引导对齐） ===== */
|
||
.license-template {
|
||
position: absolute; inset: 0;
|
||
z-index: 6;
|
||
border: 1.5px solid rgba(53,77,147,.55);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
background: rgba(53,77,147,.06);
|
||
}
|
||
.lt-inner {
|
||
position: absolute; inset: 5px;
|
||
display: flex; flex-direction: column;
|
||
}
|
||
.lt-title { text-align: center; margin-bottom: 4px; }
|
||
.lt-title-line {
|
||
font-size: 10px; color: rgba(53,77,147,.9);
|
||
font-weight: bold;
|
||
letter-spacing: 1px;
|
||
white-space: nowrap;
|
||
}
|
||
.lt-seal {
|
||
position: absolute; left: 10px; bottom: 10px;
|
||
width: 34px; height: 34px;
|
||
border: 1.5px dashed rgba(255,85,59,.85);
|
||
border-radius: 2px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 5.5px; color: rgba(255,85,59,.85);
|
||
}
|
||
|
||
/* 通用字段行（副页使用） */
|
||
.lt-row { display: flex; align-items: center; gap: 2px; line-height: 1.3; }
|
||
.lt-label {
|
||
font-size: 6.5px; color: rgba(255,255,255,.22);
|
||
white-space: nowrap;
|
||
}
|
||
.lt-line { flex: 1; height: 1px; background: rgba(255,255,255,.1); }
|
||
|
||
/* 主页：仅保留标题+印章 */
|
||
.lt-front-page .lt-inner {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
/* 副页：仅保留底部条形码 */
|
||
.lt-back-page .lt-inner {
|
||
justify-content: flex-end;
|
||
}
|
||
.lt-barcode-area {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 4px;
|
||
padding-bottom: 6px;
|
||
padding-right: 8px;
|
||
}
|
||
.lt-barcode-strip {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
height: 28px;
|
||
gap: 1px;
|
||
}
|
||
.lt-barcode-strip .lt-bar {
|
||
background: rgba(53,77,147,.6);
|
||
width: 1.5px;
|
||
border-radius: 0.5px;
|
||
}
|
||
.lt-barcode-strip .lt-bar.wide { width: 2.8px; }
|
||
.lt-barcode-strip .lt-bar.short { height: 50%; }
|
||
.lt-barcode-strip .lt-bar.medium { height: 70%; }
|
||
.lt-barcode-strip .lt-bar.tall { height: 100%; }
|
||
.lt-barcode-num {
|
||
font-size: 8px;
|
||
color: rgba(53,77,147,.9);
|
||
letter-spacing: 2px;
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
|
||
/* 车辆照片模板 */
|
||
.lt-car-page .lt-car-outline {
|
||
flex: 1; display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.lt-car-page .lt-car-outline svg { width: 140px; height: 70px; opacity: .6; color: #354D93; }
|
||
|
||
/* 原 .tip-text-bottom 已重构为 .guide-tips（见上方取景要点） */
|
||
|
||
.shoot-bar {
|
||
position: absolute; bottom: 0; left: 0; right: 0;
|
||
z-index: 10;
|
||
display: flex; flex-direction: column; align-items: center;
|
||
padding-bottom: 32px;
|
||
padding-bottom: calc(32px + env(safe-area-inset-bottom));
|
||
background: #FFFFFF;
|
||
border-top: 1px solid #E9E9EA;
|
||
}
|
||
.shoot-btn {
|
||
width: 72px; height: 72px;
|
||
border-radius: 50%;
|
||
border: 4px solid #354D93;
|
||
background: #FFFFFF;
|
||
cursor: pointer; position: relative;
|
||
transition: transform .15s;
|
||
box-shadow: 0 0 0 2px rgba(53,77,147,.22), 0 6px 16px rgba(20,30,50,.18);
|
||
}
|
||
.shoot-btn:active { transform: scale(.92); }
|
||
.shoot-btn::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%; top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 58px; height: 58px;
|
||
border-radius: 50%; background: #354D93;
|
||
}
|
||
.shoot-label {
|
||
color: #5B606E;
|
||
font-size: 12px; margin-top: 10px;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
/* ===== 预览确认页 ===== */
|
||
.preview-page {
|
||
position: absolute; inset: 0;
|
||
background: #F5F5F5;
|
||
display: none;
|
||
flex-direction: column;
|
||
z-index: 20;
|
||
}
|
||
.preview-page.show { display: flex; }
|
||
|
||
.preview-img-wrap {
|
||
flex: 1;
|
||
display: flex; align-items: center; justify-content: center;
|
||
padding: 20px;
|
||
}
|
||
.preview-img {
|
||
max-width: 100%; max-height: 100%;
|
||
border-radius: 8px; object-fit: contain;
|
||
}
|
||
|
||
.preview-btns {
|
||
display: flex; gap: 16px;
|
||
padding: 0 20px 32px;
|
||
padding-bottom: calc(32px + env(safe-area-inset-bottom));
|
||
}
|
||
.preview-btn {
|
||
flex: 1; height: 48px;
|
||
border-radius: 24px; border: none;
|
||
font-size: 16px; font-weight: 600;
|
||
cursor: pointer; transition: opacity .15s;
|
||
}
|
||
.preview-btn:active { opacity: .8; }
|
||
.btn-retake {
|
||
background: rgba(255,255,255,.15);
|
||
color: #fff;
|
||
border: 1px solid rgba(255,255,255,.3);
|
||
}
|
||
.btn-confirm { background: #354D93; color: #fff; }
|
||
|
||
/* ===== 流程提示条 ===== */
|
||
.flow-indicator {
|
||
position: absolute;
|
||
top: -14px; left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 50;
|
||
background: rgba(44,57,95,.92);
|
||
color: #fff;
|
||
font-size: 11px;
|
||
padding: 6px 16px;
|
||
border-radius: 16px;
|
||
backdrop-filter: blur(8px);
|
||
display: flex; align-items: center; gap: 8px;
|
||
white-space: nowrap;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,.2);
|
||
pointer-events: none;
|
||
}
|
||
.flow-step {
|
||
display: flex; align-items: center; gap: 4px;
|
||
}
|
||
.flow-step-num {
|
||
width: 18px; height: 18px;
|
||
border-radius: 50%;
|
||
background: rgba(255,255,255,.2);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 10px; font-weight: 700;
|
||
}
|
||
.flow-step.active .flow-step-num {
|
||
background: #354D93;
|
||
}
|
||
.flow-step.active { color: #354D93; }
|
||
.flow-arrow { color: rgba(255,255,255,.3); font-size: 10px; }
|
||
|
||
/* ===== 右侧说明面板 ===== */
|
||
.side-panel {
|
||
width: 440px;
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 16px rgba(0,0,0,.08);
|
||
overflow: hidden;
|
||
align-self: flex-start;
|
||
flex-shrink: 0;
|
||
}
|
||
.panel-header {
|
||
background: #2C395F; color: #fff;
|
||
padding: 14px 20px; font-size: 15px; font-weight: 600;
|
||
}
|
||
.panel-body { padding: 16px 20px 20px; }
|
||
.panel-body h4 {
|
||
font-size: 14px; color: #323643; margin-bottom: 8px;
|
||
padding-bottom: 6px; border-bottom: 1px solid #E9E9EA;
|
||
}
|
||
.panel-body p { font-size: 13px; color: #323643; opacity: .7; line-height: 1.75; margin-bottom: 10px; }
|
||
.panel-body ul { padding-left: 18px; }
|
||
.panel-body li { font-size: 13px; color: #323643; opacity: .7; line-height: 1.8; margin-bottom: 2px; }
|
||
.panel-body code {
|
||
background: #f0f4ff; color: #354D93;
|
||
padding: 1px 5px; border-radius: 3px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.tab-bar {
|
||
display: flex; border-bottom: 1px solid #eee;
|
||
margin-bottom: 14px;
|
||
}
|
||
.tab-btn {
|
||
flex: 1; padding: 10px 0; text-align: center;
|
||
font-size: 13.5px; color: #888; cursor: pointer;
|
||
border-bottom: 2px solid transparent;
|
||
transition: all .2s;
|
||
}
|
||
.tab-btn.active {
|
||
color: #2c7be5; font-weight: 600;
|
||
border-bottom-color: #2c7be5;
|
||
}
|
||
.tab-btn:hover { color: #2c7be5; }
|
||
|
||
.highlight-box {
|
||
background: #eef6ff; border: 1px solid #cce0ff;
|
||
border-radius: 8px; padding: 12px 14px;
|
||
margin: 10px 0;
|
||
}
|
||
.highlight-box p { margin: 0; color: #2c5aa0; font-size: 13px; line-height: 1.7; }
|
||
.highlight-box strong { color: #1a4a9c; }
|
||
|
||
.warn-box {
|
||
background: #fff7e6; border: 1px solid #ffe0a3;
|
||
border-radius: 8px; padding: 12px 14px;
|
||
margin: 10px 0;
|
||
}
|
||
.warn-box p { margin: 0; color: #8a6d3b; font-size: 13px; line-height: 1.7; }
|
||
|
||
.spec-table {
|
||
width: 100%; font-size: 12.5px;
|
||
border-collapse: collapse; margin-top: 6px;
|
||
}
|
||
.spec-table th, .spec-table td {
|
||
padding: 8px 6px; border: 1px solid #e4e7eb;
|
||
text-align: left;
|
||
}
|
||
.spec-table th {
|
||
background: #f5f7fa; font-weight: 600; color: #333;
|
||
}
|
||
.spec-table td { color: #555; }
|
||
|
||
.action-hint {
|
||
background: #fff7e6;
|
||
border-left: 3px solid #f39c12;
|
||
border-radius: 6px;
|
||
padding: 10px 12px;
|
||
margin: 10px 0;
|
||
font-size: 12.5px;
|
||
color: #8a6d3b;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.flow-diagram {
|
||
background: #f8f9fb; border: 1px solid #e4e7eb;
|
||
border-radius: 8px; padding: 14px;
|
||
margin: 10px 0;
|
||
font-size: 12px; line-height: 1.8;
|
||
color: #555;
|
||
font-family: 'Courier New', monospace;
|
||
white-space: pre;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
@media (max-width: 860px) {
|
||
body { flex-direction: column; align-items: center; }
|
||
.side-panel { width: 375px; margin-top: 20px; }
|
||
}
|
||
</style>
|
||
<style>.trae-browser-inspect-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999997;pointer-events:auto;background:rgba(0,0,0,0)}.trae-browser-inspect-highlight-box{position:absolute;top:0;left:0;z-index:999998;display:none}.trae-browser-inspect-highlight-tag{position:absolute;left:0px;top:0px;height:18px;padding:0 6px;box-sizing:border-box;border-radius:4px;background-color:var(--vscode-icube-colorSuccessHover, "#2FB287");color:var(--vscode-icube-colorSnow, "#fff");font-size:12px;font-weight:400;display:none;align-items:center;z-index:999999}.trae-browser-inspect-highlight-box-show{display:flex}.trae-browser-inspect-select-button.trae-browser-inspect-highlight-box-show{display:flex !important}.trae-browser-inspect-select-button{position:absolute;top:0;left:0;background-color:var(--vscode-icube--bg-bg-base-secondary, "#222427");color:var(--vscode-icube--text-text-default-active, "#F5F9FE");font-size:11px;font-weight:500;border:1px solid var(--vscode-icube--border-neutral-l1, "#E0E2F217");border-radius:6px;padding:0 8px;height:32px;display:none;align-items:center;cursor:pointer;z-index:999999;gap:4px}.trae-browser-inspect-select-button svg,.trae-browser-inspect-select-button span{z-index:1}.trae-browser-inspect-select-highlight-box{background:rgba(0,0,0,0) !important}.trae-browser-inspect-select-highlight-box .trae-browser-inspect-highlight-tag{background-color:var(--vscode-icube--status-success-active, "#1E8B56")}.trae-browser-inspect-comment-card-container{position:fixed;top:0;left:0;z-index:9999999;pointer-events:auto}.trae-browser-inspect-comment-card-container .trae-browser-inspect-comment-card{display:flex;padding-top:0px !important;align-items:center;z-index:9999999 !important;background-color:var(--vscode-icube--bg-bg-menu)}*[contenteditable]{outline:none}.trae-browser-inspect-click-effect{position:fixed;width:40px;height:40px;margin-left:-20px;margin-top:-20px;border-radius:50%;background-color:var(--vscode-icube-colorSuccessHover, #2FB287);pointer-events:none;animation:trae-browser-inspect-ripple 500ms ease-out forwards;z-index:999999}@keyframes trae-browser-inspect-ripple{0%{transform:scale(0.3);opacity:.8}100%{transform:scale(2);opacity:0}}.trae-browser-inspect-ref-box{position:absolute;border:2px solid var(--vscode-icube-colorSuccessHover, "#2FB287");pointer-events:none;z-index:999998;animation:trae-browser-inspect-fadeInOut 2s ease-in-out forwards}.trae-browser-inspect-ref-label{position:absolute;top:-14px;left:0;height:14px;padding:0 4px;box-sizing:border-box;border-radius:2px;background-color:var(--vscode-icube-colorSuccessHover, "#2FB287");color:var(--vscode-icube-colorSnow, "#fff");font-size:9px;font-weight:500;display:flex;align-items:center;white-space:nowrap;z-index:999999}@keyframes trae-browser-inspect-fadeInOut{0%{opacity:0}10%{opacity:1}90%{opacity:1}100%{opacity:0}}.trae-browser-inspect-input-highlight{position:absolute;border:2px solid var(--vscode-icube-colorSuccessHover, "#2FB287");border-radius:4px;pointer-events:none;z-index:999998;box-shadow:0 0 8px var(--vscode-icube-colorSuccessHover, "#2FB287");animation:trae-browser-inspect-input-pulse 600ms ease-out forwards}@keyframes trae-browser-inspect-input-pulse{0%{opacity:0;box-shadow:0 0 0 var(--vscode-icube-colorSuccessHover, "#2FB287")}30%{opacity:1;box-shadow:0 0 12px var(--vscode-icube-colorSuccessHover, "#2FB287")}100%{opacity:0;box-shadow:0 0 0 var(--vscode-icube-colorSuccessHover, "#2FB287")}}.trae-browser-inspect-virtual-cursor{position:fixed;width:20px;height:20px;pointer-events:none;z-index:9999999;opacity:0;transition:opacity .2s ease}.trae-browser-inspect-virtual-cursor.trae-browser-inspect-cursor-visible{opacity:1}.trae-browser-inspect-virtual-cursor.trae-browser-inspect-cursor-idle{animation:trae-browser-inspect-cursor-breathe 2s ease-in-out infinite}.trae-browser-inspect-virtual-cursor svg{width:20px;height:20px;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}@keyframes trae-browser-inspect-cursor-breathe{0%,100%{opacity:.7}50%{opacity:1}}.trae-browser-inspect-scroll-indicator{position:fixed;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:8px;background-color:rgba(0,0,0,.7);color:#fff;font-size:13px;font-weight:500;pointer-events:none;z-index:999999;animation:trae-browser-inspect-indicator-fade 800ms ease-out forwards;backdrop-filter:blur(4px)}.trae-browser-inspect-scroll-indicator svg{width:16px;height:16px;fill:#fff}.trae-browser-inspect-scroll-indicator.trae-scroll-up{top:12px;left:50%;transform:translateX(-50%)}.trae-browser-inspect-scroll-indicator.trae-scroll-down{bottom:12px;left:50%;transform:translateX(-50%)}.trae-browser-inspect-scroll-indicator.trae-scroll-left{left:12px;top:50%;transform:translateY(-50%)}.trae-browser-inspect-scroll-indicator.trae-scroll-right{right:12px;top:50%;transform:translateY(-50%)}@keyframes trae-browser-inspect-indicator-fade{0%{opacity:0;transform:translateX(-50%) scale(0.9)}15%{opacity:1;transform:translateX(-50%) scale(1)}85%{opacity:1}100%{opacity:0}}.trae-browser-inspect-scroll-indicator.trae-scroll-left,.trae-browser-inspect-scroll-indicator.trae-scroll-right{animation-name:trae-browser-inspect-indicator-fade-y}@keyframes trae-browser-inspect-indicator-fade-y{0%{opacity:0;transform:translateY(-50%) scale(0.9)}15%{opacity:1;transform:translateY(-50%) scale(1)}85%{opacity:1}100%{opacity:0}}.trae-browser-inspect-key-badge{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);padding:8px 20px;border-radius:8px;background-color:rgba(0,0,0,.8);color:#fff;font-size:18px;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,monospace;pointer-events:none;z-index:999999;animation:trae-browser-inspect-key-pop 500ms ease-out forwards;backdrop-filter:blur(4px);border:1px solid hsla(0,0%,100%,.15);box-shadow:0 4px 12px rgba(0,0,0,.3);letter-spacing:1px}@keyframes trae-browser-inspect-key-pop{0%{opacity:0;transform:translateX(-50%) translateY(10px) scale(0.9)}20%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-10px)}}.trae-browser-inspect-step-badge{position:fixed;top:12px;left:12px;padding:6px 12px;border-radius:6px;background-color:var(--vscode-icube-colorSuccessHover, #2FB287);color:#fff;font-size:12px;font-weight:600;pointer-events:none;z-index:999999;animation:trae-browser-inspect-step-slide 600ms ease-out forwards;box-shadow:0 2px 8px rgba(47,178,135,.3);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trae-browser-inspect-step-badge.trae-step-old{opacity:.4;transform:translateY(0)}@keyframes trae-browser-inspect-step-slide{0%{opacity:0;transform:translateX(-20px)}20%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(0)}}.trae-browser-inspect-drag-trail{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999998}.trae-browser-inspect-drag-trail svg{width:100%;height:100%}.trae-browser-inspect-drag-trail .trae-drag-path{fill:none;stroke:var(--vscode-icube-colorSuccessHover, #2FB287);stroke-width:2;stroke-dasharray:8 4;opacity:.6;animation:trae-browser-inspect-dash 600ms linear forwards}.trae-browser-inspect-drag-trail .trae-drag-dot{fill:var(--vscode-icube-colorSuccessHover, #2FB287);filter:drop-shadow(0 0 4px rgba(47, 178, 135, 0.6))}.trae-browser-inspect-drag-trail .trae-drag-endpoint{fill:none;stroke:var(--vscode-icube-colorSuccessHover, #2FB287);stroke-width:2;opacity:.5}@keyframes trae-browser-inspect-dash{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}.trae-browser-inspect-drag-trail.trae-drag-fade{animation:trae-browser-inspect-trail-fade 400ms ease-out forwards}@keyframes trae-browser-inspect-trail-fade{0%{opacity:1}100%{opacity:0}}</style><script type="module">(async () => {
|
||
try {
|
||
const client = await import('/@vite/client');
|
||
const hmr = client.createHotContext('hmr-handler/fake.js');
|
||
hmr.on('vite:afterUpdate', window['__ICUBE_WEBVIEW_HMR_CALLBACK_1785203968911']);
|
||
} catch {}
|
||
})();</script><style>.buttonsCard-bTXa5j {
|
||
padding: var(--spacer-4);
|
||
background: none;
|
||
align-items: center;
|
||
gap: 0;
|
||
display: inline-flex;
|
||
}
|
||
|
||
.actionButton-opZL8g {
|
||
align-items: center;
|
||
gap: var(--spacer-4);
|
||
padding: var(--spacer-4) var(--spacer-8);
|
||
border-radius: var(--radius-4);
|
||
cursor: pointer;
|
||
transition: background-color var(--transition-fast);
|
||
background: none;
|
||
border: none;
|
||
display: inline-flex;
|
||
}
|
||
|
||
.actionButton-opZL8g:hover {
|
||
background: var(--bg-bg-overlay-l2);
|
||
}
|
||
|
||
.actionButton-opZL8g:active {
|
||
background: var(--bg-bg-overlay-l3);
|
||
}
|
||
|
||
.actionButton-opZL8g:focus-visible {
|
||
outline: 2px solid var(--status-primary-default);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
.icon-ObJEMt {
|
||
width: 16px;
|
||
height: 16px;
|
||
color: var(--icon-icon-default);
|
||
flex-shrink: 0;
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: flex;
|
||
}
|
||
|
||
.title-GptGAg {
|
||
font-family: var(--font-family-default);
|
||
color: var(--text-text-default);
|
||
white-space: nowrap;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
line-height: 16px;
|
||
}
|
||
|
||
.shortcut-nbwTG4 {
|
||
color: var(--icon-icon-secondary);
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
gap: 2px;
|
||
display: flex;
|
||
}
|
||
|
||
.shortcutKey-EE6xrE {
|
||
font-family: var(--font-family-default);
|
||
color: var(--icon-icon-secondary);
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
line-height: 12px;
|
||
}
|
||
|
||
.divider-cFGVKQ {
|
||
box-sizing: content-box;
|
||
background-clip: content-box;
|
||
background-color: var(--border-border-neutral-l2);
|
||
flex-shrink: 0;
|
||
width: 1px;
|
||
height: 12px;
|
||
padding: 0 6px;
|
||
}
|
||
|
||
</style><style>.commentEditorCard-Un4Xaa {
|
||
width: 320px;
|
||
padding: var(--spacing-sm);
|
||
background: none;
|
||
flex-direction: column;
|
||
display: flex;
|
||
}
|
||
|
||
.textContainer-ZISwbW {
|
||
padding: var(--spacing-sm);
|
||
background: var(--bg-bg-overlay-l1);
|
||
border: 1px solid var(--border-border-neutral-l3);
|
||
border-radius: var(--radius-sm);
|
||
align-items: center;
|
||
gap: var(--spacing-sm);
|
||
padding-right: 0;
|
||
display: flex;
|
||
}
|
||
|
||
.textarea-ggj4j6 {
|
||
padding: 0 var(--spacing-sm) 0 2px;
|
||
font-family: var(--font-family-default);
|
||
color: var(--text-text-default);
|
||
resize: none;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: #56637726 transparent;
|
||
background: none;
|
||
border: none;
|
||
outline: none;
|
||
flex: 1;
|
||
max-height: 140px;
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
line-height: 20px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.textarea-ggj4j6::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.textarea-ggj4j6::-webkit-scrollbar-track {
|
||
background: none;
|
||
}
|
||
|
||
.textarea-ggj4j6::-webkit-scrollbar-thumb {
|
||
background: #56637726;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.textarea-ggj4j6::placeholder {
|
||
color: var(--text-text-tertiary);
|
||
}
|
||
|
||
.actionBar-u_t8vc {
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
gap: var(--spacing-xs);
|
||
opacity: 0;
|
||
max-height: 0;
|
||
transition: max-height .2s ease-out, opacity .2s ease-out, margin-top .2s ease-out;
|
||
display: flex;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.actionBarVisible-PxXsje {
|
||
opacity: 1;
|
||
max-height: 32px;
|
||
margin-top: var(--spacing-sm);
|
||
}
|
||
|
||
.actionBarNoExpandAnimation-FCra2J {
|
||
transition: opacity .2s ease-out;
|
||
}
|
||
|
||
.actionBarNoExpandAnimation-FCra2J.actionBarVisible-PxXsje {
|
||
max-height: 32px;
|
||
margin-top: var(--spacing-sm);
|
||
}
|
||
|
||
.cancelButton-Lu0me9 {
|
||
height: 24px;
|
||
padding: 0 var(--spacing-xs);
|
||
background: var(--bg-bg-overlay-l2);
|
||
border-radius: var(--radius-sm);
|
||
cursor: pointer;
|
||
transition: background-color var(--transition-fast);
|
||
border: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: flex;
|
||
}
|
||
|
||
.cancelButton-Lu0me9:hover, .cancelButton-Lu0me9:active {
|
||
background: var(--bg-bg-overlay-l3);
|
||
}
|
||
|
||
.cancelButton-Lu0me9:focus-visible {
|
||
outline: 2px solid var(--status-primary-default);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
.cancelText-j1RS1q {
|
||
font-family: var(--font-family-default);
|
||
color: var(--text-text-default);
|
||
white-space: nowrap;
|
||
padding: 0 var(--spacing-xs);
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
line-height: 16px;
|
||
}
|
||
|
||
.submitButton-BqyEd7 {
|
||
height: 24px;
|
||
padding: 0 var(--spacing-sm);
|
||
background: var(--bg-bg-invert);
|
||
border-radius: var(--radius-sm);
|
||
cursor: pointer;
|
||
transition: background-color var(--transition-fast);
|
||
border: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: flex;
|
||
}
|
||
|
||
.submitButton-BqyEd7:hover:not(:disabled) {
|
||
background: var(--bg-bg-invert-hover);
|
||
}
|
||
|
||
.submitButton-BqyEd7:active:not(:disabled) {
|
||
background: var(--bg-bg-invert-active);
|
||
}
|
||
|
||
.submitButton-BqyEd7:disabled {
|
||
background: var(--bg-bg-invert-disabled);
|
||
color: var(--text-text-disabled);
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.submitButton-BqyEd7:focus-visible {
|
||
outline: 2px solid var(--status-primary-default);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
.submitText-N58QRq {
|
||
font-family: var(--font-family-default);
|
||
color: var(--text-text-onaccent);
|
||
white-space: nowrap;
|
||
padding: 0 var(--spacing-xs);
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
line-height: 16px;
|
||
}
|
||
|
||
.submitButton-BqyEd7:disabled .submitText-N58QRq {
|
||
color: var(--text-text-disabled);
|
||
}
|
||
|
||
.submitIcon-vyKSKQ {
|
||
width: 12px;
|
||
height: 12px;
|
||
color: var(--icon-icon-onaccent);
|
||
flex-shrink: 0;
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: flex;
|
||
}
|
||
|
||
.submitButton-BqyEd7:disabled .submitIcon-vyKSKQ {
|
||
color: var(--text-text-disabled);
|
||
}
|
||
|
||
.limitWarning-Hocj0v {
|
||
align-items: center;
|
||
gap: var(--spacing-xs);
|
||
color: var(--status-warning-default);
|
||
user-select: none;
|
||
flex: 1;
|
||
display: flex;
|
||
}
|
||
|
||
.limitText-hBXEaq {
|
||
font-family: var(--font-family-default);
|
||
color: var(--status-warning-default);
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
line-height: 18px;
|
||
}
|
||
|
||
</style><style>.previewCommentCardContainer-HEkpU8 {
|
||
border-radius: var(--radius-8);
|
||
background: var(--bg-bg-menu);
|
||
border: 1px solid var(--border-border-neutral-l1);
|
||
transition: width .25s cubic-bezier(.4, 0, .2, 1), height .25s cubic-bezier(.4, 0, .2, 1);
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 6px #0003, 0 .5px #ffffff0f, inset 0 .5px #ffffff0f;
|
||
}
|
||
|
||
.previewCommentCardContent-ELaLah {
|
||
width: max-content;
|
||
position: relative;
|
||
}
|
||
|
||
.previewCommentCardFadeEnter-OMhMD9 {
|
||
opacity: 0;
|
||
}
|
||
|
||
.previewCommentCardFadeEnterActive-Eacuvn {
|
||
opacity: 1;
|
||
transition: opacity .2s ease-in;
|
||
}
|
||
|
||
.previewCommentCardFadeExit-ms9vgc {
|
||
opacity: 1;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.previewCommentCardFadeExitActive-vyQTsd {
|
||
opacity: 0;
|
||
transition: opacity .15s ease-out;
|
||
}
|
||
|
||
.previewCommentCardSuccessCard-PWnm2o {
|
||
white-space: nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 6px;
|
||
height: 32px;
|
||
padding: 0 12px;
|
||
display: flex;
|
||
}
|
||
|
||
.previewCommentCardSuccessIcon-Oht9Ir {
|
||
width: 16px;
|
||
height: 16px;
|
||
color: var(--status-success-default);
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: flex;
|
||
}
|
||
|
||
.previewCommentCardSuccessText-s40BWG {
|
||
font-family: var(--font-family-default);
|
||
color: var(--text-text-default);
|
||
user-select: none;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
line-height: 18px;
|
||
}
|
||
|
||
</style><style id="trae-browser-inspect-drag-styles">
|
||
.trae-browser-inspect-draggable {
|
||
cursor: grab !important;
|
||
}
|
||
.trae-browser-inspect-dragging-active {
|
||
cursor: grabbing !important;
|
||
}
|
||
.trae-browser-inspect-drag-ghost {
|
||
opacity: 0.7;
|
||
pointer-events: none;
|
||
position: fixed;
|
||
z-index: 999998;
|
||
transform: scale(0.95);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
transition: none;
|
||
}
|
||
.trae-browser-inspect-element-placeholder {
|
||
opacity: 0.3;
|
||
}
|
||
</style><style>.trae-browser-inspect-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999997;pointer-events:auto;background:rgba(0,0,0,0)}.trae-browser-inspect-highlight-box{position:absolute;top:0;left:0;z-index:999998;display:none}.trae-browser-inspect-highlight-tag{position:absolute;left:0px;top:0px;height:18px;padding:0 6px;box-sizing:border-box;border-radius:4px;background-color:var(--vscode-icube-colorSuccessHover, "#2FB287");color:var(--vscode-icube-colorSnow, "#fff");font-size:12px;font-weight:400;display:none;align-items:center;z-index:999999}.trae-browser-inspect-highlight-box-show{display:flex}.trae-browser-inspect-select-button.trae-browser-inspect-highlight-box-show{display:flex !important}.trae-browser-inspect-select-button{position:absolute;top:0;left:0;background-color:var(--vscode-icube--bg-bg-base-secondary, "#222427");color:var(--vscode-icube--text-text-default-active, "#F5F9FE");font-size:11px;font-weight:500;border:1px solid var(--vscode-icube--border-neutral-l1, "#E0E2F217");border-radius:6px;padding:0 8px;height:32px;display:none;align-items:center;cursor:pointer;z-index:999999;gap:4px}.trae-browser-inspect-select-button svg,.trae-browser-inspect-select-button span{z-index:1}.trae-browser-inspect-select-highlight-box{background:rgba(0,0,0,0) !important}.trae-browser-inspect-select-highlight-box .trae-browser-inspect-highlight-tag{background-color:var(--vscode-icube--status-success-active, "#1E8B56")}.trae-browser-inspect-comment-card-container{position:fixed;top:0;left:0;z-index:9999999;pointer-events:auto}.trae-browser-inspect-comment-card-container .trae-browser-inspect-comment-card{display:flex;padding-top:0px !important;align-items:center;z-index:9999999 !important;background-color:var(--vscode-icube--bg-bg-menu)}*[contenteditable]{outline:none}.trae-browser-inspect-click-effect{position:fixed;width:40px;height:40px;margin-left:-20px;margin-top:-20px;border-radius:50%;background-color:var(--vscode-icube-colorSuccessHover, #2FB287);pointer-events:none;animation:trae-browser-inspect-ripple 500ms ease-out forwards;z-index:999999}@keyframes trae-browser-inspect-ripple{0%{transform:scale(0.3);opacity:.8}100%{transform:scale(2);opacity:0}}.trae-browser-inspect-ref-box{position:absolute;border:2px solid var(--vscode-icube-colorSuccessHover, "#2FB287");pointer-events:none;z-index:999998;animation:trae-browser-inspect-fadeInOut 2s ease-in-out forwards}.trae-browser-inspect-ref-label{position:absolute;top:-14px;left:0;height:14px;padding:0 4px;box-sizing:border-box;border-radius:2px;background-color:var(--vscode-icube-colorSuccessHover, "#2FB287");color:var(--vscode-icube-colorSnow, "#fff");font-size:9px;font-weight:500;display:flex;align-items:center;white-space:nowrap;z-index:999999}@keyframes trae-browser-inspect-fadeInOut{0%{opacity:0}10%{opacity:1}90%{opacity:1}100%{opacity:0}}.trae-browser-inspect-input-highlight{position:absolute;border:2px solid var(--vscode-icube-colorSuccessHover, "#2FB287");border-radius:4px;pointer-events:none;z-index:999998;box-shadow:0 0 8px var(--vscode-icube-colorSuccessHover, "#2FB287");animation:trae-browser-inspect-input-pulse 600ms ease-out forwards}@keyframes trae-browser-inspect-input-pulse{0%{opacity:0;box-shadow:0 0 0 var(--vscode-icube-colorSuccessHover, "#2FB287")}30%{opacity:1;box-shadow:0 0 12px var(--vscode-icube-colorSuccessHover, "#2FB287")}100%{opacity:0;box-shadow:0 0 0 var(--vscode-icube-colorSuccessHover, "#2FB287")}}.trae-browser-inspect-virtual-cursor{position:fixed;width:20px;height:20px;pointer-events:none;z-index:9999999;opacity:0;transition:opacity .2s ease}.trae-browser-inspect-virtual-cursor.trae-browser-inspect-cursor-visible{opacity:1}.trae-browser-inspect-virtual-cursor.trae-browser-inspect-cursor-idle{animation:trae-browser-inspect-cursor-breathe 2s ease-in-out infinite}.trae-browser-inspect-virtual-cursor svg{width:20px;height:20px;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}@keyframes trae-browser-inspect-cursor-breathe{0%,100%{opacity:.7}50%{opacity:1}}.trae-browser-inspect-scroll-indicator{position:fixed;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:8px;background-color:rgba(0,0,0,.7);color:#fff;font-size:13px;font-weight:500;pointer-events:none;z-index:999999;animation:trae-browser-inspect-indicator-fade 800ms ease-out forwards;backdrop-filter:blur(4px)}.trae-browser-inspect-scroll-indicator svg{width:16px;height:16px;fill:#fff}.trae-browser-inspect-scroll-indicator.trae-scroll-up{top:12px;left:50%;transform:translateX(-50%)}.trae-browser-inspect-scroll-indicator.trae-scroll-down{bottom:12px;left:50%;transform:translateX(-50%)}.trae-browser-inspect-scroll-indicator.trae-scroll-left{left:12px;top:50%;transform:translateY(-50%)}.trae-browser-inspect-scroll-indicator.trae-scroll-right{right:12px;top:50%;transform:translateY(-50%)}@keyframes trae-browser-inspect-indicator-fade{0%{opacity:0;transform:translateX(-50%) scale(0.9)}15%{opacity:1;transform:translateX(-50%) scale(1)}85%{opacity:1}100%{opacity:0}}.trae-browser-inspect-scroll-indicator.trae-scroll-left,.trae-browser-inspect-scroll-indicator.trae-scroll-right{animation-name:trae-browser-inspect-indicator-fade-y}@keyframes trae-browser-inspect-indicator-fade-y{0%{opacity:0;transform:translateY(-50%) scale(0.9)}15%{opacity:1;transform:translateY(-50%) scale(1)}85%{opacity:1}100%{opacity:0}}.trae-browser-inspect-key-badge{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);padding:8px 20px;border-radius:8px;background-color:rgba(0,0,0,.8);color:#fff;font-size:18px;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,monospace;pointer-events:none;z-index:999999;animation:trae-browser-inspect-key-pop 500ms ease-out forwards;backdrop-filter:blur(4px);border:1px solid hsla(0,0%,100%,.15);box-shadow:0 4px 12px rgba(0,0,0,.3);letter-spacing:1px}@keyframes trae-browser-inspect-key-pop{0%{opacity:0;transform:translateX(-50%) translateY(10px) scale(0.9)}20%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-10px)}}.trae-browser-inspect-step-badge{position:fixed;top:12px;left:12px;padding:6px 12px;border-radius:6px;background-color:var(--vscode-icube-colorSuccessHover, #2FB287);color:#fff;font-size:12px;font-weight:600;pointer-events:none;z-index:999999;animation:trae-browser-inspect-step-slide 600ms ease-out forwards;box-shadow:0 2px 8px rgba(47,178,135,.3);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trae-browser-inspect-step-badge.trae-step-old{opacity:.4;transform:translateY(0)}@keyframes trae-browser-inspect-step-slide{0%{opacity:0;transform:translateX(-20px)}20%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(0)}}.trae-browser-inspect-drag-trail{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999998}.trae-browser-inspect-drag-trail svg{width:100%;height:100%}.trae-browser-inspect-drag-trail .trae-drag-path{fill:none;stroke:var(--vscode-icube-colorSuccessHover, #2FB287);stroke-width:2;stroke-dasharray:8 4;opacity:.6;animation:trae-browser-inspect-dash 600ms linear forwards}.trae-browser-inspect-drag-trail .trae-drag-dot{fill:var(--vscode-icube-colorSuccessHover, #2FB287);filter:drop-shadow(0 0 4px rgba(47, 178, 135, 0.6))}.trae-browser-inspect-drag-trail .trae-drag-endpoint{fill:none;stroke:var(--vscode-icube-colorSuccessHover, #2FB287);stroke-width:2;opacity:.5}@keyframes trae-browser-inspect-dash{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}.trae-browser-inspect-drag-trail.trae-drag-fade{animation:trae-browser-inspect-trail-fade 400ms ease-out forwards}@keyframes trae-browser-inspect-trail-fade{0%{opacity:1}100%{opacity:0}}</style><script type="module">(async () => {
|
||
try {
|
||
const client = await import('/@vite/client');
|
||
const hmr = client.createHotContext('hmr-handler/fake.js');
|
||
hmr.on('vite:afterUpdate', window['__ICUBE_WEBVIEW_HMR_CALLBACK_1785203968922']);
|
||
} catch {}
|
||
})();</script><style>.buttonsCard-bTXa5j {
|
||
padding: var(--spacer-4);
|
||
background: none;
|
||
align-items: center;
|
||
gap: 0;
|
||
display: inline-flex;
|
||
}
|
||
|
||
.actionButton-opZL8g {
|
||
align-items: center;
|
||
gap: var(--spacer-4);
|
||
padding: var(--spacer-4) var(--spacer-8);
|
||
border-radius: var(--radius-4);
|
||
cursor: pointer;
|
||
transition: background-color var(--transition-fast);
|
||
background: none;
|
||
border: none;
|
||
display: inline-flex;
|
||
}
|
||
|
||
.actionButton-opZL8g:hover {
|
||
background: var(--bg-bg-overlay-l2);
|
||
}
|
||
|
||
.actionButton-opZL8g:active {
|
||
background: var(--bg-bg-overlay-l3);
|
||
}
|
||
|
||
.actionButton-opZL8g:focus-visible {
|
||
outline: 2px solid var(--status-primary-default);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
.icon-ObJEMt {
|
||
width: 16px;
|
||
height: 16px;
|
||
color: var(--icon-icon-default);
|
||
flex-shrink: 0;
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: flex;
|
||
}
|
||
|
||
.title-GptGAg {
|
||
font-family: var(--font-family-default);
|
||
color: var(--text-text-default);
|
||
white-space: nowrap;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
line-height: 16px;
|
||
}
|
||
|
||
.shortcut-nbwTG4 {
|
||
color: var(--icon-icon-secondary);
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
gap: 2px;
|
||
display: flex;
|
||
}
|
||
|
||
.shortcutKey-EE6xrE {
|
||
font-family: var(--font-family-default);
|
||
color: var(--icon-icon-secondary);
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
line-height: 12px;
|
||
}
|
||
|
||
.divider-cFGVKQ {
|
||
box-sizing: content-box;
|
||
background-clip: content-box;
|
||
background-color: var(--border-border-neutral-l2);
|
||
flex-shrink: 0;
|
||
width: 1px;
|
||
height: 12px;
|
||
padding: 0 6px;
|
||
}
|
||
|
||
</style><style>.commentEditorCard-Un4Xaa {
|
||
width: 320px;
|
||
padding: var(--spacing-sm);
|
||
background: none;
|
||
flex-direction: column;
|
||
display: flex;
|
||
}
|
||
|
||
.textContainer-ZISwbW {
|
||
padding: var(--spacing-sm);
|
||
background: var(--bg-bg-overlay-l1);
|
||
border: 1px solid var(--border-border-neutral-l3);
|
||
border-radius: var(--radius-sm);
|
||
align-items: center;
|
||
gap: var(--spacing-sm);
|
||
padding-right: 0;
|
||
display: flex;
|
||
}
|
||
|
||
.textarea-ggj4j6 {
|
||
padding: 0 var(--spacing-sm) 0 2px;
|
||
font-family: var(--font-family-default);
|
||
color: var(--text-text-default);
|
||
resize: none;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: #56637726 transparent;
|
||
background: none;
|
||
border: none;
|
||
outline: none;
|
||
flex: 1;
|
||
max-height: 140px;
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
line-height: 20px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.textarea-ggj4j6::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.textarea-ggj4j6::-webkit-scrollbar-track {
|
||
background: none;
|
||
}
|
||
|
||
.textarea-ggj4j6::-webkit-scrollbar-thumb {
|
||
background: #56637726;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.textarea-ggj4j6::placeholder {
|
||
color: var(--text-text-tertiary);
|
||
}
|
||
|
||
.actionBar-u_t8vc {
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
gap: var(--spacing-xs);
|
||
opacity: 0;
|
||
max-height: 0;
|
||
transition: max-height .2s ease-out, opacity .2s ease-out, margin-top .2s ease-out;
|
||
display: flex;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.actionBarVisible-PxXsje {
|
||
opacity: 1;
|
||
max-height: 32px;
|
||
margin-top: var(--spacing-sm);
|
||
}
|
||
|
||
.actionBarNoExpandAnimation-FCra2J {
|
||
transition: opacity .2s ease-out;
|
||
}
|
||
|
||
.actionBarNoExpandAnimation-FCra2J.actionBarVisible-PxXsje {
|
||
max-height: 32px;
|
||
margin-top: var(--spacing-sm);
|
||
}
|
||
|
||
.cancelButton-Lu0me9 {
|
||
height: 24px;
|
||
padding: 0 var(--spacing-xs);
|
||
background: var(--bg-bg-overlay-l2);
|
||
border-radius: var(--radius-sm);
|
||
cursor: pointer;
|
||
transition: background-color var(--transition-fast);
|
||
border: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: flex;
|
||
}
|
||
|
||
.cancelButton-Lu0me9:hover, .cancelButton-Lu0me9:active {
|
||
background: var(--bg-bg-overlay-l3);
|
||
}
|
||
|
||
.cancelButton-Lu0me9:focus-visible {
|
||
outline: 2px solid var(--status-primary-default);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
.cancelText-j1RS1q {
|
||
font-family: var(--font-family-default);
|
||
color: var(--text-text-default);
|
||
white-space: nowrap;
|
||
padding: 0 var(--spacing-xs);
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
line-height: 16px;
|
||
}
|
||
|
||
.submitButton-BqyEd7 {
|
||
height: 24px;
|
||
padding: 0 var(--spacing-sm);
|
||
background: var(--bg-bg-invert);
|
||
border-radius: var(--radius-sm);
|
||
cursor: pointer;
|
||
transition: background-color var(--transition-fast);
|
||
border: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: flex;
|
||
}
|
||
|
||
.submitButton-BqyEd7:hover:not(:disabled) {
|
||
background: var(--bg-bg-invert-hover);
|
||
}
|
||
|
||
.submitButton-BqyEd7:active:not(:disabled) {
|
||
background: var(--bg-bg-invert-active);
|
||
}
|
||
|
||
.submitButton-BqyEd7:disabled {
|
||
background: var(--bg-bg-invert-disabled);
|
||
color: var(--text-text-disabled);
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.submitButton-BqyEd7:focus-visible {
|
||
outline: 2px solid var(--status-primary-default);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
.submitText-N58QRq {
|
||
font-family: var(--font-family-default);
|
||
color: var(--text-text-onaccent);
|
||
white-space: nowrap;
|
||
padding: 0 var(--spacing-xs);
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
line-height: 16px;
|
||
}
|
||
|
||
.submitButton-BqyEd7:disabled .submitText-N58QRq {
|
||
color: var(--text-text-disabled);
|
||
}
|
||
|
||
.submitIcon-vyKSKQ {
|
||
width: 12px;
|
||
height: 12px;
|
||
color: var(--icon-icon-onaccent);
|
||
flex-shrink: 0;
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: flex;
|
||
}
|
||
|
||
.submitButton-BqyEd7:disabled .submitIcon-vyKSKQ {
|
||
color: var(--text-text-disabled);
|
||
}
|
||
|
||
.limitWarning-Hocj0v {
|
||
align-items: center;
|
||
gap: var(--spacing-xs);
|
||
color: var(--status-warning-default);
|
||
user-select: none;
|
||
flex: 1;
|
||
display: flex;
|
||
}
|
||
|
||
.limitText-hBXEaq {
|
||
font-family: var(--font-family-default);
|
||
color: var(--status-warning-default);
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
line-height: 18px;
|
||
}
|
||
|
||
</style><style>.previewCommentCardContainer-HEkpU8 {
|
||
border-radius: var(--radius-8);
|
||
background: var(--bg-bg-menu);
|
||
border: 1px solid var(--border-border-neutral-l1);
|
||
transition: width .25s cubic-bezier(.4, 0, .2, 1), height .25s cubic-bezier(.4, 0, .2, 1);
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 6px #0003, 0 .5px #ffffff0f, inset 0 .5px #ffffff0f;
|
||
}
|
||
|
||
.previewCommentCardContent-ELaLah {
|
||
width: max-content;
|
||
position: relative;
|
||
}
|
||
|
||
.previewCommentCardFadeEnter-OMhMD9 {
|
||
opacity: 0;
|
||
}
|
||
|
||
.previewCommentCardFadeEnterActive-Eacuvn {
|
||
opacity: 1;
|
||
transition: opacity .2s ease-in;
|
||
}
|
||
|
||
.previewCommentCardFadeExit-ms9vgc {
|
||
opacity: 1;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.previewCommentCardFadeExitActive-vyQTsd {
|
||
opacity: 0;
|
||
transition: opacity .15s ease-out;
|
||
}
|
||
|
||
.previewCommentCardSuccessCard-PWnm2o {
|
||
white-space: nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 6px;
|
||
height: 32px;
|
||
padding: 0 12px;
|
||
display: flex;
|
||
}
|
||
|
||
.previewCommentCardSuccessIcon-Oht9Ir {
|
||
width: 16px;
|
||
height: 16px;
|
||
color: var(--status-success-default);
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: flex;
|
||
}
|
||
|
||
.previewCommentCardSuccessText-s40BWG {
|
||
font-family: var(--font-family-default);
|
||
color: var(--text-text-default);
|
||
user-select: none;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
line-height: 18px;
|
||
}
|
||
|
||
</style><style id="icube-theme-variables">:root {--vscode-foreground: #d1d3db;--vscode-disabledForeground: #666b75;--vscode-errorForeground: #cc4b53;--vscode-descriptionForeground: #9599a6;--vscode-icon-foreground: #9599a6;--vscode-focusBorder: rgba(0, 0, 0, 0);--vscode-textLink-foreground: #dadde5;--vscode-textLink-activeForeground: #979aa4;--vscode-textSeparator-foreground: rgba(255, 255, 255, 0.18);--vscode-textPreformat-foreground: #d7ba7d;--vscode-textPreformat-background: rgba(255, 255, 255, 0.1);--vscode-textBlockQuote-background: #222222;--vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5);--vscode-textCodeBlock-background: rgba(10, 10, 10, 0.4);--vscode-sash-hoverBorder: #32f08c;--vscode-badge-background: #4d4d4d;--vscode-badge-foreground: #ffffff;--vscode-activityWarningBadge-foreground: #ffffff;--vscode-activityWarningBadge-background: #b27c00;--vscode-activityErrorBadge-foreground: #000000;--vscode-activityErrorBadge-background: #f14c4c;--vscode-scrollbar-shadow: #000000;--vscode-scrollbarSlider-background: rgba(121, 121, 121, 0.4);--vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);--vscode-scrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);--vscode-progressBar-background: #387bff;--vscode-chart-line: #236b8e;--vscode-chart-axis: rgba(191, 191, 191, 0.4);--vscode-chart-guide: rgba(191, 191, 191, 0.2);--vscode-editor-background: #1a1b1d;--vscode-editor-foreground: #d1d3db;--vscode-editorStickyScroll-background: #1a1b1d;--vscode-editorStickyScrollGutter-background: #1a1b1d;--vscode-editorStickyScrollHover-background: #292c34;--vscode-editorStickyScroll-shadow: #000000;--vscode-editorWidget-background: #252526;--vscode-editorWidget-foreground: #d1d3db;--vscode-editorWidget-border: #454545;--vscode-editorError-foreground: #f14c4c;--vscode-editorWarning-foreground: #cca700;--vscode-editorInfo-foreground: #59a4f9;--vscode-editorHint-foreground: rgba(238, 238, 238, 0.7);--vscode-editorLink-activeForeground: #387bff;--vscode-editor-selectionBackground: rgba(53, 121, 255, 0.28);--vscode-editor-inactiveSelectionBackground: #3a3d41;--vscode-editor-selectionHighlightBackground: rgba(173, 214, 255, 0.15);--vscode-editor-compositionBorder: #ffffff;--vscode-editor-findMatchBackground: #515c6a;--vscode-editor-findMatchHighlightBackground: rgba(218, 221, 229, 0.32);--vscode-editor-findRangeHighlightBackground: rgba(58, 61, 65, 0.4);--vscode-editor-hoverHighlightBackground: rgba(38, 79, 120, 0.25);--vscode-editorHoverWidget-background: #252526;--vscode-editorHoverWidget-foreground: #d1d3db;--vscode-editorHoverWidget-border: #454545;--vscode-editorHoverWidget-statusBarBackground: #2c2c2d;--vscode-editorInlayHint-foreground: #969696;--vscode-editorInlayHint-background: rgba(77, 77, 77, 0.1);--vscode-editorInlayHint-typeForeground: #969696;--vscode-editorInlayHint-typeBackground: rgba(77, 77, 77, 0.1);--vscode-editorInlayHint-parameterForeground: #969696;--vscode-editorInlayHint-parameterBackground: rgba(77, 77, 77, 0.1);--vscode-editorLightBulb-foreground: #ffcc00;--vscode-editorLightBulbAutoFix-foreground: #75beff;--vscode-editorLightBulbAi-foreground: #ffcc00;--vscode-editor-snippetTabstopHighlightBackground: rgba(124, 124, 124, 0.3);--vscode-editor-snippetFinalTabstopHighlightBorder: #525252;--vscode-diffEditor-insertedTextBackground: rgba(0, 165, 110, 0.28);--vscode-diffEditor-removedTextBackground: rgba(208, 42, 35, 0.28);--vscode-diffEditor-insertedLineBackground: rgba(0, 165, 110, 0.28);--vscode-diffEditor-removedLineBackground: rgba(208, 42, 35, 0.28);--vscode-diffEditor-diagonalFill: rgba(204, 204, 204, 0.2);--vscode-diffEditor-unchangedRegionBackground: #1a1b1d;--vscode-diffEditor-unchangedRegionForeground: #d1d3db;--vscode-diffEditor-unchangedCodeBackground: rgba(116, 116, 116, 0.16);--vscode-widget-shadow: rgba(0, 0, 0, 0.16);--vscode-widget-border: #303031;--vscode-toolbar-hoverBackground: rgba(224, 226, 242, 0.05);--vscode-toolbar-activeBackground: rgba(224, 226, 242, 0.08);--vscode-breadcrumb-foreground: rgba(209, 211, 219, 0.8);--vscode-breadcrumb-background: #1a1b1d;--vscode-breadcrumb-focusForeground: #e9eaee;--vscode-breadcrumb-activeSelectionForeground: #e9eaee;--vscode-breadcrumbPicker-background: #2a2d31;--vscode-merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);--vscode-merge-currentContentBackground: rgba(64, 200, 174, 0.2);--vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);--vscode-merge-incomingContentBackground: rgba(64, 166, 255, 0.2);--vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);--vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16);--vscode-editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5);--vscode-editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5);--vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);--vscode-editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);--vscode-editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8);--vscode-problemsErrorIcon-foreground: #f14c4c;--vscode-problemsWarningIcon-foreground: #cca700;--vscode-problemsInfoIcon-foreground: #59a4f9;--vscode-minimap-findMatchHighlight: #d18616;--vscode-minimap-selectionOccurrenceHighlight: #676767;--vscode-minimap-selectionHighlight: #264f78;--vscode-minimap-infoHighlight: #59a4f9;--vscode-minimap-warningHighlight: #cca700;--vscode-minimap-errorHighlight: rgba(255, 18, 18, 0.7);--vscode-minimap-foregroundOpacity: #000000;--vscode-minimapSlider-background: rgba(121, 121, 121, 0.2);--vscode-minimapSlider-hoverBackground: rgba(100, 100, 100, 0.35);--vscode-minimapSlider-activeBackground: rgba(191, 191, 191, 0.2);--vscode-charts-foreground: #d1d3db;--vscode-charts-lines: rgba(209, 211, 219, 0.5);--vscode-charts-red: #f14c4c;--vscode-charts-blue: #59a4f9;--vscode-charts-yellow: #cca700;--vscode-charts-orange: #d18616;--vscode-charts-green: #89d185;--vscode-charts-purple: #b180d7;--vscode-input-background: rgba(224, 226, 242, 0.03);--vscode-input-foreground: #d1d3db;--vscode-inputOption-activeBorder: rgba(224, 226, 242, 0.18);--vscode-inputOption-hoverBackground: rgba(90, 93, 94, 0.5);--vscode-inputOption-activeBackground: rgba(0, 0, 0, 0);--vscode-inputOption-activeForeground: #ffffff;--vscode-input-placeholderForeground: #9599a6;--vscode-inputValidation-infoBackground: #063b49;--vscode-inputValidation-infoBorder: #007acc;--vscode-inputValidation-warningBackground: #352a05;--vscode-inputValidation-warningBorder: #dc8730;--vscode-inputValidation-errorBackground: #5a1d1d;--vscode-inputValidation-errorBorder: #f65a5a;--vscode-dropdown-background: #3c3c3c;--vscode-dropdown-foreground: #f0f0f0;--vscode-dropdown-border: #3c3c3c;--vscode-button-foreground: #000000;--vscode-button-separator: rgba(13, 14, 15, 0.18);--vscode-button-background: #d1d3db;--vscode-button-hoverBackground: #edeff2;--vscode-button-secondaryForeground: #ffffff;--vscode-button-secondaryBackground: #3a3d41;--vscode-button-secondaryHoverBackground: #45494e;--vscode-radio-activeForeground: #ffffff;--vscode-radio-activeBackground: rgba(0, 0, 0, 0);--vscode-radio-activeBorder: rgba(224, 226, 242, 0.18);--vscode-radio-inactiveBorder: rgba(255, 255, 255, 0.2);--vscode-radio-inactiveHoverBackground: rgba(90, 93, 94, 0.5);--vscode-checkbox-background: #3c3c3c;--vscode-checkbox-selectBackground: #252526;--vscode-checkbox-foreground: #f0f0f0;--vscode-checkbox-border: #6b6b6b;--vscode-checkbox-selectBorder: #9599a6;--vscode-checkbox-disabled.background: #777777;--vscode-checkbox-disabled.foreground: #b4b4b4;--vscode-keybindingLabel-background: rgba(128, 128, 128, 0.17);--vscode-keybindingLabel-foreground: #cccccc;--vscode-keybindingLabel-border: rgba(51, 51, 51, 0.6);--vscode-keybindingLabel-bottomBorder: rgba(68, 68, 68, 0.6);--vscode-list-focusOutline: rgba(0, 0, 0, 0);--vscode-list-activeSelectionBackground: rgba(224, 226, 242, 0.08);--vscode-list-activeSelectionForeground: #f5f9fe;--vscode-list-activeSelectionIconForeground: #ffffff;--vscode-list-inactiveSelectionBackground: rgba(224, 226, 242, 0.05);--vscode-list-inactiveSelectionForeground: #f5f9fe;--vscode-list-hoverBackground: rgba(224, 226, 242, 0.05);--vscode-list-dropBackground: rgba(53, 121, 255, 0.2);--vscode-list-dropBetweenBackground: #9599a6;--vscode-list-highlightForeground: #dadde5;--vscode-list-focusHighlightForeground: #dadde5;--vscode-list-invalidItemForeground: #b89500;--vscode-list-errorForeground: #cc4b53;--vscode-list-warningForeground: #cca700;--vscode-listFilterWidget-background: #222427;--vscode-listFilterWidget-outline: rgba(0, 0, 0, 0);--vscode-listFilterWidget-noMatchesOutline: #be1100;--vscode-listFilterWidget-shadow: rgba(0, 0, 0, 0.16);--vscode-list-filterMatchBackground: rgba(218, 221, 229, 0.32);--vscode-list-deemphasizedForeground: #8c8c8c;--vscode-tree-indentGuidesStroke: rgba(224, 226, 242, 0.09);--vscode-tree-inactiveIndentGuidesStroke: rgba(221, 226, 233, 0.08);--vscode-tree-tableColumnsBorder: rgba(204, 204, 204, 0.13);--vscode-tree-tableOddRowsBackground: rgba(209, 211, 219, 0.04);--vscode-editorActionList-background: #252526;--vscode-editorActionList-foreground: #d1d3db;--vscode-editorActionList-focusForeground: #f5f9fe;--vscode-editorActionList-focusBackground: rgba(224, 226, 242, 0.08);--vscode-menu-border: rgba(224, 226, 242, 0.09);--vscode-menu-foreground: #d1d3db;--vscode-menu-background: #2a2d31;--vscode-menu-selectionForeground: #f5f9fe;--vscode-menu-selectionBackground: rgba(224, 226, 242, 0.08);--vscode-menu-separatorBackground: rgba(224, 226, 242, 0.09);--vscode-quickInput-background: #202123;--vscode-quickInput-foreground: #d1d3db;--vscode-quickInputTitle-background: #222427;--vscode-pickerGroup-foreground: #d1d3db;--vscode-pickerGroup-border: rgba(224, 226, 242, 0.09);--vscode-quickInputList-focusForeground: #f5f9fe;--vscode-quickInputList-focusIconForeground: #ffffff;--vscode-quickInputList-focusBackground: rgba(224, 226, 242, 0.08);--vscode-search-resultsInfoForeground: #9599a6;--vscode-searchEditor-findMatchBackground: rgba(218, 221, 229, 0.21);--vscode-tab-activeBackground: rgba(224, 226, 242, 0.05);--vscode-tab-unfocusedActiveBackground: rgba(224, 226, 242, 0.05);--vscode-tab-inactiveBackground: #17191a;--vscode-tab-unfocusedInactiveBackground: #17191a;--vscode-tab-activeForeground: #f5f9fe;--vscode-tab-inactiveForeground: #9599a6;--vscode-tab-unfocusedActiveForeground: #d1d3db;--vscode-tab-unfocusedInactiveForeground: rgba(149, 153, 166, 0.5);--vscode-tab-border: rgba(224, 226, 242, 0.09);--vscode-tab-lastPinnedBorder: rgba(204, 204, 204, 0.2);--vscode-tab-activeBorder: #1a1b1d;--vscode-tab-unfocusedActiveBorder: rgba(26, 27, 29, 0.5);--vscode-tab-activeBorderTop: #ffffff;--vscode-tab-unfocusedActiveBorderTop: rgba(255, 255, 255, 0.5);--vscode-tab-selectedBorderTop: #ffffff;--vscode-tab-selectedBackground: #222222;--vscode-tab-selectedForeground: rgba(255, 255, 255, 0.63);--vscode-tab-dragAndDropBorder: #f5f9fe;--vscode-tab-activeModifiedBorder: #3399cc;--vscode-tab-inactiveModifiedBorder: rgba(51, 153, 204, 0.5);--vscode-tab-unfocusedActiveModifiedBorder: rgba(51, 153, 204, 0.5);--vscode-tab-unfocusedInactiveModifiedBorder: rgba(51, 153, 204, 0.25);--vscode-editorPane-background: #1a1b1d;--vscode-editorGroupHeader-tabsBackground: #17191a;--vscode-editorGroupHeader-tabsBorder: rgba(224, 226, 242, 0.09);--vscode-editorGroupHeader-noTabsBackground: #1a1b1d;--vscode-editorGroup-border: #444444;--vscode-editorGroup-dropBackground: rgba(53, 121, 255, 0.2);--vscode-editorGroup-dropIntoPromptForeground: #d1d3db;--vscode-editorGroup-dropIntoPromptBackground: #252526;--vscode-sideBySideEditor-horizontalBorder: #444444;--vscode-sideBySideEditor-verticalBorder: #444444;--vscode-panel-background: #1a1b1d;--vscode-panel-border: rgba(128, 128, 128, 0.35);--vscode-panelTitle-activeForeground: #f5f9fe;--vscode-panelTitle-inactiveForeground: #9599a6;--vscode-panelTitle-activeBorder: #f5f9fe;--vscode-panel-dropBorder: #f5f9fe;--vscode-panelSection-dropBackground: rgba(53, 121, 255, 0.2);--vscode-panelSectionHeader-background: rgba(128, 128, 128, 0.2);--vscode-panelSectionHeader-foreground: #f5f9fe;--vscode-panelSectionHeader-border: rgba(224, 226, 242, 0.13);--vscode-panelSection-border: rgba(128, 128, 128, 0.35);--vscode-panelStickyScroll-background: #1a1b1d;--vscode-panelStickyScroll-shadow: #000000;--vscode-banner-background: rgba(224, 226, 242, 0.08);--vscode-banner-foreground: #f5f9fe;--vscode-banner-iconForeground: #59a4f9;--vscode-statusBar-foreground: #ffffff;--vscode-statusBar-noFolderForeground: #ffffff;--vscode-statusBar-background: rgba(0, 0, 0, 0);--vscode-statusBar-noFolderBackground: rgba(0, 0, 0, 0);--vscode-statusBar-focusBorder: #ffffff;--vscode-statusBarItem-activeBackground: rgba(255, 255, 255, 0.18);--vscode-statusBarItem-focusBorder: #ffffff;--vscode-statusBarItem-hoverBackground: rgba(255, 255, 255, 0.12);--vscode-statusBarItem-hoverForeground: #ffffff;--vscode-statusBarItem-compactHoverBackground: rgba(255, 255, 255, 0.12);--vscode-statusBarItem-prominentForeground: #ffffff;--vscode-statusBarItem-prominentBackground: rgba(0, 0, 0, 0.5);--vscode-statusBarItem-prominentHoverForeground: #ffffff;--vscode-statusBarItem-prominentHoverBackground: rgba(255, 255, 255, 0.12);--vscode-statusBarItem-errorBackground: #82252b;--vscode-statusBarItem-errorForeground: #ffffff;--vscode-statusBarItem-errorHoverForeground: #ffffff;--vscode-statusBarItem-errorHoverBackground: rgba(255, 255, 255, 0.12);--vscode-statusBarItem-warningBackground: #7a6400;--vscode-statusBarItem-warningForeground: #ffffff;--vscode-statusBarItem-warningHoverForeground: #ffffff;--vscode-statusBarItem-warningHoverBackground: rgba(255, 255, 255, 0.12);--vscode-activityBar-background: #222427;--vscode-activityBar-foreground: #f5f9fe;--vscode-activityBar-inactiveForeground: #9599a6;--vscode-activityBar-activeBorder: #f5f9fe;--vscode-activityBar-dropBorder: #f5f9fe;--vscode-activityBarBadge-background: #387bff;--vscode-activityBarBadge-foreground: #ffffff;--vscode-activityBarTop-foreground: #e7e7e7;--vscode-activityBarTop-activeBorder: #e7e7e7;--vscode-activityBarTop-inactiveForeground: rgba(231, 231, 231, 0.6);--vscode-activityBarTop-dropBorder: #e7e7e7;--vscode-profileBadge-background: #4d4d4d;--vscode-profileBadge-foreground: #ffffff;--vscode-statusBarItem-remoteBackground: #16825d;--vscode-statusBarItem-remoteForeground: #ffffff;--vscode-statusBarItem-remoteHoverForeground: #ffffff;--vscode-statusBarItem-remoteHoverBackground: rgba(255, 255, 255, 0.12);--vscode-statusBarItem-offlineBackground: #6c1717;--vscode-statusBarItem-offlineForeground: #ffffff;--vscode-statusBarItem-offlineHoverForeground: #ffffff;--vscode-statusBarItem-offlineHoverBackground: rgba(255, 255, 255, 0.12);--vscode-extensionBadge-remoteBackground: #387bff;--vscode-extensionBadge-remoteForeground: #ffffff;--vscode-sideBar-background: #1a1b1d;--vscode-sideBarTitle-background: #1a1b1d;--vscode-sideBarTitle-foreground: #bbbbbb;--vscode-sideBar-dropBackground: rgba(53, 121, 255, 0.2);--vscode-sideBarSectionHeader-background: #1a1b1d;--vscode-sideBarSectionHeader-foreground: #d1d3db;--vscode-sideBarSectionHeader-border: rgba(224, 226, 242, 0.13);--vscode-sideBarActivityBarTop-border: rgba(224, 226, 242, 0.13);--vscode-sideBarStickyScroll-background: #1a1b1d;--vscode-sideBarStickyScroll-shadow: #000000;--vscode-titleBar-activeForeground: #9599a6;--vscode-titleBar-inactiveForeground: rgba(149, 153, 166, 0.6);--vscode-titleBar-activeBackground: #222427;--vscode-titleBar-inactiveBackground: #222427;--vscode-menubar-selectionForeground: #9599a6;--vscode-menubar-selectionBackground: rgba(224, 226, 242, 0.05);--vscode-commandCenter-foreground: #9599a6;--vscode-commandCenter-activeForeground: #9599a6;--vscode-commandCenter-inactiveForeground: rgba(149, 153, 166, 0.6);--vscode-commandCenter-background: rgba(255, 255, 255, 0.05);--vscode-commandCenter-activeBackground: rgba(255, 255, 255, 0.08);--vscode-commandCenter-border: rgba(149, 153, 166, 0.2);--vscode-commandCenter-activeBorder: rgba(149, 153, 166, 0.3);--vscode-commandCenter-inactiveBorder: rgba(149, 153, 166, 0.15);--vscode-notificationCenter-border: #303031;--vscode-notificationToast-border: #303031;--vscode-notifications-foreground: #d1d3db;--vscode-notifications-background: #2a2d31;--vscode-notificationLink-foreground: #dadde5;--vscode-notificationCenterHeader-background: #363a3f;--vscode-notifications-border: #363a3f;--vscode-notificationsErrorIcon-foreground: #f65a5a;--vscode-notificationsWarningIcon-foreground: #dc8730;--vscode-notificationsInfoIcon-foreground: #387bff;--vscode-icube-colorSnow: #ffffff;--vscode-icube-colorBlack: #000000;--vscode-icube-colorSnowDisable: rgba(255, 255, 255, 0.3);--vscode-icube-modalOverlay: rgba(0, 0, 0, 0.4);--vscode-icube-colorBg1: #1a1b1d;--vscode-icube-colorBg2: #222427;--vscode-icube-colorBg3: #2a2d31;--vscode-icube-colorBg4: #262626;--vscode-icube-diffColorBg3: rgba(40, 42, 46, 0.35);--vscode-icube-colorBgCode: #1a1b1d;--vscode-icube-colorBgTr0: rgba(224, 226, 242, 0.03);--vscode-icube-colorBtnHover: rgba(224, 226, 242, 0.05);--vscode-icube-colorBg5: rgba(194, 202, 242, 0.1);--vscode-icube-colorBtnHover2: rgba(224, 226, 242, 0.08);--vscode-icube-colorBtnTransparent3: rgba(224, 226, 242, 0.12);--vscode-icube-colorBlend: rgba(194, 202, 242, 0.15);--vscode-icube-colorTransparent: rgba(255, 255, 255, 0);--vscode-icube-colorWidgetShadow: rgba(0, 0, 0, 0.16);--vscode-icube-colorWidgetShadow2: rgba(0, 0, 0, 0.16);--vscode-icube-colorWidgetShadow3: rgba(0, 0, 0, 0.2);--vscode-icube-colorDefaultText: #d1d3db;--vscode-icube-colorHighlightText: #f5f9fe;--vscode-icube-colorGrayText: #9599a6;--vscode-icube-colorGrayText2: #737780;--vscode-icube-colorDisableText: #666b75;--vscode-icube-colorBlackText: #111314;--vscode-icube-colorBlackText1: #000000;--vscode-icube-colorBlackText2: #ffffff;--vscode-icube-colorDefaultAvatar: #dadde6;--vscode-icube-colorDefaultAvatarBackground: #24262b;--vscode-icube-modalLayoutBg: rgba(0, 0, 0, 0.4);--vscode-icube-colorIcon: #8d93a6;--vscode-icube-colorCodeCodeInstruction: #f0d8ff;--vscode-icube-colorLine1: rgba(224, 226, 242, 0.09);--vscode-icube-colorLine2: rgba(224, 226, 242, 0.13);--vscode-icube-colorLine3: rgba(224, 226, 242, 0.18);--vscode-icube-colorBrand: #dadde5;--vscode-icube-colorBrandHover: #edeff2;--vscode-icube-colorBrandActive: #979aa4;--vscode-icube-colorBrandTransparent: rgba(224, 226, 242, 0.05);--vscode-icube-colorBrandTransparent2: rgba(224, 226, 242, 0.08);--vscode-icube-colorBrandTransparent3: rgba(224, 226, 242, 0.12);--vscode-icube-colorStatusRegular: #387bff;--vscode-icube-colorStatusRegularHover: #4c88ff;--vscode-icube-colorStatusRegularActive: #1759dd;--vscode-icube-colorStatusRegularTransparent: rgba(53, 121, 255, 0.18);--vscode-icube-colorStatusRegularTransparent2: rgba(53, 121, 255, 0.28);--vscode-icube-colorStatusRegularTransparent3: rgba(53, 121, 255, 0.36);--vscode-icube-colorSuccess: #33c192;--vscode-icube-colorSuccessHover: #5ed4ad;--vscode-icube-colorSuccessActive: #27b082;--vscode-icube-colorSuccessTransparent: rgba(0, 165, 110, 0.18);--vscode-icube-colorSuccessTransparent2: rgba(0, 165, 110, 0.28);--vscode-icube-colorSuccessTransparent3: rgba(0, 165, 110, 0.36);--vscode-icube-colorError: #f65a5a;--vscode-icube-colorErrorHover: #f86262;--vscode-icube-colorErrorActive: #ad2020;--vscode-icube-colorErrorTransparent: rgba(208, 42, 35, 0.18);--vscode-icube-colorErrorTransparent2: rgba(208, 42, 35, 0.28);--vscode-icube-colorErrorTransparent3: rgba(208, 42, 35, 0.36);--vscode-icube-colorWarning: #dc8730;--vscode-icube-colorWarningHover: #f1a03f;--vscode-icube-colorWarningActive: #c0701d;--vscode-icube-colorWarningTransparent: rgba(220, 135, 48, 0.16);--vscode-icube-colorWarningTransparent2: rgba(220, 135, 48, 0.28);--vscode-icube-colorWarningTransparent3: rgba(220, 135, 48, 0.36);--vscode-icube-colorAlert: #c2a857;--vscode-icube-colorAlertHover: #deb245;--vscode-icube-colorAlertActive: #ab9220;--vscode-icube-colorAlertTransparent: rgba(194, 168, 87, 0.16);--vscode-icube-colorAlertTransparent2: rgba(194, 168, 87, 0.28);--vscode-icube-colorAlertTransparent3: rgba(194, 168, 87, 0.36);--vscode-icube-colorErrorTm1: rgba(204, 75, 83, 0.2);--vscode-icube-colorErrorTr1: rgba(208, 42, 35, 0.18);--vscode-icube-colorSpinLoading: #2f74ff;--vscode-icube-colorC1: #2dd288;--vscode-icube-colorC2: #ff9392;--vscode-icube-colorC3: #dcb364;--vscode-icube-colorC4: #8acb3a;--vscode-icube-colorC5: #04cbe5;--vscode-icube-colorC6: #7bb8ff;--vscode-icube-colorC7: #ec93ff;--vscode-icube-colorC8: #bfa5ff;--vscode-icube-colorC9: #afb9cf;--vscode-icube-colorDiffToggleBtnBg: #8d7aff;--vscode-icube-textPreformatBackground: #9d89eb;--vscode-icube-colorRed1: rgba(221, 55, 48, 0.5);--vscode-icube-colorRed2: rgba(221, 55, 48, 0.1);--vscode-icube-colorRed3: #dd3730;--vscode-icube-colorGreen1: #016a51;--vscode-icube-colorDiffBtn1: #ffffff;--vscode-icube-diffInsertedTextBackground: rgba(38, 165, 123, 0.32);--vscode-icube-colorChatError: rgba(221, 55, 48, 0.5);--vscode-icube-chatIconBg1: #ffffff;--vscode-icube-chatIconColor1: #ff4a36;--vscode-icube-emptyExplorerButtonBgColor: rgba(194, 202, 242, 0.1);--vscode-icube-emptyExplorerButtonTextColor: #dadde5;--vscode-icube-emptyExplorerSplitTextColor: #737780;--vscode-icube-emptyExplorerSplitColor: rgba(221, 226, 233, 0.16);--vscode-icube-lite.colorBg1: #25252d;--vscode-icube-lite.colorBg2: #1d1c23;--vscode-icube-lite.colorLine1: #2e2e38;--vscode-widget-shadow1: rgba(0, 0, 0, 0.16);--vscode-widget-shadow2: rgba(0, 0, 0, 0.1);--vscode-widget-light.shadow1: rgba(0, 0, 0, 0.04);--vscode-widget-light.shadow2: rgba(0, 0, 0, 0.08);--vscode-icube-tooltipsTextColor: #181a1f;--vscode-icube-ai.disableInputBorderColor: rgba(194, 202, 242, 0.24);--vscode-icube-scrollbarBgColor: rgba(221, 226, 233, 0.25);--vscode-icube-scrollbarHoverBgColor: rgba(221, 226, 233, 0.35);--vscode-icube-desktopEmptyWorkspaceIconBg: rgba(194, 202, 242, 0.1);--vscode-icube-desktopEmptyWorkspaceHoverBg: rgba(194, 202, 242, 0.15);--vscode-icube--code-code-text: #e0e3ee;--vscode-icube-primaryButtonBackground: #d1d3db;--vscode-icube-primaryButtonForeground: #000000;--vscode-icube-primaryButtonHoverBackground: #edeff2;--vscode-icube-primaryButtonHoverForeground: #000000;--vscode-icube-primaryButtonActivateBackground: #979aa4;--vscode-icube-primaryButtonActivateForeground: #000000;--vscode-icube-primaryButtonDisableBackground: #666b75;--vscode-icube-primaryButtonDisableForeground: #000000;--vscode-icube-defaultButtonBackground: rgba(224, 226, 242, 0.05);--vscode-icube-defaultButtonForeground: #d1d3db;--vscode-icube-defaultButtonHoverBackground: rgba(224, 226, 242, 0.08);--vscode-icube-defaultButtonHoverForeground: #d1d3db;--vscode-icube-defaultButtonActivateBackground: rgba(224, 226, 242, 0.12);--vscode-icube-defaultButtonActivateForeground: #d1d3db;--vscode-icube-defaultButtonDisableBackground: rgba(224, 226, 242, 0.08);--vscode-icube-defaultButtonDisableForeground: #666b75;--vscode-icube-checkboxBorder: #d1d3db;--vscode-icube-checkboxBackground: #d1d3db;--vscode-icube-checkboxDisabledBackground: #666b75;--vscode-icube-checkboxForeground: #000000;--vscode-icube-checkboxUncheckedBorder: rgba(224, 226, 242, 0.18);--vscode-icube-checkboxUncheckedBackground: #1a1b1d;--vscode-icube-badgeBackground: #387bff;--vscode-icube-badgeForeground: #ffffff;--vscode-icube-colorBgTr1: rgba(224, 226, 242, 0.05);--vscode-icube-colorBgTr2: rgba(224, 226, 242, 0.08);--vscode-icube-colorBgTr3: rgba(224, 226, 242, 0.12);--vscode-icube-colorTextDefault: #d1d3db;--vscode-icube-colorTextHighlight: #f5f9fe;--vscode-icube-colorTextGray: #9599a6;--vscode-icube-colorTextDisable: #666b75;--vscode-icube-colorBrandTr1: rgba(224, 226, 242, 0.05);--vscode-icube-colorBrandTr2: rgba(224, 226, 242, 0.08);--vscode-icube-colorBrandTr3: rgba(224, 226, 242, 0.12);--vscode-icube-colorSuccessTr1: rgba(0, 165, 110, 0.18);--vscode-icube-colorSuccessTr2: rgba(0, 165, 110, 0.28);--vscode-icube-colorSuccessTr3: rgba(0, 165, 110, 0.36);--vscode-icube-colorErrorTr2: rgba(208, 42, 35, 0.28);--vscode-icube-colorErrorTr3: rgba(208, 42, 35, 0.36);--vscode-icube-colorWarningTr1: rgba(220, 135, 48, 0.16);--vscode-icube-colorWarningTr2: rgba(220, 135, 48, 0.28);--vscode-icube-colorWarningTr3: rgba(220, 135, 48, 0.36);--vscode-icube-colorAlertTr1: rgba(194, 168, 87, 0.16);--vscode-icube-colorAlertTr2: rgba(194, 168, 87, 0.28);--vscode-icube-colorAlertTr3: rgba(194, 168, 87, 0.36);--vscode-icube-colorTextButtonHighlight: #f5f9fe;--vscode-icube--special-white: #ffffff;--vscode-icube--special-black: #000000;--vscode-icube--bg-bg-base-default: #1a1b1d;--vscode-icube--bg-bg-tooltip: #1a1b1d;--vscode-icube--bg-bg-base-secondary: #222427;--vscode-icube--bg-bg-base-tertiary: #2a2d31;--vscode-icube--bg-bg-overlay-l1: rgba(224, 226, 242, 0.03);--vscode-icube--bg-bg-overlay-l2: rgba(224, 226, 242, 0.05);--vscode-icube--bg-bg-overlay-l3: rgba(224, 226, 242, 0.08);--vscode-icube--bg-bg-overlay-l4: rgba(224, 226, 242, 0.12);--vscode-icube--border-border-neutral-l1: rgba(224, 226, 242, 0.09);--vscode-icube--border-border-neutral-l2: rgba(224, 226, 242, 0.13);--vscode-icube--border-border-neutral-l3: rgba(224, 226, 242, 0.18);--vscode-icube--text-text-default-hover: #f5f9fe;--vscode-icube--text-text-default-active: #f5f9fe;--vscode-icube--icon-icon-default-hover: #f5f9fe;--vscode-icube--icon-icon-default-active: #f5f9fe;--vscode-icube--text-text-default: #d1d3db;--vscode-icube--text-text-secondary-hover: #d1d3db;--vscode-icube--text-text-secondary-active: #d1d3db;--vscode-icube--icon-icon-default: #d1d3db;--vscode-icube--icon-icon-secondary-hover: #d1d3db;--vscode-icube--icon-icon-secondary-active: #d1d3db;--vscode-icube--text-text-secondary: #9599a6;--vscode-icube--icon-icon-secondary: #9599a6;--vscode-icube--text-text-tertiary: #666b75;--vscode-icube--text-text-disabled: #666b75;--vscode-icube--icon-icon-tertiary: #666b75;--vscode-icube--icon-icon-disabled: #666b75;--vscode-icube--status-primary-default: #387bff;--vscode-icube--status-primary-hover: #4c88ff;--vscode-icube--status-primary-active: #1759dd;--vscode-icube--status-primary-surface-l1: rgba(53, 121, 255, 0.18);--vscode-icube--status-primary-surface-l2: rgba(53, 121, 255, 0.28);--vscode-icube--status-primary-surface-l3: rgba(53, 121, 255, 0.36);--vscode-icube--status-success-default: #33c192;--vscode-icube--status-success-hover: #5ed4ad;--vscode-icube--status-success-active: #27b082;--vscode-icube--status-success-surface-l1: rgba(0, 165, 110, 0.18);--vscode-icube--status-success-surface-l2: rgba(0, 165, 110, 0.28);--vscode-icube--status-success-surface-l3: rgba(0, 165, 110, 0.36);--vscode-icube--status-alert-default: #c2a857;--vscode-icube--status-alert-hover: #deb245;--vscode-icube--status-alert-active: #ab9220;--vscode-icube--status-alert-surface-l1: rgba(194, 168, 87, 0.16);--vscode-icube--status-alert-surface-l2: rgba(194, 168, 87, 0.28);--vscode-icube--status-alert-surface-l3: rgba(194, 168, 87, 0.36);--vscode-icube--status-warning-default: #dc8730;--vscode-icube--status-warning-hover: #f1a03f;--vscode-icube--status-warning-active: #c0701d;--vscode-icube--status-warning-surface-l1: rgba(220, 135, 48, 0.16);--vscode-icube--status-warning-surface-l2: rgba(220, 135, 48, 0.28);--vscode-icube--status-warning-surface-l3: rgba(220, 135, 48, 0.36);--vscode-icube--status-error-default: #f65a5a;--vscode-icube--status-error-hover: #f86262;--vscode-icube--status-error-active: #ad2020;--vscode-icube--status-error-surface-l1: rgba(208, 42, 35, 0.18);--vscode-icube--status-error-surface-l2: rgba(208, 42, 35, 0.28);--vscode-icube--status-error-surface-l3: rgba(208, 42, 35, 0.36);--vscode-icube--bg-bg-invert: #dadde5;--vscode-icube--bg-bg-invert-hover: #edeff2;--vscode-icube--bg-bg-invert-active: #979aa4;--vscode-icube--bg-bg-invert-disabled: rgba(224, 226, 242, 0.12);--vscode-icube--accent-accent-teal: #2dd288;--vscode-icube--accent-accent-coral: #ff9392;--vscode-icube--accent-accent-amber: #dcb364;--vscode-icube--accent-accent-lime: #8acb3a;--vscode-icube--accent-accent-cyan: #04cbe5;--vscode-icube--accent-accent-blue: #7bb8ff;--vscode-icube--accent-accent-magenta: #ec93ff;--vscode-icube--accent-accent-violet: #bfa5ff;--vscode-icube--accent-accent-slate: #afb9cf;--vscode-icube--bg-bg-menu: #202123;--vscode-icube--bg-bg-menu-tr0: rgba(42, 45, 49, 0);--vscode-icube--bg-bg-brand: #32f08c;--vscode-icube--bg-bg-brand-hover: #0fdc78;--vscode-icube--bg-bg-brand-disabled: rgba(50, 240, 140, 0.2);--vscode-icube--border-border-contrast: #ffffff;--vscode-icube--border-border-brand: #32f08c;--vscode-icube--text-text-brand: #32f08c;--vscode-icube--icon-icon-brand: #32f08c;--vscode-icube--text-text-brand-hover: #0fdc78;--vscode-icube--icon-icon-brand-hover: #0fdc78;--vscode-icube--text-text-onbrand: #0c0c0d;--vscode-icube--icon-icon-onbrand: #0c0c0d;--vscode-icube--text-text-onaccent: #0c0c0d;--vscode-icube--icon-icon-onaccent: #0c0c0d;--vscode-icube--special-bgtabsoverlay: rgba(13, 14, 15, 0.18);--vscode-icube--code-code-tag: #f2858c;--vscode-icube--code-code-instruction: #f0d8ff;--vscode-icube--code-code-doc: #7f838c;--vscode-icube--code-code-parameter: #82d99f;--vscode-icube--cue: #0fdc78;--vscode-icube--cue-tr0: rgba(15, 220, 120, 0);--vscode-icube--cue-tr1: rgba(15, 220, 120, 0.16);--vscode-icube--cue-tr2: rgba(15, 220, 120, 0.32);--vscode-icube--cue-diff-add: #00a56e;--vscode-icube--cue-diff-add-inline: rgba(0, 165, 110, 0.12);--vscode-icube--cue-diff-add-popup: rgba(0, 165, 110, 0.18);--vscode-icube--cue-diff-remove: rgba(246, 70, 70, 0.14);--vscode-icube--cue-diff-line: rgba(255, 255, 255, 0.32);--vscode-solo-lite-root-background: #1a1b1d;--vscode-icube-memoryRiskBackground: #453121;--vscode-icube-memoryRiskBorder: #6b4d35;--vscode-icube-memoryRiskIcon: #d27e24;--vscode-icube-blendColor.btnHover.bg2: #33363e;--vscode-icube-blendColor.btnTransparent3.bg2: #434652;--vscode-editor-lineHighlightBackground: #292c34;--vscode-editor-inactiveLineHighlightBackground: #292c34;--vscode-editor-lineHighlightBorder: #282828;--vscode-editor-rangeHighlightBackground: rgba(255, 255, 255, 0.04);--vscode-editor-symbolHighlightBackground: rgba(218, 221, 229, 0.32);--vscode-editorCursor-foreground: #ffffff;--vscode-editorMultiCursor-primary.foreground: #ffffff;--vscode-editorMultiCursor-secondary.foreground: #ffffff;--vscode-editorWhitespace-foreground: rgba(227, 228, 226, 0.16);--vscode-editorLineNumber-foreground: #979aa4;--vscode-editorIndentGuide-background: rgba(227, 228, 226, 0.16);--vscode-editorIndentGuide-activeBackground: rgba(227, 228, 226, 0.16);--vscode-editorIndentGuide-background1: rgba(224, 226, 242, 0.09);--vscode-editorIndentGuide-background2: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-background3: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-background4: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-background5: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-background6: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-activeBackground1: rgba(224, 226, 242, 0.18);--vscode-editorIndentGuide-activeBackground2: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-activeBackground3: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-activeBackground4: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-activeBackground5: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-activeBackground6: rgba(0, 0, 0, 0);--vscode-editorActiveLineNumber-foreground: #c6c6c6;--vscode-editorLineNumber-activeForeground: #e0e3ee;--vscode-editorRuler-foreground: #5a5a5a;--vscode-editorCodeLens-foreground: #999999;--vscode-editorBracketMatch-background: rgba(213, 216, 224, 0.24);--vscode-editorBracketMatch-border: rgba(213, 216, 224, 0);--vscode-editorOverviewRuler-border: rgba(127, 127, 127, 0.3);--vscode-editorGutter-background: #1a1b1d;--vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.5);--vscode-editorGhostText-foreground: rgba(255, 255, 255, 0.34);--vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);--vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);--vscode-editorOverviewRuler-warningForeground: #cca700;--vscode-editorOverviewRuler-infoForeground: #59a4f9;--vscode-editorBracketHighlight-foreground1: #ffd700;--vscode-editorBracketHighlight-foreground2: #da70d6;--vscode-editorBracketHighlight-foreground3: #179fff;--vscode-editorBracketHighlight-foreground4: rgba(0, 0, 0, 0);--vscode-editorBracketHighlight-foreground5: rgba(0, 0, 0, 0);--vscode-editorBracketHighlight-foreground6: rgba(0, 0, 0, 0);--vscode-editorBracketHighlight-unexpectedBracket.foreground: rgba(255, 18, 18, 0.8);--vscode-editorBracketPairGuide-background1: rgba(224, 226, 242, 0.09);--vscode-editorBracketPairGuide-background2: rgba(224, 226, 242, 0.09);--vscode-editorBracketPairGuide-background3: rgba(224, 226, 242, 0.09);--vscode-editorBracketPairGuide-background4: rgba(224, 226, 242, 0.09);--vscode-editorBracketPairGuide-background5: rgba(224, 226, 242, 0.09);--vscode-editorBracketPairGuide-background6: rgba(224, 226, 242, 0.09);--vscode-editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);--vscode-editorUnicodeHighlight-border: #cca700;--vscode-diffEditor-move.border: rgba(139, 139, 139, 0.61);--vscode-diffEditor-moveActive.border: #ffa500;--vscode-diffEditor-unchangedRegionShadow: #000000;--vscode-settings-headerForeground: #f5f9fe;--vscode-settings-settingsHeaderHoverForeground: rgba(245, 249, 254, 0.7);--vscode-settings-modifiedItemIndicator: #dadde5;--vscode-settings-headerBorder: rgba(224, 226, 242, 0.13);--vscode-settings-sashBorder: rgba(128, 128, 128, 0.35);--vscode-settings-dropdownBackground: #2a2d31;--vscode-settings-dropdownForeground: #f0f0f0;--vscode-settings-dropdownBorder: rgba(224, 226, 242, 0.09);--vscode-settings-dropdownListBorder: #454545;--vscode-settings-checkboxBackground: #3c3c3c;--vscode-settings-checkboxForeground: #f0f0f0;--vscode-settings-checkboxBorder: #6b6b6b;--vscode-settings-textInputBackground: rgba(224, 226, 242, 0.03);--vscode-settings-textInputForeground: #d1d3db;--vscode-settings-numberInputBackground: rgba(224, 226, 242, 0.03);--vscode-settings-numberInputForeground: #d1d3db;--vscode-settings-focusedRowBackground: rgba(224, 226, 242, 0.03);--vscode-settings-rowHoverBackground: rgba(224, 226, 242, 0.01);--vscode-settings-focusedRowBorder: rgba(0, 0, 0, 0);--vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;--vscode-actionBar-toggledBackground: #383a49;--vscode-symbolIcon-arrayForeground: #d1d3db;--vscode-symbolIcon-booleanForeground: #d1d3db;--vscode-symbolIcon-classForeground: #ee9d28;--vscode-symbolIcon-colorForeground: #d1d3db;--vscode-symbolIcon-constantForeground: #d1d3db;--vscode-symbolIcon-constructorForeground: #b180d7;--vscode-symbolIcon-enumeratorForeground: #ee9d28;--vscode-symbolIcon-enumeratorMemberForeground: #75beff;--vscode-symbolIcon-eventForeground: #ee9d28;--vscode-symbolIcon-fieldForeground: #75beff;--vscode-symbolIcon-fileForeground: #d1d3db;--vscode-symbolIcon-folderForeground: #d1d3db;--vscode-symbolIcon-functionForeground: #b180d7;--vscode-symbolIcon-interfaceForeground: #75beff;--vscode-symbolIcon-keyForeground: #d1d3db;--vscode-symbolIcon-keywordForeground: #d1d3db;--vscode-symbolIcon-methodForeground: #b180d7;--vscode-symbolIcon-moduleForeground: #d1d3db;--vscode-symbolIcon-namespaceForeground: #d1d3db;--vscode-symbolIcon-nullForeground: #d1d3db;--vscode-symbolIcon-numberForeground: #d1d3db;--vscode-symbolIcon-objectForeground: #d1d3db;--vscode-symbolIcon-operatorForeground: #d1d3db;--vscode-symbolIcon-packageForeground: #d1d3db;--vscode-symbolIcon-propertyForeground: #d1d3db;--vscode-symbolIcon-referenceForeground: #d1d3db;--vscode-symbolIcon-snippetForeground: #d1d3db;--vscode-symbolIcon-stringForeground: #d1d3db;--vscode-symbolIcon-structForeground: #d1d3db;--vscode-symbolIcon-textForeground: #d1d3db;--vscode-symbolIcon-typeParameterForeground: #d1d3db;--vscode-symbolIcon-unitForeground: #d1d3db;--vscode-symbolIcon-variableForeground: #75beff;--vscode-peekViewTitle-background: #252526;--vscode-peekViewTitleLabel-foreground: #ffffff;--vscode-peekViewTitleDescription-foreground: rgba(204, 204, 204, 0.7);--vscode-peekView-border: #59a4f9;--vscode-peekViewResult-background: #252526;--vscode-peekViewResult-lineForeground: #bbbbbb;--vscode-peekViewResult-fileForeground: #ffffff;--vscode-peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2);--vscode-peekViewResult-selectionForeground: #ffffff;--vscode-peekViewEditor-background: #001f33;--vscode-peekViewEditorGutter-background: #001f33;--vscode-peekViewEditorStickyScroll-background: #001f33;--vscode-peekViewEditorStickyScrollGutter-background: #001f33;--vscode-peekViewResult-matchHighlightBackground: rgba(234, 92, 0, 0.3);--vscode-peekViewEditor-matchHighlightBackground: rgba(255, 143, 0, 0.6);--vscode-editorMarkerNavigationError-background: #f14c4c;--vscode-editorMarkerNavigationError-headerBackground: rgba(241, 76, 76, 0.1);--vscode-editorMarkerNavigationWarning-background: #cca700;--vscode-editorMarkerNavigationWarning-headerBackground: rgba(204, 167, 0, 0.1);--vscode-editorMarkerNavigationInfo-background: #59a4f9;--vscode-editorMarkerNavigationInfo-headerBackground: rgba(89, 164, 249, 0.1);--vscode-editorMarkerNavigation-background: #1a1b1d;--vscode-editor-foldBackground: rgba(53, 121, 255, 0.08);--vscode-editor-foldPlaceholderForeground: #808080;--vscode-editorGutter-foldingControlForeground: #9599a6;--vscode-editorSuggestWidget-background: #252526;--vscode-editorSuggestWidget-border: #454545;--vscode-editorSuggestWidget-foreground: #d1d3db;--vscode-editorSuggestWidget-selectedForeground: #f5f9fe;--vscode-editorSuggestWidget-selectedIconForeground: #ffffff;--vscode-editorSuggestWidget-selectedBackground: rgba(224, 226, 242, 0.08);--vscode-editorSuggestWidget-highlightForeground: #dadde5;--vscode-editorSuggestWidget-focusHighlightForeground: #dadde5;--vscode-editorSuggestWidgetStatus-foreground: rgba(209, 211, 219, 0.5);--vscode-inlineEdit-originalBackground: rgba(208, 42, 35, 0.06);--vscode-inlineEdit-modifiedBackground: rgba(0, 165, 110, 0.08);--vscode-inlineEdit-originalChangedLineBackground: rgba(208, 42, 35, 0.22);--vscode-inlineEdit-originalChangedTextBackground: rgba(208, 42, 35, 0.22);--vscode-inlineEdit-modifiedChangedLineBackground: rgba(0, 165, 110, 0.2);--vscode-inlineEdit-modifiedChangedTextBackground: rgba(0, 165, 110, 0.2);--vscode-inlineEdit-gutterIndicator.primaryForeground: #000000;--vscode-inlineEdit-gutterIndicator.primaryBorder: #d1d3db;--vscode-inlineEdit-gutterIndicator.primaryBackground: rgba(209, 211, 219, 0.4);--vscode-inlineEdit-gutterIndicator.secondaryForeground: #ffffff;--vscode-inlineEdit-gutterIndicator.secondaryBorder: #3a3d41;--vscode-inlineEdit-gutterIndicator.secondaryBackground: #3a3d41;--vscode-inlineEdit-gutterIndicator.successfulForeground: #000000;--vscode-inlineEdit-gutterIndicator.successfulBorder: #d1d3db;--vscode-inlineEdit-gutterIndicator.successfulBackground: #d1d3db;--vscode-inlineEdit-gutterIndicator.background: rgba(23, 25, 26, 0.5);--vscode-inlineEdit-originalBorder: rgba(208, 42, 35, 0.28);--vscode-inlineEdit-modifiedBorder: rgba(0, 165, 110, 0.28);--vscode-inlineEdit-tabWillAcceptModifiedBorder: rgba(0, 165, 110, 0.28);--vscode-inlineEdit-tabWillAcceptOriginalBorder: rgba(208, 41, 35, 0.28);--vscode-editor-linkedEditingBackground: rgba(255, 0, 0, 0.3);--vscode-editor-wordHighlightBackground: rgba(87, 87, 87, 0.72);--vscode-editor-wordHighlightStrongBackground: rgba(0, 73, 114, 0.72);--vscode-editor-wordHighlightTextBackground: rgba(87, 87, 87, 0.72);--vscode-editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8);--vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8);--vscode-editorOverviewRuler-wordHighlightTextForeground: rgba(160, 160, 160, 0.8);--vscode-editorHoverWidget-highlightForeground: #dadde5;--vscode-editor-placeholder.foreground: rgba(255, 255, 255, 0.34);--vscode-editorGutter-modifiedBackground: #1b81a8;--vscode-editorGutter-modifiedSecondaryBackground: #0d4054;--vscode-editorGutter-addedBackground: #487e02;--vscode-editorGutter-addedSecondaryBackground: #243f01;--vscode-editorGutter-deletedBackground: #f14c4c;--vscode-editorGutter-deletedSecondaryBackground: #b00e0e;--vscode-minimapGutter-modifiedBackground: #1b81a8;--vscode-minimapGutter-addedBackground: #487e02;--vscode-minimapGutter-deletedBackground: #f14c4c;--vscode-editorOverviewRuler-modifiedForeground: rgba(27, 129, 168, 0.6);--vscode-editorOverviewRuler-addedForeground: rgba(72, 126, 2, 0.6);--vscode-editorOverviewRuler-deletedForeground: rgba(241, 76, 76, 0.6);--vscode-editorGutter-itemGlyphForeground: #d1d3db;--vscode-editorGutter-itemBackground: #242527;--vscode-agentSessionReadIndicator-foreground: rgba(209, 211, 219, 0.15);--vscode-terminal-foreground: #cccccc;--vscode-terminal-selectionBackground: rgba(53, 121, 255, 0.28);--vscode-terminal-inactiveSelectionBackground: #3a3d41;--vscode-terminalCommandDecoration-defaultBackground: rgba(255, 255, 255, 0.25);--vscode-terminalCommandDecoration-successBackground: #1b81a8;--vscode-terminalCommandDecoration-errorBackground: #f14c4c;--vscode-terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8);--vscode-terminal-border: rgba(128, 128, 128, 0.35);--vscode-terminalOverviewRuler-border: rgba(127, 127, 127, 0.3);--vscode-terminal-findMatchBackground: #515c6a;--vscode-terminal-hoverHighlightBackground: rgba(38, 79, 120, 0.13);--vscode-terminal-findMatchHighlightBackground: rgba(218, 221, 229, 0.32);--vscode-terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);--vscode-terminal-dropBackground: rgba(53, 121, 255, 0.2);--vscode-terminal-tab.activeBorder: #1a1b1d;--vscode-terminal-initialHintForeground: rgba(255, 255, 255, 0.34);--vscode-scmGraph-historyItemRefColor: #59a4f9;--vscode-scmGraph-historyItemRemoteRefColor: #b180d7;--vscode-scmGraph-historyItemBaseRefColor: #ea5c00;--vscode-scmGraph-historyItemHoverDefaultLabelForeground: #d1d3db;--vscode-scmGraph-historyItemHoverDefaultLabelBackground: #4d4d4d;--vscode-scmGraph-historyItemHoverLabelForeground: #1a1b1d;--vscode-scmGraph-historyItemHoverAdditionsForeground: #81b88b;--vscode-scmGraph-historyItemHoverDeletionsForeground: #c74e39;--vscode-scmGraph-foreground1: #ffb000;--vscode-scmGraph-foreground2: #dc267f;--vscode-scmGraph-foreground3: #994f00;--vscode-scmGraph-foreground4: #40b0a6;--vscode-scmGraph-foreground5: #b66dff;--vscode-commentsView-resolvedIcon: #666b75;--vscode-commentsView-unresolvedIcon: rgba(0, 0, 0, 0);--vscode-editorCommentsWidget-replyInputBackground: #252526;--vscode-editorCommentsWidget-resolvedBorder: #666b75;--vscode-editorCommentsWidget-unresolvedBorder: rgba(0, 0, 0, 0);--vscode-editorCommentsWidget-rangeBackground: rgba(0, 0, 0, 0);--vscode-editorCommentsWidget-rangeActiveBackground: rgba(0, 0, 0, 0);--vscode-editorGutter-commentRangeForeground: #242527;--vscode-editorOverviewRuler-commentForeground: #242527;--vscode-editorOverviewRuler-commentUnresolvedForeground: #242527;--vscode-editorOverviewRuler-commentDraftForeground: #242527;--vscode-editorGutter-commentGlyphForeground: #d1d3db;--vscode-editorGutter-commentUnresolvedGlyphForeground: #d1d3db;--vscode-editorGutter-commentDraftGlyphForeground: #d1d3db;--vscode-ports-iconRunningProcessForeground: #369432;--vscode-welcomePage-tileBackground: #252526;--vscode-welcomePage-tileHoverBackground: #2c2c2d;--vscode-welcomePage-tileBorder: rgba(255, 255, 255, 0.1);--vscode-welcomePage-progress.background: rgba(224, 226, 242, 0.03);--vscode-welcomePage-progress.foreground: #dadde5;--vscode-walkthrough-stepTitle.foreground: #ffffff;--vscode-extensionIcon-verifiedForeground: #dadde5;--vscode-keybindingTable-headerBackground: rgba(209, 211, 219, 0.04);--vscode-keybindingTable-rowsBackground: rgba(209, 211, 219, 0.04);--vscode-extensionButton-background: #d1d3db;--vscode-extensionButton-foreground: #000000;--vscode-extensionButton-hoverBackground: #edeff2;--vscode-extensionButton-separator: rgba(13, 14, 15, 0.18);--vscode-extensionButton-prominentBackground: #d1d3db;--vscode-extensionButton-prominentForeground: #000000;--vscode-extensionButton-prominentHoverBackground: #edeff2;--vscode-debugToolBar-background: #222427;--vscode-debugIcon-startForeground: #89d185;--vscode-notebook-cellBorderColor: rgba(224, 226, 242, 0.05);--vscode-notebook-focusedEditorBorder: rgba(0, 0, 0, 0);--vscode-notebookStatusSuccessIcon-foreground: #89d185;--vscode-notebookEditorOverviewRuler-runningCellForeground: #89d185;--vscode-notebookStatusErrorIcon-foreground: #cc4b53;--vscode-notebookStatusRunningIcon-foreground: #d1d3db;--vscode-notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35);--vscode-notebook-selectedCellBackground: rgba(224, 226, 242, 0.05);--vscode-notebook-selectedCellBorder: rgba(224, 226, 242, 0.05);--vscode-notebook-focusedCellBorder: rgba(0, 0, 0, 0);--vscode-notebook-inactiveFocusedCellBorder: rgba(224, 226, 242, 0.05);--vscode-notebook-cellStatusBarItemHoverBackground: rgba(255, 255, 255, 0.15);--vscode-notebook-cellInsertionIndicator: rgba(0, 0, 0, 0);--vscode-notebookScrollbarSlider-background: rgba(121, 121, 121, 0.4);--vscode-notebookScrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);--vscode-notebookScrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);--vscode-notebook-symbolHighlightBackground: rgba(255, 255, 255, 0.04);--vscode-notebook-cellEditorBackground: #1a1b1d;--vscode-notebook-editorBackground: #1a1b1d;--vscode-inlineChat-foreground: #d1d3db;--vscode-inlineChat-background: #252526;--vscode-inlineChat-border: #454545;--vscode-inlineChat-shadow: rgba(0, 0, 0, 0.16);--vscode-inlineChatInput-border: #454545;--vscode-inlineChatInput-focusBorder: rgba(0, 0, 0, 0);--vscode-inlineChatInput-placeholderForeground: #9599a6;--vscode-inlineChatInput-background: rgba(224, 226, 242, 0.03);--vscode-inlineChatDiff-inserted: rgba(0, 165, 110, 0.14);--vscode-editorOverviewRuler-inlineChatInserted: rgba(0, 165, 110, 0.17);--vscode-editorMinimap-inlineChatInserted: rgba(0, 165, 110, 0.17);--vscode-inlineChatDiff-removed: rgba(208, 42, 35, 0.14);--vscode-editorOverviewRuler-inlineChatRemoved: rgba(208, 42, 35, 0.17);--vscode-chat-requestBorder: rgba(255, 255, 255, 0.1);--vscode-chat-requestBackground: rgba(26, 27, 29, 0.62);--vscode-chat-slashCommandBackground: rgba(38, 71, 120, 0.4);--vscode-chat-slashCommandForeground: #85b6ff;--vscode-chat-avatarBackground: #1f1f1f;--vscode-chat-avatarForeground: #d1d3db;--vscode-chat-editedFileForeground: #e2c08d;--vscode-chat-requestCodeBorder: rgba(0, 73, 114, 0.72);--vscode-chat-requestBubbleBackground: rgba(53, 121, 255, 0.08);--vscode-chat-requestBubbleHoverBackground: rgba(53, 121, 255, 0.17);--vscode-chat-checkpointSeparator: #585858;--vscode-chat-linesAddedForeground: #54b054;--vscode-chat-linesRemovedForeground: #fc6a6a;--vscode-extensionIcon-starForeground: #ff8e00;--vscode-extensionIcon-preReleaseForeground: #1d9271;--vscode-extensionIcon-sponsorForeground: #d758b3;--vscode-extensionIcon-privateForeground: rgba(255, 255, 255, 0.38);--vscode-debugExceptionWidget-border: #a31515;--vscode-debugExceptionWidget-background: #420b0d;--vscode-editor-inlineValuesForeground: rgba(255, 255, 255, 0.5);--vscode-editor-inlineValuesBackground: rgba(255, 200, 0, 0.2);--vscode-debugIcon-breakpointForeground: #f65a5a;--vscode-debugIcon-breakpointDisabledForeground: #848484;--vscode-debugIcon-breakpointUnverifiedForeground: #848484;--vscode-debugIcon-breakpointCurrentStackframeForeground: #ffcc00;--vscode-debugIcon-breakpointStackframeForeground: #89d185;--vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 0, 0.2);--vscode-editor-focusedStackFrameHighlightBackground: rgba(122, 189, 122, 0.3);--vscode-multiDiffEditor-headerBackground: #262626;--vscode-multiDiffEditor-background: #1a1b1d;--vscode-multiDiffEditor-border: rgba(224, 226, 242, 0.13);--vscode-minimap-chatEditHighlight: rgba(26, 27, 29, 0.6);--vscode-chatManagement-sashBorder: rgba(128, 128, 128, 0.35);--vscode-gauge-foreground: #007acc;--vscode-gauge-background: rgba(0, 122, 204, 0.3);--vscode-gauge-warningForeground: #dc8730;--vscode-gauge-warningBackground: rgba(220, 135, 48, 0.3);--vscode-gauge-errorForeground: #f65a5a;--vscode-gauge-errorBackground: rgba(246, 90, 90, 0.3);--vscode-interactive-activeCodeBorder: #007acc;--vscode-interactive-inactiveCodeBorder: rgba(224, 226, 242, 0.05);--vscode-testing-iconFailed: #f14c4c;--vscode-testing-iconErrored: #f14c4c;--vscode-testing-iconPassed: #73c991;--vscode-testing-runAction: #73c991;--vscode-testing-iconQueued: #cca700;--vscode-testing-iconUnset: #848484;--vscode-testing-iconSkipped: #848484;--vscode-testing-peekBorder: #f14c4c;--vscode-testing-messagePeekBorder: #59a4f9;--vscode-testing-peekHeaderBackground: rgba(241, 76, 76, 0.1);--vscode-testing-messagePeekHeaderBackground: rgba(89, 164, 249, 0.1);--vscode-testing-coveredBackground: rgba(0, 165, 110, 0.28);--vscode-testing-coveredBorder: rgba(0, 165, 110, 0.21);--vscode-testing-coveredGutterBackground: rgba(0, 165, 110, 0.17);--vscode-testing-uncoveredBranchBackground: #7f2320;--vscode-testing-uncoveredBackground: rgba(208, 42, 35, 0.28);--vscode-testing-uncoveredBorder: rgba(208, 42, 35, 0.21);--vscode-testing-uncoveredGutterBackground: rgba(208, 42, 35, 0.42);--vscode-testing-coverCountBadgeBackground: #4d4d4d;--vscode-testing-coverCountBadgeForeground: #ffffff;--vscode-testing-message.error.badgeBackground: #f14c4c;--vscode-testing-message.error.badgeBorder: #f14c4c;--vscode-testing-message.error.badgeForeground: #000000;--vscode-testing-message.info.decorationForeground: rgba(209, 211, 219, 0.5);--vscode-testing-iconErrored.retired: rgba(241, 76, 76, 0.7);--vscode-testing-iconFailed.retired: rgba(241, 76, 76, 0.7);--vscode-testing-iconPassed.retired: rgba(115, 201, 145, 0.7);--vscode-testing-iconQueued.retired: rgba(204, 167, 0, 0.7);--vscode-testing-iconUnset.retired: rgba(132, 132, 132, 0.7);--vscode-testing-iconSkipped.retired: rgba(132, 132, 132, 0.7);--vscode-statusBar-debuggingBackground: #cc6633;--vscode-statusBar-debuggingForeground: #ffffff;--vscode-commandCenter-debuggingBackground: rgba(204, 102, 51, 0.26);--vscode-debugTokenExpression-name: #c586c0;--vscode-debugTokenExpression-type: #4a90e2;--vscode-debugTokenExpression-value: rgba(204, 204, 204, 0.6);--vscode-debugTokenExpression-string: #ce9178;--vscode-debugTokenExpression-boolean: #4e94ce;--vscode-debugTokenExpression-number: #b5cea8;--vscode-debugTokenExpression-error: #f48771;--vscode-debugView-exceptionLabelForeground: #d1d3db;--vscode-debugView-exceptionLabelBackground: #6c2022;--vscode-debugView-stateLabelForeground: #d1d3db;--vscode-debugView-stateLabelBackground: rgba(136, 136, 136, 0.27);--vscode-debugView-valueChangedHighlight: #569cd6;--vscode-debugConsole-infoForeground: #59a4f9;--vscode-debugConsole-warningForeground: #cca700;--vscode-debugConsole-errorForeground: #cc4b53;--vscode-debugConsole-sourceForeground: #d1d3db;--vscode-debugConsoleInputIcon-foreground: #d1d3db;--vscode-debugIcon-pauseForeground: #75beff;--vscode-debugIcon-stopForeground: #f48771;--vscode-debugIcon-disconnectForeground: #f48771;--vscode-debugIcon-restartForeground: #89d185;--vscode-debugIcon-stepOverForeground: #75beff;--vscode-debugIcon-stepIntoForeground: #75beff;--vscode-debugIcon-stepOutForeground: #75beff;--vscode-debugIcon-continueForeground: #75beff;--vscode-debugIcon-stepBackForeground: #75beff;--vscode-mergeEditor-change.background: rgba(155, 185, 85, 0.2);--vscode-mergeEditor-change.word.background: rgba(156, 204, 44, 0.2);--vscode-mergeEditor-changeBase.background: #4b1818;--vscode-mergeEditor-changeBase.word.background: #6f1313;--vscode-mergeEditor-conflict.unhandledUnfocused.border: rgba(255, 166, 0, 0.48);--vscode-mergeEditor-conflict.unhandledFocused.border: #ffa600;--vscode-mergeEditor-conflict.handledUnfocused.border: rgba(134, 134, 134, 0.29);--vscode-mergeEditor-conflict.handledFocused.border: rgba(193, 193, 193, 0.8);--vscode-mergeEditor-conflict.handled.minimapOverViewRuler: rgba(173, 172, 168, 0.93);--vscode-mergeEditor-conflict.unhandled.minimapOverViewRuler: #fcba03;--vscode-mergeEditor-conflictingLines.background: rgba(255, 234, 0, 0.28);--vscode-mergeEditor-conflict.input1.background: rgba(64, 200, 174, 0.2);--vscode-mergeEditor-conflict.input2.background: rgba(64, 166, 255, 0.2);--vscode-terminal-ansiBlack: #000000;--vscode-terminal-ansiRed: #cd3131;--vscode-terminal-ansiGreen: #0dbc79;--vscode-terminal-ansiYellow: #e5e510;--vscode-terminal-ansiBlue: #2472c8;--vscode-terminal-ansiMagenta: #bc3fbc;--vscode-terminal-ansiCyan: #11a8cd;--vscode-terminal-ansiWhite: #e5e5e5;--vscode-terminal-ansiBrightBlack: #666666;--vscode-terminal-ansiBrightRed: #f14c4c;--vscode-terminal-ansiBrightGreen: #23d18b;--vscode-terminal-ansiBrightYellow: #f5f543;--vscode-terminal-ansiBrightBlue: #3b8eea;--vscode-terminal-ansiBrightMagenta: #d670d6;--vscode-terminal-ansiBrightCyan: #29b8db;--vscode-terminal-ansiBrightWhite: #e5e5e5;--vscode-simpleFindWidget-sashBorder: #454545;--vscode-terminalStickyScrollHover-background: #2a2d2e;--vscode-terminalCommandGuide-foreground: rgba(224, 226, 242, 0.05);--vscode-terminalSymbolIcon-flagForeground: #ee9d28;--vscode-terminalSymbolIcon-aliasForeground: #b180d7;--vscode-terminalSymbolIcon-optionValueForeground: #75beff;--vscode-terminalSymbolIcon-methodForeground: #b180d7;--vscode-terminalSymbolIcon-argumentForeground: #75beff;--vscode-terminalSymbolIcon-optionForeground: #ee9d28;--vscode-terminalSymbolIcon-fileForeground: #d1d3db;--vscode-terminalSymbolIcon-folderForeground: #d1d3db;--vscode-terminalSymbolIcon-commitForeground: #d1d3db;--vscode-terminalSymbolIcon-branchForeground: #d1d3db;--vscode-terminalSymbolIcon-tagForeground: #d1d3db;--vscode-terminalSymbolIcon-stashForeground: #d1d3db;--vscode-terminalSymbolIcon-remoteForeground: #d1d3db;--vscode-terminalSymbolIcon-pullRequestForeground: #d1d3db;--vscode-terminalSymbolIcon-pullRequestDoneForeground: #d1d3db;--vscode-terminalSymbolIcon-symbolicLinkFileForeground: #d1d3db;--vscode-terminalSymbolIcon-symbolicLinkFolderForeground: #d1d3db;--vscode-terminalSymbolIcon-symbolText: #d1d3db;--vscode-markdownAlert-note.foreground: #59a4f9;--vscode-markdownAlert-tip.foreground: #89d185;--vscode-markdownAlert-important.foreground: #b180d7;--vscode-markdownAlert-warning.foreground: #cca700;--vscode-markdownAlert-caution.foreground: #f14c4c;--vscode-walkThrough-embeddedEditorBackground: rgba(0, 0, 0, 0.4);--vscode-profiles-sashBorder: rgba(128, 128, 128, 0.35);--vscode-icube-inlineChat.regionHighlight: rgba(38, 38, 38, 0.2);--vscode-icube-inlineChatDiff.inserted: rgba(0, 165, 110, 0.14);--vscode-icube-inlineChatDiff.removed: rgba(208, 42, 35, 0.14);--vscode-icube-simpleInlineChat.regionHighlight: rgba(38, 38, 38, 0.2);--vscode-icube-simpleInlineChatDiff.inserted: rgba(0, 165, 110, 0.18);--vscode-icube-simpleInlineChatDiff.removed: rgba(208, 42, 35, 0.18);--vscode-gitDecoration-addedResourceForeground: #81b88b;--vscode-gitDecoration-modifiedResourceForeground: #e2c08d;--vscode-gitDecoration-deletedResourceForeground: #c74e39;--vscode-gitDecoration-renamedResourceForeground: #168a63;--vscode-gitDecoration-untrackedResourceForeground: #168a63;--vscode-gitDecoration-ignoredResourceForeground: #8c8c8c;--vscode-gitDecoration-stageModifiedResourceForeground: #e2c08d;--vscode-gitDecoration-stageDeletedResourceForeground: #c74e39;--vscode-gitDecoration-conflictingResourceForeground: #e4676b;--vscode-gitDecoration-submoduleResourceForeground: #8db9e2;--vscode-git-blame.editorDecorationForeground: #969696;}</style><style id="solo-lite-theme-variables">:root {
|
||
--workspace-gap-width: 4px;
|
||
--header-height: 48px;
|
||
|
||
--radius-sm: 4px;
|
||
--radius-md: 8px;
|
||
--radius-lg: 12px;
|
||
--radius-xl: 20px;
|
||
--radius-full: 9999px;
|
||
--radius-2: 2px;
|
||
--radius-4: 4px;
|
||
--radius-6: 6px;
|
||
--radius-8: 8px;
|
||
--radius-12: 12px;
|
||
--radius-16: 16px;
|
||
--radius-20: 20px;
|
||
--radius-24: 24px;
|
||
--radius-32: 32px;
|
||
--radius-radius-2xs-4: 4px;
|
||
--radius-radius-xs-6: 6px;
|
||
--radius-radius-sm-8: 8px;
|
||
--radius-radius-md-12: 12px;
|
||
--radius-radius-lg-16: 16px;
|
||
--radius-radius-xl-20: 20px;
|
||
--radius-radius-2xl-24: 24px;
|
||
--radius-radius-3xl-32: 32px;
|
||
--radius-radius-full: 9999px;
|
||
|
||
--spacing-xs: 4px;
|
||
--spacing-sm: 8px;
|
||
--spacing-md: 12px;
|
||
--spacing-lg: 16px;
|
||
--spacing-xl: 24px;
|
||
--spacing-xxl: 32px;
|
||
|
||
--spacer-0: 0px;
|
||
--spacer-2: 2px;
|
||
--spacer-4: 4px;
|
||
--spacer-6: 6px;
|
||
--spacer-8: 8px;
|
||
--spacer-12: 12px;
|
||
--spacer-16: 16px;
|
||
--spacer-20: 20px;
|
||
--spacer-24: 24px;
|
||
--spacer-32: 32px;
|
||
--spacer-40: 40px;
|
||
--spacer-48: 48px;
|
||
--spacer-64: 64px;
|
||
|
||
--font-size-xs: 10px;
|
||
--font-size-sm: 11px;
|
||
--font-size-md: 12px;
|
||
--font-size-regular: 13px;
|
||
--font-size-base: 14px;
|
||
--font-size-lg: 16px;
|
||
--font-size-xl: 20px;
|
||
--font-size-xxl: 24px;
|
||
|
||
--font-family-default:
|
||
'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'PingFang SC', 'Microsoft YaHei',
|
||
'Hiragino Sans GB', Roboto, sans-serif;
|
||
--font-family-heading:
|
||
'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'PingFang SC', 'Microsoft YaHei',
|
||
'Hiragino Sans GB', Roboto, sans-serif;
|
||
--font-family-mono: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace;
|
||
--font-weight-default: 400;
|
||
--font-weight-code: 450;
|
||
--font-weight-medium: 500;
|
||
--font-weight-strong: 600;
|
||
|
||
--chat-body-md: 13px/20px var(--font-family-default);
|
||
--chat-body-md-strong: 500 13px/20px var(--font-family-default);
|
||
--chat-body-base: 14px/22px var(--font-family-default);
|
||
--chat-body-base-strong: 500 14px/22px var(--font-family-default);
|
||
--chat-spacer-2xs: 2px;
|
||
--chat-spacer-xs: 4px;
|
||
--chat-spacer-sm: 8px;
|
||
--chat-spacer-md: 12px;
|
||
--chat-spacer-lg: 16px;
|
||
--chat-spacer-xl: 20px;
|
||
--chat-radius-xs: 4px;
|
||
--chat-radius-sm: 8px;
|
||
--chat-radius-md: 12px;
|
||
--chat-radius-lg: 16px;
|
||
--chat-list-item-height: 28px;
|
||
|
||
--transition-fast: 0.15s ease;
|
||
--transition-normal: 0.2s ease;
|
||
--transition-slow: 0.3s ease;
|
||
|
||
/* ===== Z-Index Layer System ===== */
|
||
--z-base: 0;
|
||
--z-above: 1;
|
||
--z-above-2: 2;
|
||
|
||
--z-sticky: 10;
|
||
--z-local-overlay: 100;
|
||
|
||
--z-dropdown: 1000;
|
||
--z-popover: 1010;
|
||
|
||
--z-modal-backdrop: 1090;
|
||
--z-modal: 1100;
|
||
--z-drawer: 1120;
|
||
--z-confirm: 1150;
|
||
|
||
--z-notification: 1200;
|
||
--z-tooltip: 1300;
|
||
|
||
--z-fullscreen: 1400;
|
||
|
||
/* 仅限基础设施 / 调试工具，业务组件禁止直接使用 */
|
||
--z-max: 9999;
|
||
}
|
||
|
||
[data-theme='light'], .vs.solo-lite {
|
||
--shadow-elevation-50: 0 1px 2px -1px rgba(24, 24, 24, 0.08);
|
||
--shadow-elevation-100: 0 3px 9px 0 rgba(24, 24, 24, 0.06);
|
||
--shadow-elevation-100-float: 0 -3px 9px 0 rgba(24, 24, 24, 0.06);
|
||
--shadow-elevation-200: 0 6px 24px -1px rgba(24, 24, 24, 0.06);
|
||
--shadow-elevation-200-reverse: 0 -6px 24px -1px rgba(24, 24, 24, 0.06);
|
||
--shadow-elevation-300: 0 2px 8px -1px rgba(24, 24, 24, 0.02), 0 10px 24px -1px rgba(24, 24, 24, 0.06);
|
||
|
||
--shadow-elevation-100-tooltip: var(--shadow-elevation-100);
|
||
--shadow-elevation-200-menu-panel: var(--shadow-elevation-200);
|
||
--shadow-elevation-300-modal-panel: var(--shadow-elevation-300);
|
||
|
||
/* 输入框阴影颜色 */
|
||
--shadow-chat-input: 0 3px 8px 0 rgba(24, 24, 24, 0.04), 0 6px 24px -1px rgba(24, 24, 24, 0.06);
|
||
--shadow-chat-input-focused: 0 4px 12px 0 rgba(24, 24, 24, 0.04), 0 6px 32px -1px rgba(24, 24, 24, 0.06);
|
||
|
||
--bg-bg-base-default: #ffffff;
|
||
--bg-bg-base-secondary: #f5f5f5;
|
||
--bg-bg-base-tertiary: #e5e5e5;
|
||
--bg-bg-menu: #ffffff;
|
||
--bg-bg-tooltip: #fafafa;
|
||
--bg-bg-input: #ffffff;
|
||
--bg-bg-overlay-l1: rgba(115, 115, 115, 0.08);
|
||
--bg-bg-overlay-l2: rgba(115, 115, 115, 0.12);
|
||
--bg-bg-overlay-l3: rgba(115, 115, 115, 0.16);
|
||
--bg-bg-overlay-l4: rgba(115, 115, 115, 0.20);
|
||
--bg-bg-white: #ffffff;
|
||
--bg-bg-brand: #4b3fe3;
|
||
--bg-bg-brand-hover: #6a6fff;
|
||
--bg-bg-brand-active: #3f31c6;
|
||
--bg-bg-brand-disabled: rgba(75, 63, 227, 0.22);
|
||
--bg-bg-brand-popup: rgba(170, 183, 255, 0.36);
|
||
/* brand-sub 兼容（品牌色已统一，sub 映射为主品牌色） */
|
||
--bg-bg-brand-sub: var(--bg-bg-brand);
|
||
--bg-bg-brand-hover-sub: var(--bg-bg-brand-hover);
|
||
--bg-bg-brand-disabled-sub: var(--bg-bg-brand-disabled);
|
||
--bg-bg-brand-popup-sub: var(--bg-bg-brand-popup);
|
||
--bg-bg-invert: #262626;
|
||
--bg-bg-invert-hover: #404040;
|
||
--bg-bg-invert-active: #171717;
|
||
--bg-bg-invert-disabled: rgba(115, 115, 115, 0.20);
|
||
--bg-bg-card: #fafafa;
|
||
--bg-bg-card-hover: #ffffff;
|
||
--bg-bg-marketplace-banner-plugin-tag: #e5f3ff;
|
||
--chat-bg-card: var(--bg-bg-card);
|
||
--chat-bg-card-hover: var(--bg-bg-base-default);
|
||
--special-bgtabsoverlay: rgba(255, 255, 255, 0.12);
|
||
--special-tabsoverlay: rgba(193, 195, 205, 0.12);
|
||
--text-text-default: #171717;
|
||
--text-text-default-hover: #262626;
|
||
--text-text-default-active: #262626;
|
||
--text-text-secondary: #404040;
|
||
--text-text-secondary-hover: #171717;
|
||
--text-text-secondary-active: #171717;
|
||
--text-text-tertiary: #737373;
|
||
--text-text-disabled: #a1a1a1;
|
||
--text-text-brand: #4b3fe3;
|
||
--text-text-brand-hover: #6a6fff;
|
||
--text-text-brand-sub: var(--text-text-brand);
|
||
--text-text-brand-hover-sub: var(--text-text-brand-hover);
|
||
--text-text-onbrand: #171717;
|
||
--text-text-onaccent: #ffffff;
|
||
--text-text-marketplace-banner-plugin-tag: #054c8f;
|
||
--icon-icon-default: #262626;
|
||
--icon-icon-default-hover: #171717;
|
||
--icon-icon-default-active: #171717;
|
||
--icon-icon-secondary: #404040;
|
||
--icon-icon-secondary-hover: #262626;
|
||
--icon-icon-secondary-active: #262626;
|
||
--icon-icon-tertiary: #737373;
|
||
--icon-icon-disabled: #a1a1a1;
|
||
--icon-icon-brand: #4b3fe3;
|
||
--icon-icon-brand-hover: #6a6fff;
|
||
--icon-icon-brand-sub: var(--icon-icon-brand);
|
||
--icon-icon-brand-hover-sub: var(--icon-icon-brand-hover);
|
||
--icon-icon-onbrand: #0a0a0a;
|
||
--icon-icon-onaccent: #ffffff;
|
||
--icon-icon-white: #ffffff;
|
||
--border-border-neutral-l1: rgba(115, 115, 115, 0.12);
|
||
--border-border-neutral-l2: rgba(115, 115, 115, 0.18);
|
||
--border-border-neutral-l3: rgba(115, 115, 115, 0.36);
|
||
--border-border-brand: #4b3fe3;
|
||
--border-border-brand-sub: var(--border-border-brand);
|
||
--border-border-contrast: #000000;
|
||
--status-primary-default: #2f74ff;
|
||
--status-primary-hover: #4c88ff;
|
||
--status-primary-active: #1759dd;
|
||
--status-primary-surface-l1: rgba(47, 116, 255, 0.12);
|
||
--status-primary-surface-l2: rgba(47, 116, 255, 0.18);
|
||
--status-primary-surface-l3: rgba(47, 116, 255, 0.36);
|
||
--status-success-default: #15a877;
|
||
--status-success-hover: #2fb287;
|
||
--status-success-active: #1e8b56;
|
||
--status-success-surface-l1: rgba(64, 176, 139, 0.12);
|
||
--status-success-surface-l2: rgba(64, 176, 139, 0.18);
|
||
--status-success-surface-l3: rgba(64, 176, 139, 0.36);
|
||
--status-alert-default: #fea900;
|
||
--status-alert-hover: #ffb700;
|
||
--status-alert-active: #e59100;
|
||
--status-alert-surface-l1: rgba(254, 169, 0, 0.14);
|
||
--status-alert-surface-l2: rgba(254, 169, 0, 0.20);
|
||
--status-alert-surface-l3: rgba(254, 169, 0, 0.36);
|
||
--status-warning-default: #e27900;
|
||
--status-warning-hover: #f39a35;
|
||
--status-warning-active: #c46f11;
|
||
--status-warning-surface-l1: rgba(226, 121, 0, 0.12);
|
||
--status-warning-surface-l2: rgba(226, 121, 0, 0.16);
|
||
--status-warning-surface-l3: rgba(226, 121, 0, 0.36);
|
||
--status-error-default: #e8463a;
|
||
--status-error-hover: #ea574c;
|
||
--status-error-active: #c9382f;
|
||
--status-error-surface-l1: rgba(232, 70, 58, 0.12);
|
||
--status-error-surface-l2: rgba(232, 70, 58, 0.16);
|
||
--status-error-surface-l3: rgba(232, 70, 58, 0.36);
|
||
--accent-accent-teal: #00b983;
|
||
--accent-accent-coral: #ff6b45;
|
||
--accent-accent-amber: #f2a90c;
|
||
--accent-accent-lime: #5fc000;
|
||
--accent-accent-cyan: #00b6f5;
|
||
--accent-accent-blue: #3f85ff;
|
||
--accent-accent-magenta: #f53cff;
|
||
--accent-accent-violet: #9570ff;
|
||
--accent-accent-slate: #747e94;
|
||
--code-code-text: #17181a;
|
||
--code-code-doc: #8393a3;
|
||
--code-code-link: #2f74ff;
|
||
--code-code-number: #e54595;
|
||
--code-code-action: #5f36b2;
|
||
--code-code-instruction: #b15ef2;
|
||
--code-code-function: #ff5d4d;
|
||
--code-code-constant: #175ce6;
|
||
--code-code-parameter: #4da621;
|
||
--code-code-attribute: #c99100;
|
||
--code-code-tag: #e24864;
|
||
--code-code-terminal: #17181a;
|
||
--code-code-contrast: #17181a;
|
||
--code-code-editor: #17181a;
|
||
--special-white: #ffffff;
|
||
--special-black: #000000;
|
||
--viz-viz-series-amber: #edaa45;
|
||
--viz-viz-series-coral: #f87454;
|
||
--viz-viz-series-indigo: #b6a3ff;
|
||
--viz-viz-series-lime: #a6ea39;
|
||
--viz-viz-series-magenta: #fb9dd7;
|
||
--viz-viz-series-mint: #1dc981;
|
||
--viz-viz-series-sky: #22a5f7;
|
||
--viz-viz-series-slate: #859ead;
|
||
--viz-viz-series-teal: #59e8e8;
|
||
--viz-viz-series-violet: #b655fc;
|
||
--viz-viz-ui-bg-chart: #ffffff;
|
||
--viz-viz-ui-bg-tooltip: #fafafa;
|
||
--viz-viz-ui-chart-axis: rgba(115, 115, 115, 0.18);
|
||
--viz-viz-ui-chart-subtitle: #404040;
|
||
--viz-viz-ui-chart-tick: #404040;
|
||
--viz-viz-ui-chart-title: #171717;
|
||
--viz-viz-ui-legend-label: #404040;
|
||
--viz-viz-ui-legend-value: #171717;
|
||
--brand-blue-100: #e5f3ff;
|
||
--brand-blue-200: #cce6ff;
|
||
--brand-blue-300: #b2daff;
|
||
--brand-blue-400: #99ceff;
|
||
--brand-blue-500: #80c1ff;
|
||
--brand-blue-600: #64b4ff;
|
||
--brand-blue-700: #3792e6;
|
||
--brand-blue-800: #1071cb;
|
||
--brand-blue-900: #054c8f;
|
||
--brand-blue-1000: #00284d;
|
||
--brand-blue-grey-100: #f1eff4;
|
||
--brand-blue-grey-200: #e0e1e6;
|
||
--brand-blue-grey-300: #cfd3d8;
|
||
--brand-blue-grey-400: #bfc5ca;
|
||
--brand-blue-grey-500: #b0b5ba;
|
||
--brand-blue-grey-600: #a0a6ab;
|
||
--brand-blue-grey-700: #80898e;
|
||
--brand-blue-grey-800: #5e696e;
|
||
--brand-blue-grey-900: #404a4f;
|
||
--brand-blue-grey-1000: #21262b;
|
||
--brand-green-grey-100: #f1f4f4;
|
||
--brand-green-grey-200: #e0e6e6;
|
||
--brand-green-grey-300: #cfd8d8;
|
||
--brand-green-grey-400: #bfcaca;
|
||
--brand-green-grey-500: #b0baba;
|
||
--brand-green-grey-600: #a0abab;
|
||
--brand-green-grey-700: #808e8e;
|
||
--brand-green-grey-800: #5e6e6e;
|
||
--brand-green-grey-900: #404f4f;
|
||
--brand-green-grey-1000: #212b2b;
|
||
--brand-purple-100: #e8e5ff;
|
||
--brand-purple-200: #d2ccff;
|
||
--brand-purple-300: #bbb2ff;
|
||
--brand-purple-400: #a599ff;
|
||
--brand-purple-500: #8e80ff;
|
||
--brand-purple-600: #7864ff;
|
||
--brand-purple-700: #4c37e6;
|
||
--brand-purple-800: #2610cb;
|
||
--brand-purple-900: #15058f;
|
||
--brand-purple-1000: #09004d;
|
||
--brand-red-100: #ffe5e5;
|
||
--brand-red-200: #ffcccc;
|
||
--brand-red-300: #ffb2b2;
|
||
--brand-red-400: #ff9999;
|
||
--brand-red-500: #ff8080;
|
||
--brand-red-600: #ff6464;
|
||
--brand-red-700: #e63737;
|
||
--brand-red-800: #cb1010;
|
||
--brand-red-900: #8f0505;
|
||
--brand-red-1000: #4d0000;
|
||
--brand-yellow-100: #fff6e5;
|
||
--brand-yellow-200: #ffeccc;
|
||
--brand-yellow-300: #ffe3b2;
|
||
--brand-yellow-400: #ffda99;
|
||
--brand-yellow-500: #ffd080;
|
||
--brand-yellow-600: #ffc864;
|
||
--brand-yellow-700: #e6a637;
|
||
--brand-yellow-800: #cb8710;
|
||
--brand-yellow-900: #8f5c05;
|
||
--brand-yellow-1000: #4d3000;
|
||
--brand-blue-grey-100: #f1eff4;
|
||
--brand-blue-grey-200: #e0e1e6;
|
||
--brand-blue-grey-300: #cfd3d8;
|
||
--brand-blue-grey-400: #bfc5ca;
|
||
--brand-blue-grey-500: #b0b5ba;
|
||
--brand-blue-grey-600: #a0a6ab;
|
||
--brand-blue-grey-700: #80898e;
|
||
--brand-blue-grey-800: #5e696e;
|
||
--brand-blue-grey-900: #404a4f;
|
||
--brand-blue-grey-1000: #21262b;
|
||
--brand-green-grey-100: #f1f4f4;
|
||
--brand-green-grey-200: #e0e6e6;
|
||
--brand-green-grey-300: #cfd8d8;
|
||
--brand-green-grey-400: #bfcaca;
|
||
--brand-green-grey-500: #b0baba;
|
||
--brand-green-grey-600: #a0abab;
|
||
--brand-green-grey-700: #808e8e;
|
||
--brand-green-grey-800: #5e6e6e;
|
||
--brand-green-grey-900: #404f4f;
|
||
--brand-green-grey-1000: #212b2b;
|
||
--brand-neutral-grey-100: #f2f2f2;
|
||
--brand-neutral-grey-200: #e3e3e3;
|
||
--brand-neutral-grey-300: #d6d6d6;
|
||
--brand-neutral-grey-400: #c7c7c7;
|
||
--brand-neutral-grey-500: #bababa;
|
||
--brand-neutral-grey-600: #ababab;
|
||
--brand-neutral-grey-700: #8a8a8a;
|
||
--brand-neutral-grey-800: #686868;
|
||
--brand-neutral-grey-900: #474747;
|
||
--brand-neutral-grey-1000: #262626;
|
||
--brand-brand-50: #f2f7ff;
|
||
--brand-brand-100: #e5eaff;
|
||
--brand-brand-200: #cfd8ff;
|
||
--brand-brand-300: #aab7ff;
|
||
--brand-brand-400: #8894ff;
|
||
--brand-brand-500: #6a6fff;
|
||
--brand-brand-600: #4b3fe3;
|
||
--brand-brand-700: #3f31c6;
|
||
--brand-brand-800: #2c2290;
|
||
--brand-brand-900: #1a1759;
|
||
--brand-brand-950: #010109;
|
||
--brand-brand-grey-50: #fafafa;
|
||
--brand-brand-grey-100: #f5f5f5;
|
||
--brand-brand-grey-200: #e5e5e5;
|
||
--brand-brand-grey-300: #d4d4d4;
|
||
--brand-brand-grey-400: #a1a1a1;
|
||
--brand-brand-grey-500: #737373;
|
||
--brand-brand-grey-600: #525252;
|
||
--brand-brand-grey-700: #404040;
|
||
--brand-brand-grey-800: #262626;
|
||
--brand-brand-grey-900: #171717;
|
||
--brand-brand-grey-950: #0a0a0a;
|
||
--brand-brand-grey-50: #fafafa;
|
||
--brand-brand-grey-100: #f5f5f5;
|
||
--brand-brand-grey-200: #e5e5e5;
|
||
--brand-brand-grey-300: #d4d4d4;
|
||
--brand-brand-grey-400: #a1a1a1;
|
||
--brand-brand-grey-500: #737373;
|
||
--brand-brand-grey-600: #525252;
|
||
--brand-brand-grey-700: #404040;
|
||
--brand-brand-grey-800: #262626;
|
||
--brand-brand-grey-900: #171717;
|
||
--brand-brand-grey-950: #0a0a0a;
|
||
|
||
--body-body-xs: 10px/1.5 var(--font-family-default);
|
||
--body-body-sm: 11px/1.5 var(--font-family-default);
|
||
--body-body-sm-strong: 600 11px/1.5 var(--font-family-default);
|
||
--body-body-md: 12px/1.5 var(--font-family-default);
|
||
--body-body-md-strong: 600 12px/1.5 var(--font-family-default);
|
||
--body-body-base: 14px/1.5 var(--font-family-default);
|
||
--body-body-base-strong: 600 14px/1.5 var(--font-family-default);
|
||
--heading-heading-3xs: 600 10px/1.4 var(--font-family-heading);
|
||
--heading-heading-2xs: 600 11px/1.4 var(--font-family-heading);
|
||
--heading-heading-xs: 600 12px/1.4 var(--font-family-heading);
|
||
--heading-heading-sm: 600 13px/1.4 var(--font-family-heading);
|
||
--heading-heading-md: 600 14px/1.4 var(--font-family-heading);
|
||
--heading-heading-lg: 600 16px/1.4 var(--font-family-heading);
|
||
--heading-heading-xl: 600 20px/1.4 var(--font-family-heading);
|
||
--heading-heading-2xl: 600 24px/1.4 var(--font-family-heading);
|
||
--heading-heading-3xl: 600 32px/1.4 var(--font-family-heading);
|
||
|
||
--bg-bg-overlay-l0: rgba(86, 99, 119, 0.03);
|
||
--bg-primary-item: rgba(86, 99, 119, 0.15);
|
||
--bg-primary-item-hover: rgba(86, 99, 119, 0.22);
|
||
--border-primary-item: rgba(77, 107, 153, 0.09);
|
||
--border-primary-item-hover: rgba(77, 107, 153, 0.15);
|
||
--bg-bg-menu-old: #f8f9fa;
|
||
/* 首页输入框边框颜色（纯色，用于内凹圆弧等需要精确边框的场景） */
|
||
--homepage-input-border-color: #dfe3eb;
|
||
|
||
--welcome-logo-bg: var(--bg-bg-brand, #0fdc78);
|
||
--welcome-logo-color: #000000;
|
||
|
||
--user-message-bg-solid: #E3F8ED;
|
||
--user-message-bg-solid-transparent: rgba(227, 248, 237, 0);
|
||
--user-message-bg-solid-sub: #E9E6FF;
|
||
--user-message-bg-solid-sub-transparent: rgba(233, 230, 255, 0);
|
||
--sheet-text-color: #000000;
|
||
--slash-mention-bg: rgba(63, 133, 255, 0.15);
|
||
--builtin-slash-mention-bg: rgba(149, 112, 255, 0.15);
|
||
|
||
--gradient-golden: linear-gradient(180deg, #c0a115 0%, #dfbd27 100%);
|
||
--special-bggoldoverlay: rgba(210, 181, 19, 0.12);
|
||
|
||
--bg-bg-brand-old: #0fdc78;
|
||
--gradient-brand: linear-gradient(90deg, #0ac27b 0%, #0ecd70 36%, #06c179 72%, #63c5b1 100%);
|
||
--text-text-preformat-foreground: #a31515;
|
||
}
|
||
|
||
[data-theme='dark'], .vs-dark.solo-lite {
|
||
--shadow-elevation-50: 0 1px 2px -1px rgba(0, 0, 0, 0.45);
|
||
--shadow-elevation-100: 0 3px 9px 0 rgba(0, 0, 0, 0.25);
|
||
--shadow-elevation-100-float: 0 -3px 9px 0 rgba(0, 0, 0, 0.25);
|
||
--shadow-elevation-200: 0 6px 24px -1px rgba(0, 0, 0, 0.25);
|
||
--shadow-elevation-200-reverse: 0 -6px 24px -1px rgba(0, 0, 0, 0.25);
|
||
--shadow-elevation-300: 0 2px 8px -1px rgba(0, 0, 0, 0.18), 0 10px 24px -1px rgba(0, 0, 0, 0.30);
|
||
--shadow-elevation-100-tooltip: var(--shadow-elevation-100);
|
||
--shadow-elevation-200-menu-panel: var(--shadow-elevation-200);
|
||
--shadow-elevation-300-modal-panel: var(--shadow-elevation-300);
|
||
|
||
/* 输入框阴影颜色 */
|
||
--shadow-chat-input: 0 3px 8px 0 rgba(24, 24, 24, 0.08), 0 6px 24px -1px rgba(24, 24, 24, 0.12);
|
||
--shadow-chat-input-focused: 0 4px 12px 0 rgba(24, 24, 24, 0.08), 0 6px 32px -1px rgba(24, 24, 24, 0.12);
|
||
|
||
--bg-bg-base-default: #171717;
|
||
--bg-bg-base-secondary: #262626;
|
||
--bg-bg-base-tertiary: #404040;
|
||
--bg-bg-menu: #171717;
|
||
--bg-bg-tooltip: #171717;
|
||
--bg-bg-input: #171717;
|
||
--bg-bg-overlay-l1: rgba(212, 212, 212, 0.04);
|
||
--bg-bg-overlay-l2: rgba(212, 212, 212, 0.06);
|
||
--bg-bg-overlay-l3: rgba(212, 212, 212, 0.08);
|
||
--bg-bg-overlay-l4: rgba(212, 212, 212, 0.12);
|
||
--bg-bg-white: #ffffff;
|
||
--bg-bg-brand: #4b3fe3;
|
||
--bg-bg-brand-hover: #6a6fff;
|
||
--bg-bg-brand-active: #3f31c6;
|
||
--bg-bg-brand-disabled: rgba(75, 63, 227, 0.35);
|
||
--bg-bg-brand-popup: rgba(106, 111, 255, 0.15);
|
||
--bg-bg-brand-sub: var(--bg-bg-brand);
|
||
--bg-bg-brand-hover-sub: var(--bg-bg-brand-hover);
|
||
--bg-bg-brand-disabled-sub: var(--bg-bg-brand-disabled);
|
||
--bg-bg-brand-popup-sub: var(--bg-bg-brand-popup);
|
||
--bg-bg-invert: #e5e5e5;
|
||
--bg-bg-invert-hover: #f5f5f5;
|
||
--bg-bg-invert-active: #e5e5e5;
|
||
--bg-bg-invert-disabled: rgba(212, 212, 212, 0.06);
|
||
--bg-bg-card: #202020;
|
||
--bg-bg-card-hover: #171717;
|
||
--bg-bg-marketplace-banner-plugin-tag: #e5f3ff;
|
||
--chat-bg-card: #202020;
|
||
--chat-bg-card-hover: var(--bg-bg-base-default);
|
||
--special-bgtabsoverlay: rgba(0, 0, 0, 0.20);
|
||
--special-tabsoverlay: rgba(13, 14, 15, 0.18);
|
||
--text-text-default: #e5e5e5;
|
||
--text-text-default-hover: #fafafa;
|
||
--text-text-default-active: #fafafa;
|
||
--text-text-secondary: #a1a1a1;
|
||
--text-text-secondary-hover: #e5e5e5;
|
||
--text-text-secondary-active: #e5e5e5;
|
||
--text-text-tertiary: #737373;
|
||
--text-text-disabled: #525252;
|
||
--text-text-brand: #6a6fff;
|
||
--text-text-brand-hover: #4b3fe3;
|
||
--text-text-brand-sub: var(--text-text-brand);
|
||
--text-text-brand-hover-sub: var(--text-text-brand-hover);
|
||
--text-text-onbrand: #171717;
|
||
--text-text-onaccent: #171717;
|
||
--text-text-marketplace-banner-plugin-tag: #054c8f;
|
||
--icon-icon-default: #e5e5e5;
|
||
--icon-icon-default-hover: #fafafa;
|
||
--icon-icon-default-active: #fafafa;
|
||
--icon-icon-secondary: #a1a1a1;
|
||
--icon-icon-secondary-hover: #e5e5e5;
|
||
--icon-icon-secondary-active: #e5e5e5;
|
||
--icon-icon-tertiary: #737373;
|
||
--icon-icon-disabled: #525252;
|
||
--icon-icon-brand: #6a6fff;
|
||
--icon-icon-brand-hover: #4b3fe3;
|
||
--icon-icon-brand-sub: var(--icon-icon-brand);
|
||
--icon-icon-brand-hover-sub: var(--icon-icon-brand-hover);
|
||
--icon-icon-onbrand: #0a0a0a;
|
||
--icon-icon-onaccent: #0A0A0A;
|
||
--icon-icon-white: #ffffff;
|
||
--border-border-neutral-l1: rgba(229, 229, 229, 0.10);
|
||
--border-border-neutral-l2: rgba(229, 229, 229, 0.16);
|
||
--border-border-neutral-l3: rgba(229, 229, 229, 0.20);
|
||
--border-border-brand: #6a6fff;
|
||
--border-border-brand-sub: var(--border-border-brand);
|
||
--border-border-contrast: #ffffff;
|
||
--status-primary-default: #387bff;
|
||
--status-primary-hover: #4c88ff;
|
||
--status-primary-active: #1759dd;
|
||
--status-primary-surface-l1: rgba(53, 121, 255, 0.18);
|
||
--status-primary-surface-l2: rgba(53, 121, 255, 0.28);
|
||
--status-primary-surface-l3: rgba(53, 121, 255, 0.36);
|
||
--status-success-default: #33c192;
|
||
--status-success-hover: #5ed4ad;
|
||
--status-success-active: #27b082;
|
||
--status-success-surface-l1: rgba(0, 165, 110, 0.18);
|
||
--status-success-surface-l2: rgba(0, 165, 110, 0.28);
|
||
--status-success-surface-l3: rgba(0, 165, 110, 0.36);
|
||
--status-alert-default: #d29d00;
|
||
--status-alert-hover: #dfb949;
|
||
--status-alert-active: #ab8820;
|
||
--status-alert-surface-l1: rgba(210, 157, 0, 0.16);
|
||
--status-alert-surface-l2: rgba(210, 157, 0, 0.28);
|
||
--status-alert-surface-l3: rgba(210, 157, 0, 0.36);
|
||
--status-warning-default: #d27e24;
|
||
--status-warning-hover: #d78b28;
|
||
--status-warning-active: #b46510;
|
||
--status-warning-surface-l1: rgba(210, 126, 36, 0.16);
|
||
--status-warning-surface-l2: rgba(210, 126, 36, 0.28);
|
||
--status-warning-surface-l3: rgba(210, 126, 36, 0.36);
|
||
--status-error-default: #f65a5a;
|
||
--status-error-hover: #f86262;
|
||
--status-error-active: #b33636;
|
||
--status-error-surface-l1: rgba(246, 70, 70, 0.18);
|
||
--status-error-surface-l2: rgba(246, 70, 70, 0.28);
|
||
--status-error-surface-l3: rgba(246, 70, 70, 0.36);
|
||
--accent-accent-teal: #2dd288;
|
||
--accent-accent-coral: #ff9392;
|
||
--accent-accent-amber: #dcb364;
|
||
--accent-accent-lime: #8acb3a;
|
||
--accent-accent-cyan: #04cbe5;
|
||
--accent-accent-blue: #7bb8ff;
|
||
--accent-accent-magenta: #ec93ff;
|
||
--accent-accent-violet: #bfa5ff;
|
||
--accent-accent-slate: #afb9cf;
|
||
--code-code-text: #e0e3ee;
|
||
--code-code-doc: #7f838c;
|
||
--code-code-link: #3c7eff;
|
||
--code-code-number: #f48cca;
|
||
--code-code-action: #b38cff;
|
||
--code-code-instruction: #f0d8ff;
|
||
--code-code-function: #f29d79;
|
||
--code-code-constant: #80bbff;
|
||
--code-code-parameter: #82d99f;
|
||
--code-code-attribute: #ded47e;
|
||
--code-code-tag: #f2858c;
|
||
--code-code-terminal: #e0e3ee;
|
||
--code-code-contrast: #e0e3ee;
|
||
--code-code-editor: #e0e3ee;
|
||
--special-white: #ffffff;
|
||
--special-black: #000000;
|
||
--viz-viz-series-amber: #edaa45;
|
||
--viz-viz-series-coral: #f87454;
|
||
--viz-viz-series-indigo: #b6a3ff;
|
||
--viz-viz-series-lime: #a6ea39;
|
||
--viz-viz-series-magenta: #fb9dd7;
|
||
--viz-viz-series-mint: #1dc981;
|
||
--viz-viz-series-sky: #22a5f7;
|
||
--viz-viz-series-slate: #859ead;
|
||
--viz-viz-series-teal: #78f2f2;
|
||
--viz-viz-series-violet: #b655fc;
|
||
--viz-viz-ui-bg-chart: #171717;
|
||
--viz-viz-ui-bg-tooltip: #0a0a0a;
|
||
--viz-viz-ui-chart-axis: rgba(229, 229, 229, 0.16);
|
||
--viz-viz-ui-chart-subtitle: #737373;
|
||
--viz-viz-ui-chart-tick: #737373;
|
||
--viz-viz-ui-chart-title: #e5e5e5;
|
||
--viz-viz-ui-legend-label: #737373;
|
||
--viz-viz-ui-legend-value: #e5e5e5;
|
||
--brand-blue-100: #e5f3ff;
|
||
--brand-blue-200: #cce6ff;
|
||
--brand-blue-300: #b2daff;
|
||
--brand-blue-400: #99ceff;
|
||
--brand-blue-500: #80c1ff;
|
||
--brand-blue-600: #64b4ff;
|
||
--brand-blue-700: #3792e6;
|
||
--brand-blue-800: #1071cb;
|
||
--brand-blue-900: #054c8f;
|
||
--brand-blue-1000: #00284d;
|
||
--brand-blue-grey-100: #f1eff4;
|
||
--brand-blue-grey-200: #e0e1e6;
|
||
--brand-blue-grey-300: #cfd3d8;
|
||
--brand-blue-grey-400: #bfc5ca;
|
||
--brand-blue-grey-500: #b0b5ba;
|
||
--brand-blue-grey-600: #a0a6ab;
|
||
--brand-blue-grey-700: #80898e;
|
||
--brand-blue-grey-800: #5e696e;
|
||
--brand-blue-grey-900: #404a4f;
|
||
--brand-blue-grey-1000: #21262b;
|
||
--brand-green-grey-100: #f1f4f4;
|
||
--brand-green-grey-200: #e0e6e6;
|
||
--brand-green-grey-300: #cfd8d8;
|
||
--brand-green-grey-400: #bfcaca;
|
||
--brand-green-grey-500: #b0baba;
|
||
--brand-green-grey-600: #a0abab;
|
||
--brand-green-grey-700: #808e8e;
|
||
--brand-green-grey-800: #5e6e6e;
|
||
--brand-green-grey-900: #404f4f;
|
||
--brand-green-grey-1000: #212b2b;
|
||
--brand-purple-100: #e8e5ff;
|
||
--brand-purple-200: #d2ccff;
|
||
--brand-purple-300: #bbb2ff;
|
||
--brand-purple-400: #a599ff;
|
||
--brand-purple-500: #8e80ff;
|
||
--brand-purple-600: #7864ff;
|
||
--brand-purple-700: #4c37e6;
|
||
--brand-purple-800: #2610cb;
|
||
--brand-purple-900: #15058f;
|
||
--brand-purple-1000: #09004d;
|
||
--brand-red-100: #ffe5e5;
|
||
--brand-red-200: #ffcccc;
|
||
--brand-red-300: #ffb2b2;
|
||
--brand-red-400: #ff9999;
|
||
--brand-red-500: #ff8080;
|
||
--brand-red-600: #ff6464;
|
||
--brand-red-700: #e63737;
|
||
--brand-red-800: #cb1010;
|
||
--brand-red-900: #8f0505;
|
||
--brand-red-1000: #4d0000;
|
||
--brand-yellow-100: #fff6e5;
|
||
--brand-yellow-200: #ffeccc;
|
||
--brand-yellow-300: #ffe3b2;
|
||
--brand-yellow-400: #ffda99;
|
||
--brand-yellow-500: #ffd080;
|
||
--brand-yellow-600: #ffc864;
|
||
--brand-yellow-700: #e6a637;
|
||
--brand-yellow-800: #cb8710;
|
||
--brand-yellow-900: #8f5c05;
|
||
--brand-yellow-1000: #4d3000;
|
||
--brand-blue-grey-100: #f1eff4;
|
||
--brand-blue-grey-200: #e0e1e6;
|
||
--brand-blue-grey-300: #cfd3d8;
|
||
--brand-blue-grey-400: #bfc5ca;
|
||
--brand-blue-grey-500: #b0b5ba;
|
||
--brand-blue-grey-600: #a0a6ab;
|
||
--brand-blue-grey-700: #80898e;
|
||
--brand-blue-grey-800: #5e696e;
|
||
--brand-blue-grey-900: #404a4f;
|
||
--brand-blue-grey-1000: #21262b;
|
||
--brand-green-grey-100: #f1f4f4;
|
||
--brand-green-grey-200: #e0e6e6;
|
||
--brand-green-grey-300: #cfd8d8;
|
||
--brand-green-grey-400: #bfcaca;
|
||
--brand-green-grey-500: #b0baba;
|
||
--brand-green-grey-600: #a0abab;
|
||
--brand-green-grey-700: #808e8e;
|
||
--brand-green-grey-800: #5e6e6e;
|
||
--brand-green-grey-900: #404f4f;
|
||
--brand-green-grey-1000: #212b2b;
|
||
--brand-neutral-grey-100: #f2f2f2;
|
||
--brand-neutral-grey-200: #e3e3e3;
|
||
--brand-neutral-grey-300: #d6d6d6;
|
||
--brand-neutral-grey-400: #c7c7c7;
|
||
--brand-neutral-grey-500: #bababa;
|
||
--brand-neutral-grey-600: #ababab;
|
||
--brand-neutral-grey-700: #8a8a8a;
|
||
--brand-neutral-grey-800: #686868;
|
||
--brand-neutral-grey-900: #474747;
|
||
--brand-neutral-grey-1000: #262626;
|
||
--brand-brand-50: #f2f7ff;
|
||
--brand-brand-100: #e5eaff;
|
||
--brand-brand-200: #cfd8ff;
|
||
--brand-brand-300: #aab7ff;
|
||
--brand-brand-400: #8894ff;
|
||
--brand-brand-500: #6a6fff;
|
||
--brand-brand-600: #4b3fe3;
|
||
--brand-brand-700: #3f31c6;
|
||
--brand-brand-800: #2c2290;
|
||
--brand-brand-900: #1a1759;
|
||
--brand-brand-950: #010109;
|
||
--brand-brand-grey-50: #fafafa;
|
||
--brand-brand-grey-100: #f5f5f5;
|
||
--brand-brand-grey-200: #e5e5e5;
|
||
--brand-brand-grey-300: #d4d4d4;
|
||
--brand-brand-grey-400: #a1a1a1;
|
||
--brand-brand-grey-500: #737373;
|
||
--brand-brand-grey-600: #525252;
|
||
--brand-brand-grey-700: #404040;
|
||
--brand-brand-grey-800: #262626;
|
||
--brand-brand-grey-900: #171717;
|
||
--brand-brand-grey-950: #0a0a0a;
|
||
--brand-brand-grey-50: #fafafa;
|
||
--brand-brand-grey-100: #f5f5f5;
|
||
--brand-brand-grey-200: #e5e5e5;
|
||
--brand-brand-grey-300: #d4d4d4;
|
||
--brand-brand-grey-400: #a1a1a1;
|
||
--brand-brand-grey-500: #737373;
|
||
--brand-brand-grey-600: #525252;
|
||
--brand-brand-grey-700: #404040;
|
||
--brand-brand-grey-800: #262626;
|
||
--brand-brand-grey-900: #171717;
|
||
--brand-brand-grey-950: #0a0a0a;
|
||
|
||
--body-body-xs: 10px/1.5 var(--font-family-default);
|
||
--body-body-sm: 11px/1.5 var(--font-family-default);
|
||
--body-body-sm-strong: 600 11px/1.5 var(--font-family-default);
|
||
--body-body-md: 12px/1.5 var(--font-family-default);
|
||
--body-body-md-strong: 600 12px/1.5 var(--font-family-default);
|
||
--body-body-base: 14px/1.5 var(--font-family-default);
|
||
--body-body-base-strong: 600 14px/1.5 var(--font-family-default);
|
||
--heading-heading-3xs: 600 10px/1.4 var(--font-family-heading);
|
||
--heading-heading-2xs: 600 11px/1.4 var(--font-family-heading);
|
||
--heading-heading-xs: 600 12px/1.4 var(--font-family-heading);
|
||
--heading-heading-sm: 600 13px/1.4 var(--font-family-heading);
|
||
--heading-heading-md: 600 14px/1.4 var(--font-family-heading);
|
||
--heading-heading-lg: 600 16px/1.4 var(--font-family-heading);
|
||
--heading-heading-xl: 600 20px/1.4 var(--font-family-heading);
|
||
--heading-heading-2xl: 600 24px/1.4 var(--font-family-heading);
|
||
--heading-heading-3xl: 600 32px/1.4 var(--font-family-heading);
|
||
|
||
--bg-bg-overlay-l0: rgba(224, 226, 242, 0.03);
|
||
--bg-primary-item: rgba(224, 226, 242, 0.08);
|
||
--bg-primary-item-hover: rgba(224, 226, 242, 0.12);
|
||
--border-primary-item: rgba(224, 226, 242, 0.06);
|
||
--border-primary-item-hover: rgba(224, 226, 242, 0.1);
|
||
/* 首页输入框边框颜色（纯色，用于内凹圆弧等需要精确边框的场景） */
|
||
--homepage-input-border-color: #343538;
|
||
|
||
--welcome-logo-bg: #000000;
|
||
--welcome-logo-color: var(--bg-bg-brand, #0fdc78);
|
||
|
||
--user-message-bg-solid: #1D352A;
|
||
--user-message-bg-solid-transparent: rgba(29, 53, 42, 0);
|
||
--user-message-bg-solid-sub: #2B2A38;
|
||
--user-message-bg-solid-sub-transparent: rgba(43, 42, 56, 0);
|
||
--sheet-text-color: #ffffff;
|
||
--slash-mention-bg: rgba(63, 133, 255, 0.15);
|
||
--builtin-slash-mention-bg: rgba(149, 112, 255, 0.15);
|
||
|
||
--gradient-golden: linear-gradient(180deg, #DAB444 0%, #FFEA8E 100%);
|
||
--special-bggoldoverlay: rgba(139, 128, 65, 0.12);
|
||
|
||
--bg-bg-brand-old: #32f08c;
|
||
--gradient-brand: linear-gradient(90deg, #3ee1a3 0%, #32f08c 36%, #60f2bd 71.63%, #a0fde7 100%);
|
||
--text-text-preformat-foreground: #d7ba7d;
|
||
}
|
||
|
||
[data-theme='dark-blue'], .vs-dark.solo-lite {
|
||
--shadow-elevation-50: 0 1px 2px -1px rgba(0, 0, 0, 0.45);
|
||
--shadow-elevation-100: 0 3px 9px 0 rgba(0, 0, 0, 0.25);
|
||
--shadow-elevation-100-float: 0 -3px 9px 0 rgba(0, 0, 0, 0.25);
|
||
--shadow-elevation-200: 0 6px 24px -1px rgba(0, 0, 0, 0.25);
|
||
--shadow-elevation-200-reverse: 0 -6px 24px -1px rgba(0, 0, 0, 0.25);
|
||
--shadow-elevation-300: 0 2px 8px -1px rgba(0, 0, 0, 0.18), 0 10px 24px -1px rgba(0, 0, 0, 0.30);
|
||
--shadow-elevation-100-tooltip: var(--shadow-elevation-100);
|
||
--shadow-elevation-200-menu-panel: var(--shadow-elevation-200);
|
||
--shadow-elevation-300-modal-panel: var(--shadow-elevation-300);
|
||
|
||
/* 输入框阴影颜色 */
|
||
--shadow-chat-input: 0 3px 8px 0 rgba(24, 24, 24, 0.08), 0 6px 24px -1px rgba(24, 24, 24, 0.12);
|
||
--shadow-chat-input-focused: 0 4px 12px 0 rgba(24, 24, 24, 0.08), 0 6px 32px -1px rgba(24, 24, 24, 0.12);
|
||
|
||
--bg-bg-base-default: #171717;
|
||
--bg-bg-base-secondary: #262626;
|
||
--bg-bg-base-tertiary: #404040;
|
||
--bg-bg-menu: #171717;
|
||
--bg-bg-tooltip: #171717;
|
||
--bg-bg-input: #171717;
|
||
--bg-bg-overlay-l1: rgba(212, 212, 212, 0.04);
|
||
--bg-bg-overlay-l2: rgba(212, 212, 212, 0.06);
|
||
--bg-bg-overlay-l3: rgba(212, 212, 212, 0.08);
|
||
--bg-bg-overlay-l4: rgba(212, 212, 212, 0.12);
|
||
--bg-bg-white: #ffffff;
|
||
--bg-bg-brand: #4b3fe3;
|
||
--bg-bg-brand-hover: #6a6fff;
|
||
--bg-bg-brand-active: #3f31c6;
|
||
--bg-bg-brand-disabled: rgba(75, 63, 227, 0.35);
|
||
--bg-bg-brand-popup: rgba(106, 111, 255, 0.15);
|
||
--bg-bg-brand-sub: var(--bg-bg-brand);
|
||
--bg-bg-brand-hover-sub: var(--bg-bg-brand-hover);
|
||
--bg-bg-brand-disabled-sub: var(--bg-bg-brand-disabled);
|
||
--bg-bg-brand-popup-sub: var(--bg-bg-brand-popup);
|
||
--bg-bg-invert: #e5e5e5;
|
||
--bg-bg-invert-hover: #f5f5f5;
|
||
--bg-bg-invert-active: #e5e5e5;
|
||
--bg-bg-invert-disabled: rgba(212, 212, 212, 0.06);
|
||
--bg-bg-card: #202020;
|
||
--bg-bg-card-hover: #171717;
|
||
--bg-bg-marketplace-banner-plugin-tag: #e5f3ff;
|
||
--chat-bg-card: var(--bg-bg-card);
|
||
--chat-bg-card-hover: var(--bg-bg-base-default);
|
||
--special-bgtabsoverlay: rgba(0, 0, 0, 0.20);
|
||
--special-tabsoverlay: rgba(13, 14, 15, 0.18);
|
||
--text-text-default: #e5e5e5;
|
||
--text-text-default-hover: #fafafa;
|
||
--text-text-default-active: #fafafa;
|
||
--text-text-secondary: #a1a1a1;
|
||
--text-text-secondary-hover: #e5e5e5;
|
||
--text-text-secondary-active: #e5e5e5;
|
||
--text-text-tertiary: #737373;
|
||
--text-text-disabled: #525252;
|
||
--text-text-brand: #6a6fff;
|
||
--text-text-brand-hover: #4b3fe3;
|
||
--text-text-brand-sub: var(--text-text-brand);
|
||
--text-text-brand-hover-sub: var(--text-text-brand-hover);
|
||
--text-text-onbrand: #171717;
|
||
--text-text-onaccent: #171717;
|
||
--text-text-marketplace-banner-plugin-tag: #054c8f;
|
||
--icon-icon-default: #e5e5e5;
|
||
--icon-icon-default-hover: #fafafa;
|
||
--icon-icon-default-active: #fafafa;
|
||
--icon-icon-secondary: #a1a1a1;
|
||
--icon-icon-secondary-hover: #e5e5e5;
|
||
--icon-icon-secondary-active: #e5e5e5;
|
||
--icon-icon-tertiary: #737373;
|
||
--icon-icon-disabled: #525252;
|
||
--icon-icon-brand: #6a6fff;
|
||
--icon-icon-brand-hover: #4b3fe3;
|
||
--icon-icon-brand-sub: var(--icon-icon-brand);
|
||
--icon-icon-brand-hover-sub: var(--icon-icon-brand-hover);
|
||
--icon-icon-onbrand: #0a0a0a;
|
||
--icon-icon-onaccent: #0A0A0A;
|
||
--icon-icon-white: #ffffff;
|
||
--border-border-neutral-l1: rgba(229, 229, 229, 0.10);
|
||
--border-border-neutral-l2: rgba(229, 229, 229, 0.16);
|
||
--border-border-neutral-l3: rgba(229, 229, 229, 0.20);
|
||
--border-border-brand: #6a6fff;
|
||
--border-border-brand-sub: var(--border-border-brand);
|
||
--border-border-contrast: #ffffff;
|
||
--status-primary-default: #387bff;
|
||
--status-primary-hover: #4c88ff;
|
||
--status-primary-active: #1759dd;
|
||
--status-primary-surface-l1: rgba(53, 121, 255, 0.18);
|
||
--status-primary-surface-l2: rgba(53, 121, 255, 0.28);
|
||
--status-primary-surface-l3: rgba(53, 121, 255, 0.36);
|
||
--status-success-default: #33c192;
|
||
--status-success-hover: #5ed4ad;
|
||
--status-success-active: #27b082;
|
||
--status-success-surface-l1: rgba(0, 165, 110, 0.18);
|
||
--status-success-surface-l2: rgba(0, 165, 110, 0.28);
|
||
--status-success-surface-l3: rgba(0, 165, 110, 0.36);
|
||
--status-alert-default: #d29d00;
|
||
--status-alert-hover: #dfb949;
|
||
--status-alert-active: #ab8820;
|
||
--status-alert-surface-l1: rgba(210, 157, 0, 0.16);
|
||
--status-alert-surface-l2: rgba(210, 157, 0, 0.28);
|
||
--status-alert-surface-l3: rgba(210, 157, 0, 0.36);
|
||
--status-warning-default: #d27e24;
|
||
--status-warning-hover: #d78b28;
|
||
--status-warning-active: #b46510;
|
||
--status-warning-surface-l1: rgba(210, 126, 36, 0.16);
|
||
--status-warning-surface-l2: rgba(210, 126, 36, 0.28);
|
||
--status-warning-surface-l3: rgba(210, 126, 36, 0.36);
|
||
--status-error-default: #f65a5a;
|
||
--status-error-hover: #f86262;
|
||
--status-error-active: #b33636;
|
||
--status-error-surface-l1: rgba(246, 70, 70, 0.18);
|
||
--status-error-surface-l2: rgba(246, 70, 70, 0.28);
|
||
--status-error-surface-l3: rgba(246, 70, 70, 0.36);
|
||
--accent-accent-teal: #2dd288;
|
||
--accent-accent-coral: #ff9392;
|
||
--accent-accent-amber: #dcb364;
|
||
--accent-accent-lime: #8acb3a;
|
||
--accent-accent-cyan: #04cbe5;
|
||
--accent-accent-blue: #7bb8ff;
|
||
--accent-accent-magenta: #ec93ff;
|
||
--accent-accent-violet: #bfa5ff;
|
||
--accent-accent-slate: #afb9cf;
|
||
--code-code-text: #e0e3ee;
|
||
--code-code-doc: #7f838c;
|
||
--code-code-link: #3c7eff;
|
||
--code-code-number: #f48cca;
|
||
--code-code-action: #b38cff;
|
||
--code-code-instruction: #f0d8ff;
|
||
--code-code-function: #f29d79;
|
||
--code-code-constant: #80bbff;
|
||
--code-code-parameter: #82d99f;
|
||
--code-code-attribute: #ded47e;
|
||
--code-code-tag: #f2858c;
|
||
--code-code-terminal: #e0e3ee;
|
||
--code-code-contrast: #e0e3ee;
|
||
--code-code-editor: #e0e3ee;
|
||
--special-white: #ffffff;
|
||
--special-black: #000000;
|
||
--viz-viz-series-amber: #edaa45;
|
||
--viz-viz-series-coral: #f87454;
|
||
--viz-viz-series-indigo: #b6a3ff;
|
||
--viz-viz-series-lime: #a6ea39;
|
||
--viz-viz-series-magenta: #fb9dd7;
|
||
--viz-viz-series-mint: #1dc981;
|
||
--viz-viz-series-sky: #22a5f7;
|
||
--viz-viz-series-slate: #859ead;
|
||
--viz-viz-series-teal: #78f2f2;
|
||
--viz-viz-series-violet: #b655fc;
|
||
--viz-viz-ui-bg-chart: #171717;
|
||
--viz-viz-ui-bg-tooltip: #0a0a0a;
|
||
--viz-viz-ui-chart-axis: rgba(229, 229, 229, 0.16);
|
||
--viz-viz-ui-chart-subtitle: #737373;
|
||
--viz-viz-ui-chart-tick: #737373;
|
||
--viz-viz-ui-chart-title: #e5e5e5;
|
||
--viz-viz-ui-legend-label: #737373;
|
||
--viz-viz-ui-legend-value: #e5e5e5;
|
||
--brand-blue-100: #e5f3ff;
|
||
--brand-blue-200: #cce6ff;
|
||
--brand-blue-300: #b2daff;
|
||
--brand-blue-400: #99ceff;
|
||
--brand-blue-500: #80c1ff;
|
||
--brand-blue-600: #64b4ff;
|
||
--brand-blue-700: #3792e6;
|
||
--brand-blue-800: #1071cb;
|
||
--brand-blue-900: #054c8f;
|
||
--brand-blue-1000: #00284d;
|
||
--brand-blue-grey-100: #f1eff4;
|
||
--brand-blue-grey-200: #e0e1e6;
|
||
--brand-blue-grey-300: #cfd3d8;
|
||
--brand-blue-grey-400: #bfc5ca;
|
||
--brand-blue-grey-500: #b0b5ba;
|
||
--brand-blue-grey-600: #a0a6ab;
|
||
--brand-blue-grey-700: #80898e;
|
||
--brand-blue-grey-800: #5e696e;
|
||
--brand-blue-grey-900: #404a4f;
|
||
--brand-blue-grey-1000: #21262b;
|
||
--brand-green-grey-100: #f1f4f4;
|
||
--brand-green-grey-200: #e0e6e6;
|
||
--brand-green-grey-300: #cfd8d8;
|
||
--brand-green-grey-400: #bfcaca;
|
||
--brand-green-grey-500: #b0baba;
|
||
--brand-green-grey-600: #a0abab;
|
||
--brand-green-grey-700: #808e8e;
|
||
--brand-green-grey-800: #5e6e6e;
|
||
--brand-green-grey-900: #404f4f;
|
||
--brand-green-grey-1000: #212b2b;
|
||
--brand-purple-100: #e8e5ff;
|
||
--brand-purple-200: #d2ccff;
|
||
--brand-purple-300: #bbb2ff;
|
||
--brand-purple-400: #a599ff;
|
||
--brand-purple-500: #8e80ff;
|
||
--brand-purple-600: #7864ff;
|
||
--brand-purple-700: #4c37e6;
|
||
--brand-purple-800: #2610cb;
|
||
--brand-purple-900: #15058f;
|
||
--brand-purple-1000: #09004d;
|
||
--brand-red-100: #ffe5e5;
|
||
--brand-red-200: #ffcccc;
|
||
--brand-red-300: #ffb2b2;
|
||
--brand-red-400: #ff9999;
|
||
--brand-red-500: #ff8080;
|
||
--brand-red-600: #ff6464;
|
||
--brand-red-700: #e63737;
|
||
--brand-red-800: #cb1010;
|
||
--brand-red-900: #8f0505;
|
||
--brand-red-1000: #4d0000;
|
||
--brand-yellow-100: #fff6e5;
|
||
--brand-yellow-200: #ffeccc;
|
||
--brand-yellow-300: #ffe3b2;
|
||
--brand-yellow-400: #ffda99;
|
||
--brand-yellow-500: #ffd080;
|
||
--brand-yellow-600: #ffc864;
|
||
--brand-yellow-700: #e6a637;
|
||
--brand-yellow-800: #cb8710;
|
||
--brand-yellow-900: #8f5c05;
|
||
--brand-yellow-1000: #4d3000;
|
||
--brand-blue-grey-100: #f1eff4;
|
||
--brand-blue-grey-200: #e0e1e6;
|
||
--brand-blue-grey-300: #cfd3d8;
|
||
--brand-blue-grey-400: #bfc5ca;
|
||
--brand-blue-grey-500: #b0b5ba;
|
||
--brand-blue-grey-600: #a0a6ab;
|
||
--brand-blue-grey-700: #80898e;
|
||
--brand-blue-grey-800: #5e696e;
|
||
--brand-blue-grey-900: #404a4f;
|
||
--brand-blue-grey-1000: #21262b;
|
||
--brand-green-grey-100: #f1f4f4;
|
||
--brand-green-grey-200: #e0e6e6;
|
||
--brand-green-grey-300: #cfd8d8;
|
||
--brand-green-grey-400: #bfcaca;
|
||
--brand-green-grey-500: #b0baba;
|
||
--brand-green-grey-600: #a0abab;
|
||
--brand-green-grey-700: #808e8e;
|
||
--brand-green-grey-800: #5e6e6e;
|
||
--brand-green-grey-900: #404f4f;
|
||
--brand-green-grey-1000: #212b2b;
|
||
--brand-neutral-grey-100: #f2f2f2;
|
||
--brand-neutral-grey-200: #e3e3e3;
|
||
--brand-neutral-grey-300: #d6d6d6;
|
||
--brand-neutral-grey-400: #c7c7c7;
|
||
--brand-neutral-grey-500: #bababa;
|
||
--brand-neutral-grey-600: #ababab;
|
||
--brand-neutral-grey-700: #8a8a8a;
|
||
--brand-neutral-grey-800: #686868;
|
||
--brand-neutral-grey-900: #474747;
|
||
--brand-neutral-grey-1000: #262626;
|
||
--brand-brand-50: #f2f7ff;
|
||
--brand-brand-100: #e5eaff;
|
||
--brand-brand-200: #cfd8ff;
|
||
--brand-brand-300: #aab7ff;
|
||
--brand-brand-400: #8894ff;
|
||
--brand-brand-500: #6a6fff;
|
||
--brand-brand-600: #4b3fe3;
|
||
--brand-brand-700: #3f31c6;
|
||
--brand-brand-800: #2c2290;
|
||
--brand-brand-900: #1a1759;
|
||
--brand-brand-950: #010109;
|
||
--brand-brand-grey-50: #fafafa;
|
||
--brand-brand-grey-100: #f5f5f5;
|
||
--brand-brand-grey-200: #e5e5e5;
|
||
--brand-brand-grey-300: #d4d4d4;
|
||
--brand-brand-grey-400: #a1a1a1;
|
||
--brand-brand-grey-500: #737373;
|
||
--brand-brand-grey-600: #525252;
|
||
--brand-brand-grey-700: #404040;
|
||
--brand-brand-grey-800: #262626;
|
||
--brand-brand-grey-900: #171717;
|
||
--brand-brand-grey-950: #0a0a0a;
|
||
--brand-brand-grey-50: #fafafa;
|
||
--brand-brand-grey-100: #f5f5f5;
|
||
--brand-brand-grey-200: #e5e5e5;
|
||
--brand-brand-grey-300: #d4d4d4;
|
||
--brand-brand-grey-400: #a1a1a1;
|
||
--brand-brand-grey-500: #737373;
|
||
--brand-brand-grey-600: #525252;
|
||
--brand-brand-grey-700: #404040;
|
||
--brand-brand-grey-800: #262626;
|
||
--brand-brand-grey-900: #171717;
|
||
--brand-brand-grey-950: #0a0a0a;
|
||
|
||
--body-body-xs: 10px/1.5 var(--font-family-default);
|
||
--body-body-sm: 11px/1.5 var(--font-family-default);
|
||
--body-body-sm-strong: 600 11px/1.5 var(--font-family-default);
|
||
--body-body-md: 12px/1.5 var(--font-family-default);
|
||
--body-body-md-strong: 600 12px/1.5 var(--font-family-default);
|
||
--body-body-base: 14px/1.5 var(--font-family-default);
|
||
--body-body-base-strong: 600 14px/1.5 var(--font-family-default);
|
||
--heading-heading-3xs: 600 10px/1.4 var(--font-family-heading);
|
||
--heading-heading-2xs: 600 11px/1.4 var(--font-family-heading);
|
||
--heading-heading-xs: 600 12px/1.4 var(--font-family-heading);
|
||
--heading-heading-sm: 600 13px/1.4 var(--font-family-heading);
|
||
--heading-heading-md: 600 14px/1.4 var(--font-family-heading);
|
||
--heading-heading-lg: 600 16px/1.4 var(--font-family-heading);
|
||
--heading-heading-xl: 600 20px/1.4 var(--font-family-heading);
|
||
--heading-heading-2xl: 600 24px/1.4 var(--font-family-heading);
|
||
--heading-heading-3xl: 600 32px/1.4 var(--font-family-heading);
|
||
|
||
--bg-bg-overlay-l0: rgba(176, 192, 244, 0.03);
|
||
--bg-primary-item: rgba(176, 192, 244, 0.09);
|
||
--bg-primary-item-hover: rgba(176, 192, 244, 0.13);
|
||
--border-primary-item: rgba(176, 192, 244, 0.06);
|
||
--border-primary-item-hover: rgba(176, 192, 244, 0.1);
|
||
/* 首页输入框边框颜色（纯色，用于内凹圆弧等需要精确边框的场景） */
|
||
--homepage-input-border-color: #343538;
|
||
|
||
--user-message-bg-solid: #1D352A;
|
||
--user-message-bg-solid-transparent: rgba(29, 53, 42, 0);
|
||
--user-message-bg-solid-sub: #2B2A38;
|
||
--user-message-bg-solid-sub-transparent: rgba(43, 42, 56, 0);
|
||
--sheet-text-color: #ffffff;
|
||
--slash-mention-bg: rgba(63, 133, 255, 0.15);
|
||
--builtin-slash-mention-bg: rgba(149, 112, 255, 0.15);
|
||
|
||
--gradient-golden: linear-gradient(180deg, #DAB444 0%, #FFEA8E 100%);
|
||
--special-bggoldoverlay: rgba(139, 128, 65, 0.12);
|
||
|
||
--bg-bg-brand-old: #32f08c;
|
||
--gradient-brand: linear-gradient(90deg, #3ee1a3 0%, #32f08c 36%, #60f2bd 71.63%, #a0fde7 100%);
|
||
}
|
||
</style><style data-trae-edit-ui="true" id="trae-previewer-tools-styles">:root,
|
||
[data-trae-theme='dark'] {
|
||
--trae-bg-base-default: #171717;
|
||
--trae-bg-menu: #222427;
|
||
--trae-bg-overlay-l1: rgba(255, 255, 255, 0.04);
|
||
--trae-bg-overlay-l2: rgba(255, 255, 255, 0.08);
|
||
--trae-bg-overlay-l3: rgba(255, 255, 255, 0.12);
|
||
--trae-bg-overlay-l4: rgba(255, 255, 255, 0.16);
|
||
--trae-bg-invert: #f5f9fe;
|
||
--trae-bg-invert-hover: #e8ecf0;
|
||
--trae-bg-invert-active: #dce0e4;
|
||
--trae-bg-invert-disabled: rgba(224, 226, 242, 0.12);
|
||
--trae-border-l1: #e0e2f217;
|
||
--trae-border-l2: rgba(255, 255, 255, 0.12);
|
||
--trae-border-l3: rgba(255, 255, 255, 0.08);
|
||
--trae-border-neutral-l3: rgba(229, 229, 229, 0.20);
|
||
--trae-border-brand: #6a6fff;
|
||
--trae-text-default: #f5f9fe;
|
||
--trae-text-default-hover: #f5f9fe;
|
||
--trae-text-default-active: #f5f9fe;
|
||
--trae-text-secondary: rgba(245, 249, 254, 0.5);
|
||
--trae-text-tertiary: rgba(245, 249, 254, 0.4);
|
||
--trae-text-disabled: #666b75;
|
||
--trae-text-onaccent: #222427;
|
||
--trae-icon-default: #f5f9fe;
|
||
--trae-icon-secondary: rgba(245, 249, 254, 0.5);
|
||
--trae-icon-brand: #6a6fff;
|
||
--trae-icon-onaccent: #222427;
|
||
--trae-status-success: #22c55e;
|
||
--trae-status-primary: #3b82f6;
|
||
--trae-status-primary-default: #387bff;
|
||
--trae-status-primary-surface-l1: rgba(53, 121, 255, 0.18);
|
||
--trae-status-success-default: #33c192;
|
||
--trae-status-success-surface-l1: rgba(0, 165, 110, 0.18);
|
||
--trae-status-error-default: #f65a5a;
|
||
--trae-status-error-surface-l1: rgba(246, 70, 70, 0.18);
|
||
--trae-annotation-marker-bg: #4b3fe3;
|
||
--trae-annotation-marker-text: #ffffff;
|
||
--trae-annotation-region-border: var(--trae-status-primary-default);
|
||
--trae-annotation-rect-border: var(--trae-status-error-default);
|
||
--trae-annotation-arrow-anchor-bg: var(--trae-status-primary-default);
|
||
--trae-panel-shadow: 0px 6px 24px -1px rgba(0, 0, 0, 0.16);
|
||
--trae-floating-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
|
||
--trae-shadow-elevation-50: 0 1px 2px -1px rgba(0, 0, 0, 0.45);
|
||
--trae-tab-active-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.16);
|
||
}
|
||
|
||
[data-trae-theme='light'] {
|
||
--trae-bg-base-default: #fafafa;
|
||
--trae-bg-menu: #ffffff;
|
||
--trae-bg-overlay-l1: rgba(0, 0, 0, 0.04);
|
||
--trae-bg-overlay-l2: rgba(0, 0, 0, 0.06);
|
||
--trae-bg-overlay-l3: rgba(0, 0, 0, 0.08);
|
||
--trae-bg-overlay-l4: rgba(0, 0, 0, 0.12);
|
||
--trae-bg-invert: #1f2328;
|
||
--trae-bg-invert-hover: #32383f;
|
||
--trae-bg-invert-active: #444d56;
|
||
--trae-bg-invert-disabled: rgba(115, 115, 115, 0.20);
|
||
--trae-border-l1: rgba(0, 0, 0, 0.1);
|
||
--trae-border-l2: rgba(0, 0, 0, 0.12);
|
||
--trae-border-l3: rgba(0, 0, 0, 0.08);
|
||
--trae-border-neutral-l3: rgba(115, 115, 115, 0.36);
|
||
--trae-border-brand: #4b3fe3;
|
||
--trae-text-default: #1f2328;
|
||
--trae-text-default-hover: #111214;
|
||
--trae-text-default-active: #111214;
|
||
--trae-text-secondary: rgba(31, 35, 40, 0.5);
|
||
--trae-text-tertiary: rgba(31, 35, 40, 0.4);
|
||
--trae-text-disabled: #a1a1a1;
|
||
--trae-text-onaccent: #ffffff;
|
||
--trae-icon-default: #1f2328;
|
||
--trae-icon-secondary: rgba(31, 35, 40, 0.5);
|
||
--trae-icon-brand: #4b3fe3;
|
||
--trae-icon-onaccent: #ffffff;
|
||
--trae-status-success: #22c55e;
|
||
--trae-status-primary: #3b82f6;
|
||
--trae-status-primary-default: #2f74ff;
|
||
--trae-status-primary-surface-l1: rgba(47, 116, 255, 0.12);
|
||
--trae-status-success-default: #15a877;
|
||
--trae-status-success-surface-l1: rgba(64, 176, 139, 0.12);
|
||
--trae-status-error-default: #e8463a;
|
||
--trae-status-error-surface-l1: rgba(232, 70, 58, 0.12);
|
||
--trae-annotation-marker-bg: #4b3fe3;
|
||
--trae-annotation-marker-text: #ffffff;
|
||
--trae-annotation-region-border: var(--trae-status-primary-default);
|
||
--trae-annotation-rect-border: var(--trae-status-error-default);
|
||
--trae-annotation-arrow-anchor-bg: var(--trae-status-primary-default);
|
||
--trae-panel-shadow: 0px 6px 24px -1px rgba(24, 24, 24, 0.06);
|
||
--trae-floating-shadow: 0px 2px 8px 0px rgba(24, 24, 24, 0.2);
|
||
--trae-shadow-elevation-50: 0 1px 2px -1px rgba(24, 24, 24, 0.08);
|
||
--trae-tab-active-shadow: 0px 1px 2px -1px rgba(24, 24, 24, 0.08);
|
||
}
|
||
|
||
@keyframes trae-spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.trae-edit-mode-active body *:not([data-trae-edit-ui]):not([data-trae-edit-ui] *) {
|
||
transition: none !important;
|
||
animation-play-state: paused !important;
|
||
}
|
||
|
||
.trae-browser-inspect-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
/* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- 独立注入 CSS，无法访问 :root 变量 */
|
||
z-index: 1400; /* z-layer: fullscreen (1400) */
|
||
pointer-events: auto;
|
||
background: transparent;
|
||
}
|
||
|
||
.trae-browser-inspect-highlight-box {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
/* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- 独立注入 CSS，无法访问 :root 变量 */
|
||
z-index: 1401; /* above overlay */
|
||
display: none;
|
||
}
|
||
|
||
.trae-browser-inspect-highlight-tag {
|
||
position: absolute;
|
||
left: 0px;
|
||
top: 0px;
|
||
height: 18px;
|
||
padding: 0 6px;
|
||
box-sizing: border-box;
|
||
border-radius: 4px;
|
||
background-color: var(--trae-status-success-default);
|
||
color: var(--trae-text-onaccent);
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
display: none;
|
||
align-items: center;
|
||
/* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- 独立注入 CSS，无法访问 :root 变量 */
|
||
z-index: 1402; /* above highlight-box */
|
||
}
|
||
|
||
.trae-browser-inspect-highlight-box-show {
|
||
display: flex;
|
||
}
|
||
|
||
.trae-browser-inspect-highlight-tag.trae-browser-inspect-highlight-box-show {
|
||
display: none;
|
||
}
|
||
|
||
.trae-browser-inspect-select-button.trae-browser-inspect-highlight-box-show {
|
||
display: block !important;
|
||
}
|
||
|
||
.trae-browser-inspect-select-button {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
display: none;
|
||
/* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- 独立注入 CSS，无法访问 :root 变量 */
|
||
z-index: 1402; /* above overlay, must receive pointer events */
|
||
}
|
||
|
||
.trae-browser-inspect-select-highlight-box {
|
||
background: transparent !important;
|
||
}
|
||
|
||
.trae-browser-inspect-select-highlight-box .trae-browser-inspect-highlight-tag {
|
||
background-color: var(--trae-status-success-default);
|
||
}
|
||
|
||
.trae-add-to-chat-card {
|
||
display: block;
|
||
overflow: hidden;
|
||
background: var(--trae-bg-menu);
|
||
border: 1px solid var(--trae-border-l1);
|
||
border-radius: 8px;
|
||
box-shadow: var(--trae-floating-shadow);
|
||
transition:
|
||
width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
|
||
height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.trae-add-to-chat-content {
|
||
position: relative;
|
||
width: max-content;
|
||
}
|
||
|
||
.trae-fade-exit {
|
||
opacity: 0;
|
||
transition: opacity 0.15s ease-out;
|
||
}
|
||
|
||
.trae-fade-enter {
|
||
opacity: 1;
|
||
transition: opacity 0.2s ease-in;
|
||
}
|
||
|
||
.trae-buttons-view {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0;
|
||
padding: 4px;
|
||
background: transparent;
|
||
}
|
||
|
||
.trae-action-button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 4px 8px;
|
||
background: transparent;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transform: none !important;
|
||
transition: none !important;
|
||
animation: none !important;
|
||
}
|
||
|
||
.trae-action-button:hover {
|
||
background: var(--trae-bg-overlay-l2);
|
||
}
|
||
|
||
.trae-action-button:active {
|
||
background: var(--trae-bg-overlay-l3);
|
||
}
|
||
|
||
.trae-action-button:focus-visible {
|
||
outline: 2px solid var(--trae-status-primary);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
.trae-action-button-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 16px;
|
||
height: 16px;
|
||
color: var(--trae-icon-default);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.trae-action-button-title {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
line-height: 16px;
|
||
color: var(--trae-text-default);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.trae-edit-toolbar-button-active {
|
||
background: var(--trae-status-primary-surface-l1) !important;
|
||
color: var(--trae-status-primary-default) !important;
|
||
}
|
||
|
||
.trae-edit-toolbar button[data-action='alignment-dropdown']:hover,
|
||
.trae-edit-toolbar button[data-action='text-align-dropdown']:hover,
|
||
.trae-edit-toolbar button[data-action='font-decrease']:hover,
|
||
.trae-edit-toolbar button[data-action='font-increase']:hover,
|
||
.trae-edit-toolbar button[data-action^='align-']:hover {
|
||
border-radius: 8px;
|
||
background: var(--bg-bg-overlay-l1, rgba(115, 115, 115, 0.08)) !important;
|
||
}
|
||
|
||
.trae-edit-toolbar button[data-action='alignment-dropdown']:active,
|
||
.trae-edit-toolbar button[data-action='text-align-dropdown']:active,
|
||
.trae-edit-toolbar button[data-action='font-decrease']:active,
|
||
.trae-edit-toolbar button[data-action='font-increase']:active,
|
||
.trae-edit-toolbar button[data-action^='align-']:active {
|
||
border-radius: 8px;
|
||
background: var(--bg-bg-overlay-l2, rgba(115, 115, 115, 0.12)) !important;
|
||
}
|
||
|
||
.trae-comment-input {
|
||
background: transparent;
|
||
color: var(--trae-text-default);
|
||
caret-color: var(--trae-text-default);
|
||
}
|
||
|
||
.trae-comment-input::placeholder {
|
||
color: var(--trae-text-tertiary);
|
||
}
|
||
|
||
.trae-edit-panel [data-trae-tooltip] {
|
||
position: relative;
|
||
}
|
||
|
||
.trae-edit-panel [data-trae-tooltip]::after {
|
||
content: attr(data-trae-tooltip);
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: calc(100% + 8px);
|
||
z-index: var(--z-max, 9999);
|
||
padding: 6px 10px;
|
||
border-radius: 6px;
|
||
background: var(--bg-bg-invert, var(--trae-bg-invert));
|
||
color: var(--text-text-onaccent, var(--trae-text-onaccent));
|
||
box-shadow: var(--trae-floating-shadow);
|
||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', sans-serif;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
line-height: 16px;
|
||
letter-spacing: 0.039px;
|
||
white-space: nowrap;
|
||
pointer-events: none;
|
||
box-sizing: border-box;
|
||
opacity: 0;
|
||
transform: translateX(-50%);
|
||
visibility: hidden;
|
||
}
|
||
|
||
.trae-edit-panel [data-trae-tooltip]::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: calc(100% + 5px);
|
||
z-index: var(--z-max, 9999);
|
||
width: 8px;
|
||
height: 4px;
|
||
background: var(--bg-bg-invert, var(--trae-bg-invert));
|
||
clip-path: polygon(0 0, 100% 0, 50% 100%);
|
||
transform: translateX(-50%);
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
}
|
||
|
||
.trae-edit-panel [data-trae-tooltip]:hover::after,
|
||
.trae-edit-panel [data-trae-tooltip]:focus-visible::after,
|
||
.trae-edit-panel [data-trae-tooltip]:hover::before,
|
||
.trae-edit-panel [data-trae-tooltip]:focus-visible::before {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.trae-comment-btn {
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: background-color 0.15s ease;
|
||
}
|
||
|
||
.trae-comment-btn:disabled {
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.trae-comment-btn:focus-visible {
|
||
outline: 2px solid var(--trae-status-primary);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
.trae-comment-btn-primary {
|
||
background: var(--trae-bg-invert);
|
||
color: var(--trae-text-onaccent);
|
||
}
|
||
|
||
.trae-comment-btn-primary:hover:not(:disabled) {
|
||
background: var(--trae-bg-invert-hover);
|
||
}
|
||
|
||
.trae-comment-btn-primary:active:not(:disabled) {
|
||
background: var(--trae-bg-invert-active);
|
||
}
|
||
|
||
.trae-comment-btn-primary:disabled {
|
||
background: var(--trae-bg-invert-disabled);
|
||
color: var(--trae-text-disabled);
|
||
}
|
||
|
||
.trae-comment-btn-secondary {
|
||
background: var(--trae-bg-overlay-l2);
|
||
color: var(--trae-text-default);
|
||
}
|
||
|
||
.trae-comment-btn-secondary:hover:not(:disabled) {
|
||
background: var(--trae-bg-overlay-l3);
|
||
}
|
||
|
||
.trae-comment-btn-secondary:active:not(:disabled) {
|
||
background: var(--trae-bg-overlay-l4);
|
||
}
|
||
|
||
.trae-comment-btn-secondary:disabled {
|
||
background: var(--trae-bg-overlay-l2);
|
||
color: var(--trae-text-disabled);
|
||
}
|
||
|
||
.trae-comment-btn-text {
|
||
background: transparent;
|
||
color: var(--trae-text-default);
|
||
}
|
||
|
||
.trae-comment-btn-text:hover:not(:disabled) {
|
||
border-radius: 8px;
|
||
background: var(--bg-bg-overlay-l1, var(--trae-bg-overlay-l1));
|
||
color: var(--trae-text-default-hover);
|
||
}
|
||
|
||
.trae-comment-btn-text:active:not(:disabled) {
|
||
border-radius: 8px;
|
||
background: var(--trae-bg-overlay-l2);
|
||
color: var(--trae-text-default-active);
|
||
}
|
||
|
||
.trae-comment-btn-text:disabled {
|
||
background: transparent;
|
||
color: var(--trae-text-disabled);
|
||
}
|
||
|
||
.trae-marking-btn {
|
||
justify-content: center;
|
||
}
|
||
|
||
.trae-marking-btn:hover:not(:disabled) {
|
||
background: var(--trae-bg-overlay-l1) !important;
|
||
}
|
||
|
||
.trae-marking-btn:active:not(:disabled) {
|
||
background: var(--trae-bg-overlay-l2) !important;
|
||
}
|
||
|
||
.trae-marking-btn-active {
|
||
background: var(--trae-status-primary-surface-l1) !important;
|
||
color: var(--trae-status-primary-default) !important;
|
||
}
|
||
|
||
.trae-marking-btn:disabled {
|
||
color: var(--trae-text-disabled) !important;
|
||
cursor: not-allowed !important;
|
||
}
|
||
|
||
.trae-action-button-shortcut {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
color: var(--trae-icon-secondary);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.trae-shortcut-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
}
|
||
|
||
.trae-shortcut-key {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
line-height: 12px;
|
||
color: var(--trae-icon-secondary);
|
||
}
|
||
|
||
.trae-add-to-chat-divider {
|
||
width: 2px;
|
||
height: 12px;
|
||
padding: 0 6px;
|
||
box-sizing: content-box;
|
||
background-clip: content-box;
|
||
background-color: var(--trae-border-l2);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.trae-editor-view {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 320px;
|
||
padding: 8px;
|
||
background: transparent;
|
||
}
|
||
|
||
.trae-editor-text-container {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8px;
|
||
background: var(--trae-bg-overlay-l1);
|
||
border: 1px solid var(--trae-border-l3);
|
||
border-radius: 4px;
|
||
gap: 8px;
|
||
}
|
||
|
||
.trae-editor-textarea {
|
||
flex: 1;
|
||
padding: 0 2px;
|
||
border: none;
|
||
background: transparent;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
line-height: 20px;
|
||
color: var(--trae-text-default);
|
||
resize: none;
|
||
outline: none;
|
||
overflow-y: auto;
|
||
max-height: 140px;
|
||
}
|
||
|
||
.trae-editor-textarea::placeholder {
|
||
color: var(--trae-text-tertiary);
|
||
}
|
||
|
||
.trae-editor-action-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: 4px;
|
||
max-height: 0;
|
||
opacity: 0;
|
||
overflow: hidden;
|
||
transition:
|
||
max-height 0.2s ease-out,
|
||
opacity 0.2s ease-out,
|
||
margin-top 0.2s ease-out;
|
||
}
|
||
|
||
.trae-editor-action-bar-visible {
|
||
max-height: 32px;
|
||
opacity: 1;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.trae-editor-cancel-button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 24px;
|
||
padding: 0 4px;
|
||
background: var(--trae-bg-overlay-l2);
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: background-color 0.15s ease;
|
||
}
|
||
|
||
.trae-editor-cancel-button:hover {
|
||
background: var(--trae-bg-overlay-l3);
|
||
}
|
||
|
||
.trae-editor-cancel-button:active {
|
||
background: var(--trae-bg-overlay-l3);
|
||
}
|
||
|
||
.trae-editor-cancel-button:focus-visible {
|
||
outline: 2px solid var(--trae-status-primary);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
.trae-editor-cancel-text {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
line-height: 16px;
|
||
color: var(--trae-text-default);
|
||
white-space: nowrap;
|
||
padding: 0 4px;
|
||
}
|
||
|
||
.trae-editor-submit-button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 24px;
|
||
padding: 0 8px;
|
||
background: var(--trae-bg-invert);
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: background-color 0.15s ease;
|
||
}
|
||
|
||
.trae-editor-submit-button:hover {
|
||
background: var(--trae-bg-invert-hover);
|
||
}
|
||
|
||
.trae-editor-submit-button:active {
|
||
background: var(--trae-bg-invert-active);
|
||
}
|
||
|
||
.trae-editor-submit-button:focus-visible {
|
||
outline: 2px solid var(--trae-status-primary);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
.trae-editor-submit-text {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
line-height: 16px;
|
||
color: var(--trae-text-onaccent);
|
||
white-space: nowrap;
|
||
padding: 0 4px;
|
||
}
|
||
|
||
.trae-editor-submit-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 12px;
|
||
height: 12px;
|
||
color: var(--trae-icon-onaccent);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.trae-success-view {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
padding: 0 12px;
|
||
height: 32px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.trae-success-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 16px;
|
||
height: 16px;
|
||
color: var(--trae-status-success);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.trae-success-text {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
line-height: 18px;
|
||
color: var(--trae-text-default);
|
||
user-select: none;
|
||
}
|
||
</style></head>
|
||
<body>
|
||
|
||
<!-- ========== 左：手机模拟器 ========== -->
|
||
<div class="phone-frame">
|
||
<div class="phone-notch"></div>
|
||
<div class="phone-home-bar"></div>
|
||
|
||
<!-- 流程提示条 -->
|
||
<div class="flow-indicator" id="flowIndicator">
|
||
<div class="flow-step active" id="step1">
|
||
<span class="flow-step-num">1</span>
|
||
<span>车辆管理页</span>
|
||
</div>
|
||
<span class="flow-arrow">▶</span>
|
||
<div class="flow-step active" id="step2">
|
||
<span class="flow-step-num">2</span>
|
||
<span>拍摄引导</span>
|
||
</div>
|
||
<span class="flow-arrow">▶</span>
|
||
<div class="flow-step" id="step3">
|
||
<span class="flow-step-num">3</span>
|
||
<span>预览确认</span>
|
||
</div>
|
||
<span class="flow-arrow">▶</span>
|
||
<div class="flow-step" id="step4">
|
||
<span class="flow-step-num">4</span>
|
||
<span>回填上传</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page-content">
|
||
|
||
<!-- ===== 第1页：车辆管理页（现有页面） ===== -->
|
||
<div class="vehicle-page hide" id="vehiclePage">
|
||
<div class="vehicle-nav">
|
||
<span class="back-btn">❮</span>
|
||
<span class="title">添加车辆</span>
|
||
<span class="spacer"></span>
|
||
</div>
|
||
<div class="vehicle-body">
|
||
<!-- 行驶证主页 -->
|
||
<div class="upload-item">
|
||
<div class="upload-label"><span class="required">*</span>行驶证主页</div>
|
||
<div class="upload-slot" id="slotFront" onclick="openCameraGuide('front')">
|
||
<span class="plus-icon">+</span>
|
||
<span class="guide-badge">引导拍摄</span>
|
||
</div>
|
||
</div>
|
||
<!-- 行驶证副页 -->
|
||
<div class="upload-item">
|
||
<div class="upload-label"><span class="required">*</span>行驶证副页</div>
|
||
<div class="upload-slot" id="slotBack" onclick="openCameraGuide('back')">
|
||
<span class="plus-icon">+</span>
|
||
<span class="guide-badge">引导拍摄</span>
|
||
</div>
|
||
</div>
|
||
<!-- 行驶证车辆照片 -->
|
||
<div class="upload-item">
|
||
<div class="upload-label"><span class="required">*</span>行驶证车辆照片</div>
|
||
<div class="upload-slot" id="slotCar" onclick="openCameraGuide('car')">
|
||
<span class="plus-icon">+</span>
|
||
<span class="guide-badge">引导拍摄</span>
|
||
</div>
|
||
</div>
|
||
<!-- 车头照（不进入引导） -->
|
||
<div class="upload-item">
|
||
<div class="upload-label"><span class="required">*</span>车头照</div>
|
||
<div class="upload-slot" onclick="alert('车头照：保持现有 van-uploader 直接调起系统选择器，不进入拍摄引导页')" style="border-style: dashed; border-color: #ddd;">
|
||
<span class="plus-icon" style="color:#ddd;">+</span>
|
||
</div>
|
||
</div>
|
||
<!-- 车牌号 -->
|
||
<div class="form-field">
|
||
<div class="field-label">车牌号</div>
|
||
<div class="field-value" id="carNumField">（OCR自动回填）</div>
|
||
</div>
|
||
<!-- 车辆类别 -->
|
||
<div class="form-field">
|
||
<div class="field-label">车辆类别</div>
|
||
<div class="field-value">请选择</div>
|
||
</div>
|
||
</div>
|
||
<div class="vehicle-footer">
|
||
<button class="submit-btn" onclick="alert('提交（现有逻辑不变）')">保存</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 第2页：拍摄引导页（新增） ===== -->
|
||
<div class="camera-page show" id="cameraPage">
|
||
<div class="camera-bg"></div>
|
||
|
||
<div class="camera-nav">
|
||
<span class="back-btn" onclick="closeCameraGuide()">❮</span>
|
||
<span class="title" id="cameraTitle">拍摄行驶证车辆照片</span>
|
||
<span class="spacer"></span>
|
||
</div>
|
||
|
||
<div class="guide-layer">
|
||
<!-- 顶部主指令卡 -->
|
||
<div class="guide-hero">
|
||
<div class="guide-hero-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="3" y="5" width="18" height="14" rx="2"></rect>
|
||
<path d="M3 9h18"></path>
|
||
<circle cx="8" cy="13.5" r="1.6"></circle>
|
||
<path d="M11 12.5h7M11 15h5"></path>
|
||
</svg>
|
||
</div>
|
||
<div class="guide-hero-text">
|
||
<div class="guide-hero-title" id="cameraHeroTitle">请将车辆对准取景框</div>
|
||
<div class="guide-hero-sub" id="cameraHeroSub">从卡套内拿出，避免反光</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 取景框 -->
|
||
<div class="guide-frame-outer">
|
||
<span class="corner tl"></span>
|
||
<span class="corner tr"></span>
|
||
<span class="corner bl"></span>
|
||
<span class="corner br"></span>
|
||
<div class="guide-frame-border"></div>
|
||
<div class="guide-hole">
|
||
<div class="guide-mask"></div>
|
||
<div class="license-template lt-car-page" id="licenseTemplate"><div class="lt-inner"><div class="lt-title"><div class="lt-title-2">车辆照片</div></div></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部取景要点（图标化 do / don't） -->
|
||
<div class="guide-tips">
|
||
<div class="tip-item ok">
|
||
<span class="tip-ico">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 8V4h4M16 4h4v4M20 16v4h-4M8 20H4v-4"></path>
|
||
</svg>
|
||
</span>
|
||
<span class="tip-label">四角入框</span>
|
||
</div>
|
||
<div class="tip-item ok">
|
||
<span class="tip-ico">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 12h16M7 7h10M7 17h10"></path>
|
||
</svg>
|
||
</span>
|
||
<span class="tip-label">平放正向</span>
|
||
</div>
|
||
<div class="tip-item warn">
|
||
<span class="tip-ico">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="4"></circle>
|
||
<path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M5 19l2-2"></path>
|
||
</svg>
|
||
</span>
|
||
<span class="tip-label">避免反光</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="shoot-bar">
|
||
<div class="shoot-btn" onclick="takePhoto()"></div>
|
||
<div class="shoot-label">点击拍照</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 第3页：预览确认页（新增） ===== -->
|
||
<div class="preview-page" id="previewPage">
|
||
<div class="camera-nav">
|
||
<span class="back-btn" onclick="cancelPreview()">❮</span>
|
||
<span class="title">照片预览</span>
|
||
<span class="spacer"></span>
|
||
</div>
|
||
<div class="preview-img-wrap">
|
||
<img class="preview-img" id="previewImg" src="" alt="预览">
|
||
</div>
|
||
<div class="preview-btns">
|
||
<button class="preview-btn btn-retake" onclick="retake()">重拍</button>
|
||
<button class="preview-btn btn-confirm" onclick="confirmPhoto()">确认使用</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ========== 右：交互说明面板 ========== -->
|
||
<div class="side-panel">
|
||
<div class="panel-header">原型说明 — 调度App H5行驶证拍摄取景引导（基于现有流程改造）</div>
|
||
<div class="panel-body">
|
||
|
||
<div class="tab-bar">
|
||
<div class="tab-btn active" onclick="switchTab(this,'intro')">交互流程</div>
|
||
<div class="tab-btn" onclick="switchTab(this,'spec')">设计规范</div>
|
||
<div class="tab-btn" onclick="switchTab(this,'flow')">流程对接</div>
|
||
<div class="tab-btn" onclick="switchTab(this,'rules')">业务规则</div>
|
||
</div>
|
||
|
||
<!-- Tab 1: 交互流程 -->
|
||
<div id="tab-intro">
|
||
<div class="action-hint">
|
||
<strong>点击左侧手机中"行驶证主页"上传槽位</strong>，即可体验完整流程：车辆管理页 → 拍摄引导页 → 预览确认 → 回填上传。
|
||
</div>
|
||
|
||
<h4>第1步：车辆管理页（现有页面）</h4>
|
||
<ul>
|
||
<li>页面为现有的 <code>vehicleAdd.vue</code>，展示行驶证三个上传槽位</li>
|
||
<li>行驶证槽位标注蓝色"引导拍摄"角标，表示点击后会进入拍摄引导</li>
|
||
<li><strong>车头照</strong>槽位无角标，点击后保持现有 <code>van-uploader</code> 直接调起系统选择器的逻辑</li>
|
||
</ul>
|
||
|
||
<h4>第2步：拍摄引导页（新增）</h4>
|
||
<ul>
|
||
<li>点击行驶证槽位 → 拦截 <code>van-uploader</code> 默认行为 → 进入拍摄引导页</li>
|
||
<li>底层为 WebRTC <code>getUserMedia</code> 相机预览（原型中为模拟背景）</li>
|
||
<li>叠加半透明遮罩 + 镂空引导框（约 1.43:1 横向比例）</li>
|
||
<li>四角 L 形青色角标辅助对齐证件边缘</li>
|
||
<li>引导框内叠加<strong>证件模板轮廓</strong>（半透明）：标题位置、照片区域、信息区域、印章位置，帮助用户确认证件方向和位置</li>
|
||
<li>三种页面展示不同模板：主页（标题+分隔线+照片位+信息区+底部日期区+左下印章）、副页（三栏字段+检验记录+条形码）、车辆照片（车辆轮廓）</li>
|
||
<li>上方提示："请将行驶证从卡套内取出后拍摄，避免反光"</li>
|
||
<li>下方提示："请将证件对准框内，确保边缘完整、文字清晰"</li>
|
||
<li>点击底部白色圆形"拍摄"按钮 → 捕获画面</li>
|
||
</ul>
|
||
|
||
<h4>第3步：预览确认页（新增）</h4>
|
||
<ul>
|
||
<li>展示刚拍摄的照片</li>
|
||
<li><strong>重拍</strong>：返回拍摄引导页重新拍摄</li>
|
||
<li><strong>确认使用</strong>：将照片传回现有流程</li>
|
||
</ul>
|
||
|
||
<h4>第4步：回填上传（现有流程，完全不变）</h4>
|
||
<ul>
|
||
<li>确认使用后，构造 <code>{ file: File, content: dataURL }</code> 对象</li>
|
||
<li>传入现有的 <code>after-read</code> Handler（如 <code>vehicleLicenseFrontHandler</code>）</li>
|
||
<li>→ <code>compressFileItem()</code> 压缩</li>
|
||
<li>→ <code>uploadImage()</code> 上传（<code>POST /order/uploadImage</code>）</li>
|
||
<li>→ <code>ocrHandler()</code> OCR 识别（<code>POST /agg-api/tencent-ocr/unifiedOCR</code>）</li>
|
||
<li>→ 回填表单字段（车牌号、车架号等）</li>
|
||
<li>槽位显示拍摄的照片缩略图</li>
|
||
</ul>
|
||
|
||
<h4>三页差异化（标题+模板不同）</h4>
|
||
<ul>
|
||
<li><strong>行驶证主页</strong>：标题"拍摄行驶证主页" → 极简模板：标题+分隔线+左侧照片位+右侧信息区+底部日期区+左下印章 → 对应 <code>vehicleLicenseFrontHandler</code></li>
|
||
<li><strong>行驶证副页</strong>：标题"拍摄行驶证副页" → 模板：三栏字段（号牌号码/核定载人数/整备质量 + 档案编号/总质量 + 检验记录）+条形码 → 对应 <code>vehicleLicenseBackHandler</code></li>
|
||
<li><strong>行驶证车辆照片</strong>：标题"拍摄行驶证车辆照片" → 模板：车辆SVG轮廓 → 对应 <code>vehicleLicenseCarHandler</code></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Tab 2: 设计规范 -->
|
||
<div id="tab-spec" style="display:none;">
|
||
<h4>引导框规格</h4>
|
||
<table class="spec-table">
|
||
<tbody><tr><th>项目</th><th>规格</th></tr>
|
||
<tr><td>引导框宽高比</td><td>约 1.43:1（横向，匹配行驶证实物比例）</td></tr>
|
||
<tr><td>引导框宽度</td><td>占屏幕宽度的 80%（约 300px @375px屏）</td></tr>
|
||
<tr><td>遮罩透明度</td><td>rgba(0,0,0,0.55)（约55%黑色）</td></tr>
|
||
<tr><td>遮罩实现方式</td><td>box-shadow: 0 0 0 9999px rgba(0,0,0,0.55)</td></tr>
|
||
<tr><td>角标颜色</td><td>#4fc3f7（浅青色，高对比度）</td></tr>
|
||
<tr><td>角标粗细</td><td>3px solid</td></tr>
|
||
<tr><td>角标尺寸</td><td>22px × 22px</td></tr>
|
||
<tr><td>提示文字颜色</td><td>#fff（白色）</td></tr>
|
||
<tr><td>提示文字阴影</td><td>0 1px 4px rgba(0,0,0,0.6)</td></tr>
|
||
<tr><td>拍摄按钮</td><td>72px 圆环，4px白边，中心58px白点</td></tr>
|
||
<tr><td>证件模板叠层</td><td>引导框内叠加行驶证轮廓（标题/字段/印章），透明度约20%-35%</td></tr>
|
||
<tr><td>主页模板</td><td>极简：标题+分隔线+左侧照片位+右侧信息区+底部日期区+左下印章（不展示具体字段标签）</td></tr>
|
||
<tr><td>副页模板</td><td>标题+三栏字段（号牌/载人数/质量 + 档案编号/总质量 + 检验记录）+条形码</td></tr>
|
||
<tr><td>车辆照片模板</td><td>车辆SVG轮廓（车身/车窗/车轮），引导居中拍摄</td></tr>
|
||
</tbody></table>
|
||
|
||
<h4>屏幕适配</h4>
|
||
<ul>
|
||
<li>320px - 430px 宽度范围自适应缩放</li>
|
||
<li>竖屏：引导框为横向矩形（行驶证横向放置）</li>
|
||
<li>横屏：引导框自适应为纵向矩形（可选适配）</li>
|
||
<li>提示文字自动换行，不截断</li>
|
||
<li>底部拍摄按钮始终在安全区域内（避开 Home 指示条）</li>
|
||
</ul>
|
||
|
||
<h4>降级方案</h4>
|
||
<div class="warn-box">
|
||
<p>若设备不支持 <code>getUserMedia</code>（部分低版本 Android WebView 或非 HTTPS 环境）：<br>
|
||
→ 降级为 <code>van-uploader</code> 直接调起系统选择器<br>
|
||
→ 不展示引导框<br>
|
||
→ 后续压缩→上传→OCR流程正常执行</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab 3: 流程对接 -->
|
||
<div id="tab-flow" style="display:none;">
|
||
<h4>现有代码流程（改造前）</h4>
|
||
<div class="flow-diagram">van-uploader 点击
|
||
│
|
||
▼
|
||
系统选择器（accept="image/*"）
|
||
│
|
||
▼
|
||
after-read 回调
|
||
│ vehicleLicenseFrontHandler()
|
||
│ vehicleLicenseBackHandler()
|
||
│ vehicleLicenseCarHandler()
|
||
▼
|
||
compressFileItem() ← 前端压缩
|
||
│
|
||
▼
|
||
uploadImage() ← POST /order/uploadImage
|
||
│
|
||
▼
|
||
ocrHandler() ← POST /agg-api/.../unifiedOCR
|
||
│
|
||
▼
|
||
回填表单字段</div>
|
||
|
||
<h4>改造后流程</h4>
|
||
<div class="flow-diagram">van-uploader 点击（行驶证槽位）
|
||
│
|
||
▼ ← 新增：拦截点击
|
||
拍摄引导页（CameraGuide.vue）
|
||
│ · WebRTC getUserMedia 相机预览
|
||
│ · 半透明遮罩 + 引导框 + 角标
|
||
│ · 文字提示
|
||
▼
|
||
点击拍摄 → Canvas 捕获帧
|
||
│
|
||
▼ ← 新增：预览确认
|
||
预览确认页
|
||
│ · 重拍 → 返回拍摄引导页
|
||
│ · 确认使用 ↓
|
||
▼
|
||
构造 { file: File, content: dataURL }
|
||
│
|
||
▼ ← 传入现有 Handler
|
||
vehicleLicenseFrontHandler(file)
|
||
│
|
||
▼ ── 以下流程完全不变 ──
|
||
compressFileItem() ← 前端压缩
|
||
│
|
||
▼
|
||
uploadImage() ← POST /order/uploadImage
|
||
│
|
||
▼
|
||
ocrHandler() ← POST /agg-api/.../unifiedOCR
|
||
│
|
||
▼
|
||
回填表单字段</div>
|
||
|
||
<div class="highlight-box">
|
||
<p><strong>核心改造点：</strong>拍摄确认后，将 Canvas 捕获的 Blob 构造为 <code>{ file: File, content: dataURL }</code> 格式，调用对应槽位的现有 Handler 方法。后续 <code>compressFileItem</code> → <code>uploadImage</code> → <code>ocrHandler</code> 链路完全复用，零改动。</p>
|
||
</div>
|
||
|
||
<h4>涉及文件</h4>
|
||
<table class="spec-table">
|
||
<tbody><tr><th>文件</th><th>变更</th></tr>
|
||
<tr><td><code>vehicleAdd.vue</code></td><td>改造：行驶证三个槽位增加点击拦截</td></tr>
|
||
<tr><td><code>CameraGuide.vue</code></td><td>新增：拍摄引导+预览确认组件</td></tr>
|
||
<tr><td><code>mine.js</code></td><td>不变：uploadImage / ocrHandler</td></tr>
|
||
<tr><td>后端</td><td>不变</td></tr>
|
||
</tbody></table>
|
||
</div>
|
||
|
||
<!-- Tab 4: 业务规则 -->
|
||
<div id="tab-rules" style="display:none;">
|
||
<h4>触发规则</h4>
|
||
<ul>
|
||
<li>仅<strong>行驶证三个槽位</strong>（主页/副页/车辆照片）进入拍摄引导页</li>
|
||
<li><strong>车头照、保单</strong>等其他槽位保持现有 <code>van-uploader</code> 直接调起选择器逻辑</li>
|
||
<li>首次上传和重新上传均触发引导页</li>
|
||
<li>修改车辆时重新上传行驶证同样进入引导页</li>
|
||
</ul>
|
||
|
||
<h4>拍摄规则</h4>
|
||
<ul>
|
||
<li>引导框仅做<strong>视觉辅助</strong>，不强制拦截拍摄</li>
|
||
<li>用户未对准引导框也可点击拍摄，进入预览后可重拍</li>
|
||
<li>拍摄后仍走原有<strong>压缩 → 上传 → OCR识别</strong>流程</li>
|
||
</ul>
|
||
|
||
<h4>降级规则</h4>
|
||
<ul>
|
||
<li>设备不支持 <code>getUserMedia</code> → 降级为 <code>van-uploader</code> 系统选择器</li>
|
||
<li>iOS 微信内置浏览器权限受限 → 降级为系统选择器</li>
|
||
<li>降级后引导框不展示，用户走原有流程</li>
|
||
<li>降级后压缩→上传→OCR流程正常</li>
|
||
</ul>
|
||
|
||
<h4>权限规则</h4>
|
||
<ul>
|
||
<li>进入拍摄引导页前检测相机权限</li>
|
||
<li>未授权时提示用户开启权限，并提供"从相册选择"降级入口</li>
|
||
</ul>
|
||
|
||
<div class="highlight-box">
|
||
<p><strong>核心原则：</strong>引导框是"辅助提示"而非"强制校验"，目标是提升照片质量，而非增加用户操作门槛。所有拦截和校验仍由后端OCR完成。后续的上传和OCR流程完全不变。</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<script>
|
||
/* ===== 状态管理 ===== */
|
||
var currentSlot = ''; // 'front' | 'back' | 'car'
|
||
var slotTitles = {
|
||
front: '拍摄行驶证主页',
|
||
back: '拍摄行驶证副页',
|
||
car: '拍摄行驶证车辆照片'
|
||
};
|
||
var slotElements = {
|
||
front: 'slotFront',
|
||
back: 'slotBack',
|
||
car: 'slotCar'
|
||
};
|
||
|
||
/* ===== 流程步骤更新 ===== */
|
||
function updateFlowStep(step) {
|
||
var steps = ['step1', 'step2', 'step3', 'step4'];
|
||
for (var i = 0; i < steps.length; i++) {
|
||
var el = document.getElementById(steps[i]);
|
||
if (i < step) {
|
||
el.classList.add('active');
|
||
} else {
|
||
el.classList.remove('active');
|
||
}
|
||
}
|
||
}
|
||
|
||
/* ===== 打开拍摄引导页 ===== */
|
||
var heroTitles = {
|
||
front: '请将主页对准取景框',
|
||
back: '请将副页对准取景框',
|
||
car: '请将车辆对准取景框'
|
||
};
|
||
var heroSubs = {
|
||
front: '从卡套内拿出，避免反光',
|
||
back: '从卡套内拿出，避免反光',
|
||
car: '从卡套内拿出，避免反光'
|
||
};
|
||
|
||
function openCameraGuide(type) {
|
||
currentSlot = type;
|
||
document.getElementById('cameraTitle').textContent = slotTitles[type];
|
||
document.getElementById('cameraHeroTitle').textContent = heroTitles[type];
|
||
document.getElementById('cameraHeroSub').textContent = heroSubs[type];
|
||
renderLicenseTemplate(type);
|
||
document.getElementById('vehiclePage').classList.add('hide');
|
||
document.getElementById('cameraPage').classList.add('show');
|
||
updateFlowStep(2);
|
||
}
|
||
|
||
/* ===== 渲染证件模板叠层 ===== */
|
||
function renderLicenseTemplate(type) {
|
||
var el = document.getElementById('licenseTemplate');
|
||
el.className = 'license-template';
|
||
if (type === 'front') {
|
||
el.className += ' lt-front-page';
|
||
el.innerHTML =
|
||
'<div class="lt-inner">' +
|
||
'<div class="lt-title">' +
|
||
'<div class="lt-title-line">中华人民共和国机动车行驶证</div>' +
|
||
'</div>' +
|
||
'<div class="lt-seal">印章</div>' +
|
||
'</div>';
|
||
} else if (type === 'back') {
|
||
el.className += ' lt-back-page';
|
||
el.innerHTML =
|
||
'<div class="lt-inner">' +
|
||
'<div class="lt-barcode-area">' +
|
||
'<div class="lt-barcode-strip">' +
|
||
'<div class="lt-bar tall"></div><div class="lt-bar short"></div><div class="lt-bar medium wide"></div><div class="lt-bar tall"></div>' +
|
||
'<div class="lt-bar short"></div><div class="lt-bar medium"></div><div class="lt-bar tall wide"></div><div class="lt-bar short"></div>' +
|
||
'<div class="lt-bar medium"></div><div class="lt-bar tall"></div><div class="lt-bar short wide"></div><div class="lt-bar medium"></div>' +
|
||
'<div class="lt-bar tall"></div><div class="lt-bar short"></div><div class="lt-bar medium wide"></div><div class="lt-bar tall"></div>' +
|
||
'<div class="lt-bar short"></div><div class="lt-bar medium"></div><div class="lt-bar tall wide"></div><div class="lt-bar short"></div>' +
|
||
'<div class="lt-bar medium"></div><div class="lt-bar tall"></div><div class="lt-bar short wide"></div><div class="lt-bar medium"></div>' +
|
||
'<div class="lt-bar tall"></div><div class="lt-bar short"></div><div class="lt-bar medium wide"></div><div class="lt-bar tall"></div>' +
|
||
'<div class="lt-bar short"></div><div class="lt-bar medium"></div><div class="lt-bar tall wide"></div><div class="lt-bar short"></div>' +
|
||
'<div class="lt-bar medium"></div><div class="lt-bar tall"></div><div class="lt-bar short wide"></div><div class="lt-bar medium"></div>' +
|
||
'<div class="lt-bar tall"></div><div class="lt-bar short"></div><div class="lt-bar medium wide"></div><div class="lt-bar tall"></div>' +
|
||
'</div>' +
|
||
'<div class="lt-barcode-num">3701001234567</div>' +
|
||
'</div>' +
|
||
'</div>';
|
||
} else if (type === 'car') {
|
||
el.className += ' lt-car-page';
|
||
el.innerHTML =
|
||
'<div class="lt-inner">' +
|
||
'<div class="lt-title">' +
|
||
'<div class="lt-title-2">车辆照片</div>' +
|
||
'</div>' +
|
||
'</div>';
|
||
}
|
||
}
|
||
|
||
/* ===== 关闭拍摄引导页 ===== */
|
||
function closeCameraGuide() {
|
||
document.getElementById('cameraPage').classList.remove('show');
|
||
document.getElementById('vehiclePage').classList.remove('hide');
|
||
currentSlot = '';
|
||
updateFlowStep(1);
|
||
}
|
||
|
||
/* ===== 拍摄 ===== */
|
||
function takePhoto() {
|
||
var canvas = document.createElement('canvas');
|
||
canvas.width = 375; canvas.height = 500;
|
||
var ctx = canvas.getContext('2d');
|
||
|
||
// 背景（模拟桌面）
|
||
ctx.fillStyle = '#e8edf2';
|
||
ctx.fillRect(0, 0, 375, 500);
|
||
|
||
if (currentSlot === 'car') {
|
||
// 车辆照片
|
||
drawCarPhoto(ctx);
|
||
} else if (currentSlot === 'back') {
|
||
// 行驶证副页
|
||
drawLicenseBack(ctx);
|
||
} else {
|
||
// 行驶证主页
|
||
drawLicenseFront(ctx);
|
||
}
|
||
|
||
// 模拟角标痕迹
|
||
ctx.strokeStyle = '#4fc3f7';
|
||
ctx.lineWidth = 2;
|
||
var corners = [[57,129],[317,129],[57,311],[317,311]];
|
||
corners.forEach(function(c, i) {
|
||
ctx.beginPath();
|
||
if (i===0) { ctx.moveTo(c[0], c[1]+16); ctx.lineTo(c[0], c[1]); ctx.lineTo(c[0]+16, c[1]); }
|
||
if (i===1) { ctx.moveTo(c[0]-16, c[1]); ctx.lineTo(c[0], c[1]); ctx.lineTo(c[0], c[1]+16); }
|
||
if (i===2) { ctx.moveTo(c[0], c[1]-16); ctx.lineTo(c[0], c[1]); ctx.lineTo(c[0]+16, c[1]); }
|
||
if (i===3) { ctx.moveTo(c[0]-16, c[1]); ctx.lineTo(c[0], c[1]); ctx.lineTo(c[0], c[1]-16); }
|
||
ctx.stroke();
|
||
});
|
||
|
||
var dataUrl = canvas.toDataURL('image/png');
|
||
document.getElementById('previewImg').src = dataUrl;
|
||
document.getElementById('cameraPage').classList.remove('show');
|
||
document.getElementById('previewPage').classList.add('show');
|
||
updateFlowStep(3);
|
||
}
|
||
|
||
/* ===== 绘制行驶证主页 ===== */
|
||
function drawLicenseFront(ctx) {
|
||
ctx.save();
|
||
ctx.translate(187, 220);
|
||
ctx.fillStyle = '#eaf2f8';
|
||
ctx.shadowColor = 'rgba(0,0,0,.25)';
|
||
ctx.shadowBlur = 12;
|
||
ctx.shadowOffsetY = 4;
|
||
ctx.fillRect(-130, -91, 260, 182);
|
||
ctx.restore();
|
||
ctx.shadowColor = 'transparent';
|
||
// 标题
|
||
ctx.fillStyle = '#333';
|
||
ctx.textAlign = 'center';
|
||
ctx.font = 'bold 12px sans-serif';
|
||
ctx.fillText('中华人民共和国', 187, 148);
|
||
ctx.fillText('机动车行驶证', 187, 164);
|
||
// 车辆照片区
|
||
ctx.strokeStyle = '#aaa';
|
||
ctx.lineWidth = 1;
|
||
ctx.strokeRect(65, 175, 60, 50);
|
||
ctx.fillStyle = '#bbb';
|
||
ctx.font = '8px sans-serif';
|
||
ctx.fillText('照片', 95, 203);
|
||
// 右侧字段
|
||
ctx.fillStyle = '#444';
|
||
ctx.textAlign = 'left';
|
||
ctx.font = '9px sans-serif';
|
||
ctx.fillText('号牌号码', 135, 182);
|
||
ctx.fillText('桂N·GK628', 180, 182);
|
||
ctx.fillText('车辆类型', 135, 197);
|
||
ctx.fillText('小型轿车', 180, 197);
|
||
ctx.fillText('所有人', 135, 212);
|
||
ctx.fillText('蒙幸基', 180, 212);
|
||
ctx.fillText('住址', 65, 240);
|
||
ctx.fillText('广西灵山县新圩镇...', 95, 240);
|
||
ctx.fillText('使用性质', 65, 255);
|
||
ctx.fillText('非营运', 110, 255);
|
||
ctx.fillText('品牌型号', 135, 255);
|
||
ctx.fillText('丰田牌GTM7251GE', 180, 255);
|
||
ctx.fillText('车辆识别代号', 65, 270);
|
||
ctx.fillText('LVGBF53KXEG506464', 130, 270);
|
||
ctx.fillText('发动机号码', 65, 285);
|
||
ctx.fillText('H504101', 120, 285);
|
||
// 底部日期
|
||
ctx.fillText('注册日期', 70, 300);
|
||
ctx.fillText('2014-12-26', 110, 300);
|
||
ctx.fillText('发证日期', 180, 300);
|
||
ctx.fillText('2021-02-04', 220, 300);
|
||
// 印章（左下角）
|
||
ctx.strokeStyle = 'rgba(200,50,50,.4)';
|
||
ctx.lineWidth = 1.5;
|
||
ctx.beginPath();
|
||
ctx.arc(85, 275, 18, 0, Math.PI*2);
|
||
ctx.stroke();
|
||
ctx.fillStyle = 'rgba(200,50,50,.3)';
|
||
ctx.font = '6px sans-serif';
|
||
ctx.textAlign = 'center';
|
||
ctx.fillText('印章', 85, 277);
|
||
ctx.fillStyle = '#999';
|
||
ctx.font = '9px sans-serif';
|
||
ctx.fillText('（模拟拍摄效果）', 187, 330);
|
||
}
|
||
|
||
/* ===== 绘制行驶证副页 ===== */
|
||
function drawLicenseBack(ctx) {
|
||
ctx.save();
|
||
ctx.translate(187, 220);
|
||
ctx.fillStyle = '#eaf2f8';
|
||
ctx.shadowColor = 'rgba(0,0,0,.25)';
|
||
ctx.shadowBlur = 12;
|
||
ctx.shadowOffsetY = 4;
|
||
ctx.fillRect(-130, -91, 260, 182);
|
||
ctx.restore();
|
||
ctx.shadowColor = 'transparent';
|
||
// 标题
|
||
ctx.fillStyle = '#333';
|
||
ctx.textAlign = 'center';
|
||
ctx.font = 'bold 12px sans-serif';
|
||
ctx.fillText('中华人民共和国', 187, 148);
|
||
ctx.fillText('机动车行驶证', 187, 164);
|
||
// 三栏字段
|
||
ctx.fillStyle = '#444';
|
||
ctx.textAlign = 'left';
|
||
ctx.font = '8.5px sans-serif';
|
||
// 第一列
|
||
ctx.fillText('号牌号码', 65, 182);
|
||
ctx.fillText('桂N·GK628', 105, 182);
|
||
ctx.fillText('核定载人数', 65, 197);
|
||
ctx.fillText('5人', 120, 197);
|
||
ctx.fillText('整备质量', 65, 212);
|
||
ctx.fillText('1490kg', 115, 212);
|
||
ctx.fillText('外廓尺寸', 65, 227);
|
||
ctx.fillText('4825×1825', 105, 227);
|
||
ctx.fillText('×1480mm', 105, 237);
|
||
// 第二列
|
||
ctx.fillText('档案编号', 140, 182);
|
||
ctx.fillText('450721086872', 180, 182);
|
||
ctx.fillText('总质量', 140, 197);
|
||
ctx.fillText('2000kg', 175, 197);
|
||
ctx.fillText('核定载质量', 140, 212);
|
||
ctx.fillText('--', 195, 212);
|
||
ctx.fillText('准牵引总质量', 140, 227);
|
||
ctx.fillText('--', 200, 227);
|
||
// 第三列 - 检验记录区
|
||
ctx.strokeStyle = '#aaa';
|
||
ctx.lineWidth = 1;
|
||
ctx.strokeRect(225, 175, 50, 40);
|
||
ctx.fillStyle = '#666';
|
||
ctx.font = '7px sans-serif';
|
||
ctx.textAlign = 'center';
|
||
ctx.fillText('检验有效期', 250, 188);
|
||
ctx.fillText('2022年12月', 250, 200);
|
||
ctx.fillText('桂N', 250, 212);
|
||
// 燃料类型
|
||
ctx.fillStyle = '#444';
|
||
ctx.textAlign = 'left';
|
||
ctx.font = '8.5px sans-serif';
|
||
ctx.fillText('检验记录', 225, 225);
|
||
ctx.fillText('汽油', 225, 237);
|
||
// 条形码
|
||
ctx.fillStyle = '#333';
|
||
var barX = 290;
|
||
var bars = [8,4,8,5,7,3,8,5,6,4,8,5,7,3,8,5];
|
||
var barY = 175;
|
||
for (var i = 0; i < bars.length; i++) {
|
||
ctx.fillRect(barX, barY, 1.5, bars[i] + 4);
|
||
barY += bars[i] + 4 + 1;
|
||
}
|
||
ctx.fillStyle = '#999';
|
||
ctx.font = '7px sans-serif';
|
||
ctx.textAlign = 'center';
|
||
ctx.fillText('*457002*', 293, 285);
|
||
ctx.fillText('4811956*', 293, 293);
|
||
ctx.fillStyle = '#999';
|
||
ctx.font = '9px sans-serif';
|
||
ctx.fillText('（模拟拍摄效果）', 187, 320);
|
||
}
|
||
|
||
/* ===== 绘制车辆照片 ===== */
|
||
function drawCarPhoto(ctx) {
|
||
ctx.save();
|
||
ctx.translate(187, 220);
|
||
ctx.fillStyle = '#d8dde4';
|
||
ctx.shadowColor = 'rgba(0,0,0,.2)';
|
||
ctx.shadowBlur = 10;
|
||
ctx.shadowOffsetY = 3;
|
||
ctx.fillRect(-130, -70, 260, 140);
|
||
ctx.restore();
|
||
ctx.shadowColor = 'transparent';
|
||
// 车身
|
||
ctx.fillStyle = '#4a6fa5';
|
||
ctx.beginPath();
|
||
ctx.moveTo(100, 260);
|
||
ctx.lineTo(100, 235);
|
||
ctx.quadraticCurveTo(100, 220, 115, 215);
|
||
ctx.lineTo(150, 195);
|
||
ctx.quadraticCurveTo(160, 185, 180, 185);
|
||
ctx.lineTo(240, 185);
|
||
ctx.quadraticCurveTo(260, 185, 270, 195);
|
||
ctx.lineTo(300, 215);
|
||
ctx.quadraticCurveTo(310, 220, 310, 235);
|
||
ctx.lineTo(310, 260);
|
||
ctx.closePath();
|
||
ctx.fill();
|
||
// 车窗
|
||
ctx.fillStyle = '#b8d4f0';
|
||
ctx.fillRect(160, 198, 50, 20);
|
||
ctx.fillRect(220, 198, 40, 20);
|
||
// 车轮
|
||
ctx.fillStyle = '#333';
|
||
ctx.beginPath();
|
||
ctx.arc(145, 262, 16, 0, Math.PI*2);
|
||
ctx.arc(265, 262, 16, 0, Math.PI*2);
|
||
ctx.fill();
|
||
ctx.fillStyle = '#888';
|
||
ctx.beginPath();
|
||
ctx.arc(145, 262, 7, 0, Math.PI*2);
|
||
ctx.arc(265, 262, 7, 0, Math.PI*2);
|
||
ctx.fill();
|
||
ctx.fillStyle = '#999';
|
||
ctx.font = '10px sans-serif';
|
||
ctx.textAlign = 'center';
|
||
ctx.fillText('（模拟拍摄效果）', 187, 320);
|
||
}
|
||
|
||
/* ===== 重拍 ===== */
|
||
function retake() {
|
||
document.getElementById('previewPage').classList.remove('show');
|
||
document.getElementById('cameraPage').classList.add('show');
|
||
updateFlowStep(2);
|
||
}
|
||
|
||
/* ===== 取消预览 ===== */
|
||
function cancelPreview() {
|
||
document.getElementById('previewPage').classList.remove('show');
|
||
document.getElementById('vehiclePage').classList.remove('hide');
|
||
currentSlot = '';
|
||
updateFlowStep(1);
|
||
}
|
||
|
||
/* ===== 确认使用 → 回填到槽位 ===== */
|
||
function confirmPhoto() {
|
||
var imgSrc = document.getElementById('previewImg').src;
|
||
var slotEl = document.getElementById(slotElements[currentSlot]);
|
||
|
||
// 更新槽位显示照片
|
||
slotEl.classList.add('has-image');
|
||
slotEl.innerHTML = '<img class="slot-img" src="' + imgSrc + '" />';
|
||
|
||
// 关闭预览页
|
||
document.getElementById('previewPage').classList.remove('show');
|
||
document.getElementById('vehiclePage').classList.remove('hide');
|
||
|
||
// 模拟 OCR 回填
|
||
if (currentSlot === 'front') {
|
||
document.getElementById('carNumField').textContent = '桂N·GK628';
|
||
}
|
||
|
||
updateFlowStep(4);
|
||
|
||
// 1秒后恢复步骤1
|
||
setTimeout(function() {
|
||
updateFlowStep(1);
|
||
}, 1500);
|
||
|
||
// 提示
|
||
setTimeout(function() {
|
||
alert('照片已确认使用\n→ 传入 vehicleLicense' + (currentSlot === 'front' ? 'Front' : currentSlot === 'back' ? 'Back' : 'Car') + 'Handler()\n→ compressFileItem() 压缩\n→ uploadImage() 上传\n→ ocrHandler() OCR识别\n→ 回填表单字段');
|
||
}, 100);
|
||
}
|
||
|
||
/* ===== Tab 切换 ===== */
|
||
function switchTab(el, tabId) {
|
||
var tabs = el.parentElement.querySelectorAll('.tab-btn');
|
||
for (var i = 0; i < tabs.length; i++) tabs[i].classList.remove('active');
|
||
el.classList.add('active');
|
||
var tabIds = ['intro', 'spec', 'flow', 'rules'];
|
||
for (var j = 0; j < tabIds.length; j++) {
|
||
document.getElementById('tab-' + tabIds[j]).style.display = 'none';
|
||
}
|
||
document.getElementById('tab-' + tabId).style.display = '';
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
<div class="dark"></div><div data-trae-edit-ui="true"></div></body></html> |