simplegoals/dist/simplegoals.min.css

Motivate your users with pleasant and easy-to-use achievements.

[class*=" simplegoals"],[class*=" simplegoals"]:after,[class*=" simplegoals"]:before,[class^=simplegoals]{padding:0;margin:0;text-decoration:none;border-width:0;border-style:none;outline:none;line-height:1.15;-webkit-text-size-adjust:100%;box-sizing:border-box;font-family:var(--simplegoals-font-family);font-size:1em;font-weight:400}[class*=" simplegoals"]:focus,[class^=simplegoals]:focus{outline:none}.simplegoals-achievement{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;position:fixed;height:6em;top:1em;left:1em;background:var(--simplegoals-color-background);border-radius:3em;box-shadow:0 0 2em 0 rgba(0,0,0,.3);overflow:hidden;-webkit-transition:all .7s linear;transition:all .7s linear;max-width:6em;-webkit-transform:translateX(-12em) rotate(-180deg);transform:translateX(-12em) rotate(-180deg);opacity:0;z-index:1789;font-size:16px}.simplegoals-achievement--opened{-webkit-animation:simplegoals-achievement--open 2s ease-out both;animation:simplegoals-achievement--open 2s ease-out both;max-width:calc(640px - 2em)}@-webkit-keyframes simplegoals-achievement--open{0%{-webkit-transform:translateX(-12em) rotate(-180deg);transform:translateX(-12em) rotate(-180deg);opacity:0;max-width:6em}45%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1;max-width:6em}55%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1;max-width:6em}to{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);max-width:calc(640px - 2em);opacity:1}}@keyframes simplegoals-achievement--open{0%{-webkit-transform:translateX(-12em) rotate(-180deg);transform:translateX(-12em) rotate(-180deg);opacity:0;max-width:6em}45%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1;max-width:6em}55%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1;max-width:6em}to{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);max-width:calc(640px - 2em);opacity:1}}.simplegoals-achievement--closed{-webkit-animation:simplegoals-achievement--close 2s ease-out both;animation:simplegoals-achievement--close 2s ease-out both}@-webkit-keyframes simplegoals-achievement--close{0%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);max-width:calc(640px - 2em);opacity:1}45%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1;max-width:6em}55%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1;max-width:6em}to{-webkit-transform:translateX(-12em) rotate(-180deg);transform:translateX(-12em) rotate(-180deg);opacity:0;max-width:6em}}@keyframes simplegoals-achievement--close{0%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);max-width:calc(640px - 2em);opacity:1}45%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1;max-width:6em}55%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1;max-width:6em}to{-webkit-transform:translateX(-12em) rotate(-180deg);transform:translateX(-12em) rotate(-180deg);opacity:0;max-width:6em}}.simplegoals-achievement__icon{display:-webkit-box;display:flex;width:6em;height:6em;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;-webkit-box-flex:0;flex:0 0 auto;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:all .5s;transition:all .5s}.simplegoals-achievement__icon img{max-height:3.5em;max-width:3.5em}.simplegoals-achievement__body{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;-webkit-box-flex:1;flex:1 0 auto;max-width:calc(640px - 18.5em)}.simplegoals-achievement__notification{margin:0;padding:.1em;font-size:1em;color:var(--simplegoals-color-subtitle)}.simplegoals-achievement__name{margin:0;padding:.1em;font-size:1.2em;font-weight:700;color:var(--simplegoals-color-title)}.simplegoals-achievement__button{background-color:var(--simplegoals-color-primary);display:-webkit-box;display:flex;font-size:1em;color:var(--simplegoals-color-opposite);padding:1em;margin-left:1em;margin-right:1.5em;border-radius:3em;text-decoration:none;cursor:pointer;border:none;-webkit-box-flex:1;flex:1 0 auto;max-width:8em;text-align:center;-webkit-box-pack:center;justify-content:center}.simplegoals-achievement__button:hover{background-color:var(--simplegoals-color-primary-hover)}.simplegoals-achievement__close-button{position:absolute;background:none;height:2em;width:2em;left:2em;top:2em;-webkit-transform:translateY(-10em);transform:translateY(-10em);-webkit-transition:all .5s;transition:all .5s;cursor:pointer;font-size:1em}.simplegoals-achievement__close-button svg{height:2em;width:2em;stroke:#e53e3e;-webkit-transition:all .5s;transition:all .5s;-webkit-transform:rotate(0);transform:rotate(0)}.simplegoals-achievement__close-button svg:hover{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}@media (min-width:640px) and (hover:none){.simplegoals-achievement--clicked .simplegoals-achievement__icon{-webkit-transform:translateY(10em);transform:translateY(10em)}.simplegoals-achievement--clicked .simplegoals-achievement__close-button{-webkit-transform:translateY(0);transform:translateY(0)}}@media (min-width:640px) and (hover:hover){.simplegoals-achievement:hover .simplegoals-achievement__icon{-webkit-transform:translateY(10em);transform:translateY(10em)}.simplegoals-achievement:hover .simplegoals-achievement__close-button{-webkit-transform:translateY(0);transform:translateY(0)}}@media (max-width:639px){.simplegoals-achievement--opened{-webkit-animation:simplegoals-achievement--open-mobile 2s ease-out both;animation:simplegoals-achievement--open-mobile 2s ease-out both;max-width:calc(100vw - 2em)}.simplegoals-achievement--closed{-webkit-animation:simplegoals-achievement--close-mobile 2s ease-out both;animation:simplegoals-achievement--close-mobile 2s ease-out both}.simplegoals-achievement__body{max-width:calc(100vw - 8em);padding-right:2em;-webkit-transition:all .5s;transition:all .5s}.simplegoals-achievement__button{position:absolute;right:0;left:4em;max-width:none;-webkit-transform:translateY(-10em);transform:translateY(-10em);-webkit-transition:all .5s;transition:all .5s}.simplegoals-achievement--closed .simplegoals-achievement__button{opacity:0!important}}@media (max-width:639px) and (hover:none){.simplegoals-achievement--clicked .simplegoals-achievement__body{-webkit-transform:translateY(10em);transform:translateY(10em)}.simplegoals-achievement--clicked .simplegoals-achievement__button{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}.simplegoals-achievement--clicked .simplegoals-achievement__icon{-webkit-transform:translateY(10em);transform:translateY(10em)}.simplegoals-achievement--clicked .simplegoals-achievement__close-button{-webkit-transform:translateY(0);transform:translateY(0)}}@media (max-width:639px) and (hover:hover){.simplegoals-achievement:hover .simplegoals-achievement__body{-webkit-transform:translateY(10em);transform:translateY(10em)}.simplegoals-achievement:hover .simplegoals-achievement__button{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}.simplegoals-achievement:hover .simplegoals-achievement__icon{-webkit-transform:translateY(10em);transform:translateY(10em)}.simplegoals-achievement:hover .simplegoals-achievement__close-button{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes simplegoals-achievement--open-mobile{0%{-webkit-transform:translateX(-12em) rotate(-180deg);transform:translateX(-12em) rotate(-180deg);opacity:0;max-width:6em}45%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1;max-width:6em}55%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1;max-width:6em}to{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);max-width:calc(100vw - 2em);opacity:1}}@keyframes simplegoals-achievement--open-mobile{0%{-webkit-transform:translateX(-12em) rotate(-180deg);transform:translateX(-12em) rotate(-180deg);opacity:0;max-width:6em}45%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1;max-width:6em}55%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1;max-width:6em}to{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);max-width:calc(100vw - 2em);opacity:1}}@-webkit-keyframes simplegoals-achievement--close-mobile{0%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);max-width:calc(100vw - 2em);opacity:1}45%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1;max-width:6em}55%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1;max-width:6em}to{-webkit-transform:translateX(-12em) rotate(-180deg);transform:translateX(-12em) rotate(-180deg);opacity:0;max-width:6em;display:none}}@keyframes simplegoals-achievement--close-mobile{0%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);max-width:calc(100vw - 2em);opacity:1}45%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1;max-width:6em}55%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1;max-width:6em}to{-webkit-transform:translateX(-12em) rotate(-180deg);transform:translateX(-12em) rotate(-180deg);opacity:0;max-width:6em;display:none}}.simplegoals-overview{display:block;position:fixed;top:0;left:0;bottom:0;right:0;background-color:rgba(0,0,0,.5);font-size:16px;overflow:auto;z-index:1788;opacity:0;-webkit-transition:opacity .7s;transition:opacity .7s;-webkit-transform:translateY(100vh);transform:translateY(100vh)}.simplegoals-overview--opened{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}.simplegoals-overview__wrapper{display:-webkit-box;display:flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;min-height:100vh;padding:10vh 1em;-webkit-transition:all .7s;transition:all .7s;-webkit-transform:translateY(100vh);transform:translateY(100vh)}.simplegoals-overview--opened>.simplegoals-overview__wrapper{-webkit-transform:translateY(0);transform:translateY(0)}.simplegoals-overview__body{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:center;align-items:center;padding:2em;border-radius:3em;width:640px;background-color:var(--simplegoals-color-background)}@media (max-width:639px){.simplegoals-overview__body{width:auto}}.simplegoals-overview__title{font-size:2em;font-weight:bolder;margin:.5em;color:var(--simplegoals-color-title)}.simplegoals-overview__subtitle{color:var(--simplegoals-color-subtitle)}.simplegoals-overview__goals{margin:1.5em 0}.simplegoals-overview-goal,.simplegoals-overview-goal__icon{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.simplegoals-overview-goal__icon{margin-right:1em;height:6em;-webkit-box-pack:center;justify-content:center;-webkit-box-flex:0;flex:0 0 auto;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:all .5s;transition:all .5s}.simplegoals-overview-goal__icon img{max-height:3.5em;max-width:3.5em}.simplegoals-overview-goal--locked .simplegoals-overview-goal__icon img{-webkit-filter:grayscale(100%);filter:grayscale(100%)}.simplegoals-overview-goal__body{padding:.5em 0;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center}.simplegoals-overview-goal__name{padding:.1em;font-size:1.2em;font-weight:bolder;color:var(--simplegoals-color-title)}.simplegoals-overview-goal__description{padding:.1em;font-size:1em;color:var(--simplegoals-color-subtitle)}.simplegoals-overview__close-button{background-color:var(--simplegoals-color-primary);font-size:1em;color:var(--simplegoals-color-opposite);padding:1em;margin-left:auto;margin-right:auto;margin-bottom:1em;border-radius:3em;min-width:8em;cursor:pointer;text-align:center}.simplegoals-overview__close-button:hover{background-color:var(--simplegoals-color-primary-hover)}.simplegoals-overview__attribution{font-size:.9em;color:var(--simplegoals-color-subtitle)}.simplegoals-overview__attribution-link{color:var(--simplegoals-color-primary)}.simplegoals-overview__attribution-link:active,.simplegoals-overview__attribution-link:hover{color:var(--simplegoals-color-primary-hover)}