oppi.li
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 min-width: 0;
9 vertical-align: middle;
10 line-height: 1;
11 background: var(--color-label-bg);
12 color: var(--color-label-text);
13 padding: 0.3em 0.5em;
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
28a.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
91a.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.ugc-labels .item {
102 text-overflow: unset !important;
103}
104
105.ugc-labels .item .ui.label {
106 text-wrap: auto;
107 overflow-wrap: anywhere;
108}
109
110.ui.basic.label {
111 background: var(--color-button);
112 border: 1px solid var(--color-light-border);
113 color: var(--color-text-light);
114 padding: calc(0.5833em - 1px) calc(0.833em - 1px);
115}
116a.ui.basic.label:hover {
117 text-decoration: none;
118 color: var(--color-text);
119 border-color: var(--color-light-border);
120 background: var(--color-hover);
121}
122
123.ui.ui.ui.primary.label {
124 background: var(--color-primary);
125 border-color: var(--color-primary-dark-2);
126 color: var(--color-primary-contrast);
127}
128a.ui.ui.ui.primary.label:hover {
129 background: var(--color-primary-dark-3);
130 border-color: var(--color-primary-dark-3);
131 color: var(--color-primary-contrast);
132}
133.ui.ui.ui.basic.primary.label {
134 background: transparent;
135 border-color: var(--color-primary);
136 color: var(--color-primary);
137}
138a.ui.ui.ui.basic.primary.label:hover {
139 background: var(--color-hover);
140 border-color: var(--color-primary-dark-1);
141 color: var(--color-primary-dark-1);
142}
143
144.ui.ui.ui.red.label {
145 background: var(--color-red);
146 border-color: var(--color-red);
147 color: var(--color-white);
148}
149a.ui.ui.ui.red.label:hover {
150 background: var(--color-red-dark-1);
151 border-color: var(--color-red-dark-1);
152 color: var(--color-white);
153}
154.ui.ui.ui.basic.red.label {
155 background: transparent;
156 border-color: var(--color-red);
157 color: var(--color-red);
158}
159a.ui.ui.ui.basic.red.label:hover {
160 background: transparent;
161 border-color: var(--color-red-dark-1);
162 color: var(--color-red-dark-1);
163}
164
165.ui.ui.ui.orange.label {
166 background: var(--color-orange);
167 border-color: var(--color-orange);
168 color: var(--color-white);
169}
170a.ui.ui.ui.orange.label:hover {
171 background: var(--color-orange-dark-1);
172 border-color: var(--color-orange-dark-1);
173 color: var(--color-white);
174}
175.ui.ui.ui.basic.orange.label {
176 background: transparent;
177 border-color: var(--color-orange);
178 color: var(--color-orange);
179}
180a.ui.ui.ui.basic.orange.label:hover {
181 background: transparent;
182 border-color: var(--color-orange-dark-1);
183 color: var(--color-orange-dark-1);
184}
185
186.ui.ui.ui.yellow.label {
187 background: var(--color-yellow);
188 border-color: var(--color-yellow);
189 color: var(--color-white);
190}
191a.ui.ui.ui.yellow.label:hover {
192 background: var(--color-yellow-dark-1);
193 border-color: var(--color-yellow-dark-1);
194 color: var(--color-white);
195}
196.ui.ui.ui.basic.yellow.label {
197 background: transparent;
198 border-color: var(--color-yellow);
199 color: var(--color-yellow);
200}
201a.ui.ui.ui.basic.yellow.label:hover {
202 background: transparent;
203 border-color: var(--color-yellow-dark-1);
204 color: var(--color-yellow-dark-1);
205}
206.ui.ui.ui.olive.label {
207 background: var(--color-olive);
208 border-color: var(--color-olive);
209 color: var(--color-white);
210}
211
212.ui.ui.ui.green.label {
213 background: var(--color-green);
214 border-color: var(--color-green);
215 color: var(--color-white);
216}
217a.ui.ui.ui.green.label:hover {
218 background: var(--color-green-dark-1);
219 border-color: var(--color-green-dark-1);
220 color: var(--color-white);
221}
222.ui.ui.ui.basic.green.label {
223 background: transparent;
224 border-color: var(--color-green);
225 color: var(--color-green);
226}
227a.ui.ui.ui.basic.green.label:hover {
228 background: transparent;
229 border-color: var(--color-green-dark-1);
230 color: var(--color-green-dark-1);
231}
232
233.ui.ui.ui.purple.label {
234 background: var(--color-purple);
235 border-color: var(--color-purple);
236 color: var(--color-white);
237}
238a.ui.ui.ui.purple.label:hover {
239 background: var(--color-purple-dark-1);
240 border-color: var(--color-purple-dark-1);
241 color: var(--color-white);
242}
243.ui.ui.ui.basic.purple.label {
244 background: transparent;
245 border-color: var(--color-purple);
246 color: var(--color-purple);
247}
248a.ui.ui.ui.basic.purple.label:hover {
249 background: transparent;
250 border-color: var(--color-purple-dark-1);
251 color: var(--color-purple-dark-1);
252}
253
254.ui.ui.ui.grey.label {
255 background: var(--color-label-bg);
256 border-color: var(--color-label-bg);
257 color: var(--color-label-text);
258}
259a.ui.ui.ui.grey.label:hover {
260 background: var(--color-label-hover-bg);
261 border-color: var(--color-label-hover-bg);
262 color: var(--color-white);
263}
264.ui.ui.ui.basic.grey.label {
265 background: transparent;
266 border-color: var(--color-label-bg);
267 color: var(--color-label-text);
268}
269a.ui.ui.ui.basic.grey.label:hover {
270 background: transparent;
271 border-color: var(--color-label-hover-bg);
272 color: var(--color-label-hover-bg);
273}
274
275.ui.horizontal.label {
276 margin: 0 0.5em 0 0;
277 padding: 0.4em 0.833em;
278 min-width: 3em;
279 text-align: center;
280}
281
282.ui.circular.label {
283 min-width: 2em;
284 min-height: 2em;
285 padding: 0.5em !important;
286 line-height: 1;
287 text-align: center;
288 border-radius: 500rem;
289 justify-content: center;
290}
291
292.ui.mini.label {
293 font-size: 0.64285714rem;
294}
295.ui.tiny.label {
296 font-size: 0.71428571rem;
297}
298.ui.small.label {
299 font-size: 0.78571429rem;
300}
301.ui.large.label {
302 font-size: 1rem;
303}