.ui.modal.g-modal-confirm { max-width: min(800px, 90vw); width: fit-content; } .ui.modal.g-modal-confirm > .inside.close.icon { padding: 0; width: 1em; height: 1em; top: 1.2em; } .ui.modal > .close.icon[height="16"] { top: 0.7em; /* fomantic uses absolute layout, so if we have special icon size, it needs this trick to align vertically */ color: var(--color-text-dark); } .ui.modal > .header { /* can't use display:flex, because some headers have space-separated elements, eg: delete branch modal */ color: var(--color-text-dark); background: var(--color-body); border-color: var(--color-secondary); border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); vertical-align: middle; } .ui.modal > .header .svg { vertical-align: middle; display: inline-block; } .ui.modal { background: var(--color-body); box-shadow: 1px 3px 3px 0 var(--color-shadow), 1px 3px 15px 2px var(--color-shadow); } /* Gitea sometimes use a form in a modal dialog, then the "positive" button could submit the form directly Fomantic UI only supports the layout:
However, Gitea uses the following layouts: *
*
*
*
* ... These inconsistent layouts should be refactored to simple ones. */ .ui.modal > .content, .ui.modal form > .content { padding: 1.5em; background: var(--color-body); } .ui.modal > .actions, .ui.modal .content + .actions, .ui.modal .content + form > .actions { background: var(--color-secondary-bg); border-color: var(--color-secondary); padding: 1rem; text-align: right; } .ui.modal .content > .actions { padding-top: 1em; /* if the "actions" is in the "content", some paddings are already added by the "content" */ text-align: right; } /* positive/negative action buttons */ .ui.modal .actions > .ui.button { display: inline-flex; align-items: center; padding: 10px 12px 10px 10px; margin-right: 0; } .ui.modal .actions > .ui.button.danger { display: block; width: 100%; margin: 0 auto; text-align: center; } .ui.modal .actions > .ui.button .svg { margin-right: 5px; }