Advertisement
lowheartrate

custom alerts.... so far

Nov 9th, 2019
151
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.48 KB | None | 0 0
  1. -=- HTML -=-
  2. <!-- alert image -->
  3. <div id="alert-image-wrap">
  4. <div id="alert-image">{img}</div>
  5. </div>
  6.  
  7. <!-- main alert box window -->
  8. <div id="alert-text-wrap">
  9.  
  10. <!-- alert text -->
  11. <div id="alert-text">
  12.  
  13. <!-- alert message -->
  14. <!-- messageTemplate will be replaced with your message template -->
  15. <!-- for example : {name} is now following! or {name} donated {amount} -->
  16. <span id="follow">+</span>
  17. <div id="alert-message">{messageTemplate}</div>
  18. <div id="just-followed">just followed!</div>
  19. <div id="alert-user-message">{userMessage}</div>
  20.  
  21. </div>
  22.  
  23. </div>
  24.  
  25.  
  26.  
  27.  
  28.  
  29. -=- CSS -=-
  30. .widget-AlertBox {
  31. position: relative;
  32. }
  33. body,
  34. html {
  35. overflow:hidden;
  36. margin:0;
  37. padding:0;
  38. }
  39.  
  40. #alert-box.hidden,
  41. .hidden {
  42. opacity: 0;
  43. }
  44. #alert-text {
  45. display: none;
  46. text-align:left !important;
  47. margin:0 !important;
  48. padding:0 !important;
  49. background-color: transparent;
  50.  
  51. /* animation ???? */
  52. -webkit-animation-name: follower;
  53. -webkit-animation-duration:10s;
  54. animation-name: follower;
  55. animation-duration: 10s;
  56. animation-iteration-count:1;
  57. animation-fill-mode: backwards;
  58. }
  59.  
  60. @-webkit-keyframes follower {
  61. 0% {height:0px;display:none;background-color:transparent;}
  62. 8% {height:76px;display:block;background-color:#FFFFFF;}
  63. 92% {height:76px;display:block;background-color:#FFFFFF;}
  64. 100% {height: 0px;display:none;background-color:transparent;}
  65. }
  66. @keyframes follower {
  67. 0% {height:0px;display:none;background-color:transparent;}
  68. 8% {height:76px;display:block;background-color:#FFFFFF;}
  69. 92% {height:76px;display:block;background-color:#FFFFFF;}
  70. 100% {height: 0px;display:none;background-color:transparent;}
  71. }
  72.  
  73. #just-followed {
  74. color: #d96363 !important;
  75. font-size: 26px !important;
  76. font-weight: 400 !important;
  77. text-transform: uppercase !important;
  78. text-align: right;
  79. position: relative;
  80. height:0;
  81. display:none;
  82. -webkit-animation-name:justfoll;
  83. -webkit-animation-duration:7s;
  84. animation-name:justfoll;
  85. animation-duration:7s;
  86. animation-iteration-count:1;
  87. }
  88. @-webkit-keyframes justfoll {
  89. from {} to {}
  90. }
  91. @keyframes justfoll {
  92. from {} to {}
  93. }
  94.  
  95. #alert-text {
  96. position: absolute;
  97. left: 23%;
  98. }
  99.  
  100. #alert-message {
  101. position: relative;
  102. top: -85px;
  103. left: 85px;
  104.  
  105.  
  106. /* animation ??? */
  107. }
  108.  
  109. #follow {
  110. position: relative;
  111. top: -5px;
  112. left: 25px;
  113. font-size: 72px !important;
  114. font-weight: 600 !important;
  115. color: #d96363 !important;
  116. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement