This repository has been archived by the owner on Feb 17, 2021. It is now read-only.
/
hopscotch.css
28 lines (28 loc) · 11.1 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
.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;}
.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}
@-moz-keyframes bounce-down{0%,20%,50%,80%,100%{-moz-transform:translatey(0);} 40%{-moz-transform:translatey(-30px);} 60%{-moz-transform:translatey(-15px);}}@-o-keyframes bounce-down{0%,20%,50%,80%,100%{-o-transform:translatey(0);} 40%{-o-transform:translatey(-30px);} 60%{-o-transform:translatey(-15px);}}@-webkit-keyframes bounce-down{0%,20%,50%,80%,100%{-webkit-transform:translatey(0);} 40%{-webkit-transform:translatey(-30px);} 60%{-webkit-transform:translatey(-15px);}}@keyframes bounce-down{0%,20%,50%,80%,100%{transform:translatey(0);} 40%{transform:translatey(-30px);} 60%{transform:translatey(-15px);}}@-moz-keyframes bounce-up{0%,20%,50%,80%,100%{-moz-transform:translatey(0);} 40%{-moz-transform:translatey(30px);} 60%{-moz-transform:translatey(15px);}}@-o-keyframes bounce-up{0%,20%,50%,80%,100%{-o-transform:translatey(0);} 40%{-o-transform:translatey(30px);} 60%{-o-transform:translatey(15px);}}@-webkit-keyframes bounce-up{0%,20%,50%,80%,100%{-webkit-transform:translatey(0);} 40%{-webkit-transform:translatey(30px);} 60%{-webkit-transform:translatey(15px);}}@keyframes bounce-up{0%,20%,50%,80%,100%{transform:translatey(0);} 40%{transform:translatey(30px);} 60%{transform:translatey(15px);}}@-moz-keyframes bounce-left{0%,20%,50%,80%,100%{-moz-transform:translatex(0);} 40%{-moz-transform:translatex(30px);} 60%{-moz-transform:translatex(15px);}}@-o-keyframes bounce-left{0%,20%,50%,80%,100%{-o-transform:translatex(0);} 40%{-o-transform:translatex(30px);} 60%{-o-transform:translatex(15px);}}@-webkit-keyframes bounce-left{0%,20%,50%,80%,100%{-webkit-transform:translatex(0);} 40%{-webkit-transform:translatex(30px);} 60%{-webkit-transform:translatex(15px);}}@keyframes bounce-left{0%,20%,50%,80%,100%{transform:translatex(0);} 40%{transform:translatex(30px);} 60%{transform:translatex(15px);}}@-moz-keyframes bounce-right{0%,20%,50%,80%,100%{-moz-transform:translatex(0);} 40%{-moz-transform:translatex(-30px);} 60%{-moz-transform:translatex(-15px);}}@-o-keyframes bounce-right{0%,20%,50%,80%,100%{-o-transform:translatex(0);} 40%{-o-transform:translatex(-30px);} 60%{-o-transform:translatex(-15px);}}@-webkit-keyframes bounce-right{0%,20%,50%,80%,100%{-webkit-transform:translatex(0);} 40%{-webkit-transform:translatex(-30px);} 60%{-webkit-transform:translatex(-15px);}}@keyframes bounce-right{0%,20%,50%,80%,100%{transform:translatex(0);} 40%{transform:translatex(-30px);} 60%{transform:translatex(-15px);}}.bounce-down{-webkit-animation-name:bounce-down;-moz-animation-name:bounce-down;-o-animation-name:bounce-down;animation-name:bounce-down;}
.bounce-up{-webkit-animation-name:bounce-up;-moz-animation-name:bounce-up;-o-animation-name:bounce-up;animation-name:bounce-up;}
.bounce-left{-webkit-animation-name:bounce-left;-moz-animation-name:bounce-left;-o-animation-name:bounce-left;animation-name:bounce-left;}
.bounce-right{-webkit-animation-name:bounce-right;-moz-animation-name:bounce-right;-o-animation-name:bounce-right;animation-name:bounce-right;}
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:0.5s;-moz-transition-timing-function:ease-in-out;-ms-transition-property:'top, left';-ms-transition-duration:0.5s;-ms-transition-timing-function:ease-in-out;-o-transition-property:'top, left';-o-transition-duration:0.5s;-o-transition-timing-function:ease-in-out;-webkit-transition-property:'top, left';-webkit-transition-duration:0.5s;-webkit-transition-timing-function:ease-in-out;transition-property:'top, left';transition-duration:0.5s;transition-timing-function:ease-in-out;}
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:12px 0;padding:0;}
div#hopscotch-bubble #hopscotch-bubble-container{padding:15px;position:relative;-webkit-font-smoothing:antialiased;}
div#hopscotch-bubble #hopscotch-bubble-close{color:#fff;display:block;padding:10px;position:absolute;top:0;right:0;}
div#hopscotch-bubble #hopscotch-bubble-number{float:left;padding:12px;}
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:-11.516px;}
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:-28.484px;}
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:8.484px;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:-11.516px;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{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);}