diff --git a/client/scss/_base.scss b/client/scss/_base.scss index d94d755..180cba4 100644 --- a/client/scss/_base.scss +++ b/client/scss/_base.scss @@ -17,6 +17,11 @@ src: local('Titillium WebSemiBold'), local('TitilliumWeb-SemiBold'), url(http://fonts.gstatic.com/s/titilliumweb/v4/anMUvcNT0H1YN4FII8wpr6d1JQt-lS5nD-1TJX2NNl0.woff2) format('woff2'), url(http://fonts.gstatic.com/s/titilliumweb/v4/anMUvcNT0H1YN4FII8wprx3QmhlKDgQgT1VN2Ed1WFo.woff) format('woff'); } +select { + outline: 0; + border-radius: 0; +} + * { margin: 0; padding: 0; @@ -74,4 +79,8 @@ body { transform: translate(-50%, 0px); left: 50%; width: 500px; +} + +.card { + cursor: pointer; } \ No newline at end of file diff --git a/client/scss/_effects.scss b/client/scss/_effects.scss new file mode 100644 index 0000000..fe35349 --- /dev/null +++ b/client/scss/_effects.scss @@ -0,0 +1,243 @@ +.small-cards-modal { + + + .hand-wrap { + background: rgba(0,0,0,.8); + width: 100%; + height: 130px; + position: absolute; + bottom: 0; + left: 0; + } + + .card { + border: none !important; + margin: 0 !important; + border-radius: 0 !important; + overflow: visible !important; + height: 93px !important; + } + + .hand-cards { + max-width: calc(100% - 350px); + margin: 0 auto; + width: 100%; + float: left; + } + + .card-wrap { + float: left; + cursor: pointer; + z-index: 10; + height: auto !important; + width: auto !important; + margin: 3px; + } + + .card-wrap .shadow, + .grave .shadow { + height: calc(100% - 40px); + left: 14px; + top: 20px; + width: calc(100% - 26px); + } + + .card-wrap:hover { + z-index: 20; + } + + .card { + float: left; + height: 93px; + width: 69px; + position: relative; + transition: margin .05s ease-in-out 0s; + } + + .card i { + display: block; + position: absolute; + top: 3px; + left: 3px; + height: 87px; + z-index: 10; + } + + /** SHAME **/ + + .card-wrap:hover .bla, + .grave:hover .bla, + .leader-card:hover .bla { + box-shadow: 0 0 2px 0 orange; + opacity: 1; + } + + .bla { + width: 100%; + height: 100%; + position: absolute; + opacity: 0; + border-radius: 0; + } + + .shadow { + border-radius: 35%; + box-shadow: 0 0 15px 14px #ffa500; + content: ""; + height: calc(100% - 50px); + left: 15px; + position: absolute; + width: calc(100% - 22px); + z-index: 1; + top: 30px; + transition: all 0.3s ease-in-out 0s; + opacity: 0; + } + + .card-wrap:hover .shadow, + .grave:hover .shadow, + .leader-card:hover .shadow { + -webkit-animation: Shadow 4s ease-in-out infinite; + -moz-animation: Shadow 4s ease-in-out infinite; + animation: Shadow 4s ease-in-out infinite; + } + + .ani { + background: linear-gradient(2deg, #000, #000, #000, #000);; + transition: all .05s ease-in-out 0s; + } + + .card-wrap:hover .ani, + .grave:hover .ani, + .leader-card:hover .ani { + background: linear-gradient(2deg, #ffa500, #ffd68b, #ffa500, #ffa500); + background-size: 800% 800%; + + -webkit-animation: AnimationName 3s ease infinite; + -moz-animation: AnimationName 3s ease infinite; + animation: AnimationName 3s ease infinite; + } + + @-webkit-keyframes Shadow { + 0% { + opacity: 0; + } + 25% { + opacity: .5; + } + 50%{ + opacity: 1; + } + 75% { + opacity: .5; + } + 100%{ opacity: 0; + } + } + + @-webkit-keyframes Shadow { + 0% { + opacity: 0; + } + 25% { + opacity: .5; + } + 50%{ + opacity: 1; + } + 75% { + opacity: .5; + } + 100%{ opacity: 0; + } + } + + @keyframes Shadow { + 0% { + opacity: 0; + } + 25% { + opacity: .5; + } + 50%{ + opacity: 1; + } + 75% { + opacity: .5; + } + 100%{ opacity: 0; + } + } + + .overlay-card { + background: linear-gradient(2deg, rgba(255,255,255,.03), rgba(255,255,255,.2), rgba(255,255,255,.05)); + background-size: 800% 800%; + position: absolute; + z-index: 20; + top: 3px; + left: 3px; + width: calc(100% - 4px); + height: calc(100% - 4px); + opacity: 0; + cursor: pointer; + } + + .card-wrap:hover .overlay-card, + .grave:hover .overlay-card, + .leader-card:hover .overlay-card { + opacity: 1; + -webkit-animation: AnimationName 10s ease infinite; + -moz-animation: AnimationName 10s ease infinite; + animation: AnimationName 10s ease infinite; + } + + @-webkit-keyframes AnimationName { + 0%{background-position:51% 0%} + 50%{background-position:50% 100%} + 100%{background-position:51% 0%} + } + @-moz-keyframes AnimationName { + 0%{background-position:51% 0%} + 50%{background-position:50% 100%} + 100%{background-position:51% 0%} + } + @keyframes AnimationName { + 0%{background-position:51% 0%} + 50%{background-position:50% 100%} + 100%{background-position:51% 0%} + } + + /** SUB HAND **/ + + .sub-hand { + float: left; + width: 150px; + margin: 18px 0 0 0; + } + + .grave { + position: relative; + width: 69px; + height: 93px; + float: left; + } + + .grave-img { + background: url(../grave.png) no-repeat; + position: absolute; + width: 63px; + height: 87px; + top: 3px; + left: 3px; + z-index: 10; + } + + .deck-back { + background: url(../back.png) no-repeat; + float: left; + width: 63px; + height: 87px; + margin: 3px 0 0 10px; + } + +} \ No newline at end of file diff --git a/client/scss/main.scss b/client/scss/main.scss index 42e6f78..e4f6625 100644 --- a/client/scss/main.scss +++ b/client/scss/main.scss @@ -2,6 +2,7 @@ @import "backbone.modal"; @import "backbone.modal.theme"; +@import "effects"; @import "base"; diff --git a/client/templates/cards.handlebars b/client/templates/cards.handlebars index 828b5a0..61b9126 100644 --- a/client/templates/cards.handlebars +++ b/client/templates/cards.handlebars @@ -1,3 +1,8 @@ -
- +
+
+
+ +
+
+
\ No newline at end of file diff --git a/client/templates/modal.redraw.handlebars b/client/templates/modal.redraw.handlebars index 4a4052c..ee858b5 100644 --- a/client/templates/modal.redraw.handlebars +++ b/client/templates/modal.redraw.handlebars @@ -2,7 +2,7 @@

Choose up to 2 cards you wish to redraw!

READY
-
+
{{#each handCards as |val key|}} {{>card val}} {{/each}}