@touchvue/ui 1.0.0-beta.55 → 1.0.0-beta.57

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;
@@ -599,117 +596,56 @@ html body .height-full {
   --bg-size: 100% 100%;
   --padding: 0;
   --color: inherit;
+  --bar-width: 0.5em;
+  --bar-height: 0.5em;
+  --bar-border: 0 none;
+  --bar-bg: transparent;
+  --bar-radius: 0.25em;
+  --bar-hover-border: 0;
+  --bar-hover-bg: rgba(0, 0, 0, 0.3);
+  --hover-bar-border: var(--bar-border);
+  --hover-bar-bg: rgba(0, 0, 0, 0.2);
 }
 .to-scroll {
   color: var(--color);
   position: relative;
-  overflow: auto;
   box-sizing: border-box;
   height: 100%;
   background: var(--bg);
   background-size: var(--bg-size);
 }
-.to-scroll .to-scroll-content {
+.to-scroll-content {
   padding: var(--padding);
   box-sizing: border-box;
   height: 100%;
   overflow: auto;
 }
-.to-scroll .to-scroll-content.virtual-scroll {
-  overflow: auto;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-.to-scroll .to-scroll-bar {
-  position: absolute;
-  right: 2px;
-  top: 2px;
-  bottom: 2px;
-  width: 6px;
-  z-index: 100;
-  transition: opacity 0.3s;
-  border-radius: 4px;
-  background-color: rgba(0, 0, 0, 0.05);
-  opacity: 0;
-  pointer-events: none;
-}
-.to-scroll .to-scroll-bar .to-scroll-thumb {
-  pointer-events: auto;
-}
-.to-scroll .to-scroll-bar.horizontal {
-  left: 2px;
-  right: 2px;
-  bottom: 2px;
-  top: auto;
-  width: auto;
-  height: 6px;
-}
-.to-scroll .to-scroll-bar.bar-always {
-  opacity: 1;
-}
-.to-scroll:hover .to-scroll-bar,
-.to-scroll .to-scroll-bar.active {
-  opacity: 1;
-}
-.to-scroll .to-scroll-thumb {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 30px;
-  /* 默认高度，会被动态计算 */
-  background-color: rgba(0, 0, 0, 0.3);
-  border-radius: 4px;
-  cursor: pointer;
-  user-select: none;
-  transition: background-color 0.2s;
-}
-.to-scroll .to-scroll-thumb:hover,
-.to-scroll .to-scroll-thumb:active {
-  background-color: rgba(0, 0, 0, 0.5);
-}
-.to-scroll .to-scroll-bar.horizontal .to-scroll-thumb {
-  width: 30px;
-  /* 默认宽度，会被动态计算 */
-  height: 100%;
-  right: auto;
+.to-scroll-content::-webkit-scrollbar {
+  width: var(--bar-width);
+  height: var(--bar-height);
 }
-.to-scroll::-webkit-scrollbar-thumb {
-  border-radius: 3px;
-  background-color: transparent;
-  transition: background-color 0.3s;
+.to-scroll-content::-webkit-scrollbar-track {
+  background: transparent;
 }
-.to-scroll:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.2);
+.to-scroll-content::-webkit-scrollbar-thumb {
+  border: var(--bar-border);
+  border-radius: var(--bar-radius);
+  background: var(--bar-bg);
 }
-.to-scroll:hover::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(0, 0, 0, 0.3);
+.to-scroll:hover > .to-scroll-content::-webkit-scrollbar-thumb {
+  border: var(--hover-bar-border);
+  background: var(--hover-bar-bg);
 }
-.to-scroll::-webkit-scrollbar-track {
-  background-color: transparent;
+.to-scroll:hover > .to-scroll-content::-webkit-scrollbar-thumb:hover {
+  border: var(--bar-hover-border);
+  background: var(--bar-hover-bg);
 }
-.to-scroll.hide-scrollbar {
+.to-scroll.is-hide .to-scroll-content {
   -ms-overflow-style: none;
-  /* IE and Edge */
   scrollbar-width: none;
-  /* Firefox */
 }
-.to-scroll.hide-scrollbar::-webkit-scrollbar {
+.to-scroll.is-hide .to-scroll-content::-webkit-scrollbar {
   display: none;
-  /* Chrome, Safari, Opera */
-}
-.to-scroll .to-scroll-spacer {
-  display: block;
-  width: 100%;
-}
-.to-scroll.dragging-scrollbar,
-.to-scroll.dragging-scrollbar-horizontal {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
 }
 .to-scroll.type-v .to-scroll-content {
   overflow-x: hidden;
@@ -762,6 +698,12 @@ html body .height-full {
   justify-content: center;
   display: flex;
 }
+.to-grid.type-avg {
+  display: flex;
+}
+.to-grid.type-avg > * {
+  flex: 1;
+}
 .to-grid.dir-v.type-center {
   align-items: center;
 }
@@ -1769,6 +1711,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 +1724,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 +1740,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);
@@ -1975,6 +1923,8 @@ html body .height-full {
 }
 .to-tag-text {
   font-size: var(--size);
+  display: inline-flex;
+  align-items: center;
 }
 .to-tag-remove {
   cursor: default;
@@ -2213,7 +2163,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;
@@ -2327,10 +2277,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;
@@ -3221,26 +3171,19 @@ html body .height-full {
   --gap: 0;
   --color: inherit;
   --placeholder-color: var(--color-placeholder);
-  --content-gap: 0.5em;
-  --content-padding: 0 1em;
+  --padding: 0 0 0 1em;
   --tag-gap: 0.5em;
   --tag-height: 2em;
+  --clear-height: var(--height);
+  --arrow-height: var(--height);
   --overflow-color: var(--color-fg-fade);
-  --arrow-size: 1em;
-  --arrow-font-size: 0.75em;
-  --arrow-color: var(--color-fg-fade);
-  --clear-size: 1em;
-  --clear-color: var(--color-fg-fade);
-  --clear-hover-color: var(--color-danger);
-  --arrow-hover-color: var(--arrow-color);
-  --arrow-active-color: var(--arrow-color);
   --hover-bg: rgba(0, 0, 0, 0.1);
   --hover-border: var(--border);
   --hover-color: var(--color);
   --active-bg: rgba(0, 0, 0, 0.3);
   --active-border: var(--border);
   --active-color: var(--color);
-  --option-padding: 0.5em;
+  --option-padding: 0.5em 0;
   --option-gap: 0;
   --option-list-gap-x: 0em;
   --option-list-gap-y: 0em;
@@ -3248,7 +3191,8 @@ html body .height-full {
   --option-tip-padding: 2em;
   --option-tip-align: center;
   --option-fn-gap: 0.5em;
-  --option-fn-align: left;
+  --option-fn-margin: 0.5em;
+  --option-fn-padding: 0 0.5em;
   --option-item-height: var(--height);
   --option-item-size: 1em;
   --option-item-padding: 0 1em;
@@ -3315,9 +3259,6 @@ html body .height-full {
 .to-select-el:hover .to-select-content {
   color: var(--hover-color);
 }
-.to-select-el:hover .to-select-arrow:before {
-  color: var(--arrow-hover-color);
-}
 .to-select-el:active {
   background: var(--active-bg);
   background-size: var(--bg-size);
@@ -3326,9 +3267,6 @@ html body .height-full {
 .to-select-el:active::before {
   border: var(--active-border);
 }
-.to-select-el:active .to-select-arrow:before {
-  color: var(--arrow-active-color);
-}
 .to-select-el::before {
   border: var(--border);
   border-radius: var(--radius);
@@ -3349,8 +3287,7 @@ html body .height-full {
 }
 .to-select-content {
   flex: 1;
-  padding: var(--content-padding);
-  gap: var(--content-gap);
+  padding: var(--padding);
   display: flex;
   align-items: center;
   overflow: hidden;
@@ -3366,32 +3303,19 @@ html body .height-full {
 }
 .to-select-clear {
   flex-shrink: 0;
-  --color: var(--clear-color);
-  --width: var(--clear-size);
-  --height: var(--clear-size);
-  --size: var(--clear-size);
+  display: none;
   cursor: pointer;
-  opacity: 0;
   transition: opacity 0.15s ease;
-}
-.to-select-clear:hover {
-  --color: var(--clear-hover-color);
-}
-.to-select:hover .to-select-clear,
-.to-select:focus-within .to-select-clear {
-  opacity: 1;
+  --width: var(--clear-height);
+  --height: var(--clear-height);
 }
 .to-select-arrow {
-  flex-shrink: 0;
-  width: var(--arrow-size);
-  height: var(--arrow-size);
-  line-height: var(--arrow-size);
+  --color: #aaa;
+  --width: var(--arrow-height);
+  --height: var(--arrow-height);
 }
-.to-select-arrow:before {
-  color: var(--arrow-color);
-  font-size: var(--arrow-font-size);
-  font-family: 'icon';
-  content: "\e081";
+.to-select:hover .to-select-clear {
+  display: inline-flex;
 }
 .to-select-tag {
   --el-height: var(--height);
@@ -3422,15 +3346,25 @@ html body .height-full {
 }
 .to-select-option {
   --bg-size: 100% 100%;
-}
-.to-select-option > .to-float-wrapper .to-scroll {
   --padding: var(--option-padding);
 }
+.to-select-option .to-float-content {
+  display: flex;
+  flex-direction: column;
+}
+.to-select-option-scroll {
+  flex: 1;
+  height: auto;
+  min-height: 0;
+}
 .to-select-option-fn {
   display: flex;
+  margin-top: var(--option-fn-margin);
   gap: var(--option-fn-gap);
-  margin-bottom: var(--option-gap);
-  justify-content: var(--option-fn-align);
+  padding: var(--option-fn-padding);
+}
+.to-select-option-button {
+  flex: 1;
 }
 .to-select-option-tip {
   text-align: var(--option-tip-align);
@@ -3577,6 +3511,9 @@ html body .height-full {
 .to-select.is-filterable .to-select-tag:has(.to-tag) {
   padding-bottom: 0;
 }
+.media-pc .to-select:hover .to-select-arrow {
+  display: none;
+}
 .to-select.to-select-mode-line {
   background: none;
 }
@@ -4082,10 +4019,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 {
@@ -4264,20 +4201,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;
 }
@@ -4322,6 +4255,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;
@@ -4565,6 +4501,11 @@ html body .height-full {
 .to-msg.type-loading .to-msg-icon {
   animation: var(--loading-speed) loading2 steps(32) infinite;
 }
+.to-msg.dir-h {
+  --icon-width: 4.5em;
+  --icon-height: 4.5em;
+  --icon-size: 4.5em;
+}
 .to-msg.dir-h .to-msg-wrapper {
   --align: left;
   flex-direction: row;
@@ -5018,15 +4959,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;
@@ -5223,7 +5164,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 {
@@ -5464,6 +5405,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;
@@ -5501,11 +5443,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);
@@ -8731,114 +8675,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-item-state-text {
+  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-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-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 .to-upload-img .to-upload-add {
+.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;