Improve avatar uploading / resizing / compressing, remove Fomantic card module (#24653)

Fixes: #8972
Fixes: #24263

And I think it also (partially) fix #24263 (no need to convert) ,
because users could upload any supported image format if it isn't larger
than AVATAR_MAX_ORIGIN_SIZE


The main idea: 

* if the uploaded file size is not larger than AVATAR_MAX_ORIGIN_SIZE,
use the origin
* if the resized size is larger than the origin, use the origin

Screenshots:

JPG:

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/70e98bb0-ecb9-4c4e-a89f-4a37d4e37f8e)

</details>

APNG:

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/9055135b-5e2d-4152-bd72-596fcb7c6671)


![image](https://github.com/go-gitea/gitea/assets/2114189/50364caf-f7f6-4241-a289-e485fe4cd582)

</details>

WebP (animated)

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/f642eb85-498a-49a5-86bf-0a7b04089ae0)

</details>

The only exception: if a WebP image is larger than MaxOriginSize and it
is animated, then current `webp` package can't decode it, so only in
this case it isn't supported. IMO no need to support such case: why a
user would upload a 1MB animated webp as avatar? crazy .....

---------

Co-authored-by: silverwind <me@silverwind.io>

4 files changed, 139 insertions, 65 deletions

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 507d92b011..6c1bbb00c4 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1046,62 +1046,6 @@ a.label,
   box-shadow: -1px -1px 0 0 var(--color-secondary);
 }
 
-.ui.cards > .card,
-.ui.card {
-  background: var(--color-card);
-  border: 1px solid var(--color-secondary);
-  box-shadow: none;
-}
-
-.ui.cards > .card > .content,
-.ui.card > .content {
-  border-color: var(--color-secondary);
-}
-
-.ui.cards > .card > .extra,
-.ui.card > .extra,
-.ui.cards > .card > .extra a:not(.ui),
-.ui.card > .extra a:not(.ui) {
-  color: var(--color-text);
-}
-
-.ui.cards > .card > .extra a:not(.ui):hover,
-.ui.card > .extra a:not(.ui):hover {
-  color: var(--color-primary);
-}
-
-.ui.cards > .card > .content > .header,
-.ui.card > .content > .header {
-  color: var(--color-text);
-}
-
-.ui.cards > .card > .content > .description,
-.ui.card > .content > .description {
-  color: var(--color-text);
-}
-
-.ui.cards > .card .meta > a:not(.ui),
-.ui.card .meta > a:not(.ui) {
-  color: var(--color-text-light-2);
-}
-
-.ui.cards > .card .meta > a:not(.ui):hover,
-.ui.card .meta > a:not(.ui):hover {
-  color: var(--color-text);
-}
-
-.ui.cards a.card:hover,
-a.ui.card:hover {
-  border: 1px solid var(--color-secondary);
-  background: var(--color-card);
-}
-
-.ui.cards > .card > .extra,
-.ui.card > .extra {
-  color: var(--color-text);
-  border-top-color: var(--color-secondary-light-1) !important;
-}
-
 .ui.comments .comment .text {
   margin: 0;
 }
@@ -1183,12 +1127,10 @@ a.ui.card:hover {
 
 img.ui.avatar,
 .ui.avatar img,
-.ui.avatar svg,
-.ui.cards > .card img.avatar,
-.ui.cards > .card .avatar img,
-.ui.card img.avatar,
-.ui.card .avatar img {
+.ui.avatar svg {
   border-radius: var(--border-radius);
+  object-fit: contain;
+  aspect-ratio: 1;
 }
 
 .ui.divided.list > .item {
diff --git a/web_src/css/index.css b/web_src/css/index.css
index 6fb92f2ecb..1723de3a2d 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -10,6 +10,7 @@
 @import "./modules/tippy.css";
 @import "./modules/modal.css";
 @import "./modules/breadcrumb.css";
+@import "./modules/card.css";
 @import "./code/linebutton.css";
 @import "./markup/content.css";
 @import "./markup/codecopy.css";
diff --git a/web_src/css/modules/card.css b/web_src/css/modules/card.css
new file mode 100644
index 0000000000..c0f7e83037
--- /dev/null
+++ b/web_src/css/modules/card.css
@@ -0,0 +1,134 @@
+/* Below styles are a subset of the full fomantic card styles which are */
+/* needed to get all current uses of fomantic cards working. */
+/* TODO: remove all these styles and use custom styling instead  */
+
+.ui.card:last-child {
+  margin-bottom: 0;
+}
+.ui.card:first-child {
+  margin-top: 0;
+}
+
+.ui.cards > .card,
+.ui.card {
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  width: 290px;
+  min-height: 0;
+  padding: 0;
+  background: var(--color-card);
+  border: 1px solid var(--color-secondary);
+  box-shadow: none;
+  word-wrap: break-word;
+}
+
+.ui.card {
+  margin: 1em 0;
+}
+
+.ui.cards {
+  display: flex;
+  margin: -0.875em -0.5em;
+  flex-wrap: wrap;
+}
+
+.ui.cards > .card {
+  display: flex;
+  margin: 0.875em 0.5em;
+  float: none;
+}
+
+.ui.cards > .card > .content,
+.ui.card > .content {
+  border-top: 1px solid var(--color-secondary);
+  max-width: 100%;
+  padding: 1em;
+  font-size: 1em;
+}
+
+.ui.cards > .card > .content > .meta + .description,
+.ui.cards > .card > .content > .header + .description,
+.ui.card > .content > .meta + .description,
+.ui.card > .content > .header + .description {
+  margin-top: .5em;
+}
+
+.ui.cards > .card > .content > .header:not(.ui),
+.ui.card > .content > .header:not(.ui) {
+  font-weight: 500;
+  font-size: 1.28571429em;
+  margin-top: -.21425em;
+  line-height: 1.28571429em;
+}
+
+.ui.cards > .card > .content:first-child,
+.ui.card > .content:first-child {
+  border-top: none;
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+}
+
+.ui.cards > .card > :last-child,
+.ui.card > :last-child {
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+}
+
+.ui.cards > .card > :only-child,
+.ui.card > :only-child {
+  border-radius: var(--border-radius) !important;
+}
+
+.ui.cards > .card > .extra,
+.ui.card > .extra,
+.ui.cards > .card > .extra a:not(.ui),
+.ui.card > .extra a:not(.ui) {
+  color: var(--color-text);
+}
+
+.ui.cards > .card > .extra a:not(.ui):hover,
+.ui.card > .extra a:not(.ui):hover {
+  color: var(--color-primary);
+}
+
+.ui.cards > .card > .content > .header,
+.ui.card > .content > .header {
+  color: var(--color-text);
+}
+
+.ui.cards > .card > .content > .description,
+.ui.card > .content > .description {
+  color: var(--color-text);
+}
+
+.ui.cards > .card .meta > a:not(.ui),
+.ui.card .meta > a:not(.ui) {
+  color: var(--color-text-light-2);
+}
+
+.ui.cards > .card .meta > a:not(.ui):hover,
+.ui.card .meta > a:not(.ui):hover {
+  color: var(--color-text);
+}
+
+.ui.cards a.card:hover,
+a.ui.card:hover {
+  border: 1px solid var(--color-secondary);
+  background: var(--color-card);
+}
+
+.ui.cards > .card > .extra,
+.ui.card > .extra {
+  color: var(--color-text);
+  border-top-color: var(--color-secondary-light-1) !important;
+}
+
+.ui.three.cards {
+  margin-left: -1em;
+  margin-right: -1em;
+}
+
+.ui.three.cards > .card {
+  width: calc(33.33333333333333% - 2em);
+  margin-left: 1em;
+  margin-right: 1em;
+}
diff --git a/web_src/css/user.css b/web_src/css/user.css
index 0a8b49b038..648480d71d 100644
--- a/web_src/css/user.css
+++ b/web_src/css/user.css
@@ -39,16 +39,13 @@
 }
 
 .user.profile .ui.card #profile-avatar {
-  background: none;
   padding: 1rem 1rem 0.25rem;
   justify-content: center;
 }
 
 .user.profile .ui.card #profile-avatar img {
-  width: 100%;
+  max-width: 100%;
   height: auto;
-  object-fit: contain;
-  margin: 0;
 }
 
 @media (max-width: 767px) {