comment.css 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. .commentList .item {
  2. list-style: none outside none;
  3. margin: 1.6rem 0 0;
  4. }
  5. .commentList .avatar {
  6. border: 1px solid transparent;
  7. float: left;
  8. }
  9. .comment-main {
  10. position: relative;
  11. margin-left: 64px;
  12. border: 1px solid #dedede;
  13. border-radius: 2px;
  14. }
  15. .comment-main:after,
  16. .comment-main:before {
  17. position: absolute;
  18. top: 11px;
  19. left: -16px;
  20. right: 100%;
  21. width: 0;
  22. height: 0;
  23. display: block;
  24. content: " ";
  25. border-color: transparent;
  26. border-style: solid solid outset;
  27. pointer-events: none;
  28. }
  29. .comment-main:before {
  30. border-right-color: #dedede;
  31. border-width: 8px;
  32. }
  33. .comment-main:after {
  34. border-width: 7px;
  35. border-right-color: #f8f8f8;
  36. margin-top: 1px;
  37. margin-left: 2px;
  38. }
  39. .comment-header {
  40. padding: 10px 15px;
  41. background: #f8f8f8;
  42. border-bottom: 1px solid #eee;
  43. }
  44. .comment-title {
  45. margin: 0 0 8px;
  46. font-size: 1.6rem;
  47. line-height: 1.2;
  48. }
  49. .comment-meta {
  50. font-size: 13px;
  51. color: #999;
  52. line-height: 1.2;
  53. }
  54. .comment-meta a {
  55. color: #999;
  56. }
  57. .comment-author {
  58. font-weight: 700;
  59. color: #999;
  60. }
  61. .comment-body {
  62. padding: 15px;
  63. overflow: hidden;
  64. }
  65. .comment-body > :last-child {
  66. margin-bottom: 0;
  67. }
  68. .commentList .comment-flip .avatar {
  69. float: right;
  70. }
  71. .comment-flip .comment-main {
  72. margin-left: 0;
  73. margin-right: 64px;
  74. }
  75. .comment-flip .comment-main:before {
  76. border-left-color: #dedede;
  77. border-right-color: transparent;
  78. }
  79. .comment-flip .comment-main:after,
  80. .comment-flip .comment-main:before {
  81. left: 100%;
  82. position: absolute;
  83. right: -16px;
  84. }
  85. .comment-flip .comment-main:after {
  86. border-left-color: #f8f8f8;
  87. border-right-color: transparent;
  88. margin-left: auto;
  89. margin-right: 2px;
  90. }