XF 2.1 Is Username CSS styling broken?

None of my CSS edits are working on "User name CSS" under user groups. I've tried this on the default and 2 custom themes.

Example 1 (Extra.css):
.username .style7 {
padding: 5;
font-family: Nintendoid1;
color: #eee;
font-size: 0.62em;
line-height: 1;
text-shadow: 0.06rem 0 0.06rem #ea36af, -0.125rem 0 0.06rem #75fa69;
letter-spacing: 0.125em;
animation-duration: 0.01s;
animation-name: textflicker;
animation-iteration-count: infinite;
animation-direction: alternate;
transform: translate(-20%, -20%)
}

background-transparent on "user name CSS" for it to show.

Example 2 (Extra.css):

@keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}

text-transform: uppercase;
overflow: hidden;
background: linear-gradient(90deg, #000000, #ffffff, #000000);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 3s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);

Why isn't anything working!?
 
Place your CSS inside Groups & Permissions -> User groups -> select your group "User name CSS"

No brackets, just the CSS:

Code:
text-transform: uppercase;
overflow: hidden;
background: linear-gradient(90deg, #000000, #ffffff, #000000);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 3s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);

Place your animation inside extra.less:

Code:
@keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}

Should work then.

Also, the username style is not global, so there are many areas where you won't see this custom CSS. You'd need a plugin like this: https://xenforo.com/community/threads/liam-w-rip-global-name-styling.135911/

Lastly, the CSS on the class names is like this:

Code:
 .username--style3
but this class will only show up I believe if you have the CSS placed in the group (step 1)
 
Place your CSS inside Groups & Permissions -> User groups -> select your group "User name CSS"

No brackets, just the CSS:

Code:
text-transform: uppercase;
overflow: hidden;
background: linear-gradient(90deg, #000000, #ffffff, #000000);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 3s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);

Place your animation inside extra.less:

Code:
@keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}

Should work then.

Also, the username style is not global, so there are many areas where you won't see this custom CSS. You'd need a plugin like this: https://xenforo.com/community/threads/liam-w-rip-global-name-styling.135911/

Lastly, the CSS on the class names is like this:

Code:
 .username--style3
but this class will only show up I believe if you have the CSS placed in the group (step 1)
Doesn't work anywhere, not in post bit, member card (in profile), member view list, nothing.

I had a simple background-transparent text in the user group field "user name css".
 
Doesn't work anywhere, not in post bit, member card (in profile), member view list, nothing.

I had a simple background-transparent text in the user group field "user name css".
Well, with my instructions it worked fine. Got the animation to work and everything before I posted it.

Can you paste a screenshot of your group page with the CSS?
 
I would have never guessed to try that, thanks it worked!

Got a question, since my other style doesn't seem to work, I put the below code into "user name css". I mean it works outside of Xenforo?

padding: 5;
font-family: Nintendoid1;
color: #eee;
font-size: 0.62em;
line-height: 1;
text-shadow: 0.06rem 0 0.06rem #ea36af, -0.125rem 0 0.06rem #75fa69;
letter-spacing: 0.125em;
animation-duration: 0.01s;
animation-name: textflicker;
animation-iteration-count: infinite;
animation-direction: alternate;
transform: translate(-20%, -20%)
 
Top Bottom