Skip to content

fix: style ExternalOidc login button on identity-server pages #1325

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SebastianStehle merged 2 commits into from
Jul 29, 2026
Merged

fix: style ExternalOidc login button on identity-server pages #1325

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
53ab4d8
Add OIDC button and styles to theme
sinadarbouy Jun 10, 2026
c52e9fa
Regenerate ExternalOidc icon via icomoon
sinadarbouy Jul 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions frontend/src/app/_theme.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,7 @@ <h1 class="bs-section-title">Buttons</h1>
<button class="btn btn-twitter"><i class="icon-twitter icon-decent"></i> Twitter</button>
<button class="btn btn-microsoft"><i class="icon-microsoft icon-decent"></i> Microsoft</button>
<button class="btn btn-github"><i class="icon-github icon-decent"></i> Github</button>
<button class="btn btn-externaloidc"><i class="icon-externaloidc icon-decent"></i> OIDC</button>
</div>
</div>

Expand Down
4 changes: 4 additions & 0 deletions frontend/src/app/theme/_bootstrap.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -382,6 +382,10 @@ a {
@include button-variant($color-extern-twitter, $color-extern-twitter);
}

&-externaloidc {
@include button-variant($color-extern-oidc, $color-extern-oidc);
}

// Special radio button.
&-radio {
& {
Expand Down
1 change: 1 addition & 0 deletions frontend/src/app/theme/_vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ $color-extern-github: #353535;
$color-extern-google: #d34836;
$color-extern-microsoft: #004185;
$color-extern-twitter: #1da1f2;
$color-extern-oidc: #526484;

$color-theme-brand: #3389ff;
$color-theme-brand-dark: #3284f4;
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/app/theme/icomoon/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,9 @@
.icon-external-link:before {
content: "\e96d";
}
.icon-externaloidc:before {

@SebastianStehle SebastianStehle Jul 28, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, for the late reply. The icons are created with icomoon.io. You need to update the file using this tool. Otherwise it gets overwritten the next time.

@sinadarbouy sinadarbouy Jul 29, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the review, fixed in c52e9fa

I imported the existing selection.json, added an externaloidc icon to the set, and committed the regenerated style.css, selection.json, demo.html, font files, and icons/externaloidc.svg.

The icon now has its own glyph at \e906 instead of a hand-edited alias of external-link, so it won’t be overwritten on the next export.

content: "\e96d";
}
.icon-minus-square:before {
content: "\e969";
}
Expand Down
Loading