pnotify.css 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. /*
  2. Author : Hunter Perrin
  3. Version : 3.0.0
  4. Link : http://sciactive.com/pnotify/
  5. */
  6. /* -- Notice */
  7. .ui-pnotify {
  8. top: 36px;
  9. right: 36px;
  10. position: absolute;
  11. height: auto;
  12. z-index: 2;
  13. }
  14. body > .ui-pnotify {
  15. /* Notices in the body context should be fixed to the viewport. */
  16. position: fixed;
  17. /* Ensures notices are above everything */
  18. z-index: 1000400000;
  19. }
  20. .ui-pnotify-modal-overlay {
  21. background-color: rgba(0, 0, 0, .4);
  22. top: 0;
  23. left: 0;
  24. position: absolute;
  25. height: 100%;
  26. width: 100%;
  27. z-index: 1;
  28. }
  29. body > .ui-pnotify-modal-overlay {
  30. position: fixed;
  31. z-index: 100039;
  32. }
  33. .ui-pnotify.ui-pnotify-in {
  34. display: block !important;
  35. }
  36. .ui-pnotify.ui-pnotify-move {
  37. transition: left .5s ease, top .5s ease, right .5s ease, bottom .5s ease;
  38. }
  39. .ui-pnotify.ui-pnotify-fade-slow {
  40. transition: opacity .6s linear;
  41. opacity: 0;
  42. }
  43. .ui-pnotify.ui-pnotify-fade-slow.ui-pnotify.ui-pnotify-move {
  44. transition: opacity .6s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease;
  45. }
  46. .ui-pnotify.ui-pnotify-fade-normal {
  47. transition: opacity .4s linear;
  48. opacity: 0;
  49. }
  50. .ui-pnotify.ui-pnotify-fade-normal.ui-pnotify.ui-pnotify-move {
  51. transition: opacity .4s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease;
  52. }
  53. .ui-pnotify.ui-pnotify-fade-fast {
  54. transition: opacity .2s linear;
  55. opacity: 0;
  56. }
  57. .ui-pnotify.ui-pnotify-fade-fast.ui-pnotify.ui-pnotify-move {
  58. transition: opacity .2s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease;
  59. }
  60. .ui-pnotify.ui-pnotify-fade-in {
  61. opacity: 1;
  62. }
  63. .ui-pnotify .ui-pnotify-shadow {
  64. -webkit-box-shadow: 0px 6px 28px 0px rgba(0,0,0,0.1);
  65. -moz-box-shadow: 0px 6px 28px 0px rgba(0,0,0,0.1);
  66. box-shadow: 0px 6px 28px 0px rgba(0,0,0,0.1);
  67. }
  68. .ui-pnotify-container {
  69. background-position: 0 0;
  70. padding: .8em;
  71. height: 100%;
  72. margin: 0;
  73. }
  74. .ui-pnotify-container:after {
  75. content: " "; /* Older browser do not support empty content */
  76. visibility: hidden;
  77. display: block;
  78. height: 0;
  79. clear: both;
  80. }
  81. .ui-pnotify-container.ui-pnotify-sharp {
  82. -webkit-border-radius: 0;
  83. -moz-border-radius: 0;
  84. border-radius: 0;
  85. }
  86. .ui-pnotify-title {
  87. display: block;
  88. margin-bottom: .4em;
  89. margin-top: 0;
  90. }
  91. .ui-pnotify-text {
  92. display: block;
  93. }
  94. .ui-pnotify-icon, .ui-pnotify-icon span {
  95. display: block;
  96. float: left;
  97. margin-right: .2em;
  98. }
  99. /* Alternate stack initial positioning. */
  100. .ui-pnotify.stack-topleft, .ui-pnotify.stack-bottomleft {
  101. left: 25px;
  102. right: auto;
  103. }
  104. .ui-pnotify.stack-bottomright, .ui-pnotify.stack-bottomleft {
  105. bottom: 25px;
  106. top: auto;
  107. }
  108. .ui-pnotify.stack-modal {
  109. left: 50%;
  110. right: auto;
  111. margin-left: -150px;
  112. }