faridv/hop

.layout-uhd {
    transform: none !important;
    #menu {
        position: absolute; bottom: 50px; width: 100%;
        height: auto; overflow: hidden; padding: 10px 0;
        ul {
            margin: 0; padding: 0; list-style: none;
            li {
                width: 160px; height: 180px; text-align: center; background: #292940; padding: 30px 10px 0; color: #fff;
                position: relative; z-index: 12; transition: 0.2s all;

                h3 { font-size: 1.3rem; }
                a { text-decoration: none; color: #fff; display: inline-block; }
                .glyphicon { font-size: 42px; }

                &:before, &:after {
                    display: block; content: ''; width: 0; height: 200%; border: 180px solid transparent; transition: 0.2s all;
                    position: absolute; top: 0; right: -39px; border-left-width: 0; border-right-width: 40px; z-index: 800;
                    border-top-color: #292940;
                }
                &:after { right: auto; left: -39px; border-left-width: 40px; border-right-width: 0; border-top-width: 0; top: -100%; border-top-color: transparent; border-bottom-color: #292940; }

                &[data-type="weather"] {
                    background: #CC0000;
                    &:before { border-top-color: #CC0000; }
                    &:after { border-bottom-color: #CC0000; }
                }

                &[data-type="schedule-carousel"] {
                    background: #FFA000;
                    &:before { border-top-color: #FFA000; }
                    &:after { border-bottom-color: #FFA000; }
                }

                &[data-type="prayer-times"] {
                    background: #FF8800;
                    &:before { border-top-color: #FF8800; }
                    &:after { border-bottom-color: #FF8800; }
                }

                &[data-type="sepehr"] {
                    background: #2B4382;
                    &:before { border-top-color: #2B4382; }
                    &:after { border-bottom-color: #2B4382; }
                }

                &[data-type="games"] {
                    background: #9933CC;
                    &:before { border-top-color: #9933CC; }
                    &:after { border-bottom-color: #9933CC; }
                }

                &[data-type="uhd-events"] {
                    background: #2db34e;
                    &:before { border-top-color: #2db34e; }
                    &:after { border-bottom-color: #2db34e; }
                }

                &[data-type="news"] {
                    background: #6d309f;
                    &:before { border-top-color: #6d309f; }
                    &:after { border-bottom-color: #6d309f; }
                }

                &[data-type="uhd-programs"] {
                    background: #e64a19;
                    &:before { border-top-color: #e64a19; }
                    &:after { border-bottom-color: #e64a19; }
                }

                &[data-type="quran"] {
                    background: #007E33;
                    &:before { border-top-color: #007E33; }
                    &:after { border-bottom-color: #007E33; }
                }

                &[data-type="market"] {
                    background: #0099CC;
                    &:before { border-top-color: #0099CC; }
                    &:after { border-bottom-color: #0099CC; }
                }

                &[data-type="info"] {
                    background: #3d7262;
                    &:before { border-top-color: #3d7262; }
                    &:after { border-bottom-color: #3d7262; }
                }

                &[data-type="about-channel"] {
                    background: #0d47a1;
                    &:before { border-top-color: #0d47a1; }
                    &:after { border-bottom-color: #0d47a1; }
                }

                &[data-type="faq"] {
                    background: #1a237e;
                    &:before { border-top-color: #1a237e; }
                    &:after { border-bottom-color: #1a237e; }
                }
            }
        }
        .slick-list {
            overflow: visible;
        }
        .slick-slide {
            //> div { padding: 10px; }
            margin-left: 40px;
        }
        .slick-current {
            &.slick-active {
                li {
                    //background: #c10c08;
                    transform: scale(1.1); z-index: 80;
                }
            }
        }
        .slick-arrow { display: none !important; }

        &.out { display: none; }
    }
    #content {
        background: transparent;
        width: 100%; height: 100%; position: absolute; top: 0; left: 0;
        transition: 0.5s all; margin-top: 0; opacity: 1; visibility: visible;
        &:empty { margin-top: 100px; opacity: 0; visibility: hidden; }
        &.fullscreen { padding: 0; width: 100%; height: 100%; }
        &.half { width: 45%; left: 25%; height: 45%; }

    }
    .module {
        background: rgba(255, 255, 255, 0.8); padding: $grid-gutter-width * 2;
        .summary {
            clear: both; text-align: justify;
            .figure {
                float: left;
                margin-right: 1px;
                width: 420px;
                display: block;
                padding: 0 80px 0 0;
                margin-top: -17px;
                img { display: block; width: 100%; height: auto; }
            }
        }
        &.news {
            #news-details {
                figure {
                    width: 50%;
                    img { max-height: 100%; }
                }
                .news-text { line-height: 1.75; }
            }
            .badge { display: none; }
        }
    }
    .slick-list { overflow: hidden; }

    #app {
        #connection-status { top: 70px !important; }
        #time { color: #fff; text-shadow: 0 0 4px #333; font-size: 16px; top: auto !important; bottom: 10px !important; }
    }

    #qr-holder {
        margin-top: 20px; text-align: center;
        img { display: block; width: 55%; height: auto; margin: 0 auto 20px; }
    }
}