Implemented cover photo upload and deletion

[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-md {
                .contentHeaderNavigation {
                        .button {
                                .invisible {
                                        display: inline;
                                }
                        }
                }
        }
        
        @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 {
                        flex: 0 0 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 {
                        flex: 0 0 calc(100% - 58px);
                        max-width: calc(100% - 58px);
                }
                
                .contentHeaderNavigation {
                        .userProfileButtonContainer {
                                display: flex;
                                
                                > li {
                                        flex: 1 1 auto;
                                        margin-top: 0 !important;
                                        
                                        &:not(:last-child) {
                                                margin-right: 1px;
                                        }
                                        
                                        .invisible {
                                                display: none !important;
                                        }
                                }
                        }
                }
        }
        
        @include screen-md-up {
                .contentHeaderIcon {
                        flex: 0 0 128px;
                        margin-right: 20px;
                }
        }
}

/* user profile cover photo */
.userProfileUserWithCoverPhoto {
        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, .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 {
                /* 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: 15px !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;
                }
                
                .contentHeaderDescription {
                        margin-left: -58px;
                }
        }
}

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

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

.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;
                                }
                        }
                }
        }
}

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

.userProfilePreview {
        position: relative;
        
        .userInformation {
                padding-bottom: 16px;
        }
        
        .buttonGroupNavigation {
                position: absolute;
                bottom: 0;
                right: 0;
        }
}

/* using `dl` + `.inlineDataList` to prevent styles applied to the
   data list provided by the `userInformation` template */
.userProfilePreview dl.inlineDataList {
        margin-top: 10px;
        
        @include wcfFontSmall;
}

/* user notifications */
.userNotificationItemList > .notificationItem {
        &.notificationUnconfirmed {
                align-items: center;
                display: flex;
                
                > .box32 {
                        flex: 1 1 auto;
                }
                
                > .notificationItemMarkAsConfirmed {
                        flex: 0 0 auto;
                }
        }
}

.userProfilePreviewAvatar {
        align-self: flex-start;
        display: block;
        position: relative;
}

.userProfilePreviewAvatar .badgeOnline,
.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;
                }
        }
}