USER BADGES AND PROFILE FIXES
From TWC Wiki
Includes adding semi-transparent background color in front of banners in user profiles and tooltips to fix legibility problems with text.
Badges (userBanners) are styled with gradient backgrounds that look like roughly the colour seen in the Admin Control Panel, but darker to allow all text to be white.
// ***** START - USER BADGES AND PROFILE FIXES *****
/* user profile fixes using max light/dark colours from base colour scheme to fix opacity over banners */
.memberTooltip--withBanner .memberTooltip-blurbContainer .memberTooltip-blurb .pairs dt, .memberHeader--withBanner .memberHeader-blurbContainer .memberHeader-blurb .pairs dt, .memberHeader--withBanner .memberHeader-blurbContainer .memberHeader-blurb a {
color: @xf-paletteColor5;
.m-colorScheme({{ $xf.style.getAlternateStyleType() }},
{
// alternate rules (alternate color scheme -- dark in the default style)
color: @xf-paletteColor1;
});
}
.memberTooltip--withBanner .memberTooltip-blurbContainer, .memberTooltip--withBanner .username, .memberHeader--withBanner .username, .memberHeader--withBanner .memberHeader-blurbContainer {
color: @xf-paletteColor5;
padding: 0px 10px 0px 10px;
text-shadow: none;
border: @xf-borderSize solid @xf-borderColorHeavy;
background: fade(@xf-paletteColor1, 80%);
border-radius: @xf-borderRadiusSmall;
.m-colorScheme({{ $xf.style.getAlternateStyleType() }},
{
// alternate rules (alternate color scheme -- dark in the default style)
color: @xf-paletteColor1;
border: @xf-borderSize solid @xf-borderColorHeavy;
background: fade(@xf-paletteColor5, 80%);
});
}
:root[data-color-scheme="light"] .memberTooltip--withBanner .memberTooltip-blurbContainer {
color: @xf-paletteColor5;
padding: 0px 10px 0px 10px;
text-shadow: none;
border: @xf-borderSize solid @xf-borderColorHeavy;
background: fade(@xf-paletteColor1, 80%);
border-radius: @xf-borderRadiusSmall;
}
:root[data-color-scheme="light"] .memberTooltip--withBanner .memberTooltip-blurbContainer .memberTooltip-blurb .pairs dt, .memberHeader--withBanner .memberHeader-blurbContainer .memberHeader-blurb .pairs dt, .memberHeader--withBanner .memberHeader-blurbContainer .memberHeader-blurb a {
color: @xf-paletteColor5;
}
:root[data-color-scheme="light"] .memberTooltip--withBanner .username {
text-shadow: none;
color: @xf-paletteColor5;
}
:root[data-color-scheme="dark"] .memberTooltip--withBanner .username {
text-shadow: none;
color: @xf-paletteColor1;
}
.featuredBadges--member_view .featuredBadge{
background: fade(@xf-paletteColor1, 80%);
.m-colorScheme({{ $xf.style.getAlternateStyleType() }},
{
// alternate rules (alternate color scheme -- dark in the default style)
background: fade(@xf-paletteColor5, 80%);
});
}
// badges
// base banner styles - less padding and sorting some of profile issues, Mak 5.4.25
.message-userDetails, .message-articleUserBanners {
.userBanner.userBanner--accent,
.userBanner.userBanner--red,
.userBanner.userBanner--green,
.userBanner.userBanner--olive,
.userBanner.userBanner--lightGreen,
.userBanner.userBanner--blue,
.userBanner.userBanner--royalBlue,
.userBanner.userBanner--skyBlue,
.userBanner.userBanner--gray,
.userBanner.userBanner--silver,
.userBanner.userBanner--yellow,
.userBanner.userBanner--orange {
border-radius: 3px;
border: none;
padding-top: 2px;
padding-bottom: 3px;
box-shadow: rgba(0, 0, 0, 1) 1px 1px 2px;
opacity: 0.8;
.m-colorScheme({{ $xf.style.getAlternateStyleType() }},
{
// alternate rules (alternate color scheme -- dark in the default style)
opacity: 1;
});
}
}
.memberTooltip.memberTooltip--withBanner, .memberTooltip {
.userBanner {
min-width: 150px;
border: none; }
.userBanner.userBanner--lightGreen {
min-width: 200px;
border: none; }
}
.memberHeader, .memberHeader.membereader--withBanner {
.userBanner {
min-width: 200px;
border: none; }
}
@media (max-width: 650px) {
.message-userDetails {
.userTitle.message-userTitle{
display: flex;
}
.userBanner.userBanner--accent,
.userBanner.userBanner--red,
.userBanner.userBanner--green,
.userBanner.userBanner--olive,
.userBanner.userBanner--lightGreen,
.userBanner.userBanner--blue,
.userBanner.userBanner--royalBlue,
.userBanner.userBanner--skyBlue,
.userBanner.userBanner--gray,
.userBanner.userBanner--silver,
.userBanner.userBanner--yellow,
.userBanner.userBanner--orange {
display: inline-block;
min-width: 200px;
border: none;
border-radius: 0px;
padding-top: 1px;
padding-bottom: 2px;
}
}
}
// don't show badges above messages on mobile 5.4.2025
@media (max-width: 480px) {
.message-userDetails {
.userTitle.message-userTitle{
display: flex;
}
}
.message:not(.message--forceColumns) .message-userBanner.userBanner {
display: none;
}
}
// sets text and link colours - either black or white to suit bg
.userBanner.userBanner--accent, .userBanner.userBanner--accent a,
.userBanner.userBanner--red, .userBanner.userBanner--red a,
.userBanner.userBanner--green, .userBanner.userBanner--green a,
.userBanner.userBanner--olive, .userBanner.userBanner--olive a,
.userBanner.userBanner--blue, .userBanner.userBanner--blue a,
.userBanner.userBanner--royalBlue, .userBanner.userBanner--royalBlue a,
.userBanner.userBanner--gray, .userBanner.userBanner--gray a,
.userBanner.userBanner--lightGreen, .userBanner.userBanner--lightGreen a,
.userBanner.userBanner--skyBlue, .userBanner.userBanner--skyBlue a,
.userBanner.userBanner--silver, .userBanner.userBanner--silver a,
.userBanner.userBanner--yellow, .userBanner.userBanner--yellow a,
.userBanner.userBanner--orange, .userBanner.userBanner--orange a {
color: white;
}
// sets backgrounds to look like roughly colour seen in ACP but darker to allow all text to be white
.userBanner.userBanner--accent {
background-color: rgb(170,120,70);
background: linear-gradient(135deg, rgba(170,120,70,1) 0%, darken(rgba(170,120,70,1), 25%) 100%);
}
.userBanner.userBanner--red{
background-color: rgb(214,0,0);
background: linear-gradient(135deg, rgba(214,0,0,1) 0%, darken(rgba(214,0,0,1), 25%) 100%);
}
.userBanner.userBanner--green {
background-color: rgb(0,128,0);
background: linear-gradient(135deg, rgba(0,128,0,1) 0%, darken(rgba(0,128,0,1), 20%) 100%);
}
.userBanner.userBanner--olive {
background-color: rgb(128,128,0);
background: linear-gradient(135deg, rgba(128,128,0,1) 0%, darken(rgba(128,128,0,1), 18%) 100%);
}
.userBanner.userBanner--lightGreen {
background-color: rgb(149,168,90);
background: linear-gradient(135deg, rgba(149,168,90,1) 0%, darken(rgba(149,168,90,1), 30%) 100%);
}
.userBanner.userBanner--blue {
background-color: rgb(0,8,230);
background: linear-gradient(135deg, rgba(0,8,230,1) 0%, darken(rgba(0,8,230,1), 20%) 100%);
}
.userBanner.userBanner--royalBlue {
background-color: rgb(65,105,225);
background: linear-gradient(135deg, rgba(65,105,225,1) 0%, darken(rgba(65,105,225,1), 38%) 100%);
}
.userBanner.userBanner--skyBlue {
background-color: rgb(123,195,224);
background: linear-gradient(135deg, rgba(123,195,224,1) 0%, darken(rgba(123,195,224,1), 50%) 100%);
}
.userBanner.userBanner--gray {
background-color: rgb(128,128,128);
background: linear-gradient(135deg, rgba(120,110,100,1) 0%, darken(rgba(120,110,100,1), 32%) 100%);
}
.userBanner.userBanner--silver {
background-color: rgb(170,170,191);
background: linear-gradient(135deg, rgba(170,170,191,1) 0%, darken(rgba(170,170,191,1), 50%) 100%);
}
.userBanner.userBanner--yellow {
background-color: rgb(220,200,40);
background: linear-gradient(135deg, rgba(220,200,40,1) 0%, darken(rgba(220,200,40,1), 40%) 100%);
}
.userBanner.userBanner--orange {
background-color: rgb(220,120,40);
background: linear-gradient(135deg, rgba(220,120,40,1) 0%, darken(rgba(220,120,40,1), 30%) 100%);
}
//end banners
// ***** END - USER BADGES AND PROFILE FIXES *****