@pubinfo/core 2.0.0-beta.31 → 2.0.0-beta.33

package/src/layout/components/SettingBar/components/DayNightToggle.vue

@@ -31,207 +31,113 @@ const enabled = defineModel();
   </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .toggleWrapper {
-  overflow: hidden;
+  --at-apply: overflow-hidden;
   transform: scale(0.5);
 }
 
 .toggleWrapper input {
-  position: absolute;
-  left: -99em;
+  --at-apply: absolute left-[-99em];
 }
 
 .toggle {
-  position: relative;
-  display: inline-block;
-  width: 90px;
-  height: 50px;
-  cursor: pointer;
-  background-color: #83d8ff;
-  border-radius: 84px;
+  --at-apply: relative inline-block w-[90px] h-[50px] cursor-pointer bg-[#83d8ff] rounded-[84px];
   transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
 }
 
 .toggle::before {
-  position: absolute;
-  top: 15px;
-  left: -50px;
-  font-size: 18px;
-  content: "Day";
+  --at-apply: absolute left-[-50px] text-lg content-["Day"] top-[15px];;
 }
 
 .toggle::after {
-  position: absolute;
-  top: 15px;
-  right: -60px;
-  font-size: 18px;
-  color: #384f6d;
-  content: "Night";
+  --at-apply: absolute right-[-60px] text-lg text-[#384f6d] content-["Night"] top-[15px];
 }
 
 .toggle__handler {
-  position: relative;
-  top: 3px;
-  left: 3px;
-  z-index: 1;
-  display: inline-block;
-  width: 44px;
-  height: 44px;
-  background-color: #ffdb98;
-  border-radius: 50px;
+  --at-apply: relative z-[1] inline-block w-11 h-11 bg-[#ffdb98] rounded-[50px] left-[3px] top-[3px];
   box-shadow: 0 2px 6px rgb(0 0 0 / 30%);
   transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
   transform: rotate(-45deg);
 }
 
 .toggle__handler .crater {
-  position: absolute;
-  background-color: #e8cda5;
-  border-radius: 100%;
-  opacity: 0;
-  transition: opacity 200ms ease-in-out;
+  --at-apply: absolute bg-[#e8cda5] opacity-0 transition-opacity duration-200 ease-[ease-in-out] rounded-[100%];
 }
 
 .toggle__handler .crater--1 {
-  top: 18px;
-  left: 10px;
-  width: 4px;
-  height: 4px;
+  --at-apply: w-1 h-1 left-2.5 top-[18px];
 }
-
 .toggle__handler .crater--2 {
-  top: 28px;
-  left: 22px;
-  width: 6px;
-  height: 6px;
+  --at-apply: w-1.5 h-1.5 left-[22px] top-7;
 }
-
 .toggle__handler .crater--3 {
-  top: 10px;
-  left: 25px;
-  width: 8px;
-  height: 8px;
+  --at-apply: w-2 h-2 left-[25px] top-2.5;
 }
 
 .star {
-  position: absolute;
-  background-color: #fff;
-  border-radius: 50%;
-  transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
+  --at-apply: absolute bg-white transition-all duration-300 ease-[cubic-bezier(0.445,0.05,0.55,0.95)] rounded-[50%];
 }
-
 .star--1 {
-  top: 10px;
-  left: 35px;
-  z-index: 0;
-  width: 30px;
-  height: 3px;
+  --at-apply: z-0 w-[30px] h-[3px] left-[35px] top-2.5;
 }
-
 .star--2 {
-  top: 18px;
-  left: 28px;
-  z-index: 1;
-  width: 30px;
-  height: 3px;
+  --at-apply: z-[1] w-[30px] h-[3px] left-7 top-[18px];
 }
-
 .star--3 {
-  top: 27px;
-  left: 40px;
-  z-index: 0;
-  width: 30px;
-  height: 3px;
+  --at-apply: z-0 w-[30px] h-[3px] left-10 top-[27px];
 }
-
 .star--4,
 .star--5,
 .star--6 {
-  opacity: 0;
+  --at-apply: opacity-0;
   transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
 }
-
 .star--4 {
-  top: 16px;
-  left: 11px;
-  z-index: 0;
-  width: 2px;
-  height: 2px;
+  --at-apply: z-0 w-0.5 h-0.5 left-[11px] top-4;
   transform: translate3d(3px, 0, 0);
 }
-
 .star--5 {
-  top: 32px;
-  left: 17px;
-  z-index: 0;
-  width: 3px;
-  height: 3px;
+  --at-apply: z-0 w-[3px] h-[3px] left-[17px] top-8;
   transform: translate3d(3px, 0, 0);
 }
-
 .star--6 {
-  top: 36px;
-  left: 28px;
-  z-index: 0;
-  width: 2px;
-  height: 2px;
+  --at-apply: z-0 w-0.5 h-0.5 left-7 top-9;
   transform: translate3d(3px, 0, 0);
 }
-
 input:checked + .toggle {
-  background-color: #749dd6;
-}
-
-input:checked + .toggle::before {
-  color: #749ed7;
+  --at-apply: bg-[#749dd6] before:text-[#749ed7] after:text-white;
 }
-
-input:checked + .toggle::after {
-  color: #fff;
-}
-
 input:checked + .toggle .toggle__handler {
-  background-color: #ffe5b5;
+  --at-apply: bg-[#ffe5b5];
   transform: translate3d(40px, 0, 0) rotate(0);
 }
-
 input:checked + .toggle .toggle__handler .crater {
-  opacity: 1;
+  --at-apply: opacity-100;
 }
-
 input:checked + .toggle .star--1 {
-  width: 2px;
-  height: 2px;
+  --at-apply: w-0.5 h-0.5;
 }
-
 input:checked + .toggle .star--2 {
-  width: 4px;
-  height: 4px;
+  --at-apply: w-1 h-1;
   transform: translate3d(-5px, 0, 0);
 }
-
 input:checked + .toggle .star--3 {
-  width: 2px;
-  height: 2px;
+  --at-apply: w-0.5 h-0.5;
   transform: translate3d(-7px, 0, 0);
 }
-
 input:checked + .toggle .star--4,
 input:checked + .toggle .star--5,
 input:checked + .toggle .star--6 {
-  opacity: 1;
+  --at-apply: opacity-100;
   transform: translate3d(0, 0, 0);
 }
-
 input:checked + .toggle .star--4 {
   transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
 }
-
 input:checked + .toggle .star--5 {
   transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
 }
-
 input:checked + .toggle .star--6 {
   transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
 }

package/src/layout/components/SettingBar/components/SettingEnableTransition.vue

@@ -71,145 +71,120 @@ const transitionModeList = reactive<
   </HDivider>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .transition-mode {
   --at-apply: flex items-center justify-center gap-4 pb-4;
+}
+
+.transition-mode .mode {
+  --at-apply: relative flex items-center justify-center w-14 h-10 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer;
+}
+
+.transition-mode .mode.active {
+  --at-apply: ring-ui-primary ring-2;
+}
+
+.transition-mode .mode::after {
+  --at-apply: content-empty absolute w-3/5 h-3/5 top-1/5 left-1/5 rounded-2 bg-stone-2 dark:bg-stone-9 transition;
+}
+
+.transition-mode .mode.mode-fade::after {
+  animation: transition-mode-fade-after 1.5s infinite;
+}
+
+@keyframes transition-mode-fade-after {
+  0% {
+    opacity: 1;
+  }
+  30%, 35% {
+    opacity: 0;
+  }
+  65% {
+    opacity: 1;
+  }
+}
+
+.transition-mode .mode.mode-slide-left::after {
+  animation: transition-mode-slide-left 1.5s infinite;
+}
+
+@keyframes transition-mode-slide-left {
+  0% {
+    opacity: 1;
+  }
+  30% {
+    opacity: 0;
+    transform: translate(-30%, 0);
+  }
+  35% {
+    opacity: 0;
+    transform: translate(30%, 0);
+  }
+  65% {
+    opacity: 1;
+  }
+}
 
-  .mode {
-    --at-apply: relative flex items-center justify-center w-14 h-10 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer;
-
-    &.active {
-      --at-apply: ring-ui-primary ring-2;
-    }
-
-    &::after {
-      --at-apply: content-empty absolute w-3/5 h-3/5 top-1/5 left-1/5 rounded-2 bg-stone-2 dark:bg-stone-9 transition;
-    }
-
-    &.mode-fade {
-      &::after {
-        animation: transition-mode-fade-after 1.5s infinite;
-      }
-
-      @keyframes transition-mode-fade-after {
-        0% {
-          opacity: 1;
-        }
-
-        30%,
-        35% {
-          opacity: 0;
-        }
-
-        65% {
-          opacity: 1;
-        }
-      }
-    }
-
-    &.mode-slide-left {
-      &::after {
-        animation: transition-mode-slide-left 1.5s infinite;
-      }
-
-      @keyframes transition-mode-slide-left {
-        0% {
-          opacity: 1;
-        }
-
-        30% {
-          opacity: 0;
-          transform: translate(-30%, 0);
-        }
-
-        35% {
-          opacity: 0;
-          transform: translate(30%, 0);
-        }
-
-        65% {
-          opacity: 1;
-        }
-      }
-    }
-
-    &.mode-slide-right {
-      &::after {
-        animation: transition-mode-slide-right 1.5s infinite;
-      }
-
-      @keyframes transition-mode-slide-right {
-        0% {
-          opacity: 1;
-        }
-
-        30% {
-          opacity: 0;
-          transform: translate(30%, 0);
-        }
-
-        35% {
-          opacity: 0;
-          transform: translate(-30%, 0);
-        }
-
-        100% {
-          opacity: 1;
-        }
-      }
-    }
-
-    &.mode-slide-top {
-      &::after {
-        animation: transition-mode-slide-top 1.5s infinite;
-      }
-
-      @keyframes transition-mode-slide-top {
-        0% {
-          opacity: 1;
-        }
-
-        30% {
-          opacity: 0;
-          transform: translate(0, -30%);
-        }
-
-        35% {
-          opacity: 0;
-          transform: translate(0, 30%);
-        }
-
-        100% {
-          opacity: 1;
-        }
-      }
-    }
-
-    &.mode-slide-bottom {
-      &::after {
-        animation: transition-mode-slide-bottom 1.5s infinite;
-      }
-
-      @keyframes transition-mode-slide-bottom {
-        0% {
-          opacity: 1;
-        }
-
-        30% {
-          opacity: 0;
-          transform: translate(0, 30%);
-        }
-
-        35% {
-          opacity: 0;
-          transform: translate(0, -30%);
-        }
-
-        100% {
-          opacity: 1;
-        }
-      }
-    }
+.transition-mode .mode.mode-slide-right::after {
+  animation: transition-mode-slide-right 1.5s infinite;
+}
+
+@keyframes transition-mode-slide-right {
+  0% {
+    opacity: 1;
+  }
+  30% {
+    opacity: 0;
+    transform: translate(30%, 0);
+  }
+  35% {
+    opacity: 0;
+    transform: translate(-30%, 0);
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.transition-mode .mode.mode-slide-top::after {
+  animation: transition-mode-slide-top 1.5s infinite;
+}
+
+@keyframes transition-mode-slide-top {
+  0% {
+    opacity: 1;
+  }
+  30% {
+    opacity: 0;
+    transform: translate(0, -30%);
+  }
+  35% {
+    opacity: 0;
+    transform: translate(0, 30%);
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.transition-mode .mode.mode-slide-bottom::after {
+  animation: transition-mode-slide-bottom 1.5s infinite;
+}
+
+@keyframes transition-mode-slide-bottom {
+  0% {
+    opacity: 1;
+  }
+  30% {
+    opacity: 0;
+    transform: translate(0, 30%);
+  }
+  35% {
+    opacity: 0;
+    transform: translate(0, -30%);
+  }
+  100% {
+    opacity: 1;
   }
 }
 </style>

package/src/layout/components/SettingBar/components/SettingMode.vue

@@ -69,96 +69,86 @@ function clickHandle(item: Settings.menu['menuMode']) {
   </HDivider>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .menu-mode {
   --at-apply: flex items-center justify-center gap-4 pb-4;
+}
 
-  .mode {
-    --at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer transition;
-
-    &.active {
-      --at-apply: ring-ui-primary ring-2;
-    }
-
-    &::before,
-    &::after,
-    .mode-container {
-      --at-apply: absolute pointer-events-none;
-    }
-
-    &::before {
-      --at-apply: content-empty bg-ui-primary;
-    }
-
-    &::after {
-      --at-apply: content-empty bg-ui-primary/60;
-    }
-
-    .mode-container {
-      --at-apply: bg-ui-primary/20 border-dashed border-ui-primary;
-
-      &::before {
-        --at-apply: content-empty absolute w-full h-full;
-      }
-    }
-
-    &-side {
-      &::before {
-        --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
-      }
-
-      &::after {
-        --at-apply: top-2 bottom-2 left-4.5 w-3;
-      }
-
-      .mode-container {
-        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-8 rounded-tr-1 rounded-br-1;
-      }
-    }
-
-    &-head {
-      &::before {
-        --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
-      }
-
-      &::after {
-        --at-apply: top-4.5 left-2 bottom-2 w-3 rounded-bl-1;
-      }
-
-      .mode-container {
-        --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-5.5 rounded-br-1;
-      }
-    }
-
-    &-single {
-      &::after {
-        --at-apply: top-2 left-2 bottom-2 w-3 rounded-tl-1 rounded-bl-1;
-      }
-
-      .mode-container {
-        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-5.5 rounded-tr-1 rounded-br-1;
-      }
-    }
-
-    &-only-side {
-      &::before {
-        --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
-      }
-
-      .mode-container {
-        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-4.5 rounded-tr-1 rounded-br-1;
-      }
-    }
-
-    &-only-head {
-      &::before {
-        --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
-      }
-
-      .mode-container {
-        --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-2 rounded-bl-1 rounded-br-1;
-      }
-    }
-  }
+.menu-mode .mode {
+  --at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer transition;
+}
+
+.menu-mode .mode.active {
+  --at-apply: ring-ui-primary ring-2;
+}
+
+.menu-mode .mode::before,
+.menu-mode .mode::after,
+.menu-mode .mode .mode-container {
+  --at-apply: absolute pointer-events-none;
+}
+
+.menu-mode .mode::before {
+  --at-apply: content-empty bg-ui-primary;
+}
+
+.menu-mode .mode::after {
+  --at-apply: content-empty bg-ui-primary/60;
+}
+
+.menu-mode .mode .mode-container {
+  --at-apply: bg-ui-primary/20 border-dashed border-ui-primary;
+}
+
+.menu-mode .mode .mode-container::before {
+  --at-apply: content-empty absolute w-full h-full;
+}
+
+.menu-mode .mode-side::before {
+  --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
+}
+
+.menu-mode .mode-side::after {
+  --at-apply: top-2 bottom-2 left-4.5 w-3;
+}
+
+.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;
+}
+
+.menu-mode .mode-head::before {
+  --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
+}
+
+.menu-mode .mode-head::after {
+  --at-apply: top-4.5 left-2 bottom-2 w-3 rounded-bl-1;
+}
+
+.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;
+}
+
+.menu-mode .mode-single::after {
+  --at-apply: top-2 left-2 bottom-2 w-3 rounded-tl-1 rounded-bl-1;
+}
+
+.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;
+}
+
+.menu-mode .mode-only-side::before {
+  --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
+}
+
+.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;
+}
+
+.menu-mode .mode-only-head::before {
+  --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
+}
+
+.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;
 }
 </style>