@import "Variables.css";

.story-preview-wrapper {
    position: relative;
    overflow: hidden;
}

.story-preview {
    padding-top: 2em;
    max-height: 400px;
    text-overflow: ellipsis;
    -webkit-mask-image: linear-gradient(rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}

    .story-preview-title {
        text-align: center;
    }

    .story-preview-button {
        position: absolute;
        bottom: 2em;
        transform: translate(-50%, 0);
        left: 50%;
    }

    .story-textarea {
        min-height: 600px;
    }

@media (max-width: 767px) {
    .snapparent {
        max-height: 80vh;
        overflow-y: scroll;
        scroll-snap-type: mandatory; /* for older browsers */
        scroll-snap-points-y: repeat(100vh); /* for older browsers */
        scroll-snap-type: y mandatory;
    }

    .story-preview-wrapper {
        height: 100%;
        scroll-snap-align: start;
        position: relative;
    }

    .story-preview {
        max-height: 60vh;
    }

    .max-height-80 {
        max-height: 70vh;
    }
}

.story {

}

.story-page {
/*    padding-top: 100px;
*/}

.story-title{
    text-align: center;
}

.story-text{
    line-height: 1.5;
    text-align: justify;
}

.story-text p {
    margin-bottom: 10px;
    font-size: 1.2rem;
    line-height: 1.5;
}

.story-panel {
    width: 100%;
    font-family: Roboto;
    font-size: 1.2em;
    list-style-type: none;
    padding: 0;
}

.story-panel-header {
    border-radius: 3px;
    padding: 1em;
    text-align: center;
    background: rgb(var(--color-navbar));
    color: var(--text-white);
    cursor: default;
}

.story-panel-slot {
    background-color: whitesmoke;
    border-radius: 3px;
    padding: 1em;
    justify-content: space-between;
    box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.1);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

@media (max-width: 767px) {
    .story-panel {
        display: none;
    }
}

.story-card {
    max-height: 400px;
}

    .story-card .card-header{
        display:flex;
        justify-content: center;
        align-items: center;
        height: 6em;
        line-height: 100%;
    }

    .story-card .card-text {
        position: relative;
        height: 200px;
        -webkit-mask-image: linear-gradient(rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
        text-overflow: ellipsis;
        line-height: 1.5;
        text-align: justify;
    }

    .story-card button {
        position: absolute;
        bottom: 3em;
        transform: translate(-50%, 0);
        left: 50%;
        z-index: 1;
    }

        .story-card button:active {
            transform: translate(-50%, 0) scale(.96);
        }

.stories-card {
    border-color: black;
}
    .stories-card .card {
    }

    .stories-card > .card-header {
        transform: translate(-50%, -50%);
        left: 50%;
        position: absolute;
        display: inline-block;
    }

.story-view-card {
    margin-top: 3em;
    margin-bottom: 3em;
    border-color: black;
    display: block;
}

    .story-view-card > .card-body {
        margin-top: -2em;
        padding-left: 1em;
        padding-right: 1em;
    }
    
    .story-view-card > .card-header {
        transform: translate(-50%, -50%);
        left: 50%;
        position: relative;
        display: inline-block;
    }


.story-book-image{
}

.story-table {
    margin-top: 2em;
    border-collapse: separate;
    border-spacing: 0px;
    border-radius: 0px 20px 0px 0px;
}

    .story-table thead tr:first-child td:first-child {
        border-left: 1px solid #222222;
        border-radius: 10px 0px 0px 0px;
    }

    .story-table thead td:last-child {
        border-right: 1px solid #222222;
        border-radius: 0px 10px 0px 0px;
    }

    .story-table thead td {
        border-top: 1px solid #222222;
        border-bottom: none;
    }

.story-table tbody td:first-child {
    border-left: 1px solid #222222;
}

    .story-table tbody td:last-child {
        border-right: 1px solid #222222;
    }

    .story-table tbody td {
        border-top: none;
        border-bottom: none;
    }

        .story-table tbody tr:last-child td {
            border-bottom: 1px solid #222222;
        }

.story-list-card {
    max-height: 16em;
    overflow: hidden;
}

    .story-list-card .card-body {
        max-height: 16em;
    }

    .story-list-card .card-body p {
        display: none;
    }

        .story-list-card .card-body p:first-child {
            display: block;
        }

.story-bar {
    margin-bottom: 0.2em;
    min-height: 4em;
    display: flex;
    align-items: center;
    border: 1px solid;
    border-radius: 6px;
    border-color: rgb(var(--color-honeydew));
/*    background: rgb(229,229,229);
    background: linear-gradient(90deg, rgba(var(--color-honeydew),1) 0%, rgba(var(--color-honeydew-light),1) 20%, rgba(255,255,255,1) 80%);*/
}

.story-bar-title {
    font-size: 1.3em;
}

.story-bar-published {
    font-size: 1em;
}