diff options
| author | wxiaoguang <wxiaoguang@gmail.com> | 2023-08-24 20:13:23 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-08-24 12:13:23 +0000 |
| commit | 09faf43ef822ca4dbdfb2a2714ad43a782acf6e8 (patch) | |
| tree | 3ed8574c4d0437d76fee67c2ac16cc1e011e694f /web_src/css/features | |
| parent | 4de224469774a502f560cbf62060a03016c97167 (diff) | |
| download | gitea-09faf43ef822ca4dbdfb2a2714ad43a782acf6e8.tar.gz gitea-09faf43ef822ca4dbdfb2a2714ad43a782acf6e8.zip | |
Improve Image Diff UI (#26696)
1. Use `is-loading` instead of `ui loader`
2. Introduce class name `image-diff-tabs`, instead of searching `gt-hidden`, which is fragile
3. Align the UI elements, see the screenshots.
Diffstat (limited to 'web_src/css/features')
| -rw-r--r-- | web_src/css/features/imagediff.css | 13 |
1 files changed, 11 insertions, 2 deletions
diff --git a/web_src/css/features/imagediff.css b/web_src/css/features/imagediff.css index a7bce3f471..ad3165e8d8 100644 --- a/web_src/css/features/imagediff.css +++ b/web_src/css/features/imagediff.css @@ -1,6 +1,14 @@ +.image-diff-tabs { + min-height: 60px; + +} +.image-diff-tabs.is-loading .tab { + display: none; +} + .image-diff-container { text-align: center; - padding: 1em 0; + padding: 0.5em 0 1em; } .image-diff-container img { @@ -31,6 +39,7 @@ .image-diff-container .diff-swipe { margin: auto; + padding: 1em 0; } .image-diff-container .diff-swipe .swipe-frame { @@ -89,7 +98,7 @@ } .image-diff-container .diff-overlay .overlay-frame { - margin: 0 auto; + margin: 1em auto 0; position: relative; } |