diff --git a/.gitignore b/.gitignore index 57f7179a..ed1c2a11 100644 --- a/.gitignore +++ b/.gitignore @@ -15,5 +15,6 @@ npm-debug.log # Compiled site /public/ -# Custom VSC workspace -*.code-workspace \ No newline at end of file +# Ignore Visual Studio Code files +*.code-workspace +.vscode/launch.json diff --git a/package-lock.json b/package-lock.json index a440208e..45f9c679 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10961,6 +10961,11 @@ } } }, + "sweetalert2": { + "version": "9.7.1", + "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-9.7.1.tgz", + "integrity": "sha512-ytBEyqRmZQsEFuPsYcuEXpruj9AgT32ELEBWGnioflsqbxHMMM8/Ghm1+hi4hsZ1PU7cp9TFFWe06WveGfwWKw==" + }, "table": { "version": "5.4.6", "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz", @@ -11773,6 +11778,14 @@ "loader-utils": "^1.0.2" } }, + "vue-sweetalert2": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/vue-sweetalert2/-/vue-sweetalert2-3.0.1.tgz", + "integrity": "sha512-njjJeqvwX/lQSVRcteafD/0VV5C66RT5awbZELfet93o71+HnYrQY4n3eU8DB8WYaSBvCKtgaoEjlk3lqHYM4w==", + "requires": { + "sweetalert2": "9.x" + } + }, "vue-template-compiler": { "version": "2.6.11", "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz", diff --git a/package.json b/package.json index 8ce94cf6..3284ac06 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "iso-639-1": "^2.1.0", "lodash.groupby": "^4.6.0", "lodash.sortby": "^4.7.0", - "material-design-icons": "^3.0.1" + "material-design-icons": "^3.0.1", + "vue-sweetalert2": "^3.0.1" } } diff --git a/src/.vuepress/components/DownloadButtons.vue b/src/.vuepress/components/DownloadButtons.vue index 1c0ab2ce..5294afe7 100644 --- a/src/.vuepress/components/DownloadButtons.vue +++ b/src/.vuepress/components/DownloadButtons.vue @@ -14,8 +14,8 @@
Stable release * - font-family 'Open Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif + font-family $buttonFontFamily ul margin 0.625em 0 0 @@ -62,8 +62,8 @@ a.download-link text-decoration none .download-button align-items center - background-color #2e84bf - border-radius 0.3125em + background-color $accentColor + border-radius $buttonBorderRadius cursor pointer display flex height 3.75em @@ -71,11 +71,11 @@ a.download-link padding 0 1em width 11.25em &.stable - background-color #2e84bf + background-color $accentColor &:hover filter brightness(110%) &.dev - background-color #476582 + background-color $accentColorSecondary &:hover filter brightness(110%) .download-area @@ -87,15 +87,15 @@ a.download-link color #ffffff font-size 0.875em max-width 2em - .download-get_app - margin-left 0.188em - margin-right 0.25em + .download-cloud_download + margin-left 0.2em + margin-right 0.5em .download-bug_report margin-right 0.25em .download-text-stable margin-right 0.375em .download-text-dev - margin-right 0.063em + margin-right 0.05em - diff --git a/src/.vuepress/enhanceApp.js b/src/.vuepress/enhanceApp.js index 60788608..ad8e50ec 100644 --- a/src/.vuepress/enhanceApp.js +++ b/src/.vuepress/enhanceApp.js @@ -1,6 +1,9 @@ import './styles/fonts.styl' +import './styles/animations.styl' +import 'sweetalert2/dist/sweetalert2.min.css'; -import { VueAgile } from 'vue-agile' +import { VueAgile } from 'vue-agile'; +import VueSweetalert2 from 'vue-sweetalert2'; export default ({ Vue, // the version of Vue being used in the VuePress app @@ -9,5 +12,6 @@ export default ({ siteData // site metadata }) => { // eslint-disable-next-line vue/match-component-file-name - Vue.component('Agile', VueAgile) + Vue.component('Agile', VueAgile); + Vue.use(VueSweetalert2); }; diff --git a/src/.vuepress/public/assets/media/catalogues.png b/src/.vuepress/public/assets/media/catalogues.png new file mode 100644 index 00000000..21bab9d7 Binary files /dev/null and b/src/.vuepress/public/assets/media/catalogues.png differ diff --git a/src/.vuepress/public/assets/media/manga.png b/src/.vuepress/public/assets/media/manga.png new file mode 100644 index 00000000..78b4f076 Binary files /dev/null and b/src/.vuepress/public/assets/media/manga.png differ diff --git a/src/.vuepress/public/assets/media/my-library.png b/src/.vuepress/public/assets/media/my-library.png new file mode 100644 index 00000000..5e0b378a Binary files /dev/null and b/src/.vuepress/public/assets/media/my-library.png differ diff --git a/src/.vuepress/styles/animations.styl b/src/.vuepress/styles/animations.styl new file mode 100644 index 00000000..21efd727 --- /dev/null +++ b/src/.vuepress/styles/animations.styl @@ -0,0 +1,2608 @@ +@charset 'UTF-8' +/* + * animate.css -https://daneden.github.io/animate.css/ + * Version - 3.7.2 + * Licensed under the MIT license - http://opensource.org/licenses/MIT + * + * Copyright (c) 2019 Daniel Eden + */ +@keyframes bounce + from + 20% + 53% + 80% + to + -webkit-animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + 40% + 43% + -webkit-animation-timing-function cubic-bezier(0.755, 0.05, 0.855, 0.06) + animation-timing-function cubic-bezier(0.755, 0.05, 0.855, 0.06) + -webkit-transform translate3d(0, -30px, 0) + transform translate3d(0, -30px, 0) + 70% + -webkit-animation-timing-function cubic-bezier(0.755, 0.05, 0.855, 0.06) + animation-timing-function cubic-bezier(0.755, 0.05, 0.855, 0.06) + -webkit-transform translate3d(0, -15px, 0) + transform translate3d(0, -15px, 0) + 90% + -webkit-transform translate3d(0, -4px, 0) + transform translate3d(0, -4px, 0) + +@keyframes bounce + from + 20% + 53% + 80% + to + -webkit-animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + 40% + 43% + -webkit-animation-timing-function cubic-bezier(0.755, 0.05, 0.855, 0.06) + animation-timing-function cubic-bezier(0.755, 0.05, 0.855, 0.06) + -webkit-transform translate3d(0, -30px, 0) + transform translate3d(0, -30px, 0) + 70% + -webkit-animation-timing-function cubic-bezier(0.755, 0.05, 0.855, 0.06) + animation-timing-function cubic-bezier(0.755, 0.05, 0.855, 0.06) + -webkit-transform translate3d(0, -15px, 0) + transform translate3d(0, -15px, 0) + 90% + -webkit-transform translate3d(0, -4px, 0) + transform translate3d(0, -4px, 0) + +.bounce + -webkit-animation-name bounce + animation-name bounce + -webkit-transform-origin center bottom + transform-origin center bottom + +@keyframes flash + from + 50% + to + opacity 1 + 25% + 75% + opacity 0 + +@keyframes flash + from + 50% + to + opacity 1 + 25% + 75% + opacity 0 + +.flash + -webkit-animation-name flash + animation-name flash + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ +@keyframes pulse + from + -webkit-transform scale3d(1, 1, 1) + transform scale3d(1, 1, 1) + 50% + -webkit-transform scale3d(1.05, 1.05, 1.05) + transform scale3d(1.05, 1.05, 1.05) + to + -webkit-transform scale3d(1, 1, 1) + transform scale3d(1, 1, 1) + +@keyframes pulse + from + -webkit-transform scale3d(1, 1, 1) + transform scale3d(1, 1, 1) + 50% + -webkit-transform scale3d(1.05, 1.05, 1.05) + transform scale3d(1.05, 1.05, 1.05) + to + -webkit-transform scale3d(1, 1, 1) + transform scale3d(1, 1, 1) + +.pulse + -webkit-animation-name pulse + animation-name pulse + +@keyframes rubberBand + from + -webkit-transform scale3d(1, 1, 1) + transform scale3d(1, 1, 1) + 30% + -webkit-transform scale3d(1.25, 0.75, 1) + transform scale3d(1.25, 0.75, 1) + 40% + -webkit-transform scale3d(0.75, 1.25, 1) + transform scale3d(0.75, 1.25, 1) + 50% + -webkit-transform scale3d(1.15, 0.85, 1) + transform scale3d(1.15, 0.85, 1) + 65% + -webkit-transform scale3d(0.95, 1.05, 1) + transform scale3d(0.95, 1.05, 1) + 75% + -webkit-transform scale3d(1.05, 0.95, 1) + transform scale3d(1.05, 0.95, 1) + to + -webkit-transform scale3d(1, 1, 1) + transform scale3d(1, 1, 1) + +@keyframes rubberBand + from + -webkit-transform scale3d(1, 1, 1) + transform scale3d(1, 1, 1) + 30% + -webkit-transform scale3d(1.25, 0.75, 1) + transform scale3d(1.25, 0.75, 1) + 40% + -webkit-transform scale3d(0.75, 1.25, 1) + transform scale3d(0.75, 1.25, 1) + 50% + -webkit-transform scale3d(1.15, 0.85, 1) + transform scale3d(1.15, 0.85, 1) + 65% + -webkit-transform scale3d(0.95, 1.05, 1) + transform scale3d(0.95, 1.05, 1) + 75% + -webkit-transform scale3d(1.05, 0.95, 1) + transform scale3d(1.05, 0.95, 1) + to + -webkit-transform scale3d(1, 1, 1) + transform scale3d(1, 1, 1) + +.rubberBand + -webkit-animation-name rubberBand + animation-name rubberBand + +@keyframes shake + from + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + 10% + 30% + 50% + 70% + 90% + -webkit-transform translate3d(-10px, 0, 0) + transform translate3d(-10px, 0, 0) + 20% + 40% + 60% + 80% + -webkit-transform translate3d(10px, 0, 0) + transform translate3d(10px, 0, 0) + +@keyframes shake + from + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + 10% + 30% + 50% + 70% + 90% + -webkit-transform translate3d(-10px, 0, 0) + transform translate3d(-10px, 0, 0) + 20% + 40% + 60% + 80% + -webkit-transform translate3d(10px, 0, 0) + transform translate3d(10px, 0, 0) + +.shake + -webkit-animation-name shake + animation-name shake + +@keyframes headShake + 0% + -webkit-transform translateX(0) + transform translateX(0) + 6.5% + -webkit-transform translateX(-6px) rotateY(-9deg) + transform translateX(-6px) rotateY(-9deg) + 18.5% + -webkit-transform translateX(5px) rotateY(7deg) + transform translateX(5px) rotateY(7deg) + 31.5% + -webkit-transform translateX(-3px) rotateY(-5deg) + transform translateX(-3px) rotateY(-5deg) + 43.5% + -webkit-transform translateX(2px) rotateY(3deg) + transform translateX(2px) rotateY(3deg) + 50% + -webkit-transform translateX(0) + transform translateX(0) + +@keyframes headShake + 0% + -webkit-transform translateX(0) + transform translateX(0) + 6.5% + -webkit-transform translateX(-6px) rotateY(-9deg) + transform translateX(-6px) rotateY(-9deg) + 18.5% + -webkit-transform translateX(5px) rotateY(7deg) + transform translateX(5px) rotateY(7deg) + 31.5% + -webkit-transform translateX(-3px) rotateY(-5deg) + transform translateX(-3px) rotateY(-5deg) + 43.5% + -webkit-transform translateX(2px) rotateY(3deg) + transform translateX(2px) rotateY(3deg) + 50% + -webkit-transform translateX(0) + transform translateX(0) + +.headShake + -webkit-animation-timing-function ease-in-out + animation-timing-function ease-in-out + -webkit-animation-name headShake + animation-name headShake + +@keyframes swing + 20% + -webkit-transform rotate3d(0, 0, 1, 15deg) + transform rotate3d(0, 0, 1, 15deg) + 40% + -webkit-transform rotate3d(0, 0, 1, -10deg) + transform rotate3d(0, 0, 1, -10deg) + 60% + -webkit-transform rotate3d(0, 0, 1, 5deg) + transform rotate3d(0, 0, 1, 5deg) + 80% + -webkit-transform rotate3d(0, 0, 1, -5deg) + transform rotate3d(0, 0, 1, -5deg) + to + -webkit-transform rotate3d(0, 0, 1, 0) + transform rotate3d(0, 0, 1, 0) + +@keyframes swing + 20% + -webkit-transform rotate3d(0, 0, 1, 15deg) + transform rotate3d(0, 0, 1, 15deg) + 40% + -webkit-transform rotate3d(0, 0, 1, -10deg) + transform rotate3d(0, 0, 1, -10deg) + 60% + -webkit-transform rotate3d(0, 0, 1, 5deg) + transform rotate3d(0, 0, 1, 5deg) + 80% + -webkit-transform rotate3d(0, 0, 1, -5deg) + transform rotate3d(0, 0, 1, -5deg) + to + -webkit-transform rotate3d(0, 0, 1, 0) + transform rotate3d(0, 0, 1, 0) + +.swing + -webkit-transform-origin top center + transform-origin top center + -webkit-animation-name swing + animation-name swing + +@keyframes tada + from + -webkit-transform scale3d(1, 1, 1) + transform scale3d(1, 1, 1) + 10% + 20% + -webkit-transform scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg) + transform scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg) + 30% + 50% + 70% + 90% + -webkit-transform scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) + transform scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) + 40% + 60% + 80% + -webkit-transform scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) + transform scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) + to + -webkit-transform scale3d(1, 1, 1) + transform scale3d(1, 1, 1) + +@keyframes tada + from + -webkit-transform scale3d(1, 1, 1) + transform scale3d(1, 1, 1) + 10% + 20% + -webkit-transform scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg) + transform scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg) + 30% + 50% + 70% + 90% + -webkit-transform scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) + transform scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) + 40% + 60% + 80% + -webkit-transform scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) + transform scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) + to + -webkit-transform scale3d(1, 1, 1) + transform scale3d(1, 1, 1) + +.tada + -webkit-animation-name tada + animation-name tada + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ +@keyframes wobble + from + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + 15% + -webkit-transform translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) + transform translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) + 30% + -webkit-transform translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) + transform translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) + 45% + -webkit-transform translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) + transform translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) + 60% + -webkit-transform translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) + transform translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) + 75% + -webkit-transform translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) + transform translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +@keyframes wobble + from + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + 15% + -webkit-transform translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) + transform translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) + 30% + -webkit-transform translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) + transform translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) + 45% + -webkit-transform translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) + transform translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) + 60% + -webkit-transform translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) + transform translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) + 75% + -webkit-transform translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) + transform translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +.wobble + -webkit-animation-name wobble + animation-name wobble + +@keyframes jello + from + 11.1% + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + 22.2% + -webkit-transform skewX(-12.5deg) skewY(-12.5deg) + transform skewX(-12.5deg) skewY(-12.5deg) + 33.3% + -webkit-transform skewX(6.25deg) skewY(6.25deg) + transform skewX(6.25deg) skewY(6.25deg) + 44.4% + -webkit-transform skewX(-3.125deg) skewY(-3.125deg) + transform skewX(-3.125deg) skewY(-3.125deg) + 55.5% + -webkit-transform skewX(1.5625deg) skewY(1.5625deg) + transform skewX(1.5625deg) skewY(1.5625deg) + 66.6% + -webkit-transform skewX(-0.78125deg) skewY(-0.78125deg) + transform skewX(-0.78125deg) skewY(-0.78125deg) + 77.7% + -webkit-transform skewX(0.390625deg) skewY(0.390625deg) + transform skewX(0.390625deg) skewY(0.390625deg) + 88.8% + -webkit-transform skewX(-0.1953125deg) skewY(-0.1953125deg) + transform skewX(-0.1953125deg) skewY(-0.1953125deg) + +@keyframes jello + from + 11.1% + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + 22.2% + -webkit-transform skewX(-12.5deg) skewY(-12.5deg) + transform skewX(-12.5deg) skewY(-12.5deg) + 33.3% + -webkit-transform skewX(6.25deg) skewY(6.25deg) + transform skewX(6.25deg) skewY(6.25deg) + 44.4% + -webkit-transform skewX(-3.125deg) skewY(-3.125deg) + transform skewX(-3.125deg) skewY(-3.125deg) + 55.5% + -webkit-transform skewX(1.5625deg) skewY(1.5625deg) + transform skewX(1.5625deg) skewY(1.5625deg) + 66.6% + -webkit-transform skewX(-0.78125deg) skewY(-0.78125deg) + transform skewX(-0.78125deg) skewY(-0.78125deg) + 77.7% + -webkit-transform skewX(0.390625deg) skewY(0.390625deg) + transform skewX(0.390625deg) skewY(0.390625deg) + 88.8% + -webkit-transform skewX(-0.1953125deg) skewY(-0.1953125deg) + transform skewX(-0.1953125deg) skewY(-0.1953125deg) + +.jello + -webkit-animation-name jello + animation-name jello + -webkit-transform-origin center + transform-origin center + +@keyframes heartBeat + 0% + -webkit-transform scale(1) + transform scale(1) + 14% + -webkit-transform scale(1.3) + transform scale(1.3) + 28% + -webkit-transform scale(1) + transform scale(1) + 42% + -webkit-transform scale(1.3) + transform scale(1.3) + 70% + -webkit-transform scale(1) + transform scale(1) + +@keyframes heartBeat + 0% + -webkit-transform scale(1) + transform scale(1) + 14% + -webkit-transform scale(1.3) + transform scale(1.3) + 28% + -webkit-transform scale(1) + transform scale(1) + 42% + -webkit-transform scale(1.3) + transform scale(1.3) + 70% + -webkit-transform scale(1) + transform scale(1) + +.heartBeat + -webkit-animation-name heartBeat + animation-name heartBeat + -webkit-animation-duration 1.3s + animation-duration 1.3s + -webkit-animation-timing-function ease-in-out + animation-timing-function ease-in-out + +@keyframes bounceIn + from + 20% + 40% + 60% + 80% + to + -webkit-animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + 0% + opacity 0 + -webkit-transform scale3d(0.3, 0.3, 0.3) + transform scale3d(0.3, 0.3, 0.3) + 20% + -webkit-transform scale3d(1.1, 1.1, 1.1) + transform scale3d(1.1, 1.1, 1.1) + 40% + -webkit-transform scale3d(0.9, 0.9, 0.9) + transform scale3d(0.9, 0.9, 0.9) + 60% + opacity 1 + -webkit-transform scale3d(1.03, 1.03, 1.03) + transform scale3d(1.03, 1.03, 1.03) + 80% + -webkit-transform scale3d(0.97, 0.97, 0.97) + transform scale3d(0.97, 0.97, 0.97) + to + opacity 1 + -webkit-transform scale3d(1, 1, 1) + transform scale3d(1, 1, 1) + +@keyframes bounceIn + from + 20% + 40% + 60% + 80% + to + -webkit-animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + 0% + opacity 0 + -webkit-transform scale3d(0.3, 0.3, 0.3) + transform scale3d(0.3, 0.3, 0.3) + 20% + -webkit-transform scale3d(1.1, 1.1, 1.1) + transform scale3d(1.1, 1.1, 1.1) + 40% + -webkit-transform scale3d(0.9, 0.9, 0.9) + transform scale3d(0.9, 0.9, 0.9) + 60% + opacity 1 + -webkit-transform scale3d(1.03, 1.03, 1.03) + transform scale3d(1.03, 1.03, 1.03) + 80% + -webkit-transform scale3d(0.97, 0.97, 0.97) + transform scale3d(0.97, 0.97, 0.97) + to + opacity 1 + -webkit-transform scale3d(1, 1, 1) + transform scale3d(1, 1, 1) + +.bounceIn + -webkit-animation-duration 0.75s + animation-duration 0.75s + -webkit-animation-name bounceIn + animation-name bounceIn + +@keyframes bounceInDown + from + 60% + 75% + 90% + to + -webkit-animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + 0% + opacity 0 + -webkit-transform translate3d(0, -3000px, 0) + transform translate3d(0, -3000px, 0) + 60% + opacity 1 + -webkit-transform translate3d(0, 25px, 0) + transform translate3d(0, 25px, 0) + 75% + -webkit-transform translate3d(0, -10px, 0) + transform translate3d(0, -10px, 0) + 90% + -webkit-transform translate3d(0, 5px, 0) + transform translate3d(0, 5px, 0) + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +@keyframes bounceInDown + from + 60% + 75% + 90% + to + -webkit-animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + 0% + opacity 0 + -webkit-transform translate3d(0, -3000px, 0) + transform translate3d(0, -3000px, 0) + 60% + opacity 1 + -webkit-transform translate3d(0, 25px, 0) + transform translate3d(0, 25px, 0) + 75% + -webkit-transform translate3d(0, -10px, 0) + transform translate3d(0, -10px, 0) + 90% + -webkit-transform translate3d(0, 5px, 0) + transform translate3d(0, 5px, 0) + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +.bounceInDown + -webkit-animation-name bounceInDown + animation-name bounceInDown + +@keyframes bounceInLeft + from + 60% + 75% + 90% + to + -webkit-animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + 0% + opacity 0 + -webkit-transform translate3d(-3000px, 0, 0) + transform translate3d(-3000px, 0, 0) + 60% + opacity 1 + -webkit-transform translate3d(25px, 0, 0) + transform translate3d(25px, 0, 0) + 75% + -webkit-transform translate3d(-10px, 0, 0) + transform translate3d(-10px, 0, 0) + 90% + -webkit-transform translate3d(5px, 0, 0) + transform translate3d(5px, 0, 0) + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +@keyframes bounceInLeft + from + 60% + 75% + 90% + to + -webkit-animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + 0% + opacity 0 + -webkit-transform translate3d(-3000px, 0, 0) + transform translate3d(-3000px, 0, 0) + 60% + opacity 1 + -webkit-transform translate3d(25px, 0, 0) + transform translate3d(25px, 0, 0) + 75% + -webkit-transform translate3d(-10px, 0, 0) + transform translate3d(-10px, 0, 0) + 90% + -webkit-transform translate3d(5px, 0, 0) + transform translate3d(5px, 0, 0) + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +.bounceInLeft + -webkit-animation-name bounceInLeft + animation-name bounceInLeft + +@keyframes bounceInRight + from + 60% + 75% + 90% + to + -webkit-animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + from + opacity 0 + -webkit-transform translate3d(3000px, 0, 0) + transform translate3d(3000px, 0, 0) + 60% + opacity 1 + -webkit-transform translate3d(-25px, 0, 0) + transform translate3d(-25px, 0, 0) + 75% + -webkit-transform translate3d(10px, 0, 0) + transform translate3d(10px, 0, 0) + 90% + -webkit-transform translate3d(-5px, 0, 0) + transform translate3d(-5px, 0, 0) + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +@keyframes bounceInRight + from + 60% + 75% + 90% + to + -webkit-animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + from + opacity 0 + -webkit-transform translate3d(3000px, 0, 0) + transform translate3d(3000px, 0, 0) + 60% + opacity 1 + -webkit-transform translate3d(-25px, 0, 0) + transform translate3d(-25px, 0, 0) + 75% + -webkit-transform translate3d(10px, 0, 0) + transform translate3d(10px, 0, 0) + 90% + -webkit-transform translate3d(-5px, 0, 0) + transform translate3d(-5px, 0, 0) + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +.bounceInRight + -webkit-animation-name bounceInRight + animation-name bounceInRight + +@keyframes bounceInUp + from + 60% + 75% + 90% + to + -webkit-animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + from + opacity 0 + -webkit-transform translate3d(0, 3000px, 0) + transform translate3d(0, 3000px, 0) + 60% + opacity 1 + -webkit-transform translate3d(0, -20px, 0) + transform translate3d(0, -20px, 0) + 75% + -webkit-transform translate3d(0, 10px, 0) + transform translate3d(0, 10px, 0) + 90% + -webkit-transform translate3d(0, -5px, 0) + transform translate3d(0, -5px, 0) + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +@keyframes bounceInUp + from + 60% + 75% + 90% + to + -webkit-animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + animation-timing-function cubic-bezier(0.215, 0.61, 0.355, 1) + from + opacity 0 + -webkit-transform translate3d(0, 3000px, 0) + transform translate3d(0, 3000px, 0) + 60% + opacity 1 + -webkit-transform translate3d(0, -20px, 0) + transform translate3d(0, -20px, 0) + 75% + -webkit-transform translate3d(0, 10px, 0) + transform translate3d(0, 10px, 0) + 90% + -webkit-transform translate3d(0, -5px, 0) + transform translate3d(0, -5px, 0) + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +.bounceInUp + -webkit-animation-name bounceInUp + animation-name bounceInUp + +@keyframes bounceOut + 20% + -webkit-transform scale3d(0.9, 0.9, 0.9) + transform scale3d(0.9, 0.9, 0.9) + 50% + 55% + opacity 1 + -webkit-transform scale3d(1.1, 1.1, 1.1) + transform scale3d(1.1, 1.1, 1.1) + to + opacity 0 + -webkit-transform scale3d(0.3, 0.3, 0.3) + transform scale3d(0.3, 0.3, 0.3) + +@keyframes bounceOut + 20% + -webkit-transform scale3d(0.9, 0.9, 0.9) + transform scale3d(0.9, 0.9, 0.9) + 50% + 55% + opacity 1 + -webkit-transform scale3d(1.1, 1.1, 1.1) + transform scale3d(1.1, 1.1, 1.1) + to + opacity 0 + -webkit-transform scale3d(0.3, 0.3, 0.3) + transform scale3d(0.3, 0.3, 0.3) + +.bounceOut + -webkit-animation-duration 0.75s + animation-duration 0.75s + -webkit-animation-name bounceOut + animation-name bounceOut + +@keyframes bounceOutDown + 20% + -webkit-transform translate3d(0, 10px, 0) + transform translate3d(0, 10px, 0) + 40% + 45% + opacity 1 + -webkit-transform translate3d(0, -20px, 0) + transform translate3d(0, -20px, 0) + to + opacity 0 + -webkit-transform translate3d(0, 2000px, 0) + transform translate3d(0, 2000px, 0) + +@keyframes bounceOutDown + 20% + -webkit-transform translate3d(0, 10px, 0) + transform translate3d(0, 10px, 0) + 40% + 45% + opacity 1 + -webkit-transform translate3d(0, -20px, 0) + transform translate3d(0, -20px, 0) + to + opacity 0 + -webkit-transform translate3d(0, 2000px, 0) + transform translate3d(0, 2000px, 0) + +.bounceOutDown + -webkit-animation-name bounceOutDown + animation-name bounceOutDown + +@keyframes bounceOutLeft + 20% + opacity 1 + -webkit-transform translate3d(20px, 0, 0) + transform translate3d(20px, 0, 0) + to + opacity 0 + -webkit-transform translate3d(-2000px, 0, 0) + transform translate3d(-2000px, 0, 0) + +@keyframes bounceOutLeft + 20% + opacity 1 + -webkit-transform translate3d(20px, 0, 0) + transform translate3d(20px, 0, 0) + to + opacity 0 + -webkit-transform translate3d(-2000px, 0, 0) + transform translate3d(-2000px, 0, 0) + +.bounceOutLeft + -webkit-animation-name bounceOutLeft + animation-name bounceOutLeft + +@keyframes bounceOutRight + 20% + opacity 1 + -webkit-transform translate3d(-20px, 0, 0) + transform translate3d(-20px, 0, 0) + to + opacity 0 + -webkit-transform translate3d(2000px, 0, 0) + transform translate3d(2000px, 0, 0) + +@keyframes bounceOutRight + 20% + opacity 1 + -webkit-transform translate3d(-20px, 0, 0) + transform translate3d(-20px, 0, 0) + to + opacity 0 + -webkit-transform translate3d(2000px, 0, 0) + transform translate3d(2000px, 0, 0) + +.bounceOutRight + -webkit-animation-name bounceOutRight + animation-name bounceOutRight + +@keyframes bounceOutUp + 20% + -webkit-transform translate3d(0, -10px, 0) + transform translate3d(0, -10px, 0) + 40% + 45% + opacity 1 + -webkit-transform translate3d(0, 20px, 0) + transform translate3d(0, 20px, 0) + to + opacity 0 + -webkit-transform translate3d(0, -2000px, 0) + transform translate3d(0, -2000px, 0) + +@keyframes bounceOutUp + 20% + -webkit-transform translate3d(0, -10px, 0) + transform translate3d(0, -10px, 0) + 40% + 45% + opacity 1 + -webkit-transform translate3d(0, 20px, 0) + transform translate3d(0, 20px, 0) + to + opacity 0 + -webkit-transform translate3d(0, -2000px, 0) + transform translate3d(0, -2000px, 0) + +.bounceOutUp + -webkit-animation-name bounceOutUp + animation-name bounceOutUp + +@keyframes fadeIn + from + opacity 0 + to + opacity 1 + +@keyframes fadeIn + from + opacity 0 + to + opacity 1 + +.fadeIn + -webkit-animation-name fadeIn + animation-name fadeIn + +@keyframes fadeInDown + from + opacity 0 + -webkit-transform translate3d(0, -100%, 0) + transform translate3d(0, -100%, 0) + to + opacity 1 + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +@keyframes fadeInDown + from + opacity 0 + -webkit-transform translate3d(0, -100%, 0) + transform translate3d(0, -100%, 0) + to + opacity 1 + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +.fadeInDown + -webkit-animation-name fadeInDown + animation-name fadeInDown + +@keyframes fadeInDownBig + from + opacity 0 + -webkit-transform translate3d(0, -2000px, 0) + transform translate3d(0, -2000px, 0) + to + opacity 1 + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +@keyframes fadeInDownBig + from + opacity 0 + -webkit-transform translate3d(0, -2000px, 0) + transform translate3d(0, -2000px, 0) + to + opacity 1 + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +.fadeInDownBig + -webkit-animation-name fadeInDownBig + animation-name fadeInDownBig + +@keyframes fadeInLeft + from + opacity 0 + -webkit-transform translate3d(-100%, 0, 0) + transform translate3d(-100%, 0, 0) + to + opacity 1 + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +@keyframes fadeInLeft + from + opacity 0 + -webkit-transform translate3d(-100%, 0, 0) + transform translate3d(-100%, 0, 0) + to + opacity 1 + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +.fadeInLeft + -webkit-animation-name fadeInLeft + animation-name fadeInLeft + +@keyframes fadeInLeftBig + from + opacity 0 + -webkit-transform translate3d(-2000px, 0, 0) + transform translate3d(-2000px, 0, 0) + to + opacity 1 + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +@keyframes fadeInLeftBig + from + opacity 0 + -webkit-transform translate3d(-2000px, 0, 0) + transform translate3d(-2000px, 0, 0) + to + opacity 1 + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +.fadeInLeftBig + -webkit-animation-name fadeInLeftBig + animation-name fadeInLeftBig + +@keyframes fadeInRight + from + opacity 0 + -webkit-transform translate3d(100%, 0, 0) + transform translate3d(100%, 0, 0) + to + opacity 1 + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +@keyframes fadeInRight + from + opacity 0 + -webkit-transform translate3d(100%, 0, 0) + transform translate3d(100%, 0, 0) + to + opacity 1 + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +.fadeInRight + -webkit-animation-name fadeInRight + animation-name fadeInRight + +@keyframes fadeInRightBig + from + opacity 0 + -webkit-transform translate3d(2000px, 0, 0) + transform translate3d(2000px, 0, 0) + to + opacity 1 + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +@keyframes fadeInRightBig + from + opacity 0 + -webkit-transform translate3d(2000px, 0, 0) + transform translate3d(2000px, 0, 0) + to + opacity 1 + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +.fadeInRightBig + -webkit-animation-name fadeInRightBig + animation-name fadeInRightBig + +@keyframes fadeInUp + from + opacity 0 + -webkit-transform translate3d(0, 100%, 0) + transform translate3d(0, 100%, 0) + to + opacity 1 + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +@keyframes fadeInUp + from + opacity 0 + -webkit-transform translate3d(0, 100%, 0) + transform translate3d(0, 100%, 0) + to + opacity 1 + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +.fadeInUp + -webkit-animation-name fadeInUp + animation-name fadeInUp + +@keyframes fadeInUpBig + from + opacity 0 + -webkit-transform translate3d(0, 2000px, 0) + transform translate3d(0, 2000px, 0) + to + opacity 1 + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +@keyframes fadeInUpBig + from + opacity 0 + -webkit-transform translate3d(0, 2000px, 0) + transform translate3d(0, 2000px, 0) + to + opacity 1 + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +.fadeInUpBig + -webkit-animation-name fadeInUpBig + animation-name fadeInUpBig + +@keyframes fadeOut + from + opacity 1 + to + opacity 0 + +@keyframes fadeOut + from + opacity 1 + to + opacity 0 + +.fadeOut + -webkit-animation-name fadeOut + animation-name fadeOut + +@keyframes fadeOutDown + from + opacity 1 + to + opacity 0 + -webkit-transform translate3d(0, 100%, 0) + transform translate3d(0, 100%, 0) + +@keyframes fadeOutDown + from + opacity 1 + to + opacity 0 + -webkit-transform translate3d(0, 100%, 0) + transform translate3d(0, 100%, 0) + +.fadeOutDown + -webkit-animation-name fadeOutDown + animation-name fadeOutDown + +@keyframes fadeOutDownBig + from + opacity 1 + to + opacity 0 + -webkit-transform translate3d(0, 2000px, 0) + transform translate3d(0, 2000px, 0) + +@keyframes fadeOutDownBig + from + opacity 1 + to + opacity 0 + -webkit-transform translate3d(0, 2000px, 0) + transform translate3d(0, 2000px, 0) + +.fadeOutDownBig + -webkit-animation-name fadeOutDownBig + animation-name fadeOutDownBig + +@keyframes fadeOutLeft + from + opacity 1 + to + opacity 0 + -webkit-transform translate3d(-100%, 0, 0) + transform translate3d(-100%, 0, 0) + +@keyframes fadeOutLeft + from + opacity 1 + to + opacity 0 + -webkit-transform translate3d(-100%, 0, 0) + transform translate3d(-100%, 0, 0) + +.fadeOutLeft + -webkit-animation-name fadeOutLeft + animation-name fadeOutLeft + +@keyframes fadeOutLeftBig + from + opacity 1 + to + opacity 0 + -webkit-transform translate3d(-2000px, 0, 0) + transform translate3d(-2000px, 0, 0) + +@keyframes fadeOutLeftBig + from + opacity 1 + to + opacity 0 + -webkit-transform translate3d(-2000px, 0, 0) + transform translate3d(-2000px, 0, 0) + +.fadeOutLeftBig + -webkit-animation-name fadeOutLeftBig + animation-name fadeOutLeftBig + +@keyframes fadeOutRight + from + opacity 1 + to + opacity 0 + -webkit-transform translate3d(100%, 0, 0) + transform translate3d(100%, 0, 0) + +@keyframes fadeOutRight + from + opacity 1 + to + opacity 0 + -webkit-transform translate3d(100%, 0, 0) + transform translate3d(100%, 0, 0) + +.fadeOutRight + -webkit-animation-name fadeOutRight + animation-name fadeOutRight + +@keyframes fadeOutRightBig + from + opacity 1 + to + opacity 0 + -webkit-transform translate3d(2000px, 0, 0) + transform translate3d(2000px, 0, 0) + +@keyframes fadeOutRightBig + from + opacity 1 + to + opacity 0 + -webkit-transform translate3d(2000px, 0, 0) + transform translate3d(2000px, 0, 0) + +.fadeOutRightBig + -webkit-animation-name fadeOutRightBig + animation-name fadeOutRightBig + +@keyframes fadeOutUp + from + opacity 1 + to + opacity 0 + -webkit-transform translate3d(0, -100%, 0) + transform translate3d(0, -100%, 0) + +@keyframes fadeOutUp + from + opacity 1 + to + opacity 0 + -webkit-transform translate3d(0, -100%, 0) + transform translate3d(0, -100%, 0) + +.fadeOutUp + -webkit-animation-name fadeOutUp + animation-name fadeOutUp + +@keyframes fadeOutUpBig + from + opacity 1 + to + opacity 0 + -webkit-transform translate3d(0, -2000px, 0) + transform translate3d(0, -2000px, 0) + +@keyframes fadeOutUpBig + from + opacity 1 + to + opacity 0 + -webkit-transform translate3d(0, -2000px, 0) + transform translate3d(0, -2000px, 0) + +.fadeOutUpBig + -webkit-animation-name fadeOutUpBig + animation-name fadeOutUpBig + +@keyframes flip + from + -webkit-transform perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) + rotate3d(0, 1, 0, -360deg) + transform perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg) + -webkit-animation-timing-function ease-out + animation-timing-function ease-out + 40% + -webkit-transform perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -190deg) + transform perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -190deg) + -webkit-animation-timing-function ease-out + animation-timing-function ease-out + 50% + -webkit-transform perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -170deg) + transform perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -170deg) + -webkit-animation-timing-function ease-in + animation-timing-function ease-in + 80% + -webkit-transform perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) + rotate3d(0, 1, 0, 0) + transform perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) + rotate3d(0, 1, 0, 0) + -webkit-animation-timing-function ease-in + animation-timing-function ease-in + to + -webkit-transform perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) + rotate3d(0, 1, 0, 0) + transform perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0) + -webkit-animation-timing-function ease-in + animation-timing-function ease-in + +@keyframes flip + from + -webkit-transform perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) + rotate3d(0, 1, 0, -360deg) + transform perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg) + -webkit-animation-timing-function ease-out + animation-timing-function ease-out + 40% + -webkit-transform perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -190deg) + transform perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -190deg) + -webkit-animation-timing-function ease-out + animation-timing-function ease-out + 50% + -webkit-transform perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -170deg) + transform perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -170deg) + -webkit-animation-timing-function ease-in + animation-timing-function ease-in + 80% + -webkit-transform perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) + rotate3d(0, 1, 0, 0) + transform perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) + rotate3d(0, 1, 0, 0) + -webkit-animation-timing-function ease-in + animation-timing-function ease-in + to + -webkit-transform perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) + rotate3d(0, 1, 0, 0) + transform perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0) + -webkit-animation-timing-function ease-in + animation-timing-function ease-in + +.animated.flip + -webkit-backface-visibility visible + backface-visibility visible + -webkit-animation-name flip + animation-name flip + +@keyframes flipInX + from + -webkit-transform perspective(400px) rotate3d(1, 0, 0, 90deg) + transform perspective(400px) rotate3d(1, 0, 0, 90deg) + -webkit-animation-timing-function ease-in + animation-timing-function ease-in + opacity 0 + 40% + -webkit-transform perspective(400px) rotate3d(1, 0, 0, -20deg) + transform perspective(400px) rotate3d(1, 0, 0, -20deg) + -webkit-animation-timing-function ease-in + animation-timing-function ease-in + 60% + -webkit-transform perspective(400px) rotate3d(1, 0, 0, 10deg) + transform perspective(400px) rotate3d(1, 0, 0, 10deg) + opacity 1 + 80% + -webkit-transform perspective(400px) rotate3d(1, 0, 0, -5deg) + transform perspective(400px) rotate3d(1, 0, 0, -5deg) + to + -webkit-transform perspective(400px) + transform perspective(400px) + +@keyframes flipInX + from + -webkit-transform perspective(400px) rotate3d(1, 0, 0, 90deg) + transform perspective(400px) rotate3d(1, 0, 0, 90deg) + -webkit-animation-timing-function ease-in + animation-timing-function ease-in + opacity 0 + 40% + -webkit-transform perspective(400px) rotate3d(1, 0, 0, -20deg) + transform perspective(400px) rotate3d(1, 0, 0, -20deg) + -webkit-animation-timing-function ease-in + animation-timing-function ease-in + 60% + -webkit-transform perspective(400px) rotate3d(1, 0, 0, 10deg) + transform perspective(400px) rotate3d(1, 0, 0, 10deg) + opacity 1 + 80% + -webkit-transform perspective(400px) rotate3d(1, 0, 0, -5deg) + transform perspective(400px) rotate3d(1, 0, 0, -5deg) + to + -webkit-transform perspective(400px) + transform perspective(400px) + +.flipInX + -webkit-backface-visibility visible !important + backface-visibility visible !important + -webkit-animation-name flipInX + animation-name flipInX + +@keyframes flipInY + from + -webkit-transform perspective(400px) rotate3d(0, 1, 0, 90deg) + transform perspective(400px) rotate3d(0, 1, 0, 90deg) + -webkit-animation-timing-function ease-in + animation-timing-function ease-in + opacity 0 + 40% + -webkit-transform perspective(400px) rotate3d(0, 1, 0, -20deg) + transform perspective(400px) rotate3d(0, 1, 0, -20deg) + -webkit-animation-timing-function ease-in + animation-timing-function ease-in + 60% + -webkit-transform perspective(400px) rotate3d(0, 1, 0, 10deg) + transform perspective(400px) rotate3d(0, 1, 0, 10deg) + opacity 1 + 80% + -webkit-transform perspective(400px) rotate3d(0, 1, 0, -5deg) + transform perspective(400px) rotate3d(0, 1, 0, -5deg) + to + -webkit-transform perspective(400px) + transform perspective(400px) + +@keyframes flipInY + from + -webkit-transform perspective(400px) rotate3d(0, 1, 0, 90deg) + transform perspective(400px) rotate3d(0, 1, 0, 90deg) + -webkit-animation-timing-function ease-in + animation-timing-function ease-in + opacity 0 + 40% + -webkit-transform perspective(400px) rotate3d(0, 1, 0, -20deg) + transform perspective(400px) rotate3d(0, 1, 0, -20deg) + -webkit-animation-timing-function ease-in + animation-timing-function ease-in + 60% + -webkit-transform perspective(400px) rotate3d(0, 1, 0, 10deg) + transform perspective(400px) rotate3d(0, 1, 0, 10deg) + opacity 1 + 80% + -webkit-transform perspective(400px) rotate3d(0, 1, 0, -5deg) + transform perspective(400px) rotate3d(0, 1, 0, -5deg) + to + -webkit-transform perspective(400px) + transform perspective(400px) + +.flipInY + -webkit-backface-visibility visible !important + backface-visibility visible !important + -webkit-animation-name flipInY + animation-name flipInY + +@keyframes flipOutX + from + -webkit-transform perspective(400px) + transform perspective(400px) + 30% + -webkit-transform perspective(400px) rotate3d(1, 0, 0, -20deg) + transform perspective(400px) rotate3d(1, 0, 0, -20deg) + opacity 1 + to + -webkit-transform perspective(400px) rotate3d(1, 0, 0, 90deg) + transform perspective(400px) rotate3d(1, 0, 0, 90deg) + opacity 0 + +@keyframes flipOutX + from + -webkit-transform perspective(400px) + transform perspective(400px) + 30% + -webkit-transform perspective(400px) rotate3d(1, 0, 0, -20deg) + transform perspective(400px) rotate3d(1, 0, 0, -20deg) + opacity 1 + to + -webkit-transform perspective(400px) rotate3d(1, 0, 0, 90deg) + transform perspective(400px) rotate3d(1, 0, 0, 90deg) + opacity 0 + +.flipOutX + -webkit-animation-duration 0.75s + animation-duration 0.75s + -webkit-animation-name flipOutX + animation-name flipOutX + -webkit-backface-visibility visible !important + backface-visibility visible !important + +@keyframes flipOutY + from + -webkit-transform perspective(400px) + transform perspective(400px) + 30% + -webkit-transform perspective(400px) rotate3d(0, 1, 0, -15deg) + transform perspective(400px) rotate3d(0, 1, 0, -15deg) + opacity 1 + to + -webkit-transform perspective(400px) rotate3d(0, 1, 0, 90deg) + transform perspective(400px) rotate3d(0, 1, 0, 90deg) + opacity 0 + +@keyframes flipOutY + from + -webkit-transform perspective(400px) + transform perspective(400px) + 30% + -webkit-transform perspective(400px) rotate3d(0, 1, 0, -15deg) + transform perspective(400px) rotate3d(0, 1, 0, -15deg) + opacity 1 + to + -webkit-transform perspective(400px) rotate3d(0, 1, 0, 90deg) + transform perspective(400px) rotate3d(0, 1, 0, 90deg) + opacity 0 + +.flipOutY + -webkit-animation-duration 0.75s + animation-duration 0.75s + -webkit-backface-visibility visible !important + backface-visibility visible !important + -webkit-animation-name flipOutY + animation-name flipOutY + +@keyframes lightSpeedIn + from + -webkit-transform translate3d(100%, 0, 0) skewX(-30deg) + transform translate3d(100%, 0, 0) skewX(-30deg) + opacity 0 + 60% + -webkit-transform skewX(20deg) + transform skewX(20deg) + opacity 1 + 80% + -webkit-transform skewX(-5deg) + transform skewX(-5deg) + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +@keyframes lightSpeedIn + from + -webkit-transform translate3d(100%, 0, 0) skewX(-30deg) + transform translate3d(100%, 0, 0) skewX(-30deg) + opacity 0 + 60% + -webkit-transform skewX(20deg) + transform skewX(20deg) + opacity 1 + 80% + -webkit-transform skewX(-5deg) + transform skewX(-5deg) + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +.lightSpeedIn + -webkit-animation-name lightSpeedIn + animation-name lightSpeedIn + -webkit-animation-timing-function ease-out + animation-timing-function ease-out + +@keyframes lightSpeedOut + from + opacity 1 + to + -webkit-transform translate3d(100%, 0, 0) skewX(30deg) + transform translate3d(100%, 0, 0) skewX(30deg) + opacity 0 + +@keyframes lightSpeedOut + from + opacity 1 + to + -webkit-transform translate3d(100%, 0, 0) skewX(30deg) + transform translate3d(100%, 0, 0) skewX(30deg) + opacity 0 + +.lightSpeedOut + -webkit-animation-name lightSpeedOut + animation-name lightSpeedOut + -webkit-animation-timing-function ease-in + animation-timing-function ease-in + +@keyframes rotateIn + from + -webkit-transform-origin center + transform-origin center + -webkit-transform rotate3d(0, 0, 1, -200deg) + transform rotate3d(0, 0, 1, -200deg) + opacity 0 + to + -webkit-transform-origin center + transform-origin center + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + opacity 1 + +@keyframes rotateIn + from + -webkit-transform-origin center + transform-origin center + -webkit-transform rotate3d(0, 0, 1, -200deg) + transform rotate3d(0, 0, 1, -200deg) + opacity 0 + to + -webkit-transform-origin center + transform-origin center + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + opacity 1 + +.rotateIn + -webkit-animation-name rotateIn + animation-name rotateIn + +@keyframes rotateInDownLeft + from + -webkit-transform-origin left bottom + transform-origin left bottom + -webkit-transform rotate3d(0, 0, 1, -45deg) + transform rotate3d(0, 0, 1, -45deg) + opacity 0 + to + -webkit-transform-origin left bottom + transform-origin left bottom + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + opacity 1 + +@keyframes rotateInDownLeft + from + -webkit-transform-origin left bottom + transform-origin left bottom + -webkit-transform rotate3d(0, 0, 1, -45deg) + transform rotate3d(0, 0, 1, -45deg) + opacity 0 + to + -webkit-transform-origin left bottom + transform-origin left bottom + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + opacity 1 + +.rotateInDownLeft + -webkit-animation-name rotateInDownLeft + animation-name rotateInDownLeft + +@keyframes rotateInDownRight + from + -webkit-transform-origin right bottom + transform-origin right bottom + -webkit-transform rotate3d(0, 0, 1, 45deg) + transform rotate3d(0, 0, 1, 45deg) + opacity 0 + to + -webkit-transform-origin right bottom + transform-origin right bottom + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + opacity 1 + +@keyframes rotateInDownRight + from + -webkit-transform-origin right bottom + transform-origin right bottom + -webkit-transform rotate3d(0, 0, 1, 45deg) + transform rotate3d(0, 0, 1, 45deg) + opacity 0 + to + -webkit-transform-origin right bottom + transform-origin right bottom + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + opacity 1 + +.rotateInDownRight + -webkit-animation-name rotateInDownRight + animation-name rotateInDownRight + +@keyframes rotateInUpLeft + from + -webkit-transform-origin left bottom + transform-origin left bottom + -webkit-transform rotate3d(0, 0, 1, 45deg) + transform rotate3d(0, 0, 1, 45deg) + opacity 0 + to + -webkit-transform-origin left bottom + transform-origin left bottom + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + opacity 1 + +@keyframes rotateInUpLeft + from + -webkit-transform-origin left bottom + transform-origin left bottom + -webkit-transform rotate3d(0, 0, 1, 45deg) + transform rotate3d(0, 0, 1, 45deg) + opacity 0 + to + -webkit-transform-origin left bottom + transform-origin left bottom + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + opacity 1 + +.rotateInUpLeft + -webkit-animation-name rotateInUpLeft + animation-name rotateInUpLeft + +@keyframes rotateInUpRight + from + -webkit-transform-origin right bottom + transform-origin right bottom + -webkit-transform rotate3d(0, 0, 1, -90deg) + transform rotate3d(0, 0, 1, -90deg) + opacity 0 + to + -webkit-transform-origin right bottom + transform-origin right bottom + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + opacity 1 + +@keyframes rotateInUpRight + from + -webkit-transform-origin right bottom + transform-origin right bottom + -webkit-transform rotate3d(0, 0, 1, -90deg) + transform rotate3d(0, 0, 1, -90deg) + opacity 0 + to + -webkit-transform-origin right bottom + transform-origin right bottom + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + opacity 1 + +.rotateInUpRight + -webkit-animation-name rotateInUpRight + animation-name rotateInUpRight + +@keyframes rotateOut + from + -webkit-transform-origin center + transform-origin center + opacity 1 + to + -webkit-transform-origin center + transform-origin center + -webkit-transform rotate3d(0, 0, 1, 200deg) + transform rotate3d(0, 0, 1, 200deg) + opacity 0 + +@keyframes rotateOut + from + -webkit-transform-origin center + transform-origin center + opacity 1 + to + -webkit-transform-origin center + transform-origin center + -webkit-transform rotate3d(0, 0, 1, 200deg) + transform rotate3d(0, 0, 1, 200deg) + opacity 0 + +.rotateOut + -webkit-animation-name rotateOut + animation-name rotateOut + +@keyframes rotateOutDownLeft + from + -webkit-transform-origin left bottom + transform-origin left bottom + opacity 1 + to + -webkit-transform-origin left bottom + transform-origin left bottom + -webkit-transform rotate3d(0, 0, 1, 45deg) + transform rotate3d(0, 0, 1, 45deg) + opacity 0 + +@keyframes rotateOutDownLeft + from + -webkit-transform-origin left bottom + transform-origin left bottom + opacity 1 + to + -webkit-transform-origin left bottom + transform-origin left bottom + -webkit-transform rotate3d(0, 0, 1, 45deg) + transform rotate3d(0, 0, 1, 45deg) + opacity 0 + +.rotateOutDownLeft + -webkit-animation-name rotateOutDownLeft + animation-name rotateOutDownLeft + +@keyframes rotateOutDownRight + from + -webkit-transform-origin right bottom + transform-origin right bottom + opacity 1 + to + -webkit-transform-origin right bottom + transform-origin right bottom + -webkit-transform rotate3d(0, 0, 1, -45deg) + transform rotate3d(0, 0, 1, -45deg) + opacity 0 + +@keyframes rotateOutDownRight + from + -webkit-transform-origin right bottom + transform-origin right bottom + opacity 1 + to + -webkit-transform-origin right bottom + transform-origin right bottom + -webkit-transform rotate3d(0, 0, 1, -45deg) + transform rotate3d(0, 0, 1, -45deg) + opacity 0 + +.rotateOutDownRight + -webkit-animation-name rotateOutDownRight + animation-name rotateOutDownRight + +@keyframes rotateOutUpLeft + from + -webkit-transform-origin left bottom + transform-origin left bottom + opacity 1 + to + -webkit-transform-origin left bottom + transform-origin left bottom + -webkit-transform rotate3d(0, 0, 1, -45deg) + transform rotate3d(0, 0, 1, -45deg) + opacity 0 + +@keyframes rotateOutUpLeft + from + -webkit-transform-origin left bottom + transform-origin left bottom + opacity 1 + to + -webkit-transform-origin left bottom + transform-origin left bottom + -webkit-transform rotate3d(0, 0, 1, -45deg) + transform rotate3d(0, 0, 1, -45deg) + opacity 0 + +.rotateOutUpLeft + -webkit-animation-name rotateOutUpLeft + animation-name rotateOutUpLeft + +@keyframes rotateOutUpRight + from + -webkit-transform-origin right bottom + transform-origin right bottom + opacity 1 + to + -webkit-transform-origin right bottom + transform-origin right bottom + -webkit-transform rotate3d(0, 0, 1, 90deg) + transform rotate3d(0, 0, 1, 90deg) + opacity 0 + +@keyframes rotateOutUpRight + from + -webkit-transform-origin right bottom + transform-origin right bottom + opacity 1 + to + -webkit-transform-origin right bottom + transform-origin right bottom + -webkit-transform rotate3d(0, 0, 1, 90deg) + transform rotate3d(0, 0, 1, 90deg) + opacity 0 + +.rotateOutUpRight + -webkit-animation-name rotateOutUpRight + animation-name rotateOutUpRight + +@keyframes hinge + 0% + -webkit-transform-origin top left + transform-origin top left + -webkit-animation-timing-function ease-in-out + animation-timing-function ease-in-out + 20% + 60% + -webkit-transform rotate3d(0, 0, 1, 80deg) + transform rotate3d(0, 0, 1, 80deg) + -webkit-transform-origin top left + transform-origin top left + -webkit-animation-timing-function ease-in-out + animation-timing-function ease-in-out + 40% + 80% + -webkit-transform rotate3d(0, 0, 1, 60deg) + transform rotate3d(0, 0, 1, 60deg) + -webkit-transform-origin top left + transform-origin top left + -webkit-animation-timing-function ease-in-out + animation-timing-function ease-in-out + opacity 1 + to + -webkit-transform translate3d(0, 700px, 0) + transform translate3d(0, 700px, 0) + opacity 0 + +@keyframes hinge + 0% + -webkit-transform-origin top left + transform-origin top left + -webkit-animation-timing-function ease-in-out + animation-timing-function ease-in-out + 20% + 60% + -webkit-transform rotate3d(0, 0, 1, 80deg) + transform rotate3d(0, 0, 1, 80deg) + -webkit-transform-origin top left + transform-origin top left + -webkit-animation-timing-function ease-in-out + animation-timing-function ease-in-out + 40% + 80% + -webkit-transform rotate3d(0, 0, 1, 60deg) + transform rotate3d(0, 0, 1, 60deg) + -webkit-transform-origin top left + transform-origin top left + -webkit-animation-timing-function ease-in-out + animation-timing-function ease-in-out + opacity 1 + to + -webkit-transform translate3d(0, 700px, 0) + transform translate3d(0, 700px, 0) + opacity 0 + +.hinge + -webkit-animation-duration 2s + animation-duration 2s + -webkit-animation-name hinge + animation-name hinge + +@keyframes jackInTheBox + from + opacity 0 + -webkit-transform scale(0.1) rotate(30deg) + transform scale(0.1) rotate(30deg) + -webkit-transform-origin center bottom + transform-origin center bottom + 50% + -webkit-transform rotate(-10deg) + transform rotate(-10deg) + 70% + -webkit-transform rotate(3deg) + transform rotate(3deg) + to + opacity 1 + -webkit-transform scale(1) + transform scale(1) + +@keyframes jackInTheBox + from + opacity 0 + -webkit-transform scale(0.1) rotate(30deg) + transform scale(0.1) rotate(30deg) + -webkit-transform-origin center bottom + transform-origin center bottom + 50% + -webkit-transform rotate(-10deg) + transform rotate(-10deg) + 70% + -webkit-transform rotate(3deg) + transform rotate(3deg) + to + opacity 1 + -webkit-transform scale(1) + transform scale(1) + +.jackInTheBox + -webkit-animation-name jackInTheBox + animation-name jackInTheBox + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ +@keyframes rollIn + from + opacity 0 + -webkit-transform translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg) + transform translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg) + to + opacity 1 + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +@keyframes rollIn + from + opacity 0 + -webkit-transform translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg) + transform translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg) + to + opacity 1 + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +.rollIn + -webkit-animation-name rollIn + animation-name rollIn + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ +@keyframes rollOut + from + opacity 1 + to + opacity 0 + -webkit-transform translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg) + transform translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg) + +@keyframes rollOut + from + opacity 1 + to + opacity 0 + -webkit-transform translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg) + transform translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg) + +.rollOut + -webkit-animation-name rollOut + animation-name rollOut + +@keyframes zoomIn + from + opacity 0 + -webkit-transform scale3d(0.3, 0.3, 0.3) + transform scale3d(0.3, 0.3, 0.3) + 50% + opacity 1 + +@keyframes zoomIn + from + opacity 0 + -webkit-transform scale3d(0.3, 0.3, 0.3) + transform scale3d(0.3, 0.3, 0.3) + 50% + opacity 1 + +.zoomIn + -webkit-animation-name zoomIn + animation-name zoomIn + +@keyframes zoomInDown + from + opacity 0 + -webkit-transform scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0) + transform scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0) + -webkit-animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + 60% + opacity 1 + -webkit-transform scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0) + transform scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0) + -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + +@keyframes zoomInDown + from + opacity 0 + -webkit-transform scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0) + transform scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0) + -webkit-animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + 60% + opacity 1 + -webkit-transform scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0) + transform scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0) + -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + +.zoomInDown + -webkit-animation-name zoomInDown + animation-name zoomInDown + +@keyframes zoomInLeft + from + opacity 0 + -webkit-transform scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0) + transform scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0) + -webkit-animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + 60% + opacity 1 + -webkit-transform scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0) + transform scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0) + -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + +@keyframes zoomInLeft + from + opacity 0 + -webkit-transform scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0) + transform scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0) + -webkit-animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + 60% + opacity 1 + -webkit-transform scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0) + transform scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0) + -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + +.zoomInLeft + -webkit-animation-name zoomInLeft + animation-name zoomInLeft + +@keyframes zoomInRight + from + opacity 0 + -webkit-transform scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0) + transform scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0) + -webkit-animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + 60% + opacity 1 + -webkit-transform scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0) + transform scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0) + -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + +@keyframes zoomInRight + from + opacity 0 + -webkit-transform scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0) + transform scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0) + -webkit-animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + 60% + opacity 1 + -webkit-transform scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0) + transform scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0) + -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + +.zoomInRight + -webkit-animation-name zoomInRight + animation-name zoomInRight + +@keyframes zoomInUp + from + opacity 0 + -webkit-transform scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0) + transform scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0) + -webkit-animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + 60% + opacity 1 + -webkit-transform scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0) + transform scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0) + -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + +@keyframes zoomInUp + from + opacity 0 + -webkit-transform scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0) + transform scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0) + -webkit-animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + 60% + opacity 1 + -webkit-transform scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0) + transform scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0) + -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + +.zoomInUp + -webkit-animation-name zoomInUp + animation-name zoomInUp + +@keyframes zoomOut + from + opacity 1 + 50% + opacity 0 + -webkit-transform scale3d(0.3, 0.3, 0.3) + transform scale3d(0.3, 0.3, 0.3) + to + opacity 0 + +@keyframes zoomOut + from + opacity 1 + 50% + opacity 0 + -webkit-transform scale3d(0.3, 0.3, 0.3) + transform scale3d(0.3, 0.3, 0.3) + to + opacity 0 + +.zoomOut + -webkit-animation-name zoomOut + animation-name zoomOut + +@keyframes zoomOutDown + 40% + opacity 1 + -webkit-transform scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0) + transform scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0) + -webkit-animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + to + opacity 0 + -webkit-transform scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0) + transform scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0) + -webkit-transform-origin center bottom + transform-origin center bottom + -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + +@keyframes zoomOutDown + 40% + opacity 1 + -webkit-transform scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0) + transform scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0) + -webkit-animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + to + opacity 0 + -webkit-transform scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0) + transform scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0) + -webkit-transform-origin center bottom + transform-origin center bottom + -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + +.zoomOutDown + -webkit-animation-name zoomOutDown + animation-name zoomOutDown + +@keyframes zoomOutLeft + 40% + opacity 1 + -webkit-transform scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0) + transform scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0) + to + opacity 0 + -webkit-transform scale(0.1) translate3d(-2000px, 0, 0) + transform scale(0.1) translate3d(-2000px, 0, 0) + -webkit-transform-origin left center + transform-origin left center + +@keyframes zoomOutLeft + 40% + opacity 1 + -webkit-transform scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0) + transform scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0) + to + opacity 0 + -webkit-transform scale(0.1) translate3d(-2000px, 0, 0) + transform scale(0.1) translate3d(-2000px, 0, 0) + -webkit-transform-origin left center + transform-origin left center + +.zoomOutLeft + -webkit-animation-name zoomOutLeft + animation-name zoomOutLeft + +@keyframes zoomOutRight + 40% + opacity 1 + -webkit-transform scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0) + transform scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0) + to + opacity 0 + -webkit-transform scale(0.1) translate3d(2000px, 0, 0) + transform scale(0.1) translate3d(2000px, 0, 0) + -webkit-transform-origin right center + transform-origin right center + +@keyframes zoomOutRight + 40% + opacity 1 + -webkit-transform scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0) + transform scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0) + to + opacity 0 + -webkit-transform scale(0.1) translate3d(2000px, 0, 0) + transform scale(0.1) translate3d(2000px, 0, 0) + -webkit-transform-origin right center + transform-origin right center + +.zoomOutRight + -webkit-animation-name zoomOutRight + animation-name zoomOutRight + +@keyframes zoomOutUp + 40% + opacity 1 + -webkit-transform scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0) + transform scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0) + -webkit-animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + to + opacity 0 + -webkit-transform scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0) + transform scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0) + -webkit-transform-origin center bottom + transform-origin center bottom + -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + +@keyframes zoomOutUp + 40% + opacity 1 + -webkit-transform scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0) + transform scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0) + -webkit-animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + animation-timing-function cubic-bezier(0.55, 0.055, 0.675, 0.19) + to + opacity 0 + -webkit-transform scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0) + transform scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0) + -webkit-transform-origin center bottom + transform-origin center bottom + -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + animation-timing-function cubic-bezier(0.175, 0.885, 0.32, 1) + +.zoomOutUp + -webkit-animation-name zoomOutUp + animation-name zoomOutUp + +@keyframes slideInDown + from + -webkit-transform translate3d(0, -100%, 0) + transform translate3d(0, -100%, 0) + visibility visible + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +@keyframes slideInDown + from + -webkit-transform translate3d(0, -100%, 0) + transform translate3d(0, -100%, 0) + visibility visible + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +.slideInDown + -webkit-animation-name slideInDown + animation-name slideInDown + +@keyframes slideInLeft + from + -webkit-transform translate3d(-100%, 0, 0) + transform translate3d(-100%, 0, 0) + visibility visible + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +@keyframes slideInLeft + from + -webkit-transform translate3d(-100%, 0, 0) + transform translate3d(-100%, 0, 0) + visibility visible + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +.slideInLeft + -webkit-animation-name slideInLeft + animation-name slideInLeft + +@keyframes slideInRight + from + -webkit-transform translate3d(100%, 0, 0) + transform translate3d(100%, 0, 0) + visibility visible + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +@keyframes slideInRight + from + -webkit-transform translate3d(100%, 0, 0) + transform translate3d(100%, 0, 0) + visibility visible + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +.slideInRight + -webkit-animation-name slideInRight + animation-name slideInRight + +@keyframes slideInUp + from + -webkit-transform translate3d(0, 100%, 0) + transform translate3d(0, 100%, 0) + visibility visible + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +@keyframes slideInUp + from + -webkit-transform translate3d(0, 100%, 0) + transform translate3d(0, 100%, 0) + visibility visible + to + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + +.slideInUp + -webkit-animation-name slideInUp + animation-name slideInUp + +@keyframes slideOutDown + from + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + to + visibility hidden + -webkit-transform translate3d(0, 100%, 0) + transform translate3d(0, 100%, 0) + +@keyframes slideOutDown + from + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + to + visibility hidden + -webkit-transform translate3d(0, 100%, 0) + transform translate3d(0, 100%, 0) + +.slideOutDown + -webkit-animation-name slideOutDown + animation-name slideOutDown + +@keyframes slideOutLeft + from + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + to + visibility hidden + -webkit-transform translate3d(-100%, 0, 0) + transform translate3d(-100%, 0, 0) + +@keyframes slideOutLeft + from + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + to + visibility hidden + -webkit-transform translate3d(-100%, 0, 0) + transform translate3d(-100%, 0, 0) + +.slideOutLeft + -webkit-animation-name slideOutLeft + animation-name slideOutLeft + +@keyframes slideOutRight + from + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + to + visibility hidden + -webkit-transform translate3d(100%, 0, 0) + transform translate3d(100%, 0, 0) + +@keyframes slideOutRight + from + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + to + visibility hidden + -webkit-transform translate3d(100%, 0, 0) + transform translate3d(100%, 0, 0) + +.slideOutRight + -webkit-animation-name slideOutRight + animation-name slideOutRight + +@keyframes slideOutUp + from + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + to + visibility hidden + -webkit-transform translate3d(0, -100%, 0) + transform translate3d(0, -100%, 0) + +@keyframes slideOutUp + from + -webkit-transform translate3d(0, 0, 0) + transform translate3d(0, 0, 0) + to + visibility hidden + -webkit-transform translate3d(0, -100%, 0) + transform translate3d(0, -100%, 0) + +.slideOutUp + -webkit-animation-name slideOutUp + animation-name slideOutUp + +.animated + -webkit-animation-duration 1s + animation-duration 1s + -webkit-animation-fill-mode both + animation-fill-mode both + +.animated.infinite + -webkit-animation-iteration-count infinite + animation-iteration-count infinite + +.animated.delay-1s + -webkit-animation-delay 1s + animation-delay 1s + +.animated.delay-2s + -webkit-animation-delay 2s + animation-delay 2s + +.animated.delay-3s + -webkit-animation-delay 3s + animation-delay 3s + +.animated.delay-4s + -webkit-animation-delay 4s + animation-delay 4s + +.animated.delay-5s + -webkit-animation-delay 5s + animation-delay 5s + +.animated.fast + -webkit-animation-duration 800ms + animation-duration 800ms + +.animated.faster + -webkit-animation-duration 500ms + animation-duration 500ms + +.animated.fastest + -webkit-animation-duration 300ms + animation-duration 300ms + +.animated.slow + -webkit-animation-duration 2s + animation-duration 2s + +.animated.slower + -webkit-animation-duration 3s + animation-duration 3s + +@media (print: ), (prefers-reduced-motion: reduce) + .animated + -webkit-animation-duration 1ms !important + animation-duration 1ms !important + -webkit-transition-duration 1ms !important + transition-duration 1ms !important + -webkit-animation-iteration-count 1 !important + animation-iteration-count 1 !important diff --git a/src/.vuepress/styles/index.styl b/src/.vuepress/styles/index.styl index 0d98d642..ecb63007 100644 --- a/src/.vuepress/styles/index.styl +++ b/src/.vuepress/styles/index.styl @@ -5,13 +5,19 @@ user-select() -ms-user-select arguments user-select arguments +font-feature-settings() + -webkit-font-feature-settings arguments + -moz-font-feature-settings arguments + -ms-font-feature-settings arguments + font-feature-settings arguments + // Custom block containers .custom-block &.tip &.warning &.error &.danger - border-radius 0.4rem + border-radius $containerBorderRadius &.aside color transparentify($textColor, 0.4) font-size 0.9rem @@ -19,8 +25,8 @@ user-select() // Guide container .guide - background-color $containerBackground - border-radius 0.4rem + background-color $containerBackgroundColor + border-radius $containerBorderRadius margin 1rem 0 padding 0.1rem 1.5rem .title @@ -28,8 +34,8 @@ user-select() // Expander container .expander - background-color $containerBackground - border-radius 0.4rem + background-color $containerBackgroundColor + border-radius $containerBorderRadius margin 1rem 0 padding 1rem 1.5rem .expansion @@ -40,7 +46,7 @@ user-select() // File tree .file-tree - font-family source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace + font-family $codeFontFamily font-size 0.85rem list-style none padding 0 @@ -104,21 +110,56 @@ user-select() background-color $badgeVersionColor !important // Index changes -main.home +.home + max-width $homePageWidth .hero img - max-height 8em - .action a.nav-link.action-button.secondary - border-bottom none - border-radius 0.3125em - font-family 'Open Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif + max-height $heroImageHeight + .action + user-select none + a + border-radius $buttonBorderRadius + cursor pointer + font-family $buttonFontFamily + font-size 1.125em + width 10.5rem + .material-icons + font-size 1.125em + color #ffffff + margin-right 2px + .feature + text-align center + p + height 5em + img + max-height 28em + max-width 100% + +// Index download modal +.download-container + button + user-select none + .download-stable-button + .download-dev-button + .download-confirm-button + border-radius $buttonBorderRadius + font-family $buttonFontFamily font-size 1.125em - margin-top 0.5em + height 3rem + width 8.5rem + &:focus + outline none + outline-style solid + .download-confirm-button + .download-title + border-bottom-width 0 + .download-footer + border-top-width 0 + padding-top 0 + .download-dev-button + background-color $accentColorSecondary // Navbar Changes .navbar - img.logo - /* Bring navbar-name closer to navbar-logo */ - margin-right 0 .site-name.can-hide /* Display navbar-name even for small screens */ @media (max-width: $MQMobile) @@ -130,4 +171,4 @@ main.home // Bold class .bold - font-weight bold \ No newline at end of file + font-weight bold diff --git a/src/.vuepress/styles/palette.styl b/src/.vuepress/styles/palette.styl index 9d659f97..8d8f76a5 100644 --- a/src/.vuepress/styles/palette.styl +++ b/src/.vuepress/styles/palette.styl @@ -1,5 +1,6 @@ // Colors $accentColor = #2E84BF +$accentColorSecondary = #476582 $textColor = #2c3e50 $borderColor = #eaecef $codeBgColor = #282c34 @@ -8,15 +9,19 @@ $badgeTipColor = $accentColor $badgeWarningColor = darken(#ffe564, 35%) $badgeErrorColor = #DA5961 $badgeVersionColor = #000000 -$containerBackground = #f0f4f8 - +$containerBackgroundColor = #f0f4f8 // Layout $navbarHeight = 3.6rem $sidebarWidth = 20rem $contentWidth = 46.25rem -$homePageWidth = 60rem - +$homePageWidth = 70rem +$heroImageHeight = 8rem +$containerBorderRadius = 0.4rem +$buttonBorderRadius = 0.25rem // Responsive breakpoints $MQNarrow = 959px $MQMobile = 767px $MQMobileNarrow = 419px +// Fonts +$buttonFontFamily = 'Open Sans', Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif +$codeFontFamily = source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace diff --git a/src/.vuepress/theme/components/Home.vue b/src/.vuepress/theme/components/Home.vue index c794055d..2bfcaf2b 100644 --- a/src/.vuepress/theme/components/Home.vue +++ b/src/.vuepress/theme/components/Home.vue @@ -5,32 +5,29 @@ v-if="data.heroImage" :src="$withBase(data.heroImage)" :alt="data.heroAlt || 'hero'" - > + /> -

{{ data.heroText || $title || 'Hello' }}

+

+ {{ data.heroText || $title || "Tachiyomi" }} +

- {{ data.tagline || $description || 'Welcome to your VuePress site' }} + {{ + data.tagline || + $description || + "Free and open source manga reader for Android." + }}

-

- - - +

+ + Download ↓ + +

-
+

{{ feature.title }}

{{ feature.details }}

+
- + -