macoslinuxwindowsinboxwhatsappicloudtweetdeckhipchattelegramhangoutsslackgmailskypefacebook-workplaceoutlookemailmicrosoft-teamsdiscordmessengercustom-services
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
149 KiB
1 line
149 KiB
7 years ago
|
@import url(../resources/fonts/font-awesome/css/font-awesome.min.css);@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,700,600);@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,700italic,700,500italic,500,400italic);body{overflow:hidden}.component{position:absolute;z-index:1;width:200px;height:200px;margin:-100px 0 0 -100px;top:50%;left:50%}.button{font-weight:bold;position:absolute;bottom:4px;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;padding:0;text-align:center;color:#00a7e7;border:0;background:0;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-tap-highlight-color:rgba(0,0,0,0)}.button:hover,.button:focus{outline:0;color:#048abd}.button--listen{pointer-events:none}.button--close{z-index:10;top:0;right:0;left:auto;width:40px;height:40px;padding:10px;color:#fff}.button--close:hover,.button--close:focus{color:#ddd}.button--hidden{pointer-events:none;opacity:0}.button__content{position:absolute;opacity:0;-webkit-transition:-webkit-transform .4s,opacity .4s;transition:transform .4s,opacity .4s}.button__content--listen{font-size:1.75em;line-height:64px;bottom:0;left:50%;width:60px;height:60px;margin:0 0 0 -30px;border-radius:50%;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0);-webkit-transition-timing-function:cubic-bezier(0.8,0,0.2,1);transition-timing-function:cubic-bezier(0.8,0,0.2,1)}.button__content--listen::before,.button__content--listen::after{content:'';position:absolute;left:0;width:100%;height:100%;pointer-events:none;opacity:0;border:1px solid rgba(255,255,255,0.2);border-radius:50%}.button--animate .button__content--listen::before,.button--animate .button__content--listen::after{-webkit-animation:anim-ripple 1.2s ease-out infinite forwards;animation:anim-ripple 1.2s ease-out infinite forwards}.button--animate .button__content--listen::after{-webkit-animation-delay:.6s;animation-delay:.6s}@-webkit-keyframes anim-ripple{0%{opacity:0;-webkit-transform:scale3d(3,3,1);transform:scale3d(3,3,1)}50%{opacity:1}100%{opacity:0;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes anim-ripple{0%{opacity:0;-webkit-transform:scale3d(3,3,1);transform:scale3d(3,3,1)}50%{opacity:1}100%{opacity:0;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.notes{position:absolute;z-index:-1;bottom:0;left:50%;width:200px;height:100px;margin:0 0 0 -100px}.note{font-size:2.8em;position:absolute;left:50%;width:1em;margin:0 0 0 -0.5em;opacity:0;color:rgba(255,255,255,0.75)}.note:nth-child(odd){color:rgba(0,0,0,0.1)}.note:nth-child(4n){font-size:2em}.note:nth-child(6n){color:rgba(255,255,255,0.3)}@font-face{font-family:'icomoon';src:url("../resources/fonts/icomoon/icomoon.eot?4djz1y");src:url("../resources/fonts/icomoon/icomoon.eot?4djz1y#iefix") format("embedded-opentype"),url("../resources/fonts/icomoon/icomoon.ttf?4djz1y") format("truetype"),url("../resources/fonts/icomoon/icomoon.woff?4djz1y") format("woff"),url("../resources/fonts/icomoon/icomoon.svg?4djz1y#icomoon") format("svg");font-weight:normal;font-style:normal}.icon{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon--microphone:before{content:"\ea95"}.icon--cross:before{content:"\e90c"}.icon--note1:before{content:"\ea83"}.icon--note2:before{content:"\eaad"}.icon--note3:before{content:"\eac5"}.icon--note4:before{content:"\ea93"}.icon--note5:before{content:"\ea95"}.icon--note6:before{content:"\ea96"}body{margin:0;background-color:#2e658e}@-webkit-keyframes uil-ring-anim{0%{-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes uil-ring-anim{0%{-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0
|