_minimized_chats.scss 3.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. #conversejs {
  2. converse-chats {
  3. &.converse-overlayed {
  4. converse-minimized-chats {
  5. order: 100;
  6. }
  7. #minimized-chats {
  8. width: var(--minimized-chats-width);
  9. margin-bottom: 0;
  10. border-top-left-radius: var(--chatbox-border-radius);
  11. border-top-right-radius: var(--chatbox-border-radius);
  12. color: var(--inverse-link-color);
  13. margin-right: var(--chat-gutter);
  14. padding: 0;
  15. .badge {
  16. bottom: 8px;
  17. border: 1px solid var(--overlayed-badge-color);
  18. }
  19. #toggle-minimized-chats {
  20. border-top-left-radius: var(--chatbox-border-radius);
  21. border-top-right-radius: var(--chatbox-border-radius);
  22. background-color: var(--link-color);
  23. padding: 1em 0 0 0;
  24. text-align: center;
  25. color: white;
  26. white-space: nowrap;
  27. overflow-y: hidden;
  28. text-overflow: ellipsis;
  29. display: block;
  30. height: 45px;
  31. width: 9em;
  32. }
  33. a.restore-chat {
  34. cursor: pointer;
  35. padding: 1px 0 1px 5px;
  36. color: var(--chat-head-text-color);
  37. line-height: 15px;
  38. display: block;
  39. overflow: hidden;
  40. text-overflow: ellipsis;
  41. white-space: nowrap;
  42. &:hover {
  43. text-decoration: none;
  44. }
  45. }
  46. a.restore-chat:visited {
  47. color: var(--chat-head-text-color);
  48. }
  49. .minimized-chats-flyout {
  50. flex-direction: column-reverse;
  51. bottom: 45px;
  52. width: var(--minimized-chats-width);
  53. .chat-head {
  54. min-height: 0;
  55. padding: 0.3em;
  56. border-radius: var(--chatbox-border-radius);
  57. height: 35px;
  58. margin-bottom: 0.2em;
  59. width: 100%;
  60. max-width: 9em;
  61. flex-wrap: nowrap;
  62. }
  63. &.minimized {
  64. height: auto;
  65. }
  66. }
  67. .unread-message-count {
  68. font-weight: bold;
  69. background-color: white;
  70. border: 1px solid;
  71. text-shadow: 1px 1px 0 var(--text-shadow-color);
  72. color: var(--warning-color);
  73. border-radius: 5px;
  74. padding: 2px 4px;
  75. font-size: 16px;
  76. text-align: center;
  77. position: absolute;
  78. right: 116px;
  79. bottom: 10px;
  80. }
  81. .unread-message-count-hidden,
  82. .chat-head-message-count-hidden {
  83. display: none;
  84. }
  85. }
  86. }
  87. }
  88. }