/* 队列、成片卡片、瀑布流、杂项小按钮、toast。 */ .queue{padding:0 0 18px;margin-bottom:20px} .queue.out{background:transparent;border:0;border-bottom:1px solid var(--line);box-shadow:none;border-radius:0} .qtitle{font-size:12px;color:var(--dim);font-weight:600;margin-bottom:12px} .qrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)} .qrow:first-of-type{border-top:0} .qnum{width:26px;height:26px;border-radius:9px;font-size:11.5px;flex:0 0 auto; display:grid;place-items:center;color:var(--dim); box-shadow:inset 2px 2px 5px var(--lo), inset -2px -2px 5px var(--hi)} .qrow.run .qnum{color:var(--acc)} .qtext{flex:1;font-size:13px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .qeta{font-size:12.5px;color:var(--ph);white-space:nowrap;flex:0 0 auto} /* 排队里也要看得到这条片子有多长——光有剩余时间不知道在等什么 */ .qdur{font-size:11.5px;color:var(--dim);white-space:nowrap;flex:0 0 auto} .qempty{color:var(--ph);font-size:13px} /* align-items:start —— 不加的话同一行的卡片会被最高的那张（竖屏片）拉到一样高， 矮卡片的正文和底部信息之间就空出一大片 */ .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:22px; align-items:start} /* 瀑布流：行高切成 4px 的细格，每张卡片由 JS 按自己的高度算 grid-row: span N， 下一张就能贴着上一张的底边往上顶，而不是等一整行里最高的那张。 只在支持 ResizeObserver 的浏览器上开（JS 给 加 .mas），否则退回上面的规则。 */ html.mas .cards, html.mas .acards{grid-auto-rows:4px;row-gap:0} html.mas .card, html.mas .acard{margin-bottom:22px} html.mas .empty{grid-row:span 60} .card{overflow:hidden;display:flex;flex-direction:column;padding:12px} .thumb{position:relative;border-radius:5px;overflow:hidden;background:var(--hole); aspect-ratio:16/9;display:grid;place-items:center; box-shadow:inset 3px 3px 7px var(--lo), inset -3px -3px 7px var(--hi)} /* 画框比例由 JS 按成片的真实宽高设（thumb.style.aspectRatio），不再吸附到几个预设比例—— 768x448 / 448x768 / 2048x1152 这些都不是标准的 16:9 或 9:16，吸附过去就会留黑边或被切。 竖片再高也不让它把整页撑爆，超过就靠 contain 自己居中。 */ .thumb{max-height:min(70vh, 560px)} .thumb img,.thumb video{width:100%;height:100%;object-fit:contain;display:block;background:#0d1016} .play{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer; background:rgba(12,16,24,.2)} .play span{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92); display:grid;place-items:center;box-shadow:0 3px 12px rgba(0,0,0,.25)} .play span::after{content:"";border-left:15px solid var(--acc-d);border-top:9px solid transparent; border-bottom:9px solid transparent;margin-left:4px} .wait{display:flex;flex-direction:column;align-items:center;gap:11px;color:var(--dim); font-size:12.5px;padding:18px;width:100%} .spin{width:26px;height:26px;border:2.5px solid var(--lo);border-top-color:var(--acc); border-radius:50%;animation:sp 1s linear infinite} @keyframes sp{to{transform:rotate(360deg)}} .bar{width:76%;height:7px;border-radius:5px;overflow:hidden; box-shadow:inset 2px 2px 4px var(--lo), inset -2px -2px 4px var(--hi)} .bar i{display:block;height:100%;border-radius:5px;width:0;transition:width .8s linear; background:linear-gradient(90deg,var(--acc),var(--acc-d))} .cbody{padding:12px 4px 2px;display:flex;flex-direction:column;gap:9px;flex:1} .cp{font-size:12.5px;line-height:1.55;color:var(--fg);opacity:.85; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;word-break:break-word} .cmeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:11.5px; color:var(--ph);margin-top:auto} .st{font-size:11px;padding:3px 10px;border-radius:99px;white-space:nowrap;flex:0 0 auto; box-shadow:inset 2px 2px 4px var(--lo), inset -2px -2px 4px var(--hi)} .st.done{color:var(--ok)} .st.running{color:var(--acc)} .st.pending{color:var(--warn)} .st.failed,.st.expired{color:var(--bad)} .st.cancelled{color:var(--ph)} .st.draft{color:var(--warn)} /* 草片角标：别让人把它当成成片下载走了 */ .dtag{position:absolute;left:8px;top:8px;z-index:2;pointer-events:none; font-size:10.5px;padding:3px 8px;border-radius:99px; color:#fff;background:rgba(0,0,0,.55)} .m-dl .enh{font:inherit;font-size:11.5px;padding:4px 12px;border:0;border-radius:99px;cursor:pointer; color:var(--acc-d);background:var(--surf);box-shadow:3px 3px 6px var(--lo), -3px -3px 6px var(--hi)} .m-dl .enh:disabled{color:var(--ph);cursor:default} .cmeta .del{color:var(--dim)} .mini{font:inherit;font-size:12px;padding:7px 11px;border:1px solid var(--line);border-radius:6px;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;gap:6px; color:var(--hint);font-weight:550;background:var(--surf);box-shadow:none} .mini:hover{color:var(--acc-d)} #ttsvoicedel:hover{color:var(--bad)} .mini:disabled{color:var(--ph);cursor:default} /* 克隆面板：和下面的"合成"分开，免得两个蓝色大按钮挨在一起误点 */ #ttsclonewrap{margin-top:14px;padding:14px 14px 16px;border-radius:14px;background:var(--hole); box-shadow:inset 3px 3px 7px var(--lo), inset -3px -3px 7px var(--hi)} #ttsclonewrap label:first-of-type{margin-top:0} .go.sub{margin-top:14px;padding:12px;font-size:13.5px;background:var(--surf);color:var(--acc-d); box-shadow:4px 4px 9px var(--lo), -4px -4px 9px var(--hi)} .go.sub:disabled{background:var(--surf);color:var(--ph)} /* 卡片上的种子：点一下复制 + 填进左边的种子框，用来锁运动 */ .cmeta .m-seed{border:0;cursor:pointer;font:inherit;font-size:11px;padding:3px 9px;border-radius:99px; color:var(--dim);background:var(--surf);white-space:nowrap; box-shadow:2px 2px 5px var(--lo), -2px -2px 5px var(--hi)} .cmeta .m-seed:hover{color:var(--acc)} .cmeta .m-seed:active{box-shadow:inset 2px 2px 4px var(--lo), inset -2px -2px 4px var(--hi)} .chead{display:flex;align-items:center;justify-content:space-between;margin:0 4px 12px} .chead span{font-size:12px;color:var(--dim);font-weight:600} .chead button{font:inherit;font-size:11.5px;padding:5px 12px;border:0;border-radius:99px;cursor:pointer; color:var(--dim);background:var(--surf);box-shadow:3px 3px 6px var(--lo), -3px -3px 6px var(--hi)} .chead button:hover{color:var(--bad)} .chead button:active{box-shadow:inset 2px 2px 4px var(--lo), inset -2px -2px 4px var(--hi)} .cmeta .cancel,.cmeta .del,.qx{margin-left:auto;font:inherit;font-size:11px;padding:3px 10px;border:0;border-radius:99px; cursor:pointer;color:var(--bad);background:var(--surf);white-space:nowrap; box-shadow:2px 2px 5px var(--lo), -2px -2px 5px var(--hi)} .cmeta .cancel:hover,.cmeta .del:hover,.qx:hover{box-shadow:inset 2px 2px 4px var(--lo), inset -2px -2px 4px var(--hi)} .cmeta .cancel[disabled],.cmeta .del[disabled],.qx[disabled]{opacity:.5;cursor:default} .qx{margin-left:6px;padding:2px 8px} .cmeta a{color:var(--dim);text-decoration:none} .cmeta a:hover{color:var(--acc)} .empty{grid-column:1/-1;text-align:center;color:var(--ph);padding:80px 20px;font-size:13.5px} .toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);max-width:calc(100% - 32px); background:var(--surf);color:var(--fg);padding:12px 20px;border:1px solid var(--line);border-radius:8px;font-size:13px; box-shadow:0 8px 28px var(--lo);overflow-wrap:anywhere; opacity:0;pointer-events:none;transition:opacity .25s;z-index:120} .toast.on{opacity:1} /* 进行中的事（上传 / 读文件 / 打开大页面）：右下角托盘，见 core.js activity() */ .acts{position:fixed;right:16px;bottom:16px;z-index:115;display:flex;flex-direction:column;gap:8px; width:min(320px,calc(100vw - 32px));pointer-events:none} .acts[hidden]{display:none} .act{background:var(--surf);color:var(--fg);border:1px solid var(--line);border-radius:8px; padding:10px 12px;box-shadow:0 8px 28px rgba(0,0,0,.18);font-size:12.5px} .act-top{display:flex;align-items:center;gap:8px;min-width:0} .act-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .act-detail{color:var(--dim);font-size:11.5px;white-space:nowrap;font-variant-numeric:tabular-nums} .act-spin{width:13px;height:13px;flex:0 0 auto;border:2px solid var(--line);border-top-color:var(--acc); border-radius:50%;animation:sp 1s linear infinite} .act-bar{height:4px;margin-top:8px;border-radius:3px;background:var(--hole);overflow:hidden} .act-bar i{display:block;height:100%;background:var(--acc);transition:width .2s linear} @media(max-width:600px){.acts{right:16px;left:16px;width:auto;bottom:12px}}