oppi.li
1fieldset {
2 margin: 0.2em 0 0.3em;
3 padding: 0;
4}
5
6fieldset legend {
7 font-weight: var(--font-weight-medium);
8 margin-bottom: 0.75em;
9}
10
11fieldset + fieldset > legend {
12 width: 100%;
13 padding-top: 1em;
14 border-top: 1px solid var(--color-secondary);
15}
16
17fieldset label {
18 display: block;
19 margin-bottom: 0.6em;
20}
21
22fieldset label:has(input[type="text"]),
23fieldset label:has(input[type="number"]) {
24 font-weight: var(--font-weight-medium);
25}
26
27/* override inline style on custom input elements */
28fieldset label .ui.dropdown {
29 width: 100% !important;
30}
31
32fieldset .help {
33 font-weight: var(--font-weight-normal);
34}
35
36.form fieldset .help { /* overrides other .form .help rules in this file, remove when obsolete */
37 display: block !important;
38 padding-bottom: 0;
39}
40
41fieldset label > input,
42fieldset label > textarea,
43fieldset label > .ui.dropdown,
44fieldset label + .ui.dropdown {
45 margin-top: 0.28rem !important;
46}
47
48fieldset label > input[type="checkbox"],
49fieldset label > input[type="radio"] {
50 margin-right: 0.75em;
51 margin-top: 0 !important;
52 vertical-align: initial !important; /* overrides a semantic.css rule, remove when obsolete */
53}
54
55@media (min-width: 768px) {
56 .optionmatrix input[type="radio"] {
57 margin: 0;
58 }
59
60 /* center columns except first */
61 .optionmatrix td + td, .optionmatrix th + th {
62 min-width: 10em;
63 text-align: center !important; /* overrides table.css "inherit" rule */
64 }
65}
66
67/* if an element with class "hide-unless-checked" follows a label
68 * that has no checked input, it will be hidden.*/
69label:not(:has(input:checked)) + .hide-unless-checked {
70 display: none;
71}
72
73.ui.input textarea,
74.ui.form textarea,
75.ui.form input:not([type]),
76.ui.form input[type="date"],
77.ui.form input[type="datetime-local"],
78.ui.form input[type="email"],
79.ui.form input[type="number"],
80.ui.form input[type="password"],
81.ui.form input[type="search"],
82.ui.form input[type="tel"],
83.ui.form input[type="time"],
84.ui.form input[type="text"],
85.ui.form input[type="file"],
86.ui.form input[type="url"] {
87 transition: none;
88}
89
90input,
91textarea,
92.ui.input > input,
93.ui.form input:not([type]),
94.ui.form select,
95.ui.form textarea,
96.ui.form input[type="date"],
97.ui.form input[type="datetime-local"],
98.ui.form input[type="email"],
99.ui.form input[type="file"],
100.ui.form input[type="number"],
101.ui.form input[type="password"],
102.ui.form input[type="search"],
103.ui.form input[type="tel"],
104.ui.form input[type="text"],
105.ui.form input[type="time"],
106.ui.form input[type="url"],
107.ui.selection.dropdown {
108 background: var(--color-input-background);
109 border-color: var(--color-input-border);
110 color: var(--color-input-text);
111}
112
113/* fix fomantic small dropdown having inconsistent padding with input */
114.ui.small.selection.dropdown {
115 padding: .67857143em 1.6em .67857143em 1em;
116}
117
118input:hover,
119textarea:hover,
120.ui.input input:hover,
121.ui.form input:not([type]):hover,
122.ui.form select:hover,
123.ui.form textarea:hover,
124.ui.form input[type="date"]:hover,
125.ui.form input[type="datetime-local"]:hover,
126.ui.form input[type="email"]:hover,
127.ui.form input[type="file"]:hover,
128.ui.form input[type="number"]:hover,
129.ui.form input[type="password"]:hover,
130.ui.form input[type="search"]:hover,
131.ui.form input[type="tel"]:hover,
132.ui.form input[type="text"]:hover,
133.ui.form input[type="time"]:hover,
134.ui.form input[type="url"]:hover,
135.ui.selection.dropdown:hover {
136 background: var(--color-input-background);
137 border-color: var(--color-input-border-hover);
138 color: var(--color-input-text);
139}
140
141input:focus,
142textarea:focus,
143.ui.input input:focus,
144.ui.form input:not([type]):focus,
145.ui.form select:focus,
146.ui.form textarea:focus,
147.ui.form input[type="date"]:focus,
148.ui.form input[type="datetime-local"]:focus,
149.ui.form input[type="email"]:focus,
150.ui.form input[type="file"]:focus,
151.ui.form input[type="number"]:focus,
152.ui.form input[type="password"]:focus,
153.ui.form input[type="search"]:focus,
154.ui.form input[type="tel"]:focus,
155.ui.form input[type="text"]:focus,
156.ui.form input[type="time"]:focus,
157.ui.form input[type="url"]:focus,
158.ui.selection.dropdown:focus {
159 background: var(--color-input-background);
160 border-color: var(--color-primary);
161 color: var(--color-input-text);
162}
163
164/* error messages */
165fieldset label.error textarea,
166fieldset label.error select,
167fieldset label.error input,
168.ui.form .fields.error .field textarea,
169.ui.form .fields.error .field select,
170.ui.form .fields.error .field input:not([type]),
171.ui.form .fields.error .field input[type="date"],
172.ui.form .fields.error .field input[type="datetime-local"],
173.ui.form .fields.error .field input[type="email"],
174.ui.form .fields.error .field input[type="number"],
175.ui.form .fields.error .field input[type="password"],
176.ui.form .fields.error .field input[type="search"],
177.ui.form .fields.error .field input[type="tel"],
178.ui.form .fields.error .field input[type="time"],
179.ui.form .fields.error .field input[type="text"],
180.ui.form .fields.error .field input[type="file"],
181.ui.form .fields.error .field input[type="url"],
182.ui.form .fields.error .field .ui.dropdown,
183.ui.form .fields.error .field .ui.dropdown .item,
184.ui.form .field.error .ui.dropdown,
185.ui.form .field.error .ui.dropdown .text,
186.ui.form .field.error .ui.dropdown .item,
187.ui.form .field.error textarea,
188.ui.form .field.error select,
189.ui.form .field.error input:not([type]),
190.ui.form .field.error input[type="date"],
191.ui.form .field.error input[type="datetime-local"],
192.ui.form .field.error input[type="email"],
193.ui.form .field.error input[type="number"],
194.ui.form .field.error input[type="password"],
195.ui.form .field.error input[type="search"],
196.ui.form .field.error input[type="tel"],
197.ui.form .field.error input[type="time"],
198.ui.form .field.error input[type="text"],
199.ui.form .field.error input[type="file"],
200.ui.form .field.error input[type="url"],
201.ui.form .field.error select:focus,
202.ui.form .field.error input:not([type]):focus,
203.ui.form .field.error input[type="date"]:focus,
204.ui.form .field.error input[type="datetime-local"]:focus,
205.ui.form .field.error input[type="email"]:focus,
206.ui.form .field.error input[type="number"]:focus,
207.ui.form .field.error input[type="password"]:focus,
208.ui.form .field.error input[type="search"]:focus,
209.ui.form .field.error input[type="tel"]:focus,
210.ui.form .field.error input[type="time"]:focus,
211.ui.form .field.error input[type="text"]:focus,
212.ui.form .field.error input[type="file"]:focus,
213.ui.form .field.error input[type="url"]:focus {
214 background-color: var(--color-error-bg);
215 border-color: var(--color-error-border);
216 color: var(--color-error-text);
217}
218
219.ui.form .fields.error .field .ui.dropdown,
220.ui.form .field.error .ui.dropdown,
221.ui.form .fields.error .field .ui.dropdown:hover,
222.ui.form .field.error .ui.dropdown:hover {
223 border-color: var(--color-error-border) !important;
224}
225
226.ui.form .fields.error .field .ui.dropdown .menu .item:hover,
227.ui.form .field.error .ui.dropdown .menu .item:hover {
228 background-color: var(--color-error-bg-hover);
229}
230
231.ui.form .fields.error .field .ui.dropdown .menu .active.item,
232.ui.form .field.error .ui.dropdown .menu .active.item {
233 background-color: var(--color-error-bg-active) !important;
234}
235
236.ui.form .fields.error .dropdown .menu,
237.ui.form .field.error .dropdown .menu {
238 border-color: var(--color-error-border) !important;
239}
240
241input:-webkit-autofill,
242input:-webkit-autofill:focus,
243input:-webkit-autofill:hover,
244input:-webkit-autofill:active,
245.ui.form .field.field input:-webkit-autofill,
246.ui.form .field.field input:-webkit-autofill:focus,
247.ui.form .field.field input:-webkit-autofill:hover,
248.ui.form .field.field input:-webkit-autofill:active {
249 -webkit-background-clip: text;
250 -webkit-text-fill-color: var(--color-text);
251 box-shadow: 0 0 0 100px var(--color-primary-light-6) inset !important;
252 border-color: var(--color-primary-light-4) !important;
253}
254
255.ui.form .field.muted {
256 opacity: var(--opacity-disabled);
257}
258
259.ui.form .field > label,
260.ui.form .inline.fields > label,
261.ui.form .inline.fields .field > label,
262.ui.form .inline.fields .field > p,
263.ui.form .inline.field > label,
264.ui.form .inline.field > p {
265 color: var(--color-text);
266}
267
268.ui.form .required.fields > .field > label::after,
269.ui.form .required.field > label::after,
270.ui.form label.required::after {
271 color: var(--color-red);
272}
273
274.ui.input {
275 color: var(--color-input-text);
276}
277
278/* match <select> padding to <input> */
279.ui.form select {
280 padding: 0.67857143em 1em;
281}
282
283.form .help {
284 color: var(--color-secondary-dark-8);
285 padding-bottom: 0.6em;
286 display: inline-block;
287}
288
289#create-page-form form {
290 margin: auto;
291}
292
293#create-page-form form .ui.message {
294 text-align: center;
295}
296
297@media (min-width: 768px) {
298 #create-page-form form {
299 width: 800px !important;
300 }
301 #create-page-form form .header {
302 padding-left: 280px !important;
303 }
304 #create-page-form form .inline.field > label {
305 text-align: right;
306 width: 250px !important;
307 word-wrap: break-word;
308 }
309 #create-page-form form .help {
310 margin-left: 265px !important;
311 }
312 #create-page-form form .optional .title {
313 margin-left: 250px !important;
314 }
315 #create-page-form form .inline.field > input,
316 #create-page-form form .inline.field > textarea {
317 width: 50%;
318 }
319}
320
321@media (max-width: 767.98px) {
322 #create-page-form form .optional .title {
323 margin-left: 15px;
324 }
325 #create-page-form form .inline.field > label {
326 display: block;
327 }
328}
329
330.m-captcha-style {
331 width: 100%;
332 height: 5em;
333 vertical-align: middle;
334 display: inline-block;
335}
336
337@media (min-width: 768px) {
338 .g-recaptcha-style,
339 .h-captcha-style {
340 margin: 0 auto !important;
341 width: 304px;
342 padding-left: 30px;
343 }
344 .g-recaptcha-style iframe,
345 .h-captcha-style iframe {
346 border-radius: var(--border-radius) !important;
347 width: 302px !important;
348 height: 76px !important;
349 }
350 .m-captcha-style {
351 width: 50%;
352 }
353}
354
355@media (max-height: 575px) {
356 #rc-imageselect,
357 .g-recaptcha-style,
358 .h-captcha-style {
359 transform: scale(0.77);
360 transform-origin: 0 0;
361 }
362}
363
364.user.forgot.password form,
365.user.reset.password form,
366.user.signup form {
367 margin: auto;
368 width: 700px !important;
369}
370
371.user.activate form .ui.message,
372.user.forgot.password form .ui.message,
373.user.reset.password form .ui.message,
374.user.link-account form .ui.message,
375.user.signin form .ui.message,
376.user.signup form .ui.message {
377 text-align: center;
378}
379
380@media (min-width: 768px) {
381 .user.activate form,
382 .user.forgot.password form,
383 .user.reset.password form,
384 .user.link-account form,
385 .user.signin form,
386 .user.signup form {
387 width: 800px !important;
388 }
389 .user.activate form .header,
390 .user.forgot.password form .header,
391 .user.reset.password form .header,
392 .user.link-account form .header,
393 .user.signin form .header,
394 .user.signup form .header {
395 padding-left: 280px !important;
396 }
397 .user.activate form .inline.field > label {
398 text-align: right;
399 width: 250px !important;
400 word-wrap: break-word;
401 }
402 .user.activate form .help,
403 .user.forgot.password form .help,
404 .user.reset.password form .help,
405 .user.link-account form .help,
406 .user.signin form .help,
407 .user.signup form .help {
408 margin-left: 265px !important;
409 }
410 .user.activate form .optional .title,
411 .user.forgot.password form .optional .title,
412 .user.reset.password form .optional .title,
413 .user.link-account form .optional .title,
414 .user.signin form .optional .title,
415 .user.signup form .optional .title {
416 margin-left: 250px !important;
417 }
418}
419
420@media (max-width: 767.98px) {
421 .user.activate form .optional .title,
422 .user.forgot.password form .optional .title,
423 .user.reset.password form .optional .title,
424 .user.link-account form .optional .title,
425 .user.signin form .optional .title,
426 .user.signup form .optional .title {
427 margin-left: 15px;
428 }
429 .user.activate form .inline.field > label,
430 .user.forgot.password form .inline.field > label,
431 .user.reset.password form .inline.field > label,
432 .user.link-account form .inline.field > label,
433 .user.signin form .inline.field > label,
434 .user.signup form .inline.field > label {
435 display: block;
436 }
437}
438
439.user.activate form .header,
440.user.forgot.password form .header,
441.user.reset.password form .header,
442.user.link-account form .header,
443.user.signin form .header,
444.user.signup form .header {
445 padding-left: 0 !important;
446 text-align: center;
447}
448
449.user.activate form .inline.field > label,
450.user.forgot.password form .inline.field > label,
451.user.reset.password form .inline.field > label,
452.user.link-account form .inline.field > label,
453.user.signin form .inline.field > label,
454.user.signup form .inline.field > label {
455 width: 200px;
456}
457
458@media (max-width: 767.98px) {
459 .user.activate form .inline.field > label,
460 .user.forgot.password form .inline.field > label,
461 .user.reset.password form .inline.field > label,
462 .user.link-account form .inline.field > label,
463 .user.signin form .inline.field > label,
464 .user.signup form .inline.field > label {
465 width: 100% !important;
466 }
467}
468
469.user.activate form input[type="number"],
470.user.forgot.password form input[type="number"],
471.user.reset.password form input[type="number"],
472.user.link-account form input[type="number"],
473.user.signin form input[type="number"],
474.user.signup form input[type="number"] {
475 -moz-appearance: textfield;
476}
477
478.user.activate form input::-webkit-outer-spin-button,
479.user.forgot.password form input::-webkit-outer-spin-button,
480.user.reset.password form input::-webkit-outer-spin-button,
481.user.link-account form input::-webkit-outer-spin-button,
482.user.signin form input::-webkit-outer-spin-button,
483.user.signup form input::-webkit-outer-spin-button,
484.user.activate form input::-webkit-inner-spin-button,
485.user.forgot.password form input::-webkit-inner-spin-button,
486.user.reset.password form input::-webkit-inner-spin-button,
487.user.link-account form input::-webkit-inner-spin-button,
488.user.signin form input::-webkit-inner-spin-button,
489.user.signup form input::-webkit-inner-spin-button {
490 -webkit-appearance: none;
491 margin: 0;
492}
493
494.repository.new.repo form,
495.repository.new.migrate form,
496.repository.new.fork form {
497 margin: auto;
498}
499
500.repository.new.repo form .ui.message,
501.repository.new.migrate form .ui.message,
502.repository.new.fork form .ui.message {
503 text-align: center;
504}
505
506@media (min-width: 768px) {
507 .repository.new.repo form,
508 .repository.new.migrate form,
509 .repository.new.fork form {
510 width: 800px !important;
511 }
512 .repository.new.repo form .header,
513 .repository.new.migrate form .header,
514 .repository.new.fork form .header {
515 padding-left: 280px !important;
516 }
517 .repository.new.migrate form .inline.field > label,
518 .repository.new.fork form .inline.field > label {
519 text-align: right;
520 width: 250px !important;
521 word-wrap: break-word;
522 }
523 .repository.new.migrate form .help,
524 .repository.new.fork form .help {
525 margin-left: 265px !important;
526 }
527 .repository.new.repo form .optional .title,
528 .repository.new.migrate form .optional .title,
529 .repository.new.fork form .optional .title {
530 margin-left: 250px !important;
531 }
532 .repository.new.migrate form .inline.field > input,
533 .repository.new.fork form .inline.field > input,
534 .repository.new.migrate form .inline.field > textarea,
535 .repository.new.fork form .inline.field > textarea {
536 width: 50%;
537 }
538}
539
540@media (max-width: 767.98px) {
541 .repository.new.repo form .optional .title,
542 .repository.new.migrate form .optional .title,
543 .repository.new.fork form .optional .title {
544 margin-left: 15px;
545 }
546 .repository.new.repo form .inline.field > label,
547 .repository.new.migrate form .inline.field > label,
548 .repository.new.fork form .inline.field > label {
549 display: block;
550 }
551}
552
553.repository.new.migrate form .dropdown .text,
554.repository.new.fork form .dropdown .text {
555 margin-right: 0 !important;
556}
557
558.repository.new.repo form .header,
559.repository.new.migrate form .header,
560.repository.new.fork form .header {
561 padding-left: 0 !important;
562 text-align: center;
563}
564
565.repository.new.migrate form .selection.dropdown,
566.repository.new.fork form .selection.dropdown,
567.repository.new.fork form .field a {
568 vertical-align: middle;
569 width: 50% !important;
570}
571
572@media (max-width: 767.98px) {
573 .repository.new.repo form label,
574 .repository.new.migrate form label,
575 .repository.new.fork form label,
576 .repository.new.repo form .inline.field > input,
577 .repository.new.migrate form .inline.field > input,
578 .repository.new.fork form .inline.field > input,
579 .repository.new.fork form .field a,
580 .repository.new.repo form .selection.dropdown,
581 .repository.new.migrate form .selection.dropdown,
582 .repository.new.fork form .selection.dropdown {
583 width: 100% !important;
584 }
585 .repository.new.repo form .field button,
586 .repository.new.migrate form .field button,
587 .repository.new.fork form .field button,
588 .repository.new.repo form .field a,
589 .repository.new.migrate form .field a {
590 margin-bottom: 1em;
591 width: 100%;
592 }
593}
594
595@media (min-width: 768px) {
596 .repository.new.repo .ui.form #auto-init {
597 margin-left: 265px !important;
598 }
599}
600
601@media (max-width: 767.98px) {
602 .repository.new.repo .ui.form .selection.dropdown:not(.owner) {
603 width: 100% !important;
604 }
605}
606
607.ui.form .field > .selection.dropdown {
608 min-width: 14em; /* matches the default min width */
609}
610
611.githook textarea {
612 font-family: var(--fonts-monospace);
613}
614
615@media (max-width: 767.98px) {
616 .new.org .ui.form .field button,
617 .new.org .ui.form .field a {
618 margin-bottom: 1em;
619 width: 100%;
620 }
621 .new.org .ui.form .field input:not([type="checkbox"], [type="radio"]) {
622 width: 100% !important;
623 }
624}