deepsky 2.12.7 → 2.13.0

package/dist/index.css

@@ -4091,214 +4091,235 @@ to {
 }
 
 
-.float-cubelist {
-&[data-v-3dff2710] {
+/* 全屏半透明遮罩 */
+.cubelist-overlay[data-v-467cb0f5] {
+    position: fixed;
+    inset: 0;
+    z-index: var(--float-zindex);
+    background: rgba(0, 0, 0, 0.35);
     display: flex;
     justify-content: center;
-    align-items: center;
-    max-width: var(--float-cubelist-width);
-    border-radius: 8px;
-    z-index: var(--float-zindex);
-    position: relative;
-    user-select: none;
-    position: fixed;
-    transition: 0.3s;
-    overflow: hidden;
-    box-shadow: var(--float-cubelist-box-shadow);
-    border: var(--float-cubelist-border);
-}
-&[data-v-3dff2710]::-webkit-scrollbar {
-        width: 4px;
-        background-color: transparent;
+    align-items: flex-start;
+    padding-top: 15vh;
 }
-&[data-v-3dff2710]::-webkit-scrollbar-thumb {
-        background: var(--ui-scrollbar-thumb-bg, #888);
-        border-radius: 10px;
-}
-}
-.cube-list-content[data-v-3dff2710] {
-    padding: 4px 8px;
+
+/* 居中面板 */
+.cubelist-panel[data-v-467cb0f5] {
+    width: 780px;
+    max-width: calc(100vw - 40px);
     background: var(--float-cubelist-bg);
-    max-width: 100%;
-    height: 100%;
     border-radius: 8px;
+    border: var(--float-cubelist-border);
+    box-shadow: var(--float-cubelist-box-shadow);
+    user-select: none;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 12px 0 0;
 }
-.cube-list-search {
-&[data-v-3dff2710] {
-    margin: 5px 10px;
-    border-radius: 100px;
-    text-align: center;
-    font-size: 18px;
-    white-space: nowrap;
+
+/* 顶部搜索栏 */
+.cubelist-search {
+&[data-v-467cb0f5] {
     display: flex;
-    justify-content: center;
     align-items: center;
+    gap: 8px;
+    margin: 0 12px 10px;
+    padding: 10px 14px;
+    border-radius: 6px;
+    background: var(--float-cubelist-search-bg);
+    border: 1px solid color-mix(in srgb, var(--float-cubelist-itembox-hover-bg) 40%, transparent);
+    }
+.search-icon[data-v-467cb0f5] {
+        font-size: 17px;
+        color: var(--float-cubelist-search-color);
+        flex-shrink: 0;
+        opacity: 0.7;
 }
-#filter-cube {
-&[data-v-3dff2710] {
-        font-size: 18px;
-        width: 0px;
-        overflow: hidden;
-        transition: 0.5s;
-        padding: 0px;
+input {
+&[data-v-467cb0f5] {
+        flex: 1;
+        background: transparent;
         border: none;
         outline: none;
-        background: var(--float-cubelist-search-bg);
-        box-shadow: var(--float-cubelist-search-shadow);
-        border-radius: 100px;
-        letter-spacing: 1px;
-        opacity: 0;
+        font-size: 15px;
+        letter-spacing: 0.5px;
         color: var(--float-cubelist-input-color);
-}
-&[data-v-3dff2710]::placeholder {
+        }
+&[data-v-467cb0f5]::placeholder {
             color: gray;
-            letter-spacing: 1px;
-}
-&[data-v-3dff2710]:focus {
-            width: 300px;
-            padding: 6px 20px;
-
-            opacity: 1;
-            font-size: 16px;
 }
 }
-#filter-cube:focus + .icon[data-v-3dff2710] {
-        background-color: black;
-        margin-left: -30px;
-}
-#filter-cube:focus + .icon[data-v-3dff2710]::before {
-        width: 50%;
-        height: 2px;
-        left: 25%;
-        top: 48%;
-        border: none;
-        background-color: var(--float-cubelist-search-color);
-        transform: rotate(-45deg);
+.hint-esc[data-v-467cb0f5] {
+        flex-shrink: 0;
+        font-size: 10px;
+        padding: 2px 6px;
+        border-radius: 3px;
+        font-family: inherit;
+        color: var(--float-cubelist-input-color);
+        background: color-mix(in srgb, var(--float-cubelist-input-color) 8%, transparent);
+        border: 1px solid color-mix(in srgb, var(--float-cubelist-input-color) 20%, transparent);
+        opacity: 0.5;
 }
-#filter-cube:focus + .icon[data-v-3dff2710]::after {
-        width: 50%;
-        height: 2px;
-        left: 25%;
-        top: 48%;
 }
-.icon {
-&[data-v-3dff2710] {
-        width: 30px;
-        height: 30px;
+
+/* 颜色图例 */
+.cubelist-legend {
+&[data-v-467cb0f5] {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 0 14px 8px;
+    border-bottom: 1px solid color-mix(in srgb, var(--float-cubelist-itembox-hover-bg) 25%, transparent);
+
+    /* 方块图例 */
+
+    /* 使用 hover 色（即主题 selection-bg 调）作为 cube 方块色，颜色鲜明 */
+
+    /* preset: +120deg hue rotation from theme selection color */
+
+    /* preset-global: +240deg hue rotation from theme selection color */
+    }
+.legend-item[data-v-467cb0f5] {
         display: flex;
-        border-radius: 100px;
-        justify-content: center;
         align-items: center;
-        background: var(--float-cubelist-search-button-bg);
-        box-shadow: var(--float-cubelist-search-shadow);
-        cursor: pointer;
-        position: relative;
-        transition: 1s;
+        gap: 6px;
+        font-size: 12px;
+        color: var(--float-cubelist-input-color);
+        opacity: 0.7;
 }
-&[data-v-3dff2710]::before {
-            content: "";
-            transition: 0.5s;
-            position: absolute;
-            width: 40%;
-            height: 40%;
-            border-radius: 50%;
-            border: 1px solid var(--float-cubelist-search-color);
-            left: 20%;
-            top: 20%;
+.legend-square[data-v-467cb0f5] {
+        width: 12px;
+        height: 12px;
+        border-radius: 3px;
+        flex-shrink: 0;
 }
-&[data-v-3dff2710]::after {
-            content: "";
-            transition: 0.5s;
-            position: absolute;
-            width: 20%;
-            height: 2px;
-            background: var(--float-cubelist-search-color);
-            transform: rotate(45deg);
-            top: 70%;
-            left: 55%;
+.sq-cube[data-v-467cb0f5] {
+        background: var(--float-cubelist-itembox-hover-bg);
 }
+.sq-preset[data-v-467cb0f5] {
+        background: color-mix(in srgb, #f97316 70%, var(--selection-bg));
 }
-&[data-v-3dff2710]:empty::before {
-        content: "Find Cube...";
-        color: #ccc;
-        text-shadow: 0px 0px 2px black;
-        letter-spacing: 1px;
+.sq-preset-global[data-v-467cb0f5] {
+        background: color-mix(in srgb, #a855f7 70%, var(--selection-bg));
 }
 }
+
+/* 卡片网格 */
 .cube-grid {
-&[data-v-3dff2710] {
+&[data-v-467cb0f5] {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(4, 1fr);
     gap: 5px;
-    max-height: var(--float-cubelist-grid-height);
-    overflow-y: scroll;
-    padding-right: 4px;
+    max-height: 400px;
+    overflow-y: auto;
+    padding: 12px 12px 4px;
+    }
+&[data-v-467cb0f5]::-webkit-scrollbar {
+        width: 4px;
+        background-color: transparent;
+}
+&[data-v-467cb0f5]::-webkit-scrollbar-thumb {
+        background: var(--ui-scrollbar-thumb-bg, #888);
+        border-radius: 10px;
 }
 .item-card {
-&[data-v-3dff2710] {
+&[data-v-467cb0f5] {
         display: flex;
         align-items: center;
         gap: 4px;
         padding: 2px 6px;
         border-radius: 4px;
-        transition: 0.5s;
-}
-&[data-v-3dff2710]:hover {
+        cursor: pointer;
+        transition: 0.2s;
+        }
+&[data-v-467cb0f5]:hover {
             background: var(--float-cubelist-itembox-hover-bg);
             box-shadow: 0px 0px 12px var(--float-cubelist-itembox-hover-bg);
 }
-.iconfont[data-v-3dff2710] {
+.iconfont[data-v-467cb0f5] {
             font-size: 24px;
             margin-left: 4px;
 }
 }
-.item-preset-global[data-v-3dff2710] {
-        background: var(--float-cubelist-preset-global-bg) !important;
+.item-preset-global[data-v-467cb0f5] {
+        border-left: 3px solid color-mix(in srgb, #a855f7 70%, var(--selection-bg)) !important;
+        border-radius: 0 2px 2px 0;
+        background: color-mix(in srgb, #a855f7 10%, var(--selection-bg) 5%) !important;
 }
-.item-preset[data-v-3dff2710] {
-        background: var(--float-cubelist-preset-bg);
+.item-preset[data-v-467cb0f5] {
+        border-left: 3px solid color-mix(in srgb, #f97316 70%, var(--selection-bg));
+        border-radius: 0 2px 2px 0;
+        background: color-mix(in srgb, #f97316 10%, var(--selection-bg) 5%);
 }
-.item-cube[data-v-3dff2710] {
-        background: var(--float-cubelist-cube-bg);
+.item-cube[data-v-467cb0f5] {
+        border-left: 3px solid var(--float-cubelist-itembox-hover-bg);
+        border-radius: 0 2px 2px 0;
+        background: color-mix(in srgb, var(--float-cubelist-itembox-hover-bg) 12%, transparent);
 }
 .active {
-&[data-v-3dff2710] {
+&[data-v-467cb0f5] {
         background: var(--float-cubelist-active-bg);
         box-shadow: var(--float-cubelist-active-shadow);
         color: var(--float-cubelist-active-color);
-}
-.iconfont[data-v-3dff2710] {
+        }
+.iconfont[data-v-467cb0f5] {
             color: var(--float-cubelist-active-icon-color);
 }
 }
 .cube-box {
-&[data-v-3dff2710] {
-        border-radius: 8px;
+&[data-v-467cb0f5] {
+        border-radius: 4px;
         padding: 5px 10px;
         cursor: pointer;
         letter-spacing: 1px;
-
         overflow: hidden;
-}
-&[data-v-3dff2710] > * {
+        }
+&[data-v-467cb0f5] > * {
             pointer-events: none;
 }
-.cube-name[data-v-3dff2710],
-        .cube-type[data-v-3dff2710] {
+.cube-name[data-v-467cb0f5],
+        .cube-type[data-v-467cb0f5] {
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
 }
-.cube-name[data-v-3dff2710] {
+.cube-name[data-v-467cb0f5] {
             font-size: var(--float-cubelist-name-size);
 }
-.cube-type[data-v-3dff2710] {
+.cube-type[data-v-467cb0f5] {
             font-size: var(--float-cubelist-type-size);
             color: var(--float-cubelist-itembox-code-bg);
 }
 }
 }
 
+/* 底部快捷键提示 */
+.cubelist-footer {
+&[data-v-467cb0f5] {
+    display: flex;
+    gap: 16px;
+    padding: 6px 14px 10px;
+    border-top: 1px solid color-mix(in srgb, var(--float-cubelist-itembox-hover-bg) 20%, transparent);
+    }
+.footer-hint[data-v-467cb0f5] {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 11px;
+        color: var(--float-cubelist-input-color);
+        opacity: 0.45;
+}
+kbd[data-v-467cb0f5] {
+        font-size: 10px;
+        padding: 1px 5px;
+        border-radius: 3px;
+        font-family: inherit;
+        background: color-mix(in srgb, var(--float-cubelist-input-color) 8%, transparent);
+        border: 1px solid color-mix(in srgb, var(--float-cubelist-input-color) 18%, transparent);
+}
+}
+
 
 .float-fomula {
 &[data-v-16177d1d] {