@touchvue/ui 1.0.0-beta.43 → 1.0.0-beta.44

package/theme/components/index.css

@@ -598,8 +598,10 @@ html body .height-full {
   --bg: none;
   --bg-size: 100% 100%;
   --padding: 0;
+  --color: inherit;
 }
 .to-scroll {
+  color: var(--color);
   position: relative;
   overflow: auto;
   box-sizing: border-box;
@@ -607,18 +609,6 @@ html body .height-full {
   background: var(--bg);
   background-size: var(--bg-size);
 }
-.to-scroll.scroll-mode-vertical {
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-.to-scroll.scroll-mode-horizontal {
-  overflow-x: auto;
-  overflow-y: hidden;
-  white-space: nowrap;
-}
-.to-scroll.scroll-mode-both {
-  overflow: auto;
-}
 .to-scroll .to-scroll-content {
   padding: var(--padding);
   box-sizing: border-box;
@@ -721,6 +711,14 @@ html body .height-full {
   -ms-user-select: none;
   user-select: none;
 }
+.to-scroll.type-v .to-scroll-content {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.to-scroll.type-h .to-scroll-content {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
 .to-grid {
   --gap: 0.5em;
   --gap-x: var(--gap);
@@ -2093,26 +2091,6 @@ html body .height-full {
 .to-tag.type-corner.position-bottom-right .to-tag-wrapper {
   border-radius: var(--radius) 0 0 0;
 }
-.to-article {
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-  padding: 2em;
-  margin: 1em 0;
-}
-.to-article-header {
-  font-size: 1.3em;
-  font-weight: bold;
-  margin-bottom: 1em;
-}
-.to-article-content {
-  font-size: 1em;
-  color: #333;
-}
-.to-article-footer {
-  margin-top: 1.5em;
-  color: #888;
-  font-size: 0.93em;
-}
 .to-box {
   --bg: var(--color-bg);
   --bg-size: 100% 100%;
@@ -2124,7 +2102,6 @@ html body .height-full {
   --height: auto;
   --shadow: none;
   --cursor: auto;
-  --gap: 0;
   --check-color: var(--color-primary);
   --check-border: 1px solid var(--check-color);
   --check-size: 1;
@@ -2144,9 +2121,6 @@ html body .height-full {
   --active-gd-border-end: var(--gd-border-end);
 }
 .to-box {
-  display: flex;
-  gap: var(--gap);
-  flex-direction: column;
   color: var(--color);
   cursor: var(--cursor);
   width: var(--width);
@@ -2253,43 +2227,61 @@ html body .height-full {
   background: linear-gradient(var(--gd-border-deg), var(--active-gd-border-start), var(--active-gd-border-end));
 }
 .to-breadcrumb {
-  font-size: 14px;
-  line-height: 1;
+  --size: 1em;
+  --height: 1;
+  --gap: 0.5em;
+  --padding: 0;
+  --bg: none;
+  --bg-size: 100% 100%;
+  --border: 0 none;
+  --radius: 0;
+  --label-color: var(--fg);
+  --link-color: var(--color-primary);
+  --link-hover-color: var(--primary-light-3);
+  --link-active-color: var(--primary-dark-3);
+  --separator-color: var(--color-fg-fade);
+}
+.to-breadcrumb {
+  line-height: var(--height);
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
+  padding: var(--padding);
+  color: var(--color);
+  background: var(--bg);
+  background-size: var(--bg-size);
+  border: var(--border);
+  border-radius: var(--radius);
 }
-.to-breadcrumb.is-default {
-  color: var(--to-text-color-regular);
-}
-.to-breadcrumb.is-custom {
-  color: var(--to-text-color-primary);
-  background-color: var(--to-bg-color-page);
-  padding: 8px 16px;
-  border-radius: 4px;
-}
-.to-breadcrumb .to-breadcrumb-item {
+.to-breadcrumb-item {
   display: flex;
   align-items: center;
+  gap: var(--gap);
 }
-.to-breadcrumb .to-breadcrumb-item:last-child .to-breadcrumb-item__inner {
-  color: var(--to-text-color-regular);
-}
-.to-breadcrumb .to-breadcrumb-item:last-child .to-breadcrumb-item__separator {
+.to-breadcrumb-item:last-child .to-breadcrumb-item-separator {
   display: none;
 }
-.to-breadcrumb .to-breadcrumb-item__inner {
-  color: var(--to-color-primary);
-  transition: var(--to-transition-color);
+.to-breadcrumb-item-label {
+  color: var(--label-color);
+  font-size: var(--size);
 }
-.to-breadcrumb .to-breadcrumb-item__inner.is-link {
+.to-breadcrumb-item-label.is-link {
+  color: var(--link-color);
   cursor: pointer;
 }
-.to-breadcrumb .to-breadcrumb-item__inner.is-link:hover {
-  color: var(--to-color-primary-light-3);
+.to-breadcrumb-item-label.is-link:hover {
+  color: var(--link-hover-color);
+}
+.to-breadcrumb-item-label.is-link:active {
+  color: var(--link-active-color);
 }
-.to-breadcrumb .to-breadcrumb-item__separator {
-  margin: 0 8px;
-  color: var(--to-text-color-placeholder);
+.to-breadcrumb-item-separator {
+  margin-right: var(--gap);
+  color: var(--separator-color);
+}
+.to-breadcrumb-item-separator.to-icon {
+  --width: 1em;
+  --height: 1em;
 }
 .to-button {
   --height: var(--height-fe);
@@ -2433,7 +2425,6 @@ html body .height-full {
   --bg: none;
   --bg-size: 100% 100%;
   --gap: 0;
-  --border: 1px solid var(--color-border);
   --date-padding: 0.5em;
   --date-radius: 0;
   --date-bg: none;
@@ -3079,6 +3070,107 @@ html body .height-full {
 .to-calendar.type-time .to-calendar-time {
   flex: 1;
 }
+.to-float {
+  --radius: 0;
+  --border: 1px solid var(--color-border);
+  --bg: var(--color-bg);
+  --bg-size: 100% 100%;
+  --shadow: 0 0.25em 0.25em rgba(0, 0, 0, 0.1);
+  --mask: rgba(0, 0, 0, 0.3);
+  --margin: 0;
+  --padding: 0;
+}
+.to-float-wrapper {
+  box-sizing: border-box;
+}
+.to-float-content {
+  height: 100%;
+  box-sizing: border-box;
+  border-radius: var(--radius);
+  background: var(--bg);
+  background-size: var(--bg-size);
+  padding: var(--padding);
+  overflow: hidden;
+  border: var(--border);
+  box-shadow: var(--shadow);
+}
+.to-float:not(.is-slide) {
+  position: fixed;
+  z-index: 1100;
+  visibility: hidden;
+  transform-origin: top;
+}
+.to-float:not(.is-slide).origin-bottom {
+  transform-origin: bottom;
+}
+.to-floatTrigger {
+  display: inline-flex;
+  position: relative;
+  vertical-align: middle;
+}
+.to-float:not(.is-slide).position-top .to-float-wrapper {
+  padding-bottom: var(--margin);
+}
+.to-float:not(.is-slide).position-bottom .to-float-wrapper {
+  padding-top: var(--margin);
+}
+.to-float.is-slide .to-float-wrapper {
+  padding: var(--margin);
+}
+.to-float.is-slide {
+  --border: 0 none;
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  pointer-events: none;
+}
+.to-float.is-slide > .to-float-mask {
+  background: var(--mask);
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  transition: opacity 0.3s ease-out;
+}
+.to-float.is-slide > .to-float-wrapper {
+  position: absolute;
+  box-sizing: border-box;
+}
+.to-float.is-slide.position-top > .to-float-wrapper {
+  width: 100%;
+  max-height: 100%;
+  top: 0;
+}
+.to-float.is-slide.position-bottom > .to-float-wrapper {
+  top: auto;
+  width: 100%;
+  max-height: 80%;
+  bottom: 0;
+}
+.to-float.is-slide.position-right > .to-float-wrapper {
+  right: 0;
+  width: 75%;
+  top: 0;
+  height: 100%;
+}
+.to-float.is-slide.position-left > .to-float-wrapper {
+  left: 0;
+  width: 75%;
+  top: 0;
+  height: 100%;
+}
+.to-float.is-slide.is-show .to-float-wrapper {
+  pointer-events: all;
+}
+.to-float.is-slide.is-show .to-float-mask {
+  pointer-events: all;
+}
+.to-float.is-slide.is-mask.is-show .to-float-mask {
+  opacity: 1;
+}
 .to-select {
   --height: var(--height-fe);
   --border: var(--border-fe);
@@ -3268,11 +3360,7 @@ html body .height-full {
   gap: var(--tag-gap);
 }
 .to-select-option {
-  --bg: var(--option-bg);
   --bg-size: 100% 100%;
-  --radius: var(--option-radius);
-  --border: var(--option-border);
-  --shadow: var(--option-shadow);
 }
 .to-select-option > .to-float-wrapper .to-scroll {
   --padding: var(--option-padding);
@@ -3419,7 +3507,7 @@ html body .height-full {
   width: 0;
 }
 .to-form {
-  --gap: 0.5em;
+  --gap: 1em;
   --gap-x: var(--gap);
   --gap-y: var(--gap);
   --col: 1;
@@ -3434,7 +3522,7 @@ html body .height-full {
   --label-size: 1em;
   --label-padding: 0.5em 0;
   --label-color: inherit;
-  --label-gap: 0.5em;
+  --label-gap: 0.3em;
   --label-align: flex-end;
   --required-color: var(--color-danger);
   --submit-gap: 0.5em;
@@ -3846,7 +3934,7 @@ html body .height-full {
   --radius: var(--radius-fe);
   --weight: normal;
   --gap: 0;
-  --clear-margein: 0;
+  --clear-margin: 0;
   --content-gap: 1em;
   --content-padding: 0 1em;
   --prefix-padding: 0;
@@ -4844,6 +4932,7 @@ html body .height-full {
   --item-bg-size: 100% 100%;
   --item-radius: 0;
   --item-width: auto;
+  --item-height: auto;
   --content-gap: 0.5em;
   --content-align: center;
   --icon-bg: none;
@@ -4869,24 +4958,24 @@ html body .height-full {
   --divider-bg-size: 100% 100%;
   --divider-radius: 0;
   --divider-margin: 0.5em;
-  --on-item-border: var(--item-border);
-  --on-item-bg: var(--item-bg);
-  --on-icon-bg: var(--color-primary);
-  --on-icon-border: 0 none;
-  --on-icon-color: var(--color-bg);
-  --on-icon-bg-size: 100% 100%;
-  --on-divider-bg: var(--color-primary);
-  --on-title-color: var(--color-primary);
-  --on-desc-color: var(--desc-color);
-  --completed-item-border: var(--on-item-border);
-  --completed-item-bg: var(--on-item-bg);
-  --completed-icon-bg: var(--on-icon-bg);
-  --completed-icon-border: var(--on-icon-border);
-  --completed-icon-color: var(--on-icon-color);
-  --completed-icon-bg-size: var(--on-icon-bg-size);
-  --completed-divider-bg: var(--on-divider-bg);
-  --completed-title-color: var(--on-title-color);
-  --completed-desc-color: var(--on-desc-color);
+  --item-on-border: var(--item-border);
+  --item-on-bg: var(--item-bg);
+  --icon-on-bg: var(--color-primary);
+  --icon-on-border: 0 none;
+  --icon-on-color: var(--color-bg);
+  --icon-on-bg-size: 100% 100%;
+  --divider-on-bg: var(--color-primary);
+  --title-on-color: var(--color-primary);
+  --desc-on-color: var(--desc-color);
+  --item-completed-border: var(--item-border);
+  --item-completed-bg: var(--item-bg);
+  --icon-completed-bg: var(--color-primary);
+  --icon-completed-border: 0 none;
+  --icon-completed-color: var(--color-bg);
+  --icon-completed-bg-size: 100% 100%;
+  --divider-completed-bg: var(--color-primary);
+  --title-completed-color: var(--color-primary);
+  --desc-completed-color: var(--desc-color);
   --detail-color: inherit;
   --detail-margin: 0.5em;
   --detail-size: 1em;
@@ -4989,41 +5078,41 @@ html body .height-full {
   min-width: 1em;
 }
 .to-step-item.is-on {
-  border: var(--on-item-border);
-  background: var(--on-item-bg);
+  border: var(--item-on-border);
+  background: var(--item-on-bg);
   background-size: var(--item-bg-size);
 }
 .to-step-item.is-on .to-step-item-icon {
-  border: var(--on-icon-border);
-  background: var(--on-icon-bg);
+  border: var(--icon-on-border);
+  background: var(--icon-on-bg);
   background-size: var(--icon-bg-size);
-  color: var(--on-icon-color);
+  color: var(--icon-on-color);
 }
 .to-step-item.is-on .to-step-item-desc {
-  color: var(--on-desc-color);
+  color: var(--desc-on-color);
 }
 .to-step-item.is-on .to-step-item-title {
-  color: var(--on-title-color);
+  color: var(--title-on-color);
 }
 .to-step-item.is-completed {
-  border: var(--completed-item-border);
-  background: var(--completed-item-bg);
+  border: var(--item-completed-border);
+  background: var(--item-completed-bg);
   background-size: var(--item-bg-size);
 }
 .to-step-item.is-completed .to-step-item-icon {
-  border: var(--completed-icon-border);
-  background: var(--completed-icon-bg);
+  border: var(--icon-completed-border);
+  background: var(--icon-completed-bg);
   background-size: var(--icon-bg-size);
-  color: var(--completed-icon-color);
+  color: var(--icon-completed-color);
 }
 .to-step-item.is-completed .to-step-item-title {
-  color: var(--completed-title-color);
+  color: var(--title-completed-color);
 }
 .to-step-item.is-completed .to-step-item-desc {
-  color: var(--completed-desc-color);
+  color: var(--desc-completed-color);
 }
 .to-step-item.is-completed + .to-step-divider {
-  background: var(--completed-divider-bg);
+  background: var(--divider-completed-bg);
   background-size: var(--divider-bg-size);
 }
 .to-step.dir-v {
@@ -5044,7 +5133,7 @@ html body .height-full {
   margin-left: calc(var(--icon-width) + var(--content-gap));
 }
 .to-step.dir-v .to-step-item.is-completed .to-step-divider {
-  background: var(--on-divider-bg);
+  background: var(--divider-completed-bg);
   background-size: var(--divider-bg-size);
 }
 .to-step.dir-v:has(.to-step-item-desc) {
@@ -5235,9 +5324,22 @@ html body .height-full {
   background-size: var(--box-bg-size);
   border: var(--checked-box-active-border);
 }
+.to-centerScroll {
+  --height: 15em;
+  --item-height: 3em;
+  --item-size: 1em;
+  --item-on-color: var(--color-primary);
+  --item-on-weight: bold;
+  --item-dis-color: #ccc;
+  --top-start: rgba(255, 255, 255, 0.5);
+  --top-end: #fff;
+  --bottom-start: #fff;
+  --bottom-end: rgba(255, 255, 255, 0.5);
+  --item-on-border: 1px solid rgba(0, 0, 0, 0.1);
+}
 .to-centerScroll {
   position: relative;
-  height: 15em;
+  height: var(--height);
 }
 .to-centerScroll-content {
   height: 100%;
@@ -5247,25 +5349,23 @@ html body .height-full {
 .to-centerScroll-content::-webkit-scrollbar {
   display: none;
 }
-.to-centerScroll-wrapper {
-  padding-top: 6em;
-  padding-bottom: 6em;
-}
 .to-centerScroll-item {
-  line-height: 3em;
-  height: 3em;
+  line-height: var(--item-height);
+  height: var(--item-height);
   text-align: center;
 }
+.to-centerScroll-item-text {
+  font-size: var(--item-size);
+}
 .to-centerScroll-top {
   position: absolute;
   pointer-events: none;
   top: 0;
   right: 0;
   left: 0;
-  height: 6em;
-  background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, #fff 100%);
+  background: linear-gradient(0deg, var(--top-start) 0%, var(--top-end) 100%);
   z-index: 1;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: var(--item-on-border);
 }
 .to-centerScroll-bottom {
   position: absolute;
@@ -5273,17 +5373,16 @@ html body .height-full {
   bottom: 0;
   right: 0;
   left: 0;
-  height: 6em;
-  background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0.5) 100%);
+  background: linear-gradient(0deg, var(--bottom-start) 0%, var(--bottom-end) 100%);
   z-index: 1;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: var(--item-on-border);
 }
 .to-centerScroll-item.is-on {
-  font-weight: bold;
-  color: var(--to-color-primary, #007aff);
+  font-weight: var(--item-on-weight);
+  color: var(--item-on-color);
 }
-.to-centerScroll-item[v-dis='true'] {
-  color: #ccc;
+.to-centerScroll-item.is-dis {
+  color: var(--item-dis-color);
   pointer-events: none;
 }
 .theme-dark .to-centerScroll-top {
@@ -5321,35 +5420,96 @@ html body .height-full {
   color: var(--color-fg);
 }
 .to-date-range {
-  display: inline-flex;
-  border: 1px solid #ccc;
-  border-radius: 0.25em;
-  padding: 0.3em 0.5em;
-  height: 3em;
+  --border: var(--border-fe);
+  --radius: var(--radius-fe);
+  --bg: var(--bg-fe);
+  --bg-size: 100% 100%;
+  --padding: 0;
+  --width: auto;
+  --height: var(--height-fe);
+  --placeholder-color: var(--color-placeholder);
+  --input-padding: 0 1em;
+  --input-color: var(--color-fg);
+  --separator-color: var(--color-fg);
+  --separator-padding: 0 0.5em;
+  --clear-margin: 0 0.5em 0 0;
+  --clear-color: var(--color-fg-fade);
+  --divider-border: 1px solid var(--color-border);
+  --divider-margin: 0 0.5em;
+  --prefix-padding: 0 0 0 1em;
+  --prefix-margin: 0;
+  --prefix-color: var(--color-fg);
+  --suffix-padding: 0;
+  --suffix-margin: 0;
+  --suffix-color: var(--color-fg);
+}
+.to-date-range {
+  display: flex;
   align-items: center;
+  position: relative;
+  border-radius: var(--radius);
+  background: var(--bg);
+  background-size: var(--bg-size);
+  padding: var(--padding);
+  width: var(--width);
+  height: var(--height);
 }
-.to-date-range .to-icon.mode-date-range-icon {
-  --width: 1em;
-  margin-right: 0.5em;
-  cursor: pointer;
+.to-date-range::before {
+  border: var(--border);
+  border-radius: var(--radius);
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+.to-date-range-input {
+  flex: 1;
+  padding: var(--input-padding);
+  color: var(--input-color);
+  border: 0 none;
+  background: none;
 }
-.to-date-range .to-icon.mode-date-range-icon:hover {
-  opacity: 0.8;
+.to-date-range-input::placeholder {
+  color: var(--placeholder-color);
 }
-.to-date-range .to-date-range-input {
-  width: 7em;
-  text-align: center;
-  border: none;
+.to-date-range-separator {
+  color: var(--separator-color);
+  padding: var(--separator-padding);
 }
-.to-date-range .to-date-range-separator {
-  margin: 0 1em;
+.to-date-range-clear {
+  --color: var(--color-fg-fade);
+}
+.to-date-range-layer {
+  --padding: 0.5em;
 }
-.to-date-range .to-date-range-calendar-content {
+.to-date-range-calendars {
   display: flex;
 }
-.to-date-range .to-date-range-calendar-content .to-date-range-calendar-separator {
-  width: 1px;
-  background: #ccc;
+.to-date-range-divider {
+  border-left: var(--divider-border);
+  margin: var(--divider-margin);
+}
+.to-date-range-prefix,
+.to-date-range-prefix-text {
+  padding: var(--prefix-padding);
+  margin: var(--prefix-margin);
+  color: var(--prefix-color);
+}
+.to-date-range-suffix,
+.to-date-range-suffix-text {
+  padding: var(--suffix-padding);
+  margin: var(--suffix-margin);
+  color: var(--suffix-color);
+}
+.media-pc .to-date-range-clear {
+  visibility: hidden;
+}
+.media-pc .to-date-range:hover .to-date-range-clear {
+  visibility: visible;
 }
 .to-switch {
   --width: 4em;
@@ -6759,7 +6919,7 @@ html body .height-full {
   --padding: 0;
   --radius: 0;
   --shadow: none;
-  --item-border: 1px solid var(--color-border);
+  --item-border: var(--border-fe);
   --item-padding: 0 1em;
   --item-color: var(--color-fg-fade);
   --item-bg: var(--color-bg);
@@ -7023,6 +7183,15 @@ html body .height-full {
 .to-segment.is-col .to-segment-item {
   width: calc((100% - (var(--col) - 1) * var(--gap-x)) / var(--col) * var(--merge) + (var(--merge) - 1) * var(--gap-x));
 }
+.to-segment.col-avg {
+  display: flex;
+}
+.to-segment.col-avg .to-segment-content {
+  justify-content: center;
+}
+.to-segment.col-avg .to-segment-item {
+  flex: 1;
+}
 .to-segment.col-1 {
   --col: 1;
 }
@@ -7164,160 +7333,6 @@ html body .height-full {
 .to-dialog.is-slide.is-show .to-dialog-wrapper {
   transform: scale(1);
 }
-.to-float {
-  --radius: 0;
-  --border: 1px solid var(--color-border);
-  --bg: var(--color-bg);
-  --bg-size: 100% 100%;
-  --shadow: 0 0.25em 0.25em rgba(0, 0, 0, 0.1);
-  --mask: rgba(0, 0, 0, 0.3);
-  --margin: 0;
-  --padding: 0;
-}
-.to-float-wrapper {
-  box-sizing: border-box;
-}
-.to-float-content {
-  height: 100%;
-  box-sizing: border-box;
-  border-radius: var(--radius);
-  background: var(--bg);
-  background-size: var(--bg-size);
-  padding: var(--padding);
-  overflow: hidden;
-  border: var(--border);
-  box-shadow: var(--shadow);
-}
-.to-float:not(.is-slide) {
-  position: fixed;
-  z-index: 1100;
-  visibility: hidden;
-  transform-origin: top;
-}
-.to-float:not(.is-slide).origin-bottom {
-  transform-origin: bottom;
-}
-.to-floatTrigger {
-  display: inline-flex;
-  position: relative;
-  vertical-align: middle;
-}
-.to-float:not(.is-slide).position-top .to-float-wrapper {
-  padding-bottom: var(--margin);
-}
-.to-float:not(.is-slide).position-bottom .to-float-wrapper {
-  padding-top: var(--margin);
-}
-.to-float.is-slide .to-float-wrapper {
-  padding: var(--margin);
-}
-.to-float.is-slide {
-  --border: 0 none;
-  position: fixed;
-  inset: 0;
-  z-index: 1100;
-  pointer-events: none;
-}
-.to-float.is-slide > .to-float-mask {
-  background: var(--mask);
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
-  transition: opacity 0.3s ease-out;
-}
-.to-float.is-slide > .to-float-wrapper {
-  position: absolute;
-  box-sizing: border-box;
-}
-.to-float.is-slide.position-top > .to-float-wrapper {
-  width: 100%;
-  max-height: 100%;
-  top: 0;
-}
-.to-float.is-slide.position-bottom > .to-float-wrapper {
-  top: auto;
-  width: 100%;
-  max-height: 80%;
-  bottom: 0;
-}
-.to-float.is-slide.position-right > .to-float-wrapper {
-  right: 0;
-  width: 75%;
-  top: 0;
-  height: 100%;
-}
-.to-float.is-slide.position-left > .to-float-wrapper {
-  left: 0;
-  width: 75%;
-  top: 0;
-  height: 100%;
-}
-.to-float.is-slide.is-show .to-float-wrapper {
-  pointer-events: all;
-}
-.to-float.is-slide.is-show .to-float-mask {
-  pointer-events: all;
-}
-.to-float.is-slide.is-mask.is-show .to-float-mask {
-  opacity: 1;
-}
-.to-submit {
-  justify-content: center;
-  display: flex;
-}
-.to-submit[style*='width'],
-.to-submit-width-normal,
-.to-submit-width-full {
-  margin: 0 auto;
-}
-.to-submit[style*='width'] > button,
-.to-submit-width-normal > button,
-.to-submit-width-full > button {
-  flex: 1;
-  display: block;
-  padding: 0;
-}
-.to-submit-width-normal {
-  width: 29.25em;
-}
-.to-submit-width-auto {
-  display: block;
-}
-.to-submit-position-bottom {
-  position: absolute;
-  bottom: 0;
-}
-.to-submit-position-bottom[style*='width'],
-.to-submit-position-bottom.to-submit-width-normal {
-  left: 50%;
-  transform: translateX(-50%);
-}
-.to-submit-position-bottom.to-submit-width-full {
-  left: 0;
-  width: 100%;
-}
-.to-submit-space-1 > button {
-  margin-left: 0.5em;
-}
-.to-submit-space-1 > button:first-child {
-  margin-left: 0;
-}
-.to-submit-space-2 > button {
-  margin-left: 1em;
-}
-.to-submit-space-2 > button:first-child {
-  margin-left: 0;
-}
-.to-submit-space-3 > button {
-  margin-left: 1.5em;
-}
-.to-submit-space-3 > button:first-child {
-  margin-left: 0;
-}
 .to-slide {
   --page-width: 100%;
   --page-gap: 0.25em;
@@ -8495,16 +8510,32 @@ html body .height-full {
   overflow: visible;
 }
 .to-guider {
-  position: absolute;
+  --mask: var(--fg-op-3);
+  --title-lh: 2em;
+  --title-size: 1.5em;
+  --title-color: inherit;
+  --title-weight: normal;
+  --desc-lh: 2em;
+  --desc-size: 1em;
+  --desc-color: inherit;
+  --desc-weight: normal;
+  --desc-margin: 0.5em;
+  --fn-gap: 1em;
+  --fn-margin: 1em;
+  --fn-align: flex-end;
+}
+.to-guider {
+  position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
+  z-index: 100000;
   pointer-events: none;
 }
-.to-guider > .bg {
+.to-guider-bg {
   pointer-events: all;
-  background: rgba(0, 0, 0, 0.3);
+  background: var(--mask);
   left: 0;
   right: 0;
   top: 0;
@@ -8512,24 +8543,44 @@ html body .height-full {
   position: absolute;
   transition: left 0.2s ease-out, top 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
 }
-.to-guiderContent {
-  padding: 1em 0.5em;
-  display: flex;
+.to-guider-pic {
+  --width: 5em;
 }
-.to-guiderContent > .content {
-  flex: 1;
-  margin-left: 0.5em;
+.to-guider-title {
+  color: var(--title-color);
+  line-height: var(--title-lh);
 }
-.to-guiderContent > .content .title {
-  font-weight: 600;
-  font-size: 1.2em;
+.to-guider-title-text {
+  font-weight: var(--title-weight);
+  font-size: var(--title-size);
 }
-.to-guiderContent > .content .desc {
-  line-height: 1.8;
+.to-guider-desc {
+  color: var(--desc-color);
+  line-height: var(--desc-lh);
 }
-.to-guiderContent > .content .fn {
-  margin-top: 1em;
-  text-align: right;
+.to-guider-title + .to-guider-desc {
+  margin-top: var(--desc-margin);
+}
+.to-guider-desc-text {
+  font-weight: var(--desc-weight);
+  font-size: var(--desc-size);
+}
+.to-guider-tip {
+  pointer-events: all;
+  --padding: 2em;
+}
+.to-guider-tip .to-tooltip-content-text {
+  display: flex;
+  gap: var(--gap);
+}
+.to-guider-content {
+  flex: 1;
+}
+.to-guider-fn {
+  display: flex;
+  justify-content: var(--fn-align);
+  gap: var(--fn-gap);
+  margin-top: var(--fn-margin);
 }
 .to-transfer-panel {
   display: inline-block;