vizchange-animation-story/css/speechbubbles.css

beta testing story tool for vizchange.net

.segment {
    /* TODO set to 2500 between */
    z-index: 5000!important;
    height: calc(100 * var(--vh));
    width: 100%;
    top: 50%;
    padding: 0;
}
.segment left {
    left: 10px;
}

.captions {
    z-index: 50000!important;

    /*
    TODO set position to fixed
     */
    position: sticky;
    left: 1vw;
    top: calc(var(--margin-top-height) * 0.95);
    margin: 0;

    pointer-events: none;
}



.caption {
    padding: 10px;
}
.caption-left  {
    margin-left: calc(var(--left-margin) * 0.5);
    width: 50%;
    max-width: calc(980px / 2);
    float: left;
    margin-right: 50%;
}
.caption-right{
    float: right;
    width: 50%;
    max-width: calc(980px / 2);
    margin-left: calc(50 * var(--vw));;
}

/*
.credit, .redirect {
    z-index: 5000!important;
    position: relative;
    top: 35%;
    left: 5%;
    margin: -50px 0 0 -50px;
}
 */

p{

    font-size: 1em;
    /*
    position: relative;

    position: fixed;

     */
    padding: 1vh;
    /*
    background: rgba(202, 160, 104, 0.9);
     */
    background: #eeffee;
    border-radius: 5px;
    border-style: solid;
    border-width: 0.2vw;
    color: #333333;
}

/* Speach bouble Quote */
p:before{
   /*
    content: "\201C"; /*Unicode for Left Double Quote*/
    /*Font*/
    font-family: Vemana2000;
    font-weight: bold;
    /*Positioning*/
    /*
    position: absolute;

     */
    left: 20px;
    top: 5px;
    overflow: hidden;
}

/* Speech bouble triangle */
/*
p:after{
    content: ' ';
    border: 10px solid;
    border-color: grey transparent transparent orange;
    position: absolute;
    bottom: -20px;
    left: 30px;
}

 */