Rework Oauth login buttons, swap github logo to monocolor (#24740)

Diff without whitespace:
https://github.com/go-gitea/gitea/pull/24740/files?diff=unified&w=1

- Use SVGs for GitHub and GitLab oauth providers
- Replace section wrapping with a divider
- Rework icon rendering, increase size from 32px to 40px

Before:

<img width="853" alt="Screenshot 2023-05-15 at 21 54 23"
src="6ab5cfb4-46ff-469a-bd1f-06780d4a6a0b">

After (more providers):

<img width="849" alt="Screenshot 2023-05-15 at 21 51 21"
src="fa84f92f-98e0-4aed-9357-5d62ddd98195">

<img width="856" alt="Screenshot 2023-05-15 at 21 56 45"
src="d3edd7ed-dadd-4302-aca7-08f20adc220e">


Ref: https://codeberg.org/Codeberg/Community/issues/1023

---------

Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind 2023-05-16 00:46:51 +02:00 committed by GitHub
parent 7565e5c3de
commit a7e18b9fb7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 111 additions and 108 deletions

View file

@ -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);

View file

@ -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 {

View file

@ -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; }