This repository has been archived by the owner on Feb 17, 2021. It is now read-only.
/
hopscotch.css
29 lines (29 loc) · 11 KB
/
hopscotch.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}
@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translatey(20px);} 100%{opacity:1;-webkit-transform:translatey(0);}}@-moz-keyframes fadeInUp{0%{opacity:0;-moz-transform:translatey(20px);} 100%{opacity:1;-moz-transform:translatey(0);}}@-o-keyframes fadeInUp{0%{opacity:0;-o-transform:translatey(20px);} 100%{opacity:1;-o-transform:translatey(0);}}@keyframes fadeInUp{0%{opacity:0;transform:translatey(20px);} 100%{opacity:1;transform:translatey(0);}}.fade-in-up{-webkit-animation-name:fadeInUp;-moz-animation-name:fadeInUp;-o-animation-name:fadeInUp;animation-name:fadeInUp;}
@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translatey(-20px);} 100%{opacity:1;-webkit-transform:translatey(0);}}@-moz-keyframes fadeInDown{0%{opacity:0;-moz-transform:translatey(-20px);} 100%{opacity:1;-moz-transform:translatey(0);}}@-o-keyframes fadeInDown{0%{opacity:0;-ms-transform:translatey(-20px);} 100%{opacity:1;-ms-transform:translatey(0);}}@keyframes fadeInDown{0%{opacity:0;transform:translatey(-20px);} 100%{opacity:1;transform:translatey(0);}}.fade-in-down{-webkit-animation-name:fadeInDown;-moz-animation-name:fadeInDown;-o-animation-name:fadeInDown;animation-name:fadeInDown;}
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translatex(-20px);} 100%{opacity:1;-webkit-transform:translatex(0);}}@-moz-keyframes fadeInRight{0%{opacity:0;-moz-transform:translatex(-20px);} 100%{opacity:1;-moz-transform:translatex(0);}}@-o-keyframes fadeInRight{0%{opacity:0;-o-transform:translatex(-20px);} 100%{opacity:1;-o-transform:translatex(0);}}@keyframes fadeInRight{0%{opacity:0;transform:translatex(-20px);} 100%{opacity:1;transform:translatex(0);}}.fade-in-right{-webkit-animation-name:fadeInRight;-moz-animation-name:fadeInRight;-o-animation-name:fadeInRight;animation-name:fadeInRight;}
@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translatex(20px);} 100%{opacity:1;-webkit-transform:translatex(0);}}@-moz-keyframes fadeInLeft{0%{opacity:0;-moz-transform:translatex(20px);} 100%{opacity:1;-moz-transform:translatex(0);}}@-o-keyframes fadeInLeft{0%{opacity:0;-o-transform:translatex(20px);} 100%{opacity:1;-o-transform:translatex(0);}}@keyframes fadeInLeft{0%{opacity:0;transform:translatex(20px);} 100%{opacity:1;transform:translatex(0);}}.fade-in-left{-webkit-animation-name:fadeInLeft;-moz-animation-name:fadeInLeft;-o-animation-name:fadeInLeft;animation-name:fadeInLeft;}
div#hopscotch-bubble{background-color:#ffffff;border:6px solid #000000;border:6px solid rgba(0, 0, 0, 0.5);color:#000;font-family:Helvetica,Arial;font-size:13px;position:absolute;z-index:999999;-moz-background-clip:padding;-webkit-background-clip:padding;background-clip:padding-box;}div#hopscotch-bubble.animate{-moz-transition-property:top, left;-moz-transition-duration:1s;-moz-transition-timing-function:ease-in-out;-ms-transition-property:top, left;-ms-transition-duration:1s;-ms-transition-timing-function:ease-in-out;-o-transition-property:top, left;-o-transition-duration:1s;-o-transition-timing-function:ease-in-out;-webkit-transition-property:top, left;-webkit-transition-duration:1s;-webkit-transition-timing-function:ease-in-out;transition-property:top, left;transition-duration:1s;transition-timing-function:ease-in-out;}
div#hopscotch-bubble.invisible{opacity:0;}
div#hopscotch-bubble.hide,div#hopscotch-bubble .hide,div#hopscotch-bubble .hide-all{display:none;}
div#hopscotch-bubble h3,div#hopscotch-bubble #hopscotch-bubble-number{font-size:18px;}
div#hopscotch-bubble h3{margin:0;padding:0;}
div#hopscotch-bubble #hopscotch-bubble-container{padding:15px;position:relative;-webkit-font-smoothing:antialiased;}div#hopscotch-bubble #hopscotch-bubble-container p{margin:10px 0;padding:0;}
div#hopscotch-bubble #hopscotch-bubble-content{margin:0 0 0 40px;}div#hopscotch-bubble #hopscotch-bubble-content h3{margin:0 15px 0 0;}
div#hopscotch-bubble #hopscotch-bubble-close{color:#000;background:transparent url(../img/sprite_li.png) -200px -100px no-repeat;display:block;margin:15px 10px 0 0;position:absolute;text-decoration:none;text-indent:-9999px;width:10px;height:10px;top:0;right:0;}div#hopscotch-bubble #hopscotch-bubble-close.hide,div#hopscotch-bubble #hopscotch-bubble-close.hide-all{display:none;}
div#hopscotch-bubble #hopscotch-bubble-number{background:transparent url(../img/sprite_li.png) 0 0 no-repeat;color:#fff;display:block;float:left;line-height:33px;margin:0 10px 0 0;text-align:center;width:30px;height:30px;}
div#hopscotch-bubble #hopscotch-bubble-arrow-container{position:absolute;width:40px;height:40px;}div#hopscotch-bubble #hopscotch-bubble-arrow-container .hopscotch-bubble-arrow,div#hopscotch-bubble #hopscotch-bubble-arrow-container .hopscotch-bubble-arrow-border{width:0;height:0;}
div#hopscotch-bubble #hopscotch-bubble-arrow-container.up{top:-26px;left:10px;}div#hopscotch-bubble #hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow{border-bottom:20px solid #ffffff;border-left:20px solid transparent;border-right:20px solid transparent;position:relative;top:-10px;}
div#hopscotch-bubble #hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow-border{border-bottom:20px solid #000000;border-bottom:20px solid rgba(0, 0, 0, 0.5);border-left:20px solid transparent;border-right:20px solid transparent;}
div#hopscotch-bubble #hopscotch-bubble-arrow-container.down{bottom:-46px;left:10px;}div#hopscotch-bubble #hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow{border-top:20px solid #ffffff;border-left:20px solid transparent;border-right:20px solid transparent;position:relative;top:-30px;}
div#hopscotch-bubble #hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow-border{border-top:20px solid #000000;border-top:20px solid rgba(0, 0, 0, 0.5);border-left:20px solid transparent;border-right:20px solid transparent;}
div#hopscotch-bubble #hopscotch-bubble-arrow-container.left{top:10px;left:-26px;}div#hopscotch-bubble #hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow{border-bottom:20px solid transparent;border-right:20px solid #ffffff;border-top:20px solid transparent;position:relative;left:9px;top:-40px;}
div#hopscotch-bubble #hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow-border{border-right:20px solid #000000;border-right:20px solid rgba(0, 0, 0, 0.5);border-bottom:20px solid transparent;border-top:20px solid transparent;}
div#hopscotch-bubble #hopscotch-bubble-arrow-container.right{top:10px;right:-46px;}div#hopscotch-bubble #hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow{border-bottom:20px solid transparent;border-left:20px solid #ffffff;border-top:20px solid transparent;position:relative;left:-9px;top:-40px;}
div#hopscotch-bubble #hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow-border{border-left:20px solid #000000;border-left:20px solid rgba(0, 0, 0, 0.5);border-bottom:20px solid transparent;border-top:20px solid transparent;}
div#hopscotch-bubble #hopscotch-actions{margin:10px 0 0;text-align:right;}
div#hopscotch-bubble input.hopscotch-nav-button{border-width:1px;border-style:solid;cursor:pointer;font-size:12px;line-height:1.35;margin:0;overflow:visible;padding:3px 10px 2px;*padding:2px 10px 1px;text-decoration:none !important;vertical-align:top;width:auto;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;*padding:3px 10px;}div#hopscotch-bubble input.hopscotch-nav-button.next{background:#FFCF0B;background:-moz-linear-gradient(top, #fff5bd 0, #fff5bd 1px, #ffe976 1px, #ffcf0b 100%);background:-o-linear-gradient(top, #fff5bd 0, #fff5bd 1px, #ffe976 1px, #ffcf0b 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff5bd), color-stop(5%, #fff5bd), color-stop(5%, #ffe976), color-stop(100%, #ffcf0b));background:linear-gradient(top, #fff5bd 0, #fff5bd 1px, #ffe976 1px, #ffcf0b 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#FFE976', endColorstr='#FFCF0B', GradientType=0);border-color:#e8b463;color:#333;font-weight:bold;margin:0 0 0 10px;overflow:visible;}div#hopscotch-bubble input.hopscotch-nav-button.next.hide-all{display:none;}
div#hopscotch-bubble input.hopscotch-nav-button.next:hover{background:#F6C408;background:-moz-linear-gradient(top, #faeeae 0, #faeeae 1px, #f5db59 1px, #f6c408 100%);background:-o-linear-gradient(top, #faeeae 0, #faeeae 1px, #f5db59 1px, #f6c408 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #faeeae), color-stop(5%, #faeeae), color-stop(5%, #f5db59), color-stop(100%, #f6c408));background:linear-gradient(top, #faeeae 0, #faeeae 1px, #f5db59 1px, #f6c408 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#F5DB59', endColorstr='#F6C408', GradientType=0);}
div#hopscotch-bubble input.hopscotch-nav-button.next:active{background:#F5DD61;background:-moz-linear-gradient(top, #f6c202 0, #f5dd61 100%);background:-o-linear-gradient(top, #f6c202 0, #f5dd61 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f6c202), color-stop(100%, #f5dd61));background:linear-gradient(top, #f6c202 0, #f5dd61 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#F6C202', endColorstr='#F5DD61', GradientType=0);}
div#hopscotch-bubble input.hopscotch-nav-button.prev{background:#CECECE;background:-moz-linear-gradient(top, #f2f2f2 0, #f2f2f2 1px, #e4e4e4 1px, #cecece 100%);background:-o-linear-gradient(top, #f2f2f2 0, #f2f2f2 1px, #e4e4e4 1px, #cecece 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f2f2f2), color-stop(5%, #f2f2f2), color-stop(5%, #e4e4e4), color-stop(100%, #cecece));background:linear-gradient(top, #f2f2f2 0, #f2f2f2 1px, #e4e4e4 1px, #cecece 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#E4E4E4', endColorstr='#CECECE', GradientType=0);border-color:#999;color:#666 !important;}div#hopscotch-bubble input.hopscotch-nav-button.prev:hover{background:#B7B7B7;background:-moz-linear-gradient(top, #e4e4e4 0, #e4e4e4 1px, #c8c8c8 1px, #b7b7b7 100%);background:-o-linear-gradient(top, #e4e4e4 0, #e4e4e4 1px, #c8c8c8 1px, #b7b7b7 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #e4e4e4), color-stop(5%, #e4e4e4), color-stop(5%, #c8c8c8), color-stop(100%, #b7b7b7));background:linear-gradient(top, #e4e4e4 0, #e4e4e4 1px, #c8c8c8 1px, #b7b7b7 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#C8C8C8', endColorstr='#B7B7B7', GradientType=0);}
div#hopscotch-bubble input.hopscotch-nav-button.prev:active{background:#C9C9C9;background:-moz-linear-gradient(top, #b6b6b6 0, #c9c9c9 100%);background:-o-linear-gradient(top, #b6b6b6 0, #c9c9c9 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #b6b6b6), color-stop(100%, #c9c9c9));background:linear-gradient(top, #b6b6b6 0, #c9c9c9 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#B6B6B6', endColorstr='#C9C9C9', GradientType=0);}