@pubinfo-pr/core 0.222.3 → 0.223.1

package/src/built-in/layout-component/components/Tools/Preferences/PreferencesContent.vue

@@ -375,366 +375,131 @@ async function resetSetting() {
 
 <style lang="css" scoped>
 .divider {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem; /* 16px */
-  margin-top: 1rem; /* 16px */
-  margin-bottom: 1rem; /* 16px */
-  white-space: nowrap;
-  font-size: 0.875rem; /* 14px */
-  line-height: 1.25rem; /* 20px */
-  font-weight: 500;
+  --at-apply: flex items-center justify-between gap-4 my-4 whitespace-nowrap text-sm font-500;
 }
 
 .divider::before,
 .divider::after {
-  content: "";
-  width: 100%;
-  height: 1px;
-  background-color: #e7e5e4;
-}
-
-.dark .divider::before,
-.dark .divider::after {
-  background-color: #57534e;
+  --at-apply: content-empty w-full h-1px bg-stone-2 dark:bg-stone-6;
 }
 
 .themes {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem; /* 16px */
-  padding-bottom: 1rem; /* 16px */
+  --at-apply: flex flex-wrap items-center justify-center gap-4 pb-4;
 }
 
 .theme {
-  & {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 3rem; /* 48px */
-    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 */;
-  }
+  --at-apply: flex items-center justify-center w-12 h-12 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer transition;
 }
 
 .theme.active {
-  --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);
+  --at-apply: ring-ui-primary ring-2;
 }
 
 .theme.active .content {
-  --un-rotate-x: 0;
-  --un-rotate-y: 0;
-  --un-rotate-z: 0;
-  --un-rotate: 0deg;
-  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));
+  --at-apply: rotate-0;
 }
 
 .theme .content {
-  width: 1.5rem; /* 24px */
-  height: 1rem; /* 16px */
-  border-radius: 50%;
-  --un-rotate-x: 0;
-  --un-rotate-y: 0;
-  --un-rotate-z: 0;
-  --un-rotate: -45deg;
-  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));
-  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;
+  --at-apply: w-6 h-4 rounded-50% -rotate-45 transition;
 }
 
 .menu-mode {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem; /* 16px */
-  padding-bottom: 1rem; /* 16px */
+  --at-apply: flex items-center justify-center gap-4 pb-4;
 }
 
 .mode {
-  & {
-    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 */;
-  }
+  --at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer transition;
 }
 
 .mode.active {
-  --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);
+  --at-apply: ring-ui-primary ring-2;
 }
 
 .mode::before,
 .mode::after,
 .mode .mode-container {
-  position: absolute;
-  pointer-events: none;
+  --at-apply: absolute pointer-events-none;
 }
 
 .mode::before {
-  content: "";
-  background-color: rgb(var(--ui-primary));
+  --at-apply: content-empty bg-ui-primary;
 }
 
 .mode::after {
-  content: "";
-  background-color: rgb(var(--ui-primary) / 0.6);
+  --at-apply: content-empty bg-ui-primary/60;
 }
 
 .mode .mode-container {
-  background-color: rgb(var(--ui-primary) / 0.2);
-  border-style: dashed;
-  border-color: rgb(var(--ui-primary));
+  --at-apply: bg-ui-primary/20 border-dashed border-ui-primary;
 }
 
 .mode .mode-container::before {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
+  --at-apply: content-empty absolute w-full h-full;
 }
 
 .mode-side::before {
-  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 */
+  --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
 }
 
 .mode-side::after {
-  top: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  left: 1.125rem; /* 18px */
-  width: 0.75rem; /* 12px */
+  --at-apply: top-2 bottom-2 left-4.5 w-3;
 }
 
 .mode-side .mode-container {
-  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 */
+  --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-8 rounded-tr-1 rounded-br-1;
 }
 
 .mode-head::before {
-  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 */
+  --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
 }
 
 .mode-head::after {
-  top: 1.125rem; /* 18px */
-  left: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  width: 0.75rem; /* 12px */
-  border-bottom-left-radius: 0.25rem; /* 4px */
+  --at-apply: top-4.5 left-2 bottom-2 w-3 rounded-bl-1;
 }
 
 .mode-head .mode-container {
-  top: 1.125rem; /* 18px */
-  right: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  left: 1.375rem; /* 22px */
-  border-bottom-right-radius: 0.25rem; /* 4px */
+  --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-5.5 rounded-br-1;
 }
 
 .mode-single::after {
-  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 */
+  --at-apply: top-2 left-2 bottom-2 w-3 rounded-tl-1 rounded-bl-1;
 }
 
 .mode-single .mode-container {
-  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 */
+  --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-5.5 rounded-tr-1 rounded-br-1;
 }
 
 .mode-only-side::before {
-  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 */
+  --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
+
 }
 
 .mode-only-side .mode-container {
-  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 */
+  --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-4.5 rounded-tr-1 rounded-br-1;
 }
 
 .mode-only-head::before {
-  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 */
+  --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
 }
 
 .mode-only-head .mode-container {
-  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 */
+  --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-2 rounded-bl-1 rounded-br-1;
 }
 
 .app-width-mode {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem; /* 16px */
-  padding-bottom: 1rem; /* 16px */
+  --at-apply: flex items-center justify-center gap-4 pb-4;
 }
 
 .app-width-mode .mode {
-  & {
-    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 */;
-  }
+  --at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer transition of-hidden;
 }
 
 .app-width-mode .mode.active {
-  --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);
+  --at-apply: ring-ui-primary ring-2;
 }
 
 .mode-adaption::before {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: #f5f5f4;
-}
-
-.dark .mode-adaption::before {
-  background-color: #1c1917;
+  --at-apply: content-empty absolute w-full h-full bg-stone-1 dark:bg-stone-9;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -745,158 +510,69 @@ async function resetSetting() {
 
 .mode-adaption .left,
 .mode-adaption .right {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
+  --at-apply: absolute top-1/2 -translate-y-1/2;
 }
 
 .mode-adaption .left {
-  left: 0.25rem; /* 4px */
+  --at-apply: left-1;
 }
 
 .mode-adaption .right {
-  right: 0.25rem; /* 4px */
+  --at-apply: right-1;
 }
 
 .mode-adaption-min-width::before {
-  content: "";
-  position: absolute;
-  width: 50%;
-  height: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: #f5f5f4;
-}
-
-.dark .mode-adaption-min-width::before {
-  background-color: #1c1917;
+  --at-apply: content-empty absolute w-1/2 h-full left-1/2 -translate-x-1/2 bg-stone-1 dark:bg-stone-9;
 }
 
 .mode-adaption-min-width .left,
 .mode-adaption-min-width .right {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
+  --at-apply: absolute top-1/2 -translate-y-1/2;
 }
 
 .mode-adaption-min-width .left {
-  left: 0.125rem; /* 2px */
+  --at-apply: left-0.5;
 }
 
 .mode-adaption-min-width .right {
-  right: 0.125rem; /* 2px */
+  --at-apply: right-0.5;
 }
 
 .mode-center::before {
-  content: "";
-  position: absolute;
-  width: 60%;
-  height: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: #f5f5f4;
-}
-
-.dark .mode-center::before {
-  background-color: #1c1917;
+  --at-apply: content-empty absolute w-3/5 h-full left-1/2 -translate-x-1/2 bg-stone-1 dark:bg-stone-9;
 }
 
 .mode-center-max-width::before {
-  content: "";
-  position: absolute;
-  width: 60%;
-  height: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: #f5f5f4;
-}
-
-.dark .mode-center-max-width::before {
-  background-color: #1c1917;
+  --at-apply: content-empty absolute w-3/5 h-full left-1/2 -translate-x-1/2 bg-stone-1 dark:bg-stone-9;
 }
 
 .mode-center-max-width .left,
 .mode-center-max-width .right {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
+  --at-apply: absolute top-1/2 -translate-y-1/2;
 }
 
 .mode-center-max-width .left {
-  left: 0.625rem; /* 10px */
+  --at-apply: left-2.5;
 }
 
 .mode-center-max-width .right {
-  right: 0.625rem; /* 10px */
+  --at-apply: right-2.5;
 }
 
 .transition-mode {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem; /* 16px */
-  padding-bottom: 1rem; /* 16px */
+  --at-apply: flex items-center justify-center gap-4 pb-4;
 }
 
 .transition-mode .mode {
-  & {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 3.5rem; /* 56px */
-    height: 2.5rem; /* 40px */
-    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;
-  }
-  .dark & {
-    --un-ring-opacity: 1;
-    --un-ring-color: rgb(68 64 60 / var(--un-ring-opacity)) /* #44403c */;
-  }
+  --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 {
-  --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);
+  --at-apply: ring-ui-primary ring-2;
 }
 
 .transition-mode .mode::after {
-  content: "";
-  position: absolute;
-  width: 60%;
-  height: 60%;
-  top: 20%;
-  left: 20%;
-  border-radius: 0.5rem; /* 8px */
-  background-color: #e7e5e4;
-  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 .transition-mode .mode::after {
-  background-color: #1c1917;
+  --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 {
@@ -969,43 +645,14 @@ async function resetSetting() {
 }
 
 .setting-item {
-  & {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem; /* 16px */
-    padding-left: 1rem; /* 16px */
-    padding-right: 1rem; /* 16px */
-    padding-top: 0.5rem; /* 8px */
-    padding-bottom: 0.5rem; /* 8px */
-    border-radius: 0.5rem; /* 8px */
-    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;
-  }
-  &:hover {
-    background-color: #f5f5f4;
-  }
-  .dark &:hover {
-    background-color: #1c1917;
-  }
+  --at-apply: flex items-center justify-between gap-4 px-4 py-2 rounded-2 transition hover:bg-stone-1 dark:hover:bg-stone-9;
 }
 
 .setting-item .label {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  gap: 0.5rem; /* 8px */
-  font-size: 0.875rem; /* 14px */
-  line-height: 1.25rem; /* 20px */
+  --at-apply: flex items-center flex-shrink-0 gap-2 text-sm;
 }
 
 .setting-item .label i {
-  font-size: 1.25rem; /* 20px */
-  line-height: 1.75rem; /* 28px */
-  color: #fb923c;
-  cursor: help;
+  --at-apply: text-xl text-orange cursor-help;
 }
 </style>