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

.messageGroupList {
        .tabularList {
                .columnSubject {
                        flex: 1 1 auto;
                }

                .columnStats {
                        text-align: center;

                        @include screen-lg {
                                flex: 0 0 150px;
                        }

                        @include screen-md-down {
                                flex: 0 0 100px;
                        }
                }

                .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 {
                display: block;
                height: 24px;
                width: 24px;

                input[type="checkbox"] {
                        height: 18px;
                        width: 18px;
                }
        }

        .columnAvatar {
                div {
                        position: relative;
                        width: 48px;
                        height: 48px;
                }

                .myAvatar {
                        position: absolute;
                        width: 24px;
                        height: 24px;
                        bottom: -2px;
                        right: -6px;

                        > img {
                                border: 1px solid var(--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: 0.75;
                        transition: opacity 0.12s;

                        > .statusIcons {
                                align-items: center;
                                flex: 0 0 auto;

                                > li {
                                        align-items: center;
                                        display: flex;
                                }

                                a {
                                        color: inherit;
                                }

                                .iconFlag {
                                        vertical-align: -3px;
                                }
                        }
                }

                > .labelList {
                        float: right;
                        padding-left: 7px;
                }
        }

        .columnLastPost {
                > .box32 {
                        align-items: center;
                }

                time {
                        color: var(--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 0.12s;

                @include wcfFontSmall;

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

        @include screen-md-up {
                .messageGroupCounterMobile,
                .messageGroupInfoMobile {
                        display: none;
                }
        }

        @include screen-md-down {
                .tabularListColumns > .columnMark {
                        display: none;
                }

                .tabularListRowHead {
                        .columnMark {
                                display: none;
                        }

                        .columnSubject {
                                padding: 0;
                        }

                        .columnLastPost {
                                flex-basis: auto;
                                padding: 0;
                        }
                }
        }

        @include screen-sm-down {
                .tabularListRowHead {
                        .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: var(--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;

                        fa-icon {
                                color: var(--wcfTabularBoxHeadline);
                        }
                }

                .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: var(--wcfContentDimmedText);
        font-size: 1rem;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);

        > .icon {
                color: inherit;
        }
}

@include screen-md-up {
        .contentHeader.messageGroupContentHeader .contentHeaderIcon {
                position: relative;
        }
}

@include screen-md-down {
        .mobileLinkShadowContainer {
                position: relative;

                > .mobileLinkShadow {
                        bottom: 0;
                        left: 0;
                        position: absolute;
                        right: 0;
                        top: 0;
                }
        }
}