~johnsca/charms/trusty/cloudfoundry/reconciler-ui
» Revision
138
: reconciler/ui/static/semantic/packaged/css/semantic.css
« back to all changes in this revision
Viewing changes to reconciler/ui/static/semantic/packaged/css/semantic.css
- browse files at revision 138
- compare with another revision
- download diff
- download tarball
- view history from revision 138
- Committer: Whit Morriss
- Date: 2014-10-13 06:50:17 UTC
- Revision ID: whit.morriss@canonical.com-20141013065017-0feo2ku3yllymkol
reorg reconciler
- files added:
- reconciler
- reconciler/ui
- reconciler/ui/static
- reconciler/ui/static/semantic
- reconciler/ui/static/semantic/examples
- reconciler/ui/static/semantic/examples/images
- reconciler/ui/static/semantic/less
- reconciler/ui/static/semantic/less/collections
- reconciler/ui/static/semantic/less/elements
- reconciler/ui/static/semantic/less/fonts
- reconciler/ui/static/semantic/less/images
- reconciler/ui/static/semantic/less/modules
- reconciler/ui/static/semantic/less/modules/behavior
- reconciler/ui/static/semantic/less/views
- reconciler/ui/static/semantic/minified
- reconciler/ui/static/semantic/minified/collections
- reconciler/ui/static/semantic/minified/elements
- reconciler/ui/static/semantic/minified/fonts
- reconciler/ui/static/semantic/minified/images
- reconciler/ui/static/semantic/minified/modules
- reconciler/ui/static/semantic/minified/modules/behavior
- reconciler/ui/static/semantic/minified/views
- reconciler/ui/static/semantic/packaged
- reconciler/ui/static/semantic/packaged/css
- reconciler/ui/static/semantic/packaged/fonts
- reconciler/ui/static/semantic/packaged/images
- reconciler/ui/static/semantic/packaged/javascript
- reconciler/ui/static/semantic/uncompressed
- reconciler/ui/static/semantic/uncompressed/collections
- reconciler/ui/static/semantic/uncompressed/elements
- reconciler/ui/static/semantic/uncompressed/fonts
- reconciler/ui/static/semantic/uncompressed/images
- reconciler/ui/static/semantic/uncompressed/modules
- reconciler/ui/static/semantic/uncompressed/modules/behavior
- reconciler/ui/static/semantic/uncompressed/views
- files removed:
- cloudfoundry/reconciler.py
added
removed
reconciler/ui/static/semantic/packaged/css/semantic.css
1
/*
2
* # Semantic - Breadcrumb
3
* http://github.com/jlukic/semantic-ui/
4
*
5
*
6
* Copyright 2014 Contributors
7
* Released under the MIT license
8
* http://opensource.org/licenses/MIT
9
*
10
*/
11
/*******************************
12
Breadcrumb
13
*******************************/
14
.ui.breadcrumb {
15
margin: 1em 0em;
16
display: inline-block;
17
vertical-align: middle;
18
}
19
.ui.breadcrumb:first-child {
20
margin-top: 0em;
21
}
22
.ui.breadcrumb:last-child {
23
margin-bottom: 0em;
24
}
25
/*******************************
26
Content
27
*******************************/
28
.ui.breadcrumb .divider {
29
display: inline-block;
30
opacity: 0.5;
31
margin: 0em 0.15em 0em;
32
font-size: 1em;
33
color: rgba(0, 0, 0, 0.3);
34
}
35
.ui.breadcrumb a.section {
36
cursor: pointer;
37
}
38
.ui.breadcrumb .section {
39
display: inline-block;
40
margin: 0em;
41
padding: 0em;
42
}
43
/* Loose Coupling */
44
.ui.breadcrumb.segment {
45
display: inline-block;
46
padding: 0.5em 1em;
47
}
48
/*******************************
49
States
50
*******************************/
51
.ui.breadcrumb .active.section {
52
font-weight: bold;
53
}
54
/*******************************
55
Variations
56
*******************************/
57
.ui.small.breadcrumb {
58
font-size: 0.75em;
59
}
60
.ui.large.breadcrumb {
61
font-size: 1.1em;
62
}
63
.ui.huge.breadcrumb {
64
font-size: 1.3em;
65
}
66
67
/*
68
* # Semantic - Form
69
* http://github.com/jlukic/semantic-ui/
70
*
71
*
72
* Copyright 2014 Contributors
73
* Released under the MIT license
74
* http://opensource.org/licenses/MIT
75
*
76
*/
77
/*******************************
78
Standard
79
*******************************/
80
/*--------------------
81
Form
82
---------------------*/
83
.ui.form {
84
position: relative;
85
max-width: 100%;
86
}
87
.ui.form :first-child {
88
margin-top: 0em;
89
}
90
.ui.form :last-child {
91
margin-bottom: 0em;
92
}
93
/*--------------------
94
Content
95
---------------------*/
96
.ui.form > p {
97
margin: 1em 0;
98
}
99
/*--------------------
100
Field
101
---------------------*/
102
.ui.form .field {
103
clear: both;
104
margin: 0em 0em 1em;
105
}
106
/*--------------------
107
Labels
108
---------------------*/
109
.ui.form .field > label {
110
margin: 0em 0em 0.3em;
111
display: block;
112
color: #555555;
113
font-size: 0.875em;
114
}
115
/*--------------------
116
Standard Inputs
117
---------------------*/
118
.ui.form textarea,
119
.ui.form input[type="color"],
120
.ui.form input[type="date"],
121
.ui.form input[type="datetime"],
122
.ui.form input[type="datetime-local"],
123
.ui.form input[type="email"],
124
.ui.form input[type="month"],
125
.ui.form input[type="number"],
126
.ui.form input[type="password"],
127
.ui.form input[type="range"],
128
.ui.form input[type="search"],
129
.ui.form input[type="tel"],
130
.ui.form input[type="text"],
131
.ui.form input[type="time"],
132
.ui.form input[type="url"],
133
.ui.form input[type="week"],
134
.ui.form .ui.input {
135
width: 100%;
136
}
137
.ui.form textarea,
138
.ui.form input[type="color"],
139
.ui.form input[type="date"],
140
.ui.form input[type="datetime"],
141
.ui.form input[type="datetime-local"],
142
.ui.form input[type="email"],
143
.ui.form input[type="month"],
144
.ui.form input[type="number"],
145
.ui.form input[type="password"],
146
.ui.form input[type="search"],
147
.ui.form input[type="tel"],
148
.ui.form input[type="text"],
149
.ui.form input[type="time"],
150
.ui.form input[type="url"],
151
.ui.form input[type="week"] {
152
margin: 0em;
153
padding: 0.65em 1em;
154
font-size: 1em;
155
background-color: #FFFFFF;
156
border: 1px solid rgba(0, 0, 0, 0.15);
157
outline: none;
158
color: rgba(0, 0, 0, 0.7);
159
border-radius: 0.3125em;
160
-webkit-transition: background-color 0.3s ease-out, -webkit-box-shadow 0.2s ease, border-color 0.2s ease;
161
-moz-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease;
162
transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease;
163
-webkit-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset;
164
box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset;
165
-webkit-appearance: none;
166
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
167
-webkit-box-sizing: border-box;
168
-moz-box-sizing: border-box;
169
-ms-box-sizing: border-box;
170
box-sizing: border-box;
171
}
172
.ui.textarea,
173
.ui.form textarea {
174
line-height: 1.33;
175
min-height: 8em;
176
height: 12em;
177
max-height: 24em;
178
resize: vertical;
179
}
180
.ui.form textarea,
181
.ui.form input[type="checkbox"] {
182
vertical-align: top;
183
}
184
/*--------------------
185
Dividers
186
---------------------*/
187
.ui.form .divider {
188
clear: both;
189
margin: 1em 0em;
190
}
191
/*--------------------
192
Types of Messages
193
---------------------*/
194
.ui.form .info.message,
195
.ui.form .warning.message,
196
.ui.form .error.message {
197
display: none;
198
}
199
/* Assumptions */
200
.ui.form .message:first-child {
201
margin-top: 0px;
202
}
203
/*--------------------
204
Validation Prompt
205
---------------------*/
206
.ui.form .field .prompt.label {
207
white-space: nowrap;
208
}
209
.ui.form .inline.field .prompt {
210
margin-top: 0em;
211
margin-left: 1em;
212
}
213
.ui.form .inline.field .prompt:before {
214
margin-top: -0.3em;
215
bottom: auto;
216
right: auto;
217
top: 50%;
218
left: 0em;
219
}
220
/*******************************
221
States
222
*******************************/
223
/*--------------------
224
Focus
225
---------------------*/
226
.ui.form input[type="color"]:focus,
227
.ui.form input[type="date"]:focus,
228
.ui.form input[type="datetime"]:focus,
229
.ui.form input[type="datetime-local"]:focus,
230
.ui.form input[type="email"]:focus,
231
.ui.form input[type="month"]:focus,
232
.ui.form input[type="number"]:focus,
233
.ui.form input[type="password"]:focus,
234
.ui.form input[type="search"]:focus,
235
.ui.form input[type="tel"]:focus,
236
.ui.form input[type="text"]:focus,
237
.ui.form input[type="time"]:focus,
238
.ui.form input[type="url"]:focus,
239
.ui.form input[type="week"]:focus .ui.form textarea:focus {
240
color: rgba(0, 0, 0, 0.85);
241
border-color: rgba(0, 0, 0, 0.2);
242
border-bottom-left-radius: 0;
243
border-top-left-radius: 0;
244
-webkit-appearance: none;
245
-webkit-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
246
box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
247
}
248
/*--------------------
249
Error
250
---------------------*/
251
/* On Form */
252
.ui.form.warning .warning.message {
253
display: block;
254
}
255
/*--------------------
256
Warning
257
---------------------*/
258
/* On Form */
259
.ui.form.error .error.message {
260
display: block;
261
}
262
/* On Field(s) */
263
.ui.form .fields.error .field label,
264
.ui.form .field.error label,
265
.ui.form .fields.error .field .input,
266
.ui.form .field.error .input {
267
color: #D95C5C;
268
}
269
.ui.form .fields.error .field .corner.label,
270
.ui.form .field.error .corner.label {
271
border-color: #D95C5C;
272
color: #FFFFFF;
273
}
274
.ui.form .fields.error .field textarea,
275
.ui.form .fields.error .field input[type="color"],
276
.ui.form .fields.error .field input[type="date"],
277
.ui.form .fields.error .field input[type="datetime"],
278
.ui.form .fields.error .field input[type="datetime-local"],
279
.ui.form .fields.error .field input[type="email"],
280
.ui.form .fields.error .field input[type="month"],
281
.ui.form .fields.error .field input[type="number"],
282
.ui.form .fields.error .field input[type="password"],
283
.ui.form .fields.error .field input[type="search"],
284
.ui.form .fields.error .field input[type="tel"],
285
.ui.form .fields.error .field input[type="text"],
286
.ui.form .fields.error .field input[type="time"],
287
.ui.form .fields.error .field input[type="url"],
288
.ui.form .fields.error .field input[type="week"],
289
.ui.form .field.error textarea,
290
.ui.form .field.error input[type="color"],
291
.ui.form .field.error input[type="date"],
292
.ui.form .field.error input[type="datetime"],
293
.ui.form .field.error input[type="datetime-local"],
294
.ui.form .field.error input[type="email"],
295
.ui.form .field.error input[type="month"],
296
.ui.form .field.error input[type="number"],
297
.ui.form .field.error input[type="password"],
298
.ui.form .field.error input[type="search"],
299
.ui.form .field.error input[type="tel"],
300
.ui.form .field.error input[type="text"],
301
.ui.form .field.error input[type="time"],
302
.ui.form .field.error input[type="url"],
303
.ui.form .field.error input[type="week"] {
304
background-color: #FFFAFA;
305
border-color: #E7BEBE;
306
border-left: none;
307
color: #D95C5C;
308
padding-left: 1.2em;
309
border-bottom-left-radius: 0;
310
border-top-left-radius: 0;
311
-webkit-box-shadow: 0.3em 0em 0em 0em #D95C5C inset;
312
box-shadow: 0.3em 0em 0em 0em #D95C5C inset;
313
}
314
.ui.form .field.error textarea:focus,
315
.ui.form .field.error input[type="color"]:focus,
316
.ui.form .field.error input[type="date"]:focus,
317
.ui.form .field.error input[type="datetime"]:focus,
318
.ui.form .field.error input[type="datetime-local"]:focus,
319
.ui.form .field.error input[type="email"]:focus,
320
.ui.form .field.error input[type="month"]:focus,
321
.ui.form .field.error input[type="number"]:focus,
322
.ui.form .field.error input[type="password"]:focus,
323
.ui.form .field.error input[type="search"]:focus,
324
.ui.form .field.error input[type="tel"]:focus,
325
.ui.form .field.error input[type="text"]:focus,
326
.ui.form .field.error input[type="time"]:focus,
327
.ui.form .field.error input[type="url"]:focus,
328
.ui.form .field.error input[type="week"]:focus {
329
border-color: #ff5050;
330
color: #ff5050;
331
-webkit-appearance: none;
332
-webkit-box-shadow: 0.3em 0em 0em 0em #FF5050 inset;
333
box-shadow: 0.3em 0em 0em 0em #FF5050 inset;
334
}
335
/*----------------------------
336
Dropdown Selection Warning
337
-----------------------------*/
338
.ui.form .fields.error .field .ui.dropdown,
339
.ui.form .fields.error .field .ui.dropdown .item,
340
.ui.form .field.error .ui.dropdown,
341
.ui.form .field.error .ui.dropdown .item {
342
background-color: #FFFAFA;
343
color: #D95C5C;
344
}
345
.ui.form .fields.error .field .ui.dropdown,
346
.ui.form .field.error .ui.dropdown {
347
-webkit-box-shadow: 0px 0px 0px 1px #E7BEBE !important;
348
box-shadow: 0px 0px 0px 1px #E7BEBE !important;
349
}
350
.ui.form .fields.error .field .ui.dropdown:hover,
351
.ui.form .field.error .ui.dropdown:hover {
352
-webkit-box-shadow: 0px 0px 0px 1px #E7BEBE !important;
353
box-shadow: 0px 0px 0px 1px #E7BEBE !important;
354
}
355
.ui.form .fields.error .field .ui.dropdown:hover .menu,
356
.ui.form .field.error .ui.dropdown:hover .menu {
357
-webkit-box-shadow: 0px 1px 0px 1px #E7BEBE;
358
box-shadow: 0px 1px 0px 1px #E7BEBE;
359
}
360
.ui.form .fields.error .field .ui.selection.dropdown .menu .item:hover,
361
.ui.form .field.error .ui.selection.dropdown .menu .item:hover {
362
background-color: #FFF2F2;
363
}
364
/* Currently Active Item */
365
.ui.form .fields.error .field .ui.dropdown .menu .active.item,
366
.ui.form .field.error .ui.dropdown .menu .active.item {
367
background-color: #FDCFCF !important;
368
}
369
/*--------------------
370
Empty (Placeholder)
371
---------------------*/
372
/* browsers require these rules separate */
373
.ui.form ::-webkit-input-placeholder {
374
color: #AAAAAA;
375
}
376
.ui.form ::-moz-placeholder {
377
color: #AAAAAA;
378
}
379
.ui.form :focus::-webkit-input-placeholder {
380
color: #999999;
381
}
382
.ui.form :focus::-moz-placeholder {
383
color: #999999;
384
}
385
/* Error Placeholder */
386
.ui.form .error ::-webkit-input-placeholder {
387
color: rgba(255, 80, 80, 0.4);
388
}
389
.ui.form .error ::-moz-placeholder {
390
color: rgba(255, 80, 80, 0.4);
391
}
392
.ui.form .error :focus::-webkit-input-placeholder {
393
color: rgba(255, 80, 80, 0.7);
394
}
395
.ui.form .error :focus::-moz-placeholder {
396
color: rgba(255, 80, 80, 0.7);
397
}
398
/*--------------------
399
Disabled
400
---------------------*/
401
.ui.form .field :disabled,
402
.ui.form .field.disabled {
403
opacity: 0.5;
404
}
405
.ui.form .field.disabled label {
406
opacity: 0.5;
407
}
408
.ui.form .field.disabled :disabled {
409
opacity: 1;
410
}
411
/*--------------------
412
Loading State
413
---------------------*/
414
/* On Form */
415
.ui.form.loading {
416
position: relative;
417
}
418
.ui.form.loading:after {
419
position: absolute;
420
top: 0%;
421
left: 0%;
422
content: '';
423
width: 100%;
424
height: 100%;
425
background: rgba(255, 255, 255, 0.8) url(../images/loader-large.gif) no-repeat 50% 50%;
426
visibility: visible;
427
}
428
/*******************************
429
Variations
430
*******************************/
431
/*--------------------
432
Fluid Width
433
---------------------*/
434
.ui.form.fluid {
435
width: 100%;
436
-webkit-box-sizing: border-box;
437
-moz-box-sizing: border-box;
438
-ms-box-sizing: border-box;
439
box-sizing: border-box;
440
}
441
/*--------------------------
442
Input w/ attached Button
443
---------------------------*/
444
.ui.form input.attached {
445
width: auto;
446
}
447
/*--------------------
448
Date Input
449
---------------------*/
450
.ui.form .date.field > label {
451
position: relative;
452
}
453
.ui.form .date.field > label:after {
454
position: absolute;
455
top: 2em;
456
right: 0.5em;
457
font-family: 'Icons';
458
content: '\f133';
459
font-size: 1.2em;
460
font-weight: normal;
461
color: #CCCCCC;
462
}
463
/*--------------------
464
Inverted Colors
465
---------------------*/
466
.ui.inverted.form label {
467
color: #FFFFFF;
468
}
469
.ui.inverted.form .field.error textarea,
470
.ui.inverted.form .field.error input[type="color"],
471
.ui.inverted.form .field.error input[type="date"],
472
.ui.inverted.form .field.error input[type="datetime"],
473
.ui.inverted.form .field.error input[type="datetime-local"],
474
.ui.inverted.form .field.error input[type="email"],
475
.ui.inverted.form .field.error input[type="month"],
476
.ui.inverted.form .field.error input[type="number"],
477
.ui.inverted.form .field.error input[type="password"],
478
.ui.inverted.form .field.error input[type="search"],
479
.ui.inverted.form .field.error input[type="tel"],
480
.ui.inverted.form .field.error input[type="text"],
481
.ui.inverted.form .field.error input[type="time"],
482
.ui.inverted.form .field.error input[type="url"],
483
.ui.inverted.form .field.error input[type="week"] {
484
background-color: #FFCCCC;
485
}
486
.ui.inverted.form .ui.checkbox label {
487
color: rgba(255, 255, 255, 0.8);
488
}
489
.ui.inverted.form .ui.checkbox label:hover,
490
.ui.inverted.form .ui.checkbox .box:hover {
491
color: #FFFFFF;
492
}
493
/*--------------------
494
Field Groups
495
---------------------*/
496
/* Grouped Vertically */
497
.ui.form .grouped.fields {
498
margin: 0em 0em 1em;
499
}
500
.ui.form .grouped.fields .field {
501
display: block;
502
float: none;
503
margin: 0.5em 0em;
504
padding: 0em;
505
}
506
/*--------------------
507
Fields
508
---------------------*/
509
/* Split fields */
510
.ui.form .fields {
511
clear: both;
512
}
513
.ui.form .fields:after {
514
content: ' ';
515
display: block;
516
clear: both;
517
visibility: hidden;
518
line-height: 0;
519
height: 0;
520
}
521
.ui.form .fields > .field {
522
clear: none;
523
float: left;
524
-webkit-box-sizing: border-box;
525
-moz-box-sizing: border-box;
526
-ms-box-sizing: border-box;
527
box-sizing: border-box;
528
}
529
.ui.form .fields > .field:first-child {
530
border-left: none;
531
-webkit-box-shadow: none;
532
box-shadow: none;
533
}
534
/* Other Combinations */
535
.ui.form .two.fields > .fields,
536
.ui.form .two.fields > .field {
537
width: 50%;
538
padding-left: 1%;
539
padding-right: 1%;
540
}
541
.ui.form .three.fields > .fields,
542
.ui.form .three.fields > .field {
543
width: 33.333%;
544
padding-left: 1%;
545
padding-right: 1%;
546
}
547
.ui.form .four.fields > .fields,
548
.ui.form .four.fields > .field {
549
width: 25%;
550
padding-left: 1%;
551
padding-right: 1%;
552
}
553
.ui.form .five.fields > .fields,
554
.ui.form .five.fields > .field {
555
width: 20%;
556
padding-left: 1%;
557
padding-right: 1%;
558
}
559
.ui.form .fields .field:first-child {
560
padding-left: 0%;
561
}
562
.ui.form .fields .field:last-child {
563
padding-right: 0%;
564
}
565
/* Fields grid support */
566
.ui.form .fields .wide.field {
567
width: 6.25%;
568
padding-left: 1%;
569
padding-right: 1%;
570
}
571
.ui.form .fields .wide.field:first-child {
572
padding-left: 0%;
573
}
574
.ui.form .fields .wide.field:last-child {
575
padding-right: 0%;
576
}
577
.ui.form .fields > .one.wide.field {
578
width: 6.25%;
579
}
580
.ui.form .fields > .two.wide.field {
581
width: 12.5%;
582
}
583
.ui.form .fields > .three.wide.field {
584
width: 18.75%;
585
}
586
.ui.form .fields > .four.wide.field {
587
width: 25%;
588
}
589
.ui.form .fields > .five.wide.field {
590
width: 31.25%;
591
}
592
.ui.form .fields > .six.wide.field {
593
width: 37.5%;
594
}
595
.ui.form .fields > .seven.wide.field {
596
width: 43.75%;
597
}
598
.ui.form .fields > .eight.wide.field {
599
width: 50%;
600
}
601
.ui.form .fields > .nine.wide.field {
602
width: 56.25%;
603
}
604
.ui.form .fields > .ten.wide.field {
605
width: 62.5%;
606
}
607
.ui.form .fields > .eleven.wide.field {
608
width: 68.75%;
609
}
610
.ui.form .fields > .twelve.wide.field {
611
width: 75%;
612
}
613
.ui.form .fields > .thirteen.wide.field {
614
width: 81.25%;
615
}
616
.ui.form .fields > .fourteen.wide.field {
617
width: 87.5%;
618
}
619
.ui.form .fields > .fifteen.wide.field {
620
width: 93.75%;
621
}
622
.ui.form .fields > .sixteen.wide.field {
623
width: 100%;
624
}
625
/* Swap to full width on mobile */
626
@media only screen and (max-width: 767px) {
627
.ui.form .two.fields > .fields,
628
.ui.form .two.fields > .field,
629
.ui.form .three.fields > .fields,
630
.ui.form .three.fields > .field,
631
.ui.form .four.fields > .fields,
632
.ui.form .four.fields > .field,
633
.ui.form .five.fields > .fields,
634
.ui.form .five.fields > .field,
635
.ui.form .fields > .two.wide.field,
636
.ui.form .fields > .three.wide.field,
637
.ui.form .fields > .four.wide.field,
638
.ui.form .fields > .five.wide.field,
639
.ui.form .fields > .six.wide.field,
640
.ui.form .fields > .seven.wide.field,
641
.ui.form .fields > .eight.wide.field,
642
.ui.form .fields > .nine.wide.field,
643
.ui.form .fields > .ten.wide.field,
644
.ui.form .fields > .eleven.wide.field,
645
.ui.form .fields > .twelve.wide.field,
646
.ui.form .fields > .thirteen.wide.field,
647
.ui.form .fields > .fourteen.wide.field,
648
.ui.form .fields > .fifteen.wide.field,
649
.ui.form .fields > .sixteen.wide.field {
650
width: 100%;
651
padding-left: 0%;
652
padding-right: 0%;
653
}
654
}
655
/*--------------------
656
Inline Fields
657
---------------------*/
658
.ui.form .inline.fields .field {
659
min-height: 1.3em;
660
margin-right: 0.5em;
661
}
662
.ui.form .inline.fields .field > label,
663
.ui.form .inline.fields .field > p,
664
.ui.form .inline.fields .field > .ui.input,
665
.ui.form .inline.fields .field > input,
666
.ui.form .inline.field > label,
667
.ui.form .inline.field > p,
668
.ui.form .inline.field > .ui.input,
669
.ui.form .inline.field > input {
670
display: inline-block;
671
width: auto;
672
margin-top: 0em;
673
margin-bottom: 0em;
674
vertical-align: middle;
675
}
676
.ui.form .inline.fields .field > :first-child,
677
.ui.form .inline.field > :first-child {
678
margin: 0em 0.5em 0em 0em;
679
}
680
.ui.form .inline.fields .field > :only-child,
681
.ui.form .inline.field > :only-child {
682
margin: 0em;
683
}
684
/*--------------------
685
Sizes
686
---------------------*/
687
/* Standard */
688
.ui.small.form {
689
font-size: 0.875em;
690
}
691
.ui.small.form textarea,
692
.ui.small.form input[type="color"],
693
.ui.small.form input[type="date"],
694
.ui.small.form input[type="datetime"],
695
.ui.small.form input[type="datetime-local"],
696
.ui.small.form input[type="email"],
697
.ui.small.form input[type="month"],
698
.ui.small.form input[type="number"],
699
.ui.small.form input[type="password"],
700
.ui.small.form input[type="search"],
701
.ui.small.form input[type="tel"],
702
.ui.small.form input[type="text"],
703
.ui.small.form input[type="time"],
704
.ui.small.form input[type="url"],
705
.ui.small.form input[type="week"],
706
.ui.small.form label {
707
font-size: 1em;
708
}
709
/* Large */
710
.ui.large.form {
711
font-size: 1.125em;
712
}
713
714
/*
715
* # Semantic - Grid
716
* http://github.com/jlukic/semantic-ui/
717
*
718
*
719
* Copyright 2014 Contributors
720
* Released under the MIT license
721
* http://opensource.org/licenses/MIT
722
*
723
*/
724
/*******************************
725
Grid
726
*******************************/
727
.ui.grid {
728
display: block;
729
text-align: left;
730
font-size: 0em;
731
margin: 0% -1.5%;
732
padding: 0%;
733
-webkit-box-sizing: border-box;
734
-moz-box-sizing: border-box;
735
box-sizing: border-box;
736
}
737
body > .ui.grid {
738
margin-left: 0% !important;
739
margin-right: 0% !important;
740
}
741
.ui.grid:after,
742
.ui.row:after {
743
content: ".";
744
display: block;
745
height: 0;
746
clear: both;
747
visibility: hidden;
748
}
749
/*-------------------
750
Columns
751
--------------------*/
752
/* Standard 16 column */
753
.ui.grid > .column,
754
.ui.grid > .row > .column {
755
display: inline-block;
756
text-align: left;
757
font-size: 1rem;
758
width: 6.25%;
759
padding-left: 1.5%;
760
padding-right: 1.5%;
761
-webkit-box-sizing: border-box;
762
-moz-box-sizing: border-box;
763
box-sizing: border-box;
764
vertical-align: top;
765
}
766
/* Vertical padding when no rows */
767
.ui.grid > .column {
768
margin-top: 1rem;
769
margin-bottom: 1rem;
770
}
771
/*-------------------
772
Rows
773
--------------------*/
774
.ui.grid > .row {
775
display: block;
776
width: 100% !important;
777
margin-top: 1.5%;
778
padding: 1rem 0% 0%;
779
font-size: 0rem;
780
}
781
.ui.grid > .row:first-child {
782
padding-top: 0rem;
783
margin-top: 0rem;
784
}
785
/*-------------------
786
Content
787
--------------------*/
788
.ui.grid > .row > img,
789
.ui.grid > .row > .column > img {
790
max-width: 100%;
791
}
792
.ui.grid .column > .ui.segment:only-child {
793
margin: 0em;
794
}
795
/*******************************
796
Variations
797
*******************************/
798
/*-----------------------
799
Page Grid (Responsive)
800
-------------------------*/
801
.ui.page.grid {
802
min-width: 320px;
803
margin-left: 0%;
804
margin-right: 0%;
805
}
806
@media only screen and (max-width: 991px) {
807
.ui.page.grid {
808
padding: 0% 4%;
809
}
810
}
811
@media only screen and (min-width: 992px) {
812
.ui.page.grid {
813
padding: 0% 8%;
814
}
815
}
816
@media only screen and (min-width: 1500px) {
817
.ui.page.grid {
818
padding: 0% 13%;
819
}
820
}
821
@media only screen and (min-width: 1750px) {
822
.ui.page.grid {
823
padding: 0% 18%;
824
}
825
}
826
@media only screen and (min-width: 2000px) {
827
.ui.page.grid {
828
padding: 0% 23%;
829
}
830
}
831
/*-------------------
832
Column Width
833
--------------------*/
834
/* Sizing Combinations */
835
.ui.grid > .row > .one.wide.column,
836
.ui.grid > .column.row > .one.wide.column,
837
.ui.grid > .one.wide.column,
838
.ui.column.grid > .one.wide.column {
839
width: 6.25%;
840
}
841
.ui.grid > .row > .two.wide.column,
842
.ui.grid > .column.row > .two.wide.column,
843
.ui.grid > .two.wide.column,
844
.ui.column.grid > .two.wide.column {
845
width: 12.5%;
846
}
847
.ui.grid > .row > .three.wide.column,
848
.ui.grid > .column.row > .three.wide.column,
849
.ui.grid > .three.wide.column,
850
.ui.column.grid > .three.wide.column {
851
width: 18.75%;
852
}
853
.ui.grid > .row > .four.wide.column,
854
.ui.grid > .column.row > .four.wide.column,
855
.ui.grid > .four.wide.column,
856
.ui.column.grid > .four.wide.column {
857
width: 25%;
858
}
859
.ui.grid > .row > .five.wide.column,
860
.ui.grid > .column.row > .five.wide.column,
861
.ui.grid > .five.wide.column,
862
.ui.column.grid > .five.wide.column {
863
width: 31.25%;
864
}
865
.ui.grid > .row > .six.wide.column,
866
.ui.grid > .column.row > .six.wide.column,
867
.ui.grid > .six.wide.column,
868
.ui.column.grid > .six.wide.column {
869
width: 37.5%;
870
}
871
.ui.grid > .row > .seven.wide.column,
872
.ui.grid > .column.row > .seven.wide.column,
873
.ui.grid > .seven.wide.column,
874
.ui.column.grid > .seven.wide.column {
875
width: 43.75%;
876
}
877
.ui.grid > .row > .eight.wide.column,
878
.ui.grid > .column.row > .eight.wide.column,
879
.ui.grid > .eight.wide.column,
880
.ui.column.grid > .eight.wide.column {
881
width: 50%;
882
}
883
.ui.grid > .row > .nine.wide.column,
884
.ui.grid > .column.row > .nine.wide.column,
885
.ui.grid > .nine.wide.column,
886
.ui.column.grid > .nine.wide.column {
887
width: 56.25%;
888
}
889
.ui.grid > .row > .ten.wide.column,
890
.ui.grid > .column.row > .ten.wide.column,
891
.ui.grid > .ten.wide.column,
892
.ui.column.grid > .ten.wide.column {
893
width: 62.5%;
894
}
895
.ui.grid > .row > .eleven.wide.column,
896
.ui.grid > .column.row > .eleven.wide.column,
897
.ui.grid > .eleven.wide.column,
898
.ui.column.grid > .eleven.wide.column {
899
width: 68.75%;
900
}
901
.ui.grid > .row > .twelve.wide.column,
902
.ui.grid > .column.row > .twelve.wide.column,
903
.ui.grid > .twelve.wide.column,
904
.ui.column.grid > .twelve.wide.column {
905
width: 75%;
906
}
907
.ui.grid > .row > .thirteen.wide.column,
908
.ui.grid > .column.row > .thirteen.wide.column,
909
.ui.grid > .thirteen.wide.column,
910
.ui.column.grid > .thirteen.wide.column {
911
width: 81.25%;
912
}
913
.ui.grid > .row > .fourteen.wide.column,
914
.ui.grid > .column.row > .fourteen.wide.column,
915
.ui.grid > .fourteen.wide.column,
916
.ui.column.grid > .fourteen.wide.column {
917
width: 87.5%;
918
}
919
.ui.grid > .row > .fifteen.wide.column,
920
.ui.grid > .column.row > .fifteen.wide.column,
921
.ui.grid > .fifteen.wide.column,
922
.ui.column.grid > .fifteen.wide.column {
923
width: 93.75%;
924
}
925
.ui.grid > .row > .sixteen.wide.column,
926
.ui.grid > .column.row > .sixteen.wide.column,
927
.ui.grid > .sixteen.wide.column,
928
.ui.column.grid > .sixteen.wide.column {
929
width: 100%;
930
}
931
/*-------------------
932
Column Count
933
--------------------*/
934
/* Assume full width with one column */
935
.ui.one.column.grid > .row > .column,
936
.ui.one.column.grid > .column,
937
.ui.grid > .one.column.row > .column {
938
width: 100%;
939
}
940
.ui.two.column.grid > .row > .column,
941
.ui.two.column.grid > .column,
942
.ui.grid > .two.column.row > .column {
943
width: 50%;
944
}
945
.ui.three.column.grid > .row > .column,
946
.ui.three.column.grid > .column,
947
.ui.grid > .three.column.row > .column {
948
width: 33.3333%;
949
}
950
.ui.four.column.grid > .row > .column,
951
.ui.four.column.grid > .column,
952
.ui.grid > .four.column.row > .column {
953
width: 25%;
954
}
955
.ui.five.column.grid > .row > .column,
956
.ui.five.column.grid > .column,
957
.ui.grid > .five.column.row > .column {
958
width: 20%;
959
}
960
.ui.six.column.grid > .row > .column,
961
.ui.six.column.grid > .column,
962
.ui.grid > .six.column.row > .column {
963
width: 16.66667%;
964
}
965
.ui.seven.column.grid > .row > .column,
966
.ui.seven.column.grid > .column,
967
.ui.grid > .seven.column.row > .column {
968
width: 14.2857%;
969
}
970
.ui.eight.column.grid > .row > .column,
971
.ui.eight.column.grid > .column,
972
.ui.grid > .eight.column.row > .column {
973
width: 12.5%;
974
}
975
.ui.nine.column.grid > .row > .column,
976
.ui.nine.column.grid > .column,
977
.ui.grid > .nine.column.row > .column {
978
width: 11.1111%;
979
}
980
.ui.ten.column.grid > .row > .column,
981
.ui.ten.column.grid > .column,
982
.ui.grid > .ten.column.row > .column {
983
width: 10%;
984
}
985
.ui.eleven.column.grid > .row > .column,
986
.ui.eleven.column.grid > .column,
987
.ui.grid > .eleven.column.row > .column {
988
width: 9.0909%;
989
}
990
.ui.twelve.column.grid > .row > .column,
991
.ui.twelve.column.grid > .column,
992
.ui.grid > .twelve.column.row > .column {
993
width: 8.3333%;
994
}
995
.ui.thirteen.column.grid > .row > .column,
996
.ui.thirteen.column.grid > .column,
997
.ui.grid > .thirteen.column.row > .column {
998
width: 7.6923%;
999
}
1000
.ui.fourteen.column.grid > .row > .column,
1001
.ui.fourteen.column.grid > .column,
1002
.ui.grid > .fourteen.column.row > .column {
1003
width: 7.1428%;
1004
}
1005
.ui.fifteen.column.grid > .row > .column,
1006
.ui.fifteen.column.grid > .column,
1007
.ui.grid > .fifteen.column.row > .column {
1008
width: 6.6666%;
1009
}
1010
.ui.sixteen.column.grid > .row > .column,
1011
.ui.sixteen.column.grid > .column,
1012
.ui.grid > .sixteen.column.row > .column {
1013
width: 6.25%;
1014
}
1015
/* Assume full width with one column */
1016
.ui.grid > .column:only-child,
1017
.ui.grid > .row > .column:only-child {
1018
width: 100%;
1019
}
1020
/*----------------------
1021
Relaxed
1022
-----------------------*/
1023
.ui.relaxed.grid {
1024
margin: 0% -2.5%;
1025
}
1026
.ui.relaxed.grid > .column,
1027
.ui.relaxed.grid > .row > .column {
1028
padding-left: 2.5%;
1029
padding-right: 2.5%;
1030
}
1031
/*----------------------
1032
"Floated"
1033
-----------------------*/
1034
.ui.grid .left.floated.column {
1035
float: left;
1036
}
1037
.ui.grid .right.floated.column {
1038
float: right;
1039
}
1040
/*----------------------
1041
Divided
1042
-----------------------*/
1043
.ui.divided.grid,
1044
.ui.divided.grid > .row {
1045
display: table;
1046
width: 100%;
1047
margin-left: 0% !important;
1048
margin-right: 0% !important;
1049
}
1050
.ui.divided.grid > .column:not(.row),
1051
.ui.divided.grid > .row > .column {
1052
display: table-cell;
1053
-webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8);
1054
box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8);
1055
}
1056
.ui.divided.grid > .column.row {
1057
display: table;
1058
}
1059
.ui.divided.grid > .column:first-child,
1060
.ui.divided.grid > .row > .column:first-child {
1061
-webkit-box-shadow: none;
1062
box-shadow: none;
1063
}
1064
/* Vertically Divided */
1065
.ui.vertically.divided.grid > .row {
1066
-webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important;
1067
box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important;
1068
}
1069
.ui.vertically.divided.grid > .row > .column,
1070
.ui.vertically.divided.grid > .column:not(.row),
1071
.ui.vertically.divided.grid > .row:first-child {
1072
-webkit-box-shadow: none !important;
1073
box-shadow: none !important;
1074
}
1075
/*----------------------
1076
Celled
1077
-----------------------*/
1078
.ui.celled.grid {
1079
display: table;
1080
width: 100%;
1081
margin-left: 0% !important;
1082
margin-right: 0% !important;
1083
-webkit-box-shadow: 0px 0px 0px 1px #DFDFDF;
1084
box-shadow: 0px 0px 0px 1px #DFDFDF;
1085
}
1086
.ui.celled.grid > .row,
1087
.ui.celled.grid > .column.row,
1088
.ui.celled.grid > .column.row:first-child {
1089
display: table;
1090
width: 100%;
1091
margin-top: 0em;
1092
padding-top: 0em;
1093
-webkit-box-shadow: 0px -1px 0px 0px #dfdfdf;
1094
box-shadow: 0px -1px 0px 0px #dfdfdf;
1095
}
1096
.ui.celled.grid > .column:not(.row),
1097
.ui.celled.grid > .row > .column {
1098
display: table-cell;
1099
padding: 0.75em;
1100
-webkit-box-shadow: -1px 0px 0px 0px #dfdfdf;
1101
box-shadow: -1px 0px 0px 0px #dfdfdf;
1102
}
1103
.ui.celled.grid > .column:first-child,
1104
.ui.celled.grid > .row > .column:first-child {
1105
-webkit-box-shadow: none;
1106
box-shadow: none;
1107
}
1108
.ui.celled.page.grid {
1109
-webkit-box-shadow: none;
1110
box-shadow: none;
1111
}
1112
/*----------------------
1113
Horizontally Centered
1114
-----------------------*/
1115
/* Vertical Centered */
1116
.ui.left.aligned.grid,
1117
.ui.left.aligned.grid > .row > .column,
1118
.ui.left.aligned.grid > .column,
1119
.ui.grid .left.aligned.column,
1120
.ui.grid > .left.aligned.row > .column {
1121
text-align: left;
1122
}
1123
.ui.center.aligned.grid,
1124
.ui.center.aligned.grid > .row > .column,
1125
.ui.center.aligned.grid > .column,
1126
.ui.grid .center.aligned.column,
1127
.ui.grid > .center.aligned.row > .column {
1128
text-align: center;
1129
}
1130
.ui.right.aligned.grid,
1131
.ui.right.aligned.grid > .row > .column,
1132
.ui.right.aligned.grid > .column,
1133
.ui.grid .right.aligned.column,
1134
.ui.grid > .right.aligned.row > .column {
1135
text-align: right;
1136
}
1137
.ui.justified.grid,
1138
.ui.justified.grid > .row > .column,
1139
.ui.justified.grid > .column,
1140
.ui.grid .justified.column,
1141
.ui.grid > .justified.row > .column {
1142
text-align: justify;
1143
-webkit-hyphens: auto;
1144
-moz-hyphens: auto;
1145
-ms-hyphens: auto;
1146
hyphens: auto;
1147
}
1148
/*----------------------
1149
Vertically Centered
1150
-----------------------*/
1151
/* Vertical Centered */
1152
.ui.top.aligned.grid,
1153
.ui.top.aligned.grid > .row > .column,
1154
.ui.top.aligned.grid > .column,
1155
.ui.grid .top.aligned.column,
1156
.ui.grid > .top.aligned.row > .column {
1157
vertical-align: top;
1158
}
1159
.ui.middle.aligned.grid,
1160
.ui.middle.aligned.grid > .row > .column,
1161
.ui.middle.aligned.grid > .column,
1162
.ui.grid .middle.aligned.column,
1163
.ui.grid > .middle.aligned.row > .column {
1164
vertical-align: middle;
1165
}
1166
.ui.bottom.aligned.grid,
1167
.ui.bottom.aligned.grid > .row > .column,
1168
.ui.bottom.aligned.grid > .column,
1169
.ui.grid .bottom.aligned.column,
1170
.ui.grid > .bottom.aligned.row > .column {
1171
vertical-align: bottom;
1172
}
1173
/*----------------------
1174
Equal Height Columns
1175
-----------------------*/
1176
.ui.grid > .equal.height.row {
1177
display: table;
1178
width: 100%;
1179
}
1180
.ui.grid > .equal.height.row > .column {
1181
display: table-cell;
1182
}
1183
/*----------------------
1184
Only (Device)
1185
-----------------------*/
1186
/* Mobile Only Hide */
1187
@media only screen and (max-width: 767px) {
1188
.ui.tablet:not(.mobile).only.grid,
1189
.ui.grid > .tablet:not(.mobile).only.row,
1190
.ui.grid > .tablet:not(.mobile).only.column,
1191
.ui.grid > .row > .tablet:not(.mobile).only.column {
1192
display: none !important;
1193
}
1194
.ui.computer:not(.mobile).only.grid,
1195
.ui.grid > .computer:not(.mobile).only.row,
1196
.ui.grid > .computer:not(.mobile).only.column,
1197
.ui.grid > .row > .computer:not(.mobile).only.column {
1198
display: none !important;
1199
}
1200
}
1201
/* Tablet Only Hide */
1202
@media only screen and (min-width: 768px) and (max-width: 991px) {
1203
.ui.mobile:not(.tablet).only.grid,
1204
.ui.grid > .mobile:not(.tablet).only.row,
1205
.ui.grid > .mobile:not(.tablet).only.column,
1206
.ui.grid > .row > .mobile:not(.tablet).only.column {
1207
display: none !important;
1208
}
1209
.ui.computer:not(.tablet).only.grid,
1210
.ui.grid > .computer:not(.tablet).only.row,
1211
.ui.grid > .computer:not(.tablet).only.column,
1212
.ui.grid > .row > .computer:not(.tablet).only.column {
1213
display: none !important;
1214
}
1215
}
1216
/* Computer Only Hide */
1217
@media only screen and (min-width: 992px) {
1218
.ui.mobile:not(.computer).only.grid,
1219
.ui.grid > .mobile:not(.computer).only.row,
1220
.ui.grid > .mobile:not(.computer).only.column,
1221
.ui.grid > .row > .mobile:not(.computer).only.column {
1222
display: none !important;
1223
}
1224
.ui.tablet:not(.computer).only.grid,
1225
.ui.grid > .tablet:not(.computer).only.row,
1226
.ui.grid > .tablet:not(.computer).only.column,
1227
.ui.grid > .row > .tablet:not(.computer).only.column {
1228
display: none !important;
1229
}
1230
}
1231
/*-------------------
1232
Doubling
1233
--------------------*/
1234
/* Mobily Only */
1235
@media only screen and (max-width: 767px) {
1236
.ui.two.column.doubling.grid > .row > .column,
1237
.ui.two.column.doubling.grid > .column,
1238
.ui.grid > .two.column.doubling.row > .column {
1239
width: 100%;
1240
}
1241
.ui.three.column.doubling.grid > .row > .column,
1242
.ui.three.column.doubling.grid > .column,
1243
.ui.grid > .three.column.doubling.row > .column {
1244
width: 100%;
1245
}
1246
.ui.four.column.doubling.grid > .row > .column,
1247
.ui.four.column.doubling.grid > .column,
1248
.ui.grid > .four.column.doubling.row > .column {
1249
width: 100%;
1250
}
1251
.ui.five.column.doubling.grid > .row > .column,
1252
.ui.five.column.doubling.grid > .column,
1253
.ui.grid > .five.column.doubling.row > .column {
1254
width: 100%;
1255
}
1256
.ui.six.column.doubling.grid > .row > .column,
1257
.ui.six.column.doubling.grid > .column,
1258
.ui.grid > .six.column.doubling.row > .column {
1259
width: 50%;
1260
}
1261
.ui.seven.column.doubling.grid > .row > .column,
1262
.ui.seven.column.doubling.grid > .column,
1263
.ui.grid > .seven.column.doubling.row > .column {
1264
width: 50%;
1265
}
1266
.ui.eight.column.doubling.grid > .row > .column,
1267
.ui.eight.column.doubling.grid > .column,
1268
.ui.grid > .eight.column.doubling.row > .column {
1269
width: 50%;
1270
}
1271
.ui.nine.column.doubling.grid > .row > .column,
1272
.ui.nine.column.doubling.grid > .column,
1273
.ui.grid > .nine.column.doubling.row > .column {
1274
width: 50%;
1275
}
1276
.ui.ten.column.doubling.grid > .row > .column,
1277
.ui.ten.column.doubling.grid > .column,
1278
.ui.grid > .ten.column.doubling.row > .column {
1279
width: 50%;
1280
}
1281
.ui.twelve.column.doubling.grid > .row > .column,
1282
.ui.twelve.column.doubling.grid > .column,
1283
.ui.grid > .twelve.column.doubling.row > .column {
1284
width: 33.3333333333333%;
1285
}
1286
.ui.fourteen.column.doubling.grid > .row > .column,
1287
.ui.fourteen.column.doubling.grid > .column,
1288
.ui.grid > .fourteen.column.doubling.row > .column {
1289
width: 33.3333333333333%;
1290
}
1291
.ui.sixteen.column.doubling.grid > .row > .column,
1292
.ui.sixteen.column.doubling.grid > .column,
1293
.ui.grid > .sixteen.column.doubling.row > .column {
1294
width: 25%;
1295
}
1296
}
1297
/* Tablet Only */
1298
@media only screen and (min-width: 768px) and (max-width: 991px) {
1299
.ui.two.column.doubling.grid > .row > .column,
1300
.ui.two.column.doubling.grid > .column,
1301
.ui.grid > .two.column.doubling.row > .column {
1302
width: 100%;
1303
}
1304
.ui.three.column.doubling.grid > .row > .column,
1305
.ui.three.column.doubling.grid > .column,
1306
.ui.grid > .three.column.doubling.row > .column {
1307
width: 50%;
1308
}
1309
.ui.four.column.doubling.grid > .row > .column,
1310
.ui.four.column.doubling.grid > .column,
1311
.ui.grid > .four.column.doubling.row > .column {
1312
width: 50%;
1313
}
1314
.ui.five.column.doubling.grid > .row > .column,
1315
.ui.five.column.doubling.grid > .column,
1316
.ui.grid > .five.column.doubling.row > .column {
1317
width: 33.3333333%;
1318
}
1319
.ui.six.column.doubling.grid > .row > .column,
1320
.ui.six.column.doubling.grid > .column,
1321
.ui.grid > .six.column.doubling.row > .column {
1322
width: 33.3333333%;
1323
}
1324
.ui.eight.column.doubling.grid > .row > .column,
1325
.ui.eight.column.doubling.grid > .column,
1326
.ui.grid > .eight.column.doubling.row > .column {
1327
width: 33.3333333%;
1328
}
1329
.ui.eight.column.doubling.grid > .row > .column,
1330
.ui.eight.column.doubling.grid > .column,
1331
.ui.grid > .eight.column.doubling.row > .column {
1332
width: 25%;
1333
}
1334
.ui.nine.column.doubling.grid > .row > .column,
1335
.ui.nine.column.doubling.grid > .column,
1336
.ui.grid > .nine.column.doubling.row > .column {
1337
width: 25%;
1338
}
1339
.ui.ten.column.doubling.grid > .row > .column,
1340
.ui.ten.column.doubling.grid > .column,
1341
.ui.grid > .ten.column.doubling.row > .column {
1342
width: 20%;
1343
}
1344
.ui.twelve.column.doubling.grid > .row > .column,
1345
.ui.twelve.column.doubling.grid > .column,
1346
.ui.grid > .twelve.column.doubling.row > .column {
1347
width: 16.6666666%;
1348
}
1349
.ui.fourteen.column.doubling.grid > .row > .column,
1350
.ui.fourteen.column.doubling.grid > .column,
1351
.ui.grid > .fourteen.column.doubling.row > .column {
1352
width: 14.28571428571429%;
1353
}
1354
.ui.sixteen.column.doubling.grid > .row > .column,
1355
.ui.sixteen.column.doubling.grid > .column,
1356
.ui.grid > .sixteen.column.doubling.row > .column {
1357
width: 12.5%;
1358
}
1359
}
1360
/*-------------------
1361
Stackable
1362
--------------------*/
1363
@media only screen and (max-width: 767px) {
1364
.ui.stackable.grid {
1365
display: block !important;
1366
padding: 0em;
1367
margin: 0em;
1368
}
1369
.ui.stackable.grid > .row > .column,
1370
.ui.stackable.grid > .column {
1371
display: block !important;
1372
width: auto !important;
1373
margin: 1em 0em 0em !important;
1374
padding: 1em 0em 0em !important;
1375
-webkit-box-shadow: none !important;
1376
box-shadow: none !important;
1377
}
1378
.ui.stackable.divided.grid .column,
1379
.ui.stackable.celled.grid .column {
1380
border-top: 1px dotted rgba(0, 0, 0, 0.1);
1381
}
1382
.ui.stackable.grid > .row:first-child > .column:first-child,
1383
.ui.stackable.grid > .column:first-child {
1384
margin-top: 0em !important;
1385
padding-top: 0em !important;
1386
}
1387
.ui.stackable.divided.grid > .row:first-child > .column:first-child,
1388
.ui.stackable.celled.grid > .row:first-child > .column:first-child,
1389
.ui.stackable.divided.grid > .column:first-child,
1390
.ui.stackable.celled.grid > .column:first-child {
1391
border-top: none !important;
1392
}
1393
.ui.stackable.page.grid > .row > .column,
1394
.ui.stackable.page.grid > .column {
1395
padding-left: 1em !important;
1396
padding-right: 1em !important;
1397
}
1398
/* Remove pointers from vertical menus */
1399
.ui.stackable.grid .vertical.pointing.menu .item:after {
1400
display: none;
1401
}
1402
}
1403
1404
/*
1405
* # Semantic - Menu
1406
* http://github.com/jlukic/semantic-ui/
1407
*
1408
*
1409
* Copyright 2014 Contributors
1410
* Released under the MIT license
1411
* http://opensource.org/licenses/MIT
1412
*
1413
*/
1414
/*******************************
1415
Standard
1416
*******************************/
1417
/*--------------
1418
Menu
1419
---------------*/
1420
.ui.menu {
1421
margin: 1rem 0rem;
1422
background-color: #FFFFFF;
1423
font-size: 0px;
1424
font-weight: normal;
1425
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
1426
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
1427
border-radius: 0.1875rem;
1428
}
1429
.ui.menu:first-child {
1430
margin-top: 0rem;
1431
}
1432
.ui.menu:last-child {
1433
margin-bottom: 0rem;
1434
}
1435
.ui.menu:after {
1436
content: ".";
1437
display: block;
1438
height: 0;
1439
clear: both;
1440
visibility: hidden;
1441
}
1442
.ui.menu > .item:first-child {
1443
border-radius: 0.1875em 0px 0px 0.1875em;
1444
}
1445
.ui.menu > .item:last-child {
1446
border-radius: 0px 0.1875em 0.1875em 0px;
1447
}
1448
.ui.menu .item {
1449
-webkit-user-select: none;
1450
-moz-user-select: none;
1451
-ms-user-select: none;
1452
user-select: none;
1453
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1454
vertical-align: middle;
1455
line-height: 1;
1456
text-decoration: none;
1457
-webkit-box-sizing: border-box;
1458
-moz-box-sizing: border-box;
1459
-ms-box-sizing: border-box;
1460
box-sizing: border-box;
1461
-webkit-transition: opacity 0.2s ease, background 0.2s ease, -webkit-box-shadow 0.2s ease;
1462
-moz-transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
1463
transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
1464
}
1465
/*--------------
1466
Colors
1467
---------------*/
1468
/* Text Color */
1469
.ui.menu .item,
1470
.ui.menu .item > a:not(.button) {
1471
color: rgba(0, 0, 0, 0.75);
1472
}
1473
.ui.menu .item .item,
1474
.ui.menu .item .item > a:not(.button) {
1475
color: rgba(30, 30, 30, 0.7);
1476
}
1477
.ui.menu .item .item .item,
1478
.ui.menu .item .item .item > a:not(.button) {
1479
color: rgba(30, 30, 30, 0.6);
1480
}
1481
.ui.menu .dropdown .menu .item,
1482
.ui.menu .dropdown .menu .item a:not(.button) {
1483
color: rgba(0, 0, 0, 0.75);
1484
}
1485
/* Hover */
1486
.ui.menu .item .menu a.item:hover,
1487
.ui.menu .item .menu .link.item:hover {
1488
color: rgba(0, 0, 0, 0.85);
1489
}
1490
.ui.menu .dropdown .menu .item a:not(.button):hover {
1491
color: rgba(0, 0, 0, 0.85);
1492
}
1493
/* Active */
1494
.ui.menu .active.item,
1495
.ui.menu .active.item a:not(.button) {
1496
color: rgba(0, 0, 0, 0.85);
1497
border-radius: 0px;
1498
}
1499
/*--------------
1500
Items
1501
---------------*/
1502
.ui.menu .item {
1503
position: relative;
1504
display: inline-block;
1505
padding: 0.83em 0.95em;
1506
border-top: 0em solid rgba(0, 0, 0, 0);
1507
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1508
-moz-user-select: -moz-none;
1509
-khtml-user-select: none;
1510
-webkit-user-select: none;
1511
-ms-user-select: none;
1512
user-select: none;
1513
}
1514
.ui.menu .menu {
1515
margin: 0em;
1516
}
1517
.ui.menu .item.left,
1518
.ui.menu .menu.left {
1519
float: left;
1520
}
1521
.ui.menu .item.right,
1522
.ui.menu .menu.right {
1523
float: right;
1524
}
1525
/*--------------
1526
Borders
1527
---------------*/
1528
.ui.menu .item:before {
1529
position: absolute;
1530
content: '';
1531
top: 0%;
1532
left: 0px;
1533
width: 1px;
1534
height: 100%;
1535
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.05)), color-stop(50%, rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.05)));
1536
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%);
1537
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%);
1538
background-image: linear-gradient(rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%);
1539
}
1540
/*rtl:ignore*/
1541
.ui.menu > .menu:not(.right):first-child > .item:first-child:before,
1542
.ui.menu .item:first-child:before {
1543
display: none;
1544
}
1545
.ui.menu .menu.right .item:before,
1546
.ui.menu .item.right:before {
1547
right: auto;
1548
left: 0px;
1549
}
1550
/*--------------
1551
Text Content
1552
---------------*/
1553
.ui.menu .text.item > *,
1554
.ui.menu .item > p:only-child {
1555
-webkit-user-select: text;
1556
-moz-user-select: text;
1557
-ms-user-select: text;
1558
user-select: text;
1559
line-height: 1.3;
1560
color: rgba(0, 0, 0, 0.6);
1561
}
1562
.ui.menu .item > p:first-child {
1563
margin-top: 0px;
1564
}
1565
.ui.menu .item > p:last-child {
1566
margin-bottom: 0px;
1567
}
1568
/*--------------
1569
Button
1570
---------------*/
1571
.ui.menu:not(.vertical) .item > .button {
1572
position: relative;
1573
top: -0.05em;
1574
margin: -0.55em 0;
1575
padding-bottom: 0.55em;
1576
padding-top: 0.55em;
1577
font-size: 0.875em;
1578
}
1579
/*--------------
1580
Inputs
1581
---------------*/
1582
.ui.menu:not(.vertical) .item > .input {
1583
margin-top: -0.85em;
1584
margin-bottom: -0.85em;
1585
padding-top: 0.3em;
1586
padding-bottom: 0.3em;
1587
width: 100%;
1588
vertical-align: top;
1589
}
1590
.ui.menu .item > .input input {
1591
padding-top: 0.35em;
1592
padding-bottom: 0.35em;
1593
}
1594
.ui.vertical.menu .item > .input input {
1595
margin: 0em;
1596
padding-top: 0.63em;
1597
padding-bottom: 0.63em;
1598
}
1599
/* Action Input */
1600
.ui.menu:not(.vertical) .item > .button.labeled > .icon {
1601
padding-top: 0.6em;
1602
}
1603
.ui.menu:not(.vertical) .item .action.input > .button {
1604
font-size: 0.8em;
1605
padding: 0.55em 0.8em;
1606
}
1607
/* Resizes */
1608
.ui.small.menu:not(.vertical) .item > .input input {
1609
padding-top: 0.4em;
1610
padding-bottom: 0.4em;
1611
}
1612
.ui.large.menu:not(.vertical) .item > .input input {
1613
top: -0.125em;
1614
padding-bottom: 0.6em;
1615
padding-top: 0.6em;
1616
}
1617
.ui.large.menu:not(.vertical) .item .action.input > .button {
1618
font-size: 0.8em;
1619
padding: 0.9em;
1620
}
1621
.ui.large.menu:not(.vertical) .item .action.input > .button > .icon {
1622
padding-top: 0.8em;
1623
}
1624
/*--------------
1625
Header
1626
---------------*/
1627
.ui.menu .header.item {
1628
background-color: rgba(0, 0, 0, 0.04);
1629
margin: 0em;
1630
}
1631
.ui.vertical.menu .header.item {
1632
font-weight: bold;
1633
}
1634
/*--------------
1635
Dropdowns
1636
---------------*/
1637
.ui.menu .dropdown .menu .item .icon {
1638
float: none;
1639
margin: 0em 0.75em 0em 0em;
1640
}
1641
.ui.menu .dropdown.item .menu {
1642
left: 1px;
1643
margin: 0px;
1644
min-width: -webkit-calc(99%);
1645
min-width: -moz-calc(99%);
1646
min-width: calc(99%);
1647
-webkit-box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
1648
box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
1649
}
1650
.ui.secondary.menu .dropdown.item .menu {
1651
left: 0px;
1652
min-width: 100%;
1653
}
1654
.ui.menu .pointing.dropdown.item .menu {
1655
margin-top: 0.75em;
1656
}
1657
.ui.menu .simple.dropdown.item .menu {
1658
margin: 0px !important;
1659
}
1660
.ui.menu .dropdown.item .menu .item {
1661
width: 100%;
1662
color: rgba(0, 0, 0, 0.75);
1663
}
1664
.ui.menu .dropdown.item .menu .active.item {
1665
-webkit-box-shadow: none !important;
1666
box-shadow: none !important;
1667
}
1668
.ui.menu .ui.dropdown .menu .item:before {
1669
display: none;
1670
}
1671
/*--------------
1672
Labels
1673
---------------*/
1674
.ui.menu .item > .label {
1675
background-color: rgba(0, 0, 0, 0.35);
1676
color: #FFFFFF;
1677
margin: -0.15em 0em -0.15em 0.5em;
1678
padding: 0.3em 0.8em;
1679
vertical-align: baseline;
1680
}
1681
.ui.menu .item > .floating.label {
1682
padding: 0.3em 0.8em;
1683
}
1684
/*--------------
1685
Images
1686
---------------*/
1687
.ui.menu .item > img:only-child {
1688
display: block;
1689
max-width: 100%;
1690
margin: 0em auto;
1691
}
1692
/*******************************
1693
States
1694
*******************************/
1695
/*--------------
1696
Hover
1697
---------------*/
1698
.ui.link.menu .item:hover,
1699
.ui.menu .link.item:hover,
1700
.ui.menu a.item:hover,
1701
.ui.menu .ui.dropdown .menu .item:hover {
1702
cursor: pointer;
1703
background-color: rgba(0, 0, 0, 0.02);
1704
}
1705
.ui.menu .ui.dropdown.item.active {
1706
background-color: rgba(0, 0, 0, 0.02);
1707
-webkit-box-shadow: none;
1708
box-shadow: none;
1709
-moz-border-bottom-right-radius: 0em;
1710
border-bottom-right-radius: 0em;
1711
-moz-border-bottom-left-radius: 0em;
1712
border-bottom-left-radius: 0em;
1713
}
1714
/*--------------
1715
Down
1716
---------------*/
1717
.ui.link.menu .item:active,
1718
.ui.menu .link.item:active,
1719
.ui.menu a.item:active,
1720
.ui.menu .ui.dropdown .menu .item:active {
1721
background-color: rgba(0, 0, 0, 0.05);
1722
}
1723
/*--------------
1724
Active
1725
---------------*/
1726
.ui.menu .active.item {
1727
background-color: rgba(0, 0, 0, 0.01);
1728
color: rgba(0, 0, 0, 0.95);
1729
-webkit-box-shadow: 0em 0.2em 0em inset;
1730
box-shadow: 0em 0.2em 0em inset;
1731
}
1732
.ui.vertical.menu .active.item {
1733
border-radius: 0em;
1734
-webkit-box-shadow: 0.2em 0em 0em inset;
1735
box-shadow: 0.2em 0em 0em inset;
1736
}
1737
.ui.vertical.menu > .active.item:first-child {
1738
border-radius: 0em 0.1875em 0em 0em;
1739
}
1740
.ui.vertical.menu > .active.item:last-child {
1741
border-radius: 0em 0em 0.1875em 0em;
1742
}
1743
.ui.vertical.menu > .active.item:only-child {
1744
border-radius: 0em 0.1875em 0.1875em 0em;
1745
}
1746
.ui.vertical.menu .active.item .menu .active.item {
1747
border-left: none;
1748
}
1749
.ui.vertical.menu .active.item .menu .active.item {
1750
padding-left: 1.5rem;
1751
}
1752
.ui.vertical.menu .item .menu .active.item {
1753
background-color: rgba(0, 0, 0, 0.03);
1754
-webkit-box-shadow: none;
1755
box-shadow: none;
1756
}
1757
/*--------------
1758
Disabled
1759
---------------*/
1760
.ui.menu .item.disabled,
1761
.ui.menu .item.disabled:hover {
1762
cursor: default;
1763
color: rgba(0, 0, 0, 0.2);
1764
background-color: transparent !important;
1765
}
1766
/*--------------------
1767
Loading
1768
---------------------*/
1769
/* On Form */
1770
.ui.menu.loading {
1771
position: relative;
1772
}
1773
.ui.menu.loading:after {
1774
position: absolute;
1775
top: 0%;
1776
left: 0%;
1777
content: '';
1778
width: 100%;
1779
height: 100%;
1780
background: rgba(255, 255, 255, 0.8) url(../images/loader-large.gif) no-repeat 50% 50%;
1781
visibility: visible;
1782
}
1783
/*******************************
1784
Types
1785
*******************************/
1786
/*--------------
1787
Vertical
1788
---------------*/
1789
.ui.vertical.menu .item {
1790
display: block;
1791
height: auto !important;
1792
border-top: none;
1793
border-left: 0em solid rgba(0, 0, 0, 0);
1794
border-right: none;
1795
}
1796
.ui.vertical.menu > .item:first-child {
1797
border-radius: 0.1875em 0.1875em 0px 0px;
1798
}
1799
.ui.vertical.menu > .item:last-child {
1800
border-radius: 0px 0px 0.1875em 0.1875em;
1801
}
1802
.ui.vertical.menu .item > .label {
1803
float: right;
1804
text-align: center;
1805
}
1806
.ui.vertical.menu .item > i.icon {
1807
float: right;
1808
width: 1.22em;
1809
margin: 0em 0em 0em 0.5em;
1810
}
1811
.ui.vertical.menu .item > .label + i.icon {
1812
float: none;
1813
margin: 0em 0.25em 0em 0em;
1814
}
1815
/*--- Border ---*/
1816
.ui.vertical.menu .item:before {
1817
position: absolute;
1818
content: '';
1819
top: 0%;
1820
left: 0px;
1821
width: 100%;
1822
height: 1px;
1823
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%);
1824
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%);
1825
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.03)), color-stop(1.5em, rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.03)));
1826
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%);
1827
}
1828
.ui.vertical.menu .item:first-child:before {
1829
background-image: none !important;
1830
}
1831
/*--- Dropdown ---*/
1832
.ui.vertical.menu .dropdown.item > i {
1833
float: right;
1834
content: "\f0da";
1835
}
1836
.ui.vertical.menu .dropdown.item .menu {
1837
top: 0% !important;
1838
left: 100%;
1839
margin: 0px 0px 0px 1px;
1840
-webkit-box-shadow: 0 0px 1px 1px #DDDDDD;
1841
box-shadow: 0 0px 1px 1px #DDDDDD;
1842
}
1843
.ui.vertical.menu .dropdown.item.active {
1844
border-top-right-radius: 0em;
1845
border-bottom-right-radius: 0em;
1846
}
1847
.ui.vertical.menu .dropdown.item .menu .item {
1848
font-size: 1rem;
1849
}
1850
.ui.vertical.menu .dropdown.item .menu .item i.icon {
1851
margin-right: 0em;
1852
}
1853
.ui.vertical.menu .dropdown.item.active {
1854
-webkit-box-shadow: none;
1855
box-shadow: none;
1856
}
1857
/*--- Sub Menu ---*/
1858
.ui.vertical.menu .item > .menu {
1859
margin: 0.5em -0.95em 0em;
1860
}
1861
.ui.vertical.menu .item > .menu > .item {
1862
padding: 0.5rem 1.5rem;
1863
font-size: 0.875em;
1864
}
1865
.ui.vertical.menu .item > .menu > .item:before {
1866
display: none;
1867
}
1868
/*--------------
1869
Tiered
1870
---------------*/
1871
.ui.tiered.menu > .sub.menu > .item {
1872
color: rgba(0, 0, 0, 0.4);
1873
}
1874
.ui.tiered.menu > .menu > .item:hover {
1875
color: rgba(0, 0, 0, 0.8);
1876
}
1877
.ui.tiered.menu .item.active {
1878
color: rgba(0, 0, 0, 0.8);
1879
}
1880
.ui.tiered.menu > .menu .item.active:after {
1881
position: absolute;
1882
content: '';
1883
margin-top: -1px;
1884
top: 100%;
1885
left: 0px;
1886
width: 100%;
1887
height: 2px;
1888
background-color: #FBFBFB;
1889
}
1890
.ui.tiered.menu .sub.menu {
1891
background-color: rgba(0, 0, 0, 0.01);
1892
border-radius: 0em;
1893
border-top: 1px solid rgba(0, 0, 0, 0.1);
1894
-webkit-box-shadow: none;
1895
box-shadow: none;
1896
color: #FFFFFF;
1897
}
1898
.ui.tiered.menu .sub.menu .item {
1899
font-size: 0.875rem;
1900
}
1901
.ui.tiered.menu .sub.menu .item:before {
1902
background-image: none;
1903
}
1904
.ui.tiered.menu .sub.menu .active.item {
1905
padding-top: 0.83em;
1906
background-color: transparent;
1907
border-radius: 0 0 0 0;
1908
border-top: medium none;
1909
-webkit-box-shadow: none;
1910
box-shadow: none;
1911
color: rgba(0, 0, 0, 0.7) !important;
1912
}
1913
.ui.tiered.menu .sub.menu .active.item:after {
1914
display: none;
1915
}
1916
/* Inverted */
1917
.ui.inverted.tiered.menu > .menu > .item {
1918
color: rgba(255, 255, 255, 0.5);
1919
}
1920
.ui.inverted.tiered.menu .sub.menu {
1921
background-color: rgba(0, 0, 0, 0.2);
1922
}
1923
.ui.inverted.tiered.menu .sub.menu .item {
1924
color: rgba(255, 255, 255, 0.6);
1925
}
1926
.ui.inverted.tiered.menu > .menu > .item:hover {
1927
color: rgba(255, 255, 255, 0.9);
1928
}
1929
.ui.inverted.tiered.menu .active.item:after {
1930
display: none;
1931
}
1932
.ui.inverted.tiered.menu > .sub.menu > .active.item,
1933
.ui.inverted.tiered.menu > .menu > .active.item {
1934
color: #ffffff !important;
1935
-webkit-box-shadow: none;
1936
box-shadow: none;
1937
}
1938
/* Tiered pointing */
1939
.ui.pointing.tiered.menu > .menu > .item:after {
1940
display: none;
1941
}
1942
.ui.pointing.tiered.menu > .sub.menu > .item:after {
1943
display: block;
1944
}
1945
/*--------------
1946
Tabular
1947
---------------*/
1948
.ui.tabular.menu {
1949
background-color: transparent;
1950
border-bottom: 1px solid #DCDDDE;
1951
border-radius: 0em;
1952
-webkit-box-shadow: none !important;
1953
box-shadow: none !important;
1954
}
1955
.ui.tabular.menu .item {
1956
background-color: transparent;
1957
border-left: 1px solid transparent;
1958
border-right: 1px solid transparent;
1959
border-top: 1px solid transparent;
1960
padding-left: 1.4em;
1961
padding-right: 1.4em;
1962
color: rgba(0, 0, 0, 0.6);
1963
}
1964
.ui.tabular.menu .item:before {
1965
display: none;
1966
}
1967
/* Hover */
1968
.ui.tabular.menu .item:hover {
1969
background-color: transparent;
1970
color: rgba(0, 0, 0, 0.8);
1971
}
1972
/* Active */
1973
.ui.tabular.menu .active.item {
1974
position: relative;
1975
background-color: #FFFFFF;
1976
color: rgba(0, 0, 0, 0.8);
1977
border-color: #DCDDDE;
1978
font-weight: bold;
1979
margin-bottom: -1px;
1980
border-bottom: 1px solid #FFFFFF;
1981
-webkit-box-shadow: none;
1982
box-shadow: none;
1983
border-radius: 5px 5px 0 0;
1984
}
1985
/* Coupling with segment for attachment */
1986
.ui.attached.tabular.menu {
1987
position: relative;
1988
z-index: 2;
1989
}
1990
.ui.tabular.menu ~ .bottom.attached.segment {
1991
margin: 1px 0px 0px 1px;
1992
}
1993
/*--------------
1994
Pagination
1995
---------------*/
1996
.ui.pagination.menu {
1997
margin: 0em;
1998
display: inline-block;
1999
vertical-align: middle;
2000
}
2001
.ui.pagination.menu .item {
2002
min-width: 3em;
2003
text-align: center;
2004
}
2005
.ui.pagination.menu .icon.item i.icon {
2006
vertical-align: top;
2007
}
2008
.ui.pagination.menu.floated {
2009
display: block;
2010
}
2011
/* active */
2012
.ui.pagination.menu .active.item {
2013
border-top: none;
2014
padding-top: 0.83em;
2015
background-color: rgba(0, 0, 0, 0.05);
2016
-webkit-box-shadow: none;
2017
box-shadow: none;
2018
}
2019
/*--------------
2020
Secondary
2021
---------------*/
2022
.ui.secondary.menu {
2023
background-color: transparent;
2024
border-radius: 0px;
2025
-webkit-box-shadow: none;
2026
box-shadow: none;
2027
}
2028
.ui.secondary.menu > .menu > .item,
2029
.ui.secondary.menu > .item {
2030
-webkit-box-shadow: none;
2031
box-shadow: none;
2032
border: none;
2033
height: auto !important;
2034
margin: 0em 0.25em;
2035
padding: 0.5em 1em;
2036
border-radius: 0.3125em;
2037
}
2038
.ui.secondary.menu > .menu > .item:before,
2039
.ui.secondary.menu > .item:before {
2040
display: none !important;
2041
}
2042
.ui.secondary.menu .item > .input input {
2043
background-color: transparent;
2044
border: none;
2045
}
2046
.ui.secondary.menu .link.item,
2047
.ui.secondary.menu a.item {
2048
opacity: 0.8;
2049
-webkit-transition: none;
2050
-moz-transition: none;
2051
transition: none;
2052
}
2053
.ui.secondary.menu .header.item {
2054
border-right: 0.1em solid rgba(0, 0, 0, 0.1);
2055
background-color: transparent;
2056
border-radius: 0em;
2057
}
2058
/* hover */
2059
.ui.secondary.menu .link.item:hover,
2060
.ui.secondary.menu a.item:hover {
2061
opacity: 1;
2062
}
2063
/* active */
2064
.ui.secondary.menu > .menu > .active.item,
2065
.ui.secondary.menu > .active.item {
2066
background-color: rgba(0, 0, 0, 0.08);
2067
opacity: 1;
2068
-webkit-box-shadow: none;
2069
box-shadow: none;
2070
}
2071
.ui.secondary.vertical.menu > .active.item {
2072
border-radius: 0.3125em;
2073
}
2074
/* inverted */
2075
.ui.secondary.inverted.menu .link.item,
2076
.ui.secondary.inverted.menu a.item {
2077
color: rgba(255, 255, 255, 0.5);
2078
}
2079
.ui.secondary.inverted.menu .link.item:hover,
2080
.ui.secondary.inverted.menu a.item:hover {
2081
color: rgba(255, 255, 255, 0.9);
2082
}
2083
.ui.secondary.inverted.menu .active.item {
2084
background-color: rgba(255, 255, 255, 0.1);
2085
}
2086
/* disable variations */
2087
.ui.secondary.item.menu > .item {
2088
margin: 0em;
2089
}
2090
.ui.secondary.attached.menu {
2091
-webkit-box-shadow: none;
2092
box-shadow: none;
2093
}
2094
/*---------------------
2095
Secondary Pointing
2096
-----------------------*/
2097
.ui.secondary.pointing.menu {
2098
border-bottom: 3px solid rgba(0, 0, 0, 0.1);
2099
}
2100
.ui.secondary.pointing.menu > .menu > .item,
2101
.ui.secondary.pointing.menu > .item {
2102
margin: 0em 0em -3px;
2103
padding: 0.6em 0.95em;
2104
border-bottom: 3px solid rgba(0, 0, 0, 0);
2105
border-radius: 0em;
2106
-webkit-transition: color 0.2s
2107
;
2108
-moz-transition: color 0.2s
2109
;
2110
transition: color 0.2s
2111
;
2112
}
2113
/* Item Types */
2114
.ui.secondary.pointing.menu .header.item {
2115
margin-bottom: -3px;
2116
background-color: transparent !important;
2117
border-right-width: 0px !important;
2118
font-weight: bold !important;
2119
color: rgba(0, 0, 0, 0.8) !important;
2120
}
2121
.ui.secondary.pointing.menu .text.item {
2122
-webkit-box-shadow: none !important;
2123
box-shadow: none !important;
2124
}
2125
.ui.secondary.pointing.menu > .menu > .item:after,
2126
.ui.secondary.pointing.menu > .item:after {
2127
display: none;
2128
}
2129
/* Hover */
2130
.ui.secondary.pointing.menu > .menu > .link.item:hover,
2131
.ui.secondary.pointing.menu > .link.item:hover,
2132
.ui.secondary.pointing.menu > .menu > a.item:hover,
2133
.ui.secondary.pointing.menu > a.item:hover {
2134
background-color: transparent;
2135
color: rgba(0, 0, 0, 0.7);
2136
}
2137
/* Down */
2138
.ui.secondary.pointing.menu > .menu > .link.item:active,
2139
.ui.secondary.pointing.menu > .link.item:active,
2140
.ui.secondary.pointing.menu > .menu > a.item:active,
2141
.ui.secondary.pointing.menu > a.item:active {
2142
background-color: transparent;
2143
border-color: rgba(0, 0, 0, 0.2);
2144
}
2145
/* Active */
2146
.ui.secondary.pointing.menu > .menu > .item.active,
2147
.ui.secondary.pointing.menu > .item.active {
2148
background-color: transparent;
2149
border-color: rgba(0, 0, 0, 0.4);
2150
-webkit-box-shadow: none;
2151
box-shadow: none;
2152
}
2153
/*---------------------
2154
Secondary Vertical
2155
-----------------------*/
2156
.ui.secondary.vertical.pointing.menu {
2157
border: none;
2158
border-right: 3px solid rgba(0, 0, 0, 0.1);
2159
}
2160
.ui.secondary.vertical.menu > .item {
2161
border: none;
2162
margin: 0em 0em 0.3em;
2163
padding: 0.6em 0.8em;
2164
border-radius: 0.1875em;
2165
}
2166
.ui.secondary.vertical.menu > .header.item {
2167
border-radius: 0em;
2168
}
2169
.ui.secondary.vertical.pointing.menu > .item {
2170
margin: 0em -3px 0em 0em;
2171
border-bottom: none;
2172
border-right: 3px solid transparent;
2173
border-radius: 0em;
2174
}
2175
/* Hover */
2176
.ui.secondary.vertical.pointing.menu > .item:hover {
2177
background-color: transparent;
2178
color: rgba(0, 0, 0, 0.7);
2179
}
2180
/* Down */
2181
.ui.secondary.vertical.pointing.menu > .item:active {
2182
background-color: transparent;
2183
border-color: rgba(0, 0, 0, 0.2);
2184
}
2185
/* Active */
2186
.ui.secondary.vertical.pointing.menu > .item.active {
2187
background-color: transparent;
2188
border-color: rgba(0, 0, 0, 0.4);
2189
color: rgba(0, 0, 0, 0.85);
2190
}
2191
/*--------------
2192
Inverted
2193
---------------*/
2194
.ui.secondary.inverted.menu {
2195
background-color: transparent;
2196
}
2197
.ui.secondary.inverted.pointing.menu {
2198
border-bottom: 3px solid rgba(255, 255, 255, 0.1);
2199
}
2200
.ui.secondary.inverted.pointing.menu > .item {
2201
color: rgba(255, 255, 255, 0.7);
2202
}
2203
.ui.secondary.inverted.pointing.menu > .header.item {
2204
color: #FFFFFF !important;
2205
}
2206
/* Hover */
2207
.ui.secondary.inverted.pointing.menu > .menu > .item:hover,
2208
.ui.secondary.inverted.pointing.menu > .item:hover {
2209
color: rgba(255, 255, 255, 0.85);
2210
}
2211
/* Down */
2212
.ui.secondary.inverted.pointing.menu > .menu > .item:active,
2213
.ui.secondary.inverted.pointing.menu > .item:active {
2214
border-color: rgba(255, 255, 255, 0.4);
2215
}
2216
/* Active */
2217
.ui.secondary.inverted.pointing.menu > .menu > .item.active,
2218
.ui.secondary.inverted.pointing.menu > .item.active {
2219
border-color: rgba(255, 255, 255, 0.8);
2220
color: #ffffff;
2221
}
2222
/*---------------------
2223
Inverted Vertical
2224
----------------------*/
2225
.ui.secondary.inverted.vertical.pointing.menu {
2226
border-right: 3px solid rgba(255, 255, 255, 0.1);
2227
border-bottom: none;
2228
}
2229
/*--------------
2230
Text Menu
2231
---------------*/
2232
.ui.text.menu {
2233
background-color: transparent;
2234
margin: 1rem -1rem;
2235
border-radius: 0px;
2236
-webkit-box-shadow: none;
2237
box-shadow: none;
2238
}
2239
.ui.text.menu > .item {
2240
opacity: 0.8;
2241
margin: 0em 1em;
2242
padding: 0em;
2243
height: auto !important;
2244
border-radius: 0px;
2245
-webkit-box-shadow: none;
2246
box-shadow: none;
2247
-webkit-transition: opacity 0.2s ease
2248
;
2249
-moz-transition: opacity 0.2s ease
2250
;
2251
transition: opacity 0.2s ease
2252
;
2253
}
2254
.ui.text.menu > .item:before {
2255
display: none !important;
2256
}
2257
.ui.text.menu .header.item {
2258
background-color: transparent;
2259
opacity: 1;
2260
color: rgba(50, 50, 50, 0.8);
2261
font-size: 0.875rem;
2262
padding: 0em;
2263
text-transform: uppercase;
2264
font-weight: bold;
2265
}
2266
/*--- fluid text ---*/
2267
.ui.text.item.menu .item {
2268
margin: 0em;
2269
}
2270
/*--- vertical text ---*/
2271
.ui.vertical.text.menu {
2272
margin: 1rem 0em;
2273
}
2274
.ui.vertical.text.menu:first-child {
2275
margin-top: 0rem;
2276
}
2277
.ui.vertical.text.menu:last-child {
2278
margin-bottom: 0rem;
2279
}
2280
.ui.vertical.text.menu .item {
2281
float: left;
2282
clear: left;
2283
margin: 0.5em 0em;
2284
}
2285
.ui.vertical.text.menu .item > i.icon {
2286
float: none;
2287
margin: 0em 0.83em 0em 0em;
2288
}
2289
.ui.vertical.text.menu .header.item {
2290
margin: 0.8em 0em;
2291
}
2292
/*--- hover ---*/
2293
.ui.text.menu .item:hover {
2294
opacity: 1;
2295
background-color: transparent;
2296
}
2297
/*--- active ---*/
2298
.ui.text.menu .active.item {
2299
background-color: transparent;
2300
padding: 0em;
2301
border: none;
2302
opacity: 1;
2303
font-weight: bold;
2304
-webkit-box-shadow: none;
2305
box-shadow: none;
2306
}
2307
/* disable variations */
2308
.ui.text.pointing.menu .active.item:after {
2309
-webkit-box-shadow: none;
2310
box-shadow: none;
2311
}
2312
.ui.text.attached.menu {
2313
-webkit-box-shadow: none;
2314
box-shadow: none;
2315
}
2316
.ui.inverted.text.menu,
2317
.ui.inverted.text.menu .item,
2318
.ui.inverted.text.menu .item:hover,
2319
.ui.inverted.text.menu .item.active {
2320
background-color: transparent;
2321
}
2322
/*--------------
2323
Icon Only
2324
---------------*/
2325
.ui.icon.menu,
2326
.ui.vertical.icon.menu {
2327
width: auto;
2328
display: inline-block;
2329
height: auto;
2330
}
2331
.ui.icon.menu > .item {
2332
height: auto;
2333
text-align: center;
2334
color: rgba(60, 60, 60, 0.7);
2335
}
2336
.ui.icon.menu > .item > .icon {
2337
display: block;
2338
float: none !important;
2339
opacity: 1;
2340
margin: 0em auto !important;
2341
}
2342
.ui.icon.menu .icon:before {
2343
opacity: 1;
2344
}
2345
/* Item Icon Only */
2346
.ui.menu .icon.item .icon {
2347
margin: 0em;
2348
}
2349
.ui.vertical.icon.menu {
2350
float: none;
2351
}
2352
/*--- inverted ---*/
2353
.ui.inverted.icon.menu .item {
2354
color: rgba(255, 255, 255, 0.8);
2355
}
2356
.ui.inverted.icon.menu .icon {
2357
color: #ffffff;
2358
}
2359
/*--------------
2360
Labeled Icon
2361
---------------*/
2362
.ui.labeled.icon.menu {
2363
text-align: center;
2364
}
2365
.ui.labeled.icon.menu > .item > .icon {
2366
display: block;
2367
font-size: 1.5em !important;
2368
margin: 0em auto 0.3em !important;
2369
}
2370
/*******************************
2371
Variations
2372
*******************************/
2373
/*--------------
2374
Colors
2375
---------------*/
2376
/*--- Light Colors ---*/
2377
.ui.menu .green.active.item,
2378
.ui.green.menu .active.item {
2379
border-color: #A1CF64 !important;
2380
color: #A1CF64 !important;
2381
}
2382
.ui.menu .red.active.item,
2383
.ui.red.menu .active.item {
2384
border-color: #D95C5C !important;
2385
color: #D95C5C !important;
2386
}
2387
.ui.menu .blue.active.item,
2388
.ui.blue.menu .active.item {
2389
border-color: #6ECFF5 !important;
2390
color: #6ECFF5 !important;
2391
}
2392
.ui.menu .purple.active.item,
2393
.ui.purple.menu .active.item {
2394
border-color: #564F8A !important;
2395
color: #564F8A !important;
2396
}
2397
.ui.menu .orange.active.item,
2398
.ui.orange.menu .active.item {
2399
border-color: #F05940 !important;
2400
color: #F05940 !important;
2401
}
2402
.ui.menu .teal.active.item,
2403
.ui.teal.menu .active.item {
2404
border-color: #00B5AD !important;
2405
color: #00B5AD !important;
2406
}
2407
/*--------------
2408
Inverted
2409
---------------*/
2410
.ui.inverted.menu {
2411
background-color: #333333;
2412
-webkit-box-shadow: none;
2413
box-shadow: none;
2414
}
2415
.ui.inverted.menu .header.item {
2416
margin: 0em;
2417
background-color: rgba(0, 0, 0, 0.3);
2418
-webkit-box-shadow: none;
2419
box-shadow: none;
2420
}
2421
.ui.inverted.menu .item,
2422
.ui.inverted.menu .item > a {
2423
color: #FFFFFF;
2424
}
2425
.ui.inverted.menu .item .item,
2426
.ui.inverted.menu .item .item > a {
2427
color: rgba(255, 255, 255, 0.8);
2428
}
2429
.ui.inverted.menu .dropdown .menu .item,
2430
.ui.inverted.menu .dropdown .menu .item a {
2431
color: rgba(0, 0, 0, 0.75) !important;
2432
}
2433
.ui.inverted.menu .item.disabled,
2434
.ui.inverted.menu .item.disabled:hover {
2435
color: rgba(255, 255, 255, 0.2);
2436
}
2437
/*--- Border ---*/
2438
.ui.inverted.menu .item:before {
2439
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
2440
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
2441
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.03)), color-stop(50%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.03)));
2442
background-image: linear-gradient(rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
2443
}
2444
.ui.vertical.inverted.menu .item:before {
2445
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
2446
background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
2447
background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.03)), color-stop(50%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.03)));
2448
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
2449
}
2450
/*--- Hover ---*/
2451
.ui.link.inverted.menu .item:hover,
2452
.ui.inverted.menu .link.item:hover,
2453
.ui.inverted.menu a.item:hover,
2454
.ui.inverted.menu .dropdown.item:hover {
2455
background-color: rgba(255, 255, 255, 0.1);
2456
}
2457
.ui.inverted.menu a.item:hover,
2458
.ui.inverted.menu .item > a:hover,
2459
.ui.inverted.menu .item .menu a.item:hover,
2460
.ui.inverted.menu .item .menu .link.item:hover {
2461
color: #ffffff;
2462
}
2463
/*--- Down ---*/
2464
.ui.inverted.menu a.item:active,
2465
.ui.inverted.menu .dropdown.item:active,
2466
.ui.inverted.menu .link.item:active,
2467
.ui.inverted.menu a.item:active {
2468
background-color: rgba(255, 255, 255, 0.15);
2469
}
2470
/*--- Active ---*/
2471
.ui.inverted.menu .active.item {
2472
-webkit-box-shadow: none !important;
2473
box-shadow: none !important;
2474
background-color: rgba(255, 255, 255, 0.2);
2475
}
2476
.ui.inverted.menu .active.item,
2477
.ui.inverted.menu .active.item a {
2478
color: #ffffff !important;
2479
}
2480
.ui.inverted.vertical.menu .item .menu .active.item {
2481
background-color: rgba(255, 255, 255, 0.2);
2482
color: #ffffff;
2483
}
2484
/*--- Pointers ---*/
2485
.ui.inverted.pointing.menu .active.item:after {
2486
background-color: #5B5B5B;
2487
-webkit-box-shadow: none;
2488
box-shadow: none;
2489
}
2490
.ui.inverted.pointing.menu .active.item:hover:after {
2491
background-color: #4A4A4A;
2492
}
2493
/*--------------
2494
Selection
2495
---------------*/
2496
.ui.selection.menu > .item {
2497
color: rgba(0, 0, 0, 0.4);
2498
}
2499
.ui.selection.menu > .item:hover {
2500
color: rgba(0, 0, 0, 0.6);
2501
}
2502
.ui.selection.menu > .item.active {
2503
color: rgba(0, 0, 0, 0.85);
2504
}
2505
.ui.inverted.selection.menu > .item {
2506
color: rgba(255, 255, 255, 0.4);
2507
}
2508
.ui.inverted.selection.menu > .item:hover {
2509
color: rgba(255, 255, 255, 0.9);
2510
}
2511
.ui.inverted.selection.menu > .item.active {
2512
color: #FFFFFF;
2513
}
2514
/*--------------
2515
Floated
2516
---------------*/
2517
.ui.floated.menu {
2518
float: left;
2519
margin: 0rem 0.5rem 0rem 0rem;
2520
}
2521
.ui.right.floated.menu {
2522
float: right;
2523
margin: 0rem 0rem 0rem 0.5rem;
2524
}
2525
/*--------------
2526
Inverted Colors
2527
---------------*/
2528
/*--- Light Colors ---*/
2529
.ui.grey.menu {
2530
background-color: #F0F0F0;
2531
}
2532
/*--- Inverted Colors ---*/
2533
.ui.inverted.green.menu {
2534
background-color: #A1CF64;
2535
}
2536
.ui.inverted.green.pointing.menu .active.item:after {
2537
background-color: #B3D782;
2538
}
2539
.ui.inverted.red.menu {
2540
background-color: #D95C5C;
2541
}
2542
.ui.inverted.red.pointing.menu .active.item:after {
2543
background-color: #DF7C7C;
2544
}
2545
.ui.inverted.blue.menu {
2546
background-color: #6ECFF5;
2547
}
2548
.ui.inverted.blue.pointing.menu .active.item:after {
2549
background-color: #8AD7F6;
2550
}
2551
.ui.inverted.purple.menu {
2552
background-color: #564F8A;
2553
}
2554
.ui.inverted.purple.pointing.menu .active.item:after {
2555
background-color: #7771A0;
2556
}
2557
.ui.inverted.orange.menu {
2558
background-color: #F05940;
2559
}
2560
.ui.inverted.orange.pointing.menu .active.item:after {
2561
background-color: #F27966;
2562
}
2563
.ui.inverted.teal.menu {
2564
background-color: #00B5AD;
2565
}
2566
.ui.inverted.teal.pointing.menu .active.item:after {
2567
background-color: #33C3BC;
2568
}
2569
/*--------------
2570
Fitted
2571
---------------*/
2572
.ui.fitted.menu .item,
2573
.ui.fitted.menu .item .menu .item,
2574
.ui.menu .fitted.item {
2575
padding: 0em;
2576
}
2577
.ui.horizontally.fitted.menu .item,
2578
.ui.horizontally.fitted.menu .item .menu .item,
2579
.ui.menu .horizontally.fitted.item {
2580
padding-top: 0.83em;
2581
padding-bottom: 0.83em;
2582
}
2583
.ui.vertically.fitted.menu .item,
2584
.ui.vertically.fitted.menu .item .menu .item,
2585
.ui.menu .vertically.fitted.item {
2586
padding-left: 0.95em;
2587
padding-right: 0.95em;
2588
}
2589
/*--------------
2590
Borderless
2591
---------------*/
2592
.ui.borderless.menu .item:before,
2593
.ui.borderless.menu .item .menu .item:before,
2594
.ui.menu .borderless.item:before {
2595
background-image: none;
2596
}
2597
/*-------------------
2598
Compact
2599
--------------------*/
2600
.ui.compact.menu {
2601
display: inline-block;
2602
margin: 0em;
2603
vertical-align: middle;
2604
}
2605
.ui.compact.vertical.menu {
2606
width: auto !important;
2607
}
2608
.ui.compact.vertical.menu .item:last-child::before {
2609
display: block;
2610
}
2611
/*-------------------
2612
Fluid
2613
--------------------*/
2614
.ui.menu.fluid,
2615
.ui.vertical.menu.fluid {
2616
display: block;
2617
width: 100% !important;
2618
}
2619
/*-------------------
2620
Evenly Sized
2621
--------------------*/
2622
.ui.item.menu,
2623
.ui.item.menu .item {
2624
width: 100%;
2625
padding-left: 0px !important;
2626
padding-right: 0px !important;
2627
text-align: center;
2628
}
2629
.ui.menu.two.item .item {
2630
width: 50%;
2631
}
2632
.ui.menu.three.item .item {
2633
width: 33.333%;
2634
}
2635
.ui.menu.four.item .item {
2636
width: 25%;
2637
}
2638
.ui.menu.five.item .item {
2639
width: 20%;
2640
}
2641
.ui.menu.six.item .item {
2642
width: 16.666%;
2643
}
2644
.ui.menu.seven.item .item {
2645
width: 14.285%;
2646
}
2647
.ui.menu.eight.item .item {
2648
width: 12.500%;
2649
}
2650
.ui.menu.nine.item .item {
2651
width: 11.11%;
2652
}
2653
.ui.menu.ten.item .item {
2654
width: 10.0%;
2655
}
2656
.ui.menu.eleven.item .item {
2657
width: 9.09%;
2658
}
2659
.ui.menu.twelve.item .item {
2660
width: 8.333%;
2661
}
2662
/*--------------
2663
Fixed
2664
---------------*/
2665
.ui.menu.fixed {
2666
position: fixed;
2667
z-index: 999;
2668
margin: 0em;
2669
border: none;
2670
width: 100%;
2671
}
2672
.ui.menu.fixed,
2673
.ui.menu.fixed .item:first-child,
2674
.ui.menu.fixed .item:last-child {
2675
border-radius: 0px !important;
2676
}
2677
.ui.menu.fixed.top {
2678
top: 0px;
2679
left: 0px;
2680
right: auto;
2681
bottom: auto;
2682
}
2683
.ui.menu.fixed.right {
2684
top: 0px;
2685
right: 0px;
2686
left: auto;
2687
bottom: auto;
2688
width: auto;
2689
height: 100%;
2690
}
2691
.ui.menu.fixed.bottom {
2692
bottom: 0px;
2693
left: 0px;
2694
top: auto;
2695
right: auto;
2696
}
2697
.ui.menu.fixed.left {
2698
top: 0px;
2699
left: 0px;
2700
right: auto;
2701
bottom: auto;
2702
width: auto;
2703
height: 100%;
2704
}
2705
/* Coupling with Grid */
2706
.ui.fixed.menu + .ui.grid {
2707
padding-top: 2.75rem;
2708
}
2709
/*-------------------
2710
Pointing
2711
--------------------*/
2712
.ui.pointing.menu .active.item:after {
2713
position: absolute;
2714
bottom: -0.3em;
2715
left: 50%;
2716
content: "";
2717
margin-left: -0.3em;
2718
width: 0.6em;
2719
height: 0.6em;
2720
border: none;
2721
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
2722
border-right: 1px solid rgba(0, 0, 0, 0.1);
2723
background-image: none;
2724
-webkit-transform: rotate(45deg);
2725
-moz-transform: rotate(45deg);
2726
-ms-transform: rotate(45deg);
2727
transform: rotate(45deg);
2728
z-index: 2;
2729
-webkit-transition: background 0.2s ease
2730
;
2731
-moz-transition: background 0.2s ease
2732
;
2733
transition: background 0.2s ease
2734
;
2735
}
2736
/* Don't double up pointers */
2737
.ui.pointing.menu .active.item .menu .active.item:after {
2738
display: none;
2739
}
2740
.ui.vertical.pointing.menu .active.item:after {
2741
position: absolute;
2742
top: 50%;
2743
margin-top: -0.3em;
2744
right: -0.4em;
2745
bottom: auto;
2746
left: auto;
2747
border: none;
2748
border-top: 1px solid rgba(0, 0, 0, 0.1);
2749
border-right: 1px solid rgba(0, 0, 0, 0.1);
2750
}
2751
/* Colors */
2752
.ui.pointing.menu .active.item:after {
2753
background-color: #FCFCFC;
2754
}
2755
.ui.pointing.menu .active.item:hover:after {
2756
background-color: #FAFAFA;
2757
}
2758
.ui.vertical.pointing.menu .menu .active.item:after {
2759
background-color: #F4F4F4;
2760
}
2761
.ui.pointing.menu a.active.item:active:after {
2762
background-color: #F0F0F0;
2763
}
2764
/*--------------
2765
Attached
2766
---------------*/
2767
.ui.menu.attached {
2768
margin: 0rem;
2769
border-radius: 0px;
2770
/* avoid rgba multiplying */
2771
-webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
2772
box-shadow: 0px 0px 0px 1px #DDDDDD;
2773
}
2774
.ui.top.attached.menu {
2775
border-radius: 0.1875em 0.1875em 0px 0px;
2776
}
2777
.ui.menu.bottom.attached {
2778
border-radius: 0px 0px 0.1875em 0.1875em;
2779
}
2780
/*--------------
2781
Sizes
2782
---------------*/
2783
.ui.small.menu .item {
2784
font-size: 0.875rem;
2785
}
2786
.ui.small.vertical.menu {
2787
width: 13rem;
2788
}
2789
.ui.menu .item {
2790
font-size: 1rem;
2791
}
2792
.ui.vertical.menu {
2793
width: 15rem;
2794
}
2795
.ui.large.menu .item {
2796
font-size: 1.125rem;
2797
}
2798
.ui.large.menu .item .item {
2799
font-size: 0.875rem;
2800
}
2801
.ui.large.menu .dropdown .item {
2802
font-size: 1rem;
2803
}
2804
.ui.large.vertical.menu {
2805
width: 18rem;
2806
}
2807
2808
/*
2809
* # Semantic - Message
2810
* http://github.com/jlukic/semantic-ui/
2811
*
2812
*
2813
* Copyright 2014 Contributors
2814
* Released under the MIT license
2815
* http://opensource.org/licenses/MIT
2816
*
2817
*/
2818
/*******************************
2819
Message
2820
*******************************/
2821
.ui.message {
2822
position: relative;
2823
min-height: 18px;
2824
margin: 1em 0em;
2825
height: auto;
2826
background-color: #EFEFEF;
2827
padding: 1em;
2828
line-height: 1.33;
2829
color: rgba(0, 0, 0, 0.6);
2830
-webkit-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;
2831
-moz-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
2832
transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
2833
-webkit-box-sizing: border-box;
2834
-moz-box-sizing: border-box;
2835
-ms-box-sizing: border-box;
2836
box-sizing: border-box;
2837
border-radius: 0.325em 0.325em 0.325em 0.325em;
2838
}
2839
.ui.message:first-child {
2840
margin-top: 0em;
2841
}
2842
.ui.message:last-child {
2843
margin-bottom: 0em;
2844
}
2845
/*--------------
2846
Content
2847
---------------*/
2848
/* block with headers */
2849
.ui.message .header {
2850
margin: 0em;
2851
font-size: 1.33em;
2852
font-weight: bold;
2853
}
2854
/* block with paragraphs */
2855
.ui.message p {
2856
opacity: 0.85;
2857
margin: 1em 0em;
2858
}
2859
.ui.message p:first-child {
2860
margin-top: 0em;
2861
}
2862
.ui.message p:last-child {
2863
margin-bottom: 0em;
2864
}
2865
.ui.message .header + p {
2866
margin-top: 0.3em;
2867
}
2868
.ui.message > :first-child {
2869
margin-top: 0em;
2870
}
2871
.ui.message > :last-child {
2872
margin-bottom: 0em;
2873
}
2874
/* block with child list */
2875
.ui.message ul.list {
2876
opacity: 0.85;
2877
list-style-position: inside;
2878
margin: 0.2em 0em;
2879
padding: 0em;
2880
}
2881
.ui.message ul.list li {
2882
position: relative;
2883
list-style-type: none;
2884
margin: 0em 0em 0.3em 1em;
2885
padding: 0em;
2886
}
2887
.ui.message ul.list li:before {
2888
position: absolute;
2889
content: '\2022';
2890
top: -0.05em;
2891
left: -0.8em;
2892
height: 100%;
2893
vertical-align: baseline;
2894
opacity: 0.5;
2895
}
2896
.ui.message ul.list li:first-child {
2897
margin-top: 0em;
2898
}
2899
/* dismissable block */
2900
.ui.message > .close.icon {
2901
cursor: pointer;
2902
position: absolute;
2903
right: 0em;
2904
top: 0em;
2905
width: 2.5em;
2906
height: 2.5em;
2907
opacity: 0.7;
2908
padding: 0.75em 0em 0em 0.75em;
2909
z-index: 2;
2910
-webkit-transition: opacity 0.1s linear
2911
;
2912
-moz-transition: opacity 0.1s linear
2913
;
2914
transition: opacity 0.1s linear
2915
;
2916
z-index: 10;
2917
}
2918
.ui.message > .close.icon:hover {
2919
opacity: 1;
2920
}
2921
/*******************************
2922
States
2923
*******************************/
2924
.ui.message.visible {
2925
display: block !important;
2926
}
2927
.ui.icon.message.animating,
2928
.ui.icon.message.visible {
2929
display: table !important;
2930
}
2931
.ui.message.hidden {
2932
display: none !important;
2933
}
2934
/*******************************
2935
Variations
2936
*******************************/
2937
/*--------------
2938
Compact
2939
---------------*/
2940
.ui.compact.message {
2941
display: inline-block;
2942
}
2943
/*--------------
2944
Attached
2945
---------------*/
2946
.ui.attached.message {
2947
margin-left: -1px;
2948
margin-right: -1px;
2949
margin-bottom: -1px;
2950
border-radius: 0.325em 0.325em 0em 0em;
2951
-webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset;
2952
box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset;
2953
}
2954
.ui.attached + .ui.attached.message:not(.top):not(.bottom) {
2955
margin-top: -1px;
2956
border-radius: 0em;
2957
}
2958
.ui.bottom.attached.message {
2959
margin-top: -1px;
2960
border-radius: 0em 0em 0.325em 0.325em;
2961
}
2962
.ui.bottom.attached.message:not(:last-child) {
2963
margin-bottom: 1em;
2964
}
2965
.ui.attached.icon.message {
2966
display: block;
2967
width: auto;
2968
}
2969
/*--------------
2970
Icon
2971
---------------*/
2972
.ui.icon.message {
2973
display: table;
2974
width: 100%;
2975
}
2976
.ui.icon.message > .icon:not(.close) {
2977
display: table-cell;
2978
vertical-align: middle;
2979
font-size: 3.8em;
2980
opacity: 0.5;
2981
}
2982
.ui.icon.message > .icon + .content {
2983
padding-left: 1em;
2984
}
2985
.ui.icon.message > .content {
2986
display: table-cell;
2987
vertical-align: middle;
2988
}
2989
/*--------------
2990
Inverted
2991
---------------*/
2992
.ui.inverted.message {
2993
background-color: rgba(255, 255, 255, 0.05);
2994
color: rgba(255, 255, 255, 0.95);
2995
}
2996
/*--------------
2997
Floating
2998
---------------*/
2999
.ui.floating.message {
3000
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset;
3001
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset;
3002
}
3003
/*--------------
3004
Colors
3005
---------------*/
3006
.ui.black.message {
3007
background-color: #333333;
3008
color: rgba(255, 255, 255, 0.95);
3009
}
3010
/*--------------
3011
Types
3012
---------------*/
3013
.ui.blue.message,
3014
.ui.info.message {
3015
background-color: #E6F4F9;
3016
color: #4D8796;
3017
}
3018
/* Green Text Block */
3019
.ui.green.message {
3020
background-color: #DEFCD5;
3021
color: #52A954;
3022
}
3023
/* Yellow Text Block */
3024
.ui.yellow.message,
3025
.ui.warning.message {
3026
background-color: #F6F3D5;
3027
color: #96904D;
3028
}
3029
/* Red Text Block */
3030
.ui.red.message {
3031
background-color: #F1D7D7;
3032
color: #A95252;
3033
}
3034
/* Success Text Block */
3035
.ui.success.message,
3036
.ui.positive.message {
3037
background-color: #DEFCD5;
3038
color: #52A954;
3039
}
3040
/* Error Text Block */
3041
.ui.error.message,
3042
.ui.negative.message {
3043
background-color: #F1D7D7;
3044
color: #A95252;
3045
}
3046
/*--------------
3047
Sizes
3048
---------------*/
3049
.ui.small.message {
3050
font-size: 0.875em;
3051
}
3052
.ui.message {
3053
font-size: 1em;
3054
}
3055
.ui.large.message {
3056
font-size: 1.125em;
3057
}
3058
.ui.huge.message {
3059
font-size: 1.5em;
3060
}
3061
.ui.massive.message {
3062
font-size: 2em;
3063
}
3064
3065
/*
3066
* # Semantic - Table
3067
* http://github.com/jlukic/semantic-ui/
3068
*
3069
*
3070
* Copyright 2014 Contributors
3071
* Released under the MIT license
3072
* http://opensource.org/licenses/MIT
3073
*
3074
*/
3075
/*******************************
3076
Table
3077
*******************************/
3078
/* Prototype */
3079
.ui.table {
3080
width: 100%;
3081
border-collapse: collapse;
3082
}
3083
/* Table Content */
3084
.ui.table th,
3085
.ui.table tr,
3086
.ui.table td {
3087
border-collapse: collapse;
3088
-webkit-box-sizing: border-box;
3089
-moz-box-sizing: border-box;
3090
-ms-box-sizing: border-box;
3091
box-sizing: border-box;
3092
-webkit-transition: all 0.1s ease-out;
3093
-moz-transition: all 0.1s ease-out;
3094
transition: all 0.1s ease-out;
3095
}
3096
/* Headers */
3097
.ui.table thead {
3098
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
3099
}
3100
.ui.table tfoot th {
3101
background-color: rgba(0, 0, 0, 0.03);
3102
}
3103
.ui.table th {
3104
cursor: auto;
3105
background-color: rgba(0, 0, 0, 0.05);
3106
text-align: left;
3107
color: rgba(0, 0, 0, 0.8);
3108
padding: 0.5em 0.7em;
3109
vertical-align: middle;
3110
}
3111
.ui.table thead th:first-child {
3112
border-radius: 5px 0px 0px 0px;
3113
}
3114
.ui.table thead th:last-child {
3115
border-radius: 0px 5px 0px 0px;
3116
}
3117
.ui.table tfoot th:first-child {
3118
border-radius: 0px 0px 0px 5px;
3119
}
3120
.ui.table tfoot th:last-child {
3121
border-radius: 0px 0px 5px 0px;
3122
}
3123
.ui.table tfoot th:only-child {
3124
border-radius: 0px 0px 5px 5px;
3125
}
3126
/* Table Cells */
3127
.ui.table td {
3128
padding: 0.40em 0.7em;
3129
vertical-align: middle;
3130
}
3131
/* Footer */
3132
.ui.table tfoot {
3133
border-top: 1px solid rgba(0, 0, 0, 0.03);
3134
}
3135
.ui.table tfoot th {
3136
font-weight: normal;
3137
font-style: italic;
3138
}
3139
/* Table Striping */
3140
.ui.table tbody tr:nth-child(2n) {
3141
background-color: rgba(0, 0, 50, 0.02);
3142
}
3143
/* Icons */
3144
.ui.table > .icon {
3145
vertical-align: baseline;
3146
}
3147
.ui.table > .icon:only-child {
3148
margin: 0em;
3149
}
3150
/* Table Segment */
3151
.ui.table.segment:after {
3152
display: none;
3153
}
3154
.ui.table.segment.stacked:after {
3155
display: block;
3156
}
3157
/* Responsive */
3158
@media only screen and (max-width: 768px) {
3159
.ui.table {
3160
display: block;
3161
padding: 0em;
3162
}
3163
.ui.table thead,
3164
.ui.table tfoot {
3165
display: none;
3166
}
3167
.ui.table tbody {
3168
display: block;
3169
}
3170
.ui.table tr {
3171
display: block;
3172
}
3173
.ui.table tr > td {
3174
width: 100% !important;
3175
display: block;
3176
border: none !important;
3177
padding: 0.25em 0.75em;
3178
-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) !important;
3179
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) !important;
3180
}
3181
.ui.table td:first-child {
3182
font-weight: bold;
3183
padding-top: 1em;
3184
}
3185
.ui.table td:last-child {
3186
-webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important;
3187
box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important;
3188
padding-bottom: 1em;
3189
}
3190
/* Clear BG Colors */
3191
.ui.table tr > td.warning,
3192
.ui.table tr > td.error,
3193
.ui.table tr > td.active,
3194
.ui.table tr > td.positive,
3195
.ui.table tr > td.negative {
3196
background-color: transparent !important;
3197
}
3198
}
3199
/*******************************
3200
States
3201
*******************************/
3202
/*--------------
3203
Hover
3204
---------------*/
3205
/* Sortable */
3206
.ui.sortable.table th.disabled:hover {
3207
cursor: auto;
3208
text-align: left;
3209
font-weight: bold;
3210
color: #333333;
3211
color: rgba(0, 0, 0, 0.8);
3212
}
3213
.ui.sortable.table thead th:hover {
3214
background-color: rgba(0, 0, 0, 0.13);
3215
color: rgba(0, 0, 0, 0.8);
3216
}
3217
/* Inverted Sortable */
3218
.ui.inverted.sortable.table thead th:hover {
3219
background-color: rgba(255, 255, 255, 0.13);
3220
color: #ffffff;
3221
}
3222
/*--------------
3223
Positive
3224
---------------*/
3225
.ui.table tr.positive,
3226
.ui.table td.positive {
3227
-webkit-box-shadow: 2px 0px 0px #119000 inset;
3228
box-shadow: 2px 0px 0px #119000 inset;
3229
}
3230
.ui.table tr.positive td,
3231
.ui.table td.positive {
3232
background-color: #F2F8F0 !important;
3233
color: #119000 !important;
3234
}
3235
.ui.celled.table tr.positive:hover td,
3236
.ui.celled.table tr:hover td.positive,
3237
.ui.table tr.positive:hover td,
3238
.ui.table td:hover.positive,
3239
.ui.table th:hover.positive {
3240
background-color: #ECF5E9 !important;
3241
color: #119000 !important;
3242
}
3243
/*--------------
3244
Negative
3245
---------------*/
3246
.ui.table tr.negative,
3247
.ui.table td.negative {
3248
-webkit-box-shadow: 2px 0px 0px #CD2929 inset;
3249
box-shadow: 2px 0px 0px #CD2929 inset;
3250
}
3251
.ui.table tr.negative td,
3252
.ui.table td.negative {
3253
background-color: #F9F4F4;
3254
color: #CD2929 !important;
3255
}
3256
.ui.celled.table tr.negative:hover td,
3257
.ui.celled.table tr:hover td.negative,
3258
.ui.table tr.negative:hover td,
3259
.ui.table td:hover.negative,
3260
.ui.table th:hover.negative {
3261
background-color: #F2E8E8;
3262
color: #CD2929;
3263
}
3264
/*--------------
3265
Error
3266
---------------*/
3267
.ui.table tr.error,
3268
.ui.table td.error {
3269
-webkit-box-shadow: 2px 0px 0px #CD2929 inset;
3270
box-shadow: 2px 0px 0px #CD2929 inset;
3271
}
3272
.ui.table tr.error td,
3273
.ui.table td.error,
3274
.ui.table th.error {
3275
background-color: #F9F4F4;
3276
color: #CD2929;
3277
}
3278
.ui.celled.table tr.error:hover td,
3279
.ui.celled.table tr:hover td.error,
3280
.ui.table tr.error:hover td,
3281
.ui.table td:hover.error,
3282
.ui.table th:hover.error {
3283
background-color: #F2E8E8;
3284
color: #CD2929;
3285
}
3286
/*--------------
3287
Warning
3288
---------------*/
3289
.ui.table tr.warning,
3290
.ui.table td.warning {
3291
-webkit-box-shadow: 2px 0px 0px #7D6C00 inset;
3292
box-shadow: 2px 0px 0px #7D6C00 inset;
3293
}
3294
.ui.table tr.warning td,
3295
.ui.table td.warning,
3296
.ui.table th.warning {
3297
background-color: #FBF6E9;
3298
color: #7D6C00;
3299
}
3300
.ui.celled.table tr.warning:hover td,
3301
.ui.celled.table tr:hover td.warning,
3302
.ui.table tr.warning:hover td,
3303
.ui.table td:hover.warning,
3304
.ui.table th:hover.warning {
3305
background-color: #F3EDDC;
3306
color: #7D6C00;
3307
}
3308
/*--------------
3309
Active
3310
---------------*/
3311
.ui.table tr.active,
3312
.ui.table td.active {
3313
-webkit-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset;
3314
box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset;
3315
}
3316
.ui.table tr.active td,
3317
.ui.table tr td.active {
3318
background-color: #E0E0E0;
3319
color: rgba(50, 50, 50, 0.9);
3320
/* border-color: rgba(0, 0, 0, 0.15) !important; */
3321
}
3322
/*--------------
3323
Disabled
3324
---------------*/
3325
.ui.table tr.disabled td,
3326
.ui.table tr td.disabled,
3327
.ui.table tr.disabled:hover td,
3328
.ui.table tr:hover td.disabled {
3329
color: rgba(150, 150, 150, 0.3);
3330
}
3331
/*******************************
3332
Variations
3333
*******************************/
3334
/*--------------
3335
Column Count
3336
---------------*/
3337
.ui.column.table {
3338
table-layout: fixed;
3339
}
3340
.ui.two.column.table td {
3341
width: 50%;
3342
}
3343
.ui.three.column.table td {
3344
width: 33.3333%;
3345
}
3346
.ui.four.column.table td {
3347
width: 25%;
3348
}
3349
.ui.five.column.table td {
3350
width: 20%;
3351
}
3352
.ui.six.column.table td {
3353
width: 16.66667%;
3354
}
3355
.ui.seven.column.table td {
3356
width: 14.2857%;
3357
}
3358
.ui.eight.column.table td {
3359
width: 12.5%;
3360
}
3361
.ui.nine.column.table td {
3362
width: 11.1111%;
3363
}
3364
.ui.ten.column.table td {
3365
width: 10%;
3366
}
3367
.ui.eleven.column.table td {
3368
width: 9.0909%;
3369
}
3370
.ui.twelve.column.table td {
3371
width: 8.3333%;
3372
}
3373
.ui.thirteen.column.table td {
3374
width: 7.6923%;
3375
}
3376
.ui.fourteen.column.table td {
3377
width: 7.1428%;
3378
}
3379
.ui.fifteen.column.table td {
3380
width: 6.6666%;
3381
}
3382
.ui.sixteen.column.table td {
3383
width: 6.25%;
3384
}
3385
/* Column Width */
3386
.ui.table th.one.wide,
3387
.ui.table td.one.wide {
3388
width: 6.25%;
3389
}
3390
.ui.table th.two.wide,
3391
.ui.table td.two.wide {
3392
width: 12.5%;
3393
}
3394
.ui.table th.three.wide,
3395
.ui.table td.three.wide {
3396
width: 18.75%;
3397
}
3398
.ui.table th.four.wide,
3399
.ui.table td.four.wide {
3400
width: 25%;
3401
}
3402
.ui.table th.five.wide,
3403
.ui.table td.five.wide {
3404
width: 31.25%;
3405
}
3406
.ui.table th.six.wide,
3407
.ui.table td.six.wide {
3408
width: 37.5%;
3409
}
3410
.ui.table th.seven.wide,
3411
.ui.table td.seven.wide {
3412
width: 43.75%;
3413
}
3414
.ui.table th.eight.wide,
3415
.ui.table td.eight.wide {
3416
width: 50%;
3417
}
3418
.ui.table th.nine.wide,
3419
.ui.table td.nine.wide {
3420
width: 56.25%;
3421
}
3422
.ui.table th.ten.wide,
3423
.ui.table td.ten.wide {
3424
width: 62.5%;
3425
}
3426
.ui.table th.eleven.wide,
3427
.ui.table td.eleven.wide {
3428
width: 68.75%;
3429
}
3430
.ui.table th.twelve.wide,
3431
.ui.table td.twelve.wide {
3432
width: 75%;
3433
}
3434
.ui.table th.thirteen.wide,
3435
.ui.table td.thirteen.wide {
3436
width: 81.25%;
3437
}
3438
.ui.table th.fourteen.wide,
3439
.ui.table td.fourteen.wide {
3440
width: 87.5%;
3441
}
3442
.ui.table th.fifteen.wide,
3443
.ui.table td.fifteen.wide {
3444
width: 93.75%;
3445
}
3446
.ui.table th.sixteen.wide,
3447
.ui.table td.sixteen.wide {
3448
width: 100%;
3449
}
3450
/*--------------
3451
Celled
3452
---------------*/
3453
.ui.celled.table {
3454
color: rgba(0, 0, 0, 0.8);
3455
}
3456
.ui.celled.table tbody tr,
3457
.ui.celled.table tfoot tr {
3458
border: none;
3459
}
3460
.ui.celled.table th,
3461
.ui.celled.table td {
3462
border: 1px solid rgba(0, 0, 0, 0.1);
3463
}
3464
/* Coupling with segment */
3465
.ui.celled.table.segment th:first-child,
3466
.ui.celled.table.segment td:first-child {
3467
border-left: none;
3468
}
3469
.ui.celled.table.segment th:last-child,
3470
.ui.celled.table.segment td:last-child {
3471
border-right: none;
3472
}
3473
/*--------------
3474
Sortable
3475
---------------*/
3476
.ui.sortable.table thead th {
3477
cursor: pointer;
3478
white-space: nowrap;
3479
}
3480
.ui.sortable.table thead th.sorted,
3481
.ui.sortable.table thead th.sorted:hover {
3482
-webkit-user-select: none;
3483
-moz-user-select: none;
3484
-ms-user-select: none;
3485
user-select: none;
3486
}
3487
.ui.sortable.table thead th:after {
3488
display: inline-block;
3489
content: '';
3490
width: 1em;
3491
opacity: 0.8;
3492
margin: 0em 0em 0em 0.5em;
3493
font-family: 'Icons';
3494
font-style: normal;
3495
font-weight: normal;
3496
text-decoration: inherit;
3497
}
3498
.ui.sortable.table thead th.ascending:after {
3499
content: '\25b4';
3500
}
3501
.ui.sortable.table thead th.descending:after {
3502
content: '\25be';
3503
}
3504
/*--------------
3505
Inverted
3506
---------------*/
3507
/* Text Color */
3508
.ui.inverted.table td {
3509
color: rgba(255, 255, 255, 0.9);
3510
}
3511
.ui.inverted.table th {
3512
background-color: rgba(0, 0, 0, 0.15);
3513
color: rgba(255, 255, 255, 0.9);
3514
}
3515
/* Stripes */
3516
.ui.inverted.table tbody tr:nth-child(2n) {
3517
background-color: rgba(255, 255, 255, 0.06);
3518
}
3519
/*--------------
3520
Definition
3521
---------------*/
3522
.ui.definition.table td:first-child {
3523
font-weight: bold;
3524
}
3525
/*--------------
3526
Collapsing
3527
---------------*/
3528
.ui.collapsing.table {
3529
width: auto;
3530
}
3531
/*--------------
3532
Basic
3533
---------------*/
3534
.ui.basic.table th {
3535
background-color: transparent;
3536
padding: 0.5em;
3537
}
3538
.ui.basic.table tbody tr {
3539
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
3540
}
3541
.ui.basic.table td {
3542
padding: 0.8em 0.5em;
3543
}
3544
.ui.basic.table tbody tr:nth-child(2n) {
3545
background-color: transparent !important;
3546
}
3547
/*--------------
3548
Padded
3549
---------------*/
3550
.ui.padded.table th,
3551
.ui.padded.table td {
3552
padding: 0.8em 1em;
3553
}
3554
.ui.compact.table th {
3555
padding: 0.3em 0.5em;
3556
}
3557
.ui.compact.table td {
3558
padding: 0.2em 0.5em;
3559
}
3560
/*--------------
3561
Sizes
3562
---------------*/
3563
/* Small */
3564
.ui.small.table {
3565
font-size: 0.875em;
3566
}
3567
/* Standard */
3568
.ui.table {
3569
font-size: 1em;
3570
}
3571
/* Large */
3572
.ui.large.table {
3573
font-size: 1.1em;
3574
}
3575
3576
/*
3577
* # Semantic - basic.Icon (Basic)
3578
* http://github.com/jlukic/semantic-ui/
3579
*
3580
*
3581
* Copyright 2014 Contributors
3582
* Released under the MIT license
3583
* http://opensource.org/licenses/MIT
3584
*
3585
*/
3586
/*******************************
3587
Basic Icon
3588
*******************************/
3589
@font-face {
3590
font-family: 'Basic Icons';
3591
src: url(../fonts/basic.icons.eot);
3592
src: url(../fonts/basic.icons.eot?#iefix) format('embedded-opentype'), url(../fonts/basic.icons.svg#basic.icons) format('svg'), url(../fonts/basic.icons.woff) format('woff'), url(../fonts/basic.icons.ttf) format('truetype');
3593
font-style: normal;
3594
font-weight: normal;
3595
font-variant: normal;
3596
text-decoration: inherit;
3597
text-transform: none;
3598
}
3599
i.basic.icon {
3600
display: inline-block;
3601
opacity: 0.75;
3602
margin: 0em 0.25em 0em 0em;
3603
width: 1.23em;
3604
height: 1em;
3605
font-family: 'Basic Icons';
3606
font-style: normal;
3607
line-height: 1;
3608
font-weight: normal;
3609
text-decoration: inherit;
3610
text-align: center;
3611
speak: none;
3612
-webkit-box-sizing: border-box;
3613
-moz-box-sizing: border-box;
3614
-ms-box-sizing: border-box;
3615
box-sizing: border-box;
3616
-webkit-font-smoothing: antialiased;
3617
-moz-font-smoothing: antialiased;
3618
font-smoothing: antialiased;
3619
}
3620
/* basic.icons available */
3621
i.basic.icon.circle.attention:before {
3622
content: '\2757';
3623
}
3624
/* '❗' */
3625
i.basic.icon.circle.help:before {
3626
content: '\e704';
3627
}
3628
/* '' */
3629
i.basic.icon.circle.info:before {
3630
content: '\e705';
3631
}
3632
/* '' */
3633
i.basic.icon.add:before {
3634
content: '\2795';
3635
}
3636
/* '➕' */
3637
i.basic.icon.chart:before {
3638
content: '📈';
3639
}
3640
/* '\1f4c8' */
3641
i.basic.icon.chart.bar:before {
3642
content: '📊';
3643
}
3644
/* '\1f4ca' */
3645
i.basic.icon.chart.pie:before {
3646
content: '\e7a2';
3647
}
3648
/* '' */
3649
i.basic.icon.resize.full:before {
3650
content: '\e744';
3651
}
3652
/* '' */
3653
i.basic.icon.resize.horizontal:before {
3654
content: '\2b0d';
3655
}
3656
/* '⬍' */
3657
i.basic.icon.resize.small:before {
3658
content: '\e746';
3659
}
3660
/* '' */
3661
i.basic.icon.resize.vertical:before {
3662
content: '\2b0c';
3663
}
3664
/* '⬌' */
3665
i.basic.icon.down:before {
3666
content: '\2193';
3667
}
3668
/* '↓' */
3669
i.basic.icon.down.triangle:before {
3670
content: '\25be';
3671
}
3672
/* '▾' */
3673
i.basic.icon.down.arrow:before {
3674
content: '\e75c';
3675
}
3676
/* '' */
3677
i.basic.icon.left:before {
3678
content: '\2190';
3679
}
3680
/* '←' */
3681
i.basic.icon.left.triangle:before {
3682
content: '\25c2';
3683
}
3684
/* '◂' */
3685
i.basic.icon.left.arrow:before {
3686
content: '\e75d';
3687
}
3688
/* '' */
3689
i.basic.icon.right:before {
3690
content: '\2192';
3691
}
3692
/* '→' */
3693
i.basic.icon.right.triangle:before {
3694
content: '\25b8';
3695
}
3696
/* '▸' */
3697
i.basic.icon.right.arrow:before {
3698
content: '\e75e';
3699
}
3700
/* '' */
3701
i.basic.icon.up:before {
3702
content: '\2191';
3703
}
3704
/* '↑' */
3705
i.basic.icon.up.triangle:before {
3706
content: '\25b4';
3707
}
3708
/* '▴' */
3709
i.basic.icon.up.arrow:before {
3710
content: '\e75f';
3711
}
3712
/* '' */
3713
i.basic.icon.folder:before {
3714
content: '\e810';
3715
}
3716
/* '' */
3717
i.basic.icon.open.folder:before {
3718
content: '📂';
3719
}
3720
/* '\1f4c2' */
3721
i.basic.icon.globe:before {
3722
content: '𝌍';
3723
}
3724
/* '\1d30d' */
3725
i.basic.icon.desk.globe:before {
3726
content: '🌐';
3727
}
3728
/* '\1f310' */
3729
i.basic.icon.star:before {
3730
content: '\e801';
3731
}
3732
/* '' */
3733
i.basic.icon.star.empty:before {
3734
content: '\e800';
3735
}
3736
/* '' */
3737
i.basic.icon.star.half:before {
3738
content: '\e701';
3739
}
3740
/* '' */
3741
i.basic.icon.lock:before {
3742
content: '🔒';
3743
}
3744
/* '\1f512' */
3745
i.basic.icon.unlock:before {
3746
content: '🔓';
3747
}
3748
/* '\1f513' */
3749
i.basic.icon.layout.grid:before {
3750
content: '\e80c';
3751
}
3752
/* '' */
3753
i.basic.icon.layout.block:before {
3754
content: '\e708';
3755
}
3756
/* '' */
3757
i.basic.icon.layout.list:before {
3758
content: '\e80b';
3759
}
3760
/* '' */
3761
i.basic.icon.heart.empty:before {
3762
content: '\2661';
3763
}
3764
/* '♡' */
3765
i.basic.icon.heart:before {
3766
content: '\2665';
3767
}
3768
/* '♥' */
3769
i.basic.icon.asterisk:before {
3770
content: '\2731';
3771
}
3772
/* '✱' */
3773
i.basic.icon.attachment:before {
3774
content: '📎';
3775
}
3776
/* '\1f4ce' */
3777
i.basic.icon.attention:before {
3778
content: '\26a0';
3779
}
3780
/* '⚠' */
3781
i.basic.icon.trophy:before {
3782
content: '🏉';
3783
}
3784
/* '\1f3c9' */
3785
i.basic.icon.barcode:before {
3786
content: '\e792';
3787
}
3788
/* '' */
3789
i.basic.icon.cart:before {
3790
content: '\e813';
3791
}
3792
/* '' */
3793
i.basic.icon.block:before {
3794
content: '🚫';
3795
}
3796
/* '\1f6ab' */
3797
i.basic.icon.book:before {
3798
content: '📖';
3799
}
3800
i.basic.icon.bookmark:before {
3801
content: '🔖';
3802
}
3803
/* '\1f516' */
3804
i.basic.icon.calendar:before {
3805
content: '📅';
3806
}
3807
/* '\1f4c5' */
3808
i.basic.icon.cancel:before {
3809
content: '\2716';
3810
}
3811
/* '✖' */
3812
i.basic.icon.close:before {
3813
content: '\e80d';
3814
}
3815
/* '' */
3816
i.basic.icon.color:before {
3817
content: '\e794';
3818
}
3819
/* '' */
3820
i.basic.icon.chat:before {
3821
content: '\e720';
3822
}
3823
/* '' */
3824
i.basic.icon.check:before {
3825
content: '\2611';
3826
}
3827
/* '☑' */
3828
i.basic.icon.time:before {
3829
content: '🕔';
3830
}
3831
/* '\1f554' */
3832
i.basic.icon.cloud:before {
3833
content: '\2601';
3834
}
3835
/* '☁' */
3836
i.basic.icon.code:before {
3837
content: '\e714';
3838
}
3839
/* '' */
3840
i.basic.icon.email:before {
3841
content: '\40';
3842
}
3843
/* '@' */
3844
i.basic.icon.settings:before {
3845
content: '\26ef';
3846
}
3847
/* '⛯' */
3848
i.basic.icon.setting:before {
3849
content: '\2699';
3850
}
3851
/* '⚙' */
3852
i.basic.icon.comment:before {
3853
content: '\e802';
3854
}
3855
/* '' */
3856
i.basic.icon.clockwise.counter:before {
3857
content: '\27f2';
3858
}
3859
/* '⟲' */
3860
i.basic.icon.clockwise:before {
3861
content: '\27f3';
3862
}
3863
/* '⟳' */
3864
i.basic.icon.cube:before {
3865
content: '\e807';
3866
}
3867
/* '' */
3868
i.basic.icon.direction:before {
3869
content: '\27a2';
3870
}
3871
/* '➢' */
3872
i.basic.icon.doc:before {
3873
content: '📄';
3874
}
3875
/* '\1f4c4' */
3876
i.basic.icon.docs:before {
3877
content: '\e736';
3878
}
3879
/* '' */
3880
i.basic.icon.dollar:before {
3881
content: '💵';
3882
}
3883
/* '\1f4b5' */
3884
i.basic.icon.paint:before {
3885
content: '\e7b5';
3886
}
3887
/* '' */
3888
i.basic.icon.edit:before {
3889
content: '\270d';
3890
}
3891
/* '✍' */
3892
i.basic.icon.eject:before {
3893
content: '\2ecf';
3894
}
3895
/* '⻏' */
3896
i.basic.icon.export:before {
3897
content: '\e715';
3898
}
3899
/* '' */
3900
i.basic.icon.hide:before {
3901
content: '\e70b';
3902
}
3903
/* '' */
3904
i.basic.icon.unhide:before {
3905
content: '\e80f';
3906
}
3907
/* '' */
3908
i.basic.icon.facebook:before {
3909
content: '\f301';
3910
}
3911
/* '' */
3912
i.basic.icon.fast-forward:before {
3913
content: '\e804';
3914
}
3915
/* '' */
3916
i.basic.icon.fire:before {
3917
content: '🔥';
3918
}
3919
/* '\1f525' */
3920
i.basic.icon.flag:before {
3921
content: '\2691';
3922
}
3923
/* '⚑' */
3924
i.basic.icon.lightning:before {
3925
content: '\26a1';
3926
}
3927
/* '⚡' */
3928
i.basic.icon.lab:before {
3929
content: '\68';
3930
}
3931
/* 'h' */
3932
i.basic.icon.flight:before {
3933
content: '\2708';
3934
}
3935
/* '✈' */
3936
i.basic.icon.forward:before {
3937
content: '\27a6';
3938
}
3939
/* '➦' */
3940
i.basic.icon.gift:before {
3941
content: '🎁';
3942
}
3943
/* '\1f381' */
3944
i.basic.icon.github:before {
3945
content: '\f308';
3946
}
3947
/* '' */
3948
i.basic.icon.globe:before {
3949
content: '\e817';
3950
}
3951
/* '' */
3952
i.basic.icon.headphones:before {
3953
content: '🎧';
3954
}
3955
/* '\1f3a7' */
3956
i.basic.icon.question:before {
3957
content: '\2753';
3958
}
3959
/* '❓' */
3960
i.basic.icon.home:before {
3961
content: '\2302';
3962
}
3963
/* '⌂' */
3964
i.basic.icon.i:before {
3965
content: '\2139';
3966
}
3967
/* 'ℹ' */
3968
i.basic.icon.idea:before {
3969
content: '💡';
3970
}
3971
/* '\1f4a1' */
3972
i.basic.icon.open:before {
3973
content: '🔗';
3974
}
3975
/* '\1f517' */
3976
i.basic.icon.content:before {
3977
content: '\e782';
3978
}
3979
/* '' */
3980
i.basic.icon.location:before {
3981
content: '\e724';
3982
}
3983
/* '' */
3984
i.basic.icon.mail:before {
3985
content: '\2709';
3986
}
3987
/* '✉' */
3988
i.basic.icon.mic:before {
3989
content: '🎤';
3990
}
3991
/* '\1f3a4' */
3992
i.basic.icon.minus:before {
3993
content: '\2d';
3994
}
3995
/* '-' */
3996
i.basic.icon.money:before {
3997
content: '💰';
3998
}
3999
/* '\1f4b0' */
4000
i.basic.icon.off:before {
4001
content: '\e78e';
4002
}
4003
/* '' */
4004
i.basic.icon.pause:before {
4005
content: '\e808';
4006
}
4007
/* '' */
4008
i.basic.icon.photos:before {
4009
content: '\e812';
4010
}
4011
/* '' */
4012
i.basic.icon.photo:before {
4013
content: '🌄';
4014
}
4015
/* '\1f304' */
4016
i.basic.icon.pin:before {
4017
content: '📌';
4018
}
4019
/* '\1f4cc' */
4020
i.basic.icon.play:before {
4021
content: '\e809';
4022
}
4023
/* '' */
4024
i.basic.icon.plus:before {
4025
content: '\2b';
4026
}
4027
/* '+' */
4028
i.basic.icon.print:before {
4029
content: '\e716';
4030
}
4031
/* '' */
4032
i.basic.icon.rss:before {
4033
content: '\e73a';
4034
}
4035
/* '' */
4036
i.basic.icon.search:before {
4037
content: '🔍';
4038
}
4039
/* '\1f50d' */
4040
i.basic.icon.shuffle:before {
4041
content: '\e803';
4042
}
4043
/* '' */
4044
i.basic.icon.tag:before {
4045
content: '\e80a';
4046
}
4047
/* '' */
4048
i.basic.icon.tags:before {
4049
content: '\e70d';
4050
}
4051
/* '' */
4052
i.basic.icon.terminal:before {
4053
content: '\e7ac';
4054
}
4055
/* '' */
4056
i.basic.icon.thumbs.down:before {
4057
content: '👎';
4058
}
4059
/* '\1f44e' */
4060
i.basic.icon.thumbs.up:before {
4061
content: '👍';
4062
}
4063
/* '\1f44d' */
4064
i.basic.icon.to-end:before {
4065
content: '\e806';
4066
}
4067
/* '' */
4068
i.basic.icon.to-start:before {
4069
content: '\e805';
4070
}
4071
/* '' */
4072
i.basic.icon.top.list:before {
4073
content: '🏆';
4074
}
4075
/* '\1f3c6' */
4076
i.basic.icon.trash:before {
4077
content: '\e729';
4078
}
4079
/* '' */
4080
i.basic.icon.twitter:before {
4081
content: '\f303';
4082
}
4083
/* '' */
4084
i.basic.icon.upload:before {
4085
content: '\e711';
4086
}
4087
/* '' */
4088
i.basic.icon.user.add:before {
4089
content: '\e700';
4090
}
4091
/* '' */
4092
i.basic.icon.user:before {
4093
content: '👤';
4094
}
4095
/* '\1f464' */
4096
i.basic.icon.community:before {
4097
content: '\e814';
4098
}
4099
/* '' */
4100
i.basic.icon.users:before {
4101
content: '👥';
4102
}
4103
/* '\1f465' */
4104
i.basic.icon.id:before {
4105
content: '\e722';
4106
}
4107
/* '' */
4108
i.basic.icon.url:before {
4109
content: '🔗';
4110
}
4111
/* '\1f517' */
4112
i.basic.icon.zoom.in:before {
4113
content: '\e750';
4114
}
4115
/* '' */
4116
i.basic.icon.zoom.out:before {
4117
content: '\e751';
4118
}
4119
/* '' */
4120
/*--------------
4121
Spacing Fix
4122
---------------*/
4123
/* dropdown arrows are to the right */
4124
i.dropdown.basic.icon {
4125
margin: 0em 0em 0em 0.5em;
4126
}
4127
/* stars are usually consecutive */
4128
i.basic.icon.star {
4129
width: auto;
4130
margin: 0em;
4131
}
4132
/* left side basic.icons */
4133
i.basic.icon.left,
4134
i.basic.icon.left,
4135
i.basic.icon.left {
4136
width: auto;
4137
margin: 0em 0.5em 0em 0em;
4138
}
4139
/* right side basic.icons */
4140
i.basic.icon.search,
4141
i.basic.icon.up,
4142
i.basic.icon.down,
4143
i.basic.icon.right {
4144
width: auto;
4145
margin: 0em 0em 0em 0.5em;
4146
}
4147
/*--------------
4148
Aliases
4149
---------------*/
4150
/* aliases for convenience */
4151
i.basic.icon.delete:before {
4152
content: '\e80d';
4153
}
4154
/* '' */
4155
i.basic.icon.dropdown:before {
4156
content: '\25be';
4157
}
4158
/* '▾' */
4159
i.basic.icon.help:before {
4160
content: '\e704';
4161
}
4162
/* '' */
4163
i.basic.icon.info:before {
4164
content: '\e705';
4165
}
4166
/* '' */
4167
i.basic.icon.error:before {
4168
content: '\e80d';
4169
}
4170
/* '' */
4171
i.basic.icon.dislike:before {
4172
content: '\2661';
4173
}
4174
/* '♡' */
4175
i.basic.icon.like:before {
4176
content: '\2665';
4177
}
4178
/* '♥' */
4179
i.basic.icon.eye:before {
4180
content: '\e80f';
4181
}
4182
/* '' */
4183
i.basic.icon.eye.hidden:before {
4184
content: '\e70b';
4185
}
4186
/* '' */
4187
i.basic.icon.date:before {
4188
content: '📅';
4189
}
4190
/* '\1f4c5' */
4191
/*******************************
4192
States
4193
*******************************/
4194
i.basic.icon.hover {
4195
opacity: 1;
4196
}
4197
i.basic.icon.active {
4198
opacity: 1;
4199
}
4200
i.emphasized.basic.icon {
4201
opacity: 1;
4202
}
4203
i.basic.icon.disabled {
4204
opacity: 0.3;
4205
}
4206
/*******************************
4207
Variations
4208
*******************************/
4209
/*-------------------
4210
Link
4211
--------------------*/
4212
i.link.basic.icon {
4213
cursor: pointer;
4214
opacity: 0.7;
4215
-webkit-transition: opacity 0.3s ease-out;
4216
-moz-transition: opacity 0.3s ease-out;
4217
transition: opacity 0.3s ease-out;
4218
}
4219
.link.basic.icon:hover {
4220
opacity: 1 !important;
4221
}
4222
/*-------------------
4223
Circular
4224
--------------------*/
4225
i.circular.basic.icon {
4226
border-radius: 500px !important;
4227
padding: 0.5em 0em !important;
4228
-webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
4229
box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
4230
line-height: 1 !important;
4231
width: 2em !important;
4232
height: 2em !important;
4233
}
4234
i.circular.inverted.basic.icon {
4235
border: none;
4236
-webkit-box-shadow: none;
4237
box-shadow: none;
4238
}
4239
/*-------------------
4240
Flipped
4241
--------------------*/
4242
i.vertically.flipped.basic.icon {
4243
-webkit-transform: scale(1, -1);
4244
-moz-transform: scale(1, -1);
4245
-ms-transform: scale(1, -1);
4246
transform: scale(1, -1);
4247
}
4248
i.horizontally.flipped.basic.icon {
4249
-webkit-transform: scale(-1, 1);
4250
-moz-transform: scale(-1, 1);
4251
-ms-transform: scale(-1, 1);
4252
transform: scale(-1, 1);
4253
}
4254
/*-------------------
4255
Rotated
4256
--------------------*/
4257
i.left.rotated.basic.icon {
4258
-webkit-transform: rotate(-90deg);
4259
-moz-transform: rotate(-90deg);
4260
-ms-transform: rotate(-90deg);
4261
transform: rotate(-90deg);
4262
}
4263
i.right.rotated.basic.icon {
4264
-webkit-transform: rotate(90deg);
4265
-moz-transform: rotate(90deg);
4266
-ms-transform: rotate(90deg);
4267
transform: rotate(90deg);
4268
}
4269
/*-------------------
4270
Square
4271
--------------------*/
4272
i.square.basic.icon {
4273
width: 2em;
4274
height: 2em;
4275
padding: 0.5em 0.35em !important;
4276
-webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
4277
box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
4278
vertical-align: baseline;
4279
}
4280
i.square.basic.icon:before {
4281
vertical-align: middle;
4282
}
4283
i.square.inverted.basic.icon {
4284
border: none;
4285
-webkit-box-shadow: none;
4286
box-shadow: none;
4287
}
4288
/*-------------------
4289
Inverted
4290
--------------------*/
4291
i.inverted.basic.icon {
4292
background-color: #222222;
4293
color: #FFFFFF;
4294
}
4295
/*-------------------
4296
Colors
4297
--------------------*/
4298
i.blue.basic.icon {
4299
color: #6ECFF5 !important;
4300
}
4301
i.black.basic.icon {
4302
color: #5C6166 !important;
4303
}
4304
i.green.basic.icon {
4305
color: #A1CF64 !important;
4306
}
4307
i.red.basic.icon {
4308
color: #D95C5C !important;
4309
}
4310
i.purple.basic.icon {
4311
color: #564F8A !important;
4312
}
4313
i.teal.basic.icon {
4314
color: #00B5AD !important;
4315
}
4316
/*-------------------
4317
Inverted Colors
4318
--------------------*/
4319
i.inverted.black.basic.icon {
4320
background-color: #5C6166 !important;
4321
color: #FFFFFF !important;
4322
}
4323
i.inverted.blue.basic.icon {
4324
background-color: #6ECFF5 !important;
4325
color: #FFFFFF !important;
4326
}
4327
i.inverted.green.basic.icon {
4328
background-color: #A1CF64 !important;
4329
color: #FFFFFF !important;
4330
}
4331
i.inverted.red.basic.icon {
4332
background-color: #D95C5C !important;
4333
color: #FFFFFF !important;
4334
}
4335
i.inverted.purple.basic.icon {
4336
background-color: #564F8A !important;
4337
color: #FFFFFF !important;
4338
}
4339
i.inverted.teal.basic.icon {
4340
background-color: #00B5AD !important;
4341
color: #FFFFFF !important;
4342
}
4343
/*-------------------
4344
Sizes
4345
--------------------*/
4346
i.small.basic.icon {
4347
font-size: 0.875em;
4348
}
4349
i.basic.icon {
4350
font-size: 1em;
4351
}
4352
i.large.basic.icon {
4353
font-size: 1.5em;
4354
margin-right: 0.2em;
4355
vertical-align: middle;
4356
}
4357
i.big.basic.icon {
4358
font-size: 2em;
4359
margin-right: 0.5em;
4360
vertical-align: middle;
4361
}
4362
i.huge.basic.icon {
4363
font-size: 4em;
4364
margin-right: 0.75em;
4365
vertical-align: middle;
4366
}
4367
i.massive.basic.icon {
4368
font-size: 8em;
4369
margin-right: 1em;
4370
vertical-align: middle;
4371
}
4372
4373
/*
4374
* # Semantic - Button
4375
* http://github.com/jlukic/semantic-ui/
4376
*
4377
*
4378
* Copyright 2014 Contributors
4379
* Released under the MIT license
4380
* http://opensource.org/licenses/MIT
4381
*
4382
*/
4383
/*******************************
4384
Button
4385
*******************************/
4386
/* Prototype */
4387
.ui.button {
4388
cursor: pointer;
4389
display: inline-block;
4390
vertical-align: middle;
4391
min-height: 1em;
4392
outline: none;
4393
border: none;
4394
background-color: #FAFAFA;
4395
color: #808080;
4396
margin: 0em;
4397
padding: 0.8em 1.5em;
4398
font-size: 1rem;
4399
text-transform: uppercase;
4400
line-height: 1;
4401
font-weight: bold;
4402
font-style: normal;
4403
text-align: center;
4404
text-decoration: none;
4405
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.05)));
4406
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
4407
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
4408
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
4409
border-radius: 0.25em;
4410
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset;
4411
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset;
4412
-webkit-user-select: none;
4413
-moz-user-select: none;
4414
-ms-user-select: none;
4415
user-select: none;
4416
-webkit-box-sizing: border-box;
4417
-moz-box-sizing: border-box;
4418
-ms-box-sizing: border-box;
4419
box-sizing: border-box;
4420
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
4421
-webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, -webkit-box-shadow 0.25s ease;
4422
-moz-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
4423
transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
4424
}
4425
/*******************************
4426
States
4427
*******************************/
4428
/*--------------
4429
Active
4430
---------------*/
4431
.ui.buttons .active.button,
4432
.ui.active.button {
4433
background-color: #EAEAEA;
4434
background-image: none;
4435
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
4436
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
4437
color: rgba(0, 0, 0, 0.7);
4438
}
4439
/*--------------
4440
Hover
4441
---------------*/
4442
.ui.button:hover {
4443
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.08)));
4444
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
4445
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
4446
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
4447
color: rgba(0, 0, 0, 0.7);
4448
}
4449
.ui.button.active:hover {
4450
background-image: none;
4451
}
4452
.ui.button:hover .icon,
4453
.ui.button.hover .icon {
4454
opacity: 0.85;
4455
}
4456
/*--------------
4457
Down
4458
---------------*/
4459
.ui.button:active,
4460
.ui.active.button:active {
4461
background-color: #F1F1F1;
4462
color: rgba(0, 0, 0, 0.7);
4463
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
4464
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
4465
}
4466
/*--------------
4467
Loading
4468
---------------*/
4469
.ui.loading.button {
4470
position: relative;
4471
cursor: default;
4472
background-color: #FFFFFF !important;
4473
color: transparent !important;
4474
-webkit-transition: all 0s linear;
4475
-moz-transition: all 0s linear;
4476
transition: all 0s linear;
4477
}
4478
.ui.loading.button:after {
4479
position: absolute;
4480
top: 0em;
4481
left: 0em;
4482
width: 100%;
4483
height: 100%;
4484
content: '';
4485
background: transparent url(../images/loader-mini.gif) no-repeat 50% 50%;
4486
}
4487
.ui.labeled.icon.loading.button .icon {
4488
background-color: transparent;
4489
-webkit-box-shadow: none;
4490
box-shadow: none;
4491
}
4492
/*-------------------
4493
Disabled
4494
--------------------*/
4495
.ui.disabled.button,
4496
.ui.disabled.button:hover,
4497
.ui.disabled.button.active {
4498
background-color: #DDDDDD !important;
4499
cursor: default;
4500
color: rgba(0, 0, 0, 0.5) !important;
4501
opacity: 0.3 !important;
4502
background-image: none !important;
4503
-webkit-box-shadow: none !important;
4504
box-shadow: none !important;
4505
}
4506
/*******************************
4507
Types
4508
*******************************/
4509
/*-------------------
4510
Animated
4511
--------------------*/
4512
.ui.animated.button {
4513
position: relative;
4514
overflow: hidden;
4515
}
4516
.ui.animated.button .visible.content {
4517
position: relative;
4518
}
4519
.ui.animated.button .hidden.content {
4520
position: absolute;
4521
width: 100%;
4522
}
4523
/* Horizontal */
4524
.ui.animated.button .visible.content,
4525
.ui.animated.button .hidden.content {
4526
-webkit-transition: right 0.3s ease 0s;
4527
-moz-transition: right 0.3s ease 0s;
4528
transition: right 0.3s ease 0s;
4529
}
4530
.ui.animated.button .visible.content {
4531
left: auto;
4532
right: 0%;
4533
}
4534
.ui.animated.button .hidden.content {
4535
top: 50%;
4536
left: auto;
4537
right: -100%;
4538
margin-top: -0.55em;
4539
}
4540
.ui.animated.button:hover .visible.content {
4541
left: auto;
4542
right: 200%;
4543
}
4544
.ui.animated.button:hover .hidden.content {
4545
left: auto;
4546
right: 0%;
4547
}
4548
/* Vertical */
4549
.ui.vertical.animated.button .visible.content,
4550
.ui.vertical.animated.button .hidden.content {
4551
-webkit-transition: top 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
4552
-moz-transition: top 0.3s ease 0s, -moz-transform 0.3s ease 0s;
4553
transition: top 0.3s ease 0s, transform 0.3s ease 0s;
4554
}
4555
.ui.vertical.animated.button .visible.content {
4556
-webkit-transform: translateY(0%);
4557
-moz-transform: translateY(0%);
4558
-ms-transform: translateY(0%);
4559
transform: translateY(0%);
4560
right: auto;
4561
}
4562
.ui.vertical.animated.button .hidden.content {
4563
top: -100%;
4564
left: 0%;
4565
right: auto;
4566
}
4567
.ui.vertical.animated.button:hover .visible.content {
4568
-webkit-transform: translateY(200%);
4569
-moz-transform: translateY(200%);
4570
-ms-transform: translateY(200%);
4571
transform: translateY(200%);
4572
right: auto;
4573
}
4574
.ui.vertical.animated.button:hover .hidden.content {
4575
top: 50%;
4576
right: auto;
4577
}
4578
/* Fade */
4579
.ui.fade.animated.button .visible.content,
4580
.ui.fade.animated.button .hidden.content {
4581
-webkit-transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
4582
-moz-transition: opacity 0.3s ease 0s, -moz-transform 0.3s ease 0s;
4583
transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;
4584
}
4585
.ui.fade.animated.button .visible.content {
4586
left: auto;
4587
right: auto;
4588
opacity: 1;
4589
-webkit-transform: scale(1);
4590
-moz-transform: scale(1);
4591
-ms-transform: scale(1);
4592
transform: scale(1);
4593
}
4594
.ui.fade.animated.button .hidden.content {
4595
opacity: 0;
4596
left: 0%;
4597
right: auto;
4598
-webkit-transform: scale(1.2);
4599
-moz-transform: scale(1.2);
4600
-ms-transform: scale(1.2);
4601
transform: scale(1.2);
4602
}
4603
.ui.fade.animated.button:hover .visible.content {
4604
left: auto;
4605
right: auto;
4606
opacity: 0;
4607
-webkit-transform: scale(0.7);
4608
-moz-transform: scale(0.7);
4609
-ms-transform: scale(0.7);
4610
transform: scale(0.7);
4611
}
4612
.ui.fade.animated.button:hover .hidden.content {
4613
left: 0%;
4614
right: auto;
4615
opacity: 1;
4616
-webkit-transform: scale(1);
4617
-moz-transform: scale(1);
4618
-ms-transform: scale(1);
4619
transform: scale(1);
4620
}
4621
/*-------------------
4622
Primary
4623
--------------------*/
4624
.ui.primary.buttons .button,
4625
.ui.primary.button {
4626
background-color: #D95C5C;
4627
color: #FFFFFF;
4628
}
4629
.ui.primary.buttons .button:hover,
4630
.ui.primary.button:hover,
4631
.ui.primary.buttons .active.button,
4632
.ui.primary.button.active {
4633
background-color: #E75859;
4634
color: #FFFFFF;
4635
}
4636
.ui.primary.buttons .button:active,
4637
.ui.primary.button:active {
4638
background-color: #D24B4C;
4639
color: #FFFFFF;
4640
}
4641
/*-------------------
4642
Secondary
4643
--------------------*/
4644
.ui.secondary.buttons .button,
4645
.ui.secondary.button {
4646
background-color: #00B5AD;
4647
color: #FFFFFF;
4648
}
4649
.ui.secondary.buttons .button:hover,
4650
.ui.secondary.button:hover,
4651
.ui.secondary.buttons .active.button,
4652
.ui.secondary.button.active {
4653
background-color: #009A93;
4654
color: #FFFFFF;
4655
}
4656
.ui.secondary.buttons .button:active,
4657
.ui.secondary.button:active {
4658
background-color: #00847E;
4659
color: #FFFFFF;
4660
}
4661
/*-------------------
4662
Social
4663
--------------------*/
4664
/* Facebook */
4665
.ui.facebook.button {
4666
background-color: #3B579D;
4667
color: #FFFFFF;
4668
}
4669
.ui.facebook.button:hover {
4670
background-color: #3A59A9;
4671
color: #FFFFFF;
4672
}
4673
.ui.facebook.button:active {
4674
background-color: #334F95;
4675
color: #FFFFFF;
4676
}
4677
/* Twitter */
4678
.ui.twitter.button {
4679
background-color: #4092CC;
4680
color: #FFFFFF;
4681
}
4682
.ui.twitter.button:hover {
4683
background-color: #399ADE;
4684
color: #FFFFFF;
4685
}
4686
.ui.twitter.button:active {
4687
background-color: #3283BC;
4688
color: #FFFFFF;
4689
}
4690
/* Google Plus */
4691
.ui.google.plus.button {
4692
background-color: #D34836;
4693
color: #FFFFFF;
4694
}
4695
.ui.google.plus.button:hover {
4696
background-color: #E3432E;
4697
color: #FFFFFF;
4698
}
4699
.ui.google.plus.button:active {
4700
background-color: #CA3A27;
4701
color: #FFFFFF;
4702
}
4703
/* Linked In */
4704
.ui.linkedin.button {
4705
background-color: #1F88BE;
4706
color: #FFFFFF;
4707
}
4708
.ui.linkedin.button:hover {
4709
background-color: #1394D6;
4710
color: #FFFFFF;
4711
}
4712
.ui.linkedin.button:active {
4713
background-color: #1179AE;
4714
color: #FFFFFF;
4715
}
4716
/* YouTube */
4717
.ui.youtube.button {
4718
background-color: #CC181E;
4719
color: #FFFFFF;
4720
}
4721
.ui.youtube.button:hover {
4722
background-color: #DF0209;
4723
color: #FFFFFF;
4724
}
4725
.ui.youtube.button:active {
4726
background-color: #A50006;
4727
color: #FFFFFF;
4728
}
4729
/* Instagram */
4730
.ui.instagram.button {
4731
background-color: #49769C;
4732
color: #FFFFFF;
4733
}
4734
.ui.instagram.button:hover {
4735
background-color: #4781B1;
4736
color: #FFFFFF;
4737
}
4738
.ui.instagram.button:active {
4739
background-color: #38658A;
4740
color: #FFFFFF;
4741
}
4742
/* Pinterest */
4743
.ui.pinterest.button {
4744
background-color: #00ACED;
4745
color: #FFFFFF;
4746
}
4747
.ui.pinterest.button:hover {
4748
background-color: #00B9FF;
4749
color: #FFFFFF;
4750
}
4751
.ui.pinterest.button:active {
4752
background-color: #009EDA;
4753
color: #FFFFFF;
4754
}
4755
/* vk.com */
4756
.ui.vk.button {
4757
background-color: #4D7198;
4758
color: #FFFFFF;
4759
}
4760
.ui.vk.button:hover {
4761
background-color: #537AA5;
4762
color: #FFFFFF;
4763
}
4764
.ui.vk.button:active {
4765
background-color: #405E7E;
4766
color: #FFFFFF;
4767
}
4768
/*--------------
4769
Icon
4770
---------------*/
4771
.ui.button > .icon {
4772
margin-right: 0.6em;
4773
line-height: 1;
4774
-webkit-transition: opacity 0.1s ease
4775
;
4776
-moz-transition: opacity 0.1s ease
4777
;
4778
transition: opacity 0.1s ease
4779
;
4780
}
4781
/*******************************
4782
Variations
4783
*******************************/
4784
/*-------------------
4785
Floated
4786
--------------------*/
4787
.ui.left.floated.buttons,
4788
.ui.left.floated.button {
4789
float: left;
4790
margin-right: 0.25em;
4791
}
4792
.ui.right.floated.buttons,
4793
.ui.right.floated.button {
4794
float: right;
4795
margin-left: 0.25em;
4796
}
4797
/*-------------------
4798
Sizes
4799
--------------------*/
4800
.ui.buttons .button,
4801
.ui.button {
4802
font-size: 1rem;
4803
}
4804
.ui.mini.buttons .button,
4805
.ui.mini.buttons .or,
4806
.ui.mini.button {
4807
font-size: 0.8rem;
4808
}
4809
.ui.mini.buttons .button,
4810
.ui.mini.button {
4811
padding: 0.6em 0.8em;
4812
}
4813
.ui.mini.icon.buttons .button,
4814
.ui.mini.buttons .icon.button {
4815
padding: 0.6em 0.6em;
4816
}
4817
.ui.tiny.buttons .button,
4818
.ui.tiny.buttons .or,
4819
.ui.tiny.button {
4820
font-size: 0.875em;
4821
}
4822
.ui.tiny.buttons .button,
4823
.ui.tiny.buttons .button,
4824
.ui.tiny.button {
4825
padding: 0.6em 0.8em;
4826
}
4827
.ui.tiny.icon.buttons .button,
4828
.ui.tiny.buttons .icon.button {
4829
padding: 0.6em 0.6em;
4830
}
4831
.ui.small.buttons .button,
4832
.ui.small.buttons .or,
4833
.ui.small.button {
4834
font-size: 0.875rem;
4835
}
4836
.ui.large.buttons .button,
4837
.ui.large.buttons .or,
4838
.ui.large.button {
4839
font-size: 1.125rem;
4840
}
4841
.ui.big.buttons .button,
4842
.ui.big.buttons .or,
4843
.ui.big.button {
4844
font-size: 1.25rem;
4845
}
4846
.ui.huge.buttons .button,
4847
.ui.huge.buttons .or,
4848
.ui.huge.button {
4849
font-size: 1.375rem;
4850
}
4851
.ui.massive.buttons .button,
4852
.ui.massive.buttons .or,
4853
.ui.massive.button {
4854
font-size: 1.5rem;
4855
font-weight: bold;
4856
}
4857
/* Or resize */
4858
.ui.tiny.buttons .or:before,
4859
.ui.mini.buttons .or:before {
4860
width: 1.45em;
4861
height: 1.55em;
4862
line-height: 1.4;
4863
margin-left: -0.725em;
4864
margin-top: -0.25em;
4865
}
4866
.ui.tiny.buttons .or:after,
4867
.ui.mini.buttons .or:after {
4868
height: 1.45em;
4869
}
4870
/* loading */
4871
.ui.huge.loading.button:after {
4872
background-image: url(../images/loader-small.gif);
4873
}
4874
.ui.massive.buttons .loading.button:after,
4875
.ui.gigantic.buttons .loading.button:after,
4876
.ui.massive.loading.button:after,
4877
.ui.gigantic.loading.button:after {
4878
background-image: url(../images/loader-medium.gif);
4879
}
4880
.ui.huge.loading.button:after,
4881
.ui.huge.loading.button.active:after {
4882
background-image: url(../images/loader-small.gif);
4883
}
4884
.ui.massive.buttons .loading.button:after,
4885
.ui.gigantic.buttons .loading.button:after,
4886
.ui.massive.loading.button:after,
4887
.ui.gigantic.loading.button:after,
4888
.ui.massive.buttons .loading.button.active:after,
4889
.ui.gigantic.buttons .loading.button.active:after,
4890
.ui.massive.loading.button.active:after,
4891
.ui.gigantic.loading.button.active:after {
4892
background-image: url(../images/loader-medium.gif);
4893
}
4894
/*--------------
4895
Icon Only
4896
---------------*/
4897
.ui.icon.buttons .button,
4898
.ui.icon.button {
4899
padding: 0.8em;
4900
}
4901
.ui.icon.buttons .button > .icon,
4902
.ui.icon.button > .icon {
4903
opacity: 0.9;
4904
margin: 0em;
4905
vertical-align: top;
4906
}
4907
/*-------------------
4908
Basic
4909
--------------------*/
4910
.ui.basic.buttons .button,
4911
.ui.basic.button {
4912
background-color: transparent !important;
4913
background-image: none;
4914
color: #808080 !important;
4915
font-weight: normal;
4916
text-transform: none;
4917
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
4918
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
4919
}
4920
.ui.basic.buttons {
4921
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
4922
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
4923
border-radius: 0.25em;
4924
}
4925
.ui.basic.buttons .button:hover,
4926
.ui.basic.button:hover {
4927
background-image: none;
4928
color: #7F7F7F !important;
4929
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset;
4930
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset;
4931
}
4932
.ui.basic.buttons .button:active,
4933
.ui.basic.button:active {
4934
background-color: rgba(0, 0, 0, 0.02) !important;
4935
color: #7F7F7F !important;
4936
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
4937
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
4938
}
4939
.ui.basic.buttons .button.active,
4940
.ui.basic.button.active {
4941
background-color: rgba(0, 0, 0, 0.05);
4942
color: #7F7F7F;
4943
-webkit-box-shadow: 0px 0px 0px 1px #BDBDBD inset;
4944
box-shadow: 0px 0px 0px 1px #BDBDBD inset;
4945
}
4946
.ui.basic.buttons .button.active:hover,
4947
.ui.basic.button.active:hover {
4948
background-color: rgba(0, 0, 0, 0.1);
4949
}
4950
/* Inverted */
4951
.ui.basic.inverted.buttons .button,
4952
.ui.basic.inverted.button {
4953
color: #FAFAFA !important;
4954
-webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
4955
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
4956
}
4957
.ui.basic.inverted.buttons .button:hover,
4958
.ui.basic.inverted.button:hover {
4959
background-image: none;
4960
color: #FFFFFF !important;
4961
-webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
4962
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
4963
}
4964
.ui.basic.inverted.buttons .button:active,
4965
.ui.basic.inverted.button:active {
4966
background-color: rgba(255, 255, 255, 0.05) !important;
4967
color: #FFFFFF !important;
4968
-webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.8) inset !important;
4969
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.8) inset !important;
4970
}
4971
.ui.basic.inverted.buttons .button.active,
4972
.ui.basic.inverted.button.active {
4973
background-color: rgba(255, 255, 255, 0.5);
4974
color: #FFFFFF;
4975
-webkit-box-shadow: none;
4976
box-shadow: none;
4977
}
4978
.ui.basic.inverted.buttons .button.active:hover,
4979
.ui.basic.inverted.button.active:hover {
4980
background-color: rgba(0, 0, 0, 0.1);
4981
}
4982
/* Basic Group */
4983
.ui.basic.buttons .button {
4984
border-left: 1px solid rgba(0, 0, 0, 0.1);
4985
-webkit-box-shadow: none;
4986
box-shadow: none;
4987
}
4988
.ui.basic.buttons .button:hover,
4989
.ui.basic.buttons .button:active {
4990
-webkit-box-shadow: none;
4991
box-shadow: none;
4992
}
4993
.ui.basic.buttons .button.active,
4994
.ui.basic.buttons .button.active:hover {
4995
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
4996
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
4997
}
4998
/*--------------
4999
Labeled Icon
5000
---------------*/
5001
.ui.labeled.icon.buttons .button,
5002
.ui.labeled.icon.button {
5003
position: relative;
5004
padding-left: 4em !important;
5005
padding-right: 1.4em !important;
5006
}
5007
.ui.labeled.icon.buttons > .button > .icon,
5008
.ui.labeled.icon.button > .icon {
5009
position: absolute;
5010
top: 0em;
5011
left: 0em;
5012
-webkit-box-sizing: border-box;
5013
-moz-box-sizing: border-box;
5014
-ms-box-sizing: border-box;
5015
box-sizing: border-box;
5016
width: 2.75em;
5017
height: 100%;
5018
padding-top: 0.8em;
5019
background-color: rgba(0, 0, 0, 0.05);
5020
text-align: center;
5021
border-radius: 0.25em 0px 0px 0.25em;
5022
line-height: 1;
5023
-webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
5024
box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
5025
}
5026
.ui.labeled.icon.buttons .button > .icon {
5027
border-radius: 0em;
5028
}
5029
.ui.labeled.icon.buttons .button:first-child > .icon {
5030
border-top-left-radius: 0.25em;
5031
border-bottom-left-radius: 0.25em;
5032
}
5033
.ui.labeled.icon.buttons .button:last-child > .icon {
5034
border-top-right-radius: 0.25em;
5035
border-bottom-right-radius: 0.25em;
5036
}
5037
.ui.vertical.labeled.icon.buttons .button:first-child > .icon {
5038
border-radius: 0em;
5039
border-top-left-radius: 0.25em;
5040
}
5041
.ui.vertical.labeled.icon.buttons .button:last-child > .icon {
5042
border-radius: 0em;
5043
border-bottom-left-radius: 0.25em;
5044
}
5045
.ui.right.labeled.icon.button {
5046
padding-left: 1.4em !important;
5047
padding-right: 4em !important;
5048
}
5049
.ui.left.fluid.labeled.icon.button,
5050
.ui.right.fluid.labeled.icon.button {
5051
padding-left: 1.4em !important;
5052
padding-right: 1.4em !important;
5053
}
5054
.ui.right.labeled.icon.button .icon {
5055
left: auto;
5056
right: 0em;
5057
border-radius: 0em 0.25em 0.25em 0em;
5058
-webkit-box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
5059
box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
5060
}
5061
/*--------------
5062
Toggle
5063
---------------*/
5064
/* Toggle (Modifies active state to give affordances) */
5065
.ui.toggle.buttons .active.button,
5066
.ui.buttons .button.toggle.active,
5067
.ui.button.toggle.active {
5068
background-color: #5BBD72 !important;
5069
color: #FFFFFF !important;
5070
-webkit-box-shadow: none !important;
5071
box-shadow: none !important;
5072
}
5073
.ui.button.toggle.active:hover {
5074
background-color: #58CB73 !important;
5075
color: #FFFFFF !important;
5076
-webkit-box-shadow: none !important;
5077
box-shadow: none !important;
5078
}
5079
/*--------------
5080
Circular
5081
---------------*/
5082
.ui.circular.button {
5083
border-radius: 10em;
5084
}
5085
/*--------------
5086
Attached
5087
---------------*/
5088
.ui.attached.button {
5089
display: block;
5090
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
5091
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
5092
}
5093
.ui.attached.top.button {
5094
border-radius: 0.25em 0.25em 0em 0em;
5095
}
5096
.ui.attached.bottom.button {
5097
border-radius: 0em 0em 0.25em 0.25em;
5098
}
5099
.ui.attached.left.button {
5100
display: inline-block;
5101
border-left: none;
5102
padding-right: 0.75em;
5103
text-align: right;
5104
border-radius: 0.25em 0em 0em 0.25em;
5105
}
5106
.ui.attached.right.button {
5107
display: inline-block;
5108
padding-left: 0.75em;
5109
text-align: left;
5110
border-radius: 0em 0.25em 0.25em 0em;
5111
}
5112
/*-------------------
5113
Or Buttons
5114
--------------------*/
5115
.ui.buttons .or {
5116
position: relative;
5117
float: left;
5118
width: 0.3em;
5119
height: 1.1em;
5120
z-index: 3;
5121
}
5122
.ui.buttons .or:before {
5123
position: absolute;
5124
top: 50%;
5125
left: 50%;
5126
content: 'or';
5127
background-color: #FFFFFF;
5128
margin-top: -0.1em;
5129
margin-left: -0.9em;
5130
width: 1.8em;
5131
height: 1.8em;
5132
line-height: 1.55;
5133
color: #AAAAAA;
5134
font-style: normal;
5135
font-weight: normal;
5136
text-align: center;
5137
border-radius: 500px;
5138
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
5139
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
5140
-webkit-box-sizing: border-box;
5141
-moz-box-sizing: border-box;
5142
-ms-box-sizing: border-box;
5143
box-sizing: border-box;
5144
}
5145
.ui.buttons .or[data-text]:before {
5146
content: attr(data-text);
5147
}
5148
.ui.buttons .or:after {
5149
position: absolute;
5150
top: 0em;
5151
left: 0em;
5152
content: ' ';
5153
width: 0.3em;
5154
height: 1.7em;
5155
background-color: transparent;
5156
border-top: 0.5em solid #FFFFFF;
5157
border-bottom: 0.5em solid #FFFFFF;
5158
}
5159
/* Fluid Or */
5160
.ui.fluid.buttons .or {
5161
width: 0em !important;
5162
}
5163
.ui.fluid.buttons .or:after {
5164
display: none;
5165
}
5166
/*-------------------
5167
Attached
5168
--------------------*/
5169
/* Plural Attached */
5170
.attached.ui.buttons {
5171
margin: 0px;
5172
border-radius: 4px 4px 0px 0px;
5173
}
5174
.attached.ui.buttons .button:first-child {
5175
border-radius: 4px 0px 0px 0px;
5176
}
5177
.attached.ui.buttons .button:last-child {
5178
border-radius: 0px 4px 0px 0px;
5179
}
5180
/* Bottom Side */
5181
.bottom.attached.ui.buttons {
5182
margin-top: -1px;
5183
border-radius: 0px 0px 4px 4px;
5184
}
5185
.bottom.attached.ui.buttons .button:first-child {
5186
border-radius: 0px 0px 0px 4px;
5187
}
5188
.bottom.attached.ui.buttons .button:last-child {
5189
border-radius: 0px 0px 4px 0px;
5190
}
5191
/* Left Side */
5192
.left.attached.ui.buttons {
5193
margin-left: -1px;
5194
border-radius: 0px 4px 4px 0px;
5195
}
5196
.left.attached.ui.buttons .button:first-child {
5197
margin-left: -1px;
5198
border-radius: 0px 4px 0px 0px;
5199
}
5200
.left.attached.ui.buttons .button:last-child {
5201
margin-left: -1px;
5202
border-radius: 0px 0px 4px 0px;
5203
}
5204
/* Right Side */
5205
.right.attached.ui.buttons,
5206
.right.attached.ui.buttons .button {
5207
margin-right: -1px;
5208
border-radius: 4px 0px 0px 4px;
5209
}
5210
.right.attached.ui.buttons .button:first-child {
5211
margin-left: -1px;
5212
border-radius: 4px 0px 0px 0px;
5213
}
5214
.right.attached.ui.buttons .button:last-child {
5215
margin-left: -1px;
5216
border-radius: 0px 0px 0px 4px;
5217
}
5218
/* Fluid */
5219
.ui.fluid.buttons,
5220
.ui.button.fluid,
5221
.ui.fluid.buttons > .button {
5222
display: block;
5223
width: 100%;
5224
}
5225
.ui.\32.buttons > .button,
5226
.ui.two.buttons > .button {
5227
width: 50%;
5228
}
5229
.ui.\33.buttons > .button,
5230
.ui.three.buttons > .button {
5231
width: 33.333%;
5232
}
5233
.ui.\34.buttons > .button,
5234
.ui.four.buttons > .button {
5235
width: 25%;
5236
}
5237
.ui.\35.buttons > .button,
5238
.ui.five.buttons > .button {
5239
width: 20%;
5240
}
5241
.ui.\36.buttons > .button,
5242
.ui.six.buttons > .button {
5243
width: 16.666%;
5244
}
5245
.ui.\37.buttons > .button,
5246
.ui.seven.buttons > .button {
5247
width: 14.285%;
5248
}
5249
.ui.\38.buttons > .button,
5250
.ui.eight.buttons > .button {
5251
width: 12.500%;
5252
}
5253
.ui.\39.buttons > .button,
5254
.ui.nine.buttons > .button {
5255
width: 11.11%;
5256
}
5257
.ui.\31\30.buttons > .button,
5258
.ui.ten.buttons > .button {
5259
width: 10%;
5260
}
5261
.ui.\31\31.buttons > .button,
5262
.ui.eleven.buttons > .button {
5263
width: 9.09%;
5264
}
5265
.ui.\31\32.buttons > .button,
5266
.ui.twelve.buttons > .button {
5267
width: 8.3333%;
5268
}
5269
/* Fluid Vertical Buttons */
5270
.ui.fluid.vertical.buttons,
5271
.ui.fluid.vertical.buttons > .button {
5272
display: block;
5273
width: auto;
5274
-webkit-box-sizing: border-box;
5275
-moz-box-sizing: border-box;
5276
-ms-box-sizing: border-box;
5277
box-sizing: border-box;
5278
}
5279
.ui.\32.vertical.buttons > .button,
5280
.ui.two.vertical.buttons > .button {
5281
height: 50%;
5282
}
5283
.ui.\33.vertical.buttons > .button,
5284
.ui.three.vertical.buttons > .button {
5285
height: 33.333%;
5286
}
5287
.ui.\34.vertical.buttons > .button,
5288
.ui.four.vertical.buttons > .button {
5289
height: 25%;
5290
}
5291
.ui.\35.vertical.buttons > .button,
5292
.ui.five.vertical.buttons > .button {
5293
height: 20%;
5294
}
5295
.ui.\36.vertical.buttons > .button,
5296
.ui.six.vertical.buttons > .button {
5297
height: 16.666%;
5298
}
5299
.ui.\37.vertical.buttons > .button,
5300
.ui.seven.vertical.buttons > .button {
5301
height: 14.285%;
5302
}
5303
.ui.\38.vertical.buttons > .button,
5304
.ui.eight.vertical.buttons > .button {
5305
height: 12.500%;
5306
}
5307
.ui.\39.vertical.buttons > .button,
5308
.ui.nine.vertical.buttons > .button {
5309
height: 11.11%;
5310
}
5311
.ui.\31\30.vertical.buttons > .button,
5312
.ui.ten.vertical.buttons > .button {
5313
height: 10%;
5314
}
5315
.ui.\31\31.vertical.buttons > .button,
5316
.ui.eleven.vertical.buttons > .button {
5317
height: 9.09%;
5318
}
5319
.ui.\31\32.vertical.buttons > .button,
5320
.ui.twelve.vertical.buttons > .button {
5321
height: 8.3333%;
5322
}
5323
/*-------------------
5324
Colors
5325
--------------------*/
5326
/*--- Black ---*/
5327
.ui.black.buttons .button,
5328
.ui.black.button {
5329
background-color: #5C6166;
5330
color: #FFFFFF;
5331
}
5332
.ui.black.buttons .button:hover,
5333
.ui.black.button:hover {
5334
background-color: #4C4C4C;
5335
color: #FFFFFF;
5336
}
5337
.ui.black.buttons .button:active,
5338
.ui.black.button:active {
5339
background-color: #333333;
5340
color: #FFFFFF;
5341
}
5342
/*--- Green ---*/
5343
.ui.green.buttons .button,
5344
.ui.green.button {
5345
background-color: #5BBD72;
5346
color: #FFFFFF;
5347
}
5348
.ui.green.buttons .button:hover,
5349
.ui.green.button:hover,
5350
.ui.green.buttons .active.button,
5351
.ui.green.button.active {
5352
background-color: #58cb73;
5353
color: #FFFFFF;
5354
}
5355
.ui.green.buttons .button:active,
5356
.ui.green.button:active {
5357
background-color: #4CB164;
5358
color: #FFFFFF;
5359
}
5360
/*--- Red ---*/
5361
.ui.red.buttons .button,
5362
.ui.red.button {
5363
background-color: #D95C5C;
5364
color: #FFFFFF;
5365
}
5366
.ui.red.buttons .button:hover,
5367
.ui.red.button:hover,
5368
.ui.red.buttons .active.button,
5369
.ui.red.button.active {
5370
background-color: #E75859;
5371
color: #FFFFFF;
5372
}
5373
.ui.red.buttons .button:active,
5374
.ui.red.button:active {
5375
background-color: #D24B4C;
5376
color: #FFFFFF;
5377
}
5378
/*--- Orange ---*/
5379
.ui.orange.buttons .button,
5380
.ui.orange.button {
5381
background-color: #E96633;
5382
color: #FFFFFF;
5383
}
5384
.ui.orange.buttons .button:hover,
5385
.ui.orange.button:hover,
5386
.ui.orange.buttons .active.button,
5387
.ui.orange.button.active {
5388
background-color: #FF7038;
5389
color: #FFFFFF;
5390
}
5391
.ui.orange.buttons .button:active,
5392
.ui.orange.button:active {
5393
background-color: #DA683B;
5394
color: #FFFFFF;
5395
}
5396
/*--- Blue ---*/
5397
.ui.blue.buttons .button,
5398
.ui.blue.button {
5399
background-color: #6ECFF5;
5400
color: #FFFFFF;
5401
}
5402
.ui.blue.buttons .button:hover,
5403
.ui.blue.button:hover,
5404
.ui.blue.buttons .active.button,
5405
.ui.blue.button.active {
5406
background-color: #1AB8F3;
5407
color: #FFFFFF;
5408
}
5409
.ui.blue.buttons .button:active,
5410
.ui.blue.button:active {
5411
background-color: #0AA5DF;
5412
color: #FFFFFF;
5413
}
5414
/*--- Purple ---*/
5415
.ui.purple.buttons .button,
5416
.ui.purple.button {
5417
background-color: #564F8A;
5418
color: #FFFFFF;
5419
}
5420
.ui.purple.buttons .button:hover,
5421
.ui.purple.button:hover,
5422
.ui.purple.buttons .active.button,
5423
.ui.purple.button.active {
5424
background-color: #3E3773;
5425
color: #FFFFFF;
5426
}
5427
.ui.purple.buttons .button:active,
5428
.ui.purple.button:active {
5429
background-color: #2E2860;
5430
color: #FFFFFF;
5431
}
5432
/*--- Teal ---*/
5433
.ui.teal.buttons .button,
5434
.ui.teal.button {
5435
background-color: #00B5AD;
5436
color: #FFFFFF;
5437
}
5438
.ui.teal.buttons .button:hover,
5439
.ui.teal.button:hover,
5440
.ui.teal.buttons .active.button,
5441
.ui.teal.button.active {
5442
background-color: #009A93;
5443
color: #FFFFFF;
5444
}
5445
.ui.teal.buttons .button:active,
5446
.ui.teal.button:active {
5447
background-color: #00847E;
5448
color: #FFFFFF;
5449
}
5450
/*---------------
5451
Positive
5452
----------------*/
5453
.ui.positive.buttons .button,
5454
.ui.positive.button {
5455
background-color: #5BBD72 !important;
5456
color: #FFFFFF;
5457
}
5458
.ui.positive.buttons .button:hover,
5459
.ui.positive.button:hover,
5460
.ui.positive.buttons .active.button,
5461
.ui.positive.button.active {
5462
background-color: #58CB73 !important;
5463
color: #FFFFFF;
5464
}
5465
.ui.positive.buttons .button:active,
5466
.ui.positive.button:active {
5467
background-color: #4CB164 !important;
5468
color: #FFFFFF;
5469
}
5470
/*---------------
5471
Negative
5472
----------------*/
5473
.ui.negative.buttons .button,
5474
.ui.negative.button {
5475
background-color: #D95C5C !important;
5476
color: #FFFFFF;
5477
}
5478
.ui.negative.buttons .button:hover,
5479
.ui.negative.button:hover,
5480
.ui.negative.buttons .active.button,
5481
.ui.negative.button.active {
5482
background-color: #E75859 !important;
5483
color: #FFFFFF;
5484
}
5485
.ui.negative.buttons .button:active,
5486
.ui.negative.button:active {
5487
background-color: #D24B4C !important;
5488
color: #FFFFFF;
5489
}
5490
/*******************************
5491
Groups
5492
*******************************/
5493
.ui.buttons {
5494
display: inline-block;
5495
vertical-align: middle;
5496
}
5497
.ui.buttons:after {
5498
content: ".";
5499
display: block;
5500
height: 0;
5501
clear: both;
5502
visibility: hidden;
5503
}
5504
.ui.buttons .button:first-child {
5505
border-left: none;
5506
}
5507
.ui.buttons .button {
5508
float: left;
5509
border-radius: 0em;
5510
}
5511
.ui.buttons .button:first-child {
5512
margin-left: 0em;
5513
border-top-left-radius: 0.25em;
5514
border-bottom-left-radius: 0.25em;
5515
}
5516
.ui.buttons .button:last-child {
5517
border-top-right-radius: 0.25em;
5518
border-bottom-right-radius: 0.25em;
5519
}
5520
/* Vertical Style */
5521
.ui.vertical.buttons {
5522
display: inline-block;
5523
}
5524
.ui.vertical.buttons .button {
5525
display: block;
5526
float: none;
5527
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
5528
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
5529
}
5530
.ui.vertical.buttons .button:first-child,
5531
.ui.vertical.buttons .mini.button:first-child,
5532
.ui.vertical.buttons .tiny.button:first-child,
5533
.ui.vertical.buttons .small.button:first-child,
5534
.ui.vertical.buttons .massive.button:first-child,
5535
.ui.vertical.buttons .huge.button:first-child {
5536
margin-top: 0px;
5537
border-radius: 0.25em 0.25em 0px 0px;
5538
}
5539
.ui.vertical.buttons .button:last-child,
5540
.ui.vertical.buttons .mini.button:last-child,
5541
.ui.vertical.buttons .tiny.button:last-child,
5542
.ui.vertical.buttons .small.button:last-child,
5543
.ui.vertical.buttons .massive.button:last-child,
5544
.ui.vertical.buttons .huge.button:last-child,
5545
.ui.vertical.buttons .gigantic.button:last-child {
5546
border-radius: 0px 0px 0.25em 0.25em;
5547
}
5548
5549
/*
5550
* # Semantic - Divider
5551
* http://github.com/jlukic/semantic-ui/
5552
*
5553
*
5554
* Copyright 2014 Contributors
5555
* Released under the MIT license
5556
* http://opensource.org/licenses/MIT
5557
*
5558
*/
5559
/*******************************
5560
Divider
5561
*******************************/
5562
.ui.divider {
5563
margin: 1rem 0rem;
5564
border-top: 1px solid rgba(0, 0, 0, 0.1);
5565
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
5566
line-height: 1;
5567
height: 0em;
5568
-webkit-box-sizing: border-box;
5569
-moz-box-sizing: border-box;
5570
-ms-box-sizing: border-box;
5571
box-sizing: border-box;
5572
-webkit-user-select: none;
5573
-moz-user-select: none;
5574
-ms-user-select: none;
5575
user-select: none;
5576
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
5577
}
5578
.ui.vertical.divider,
5579
.ui.horizontal.divider {
5580
position: absolute;
5581
border: none;
5582
height: 0em;
5583
margin: 0em;
5584
background-color: transparent;
5585
font-size: 0.875rem;
5586
font-weight: bold;
5587
text-align: center;
5588
text-transform: uppercase;
5589
color: rgba(0, 0, 0, 0.8);
5590
}
5591
/*--------------
5592
Vertical
5593
---------------*/
5594
.ui.vertical.divider {
5595
position: absolute;
5596
z-index: 2;
5597
top: 50%;
5598
left: 50%;
5599
margin: 0% 0% 0% -3%;
5600
width: 6%;
5601
height: 50%;
5602
line-height: 0;
5603
padding: 0em;
5604
}
5605
.ui.vertical.divider:before,
5606
.ui.vertical.divider:after {
5607
position: absolute;
5608
left: 50%;
5609
content: " ";
5610
z-index: 3;
5611
border-left: 1px solid rgba(0, 0, 0, 0.1);
5612
border-right: 1px solid rgba(255, 255, 255, 0.8);
5613
width: 0%;
5614
height: 80%;
5615
}
5616
.ui.vertical.divider:before {
5617
top: -100%;
5618
}
5619
.ui.vertical.divider:after {
5620
top: auto;
5621
bottom: 0px;
5622
}
5623
/*--------------
5624
Horizontal
5625
---------------*/
5626
.ui.horizontal.divider {
5627
position: relative;
5628
top: 0%;
5629
left: 0%;
5630
margin: 1rem 1.5rem;
5631
height: auto;
5632
padding: 0em;
5633
line-height: 1;
5634
}
5635
.ui.horizontal.divider:before,
5636
.ui.horizontal.divider:after {
5637
position: absolute;
5638
content: " ";
5639
z-index: 3;
5640
width: 50%;
5641
top: 50%;
5642
height: 0%;
5643
border-top: 1px solid rgba(0, 0, 0, 0.1);
5644
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
5645
}
5646
.ui.horizontal.divider:before {
5647
left: 0%;
5648
margin-left: -1.5rem;
5649
}
5650
.ui.horizontal.divider:after {
5651
left: auto;
5652
right: 0%;
5653
margin-right: -1.5rem;
5654
}
5655
/*--------------
5656
Icon
5657
---------------*/
5658
.ui.divider > .icon {
5659
margin: 0em;
5660
font-size: 1rem;
5661
vertical-align: middle;
5662
}
5663
/*******************************
5664
Variations
5665
*******************************/
5666
/*--------------
5667
Inverted
5668
---------------*/
5669
.ui.divider.inverted {
5670
color: #ffffff;
5671
}
5672
.ui.vertical.inverted.divider,
5673
.ui.horizontal.inverted.divider {
5674
color: rgba(255, 255, 255, 0.9);
5675
}
5676
.ui.divider.inverted,
5677
.ui.divider.inverted:after,
5678
.ui.divider.inverted:before {
5679
border-top-color: rgba(0, 0, 0, 0.15);
5680
border-bottom-color: rgba(255, 255, 255, 0.15);
5681
border-left-color: rgba(0, 0, 0, 0.15);
5682
border-right-color: rgba(255, 255, 255, 0.15);
5683
}
5684
/*--------------
5685
Fitted
5686
---------------*/
5687
.ui.fitted.divider {
5688
margin: 0em;
5689
}
5690
/*--------------
5691
Clearing
5692
---------------*/
5693
.ui.clearing.divider {
5694
clear: both;
5695
}
5696
/*--------------
5697
Section
5698
---------------*/
5699
.ui.section.divider {
5700
margin-top: 2rem;
5701
margin-bottom: 2rem;
5702
}
5703
5704
/*
5705
* # Semantic - Header
5706
* http://github.com/jlukic/semantic-ui/
5707
*
5708
*
5709
* Copyright 2014 Contributors
5710
* Released under the MIT license
5711
* http://opensource.org/licenses/MIT
5712
*
5713
*/
5714
/*******************************
5715
Header
5716
*******************************/
5717
/* Standard */
5718
.ui.header {
5719
border: none;
5720
margin: 1em 0em 1rem;
5721
padding: 0em;
5722
font-size: 1.33em;
5723
font-weight: bold;
5724
line-height: 1.33;
5725
}
5726
.ui.header .sub.header {
5727
font-size: 1rem;
5728
font-weight: normal;
5729
margin: 0em;
5730
padding: 0em;
5731
line-height: 1.2;
5732
color: rgba(0, 0, 0, 0.5);
5733
}
5734
.ui.header .icon {
5735
display: table-cell;
5736
vertical-align: middle;
5737
padding-right: 0.5em;
5738
}
5739
.ui.header .icon:only-child {
5740
display: inline-block;
5741
vertical-align: baseline;
5742
}
5743
.ui.header .content {
5744
display: inline-block;
5745
vertical-align: top;
5746
}
5747
.ui.header .icon + .content {
5748
padding-left: 0.5em;
5749
display: table-cell;
5750
}
5751
/* Positioning */
5752
.ui.header:first-child {
5753
margin-top: 0em;
5754
}
5755
.ui.header:last-child {
5756
margin-bottom: 0em;
5757
}
5758
.ui.header + p {
5759
margin-top: 0em;
5760
}
5761
/*--------------
5762
Page Heading
5763
---------------*/
5764
h1.ui.header {
5765
min-height: 1rem;
5766
line-height: 1.33;
5767
font-size: 2rem;
5768
}
5769
h2.ui.header {
5770
line-height: 1.33;
5771
font-size: 1.75rem;
5772
}
5773
h3.ui.header {
5774
line-height: 1.33;
5775
font-size: 1.33rem;
5776
}
5777
h4.ui.header {
5778
line-height: 1.33;
5779
font-size: 1.1rem;
5780
}
5781
h5.ui.header {
5782
line-height: 1.2;
5783
font-size: 1rem;
5784
}
5785
/*--------------
5786
Content Heading
5787
---------------*/
5788
.ui.huge.header {
5789
min-height: 1em;
5790
font-size: 2em;
5791
}
5792
.ui.large.header {
5793
font-size: 1.75em;
5794
}
5795
.ui.medium.header {
5796
font-size: 1.33em;
5797
}
5798
.ui.small.header {
5799
font-size: 1.1em;
5800
}
5801
.ui.tiny.header {
5802
font-size: 1em;
5803
}
5804
/*******************************
5805
Types
5806
*******************************/
5807
/*-------------------
5808
Icon
5809
--------------------*/
5810
.ui.icon.header {
5811
display: inline-block;
5812
text-align: center;
5813
}
5814
.ui.icon.header .icon {
5815
float: none;
5816
display: block;
5817
font-size: 3em;
5818
margin: 0em auto 0.2em;
5819
padding: 0em;
5820
}
5821
.ui.icon.header .content {
5822
display: block;
5823
}
5824
.ui.icon.header .circular.icon,
5825
.ui.icon.header .square.icon {
5826
font-size: 2em;
5827
}
5828
.ui.block.icon.header .icon {
5829
margin-bottom: 0em;
5830
}
5831
.ui.icon.header.aligned {
5832
margin-left: auto;
5833
margin-right: auto;
5834
display: block;
5835
}
5836
/*******************************
5837
States
5838
*******************************/
5839
.ui.disabled.header {
5840
opacity: 0.5;
5841
}
5842
/*******************************
5843
Variations
5844
*******************************/
5845
/*-------------------
5846
Colors
5847
--------------------*/
5848
.ui.blue.header {
5849
color: #6ECFF5 !important;
5850
}
5851
.ui.black.header {
5852
color: #5C6166 !important;
5853
}
5854
.ui.green.header {
5855
color: #A1CF64 !important;
5856
}
5857
.ui.red.header {
5858
color: #D95C5C !important;
5859
}
5860
.ui.purple.header {
5861
color: #564F8A !important;
5862
}
5863
.ui.teal.header {
5864
color: #00B5AD !important;
5865
}
5866
.ui.blue.dividing.header {
5867
border-bottom: 3px solid #6ECFF5;
5868
}
5869
.ui.black.dividing.header {
5870
border-bottom: 3px solid #5C6166;
5871
}
5872
.ui.green.dividing.header {
5873
border-bottom: 3px solid #A1CF64;
5874
}
5875
.ui.red.dividing.header {
5876
border-bottom: 3px solid #D95C5C;
5877
}
5878
.ui.purple.dividing.header {
5879
border-bottom: 3px solid #564F8A;
5880
}
5881
.ui.teal.dividing.header {
5882
border-bottom: 3px solid #00B5AD;
5883
}
5884
/*-------------------
5885
Inverted
5886
--------------------*/
5887
.ui.inverted.header {
5888
color: #FFFFFF;
5889
}
5890
.ui.inverted.header .sub.header {
5891
color: rgba(255, 255, 255, 0.85);
5892
}
5893
/*-------------------
5894
Inverted Colors
5895
--------------------*/
5896
.ui.inverted.black.header {
5897
background-color: #5C6166 !important;
5898
color: #FFFFFF !important;
5899
}
5900
.ui.inverted.blue.header {
5901
background-color: #6ECFF5 !important;
5902
color: #FFFFFF !important;
5903
}
5904
.ui.inverted.green.header {
5905
background-color: #A1CF64 !important;
5906
color: #FFFFFF !important;
5907
}
5908
.ui.inverted.red.header {
5909
background-color: #D95C5C !important;
5910
color: #FFFFFF !important;
5911
}
5912
.ui.inverted.purple.header {
5913
background-color: #564F8A !important;
5914
color: #FFFFFF !important;
5915
}
5916
.ui.inverted.teal.header {
5917
background-color: #00B5AD !important;
5918
color: #FFFFFF !important;
5919
}
5920
.ui.inverted.block.header {
5921
border-bottom: none;
5922
}
5923
/*-------------------
5924
Aligned
5925
--------------------*/
5926
.ui.left.aligned.header {
5927
text-align: left;
5928
}
5929
.ui.right.aligned.header {
5930
text-align: right;
5931
}
5932
.ui.center.aligned.header {
5933
text-align: center;
5934
}
5935
.ui.justified.header {
5936
text-align: justify;
5937
}
5938
.ui.justified.header:after {
5939
display: inline-block;
5940
content: '';
5941
width: 100%;
5942
}
5943
/*-------------------
5944
Floated
5945
--------------------*/
5946
.ui.floated.header,
5947
.ui.left.floated.header {
5948
float: left;
5949
margin-top: 0em;
5950
margin-right: 0.5em;
5951
}
5952
.ui.right.floated.header {
5953
float: right;
5954
margin-top: 0em;
5955
margin-left: 0.5em;
5956
}
5957
/*-------------------
5958
Fittted
5959
--------------------*/
5960
.ui.fitted.header {
5961
padding: 0em;
5962
}
5963
/*-------------------
5964
Dividing
5965
--------------------*/
5966
.ui.dividing.header {
5967
padding-bottom: 0.2rem;
5968
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
5969
}
5970
.ui.dividing.header .sub.header {
5971
padding-bottom: 0.5em;
5972
}
5973
.ui.dividing.header .icon {
5974
margin-bottom: 0.2em;
5975
}
5976
/*-------------------
5977
Block
5978
--------------------*/
5979
.ui.block.header {
5980
background-color: rgba(0, 0, 0, 0.05);
5981
padding: 0.5em 1em;
5982
}
5983
/*-------------------
5984
Attached
5985
--------------------*/
5986
.ui.attached.header {
5987
background-color: #E0E0E0;
5988
padding: 0.5em 1rem;
5989
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
5990
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
5991
}
5992
.ui.top.attached.header {
5993
margin-bottom: 0em;
5994
border-radius: 0.3125em 0.3125em 0em 0em;
5995
}
5996
.ui.bottom.attached.header {
5997
margin-top: 0em;
5998
border-radius: 0em 0em 0.3125em 0.3125em;
5999
}
6000
6001
/*
6002
* # Semantic - Icon
6003
* http://github.com/jlukic/semantic-ui/
6004
*
6005
*
6006
* Copyright 2014 Contributors
6007
* Released under the MIT license
6008
* http://opensource.org/licenses/MIT
6009
*
6010
*/
6011
/*!
6012
* Font Awesome 3.2.1
6013
* the iconic font designed for Bootstrap
6014
* ------------------------------------------------------------------------------
6015
* The full suite of pictographic icons, examples, and documentation can be
6016
* found at http://fon.io. Stay up to date on Twitter at
6017
* http://twitter.com/fon.
6018
*
6019
* License
6020
* ------------------------------------------------------------------------------
6021
* - The Font Awesome font is licensed under SIL OFL 1.1 -
6022
* http://scripts.sil.org/OFL
6023
6024
/*******************************
6025
Icon
6026
*******************************/
6027
@font-face {
6028
font-family: 'Icons';
6029
src: url(../fonts/icons.eot);
6030
src: url(../fonts/icons.eot?#iefix) format('embedded-opentype'), url(../fonts/icons.svg#icons) format('svg'), url(../fonts/icons.woff) format('woff'), url(../fonts/icons.ttf) format('truetype');
6031
font-style: normal;
6032
font-weight: normal;
6033
font-variant: normal;
6034
text-decoration: inherit;
6035
text-transform: none;
6036
}
6037
i.icon {
6038
display: inline-block;
6039
opacity: 0.75;
6040
margin: 0em 0.25em 0em 0em;
6041
width: 1.23em;
6042
height: 1em;
6043
font-family: 'Icons';
6044
font-style: normal;
6045
line-height: 1;
6046
font-weight: normal;
6047
text-decoration: inherit;
6048
text-align: center;
6049
speak: none;
6050
-webkit-box-sizing: border-box;
6051
-moz-box-sizing: border-box;
6052
-ms-box-sizing: border-box;
6053
box-sizing: border-box;
6054
}
6055
i.icon.left:before {
6056
content: "\f060";
6057
}
6058
i.icon.right:before {
6059
content: "\f061";
6060
}
6061
i.icon.add.sign.box:before {
6062
content: "\f0fe";
6063
}
6064
i.icon.add.sign:before {
6065
content: "\f055";
6066
}
6067
i.icon.add:before {
6068
content: "\f067";
6069
}
6070
i.icon.adjust:before {
6071
content: "\f042";
6072
}
6073
i.icon.adn:before {
6074
content: "\f170";
6075
}
6076
i.icon.align.center:before {
6077
content: "\f037";
6078
}
6079
i.icon.align.justify:before {
6080
content: "\f039";
6081
}
6082
i.icon.align.left:before {
6083
content: "\f036";
6084
}
6085
i.icon.align.right:before {
6086
content: "\f038";
6087
}
6088
i.icon.ambulance:before {
6089
content: "\f0f9";
6090
}
6091
i.icon.anchor:before {
6092
content: "\f13d";
6093
}
6094
i.icon.android:before {
6095
content: "\f17b";
6096
}
6097
i.icon.angle.down:before {
6098
content: "\f107";
6099
}
6100
i.icon.angle.left:before {
6101
content: "\f104";
6102
}
6103
i.icon.angle.right:before {
6104
content: "\f105";
6105
}
6106
i.icon.angle.up:before {
6107
content: "\f106";
6108
}
6109
i.icon.apple:before {
6110
content: "\f179";
6111
}
6112
i.icon.archive:before {
6113
content: "\f187";
6114
}
6115
i.icon.arrow.down:before {
6116
content: "\f078";
6117
}
6118
i.icon.arrow.left:before {
6119
content: "\f053";
6120
}
6121
i.icon.arrow.right:before {
6122
content: "\f054";
6123
}
6124
i.icon.arrow.sign.down:before {
6125
content: "\f13a";
6126
}
6127
i.icon.arrow.sign.left:before {
6128
content: "\f137";
6129
}
6130
i.icon.arrow.sign.right:before {
6131
content: "\f138";
6132
}
6133
i.icon.arrow.sign.up:before {
6134
content: "\f139";
6135
}
6136
i.icon.arrow.up:before {
6137
content: "\f077";
6138
}
6139
i.icon.asterisk:before {
6140
content: "\f069";
6141
}
6142
i.icon.attachment:before {
6143
content: "\f0c6";
6144
}
6145
i.icon.attention:before {
6146
content: "\f06a";
6147
}
6148
i.icon.backward:before {
6149
content: "\f04a";
6150
}
6151
i.icon.ban.circle:before {
6152
content: "\f05e";
6153
}
6154
i.icon.bar.chart:before {
6155
content: "\f080";
6156
}
6157
i.icon.barcode:before {
6158
content: "\f02a";
6159
}
6160
i.icon.beer:before {
6161
content: "\f0fc";
6162
}
6163
i.icon.bell.outline:before {
6164
content: "\f0a2";
6165
}
6166
i.icon.bell:before {
6167
content: "\f0f3";
6168
}
6169
i.icon.bitbucket.sign:before {
6170
content: "\f172";
6171
}
6172
i.icon.bitbucket:before {
6173
content: "\f171";
6174
}
6175
i.icon.bitcoin:before {
6176
content: "\f15a";
6177
}
6178
i.icon.bold:before {
6179
content: "\f032";
6180
}
6181
i.icon.bolt:before {
6182
content: "\f0e7";
6183
}
6184
i.icon.book:before {
6185
content: "\f02d";
6186
}
6187
i.icon.bookmark.empty:before {
6188
content: "\f097";
6189
}
6190
i.icon.bookmark:before {
6191
content: "\f02e";
6192
}
6193
i.icon.box.arrow.down:before {
6194
content: "\f150";
6195
}
6196
/*rtl:ignore*/
6197
i.icon.box.arrow.right:before {
6198
content: "\f152";
6199
}
6200
i.icon.box.arrow.up:before {
6201
content: "\f151";
6202
}
6203
i.icon.briefcase:before {
6204
content: "\f0b1";
6205
}
6206
i.icon.browser:before {
6207
content: "\f022";
6208
}
6209
i.icon.bug:before {
6210
content: "\f188";
6211
}
6212
i.icon.building:before {
6213
content: "\f0f7";
6214
}
6215
i.icon.bullhorn:before {
6216
content: "\f0a1";
6217
}
6218
i.icon.bullseye:before {
6219
content: "\f140";
6220
}
6221
i.icon.calendar.empty:before {
6222
content: "\f133";
6223
}
6224
i.icon.calendar:before {
6225
content: "\f073";
6226
}
6227
i.icon.camera.retro:before {
6228
content: "\f083";
6229
}
6230
i.icon.camera:before {
6231
content: "\f030";
6232
}
6233
i.icon.triangle.down:before {
6234
content: "\f0d7";
6235
}
6236
i.icon.triangle.left:before {
6237
content: "\f0d9";
6238
}
6239
i.icon.triangle.right:before {
6240
content: "\f0da";
6241
}
6242
i.icon.triangle.up:before {
6243
content: "\f0d8";
6244
}
6245
i.icon.cart:before {
6246
content: "\f07a";
6247
}
6248
i.icon.certificate:before {
6249
content: "\f0a3";
6250
}
6251
i.icon.chat.outline:before {
6252
content: "\f0e6";
6253
}
6254
i.icon.chat:before {
6255
content: "\f086";
6256
}
6257
i.icon.checkbox.empty:before {
6258
content: "\f096";
6259
}
6260
i.icon.checkbox.minus:before {
6261
content: "\f147";
6262
}
6263
i.icon.checked.checkbox:before {
6264
content: "\f046";
6265
}
6266
i.icon.checkmark.sign:before {
6267
content: "\f14a";
6268
}
6269
i.icon.checkmark:before {
6270
content: "\f00c";
6271
}
6272
i.icon.circle.blank:before {
6273
content: "\f10c";
6274
}
6275
i.icon.circle.down:before {
6276
content: "\f0ab";
6277
}
6278
i.icon.circle.left:before {
6279
content: "\f0a8";
6280
}
6281
i.icon.circle.right:before {
6282
content: "\f0a9";
6283
}
6284
i.icon.circle.up:before {
6285
content: "\f0aa";
6286
}
6287
i.icon.circle:before {
6288
content: "\f111";
6289
}
6290
i.icon.cloud.download:before {
6291
content: "\f0ed";
6292
}
6293
i.icon.cloud.upload:before {
6294
content: "\f0ee";
6295
}
6296
i.icon.cloud:before {
6297
content: "\f0c2";
6298
}
6299
i.icon.code.fork:before {
6300
content: "\f126";
6301
}
6302
i.icon.code:before {
6303
content: "\f121";
6304
}
6305
i.icon.coffee:before {
6306
content: "\f0f4";
6307
}
6308
i.icon.collapse:before {
6309
content: "\f117";
6310
}
6311
i.icon.comment.outline:before {
6312
content: "\f0e5";
6313
}
6314
i.icon.comment:before {
6315
content: "\f075";
6316
}
6317
i.icon.copy:before {
6318
content: "\f0c5";
6319
}
6320
i.icon.crop:before {
6321
content: "\f125";
6322
}
6323
i.icon.css3:before {
6324
content: "\f13c";
6325
}
6326
i.icon.cut:before {
6327
content: "\f0c4";
6328
}
6329
i.icon.dashboard:before {
6330
content: "\f0e4";
6331
}
6332
i.icon.desktop:before {
6333
content: "\f108";
6334
}
6335
i.icon.doctor:before {
6336
content: "\f0f0";
6337
}
6338
i.icon.dollar:before {
6339
content: "\f155";
6340
}
6341
i.icon.double.angle.down:before {
6342
content: "\f103";
6343
}
6344
i.icon.double.angle.left:before {
6345
content: "\f100";
6346
}
6347
i.icon.double.angle.right:before {
6348
content: "\f101";
6349
}
6350
i.icon.double.angle.up:before {
6351
content: "\f102";
6352
}
6353
i.icon.down:before {
6354
content: "\f063";
6355
}
6356
i.icon.download.disk:before {
6357
content: "\f019";
6358
}
6359
i.icon.download:before {
6360
content: "\f01a";
6361
}
6362
i.icon.dribbble:before {
6363
content: "\f17d";
6364
}
6365
i.icon.dropbox:before {
6366
content: "\f16b";
6367
}
6368
i.icon.edit.sign:before {
6369
content: "\f14b";
6370
}
6371
i.icon.edit:before {
6372
content: "\f044";
6373
}
6374
i.icon.eject:before {
6375
content: "\f052";
6376
}
6377
i.icon.ellipsis.horizontal:before {
6378
content: "\f141";
6379
}
6380
i.icon.ellipsis.vertical:before {
6381
content: "\f142";
6382
}
6383
i.icon.eraser:before {
6384
content: "\f12d";
6385
}
6386
i.icon.euro:before {
6387
content: "\f153";
6388
}
6389
i.icon.exchange:before {
6390
content: "\f0ec";
6391
}
6392
i.icon.exclamation:before {
6393
content: "\f12a";
6394
}
6395
i.icon.expand:before {
6396
content: "\f116";
6397
}
6398
i.icon.external.url.sign:before {
6399
content: "\f14c";
6400
}
6401
i.icon.external.url:before {
6402
content: "\f08e";
6403
}
6404
i.icon.facebook.sign:before {
6405
content: "\f082";
6406
}
6407
i.icon.facebook:before {
6408
content: "\f09a";
6409
}
6410
i.icon.facetime.video:before {
6411
content: "\f03d";
6412
}
6413
i.icon.fast.backward:before {
6414
content: "\f049";
6415
}
6416
i.icon.fast.forward:before {
6417
content: "\f050";
6418
}
6419
i.icon.female:before {
6420
content: "\f182";
6421
}
6422
i.icon.fighter.jet:before {
6423
content: "\f0fb";
6424
}
6425
i.icon.file.outline:before {
6426
content: "\f016";
6427
}
6428
i.icon.file.text.outline:before {
6429
content: "\f0f6";
6430
}
6431
i.icon.file.text:before {
6432
content: "\f15c";
6433
}
6434
i.icon.file:before {
6435
content: "\f15b";
6436
}
6437
i.icon.filter:before {
6438
content: "\f0b0";
6439
}
6440
i.icon.fire.extinguisher:before {
6441
content: "\f134";
6442
}
6443
i.icon.fire:before {
6444
content: "\f06d";
6445
}
6446
i.icon.flag.checkered:before {
6447
content: "\f11e";
6448
}
6449
i.icon.flag.empty:before {
6450
content: "\f11d";
6451
}
6452
i.icon.flag:before {
6453
content: "\f024";
6454
}
6455
i.icon.flickr:before {
6456
content: "\f16e";
6457
}
6458
i.icon.folder.open.outline:before {
6459
content: "\f115";
6460
}
6461
i.icon.folder.open:before {
6462
content: "\f07c";
6463
}
6464
i.icon.folder.outline:before {
6465
content: "\f114";
6466
}
6467
i.icon.folder:before {
6468
content: "\f07b";
6469
}
6470
i.icon.font:before {
6471
content: "\f031";
6472
}
6473
i.icon.food:before {
6474
content: "\f0f5";
6475
}
6476
i.icon.forward.mail:before {
6477
content: "\f064";
6478
}
6479
i.icon.forward:before {
6480
content: "\f04e";
6481
}
6482
i.icon.foursquare:before {
6483
content: "\f180";
6484
}
6485
i.icon.frown:before {
6486
content: "\f119";
6487
}
6488
i.icon.fullscreen:before {
6489
content: "\f0b2";
6490
}
6491
i.icon.gamepad:before {
6492
content: "\f11b";
6493
}
6494
i.icon.gift:before {
6495
content: "\f06b";
6496
}
6497
i.icon.github.alternate:before {
6498
content: "\f09b";
6499
}
6500
i.icon.github.sign:before {
6501
content: "\f092";
6502
}
6503
i.icon.github:before {
6504
content: "\f113";
6505
}
6506
i.icon.gittip:before {
6507
content: "\f184";
6508
}
6509
i.icon.glass:before {
6510
content: "\f000";
6511
}
6512
i.icon.globe:before {
6513
content: "\f0ac";
6514
}
6515
i.icon.google.plus.sign:before {
6516
content: "\f0d4";
6517
}
6518
i.icon.google.plus:before {
6519
content: "\f0d5";
6520
}
6521
i.icon.h.sign:before {
6522
content: "\f0fd";
6523
}
6524
i.icon.hand.down:before {
6525
content: "\f0a7";
6526
}
6527
i.icon.hand.left:before {
6528
content: "\f0a5";
6529
}
6530
i.icon.hand.right:before {
6531
content: "\f0a4";
6532
}
6533
i.icon.hand.up:before {
6534
content: "\f0a6";
6535
}
6536
i.icon.hdd:before {
6537
content: "\f0a0";
6538
}
6539
i.icon.headphones:before {
6540
content: "\f025";
6541
}
6542
i.icon.heart.empty:before {
6543
content: "\f08a";
6544
}
6545
i.icon.heart:before {
6546
content: "\f004";
6547
}
6548
i.icon.help:before {
6549
content: "\f059";
6550
}
6551
i.icon.hide:before {
6552
content: "\f070";
6553
}
6554
i.icon.home:before {
6555
content: "\f015";
6556
}
6557
i.icon.hospital:before {
6558
content: "\f0f8";
6559
}
6560
i.icon.html5:before {
6561
content: "\f13b";
6562
}
6563
i.icon.inbox:before {
6564
content: "\f01c";
6565
}
6566
i.icon.indent.left:before {
6567
content: "\f03b";
6568
}
6569
i.icon.indent.right:before {
6570
content: "\f03c";
6571
}
6572
i.icon.info.letter:before {
6573
content: "\f129";
6574
}
6575
i.icon.info:before {
6576
content: "\f05a";
6577
}
6578
i.icon.instagram:before {
6579
content: "\f16d";
6580
}
6581
i.icon.italic:before {
6582
content: "\f033";
6583
}
6584
i.icon.key:before {
6585
content: "\f084";
6586
}
6587
i.icon.keyboard:before {
6588
content: "\f11c";
6589
}
6590
i.icon.lab:before {
6591
content: "\f0c3";
6592
}
6593
i.icon.laptop:before {
6594
content: "\f109";
6595
}
6596
i.icon.layout.block:before {
6597
content: "\f009";
6598
}
6599
i.icon.layout.column:before {
6600
content: "\f0db";
6601
}
6602
i.icon.layout.grid:before {
6603
content: "\f00a";
6604
}
6605
i.icon.layout.list:before {
6606
content: "\f00b";
6607
}
6608
i.icon.leaf:before {
6609
content: "\f06c";
6610
}
6611
i.icon.legal:before {
6612
content: "\f0e3";
6613
}
6614
i.icon.lemon:before {
6615
content: "\f094";
6616
}
6617
i.icon.level.down:before {
6618
content: "\f149";
6619
}
6620
i.icon.level.up:before {
6621
content: "\f148";
6622
}
6623
i.icon.lightbulb:before {
6624
content: "\f0eb";
6625
}
6626
i.icon.linkedin.sign:before {
6627
content: "\f08c";
6628
}
6629
i.icon.linkedin:before {
6630
content: "\f0e1";
6631
}
6632
i.icon.linux:before {
6633
content: "\f17c";
6634
}
6635
i.icon.list.ordered:before {
6636
content: "\f0cb";
6637
}
6638
i.icon.list.unordered:before {
6639
content: "\f0ca";
6640
}
6641
i.icon.list:before {
6642
content: "\f03a";
6643
}
6644
i.icon.loading:before {
6645
content: "\f110";
6646
}
6647
i.icon.location:before {
6648
content: "\f124";
6649
}
6650
i.icon.lock:before {
6651
content: "\f023";
6652
}
6653
i.icon.long.arrow.down:before {
6654
content: "\f175";
6655
}
6656
i.icon.long.arrow.left:before {
6657
content: "\f177";
6658
}
6659
i.icon.long.arrow.right:before {
6660
content: "\f178";
6661
}
6662
i.icon.long.arrow.up:before {
6663
content: "\f176";
6664
}
6665
i.icon.magic:before {
6666
content: "\f0d0";
6667
}
6668
i.icon.magnet:before {
6669
content: "\f076";
6670
}
6671
i.icon.mail.outline:before {
6672
content: "\f003";
6673
}
6674
i.icon.mail.reply:before {
6675
content: "\f112";
6676
}
6677
i.icon.mail:before {
6678
content: "\f0e0";
6679
}
6680
i.icon.male:before {
6681
content: "\f183";
6682
}
6683
i.icon.map.marker:before {
6684
content: "\f041";
6685
}
6686
i.icon.map:before {
6687
content: "\f14e";
6688
}
6689
i.icon.maxcdn:before {
6690
content: "\f136";
6691
}
6692
i.icon.medkit:before {
6693
content: "\f0fa";
6694
}
6695
i.icon.meh:before {
6696
content: "\f11a";
6697
}
6698
i.icon.minus.sign.alternate:before {
6699
content: "\f146";
6700
}
6701
i.icon.minus.sign:before {
6702
content: "\f056";
6703
}
6704
i.icon.minus:before {
6705
content: "\f068";
6706
}
6707
i.icon.mobile:before {
6708
content: "\f10b";
6709
}
6710
i.icon.money:before {
6711
content: "\f0d6";
6712
}
6713
i.icon.moon:before {
6714
content: "\f186";
6715
}
6716
i.icon.move:before {
6717
content: "\f047";
6718
}
6719
i.icon.music:before {
6720
content: "\f001";
6721
}
6722
i.icon.mute:before {
6723
content: "\f131";
6724
}
6725
i.icon.off:before {
6726
content: "\f011";
6727
}
6728
i.icon.ok.circle:before {
6729
content: "\f05d";
6730
}
6731
i.icon.ok.sign:before {
6732
content: "\f058";
6733
}
6734
i.icon.paste:before {
6735
content: "\f0ea";
6736
}
6737
i.icon.pause:before {
6738
content: "\f04c";
6739
}
6740
i.icon.payment:before {
6741
content: "\f09d";
6742
}
6743
i.icon.pencil:before {
6744
content: "\f040";
6745
}
6746
i.icon.phone.sign:before {
6747
content: "\f098";
6748
}
6749
i.icon.phone:before {
6750
content: "\f095";
6751
}
6752
i.icon.photo:before {
6753
content: "\f03e";
6754
}
6755
i.icon.pin:before {
6756
content: "\f08d";
6757
}
6758
i.icon.pinterest.sign:before {
6759
content: "\f0d3";
6760
}
6761
i.icon.pinterest:before {
6762
content: "\f0d2";
6763
}
6764
i.icon.plane:before {
6765
content: "\f072";
6766
}
6767
i.icon.play.circle:before {
6768
content: "\f01d";
6769
}
6770
i.icon.play.sign:before {
6771
content: "\f144";
6772
}
6773
i.icon.play:before {
6774
content: "\f04b";
6775
}
6776
i.icon.pound:before {
6777
content: "\f154";
6778
}
6779
i.icon.print:before {
6780
content: "\f02f";
6781
}
6782
i.icon.puzzle.piece:before {
6783
content: "\f12e";
6784
}
6785
i.icon.qr.code:before {
6786
content: "\f029";
6787
}
6788
i.icon.question:before {
6789
content: "\f128";
6790
}
6791
i.icon.quote.left:before {
6792
content: "\f10d";
6793
}
6794
i.icon.quote.right:before {
6795
content: "\f10e";
6796
}
6797
i.icon.refresh:before {
6798
content: "\f021";
6799
}
6800
i.icon.remove.circle:before {
6801
content: "\f05c";
6802
}
6803
i.icon.remove.sign:before {
6804
content: "\f057";
6805
}
6806
i.icon.remove:before {
6807
content: "\f00d";
6808
}
6809
i.icon.renren:before {
6810
content: "\f18b";
6811
}
6812
i.icon.reorder:before {
6813
content: "\f0c9";
6814
}
6815
i.icon.repeat:before {
6816
content: "\f01e";
6817
}
6818
i.icon.reply.all.mail:before {
6819
content: "\f122";
6820
}
6821
i.icon.resize.full:before {
6822
content: "\f065";
6823
}
6824
i.icon.resize.horizontal:before {
6825
content: "\f07e";
6826
}
6827
i.icon.resize.small:before {
6828
content: "\f066";
6829
}
6830
i.icon.resize.vertical:before {
6831
content: "\f07d";
6832
}
6833
i.icon.retweet:before {
6834
content: "\f079";
6835
}
6836
i.icon.road:before {
6837
content: "\f018";
6838
}
6839
i.icon.rocket:before {
6840
content: "\f135";
6841
}
6842
i.icon.rss.sign:before {
6843
content: "\f143";
6844
}
6845
i.icon.rss:before {
6846
content: "\f09e";
6847
}
6848
i.icon.rupee:before {
6849
content: "\f156";
6850
}
6851
i.icon.save:before {
6852
content: "\f0c7";
6853
}
6854
i.icon.screenshot:before {
6855
content: "\f05b";
6856
}
6857
i.icon.search:before {
6858
content: "\f002";
6859
}
6860
i.icon.setting:before {
6861
content: "\f013";
6862
}
6863
i.icon.settings:before {
6864
content: "\f085";
6865
}
6866
i.icon.share.sign:before {
6867
content: "\f14d";
6868
}
6869
i.icon.share:before {
6870
content: "\f045";
6871
}
6872
i.icon.shield:before {
6873
content: "\f132";
6874
}
6875
i.icon.shuffle:before {
6876
content: "\f074";
6877
}
6878
i.icon.sign.in:before {
6879
content: "\f090";
6880
}
6881
i.icon.sign.out:before {
6882
content: "\f08b";
6883
}
6884
i.icon.sign:before {
6885
content: "\f0c8";
6886
}
6887
i.icon.signal:before {
6888
content: "\f012";
6889
}
6890
i.icon.sitemap:before {
6891
content: "\f0e8";
6892
}
6893
i.icon.skype:before {
6894
content: "\f17e";
6895
}
6896
i.icon.smile:before {
6897
content: "\f118";
6898
}
6899
i.icon.sort.ascending:before {
6900
content: "\f0de";
6901
}
6902
i.icon.sort.descending:before {
6903
content: "\f0dd";
6904
}
6905
i.icon.sort.alphabet.descending:before {
6906
content: "\f15e";
6907
}
6908
i.icon.sort.alphabet:before {
6909
content: "\f15d";
6910
}
6911
i.icon.sort.attributes.descending:before {
6912
content: "\f161";
6913
}
6914
i.icon.sort.attributes:before {
6915
content: "\f160";
6916
}
6917
i.icon.sort.order.descending:before {
6918
content: "\f163";
6919
}
6920
i.icon.sort.order:before {
6921
content: "\f162";
6922
}
6923
i.icon.sort:before {
6924
content: "\f0dc";
6925
}
6926
i.icon.stackexchange:before {
6927
content: "\f16c";
6928
}
6929
i.icon.star.empty:before {
6930
content: "\f006";
6931
}
6932
i.icon.star.half.empty:before {
6933
content: "\f123";
6934
}
6935
i.icon.star.half.full:before,
6936
i.icon.star.half:before {
6937
content: "\f089";
6938
}
6939
i.icon.star:before {
6940
content: "\f005";
6941
}
6942
i.icon.step.backward:before {
6943
content: "\f048";
6944
}
6945
i.icon.step.forward:before {
6946
content: "\f051";
6947
}
6948
i.icon.stethoscope:before {
6949
content: "\f0f1";
6950
}
6951
i.icon.stop:before {
6952
content: "\f04d";
6953
}
6954
i.icon.strikethrough:before {
6955
content: "\f0cc";
6956
}
6957
i.icon.subscript:before {
6958
content: "\f12c";
6959
}
6960
i.icon.suitcase:before {
6961
content: "\f0f2";
6962
}
6963
i.icon.sun:before {
6964
content: "\f185";
6965
}
6966
i.icon.superscript:before {
6967
content: "\f12b";
6968
}
6969
i.icon.table:before {
6970
content: "\f0ce";
6971
}
6972
i.icon.tablet:before {
6973
content: "\f10a";
6974
}
6975
i.icon.tag:before {
6976
content: "\f02b";
6977
}
6978
i.icon.tags:before {
6979
content: "\f02c";
6980
}
6981
i.icon.tasks:before {
6982
content: "\f0ae";
6983
}
6984
i.icon.terminal:before {
6985
content: "\f120";
6986
}
6987
i.icon.text.height:before {
6988
content: "\f034";
6989
}
6990
i.icon.text.width:before {
6991
content: "\f035";
6992
}
6993
i.icon.thumbs.down.outline:before {
6994
content: "\f088";
6995
}
6996
i.icon.thumbs.down:before {
6997
content: "\f165";
6998
}
6999
i.icon.thumbs.up.outline:before {
7000
content: "\f087";
7001
}
7002
i.icon.thumbs.up:before {
7003
content: "\f164";
7004
}
7005
i.icon.ticket:before {
7006
content: "\f145";
7007
}
7008
i.icon.time:before {
7009
content: "\f017";
7010
}
7011
i.icon.tint:before {
7012
content: "\f043";
7013
}
7014
i.icon.trash:before {
7015
content: "\f014";
7016
}
7017
i.icon.trello:before {
7018
content: "\f181";
7019
}
7020
i.icon.trophy:before {
7021
content: "\f091";
7022
}
7023
i.icon.truck:before {
7024
content: "\f0d1";
7025
}
7026
i.icon.tumblr.sign:before {
7027
content: "\f174";
7028
}
7029
i.icon.tumblr:before {
7030
content: "\f173";
7031
}
7032
i.icon.twitter.sign:before {
7033
content: "\f081";
7034
}
7035
i.icon.twitter:before {
7036
content: "\f099";
7037
}
7038
i.icon.umbrella:before {
7039
content: "\f0e9";
7040
}
7041
i.icon.underline:before {
7042
content: "\f0cd";
7043
}
7044
i.icon.undo:before {
7045
content: "\f0e2";
7046
}
7047
i.icon.unhide:before {
7048
content: "\f06e";
7049
}
7050
i.icon.unlink:before {
7051
content: "\f127";
7052
}
7053
i.icon.unlock.alternate:before {
7054
content: "\f13e";
7055
}
7056
i.icon.unlock:before {
7057
content: "\f09c";
7058
}
7059
i.icon.unmute:before {
7060
content: "\f130";
7061
}
7062
i.icon.up:before {
7063
content: "\f062";
7064
}
7065
i.icon.upload.disk:before {
7066
content: "\f093";
7067
}
7068
i.icon.upload:before {
7069
content: "\f01b";
7070
}
7071
i.icon.url:before {
7072
content: "\f0c1";
7073
}
7074
i.icon.user:before {
7075
content: "\f007";
7076
}
7077
i.icon.users:before {
7078
content: "\f0c0";
7079
}
7080
i.icon.video:before {
7081
content: "\f008";
7082
}
7083
i.icon.vk:before {
7084
content: "\f189";
7085
}
7086
i.icon.volume.down:before {
7087
content: "\f027";
7088
}
7089
i.icon.volume.off:before {
7090
content: "\f026";
7091
}
7092
i.icon.volume.up:before {
7093
content: "\f028";
7094
}
7095
i.icon.warning:before {
7096
content: "\f071";
7097
}
7098
i.icon.weibo:before {
7099
content: "\f18a";
7100
}
7101
i.icon.windows:before {
7102
content: "\f17a";
7103
}
7104
i.icon.won:before {
7105
content: "\f159";
7106
}
7107
i.icon.wrench:before {
7108
content: "\f0ad";
7109
}
7110
i.icon.xing.sign:before {
7111
content: "\f169";
7112
}
7113
i.icon.xing:before {
7114
content: "\f168";
7115
}
7116
i.icon.yen:before {
7117
content: "\f157";
7118
}
7119
i.icon.youtube.play:before {
7120
content: "\f16a";
7121
}
7122
i.icon.youtube.sign:before {
7123
content: "\f166";
7124
}
7125
i.icon.youtube:before {
7126
content: "\f167";
7127
}
7128
i.icon.yuan:before {
7129
content: "\f158";
7130
}
7131
i.icon.zoom.in:before {
7132
content: "\f00e";
7133
}
7134
i.icon.zoom.out:before {
7135
content: "\f010";
7136
}
7137
/*--------------
7138
Aliases
7139
---------------*/
7140
i.icon.check:before {
7141
content: "\f00c";
7142
}
7143
i.icon.close:before {
7144
content: "\f00d";
7145
}
7146
i.icon.delete:before {
7147
content: "\f00d";
7148
}
7149
i.icon.like:before {
7150
content: "\f004";
7151
}
7152
i.icon.plus:before {
7153
content: "\f067";
7154
}
7155
i.icon.signup:before {
7156
content: "\f044";
7157
}
7158
/*--------------
7159
Spacing Fix
7160
---------------*/
7161
/* stars are usually consecutive */
7162
i.icon.star {
7163
width: auto;
7164
margin: 0em;
7165
}
7166
/* left side icons */
7167
i.icon.left {
7168
width: auto;
7169
margin: 0em 0.5em 0em 0em;
7170
}
7171
/* right side icons */
7172
i.icon.search,
7173
i.icon.right {
7174
width: auto;
7175
margin: 0em 0em 0em 0.5em;
7176
}
7177
/*******************************
7178
Types
7179
*******************************/
7180
/*--------------
7181
Loading
7182
---------------*/
7183
i.icon.loading {
7184
-webkit-animation: icon-loading 2s linear infinite;
7185
-moz-animation: icon-loading 2s linear infinite;
7186
-ms-animation: icon-loading 2s linear infinite;
7187
animation: icon-loading 2s linear infinite;
7188
}
7189
@keyframes icon-loading {
7190
from {
7191
-webkit-transform: rotate(0deg);
7192
-moz-transform: rotate(0deg);
7193
-ms-transform: rotate(0deg);
7194
transform: rotate(0deg);
7195
}
7196
to {
7197
-webkit-transform: rotate(360deg);
7198
-moz-transform: rotate(360deg);
7199
-ms-transform: rotate(360deg);
7200
transform: rotate(360deg);
7201
}
7202
}
7203
@-moz-keyframes icon-loading {
7204
from {
7205
-moz-transform: rotate(0deg);
7206
transform: rotate(0deg);
7207
}
7208
to {
7209
-moz-transform: rotate(360deg);
7210
transform: rotate(360deg);
7211
}
7212
}
7213
@-webkit-keyframes icon-loading {
7214
from {
7215
-webkit-transform: rotate(0deg);
7216
transform: rotate(0deg);
7217
}
7218
to {
7219
-webkit-transform: rotate(360deg);
7220
transform: rotate(360deg);
7221
}
7222
}
7223
@-ms-keyframes icon-loading {
7224
from {
7225
-ms-transform: rotate(0deg);
7226
transform: rotate(0deg);
7227
}
7228
to {
7229
-ms-transform: rotate(360deg);
7230
transform: rotate(360deg);
7231
}
7232
}
7233
/*******************************
7234
States
7235
*******************************/
7236
i.icon.hover {
7237
opacity: 1;
7238
}
7239
i.icon.active {
7240
opacity: 1;
7241
}
7242
i.emphasized.icon {
7243
opacity: 1;
7244
}
7245
i.icon.disabled {
7246
opacity: 0.3;
7247
}
7248
/*******************************
7249
Variations
7250
*******************************/
7251
/*-------------------
7252
Link
7253
--------------------*/
7254
i.link.icon {
7255
cursor: pointer;
7256
opacity: 0.7;
7257
-webkit-transition: opacity 0.3s ease-out;
7258
-moz-transition: opacity 0.3s ease-out;
7259
transition: opacity 0.3s ease-out;
7260
}
7261
i.link.icon:hover {
7262
opacity: 1 !important;
7263
}
7264
/*-------------------
7265
Circular
7266
--------------------*/
7267
i.circular.icon {
7268
border-radius: 500em !important;
7269
padding: 0.5em 0.35em !important;
7270
-webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
7271
box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
7272
line-height: 1 !important;
7273
width: 2em !important;
7274
height: 2em !important;
7275
}
7276
i.circular.inverted.icon {
7277
border: none;
7278
-webkit-box-shadow: none;
7279
box-shadow: none;
7280
}
7281
/*-------------------
7282
Flipped
7283
--------------------*/
7284
i.flipped.icon,
7285
i.horizontally.flipped.icon {
7286
-webkit-transform: scale(-1, 1);
7287
-moz-transform: scale(-1, 1);
7288
-ms-transform: scale(-1, 1);
7289
transform: scale(-1, 1);
7290
}
7291
i.vertically.flipped.icon {
7292
-webkit-transform: scale(1, -1);
7293
-moz-transform: scale(1, -1);
7294
-ms-transform: scale(1, -1);
7295
transform: scale(1, -1);
7296
}
7297
/*-------------------
7298
Rotated
7299
--------------------*/
7300
i.rotated.icon,
7301
i.right.rotated.icon,
7302
i.clockwise.rotated.icon {
7303
-webkit-transform: rotate(90deg);
7304
-moz-transform: rotate(90deg);
7305
-ms-transform: rotate(90deg);
7306
transform: rotate(90deg);
7307
}
7308
i.left.rotated.icon,
7309
i.counterclockwise.rotated.icon {
7310
-webkit-transform: rotate(-90deg);
7311
-moz-transform: rotate(-90deg);
7312
-ms-transform: rotate(-90deg);
7313
transform: rotate(-90deg);
7314
}
7315
/*-------------------
7316
Square
7317
--------------------*/
7318
i.square.icon {
7319
width: 2em;
7320
height: 2em;
7321
padding: 0.5em 0.35em !important;
7322
-webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
7323
box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
7324
vertical-align: baseline;
7325
}
7326
i.square.inverted.icon {
7327
border: none;
7328
-webkit-box-shadow: none;
7329
box-shadow: none;
7330
}
7331
/*-------------------
7332
Inverted
7333
--------------------*/
7334
i.inverted.icon {
7335
background-color: #222222;
7336
color: #FFFFFF;
7337
-moz-osx-font-smoothing: grayscale;
7338
}
7339
/*-------------------
7340
Colors
7341
--------------------*/
7342
i.blue.icon {
7343
color: #6ECFF5 !important;
7344
}
7345
i.black.icon {
7346
color: #5C6166 !important;
7347
}
7348
i.green.icon {
7349
color: #A1CF64 !important;
7350
}
7351
i.red.icon {
7352
color: #D95C5C !important;
7353
}
7354
i.purple.icon {
7355
color: #564F8A !important;
7356
}
7357
i.orange.icon {
7358
color: #F05940 !important;
7359
}
7360
i.teal.icon {
7361
color: #00B5AD !important;
7362
}
7363
/*-------------------
7364
Inverted Colors
7365
--------------------*/
7366
i.inverted.black.icon {
7367
background-color: #5C6166 !important;
7368
color: #FFFFFF !important;
7369
}
7370
i.inverted.blue.icon {
7371
background-color: #6ECFF5 !important;
7372
color: #FFFFFF !important;
7373
}
7374
i.inverted.green.icon {
7375
background-color: #A1CF64 !important;
7376
color: #FFFFFF !important;
7377
}
7378
i.inverted.red.icon {
7379
background-color: #D95C5C !important;
7380
color: #FFFFFF !important;
7381
}
7382
i.inverted.purple.icon {
7383
background-color: #564F8A !important;
7384
color: #FFFFFF !important;
7385
}
7386
i.inverted.orange.icon {
7387
background-color: #F05940 !important;
7388
color: #FFFFFF !important;
7389
}
7390
i.inverted.teal.icon {
7391
background-color: #00B5AD !important;
7392
color: #FFFFFF !important;
7393
}
7394
/*-------------------
7395
Sizes
7396
--------------------*/
7397
i.small.icon {
7398
font-size: 0.875em;
7399
}
7400
i.icon {
7401
font-size: 1em;
7402
}
7403
i.large.icon {
7404
font-size: 1.5em;
7405
vertical-align: middle;
7406
}
7407
i.big.icon {
7408
font-size: 2em;
7409
vertical-align: middle;
7410
}
7411
i.huge.icon {
7412
font-size: 4em;
7413
vertical-align: middle;
7414
}
7415
i.massive.icon {
7416
font-size: 8em;
7417
vertical-align: middle;
7418
}
7419
7420
/*
7421
* # Semantic - Image
7422
* http://github.com/jlukic/semantic-ui/
7423
*
7424
*
7425
* Copyright 2014 Contributors
7426
* Released under the MIT license
7427
* http://opensource.org/licenses/MIT
7428
*
7429
*/
7430
/*******************************
7431
Image
7432
*******************************/
7433
.ui.image {
7434
position: relative;
7435
display: inline-block;
7436
vertical-align: middle;
7437
max-width: 100%;
7438
background-color: rgba(0, 0, 0, 0.05);
7439
}
7440
img.ui.image {
7441
display: block;
7442
background: none;
7443
}
7444
.ui.image img {
7445
display: block;
7446
max-width: 100%;
7447
height: auto;
7448
}
7449
/*******************************
7450
States
7451
*******************************/
7452
.ui.disabled.image {
7453
cursor: default;
7454
opacity: 0.3;
7455
}
7456
/*******************************
7457
Variations
7458
*******************************/
7459
/*--------------
7460
Rounded
7461
---------------*/
7462
.ui.rounded.images .image,
7463
.ui.rounded.images img,
7464
.ui.rounded.image img,
7465
.ui.rounded.image {
7466
border-radius: 0.3125em;
7467
}
7468
/*--------------
7469
Circular
7470
---------------*/
7471
.ui.circular.images .image,
7472
.ui.circular.images img,
7473
.ui.circular.image img,
7474
.ui.circular.image {
7475
border-radius: 500rem;
7476
}
7477
/*--------------
7478
Fluid
7479
---------------*/
7480
.ui.fluid.images,
7481
.ui.fluid.image,
7482
.ui.fluid.images img,
7483
.ui.fluid.image img {
7484
display: block;
7485
width: 100%;
7486
}
7487
/*--------------
7488
Avatar
7489
---------------*/
7490
.ui.avatar.images .image,
7491
.ui.avatar.images img,
7492
.ui.avatar.image img,
7493
.ui.avatar.image {
7494
margin-right: 0.5em;
7495
display: inline-block;
7496
width: 2em;
7497
height: 2em;
7498
border-radius: 500rem;
7499
}
7500
/*-------------------
7501
Floated
7502
--------------------*/
7503
.ui.floated.image,
7504
.ui.floated.images {
7505
float: left;
7506
margin-right: 1em;
7507
margin-bottom: 1em;
7508
}
7509
.ui.right.floated.images,
7510
.ui.right.floated.image {
7511
float: right;
7512
margin-bottom: 1em;
7513
margin-left: 1em;
7514
}
7515
/*--------------
7516
Sizes
7517
---------------*/
7518
.ui.tiny.images .image,
7519
.ui.tiny.images img,
7520
.ui.tiny.image {
7521
width: 20px;
7522
font-size: 0.7rem;
7523
}
7524
.ui.mini.images .image,
7525
.ui.mini.images img,
7526
.ui.mini.image {
7527
width: 35px;
7528
font-size: 0.8rem;
7529
}
7530
.ui.small.images .image,
7531
.ui.small.images img,
7532
.ui.small.image {
7533
width: 80px;
7534
font-size: 0.9rem;
7535
}
7536
.ui.medium.images .image,
7537
.ui.medium.images img,
7538
.ui.medium.image {
7539
width: 300px;
7540
font-size: 1rem;
7541
}
7542
.ui.large.images .image,
7543
.ui.large.images img,
7544
.ui.large.image {
7545
width: 450px;
7546
font-size: 1.1rem;
7547
}
7548
.ui.huge.images .image,
7549
.ui.huge.images img,
7550
.ui.huge.image {
7551
width: 600px;
7552
font-size: 1.2rem;
7553
}
7554
/*******************************
7555
Groups
7556
*******************************/
7557
.ui.images {
7558
font-size: 0em;
7559
margin: 0em -0.25rem 0rem;
7560
}
7561
.ui.images .image,
7562
.ui.images img {
7563
display: inline-block;
7564
margin: 0em 0.25em 0.5em;
7565
}
7566
7567
/*
7568
* # Semantic - Input
7569
* http://github.com/jlukic/semantic-ui/
7570
*
7571
*
7572
* Copyright 2014 Contributors
7573
* Released under the MIT license
7574
* http://opensource.org/licenses/MIT
7575
*
7576
*/
7577
/*******************************
7578
Standard
7579
*******************************/
7580
/*--------------------
7581
Inputs
7582
---------------------*/
7583
.ui.input {
7584
display: inline-block;
7585
position: relative;
7586
color: rgba(0, 0, 0, 0.7);
7587
}
7588
.ui.input input {
7589
width: 100%;
7590
font-family: "Helvetica Neue", "Helvetica", Arial;
7591
margin: 0em;
7592
padding: 0.65em 1em;
7593
font-size: 1em;
7594
background-color: #FFFFFF;
7595
border: 1px solid rgba(0, 0, 0, 0.15);
7596
outline: none;
7597
color: rgba(0, 0, 0, 0.7);
7598
border-radius: 0.3125em;
7599
-webkit-transition: background-color 0.3s ease-out, -webkit-box-shadow 0.2s ease, border-color 0.2s ease;
7600
-moz-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease;
7601
transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease;
7602
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
7603
-webkit-box-sizing: border-box;
7604
-moz-box-sizing: border-box;
7605
-ms-box-sizing: border-box;
7606
box-sizing: border-box;
7607
}
7608
/*--------------------
7609
Placeholder
7610
---------------------*/
7611
/* browsers require these rules separate */
7612
.ui.input::-webkit-input-placeholder {
7613
color: #BBBBBB;
7614
}
7615
.ui.input::-moz-placeholder {
7616
color: #BBBBBB;
7617
}
7618
/*******************************
7619
States
7620
*******************************/
7621
/*--------------------
7622
Active
7623
---------------------*/
7624
.ui.input input:active,
7625
.ui.input.down input {
7626
border-color: rgba(0, 0, 0, 0.3);
7627
background-color: #FAFAFA;
7628
}
7629
/*--------------------
7630
Loading
7631
---------------------*/
7632
.ui.loading.input > .icon {
7633
background: url(../images/loader-mini.gif) no-repeat 50% 50%;
7634
}
7635
.ui.loading.input > .icon:before,
7636
.ui.loading.input > .icon:after {
7637
display: none;
7638
}
7639
/*--------------------
7640
Focus
7641
---------------------*/
7642
.ui.input.focus input,
7643
.ui.input input:focus {
7644
border-color: rgba(0, 0, 0, 0.2);
7645
color: rgba(0, 0, 0, 0.85);
7646
}
7647
.ui.input.focus input input::-webkit-input-placeholder,
7648
.ui.input input:focus input::-webkit-input-placeholder {
7649
color: #AAAAAA;
7650
}
7651
.ui.input.focus input input::-moz-placeholder,
7652
.ui.input input:focus input::-moz-placeholder {
7653
color: #AAAAAA;
7654
}
7655
/*--------------------
7656
Error
7657
---------------------*/
7658
.ui.input.error input {
7659
background-color: #FFFAFA;
7660
border-color: #E7BEBE;
7661
color: #D95C5C;
7662
}
7663
/* Error Placeholder */
7664
.ui.input.error input ::-webkit-input-placeholder {
7665
color: rgba(255, 80, 80, 0.4);
7666
}
7667
.ui.input.error input ::-moz-placeholder {
7668
color: rgba(255, 80, 80, 0.4);
7669
}
7670
.ui.input.error input :focus::-webkit-input-placeholder {
7671
color: rgba(255, 80, 80, 0.7);
7672
}
7673
.ui.input.error input :focus::-moz-placeholder {
7674
color: rgba(255, 80, 80, 0.7);
7675
}
7676
/*******************************
7677
Variations
7678
*******************************/
7679
/*--------------------
7680
Transparent
7681
---------------------*/
7682
.ui.transparent.input input {
7683
border: none;
7684
background-color: transparent;
7685
}
7686
/*--------------------
7687
Icon
7688
---------------------*/
7689
.ui.icon.input > .icon {
7690
cursor: default;
7691
position: absolute;
7692
opacity: 0.5;
7693
top: 0px;
7694
right: 0px;
7695
margin: 0em;
7696
width: 2.6em;
7697
height: 100%;
7698
padding-top: 0.82em;
7699
text-align: center;
7700
border-radius: 0em 0.3125em 0.3125em 0em;
7701
-webkit-box-sizing: border-box;
7702
-moz-box-sizing: border-box;
7703
-ms-box-sizing: border-box;
7704
box-sizing: border-box;
7705
-webkit-transition: opacity 0.3s ease-out;
7706
-moz-transition: opacity 0.3s ease-out;
7707
transition: opacity 0.3s ease-out;
7708
}
7709
.ui.icon.input > .link.icon {
7710
cursor: pointer;
7711
}
7712
.ui.icon.input input {
7713
padding-right: 3em !important;
7714
}
7715
.ui.icon.input > .circular.icon {
7716
top: 0.35em;
7717
right: 0.5em;
7718
}
7719
/* Left Side */
7720
.ui.left.icon.input > .icon {
7721
right: auto;
7722
left: 1px;
7723
border-radius: 0.3125em 0em 0em 0.3125em;
7724
}
7725
.ui.left.icon.input > .circular.icon {
7726
right: auto;
7727
left: 0.5em;
7728
}
7729
.ui.left.icon.input > input {
7730
padding-left: 3em !important;
7731
padding-right: 1.2em !important;
7732
}
7733
/* Focus */
7734
.ui.icon.input > input:focus ~ .icon {
7735
opacity: 1;
7736
}
7737
/*--------------------
7738
Labeled
7739
---------------------*/
7740
.ui.labeled.input .corner.label {
7741
font-size: 0.7em;
7742
border-radius: 0 0.3125em;
7743
}
7744
.ui.labeled.input .left.corner.label {
7745
border-radius: 0.3125em 0;
7746
}
7747
.ui.labeled.input input {
7748
padding-right: 2.5em !important;
7749
}
7750
/* Spacing with corner label */
7751
.ui.labeled.icon.input:not(.left) > input {
7752
padding-right: 3.25em !important;
7753
}
7754
.ui.labeled.icon.input:not(.left) > .icon {
7755
margin-right: 1.25em;
7756
}
7757
/*--------------------
7758
Action
7759
---------------------*/
7760
.ui.action.input {
7761
display: table;
7762
}
7763
.ui.action.input > input {
7764
display: table-cell;
7765
border-top-right-radius: 0px !important;
7766
border-bottom-right-radius: 0px !important;
7767
border-right: none;
7768
}
7769
.ui.action.input > .button,
7770
.ui.action.input > .buttons {
7771
display: table-cell;
7772
border-top-left-radius: 0px;
7773
border-bottom-left-radius: 0px;
7774
white-space: nowrap;
7775
}
7776
.ui.action.input > .button > .icon,
7777
.ui.action.input > .buttons > .button > .icon {
7778
display: inline;
7779
vertical-align: top;
7780
}
7781
.ui.fluid.action.input {
7782
display: table;
7783
width: 100%;
7784
}
7785
.ui.fluid.action.input > .button {
7786
width: 0.01%;
7787
}
7788
/*--------------------
7789
Fluid
7790
---------------------*/
7791
.ui.fluid.input {
7792
display: block;
7793
}
7794
/*--------------------
7795
Size
7796
---------------------*/
7797
.ui.mini.input {
7798
font-size: 0.8125em;
7799
}
7800
.ui.small.input {
7801
font-size: 0.875em;
7802
}
7803
.ui.input {
7804
font-size: 1em;
7805
}
7806
.ui.large.input {
7807
font-size: 1.125em;
7808
}
7809
.ui.big.input {
7810
font-size: 1.25em;
7811
}
7812
.ui.huge.input {
7813
font-size: 1.375em;
7814
}
7815
.ui.massive.input {
7816
font-size: 1.5em;
7817
}
7818
7819
/*
7820
* # Semantic - Label
7821
* http://github.com/jlukic/semantic-ui/
7822
*
7823
*
7824
* Copyright 2014 Contributors
7825
* Released under the MIT license
7826
* http://opensource.org/licenses/MIT
7827
*
7828
*/
7829
/*******************************
7830
Label
7831
*******************************/
7832
.ui.label {
7833
display: inline-block;
7834
vertical-align: middle;
7835
margin: -0.25em 0.25em 0em;
7836
background-color: #E8E8E8;
7837
border-color: #E8E8E8;
7838
padding: 0.5em 0.8em;
7839
color: rgba(0, 0, 0, 0.65);
7840
text-transform: uppercase;
7841
font-weight: normal;
7842
border-radius: 0.325em;
7843
-webkit-box-sizing: border-box;
7844
-moz-box-sizing: border-box;
7845
-ms-box-sizing: border-box;
7846
box-sizing: border-box;
7847
-webkit-transition: background 0.1s linear
7848
;
7849
-moz-transition: background 0.1s linear
7850
;
7851
transition: background 0.1s linear
7852
;
7853
}
7854
.ui.label:first-child {
7855
margin-left: 0em;
7856
}
7857
.ui.label:last-child {
7858
margin-right: 0em;
7859
}
7860
/* Link */
7861
a.ui.label {
7862
cursor: pointer;
7863
}
7864
/* Inside Link */
7865
.ui.label a {
7866
cursor: pointer;
7867
color: inherit;
7868
opacity: 0.8;
7869
-webkit-transition: 0.2s opacity ease;
7870
-moz-transition: 0.2s opacity ease;
7871
transition: 0.2s opacity ease;
7872
}
7873
.ui.label a:hover {
7874
opacity: 1;
7875
}
7876
/* Detail */
7877
.ui.label .detail {
7878
display: inline-block;
7879
margin-left: 0.5em;
7880
font-weight: bold;
7881
opacity: 0.8;
7882
}
7883
/* Icon */
7884
.ui.label .icon {
7885
width: auto;
7886
}
7887
/* Removable label */
7888
.ui.label .delete.icon {
7889
cursor: pointer;
7890
margin: 0em 0em 0em 0.5em;
7891
opacity: 0.7;
7892
-webkit-transition: background 0.1s linear
7893
;
7894
-moz-transition: background 0.1s linear
7895
;
7896
transition: background 0.1s linear
7897
;
7898
}
7899
.ui.label .delete.icon:hover {
7900
opacity: 0.99;
7901
}
7902
/*-------------------
7903
Coupling
7904
--------------------*/
7905
/* Padding on next content after a label */
7906
.ui.segment > .attached.label:first-child + * {
7907
margin-top: 2.5em;
7908
}
7909
.ui.segment > .bottom.attached.label:first-child ~ :last-child {
7910
margin-top: 0em;
7911
margin-bottom: 2.5em;
7912
}
7913
/*******************************
7914
Types
7915
*******************************/
7916
.ui.image.label {
7917
width: auto !important;
7918
margin-top: 0em;
7919
margin-bottom: 0em;
7920
padding-top: 0.4em;
7921
padding-bottom: 0.4em;
7922
line-height: 1.5em;
7923
vertical-align: baseline;
7924
text-transform: none;
7925
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
7926
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
7927
}
7928
.ui.image.label img {
7929
display: inline-block;
7930
height: 2.25em;
7931
margin: -0.4em 0.8em -0.4em -0.8em;
7932
vertical-align: top;
7933
border-radius: 0.325em 0em 0em 0.325em;
7934
}
7935
/*******************************
7936
States
7937
*******************************/
7938
/*-------------------
7939
Disabled
7940
--------------------*/
7941
.ui.label.disabled {
7942
opacity: 0.5;
7943
}
7944
/*-------------------
7945
Hover
7946
--------------------*/
7947
a.ui.labels .label:hover,
7948
a.ui.label:hover {
7949
background-color: #E0E0E0;
7950
border-color: #E0E0E0;
7951
color: rgba(0, 0, 0, 0.7);
7952
}
7953
.ui.labels a.label:hover:before,
7954
a.ui.label:hover:before {
7955
background-color: #E0E0E0;
7956
color: rgba(0, 0, 0, 0.7);
7957
}
7958
/*-------------------
7959
Visible
7960
--------------------*/
7961
.ui.labels.visible .label,
7962
.ui.label.visible {
7963
display: inline-block !important;
7964
}
7965
/*-------------------
7966
Hidden
7967
--------------------*/
7968
.ui.labels.hidden .label,
7969
.ui.label.hidden {
7970
display: none !important;
7971
}
7972
/*******************************
7973
Variations
7974
*******************************/
7975
/*-------------------
7976
Tag
7977
--------------------*/
7978
.ui.tag.labels .label,
7979
.ui.tag.label {
7980
margin-left: 1em;
7981
position: relative;
7982
padding: 0.33em 1.3em 0.33em 1.4em;
7983
border-radius: 0px 3px 3px 0px;
7984
}
7985
.ui.tag.labels .label:before,
7986
.ui.tag.label:before {
7987
position: absolute;
7988
top: 0.3em;
7989
left: 0.3em;
7990
content: '';
7991
margin-left: -1em;
7992
background-image: none;
7993
width: 1.5em;
7994
height: 1.5em;
7995
-webkit-transform: rotate(45deg);
7996
-moz-transform: rotate(45deg);
7997
-ms-transform: rotate(45deg);
7998
transform: rotate(45deg);
7999
-webkit-transition: background 0.1s linear
8000
;
8001
-moz-transition: background 0.1s linear
8002
;
8003
transition: background 0.1s linear
8004
;
8005
}
8006
.ui.tag.labels .label:after,
8007
.ui.tag.label:after {
8008
position: absolute;
8009
content: '';
8010
top: 50%;
8011
left: -0.25em;
8012
margin-top: -0.3em;
8013
background-color: #FFFFFF;
8014
width: 0.55em;
8015
height: 0.55em;
8016
-webkit-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
8017
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
8018
border-radius: 100px 100px 100px 100px;
8019
}
8020
/*-------------------
8021
Ribbon
8022
--------------------*/
8023
.ui.ribbon.label {
8024
position: relative;
8025
margin: 0em 0.2em;
8026
left: -2rem;
8027
padding-left: 2rem;
8028
border-radius: 0px 4px 4px 0px;
8029
border-color: rgba(0, 0, 0, 0.15);
8030
}
8031
.ui.ribbon.label:after {
8032
position: absolute;
8033
content: "";
8034
top: 100%;
8035
left: 0%;
8036
border-top: 0em solid transparent;
8037
border-right-width: 1em;
8038
border-right-color: inherit;
8039
border-right-style: solid;
8040
border-bottom: 1em solid transparent;
8041
border-left: 0em solid transparent;
8042
width: 0em;
8043
height: 0em;
8044
}
8045
/*-------------------
8046
Attached
8047
--------------------*/
8048
.ui.top.attached.label,
8049
.ui.attached.label {
8050
width: 100%;
8051
position: absolute;
8052
margin: 0em;
8053
top: 0em;
8054
left: 0em;
8055
padding: 0.75em 1em;
8056
border-radius: 4px 4px 0em 0em;
8057
}
8058
.ui.bottom.attached.label {
8059
top: auto;
8060
bottom: 0em;
8061
border-radius: 0em 0em 4px 4px;
8062
}
8063
.ui.top.left.attached.label {
8064
width: auto;
8065
margin-top: 0em !important;
8066
border-radius: 4px 0em 4px 0em;
8067
}
8068
.ui.top.right.attached.label {
8069
width: auto;
8070
left: auto;
8071
right: 0em;
8072
border-radius: 0em 4px 0em 4px;
8073
}
8074
.ui.bottom.left.attached.label {
8075
width: auto;
8076
top: auto;
8077
bottom: 0em;
8078
border-radius: 4px 0em 0em 4px;
8079
}
8080
.ui.bottom.right.attached.label {
8081
top: auto;
8082
bottom: 0em;
8083
left: auto;
8084
right: 0em;
8085
width: auto;
8086
border-radius: 0px 4px 0px 4px;
8087
}
8088
/*-------------------
8089
Corner Label
8090
--------------------*/
8091
.ui.corner.label {
8092
background-color: transparent;
8093
position: absolute;
8094
top: 0em;
8095
right: 0em;
8096
z-index: 10;
8097
margin: 0em;
8098
width: 3em;
8099
height: 3em;
8100
padding: 0em;
8101
text-align: center;
8102
-webkit-transition: color 0.2s ease;
8103
-moz-transition: color 0.2s ease;
8104
transition: color 0.2s ease;
8105
}
8106
.ui.corner.label:after {
8107
position: absolute;
8108
content: "";
8109
right: 0em;
8110
top: 0em;
8111
z-index: -1;
8112
width: 0em;
8113
height: 0em;
8114
border-top: 0em solid transparent;
8115
border-right: 3em solid transparent;
8116
border-bottom: 3em solid transparent;
8117
border-left: 0em solid transparent;
8118
border-right-color: inherit;
8119
-webkit-transition: border-color 0.2s ease;
8120
-moz-transition: border-color 0.2s ease;
8121
transition: border-color 0.2s ease;
8122
}
8123
.ui.corner.label .icon {
8124
font-size: 0.875em;
8125
margin: 0.5em 0em 0em 1.25em;
8126
}
8127
.ui.corner.label .text {
8128
display: inline-block;
8129
font-weight: bold;
8130
margin: 0.5em 0em 0em 1em;
8131
width: 2.5em;
8132
font-size: 0.875em;
8133
text-align: center;
8134
-webkit-transform: rotate(45deg);
8135
-moz-transform: rotate(45deg);
8136
-ms-transform: rotate(45deg);
8137
transform: rotate(45deg);
8138
}
8139
/* Coupling */
8140
.ui.rounded.image > .ui.corner.label,
8141
.ui.input > .ui.corner.label,
8142
.ui.segment > .ui.corner.label {
8143
overflow: hidden;
8144
}
8145
.ui.segment > .ui.corner.label {
8146
top: -1px;
8147
right: -1px;
8148
}
8149
.ui.segment > .ui.left.corner.label {
8150
right: auto;
8151
left: -1px;
8152
}
8153
.ui.input > .ui.corner.label {
8154
top: 1px;
8155
right: 1px;
8156
}
8157
.ui.input > .ui.right.corner.label {
8158
right: auto;
8159
left: 1px;
8160
}
8161
/* Left Corner */
8162
.ui.left.corner.label,
8163
.ui.left.corner.label:after {
8164
right: auto;
8165
left: 0em;
8166
}
8167
.ui.left.corner.label:after {
8168
border-top: 3em solid transparent;
8169
border-right: 3em solid transparent;
8170
border-bottom: 0em solid transparent;
8171
border-left: 0em solid transparent;
8172
border-top-color: inherit;
8173
}
8174
.ui.left.corner.label .icon {
8175
margin: 0.5em 0em 0em -1em;
8176
}
8177
.ui.left.corner.label .text {
8178
margin: 0.5em 0em 0em -1em;
8179
-webkit-transform: rotate(-45deg);
8180
-moz-transform: rotate(-45deg);
8181
-ms-transform: rotate(-45deg);
8182
transform: rotate(-45deg);
8183
}
8184
/* Hover */
8185
.ui.corner.label:hover {
8186
background-color: transparent;
8187
}
8188
/*-------------------
8189
Fluid
8190
--------------------*/
8191
.ui.label.fluid,
8192
.ui.fluid.labels > .label {
8193
width: 100%;
8194
-webkit-box-sizing: border-box;
8195
-moz-box-sizing: border-box;
8196
-ms-box-sizing: border-box;
8197
box-sizing: border-box;
8198
}
8199
/*-------------------
8200
Inverted
8201
--------------------*/
8202
.ui.inverted.labels .label,
8203
.ui.inverted.label {
8204
color: #FFFFFF !important;
8205
}
8206
/*-------------------
8207
Colors
8208
--------------------*/
8209
/*--- Black ---*/
8210
.ui.black.labels .label,
8211
.ui.black.label {
8212
background-color: #5C6166 !important;
8213
border-color: #5C6166 !important;
8214
color: #FFFFFF !important;
8215
}
8216
.ui.labels .black.label:before,
8217
.ui.black.labels .label:before,
8218
.ui.black.label:before {
8219
background-color: #5C6166 !important;
8220
}
8221
/* Hover */
8222
a.ui.black.labels .label:hover,
8223
a.ui.black.label:hover {
8224
background-color: #333333 !important;
8225
border-color: #333333 !important;
8226
}
8227
.ui.labels a.black.label:hover:before,
8228
.ui.black.labels a.label:hover:before,
8229
a.ui.black.label:hover:before {
8230
background-color: #333333 !important;
8231
}
8232
/* Corner */
8233
.ui.black.corner.label,
8234
.ui.black.corner.label:hover {
8235
background-color: transparent !important;
8236
}
8237
/* Ribbon */
8238
.ui.black.ribbon.label {
8239
border-color: #333333 !important;
8240
}
8241
/*--- Green ---*/
8242
.ui.green.labels .label,
8243
.ui.green.label {
8244
background-color: #A1CF64 !important;
8245
border-color: #A1CF64 !important;
8246
color: #FFFFFF !important;
8247
}
8248
.ui.labels .green.label:before,
8249
.ui.green.labels .label:before,
8250
.ui.green.label:before {
8251
background-color: #A1CF64 !important;
8252
}
8253
/* Hover */
8254
a.ui.green.labels .label:hover,
8255
a.ui.green.label:hover {
8256
background-color: #89B84C !important;
8257
border-color: #89B84C !important;
8258
}
8259
.ui.labels a.green.label:hover:before,
8260
.ui.green.labels a.label:hover:before,
8261
a.ui.green.label:hover:before {
8262
background-color: #89B84C !important;
8263
}
8264
/* Corner */
8265
.ui.green.corner.label,
8266
.ui.green.corner.label:hover {
8267
background-color: transparent !important;
8268
}
8269
/* Ribbon */
8270
.ui.green.ribbon.label {
8271
border-color: #89B84C !important;
8272
}
8273
/*--- Red ---*/
8274
.ui.red.labels .label,
8275
.ui.red.label {
8276
background-color: #D95C5C !important;
8277
border-color: #D95C5C !important;
8278
color: #FFFFFF !important;
8279
}
8280
.ui.labels .red.label:before,
8281
.ui.red.labels .label:before,
8282
.ui.red.label:before {
8283
background-color: #D95C5C !important;
8284
}
8285
/* Corner */
8286
.ui.red.corner.label,
8287
.ui.red.corner.label:hover {
8288
background-color: transparent !important;
8289
}
8290
/* Hover */
8291
a.ui.red.labels .label:hover,
8292
a.ui.red.label:hover {
8293
background-color: #DE3859 !important;
8294
border-color: #DE3859 !important;
8295
color: #FFFFFF !important;
8296
}
8297
.ui.labels a.red.label:hover:before,
8298
.ui.red.labels a.label:hover:before,
8299
a.ui.red.label:hover:before {
8300
background-color: #DE3859 !important;
8301
}
8302
/* Ribbon */
8303
.ui.red.ribbon.label {
8304
border-color: #DE3859 !important;
8305
}
8306
/*--- Blue ---*/
8307
.ui.blue.labels .label,
8308
.ui.blue.label {
8309
background-color: #6ECFF5 !important;
8310
border-color: #6ECFF5 !important;
8311
color: #FFFFFF !important;
8312
}
8313
.ui.labels .blue.label:before,
8314
.ui.blue.labels .label:before,
8315
.ui.blue.label:before {
8316
background-color: #6ECFF5 !important;
8317
}
8318
/* Hover */
8319
a.ui.blue.labels .label:hover,
8320
.ui.blue.labels a.label:hover,
8321
a.ui.blue.label:hover {
8322
background-color: #1AB8F3 !important;
8323
border-color: #1AB8F3 !important;
8324
color: #FFFFFF !important;
8325
}
8326
.ui.labels a.blue.label:hover:before,
8327
.ui.blue.labels a.label:hover:before,
8328
a.ui.blue.label:hover:before {
8329
background-color: #1AB8F3 !important;
8330
}
8331
/* Corner */
8332
.ui.blue.corner.label,
8333
.ui.blue.corner.label:hover {
8334
background-color: transparent !important;
8335
}
8336
/* Ribbon */
8337
.ui.blue.ribbon.label {
8338
border-color: #1AB8F3 !important;
8339
}
8340
/*--- Purple ---*/
8341
.ui.purple.labels .label,
8342
.ui.purple.label {
8343
background-color: #564F8A !important;
8344
border-color: #564F8A !important;
8345
color: #FFFFFF !important;
8346
}
8347
.ui.labels .purple.label:before,
8348
.ui.purple.labels .label:before,
8349
.ui.purple.label:before {
8350
background-color: #564F8A !important;
8351
}
8352
/* Hover */
8353
a.ui.purple.labels .label:hover,
8354
.ui.purple.labels a.label:hover,
8355
a.ui.purple.label:hover {
8356
background-color: #3E3773 !important;
8357
border-color: #3E3773 !important;
8358
color: #FFFFFF !important;
8359
}
8360
.ui.labels a.purple.label:hover:before,
8361
.ui.purple.labels a.label:hover:before,
8362
a.ui.purple.label:hover:before {
8363
background-color: #3E3773 !important;
8364
}
8365
/* Corner */
8366
.ui.purple.corner.label,
8367
.ui.purple.corner.label:hover {
8368
background-color: transparent !important;
8369
}
8370
/* Ribbon */
8371
.ui.purple.ribbon.label {
8372
border-color: #3E3773 !important;
8373
}
8374
/*--- Orange ---*/
8375
.ui.orange.labels .label,
8376
.ui.orange.label {
8377
background-color: #F05940 !important;
8378
border-color: #F05940 !important;
8379
color: #FFFFFF !important;
8380
}
8381
.ui.labels .orange.label:before,
8382
.ui.orange.labels .label:before,
8383
.ui.orange.label:before {
8384
background-color: #F05940 !important;
8385
}
8386
/* Hover */
8387
a.ui.orange.labels .label:hover,
8388
.ui.orange.labels a.label:hover,
8389
a.ui.orange.label:hover {
8390
background-color: #FF4121 !important;
8391
border-color: #FF4121 !important;
8392
color: #FFFFFF !important;
8393
}
8394
.ui.labels a.orange.label:hover:before,
8395
.ui.orange.labels a.label:hover:before,
8396
a.ui.orange.label:hover:before {
8397
background-color: #FF4121 !important;
8398
}
8399
/* Corner */
8400
.ui.orange.corner.label,
8401
.ui.orange.corner.label:hover {
8402
background-color: transparent !important;
8403
}
8404
/* Ribbon */
8405
.ui.orange.ribbon.label {
8406
border-color: #FF4121 !important;
8407
}
8408
/*--- Teal ---*/
8409
.ui.teal.labels .label,
8410
.ui.teal.label {
8411
background-color: #00B5AD !important;
8412
border-color: #00B5AD !important;
8413
color: #FFFFFF !important;
8414
}
8415
.ui.labels .teal.label:before,
8416
.ui.teal.labels .label:before,
8417
.ui.teal.label:before {
8418
background-color: #00B5AD !important;
8419
}
8420
/* Hover */
8421
a.ui.teal.labels .label:hover,
8422
.ui.teal.labels a.label:hover,
8423
a.ui.teal.label:hover {
8424
background-color: #009A93 !important;
8425
border-color: #009A93 !important;
8426
color: #FFFFFF !important;
8427
}
8428
.ui.labels a.teal.label:hover:before,
8429
.ui.teal.labels a.label:hover:before,
8430
a.ui.teal.label:hover:before {
8431
background-color: #009A93 !important;
8432
}
8433
/* Corner */
8434
.ui.teal.corner.label,
8435
.ui.teal.corner.label:hover {
8436
background-color: transparent !important;
8437
}
8438
/* Ribbon */
8439
.ui.teal.ribbon.label {
8440
border-color: #009A93 !important;
8441
}
8442
/*-------------------
8443
Horizontal
8444
--------------------*/
8445
.ui.horizontal.labels .label,
8446
.ui.horizontal.label {
8447
margin: -0.125em 0.5em -0.125em 0em;
8448
padding: 0.35em 1em;
8449
min-width: 6em;
8450
text-align: center;
8451
}
8452
/*-------------------
8453
Circular
8454
--------------------*/
8455
.ui.circular.labels .label,
8456
.ui.circular.label {
8457
min-height: 1em;
8458
max-height: 2em;
8459
padding: 0.5em !important;
8460
line-height: 1em;
8461
text-align: center;
8462
border-radius: 500rem;
8463
}
8464
/*-------------------
8465
Pointing
8466
--------------------*/
8467
.ui.pointing.label {
8468
position: relative;
8469
}
8470
.ui.attached.pointing.label {
8471
position: absolute;
8472
}
8473
.ui.pointing.label:before {
8474
position: absolute;
8475
content: "";
8476
width: 0.6em;
8477
height: 0.6em;
8478
background-image: none;
8479
-webkit-transform: rotate(45deg);
8480
-moz-transform: rotate(45deg);
8481
-ms-transform: rotate(45deg);
8482
transform: rotate(45deg);
8483
z-index: 2;
8484
-webkit-transition: background 0.1s linear
8485
;
8486
-moz-transition: background 0.1s linear
8487
;
8488
transition: background 0.1s linear
8489
;
8490
}
8491
/*--- Above ---*/
8492
.ui.pointing.label:before {
8493
background-color: #E8E8E8;
8494
}
8495
.ui.pointing.label,
8496
.ui.pointing.above.label {
8497
margin-top: 1em;
8498
}
8499
.ui.pointing.label:before,
8500
.ui.pointing.above.label:before {
8501
margin-left: -0.3em;
8502
top: -0.3em;
8503
left: 50%;
8504
}
8505
/*--- Below ---*/
8506
.ui.pointing.below.label {
8507
margin-top: 0em;
8508
margin-bottom: 1em;
8509
}
8510
.ui.pointing.below.label:before {
8511
margin-left: -0.3em;
8512
top: auto;
8513
right: auto;
8514
bottom: -0.3em;
8515
left: 50%;
8516
}
8517
/*--- Left ---*/
8518
.ui.pointing.left.label {
8519
margin-top: 0em;
8520
margin-left: 1em;
8521
}
8522
.ui.pointing.left.label:before {
8523
margin-top: -0.3em;
8524
bottom: auto;
8525
right: auto;
8526
top: 50%;
8527
left: 0em;
8528
}
8529
/*--- Right ---*/
8530
.ui.pointing.right.label {
8531
margin-top: 0em;
8532
margin-right: 1em;
8533
}
8534
.ui.pointing.right.label:before {
8535
margin-top: -0.3em;
8536
right: -0.3em;
8537
top: 50%;
8538
bottom: auto;
8539
left: auto;
8540
}
8541
/*------------------
8542
Floating Label
8543
-------------------*/
8544
.ui.floating.label {
8545
position: absolute;
8546
z-index: 100;
8547
top: -1em;
8548
left: 100%;
8549
margin: 0em 0em 0em -1.5em !important;
8550
}
8551
/*-------------------
8552
Sizes
8553
--------------------*/
8554
.ui.small.labels .label,
8555
.ui.small.label {
8556
font-size: 0.75rem;
8557
}
8558
.ui.label {
8559
font-size: 0.8125rem;
8560
}
8561
.ui.large.labels .label,
8562
.ui.large.label {
8563
font-size: 0.875rem;
8564
}
8565
.ui.huge.labels .label,
8566
.ui.huge.label {
8567
font-size: 1rem;
8568
}
8569
8570
/*
8571
* # Semantic - Loader
8572
* http://github.com/jlukic/semantic-ui/
8573
*
8574
*
8575
* Copyright 2014 Contributors
8576
* Released under the MIT license
8577
* http://opensource.org/licenses/MIT
8578
*
8579
*/
8580
/*******************************
8581
Loader
8582
*******************************/
8583
/* Standard Size */
8584
.ui.loader {
8585
display: none;
8586
position: absolute;
8587
top: 50%;
8588
left: 50%;
8589
margin: 0px;
8590
z-index: 1000;
8591
-webkit-transform: translateX(-50%) translateY(-50%);
8592
-moz-transform: translateX(-50%) translateY(-50%);
8593
-ms-transform: translateX(-50%) translateY(-50%);
8594
transform: translateX(-50%) translateY(-50%);
8595
}
8596
.ui.dimmer .loader {
8597
display: block;
8598
}
8599
/*******************************
8600
Types
8601
*******************************/
8602
/*-------------------
8603
Text
8604
--------------------*/
8605
.ui.text.loader {
8606
width: auto !important;
8607
height: auto !important;
8608
text-align: center;
8609
font-style: normal;
8610
}
8611
.ui.mini.text.loader {
8612
min-width: 16px;
8613
padding-top: 2em;
8614
font-size: 0.875em;
8615
}
8616
.ui.small.text.loader {
8617
min-width: 24px;
8618
padding-top: 2.5em;
8619
font-size: 0.875em;
8620
}
8621
.ui.text.loader {
8622
min-width: 32px;
8623
font-size: 1em;
8624
padding-top: 3em;
8625
}
8626
.ui.large.text.loader {
8627
min-width: 64px;
8628
padding-top: 5em;
8629
font-size: 1.2em;
8630
}
8631
/*******************************
8632
States
8633
*******************************/
8634
.ui.loader.active,
8635
.ui.loader.visible {
8636
display: block;
8637
}
8638
.ui.loader.disabled,
8639
.ui.loader.hidden {
8640
display: none;
8641
}
8642
/*******************************
8643
Variations
8644
*******************************/
8645
/*-------------------
8646
Inverted
8647
--------------------*/
8648
.ui.dimmer .ui.text.loader,
8649
.ui.inverted.text.loader {
8650
color: rgba(255, 255, 255, 0.8);
8651
}
8652
.ui.inverted.dimmer .ui.text.loader {
8653
color: rgba(0, 0, 0, 0.8);
8654
}
8655
/* Tiny Size */
8656
.ui.dimmer .mini.ui.loader,
8657
.ui.inverted .mini.ui.loader {
8658
background-image: url(../images/loader-mini-inverted.gif);
8659
}
8660
/* Small Size */
8661
.ui.dimmer .small.ui.loader,
8662
.ui.inverted .small.ui.loader {
8663
background-image: url(../images/loader-small-inverted.gif);
8664
}
8665
/* Standard Size */
8666
.ui.dimmer .ui.loader,
8667
.ui.inverted.loader {
8668
background-image: url(../images/loader-medium-inverted.gif);
8669
}
8670
/* Large Size */
8671
.ui.dimmer .large.ui.loader,
8672
.ui.inverted .large.ui.loader {
8673
background-image: url(../images/loader-large-inverted.gif);
8674
}
8675
/*-------------------
8676
Sizes
8677
--------------------*/
8678
/* Tiny Size */
8679
.ui.inverted.dimmer .ui.mini.loader,
8680
.ui.mini.loader {
8681
width: 16px;
8682
height: 16px;
8683
background-image: url(../images/loader-mini.gif);
8684
}
8685
/* Small Size */
8686
.ui.inverted.dimmer .ui.small.loader,
8687
.ui.small.loader {
8688
width: 24px;
8689
height: 24px;
8690
background-image: url(../images/loader-small.gif);
8691
}
8692
.ui.inverted.dimmer .ui.loader,
8693
.ui.loader {
8694
width: 32px;
8695
height: 32px;
8696
background: url(../images/loader-medium.gif) no-repeat;
8697
background-position: 48% 0px;
8698
}
8699
/* Large Size */
8700
.ui.inverted.dimmer .ui.loader.large,
8701
.ui.loader.large {
8702
width: 64px;
8703
height: 64px;
8704
background-image: url(../images/loader-large.gif);
8705
}
8706
/*-------------------
8707
Inline
8708
--------------------*/
8709
.ui.inline.loader {
8710
position: static;
8711
vertical-align: middle;
8712
margin: 0em;
8713
-webkit-transform: none;
8714
-moz-transform: none;
8715
-ms-transform: none;
8716
transform: none;
8717
}
8718
.ui.inline.loader.active,
8719
.ui.inline.loader.visible {
8720
display: inline-block;
8721
}
8722
8723
/*
8724
* # Semantic - Progress Bar
8725
* http://github.com/jlukic/semantic-ui/
8726
*
8727
*
8728
* Copyright 2014 Contributors
8729
* Released under the MIT license
8730
* http://opensource.org/licenses/MIT
8731
*
8732
*/
8733
/*******************************
8734
Progress Bar
8735
*******************************/
8736
.ui.progress {
8737
border: 1px solid rgba(0, 0, 0, 0.1);
8738
width: 100%;
8739
height: 35px;
8740
background-color: #FAFAFA;
8741
padding: 5px;
8742
border-radius: 0.3125em;
8743
-webkit-box-sizing: border-box;
8744
-moz-box-sizing: border-box;
8745
-ms-box-sizing: border-box;
8746
box-sizing: border-box;
8747
}
8748
.ui.progress .bar {
8749
display: inline-block;
8750
height: 100%;
8751
background-color: #CCCCCC;
8752
border-radius: 3px;
8753
-webkit-transition: width 1s ease-in-out, background-color 1s ease-out;
8754
-moz-transition: width 1s ease-in-out, background-color 1s ease-out;
8755
transition: width 1s ease-in-out, background-color 1s ease-out;
8756
}
8757
/*******************************
8758
States
8759
*******************************/
8760
/*--------------
8761
Successful
8762
---------------*/
8763
.ui.successful.progress .bar {
8764
background-color: #73E064 !important;
8765
}
8766
.ui.successful.progress .bar,
8767
.ui.successful.progress .bar::after {
8768
-webkit-animation: none !important;
8769
-moz-animation: none !important;
8770
animation: none !important;
8771
}
8772
.ui.warning.progress .bar {
8773
background-color: #E96633 !important;
8774
}
8775
.ui.warning.progress .bar,
8776
.ui.warning.progress .bar::after {
8777
-webkit-animation: none !important;
8778
-moz-animation: none !important;
8779
animation: none !important;
8780
}
8781
/*--------------
8782
Failed
8783
---------------*/
8784
.ui.failed.progress .bar {
8785
background-color: #DF9BA4 !important;
8786
}
8787
.ui.failed.progress .bar,
8788
.ui.failed.progress .bar::after {
8789
-webkit-animation: none !important;
8790
-moz-animation: none !important;
8791
animation: none !important;
8792
}
8793
/*--------------
8794
Active
8795
---------------*/
8796
.ui.active.progress .bar {
8797
position: relative;
8798
}
8799
.ui.active.progress .bar::after {
8800
content: '';
8801
opacity: 0;
8802
position: absolute;
8803
top: 0px;
8804
left: 0px;
8805
right: 0px;
8806
bottom: 0px;
8807
background: #FFFFFF;
8808
border-radius: 3px;
8809
-webkit-animation: progress-active 2s ease-out infinite;
8810
-moz-animation: progress-active 2s ease-out infinite;
8811
animation: progress-active 2s ease-out infinite;
8812
}
8813
@-webkit-keyframes progress-active {
8814
0% {
8815
opacity: 0;
8816
width: 0;
8817
}
8818
50% {
8819
opacity: 0.3;
8820
}
8821
100% {
8822
opacity: 0;
8823
width: 95%;
8824
}
8825
}
8826
@-moz-keyframes progress-active {
8827
0% {
8828
opacity: 0;
8829
width: 0;
8830
}
8831
50% {
8832
opacity: 0.3;
8833
}
8834
100% {
8835
opacity: 0;
8836
width: 100%;
8837
}
8838
}
8839
@keyframes progress-active {
8840
0% {
8841
opacity: 0;
8842
width: 0;
8843
}
8844
50% {
8845
opacity: 0.3;
8846
}
8847
100% {
8848
opacity: 0;
8849
width: 100%;
8850
}
8851
}
8852
/*--------------
8853
Disabled
8854
---------------*/
8855
.ui.disabled.progress {
8856
opacity: 0.35;
8857
}
8858
.ui.disabled.progress .bar,
8859
.ui.disabled.progress .bar::after {
8860
-webkit-animation: none !important;
8861
-moz-animation: none !important;
8862
animation: none !important;
8863
}
8864
/*******************************
8865
Variations
8866
*******************************/
8867
/*--------------
8868
Attached
8869
---------------*/
8870
/* bottom attached */
8871
.ui.progress.attached {
8872
position: relative;
8873
border: none;
8874
}
8875
.ui.progress.attached,
8876
.ui.progress.attached .bar {
8877
display: block;
8878
height: 3px;
8879
padding: 0px;
8880
overflow: hidden;
8881
border-radius: 0em 0em 0.3125em 0.3125em;
8882
}
8883
.ui.progress.attached .bar {
8884
border-radius: 0em;
8885
}
8886
/* top attached */
8887
.ui.progress.top.attached,
8888
.ui.progress.top.attached .bar {
8889
top: -2px;
8890
border-radius: 0.3125em 0.3125em 0em 0em;
8891
}
8892
.ui.progress.top.attached .bar {
8893
border-radius: 0em;
8894
}
8895
/*--------------
8896
Colors
8897
---------------*/
8898
.ui.blue.progress .bar {
8899
background-color: #6ECFF5;
8900
}
8901
.ui.black.progress .bar {
8902
background-color: #5C6166;
8903
}
8904
.ui.green.progress .bar {
8905
background-color: #A1CF64;
8906
}
8907
.ui.red.progress .bar {
8908
background-color: #EF4D6D;
8909
}
8910
.ui.purple.progress .bar {
8911
background-color: #564F8A;
8912
}
8913
.ui.teal.progress .bar {
8914
background-color: #00B5AD;
8915
}
8916
/*--------------
8917
Striped
8918
---------------*/
8919
.ui.progress.striped .bar {
8920
background-size: 30px 30px;
8921
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
8922
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
8923
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
8924
background-image: -webkit-linear-gradient(315deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
8925
background-image: -moz-linear-gradient(315deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
8926
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
8927
}
8928
.ui.progress.active.striped .bar:after {
8929
-webkit-animation: none;
8930
-moz-animation: none;
8931
-ms-animation: none;
8932
animation: none;
8933
}
8934
.ui.progress.active.striped .bar {
8935
-webkit-animation: progress-striped 3s linear infinite;
8936
-moz-animation: progress-striped 3s linear infinite;
8937
animation: progress-striped 3s linear infinite;
8938
}
8939
@-webkit-keyframes progress-striped {
8940
0% {
8941
background-position: 0px 0;
8942
}
8943
100% {
8944
background-position: 60px 0;
8945
}
8946
}
8947
@-moz-keyframes progress-striped {
8948
0% {
8949
background-position: 0px 0;
8950
}
8951
100% {
8952
background-position: 60px 0;
8953
}
8954
}
8955
@keyframes progress-striped {
8956
0% {
8957
background-position: 0px 0;
8958
}
8959
100% {
8960
background-position: 60px 0;
8961
}
8962
}
8963
/*--------------
8964
Sizes
8965
---------------*/
8966
.ui.small.progress .bar {
8967
height: 14px;
8968
}
8969
8970
/*
8971
* # Semantic - Reveal
8972
* http://github.com/jlukic/semantic-ui/
8973
*
8974
*
8975
* Copyright 2014 Contributors
8976
* Released under the MIT license
8977
* http://opensource.org/licenses/MIT
8978
*
8979
*/
8980
/*******************************
8981
Reveal
8982
*******************************/
8983
.ui.reveal {
8984
display: inline-block;
8985
position: relative !important;
8986
z-index: 2 !important;
8987
font-size: 0em !important;
8988
}
8989
.ui.reveal > .content {
8990
font-size: 1rem !important;
8991
}
8992
.ui.reveal > .visible.content {
8993
-webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
8994
-moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
8995
transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
8996
}
8997
.ui.reveal > .visible.content {
8998
position: absolute !important;
8999
top: 0em !important;
9000
left: 0em !important;
9001
z-index: 4 !important;
9002
-webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
9003
-moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
9004
transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
9005
}
9006
.ui.reveal > .hidden.content {
9007
position: relative !important;
9008
z-index: 3 !important;
9009
}
9010
/*------------------
9011
Loose Coupling
9012
-------------------*/
9013
.ui.reveal.button {
9014
overflow: hidden;
9015
}
9016
/*******************************
9017
Types
9018
*******************************/
9019
/*--------------
9020
Slide
9021
---------------*/
9022
.ui.slide.reveal {
9023
position: relative !important;
9024
display: block;
9025
overflow: hidden !important;
9026
white-space: nowrap;
9027
}
9028
.ui.slide.reveal > .content {
9029
display: block;
9030
float: left;
9031
-webkit-box-sizing: border-box;
9032
-moz-box-sizing: border-box;
9033
-ms-box-sizing: border-box;
9034
box-sizing: border-box;
9035
margin: 0em;
9036
-webkit-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
9037
-moz-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
9038
transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
9039
}
9040
.ui.slide.reveal > .visible.content {
9041
position: relative !important;
9042
}
9043
.ui.slide.reveal > .hidden.content {
9044
position: absolute !important;
9045
left: 100% !important;
9046
width: 100% !important;
9047
}
9048
.ui.slide.reveal:hover > .visible.content,
9049
.ui.slide.reveal:focus > .visible.content {
9050
left: -100% !important;
9051
}
9052
.ui.slide.reveal:hover > .hidden.content,
9053
.ui.slide.reveal:focus > .hidden.content {
9054
left: 0% !important;
9055
}
9056
.ui.right.slide.reveal > .visible.content {
9057
left: 0%;
9058
}
9059
.ui.right.slide.reveal > .hidden.content {
9060
left: auto !important;
9061
right: 100% !important;
9062
}
9063
.ui.right.slide.reveal:hover > .visible.content,
9064
.ui.right.slide.reveal:focus > .visible.content {
9065
left: 100% !important;
9066
right: auto !important;
9067
}
9068
.ui.right.slide.reveal:hover > .hidden.content,
9069
.ui.right.slide.reveal:focus > .hidden.content {
9070
left: auto !important;
9071
right: 0% !important;
9072
}
9073
.ui.up.slide.reveal > .visible.content {
9074
top: 0% !important;
9075
left: 0% !important;
9076
right: auto !important;
9077
bottom: auto !important;
9078
}
9079
.ui.up.slide.reveal > .hidden.content {
9080
top: 100% !important;
9081
left: 0% !important;
9082
right: auto !important;
9083
bottom: auto !important;
9084
}
9085
.ui.slide.up.reveal:hover > .visible.content,
9086
.ui.slide.up.reveal:focus > .visible.content {
9087
top: -100% !important;
9088
left: 0% !important;
9089
}
9090
.ui.slide.up.reveal:hover > .hidden.content,
9091
.ui.slide.up.reveal:focus > .hidden.content {
9092
top: 0% !important;
9093
left: 0% !important;
9094
}
9095
.ui.down.slide.reveal > .visible.content {
9096
top: auto !important;
9097
right: auto !important;
9098
bottom: auto !important;
9099
bottom: 0% !important;
9100
}
9101
.ui.down.slide.reveal > .hidden.content {
9102
top: auto !important;
9103
right: auto !important;
9104
bottom: 100% !important;
9105
left: 0% !important;
9106
}
9107
.ui.slide.down.reveal:hover > .visible.content,
9108
.ui.slide.down.reveal:focus > .visible.content {
9109
left: 0% !important;
9110
bottom: -100% !important;
9111
}
9112
.ui.slide.down.reveal:hover > .hidden.content,
9113
.ui.slide.down.reveal:focus > .hidden.content {
9114
left: 0% !important;
9115
bottom: 0% !important;
9116
}
9117
/*--------------
9118
Fade
9119
---------------*/
9120
.ui.fade.reveal > .hidden.content {
9121
-webkit-transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
9122
-moz-transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
9123
transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
9124
}
9125
.ui.fade.reveal > .hidden.content {
9126
z-index: 5 !important;
9127
opacity: 0;
9128
}
9129
.ui.fade.reveal:hover > .hidden.content {
9130
opacity: 1;
9131
}
9132
/*--------------
9133
Move
9134
---------------*/
9135
.ui.move.reveal > .visible.content,
9136
.ui.move.left.reveal > .visible.content {
9137
left: auto !important;
9138
top: auto !important;
9139
bottom: auto !important;
9140
right: 0% !important;
9141
}
9142
.ui.move.reveal:hover > .visible.content,
9143
.ui.move.left.reveal:hover > .visible.content,
9144
.ui.move.reveal:focus > .visible.content,
9145
.ui.move.left.reveal:focus > .visible.content {
9146
right: 100% !important;
9147
}
9148
.ui.move.right.reveal > .visible.content {
9149
right: auto !important;
9150
top: auto !important;
9151
bottom: auto !important;
9152
left: 0% !important;
9153
}
9154
.ui.move.right.reveal:hover > .visible.content,
9155
.ui.move.right.reveal:focus > .visible.content {
9156
left: 100% !important;
9157
}
9158
.ui.move.up.reveal > .visible.content {
9159
right: auto !important;
9160
left: auto !important;
9161
top: auto !important;
9162
bottom: 0% !important;
9163
}
9164
.ui.move.up.reveal:hover > .visible.content,
9165
.ui.move.up.reveal:focus > .visible.content {
9166
bottom: 100% !important;
9167
}
9168
.ui.move.down.reveal > .visible.content {
9169
right: auto !important;
9170
left: auto !important;
9171
top: 0% !important;
9172
bottom: auto !important;
9173
}
9174
.ui.move.down.reveal:hover > .visible.content,
9175
.ui.move.down.reveal:focus > .visible.content {
9176
top: 100% !important;
9177
}
9178
/*--------------
9179
Rotate
9180
---------------*/
9181
.ui.rotate.reveal > .visible.content {
9182
-webkit-transition-duration: 0.8s;
9183
-moz-transition-duration: 0.8s;
9184
transition-duration: 0.8s;
9185
-webkit-transform: rotate(0deg);
9186
-moz-transform: rotate(0deg);
9187
-ms-transform: rotate(0deg);
9188
transform: rotate(0deg);
9189
}
9190
.ui.rotate.reveal > .visible.content,
9191
.ui.rotate.right.reveal > .visible.content {
9192
-webkit-transform-origin: bottom right;
9193
-moz-transform-origin: bottom right;
9194
-ms-transform-origin: bottom right;
9195
transform-origin: bottom right;
9196
}
9197
.ui.rotate.reveal:hover > .visible.content,
9198
.ui.rotate.right.reveal:hover > .visible.content,
9199
.ui.rotate.reveal:focus > .visible.content,
9200
.ui.rotate.right.reveal:focus > .visible.content {
9201
-webkit-transform: rotate(110deg);
9202
-moz-transform: rotate(110deg);
9203
-ms-transform: rotate(110deg);
9204
transform: rotate(110deg);
9205
}
9206
.ui.rotate.left.reveal > .visible.content {
9207
-webkit-transform-origin: bottom left;
9208
-moz-transform-origin: bottom left;
9209
-ms-transform-origin: bottom left;
9210
transform-origin: bottom left;
9211
}
9212
.ui.rotate.left.reveal:hover > .visible.content,
9213
.ui.rotate.left.reveal:focus > .visible.content {
9214
-webkit-transform: rotate(-110deg);
9215
-moz-transform: rotate(-110deg);
9216
-ms-transform: rotate(-110deg);
9217
transform: rotate(-110deg);
9218
}
9219
/*******************************
9220
States
9221
*******************************/
9222
.ui.disabled.reveal {
9223
opacity: 1 !important;
9224
}
9225
.ui.disabled.reveal > .content {
9226
-webkit-transition: none !important;
9227
-moz-transition: none !important;
9228
transition: none !important;
9229
}
9230
.ui.disabled.reveal:hover > .visible.content,
9231
.ui.disabled.reveal:focus > .visible.content {
9232
position: static !important;
9233
display: block !important;
9234
opacity: 1 !important;
9235
top: 0 !important;
9236
left: 0 !important;
9237
right: auto !important;
9238
bottom: auto !important;
9239
-webkit-transform: none !important;
9240
-moz-transform: none !important;
9241
-ms-transform: none !important;
9242
transform: none !important;
9243
}
9244
.ui.disabled.reveal:hover > .hidden.content,
9245
.ui.disabled.reveal:focus > .hidden.content {
9246
display: none !important;
9247
}
9248
/*******************************
9249
Variations
9250
*******************************/
9251
/*--------------
9252
Masked
9253
---------------*/
9254
.ui.masked.reveal {
9255
overflow: hidden;
9256
}
9257
/*--------------
9258
Instant
9259
---------------*/
9260
.ui.instant.reveal > .content {
9261
-webkit-transition-delay: 0s !important;
9262
-moz-transition-delay: 0s !important;
9263
transition-delay: 0s !important;
9264
}
9265
9266
/*
9267
* # Semantic - Segment
9268
* http://github.com/jlukic/semantic-ui/
9269
*
9270
*
9271
* Copyright 2014 Contributors
9272
* Released under the MIT license
9273
* http://opensource.org/licenses/MIT
9274
*
9275
*/
9276
/*******************************
9277
Segment
9278
*******************************/
9279
.ui.segment {
9280
position: relative;
9281
background-color: #FFFFFF;
9282
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
9283
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
9284
margin: 1em 0em;
9285
padding: 1em;
9286
border-radius: 5px 5px 5px 5px;
9287
-webkit-box-sizing: border-box;
9288
-moz-box-sizing: border-box;
9289
-ms-box-sizing: border-box;
9290
box-sizing: border-box;
9291
}
9292
.ui.segment:first-child {
9293
margin-top: 0em;
9294
}
9295
.ui.segment:last-child {
9296
margin-bottom: 0em;
9297
}
9298
.ui.segment:after {
9299
content: '';
9300
display: block;
9301
height: 0;
9302
clear: both;
9303
visibility: hidden;
9304
}
9305
.ui.vertical.segment {
9306
margin: 0em;
9307
padding-left: 0em;
9308
padding-right: 0em;
9309
background-color: transparent;
9310
border-radius: 0px;
9311
-webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
9312
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
9313
}
9314
.ui.vertical.segment:first-child {
9315
padding-top: 0em;
9316
}
9317
.ui.horizontal.segment {
9318
margin: 0em;
9319
padding-top: 0em;
9320
padding-bottom: 0em;
9321
background-color: transparent;
9322
border-radius: 0px;
9323
-webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1);
9324
box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1);
9325
}
9326
.ui.horizontal.segment:first-child {
9327
padding-left: 0em;
9328
}
9329
/*-------------------
9330
Loose Coupling
9331
--------------------*/
9332
.ui.pointing.menu ~ .ui.attached.segment {
9333
top: 1px;
9334
}
9335
.ui.page.grid.segment .ui.grid .ui.segment.column {
9336
padding-top: 2rem;
9337
padding-bottom: 2rem;
9338
}
9339
.ui.grid.segment,
9340
.ui.grid .ui.segment.row,
9341
.ui.grid .ui.segment.column {
9342
border-radius: 0em;
9343
-webkit-box-shadow: none;
9344
box-shadow: none;
9345
border: none;
9346
}
9347
/* No padding on edge content */
9348
.ui.segment > :first-child {
9349
margin-top: 0em;
9350
}
9351
.ui.segment > :last-child {
9352
margin-bottom: 0em;
9353
}
9354
/*******************************
9355
Types
9356
*******************************/
9357
/*-------------------
9358
Piled
9359
--------------------*/
9360
.ui.piled.segment {
9361
margin: 2em 0em;
9362
-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15);
9363
-ms-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15);
9364
-o-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15);
9365
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15);
9366
}
9367
.ui.piled.segment:first-child {
9368
margin-top: 0em;
9369
}
9370
.ui.piled.segment:last-child {
9371
margin-bottom: 0em;
9372
}
9373
.ui.piled.segment:after,
9374
.ui.piled.segment:before {
9375
background-color: #FFFFFF;
9376
visibility: visible;
9377
content: "";
9378
display: block;
9379
height: 100%;
9380
left: -1px;
9381
position: absolute;
9382
width: 100%;
9383
-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
9384
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
9385
}
9386
.ui.piled.segment:after {
9387
-webkit-transform: rotate(1.2deg);
9388
-moz-transform: rotate(1.2deg);
9389
-ms-transform: rotate(1.2deg);
9390
transform: rotate(1.2deg);
9391
top: 0;
9392
z-index: -1;
9393
}
9394
.ui.piled.segment:before {
9395
-webkit-transform: rotate(-1.2deg);
9396
-moz-transform: rotate(-1.2deg);
9397
-ms-transform: rotate(-1.2deg);
9398
transform: rotate(-1.2deg);
9399
top: 0;
9400
z-index: -2;
9401
}
9402
/*-------------------
9403
Stacked
9404
--------------------*/
9405
.ui.stacked.segment {
9406
padding-bottom: 1.7em;
9407
}
9408
.ui.stacked.segment:after,
9409
.ui.stacked.segment:before {
9410
content: '';
9411
position: absolute;
9412
bottom: -3px;
9413
left: 0%;
9414
border-top: 1px solid rgba(0, 0, 0, 0.1);
9415
background-color: rgba(0, 0, 0, 0.02);
9416
width: 100%;
9417
height: 5px;
9418
visibility: visible;
9419
}
9420
.ui.stacked.segment:before {
9421
bottom: 0px;
9422
}
9423
/* Inverted */
9424
.ui.stacked.inverted.segment:after,
9425
.ui.stacked.inverted.segment:before {
9426
background-color: rgba(255, 255, 255, 0.1);
9427
border-top: 1px solid rgba(255, 255, 255, 0.35);
9428
}
9429
/*-------------------
9430
Circular
9431
--------------------*/
9432
.ui.circular.segment {
9433
display: table-cell;
9434
padding: 2em;
9435
text-align: center;
9436
vertical-align: middle;
9437
border-radius: 500em;
9438
}
9439
/*-------------------
9440
Raised
9441
--------------------*/
9442
.ui.raised.segment {
9443
-webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
9444
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
9445
}
9446
/*******************************
9447
States
9448
*******************************/
9449
.ui.disabled.segment {
9450
opacity: 0.8;
9451
color: #DDDDDD;
9452
}
9453
/*******************************
9454
Variations
9455
*******************************/
9456
/*-------------------
9457
Basic
9458
--------------------*/
9459
.ui.basic.segment {
9460
position: relative;
9461
background-color: transparent;
9462
-webkit-box-shadow: none;
9463
box-shadow: none;
9464
border-radius: 0px;
9465
}
9466
.ui.basic.segment:first-child {
9467
padding-top: 0em;
9468
}
9469
.ui.basic.segment:last-child {
9470
padding-bottom: 0em;
9471
}
9472
/*-------------------
9473
Fittted
9474
--------------------*/
9475
.ui.fitted.segment {
9476
padding: 0em;
9477
}
9478
/*-------------------
9479
Colors
9480
--------------------*/
9481
.ui.blue.segment {
9482
border-top: 0.2em solid #6ECFF5;
9483
}
9484
.ui.green.segment {
9485
border-top: 0.2em solid #A1CF64;
9486
}
9487
.ui.red.segment {
9488
border-top: 0.2em solid #D95C5C;
9489
}
9490
.ui.orange.segment {
9491
border-top: 0.2em solid #F05940;
9492
}
9493
.ui.purple.segment {
9494
border-top: 0.2em solid #564F8A;
9495
}
9496
.ui.teal.segment {
9497
border-top: 0.2em solid #00B5AD;
9498
}
9499
/*-------------------
9500
Inverted Colors
9501
--------------------*/
9502
.ui.inverted.black.segment {
9503
background-color: #5C6166 !important;
9504
color: #FFFFFF !important;
9505
}
9506
.ui.inverted.blue.segment {
9507
background-color: #6ECFF5 !important;
9508
color: #FFFFFF !important;
9509
}
9510
.ui.inverted.green.segment {
9511
background-color: #A1CF64 !important;
9512
color: #FFFFFF !important;
9513
}
9514
.ui.inverted.red.segment {
9515
background-color: #D95C5C !important;
9516
color: #FFFFFF !important;
9517
}
9518
.ui.inverted.orange.segment {
9519
background-color: #F05940 !important;
9520
color: #FFFFFF !important;
9521
}
9522
.ui.inverted.purple.segment {
9523
background-color: #564F8A !important;
9524
color: #FFFFFF !important;
9525
}
9526
.ui.inverted.teal.segment {
9527
background-color: #00B5AD !important;
9528
color: #FFFFFF !important;
9529
}
9530
/*-------------------
9531
Aligned
9532
--------------------*/
9533
.ui.left.aligned.segment {
9534
text-align: left;
9535
}
9536
.ui.right.aligned.segment {
9537
text-align: right;
9538
}
9539
.ui.center.aligned.segment {
9540
text-align: center;
9541
}
9542
.ui.justified.segment {
9543
text-align: justify;
9544
-webkit-hyphens: auto;
9545
-moz-hyphens: auto;
9546
-ms-hyphens: auto;
9547
hyphens: auto;
9548
}
9549
/*-------------------
9550
Floated
9551
--------------------*/
9552
.ui.floated.segment,
9553
.ui.left.floated.segment {
9554
float: left;
9555
}
9556
.ui.right.floated.segment {
9557
float: right;
9558
}
9559
/*-------------------
9560
Inverted
9561
--------------------*/
9562
.ui.inverted.segment {
9563
border: none;
9564
-webkit-box-shadow: none;
9565
box-shadow: none;
9566
}
9567
.ui.inverted.segment .segment {
9568
color: rgba(0, 0, 0, 0.7);
9569
}
9570
.ui.inverted.segment .inverted.segment {
9571
color: #FFFFFF;
9572
}
9573
.ui.inverted.segment,
9574
.ui.primary.inverted.segment {
9575
background-color: #222222;
9576
color: #FFFFFF;
9577
}
9578
/*-------------------
9579
Ordinality
9580
--------------------*/
9581
.ui.primary.segment {
9582
background-color: #FFFFFF;
9583
color: #555555;
9584
}
9585
.ui.secondary.segment {
9586
background-color: #FAF9FA;
9587
color: #777777;
9588
}
9589
.ui.tertiary.segment {
9590
background-color: #EBEBEB;
9591
color: #B0B0B0;
9592
}
9593
.ui.secondary.inverted.segment {
9594
background-color: #555555;
9595
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.3)));
9596
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
9597
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
9598
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.3)));
9599
background-image: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
9600
color: #FAFAFA;
9601
}
9602
.ui.tertiary.inverted.segment {
9603
background-color: #555555;
9604
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.6)));
9605
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
9606
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
9607
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.6)));
9608
background-image: linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
9609
color: #EEEEEE;
9610
}
9611
/*-------------------
9612
Attached
9613
--------------------*/
9614
.ui.segment.attached {
9615
top: -1px;
9616
bottom: -1px;
9617
border-radius: 0px;
9618
margin: 0em;
9619
-webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
9620
box-shadow: 0px 0px 0px 1px #DDDDDD;
9621
}
9622
.ui.top.attached.segment {
9623
top: 0px;
9624
bottom: -1px;
9625
margin-top: 1em;
9626
margin-bottom: 0em;
9627
border-radius: 5px 5px 0px 0px;
9628
}
9629
.ui.segment.top.attached:first-child {
9630
margin-top: 0em;
9631
}
9632
.ui.segment.bottom.attached {
9633
top: -1px;
9634
bottom: 0px;
9635
margin-top: 0em;
9636
margin-bottom: 1em;
9637
border-radius: 0px 0px 5px 5px;
9638
}
9639
.ui.segment.bottom.attached:last-child {
9640
margin-bottom: 0em;
9641
}
9642
9643
/*
9644
* # Semantic - Steps
9645
* http://github.com/jlukic/semantic-ui/
9646
*
9647
*
9648
* Copyright 2014 Contributors
9649
* Released under the MIT license
9650
* http://opensource.org/licenses/MIT
9651
*
9652
*/
9653
/*******************************
9654
Step
9655
*******************************/
9656
.ui.step,
9657
.ui.steps .step {
9658
display: inline-block;
9659
position: relative;
9660
padding: 1em 2em 1em 3em;
9661
vertical-align: top;
9662
background-color: #FFFFFF;
9663
color: #888888;
9664
-webkit-box-sizing: border-box;
9665
-moz-box-sizing: border-box;
9666
-ms-box-sizing: border-box;
9667
box-sizing: border-box;
9668
}
9669
.ui.step:after,
9670
.ui.steps .step:after {
9671
position: absolute;
9672
z-index: 2;
9673
content: '';
9674
top: 0.42em;
9675
right: -1em;
9676
border: medium none;
9677
background-color: #FFFFFF;
9678
width: 2.2em;
9679
height: 2.2em;
9680
-webkit-transform: rotate(-45deg);
9681
-moz-transform: rotate(-45deg);
9682
-ms-transform: rotate(-45deg);
9683
transform: rotate(-45deg);
9684
-webkit-box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.15) inset;
9685
box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.15) inset;
9686
}
9687
.ui.step,
9688
.ui.steps .step,
9689
.ui.steps .step:after {
9690
-webkit-transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease;
9691
-moz-transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
9692
transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
9693
}
9694
/*******************************
9695
Types
9696
*******************************/
9697
/* Vertical */
9698
.ui.vertical.steps {
9699
overflow: visible;
9700
}
9701
.ui.vertical.steps .step {
9702
display: block;
9703
border-radius: 0em;
9704
padding: 1em 2em;
9705
}
9706
.ui.vertical.steps .step:first-child {
9707
padding: 1em 2em;
9708
border-radius: 0em;
9709
border-top-left-radius: 0.3125rem;
9710
border-top-right-radius: 0.3125rem;
9711
}
9712
.ui.vertical.steps .active.step:first-child {
9713
border-top-right-radius: 0rem;
9714
}
9715
.ui.vertical.steps .step:last-child {
9716
border-radius: 0em;
9717
border-bottom-left-radius: 0.3125rem;
9718
border-bottom-right-radius: 0.3125rem;
9719
}
9720
.ui.vertical.steps .active.step:last-child {
9721
border-bottom-right-radius: 0rem;
9722
}
9723
/* Arrow */
9724
.ui.vertical.steps .step:after {
9725
display: none;
9726
}
9727
/* Active Arrow */
9728
.ui.vertical.steps .active.step:after {
9729
display: block;
9730
}
9731
/* Two Line */
9732
.ui.vertical.steps .two.line.step {
9733
line-height: 1.3;
9734
}
9735
.ui.vertical.steps .two.line.active.step:after {
9736
position: absolute;
9737
z-index: 2;
9738
content: '';
9739
top: 0em;
9740
right: -1.45em;
9741
background-color: transparent;
9742
border-bottom: 2.35em solid transparent;
9743
border-left: 1.55em solid #555555;
9744
border-top: 2.35em solid transparent;
9745
width: 0em;
9746
height: 0em;
9747
-webkit-transform: none;
9748
-moz-transform: none;
9749
-ms-transform: none;
9750
transform: none;
9751
}
9752
/*******************************
9753
Group
9754
*******************************/
9755
.ui.steps {
9756
cursor: pointer;
9757
display: inline-block;
9758
font-size: 0em;
9759
overflow: hidden;
9760
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
9761
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
9762
line-height: 1;
9763
-webkit-box-sizing: border-box;
9764
-moz-box-sizing: border-box;
9765
-ms-box-sizing: border-box;
9766
box-sizing: border-box;
9767
border-radius: 0.3125rem;
9768
}
9769
.ui.steps .step:first-child {
9770
padding-left: 1.35em;
9771
border-radius: 0.3125em 0em 0em 0.3125em;
9772
}
9773
.ui.steps .step:last-child {
9774
border-radius: 0em 0.3125em 0.3125em 0em;
9775
}
9776
.ui.steps .step:only-child {
9777
border-radius: 0.3125em;
9778
}
9779
.ui.steps .step:last-child {
9780
margin-right: 0em;
9781
}
9782
.ui.steps .step:last-child:after {
9783
display: none;
9784
}
9785
/*******************************
9786
States
9787
*******************************/
9788
/* Hover */
9789
.ui.step:hover,
9790
.ui.step.hover {
9791
background-color: #F7F7F7;
9792
color: rgba(0, 0, 0, 0.8);
9793
}
9794
.ui.steps .step.hover:after,
9795
.ui.steps .step:hover:after,
9796
.ui.step:hover,
9797
.ui.step.hover::after {
9798
background-color: #F7F7F7;
9799
}
9800
/* Hover */
9801
.ui.steps .step.down,
9802
.ui.steps .step:active,
9803
.ui.step.down,
9804
.ui.step:active {
9805
background-color: #F0F0F0;
9806
}
9807
.ui.steps .step.down:after,
9808
.ui.steps .step:active:after,
9809
.ui.steps.down::after,
9810
.ui.steps:active::after {
9811
background-color: #F0F0F0;
9812
}
9813
/* Active */
9814
.ui.steps .step.active,
9815
.ui.active.step {
9816
cursor: auto;
9817
background-color: #555555;
9818
color: #FFFFFF;
9819
font-weight: bold;
9820
}
9821
.ui.steps .step.active:after,
9822
.ui.active.steps:after {
9823
background-color: #555555;
9824
-webkit-box-shadow: none;
9825
box-shadow: none;
9826
}
9827
/* Disabled */
9828
.ui.steps .disabled.step,
9829
.ui.disabled.step {
9830
cursor: auto;
9831
background-color: #FFFFFF;
9832
color: #CBCBCB;
9833
}
9834
.ui.steps .disabled.step:after,
9835
.ui.disabled.step:after {
9836
background-color: #FFFFFF;
9837
}
9838
/*******************************
9839
Variations
9840
*******************************/
9841
/* Attached */
9842
.attached.ui.steps {
9843
margin: 0em;
9844
border-radius: 0.3125em 0.3125em 0em 0em;
9845
}
9846
.attached.ui.steps .step:first-child {
9847
border-radius: 0.3125em 0em 0em 0em;
9848
}
9849
.attached.ui.steps .step:last-child {
9850
border-radius: 0em 0.3125em 0em 0em;
9851
}
9852
/* Bottom Side */
9853
.bottom.attached.ui.steps {
9854
margin-top: -1px;
9855
border-radius: 0em 0em 0.3125em 0.3125em;
9856
}
9857
.bottom.attached.ui.steps .step:first-child {
9858
border-radius: 0em 0em 0em 0.3125em;
9859
}
9860
.bottom.attached.ui.steps .step:last-child {
9861
border-radius: 0em 0em 0.3125em 0em;
9862
}
9863
/* Evenly divided */
9864
.ui.one.steps,
9865
.ui.two.steps,
9866
.ui.three.steps,
9867
.ui.four.steps,
9868
.ui.five.steps,
9869
.ui.six.steps,
9870
.ui.seven.steps,
9871
.ui.eight.steps {
9872
display: block;
9873
}
9874
.ui.one.steps > .step {
9875
width: 100%;
9876
}
9877
.ui.two.steps > .step {
9878
width: 50%;
9879
}
9880
.ui.three.steps > .step {
9881
width: 33.333%;
9882
}
9883
.ui.four.steps > .step {
9884
width: 25%;
9885
}
9886
.ui.five.steps > .step {
9887
width: 20%;
9888
}
9889
.ui.six.steps > .step {
9890
width: 16.666%;
9891
}
9892
.ui.seven.steps > .step {
9893
width: 14.285%;
9894
}
9895
.ui.eight.steps > .step {
9896
width: 12.500%;
9897
}
9898
/*******************************
9899
Sizes
9900
*******************************/
9901
.ui.mini.step,
9902
.ui.mini.steps .step {
9903
font-size: 0.8rem;
9904
}
9905
.ui.small.step,
9906
.ui.small.steps .step {
9907
font-size: 0.875rem;
9908
}
9909
.ui.step,
9910
.ui.steps .step {
9911
font-size: 1rem;
9912
}
9913
.ui.large.step,
9914
.ui.large.steps .step {
9915
font-size: 1.125rem;
9916
}
9917
.ui.big.step,
9918
.ui.big.steps .step {
9919
font-size: 1.25rem;
9920
}
9921
.ui.huge.step,
9922
.ui.huge.steps .step {
9923
font-size: 1.375rem;
9924
}
9925
.ui.massive.step,
9926
.ui.massive.steps .step {
9927
font-size: 1.5rem;
9928
font-weight: bold;
9929
}
9930
9931
/*
9932
* # Semantic - Accordion
9933
* http://github.com/jlukic/semantic-ui/
9934
*
9935
*
9936
* Copyright 2014 Contributors
9937
* Released under the MIT license
9938
* http://opensource.org/licenses/MIT
9939
*
9940
*/
9941
/*******************************
9942
Accordion
9943
*******************************/
9944
.ui.accordion,
9945
.ui.accordion .accordion {
9946
width: 600px;
9947
max-width: 100%;
9948
font-size: 1rem;
9949
border-radius: 0.3125em;
9950
background-color: #FFFFFF;
9951
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
9952
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
9953
}
9954
.ui.accordion .title,
9955
.ui.accordion .accordion .title {
9956
cursor: pointer;
9957
margin: 0em;
9958
padding: 0.75em 1em;
9959
color: rgba(0, 0, 0, 0.6);
9960
border-top: 1px solid rgba(0, 0, 0, 0.05);
9961
-webkit-transition: background-color 0.2s ease-out;
9962
-moz-transition: background-color 0.2s ease-out;
9963
transition: background-color 0.2s ease-out;
9964
}
9965
.ui.accordion > .title:first-child,
9966
.ui.accordion .accordion > .title:first-child {
9967
border-top: none;
9968
}
9969
/* Content */
9970
.ui.accordion > .content,
9971
.ui.accordion .content > .content,
9972
.ui.accordion .accordion .content {
9973
display: none;
9974
margin: 0em;
9975
padding: 1.3em 1em;
9976
}
9977
/* Arrow */
9978
.ui.accordion .title .dropdown.icon,
9979
.ui.accordion .accordion .title .dropdown.icon {
9980
display: inline-block;
9981
float: none;
9982
margin: 0em 0.5em 0em 0em;
9983
-webkit-transition: -webkit-transform 0.2s ease, opacity 0.2s ease;
9984
-moz-transition: -moz-transform 0.2s ease, opacity 0.2s ease;
9985
transition: transform 0.2s ease,
9986
opacity 0.2s ease
9987
;
9988
-webkit-transform: rotate(0deg);
9989
-moz-transform: rotate(0deg);
9990
-ms-transform: rotate(0deg);
9991
transform: rotate(0deg);
9992
}
9993
.ui.accordion .title .dropdown.icon:before,
9994
.ui.accordion .accordion .title .dropdown.icon:before {
9995
content: '\f0da' /*rtl:'\f0d9'*/;
9996
}
9997
/*--------------
9998
Loose Coupling
9999
---------------*/
10000
.ui.basic.accordion.menu {
10001
background-color: #FFFFFF;
10002
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
10003
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
10004
}
10005
.ui.basic.accordion.menu .title,
10006
.ui.basic.accordion.menu .content {
10007
padding: 0em;
10008
}
10009
.ui.accordion.menu .content {
10010
display: none;
10011
}
10012
/*******************************
10013
Types
10014
*******************************/
10015
/*--------------
10016
Basic
10017
---------------*/
10018
.ui.basic.accordion {
10019
background-color: transparent;
10020
-webkit-box-shadow: none;
10021
box-shadow: none;
10022
}
10023
.ui.basic.accordion .title,
10024
.ui.basic.accordion .accordion .title {
10025
background-color: transparent;
10026
border-top: none;
10027
padding-left: 0em;
10028
padding-right: 0em;
10029
}
10030
.ui.basic.accordion .content,
10031
.ui.basic.accordion .accordion .content {
10032
padding: 0.5em 0em;
10033
}
10034
.ui.basic.accordion .active.title,
10035
.ui.basic.accordion .accordion .active.title {
10036
background-color: transparent;
10037
}
10038
/*******************************
10039
States
10040
*******************************/
10041
/*--------------
10042
Hover
10043
---------------*/
10044
.ui.accordion .title:hover,
10045
.ui.accordion .active.title,
10046
.ui.accordion .accordion .title:hover,
10047
.ui.accordion .accordion .active.title {
10048
color: rgba(0, 0, 0, 0.8);
10049
}
10050
/*--------------
10051
Active
10052
---------------*/
10053
.ui.accordion .active.title,
10054
.ui.accordion .accordion .active.title {
10055
background-color: rgba(0, 0, 0, 0.1);
10056
color: rgba(0, 0, 0, 0.8);
10057
}
10058
.ui.accordion .active.title .dropdown.icon,
10059
.ui.accordion .accordion .active.title .dropdown.icon {
10060
-webkit-transform: rotate(90deg);
10061
-moz-transform: rotate(90deg);
10062
-ms-transform: rotate(90deg);
10063
transform: rotate(90deg);
10064
}
10065
.ui.accordion .active.content,
10066
.ui.accordion .accordion .active.content {
10067
display: block;
10068
}
10069
/*******************************
10070
Variations
10071
*******************************/
10072
/*--------------
10073
Fluid
10074
---------------*/
10075
.ui.fluid.accordion,
10076
.ui.fluid.accordion .accordion {
10077
width: 100%;
10078
}
10079
10080
/*
10081
* # Semantic - Chat Room
10082
* http://github.com/jlukic/semantic-ui/
10083
*
10084
*
10085
* Copyright 2014 Contributors
10086
* Released under the MIT license
10087
* http://opensource.org/licenses/MIT
10088
*
10089
*/
10090
/*******************************
10091
Chat Room
10092
*******************************/
10093
.ui.chatroom {
10094
background-color: #F8F8F8;
10095
width: 330px;
10096
height: 370px;
10097
padding: 0px;
10098
}
10099
.ui.chatroom .room {
10100
position: relative;
10101
background-color: #FFFFFF;
10102
overflow: hidden;
10103
height: 286px;
10104
border: 1px solid rgba(0, 0, 0, 0.1);
10105
border-top: none;
10106
border-bottom: none;
10107
}
10108
.ui.chatroom .room .loader {
10109
display: none;
10110
margin: -25px 0px 0px -25px;
10111
}
10112
/* Chat Room Actions */
10113
.ui.chatroom .actions {
10114
overflow: hidden;
10115
background-color: #EEEEEE;
10116
padding: 4px;
10117
border: 1px solid rgba(0, 0, 0, 0.1);
10118
border-radius: 5px 5px 0px 0px;
10119
}
10120
.ui.chatroom .actions .button {
10121
float: right;
10122
margin-left: 3px;
10123
}
10124
/* Online User Count */
10125
.ui.chatroom .actions .message {
10126
float: left;
10127
margin-left: 6px;
10128
font-size: 11px;
10129
color: #AAAAAA;
10130
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8);
10131
line-height: 28px;
10132
}
10133
.ui.chatroom .actions .message .loader {
10134
display: inline-block;
10135
margin-right: 8px;
10136
}
10137
/* Chat Room Text Log */
10138
.ui.chatroom .log {
10139
float: left;
10140
overflow: auto;
10141
overflow-x: hidden;
10142
overflow-y: auto;
10143
}
10144
.ui.chatroom .log .message {
10145
padding: 3px 0px;
10146
border-top: 1px dotted #DADADA;
10147
}
10148
.ui.chatroom .log .message:first-child {
10149
border-top: none;
10150
}
10151
/* status event */
10152
.ui.chatroom .status {
10153
padding: 5px 0px;
10154
color: #AAAAAA;
10155
font-size: 12px;
10156
font-style: italic;
10157
line-height: 1.33;
10158
border-top: 1px dotted #DADADA;
10159
}
10160
.ui.chatroom .log .status:first-child {
10161
border-top: none;
10162
}
10163
.ui.chatroom .log .flag {
10164
float: left;
10165
}
10166
.ui.chatroom .log p {
10167
margin-left: 0px;
10168
}
10169
.ui.chatroom .log .author {
10170
font-weight: bold;
10171
-webkit-transition: color 0.3s ease-out;
10172
-moz-transition: color 0.3s ease-out;
10173
transition: color 0.3s ease-out;
10174
}
10175
.ui.chatroom .log a.author:hover {
10176
opacity: 0.8;
10177
}
10178
.ui.chatroom .log .message.admin p {
10179
font-weight: bold;
10180
margin: 1px 0px 0px 23px;
10181
}
10182
.ui.chatroom .log .divider {
10183
margin: -1px 0px;
10184
font-size: 11px;
10185
padding: 10px 0px;
10186
border-top: 1px solid #F8F8F8;
10187
border-bottom: 1px solid #F8F8F8;
10188
}
10189
.ui.chatroom .log .divider .rule {
10190
top: 50%;
10191
width: 15%;
10192
}
10193
.ui.chatroom .log .divider .label {
10194
color: #777777;
10195
margin: 0px;
10196
}
10197
/* Chat Room User List */
10198
.ui.chatroom .room .list {
10199
position: relative;
10200
overflow: auto;
10201
overflow-x: hidden;
10202
overflow-y: auto;
10203
float: left;
10204
background-color: #EEEEEE;
10205
border-left: 1px solid #DDDDDD;
10206
}
10207
.ui.chatroom .room .list .user {
10208
display: table;
10209
padding: 3px 7px;
10210
border-bottom: 1px solid #DDDDDD;
10211
}
10212
.ui.chatroom .room .list .user:hover {
10213
background-color: #F8F8F8;
10214
}
10215
.ui.chatroom .room .list .image {
10216
display: table-cell;
10217
vertical-align: middle;
10218
width: 20px;
10219
}
10220
.ui.chatroom .room .list .image img {
10221
width: 20px;
10222
height: 20px;
10223
vertical-align: middle;
10224
}
10225
.ui.chatroom .room .list p {
10226
display: table-cell;
10227
vertical-align: middle;
10228
padding-left: 7px;
10229
padding-right: 14px;
10230
font-size: 11px;
10231
line-height: 1.2;
10232
font-weight: bold;
10233
}
10234
.ui.chatroom .room .list a:hover {
10235
opacity: 0.8;
10236
}
10237
/* User List Loading */
10238
.ui.chatroom.loading .loader {
10239
display: block;
10240
}
10241
/* Chat Room Talk Input */
10242
.ui.chatroom .talk {
10243
border: 1px solid rgba(0, 0, 0, 0.1);
10244
padding: 5px 0px 0px;
10245
background-color: #EEEEEE;
10246
border-radius: 0px 0px 5px 5px;
10247
}
10248
.ui.chatroom .talk .avatar,
10249
.ui.chatroom .talk input,
10250
.ui.chatroom .talk .button {
10251
float: left;
10252
}
10253
.ui.chatroom .talk .avatar img {
10254
display: block;
10255
width: 30px;
10256
height: 30px;
10257
margin-right: 4px;
10258
border-radius: 500rem;
10259
}
10260
.ui.chatroom .talk input {
10261
border: 1px solid #CCCCCC;
10262
margin: 0px;
10263
width: 196px;
10264
height: 14px;
10265
padding: 8px 5px;
10266
font-size: 12px;
10267
color: #555555;
10268
}
10269
.ui.chatroom .talk input.focus {
10270
border: 1px solid #AAAAAA;
10271
}
10272
.ui.chatroom .send {
10273
width: 80px;
10274
height: 32px;
10275
margin-left: -1px;
10276
padding: 4px 12px;
10277
font-size: 12px;
10278
line-height: 23px;
10279
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
10280
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
10281
border-radius: 0 5px 5px 0;
10282
}
10283
.ui.chatroom .talk .log-in.button {
10284
display: block;
10285
float: none;
10286
margin-top: -6px;
10287
height: 22px;
10288
border-radius: 0px 0px 4px 4px;
10289
}
10290
.ui.chatroom .talk .log-in.button i {
10291
vertical-align: text-top;
10292
}
10293
/* Quirky Flags */
10294
.ui.chatroom .log .team.flag {
10295
width: 18px;
10296
}
10297
/* Chat room Loaded */
10298
.ui.chatroom.loading .loader {
10299
display: block;
10300
}
10301
/* Standard Size */
10302
.ui.chatroom {
10303
width: 330px;
10304
height: 370px;
10305
}
10306
.ui.chatroom .room .container {
10307
width: 3000px;
10308
}
10309
.ui.chatroom .log {
10310
width: 314px;
10311
height: 278px;
10312
padding: 4px 7px;
10313
}
10314
.ui.chatroom .room .list {
10315
width: 124px;
10316
height: 278px;
10317
padding: 4px 0px;
10318
}
10319
.ui.chatroom .room .list .user {
10320
width: 110px;
10321
}
10322
.ui.chatroom .talk {
10323
height: 40px;
10324
}
10325
10326
/*
10327
* # Semantic - Checkbox
10328
* http://github.com/jlukic/semantic-ui/
10329
*
10330
*
10331
* Copyright 2014 Contributors
10332
* Released under the MIT license
10333
* http://opensource.org/licenses/MIT
10334
*
10335
*/
10336
/*******************************
10337
Checkbox
10338
*******************************/
10339
/*--------------
10340
Standard
10341
---------------*/
10342
/*--- Content ---*/
10343
.ui.checkbox {
10344
position: relative;
10345
display: inline-block;
10346
min-width: 1em;
10347
min-height: 1.25em;
10348
line-height: 1em;
10349
outline: none;
10350
vertical-align: middle;
10351
}
10352
.ui.checkbox input {
10353
position: absolute;
10354
top: 0px;
10355
left: 0px;
10356
opacity: 0;
10357
outline: none;
10358
}
10359
/*--- Box ---*/
10360
.ui.checkbox .box,
10361
.ui.checkbox label {
10362
cursor: pointer;
10363
padding-left: 2em;
10364
outline: none;
10365
}
10366
.ui.checkbox .box:before,
10367
.ui.checkbox label:before {
10368
position: absolute;
10369
top: 0em;
10370
line-height: 1;
10371
width: 1em;
10372
height: 1em;
10373
left: 0em;
10374
content: '';
10375
border-radius: 4px;
10376
background: #FFFFFF;
10377
-webkit-transition: background-color 0.3s ease, -webkit-box-shadow 0.3s ease;
10378
-moz-transition: background-color 0.3s ease, box-shadow 0.3s ease;
10379
transition: background-color 0.3s ease, box-shadow 0.3s ease;
10380
-webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
10381
box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
10382
}
10383
/*--- Checkbox ---*/
10384
.ui.checkbox .box:after,
10385
.ui.checkbox label:after {
10386
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
10387
filter: alpha(opacity=0);
10388
opacity: 0;
10389
content: '';
10390
position: absolute;
10391
background: transparent;
10392
border: 0.2em solid #333333;
10393
border-top: none;
10394
border-right: none;
10395
-webkit-transform: rotate(-45deg);
10396
-moz-transform: rotate(-45deg);
10397
-ms-transform: rotate(-45deg);
10398
transform: rotate(-45deg);
10399
}
10400
.ui.checkbox .box:after,
10401
.ui.checkbox label:after {
10402
top: 0.275em;
10403
left: 0.2em;
10404
width: 0.45em;
10405
height: 0.15em;
10406
}
10407
/*--- Inside Label ---*/
10408
.ui.checkbox label {
10409
display: block;
10410
color: rgba(0, 0, 0, 0.6);
10411
-webkit-transition: color 0.2s ease;
10412
-moz-transition: color 0.2s ease;
10413
transition: color 0.2s ease;
10414
}
10415
.ui.checkbox label:hover {
10416
color: rgba(0, 0, 0, 0.8);
10417
}
10418
.ui.checkbox input:focus ~ label {
10419
color: rgba(0, 0, 0, 0.8);
10420
}
10421
/*--- Outside Label ---*/
10422
.ui.checkbox ~ label {
10423
cursor: pointer;
10424
opacity: 0.85;
10425
vertical-align: middle;
10426
}
10427
.ui.checkbox ~ label:hover {
10428
opacity: 1;
10429
}
10430
/*******************************
10431
States
10432
*******************************/
10433
/*--- Hover ---*/
10434
.ui.checkbox .box:hover::before,
10435
.ui.checkbox label:hover::before {
10436
-webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
10437
box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
10438
}
10439
/*--- Down ---*/
10440
.ui.checkbox .box:active::before,
10441
.ui.checkbox label:active::before {
10442
background-color: #F5F5F5;
10443
}
10444
/*--- Focus ---*/
10445
.ui.checkbox input:focus ~ .box:before,
10446
.ui.checkbox input:focus ~ label:before {
10447
-webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
10448
box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
10449
}
10450
/*--- Active ---*/
10451
.ui.checkbox input:checked ~ .box:after,
10452
.ui.checkbox input:checked ~ label:after {
10453
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
10454
filter: alpha(opacity=100);
10455
opacity: 1;
10456
}
10457
/*--- Disabled ---*/
10458
.ui.disabled.checkbox ~ .box:after,
10459
.ui.checkbox input[disabled] ~ .box:after,
10460
.ui.disabled.checkbox label,
10461
.ui.checkbox input[disabled] ~ label {
10462
opacity: 0.4;
10463
color: rgba(0, 0, 0, 0.3);
10464
}
10465
/*******************************
10466
Variations
10467
*******************************/
10468
/*--------------
10469
Radio
10470
---------------*/
10471
.ui.radio.checkbox .box:before,
10472
.ui.radio.checkbox label:before {
10473
min-width: 1em;
10474
height: 1em;
10475
border-radius: 500px;
10476
-webkit-transform: none;
10477
-moz-transform: none;
10478
-ms-transform: none;
10479
transform: none;
10480
}
10481
.ui.radio.checkbox .box:after,
10482
.ui.radio.checkbox label:after {
10483
border: none;
10484
top: 0.2em;
10485
left: 0.2em;
10486
width: 0.6em;
10487
height: 0.6em;
10488
background-color: #555555;
10489
-webkit-transform: none;
10490
-moz-transform: none;
10491
-ms-transform: none;
10492
transform: none;
10493
border-radius: 500px;
10494
}
10495
/*--------------
10496
Slider
10497
---------------*/
10498
.ui.slider.checkbox {
10499
cursor: pointer;
10500
min-width: 3em;
10501
}
10502
/* Line */
10503
.ui.slider.checkbox:after {
10504
position: absolute;
10505
top: 0.5em;
10506
left: 0em;
10507
content: '';
10508
width: 3em;
10509
height: 2px;
10510
background-color: rgba(0, 0, 0, 0.1);
10511
}
10512
/* Button */
10513
.ui.slider.checkbox .box,
10514
.ui.slider.checkbox label {
10515
padding-left: 4em;
10516
}
10517
.ui.slider.checkbox .box:before,
10518
.ui.slider.checkbox label:before {
10519
cursor: pointer;
10520
display: block;
10521
position: absolute;
10522
top: -0.25em;
10523
left: 0em;
10524
z-index: 1;
10525
width: 1.5em;
10526
height: 1.5em;
10527
-webkit-transform: none;
10528
-moz-transform: none;
10529
-ms-transform: none;
10530
transform: none;
10531
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
10532
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
10533
border-radius: 50rem;
10534
-webkit-transition: left 0.3s ease 0s;
10535
-moz-transition: left 0.3s ease 0s;
10536
transition: left 0.3s ease 0s;
10537
}
10538
/* Button Activation Light */
10539
.ui.slider.checkbox .box:after,
10540
.ui.slider.checkbox label:after {
10541
opacity: 1;
10542
position: absolute;
10543
content: '';
10544
top: 0.15em;
10545
left: 0em;
10546
z-index: 2;
10547
margin-left: 0.375em;
10548
border: none;
10549
width: 0.75em;
10550
height: 0.75em;
10551
border-radius: 50rem;
10552
-webkit-transform: none;
10553
-moz-transform: none;
10554
-ms-transform: none;
10555
transform: none;
10556
-webkit-transition: background 0.3s ease 0s,
10557
left 0.3s ease 0s
10558
;
10559
-moz-transition: background 0.3s ease 0s,
10560
left 0.3s ease 0s
10561
;
10562
transition: background 0.3s ease 0s,
10563
left 0.3s ease 0s
10564
;
10565
}
10566
/* Selected Slider Toggle */
10567
.ui.slider.checkbox input:checked ~ .box:before,
10568
.ui.slider.checkbox input:checked ~ label:before,
10569
.ui.slider.checkbox input:checked ~ .box:after,
10570
.ui.slider.checkbox input:checked ~ label:after {
10571
left: 1.75em;
10572
}
10573
/* Off Color */
10574
.ui.slider.checkbox .box:after,
10575
.ui.slider.checkbox label:after {
10576
background-color: #D95C5C;
10577
}
10578
/* On Color */
10579
.ui.slider.checkbox input:checked ~ .box:after,
10580
.ui.slider.checkbox input:checked ~ label:after {
10581
background-color: #89B84C;
10582
}
10583
/*--------------
10584
Toggle
10585
---------------*/
10586
.ui.toggle.checkbox {
10587
cursor: pointer;
10588
}
10589
.ui.toggle.checkbox .box,
10590
.ui.toggle.checkbox label {
10591
padding-left: 4em;
10592
}
10593
/* Switch */
10594
.ui.toggle.checkbox .box:before,
10595
.ui.toggle.checkbox label:before {
10596
cursor: pointer;
10597
display: block;
10598
position: absolute;
10599
content: '';
10600
top: -0.25em;
10601
left: 0em;
10602
z-index: 1;
10603
background-color: #FFFFFF;
10604
width: 3em;
10605
height: 1.5em;
10606
-webkit-transform: none;
10607
-moz-transform: none;
10608
-ms-transform: none;
10609
transform: none;
10610
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
10611
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
10612
border-radius: 50rem;
10613
}
10614
/* Activation Light */
10615
.ui.toggle.checkbox .box:after,
10616
.ui.toggle.checkbox label:after {
10617
opacity: 1;
10618
background-color: transparent;
10619
-webkit-box-shadow: none;
10620
box-shadow: none;
10621
content: '';
10622
position: absolute;
10623
top: 0.15em;
10624
left: 0.5em;
10625
z-index: 2;
10626
border: none;
10627
width: 0.75em;
10628
height: 0.75em;
10629
background-color: #D95C5C;
10630
border-radius: 50rem;
10631
-webkit-transition: background 0.3s ease 0s,
10632
left 0.3s ease 0s
10633
;
10634
-moz-transition: background 0.3s ease 0s,
10635
left 0.3s ease 0s
10636
;
10637
transition: background 0.3s ease 0s,
10638
left 0.3s ease 0s
10639
;
10640
}
10641
/* Active */
10642
.ui.toggle.checkbox:active .box:before,
10643
.ui.toggle.checkbox:active label:before {
10644
background-color: #F5F5F5;
10645
}
10646
/* Active */
10647
.ui.toggle.checkbox input:checked ~ .box:after,
10648
.ui.toggle.checkbox input:checked ~ label:after {
10649
left: 1.75em;
10650
background-color: #89B84C;
10651
}
10652
/*--------------
10653
Sizes
10654
---------------*/
10655
.ui.checkbox {
10656
font-size: 1em;
10657
}
10658
.ui.large.checkbox {
10659
font-size: 1.25em;
10660
}
10661
.ui.huge.checkbox {
10662
font-size: 1.5em;
10663
}
10664
10665
/*
10666
* # Semantic - Dimmer
10667
* http://github.com/jlukic/semantic-ui/
10668
*
10669
*
10670
* Copyright 2014 Contributors
10671
* Released under the MIT license
10672
* http://opensource.org/licenses/MIT
10673
*
10674
*/
10675
/*******************************
10676
Dimmer
10677
*******************************/
10678
.ui.dimmable {
10679
position: relative;
10680
}
10681
.ui.dimmer {
10682
display: none;
10683
position: absolute;
10684
top: 0em !important;
10685
left: 0em !important;
10686
width: 0%;
10687
height: 0%;
10688
text-align: center;
10689
vertical-align: middle;
10690
background-color: rgba(0, 0, 0, 0.85);
10691
opacity: 0;
10692
line-height: 1;
10693
-webkit-animation-fill-mode: both;
10694
-moz-animation-fill-mode: both;
10695
animation-fill-mode: both;
10696
-webkit-animation-duration: 0.5s;
10697
-moz-animation-duration: 0.5s;
10698
animation-duration: 0.5s;
10699
-webkit-transition: background-color 0.5s linear;
10700
-moz-transition: background-color 0.5s linear;
10701
transition: background-color 0.5s linear;
10702
-webkit-user-select: none;
10703
-moz-user-select: none;
10704
-ms-user-select: none;
10705
user-select: none;
10706
-webkit-box-sizing: border-box;
10707
-moz-box-sizing: border-box;
10708
box-sizing: border-box;
10709
z-index: 1000;
10710
}
10711
/* Dimmer Content */
10712
.ui.dimmer > .content {
10713
width: 100%;
10714
height: 100%;
10715
display: table;
10716
-webkit-user-select: text;
10717
-moz-user-select: text;
10718
-ms-user-select: text;
10719
user-select: text;
10720
}
10721
.ui.dimmer > .content > div {
10722
display: table-cell;
10723
vertical-align: middle;
10724
color: #FFFFFF;
10725
}
10726
/* Loose Coupling */
10727
.ui.segment > .ui.dimmer {
10728
border-radius: 5px;
10729
}
10730
.ui.horizontal.segment > .ui.dimmer,
10731
.ui.vertical.segment > .ui.dimmer {
10732
border-radius: 5px;
10733
}
10734
/*******************************
10735
States
10736
*******************************/
10737
.ui.dimmed.dimmable:not(body) {
10738
overflow: hidden;
10739
}
10740
.ui.dimmed.dimmable > .ui.animating.dimmer,
10741
.ui.dimmed.dimmable > .ui.visible.dimmer,
10742
.ui.active.dimmer {
10743
display: block;
10744
width: 100%;
10745
height: 100%;
10746
opacity: 1;
10747
}
10748
.ui.disabled.dimmer {
10749
width: 0em !important;
10750
height: 0em !important;
10751
}
10752
/*******************************
10753
Variations
10754
*******************************/
10755
/*--------------
10756
Page
10757
---------------*/
10758
.ui.page.dimmer {
10759
position: fixed;
10760
-webkit-transform-style: preserve-3d;
10761
-moz-transform-style: preserve-3d;
10762
transform-style: preserve-3d;
10763
-webkit-perspective: 2000px;
10764
-moz-perspective: 2000px;
10765
perspective: 2000px;
10766
-webkit-transform-origin: center center;
10767
-moz-transform-origin: center center;
10768
-ms-transform-origin: center center;
10769
transform-origin: center center;
10770
}
10771
.ui.scrolling.dimmable > .dimmer,
10772
.ui.scrolling.page.dimmer {
10773
position: absolute;
10774
}
10775
/* Blurred Background
10776
body.ui.dimmed.dimmable > :not(.dimmer){
10777
filter: ~"blur(15px) grayscale(0.7)";
10778
}
10779
*/
10780
/*--------------
10781
Aligned
10782
---------------*/
10783
.ui.dimmer > .top.aligned.content > * {
10784
vertical-align: top;
10785
}
10786
.ui.dimmer > .bottom.aligned.content > * {
10787
vertical-align: bottom;
10788
}
10789
/*--------------
10790
Inverted
10791
---------------*/
10792
.ui.inverted.dimmer {
10793
background-color: rgba(255, 255, 255, 0.85);
10794
}
10795
.ui.inverted.dimmer > .content > * {
10796
color: rgba(0, 0, 0, 0.8);
10797
}
10798
/*--------------
10799
Simple
10800
---------------*/
10801
/* Displays without javascript */
10802
.ui.simple.dimmer {
10803
display: block;
10804
overflow: hidden;
10805
opacity: 1;
10806
z-index: -100;
10807
background-color: rgba(0, 0, 0, 0);
10808
}
10809
.ui.dimmed.dimmable > .ui.simple.dimmer {
10810
overflow: visible;
10811
opacity: 1;
10812
width: 100%;
10813
height: 100%;
10814
background-color: rgba(0, 0, 0, 0.85);
10815
z-index: 1;
10816
}
10817
.ui.simple.inverted.dimmer {
10818
background-color: rgba(255, 255, 255, 0);
10819
}
10820
.ui.dimmed.dimmable > .ui.simple.inverted.dimmer {
10821
background-color: rgba(255, 255, 255, 0.85);
10822
}
10823
10824
/*
10825
* # Semantic - Dropdown
10826
* http://github.com/jlukic/semantic-ui/
10827
*
10828
*
10829
* Copyright 2014 Contributors
10830
* Released under the MIT license
10831
* http://opensource.org/licenses/MIT
10832
*
10833
*/
10834
/*******************************
10835
Dropdown
10836
*******************************/
10837
.ui.dropdown {
10838
cursor: pointer;
10839
position: relative;
10840
display: inline-block;
10841
line-height: 1;
10842
-webkit-transition: border-radius 0.1s ease, width 0.2s ease;
10843
-moz-transition: border-radius 0.1s ease, width 0.2s ease;
10844
transition: border-radius 0.1s ease, width 0.2s ease;
10845
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
10846
-moz-tap-highlight-color: rgba(0, 0, 0, 0);
10847
tap-highlight-color: rgba(0, 0, 0, 0);
10848
}
10849
/*******************************
10850
Content
10851
*******************************/
10852
/*--------------
10853
Menu
10854
---------------*/
10855
.ui.dropdown .menu {
10856
cursor: auto;
10857
position: absolute;
10858
display: none;
10859
top: 100%;
10860
margin: 0em;
10861
background-color: #FFFFFF;
10862
min-width: 100%;
10863
white-space: nowrap;
10864
font-size: 0.875em;
10865
text-shadow: none;
10866
-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
10867
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
10868
border-radius: 0px 0px 0.325em 0.325em;
10869
-webkit-transition: opacity 0.2s ease;
10870
-moz-transition: opacity 0.2s ease;
10871
transition: opacity 0.2s ease;
10872
z-index: 11;
10873
}
10874
/*--------------
10875
Icon
10876
---------------*/
10877
.ui.dropdown > .dropdown.icon {
10878
width: auto;
10879
margin: 0em 0em 0em 1em;
10880
}
10881
.ui.dropdown > .dropdown.icon:before {
10882
content: "\f0d7";
10883
}
10884
.ui.dropdown .menu .item .dropdown.icon {
10885
width: auto;
10886
float: right;
10887
margin: 0em 0em 0em 0.5em;
10888
}
10889
.ui.dropdown .menu .item .dropdown.icon:before {
10890
content: "\f0da" /*rtl:"\f0d9"*/;
10891
}
10892
/*--------------
10893
Text
10894
---------------*/
10895
.ui.dropdown > .text {
10896
display: inline-block;
10897
-webkit-transition: color 0.2s ease;
10898
-moz-transition: color 0.2s ease;
10899
transition: color 0.2s ease;
10900
}
10901
/* Flyout Direction */
10902
.ui.dropdown .menu {
10903
left: 0px;
10904
}
10905
/*--------------
10906
Sub Menu
10907
---------------*/
10908
.ui.dropdown .menu .menu {
10909
top: 0% !important;
10910
left: 100% !important;
10911
margin: 0em !important;
10912
border-radius: 0 0.325em 0.325em 0em !important;
10913
}
10914
.ui.dropdown .menu .menu:after {
10915
display: none;
10916
}
10917
.ui.dropdown .menu .item {
10918
cursor: pointer;
10919
border: none;
10920
border-top: 1px solid rgba(0, 0, 0, 0.05);
10921
height: auto;
10922
font-size: 0.875em;
10923
display: block;
10924
color: rgba(0, 0, 0, 0.75);
10925
padding: 0.85em 1em !important;
10926
font-size: 0.875rem;
10927
text-transform: none;
10928
font-weight: normal;
10929
text-align: left;
10930
-webkit-touch-callout: none;
10931
}
10932
.ui.dropdown .menu .item:before {
10933
display: none;
10934
}
10935
.ui.dropdown .menu .item .icon {
10936
margin-right: 0.75em;
10937
}
10938
.ui.dropdown .menu .item:first-child {
10939
border-top: none;
10940
}
10941
/*******************************
10942
Coupling
10943
*******************************/
10944
/* Opposite on last menu on right */
10945
.ui.menu .right.menu .dropdown:last-child .menu,
10946
.ui.buttons > .ui.dropdown:last-child .menu {
10947
left: auto;
10948
right: 0px;
10949
}
10950
.ui.vertical.menu .dropdown.item > .dropdown.icon:before {
10951
content: "\f0da" /*rtl:"\f0d9"*/;
10952
}
10953
.ui.dropdown.icon.button > .dropdown.icon {
10954
margin: 0em;
10955
}
10956
/*******************************
10957
States
10958
*******************************/
10959
/* Dropdown Visible */
10960
.ui.visible.dropdown > .menu {
10961
display: block;
10962
}
10963
/*--------------------
10964
Hover
10965
----------------------*/
10966
/* Menu Item Hover */
10967
.ui.dropdown .menu .item:hover {
10968
background-color: rgba(0, 0, 0, 0.02);
10969
z-index: 12;
10970
}
10971
/*--------------------
10972
Selected
10973
----------------------*/
10974
/* Menu Item Selected */
10975
.ui.dropdown .menu .item.selected {
10976
background-color: rgba(0, 0, 0, 0.02);
10977
z-index: 12;
10978
}
10979
/*--------------------
10980
Active
10981
----------------------*/
10982
/* Menu Item Active */
10983
.ui.dropdown .menu .active.item {
10984
background-color: rgba(0, 0, 0, 0.06) !important;
10985
border-left: none;
10986
border-color: transparent !important;
10987
-webkit-box-shadow: none;
10988
-moz-shadow: none;
10989
-webkit-box-shadow: none;
10990
box-shadow: none;
10991
z-index: 12;
10992
}
10993
/*--------------------
10994
Default Text
10995
----------------------*/
10996
.ui.dropdown > .default.text,
10997
.ui.default.dropdown > .text {
10998
color: rgba(0, 0, 0, 0.5);
10999
}
11000
.ui.dropdown:hover > .default.text,
11001
.ui.default.dropdown:hover > .text {
11002
color: rgba(0, 0, 0, 0.8);
11003
}
11004
/*--------------------
11005
Error
11006
----------------------*/
11007
.ui.dropdown.error,
11008
.ui.dropdown.error > .text,
11009
.ui.dropdown.error > .default.text {
11010
color: #D95C5C !important;
11011
}
11012
.ui.selection.dropdown.error {
11013
background-color: #FFFAFA;
11014
-webkit-box-shadow: 0px 0px 0px 1px #e7bebe !important;
11015
box-shadow: 0px 0px 0px 1px #e7bebe !important;
11016
}
11017
.ui.selection.dropdown.error:hover {
11018
-webkit-box-shadow: 0px 0px 0px 1px #e7bebe !important;
11019
box-shadow: 0px 0px 0px 1px #e7bebe !important;
11020
}
11021
.ui.dropdown.error > .menu,
11022
.ui.dropdown.error > .menu .menu {
11023
-webkit-box-shadow: 0px 0px 1px 1px #E7BEBE !important;
11024
box-shadow: 0px 0px 1px 1px #E7BEBE !important;
11025
}
11026
.ui.dropdown.error > .menu .item {
11027
color: #D95C5C !important;
11028
}
11029
/* Item Hover */
11030
.ui.dropdown.error > .menu .item:hover {
11031
background-color: #FFF2F2 !important;
11032
}
11033
/* Item Active */
11034
.ui.dropdown.error > .menu .active.item {
11035
background-color: #FDCFCF !important;
11036
}
11037
/*******************************
11038
Variations
11039
*******************************/
11040
/*--------------
11041
Simple
11042
---------------*/
11043
/* Displays without javascript */
11044
.ui.simple.dropdown .menu:before,
11045
.ui.simple.dropdown .menu:after {
11046
display: none;
11047
}
11048
.ui.simple.dropdown .menu {
11049
display: block;
11050
overflow: hidden;
11051
top: -9999px !important;
11052
position: absolute;
11053
opacity: 0;
11054
width: 0;
11055
height: 0;
11056
-webkit-transition: opacity 0.2s ease-out;
11057
-moz-transition: opacity 0.2s ease-out;
11058
transition: opacity 0.2s ease-out;
11059
}
11060
.ui.simple.active.dropdown,
11061
.ui.simple.dropdown:hover {
11062
border-bottom-left-radius: 0em !important;
11063
border-bottom-right-radius: 0em !important;
11064
}
11065
.ui.simple.active.dropdown > .menu,
11066
.ui.simple.dropdown:hover > .menu {
11067
overflow: visible;
11068
width: auto;
11069
height: auto;
11070
top: 100% !important;
11071
opacity: 1;
11072
}
11073
.ui.simple.dropdown > .menu .item:active > .menu,
11074
.ui.simple.dropdown:hover > .menu .item:hover > .menu {
11075
overflow: visible;
11076
width: auto;
11077
height: auto;
11078
top: 0% !important;
11079
left: 100% !important;
11080
opacity: 1;
11081
}
11082
.ui.simple.disabled.dropdown:hover .menu {
11083
display: none;
11084
height: 0px;
11085
width: 0px;
11086
overflow: hidden;
11087
}
11088
/*--------------
11089
Selection
11090
---------------*/
11091
/* Displays like a select box */
11092
.ui.selection.dropdown {
11093
cursor: pointer;
11094
display: inline-block;
11095
word-wrap: break-word;
11096
white-space: normal;
11097
background-color: #FFFFFF;
11098
padding: 0.65em 1em;
11099
line-height: 1.33;
11100
color: rgba(0, 0, 0, 0.8);
11101
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
11102
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
11103
border-radius: 0.3125em !important;
11104
}
11105
.ui.selection.dropdown select {
11106
display: none;
11107
}
11108
.ui.selection.dropdown > .dropdown.icon {
11109
opacity: 0.7;
11110
margin: 0.2em 0em 0.2em 1.25em;
11111
-webkit-transition: opacity 0.2s ease-out;
11112
-moz-transition: opacity 0.2s ease-out;
11113
transition: opacity 0.2s ease-out;
11114
}
11115
.ui.selection.dropdown,
11116
.ui.selection.dropdown .menu {
11117
-webkit-transition: -webkit-box-shadow 0.2s ease-out;
11118
-moz-transition: box-shadow 0.2s ease-out;
11119
transition: box-shadow 0.2s ease-out;
11120
}
11121
.ui.selection.dropdown .menu {
11122
top: 100%;
11123
max-height: 312px;
11124
overflow-x: hidden;
11125
overflow-y: auto;
11126
-webkit-box-shadow: 0px 1px 0px 1px #E0E0E0;
11127
box-shadow: 0px 1px 0px 1px #E0E0E0;
11128
border-radius: 0px 0px 0.325em 0.325em;
11129
}
11130
.ui.selection.dropdown .menu:after,
11131
.ui.selection.dropdown .menu:before {
11132
display: none;
11133
}
11134
.ui.selection.dropdown .menu img {
11135
height: 2.5em;
11136
display: inline-block;
11137
vertical-align: middle;
11138
margin-right: 0.5em;
11139
}
11140
/*--------------------
11141
Error
11142
----------------------*/
11143
.ui.selection.dropdown.error,
11144
.ui.selection.dropdown.error .item {
11145
background-color: #FFFAFA;
11146
color: #D95C5C;
11147
}
11148
.ui.selection.dropdown.error {
11149
-webkit-box-shadow: 0px 0px 0px 1px #e7bebe !important;
11150
box-shadow: 0px 0px 0px 1px #e7bebe !important;
11151
}
11152
.ui.selection.dropdown.error .menu {
11153
-webkit-box-shadow: 0px 1px 0px 1px #E7BEBE;
11154
box-shadow: 0px 1px 0px 1px #E7BEBE;
11155
border-radius: 0px 0px 0.325em 0.325em;
11156
}
11157
/* Menu Item Active */
11158
.ui.selection.dropdown.error .menu .active.item {
11159
background-color: #FDCFCF !important;
11160
}
11161
/* Hover */
11162
.ui.selection.dropdown:hover {
11163
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important;
11164
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important;
11165
}
11166
.ui.selection.dropdown:hover .menu {
11167
-webkit-box-shadow: 0px 1px 0px 1px #D3D3D3;
11168
box-shadow: 0px 1px 0px 1px #D3D3D3;
11169
}
11170
.ui.selection.dropdown:hover > .dropdown.icon {
11171
opacity: 1;
11172
}
11173
.ui.selection.dropdown.error:hover {
11174
-webkit-box-shadow: 0px 0px 0px 1px #e7bebe !important;
11175
box-shadow: 0px 0px 0px 1px #e7bebe !important;
11176
}
11177
.ui.selection.dropdown.error:hover .menu {
11178
-webkit-box-shadow: 0px 1px 0px 1px #E7BEBE;
11179
box-shadow: 0px 1px 0px 1px #E7BEBE;
11180
}
11181
.ui.selection.dropdown.error .menu .item:hover {
11182
background-color: #FFF2F2;
11183
}
11184
/* Selected */
11185
.ui.selection.dropdown.error .menu .item.selected {
11186
background-color: #FFF2F2;
11187
}
11188
/* Visible */
11189
.ui.visible.selection.dropdown {
11190
border-bottom-left-radius: 0em !important;
11191
border-bottom-right-radius: 0em !important;
11192
}
11193
/* Active */
11194
.ui.active.selection.dropdown {
11195
border-radius: 0.3125em 0.3125em 0em 0em !important;
11196
}
11197
.ui.active.selection.dropdown > .dropdown.icon {
11198
opacity: 1;
11199
}
11200
/*--------------
11201
Fluid
11202
---------------*/
11203
.ui.fluid.dropdown {
11204
display: block;
11205
}
11206
.ui.fluid.dropdown > .dropdown.icon {
11207
float: right;
11208
}
11209
/*--------------
11210
Inline
11211
---------------*/
11212
.ui.inline.dropdown {
11213
cursor: pointer;
11214
display: inline-block;
11215
color: inherit;
11216
}
11217
.ui.inline.dropdown .dropdown.icon {
11218
margin: 0em 0.5em 0em 0.25em;
11219
}
11220
.ui.inline.dropdown .text {
11221
font-weight: bold;
11222
}
11223
.ui.inline.dropdown .menu {
11224
cursor: auto;
11225
margin-top: 0.25em;
11226
border-radius: 0.325em;
11227
}
11228
/*--------------
11229
Floating
11230
---------------*/
11231
.ui.floating.dropdown .menu {
11232
left: 0;
11233
right: auto;
11234
margin-top: 0.5em !important;
11235
border-radius: 0.325em;
11236
}
11237
/*--------------
11238
Pointing
11239
---------------*/
11240
.ui.pointing.dropdown .menu {
11241
top: 100%;
11242
margin-top: 0.75em;
11243
border-radius: 0.325em;
11244
}
11245
.ui.pointing.dropdown .menu:after {
11246
display: block;
11247
position: absolute;
11248
pointer-events: none;
11249
content: " ";
11250
visibility: visible;
11251
width: 0.5em;
11252
height: 0.5em;
11253
-webkit-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05);
11254
box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05);
11255
background-image: none;
11256
background-color: #FFFFFF;
11257
-webkit-transform: rotate(45deg);
11258
-moz-transform: rotate(45deg);
11259
-ms-transform: rotate(45deg);
11260
transform: rotate(45deg);
11261
z-index: 12;
11262
}
11263
.ui.pointing.dropdown .menu .active.item:first-child {
11264
background: transparent -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.03));
11265
background: transparent -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.03));
11266
background: transparent -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.03)));
11267
background: transparent linear-gradient(transparent, rgba(0, 0, 0, 0.03));
11268
}
11269
/* Directions */
11270
.ui.pointing.dropdown .menu:after {
11271
top: -0.25em;
11272
left: 50%;
11273
margin: 0em 0em 0em -0.25em;
11274
}
11275
.ui.top.left.pointing.dropdown .menu {
11276
top: 100%;
11277
bottom: auto;
11278
left: 0%;
11279
right: auto;
11280
margin: 0.75em 0em 0em;
11281
}
11282
.ui.top.left.pointing.dropdown .menu:after {
11283
top: -0.25em;
11284
left: 1.25em;
11285
right: auto;
11286
margin: 0em;
11287
-webkit-transform: rotate(45deg);
11288
-moz-transform: rotate(45deg);
11289
-ms-transform: rotate(45deg);
11290
transform: rotate(45deg);
11291
}
11292
.ui.top.right.pointing.dropdown .menu {
11293
top: 100%;
11294
bottom: auto;
11295
right: 0%;
11296
left: auto;
11297
margin: 0.75em 0em 0em;
11298
}
11299
.ui.top.right.pointing.dropdown .menu:after {
11300
top: -0.25em;
11301
left: auto;
11302
right: 1.25em;
11303
margin: 0em;
11304
-webkit-transform: rotate(45deg);
11305
-moz-transform: rotate(45deg);
11306
-ms-transform: rotate(45deg);
11307
transform: rotate(45deg);
11308
}
11309
.ui.left.pointing.dropdown .menu {
11310
top: 0%;
11311
left: 100%;
11312
right: auto;
11313
margin: 0em 0em 0em 0.75em;
11314
}
11315
.ui.left.pointing.dropdown .menu:after {
11316
top: 1em;
11317
left: -0.25em;
11318
margin: 0em 0em 0em 0em;
11319
-webkit-transform: rotate(-45deg);
11320
-moz-transform: rotate(-45deg);
11321
-ms-transform: rotate(-45deg);
11322
transform: rotate(-45deg);
11323
}
11324
.ui.right.pointing.dropdown .menu {
11325
top: 0%;
11326
left: auto;
11327
right: 100%;
11328
margin: 0em 0.75em 0em 0em;
11329
}
11330
.ui.right.pointing.dropdown .menu:after {
11331
top: 1em;
11332
left: auto;
11333
right: -0.25em;
11334
margin: 0em 0em 0em 0em;
11335
-webkit-transform: rotate(135deg);
11336
-moz-transform: rotate(135deg);
11337
-ms-transform: rotate(135deg);
11338
transform: rotate(135deg);
11339
}
11340
11341
/*
11342
* # Semantic - Modal
11343
* http://github.com/jlukic/semantic-ui/
11344
*
11345
*
11346
* Copyright 2014 Contributors
11347
* Released under the MIT license
11348
* http://opensource.org/licenses/MIT
11349
*
11350
*/
11351
/*******************************
11352
Modal
11353
*******************************/
11354
.ui.modal {
11355
display: none;
11356
position: fixed;
11357
z-index: 1001;
11358
top: 50%;
11359
left: 50%;
11360
text-align: left;
11361
width: 90%;
11362
margin-left: -45%;
11363
background-color: #FFFFFF;
11364
border: 1px solid #DDDDDD;
11365
border-radius: 5px;
11366
-webkit-user-select: text;
11367
-moz-user-select: text;
11368
-ms-user-select: text;
11369
user-select: text;
11370
}
11371
/*******************************
11372
Content
11373
*******************************/
11374
/*--------------
11375
Close
11376
---------------*/
11377
.ui.modal > .close {
11378
cursor: pointer;
11379
position: absolute;
11380
z-index: 1;
11381
opacity: 0.8;
11382
font-size: 1.25em;
11383
top: -1.75em;
11384
right: -1.75em;
11385
color: #FFFFFF;
11386
}
11387
.ui.modal > .close:hover {
11388
opacity: 1;
11389
}
11390
/*--------------
11391
Header
11392
---------------*/
11393
.ui.modal > .header {
11394
margin: 0em;
11395
padding: 1.5rem 2rem;
11396
font-size: 1.6em;
11397
font-weight: bold;
11398
border-radius: 0.325em 0.325em 0px 0px;
11399
}
11400
/*--------------
11401
Content
11402
---------------*/
11403
.ui.modal > .content {
11404
display: table;
11405
width: 100%;
11406
position: relative;
11407
padding: 2em;
11408
background-color: #F4F4F4;
11409
-webkit-box-sizing: border-box;
11410
-moz-box-sizing: border-box;
11411
-ms-box-sizing: border-box;
11412
box-sizing: border-box;
11413
}
11414
.ui.modal > .content > .left:not(.ui) {
11415
display: table-cell;
11416
padding-right: 1.5%;
11417
min-width: 25%;
11418
}
11419
.ui.modal > .content > .right:not(.ui) {
11420
display: table-cell;
11421
padding-left: 1.5%;
11422
vertical-align: top;
11423
}
11424
/*rtl:ignore*/
11425
.ui.modal > .content > .left:not(.ui) > i.icon {
11426
font-size: 8em;
11427
margin: 0em;
11428
}
11429
.ui.modal > .content p {
11430
line-height: 1.6;
11431
}
11432
/*--------------
11433
Actions
11434
---------------*/
11435
.ui.modal .actions {
11436
padding: 1rem 2rem;
11437
text-align: right;
11438
}
11439
.ui.modal .actions > .button {
11440
margin-left: 0.75em;
11441
}
11442
/*-------------------
11443
Sizing
11444
--------------------*/
11445
/* Mobile Only */
11446
@media only screen and (max-width: 768px) {
11447
/*rtl:ignore*/
11448
.ui.modal .content > .left:not(.ui) {
11449
display: block;
11450
padding: 0em 0em 1em;
11451
}
11452
/*rtl:ignore*/
11453
.ui.modal .content > .right:not(.ui) {
11454
display: block;
11455
padding: 1em 0em 0em;
11456
-webkit-box-shadow: none;
11457
box-shadow: none;
11458
}
11459
.ui.modal .content .image {
11460
width: auto !important;
11461
max-width: 100%;
11462
}
11463
.ui.modal .actions {
11464
padding-bottom: 0em;
11465
}
11466
.ui.modal .actions > .buttons,
11467
.ui.modal .actions > .button {
11468
margin-bottom: 1em;
11469
}
11470
}
11471
/* Tablet and Mobile */
11472
@media only screen and (max-width: 998px) {
11473
.ui.modal {
11474
width: 92%;
11475
margin-left: -46%;
11476
}
11477
.ui.modal > .close {
11478
color: rgba(0, 0, 0, 0.8);
11479
top: 1.5rem;
11480
right: 1rem;
11481
}
11482
}
11483
/* Computer / Responsive */
11484
@media only screen and (min-width: 998px) {
11485
.ui.modal {
11486
width: 74%;
11487
margin-left: -37%;
11488
}
11489
}
11490
@media only screen and (min-width: 1500px) {
11491
.ui.modal {
11492
width: 56%;
11493
margin-left: -28%;
11494
}
11495
}
11496
@media only screen and (min-width: 1750px) {
11497
.ui.modal {
11498
width: 42%;
11499
margin-left: -21%;
11500
}
11501
}
11502
@media only screen and (min-width: 2000px) {
11503
.ui.modal {
11504
width: 36%;
11505
margin-left: -18%;
11506
}
11507
}
11508
/*******************************
11509
Types
11510
*******************************/
11511
.ui.basic.modal {
11512
background-color: transparent;
11513
border: none;
11514
color: #FFFFFF;
11515
}
11516
.ui.basic.modal > .close {
11517
top: 1.5rem;
11518
right: 1rem;
11519
}
11520
.ui.basic.modal .content {
11521
background-color: transparent;
11522
}
11523
/*******************************
11524
Variations
11525
*******************************/
11526
/* A modal that cannot fit on the page */
11527
.ui.modal.scrolling {
11528
position: absolute;
11529
margin-top: 10px;
11530
}
11531
/*******************************
11532
States
11533
*******************************/
11534
.ui.active.modal {
11535
display: block;
11536
}
11537
/*--------------
11538
Size
11539
---------------*/
11540
/* Small */
11541
.ui.small.modal > .header {
11542
font-size: 1.3em;
11543
}
11544
@media only screen and (min-width: 998px) {
11545
.ui.small.modal {
11546
width: 58%;
11547
margin-left: -29%;
11548
}
11549
}
11550
@media only screen and (min-width: 1500px) {
11551
.ui.small.modal {
11552
width: 40%;
11553
margin-left: -20%;
11554
}
11555
}
11556
@media only screen and (min-width: 1750px) {
11557
.ui.small.modal {
11558
width: 26%;
11559
margin-left: -13%;
11560
}
11561
}
11562
@media only screen and (min-width: 2000px) {
11563
.ui.small.modal {
11564
width: 20%;
11565
margin-left: -10%;
11566
}
11567
}
11568
/* Large */
11569
@media only screen and (min-width: 998px) {
11570
.ui.large.modal {
11571
width: 74%;
11572
margin-left: -37%;
11573
}
11574
}
11575
@media only screen and (min-width: 1500px) {
11576
.ui.large.modal {
11577
width: 64%;
11578
margin-left: -32%;
11579
}
11580
}
11581
@media only screen and (min-width: 1750px) {
11582
.ui.large.modal {
11583
width: 54%;
11584
margin-left: -27%;
11585
}
11586
}
11587
@media only screen and (min-width: 2000px) {
11588
.ui.large.modal {
11589
width: 44%;
11590
margin-left: -22%;
11591
}
11592
}
11593
11594
/*
11595
* # Semantic - Nag
11596
* http://github.com/jlukic/semantic-ui/
11597
*
11598
*
11599
* Copyright 2014 Contributors
11600
* Released under the MIT license
11601
* http://opensource.org/licenses/MIT
11602
*
11603
*/
11604
/*******************************
11605
Nag
11606
*******************************/
11607
.ui.nag {
11608
display: none;
11609
opacity: 0.95;
11610
position: relative;
11611
top: 0px;
11612
left: 0%;
11613
z-index: 101;
11614
min-height: 0;
11615
width: 100%;
11616
-webkit-box-sizing: border-box;
11617
-moz-box-sizing: border-box;
11618
-ms-box-sizing: border-box;
11619
box-sizing: border-box;
11620
margin: 0em;
11621
line-height: 3em;
11622
padding: 0em 1em;
11623
background-color: #555555;
11624
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
11625
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
11626
font-size: 1em;
11627
text-align: center;
11628
color: rgba(255, 255, 255, 0.8);
11629
border-radius: 0px 0px 5px 5px;
11630
-webkit-transition: 0.2s background;
11631
-moz-transition: 0.2s background;
11632
transition: 0.2s background;
11633
}
11634
a.ui.nag {
11635
cursor: pointer;
11636
}
11637
.ui.nag > .title {
11638
display: inline-block;
11639
margin: 0em 0.5em;
11640
color: #FFFFFF;
11641
}
11642
.ui.nag > .close.icon {
11643
cursor: pointer;
11644
opacity: 0.4;
11645
position: absolute;
11646
top: 50%;
11647
right: 1em;
11648
margin-top: -0.5em;
11649
color: #FFFFFF;
11650
-webkit-transition: 0.1s opacity;
11651
-moz-transition: 0.1s opacity;
11652
transition: 0.1s opacity;
11653
}
11654
/*******************************
11655
States
11656
*******************************/
11657
/* Hover */
11658
.ui.nag:hover {
11659
opacity: 1;
11660
}
11661
.ui.nag .close:hover {
11662
opacity: 1;
11663
}
11664
/*******************************
11665
Variations
11666
*******************************/
11667
/*--------------
11668
Static
11669
---------------*/
11670
.ui.overlay.nag {
11671
position: absolute;
11672
display: block;
11673
}
11674
/*--------------
11675
Fixed
11676
---------------*/
11677
.ui.fixed.nag {
11678
position: fixed;
11679
}
11680
/*--------------
11681
Bottom
11682
---------------*/
11683
.ui.bottom.nag {
11684
border-radius: 5px 5px 0px 0px;
11685
}
11686
.ui.fixed.bottom.nags,
11687
.ui.fixed.bottom.nag {
11688
top: auto;
11689
bottom: 0px;
11690
}
11691
/*--------------
11692
White
11693
---------------*/
11694
.ui.white.nags .nag,
11695
.ui.white.nag {
11696
background-color: #F1F1F1;
11697
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
11698
color: #ACACAC;
11699
}
11700
.ui.white.nags .nag .close,
11701
.ui.white.nags .nag .title,
11702
.ui.white.nag .close,
11703
.ui.white.nag .title {
11704
color: #333333;
11705
}
11706
/*******************************
11707
Groups
11708
*******************************/
11709
.ui.nags .nag {
11710
border-radius: 0px;
11711
}
11712
11713
/*
11714
* # Semantic - Popup
11715
* http://github.com/jlukic/semantic-ui/
11716
*
11717
*
11718
* Copyright 2014 Contributors
11719
* Released under the MIT license
11720
* http://opensource.org/licenses/MIT
11721
*
11722
*/
11723
/*******************************
11724
Popup
11725
*******************************/
11726
.ui.popup {
11727
display: none;
11728
position: absolute;
11729
top: 0px;
11730
right: 0px;
11731
z-index: 900;
11732
border: 1px solid rgba(0, 0, 0, 0.1);
11733
max-width: 250px;
11734
background-color: #FFFFFF;
11735
padding: 0.8em 1.2em;
11736
font-size: 0.875rem;
11737
font-weight: normal;
11738
font-style: normal;
11739
color: rgba(0, 0, 0, 0.7);
11740
border-radius: 0.2em;
11741
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
11742
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
11743
}
11744
.ui.popup .header {
11745
padding: 0em 0em 0.5em;
11746
font-size: 1.125em;
11747
line-height: 1.2;
11748
font-weight: bold;
11749
}
11750
.ui.popup:before {
11751
position: absolute;
11752
content: "";
11753
width: 0.75em;
11754
height: 0.75rem;
11755
background-image: none;
11756
background-color: #FFFFFF;
11757
-webkit-transform: rotate(45deg);
11758
-moz-transform: rotate(45deg);
11759
-ms-transform: rotate(45deg);
11760
transform: rotate(45deg);
11761
z-index: 2;
11762
-webkit-box-sizing: border-box;
11763
-moz-box-sizing: border-box;
11764
-ms-box-sizing: border-box;
11765
box-sizing: border-box;
11766
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
11767
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
11768
}
11769
.ui.popup .ui.button {
11770
width: 100%;
11771
}
11772
/*******************************
11773
Types
11774
*******************************/
11775
/*--------------
11776
Spacing
11777
---------------*/
11778
.ui.popup {
11779
margin: 0em;
11780
}
11781
.ui.popup.bottom {
11782
margin: 0.75em 0em 0em;
11783
}
11784
.ui.popup.top {
11785
margin: 0em 0em 0.75em;
11786
}
11787
.ui.popup.left.center {
11788
margin: 0em 0.75em 0em 0em;
11789
}
11790
.ui.popup.right.center {
11791
margin: 0em 0em 0em 0.75em;
11792
}
11793
.ui.popup.center {
11794
margin-left: -1.25em;
11795
}
11796
/*--------------
11797
Pointer
11798
---------------*/
11799
/*--- Below ---*/
11800
.ui.bottom.center.popup:before {
11801
margin-left: -0.4em;
11802
top: -0.4em;
11803
left: 50%;
11804
right: auto;
11805
bottom: auto;
11806
-webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
11807
box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
11808
}
11809
.ui.bottom.left.popup {
11810
margin-right: -2em;
11811
}
11812
.ui.bottom.left.popup:before {
11813
top: -0.4em;
11814
right: 1em;
11815
bottom: auto;
11816
left: auto;
11817
margin-left: 0em;
11818
-webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
11819
box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
11820
}
11821
.ui.bottom.right.popup {
11822
margin-left: -2em;
11823
}
11824
.ui.bottom.right.popup:before {
11825
top: -0.4em;
11826
left: 1em;
11827
right: auto;
11828
bottom: auto;
11829
margin-left: 0em;
11830
-webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
11831
box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
11832
}
11833
/*--- Above ---*/
11834
.ui.top.center.popup:before {
11835
top: auto;
11836
right: auto;
11837
bottom: -0.4em;
11838
left: 50%;
11839
margin-left: -0.4em;
11840
}
11841
.ui.top.left.popup {
11842
margin-right: -2em;
11843
}
11844
.ui.top.left.popup:before {
11845
bottom: -0.4em;
11846
right: 1em;
11847
top: auto;
11848
left: auto;
11849
margin-left: 0em;
11850
}
11851
.ui.top.right.popup {
11852
margin-left: -2em;
11853
}
11854
.ui.top.right.popup:before {
11855
bottom: -0.4em;
11856
left: 1em;
11857
top: auto;
11858
right: auto;
11859
margin-left: 0em;
11860
}
11861
/*--- Left Center ---*/
11862
.ui.left.center.popup:before {
11863
top: 50%;
11864
right: -0.35em;
11865
bottom: auto;
11866
left: auto;
11867
margin-top: -0.4em;
11868
-webkit-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
11869
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
11870
}
11871
/*--- Right Center ---*/
11872
.ui.right.center.popup:before {
11873
top: 50%;
11874
left: -0.35em;
11875
bottom: auto;
11876
right: auto;
11877
margin-top: -0.4em;
11878
-webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
11879
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
11880
}
11881
/*******************************
11882
States
11883
*******************************/
11884
.ui.loading.popup {
11885
display: block;
11886
visibility: hidden;
11887
}
11888
.ui.animating.popup,
11889
.ui.visible.popup {
11890
display: block;
11891
}
11892
/*******************************
11893
Variations
11894
*******************************/
11895
/*--------------
11896
Size
11897
---------------*/
11898
.ui.small.popup {
11899
font-size: 0.75rem;
11900
}
11901
.ui.large.popup {
11902
font-size: 1rem;
11903
}
11904
/*--------------
11905
Colors
11906
---------------*/
11907
/* Inverted colors */
11908
.ui.inverted.popup {
11909
background-color: #333333;
11910
border: none;
11911
color: #FFFFFF;
11912
-webkit-box-shadow: none;
11913
box-shadow: none;
11914
}
11915
.ui.inverted.popup .header {
11916
background-color: rgba(0, 0, 0, 0.2);
11917
color: #FFFFFF;
11918
}
11919
.ui.inverted.popup:before {
11920
background-color: #333333;
11921
-webkit-box-shadow: none;
11922
box-shadow: none;
11923
}
11924
11925
/*
11926
* # Semantic - Rating
11927
* http://github.com/jlukic/semantic-ui/
11928
*
11929
*
11930
* Copyright 2014 Contributors
11931
* Released under the MIT license
11932
* http://opensource.org/licenses/MIT
11933
*
11934
*/
11935
/*******************************
11936
Rating
11937
*******************************/
11938
.ui.rating {
11939
display: inline-block;
11940
font-size: 0em;
11941
vertical-align: middle;
11942
margin: 0em 0.5rem 0em 0em;
11943
}
11944
.ui.rating:last-child {
11945
margin-right: 0em;
11946
}
11947
.ui.rating:before {
11948
display: block;
11949
content: '';
11950
visibility: hidden;
11951
clear: both;
11952
height: 0;
11953
}
11954
/* Icon */
11955
.ui.rating .icon {
11956
cursor: pointer;
11957
margin: 0em;
11958
width: 1em;
11959
height: auto;
11960
padding: 0em;
11961
color: rgba(0, 0, 0, 0.15);
11962
font-weight: normal;
11963
font-style: normal;
11964
}
11965
.ui.rating .icon:before {
11966
content: "\2605";
11967
}
11968
/*******************************
11969
Types
11970
*******************************/
11971
/*-------------------
11972
Star
11973
--------------------*/
11974
.ui.star.rating .icon {
11975
width: 1.2em;
11976
}
11977
/* Star */
11978
.ui.star.rating .icon:before {
11979
content: '\f006';
11980
font-family: 'Icons';
11981
}
11982
/* Active Star */
11983
.ui.star.rating .active.icon:before {
11984
content: '\f005';
11985
font-family: 'Icons';
11986
}
11987
/*-------------------
11988
Heart
11989
--------------------*/
11990
.ui.heart.rating .icon {
11991
width: 1.2em;
11992
}
11993
.ui.heart.rating .icon:before {
11994
content: '\f08a';
11995
font-family: 'Icons';
11996
}
11997
/* Active */
11998
.ui.heart.rating .active.icon:before {
11999
content: '\f004';
12000
font-family: 'Icons';
12001
}
12002
.ui.heart.rating .active.icon {
12003
color: #EF404A !important;
12004
}
12005
/* Hovered */
12006
.ui.heart.rating .hover.icon,
12007
.ui.heart.rating .active.hover.icon {
12008
color: #FF2733 !important;
12009
}
12010
/*******************************
12011
States
12012
*******************************/
12013
/*-------------------
12014
Active
12015
--------------------*/
12016
/* disabled rating */
12017
.ui.disabled.rating .icon {
12018
cursor: default;
12019
}
12020
/* active icons */
12021
.ui.rating .active.icon {
12022
color: #FFCB08 !important;
12023
}
12024
/*-------------------
12025
Hover
12026
--------------------*/
12027
/* rating */
12028
.ui.rating.hover .active.icon {
12029
opacity: 0.5;
12030
}
12031
/* icon */
12032
.ui.rating .icon.hover,
12033
.ui.rating .icon.hover.active {
12034
opacity: 1;
12035
color: #FFB70A !important;
12036
}
12037
/*******************************
12038
Variations
12039
*******************************/
12040
.ui.small.rating .icon {
12041
font-size: 0.75rem;
12042
}
12043
.ui.rating .icon {
12044
font-size: 1rem;
12045
}
12046
.ui.large.rating .icon {
12047
font-size: 1.5rem;
12048
vertical-align: middle;
12049
}
12050
.ui.huge.rating .icon {
12051
font-size: 2rem;
12052
vertical-align: middle;
12053
}
12054
12055
/*
12056
* # Semantic - Search
12057
* http://github.com/jlukic/semantic-ui/
12058
*
12059
*
12060
* Copyright 2014 Contributors
12061
* Released under the MIT license
12062
* http://opensource.org/licenses/MIT
12063
*
12064
*/
12065
/*******************************
12066
Search
12067
*******************************/
12068
.ui.search {
12069
position: relative;
12070
text-shadow: none;
12071
font-style: normal;
12072
font-weight: normal;
12073
}
12074
.ui.search input {
12075
border-radius: 500rem;
12076
}
12077
/*--------------
12078
Button
12079
---------------*/
12080
.ui.search > .button {
12081
position: relative;
12082
z-index: 2;
12083
float: right;
12084
margin: 0px 0px 0px -15px;
12085
padding: 6px 15px 7px;
12086
border-radius: 0px 15px 15px 0px;
12087
-webkit-box-shadow: none;
12088
box-shadow: none;
12089
}
12090
/*--------------
12091
Results
12092
---------------*/
12093
.ui.search .results {
12094
display: none;
12095
position: absolute;
12096
z-index: 999;
12097
top: 100%;
12098
left: 0px;
12099
overflow: hidden;
12100
background-color: #FFFFFF;
12101
margin-top: 0.5em;
12102
width: 380px;
12103
font-size: 0.875em;
12104
line-height: 1.2;
12105
color: #555555;
12106
border-radius: 3px;
12107
-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset;
12108
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset;
12109
}
12110
.ui.search .result {
12111
cursor: pointer;
12112
overflow: hidden;
12113
padding: 0.5em 1em;
12114
}
12115
.ui.search .result:first-child {
12116
border-top: none;
12117
}
12118
.ui.search .result .image {
12119
background: #F0F0F0;
12120
margin-right: 10px;
12121
float: left;
12122
overflow: hidden;
12123
border-radius: 3px;
12124
width: 38px;
12125
height: 38px;
12126
}
12127
.ui.search .result .image img {
12128
display: block;
12129
width: 38px;
12130
height: 38px;
12131
}
12132
.ui.search .result .image ~ .info {
12133
float: none;
12134
margin-left: 50px;
12135
}
12136
.ui.search .result .info {
12137
float: left;
12138
}
12139
.ui.search .result .title {
12140
font-weight: bold;
12141
color: rgba(0, 0, 0, 0.8);
12142
}
12143
.ui.search .result .description {
12144
color: rgba(0, 0, 0, 0.6);
12145
}
12146
.ui.search .result .price {
12147
float: right;
12148
color: #5BBD72;
12149
font-weight: bold;
12150
}
12151
/*--------------
12152
Message
12153
---------------*/
12154
.ui.search .message {
12155
padding: 1em;
12156
}
12157
.ui.search .message .text .title {
12158
margin: 0em 0em 0.5rem;
12159
font-size: 1.25rem;
12160
font-weight: bold;
12161
color: rgba(0, 0, 0, 0.8);
12162
}
12163
.ui.search .message .text .description {
12164
margin: 0em;
12165
font-size: 1rem;
12166
color: rgba(0, 0, 0, 0.5);
12167
}
12168
/*--------------
12169
Categories
12170
---------------*/
12171
.ui.search .results .category {
12172
background-color: #FAFAFA;
12173
border-top: 1px solid rgba(0, 0, 0, 0.1);
12174
-webkit-transition: background 0.2s ease-in;
12175
-moz-transition: background 0.2s ease-in;
12176
transition: background 0.2s ease-in;
12177
}
12178
.ui.search .results .category:first-child {
12179
border-top: none;
12180
}
12181
.ui.search .results .category > .name {
12182
float: left;
12183
padding: 12px 0px 0px 8px;
12184
font-weight: bold;
12185
color: #777777;
12186
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
12187
}
12188
.ui.search .results .category .result {
12189
background-color: #FFFFFF;
12190
margin-left: 80px;
12191
border-left: 1px solid rgba(0, 0, 0, 0.1);
12192
}
12193
/* View All Results */
12194
.ui.search .all {
12195
display: block;
12196
border-top: 1px solid rgba(0, 0, 0, 0.1);
12197
background-color: #FAFAFA;
12198
height: 2em;
12199
line-height: 2em;
12200
color: rgba(0, 0, 0, 0.6);
12201
font-weight: bold;
12202
text-align: center;
12203
}
12204
/*******************************
12205
States
12206
*******************************/
12207
/*--------------
12208
Hover
12209
---------------*/
12210
.ui.search .result:hover,
12211
.ui.search .category .result:hover {
12212
background-color: #F8F8F8;
12213
}
12214
.ui.search .all:hover {
12215
background-color: #F0F0F0;
12216
}
12217
/*--------------
12218
Loading
12219
---------------*/
12220
.ui.search.loading .input .icon {
12221
background: url(../images/loader-mini.gif) no-repeat 50% 50%;
12222
}
12223
.ui.search.loading .input .icon:before,
12224
.ui.search.loading .input .icon:after {
12225
display: none;
12226
}
12227
/*--------------
12228
Active
12229
---------------*/
12230
.ui.search .results .category.active {
12231
background-color: #F1F1F1;
12232
}
12233
.ui.search .results .category.active > .name {
12234
color: #333333;
12235
}
12236
.ui.search .result.active,
12237
.ui.search .category .result.active {
12238
background-color: #FBFBFB;
12239
}
12240
.ui.search .result.active .title {
12241
color: #000000;
12242
}
12243
.ui.search .result.active .description {
12244
color: #555555;
12245
}
12246
/*******************************
12247
Variations
12248
*******************************/
12249
/* Large */
12250
.ui.search .large.result .image,
12251
.ui.search .large.result .image img {
12252
width: 50px;
12253
height: 50px;
12254
}
12255
.ui.search .large.results .indented.info {
12256
margin-left: 65px;
12257
}
12258
.ui.search .large.results .info .title {
12259
font-size: 16px;
12260
}
12261
.ui.search .large.results .info .description {
12262
font-size: 11px;
12263
}
12264
12265
/*
12266
* # Semantic - Shape
12267
* http://github.com/jlukic/semantic-ui/
12268
*
12269
*
12270
* Copyright 2014 Contributors
12271
* Released under the MIT license
12272
* http://opensource.org/licenses/MIT
12273
*
12274
*/
12275
/*******************************
12276
Shape
12277
*******************************/
12278
.ui.shape {
12279
display: inline-block;
12280
position: relative;
12281
-webkit-perspective: 2000px;
12282
-moz-perspective: 2000px;
12283
-ms-perspective: 2000px;
12284
perspective: 2000px;
12285
-webkit-box-sizing: border-box;
12286
-moz-box-sizing: border-box;
12287
-ms-box-sizing: border-box;
12288
box-sizing: border-box;
12289
}
12290
.ui.shape .sides {
12291
-webkit-transform-style: preserve-3d;
12292
-moz-transform-style: preserve-3d;
12293
-ms-transform-style: preserve-3d;
12294
transform-style: preserve-3d;
12295
}
12296
.ui.shape .side {
12297
opacity: 1;
12298
width: 100%;
12299
margin: 0em !important;
12300
-webkit-backface-visibility: hidden;
12301
-moz-backface-visibility: hidden;
12302
-ms-backface-visibility: hidden;
12303
backface-visibility: hidden;
12304
-webkit-box-sizing: border-box;
12305
-moz-box-sizing: border-box;
12306
-ms-box-sizing: border-box;
12307
box-sizing: border-box;
12308
}
12309
.ui.shape .side {
12310
display: none;
12311
}
12312
/*******************************
12313
Types
12314
*******************************/
12315
.ui.cube.shape .side {
12316
min-width: 15em;
12317
height: 15em;
12318
padding: 2em;
12319
background-color: #E6E6E6;
12320
color: rgba(0, 0, 0, 0.6);
12321
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
12322
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
12323
}
12324
.ui.cube.shape .side > .content {
12325
width: 100%;
12326
height: 100%;
12327
display: table;
12328
text-align: center;
12329
-webkit-user-select: text;
12330
-moz-user-select: text;
12331
-ms-user-select: text;
12332
user-select: text;
12333
}
12334
.ui.cube.shape .side > .content > div {
12335
display: table-cell;
12336
vertical-align: middle;
12337
font-size: 2em;
12338
}
12339
/*******************************
12340
Variations
12341
*******************************/
12342
.ui.text.shape.animating .sides {
12343
position: static;
12344
}
12345
.ui.text.shape .side {
12346
white-space: nowrap;
12347
}
12348
.ui.text.shape .side > * {
12349
white-space: normal;
12350
}
12351
/*******************************
12352
States
12353
*******************************/
12354
/*--------------
12355
Loading
12356
---------------*/
12357
.ui.loading.shape {
12358
position: absolute;
12359
top: -9999px;
12360
left: -9999px;
12361
}
12362
/*--------------
12363
Animating
12364
---------------*/
12365
.ui.shape .animating.side {
12366
position: absolute;
12367
top: 0px;
12368
left: 0px;
12369
z-index: 100;
12370
}
12371
.ui.shape .hidden.side {
12372
opacity: 0.4;
12373
}
12374
/*--------------
12375
CSS
12376
---------------*/
12377
.ui.shape.animating {
12378
-webkit-transition: all 0.6s ease-in-out;
12379
-moz-transition: all 0.6s ease-in-out;
12380
transition: all 0.6s ease-in-out;
12381
}
12382
.ui.shape.animating .sides {
12383
position: absolute;
12384
}
12385
.ui.shape.animating .sides {
12386
-webkit-transition: all 0.6s ease-in-out;
12387
-moz-transition: all 0.6s ease-in-out;
12388
transition: all 0.6s ease-in-out;
12389
}
12390
.ui.shape.animating .side {
12391
-webkit-transition: opacity 0.6s ease-in-out;
12392
-moz-transition: opacity 0.6s ease-in-out;
12393
transition: opacity 0.6s ease-in-out;
12394
}
12395
/*--------------
12396
Active
12397
---------------*/
12398
.ui.shape .active.side {
12399
display: block;
12400
}
12401
12402
/*
12403
* # Semantic - Sidebar
12404
* http://github.com/jlukic/semantic-ui/
12405
*
12406
*
12407
* Copyright 2014 Contributors
12408
* Released under the MIT license
12409
* http://opensource.org/licenses/MIT
12410
*
12411
*/
12412
/*******************************
12413
Sidebar
12414
*******************************/
12415
body {
12416
-webkit-transition: margin 0.3s ease, -webkit-transform 0.3s ease /*rtl:append:,
12417
padding 0.3s ease*/;
12418
-moz-transition: margin 0.3s ease, -moz-transform 0.3s ease /*rtl:append:,
12419
padding 0.3s ease*/;
12420
transition: margin 0.3s ease, transform 0.3s ease /*rtl:append:,
12421
padding 0.3s ease*/;
12422
}
12423
.ui.sidebar {
12424
position: fixed;
12425
margin: 0 !important;
12426
height: 100% !important;
12427
border-radius: 0px !important;
12428
-webkit-box-sizing: border-box;
12429
-moz-box-sizing: border-box;
12430
-ms-box-sizing: border-box;
12431
box-sizing: border-box;
12432
-ms-overflow-y: auto;
12433
overflow-y: auto;
12434
top: 0px;
12435
left: 0px;
12436
z-index: 999;
12437
-webkit-transition: margin-left 0.3s ease, margin-top 0.3s ease;
12438
-moz-transition: margin-left 0.3s ease, margin-top 0.3s ease;
12439
transition: margin-left 0.3s ease, margin-top 0.3s ease;
12440
}
12441
/*-------------------
12442
Coupling
12443
--------------------*/
12444
body.pushed.scrolling.ui.dimmable {
12445
position: static;
12446
}
12447
/*******************************
12448
Types
12449
*******************************/
12450
/*-------------------
12451
Direction
12452
--------------------*/
12453
.ui.right.very.thin.sidebar,
12454
.ui.right.thin.sidebar,
12455
.ui.right.sidebar,
12456
.ui.right.wide.sidebar,
12457
.ui.right.very.wide.sidebar {
12458
left: 100%;
12459
margin: 0px !important;
12460
}
12461
.ui.top.sidebar {
12462
width: 100% !important;
12463
}
12464
.ui.bottom.sidebar {
12465
width: 100% !important;
12466
top: 100%;
12467
margin: 0px !important;
12468
}
12469
/*******************************
12470
States
12471
*******************************/
12472
.ui.active.sidebar {
12473
margin-left: 0px !important;
12474
}
12475
.ui.active.top.sidebar,
12476
.ui.active.bottom.sidebar {
12477
margin-top: 0px !important;
12478
}
12479
/*******************************
12480
Variations
12481
*******************************/
12482
/*-------------------
12483
Formatted
12484
--------------------*/
12485
.ui.styled.sidebar {
12486
padding: 1em 1.5em;
12487
background-color: #FFFFFF;
12488
-webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1);
12489
box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1);
12490
}
12491
.ui.styled.very.thin.sidebar {
12492
padding: 0.5em;
12493
}
12494
.ui.styled.thin.sidebar {
12495
padding: 1em;
12496
}
12497
/*-------------------
12498
Floating
12499
--------------------*/
12500
.ui.floating.sidebar {
12501
-webkit-box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2);
12502
box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2);
12503
}
12504
.ui.right.floating.sidebar {
12505
-webkit-box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2);
12506
box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2);
12507
}
12508
.ui.top.floating.sidebar {
12509
-webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
12510
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
12511
}
12512
.ui.bottom.floating.sidebar {
12513
-webkit-box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2);
12514
box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2);
12515
}
12516
/*-------------------
12517
Width
12518
--------------------*/
12519
/* Very Thin */
12520
.ui.very.thin.sidebar {
12521
width: 60px !important;
12522
margin-left: -60px !important;
12523
}
12524
.ui.active.very.thin.sidebar {
12525
margin-left: 0px !important;
12526
}
12527
.ui.active.right.very.thin.sidebar {
12528
margin-left: -60px !important;
12529
}
12530
/* Thin */
12531
.ui.thin.sidebar {
12532
width: 200px !important;
12533
margin-left: -200px !important;
12534
}
12535
.ui.active.thin.sidebar {
12536
margin-left: 0px !important;
12537
}
12538
.ui.active.right.thin.sidebar {
12539
margin-left: -200px !important;
12540
}
12541
/* Standard */
12542
.ui.sidebar {
12543
width: 275px !important;
12544
margin-left: -275px !important;
12545
}
12546
.ui.active.sidebar {
12547
margin-left: 0px !important;
12548
}
12549
.ui.active.right.sidebar {
12550
margin-left: -275px !important;
12551
}
12552
/* Wide */
12553
.ui.wide.sidebar {
12554
width: 350px !important;
12555
margin-left: -350px !important;
12556
}
12557
.ui.active.wide.sidebar {
12558
margin-left: 0px !important;
12559
}
12560
.ui.active.right.wide.sidebar {
12561
margin-left: -350px !important;
12562
}
12563
/* Very Wide */
12564
.ui.very.wide.sidebar {
12565
width: 475px !important;
12566
margin-left: -475px !important;
12567
}
12568
.ui.active.very.wide.sidebar {
12569
margin-left: 0px !important;
12570
}
12571
.ui.active.right.very.wide.sidebar {
12572
margin-left: -475px !important;
12573
}
12574
/*-------------------
12575
Height
12576
--------------------*/
12577
/* Standard */
12578
.ui.top.sidebar {
12579
margin: -40px 0px 0px 0px !important;
12580
}
12581
.ui.top.sidebar,
12582
.ui.bottom.sidebar {
12583
height: 40px !important;
12584
}
12585
.ui.active.bottom.sidebar {
12586
margin-top: -40px !important;
12587
}
12588
12589
/*
12590
* # Semantic - Tab
12591
* http://github.com/jlukic/semantic-ui/
12592
*
12593
*
12594
* Copyright 2014 Contributors
12595
* Released under the MIT license
12596
* http://opensource.org/licenses/MIT
12597
*
12598
*/
12599
/*******************************
12600
UI Tabs
12601
*******************************/
12602
.ui.tab {
12603
display: none;
12604
}
12605
/*******************************
12606
States
12607
*******************************/
12608
/*--------------------
12609
Active
12610
---------------------*/
12611
.ui.tab.active,
12612
.ui.tab.open {
12613
display: block;
12614
}
12615
/*--------------------
12616
Loading
12617
---------------------*/
12618
.ui.tab.loading {
12619
position: relative;
12620
overflow: hidden;
12621
display: block;
12622
min-height: 250px;
12623
text-indent: -10000px;
12624
}
12625
.ui.tab.loading * {
12626
position: relative !important;
12627
left: -10000px !important;
12628
}
12629
.ui.tab.loading:after {
12630
position: absolute;
12631
top: 50px;
12632
left: 50%;
12633
content: 'Loading...';
12634
margin-left: -32px;
12635
text-indent: 5px;
12636
color: rgba(0, 0, 0, 0.4);
12637
width: 100%;
12638
height: 100%;
12639
padding-top: 75px;
12640
background: url(../images/loader-large.gif) no-repeat 0px 0px;
12641
visibility: visible;
12642
}
12643
12644
/*******************************
12645
Semantic - Transition
12646
Author: Jack Lukic
12647
12648
CSS animation definitions for
12649
transition module
12650
12651
*******************************/
12652
/*
12653
Some transitions adapted from Animate CSS
12654
https://github.com/daneden/animate.css
12655
*/
12656
.ui.transition {
12657
-webkit-animation-iteration-count: 1;
12658
-moz-animation-iteration-count: 1;
12659
animation-iteration-count: 1;
12660
-webkit-animation-duration: 1s;
12661
-moz-animation-duration: 1s;
12662
animation-duration: 1s;
12663
-webkit-animation-timing-function: ease;
12664
-moz-animation-timing-function: ease;
12665
animation-timing-function: ease;
12666
-webkit-animation-fill-mode: both;
12667
-moz-animation-fill-mode: both;
12668
animation-fill-mode: both;
12669
}
12670
/*******************************
12671
States
12672
*******************************/
12673
.ui.animating.transition {
12674
display: block;
12675
-webkit-backface-visibility: hidden;
12676
-moz-backface-visibility: hidden;
12677
backface-visibility: hidden;
12678
-webkit-transform: translateZ(0);
12679
-moz-transform: translateZ(0);
12680
transform: translateZ(0);
12681
}
12682
/* Loading */
12683
.ui.loading.transition {
12684
position: absolute;
12685
top: -999999px;
12686
left: -99999px;
12687
}
12688
/* Hidden */
12689
.ui.hidden.transition {
12690
display: none !important;
12691
}
12692
/* Visible */
12693
.ui.visible.transition {
12694
display: block;
12695
visibility: visible;
12696
}
12697
/* Disabled */
12698
.ui.disabled.transition {
12699
-webkit-animation-play-state: paused;
12700
-moz-animation-play-state: paused;
12701
animation-play-state: paused;
12702
}
12703
/*******************************
12704
Variations
12705
*******************************/
12706
.ui.looping.transition {
12707
-webkit-animation-iteration-count: infinite;
12708
-moz-animation-iteration-count: infinite;
12709
animation-iteration-count: infinite;
12710
}
12711
/*******************************
12712
Types
12713
*******************************/
12714
/*--------------
12715
Emphasis
12716
---------------*/
12717
.ui.flash.transition {
12718
-webkit-animation-name: flash;
12719
-moz-animation-name: flash;
12720
animation-name: flash;
12721
}
12722
.ui.shake.transition {
12723
-webkit-animation-name: shake;
12724
-moz-animation-name: shake;
12725
animation-name: shake;
12726
}
12727
.ui.bounce.transition {
12728
-webkit-animation-name: bounce;
12729
-moz-animation-name: bounce;
12730
animation-name: bounce;
12731
}
12732
.ui.tada.transition {
12733
-webkit-animation-name: tada;
12734
-moz-animation-name: tada;
12735
animation-name: tada;
12736
}
12737
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
12738
.ui.pulse.transition {
12739
-webkit-animation-name: pulse;
12740
-moz-animation-name: pulse;
12741
animation-name: pulse;
12742
}
12743
/*--------------
12744
Flips
12745
---------------*/
12746
.ui.flip.transition.in,
12747
.ui.flip.transition.out {
12748
-webkit-perspective: 2000px;
12749
-moz-perspective: 2000px;
12750
perspective: 2000px;
12751
}
12752
.ui.horizontal.flip.transition.in,
12753
.ui.horizontal.flip.transition.out {
12754
-webkit-animation-name: horizontalFlip;
12755
-moz-animation-name: horizontalFlip;
12756
animation-name: horizontalFlip;
12757
}
12758
.ui.horizontal.flip.transition.out {
12759
-webkit-animation-name: horizontalFlipOut;
12760
-moz-animation-name: horizontalFlipOut;
12761
animation-name: horizontalFlipOut;
12762
}
12763
.ui.vertical.flip.transition.in,
12764
.ui.vertical.flip.transition.out {
12765
-webkit-animation-name: verticalFlip;
12766
-moz-animation-name: verticalFlip;
12767
animation-name: verticalFlip;
12768
}
12769
.ui.vertical.flip.transition.out {
12770
-webkit-animation-name: verticalFlipOut;
12771
-moz-animation-name: verticalFlipOut;
12772
animation-name: verticalFlipOut;
12773
}
12774
/*--------------
12775
Fades
12776
---------------*/
12777
.ui.fade.transition.in {
12778
-webkit-animation-name: fade;
12779
-moz-animation-name: fade;
12780
animation-name: fade;
12781
}
12782
.ui.fade.transition.out {
12783
-webkit-animation-name: fadeOut;
12784
-moz-animation-name: fadeOut;
12785
animation-name: fadeOut;
12786
}
12787
.ui.fade.up.transition.in {
12788
-webkit-animation-name: fadeUp;
12789
-moz-animation-name: fadeUp;
12790
animation-name: fadeUp;
12791
}
12792
.ui.fade.up.transition.out {
12793
-webkit-animation-name: fadeUpOut;
12794
-moz-animation-name: fadeUpOut;
12795
animation-name: fadeUpOut;
12796
}
12797
.ui.fade.down.transition.in {
12798
-webkit-animation-name: fadeDown;
12799
-moz-animation-name: fadeDown;
12800
animation-name: fadeDown;
12801
}
12802
.ui.fade.down.transition.out {
12803
-webkit-animation-name: fadeDownOut;
12804
-moz-animation-name: fadeDownOut;
12805
animation-name: fadeDownOut;
12806
}
12807
/*rtl:ignore renaming*/
12808
.ui.fade.left.transition.in {
12809
-webkit-animation-name: fadeLeft;
12810
-moz-animation-name: fadeLeft;
12811
animation-name: fadeLeft;
12812
}
12813
/*rtl:ignore renaming*/
12814
.ui.fade.left.transition.out {
12815
-webkit-animation-name: fadeLeftOut;
12816
-moz-animation-name: fadeLeftOut;
12817
animation-name: fadeLeftOut;
12818
}
12819
/*rtl:ignore renaming*/
12820
.ui.fade.right.transition.in {
12821
-webkit-animation-name: fadeRight;
12822
-moz-animation-name: fadeRight;
12823
animation-name: fadeRight;
12824
}
12825
/*rtl:ignore renaming*/
12826
.ui.fade.right.transition.out {
12827
-webkit-animation-name: fadeRightOut;
12828
-moz-animation-name: fadeRightOut;
12829
animation-name: fadeRightOut;
12830
}
12831
/*--------------
12832
Scale
12833
---------------*/
12834
.ui.scale.transition.in {
12835
-webkit-animation-name: scale;
12836
-moz-animation-name: scale;
12837
animation-name: scale;
12838
}
12839
.ui.scale.transition.out {
12840
-webkit-animation-name: scaleOut;
12841
-moz-animation-name: scaleOut;
12842
animation-name: scaleOut;
12843
}
12844
/*--------------
12845
Slide
12846
---------------*/
12847
.ui.slide.down.transition.in {
12848
-webkit-animation-name: slide;
12849
-moz-animation-name: slide;
12850
animation-name: slide;
12851
-moz-transform-origin: 50% 0%;
12852
transform-origin: 50% 0%;
12853
-ms-transform-origin: 50% 0%;
12854
-webkit-transform-origin: 50% 0%;
12855
}
12856
.ui.slide.down.transition.out {
12857
-webkit-animation-name: slideOut;
12858
-moz-animation-name: slideOut;
12859
animation-name: slideOut;
12860
-webkit-transform-origin: 50% 0%;
12861
-moz-transform-origin: 50% 0%;
12862
-ms-transform-origin: 50% 0%;
12863
transform-origin: 50% 0%;
12864
}
12865
.ui.slide.up.transition.in {
12866
-webkit-animation-name: slide;
12867
-moz-animation-name: slide;
12868
animation-name: slide;
12869
-webkit-transform-origin: 50% 100%;
12870
-moz-transform-origin: 50% 100%;
12871
-ms-transform-origin: 50% 100%;
12872
transform-origin: 50% 100%;
12873
}
12874
.ui.slide.up.transition.out {
12875
-webkit-animation-name: slideOut;
12876
-moz-animation-name: slideOut;
12877
animation-name: slideOut;
12878
-webkit-transform-origin: 50% 100%;
12879
-moz-transform-origin: 50% 100%;
12880
-ms-transform-origin: 50% 100%;
12881
transform-origin: 50% 100%;
12882
}
12883
@-webkit-keyframes slide {
12884
0% {
12885
opacity: 0;
12886
-webkit-transform: scaleY(0);
12887
transform: scaleY(0);
12888
}
12889
100% {
12890
opacity: 1;
12891
-webkit-transform: scaleY(1);
12892
transform: scaleY(1);
12893
}
12894
}
12895
@-moz-keyframes slide {
12896
0% {
12897
opacity: 0;
12898
-moz-transform: scaleY(0);
12899
transform: scaleY(0);
12900
}
12901
100% {
12902
opacity: 1;
12903
-moz-transform: scaleY(1);
12904
transform: scaleY(1);
12905
}
12906
}
12907
@keyframes slide {
12908
0% {
12909
opacity: 0;
12910
-webkit-transform: scaleY(0);
12911
-moz-transform: scaleY(0);
12912
transform: scaleY(0);
12913
}
12914
100% {
12915
opacity: 1;
12916
-webkit-transform: scaleY(1);
12917
-moz-transform: scaleY(1);
12918
transform: scaleY(1);
12919
}
12920
}
12921
@-webkit-keyframes slideOut {
12922
0% {
12923
opacity: 1;
12924
-webkit-transform: scaleY(1);
12925
transform: scaleY(1);
12926
}
12927
100% {
12928
opacity: 0;
12929
-webkit-transform: scaleY(0);
12930
transform: scaleY(0);
12931
}
12932
}
12933
@-moz-keyframes slideOut {
12934
0% {
12935
opacity: 1;
12936
-moz-transform: scaleY(1);
12937
transform: scaleY(1);
12938
}
12939
100% {
12940
opacity: 0;
12941
-moz-transform: scaleY(0);
12942
transform: scaleY(0);
12943
}
12944
}
12945
@keyframes slideOut {
12946
0% {
12947
opacity: 1;
12948
-webkit-transform: scaleY(1);
12949
-moz-transform: scaleY(1);
12950
transform: scaleY(1);
12951
}
12952
100% {
12953
opacity: 0;
12954
-webkit-transform: scaleY(0);
12955
-moz-transform: scaleY(0);
12956
transform: scaleY(0);
12957
}
12958
}
12959
/*******************************
12960
Animations
12961
*******************************/
12962
/*--------------
12963
Emphasis
12964
---------------*/
12965
/* Flash */
12966
@-webkit-keyframes flash {
12967
0%,
12968
50%,
12969
100% {
12970
opacity: 1;
12971
}
12972
25%,
12973
75% {
12974
opacity: 0;
12975
}
12976
}
12977
@-moz-keyframes flash {
12978
0%,
12979
50%,
12980
100% {
12981
opacity: 1;
12982
}
12983
25%,
12984
75% {
12985
opacity: 0;
12986
}
12987
}
12988
@keyframes flash {
12989
0%,
12990
50%,
12991
100% {
12992
opacity: 1;
12993
}
12994
25%,
12995
75% {
12996
opacity: 0;
12997
}
12998
}
12999
/* Shake */
13000
@-webkit-keyframes shake {
13001
0%,
13002
100% {
13003
-webkit-transform: translateX(0);
13004
transform: translateX(0);
13005
}
13006
10%,
13007
30%,
13008
50%,
13009
70%,
13010
90% {
13011
-webkit-transform: translateX(-10px);
13012
transform: translateX(-10px);
13013
}
13014
20%,
13015
40%,
13016
60%,
13017
80% {
13018
-webkit-transform: translateX(10px);
13019
transform: translateX(10px);
13020
}
13021
}
13022
@-moz-keyframes shake {
13023
0%,
13024
100% {
13025
-moz-transform: translateX(0);
13026
transform: translateX(0);
13027
}
13028
10%,
13029
30%,
13030
50%,
13031
70%,
13032
90% {
13033
-moz-transform: translateX(-10px);
13034
transform: translateX(-10px);
13035
}
13036
20%,
13037
40%,
13038
60%,
13039
80% {
13040
-moz-transform: translateX(10px);
13041
transform: translateX(10px);
13042
}
13043
}
13044
@keyframes shake {
13045
0%,
13046
100% {
13047
-webkit-transform: translateX(0);
13048
-moz-transform: translateX(0);
13049
transform: translateX(0);
13050
}
13051
10%,
13052
30%,
13053
50%,
13054
70%,
13055
90% {
13056
-webkit-transform: translateX(-10px);
13057
-moz-transform: translateX(-10px);
13058
transform: translateX(-10px);
13059
}
13060
20%,
13061
40%,
13062
60%,
13063
80% {
13064
-webkit-transform: translateX(10px);
13065
-moz-transform: translateX(10px);
13066
transform: translateX(10px);
13067
}
13068
}
13069
/* Bounce */
13070
@-webkit-keyframes bounce {
13071
0%,
13072
20%,
13073
50%,
13074
80%,
13075
100% {
13076
-webkit-transform: translateY(0);
13077
transform: translateY(0);
13078
}
13079
40% {
13080
-webkit-transform: translateY(-30px);
13081
transform: translateY(-30px);
13082
}
13083
60% {
13084
-webkit-transform: translateY(-15px);
13085
transform: translateY(-15px);
13086
}
13087
}
13088
@-moz-keyframes bounce {
13089
0%,
13090
20%,
13091
50%,
13092
80%,
13093
100% {
13094
-moz-transform: translateY(0);
13095
transform: translateY(0);
13096
}
13097
40% {
13098
-moz-transform: translateY(-30px);
13099
transform: translateY(-30px);
13100
}
13101
60% {
13102
-moz-transform: translateY(-15px);
13103
transform: translateY(-15px);
13104
}
13105
}
13106
@keyframes bounce {
13107
0%,
13108
20%,
13109
50%,
13110
80%,
13111
100% {
13112
-webkit-transform: translateY(0);
13113
-moz-transform: translateY(0);
13114
transform: translateY(0);
13115
}
13116
40% {
13117
-webkit-transform: translateY(-30px);
13118
-moz-transform: translateY(-30px);
13119
transform: translateY(-30px);
13120
}
13121
60% {
13122
-webkit-transform: translateY(-15px);
13123
-moz-transform: translateY(-15px);
13124
transform: translateY(-15px);
13125
}
13126
}
13127
/* Tada */
13128
@-webkit-keyframes tada {
13129
0% {
13130
-webkit-transform: scale(1);
13131
transform: scale(1);
13132
}
13133
10%,
13134
20% {
13135
-webkit-transform: scale(0.9) rotate(-3deg);
13136
transform: scale(0.9) rotate(-3deg);
13137
}
13138
30%,
13139
50%,
13140
70%,
13141
90% {
13142
-webkit-transform: scale(1.1) rotate(3deg);
13143
transform: scale(1.1) rotate(3deg);
13144
}
13145
40%,
13146
60%,
13147
80% {
13148
-webkit-transform: scale(1.1) rotate(-3deg);
13149
transform: scale(1.1) rotate(-3deg);
13150
}
13151
100% {
13152
-webkit-transform: scale(1) rotate(0);
13153
transform: scale(1) rotate(0);
13154
}
13155
}
13156
@-moz-keyframes tada {
13157
0% {
13158
-moz-transform: scale(1);
13159
transform: scale(1);
13160
}
13161
10%,
13162
20% {
13163
-moz-transform: scale(0.9) rotate(-3deg);
13164
transform: scale(0.9) rotate(-3deg);
13165
}
13166
30%,
13167
50%,
13168
70%,
13169
90% {
13170
-moz-transform: scale(1.1) rotate(3deg);
13171
transform: scale(1.1) rotate(3deg);
13172
}
13173
40%,
13174
60%,
13175
80% {
13176
-moz-transform: scale(1.1) rotate(-3deg);
13177
transform: scale(1.1) rotate(-3deg);
13178
}
13179
100% {
13180
-moz-transform: scale(1) rotate(0);
13181
transform: scale(1) rotate(0);
13182
}
13183
}
13184
@keyframes tada {
13185
0% {
13186
-webkit-transform: scale(1);
13187
-moz-transform: scale(1);
13188
transform: scale(1);
13189
}
13190
10%,
13191
20% {
13192
-webkit-transform: scale(0.9) rotate(-3deg);
13193
-moz-transform: scale(0.9) rotate(-3deg);
13194
transform: scale(0.9) rotate(-3deg);
13195
}
13196
30%,
13197
50%,
13198
70%,
13199
90% {
13200
-webkit-transform: scale(1.1) rotate(3deg);
13201
-moz-transform: scale(1.1) rotate(3deg);
13202
transform: scale(1.1) rotate(3deg);
13203
}
13204
40%,
13205
60%,
13206
80% {
13207
-webkit-transform: scale(1.1) rotate(-3deg);
13208
-moz-transform: scale(1.1) rotate(-3deg);
13209
transform: scale(1.1) rotate(-3deg);
13210
}
13211
100% {
13212
-webkit-transform: scale(1) rotate(0);
13213
-moz-transform: scale(1) rotate(0);
13214
transform: scale(1) rotate(0);
13215
}
13216
}
13217
/* Pulse */
13218
@-webkit-keyframes pulse {
13219
0% {
13220
-webkit-transform: scale(1);
13221
transform: scale(1);
13222
opacity: 1;
13223
}
13224
50% {
13225
-webkit-transform: scale(0.9);
13226
transform: scale(0.9);
13227
opacity: 0.7;
13228
}
13229
100% {
13230
-webkit-transform: scale(1);
13231
transform: scale(1);
13232
opacity: 1;
13233
}
13234
}
13235
@-moz-keyframes pulse {
13236
0% {
13237
-moz-transform: scale(1);
13238
transform: scale(1);
13239
opacity: 1;
13240
}
13241
50% {
13242
-moz-transform: scale(0.9);
13243
transform: scale(0.9);
13244
opacity: 0.7;
13245
}
13246
100% {
13247
-moz-transform: scale(1);
13248
transform: scale(1);
13249
opacity: 1;
13250
}
13251
}
13252
@keyframes pulse {
13253
0% {
13254
-webkit-transform: scale(1);
13255
-moz-transform: scale(1);
13256
transform: scale(1);
13257
opacity: 1;
13258
}
13259
50% {
13260
-webkit-transform: scale(0.9);
13261
-moz-transform: scale(0.9);
13262
transform: scale(0.9);
13263
opacity: 0.7;
13264
}
13265
100% {
13266
-webkit-transform: scale(1);
13267
-moz-transform: scale(1);
13268
transform: scale(1);
13269
opacity: 1;
13270
}
13271
}
13272
/*--------------
13273
Flips
13274
---------------*/
13275
/* Horizontal */
13276
@-webkit-keyframes horizontalFlip {
13277
0% {
13278
-webkit-transform: rotateY(-90deg);
13279
transform: rotateY(-90deg);
13280
opacity: 0;
13281
}
13282
100% {
13283
-webkit-transform: rotateY(0deg);
13284
transform: rotateY(0deg);
13285
opacity: 1;
13286
}
13287
}
13288
@-moz-keyframes horizontalFlip {
13289
0% {
13290
-moz-transform: rotateY(-90deg);
13291
transform: rotateY(-90deg);
13292
opacity: 0;
13293
}
13294
100% {
13295
-moz-transform: rotateY(0deg);
13296
transform: rotateY(0deg);
13297
opacity: 1;
13298
}
13299
}
13300
@keyframes horizontalFlip {
13301
0% {
13302
-webkit-transform: rotateY(-90deg);
13303
-moz-transform: rotateY(-90deg);
13304
transform: rotateY(-90deg);
13305
opacity: 0;
13306
}
13307
100% {
13308
-webkit-transform: rotateY(0deg);
13309
-moz-transform: rotateY(0deg);
13310
transform: rotateY(0deg);
13311
opacity: 1;
13312
}
13313
}
13314
/* Horizontal */
13315
@-webkit-keyframes horizontalFlipOut {
13316
0% {
13317
-webkit-transform: rotateY(0deg);
13318
transform: rotateY(0deg);
13319
opacity: 1;
13320
}
13321
100% {
13322
-webkit-transform: rotateY(90deg);
13323
transform: rotateY(90deg);
13324
opacity: 0;
13325
}
13326
}
13327
@-moz-keyframes horizontalFlipOut {
13328
0% {
13329
-moz-transform: rotateY(0deg);
13330
transform: rotateY(0deg);
13331
opacity: 1;
13332
}
13333
100% {
13334
-moz-transform: rotateY(90deg);
13335
transform: rotateY(90deg);
13336
opacity: 0;
13337
}
13338
}
13339
@keyframes horizontalFlipOut {
13340
0% {
13341
-webkit-transform: rotateY(0deg);
13342
-moz-transform: rotateY(0deg);
13343
transform: rotateY(0deg);
13344
opacity: 1;
13345
}
13346
100% {
13347
-webkit-transform: rotateY(90deg);
13348
-moz-transform: rotateY(90deg);
13349
transform: rotateY(90deg);
13350
opacity: 0;
13351
}
13352
}
13353
/* Vertical */
13354
@-webkit-keyframes verticalFlip {
13355
0% {
13356
-webkit-transform: rotateX(-90deg);
13357
transform: rotateX(-90deg);
13358
opacity: 0;
13359
}
13360
100% {
13361
-webkit-transform: rotateX(0deg);
13362
transform: rotateX(0deg);
13363
opacity: 1;
13364
}
13365
}
13366
@-moz-keyframes verticalFlip {
13367
0% {
13368
-moz-transform: rotateX(-90deg);
13369
transform: rotateX(-90deg);
13370
opacity: 0;
13371
}
13372
100% {
13373
-moz-transform: rotateX(0deg);
13374
transform: rotateX(0deg);
13375
opacity: 1;
13376
}
13377
}
13378
@keyframes verticalFlip {
13379
0% {
13380
-webkit-transform: rotateX(-90deg);
13381
-moz-transform: rotateX(-90deg);
13382
transform: rotateX(-90deg);
13383
opacity: 0;
13384
}
13385
100% {
13386
-webkit-transform: rotateX(0deg);
13387
-moz-transform: rotateX(0deg);
13388
transform: rotateX(0deg);
13389
opacity: 1;
13390
}
13391
}
13392
@-webkit-keyframes verticalFlipOut {
13393
0% {
13394
-webkit-transform: rotateX(0deg);
13395
transform: rotateX(0deg);
13396
opacity: 1;
13397
}
13398
100% {
13399
-webkit-transform: rotateX(-90deg);
13400
transform: rotateX(-90deg);
13401
opacity: 0;
13402
}
13403
}
13404
@-moz-keyframes verticalFlipOut {
13405
0% {
13406
-moz-transform: rotateX(0deg);
13407
transform: rotateX(0deg);
13408
opacity: 1;
13409
}
13410
100% {
13411
-moz-transform: rotateX(-90deg);
13412
transform: rotateX(-90deg);
13413
opacity: 0;
13414
}
13415
}
13416
@keyframes verticalFlipOut {
13417
0% {
13418
-webkit-transform: rotateX(0deg);
13419
-moz-transform: rotateX(0deg);
13420
transform: rotateX(0deg);
13421
opacity: 1;
13422
}
13423
100% {
13424
-webkit-transform: rotateX(-90deg);
13425
-moz-transform: rotateX(-90deg);
13426
transform: rotateX(-90deg);
13427
opacity: 0;
13428
}
13429
}
13430
/*--------------
13431
Fades
13432
---------------*/
13433
/* Fade */
13434
@-webkit-keyframes fade {
13435
0% {
13436
opacity: 0;
13437
}
13438
100% {
13439
opacity: 1;
13440
}
13441
}
13442
@-moz-keyframes fade {
13443
0% {
13444
opacity: 0;
13445
}
13446
100% {
13447
opacity: 1;
13448
}
13449
}
13450
@keyframes fade {
13451
0% {
13452
opacity: 0;
13453
}
13454
100% {
13455
opacity: 1;
13456
}
13457
}
13458
@-webkit-keyframes fadeOut {
13459
0% {
13460
opacity: 1;
13461
}
13462
100% {
13463
opacity: 0;
13464
}
13465
}
13466
@-moz-keyframes fadeOut {
13467
0% {
13468
opacity: 1;
13469
}
13470
100% {
13471
opacity: 0;
13472
}
13473
}
13474
@keyframes fadeOut {
13475
0% {
13476
opacity: 1;
13477
}
13478
100% {
13479
opacity: 0;
13480
}
13481
}
13482
/* Fade Up */
13483
@-webkit-keyframes fadeUp {
13484
0% {
13485
opacity: 0;
13486
-webkit-transform: translateY(20px);
13487
transform: translateY(20px);
13488
}
13489
100% {
13490
opacity: 1;
13491
-webkit-transform: translateY(0);
13492
transform: translateY(0);
13493
}
13494
}
13495
@-moz-keyframes fadeUp {
13496
0% {
13497
opacity: 0;
13498
-moz-transform: translateY(20px);
13499
transform: translateY(20px);
13500
}
13501
100% {
13502
opacity: 1;
13503
-moz-transform: translateY(0);
13504
transform: translateY(0);
13505
}
13506
}
13507
@keyframes fadeUp {
13508
0% {
13509
opacity: 0;
13510
-webkit-transform: translateY(20px);
13511
-moz-transform: translateY(20px);
13512
transform: translateY(20px);
13513
}
13514
100% {
13515
opacity: 1;
13516
-webkit-transform: translateY(0);
13517
-moz-transform: translateY(0);
13518
transform: translateY(0);
13519
}
13520
}
13521
@-webkit-keyframes fadeUpOut {
13522
0% {
13523
opacity: 1;
13524
-webkit-transform: translateY(0);
13525
transform: translateY(0);
13526
}
13527
100% {
13528
opacity: 0;
13529
-webkit-transform: translateY(20px);
13530
transform: translateY(20px);
13531
}
13532
}
13533
@-moz-keyframes fadeUpOut {
13534
0% {
13535
opacity: 1;
13536
-moz-transform: translateY(0);
13537
transform: translateY(0);
13538
}
13539
100% {
13540
opacity: 0;
13541
-moz-transform: translateY(20px);
13542
transform: translateY(20px);
13543
}
13544
}
13545
@keyframes fadeUpOut {
13546
0% {
13547
opacity: 1;
13548
-webkit-transform: translateY(0);
13549
-moz-transform: translateY(0);
13550
transform: translateY(0);
13551
}
13552
100% {
13553
opacity: 0;
13554
-webkit-transform: translateY(20px);
13555
-moz-transform: translateY(20px);
13556
transform: translateY(20px);
13557
}
13558
}
13559
/* Fade Down */
13560
@-webkit-keyframes fadeDown {
13561
0% {
13562
opacity: 0;
13563
-webkit-transform: translateY(-20px);
13564
transform: translateY(-20px);
13565
}
13566
100% {
13567
opacity: 1;
13568
-webkit-transform: translateY(0);
13569
transform: translateY(0);
13570
}
13571
}
13572
@-moz-keyframes fadeDown {
13573
0% {
13574
opacity: 0;
13575
-moz-transform: translateY(-20px);
13576
transform: translateY(-20px);
13577
}
13578
100% {
13579
opacity: 1;
13580
-moz-transform: translateY(0);
13581
transform: translateY(0);
13582
}
13583
}
13584
@keyframes fadeDown {
13585
0% {
13586
opacity: 0;
13587
-webkit-transform: translateY(-20px);
13588
-moz-transform: translateY(-20px);
13589
transform: translateY(-20px);
13590
}
13591
100% {
13592
opacity: 1;
13593
-webkit-transform: translateY(0);
13594
-moz-transform: translateY(0);
13595
transform: translateY(0);
13596
}
13597
}
13598
@-webkit-keyframes fadeDownOut {
13599
0% {
13600
opacity: 1;
13601
-webkit-transform: translateY(0);
13602
transform: translateY(0);
13603
}
13604
100% {
13605
opacity: 0;
13606
-webkit-transform: translateY(-20px);
13607
transform: translateY(-20px);
13608
}
13609
}
13610
@-moz-keyframes fadeDownOut {
13611
0% {
13612
opacity: 1;
13613
-moz-transform: translateY(0);
13614
transform: translateY(0);
13615
}
13616
100% {
13617
opacity: 0;
13618
-moz-transform: translateY(-20px);
13619
transform: translateY(-20px);
13620
}
13621
}
13622
@keyframes fadeDownOut {
13623
0% {
13624
opacity: 1;
13625
-webkit-transform: translateY(0);
13626
-moz-transform: translateY(0);
13627
transform: translateY(0);
13628
}
13629
100% {
13630
opacity: 0;
13631
-webkit-transform: translateY(-20px);
13632
-moz-transform: translateY(-20px);
13633
transform: translateY(-20px);
13634
}
13635
}
13636
/* Fade Left */
13637
@-webkit-keyframes fadeLeft {
13638
0% {
13639
opacity: 0;
13640
-webkit-transform: translateX(-20px);
13641
transform: translateX(-20px);
13642
}
13643
100% {
13644
opacity: 1;
13645
-webkit-transform: translateX(0);
13646
transform: translateX(0);
13647
}
13648
}
13649
@-moz-keyframes fadeLeft {
13650
0% {
13651
opacity: 0;
13652
-moz-transform: translateX(-20px);
13653
transform: translateX(-20px);
13654
}
13655
100% {
13656
opacity: 1;
13657
-moz-transform: translateX(0);
13658
transform: translateX(0);
13659
}
13660
}
13661
@keyframes fadeLeft {
13662
0% {
13663
opacity: 0;
13664
-webkit-transform: translateX(-20px);
13665
-moz-transform: translateX(-20px);
13666
transform: translateX(-20px);
13667
}
13668
100% {
13669
opacity: 1;
13670
-webkit-transform: translateX(0);
13671
-moz-transform: translateX(0);
13672
transform: translateX(0);
13673
}
13674
}
13675
@-webkit-keyframes fadeLeftOut {
13676
0% {
13677
opacity: 1;
13678
-webkit-transform: translateX(0);
13679
transform: translateX(0);
13680
}
13681
100% {
13682
opacity: 0;
13683
-webkit-transform: translateX(-20px);
13684
transform: translateX(-20px);
13685
}
13686
}
13687
@-moz-keyframes fadeLeftOut {
13688
0% {
13689
opacity: 1;
13690
-moz-transform: translateX(0);
13691
transform: translateX(0);
13692
}
13693
100% {
13694
opacity: 0;
13695
-moz-transform: translateX(-20px);
13696
transform: translateX(-20px);
13697
}
13698
}
13699
@keyframes fadeLeftOut {
13700
0% {
13701
opacity: 1;
13702
-webkit-transform: translateX(0);
13703
-moz-transform: translateX(0);
13704
transform: translateX(0);
13705
}
13706
100% {
13707
opacity: 0;
13708
-webkit-transform: translateX(-20px);
13709
-moz-transform: translateX(-20px);
13710
transform: translateX(-20px);
13711
}
13712
}
13713
/* Fade Right */
13714
@-webkit-keyframes fadeRight {
13715
0% {
13716
opacity: 0;
13717
-webkit-transform: translateX(20px);
13718
transform: translateX(20px);
13719
}
13720
100% {
13721
opacity: 1;
13722
-webkit-transform: translateX(0);
13723
transform: translateX(0);
13724
}
13725
}
13726
@-moz-keyframes fadeRight {
13727
0% {
13728
opacity: 0;
13729
-moz-transform: translateX(20px);
13730
transform: translateX(20px);
13731
}
13732
100% {
13733
opacity: 1;
13734
-moz-transform: translateX(0);
13735
transform: translateX(0);
13736
}
13737
}
13738
@keyframes fadeRight {
13739
0% {
13740
opacity: 0;
13741
-webkit-transform: translateX(20px);
13742
-moz-transform: translateX(20px);
13743
transform: translateX(20px);
13744
}
13745
100% {
13746
opacity: 1;
13747
-webkit-transform: translateX(0);
13748
-moz-transform: translateX(0);
13749
transform: translateX(0);
13750
}
13751
}
13752
@-webkit-keyframes fadeRightOut {
13753
0% {
13754
opacity: 1;
13755
-webkit-transform: translateX(0);
13756
transform: translateX(0);
13757
}
13758
100% {
13759
opacity: 0;
13760
-webkit-transform: translateX(20px);
13761
transform: translateX(20px);
13762
}
13763
}
13764
@-moz-keyframes fadeRightOut {
13765
0% {
13766
opacity: 1;
13767
-moz-transform: translateX(0);
13768
transform: translateX(0);
13769
}
13770
100% {
13771
opacity: 0;
13772
-moz-transform: translateX(20px);
13773
transform: translateX(20px);
13774
}
13775
}
13776
@keyframes fadeRightOut {
13777
0% {
13778
opacity: 1;
13779
-webkit-transform: translateX(0);
13780
-moz-transform: translateX(0);
13781
transform: translateX(0);
13782
}
13783
100% {
13784
opacity: 0;
13785
-webkit-transform: translateX(20px);
13786
-moz-transform: translateX(20px);
13787
transform: translateX(20px);
13788
}
13789
}
13790
/*--------------
13791
Scale
13792
---------------*/
13793
/* Scale */
13794
@-webkit-keyframes scale {
13795
0% {
13796
opacity: 0;
13797
-webkit-transform: scale(0.7);
13798
transform: scale(0.7);
13799
}
13800
100% {
13801
opacity: 1;
13802
-webkit-transform: scale(1);
13803
transform: scale(1);
13804
}
13805
}
13806
@-moz-keyframes scale {
13807
0% {
13808
opacity: 0;
13809
-moz-transform: scale(0.7);
13810
transform: scale(0.7);
13811
}
13812
100% {
13813
opacity: 1;
13814
-moz-transform: scale(1);
13815
transform: scale(1);
13816
}
13817
}
13818
@keyframes scale {
13819
0% {
13820
opacity: 0;
13821
-webkit-transform: scale(0.7);
13822
-moz-transform: scale(0.7);
13823
transform: scale(0.7);
13824
}
13825
100% {
13826
opacity: 1;
13827
-webkit-transform: scale(1);
13828
-moz-transform: scale(1);
13829
transform: scale(1);
13830
}
13831
}
13832
@-webkit-keyframes scaleOut {
13833
0% {
13834
opacity: 1;
13835
-webkit-transform: scale(1);
13836
transform: scale(1);
13837
}
13838
100% {
13839
opacity: 0;
13840
-webkit-transform: scale(0.7);
13841
transform: scale(0.7);
13842
}
13843
}
13844
@-moz-keyframes scaleOut {
13845
0% {
13846
opacity: 1;
13847
-moz-transform: scale(1);
13848
transform: scale(1);
13849
}
13850
100% {
13851
opacity: 0;
13852
-moz-transform: scale(0.7);
13853
transform: scale(0.7);
13854
}
13855
}
13856
@keyframes scaleOut {
13857
0% {
13858
opacity: 1;
13859
-webkit-transform: scale(1);
13860
-moz-transform: scale(1);
13861
transform: scale(1);
13862
}
13863
100% {
13864
opacity: 0;
13865
-webkit-transform: scale(0.7);
13866
-moz-transform: scale(0.7);
13867
transform: scale(0.7);
13868
}
13869
}
13870
13871
/*
13872
* # Semantic - Video
13873
* http://github.com/jlukic/semantic-ui/
13874
*
13875
*
13876
* Copyright 2014 Contributors
13877
* Released under the MIT license
13878
* http://opensource.org/licenses/MIT
13879
*
13880
*/
13881
/*******************************
13882
Video
13883
*******************************/
13884
.ui.video {
13885
position: relative;
13886
max-width: 100%;
13887
}
13888
/*--------------
13889
Content
13890
---------------*/
13891
/* Placeholder Image */
13892
.ui.video .placeholder {
13893
background-color: #333333;
13894
}
13895
/* Play Icon Overlay */
13896
.ui.video .play {
13897
cursor: pointer;
13898
position: absolute;
13899
top: 0px;
13900
left: 0px;
13901
z-index: 10;
13902
width: 100%;
13903
height: 100%;
13904
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
13905
filter: alpha(opacity=60);
13906
opacity: 0.6;
13907
-webkit-transition: opacity 0.3s;
13908
-moz-transition: opacity 0.3s;
13909
transition: opacity 0.3s;
13910
}
13911
.ui.video .play.icon:before {
13912
position: absolute;
13913
top: 50%;
13914
left: 50%;
13915
z-index: 11;
13916
font-size: 6rem;
13917
margin: -3rem 0em 0em -3rem;
13918
color: #FFFFFF;
13919
text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
13920
}
13921
.ui.video .placeholder {
13922
display: block;
13923
width: 100%;
13924
height: 100%;
13925
}
13926
/* IFrame Embed */
13927
.ui.video .embed {
13928
display: none;
13929
}
13930
/*******************************
13931
States
13932
*******************************/
13933
/*--------------
13934
Hover
13935
---------------*/
13936
.ui.video .play:hover {
13937
opacity: 1;
13938
}
13939
/*--------------
13940
Active
13941
---------------*/
13942
.ui.video.active .play,
13943
.ui.video.active .placeholder {
13944
display: none;
13945
}
13946
.ui.video.active .embed {
13947
display: block;
13948
}
13949
13950
/*
13951
* # Semantic Comment View
13952
* http://github.com/jlukic/semantic-ui/
13953
*
13954
*
13955
* Copyright 2014 Contributors
13956
* Released under the MIT license
13957
* http://opensource.org/licenses/MIT
13958
*
13959
* Released: April 17 2014
13960
*/
13961
/*******************************
13962
Standard
13963
*******************************/
13964
/*--------------
13965
Comments
13966
---------------*/
13967
.ui.comments a {
13968
cursor: pointer;
13969
}
13970
/*--------------
13971
Comment
13972
---------------*/
13973
.ui.comments .comment {
13974
position: relative;
13975
margin-top: 0.5em;
13976
padding-top: 0.5em;
13977
}
13978
.ui.comments .comment:first-child {
13979
margin-top: 0em;
13980
padding-top: 0em;
13981
}
13982
/*--------------------
13983
Avatar (Optional)
13984
---------------------*/
13985
.ui.comments .comment .avatar {
13986
display: block;
13987
float: left;
13988
width: 4em;
13989
}
13990
.ui.comments .comment .avatar img {
13991
display: block;
13992
margin: 0em auto;
13993
width: 3em;
13994
height: 3em;
13995
border-radius: 500px;
13996
}
13997
/*--------------
13998
Content
13999
---------------*/
14000
.ui.comments .comment > .content,
14001
.ui.comments .comment > .avatar {
14002
display: block;
14003
}
14004
.ui.comments .comment .avatar ~ .content {
14005
padding: 0em 1em;
14006
}
14007
/* If there is an avatar move content over */
14008
.ui.comments .comment > .avatar ~ .content {
14009
padding-top: 0.25em;
14010
margin-left: 3.5em;
14011
}
14012
.ui.comments .comment .metadata {
14013
display: inline-block;
14014
margin-left: 0.3em;
14015
color: rgba(0, 0, 0, 0.4);
14016
}
14017
.ui.comments .comment .metadata > * {
14018
display: inline-block;
14019
margin: 0em 0.3em 0em 0em;
14020
}
14021
/*--------------------
14022
Comment Text
14023
---------------------*/
14024
.ui.comments .comment .text {
14025
margin: 0.25em 0em 0.5em;
14026
word-wrap: break-word;
14027
}
14028
/*--------------------
14029
User Actions
14030
---------------------*/
14031
.ui.comments .comment .actions {
14032
font-size: 0.9em;
14033
}
14034
.ui.comments .comment .actions a {
14035
display: inline-block;
14036
margin: 0em 0.3em 0em 0em;
14037
color: rgba(0, 0, 0, 0.3);
14038
}
14039
.ui.comments .comment .actions a.active,
14040
.ui.comments .comment .actions a:hover {
14041
color: rgba(0, 0, 0, 0.6);
14042
}
14043
/*--------------------
14044
Reply Form
14045
---------------------*/
14046
.ui.comments .reply.form {
14047
margin-top: 0.75em;
14048
width: 100%;
14049
max-width: 30em;
14050
}
14051
.ui.comments .comment .reply.form {
14052
margin-left: 2em;
14053
}
14054
.ui.comments > .reply.form {
14055
margin-top: 1.5em;
14056
max-width: 40em;
14057
}
14058
.ui.comments .reply.form textarea {
14059
height: 12em;
14060
}
14061
/*--------------------
14062
Nested Comments
14063
---------------------*/
14064
.ui.comments .comment .comments {
14065
margin-top: 0.5em;
14066
padding-top: 0.5em;
14067
padding-bottom: 1em;
14068
}
14069
.ui.comments .comment .comments:before {
14070
position: absolute;
14071
top: 0px;
14072
left: 0px;
14073
}
14074
/* One Deep */
14075
.ui.comments > .comment .comments {
14076
margin-left: 2em;
14077
}
14078
/* Two Deep */
14079
.ui.comments > .comment > .comments > .comment > .comments {
14080
margin-left: 1.75em;
14081
}
14082
/* Three Deep */
14083
.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments {
14084
margin-left: 1.5em;
14085
}
14086
/* Four Deep or more */
14087
.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments > .comment .comments {
14088
margin-left: 0.5em;
14089
}
14090
/*******************************
14091
Variations
14092
*******************************/
14093
/*--------------------
14094
Threaded
14095
---------------------*/
14096
.ui.threaded.comments .comment .comments {
14097
margin-left: 2em !important;
14098
padding-left: 2em !important;
14099
-webkit-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
14100
box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
14101
}
14102
/*--------------------
14103
Minimal
14104
---------------------*/
14105
.ui.minimal.comments .comment .actions {
14106
opacity: 0;
14107
-webkit-transition: opacity 0.1s ease-out;
14108
-moz-transition: opacity 0.1s ease-out;
14109
transition: opacity 0.1s ease-out;
14110
-webkit-transition-delay: 0.1s;
14111
-moz-transition-delay: 0.1s;
14112
transition-delay: 0.1s;
14113
}
14114
.ui.minimal.comments .comment > .content:hover > .actions {
14115
opacity: 1;
14116
}
14117
/*--------------------
14118
Sizes
14119
---------------------*/
14120
.ui.small.comments {
14121
font-size: 0.875em;
14122
}
14123
14124
/*
14125
* # Activity Feed View
14126
* http://github.com/jlukic/semantic-ui/
14127
*
14128
*
14129
* Copyright 2014 Contributors
14130
* Released under the MIT license
14131
* http://opensource.org/licenses/MIT
14132
*
14133
* Released: May 22, 2014
14134
*/
14135
/*******************************
14136
Activity Feed
14137
*******************************/
14138
.ui.feed a {
14139
cursor: pointer;
14140
}
14141
.ui.feed,
14142
.ui.feed .event,
14143
.ui.feed .label,
14144
.ui.feed .content,
14145
.ui.feed .extra {
14146
-webkit-box-sizing: border-box;
14147
-moz-box-sizing: border-box;
14148
-ms-box-sizing: border-box;
14149
box-sizing: border-box;
14150
}
14151
/*******************************
14152
Content
14153
*******************************/
14154
/* Event */
14155
.ui.feed .event {
14156
width: 100%;
14157
display: table;
14158
padding: 1em;
14159
}
14160
.ui.feed .event:first-child {
14161
border-top: 0px;
14162
}
14163
.ui.feed .event:last-child {
14164
margin-bottom: 1em;
14165
}
14166
/* Event Label */
14167
.ui.feed .label {
14168
width: 3em;
14169
display: table-cell;
14170
vertical-align: top;
14171
text-align: left;
14172
}
14173
.ui.feed .label .icon {
14174
font-size: 1.5em;
14175
padding: 0.5em;
14176
margin: 0em;
14177
}
14178
.ui.feed .label img {
14179
width: 3em;
14180
margin: 0em;
14181
border-radius: 50em;
14182
}
14183
.ui.feed .label + .content {
14184
padding: 0.75em 1em 0em;
14185
}
14186
/* Content */
14187
.ui.feed .content {
14188
display: table-cell;
14189
vertical-align: top;
14190
text-align: left;
14191
word-wrap: break-word;
14192
}
14193
/* Date */
14194
.ui.feed .content .date {
14195
float: right;
14196
padding-left: 1em;
14197
color: rgba(0, 0, 0, 0.4);
14198
}
14199
/* Summary */
14200
.ui.feed .content .summary {
14201
color: rgba(0, 0, 0, 0.75);
14202
}
14203
.ui.feed .content .summary img {
14204
display: inline-block;
14205
margin-right: 0.25em;
14206
width: 4em;
14207
border-radius: 500px;
14208
}
14209
/* Additional Information */
14210
.ui.feed .content .extra {
14211
margin: 1em 0em 0em;
14212
padding: 0.5em 0em 0em;
14213
color: rgba(0, 0, 0, 0.5);
14214
}
14215
.ui.feed .content .extra.images img {
14216
display: inline-block;
14217
margin-right: 0.25em;
14218
width: 6em;
14219
}
14220
.ui.feed .content .extra.text {
14221
padding: 0.5em 1em;
14222
border-left: 0.2em solid rgba(0, 0, 0, 0.1);
14223
}
14224
/*******************************
14225
Variations
14226
*******************************/
14227
.ui.small.feed {
14228
font-size: 0.875em;
14229
}
14230
.ui.small.feed .label img {
14231
width: 2.5em;
14232
}
14233
.ui.small.feed .label .icon {
14234
font-size: 1.25em;
14235
}
14236
.ui.feed .event {
14237
padding: 0.75em 0em;
14238
}
14239
.ui.small.feed .label + .content {
14240
padding: 0.5em 0.5em 0;
14241
}
14242
.ui.small.feed .content .extra.images img {
14243
width: 5em;
14244
}
14245
.ui.small.feed .content .extra {
14246
margin: 0.5em 0em 0em;
14247
}
14248
.ui.small.feed .content .extra.text {
14249
padding: 0.25em 0.5em;
14250
}
14251
14252
/*
14253
* # Semantic Item View
14254
* http://github.com/jlukic/semantic-ui/
14255
*
14256
*
14257
* Copyright 2014 Contributors
14258
* Released under the MIT license
14259
* http://opensource.org/licenses/MIT
14260
*
14261
* Released: April 17 2014
14262
*/
14263
/*******************************
14264
Standard
14265
*******************************/
14266
/*--------------
14267
Items
14268
---------------*/
14269
.ui.items {
14270
margin: 1em 0em 0em;
14271
}
14272
.ui.items:first-child {
14273
margin-top: 0em;
14274
}
14275
.ui.items:last-child {
14276
margin-bottom: -1em;
14277
}
14278
/* Force Clearing */
14279
.ui.items:after {
14280
display: block;
14281
content: ' ';
14282
height: 0px;
14283
clear: both;
14284
overflow: hidden;
14285
visibility: hidden;
14286
}
14287
/*--------------
14288
Item
14289
---------------*/
14290
.ui.items > .row > .item,
14291
.ui.items > .item {
14292
display: block;
14293
float: left;
14294
position: relative;
14295
top: 0px;
14296
width: 316px;
14297
min-height: 375px;
14298
margin: 0em 0.5em 2.5em;
14299
padding: 0em;
14300
background-color: #FFFFFF;
14301
line-height: 1.2;
14302
font-size: 1em;
14303
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
14304
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
14305
border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
14306
border-radius: 0.33em;
14307
-webkit-transition: -webkit-box-shadow 0.2s ease;
14308
-moz-transition: box-shadow 0.2s ease;
14309
transition: box-shadow 0.2s ease;
14310
padding: 0.5em;
14311
}
14312
.ui.items a.item,
14313
.ui.items .item a {
14314
cursor: pointer;
14315
}
14316
.ui.items .item,
14317
.ui.items .item > .image,
14318
.ui.items .item > .image .overlay,
14319
.ui.items .item > .content,
14320
.ui.items .item > .content > .meta,
14321
.ui.items .item > .content > .extra {
14322
-webkit-box-sizing: border-box;
14323
-moz-box-sizing: border-box;
14324
-ms-box-sizing: border-box;
14325
box-sizing: border-box;
14326
}
14327
/*--------------
14328
Images
14329
---------------*/
14330
.ui.items .item > .image {
14331
display: block;
14332
position: relative;
14333
background-color: rgba(0, 0, 0, 0.05);
14334
-webkit-box-sizing: border-box;
14335
-moz-box-sizing: border-box;
14336
-ms-box-sizing: border-box;
14337
box-sizing: border-box;
14338
border-radius: 0.2em;
14339
}
14340
.ui.items .item > .image > img {
14341
display: block;
14342
width: 100%;
14343
}
14344
/*--------------
14345
Content
14346
---------------*/
14347
.ui.items .item > .content {
14348
padding: 0.75em 0.5em;
14349
}
14350
.ui.items .item > .content > .name {
14351
display: block;
14352
font-size: 1.25em;
14353
font-weight: bold;
14354
margin-bottom: 0.2em;
14355
color: rgba(0, 0, 0, 0.7);
14356
}
14357
.ui.items .item > .content > .description {
14358
clear: both;
14359
margin: 0em 0em;
14360
color: rgba(0, 0, 0, 0.45);
14361
}
14362
.ui.items .item > .content > .description p {
14363
margin: 0em 0em 0.2em;
14364
}
14365
.ui.items .item > .content > .description p:last-child {
14366
margin-bottom: 0em;
14367
}
14368
/*--------------
14369
Meta
14370
---------------*/
14371
.ui.items .item .meta {
14372
float: right;
14373
color: rgba(0, 0, 0, 0.35);
14374
}
14375
.ui.items .item > .content > .meta + .name {
14376
float: left;
14377
}
14378
/*--------------
14379
Labels
14380
---------------*/
14381
/*-----star----- */
14382
/* hover */
14383
.ui.items .item .star.label:hover::after {
14384
border-right-color: #F6EFC3;
14385
}
14386
.ui.items .item .star.label:hover::after {
14387
border-top-color: #F6EFC3;
14388
}
14389
.ui.items .item .star.label:hover .icon {
14390
color: #ac9400;
14391
}
14392
/* active */
14393
.ui.items .item .star.label.active::after {
14394
border-right-color: #F6EFC3;
14395
}
14396
.ui.items .item .star.label.active::after {
14397
border-top-color: #F6EFC3;
14398
}
14399
.ui.items .item .star.label.active .icon {
14400
color: #ac9400;
14401
}
14402
/*-----like----- */
14403
/* hover */
14404
.ui.items .item .like.label:hover::after {
14405
border-right-color: #F5E1E2;
14406
}
14407
.ui.items .item .like.label.active::after {
14408
border-top-color: #F5E1E2;
14409
}
14410
.ui.items .item .like.label:hover .icon {
14411
color: #ef404a;
14412
}
14413
/* active */
14414
.ui.items .item .like.label.active::after {
14415
border-right-color: #F5E1E2;
14416
}
14417
.ui.items .item .like.label.active::after {
14418
border-top-color: #F5E1E2;
14419
}
14420
.ui.items .item .like.label.active .icon {
14421
color: #ef404a;
14422
}
14423
/*--------------
14424
Extra
14425
---------------*/
14426
.ui.items .item .extra {
14427
position: absolute;
14428
width: 100%;
14429
padding: 0em 0.5em;
14430
bottom: -2em;
14431
left: 0em;
14432
height: 1.5em;
14433
color: rgba(0, 0, 0, 0.25);
14434
-webkit-transition: color 0.2s ease;
14435
-moz-transition: color 0.2s ease;
14436
transition: color 0.2s ease;
14437
}
14438
.ui.items .item .extra > img {
14439
display: inline-block;
14440
border-radius: 500px 500px 500px 500px;
14441
margin-right: 0.25em;
14442
vertical-align: middle;
14443
width: 2em;
14444
}
14445
.ui.items .item .extra .left {
14446
float: left;
14447
}
14448
.ui.items .item .extra .right {
14449
float: right;
14450
}
14451
/*******************************
14452
States
14453
*******************************/
14454
.ui.items .item:hover {
14455
cursor: pointer;
14456
z-index: 5;
14457
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
14458
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
14459
}
14460
.ui.items .item:hover .extra {
14461
color: rgba(0, 0, 0, 0.5);
14462
}
14463
.ui.items .item:nth-of-type(6n+1):hover {
14464
border-bottom-color: #6ECFF5 !important;
14465
}
14466
.ui.items .item:nth-of-type(6n+2):hover {
14467
border-bottom-color: #5C6166 !important;
14468
}
14469
.ui.items .item:nth-of-type(6n+3):hover {
14470
border-bottom-color: #A1CF64 !important;
14471
}
14472
.ui.items .item:nth-of-type(6n+4):hover {
14473
border-bottom-color: #D95C5C !important;
14474
}
14475
.ui.items .item:nth-of-type(6n+5):hover {
14476
border-bottom-color: #00B5AD !important;
14477
}
14478
.ui.items .item:nth-of-type(6n+6):hover {
14479
border-bottom-color: #564F8A !important;
14480
}
14481
/*******************************
14482
Variations
14483
*******************************/
14484
/*--------------
14485
Connected
14486
---------------*/
14487
.ui.connected.items {
14488
display: table;
14489
width: 100%;
14490
margin-left: 0em !important;
14491
margin-right: 0em !important;
14492
}
14493
.ui.connected.items > .row > .item,
14494
.ui.connected.items > .item {
14495
float: none;
14496
display: table-cell;
14497
vertical-align: top;
14498
height: auto;
14499
border-radius: 0px;
14500
margin: 0em;
14501
width: 33.33%;
14502
}
14503
.ui.connected.items > .row {
14504
display: table;
14505
margin: 0.5em 0em;
14506
}
14507
.ui.connected.items > .row:first-child {
14508
margin-top: 0em;
14509
}
14510
/* Borders */
14511
.ui.connected.items > .item,
14512
.ui.connected.items > .row:last-child > .item {
14513
border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
14514
}
14515
.ui.connected.items > .row:last-child > .item:first-child,
14516
.ui.connected.items > .item:first-child {
14517
border-radius: 0em 0em 0em 0.33em;
14518
}
14519
.ui.connected.items > .row:last-child > .item:last-child,
14520
.ui.connected.items > .item:last-child {
14521
border-radius: 0em 0em 0.33em 0em;
14522
}
14523
/* Hover */
14524
.ui.connected.items .item:hover {
14525
border-bottom-width: 0.2em;
14526
}
14527
/* Item Count */
14528
.ui.one.connected.items > .row > .item,
14529
.ui.one.connected.items > .item {
14530
width: 50%;
14531
padding-left: 2%;
14532
padding-right: 2%;
14533
}
14534
.ui.two.connected.items > .row > .item,
14535
.ui.two.connected.items > .item {
14536
width: 50%;
14537
padding-left: 1%;
14538
padding-right: 1%;
14539
}
14540
.ui.three.connected.items > .row > .item,
14541
.ui.three.connected.items > .item {
14542
width: 33.333%;
14543
padding-left: 1%;
14544
padding-right: 1%;
14545
}
14546
.ui.four.connected.items > .row > .item,
14547
.ui.four.connected.items > .item {
14548
width: 25%;
14549
padding-left: 0.5%;
14550
padding-right: 0.5%;
14551
}
14552
.ui.five.connected.items > .row > .item,
14553
.ui.five.connected.items > .item {
14554
width: 20%;
14555
padding-left: 0.5%;
14556
padding-right: 0.5%;
14557
}
14558
.ui.six.connected.items > .row > .item,
14559
.ui.six.connected.items > .item {
14560
width: 16.66%;
14561
padding-left: 0.5%;
14562
padding-right: 0.5%;
14563
}
14564
.ui.seven.connected.items > .row > .item,
14565
.ui.seven.connected.items > .item {
14566
width: 14.28%;
14567
padding-left: 0.5%;
14568
padding-right: 0.5%;
14569
}
14570
.ui.eight.connected.items > .row > .item,
14571
.ui.eight.connected.items > .item {
14572
width: 12.5%;
14573
padding-left: 0.25%;
14574
padding-right: 0.25%;
14575
}
14576
.ui.nine.connected.items > .row > .item,
14577
.ui.nine.connected.items > .item {
14578
width: 11.11%;
14579
padding-left: 0.25%;
14580
padding-right: 0.25%;
14581
}
14582
.ui.ten.connected.items > .row > .item,
14583
.ui.ten.connected.items > .item {
14584
width: 10%;
14585
padding-left: 0.2%;
14586
padding-right: 0.2%;
14587
}
14588
.ui.eleven.connected.items > .row > .item,
14589
.ui.eleven.connected.items > .item {
14590
width: 9.09%;
14591
padding-left: 0.2%;
14592
padding-right: 0.2%;
14593
}
14594
.ui.twelve.connected.items > .row > .item,
14595
.ui.twelve.connected.items > .item {
14596
width: 8.3333%;
14597
padding-left: 0.1%;
14598
padding-right: 0.1%;
14599
}
14600
/*-------------------
14601
Responsive
14602
--------------------*/
14603
@media only screen and (max-width: 768px) {
14604
.ui.stackable.items {
14605
display: block !important;
14606
}
14607
.ui.stackable.items > .item,
14608
.ui.stackable.items > .row > .item {
14609
display: block !important;
14610
height: auto !important;
14611
width: 100% !important;
14612
padding: 0% !important;
14613
}
14614
}
14615
/*--------------------
14616
Horizontal
14617
---------------------*/
14618
.ui.horizontal.items > .item,
14619
.ui.items > .horizontal.item {
14620
display: table;
14621
}
14622
.ui.horizontal.items > .item > .image,
14623
.ui.items > .horizontal.item > .image {
14624
display: table-cell;
14625
width: 50%;
14626
}
14627
.ui.horizontal.items > .item > .image + .content,
14628
.ui.items > .horizontal.item > .image + .content {
14629
width: 50%;
14630
display: table-cell;
14631
}
14632
.ui.horizontal.items > .item > .content,
14633
.ui.items > .horizontal.item > .content {
14634
padding: 1% 1.7% 11% 3%;
14635
vertical-align: top;
14636
}
14637
.ui.horizontal.items > .item > .meta,
14638
.ui.items > .horizontal.item > .meta {
14639
position: absolute;
14640
padding: 0%;
14641
bottom: 7%;
14642
left: 3%;
14643
width: 94%;
14644
}
14645
.ui.horizontal.items > .item > .image + .content + .meta,
14646
.ui.items > .horizontal.item > .image + .content + .meta {
14647
bottom: 7%;
14648
left: 53%;
14649
width: 44%;
14650
}
14651
.ui.horizontal.items > .item .avatar,
14652
.ui.items > .horizontal.item .avatar {
14653
width: 11.5%;
14654
}
14655
.ui.items > .item .avatar {
14656
max-width: 25px;
14657
}
14658
/*--------------
14659
Item Count
14660
---------------*/
14661
.ui.one.items {
14662
margin-left: -2%;
14663
margin-right: -2%;
14664
}
14665
.ui.one.items > .item {
14666
width: 100%;
14667
margin-left: 2%;
14668
margin-right: 2%;
14669
}
14670
.ui.two.items {
14671
margin-left: -1%;
14672
margin-right: -1%;
14673
}
14674
.ui.two.items > .item {
14675
width: 48%;
14676
margin-left: 1%;
14677
margin-right: 1%;
14678
}
14679
.ui.two.items > .item:nth-child(2n+1) {
14680
clear: left;
14681
}
14682
.ui.three.items {
14683
margin-left: -1%;
14684
margin-right: -1%;
14685
}
14686
.ui.three.items > .item {
14687
width: 31.333%;
14688
margin-left: 1%;
14689
margin-right: 1%;
14690
}
14691
.ui.three.items > .item:nth-child(3n+1) {
14692
clear: left;
14693
}
14694
.ui.four.items {
14695
margin-left: -0.5%;
14696
margin-right: -0.5%;
14697
}
14698
.ui.four.items > .item {
14699
width: 24%;
14700
margin-left: 0.5%;
14701
margin-right: 0.5%;
14702
}
14703
.ui.four.items > .item:nth-child(4n+1) {
14704
clear: left;
14705
}
14706
.ui.five.items {
14707
margin-left: -0.5%;
14708
margin-right: -0.5%;
14709
}
14710
.ui.five.items > .item {
14711
width: 19%;
14712
margin-left: 0.5%;
14713
margin-right: 0.5%;
14714
}
14715
.ui.five.items > .item:nth-child(5n+1) {
14716
clear: left;
14717
}
14718
.ui.six.items {
14719
margin-left: -0.5%;
14720
margin-right: -0.5%;
14721
}
14722
.ui.six.items > .item {
14723
width: 15.66%;
14724
margin-left: 0.5%;
14725
margin-right: 0.5%;
14726
}
14727
.ui.six.items > .item:nth-child(6n+1) {
14728
clear: left;
14729
}
14730
.ui.seven.items {
14731
margin-left: -0.5%;
14732
margin-right: -0.5%;
14733
}
14734
.ui.seven.items > .item {
14735
width: 13.28%;
14736
margin-left: 0.5%;
14737
margin-right: 0.5%;
14738
font-size: 11px;
14739
}
14740
.ui.seven.items > .item:nth-child(7n+1) {
14741
clear: left;
14742
}
14743
.ui.eight.items {
14744
margin-left: -0.25%;
14745
margin-right: -0.25%;
14746
}
14747
.ui.eight.items > .item {
14748
width: 12.0%;
14749
margin-left: 0.25%;
14750
margin-right: 0.25%;
14751
font-size: 11px;
14752
}
14753
.ui.eight.items > .item:nth-child(8n+1) {
14754
clear: left;
14755
}
14756
.ui.nine.items {
14757
margin-left: -0.25%;
14758
margin-right: -0.25%;
14759
}
14760
.ui.nine.items > .item {
14761
width: 10.61%;
14762
margin-left: 0.25%;
14763
margin-right: 0.25%;
14764
font-size: 10px;
14765
}
14766
.ui.nine.items > .item:nth-child(9n+1) {
14767
clear: left;
14768
}
14769
.ui.ten.items {
14770
margin-left: -0.2%;
14771
margin-right: -0.2%;
14772
}
14773
.ui.ten.items > .item {
14774
width: 9.6%;
14775
margin-left: 0.2%;
14776
margin-right: 0.2%;
14777
font-size: 10px;
14778
}
14779
.ui.ten.items > .item:nth-child(10n+1) {
14780
clear: left;
14781
}
14782
.ui.eleven.items {
14783
margin-left: -0.2%;
14784
margin-right: -0.2%;
14785
}
14786
.ui.eleven.items > .item {
14787
width: 8.69%;
14788
margin-left: 0.2%;
14789
margin-right: 0.2%;
14790
font-size: 9px;
14791
}
14792
.ui.eleven.items > .item:nth-child(11n+1) {
14793
clear: left;
14794
}
14795
.ui.twelve.items {
14796
margin-left: -0.1%;
14797
margin-right: -0.1%;
14798
}
14799
.ui.twelve.items > .item {
14800
width: 8.1333%;
14801
margin-left: 0.1%;
14802
margin-right: 0.1%;
14803
font-size: 9px;
14804
}
14805
.ui.twelve.items > .item:nth-child(12n+1) {
14806
clear: left;
14807
}
14808
14809
/*
14810
* # Semantic List - Flat
14811
* http://github.com/jlukic/semantic-ui/
14812
*
14813
*
14814
* Copyright 2014 Contributors
14815
* Released under the MIT license
14816
* http://opensource.org/licenses/MIT
14817
*
14818
* Released: April 26 2014
14819
*/
14820
/*******************************
14821
List
14822
*******************************/
14823
ul.ui.list,
14824
ol.ui.list,
14825
.ui.list {
14826
list-style-type: none;
14827
margin: 1em 0em;
14828
padding: 0em;
14829
}
14830
ul.ui.list ul,
14831
ol.ui.list ol,
14832
.ui.list .list {
14833
margin: 0em;
14834
padding: 0.5em 0em 0.5em 1em;
14835
}
14836
ul.ui.list:first-child,
14837
ol.ui.list:first-child,
14838
.ui.list:first-child {
14839
margin-top: 0em;
14840
}
14841
ul.ui.list:last-child,
14842
ol.ui.list:last-child,
14843
.ui.list:last-child {
14844
margin-bottom: 0em;
14845
}
14846
/*******************************
14847
Content
14848
*******************************/
14849
/* List Item */
14850
ul.ui.list li,
14851
ol.ui.list li,
14852
.ui.list .item {
14853
display: list-item;
14854
list-style-type: none;
14855
list-style-position: inside;
14856
padding: 0.3em 0em;
14857
line-height: 1.2em;
14858
}
14859
.ui.list .item:after {
14860
content: '';
14861
display: block;
14862
height: 0;
14863
clear: both;
14864
visibility: hidden;
14865
}
14866
/* Sub-List */
14867
.ui.list .list {
14868
clear: both;
14869
}
14870
/* Icon */
14871
.ui.list .item > .icon {
14872
display: block;
14873
float: left;
14874
margin: 0em 1em 0em 0em;
14875
padding: 0.1em 0em 0em 0em;
14876
}
14877
.ui.list .item > .icon:only-child {
14878
display: inline-block;
14879
}
14880
.ui.horizontal.list .item > .icon {
14881
margin: 0em;
14882
padding: 0em 0.25em 0em 0em;
14883
}
14884
.ui.horizontal.list .item > .icon,
14885
.ui.horizontal.list .item > .icon + .content {
14886
float: none;
14887
display: inline-block;
14888
}
14889
/* Image */
14890
.ui.list .item > img {
14891
display: block;
14892
float: left;
14893
margin-right: 1em;
14894
vertical-align: middle;
14895
}
14896
/* Content */
14897
.ui.list .item > .content {
14898
display: inline-block;
14899
vertical-align: middle;
14900
line-height: 1.2em;
14901
}
14902
.ui.list .item > .icon + .content {
14903
display: table-cell;
14904
vertical-align: top;
14905
}
14906
/* Link */
14907
.ui.list a {
14908
cursor: pointer;
14909
}
14910
.ui.list a .icon {
14911
color: rgba(0, 0, 0, 0.6);
14912
-webkit-transition: color 0.2s ease;
14913
-moz-transition: color 0.2s ease;
14914
transition: color 0.2s ease;
14915
}
14916
/* Header */
14917
.ui.list .header {
14918
font-weight: bold;
14919
}
14920
.ui.list .description {
14921
color: rgba(0, 0, 0, 0.5);
14922
}
14923
/* Floated Content */
14924
.ui.list .item > .left.floated {
14925
margin-right: 1em;
14926
float: left;
14927
}
14928
.ui.list .item > .right.floated {
14929
margin-left: 1em;
14930
float: right;
14931
}
14932
/*******************************
14933
Types
14934
*******************************/
14935
/*-------------------
14936
Horizontal
14937
--------------------*/
14938
.ui.horizontal.list {
14939
display: inline-block;
14940
font-size: 0em;
14941
}
14942
.ui.horizontal.list > .item {
14943
display: inline-block;
14944
margin-left: 1em;
14945
font-size: 1rem;
14946
}
14947
.ui.horizontal.list > .item:first-child {
14948
margin-left: 0em;
14949
}
14950
.ui.horizontal.list .list {
14951
padding-left: 0em;
14952
padding-bottom: 0em;
14953
}
14954
/*******************************
14955
States
14956
*******************************/
14957
/*-------------------
14958
Hover
14959
--------------------*/
14960
.ui.list a:hover .icon {
14961
color: rgba(0, 0, 0, 0.8);
14962
}
14963
/*******************************
14964
Variations
14965
*******************************/
14966
/*-------------------
14967
Inverted
14968
--------------------*/
14969
.ui.inverted.list a .icon {
14970
color: rgba(255, 255, 255, 0.6);
14971
}
14972
.ui.inverted.list .description {
14973
color: rgba(255, 255, 255, 0.8);
14974
}
14975
.ui.inverted.link.list .item {
14976
color: rgba(255, 255, 255, 0.4);
14977
}
14978
/*-------------------
14979
Link
14980
--------------------*/
14981
.ui.link.list .item {
14982
color: rgba(0, 0, 0, 0.3);
14983
}
14984
.ui.link.list a.item,
14985
.ui.link.list .item a {
14986
color: rgba(0, 0, 0, 0.5);
14987
}
14988
.ui.link.list a.item:hover,
14989
.ui.link.list .item a:hover {
14990
color: rgba(0, 0, 0, 0.8);
14991
}
14992
.ui.link.list a.item:active,
14993
.ui.link.list .item a:active {
14994
color: rgba(0, 0, 0, 0.8);
14995
}
14996
.ui.link.list a.active.item,
14997
.ui.link.list .active.item a {
14998
color: rgba(0, 0, 0, 0.8);
14999
}
15000
/* Inverted */
15001
.ui.inverted.link.list a.item,
15002
.ui.inverted.link.list .item a {
15003
color: rgba(255, 255, 255, 0.6);
15004
}
15005
.ui.inverted.link.list a.item:hover,
15006
.ui.inverted.link.list .item a:hover {
15007
color: rgba(255, 255, 255, 0.8);
15008
}
15009
.ui.inverted.link.list a.item:active,
15010
.ui.inverted.link.list .item a:active {
15011
color: rgba(255, 255, 255, 0.9);
15012
}
15013
.ui.inverted.link.list a.active.item,
15014
.ui.inverted.link.list .active.item a {
15015
color: rgba(255, 255, 255, 0.8);
15016
}
15017
/*-------------------
15018
Selection
15019
--------------------*/
15020
.ui.selection.list .item {
15021
cursor: pointer;
15022
color: rgba(0, 0, 0, 0.4);
15023
padding: 0.5em;
15024
-webkit-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease;
15025
-moz-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease;
15026
transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease;
15027
}
15028
.ui.selection.list .item:hover {
15029
background-color: rgba(0, 0, 0, 0.02);
15030
color: rgba(0, 0, 0, 0.7);
15031
}
15032
.ui.selection.list .item:active {
15033
background-color: rgba(0, 0, 0, 0.05);
15034
color: rgba(0, 0, 0, 0.7);
15035
}
15036
.ui.selection.list .item.active {
15037
background-color: rgba(0, 0, 0, 0.04);
15038
color: rgba(0, 0, 0, 0.7);
15039
}
15040
.ui.animated.list .item {
15041
-webkit-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease;
15042
-moz-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease;
15043
transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease;
15044
}
15045
.ui.animated.list:not(.horizontal) .item:hover {
15046
padding-left: 1em;
15047
}
15048
.ui.animated.list:not(.horizontal) .item:hover .item:hover {
15049
padding-left: 0.5em;
15050
}
15051
/* Inverted */
15052
.ui.inverted.selection.list .item {
15053
color: rgba(255, 255, 255, 0.6);
15054
}
15055
.ui.inverted.selection.list .item:hover {
15056
background-color: rgba(255, 255, 255, 0.04);
15057
color: rgba(255, 255, 255, 0.8);
15058
}
15059
.ui.inverted.selection.list .item:active {
15060
background-color: rgba(255, 255, 255, 0.1);
15061
color: rgba(255, 255, 255, 0.7);
15062
}
15063
.ui.inverted.selection.list .item.active {
15064
background-color: rgba(255, 255, 255, 0.08);
15065
color: #FFFFFF;
15066
}
15067
/*-------------------
15068
Bulleted
15069
--------------------*/
15070
ul.ui.list,
15071
.ui.bulleted.list {
15072
margin-left: 1.5em;
15073
}
15074
ul.ui.list li,
15075
.ui.bulleted.list .item {
15076
position: relative;
15077
}
15078
ul.ui.list li:before,
15079
.ui.bulleted.list .item:before {
15080
position: absolute;
15081
left: -1.5em;
15082
content: '•';
15083
}
15084
ul.ui.list ul,
15085
.ui.bulleted.list .list {
15086
padding-left: 1.5em;
15087
}
15088
/* Horizontal Bulleted */
15089
ul.ui.horizontal.bulleted.list,
15090
.ui.horizontal.bulleted.list {
15091
margin-left: 0em;
15092
}
15093
ul.ui.horizontal.bulleted.list li,
15094
.ui.horizontal.bulleted.list .item {
15095
margin-left: 1.5em;
15096
}
15097
ul.ui.horizontal.bulleted.list li:before,
15098
.ui.horizontal.bulleted.list .item:before {
15099
left: -0.9em;
15100
}
15101
ul.ui.horizontal.bulleted.list li:first-child,
15102
.ui.horizontal.bulleted.list .item:first-child {
15103
margin-left: 0em;
15104
}
15105
ul.ui.horizontal.bulleted.list li:first-child::before,
15106
.ui.horizontal.bulleted.list .item:first-child::before {
15107
display: none;
15108
}
15109
/*-------------------
15110
Ordered
15111
--------------------*/
15112
ol.ui.list,
15113
.ui.ordered.list {
15114
counter-reset: ordered;
15115
margin-left: 2em;
15116
list-style-type: none;
15117
}
15118
ol.ui.list li,
15119
.ui.ordered.list .item {
15120
list-style-type: none;
15121
position: relative;
15122
}
15123
ol.ui.list li:before,
15124
.ui.ordered.list .item:before {
15125
position: absolute;
15126
left: -2em;
15127
counter-increment: ordered;
15128
content: counters(ordered, ".");
15129
text-align: right;
15130
vertical-align: top;
15131
opacity: 0.75;
15132
}
15133
ol.ui.list ol,
15134
.ui.ordered.list .list {
15135
counter-reset: ordered;
15136
padding-left: 2.5em;
15137
}
15138
ol.ui.list ol li:before,
15139
.ui.ordered.list .list .item:before {
15140
left: -2.5em;
15141
}
15142
/* Horizontal Ordered */
15143
ol.ui.horizontal.list,
15144
.ui.ordered.horizontal.list {
15145
margin-left: 0em;
15146
}
15147
ol.ui.horizontal.list li:before,
15148
.ui.ordered.horizontal.list .item:before {
15149
position: static;
15150
left: 0em;
15151
margin: 0em 0.5em 0em 0em;
15152
}
15153
/*-------------------
15154
Divided
15155
--------------------*/
15156
.ui.divided.list > .item,
15157
.ui.divided.list:not(.horizontal) > .list {
15158
border-top: 1px solid rgba(0, 0, 0, 0.1);
15159
padding-left: 0.5em;
15160
padding-right: 0.5em;
15161
}
15162
.ui.divided.list .item .menu .item {
15163
border-width: 0px;
15164
}
15165
.ui.divided.list .item:first-child {
15166
border-top-width: 0px;
15167
}
15168
/* Sub Menu */
15169
.ui.divided.list:not(.horizontal) .list:not(.icon) {
15170
margin-left: -0.5em;
15171
margin-right: -0.5em;
15172
}
15173
.ui.divided.list:not(.horizontal) .list .item {
15174
padding-left: 1em;
15175
padding-right: 1em;
15176
}
15177
.ui.divided.list:not(.horizontal) .list .item:first-child {
15178
border-top-width: 1px;
15179
}
15180
/* Divided bulleted */
15181
.ui.divided.bulleted.list {
15182
margin-left: 0em;
15183
}
15184
.ui.divided.bulleted.list .item {
15185
padding-left: 1.5em;
15186
}
15187
.ui.divided.bulleted.list .item:before {
15188
left: 0.5em;
15189
}
15190
/* Divided ordered */
15191
.ui.divided.ordered.list {
15192
margin-left: 0em;
15193
}
15194
.ui.divided.ordered.list > .item {
15195
padding-left: 2em;
15196
padding-right: 2em;
15197
}
15198
.ui.divided.ordered.list > .item:before {
15199
left: 0.5em;
15200
}
15201
.ui.divided.ordered.list .item .list {
15202
margin-left: -2em;
15203
margin-right: -2em;
15204
}
15205
/* Divided horizontal */
15206
.ui.divided.horizontal.list {
15207
margin-left: 0em;
15208
}
15209
.ui.divided.horizontal.list > .item {
15210
border-top: none;
15211
border-left: 1px solid rgba(0, 0, 0, 0.1);
15212
margin: 0em;
15213
padding-left: 0.75em;
15214
padding-right: 0.75em;
15215
line-height: 0.6em;
15216
}
15217
.ui.horizontal.divided.list > .item:first-child {
15218
border-left: none;
15219
padding-left: 0em;
15220
}
15221
/* Inverted */
15222
.ui.divided.inverted.list > .item,
15223
.ui.divided.inverted.list > .list {
15224
border-color: rgba(255, 255, 255, 0.2);
15225
}
15226
.ui.divided.inverted.horizontal.list .item {
15227
border-color: rgba(255, 255, 255, 0.2);
15228
}
15229
/*-------------------
15230
Celled
15231
--------------------*/
15232
.ui.celled.list > .item,
15233
.ui.celled.list > .list {
15234
border-top: 1px solid rgba(0, 0, 0, 0.1);
15235
padding-left: 0.5em;
15236
padding-right: 0.5em;
15237
}
15238
.ui.celled.list > .item:last-child {
15239
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
15240
}
15241
/* Sub Menu */
15242
.ui.celled.list .item .list {
15243
margin-left: -0.5em;
15244
margin-right: -0.5em;
15245
}
15246
.ui.celled.list .item .list .item {
15247
border-width: 0px;
15248
}
15249
.ui.celled.list .list .item:first-child {
15250
border-top-width: 0px;
15251
}
15252
/* Celled Bulleted */
15253
.ui.celled.bulleted.list {
15254
margin-left: 0em;
15255
}
15256
.ui.celled.bulleted.list > .item {
15257
padding-left: 1.5em;
15258
}
15259
.ui.celled.bulleted.list > .item:before {
15260
left: 0.5em;
15261
}
15262
/* Celled Ordered */
15263
.ui.celled.ordered.list {
15264
margin-left: 0em;
15265
}
15266
.ui.celled.ordered.list .item {
15267
padding-left: 2em;
15268
padding-right: 2em;
15269
}
15270
.ui.celled.ordered.list .item:before {
15271
left: 0.5em;
15272
}
15273
.ui.celled.ordered.list .item .list {
15274
margin-left: -2em;
15275
margin-right: -2em;
15276
}
15277
/* Celled Horizontal */
15278
.ui.horizontal.celled.list {
15279
margin-left: 0em;
15280
}
15281
.ui.horizontal.celled.list .item {
15282
border-top: none;
15283
border-left: 1px solid rgba(0, 0, 0, 0.1);
15284
margin: 0em;
15285
padding-left: 0.75em;
15286
padding-right: 0.75em;
15287
line-height: 0.6em;
15288
}
15289
.ui.horizontal.celled.list .item:last-child {
15290
border-bottom: none;
15291
border-right: 1px solid rgba(0, 0, 0, 0.1);
15292
}
15293
/* Inverted */
15294
.ui.celled.inverted.list > .item,
15295
.ui.celled.inverted.list > .list {
15296
border-color: rgba(255, 255, 255, 0.2);
15297
}
15298
.ui.celled.inverted.horizontal.list .item {
15299
border-color: rgba(255, 255, 255, 0.2);
15300
}
15301
/*-------------------
15302
Relaxed
15303
--------------------*/
15304
.ui.relaxed.list:not(.horizontal) .item {
15305
padding-top: 0.5em;
15306
padding-bottom: 0.5em;
15307
}
15308
.ui.relaxed.list .header {
15309
margin-bottom: 0.25em;
15310
}
15311
.ui.horizontal.relaxed.list .item {
15312
padding-left: 1.25em;
15313
padding-right: 1.25em;
15314
}
15315
.ui.very.relaxed.list:not(.horizontal) .item {
15316
padding-top: 1em;
15317
padding-bottom: 1em;
15318
}
15319
.ui.very.relaxed.list .header {
15320
margin-bottom: 0.5em;
15321
}
15322
.ui.horizontal.very.relaxed.list .item {
15323
padding-left: 2em;
15324
padding-right: 2em;
15325
}
15326
/*-------------------
15327
Sizes
15328
--------------------*/
15329
.ui.mini.list .item {
15330
font-size: 0.7rem;
15331
}
15332
.ui.tiny.list .item {
15333
font-size: 0.8125rem;
15334
}
15335
.ui.small.list .item {
15336
font-size: 0.875rem;
15337
}
15338
.ui.list .item {
15339
font-size: 1em;
15340
}
15341
.ui.large.list .item {
15342
font-size: 1.125rem;
15343
}
15344
.ui.big.list .item {
15345
font-size: 1.25rem;
15346
}
15347
.ui.huge.list .item {
15348
font-size: 1.375rem;
15349
}
15350
.ui.massive.list .item {
15351
font-size: 1.5rem;
15352
}
15353
15354
/*
15355
* # Statistic
15356
*
15357
*
15358
* Copyright 2014 Contributors
15359
* Released under the MIT license
15360
* http://opensource.org/licenses/MIT
15361
*
15362
* Released: Aug 20, 2014
15363
*/
15364
/*******************************
15365
Statistic
15366
*******************************/
15367
.ui.statistic {
15368
text-align: center;
15369
}
15370
/*******************************
15371
Content
15372
*******************************/
15373
.ui.statistic > .number {
15374
font-size: 4em;
15375
font-weight: bold;
15376
color: rgba(0, 0, 0, 0.7);
15377
}
15378
.ui.statistic > .description {
15379
opacity: 0.8;
15380
}
Loggerhead is a web-based interface for Breezy
Version: 2.0.1