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

package/theme/index.css

@@ -599,124 +599,56 @@ html body .height-full {
   --bg-size: 100% 100%;
   --padding: 0;
   --color: inherit;
-}
-.to-scroll.is-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-.to-scroll.is-hide::-webkit-scrollbar {
-  display: none;
+  --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;
@@ -769,6 +701,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;
 }
@@ -3236,23 +3174,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);
-  --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;
@@ -3260,7 +3194,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;
@@ -3327,9 +3262,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);
@@ -3338,9 +3270,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);
@@ -3361,8 +3290,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;
@@ -3378,28 +3306,19 @@ html body .height-full {
 }
 .to-select-clear {
   flex-shrink: 0;
+  display: none;
   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;
+  --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);
@@ -3430,15 +3349,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);
@@ -3585,6 +3514,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;
 }
@@ -4572,6 +4504,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;

package/theme/skin/default.css

@@ -599,124 +599,56 @@ html body .height-full {
   --bg-size: 100% 100%;
   --padding: 0;
   --color: inherit;
-}
-.to-scroll.is-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-.to-scroll.is-hide::-webkit-scrollbar {
-  display: none;
+  --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;
@@ -769,6 +701,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;
 }
@@ -3236,23 +3174,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);
-  --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;
@@ -3260,7 +3194,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;
@@ -3327,9 +3262,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);
@@ -3338,9 +3270,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);
@@ -3361,8 +3290,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;
@@ -3378,28 +3306,19 @@ html body .height-full {
 }
 .to-select-clear {
   flex-shrink: 0;
+  display: none;
   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;
+  --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);
@@ -3430,15 +3349,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);
@@ -3585,6 +3514,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;
 }
@@ -4572,6 +4504,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;