sakura/resources/assets/less/aitemu/bem/profile.less

.profile {
    text-shadow: 0 @text-shadow-distance @text-shadow-size fade(@grey-0, @text-shadow-opacity);

    &__banner {
        display: flex;
        flex-flow: column-reverse;
    }

    &__header {
        height: 60px;
        background: fade(@grey-0, 80%);
        padding-left: @avatar-big + (@general-spacing * 4);
        padding-right: @general-spacing * 2;
        display: inline-flex;
        flex-flow: row;
        align-items: center;
        line-height: 1;
    }

    &__names {
        flex-grow: 1;
        text-align: left;
        font-weight: 200;
    }

    &__username {
        font-size: 2em;
    }

    &__title {
        font-size: .9em;
    }

    &__dates {
        font-weight: 300;
        text-align: right;
        font-size: .7em;
        line-height: 1.3em;
    }

    &__content {
        display: flex;
        flex-flow: row;
        margin: 0 (@general-spacing * 2);
    }

    &__container {
        flex-grow: 1;

        &--left {
            max-width: @avatar-big;
            margin-right: @general-spacing;
            top: -(@avatar-big - (@general-spacing * 2));
        }
    }

    &__platform {
        text-align: left;
        margin: @general-spacing auto 0;
    }

    &__avatar {
        height: @avatar-big;
        width: @avatar-big;
        background: no-repeat center center / cover @grey-f;
        border-radius: 1px;
        box-shadow: 0 @global-shadow-distance @global-shadow-size fade(@grey-1, @global-shadow-opacity);
    }

    &__hierarchies {
        font-size: 1.8em;
        font-style: italic;
        font-weight: 200;
    }

    &__hierarchy {
        display: inline-flex;
        align-items: center;

        &-icon {
            font-family: FontAwesome;
            font-style: normal;
            padding-right: 5px;
            color: @grey-f;
            text-align: center;
            width: 1.2em;
        }

        &--founder {
            color: #6c3082;
        }

        &--staff {
            color: #fa3703;
        }

        &--developer {
            color: #6eac0a;
        }

        &--contributor {
            color: #ff69b4;
        }

        &--premium {
            color: #ee9400;
        }

        &--banned {
            color: #888;
        }
    }

    &__accounts {
        font-size: .9em;
    }

    &__account {
        display: flex;
        line-height: 1.3em;
        color: inherit;
        text-decoration: none;

        &-text {
            text-align: right;
            flex-grow: 1;
            font-style: italic;
            font-weight: 200;
            color: inherit;
        }

        &-icon {
            text-align: center;
            font-family: FontAwesome;
        }
    }
}