diff options
| author | silverwind <me@silverwind.io> | 2023-06-27 04:45:24 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-06-27 02:45:24 +0000 |
| commit | c71e8abbc331e2a68186aa11a4797ecd24ff6d27 (patch) | |
| tree | 24488621201c7501bd6056053e9cca3de221fce1 /web_src/css | |
| parent | 72c60f94c1a54707ebad2af0f587c08d2e8f992c (diff) | |
| download | gitea-c71e8abbc331e2a68186aa11a4797ecd24ff6d27.tar.gz gitea-c71e8abbc331e2a68186aa11a4797ecd24ff6d27.zip | |
Add toasts to UI (#25449)
Fixes https://github.com/go-gitea/gitea/issues/24353
In some case like async success/error, it is useful to show toasts in UI.
Diffstat (limited to 'web_src/css')
| -rw-r--r-- | web_src/css/index.css | 1 | ||||
| -rw-r--r-- | web_src/css/modules/toast.css | 78 | ||||
| -rw-r--r-- | web_src/css/standalone/devtest.css | 16 |
3 files changed, 95 insertions, 0 deletions
diff --git a/web_src/css/index.css b/web_src/css/index.css index 66a1a9ffd3..d7ac9f453d 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -8,6 +8,7 @@ @import "./modules/card.css"; @import "./modules/comment.css"; @import "./modules/navbar.css"; +@import "./modules/toast.css"; @import "./shared/issuelist.css"; @import "./shared/milestone.css"; diff --git a/web_src/css/modules/toast.css b/web_src/css/modules/toast.css new file mode 100644 index 0000000000..c96521f273 --- /dev/null +++ b/web_src/css/modules/toast.css @@ -0,0 +1,78 @@ +.toastify { + color: var(--color-white); + position: fixed; + opacity: 0; + transition: all .2s ease; + z-index: 500; + border-radius: 4px; + box-shadow: 0 8px 24px var(--color-shadow); + display: flex; + max-width: 50vw; + min-width: 300px; + padding: 4px; +} + +.toastify.on { + opacity: 1; +} + +.toast-body { + flex: 1; + padding: 5px 0; + overflow-wrap: anywhere; +} + +.toast-close, +.toast-icon { + color: currentcolor; + border-radius: 3px; + background: transparent; + border: none; + display: inline-block; + display: flex; + width: 30px; + height: 30px; + justify-content: center; + align-items: center; +} + +.toast-close:hover { + background: var(--color-hover); +} + +.toast-close:active { + background: var(--color-active); +} + +.toastify-right { + right: 15px; +} + +.toastify-left { + left: 15px; +} + +.toastify-top { + top: -150px; +} + +.toastify-bottom { + bottom: -150px; +} + +.toastify-center { + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; +} + +@media (max-width: 360px) { + .toastify-right, .toastify-left { + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + max-width: fit-content; + } +} diff --git a/web_src/css/standalone/devtest.css b/web_src/css/standalone/devtest.css new file mode 100644 index 0000000000..a7b00e1e56 --- /dev/null +++ b/web_src/css/standalone/devtest.css @@ -0,0 +1,16 @@ +.button-sample-groups { + margin: 0; padding: 0; +} + +.button-sample-groups .sample-group { + list-style: none; margin: 0; padding: 0; +} + +.button-sample-groups .sample-group .ui.button { + margin-bottom: 5px; +} + +h1, h2 { + margin: 0; + padding: 10px 0; +} |