segment-comments.module.css 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. /* react-mentions样式 */
  2. .mentionsWrapper {
  3. position: relative;
  4. width: 100%;
  5. }
  6. .mentionsWrapper :global(.mentions) {
  7. margin: 0;
  8. }
  9. .mentionsWrapper :global(.mentions__control) {
  10. font-size: 14px;
  11. min-height: 80px;
  12. }
  13. .mentionsWrapper :global(.mentions__input) {
  14. padding: 12px;
  15. outline: none;
  16. border: none;
  17. overflow: auto;
  18. line-height: 1.5;
  19. }
  20. .mentionsWrapper :global(.mentions__highlighter) {
  21. padding: 12px;
  22. border: none;
  23. line-height: 1.5;
  24. }
  25. .mentionsWrapper :global(.mentions__highlighter__substring) {
  26. visibility: hidden;
  27. }
  28. .mentionsWrapper :global(.mentions__suggestions__list) {
  29. background-color: white;
  30. border: 1px solid #E5E7EB;
  31. border-radius: 8px;
  32. font-size: 14px;
  33. box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  34. max-height: 200px;
  35. overflow-y: auto;
  36. position: absolute;
  37. bottom: 100%;
  38. left: 0;
  39. right: 0;
  40. z-index: 100;
  41. }
  42. .mentionsWrapper :global(.mentions__suggestions__item) {
  43. padding: 8px 12px;
  44. border-bottom: 1px solid #F3F4F6;
  45. cursor: pointer;
  46. }
  47. .mentionsWrapper :global(.mentions__suggestions__item--focused) {
  48. background-color: #F3F4F6;
  49. }
  50. .mentionsWrapper :global(.mentions__mention) {
  51. background-color: #EFF6FF;
  52. color: #1E40AF;
  53. border-radius: 4px;
  54. padding: 2px 4px;
  55. position: relative;
  56. z-index: 1;
  57. pointer-events: none;
  58. }