Add role badges to WebUI (#2096)

* [Glitch] Add role badges to WebUI

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

* [Glitch] Ensure role name remains readable

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Claire
2023-01-26 23:35:23 +01:00
committed by GitHub
parent cfa92c4ec0
commit d9a078e6d3
3 changed files with 18 additions and 4 deletions

View File

@@ -214,7 +214,7 @@
font-size: 12px;
line-height: 12px;
font-weight: 500;
color: var(--user-role-accent, $ui-secondary-color);
color: $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));

View File

@@ -533,14 +533,22 @@
&__tabs {
display: flex;
align-items: flex-start;
align-items: flex-end;
justify-content: space-between;
padding: 7px 10px;
margin-top: -55px;
gap: 8px;
margin-top: -81px;
height: 130px;
overflow: hidden;
margin-left: -2px; // aligns the pfp with content below
.account-role {
margin: 0 2px;
padding: 4px 0;
box-sizing: border-box;
min-width: 90px;
text-align: center;
}
&__buttons {
display: flex;
align-items: center;