Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- -=- HTML -=-
- <!-- alert image -->
- <div id="alert-image-wrap">
- <div id="alert-image">{img}</div>
- </div>
- <!-- main alert box window -->
- <div id="alert-text-wrap">
- <!-- alert text -->
- <div id="alert-text">
- <!-- alert message -->
- <!-- messageTemplate will be replaced with your message template -->
- <!-- for example : {name} is now following! or {name} donated {amount} -->
- <span id="follow">+</span>
- <div id="alert-message">{messageTemplate}</div>
- <div id="just-followed">just followed!</div>
- <div id="alert-user-message">{userMessage}</div>
- </div>
- </div>
- -=- CSS -=-
- .widget-AlertBox {
- position: relative;
- }
- body,
- html {
- overflow:hidden;
- margin:0;
- padding:0;
- }
- #alert-box.hidden,
- .hidden {
- opacity: 0;
- }
- #alert-text {
- display: none;
- text-align:left !important;
- margin:0 !important;
- padding:0 !important;
- background-color: transparent;
- /* animation ???? */
- -webkit-animation-name: follower;
- -webkit-animation-duration:10s;
- animation-name: follower;
- animation-duration: 10s;
- animation-iteration-count:1;
- animation-fill-mode: backwards;
- }
- @-webkit-keyframes follower {
- 0% {height:0px;display:none;background-color:transparent;}
- 8% {height:76px;display:block;background-color:#FFFFFF;}
- 92% {height:76px;display:block;background-color:#FFFFFF;}
- 100% {height: 0px;display:none;background-color:transparent;}
- }
- @keyframes follower {
- 0% {height:0px;display:none;background-color:transparent;}
- 8% {height:76px;display:block;background-color:#FFFFFF;}
- 92% {height:76px;display:block;background-color:#FFFFFF;}
- 100% {height: 0px;display:none;background-color:transparent;}
- }
- #just-followed {
- color: #d96363 !important;
- font-size: 26px !important;
- font-weight: 400 !important;
- text-transform: uppercase !important;
- text-align: right;
- position: relative;
- height:0;
- display:none;
- -webkit-animation-name:justfoll;
- -webkit-animation-duration:7s;
- animation-name:justfoll;
- animation-duration:7s;
- animation-iteration-count:1;
- }
- @-webkit-keyframes justfoll {
- from {} to {}
- }
- @keyframes justfoll {
- from {} to {}
- }
- #alert-text {
- position: absolute;
- left: 23%;
- }
- #alert-message {
- position: relative;
- top: -85px;
- left: 85px;
- /* animation ??? */
- }
- #follow {
- position: relative;
- top: -5px;
- left: 25px;
- font-size: 72px !important;
- font-weight: 600 !important;
- color: #d96363 !important;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement