@whitesev/pops 3.2.2 → 3.3.1

package/dist/index.system.js

@@ -180,272 +180,55 @@ System.register('pops', [], (function (exports) {
              */
             const SymbolEvents = Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1));
 
-            const PopsCoreDefaultEnv = {
+            const OriginPrototype = {
+                Object: {
+                    defineProperty: Object.defineProperty,
+                },
+            };
+            const PopsCoreDefaultApi = {
                 document: document,
                 window: window,
                 globalThis: globalThis,
                 self: self,
+                setTimeout: globalThis.setTimeout.bind(globalThis),
+                setInterval: globalThis.setInterval.bind(globalThis),
+                clearTimeout: globalThis.clearTimeout.bind(globalThis),
+                clearInterval: globalThis.clearInterval.bind(globalThis),
             };
-            const PopsCoreEnv = Object.assign({}, PopsCoreDefaultEnv);
+            const PopsCoreApi = Object.assign({}, PopsCoreDefaultApi);
             const PopsCore = {
+                init(option) {
+                    if (!option) {
+                        option = Object.assign({}, PopsCoreDefaultApi);
+                    }
+                    Object.assign(PopsCoreApi, option);
+                },
                 get document() {
-                    return PopsCoreEnv.document;
+                    return PopsCoreApi.document;
                 },
                 get window() {
-                    return PopsCoreEnv.window;
+                    return PopsCoreApi.window;
                 },
                 get globalThis() {
-                    return PopsCoreEnv.globalThis;
+                    return PopsCoreApi.globalThis;
                 },
                 get self() {
-                    return PopsCoreEnv.self;
+                    return PopsCoreApi.self;
                 },
-            };
-            const OriginPrototype = {
-                Object: {
-                    defineProperty: Object.defineProperty,
+                get setTimeout() {
+                    return PopsCoreApi.setTimeout;
                 },
-            };
-
-            const createCache = (lastNumberWeakMap) => {
-                return (collection, nextNumber) => {
-                    lastNumberWeakMap.set(collection, nextNumber);
-                    return nextNumber;
-                };
-            };
-
-            /*
-             * The value of the constant Number.MAX_SAFE_INTEGER equals (2 ** 53 - 1) but it
-             * is fairly new.
-             */
-            const MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER === undefined ? 9007199254740991 : Number.MAX_SAFE_INTEGER;
-            const TWO_TO_THE_POWER_OF_TWENTY_NINE = 536870912;
-            const TWO_TO_THE_POWER_OF_THIRTY = TWO_TO_THE_POWER_OF_TWENTY_NINE * 2;
-            const createGenerateUniqueNumber = (cache, lastNumberWeakMap) => {
-                return (collection) => {
-                    const lastNumber = lastNumberWeakMap.get(collection);
-                    /*
-                     * Let's try the cheapest algorithm first. It might fail to produce a new
-                     * number, but it is so cheap that it is okay to take the risk. Just
-                     * increase the last number by one or reset it to 0 if we reached the upper
-                     * bound of SMIs (which stands for small integers). When the last number is
-                     * unknown it is assumed that the collection contains zero based consecutive
-                     * numbers.
-                     */
-                    let nextNumber = lastNumber === undefined ? collection.size : lastNumber < TWO_TO_THE_POWER_OF_THIRTY ? lastNumber + 1 : 0;
-                    if (!collection.has(nextNumber)) {
-                        return cache(collection, nextNumber);
-                    }
-                    /*
-                     * If there are less than half of 2 ** 30 numbers stored in the collection,
-                     * the chance to generate a new random number in the range from 0 to 2 ** 30
-                     * is at least 50%. It's benifitial to use only SMIs because they perform
-                     * much better in any environment based on V8.
-                     */
-                    if (collection.size < TWO_TO_THE_POWER_OF_TWENTY_NINE) {
-                        while (collection.has(nextNumber)) {
-                            nextNumber = Math.floor(Math.random() * TWO_TO_THE_POWER_OF_THIRTY);
-                        }
-                        return cache(collection, nextNumber);
-                    }
-                    // Quickly check if there is a theoretical chance to generate a new number.
-                    if (collection.size > MAX_SAFE_INTEGER) {
-                        throw new Error('Congratulations, you created a collection of unique numbers which uses all available integers!');
-                    }
-                    // Otherwise use the full scale of safely usable integers.
-                    while (collection.has(nextNumber)) {
-                        nextNumber = Math.floor(Math.random() * MAX_SAFE_INTEGER);
-                    }
-                    return cache(collection, nextNumber);
-                };
-            };
-
-            const LAST_NUMBER_WEAK_MAP = new WeakMap();
-            const cache = createCache(LAST_NUMBER_WEAK_MAP);
-            const generateUniqueNumber = createGenerateUniqueNumber(cache, LAST_NUMBER_WEAK_MAP);
-
-            const createBrokerFactory = (createOrGetOngoingRequests, extendBrokerImplementation, generateUniqueNumber, isMessagePort) => (brokerImplementation) => {
-                const fullBrokerImplementation = extendBrokerImplementation(brokerImplementation);
-                return (sender) => {
-                    const ongoingRequests = createOrGetOngoingRequests(sender);
-                    sender.addEventListener('message', (({ data: message }) => {
-                        const { id } = message;
-                        if (id !== null && ongoingRequests.has(id)) {
-                            const { reject, resolve } = ongoingRequests.get(id);
-                            ongoingRequests.delete(id);
-                            if (message.error === undefined) {
-                                resolve(message.result);
-                            }
-                            else {
-                                reject(new Error(message.error.message));
-                            }
-                        }
-                    }));
-                    if (isMessagePort(sender)) {
-                        sender.start();
-                    }
-                    const call = (method, params = null, transferables = []) => {
-                        return new Promise((resolve, reject) => {
-                            const id = generateUniqueNumber(ongoingRequests);
-                            ongoingRequests.set(id, { reject, resolve });
-                            if (params === null) {
-                                sender.postMessage({ id, method }, transferables);
-                            }
-                            else {
-                                sender.postMessage({ id, method, params }, transferables);
-                            }
-                        });
-                    };
-                    const notify = (method, params, transferables = []) => {
-                        sender.postMessage({ id: null, method, params }, transferables);
-                    };
-                    let functions = {};
-                    for (const [key, handler] of Object.entries(fullBrokerImplementation)) {
-                        functions = { ...functions, [key]: handler({ call, notify }) };
-                    }
-                    return { ...functions };
-                };
-            };
-
-            const createCreateOrGetOngoingRequests = (ongoingRequestsMap) => (sender) => {
-                if (ongoingRequestsMap.has(sender)) {
-                    // @todo TypeScript needs to be convinced that has() works as expected.
-                    return ongoingRequestsMap.get(sender);
-                }
-                const ongoingRequests = new Map();
-                ongoingRequestsMap.set(sender, ongoingRequests);
-                return ongoingRequests;
-            };
-
-            const createExtendBrokerImplementation = (portMap) => (partialBrokerImplementation) => ({
-                ...partialBrokerImplementation,
-                connect: ({ call }) => {
-                    return async () => {
-                        const { port1, port2 } = new MessageChannel();
-                        const portId = await call('connect', { port: port1 }, [port1]);
-                        portMap.set(port2, portId);
-                        return port2;
-                    };
+                get setInterval() {
+                    return PopsCoreApi.setInterval;
                 },
-                disconnect: ({ call }) => {
-                    return async (port) => {
-                        const portId = portMap.get(port);
-                        if (portId === undefined) {
-                            throw new Error('The given port is not connected.');
-                        }
-                        await call('disconnect', { portId });
-                    };
+                get clearTimeout() {
+                    return PopsCoreApi.clearTimeout;
+                },
+                get clearInterval() {
+                    return PopsCoreApi.clearInterval;
                 },
-                isSupported: ({ call }) => {
-                    return () => call('isSupported');
-                }
-            });
-
-            const isMessagePort = (sender) => {
-                return typeof sender.start === 'function';
-            };
-
-            const createBroker = createBrokerFactory(createCreateOrGetOngoingRequests(new WeakMap()), createExtendBrokerImplementation(new WeakMap()), generateUniqueNumber, isMessagePort);
-
-            const createClearIntervalFactory = (scheduledIntervalsState) => (clear) => (timerId) => {
-                if (typeof scheduledIntervalsState.get(timerId) === 'symbol') {
-                    scheduledIntervalsState.set(timerId, null);
-                    clear(timerId).then(() => {
-                        scheduledIntervalsState.delete(timerId);
-                    });
-                }
-            };
-
-            const createClearTimeoutFactory = (scheduledTimeoutsState) => (clear) => (timerId) => {
-                if (typeof scheduledTimeoutsState.get(timerId) === 'symbol') {
-                    scheduledTimeoutsState.set(timerId, null);
-                    clear(timerId).then(() => {
-                        scheduledTimeoutsState.delete(timerId);
-                    });
-                }
-            };
-
-            const createSetIntervalFactory = (generateUniqueNumber, scheduledIntervalsState) => (set) => (func, delay = 0, ...args) => {
-                const symbol = Symbol();
-                const timerId = generateUniqueNumber(scheduledIntervalsState);
-                scheduledIntervalsState.set(timerId, symbol);
-                const schedule = () => set(delay, timerId).then(() => {
-                    const state = scheduledIntervalsState.get(timerId);
-                    if (state === undefined) {
-                        throw new Error('The timer is in an undefined state.');
-                    }
-                    if (state === symbol) {
-                        func(...args);
-                        // Doublecheck if the interval should still be rescheduled because it could have been cleared inside of func().
-                        if (scheduledIntervalsState.get(timerId) === symbol) {
-                            schedule();
-                        }
-                    }
-                });
-                schedule();
-                return timerId;
-            };
-
-            const createSetTimeoutFactory = (generateUniqueNumber, scheduledTimeoutsState) => (set) => (func, delay = 0, ...args) => {
-                const symbol = Symbol();
-                const timerId = generateUniqueNumber(scheduledTimeoutsState);
-                scheduledTimeoutsState.set(timerId, symbol);
-                set(delay, timerId).then(() => {
-                    const state = scheduledTimeoutsState.get(timerId);
-                    if (state === undefined) {
-                        throw new Error('The timer is in an undefined state.');
-                    }
-                    if (state === symbol) {
-                        // A timeout can be savely deleted because it is only called once.
-                        scheduledTimeoutsState.delete(timerId);
-                        func(...args);
-                    }
-                });
-                return timerId;
-            };
-
-            // Prefilling the Maps with a function indexed by zero is necessary to be compliant with the specification.
-            const scheduledIntervalsState = new Map([[0, null]]); // tslint:disable-line no-empty
-            const scheduledTimeoutsState = new Map([[0, null]]); // tslint:disable-line no-empty
-            const createClearInterval = createClearIntervalFactory(scheduledIntervalsState);
-            const createClearTimeout = createClearTimeoutFactory(scheduledTimeoutsState);
-            const createSetInterval = createSetIntervalFactory(generateUniqueNumber, scheduledIntervalsState);
-            const createSetTimeout = createSetTimeoutFactory(generateUniqueNumber, scheduledTimeoutsState);
-            const wrap = createBroker({
-                clearInterval: ({ call }) => createClearInterval((timerId) => call('clear', { timerId, timerType: 'interval' })),
-                clearTimeout: ({ call }) => createClearTimeout((timerId) => call('clear', { timerId, timerType: 'timeout' })),
-                setInterval: ({ call }) => createSetInterval((delay, timerId) => call('set', { delay, now: performance.timeOrigin + performance.now(), timerId, timerType: 'interval' })),
-                setTimeout: ({ call }) => createSetTimeout((delay, timerId) => call('set', { delay, now: performance.timeOrigin + performance.now(), timerId, timerType: 'timeout' }))
-            });
-            const load = (url) => {
-                const worker = new Worker(url);
-                return wrap(worker);
-            };
-
-            const createLoadOrReturnBroker = (loadBroker, worker) => {
-                let broker = null;
-                return () => {
-                    if (broker !== null) {
-                        return broker;
-                    }
-                    const blob = new Blob([worker], { type: 'application/javascript; charset=utf-8' });
-                    const url = URL.createObjectURL(blob);
-                    broker = loadBroker(url);
-                    // Bug #1: Edge up until v18 didn't like the URL to be revoked directly.
-                    setTimeout(() => URL.revokeObjectURL(url));
-                    return broker;
-                };
             };
 
-            // This is the minified and stringified code of the worker-timers-worker package.
-            const worker = `(()=>{var e={455(e,t){!function(e){"use strict";var t=function(e){return function(t){var r=e(t);return t.add(r),r}},r=function(e){return function(t,r){return e.set(t,r),r}},n=void 0===Number.MAX_SAFE_INTEGER?9007199254740991:Number.MAX_SAFE_INTEGER,o=536870912,s=2*o,a=function(e,t){return function(r){var a=t.get(r),i=void 0===a?r.size:a<s?a+1:0;if(!r.has(i))return e(r,i);if(r.size<o){for(;r.has(i);)i=Math.floor(Math.random()*s);return e(r,i)}if(r.size>n)throw new Error("Congratulations, you created a collection of unique numbers which uses all available integers!");for(;r.has(i);)i=Math.floor(Math.random()*n);return e(r,i)}},i=new WeakMap,u=r(i),c=a(u,i),l=t(c);e.addUniqueNumber=l,e.generateUniqueNumber=c}(t)}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var s=t[n]={exports:{}};return e[n].call(s.exports,s,s.exports,r),s.exports}(()=>{"use strict";const e=-32603,t=-32602,n=-32601,o=(e,t)=>Object.assign(new Error(e),{status:t}),s=t=>o('The handler of the method called "'.concat(t,'" returned an unexpected result.'),e),a=(t,r)=>async({data:{id:a,method:i,params:u}})=>{const c=r[i];try{if(void 0===c)throw(e=>o('The requested method called "'.concat(e,'" is not supported.'),n))(i);const r=void 0===u?c():c(u);if(void 0===r)throw(t=>o('The handler of the method called "'.concat(t,'" returned no required result.'),e))(i);const l=r instanceof Promise?await r:r;if(null===a){if(void 0!==l.result)throw s(i)}else{if(void 0===l.result)throw s(i);const{result:e,transferables:r=[]}=l;t.postMessage({id:a,result:e},r)}}catch(e){const{message:r,status:n=-32603}=e;t.postMessage({error:{code:n,message:r},id:a})}};var i=r(455);const u=new Map,c=(e,r,n)=>({...r,connect:({port:t})=>{t.start();const n=e(t,r),o=(0,i.generateUniqueNumber)(u);return u.set(o,()=>{n(),t.close(),u.delete(o)}),{result:o}},disconnect:({portId:e})=>{const r=u.get(e);if(void 0===r)throw(e=>o('The specified parameter called "portId" with the given value "'.concat(e,'" does not identify a port connected to this worker.'),t))(e);return r(),{result:null}},isSupported:async()=>{if(await new Promise(e=>{const t=new ArrayBuffer(0),{port1:r,port2:n}=new MessageChannel;r.onmessage=({data:t})=>e(null!==t),n.postMessage(t,[t])})){const e=n();return{result:e instanceof Promise?await e:e}}return{result:!1}}}),l=(e,t,r=()=>!0)=>{const n=c(l,t,r),o=a(e,n);return e.addEventListener("message",o),()=>e.removeEventListener("message",o)},d=(e,t)=>r=>{const n=t.get(r);if(void 0===n)return Promise.resolve(!1);const[o,s]=n;return e(o),t.delete(r),s(!1),Promise.resolve(!0)},m=(e,t,r,n)=>(o,s,a)=>{const i=o+s-t.timeOrigin,u=i-t.now();return new Promise(t=>{e.set(a,[r(n,u,i,e,t,a),t])})},f=new Map,h=d(globalThis.clearTimeout,f),p=new Map,v=d(globalThis.clearTimeout,p),w=((e,t)=>{const r=(n,o,s,a)=>{const i=n-e.now();i>0?o.set(a,[t(r,i,n,o,s,a),s]):(o.delete(a),s(!0))};return r})(performance,globalThis.setTimeout),g=m(f,performance,globalThis.setTimeout,w),T=m(p,performance,globalThis.setTimeout,w);l(self,{clear:async({timerId:e,timerType:t})=>({result:await("interval"===t?h(e):v(e))}),set:async({delay:e,now:t,timerId:r,timerType:n})=>({result:await("interval"===n?g:T)(e,t,r)})})})()})();`; // tslint:disable-line:max-line-length
-
-            const loadOrReturnBroker = createLoadOrReturnBroker(load, worker);
-            const clearInterval$1 = (timerId) => loadOrReturnBroker().clearInterval(timerId);
-            const clearTimeout$1 = (timerId) => loadOrReturnBroker().clearTimeout(timerId);
-            const setInterval$1 = (...args) => loadOrReturnBroker().setInterval(...args);
-            const setTimeout$1 = (...args) => loadOrReturnBroker().setTimeout(...args);
-
             let t$1 = class t{constructor(){this.__map={};}beforeEach(t){this.__interceptor=t;}on(t,i){const s=Array.isArray(t)?t:[t];for(const t of s){this.__map[t]=this.__map[t]||[];const s=this.__map[t];s&&s.push(i);}return this}emit(t,i,s){ void 0!==this.__interceptor?this.__interceptor(t,(()=>{this.__emit(t,i),s&&s();})):(this.__emit(t,i),s&&s());}__emit(t,i){const s=this.__map[t];if(Array.isArray(s)&&(null==s?void 0:s.length))for(const _ of s)_(i,t);this.event=i;}off(t,i){const s=this.__map[t];if(void 0!==s)if(void 0===i)delete this.__map[t];else {const t=s.findIndex((t=>t===i));s.splice(t,1);}}destroy(){this.__map={};}};
 
             const n$1="clientX",e$2="clientY",t=16,c$3="start",o$1="move",s$1="cancel",u$3="end",a$2="left",i$3="right",r$4="up",d$1="down",m$2={4:"start",5:"move",1:"end",3:"cancel"};function v$1(n){return m$2[n]}function b(n,e,t){const c={1:{0:{move:4},4:{move:5,end:1,cancel:3},5:{move:5,end:1,cancel:3}},0:{4:{move:2,end:1,cancel:3},5:{start:2,move:2,end:1,cancel:3}}}[Number(n)][e];return void 0!==c&&c[t]||0}function g$1(n){[1,3,2].includes(n.state)&&(n.state=0);}function h$3(n){return [5,1,3].includes(n)}function j(n){if(n.disabled)return n.state=0,true}function O(n,e){return Object.assign(Object.assign(Object.assign({},n),e),{state:0,disabled:false})}function p$3(n){return Math.round(100*n)/100}
@@ -711,55 +494,25 @@ System.register('pops', [], (function (exports) {
                  * 自动使用 Worker 执行 setTimeout
                  */
                 setTimeout(callback, timeout = 0) {
-                    try {
-                        return setTimeout$1(callback, timeout);
-                    }
-                    catch {
-                        return setTimeout(callback, timeout);
-                    }
+                    return PopsCore.setTimeout(callback, timeout);
                 }
                 /**
                  * 配合 .setTimeout 使用
                  */
                 clearTimeout(timeId) {
-                    try {
-                        if (timeId != null) {
-                            clearTimeout$1(timeId);
-                        }
-                    }
-                    catch {
-                        // TODO
-                    }
-                    finally {
-                        clearTimeout(timeId);
-                    }
+                    return PopsCore.clearTimeout(timeId);
                 }
                 /**
                  * 自动使用 Worker 执行 setInterval
                  */
                 setInterval(callback, timeout = 0) {
-                    try {
-                        return setInterval$1(callback, timeout);
-                    }
-                    catch {
-                        return setInterval(callback, timeout);
-                    }
+                    return PopsCore.setInterval(callback, timeout);
                 }
                 /**
                  * 配合 .setInterval 使用
                  */
                 clearInterval(timeId) {
-                    try {
-                        if (timeId != null) {
-                            clearInterval$1(timeId);
-                        }
-                    }
-                    catch {
-                        // 忽略
-                    }
-                    finally {
-                        clearInterval(timeId);
-                    }
+                    return PopsCore.clearInterval(timeId);
                 }
                 /**
                  * 覆盖对象中的数组新值
@@ -2633,23 +2386,25 @@ System.register('pops', [], (function (exports) {
                  * @param zIndex
                  */
                 createAnim(guid, type, config, html = "", bottomBtnHTML = "", zIndex) {
-                    const __config = config;
+                    const __config__ = config;
                     let popsAnimStyle = "";
                     let popsStyle = "";
-                    const popsPosition = __config.position || "";
+                    const popsPosition = __config__.position || "";
                     if (config.zIndex != null) {
                         popsAnimStyle += `z-index: ${zIndex};`;
                         popsStyle += `z-index: ${zIndex};`;
                     }
-                    if (__config.width != null) {
-                        popsStyle += `width: ${__config.width};`;
+                    if (__config__.width != null) {
+                        popsStyle += `width: ${__config__.width};`;
                     }
-                    if (__config.height != null) {
-                        popsStyle += `height: ${__config.height};`;
+                    if (__config__.height != null) {
+                        popsStyle += `height: ${__config__.height};`;
                     }
                     const hasBottomBtn = bottomBtnHTML.trim() === "" ? false : true;
                     return /*html*/ `
-		<div class="pops-anim" anim="${__config.animation || ""}" style="${popsAnimStyle}" data-guid="${guid}">${config.style != null ? `<style tyle="text/css">${config.style}</style>` : ""}
+		<div class="pops-anim" anim="${__config__.animation || ""}" style="${popsAnimStyle}" data-guid="${guid}">${config.style != null ? /*html*/ `<style tyle="text/css" data-name="style">${config.style}</style>` : ""}
+    ${config.lightStyle != null ? /*html*/ `<style tyle="text/css" data-name="lightStyle">@media (prefers-color-scheme: light) {${config.lightStyle}}</style>` : ""}
+    ${config.darkStyle != null ? /*html*/ `<style tyle="text/css" data-name="darkStyle">@media (prefers-color-scheme: dark) {${config.darkStyle}}</style>` : ""}
 			<div class="pops ${config.class || ""}" data-bottom-btn="${hasBottomBtn}" type-value="${type}" style="${popsStyle}" position="${popsPosition}" data-guid="${guid}">${html}</div>
 		</div>`;
                 },
@@ -2869,9 +2624,56 @@ System.register('pops', [], (function (exports) {
                 parseElement(html) {
                     return popsDOMUtils.parseTextToDOM(html);
                 },
+                /**
+                 * 添加样式元素
+                 */
+                addStyle($parent, style) {
+                    if (style == null)
+                        return;
+                    const $css = popsDOMUtils.createElement("style", {
+                        innerHTML: style,
+                    }, {
+                        type: "text/css",
+                        "data-name": "general",
+                    });
+                    $parent.appendChild($css);
+                    return $css;
+                },
+                /**
+                 * 添加在浅色模式下生效的style元素
+                 */
+                addLightStyle($parent, style) {
+                    const darkCSS = /*css*/ `
+      @media (prefers-color-scheme: light) {
+        ${style}
+      }
+    `;
+                    const $css = this.addStyle($parent, darkCSS);
+                    if (!$css) {
+                        return;
+                    }
+                    $css.setAttribute("data-name", "light");
+                    return $css;
+                },
+                /**
+                 * 添加在深色模式下生效的style元素
+                 */
+                addDarkStyle($parent, style) {
+                    const darkCSS = /*css*/ `
+      @media (prefers-color-scheme: dark) {
+        ${style}
+      }
+    `;
+                    const $css = this.addStyle($parent, darkCSS);
+                    if (!$css) {
+                        return;
+                    }
+                    $css.setAttribute("data-name", "dark");
+                    return $css;
+                },
             };
 
-            var indexCSS = "@charset \"utf-8\";\n.pops * {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  -webkit-tap-highlight-color: transparent;\n  /* 代替::-webkit-scrollbar */\n  scrollbar-width: thin;\n}\n.pops {\n  --pops-bg-opacity: 1;\n  --pops-bd-opacity: 1;\n  --pops-font-size: 16px;\n  interpolate-size: allow-keywords;\n  --pops-color: #000000;\n  --pops-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n  --pops-bd-color: rgb(235, 238, 245, var(--pops-bd-opacity));\n  --pops-box-shadow-color: rgba(0, 0, 0, 0.12);\n  --pops-title-color: #000000;\n  --pops-title-border-color: var(--pops-bd-color);\n  --pops-content-color: #000000;\n  --pops-bottom-btn-controls-border-color: var(--pops-bd-color);\n  --pops-components-is-disabled-text-color: #a8abb2;\n  --pops-components-is-disabled-bg-color: #f5f7fa;\n}\n@media (prefers-color-scheme: dark) {\n  .pops {\n    --pops-mask-bg-opacity: 0.8;\n    --pops-color: #ffffff;\n    --pops-bg-color: rgb(17, 17, 17, var(--pops-bg-opacity));\n    --pops-bd-color: rgb(55, 55, 55, var(--pops-bd-opacity));\n    --pops-box-shadow-color: rgba(81, 81, 81, 0.12);\n    --pops-title-color: #e8e8e8;\n    --pops-title-border-color: var(--pops-bd-color);\n    --pops-content-color: #e5e5e5;\n    --pops-components-is-disabled-text-color: #a8abb2;\n    --pops-components-is-disabled-bg-color: #262727;\n  }\n}\n.pops {\n  color: var(--pops-color);\n  background-color: var(--pops-bg-color);\n  border: 1px solid var(--pops-bd-color);\n  border-radius: 4px;\n  font-size: var(--pops-font-size);\n  line-height: normal;\n  box-shadow: 0 0 12px var(--pops-box-shadow-color);\n  box-sizing: border-box;\n  overflow: hidden;\n  transition: all 0.35s;\n  display: flex;\n  flex-direction: column;\n}\n.pops-anim {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n.pops-anim[anim=\"\"] {\n  top: unset;\n  right: unset;\n  bottom: unset;\n  left: unset;\n  width: unset;\n  height: unset;\n  transition: none;\n}\n/* 底部图标动画和样式 */\n.pops i.pops-bottom-icon[is-loading=\"true\"] {\n  animation: rotating 2s linear infinite;\n}\n.pops i.pops-bottom-icon {\n  height: 1em;\n  width: 1em;\n  line-height: normal;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  fill: currentColor;\n  color: inherit;\n  font-size: inherit;\n}\n\n/* 遮罩层样式 */\n.pops-mask {\n  --pops-mask-bg-opacity: 0.4;\n  --pops-mask-bg-color: rgba(0, 0, 0, var(--pops-mask-bg-opacity));\n}\n.pops-mask {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border: 0;\n  border-radius: 0;\n  background-color: var(--pops-mask-bg-color);\n  box-shadow: none;\n  transition: none;\n}\n\n.pops-header-controls button.pops-header-control[type][data-header] {\n  float: right;\n  margin: 0 0;\n  outline: 0;\n  border: 0;\n  border-color: rgb(136, 136, 136, var(--pops-bd-opacity));\n  background-color: transparent;\n  color: #888;\n  cursor: pointer;\n}\n.pops-header-controls button.pops-header-control[data-type=\"max\"],\n.pops-header-controls button.pops-header-control[data-type=\"mise\"],\n.pops-header-controls button.pops-header-control[data-type=\"min\"] {\n  outline: 0 !important;\n  border: 0;\n  border-color: rgb(136, 136, 136, var(--pops-bd-opacity));\n  background-color: transparent;\n  color: rgb(136, 136, 136);\n  cursor: pointer;\n  transition: all 0.3s ease-in-out;\n}\nbutton.pops-header-control i {\n  color: rgb(144, 147, 153);\n  font-size: inherit;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  fill: currentColor;\n}\nbutton.pops-header-control svg {\n  height: 1.25em;\n  width: 1.25em;\n}\nbutton.pops-header-control {\n  right: 15px;\n  padding: 0;\n  border: none;\n  outline: 0;\n  background: 0 0;\n  cursor: pointer;\n  position: unset;\n  line-height: normal;\n}\nbutton.pops-header-control i:hover {\n  color: rgb(64, 158, 255);\n}\n.pops-header-controls[data-margin] button.pops-header-control {\n  margin: 0 6px;\n  display: flex;\n  align-items: center;\n}\n.pops[type-value] .pops-header-controls {\n  display: flex;\n  gap: 6px;\n}\n\n/* 代码块 <code> */\n.pops code {\n  font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n  font-size: 0.85em;\n  color: #000;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n  border: 0;\n  padding: 0.2em 0;\n  white-space: normal;\n  background: #f5f5f5;\n  text-wrap: wrap;\n  text-align: left;\n  word-spacing: normal;\n  word-break: normal;\n  word-wrap: normal;\n  line-height: 1.4;\n  -moz-tab-size: 8;\n  -o-tab-size: 8;\n  tab-size: 8;\n  -webkit-hyphens: none;\n  -moz-hyphens: none;\n  -ms-hyphens: none;\n  hyphens: none;\n  direction: ltr;\n}\n\n.pops code::before,\n.pops code::after {\n  letter-spacing: -0.2em;\n  content: \"\\00a0\";\n}\n\n/* 标题 */\n.pops .pops-title {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid var(--pops-title-border-color);\n  width: 100%;\n  height: var(--container-title-height);\n}\n/* 标题-普通文本 */\n.pops .pops-title p[pops] {\n  color: var(--pops-title-color);\n  width: 100%;\n  overflow: hidden;\n  text-indent: 15px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: 500;\n  line-height: normal;\n}\n\n/* 内容 */\n.pops .pops-content {\n  width: 100%;\n  /*height: calc(\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\n\t);*/\n  flex: 1;\n  overflow: auto;\n  word-break: break-word;\n}\n/* 内容-普通文本 */\n.pops .pops-content p[pops] {\n  color: var(--pops-content-color);\n  padding: 5px 10px;\n  text-indent: 15px;\n}\n\n/* 底部-按钮组 */\n.pops .pops-botttom-btn-controls {\n  display: flex;\n  padding: 10px 10px 10px 10px;\n  width: 100%;\n  height: var(--container-bottom-btn-height);\n  max-height: var(--container-bottom-btn-height);\n  line-height: normal;\n  border-top: 1px solid var(--pops-bottom-btn-controls-border-color);\n  text-align: right;\n  align-items: center;\n}\n";
+            var indexCSS = "@charset \"utf-8\";\n.pops * {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  -webkit-tap-highlight-color: transparent;\n  /* 代替::-webkit-scrollbar */\n  scrollbar-width: thin;\n}\n.pops {\n  --pops-bg-opacity: 1;\n  --pops-bd-opacity: 1;\n  --pops-font-size: 16px;\n  interpolate-size: allow-keywords;\n  --pops-color: #000000;\n  --pops-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n  --pops-bd-color: rgb(235, 238, 245, var(--pops-bd-opacity));\n  --pops-box-shadow-color: rgba(0, 0, 0, 0.12);\n  --pops-title-color: #000000;\n  --pops-title-border-color: var(--pops-bd-color);\n  --pops-content-color: #000000;\n  --pops-bottom-btn-controls-border-color: var(--pops-bd-color);\n  --pops-components-is-disabled-text-color: #a8abb2;\n  --pops-components-is-disabled-bg-color: #f5f7fa;\n}\n@media (prefers-color-scheme: dark) {\n  .pops {\n    --pops-mask-bg-opacity: 0.8;\n    --pops-color: #ffffff;\n    --pops-dark-color: #262626;\n    --pops-bg-color: rgb(17, 17, 17, var(--pops-bg-opacity));\n    --pops-bd-color: rgb(55, 55, 55, var(--pops-bd-opacity));\n    --pops-box-shadow-color: rgba(81, 81, 81, 0.12);\n    --pops-title-color: #e8e8e8;\n    --pops-title-border-color: var(--pops-bd-color);\n    --pops-content-color: #e5e5e5;\n    --pops-components-is-disabled-text-color: #a8abb2;\n    --pops-components-is-disabled-bg-color: #262727;\n  }\n}\n.pops {\n  color: var(--pops-color);\n  background-color: var(--pops-bg-color);\n  border: 1px solid var(--pops-bd-color);\n  border-radius: 4px;\n  font-size: var(--pops-font-size);\n  line-height: normal;\n  box-shadow: 0 0 12px var(--pops-box-shadow-color);\n  box-sizing: border-box;\n  overflow: hidden;\n  transition: all 0.35s;\n  display: flex;\n  flex-direction: column;\n}\n.pops-anim {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n.pops-anim[anim=\"\"] {\n  top: unset;\n  right: unset;\n  bottom: unset;\n  left: unset;\n  width: unset;\n  height: unset;\n  transition: none;\n}\n/* 底部图标动画和样式 */\n.pops i.pops-bottom-icon[is-loading=\"true\"] {\n  animation: rotating 2s linear infinite;\n}\n.pops i.pops-bottom-icon {\n  height: 1em;\n  width: 1em;\n  line-height: normal;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  fill: currentColor;\n  color: inherit;\n  font-size: inherit;\n}\n\n/* 遮罩层样式 */\n.pops-mask {\n  --pops-mask-bg-opacity: 0.4;\n  --pops-mask-bg-color: rgba(0, 0, 0, var(--pops-mask-bg-opacity));\n}\n.pops-mask {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border: 0;\n  border-radius: 0;\n  background-color: var(--pops-mask-bg-color);\n  box-shadow: none;\n  transition: none;\n}\n\n.pops-header-controls button.pops-header-control[type][data-header] {\n  float: right;\n  margin: 0 0;\n  outline: 0;\n  border: 0;\n  border-color: rgb(136, 136, 136, var(--pops-bd-opacity));\n  background-color: transparent;\n  color: #888;\n  cursor: pointer;\n}\n.pops-header-controls button.pops-header-control[data-type=\"max\"],\n.pops-header-controls button.pops-header-control[data-type=\"mise\"],\n.pops-header-controls button.pops-header-control[data-type=\"min\"] {\n  outline: 0 !important;\n  border: 0;\n  border-color: rgb(136, 136, 136, var(--pops-bd-opacity));\n  background-color: transparent;\n  color: rgb(136, 136, 136);\n  cursor: pointer;\n  transition: all 0.3s ease-in-out;\n}\nbutton.pops-header-control i {\n  color: rgb(144, 147, 153);\n  font-size: inherit;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  fill: currentColor;\n}\nbutton.pops-header-control svg {\n  height: 1.25em;\n  width: 1.25em;\n}\nbutton.pops-header-control {\n  right: 15px;\n  padding: 0;\n  border: none;\n  outline: 0;\n  background: 0 0;\n  cursor: pointer;\n  position: unset;\n  line-height: normal;\n}\nbutton.pops-header-control i:hover {\n  color: rgb(64, 158, 255);\n}\n.pops-header-controls[data-margin] button.pops-header-control {\n  margin: 0 6px;\n  display: flex;\n  align-items: center;\n}\n.pops[type-value] .pops-header-controls {\n  display: flex;\n  gap: 6px;\n}\n\n/* 代码块 <code> */\n.pops code {\n  font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n  font-size: 0.85em;\n  color: #000;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n  border: 0;\n  padding: 0.2em 0;\n  white-space: normal;\n  background: #f5f5f5;\n  text-wrap: wrap;\n  text-align: left;\n  word-spacing: normal;\n  word-break: normal;\n  word-wrap: normal;\n  line-height: 1.4;\n  -moz-tab-size: 8;\n  -o-tab-size: 8;\n  tab-size: 8;\n  -webkit-hyphens: none;\n  -moz-hyphens: none;\n  -ms-hyphens: none;\n  hyphens: none;\n  direction: ltr;\n}\n\n.pops code::before,\n.pops code::after {\n  letter-spacing: -0.2em;\n  content: \"\\00a0\";\n}\n\n/* 标题 */\n.pops .pops-title {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid var(--pops-title-border-color);\n  width: 100%;\n  height: var(--container-title-height);\n}\n/* 标题-普通文本 */\n.pops .pops-title p[pops] {\n  color: var(--pops-title-color);\n  width: 100%;\n  overflow: hidden;\n  text-indent: 15px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: 500;\n  line-height: normal;\n}\n\n/* 内容 */\n.pops .pops-content {\n  width: 100%;\n  /*height: calc(\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\n\t);*/\n  flex: 1;\n  overflow: auto;\n  word-break: break-word;\n}\n/* 内容-普通文本 */\n.pops .pops-content p[pops] {\n  color: var(--pops-content-color);\n  padding: 5px 10px;\n  text-indent: 15px;\n}\n\n/* 底部-按钮组 */\n.pops .pops-botttom-btn-controls {\n  display: flex;\n  padding: 10px 10px 10px 10px;\n  width: 100%;\n  height: var(--container-bottom-btn-height);\n  max-height: var(--container-bottom-btn-height);\n  line-height: normal;\n  border-top: 1px solid var(--pops-bottom-btn-controls-border-color);\n  text-align: right;\n  align-items: center;\n}\n";
 
             var ninePalaceGridPositionCSS = ".pops[position=\"top_left\"] {\n  position: fixed;\n  top: 0;\n  left: 0;\n}\n.pops[position=\"top\"] {\n  position: fixed;\n  top: 0;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.pops[position=\"top_right\"] {\n  position: fixed;\n  top: 0;\n  right: 0;\n}\n.pops[position=\"center_left\"] {\n  position: fixed;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n}\n.pops[position=\"center\"] {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.pops[position=\"center_right\"] {\n  position: fixed;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n}\n.pops[position=\"bottom_left\"] {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n}\n.pops[position=\"bottom\"] {\n  position: fixed;\n  bottom: 0;\n  left: 50%;\n  transform: translate(-50%, 0);\n}\n.pops[position=\"bottom_right\"] {\n  position: fixed;\n  right: 0;\n  bottom: 0;\n}\n";
 
@@ -2899,7 +2701,7 @@ System.register('pops', [], (function (exports) {
 
             var folderCSS = ".pops-folder-list {\n  --folder-arrow-fill-color: #d4d7de;\n  --folder-arrow-active-fill-color: #06a7ff;\n  --header-breadcrumb-text-color: #06a7ff;\n  --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);\n  --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);\n  --header-breadcrumb-all-files-last-text-color: #999999;\n  --table-header-row-text-color: #818999;\n  --table-body-td-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));\n  --table-body-th-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));\n  --table-body-row-text-color: #05082c;\n  --table-body-row-file-name-text-color: #05082c;\n  --table-body-row-hover-bd-color: rgb(245, 246, 247, var(--pops-bg-opacity));\n  --table-body-row-hover-bg-color: rgb(245, 246, 247, var(--pops-bg-opacity));\n  --table-body-row-file-name-hover-text-color: #06a7ff;\n  --table-body-row-content-text-color: #818999;\n}\n.pops-folder-list .cursor-p {\n  cursor: pointer;\n}\n.pops-folder-list a {\n  background: 0 0;\n  text-decoration: none;\n  -webkit-tap-highlight-color: transparent;\n  color: var(--header-breadcrumb-text-color);\n}\ntable.pops-folder-list-table__body,\ntable.pops-folder-list-table__header {\n  width: 100%;\n  table-layout: fixed;\n  border-collapse: collapse;\n  border-spacing: 0;\n  padding: 0 20px;\n}\ntable.pops-folder-list-table__body,\ntable.pops-folder-list-table__header {\n  height: 100%;\n  background: 0 0;\n  overflow: hidden;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  -ms-flex-direction: column;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n}\ntable.pops-folder-list-table__body {\n  height: 100%;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n.pops-folder-list table tr {\n  line-height: normal;\n  align-content: center;\n}\n.pops-folder-list-table__header-row {\n  height: 50px;\n  line-height: normal;\n  align-content: center;\n  color: var(--table-header-row-text-color);\n  text-align: left;\n  font-size: 12px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n.pops-folder-list-table__body-row {\n  height: 50px;\n  line-height: normal;\n  align-content: center;\n  color: var(--table-body-row-text-color);\n  font-size: 12px;\n}\n.pops-folder-list-table__body-row:hover {\n  background-color: var(--table-body-row-hover-bg-color);\n  border-color: var(--table-body-row-hover-bd-color);\n  border: 0;\n  outline: none;\n}\n.pops-folder-list table th {\n  border: 0;\n  border-bottom: 1px solid var(--table-body-th-text-color);\n}\n.pops-folder-list table td {\n  border: 0;\n  border-bottom: 1px solid var(--table-body-td-text-color);\n  position: relative;\n}\n.pops-folder-list .list-name-text {\n  display: inline-block;\n  padding-left: 12px;\n  line-height: normal;\n  align-content: center;\n  max-width: 176px;\n}\n.pops-folder-list-file-name > div {\n  display: flex;\n  align-items: center;\n}\n\n.pops-mobile-folder-list-file-name {\n  display: flex;\n  align-items: center;\n}\n.pops-mobile-folder-list-file-name > div {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  padding: 6px 0px;\n  flex-direction: column;\n}\n.pops-mobile-folder-list-file-name img.pops-folder-list-file-icon {\n  width: 45px;\n  height: 45px;\n}\n.pops-mobile-folder-list-file-name a.pops-folder-list-file-name-title-text {\n  padding-left: unset;\n  max-width: 250px;\n  overflow-x: hidden;\n  font-weight: 400;\n  line-height: unset;\n  margin-bottom: 4px;\n  white-space: normal;\n  text-overflow: unset;\n}\n\n/* 修改滚动 */\n.pops-folder-content {\n  overflow: hidden !important;\n}\n.pops-folder-content .pops-folder-list {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.pops-folder-content .pops-folder-list-table__body-div {\n  height: 100%;\n  flex: 1 auto;\n  overflow: auto;\n  padding-bottom: 0;\n}\n.pops-mobile-folder-content .pops-folder-list-table__body-div {\n  height: 100%;\n  flex: 1 auto;\n  overflow: auto;\n  padding-bottom: 0;\n}\n.pops-folder-content table.pops-folder-list-table__body {\n  overflow: auto;\n}\n.pops-folder-content .pops-folder-list-table__header-div {\n  flex: 0;\n}\n.pops-mobile-folder-content .pops-folder-list-table__header-div {\n  display: none;\n}\n\n.pops-folder-list .pops-folder-list-file-name-title-text {\n  color: var(--table-body-row-file-name-text-color);\n}\n.pops-folder-list .pops-folder-list-file-name-title-text:hover {\n  text-decoration: none;\n  color: var(--table-body-row-file-name-hover-text-color);\n}\n.pops-folder-list .text-ellip {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.pops-folder-list .content {\n  color: var(--table-body-row-content-text-color);\n  position: relative;\n  width: 100%;\n  text-align: left;\n}\n.pops-folder-list .inline-block-v-middle {\n  display: inline-block;\n  vertical-align: middle;\n}\n.pops-folder-list .flex-a-i-center {\n  display: flex;\n  align-items: center;\n}\n.pops-folder-list .u-file-icon {\n  display: inline-block;\n  vertical-align: middle;\n}\n.pops-folder-list .u-file-icon--list {\n  width: 32px;\n  height: 32px;\n}\n.pops-folder-list .pops-folder-list-file-icon {\n  line-height: normal;\n  align-content: center;\n  position: relative;\n  vertical-align: middle;\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb-primary {\n  flex: 1;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n  -ms-flex-align: center;\n  align-items: center;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n  -ms-flex-direction: row;\n  flex-direction: row;\n  min-height: 17px;\n  flex-wrap: wrap;\n}\n.pops-folder-list .pops-folder-list-table__sort {\n  display: inline-flex;\n  margin-left: 4px;\n  flex-direction: column;\n}\n\n.pops-folder-list .pops-folder-icon-arrow {\n  width: 10px;\n  height: 10px;\n  fill: var(--folder-arrow-fill-color);\n}\n.pops-folder-list .pops-folder-icon-active {\n  fill: var(--folder-arrow-active-fill-color);\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb {\n  padding: 4px 20px;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n  -ms-flex-align: center;\n  align-items: center;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n  -ms-flex-direction: row;\n  flex-direction: row;\n  -webkit-box-pack: start;\n  -webkit-justify-content: start;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n  min-height: 35px;\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles {\n  font-size: 12px;\n  color: var(--header-breadcrumb-all-files-text-color);\n  line-height: normal;\n  align-content: center;\n  font-weight: 700;\n  display: inline-block;\n  max-width: 140px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  word-wrap: normal;\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a {\n  color: var(--header-breadcrumb-all-files-last-text-color);\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a {\n  font-size: 14px;\n  color: var(--header-breadcrumb-all-files-first-text-color);\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow {\n  width: 16px;\n  height: 16px;\n}\n.pops-folder-list .iconArrow {\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAMAAABYd88+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTOLi4uLi4t7e3uPj49/f397e3t3d3f///97e3vDw8N3d3d7e3t3d3d3d3ejo6N/f397e3t7e3t3d3d/f393d3d3d3RK+NoEAAAAWdFJOUwAnM4YPU/iQA+UIeMDaHhY41i7zX7UebpjFAAAAUElEQVQI15XOORaAIAwE0LATXHCd+x9VfCiksXCq+UUWou8oZ1vXHrt7YVBiYkW4gdMKYFIC4CSATWCNHWPuM6HuHkr1x3N0ZrBu/9gl0b9c3+kF7C7hS1YAAAAASUVORK5CYII=)\n    55% 50%/6px 9px no-repeat;\n}\n\n@media (prefers-color-scheme: dark) {\n  .pops[type-value=\"folder\"] {\n    --pops-title-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));\n    --pops-bottom-btn-controls-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));\n  }\n  .pops-folder-list {\n    --header-breadcrumb-text-color: #06a7ff;\n    --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);\n    --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);\n    --header-breadcrumb-all-files-last-text-color: #818999;\n    --table-body-row-text-color: #f7f8fa;\n    --table-body-td-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));\n    --table-body-th-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));\n    --table-body-td-text-color: #495366;\n    --table-body-row-hover-bd-color: #1f2022;\n    --table-body-row-hover-bg-color: #1f2022;\n    --table-body-row-file-name-text-color: #f7f8fa;\n  }\n}\n";
 
-            var panelCSS = ".pops[type-value=\"panel\"] {\n  --pops-bg-color: #f2f2f2;\n  --pops-color: #333333;\n  --panel-title-bg-color: #ffffff;\n\n  --panel-aside-bg-color: #ffffff;\n  --panel-aside-hover-color: rgb(64, 158, 255);\n  --panel-aside-hover-bg-color: rgba(64, 158, 255, 0.1);\n\n  --pops-panel-forms-margin-top-bottom: 10px;\n  --pops-panel-forms-margin-left-right: 20px;\n  --pops-panel-forms-header-icon-size: calc(var(--pops-panel-forms-container-li-padding-left-right) + 1px);\n  --pops-panel-forms-header-padding-top-bottom: 15px;\n  --pops-panel-forms-header-padding-left-right: 10px;\n  --pops-panel-forms-container-item-left-text-gap: 6px;\n  --pops-panel-forms-container-item-left-desc-text-size: 0.8em;\n  --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\n  --pops-panel-forms-container-item-bg-color: #ffffff;\n  --pops-panel-forms-container-item-title-color: #333;\n  --pops-panel-forms-container-item-border-radius: 6px;\n  --pops-panel-forms-container-item-margin-top-bottom: 10px;\n  --pops-panel-forms-container-item-margin-left-right: var(--pops-panel-forms-margin-left-right);\n  --pops-panel-forms-container-li-border-color: var(--pops-bd-color);\n  --pops-panel-forms-container-li-padding-top-bottom: 12px;\n  --pops-panel-forms-container-li-padding-left-right: 16px;\n\n  --pops-panel-forms-container-deepMenu-item-active-bg: #e9e9e9;\n}\n.pops[type-value=\"panel\"] {\n  color: var(--pops-color);\n  background: var(--pops-bg-color);\n}\n.pops[type-value] .pops-panel-title {\n  background: var(--panel-title-bg-color);\n}\n\n/* ↓panel的CSS↓ */\n/* 左侧的列表 */\naside.pops-panel-aside {\n  box-sizing: border-box;\n  flex-shrink: 0;\n  max-width: 200px;\n  min-width: 100px;\n  height: 100%;\n  background: var(--panel-aside-bg-color);\n  border-right: 1px solid var(--panel-aside-bg-color);\n  font-size: 0.9em;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\naside.pops-panel-aside .pops-panel-aside-top-container {\n  overflow: auto;\n}\naside.pops-panel-aside ul li {\n  margin: 6px 8px;\n  border-radius: 4px;\n  padding: 6px 10px;\n  cursor: default;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\naside.pops-panel-aside .pops-is-visited,\naside.pops-panel-aside ul li:not(.pops-panel-disabled-aside-hover-css):hover {\n  color: var(--panel-aside-hover-color);\n  background: var(--panel-aside-hover-bg-color);\n}\n/* 左侧的列表 */\n\n/* 底部的容器 */\n.pops-panel-bottom-wrapper {\n  background: var(--panel-aside-bg-color);\n  border-top: 1px solid #ebeef5;\n}\n.pops-panel-bottom-wrapper:has(.pops-panel-bottom-left-container:empty):has(.pops-panel-bottom-right-container:empty) {\n  border-top: 0;\n}\n.pops-panel-bottom-container {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n}\n.pops-panel-bottom-left-container {\n}\n.pops-panel-bottom-right-container {\n}\n.pops-panel-bottom-wrapper .pops-panel-bottom-item {\n  list-style-type: none;\n  margin: 6px 8px;\n  border-radius: 4px;\n  padding: 6px 10px;\n  cursor: default;\n}\n.pops-panel-bottom-wrapper:not(.pops-panel-disable-bottom-item-hover-css) .pops-panel-bottom-item:hover {\n  color: var(--panel-aside-hover-color);\n  background: var(--panel-aside-hover-bg-color);\n}\n/* 底部的容器 */\n\n.pops-panel-content {\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  overflow: auto;\n  flex-basis: auto;\n  box-sizing: border-box;\n  min-width: 0;\n  bottom: 0 !important;\n}\n\n.pops-panel-section-wrapper {\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\nsection.pops-panel-container {\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\nsection.pops-panel-container .pops-panel-container-header-ul,\nsection.pops-panel-container .pops-panel-deepMenu-container-header-ul {\n  border-bottom: 1px solid rgba(223, 223, 223, var(--pops-bg-opacity));\n  flex: 0 auto;\n}\nsection.pops-panel-container .pops-panel-container-header-ul li,\nsection.pops-panel-container .pops-panel-container-header-ul li.pops-panel-container-header-title-text {\n  display: flex;\n  justify-content: flex-start !important;\n  margin: 0px !important;\n  padding: var(--pops-panel-forms-header-padding-top-bottom)\n    calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right));\n  text-align: left;\n}\nsection.pops-panel-container ul.pops-panel-container-main-ul {\n  overflow: auto;\n  /*flex: 1;*/\n}\nsection.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: var(--pops-panel-forms-margin-top-bottom)\n    calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-margin-left-right));\n  gap: 10px;\n}\nsection.pops-panel-container .pops-panel-forms-container-item-header-text {\n  margin: 10px;\n  margin-left: calc(\n    var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right)\n  );\n  font-size: 0.9em;\n  text-align: left;\n  color: var(--pops-panel-forms-container-item-title-color);\n}\nsection.pops-panel-container li.pops-panel-forms-container-item {\n  /* 去除<li>左侧的圆点 */\n  display: block;\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist {\n  border-radius: var(--pops-panel-forms-container-item-border-radius);\n  background: var(--pops-panel-forms-container-item-bg-color);\n  margin: var(--pops-panel-forms-container-item-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist li {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--pops-panel-forms-container-li-padding-top-bottom)\n    var(--pops-panel-forms-container-li-padding-left-right);\n  margin: 0px 0px;\n  border-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\n  text-align: left;\n}\n/*section.pops-panel-container\n\t.pops-panel-forms-container-item\n\tul\n\tli.pops-panel-deepMenu-nav-item {\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px;\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right);\n\tborder-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\n}*/\nsection.pops-panel-container\n  .pops-panel-forms-container-item\n  ul.pops-panel-forms-container-item-formlist\n  li:last-child {\n  border: 0px;\n}\n/* 左侧的文字 */\nsection.pops-panel-container .pops-panel-item-left-text {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pops-panel-forms-container-item-left-text-gap);\n}\n\n/* 左侧的主文字 */\n/*section.pops-panel-container .pops-panel-item-left-main-text {\n\t\n}*/\n/* 左侧的描述文字 */\nsection.pops-panel-container .pops-panel-item-left-desc-text {\n  font-size: var(--pops-panel-forms-container-item-left-desc-text-size);\n  color: var(--pops-panel-forms-container-item-left-desc-text-color);\n}\n\n/* 折叠面板 */\nsection.pops-panel-container .pops-panel-forms-fold {\n  border-radius: var(--pops-panel-forms-container-item-border-radius);\n  background: var(--pops-panel-forms-container-item-bg-color);\n  margin: var(--pops-panel-forms-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\n}\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container {\n  display: flex;\n  align-items: center;\n  fill: #6c6c6c;\n  justify-content: space-between;\n  margin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;\n  padding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;\n}\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-fold-container-icon {\n  transform: rotate(90deg);\n}\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container-icon {\n  width: 15px;\n  height: 15px;\n  display: flex;\n  align-items: center;\n  transform: rotate(-90deg);\n  transition: transform 0.3s;\n}\n/* 折叠状态 */\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-container-item-formlist {\n  height: 0;\n}\n/* 非折叠状态 */\nsection.pops-panel-container .pops-panel-forms-fold ul.pops-panel-forms-container-item-formlist {\n  margin: 0;\n}\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-container-item-formlist {\n  transition: height 0.3s;\n  overflow: hidden;\n  border-radius: unset;\n  background: unset;\n  margin: 0;\n  height: calc-size(auto, size);\n}\n/* 折叠面板 */\n\n/* 姑且认为小于600px的屏幕为移动端 */\n@media (max-width: 600px) {\n  /* 兼容移动端CSS */\n  .pops[type-value=\"panel\"] {\n    --pops-panel-forms-margin-left-right: 10px;\n  }\n  .pops[type-value=\"panel\"] {\n    width: 92%;\n    width: 92vw;\n    width: 92dvw;\n  }\n  .pops[type-value=\"panel\"] .pops-panel-content aside.pops-panel-aside {\n    max-width: 20%;\n    min-width: auto;\n  }\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item > div {\n    text-align: left;\n    --pops-panel-forms-margin-left-right: 0px;\n  }\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item ul {\n    margin: 0px !important;\n  }\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul > li {\n    margin: 10px 10px;\n  }\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul > li div:nth-child(2) {\n    max-width: 55%;\n  }\n  .pops[type-value=\"panel\"] .pops-panel-select .el-select__selected-item.el-select__placeholder {\n    max-width: -moz-available;\n    max-width: -webkit-fill-available;\n  }\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul > li .pops-panel-input span.pops-panel-input__suffix {\n    padding: 0 4px;\n  }\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-select select {\n    min-width: 88px !important;\n    width: -moz-available;\n    width: -webkit-fill-available;\n  }\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-container-header-ul li {\n    font-size: 16px;\n  }\n  .pops[type-value=\"panel\"] .pops-panel-title p[pops],\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul li,\n  .pops[type-value=\"panel\"] aside.pops-panel-aside ul li {\n    font-size: 14px;\n  }\n}\n/* switch的CSS */\n.pops-panel-switch {\n  --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\n  --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\n  --panel-switch-circle-color: #dcdfe6;\n  --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n  --panel-switch-checked-circle-color: #409eff;\n  --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\n  --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\n}\n.pops-panel-switch {\n  display: inline-flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  position: relative;\n  font-size: 14px;\n  line-height: normal;\n  align-content: center;\n  height: 32px;\n  vertical-align: middle;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n.pops-panel-switch input.pops-panel-switch__input {\n  position: absolute;\n  width: 0;\n  height: 0;\n  opacity: 0;\n  margin: 0;\n}\n.pops-panel-switch:has(input.pops-panel-switch__input:disabled),\n.pops-panel-switch[data-disabled],\n.pops-panel-switch[data-disabled] .pops-panel-switch__core,\n.pops-panel-switch input.pops-panel-switch__input:disabled + .pops-panel-switch__core {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n.pops-panel-switch span.pops-panel-switch__core {\n  display: inline-flex;\n  position: relative;\n  align-items: center;\n  min-width: 40px;\n  height: 20px;\n  border: 1px solid var(--panel-switch-core-bd-color);\n  outline: 0;\n  border-radius: 10px;\n  box-sizing: border-box;\n  background: var(--panel-switch-core-bg-color);\n  cursor: pointer;\n  transition:\n    border-color 0.3s,\n    background-color 0.3s;\n}\n.pops-panel-switch .pops-panel-switch__action {\n  position: absolute;\n  left: 1px;\n  border-radius: 100%;\n  transition: all 0.3s;\n  width: 16px;\n  height: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--panel-switch-circle-bg-color);\n  color: var(--panel-switch-circle-color);\n}\n.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {\n  border-color: var(--panel-switch-checked-core-bd-color);\n  background-color: var(--panel-switch-checked-core-bg-color);\n}\n.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {\n  left: calc(100% - 17px);\n  color: var(--panel-switch-checked-circle-color);\n}\n/* switch的CSS */\n\n/* slider旧的CSS */\nsection.pops-panel-container .pops-panel-slider:has(> input[type=\"range\"]) {\n  overflow: hidden;\n  height: 25px;\n  line-height: normal;\n  align-content: center;\n  display: flex;\n  align-items: center;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"] {\n  height: 6px;\n  background: rgb(228, 231, 237, var(--pops-bg-opacity));\n  outline: 0;\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-webkit-slider-thumb {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\n  background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n  box-shadow:\n    0 0 2px rgba(0, 0, 0, 0.3),\n    0 3px 5px rgba(0, 0, 0, 0.2);\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n  border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-thumb {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  border: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));\n  background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n  box-shadow:\n    0 0 2px rgba(0, 0, 0, 0.3),\n    0 3px 5px rgba(0, 0, 0, 0.2);\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-progress {\n  height: 6px;\n  border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\n}\n/* slider旧的CSS */\n\n/* slider的CSS */\n.pops-slider {\n  --pops-slider-color-white: #ffffff;\n  --pops-slider-color-primary: #409eff;\n  --pops-slider-color-info: #909399;\n  --pops-slider-text-color-placeholder: #a8abb2;\n  --pops-slider-border-color-light: #e4e7ed;\n  --pops-slider-border-radius-circle: 100%;\n  --pops-slider-transition-duration-fast: 0.2s;\n\n  --pops-slider-main-bg-color: var(--pops-slider-color-primary);\n  --pops-slider-runway-bg-color: var(--pops-slider-border-color-light);\n  --pops-slider-stop-bg-color: var(--pops-slider-color-white);\n  --pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);\n  --pops-slider-border-radius: 3px;\n  --pops-slider-height: 6px;\n  --pops-slider-button-size: 20px;\n  --pops-slider-button-wrapper-size: 36px;\n  --pops-slider-button-wrapper-offset: -15px;\n}\n\n.pops-slider {\n  width: 100%;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.pops-slider-width {\n  flex: 0 0 52%;\n  margin-left: 10px;\n}\n\n.pops-slider__runway {\n  flex: 1;\n  height: var(--pops-slider-height);\n  background-color: var(--pops-slider-runway-bg-color);\n  border-radius: var(--pops-slider-border-radius);\n  position: relative;\n  cursor: pointer;\n}\n\n.pops-slider__runway.show-input {\n  margin-right: 30px;\n  width: auto;\n}\n\n.pops-slider__runway.pops-slider-is-disabled {\n  cursor: default;\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {\n  background-color: var(--pops-slider-disabled-color);\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {\n  border-color: var(--pops-slider-disabled-color);\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\n  cursor: not-allowed;\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\n  transform: scale(1);\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\n  cursor: not-allowed;\n}\n\n.pops-slider__input {\n  flex-shrink: 0;\n  width: 130px;\n}\n\n.pops-slider__bar {\n  height: var(--pops-slider-height);\n  background-color: var(--pops-slider-main-bg-color);\n  border-top-left-radius: var(--pops-slider-border-radius);\n  border-bottom-left-radius: var(--pops-slider-border-radius);\n  position: absolute;\n}\n\n.pops-slider__button-wrapper {\n  height: var(--pops-slider-button-wrapper-size);\n  width: var(--pops-slider-button-wrapper-size);\n  position: absolute;\n  z-index: 1;\n  top: var(--pops-slider-button-wrapper-offset);\n  transform: translate(-50%);\n  background-color: transparent;\n  text-align: center;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  line-height: normal;\n  outline: none;\n}\n\n.pops-slider__button-wrapper:after {\n  display: inline-block;\n  content: \"\";\n  height: 100%;\n  vertical-align: middle;\n}\n\n.pops-slider__button:hover,\n.pops-slider__button.hover {\n  cursor: grab;\n}\n\n.pops-slider__button {\n  display: inline-block;\n  width: var(--pops-slider-button-size);\n  height: var(--pops-slider-button-size);\n  vertical-align: middle;\n  border: solid 2px var(--pops-slider-main-bg-color);\n  background-color: var(--pops-slider-color-white);\n  border-radius: 50%;\n  box-sizing: border-box;\n  transition: var(--pops-slider-transition-duration-fast);\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.pops-slider__button:hover,\n.pops-slider__button.hover,\n.pops-slider__button.dragging {\n  transform: scale(1.2);\n}\n\n.pops-slider__button:hover,\n.pops-slider__button.hover {\n  cursor: grab;\n}\n\n.pops-slider__button.dragging {\n  cursor: grabbing;\n}\n\n.pops-slider__stop {\n  position: absolute;\n  height: var(--pops-slider-height);\n  width: var(--pops-slider-height);\n  border-radius: var(--pops-slider-border-radius-circle);\n  background-color: var(--pops-slider-stop-bg-color);\n  transform: translate(-50%);\n}\n\n.pops-slider__marks {\n  top: 0;\n  left: 12px;\n  width: 18px;\n  height: 100%;\n}\n\n.pops-slider__marks-text {\n  position: absolute;\n  transform: translate(-50%);\n  font-size: 14px;\n  color: var(--pops-slider-color-info);\n  margin-top: 15px;\n  white-space: pre;\n}\n\n.pops-slider.is-vertical {\n  position: relative;\n  display: inline-flex;\n  width: auto;\n  height: 100%;\n  flex: 0;\n}\n\n.pops-slider.is-vertical .pops-slider__runway {\n  width: var(--pops-slider-height);\n  height: 100%;\n  margin: 0 16px;\n}\n\n.pops-slider.is-vertical .pops-slider__bar {\n  width: var(--pops-slider-height);\n  height: auto;\n  border-radius: 0 0 3px 3px;\n}\n\n.pops-slider.is-vertical .pops-slider__button-wrapper {\n  top: auto;\n  left: var(--pops-slider-button-wrapper-offset);\n  transform: translateY(50%);\n}\n\n.pops-slider.is-vertical .pops-slider__stop {\n  transform: translateY(50%);\n}\n\n.pops-slider.is-vertical .pops-slider__marks-text {\n  margin-top: 0;\n  left: 15px;\n  transform: translateY(50%);\n}\n\n.pops-slider--large {\n  height: 40px;\n}\n\n.pops-slider--small {\n  height: 24px;\n}\n/* slider的CSS */\n\n/* input的CSS */\n.pops-panel-input {\n  --el-disabled-text-color: #a8abb2;\n  --el-disabled-bg-color: #f5f7fa;\n  --el-disabled-border-color: #e4e7ed;\n  --el-color-danger: #f56c6c;\n\n  --pops-panel-components-input-border-radius: 4px;\n  --pops-panel-components-input-text-color: #000000;\n  --pops-panel-components-input-text-bg-color: transparent;\n  --pops-panel-components-input-text-default-padding: 8px;\n  --pops-panel-components-input-bd-color: #dcdfe6;\n  --pops-panel-components-input-bg-color: #ffffff;\n  --pops-panel-components-input-hover-bd-color: #c0c4cc;\n  --pops-panel-components-input-focus-bd-color: #409eff;\n  --pops-panel-components-input-suffix-color: #a8abb2;\n  --pops-panel-components-input-suffix-bg-color: #ffffff;\n}\n.pops-panel-input {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  position: relative;\n  box-shadow: none;\n  width: 200px;\n  border: 0px;\n}\n.pops-panel-input_inner {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border: 1px solid var(--pops-panel-components-input-bd-color);\n  border-radius: var(--pops-panel-components-input-border-radius);\n  background-color: var(--pops-panel-components-input-bg-color);\n  box-shadow: none;\n}\n.pops-panel-input_inner:hover {\n  border: 1px solid var(--pops-panel-components-input-hover-bd-color);\n}\n.pops-panel-input:has(input:disabled):hover {\n  --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\n}\n.pops-panel-input_inner:has(input:focus) {\n  outline: 0;\n  border: 1px solid var(--pops-panel-components-input-focus-bd-color);\n  border-radius: var(--pops-panel-components-input-border-radius);\n  box-shadow: none;\n}\n.pops-panel-input input {\n  display: inline-flex;\n  justify-content: center;\n  text-align: start;\n  align-items: center;\n  align-content: center;\n  white-space: nowrap;\n  cursor: text;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  vertical-align: middle;\n  -webkit-appearance: none;\n  appearance: none;\n  color: var(--pops-panel-components-input-text-color);\n  background-color: var(--pops-panel-components-input-text-bg-color);\n  outline: 0;\n  transition: 0.1s;\n  border: 0;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: normal;\n  height: 32px;\n  width: 100%;\n  flex: 1;\n  /*margin-right: calc(1em + 8px);*/\n  margin: 0px;\n  padding: var(--pops-panel-components-input-text-default-padding);\n}\n.pops-panel-input input[type=\"search\"]::-webkit-search-cancel-button {\n  -webkit-appearance: none;\n  display: none;\n}\n/* 颜色选择器不需要那么宽 */\n.pops-panel-input:has(input[type=\"color\"]) {\n  width: 50px;\n}\n.pops-panel-input input[type=\"color\"] {\n  padding: 0px;\n}\n.pops-panel-input_inner:has(input[type=\"file\"]) {\n  border: 0px;\n  background: transparent;\n}\n.pops-panel-input input[type=\"file\"] {\n  padding: 0px;\n  line-height: 32px;\n}\n.pops-panel-input span.pops-panel-input__suffix {\n  display: inline-flex;\n  white-space: nowrap;\n  flex-shrink: 0;\n  flex-wrap: nowrap;\n  height: 100%;\n  height: -moz-available;\n  height: -webkit-fill-available;\n  text-align: center;\n  color: var(--pops-panel-components-input-suffix-color);\n  background: var(--pops-panel-components-input-suffix-bg-color);\n  transition: all 0.3s;\n  pointer-events: none;\n  padding: 0 8px;\n  position: relative;\n  right: 0px;\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border: 1px solid transparent;\n}\n.pops-panel-input span.pops-panel-input__suffix-inner {\n  pointer-events: all;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n/* 如果包含清空图标的按钮，则默认隐藏清空图标，当:hover、:focus、:focus-within、:active时显示清空图标 */\n.pops-panel-input span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\n  display: none;\n}\n.pops-panel-input:hover span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\n.pops-panel-input:focus span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\n.pops-panel-input:focus-within span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\n.pops-panel-input:active span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\n  display: inline-flex;\n}\n/* 当清空图标显示时或查看图标存在时，则隐藏输入框的padding-right */\n.pops-panel-input:hover:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\n.pops-panel-input:focus:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\n.pops-panel-input:focus-within:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\n.pops-panel-input:active:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\n.pops-panel-input:has(span.pops-panel-input__suffix svg[data-type=\"view\"]) input,\n.pops-panel-input:has(span.pops-panel-input__suffix svg[data-type=\"hide\"]) input {\n  padding-right: 0;\n}\n.pops-panel-input .pops-panel-icon {\n  cursor: pointer;\n}\n.pops-panel-input .pops-panel-icon {\n  height: inherit;\n  line-height: normal;\n  align-content: center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: all 0.3s;\n}\n.pops-panel-input .pops-panel-icon svg {\n  height: 1em;\n  width: 1em;\n}\n\n.pops-input-disabled {\n  background-color: var(--pops-components-is-disabled-bg-color);\n  border-radius: 4px;\n}\n.pops-panel-input.pops-input-disabled:hover {\n  --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\n}\n.pops-panel-input input:disabled,\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  color: var(--el-disabled-text-color);\n  -webkit-text-fill-color: var(--el-disabled-text-color);\n  cursor: not-allowed;\n}\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\n  display: none;\n}\n/* 校验样式 */\n.pops-panel-input:has(.pops-panel-input-valid-error) {\n  --pops-panel-components-input-bd-color: var(--el-color-danger) !important;\n  --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\n  --pops-panel-components-input-focus-bd-color: var(--pops-panel-components-input-bd-color);\n}\n.pops-panel-input .pops-panel-input-valid-error {\n  width: 100%;\n  color: var(--el-color-danger);\n  font-weight: 500;\n  font-size: 0.8em;\n  box-sizing: border-box;\n  vertical-align: middle;\n  display: inline-flex;\n  position: relative;\n}\n/* input的CSS */\n\n/* textarea的CSS */\n.pops-panel-textarea {\n  --pops-panel-components-textarea-text-color: #000000;\n  --pops-panel-components-textarea-text-bg-color: #ffffff;\n  --pops-panel-components-textarea-bd-color: #dcdfe6;\n  --pops-panel-components-textarea-hover-bd-color: #c0c4cc;\n  --pops-panel-components-textarea-focus-bd-color: #409eff;\n}\n.pops-panel-textarea textarea {\n  width: 100%;\n  /*vertical-align: bottom;*/\n  position: relative;\n  display: block;\n  resize: none;\n  padding: 5px 11px;\n  /*line-height: 1;*/\n  box-sizing: border-box;\n  font-size: inherit;\n  font-family: inherit;\n  color: var(--pops-panel-components-textarea-text-color);\n  background-color: var(--pops-panel-components-textarea-text-bg-color);\n  background-image: none;\n  -webkit-appearance: none;\n  appearance: none;\n  box-shadow: none;\n  border-radius: 0;\n  transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  border: 1px solid var(--pops-panel-components-textarea-bd-color);\n}\n.pops-panel-textarea textarea:hover {\n  border-color: var(--pops-panel-components-textarea-hover-bd-color);\n}\n.pops-panel-textarea:has(textarea:disabled):hover {\n  --pops-panel-components-textarea-hover-bd-color: var(--pops-panel-components-textarea-bd-color);\n}\n.pops-panel-textarea-disable {\n  --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color) !important;\n  --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\n}\n.pops-panel-textarea-disable textarea {\n  cursor: not-allowed;\n}\n.pops-panel-textarea textarea:focus {\n  outline: 0;\n  border-color: var(--pops-panel-components-textarea-focus-bd-color);\n}\n/* textarea的CSS */\n\n/* select的CSS */\n.pops-panel-select {\n  --pops-panel-components-select-disabled-text-color: #a8abb2;\n  --pops-panel-components-select-text-color: #000000;\n  --pops-panel-components-select-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\n  --pops-panel-components-select-hover-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\n  --pops-panel-components-select-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n}\n.pops-panel-select {\n  border: 0;\n}\n.pops-panel-select select {\n  width: 100%;\n  height: 32px;\n  line-height: normal;\n  align-content: center;\n  min-width: 200px;\n  border: 1px solid var(--pops-panel-components-select-bd-color);\n  border-radius: 5px;\n  text-align: center;\n  outline: 0;\n  color: var(--pops-panel-components-select-text-color);\n  background-color: var(--pops-panel-components-select-bg-color);\n  box-shadow: none;\n}\n.pops-panel-select select:hover {\n  border: 1px solid var(--pops-panel-components-select-hover-bd-color);\n}\n.pops-panel-select-disable {\n  --pops-panel-components-select-text-color: var(--pops-components-is-disabled-text-color);\n  --pops-panel-components-select-bg-color: var(--pops-components-is-disabled-bg-color);\n}\n.pops-panel-select-disable select {\n  cursor: not-allowed;\n}\n.pops-panel-select-disable select:hover {\n  box-shadow: none;\n  --pops-panel-components-select-hover-bd-color: var(--pops-panel-components-select-bd-color);\n}\n.pops-panel-select select:focus {\n  border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\n  box-shadow: none;\n}\n/* select的CSS */\n\n/* select dialog 的CSS */\n.pops-panel-select[data-mode=\"dialog\"] {\n}\n/* select dialog 的CSS */\n\n/* select horizontal 的CSS */\n.pops-panel-select[data-mode=\"horizontal\"] {\n  --pops-panel-components-select-horizontal-selected-text-color: #626aef;\n  --pops-panel-components-select-horizontal-selected-bg-color: #eff0fd;\n}\n.pops-panel-select[data-mode=\"horizontal\"] .el-select__wrapper {\n  padding: 0;\n  gap: 0;\n  border: 0;\n}\n.pops-panel-select[data-mode=\"horizontal\"] .select-item {\n  flex: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 1px solid var(--el-border-color);\n  height: -moz-available;\n  height: -webkit-fill-available;\n  border-left: 0;\n}\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:hover {\n  color: var(--el-color-primary);\n}\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:first-child {\n  border-left: 1px solid var(--el-border-color);\n  border-top-left-radius: var(--el-border-radius-base);\n  border-bottom-left-radius: var(--el-border-radius-base);\n}\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:last-child {\n  border-top-right-radius: var(--el-border-radius-base);\n  border-bottom-right-radius: var(--el-border-radius-base);\n}\n.pops-panel-select[data-mode=\"horizontal\"] .select-item.select__selected-item {\n  color: var(--pops-panel-components-select-horizontal-selected-text-color);\n  background-color: var(--pops-panel-components-select-horizontal-selected-bg-color);\n  border-color: var(--pops-panel-components-select-horizontal-selected-bg-color);\n}\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:has(+ .select__selected-item) {\n  border-right: 0;\n}\n.pops-panel-select[data-mode=\"horizontal\"] .select-item[disabled] {\n  color: var(--pops-panel-components-select-disabled-text-color);\n  --pops-panel-components-select-horizontal-selected-text-color: var(\n    --pops-panel-components-select-disabled-text-color\n  );\n  cursor: not-allowed;\n  background: unset;\n}\n/* select horizontal 的CSS */\n\n/* select-multiple的CSS*/\n.pops-panel-select-multiple,\n.pops-panel-select {\n  --el-border-radius-base: 4px;\n  --el-fill-color-blank: #ffffff;\n  --el-transition-duration: 0.3s;\n  --el-border-color: #cbcbcb;\n  --el-text-color-placeholder: #a8abb2;\n  --color: inherit;\n  --el-select-input-color: #a8abb2;\n  --el-select-input-font-size: 14px;\n  --el-text-color-regular: #606266;\n  --el-color-info: #909399;\n  --el-color-info-light-9: #f4f4f5;\n  --el-color-info-light-8: #e9e9eb;\n  --el-color-primary-light-9: #ecf5ff;\n  --el-color-primary-light-8: #d9ecff;\n  --el-color-primary: #409eff;\n  --el-color-white: #ffffff;\n  width: 200px;\n}\n.pops-panel-select .el-select__wrapper,\n.pops-panel-select-multiple .el-select__wrapper {\n  display: flex;\n  align-items: center;\n  position: relative;\n  box-sizing: border-box;\n  cursor: pointer;\n  text-align: left;\n  font-size: 14px;\n  padding: 4px 12px;\n  gap: 6px;\n  min-height: 32px;\n  line-height: normal;\n  align-content: center;\n  border-radius: var(--el-border-radius-base);\n  background-color: var(--el-fill-color-blank);\n  transition: var(--el-transition-duration);\n  transform: translateZ(0);\n  border: 1px solid var(--el-border-color);\n}\n.pops-panel-select .el-select__wrapper.is-focused,\n.pops-panel-select-multiple .el-select__wrapper.is-focused {\n  --el-border-color: var(--el-color-primary);\n}\n.pops-panel-select .el-select__selection,\n.pops-panel-select-multiple .el-select__selection {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  gap: 6px;\n}\n.pops-panel-select .el-select__selection[data-selected-text-align=\"left\"] {\n  justify-content: left;\n}\n.pops-panel-select .el-select__selection[data-selected-text-align=\"center\"] {\n  justify-content: center;\n}\n.pops-panel-select .el-select__selection[data-selected-text-align=\"right\"] {\n  justify-content: right;\n}\n.pops-panel-select .el-select__selected-item,\n.pops-panel-select-multiple .el-select__selected-item {\n  display: flex;\n  flex-wrap: wrap;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n.pops-panel-select .el-select__selected-item span {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.pops-panel-select .el-select__selected-item.el-select__choose_tag .el-tag,\n.pops-panel-select-multiple .el-select__selected-item.el-select__choose_tag .el-tag {\n  max-width: 200px;\n}\n.pops-panel-select .el-select__input-wrapper,\n.pops-panel-select-multiple .el-select__input-wrapper {\n  max-width: 100%;\n}\n.pops-panel-select .el-select__selection.is-near,\n.pops-panel-select-multiple .el-select__selection.is-near {\n  margin-left: -8px;\n}\n.pops-panel-select .el-select__placeholder,\n.pops-panel-select-multiple .el-select__placeholder {\n  position: absolute;\n  display: block;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--el-input-text-color, var(--el-text-color-regular));\n}\n.pops-panel-select .el-select__placeholder.is-transparent,\n.pops-panel-select-multiple .el-select__placeholder.is-transparent {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  color: var(--el-text-color-placeholder);\n}\n.pops-panel-select .el-select__prefix,\n.pops-panel-select .el-select__suffix,\n.pops-panel-select-multiple .el-select__prefix,\n.pops-panel-select-multiple .el-select__suffix {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  gap: 6px;\n  color: var(--el-input-icon-color, var(--el-text-color-placeholder));\n}\n.pops-panel-select .el-icon,\n.pops-panel-select-multiple .el-icon {\n  --color: inherit;\n  height: 1em;\n  width: 1em;\n  line-height: normal;\n  align-content: center;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  fill: currentColor;\n  color: var(--color);\n  font-size: inherit;\n}\n.pops-panel-select .el-icon svg,\n.pops-panel-select-multiple .el-icon svg {\n  height: 1em;\n  width: 1em;\n}\n.pops-panel-select .el-select__caret,\n.pops-panel-select-multiple .el-select__caret {\n  color: var(--el-select-input-color);\n  font-size: var(--el-select-input-font-size);\n  transition: transform var(--el-transition-duration);\n  transform: rotate(0);\n  cursor: pointer;\n}\n/* 把箭头旋转 */\n.pops-panel-select[data-show-option] .el-select__caret,\n.pops-panel-select-multiple[data-show-option] .el-select__caret {\n  transform: rotate(180deg);\n}\n.pops-panel-select-multiple .el-tag {\n  --el-tag-font-size: 12px;\n  --el-tag-border-radius: 4px;\n  --el-tag-border-radius-rounded: 9999px;\n}\n.pops-panel-select-multiple .el-tag {\n  background-color: var(--el-tag-bg-color);\n  border-color: var(--el-tag-border-color);\n  color: var(--el-tag-text-color);\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  vertical-align: middle;\n  height: 24px;\n  padding: 0 9px;\n  font-size: var(--el-tag-font-size);\n  line-height: normal;\n  align-content: center;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: var(--el-tag-border-radius);\n  box-sizing: border-box;\n  white-space: nowrap;\n  --el-icon-size: 14px;\n  --el-tag-bg-color: var(--el-color-primary-light-9);\n  --el-tag-border-color: var(--el-color-primary-light-8);\n  --el-tag-hover-color: var(--el-color-primary);\n}\n.pops-panel-select-multiple .el-select__selection .el-tag {\n  cursor: pointer;\n  border-color: transparent;\n}\n.pops-panel-select-multiple .el-tag.el-tag--info {\n  --el-tag-bg-color: var(--el-color-info-light-9);\n  --el-tag-border-color: var(--el-color-info-light-8);\n  --el-tag-hover-color: var(--el-color-info);\n}\n.pops-panel-select-multiple .el-tag.el-tag--info {\n  --el-tag-text-color: var(--el-color-info);\n}\n.pops-panel-select-multiple .el-tag.is-closable {\n  padding-right: 5px;\n}\n.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {\n  min-width: 0;\n}\n.pops-panel-select-multiple .el-tag .el-tag__close {\n  flex-shrink: 0;\n  color: var(--el-tag-text-color);\n}\n.pops-panel-select-multiple .el-tag .el-tag__close:hover {\n  color: var(--el-color-white);\n  background-color: var(--el-tag-hover-color);\n}\n.pops-panel-select-multiple .el-tag .el-icon {\n  border-radius: 50%;\n  cursor: pointer;\n  font-size: calc(var(--el-icon-size) - 2px);\n  height: var(--el-icon-size);\n  width: var(--el-icon-size);\n}\n.pops-panel-select-multiple .el-tag .el-tag__close {\n  margin-left: 6px;\n}\n.pops-panel-select-multiple .el-select__tags-text {\n  display: block;\n  line-height: normal;\n  align-content: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n/* 禁用样式 */\n.pops-panel-select-disable {\n  --el-fill-color-blank: #f5f7fa;\n  --color: #a8abb2;\n  --el-border-color: #cbcbcb;\n}\n.pops-panel-select-disable .el-tag.el-tag--info {\n  --el-tag-bg-color: #e7e7e7;\n  --el-tag-text-color: var(--pops-components-is-disabled-text-color);\n}\n.pops-panel-select-disable .el-select__selection .el-tag,\n.pops-panel-select-disable .el-tag .el-tag__close:hover,\n.pops-panel-select-disable .el-select__wrapper,\n.pops-panel-select-disable .el-select__caret {\n  cursor: not-allowed;\n}\n/* select-multiple的CSS*/\n\n/* deepMenu的css */\n.pops-panel-deepMenu-nav-item {\n  cursor: pointer;\n}\n.pops-panel-deepMenu-nav-item:active {\n  background: var(--pops-panel-forms-container-deepMenu-item-active-bg);\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:active {\n  padding: var(--pops-panel-forms-container-li-padding-top-bottom)\n    var(--pops-panel-forms-container-li-padding-left-right);\n  margin: 0px;\n}\n/* 去除上个兄弟item的底部边框颜色 */\nsection.pops-panel-container .pops-panel-forms-container-item ul li:has(+ .pops-panel-deepMenu-nav-item:active) {\n  border-bottom: 1px solid transparent;\n}\n/* 第一个和最后一个跟随圆角 */\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:first-child:active {\n  border-top-left-radius: var(--pops-panel-forms-container-item-border-radius);\n  border-top-right-radius: var(--pops-panel-forms-container-item-border-radius);\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:last-child:active {\n  border-bottom-left-radius: var(--pops-panel-forms-container-item-border-radius);\n  border-bottom-right-radius: var(--pops-panel-forms-container-item-border-radius);\n}\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {\n  display: flex;\n  align-items: center;\n  color: #6c6c6c;\n  fill: #6c6c6c;\n}\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {\n  width: 15px;\n  height: 15px;\n  display: flex;\n  align-items: center;\n}\nsection.pops-panel-deepMenu-container .pops-panel-container-header-ul li.pops-panel-deepMenu-container-header {\n  display: flex;\n  align-items: center;\n  width: -moz-available;\n  width: -webkit-fill-available;\n  padding: var(--pops-panel-forms-header-padding-top-bottom)\n    calc(\n      var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right) -\n        var(--pops-panel-forms-header-icon-size)\n    );\n  gap: 0px;\n}\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\n  width: var(--pops-panel-forms-header-icon-size);\n  height: var(--pops-panel-forms-header-icon-size);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n/* 修复safari上图标大小未正常显示 */\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon > svg {\n  width: inherit;\n  height: inherit;\n}\n/* deepMenu的css */\n\n/* 文字对齐 */\n.pops-panel-item-left-desc-text:has(code) {\n  display: flex;\n  align-items: baseline;\n  flex-wrap: wrap;\n}\n\n@media (prefers-color-scheme: dark) {\n  .pops[type-value=\"panel\"] {\n    --pops-bg-color: #000000;\n    --pops-color: #f2f2f2;\n    --panel-title-bg-color: #000000;\n    --panel-aside-bg-color: #262626;\n    --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\n    --pops-panel-forms-container-item-bg-color: #262626;\n    --pops-panel-forms-container-item-title-color: #c1c1c1;\n\n    --pops-panel-forms-container-li-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\n    --pops-panel-forms-container-deepMenu-item-active-bg: #333333;\n  }\n  .pops[type-value=\"panel\"] .pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\n    fill: #f2f2f2;\n  }\n\n  /* switch的CSS */\n  .pops-panel-switch {\n    --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\n    --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\n    --panel-switch-circle-color: #dcdfe6;\n    --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n    --panel-switch-checked-circle-color: #409eff;\n    --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\n    --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\n  }\n  /* select的CSS */\n  .pops-panel-select {\n    --pops-panel-components-select-text-color: #f2f2f2;\n    --pops-panel-components-select-bd-color: rgb(51, 51, 51, var(--pops-bd-opacity));\n    --pops-panel-components-select-bg-color: #141414;\n  }\n  /* select-multiple的CSS*/\n  .pops-panel-select-multiple {\n    --el-fill-color-blank: #141414;\n    --el-border-color: #4c4d4f;\n    --el-text-color-placeholder: #a8abb2;\n    --el-select-input-color: #a8abb2;\n    --el-text-color-regular: #606266;\n    --el-color-info: #909399;\n    --el-color-info-light-8: #e9e9eb;\n    --el-color-primary-light-9: #ecf5ff;\n    --el-color-primary-light-8: #d9ecff;\n    --el-color-primary: #409eff;\n    --el-color-white: #ffffff;\n  }\n  .pops-panel-select-multiple .el-tag {\n    --el-color-info-light-9: #202121;\n  }\n  .pops-panel-select-multiple-disable {\n    --el-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\n  }\n  .pops-panel-select-multiple-disable .el-tag.el-tag--info {\n    --el-tag-bg-color: #2f2f2f;\n  }\n  /* select-multiple的CSS*/\n  /* slider的CSS */\n  .pops-slider {\n    --pops-slider-border-color-light: #414243;\n  }\n  /* input的CSS */\n  .pops-panel-input {\n    --pops-panel-components-input-text-color: #f2f2f2;\n    --pops-panel-components-input-bd-color: #4f5052;\n    --pops-panel-components-input-bg-color: #141414;\n    --pops-panel-components-input-hover-bd-color: #6f7175;\n    --pops-panel-components-input-focus-bd-color: #409eff;\n    --pops-panel-components-input-suffix-color: #a8abb2;\n  }\n  /* textarea的CSS */\n  .pops-panel-textarea {\n    --pops-panel-components-textarea-text-color: #f2f2f2;\n    --pops-panel-components-textarea-text-bg-color: #141414;\n    --pops-panel-components-textarea-bd-color: #4f5052;\n    --pops-panel-components-textarea-hover-bd-color: #6f7175;\n    --pops-panel-components-textarea-focus-bd-color: #409eff;\n  }\n  .pops-panel-textarea-disable {\n    --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\n    --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color);\n  }\n  /* slider */\n  .pops-slider {\n    --pops-slider-text-color-placeholder: #8d9095;\n  }\n}\n";
+            var panelCSS = ".pops[type-value=\"panel\"] {\n  --pops-bg-color: #f2f2f2;\n  --pops-color: #333333;\n  --panel-title-bg-color: #ffffff;\n\n  --panel-aside-bg-color: #ffffff;\n  --panel-aside-hover-color: rgb(64, 158, 255);\n  --panel-aside-hover-bg-color: rgba(64, 158, 255, 0.1);\n\n  --pops-panel-forms-margin-top-bottom: 10px;\n  --pops-panel-forms-margin-left-right: 20px;\n  --pops-panel-forms-header-icon-size: calc(var(--pops-panel-forms-container-li-padding-left-right) + 1px);\n  --pops-panel-forms-header-padding-top-bottom: 15px;\n  --pops-panel-forms-header-padding-left-right: 10px;\n  --pops-panel-forms-container-item-left-text-gap: 6px;\n  --pops-panel-forms-container-item-left-desc-text-size: 0.8em;\n  --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\n  --pops-panel-forms-container-item-bg-color: #ffffff;\n  --pops-panel-forms-container-item-title-color: #333;\n  --pops-panel-forms-container-item-border-radius: 6px;\n  --pops-panel-forms-container-item-margin-top-bottom: 10px;\n  --pops-panel-forms-container-item-margin-left-right: var(--pops-panel-forms-margin-left-right);\n  --pops-panel-forms-container-li-border-color: var(--pops-bd-color);\n  --pops-panel-forms-container-li-padding-top-bottom: 12px;\n  --pops-panel-forms-container-li-padding-left-right: 16px;\n\n  --pops-panel-forms-container-deepMenu-item-active-bg: #e9e9e9;\n}\n.pops[type-value=\"panel\"] {\n  color: var(--pops-color);\n  background: var(--pops-bg-color);\n}\n.pops[type-value] .pops-panel-title {\n  background: var(--panel-title-bg-color);\n}\n\n/* ↓panel的CSS↓ */\n/* 左侧的列表 */\naside.pops-panel-aside {\n  box-sizing: border-box;\n  flex-shrink: 0;\n  max-width: 200px;\n  min-width: 100px;\n  height: 100%;\n  background: var(--panel-aside-bg-color);\n  border-right: 1px solid var(--panel-aside-bg-color);\n  font-size: 0.9em;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\naside.pops-panel-aside .pops-panel-aside-top-container {\n  overflow: auto;\n}\naside.pops-panel-aside ul li {\n  margin: 6px 8px;\n  border-radius: 4px;\n  padding: 6px 10px;\n  cursor: default;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\naside.pops-panel-aside .pops-is-visited,\naside.pops-panel-aside ul li:not(.pops-panel-disabled-aside-hover-css):hover {\n  color: var(--panel-aside-hover-color);\n  background: var(--panel-aside-hover-bg-color);\n}\n/* 左侧的列表 */\n\n/* 底部的容器 */\n.pops-panel-bottom-wrapper {\n  background: var(--panel-aside-bg-color);\n  border-top: 1px solid #ebeef5;\n}\n.pops-panel-bottom-wrapper:has(.pops-panel-bottom-left-container:empty):has(.pops-panel-bottom-right-container:empty) {\n  border-top: 0;\n}\n.pops-panel-bottom-container {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n}\n.pops-panel-bottom-left-container {\n}\n.pops-panel-bottom-right-container {\n}\n.pops-panel-bottom-wrapper .pops-panel-bottom-item {\n  list-style-type: none;\n  margin: 6px 8px;\n  border-radius: 4px;\n  padding: 6px 10px;\n  cursor: default;\n}\n.pops-panel-bottom-wrapper:not(.pops-panel-disable-bottom-item-hover-css) .pops-panel-bottom-item:hover {\n  color: var(--panel-aside-hover-color);\n  background: var(--panel-aside-hover-bg-color);\n}\n/* 底部的容器 */\n\n.pops-panel-content {\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  overflow: auto;\n  flex-basis: auto;\n  box-sizing: border-box;\n  min-width: 0;\n  bottom: 0 !important;\n}\n\n.pops-panel-section-wrapper {\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\nsection.pops-panel-container {\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\nsection.pops-panel-container .pops-panel-container-header-ul,\nsection.pops-panel-container .pops-panel-deepMenu-container-header-ul {\n  border-bottom: 1px solid rgba(223, 223, 223, var(--pops-bg-opacity));\n  flex: 0 auto;\n}\nsection.pops-panel-container .pops-panel-container-header-ul li,\nsection.pops-panel-container .pops-panel-container-header-ul li.pops-panel-container-header-title-text {\n  display: flex;\n  justify-content: flex-start !important;\n  margin: 0px !important;\n  padding: var(--pops-panel-forms-header-padding-top-bottom)\n    calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right));\n  text-align: left;\n}\nsection.pops-panel-container ul.pops-panel-container-main-ul {\n  overflow: auto;\n  /*flex: 1;*/\n}\nsection.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: var(--pops-panel-forms-margin-top-bottom)\n    calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-margin-left-right));\n  gap: 10px;\n}\nsection.pops-panel-container .pops-panel-forms-container-item-header-text {\n  margin: 10px;\n  margin-left: calc(\n    var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right)\n  );\n  font-size: 0.9em;\n  text-align: left;\n  color: var(--pops-panel-forms-container-item-title-color);\n}\nsection.pops-panel-container li.pops-panel-forms-container-item {\n  /* 去除<li>左侧的圆点 */\n  display: block;\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist {\n  border-radius: var(--pops-panel-forms-container-item-border-radius);\n  background: var(--pops-panel-forms-container-item-bg-color);\n  margin: var(--pops-panel-forms-container-item-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist li {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--pops-panel-forms-container-li-padding-top-bottom)\n    var(--pops-panel-forms-container-li-padding-left-right);\n  margin: 0px 0px;\n  border-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\n  text-align: left;\n}\n/*section.pops-panel-container\n\t.pops-panel-forms-container-item\n\tul\n\tli.pops-panel-deepMenu-nav-item {\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px;\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right);\n\tborder-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\n}*/\nsection.pops-panel-container\n  .pops-panel-forms-container-item\n  ul.pops-panel-forms-container-item-formlist\n  li:last-child {\n  border: 0px;\n}\n/* 左侧的文字 */\nsection.pops-panel-container .pops-panel-item-left-text {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pops-panel-forms-container-item-left-text-gap);\n}\n\n/* 左侧的主文字 */\n/*section.pops-panel-container .pops-panel-item-left-main-text {\n\t\n}*/\n/* 左侧的描述文字 */\nsection.pops-panel-container .pops-panel-item-left-desc-text {\n  font-size: var(--pops-panel-forms-container-item-left-desc-text-size);\n  color: var(--pops-panel-forms-container-item-left-desc-text-color);\n}\n\n/* 折叠面板 */\nsection.pops-panel-container .pops-panel-forms-fold {\n  border-radius: var(--pops-panel-forms-container-item-border-radius);\n  background: var(--pops-panel-forms-container-item-bg-color);\n  margin: var(--pops-panel-forms-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\n}\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container {\n  display: flex;\n  align-items: center;\n  fill: #6c6c6c;\n  justify-content: space-between;\n  margin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;\n  padding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;\n}\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-fold-container-icon {\n  transform: rotate(90deg);\n}\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container-icon {\n  width: 15px;\n  height: 15px;\n  display: flex;\n  align-items: center;\n  transform: rotate(-90deg);\n  transition: transform 0.3s;\n}\n/* 折叠状态 */\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-container-item-formlist {\n  height: 0;\n}\n/* 非折叠状态 */\nsection.pops-panel-container .pops-panel-forms-fold ul.pops-panel-forms-container-item-formlist {\n  margin: 0;\n}\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-container-item-formlist {\n  transition: height 0.3s;\n  overflow: hidden;\n  border-radius: unset;\n  background: unset;\n  margin: 0;\n  height: calc-size(auto, size);\n}\n/* 折叠面板 */\n\n/* 姑且认为小于600px的屏幕为移动端 */\n@media (max-width: 600px) {\n  /* 兼容移动端CSS */\n  .pops[type-value=\"panel\"] {\n    --pops-panel-forms-margin-left-right: 10px;\n  }\n  .pops[type-value=\"panel\"] {\n    width: 92%;\n    width: 92vw;\n    width: 92dvw;\n  }\n  .pops[type-value=\"panel\"] .pops-panel-content aside.pops-panel-aside {\n    max-width: 20%;\n    min-width: auto;\n  }\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item > div {\n    text-align: left;\n    --pops-panel-forms-margin-left-right: 0px;\n  }\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item ul {\n    margin: 0px !important;\n  }\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul > li {\n    margin: 10px 10px;\n  }\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul > li div:nth-child(2) {\n    max-width: 55%;\n  }\n  .pops[type-value=\"panel\"] .pops-panel-select .el-select__selected-item.el-select__placeholder {\n    max-width: -moz-available;\n    max-width: -webkit-fill-available;\n  }\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul > li .pops-panel-input span.pops-panel-input__suffix {\n    padding: 0 4px;\n  }\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-select select {\n    min-width: 88px !important;\n    width: -moz-available;\n    width: -webkit-fill-available;\n  }\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-container-header-ul li {\n    font-size: 16px;\n  }\n  .pops[type-value=\"panel\"] .pops-panel-title p[pops],\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul li,\n  .pops[type-value=\"panel\"] aside.pops-panel-aside ul li {\n    font-size: 14px;\n  }\n}\n/* switch的CSS */\n.pops-panel-switch {\n  --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\n  --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\n  --panel-switch-circle-color: #dcdfe6;\n  --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n  --panel-switch-checked-circle-color: #409eff;\n  --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\n  --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\n}\n.pops-panel-switch {\n  display: inline-flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  position: relative;\n  font-size: 14px;\n  line-height: normal;\n  align-content: center;\n  height: 32px;\n  vertical-align: middle;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n.pops-panel-switch input.pops-panel-switch__input {\n  position: absolute;\n  width: 0;\n  height: 0;\n  opacity: 0;\n  margin: 0;\n}\n.pops-panel-switch:has(input.pops-panel-switch__input:disabled),\n.pops-panel-switch[data-disabled],\n.pops-panel-switch[data-disabled] .pops-panel-switch__core,\n.pops-panel-switch input.pops-panel-switch__input:disabled + .pops-panel-switch__core {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n.pops-panel-switch span.pops-panel-switch__core {\n  display: inline-flex;\n  position: relative;\n  align-items: center;\n  min-width: 40px;\n  height: 20px;\n  border: 1px solid var(--panel-switch-core-bd-color);\n  outline: 0;\n  border-radius: 10px;\n  box-sizing: border-box;\n  background: var(--panel-switch-core-bg-color);\n  cursor: pointer;\n  transition:\n    border-color 0.3s,\n    background-color 0.3s;\n}\n.pops-panel-switch .pops-panel-switch__action {\n  position: absolute;\n  left: 1px;\n  border-radius: 100%;\n  transition: all 0.3s;\n  width: 16px;\n  height: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--panel-switch-circle-bg-color);\n  color: var(--panel-switch-circle-color);\n}\n.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {\n  border-color: var(--panel-switch-checked-core-bd-color);\n  background-color: var(--panel-switch-checked-core-bg-color);\n}\n.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {\n  left: calc(100% - 17px);\n  color: var(--panel-switch-checked-circle-color);\n}\n/* switch的CSS */\n\n/* slider旧的CSS */\nsection.pops-panel-container .pops-panel-slider:has(> input[type=\"range\"]) {\n  overflow: hidden;\n  height: 25px;\n  line-height: normal;\n  align-content: center;\n  display: flex;\n  align-items: center;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"] {\n  height: 6px;\n  background: rgb(228, 231, 237, var(--pops-bg-opacity));\n  outline: 0;\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-webkit-slider-thumb {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\n  background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n  box-shadow:\n    0 0 2px rgba(0, 0, 0, 0.3),\n    0 3px 5px rgba(0, 0, 0, 0.2);\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n  border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-thumb {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  border: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));\n  background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n  box-shadow:\n    0 0 2px rgba(0, 0, 0, 0.3),\n    0 3px 5px rgba(0, 0, 0, 0.2);\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-progress {\n  height: 6px;\n  border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\n}\n/* slider旧的CSS */\n\n/* slider的CSS */\n.pops-slider {\n  --pops-slider-color-white: #ffffff;\n  --pops-slider-color-primary: #409eff;\n  --pops-slider-color-info: #909399;\n  --pops-slider-text-color-placeholder: #a8abb2;\n  --pops-slider-border-color-light: #e4e7ed;\n  --pops-slider-border-radius-circle: 100%;\n  --pops-slider-transition-duration-fast: 0.2s;\n\n  --pops-slider-main-bg-color: var(--pops-slider-color-primary);\n  --pops-slider-runway-bg-color: var(--pops-slider-border-color-light);\n  --pops-slider-stop-bg-color: var(--pops-slider-color-white);\n  --pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);\n  --pops-slider-border-radius: 3px;\n  --pops-slider-height: 6px;\n  --pops-slider-button-size: 20px;\n  --pops-slider-button-wrapper-size: 36px;\n  --pops-slider-button-wrapper-offset: -15px;\n}\n\n.pops-slider {\n  width: 100%;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.pops-slider-width {\n  flex: 0 0 52%;\n  margin-left: 10px;\n}\n\n.pops-slider__runway {\n  flex: 1;\n  height: var(--pops-slider-height);\n  background-color: var(--pops-slider-runway-bg-color);\n  border-radius: var(--pops-slider-border-radius);\n  position: relative;\n  cursor: pointer;\n}\n\n.pops-slider__runway.show-input {\n  margin-right: 30px;\n  width: auto;\n}\n\n.pops-slider__runway.pops-slider-is-disabled {\n  cursor: default;\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {\n  background-color: var(--pops-slider-disabled-color);\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {\n  border-color: var(--pops-slider-disabled-color);\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\n  cursor: not-allowed;\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\n  transform: scale(1);\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\n  cursor: not-allowed;\n}\n\n.pops-slider__input {\n  flex-shrink: 0;\n  width: 130px;\n}\n\n.pops-slider__bar {\n  height: var(--pops-slider-height);\n  background-color: var(--pops-slider-main-bg-color);\n  border-top-left-radius: var(--pops-slider-border-radius);\n  border-bottom-left-radius: var(--pops-slider-border-radius);\n  position: absolute;\n}\n\n.pops-slider__button-wrapper {\n  height: var(--pops-slider-button-wrapper-size);\n  width: var(--pops-slider-button-wrapper-size);\n  position: absolute;\n  z-index: 1;\n  top: var(--pops-slider-button-wrapper-offset);\n  transform: translate(-50%);\n  background-color: transparent;\n  text-align: center;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  line-height: normal;\n  outline: none;\n}\n\n.pops-slider__button-wrapper:after {\n  display: inline-block;\n  content: \"\";\n  height: 100%;\n  vertical-align: middle;\n}\n\n.pops-slider__button:hover,\n.pops-slider__button.hover {\n  cursor: grab;\n}\n\n.pops-slider__button {\n  display: inline-block;\n  width: var(--pops-slider-button-size);\n  height: var(--pops-slider-button-size);\n  vertical-align: middle;\n  border: solid 2px var(--pops-slider-main-bg-color);\n  background-color: var(--pops-slider-color-white);\n  border-radius: 50%;\n  box-sizing: border-box;\n  transition: var(--pops-slider-transition-duration-fast);\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.pops-slider__button:hover,\n.pops-slider__button.hover,\n.pops-slider__button.dragging {\n  transform: scale(1.2);\n}\n\n.pops-slider__button:hover,\n.pops-slider__button.hover {\n  cursor: grab;\n}\n\n.pops-slider__button.dragging {\n  cursor: grabbing;\n}\n\n.pops-slider__stop {\n  position: absolute;\n  height: var(--pops-slider-height);\n  width: var(--pops-slider-height);\n  border-radius: var(--pops-slider-border-radius-circle);\n  background-color: var(--pops-slider-stop-bg-color);\n  transform: translate(-50%);\n}\n\n.pops-slider__marks {\n  top: 0;\n  left: 12px;\n  width: 18px;\n  height: 100%;\n}\n\n.pops-slider__marks-text {\n  position: absolute;\n  transform: translate(-50%);\n  font-size: 14px;\n  color: var(--pops-slider-color-info);\n  margin-top: 15px;\n  white-space: pre;\n}\n\n.pops-slider.is-vertical {\n  position: relative;\n  display: inline-flex;\n  width: auto;\n  height: 100%;\n  flex: 0;\n}\n\n.pops-slider.is-vertical .pops-slider__runway {\n  width: var(--pops-slider-height);\n  height: 100%;\n  margin: 0 16px;\n}\n\n.pops-slider.is-vertical .pops-slider__bar {\n  width: var(--pops-slider-height);\n  height: auto;\n  border-radius: 0 0 3px 3px;\n}\n\n.pops-slider.is-vertical .pops-slider__button-wrapper {\n  top: auto;\n  left: var(--pops-slider-button-wrapper-offset);\n  transform: translateY(50%);\n}\n\n.pops-slider.is-vertical .pops-slider__stop {\n  transform: translateY(50%);\n}\n\n.pops-slider.is-vertical .pops-slider__marks-text {\n  margin-top: 0;\n  left: 15px;\n  transform: translateY(50%);\n}\n\n.pops-slider--large {\n  height: 40px;\n}\n\n.pops-slider--small {\n  height: 24px;\n}\n/* slider的CSS */\n\n/* input的CSS */\n.pops-panel-input {\n  --el-disabled-text-color: #a8abb2;\n  --el-disabled-bg-color: #f5f7fa;\n  --el-disabled-border-color: #e4e7ed;\n  --el-color-danger: #f56c6c;\n\n  --pops-panel-components-input-border-radius: 4px;\n  --pops-panel-components-input-text-color: #000000;\n  --pops-panel-components-input-text-bg-color: transparent;\n  --pops-panel-components-input-text-default-padding: 8px;\n  --pops-panel-components-input-bd-color: #dcdfe6;\n  --pops-panel-components-input-bg-color: #ffffff;\n  --pops-panel-components-input-hover-bd-color: #c0c4cc;\n  --pops-panel-components-input-focus-bd-color: #409eff;\n  --pops-panel-components-input-suffix-color: #a8abb2;\n  --pops-panel-components-input-suffix-bg-color: #ffffff;\n}\n.pops-panel-input {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  position: relative;\n  box-shadow: none;\n  width: 200px;\n  border: 0px;\n}\n.pops-panel-input_inner {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border: 1px solid var(--pops-panel-components-input-bd-color);\n  border-radius: var(--pops-panel-components-input-border-radius);\n  background-color: var(--pops-panel-components-input-bg-color);\n  box-shadow: none;\n}\n.pops-panel-input_inner:hover {\n  border: 1px solid var(--pops-panel-components-input-hover-bd-color);\n}\n.pops-panel-input:has(input:disabled):hover {\n  --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\n}\n.pops-panel-input_inner:has(input:focus) {\n  outline: 0;\n  border: 1px solid var(--pops-panel-components-input-focus-bd-color);\n  border-radius: var(--pops-panel-components-input-border-radius);\n  box-shadow: none;\n}\n.pops-panel-input input {\n  display: inline-flex;\n  justify-content: center;\n  text-align: start;\n  align-items: center;\n  align-content: center;\n  white-space: nowrap;\n  cursor: text;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  vertical-align: middle;\n  -webkit-appearance: none;\n  appearance: none;\n  color: var(--pops-panel-components-input-text-color);\n  background-color: var(--pops-panel-components-input-text-bg-color);\n  outline: 0;\n  transition: 0.1s;\n  border: 0;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: normal;\n  height: 32px;\n  width: 100%;\n  flex: 1;\n  /*margin-right: calc(1em + 8px);*/\n  margin: 0px;\n  padding: var(--pops-panel-components-input-text-default-padding);\n}\n.pops-panel-input input[type=\"search\"]::-webkit-search-cancel-button {\n  -webkit-appearance: none;\n  display: none;\n}\n/* 颜色选择器不需要那么宽 */\n.pops-panel-input:has(input[type=\"color\"]) {\n  width: 50px;\n}\n.pops-panel-input input[type=\"color\"] {\n  padding: 0px;\n}\n.pops-panel-input_inner:has(input[type=\"file\"]) {\n  border: 0px;\n  background: transparent;\n}\n.pops-panel-input input[type=\"file\"] {\n  padding: 0px;\n  line-height: 32px;\n}\n.pops-panel-input span.pops-panel-input__suffix {\n  display: inline-flex;\n  white-space: nowrap;\n  flex-shrink: 0;\n  flex-wrap: nowrap;\n  height: 100%;\n  height: -moz-available;\n  height: -webkit-fill-available;\n  text-align: center;\n  color: var(--pops-panel-components-input-suffix-color);\n  background: var(--pops-panel-components-input-suffix-bg-color);\n  transition: all 0.3s;\n  pointer-events: none;\n  padding: 0 8px;\n  position: relative;\n  right: 0px;\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border: 1px solid transparent;\n}\n.pops-panel-input span.pops-panel-input__suffix-inner {\n  pointer-events: all;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n/* 如果包含清空图标的按钮，则默认隐藏清空图标，当:hover、:focus、:focus-within、:active时显示清空图标 */\n.pops-panel-input span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\n  display: none;\n}\n.pops-panel-input:hover span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\n.pops-panel-input:focus span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\n.pops-panel-input:focus-within span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\n.pops-panel-input:active span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\n  display: inline-flex;\n}\n/* 当清空图标显示时或查看图标存在时，则隐藏输入框的padding-right */\n.pops-panel-input:hover:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\n.pops-panel-input:focus:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\n.pops-panel-input:focus-within:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\n.pops-panel-input:active:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\n.pops-panel-input:has(span.pops-panel-input__suffix svg[data-type=\"view\"]) input,\n.pops-panel-input:has(span.pops-panel-input__suffix svg[data-type=\"hide\"]) input {\n  padding-right: 0;\n}\n.pops-panel-input .pops-panel-icon {\n  cursor: pointer;\n}\n.pops-panel-input .pops-panel-icon {\n  height: inherit;\n  line-height: normal;\n  align-content: center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: all 0.3s;\n}\n.pops-panel-input .pops-panel-icon svg {\n  height: 1em;\n  width: 1em;\n}\n\n.pops-input-disabled {\n  background-color: var(--pops-components-is-disabled-bg-color);\n  border-radius: 4px;\n}\n.pops-panel-input.pops-input-disabled:hover {\n  --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\n}\n.pops-panel-input input:disabled,\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  color: var(--el-disabled-text-color);\n  -webkit-text-fill-color: var(--el-disabled-text-color);\n  cursor: not-allowed;\n}\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\n  display: none;\n}\n/* 校验样式 */\n.pops-panel-input:has(.pops-panel-input-valid-error) {\n  --pops-panel-components-input-bd-color: var(--el-color-danger) !important;\n  --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\n  --pops-panel-components-input-focus-bd-color: var(--pops-panel-components-input-bd-color);\n}\n.pops-panel-input .pops-panel-input-valid-error {\n  width: 100%;\n  color: var(--el-color-danger);\n  font-weight: 500;\n  font-size: 0.8em;\n  box-sizing: border-box;\n  vertical-align: middle;\n  display: inline-flex;\n  position: relative;\n}\n/* input的CSS */\n\n/* textarea的CSS */\n.pops-panel-textarea {\n  --pops-panel-components-textarea-text-color: #000000;\n  --pops-panel-components-textarea-text-bg-color: #ffffff;\n  --pops-panel-components-textarea-bd-color: #dcdfe6;\n  --pops-panel-components-textarea-hover-bd-color: #c0c4cc;\n  --pops-panel-components-textarea-focus-bd-color: #409eff;\n}\n.pops-panel-textarea textarea {\n  width: 100%;\n  /*vertical-align: bottom;*/\n  position: relative;\n  display: block;\n  resize: none;\n  padding: 5px 11px;\n  /*line-height: 1;*/\n  box-sizing: border-box;\n  font-size: inherit;\n  font-family: inherit;\n  color: var(--pops-panel-components-textarea-text-color);\n  background-color: var(--pops-panel-components-textarea-text-bg-color);\n  background-image: none;\n  -webkit-appearance: none;\n  appearance: none;\n  box-shadow: none;\n  border-radius: 0;\n  transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  border: 1px solid var(--pops-panel-components-textarea-bd-color);\n}\n.pops-panel-textarea textarea:hover {\n  border-color: var(--pops-panel-components-textarea-hover-bd-color);\n}\n.pops-panel-textarea:has(textarea:disabled):hover {\n  --pops-panel-components-textarea-hover-bd-color: var(--pops-panel-components-textarea-bd-color);\n}\n.pops-panel-textarea-disable {\n  --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color) !important;\n  --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\n}\n.pops-panel-textarea-disable textarea {\n  cursor: not-allowed;\n}\n.pops-panel-textarea textarea:focus {\n  outline: 0;\n  border-color: var(--pops-panel-components-textarea-focus-bd-color);\n}\n/* textarea的CSS */\n\n/* select的CSS */\n.pops-panel-select {\n  --pops-panel-components-select-disabled-text-color: #a8abb2;\n  --pops-panel-components-select-text-color: #000000;\n  --pops-panel-components-select-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\n  --pops-panel-components-select-hover-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\n  --pops-panel-components-select-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n}\n.pops-panel-select {\n  border: 0;\n}\n.pops-panel-select select {\n  width: 100%;\n  height: 32px;\n  line-height: normal;\n  align-content: center;\n  min-width: 200px;\n  border: 1px solid var(--pops-panel-components-select-bd-color);\n  border-radius: 5px;\n  text-align: center;\n  outline: 0;\n  color: var(--pops-panel-components-select-text-color);\n  background-color: var(--pops-panel-components-select-bg-color);\n  box-shadow: none;\n}\n.pops-panel-select select:hover {\n  border: 1px solid var(--pops-panel-components-select-hover-bd-color);\n}\n.pops-panel-select-disable {\n  --pops-panel-components-select-text-color: var(--pops-components-is-disabled-text-color);\n  --pops-panel-components-select-bg-color: var(--pops-components-is-disabled-bg-color);\n}\n.pops-panel-select-disable select {\n  cursor: not-allowed;\n}\n.pops-panel-select-disable select:hover {\n  box-shadow: none;\n  --pops-panel-components-select-hover-bd-color: var(--pops-panel-components-select-bd-color);\n}\n.pops-panel-select select:focus {\n  border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\n  box-shadow: none;\n}\n/* select的CSS */\n\n/* select dialog 的CSS */\n.pops-panel-select[data-mode=\"dialog\"] {\n}\n/* select dialog 的CSS */\n\n/* select horizontal 的CSS */\n.pops-panel-select[data-mode=\"horizontal\"] {\n  --pops-panel-components-select-horizontal-selected-text-color: #626aef;\n  --pops-panel-components-select-horizontal-selected-bg-color: #eff0fd;\n}\n.pops-panel-select[data-mode=\"horizontal\"] .el-select__wrapper {\n  padding: 0;\n  gap: 0;\n  border: 0;\n}\n.pops-panel-select[data-mode=\"horizontal\"] .select-item {\n  flex: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 1px solid var(--el-border-color);\n  height: -moz-available;\n  height: -webkit-fill-available;\n  border-left: 0;\n}\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:hover {\n  color: var(--el-color-primary);\n}\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:first-child {\n  border-left: 1px solid var(--el-border-color);\n  border-top-left-radius: var(--el-border-radius-base);\n  border-bottom-left-radius: var(--el-border-radius-base);\n}\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:last-child {\n  border-top-right-radius: var(--el-border-radius-base);\n  border-bottom-right-radius: var(--el-border-radius-base);\n}\n.pops-panel-select[data-mode=\"horizontal\"] .select-item.select__selected-item {\n  color: var(--pops-panel-components-select-horizontal-selected-text-color);\n  background-color: var(--pops-panel-components-select-horizontal-selected-bg-color);\n  border-color: var(--pops-panel-components-select-horizontal-selected-bg-color);\n}\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:has(+ .select__selected-item) {\n  border-right: 0;\n}\n.pops-panel-select[data-mode=\"horizontal\"] .select-item[disabled] {\n  color: var(--pops-panel-components-select-disabled-text-color);\n  --pops-panel-components-select-horizontal-selected-text-color: var(\n    --pops-panel-components-select-disabled-text-color\n  );\n  cursor: not-allowed;\n  background: unset;\n}\n/* select horizontal 的CSS */\n\n/* select-multiple的CSS*/\n.pops-panel-select-multiple,\n.pops-panel-select {\n  --el-border-radius-base: 4px;\n  --el-fill-color-blank: #ffffff;\n  --el-transition-duration: 0.3s;\n  --el-border-color: #cbcbcb;\n  --el-text-color-placeholder: #a8abb2;\n  --color: inherit;\n  --el-select-input-color: #a8abb2;\n  --el-select-input-font-size: 14px;\n  --el-text-color-regular: #606266;\n  --el-color-info: #909399;\n  --el-color-info-light-9: #f4f4f5;\n  --el-color-info-light-8: #e9e9eb;\n  --el-color-primary-light-9: #ecf5ff;\n  --el-color-primary-light-8: #d9ecff;\n  --el-color-primary: #409eff;\n  --el-color-white: #ffffff;\n  width: 200px;\n}\n.pops-panel-select .el-select__wrapper,\n.pops-panel-select-multiple .el-select__wrapper {\n  display: flex;\n  align-items: center;\n  position: relative;\n  box-sizing: border-box;\n  cursor: pointer;\n  text-align: left;\n  font-size: 14px;\n  padding: 4px 12px;\n  gap: 6px;\n  min-height: 32px;\n  line-height: normal;\n  align-content: center;\n  border-radius: var(--el-border-radius-base);\n  background-color: var(--el-fill-color-blank);\n  transition: var(--el-transition-duration);\n  transform: translateZ(0);\n  border: 1px solid var(--el-border-color);\n}\n.pops-panel-select .el-select__wrapper.is-focused,\n.pops-panel-select-multiple .el-select__wrapper.is-focused {\n  --el-border-color: var(--el-color-primary);\n}\n.pops-panel-select .el-select__selection,\n.pops-panel-select-multiple .el-select__selection {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  gap: 6px;\n}\n.pops-panel-select .el-select__selection[data-selected-text-align=\"left\"] {\n  justify-content: left;\n}\n.pops-panel-select .el-select__selection[data-selected-text-align=\"center\"] {\n  justify-content: center;\n}\n.pops-panel-select .el-select__selection[data-selected-text-align=\"right\"] {\n  justify-content: right;\n}\n.pops-panel-select .el-select__selected-item,\n.pops-panel-select-multiple .el-select__selected-item {\n  display: flex;\n  flex-wrap: wrap;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n.pops-panel-select .el-select__selected-item span {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.pops-panel-select .el-select__selected-item.el-select__choose_tag .el-tag,\n.pops-panel-select-multiple .el-select__selected-item.el-select__choose_tag .el-tag {\n  max-width: 200px;\n}\n.pops-panel-select .el-select__input-wrapper,\n.pops-panel-select-multiple .el-select__input-wrapper {\n  max-width: 100%;\n}\n.pops-panel-select .el-select__selection.is-near,\n.pops-panel-select-multiple .el-select__selection.is-near {\n  margin-left: -8px;\n}\n.pops-panel-select .el-select__placeholder,\n.pops-panel-select-multiple .el-select__placeholder {\n  position: absolute;\n  display: block;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--el-input-text-color, var(--el-text-color-regular));\n}\n.pops-panel-select .el-select__placeholder.is-transparent,\n.pops-panel-select-multiple .el-select__placeholder.is-transparent {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  color: var(--el-text-color-placeholder);\n}\n.pops-panel-select .el-select__prefix,\n.pops-panel-select .el-select__suffix,\n.pops-panel-select-multiple .el-select__prefix,\n.pops-panel-select-multiple .el-select__suffix {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  gap: 6px;\n  color: var(--el-input-icon-color, var(--el-text-color-placeholder));\n}\n.pops-panel-select .el-icon,\n.pops-panel-select-multiple .el-icon {\n  --color: inherit;\n  height: 1em;\n  width: 1em;\n  line-height: normal;\n  align-content: center;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  fill: currentColor;\n  color: var(--color);\n  font-size: inherit;\n}\n.pops-panel-select .el-icon svg,\n.pops-panel-select-multiple .el-icon svg {\n  height: 1em;\n  width: 1em;\n}\n.pops-panel-select .el-select__caret,\n.pops-panel-select-multiple .el-select__caret {\n  color: var(--el-select-input-color);\n  font-size: var(--el-select-input-font-size);\n  transition: transform var(--el-transition-duration);\n  transform: rotate(0);\n  cursor: pointer;\n}\n/* 把箭头旋转 */\n.pops-panel-select[data-show-option] .el-select__caret,\n.pops-panel-select-multiple[data-show-option] .el-select__caret {\n  transform: rotate(180deg);\n}\n.pops-panel-select-multiple .el-tag {\n  --el-tag-font-size: 12px;\n  --el-tag-border-radius: 4px;\n  --el-tag-border-radius-rounded: 9999px;\n}\n.pops-panel-select-multiple .el-tag {\n  background-color: var(--el-tag-bg-color);\n  border-color: var(--el-tag-border-color);\n  color: var(--el-tag-text-color);\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  vertical-align: middle;\n  height: 24px;\n  padding: 0 9px;\n  font-size: var(--el-tag-font-size);\n  line-height: normal;\n  align-content: center;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: var(--el-tag-border-radius);\n  box-sizing: border-box;\n  white-space: nowrap;\n  --el-icon-size: 14px;\n  --el-tag-bg-color: var(--el-color-primary-light-9);\n  --el-tag-border-color: var(--el-color-primary-light-8);\n  --el-tag-hover-color: var(--el-color-primary);\n}\n.pops-panel-select-multiple .el-select__selection .el-tag {\n  cursor: pointer;\n  border-color: transparent;\n}\n.pops-panel-select-multiple .el-tag.el-tag--info {\n  --el-tag-bg-color: var(--el-color-info-light-9);\n  --el-tag-border-color: var(--el-color-info-light-8);\n  --el-tag-hover-color: var(--el-color-info);\n}\n.pops-panel-select-multiple .el-tag.el-tag--info {\n  --el-tag-text-color: var(--el-color-info);\n}\n.pops-panel-select-multiple .el-tag.is-closable {\n  padding-right: 5px;\n}\n.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {\n  min-width: 0;\n}\n.pops-panel-select-multiple .el-tag .el-tag__close {\n  flex-shrink: 0;\n  color: var(--el-tag-text-color);\n}\n.pops-panel-select-multiple .el-tag .el-tag__close:hover {\n  color: var(--el-color-white);\n  background-color: var(--el-tag-hover-color);\n}\n.pops-panel-select-multiple .el-tag .el-icon {\n  border-radius: 50%;\n  cursor: pointer;\n  font-size: calc(var(--el-icon-size) - 2px);\n  height: var(--el-icon-size);\n  width: var(--el-icon-size);\n}\n.pops-panel-select-multiple .el-tag .el-tag__close {\n  margin-left: 6px;\n}\n.pops-panel-select-multiple .el-select__tags-text {\n  display: block;\n  line-height: normal;\n  align-content: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n/* 禁用样式 */\n.pops-panel-select-disable {\n  --el-fill-color-blank: #f5f7fa;\n  --color: #a8abb2;\n  --el-border-color: #cbcbcb;\n}\n.pops-panel-select-disable .el-tag.el-tag--info {\n  --el-tag-bg-color: #e7e7e7;\n  --el-tag-text-color: var(--pops-components-is-disabled-text-color);\n}\n.pops-panel-select-disable .el-select__selection .el-tag,\n.pops-panel-select-disable .el-tag .el-tag__close:hover,\n.pops-panel-select-disable .el-select__wrapper,\n.pops-panel-select-disable .el-select__caret {\n  cursor: not-allowed;\n}\n/* select-multiple的CSS*/\n\n/* deepMenu的css */\n.pops-panel-deepMenu-nav-item {\n  cursor: pointer;\n}\n.pops-panel-deepMenu-nav-item:active {\n  background: var(--pops-panel-forms-container-deepMenu-item-active-bg);\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:active {\n  padding: var(--pops-panel-forms-container-li-padding-top-bottom)\n    var(--pops-panel-forms-container-li-padding-left-right);\n  margin: 0px;\n}\n/* 去除上个兄弟item的底部边框颜色 */\nsection.pops-panel-container .pops-panel-forms-container-item ul li:has(+ .pops-panel-deepMenu-nav-item:active) {\n  border-bottom: 1px solid transparent;\n}\n/* 第一个和最后一个跟随圆角 */\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:first-child:active {\n  border-top-left-radius: var(--pops-panel-forms-container-item-border-radius);\n  border-top-right-radius: var(--pops-panel-forms-container-item-border-radius);\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:last-child:active {\n  border-bottom-left-radius: var(--pops-panel-forms-container-item-border-radius);\n  border-bottom-right-radius: var(--pops-panel-forms-container-item-border-radius);\n}\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {\n  display: flex;\n  align-items: center;\n  color: #6c6c6c;\n  fill: #6c6c6c;\n}\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {\n  width: 15px;\n  height: 15px;\n  display: flex;\n  align-items: center;\n}\nsection.pops-panel-deepMenu-container .pops-panel-container-header-ul li.pops-panel-deepMenu-container-header {\n  display: flex;\n  align-items: center;\n  width: -moz-available;\n  width: -webkit-fill-available;\n  padding: var(--pops-panel-forms-header-padding-top-bottom)\n    calc(\n      var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right) -\n        var(--pops-panel-forms-header-icon-size)\n    );\n  gap: 0px;\n}\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\n  width: var(--pops-panel-forms-header-icon-size);\n  height: var(--pops-panel-forms-header-icon-size);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n/* 修复safari上图标大小未正常显示 */\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon > svg {\n  width: inherit;\n  height: inherit;\n}\n/* deepMenu的css */\n\n/* 文字对齐 */\n.pops-panel-item-left-desc-text:has(code) {\n  display: flex;\n  align-items: baseline;\n  flex-wrap: wrap;\n}\n\n@media (prefers-color-scheme: dark) {\n  .pops[type-value=\"panel\"] {\n    --pops-bg-color: #000000;\n    --pops-color: #f2f2f2;\n    --panel-title-bg-color: #000000;\n    --panel-aside-bg-color: #262626;\n    --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\n    --pops-panel-forms-container-item-bg-color: #262626;\n    --pops-panel-forms-container-item-title-color: #c1c1c1;\n\n    --pops-panel-forms-container-li-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\n    --pops-panel-forms-container-deepMenu-item-active-bg: #333333;\n  }\n  .pops[type-value=\"panel\"] .pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\n    fill: #f2f2f2;\n  }\n\n  /* switch的CSS */\n  .pops-panel-switch {\n    --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\n    --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\n    --panel-switch-circle-color: #dcdfe6;\n    --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n    --panel-switch-checked-circle-color: #409eff;\n    --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\n    --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\n  }\n  /* select的CSS */\n  .pops-panel-select {\n    --pops-panel-components-select-text-color: #f2f2f2;\n    --pops-panel-components-select-bd-color: rgb(51, 51, 51, var(--pops-bd-opacity));\n    --pops-panel-components-select-bg-color: #141414;\n  }\n  /* select-multiple的CSS*/\n  .pops-panel-select-multiple {\n    --el-fill-color-blank: #141414;\n    --el-border-color: #4c4d4f;\n    --el-text-color-placeholder: #a8abb2;\n    --el-select-input-color: #a8abb2;\n    --el-text-color-regular: #606266;\n    --el-color-info: #909399;\n    --el-color-info-light-8: #e9e9eb;\n    --el-color-primary-light-9: #ecf5ff;\n    --el-color-primary-light-8: #d9ecff;\n    --el-color-primary: #409eff;\n    --el-color-white: #ffffff;\n  }\n  .pops-panel-select-multiple .el-tag {\n    --el-color-info-light-9: #202121;\n  }\n  .pops-panel-select-multiple-disable {\n    --el-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\n  }\n  .pops-panel-select-multiple-disable .el-tag.el-tag--info {\n    --el-tag-bg-color: #2f2f2f;\n  }\n  /* select-multiple的CSS*/\n  /* slider的CSS */\n  .pops-slider {\n    --pops-slider-border-color-light: #414243;\n  }\n  /* input的CSS */\n  .pops-panel-input {\n    --pops-panel-components-input-text-color: #f2f2f2;\n    --pops-panel-components-input-bd-color: #4f5052;\n    --pops-panel-components-input-bg-color: #141414;\n    --pops-panel-components-input-hover-bd-color: #6f7175;\n    --pops-panel-components-input-focus-bd-color: #409eff;\n    --pops-panel-components-input-suffix-color: #a8abb2;\n    --pops-panel-components-input-suffix-bg-color: var(--pops-dark-color);\n  }\n  /* textarea的CSS */\n  .pops-panel-textarea {\n    --pops-panel-components-textarea-text-color: #f2f2f2;\n    --pops-panel-components-textarea-text-bg-color: #141414;\n    --pops-panel-components-textarea-bd-color: #4f5052;\n    --pops-panel-components-textarea-hover-bd-color: #6f7175;\n    --pops-panel-components-textarea-focus-bd-color: #409eff;\n  }\n  .pops-panel-textarea-disable {\n    --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\n    --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color);\n  }\n  /* slider */\n  .pops-slider {\n    --pops-slider-text-color-placeholder: #8d9095;\n  }\n}\n";
 
             var rightClickMenuCSS = ".pops-rightClickMenu {\n  --pops-right-context-color: #000000;\n  --pops-right-context-bg-color: rgb(255, 255, 255, 0.733);\n  --pops-right-context-backdrop-filter: blur(10px);\n  --pops-right-context-z-index: 10000;\n  --pops-right-context-bd-radius: 6px;\n  --pops-right-context-menu-shadow-color: rgb(114, 114, 114, 0.251);\n  --pops-right-context-menu-row-bd-radius: 6px;\n  --pops-right-context-menu-row-visited-color: rgb(0, 0, 0, 0.067);\n  --pops-right-context-menu-row-hover-color: rgb(0, 0, 0, 0.067);\n}\n.pops-rightClickMenu * {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  -webkit-tap-highlight-color: transparent;\n  scrollbar-width: thin;\n}\n.pops-rightClickMenu {\n  position: fixed;\n  z-index: var(--pops-right-context-z-index);\n  text-align: center;\n  border-radius: var(--pops-right-context-bd-radius);\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--pops-right-context-color);\n  background: var(--pops-right-context-bg-color);\n  box-shadow: 0 0.25rem 0.5rem 0.125rem var(--pops-right-context-menu-shadow-color);\n  -webkit-backdrop-filter: var(--pops-right-context-backdrop-filter);\n  backdrop-filter: var(--pops-right-context-backdrop-filter);\n}\n.pops-rightClickMenu[data-position=\"absolute\"] {\n  position: absolute;\n}\n/* scale动画 */\n.pops-rightClickMenu-anim-scale {\n  transition:\n    opacity 150ms cubic-bezier(0.2, 0, 0.2, 1),\n    transform 150ms cubic-bezier(0.2, 0, 0.2, 1);\n  transform: scale(0.85);\n}\n.pops-rightClickMenu-anim-scale-open {\n  transform: scale(1);\n}\n.pops-rightClickMenu-anim-scale-not-open {\n  opacity: 0;\n}\n/* 展开动画 */\n.pops-rightClickMenu-anim-grid {\n  display: grid;\n  transition: 0.3s;\n  grid-template-rows: 0fr;\n}\n.pops-rightClickMenu-anim-show {\n  grid-template-rows: 1fr;\n}\n.pops-rightClickMenu-is-visited {\n  background: var(--pops-right-context-menu-row-visited-color);\n}\ni.pops-rightClickMenu-icon {\n  height: 1em;\n  width: 1em;\n  line-height: normal;\n  align-content: center;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  fill: currentColor;\n  color: inherit;\n  font-size: inherit;\n  margin-right: 6px;\n}\ni.pops-rightClickMenu-icon[is-loading=\"true\"] {\n  animation: rotating 2s linear infinite;\n}\n.pops-rightClickMenu li:hover {\n  background: var(--pops-right-context-menu-row-hover-color);\n  cursor: pointer;\n}\n.pops-rightClickMenu ul {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  overflow: hidden;\n}\n.pops-rightClickMenu ul li {\n  padding: 5px 10px;\n  margin: 5px 5px;\n  border-radius: var(--pops-right-context-menu-row-bd-radius);\n  display: flex;\n  width: -moz-available;\n  width: -webkit-fill-available;\n  text-align: left;\n  align-items: center;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  /*.pops-rightClickMenu {\n\t\t--pops-right-context-menu-shadow-color: #3c3c3c;\n\t}*/\n}\n@media (hover: hover) {\n  .pops-rightClickMenu ul li:active {\n    transform: scale(0.98);\n  }\n}\n";
 
@@ -4156,6 +3958,8 @@ System.register('pops', [], (function (exports) {
                     dragEndCallBack() { },
                     forbiddenScroll: false,
                     style: null,
+                    lightStyle: null,
+                    darkStyle: null,
                     beforeAppendToPageCallBack() { },
                 };
             };
@@ -4362,6 +4166,8 @@ System.register('pops', [], (function (exports) {
                     dragEndCallBack() { },
                     forbiddenScroll: false,
                     style: null,
+                    lightStyle: null,
+                    darkStyle: null,
                     beforeAppendToPageCallBack() { },
                 };
             };
@@ -4567,6 +4373,8 @@ System.register('pops', [], (function (exports) {
                     closeDelay: 0,
                     borderRadius: 0,
                     style: null,
+                    lightStyle: null,
+                    darkStyle: null,
                     beforeAppendToPageCallBack() { },
                     forbiddenScroll: false,
                 };
@@ -4786,6 +4594,8 @@ System.register('pops', [], (function (exports) {
                     forbiddenScroll: false,
                     isAbsolute: false,
                     style: null,
+                    lightStyle: null,
+                    darkStyle: null,
                     addIndexCSS: true,
                 };
             };
@@ -5012,6 +4822,8 @@ System.register('pops', [], (function (exports) {
                     dragEndCallBack() { },
                     forbiddenScroll: false,
                     style: null,
+                    lightStyle: null,
+                    darkStyle: null,
                     beforeAppendToPageCallBack() { },
                 };
             };
@@ -5942,6 +5754,8 @@ System.register('pops', [], (function (exports) {
                         },
                     },
                     style: null,
+                    lightStyle: null,
+                    darkStyle: null,
                     beforeAppendToPageCallBack() { },
                 };
             };
@@ -7063,6 +6877,8 @@ System.register('pops', [], (function (exports) {
                     dragEndCallBack() { },
                     forbiddenScroll: false,
                     style: null,
+                    lightStyle: null,
+                    darkStyle: null,
                     beforeAppendToPageCallBack() { },
                 };
             };
@@ -7173,6 +6989,8 @@ System.register('pops', [], (function (exports) {
                     arrowDistance: 12.5,
                     otherDistance: 0,
                     style: "",
+                    lightStyle: null,
+                    darkStyle: null,
                     beforeAppendToPageCallBack() { },
                 };
             };
@@ -7238,14 +7056,12 @@ System.register('pops', [], (function (exports) {
                     popsDOMUtils.addClassName($toolTipContainer, this.$data.config.className);
                     // 添加z-index
                     $toolTipContainer.style.zIndex = PopsHandler.handleZIndex(this.$data.config.zIndex).toString();
-                    if (this.$data.config.style != null) {
-                        // 添加自定义style
-                        const cssNode = popsDOMUtils.createElement("style", {
-                            type: "text/css",
-                            innerHTML: this.$data.config.style,
-                        });
-                        $toolTipContainer.appendChild(cssNode);
-                    }
+                    // 添加自定义style
+                    PopsElementHandler.addStyle($toolTipContainer, this.$data.config.style);
+                    // 添加自定义浅色style
+                    PopsElementHandler.addLightStyle($toolTipContainer, this.$data.config.lightStyle);
+                    // 添加自定义深色style
+                    PopsElementHandler.addDarkStyle($toolTipContainer, this.$data.config.darkStyle);
                     // 处理是否显示箭头元素
                     if (!this.$data.config.showArrow) {
                         $toolTipArrow.remove();
@@ -8044,15 +7860,22 @@ System.register('pops', [], (function (exports) {
                              * 设置点击事件
                              */
                             onClick() {
-                                const that = this;
-                                popsDOMUtils.on(this.$ele.core, "click", function (event) {
-                                    if (that.$ele.input.disabled || that.$ele.switch.hasAttribute("data-disabled")) {
+                                popsDOMUtils.on(this.$ele.core, "click", async (event) => {
+                                    if (this.$ele.input.disabled || this.$ele.switch.hasAttribute("data-disabled")) {
                                         return;
                                     }
-                                    that.$data.value = that.getStatus();
-                                    that.setStatus(that.$data.value);
+                                    const status = this.getStatus();
+                                    if (typeof viewConfig.beforeSwitchStatusChangeCallBack === "function") {
+                                        const flag = await viewConfig.beforeSwitchStatusChangeCallBack(event, status);
+                                        if (typeof flag === "boolean" && !flag) {
+                                            return;
+                                        }
+                                    }
+                                    // 设置为逆反状态
+                                    this.$data.value = !status;
+                                    this.setStatus(this.$data.value);
                                     if (typeof viewConfig.callback === "function") {
-                                        viewConfig.callback(event, that.$data.value);
+                                        await viewConfig.callback(event, this.$data.value);
                                     }
                                 });
                             },
@@ -8070,11 +7893,17 @@ System.register('pops', [], (function (exports) {
                                 }
                             },
                             /**
-                             * 根据className来获取逆反值
+                             * 获取开/关的逆反状态
+                             */
+                            getReverseStatus() {
+                                return !this.getStatus();
+                            },
+                            /**
+                             * 获取开/关的状态
                              */
                             getStatus() {
                                 let checkedValue = false;
-                                if (!popsDOMUtils.containsClassName(this.$ele.switch, "pops-panel-switch-is-checked")) {
+                                if (popsDOMUtils.containsClassName(this.$ele.switch, "pops-panel-switch-is-checked")) {
                                     checkedValue = true;
                                 }
                                 return checkedValue;
@@ -9506,7 +9335,7 @@ System.register('pops', [], (function (exports) {
                                             return;
                                         }
                                         /** 当前已选中的值 */
-                                        const { style, ...userConfirmConfig } = viewConfig.selectConfirmDialogConfig || {};
+                                        const { style, lightStyle, darkStyle, ...userConfirmConfig } = viewConfig.selectConfirmDialogConfig || {};
                                         /**
                                          * 弹窗关闭的回调
                                          */
@@ -9577,7 +9406,9 @@ System.register('pops', [], (function (exports) {
                   ${PopsCSS.panelCSS}
 
 								  ${style || ""}
-								`,
+								  `,
+                                            lightStyle: lightStyle,
+                                            darkStyle: darkStyle,
                                         }, userConfirmConfig);
                                         const $dialog = PopsAlert.init(confirmConfig);
                                         const $selectContainer = $dialog.$shadowRoot.querySelector(".select-container");
@@ -10740,7 +10571,7 @@ System.register('pops', [], (function (exports) {
                                     }
                                     /** 当前已选中的值 */
                                     const selectInfo = this.$data.selectedDataList;
-                                    const { style, ...userConfirmConfig } = viewConfig.selectConfirmDialogConfig || {};
+                                    const { style, lightStyle, darkStyle, ...userConfirmConfig } = viewConfig.selectConfirmDialogConfig || {};
                                     const dialogCloseCallback = () => {
                                         this.$data.selectedDataList = [...selectInfo];
                                         this.updateTagItem();
@@ -10788,6 +10619,8 @@ System.register('pops', [], (function (exports) {
 
 								  ${style || ""}
 								`,
+                                        lightStyle: lightStyle,
+                                        darkStyle: darkStyle,
                                     }, userConfirmConfig);
                                     const $dialog = PopsAlert.init(confirmConfig);
                                     const $selectContainer = $dialog.$shadowRoot.querySelector(".select-container");
@@ -11811,6 +11644,8 @@ System.register('pops', [], (function (exports) {
                     dragEndCallBack() { },
                     forbiddenScroll: false,
                     style: null,
+                    lightStyle: null,
+                    darkStyle: null,
                     beforeAppendToPageCallBack() { },
                 };
             };
@@ -12044,6 +11879,8 @@ System.register('pops', [], (function (exports) {
                     zIndex: 10000,
                     preventDefault: true,
                     style: null,
+                    lightStyle: null,
+                    darkStyle: null,
                     beforeAppendToPageCallBack() { },
                     limitPositionXInView: true,
                     limitPositionYInView: true,
@@ -12079,14 +11916,12 @@ System.register('pops', [], (function (exports) {
                             css: PopsCSS.rightClickMenu,
                         },
                     ]);
-                    if (config.style != null) {
-                        const $css = popsDOMUtils.createElement("style", {
-                            innerHTML: config.style,
-                        }, {
-                            type: "text/css",
-                        });
-                        $shadowRoot.appendChild($css);
-                    }
+                    // 添加自定义style
+                    PopsElementHandler.addStyle($shadowRoot, config.style);
+                    // 添加自定义浅色style
+                    PopsElementHandler.addLightStyle($shadowRoot, config.lightStyle);
+                    // 添加自定义深色style
+                    PopsElementHandler.addDarkStyle($shadowRoot, config.darkStyle);
                     const PopsContextMenu = {
                         $data: {
                             menuDataKey: "data-menu",
@@ -12681,6 +12516,8 @@ System.register('pops', [], (function (exports) {
                         return data.filter((it) => it.value.includes(value));
                     },
                     style: "",
+                    lightStyle: null,
+                    darkStyle: null,
                 };
             };
 
@@ -12711,13 +12548,12 @@ System.register('pops', [], (function (exports) {
                             css: PopsCSS.common,
                         },
                     ]);
-                    if (config.style != null) {
-                        const $css = popsDOMUtils.createElement("style", {
-                            type: "text/css",
-                            innerHTML: config.style,
-                        });
-                        $shadowRoot.appendChild($css);
-                    }
+                    // 添加自定义style
+                    PopsElementHandler.addStyle($shadowRoot, config.style);
+                    // 添加自定义浅色style
+                    PopsElementHandler.addLightStyle($shadowRoot, config.lightStyle);
+                    // 添加自定义深色style
+                    PopsElementHandler.addDarkStyle($shadowRoot, config.darkStyle);
                     /**
                      * 监听器的默认配置
                      */
@@ -13464,7 +13300,7 @@ System.register('pops', [], (function (exports) {
                 },
             };
 
-            const version = "3.2.2";
+            const version = "3.3.1";
 
             class Pops {
                 /** 配置 */