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

.messageGroupList {
        .tabularList {
                .columnSubject {
                        flex: 1 1 auto;
                }
                
                .columnStats {
                        flex: 0 0 150px;
                        text-align: center;
                }
                
                .columnLastPost {
                        flex: 0 0 200px;
                }
                
                .tabularListRow:not(.tabularListRowHead) {
                        .columnStats {
                                position: relative;
                                
                                > dl {
                                        visibility: hidden;
                                }
                        }
                        
                        @include screen-lg {
                                &:hover .columnStats {
                                        > dl {
                                                visibility: visible;
                                        }
                                        
                                        .messageGroupListStatsSimple {
                                                display: none;
                                        }
                                }
                        }
                }
        }
        
        .columnMark > label {
                cursor: pointer;
                display: block;
                height: 24px;
                width: 24px;
                
                @extend .messageCheckboxLabel;
                
                &::before {
                        font-size: 24px;
                        top: -6px;
                }
        }
        
        .jsMarked .columnMark > label::after {
                display: block;
                font-size: 13px;
                left: 3px;
                top: 1px;
        }
        
        .tabularListRowHead {
                .columnMark > label::before {
                        top: -3px;
                }
                
                .jsMarked .columnMark > label::after {
                        top: 4px;
                }
        }
        
        .messageDeleted .columnAvatar,
        .messageDisabled .columnAvatar {
                position: relative;
                
                &::before {
                        display: block;
                        font-family: FontAwesome;
                        position: absolute;
                        
                        @include screen-md-up {
                                font-size: 42px;
                        }
                        
                        @include screen-sm-down {
                                font-size: 28px;
                        }
                }
                
                > div img,
                > div .icon:first-child {
                        visibility: hidden;
                }
        }
        
        .messageDisabled .columnAvatar::before {
                color: rgb(0, 140, 0);
                content: $fa-var-eye-slash;
                
                @include screen-md-up {
                        left: 13px;
                        top: -2px;
                }
                
                @include screen-sm-down {
                        left: 3px;
                        top: -4px;
                }
        }
        
        .messageDeleted .columnAvatar::before {
                color: rgb(180, 0, 0);
                content: $fa-var-trash-o;
                left: 17px;
                top: -2px;
                
                @include screen-md-up {
                        left: 17px;
                        top: -2px;
                }
                
                @include screen-sm-down {
                        left: 7px;
                        top: -4px;
                }
        }
        
        .columnAvatar {
                div {
                        position: relative;
                        width: 48px;
                        height: 48px;
                }
                
                .myAvatar {
                        position: absolute;
                        width: 24px;
                        height: 24px;
                        bottom: -2px;
                        right: -6px;
                        
                        > img {
                                border: 1px solid $wcfContentBackground;
                                box-sizing: content-box;
                        }
                }
        }
        
        .columnSubject {
                overflow: hidden;
                
                > h3 {
                        > .messageGroupLink {
                                @include wcfFontHeadline;
                        }
                        
                        > .badge.label {
                                top: -2px;
                        }
                }
                
                > small {
                        display: block;
                }
                
                > .statusDisplay {
                        display: flex;
                        float: right;
                        opacity: .75;
                        transition: opacity .12s;
                        
                        > .statusIcons {
                                align-items: center;
                                flex: 0 0 auto;
                                
                                > li {
                                        align-items: center;
                                        display: flex;
                                }
                        }
                }
                
                > .labelList {
                        float: right;
                        padding-left: 7px;
                }
        }
        
        .columnLastPost {
                > .box32 {
                        align-items: center;
                }
                
                
                time {
                        color: $wcfContentDimmedText;
                }
                
                a {
                        display: block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                }
        }
        
        // hover
        .tabularListRow:hover,
        tr:hover { // deprecated
                .columnSubject > .statusDisplay {
                        opacity: 1;
                        
                        > .pagination {
                                opacity: 1;
                        }
                }
        }
        
        // new status
        .tabularListColumns.new,
        tr.new { // deprecated
                .columnSubject > h3 > .messageGroupLink {
                        font-weight: 600;
                }
        }
        
        .pagination {
                flex: 0 0 auto;
                opacity: 0;
                transition: opacity .12s;
                
                @include wcfFontSmall;
                
                &:not(:last-child) {
                        margin-right: 5px;
                }
        }
        
        @include screen-md-up {
                .messageGroupCounterMobile,
                .messageGroupInfoMobile {
                        display: none;
                }
        }
        
        @include screen-sm-down {
                .tabularListColumns > .columnMark {
                        display: none;
                }
                
                .tabularListRowHead {
                        .columnMark,
                        .columnStats {
                                display: none;
                        }
                        
                        .columnSubject {
                                padding: 0;
                        }
                        
                        .columnLastPost {
                                flex-basis: auto;
                                padding: 0;
                        }
                }
                
                .tabularListRow:not(.tabularListRowHead) > .tabularListColumns {
                        flex-wrap: wrap;
                        justify-content: flex-end;
                        padding: 5px 0;
                        
                        > li {
                                padding: 0;
                        }
                        
                        .columnAvatar {
                                margin-right: 10px;
                                padding: 0;
                                
                                div {
                                        height: 32px;
                                        width: 32px;
                                }
                                
                                img {
                                        max-height: 32px;
                                        max-width: 32px;
                                }
                                
                                .myAvatar {
                                        display: none;
                                }
                        }
                        
                        .columnSubject {
                                /* 37px = avatar width + margin-right */
                                flex-basis: calc(100% - 42px);
                                max-width: calc(100% - 42px);
                                
                                > h3 {
                                        align-items: flex-start;
                                        display: flex;
                                        
                                        > .messageGroupLink {
                                                flex: 1 1 auto;
                                                line-height: 1.48;
                                                overflow: hidden;
                                                text-overflow: ellipsis;
                                                
                                                @include wcfFontDefault;
                                        }
                                        
                                        > .messageGroupCounterMobile {
                                                flex: 0 0 auto;
                                                margin-left: 10px;
                                        }
                                }
                                
                                .messageGroupInfoMobile {
                                        color: $wcfContentDimmedText;
                                        display: flex;
                                        
                                        @include wcfFontSmall;
                                        
                                        > .messageGroupAuthorMobile {
                                                flex: 1 1 auto;
                                        }
                                        
                                        > .messageGroupLastPostTimeMobile {
                                                flex: 0 0 auto;
                                                margin-left: 10px;
                                        }
                                }
                                
                                .statusDisplay,
                                .messageGroupInfo,
                                .messageGroupTime,
                                .messageGroupEditLink {
                                        display: none;
                                }
                                
                                .labelList {
                                        float: none;
                                        padding-bottom: 2px;
                                        padding-left: 0;
                                }
                        }
                        
                        .columnStats,
                        .columnLastPost {
                                display: none;
                        }
                }
        }
        
        .tabularListRowHead {
                .columnSort {
                        flex: 1;
                        
                        @include wcfFontDefault;
                }
                
                .columnFilter {
                        flex: 0 1 auto;
                        padding-left: 40px;
                        
                        @include wcfFontDefault;
                        
                        @include screen-xs {
                                display: none;
                        }
                }
                
                .columnSort,
                .columnFilter {
                        .inlineList > li:not(:last-child) {
                                margin-right: 10px;
                        }
                }
                
                .columnApplyFilter {
                        flex: 0 1 auto;
                        padding-right: 0;
                }
        }
}

.messageGroupListStatsSimple {
        color: $wcfContentDimmedText;
        font-size: 1rem;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        
        > .icon {
                color: inherit;
        }
}

@include screen-md-down {
        .mobileLinkShadowContainer {
                position: relative;
                
                > .mobileLinkShadow {
                        bottom: 0;
                        left: 0;
                        position: absolute;
                        right: 0;
                        top: 0;
                }
        }
}

.contentHeader.messageGroupContentHeader {
        > .contentHeaderIcon {
                @include screen-lg {
                        position: relative;
                }
        }
        
        &.messageDeleted > .contentHeaderIcon,
        &.messageDisabled > .contentHeaderIcon {
                &::before {
                        display: block;
                        font-family: FontAwesome;
                        font-size: 56px;
                        position: absolute;
                }
                
                > img,
                > .icon:first-child {
                        visibility: hidden;
                }
        }
        
        &.messageDisabled > .contentHeaderIcon::before {
                color: rgb(0, 140, 0);
                content: $fa-var-eye-slash;
                left: 4px;
                top: -12px;
        }
        
        &.messageDeleted > .contentHeaderIcon::before {
                color: rgb(180, 0, 0);
                content: $fa-var-trash-o;
                left: 11px;
                top: -12px;
        }
}