mirror of
https://github.com/kmitresse/Cards-Rush.git
synced 2026-07-09 13:27:45 +00:00
Lucàs
158 lines
3.4 KiB
CSS
158 lines
3.4 KiB
CSS
body {
|
|
background: gray;
|
|
}
|
|
|
|
.card-play {
|
|
position: relative;
|
|
aspect-ratio: 2/3;
|
|
width: 150px;
|
|
background: #F8FAFC;
|
|
border-radius: 20px;
|
|
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 60%;
|
|
}
|
|
|
|
.card-play::before, .card-play::after {
|
|
content: "";
|
|
position: absolute;
|
|
aspect-ratio: 1/1;
|
|
width: 25%;
|
|
background-size: contain;
|
|
}
|
|
|
|
.card-play::before {
|
|
top: 10px;
|
|
left: 10px;
|
|
}
|
|
|
|
.card-play::after {
|
|
bottom: 10px;
|
|
right: 10px;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* Colors */
|
|
|
|
.spades {
|
|
background-image: url("../img/color/spade.svg");
|
|
}
|
|
|
|
.heart {
|
|
background-image: url("../img/color/heart.svg");
|
|
}
|
|
|
|
.diamonds {
|
|
background-image: url("../img/color/diamond.svg");
|
|
}
|
|
|
|
.clubs {
|
|
background-image: url("../img/color/club.svg");
|
|
}
|
|
|
|
/* Values */
|
|
.red_ace::before, .red_ace::after {
|
|
background-image: url("../img/value/red_ace.svg");
|
|
}
|
|
|
|
.black_ace::before, .black_ace::after {
|
|
background-image: url("../img/value/black_ace.svg");
|
|
}
|
|
|
|
.red_two::before, .red_two::after {
|
|
background-image: url("../img/value/red_two.svg");
|
|
}
|
|
|
|
.black_two::before, .black_two::after {
|
|
background-image: url("../img/value/black_two.svg");
|
|
}
|
|
|
|
.red_three::before, .red_three::after {
|
|
background-image: url("../img/value/red_three.svg");
|
|
}
|
|
|
|
.black_three::before, .black_three::after {
|
|
background-image: url("../img/value/black_three.svg");
|
|
}
|
|
|
|
.red_four::before, .red_four::after {
|
|
background-image: url("../img/value/red_four.svg");
|
|
}
|
|
|
|
.black_four::before, .black_four::after {
|
|
background-image: url("../img/value/black_four.svg");
|
|
}
|
|
|
|
.red_five::before, .red_five::after {
|
|
background-image: url("../img/value/red_five.svg");
|
|
}
|
|
|
|
.black_five::before, .black_five::after {
|
|
background-image: url("../img/value/black_five.svg");
|
|
}
|
|
|
|
.red_six::before, .red_six::after {
|
|
background-image: url("../img/value/red_six.svg");
|
|
}
|
|
|
|
.black_six::before, .black_six::after {
|
|
background-image: url("../img/value/black_six.svg");
|
|
}
|
|
|
|
.red_seven::before, .red_seven::after {
|
|
background-image: url("../img/value/red_seven.svg");
|
|
}
|
|
|
|
.black_seven::before, .black_seven::after {
|
|
background-image: url("../img/value/black_seven.svg");
|
|
}
|
|
|
|
.red_eight::before, .red_eight::after {
|
|
background-image: url("../img/value/red_eight.svg");
|
|
}
|
|
|
|
.black_eight::before, .black_eight::after {
|
|
background-image: url("../img/value/black_eight.svg");
|
|
}
|
|
|
|
.red_nine::before, .red_nine::after {
|
|
background-image: url("../img/value/red_nine.svg");
|
|
}
|
|
|
|
.black_nine::before, .black_nine::after {
|
|
background-image: url("../img/value/black_nine.svg");
|
|
}
|
|
|
|
.red_ten::before, .red_ten::after {
|
|
background-image: url("../img/value/red_ten.svg");
|
|
}
|
|
|
|
.black_ten::before, .black_ten::after {
|
|
background-image: url("../img/value/black_ten.svg");
|
|
}
|
|
|
|
.red_jack::before, .red_jack::after {
|
|
background-image: url("../img/value/red_jack.svg");
|
|
}
|
|
|
|
.black_jack::before, .black_jack::after {
|
|
background-image: url("../img/value/black_jack.svg");
|
|
}
|
|
|
|
.red_queen::before, .red_queen::after {
|
|
background-image: url("../img/value/red_queen.svg");
|
|
}
|
|
|
|
.black_queen::before, .black_queen::after {
|
|
background-image: url("../img/value/black_queen.svg");
|
|
}
|
|
|
|
.red_king::before, .red_king::after {
|
|
background-image: url("../img/value/red_king.svg");
|
|
}
|
|
|
|
.black_king::before, .black_king::after {
|
|
background-image: url("../img/value/black_king.svg");
|
|
}
|