amis-ui 6.12.0-beta.0 → 6.12.0-beta.10

package/lib/themes/cxd.css

@@ -17290,11 +17290,11 @@ samp {
 }
 .amis-hoverZoomIn-show,
 .amis-hoverZoomIn:hover {
-  transform: scale(1.1);
+  transform: scale(1.05);
 }
 .amis-hoverZoomOut-show,
 .amis-hoverZoomOut:hover {
-  transform: scale(0.9);
+  transform: scale(0.95);
 }
 .amis-hoverShadow-show,
 .amis-hoverShadow:hover {
@@ -17306,16 +17306,43 @@ samp {
 }
 .amis-hoverUp-show,
 .amis-hoverUp:hover {
-  transform: translateY(-5px);
+  transform: translateY(-4px);
 }
 .amis-hoverDown-show,
 .amis-hoverDown:hover {
-  transform: translateY(5px);
+  transform: translateY(4px);
+}
+.amis-hoverLeft-show,
+.amis-hoverLeft:hover {
+  transform: translateX(-4px);
+}
+.amis-hoverRight-show,
+.amis-hoverRight:hover {
+  transform: translateX(4px);
 }
 .amis-hoverFlip-show,
 .amis-hoverFlip:hover {
   transform: rotateY(180deg);
 }
+@keyframes hoverFlash {
+  from, to {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+@keyframes hoverShake {
+  from, to {
+    transform: translate3d(0, 0, 0);
+  }
+  30% {
+    transform: translate3d(-5px, 0, 0);
+  }
+  60% {
+    transform: translate3d(5px, 0, 0);
+  }
+}
 html,
 body {
   width: 100%;
@@ -22832,6 +22859,9 @@ input[type=button].cxd-Button--block {
   width: 100%;
   height: 100%;
   background: var(--Page-main-bg);
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
 }
 .cxd-Page-header {
   padding: var(--Page-header-paddingY) var(--Page-header-paddingX);
@@ -22844,7 +22874,7 @@ input[type=button].cxd-Button--block {
 .cxd-Page-content {
   padding: var(--Page-content-paddingY) var(--Page-content-paddingX);
   position: relative;
-  height: 100%;
+  height: auto;
   width: 100%;
 }
 .cxd-Page-main > .cxd-Page-header {
@@ -22915,6 +22945,25 @@ input[type=button].cxd-Button--block {
 .cxd-Page-toolbar > * + * {
   margin-left: var(--gap-xs);
 }
+@media (max-width: 767px) {
+  .cxd-Page {
+    flex-direction: column;
+  }
+  .cxd-Page-aside {
+    flex-shrink: 0;
+  }
+  .cxd-Page-content {
+    flex-grow: 1;
+    min-height: 0;
+    display: flex;
+    align-items: stretch;
+    flex-direction: row;
+  }
+  .cxd-Page-main {
+    height: auto;
+    width: 100%;
+  }
+}
 @media (min-width: 768px) {
   .cxd-Page-aside {
     flex-shrink: 0;
@@ -26769,8 +26818,11 @@ input[type=button].cxd-Button--block {
 .cxd-Table--autoFillHeight > .cxd-Table-contentWrap > .cxd-Table-content > table {
   border-top: none;
 }
-.cxd-Table--autoFillHeight > .cxd-Table-contentWrap > .cxd-Table-content > table.cxd-Table-table--tableFillHeight {
-  min-height: 100%;
+.cxd-Table--autoFillHeight > .cxd-Table-contentWrap > .cxd-Table-content > table.cxd-Table-table--tableFillHeight > tbody {
+  height: calc(var(--Table-content-height) - var(--Table-thead-height) - 20px);
+}
+.cxd-Table--autoFillHeight > .cxd-Table-contentWrap > .cxd-Table-content > table.cxd-Table-table--tableFillHeight > tbody > tr > td {
+  border-bottom: none;
 }
 .cxd-Table--autoFillHeight > .cxd-Table-contentWrap > .cxd-Table-content table thead {
   position: sticky;
@@ -27922,6 +27974,27 @@ input[type=button].cxd-Button--block {
 .cxd-Table2 .cxd-Table-container .cxd-Table-header {
   padding: 0;
 }
+.cxd-Table2 .cxd-Table-container-self-sticky {
+  position: relative !important;
+}
+.cxd-Table2 .cxd-Table-container-self-sticky .cxd-Table-content {
+  overflow-x: unset !important;
+}
+.cxd-Table2 .cxd-Table-container-self-sticky .cxd-Table-table {
+  border-collapse: separate;
+}
+.cxd-Table2 .cxd-Table-container-self-sticky .cxd-Table-table > tbody > tr > td {
+  border-top: none;
+}
+.cxd-Table2 .cxd-Table-container-self-sticky .cxd-Table-row {
+  z-index: 1;
+}
+.cxd-Table2 .cxd-Table-container-self-sticky .cxd-Table-cell-self-sticky {
+  z-index: 2 !important;
+}
+.cxd-Table2 .cxd-Table-container-self-sticky .cxd-Table-cell-fix-left {
+  z-index: 3 !important;
+}
 .cxd-Table2.cxd-Table-ping-left .cxd-Table-table > thead > tr > th.cxd-Table-cell-fix-left-last:after,
 .cxd-Table2.cxd-Table-ping-left .cxd-Table-table > tbody > tr > td.cxd-Table-cell-fix-left-last:after,
 .cxd-Table2.cxd-Table-ping-left .cxd-Table-table > tfoot > tr > td.cxd-Table-cell-fix-left-last:after {
@@ -28416,6 +28489,7 @@ input[type=button].cxd-Button--block {
   border: var(--List-borderWidth) solid var(--List-borderColor);
   background: var(--List-bg);
   margin-bottom: var(--gap-sm);
+  margin-right: 0.9375rem;
 }
 .cxd-List-toolbar {
   display: flex;
@@ -28485,6 +28559,14 @@ input[type=button].cxd-Button--block {
   background: var(--Table-bg);
   z-index: 900;
 }
+.cxd-List-content-wrapper {
+  display: flex;
+  position: relative;
+}
+.cxd-List-main {
+  flex: 1;
+  min-width: 0;
+}
 .cxd-ListGroup {
   max-width: 25rem;
   display: flex;
@@ -28617,6 +28699,49 @@ input[type=button].cxd-Button--block {
   color: var(--ListMenu-item--onHover-color);
   background: var(--ListMenu-item--onHover-bg);
 }
+.cxd-AlphabetIndexer {
+  position: sticky;
+  top: calc(var(--affix-offset-top) + var(--gap-base));
+  right: 0.3125rem;
+  height: -moz-fit-content;
+  height: fit-content;
+  padding: 0.625rem 0.3125rem;
+  background: var(--white);
+  border-radius: var(--borderRadius);
+  box-shadow: var(--boxShadow);
+  z-index: 1050;
+  display: flex;
+  flex-direction: column;
+  align-self: flex-start;
+  overflow-y: auto;
+}
+@media (max-width: 768px) {
+  .cxd-AlphabetIndexer {
+    position: sticky;
+    top: calc(var(--affix-offset-top) + var(--gap-base));
+    right: 0.3125rem;
+    align-self: flex-start;
+  }
+}
+.cxd-AlphabetIndexer-letter {
+  font-size: var(--fontSizeSm);
+  padding: 0.125rem 0.25rem;
+  cursor: pointer;
+  text-align: center;
+}
+@media (max-width: 768px) {
+  .cxd-AlphabetIndexer-letter {
+    padding: 0.0625rem 0.125rem;
+  }
+}
+.cxd-AlphabetIndexer-letter:hover {
+  color: var(--primary);
+}
+.cxd-AlphabetIndexer-letter.is-active {
+  color: var(--white);
+  background: var(--primary);
+  border-radius: var(--borderRadius-sm);
+}
 .cxd-Cards {
   scroll-margin-top: var(--affix-offset-top);
 }
@@ -28712,6 +28837,32 @@ input[type=button].cxd-Button--block {
   background: var(--Table-bg);
   z-index: 900;
 }
+@media (min-width: 0) {
+  .cxd-Cards--masonryXs1 {
+    -moz-column-count: 12;
+         column-count: 12;
+  }
+  .cxd-Cards--masonryXs2 {
+    -moz-column-count: 6;
+         column-count: 6;
+  }
+  .cxd-Cards--masonryXs3 {
+    -moz-column-count: 4;
+         column-count: 4;
+  }
+  .cxd-Cards--masonryXs4 {
+    -moz-column-count: 3;
+         column-count: 3;
+  }
+  .cxd-Cards--masonryXs6 {
+    -moz-column-count: 2;
+         column-count: 2;
+  }
+  .cxd-Cards--masonryXs12 {
+    -moz-column-count: 1;
+         column-count: 1;
+  }
+}
 @media (min-width: 576px) {
   .cxd-Cards--masonrySm1 {
     -moz-column-count: 12;
@@ -30469,6 +30620,19 @@ input[type=button].cxd-Button--block {
 .cxd-ImageGallery-toolbar-action:hover .cxd-ImageGallery-toolbar-action-icon svg {
   fill: var(--primary);
 }
+.sm-ss-sss-m .cxd-Image,
+.sss-ss-ms-m .cxd-Image,
+.sms-ss-sms-m .cxd-Image,
+.sm-ss-sss-ss .cxd-Image,
+.ms-ss-sss-ss .cxd-Image,
+.sss-ss-sm-ss .cxd-Image,
+.mss-ss-ssm-ss .cxd-Image,
+.sss-ss-mm-ss .cxd-Image,
+[class^=even-] .cxd-Image {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
 .cxd-Images {
   display: flex;
   flex-wrap: wrap;
@@ -30632,6 +30796,313 @@ input[type=button].cxd-Button--block {
 .cxd-Image-origin:hover .cxd-Image-overlay, .cxd-Image-thumbWrap:hover .cxd-Image-overlay {
   display: flex;
 }
+.cxd-Image .cxd-Img-container {
+  position: relative;
+}
+.cxd-Image .cxd-Img-container img {
+  transition: all ease-in-out 0.3s;
+}
+.cxd-Image .cxd-Img-container .mask {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  font-weight: bold;
+  font-size: 0.9375rem;
+  background-color: rgb(44, 63, 82);
+  color: #fff;
+  transition: all ease-in-out 0.3s;
+}
+.cxd-Image .hover-slide:hover .mask {
+  opacity: 1;
+  transform: translate(5%, 5%);
+  z-index: 1;
+}
+.cxd-Image .pull-top .mask {
+  opacity: 1;
+}
+.cxd-Image .pull-top img {
+  position: absolute;
+}
+.cxd-Image .pull-top:hover img {
+  transform: translateY(-70%);
+}
+.cxd-Image .scale-center .mask {
+  scale: 0.5;
+}
+.cxd-Image .scale-center .mask span {
+  position: absolute;
+  top: 5%;
+  left: 5%;
+}
+.cxd-Image .scale-center:hover .mask {
+  transform: scale(2);
+  opacity: 1;
+}
+.cxd-Image .scale-center:hover img {
+  transform: scale(0.5);
+}
+.cxd-Image .scale-top img {
+  position: absolute;
+}
+.cxd-Image .scale-top .mask {
+  opacity: 1;
+}
+.cxd-Image .scale-top .mask span {
+  position: absolute;
+  bottom: 5%;
+  left: 5%;
+}
+.cxd-Image .scale-top:hover img {
+  transform: translateY(-50%) scale(0.5);
+}
+.cxd-Image .text-style-1 {
+  overflow: hidden;
+}
+.cxd-Image .text-style-1 .mask {
+  z-index: 1;
+  opacity: 1;
+  background: rgba(48, 133, 163, 0.4);
+}
+.cxd-Image .text-style-1 .mask span {
+  position: absolute;
+  left: 5%;
+  bottom: 5%;
+  transition: all ease-in-out 0.3s;
+}
+.cxd-Image .text-style-1 img {
+  scale: 1.2;
+  transform: translateX(-5%);
+}
+.cxd-Image .text-style-1:hover .mask {
+  background: rgba(48, 133, 163, 0);
+}
+.cxd-Image .text-style-1:hover .mask span {
+  transform: translateY(-200%);
+}
+.cxd-Image .text-style-1:hover img {
+  transform: translateX(5%);
+}
+.cxd-Image .text-style-2 .mask {
+  opacity: 1;
+  background: transparent;
+}
+.cxd-Image .text-style-2 .mask span {
+  z-index: 1;
+  transition: all ease-in-out 0.3s;
+}
+.cxd-Image .text-style-2 .mask::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 0%;
+  background: linear-gradient(to bottom, rgba(72, 76, 97, 0) 0, rgba(72, 76, 97, 0.8) 75%);
+  transition: all ease-in-out 0.3s;
+}
+.cxd-Image .text-style-2:hover .mask::before {
+  height: 100%;
+}
+.cxd-Image .text-style-2:hover .mask span {
+  transform: translateY(-200%);
+}
+.cxd-Image .text-style-3 {
+  overflow: hidden;
+}
+.cxd-Image .text-style-3 .mask {
+  z-index: 1;
+  opacity: 1;
+  background: transparent;
+}
+.cxd-Image .text-style-3 .mask span {
+  position: absolute;
+  top: 10%;
+  transition: all 0.3s ease-in-out;
+}
+.cxd-Image .text-style-3 img {
+  scale: 1.2;
+  transition: all 0.3s ease-in-out;
+}
+.cxd-Image .text-style-3 .mask::before,
+.cxd-Image .text-style-3 .mask::after {
+  content: "";
+  position: absolute;
+  top: 10%;
+  bottom: 10%;
+  left: 15%;
+  right: 15%;
+  transition: all 0.3s ease-in-out;
+  color: rgba(255, 255, 255, 0.7);
+  opacity: 0;
+}
+.cxd-Image .text-style-3 .mask::before {
+  border-top: 1px solid #ffffff;
+  border-bottom: 1px solid #ffffff;
+  transform: scaleX(0); /* 初始状态：水平方向缩放为0 */
+  transform-origin: left; /* 设置变换的原点为左侧 */
+}
+.cxd-Image .text-style-3 .mask::after {
+  border-left: 1px solid #ffffff;
+  border-right: 1px solid #ffffff;
+  transform: scaleY(0); /* 初始状态：垂直方向缩放为0 */
+  transform-origin: top; /* 设置变换的原点为顶部 */
+}
+.cxd-Image .text-style-3:hover .mask::before {
+  opacity: 1;
+  transform: scaleX(1.2) translateX(-10%); /* 鼠标悬停时：水平方向缩放为1 */
+}
+.cxd-Image .text-style-3:hover .mask::after {
+  opacity: 1;
+  transform: scaleY(1.2) translateY(-10%); /* 鼠标悬停时：垂直方向缩放为1 */
+}
+.cxd-Image .text-style-3:hover .mask {
+  background: rgba(48, 133, 163, 0.4);
+}
+.cxd-Image .text-style-3:hover .mask span {
+  top: 20%;
+}
+.cxd-Image .text-style-3:hover img {
+  transform: translateY(10%);
+}
+.cxd-Image .text-style-4 .mask {
+  background: #fff;
+  opacity: 1;
+  left: 0;
+  bottom: 0;
+  top: auto;
+  height: 0 !important;
+  transform-origin: bottom;
+  color: #0b0a22;
+  z-index: 1;
+}
+.cxd-Image .text-style-4 .mask span {
+  display: none;
+}
+.cxd-Image .text-style-4:hover .mask {
+  height: 40% !important;
+}
+.cxd-Image .text-style-4:hover .mask span {
+  display: block;
+}
+.cxd-Image .text-style-5 .mask {
+  opacity: 1;
+  background: rgba(48, 133, 163, 0);
+  z-index: 1;
+}
+.cxd-Image .text-style-5 .mask span {
+  position: relative;
+  bottom: -10%;
+  transition: all 0.3s ease-in-out;
+}
+.cxd-Image .text-style-5 .mask::before {
+  content: "";
+  border: 1px solid #ffffff;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 0;
+  height: 0;
+  transition: all 0.3s ease-in-out;
+  opacity: 0;
+}
+.cxd-Image .text-style-5:hover .mask::before {
+  width: 90%;
+  height: 90%;
+  opacity: 1;
+}
+.cxd-Image .text-style-5:hover .mask {
+  background: rgba(48, 133, 163, 0.4);
+}
+.cxd-Image .text-style-5:hover .mask span {
+  bottom: 10%;
+}
+.cxd-Image .text-style-6 .mask {
+  opacity: 1;
+  z-index: 1;
+  background: rgba(48, 133, 163, 0.4);
+}
+.cxd-Image .text-style-6 .mask span {
+  position: absolute;
+  transition: all 0.3s ease-in-out;
+  bottom: 40%;
+}
+.cxd-Image .text-style-6 .mask::before,
+.cxd-Image .text-style-6 .mask::after {
+  content: "";
+  position: absolute;
+  top: 5%;
+  bottom: 5%;
+  left: 7%;
+  right: 7%;
+  transition: all 0.3s ease-in-out;
+  color: rgba(255, 255, 255, 0.7);
+  opacity: 0;
+}
+.cxd-Image .text-style-6 .mask::before {
+  border-top: 1px solid #ffffff;
+  border-bottom: 1px solid #ffffff;
+  transform: scaleX(0); /* 初始状态：水平方向缩放为0 */
+}
+.cxd-Image .text-style-6 .mask::after {
+  border-left: 1px solid #ffffff;
+  border-right: 1px solid #ffffff;
+  transform: scaleY(0); /* 初始状态：垂直方向缩放为0 */
+}
+.cxd-Image .text-style-6:hover .mask::before {
+  opacity: 1;
+  transform: scaleX(1); /* 鼠标悬停时：水平方向缩放为1 */
+}
+.cxd-Image .text-style-6:hover .mask::after {
+  opacity: 1;
+  transform: scaleY(1); /* 鼠标悬停时：垂直方向缩放为1 */
+}
+.cxd-Image .text-style-6:hover .mask {
+  background: rgba(48, 133, 163, 0);
+}
+.cxd-Image .text-style-6:hover .mask span {
+  bottom: 5%;
+}
+.cxd-Image .text-style-7 .mask {
+  opacity: 1;
+  z-index: 1;
+  background: rgba(48, 133, 163, 0);
+}
+.cxd-Image .text-style-7 .mask span {
+  position: absolute;
+  top: 10%;
+  transition: all 0.3s ease-in-out;
+}
+.cxd-Image .text-style-7 .mask::before,
+.cxd-Image .text-style-7 .mask::after {
+  content: "";
+  width: 80%;
+  height: 1px;
+  background: #ffffff;
+  position: absolute;
+  transition: all 0.3s ease-in-out;
+}
+.cxd-Image .text-style-7:hover .mask {
+  background: rgba(48, 133, 163, 0.4);
+}
+.cxd-Image .text-style-7:hover .mask span {
+  top: 20%;
+}
+.cxd-Image .text-style-7:hover .mask::before {
+  transform: rotateZ(45deg);
+}
+.cxd-Image .text-style-7:hover .mask::after {
+  transform: rotateZ(-45deg);
+}
 .cxd-ImageField--thumb {
   display: inline-block;
   position: relative;
@@ -30653,6 +31124,70 @@ input[type=button].cxd-Button--block {
 .cxd-ImagesField::after {
   clear: both;
 }
+.cxd-ImagesField--full {
+  position: relative;
+}
+.cxd-ImagesField--full .cxd-Images {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+}
+.cxd-ImagesField--full .cxd-Images-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 300px;
+}
+.cxd-ImagesField--full .cxd-Images-item {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  will-change: transform, opacity;
+  backface-visibility: hidden;
+}
+.cxd-ImagesField--full .cxd-Images-itemInner {
+  position: relative;
+  max-width: 100%;
+  max-height: 100vh;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cxd-ImagesField--full .cxd-Images .cxd-Image-image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+.cxd-ImagesField--full .cxd-Images .cxd-Image-image--contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+  width: 100%;
+  height: 100%;
+}
+.cxd-ImagesField--full .cxd-Images .cxd-Image-image--cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+.cxd-ImagesField--full .cxd-Images-itemIndex {
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  z-index: 10;
+  pointer-events: none;
+}
 .Image-view-icon {
   content: var(--image-image-normal-icon);
 }
@@ -32222,15 +32757,36 @@ input[type=button].cxd-Button--block {
 .cxd-Steps .cxd-StepsItem.is-clickable .cxd-StepsItem-containerProgressDot, .cxd-Steps .cxd-StepsItem.is-clickable .cxd-StepsItem-containerIcon, .cxd-Steps .cxd-StepsItem.is-clickable .cxd-StepsItem-containerWrapper {
   cursor: pointer;
 }
+.cxd-Steps-mobile.cxd-Steps--horizontal .cxd-StepsItem {
+  overflow: visible;
+}
+.cxd-Steps-mobile.cxd-Steps--horizontal .cxd-StepsItem-containerTail:after {
+  display: none;
+}
+.cxd-Steps-mobile.cxd-Steps--horizontal .cxd-StepsItem-containerWrapper {
+  transform: translateX(-0.3125rem);
+}
+.cxd-Steps-mobile.cxd-Steps--horizontal .cxd-StepsItem-containerWrapper .cxd-StepsItem-body .cxd-StepsItem-title {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
 .cxd-Steps-mobile.cxd-Steps--horizontal .cxd-StepsItem-containerWrapper .cxd-StepsItem-body .cxd-StepsItem-title::after {
   display: none !important;
 }
+.cxd-Steps-mobile.cxd-Steps--horizontal .cxd-StepsItem-containerWrapper .cxd-StepsItem-body .cxd-StepsItem-title span {
+  left: 0;
+}
+.cxd-Steps-mobile.cxd-Steps--horizontal .cxd-StepsItem-containerWrapper .cxd-StepsItem-body .cxd-StepsItem-description {
+  min-width: 8.75rem;
+}
 .cxd-Steps-mobile.cxd-Steps--horizontal .cxd-StepsItem-containerWrapper .cxd-StepsItem-body .cxd-StepsItem-title .cxd-StepsItem-subTitle {
   padding-left: 0.3125rem;
 }
 .cxd-Steps-mobile.cxd-Steps--horizontal .cxd-StepsItem-containerIcon {
   position: relative;
   display: block;
+  margin-left: 2.5rem;
 }
 .cxd-Steps-mobile.cxd-Steps--horizontal .cxd-StepsItem-containerIcon:after {
   content: "";
@@ -32238,8 +32794,8 @@ input[type=button].cxd-Button--block {
   right: 0;
   top: 0.9375rem;
   height: 1px;
-  left: 2.5rem;
-  width: 99999px;
+  left: 2.1875rem;
+  width: 5rem;
   background-color: var(--Steps-line-bg);
 }
 .cxd-Steps-mobile.cxd-Steps--horizontal .cxd-StepsItem-containerIcon.is-success:after {
@@ -32408,6 +32964,70 @@ input[type=button].cxd-Button--block {
   position: absolute;
   overflow: visible;
 }
+.cxd-Slider {
+  display: flex;
+}
+.cxd-Slider-BodyContainer {
+  width: 60%;
+}
+.cxd-Slider-LeftContainer, .cxd-Slider-RightContainer {
+  flex: 1;
+}
+@media (max-width: 767px) {
+  .cxd-Slider {
+    display: flex;
+    overflow: hidden;
+  }
+  .cxd-Slider-BodyContainer {
+    flex: 1;
+  }
+  .cxd-Slider-LeftContainer, .cxd-Slider-RightContainer {
+    flex: initial;
+    width: 0;
+    transition: width 0.3s;
+    overflow: hidden;
+  }
+}
+.cxd-HorizontalScroll-wrapper .cxd-HorizontalScroll-Container {
+  display: flex;
+  max-width: 100%;
+}
+.cxd-HorizontalScroll-wrapper .cxd-HorizontalScroll-Container-main {
+  flex: 1 1 auto;
+  scrollbar-width: none;
+  max-width: calc(100% - 64px);
+  position: relative;
+}
+.cxd-HorizontalScroll-wrapper .cxd-HorizontalScroll-arrow {
+  flex: 0 0 16px;
+  height: 100%;
+  cursor: pointer;
+  box-sizing: content-box;
+}
+.cxd-HorizontalScroll-wrapper .cxd-HorizontalScroll-arrow .icon {
+  top: 0;
+  width: var(--Remark-icon-fontSize);
+  height: var(--Remark-icon-fontSize);
+}
+.cxd-HorizontalScroll-wrapper .cxd-HorizontalScroll-arrow:hover {
+  color: var(--icon-onHover-color);
+}
+.cxd-HorizontalScroll-wrapper .cxd-HorizontalScroll-arrow--left {
+  margin-right: 16px;
+}
+.cxd-HorizontalScroll-wrapper .cxd-HorizontalScroll-arrow--left .icon {
+  transform: rotate(180deg);
+}
+.cxd-HorizontalScroll-wrapper .cxd-HorizontalScroll-arrow--right {
+  margin-left: 16px;
+}
+.cxd-HorizontalScroll-wrapper .cxd-HorizontalScroll-arrow--disabled .iconfont {
+  cursor: not-allowed;
+  color: var(--Number-handler-onDisabled-color);
+}
+.cxd-HorizontalScroll-wrapper .cxd-HorizontalScroll-arrow--disabled:hover {
+  color: var(--Number-handler-onDisabled-color);
+}
 fieldset.cxd-Collapse--lg, fieldset.cxd-Collapse--md, fieldset.cxd-Collapse--base, fieldset.cxd-Collapse--sm, fieldset.cxd-Collapse--xs {
   position: relative;
 }
@@ -45109,6 +45729,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   cursor: pointer;
   font-size: 14px;
   color: #aaa;
+  top: 0;
 }
 .cxd-Signature-Embed-Preview .preview-close:hover {
   color: #000;