Rename ".button-link" to ".button-ghost" (#24670)

Mainstream frameworks:

* https://getbootstrap.com/docs/5.0/components/buttons/
* https://primer.style/css/components/buttons#link-button
* https://nextui.org/docs/components/button#light
* https://coreui.io/react/docs/components/button/
* https://design-system.hpe.design/components/button
* https://chakra-ui.com/docs/components/button/usage#button-variants
* https://mui.com/material-ui/react-button/

All (at least most?) of them make "link" button have "underline" when
hovering.

So, a "link" is a "link", when it's hovered, it should have the
underline by default. To be strict, Gitea's "button-link" is not
link-style, so it needs a better name.

Actually, for the "plain" button, there are some different approaches:

* Some frameworks just make "default" button as no style (not feasible
in Gitea/Fomantic UI)
* Primer uses "btn-invisible", which is not a proper word
* NextUI uses "light", which is not a proper word, either ...
* CoreUI / ChakraUI uses "ghost", I think this name is acceptable.


Welcome to suggest better name for such button.

Or, we just call it ".button-plain" or ".button-simple", in fact I
prefer such simple and clear name.

1 files changed, 2 insertions, 2 deletions

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 3663511fef..507d92b011 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -2238,13 +2238,13 @@ a.ui.active.label:hover {
   border-left: none;
 }
 
-.ui.button.button-link {
+.ui.button.button-ghost {
   background: transparent;
   border: none;
   color: inherit;
 }
 
-.ui.button.button-link:hover {
+.ui.button.button-ghost:hover {
   color: var(--color-primary);
 }