/* NovelAI 生图页：官方样式（assets/nai-official/official.css）之外的桥接规则。 * 只处理官方 CSS 不覆盖的部分：视图在应用壳中的布局、textarea 高亮编辑器、动态宽度、 * 本软件额外的控件（自定义坐标网格、行内数字输入）以及标签推荐浮层。 */ /* ---------- 视图布局 ---------- */ #view-nai-image:not(.hidden){display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0;overflow:hidden;position:relative} #view-nai-image > .image-gen-page{flex:1 1 auto;min-height:0;position:relative} #view-nai-image .hidden,#view-nai-image [hidden]{display:none!important} #view-nai-image.resizing,#view-nai-image.resizing *{cursor:col-resize!important;user-select:none!important} #view-nai-image .image-gen-panel-history-rail.collapsed{display:none!important} /* 桌面端（≥900px）隐藏图片查看器右上角的悬浮按钮，保留底部固定按钮栏 */ @media (min-width: 900px) { #view-nai-image #nai-viewer-chrome .display-grid-top{display:none!important} } /* Collapsed History: official clock button (top 18px, right 7px, 30×30) fading in over 0.25s */ #view-nai-image .nai-history-open{width:0;overflow:visible;flex:0 0 auto;animation:nai-history-open-in .25s cubic-bezier(.22,1,.36,1)} #view-nai-image .nai-history-open[hidden]{display:none} #view-nai-image .nai-history-open-box{position:absolute;top:18px;right:7px;width:30px;height:30px;border-radius:3px;padding:5px;background:rgb(25,27,49);display:block;z-index:200;box-sizing:border-box} #view-nai-image .nai-history-open-box > button{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;background:none;border:0;cursor:pointer} #view-nai-image .nai-history-open-box .gnaXro{width:20px;height:20px} @keyframes nai-history-open-in{from{opacity:0}to{opacity:1}} #view-nai-image #nai-history-rail.collapsed .hUIaXl{transform:rotate(180deg)} #view-nai-image .image-gen-panel-history-rail .hUIaXl{transition:transform .12s} /* 官方提示条（backend banner 外观）用于本软件的提示信息 */ #view-nai-image #nai-notice.is-visible{display:block;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} #view-nai-image #nai-notice.is-error{color:rgb(255,120,120)} #view-nai-image #nai-drop-overlay.is-dragging{visibility:visible;background-color:rgba(0,0,0,.35)} #view-nai-image #nai-drop-overlay.is-dragging .RbncH{opacity:1} /* ---------- 提示词编辑器：textarea 叠在官方 ProseMirror 段落之上 ---------- */ #view-nai-image .nai-prompt-field{position:relative} #view-nai-image .nai-prompt-stack{position:relative;min-height:inherit} #view-nai-image .nai-prompt-highlight{position:relative;pointer-events:none;color:#fff;user-select:none;-webkit-user-select:none} /* 叠层段落与 textarea 用同一套行高，换行和选区才能对齐 */ #view-nai-image .nai-prompt-highlight p,#view-nai-image .nai-prompt-highlight span{line-height:1.625rem} #view-nai-image .nai-prompt-highlight .nai-prompt-placeholder{visibility:hidden} #view-nai-image .nai-prompt-textarea{ position:absolute;top:0;left:0;display:block;width:100%;height:100%;min-height:1.625rem;margin:0;padding:0;border:0;border-radius:0;outline:0; background:transparent;color:transparent;caret-color:#fff;resize:none;overflow:hidden; font-family:inherit;font-size:1rem;font-weight:400;line-height:1.625rem;letter-spacing:normal;text-indent:0; white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;tab-size:4; font-variant-ligatures:none;font-feature-settings:"liga" 0;touch-action:pan-y } #view-nai-image .nai-prompt-textarea::placeholder{color:#fff;opacity:.5} #view-nai-image .nai-prompt-textarea::selection{background:rgba(245,243,194,.28);color:transparent} #view-nai-image .nai-prompt-textarea:focus{outline:0} #view-nai-image .mid-intensity-color-0{background:none} /* 官方 | 与 || 高亮为 800 字重并带 1px 内边距；叠层必须与 textarea 等宽，这里用描边代替加粗 */ #view-nai-image .nai-prompt-highlight .image-prompt-bar-highlight,#view-nai-image .nai-prompt-highlight .image-prompt-double-bar-highlight{color:#f5f3c2;font-weight:400;padding:0;-webkit-text-stroke:.5px currentColor} /* 官方 PromptErrorContainer / PromptErrorBox（:: 权重写法提示，失焦时更新） */ #view-nai-image .nai-prompt-errors{display:flex;flex-direction:row;align-items:center;justify-content:space-between;background:#0e0f21;padding:12px 12px 0;border:1px solid #22253f;border-top:none;border-bottom:none} #view-nai-image .nai-prompt-errors-box{background:#13152c;border:1px solid #22253f;border-radius:3px;padding:4px 10px;width:100%;box-sizing:border-box} #view-nai-image .nai-prompt-warning{color:#ff7878!important} /* 官方 token 条：宽度由脚本按 token 数计算 */ #view-nai-image .token-bar-other{flex:0 0 auto;width:0;height:100%;background:rgba(255,255,255,.5);transition:width .12s} #view-nai-image .token-bar-own{flex:0 0 auto;width:0;height:100%;background:#fff;transition:width .12s} #view-nai-image .over-limit .token-bar-other,#view-nai-image .over-limit .token-bar-own{background:#ff7878} /* ---------- 本软件补充的控件（沿用官方配色与尺寸） ---------- */ #view-nai-image .nai-inline-input{flex:1 1 auto;min-width:0;width:180px;height:28px;padding:0 8px;border:1px solid rgb(34,37,63);border-radius:4px;background:rgb(14,15,33);color:#fff;font-size:.875rem} #view-nai-image .nai-inline-number{width:6ch;height:21px;padding:0;border:0;background:transparent;color:#fff;font-size:.875rem;font-weight:600} #view-nai-image .iGUwMD .nai-inline-number{margin-top:2px} #view-nai-image .nai-native-select{display:none!important} #view-nai-image .character-prompt-input.is-disabled > :not(.kxlOPr){opacity:.45} #view-nai-image .character-prompt-input.is-disabled .aCBJf{opacity:.45} #view-nai-image .character-prompt-input.dragging{opacity:.4} /* 自定义角色坐标（官方 5×5 网格样式） */ /* 画布：缩放后的图块交互与生成中的占位 */ #view-nai-image #nai-canvas{cursor:grab} #view-nai-image #nai-canvas.panning{cursor:grabbing} #view-nai-image .image-gen-canvas-tile img.image-grid-image{display:block} /* 菜单：官方账号菜单定位到侧栏下方 */ #view-nai-image #nai-menu{bottom:0} #view-nai-image #nai-menu > .jCgiIN{height:100%} #view-nai-image #nai-menu .kNyKYh{height:100%;border-bottom:1px solid rgb(34,37,63);animation:nai-menu-open .15s ease-in-out} @keyframes nai-menu-open{from{height:0}to{height:100%}} /* 下拉菜单浮层（官方 react-select menu 类名） */ #view-nai-image .nai-select-portal{font-size:.875rem;font-weight:600;color:#fff} /* 画布编辑器覆盖层 */ #view-nai-image #nai-editor-host{position:absolute;inset:0;z-index:400;display:flex;flex-direction:column;background:rgb(14,15,33)} #view-nai-image #nai-editor-host > .image-gen-canvas{flex:1 1 auto;position:relative;min-height:0} #view-nai-image #nai-editor-stage canvas{position:absolute;left:0;top:0;image-rendering:auto} #view-nai-image #nai-editor-stage .nai-editor-cursor{position:absolute;pointer-events:none;border:1px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(0,0,0,.6);border-radius:50%;transform:translate(-50%,-50%)} #view-nai-image #nai-editor-stage .nai-editor-cursor.square{border-radius:0} /* 导入对话框位于视图内部 */ #view-nai-image #nai-image-import-modal .fHjMgL{position:absolute} #view-nai-image #nai-image-import-modal .jnRUGG{position:absolute} /* ---------- 标签推荐浮层（本软件功能，沿用官方面板配色） ---------- */ /* Enhance / Director Tools 浮动面板（官方 sc-83fba72f 样式：底部居中、bg2 背景、bg3 边框） */ #view-nai-image .nai-tool-panel-wrap{position:absolute;top:70px;bottom:10px;left:0;right:0;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;z-index:40} #view-nai-image .nai-tool-panel{pointer-events:auto;display:flex;flex-direction:column;gap:14px;width:min(560px,calc(100% - 24px));max-height:100%;overflow:auto;padding:12px 16px 14px;background-color:rgb(25,27,49);border:1px solid rgb(34,37,63);border-radius:4px;box-shadow:0 0 15px rgba(0,0,0,.35);color:#fff} #view-nai-image .nai-tool-select{max-width:260px} #view-nai-image .nai-tool-panel-head{display:flex;flex-direction:row;align-items:center;gap:10px} #view-nai-image .nai-tool-panel-title{font-size:1.125rem;font-weight:700;font-family:Eczar,serif;color:rgb(245,243,194);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #view-nai-image .nai-tool-spacer{flex:1 1 auto} #view-nai-image .nai-tool-close{padding:6px;display:flex;align-items:center;justify-content:center} #view-nai-image .nai-tool-panel-body{display:flex;flex-direction:column;gap:14px} #view-nai-image .nai-tool-field{display:flex;flex-direction:column;gap:6px} #view-nai-image .nai-tool-label{font-size:.875rem;font-weight:600} #view-nai-image .nai-tool-segment{flex-wrap:wrap} #view-nai-image .nai-tool-segment > button{flex:1 0 auto;padding:6px 12px;white-space:nowrap} #view-nai-image .nai-tool-advanced{display:flex;flex-direction:column;gap:10px} #view-nai-image .nai-tool-link{align-self:flex-start;padding:0;background:none;border:0;font-size:.8125rem;opacity:.7;text-decoration:underline;cursor:pointer} #view-nai-image .nai-tool-link:hover{opacity:1} #view-nai-image .nai-tool-prompt{width:100%;resize:vertical;min-height:52px;padding:8px 10px;background:rgb(14,15,33);border:1px solid rgb(34,37,63);border-radius:3px;color:#fff;font:inherit;font-size:.875rem;outline:none} #view-nai-image .nai-tool-prompt:focus{border-color:rgb(64,68,103)} #view-nai-image .nai-tool-level{display:flex;align-items:center;gap:10px} #view-nai-image .nai-tool-level > button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:1.125rem} #view-nai-image .nai-tool-level-label{min-width:110px;text-align:center;font-weight:600} /* Prompt Chunks 面板（官方 #promptChunkContainer：sc-9e75b64b-1 / sc-bf4c29a2-*） */ #view-nai-image .buXIAl{height:520px;width:380px;max-width:calc(-60px + 100vw);background-color:rgb(25,27,49);border:1px solid rgb(34,37,63);border-radius:3px;padding:20px;z-index:300;display:flex;flex-direction:column;overflow-y:auto;box-sizing:border-box;color:#fff} #view-nai-image .iLZWXo{display:flex;flex-direction:row;margin-bottom:12px;border-bottom:1px solid rgb(34,37,63);padding-bottom:8px} #view-nai-image .nai-chunk-pill{position:relative;display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border-radius:4px;font-size:.8rem;cursor:pointer;user-select:none;background-color:color-mix(in srgb,var(--chunk-color) 12.5%,transparent);border:1px solid color-mix(in srgb,var(--chunk-color) 37.5%,transparent);color:#fff;transition:all .15s ease} #view-nai-image .nai-chunk-pill:hover{background-color:color-mix(in srgb,var(--chunk-color) 25%,transparent);border-color:var(--chunk-color)} #view-nai-image .nai-chunk-pill:active{cursor:grabbing} #view-nai-image .nai-chunk-pill.is-drop,#view-nai-image .nai-chunk-category-head.is-drop,#view-nai-image .brMeNC.is-drop,#view-nai-image .nai-chunk-category-body.is-drop{box-shadow:inset 3px 0 0 rgb(245,243,194)} #view-nai-image .nai-chunk-edit{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:none;border-radius:3px;background:transparent;color:#fff;opacity:.5;cursor:pointer;font-size:.7rem;transition:all .15s ease} #view-nai-image .nai-chunk-edit:hover{opacity:1;background-color:rgb(34,37,63)} #view-nai-image .nai-chunk-category{display:flex;flex-direction:column} #view-nai-image .nai-chunk-category-head{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:4px;font-size:.85rem;font-weight:600;cursor:pointer;user-select:none;background-color:color-mix(in srgb,var(--chunk-color) 8%,transparent);border:1px solid color-mix(in srgb,var(--chunk-color) 25%,transparent)} #view-nai-image .nai-chunk-category-head:hover{background-color:color-mix(in srgb,var(--chunk-color) 15%,transparent)} #view-nai-image .nai-chunk-arrow{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;transition:transform .15s ease} #view-nai-image .nai-chunk-category-name{flex:1 1 auto} #view-nai-image .nai-chunk-count{font-size:.75rem;opacity:.6} #view-nai-image .nai-chunk-category-body{display:flex;flex-flow:row wrap;gap:6px;padding-left:16px;margin-top:6px;min-height:28px} #view-nai-image .nai-chunk-flex{flex:1 1 0} #view-nai-image .nai-chunk-form{display:flex;flex-direction:column;gap:12px;flex:1 1 auto} #view-nai-image .nai-chunk-form-title{font-size:1rem;font-weight:600} #view-nai-image .nai-chunk-field{display:flex;flex-direction:column;gap:4px} #view-nai-image .nai-chunk-label{font-size:.8rem;opacity:.7} #view-nai-image .nai-chunk-input{padding:8px 12px;border-radius:4px;border:1px solid rgb(34,37,63);background-color:rgb(19,21,44);color:#fff;font-size:.875rem;font-family:inherit} #view-nai-image .nai-chunk-input:focus{outline:none;border-color:rgba(255,255,255,.25)} #view-nai-image .nai-chunk-textarea{min-height:80px;resize:vertical} #view-nai-image .nai-chunk-color-row{display:flex;align-items:center;gap:8px} #view-nai-image .nai-chunk-swatch{width:32px;height:32px;padding:0;border-radius:4px;border:1px solid rgb(34,37,63);background:none;cursor:pointer} #view-nai-image .nai-chunk-hex{flex:1} #view-nai-image .nai-chunk-error{font-size:.8rem;color:rgb(255,120,120);min-height:1em} #view-nai-image .nai-chunk-buttons{display:flex;flex-direction:row;gap:8px} #view-nai-image .nai-chunk-button{flex:1;justify-content:center;font-size:.875rem} #view-nai-image .nai-chunk-button.is-primary{border:1px solid rgb(245,243,194)} #view-nai-image .nai-chunk-button.is-danger{background-color:rgba(255,120,120,.5)} #view-nai-image .nai-chunk-button.is-danger:hover{background-color:rgba(255,120,120,.6)} #view-nai-image .nai-chunk-setting{display:flex;align-items:center;gap:10px;font-size:.875rem;cursor:pointer;user-select:none} #view-nai-image .nai-chunk-setting input{position:absolute;opacity:0;pointer-events:none} #view-nai-image .nai-chunk-check{width:20px;height:20px;border-radius:3px;border:1px solid rgb(34,37,63);background:rgb(14,15,33);display:inline-flex;align-items:center;justify-content:center} #view-nai-image .nai-chunk-check.is-on{background:rgb(245,243,194);border-color:rgb(245,243,194)} #view-nai-image .nai-chunk-check.is-on::after{content:"";width:12px;height:12px;background:rgb(19,21,44);mask:url(../assets/nai-official/media/check.svg) center/contain no-repeat;-webkit-mask:url(../assets/nai-official/media/check.svg) center/contain no-repeat} #view-nai-image .nai-chunk-menu{position:absolute;z-index:320;max-height:260px;overflow-y:auto;background:rgb(25,27,49);border:1px solid rgb(34,37,63);border-radius:3px;box-shadow:0 4px 14px rgba(0,0,0,.35);padding:4px} #view-nai-image .nai-chunk-menu-item{display:flex;flex-direction:column;gap:2px;padding:6px 8px;border-radius:3px;cursor:pointer;border-left:3px solid var(--chunk-color)} #view-nai-image .nai-chunk-menu-item.is-active,#view-nai-image .nai-chunk-menu-item:hover{background:rgb(34,37,63)} #view-nai-image .nai-chunk-menu-label{font-size:.85rem;font-weight:600} #view-nai-image .nai-chunk-menu-text{font-size:.75rem;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-nai-image .nai-chunk-menu-empty{padding:8px;font-size:.8rem;opacity:.6} /* 提示词里的 !macro:名称! 显示为彩色标签（无内边距，保证光标对齐） */ #view-nai-image .nai-prompt-highlight .nai-macro-chip{border-radius:4px;background-color:color-mix(in srgb,var(--chunk-color) 25%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--chunk-color) 60%,transparent)} #view-nai-image .nai-prompt-highlight .nai-macro-chip.is-missing{text-decoration:line-through wavy rgba(255,120,120,.8)} /* Settings → Highlight Emphasis 关闭时不着色权重 */ #view-nai-image.nai-no-emphasis-highlight .nai-prompt-highlight [class*="intensity-color-"]{background:none!important;color:inherit!important} /* 展开的 AI Settings（官方 settings 捕获中的缺失样式 + 布局） */ #view-nai-image .liVlrn{display:flex;flex-direction:column;gap:10px} #view-nai-image .bhzAyT{cursor:pointer;user-select:none;padding:6px 15px;font-size:0.875rem;border-radius:3px;opacity:1;background-color:rgb(19,21,44);color:rgba(255,255,255,0.5);border:1px solid rgb(34,37,63);flex:0 0 auto;display:block} #view-nai-image .bhzAyT>div>.sc-e2da9a21-1{margin-right:5px;width:0.7rem;height:0.7rem;background-color:rgba(255,255,255,0.5)} #view-nai-image .bhzAyT:hover{background-color:rgb(34,37,63)} #view-nai-image .dwneAT{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;-webkit-box-align:baseline;align-items:baseline} #view-nai-image .dwneAT>div{display:flex;-webkit-box-align:center;align-items:center;grid-column-start:1;grid-row-start:1} #view-nai-image .dwneAT>div[aria-hidden="true"]{opacity:0} #view-nai-image .ijbsuE{text-align:center;font-weight:700;border-radius:3px;color:rgb(19,21,44);flex:0 0 auto;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center} #view-nai-image .ijbsuE:hover,#view-nai-image .ijbsuE:focus{background:rgb(247,245,206)} #view-nai-image .cekrmu{flex:0 0 auto;width:32px;height:34px;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;background:rgb(34,37,63);border:1px solid transparent;border-radius:3px} #view-nai-image .bxOYGm{display:flex;flex-direction:row;-webkit-box-pack:justify;justify-content:space-between;-webkit-box-align:center;align-items:center;padding:8px 12px;background:rgb(25,27,49)} #view-nai-image .jdNYkc{display:flex;flex-direction:row;-webkit-box-align:center;align-items:center} #view-nai-image .jwuPgU{mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCAzOCA0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDI4QzIxLjc4NSAyOCAyNCAyNS43ODE3IDI0IDIzQzI0IDIwLjIxODMgMjEuNzg1IDE4IDE5IDE4QzE2LjIxNSAxOCAxNCAyMC4yMTgzIDE0IDIzQzE0IDI1Ljc4MTcgMTYuMjE1IDI4IDE5IDI4WiIgZmlsbD0iI0ZGNzg3OCIvPgo8cGF0aCBkPSJNMzcuNjEzNiAxOS4yOTA2QzM3LjExNjIgMTYuODcyMSAzNi4xNDQxIDE0LjU3NSAzNC43NTMxIDEyLjUzMDdDMzMuMzg2MyAxMC41MTk1IDMxLjY0NDkgOC43ODcyOCAyOS42MjMxIDcuNDI3NjlDMjcuNTY3NyA2LjA0NDQ4IDI1LjI1ODUgNS4wNzc1NyAyMi44Mjc0IDQuNTgyMkMyMS41NTA0IDQuMzI0NTkgMjAuMjUwMiA0LjE5NzkyIDE4Ljk0NzIgNC4yMDQyVjBMMTAuNTU1NSA2LjNMMTguOTQ3MiAxMi42VjguNDA0MTlDMTkuOTY5IDguMzk5OTkgMjAuOTkwOCA4LjQ5NjU5IDIxLjk3NjcgOC42OTgxOUMyMy44NjYxIDkuMDgzMzUgMjUuNjYwOSA5LjgzNDczIDI3LjI1ODYgMTAuOTA5NUMyOC44MzQzIDExLjk2NjMgMzAuMTkwNSAxMy4zMTUzIDMxLjI1MjkgMTQuODgyN0MzMi45MDIzIDE3LjMwODcgMzMuNzgxOSAyMC4xNzEyIDMzLjc3NzggMjMuMUMzMy43Nzc0IDI1LjA2NTMgMzMuMzgyNiAyNy4wMTA4IDMyLjYxNjYgMjguODIyNUMzMi4yNDQxIDI5LjY5NTEgMzEuNzg4OSAzMC41MzA1IDMxLjI1NzEgMzEuMzE3M0MzMC43MjMyIDMyLjA5OTMgMzAuMTE2OCAzMi44Mjk4IDI5LjQ0NTggMzMuNDk5MkMyNy40MDIyIDM1LjUyODIgMjQuODA3OSAzNi45MTk5IDIxLjk4MDkgMzcuNTAzOUMyMC4wMTQ5IDM3Ljg5ODcgMTcuOTg5MyAzNy44OTg3IDE2LjAyMzMgMzcuNTAzOUMxNC4xMzI5IDM3LjExODMgMTIuMzM3NCAzNi4zNjYyIDEwLjczOTIgMzUuMjkwNUM5LjE2NTM1IDM0LjIzNDYgNy44MTA2NyAzMi44ODcxIDYuNzQ5MjIgMzEuMzIxNUM1LjEwMTYxIDI4Ljg5MjkgNC4yMjE1OSAyNi4wMjk4IDQuMjIyMjIgMjMuMUgwQzAuMDAyMjQ2NTggMjYuODY2NyAxLjEzMzQzIDMwLjU0NzMgMy4yNDkgMzMuNjcxNEM0LjYxNjY4IDM1LjY3OTMgNi4zNTYyNiAzNy40MDk3IDguMzc0NzcgMzguNzcwMkMxMS41MTExIDQwLjg4MTcgMTUuMjEyOSA0Mi4wMDY5IDE5IDQyQzIwLjI4NjIgNDEuOTk5OSAyMS41NjkyIDQxLjg3MTEgMjIuODI5NSA0MS42MTU3QzI1LjI1ODkgNDEuMTE2NyAyNy41NjY3IDQwLjE1MDEgMjkuNjIzMSAzOC43NzAyQzMwLjYzMjggMzguMDkzNCAzMS41NzM5IDM3LjMyMDUgMzIuNDMzIDM2LjQ2MjNDMzMuMjkzMyAzNS42MDQyIDM0LjA3MDggMzQuNjY3NyAzNC43NTUyIDMzLjY2NTFDMzYuODc2MSAzMC41NDYxIDM4LjAwNjUgMjYuODY1NSAzOCAyMy4xQzM3Ljk5OTkgMjEuODIwNSAzNy44NzA0IDIwLjU0NDMgMzcuNjEzNiAxOS4yOTA2WiIgZmlsbD0iI0ZGNzg3OCIvPgo8L3N2Zz4K)} #view-nai-image.nai-ai-settings-expanded .image-gen-footer{flex:0 1 auto;min-height:0;max-height:75%} #view-nai-image #nai-ai-settings-panel{flex:0 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column} #view-nai-image #nai-ai-settings-panel.hidden{display:none} #view-nai-image #nai-variety.is-on{background-color:rgb(245,243,194);color:rgb(19,21,44);border-color:transparent} #view-nai-image #nai-variety.is-on>div>.sc-e2da9a21-1{background-color:rgb(19,21,44)} #view-nai-image #nai-ai-settings-panel .hidden{display:none!important} /* 官方 "Did you mean?" 标签建议框（PromptSuggestion*）：选中项与引用量圆点 */ #view-nai-image .image-prompt-suggestions .fWWoPn.is-selected{background:#22253f} #view-nai-image .image-prompt-suggestions .nai-suggestion-bullet{width:.625rem;height:.625rem;border-radius:50%;border:1px solid rgba(255,255,255,.1);flex:0 0 auto} #view-nai-image .image-prompt-suggestions[hidden]{display:none} /* Anlas 右侧刷新图标：查询余额并检查 API 连接（地址、代理、Key）；红色 = 上次检查失败 */ #view-nai-image .nai-anlas-refresh{flex:0 0 12px;width:12px;height:12px;margin-left:9px;background-color:#fff;opacity:.55;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 8a5.5 5.5 0 1 1-1.6-3.9'/%3E%3Cpath d='M13.6 1.8v2.9h-2.9'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 8a5.5 5.5 0 1 1-1.6-3.9'/%3E%3Cpath d='M13.6 1.8v2.9h-2.9'/%3E%3C/svg%3E") center/contain no-repeat;transition:opacity .15s} #view-nai-image #nai-refresh-anlas:hover .nai-anlas-refresh{opacity:1} #view-nai-image .nai-anlas-refresh.is-loading{opacity:1;animation:nai-anlas-spin .8s linear infinite} #view-nai-image .nai-anlas-refresh.is-error{background-color:#ff7878;opacity:1} @keyframes nai-anlas-spin{to{transform:rotate(360deg)}} /* 官方 “Copy to Seed”：鼠标移到种子上时显示文字（与种子占同一格，宽度不跳动） */ #view-nai-image [data-action="seed"]:hover > span > span:first-child{visibility:hidden!important} #view-nai-image [data-action="seed"]:hover > span > span:last-child{visibility:visible!important} /* 紧凑 AI Settings 栏里的种子数字（点击清除） */ #view-nai-image #nai-seed-value{height:21px;display:flex;align-items:center;padding:0;font-weight:600;max-width:9ch} #view-nai-image #nai-seed-value span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #view-nai-image #nai-seed-value:hover{text-decoration:line-through;opacity:.8} /* 点击生成后立即变暗（请求开始前的检查期间也保持） */ #view-nai-image #nai-generate.is-busy{opacity:.5;cursor:default;transition:none} /* History batch select (1.2.8) */ #view-nai-image .nai-batch-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 8px; } #view-nai-image .nai-batch-save-bar { padding: 6px 10px 0; } #view-nai-image .nai-batch-save-bar[hidden] { display: none; } /* The label never wraps letter by letter: a narrow sidebar moves the Delete group to the next row instead. */ #view-nai-image .nai-batch-btn { flex: 1 1 auto; min-width: max-content; height: 26px; padding: 0 10px; white-space: nowrap; border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.22); background: transparent; color: inherit; font-size: 12px; cursor: pointer; } #view-nai-image .nai-batch-bar .nai-batch-delete-wrap { flex: 1 1 auto; min-width: max-content; } #view-nai-image .nai-batch-bar .nai-batch-delete-wrap #nai-history-batch-delete { flex: 1 1 auto; } #view-nai-image .nai-batch-bar .nai-batch-delete-wrap #nai-history-batch-delete-expand { flex: 0 0 auto; min-width: 0; } #view-nai-image .nai-batch-btn[hidden] { display: none; } #view-nai-image .nai-batch-btn:disabled { opacity: 0.4; cursor: default; } #view-nai-image .nai-batch-btn[aria-pressed="true"] { background: rgba(245, 243, 194, 0.14); } #view-nai-image .nai-batch-danger { border-color: #e5484d; color: #ff8085; } #view-nai-image .nai-batch-picked { outline: 2px solid #f5f3c2; outline-offset: -2px; position: relative; } #view-nai-image .nai-batch-picked::after { content: '\2713'; position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; background: #f5f3c2; color: #13152c; font-size: 12px; font-weight: 700; pointer-events: none; } /* 导入对话框：图片无法从元数据复现时的官方红色提示；仅在图片带 Vibe 编码时显示 Vibe Transfer 选项 */ #view-nai-image .nai-import-warning{display:block;color:#FF7878} #view-nai-image .nai-import-warning.hidden,#view-nai-image #nai-import-vibe-group.hidden{display:none!important} #view-nai-image #nai-import-vibe-group label.is-disabled{opacity:.5;pointer-events:none} /* ---------- phone layout below 900px (official MOBILE_WIDTH), like the official phone page: the top bar stays on top, the image area (welcome / gallery / results) fills the window, and Prompt / Reference Images / Chunks are a bottom sheet over it (collapsed to one line of the prompt, half open, or fully open), with the bottom bar under it. The History rail is hidden. ---------- */ .nai-phone-sheet-head{display:none} @media (max-width: 899px) { #view-nai-image .image-gen-main > div { flex-direction: column !important; position: relative; } #view-nai-image .image-gen-main > div > div:first-child { position: absolute; left: 0; right: 0; top: 0; bottom: 60px; width: auto !important; z-index: 30; pointer-events: none; background: transparent !important; } #view-nai-image #nai-sidebar { width: 100% !important; height: 100%; min-height: 0; border-right: 0; background: transparent !important; pointer-events: none; position: relative; } #view-nai-image #nai-sidebar > * { pointer-events: auto; } #view-nai-image #nai-sidebar .image-gen-nav-row { position: relative; z-index: 2; background: rgb(25,27,49); border-bottom: 1px solid rgb(34,37,63); } #view-nai-image #nai-sidebar > .kaeMNL { display: none; } #view-nai-image #nai-panel-resize { display: none !important; } #view-nai-image #nai-history-rail, #view-nai-image .nai-history-open { display: none !important; } #view-nai-image .image-gen-footer { display: none !important; } #view-nai-image #nai-stage { flex: 1 1 0 !important; width: 100% !important; min-height: 0; } #view-nai-image #nai-stage .image-gen-results-stage { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; } #view-nai-image #nai-stage .image-gen-results-stage > div:first-child { flex: 1 1 0; min-height: 0; box-sizing: border-box; padding: 57px 0 76px; } #view-nai-image .image-gen-mobile-bottom-bar.btGMLn { display: block !important; width: 100%; flex: 0 0 auto; position: relative; z-index: 40; } #view-nai-image .image-gen-nav-row { padding: 8px 10px 6px; } /* The sheet */ #view-nai-image #nai-sidebar-scroll { position: absolute; left: 0; right: 0; bottom: 0; height: 76px; z-index: 1; box-sizing: border-box; background: rgb(25,27,49); border: 1px solid rgb(34,37,63); border-bottom: 0; border-radius: 10px 10px 0 0; box-shadow: 0 -4px 24px rgba(0,0,0,.35); overflow: hidden; overscroll-behavior: contain; transition: height .22s ease-out; padding-bottom: 12px; } #view-nai-image.nai-sheet-half #nai-sidebar-scroll { height: 62%; overflow-y: auto; } #view-nai-image.nai-sheet-full #nai-sidebar-scroll { height: calc(100% - 56px); overflow-y: auto; border-radius: 0; } #view-nai-image.nai-sheet-dragging #nai-sidebar-scroll { transition: none; } #view-nai-image .nai-phone-sheet-head { display: block; position: sticky; top: 0; z-index: 5; background: rgb(25,27,49); touch-action: none; cursor: grab; } #view-nai-image .nai-phone-sheet-head { padding: 10px 0 8px; } #view-nai-image .nai-phone-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); margin: 0 auto; } #view-nai-image .nai-phone-sheet-summary { display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; margin-top: 4px; padding: 0 18px; border: 0; background: none; color: #fff; font: inherit; font-size: 15px; text-align: left; cursor: pointer; } #view-nai-image .nai-phone-sheet-summary span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-nai-image .nai-phone-sheet-summary span.is-empty { color: rgba(255,255,255,.55); } #view-nai-image .nai-phone-sheet-summary i { flex: 0 0 auto; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 8px solid rgba(255,255,255,.85); } #view-nai-image:not(.nai-sheet-collapsed) .nai-phone-sheet-summary { display: none; } #view-nai-image.nai-sheet-collapsed #nai-sidebar-scroll > :not(.nai-phone-sheet-head) { display: none !important; } } .nai-phone-tabs{display:none} @media (max-width: 899px) { #view-nai-image .nai-phone-tabs{display:flex;justify-content:center;border-bottom:1px solid rgba(255,255,255,.08);padding:0 8px;margin:0 12px 0 0;flex:0 0 auto;pointer-events:auto;z-index:1} #view-nai-image .nai-phone-tabs button{padding:8px 12px 10px;font-size:14px;font-weight:600;color:rgba(255,255,255,.7);border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;pointer-events:auto} #view-nai-image .nai-phone-tabs button.is-active{color:#fff;border-bottom-color:#f5f3c2} #view-nai-image .image-gen-model-mode-row{display:none!important} #view-nai-image.nai-phone-tab-refs .image-gen-prompt-main, #view-nai-image.nai-phone-tab-refs .image-gen-character-prompts{display:none!important} #view-nai-image:not(.nai-phone-tab-refs) .image-gen-image-inputs{display:none!important} } @media (max-width: 899px) { /* 1.2.1 F5: 确保窄屏模型切换器完全可点击 */ #view-nai-image.nai-ai-settings-expanded .image-gen-footer { display: flex !important; position: absolute; left: 0; right: 0; bottom: 60px; max-height: 70%; z-index: 210; background: rgb(25,27,49); border-top: 1px solid rgb(34,37,63); border-radius: 8px 8px 0 0; box-shadow: 0 -4px 24px rgba(0,0,0,.35); pointer-events: auto; } #view-nai-image.nai-ai-settings-expanded .image-gen-footer #nai-generate { display: none; } #view-nai-image.nai-ai-settings-expanded .image-gen-footer * { pointer-events: auto !important; } #view-nai-image.nai-ai-settings-expanded .image-gen-footer .image-gen-model-mode-row { display: flex !important; pointer-events: auto !important; z-index: 215; } #view-nai-image.nai-ai-settings-expanded .image-gen-footer select, #view-nai-image.nai-ai-settings-expanded .image-gen-footer button, #view-nai-image.nai-ai-settings-expanded .image-gen-footer input { pointer-events: auto !important; z-index: 216 !important; } } #nai-phone-scrim{display:none} @media (max-width: 899px) { #view-nai-image .image-gen-image-settings{display:none!important} #view-nai-image.nai-ai-settings-expanded .image-gen-image-settings{display:none!important} #view-nai-image.nai-ai-settings-expanded #nai-phone-scrim{display:block;position:absolute;left:0;right:0;top:0;bottom:60px;background:rgba(0,0,0,.45);z-index:205} #view-nai-image.nai-ai-settings-expanded .image-gen-footer{top:auto!important;bottom:60px!important;max-height:75%!important;overflow-y:auto} } @media (max-width: 899px) { #view-nai-image.nai-ai-settings-expanded #nai-phone-scrim { top: 0; bottom: 0; z-index: 205; } #view-nai-image.nai-ai-settings-expanded .image-gen-footer { bottom: 0 !important; z-index: 210; } } @media (max-width: 899px) { #view-nai-image #nai-ai-settings-panel .image-gen-image-settings{display:flex!important;flex-direction:column;gap:12px;padding:12px 0 0} #view-nai-image.nai-ai-settings-expanded .image-gen-image-settings{display:flex!important} } @media (max-width: 899px) { #view-nai-image.nai-ai-settings-expanded .image-gen-footer { max-height: calc(100% - 56px) !important; } } @media (max-width: 899px) { #view-nai-image #nai-ai-settings-panel .image-gen-image-settings { padding: 12px 12px 0 !important; box-sizing: border-box; } } @media (max-width: 899px) { #view-nai-image.nai-phone-history-open .image-gen-main > div > div:has(> #nai-history-rail) { position: absolute; left: 0; right: 0; top: 0; bottom: 60px; width: auto !important; z-index: 220; display: flex !important; } #view-nai-image.nai-phone-history-open #nai-history-rail, #view-nai-image.nai-phone-history-open #nai-history-rail.collapsed { display: flex !important; width: 100% !important; border-left: 0; } #view-nai-image.nai-phone-history-open #nai-history-rail .gNdMoO { display: none !important; } } /* 1.2.1 F2: APK 图标显示修复 - 为不支持 mask 的 Android WebView 添加备用方案 */ @supports not (mask-size: contain) { #view-nai-image .gnaXro { background-color: rgba(255, 255, 255, 0.85) !important; mask: none !important; -webkit-mask: none !important; } } /* Phone mode 底部栏图标确保可见 */ @media (max-width: 899px) { #view-nai-image .nai-phone-bar .gnaXro, #view-nai-image #nai-phone-generate .gnaXro { opacity: 0.9; } } /* No API Key yet: 1.2.1 E5 - 参照官方登录界面，顶部显示 Sign Up / Log In 和 Set API Key */ #view-nai-image .nai-key-welcome { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 16px 16px; text-align: center; position: relative; z-index: 1; background: linear-gradient(180deg, rgba(34,37,63,0.5) 0%, rgba(25,27,49,0) 100%); } #view-nai-image .nai-key-welcome[hidden] { display: none; } #view-nai-image .nai-key-welcome-content { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 560px; } #view-nai-image .nai-key-welcome-title { margin: 0; font-family: Eczar, serif; font-size: 1.25rem; font-weight: 700; color: rgb(255, 255, 255); } #view-nai-image .nai-key-welcome-hint { margin: 0; color: rgba(255, 255, 255, 0.85); font-size: 1rem; font-weight: 600; } #view-nai-image .nai-key-welcome-buttons { display: flex; gap: 12px; margin: 8px 0; } #view-nai-image .nai-key-welcome-button { height: 44px; padding: 0 28px; border: 0; border-radius: 4px; background: rgb(245, 243, 194); color: rgb(19, 21, 44); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; transition: background 0.15s; } #view-nai-image .nai-key-welcome-button:hover { background: rgb(255, 253, 214); } #view-nai-image .nai-key-welcome-button.nai-key-set-api { background: rgb(40, 43, 68); color: rgb(245, 243, 194); margin-top: 4px; } #view-nai-image .nai-key-welcome-button.nai-key-set-api:hover { background: rgb(50, 53, 78); } #view-nai-image .nai-key-welcome-note { margin: 0; color: rgba(255, 255, 255, 0.65); font-size: 0.875rem; line-height: 1.4; } /* With the block shown, Get Started follows it closely instead of after the usual top gap. */ #view-nai-image #nai-welcome.nai-needs-key .euuNiY[height="120"] { height: 48px !important; } /* Official welcome page on narrow windows: no side padding below 900 px, two gallery columns below 768 px. */ @media (max-width: 900px) { #view-nai-image .djdAFq { padding: 20px 0; } } @media (max-width: 768px) { #view-nai-image .daonaG { grid-template-columns: 1fr 1fr; } #view-nai-image .daonaG div:nth-child(3n+2), #view-nai-image .daonaG div:nth-child(3n+3) { top: 0; } #view-nai-image .daonaG div:nth-child(2n+2) { top: -24px; } } @media (max-width: 899px) { #view-nai-image #nai-sidebar-scroll .nai-phone-tabs { margin: 0; } #view-nai-image #nai-welcome .euuNiY[height="120"] { height: 40px !important; } #view-nai-image #nai-welcome.nai-needs-key .euuNiY[height="120"] { height: 8px !important; } }