loading up the forgejo repo on tangled to test page performance
Remove fomantic grid module (#29894)
Removed the grid module and moved the used parts it into our own CSS,
eliminating around 75% unused CSS in turn.
(cherry picked from commit 286268c9155c9e0b3a3aa0a18675111e5b744a5b)
authored by
silverwind
and committed by
Earl Warren
dda010cd
0710de9d
+502
-2004
+1
web_src/css/index.css
+1
web_src/css/index.css
+498
web_src/css/modules/grid.css
+498
web_src/css/modules/grid.css
···
1
+
/* based on Fomantic UI grid module, with just the parts extracted that we use. If you find any
2
+
unused rules here after refactoring, please remove them. */
3
+
4
+
.ui.grid {
5
+
display: flex;
6
+
flex-direction: row;
7
+
flex-wrap: wrap;
8
+
align-items: stretch;
9
+
padding: 0;
10
+
margin-top: -1rem;
11
+
margin-bottom: -1rem;
12
+
margin-left: -1rem;
13
+
margin-right: -1rem;
14
+
}
15
+
16
+
.ui.relaxed.grid {
17
+
margin-left: -1.5rem;
18
+
margin-right: -1.5rem;
19
+
}
20
+
.ui[class*="very relaxed"].grid {
21
+
margin-left: -2.5rem;
22
+
margin-right: -2.5rem;
23
+
}
24
+
25
+
.ui.grid + .grid {
26
+
margin-top: 1rem;
27
+
}
28
+
29
+
.ui.grid > .column:not(.row),
30
+
.ui.grid > .row > .column {
31
+
position: relative;
32
+
display: inline-block;
33
+
width: 6.25%;
34
+
padding-left: 1rem;
35
+
padding-right: 1rem;
36
+
vertical-align: top;
37
+
}
38
+
.ui.grid > * {
39
+
padding-left: 1rem;
40
+
padding-right: 1rem;
41
+
}
42
+
43
+
.ui.grid > .row {
44
+
position: relative;
45
+
display: flex;
46
+
flex-direction: row;
47
+
flex-wrap: wrap;
48
+
justify-content: inherit;
49
+
align-items: stretch;
50
+
width: 100% !important;
51
+
padding: 0;
52
+
padding-top: 1rem;
53
+
padding-bottom: 1rem;
54
+
}
55
+
56
+
.ui.grid > .column:not(.row) {
57
+
padding-top: 1rem;
58
+
padding-bottom: 1rem;
59
+
}
60
+
.ui.grid > .row > .column {
61
+
margin-top: 0;
62
+
margin-bottom: 0;
63
+
}
64
+
65
+
.ui.grid > .row > img,
66
+
.ui.grid > .row > .column > img {
67
+
max-width: 100%;
68
+
}
69
+
70
+
.ui.grid > .ui.grid:first-child {
71
+
margin-top: 0;
72
+
}
73
+
.ui.grid > .ui.grid:last-child {
74
+
margin-bottom: 0;
75
+
}
76
+
77
+
.ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached),
78
+
.ui.aligned.grid .column > .segment:not(.compact):not(.attached) {
79
+
width: 100%;
80
+
}
81
+
82
+
.ui.grid .row + .ui.divider {
83
+
flex-grow: 1;
84
+
margin: 1rem;
85
+
}
86
+
.ui.grid .column + .ui.vertical.divider {
87
+
height: calc(50% - 1rem);
88
+
}
89
+
90
+
.ui.grid > .row > .column:last-child > .horizontal.segment,
91
+
.ui.grid > .column:last-child > .horizontal.segment {
92
+
box-shadow: none;
93
+
}
94
+
95
+
@media only screen and (max-width: 767.98px) {
96
+
.ui.page.grid {
97
+
width: auto;
98
+
padding-left: 0;
99
+
padding-right: 0;
100
+
margin-left: 0;
101
+
margin-right: 0;
102
+
}
103
+
}
104
+
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
105
+
.ui.page.grid {
106
+
width: auto;
107
+
margin-left: 0;
108
+
margin-right: 0;
109
+
padding-left: 2em;
110
+
padding-right: 2em;
111
+
}
112
+
}
113
+
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
114
+
.ui.page.grid {
115
+
width: auto;
116
+
margin-left: 0;
117
+
margin-right: 0;
118
+
padding-left: 3%;
119
+
padding-right: 3%;
120
+
}
121
+
}
122
+
@media only screen and (min-width: 1200px) and (max-width: 1919.98px) {
123
+
.ui.page.grid {
124
+
width: auto;
125
+
margin-left: 0;
126
+
margin-right: 0;
127
+
padding-left: 15%;
128
+
padding-right: 15%;
129
+
}
130
+
}
131
+
@media only screen and (min-width: 1920px) {
132
+
.ui.page.grid {
133
+
width: auto;
134
+
margin-left: 0;
135
+
margin-right: 0;
136
+
padding-left: 23%;
137
+
padding-right: 23%;
138
+
}
139
+
}
140
+
141
+
.ui.grid > .column:only-child,
142
+
.ui.grid > .row > .column:only-child {
143
+
width: 100%;
144
+
}
145
+
146
+
.ui[class*="one column"].grid > .row > .column,
147
+
.ui[class*="one column"].grid > .column:not(.row) {
148
+
width: 100%;
149
+
}
150
+
.ui[class*="two column"].grid > .row > .column,
151
+
.ui[class*="two column"].grid > .column:not(.row) {
152
+
width: 50%;
153
+
}
154
+
.ui[class*="three column"].grid > .row > .column,
155
+
.ui[class*="three column"].grid > .column:not(.row) {
156
+
width: 33.33333333%;
157
+
}
158
+
.ui[class*="four column"].grid > .row > .column,
159
+
.ui[class*="four column"].grid > .column:not(.row) {
160
+
width: 25%;
161
+
}
162
+
.ui[class*="five column"].grid > .row > .column,
163
+
.ui[class*="five column"].grid > .column:not(.row) {
164
+
width: 20%;
165
+
}
166
+
.ui[class*="six column"].grid > .row > .column,
167
+
.ui[class*="six column"].grid > .column:not(.row) {
168
+
width: 16.66666667%;
169
+
}
170
+
.ui[class*="seven column"].grid > .row > .column,
171
+
.ui[class*="seven column"].grid > .column:not(.row) {
172
+
width: 14.28571429%;
173
+
}
174
+
.ui[class*="eight column"].grid > .row > .column,
175
+
.ui[class*="eight column"].grid > .column:not(.row) {
176
+
width: 12.5%;
177
+
}
178
+
.ui[class*="nine column"].grid > .row > .column,
179
+
.ui[class*="nine column"].grid > .column:not(.row) {
180
+
width: 11.11111111%;
181
+
}
182
+
.ui[class*="ten column"].grid > .row > .column,
183
+
.ui[class*="ten column"].grid > .column:not(.row) {
184
+
width: 10%;
185
+
}
186
+
.ui[class*="eleven column"].grid > .row > .column,
187
+
.ui[class*="eleven column"].grid > .column:not(.row) {
188
+
width: 9.09090909%;
189
+
}
190
+
.ui[class*="twelve column"].grid > .row > .column,
191
+
.ui[class*="twelve column"].grid > .column:not(.row) {
192
+
width: 8.33333333%;
193
+
}
194
+
.ui[class*="thirteen column"].grid > .row > .column,
195
+
.ui[class*="thirteen column"].grid > .column:not(.row) {
196
+
width: 7.69230769%;
197
+
}
198
+
.ui[class*="fourteen column"].grid > .row > .column,
199
+
.ui[class*="fourteen column"].grid > .column:not(.row) {
200
+
width: 7.14285714%;
201
+
}
202
+
.ui[class*="fifteen column"].grid > .row > .column,
203
+
.ui[class*="fifteen column"].grid > .column:not(.row) {
204
+
width: 6.66666667%;
205
+
}
206
+
.ui[class*="sixteen column"].grid > .row > .column,
207
+
.ui[class*="sixteen column"].grid > .column:not(.row) {
208
+
width: 6.25%;
209
+
}
210
+
211
+
.ui.grid > [class*="one column"].row > .column {
212
+
width: 100% !important;
213
+
}
214
+
.ui.grid > [class*="two column"].row > .column {
215
+
width: 50% !important;
216
+
}
217
+
.ui.grid > [class*="three column"].row > .column {
218
+
width: 33.33333333% !important;
219
+
}
220
+
.ui.grid > [class*="four column"].row > .column {
221
+
width: 25% !important;
222
+
}
223
+
.ui.grid > [class*="five column"].row > .column {
224
+
width: 20% !important;
225
+
}
226
+
.ui.grid > [class*="six column"].row > .column {
227
+
width: 16.66666667% !important;
228
+
}
229
+
.ui.grid > [class*="seven column"].row > .column {
230
+
width: 14.28571429% !important;
231
+
}
232
+
.ui.grid > [class*="eight column"].row > .column {
233
+
width: 12.5% !important;
234
+
}
235
+
.ui.grid > [class*="nine column"].row > .column {
236
+
width: 11.11111111% !important;
237
+
}
238
+
.ui.grid > [class*="ten column"].row > .column {
239
+
width: 10% !important;
240
+
}
241
+
.ui.grid > [class*="eleven column"].row > .column {
242
+
width: 9.09090909% !important;
243
+
}
244
+
.ui.grid > [class*="twelve column"].row > .column {
245
+
width: 8.33333333% !important;
246
+
}
247
+
.ui.grid > [class*="thirteen column"].row > .column {
248
+
width: 7.69230769% !important;
249
+
}
250
+
.ui.grid > [class*="fourteen column"].row > .column {
251
+
width: 7.14285714% !important;
252
+
}
253
+
.ui.grid > [class*="fifteen column"].row > .column {
254
+
width: 6.66666667% !important;
255
+
}
256
+
.ui.grid > [class*="sixteen column"].row > .column {
257
+
width: 6.25% !important;
258
+
}
259
+
260
+
.ui.grid > .row > [class*="one wide"].column,
261
+
.ui.grid > .column.row > [class*="one wide"].column,
262
+
.ui.grid > [class*="one wide"].column,
263
+
.ui.column.grid > [class*="one wide"].column {
264
+
width: 6.25% !important;
265
+
}
266
+
.ui.grid > .row > [class*="two wide"].column,
267
+
.ui.grid > .column.row > [class*="two wide"].column,
268
+
.ui.grid > [class*="two wide"].column,
269
+
.ui.column.grid > [class*="two wide"].column {
270
+
width: 12.5% !important;
271
+
}
272
+
.ui.grid > .row > [class*="three wide"].column,
273
+
.ui.grid > .column.row > [class*="three wide"].column,
274
+
.ui.grid > [class*="three wide"].column,
275
+
.ui.column.grid > [class*="three wide"].column {
276
+
width: 18.75% !important;
277
+
}
278
+
.ui.grid > .row > [class*="four wide"].column,
279
+
.ui.grid > .column.row > [class*="four wide"].column,
280
+
.ui.grid > [class*="four wide"].column,
281
+
.ui.column.grid > [class*="four wide"].column {
282
+
width: 25% !important;
283
+
}
284
+
.ui.grid > .row > [class*="five wide"].column,
285
+
.ui.grid > .column.row > [class*="five wide"].column,
286
+
.ui.grid > [class*="five wide"].column,
287
+
.ui.column.grid > [class*="five wide"].column {
288
+
width: 31.25% !important;
289
+
}
290
+
.ui.grid > .row > [class*="six wide"].column,
291
+
.ui.grid > .column.row > [class*="six wide"].column,
292
+
.ui.grid > [class*="six wide"].column,
293
+
.ui.column.grid > [class*="six wide"].column {
294
+
width: 37.5% !important;
295
+
}
296
+
.ui.grid > .row > [class*="seven wide"].column,
297
+
.ui.grid > .column.row > [class*="seven wide"].column,
298
+
.ui.grid > [class*="seven wide"].column,
299
+
.ui.column.grid > [class*="seven wide"].column {
300
+
width: 43.75% !important;
301
+
}
302
+
.ui.grid > .row > [class*="eight wide"].column,
303
+
.ui.grid > .column.row > [class*="eight wide"].column,
304
+
.ui.grid > [class*="eight wide"].column,
305
+
.ui.column.grid > [class*="eight wide"].column {
306
+
width: 50% !important;
307
+
}
308
+
.ui.grid > .row > [class*="nine wide"].column,
309
+
.ui.grid > .column.row > [class*="nine wide"].column,
310
+
.ui.grid > [class*="nine wide"].column,
311
+
.ui.column.grid > [class*="nine wide"].column {
312
+
width: 56.25% !important;
313
+
}
314
+
.ui.grid > .row > [class*="ten wide"].column,
315
+
.ui.grid > .column.row > [class*="ten wide"].column,
316
+
.ui.grid > [class*="ten wide"].column,
317
+
.ui.column.grid > [class*="ten wide"].column {
318
+
width: 62.5% !important;
319
+
}
320
+
.ui.grid > .row > [class*="eleven wide"].column,
321
+
.ui.grid > .column.row > [class*="eleven wide"].column,
322
+
.ui.grid > [class*="eleven wide"].column,
323
+
.ui.column.grid > [class*="eleven wide"].column {
324
+
width: 68.75% !important;
325
+
}
326
+
.ui.grid > .row > [class*="twelve wide"].column,
327
+
.ui.grid > .column.row > [class*="twelve wide"].column,
328
+
.ui.grid > [class*="twelve wide"].column,
329
+
.ui.column.grid > [class*="twelve wide"].column {
330
+
width: 75% !important;
331
+
}
332
+
.ui.grid > .row > [class*="thirteen wide"].column,
333
+
.ui.grid > .column.row > [class*="thirteen wide"].column,
334
+
.ui.grid > [class*="thirteen wide"].column,
335
+
.ui.column.grid > [class*="thirteen wide"].column {
336
+
width: 81.25% !important;
337
+
}
338
+
.ui.grid > .row > [class*="fourteen wide"].column,
339
+
.ui.grid > .column.row > [class*="fourteen wide"].column,
340
+
.ui.grid > [class*="fourteen wide"].column,
341
+
.ui.column.grid > [class*="fourteen wide"].column {
342
+
width: 87.5% !important;
343
+
}
344
+
.ui.grid > .row > [class*="fifteen wide"].column,
345
+
.ui.grid > .column.row > [class*="fifteen wide"].column,
346
+
.ui.grid > [class*="fifteen wide"].column,
347
+
.ui.column.grid > [class*="fifteen wide"].column {
348
+
width: 93.75% !important;
349
+
}
350
+
.ui.grid > .row > [class*="sixteen wide"].column,
351
+
.ui.grid > .column.row > [class*="sixteen wide"].column,
352
+
.ui.grid > [class*="sixteen wide"].column,
353
+
.ui.column.grid > [class*="sixteen wide"].column {
354
+
width: 100% !important;
355
+
}
356
+
357
+
.ui.centered.grid,
358
+
.ui.centered.grid > .row,
359
+
.ui.grid > .centered.row {
360
+
text-align: center;
361
+
justify-content: center;
362
+
}
363
+
.ui.centered.grid > .column:not(.aligned):not(.justified):not(.row),
364
+
.ui.centered.grid > .row > .column:not(.aligned):not(.justified),
365
+
.ui.grid .centered.row > .column:not(.aligned):not(.justified) {
366
+
text-align: left;
367
+
}
368
+
.ui.grid > .centered.column,
369
+
.ui.grid > .row > .centered.column {
370
+
display: block;
371
+
margin-left: auto;
372
+
margin-right: auto;
373
+
}
374
+
375
+
.ui.relaxed.grid > .column:not(.row),
376
+
.ui.relaxed.grid > .row > .column,
377
+
.ui.grid > .relaxed.row > .column {
378
+
padding-left: 1.5rem;
379
+
padding-right: 1.5rem;
380
+
}
381
+
.ui[class*="very relaxed"].grid > .column:not(.row),
382
+
.ui[class*="very relaxed"].grid > .row > .column,
383
+
.ui.grid > [class*="very relaxed"].row > .column {
384
+
padding-left: 2.5rem;
385
+
padding-right: 2.5rem;
386
+
}
387
+
388
+
.ui.relaxed.grid .row + .ui.divider,
389
+
.ui.grid .relaxed.row + .ui.divider {
390
+
margin-left: 1.5rem;
391
+
margin-right: 1.5rem;
392
+
}
393
+
.ui[class*="very relaxed"].grid .row + .ui.divider,
394
+
.ui.grid [class*="very relaxed"].row + .ui.divider {
395
+
margin-left: 2.5rem;
396
+
margin-right: 2.5rem;
397
+
}
398
+
399
+
.ui[class*="middle aligned"].grid > .column:not(.row),
400
+
.ui[class*="middle aligned"].grid > .row > .column,
401
+
.ui.grid > [class*="middle aligned"].row > .column,
402
+
.ui.grid > [class*="middle aligned"].column:not(.row),
403
+
.ui.grid > .row > [class*="middle aligned"].column {
404
+
flex-direction: column;
405
+
vertical-align: middle;
406
+
align-self: center !important;
407
+
}
408
+
409
+
.ui[class*="center aligned"].grid > .column,
410
+
.ui[class*="center aligned"].grid > .row > .column,
411
+
.ui.grid > [class*="center aligned"].row > .column,
412
+
.ui.grid > [class*="center aligned"].column.column,
413
+
.ui.grid > .row > [class*="center aligned"].column.column {
414
+
text-align: center;
415
+
align-self: inherit;
416
+
}
417
+
.ui[class*="center aligned"].grid {
418
+
justify-content: center;
419
+
}
420
+
421
+
.ui[class*="equal width"].grid > .column:not(.row),
422
+
.ui[class*="equal width"].grid > .row > .column,
423
+
.ui.grid > [class*="equal width"].row > .column {
424
+
display: inline-block;
425
+
flex-grow: 1;
426
+
}
427
+
.ui[class*="equal width"].grid > .wide.column,
428
+
.ui[class*="equal width"].grid > .row > .wide.column,
429
+
.ui.grid > [class*="equal width"].row > .wide.column {
430
+
flex-grow: 0;
431
+
}
432
+
433
+
@media only screen and (max-width: 767.98px) {
434
+
.ui[class*="mobile reversed"].grid,
435
+
.ui[class*="mobile reversed"].grid > .row,
436
+
.ui.grid > [class*="mobile reversed"].row {
437
+
flex-direction: row-reverse;
438
+
}
439
+
.ui.stackable[class*="mobile reversed"] {
440
+
flex-direction: column-reverse;
441
+
}
442
+
}
443
+
444
+
@media only screen and (max-width: 767.98px) {
445
+
.ui.stackable.grid {
446
+
width: auto;
447
+
margin-left: 0 !important;
448
+
margin-right: 0 !important;
449
+
}
450
+
.ui.stackable.grid > .row > .wide.column,
451
+
.ui.stackable.grid > .wide.column,
452
+
.ui.stackable.grid > .column.grid > .column,
453
+
.ui.stackable.grid > .column.row > .column,
454
+
.ui.stackable.grid > .row > .column,
455
+
.ui.stackable.grid > .column:not(.row),
456
+
.ui.grid > .stackable.stackable.stackable.row > .column {
457
+
width: 100% !important;
458
+
margin: 0 !important;
459
+
box-shadow: none !important;
460
+
padding: 1rem;
461
+
}
462
+
.ui.stackable.grid:not(.vertically) > .row {
463
+
margin: 0;
464
+
padding: 0;
465
+
}
466
+
467
+
.ui.container > .ui.stackable.grid > .column,
468
+
.ui.container > .ui.stackable.grid > .row > .column {
469
+
padding-left: 0 !important;
470
+
padding-right: 0 !important;
471
+
}
472
+
473
+
.ui.grid .ui.stackable.grid,
474
+
.ui.segment:not(.vertical) .ui.stackable.page.grid {
475
+
margin-left: -1rem !important;
476
+
margin-right: -1rem !important;
477
+
}
478
+
}
479
+
480
+
.ui.ui.ui.compact.grid > .column:not(.row),
481
+
.ui.ui.ui.compact.grid > .row > .column {
482
+
padding-left: 0.5rem;
483
+
padding-right: 0.5rem;
484
+
}
485
+
.ui.ui.ui.compact.grid > * {
486
+
padding-left: 0.5rem;
487
+
padding-right: 0.5rem;
488
+
}
489
+
490
+
.ui.ui.ui.compact.grid > .row {
491
+
padding-top: 0.5rem;
492
+
padding-bottom: 0.5rem;
493
+
}
494
+
495
+
.ui.ui.ui.compact.grid > .column:not(.row) {
496
+
padding-top: 0.5rem;
497
+
padding-bottom: 0.5rem;
498
+
}
+3
web_src/css/modules/message.css
+3
web_src/css/modules/message.css
-2003
web_src/fomantic/build/semantic.css
-2003
web_src/fomantic/build/semantic.css
···
7344
7344
Site Overrides
7345
7345
*******************************/
7346
7346
/*!
7347
-
* # Fomantic-UI - Grid
7348
-
* http://github.com/fomantic/Fomantic-UI/
7349
-
*
7350
-
*
7351
-
* Released under the MIT license
7352
-
* http://opensource.org/licenses/MIT
7353
-
*
7354
-
*/
7355
-
7356
-
/*******************************
7357
-
Standard
7358
-
*******************************/
7359
-
7360
-
.ui.grid {
7361
-
display: flex;
7362
-
flex-direction: row;
7363
-
flex-wrap: wrap;
7364
-
align-items: stretch;
7365
-
padding: 0;
7366
-
}
7367
-
7368
-
/*----------------------
7369
-
Remove Gutters
7370
-
-----------------------*/
7371
-
7372
-
.ui.grid {
7373
-
margin-top: -1rem;
7374
-
margin-bottom: -1rem;
7375
-
margin-left: -1rem;
7376
-
margin-right: -1rem;
7377
-
}
7378
-
7379
-
.ui.relaxed.grid {
7380
-
margin-left: -1.5rem;
7381
-
margin-right: -1.5rem;
7382
-
}
7383
-
7384
-
.ui[class*="very relaxed"].grid {
7385
-
margin-left: -2.5rem;
7386
-
margin-right: -2.5rem;
7387
-
}
7388
-
7389
-
/* Preserve Rows Spacing on Consecutive Grids */
7390
-
7391
-
.ui.grid + .grid {
7392
-
margin-top: 1rem;
7393
-
}
7394
-
7395
-
/*-------------------
7396
-
Columns
7397
-
--------------------*/
7398
-
7399
-
/* Standard 16 column */
7400
-
7401
-
.ui.grid > .column:not(.row),
7402
-
.ui.grid > .row > .column {
7403
-
position: relative;
7404
-
display: inline-block;
7405
-
width: 6.25%;
7406
-
padding-left: 1rem;
7407
-
padding-right: 1rem;
7408
-
vertical-align: top;
7409
-
}
7410
-
7411
-
.ui.grid > * {
7412
-
padding-left: 1rem;
7413
-
padding-right: 1rem;
7414
-
}
7415
-
7416
-
/*-------------------
7417
-
Rows
7418
-
--------------------*/
7419
-
7420
-
.ui.grid > .row {
7421
-
position: relative;
7422
-
display: flex;
7423
-
flex-direction: row;
7424
-
flex-wrap: wrap;
7425
-
justify-content: inherit;
7426
-
align-items: stretch;
7427
-
width: 100% !important;
7428
-
padding: 0;
7429
-
padding-top: 1rem;
7430
-
padding-bottom: 1rem;
7431
-
}
7432
-
7433
-
/*-------------------
7434
-
Columns
7435
-
--------------------*/
7436
-
7437
-
/* Vertical padding when no rows */
7438
-
7439
-
.ui.grid > .column:not(.row) {
7440
-
padding-top: 1rem;
7441
-
padding-bottom: 1rem;
7442
-
}
7443
-
7444
-
.ui.grid > .row > .column {
7445
-
margin-top: 0;
7446
-
margin-bottom: 0;
7447
-
}
7448
-
7449
-
/*-------------------
7450
-
Content
7451
-
--------------------*/
7452
-
7453
-
.ui.grid > .row > img,
7454
-
.ui.grid > .row > .column > img {
7455
-
max-width: 100%;
7456
-
}
7457
-
7458
-
/*-------------------
7459
-
Loose Coupling
7460
-
--------------------*/
7461
-
7462
-
/* Collapse Margin on Consecutive Grid */
7463
-
7464
-
.ui.grid > .ui.grid:first-child {
7465
-
margin-top: 0;
7466
-
}
7467
-
7468
-
.ui.grid > .ui.grid:last-child {
7469
-
margin-bottom: 0;
7470
-
}
7471
-
7472
-
/* Segment inside Aligned Grid */
7473
-
7474
-
.ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached),
7475
-
.ui.aligned.grid .column > .segment:not(.compact):not(.attached) {
7476
-
width: 100%;
7477
-
}
7478
-
7479
-
/* Align Dividers with Gutter */
7480
-
7481
-
.ui.grid .row + .ui.divider {
7482
-
flex-grow: 1;
7483
-
margin: 1rem 1rem;
7484
-
}
7485
-
7486
-
.ui.grid .column + .ui.vertical.divider {
7487
-
height: calc(50% - 1rem);
7488
-
}
7489
-
7490
-
/* Remove Border on Last Horizontal Segment */
7491
-
7492
-
.ui.grid > .row > .column:last-child > .horizontal.segment,
7493
-
.ui.grid > .column:last-child > .horizontal.segment {
7494
-
box-shadow: none;
7495
-
}
7496
-
7497
-
/*******************************
7498
-
Variations
7499
-
*******************************/
7500
-
7501
-
/*-----------------------
7502
-
Page Grid
7503
-
-------------------------*/
7504
-
7505
-
@media only screen and (max-width: 767.98px) {
7506
-
.ui.page.grid {
7507
-
width: auto;
7508
-
padding-left: 0;
7509
-
padding-right: 0;
7510
-
margin-left: 0;
7511
-
margin-right: 0;
7512
-
}
7513
-
}
7514
-
7515
-
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
7516
-
.ui.page.grid {
7517
-
width: auto;
7518
-
margin-left: 0;
7519
-
margin-right: 0;
7520
-
padding-left: 2em;
7521
-
padding-right: 2em;
7522
-
}
7523
-
}
7524
-
7525
-
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
7526
-
.ui.page.grid {
7527
-
width: auto;
7528
-
margin-left: 0;
7529
-
margin-right: 0;
7530
-
padding-left: 3%;
7531
-
padding-right: 3%;
7532
-
}
7533
-
}
7534
-
7535
-
@media only screen and (min-width: 1200px) and (max-width: 1919.98px) {
7536
-
.ui.page.grid {
7537
-
width: auto;
7538
-
margin-left: 0;
7539
-
margin-right: 0;
7540
-
padding-left: 15%;
7541
-
padding-right: 15%;
7542
-
}
7543
-
}
7544
-
7545
-
@media only screen and (min-width: 1920px) {
7546
-
.ui.page.grid {
7547
-
width: auto;
7548
-
margin-left: 0;
7549
-
margin-right: 0;
7550
-
padding-left: 23%;
7551
-
padding-right: 23%;
7552
-
}
7553
-
}
7554
-
7555
-
/*-------------------
7556
-
Column Count
7557
-
--------------------*/
7558
-
7559
-
/* Assume full width with one column */
7560
-
7561
-
.ui.grid > .column:only-child,
7562
-
.ui.grid > .row > .column:only-child {
7563
-
width: 100%;
7564
-
}
7565
-
7566
-
/* Grid Based */
7567
-
7568
-
.ui[class*="one column"].grid > .row > .column,
7569
-
.ui[class*="one column"].grid > .column:not(.row) {
7570
-
width: 100%;
7571
-
}
7572
-
7573
-
.ui[class*="two column"].grid > .row > .column,
7574
-
.ui[class*="two column"].grid > .column:not(.row) {
7575
-
width: 50%;
7576
-
}
7577
-
7578
-
.ui[class*="three column"].grid > .row > .column,
7579
-
.ui[class*="three column"].grid > .column:not(.row) {
7580
-
width: 33.33333333%;
7581
-
}
7582
-
7583
-
.ui[class*="four column"].grid > .row > .column,
7584
-
.ui[class*="four column"].grid > .column:not(.row) {
7585
-
width: 25%;
7586
-
}
7587
-
7588
-
.ui[class*="five column"].grid > .row > .column,
7589
-
.ui[class*="five column"].grid > .column:not(.row) {
7590
-
width: 20%;
7591
-
}
7592
-
7593
-
.ui[class*="six column"].grid > .row > .column,
7594
-
.ui[class*="six column"].grid > .column:not(.row) {
7595
-
width: 16.66666667%;
7596
-
}
7597
-
7598
-
.ui[class*="seven column"].grid > .row > .column,
7599
-
.ui[class*="seven column"].grid > .column:not(.row) {
7600
-
width: 14.28571429%;
7601
-
}
7602
-
7603
-
.ui[class*="eight column"].grid > .row > .column,
7604
-
.ui[class*="eight column"].grid > .column:not(.row) {
7605
-
width: 12.5%;
7606
-
}
7607
-
7608
-
.ui[class*="nine column"].grid > .row > .column,
7609
-
.ui[class*="nine column"].grid > .column:not(.row) {
7610
-
width: 11.11111111%;
7611
-
}
7612
-
7613
-
.ui[class*="ten column"].grid > .row > .column,
7614
-
.ui[class*="ten column"].grid > .column:not(.row) {
7615
-
width: 10%;
7616
-
}
7617
-
7618
-
.ui[class*="eleven column"].grid > .row > .column,
7619
-
.ui[class*="eleven column"].grid > .column:not(.row) {
7620
-
width: 9.09090909%;
7621
-
}
7622
-
7623
-
.ui[class*="twelve column"].grid > .row > .column,
7624
-
.ui[class*="twelve column"].grid > .column:not(.row) {
7625
-
width: 8.33333333%;
7626
-
}
7627
-
7628
-
.ui[class*="thirteen column"].grid > .row > .column,
7629
-
.ui[class*="thirteen column"].grid > .column:not(.row) {
7630
-
width: 7.69230769%;
7631
-
}
7632
-
7633
-
.ui[class*="fourteen column"].grid > .row > .column,
7634
-
.ui[class*="fourteen column"].grid > .column:not(.row) {
7635
-
width: 7.14285714%;
7636
-
}
7637
-
7638
-
.ui[class*="fifteen column"].grid > .row > .column,
7639
-
.ui[class*="fifteen column"].grid > .column:not(.row) {
7640
-
width: 6.66666667%;
7641
-
}
7642
-
7643
-
.ui[class*="sixteen column"].grid > .row > .column,
7644
-
.ui[class*="sixteen column"].grid > .column:not(.row) {
7645
-
width: 6.25%;
7646
-
}
7647
-
7648
-
/* Row Based Overrides */
7649
-
7650
-
.ui.grid > [class*="one column"].row > .column {
7651
-
width: 100% !important;
7652
-
}
7653
-
7654
-
.ui.grid > [class*="two column"].row > .column {
7655
-
width: 50% !important;
7656
-
}
7657
-
7658
-
.ui.grid > [class*="three column"].row > .column {
7659
-
width: 33.33333333% !important;
7660
-
}
7661
-
7662
-
.ui.grid > [class*="four column"].row > .column {
7663
-
width: 25% !important;
7664
-
}
7665
-
7666
-
.ui.grid > [class*="five column"].row > .column {
7667
-
width: 20% !important;
7668
-
}
7669
-
7670
-
.ui.grid > [class*="six column"].row > .column {
7671
-
width: 16.66666667% !important;
7672
-
}
7673
-
7674
-
.ui.grid > [class*="seven column"].row > .column {
7675
-
width: 14.28571429% !important;
7676
-
}
7677
-
7678
-
.ui.grid > [class*="eight column"].row > .column {
7679
-
width: 12.5% !important;
7680
-
}
7681
-
7682
-
.ui.grid > [class*="nine column"].row > .column {
7683
-
width: 11.11111111% !important;
7684
-
}
7685
-
7686
-
.ui.grid > [class*="ten column"].row > .column {
7687
-
width: 10% !important;
7688
-
}
7689
-
7690
-
.ui.grid > [class*="eleven column"].row > .column {
7691
-
width: 9.09090909% !important;
7692
-
}
7693
-
7694
-
.ui.grid > [class*="twelve column"].row > .column {
7695
-
width: 8.33333333% !important;
7696
-
}
7697
-
7698
-
.ui.grid > [class*="thirteen column"].row > .column {
7699
-
width: 7.69230769% !important;
7700
-
}
7701
-
7702
-
.ui.grid > [class*="fourteen column"].row > .column {
7703
-
width: 7.14285714% !important;
7704
-
}
7705
-
7706
-
.ui.grid > [class*="fifteen column"].row > .column {
7707
-
width: 6.66666667% !important;
7708
-
}
7709
-
7710
-
.ui.grid > [class*="sixteen column"].row > .column {
7711
-
width: 6.25% !important;
7712
-
}
7713
-
7714
-
/* Celled Page */
7715
-
7716
-
.ui.celled.page.grid {
7717
-
box-shadow: none;
7718
-
}
7719
-
7720
-
/*-------------------
7721
-
Column Width
7722
-
--------------------*/
7723
-
7724
-
/* Sizing Combinations */
7725
-
7726
-
.ui.grid > .row > [class*="one wide"].column,
7727
-
.ui.grid > .column.row > [class*="one wide"].column,
7728
-
.ui.grid > [class*="one wide"].column,
7729
-
.ui.column.grid > [class*="one wide"].column {
7730
-
width: 6.25% !important;
7731
-
}
7732
-
7733
-
.ui.grid > .row > [class*="two wide"].column,
7734
-
.ui.grid > .column.row > [class*="two wide"].column,
7735
-
.ui.grid > [class*="two wide"].column,
7736
-
.ui.column.grid > [class*="two wide"].column {
7737
-
width: 12.5% !important;
7738
-
}
7739
-
7740
-
.ui.grid > .row > [class*="three wide"].column,
7741
-
.ui.grid > .column.row > [class*="three wide"].column,
7742
-
.ui.grid > [class*="three wide"].column,
7743
-
.ui.column.grid > [class*="three wide"].column {
7744
-
width: 18.75% !important;
7745
-
}
7746
-
7747
-
.ui.grid > .row > [class*="four wide"].column,
7748
-
.ui.grid > .column.row > [class*="four wide"].column,
7749
-
.ui.grid > [class*="four wide"].column,
7750
-
.ui.column.grid > [class*="four wide"].column {
7751
-
width: 25% !important;
7752
-
}
7753
-
7754
-
.ui.grid > .row > [class*="five wide"].column,
7755
-
.ui.grid > .column.row > [class*="five wide"].column,
7756
-
.ui.grid > [class*="five wide"].column,
7757
-
.ui.column.grid > [class*="five wide"].column {
7758
-
width: 31.25% !important;
7759
-
}
7760
-
7761
-
.ui.grid > .row > [class*="six wide"].column,
7762
-
.ui.grid > .column.row > [class*="six wide"].column,
7763
-
.ui.grid > [class*="six wide"].column,
7764
-
.ui.column.grid > [class*="six wide"].column {
7765
-
width: 37.5% !important;
7766
-
}
7767
-
7768
-
.ui.grid > .row > [class*="seven wide"].column,
7769
-
.ui.grid > .column.row > [class*="seven wide"].column,
7770
-
.ui.grid > [class*="seven wide"].column,
7771
-
.ui.column.grid > [class*="seven wide"].column {
7772
-
width: 43.75% !important;
7773
-
}
7774
-
7775
-
.ui.grid > .row > [class*="eight wide"].column,
7776
-
.ui.grid > .column.row > [class*="eight wide"].column,
7777
-
.ui.grid > [class*="eight wide"].column,
7778
-
.ui.column.grid > [class*="eight wide"].column {
7779
-
width: 50% !important;
7780
-
}
7781
-
7782
-
.ui.grid > .row > [class*="nine wide"].column,
7783
-
.ui.grid > .column.row > [class*="nine wide"].column,
7784
-
.ui.grid > [class*="nine wide"].column,
7785
-
.ui.column.grid > [class*="nine wide"].column {
7786
-
width: 56.25% !important;
7787
-
}
7788
-
7789
-
.ui.grid > .row > [class*="ten wide"].column,
7790
-
.ui.grid > .column.row > [class*="ten wide"].column,
7791
-
.ui.grid > [class*="ten wide"].column,
7792
-
.ui.column.grid > [class*="ten wide"].column {
7793
-
width: 62.5% !important;
7794
-
}
7795
-
7796
-
.ui.grid > .row > [class*="eleven wide"].column,
7797
-
.ui.grid > .column.row > [class*="eleven wide"].column,
7798
-
.ui.grid > [class*="eleven wide"].column,
7799
-
.ui.column.grid > [class*="eleven wide"].column {
7800
-
width: 68.75% !important;
7801
-
}
7802
-
7803
-
.ui.grid > .row > [class*="twelve wide"].column,
7804
-
.ui.grid > .column.row > [class*="twelve wide"].column,
7805
-
.ui.grid > [class*="twelve wide"].column,
7806
-
.ui.column.grid > [class*="twelve wide"].column {
7807
-
width: 75% !important;
7808
-
}
7809
-
7810
-
.ui.grid > .row > [class*="thirteen wide"].column,
7811
-
.ui.grid > .column.row > [class*="thirteen wide"].column,
7812
-
.ui.grid > [class*="thirteen wide"].column,
7813
-
.ui.column.grid > [class*="thirteen wide"].column {
7814
-
width: 81.25% !important;
7815
-
}
7816
-
7817
-
.ui.grid > .row > [class*="fourteen wide"].column,
7818
-
.ui.grid > .column.row > [class*="fourteen wide"].column,
7819
-
.ui.grid > [class*="fourteen wide"].column,
7820
-
.ui.column.grid > [class*="fourteen wide"].column {
7821
-
width: 87.5% !important;
7822
-
}
7823
-
7824
-
.ui.grid > .row > [class*="fifteen wide"].column,
7825
-
.ui.grid > .column.row > [class*="fifteen wide"].column,
7826
-
.ui.grid > [class*="fifteen wide"].column,
7827
-
.ui.column.grid > [class*="fifteen wide"].column {
7828
-
width: 93.75% !important;
7829
-
}
7830
-
7831
-
.ui.grid > .row > [class*="sixteen wide"].column,
7832
-
.ui.grid > .column.row > [class*="sixteen wide"].column,
7833
-
.ui.grid > [class*="sixteen wide"].column,
7834
-
.ui.column.grid > [class*="sixteen wide"].column {
7835
-
width: 100% !important;
7836
-
}
7837
-
7838
-
/*----------------------
7839
-
Width per Device
7840
-
-----------------------*/
7841
-
7842
-
/* Mobile Sizing Combinations */
7843
-
7844
-
@media only screen and (min-width: 320px) and (max-width: 767.98px) {
7845
-
.ui.grid > .row > [class*="one wide mobile"].column,
7846
-
.ui.grid > .column.row > [class*="one wide mobile"].column,
7847
-
.ui.grid > [class*="one wide mobile"].column,
7848
-
.ui.column.grid > [class*="one wide mobile"].column {
7849
-
width: 6.25% !important;
7850
-
}
7851
-
7852
-
.ui.grid > .row > [class*="two wide mobile"].column,
7853
-
.ui.grid > .column.row > [class*="two wide mobile"].column,
7854
-
.ui.grid > [class*="two wide mobile"].column,
7855
-
.ui.column.grid > [class*="two wide mobile"].column {
7856
-
width: 12.5% !important;
7857
-
}
7858
-
7859
-
.ui.grid > .row > [class*="three wide mobile"].column,
7860
-
.ui.grid > .column.row > [class*="three wide mobile"].column,
7861
-
.ui.grid > [class*="three wide mobile"].column,
7862
-
.ui.column.grid > [class*="three wide mobile"].column {
7863
-
width: 18.75% !important;
7864
-
}
7865
-
7866
-
.ui.grid > .row > [class*="four wide mobile"].column,
7867
-
.ui.grid > .column.row > [class*="four wide mobile"].column,
7868
-
.ui.grid > [class*="four wide mobile"].column,
7869
-
.ui.column.grid > [class*="four wide mobile"].column {
7870
-
width: 25% !important;
7871
-
}
7872
-
7873
-
.ui.grid > .row > [class*="five wide mobile"].column,
7874
-
.ui.grid > .column.row > [class*="five wide mobile"].column,
7875
-
.ui.grid > [class*="five wide mobile"].column,
7876
-
.ui.column.grid > [class*="five wide mobile"].column {
7877
-
width: 31.25% !important;
7878
-
}
7879
-
7880
-
.ui.grid > .row > [class*="six wide mobile"].column,
7881
-
.ui.grid > .column.row > [class*="six wide mobile"].column,
7882
-
.ui.grid > [class*="six wide mobile"].column,
7883
-
.ui.column.grid > [class*="six wide mobile"].column {
7884
-
width: 37.5% !important;
7885
-
}
7886
-
7887
-
.ui.grid > .row > [class*="seven wide mobile"].column,
7888
-
.ui.grid > .column.row > [class*="seven wide mobile"].column,
7889
-
.ui.grid > [class*="seven wide mobile"].column,
7890
-
.ui.column.grid > [class*="seven wide mobile"].column {
7891
-
width: 43.75% !important;
7892
-
}
7893
-
7894
-
.ui.grid > .row > [class*="eight wide mobile"].column,
7895
-
.ui.grid > .column.row > [class*="eight wide mobile"].column,
7896
-
.ui.grid > [class*="eight wide mobile"].column,
7897
-
.ui.column.grid > [class*="eight wide mobile"].column {
7898
-
width: 50% !important;
7899
-
}
7900
-
7901
-
.ui.grid > .row > [class*="nine wide mobile"].column,
7902
-
.ui.grid > .column.row > [class*="nine wide mobile"].column,
7903
-
.ui.grid > [class*="nine wide mobile"].column,
7904
-
.ui.column.grid > [class*="nine wide mobile"].column {
7905
-
width: 56.25% !important;
7906
-
}
7907
-
7908
-
.ui.grid > .row > [class*="ten wide mobile"].column,
7909
-
.ui.grid > .column.row > [class*="ten wide mobile"].column,
7910
-
.ui.grid > [class*="ten wide mobile"].column,
7911
-
.ui.column.grid > [class*="ten wide mobile"].column {
7912
-
width: 62.5% !important;
7913
-
}
7914
-
7915
-
.ui.grid > .row > [class*="eleven wide mobile"].column,
7916
-
.ui.grid > .column.row > [class*="eleven wide mobile"].column,
7917
-
.ui.grid > [class*="eleven wide mobile"].column,
7918
-
.ui.column.grid > [class*="eleven wide mobile"].column {
7919
-
width: 68.75% !important;
7920
-
}
7921
-
7922
-
.ui.grid > .row > [class*="twelve wide mobile"].column,
7923
-
.ui.grid > .column.row > [class*="twelve wide mobile"].column,
7924
-
.ui.grid > [class*="twelve wide mobile"].column,
7925
-
.ui.column.grid > [class*="twelve wide mobile"].column {
7926
-
width: 75% !important;
7927
-
}
7928
-
7929
-
.ui.grid > .row > [class*="thirteen wide mobile"].column,
7930
-
.ui.grid > .column.row > [class*="thirteen wide mobile"].column,
7931
-
.ui.grid > [class*="thirteen wide mobile"].column,
7932
-
.ui.column.grid > [class*="thirteen wide mobile"].column {
7933
-
width: 81.25% !important;
7934
-
}
7935
-
7936
-
.ui.grid > .row > [class*="fourteen wide mobile"].column,
7937
-
.ui.grid > .column.row > [class*="fourteen wide mobile"].column,
7938
-
.ui.grid > [class*="fourteen wide mobile"].column,
7939
-
.ui.column.grid > [class*="fourteen wide mobile"].column {
7940
-
width: 87.5% !important;
7941
-
}
7942
-
7943
-
.ui.grid > .row > [class*="fifteen wide mobile"].column,
7944
-
.ui.grid > .column.row > [class*="fifteen wide mobile"].column,
7945
-
.ui.grid > [class*="fifteen wide mobile"].column,
7946
-
.ui.column.grid > [class*="fifteen wide mobile"].column {
7947
-
width: 93.75% !important;
7948
-
}
7949
-
7950
-
.ui.grid > .row > [class*="sixteen wide mobile"].column,
7951
-
.ui.grid > .column.row > [class*="sixteen wide mobile"].column,
7952
-
.ui.grid > [class*="sixteen wide mobile"].column,
7953
-
.ui.column.grid > [class*="sixteen wide mobile"].column {
7954
-
width: 100% !important;
7955
-
}
7956
-
}
7957
-
7958
-
/* Tablet Sizing Combinations */
7959
-
7960
-
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
7961
-
.ui.grid > .row > [class*="one wide tablet"].column,
7962
-
.ui.grid > .column.row > [class*="one wide tablet"].column,
7963
-
.ui.grid > [class*="one wide tablet"].column,
7964
-
.ui.column.grid > [class*="one wide tablet"].column {
7965
-
width: 6.25% !important;
7966
-
}
7967
-
7968
-
.ui.grid > .row > [class*="two wide tablet"].column,
7969
-
.ui.grid > .column.row > [class*="two wide tablet"].column,
7970
-
.ui.grid > [class*="two wide tablet"].column,
7971
-
.ui.column.grid > [class*="two wide tablet"].column {
7972
-
width: 12.5% !important;
7973
-
}
7974
-
7975
-
.ui.grid > .row > [class*="three wide tablet"].column,
7976
-
.ui.grid > .column.row > [class*="three wide tablet"].column,
7977
-
.ui.grid > [class*="three wide tablet"].column,
7978
-
.ui.column.grid > [class*="three wide tablet"].column {
7979
-
width: 18.75% !important;
7980
-
}
7981
-
7982
-
.ui.grid > .row > [class*="four wide tablet"].column,
7983
-
.ui.grid > .column.row > [class*="four wide tablet"].column,
7984
-
.ui.grid > [class*="four wide tablet"].column,
7985
-
.ui.column.grid > [class*="four wide tablet"].column {
7986
-
width: 25% !important;
7987
-
}
7988
-
7989
-
.ui.grid > .row > [class*="five wide tablet"].column,
7990
-
.ui.grid > .column.row > [class*="five wide tablet"].column,
7991
-
.ui.grid > [class*="five wide tablet"].column,
7992
-
.ui.column.grid > [class*="five wide tablet"].column {
7993
-
width: 31.25% !important;
7994
-
}
7995
-
7996
-
.ui.grid > .row > [class*="six wide tablet"].column,
7997
-
.ui.grid > .column.row > [class*="six wide tablet"].column,
7998
-
.ui.grid > [class*="six wide tablet"].column,
7999
-
.ui.column.grid > [class*="six wide tablet"].column {
8000
-
width: 37.5% !important;
8001
-
}
8002
-
8003
-
.ui.grid > .row > [class*="seven wide tablet"].column,
8004
-
.ui.grid > .column.row > [class*="seven wide tablet"].column,
8005
-
.ui.grid > [class*="seven wide tablet"].column,
8006
-
.ui.column.grid > [class*="seven wide tablet"].column {
8007
-
width: 43.75% !important;
8008
-
}
8009
-
8010
-
.ui.grid > .row > [class*="eight wide tablet"].column,
8011
-
.ui.grid > .column.row > [class*="eight wide tablet"].column,
8012
-
.ui.grid > [class*="eight wide tablet"].column,
8013
-
.ui.column.grid > [class*="eight wide tablet"].column {
8014
-
width: 50% !important;
8015
-
}
8016
-
8017
-
.ui.grid > .row > [class*="nine wide tablet"].column,
8018
-
.ui.grid > .column.row > [class*="nine wide tablet"].column,
8019
-
.ui.grid > [class*="nine wide tablet"].column,
8020
-
.ui.column.grid > [class*="nine wide tablet"].column {
8021
-
width: 56.25% !important;
8022
-
}
8023
-
8024
-
.ui.grid > .row > [class*="ten wide tablet"].column,
8025
-
.ui.grid > .column.row > [class*="ten wide tablet"].column,
8026
-
.ui.grid > [class*="ten wide tablet"].column,
8027
-
.ui.column.grid > [class*="ten wide tablet"].column {
8028
-
width: 62.5% !important;
8029
-
}
8030
-
8031
-
.ui.grid > .row > [class*="eleven wide tablet"].column,
8032
-
.ui.grid > .column.row > [class*="eleven wide tablet"].column,
8033
-
.ui.grid > [class*="eleven wide tablet"].column,
8034
-
.ui.column.grid > [class*="eleven wide tablet"].column {
8035
-
width: 68.75% !important;
8036
-
}
8037
-
8038
-
.ui.grid > .row > [class*="twelve wide tablet"].column,
8039
-
.ui.grid > .column.row > [class*="twelve wide tablet"].column,
8040
-
.ui.grid > [class*="twelve wide tablet"].column,
8041
-
.ui.column.grid > [class*="twelve wide tablet"].column {
8042
-
width: 75% !important;
8043
-
}
8044
-
8045
-
.ui.grid > .row > [class*="thirteen wide tablet"].column,
8046
-
.ui.grid > .column.row > [class*="thirteen wide tablet"].column,
8047
-
.ui.grid > [class*="thirteen wide tablet"].column,
8048
-
.ui.column.grid > [class*="thirteen wide tablet"].column {
8049
-
width: 81.25% !important;
8050
-
}
8051
-
8052
-
.ui.grid > .row > [class*="fourteen wide tablet"].column,
8053
-
.ui.grid > .column.row > [class*="fourteen wide tablet"].column,
8054
-
.ui.grid > [class*="fourteen wide tablet"].column,
8055
-
.ui.column.grid > [class*="fourteen wide tablet"].column {
8056
-
width: 87.5% !important;
8057
-
}
8058
-
8059
-
.ui.grid > .row > [class*="fifteen wide tablet"].column,
8060
-
.ui.grid > .column.row > [class*="fifteen wide tablet"].column,
8061
-
.ui.grid > [class*="fifteen wide tablet"].column,
8062
-
.ui.column.grid > [class*="fifteen wide tablet"].column {
8063
-
width: 93.75% !important;
8064
-
}
8065
-
8066
-
.ui.grid > .row > [class*="sixteen wide tablet"].column,
8067
-
.ui.grid > .column.row > [class*="sixteen wide tablet"].column,
8068
-
.ui.grid > [class*="sixteen wide tablet"].column,
8069
-
.ui.column.grid > [class*="sixteen wide tablet"].column {
8070
-
width: 100% !important;
8071
-
}
8072
-
}
8073
-
8074
-
/* Computer/Desktop Sizing Combinations */
8075
-
8076
-
@media only screen and (min-width: 992px) {
8077
-
.ui.grid > .row > [class*="one wide computer"].column,
8078
-
.ui.grid > .column.row > [class*="one wide computer"].column,
8079
-
.ui.grid > [class*="one wide computer"].column,
8080
-
.ui.column.grid > [class*="one wide computer"].column {
8081
-
width: 6.25% !important;
8082
-
}
8083
-
8084
-
.ui.grid > .row > [class*="two wide computer"].column,
8085
-
.ui.grid > .column.row > [class*="two wide computer"].column,
8086
-
.ui.grid > [class*="two wide computer"].column,
8087
-
.ui.column.grid > [class*="two wide computer"].column {
8088
-
width: 12.5% !important;
8089
-
}
8090
-
8091
-
.ui.grid > .row > [class*="three wide computer"].column,
8092
-
.ui.grid > .column.row > [class*="three wide computer"].column,
8093
-
.ui.grid > [class*="three wide computer"].column,
8094
-
.ui.column.grid > [class*="three wide computer"].column {
8095
-
width: 18.75% !important;
8096
-
}
8097
-
8098
-
.ui.grid > .row > [class*="four wide computer"].column,
8099
-
.ui.grid > .column.row > [class*="four wide computer"].column,
8100
-
.ui.grid > [class*="four wide computer"].column,
8101
-
.ui.column.grid > [class*="four wide computer"].column {
8102
-
width: 25% !important;
8103
-
}
8104
-
8105
-
.ui.grid > .row > [class*="five wide computer"].column,
8106
-
.ui.grid > .column.row > [class*="five wide computer"].column,
8107
-
.ui.grid > [class*="five wide computer"].column,
8108
-
.ui.column.grid > [class*="five wide computer"].column {
8109
-
width: 31.25% !important;
8110
-
}
8111
-
8112
-
.ui.grid > .row > [class*="six wide computer"].column,
8113
-
.ui.grid > .column.row > [class*="six wide computer"].column,
8114
-
.ui.grid > [class*="six wide computer"].column,
8115
-
.ui.column.grid > [class*="six wide computer"].column {
8116
-
width: 37.5% !important;
8117
-
}
8118
-
8119
-
.ui.grid > .row > [class*="seven wide computer"].column,
8120
-
.ui.grid > .column.row > [class*="seven wide computer"].column,
8121
-
.ui.grid > [class*="seven wide computer"].column,
8122
-
.ui.column.grid > [class*="seven wide computer"].column {
8123
-
width: 43.75% !important;
8124
-
}
8125
-
8126
-
.ui.grid > .row > [class*="eight wide computer"].column,
8127
-
.ui.grid > .column.row > [class*="eight wide computer"].column,
8128
-
.ui.grid > [class*="eight wide computer"].column,
8129
-
.ui.column.grid > [class*="eight wide computer"].column {
8130
-
width: 50% !important;
8131
-
}
8132
-
8133
-
.ui.grid > .row > [class*="nine wide computer"].column,
8134
-
.ui.grid > .column.row > [class*="nine wide computer"].column,
8135
-
.ui.grid > [class*="nine wide computer"].column,
8136
-
.ui.column.grid > [class*="nine wide computer"].column {
8137
-
width: 56.25% !important;
8138
-
}
8139
-
8140
-
.ui.grid > .row > [class*="ten wide computer"].column,
8141
-
.ui.grid > .column.row > [class*="ten wide computer"].column,
8142
-
.ui.grid > [class*="ten wide computer"].column,
8143
-
.ui.column.grid > [class*="ten wide computer"].column {
8144
-
width: 62.5% !important;
8145
-
}
8146
-
8147
-
.ui.grid > .row > [class*="eleven wide computer"].column,
8148
-
.ui.grid > .column.row > [class*="eleven wide computer"].column,
8149
-
.ui.grid > [class*="eleven wide computer"].column,
8150
-
.ui.column.grid > [class*="eleven wide computer"].column {
8151
-
width: 68.75% !important;
8152
-
}
8153
-
8154
-
.ui.grid > .row > [class*="twelve wide computer"].column,
8155
-
.ui.grid > .column.row > [class*="twelve wide computer"].column,
8156
-
.ui.grid > [class*="twelve wide computer"].column,
8157
-
.ui.column.grid > [class*="twelve wide computer"].column {
8158
-
width: 75% !important;
8159
-
}
8160
-
8161
-
.ui.grid > .row > [class*="thirteen wide computer"].column,
8162
-
.ui.grid > .column.row > [class*="thirteen wide computer"].column,
8163
-
.ui.grid > [class*="thirteen wide computer"].column,
8164
-
.ui.column.grid > [class*="thirteen wide computer"].column {
8165
-
width: 81.25% !important;
8166
-
}
8167
-
8168
-
.ui.grid > .row > [class*="fourteen wide computer"].column,
8169
-
.ui.grid > .column.row > [class*="fourteen wide computer"].column,
8170
-
.ui.grid > [class*="fourteen wide computer"].column,
8171
-
.ui.column.grid > [class*="fourteen wide computer"].column {
8172
-
width: 87.5% !important;
8173
-
}
8174
-
8175
-
.ui.grid > .row > [class*="fifteen wide computer"].column,
8176
-
.ui.grid > .column.row > [class*="fifteen wide computer"].column,
8177
-
.ui.grid > [class*="fifteen wide computer"].column,
8178
-
.ui.column.grid > [class*="fifteen wide computer"].column {
8179
-
width: 93.75% !important;
8180
-
}
8181
-
8182
-
.ui.grid > .row > [class*="sixteen wide computer"].column,
8183
-
.ui.grid > .column.row > [class*="sixteen wide computer"].column,
8184
-
.ui.grid > [class*="sixteen wide computer"].column,
8185
-
.ui.column.grid > [class*="sixteen wide computer"].column {
8186
-
width: 100% !important;
8187
-
}
8188
-
}
8189
-
8190
-
/* Large Monitor Sizing Combinations */
8191
-
8192
-
@media only screen and (min-width: 1200px) and (max-width: 1919.98px) {
8193
-
.ui.grid > .row > [class*="one wide large screen"].column,
8194
-
.ui.grid > .column.row > [class*="one wide large screen"].column,
8195
-
.ui.grid > [class*="one wide large screen"].column,
8196
-
.ui.column.grid > [class*="one wide large screen"].column {
8197
-
width: 6.25% !important;
8198
-
}
8199
-
8200
-
.ui.grid > .row > [class*="two wide large screen"].column,
8201
-
.ui.grid > .column.row > [class*="two wide large screen"].column,
8202
-
.ui.grid > [class*="two wide large screen"].column,
8203
-
.ui.column.grid > [class*="two wide large screen"].column {
8204
-
width: 12.5% !important;
8205
-
}
8206
-
8207
-
.ui.grid > .row > [class*="three wide large screen"].column,
8208
-
.ui.grid > .column.row > [class*="three wide large screen"].column,
8209
-
.ui.grid > [class*="three wide large screen"].column,
8210
-
.ui.column.grid > [class*="three wide large screen"].column {
8211
-
width: 18.75% !important;
8212
-
}
8213
-
8214
-
.ui.grid > .row > [class*="four wide large screen"].column,
8215
-
.ui.grid > .column.row > [class*="four wide large screen"].column,
8216
-
.ui.grid > [class*="four wide large screen"].column,
8217
-
.ui.column.grid > [class*="four wide large screen"].column {
8218
-
width: 25% !important;
8219
-
}
8220
-
8221
-
.ui.grid > .row > [class*="five wide large screen"].column,
8222
-
.ui.grid > .column.row > [class*="five wide large screen"].column,
8223
-
.ui.grid > [class*="five wide large screen"].column,
8224
-
.ui.column.grid > [class*="five wide large screen"].column {
8225
-
width: 31.25% !important;
8226
-
}
8227
-
8228
-
.ui.grid > .row > [class*="six wide large screen"].column,
8229
-
.ui.grid > .column.row > [class*="six wide large screen"].column,
8230
-
.ui.grid > [class*="six wide large screen"].column,
8231
-
.ui.column.grid > [class*="six wide large screen"].column {
8232
-
width: 37.5% !important;
8233
-
}
8234
-
8235
-
.ui.grid > .row > [class*="seven wide large screen"].column,
8236
-
.ui.grid > .column.row > [class*="seven wide large screen"].column,
8237
-
.ui.grid > [class*="seven wide large screen"].column,
8238
-
.ui.column.grid > [class*="seven wide large screen"].column {
8239
-
width: 43.75% !important;
8240
-
}
8241
-
8242
-
.ui.grid > .row > [class*="eight wide large screen"].column,
8243
-
.ui.grid > .column.row > [class*="eight wide large screen"].column,
8244
-
.ui.grid > [class*="eight wide large screen"].column,
8245
-
.ui.column.grid > [class*="eight wide large screen"].column {
8246
-
width: 50% !important;
8247
-
}
8248
-
8249
-
.ui.grid > .row > [class*="nine wide large screen"].column,
8250
-
.ui.grid > .column.row > [class*="nine wide large screen"].column,
8251
-
.ui.grid > [class*="nine wide large screen"].column,
8252
-
.ui.column.grid > [class*="nine wide large screen"].column {
8253
-
width: 56.25% !important;
8254
-
}
8255
-
8256
-
.ui.grid > .row > [class*="ten wide large screen"].column,
8257
-
.ui.grid > .column.row > [class*="ten wide large screen"].column,
8258
-
.ui.grid > [class*="ten wide large screen"].column,
8259
-
.ui.column.grid > [class*="ten wide large screen"].column {
8260
-
width: 62.5% !important;
8261
-
}
8262
-
8263
-
.ui.grid > .row > [class*="eleven wide large screen"].column,
8264
-
.ui.grid > .column.row > [class*="eleven wide large screen"].column,
8265
-
.ui.grid > [class*="eleven wide large screen"].column,
8266
-
.ui.column.grid > [class*="eleven wide large screen"].column {
8267
-
width: 68.75% !important;
8268
-
}
8269
-
8270
-
.ui.grid > .row > [class*="twelve wide large screen"].column,
8271
-
.ui.grid > .column.row > [class*="twelve wide large screen"].column,
8272
-
.ui.grid > [class*="twelve wide large screen"].column,
8273
-
.ui.column.grid > [class*="twelve wide large screen"].column {
8274
-
width: 75% !important;
8275
-
}
8276
-
8277
-
.ui.grid > .row > [class*="thirteen wide large screen"].column,
8278
-
.ui.grid > .column.row > [class*="thirteen wide large screen"].column,
8279
-
.ui.grid > [class*="thirteen wide large screen"].column,
8280
-
.ui.column.grid > [class*="thirteen wide large screen"].column {
8281
-
width: 81.25% !important;
8282
-
}
8283
-
8284
-
.ui.grid > .row > [class*="fourteen wide large screen"].column,
8285
-
.ui.grid > .column.row > [class*="fourteen wide large screen"].column,
8286
-
.ui.grid > [class*="fourteen wide large screen"].column,
8287
-
.ui.column.grid > [class*="fourteen wide large screen"].column {
8288
-
width: 87.5% !important;
8289
-
}
8290
-
8291
-
.ui.grid > .row > [class*="fifteen wide large screen"].column,
8292
-
.ui.grid > .column.row > [class*="fifteen wide large screen"].column,
8293
-
.ui.grid > [class*="fifteen wide large screen"].column,
8294
-
.ui.column.grid > [class*="fifteen wide large screen"].column {
8295
-
width: 93.75% !important;
8296
-
}
8297
-
8298
-
.ui.grid > .row > [class*="sixteen wide large screen"].column,
8299
-
.ui.grid > .column.row > [class*="sixteen wide large screen"].column,
8300
-
.ui.grid > [class*="sixteen wide large screen"].column,
8301
-
.ui.column.grid > [class*="sixteen wide large screen"].column {
8302
-
width: 100% !important;
8303
-
}
8304
-
}
8305
-
8306
-
/* Widescreen Sizing Combinations */
8307
-
8308
-
@media only screen and (min-width: 1920px) {
8309
-
.ui.grid > .row > [class*="one wide widescreen"].column,
8310
-
.ui.grid > .column.row > [class*="one wide widescreen"].column,
8311
-
.ui.grid > [class*="one wide widescreen"].column,
8312
-
.ui.column.grid > [class*="one wide widescreen"].column {
8313
-
width: 6.25% !important;
8314
-
}
8315
-
8316
-
.ui.grid > .row > [class*="two wide widescreen"].column,
8317
-
.ui.grid > .column.row > [class*="two wide widescreen"].column,
8318
-
.ui.grid > [class*="two wide widescreen"].column,
8319
-
.ui.column.grid > [class*="two wide widescreen"].column {
8320
-
width: 12.5% !important;
8321
-
}
8322
-
8323
-
.ui.grid > .row > [class*="three wide widescreen"].column,
8324
-
.ui.grid > .column.row > [class*="three wide widescreen"].column,
8325
-
.ui.grid > [class*="three wide widescreen"].column,
8326
-
.ui.column.grid > [class*="three wide widescreen"].column {
8327
-
width: 18.75% !important;
8328
-
}
8329
-
8330
-
.ui.grid > .row > [class*="four wide widescreen"].column,
8331
-
.ui.grid > .column.row > [class*="four wide widescreen"].column,
8332
-
.ui.grid > [class*="four wide widescreen"].column,
8333
-
.ui.column.grid > [class*="four wide widescreen"].column {
8334
-
width: 25% !important;
8335
-
}
8336
-
8337
-
.ui.grid > .row > [class*="five wide widescreen"].column,
8338
-
.ui.grid > .column.row > [class*="five wide widescreen"].column,
8339
-
.ui.grid > [class*="five wide widescreen"].column,
8340
-
.ui.column.grid > [class*="five wide widescreen"].column {
8341
-
width: 31.25% !important;
8342
-
}
8343
-
8344
-
.ui.grid > .row > [class*="six wide widescreen"].column,
8345
-
.ui.grid > .column.row > [class*="six wide widescreen"].column,
8346
-
.ui.grid > [class*="six wide widescreen"].column,
8347
-
.ui.column.grid > [class*="six wide widescreen"].column {
8348
-
width: 37.5% !important;
8349
-
}
8350
-
8351
-
.ui.grid > .row > [class*="seven wide widescreen"].column,
8352
-
.ui.grid > .column.row > [class*="seven wide widescreen"].column,
8353
-
.ui.grid > [class*="seven wide widescreen"].column,
8354
-
.ui.column.grid > [class*="seven wide widescreen"].column {
8355
-
width: 43.75% !important;
8356
-
}
8357
-
8358
-
.ui.grid > .row > [class*="eight wide widescreen"].column,
8359
-
.ui.grid > .column.row > [class*="eight wide widescreen"].column,
8360
-
.ui.grid > [class*="eight wide widescreen"].column,
8361
-
.ui.column.grid > [class*="eight wide widescreen"].column {
8362
-
width: 50% !important;
8363
-
}
8364
-
8365
-
.ui.grid > .row > [class*="nine wide widescreen"].column,
8366
-
.ui.grid > .column.row > [class*="nine wide widescreen"].column,
8367
-
.ui.grid > [class*="nine wide widescreen"].column,
8368
-
.ui.column.grid > [class*="nine wide widescreen"].column {
8369
-
width: 56.25% !important;
8370
-
}
8371
-
8372
-
.ui.grid > .row > [class*="ten wide widescreen"].column,
8373
-
.ui.grid > .column.row > [class*="ten wide widescreen"].column,
8374
-
.ui.grid > [class*="ten wide widescreen"].column,
8375
-
.ui.column.grid > [class*="ten wide widescreen"].column {
8376
-
width: 62.5% !important;
8377
-
}
8378
-
8379
-
.ui.grid > .row > [class*="eleven wide widescreen"].column,
8380
-
.ui.grid > .column.row > [class*="eleven wide widescreen"].column,
8381
-
.ui.grid > [class*="eleven wide widescreen"].column,
8382
-
.ui.column.grid > [class*="eleven wide widescreen"].column {
8383
-
width: 68.75% !important;
8384
-
}
8385
-
8386
-
.ui.grid > .row > [class*="twelve wide widescreen"].column,
8387
-
.ui.grid > .column.row > [class*="twelve wide widescreen"].column,
8388
-
.ui.grid > [class*="twelve wide widescreen"].column,
8389
-
.ui.column.grid > [class*="twelve wide widescreen"].column {
8390
-
width: 75% !important;
8391
-
}
8392
-
8393
-
.ui.grid > .row > [class*="thirteen wide widescreen"].column,
8394
-
.ui.grid > .column.row > [class*="thirteen wide widescreen"].column,
8395
-
.ui.grid > [class*="thirteen wide widescreen"].column,
8396
-
.ui.column.grid > [class*="thirteen wide widescreen"].column {
8397
-
width: 81.25% !important;
8398
-
}
8399
-
8400
-
.ui.grid > .row > [class*="fourteen wide widescreen"].column,
8401
-
.ui.grid > .column.row > [class*="fourteen wide widescreen"].column,
8402
-
.ui.grid > [class*="fourteen wide widescreen"].column,
8403
-
.ui.column.grid > [class*="fourteen wide widescreen"].column {
8404
-
width: 87.5% !important;
8405
-
}
8406
-
8407
-
.ui.grid > .row > [class*="fifteen wide widescreen"].column,
8408
-
.ui.grid > .column.row > [class*="fifteen wide widescreen"].column,
8409
-
.ui.grid > [class*="fifteen wide widescreen"].column,
8410
-
.ui.column.grid > [class*="fifteen wide widescreen"].column {
8411
-
width: 93.75% !important;
8412
-
}
8413
-
8414
-
.ui.grid > .row > [class*="sixteen wide widescreen"].column,
8415
-
.ui.grid > .column.row > [class*="sixteen wide widescreen"].column,
8416
-
.ui.grid > [class*="sixteen wide widescreen"].column,
8417
-
.ui.column.grid > [class*="sixteen wide widescreen"].column {
8418
-
width: 100% !important;
8419
-
}
8420
-
}
8421
-
8422
-
/*----------------------
8423
-
Centered
8424
-
-----------------------*/
8425
-
8426
-
.ui.centered.grid,
8427
-
.ui.centered.grid > .row,
8428
-
.ui.grid > .centered.row {
8429
-
text-align: center;
8430
-
justify-content: center;
8431
-
}
8432
-
8433
-
.ui.centered.grid > .column:not(.aligned):not(.justified):not(.row),
8434
-
.ui.centered.grid > .row > .column:not(.aligned):not(.justified),
8435
-
.ui.grid .centered.row > .column:not(.aligned):not(.justified) {
8436
-
text-align: left;
8437
-
}
8438
-
8439
-
.ui.grid > .centered.column,
8440
-
.ui.grid > .row > .centered.column {
8441
-
display: block;
8442
-
margin-left: auto;
8443
-
margin-right: auto;
8444
-
}
8445
-
8446
-
/*----------------------
8447
-
Relaxed
8448
-
-----------------------*/
8449
-
8450
-
.ui.relaxed.grid > .column:not(.row),
8451
-
.ui.relaxed.grid > .row > .column,
8452
-
.ui.grid > .relaxed.row > .column {
8453
-
padding-left: 1.5rem;
8454
-
padding-right: 1.5rem;
8455
-
}
8456
-
8457
-
.ui[class*="very relaxed"].grid > .column:not(.row),
8458
-
.ui[class*="very relaxed"].grid > .row > .column,
8459
-
.ui.grid > [class*="very relaxed"].row > .column {
8460
-
padding-left: 2.5rem;
8461
-
padding-right: 2.5rem;
8462
-
}
8463
-
8464
-
/* Coupling with UI Divider */
8465
-
8466
-
.ui.relaxed.grid .row + .ui.divider,
8467
-
.ui.grid .relaxed.row + .ui.divider {
8468
-
margin-left: 1.5rem;
8469
-
margin-right: 1.5rem;
8470
-
}
8471
-
8472
-
.ui[class*="very relaxed"].grid .row + .ui.divider,
8473
-
.ui.grid [class*="very relaxed"].row + .ui.divider {
8474
-
margin-left: 2.5rem;
8475
-
margin-right: 2.5rem;
8476
-
}
8477
-
8478
-
/*----------------------
8479
-
Padded
8480
-
-----------------------*/
8481
-
8482
-
.ui.padded.grid:not(.vertically):not(.horizontally) {
8483
-
margin: 0 !important;
8484
-
}
8485
-
8486
-
[class*="horizontally padded"].ui.grid {
8487
-
margin-left: 0 !important;
8488
-
margin-right: 0 !important;
8489
-
}
8490
-
8491
-
[class*="vertically padded"].ui.grid {
8492
-
margin-top: 0 !important;
8493
-
margin-bottom: 0 !important;
8494
-
}
8495
-
8496
-
/*----------------------
8497
-
"Floated"
8498
-
-----------------------*/
8499
-
8500
-
.ui.grid [class*="left floated"].column {
8501
-
margin-right: auto;
8502
-
}
8503
-
8504
-
.ui.grid [class*="right floated"].column {
8505
-
margin-left: auto;
8506
-
}
8507
-
8508
-
/*----------------------
8509
-
Divided
8510
-
-----------------------*/
8511
-
8512
-
.ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
8513
-
.ui.divided.grid:not([class*="vertically divided"]) > .row > .column {
8514
-
box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
8515
-
}
8516
-
8517
-
/* Swap from padding to margin on columns to have dividers align */
8518
-
8519
-
.ui[class*="vertically divided"].grid > .column:not(.row),
8520
-
.ui[class*="vertically divided"].grid > .row > .column {
8521
-
margin-top: 1rem;
8522
-
margin-bottom: 1rem;
8523
-
padding-top: 0;
8524
-
padding-bottom: 0;
8525
-
}
8526
-
8527
-
.ui[class*="vertically divided"].grid > .row {
8528
-
margin-top: 0;
8529
-
margin-bottom: 0;
8530
-
}
8531
-
8532
-
/* No divider on first column on row */
8533
-
8534
-
.ui.divided.grid:not([class*="vertically divided"]) > .column:first-child,
8535
-
.ui.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
8536
-
box-shadow: none;
8537
-
}
8538
-
8539
-
/* No space on top of first row */
8540
-
8541
-
.ui[class*="vertically divided"].grid > .row:first-child > .column {
8542
-
margin-top: 0;
8543
-
}
8544
-
8545
-
/* Divided Row */
8546
-
8547
-
.ui.grid > .divided.row > .column {
8548
-
box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
8549
-
}
8550
-
8551
-
.ui.grid > .divided.row > .column:first-child {
8552
-
box-shadow: none;
8553
-
}
8554
-
8555
-
/* Vertically Divided */
8556
-
8557
-
.ui[class*="vertically divided"].grid > .row {
8558
-
position: relative;
8559
-
}
8560
-
8561
-
.ui[class*="vertically divided"].grid > .row:before {
8562
-
position: absolute;
8563
-
content: "";
8564
-
top: 0;
8565
-
left: 0;
8566
-
width: calc(100% - 2rem);
8567
-
height: 1px;
8568
-
margin: 0 1rem;
8569
-
box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
8570
-
}
8571
-
8572
-
/* Padded Horizontally Divided */
8573
-
8574
-
[class*="horizontally padded"].ui.divided.grid,
8575
-
.ui.padded.divided.grid:not(.vertically):not(.horizontally) {
8576
-
width: 100%;
8577
-
}
8578
-
8579
-
/* First Row Vertically Divided */
8580
-
8581
-
.ui[class*="vertically divided"].grid > .row:first-child:before {
8582
-
box-shadow: none;
8583
-
}
8584
-
8585
-
/* Relaxed */
8586
-
8587
-
.ui.relaxed[class*="vertically divided"].grid > .row:before {
8588
-
margin-left: 1.5rem;
8589
-
margin-right: 1.5rem;
8590
-
width: calc(100% - 3rem);
8591
-
}
8592
-
8593
-
.ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before {
8594
-
margin-left: 2.5rem;
8595
-
margin-right: 2.5rem;
8596
-
width: calc(100% - 5rem);
8597
-
}
8598
-
8599
-
/*----------------------
8600
-
Celled
8601
-
-----------------------*/
8602
-
8603
-
.ui.celled.grid {
8604
-
width: 100%;
8605
-
margin: 1em 0;
8606
-
box-shadow: 0 0 0 1px #D4D4D5;
8607
-
}
8608
-
8609
-
.ui.celled.grid > .row {
8610
-
width: 100% !important;
8611
-
margin: 0;
8612
-
padding: 0;
8613
-
box-shadow: 0 -1px 0 0 #D4D4D5;
8614
-
}
8615
-
8616
-
.ui.celled.grid > .column:not(.row),
8617
-
.ui.celled.grid > .row > .column {
8618
-
box-shadow: -1px 0 0 0 #D4D4D5;
8619
-
}
8620
-
8621
-
.ui.celled.grid > .column:first-child,
8622
-
.ui.celled.grid > .row > .column:first-child {
8623
-
box-shadow: none;
8624
-
}
8625
-
8626
-
.ui.celled.grid > .column:not(.row),
8627
-
.ui.celled.grid > .row > .column {
8628
-
padding: 1em;
8629
-
}
8630
-
8631
-
.ui.relaxed.celled.grid > .column:not(.row),
8632
-
.ui.relaxed.celled.grid > .row > .column {
8633
-
padding: 1.5em;
8634
-
}
8635
-
8636
-
.ui[class*="very relaxed"].celled.grid > .column:not(.row),
8637
-
.ui[class*="very relaxed"].celled.grid > .row > .column {
8638
-
padding: 2em;
8639
-
}
8640
-
8641
-
/* Internally Celled */
8642
-
8643
-
.ui[class*="internally celled"].grid {
8644
-
box-shadow: none;
8645
-
margin: 0;
8646
-
}
8647
-
8648
-
.ui[class*="internally celled"].grid > .row:first-child {
8649
-
box-shadow: none;
8650
-
}
8651
-
8652
-
.ui[class*="internally celled"].grid > .row > .column:first-child {
8653
-
box-shadow: none;
8654
-
}
8655
-
8656
-
/*----------------------
8657
-
Vertically Aligned
8658
-
-----------------------*/
8659
-
8660
-
/* Top Aligned */
8661
-
8662
-
.ui[class*="top aligned"].grid > .column:not(.row),
8663
-
.ui[class*="top aligned"].grid > .row > .column,
8664
-
.ui.grid > [class*="top aligned"].row > .column,
8665
-
.ui.grid > [class*="top aligned"].column:not(.row),
8666
-
.ui.grid > .row > [class*="top aligned"].column {
8667
-
flex-direction: column;
8668
-
vertical-align: top;
8669
-
align-self: flex-start !important;
8670
-
}
8671
-
8672
-
/* Middle Aligned */
8673
-
8674
-
.ui[class*="middle aligned"].grid > .column:not(.row),
8675
-
.ui[class*="middle aligned"].grid > .row > .column,
8676
-
.ui.grid > [class*="middle aligned"].row > .column,
8677
-
.ui.grid > [class*="middle aligned"].column:not(.row),
8678
-
.ui.grid > .row > [class*="middle aligned"].column {
8679
-
flex-direction: column;
8680
-
vertical-align: middle;
8681
-
align-self: center !important;
8682
-
}
8683
-
8684
-
/* Bottom Aligned */
8685
-
8686
-
.ui[class*="bottom aligned"].grid > .column:not(.row),
8687
-
.ui[class*="bottom aligned"].grid > .row > .column,
8688
-
.ui.grid > [class*="bottom aligned"].row > .column,
8689
-
.ui.grid > [class*="bottom aligned"].column:not(.row),
8690
-
.ui.grid > .row > [class*="bottom aligned"].column {
8691
-
flex-direction: column;
8692
-
vertical-align: bottom;
8693
-
align-self: flex-end !important;
8694
-
}
8695
-
8696
-
/* Stretched */
8697
-
8698
-
.ui.stretched.grid > .row > .column,
8699
-
.ui.stretched.grid > .column,
8700
-
.ui.grid > .stretched.row > .column,
8701
-
.ui.grid > .stretched.column:not(.row),
8702
-
.ui.grid > .row > .stretched.column {
8703
-
display: inline-flex !important;
8704
-
align-self: stretch;
8705
-
flex-direction: column;
8706
-
}
8707
-
8708
-
.ui.stretched.grid > .row > .column > *,
8709
-
.ui.stretched.grid > .column > *,
8710
-
.ui.grid > .stretched.row > .column > *,
8711
-
.ui.grid > .stretched.column:not(.row) > *,
8712
-
.ui.grid > .row > .stretched.column > * {
8713
-
flex-grow: 1;
8714
-
}
8715
-
8716
-
/*----------------------
8717
-
Horizontally Centered
8718
-
-----------------------*/
8719
-
8720
-
/* Left Aligned */
8721
-
8722
-
.ui[class*="left aligned"].grid > .column,
8723
-
.ui[class*="left aligned"].grid > .row > .column,
8724
-
.ui.grid > [class*="left aligned"].row > .column,
8725
-
.ui.grid > [class*="left aligned"].column.column,
8726
-
.ui.grid > .row > [class*="left aligned"].column.column {
8727
-
text-align: left;
8728
-
align-self: inherit;
8729
-
}
8730
-
8731
-
/* Center Aligned */
8732
-
8733
-
.ui[class*="center aligned"].grid > .column,
8734
-
.ui[class*="center aligned"].grid > .row > .column,
8735
-
.ui.grid > [class*="center aligned"].row > .column,
8736
-
.ui.grid > [class*="center aligned"].column.column,
8737
-
.ui.grid > .row > [class*="center aligned"].column.column {
8738
-
text-align: center;
8739
-
align-self: inherit;
8740
-
}
8741
-
8742
-
.ui[class*="center aligned"].grid {
8743
-
justify-content: center;
8744
-
}
8745
-
8746
-
/* Right Aligned */
8747
-
8748
-
.ui[class*="right aligned"].grid > .column,
8749
-
.ui[class*="right aligned"].grid > .row > .column,
8750
-
.ui.grid > [class*="right aligned"].row > .column,
8751
-
.ui.grid > [class*="right aligned"].column.column,
8752
-
.ui.grid > .row > [class*="right aligned"].column.column {
8753
-
text-align: right;
8754
-
align-self: inherit;
8755
-
}
8756
-
8757
-
/* Justified */
8758
-
8759
-
.ui.justified.grid > .column,
8760
-
.ui.justified.grid > .row > .column,
8761
-
.ui.grid > .justified.row > .column,
8762
-
.ui.grid > .justified.column.column,
8763
-
.ui.grid > .row > .justified.column.column {
8764
-
text-align: justify;
8765
-
-webkit-hyphens: auto;
8766
-
hyphens: auto;
8767
-
}
8768
-
8769
-
/*----------------------
8770
-
Colored
8771
-
-----------------------*/
8772
-
8773
-
.ui.grid > .primary.row,
8774
-
.ui.grid > .primary.column,
8775
-
.ui.grid > .row > .primary.column {
8776
-
background-color: #2185D0;
8777
-
color: #FFFFFF;
8778
-
}
8779
-
8780
-
.ui.grid > .secondary.row,
8781
-
.ui.grid > .secondary.column,
8782
-
.ui.grid > .row > .secondary.column {
8783
-
background-color: #1B1C1D;
8784
-
color: #FFFFFF;
8785
-
}
8786
-
8787
-
.ui.grid > .red.row,
8788
-
.ui.grid > .red.column,
8789
-
.ui.grid > .row > .red.column {
8790
-
background-color: #DB2828;
8791
-
color: #FFFFFF;
8792
-
}
8793
-
8794
-
.ui.grid > .orange.row,
8795
-
.ui.grid > .orange.column,
8796
-
.ui.grid > .row > .orange.column {
8797
-
background-color: #F2711C;
8798
-
color: #FFFFFF;
8799
-
}
8800
-
8801
-
.ui.grid > .yellow.row,
8802
-
.ui.grid > .yellow.column,
8803
-
.ui.grid > .row > .yellow.column {
8804
-
background-color: #FBBD08;
8805
-
color: #FFFFFF;
8806
-
}
8807
-
8808
-
.ui.grid > .olive.row,
8809
-
.ui.grid > .olive.column,
8810
-
.ui.grid > .row > .olive.column {
8811
-
background-color: #B5CC18;
8812
-
color: #FFFFFF;
8813
-
}
8814
-
8815
-
.ui.grid > .green.row,
8816
-
.ui.grid > .green.column,
8817
-
.ui.grid > .row > .green.column {
8818
-
background-color: #21BA45;
8819
-
color: #FFFFFF;
8820
-
}
8821
-
8822
-
.ui.grid > .teal.row,
8823
-
.ui.grid > .teal.column,
8824
-
.ui.grid > .row > .teal.column {
8825
-
background-color: #00B5AD;
8826
-
color: #FFFFFF;
8827
-
}
8828
-
8829
-
.ui.grid > .blue.row,
8830
-
.ui.grid > .blue.column,
8831
-
.ui.grid > .row > .blue.column {
8832
-
background-color: #2185D0;
8833
-
color: #FFFFFF;
8834
-
}
8835
-
8836
-
.ui.grid > .violet.row,
8837
-
.ui.grid > .violet.column,
8838
-
.ui.grid > .row > .violet.column {
8839
-
background-color: #6435C9;
8840
-
color: #FFFFFF;
8841
-
}
8842
-
8843
-
.ui.grid > .purple.row,
8844
-
.ui.grid > .purple.column,
8845
-
.ui.grid > .row > .purple.column {
8846
-
background-color: #A333C8;
8847
-
color: #FFFFFF;
8848
-
}
8849
-
8850
-
.ui.grid > .pink.row,
8851
-
.ui.grid > .pink.column,
8852
-
.ui.grid > .row > .pink.column {
8853
-
background-color: #E03997;
8854
-
color: #FFFFFF;
8855
-
}
8856
-
8857
-
.ui.grid > .brown.row,
8858
-
.ui.grid > .brown.column,
8859
-
.ui.grid > .row > .brown.column {
8860
-
background-color: #A5673F;
8861
-
color: #FFFFFF;
8862
-
}
8863
-
8864
-
.ui.grid > .grey.row,
8865
-
.ui.grid > .grey.column,
8866
-
.ui.grid > .row > .grey.column {
8867
-
background-color: #767676;
8868
-
color: #FFFFFF;
8869
-
}
8870
-
8871
-
.ui.grid > .black.row,
8872
-
.ui.grid > .black.column,
8873
-
.ui.grid > .row > .black.column {
8874
-
background-color: #1B1C1D;
8875
-
color: #FFFFFF;
8876
-
}
8877
-
8878
-
/*----------------------
8879
-
Equal Width
8880
-
-----------------------*/
8881
-
8882
-
.ui[class*="equal width"].grid > .column:not(.row),
8883
-
.ui[class*="equal width"].grid > .row > .column,
8884
-
.ui.grid > [class*="equal width"].row > .column {
8885
-
display: inline-block;
8886
-
flex-grow: 1;
8887
-
}
8888
-
8889
-
.ui[class*="equal width"].grid > .wide.column,
8890
-
.ui[class*="equal width"].grid > .row > .wide.column,
8891
-
.ui.grid > [class*="equal width"].row > .wide.column {
8892
-
flex-grow: 0;
8893
-
}
8894
-
8895
-
/*----------------------
8896
-
Reverse
8897
-
-----------------------*/
8898
-
8899
-
/* Mobile */
8900
-
8901
-
@media only screen and (max-width: 767.98px) {
8902
-
.ui[class*="mobile reversed"].grid,
8903
-
.ui[class*="mobile reversed"].grid > .row,
8904
-
.ui.grid > [class*="mobile reversed"].row {
8905
-
flex-direction: row-reverse;
8906
-
}
8907
-
8908
-
.ui[class*="mobile vertically reversed"].grid,
8909
-
.ui.stackable[class*="mobile reversed"] {
8910
-
flex-direction: column-reverse;
8911
-
}
8912
-
8913
-
/* Divided Reversed */
8914
-
8915
-
.ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
8916
-
.ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
8917
-
box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
8918
-
}
8919
-
8920
-
.ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
8921
-
.ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
8922
-
box-shadow: none;
8923
-
}
8924
-
8925
-
/* Vertically Divided Reversed */
8926
-
8927
-
.ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before {
8928
-
box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
8929
-
}
8930
-
8931
-
.ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child:before {
8932
-
box-shadow: none;
8933
-
}
8934
-
8935
-
/* Celled Reversed */
8936
-
8937
-
.ui[class*="mobile reversed"].celled.grid > .row > .column:first-child {
8938
-
box-shadow: -1px 0 0 0 #D4D4D5;
8939
-
}
8940
-
8941
-
.ui[class*="mobile reversed"].celled.grid > .row > .column:last-child {
8942
-
box-shadow: none;
8943
-
}
8944
-
}
8945
-
8946
-
/* Tablet */
8947
-
8948
-
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
8949
-
.ui[class*="tablet reversed"].grid,
8950
-
.ui[class*="tablet reversed"].grid > .row,
8951
-
.ui.grid > [class*="tablet reversed"].row {
8952
-
flex-direction: row-reverse;
8953
-
}
8954
-
8955
-
.ui[class*="tablet vertically reversed"].grid {
8956
-
flex-direction: column-reverse;
8957
-
}
8958
-
8959
-
/* Divided Reversed */
8960
-
8961
-
.ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
8962
-
.ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
8963
-
box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
8964
-
}
8965
-
8966
-
.ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
8967
-
.ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
8968
-
box-shadow: none;
8969
-
}
8970
-
8971
-
/* Vertically Divided Reversed */
8972
-
8973
-
.ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before {
8974
-
box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
8975
-
}
8976
-
8977
-
.ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child:before {
8978
-
box-shadow: none;
8979
-
}
8980
-
8981
-
/* Celled Reversed */
8982
-
8983
-
.ui[class*="tablet reversed"].celled.grid > .row > .column:first-child {
8984
-
box-shadow: -1px 0 0 0 #D4D4D5;
8985
-
}
8986
-
8987
-
.ui[class*="tablet reversed"].celled.grid > .row > .column:last-child {
8988
-
box-shadow: none;
8989
-
}
8990
-
}
8991
-
8992
-
/* Computer */
8993
-
8994
-
@media only screen and (min-width: 992px) {
8995
-
.ui[class*="computer reversed"].grid,
8996
-
.ui[class*="computer reversed"].grid > .row,
8997
-
.ui.grid > [class*="computer reversed"].row {
8998
-
flex-direction: row-reverse;
8999
-
}
9000
-
9001
-
.ui[class*="computer vertically reversed"].grid {
9002
-
flex-direction: column-reverse;
9003
-
}
9004
-
9005
-
/* Divided Reversed */
9006
-
9007
-
.ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
9008
-
.ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
9009
-
box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
9010
-
}
9011
-
9012
-
.ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
9013
-
.ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
9014
-
box-shadow: none;
9015
-
}
9016
-
9017
-
/* Vertically Divided Reversed */
9018
-
9019
-
.ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before {
9020
-
box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
9021
-
}
9022
-
9023
-
.ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before {
9024
-
box-shadow: none;
9025
-
}
9026
-
9027
-
/* Celled Reversed */
9028
-
9029
-
.ui[class*="computer reversed"].celled.grid > .row > .column:first-child {
9030
-
box-shadow: -1px 0 0 0 #D4D4D5;
9031
-
}
9032
-
9033
-
.ui[class*="computer reversed"].celled.grid > .row > .column:last-child {
9034
-
box-shadow: none;
9035
-
}
9036
-
}
9037
-
9038
-
/*-------------------
9039
-
Stackable
9040
-
--------------------*/
9041
-
9042
-
@media only screen and (max-width: 767.98px) {
9043
-
.ui.stackable.grid {
9044
-
width: auto;
9045
-
margin-left: 0 !important;
9046
-
margin-right: 0 !important;
9047
-
}
9048
-
9049
-
.ui.stackable.grid > .row > .wide.column,
9050
-
.ui.stackable.grid > .wide.column,
9051
-
.ui.stackable.grid > .column.grid > .column,
9052
-
.ui.stackable.grid > .column.row > .column,
9053
-
.ui.stackable.grid > .row > .column,
9054
-
.ui.stackable.grid > .column:not(.row),
9055
-
.ui.grid > .stackable.stackable.stackable.row > .column {
9056
-
width: 100% !important;
9057
-
margin: 0 0 !important;
9058
-
box-shadow: none !important;
9059
-
padding: 1rem 1rem;
9060
-
}
9061
-
9062
-
.ui.stackable.grid:not(.vertically) > .row {
9063
-
margin: 0;
9064
-
padding: 0;
9065
-
}
9066
-
9067
-
/* Coupling */
9068
-
9069
-
.ui.container > .ui.stackable.grid > .column,
9070
-
.ui.container > .ui.stackable.grid > .row > .column {
9071
-
padding-left: 0 !important;
9072
-
padding-right: 0 !important;
9073
-
}
9074
-
9075
-
/* Don't pad inside segment or nested grid */
9076
-
9077
-
.ui.grid .ui.stackable.grid,
9078
-
.ui.segment:not(.vertical) .ui.stackable.page.grid {
9079
-
margin-left: -1rem !important;
9080
-
margin-right: -1rem !important;
9081
-
}
9082
-
9083
-
/* Divided Stackable */
9084
-
9085
-
.ui.stackable.divided.grid > .row:first-child > .column:first-child,
9086
-
.ui.stackable.celled.grid > .row:first-child > .column:first-child,
9087
-
.ui.stackable.divided.grid > .column:not(.row):first-child,
9088
-
.ui.stackable.celled.grid > .column:not(.row):first-child {
9089
-
border-top: none !important;
9090
-
}
9091
-
9092
-
.ui.stackable.celled.grid > .column:not(.row),
9093
-
.ui.stackable.divided:not(.vertically).grid > .column:not(.row),
9094
-
.ui.stackable.celled.grid > .row > .column,
9095
-
.ui.stackable.divided:not(.vertically).grid > .row > .column {
9096
-
border-top: 1px solid rgba(34, 36, 38, 0.15);
9097
-
box-shadow: none !important;
9098
-
padding-top: 2rem !important;
9099
-
padding-bottom: 2rem !important;
9100
-
}
9101
-
9102
-
.ui.stackable.celled.grid > .row {
9103
-
box-shadow: none !important;
9104
-
}
9105
-
9106
-
.ui.stackable.divided:not(.vertically).grid > .column:not(.row),
9107
-
.ui.stackable.divided:not(.vertically).grid > .row > .column {
9108
-
padding-left: 0 !important;
9109
-
padding-right: 0 !important;
9110
-
}
9111
-
}
9112
-
9113
-
/*----------------------
9114
-
Only (Device)
9115
-
-----------------------*/
9116
-
9117
-
/* These include arbitrary class repetitions for forced specificity */
9118
-
9119
-
/* Mobile Only Hide */
9120
-
9121
-
@media only screen and (max-width: 767.98px) {
9122
-
.ui[class*="tablet only"].grid.grid.grid:not(.mobile),
9123
-
.ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile),
9124
-
.ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile),
9125
-
.ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile) {
9126
-
display: none !important;
9127
-
}
9128
-
9129
-
.ui[class*="computer only"].grid.grid.grid:not(.mobile),
9130
-
.ui.grid.grid.grid > [class*="computer only"].row:not(.mobile),
9131
-
.ui.grid.grid.grid > [class*="computer only"].column:not(.mobile),
9132
-
.ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) {
9133
-
display: none !important;
9134
-
}
9135
-
9136
-
.ui[class*="large screen only"].grid.grid.grid:not(.mobile),
9137
-
.ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
9138
-
.ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
9139
-
.ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
9140
-
display: none !important;
9141
-
}
9142
-
9143
-
.ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
9144
-
.ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
9145
-
.ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
9146
-
.ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
9147
-
display: none !important;
9148
-
}
9149
-
}
9150
-
9151
-
/* Tablet Only Hide */
9152
-
9153
-
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
9154
-
.ui[class*="mobile only"].grid.grid.grid:not(.tablet),
9155
-
.ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet),
9156
-
.ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet),
9157
-
.ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) {
9158
-
display: none !important;
9159
-
}
9160
-
9161
-
.ui[class*="computer only"].grid.grid.grid:not(.tablet),
9162
-
.ui.grid.grid.grid > [class*="computer only"].row:not(.tablet),
9163
-
.ui.grid.grid.grid > [class*="computer only"].column:not(.tablet),
9164
-
.ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) {
9165
-
display: none !important;
9166
-
}
9167
-
9168
-
.ui[class*="large screen only"].grid.grid.grid:not(.mobile),
9169
-
.ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
9170
-
.ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
9171
-
.ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
9172
-
display: none !important;
9173
-
}
9174
-
9175
-
.ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
9176
-
.ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
9177
-
.ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
9178
-
.ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
9179
-
display: none !important;
9180
-
}
9181
-
}
9182
-
9183
-
/* Computer Only Hide */
9184
-
9185
-
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
9186
-
.ui[class*="mobile only"].grid.grid.grid:not(.computer),
9187
-
.ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
9188
-
.ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
9189
-
.ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
9190
-
display: none !important;
9191
-
}
9192
-
9193
-
.ui[class*="tablet only"].grid.grid.grid:not(.computer),
9194
-
.ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
9195
-
.ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
9196
-
.ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
9197
-
display: none !important;
9198
-
}
9199
-
9200
-
.ui[class*="large screen only"].grid.grid.grid:not(.mobile),
9201
-
.ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
9202
-
.ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
9203
-
.ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
9204
-
display: none !important;
9205
-
}
9206
-
9207
-
.ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
9208
-
.ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
9209
-
.ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
9210
-
.ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
9211
-
display: none !important;
9212
-
}
9213
-
}
9214
-
9215
-
/* Large Screen Only Hide */
9216
-
9217
-
@media only screen and (min-width: 1200px) and (max-width: 1919.98px) {
9218
-
.ui[class*="mobile only"].grid.grid.grid:not(.computer),
9219
-
.ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
9220
-
.ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
9221
-
.ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
9222
-
display: none !important;
9223
-
}
9224
-
9225
-
.ui[class*="tablet only"].grid.grid.grid:not(.computer),
9226
-
.ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
9227
-
.ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
9228
-
.ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
9229
-
display: none !important;
9230
-
}
9231
-
9232
-
.ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
9233
-
.ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
9234
-
.ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
9235
-
.ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
9236
-
display: none !important;
9237
-
}
9238
-
}
9239
-
9240
-
/* Widescreen Only Hide */
9241
-
9242
-
@media only screen and (min-width: 1920px) {
9243
-
.ui[class*="mobile only"].grid.grid.grid:not(.computer),
9244
-
.ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
9245
-
.ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
9246
-
.ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
9247
-
display: none !important;
9248
-
}
9249
-
9250
-
.ui[class*="tablet only"].grid.grid.grid:not(.computer),
9251
-
.ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
9252
-
.ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
9253
-
.ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
9254
-
display: none !important;
9255
-
}
9256
-
}
9257
-
9258
-
/*-----------------
9259
-
Compact
9260
-
-----------------*/
9261
-
9262
-
.ui.ui.ui.compact.grid > .column:not(.row),
9263
-
.ui.ui.ui.compact.grid > .row > .column {
9264
-
padding-left: 0.5rem;
9265
-
padding-right: 0.5rem;
9266
-
}
9267
-
9268
-
.ui.ui.ui.compact.grid > * {
9269
-
padding-left: 0.5rem;
9270
-
padding-right: 0.5rem;
9271
-
}
9272
-
9273
-
/* Row */
9274
-
9275
-
.ui.ui.ui.compact.grid > .row {
9276
-
padding-top: 0.5rem;
9277
-
padding-bottom: 0.5rem;
9278
-
}
9279
-
9280
-
/* Columns */
9281
-
9282
-
.ui.ui.ui.compact.grid > .column:not(.row) {
9283
-
padding-top: 0.5rem;
9284
-
padding-bottom: 0.5rem;
9285
-
}
9286
-
9287
-
/* Relaxed + Celled */
9288
-
9289
-
.ui.compact.relaxed.celled.grid > .column:not(.row),
9290
-
.ui.compact.relaxed.celled.grid > .row > .column {
9291
-
padding: 0.75em;
9292
-
}
9293
-
9294
-
.ui.compact[class*="very relaxed"].celled.grid > .column:not(.row),
9295
-
.ui.compact[class*="very relaxed"].celled.grid > .row > .column {
9296
-
padding: 1em;
9297
-
}
9298
-
9299
-
/*-----------------
9300
-
Very compact
9301
-
-----------------*/
9302
-
9303
-
.ui.ui.ui[class*="very compact"].grid > .column:not(.row),
9304
-
.ui.ui.ui[class*="very compact"].grid > .row > .column {
9305
-
padding-left: 0.25rem;
9306
-
padding-right: 0.25rem;
9307
-
}
9308
-
9309
-
.ui.ui.ui[class*="very compact"].grid > * {
9310
-
padding-left: 0.25rem;
9311
-
padding-right: 0.25rem;
9312
-
}
9313
-
9314
-
/* Row */
9315
-
9316
-
.ui.ui.ui[class*="very compact"].grid > .row {
9317
-
padding-top: 0.25rem;
9318
-
padding-bottom: 0.25rem;
9319
-
padding-left: 0.75rem;
9320
-
padding-right: 0.75rem;
9321
-
}
9322
-
9323
-
/* Columns */
9324
-
9325
-
.ui.ui.ui[class*="very compact"].grid > .column:not(.row) {
9326
-
padding-top: 0.25rem;
9327
-
padding-bottom: 0.25rem;
9328
-
}
9329
-
9330
-
/* Relaxed + Celled */
9331
-
9332
-
.ui[class*="very compact"].relaxed.celled.grid > .column:not(.row),
9333
-
.ui[class*="very compact"].relaxed.celled.grid > .row > .column {
9334
-
padding: 0.375em;
9335
-
}
9336
-
9337
-
.ui[class*="very compact"][class*="very relaxed"].celled.grid > .column:not(.row),
9338
-
.ui[class*="very compact"][class*="very relaxed"].celled.grid > .row > .column {
9339
-
padding: 0.5em;
9340
-
}
9341
-
9342
-
/*******************************
9343
-
Theme Overrides
9344
-
*******************************/
9345
-
9346
-
/*******************************
9347
-
Site Overrides
9348
-
*******************************/
9349
-
/*!
9350
7347
* # Fomantic-UI - Header
9351
7348
* http://github.com/fomantic/Fomantic-UI/
9352
7349
*