InnovationLab/public/css/page/_recipePage.scss

@charset "UTF-8";
.recipeWrapper {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    h4 {
        text-align: center;
        margin-bottom:15px;
        img {
            display: inline-block;
            width: auto;
            height: auto;
            image-rendering: pixelated;
            image-rendering: -webkit-optimize-contrast;
        }
    }
    main {
        width: 100%;
        height: auto;
        position: relative;
        padding-bottom: 120px;
    }
    --plyr-audio-progress-buffered-background: rgba(#fff,0.15);
    --plyr-range-fill-background: $blue;
    --plyr-range-thumb-background: $blue;
    --plyr-range-track-height: 5px;
    --plyr-range-thumb-height: 5px;
    --plyr-range-thumb-shadow: transparent;
    --plyr-range-thumb-active-shadow-width: 0;
    --plyr-audio-controls-background: $blue;
    --plyr-audio-range-track-background: #fff;
    --plyr-audio-range-thumb-active-shadow-color: transparent;
    --plyr-tooltip-radius: 0;
    --plyr-tooltip-shadow: none;
    --plyr-badge-border-radius: 0;
    --plyr-control-radius: 0;
    --plyr-menu-radius: 0;
    .plyr {
        margin: 0 20px 15px;
    }
    .recipe {
        &__bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(https://d1xzlli46wohoc.cloudfront.net/images/recipePage/bg.jpg) repeat left top/cover;
        }
        &__kv {
            position: relative;
            width: 100%;
            height: 368px;
            img {
                width: 100%;
                height: auto;
                image-rendering: pixelated;
                image-rendering: -webkit-optimize-contrast;
            }
            &__bg {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
            }
            &__table {
                display: none;
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 186px;
                background: url(https://d1xzlli46wohoc.cloudfront.net/images/recipePage/kv-table.png) repeat-x left top / cover;
            }
            &__kol {
                position: absolute;
                bottom: 164px;
                left: 50%;
                transform: translateX(-50%);
                width: 375px;
                height: 146px;
                img {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    right: 0;
                }
            }
            &__dish {
                position: absolute;
                width: 100%;
                height: auto;
                bottom: 0;
                left: 0;
            }
        }
        &__teaching {
            position: relative;
            padding: 20px 0 0;
            margin-bottom: 20px;
            color: #fff;
            audio {
                opacity: 0;
            }
            h2 {
                text-align: center;
                @include em(24);
                font-weight: 700;
            }
            h3 {
                text-align: center;
                @include em(16);
                font-weight: 400;
            }
            .plyr--audio .plyr__controls {
                background-color: transparent;
                padding: 0;
                color: $blue;
            }
            .plyr__time+.plyr__time {
                display: block;
            }
            .plyr__controls__item.plyr__control {
                background-color: #fff;
                border-radius: 50%;
            }
            .plyr--audio .plyr__control.plyr__tab-focus, .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded=true] {
                background-color: #fff;
                border-radius: 50%;
            }
            .plyr button {
                width: 35px;
                height: 35px;
                display: flex;
                justify-content: center;
                align-items: center;
                box-shadow: 3px 3px 5px rgba(#000,0.1);
            }
            .plyr__control svg {
                fill: $blue;
                height: var(--plyr-control-icon-size,12px);
                width: var(--plyr-control-icon-size,12px);
            }
            .recipeWrapper .recipe__teaching .plyr--audio .plyr__control.plyr__tab-focus, .recipeWrapper .recipe__teaching .plyr--audio .plyr__control:hover, .recipeWrapper .recipe__teaching .plyr--audio .plyr__control[aria-expanded=true] {
                background-color: #202020;
            }
            .plyr--audio .plyr__progress__buffer {
                &::-webkit-progress-bar {
                    background-color: rgba(#fff,0.15);
                }
            }
            .plyr--full-ui input[type=range] {
                color: $blue;
                border-radius: 5px;
                box-shadow: 3px 3px 3px rgba(#000,0.1);
                &::-webkit-slider-thumb {
                    display: none;
                    appearance: none;
                }
            }
        }
        &__step {
            margin-bottom: 35px;
            h4 {
                img {
                    width: 193px;
                }
            }
        }
        &__capture {
            position: relative;
            height: 140px;
            background-color: #FCF6DD;
            border: 1px solid $blue;
            border-radius: 10px;
            padding: 10px;
            margin: 0 20px 15px;
            overflow: hidden;
            &::before {
                content: "";
                display: none;
                width: 100%;
                height: 80%;
                background: linear-gradient(to bottom, rgba(136,136,136,0) 0%,#FCF6DD 80%,#FCF6DD 100%);
                position: absolute;
                left: 0;
                bottom: 0;
                border-radius: 0 0 10px 10px;
                z-index: 1;
                pointer-events: none;
            }
        }
        &__box {
            width: 100%;
            height: 100%;
        }
        &__list {
            width: 100%;
            height: 100%;
            color: $blue;
            overflow: hidden;
            overflow-y: auto;
            position: relative;
            ul {
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                list-style: none;
                padding-left: 0;
            }
            li {
                width: 100%;
                height: auto;
                padding-bottom: 15px;
                line-height: 1.4;
                letter-spacing: 1px;
                @include em(14);
            }
            .active {
                color: $blue;
                font-weight: bold;
            }
        }
        &__ingredients {
            h4 {
                margin-bottom: 5px;
                img {
                    width: 117px;
                }
            }
            p {
                color: $blue;
                text-align: center;
                @include em(12);
                margin-bottom: 15px;
                padding: 0 5px;
            }
        }
        &__outer {
            width: 100%;
            overflow-x: auto;
            &-ingredients {
                padding: 0 0 20px 20px;
            }
        }
        &__basket {
            position: relative;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            height: auto;
        }
        &__ingredient {
            display: inline-block;
            flex: 0 0 95px;
            width: 95px;
            height: 95px;
            margin-right: 15px;
            box-shadow: 2px 2px 3px rgba(#000,0.1);
            border-radius: 10px;
            overflow: hidden;
            filter: brightness(0.5);
            img {
                width: 100%;
                height: auto;
                max-width: 100%;
                max-height: 100%;
            }
            &:last-child {
                margin-right: 0;
            }
            &.active {
                filter: brightness(1);
            }
        }
        &__more {
            position: relative;
            margin-bottom: 25px;
            h4 {
                margin-bottom: 5px;
                img {
                    width: 176px;
                }
            }
            &__box {
                position: relative;
            }
            &__table {
                position: absolute;
                bottom: -3px;
                left: 0;
                display: block;
                width: 100%;
                height: 160px;
                background: url(https://d1xzlli46wohoc.cloudfront.net/images/recipePage/more-table.png) repeat-x left top;
                background-size: auto 100%;
            }
        }
        &__container {
            display: flex;
            justify-content: start;
            align-items: flex-end;
            position: relative;
            white-space: nowrap;
            width: 100%;
            height: 217px;
            overflow-x: auto;
            overflow-y: hidden;
        }
        &__else {
            position: relative;
            flex: 0 0 155px;
            width: 155px;
            height: 100%;
            display: block;
            overflow: hidden;
            &:last-child {
                margin-right: 0;
            }
            &__dish {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: auto;
                image-rendering: pixelated;
            }
            &__name {
                bottom: 24px;
                left: 50%;
                transform: translateX(-50%);
                position: absolute;
                width: auto;
                height: 26px;
                image-rendering: pixelated;
                image-rendering: -webkit-optimize-contrast;
            } 
        }
        &__share {
            position: relative;
            padding: 0 20px;
            margin-bottom: 25px;
            h4 {
                img {
                    width: 236px;
                }
            }
        }
        &__swiper {
            position: relative;
            padding-bottom: 25px;
            margin-bottom: 10px;
            .swiper {
                border-radius: 20px;
                border: 1px solid #ccc;
                overflow: hidden;
                &-slide {
                    width: 100%;
                    img {
                        width: 100%;
                        height: auto;
                        image-rendering: pixelated;
                        image-rendering: -webkit-optimize-contrast;
                    }
                }
            }
            .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
                bottom: 5px;
            }
            .swiper-pagination-bullet {
                width: 5px;
                height: 5px;
                background-color: #fff;
                opacity: 1;
            }
            .swiper-pagination-bullet-active {
                background-color: $blue;
            }
        }
        &__action {
            display: flex;
            justify-content: space-between;
        }
        &__btn {
            width: 48%;
            img {
                width: 100%;
                height: auto;
                image-rendering: pixelated;
                image-rendering: -webkit-optimize-contrast;
            }
        }
        &__tag {
            position: relative;
            padding: 0 20px;
            margin-bottom: 20px;
            h4 {
                margin-bottom: 15px;
                img {
                    height: 17px;
                }
            }
            &__list {
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-items: flex-start;
            }
            &__item {
                display: inline-block;
                padding: 6px 20px 7px;
                border-radius: 30px;
                border: 1px solid $blue;
                color: $blue;
                margin-right: 10px;
                margin-bottom: 10px;
                line-height: 1;
                &:not([href]):hover {
                    color: $blue;
                }
            }
        }
        &__goback {
            position: relative;
            text-align: center;
            a {
                width: 200px;
                display: inline-block;
                img {
                    width: 100%;
                    height: auto;
                    image-rendering: pixelated;
                    image-rendering: -webkit-optimize-contrast;
                }
            }
            
        }
        &__buy {
            // opacity: 0;
            // visibility: hidden;
            position: fixed;
            bottom: -49px;
            left: 0;
            display: block;
            width: 100%;
            z-index: 10;
            // transition: 0.3s;
            img {
                width: 100%;
                height: auto;
                image-rendering: pixelated;
                image-rendering: -webkit-optimize-contrast;
            }
            &::after {
                content: "";
                position: relative;
                top: -1px;
                display: block;
                background-color: $blue;
                width: 100%;
                height: 50px;
            }
        }
    }
    
}

.ordinary {
    .recipe {
        &__kv {
            padding-top: 60px;
            padding-bottom: 10px;
            height: auto;
            &__table {
                display: block;
                height: 0;
                padding-bottom: 38%;
            }
            &__ordinary {
                position: relative;
                top: auto;
                left: 50%;
                transform: translateX(-50%);
                width: 100%;
                height: auto;
                margin-bottom: 10px;
            }
            &__dish {
                position: relative;
                left: 50%;
                bottom: auto;
                transform: translateX(-50%);
                width: 90%;
                height: auto;
                color: $blue;
                font-size: 22px;
                font-weight: 900;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap: wrap;
                span {
                    display: block;
                    width: 100%;
                    text-align: center;
                    font-size: 0.8em;
                    font-weight: 700;
                }
            }
        }
        &__step {
            h4 {
                img {
                    width: 145px;
                }
            }
        }
        &__contentbox {
            position: relative;
            height: auto;
            background-color: #FCF6DD;
            border: 1px solid #4B5283;
            border-radius: 10px;
            padding: 35px 0 20px;
            margin: 0 20px 15px;
            overflow: hidden;
        }
        &__open {
            position: absolute;
            right: 12px;
            top: 12px;
            width: 15px;
            height: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
                width: 100%;
                height: auto;
                image-rendering: pixelated;
                image-rendering: -webkit-optimize-contrast;
            }
        }
        &__box {
            height: 120px;
            @include em(14);
            padding: 0 10px 15px;
            overflow-x: hidden;
            overflow-y: auto;
            color: $blue;
            letter-spacing: 1px;
            line-height: 1.8;
            .ingredients {
                &__box {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                &__space {
                    position: relative;
                    flex: 1;
                    height: 100%;
                    &::after {
                        content: "";
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                        width: 90%;
                        height: 1px;
                        background-color: #ccc;
                    }
                }
            }
        }
        &__ingredients {
            .recipe__contentbox {
                padding: 20px 0;
            }
        }
        &__action {
            justify-content: center;
        }
        &__modal {
            opacity: 0;
            visibility: hidden;
            position: fixed;
            top: 0;
            bottom: 0;
            left: -1px;
            right: 0;
            width: calc(100% + 2px);
            height: 100%;
            z-index: -1;
            .modal {
                &-dialog {
                    width: 100%;
                    height: 100%;
                    margin: 0;
                }
                &-content {
                    border-radius: 0;
                    height: 100%;
                    background-color: transparent;
                }
                &__bg {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(#000,0.9);
                }
                &-header {
                    position: relative;
                    flex-direction: column;
                    justify-content: flex-end;
                    align-items: center;
                    padding-top: 80px;
                    padding-bottom: 0;
                    border-bottom: none;
                    .close {
                        position: absolute;
                        margin: 0;
                        padding: 0;
                        width: 25px;
                        height: auto;
                        display: flex;
                        justify-content: center;align-items: center;
                        top: 20px;
                        right: 20px;
                        z-index: 1;
                        img {
                            width: 100%;
                            height: auto;
                            image-rendering: pixelated;
                            image-rendering: -webkit-optimize-contrast;
                        }
                        &:focus,&:focus-visible {
                            outline: none;
                        }
                    }
                }
                &-title {
                    display: inline-block;
                    width: 206px;
                    margin-bottom: 30px;
                    img {
                        width: 100%;
                        height: auto;
                        image-rendering: pixelated;
                        image-rendering: -webkit-optimize-contrast;
                    }
                }
                &__name {
                    position: relative;
                    width: 100%;
                    color: #fff;
                    @include em(24);
                    font-weight: 700;
                    text-align: center;
                    padding: 12px 0;
                    border-top:  0.5px solid rgba(#FFEFBE,0.5);
                    border-bottom:  0.5px solid rgba(#FFEFBE,0.5);
                    .eocjs-newsticker {
                        padding: 0;
                        background-color: transparent;
                        .eocjs-newsticker-container {
                            height: 23px;
                        }
                    }
                }
                &-body {
                    color: #fff;
                    position: relative;
                    line-height: 1.7;
                    font-weight: 400;
                    letter-spacing: 1px;
                    padding-top: 15px;
                    padding-bottom: 0;
                    overflow: hidden;
                    &:after {
                        content: "";
                        display: block;
                        position: absolute;
                        pointer-events: none;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 85px;
                        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
                    }
                }
                &__content {
                    width: 100%;
                    height: 100%;
                    padding-bottom: 80px;
                    overflow-x: hidden;
                    overflow-y: auto;
                    font-size: 15px;
                    letter-spacing: 2px;
                    line-height: 2;
                }
                &-footer {
                    position: relative;
                    justify-content: center;
                    padding: 3px;
                    @include em(12);
                    text-align: center;
                    font-weight: 400;
                    color: #fff;
                    background-color: $blue;
                    border-radius: 0;
                    border-top: none; 
                }
            }
        }
    }
}
 

@media (min-width: 768px) {

}