message.css 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. .app-message .page {
  2. height: calc(100% - 44px); }
  3. .app-message .page-main {
  4. height: 100%; }
  5. .app-message .page-aside .form-control {
  6. border-radius: 0;
  7. border-width: 0 0 1px 0;
  8. border-color: rgba(0, 0, 0, 0.06);
  9. padding: 10px 60px 10px 30px;
  10. height: 56px; }
  11. .app-message .page-aside .input-search-btn {
  12. padding-right: 30px;
  13. border-radius: 0; }
  14. .app-message .page-aside-inner {
  15. height: 100%; }
  16. .app-message-list {
  17. height: calc(100% - 4.003rem); }
  18. .app-message-list .list-group .list-group-item {
  19. border-bottom: 0;
  20. border-radius: 0;
  21. width: 100%;
  22. padding: 16px 30px;
  23. white-space: nowrap;
  24. z-index: 0; }
  25. .app-message-list .list-group .list-group-item:hover, .app-message-list .list-group .list-group-item.active {
  26. background-color: #d9e9ff; }
  27. .app-message-list .list-group .list-group-item.active:after {
  28. width: 1px;
  29. position: absolute;
  30. content: ' ';
  31. height: 100%;
  32. right: 0;
  33. top: 0;
  34. background: #3e8ef7; }
  35. .app-message-list .list-group .list-group-item .media-time {
  36. color: #a3afb7; }
  37. .app-message-chats {
  38. padding: 20px 30px;
  39. overflow-y: auto;
  40. text-align: center;
  41. height: calc(100% - 96px);
  42. background-color: #fff; }
  43. .app-message-chats > .btn {
  44. color: #589ffc; }
  45. .app-message-chats > .btn:hover {
  46. color: #76838f; }
  47. .app-message-chats .chats {
  48. padding: 0; }
  49. .app-message-chats .chats .chat-avatar .avatar {
  50. width: 60px;
  51. margin-top: -10px; }
  52. .app-message-chats .chats .time {
  53. color: #a3afb7;
  54. font-size: 12px;
  55. text-align: center;
  56. margin: 40px 0; }
  57. .app-message-input {
  58. position: relative;
  59. padding: 30px;
  60. padding-right: 110px;
  61. background-color: #f3f7f9; }
  62. .app-message-input .message-input {
  63. position: relative; }
  64. .app-message-input .message-input textarea {
  65. height: 36px;
  66. resize: none;
  67. max-height: 100px;
  68. padding-right: 110px;
  69. -ms-overflow-y: auto !important; }
  70. .app-message-input .message-input-actions {
  71. position: absolute;
  72. bottom: 0;
  73. right: 0; }
  74. .app-message-input .message-input-actions input {
  75. display: none; }
  76. .app-message-input .message-input-btn {
  77. position: absolute;
  78. bottom: 30px;
  79. right: 30px; }
  80. @media (max-width: 1199.98px) {
  81. .app-message .page-aside .list-group-item {
  82. padding: 14px 16px;
  83. font-size: 12px; }
  84. .app-message .page-aside .list-group-item h4 {
  85. font-size: 12px; }
  86. .app-message .page-aside .list-group-item .avatar {
  87. width: 34px; }
  88. .app-message .page-aside .list-group-item .badge {
  89. padding: 1px 4px; } }
  90. @media (max-width: 479.98px) {
  91. .app-message .page {
  92. height: calc(100% - 66px); } }