.MentionLink { position: relative; white-space: normal; display: inline-block; color: var(--link); & .new, & .original { display: inline-block; border-radius: 2px; } .original { opacity: 0.5; } .full { position: absolute; display: inline-block; pointer-events: none; opacity: 0; top: 100%; left: 0; height: 100%; word-wrap: normal; white-space: nowrap; transition: opacity 0.2s ease; z-index: 1; margin-top: 0.25em; padding: 0.5em; } & .short, & .full { &::before { content: '@'; } } & .new { &, &.-striped, &.-solid, &.-side { .full { } .short { &::before { display: inline-block; height: 50%; font-size: 90%; line-height: 1; vertical-align: 6%; } } .you { padding-right: 0.25em; } .short { padding-left: 0.25em; padding-right: 0; padding-top: 0; padding-bottom: 0; } .userName { color: var(--link); margin-left: 0.25em; padding-left: 0.25em; padding-right: 0.25em; padding-top: 0; padding-bottom: 0; } } &.-striped { & .userName, & .full { background-image: repeating-linear-gradient( 135deg, var(--____highlight-tintColor), var(--____highlight-tintColor) 5px, var(--____highlight-tintColor2) 5px, var(--____highlight-tintColor2) 10px ); } } &.-solid { & .userName, & .full { background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2)); } } &.-side { & .userName, & .userNameFull { box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor); } } } .new { &.-you { & .shortName, & .full { font-weight: 600; } } } &:hover .new .full { opacity: 1; pointer-events: initial; } }