XF 2.0 Profil Kartı

@vpn-background: @xf-contentBg;
@vpn-border-color: @xf-borderColor;

.visitor-panel-new {
    background: @vpn-background;
    padding: 10px;
    margin-bottom: 20px;
    .visitor {
        text-align: center;
        div {
            &:nth-of-type(1) {
                margin-bottom: 10px;
            }
        }
        .button-prem {
            font-size: .8em;
            font-weight: 500;
            text-transform: uppercase;
            position: relative;
            padding: 10px 0;
            margin: 15px 0 10px;
            border: 2px solid @vpn-border-color;
            &:hover {
                border-color: @xf-textColorAttention;
                span {
                    &:nth-of-type(1) {
                        font-size: 0;
                        opacity: 0;
                        transition: .3s ease-out;
                    }
                    &:nth-of-type(2) {
                        font-size: inherit;
                        opacity: 1;
                        transition: .3s ease-out;
                    }
                }
                &:before {
                    opacity: 1;
                }
            }
            a {
                &:hover {
                    text-decoration: none;
                    color: @xf-textColorAttention;
                }
            }
            span {
                &:nth-of-type(2) {
                    font-size: 0;
                    opacity: 0;
                    transition: .3s ease-out;
                }
                &:nth-of-type(1) {
                    font-size: inherit;
                    opacity: 1;
                    transition: .3s ease-out;
                }
            }
            &:before {
                display: block;
                font-size: .8em;
                position: absolute;
                content: attr(data-sale);
                top: -15px;
                left: 5px;
                background: @xf-contentAccentBg;
                color: @xf-textColorAccentContent;
                padding: 3px 5px;
                border: 2px solid @xf-textColorAttention;
                transform: rotate(0deg) scale(1, 1) skew(-10deg, 0deg) translate(0, 0);
                opacity: 0;
                transition: opacity .6s ease-out;
            }
        }
    }
    .stats {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        border: 1px solid @vpn-border-color;
        .column {
            flex-basis: calc(100% / 3);
            order: 1;
            font-size: .85em;
            text-align: center;
            padding: 5px;
            margin: 5px 0;
            border-left: 1px solid @vpn-border-color;
            &:nth-of-type(1) {
                border: none;
            }
            div {
                &:nth-of-type(2) {
                    font-size: 1.1em;
                    font-weight: 500;
                }
            }
        }
    }
}

<xf:if is="$xf.visitor.user_id">
    <div class="visitor-panel-new">
        <div class="visitor">
            <div class="contentRow-figure">
                <xf:avatar user="{$xf.visitor}" size="m" href="" notooltip="true" update="{{ link('account/avatar', $xf.visitor) }}" />
            </div>
            <h3 class="contentRow-header"><xf:username user="$xf.visitor" rich="true" notooltip="true" /></h3>
            <div class="contentRow-lesser">
                <xf:usertitle user="$xf.visitor" />
            </div>
            <div class="button-prem" data-sale="Vip Üyelik">
                <a href="account/upgrades" target="_blank"><span>Premium Satın Al</span><span>Ödeme Yap</span></a>
            </div>
        </div>
        <div class="stats">
            <div class="column">
                <div>{{ phrase('messages') }}</div>
                <div>{$xf.visitor.message_count|number}</div>
            </div>
            <div class="column">
                <div>{{ phrase('likes') }}</div>
                <div>{$xf.visitor.like_count|number}</div>
            </div>
            <div class="column">
                <div>{{ phrase('trophy_points') }}</div>
                <div>{$xf.visitor.trophy_points|number}</div>
            </div>
        </div>
    </div>
</xf:if>