fossasia/loklak_webclient

.no-x-scroll {
    overflow-x: hidden;
    height: 100%;
}

#map {
    //width: 100vw;
    height: calc(100vh - 120px);
}


/* Style for wall front-end */


/*Wall creation */

.layoutRadio {
    margin: 12px;
}

.layoutRadio > input {
    /* HIDE RADIO */
    display: none;
}

.layoutRadio > input + img {
    /* IMAGE STYLES */
    cursor: pointer;
    border: 4px solid transparent;
    &:hover {
        border: 4px solid #D8D8D8;
        cursor: pointer;
    }
}

.layoutRadio > input:checked + img {
    /* (CHECKED) IMAGE STYLES */
    border: 4px solid #C8C8C8;
    border-radius: 5%;
}

.toggle-switch {
    border-radius: 2px;
    border-color: #CABFBF !important;
    vertical-align: middle;
}

.wall-preview-container {
    height: 500px;
}

.wall-preview {
    background-color: #aaa;
    border: 22px solid #C8C8C8;
    border-radius: 5%;
    .wall-preview-header {
        height: 100px;
        display: flex;
        flex-direction: row;
        .preview-hashtag,
        .preview-event-name,
        .preview-banner {
            text-align: center;
            font-size: 18px;
        }
    }
}

.wall-preview-header > [class^="col-"],
.wall-preview-header > [class*=" col-"] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.design-box {
    margin-top: 20px;
}

.wall-creation-form {
    max-width: 75%;
    line-height: 200%;
    font-size: 16px;
}

.wall-creation-form > * input[type="text"] {
    width: 50%;
}

.tabs-left > li {
    padding-bottom: 10%;
    height: 33%;
}

.tabs-left > li > a {
    text-align: center;
    padding: 20% 0;
}

.wall-modal {
    overflow-y: hidden !important;
}

.wall-modal-dialog,
#data-connect-modal-dialog {
    width: 100%;
    height: 98%;
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.wall-modal-content {
    height: 98%;
    border-radius: 25;
    width: 100%;
}

.wall-modal-body {
    max-height: calc(100% - 140px);
    overflow-y: auto;
}

.mainhashtag-addon {
    background-color: #337ab7 !important;
    color: white !important;
}

.wall-float-text {
    display: inline-block;
    padding-left: 10px;
    vertical-align: middle;
}

.wall-exclude-toggles {
    opacity: 0.8;
    color: grey;
}

.wall-float-container {
    // padding-bottom: 10px;
    margin-top: -30px;
}

.wall-tag-input {
    min-height: 60px;
    outline: none !important;
    border: 0px solid transparent !important;
    padding: 5px;
    .host {
        .tags {
            outline: none !important;
            border: 0px solid transparent !important;
            box-shadow: none !important;
        }
    }
}

.wall-media-toggle {
    padding-top: 10px;
}

.wall-colored-header {
    width: 100%;
    border-radius: 5px 5px 0 0;
    padding: 10px;
    margin-bottom: 0;
}

.wall-float-icon {
    display: inline-block;
    vertical-align: middle;
}

.wall-contains-header {
    @extend .wall-colored-header;
    background-color: #ccf7c7;
    color: #1d680d;
    border-bottom: 1px solid #98bc68;
}

.wall-float-icon-contains {
    @extend .wall-float-icon;
    color: #3CE330;
}

.wall-tag-label-contain {
    border: 1px solid #98bc68;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 30px;
    display: block;
}

.wall-not-contains-header {
    @extend .wall-colored-header;
    background-color: #fbd9d9;
    color: #c70a15;
    border-bottom: 1px solid #b35e51;
}

.wall-float-icon-not-contains {
    @extend .wall-float-icon;
    color: red;
}

.wall-tag-label-not-contain {
    border: 1px solid #b35e51;
    border-radius: 5px;
    margin-top: 10px;
}

.wall-preview-logo {
    height: 50px;
    max-width: 200px;
    margin-top: -10px;
    margin-bottom: 10px;
}

.wall-thumbnail-logo {
    @extend .wall-preview-logo;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHUlEQVQIW2M8fer0TFMz03QYzcjAwMCALMhIUAUAAQYd92It1YAAAAAASUVORK5CYII=
) repeat;
}

.wall-thumbnail-loading {
    height: 250px;
    position: absolute;
    left: 0;
    opacity: 0.8;
    margin-right: 20px;
    display: block;
    width: 250px;
    background-color: grey;
    z-index: 1;
}

.spinner {
    text-align: center;
}

.spinner > div {
    width: 18px;
    height: 18px;
    background-color: #333;
    margin-top: 50%;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0)
    }
    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

.wall-file-upload {
    width: 157px;
    height: 57px;
    margin-left: 15px;
    background: url(https://lh6.googleusercontent.com/-dqTIJRTqEAQ/UJaofTQm3hI/AAAAAAAABHo/w7ruR1SOIsA/s157/upload.png);
    overflow: hidden;
    input {
        display: block !important;
        width: 157px !important;
        height: 57px !important;
        opacity: 0 !important;
        overflow: hidden !important;
    }
}

.wall-location-input {
    margin-top: 10px;
    width: 160px;
}

.wall-location-list {
    background-color: $btn-loklak-blue;
    color: white;
    border-radius: 5px;
    text-align: left;
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 160px;
    > li {
        padding: 8px;
        &:hover {
            background-color: $btn-loklak-blue-hover;
            cursor: pointer;
        }
    }
}


/*Wall display */

.wall-header {
    min-height: 120px;
    background-color: #3c8dbc;
    display: flex;
    flex-direction: row;
    .hashtag,
    .event-name,
    .banner,
    .wall-settings-icon {
        text-align: center;
        color: white;
        font-size: 24px;
    }
    .hashtag,
    .event-name {
        width: 33.33333%;
    }
    .banner col-md-3 {
        width: 25%;
    }
    .banner col-md-1 {
        width: 8.33333%;
    }

}

.wall-header > [class^="col-"],
.wall-header > [class*=" col-"] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wall-header-eventname {
    padding: 0;
}

.wall-body {
    min-height: 100% !important;
}

.wall-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 42;
}

.wall-container {
    background: #F5F8FA;
    // Helper classes
    .abs-center-y {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }
    .abs-center-x {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }
    .abs-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
    }
    // Generals
    padding: 0;
    .input-container {
        margin-top: 10px;
        width: 95%;
        padding: 0;
        form {
            padding-left: 0;
        }
    }
    .content-container {
        width: 95%;
        margin-top: 10px;
        border-radius: 6px;
        padding: 0;
        .new-tweet-noti {
            display: block;
            padding: 10px 1px;
            text-align: center;
            font-size: 13px;
            border-bottom: 1px solid $search-grey-border;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            &:hover {
                background: $search-grey-border;
                cursor: pointer;
                a {
                    text-decoration: none;
                }
            }
        }
        .result-container {
            border: 1px solid $search-grey-border;
            padding: 0;
        }
    }
}

.linear {
    display: block;
    height: 100%;
    background: white;
    padding: 20px 12px;
    margin-bottom: 25px;
    border-bottom: 1px solid $search-grey-border;
    &:first-child {
        border-top-left-radius: 6px;
        border-right-left-radius: 6px;
    }
    .avatar {
        height: 130px;
        max-width: 130px;
        float: left;
        border-radius: 6px;
        // margin-bottom: 20px;
    }
    .linear-content {
        position: relative;
        margin-left: 150px;
        height: 100%;
        .name {
            &:hover {
                color: $search-twitter-blue;
            }
        }
        img {
            height: 100%;
            width: auto;
            max-width: 100%;
        }
        .linear-content-text {
            word-break: keep-all;
            color: #292f33;
            font-size: 1.5vw;
            line-height: 120%;
            .linear-hashtag {
                color: #55ACEE;
            }
            .linear-hashtag-current {
                font-weight: bold;
            }
        }
        .metadata {
            position: absolute;
            bottom: 0;
            margin-top: 5px;
            font-size: 1.2vw;
            color: #8899A6;
            font-weight: normal;
            font-style: italic;
        }
    }
}

.coa {
    display: block;
    height: 70vh;
    background: white;
    padding: 10vh 2vw;
    margin-top: 8vh;
    border-bottom: 1px solid $search-grey-border;
    &:first-child {
        border-top-left-radius: 6px;
        border-right-left-radius: 6px;
    }
    .avatar {
        height: 180px;
        max-width: 180px;
        float: left;
        border-radius: 6px;
    }
    .coa-content {
        padding-left: 20px;
        height: 100%;
        position: relative;
        margin-left: 200px;
        min-height: 220px;
        .name {
            &:hover {
                color: $search-twitter-blue;
            }
        }
        img {
            max-width: 100%;
            max-height: 390px;
        }
        .coa-content-text {
            word-break: keep-all;
            color: #292f33;
            font-size: 40px;
            line-height: 140%;
            .coa-hashtag {
                color: #55ACEE;
            }
            .coa-hashtag-current {
                font-weight: bold;
            }
        }
        .metadata {
            position: absolute;
            bottom: 0;
            font-size: 28px;
            color: #8899A6;
            font-weight: normal;
            padding-top: 20px;
            font-style: italic;
        }
    }
}

.deckgrid[deckgrid]::before {
    /* Specifies that the grid should have a maximum of 4 columns. Each column will have the classes 'column' and 'column-1-4' */
    content: '3 .column.column-1-3';
    font-size: 0;
    /* See https://github.com/akoenig/angular-deckgrid/issues/14#issuecomment-35728861 */
    visibility: hidden;
}

.deckgrid .column {
    float: left;
    display: table;
}

.deckgrid .column-1-3 {
    width: 33.3%;
}

.card-container {
    margin-bottom: 10px;
    padding-right: 5px;
    padding-left: 5px;
    /*height:200px;*/
    height: calc(33vh - 50px);
    .card {
        height: 100%;
        margin: 0px;
        background: white;
        padding: 5px;
        border: 1px solid $search-grey-border;
        border-radius: 5px;
        .card-content {
            height: 100%;
            padding: 5px;
            position: relative;
            margin: 0px;
            .name {
                &:hover {
                    color: $search-twitter-blue;
                }
            }
            .tweet-image {
                max-width: 100%;
                max-height: calc(33vh - 70px);
                padding-right: 10px;
            }
            .card-content-text {
                word-wrap: break-word;
                color: #292f33;
                font-size: 2.8vh;
                line-height: 1.5em;
                .card-hashtag {
                    color: #55ACEE;
                }
                .card-hashtag-current {
                    font-weight: bold;
                }
            }
            .metadata {
                position: absolute;
                width: 100%;
                .avatar {
                    float: left;
                    height: 30px;
                    max-width: 30px;
                    border-radius: 2px;
                    margin-right: 5px;
                }
                bottom: 0;
                font-size: 2.1vh;
                color: #8899A6;
                line-height: 1.2em;
                font-weight: normal;
                font-style: italic;
            }
        }
    }
}


/*Styles for statistics side bar */

.chart-bar {
    margin-left: 10px;
    padding-right: 20px;
}

.leaderboard-item {
    text-align: left;
    border-bottom: 2px solid $background-dark;
    /*margin: 8px;*/
    padding: 4px 0;
    font-size: 2.5vh;
    img {
        border-radius: 50%;
    }
    td {
        position: relative;
        padding-left: 0 !important;
        padding-right: 0 !important;
        img {
            height: 8vh;
            width: 8vh;
            line-height: 8vh;
        }
    }
}

.leaderboard-item {}

.leaderboard-count {
    background-color: #00a65a;
    height: 8vh;
    width: 8vh;
    padding: 2vh 0;
    text-align: center;
    border-radius: 50%;
    font-weight: bold;
    font-size: 2.2vh;
}

.leaderboard-label {
    top: 9px;
    font-size: 2vh;
    position: absolute;
    left: 6.8vh;
    text-align: center;
    line-height: .9;
    padding: 2px 3px;
    background-color: #8FB40D;
}

.leaderboard-text {
    a {
        font-size: 2.8vh;
        height: 8vh;
        line-height: 8vh;
    }
}

.histogram-loader {
    margin-right: auto;
    margin-left: auto;
    width: 64px;
    display: block;
    margin-top: 20px;
}

.leaderboard-container {
    width: 32vw;
    max-height: 19.5vw;
    overflow: hidden;
}

.histogram-container {
    /*position: fixed;*/
    /*padding-top: 5vh;*/
    /*background-color: red;*/
    margin-bottom: 0;
    bottom: 0;
    width: 32vw;
    .box {
        margin-bottom: 0;
        width: initial;
    }
    .wall-histogram {
        height: 25vh;
    }
    .histogram-gradient {
        background: -webkit-linear-gradient(transparent, #F5F8FA);
        /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(transparent, #F5F8FA);
        /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(transparent, #F5F8FA);
        /* For Firefox 3.6 to 15 */
        background: linear-gradient(transparent, #F5F8FA);
        /* Standard syntax */
        /*background-color: #F5F8FA`;*/
        height: 2vh;
    }
}


/*Styles for wall thumbnail*/

.wall-thumbnail-container {
    width: 100%;
    white-space: nowrap;
    margin-top: 30px;
}

.wall-thumbnail {
    &:hover {
        border: 1px solid $search-twitter-blue;
    }
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 30px;
    width: 250px;
    height: 250px;
    position: relative;
    background-color:white;
    border: 1px solid $search-grey-border;
    .sq-setter-w {
        width: 100%;
        height: auto;
        visibility: hidden;
    }
    .wall-thumbnail-close {
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 12px;
        margin-right: 10px;
        z-index: 1;
        color: white;
        text-decoration: none;
        cursor: pointer;
        opacity: 0.5;
        padding: 10px;
        border: 1px solid transparent;
        border-radius: 50%;
        &:hover {
            font-weight: bold;
            cursor: pointer;
        }
    }
    .wall-thumbnail-content {
        position: absolute;
        text-decoration: none;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        text-align: center;
        .wall-thumbnail-event-name {
            height: 25%;
            padding-top: 10%;
            margin-bottom: 10%;
        }
        .wall-thumbnail-mainhashtag {
            text-align: center;
            padding-top: 15%;
            padding-bottom: 15%;
        }
        .wall-thumbnail-footer {
            color: black;
            text-align: center;
            padding-top: 10%;
            width: 250px;
            margin-left: 0px;
            border-top: 1px solid $search-grey-border;
            div {
                border-left: 1px solid $search-grey-border;
                text-align: center;
                span {
                    &:hover {
                        text-decoration: underline;
                        cursor: pointer;
                        color: $search-light-black;
                    }
                    i {
                        margin-right: 5px;
                    }
                }
            }
        }
    }
}