1 files changed, 86 insertions, 0 deletions
diff --git a/web_src/css/modules/modal.css b/web_src/css/modules/modal.css
new file mode 100644
index 0000000..54a4ef8
--- /dev/null
+++ b/web_src/css/modules/modal.css
@@ -0,0 +1,86 @@
+.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: <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: 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;
+}