prophetjs/build/css/prophet.css

A very lean dependency free javascript library to display toast messages on web pages.

@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro';

.prophet{
    position: fixed;
    /*display: inline-block;*/
    font-family: 'Source Sans Pro', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    margin-left:70%; /*Fallback for FF<26 and safari which doesn't calculate the margin */
    transition: margin 0.1s cubic-bezier(.07,.99,.93,.97);


}

.prophet > li{
    margin-top:0px;
    margin-bottom:0px;
    list-style-type: none;
    min-width: 100px;
    font-family: 'Assistant', sans-serif;
    opacity:0;
    background-color: #323232;
    color: #fafafa;
    z-index: 99;
    margin-top: 20px;
    cursor: pointer;
    border-radius: 2px;
    padding: 20px;
    vertical-align: middle;
    max-width: 200px;
    text-align: center;
    webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:    1px 1px 1px 0px rgba(0, 0, 0, 0.3);
    box-shadow:         1px 1px 1px 0px rgba(0, 0, 0, 0.3);
    -webkit-transition: all 0.4s cubic-bezier(.07,.99,.93,.97);
    -moz-transition: all 0.2s cubic-bezier(.07,.99,.93,.97);
    -o-transition: all 0.2s cubic-bezier(.07,.99,.93,.97);
    transition: all 0.2s cubic-bezier(.07,.99,.93,.97);
}
.prophet > .prophet-message-active{

    margin-top:10px;
    margin-bottom:0px;
    opacity: 1;
    -webkit-transition: all 0.1s cubic-bezier(.07,.99,.93,.97);
    -moz-transition: all 0.1s cubic-bezier(.07,.99,.93,.97);
    -o-transition: all 0.1s cubic-bezier(.07,.99,.93,.97);
    transition: all 0.1s cubic-bezier(.07,.99,.93,.97);
}

@media only screen and (min-width: 240px){
    ul.prophet{
        margin-left:10px;
    }
}
@media only screen and (min-width: 240px) and (max-width: 320px){
    ul.prophet{
        margin-left:30%;
    }
}
@media only screen and (min-width: 320px) and (max-width: 480px){
    ul.prophet{
        margin-left:35%;
    }
}
@media only screen and (min-width: 480px) and (max-width: 600px){
    ul.prophet{
        margin-left:50%;
    }
}
@media only screen and (min-width: 600px) and (max-width: 720px){
    ul.prophet{
        margin-left:60%;
    }
}
@media only screen and (min-width: 720px) and (max-width: 1024px){
    ul.prophet{
        margin-left:70%;
    }
}
@media only screen and (min-width: 1024px) {
    ul.prophet{
        margin-left:75%;
    }
}