Rework OAuth login buttons, swap github logo to monocolor

templates/repo/migrate/migrate.tmpl

@@ -6,7 +6,15 @@
 			<div class="ui three stackable cards">
 				{{range .Services}}
 					<a class="ui card gt-df gt-ac" href="{{AppSubUrl}}/repo/migrate?service_type={{.}}&org={{$.Org}}&mirror={{$.Mirror}}">
+						{{if eq .Name "github"}}
+							{{svg "octicon-mark-github" 184 "gt-p-4"}}
+						{{else if eq .Name "gitlab"}}
+							{{svg "gitea-gitlab" 184 "gt-p-4"}}
+						{{else if eq .Name "gitbucket"}}
+							{{svg "gitea-gitbucket" 184 "gt-p-4"}}
+						{{else}}
 							{{svg (printf "gitea-%s" .Name) 184}}
+						{{end}}
 						<div class="content">
 							<div class="header gt-tc">
 								{{.Title}}

templates/user/auth/signin_inner.tmpl

@@ -53,21 +53,32 @@
 	{{end}}
 
 	{{if and .OrderedOAuth2Names .OAuth2Providers}}
-			<div class="ui attached segment">
+	<hr class="ui divider"/>
 	<div class="oauth2 center">
 		<div id="oauth2-login-loader" class="ui disabled centered loader"></div>
 		<div>
-						<div id="oauth2-login-navigator">
-							<p>{{.locale.Tr "sign_in_with"}}</p>
+			<div id="oauth2-login-navigator" class="gt-df gt-jc">
+				<span class="gt-self-center gt-mr-3">{{.locale.Tr "sign_in_with"}}</span>
+				<div class="gt-df gt-fw gt-gap-4">
 					{{range $key := .OrderedOAuth2Names}}
 						{{$provider := index $.OAuth2Providers $key}}
-								<a href="{{AppSubUrl}}/user/oauth2/{{$key}}">
+						<a class="{{$provider.Name}} silenced oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$key}}" data-tooltip-content="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}">
+							{{if eq $provider.Name "github"}}
+								{{svg "octicon-mark-github" 40}}
+							{{else if eq $provider.Name "gitlab"}}
+								{{svg "gitea-gitlab" 40}}
+							{{else if eq $provider.Name "openidConnect"}}
+								{{svg "gitea-openid" 40}}
+							{{else}}
 								<img
+									class="gt-object-contain"
+									width="40"
+									height="40"
 									alt="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}"
-										title="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}"
-										class="{{$provider.Name}} oauth-login-image"
 									src="{{AppSubUrl}}{{$provider.Image}}"
-									></a>
+								>
+							{{end}}
+						</a>
 					{{end}}
 				</div>
 			</div>

web_src/css/base.css

@@ -338,7 +338,11 @@ a {
   text-decoration-skip-ink: all;
 }
 
+/* muted link = only colored when hovered */
+/* silenced link = never colored */
+
 a.muted,
+a.silenced,
 .muted-links a {
   color: inherit;
 }
@@ -350,6 +354,10 @@ a.muted:hover [class*="color-text"],
   color: var(--color-primary);
 }
 
+a.silenced:hover {
+  color: inherit;
+}
+
 .delete-button,
 .delete-button:hover {
   color: var(--color-red);

web_src/css/form.css

@@ -206,32 +206,6 @@ textarea:focus,
   }
 }
 
-.signin .oauth2 div {
-  display: inline-block;
-}
-
-.signin .oauth2 div p {
-  margin: 10px 5px 0 0;
-  float: left;
-}
-
-.signin .oauth2 a {
-  margin-right: 3px;
-}
-
-.signin .oauth2 a:last-child {
-  margin-right: 0;
-}
-
-.signin .oauth2 img {
-  width: 32px;
-  height: 32px;
-}
-
-.signin .oauth2 img.openidConnect {
-  width: auto;
-}
-
 @media (min-width: 768px) {
   .g-recaptcha-style,
   .h-captcha-style {

web_src/css/helpers.css

@@ -73,6 +73,8 @@ Gitea's private styles use `g-` prefix.
 .gt-whitespace-nowrap { white-space: nowrap !important; }
 .gt-whitespace-pre { white-space: pre !important; }
 .gt-whitespace-pre-wrap { white-space: pre-wrap !important; }
+.gt-object-contain { object-fit: contain !important; }
+.gt-self-center { align-self: center !important; }
 
 .gt-overflow-x-auto { overflow-x: auto !important; }
 .gt-overflow-x-scroll { overflow-x: scroll !important; }