[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / ui / userProfile.scss

.userProfileUser {
        .contentHeaderIcon {
                position: relative;

                a {
                        display: block;
                }
        }

        .contentHeaderIcon a {
                display: block;
        }

        .contentHeaderDescription {
                margin-top: 20px;
        }

        @include screen-sm-down {
                display: flex;
                flex-wrap: wrap;

                .contentHeaderNavigation {
                        flex: 0 0 100%;
                }
        }

        @include screen-sm {
                .contentHeaderIcon {
                        display: block;
                        flex: 0 0 96px;
                        margin-right: 15px;

                        img {
                                width: 96px !important;
                                height: 96px !important;
                        }
                }

                .contentHeaderTitle {
                        /* The `flex` shorthand fails in IE11 if `calc()` is used. */
                        flex-grow: 0;
                        flex-shrink: 0;
                        flex-basis: calc(100% - 111px);
                        max-width: calc(100% - 11px);
                }
        }

        @include screen-xs {
                .contentHeaderIcon {
                        display: block;
                        flex: 0 0 48px;
                        margin-right: 10px;

                        img {
                                width: 48px !important;
                                height: 48px !important;
                        }
                }

                .contentHeaderTitle {
                        /* The `flex` shorthand fails in IE11 if `calc()` is used. */
                        flex-grow: 0;
                        flex-shrink: 0;
                        flex-basis: calc(100% - 58px);
                }
        }

        @include screen-md-up {
                .contentHeaderIcon {
                        flex: 0 0 128px;
                        margin-right: 20px;
                }
        }
}

/* user profile cover photo */
.userProfileUserWithCoverPhoto {
        margin-top: 0;
        padding-top: 165px;
        position: relative;

        .userProfileCoverPhoto {
                background: no-repeat center;
                background-size: cover;
                border-radius: 3px;
                height: 200px;
                left: 0;
                position: absolute;
                right: 0;
                top: 0;

                &::after {
                        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5) 100%);
                        border-bottom-left-radius: 3px;
                        border-bottom-right-radius: 3px;
                        bottom: 0;
                        content: "";
                        display: block;
                        left: 0;
                        pointer-events: none;
                        position: absolute;
                        right: 0;
                        top: 0;
                }

                .userProfileManageCoverPhoto {
                        position: absolute;
                        right: 10px;
                        top: 10px;
                }
        }

        .contentHeaderTitle {
                margin-top: 0;
                /* avoid being covered by the photo */
                z-index: 10;
        }

        .userProfileUsername {
                color: #fff;
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
        }

        @include screen-md-up {
                .contentHeaderIcon {
                        flex: 0 0 138px;
                        margin-top: -29px; /* 35px photo overlap - (128px height / 2) */
                        padding-left: 10px;
                }

                .contentHeaderDescription {
                        margin-top: 10px !important;
                }

                .contentHeaderNavigation {
                        padding-top: 45px;
                }
        }

        @include screen-sm-up {
                .contentHeaderIcon .badgeOnline {
                        left: 10px !important;
                }

                .userProfileUsername + .badge {
                        margin-left: 5px;
                }
        }

        @include screen-sm {
                padding-top: 170px;

                .contentHeaderIcon {
                        margin-top: -18px; /* 30px photo overlap - (96px height / 2) */
                        padding-left: 5px;
                }

                .contentHeaderDescription {
                        margin-top: 10px !important;
                }
        }

        @include screen-xs {
                padding-top: 120px;

                .userProfileCoverPhoto {
                        height: 150px;
                }

                .contentHeaderIcon {
                        margin-top: 6px; /* 30px photo overlap - (48px height / 2) */
                        padding-left: 5px;
                }

                .contentTitle {
                        margin-bottom: 35px;
                        position: relative;
                }

                .userProfileUsername {
                        display: block;
                }

                .userProfileUsername + .badge {
                        margin-left: 0;
                        position: absolute;
                        top: 35px !important;
                }

                .userProfileUsername + .userRankImage {
                        position: absolute;
                        top: 32px;
                }

                .userProfileUsername + .badge + .userRankImage {
                        position: relative;

                        > img {
                                transform: translateY(32px);
                        }
                }

                .contentHeaderDescription {
                        margin-left: -58px;
                }
        }
}

.userTitleBadge {
        max-width: 154px;
        overflow: hidden;
        text-overflow: ellipsis;
}

.userAvatarImage {
        background-color: #fff;
        border-radius: 50%;
}

html[data-color-scheme="dark"] .userAvatarImage {
        background-color: #333;
}

.userAvatarList {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: -10px;

        > li {
                flex: 0 0 48px;
                margin-bottom: 10px;
                text-align: center;

                &:not(:last-child) {
                        margin-right: -12px;
                }

                > a {
                        display: block;

                        > img {
                                border: 2px solid #fff;
                        }
                }
        }

        &.small {
                > li {
                        flex: 0 0 24px;

                        &:not(:last-child) {
                                margin-right: -6px;
                        }

                        > a {
                                > img {
                                        border: 1px solid #fff;
                                }
                        }
                }
        }
}

html[data-color-scheme="dark"] .userAvatarList > li > a > img {
        border-color: rgb(255 255 255 / 12%);
}

.userList {
        .box48 {
                align-items: center;
        }
}

/* user notifications */
.userNotificationItemList > .notificationItem {
        &.notificationUnconfirmed {
                align-items: center;
                display: flex;

                > .box32 {
                        flex: 1 1 auto;
                        position: relative;
                }

                > .notificationItemMarkAsConfirmed {
                        flex: 0 0 auto;
                }
        }
}

.userNotificationItemList .userNotificationItemLink {
        color: inherit;

        &::before {
                bottom: 0;
                content: "";
                left: 0;
                position: absolute;
                right: 0;
                top: 0;
        }
}

.userProfileUser .contentHeaderIcon .badgeOnline {
        left: 0;
        pointer-events: none;
        position: absolute;

        @include screen-md-up {
                bottom: 0;
        }

        @include screen-sm-down {
                color: transparent;
                padding: 0;
                top: 0;
                width: 0;

                &::before {
                        background-color: inherit;
                        border: 1px solid rgba(255, 255, 255, 1);
                        border-radius: 50%;
                        content: "";
                        height: 16px;
                        left: 34px; /* 48px (avatar) - 16px (width) - 2px (border-left + border-right) */
                        position: absolute;
                        width: 16px;
                }
        }
}

.userOnlineIndicator {
        background-color: rgba(0, 153, 0, 1);
        border-radius: 50%;
        display: inline-block;
        height: 8px;
        width: 8px;
}