ascript 1.3.27__py3-none-win_amd64.whl

ascript/windows/tools/web/css/screen.css

@@ -0,0 +1,1342 @@
+.div {
+    margin: 0;
+    padding: 0;
+}
+
+.mycontainer {
+    padding: 0px;
+    height: 100vh;
+    display: grid;
+    grid-template-rows: 1fr auto;
+    background-color: canvas;
+    /* 替换原本可能的白色 */
+    color: canvastext;
+    /* 替换原本可能的黑色 */
+}
+
+.shoadow-lg-black {
+    /* 使用 color-mix 让阴影在深色模式下变浅，浅色下变深 */
+    box-shadow: 0px 6px 10px color-mix(in srgb, canvastext, transparent 60%);
+}
+
+.shoadow-lg-green {
+    /* 保持绿色调，但增加透明度适配 */
+    box-shadow: 0px 6px 10px color-mix(in srgb, #00ff00, transparent 0%);
+}
+
+.gp_item_title {
+    color: color-mix(in srgb, canvastext, transparent 40%);
+    /* 替换 #636364 */
+    font-size: x-small;
+}
+
+.screen-container {
+    background-color: canvas;
+    /* 替换 white */
+    overflow: hidden;
+    padding: 0px;
+    margin: 0px;
+}
+
+.container_bottombar {
+    height: 30px;
+    background-color: color-mix(in srgb, canvas, canvastext 6%);
+    /* 替换 #efefef */
+}
+
+.screen-img-container {
+    padding: 0;
+    margin: 0px;
+    height: 100%;
+    display: grid;
+    grid-template-rows: auto 1fr;
+    /* border-right: 1px solid var(--bs-border-color); */
+    position: relative;
+}
+
+
+
+.screen-img-con {
+    /* 动态网格线颜色 */
+    background: linear-gradient(90deg, color-mix(in srgb, canvastext, transparent 90%) 5%, transparent 0),
+        linear-gradient(color-mix(in srgb, canvastext, transparent 90%) 5%, transparent 0);
+    background-size: 10px 10px;
+    background-color: canvas;
+}
+
+
+.screen-img-list-item {
+    image-rendering: pixelated;
+    height: 90%;
+    width: auto;
+    border: 2px solid transparent;
+    box-sizing: border-box;
+    border-radius: 5px;
+}
+
+.screen-img-list-item:hover {
+    image-rendering: pixelated;
+    height: 90%;
+    width: auto;
+    border: 2px dashed salmon;
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
+.screen-img-list-item-active {
+    image-rendering: pixelated;
+    height: 90%;
+    width: auto;
+    border: 2px solid transparent;
+    box-sizing: border-box;
+}
+
+
+
+.screen-img-statue-bottom {
+    padding: 0px;
+    margin: 0px;
+    background-color: color-mix(in srgb, canvas, canvastext 6%);
+    /* 替换 #efefef */
+    font-size: 13px;
+}
+
+.screen-img-statue-item-b {
+    text-align: center;
+    background-color: transparent;
+    font-size: 13px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0px;
+    font-weight: bold;
+}
+
+
+
+
+
+
+.screen-imglist-bar {
+    border-radius: 3px;
+    background-color: color-mix(in srgb, canvas, canvastext 10%);
+    /* 替换 #dfe1e5 */
+    font-size: 15px;
+    height: 30px;
+    color: #db3e44;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0px;
+    padding: 0px;
+}
+
+.screen-imglist-bar-btn:hover {
+    background-color: #db3e44;
+    color: white;
+}
+
+.toolbar_img_delall_mouse {
+    padding: 0px;
+    margin: 0px;
+    display: block;
+    text-align: center;
+    height: 100%;
+    background-color: color-mix(in srgb, canvas, orange 20%);
+    /* 替换 antiquewhite */
+}
+
+.toolbar_img_delall_mouse_color {
+    height: 20px;
+    width: 20px;
+    min-width: 20px;
+    background-color: AccentColor;
+    /* 替换固定绿色，改用系统强调色 */
+}
+
+#part_box {
+    position: absolute;
+    border: 1px dashed canvastext;
+    /* 替换 white */
+    margin: 0px;
+    padding: 0px;
+    animation: fade 1000ms infinite;
+    -webkit-animation: fade 1000ms infinite;
+    pointer-events: none;
+    background: linear-gradient(90deg, color-mix(in srgb, canvastext, transparent 90%) 5%, transparent 0),
+        linear-gradient(color-mix(in srgb, canvastext, transparent 90%) 5%, transparent 0);
+    background-size: 10px 10px;
+}
+
+.part_box_control:hover {
+    cursor: pointer;
+    color: red;
+}
+
+.toolbar_img_delall-mousecolor {
+    border-radius: 5px;
+    width: 25px;
+    margin: 0px;
+    padding: 0px;
+    box-shadow: 0px 1px 2px color-mix(in srgb, canvastext, transparent 60%);
+}
+
+.control-borad {
+    padding: 0;
+    margin: 0px;
+    height: 100%;
+    display: flex;
+    overflow: hidden;
+}
+
+.gpimage-con {
+    height: 100%;
+    background-color: AccentColor;
+    /* 替换原本的 #1AC988 */
+}
+
+.plug_group {
+    width: 100%;
+    padding: 0px;
+    margin: 0px;
+    overflow: hidden;
+    overflow-x: hidden;
+    border: 0px;
+    list-style-type: none;
+}
+
+.plug_group_header {
+    font-size: small;
+    cursor: pointer;
+    padding: 0px;
+    margin: 0px;
+    background-color: color-mix(in srgb, canvas, canvastext 8%);
+    /* 替换 #ecedf1 */
+    border-bottom: solid 1px color-mix(in srgb, canvastext, transparent 80%);
+    padding-top: 8px;
+    padding-bottom: 8px;
+    list-style-type: none;
+    text-align: center;
+    color: canvastext;
+    font-weight: 700;
+}
+
+.plug-list-item {
+    padding: 0px;
+    margin: 0px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    list-style-type: none;
+    text-align: center;
+    font-size: smaller;
+    color: canvastext;
+}
+
+.plug-list-item-active {
+    padding: 0px;
+    margin: 0px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    color: AccentColor;
+    /* 替换 #6d9ef7 */
+    background-color: canvas;
+    list-style-type: none;
+    text-align: center;
+    font-size: smaller;
+}
+
+.plug-list-item:hover {
+    background-color: canvas;
+    color: AccentColor;
+    cursor: pointer;
+}
+
+.coder-board {
+    padding: 0;
+    margin: 0px;
+    height: 100%;
+    display: grid;
+    grid-template-rows: auto 1fr;
+}
+
+.coder-board-header {
+    height: 35px;
+    padding: 0px;
+    margin: 0px;
+    background-color: color-mix(in srgb, canvas, canvastext 2%);
+    border-top: 1px solid color-mix(in srgb, canvastext, transparent 90%);
+}
+
+.coder-board-bottom {
+    height: 30px;
+    padding: 0px;
+    margin: 0px;
+    background-color: color-mix(in srgb, canvas, canvastext 6%);
+}
+
+.coder-board-body-item {
+    list-style-type: none;
+    padding: 0px;
+    margin: 0px;
+    font-size: small;
+    border-bottom: 1px color-mix(in srgb, canvas, canvastext 2%) solid;
+    cursor: pointer;
+}
+
+.coder-board-body-item-active {
+    background-color: AccentColor;
+    /* 替换 #79bbf6 */
+    color: AccentColorText;
+}
+
+.coder-board-body-item-fix {
+    list-style-type: none;
+    padding: 0px;
+    margin: 0px;
+    font-size: small;
+    background-color: color-mix(in srgb, orange, transparent 20%);
+    /* 替换 #f7cb5a */
+    border-bottom: 1px color-mix(in srgb, canvas, canvastext 2%) solid;
+    cursor: pointer;
+}
+
+.coder-board-body-item:hover {
+    background-color: color-mix(in srgb, canvas, canvastext 4%);
+}
+
+.zoomWindow_lines {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(90deg, color-mix(in srgb, canvastext, transparent 90%) 5%, transparent 0),
+        linear-gradient(color-mix(in srgb, canvastext, transparent 90%) 5%, transparent 0);
+    background-size: 10px 10px;
+    z-index: 101;
+}
+
+.mark-point-des {
+    background-color: color-mix(in srgb, canvas, red 10%);
+    /* 替换 #f7dee1 */
+}
+
+.marknumber {
+    border-radius: 90px;
+    padding: 1px 3px;
+    margin-right: 5px;
+    color: white;
+    background-color: #db3e44;
+    /* 保持红色告警感 */
+}
+
+.mark-rect-item {
+    position: absolute;
+    border: AccentColor 2px dashed;
+    /* 替换 #1AC988 */
+}
+
+/* 拖拽条样式 */
+.touch_slide {
+    position: absolute;
+    top: 0;
+    right: -5px;
+    /* 跨在边界线上，增加判定区域 */
+    width: 10px;
+    height: 100%;
+    cursor: col-resize;
+    /* 改变鼠标形状为双向箭头 */
+    z-index: 100;
+    transition: background-color 0.2s;
+}
+
+/* 鼠标覆盖时高亮 */
+.touch_slide:hover,
+.touch_slide.active {
+    background-color: var(--bs-primary);
+    /* 使用主题色 */
+    opacity: 0.5;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* 侧边工具栏 */
+.screen-img-bar {
+    width: 50px;
+    border: none;
+    background-color: var(--bs-tertiary-bg);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px 0;
+    gap: 12px;
+    /* 调整这里可以改变图标上下间距 */
+    cursor: pointer;
+}
+
+/* 按钮基础样式 */
+.screen-img-bar-item {
+    width: 36px;
+    /* 固定宽度让图标对齐 */
+    height: 36px;
+    /* 固定高度 */
+    border-radius: 6px;
+    background-color: transparent;
+    font-size: 1.2rem;
+    color: canvastext;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* 悬浮效果 */
+.screen-img-bar-item:hover {
+    background-color: color-mix(in srgb, canvas, canvastext 10%);
+    color: AccentColor;
+}
+
+/* 截图加载状态遮罩 */
+#imagelist_loading {
+    background-color: color-mix(in srgb, canvas, canvastext 8%) !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* 修正 Bootstrap Spinner 颜色 */
+.spinner-border.text-primary {
+    color: AccentColor !important;
+    /* 确保旋转圆圈也是主题色 */
+}
+
+/* 刷新图标旋转动画 */
+.spin-animation {
+    animation: rotate 0.8s linear infinite;
+    display: inline-block;
+}
+
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* 修正 Input 在深色模式下的样式 */
+.form-control-sm {
+    background-color: canvas !important;
+    color: canvastext !important;
+    border: 1px solid color-mix(in srgb, canvastext, transparent 90%) !important;
+}
+
+/* 强制覆盖内联样式的背景 */
+#header_color_current,
+#image_input_rect {
+    background-color: color-mix(in srgb, canvas, canvastext 4%) !important;
+}
+
+
+/* --- 关键：强制状态栏背景与文字跟随浏览器 --- */
+.screen-img-statue {
+    /* background-color: canvas !important; 浏览器原生背景色 */
+    background-color: var(--bs-tertiary-bg);
+    color: canvastext !important;
+    /* 浏览器原生文字色 */
+    /* border-top: 1px solid color-mix(in srgb, canvastext, transparent 85%) !important; */
+}
+
+/* 强制让 input-group 里的所有控件都不准出现硬编码白 */
+.screen-img-statue .input-group-text {
+    background-color: color-mix(in srgb, canvas, canvastext 8%) !important;
+    color: canvastext !important;
+    border-color: color-mix(in srgb, canvastext, transparent 80%) !important;
+}
+
+.screen-img-statue .btn-outline-secondary {
+    background-color: canvas !important;
+    color: canvastext !important;
+    border-color: color-mix(in srgb, canvastext, transparent 80%) !important;
+}
+
+.screen-img-statue .btn-outline-secondary:hover {
+    background-color: color-mix(in srgb, canvas, canvastext 15%) !important;
+}
+
+.screen-img-statue .form-control {
+    background-color: canvas !important;
+    color: canvastext !important;
+    border-color: color-mix(in srgb, canvastext, transparent 80%) !important;
+}
+
+/* 修正中间那个数字框的背景色，让它看起来像个显示区而非按钮 */
+#p_i_l {
+    background-color: color-mix(in srgb, canvas, canvastext 5%) !important;
+    color: canvastext !important;
+}
+
+/* 刷新图标旋转动画 */
+.spin-animation {
+    animation: rotate 0.8s linear infinite;
+    display: inline-block;
+}
+
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.gallery-fullscreen-panel {
+    position: fixed;
+    top: 0;
+    /* 核心修改：左侧距离 = 固定侧边栏宽度 + 动态容器宽度 */
+    /* 假设固定栏是 50px */
+    left: calc(50px + var(--left-width, 35vw));
+    width: calc(100vw - (50px + var(--left-width, 35vw)));
+
+    height: 100vh;
+    z-index: 1050;
+    background-color: var(--bs-body-bg);
+    display: flex;
+    flex-direction: column;
+}
+
+.screen-img-list {
+    flex: 1;
+    /* 强制网格布局 */
+    display: flex;
+    flex-wrap: wrap;
+}
+
+/* 图片卡片样式 */
+.img-card {
+    position: relative;
+    aspect-ratio: 1 / 1;
+    /* 强制正方形让视觉统一 */
+    background: var(--bs-tertiary-bg);
+    border-radius: 4px;
+    overflow: hidden;
+    cursor: pointer;
+    border: 1px solid transparent;
+}
+
+.img-card:hover {
+    border-color: var(--bs-primary);
+}
+
+.img-card img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.img-name {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    font-size: 10px;
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+    padding: 2px 5px;
+    backdrop-filter: blur(2px);
+}
+
+.btn-del {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    padding: 0 4px;
+    display: none;
+    /* 悬浮显示 */
+}
+
+.img-card:hover .btn-del {
+    display: block;
+}
+
+
+/* 增加一个简单的悬停交互：变色并微调大小 */
+.history-btn {
+    transition: color 0.2s, transform 0.1s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+}
+
+.history-btn:hover {
+    color: var(--bs-primary) !important;
+    /* 悬浮时变蓝色 */
+    transform: scale(1.1);
+    /* 悬浮时轻微放大 */
+}
+
+.container_bottombar {
+    border-top: 1px solid var(--bs-border-color);
+    user-select: none;
+    /* 防止鼠标误选文字 */
+}
+
+#status_notification {
+    /* 使用 BS5.3 默认正文次要颜色变量 */
+    color: var(--bs-secondary-color);
+    transition: all 0.3s ease-in-out;
+    font-weight: 400;
+    /* VSCode 状态栏通常不加粗 */
+    letter-spacing: 0.3px;
+}
+
+/* 消息活跃时的样式：模拟 VSCode 蓝 */
+.status-active {
+    color: var(--bs-primary-text-emphasis) !important;
+}
+
+/* 消息报错时的样式 */
+.status-error {
+    color: var(--bs-danger-text-emphasis) !important;
+}
+
+.screen-img-shower {
+    height: 100%;
+    /* 创建一个深度感画布：中心略亮，四周略暗的径向渐变 */
+    /* 使用 Bootstrap 的背景变量确保主题同步 */
+    background: radial-gradient(circle at center,
+            var(--bs-tertiary-bg) 0%,
+            var(--bs-secondary-bg) 100%);
+
+    /* 增加一个极其微弱的颗粒感，模拟真实纸张或画布的纹理 */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
+
+    position: relative;
+    overflow: hidden;
+    cursor: crosshair;
+    transition: all 0.3s ease;
+}
+
+/* 拖拽激活时：通过光晕变化给予反馈 */
+.screen-img-shower.drag-active {
+    outline: 3px dashed var(--bs-primary) !important;
+    outline-offset: -10px;
+    background: radial-gradient(circle at center,
+            rgba(var(--bs-primary-rgb), 0.1) 0%,
+            var(--bs-tertiary-bg) 100%);
+}
+
+/* 保持 transform_container 投影，增加图片浮在画布上的感觉 */
+#transform_container {
+    position: absolute;
+    transform-origin: 0 0;
+    will-change: transform;
+    /* 给图片增加一个柔和的阴影，使其更像放在画布上的实体 */
+    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
+}
+
+/* 拖拽时的模糊效果 */
+.screen-img-shower.drag-active #transform_container {
+    filter: blur(2px);
+    opacity: 0.8;
+}
+
+/* 拖拽提示文字 - 同步 BS Badge/Button 风格 */
+.screen-img-shower.drag-active::after {
+    content: "释放鼠标以导入图片";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: var(--bs-primary);
+    color: white;
+    padding: 8px 20px;
+    border-radius: 50rem;
+    /* pill */
+    font-weight: 500;
+    box-shadow: var(--bs-box-shadow);
+    z-index: 1000;
+}
+
+.grabbing {
+    cursor: grabbing !important;
+}
+
+#transform_container {
+    position: absolute;
+    transform-origin: 0 0;
+    will-change: transform;
+}
+
+#img_preview {
+    image-rendering: pixelated;
+    display: block;
+    user-select: none;
+    -webkit-user-drag: none;
+}
+
+#svg_layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+    pointer-events: none;
+}
+
+#selection_rect {
+    fill: rgba(var(--bs-primary-rgb), 0.15);
+    stroke: var(--bs-primary);
+    pointer-events: all;
+    cursor: move;
+}
+
+.handle {
+    fill: var(--bs-white);
+    stroke: var(--bs-primary);
+    pointer-events: all;
+}
+
+.mark-text {
+    fill: white;
+    font-weight: bold;
+    paint-order: stroke;
+    stroke: #000;
+    pointer-events: none;
+}
+
+.mark-point {
+    fill: var(--bs-danger);
+    stroke: var(--bs-white);
+}
+
+.mark-rect {
+    fill: rgba(var(--bs-success-rgb), 0.2);
+    stroke: var(--bs-success);
+}
+
+/* 交互提示条容器 */
+.interaction-hints {
+    position: absolute;
+    bottom: 15px;
+    left: 15px;
+    z-index: 100;
+    pointer-events: none;
+    /* 确保不挡住鼠标点击操作 */
+    background: rgba(var(--bs-tertiary-bg-rgb), 0.6);
+    backdrop-filter: blur(8px);
+    /* 磨砂玻璃感 */
+    border: 1px solid var(--bs-border-color-translucent);
+    border-radius: var(--bs-border-radius);
+    transition: opacity 0.3s;
+}
+
+/* 提示单项 */
+.hint-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.75rem;
+    color: var(--bs-secondary-color);
+}
+
+.hint-item i {
+    color: var(--bs-primary);
+    /* 图标使用品牌色点缀 */
+    font-size: 0.9rem;
+}
+
+/* 键盘按键样式：同步 Bootstrap kbd */
+.hint-item kbd {
+    padding: 2px 5px;
+    font-size: 0.7rem;
+    background-color: var(--bs-body-color);
+    color: var(--bs-body-bg);
+}
+
+/* 细节：当鼠标移动或绘图时，自动变淡以减少干扰 */
+.screen-img-shower:active .interaction-hints {
+    opacity: 0.2;
+}
+
+@keyframes hint-pulse {
+    0% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(1.05);
+        box-shadow: 0 0 15px rgba(var(--bs-primary-rgb), 0.3);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+.hint-animate {
+    animation: hint-pulse 1.5s ease 2;
+    /* 图片加载后闪烁两次 */
+}
+
+/* 面板堆叠容器 */
+.info-group {
+    position: absolute;
+    bottom: 15px;
+    right: 15px;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    pointer-events: none;
+    /* 穿透鼠标 */
+}
+
+/* 统一面板样式 */
+.info-panel {
+    background: rgba(var(--bs-tertiary-bg-rgb), 0.65);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid var(--bs-border-color-translucent);
+    border-radius: var(--bs-border-radius);
+    padding: 10px 14px;
+    min-width: 190px;
+    box-shadow: var(--bs-box-shadow-sm);
+    transition: opacity 0.2s;
+}
+
+.info-header {
+    font-size: 0.7rem;
+    font-weight: 700;
+    color: var(--bs-primary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.info-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 15px;
+    line-height: 1.5;
+}
+
+.info-label {
+    font-size: 0.75rem;
+    color: var(--bs-secondary-color);
+}
+
+.info-value {
+    font-size: 0.85rem;
+    font-family: var(--bs-font-monospace);
+    color: var(--bs-emphasis-color);
+    font-weight: 600;
+}
+
+.color-swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    border: 1px solid rgba(var(--bs-white-rgb), 0.3);
+}
+
+/* 操作时半透明 */
+.screen-img-shower:active .info-panel,
+.screen-img-shower:active .interaction-hints {
+    opacity: 0.2;
+}
+
+.screen-img-shower img,
+.screen-img-shower svg {
+    /* 禁止浏览器原生的图片拖拽（防止触发系统文件拖放） */
+    -webkit-user-drag: none;
+    user-drag: none;
+    /* 禁止选中文本，避免拖动时意外选中文字 */
+    user-select: none;
+}
+
+.dropdown-item.disabled {
+    pointer-events: none;
+    /* 防止点击 */
+    opacity: 0.6;
+    background-color: #f8f9fa;
+}
+
+/* 优化滚动条和下拉框宽度 */
+#windowList {
+    min-width: 300px;
+    max-height: 80vh;
+    overflow-y: auto;
+}
+
+/* 自定义已消失项的样式 */
+.dropdown-item.inst-disabled {
+    opacity: 0.5;
+    background-color: var(--bs-tertiary-bg);
+    pointer-events: none;
+    /* 彻底禁用点击 */
+    cursor: not-allowed;
+}
+
+
+
+/* 确保标题和ID的视觉层次 */
+.win-title-box {
+    flex: 1;
+    /* 占据剩余空间 */
+    font-size: 0.9rem;
+}
+
+.win-hwnd-label {
+    font-size: 0.75rem;
+    color: var(--bs-secondary-color);
+    background-color: var(--bs-tertiary-bg);
+    padding: 1px 6px;
+    border-radius: 4px;
+    border: 1px solid var(--bs-border-color);
+    white-space: nowrap;
+    /* 防止ID换行 */
+}
+
+/* 适配 5.3 的 active 状态，让 ID 在选中时也变白 */
+.dropdown-item.active .win-hwnd-label {
+    color: #fff;
+    border-color: rgba(255, 255, 255, 0.3);
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* 窗口条目容器 */
+.window-item-link {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    transition: all 0.2s ease;
+}
+
+/* 窗口标题：占据主要空间，超长截断 */
+.win-title-text {
+    flex: 1;
+    font-size: 0.9rem;
+    color: var(--bs-emphasis-color);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-right: 1.5rem;
+    /* 给右侧ID留出固定间距 */
+}
+
+/* 弱化的 ID 数字：等宽字体，靠右，低亮度 */
+.win-hwnd-num {
+    font-family: var(--bs-font-monospace);
+    /* 使用系统等宽字体 */
+    font-size: 0.75rem;
+    color: var(--bs-secondary-color);
+    opacity: 0.5;
+    /* 初始非常浅 */
+    letter-spacing: 0.02rem;
+}
+
+/* 悬停效果 */
+.dropdown-item:hover .win-hwnd-num {
+    opacity: 0.9;
+}
+
+/* 选中状态：ID 随文字一起变白 */
+.dropdown-item.active .win-hwnd-num {
+    color: #fff;
+    opacity: 0.8;
+}
+
+/* 已消失状态 */
+.inst-disabled {
+    opacity: 0.4;
+    pointer-events: none;
+}
+
+.dropdown-backdrop-custom {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1040;
+    display: none;
+    opacity: 0;
+    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
+
+    /* 默认背景：深色半透明 */
+    background-color: rgba(0, 0, 0, 0.4);
+    /* 毛玻璃效果 */
+    backdrop-filter: blur(8px) saturate(150%);
+    -webkit-backdrop-filter: blur(8px) saturate(150%);
+}
+
+/* 针对深色主题的覆盖样式 (适配 BS 5.3) */
+[data-bs-theme="dark"] .dropdown-backdrop-custom {
+    /* 深色模式下，背景需要更黑，模糊度可以更高 */
+    background-color: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(12px) brightness(0.6);
+}
+
+.dropdown-backdrop-custom.show {
+    display: block;
+    opacity: 1;
+}
+
+/* 确保按钮和列表的层级高于遮罩 */
+.dropdown {
+    position: relative;
+    z-index: 1050;
+}
+
+#windowList {
+    z-index: 1051 !important;
+}
+
+.mouse-hud {
+    position: fixed;
+    /* 关键：固定定位，相对于浏览器窗口 */
+    z-index: 99999;
+    /* 确保在全页面最顶层 */
+    pointer-events: none;
+    /* 其余样式保持不变 */
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 10px;
+    background: rgba(var(--bs-tertiary-bg-rgb), 0.85);
+    backdrop-filter: blur(6px);
+    border: 1px solid var(--bs-border-color-translucent);
+    border-radius: 6px;
+}
+
+.hud-coords {
+    font-size: 0.75rem;
+    color: var(--bs-secondary-color);
+    font-weight: 500;
+}
+
+.hud-divider {
+    width: 1px;
+    height: 12px;
+    background: var(--bs-border-color);
+}
+
+.hud-swatch {
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.hud-hex {
+    font-size: 0.8rem;
+    color: var(--bs-emphasis-color);
+    font-weight: 700;
+    letter-spacing: 0.5px;
+}
+
+/* 工具栏整体容器 */
+.plug-list-con {
+    height: 100%;
+    /* 使用 color-mix 适配 5.3 主题色，canvas 为背景色，canvastext 为文字色 */
+    background-color: var(--bs-tertiary-bg);
+
+    /* 双侧投影：
+       第一组：左侧深层投影 (用于压在左侧图片区之上)
+       第二组：右侧微弱投影 (增强整体浮动感)
+    */
+    /* box-shadow: -4px 0 15px rgba(0, 0, 0, 0.4); */
+
+
+    /* 边框：左右都加上，不仅是右边 */
+    border-left: 1px solid color-mix(in srgb, canvas, canvastext 8%);
+    border-right: 1px solid color-mix(in srgb, canvas, canvastext 4%);
+
+    transition: all 0.3s ease;
+
+    /* 核心：提升层级 */
+    position: relative;
+    z-index: 10;
+    overflow: visible;
+}
+
+/* 列表头部 */
+.plug-list-con-header {
+    /* 针对不同主题调整文字颜色 */
+    color: var(--bs-emphasis-color);
+    background-color: var(--bs-tertiary-bg);
+    /* 比主体颜色稍微深/浅一点点，突出头部 */
+    border-bottom: 1px solid var(--bs-border-color);
+    position: sticky;
+    top: 0;
+    z-index: 11;
+}
+
+/* 标题文字颜色适配 */
+.plug-list-con-header b {
+    color: var(--bs-emphasis-color) !important;
+}
+
+/* 滚动条美化（适配主题） */
+#group_plug {
+    height: calc(100vh - 50px);
+    /* 减去头部高度 */
+    scrollbar-width: thin;
+    scrollbar-color: var(--bs-border-color) transparent;
+}
+
+/* 增加一个简单的悬停效果 */
+.hover-bg:hover {
+    background-color: var(--bs-secondary-bg);
+}
+
+/* --- 1. 基础布局容器 --- */
+.plug-item {
+    cursor: pointer;
+    border-radius: 0 !important;
+    margin-bottom: 0px; 
+    padding: 10px 16px !important;
+    transition: background-color 0.15s ease, color 0.1s ease;
+    border: none !important;
+    position: relative;
+    /* 默认状态：低对比度文字 */
+    color: var(--bs-secondary-color);
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+}
+
+/* 文字排版 */
+.plug-title {
+    font-size: 13px;
+    font-weight: 400; /* VSCode 风格通常不加粗 */
+    line-height: 1.2;
+}
+
+.plug-desc {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    font-size: 11px;
+    opacity: 0.6;
+    margin-top: 2px;
+}
+
+/* --- 2. 图标核心样式 (Mask 模式) --- */
+.plug-icon-mask {
+    width: 1.15rem;
+    height: 1.15rem;
+    display: inline-block;
+    flex-shrink: 0;
+    /* 遮罩属性 */
+    -webkit-mask-image: var(--icon-url);
+    mask-image: var(--icon-url);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: center;
+    
+    /* 默认颜色跟随父级文字 color */
+    background-color: currentColor; 
+    opacity: 0.7;
+    transition: all 0.1s ease;
+}
+
+/* --- 3. 交互状态 (Hover 与 Active) --- */
+
+/* [状态 A]：仅鼠标悬停，且未被选中 */
+.plug-item:hover:not(.active) {
+    background-color: var(--bs-secondary-bg) !important;
+    color: var(--bs-emphasis-color) !important;
+}
+.plug-item:hover:not(.active) .plug-icon-mask {
+    opacity: 1;
+}
+
+/* [状态 B]：被点击选中 (Active) */
+.plug-item.active {
+    /* 使用 BS5.3 官方推荐的选中背景色 */
+    background-color: var(--bs-primary-bg-subtle) !important;
+    color: var(--bs-primary-text-emphasis) !important;
+}
+
+/* 选中时的左侧 VSCode 蓝条 */
+.plug-item.active::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background-color: var(--bs-primary);
+}
+
+/* 选中时的图标：强制变色 */
+.plug-item.active .plug-icon-mask {
+    background-color: var(--bs-primary) !important;
+    opacity: 1;
+}
+
+/* [状态 C]：重点修复 - 选中状态下再次悬停 */
+.plug-item.active:hover {
+    /* 背景稍微加深一点，防止“看不清” */
+    background-color: var(--bs-fill-nav-hover, rgba(var(--bs-primary-rgb), 0.15)) !important;
+    /* 保持文字颜色 */
+    color: var(--bs-primary-text-emphasis) !important;
+}
+
+/* --- 4. 兼容性清理 (针对旧代码中的 SVG 直接渲染) --- */
+.plug-custom-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.plug-custom-icon svg {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+}
+.plug-custom-icon svg [stroke] {
+    stroke: currentColor;
+    fill: none;
+}
+
+
+
+
+
+/* 高亮样式定义 */
+.highlighted-mark .mark-point,
+.highlighted-mark .mark-rect {
+    stroke: #ff0000 !important; /* 强制变红 */
+    stroke-width: 3px !important; /* 增加线宽 */
+    filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.8)); /* 添加发光效果 */
+}
+
+.highlighted-mark .mark-text {
+    fill: #ff0000 !important;
+    font-weight: bold;
+    filter: drop-shadow(0 0 2px white);
+}
+
+/* 错误模态框 */
+
+.code-window {
+    background-color: #1e1e1e;
+    border-radius: 10px;
+    overflow: hidden;
+    border: 1px solid #333; /* 增加精致的边框感 */
+}
+
+.code-header {
+    height: 34px;
+    background-color: #2d2d2d; /* 稍微亮一点的标题栏 */
+    user-select: none;
+}
+
+.dot { width: 12px; height: 12px; border-radius: 50%; }
+.red { background: #ff5f56; }
+.yellow { background: #ffbd2e; }
+.green { background: #27c93f; }
+
+.code-content {
+    padding: 20px;
+    max-height: 500px;
+    overflow: auto;
+}
+
+#errorModalMsg {
+    margin: 0;
+    font-family: 'Consolas', 'Monaco', monospace;
+    font-size: 0.9rem;
+    color: #bcbcbc;
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+
+/* 底部操作栏样式 */
+.code-footer {
+    background: #1e1e1e;
+    border-top: 1px solid #2d2d2d;
+}
+
+/* 简单信息的特殊样式 */
+.simple-msg {
+    color: #4fc1ff !important; /* 简单信息用蓝色，看起来更像提示 */
+    text-align: center;
+    padding: 20px 0;
+}
+
+/* 针对所有动态标记组 */
+.mark-group, .mark-text, .dynamic-rect {
+    /* 强制浏览器渲染引擎使用几何精度而非速度优先 */
+    shape-rendering: geometricPrecision;
+    /* 针对文字的抗锯齿优化 */
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+}
+
+/* 高亮时的样式，可以增加阴影让它更立体 */
+.highlighted-mark .mark-text {
+    fill: #ff0000 !important;
+    font-weight: bold;
+    filter: drop-shadow(0px 0px 2px white);
+}
+
+/* 针对 SVG 文本的特殊优化 */
+
+
+#svg_layer {
+    /* 告诉浏览器不要对 SVG 进行位图缓存 */
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: crisp-edges;
+}
+
+/* 圆点的样式 */
+.dynamic-circle {
+    fill: #ff0000;
+    border: #ffffff 1px solid;
+}
+
+/* 文字的样式 */
+.dynamic-text {
+    fill: #ffffff;
+    font-weight: bold;
+    /* 强制渲染精度 */
+    paint-order: stroke fill;
+}