message.css 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. .message-list {
  2. position: absolute;
  3. top: 51px;
  4. bottom: 44px;
  5. left: 0;
  6. right: 0;
  7. overflow-y: auto;
  8. }
  9. .message-list-item {
  10. padding: 10px 24px;
  11. border-bottom: 1px solid #e8e8e8;
  12. -ms-flex-align: start;
  13. align-items: flex-start;
  14. display: flex;
  15. -ms-flex: 1 1;
  16. flex: 1 1;
  17. }
  18. .message-list-item:hover, .message-btn-clear:hover, .message-btn-more:hover {
  19. background: #F2F2F2;
  20. }
  21. .message-item-icon {
  22. width: 40px;
  23. height: 40px;
  24. margin-right: 16px;
  25. display: block;
  26. margin-top: 4px;
  27. }
  28. .message-item-right {
  29. display: block;
  30. flex: 1 0;
  31. line-height: 24px;
  32. }
  33. .message-item-title {
  34. font-size: 14px;
  35. color: rgba(0, 0, 0, .65);
  36. }
  37. .message-item-text {
  38. color: rgba(0, 0, 0, .45);
  39. font-size: 12px;
  40. }
  41. .pull-right {
  42. float: right;
  43. }
  44. .message-btn-clear, .message-btn-more {
  45. display: block;
  46. padding: 10px 5px;
  47. text-align: center;
  48. line-height: 24px;
  49. color: #333;
  50. }
  51. .message-btn-clear {
  52. position: absolute;
  53. bottom: 0;
  54. left: 0;
  55. background: white;
  56. right: 0;
  57. border-top: 1px solid #e8e8e8;
  58. }
  59. .message-btn-more {
  60. color: #666;
  61. font-size: 13px;
  62. }
  63. .message-list-empty {
  64. text-align: center;
  65. color: rgba(0, 0, 0, .45);
  66. padding: 73px 0 88px;
  67. }
  68. .message-list-empty img {
  69. height: 76px;
  70. margin-bottom: 16px;
  71. }