style.module.css 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. .answerIcon {
  2. position: relative;
  3. background: url(./icons/robot.svg) 100%/100%;
  4. }
  5. .typeingIcon {
  6. position: absolute;
  7. top: 0px;
  8. left: 0px;
  9. display: flex;
  10. justify-content: center;
  11. align-items: center;
  12. width: 16px;
  13. height: 16px;
  14. background: #FFFFFF;
  15. box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  16. border-radius: 16px;
  17. }
  18. .questionIcon {
  19. background: url(./icons/default-avatar.jpg);
  20. background-size: contain;
  21. border-radius: 50%;
  22. }
  23. .answer::before,
  24. .question::before {
  25. content: '';
  26. position: absolute;
  27. top: 0;
  28. width: 8px;
  29. height: 12px;
  30. }
  31. .answer::before {
  32. left: 0;
  33. background: url(./icons/answer.svg) no-repeat;
  34. }
  35. .copyBtn,
  36. .annotationBtn {
  37. display: none;
  38. }
  39. .answerWrapWrap,
  40. .questionWrapWrap {
  41. width: 0;
  42. flex-grow: 1;
  43. }
  44. .questionWrapWrap {
  45. display: flex;
  46. justify-content: flex-end;
  47. }
  48. .question {
  49. display: inline-block;
  50. max-width: 100%;
  51. }
  52. .answer {
  53. display: inline-block;
  54. max-width: 100%;
  55. }
  56. .answerWrap:hover .copyBtn,
  57. .answerWrap:hover .annotationBtn {
  58. display: block;
  59. }
  60. .answerWrap:hover .hasAnnotationBtn {
  61. display: none;
  62. }
  63. .answerWrap .itemOperation {
  64. display: none;
  65. }
  66. .answerWrap:hover .itemOperation {
  67. display: flex;
  68. }
  69. .question::before {
  70. right: 0;
  71. background: url(./icons/question.svg) no-repeat;
  72. }
  73. .textArea {
  74. padding-top: 13px;
  75. padding-bottom: 13px;
  76. padding-right: 130px;
  77. border-radius: 12px;
  78. line-height: 20px;
  79. background-color: #fff;
  80. }
  81. .textArea:hover {
  82. background-color: #fff;
  83. }
  84. /* .textArea:focus {
  85. box-shadow: 0px 3px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.05);
  86. } */
  87. .count {
  88. /* display: none; */
  89. padding: 0 2px;
  90. }
  91. .sendBtn {
  92. background: url(./icons/send.svg) center center no-repeat;
  93. }
  94. .sendBtnActive {
  95. background-image: url(./icons/send-active.svg);
  96. }
  97. .sendBtn:hover {
  98. background-image: url(./icons/send-active.svg);
  99. background-color: #EBF5FF;
  100. }
  101. .textArea:focus+div .count {
  102. display: block;
  103. }
  104. .textArea:focus+div .sendBtn {
  105. background-image: url(./icons/send-active.svg);
  106. }