forked from bubububaoshe/bubububaoshe.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
decks.css
132 lines (125 loc) · 5.29 KB
/
decks.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
/* z-index */
#hand0>.charcontainer:nth-child(1), #pool>.charcontainer:nth-child(1), #hand1>.charcontainer:nth-child(1){
z-index: 10;
}
#hand0>.charcontainer:nth-child(2), #pool>.charcontainer:nth-child(2), #hand1>.charcontainer:nth-child(2){
z-index: 9;
}
#hand0>.charcontainer:nth-child(3), #pool>.charcontainer:nth-child(3), #hand1>.charcontainer:nth-child(3){
z-index: 8;
}
#hand0>.charcontainer:nth-child(4), #pool>.charcontainer:nth-child(4), #hand1>.charcontainer:nth-child(4){
z-index: 7;
}
#hand0>.charcontainer:nth-child(5), #pool>.charcontainer:nth-child(5), #hand1>.charcontainer:nth-child(5){
z-index: 6;
}
#hand0>.charcontainer:nth-child(6), #pool>.charcontainer:nth-child(6), #hand1>.charcontainer:nth-child(6){
z-index: 5;
}
#hand0>.charcontainer:nth-child(7), #pool>.charcontainer:nth-child(7), #hand1>.charcontainer:nth-child(7){
z-index: 4;
}
#hand0>.charcontainer:nth-child(8), #pool>.charcontainer:nth-child(8), #hand1>.charcontainer:nth-child(8){
z-index: 3;
}
#hand0>.charcontainer:nth-child(9), #pool>.charcontainer:nth-child(9), #hand1>.charcontainer:nth-child(9){
z-index: 2;
}
#hand0>.charcontainer:nth-child(10), #pool>.charcontainer:nth-child(10), #hand1>.charcontainer:nth-child(10){
z-index: 1;
}
/* flip */
#pool .card, #hand1 .card, #table0 .card, #table1 .card, #specials1 .card, .faceup .card{
transform: rotateY(180deg);
}
/* array positioning */
.cardstack>.charcontainer, #repository>.charcontainer {
position: absolute;
}
#hand0>.charcontainer, #pool>.charcontainer, #hand1>.charcontainer{
position: relative;
float: left;
}
#hand0>.charcontainer:not(:first-child), #hand1>.charcontainer:not(:first-child){
margin-left: calc(var(--card-width)*-0.44);
}
#pool>.charcontainer:not(:first-child){
margin-left: var(--pool-margin);
}
/* repository deck effect */
#repository .charcontainer:nth-child(n+5) .cardback{
box-shadow: none;
}
#repository .charcontainer:first-child){
left: calc(var(--card-width) / 4);
top: calc(var(--card-height) /30);
}
#repository .charcontainer:nth-child(2){
left: calc(var(--card-width) / 4 * 0.67);
top: calc(var(--card-height) /30 * 0.67);
}
#repository .charcontainer:nth-child(3){
left: calc(var(--card-width) / 4 * 0.33);
top: calc(var(--card-height) /30 * 0.33);
}
/* hand0, hand1, pool top-variance */
#hand0>.charcontainer:nth-child(odd), #hand1>.charcontainer:nth-child(odd){
top: 1px;
}
#hand0>.charcontainer:nth-child(even), #hand1>.charcontainer:nth-child(even){
top: -1px;
}
#pool>.charcontainer:nth-child(odd){
top: calc(var(--card-height)/8);
}
#pool>.charcontainer:nth-child(even){
top: calc(var(--card-height)/-8);
}
/* pool card rotation */
#pool>.charcontainer:nth-child(2)>.cardcontainer{transform: rotate(-15deg);}
#pool>.charcontainer:nth-child(4)>.cardcontainer{transform: rotate(-5deg);}
#pool>.charcontainer:nth-child(6)>.cardcontainer{transform: rotate(3deg);}
#pool>.charcontainer:nth-child(8)>.cardcontainer{transform: rotate(-9deg);}
#pool>.charcontainer:nth-child(10)>.cardcontainer{transform: rotate(5deg);}
#pool>.charcontainer:nth-child(1)>.cardcontainer{transform: rotate(8deg);}
#pool>.charcontainer:nth-child(3)>.cardcontainer{transform: rotate(-12deg);}
#pool>.charcontainer:nth-child(5)>.cardcontainer{transform: rotate(12deg);}
#pool>.charcontainer:nth-child(7)>.cardcontainer{transform: rotate(25deg);}
#pool>.charcontainer:nth-child(9)>.cardcontainer{transform: rotate(-6deg);}
/* table & sp card rotation: only rotate the last 5 */
#table0>.charcontainer:nth-last-child(1)>.cardcontainer,#table1>.charcontainer:nth-last-child(5)>.cardcontainer, #specials0>.charcontainer:nth-last-child(3)>.cardcontainer,#specials1>.charcontainer:nth-last-child(2)>.cardcontainer {
transform: rotate(-15deg);
top: -4%;
left: 4%;
}
#table0>.charcontainer:nth-last-child(2)>.cardcontainer,#table1>.charcontainer:nth-last-child(4)>.cardcontainer, #specials0>.charcontainer:nth-last-child(5)>.cardcontainer,#specials1>.charcontainer:nth-last-child(3)>.cardcontainer {
transform: rotate(25deg);
top: 2%;
left: 4%;
}
#table0>.charcontainer:nth-last-child(3)>.cardcontainer,#table1>.charcontainer:nth-last-child(3)>.cardcontainer, #specials0>.charcontainer:nth-last-child(1)>.cardcontainer,#specials1>.charcontainer:nth-last-child(5)>.cardcontainer {
transform: rotate(-21deg);
top: 3%;
left: -3%;
}
#table0>.charcontainer:nth-last-child(4)>.cardcontainer,#table1>.charcontainer:nth-last-child(2)>.cardcontainer, #specials0>.charcontainer:nth-last-child(4)>.cardcontainer,#specials1>.charcontainer:nth-last-child(1)>.cardcontainer {
transform: rotate(13deg);
top: -2%;
left: 7%;
}
#table0>.charcontainer:nth-last-child(5)>.cardcontainer,#table1>.charcontainer:nth-last-child(1)>.cardcontainer, #specials0>.charcontainer:nth-last-child(2)>.cardcontainer,#specials1>.charcontainer:nth-last-child(4)>.cardcontainer {
transform: rotate(6deg);
top: 5%;
left: -7%;
}
/* hover effects */
#pool>.charcontainer:hover>.cardcontainer, #hand1>.charcontainer:hover>.cardcontainer{
transform: translate(0, calc(var(--card-height)/-3));
}
#table0>.charcontainer:hover>.cardcontainer, #table1>.charcontainer:hover>.cardcontainer, #specials1>.charcontainer:hover>.cardcontainer{
transform: translate(0, calc(var(--card-height)/-4));
}
#pool>.charcontainer:nth-child(odd)>.cardcontainer:hover {
transform: translate(0, calc(var(--card-height)/3));
}