@viewdo/dxp-story-player-assets/less/templates/vanillabean/scenes/html.less

## Installation

.viewdo-html(@primary: #2d5174, @secondary: #6d5f8c, @theme: default){

    body #state-player section:not(.ivx-state-video-section).viewdo-html{
        width: 100%;
        max-width: 48rem;
        box-sizing: border-box;
        padding: 0 1rem;

        ._htmlSceneMobile{
            max-width: calc(100vw - 5rem);
            margin: 0 auto;            
        }

        .responsive(mobile,{
            ._htmlSceneMobile;
        });         
    }

    .viewdo-html{

        header{
            text-align: left;

            hr{
                height: 1px;
                border: none;
                border-top: 1px dotted white;
                margin: 1.5rem 0 0;                
            }

            h1{
                text-align: center;
            }
        
            h1 + * {
                margin-top: 2rem;
            }
        
            img{
                display: block;
                margin: 0 auto;
            }

            h2,ul,ol,p,img,.viewdo-html-testimonial-grid{
                margin-top: 1.5rem;
            }

            h2 + *{
                margin-top: inherit;
            }

            ul,ol{
                margin-bottom: 0;
                padding-left: 0;

                li{
                    margin-left: 1.125em;
                }
            
                &:before{
                    content:attr(data-header);
                    font-size:120%;
                    font-weight:bold;                  
                }
            }

            .ivx-input-container-buttons .ivx-input-buttons {
                &:hover {
                  background: white;
                  color: black;
                }
            }

            .viewdo-html-testimonial-grid{
                display: flex;
                align-items: center;
                flex-wrap: wrap;

                .viewdo-html-testimonial{
                    display: flex;
                    align-items: center; 
                    width: 50%;
                    box-sizing: border-box;
                    
                    &:nth-child(odd){
                        padding-right: .75rem;
                    }

                    &:nth-child(even){
                        padding-left: .75rem;
                    }
                    
                    &:nth-child(n+3){
                        padding-top: 1.5rem;
                    }

                    &:only-child{
                        padding: 0;
                        width: 100%;
                    }

                    .viewdo-html-testimonial-photo{
                        align-self: flex-start;
                        width: 150px;
                        height: 150px;
                        background-size: cover;

                        img{
                            margin: 0;
                        }                        
                    }

                    .viewdo-html-testimonial-copy{
                        width: 100%;
                        p{
                            font-size: .875em;
                            margin: 0 0 0 1rem;
                        }

                        span{
                            display: block;
                            font-size: .75em;
                            margin: .5rem 0 0 1rem;
                            opacity: .7;                        
                        }
                    }
    

                }
            }

            ._viewdoTestimonialsMobile{

                .viewdo-html-testimonial-grid{
                    .viewdo-html-testimonial{
                        width: 100%;
                        flex-direction: column;

                        &:nth-child(odd),
                        &:nth-child(even){
                            padding: 0;
                        }

                        &:nth-child(n+2){
                            padding-top: 1.5rem;
                        }

                        .viewdo-html-testimonial-photo{
                            margin: 0 auto 1rem;
                            width: 30%;
                            padding-top: 30%;
                            height: 0;                        
                        }

                        .viewdo-html-testimonial-copy{
                            width: 100%;
                        }
                        .viewdo-html-testimonial-copy p {
                            margin: auto;
                        }
                    }
                }

            }

            .responsive(mobile,{
                ._viewdoTestimonialsMobile;
                body #state-player section:not(.ivx-state-video-section).viewdo-html {
                    max-width: initial;
                  }
            });               

        }

    }

}