From 75c62054a633fc9ae25887f72da1ec2d08a31e90 Mon Sep 17 00:00:00 2001 From: wxiaoguang <wxiaoguang@gmail.com> Date: Mon, 24 Apr 2023 19:08:59 +0800 Subject: 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> --- web_src/css/helpers.css | 4 ++++ web_src/css/modules/modal.css | 16 +++++++++++++++- 2 files changed, 19 insertions(+), 1 deletion(-) (limited to 'web_src') 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; } -- cgit v1.2.3