2
* # Semantic - Chat Room
3
* http://github.com/jlukic/semantic-ui/
6
* Copyright 2014 Contributors
7
* Released under the MIT license
8
* http://opensource.org/licenses/MIT
11
/*******************************
13
*******************************/
15
background-color: #F8F8F8;
22
background-color: #FFFFFF;
25
border: 1px solid rgba(0, 0, 0, 0.1);
29
.ui.chatroom .room .loader {
31
margin: -25px 0px 0px -25px;
33
/* Chat Room Actions */
34
.ui.chatroom .actions {
36
background-color: #EEEEEE;
38
border: 1px solid rgba(0, 0, 0, 0.1);
39
border-radius: 5px 5px 0px 0px;
41
.ui.chatroom .actions .button {
45
/* Online User Count */
46
.ui.chatroom .actions .message {
51
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8);
54
.ui.chatroom .actions .message .loader {
55
display: inline-block;
58
/* Chat Room Text Log */
65
.ui.chatroom .log .message {
67
border-top: 1px dotted #DADADA;
69
.ui.chatroom .log .message:first-child {
73
.ui.chatroom .status {
79
border-top: 1px dotted #DADADA;
81
.ui.chatroom .log .status:first-child {
84
.ui.chatroom .log .flag {
90
.ui.chatroom .log .author {
92
-webkit-transition: color 0.3s ease-out;
93
-moz-transition: color 0.3s ease-out;
94
transition: color 0.3s ease-out;
96
.ui.chatroom .log a.author:hover {
99
.ui.chatroom .log .message.admin p {
101
margin: 1px 0px 0px 23px;
103
.ui.chatroom .log .divider {
107
border-top: 1px solid #F8F8F8;
108
border-bottom: 1px solid #F8F8F8;
110
.ui.chatroom .log .divider .rule {
114
.ui.chatroom .log .divider .label {
118
/* Chat Room User List */
119
.ui.chatroom .room .list {
125
background-color: #EEEEEE;
126
border-left: 1px solid #DDDDDD;
128
.ui.chatroom .room .list .user {
131
border-bottom: 1px solid #DDDDDD;
133
.ui.chatroom .room .list .user:hover {
134
background-color: #F8F8F8;
136
.ui.chatroom .room .list .image {
138
vertical-align: middle;
141
.ui.chatroom .room .list .image img {
144
vertical-align: middle;
146
.ui.chatroom .room .list p {
148
vertical-align: middle;
155
.ui.chatroom .room .list a:hover {
158
/* User List Loading */
159
.ui.chatroom.loading .loader {
162
/* Chat Room Talk Input */
164
border: 1px solid rgba(0, 0, 0, 0.1);
165
padding: 5px 0px 0px;
166
background-color: #EEEEEE;
167
border-radius: 0px 0px 5px 5px;
169
.ui.chatroom .talk .avatar,
170
.ui.chatroom .talk input,
171
.ui.chatroom .talk .button {
174
.ui.chatroom .talk .avatar img {
179
border-radius: 500rem;
181
.ui.chatroom .talk input {
182
border: 1px solid #CCCCCC;
190
.ui.chatroom .talk input.focus {
191
border: 1px solid #AAAAAA;
200
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
201
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
202
border-radius: 0 5px 5px 0;
204
.ui.chatroom .talk .log-in.button {
209
border-radius: 0px 0px 4px 4px;
211
.ui.chatroom .talk .log-in.button i {
212
vertical-align: text-top;
215
.ui.chatroom .log .team.flag {
218
/* Chat room Loaded */
219
.ui.chatroom.loading .loader {
227
.ui.chatroom .room .container {
235
.ui.chatroom .room .list {
240
.ui.chatroom .room .list .user {