@pubinfo-pr/core 0.221.2 → 0.222.1

package/src/built-in/layout-component/components/SettingBar/components/SettingMode.vue

@@ -71,84 +71,187 @@ function clickHandle(item: Settings.menu['menuMode']) {
 
 <style scoped>
 .menu-mode {
-  --at-apply: flex items-center justify-center gap-4 pb-4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem; /* 16px */
+  padding-bottom: 1rem; /* 16px */
 }
 
 .menu-mode .mode {
-  --at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer transition;
+  & {
+    position: relative;
+    width: 4rem; /* 64px */
+    height: 3rem; /* 48px */
+    border-radius: 0.5rem; /* 8px */
+    --un-ring-width: 1px;
+    --un-ring-offset-shadow: var(--un-ring-inset) 0 0 0
+      var(--un-ring-offset-width) var(--un-ring-offset-color);
+    --un-ring-shadow: var(--un-ring-inset) 0 0 0
+      calc(var(--un-ring-width) + var(--un-ring-offset-width))
+      var(--un-ring-color);
+    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
+      var(--un-shadow);
+    --un-ring-opacity: 1;
+    --un-ring-color: rgb(231 229 228 / var(--un-ring-opacity)) /* #e7e5e4 */;
+    cursor: pointer;
+    transition-property: color, background-color, border-color,
+      text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
+      backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .dark & {
+    --un-ring-opacity: 1;
+    --un-ring-color: rgb(68 64 60 / var(--un-ring-opacity)) /* #44403c */;
+  }
 }
 
 .menu-mode .mode.active {
-  --at-apply: ring-ui-primary ring-2;
+  --un-ring-opacity: 1;
+  --un-ring-color: rgb(var(--ui-primary) / var(--un-ring-opacity))
+    /* rgb(var(--ui-primary)) */;
+  --un-ring-width: 2px;
+  --un-ring-offset-shadow: var(--un-ring-inset) 0 0 0
+    var(--un-ring-offset-width) var(--un-ring-offset-color);
+  --un-ring-shadow: var(--un-ring-inset) 0 0 0
+    calc(var(--un-ring-width) + var(--un-ring-offset-width))
+    var(--un-ring-color);
+  box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
+    var(--un-shadow);
 }
 
 .menu-mode .mode::before,
 .menu-mode .mode::after,
 .menu-mode .mode .mode-container {
-  --at-apply: absolute pointer-events-none;
+  position: absolute;
+  pointer-events: none;
 }
 
 .menu-mode .mode::before {
-  --at-apply: content-empty bg-ui-primary;
+  content: "";
+  background-color: rgb(var(--ui-primary));
 }
 
 .menu-mode .mode::after {
-  --at-apply: content-empty bg-ui-primary/60;
+  content: "";
+  background-color: rgb(var(--ui-primary) / 0.6);
 }
 
 .menu-mode .mode .mode-container {
-  --at-apply: bg-ui-primary/20 border-dashed border-ui-primary;
+  background-color: rgb(var(--ui-primary) / 0.2);
+  border-style: dashed;
+  border-color: rgb(var(--ui-primary));
 }
 
 .menu-mode .mode .mode-container::before {
-  --at-apply: content-empty absolute w-full h-full;
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
 }
 
 .menu-mode .mode-side::before {
-  --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
+  top: 0.5rem; /* 8px */
+  bottom: 0.5rem; /* 8px */
+  left: 0.5rem; /* 8px */
+  width: 0.5rem; /* 8px */
+  border-top-left-radius: 0.25rem; /* 4px */
+  border-bottom-left-radius: 0.25rem; /* 4px */
 }
 
 .menu-mode .mode-side::after {
-  --at-apply: top-2 bottom-2 left-4.5 w-3;
+  top: 0.5rem; /* 8px */
+  bottom: 0.5rem; /* 8px */
+  left: 1.125rem; /* 18px */
+  width: 0.75rem; /* 12px */
 }
 
 .menu-mode .mode-side .mode-container {
-  --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-8 rounded-tr-1 rounded-br-1;
+  top: 0.5rem; /* 8px */
+  right: 0.5rem; /* 8px */
+  bottom: 0.5rem; /* 8px */
+  left: 2rem; /* 32px */
+  border-top-right-radius: 0.25rem; /* 4px */
+  border-bottom-right-radius: 0.25rem; /* 4px */
 }
 
 .menu-mode .mode-head::before {
-  --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
+  top: 0.5rem; /* 8px */
+  left: 0.5rem; /* 8px */
+  right: 0.5rem; /* 8px */
+  height: 0.5rem; /* 8px */
+  border-top-left-radius: 0.25rem; /* 4px */
+  border-top-right-radius: 0.25rem; /* 4px */
 }
 
 .menu-mode .mode-head::after {
-  --at-apply: top-4.5 left-2 bottom-2 w-3 rounded-bl-1;
+  top: 1.125rem; /* 18px */
+  left: 0.5rem; /* 8px */
+  bottom: 0.5rem; /* 8px */
+  width: 0.75rem; /* 12px */
+  border-bottom-left-radius: 0.25rem; /* 4px */
 }
 
 .menu-mode .mode-head .mode-container {
-  --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-5.5 rounded-br-1;
+  top: 1.125rem; /* 18px */
+  right: 0.5rem; /* 8px */
+  bottom: 0.5rem; /* 8px */
+  left: 1.375rem; /* 22px */
+  border-bottom-right-radius: 0.25rem; /* 4px */
 }
 
 .menu-mode .mode-single::after {
-  --at-apply: top-2 left-2 bottom-2 w-3 rounded-tl-1 rounded-bl-1;
+  top: 0.5rem; /* 8px */
+  left: 0.5rem; /* 8px */
+  bottom: 0.5rem; /* 8px */
+  width: 0.75rem; /* 12px */
+  border-top-left-radius: 0.25rem; /* 4px */
+  border-bottom-left-radius: 0.25rem; /* 4px */
 }
 
 .menu-mode .mode-single .mode-container {
-  --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-5.5 rounded-tr-1 rounded-br-1;
+  top: 0.5rem; /* 8px */
+  right: 0.5rem; /* 8px */
+  bottom: 0.5rem; /* 8px */
+  left: 1.375rem; /* 22px */
+  border-top-right-radius: 0.25rem; /* 4px */
+  border-bottom-right-radius: 0.25rem; /* 4px */
 }
 
 .menu-mode .mode-only-side::before {
-  --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
+  top: 0.5rem; /* 8px */
+  bottom: 0.5rem; /* 8px */
+  left: 0.5rem; /* 8px */
+  width: 0.5rem; /* 8px */
+  border-top-left-radius: 0.25rem; /* 4px */
+  border-bottom-left-radius: 0.25rem; /* 4px */
 }
 
 .menu-mode .mode-only-side .mode-container {
-  --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-4.5 rounded-tr-1 rounded-br-1;
+  top: 0.5rem; /* 8px */
+  right: 0.5rem; /* 8px */
+  bottom: 0.5rem; /* 8px */
+  left: 1.125rem; /* 18px */
+  border-top-right-radius: 0.25rem; /* 4px */
+  border-bottom-right-radius: 0.25rem; /* 4px */
 }
 
 .menu-mode .mode-only-head::before {
-  --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
+  top: 0.5rem; /* 8px */
+  left: 0.5rem; /* 8px */
+  right: 0.5rem; /* 8px */
+  height: 0.5rem; /* 8px */
+  border-top-left-radius: 0.25rem; /* 4px */
+  border-top-right-radius: 0.25rem; /* 4px */
 }
 
 .menu-mode .mode-only-head .mode-container {
-  --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-2 rounded-bl-1 rounded-br-1;
+  top: 1.125rem; /* 18px */
+  right: 0.5rem; /* 8px */
+  bottom: 0.5rem; /* 8px */
+  left: 0.5rem; /* 8px */
+  border-bottom-left-radius: 0.25rem; /* 4px */
+  border-bottom-right-radius: 0.25rem; /* 4px */
 }
 </style>

package/src/built-in/layout-component/components/SettingBar/components/SettingThemes.vue

@@ -104,34 +104,64 @@ function clickHandle(item: ThemeListCard) {
 
 <style scoped>
 .divider {
-  --at-apply:
-    flex
-    items-center
-    justify-between
-    gap-4
-    my-4
-    whitespace-nowrap
-    text-sm
-    font-500;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem; /* 16px */
+  margin-top: 1rem; /* 16px */
+  margin-bottom: 1rem; /* 16px */
+  font-size: 0.875rem; /* 14px */
+  line-height: 1.25rem; /* 20px */
+  white-space: nowrap;
+  font-weight: 500;
 }
 
 .divider::before,
 .divider::after {
-  --at-apply:
-    content-empty
-    w-full
-    h-1px
-    bg-stone-2
-    dark:bg-stone-6;
+  content: "";
+  width: 100%;
+  background-color: #e7e5e4;
+  height: 1px;
+}
+
+.dark .divider::before,
+.dark .divider::after {
+  background-color: #57534e;
 }
 
 .themes {
-  --at-apply: box-border grid grid-cols-[repeat(3,125px)] gap-[15px] w-full;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: repeat(3, 125px);
+  gap: 15px;
+  width: 100%;
 }
 
 .themes .theme {
-  --at-apply: relative box-border h-[78px] text-white cursor-pointer bg-[#f7f8f9] dark:bg-dark-2
-  transition-all duration-[0.2s] ease-[ease-in-out] mb-[15px] p-[15px] rounded-xl shadow;
+  & {
+    position: relative;
+    box-sizing: border-box;
+    color: white;
+    cursor: pointer;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    transition-timing-function: ease-in-out;
+    margin-bottom: 15px;
+    height: 78px;
+    background-color: #f7f8f9;
+    transition-duration: 0.2s;
+    padding: 15px;
+    border-radius: 0.75rem; /* 12px */
+    --un-shadow: var(--un-shadow-inset) 0 1px 3px 0
+        var(--un-shadow-color, rgb(0 0 0 / 0.1)),
+      var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
+      var(--un-shadow);
+  }
+  .dark & {
+    background-color: #323232;
+  }
 }
 
 .themes .theme:hover {
@@ -139,8 +169,30 @@ function clickHandle(item: ThemeListCard) {
 }
 
 .themes .theme .explosion {
-  --at-apply: bg-ui-primary absolute z-[1] flex items-center justify-center w-6 h-6
-  transition-all duration-[0.3s] origin-center rounded-[50%] scale-0 -right-2.5 -top-2.5;
+  background-color: rgb(var(--ui-primary));
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  transition-duration: 0.3s;
+  border-radius: 50%;
+  width: 1.5rem; /* 24px */
+  height: 1.5rem; /* 24px */
+  transform-origin: center;
+  --un-scale-x: 0;
+  --un-scale-y: 0;
+  transform: translateX(var(--un-translate-x)) translateY(var(--un-translate-y))
+    translateZ(var(--un-translate-z)) rotate(var(--un-rotate))
+    rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y))
+    rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y))
+    scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y))
+    scaleZ(var(--un-scale-z));
+  right: -0.625rem; /* -10px */
+  top: -0.625rem; /* -10px */
 }
 
 .themes .theme.active {
@@ -152,16 +204,41 @@ function clickHandle(item: ThemeListCard) {
 }
 
 .themes .theme .theme-type {
-  --at-apply: w-full h-4 mt-5px pb-10px;
+  width: 100%;
+  height: 1rem; /* 16px */
+  margin-top: 5px;
+  padding-bottom: 10px;
 }
 
 .themes .theme .theme-point {
-  --at-apply: grid grid-cols-[repeat(6,15px)] w-full h-5;
+  display: grid;
+  grid-template-columns: repeat(6, 15px);
+  width: 100%;
+  height: 1.25rem; /* 20px */
 }
 
 .themes .theme .theme-point .point {
-  --at-apply: box-border w-5 h-5 mr-[5px] rounded-[50%]
-  border-2 border-solid border-white
-  shadow shadow-stone-4 dark:shadow-stone-8;
+  & {
+    box-sizing: border-box;
+    width: 1.25rem; /* 20px */
+    height: 1.25rem; /* 20px */
+    border-radius: 50%;
+    border-width: 2px;
+    border-style: solid;
+    --un-border-opacity: 1;
+    border-color: rgb(255 255 255 / var(--un-border-opacity));
+    --un-shadow: var(--un-shadow-inset) 0 1px 3px 0
+        var(--un-shadow-color, rgb(0 0 0 / 0.1)),
+      var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
+      var(--un-shadow);
+    margin-right: 5px;
+    --un-shadow-opacity: 1;
+    --un-shadow-color: rgb(168 162 158 / var(--un-shadow-opacity)) /* #a8a29e */;
+  }
+  .dark & {
+    --un-shadow-opacity: 1;
+    --un-shadow-color: rgb(41 37 36 / var(--un-shadow-opacity)) /* #292524 */;
+  }
 }
 </style>

package/src/built-in/layout-component/components/SettingBar/components/SettingWidthMode.vue

@@ -73,69 +73,153 @@ function clickHandle(item: Settings.layout['widthMode']) {
 
 <style scoped>
 .app-width-mode {
-  --at-apply: flex items-center justify-center gap-4 pb-4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem; /* 16px */
+  padding-bottom: 1rem; /* 16px */
 }
 
 .app-width-mode .mode {
-  --at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer transition of-hidden;
+  & {
+    position: relative;
+    width: 4rem; /* 64px */
+    height: 3rem; /* 48px */
+    border-radius: 0.5rem; /* 8px */
+    --un-ring-width: 1px;
+    --un-ring-offset-shadow: var(--un-ring-inset) 0 0 0
+      var(--un-ring-offset-width) var(--un-ring-offset-color);
+    --un-ring-shadow: var(--un-ring-inset) 0 0 0
+      calc(var(--un-ring-width) + var(--un-ring-offset-width))
+      var(--un-ring-color);
+    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
+      var(--un-shadow);
+    --un-ring-opacity: 1;
+    --un-ring-color: rgb(231 229 228 / var(--un-ring-opacity)) /* #e7e5e4 */;
+    cursor: pointer;
+    transition-property: color, background-color, border-color,
+      text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
+      backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    overflow: hidden;
+  }
+  .dark & {
+    --un-ring-opacity: 1;
+    --un-ring-color: rgb(68 64 60 / var(--un-ring-opacity)) /* #44403c */;
+  }
 }
 
 .app-width-mode .mode.active {
-  --at-apply: ring-ui-primary ring-2;
+  --un-ring-opacity: 1;
+  --un-ring-color: rgb(var(--ui-primary) / var(--un-ring-opacity))
+    /* rgb(var(--ui-primary)) */;
+  --un-ring-width: 2px;
+  --un-ring-offset-shadow: var(--un-ring-inset) 0 0 0
+    var(--un-ring-offset-width) var(--un-ring-offset-color);
+  --un-ring-shadow: var(--un-ring-inset) 0 0 0
+    calc(var(--un-ring-width) + var(--un-ring-offset-width))
+    var(--un-ring-color);
+  box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
+    var(--un-shadow);
 }
 
 .app-width-mode .mode-adaption::before {
-  --at-apply: content-empty absolute w-full h-full bg-stone-1 dark:bg-stone-9;
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: #f5f5f4;
+}
+
+.dark .app-width-mode .mode-adaption::before {
+  background-color: #1c1917;
 }
 
 .app-width-mode .mode-adaption .left,
 .app-width-mode .mode-adaption .right {
-  --at-apply: absolute top-1/2 -translate-y-1/2;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
 .app-width-mode .mode-adaption .left {
-  --at-apply: left-1;
+  left: 0.25rem;
 }
 
 .app-width-mode .mode-adaption .right {
-  --at-apply: right-1;
+  right: 0.25rem;
 }
 
 .app-width-mode .mode-adaption-min-width::before {
-  --at-apply: content-empty absolute w-1/2 h-full left-1/2 -translate-x-1/2 bg-stone-1 dark:bg-stone-9;
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #f5f5f4;
+}
+
+.dark .app-width-mode .mode-adaption-min-width::before {
+  background-color: #1c1917;
 }
 
 .app-width-mode .mode-adaption-min-width .left,
 .app-width-mode .mode-adaption-min-width .right {
-  --at-apply: absolute top-1/2 -translate-y-1/2;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
 .app-width-mode .mode-adaption-min-width .left {
-  --at-apply: left-0.5;
+  left: 0.125rem; /* 2px */
 }
 
 .app-width-mode .mode-adaption-min-width .right {
-  --at-apply: right-0.5;
+  right: 0.125rem; /* 2px */
 }
 
 .app-width-mode .mode-center::before {
-  --at-apply: content-empty absolute w-3/5 h-full left-1/2 -translate-x-1/2 bg-stone-1 dark:bg-stone-9;
+  content: "";
+  position: absolute;
+  width: 60%;
+  height: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #f5f5f4;
+}
+
+.dark .app-width-mode .mode-center::before {
+  background-color: #1c1917;
 }
 
 .app-width-mode .mode-center-max-width::before {
-  --at-apply: content-empty absolute w-3/5 h-full left-1/2 -translate-x-1/2 bg-stone-1 dark:bg-stone-9;
+  content: "";
+  position: absolute;
+  width: 60%;
+  height: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #f5f5f4;
+}
+
+.dark .app-width-mode .mode-center-max-width::before {
+  background-color: #1c1917;
 }
 
 .app-width-mode .mode-center-max-width .left,
 .app-width-mode .mode-center-max-width .right {
-  --at-apply: absolute top-1/2 -translate-y-1/2;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50);
 }
 
 .app-width-mode .mode-center-max-width .left {
-  --at-apply: left-2.5;
+  left: 0.625rem;
 }
 
 .app-width-mode .mode-center-max-width .right {
-  --at-apply: right-2.5;
+  right: 0.625rem;
 }
 </style>

package/src/built-in/layout-component/components/SettingBar/index.vue

@@ -38,32 +38,86 @@ const [open, setOpen] = useToggle(false);
 
 <style scoped>
 .app-setting-warp {
-  --at-apply: relative fixed top-1/2 right-10px z-10;
+  position: relative;
+  position: fixed;
+  top: 50%;
+  right: 10px;
+  z-index: 10;
 }
 
 .app-setting-warp .vue-devtools__anchor--glowing {
-  --at-apply: absolute z-[-1] w-40 h-40 pointer-events-none blur-[60px] opacity-0
-  transition-all duration-[1s] ease-[ease] -translate-x-1/4 -translate-y-1/4
-  rounded-full left-0 top-0;
+  position: absolute;
+  opacity: 0;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  z-index: -1;
+  width: 10rem; /* 160px */
+  height: 10rem; /* 160px */
+  --un-blur: blur(60px);
+  filter: var(--un-blur) var(--un-brightness) var(--un-contrast)
+    var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate)
+    var(--un-invert) var(--un-saturate) var(--un-sepia);
+  transition-duration: 1s;
+  transition-timing-function: ease;
+  border-radius: 9999px;
+  --un-translate-x: -25%;
+  transform: translateX(var(--un-translate-x)) translateY(var(--un-translate-y))
+    translateZ(var(--un-translate-z)) rotate(var(--un-rotate))
+    rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y))
+    rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y))
+    scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y))
+    scaleZ(var(--un-scale-z));
+  --un-translate-y: -25%;
+  transform: translateX(var(--un-translate-x)) translateY(var(--un-translate-y))
+    translateZ(var(--un-translate-z)) rotate(var(--un-rotate))
+    rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y))
+    rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y))
+    scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y))
+    scaleZ(var(--un-scale-z));
   background-image: linear-gradient(45deg, #00dc82, #36e4da, #0047e1);
 }
 
 .app-setting-warp:hover .vue-devtools__anchor--glowing {
-  --at-apply: op-70;
+  opacity: 0.7;
 }
 
 .app-setting {
-  --at-apply: text-white dark:text-dark bg-ui-primary
-  flex flex-col items-center justify-between w-[30px] h-[76px]
-  text-sm cursor-pointer rounded-[30px];
+  & {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 0.875rem; /* 14px */
+    line-height: 1.25rem; /* 20px */
+    cursor: pointer;
+    width: 30px;
+    height: 76px;
+    border-radius: 30px;
+    color: #fff;
+    background-color: rgb(var(--ui-primary));
+  }
+  .dark & {
+    color: #222222;
+  }
 }
 
 .app-setting .app-setting-item {
-  --at-apply: flex flex-[auto] items-center justify-center w-full h-0;
+  display: flex;
+  flex: auto;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 0;
 }
 
 .app-setting .divider {
-  --at-apply: w-10px h-px bg-[#b3b3b3];
+  width: 10px;
+  height: 1px;
+  background-color: #b3b3b3;
 }
 
 .app-setting .icon {