semantic-ui-sass 0.8.1.0 → 0.8.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (52) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +8 -0
  3. data/README.md +1 -1
  4. data/app/assets/javascripts/semantic-ui/dimmer.js +4 -2
  5. data/app/assets/javascripts/semantic-ui/modal.js +11 -6
  6. data/app/assets/javascripts/semantic-ui/popup.js +0 -1
  7. data/app/assets/stylesheets/semantic-ui/collections/_breadcrumb.scss +6 -2
  8. data/app/assets/stylesheets/semantic-ui/collections/_form.scss +56 -73
  9. data/app/assets/stylesheets/semantic-ui/collections/_grid.scss +89 -53
  10. data/app/assets/stylesheets/semantic-ui/collections/_menu.scss +221 -316
  11. data/app/assets/stylesheets/semantic-ui/collections/_message.scss +43 -88
  12. data/app/assets/stylesheets/semantic-ui/collections/_table.scss +83 -23
  13. data/app/assets/stylesheets/semantic-ui/elements/_basic.icon.scss +831 -187
  14. data/app/assets/stylesheets/semantic-ui/elements/_button.scss +189 -191
  15. data/app/assets/stylesheets/semantic-ui/elements/_divider.scss +4 -22
  16. data/app/assets/stylesheets/semantic-ui/elements/_header.scss +43 -20
  17. data/app/assets/stylesheets/semantic-ui/elements/_icon.scss +1529 -472
  18. data/app/assets/stylesheets/semantic-ui/elements/_image.scss +145 -152
  19. data/app/assets/stylesheets/semantic-ui/elements/_input.scss +36 -63
  20. data/app/assets/stylesheets/semantic-ui/elements/_label.scss +120 -175
  21. data/app/assets/stylesheets/semantic-ui/elements/_loader.scss +13 -11
  22. data/app/assets/stylesheets/semantic-ui/elements/_progress.scss +33 -115
  23. data/app/assets/stylesheets/semantic-ui/elements/_segment.scss +46 -101
  24. data/app/assets/stylesheets/semantic-ui/elements/_step.scss +35 -65
  25. data/app/assets/stylesheets/semantic-ui/modules/_accordion.scss +127 -170
  26. data/app/assets/stylesheets/semantic-ui/modules/_chatroom.scss +287 -269
  27. data/app/assets/stylesheets/semantic-ui/modules/_checkbox.scss +42 -129
  28. data/app/assets/stylesheets/semantic-ui/modules/_dimmer.scss +16 -49
  29. data/app/assets/stylesheets/semantic-ui/modules/_dropdown.scss +54 -107
  30. data/app/assets/stylesheets/semantic-ui/modules/_modal.scss +29 -22
  31. data/app/assets/stylesheets/semantic-ui/modules/_nag.scss +112 -147
  32. data/app/assets/stylesheets/semantic-ui/modules/_popup.scss +226 -230
  33. data/app/assets/stylesheets/semantic-ui/modules/_rating.scss +20 -28
  34. data/app/assets/stylesheets/semantic-ui/modules/_reveal.scss +35 -78
  35. data/app/assets/stylesheets/semantic-ui/modules/_search.scss +27 -44
  36. data/app/assets/stylesheets/semantic-ui/modules/_shape.scss +10 -41
  37. data/app/assets/stylesheets/semantic-ui/modules/_sidebar.scss +31 -60
  38. data/app/assets/stylesheets/semantic-ui/modules/_tab.scss +3 -3
  39. data/app/assets/stylesheets/semantic-ui/modules/_transition.scss +219 -451
  40. data/app/assets/stylesheets/semantic-ui/modules/_video.scss +75 -79
  41. data/app/assets/stylesheets/semantic-ui/views/_comment.scss +21 -23
  42. data/app/assets/stylesheets/semantic-ui/views/_feed.scss +20 -8
  43. data/app/assets/stylesheets/semantic-ui/views/_item.scss +86 -43
  44. data/app/assets/stylesheets/semantic-ui/views/_list.scss +80 -53
  45. data/app/assets/stylesheets/semantic-ui/views/_statistic.scss +6 -1
  46. data/lib/semantic/ui/sass/version.rb +2 -2
  47. data/semantic-ui-sass.gemspec +1 -1
  48. data/spec/dummy/config/application.rb +1 -1
  49. data/spec/spec_helper.rb +0 -1
  50. data/tasks/converter.rb +7 -0
  51. metadata +4 -7
  52. data/spec/dummy/config/database.yml +0 -25
@@ -7,192 +7,149 @@
7
7
  * Released under the MIT license
8
8
  * http://opensource.org/licenses/MIT
9
9
  *
10
- */
11
-
10
+ */
11
+
12
12
  /*******************************
13
13
  Accordion
14
- *******************************/
15
-
16
- .ui.accordion {
17
- width: 600px;
18
- max-width: 100%;
19
- overflow: hidden;
20
-
21
- font-size: 1rem;
22
- border-radius: 0.3125em;
23
-
24
- background-color: #FFFFFF;
25
-
26
- -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
27
- -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
28
- box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
29
- }
30
-
31
- .ui.accordion .title {
32
- cursor: pointer;
33
-
34
- margin: 0em;
35
- padding: 0.75em 1em;
36
-
37
- color: rgba(0, 0, 0, 0.6);
38
-
39
- border-top: 1px solid rgba(0, 0, 0, 0.05);
40
-
41
- -webkit-transition:
42
- background-color 0.2s ease-out
43
- ;
44
- -moz-transition:
45
- background-color 0.2s ease-out
46
- ;
47
- -o-transition:
48
- background-color 0.2s ease-out
49
- ;
50
- -ms-transition:
51
- background-color 0.2s ease-out
52
- ;
53
- transition:
54
- background-color 0.2s ease-out
55
- ;
56
- }
57
- .ui.accordion .title:first-child {
58
- border-top: none;
59
- }
60
-
61
-
62
- /* Content */
63
- .ui.accordion .content {
64
- display: none;
65
- margin: 0em;
66
- padding: 1.3em 1em;
67
- }
68
-
69
- /* Arrow */
70
- .ui.accordion .title .dropdown.icon {
71
- display: inline-block;
72
- float: none;
73
- margin: 0em 0.5em 0em 0em;
74
-
75
- -webkit-transition:
76
- -webkit-transform 0.2s ease,
77
- opacity 0.2s ease
78
- ;
79
- -moz-transition:
80
- -moz-transform 0.2s ease,
81
- opacity 0.2s ease
82
- ;
83
- -o-transition:
84
- -o-transform 0.2s ease,
85
- opacity 0.2s ease
86
- ;
87
- -ms-transition:
88
- -ms-transform 0.2s ease,
89
- opacity 0.2s ease
90
- ;
91
- transition:
92
- transform 0.2s ease,
93
- opacity 0.2s ease
94
- ;
95
- -webkit-transform: rotate(0deg);
96
- -moz-transform: rotate(0deg);
97
- -o-transform: rotate(0deg);
98
- -ms-transform: rotate(0deg);
99
- transform: rotate(0deg);
100
- }
101
- .ui.accordion .title .dropdown.icon:before {
102
- content: '\f0da';
103
- }
104
-
14
+ *******************************/
15
+
16
+ .ui.accordion {
17
+ width: 600px;
18
+ max-width: 100%;
19
+ overflow: hidden;
20
+ font-size: 1rem;
21
+ border-radius: 0.3125em;
22
+ background-color: #FFFFFF;
23
+ -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
24
+ box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
25
+ }
26
+
27
+ .ui.accordion .title {
28
+ cursor: pointer;
29
+ margin: 0em;
30
+ padding: 0.75em 1em;
31
+ color: rgba(0, 0, 0, 0.6);
32
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
33
+ -webkit-transition: background-color 0.2s ease-out;
34
+ transition: background-color 0.2s ease-out;
35
+ }
36
+
37
+ .ui.accordion .title:first-child {
38
+ border-top: none;
39
+ }
40
+
41
+ /* Content */
42
+
43
+ .ui.accordion .content {
44
+ display: none;
45
+ margin: 0em;
46
+ padding: 1.3em 1em;
47
+ }
48
+
49
+ /* Arrow */
50
+
51
+ .ui.accordion .title .dropdown.icon {
52
+ display: inline-block;
53
+ float: none;
54
+ margin: 0em 0.5em 0em 0em;
55
+ -webkit-transition: -webkit-transform 0.2s ease,
56
+ opacity 0.2s ease;
57
+ transition: transform 0.2s ease,
58
+ opacity 0.2s ease;
59
+ -webkit-transform: rotate(0deg);
60
+ -ms-transform: rotate(0deg);
61
+ transform: rotate(0deg);
62
+ }
63
+
64
+ .ui.accordion .title .dropdown.icon:before {
65
+ content: '\f0da';
66
+ }
67
+
105
68
  /*--------------
106
69
  Loose Coupling
107
- ---------------*/
108
-
109
- .ui.basic.accordion.menu {
110
- background-color: #FFFFFF;
111
- -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
112
- -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
113
- box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
114
- }
115
- .ui.basic.accordion.menu .title,
116
- .ui.basic.accordion.menu .content {
117
- padding: 0em;
118
- }
119
-
120
-
70
+ ---------------*/
71
+
72
+ .ui.basic.accordion.menu {
73
+ background-color: #FFFFFF;
74
+ -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
75
+ box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
76
+ }
77
+
78
+ .ui.basic.accordion.menu .title,
79
+ .ui.basic.accordion.menu .content {
80
+ padding: 0em;
81
+ }
82
+
121
83
  /*******************************
122
84
  Types
123
- *******************************/
124
-
85
+ *******************************/
86
+
125
87
  /*--------------
126
88
  Basic
127
- ---------------*/
128
-
129
- .ui.basic.accordion {
130
- background-color: transparent;
131
-
132
- -webkit-box-shadow: none;
133
- -moz-box-shadow: none;
134
- box-shadow: none;
135
- }
136
-
137
- .ui.basic.accordion .title,
138
- .ui.basic.accordion .title {
139
- background-color: transparent;
140
- border-top: none;
141
- padding-left: 0em;
142
- padding-right: 0em;
143
- }
144
-
145
- .ui.basic.accordion .content {
146
- padding: 0.5em 0em;
147
- }
148
-
149
- .ui.basic.accordion .active.title {
150
- background-color: transparent;
151
- }
152
-
153
-
89
+ ---------------*/
90
+
91
+ .ui.basic.accordion {
92
+ background-color: transparent;
93
+ -webkit-box-shadow: none;
94
+ box-shadow: none;
95
+ }
96
+
97
+ .ui.basic.accordion .title,
98
+ .ui.basic.accordion .title {
99
+ background-color: transparent;
100
+ border-top: none;
101
+ padding-left: 0em;
102
+ padding-right: 0em;
103
+ }
104
+
105
+ .ui.basic.accordion .content {
106
+ padding: 0.5em 0em;
107
+ }
108
+
109
+ .ui.basic.accordion .active.title {
110
+ background-color: transparent;
111
+ }
112
+
154
113
  /*******************************
155
114
  States
156
- *******************************/
157
-
158
-
115
+ *******************************/
116
+
159
117
  /*--------------
160
118
  Hover
161
- ---------------*/
162
-
163
- .ui.accordion .title:hover,
164
- .ui.accordion .active.title {
165
- color: rgba(0, 0, 0, 0.8);
166
- }
167
-
119
+ ---------------*/
120
+
121
+ .ui.accordion .title:hover,
122
+ .ui.accordion .active.title {
123
+ color: rgba(0, 0, 0, 0.8);
124
+ }
125
+
168
126
  /*--------------
169
127
  Active
170
- ---------------*/
171
-
172
- .ui.accordion .active.title {
173
- background-color: rgba(0, 0, 0, 0.1);
174
- color: rgba(0, 0, 0, 0.8);
175
- }
176
- .ui.accordion .active.title .dropdown.icon {
177
- -webkit-transform: rotate(90deg);
178
- -moz-transform: rotate(90deg);
179
- -o-transform: rotate(90deg);
180
- -ms-transform: rotate(90deg);
181
- transform: rotate(90deg);
182
- }
183
- .ui.accordion .active.content {
184
- display: block;
185
- }
186
-
187
-
128
+ ---------------*/
129
+
130
+ .ui.accordion .active.title {
131
+ background-color: rgba(0, 0, 0, 0.1);
132
+ color: rgba(0, 0, 0, 0.8);
133
+ }
134
+
135
+ .ui.accordion .active.title .dropdown.icon {
136
+ -webkit-transform: rotate(90deg);
137
+ -ms-transform: rotate(90deg);
138
+ transform: rotate(90deg);
139
+ }
140
+
141
+ .ui.accordion .active.content {
142
+ display: block;
143
+ }
144
+
188
145
  /*******************************
189
146
  Variations
190
- *******************************/
191
-
147
+ *******************************/
148
+
192
149
  /*--------------
193
150
  Fluid
194
- ---------------*/
195
-
196
- .ui.fluid.accordion {
197
- width: 100%;
151
+ ---------------*/
152
+
153
+ .ui.fluid.accordion {
154
+ width: 100%;
198
155
  }
@@ -7,275 +7,293 @@
7
7
  * Released under the MIT license
8
8
  * http://opensource.org/licenses/MIT
9
9
  *
10
- */
11
-
10
+ */
11
+
12
12
  /*******************************
13
13
  Chat Room
14
- *******************************/
15
-
16
- .ui.chatroom {
17
- background-color: #F8F8F8;
18
- width: 330px;
19
- height: 370px;
20
- padding: 0px;
21
- }
22
- .ui.chatroom .room {
23
- position: relative;
24
- background-color: #FFFFFF;
25
- overflow: hidden;
26
- height: 286px;
27
- border: 1px solid rgba(0, 0, 0, 0.1);
28
- border-top: none;
29
- border-bottom: none;
30
- }
31
- .ui.chatroom .room .loader {
32
- display: none;
33
- margin: -25px 0px 0px -25px;
34
- }
35
- /* Chat Room Actions */
36
- .ui.chatroom .actions {
37
- overflow: hidden;
38
- background-color: #EEEEEE;
39
- padding: 4px;
40
- border: 1px solid rgba(0, 0, 0, 0.1);
41
-
42
- -moz-border-radius: 5px 5px 0px 0px;
43
- -webkit-border-radius: 5px 5px 0px 0px;
44
- border-radius: 5px 5px 0px 0px;
45
- }
46
- .ui.chatroom .actions .button {
47
- float: right;
48
- margin-left: 3px;
49
- }
50
-
51
- /* Online User Count */
52
- .ui.chatroom .actions .message {
53
- float: left;
54
- margin-left: 6px;
55
- font-size: 11px;
56
- color: #AAAAAA;
57
- text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8);
58
- line-height: 28px;
59
- }
60
- .ui.chatroom .actions .message .loader {
61
- display: inline-block;
62
- margin-right: 8px;
63
- }
64
-
65
-
66
- /* Chat Room Text Log */
67
- .ui.chatroom .log {
68
- float: left;
69
-
70
- overflow: auto;
71
- overflow-x: hidden;
72
- overflow-y: auto;
73
- }
74
- .ui.chatroom .log .message {
75
- padding: 3px 0px;
76
- border-top: 1px dotted #DADADA;
77
- }
78
- .ui.chatroom .log .message:first-child {
79
- border-top: none;
80
- }
81
- /* status event */
82
- .ui.chatroom .status {
83
- padding: 5px 0px;
84
- color: #AAAAAA;
85
-
86
- font-size: 12px;
87
- font-style: italic;
88
- line-height: 1.33;
89
- border-top: 1px dotted #DADADA;
90
- }
91
- .ui.chatroom .log .status:first-child {
92
- border-top: none;
93
- }
94
-
95
-
96
-
97
- .ui.chatroom .log .flag {
98
- float: left;
99
- }
100
- .ui.chatroom .log p {
101
- margin-left: 0px;
102
- }
103
- .ui.chatroom .log .author {
104
- font-weight: bold;
105
- -webkit-transition: color 0.3s ease-out;
106
- -moz-transition: color 0.3s ease-out;
107
- -o-transition: color 0.3s ease-out;
108
- -ms-transition: color 0.3s ease-out;
109
- transition: color 0.3s ease-out;
110
- }
111
- .ui.chatroom .log a.author:hover {
112
- opacity: 0.8;
113
- }
114
-
115
- .ui.chatroom .log .message.admin p {
116
- font-weight: bold;
117
- margin: 1px 0px 0px 23px;
118
- }
119
- .ui.chatroom .log .divider {
120
- margin: -1px 0px;
121
- font-size: 11px;
122
- padding: 10px 0px;
123
- border-top: 1px solid #F8F8F8;
124
- border-bottom: 1px solid #F8F8F8;
125
- }
126
- .ui.chatroom .log .divider .rule {
127
- top: 50%;
128
- width: 15%;
129
- }
130
-
131
- .ui.chatroom .log .divider .label {
132
- color: #777777;
133
- margin: 0px;
134
- }
135
-
136
- /* Chat Room User List */
137
- .ui.chatroom .room .list {
138
- position: relative;
139
- overflow: auto;
140
- overflow-x: hidden;
141
- overflow-y: auto;
142
-
143
- float: left;
144
- background-color: #EEEEEE;
145
- border-left: 1px solid #DDDDDD;
146
- }
147
- .ui.chatroom .room .list .user {
148
- display: table;
149
- padding: 3px 7px;
150
- border-bottom: 1px solid #DDDDDD;
151
- }
152
- .ui.chatroom .room .list .user:hover {
153
- background-color: #F8F8F8;
154
- }
155
- .ui.chatroom .room .list .image {
156
- display: table-cell;
157
- vertical-align: middle;
158
- width: 20px;
159
- }
160
- .ui.chatroom .room .list .image img {
161
- width: 20px;
162
- height: 20px;
163
- vertical-align: middle;
164
- }
165
- .ui.chatroom .room .list p {
166
- display: table-cell;
167
- vertical-align: middle;
168
- padding-left: 7px;
169
- padding-right: 14px;
170
- font-size: 11px;
171
- line-height: 1.2;
172
- font-weight: bold;
173
- }
174
- .ui.chatroom .room .list a:hover {
175
- opacity: 0.8;
176
- }
177
-
178
- /* User List Loading */
179
- .ui.chatroom.loading .loader {
180
- display: block;
181
- }
182
-
183
-
184
-
185
- /* Chat Room Talk Input */
186
- .ui.chatroom .talk {
187
- border: 1px solid rgba(0, 0, 0, 0.1);
188
- padding: 5px 0px 0px;
189
-
190
- background-color: #EEEEEE;
191
-
192
- -webkit-border-radius: 0px 0px 5px 5px;
193
- -moz-border-radius: 0px 0px 5px 5px;
194
- border-radius: 0px 0px 5px 5px;
195
- }
196
- .ui.chatroom .talk .avatar,
197
- .ui.chatroom .talk input,
198
- .ui.chatroom .talk .button {
199
- float: left;
200
- }
201
-
202
- .ui.chatroom .talk .avatar img {
203
- display: block;
204
- width: 30px;
205
- height: 30px;
206
- margin-right: 4px;
207
- border-radius: 500rem;
208
- }
209
- .ui.chatroom .talk input {
210
- border: 1px solid #CCCCCC;
211
- margin: 0px;
212
- width: 196px;
213
- height: 14px;
214
- padding: 8px 5px;
215
- font-size: 12px;
216
- color: #555555;
217
- }
218
- .ui.chatroom .talk input.focus {
219
- border: 1px solid #AAAAAA;
220
- }
221
- .ui.chatroom .send {
222
- width: 80px;
223
- height: 32px;
224
-
225
- margin-left: -1px;
226
- padding: 4px 12px;
227
- font-size: 12px;
228
- line-height: 23px;
229
-
230
- -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
231
- -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
232
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
233
-
234
- border-radius: 0 5px 5px 0;
235
- }
236
- .ui.chatroom .talk .log-in.button {
237
- display: block;
238
- float: none;
239
- margin-top: -6px;
240
- height: 22px;
241
- border-radius: 0px 0px 4px 4px;
242
- }
243
- .ui.chatroom .talk .log-in.button i {
244
- vertical-align: text-top;
245
- }
246
-
247
- /* Quirky Flags */
248
- .ui.chatroom .log .team.flag {
249
- width: 18px;
250
- }
251
-
252
- /* Chat room Loaded */
253
- .ui.chatroom.loading .loader {
254
- display: block;
255
- }
256
-
257
-
258
- /* Standard Size */
259
- .ui.chatroom {
260
- width: 330px;
261
- height: 370px;
262
- }
263
- .ui.chatroom .room .container {
264
- width: 3000px;
265
- }
266
- .ui.chatroom .log {
267
- width: 314px;
268
- height: 278px;
269
- padding: 4px 7px;
270
- }
271
- .ui.chatroom .room .list {
272
- width: 124px;
273
- height: 278px;
274
- padding: 4px 0px;
275
- }
276
- .ui.chatroom .room .list .user {
277
- width: 110px;
278
- }
279
- .ui.chatroom .talk {
280
- height: 40px;
14
+ *******************************/
15
+
16
+ .ui.chatroom {
17
+ background-color: #F8F8F8;
18
+ width: 330px;
19
+ height: 370px;
20
+ padding: 0px;
21
+ }
22
+
23
+ .ui.chatroom .room {
24
+ position: relative;
25
+ background-color: #FFFFFF;
26
+ overflow: hidden;
27
+ height: 286px;
28
+ border: 1px solid rgba(0, 0, 0, 0.1);
29
+ border-top: none;
30
+ border-bottom: none;
31
+ }
32
+
33
+ .ui.chatroom .room .loader {
34
+ display: none;
35
+ margin: -25px 0px 0px -25px;
36
+ }
37
+
38
+ /* Chat Room Actions */
39
+
40
+ .ui.chatroom .actions {
41
+ overflow: hidden;
42
+ background-color: #EEEEEE;
43
+ padding: 4px;
44
+ border: 1px solid rgba(0, 0, 0, 0.1);
45
+ border-radius: 5px 5px 0px 0px;
46
+ }
47
+
48
+ .ui.chatroom .actions .button {
49
+ float: right;
50
+ margin-left: 3px;
51
+ }
52
+
53
+ /* Online User Count */
54
+
55
+ .ui.chatroom .actions .message {
56
+ float: left;
57
+ margin-left: 6px;
58
+ font-size: 11px;
59
+ color: #AAAAAA;
60
+ text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8);
61
+ line-height: 28px;
62
+ }
63
+
64
+ .ui.chatroom .actions .message .loader {
65
+ display: inline-block;
66
+ margin-right: 8px;
67
+ }
68
+
69
+ /* Chat Room Text Log */
70
+
71
+ .ui.chatroom .log {
72
+ float: left;
73
+ overflow: auto;
74
+ overflow-x: hidden;
75
+ overflow-y: auto;
76
+ }
77
+
78
+ .ui.chatroom .log .message {
79
+ padding: 3px 0px;
80
+ border-top: 1px dotted #DADADA;
81
+ }
82
+
83
+ .ui.chatroom .log .message:first-child {
84
+ border-top: none;
85
+ }
86
+
87
+ /* status event */
88
+
89
+ .ui.chatroom .status {
90
+ padding: 5px 0px;
91
+ color: #AAAAAA;
92
+ font-size: 12px;
93
+ font-style: italic;
94
+ line-height: 1.33;
95
+ border-top: 1px dotted #DADADA;
96
+ }
97
+
98
+ .ui.chatroom .log .status:first-child {
99
+ border-top: none;
100
+ }
101
+
102
+ .ui.chatroom .log .flag {
103
+ float: left;
104
+ }
105
+
106
+ .ui.chatroom .log p {
107
+ margin-left: 0px;
108
+ }
109
+
110
+ .ui.chatroom .log .author {
111
+ font-weight: bold;
112
+ -webkit-transition: color 0.3s ease-out;
113
+ transition: color 0.3s ease-out;
114
+ }
115
+
116
+ .ui.chatroom .log a.author:hover {
117
+ opacity: 0.8;
118
+ }
119
+
120
+ .ui.chatroom .log .message.admin p {
121
+ font-weight: bold;
122
+ margin: 1px 0px 0px 23px;
123
+ }
124
+
125
+ .ui.chatroom .log .divider {
126
+ margin: -1px 0px;
127
+ font-size: 11px;
128
+ padding: 10px 0px;
129
+ border-top: 1px solid #F8F8F8;
130
+ border-bottom: 1px solid #F8F8F8;
131
+ }
132
+
133
+ .ui.chatroom .log .divider .rule {
134
+ top: 50%;
135
+ width: 15%;
136
+ }
137
+
138
+ .ui.chatroom .log .divider .label {
139
+ color: #777777;
140
+ margin: 0px;
141
+ }
142
+
143
+ /* Chat Room User List */
144
+
145
+ .ui.chatroom .room .list {
146
+ position: relative;
147
+ overflow: auto;
148
+ overflow-x: hidden;
149
+ overflow-y: auto;
150
+ float: left;
151
+ background-color: #EEEEEE;
152
+ border-left: 1px solid #DDDDDD;
153
+ }
154
+
155
+ .ui.chatroom .room .list .user {
156
+ display: table;
157
+ padding: 3px 7px;
158
+ border-bottom: 1px solid #DDDDDD;
159
+ }
160
+
161
+ .ui.chatroom .room .list .user:hover {
162
+ background-color: #F8F8F8;
163
+ }
164
+
165
+ .ui.chatroom .room .list .image {
166
+ display: table-cell;
167
+ vertical-align: middle;
168
+ width: 20px;
169
+ }
170
+
171
+ .ui.chatroom .room .list .image img {
172
+ width: 20px;
173
+ height: 20px;
174
+ vertical-align: middle;
175
+ }
176
+
177
+ .ui.chatroom .room .list p {
178
+ display: table-cell;
179
+ vertical-align: middle;
180
+ padding-left: 7px;
181
+ padding-right: 14px;
182
+ font-size: 11px;
183
+ line-height: 1.2;
184
+ font-weight: bold;
185
+ }
186
+
187
+ .ui.chatroom .room .list a:hover {
188
+ opacity: 0.8;
189
+ }
190
+
191
+ /* User List Loading */
192
+
193
+ .ui.chatroom.loading .loader {
194
+ display: block;
195
+ }
196
+
197
+ /* Chat Room Talk Input */
198
+
199
+ .ui.chatroom .talk {
200
+ border: 1px solid rgba(0, 0, 0, 0.1);
201
+ padding: 5px 0px 0px;
202
+ background-color: #EEEEEE;
203
+ border-radius: 0px 0px 5px 5px;
204
+ }
205
+
206
+ .ui.chatroom .talk .avatar,
207
+ .ui.chatroom .talk input,
208
+ .ui.chatroom .talk .button {
209
+ float: left;
210
+ }
211
+
212
+ .ui.chatroom .talk .avatar img {
213
+ display: block;
214
+ width: 30px;
215
+ height: 30px;
216
+ margin-right: 4px;
217
+ border-radius: 500rem;
218
+ }
219
+
220
+ .ui.chatroom .talk input {
221
+ border: 1px solid #CCCCCC;
222
+ margin: 0px;
223
+ width: 196px;
224
+ height: 14px;
225
+ padding: 8px 5px;
226
+ font-size: 12px;
227
+ color: #555555;
228
+ }
229
+
230
+ .ui.chatroom .talk input.focus {
231
+ border: 1px solid #AAAAAA;
232
+ }
233
+
234
+ .ui.chatroom .send {
235
+ width: 80px;
236
+ height: 32px;
237
+ margin-left: -1px;
238
+ padding: 4px 12px;
239
+ font-size: 12px;
240
+ line-height: 23px;
241
+ -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
242
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
243
+ border-radius: 0 5px 5px 0;
244
+ }
245
+
246
+ .ui.chatroom .talk .log-in.button {
247
+ display: block;
248
+ float: none;
249
+ margin-top: -6px;
250
+ height: 22px;
251
+ border-radius: 0px 0px 4px 4px;
252
+ }
253
+
254
+ .ui.chatroom .talk .log-in.button i {
255
+ vertical-align: text-top;
256
+ }
257
+
258
+ /* Quirky Flags */
259
+
260
+ .ui.chatroom .log .team.flag {
261
+ width: 18px;
262
+ }
263
+
264
+ /* Chat room Loaded */
265
+
266
+ .ui.chatroom.loading .loader {
267
+ display: block;
268
+ }
269
+
270
+ /* Standard Size */
271
+
272
+ .ui.chatroom {
273
+ width: 330px;
274
+ height: 370px;
275
+ }
276
+
277
+ .ui.chatroom .room .container {
278
+ width: 3000px;
279
+ }
280
+
281
+ .ui.chatroom .log {
282
+ width: 314px;
283
+ height: 278px;
284
+ padding: 4px 7px;
285
+ }
286
+
287
+ .ui.chatroom .room .list {
288
+ width: 124px;
289
+ height: 278px;
290
+ padding: 4px 0px;
291
+ }
292
+
293
+ .ui.chatroom .room .list .user {
294
+ width: 110px;
295
+ }
296
+
297
+ .ui.chatroom .talk {
298
+ height: 40px;
281
299
  }