toast.style.css 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. @charset "UTF-8";
  2. @font-face {
  3. font-family: 'toast';
  4. src: url("../fonts/toast.eot?76tjxy");
  5. src: url("../fonts/toast.eot?76tjxy#iefix") format("embedded-opentype"), url("../fonts/toast.ttf?76tjxy") format("truetype"), url("../fonts/toast.woff?76tjxy") format("woff"), url("../fonts/toast.svg?76tjxy#toast") format("svg");
  6. font-weight: normal;
  7. font-style: normal; }
  8. i {
  9. /* use !important to prevent issues with browser extensions that change fonts */
  10. font-family: 'toast' !important;
  11. speak: none;
  12. font-style: normal;
  13. font-weight: normal;
  14. font-variant: normal;
  15. text-transform: none;
  16. line-height: 1;
  17. /* Better Font Rendering =========== */
  18. -webkit-font-smoothing: antialiased;
  19. -moz-osx-font-smoothing: grayscale; }
  20. .toast-icon-error:before {
  21. content: "!";}
  22. .toast-icon-info:before {
  23. content: ""; }
  24. .toast-icon-notice:before {
  25. content: ""; }
  26. .toast-icon-success:before {
  27. content: "√"; }
  28. .toast-icon-warning:before {
  29. content: "!"; }
  30. .toast-item-wrapper {
  31. min-width: 250px;
  32. padding: 10px;
  33. box-sizing: border-box;
  34. color: #fff;
  35. overflow: hidden;
  36. -webkit-user-select: none;
  37. -moz-user-select: none;
  38. -ms-user-select: none;
  39. user-select: none; }
  40. .toast-item-wrapper i.toast-icon {
  41. border-radius: 30px;
  42. border: 1px solid #bdbdbd;
  43. position: absolute;
  44. top: 4px;
  45. left: 20px;
  46. width: 24px;
  47. text-align: center;
  48. vertical-align: middle;
  49. font-size: 20px; }
  50. .toast-item-wrapper .toast-close {
  51. font-size: 1.2rem;
  52. position: absolute;
  53. top: 0;
  54. right: 0;
  55. width: 20px;
  56. text-align: center;
  57. cursor: pointer; }
  58. .toast-item-wrapper.success {
  59. border-radius: 30px;
  60. border: 1px solid #bdbdbd;
  61. position: absolute;
  62. top: 4px;
  63. left: 20px;
  64. width: 24px;
  65. text-align: center;
  66. vertical-align: middle;
  67. font-size: 20px;
  68. }
  69. .toast-item-wrapper.error {
  70. border-radius: 30px;
  71. border: 1px solid #bdbdbd;
  72. position: absolute;
  73. top: 4px;
  74. left: 20px;
  75. width: 24px;
  76. text-align: center;
  77. vertical-align: middle;
  78. font-size: 20px;
  79. }
  80. .toast-item-wrapper.warning {
  81. background-color: #fff1c0;
  82. border: 1px solid #f0c948;
  83. color: #333; }
  84. .toast-item-wrapper.notice {
  85. background-color: #48a9f8;
  86. border: 1px solid #208ce4; }
  87. .toast-item-wrapper.info {
  88. background-color: #7f97a3;
  89. border: 1px solid #6b8699; }
  90. .toast-item-wrapper.toast-top-left {
  91. left: 20px;
  92. top: 20px; }
  93. .toast-item-wrapper.toast-top-right {
  94. right: 20px;
  95. top: 20px; }
  96. .toast-item-wrapper.toast-top-center {
  97. font-size: 15px;
  98. padding: 5px;
  99. color: #fff;
  100. opacity: 0.39;
  101. background: #050505;
  102. border-radius: 8px;
  103. min-width: 240px !important;
  104. position: absolute;
  105. margin-left: 5px;
  106. top: 0%;
  107. margin-top: 160px;
  108. left: 50%;
  109. -ms-transform: translate(-50%,-50%);
  110. -moz-transform: translate(-50%,-50%);
  111. -o-transform: translate(-50%,-50%);
  112. transform: translate(-50%,-50%);
  113. }
  114. .toast-item-wrapper.toast-bottom-left {
  115. left: 20px;
  116. bottom: 20px; }
  117. .toast-item-wrapper.toast-bottom-right {
  118. right: 20px;
  119. bottom: 20px; }
  120. .toast-item-wrapper.toast-bottom-center {
  121. margin: 0 auto;
  122. bottom: 20px; }
  123. .toast-item-wrapper.fullscreen {
  124. left: 20px;
  125. right: 20px;
  126. width: calc(100% - 40px); }
  127. .toast-item-wrapper p {
  128. margin: 0; }
  129. .toast-item-wrapper .toast-message {
  130. text-align: center;
  131. font-size: 15px; }
  132. .toast-item-wrapper .toast-progress {
  133. width: 0;
  134. height: 3px;
  135. background-color: rgba(0, 0, 0, 0.5);
  136. position: absolute;
  137. bottom: 0;
  138. right: 0; }
  139. .toast-item-wrapper.rtl {
  140. direction: rtl;
  141. text-align: right; }
  142. .toast-item-wrapper.rtl i.toast-icon {
  143. left: auto;
  144. right: 0; }
  145. .toast-item-wrapper.rtl .toast-close {
  146. right: auto;
  147. left: 0; }
  148. .toast-item-wrapper.rtl p {
  149. text-align: right; }
  150. .toast-item-wrapper.rtl .toast-progress {
  151. left: auto;
  152. right: 0; }