loading up the forgejo repo on tangled to test page performance
Remove fomantic label module (#30081)
Of note is the CSS has references to "floating label" and "transparent
label" but I could not find those anywhere in the code. They are related
to https://github.com/go-gitea/gitea/pull/3939, but I think these have
long been removed.
---------
Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 643e6b09587a89dba1f6b58ae21e5d0e7cfd9776)
Conflicts:
web_src/css/base.css
trivial context conflict
authored by
silverwind
delvh
Giteabot
and committed by
Earl Warren
8bc4c1c9
b4e97d68
+296
-1331
+1
-199
web_src/css/base.css
+1
-199
web_src/css/base.css
···
846
846
font-weight: var(--font-weight-normal);
847
847
}
848
848
849
-
.ui.floating.label {
850
-
z-index: 10;
851
-
}
852
-
853
-
.ui.transparent.label {
854
-
background-color: transparent;
855
-
}
856
-
857
849
/* replace fomantic popover box shadows */
858
850
.ui.dropdown .menu,
859
851
.ui.upward.dropdown > .menu,
···
886
878
887
879
.ui.menu .ui.dropdown.item .menu .item {
888
880
width: 100%;
889
-
}
890
-
891
-
.ui.dropdown .menu > .item > .floating.label {
892
-
z-index: 11;
893
-
}
894
-
895
-
.ui.dropdown .menu .menu > .item > .floating.label {
896
-
z-index: 21;
897
881
}
898
882
899
883
.ui.dropdown .menu > .header {
···
1225
1209
margin-top: 1px;
1226
1210
}
1227
1211
1228
-
.ui.label {
1229
-
padding: 0.3em 0.5em;
1230
-
transition: none;
1231
-
white-space: nowrap;
1232
-
}
1233
-
1234
-
.ui.label,
1235
-
.ui.menu .item > .label,
1236
-
.ui.grey.labels .label,
1237
-
.ui.ui.ui.grey.label {
1212
+
.ui.menu .item > .label {
1238
1213
background: var(--color-label-bg);
1239
-
color: var(--color-label-text);
1240
-
}
1241
-
1242
-
.ui.label > a {
1243
-
opacity: .75; /* increase contrast over default fomantic .5 */
1244
-
}
1245
-
1246
-
.ui.active.label {
1247
-
background: var(--color-label-active-bg);
1248
-
border-color: var(--color-label-active-bg);
1249
-
color: var(--color-label-text);
1250
-
}
1251
-
1252
-
.ui.labels a.label:hover,
1253
-
a.ui.label:hover {
1254
-
background: var(--color-label-hover-bg);
1255
-
border-color: var(--color-label-hover-bg);
1256
-
color: var(--color-label-text);
1257
-
}
1258
-
1259
-
.ui.labels a.active.label:hover,
1260
-
a.ui.active.label:hover {
1261
-
background: var(--color-label-active-bg);
1262
-
border-color: var(--color-label-active-bg);
1263
1214
color: var(--color-label-text);
1264
1215
}
1265
1216
···
1428
1379
width: 100%;
1429
1380
}
1430
1381
1431
-
.ui.primary.label,
1432
-
.ui.primary.labels .label,
1433
-
.ui.ui.ui.primary.label {
1434
-
background-color: var(--color-primary);
1435
-
border-color: var(--color-primary-dark-2);
1436
-
}
1437
-
1438
-
.ui.basic.labels .primary.label,
1439
-
.ui.ui.ui.basic.primary.label {
1440
-
background: transparent;
1441
-
border-color: var(--color-primary);
1442
-
color: var(--color-primary);
1443
-
}
1444
-
1445
-
.ui.basic.labels a.primary.label:hover,
1446
-
a.ui.ui.ui.basic.primary.label:hover {
1447
-
background: var(--color-hover);
1448
-
border-color: var(--color-primary-dark-1);
1449
-
color: var(--color-primary-dark-1);
1450
-
}
1451
-
1452
-
.ui.basic.labels .secondary.label,
1453
-
.ui.ui.ui.basic.secondary.label {
1454
-
background: transparent;
1455
-
border-color: var(--color-secondary);
1456
-
color: var(--color-secondary);
1457
-
}
1458
-
1459
-
.ui.basic.labels .orange.label,
1460
-
.ui.ui.ui.basic.orange.label {
1461
-
background: transparent;
1462
-
border-color: var(--color-orange);
1463
-
color: var(--color-orange);
1464
-
}
1465
-
1466
-
.ui.basic.labels .green.label,
1467
-
.ui.ui.ui.basic.green.label {
1468
-
background: transparent;
1469
-
border-color: var(--color-green);
1470
-
color: var(--color-green);
1471
-
}
1472
-
1473
-
.ui.basic.labels .olive.label,
1474
-
.ui.ui.ui.basic.olive.label {
1475
-
background: transparent;
1476
-
border-color: var(--color-olive);
1477
-
color: var(--color-olive);
1478
-
}
1479
-
1480
-
.ui.basic.labels .teal.label,
1481
-
.ui.ui.ui.basic.teal.label {
1482
-
background: transparent;
1483
-
border-color: var(--color-teal);
1484
-
color: var(--color-teal);
1485
-
}
1486
-
1487
-
.ui.basic.labels .blue.label,
1488
-
.ui.ui.ui.basic.blue.label {
1489
-
background: transparent;
1490
-
border-color: var(--color-blue);
1491
-
color: var(--color-blue);
1492
-
}
1493
-
1494
-
.ui.basic.labels .violet.label,
1495
-
.ui.ui.ui.basic.violet.label {
1496
-
background: transparent;
1497
-
border-color: var(--color-violet);
1498
-
color: var(--color-violet);
1499
-
}
1500
-
1501
-
.ui.basic.labels .purple.label,
1502
-
.ui.ui.ui.basic.purple.label {
1503
-
background: transparent;
1504
-
border-color: var(--color-purple);
1505
-
color: var(--color-purple);
1506
-
}
1507
-
1508
-
.ui.basic.labels .pink.label,
1509
-
.ui.ui.ui.basic.pink.label {
1510
-
background: transparent;
1511
-
border-color: var(--color-pink);
1512
-
color: var(--color-pink);
1513
-
}
1514
-
1515
-
.ui.basic.labels .red.label,
1516
-
.ui.ui.ui.basic.red.label {
1517
-
background: transparent;
1518
-
border-color: var(--color-red);
1519
-
color: var(--color-red);
1520
-
}
1521
-
1522
-
.ui.basic.labels .brown.label,
1523
-
.ui.ui.ui.basic.brown.label {
1524
-
background: transparent;
1525
-
border-color: var(--color-brown);
1526
-
color: var(--color-brown);
1527
-
}
1528
-
1529
-
.ui.basic.labels .yellow.label,
1530
-
.ui.ui.ui.basic.yellow.label {
1531
-
background: transparent;
1532
-
border-color: var(--color-yellow);
1533
-
color: var(--color-yellow);
1534
-
}
1535
-
1536
-
.ui.basic.labels .grey.label,
1537
-
.ui.ui.ui.basic.grey.label {
1538
-
background: transparent;
1539
-
border-color: var(--color-grey);
1540
-
color: var(--color-grey);
1541
-
}
1542
-
1543
-
.ui.basic.labels .black.label,
1544
-
.ui.ui.ui.basic.black.label {
1545
-
background: transparent;
1546
-
border-color: var(--color-black);
1547
-
color: var(--color-black);
1548
-
}
1549
-
1550
-
.ui.basic.labels .label,
1551
-
.ui.basic.label,
1552
-
.ui.secondary.labels .ui.basic.label {
1553
-
background: var(--color-button);
1554
-
border-color: var(--color-light-border);
1555
-
color: var(--color-text-light);
1556
-
}
1557
-
1558
-
.ui.basic.labels a.label:hover,
1559
-
a.ui.basic.label:hover {
1560
-
color: var(--color-text);
1561
-
border-color: var(--color-light-border);
1562
-
background: var(--color-hover);
1563
-
}
1564
-
1565
-
.ui.label > img {
1566
-
width: auto !important;
1567
-
vertical-align: middle;
1568
-
height: 2.1666em !important;
1569
-
}
1570
-
1571
1382
.migrate .svg.gitea-git {
1572
1383
color: var(--color-git);
1573
1384
}
···
1577
1388
border-radius: var(--border-radius-circle);
1578
1389
height: 14px;
1579
1390
width: 14px;
1580
-
}
1581
-
1582
-
.ui.label > .color-icon {
1583
-
margin-left: 0;
1584
1391
}
1585
1392
1586
1393
.rss-icon {
···
1780
1587
.btn,
1781
1588
.ui.ui.button,
1782
1589
.ui.ui.dropdown,
1783
-
.ui.ui.label,
1784
1590
.flex-items-inline > .item,
1785
1591
.flex-text-inline {
1786
1592
display: inline-flex;
···
1795
1601
1796
1602
.ui.dropdown .ui.label .svg {
1797
1603
vertical-align: middle;
1798
-
}
1799
-
1800
-
.ui.ui.circular.label {
1801
-
justify-content: center;
1802
1604
}
1803
1605
1804
1606
.ui.ui.labeled.button {
-17
web_src/css/dashboard.css
-17
web_src/css/dashboard.css
···
28
28
width: 75%;
29
29
}
30
30
31
-
.dashboard.feeds .filter.menu .item .floating.label,
32
-
.dashboard.issues .filter.menu .item .floating.label {
33
-
top: 7px;
34
-
left: 90%;
35
-
width: 15%;
36
-
}
37
-
38
-
@media (max-width: 767.98px) {
39
-
.dashboard.feeds .filter.menu .item .floating.label,
40
-
.dashboard.issues .filter.menu .item .floating.label {
41
-
top: 10px;
42
-
left: auto;
43
-
width: auto;
44
-
right: 13px;
45
-
}
46
-
}
47
-
48
31
/* Sort */
49
32
.dashboard.feeds .filter.menu .jump.item,
50
33
.dashboard.issues .filter.menu .jump.item {
+1
web_src/css/index.css
+1
web_src/css/index.css
+294
web_src/css/modules/label.css
+294
web_src/css/modules/label.css
···
1
+
/* based on Fomantic UI label 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.label {
5
+
display: inline-flex;
6
+
align-items: center;
7
+
gap: .25rem;
8
+
vertical-align: middle;
9
+
line-height: 1;
10
+
background: var(--color-label-bg);
11
+
color: var(--color-label-text);
12
+
padding: 0.3em 0.5em;
13
+
text-transform: none;
14
+
font-size: 0.85714286rem;
15
+
font-weight: var(--font-weight-medium);
16
+
border: 0 solid transparent;
17
+
border-radius: 0.28571429rem;
18
+
white-space: nowrap;
19
+
}
20
+
21
+
.ui.label:first-child {
22
+
margin-left: 0;
23
+
}
24
+
.ui.label:last-child {
25
+
margin-right: 0;
26
+
}
27
+
28
+
a.ui.label {
29
+
cursor: pointer;
30
+
}
31
+
32
+
.ui.label > a {
33
+
cursor: pointer;
34
+
color: inherit;
35
+
opacity: 0.75;
36
+
}
37
+
.ui.label > a:hover {
38
+
opacity: 1;
39
+
}
40
+
41
+
.ui.label > img {
42
+
width: auto;
43
+
vertical-align: middle;
44
+
height: 2.1666em;
45
+
}
46
+
47
+
.ui.label > .color-icon {
48
+
margin-left: 0;
49
+
}
50
+
51
+
.ui.label > .icon {
52
+
width: auto;
53
+
margin: 0 0.75em 0 0;
54
+
}
55
+
56
+
.ui.label > .detail {
57
+
display: inline-block;
58
+
vertical-align: top;
59
+
font-weight: var(--font-weight-medium);
60
+
margin-left: 1em;
61
+
opacity: 0.8;
62
+
}
63
+
.ui.label > .detail .icon {
64
+
margin: 0 0.25em 0 0;
65
+
}
66
+
67
+
.ui.label > .close.icon,
68
+
.ui.label > .delete.icon {
69
+
cursor: pointer;
70
+
font-size: 0.92857143em;
71
+
opacity: 0.5;
72
+
}
73
+
.ui.label > .close.icon:hover,
74
+
.ui.label > .delete.icon:hover {
75
+
opacity: 1;
76
+
}
77
+
78
+
.ui.label.left.icon > .close.icon,
79
+
.ui.label.left.icon > .delete.icon {
80
+
margin: 0 0.5em 0 0;
81
+
}
82
+
.ui.label:not(.icon) > .close.icon,
83
+
.ui.label:not(.icon) > .delete.icon {
84
+
margin: 0 0 0 0.5em;
85
+
}
86
+
87
+
.ui.header > .ui.label {
88
+
margin-top: -0.29165em;
89
+
}
90
+
91
+
a.ui.label:hover {
92
+
background: var(--color-label-hover-bg);
93
+
border-color: var(--color-label-hover-bg);
94
+
color: var(--color-label-text);
95
+
}
96
+
97
+
.ui.label.visible:not(.dropdown) {
98
+
display: inline-block !important;
99
+
}
100
+
101
+
.ui.basic.label {
102
+
background: var(--color-button);
103
+
border: 1px solid var(--color-light-border);
104
+
color: var(--color-text-light);
105
+
padding: calc(0.5833em - 1px) calc(0.833em - 1px);
106
+
}
107
+
a.ui.basic.label:hover {
108
+
text-decoration: none;
109
+
color: var(--color-text);
110
+
border-color: var(--color-light-border);
111
+
background: var(--color-hover);
112
+
}
113
+
114
+
.ui.ui.ui.primary.label {
115
+
background: var(--color-primary);
116
+
border-color: var(--color-primary-dark-2);
117
+
color: var(--color-primary-contrast);
118
+
}
119
+
a.ui.ui.ui.primary.label:hover {
120
+
background: var(--color-primary-dark-3);
121
+
border-color: var(--color-primary-dark-3);
122
+
color: var(--color-primary-contrast);
123
+
}
124
+
.ui.ui.ui.basic.primary.label {
125
+
background: transparent;
126
+
border-color: var(--color-primary);
127
+
color: var(--color-primary);
128
+
}
129
+
a.ui.ui.ui.basic.primary.label:hover {
130
+
background: var(--color-hover);
131
+
border-color: var(--color-primary-dark-1);
132
+
color: var(--color-primary-dark-1);
133
+
}
134
+
135
+
.ui.ui.ui.red.label {
136
+
background: var(--color-red);
137
+
border-color: var(--color-red);
138
+
color: var(--color-white);
139
+
}
140
+
a.ui.ui.ui.red.label:hover {
141
+
background: var(--color-red-dark-1);
142
+
border-color: var(--color-red-dark-1);
143
+
color: var(--color-white);
144
+
}
145
+
.ui.ui.ui.basic.red.label {
146
+
background: transparent;
147
+
border-color: var(--color-red);
148
+
color: var(--color-red);
149
+
}
150
+
a.ui.ui.ui.basic.red.label:hover {
151
+
background: transparent;
152
+
border-color: var(--color-red-dark-1);
153
+
color: var(--color-red-dark-1);
154
+
}
155
+
156
+
.ui.ui.ui.orange.label {
157
+
background: var(--color-orange);
158
+
border-color: var(--color-orange);
159
+
color: var(--color-white);
160
+
}
161
+
a.ui.ui.ui.orange.label:hover {
162
+
background: var(--color-orange-dark-1);
163
+
border-color: var(--color-orange-dark-1);
164
+
color: var(--color-white);
165
+
}
166
+
.ui.ui.ui.basic.orange.label {
167
+
background: transparent;
168
+
border-color: var(--color-orange);
169
+
color: var(--color-orange);
170
+
}
171
+
a.ui.ui.ui.basic.orange.label:hover {
172
+
background: transparent;
173
+
border-color: var(--color-orange-dark-1);
174
+
color: var(--color-orange-dark-1);
175
+
}
176
+
177
+
.ui.ui.ui.yellow.label {
178
+
background: var(--color-yellow);
179
+
border-color: var(--color-yellow);
180
+
color: var(--color-white);
181
+
}
182
+
a.ui.ui.ui.yellow.label:hover {
183
+
background: var(--color-yellow-dark-1);
184
+
border-color: var(--color-yellow-dark-1);
185
+
color: var(--color-white);
186
+
}
187
+
.ui.ui.ui.basic.yellow.label {
188
+
background: transparent;
189
+
border-color: var(--color-yellow);
190
+
color: var(--color-yellow);
191
+
}
192
+
a.ui.ui.ui.basic.yellow.label:hover {
193
+
background: transparent;
194
+
border-color: var(--color-yellow-dark-1);
195
+
color: var(--color-yellow-dark-1);
196
+
}
197
+
.ui.ui.ui.olive.label {
198
+
background: var(--color-olive);
199
+
border-color: var(--color-olive);
200
+
color: var(--color-white);
201
+
}
202
+
203
+
.ui.ui.ui.green.label {
204
+
background: var(--color-green);
205
+
border-color: var(--color-green);
206
+
color: var(--color-white);
207
+
}
208
+
a.ui.ui.ui.green.label:hover {
209
+
background: var(--color-green-dark-1);
210
+
border-color: var(--color-green-dark-1);
211
+
color: var(--color-white);
212
+
}
213
+
.ui.ui.ui.basic.green.label {
214
+
background: transparent;
215
+
border-color: var(--color-green);
216
+
color: var(--color-green);
217
+
}
218
+
a.ui.ui.ui.basic.green.label:hover {
219
+
background: transparent;
220
+
border-color: var(--color-green-dark-1);
221
+
color: var(--color-green-dark-1);
222
+
}
223
+
224
+
.ui.ui.ui.purple.label {
225
+
background: var(--color-purple);
226
+
border-color: var(--color-purple);
227
+
color: var(--color-white);
228
+
}
229
+
a.ui.ui.ui.purple.label:hover {
230
+
background: var(--color-purple-dark-1);
231
+
border-color: var(--color-purple-dark-1);
232
+
color: var(--color-white);
233
+
}
234
+
.ui.ui.ui.basic.purple.label {
235
+
background: transparent;
236
+
border-color: var(--color-purple);
237
+
color: var(--color-purple);
238
+
}
239
+
a.ui.ui.ui.basic.purple.label:hover {
240
+
background: transparent;
241
+
border-color: var(--color-purple-dark-1);
242
+
color: var(--color-purple-dark-1);
243
+
}
244
+
245
+
.ui.ui.ui.grey.label {
246
+
background: var(--color-label-bg);
247
+
border-color: var(--color-label-bg);
248
+
color: var(--color-label-text);
249
+
}
250
+
a.ui.ui.ui.grey.label:hover {
251
+
background: var(--color-label-hover-bg);
252
+
border-color: var(--color-label-hover-bg);
253
+
color: var(--color-white);
254
+
}
255
+
.ui.ui.ui.basic.grey.label {
256
+
background: transparent;
257
+
border-color: var(--color-label-bg);
258
+
color: var(--color-label-text);
259
+
}
260
+
a.ui.ui.ui.basic.grey.label:hover {
261
+
background: transparent;
262
+
border-color: var(--color-label-hover-bg);
263
+
color: var(--color-label-hover-bg);
264
+
}
265
+
266
+
.ui.horizontal.label {
267
+
margin: 0 0.5em 0 0;
268
+
padding: 0.4em 0.833em;
269
+
min-width: 3em;
270
+
text-align: center;
271
+
}
272
+
273
+
.ui.circular.label {
274
+
min-width: 2em;
275
+
min-height: 2em;
276
+
padding: 0.5em !important;
277
+
line-height: 1;
278
+
text-align: center;
279
+
border-radius: 500rem;
280
+
justify-content: center;
281
+
}
282
+
283
+
.ui.mini.label {
284
+
font-size: 0.64285714rem;
285
+
}
286
+
.ui.tiny.label {
287
+
font-size: 0.71428571rem;
288
+
}
289
+
.ui.small.label {
290
+
font-size: 0.78571429rem;
291
+
}
292
+
.ui.large.label {
293
+
font-size: 1rem;
294
+
}
-1114
web_src/fomantic/build/semantic.css
-1114
web_src/fomantic/build/semantic.css
···
7931
7931
Site Overrides
7932
7932
*******************************/
7933
7933
/*!
7934
-
* # Fomantic-UI - Label
7935
-
* http://github.com/fomantic/Fomantic-UI/
7936
-
*
7937
-
*
7938
-
* Released under the MIT license
7939
-
* http://opensource.org/licenses/MIT
7940
-
*
7941
-
*/
7942
-
7943
-
/*******************************
7944
-
Label
7945
-
*******************************/
7946
-
7947
-
.ui.label {
7948
-
display: inline-block;
7949
-
line-height: 1;
7950
-
vertical-align: baseline;
7951
-
margin: 0 0.14285714em;
7952
-
background-color: #E8E8E8;
7953
-
background-image: none;
7954
-
padding: 0.5833em 0.833em;
7955
-
color: rgba(0, 0, 0, 0.6);
7956
-
text-transform: none;
7957
-
font-weight: 500;
7958
-
border: 0 solid transparent;
7959
-
border-radius: 0.28571429rem;
7960
-
transition: background 0.1s ease;
7961
-
}
7962
-
7963
-
.ui.label:first-child {
7964
-
margin-left: 0;
7965
-
}
7966
-
7967
-
.ui.label:last-child {
7968
-
margin-right: 0;
7969
-
}
7970
-
7971
-
/* Link */
7972
-
7973
-
a.ui.label {
7974
-
cursor: pointer;
7975
-
}
7976
-
7977
-
/* Inside Link */
7978
-
7979
-
.ui.label > a {
7980
-
cursor: pointer;
7981
-
color: inherit;
7982
-
opacity: 0.5;
7983
-
transition: 0.1s opacity ease;
7984
-
}
7985
-
7986
-
.ui.label > a:hover {
7987
-
opacity: 1;
7988
-
}
7989
-
7990
-
/* Image */
7991
-
7992
-
.ui.label > img {
7993
-
width: auto !important;
7994
-
vertical-align: middle;
7995
-
height: 2.1666em;
7996
-
}
7997
-
7998
-
/* Icon */
7999
-
8000
-
.ui.left.icon.label > .icon,
8001
-
.ui.label > .icon {
8002
-
width: auto;
8003
-
margin: 0 0.75em 0 0;
8004
-
}
8005
-
8006
-
/* Detail */
8007
-
8008
-
.ui.label > .detail {
8009
-
display: inline-block;
8010
-
vertical-align: top;
8011
-
font-weight: 500;
8012
-
margin-left: 1em;
8013
-
opacity: 0.8;
8014
-
}
8015
-
8016
-
.ui.label > .detail .icon {
8017
-
margin: 0 0.25em 0 0;
8018
-
}
8019
-
8020
-
/* Removable label */
8021
-
8022
-
.ui.label > .close.icon,
8023
-
.ui.label > .delete.icon {
8024
-
cursor: pointer;
8025
-
font-size: 0.92857143em;
8026
-
opacity: 0.5;
8027
-
transition: background 0.1s ease;
8028
-
}
8029
-
8030
-
.ui.label > .close.icon:hover,
8031
-
.ui.label > .delete.icon:hover {
8032
-
opacity: 1;
8033
-
}
8034
-
8035
-
/* Backward compatible positioning */
8036
-
8037
-
.ui.label.left.icon > .close.icon,
8038
-
.ui.label.left.icon > .delete.icon {
8039
-
margin: 0 0.5em 0 0;
8040
-
}
8041
-
8042
-
.ui.label:not(.icon) > .close.icon,
8043
-
.ui.label:not(.icon) > .delete.icon {
8044
-
margin: 0 0 0 0.5em;
8045
-
}
8046
-
8047
-
/* Label for only an icon */
8048
-
8049
-
.ui.icon.label > .icon {
8050
-
margin: 0 auto;
8051
-
}
8052
-
8053
-
/* Right Side Icon */
8054
-
8055
-
.ui.right.icon.label > .icon {
8056
-
margin: 0 0 0 0.75em;
8057
-
}
8058
-
8059
-
/*-------------------
8060
-
Group
8061
-
--------------------*/
8062
-
8063
-
.ui.labels > .label {
8064
-
margin: 0 0.5em 0.5em 0;
8065
-
}
8066
-
8067
-
/*-------------------
8068
-
Coupling
8069
-
--------------------*/
8070
-
8071
-
.ui.header > .ui.label {
8072
-
margin-top: -0.29165em;
8073
-
}
8074
-
8075
-
/* Remove border radius on attached segment */
8076
-
8077
-
.ui.attached.segment > .ui.top.left.attached.label,
8078
-
.ui.bottom.attached.segment > .ui.top.left.attached.label {
8079
-
border-top-left-radius: 0;
8080
-
}
8081
-
8082
-
.ui.attached.segment > .ui.top.right.attached.label,
8083
-
.ui.bottom.attached.segment > .ui.top.right.attached.label {
8084
-
border-top-right-radius: 0;
8085
-
}
8086
-
8087
-
.ui.top.attached.segment > .ui.bottom.left.attached.label {
8088
-
border-bottom-left-radius: 0;
8089
-
}
8090
-
8091
-
.ui.top.attached.segment > .ui.bottom.right.attached.label {
8092
-
border-bottom-right-radius: 0;
8093
-
}
8094
-
8095
-
/* Padding on next content after a label */
8096
-
8097
-
.ui.top.attached.label ~ .ui.bottom.attached.label + :not(.attached),
8098
-
.ui.top.attached.label + :not(.attached) {
8099
-
margin-top: 2rem !important;
8100
-
}
8101
-
8102
-
.ui.bottom.attached.label ~ :last-child:not(.attached) {
8103
-
margin-top: 0;
8104
-
margin-bottom: 2rem !important;
8105
-
}
8106
-
8107
-
.ui.segment:not(.basic) > .ui.top.attached.label {
8108
-
margin-top: -1px;
8109
-
}
8110
-
8111
-
.ui.segment:not(.basic) > .ui.bottom.attached.label {
8112
-
margin-bottom: -1px;
8113
-
}
8114
-
8115
-
.ui.segment:not(.basic) > .ui.attached.label:not(.right) {
8116
-
margin-left: -1px;
8117
-
}
8118
-
8119
-
.ui.segment:not(.basic) > .ui.right.attached.label {
8120
-
margin-right: -1px;
8121
-
}
8122
-
8123
-
.ui.segment:not(.basic) > .ui.attached.label:not(.left):not(.right) {
8124
-
width: calc(100% + 2px);
8125
-
}
8126
-
8127
-
/*******************************
8128
-
Types
8129
-
*******************************/
8130
-
8131
-
/*-------------------
8132
-
Attached
8133
-
--------------------*/
8134
-
8135
-
.ui[class*="top attached"].label,
8136
-
.ui.attached.label {
8137
-
width: 100%;
8138
-
position: absolute;
8139
-
margin: 0;
8140
-
top: 0;
8141
-
left: 0;
8142
-
padding: 0.75em 1em;
8143
-
border-radius: 0.21428571rem 0.21428571rem 0 0;
8144
-
}
8145
-
8146
-
.ui[class*="bottom attached"].label {
8147
-
top: auto;
8148
-
bottom: 0;
8149
-
border-radius: 0 0 0.21428571rem 0.21428571rem;
8150
-
}
8151
-
8152
-
.ui[class*="top left attached"].label {
8153
-
width: auto;
8154
-
margin-top: 0;
8155
-
border-radius: 0.21428571rem 0 0.28571429rem 0;
8156
-
}
8157
-
8158
-
.ui[class*="top right attached"].label {
8159
-
width: auto;
8160
-
left: auto;
8161
-
right: 0;
8162
-
border-radius: 0 0.21428571rem 0 0.28571429rem;
8163
-
}
8164
-
8165
-
.ui[class*="bottom left attached"].label {
8166
-
width: auto;
8167
-
top: auto;
8168
-
bottom: 0;
8169
-
border-radius: 0 0.28571429rem 0 0.21428571rem;
8170
-
}
8171
-
8172
-
.ui[class*="bottom right attached"].label {
8173
-
top: auto;
8174
-
bottom: 0;
8175
-
left: auto;
8176
-
right: 0;
8177
-
width: auto;
8178
-
border-radius: 0.28571429rem 0 0.21428571rem 0;
8179
-
}
8180
-
8181
-
/*******************************
8182
-
States
8183
-
*******************************/
8184
-
8185
-
/*-------------------
8186
-
Disabled
8187
-
--------------------*/
8188
-
8189
-
.ui.label.disabled {
8190
-
opacity: 0.5;
8191
-
}
8192
-
8193
-
/*-------------------
8194
-
Hover
8195
-
--------------------*/
8196
-
8197
-
.ui.labels a.label:hover,
8198
-
a.ui.label:hover {
8199
-
background-color: #E0E0E0;
8200
-
border-color: #E0E0E0;
8201
-
background-image: none;
8202
-
color: rgba(0, 0, 0, 0.8);
8203
-
}
8204
-
8205
-
.ui.labels a.label:hover:before,
8206
-
a.ui.label:hover:before {
8207
-
color: rgba(0, 0, 0, 0.8);
8208
-
}
8209
-
8210
-
/*-------------------
8211
-
Active
8212
-
--------------------*/
8213
-
8214
-
.ui.active.label {
8215
-
background-color: #D0D0D0;
8216
-
border-color: #D0D0D0;
8217
-
background-image: none;
8218
-
color: rgba(0, 0, 0, 0.95);
8219
-
}
8220
-
8221
-
.ui.active.label:before {
8222
-
background-color: #D0D0D0;
8223
-
background-image: none;
8224
-
color: rgba(0, 0, 0, 0.95);
8225
-
}
8226
-
8227
-
/*-------------------
8228
-
Active Hover
8229
-
--------------------*/
8230
-
8231
-
.ui.labels a.active.label:hover,
8232
-
a.ui.active.label:hover {
8233
-
background-color: #C8C8C8;
8234
-
border-color: #C8C8C8;
8235
-
background-image: none;
8236
-
color: rgba(0, 0, 0, 0.95);
8237
-
}
8238
-
8239
-
.ui.labels a.active.label:hover:before,
8240
-
a.ui.active.label:hover:before {
8241
-
background-color: #C8C8C8;
8242
-
background-image: none;
8243
-
color: rgba(0, 0, 0, 0.95);
8244
-
}
8245
-
8246
-
/*-------------------
8247
-
Visible
8248
-
--------------------*/
8249
-
8250
-
.ui.labels.visible .label,
8251
-
.ui.label.visible:not(.dropdown) {
8252
-
display: inline-block !important;
8253
-
}
8254
-
8255
-
/*-------------------
8256
-
Hidden
8257
-
--------------------*/
8258
-
8259
-
.ui.labels.hidden .label,
8260
-
.ui.label.hidden {
8261
-
display: none !important;
8262
-
}
8263
-
8264
-
/*******************************
8265
-
Variations
8266
-
*******************************/
8267
-
8268
-
/*-------------------
8269
-
Basic
8270
-
--------------------*/
8271
-
8272
-
.ui.basic.labels .label,
8273
-
.ui.basic.label {
8274
-
background: none #FFFFFF;
8275
-
border: 1px solid rgba(34, 36, 38, 0.15);
8276
-
color: rgba(0, 0, 0, 0.87);
8277
-
box-shadow: none;
8278
-
padding-top: calc(0.5833em - 1px);
8279
-
padding-bottom: calc(0.5833em - 1px);
8280
-
padding-right: calc(0.833em - 1px);
8281
-
}
8282
-
8283
-
.ui.basic.labels:not(.tag):not(.image):not(.ribbon) .label,
8284
-
.ui.basic.label:not(.tag):not(.image):not(.ribbon) {
8285
-
padding-left: calc(0.833em - 1px);
8286
-
}
8287
-
8288
-
/* Link */
8289
-
8290
-
.ui.basic.labels a.label:hover,
8291
-
a.ui.basic.label:hover {
8292
-
text-decoration: none;
8293
-
background: none #FFFFFF;
8294
-
color: #1e70bf;
8295
-
box-shadow: none;
8296
-
}
8297
-
8298
-
/* Pointing */
8299
-
8300
-
.ui.basic.pointing.label:before {
8301
-
border-color: inherit;
8302
-
}
8303
-
8304
-
/*-------------------
8305
-
Fluid
8306
-
--------------------*/
8307
-
8308
-
.ui.label.fluid,
8309
-
.ui.fluid.labels > .label {
8310
-
width: 100%;
8311
-
box-sizing: border-box;
8312
-
}
8313
-
8314
-
/*-------------------
8315
-
Colors
8316
-
--------------------*/
8317
-
8318
-
.ui.primary.labels .label,
8319
-
.ui.ui.ui.primary.label {
8320
-
background-color: #2185D0;
8321
-
border-color: #2185D0;
8322
-
color: rgba(255, 255, 255, 0.9);
8323
-
}
8324
-
8325
-
/* Link */
8326
-
8327
-
.ui.primary.labels a.label:hover,
8328
-
a.ui.ui.ui.primary.label:hover {
8329
-
background-color: #1678c2;
8330
-
border-color: #1678c2;
8331
-
color: #FFFFFF;
8332
-
}
8333
-
8334
-
/* Basic */
8335
-
8336
-
.ui.basic.labels .primary.label,
8337
-
.ui.ui.ui.basic.primary.label {
8338
-
background: none #FFFFFF;
8339
-
border-color: #2185D0;
8340
-
color: #2185D0;
8341
-
}
8342
-
8343
-
.ui.basic.labels a.primary.label:hover,
8344
-
a.ui.ui.ui.basic.primary.label:hover {
8345
-
background: none #FFFFFF;
8346
-
border-color: #1678c2;
8347
-
color: #1678c2;
8348
-
}
8349
-
8350
-
.ui.secondary.labels .label,
8351
-
.ui.ui.ui.secondary.label {
8352
-
background-color: #1B1C1D;
8353
-
border-color: #1B1C1D;
8354
-
color: rgba(255, 255, 255, 0.9);
8355
-
}
8356
-
8357
-
/* Link */
8358
-
8359
-
.ui.secondary.labels a.label:hover,
8360
-
a.ui.ui.ui.secondary.label:hover {
8361
-
background-color: #27292a;
8362
-
border-color: #27292a;
8363
-
color: #FFFFFF;
8364
-
}
8365
-
8366
-
/* Basic */
8367
-
8368
-
.ui.basic.labels .secondary.label,
8369
-
.ui.ui.ui.basic.secondary.label {
8370
-
background: none #FFFFFF;
8371
-
border-color: #1B1C1D;
8372
-
color: #1B1C1D;
8373
-
}
8374
-
8375
-
.ui.basic.labels a.secondary.label:hover,
8376
-
a.ui.ui.ui.basic.secondary.label:hover {
8377
-
background: none #FFFFFF;
8378
-
border-color: #27292a;
8379
-
color: #27292a;
8380
-
}
8381
-
8382
-
.ui.red.labels .label,
8383
-
.ui.ui.ui.red.label {
8384
-
background-color: #DB2828;
8385
-
border-color: #DB2828;
8386
-
color: #FFFFFF;
8387
-
}
8388
-
8389
-
/* Link */
8390
-
8391
-
.ui.red.labels a.label:hover,
8392
-
a.ui.ui.ui.red.label:hover {
8393
-
background-color: #d01919;
8394
-
border-color: #d01919;
8395
-
color: #FFFFFF;
8396
-
}
8397
-
8398
-
/* Basic */
8399
-
8400
-
.ui.basic.labels .red.label,
8401
-
.ui.ui.ui.basic.red.label {
8402
-
background: none #FFFFFF;
8403
-
border-color: #DB2828;
8404
-
color: #DB2828;
8405
-
}
8406
-
8407
-
.ui.basic.labels a.red.label:hover,
8408
-
a.ui.ui.ui.basic.red.label:hover {
8409
-
background: none #FFFFFF;
8410
-
border-color: #d01919;
8411
-
color: #d01919;
8412
-
}
8413
-
8414
-
.ui.orange.labels .label,
8415
-
.ui.ui.ui.orange.label {
8416
-
background-color: #F2711C;
8417
-
border-color: #F2711C;
8418
-
color: #FFFFFF;
8419
-
}
8420
-
8421
-
/* Link */
8422
-
8423
-
.ui.orange.labels a.label:hover,
8424
-
a.ui.ui.ui.orange.label:hover {
8425
-
background-color: #f26202;
8426
-
border-color: #f26202;
8427
-
color: #FFFFFF;
8428
-
}
8429
-
8430
-
/* Basic */
8431
-
8432
-
.ui.basic.labels .orange.label,
8433
-
.ui.ui.ui.basic.orange.label {
8434
-
background: none #FFFFFF;
8435
-
border-color: #F2711C;
8436
-
color: #F2711C;
8437
-
}
8438
-
8439
-
.ui.basic.labels a.orange.label:hover,
8440
-
a.ui.ui.ui.basic.orange.label:hover {
8441
-
background: none #FFFFFF;
8442
-
border-color: #f26202;
8443
-
color: #f26202;
8444
-
}
8445
-
8446
-
.ui.yellow.labels .label,
8447
-
.ui.ui.ui.yellow.label {
8448
-
background-color: #FBBD08;
8449
-
border-color: #FBBD08;
8450
-
color: #FFFFFF;
8451
-
}
8452
-
8453
-
/* Link */
8454
-
8455
-
.ui.yellow.labels a.label:hover,
8456
-
a.ui.ui.ui.yellow.label:hover {
8457
-
background-color: #eaae00;
8458
-
border-color: #eaae00;
8459
-
color: #FFFFFF;
8460
-
}
8461
-
8462
-
/* Basic */
8463
-
8464
-
.ui.basic.labels .yellow.label,
8465
-
.ui.ui.ui.basic.yellow.label {
8466
-
background: none #FFFFFF;
8467
-
border-color: #FBBD08;
8468
-
color: #FBBD08;
8469
-
}
8470
-
8471
-
.ui.basic.labels a.yellow.label:hover,
8472
-
a.ui.ui.ui.basic.yellow.label:hover {
8473
-
background: none #FFFFFF;
8474
-
border-color: #eaae00;
8475
-
color: #eaae00;
8476
-
}
8477
-
8478
-
.ui.olive.labels .label,
8479
-
.ui.ui.ui.olive.label {
8480
-
background-color: #B5CC18;
8481
-
border-color: #B5CC18;
8482
-
color: #FFFFFF;
8483
-
}
8484
-
8485
-
/* Link */
8486
-
8487
-
.ui.olive.labels a.label:hover,
8488
-
a.ui.ui.ui.olive.label:hover {
8489
-
background-color: #a7bd0d;
8490
-
border-color: #a7bd0d;
8491
-
color: #FFFFFF;
8492
-
}
8493
-
8494
-
/* Basic */
8495
-
8496
-
.ui.basic.labels .olive.label,
8497
-
.ui.ui.ui.basic.olive.label {
8498
-
background: none #FFFFFF;
8499
-
border-color: #B5CC18;
8500
-
color: #B5CC18;
8501
-
}
8502
-
8503
-
.ui.basic.labels a.olive.label:hover,
8504
-
a.ui.ui.ui.basic.olive.label:hover {
8505
-
background: none #FFFFFF;
8506
-
border-color: #a7bd0d;
8507
-
color: #a7bd0d;
8508
-
}
8509
-
8510
-
.ui.green.labels .label,
8511
-
.ui.ui.ui.green.label {
8512
-
background-color: #21BA45;
8513
-
border-color: #21BA45;
8514
-
color: #FFFFFF;
8515
-
}
8516
-
8517
-
/* Link */
8518
-
8519
-
.ui.green.labels a.label:hover,
8520
-
a.ui.ui.ui.green.label:hover {
8521
-
background-color: #16ab39;
8522
-
border-color: #16ab39;
8523
-
color: #FFFFFF;
8524
-
}
8525
-
8526
-
/* Basic */
8527
-
8528
-
.ui.basic.labels .green.label,
8529
-
.ui.ui.ui.basic.green.label {
8530
-
background: none #FFFFFF;
8531
-
border-color: #21BA45;
8532
-
color: #21BA45;
8533
-
}
8534
-
8535
-
.ui.basic.labels a.green.label:hover,
8536
-
a.ui.ui.ui.basic.green.label:hover {
8537
-
background: none #FFFFFF;
8538
-
border-color: #16ab39;
8539
-
color: #16ab39;
8540
-
}
8541
-
8542
-
.ui.teal.labels .label,
8543
-
.ui.ui.ui.teal.label {
8544
-
background-color: #00B5AD;
8545
-
border-color: #00B5AD;
8546
-
color: #FFFFFF;
8547
-
}
8548
-
8549
-
/* Link */
8550
-
8551
-
.ui.teal.labels a.label:hover,
8552
-
a.ui.ui.ui.teal.label:hover {
8553
-
background-color: #009c95;
8554
-
border-color: #009c95;
8555
-
color: #FFFFFF;
8556
-
}
8557
-
8558
-
/* Basic */
8559
-
8560
-
.ui.basic.labels .teal.label,
8561
-
.ui.ui.ui.basic.teal.label {
8562
-
background: none #FFFFFF;
8563
-
border-color: #00B5AD;
8564
-
color: #00B5AD;
8565
-
}
8566
-
8567
-
.ui.basic.labels a.teal.label:hover,
8568
-
a.ui.ui.ui.basic.teal.label:hover {
8569
-
background: none #FFFFFF;
8570
-
border-color: #009c95;
8571
-
color: #009c95;
8572
-
}
8573
-
8574
-
.ui.blue.labels .label,
8575
-
.ui.ui.ui.blue.label {
8576
-
background-color: #2185D0;
8577
-
border-color: #2185D0;
8578
-
color: #FFFFFF;
8579
-
}
8580
-
8581
-
/* Link */
8582
-
8583
-
.ui.blue.labels a.label:hover,
8584
-
a.ui.ui.ui.blue.label:hover {
8585
-
background-color: #1678c2;
8586
-
border-color: #1678c2;
8587
-
color: #FFFFFF;
8588
-
}
8589
-
8590
-
/* Basic */
8591
-
8592
-
.ui.basic.labels .blue.label,
8593
-
.ui.ui.ui.basic.blue.label {
8594
-
background: none #FFFFFF;
8595
-
border-color: #2185D0;
8596
-
color: #2185D0;
8597
-
}
8598
-
8599
-
.ui.basic.labels a.blue.label:hover,
8600
-
a.ui.ui.ui.basic.blue.label:hover {
8601
-
background: none #FFFFFF;
8602
-
border-color: #1678c2;
8603
-
color: #1678c2;
8604
-
}
8605
-
8606
-
.ui.violet.labels .label,
8607
-
.ui.ui.ui.violet.label {
8608
-
background-color: #6435C9;
8609
-
border-color: #6435C9;
8610
-
color: #FFFFFF;
8611
-
}
8612
-
8613
-
/* Link */
8614
-
8615
-
.ui.violet.labels a.label:hover,
8616
-
a.ui.ui.ui.violet.label:hover {
8617
-
background-color: #5829bb;
8618
-
border-color: #5829bb;
8619
-
color: #FFFFFF;
8620
-
}
8621
-
8622
-
/* Basic */
8623
-
8624
-
.ui.basic.labels .violet.label,
8625
-
.ui.ui.ui.basic.violet.label {
8626
-
background: none #FFFFFF;
8627
-
border-color: #6435C9;
8628
-
color: #6435C9;
8629
-
}
8630
-
8631
-
.ui.basic.labels a.violet.label:hover,
8632
-
a.ui.ui.ui.basic.violet.label:hover {
8633
-
background: none #FFFFFF;
8634
-
border-color: #5829bb;
8635
-
color: #5829bb;
8636
-
}
8637
-
8638
-
.ui.purple.labels .label,
8639
-
.ui.ui.ui.purple.label {
8640
-
background-color: #A333C8;
8641
-
border-color: #A333C8;
8642
-
color: #FFFFFF;
8643
-
}
8644
-
8645
-
/* Link */
8646
-
8647
-
.ui.purple.labels a.label:hover,
8648
-
a.ui.ui.ui.purple.label:hover {
8649
-
background-color: #9627ba;
8650
-
border-color: #9627ba;
8651
-
color: #FFFFFF;
8652
-
}
8653
-
8654
-
/* Basic */
8655
-
8656
-
.ui.basic.labels .purple.label,
8657
-
.ui.ui.ui.basic.purple.label {
8658
-
background: none #FFFFFF;
8659
-
border-color: #A333C8;
8660
-
color: #A333C8;
8661
-
}
8662
-
8663
-
.ui.basic.labels a.purple.label:hover,
8664
-
a.ui.ui.ui.basic.purple.label:hover {
8665
-
background: none #FFFFFF;
8666
-
border-color: #9627ba;
8667
-
color: #9627ba;
8668
-
}
8669
-
8670
-
.ui.pink.labels .label,
8671
-
.ui.ui.ui.pink.label {
8672
-
background-color: #E03997;
8673
-
border-color: #E03997;
8674
-
color: #FFFFFF;
8675
-
}
8676
-
8677
-
/* Link */
8678
-
8679
-
.ui.pink.labels a.label:hover,
8680
-
a.ui.ui.ui.pink.label:hover {
8681
-
background-color: #e61a8d;
8682
-
border-color: #e61a8d;
8683
-
color: #FFFFFF;
8684
-
}
8685
-
8686
-
/* Basic */
8687
-
8688
-
.ui.basic.labels .pink.label,
8689
-
.ui.ui.ui.basic.pink.label {
8690
-
background: none #FFFFFF;
8691
-
border-color: #E03997;
8692
-
color: #E03997;
8693
-
}
8694
-
8695
-
.ui.basic.labels a.pink.label:hover,
8696
-
a.ui.ui.ui.basic.pink.label:hover {
8697
-
background: none #FFFFFF;
8698
-
border-color: #e61a8d;
8699
-
color: #e61a8d;
8700
-
}
8701
-
8702
-
.ui.brown.labels .label,
8703
-
.ui.ui.ui.brown.label {
8704
-
background-color: #A5673F;
8705
-
border-color: #A5673F;
8706
-
color: #FFFFFF;
8707
-
}
8708
-
8709
-
/* Link */
8710
-
8711
-
.ui.brown.labels a.label:hover,
8712
-
a.ui.ui.ui.brown.label:hover {
8713
-
background-color: #975b33;
8714
-
border-color: #975b33;
8715
-
color: #FFFFFF;
8716
-
}
8717
-
8718
-
/* Basic */
8719
-
8720
-
.ui.basic.labels .brown.label,
8721
-
.ui.ui.ui.basic.brown.label {
8722
-
background: none #FFFFFF;
8723
-
border-color: #A5673F;
8724
-
color: #A5673F;
8725
-
}
8726
-
8727
-
.ui.basic.labels a.brown.label:hover,
8728
-
a.ui.ui.ui.basic.brown.label:hover {
8729
-
background: none #FFFFFF;
8730
-
border-color: #975b33;
8731
-
color: #975b33;
8732
-
}
8733
-
8734
-
.ui.grey.labels .label,
8735
-
.ui.ui.ui.grey.label {
8736
-
background-color: #767676;
8737
-
border-color: #767676;
8738
-
color: #FFFFFF;
8739
-
}
8740
-
8741
-
/* Link */
8742
-
8743
-
.ui.grey.labels a.label:hover,
8744
-
a.ui.ui.ui.grey.label:hover {
8745
-
background-color: #838383;
8746
-
border-color: #838383;
8747
-
color: #FFFFFF;
8748
-
}
8749
-
8750
-
/* Basic */
8751
-
8752
-
.ui.basic.labels .grey.label,
8753
-
.ui.ui.ui.basic.grey.label {
8754
-
background: none #FFFFFF;
8755
-
border-color: #767676;
8756
-
color: #767676;
8757
-
}
8758
-
8759
-
.ui.basic.labels a.grey.label:hover,
8760
-
a.ui.ui.ui.basic.grey.label:hover {
8761
-
background: none #FFFFFF;
8762
-
border-color: #838383;
8763
-
color: #838383;
8764
-
}
8765
-
8766
-
.ui.black.labels .label,
8767
-
.ui.ui.ui.black.label {
8768
-
background-color: #1B1C1D;
8769
-
border-color: #1B1C1D;
8770
-
color: #FFFFFF;
8771
-
}
8772
-
8773
-
/* Link */
8774
-
8775
-
.ui.black.labels a.label:hover,
8776
-
a.ui.ui.ui.black.label:hover {
8777
-
background-color: #27292a;
8778
-
border-color: #27292a;
8779
-
color: #FFFFFF;
8780
-
}
8781
-
8782
-
/* Basic */
8783
-
8784
-
.ui.basic.labels .black.label,
8785
-
.ui.ui.ui.basic.black.label {
8786
-
background: none #FFFFFF;
8787
-
border-color: #1B1C1D;
8788
-
color: #1B1C1D;
8789
-
}
8790
-
8791
-
.ui.basic.labels a.black.label:hover,
8792
-
a.ui.ui.ui.basic.black.label:hover {
8793
-
background: none #FFFFFF;
8794
-
border-color: #27292a;
8795
-
color: #27292a;
8796
-
}
8797
-
8798
-
/*-------------------
8799
-
Horizontal
8800
-
--------------------*/
8801
-
8802
-
.ui.horizontal.labels .label,
8803
-
.ui.horizontal.label {
8804
-
margin: 0 0.5em 0 0;
8805
-
padding: 0.4em 0.833em;
8806
-
min-width: 3em;
8807
-
text-align: center;
8808
-
}
8809
-
8810
-
/*-------------------
8811
-
Circular
8812
-
--------------------*/
8813
-
8814
-
.ui.circular.labels .label,
8815
-
.ui.circular.label {
8816
-
min-width: 2em;
8817
-
min-height: 2em;
8818
-
padding: 0.5em !important;
8819
-
line-height: 1em;
8820
-
text-align: center;
8821
-
border-radius: 500rem;
8822
-
}
8823
-
8824
-
.ui.empty.circular.labels .label,
8825
-
.ui.empty.circular.label {
8826
-
min-width: 0;
8827
-
min-height: 0;
8828
-
overflow: hidden;
8829
-
width: 0.5em;
8830
-
height: 0.5em;
8831
-
vertical-align: baseline;
8832
-
}
8833
-
8834
-
/*-------------------
8835
-
Pointing
8836
-
--------------------*/
8837
-
8838
-
.ui.pointing.label {
8839
-
position: relative;
8840
-
}
8841
-
8842
-
.ui.attached.pointing.label {
8843
-
position: absolute;
8844
-
}
8845
-
8846
-
.ui.pointing.label:before {
8847
-
background-color: inherit;
8848
-
background-image: inherit;
8849
-
border-width: 0;
8850
-
border-style: solid;
8851
-
border-color: inherit;
8852
-
}
8853
-
8854
-
/* Arrow */
8855
-
8856
-
.ui.pointing.label:before {
8857
-
position: absolute;
8858
-
content: '';
8859
-
transform: rotate(45deg);
8860
-
background-image: none;
8861
-
z-index: 2;
8862
-
width: 0.6666em;
8863
-
height: 0.6666em;
8864
-
transition: none;
8865
-
}
8866
-
8867
-
/*--- Above ---*/
8868
-
8869
-
.ui.pointing.label,
8870
-
.ui[class*="pointing above"].label {
8871
-
margin-top: 1em;
8872
-
}
8873
-
8874
-
.ui.pointing.label:before,
8875
-
.ui[class*="pointing above"].label:before {
8876
-
border-width: 1px 0 0 1px;
8877
-
transform: translateX(-50%) translateY(-50%) rotate(45deg);
8878
-
top: 0;
8879
-
left: 50%;
8880
-
}
8881
-
8882
-
/*--- Below ---*/
8883
-
8884
-
.ui[class*="bottom pointing"].label,
8885
-
.ui[class*="pointing below"].label {
8886
-
margin-top: 0;
8887
-
margin-bottom: 1em;
8888
-
}
8889
-
8890
-
.ui[class*="bottom pointing"].label:before,
8891
-
.ui[class*="pointing below"].label:before {
8892
-
border-width: 0 1px 1px 0;
8893
-
top: auto;
8894
-
right: auto;
8895
-
transform: translateX(-50%) translateY(-50%) rotate(45deg);
8896
-
top: 100%;
8897
-
left: 50%;
8898
-
}
8899
-
8900
-
/*--- Left ---*/
8901
-
8902
-
.ui[class*="left pointing"].label {
8903
-
margin-top: 0;
8904
-
margin-left: 0.6666em;
8905
-
}
8906
-
8907
-
.ui[class*="left pointing"].label:before {
8908
-
border-width: 0 0 1px 1px;
8909
-
transform: translateX(-50%) translateY(-50%) rotate(45deg);
8910
-
bottom: auto;
8911
-
right: auto;
8912
-
top: 50%;
8913
-
left: 0;
8914
-
}
8915
-
8916
-
/*--- Right ---*/
8917
-
8918
-
.ui[class*="right pointing"].label {
8919
-
margin-top: 0;
8920
-
margin-right: 0.6666em;
8921
-
}
8922
-
8923
-
.ui[class*="right pointing"].label:before {
8924
-
border-width: 1px 1px 0 0;
8925
-
transform: translateX(50%) translateY(-50%) rotate(45deg);
8926
-
top: 50%;
8927
-
right: 0;
8928
-
bottom: auto;
8929
-
left: auto;
8930
-
}
8931
-
8932
-
/* Basic Pointing */
8933
-
8934
-
/*--- Above ---*/
8935
-
8936
-
.ui.basic.pointing.label:before,
8937
-
.ui.basic[class*="pointing above"].label:before {
8938
-
margin-top: -1px;
8939
-
}
8940
-
8941
-
/*--- Below ---*/
8942
-
8943
-
.ui.basic[class*="bottom pointing"].label:before,
8944
-
.ui.basic[class*="pointing below"].label:before {
8945
-
bottom: auto;
8946
-
top: 100%;
8947
-
margin-top: 1px;
8948
-
}
8949
-
8950
-
/*--- Left ---*/
8951
-
8952
-
.ui.basic[class*="left pointing"].label:before {
8953
-
top: 50%;
8954
-
left: -1px;
8955
-
}
8956
-
8957
-
/*--- Right ---*/
8958
-
8959
-
.ui.basic[class*="right pointing"].label:before {
8960
-
top: 50%;
8961
-
right: -1px;
8962
-
}
8963
-
8964
-
/*------------------
8965
-
Floating Label
8966
-
-------------------*/
8967
-
8968
-
.ui.floating.label {
8969
-
position: absolute;
8970
-
z-index: 100;
8971
-
top: -1em;
8972
-
right: 0;
8973
-
white-space: nowrap;
8974
-
transform: translateX(50%);
8975
-
}
8976
-
8977
-
.ui.right.aligned.floating.label {
8978
-
transform: translateX(1.2em);
8979
-
}
8980
-
8981
-
.ui.left.floating.label {
8982
-
left: 0;
8983
-
right: auto;
8984
-
transform: translateX(-50%);
8985
-
}
8986
-
8987
-
.ui.left.aligned.floating.label {
8988
-
transform: translateX(-1.2em);
8989
-
}
8990
-
8991
-
.ui.bottom.floating.label {
8992
-
top: auto;
8993
-
bottom: -1em;
8994
-
}
8995
-
8996
-
/*-------------------
8997
-
Sizes
8998
-
--------------------*/
8999
-
9000
-
.ui.labels .label,
9001
-
.ui.label {
9002
-
font-size: 0.85714286rem;
9003
-
}
9004
-
9005
-
.ui.mini.labels .label,
9006
-
.ui.mini.label {
9007
-
font-size: 0.64285714rem;
9008
-
}
9009
-
9010
-
.ui.tiny.labels .label,
9011
-
.ui.tiny.label {
9012
-
font-size: 0.71428571rem;
9013
-
}
9014
-
9015
-
.ui.small.labels .label,
9016
-
.ui.small.label {
9017
-
font-size: 0.78571429rem;
9018
-
}
9019
-
9020
-
.ui.large.labels .label,
9021
-
.ui.large.label {
9022
-
font-size: 1rem;
9023
-
}
9024
-
9025
-
.ui.big.labels .label,
9026
-
.ui.big.label {
9027
-
font-size: 1.28571429rem;
9028
-
}
9029
-
9030
-
.ui.huge.labels .label,
9031
-
.ui.huge.label {
9032
-
font-size: 1.42857143rem;
9033
-
}
9034
-
9035
-
.ui.massive.labels .label,
9036
-
.ui.massive.label {
9037
-
font-size: 1.71428571rem;
9038
-
}
9039
-
9040
-
/*******************************
9041
-
Theme Overrides
9042
-
*******************************/
9043
-
9044
-
/*******************************
9045
-
Site Overrides
9046
-
*******************************/
9047
-
/*!
9048
7934
* # Fomantic-UI - List
9049
7935
* http://github.com/fomantic/Fomantic-UI/
9050
7936
*