oppi.li
1.ui.modal.g-modal-confirm {
2 max-width: min(800px, 90vw);
3 width: fit-content;
4}
5
6.ui.modal.g-modal-confirm > .inside.close.icon {
7 padding: 0;
8 width: 1em;
9 height: 1em;
10 top: 1.2em;
11}
12
13.ui.modal > .close.icon[height="16"] {
14 top: 0.7em; /* fomantic uses absolute layout, so if we have special icon size, it needs this trick to align vertically */
15 color: var(--color-text-dark);
16}
17
18.ui.modal > .header {
19 /* can't use display:flex, because some headers have space-separated elements, eg: delete branch modal */
20 color: var(--color-text-dark);
21 background: var(--color-body);
22 border-color: var(--color-secondary);
23 border-top-left-radius: var(--border-radius);
24 border-top-right-radius: var(--border-radius);
25 vertical-align: middle;
26}
27
28.ui.modal > .header .svg {
29 vertical-align: middle;
30 display: inline-block;
31}
32
33.ui.modal {
34 background: var(--color-body);
35 box-shadow: 1px 3px 3px 0 var(--color-shadow), 1px 3px 15px 2px var(--color-shadow);
36}
37
38/* Gitea sometimes use a form in a modal dialog, then the "positive" button could submit the form directly
39Fomantic UI only supports the layout: <div .modal><div .content/><div .actions/></div>
40However, Gitea uses the following layouts:
41* <div .modal><div .content><div .actions/></div></div>
42* <div .modal><form><div .content/><div .actions/></form></div>
43* <div .modal><div .content><form><div .actions/></form></div></div>
44* <div .modal><div .content></div><form><div .actions/></form></div>
45* ...
46These inconsistent layouts should be refactored to simple ones.
47*/
48
49.ui.modal > .content,
50.ui.modal form > .content {
51 padding: 1.5em;
52 background: var(--color-body);
53}
54
55.ui.modal > .actions,
56.ui.modal .content + .actions,
57.ui.modal .content + form > .actions {
58 background: var(--color-secondary-bg);
59 border-color: var(--color-secondary);
60 padding: 1rem;
61 text-align: right;
62}
63
64.ui.modal .content > .actions {
65 padding-top: 1em; /* if the "actions" is in the "content", some paddings are already added by the "content" */
66 text-align: right;
67}
68
69/* positive/negative action buttons */
70.ui.modal .actions > .ui.button {
71 display: inline-flex;
72 align-items: center;
73 padding: 10px 12px 10px 10px;
74 margin-right: 0;
75}
76
77.ui.modal .actions > .ui.button.danger {
78 display: block;
79 width: 100%;
80 margin: 0 auto;
81 text-align: center;
82}
83
84.ui.modal .actions > .ui.button .svg {
85 margin-right: 5px;
86}