mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2026-05-13 14:30:25 +00:00
6b75654cc2
Related issue: https://codeberg.org/forgejo/forgejo/issues/8581 This should be a nice first step towards RTL support. Future PRs can look at updating the tailwind classes, changing some of the icons (arrow left might need to become arrow right in some cases for example, and updating the template files) Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/12491 Reviewed-by: 0ko <0ko@noreply.codeberg.org>
86 lines
2.5 KiB
CSS
86 lines
2.5 KiB
CSS
.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); /* stylelint-disable-line logical-css/require-logical-properties */
|
|
border-top-right-radius: var(--border-radius); /* stylelint-disable-line logical-css/require-logical-properties */
|
|
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: <div .modal><div .content/><div .actions/></div>
|
|
However, Gitea uses the following layouts:
|
|
* <div .modal><div .content><div .actions/></div></div>
|
|
* <div .modal><form><div .content/><div .actions/></form></div>
|
|
* <div .modal><div .content><form><div .actions/></form></div></div>
|
|
* <div .modal><div .content></div><form><div .actions/></form></div>
|
|
* ...
|
|
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: end;
|
|
}
|
|
|
|
.ui.modal .content > .actions {
|
|
padding-top: 1em; /* if the "actions" is in the "content", some paddings are already added by the "content" */
|
|
text-align: end;
|
|
}
|
|
|
|
/* positive/negative action buttons */
|
|
.ui.modal .actions > .ui.button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 10px 12px 10px 10px;
|
|
margin-inline-end: 0;
|
|
}
|
|
|
|
.ui.modal .actions > .ui.button.danger {
|
|
display: block;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.ui.modal .actions > .ui.button .svg {
|
|
margin-inline-end: 5px;
|
|
}
|