pendel/site_builder/pendel-style.css

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 22.11.2017, 17:52:19
    Author     : chris
*/

body {
    /* Disables pull-to-refresh and overscroll glow effect.
       Still keeps swipe navigations. */
    overscroll-behavior-y: none;
}



.pendel-tile-background{
    fill: rgb(250,250,250);
}
.pendel-tile-image {
    opacity: 1;
    transition: opacity 3s;
}

.pendel-tile-image[datahref] {
    opacity: 0;
}




#pendel-content-box {
    height: auto;
    width: 100%;
    min-height: 200px; /* Thinking of handheld in landscape */
    display: flex;
    flex-wrap: nowrap;
    flex: auto;
    justify-content: space-between;

}
#pendel-content{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-right: 2px;
}
#pendel-canvas{
    display: flex;
    flex-wrap: nowrap;
    flex: auto;
    width: 100%;
    padding: 10px;
    background:rgb(252,252,252);
}
.pendel-progress-bar-active{
    opacity: 1;
    background: #999;
    height: 5px;
}
.pendel-progress-bar-done{
    background: #999;
    height: 5px;
    opacity: 0;
    transition: opacity 3s;
}

#pendel-footer{
    border-top: #999 1px solid;
}

#pendel-info-line {
    font-family: sans-serif;
    font-size: x-small;
    text-align: left;
    font-weight: bold;
    padding: 1px;
    padding-left: 15px;
    padding-bottom: 5px;
    /*background:rgb(152,152,152);*/
}

#pendel-message-line {
    font-family: sans-serif;
    font-size: x-small;
    text-align: center;
    font-weight: bold;
    padding: 1px;
    padding-bottom: 5px;
    /*background:rgb(152,152,152);*/
}

#pendel-v-slider {
    background: whitesmoke;
    padding-top: 0px;
    height: auto;
}

#pendel-v-slider-knob {
    background: gainsboro;
}

#pendel-canvaspaper {
    fill:rgb(252,252,252);
    /*stroke-width:3;*/
    /*stroke:rgb(200,200,200);*/
}


.pendel-svg-tile-rect {
    fill:rgb(210,210,210);
}

.pendel-svg-tile-group {
    animation: pendel-shake-out 0.5s ;
}
.pendel-svg-tile-group:hover {
    fill: #00cc00 ;
    animation: pendel-shake-in 0.5s ;
}

.pendel-svg-tile {
    visibility: visible;
    opacity: 1;
    animation: pendel-fade-in 0.5s linear;
}
.pendel-svg-tile-hidden {
    opacity: 0;
    visibility: hidden;
    animation: pendel-fade-out 0.5s linear;
}


.pendel-modal {
    display: block; /* none: Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    opacity: 1;
    width: 100%; /* Full width */
    height: 0%; /* 100%: Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

#pendel-close{
    /*position: absolute;*/
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bolder;
    transition: 0.3s;
    cursor: default;
}

#pendel-close:hover,
#pendel-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Modal Content/Box */
.pendel-modal-content {
    position: relative;
    top: 0.1%;
    left: auto;
    margin: 1% auto;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 0.5%;
    text-align: right;
    padding-bottom: 0.5%;
    /*border: 1px solid #888;*/
    max-width: 100%;
    min-width: 200px;
    height: auto;
}
#pendel-modal-frame{
    background: #999;
    width: 100%;
    height: 0;
    position: relative;
}
#pendel-modal-image{
    width: 100%;
    height: auto;
    position: initial;
    top: 0;
    left: 0;
}

.pendel-viewer{
    font-family: sans-serif;
    text-align: rigth;
}
#pendel-close{
    font-size: xx-large;
}
#pendel-viewer-title{
    font-size: larger;
    color: whitesmoke;
}
#pendel-viewer-subtitle{
    font-size: 60%;
    color: gray;
}
@media only screen and (max-width: 768px) {
    #pendel-close{
        font-size: x-large;
    }
    #pendel-viewer-title{
        font-size: 80%;
    }
    #pendel-viewer-subtitle{
        font-size: 50%;
    }
}
#pendel-viewer-subtitle a{
    color: gray !important;
    text-decoration: none !important; /*Supressing underline doesn't work*/
}

.pendel-modal-in {
    height: 100%;
}

.pendel-modal-out {
    height: 0%;
    /*animation: fadeout 1s;*/
}

.pendel-modal-image-in {
    animation: fadein ease-in 1s;
}

.pendel-viewer-in {
    /*animation: fadein 3s;*/
}

@keyframes pendel-fade-in {
    0% { opacity: 0 }
    100% { opacity: 1 }
}
@keyframes pendel-fade-out {
    0% { opacity: 1 }
    100% { opacity: 0 }
}

@keyframes pendel-shake-in {
    25% {
        transform: rotate(-5deg) ;
    }
    50% {
        transform: rotate(+4deg) ;
    }
    75% {
        transform: rotate(-3deg) ;
    }
    100% {
        transform: rotate(+2deg) ;
    }
}
@keyframes pendel-shake-out {
    25% {
        transform: rotate(-4deg) ;
    }
    50% {
        transform: rotate(+3deg) ;
    }
    75% {
        transform: rotate(-2deg) ;
    }
    100% {
        transform: rotate(+1deg) ;
    }
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeout {
    from { opacity: 1;
           height:100%;} /* Supress a roll up*/
    to   { opacity: 0;
           height:100%; }

}

/*tablets and handhelds in landscape*/
/*@media only screen and (orientation: landscape ) and (max-width: 768px) {*/
/*@media only screen and (orientation: landscape) and (max-width: 768px){
    #pendel-modal-content {
        background-color: #feefaa;
        position: relative;
        top: 0;
        left: auto;
        margin: 1% auto;  15% from the top and centered
        margin-top: 0;
        padding-left: 1%;
        padding-right: 1%;
        padding-top: 0;
        text-align: right;
        padding-bottom: 0.5%;
        border: 1px solid #888;
        width: 600px;  Could be more or less, depending on screen size
        max-width: 80%;
        height: auto;
    }
}*/