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.

252 lines
5.1 KiB

  1. /*
  2. * # Semantic - Chat Room
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Chat Room
  13. *******************************/
  14. .ui.chatroom {
  15. background-color: #F8F8F8;
  16. width: 330px;
  17. height: 370px;
  18. padding: 0px;
  19. }
  20. .ui.chatroom .room {
  21. position: relative;
  22. background-color: #FFFFFF;
  23. overflow: hidden;
  24. height: 286px;
  25. border: 1px solid rgba(0, 0, 0, 0.1);
  26. border-top: none;
  27. border-bottom: none;
  28. }
  29. .ui.chatroom .room .loader {
  30. display: none;
  31. margin: -25px 0px 0px -25px;
  32. }
  33. /* Chat Room Actions */
  34. .ui.chatroom .actions {
  35. overflow: hidden;
  36. background-color: #EEEEEE;
  37. padding: 4px;
  38. border: 1px solid rgba(0, 0, 0, 0.1);
  39. -moz-border-radius: 5px 5px 0px 0px;
  40. -webkit-border-radius: 5px 5px 0px 0px;
  41. border-radius: 5px 5px 0px 0px;
  42. }
  43. .ui.chatroom .actions .button {
  44. float: right;
  45. margin-left: 3px;
  46. }
  47. /* Online User Count */
  48. .ui.chatroom .actions .message {
  49. float: left;
  50. margin-left: 6px;
  51. font-size: 11px;
  52. color: #AAAAAA;
  53. text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8);
  54. line-height: 28px;
  55. }
  56. .ui.chatroom .actions .message .loader {
  57. display: inline-block;
  58. margin-right: 8px;
  59. }
  60. /* Chat Room Text Log */
  61. .ui.chatroom .log {
  62. float: left;
  63. overflow: auto;
  64. overflow-x: hidden;
  65. overflow-y: auto;
  66. }
  67. .ui.chatroom .log .message {
  68. padding: 3px 0px;
  69. border-top: 1px dotted #DADADA;
  70. }
  71. .ui.chatroom .log .message:first-child {
  72. border-top: none;
  73. }
  74. /* status event */
  75. .ui.chatroom .status {
  76. padding: 5px 0px;
  77. color: #AAAAAA;
  78. font-size: 12px;
  79. font-style: italic;
  80. line-height: 1.33;
  81. border-top: 1px dotted #DADADA;
  82. }
  83. .ui.chatroom .log .status:first-child {
  84. border-top: none;
  85. }
  86. .ui.chatroom .log .flag {
  87. float: left;
  88. }
  89. .ui.chatroom .log p {
  90. margin-left: 0px;
  91. }
  92. .ui.chatroom .log .author {
  93. font-weight: bold;
  94. -webkit-transition: color 0.3s ease-out;
  95. -moz-transition: color 0.3s ease-out;
  96. -o-transition: color 0.3s ease-out;
  97. -ms-transition: color 0.3s ease-out;
  98. transition: color 0.3s ease-out;
  99. }
  100. .ui.chatroom .log a.author:hover {
  101. opacity: 0.8;
  102. }
  103. .ui.chatroom .log .message.admin p {
  104. font-weight: bold;
  105. margin: 1px 0px 0px 23px;
  106. }
  107. .ui.chatroom .log .divider {
  108. margin: -1px 0px;
  109. font-size: 11px;
  110. padding: 10px 0px;
  111. border-top: 1px solid #F8F8F8;
  112. border-bottom: 1px solid #F8F8F8;
  113. }
  114. .ui.chatroom .log .divider .rule {
  115. top: 50%;
  116. width: 15%;
  117. }
  118. .ui.chatroom .log .divider .label {
  119. color: #777777;
  120. margin: 0px;
  121. }
  122. /* Chat Room User List */
  123. .ui.chatroom .room .list {
  124. position: relative;
  125. overflow: auto;
  126. overflow-x: hidden;
  127. overflow-y: auto;
  128. float: left;
  129. background-color: #EEEEEE;
  130. border-left: 1px solid #DDDDDD;
  131. }
  132. .ui.chatroom .room .list .user {
  133. display: table;
  134. padding: 3px 7px;
  135. border-bottom: 1px solid #DDDDDD;
  136. }
  137. .ui.chatroom .room .list .user:hover {
  138. background-color: #F8F8F8;
  139. }
  140. .ui.chatroom .room .list .image {
  141. display: table-cell;
  142. vertical-align: middle;
  143. width: 20px;
  144. }
  145. .ui.chatroom .room .list .image img {
  146. width: 20px;
  147. height: 20px;
  148. vertical-align: middle;
  149. }
  150. .ui.chatroom .room .list p {
  151. display: table-cell;
  152. vertical-align: middle;
  153. padding-left: 7px;
  154. padding-right: 14px;
  155. font-size: 11px;
  156. line-height: 1.2;
  157. font-weight: bold;
  158. }
  159. .ui.chatroom .room .list a:hover {
  160. opacity: 0.8;
  161. }
  162. /* User List Loading */
  163. .ui.chatroom.loading .loader {
  164. display: block;
  165. }
  166. /* Chat Room Talk Input */
  167. .ui.chatroom .talk {
  168. border: 1px solid rgba(0, 0, 0, 0.1);
  169. padding: 5px 0px 0px;
  170. background-color: #EEEEEE;
  171. -webkit-border-radius: 0px 0px 5px 5px;
  172. -moz-border-radius: 0px 0px 5px 5px;
  173. border-radius: 0px 0px 5px 5px;
  174. }
  175. .ui.chatroom .talk .avatar,
  176. .ui.chatroom .talk input,
  177. .ui.chatroom .talk .button {
  178. float: left;
  179. }
  180. .ui.chatroom .talk .avatar img {
  181. display: block;
  182. width: 30px;
  183. height: 30px;
  184. margin-right: 4px;
  185. border-radius: 500rem;
  186. }
  187. .ui.chatroom .talk input {
  188. border: 1px solid #CCCCCC;
  189. margin: 0px;
  190. width: 196px;
  191. height: 14px;
  192. padding: 8px 5px;
  193. font-size: 12px;
  194. color: #555555;
  195. }
  196. .ui.chatroom .talk input.focus {
  197. border: 1px solid #AAAAAA;
  198. }
  199. .ui.chatroom .send {
  200. width: 80px;
  201. height: 32px;
  202. margin-left: -1px;
  203. padding: 4px 12px;
  204. font-size: 12px;
  205. line-height: 23px;
  206. -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
  207. -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
  208. box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
  209. border-radius: 0 5px 5px 0;
  210. }
  211. .ui.chatroom .talk .log-in.button {
  212. display: block;
  213. float: none;
  214. margin-top: -6px;
  215. height: 22px;
  216. border-radius: 0px 0px 4px 4px;
  217. }
  218. .ui.chatroom .talk .log-in.button i {
  219. vertical-align: text-top;
  220. }
  221. /* Quirky Flags */
  222. .ui.chatroom .log .team.flag {
  223. width: 18px;
  224. }
  225. /* Chat room Loaded */
  226. .ui.chatroom.loading .loader {
  227. display: block;
  228. }
  229. /* Standard Size */
  230. .ui.chatroom {
  231. width: 330px;
  232. height: 370px;
  233. }
  234. .ui.chatroom .room .container {
  235. width: 3000px;
  236. }
  237. .ui.chatroom .log {
  238. width: 314px;
  239. height: 278px;
  240. padding: 4px 7px;
  241. }
  242. .ui.chatroom .room .list {
  243. width: 124px;
  244. height: 278px;
  245. padding: 4px 0px;
  246. }
  247. .ui.chatroom .room .list .user {
  248. width: 110px;
  249. }
  250. .ui.chatroom .talk {
  251. height: 40px;
  252. }