You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

263 lines
4.2 KiB

  1. .ui.chatroom {
  2. background-color: #F8F8F8;
  3. width: 330px;
  4. height: 370px;
  5. padding: 0;
  6. }
  7. .ui.chatroom .room {
  8. position: relative;
  9. background-color: #FFF;
  10. overflow: hidden;
  11. height: 286px;
  12. border: 1px solid rgba(0,0,0,.1);
  13. border-top: 0;
  14. border-bottom: 0;
  15. }
  16. .ui.chatroom .room .loader {
  17. display: none;
  18. margin: -25px 0 0 -25px;
  19. }
  20. .ui.chatroom .actions {
  21. overflow: hidden;
  22. background-color: #EEE;
  23. padding: 4px;
  24. border: 1px solid rgba(0,0,0,.1);
  25. border-radius: 5px 5px 0 0;
  26. }
  27. .ui.chatroom .actions .button {
  28. float: right;
  29. margin-left: 3px;
  30. }
  31. .ui.chatroom .actions .message {
  32. float: left;
  33. margin-left: 6px;
  34. font-size: 11px;
  35. color: #AAA;
  36. text-shadow: 0 -1px 0 rgba(255,255,255,.8);
  37. line-height: 28px;
  38. }
  39. .ui.chatroom .actions .message .loader {
  40. display: inline-block;
  41. margin-right: 8px;
  42. }
  43. .ui.chatroom .log {
  44. float: left;
  45. overflow: auto;
  46. overflow-x: hidden;
  47. overflow-y: auto;
  48. }
  49. .ui.chatroom .log .message {
  50. padding: 3px 0;
  51. border-top: 1px dotted #DADADA;
  52. }
  53. .ui.chatroom .log .message:first-child {
  54. border-top: 0;
  55. }
  56. .ui.chatroom .status {
  57. padding: 5px 0;
  58. color: #AAA;
  59. font-size: 12px;
  60. font-style: italic;
  61. line-height: 1.33;
  62. border-top: 1px dotted #DADADA;
  63. }
  64. .ui.chatroom .log .status:first-child {
  65. border-top: 0;
  66. }
  67. .ui.chatroom .log .flag {
  68. float: left;
  69. }
  70. .ui.chatroom .log p {
  71. margin-left: 0;
  72. }
  73. .ui.chatroom .log .author {
  74. font-weight: 700;
  75. -webkit-transition: color .3s ease-out;
  76. transition: color .3s ease-out;
  77. }
  78. .ui.chatroom .log a.author:hover {
  79. opacity: .8;
  80. }
  81. .ui.chatroom .log .message.admin p {
  82. font-weight: 700;
  83. margin: 1px 0 0 23px;
  84. }
  85. .ui.chatroom .log .divider {
  86. margin: -1px 0;
  87. font-size: 11px;
  88. padding: 10px 0;
  89. border-top: 1px solid #F8F8F8;
  90. border-bottom: 1px solid #F8F8F8;
  91. }
  92. .ui.chatroom .log .divider .rule {
  93. top: 50%;
  94. width: 15%;
  95. }
  96. .ui.chatroom .log .divider .label {
  97. color: #777;
  98. margin: 0;
  99. }
  100. .ui.chatroom .room .list {
  101. position: relative;
  102. overflow: auto;
  103. overflow-x: hidden;
  104. overflow-y: auto;
  105. float: left;
  106. background-color: #EEE;
  107. border-left: 1px solid #DDD;
  108. }
  109. .ui.chatroom .room .list .user {
  110. display: table;
  111. padding: 3px 7px;
  112. border-bottom: 1px solid #DDD;
  113. }
  114. .ui.chatroom .room .list .user:hover {
  115. background-color: #F8F8F8;
  116. }
  117. .ui.chatroom .room .list .image {
  118. display: table-cell;
  119. vertical-align: middle;
  120. width: 20px;
  121. }
  122. .ui.chatroom .room .list .image img {
  123. width: 20px;
  124. height: 20px;
  125. vertical-align: middle;
  126. }
  127. .ui.chatroom .room .list p {
  128. display: table-cell;
  129. vertical-align: middle;
  130. padding-left: 7px;
  131. padding-right: 14px;
  132. font-size: 11px;
  133. line-height: 1.2;
  134. font-weight: 700;
  135. }
  136. .ui.chatroom .room .list a:hover {
  137. opacity: .8;
  138. }
  139. .ui.chatroom.loading .loader {
  140. display: block;
  141. }
  142. .ui.chatroom .talk {
  143. border: 1px solid rgba(0,0,0,.1);
  144. padding: 5px 0 0;
  145. background-color: #EEE;
  146. border-radius: 0 0 5px 5px;
  147. }
  148. .ui.chatroom .talk .avatar,
  149. .ui.chatroom .talk input,
  150. .ui.chatroom .talk .button {
  151. float: left;
  152. }
  153. .ui.chatroom .talk .avatar img {
  154. display: block;
  155. width: 30px;
  156. height: 30px;
  157. margin-right: 4px;
  158. border-radius: 500rem;
  159. }
  160. .ui.chatroom .talk input {
  161. border: 1px solid #CCC;
  162. margin: 0;
  163. width: 196px;
  164. height: 14px;
  165. padding: 8px 5px;
  166. font-size: 12px;
  167. color: #555;
  168. }
  169. .ui.chatroom .talk input.focus {
  170. border: 1px solid #AAA;
  171. }
  172. .ui.chatroom .send {
  173. width: 80px;
  174. height: 32px;
  175. margin-left: -1px;
  176. padding: 4px 12px;
  177. font-size: 12px;
  178. line-height: 23px;
  179. -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
  180. box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
  181. border-radius: 0 5px 5px 0;
  182. }
  183. .ui.chatroom .talk .log-in.button {
  184. display: block;
  185. float: none;
  186. margin-top: -6px;
  187. height: 22px;
  188. border-radius: 0 0 4px 4px;
  189. }
  190. .ui.chatroom .talk .log-in.button i {
  191. vertical-align: text-top;
  192. }
  193. .ui.chatroom .log .team.flag {
  194. width: 18px;
  195. }
  196. .ui.chatroom.loading .loader {
  197. display: block;
  198. }
  199. .ui.chatroom {
  200. width: 330px;
  201. height: 370px;
  202. }
  203. .ui.chatroom .room .container {
  204. width: 3000px;
  205. }
  206. .ui.chatroom .log {
  207. width: 314px;
  208. height: 278px;
  209. padding: 4px 7px;
  210. }
  211. .ui.chatroom .room .list {
  212. width: 124px;
  213. height: 278px;
  214. padding: 4px 0;
  215. }
  216. .ui.chatroom .room .list .user {
  217. width: 110px;
  218. }
  219. .ui.chatroom .talk {
  220. height: 40px;
  221. }