@touchvue/ui 1.0.0-beta.54 → 1.0.0-beta.56

package/theme/components/index.css

@@ -127,9 +127,6 @@ img {
   vertical-align: top;
   max-width: 100%;
 }
-label {
-  cursor: default !important;
-}
 #scrollerTest {
   position: absolute;
   width: 100px;
@@ -600,6 +597,13 @@ html body .height-full {
   --padding: 0;
   --color: inherit;
 }
+.to-scroll.is-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.to-scroll.is-hide::-webkit-scrollbar {
+  display: none;
+}
 .to-scroll {
   color: var(--color);
   position: relative;
@@ -784,6 +788,7 @@ html body .height-full {
 .to-grid.va-baseline {
   align-items: baseline;
 }
+.to-grid:has(.to-box.height-full),
 .to-grid.va-full {
   align-items: stretch;
 }
@@ -889,6 +894,7 @@ html body .height-full {
   src: url('../img/font-fill/iconfont.woff2?t=1756347622462') format('woff2'), url('../img/font-fill/iconfont.woff?t=1756347622462') format('woff'), url('../img/font-fill/iconfont.ttf?t=1756347622462') format('truetype');
 }
 .to-icon {
+  --weight: normal;
   --cursor: pointer;
   --color: inherit;
   --width: var(--height-fe);
@@ -921,7 +927,6 @@ html body .height-full {
   flex-shrink: 0;
   display: inline-flex;
   font-family: var(--family), 'PingFang SC', 'microsoft yahei';
-  vertical-align: top;
   white-space: nowrap;
   position: relative;
   box-sizing: border-box;
@@ -943,11 +948,11 @@ html body .height-full {
 .to-icon:before {
   font-weight: normal;
   font-size: var(--size);
-  vertical-align: top;
   content: var(--value);
 }
 .to-icon-text {
   font-size: var(--size);
+  font-weight: var(--weight);
 }
 .to-icon.value-loading span:after {
   content: '';
@@ -976,7 +981,6 @@ html body .height-full {
 }
 .to-icon.value-loading .to-icon-text {
   position: absolute;
-  vertical-align: top;
   font-size: 1em;
   width: var(--width);
   height: var(--height);
@@ -1769,6 +1773,8 @@ html body .height-full {
   --viewer-fn-padding: 0;
   --viewer-fn-bottom: 2em;
   --viewer-fn-border: 0 none;
+  --count-top: 0;
+  --count-right: 0;
 }
 .to-pic {
   flex-shrink: 0;
@@ -1780,7 +1786,6 @@ html body .height-full {
   justify-content: center;
   align-items: center;
   text-align: center;
-  overflow: hidden;
   color: var(--color);
   width: var(--width);
   height: var(--height);
@@ -1797,6 +1802,11 @@ html body .height-full {
   height: var(--content-height);
   border-radius: var(--content-radius);
 }
+.to-pic-count {
+  position: absolute;
+  top: var(--count-top);
+  right: var(--count-right);
+}
 .to-pic.is-link:hover {
   border: var(--hover-border);
   background: var(--hover-bg);
@@ -1942,7 +1952,9 @@ html body .height-full {
   --active-border: var(--border);
 }
 .to-tag {
-  display: inline-block;
+  display: inline-flex;
+  align-items: flex-start;
+  justify-content: center;
   overflow: hidden;
   vertical-align: top;
 }
@@ -1973,6 +1985,8 @@ html body .height-full {
 }
 .to-tag-text {
   font-size: var(--size);
+  display: inline-flex;
+  align-items: center;
 }
 .to-tag-remove {
   cursor: default;
@@ -2095,6 +2109,7 @@ html body .height-full {
   left: 0;
   bottom: 0;
   top: unset;
+  right: unset;
 }
 .to-tag.type-corner.position-bottom-left .to-tag-wrapper {
   border-radius: 0 var(--radius) 0 0;
@@ -2210,7 +2225,7 @@ html body .height-full {
   line-height: 1em;
   vertical-align: top;
   font-family: icon;
-  content: '\e05c';
+  content: '\e6cd';
   font-size: calc(0.7em * var(--check-size));
   right: 0.1em;
   bottom: 0.2em;
@@ -2324,10 +2339,10 @@ html body .height-full {
   --color: var(--color-fg);
   --bg: #fff;
   --bg-size: 100% 100%;
-  --hover-bg: rgba(0, 0, 0, 0.1);
+  --hover-bg: rgba(0, 0, 0, 0.05);
   --hover-color: var(--color);
   --hover-border: var(--border);
-  --active-bg: rgba(0, 0, 0, 0.2);
+  --active-bg: rgba(0, 0, 0, 0.1);
   --active-color: var(--color);
   --active-border: var(--border);
   --text-gap: 0.5em;
@@ -3222,6 +3237,7 @@ html body .height-full {
   --content-padding: 0 1em;
   --tag-gap: 0.5em;
   --tag-height: 2em;
+  --overflow-color: var(--color-fg-fade);
   --arrow-size: 1em;
   --arrow-font-size: 0.75em;
   --arrow-color: var(--color-fg-fade);
@@ -3357,6 +3373,19 @@ html body .height-full {
   font-weight: var(--weight);
   color: var(--color);
 }
+.to-select-clear {
+  flex-shrink: 0;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.to-select-clear:hover {
+  --color: var(--arrow-active-color);
+}
+.to-select:hover .to-select-clear,
+.to-select:focus-within .to-select-clear {
+  opacity: 1;
+}
 .to-select-arrow {
   flex-shrink: 0;
   width: var(--arrow-size);
@@ -3380,6 +3409,22 @@ html body .height-full {
   margin-left: calc((var(--el-height) - var(--tag-height)) / 2);
   --height: var(--tag-height);
 }
+.to-select-tag.is-collapse {
+  flex-wrap: nowrap;
+  overflow: hidden;
+  align-items: center;
+}
+.to-select-tag.is-collapse .to-tag {
+  flex-shrink: 0;
+  margin-top: 0;
+}
+.to-select-overflow {
+  --height: var(--tag-height);
+  margin-top: calc((var(--el-height) - var(--tag-height)) / 2);
+  margin-left: calc((var(--el-height) - var(--tag-height)) / 2);
+  flex-shrink: 0;
+  color: var(--overflow-color);
+}
 .to-select-option {
   --bg-size: 100% 100%;
 }
@@ -3516,6 +3561,9 @@ html body .height-full {
 .to-select.is-multiple .to-select-tag:has(.to-tag) {
   padding-bottom: calc((var(--height) - var(--tag-height)) / 2);
 }
+.to-select.is-multiple .to-select-tag.is-collapse:has(.to-tag) {
+  padding-bottom: 0;
+}
 .to-select.is-filterable .to-select-content {
   padding-left: 0;
   padding-top: 0;
@@ -3730,7 +3778,7 @@ html body .height-full {
   --size: 1.17em;
   --weight: bold;
   --gap: 0.5em;
-  --lh: 1em;
+  --lh: 1.25em;
   --radius: 0;
   --border: 0 none;
   --hover-border: var(--border);
@@ -3742,8 +3790,8 @@ html body .height-full {
   --fn-gap: 0.5em;
   --tip-color: var(--color-fg);
   --tip-size: 1em;
-  --icon-width: 0;
-  --icon-height: 0;
+  --icon-width: auto;
+  --icon-height: auto;
   --icon-bg: none;
   --icon-radius: 0;
   --icon-bg-size: 100% 100%;
@@ -3797,6 +3845,7 @@ html body .height-full {
 .to-header-tip {
   color: var(--tip-color);
   font-size: var(--tip-size);
+  line-height: normal;
 }
 .to-header-title {
   line-height: var(--lh);
@@ -4000,6 +4049,7 @@ html body .height-full {
   --shadow: none;
   --clear-margin: 0;
   --clear-height: var(--height);
+  --clear-width: var(--clear-height);
   --content-gap: 1em;
   --content-padding: 0 1em;
   --prefix-padding: 0;
@@ -4021,6 +4071,7 @@ html body .height-full {
   --suffix-text-size: 1em;
   --suffix-text-weight: normal;
   --suffix-text-lh: var(--height);
+  --suffix-icon-height: var(--height);
   --count-color: var(--color-fg-fade);
   --count-size: 1em;
   --count-padding: 0;
@@ -4036,10 +4087,10 @@ html body .height-full {
   --focus-color: var(--color);
   --focus-shadow: var(--shadow);
   --hover-border: var(--border);
-  --hover-bg: rgba(0, 0, 0, 0.1);
+  --hover-bg: rgba(0, 0, 0, 0.05);
   --hover-color: var(--color);
   --active-border: var(--border);
-  --active-bg: rgba(0, 0, 0, 0.3);
+  --active-bg: rgba(0, 0, 0, 0.1);
   --active-color: var(--color);
 }
 .to-input {
@@ -4094,7 +4145,7 @@ html body .height-full {
   margin: var(--clear-margin);
   --color: var(--color-fg-fade);
   --height: var(--clear-height);
-  --width: var(--clear-height);
+  --width: var(--clear-width);
 }
 .to-input-box {
   width: 100%;
@@ -4140,6 +4191,10 @@ html body .height-full {
   gap: var(--suffix-gap);
   padding: var(--suffix-padding);
 }
+.to-input-suffix > .to-icon {
+  --width: var(--suffix-icon-height);
+  --height: var(--suffix-icon-height);
+}
 .to-input-prefix-text {
   display: flex;
   padding: var(--prefix-text-padding);
@@ -4214,20 +4269,16 @@ html body .height-full {
   z-index: 2;
   pointer-events: none;
 }
-.to-input.is-disabled {
+.to-input.is-disabled:not(.is-link) {
   background: var(--disabled-bg);
   color: var(--disabled-color);
-  cursor: not-allowed;
 }
-.to-input.is-disabled::after {
+.to-input.is-disabled:not(.is-link)::after {
   border: var(--disabled-border);
 }
-.to-input.is-disabled input.to-input-content::placeholder {
+.to-input.is-disabled:not(.is-link) input.to-input-content::placeholder {
   color: var(--disabled-placeholder-color);
 }
-.is-disabled .to-input-content {
-  cursor: not-allowed;
-}
 .to-input.is-step input {
   text-align: center;
 }
@@ -4272,6 +4323,9 @@ html body .height-full {
 .to-input.is-link {
   cursor: pointer;
 }
+.to-input.is-link .to-input-content {
+  cursor: pointer;
+}
 .to-input.is-link .to-input-textarea,
 .to-input.is-link .to-input-box {
   pointer-events: none;
@@ -4968,15 +5022,15 @@ html body .height-full {
   --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);
+  --item-completed-border: var(--item-on-border);
+  --item-completed-bg: var(--item-on-bg);
+  --icon-completed-bg: var(--icon-on-bg);
+  --icon-completed-border: var(--icon-on-border);
+  --icon-completed-color: var(--icon-on-color);
+  --icon-completed-bg-size: var(--icon-on-bg-size);
+  --divider-completed-bg: var(--divider-on-bg);
+  --title-completed-color: var(--title-on-color);
+  --desc-completed-color: var(--desc-on-color);
   --detail-color: inherit;
   --detail-margin: 0.5em;
   --detail-size: 1em;
@@ -5173,7 +5227,7 @@ html body .height-full {
   display: none;
 }
 .to-step.item-dir-v .to-step-item.is-completed:not(:last-child):before {
-  background: var(--on-divider-bg);
+  background: var(--divider-on-bg);
   background-size: var(--divider-bg-size);
 }
 .to-checkbox {
@@ -5414,6 +5468,7 @@ html body .height-full {
   --placeholder-color: var(--color-placeholder);
   --input-padding: 0 1em;
   --input-color: var(--color-fg);
+  --input-size: 100%;
   --separator-color: var(--color-fg);
   --separator-padding: 0 0.5em;
   --clear-margin: 0 0.5em 0 0;
@@ -5451,11 +5506,13 @@ html body .height-full {
   pointer-events: none;
 }
 .to-date-range-input {
+  font-size: var(--input-size);
   flex: 1;
   padding: var(--input-padding);
   color: var(--input-color);
   border: 0 none;
   background: none;
+  min-width: 0;
 }
 .to-date-range-input::placeholder {
   color: var(--placeholder-color);
@@ -5662,7 +5719,11 @@ html body .height-full {
   --radius: 0;
   --title-color: var(--color-fg);
   --title-weight: bold;
-  --title-size: 1em;
+  --title-size: 1.25em;
+  --title-lh: var(--item-height);
+  --title-divider: 0 none;
+  --title-divider-height: 1em;
+  --title-divider-margin: 0;
   --divider: 0 none;
   --fn-radius: 0;
   --fn-bg: none;
@@ -5689,14 +5750,16 @@ html body .height-full {
   --item-valign: center;
   --item-icon-margin: 0.5em;
   --item-left-bg: none;
-  --item-left-width: none;
+  --item-left-width: auto;
+  --item-left-height: 100%;
   --item-right-bg: none;
-  --item-right-width: none;
+  --item-right-width: auto;
+  --item-right-height: 100%;
   --item-content-bg: none;
   --item-content-bg-size: 100% 100%;
-  --item-divider-width: 0;
-  --item-divider-color: var(--color-border);
+  --item-divider: 0 none;
   --item-divider-height: 1em;
+  --item-divider-width: 0;
   --item-hover-color: var(--item-color);
   --item-hover-bg: rgba(0, 0, 0, 0.1);
   --item-hover-border: var(--item-border);
@@ -5704,8 +5767,9 @@ html body .height-full {
   --item-hover-border-bottom: var(--item-hover-border);
   --item-hover-border-left: var(--item-hover-border);
   --item-hover-border-right: var(--item-hover-border);
-  --item-hover-left-bg: none;
-  --item-hover-right-bg: none;
+  --item-hover-content-bg: var(--item-content-bg);
+  --item-hover-left-bg: var(--item-left-bg);
+  --item-hover-right-bg: var(--item-right-bg);
   --item-active-color: var(--item-color);
   --item-active-bg: rgba(0, 0, 0, 0.2);
   --item-active-border: var(--item-border);
@@ -5729,12 +5793,14 @@ html body .height-full {
   --item-on-weight: var(--item-weight);
   --item-on-left-bg: var(--item-left-bg);
   --item-on-left-width: var(--item-left-width);
+  --item-on-left-height: var(--item-left-height);
   --item-on-right-bg: var(--item-right-bg);
   --item-on-right-width: var(--item-right-width);
+  --item-on-right-height: var(--item-right-height);
   --item-on-content-bg: var(--item-content-bg);
-  --item-on-divider-width: var(--item-divider-width);
-  --item-on-divider-color: var(--item-divider-color);
+  --item-on-divider: var(--item-divider);
   --item-on-divider-height: var(--item-divider-height);
+  --item-on-divider-width: var(--item-divider-width);
   --item-disabled-color: #d6d6d6;
   --item-remove-margin: 0.5em;
   --item-count-margin: 0.5em;
@@ -5804,10 +5870,23 @@ html body .height-full {
   z-index: 0;
   position: relative;
 }
+.to-tab-title {
+  line-height: var(--title-lh);
+}
 .to-tab-title-text {
   color: var(--title-color);
   font-weight: var(--title-weight);
   font-size: var(--title-size);
+  display: flex;
+  align-items: center;
+}
+.to-tab-title-text:after {
+  content: '';
+  display: block;
+  width: 0;
+  height: var(--title-divider-height);
+  border-right: var(--title-divider);
+  margin: var(--title-divider-margin);
 }
 .to-tab-tab {
   display: flex;
@@ -5919,20 +5998,20 @@ html body .height-full {
 .to-tab-item-main:after {
   content: '';
   width: var(--item-divider-width);
-  background: var(--item-divider-color);
+  border-right: var(--item-divider);
   height: var(--item-divider-height);
   align-self: center;
 }
 .to-tab-item-left {
   background: var(--item-left-bg);
   background-size: 100% 100%;
-  height: 100%;
+  height: var(--item-left-height);
   width: var(--item-left-width);
 }
 .to-tab-item-right {
   background: var(--item-right-bg);
   background-size: 100% 100%;
-  height: 100%;
+  height: var(--item-right-height);
   width: var(--item-right-width);
 }
 .to-tab-item-content {
@@ -6002,8 +6081,7 @@ html body .height-full {
   z-index: 1;
 }
 .to-tab-item.is-on .to-tab-item-main:after {
-  width: var(--item-on-divider-width);
-  background: var(--item-on-divider-color);
+  border-right: var(--item-on-divider);
   height: var(--item-on-divider-height);
 }
 .to-tab-item.is-on .to-tab-indicator {
@@ -6013,11 +6091,13 @@ html body .height-full {
   background: var(--item-on-left-bg);
   background-size: 100% 100%;
   width: var(--item-on-left-width);
+  height: var(--item-on-left-height);
 }
 .to-tab-item.is-on .to-tab-item-right {
   background: var(--item-on-right-bg);
   background-size: 100% 100%;
   width: var(--item-on-right-width);
+  height: var(--item-on-right-height);
 }
 .to-tab-item.is-on .to-tab-item-content {
   padding: var(--item-on-padding);
@@ -6030,7 +6110,7 @@ html body .height-full {
 }
 .to-tab-item:has(+.is-on) .to-tab-item-main:after {
   width: var(--item-on-divider-width);
-  background: var(--item-on-divider-color);
+  border-right: var(--item-on-divider);
   height: var(--item-on-divider-height);
 }
 .to-tab-item.is-disabled .to-tab-item-label {
@@ -6046,6 +6126,10 @@ html body .height-full {
   border-left: var(--item-hover-border-left);
   border-right: var(--item-hover-border-right);
 }
+.to-tab-item:not(.is-on):hover .to-tab-item-content {
+  background: var(--item-hover-content-bg);
+  background-size: 100% 100%;
+}
 .to-tab-item:not(.is-on):hover .to-tab-item-label {
   color: var(--item-hover-color);
 }
@@ -6213,53 +6297,83 @@ html body .height-full {
   flex-direction: row;
   align-items: stretch;
 }
-.to-tab.dir-v .to-tab-tab {
+.to-tab.dir-v > .to-tab-tab {
   flex-direction: column;
 }
-.to-tab.dir-v .to-tab-wrapper {
+.to-tab.dir-v > .to-tab-tab .to-tab-wrapper {
   flex-direction: column;
   align-items: stretch;
 }
-.to-tab.dir-v .to-tab-divider {
+.to-tab.dir-v > .to-tab-tab .to-tab-divider {
   height: auto;
 }
-.to-tab.dir-v .to-tab-page {
-  flex: 1;
-}
-.to-tab.dir-v .to-tab-page .to-tab-page-item {
-  height: 100%;
-}
-.to-tab.dir-v .to-tab-item {
+.to-tab.dir-v > .to-tab-tab .to-tab-item {
   flex-direction: row;
 }
-.to-tab.dir-v .to-tab-indicator {
+.to-tab.dir-v > .to-tab-tab .to-tab-indicator {
   top: 50%;
   transform: translateY(-50%);
 }
-.to-tab.item-dir-v .to-tab-item-content {
+.to-tab.dir-v > .to-tab-page {
+  flex: 1;
+}
+.to-tab.dir-v > .to-tab-page .to-tab-page-item {
+  height: 100%;
+}
+.to-tab.item-dir-v > .to-tab-tab .to-tab-item-content {
   flex-direction: column;
 }
-.to-tab.position-left .to-tab-divider {
+.to-tab.position-left {
+  --item-left-width: auto;
+  --item-left-height: 0;
+  --item-right-width: auto;
+  --item-right-height: 0;
+  --item-divider-height: 0;
+  --item-divider-width: 100%;
+}
+.to-tab.position-left > .to-tab-tab .to-tab-divider {
   inset: 0 0 0 auto;
   border-bottom: 0 none;
   border-right: var(--divider);
+  width: 0;
+}
+.to-tab.position-left > .to-tab-tab .to-tab-item-main {
+  min-height: 0;
+  flex-direction: column;
+}
+.to-tab.position-left > .to-tab-tab .to-tab-item-main:after {
+  border-right: 0 none;
+  border-bottom: var(--item-divider);
+}
+.to-tab.position-left > .to-tab-tab .to-tab-item-content {
+  min-height: 0;
+  justify-content: center;
+  align-items: center;
+}
+.to-tab.position-right {
+  --item-left-width: auto;
+  --item-left-height: 0;
 }
-.to-tab.position-right .to-tab-divider {
+.to-tab.position-right > .to-tab-tab .to-tab-divider {
   inset: 0 auto 0 0;
   border-bottom: 0 none;
   border-left: var(--divider);
+  width: 0;
 }
-.to-tab.position-bottom .to-tab-divider {
+.to-tab.position-bottom > .to-tab-tab .to-tab-divider {
   inset: 0 0 auto 0;
   border-bottom: 0 none;
   border-top: var(--divider);
 }
-.to-tab.position-bottom .to-tab-tab,
-.to-tab.position-right .to-tab-tab {
+.to-tab.position-bottom > .to-tab-tab .to-tab-item-main {
+  flex-direction: column;
+}
+.to-tab.position-bottom > .to-tab-tab,
+.to-tab.position-right > .to-tab-tab {
   order: 2;
 }
-.to-tab.position-bottom .to-tab-page,
-.to-tab.position-right .to-tab-page {
+.to-tab.position-bottom > .to-tab-page,
+.to-tab.position-right > .to-tab-page {
   order: 1;
 }
 .to-tab.item-width-avg .to-tab-wrapper {
@@ -6307,6 +6421,7 @@ html body .height-full {
   --body-even-color: var(--body-color);
   --body-even-bg: var(--body-bg);
   --action-gap: 1em;
+  --action-padding: 0;
   --radio-size: 1em;
   --radio-border: 1px solid var(--color-border);
   --on-radio-border: 0.35em solid var(--color-primary);
@@ -6511,7 +6626,7 @@ html body .height-full {
   content: '\e081';
 }
 .to-table-td.type-action {
-  padding: 0;
+  padding: var(--action-padding);
 }
 .to-table-action {
   display: flex;
@@ -7894,11 +8009,11 @@ html body .height-full {
   text-align: center;
   color: #4d5b65;
 }
-.to-icon.mode-tree-loading {
-  --size: 1.2em;
-  --width: 1.2em;
-  --height: 1.2em;
-  --loading: url(/pic-pro/img/loading-out.png);
+.to-tree-loading {
+  --size: 1em;
+  --width: 1em;
+  --height: 1em;
+  --loading: url(../img/loading.png);
   --loading-speed: 1s;
 }
 .to-param {
@@ -8623,114 +8738,222 @@ html body .height-full {
 }
 .to-upload {
   position: relative;
+  --tip-margin: 1em;
+  --tip-color: #999;
+  --tip-weight: normal;
+  --tip-size: 100%;
+  --upload-button-margin: 0.5em;
+  --list-border: 0 none;
+  --list-bg: none;
+  --list-bg-size: 100% 100%;
+  --list-padding: 0;
+  --list-radius: 0;
+  --list-shadow: none;
+  --list-gap: 0;
+  --item-border: 0 none;
+  --item-bg: none;
+  --item-bg-size: 100% 100%;
+  --item-padding: 0;
+  --item-radius: 0;
+  --item-shadow: none;
+  --item-color: var(--color-fg);
+  --item-size: 1em;
+  --item-weight: normal;
+  --item-state-margin: 0;
+  --item-state-color: var(--color-fg);
+  --item-state-size: 1em;
+  --item-state-weight: normal;
+  --item-icon-width: 1.5em;
+  --item-icon-height: 1.5em;
+  --item-icon-size: 1.5em;
+  --item-icon-margin: 0.5em;
+  --item-remove-margin: 0em;
+  --progress-thick: 0.2em;
+  --danger-bg: rgba(249, 57, 32, 0.1);
+  --danger-border: 1px solid rgba(249, 57, 32, 0.5);
 }
-.to-upload .to-upload-list-item {
-  padding: 0.3em;
+.to-upload-content {
   display: flex;
-  position: relative;
+  align-items: center;
 }
-.to-upload .to-upload-list-item .file-name {
-  flex: 1;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.to-upload-input {
+  --width: 20em;
 }
-.to-upload .to-upload-list-item .upload-progress {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 0.2em;
+.to-upload-tip {
+  display: flex;
+  margin-left: var(--tip-margin);
+  color: var(--tip-color);
 }
-.to-upload .to-upload-list-item .upload-progress .upload-progress-bar {
-  background-color: #0077fa;
-  height: 0.2em;
-  border-radius: 0.1em;
+.to-upload-tip-text {
+  font-size: var(--tip-size);
+  font-weight: var(--tip-weight);
 }
-.to-upload .to-upload-list-item .mode-color {
-  --color-info: #0077fa;
+.to-upload-upload-button {
+  margin-left: var(--upload-button-margin);
 }
-.to-upload .to-upload-img {
+.to-upload-list {
   display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: var(--list-padding);
+  border: var(--list-border);
+  border-radius: var(--list-radius);
+  background: var(--list-bg);
+  background-size: var(--list-bg-size);
+  box-shadow: var(--list-shadow);
+  gap: var(--list-gap);
 }
-.to-upload .to-upload-img .to-upload-img-list {
+.to-upload-item {
+  padding: var(--item-padding);
   display: flex;
-}
-.to-upload .to-upload-img .to-upload-img-list .to-upload-img-list-item {
-  width: 10em;
-  height: 10em;
-  border: solid 1px #ddd;
-  border-radius: 0.5em;
-  cursor: pointer;
+  align-items: center;
   position: relative;
+  border: var(--item-border);
+  border-radius: var(--item-radius);
+  background: var(--item-bg);
+  background-size: var(--item-bg-size);
+  box-shadow: var(--item-shadow);
+  color: var(--item-color);
+  font-weight: var(--item-weight);
 }
-.to-upload .to-upload-img .to-upload-img-list .to-upload-img-list-item .to-upload-pic {
-  width: 100%;
-  height: 100%;
+.to-upload-item-name {
+  font-size: var(--item-size);
 }
-.to-upload .to-upload-img .to-upload-img-list .to-upload-img-list-item .mode-icon-remove {
-  position: absolute;
-  top: 0.5em;
-  right: 0.5em;
-  color: #fff;
+.to-upload-item-state {
+  margin-left: var(--item-state-margin);
+  color: var(--item-state-color);
+  font-size: var(--item-state-size);
+  font-weight: var(--item-state-weight);
 }
-.to-upload .to-upload-img .to-upload-img-list .to-upload-img-list-item .upload-progress {
+.to-upload-item-state-text {
+  color: var(--item-state-color);
+  font-size: var(--item-state-size);
+  font-weight: var(--item-state-weight);
+}
+.to-upload-item-progress {
   position: absolute;
-  bottom: 0.5em;
-  left: 5%;
-  width: 90%;
-  height: 0.2em;
-  background-color: #ccc;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  --thick: var(--progress-thick);
 }
-.to-upload .to-upload-img .to-upload-img-list .to-upload-img-list-item .upload-progress .upload-progress-bar {
-  background-color: #0077fa;
-  height: 0.2em;
-  border-radius: 0.1em;
+.to-upload-item-icon {
+  --width: var(--item-icon-width);
+  --height: var(--item-icon-height);
+  --size: var(--item-icon-size);
+  margin-right: var(--item-icon-margin);
+}
+.to-upload-item-remove {
+  margin-left: var(--item-remove-margin);
 }
-.to-upload .to-upload-img .to-upload-add {
+.to-upload-item-name {
+  flex: 1;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.to-upload.type-img {
+  --item-width: 10em;
+  --item-height: 10em;
+  --item-border: 1px solid #ddd;
+  --item-bg-size: cover;
+  --item-padding: 0;
+  --item-radius: 0.5em;
+  --item-shadow: none;
+  --list-gap: 1em;
+  --add-width: var(--item-width);
+  --add-height: var(--item-height);
+  --add-border: var(--item-border);
+  --add-radius: var(--item-radius);
+  --add-shadow: var(--item-shadow);
+  --add-bg: none;
+  --add-bg-size: 100% 100%;
+  --add-padding: 0;
+  --add-color: #aaa;
+  --add-size: 4em;
+  --add-hover-border: var(--add-border);
+  --add-hover-bg: rgba(0, 0, 0, 0.05);
+  --add-hover-color: var(--add-color);
+  --add-active-border: var(--add-border);
+  --add-active-bg: rgba(0, 0, 0, 0.1);
+  --add-active-color: var(--add-color);
+  --remove-top: 0.5em;
+  --remove-right: 0.5em;
+  --remove-bg: rgba(0, 0, 0, 0.3);
+  --remove-color: #fff;
+  --remove-radius: 50%;
+  --remove-width: 1.5em;
+  --remove-height: 1.5em;
+}
+.to-upload.type-img .to-upload-list {
+  display: flex;
+  flex-direction: row;
+}
+.to-upload.type-img .to-upload-item {
+  width: var(--item-width);
+  height: var(--item-height);
+  background-size: var(--item-bg-size);
+}
+.to-upload.type-img .to-upload-item-remove {
+  position: absolute;
+  right: var(--remove-right);
+  top: var(--remove-top);
+  --bg: var(--remove-bg);
+  --color: var(--remove-color);
+  --radius: var(--remove-radius);
+  --width: var(--remove-width);
+  --height: var(--remove-height);
+}
+.to-upload.type-img .to-upload-add {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 10em;
-  height: 10em;
-  border: solid 1px #ddd;
-  border-radius: 0.5em;
+  width: var(--add-width);
+  height: var(--add-height);
+  border: var(--add-border);
+  border-radius: var(--add-radius);
+  background: var(--add-bg);
+  background-size: var(--add-bg-size);
+  padding: var(--add-padding);
+  box-shadow: var(--add-shadow);
   cursor: pointer;
 }
-.to-upload .to-upload-img .to-upload-add .mode-upload-add {
-  --font-size: 2em;
+.to-upload.type-img .to-upload-add:hover {
+  border: var(--add-hover-border);
+  background: var(--add-hover-bg);
+  color: var(--add-hover-color);
 }
-.to-upload .to-upload-img.pic-size-s .to-upload-img-list .to-upload-img-list-item {
-  width: 3em;
-  height: 3em;
-  border-radius: 0.5em;
+.to-upload.type-img .to-upload-add:hover .to-upload-add-icon {
+  --color: var(--add-hover-color);
 }
-.to-upload .to-upload-img.pic-size-s .to-upload-img-list .to-upload-img-list-item .mode-icon-remove {
-  top: 0.2em;
-  right: 0.2em;
-  --size: 1em;
-  --font-size: 0.5em;
+.to-upload.type-img .to-upload-add:active {
+  border: var(--add-active-border);
+  background: var(--add-active-bg);
+  color: var(--add-active-color);
 }
-.to-upload .to-upload-img.pic-size-s .to-upload-img-list .to-upload-img-list-item .upload-progress {
-  bottom: 0.2em;
+.to-upload.type-img .to-upload-add:active .to-upload-add-icon {
+  --color: var(--add-active-color);
 }
-.to-upload .to-upload-img.pic-size-s .to-upload-add {
-  width: 3em;
-  height: 3em;
-  border-radius: 0.5em;
+.to-upload.type-img .to-upload-add-icon {
+  --color: var(--add-color);
+  --size: var(--add-size);
+}
+.to-upload.type-img .to-upload-tip {
+  margin: var(--tip-margin) 0 0 0;
 }
-.to-upload .to-upload-img.pic-size-s .to-upload-add .mode-upload-add {
-  --font-size: 1em;
+.to-upload-button {
+  display: inline-flex;
+  align-items: center;
 }
 .to-upload-mode-line {
   background: none;
 }
 .to-upload-color-danger {
-  background: rgba(249, 57, 32, 0.1);
+  background: var(--danger-bg);
 }
 .to-upload-color-danger:before {
-  border: 1px solid rgba(249, 57, 32, 0.5);
+  border: var(--danger-border);
 }
 .to-upload-tip-show {
   overflow: visible;
@@ -8818,14 +9041,14 @@ html body .height-full {
   vertical-align: middle;
 }
 @media screen {
-  .s_pad .to-print,
-  .s_pc .to-print {
+  .media-pad .to-print,
+  .media-pc .to-print {
     height: 100%;
     position: relative;
     background: #f7f7f7;
   }
-  .s_pad .to-print > .content,
-  .s_pc .to-print > .content {
+  .media-pad .to-print > .content,
+  .media-pc .to-print > .content {
     position: absolute;
     left: 0;
     right: 0;
@@ -8833,8 +9056,8 @@ html body .height-full {
     bottom: 4.29em;
     overflow: auto;
   }
-  .s_pad .to-print > .content .paper,
-  .s_pc .to-print > .content .paper {
+  .media-pad .to-print > .content .paper,
+  .media-pc .to-print > .content .paper {
     width: 50em;
     position: relative;
     margin: 2em auto;
@@ -8844,8 +9067,8 @@ html body .height-full {
     border: 1px solid #d9d9d9;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   }
-  .s_pad .to-print > .fn,
-  .s_pc .to-print > .fn {
+  .media-pad .to-print > .fn,
+  .media-pc .to-print > .fn {
     background: #fff;
     position: absolute;
     bottom: 0;
@@ -8856,21 +9079,21 @@ html body .height-full {
     border-top: 1px solid #cccccc;
     text-align: center;
   }
-  .s_pad .to-print > .fn button,
-  .s_pc .to-print > .fn button {
+  .media-pad .to-print > .fn button,
+  .media-pc .to-print > .fn button {
     min-width: 8.57em;
     margin: 0 0.36em;
   }
-  .s_pad .to-print-h > .content .paper,
-  .s_pc .to-print-h > .content .paper {
+  .media-pad .to-print-h > .content .paper,
+  .media-pc .to-print-h > .content .paper {
     width: 70em;
     min-height: 50em;
   }
-  .s_phone .to-print {
+  .media-phone .to-print {
     height: 100%;
     position: relative;
   }
-  .s_phone .to-print > .content {
+  .media-phone .to-print > .content {
     position: absolute;
     left: 0;
     right: 0;
@@ -8878,13 +9101,13 @@ html body .height-full {
     bottom: 3.57em;
     overflow: auto;
   }
-  .s_phone .to-print > .content .paper {
+  .media-phone .to-print > .content .paper {
     padding: 1.43em;
     background: #fff;
     margin-bottom: 1.43em;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   }
-  .s_phone .to-print > .fn {
+  .media-phone .to-print > .fn {
     background: #fff;
     position: absolute;
     bottom: 0;
@@ -8892,7 +9115,7 @@ html body .height-full {
     width: 100%;
     text-align: center;
   }
-  .s_phone .to-print > .fn button {
+  .media-phone .to-print > .fn button {
     border-radius: 0;
     flex: 1;
     height: 3.13em;
@@ -8900,8 +9123,8 @@ html body .height-full {
   }
 }
 @media print {
-  .s_pad .to-print > .content .paper,
-  .s_pc .to-print > .content .paper {
+  .media-pad .to-print > .content .paper,
+  .media-pc .to-print > .content .paper {
     font-size: 14px;
   }
   .to-print > .fn {
@@ -8913,7 +9136,7 @@ html body .height-full {
     background: transparent;
     font-size: 12px;
   }
-  .to-scroll {
+  .to-scroll-content {
     overflow: visible !important;
     position: relative !important;
     top: auto;
@@ -8921,11 +9144,12 @@ html body .height-full {
     bottom: auto;
     right: auto;
   }
-  .to-table .body {
+  .to-table-wrapper {
     overflow: visible !important;
+    height: auto;
   }
-  .s_pad .to-print > .content,
-  .s_pc .to-print > .content {
+  .media-pad .to-print > .content,
+  .media-pc .to-print > .content {
     position: relative;
     top: auto;
     left: auto;
@@ -8933,26 +9157,21 @@ html body .height-full {
     right: auto;
     overflow: visible;
   }
-  .s_pad .to-print > .content .paper,
-  .s_pc .to-print > .content .paper {
+  .media-pad .to-print > .content .paper,
+  .media-pc .to-print > .content .paper {
     page-break-after: always;
   }
 }
 @page {
   margin: 1.5cm;
 }
+.to-print .to-table-wrapper {
+  overflow: visible !important;
+  height: auto;
+}
 .to-print .to-hide-print {
   display: none;
 }
-.to-print .to-title {
-  font-weight: bold;
-}
-.to-print .to-title .text {
-  color: #191919;
-}
-.to-print .to-box {
-  border-color: #000;
-}
 .to-print .to-table {
   background: none !important;
   border: 1px solid #d9d9d9;
@@ -8996,18 +9215,13 @@ html body .height-full {
 .to-print .to-table td.action {
   display: none;
 }
-.to-print .to-table .leftTop,
-.to-print .to-table .rightTop,
-.to-print .to-table .right,
-.to-print .to-table .top {
+.to-print .to-table .to-table-top,
+.to-print .to-table .to-table-left,
+.to-print .to-table .to-table-right,
+.to-print .to-table .to-table-left-top,
+.to-print .to-table .to-table-right-top {
   display: none;
 }
-.to-print .to-table .body {
-  height: auto;
-}
-.to-print .to-table .body .wrapper {
-  display: block;
-}
 .to-print .to-table-print-s {
   font-size: 86.57%;
 }
@@ -9017,25 +9231,6 @@ html body .height-full {
 .to-print .to-table-print-xxs {
   font-size: 66.67%;
 }
-.to-print .to-list-line > ul > li:before {
-  border-color: #000 !important;
-}
-.to-print .to-list-border {
-  border-color: #000 !important;
-}
-.to-print .to-param .label {
-  color: #191919;
-}
-.to-print .to-param-border {
-  border: 1px solid #d9d9d9;
-}
-.to-print .to-article {
-  padding: 0;
-}
-html:not(.s_phone) .to-print .to-table tbody tr.on td,
-html:not(.s_phone) .to-print .to-table tbody tr.on td * {
-  color: #000 !important;
-}
 .to-export-layer {
   --padding: 1em;
 }
@@ -9127,80 +9322,75 @@ html:not(.s_phone) .to-print .to-table tbody tr.on td * {
   --radius: 50%;
 }
 .to-rate {
-  --size: 2em;
-  --gap: 0.25em;
-  --color: var(--primary);
-  --off-color: #ddd;
-  --hover-color: var(--primary-light-1);
-  --hover-off-color: var(--primary-light-5);
+  --item-gap: 0.25em;
+  --item-family: 'icon';
+  --item-on-family: 'icon-fill';
+  --item-size: 1em;
+  --item-color: #ddd;
+  --item-on-color: var(--primary);
   --score-color: var(--color-fg);
   --score-size: 1em;
+  --score-margin: 0.5em;
   --score-weight: normal;
-  --score-gap: 0.5em;
 }
 .to-rate {
   display: inline-flex;
   align-items: center;
   vertical-align: top;
-  gap: var(--gap);
 }
-.to-rate.is-readonly {
+.to-rate-group {
+  display: flex;
+  gap: var(--item-gap);
+}
+.to-rate.is-disabled {
   cursor: default;
 }
-.to-rate:not(.is-readonly) {
+.to-rate:not(.is-disabled) .to-rate-item {
   cursor: pointer;
 }
 .to-rate-item {
-  font-size: var(--size);
   line-height: 1;
-  color: var(--off-color);
-  position: relative;
-  display: inline-block;
-  transition: color 0.2s ease;
-}
-.to-rate-item-star:after {
-  content: '\2605';
-}
-.to-rate-item.is-on {
-  color: var(--color);
-}
-.to-rate-item.is-half-on {
-  color: var(--color);
-}
-.to-rate-item.is-half-on .to-rate-item-star {
   position: relative;
   display: inline-block;
-  color: var(--off-color);
+  width: var(--item-size);
+  height: var(--item-size);
 }
-.to-rate-item.is-half-on .to-rate-item-star:before {
-  content: '\2605';
+.to-rate-icon {
   position: absolute;
   left: 0;
   top: 0;
-  width: 50%;
-  overflow: hidden;
-  color: var(--color);
+  --size: var(--item-size);
+  --width: var(--item-size);
+  --height: var(--item-size);
 }
-.to-rate:hover .to-rate-item {
-  color: var(--hover-off-color);
+.to-rate-icon.is-off {
+  --family: var(--item-family);
+  color: var(--item-color);
 }
-.to-rate:hover .to-rate-item.is-hover {
-  color: var(--color);
+.to-rate-icon.is-on {
+  --family: var(--item-on-family);
+  overflow: hidden;
+  color: var(--item-on-color);
+  clip-path: inset(0 100% 0 0);
 }
-.to-rate.is-readonly:hover .to-rate-item {
-  color: var(--off-color);
+.to-rate-item.is-on .to-rate-icon.is-on {
+  clip-path: inset(0 0 0 0);
 }
-.to-rate.is-readonly:hover .to-rate-item.is-on,
-.to-rate.is-readonly:hover .to-rate-item.is-half-on {
-  color: var(--color);
+.to-rate-item.is-half-on .to-rate-icon.is-on {
+  clip-path: inset(0 50% 0 0);
+}
+.to-rate:not(.is-disabled):hover .to-rate-item.is-hover .to-rate-icon.is-on {
+  color: var(--item-on-color);
 }
 .to-rate-score {
-  font-size: var(--score-size);
-  color: var(--score-color);
   font-weight: var(--score-weight);
-  margin-left: var(--score-gap);
+  color: var(--score-color);
+  margin-left: var(--score-margin);
   line-height: 1;
 }
+.to-rate-score-text {
+  font-size: var(--score-size);
+}
 .to-dis.type-opacity {
   opacity: 0.5;
   pointer-events: inherit;