clickgo 3.15.11 → 3.15.13

package/README.md

@@ -25,7 +25,7 @@ Load the module loader first, and then load it using the module loader.
 **index.html**
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@litert/loader@3.5.7/dist/loader.min.js?path=index&npm={'clickgo':'3.15.11'}"></script>
+<script src="https://cdn.jsdelivr.net/npm/@litert/loader@3.5.7/dist/loader.min.js?path=index&npm={'clickgo':'3.15.13'}"></script>
 ```
 
 **index.js**

package/dist/app/demo/config.json

@@ -28,9 +28,10 @@
     "style": "/package/global",
 
     "files": [
-        "/form/control/alayout/alayout.js",
-        "/form/control/alayout/alayout.css",
-        "/form/control/alayout/alayout.xml",
+        "/form/control/alayout2/alayout2.js",
+        "/form/control/alayout2/alayout2.xml",
+        "/form/control/alert/alert.js",
+        "/form/control/alert/alert.xml",
         "/form/control/arteditor/arteditor.js",
         "/form/control/arteditor/arteditor.xml",
         "/form/control/arteditor/img.js",
@@ -44,6 +45,8 @@
         "/form/control/button/button.xml",
         "/form/control/check/check.js",
         "/form/control/check/check.xml",
+        "/form/control/circle/circle.xml",
+        "/form/control/content/content.xml",
         "/form/control/date/date.js",
         "/form/control/date/date.xml",
         "/form/control/datepanel/datepanel.js",
@@ -79,6 +82,8 @@
         "/form/control/iconview/iconview.js",
         "/form/control/iconview/iconview.xml",
         "/form/control/img/img.xml",
+        "/form/control/imgviewer/imgviewer.js",
+        "/form/control/imgviewer/imgviewer.xml",
         "/form/control/jodit/jodit.js",
         "/form/control/jodit/jodit.xml",
         "/form/control/label/label.js",

package/dist/app/demo/form/control/{alayout/alayout.js → alayout2/alayout2.js}

@@ -27,9 +27,7 @@ const clickgo = __importStar(require("clickgo"));
 class default_1 extends clickgo.form.AbstractForm {
     constructor() {
         super(...arguments);
-        this.gutter = [0];
-        this.igutter = [0];
-        this.direction = ['h'];
+        this.gutter = ['0'];
     }
 }
 exports.default = default_1;

package/dist/app/demo/form/control/alayout2/alayout2.xml

@@ -0,0 +1,16 @@
+<form width="350" height="500" title="alayout2" padding="10">
+    <flow direction="v" style="flex: 1;">
+        <alayout2 :gutter="gutter[0]">
+            <alayout2-cell style="flex: 2; background: var(--info);">
+                <block style="height: 200px;"></block>
+            </alayout2-cell>
+            <alayout2-cell style="flex: 1; background: var(--success);">
+                <block style="height: 200px;"></block>
+            </alayout2-cell>
+        </alayout2>
+    </flow>
+    <layout direction="v" gutter="10" style="margin-left: 10px;">
+        <label>gutter:</label>
+        <select v-model="gutter" :data="[0, 10, 12, 30, 31, 50]"></select>
+    </layout>
+</form>

package/dist/app/demo/form/control/alert/alert.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const clickgo = __importStar(require("clickgo"));
+class default_1 extends clickgo.form.AbstractForm {
+    constructor() {
+        super(...arguments);
+        this.vclose = false;
+    }
+}
+exports.default = default_1;

package/dist/app/demo/form/control/alert/alert.xml

@@ -0,0 +1,32 @@
+<form width="650" height="500" title="Alert" padding="10">
+    <layout direction="v" gutter="10" style="flex: 1;">
+        <label>Default:</label>
+        <layout gutter="10">
+            <alert :close="vclose">Default</alert>
+            <alert :close="vclose" type="primary">Primary</alert>
+            <alert :close="vclose" type="info">Info</alert>
+            <alert :close="vclose" type="warning">Warning</alert>
+            <alert :close="vclose" type="danger">Danger</alert>
+            <alert :close="vclose" type="cg">Cg</alert>
+        </layout>
+        <label>Gutter:</label>
+        <alert :close="vclose" gutter="10" type="info">
+            <label>1</label>
+            <label>2</label>
+            <label>3</label>
+        </alert>
+        <label>Direction:</label>
+        <alert :close="vclose" direction="v" type="info">
+            <label>1</label>
+            <label>2</label>
+            <label>3</label>
+        </alert>
+        <label>Title:</label>
+        <alert :close="vclose" title="Hello world" type="info">
+            Message
+        </alert>
+        <layout gutter="10">
+            <button @click="vclose = !vclose" style="flex: 1;">{{vclose ? '' : '!'}}close</button>
+        </layout>
+    </layout>
+</form>

package/dist/app/demo/form/control/button/button.xml

@@ -1,4 +1,4 @@
-<form width="450" height="300" title="Button">
+<form width="500" height="400" title="Button">
     <flow direction="v" style="flex: 1; width: 0;">
         <layout direction="v" gutter="10" style="padding: 10px;">
             <label>Type:</label>

package/dist/app/demo/form/control/circle/circle.xml

@@ -0,0 +1,36 @@
+<form width="550" height="500" title="Circle" padding="10">
+    <layout direction="v" gutter="10" style="flex: 1;">
+        <label>Default:</label>
+        <layout gutter="10">
+            <circle />
+            <circle type="primary" />
+            <circle type="info" />
+            <circle type="warning" />
+            <circle type="danger" />
+            <circle type="cg" />
+        </layout>
+        <label>Plain:</label>
+        <layout gutter="10">
+            <circle plain />
+            <circle type="primary" plain />
+            <circle type="info" />
+            <circle type="warning" plain />
+            <circle type="danger" plain />
+            <circle type="cg" plain />
+        </layout>
+        <label>Size:</label>
+        <layout gutter="10" align-v="center">
+            <circle type="primary" size="xl" />
+            <circle type="primary" size="l" />
+            <circle type="primary" size="m" />
+            <circle type="primary" size="s" />
+        </layout>
+        <label>Slot:</label>
+        <layout gutter="10" align-v="center">
+            <circle type="cg" size="xl">1</circle>
+            <circle type="cg" plain size="xl">2</circle>
+            <circle size="xl">3</circle>
+            <circle size="xl" plain>4</circle>
+        </layout>
+    </layout>
+</form>

package/dist/app/demo/form/control/content/content.xml

@@ -0,0 +1,12 @@
+<form width="550" height="500" title="Content" padding="10">
+    <content direction="v" gutter="10" style="flex: 1;">
+        <label>Label1:</label>
+        <text></text>
+        <label>Label2:</label>
+        <text></text>
+        <label>Label3:</label>
+        <text></text>
+        <label>Label4:</label>
+        <text></text>
+    </content>
+</form>

package/dist/app/demo/form/control/desc/desc.xml

@@ -28,7 +28,7 @@
         </layout>
         <label>Test: {{cols}}</label>
         <flow style="flex: 1;">
-            <desc :border="border" :collapse="collapse" style="flex: 1;">
+            <desc :border="border" :collapse="collapse" :size="size[0]" :plain="plain" style="flex: 1;">
                 <desc-row v-for="line of maxLine">
                     <!-- 行 1 - max -->
                     <template v-for="col of data.length">

package/dist/app/demo/form/control/hske/hske.xml

@@ -6,7 +6,7 @@
             <button>OK1</button>
             <button>OK2</button>
             <template v-slot:first>
-                <layout style="flex: 1;" align-h="center" align-v="bottom" style="padding-bottom: 20px; background: var(--info); color: rgba(255, 255, 255, .6)">Copyright</layout>
+                <layout align-h="center" align-v="bottom" style="flex: 1; padding-bottom: 20px; background: var(--info); color: rgba(255, 255, 255, .6)">Copyright</layout>
             </template>
         </hske>
         <layout align-v="center" gutter="10">

package/dist/app/demo/form/control/imgviewer/imgviewer.js

@@ -0,0 +1,36 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const clickgo = __importStar(require("clickgo"));
+class default_1 extends clickgo.form.AbstractForm {
+    constructor() {
+        super(...arguments);
+        this.src = [
+            '../../../res/img.jpg', '../../../res/icon.svg'
+        ];
+        this.value = 0;
+    }
+}
+exports.default = default_1;

package/dist/app/demo/form/control/imgviewer/imgviewer.xml

@@ -0,0 +1,9 @@
+<form title="Imgviewer" width="600" height="450" padding="10">
+    <layout direction="v" gutter="10" style="flex: 1;">
+        <imgviewer v-model="value" :src="src" style="flex: 1;"></imgviewer>
+        <layout gutter="10">
+            <button style="flex: 1;" @click="value = 0">Value 0</button>
+            <button style="flex: 1;" @click="value = 1">Value 1</button>
+        </layout>
+    </layout>
+</form>

package/dist/app/demo/form/control/label/label.xml

@@ -1,4 +1,4 @@
-<form width="390" height="480" title="Label">
+<form width="390" height="550" title="Label">
     <layout direction="v" gutter="10" style="padding: 10px; flex: 1; width: 0;">
         <label>You can use CSS to customize the label:</label>
         <label>Normal</label>
@@ -9,6 +9,8 @@
         <label style="font-size: 36px;">Font size</label>
         <label mode="tip">mode: tip</label>
         <label mode="mtip">mode: mtip</label>
+        <label mode="important">mode: important</label>
+        <label mode="click">mode: click</label>
         <label size="m">size m</label>
         <label size="l">size l</label>
         <label size="xl">size xl</label>

package/dist/app/demo/form/control/link/link.xml

@@ -10,5 +10,13 @@
         <link style="font-size: 36px;">Font size</link>
         <link url="https://www.maiyun.net">https://www.maiyun.net</link>
         <link @click="alert">Alert</link>
+        <link>
+            More
+            <template v-slot:pop>
+                <menulist>
+                    <menulist-item alt="T">Test 1</menulist-item>
+                </menulist>
+            </template>
+        </link>
     </layout>
 </form>

package/dist/app/demo/form/control/select/select.js

@@ -103,7 +103,7 @@ class default_1 extends clickgo.form.AbstractForm {
         this.aemodel = [];
         this.label2 = [];
         this.asyncModel = ['1'];
-        this.asyncData = [];
+        this.asyncData = {};
         this.select3 = '';
         this.label3 = '';
         this.level3 = [];
@@ -253,8 +253,8 @@ class default_1 extends clickgo.form.AbstractForm {
                 'label': 'ok',
                 'value': '1'
             }, '2', '3'];
-        for (const item of list) {
-            this.asyncData.push(item);
+        for (let i = 0; i < list.length; ++i) {
+            this.asyncData[i.toString()] = list[i];
         }
     }
     onMounted() {

package/dist/app/demo/form/main.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const clickgo = __importStar(require("clickgo"));
-const alayout_1 = __importDefault(require("./control/alayout/alayout"));
+const alayout2_1 = __importDefault(require("./control/alayout2/alayout2"));
 const grid_1 = __importDefault(require("./control/grid/grid"));
 const box_1 = __importDefault(require("./control/box/box"));
 const button_1 = __importDefault(require("~c/button/button"));
@@ -51,6 +51,7 @@ const form_1 = __importDefault(require("./control/form/form"));
 const group_1 = __importDefault(require("./control/group/group"));
 const html_1 = __importDefault(require("./control/html/html"));
 const progress_1 = __importDefault(require("./control/progress/progress"));
+const alert_1 = __importDefault(require("./control/alert/alert"));
 const iconview_1 = __importDefault(require("./control/iconview/iconview"));
 const link_1 = __importDefault(require("./control/link/link"));
 const label_1 = __importDefault(require("./control/label/label"));
@@ -78,6 +79,7 @@ const table_1 = __importDefault(require("./control/table/table"));
 const text_1 = __importDefault(require("./control/text/text"));
 const vflow_1 = __importDefault(require("./control/vflow/vflow"));
 const video_1 = __importDefault(require("./control/video/video"));
+const imgviewer_1 = __importDefault(require("./control/imgviewer/imgviewer"));
 const step_1 = __importDefault(require("./control/step/step"));
 const xterm_1 = __importDefault(require("./control/xterm/xterm"));
 const echarts_1 = __importDefault(require("./control/echarts/echarts"));
@@ -121,8 +123,8 @@ class default_1 extends clickgo.form.AbstractForm {
                     });
                     break;
                 }
-                case 'calayout': {
-                    frm = yield clickgo.form.create(alayout_1.default);
+                case 'calayout2': {
+                    frm = yield clickgo.form.create(alayout2_1.default);
                     break;
                 }
                 case 'cgrid': {
@@ -201,6 +203,10 @@ class default_1 extends clickgo.form.AbstractForm {
                     frm = yield clickgo.form.create(vflow_1.default);
                     break;
                 }
+                case 'cimgviewer': {
+                    frm = yield clickgo.form.create(imgviewer_1.default);
+                    break;
+                }
                 case 'cvideo': {
                     frm = yield clickgo.form.create(video_1.default);
                     break;
@@ -231,6 +237,22 @@ class default_1 extends clickgo.form.AbstractForm {
                     });
                     break;
                 }
+                case 'ccircle': {
+                    frm = yield clickgo.form.create('control/circle/circle', undefined, {
+                        'path': this.filename
+                    });
+                    break;
+                }
+                case 'ccontent': {
+                    frm = yield clickgo.form.create('control/content/content', undefined, {
+                        'path': this.filename
+                    });
+                    break;
+                }
+                case 'calert': {
+                    frm = yield clickgo.form.create(alert_1.default);
+                    break;
+                }
                 case 'clink': {
                     frm = yield clickgo.form.create(link_1.default);
                     break;

package/dist/app/demo/form/main.xml

@@ -1,4 +1,4 @@
-<form width="500" height="550" title="ClickGo demo" icon="/package/res/icon.svg">
+<form width="500" height="650" title="ClickGo demo" icon="/package/res/icon.svg">
     <tab v-model="ntab" :tabs="['control', 'method', 'event', 'solution']" style="margin: 10px; flex: 1;">
         <flow v-if="ntab === 'control'" class="inner" direction="v">
             <layout class="buttons" gutter="10" direction="v">
@@ -30,6 +30,7 @@
                 <layout gutter="10">
                     <button @click="openForm('clink')">Link</button>
                     <button @click="openForm('cloading')">Loading</button>
+                    <button @click="openForm('ccircle')">Circle</button>
                 </layout>
                 <layout gutter="10">
                     <button @click="openForm('cdialog')">Dialog</button>
@@ -38,20 +39,23 @@
                 </layout>
                 <layout gutter="10">
                     <button @click="openForm('cblock')">Block</button>
-                    <button @click="openForm('calayout')">Alayout (deprecated)</button>
+                    <button @click="openForm('calayout2')">Alayout2</button>
                     <button @click="openForm('chske')">Hske</button>
                 </layout>
                 <layout gutter="10">
                     <button @click="openForm('csvg')">Svg</button>
                     <button @click="openForm('cflow')">Flow</button>
+                    <button @click="openForm('cimgviewer')">Imgviewer</button>
                 </layout>
                 <layout gutter="10">
                     <button @click="openForm('cvflow')">Vflow</button>
                     <button @click="openForm('cmarquee')">Marquee</button>
+                    <button @click="openForm('ccontent')">Content</button>
                 </layout>
                 <layout gutter="10">
                     <button @click="openForm('cscroll')">Scroll</button>
                     <button @click="openForm('cmenu')">Menu</button>
+                    <button @click="openForm('calert')">Alert</button>
                 </layout>
                 <layout gutter="10">
                     <button @click="openForm('clist')">List</button>

package/dist/app/demo/form/method/dom/dom.js

@@ -51,6 +51,9 @@ class default_1 extends clickgo.form.AbstractForm {
         this.watchPositionText = false;
         this.getWatchInfoDisabled = false;
         this.getWatchInfoText = '{}';
+        this.scaleX = 0;
+        this.scaleY = 0;
+        this.scaleS = 1;
     }
     get isMove() {
         return clickgo.dom.is.move;
@@ -213,6 +216,14 @@ class default_1 extends clickgo.form.AbstractForm {
             this.moveHeight = this.moveHeight === 25 ? 50 : 25;
         });
     }
+    bindScaleDown(e) {
+        clickgo.dom.bindScale(e, (e, scale, cpos) => {
+            e.preventDefault();
+            this.scaleX += cpos.x;
+            this.scaleY += cpos.y;
+            this.scaleS *= scale;
+        });
+    }
     fullscreen() {
         return __awaiter(this, void 0, void 0, function* () {
             yield clickgo.dom.fullscreen();

package/dist/app/demo/form/method/dom/dom.xml

@@ -60,6 +60,10 @@
                 <label>bindMove(e, { ... })</label>
                 <block ref="move" style="background: #07c160; position: absolute;" :style="{'left': moveLeft + 'px', 'top': moveTop + 'px', 'width': moveWidth + 'px', 'height': moveHeight + 'px'}" @touchstart="moveDown" @mousedown="moveDown"></block>
             </block>
+            <!-- 双指缩放 -->
+            <block @mousedown="bindScaleDown" @touchstart="bindScaleDown" @touchmove="bindScaleDown" @touchend="bindScaleDown" @wheel="bindScaleDown" style="height: 200px; display: flex; justify-content: center; align-items: center; background: var(--g-plain-background); border: solid 1px var(--g-plain-border-color); overflow: hidden;">
+                <block style="background: #07c160; width: 25px; height: 25px; pointer-events: none;" :style="{'transform': 'translate3d(' + scaleX + 'px, ' + scaleY + 'px, 0) scale(' + scaleS + ')'}"></block>
+            </block>
             <button @click="fullscreen" >fullscreen()</button>
             <label>clickgo.dom.is.move: {{isMove ? 'true' : 'false'}}</label>
             <label>clickgo.dom.is.shift: {{isShift ? 'true' : 'false'}}</label>

package/dist/clickgo.js

@@ -23,17 +23,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.zip = exports.tool = exports.theme = exports.task = exports.storage = exports.native = exports.fs = exports.form = exports.dom = exports.core = exports.control = exports.vue = exports.hasFrame = exports.isImmersion = exports.getPlatform = exports.isNative = exports.getVersion = void 0;
-const version = '3.15.11';
+exports.zip = exports.tool = exports.theme = exports.task = exports.storage = exports.native = exports.fs = exports.form = exports.dom = exports.core = exports.control = exports.vue = void 0;
+exports.getVersion = getVersion;
+exports.isNative = isNative;
+exports.getPlatform = getPlatform;
+exports.isImmersion = isImmersion;
+exports.hasFrame = hasFrame;
+const version = '3.15.13';
 function getVersion() {
     return version;
 }
-exports.getVersion = getVersion;
 const native = navigator.userAgent.includes('electron') ? true : false;
 function isNative() {
     return native;
 }
-exports.isNative = isNative;
 let platform = 'web';
 let immersion = false;
 let frame = false;
@@ -48,15 +51,12 @@ if (native) {
 function getPlatform() {
     return platform;
 }
-exports.getPlatform = getPlatform;
 function isImmersion() {
     return immersion;
 }
-exports.isImmersion = isImmersion;
 function hasFrame() {
     return frame;
 }
-exports.hasFrame = hasFrame;
 exports.vue = window.Vue;
 exports.control = __importStar(require("./lib/control"));
 exports.core = __importStar(require("./lib/core"));

package/dist/clickgo.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const version = '3.15.11';
+const version = '3.15.13';
 export function getVersion(): string {
     return version;
 }

package/dist/global.css

@@ -1 +1 @@
-#cg-wrap{position:fixed;left:0;top:0;--g-padding-s:4px;--g-padding:7px;--g-padding-h:4px var(--g-padding);--g-padding-l:14px;--g-padding-l-h:8px var(--g-padding-l);--g-padding-xl:22px;--g-padding-xl-h:12px var(--g-padding-xl);--g-bpadding:18px;--g-margin:2px;--g-radius:0;--g-radius-l:4px;--g-radius-xl:8px;--g-size:12px;--g-size-m:16px;--g-size-l:20px;--g-size-xl: 28px;--g-family:"Lucida Sans Unicode","Helvetica Neue","Helvetica","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Noto Sans CJK","Source Han Sans","WenQuanYi Micro Hei","Microsoft YaHei","sans-serif";--g-line:1;--g-cubic:cubic-bezier(0.39, 0.575, 0.565, 1);--g-transition:none;--cg:hsl(20, 100%, 65%);--success:hsl(150, 100%, 40%);--success-hover:hsl(150, 100%, 45%);--success-active:hsl(150, 100%, 30%);--success-focus:hsl(150, 100%, 35%);--success-disabled:hsl(150, 0%, 40%);--success-bg:hsl(150, 100%, 98%);--info:hsl(210, 100%, 50%);--info-hover:hsl(210, 100%, 60%);--info-active:hsl(210, 100%, 40%);--info-focus:hsl(210, 100%, 45%);--info-disabled:hsl(210, 0%, 50%);--info-bg:hsl(210, 100%, 98%);--warning:hsl(20, 100%, 70%);--warning-hover:hsl(20, 100%, 80%);--warning-active:hsl(20, 100%, 60%);--warning-focus:hsl(20, 100%, 65%);--warning-disabled:hsl(20, 0%, 70%);--warning-bg:hsl(20, 100%, 98%);--danger:hsl(350, 100%, 50%);--danger-hover:hsl(350, 100%, 70%);--danger-active:hsl(350, 100%, 40%);--danger-focus:hsl(350, 100%, 45%);--danger-disabled:hsl(350, 0%, 50%);--danger-bg:hsl(350, 100%, 98%);--system-color:hsl(0, 0%, 95%);--system-background:hsla(0, 0%, 0%, .35);--system-control-background:hsla(0, 0%, 100%, .03);--system-background-hover:hsla(0, 0%, 100%, .06);--system-background-active:hsla(0, 0%, 100%, .1);--system-border-color:hsla(0, 0%, 100%, .03);--system-border-color-hover:hsla(0, 0%, 100%, .06);--system-placeholder-color: hsla(0, 0%, 100%, .2);--face:hsl(0, 0%, 95%);--face-child:hsl(0, 0%, 90%);--face-hover:hsl(0, 0%, 88%);--face-selected:hsl(0, 0%, 85%);--g-pop-background:#FFF;--g-pop-backdrop:none;--g-pop-border:solid .5px var(--g-border-color);--g-shadow:none;--g-outline-shadow:none;--g-color:hsl(0, 0%, 30%);--g-color-hover:hsl(0, 0%, 40%);--g-color-active:hsl(0, 0%, 20%);--g-color-focus:hsl(0, 0%, 25%);--g-color-disabled:hsl(0, 0%, 60%);--g-background:hsl(0, 0%, 95%);--g-background-hover:hsl(0, 0%, 100%);--g-background-active:hsl(0, 0%, 85%);--g-background-opacity:hsl(0, 0%, 50%, .2);--g-background-focus:hsl(0, 0%, 97.5%);--g-background-disabled:hsl(0, 0%, 75%);--g-border-color:hsl(0, 0%, 40%);--g-border-color-hover:hsl(0, 0%, 50%);--g-border-color-active:hsl(0, 0%, 30%);--g-border-color-focus:hsl(0, 0%, 35%);--g-border-color-disabled:hsl(0, 0%, 60%);--g-focusbox-border-color:var(--g-plain-border-color);--g-plain-color:var(--g-color);--g-plain-color-hover:var(--g-color-hover);--g-plain-color-active:var(--g-color-active);--g-plain-color-focus:var(--g-color-focus);--g-plain-color-disabled:var(--g-color-disabled);--g-plain-background:hsl(0, 0%, 100%);--g-plain-background-hover:hsl(0, 0%, 98%);--g-plain-background-active:hsl(0, 0%, 95%);--g-plain-background-focus:var(--g-plain-background);--g-plain-background-disabled:hsl(0, 0%, 95%);--g-plain-background-selected:hsl(0, 0%, 95%);--g-plain-border-color:hsl(0, 0%, 70%);--g-plain-border-color-hover:hsl(0, 0%, 80%);--g-plain-border-color-active:hsl(0, 0%, 60%);--g-plain-border-color-focus:hsl(0, 0%, 65%);--g-plain-border-color-disabled:hsl(0, 0%, 60%);--g-plain-border-color-plain:hsl(0, 0%, 85%);--g-block-background:hsl(0, 0%, 85%);--g-block-background-hover:hsl(0, 0%, 75%);--g-block-dark-background:hsl(0, 0%, 15%);--g-block-dark-background-hover:hsl(0, 0%, 25%)}[data-cg-disabled]{cursor:not-allowed}#cg-form-list{z-index:20020000}#cg-pop-list{z-index:20020001}#cg-simpletask{z-index:20020002}#cg-rectangle{z-index:20020003;box-sizing:border-box;position:absolute;border-radius:3px;box-shadow:0 0 10px rgba(0,0,0,.25);background:rgba(255,255,255,.05);pointer-events:none;opacity:0}#cg-circular{z-index:20020003;box-sizing:border-box;position:absolute;border:solid 3px var(--cg);border-radius:50%;filter:drop-shadow(0 0 3px var(--cg));pointer-events:none;opacity:0}#cg-gesture{z-index:20020003;box-sizing:border-box;position:absolute;border-radius:50%;pointer-events:none;opacity:0;background:var(--system-background);box-shadow:0px 15px 30px rgba(0,0,0,.07);transform:scale(0);width:20px;height:20px}#cg-gesture.done{background:rgba(255,255,255,.3);border:solid 3px rgba(0,0,0,.3)}#cg-gesture.ani{transition:all .3s var(--g-cubic);transition-property:left,top,transform}#cg-drag{z-index:20020003;box-sizing:border-box;position:absolute;border-radius:3px;pointer-events:none;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 3px 5px rgba(0,0,0,.1);opacity:0;display:flex;justify-content:center;align-items:center;border:solid 1px #fff;transition:all .3s var(--g-cubic);transition-property:transform,border;transform:initial}#cg-launcher{z-index:20020004;box-sizing:border-box;position:fixed;background:var(--system-background);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);width:100%;height:100%;left:0;top:0;color:var(--system-color);display:none;flex-direction:column;transition:all .3s var(--g-cubic);transform:scale(1.2);opacity:0}#cg-launcher:not(.cg-show){pointer-events:none}#cg-launcher.cg-show{transform:scale(1);opacity:1}.cg-launcher-search{text-align:center;padding:50px}.cg-launcher-sinput{-webkit-appearance:none;appearance:none;padding:15px;border:solid 1px rgba(0,0,0,0);background:var(--system-control-background);width:60%;border-radius:5px;color:var(--system-color);transition:all .3s var(--g-cubic)}.cg-launcher-sinput::placeholder{color:var(--system-placeholder-color)}.cg-launcher-sinput::selection{background-color:var(--system-background-hover)}.cg-launcher-sinput:focus{outline:none;border-color:var(--system-border-color-hover)}.cg-launcher-foldername{-webkit-appearance:none;appearance:none;height:50px;font-size:28px !important;border:none;background:rgba(0,0,0,0);width:50%;color:var(--system-color);text-align:center}.cg-launcher-foldername::selection{background-color:var(--system-background-hover)}.cg-launcher-foldername:focus{outline:none}.cg-launcher-item{width:190px;display:inline-flex;vertical-align:middle;margin-bottom:50px}.cg-launcher-inner{flex:1;width:0}.cg-launcher-icon{background-position:center;background-size:80px;height:80px;background-repeat:no-repeat}.cg-launcher-icon:active{filter:brightness(0.6)}.cg-launcher-name{font-size:13px;font-weight:bold;text-shadow:0 0 3px rgba(0,0,0,.6);text-align:center;margin-top:20px}.cg-launcher-icon,.cg-launcher-name{transition:all .3s var(--g-cubic);transition-property:opacity}.cg-launcher-space{width:50px}.cg-launcher-folder{display:flex;justify-content:center;height:80px}.cg-launcher-folder>div{height:80px;width:80px;background:rgba(255,255,255,.3);border-radius:20px;padding:10px 4px 4px 10px;transition:all .3s var(--g-cubic);transition-property:left,top,width,height,opacity;overflow-y:auto}.cg-launcher-folder>div::-webkit-scrollbar{display:none}.cg-launcher-folder>div .cg-launcher-item,.cg-launcher-folder>div .cg-launcher-space{transition:all .3s var(--g-cubic)}.cg-launcher-folder>div.cg-show{padding:50px 0 0 50px}.cg-launcher-folder>div:not(.cg-show):active{filter:brightness(0.6)}.cg-launcher-folder>div:not(.cg-show) .cg-launcher-item{width:22px;margin-bottom:6px}.cg-launcher-folder>div:not(.cg-show) .cg-launcher-icon{background-size:16px;height:16px;pointer-events:none}.cg-launcher-folder>div:not(.cg-show) .cg-launcher-name{display:none}.cg-launcher-folder>div:not(.cg-show) .cg-launcher-space{width:6px}.cg-launcher-list{flex:1;height:0;overflow-y:auto;padding:0 0 0 50px}.cg-launcher-list::-webkit-scrollbar{display:none}.cg-launcher-list.cg-folder-open>.cg-launcher-item>.cg-launcher-inner>.cg-launcher-icon,.cg-launcher-list.cg-folder-open>.cg-launcher-item>.cg-launcher-inner>.cg-launcher-name{opacity:0}.cg-launcher-list.cg-folder-open>.cg-launcher-item>.cg-launcher-inner>.cg-launcher-folder>div:not(.cg-show){opacity:0}[data-cg-pop]{position:absolute;box-shadow:0px 15px 30px rgba(0,0,0,.07);transition:.3s var(--g-cubic);transition-property:transform,opacity;transform:translateY(-10px);opacity:0;overflow:hidden}[data-cg-pop]:not([data-cg-open]){pointer-events:none}[data-cg-pop][data-cg-pop-none]{display:none !important}[data-cg-pop][data-cg-open]{transform:translateY(0px);opacity:1}#cg-notify{z-index:20020005}.cg-notify-wrap{background:var(--system-background);position:fixed;padding:15px;border-radius:5px;right:0;top:0;width:280px;font-size:14px;display:flex;transition:.3s var(--g-cubic);transition-property:transform,opacity;overflow:hidden;color:var(--system-color);box-shadow:0px 15px 30px rgba(0,0,0,.07);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);pointer-events:none}.cg-notify-wrap.cg-notify-only{align-items:center}.cg-notify-wrap.cg-notify-full .cg-notify-title{padding-bottom:10px}.cg-notify-icon{margin-right:10px;width:16px;height:16px;border-radius:50%}.cg-notify-icon.cg-primary{background:var(--success)}.cg-notify-icon.cg-info{background:var(--info)}.cg-notify-icon.cg-warning{background:var(--warning)}.cg-notify-icon.cg-danger{background:var(--danger)}.cg-notify-icon.cg-progress{background:var(--cg)}.cg-notify-title{font-size:16px;font-weight:bold}.cg-notify-content{line-height:1.5;word-break:break-word}.cg-notify-progress{position:absolute;bottom:0;left:0;border-radius:1px;background:var(--cg);transition:width 1s ease-out;width:0%;height:2px}#cg-simpletask{left:0;bottom:-46px;width:100%;height:46px;top:initial;background:var(--system-background);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);padding:5px 0 5px 5px;display:flex;color:var(--system-color);transition:bottom .3s var(--g-cubic);overflow-x:auto;position:fixed}#cg-simpletask::-webkit-scrollbar{display:none}.cg-simpletask-item{background:rgba(0,0,0,.05);border-radius:3px;padding:10px;display:flex;align-items:center;margin-right:5px}.cg-simpletask-item:hover{background:rgba(0,0,0,.1)}.cg-simpletask-item:active{background:rgba(0,0,0,.2)}.cg-simpletask-icon{margin-right:5px;background-size:cover;width:16px;height:16px}#cg-confirm{z-index:20020006;position:fixed;left:0;top:0;width:100%;height:100%;background:var(--system-background);-webkit-backdrop-filter:blur(150px) saturate(1.5);backdrop-filter:blur(150px) saturate(1.5);justify-content:center;align-items:center}#cg-confirm .cg-confirm-box{background:var(--system-background);width:60%;box-shadow:0px 15px 30px rgba(0,0,0,.07);font-size:14px;border-radius:3px;overflow:hidden;color:var(--system-color)}#cg-confirm .cg-confirm-box #cg-confirm-content{padding:25px;line-height:1.5}#cg-confirm .cg-confirm-box .cg-confirm-controls{border-top:solid .5px var(--system-border-color);display:flex}#cg-confirm .cg-confirm-box .cg-confirm-controls>div{padding:20px;flex:1;text-align:center}#cg-confirm .cg-confirm-box .cg-confirm-controls>div:last-child{border-left:solid .5px var(--system-border-color)}#cg-confirm .cg-confirm-box .cg-confirm-controls>div:hover{background:var(--system-background-hover)}#cg-confirm .cg-confirm-box .cg-confirm-controls>div:active{background:var(--system-background-active)}
+#cg-wrap{position:fixed;left:0;top:0;--g-padding-s:4px;--g-padding:7px;--g-padding-h:4px var(--g-padding);--g-padding-l:14px;--g-padding-l-h:8px var(--g-padding-l);--g-padding-xl:22px;--g-padding-xl-h:12px var(--g-padding-xl);--g-bpadding:18px;--g-margin:2px;--g-radius:0;--g-radius-l:4px;--g-radius-xl:8px;--g-size:12px;--g-size-m:16px;--g-size-l:20px;--g-size-xl:28px;--g-family:"Lucida Sans Unicode","Helvetica Neue","Helvetica","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Noto Sans CJK","Source Han Sans","WenQuanYi Micro Hei","Microsoft YaHei","sans-serif";--g-line:1;--g-cubic:cubic-bezier(0.39, 0.575, 0.565, 1);--g-transition:none;--g-lineheight:1.2;--cg:hsl(20, 100%, 65%);--success:hsl(150, 100%, 40%);--success-hover:hsl(150, 100%, 45%);--success-active:hsl(150, 100%, 30%);--success-focus:hsl(150, 100%, 35%);--success-disabled:hsl(150, 0%, 40%);--success-bg:hsl(150, 100%, 98%);--info:hsl(210, 100%, 50%);--info-hover:hsl(210, 100%, 60%);--info-active:hsl(210, 100%, 40%);--info-focus:hsl(210, 100%, 45%);--info-disabled:hsl(210, 0%, 50%);--info-bg:hsl(210, 100%, 98%);--warning:hsl(20, 100%, 70%);--warning-hover:hsl(20, 100%, 80%);--warning-active:hsl(20, 100%, 60%);--warning-focus:hsl(20, 100%, 65%);--warning-disabled:hsl(20, 0%, 70%);--warning-bg:hsl(20, 100%, 98%);--danger:hsl(350, 100%, 50%);--danger-hover:hsl(350, 100%, 70%);--danger-active:hsl(350, 100%, 40%);--danger-focus:hsl(350, 100%, 45%);--danger-disabled:hsl(350, 0%, 50%);--danger-bg:hsl(350, 100%, 98%);--system-color:hsl(0, 0%, 95%);--system-background:hsla(0, 0%, 0%, .35);--system-control-background:hsla(0, 0%, 100%, .03);--system-background-hover:hsla(0, 0%, 100%, .06);--system-background-active:hsla(0, 0%, 100%, .1);--system-border-color:hsla(0, 0%, 100%, .03);--system-border-color-hover:hsla(0, 0%, 100%, .06);--system-placeholder-color: hsla(0, 0%, 100%, .2);--face:hsl(0, 0%, 95%);--face-child:hsl(0, 0%, 90%);--face-hover:hsl(0, 0%, 88%);--face-selected:hsl(0, 0%, 85%);--g-pop-background:#FFF;--g-pop-backdrop:none;--g-pop-border:solid .5px var(--g-border-color);--g-shadow:none;--g-outline-shadow:none;--g-color:hsl(0, 0%, 35%);--g-color-hover:hsl(0, 0%, 45%);--g-color-active:hsl(0, 0%, 25%);--g-color-focus:hsl(0, 0%, 30%);--g-color-disabled:hsl(0, 0%, 60%);--g-background:hsl(0, 0%, 95%);--g-background-hover:hsl(0, 0%, 100%);--g-background-active:hsl(0, 0%, 85%);--g-background-opacity:hsl(0, 0%, 50%, .2);--g-background-focus:hsl(0, 0%, 97.5%);--g-background-disabled:hsl(0, 0%, 75%);--g-border-color:hsl(0, 0%, 40%);--g-border-color-hover:hsl(0, 0%, 50%);--g-border-color-active:hsl(0, 0%, 30%);--g-border-color-focus:hsl(0, 0%, 35%);--g-border-color-disabled:hsl(0, 0%, 60%);--g-focusbox-border-color:var(--g-plain-border-color);--g-plain-color:var(--g-color);--g-plain-color-hover:var(--g-color-hover);--g-plain-color-active:var(--g-color-active);--g-plain-color-focus:var(--g-color-focus);--g-plain-color-disabled:var(--g-color-disabled);--g-plain-background:hsl(0, 0%, 100%);--g-plain-background-hover:hsl(0, 0%, 98%);--g-plain-background-active:hsl(0, 0%, 95%);--g-plain-background-focus:var(--g-plain-background);--g-plain-background-disabled:hsl(0, 0%, 95%);--g-plain-background-selected:hsl(0, 0%, 95%);--g-plain-border-color:hsl(0, 0%, 70%);--g-plain-border-color-hover:hsl(0, 0%, 80%);--g-plain-border-color-active:hsl(0, 0%, 60%);--g-plain-border-color-focus:hsl(0, 0%, 65%);--g-plain-border-color-disabled:hsl(0, 0%, 60%);--g-plain-border-color-plain:hsl(0, 0%, 85%);--g-block-background:hsl(0, 0%, 85%);--g-block-background-hover:hsl(0, 0%, 75%);--g-block-dark-background:hsl(0, 0%, 15%);--g-block-dark-background-hover:hsl(0, 0%, 25%)}[data-cg-disabled]{cursor:not-allowed}#cg-form-list{z-index:20020000}#cg-pop-list{z-index:20020001}#cg-simpletask{z-index:20020002}#cg-rectangle{z-index:20020003;box-sizing:border-box;position:absolute;border-radius:3px;box-shadow:0 0 10px rgba(0,0,0,.25);background:rgba(255,255,255,.05);pointer-events:none;opacity:0}#cg-circular{z-index:20020003;box-sizing:border-box;position:absolute;border:solid 3px var(--cg);border-radius:50%;filter:drop-shadow(0 0 3px var(--cg));pointer-events:none;opacity:0}#cg-gesture{z-index:20020003;box-sizing:border-box;position:absolute;border-radius:50%;pointer-events:none;opacity:0;background:var(--system-background);box-shadow:0px 15px 30px rgba(0,0,0,.07);transform:scale(0);width:20px;height:20px}#cg-gesture.done{background:rgba(255,255,255,.3);border:solid 3px rgba(0,0,0,.3)}#cg-gesture.ani{transition:all .3s var(--g-cubic);transition-property:left,top,transform}#cg-drag{z-index:20020003;box-sizing:border-box;position:absolute;border-radius:3px;pointer-events:none;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 3px 5px rgba(0,0,0,.1);opacity:0;display:flex;justify-content:center;align-items:center;border:solid 1px #fff;transition:all .3s var(--g-cubic);transition-property:transform,border;transform:initial}#cg-launcher{z-index:20020004;box-sizing:border-box;position:fixed;background:var(--system-background);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);width:100%;height:100%;left:0;top:0;color:var(--system-color);display:none;flex-direction:column;transition:all .3s var(--g-cubic);transform:scale(1.2);opacity:0}#cg-launcher:not(.cg-show){pointer-events:none}#cg-launcher.cg-show{transform:scale(1);opacity:1}.cg-launcher-search{text-align:center;padding:50px}.cg-launcher-sinput{-webkit-appearance:none;appearance:none;padding:15px;border:solid 1px rgba(0,0,0,0);background:var(--system-control-background);width:60%;border-radius:5px;color:var(--system-color);transition:all .3s var(--g-cubic)}.cg-launcher-sinput::placeholder{color:var(--system-placeholder-color)}.cg-launcher-sinput::selection{background-color:var(--system-background-hover)}.cg-launcher-sinput:focus{outline:none;border-color:var(--system-border-color-hover)}.cg-launcher-foldername{-webkit-appearance:none;appearance:none;height:50px;font-size:28px !important;border:none;background:rgba(0,0,0,0);width:50%;color:var(--system-color);text-align:center}.cg-launcher-foldername::selection{background-color:var(--system-background-hover)}.cg-launcher-foldername:focus{outline:none}.cg-launcher-item{width:190px;display:inline-flex;vertical-align:middle;margin-bottom:50px}.cg-launcher-inner{flex:1;width:0}.cg-launcher-icon{background-position:center;background-size:80px;height:80px;background-repeat:no-repeat}.cg-launcher-icon:active{filter:brightness(0.6)}.cg-launcher-name{font-size:var(--g-size);font-weight:bold;text-shadow:0 0 3px rgba(0,0,0,.6);text-align:center;margin-top:20px}.cg-launcher-icon,.cg-launcher-name{transition:all .3s var(--g-cubic);transition-property:opacity}.cg-launcher-space{width:50px}.cg-launcher-folder{display:flex;justify-content:center;height:80px}.cg-launcher-folder>div{height:80px;width:80px;background:rgba(255,255,255,.3);border-radius:20px;padding:10px 4px 4px 10px;transition:all .3s var(--g-cubic);transition-property:left,top,width,height,opacity;overflow-y:auto}.cg-launcher-folder>div::-webkit-scrollbar{display:none}.cg-launcher-folder>div .cg-launcher-item,.cg-launcher-folder>div .cg-launcher-space{transition:all .3s var(--g-cubic)}.cg-launcher-folder>div.cg-show{padding:50px 0 0 50px}.cg-launcher-folder>div:not(.cg-show):active{filter:brightness(0.6)}.cg-launcher-folder>div:not(.cg-show) .cg-launcher-item{width:22px;margin-bottom:6px}.cg-launcher-folder>div:not(.cg-show) .cg-launcher-icon{background-size:16px;height:16px;pointer-events:none}.cg-launcher-folder>div:not(.cg-show) .cg-launcher-name{display:none}.cg-launcher-folder>div:not(.cg-show) .cg-launcher-space{width:6px}.cg-launcher-list{flex:1;height:0;overflow-y:auto;padding:0 0 0 50px}.cg-launcher-list::-webkit-scrollbar{display:none}.cg-launcher-list.cg-folder-open>.cg-launcher-item>.cg-launcher-inner>.cg-launcher-icon,.cg-launcher-list.cg-folder-open>.cg-launcher-item>.cg-launcher-inner>.cg-launcher-name{opacity:0}.cg-launcher-list.cg-folder-open>.cg-launcher-item>.cg-launcher-inner>.cg-launcher-folder>div:not(.cg-show){opacity:0}[data-cg-pop]{position:absolute;box-shadow:0px 15px 30px rgba(0,0,0,.07);transition:.3s var(--g-cubic);transition-property:transform,opacity;transform:translateY(-10px);opacity:0;overflow:hidden}[data-cg-pop]:not([data-cg-open]){pointer-events:none}[data-cg-pop][data-cg-pop-none]{display:none !important}[data-cg-pop][data-cg-open]{transform:translateY(0px);opacity:1}#cg-notify{z-index:20020005}.cg-notify-wrap{background:var(--system-background);position:fixed;padding:15px;border-radius:5px;right:0;top:0;width:280px;font-size:14px;display:flex;transition:.3s var(--g-cubic);transition-property:transform,opacity;overflow:hidden;color:var(--system-color);box-shadow:0px 15px 30px rgba(0,0,0,.07);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);pointer-events:none}.cg-notify-wrap.cg-notify-only{align-items:center}.cg-notify-wrap.cg-notify-full .cg-notify-title{padding-bottom:10px}.cg-notify-icon{margin-right:10px;width:16px;height:16px;border-radius:50%}.cg-notify-icon.cg-primary{background:var(--success)}.cg-notify-icon.cg-info{background:var(--info)}.cg-notify-icon.cg-warning{background:var(--warning)}.cg-notify-icon.cg-danger{background:var(--danger)}.cg-notify-icon.cg-progress{background:var(--cg)}.cg-notify-title{font-size:var(--g-size-m);font-weight:bold}.cg-notify-content{line-height:1.5;word-break:break-word}.cg-notify-progress{position:absolute;bottom:0;left:0;border-radius:1px;background:var(--cg);transition:width 1s ease-out;width:0%;height:2px}#cg-simpletask{left:0;bottom:-46px;width:100%;height:46px;top:initial;background:var(--system-background);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);padding:5px 0 5px 5px;display:flex;color:var(--system-color);transition:bottom .3s var(--g-cubic);overflow-x:auto;position:fixed}#cg-simpletask::-webkit-scrollbar{display:none}.cg-simpletask-item{background:rgba(0,0,0,.05);border-radius:3px;padding:10px;display:flex;align-items:center;margin-right:5px}.cg-simpletask-item:hover{background:rgba(0,0,0,.1)}.cg-simpletask-item:active{background:rgba(0,0,0,.2)}.cg-simpletask-icon{margin-right:5px;background-size:cover;width:16px;height:16px}#cg-confirm{z-index:20020006;position:fixed;left:0;top:0;width:100%;height:100%;background:var(--system-background);-webkit-backdrop-filter:blur(150px) saturate(1.5);backdrop-filter:blur(150px) saturate(1.5);justify-content:center;align-items:center}#cg-confirm .cg-confirm-box{background:var(--system-background);width:60%;box-shadow:0px 15px 30px rgba(0,0,0,.07);font-size:14px;border-radius:3px;overflow:hidden;color:var(--system-color)}#cg-confirm .cg-confirm-box #cg-confirm-content{padding:25px;line-height:1.5}#cg-confirm .cg-confirm-box .cg-confirm-controls{border-top:solid .5px var(--system-border-color);display:flex}#cg-confirm .cg-confirm-box .cg-confirm-controls>div{padding:20px;flex:1;text-align:center}#cg-confirm .cg-confirm-box .cg-confirm-controls>div:last-child{border-left:solid .5px var(--system-border-color)}#cg-confirm .cg-confirm-box .cg-confirm-controls>div:hover{background:var(--system-background-hover)}#cg-confirm .cg-confirm-box .cg-confirm-controls>div:active{background:var(--system-background-active)}