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

package/theme/index.css

@@ -785,10 +785,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%);
@@ -798,15 +798,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%);
@@ -816,13 +816,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%;
 }
@@ -1891,6 +1906,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;
@@ -1913,6 +1935,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;
@@ -1927,6 +1978,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;
@@ -1957,6 +2012,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;
@@ -2073,11 +2144,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%;
@@ -2101,7 +2192,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);
@@ -2140,6 +2230,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);
@@ -2213,6 +2314,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;
@@ -2292,7 +2409,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);
@@ -2302,7 +2418,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);
@@ -2312,9 +2427,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 {
@@ -2326,8 +2449,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);
@@ -2358,38 +2481,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 {
@@ -2398,8 +2563,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%;
@@ -3154,6 +3321,7 @@ html body .height-full {
   --padding: 0;
   --shadow: none;
   --width: 100%;
+  --min-width: 10em;
   --size: 1em;
   --weight: normal;
   --radius: var(--radius-fe);
@@ -3225,6 +3393,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;
@@ -3502,7 +3672,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 {
@@ -3712,7 +3882,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);
@@ -3797,7 +3967,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;
@@ -3830,18 +4003,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;
 }
@@ -4335,7 +4518,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;
@@ -4343,6 +4526,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;
@@ -4420,7 +4604,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));
@@ -4448,6 +4635,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;
@@ -4458,7 +4646,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);
 }
@@ -4593,6 +4781,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);
@@ -4607,7 +4813,6 @@ html body .height-full {
   align-items: center;
 }
 .to-page-pager-list {
-  flex: 1;
   display: flex;
   gap: var(--pager-list-gap);
 }
@@ -4719,6 +4924,7 @@ html body .height-full {
 }
 .to-page-size-select {
   --height: var(--size-height);
+  --min-width: 0;
 }
 .to-page-jumper {
   order: var(--jumper-order);
@@ -5241,7 +5447,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";
@@ -5252,8 +5457,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 {
@@ -6065,6 +6275,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);
@@ -6766,8 +6982,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;
@@ -6789,6 +7003,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);
 }
@@ -6895,6 +7127,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 {
@@ -7081,6 +7317,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 {
@@ -8097,7 +8337,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);
 }
@@ -8116,7 +8359,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);
 }
@@ -8495,6 +8741,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 {
@@ -8510,6 +8760,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 {