deepsky 2.29.0 → 2.31.0

package/dist/index.css

@@ -183,20 +183,20 @@ canvas {
 
 
 .menu-node-fill {
-&[data-v-5ca4e826] {
+&[data-v-cfc27ed8] {
     background-color: var(--fill-color);
     border: 1px solid var(--border-color);
     border-radius: 2px;
     padding: 8px;
 }
 .box-items {
-&[data-v-5ca4e826] {
+&[data-v-cfc27ed8] {
         display: grid;
         grid-template-columns: repeat(12, 1fr);
         gap: 2px;
         margin-top: 4px;
 }
-.alpha-item[data-v-5ca4e826] {
+.alpha-item[data-v-cfc27ed8] {
             display: flex;
             justify-content: center;
             align-items: center;
@@ -205,10 +205,10 @@ canvas {
             cursor: pointer;
             border-radius: 4px;
 }
-.active[data-v-5ca4e826] {
+.active[data-v-cfc27ed8] {
             background: deepskyblue;
 }
-.background-item[data-v-5ca4e826] {
+.background-item[data-v-cfc27ed8] {
             display: flex;
             justify-content: center;
             align-items: center;
@@ -2226,7 +2226,7 @@ img[data-v-53b99368] {
 
 
 /* SVG描边动画 */
-@keyframes dash-1fe28dde {
+@keyframes dash-d04e34ee {
 from {
         stroke-dashoffset: 0px;
         stroke-dasharray: 3% 2%;
@@ -2237,44 +2237,44 @@ to {
 }
 }
 .cube-node {
-foreignObject[data-v-1fe28dde] {
+foreignObject[data-v-d04e34ee] {
         border-radius: 4px;
         contain: layout;
         color: var(--color);
 }
-path[data-v-1fe28dde] {
+path[data-v-d04e34ee] {
         fill: var(--fill, var(--node-bg));
         stroke: var(--node-boundary-stroke, none);
         stroke-width: var(--node-boundary-stroke-width, 1px);
         stroke-dasharray: var(--node-border-dash-array);
         transition: var(--map-transition-duration);
 }
-&:hover > path[data-v-1fe28dde] {
+&:hover > path[data-v-d04e34ee] {
         stroke: var(--node-hover-stroke);
 }
-&[data-editing="true"] > path[data-v-1fe28dde] {
+&[data-editing="true"] > path[data-v-d04e34ee] {
         stroke: black;
         stroke-width: 2;
 }
 }
 .node-selected {
-path[data-v-1fe28dde] {
+path[data-v-d04e34ee] {
         stroke: var(--node-selected-stroke) !important;
         stroke-width: var(--node-selected-stroke-width);
         stroke-dasharray: none;
 }
 }
 .line-delete-selected {
-path[data-v-1fe28dde] {
+path[data-v-d04e34ee] {
         fill: var(--linker-delete-selected-fill) !important;
         filter: var(--linker-delete-selected-filter);
 }
 }
 .node-dragging {
-&[data-v-1fe28dde] {
+&[data-v-d04e34ee] {
     opacity: var(--node-dragging-opacity);
 }
-path[data-v-1fe28dde] {
+path[data-v-d04e34ee] {
         stroke: var(--node-dragging-stroke) !important;
         stroke-width: var(--node-dragging-stroke-width);
         stroke-dasharray: none;
@@ -2282,14 +2282,14 @@ path[data-v-1fe28dde] {
 }
 }
 .node-editable {
-path[data-v-1fe28dde] {
+path[data-v-d04e34ee] {
         /* fill: var(--node-editable-bg) !important; */
         filter: drop-shadow(0px 0px 20px var(--fill));
-        animation: dash-1fe28dde 36s linear infinite;
+        animation: dash-d04e34ee 36s linear infinite;
 }
 }
 .cube-node-box {
-&[data-v-1fe28dde] {
+&[data-v-d04e34ee] {
     margin: 0px !important;
     display: inline-block;
     min-width: var(--node-cbox-min-width);
@@ -2298,7 +2298,7 @@ path[data-v-1fe28dde] {
     transition: 0.2s;
 }
 .node-status {
-&[data-v-1fe28dde] {
+&[data-v-d04e34ee] {
         display: flex;
         flex-flow: row wrap;
         align-items: center;
@@ -2308,19 +2308,41 @@ path[data-v-1fe28dde] {
         border: var(--node-status-border);
         background: var(--node-status-bg);
 }
-&[data-v-1fe28dde]:empty {
+&[data-v-d04e34ee]:empty {
             display: none;
 }
-div[data-v-1fe28dde] {
+div[data-v-d04e34ee] {
             cursor: pointer;
 }
-.status-fold[data-v-1fe28dde] {
+.node-fill-chip[data-v-d04e34ee] {
+            width: 14px;
+            height: 14px;
+            flex: 0 0 14px;
+            border-radius: 3px;
+            border: 1px solid color-mix(in srgb, var(--color) 45%, transparent);
+            background-position:
+                0 0,
+                0 0,
+                0 5px,
+                5px -5px,
+                -5px 0,
+                0 0;
+            background-size:
+                auto,
+                10px 10px,
+                10px 10px,
+                10px 10px,
+                10px 10px,
+                auto;
+            box-shadow: 0 0 0 1px color-mix(in srgb, var(--fill) 65%, transparent);
+}
+.status-fold[data-v-d04e34ee] {
             border-radius: 4px;
             font-size: 10px;
             border: 1px dashed;
             padding: 1px 4px;
 }
-.iconfont[data-v-1fe28dde] {
+.iconfont[data-v-d04e34ee] {
             cursor: pointer;
 }
 }
@@ -5066,14 +5088,83 @@ div[data-v-de9c6e02]::before {
 }
 
 
-.ui-float[data-v-eaaf7516] {
+.float-node-fill {
+&[data-v-2fc8ff3c] {
+    position: fixed;
+    padding: 8px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background-color: var(--menu-bg);
+    box-shadow: var(--float-node-layout-shadow);
+}
+.menu-title {
+&[data-v-2fc8ff3c] {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 10px;
+        background: var(--menu-title-bg);
+        color: var(--menu-title-icon-color);
+        text-shadow: 0px 0px 4px var(--menu-title-icon-color);
+        border-radius: 4px;
+}
+.title {
+&[data-v-2fc8ff3c]::before {
+                margin-right: 10px;
+                color: var(--menu-title-icon-color);
+                text-shadow: 0px 0px 4px var(--menu-title-icon-color);
+}
+}
+}
+.box-items {
+&[data-v-2fc8ff3c] {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        gap: 2px;
+        margin-top: 4px;
+}
+.alpha-item[data-v-2fc8ff3c] {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-width: 30px;
+            height: 30px;
+            font-size: 12px;
+            font-weight: 300;
+            cursor: pointer;
+            border-radius: 4px;
+            color: var(--menu-item-color);
+}
+.active[data-v-2fc8ff3c] {
+            background: deepskyblue;
+}
+.background-item[data-v-2fc8ff3c] {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            white-space: nowrap;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 12px;
+            font-weight: 300;
+            height: 30px;
+            width: 30px;
+            transition: 0.5s;
+            color: var(--menu-item-color);
+}
+}
+}
+
+
+.ui-float[data-v-1744afa0] {
     z-index: 9;
 }
 
 
 .ui-sideitem-toolbar {
 .sidebar-panel-toolbox {
-&[data-v-1fbbd59a] {
+&[data-v-1c71f35d] {
         background: var(--sidebar-panel-toolbox-bg);
         display: flex;
         align-items: center;
@@ -5084,40 +5175,40 @@ div[data-v-de9c6e02]::before {
         border-radius: 4px;
 }
 .tip {
-&[data-v-1fbbd59a] {
+&[data-v-1c71f35d] {
             text-shadow: 0px 0px 3px;
             border-radius: 100px;
             padding: 0px 10px;
 }
 .iconfont {
-&[data-v-1fbbd59a] {
+&[data-v-1c71f35d] {
                 font-size: var(--ui-icon-size-lv2);
 }
-&[data-v-1fbbd59a]:hover {
+&[data-v-1c71f35d]:hover {
                     color: var(--ui-catalogue-tools-hover-color);
 }
 }
 }
 .iconfont {
-&[data-v-1fbbd59a] {
+&[data-v-1c71f35d] {
             font-size: var(--ui-icon-size-lv2);
 }
-&[data-v-1fbbd59a]:hover {
+&[data-v-1c71f35d]:hover {
                 color: var(--ui-catalogue-tools-hover-color);
 }
 }
-.tools-icon[data-v-1fbbd59a] {
+.tools-icon[data-v-1c71f35d] {
             display: flex;
             align-items: center;
             gap: 10px;
 }
 }
 .tool-items-disable {
-&[data-v-1fbbd59a] {
+&[data-v-1c71f35d] {
         border: var(--ui-toolbar-border-disable);
         background: var(--ui-toolbar-disable-group-bg);
 }
-&[data-v-1fbbd59a]::before {
+&[data-v-1c71f35d]::before {
             content: "已禁用";
             display: block;
             padding: 4px;
@@ -5127,16 +5218,16 @@ div[data-v-de9c6e02]::before {
             border-radius: 4px;
             color: var(--ui-toolbar-disable-group-title-color);
 }
-& > div[data-v-1fbbd59a]:hover {
+& > div[data-v-1c71f35d]:hover {
             background: var(--ui-toolbar-disable-group-title-bg);
 }
 }
 .tool-items-enable {
-&[data-v-1fbbd59a] {
+&[data-v-1c71f35d] {
         border: var(--ui-toolbar-border-enable);
         background: var(--ui-toolbar-enable-group-bg);
 }
-&[data-v-1fbbd59a]::before {
+&[data-v-1c71f35d]::before {
             content: "已启用";
             padding: 4px;
             display: block;
@@ -5146,16 +5237,16 @@ div[data-v-de9c6e02]::before {
             border-radius: 4px;
             color: var(--ui-toolbar-enable-group-title-color);
 }
-& > div[data-v-1fbbd59a]:hover {
+& > div[data-v-1c71f35d]:hover {
             background: var(--ui-toolbar-enable-group-title-bg);
 }
 }
-.tool-map[data-v-1fbbd59a] {
+.tool-map[data-v-1c71f35d] {
         color: var(--toolbar-toolmap-color);
 }
 .tool-items-enable,
     .tool-items-disable {
-&[data-v-1fbbd59a] {
+&[data-v-1c71f35d] {
         border-radius: 4px;
         display: flex;
         justify-content: center;
@@ -5164,7 +5255,7 @@ div[data-v-de9c6e02]::before {
         padding: 5px;
         margin-bottom: 4px;
 }
-& > div[data-v-1fbbd59a] {
+& > div[data-v-1c71f35d] {
             color: var(--toolbar-icon-color);
             background: var(--toolbar-icon-bg);
             border: var(--toolbar-icon-border);
@@ -5172,38 +5263,38 @@ div[data-v-de9c6e02]::before {
             border-radius: 5px;
             cursor: pointer;
 }
-.iconfont[data-v-1fbbd59a] {
+.iconfont[data-v-1c71f35d] {
             font-size: 24px;
             text-align: center;
 }
-.grid-sub[data-v-1fbbd59a] {
+.grid-sub[data-v-1c71f35d] {
             justify-items: center;
             display: grid;
             gap: 10px;
 }
-.grid-col-2[data-v-1fbbd59a] {
+.grid-col-2[data-v-1c71f35d] {
             grid-template-columns: repeat(2, 1fr);
             grid-column: span 2;
 }
-.grid-col-3[data-v-1fbbd59a] {
+.grid-col-3[data-v-1c71f35d] {
             grid-template-columns: repeat(3, 1fr);
             grid-column: span 3;
 }
-.grid-col-4[data-v-1fbbd59a] {
+.grid-col-4[data-v-1c71f35d] {
             grid-template-columns: repeat(4, 1fr);
             grid-column: span 4;
 }
-.grid-col-5[data-v-1fbbd59a] {
+.grid-col-5[data-v-1c71f35d] {
             grid-template-columns: repeat(5, 1fr);
             grid-column: span 5;
 }
-.grid-col-6[data-v-1fbbd59a] {
+.grid-col-6[data-v-1c71f35d] {
             grid-template-columns: repeat(6, 1fr);
             grid-column: span 6;
 }
 }
 .tool-group {
-&[data-v-1fbbd59a] {
+&[data-v-1c71f35d] {
         display: flex;
         flex-flow: row nowrap;
         gap: 8px;
@@ -5214,10 +5305,10 @@ div[data-v-de9c6e02]::before {
         border-radius: 5px;
         cursor: pointer;
 }
-&[data-v-1fbbd59a]:hover {
+&[data-v-1c71f35d]:hover {
             background: var(--toolbar-custom-card-hover-bg);
 }
-& > div[data-v-1fbbd59a] {
+& > div[data-v-1c71f35d] {
             font-size: 24px;
             text-align: center;
 }
@@ -5416,17 +5507,17 @@ div[data-v-de9c6e02]::before {
 
 
 .ui-sideitem-search {
-&[data-v-cb678bf6] {
+&[data-v-b1b3f1a4] {
     height: 100%;
     overflow-y: scroll;
     padding-bottom: 6px;
 }
 .search-bar {
-&[data-v-cb678bf6] {
+&[data-v-b1b3f1a4] {
         padding: 0 4px 6px;
 }
 .search-input-box {
-&[data-v-cb678bf6] {
+&[data-v-b1b3f1a4] {
             display: flex;
             align-items: center;
             flex-flow: row nowrap;
@@ -5435,12 +5526,12 @@ div[data-v-de9c6e02]::before {
             border-radius: 8px;
             padding: 6px 8px;
 }
-.box-input[data-v-cb678bf6] {
+.box-input[data-v-b1b3f1a4] {
                 flex: 1;
                 margin: 0;
 }
 .iconfont {
-&[data-v-cb678bf6] {
+&[data-v-b1b3f1a4] {
                 background: var(--ui-search-icon-bg);
                 color: var(--ui-search-icon-color);
                 font-size: 22px;
@@ -5454,7 +5545,7 @@ div[data-v-de9c6e02]::before {
                     transform 0.15s ease,
                     box-shadow 0.2s ease;
 }
-&[data-v-cb678bf6]:hover {
+&[data-v-b1b3f1a4]:hover {
                     background: var(--ui-search-icon-hover-bg);
                     color: var(--ui-search-icon-hover-color);
                     transform: scale(1.08);
@@ -5464,11 +5555,11 @@ div[data-v-de9c6e02]::before {
 }
 }
 .search-result {
-&[data-v-cb678bf6] {
+&[data-v-b1b3f1a4] {
         padding: 0 4px;
 }
 .search-result-item {
-&[data-v-cb678bf6] {
+&[data-v-b1b3f1a4] {
             padding: 7px 10px 7px 14px;
             cursor: pointer;
             border-radius: 6px;
@@ -5482,7 +5573,7 @@ div[data-v-de9c6e02]::before {
                 transform 0.15s ease,
                 box-shadow 0.18s ease;
 }
-&[data-v-cb678bf6]::before {
+&[data-v-b1b3f1a4]::before {
                 content: "";
                 position: absolute;
                 left: 0;
@@ -5494,19 +5585,19 @@ div[data-v-de9c6e02]::before {
                 opacity: 0;
                 transition: opacity 0.18s ease;
 }
-&[data-v-cb678bf6]:nth-child(even) {
+&[data-v-b1b3f1a4]:nth-child(even) {
                 background: var(--ui-search-item-even-bg);
 }
-&[data-v-cb678bf6]:nth-child(odd) {
+&[data-v-b1b3f1a4]:nth-child(odd) {
                 background: var(--ui-search-item-odd-bg);
 }
 &:hover {
-&[data-v-cb678bf6] {
+&[data-v-b1b3f1a4] {
                 background: var(--ui-search-item-hover-bg);
                 transform: translateX(2px);
                 box-shadow: var(--ui-search-item-hover-shadow);
 }
-&[data-v-cb678bf6]::before {
+&[data-v-b1b3f1a4]::before {
                     opacity: 1;
 }
 }
@@ -5516,14 +5607,14 @@ div[data-v-de9c6e02]::before {
 
 
 .ui-sideitem-theme {
-&[data-v-9e75cb34] {
+&[data-v-06821daa] {
     height: 100%;
     overflow-y: scroll;
     user-select: none;
     padding: 0 0 10px;
 }
 .theme-toolbox {
-&[data-v-9e75cb34] {
+&[data-v-06821daa] {
         background: linear-gradient(135deg, color-mix(in srgb, var(--page-bg, #ffffff) 86%, transparent) 0%, color-mix(in srgb, var(--selection-bg, #cccccc) 16%, transparent) 100%), var(--sidebar-panel-toolbox-bg);
         display: flex;
         align-items: center;
@@ -5532,45 +5623,45 @@ div[data-v-de9c6e02]::before {
         padding: 10px 12px;
         margin: 6px;
 }
-.toolbox-copy[data-v-9e75cb34] {
+.toolbox-copy[data-v-06821daa] {
             min-width: 0;
 }
-.toolbox-title[data-v-9e75cb34] {
+.toolbox-title[data-v-06821daa] {
             font-size: 14px;
             font-weight: 700;
             color: var(--color);
             letter-spacing: 0.08em;
 }
-.toolbox-desc[data-v-9e75cb34] {
+.toolbox-desc[data-v-06821daa] {
             font-size: 12px;
             color: color-mix(in srgb, var(--color, #333333) 64%, transparent);
             margin-top: 2px;
 }
 .iconfont {
-&[data-v-9e75cb34] {
+&[data-v-06821daa] {
             font-size: var(--ui-icon-size-lv2);
             color: var(--ui-theme-item-color);
             transition:
                 color 0.2s ease,
                 transform 0.2s ease;
 }
-&[data-v-9e75cb34]:hover {
+&[data-v-06821daa]:hover {
                 color: var(--ui-catalogue-tools-hover-color);
                 transform: translateX(-2px);
 }
 }
-.tools-icon[data-v-9e75cb34] {
+.tools-icon[data-v-06821daa] {
             display: flex;
             align-items: center;
             gap: 10px;
 }
 }
 .list-box {
-&[data-v-9e75cb34] {
+&[data-v-06821daa] {
         padding: 0;
 }
 .bg-item-clear {
-&[data-v-9e75cb34] {
+&[data-v-06821daa] {
             display: flex;
             justify-content: center;
             align-items: center;
@@ -5588,14 +5679,14 @@ div[data-v-de9c6e02]::before {
                 transform 0.2s ease;
 }
 .clear-shape {
-&[data-v-9e75cb34] {
+&[data-v-06821daa] {
                 width: 44px;
                 height: 44px;
                 clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
                 position: relative;
 }
-&[data-v-9e75cb34]::before,
-                &[data-v-9e75cb34]::after {
+&[data-v-06821daa]::before,
+                &[data-v-06821daa]::after {
                     content: "";
                     position: absolute;
                     inset: 50% auto auto 50%;
@@ -5604,19 +5695,19 @@ div[data-v-de9c6e02]::before {
                     background: color-mix(in srgb, var(--selection-bg, #bbbbbb) 65%, transparent);
                     transform-origin: center;
 }
-&[data-v-9e75cb34]::before {
+&[data-v-06821daa]::before {
                     transform: translate(-50%, -50%) rotate(45deg);
 }
-&[data-v-9e75cb34]::after {
+&[data-v-06821daa]::after {
                     transform: translate(-50%, -50%) rotate(-45deg);
 }
 }
 }
-.active-theme[data-v-9e75cb34] {
+.active-theme[data-v-06821daa] {
             border: 2px solid black;
 }
 .bg-item {
-&[data-v-9e75cb34] {
+&[data-v-06821daa] {
             cursor: pointer;
             border-radius: 4px;
             overflow: hidden;
@@ -5631,7 +5722,7 @@ div[data-v-de9c6e02]::before {
             contain: layout paint style;
             transform:translateZ(0);
 }
-.extention[data-v-9e75cb34] {
+.extention[data-v-06821daa] {
                 position: absolute;
                 right: 6px;
                 bottom: 6px;
@@ -5643,35 +5734,35 @@ div[data-v-de9c6e02]::before {
                 border-radius: 4px;
                 z-index: 1;
 }
-.extention-image[data-v-9e75cb34] {
+.extention-image[data-v-06821daa] {
                 color: var(--color);
                 background: var(--text-hover-bg);
 }
-.extention-video[data-v-9e75cb34] {
+.extention-video[data-v-06821daa] {
                 color: var(--selection-color);
                 background: var(--selection-bg);
 }
-video[data-v-9e75cb34] {
+video[data-v-06821daa] {
                 width: 100%;
                 height: 100%;
                 object-fit: cover;
                 display: block;
 }
-img[data-v-9e75cb34] {
+img[data-v-06821daa] {
                 width: 100%;
                 height: 100%;
                 object-fit: cover;
                 display: block;
 }
 }
-.bg-item[data-v-9e75cb34]:hover,
-        .bg-item-clear[data-v-9e75cb34]:hover {
+.bg-item[data-v-06821daa]:hover,
+        .bg-item-clear[data-v-06821daa]:hover {
             transform: translateY(-3px);
             box-shadow: var(--ui-theme-item-hover-shadow);
 }
 }
 .list-title {
-&[data-v-9e75cb34] {
+&[data-v-06821daa] {
         color: var(--ui-theme-title-color);
         padding: 8px 10px;
         display: flex;
@@ -5681,39 +5772,39 @@ img[data-v-9e75cb34] {
         margin: 0 0 10px;
         border-radius: 4px;
 }
-.section-title[data-v-9e75cb34] {
+.section-title[data-v-06821daa] {
             font-size: 14px;
             font-weight: 700;
             letter-spacing: 0.04em;
 }
-.section-desc[data-v-9e75cb34] {
+.section-desc[data-v-06821daa] {
             font-size: 12px;
             color: color-mix(in srgb, currentColor 65%, transparent);
             margin-top: 2px;
 }
 .iconfont {
-&[data-v-9e75cb34] {
+&[data-v-06821daa] {
             cursor: pointer;
             transition:
                 color 0.2s ease,
                 transform 0.2s ease;
 }
-&[data-v-9e75cb34]:hover {
+&[data-v-06821daa]:hover {
                 transform: rotate(-20deg);
 }
 }
 }
-.list-background[data-v-9e75cb34] {
+.list-background[data-v-06821daa] {
         background: var(--ui-background-title-bg);
         color: var(--ui-background-title-color);
 }
-.list-theme[data-v-9e75cb34] {
+.list-theme[data-v-06821daa] {
         background: var(--ui-theme-title-bg);
 }
-.list-note-theme[data-v-9e75cb34] {
+.list-note-theme[data-v-06821daa] {
         background: var(--ui-theme-title-bg);
 }
-.theme-list[data-v-9e75cb34] {
+.theme-list[data-v-06821daa] {
         border: var(--sidebar-cube-border);
         background: var(--ui-theme-list-bg);
         border-radius: 12px;
@@ -5722,7 +5813,7 @@ img[data-v-9e75cb34] {
         box-shadow: var(--ui-theme-list-shadow);
 }
 .note-theme-list {
-&[data-v-9e75cb34] {
+&[data-v-06821daa] {
         border: var(--sidebar-cube-border);
         border-radius: 6px;
         padding: 12px;
@@ -5733,7 +5824,7 @@ img[data-v-9e75cb34] {
         position: relative;
         overflow: hidden;
 }
-&[data-v-9e75cb34]::before {
+&[data-v-06821daa]::before {
             content: "";
             position: absolute;
             inset: 0 auto auto 0;
@@ -5742,13 +5833,13 @@ img[data-v-9e75cb34] {
             background: radial-gradient(circle, color-mix(in srgb, var(--selection-bg, #bbbbbb) 10%, transparent) 0%, transparent 72%);
             pointer-events: none;
 }
-.theme-card-grid[data-v-9e75cb34] {
+.theme-card-grid[data-v-06821daa] {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
             gap: 14px;
 }
 .theme-card {
-&[data-v-9e75cb34] {
+&[data-v-06821daa] {
             padding: 14px;
             border: 1px solid color-mix(in srgb, var(--card-primary) 28%, transparent);
             border-radius: 6px;
@@ -5769,7 +5860,7 @@ img[data-v-9e75cb34] {
                 0 12px 24px color-mix(in srgb, var(--card-primary) 10%, transparent),
                 inset 0 1px 0 rgba(255, 255, 255, 0.55);
 }
-&[data-v-9e75cb34]::before {
+&[data-v-06821daa]::before {
                 content: "";
                 position: absolute;
                 inset: -1px;
@@ -5778,7 +5869,7 @@ img[data-v-9e75cb34] {
                 clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
                 pointer-events: none;
 }
-&[data-v-9e75cb34]::after {
+&[data-v-06821daa]::after {
                 content: "";
                 position: absolute;
                 right: -34px;
@@ -5788,30 +5879,30 @@ img[data-v-9e75cb34] {
                 background: radial-gradient(circle, color-mix(in srgb, var(--card-accent) 24%, transparent) 0%, transparent 70%);
                 pointer-events: none;
 }
-.theme-card-head[data-v-9e75cb34] {
+.theme-card-head[data-v-06821daa] {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
                 gap: 10px;
 }
-.theme-motif[data-v-9e75cb34] {
+.theme-motif[data-v-06821daa] {
                 font-size: 12px;
                 color: color-mix(in srgb, var(--card-ink) 78%, transparent);
                 padding: 5px 10px;
                 max-width: 72%;
 }
-.theme-key[data-v-9e75cb34] {
+.theme-key[data-v-06821daa] {
                 font-size: 11px;
                 font-weight: 700;
                 color: color-mix(in srgb, var(--card-primary) 84%, var(--card-ink) 16%);
                 letter-spacing: 0.08em;
                 text-transform: uppercase;
 }
-.geo[data-v-9e75cb34] {
+.geo[data-v-06821daa] {
                 position: absolute;
                 display: block;
 }
-.geo-diamond[data-v-9e75cb34] {
+.geo-diamond[data-v-06821daa] {
                 width: 74px;
                 height: 74px;
                 left: 12px;
@@ -5820,7 +5911,7 @@ img[data-v-9e75cb34] {
                 clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
                 box-shadow: 0 10px 24px color-mix(in srgb, var(--card-primary) 22%, transparent);
 }
-.geo-band[data-v-9e75cb34] {
+.geo-band[data-v-06821daa] {
                 width: 88px;
                 height: 18px;
                 right: 8px;
@@ -5830,7 +5921,7 @@ img[data-v-9e75cb34] {
                 transform: rotate(-17deg);
 }
 .geo-orbit {
-&[data-v-9e75cb34] {
+&[data-v-06821daa] {
                 width: 120px;
                 height: 54px;
                 right: 10px;
@@ -5839,7 +5930,7 @@ img[data-v-9e75cb34] {
                 border-radius: 999px;
                 transform: rotate(-18deg);
 }
-&[data-v-9e75cb34]::before {
+&[data-v-06821daa]::before {
                     content: "";
                     position: absolute;
                     top: 50%;
@@ -5852,7 +5943,7 @@ img[data-v-9e75cb34] {
                     box-shadow: 0 0 12px color-mix(in srgb, var(--card-accent) 40%, transparent);
 }
 }
-.geo-cut[data-v-9e75cb34] {
+.geo-cut[data-v-06821daa] {
                 width: 48px;
                 height: 48px;
                 left: 92px;
@@ -5861,7 +5952,7 @@ img[data-v-9e75cb34] {
                 border: 1px solid color-mix(in srgb, var(--card-primary) 24%, transparent);
                 clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%);
 }
-.theme-card-foot[data-v-9e75cb34] {
+.theme-card-foot[data-v-06821daa] {
                 position: relative;
                 z-index: 1;
                 display: flex;
@@ -5869,39 +5960,39 @@ img[data-v-9e75cb34] {
                 justify-content: center;
                 align-items: center;
 }
-.theme-name[data-v-9e75cb34] {
+.theme-name[data-v-06821daa] {
                 font-size: 15px;
                 font-weight: 700;
 }
-.theme-palette-text[data-v-9e75cb34] {
+.theme-palette-text[data-v-06821daa] {
                 margin-top: 4px;
                 font-size: 12px;
                 color: color-mix(in srgb, var(--card-ink) 65%, transparent);
 }
-.theme-swatches[data-v-9e75cb34] {
+.theme-swatches[data-v-06821daa] {
                 display: flex;
                 align-items: center;
                 gap: 8px;
                 margin-top: 12px;
 }
-.swatch[data-v-9e75cb34] {
+.swatch[data-v-06821daa] {
                 width: 18px;
                 height: 18px;
                 border-radius: 6px;
                 border: 1px solid rgba(255, 255, 255, 0.5);
                 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
 }
-.swatch-primary[data-v-9e75cb34] {
+.swatch-primary[data-v-06821daa] {
                 background: var(--card-primary);
 }
-.swatch-accent[data-v-9e75cb34] {
+.swatch-accent[data-v-06821daa] {
                 background: var(--card-accent);
 }
-.swatch-surface[data-v-9e75cb34] {
+.swatch-surface[data-v-06821daa] {
                 background: var(--card-surface);
                 border-color: color-mix(in srgb, var(--card-primary) 18%, transparent);
 }
-&[data-v-9e75cb34]:hover {
+&[data-v-06821daa]:hover {
                 transform: translateY(-4px);
                 border-color: color-mix(in srgb, var(--card-primary) 48%, transparent);
                 box-shadow:
@@ -5909,10 +6000,10 @@ img[data-v-9e75cb34] {
                     0 0 18px color-mix(in srgb, var(--card-accent) 14%, transparent),
                     inset 0 1px 0 rgba(255, 255, 255, 0.12);
 }
-&[data-v-9e75cb34]:active {
+&[data-v-06821daa]:active {
                 transform: translateY(-1px);
 }
-&.active-theme[data-v-9e75cb34] {
+&.active-theme[data-v-06821daa] {
                 border-color: color-mix(in srgb, var(--card-primary) 68%, transparent) !important;
                 box-shadow:
                     0 0 0 1px color-mix(in srgb, var(--card-primary) 34%, transparent),
@@ -5923,38 +6014,147 @@ img[data-v-9e75cb34] {
 }
 }
 .background-list {
-&[data-v-9e75cb34] {
+&[data-v-06821daa] {
         margin: 6px;
         border: var(--ui-background-list-border);
-        background: linear-gradient(155deg, color-mix(in srgb, var(--page-bg, #ffffff) 96%, transparent) 0%, color-mix(in srgb, var(--selection-bg, #cccccc) 6%, transparent) 100%), var(--ui-background-list-bg);
         border-radius: 6px;
         padding: 12px;
         box-shadow: var(--ui-theme-list-shadow);
 }
+.background-mode-grid[data-v-06821daa] {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+            gap: 10px;
+            margin-bottom: 10px;
+}
+.background-mode-card {
+&[data-v-06821daa] {
+            border: 1px solid color-mix(in srgb, var(--selection-bg, #bbbbbb) 26%, transparent);
+            background: linear-gradient(135deg, color-mix(in srgb, var(--page-bg, #ffffff) 88%, transparent) 0%, color-mix(in srgb, var(--selection-bg, #bbbbbb) 10%, transparent) 100%);
+            color: var(--color);
+            border-radius: 6px;
+            display: grid;
+            grid-template-columns: 72px minmax(0, 1fr) auto;
+            align-items: center;
+            gap: 10px;
+            padding: 8px;
+            text-align: left;
+            cursor: pointer;
+            min-width: 0;
+            transition:
+                border-color 0.2s ease,
+                box-shadow 0.2s ease,
+                transform 0.2s ease;
+}
+.mode-preview[data-v-06821daa] {
+                width: 72px;
+                height: 50px;
+                border-radius: 4px;
+                overflow: hidden;
+                border: 1px solid color-mix(in srgb, var(--selection-bg, #bbbbbb) 24%, transparent);
+                background: color-mix(in srgb, var(--page-bg, #ffffff) 68%, var(--selection-bg, #bbbbbb) 12%);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+}
+.mode-preview-empty {
+&[data-v-06821daa] {
+                width: 22px;
+                height: 22px;
+                border-radius: 50%;
+                border: 2px solid color-mix(in srgb, var(--selection-bg, #bbbbbb) 45%, transparent);
+                position: relative;
+}
+&[data-v-06821daa]::after {
+                    content: "";
+                    position: absolute;
+                    inset: 9px -3px auto;
+                    height: 2px;
+                    background: color-mix(in srgb, var(--selection-bg, #bbbbbb) 45%, transparent);
+                    transform: rotate(-38deg);
+}
+}
+.mode-copy[data-v-06821daa] {
+                min-width: 0;
+                display: flex;
+                flex-flow: column nowrap;
+                gap: 2px;
+}
+.mode-title[data-v-06821daa] {
+                font-size: 13px;
+                font-weight: 700;
+}
+.mode-name[data-v-06821daa],
+            .mode-hint[data-v-06821daa] {
+                display: block;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                font-size: 12px;
+                color: color-mix(in srgb, var(--color, #333333) 64%, transparent);
+}
+.mode-current[data-v-06821daa] {
+                border-radius: 4px;
+                padding: 3px 6px;
+                font-size: 11px;
+                font-weight: 700;
+                color: var(--selection-color);
+                background: var(--selection-bg);
+}
+&[data-v-06821daa]:hover {
+                transform: translateY(-2px);
+                box-shadow: var(--ui-theme-item-hover-shadow);
+}
+&.selected[data-v-06821daa] {
+                border-color: color-mix(in srgb, var(--selection-bg, #bbbbbb) 72%, transparent);
+                box-shadow: 0 0 0 1px color-mix(in srgb, var(--selection-bg, #bbbbbb) 34%, transparent);
+}
+&.live[data-v-06821daa] {
+                background: linear-gradient(135deg, color-mix(in srgb, var(--page-bg, #ffffff) 82%, transparent) 0%, color-mix(in srgb, var(--selection-bg, #bbbbbb) 18%, transparent) 100%);
+}
+}
 .background-actions {
-&[data-v-9e75cb34] {
+&[data-v-06821daa] {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
             gap: 10px;
             margin-bottom: 10px;
 }
-.bg-item-clear[data-v-9e75cb34] {
+.bg-item-clear[data-v-06821daa] {
                 min-height: 96px;
                 height: 96px;
 }
 }
-.background-summary[data-v-9e75cb34] {
+.background-summary[data-v-06821daa] {
             padding: 0 2px 10px;
             font-size: 12px;
             color: color-mix(in srgb, var(--ui-background-title-color, currentColor) 68%, transparent);
             user-select: none;
 }
 .background-grid {
-&[data-v-9e75cb34] {
+&[data-v-06821daa] {
             display: grid;
             align-items: start;
 }
-.virtual-spacer[data-v-9e75cb34] {
+.live-background[data-v-06821daa] {
+                box-shadow:
+                    var(--ui-theme-bg-item-shadow),
+                    0 0 0 2px color-mix(in srgb, var(--selection-bg, #bbbbbb) 48%, transparent);
+}
+.live-badge[data-v-06821daa] {
+                position: absolute;
+                left: 6px;
+                top: 6px;
+                z-index: 1;
+                padding: 2px 6px;
+                border-radius: 4px;
+                color: var(--selection-color);
+                background: color-mix(in srgb, var(--selection-bg, #000000) 82%, transparent);
+                font-size: 11px;
+                font-weight: 700;
+                pointer-events: none;
+}
+.virtual-spacer[data-v-06821daa] {
                 grid-column: 1 / -1;
                 pointer-events: none;
 }
@@ -5964,18 +6164,18 @@ img[data-v-9e75cb34] {
 
 
 .ui-presets {
-&[data-v-982d8b0c] {
+&[data-v-43116993] {
     padding-bottom: 6px;
 }
 .box-presets {
-&[data-v-982d8b0c] {
+&[data-v-43116993] {
         padding: 4px;
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
         gap: 8px;
 }
 .preset-item {
-&[data-v-982d8b0c] {
+&[data-v-43116993] {
             padding: 8px 10px;
             border-radius: 4px;
             position: relative;
@@ -5993,7 +6193,7 @@ img[data-v-9e75cb34] {
                 box-shadow 0.22s ease,
                 transform 0.18s ease;
 }
-&[data-v-982d8b0c]::before {
+&[data-v-43116993]::before {
                 content: "";
                 position: absolute;
                 top: 0;
@@ -6005,26 +6205,26 @@ img[data-v-9e75cb34] {
                 transition: opacity 0.2s ease;
 }
 &:hover {
-&[data-v-982d8b0c] {
+&[data-v-43116993] {
                 background: var(--ui-presets-item-hover-bg);
                 box-shadow: var(--ui-presets-item-hover-shadow);
 }
-&[data-v-982d8b0c]::before {
+&[data-v-43116993]::before {
                     opacity: 1;
 }
-.close-corner[data-v-982d8b0c] {
+.close-corner[data-v-43116993] {
                     opacity: 1;
                     transform: scale(1);
 }
 }
-.preset-item-info[data-v-982d8b0c] {
+.preset-item-info[data-v-43116993] {
                 flex: 1;
                 display: flex;
                 flex-flow: column nowrap;
                 min-width: 0;
 }
 .close-corner {
-&[data-v-982d8b0c] {
+&[data-v-43116993] {
                 flex-shrink: 0;
                 cursor: pointer;
                 color: var(--ui-presets-delete-color);
@@ -6036,21 +6236,21 @@ img[data-v-9e75cb34] {
                     opacity 0.2s ease,
                     transform 0.18s ease;
 }
-&[data-v-982d8b0c]:hover {
+&[data-v-43116993]:hover {
                     color: var(--ui-presets-delete-hover-color);
 }
 }
-.cube-name[data-v-982d8b0c],
-            .cube-type[data-v-982d8b0c] {
+.cube-name[data-v-43116993],
+            .cube-type[data-v-43116993] {
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
 }
-.cube-name[data-v-982d8b0c] {
+.cube-name[data-v-43116993] {
                 font-size: var(--dialog-cubelist-name-size);
                 font-weight: 500;
 }
-.cube-type[data-v-982d8b0c] {
+.cube-type[data-v-43116993] {
                 font-size: var(--dialog-cubelist-type-size);
                 color: var(--ui-presets-item-type-color);
                 margin-top: 2px;
@@ -6270,11 +6470,11 @@ img[data-v-9e75cb34] {
 
 
 .ui-sidebar {
-&[data-v-3d1292a4] {
+&[data-v-432a95d2] {
     display: flex;
     flex-flow: row nowrap;
 }
-.sidebar-icons[data-v-3d1292a4] {
+.sidebar-icons[data-v-432a95d2] {
         box-sizing: border-box;
         padding: 20px 6px;
         display: flex;
@@ -6287,14 +6487,14 @@ img[data-v-9e75cb34] {
         z-index: calc(var(--ui-z-index) + 1);
         flex-shrink: 0;
 }
-.active-sideitem[data-v-3d1292a4] {
+.active-sideitem[data-v-432a95d2] {
         color: var(--sidebar-icon-active-color);
         background: var(--sidebar-icon-active-gradient);
         text-shadow: var(--sidebar-icon-active-shadow);
         position: relative;
 }
 .iconfont {
-&[data-v-3d1292a4] {
+&[data-v-432a95d2] {
         font-size: 22px;
         cursor: pointer;
         background: var(--sidebar-icon-bg);
@@ -6308,7 +6508,7 @@ img[data-v-9e75cb34] {
             transform var(--transition-spring, 0.36s cubic-bezier(0.34, 1.56, 0.64, 1));
         will-change: transform;
 }
-&[data-v-3d1292a4]:hover {
+&[data-v-432a95d2]:hover {
             background: var(--sidebar-icon-hover-bg);
             color: var(--sidebar-icon-hover-color);
             transform: scale(1.15);
@@ -6316,7 +6516,7 @@ img[data-v-9e75cb34] {
 }
 }
 }
-.sidebar-dialog-overlay[data-v-3d1292a4] {
+.sidebar-dialog-overlay[data-v-432a95d2] {
     position: fixed;
     inset: 0;
     z-index: var(--float-zindex);
@@ -6327,11 +6527,13 @@ img[data-v-9e75cb34] {
     padding: 9vh 20px 28px;
 }
 .sidebar-dialog-panel {
-&[data-v-3d1292a4] {
+&[data-v-432a95d2] {
     position: relative;
     width: min(1080px, calc(100vw - 40px));
     height: min(760px, calc(100vh - 14vh));
     background: var(--dialog-cubelist-bg);
+    backdrop-filter: var(--sidebar-panel-backdrop, blur(14px) saturate(140%));
+    -webkit-backdrop-filter: var(--sidebar-panel-backdrop, blur(14px) saturate(140%));
     border-radius: 8px;
     border: var(--dialog-cubelist-border);
     box-shadow: var(--dialog-cubelist-box-shadow);
@@ -6343,7 +6545,7 @@ img[data-v-9e75cb34] {
     color: var(--dialog-cubelist-input-color);
 }
 .close-corner {
-&[data-v-3d1292a4] {
+&[data-v-432a95d2] {
         position: absolute;
         right: 0px;
         top: 8px;
@@ -6362,12 +6564,12 @@ img[data-v-9e75cb34] {
         z-index: 2;
         will-change: transform;
 }
-&[data-v-3d1292a4]:hover {
+&[data-v-432a95d2]:hover {
             opacity: 1;
             transform: scale(1.08);
 }
 }
-.sidebar-dialog-header[data-v-3d1292a4] {
+.sidebar-dialog-header[data-v-432a95d2] {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -6376,7 +6578,7 @@ img[data-v-9e75cb34] {
         flex-shrink: 0;
 }
 .sidebar-tabs {
-&[data-v-3d1292a4] {
+&[data-v-432a95d2] {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -6387,7 +6589,7 @@ img[data-v-9e75cb34] {
         flex-shrink: 0;
 }
 .sidebar-tab {
-&[data-v-3d1292a4] {
+&[data-v-432a95d2] {
             appearance: none;
             border: 1px solid color-mix(in srgb, var(--selection-bg, #0891b2) 24%, transparent);
             background: linear-gradient(135deg, color-mix(in srgb, var(--page-bg, #ffffff) 82%, var(--selection-bg, #0891b2) 10%) 0%, color-mix(in srgb, var(--menu-bg, #f2f2f2) 88%, var(--selection-bg, #0891b2) 12%) 100%), color-mix(in srgb, var(--sidebar-bg, transparent) 70%, transparent);
@@ -6412,30 +6614,30 @@ img[data-v-9e75cb34] {
                 box-shadow var(--transition-base, 0.24s),
                 transform var(--transition-spring, 0.36s cubic-bezier(0.34, 1.56, 0.64, 1));
 }
-.iconfont[data-v-3d1292a4] {
+.iconfont[data-v-432a95d2] {
                 font-size: 17px;
                 line-height: 1;
 }
-&[data-v-3d1292a4]:hover {
+&[data-v-432a95d2]:hover {
                 background: var(--dialog-cubelist-itembox-hover-bg);
                 border-color: color-mix(in srgb, var(--selection-bg, #0891b2) 42%, transparent);
                 transform: translateY(-1px);
 }
 &.active {
-&[data-v-3d1292a4] {
+&[data-v-432a95d2] {
                 background: var(--dialog-cubelist-active-bg);
                 color: var(--dialog-cubelist-active-color);
                 border-color: color-mix(in srgb, var(--selection-bg, #0891b2) 52%, transparent);
                 box-shadow: var(--dialog-cubelist-active-shadow);
 }
-.iconfont[data-v-3d1292a4] {
+.iconfont[data-v-432a95d2] {
                     color: var(--dialog-cubelist-active-icon-color);
 }
 }
 }
 }
 .sideitem-component {
-&[data-v-3d1292a4] {
+&[data-v-432a95d2] {
         overflow: hidden;
         flex: 1;
         min-height: 0;
@@ -6443,34 +6645,38 @@ img[data-v-9e75cb34] {
         position: relative;
 }
 .sidebar-module-pane {
-&[data-v-3d1292a4] {
+&[data-v-432a95d2] {
             position: absolute;
             inset: 12px;
             overflow: hidden;
+            box-sizing: border-box;
+            border: 1px solid color-mix(in srgb, var(--dialog-cubelist-itembox-hover-bg) 18%, transparent);
+            border-radius: 6px;
+            -webkit-backdrop-filter: blur(8px);
             opacity: 0;
             visibility: hidden;
             pointer-events: none;
             transition: opacity var(--transition-fast, 0.15s);
             contain: layout paint style;
 }
-&.active[data-v-3d1292a4] {
+&.active[data-v-432a95d2] {
                 opacity: 1;
                 visibility: visible;
                 pointer-events: auto;
                 z-index: 1;
 }
 & > * {
-&[data-v-3d1292a4] {
+&[data-v-432a95d2] {
                 height: 100%;
                 overflow: scroll;
                 padding-right: 4px;
 }
-&[data-v-3d1292a4]::-webkit-scrollbar {
+&[data-v-432a95d2]::-webkit-scrollbar {
                     display: none;
 }
 }
 }
-&[data-v-3d1292a4] .sidebar-panel-toolbox {
+&[data-v-432a95d2] .sidebar-panel-toolbox {
             position: sticky;
             top: 0px;
             background: var(--sidebar-panel-toolbox-bg);
@@ -6506,25 +6712,25 @@ img[data-v-9e75cb34] {
 }
 }
 @media (max-width: 720px) {
-.sidebar-dialog-overlay[data-v-3d1292a4] {
+.sidebar-dialog-overlay[data-v-432a95d2] {
         padding: 7vh 12px 18px;
 }
 .sidebar-dialog-panel {
-&[data-v-3d1292a4] {
+&[data-v-432a95d2] {
         width: calc(100vw - 24px);
         height: calc(100vh - 10vh);
 }
 .sidebar-tabs {
-&[data-v-3d1292a4] {
+&[data-v-432a95d2] {
             justify-content: flex-start;
 }
-.sidebar-tab[data-v-3d1292a4] {
+.sidebar-tab[data-v-432a95d2] {
                 min-width: 78px;
                 padding: 8px 10px;
 }
 }
 .sideitem-component {
-.sidebar-module-pane[data-v-3d1292a4] {
+.sidebar-module-pane[data-v-432a95d2] {
                 inset: 8px;
 }
 }