- Окт
- 597
- 133
Пользователь
CSS:
.p-body .username[data-user-id="2"] {
--g: linear-gradient(90deg, var(--n187-a), var(--n187-b));
position: relative;
display: inline-block;
background: var(--g);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
font-weight: 800;
letter-spacing: .2px;
text-shadow: 0 0 10px var(--n187-gl1),0 0 20px var(--n187-gl2)
}
.p-body .username[data-user-id="2"]::after {
content: "";
position: absolute;
left: -2px;
right: -2px;
bottom: -2px;
height: 2px;
background: var(--g);
border-radius: 2px;
filter: drop-shadow(0 0 6px var(--n187-gl1));
transform: scaleX(.15);
transform-origin: left center;
opacity: .75;
transition: transform .35s cubic-bezier(.2, .7, .2, 1),opacity .35s
}
.p-body .username[data-user-id="2"]::before {
content: "⚙";
display: inline-block;
margin-right: 6px;
line-height: 1;
background: var(--g);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 6px var(--n187-gl1));
opacity: .9;
transform: translateY(-0.5px)
}
@keyframes n187-shimmer {
from {
background-position: -200% 0
}
to {
background-position: 200% 0
}
}
.p-body .username[data-user-id="2"]:hover {
background-image: linear-gradient(90deg, var(--n187-a), var(--n187-ac), var(--n187-b));
background-size: 200% 100%;
animation: n187-shimmer 2.2s linear infinite
}
.p-body .username[data-user-id="2"]:hover::after {
transform: scaleX(1);
opacity: 1
}
html[data-color-scheme="light"] :is(.message-name,.structItem-title,.memberHeader,.contentRow-main) .username[data-user-id="2"] {
text-shadow: 0 1px 0 hsla(0,0%,0%,.25),0 0 10px var(--n187-gl1),0 0 18px var(--n187-gl2)
}
:is( .structItem-minor, /* метаданные списка тем */
.message-attribution, /* «написал … минут назад» */
.contentRow-minor, /* минорные строки контента */
.block-footer, .pairs.pairs--inline, .message-userExtras, .message-signature ) .username[data-user-id="2"] {
background: none;
-webkit-text-fill-color: initial;
color: var(--n187-solid);
text-shadow: none;
font-weight: 700;
letter-spacing: .1px
}
:is( .structItem-minor, .message-attribution, .contentRow-minor, .block-footer, .pairs.pairs--inline, .message-userExtras, .message-signature ) .username[data-user-id="2"]::after {
display: none
}
:is( .structItem-minor, .message-attribution, .contentRow-minor, .block-footer, .pairs.pairs--inline, .message-userExtras, .message-signature ) .username[data-user-id="2"]:hover {
animation: none
}
.userBanner .username[data-user-id="2"]::before {
content: none
}
[class*="avatar-u2"],a[href$="/members/2/"] .avatar {
position: relative
}
[class*="avatar-u2"]::after,a[href$="/members/2/"] .avatar::after {
content: "";
position: absolute;
inset: -2px;
border-radius: 999px;
pointer-events: none;
border: 2px solid hsla(0,0%,0%,0);
background: linear-gradient(hsl(0,0%,0%) 0, hsl(0,0%,0%) 0) padding-box,linear-gradient(90deg, var(--n187-a), var(--n187-b)) border-box;
box-shadow: 0 0 14px var(--n187-gl1),0 0 28px var(--n187-gl2)
}
@media (prefers-reduced-motion:reduce) {
.username[data-user-id="2"] {
animation: none
}
}Вложения
Последнее редактирование модератором:
