通用评论

index.css 1.7KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. .comment-editor {
  2. box-sizing: border-box;
  3. margin: 0;
  4. padding: 0;
  5. width: 100%;
  6. max-width: 100%;
  7. list-style: none;
  8. position: relative;
  9. display: block;
  10. font-size: 14px;
  11. line-height: 1.5;
  12. color: rgba(0, 0, 0, 0.65);
  13. background-color: #fff;
  14. background-image: none;
  15. border: 1px solid #d9d9d9;
  16. border-radius: 4px;
  17. transition: all 0.3s, height 0s;
  18. }
  19. .comment-editor textarea.ant-input {
  20. border: none;
  21. border-bottom: 1px solid #eee;
  22. border-bottom-right-radius: 0;
  23. border-bottom-left-radius: 0;
  24. }
  25. .comment-editor textarea.ant-input:hover {
  26. border: none;
  27. border-bottom: 1px solid #eee;
  28. }
  29. .comment-editor textarea.ant-input:focus {
  30. box-shadow: none;
  31. border-bottom: 1px solid #eee;
  32. }
  33. .comment-editor [contentEditable="true"]:empty:not(:focus):before {
  34. content: attr(data-text);
  35. color: #bfbfbf;
  36. }
  37. .comment-editor:focus,
  38. .comment-editor:hover {
  39. border-color: #40a9ff;
  40. outline: 0;
  41. box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  42. }
  43. .comment-toolbar {
  44. display: inline-block;
  45. width: 100%;
  46. margin: 5px 0 0 0;
  47. }
  48. .comment-toolbar .comment-toolbar-icon {
  49. font-size: 23px;
  50. cursor: pointer;
  51. transition: color 0.3s;
  52. }
  53. .comment-toolbar .comment-toolbar-icon:hover {
  54. color: #40a9ff;
  55. }
  56. .comment-toolbar-left {
  57. float: left;
  58. margin: 8px 11px;
  59. }
  60. .comment-toolbar-right {
  61. float: right;
  62. margin: 5px 11px;
  63. }
  64. .comment-emoji-popover .ant-popover-inner-content {
  65. padding: 12px 16px 20px 16px;
  66. }
  67. .comment-emoji-popover .ant-carousel .slick-dots {
  68. bottom: -10px;
  69. }
  70. .comment-emoji-popover .ant-carousel .slick-dots li.slick-active button {
  71. background-color: #7b868a;
  72. }
  73. .comment-emoji-popover .ant-carousel .slick-dots li button {
  74. background-color: #a2aeb5;
  75. }