guide.wxss 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. .t-float-left {
  2. float: left;
  3. }
  4. .t-float-right {
  5. float: right;
  6. }
  7. @keyframes tdesign-fade-out {
  8. from {
  9. opacity: 1;
  10. }
  11. to {
  12. opacity: 0;
  13. }
  14. }
  15. .hotspot-expanded.relative {
  16. position: relative;
  17. }
  18. .hotspot-expanded::after {
  19. content: '';
  20. display: block;
  21. position: absolute;
  22. left: 0;
  23. top: 0;
  24. right: 0;
  25. bottom: 0;
  26. transform: scale(1.5);
  27. }
  28. .t-guide__reference {
  29. position: absolute;
  30. box-shadow: 0 0 0 0 var(--td-guide-reference-mask-color, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))), var(--td-guide-reference-mask-color, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))) 0 0 0 5000px;
  31. border-radius: var(--td-guide-reference-border-radius, var(--td-radius-default, 12rpx));
  32. transition: all var(--td-anim-duration-base, 0.2s) var(--td-anim-time-fn-ease-out, cubic-bezier(0, 0, 0.15, 1));
  33. }
  34. .t-guide__reference--nonoverlay {
  35. box-shadow: none;
  36. border: var(--td-guide-reference-border, 4rpx solid var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
  37. }
  38. .t-guide__container {
  39. display: inline-block;
  40. }
  41. .t-guide__container--popover {
  42. background-color: var(--td-guide-popover-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
  43. border: var(--td-guide-popover-border, 2rpx solid var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
  44. border-radius: var(--td-guide-popover-border-radius, var(--td-radius-large, 18rpx));
  45. box-shadow: var(--td-guide-popover-shadow, var(--td-shadow-3, 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08)));
  46. padding: var(--td-guide-popover-padding, var(--td-spacer-2, 32rpx));
  47. min-width: var(--td-guide-popover-min-width, 480rpx);
  48. max-width: var(--td-guide-popover-max-width, 540rpx);
  49. }
  50. .t-guide__container--dialog {
  51. background-color: var(--td-guide-popover-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
  52. border-radius: var(--td-guide-dialog-border-radius, var(--td-radius-extra-large, 24rpx));
  53. padding: var(--td-guide-dialog-padding, var(--td-spacer-3, 48rpx) 0);
  54. width: var(--td-guide-dialog-width, 622rpx);
  55. }
  56. .t-guide__title--popover {
  57. text-align: var(--td-guide-popover-title-text-align, left);
  58. color: var(--td-guide-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
  59. font-size: var(--td-guide-popover-title-font-size, var(--td-font-size-m, 32rpx));
  60. font-weight: var(--td-guide-title-font-weight, 600);
  61. line-height: var(--td-guide-popover-title-line-height, 48rpx);
  62. }
  63. .t-guide__title--dialog {
  64. text-align: var(--td-guide-dialog-title-text-align, center);
  65. color: var(--td-guide-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
  66. font-size: var(--td-guide-dialog-title-font-size, 36rpx);
  67. font-weight: var(--td-guide-title-font-weight, 600);
  68. line-height: var(--td-guide-dialog-title-line-height, 52rpx);
  69. }
  70. .t-guide__body--popover {
  71. margin-top: var(--td-guide-popover-body-margin-top, 8rpx);
  72. text-align: var(--td-guide-popover-body-text-align, left);
  73. color: var(--td-guide-body-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
  74. font-size: var(--td-guide-popover-body-font-size, var(--td-font-size-base, 28rpx));
  75. font-weight: var(--td-guide-body-font-weight, 400);
  76. line-height: var(--td-guide-popover-body-line-height, 44rpx);
  77. }
  78. .t-guide__body--dialog {
  79. margin-top: var(--td-guide-dialog-body-margin-top, 16rpx);
  80. text-align: var(--td-guide-dialog-body-text-align, center);
  81. color: var(--td-guide-body-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
  82. font-size: var(--td-guide-dialog-body-font-size, var(--td-font-size-m, 32rpx));
  83. font-weight: var(--td-guide-body-font-weight, 400);
  84. line-height: var(--td-guide-dialog-body-line-height, 48rpx);
  85. }
  86. .t-guide__footer {
  87. text-align: var(--td-guide-footer-text-align, right);
  88. margin-top: var(--td-guide-footer-margin-top, var(--td-spacer-3, 48rpx));
  89. }
  90. .t-guide__footer .t-guide__button + .t-guide__button {
  91. margin-left: var(--td-guide-footer-button-space, var(--td-spacer-1, 24rpx));
  92. }
  93. .t-guide__footer--dialog {
  94. display: flex;
  95. padding: var(--td-guide-dialog-footer-button-padding, 0 var(--td-spacer-3, 48rpx));
  96. }
  97. .t-guide__footer--dialog .t-guide__button:last-child {
  98. flex-grow: 1;
  99. }