aboutsummaryrefslogtreecommitdiffstats
path: root/web_src
diff options
context:
space:
mode:
authorwxiaoguang <wxiaoguang@gmail.com>2023-04-24 19:08:59 +0800
committerGitHub <noreply@github.com>2023-04-24 07:08:59 -0400
commit75c62054a633fc9ae25887f72da1ec2d08a31e90 (patch)
treeaa36b43874d7c556120c04b646175d52de5ee10d /web_src
parent47748df9b38bdde4c39d7e55f4517536d9d2fa21 (diff)
downloadgitea-75c62054a633fc9ae25887f72da1ec2d08a31e90.tar.gz
gitea-75c62054a633fc9ae25887f72da1ec2d08a31e90.zip
Improve some modal action buttons (#24289)
Follow #24097 and #24285 And add a devtest page for modal action button testing. http://localhost:3000/devtest/fomantic-modal Now the `modal_actions_confirm.tmpl` could support: green / blue / yellow positive buttons, the negative button is "secondary". ps: this PR is only a small improvement, there are still a lot of buttons not having proper colors. In the future these buttons could be improved by this approach. These buttons could also be improved according to the conclusion of #24285 in the future. ![image](https://user-images.githubusercontent.com/2114189/233847773-a6d6b29b-7b5c-490e-8425-40dfd0ad2529.png) And add GitHub-like single danger button (context: https://github.com/go-gitea/gitea/issues/24285#issuecomment-1519100312) ![image](https://user-images.githubusercontent.com/2114189/233891566-055d7611-894d-4d5a-baf5-f6369180bf8d.png) --------- Co-authored-by: silverwind <me@silverwind.io>
Diffstat (limited to 'web_src')
-rw-r--r--web_src/css/helpers.css4
-rw-r--r--web_src/css/modules/modal.css16
2 files changed, 19 insertions, 1 deletions
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index beb93e1e86..c69b4d5450 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -1,3 +1,7 @@
+/*
+Gitea's tailwind-style CSS helper classes have `gt-` prefix.
+Gitea's private styles use `g-` prefix.
+*/
.gt-df { display: flex !important; }
.gt-di { display: inline !important; }
.gt-dif { display: inline-flex !important; }
diff --git a/web_src/css/modules/modal.css b/web_src/css/modules/modal.css
index 60d096dfbf..1bf55ea4cc 100644
--- a/web_src/css/modules/modal.css
+++ b/web_src/css/modules/modal.css
@@ -1,8 +1,15 @@
-.ui.modal.gitea-confirm-modal {
+.ui.modal.g-modal-confirm {
max-width: min(800px, 90vw);
width: fit-content;
}
+.ui.modal.g-modal-confirm > .inside.close {
+ padding: 0;
+ width: 1em;
+ height: 1em;
+ top: 1.2em;
+}
+
.ui.modal > .header {
/* can't use display:flex, because some headers have space-separated elements, eg: delete branch modal */
color: var(--color-text-dark);
@@ -42,6 +49,13 @@
padding: 10px 12px 10px 10px;
}
+.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;
}