Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Add role badges to the WebUI (#25649)

Browse source
This commit is contained in:
Claire 2023-07-27 16:05:24 +02:00 • committed by GitHub
parent ddaf200c78
commit 1e4ccc655a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 65 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

35
app/javascript/styles/mastodon/accounts.scss
View file

@ -188,30 +188,43 @@
}
.account-role,
.information-badge,
.simple_form .recommended,
.simple_form .not_recommended {
display: inline-block;
padding: 4px 6px;
cursor: default;
border-radius: 3px;
border-radius: 4px;
font-size: 12px;
line-height: 12px;
font-weight: 500;
color: var(--user-role-accent, $ui-secondary-color);
background-color: var(--user-role-background, rgba($ui-secondary-color, 0.1));
border: 1px solid var(--user-role-border, rgba($ui-secondary-color, 0.5));
color: $ui-secondary-color;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
&.moderator {
.information-badge,
.simple_form .recommended,
.simple_form .not_recommended {
background-color: rgba($ui-secondary-color, 0.1);
border: 1px solid rgba($ui-secondary-color, 0.5);
}
.account-role {
border: 1px solid $highlight-text-color;
.fa {
color: var(--user-role-accent, $highlight-text-color);
}
}
.information-badge {
&.superapp {
color: $success-green;
background-color: rgba($success-green, 0.1);
border-color: rgba($success-green, 0.5);
}
&.admin {
color: lighten($error-red, 12%);
background-color: rgba(lighten($error-red, 12%), 0.1);
border-color: rgba(lighten($error-red, 12%), 0.5);
}
}
.simple_form .not_recommended {

14
app/javascript/styles/mastodon/components.scss
View file

@ -7331,6 +7331,16 @@ noscript {
}
}
&__badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
.account-role {
line-height: unset;
}
}
&__tabs {
display: flex;
align-items: flex-start;
@ -7369,10 +7379,6 @@ noscript {
margin-top: 16px;
margin-bottom: 16px;
.account-role {
vertical-align: top;
}
.emojione {
width: 22px;
height: 22px;