prophetjs
Version:
A very lean dependency free javascript library to display toast messages on web pages.
1 lines • 1.8 kB
CSS
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);.prophet{position:fixed;font-family:'Source Sans Pro',HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;margin-left:70%;transition:margin .1s cubic-bezier(.07,.99,.93,.97)}.prophet>li{margin-bottom:0;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 0 rgba(0,0,0,.3);-moz-box-shadow:1px 1px 1px 0 rgba(0,0,0,.3);box-shadow:1px 1px 1px 0 rgba(0,0,0,.3);-webkit-transition:all .4s cubic-bezier(.07,.99,.93,.97);-moz-transition:all .2s cubic-bezier(.07,.99,.93,.97);-o-transition:all .2s cubic-bezier(.07,.99,.93,.97);transition:all .2s cubic-bezier(.07,.99,.93,.97)}.prophet>.prophet-message-active{margin-top:10px;margin-bottom:0;opacity:1;-webkit-transition:all .1s cubic-bezier(.07,.99,.93,.97);-moz-transition:all .1s cubic-bezier(.07,.99,.93,.97);-o-transition:all .1s cubic-bezier(.07,.99,.93,.97);transition:all .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%}}