u-message-input.wxss 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. /**
  2. * uni-app内置的常用样式变量
  3. */
  4. /* 行为相关颜色 */
  5. /* 文字基本颜色 */
  6. /* 背景颜色 */
  7. /* 边框颜色 */
  8. /* 尺寸变量 */
  9. /* 文字尺寸 */
  10. /* 图片尺寸 */
  11. /* Border Radius */
  12. /* 水平间距 */
  13. /* 垂直间距 */
  14. /* 透明度 */
  15. /* 文章场景相关 */
  16. @keyframes breathe-30b8b720 {
  17. 0% {
  18. opacity: 0.3;
  19. }
  20. 50% {
  21. opacity: 1;
  22. }
  23. 100% {
  24. opacity: 0.3;
  25. }
  26. }
  27. .u-char-box.data-v-30b8b720 {
  28. text-align: center;
  29. }
  30. .u-char-flex.data-v-30b8b720 {
  31. display: flex;
  32. flex-direction: row;
  33. justify-content: center;
  34. flex-wrap: wrap;
  35. position: relative;
  36. }
  37. .u-input.data-v-30b8b720 {
  38. position: absolute;
  39. top: 0;
  40. left: -100%;
  41. width: 200%;
  42. height: 100%;
  43. text-align: left;
  44. z-index: 9;
  45. opacity: 0;
  46. background: none;
  47. }
  48. .u-char-item.data-v-30b8b720 {
  49. position: relative;
  50. width: 90rpx;
  51. height: 90rpx;
  52. margin: 10rpx 10rpx;
  53. font-size: 60rpx;
  54. font-weight: bold;
  55. color: #303133;
  56. line-height: 90rpx;
  57. display: flex;
  58. flex-direction: row;
  59. justify-content: center;
  60. align-items: center;
  61. }
  62. .u-middle-line.data-v-30b8b720 {
  63. border: none;
  64. }
  65. .u-box.data-v-30b8b720 {
  66. box-sizing: border-box;
  67. border: 2rpx solid #cccccc;
  68. border-radius: 6rpx;
  69. }
  70. .u-box-active.data-v-30b8b720 {
  71. overflow: hidden;
  72. animation-timing-function: ease-in-out;
  73. animation-duration: 1500ms;
  74. animation-iteration-count: infinite;
  75. animation-direction: alternate;
  76. border: 2rpx solid #3c9cff;
  77. }
  78. .u-middle-line-active.data-v-30b8b720 {
  79. background: #3c9cff;
  80. }
  81. .u-breathe.data-v-30b8b720 {
  82. animation: breathe-30b8b720 2s infinite ease;
  83. }
  84. .u-placeholder-line.data-v-30b8b720 {
  85. display: none;
  86. position: absolute;
  87. left: 50%;
  88. top: 50%;
  89. transform: translate(-50%, -50%);
  90. width: 2rpx;
  91. height: 40rpx;
  92. background: #333333;
  93. animation: twinkling 1.5s infinite ease;
  94. }
  95. .u-animation-breathe.data-v-30b8b720 {
  96. animation-name: breathe-30b8b720;
  97. }
  98. .u-dot.data-v-30b8b720 {
  99. font-size: 34rpx;
  100. line-height: 34rpx;
  101. }
  102. .u-middle-line.data-v-30b8b720 {
  103. height: 4px;
  104. background: #000000;
  105. width: 80%;
  106. position: absolute;
  107. border-radius: 2px;
  108. top: 50%;
  109. left: 50%;
  110. transform: translate(-50%, -50%);
  111. }
  112. .u-bottom-line-active.data-v-30b8b720 {
  113. background: #3c9cff;
  114. }
  115. .u-bottom-line.data-v-30b8b720 {
  116. height: 4px;
  117. background: #000000;
  118. width: 80%;
  119. position: absolute;
  120. border-radius: 2px;
  121. bottom: 0;
  122. left: 50%;
  123. transform: translate(-50%);
  124. }