Last active
January 30, 2024 10:58
-
-
Save Tiberriver256/4268c96b1c90025bf9aa9570c7495f30 to your computer and use it in GitHub Desktop.
GistPad - Template (Basic - HTML/JS/CSS)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="playingCards fourColours faceImages"> | |
| <div class="card rank-7 spades"> | |
| <span class="rank"></span> | |
| <span class="suit"></span> | |
| </div> | |
| </div> | |
| <div class="playingCards faceImages"> | |
| <div class="card rank-7 diams"> | |
| <span class="rank"></span> | |
| <span class="suit"></span> | |
| </div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "scripts": [], | |
| "styles": [] | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Styles for CSS Playing Cards | |
| * | |
| * @author Anika Henke <anika@selfthinker.org> | |
| * @license CC BY-SA [http://creativecommons.org/licenses/by-sa/3.0] | |
| * @version 2011-06-14 | |
| * @link http://selfthinker.github.com/CSS-Playing-Cards/ | |
| */ | |
| /* card itself | |
| ********************************************************************/ | |
| .playingCards .card { | |
| display: inline-block; | |
| width: 3.3em; | |
| height: 4.6em; | |
| border: 1px solid #666; | |
| border-radius: 0.3em; | |
| -moz-border-radius: 0.3em; | |
| -webkit-border-radius: 0.3em; | |
| -khtml-border-radius: 0.3em; | |
| padding: 0.25em; | |
| margin: 0 0.5em 0.5em 0; | |
| text-align: center; | |
| font-size: 1.2em; /* @change: adjust this value to make bigger or smaller cards */ | |
| font-weight: normal; | |
| font-family: Arial, sans-serif; | |
| position: relative; | |
| background-color: #fff; | |
| -moz-box-shadow: 0.2em 0.2em 0.5em #333; | |
| -webkit-box-shadow: 0.2em 0.2em 0.5em #333; | |
| box-shadow: 0.2em 0.2em 0.5em #333; | |
| } | |
| .playingCards a.card { | |
| text-decoration: none; | |
| } | |
| /* selected and hover state */ | |
| .playingCards a.card:hover, | |
| .playingCards a.card:active, | |
| .playingCards a.card:focus, | |
| .playingCards label.card:hover, | |
| .playingCards strong .card { | |
| bottom: 1em; | |
| } | |
| .playingCards label.card { | |
| cursor: pointer; | |
| } | |
| .playingCards .card.back { | |
| text-indent: -4000px; | |
| background-color: #ccc; | |
| background-repeat: repeat; | |
| background-image: url(data:image/gif;base64,R0lGODlhJAAkAJEAAOjFsezdztOKbL5QKCH5BAAAAAAALAAAAAAkACQAAAL/HC4RAqm/mmLHyHmAbczB11Ea8ombJKSgKo6Z17pXFznmS1JptiX0z3vVhpEKDoUIkoa0olGIUeZUk1RI6Yn2mh/FDAt6frOrRRTqXPpsVLYugzxaVy+YcBdnoWPZOT0E4eckQtZFZBjWoHixQFWl6Nhol6R2p1Okt5TGaEWZA6fjiMdhZgPHeWrTWGVq+jTZg1HYyAEWKLYzmyiGKoUimilz+YYryyTlg5RcDJSAbNx0Q7lMcbIGEyzTK8zVdfVaImzs/QV+prYqWWW2ObkoOApM/Em/rUlIm7fijs8a2EEKEaZ3AsMUgneEU6RcpJbZ27aGHkAO2Ors8xQH1IR0Bn5YnOtVAAA7); /* image is "Pattern 069" from http://www.squidfingers.com/patterns/ */ | |
| background-image: -moz-repeating-linear-gradient( | |
| 34% 6% 135deg, | |
| #0f1e59, | |
| #75a1bf, | |
| #3e3e63 50% | |
| ); | |
| background-image: -webkit-gradient( | |
| radial, | |
| center center, | |
| 20, | |
| center center, | |
| 80, | |
| from(#3c3), | |
| color-stop(0.4, #363), | |
| to(#030) | |
| ); | |
| /* yes, it's intentional that Mozilla, Webkit, Opera and IE all will get different backgrounds ... why not? :) */ | |
| } | |
| /* suit colours | |
| ********************************************************************/ | |
| .playingCards .card.diams { | |
| color: #f00 !important; | |
| } | |
| .playingCards.fourColours .card.diams { | |
| color: #00f !important; | |
| } | |
| [lang='de'] .playingCards.fourColours .card.diams { | |
| color: #f60 !important; | |
| } | |
| .playingCards .card.hearts { | |
| color: #f00 !important; | |
| } | |
| .playingCards .card.spades { | |
| color: #000 !important; | |
| } | |
| [lang='de'] .playingCards.fourColours .card.spades { | |
| color: #090 !important; | |
| } | |
| .playingCards .card.clubs { | |
| color: #000 !important; | |
| } | |
| .playingCards.fourColours .card.clubs { | |
| color: #090 !important; | |
| } | |
| [lang='de'] .playingCards.fourColours .card.clubs { | |
| color: #000 !important; | |
| } | |
| .playingCards .card.joker { | |
| color: #000 !important; | |
| } | |
| .playingCards .card.joker.big { | |
| color: #f00 !important; | |
| } | |
| /* inner bits | |
| ********************************************************************/ | |
| /* top left main info (rank and suit) */ | |
| .playingCards .card .rank, | |
| .playingCards .card .suit { | |
| display: block; | |
| line-height: 1; | |
| text-align: left; | |
| } | |
| .playingCards .card.rank-7 .rank::before { | |
| content: '7'; | |
| } | |
| .playingCards .card.spades .suit::before { | |
| content: '\2660'; | |
| } | |
| .playingCards .card.diams .suit::before { | |
| content: '\2666'; | |
| } | |
| .playingCards .card .suit { | |
| line-height: 0.7; | |
| } | |
| /* checkbox */ | |
| .playingCards .card input { | |
| margin-top: -0.05em; | |
| font: inherit; | |
| } | |
| .playingCards.simpleCards .card input, | |
| .playingCards .card.rank-j input, | |
| .playingCards .card.rank-q input, | |
| .playingCards .card.rank-k input, | |
| .playingCards .card.rank-a input { | |
| margin-top: 2.4em; | |
| } | |
| .playingCards.inText .card input { | |
| margin-top: 0; | |
| } | |
| /* different rank letters for different languages */ | |
| .playingCards .card .rank:after, | |
| .playingCards .card.joker .rank:before { | |
| position: absolute; | |
| top: 0.25em; | |
| left: 0.25em; | |
| background: #fff; | |
| } | |
| [lang='de'] .playingCards .card.rank-j .rank:after { | |
| content: 'B'; | |
| } | |
| [lang='fr'] .playingCards .card.rank-j .rank:after { | |
| content: 'V'; | |
| } | |
| [lang='de'] .playingCards .card.rank-q .rank:after, | |
| [lang='fr'] .playingCards .card.rank-q .rank:after { | |
| content: 'D'; | |
| } | |
| [lang='fr'] .playingCards .card.rank-k .rank:after { | |
| content: 'R'; | |
| } | |
| /* joker (top left symbol) */ | |
| .playingCards .card.joker .rank { | |
| position: absolute; | |
| } | |
| .playingCards .card.joker .rank:before { | |
| content: '\2605'; | |
| top: 0; | |
| left: 0; | |
| } | |
| .playingCards .card.joker .suit { | |
| text-indent: -9999px; | |
| } | |
| /* inner multiple suits */ | |
| .playingCards .card .suit:after { | |
| display: block; | |
| margin-top: -0.8em; | |
| text-align: center; | |
| white-space: pre; | |
| line-height: 0.9; | |
| font-size: 1.3em; | |
| word-spacing: -0.05em; | |
| } | |
| /* make the hearts and clubs symbols fit, because they are a bit bigger than the others */ | |
| .playingCards .card.hearts .suit:after { | |
| word-spacing: -0.15em; | |
| } | |
| .playingCards .card.hearts.rank-10 .suit:after { | |
| word-spacing: -0.05em; | |
| letter-spacing: -0.1em; | |
| } | |
| .playingCards .card.clubs.rank-10 .suit:after { | |
| word-spacing: -0.15em; | |
| } | |
| /* 8, 9, 10 are the most crowded */ | |
| .playingCards .card.rank-8 .suit:after, | |
| .playingCards .card.rank-9 .suit:after { | |
| letter-spacing: -0.075em; | |
| } | |
| .playingCards .card.rank-10 .suit:after { | |
| letter-spacing: -0.1em; | |
| } | |
| .playingCards .card.clubs .suit:after { | |
| letter-spacing: -0.125em; | |
| } | |
| /*____________ symbols in the middle (suits, full) ____________*/ | |
| /* diamonds */ | |
| .playingCards .card.rank-2.diams .suit:after { | |
| content: '\2666 \A\A\2666'; | |
| } | |
| .playingCards .card.rank-3.diams .suit:after { | |
| content: '\2666 \A\2666 \A\2666'; | |
| } | |
| .playingCards .card.rank-4.diams .suit:after { | |
| content: '\2666\00A0\00A0\00A0\2666 \A\A\2666\00A0\00A0\00A0\2666'; | |
| } | |
| .playingCards .card.rank-5.diams .suit:after { | |
| content: '\2666\00A0\00A0\00A0\2666 \A\2666 \A\2666\00A0\00A0\00A0\2666'; | |
| } | |
| .playingCards .card.rank-6.diams .suit:after { | |
| content: '\2666\00A0\00A0\00A0\2666 \A\2666\00A0\00A0\00A0\2666 \A\2666\00A0\00A0\00A0\2666'; | |
| } | |
| .playingCards .card.rank-7.diams .suit:after { | |
| content: '\2666\00A0\00A0\2666 \A\2666\00A0\2666\00A0\2666 \A\2666\00A0\00A0\2666'; | |
| } | |
| .playingCards .card.rank-8.diams .suit:after { | |
| content: '\2666\00A0\2666\00A0\2666 \A\2666\00A0\00A0\2666 \A\2666\00A0\2666\00A0\2666'; | |
| } | |
| .playingCards .card.rank-9.diams .suit:after { | |
| content: '\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666'; | |
| } | |
| .playingCards .card.rank-10.diams .suit:after { | |
| content: '\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666'; | |
| } | |
| /* hearts */ | |
| .playingCards .card.rank-2.hearts .suit:after { | |
| content: '\2665 \A\A\2665'; | |
| } | |
| .playingCards .card.rank-3.hearts .suit:after { | |
| content: '\2665 \A\2665 \A\2665'; | |
| } | |
| .playingCards .card.rank-4.hearts .suit:after { | |
| content: '\2665\00A0\00A0\00A0\2665 \A\A\2665\00A0\00A0\00A0\2665'; | |
| } | |
| .playingCards .card.rank-5.hearts .suit:after { | |
| content: '\2665\00A0\00A0\00A0\2665 \A\2665 \A\2665\00A0\00A0\00A0\2665'; | |
| } | |
| .playingCards .card.rank-6.hearts .suit:after { | |
| content: '\2665\00A0\00A0\00A0\2665 \A\2665\00A0\00A0\00A0\2665 \A\2665\00A0\00A0\00A0\2665'; | |
| } | |
| .playingCards .card.rank-7.hearts .suit:after { | |
| content: '\2665\00A0\00A0\2665 \A\2665\00A0\2665\00A0\2665 \A\2665\00A0\00A0\2665'; | |
| } | |
| .playingCards .card.rank-8.hearts .suit:after { | |
| content: '\2665\00A0\2665\00A0\2665 \A\2665\00A0\00A0\2665 \A\2665\00A0\2665\00A0\2665'; | |
| } | |
| .playingCards .card.rank-9.hearts .suit:after { | |
| content: '\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665'; | |
| } | |
| .playingCards .card.rank-10.hearts .suit:after { | |
| content: '\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665'; | |
| } | |
| /* spades */ | |
| .playingCards .card.rank-2.spades .suit:after { | |
| content: '\2660 \A\A\2660'; | |
| } | |
| .playingCards .card.rank-3.spades .suit:after { | |
| content: '\2660 \A\2660 \A\2660'; | |
| } | |
| .playingCards .card.rank-4.spades .suit:after { | |
| content: '\2660\00A0\00A0\00A0\2660 \A\A\2660\00A0\00A0\00A0\2660'; | |
| } | |
| .playingCards .card.rank-5.spades .suit:after { | |
| content: '\2660\00A0\00A0\00A0\2660 \A\2660 \A\2660\00A0\00A0\00A0\2660'; | |
| } | |
| .playingCards .card.rank-6.spades .suit:after { | |
| content: '\2660\00A0\00A0\00A0\2660 \A\2660\00A0\00A0\00A0\2660 \A\2660\00A0\00A0\00A0\2660'; | |
| } | |
| .playingCards .card.rank-7.spades .suit:after { | |
| content: '\2660\00A0\00A0\2660 \A\2660\00A0\2660\00A0\2660 \A\2660\00A0\00A0\2660'; | |
| } | |
| .playingCards .card.rank-8.spades .suit:after { | |
| content: '\2660\00A0\2660\00A0\2660 \A\2660\00A0\00A0\2660 \A\2660\00A0\2660\00A0\2660'; | |
| } | |
| .playingCards .card.rank-9.spades .suit:after { | |
| content: '\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660'; | |
| } | |
| .playingCards .card.rank-10.spades .suit:after { | |
| content: '\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660'; | |
| } | |
| /* clubs */ | |
| .playingCards .card.rank-2.clubs .suit:after { | |
| content: '\2663 \A\A\2663'; | |
| } | |
| .playingCards .card.rank-3.clubs .suit:after { | |
| content: '\2663 \A\2663 \A\2663'; | |
| } | |
| .playingCards .card.rank-4.clubs .suit:after { | |
| content: '\2663\00A0\00A0\00A0\2663 \A\A\2663\00A0\00A0\00A0\2663'; | |
| } | |
| .playingCards .card.rank-5.clubs .suit:after { | |
| content: '\2663\00A0\00A0\00A0\2663 \A\2663 \A\2663\00A0\00A0\00A0\2663'; | |
| } | |
| .playingCards .card.rank-6.clubs .suit:after { | |
| content: '\2663\00A0\00A0\00A0\2663 \A\2663\00A0\00A0\00A0\2663 \A\2663\00A0\00A0\00A0\2663'; | |
| } | |
| .playingCards .card.rank-7.clubs .suit:after { | |
| content: '\2663\00A0\00A0\2663 \A\2663\00A0\2663\00A0\2663 \A\2663\00A0\00A0\2663'; | |
| } | |
| .playingCards .card.rank-8.clubs .suit:after { | |
| content: '\2663\00A0\2663\00A0\2663 \A\2663\00A0\00A0\2663 \A\2663\00A0\2663\00A0\2663'; | |
| } | |
| .playingCards .card.rank-9.clubs .suit:after { | |
| content: '\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663'; | |
| } | |
| .playingCards .card.rank-10.clubs .suit:after { | |
| content: '\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663'; | |
| } | |
| /*____________ symbols in the middle (faces as images) ____________*/ | |
| .playingCards.faceImages .card.rank-j .suit:after, | |
| .playingCards.faceImages .card.rank-q .suit:after, | |
| .playingCards.faceImages .card.rank-k .suit:after { | |
| content: ''; | |
| } | |
| .playingCards.faceImages .card.rank-j, | |
| .playingCards.faceImages .card.rank-q, | |
| .playingCards.faceImages .card.rank-k, | |
| .playingCards.faceImages .card.joker { | |
| background-repeat: no-repeat; | |
| background-position: -1em 0; | |
| /* @change: smaller cards: more negative distance from the left | |
| bigger cards: 0 or more positive distance from the left */ | |
| /* for a centered full background image: | |
| background-position: .35em 0; | |
| -moz-background-size: contain; | |
| -o-background-size: contain; | |
| -webkit-background-size: contain; | |
| -khtml-background-size: contain; | |
| background-size: contain; | |
| */ | |
| } | |
| .playingCards.faceImages .card.rank-j.diams { | |
| background-image: url(faces/JD.gif); | |
| } | |
| .playingCards.faceImages .card.rank-j.hearts { | |
| background-image: url(faces/JH.gif); | |
| } | |
| .playingCards.faceImages .card.rank-j.spades { | |
| background-image: url(faces/JS.gif); | |
| } | |
| .playingCards.faceImages .card.rank-j.clubs { | |
| background-image: url(faces/JC.gif); | |
| } | |
| .playingCards.faceImages .card.rank-q.diams { | |
| background-image: url(faces/QD.gif); | |
| } | |
| .playingCards.faceImages .card.rank-q.hearts { | |
| background-image: url(faces/QH.gif); | |
| } | |
| .playingCards.faceImages .card.rank-q.spades { | |
| background-image: url(faces/QS.gif); | |
| } | |
| .playingCards.faceImages .card.rank-q.clubs { | |
| background-image: url(faces/QC.gif); | |
| } | |
| .playingCards.faceImages .card.rank-k.diams { | |
| background-image: url(faces/KD.gif); | |
| } | |
| .playingCards.faceImages .card.rank-k.hearts { | |
| background-image: url(faces/KH.gif); | |
| } | |
| .playingCards.faceImages .card.rank-k.spades { | |
| background-image: url(faces/KS.gif); | |
| } | |
| .playingCards.faceImages .card.rank-k.clubs { | |
| background-image: url(faces/KC.gif); | |
| } | |
| .playingCards.faceImages .card.joker { | |
| background-image: url(faces/joker.gif); | |
| } | |
| .playingCards.simpleCards .card.rank-j, | |
| .playingCards.simpleCards .card.rank-q, | |
| .playingCards.simpleCards .card.rank-k { | |
| background-image: none !important; | |
| } | |
| /*____________ symbols in the middle (faces as dingbat symbols) ____________*/ | |
| .playingCards.simpleCards .card .suit:after, | |
| .playingCards .card.rank-j .suit:after, | |
| .playingCards .card.rank-q .suit:after, | |
| .playingCards .card.rank-k .suit:after, | |
| .playingCards .card.rank-a .suit:after, | |
| .playingCards .card.joker .rank:after { | |
| font-family: Georgia, serif; | |
| position: absolute; | |
| font-size: 3em; | |
| right: 0.1em; | |
| bottom: 0.25em; | |
| word-spacing: normal; | |
| letter-spacing: normal; | |
| line-height: 1; | |
| } | |
| .playingCards .card.rank-j .suit:after { | |
| content: '\265F'; | |
| right: 0.15em; | |
| } | |
| .playingCards .card.rank-q .suit:after { | |
| content: '\265B'; | |
| } | |
| .playingCards .card.rank-k .suit:after { | |
| content: '\265A'; | |
| } | |
| /* joker (inner symbol) */ | |
| .playingCards.faceImages .card.joker .rank:after { | |
| content: ''; | |
| } | |
| .playingCards .card.joker .rank:after { | |
| position: absolute; | |
| content: '\2766'; | |
| top: 0.4em; | |
| left: 0.1em; | |
| } | |
| /* big suits in middle */ | |
| .playingCards.simpleCards .card .suit:after, | |
| .playingCards .card.rank-a .suit:after { | |
| font-family: Arial, sans-serif; | |
| line-height: 0.9; | |
| bottom: 0.35em; | |
| } | |
| .playingCards.simpleCards .card.diams .suit:after, | |
| .playingCards .card.rank-a.diams .suit:after { | |
| content: '\2666'; | |
| right: 0.4em; | |
| } | |
| .playingCards.simpleCards .card.hearts .suit:after, | |
| .playingCards .card.rank-a.hearts .suit:after { | |
| content: '\2665'; | |
| right: 0.35em; | |
| } | |
| .playingCards.simpleCards .card.spades .suit:after, | |
| .playingCards .card.rank-a.spades .suit:after { | |
| content: '\2660'; | |
| right: 0.35em; | |
| } | |
| .playingCards.simpleCards .card.clubs .suit:after, | |
| .playingCards .card.rank-a.clubs .suit:after { | |
| content: '\2663'; | |
| right: 0.3em; | |
| } | |
| /*____________ smaller cards for use inside text ____________*/ | |
| .playingCards.inText .card { | |
| font-size: 0.4em; | |
| vertical-align: middle; | |
| } | |
| .playingCards.inText .card span.rank, | |
| .playingCards.inText .card span.suit { | |
| text-align: center; | |
| } | |
| .playingCards.inText .card span.rank { | |
| font-size: 2em; | |
| margin-top: 0.2em; | |
| } | |
| .playingCards.inText .card span.suit { | |
| font-size: 2.5em; | |
| } | |
| .playingCards.inText .card .suit:after, | |
| .playingCards.inText .card.joker .rank:after { | |
| content: '' !important; | |
| } | |
| .playingCards.inText .card .rank:after { | |
| left: 0.5em; | |
| padding: 0 0.1em; | |
| } | |
| /* hand (in your hand or on table or as a deck) | |
| ********************************************************************/ | |
| .playingCards ul.table, | |
| .playingCards ul.hand, | |
| .playingCards ul.deck { | |
| list-style-type: none; | |
| padding: 0; | |
| margin: 0 0 1.5em 0; | |
| position: relative; | |
| clear: both; | |
| } | |
| .playingCards ul.hand { | |
| margin-bottom: 3.5em; | |
| } | |
| .playingCards ul.table li, | |
| .playingCards ul.hand li, | |
| .playingCards ul.deck li { | |
| margin: 0; | |
| padding: 0; | |
| list-style-type: none; | |
| float: left; | |
| } | |
| .playingCards ul.hand, | |
| .playingCards ul.deck { | |
| height: 8em; | |
| } | |
| .playingCards ul.hand li, | |
| .playingCards ul.deck li { | |
| position: absolute; | |
| } | |
| .playingCards ul.hand li { | |
| bottom: 0; | |
| } | |
| .playingCards ul.hand li:nth-child(1) { | |
| left: 0; | |
| } | |
| .playingCards ul.hand li:nth-child(2) { | |
| left: 1.1em; | |
| } | |
| .playingCards ul.hand li:nth-child(3) { | |
| left: 2.2em; | |
| } | |
| .playingCards ul.hand li:nth-child(4) { | |
| left: 3.3em; | |
| } | |
| .playingCards ul.hand li:nth-child(5) { | |
| left: 4.4em; | |
| } | |
| .playingCards ul.hand li:nth-child(6) { | |
| left: 5.5em; | |
| } | |
| .playingCards ul.hand li:nth-child(7) { | |
| left: 6.6em; | |
| } | |
| .playingCards ul.hand li:nth-child(8) { | |
| left: 7.7em; | |
| } | |
| .playingCards ul.hand li:nth-child(9) { | |
| left: 8.8em; | |
| } | |
| .playingCards ul.hand li:nth-child(10) { | |
| left: 9.9em; | |
| } | |
| .playingCards ul.hand li:nth-child(11) { | |
| left: 11em; | |
| } | |
| .playingCards ul.hand li:nth-child(12) { | |
| left: 12.1em; | |
| } | |
| .playingCards ul.hand li:nth-child(13) { | |
| left: 13.2em; | |
| } | |
| .playingCards ul.hand li:nth-child(14) { | |
| left: 14.3em; | |
| } | |
| .playingCards ul.hand li:nth-child(15) { | |
| left: 15.4em; | |
| } | |
| .playingCards ul.hand li:nth-child(16) { | |
| left: 16.5em; | |
| } | |
| .playingCards ul.hand li:nth-child(17) { | |
| left: 17.6em; | |
| } | |
| .playingCards ul.hand li:nth-child(18) { | |
| left: 18.7em; | |
| } | |
| .playingCards ul.hand li:nth-child(19) { | |
| left: 19.8em; | |
| } | |
| .playingCards ul.hand li:nth-child(20) { | |
| left: 20.9em; | |
| } | |
| .playingCards ul.hand li:nth-child(21) { | |
| left: 22em; | |
| } | |
| .playingCards ul.hand li:nth-child(22) { | |
| left: 23.1em; | |
| } | |
| .playingCards ul.hand li:nth-child(23) { | |
| left: 24.2em; | |
| } | |
| .playingCards ul.hand li:nth-child(24) { | |
| left: 25.3em; | |
| } | |
| .playingCards ul.hand li:nth-child(25) { | |
| left: 26.4em; | |
| } | |
| .playingCards ul.hand li:nth-child(26) { | |
| left: 27.5em; | |
| } | |
| /* rotate cards if rotateHand option is on */ | |
| .playingCards.rotateHand ul.hand li:nth-child(1) { | |
| -moz-transform: translate(1.9em, 0.9em) rotate(-42deg); | |
| -webkit-transform: translate(1.9em, 0.9em) rotate(-42deg); | |
| -o-transform: translate(1.9em, 0.9em) rotate(-42deg); | |
| transform: translate(1.9em, 0.9em) rotate(-42deg); | |
| } | |
| .playingCards.rotateHand ul.hand li:nth-child(2) { | |
| -moz-transform: translate(1.5em, 0.5em) rotate(-33deg); | |
| -webkit-transform: translate(1.5em, 0.5em) rotate(-33deg); | |
| -o-transform: translate(1.5em, 0.5em) rotate(-33deg); | |
| transform: translate(1.5em, 0.5em) rotate(-33deg); | |
| } | |
| .playingCards.rotateHand ul.hand li:nth-child(3) { | |
| -moz-transform: translate(1.1em, 0.3em) rotate(-24deg); | |
| -webkit-transform: translate(1.1em, 0.3em) rotate(-24deg); | |
| -o-transform: translate(1.1em, 0.3em) rotate(-24deg); | |
| transform: translate(1.1em, 0.3em) rotate(-24deg); | |
| } | |
| .playingCards.rotateHand ul.hand li:nth-child(4) { | |
| -moz-transform: translate(0.7em, 0.2em) rotate(-15deg); | |
| -webkit-transform: translate(0.7em, 0.2em) rotate(-15deg); | |
| -o-transform: translate(0.7em, 0.2em) rotate(-15deg); | |
| transform: translate(0.7em, 0.2em) rotate(-15deg); | |
| } | |
| .playingCards.rotateHand ul.hand li:nth-child(5) { | |
| -moz-transform: translate(0.3em, 0.1em) rotate(-6deg); | |
| -webkit-transform: translate(0.3em, 0.1em) rotate(-6deg); | |
| -o-transform: translate(0.3em, 0.1em) rotate(-6deg); | |
| transform: translate(0.3em, 0.1em) rotate(-6deg); | |
| } | |
| .playingCards.rotateHand ul.hand li:nth-child(6) { | |
| -moz-transform: translate(-0.1em, 0.1em) rotate(3deg); | |
| -webkit-transform: translate(-0.1em, 0.1em) rotate(3deg); | |
| -o-transform: translate(-0.1em, 0.1em) rotate(3deg); | |
| transform: translate(-0.1em, 0.1em) rotate(3deg); | |
| } | |
| .playingCards.rotateHand ul.hand li:nth-child(7) { | |
| -moz-transform: translate(-0.5em, 0.2em) rotate(12deg); | |
| -webkit-transform: translate(-0.5em, 0.2em) rotate(12deg); | |
| -o-transform: translate(-0.5em, 0.2em) rotate(12deg); | |
| transform: translate(-0.5em, 0.2em) rotate(12deg); | |
| } | |
| .playingCards.rotateHand ul.hand li:nth-child(8) { | |
| -moz-transform: translate(-0.9em, 0.3em) rotate(21deg); | |
| -webkit-transform: translate(-0.9em, 0.3em) rotate(21deg); | |
| -o-transform: translate(-0.9em, 0.3em) rotate(21deg); | |
| transform: translate(-0.9em, 0.3em) rotate(21deg); | |
| } | |
| .playingCards.rotateHand ul.hand li:nth-child(9) { | |
| -moz-transform: translate(-1.3em, 0.6em) rotate(30deg); | |
| -webkit-transform: translate(-1.3em, 0.6em) rotate(30deg); | |
| -o-transform: translate(-1.3em, 0.6em) rotate(30deg); | |
| transform: translate(-1.3em, 0.6em) rotate(30deg); | |
| } | |
| .playingCards.rotateHand ul.hand li:nth-child(10) { | |
| -moz-transform: translate(-1.7em, 1em) rotate(39deg); | |
| -webkit-transform: translate(-1.7em, 1em) rotate(39deg); | |
| -o-transform: translate(-1.7em, 1em) rotate(39deg); | |
| transform: translate(-1.7em, 1em) rotate(39deg); | |
| } | |
| .playingCards.rotateHand ul.hand li:nth-child(11) { | |
| -moz-transform: translate(-2.2em, 1.5em) rotate(48deg); | |
| -webkit-transform: translate(-2.2em, 1.5em) rotate(48deg); | |
| -o-transform: translate(-2.2em, 1.5em) rotate(48deg); | |
| transform: translate(-2.2em, 1.5em) rotate(48deg); | |
| } | |
| .playingCards.rotateHand ul.hand li:nth-child(12) { | |
| -moz-transform: translate(-2.8em, 2.1em) rotate(57deg); | |
| -webkit-transform: translate(-2.8em, 2.1em) rotate(57deg); | |
| -o-transform: translate(-2.8em, 2.1em) rotate(57deg); | |
| transform: translate(-2.8em, 2.1em) rotate(57deg); | |
| } | |
| .playingCards.rotateHand ul.hand li:nth-child(13) { | |
| -moz-transform: translate(-3.5em, 2.8em) rotate(66deg); | |
| -webkit-transform: translate(-3.5em, 2.8em) rotate(66deg); | |
| -o-transform: translate(-3.5em, 2.8em) rotate(66deg); | |
| transform: translate(-3.5em, 2.8em) rotate(66deg); | |
| } | |
| /* deck */ | |
| .playingCards ul.deck li:nth-child(1) { | |
| left: 0; | |
| bottom: 0; | |
| } | |
| .playingCards ul.deck li:nth-child(2) { | |
| left: 2px; | |
| bottom: 1px; | |
| } | |
| .playingCards ul.deck li:nth-child(3) { | |
| left: 4px; | |
| bottom: 2px; | |
| } | |
| .playingCards ul.deck li:nth-child(4) { | |
| left: 6px; | |
| bottom: 3px; | |
| } | |
| .playingCards ul.deck li:nth-child(5) { | |
| left: 8px; | |
| bottom: 4px; | |
| } | |
| .playingCards ul.deck li:nth-child(6) { | |
| left: 10px; | |
| bottom: 5px; | |
| } | |
| .playingCards ul.deck li:nth-child(7) { | |
| left: 12px; | |
| bottom: 6px; | |
| } | |
| .playingCards ul.deck li:nth-child(8) { | |
| left: 14px; | |
| bottom: 7px; | |
| } | |
| .playingCards ul.deck li:nth-child(9) { | |
| left: 16px; | |
| bottom: 8px; | |
| } | |
| .playingCards ul.deck li:nth-child(10) { | |
| left: 18px; | |
| bottom: 9px; | |
| } | |
| .playingCards ul.deck li:nth-child(11) { | |
| left: 20px; | |
| bottom: 10px; | |
| } | |
| .playingCards ul.deck li:nth-child(12) { | |
| left: 22px; | |
| bottom: 11px; | |
| } | |
| .playingCards ul.deck li:nth-child(13) { | |
| left: 24px; | |
| bottom: 12px; | |
| } | |
| .playingCards ul.deck li:nth-child(14) { | |
| left: 26px; | |
| bottom: 13px; | |
| } | |
| .playingCards ul.deck li:nth-child(15) { | |
| left: 28px; | |
| bottom: 14px; | |
| } | |
| .playingCards ul.deck li:nth-child(16) { | |
| left: 30px; | |
| bottom: 15px; | |
| } | |
| .playingCards ul.deck li:nth-child(17) { | |
| left: 32px; | |
| bottom: 16px; | |
| } | |
| .playingCards ul.deck li:nth-child(18) { | |
| left: 34px; | |
| bottom: 17px; | |
| } | |
| .playingCards ul.deck li:nth-child(19) { | |
| left: 36px; | |
| bottom: 18px; | |
| } | |
| .playingCards ul.deck li:nth-child(20) { | |
| left: 38px; | |
| bottom: 19px; | |
| } | |
| .playingCards ul.deck li:nth-child(21) { | |
| left: 40px; | |
| bottom: 20px; | |
| } | |
| .playingCards ul.deck li:nth-child(22) { | |
| left: 42px; | |
| bottom: 21px; | |
| } | |
| .playingCards ul.deck li:nth-child(23) { | |
| left: 44px; | |
| bottom: 22px; | |
| } | |
| .playingCards ul.deck li:nth-child(24) { | |
| left: 46px; | |
| bottom: 23px; | |
| } | |
| .playingCards ul.deck li:nth-child(25) { | |
| left: 48px; | |
| bottom: 24px; | |
| } | |
| .playingCards ul.deck li:nth-child(26) { | |
| left: 50px; | |
| bottom: 25px; | |
| } | |
| .playingCards ul.deck li:nth-child(27) { | |
| left: 52px; | |
| bottom: 26px; | |
| } | |
| .playingCards ul.deck li:nth-child(28) { | |
| left: 54px; | |
| bottom: 27px; | |
| } | |
| .playingCards ul.deck li:nth-child(29) { | |
| left: 56px; | |
| bottom: 28px; | |
| } | |
| .playingCards ul.deck li:nth-child(30) { | |
| left: 58px; | |
| bottom: 29px; | |
| } | |
| .playingCards ul.deck li:nth-child(31) { | |
| left: 60px; | |
| bottom: 30px; | |
| } | |
| .playingCards ul.deck li:nth-child(32) { | |
| left: 62px; | |
| bottom: 31px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment