fix(colorful-asri): adjust accent color settings and improve UI consi…

…stency

- Simplify CSS for accent color options, removing unnecessary selectors and properties
- Enhance the "pick color" option by hiding the SVG icon on iOS and making the color picker visible
- Refine the "follow system accent" option, improving its selected state visual feedback
- Adjust the "use separate scheme" option to remove redundant styling
- Improve consistency in label styling for color-related menu items

src/modules/configsMenu/makeItems.ts

@@ -115,9 +115,9 @@ function createMenuItems() {
     const asriConfigMenuHTML = `
         <button class="b3-menu__separator asri-config"></button>
         <button class="b3-menu__item asri-config" id="pickColor">
-            <svg class="b3-menu__icon"></svg>
-            <label for="asriColorPicker" class="be-menu__label">${i18n['pickColor']}</label>
             <input id="asriColorPicker" type="color" value="${asriConfigs.userCustomColor}">
+            <svg class="b3-menu__icon"></svg>
+            <label for="asriColorPicker" class="be-menu__label">${i18n['pickColor']}</label>            
         </button>
         <button class="b3-menu__item asri-config" id="followSysAccent">
             <svg class="b3-menu__icon"></svg>

style/features/colorful-asri.scss

@@ -193,89 +193,80 @@
         .b3-menu__separator {
             cursor: default;
         }
+    }
 
-        #useSeparateScheme {
-
-            &.b3-menu__item--selected-alt {
-
-                // 色彩模式分开设置时不填充图形
-                svg path {
-                    fill: none;
-                    stroke-width: 0;
-                }
-            }
-
+    #followSysAccent {
+        &.b3-menu__item--selected {
             svg {
-                margin-right: 8px;
-                transform: scale(1.1);
+                background-color: var(--asri-sys-accent);
+                border-radius: 15px;
             }
-        }
 
-        #asriPresetPalettes {
-            >svg:first-child {
-                transform: scale(1.1);
+            &.b3-menu__item--current svg {
+                outline: 1px solid oklch(from var(--b3-theme-on-primary) l c h / .5);
             }
         }
+    }
 
-        #followSysAccent {
-            &.b3-menu__item--selected {
-                svg {
-                    background-color: var(--asri-sys-accent);
-                    border-radius: 15px;
-                }
-
-                &.b3-menu__item--current svg {
-                    outline: 1px solid oklch(from var(--b3-theme-on-primary) l c h / .5);
-                }
+    #pickColor {
+        &.b3-menu__item--selected {
+            svg {
+                background-color: var(--asri-user-custom-accent, var(--b3-theme-primary));
+                border-radius: 15px;
             }
-        }
 
-        #pickColor {
-            &.b3-menu__item--selected {
-                svg {
-                    background-color: var(--asri-user-custom-accent, var(--b3-theme-primary));
-                    border-radius: 15px;
-                }
-
-                &.b3-menu__item--current svg {
-                    outline: 1px solid oklch(from var(--b3-theme-on-primary) l c h / .5);
-                }
+            &.b3-menu__item--current svg {
+                outline: 1px solid oklch(from var(--b3-theme-on-primary) l c h / .5);
             }
+        }
 
-            input {
-                visibility: hidden;
-                width: 0;
-                height: 0;
-                padding: 0;
-            }
+        input {
+            visibility: hidden;
+            width: 0;
+            height: 0;
+            padding: 0;
+            margin-left: -2px;
         }
+    }
 
-        #followSysAccent,
-        #pickColor,
-        #useSeparateScheme {
-            label {
-                cursor: pointer;
-            }
+    .body-asri--iosApp #pickColor {
+        svg {
+            display: none;
         }
+
+        input {
+            visibility: visible;
+            width:  20px;
+            height: 20px;
+            margin-right: 2px;
+        }
+    }
 
-        #asriChroma {
-            cursor: default;
+    #followSysAccent,
+    #pickColor,
+    #useSeparateScheme {
+        label {
+            cursor: pointer;
+        }
+    }
 
-            .b3-tooltips {
-                flex-grow: 1;
-            }
+    #asriChroma {
+        cursor: default;
 
-            svg:first-child {
-                margin-right: 4px;
-                transform: scale(1.1);
-            }
+        .b3-tooltips {
+            flex-grow: 1;
         }
 
-        #asriChromaSlider {
-            cursor: pointer;
+        svg:first-child {
+            margin-right: 4px;
+            transform: scale(1.1);
         }
     }
 
+    #asriChromaSlider {
+        cursor: pointer;
+    }
+
     /* 
     !---------------------------------------------------------
     !------------ Protyle related elements -------------------
@@ -363,7 +354,7 @@
     }
 
     [data-type="wnd"]:not(.layout__wnd--active) .item--focus {
-        background-color: oklch(from var(--b3-theme-primary) .5 clamp(0, calc(.08 * var(--asri-c-factor, 1) * var(--asri-c-0, 1) * .5) , .35) h / .2);
+        background-color: oklch(from var(--b3-theme-primary) .5 clamp(0, calc(.08 * var(--asri-c-factor, 1) * var(--asri-c-0, 1) * .5), .35) h / .2);
 
         @include darkmode-counterpart {
             background-color: oklch(from var(--b3-theme-primary) .99 clamp(0, calc(.1 * var(--asri-c-factor, 1) * var(--asri-c-0, 1) * .5), .2) h / .2);