@touchvue/ui 1.0.0-beta.58 → 1.0.0-beta.59

package/theme/components/index.css

@@ -782,10 +782,10 @@ html body .height-full {
 .to-grid:not(.is-wrap) {
   white-space: nowrap;
 }
-.to-grid:not(.dir-v):not(.col-1) > * {
+.to-grid:not(.dir-v):not(.col-1) > *:not(.to-grid) {
   position: relative;
 }
-.to-grid:not(.dir-v):not(.col-1) > *::after {
+.to-grid:not(.dir-v):not(.col-1) > *:not(.to-grid)::after {
   content: '';
   position: absolute;
   transform: translateY(-50%);
@@ -795,15 +795,15 @@ html body .height-full {
   border-left: var(--divider);
   z-index: 2;
 }
-.to-grid:not(.dir-v):not(.col-1) > *:last-child::after {
+.to-grid:not(.dir-v):not(.col-1) > *:not(.to-grid):last-child::after {
   display: none;
 }
-.to-grid.dir-v > *,
-.to-grid.col-1 > * {
+.to-grid.dir-v > *:not(.to-grid),
+.to-grid.col-1 > *:not(.to-grid) {
   position: relative;
 }
-.to-grid.dir-v > *::after,
-.to-grid.col-1 > *::after {
+.to-grid.dir-v > *:not(.to-grid)::after,
+.to-grid.col-1 > *:not(.to-grid)::after {
   content: '';
   position: absolute;
   transform: translateX(-50%);
@@ -813,13 +813,28 @@ html body .height-full {
   border-top: var(--divider);
   z-index: 2;
 }
-.to-grid.dir-v > *:last-child::after,
-.to-grid.col-1 > *:last-child::after {
+.to-grid.dir-v > *:not(.to-grid):last-child::after,
+.to-grid.col-1 > *:not(.to-grid):last-child::after {
   display: none;
 }
 .to-grid-item {
   box-sizing: border-box;
 }
+.to-grid-item.align-top {
+  align-self: flex-start;
+}
+.to-grid-item.align-center {
+  align-self: center;
+}
+.to-grid-item.align-bottom {
+  align-self: flex-end;
+}
+.to-grid-item.align-stretch {
+  align-self: stretch;
+}
+.to-grid-item.align-baseline {
+  align-self: baseline;
+}
 .to-grid.height-full:not(.dir-v) > .to-grid-item {
   height: 100%;
 }
@@ -1888,6 +1903,13 @@ html body .height-full {
   --active-bg: #ababab;
   --active-color: var(--color);
   --active-border: var(--border);
+  --gd-border-start: transparent;
+  --gd-border-end: transparent;
+  --gd-border-deg: 90deg;
+  --hover-gd-border-start: var(--gd-border-start);
+  --hover-gd-border-end: var(--gd-border-end);
+  --active-gd-border-start: var(--gd-border-start);
+  --active-gd-border-end: var(--gd-border-end);
 }
 .to-tag {
   display: inline-flex;
@@ -1910,6 +1932,35 @@ html body .height-full {
   align-items: center;
   box-sizing: border-box;
   vertical-align: top;
+  position: relative;
+}
+.to-tag-wrapper::after {
+  border: var(--border);
+  border-radius: var(--radius);
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2;
+  pointer-events: none;
+  padding: var(--gd-border-thick);
+  background: linear-gradient(var(--gd-border-deg), var(--gd-border-start), var(--gd-border-end));
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+.to-tag.is-gd-border .to-tag-wrapper {
+  background: transparent;
+}
+.to-tag.is-gd-border .to-tag-wrapper::after {
+  border: 0 none;
+  padding: var(--gd-border-thick);
+  background: var(--gd-border);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
 }
 .to-tag-content {
   display: inline-flex;
@@ -1924,6 +1975,10 @@ html body .height-full {
   margin-left: var(--remove-margin);
 }
 .to-tag-text {
+  background: var(--color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
   font-size: var(--size);
   display: inline-flex;
   align-items: center;
@@ -1954,6 +2009,22 @@ html body .height-full {
   border-radius: var(--dot-radius);
   background: var(--dot-color);
 }
+.to-tag.is-gd-border-hover.is-link .to-tag-wrapper:hover::after {
+  border: 0 none;
+  padding: var(--gd-hover-border-thick, var(--gd-border-thick));
+  background: var(--gd-hover-border);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+.to-tag.is-gd-border-active.is-link .to-tag-wrapper:active::after {
+  border: 0 none;
+  padding: var(--gd-active-border-thick, var(--gd-border-thick));
+  background: var(--gd-active-border);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
 .to-tag.type-number {
   --radius: 999em;
   --padding: 0 0.25em;
@@ -2070,11 +2141,31 @@ html body .height-full {
   color: var(--hover-color);
   border: var(--hover-border);
 }
+.to-tag.is-link .to-tag-wrapper:hover .to-tag-text {
+  background: var(--hover-color);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.to-tag.is-link .to-tag-wrapper:hover::after {
+  border: var(--hover-border);
+  background: linear-gradient(var(--gd-border-deg), var(--hover-gd-border-start), var(--hover-gd-border-end));
+}
 .to-tag.is-link .to-tag-wrapper:active {
   background: var(--active-bg);
   color: var(--active-color);
   border: var(--active-border);
 }
+.to-tag.is-link .to-tag-wrapper:active .to-tag-text {
+  background: var(--active-color);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.to-tag.is-link .to-tag-wrapper:active::after {
+  border: var(--active-border);
+  background: linear-gradient(var(--gd-border-deg), var(--active-gd-border-start), var(--active-gd-border-end));
+}
 .to-box {
   --bg: var(--color-bg);
   --bg-size: 100% 100%;
@@ -2098,7 +2189,6 @@ html body .height-full {
   --gd-border-start: transparent;
   --gd-border-end: transparent;
   --gd-border-deg: 90deg;
-  --gd-border-thick: 0;
   --hover-gd-border-start: var(--gd-border-start);
   --hover-gd-border-end: var(--gd-border-end);
   --active-gd-border-start: var(--gd-border-start);
@@ -2137,6 +2227,17 @@ html body .height-full {
 .to-box.height-full {
   height: 100%;
 }
+.to-box.is-gd-border {
+  background: transparent;
+}
+.to-box.is-gd-border:before {
+  border: 0 none;
+  padding: var(--gd-border-thick);
+  background: var(--gd-border);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
 .to-box.is-checked {
   overflow: hidden;
   border: var(--check-border);
@@ -2210,6 +2311,22 @@ html body .height-full {
   border: var(--hover-border);
   background: linear-gradient(var(--gd-border-deg), var(--active-gd-border-start), var(--active-gd-border-end));
 }
+.to-box.is-gd-border-hover.is-link:hover:before {
+  border: 0 none;
+  padding: var(--gd-hover-border-thick, var(--gd-border-thick));
+  background: var(--gd-hover-border);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+.to-box.is-gd-border-active.is-link:active:before {
+  border: 0 none;
+  padding: var(--gd-active-border-thick, var(--gd-border-thick));
+  background: var(--gd-active-border);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
 .to-breadcrumb {
   --size: 1em;
   --height: 1;
@@ -2289,7 +2406,6 @@ html body .height-full {
   --gd-border-start: transparent;
   --gd-border-end: transparent;
   --gd-border-deg: 90deg;
-  --gd-border-thick: 0;
   --hover-gd-border-start: var(--gd-border-start);
   --hover-gd-border-end: var(--gd-border-end);
   --active-gd-border-start: var(--gd-border-start);
@@ -2299,7 +2415,6 @@ html body .height-full {
   justify-content: center;
   flex-shrink: 0;
   width: var(--width);
-  color: var(--color);
   border: 0 none;
   position: relative;
   padding: var(--padding);
@@ -2309,9 +2424,17 @@ html body .height-full {
   background-size: var(--bg-size);
   cursor: pointer;
   border-radius: var(--radius);
+  vertical-align: top;
+  display: inline-flex;
+}
+.to-button-content {
   display: inline-flex;
   align-items: center;
   vertical-align: top;
+  background: var(--color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 .to-button-expand,
 .to-button-icon {
@@ -2323,8 +2446,8 @@ html body .height-full {
 .to-button-expand {
   --opacity: 0.5;
 }
-.to-button-icon {
-  margin-right: var(--icon-margin);
+.to-button-icon + .to-button-text {
+  margin-left: var(--icon-margin);
 }
 .to-button-text {
   font-size: var(--size);
@@ -2355,38 +2478,80 @@ html body .height-full {
   -webkit-mask-composite: xor;
   mask-composite: exclude;
 }
+.to-button.is-gd-border {
+  background: transparent;
+}
+.to-button.is-gd-border::before {
+  border: 0 none;
+  padding: var(--gd-border-thick);
+  background: var(--gd-border);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
 .to-button:hover {
-  color: var(--hover-color);
   background: var(--hover-bg);
   background-size: var(--bg-size);
 }
+.to-button:hover .to-button-content {
+  background: var(--hover-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
 .to-button:hover:before {
   border: var(--hover-border);
   background: linear-gradient(var(--gd-border-deg), var(--hover-gd-border-start), var(--hover-gd-border-end));
 }
 .to-button:active {
-  color: var(--active-color);
   background: var(--active-bg);
   background-size: var(--bg-size);
 }
+.to-button:active .to-button-content {
+  background: var(--active-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
 .to-button:active:before {
   border: var(--active-border);
   background: linear-gradient(var(--gd-border-deg), var(--active-gd-border-start), var(--active-gd-border-end));
 }
+.to-button.is-gd-border-hover:hover::before {
+  border: 0 none;
+  padding: var(--gd-hover-border-thick, var(--gd-border-thick));
+  background: var(--gd-hover-border);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+.to-button.is-gd-border-active:active::before {
+  border: 0 none;
+  padding: var(--gd-active-border-thick, var(--gd-border-thick));
+  background: var(--gd-active-border);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
 .to-button.icon-position-right .to-button-icon {
   order: 2;
-  margin-right: 0;
-  margin-left: var(--icon-margin);
+}
+.to-button.icon-position-right .to-button-icon + .to-button-text {
+  margin-left: 0;
+  margin-right: var(--icon-margin);
 }
 .to-button.icon-position-top,
 .to-button.icon-position-bottom {
   --height: auto;
   --padding: 1em 1.5em;
+}
+.to-button.icon-position-top .to-button-content,
+.to-button.icon-position-bottom .to-button-content {
   flex-direction: column;
 }
-.to-button.icon-position-top .to-button-icon {
-  margin-right: 0;
-  margin-bottom: var(--icon-margin);
+.to-button.icon-position-top .to-button-icon + .to-button-text {
+  margin-left: 0;
+  margin-top: var(--icon-margin);
 }
 .to-button.icon-position-top .to-button-text + .to-button-expand,
 .to-button.icon-position-bottom .to-button-text + .to-button-expand {
@@ -2395,8 +2560,10 @@ html body .height-full {
 }
 .to-button.icon-position-bottom .to-button-icon {
   order: 2;
-  margin-right: 0;
-  margin-top: var(--icon-margin);
+}
+.to-button.icon-position-bottom .to-button-icon + .to-button-text {
+  margin-left: 0;
+  margin-bottom: var(--icon-margin);
 }
 .to-button.width-full {
   --width: 100%;
@@ -3151,6 +3318,7 @@ html body .height-full {
   --padding: 0;
   --shadow: none;
   --width: 100%;
+  --min-width: 10em;
   --size: 1em;
   --weight: normal;
   --radius: var(--radius-fe);
@@ -3222,6 +3390,8 @@ html body .height-full {
 }
 .to-select {
   border-radius: var(--radius);
+  width: var(--width);
+  min-width: var(--min-width);
 }
 .to-select-el {
   box-sizing: border-box;
@@ -3499,7 +3669,7 @@ html body .height-full {
 .to-select.is-filterable .to-select-tag:has(.to-tag) {
   padding-bottom: 0;
 }
-.media-pc .to-select:not(.is-placeholder):hover .to-select-arrow {
+.media-pc .to-select:not(.is-placeholder):hover .to-select-clear + .to-select-arrow {
   display: none;
 }
 .to-select.to-select-mode-line {
@@ -3709,7 +3879,7 @@ html body .height-full {
   --hover-bg: rgba(0, 0, 0, 0.1);
   --hover-color: var(--color);
   --active-border: var(--border);
-  --active-bg: rgba(0, 0, 0, 0.1);
+  --active-bg: rgba(0, 0, 0, 0.3);
   --active-color: var(--color);
   --fn-gap: 0.5em;
   --tip-color: var(--color-fg);
@@ -3794,7 +3964,10 @@ html body .height-full {
   text-overflow: ellipsis;
   white-space: nowrap;
   font-weight: var(--weight);
-  color: var(--color);
+  background: var(--color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 .to-header-center {
   position: absolute;
@@ -3827,18 +4000,28 @@ html body .height-full {
   background: var(--hover-bg);
   border: var(--hover-border);
 }
-.to-header.is-link:not(:has(.to-button:hover)):hover .to-header-back,
-.to-header.is-link:not(:has(.to-button:hover)):hover .to-header-title-text {
+.to-header.is-link:not(:has(.to-button:hover)):hover .to-header-back {
   color: var(--hover-color);
 }
+.to-header.is-link:not(:has(.to-button:hover)):hover .to-header-title-text {
+  background: var(--hover-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
 .to-header.is-link:not(:has(.to-button:active)):active {
   background: var(--active-bg);
   border: var(--active-border);
 }
-.to-header.is-link:not(:has(.to-button:active)):active .to-header-back,
-.to-header.is-link:not(:has(.to-button:active)):active .to-header-title-text {
+.to-header.is-link:not(:has(.to-button:active)):active .to-header-back {
   color: var(--active-color);
 }
+.to-header.is-link:not(:has(.to-button:active)):active .to-header-title-text {
+  background: var(--active-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
 .to-hide:not(.to-hide-keep) {
   display: none !important;
 }
@@ -4332,7 +4515,7 @@ html body .height-full {
   --content-lh: 1.5em;
   --content-weight: normal;
   --content-color: var(--color-fg-fade);
-  --detail-margin: 0.5em;
+  --detail-margin: 1em;
   --detail-bg: #f7f7f7;
   --detail-bg-size: 100% 100%;
   --detail-padding: 1em;
@@ -4340,6 +4523,7 @@ html body .height-full {
   --detail-lh: 1.8em;
   --detail-size: 1em;
   --detail-color: var(--color-fg);
+  --detail-content-margin: 0.5em;
   --fn-gap: 1em;
   --fn-margin: 1em;
   --fn-align: center;
@@ -4417,7 +4601,10 @@ html body .height-full {
 }
 .to-msg-title {
   order: 1;
-  color: var(--title-color);
+  background: var(--title-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
   font-size: var(--title-size);
   font-weight: var(--title-weight);
   line-height: calc(var(--title-lh) / var(--title-size));
@@ -4445,6 +4632,7 @@ html body .height-full {
   padding: var(--detail-padding);
   text-align: left;
   overflow: auto;
+  margin-top: var(--detail-margin);
 }
 .to-msg-detail-button {
   --height: 1.5em;
@@ -4455,7 +4643,7 @@ html body .height-full {
 }
 .to-msg-detail-content {
   line-height: calc(var(--detail-lh) / var(--detail-size) * 1em);
-  margin-top: calc(var(--detail-margin) / var(--detail-size) * 1em);
+  margin-top: calc(var(--detail-content-margin) / var(--detail-size) * 1em);
   font-size: var(--detail-size);
   color: var(--detail-color);
 }
@@ -4590,6 +4778,24 @@ html body .height-full {
   align-items: center;
   gap: var(--gap);
 }
+.to-page.align-center {
+  justify-content: center;
+}
+.to-page.align-center .to-page-slot {
+  display: none;
+}
+.to-page.align-left {
+  justify-content: flex-start;
+}
+.to-page.align-left .to-page-slot {
+  display: none;
+}
+.to-page.align-right {
+  justify-content: flex-end;
+}
+.to-page.align-right .to-page-slot {
+  display: none;
+}
 .to-page-total {
   font-size: var(--total-size);
   font-weight: var(--total-weight);
@@ -4604,7 +4810,6 @@ html body .height-full {
   align-items: center;
 }
 .to-page-pager-list {
-  flex: 1;
   display: flex;
   gap: var(--pager-list-gap);
 }
@@ -4716,6 +4921,7 @@ html body .height-full {
 }
 .to-page-size-select {
   --height: var(--size-height);
+  --min-width: 0;
 }
 .to-page-jumper {
   order: var(--jumper-order);
@@ -5238,7 +5444,6 @@ html body .height-full {
   color: var(--box-color);
   border-radius: var(--box-radius);
   border: var(--box-border);
-  margin-right: var(--box-margin);
 }
 .to-checkbox-box:after {
   content: "\e6cd";
@@ -5249,8 +5454,13 @@ html body .height-full {
   flex: 1;
   color: var(--label-color);
   font-weight: var(--label-weight);
+  margin-left: var(--box-margin);
 }
 .to-checkbox-label-text {
+  background: var(--label-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
   font-size: var(--label-size);
 }
 .to-checkbox.is-checked {
@@ -6062,6 +6272,12 @@ html body .height-full {
   font-size: var(--item-on-size);
   font-weight: var(--item-on-weight);
 }
+.to-tab-item.is-on .to-tab-item-label {
+  background: var(--item-on-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
 .to-tab-item:has(+.is-on) .to-tab-item-main:after {
   width: var(--item-on-divider-width);
   border-right: var(--item-on-divider);
@@ -6763,8 +6979,6 @@ html body .height-full {
   --hover-border: 1px solid var(--hover-color);
   --active-color: var(--color-primary);
   --active-border: 0 none;
-  --start: var(--color-primary);
-  --end: var(--color-success);
 }
 .to-text {
   display: inline-flex;
@@ -6786,6 +7000,24 @@ html body .height-full {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+.to-text.is-gd-color {
+  background: var(--color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.to-text.is-gd-hover:hover {
+  background: var(--hover-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.to-text.is-gd-active:active {
+  background: var(--active-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
 .to-text.decos-s {
   text-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.3);
 }
@@ -6892,6 +7124,10 @@ html body .height-full {
 }
 .to-tip-content {
   flex: 1;
+  background: var(--color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
   font-size: var(--size);
 }
 .to-tip-remove {
@@ -7078,6 +7314,10 @@ html body .height-full {
   position: relative;
 }
 .to-tooltip-content-text {
+  background: var(--color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
   font-size: var(--size);
 }
 .to-tooltip-arrow {
@@ -8094,7 +8334,10 @@ html body .height-full {
   color: var(--label-color);
 }
 .to-param-label-text {
-  color: var(--label-color);
+  background: var(--label-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
   line-height: var(--label-lh);
   font-size: var(--label-size);
 }
@@ -8113,7 +8356,10 @@ html body .height-full {
   white-space: nowrap;
   text-overflow: ellipsis;
   font-family: var(--value-family);
-  color: var(--value-color);
+  background: var(--value-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
   line-height: var(--value-lh);
   font-size: var(--value-size);
 }
@@ -8492,6 +8738,10 @@ html body .height-full {
   border-radius: var(--date-radius);
 }
 .to-timeline-date-text {
+  background: var(--date-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
   font-size: var(--date-size);
 }
 .to-timeline-time {
@@ -8507,6 +8757,10 @@ html body .height-full {
   border-radius: calc(var(--time-radius));
 }
 .to-timeline-time-text {
+  background: var(--time-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
   font-size: var(--time-size);
 }
 .to-timeline-content {