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
|
@import "variables";
#head {
display: block;
height: $head_height;
margin: 0;
padding: 0;
overflow:scroll;
}
@media screen and (max-width: $screen-transition-width) {
#head {
height: $head_height_mob;
margin-top: calc(#{$head_top_vh} - #{$head_top_vw});
}
}
@mixin player-image {
position: absolute;
display: inline-block;
z-index: 1;
height: $head_height * 0.6;
margin: $head_height * 0.2;
top: 0;
}
img.player-image-left {
left: calc(50% - #{$board_size / 2 + $board_border});
@include player-image;
}
img.player-image-right {
left: calc(50% + #{$board_size / 2 + $board_border - $head_height});
@include player-image;
}
@media screen and (max-width: $screen-transition-width) {
@mixin player-image-mob {
height: $head_height_mob * 0.4;
margin: $head_height_mob * 0.3;
top: calc(#{$head_top_vh} - #{$head_top_vw});
}
img.player-image-left {
left: calc(50% - #{$board_size_mob / 2 + $board_border_mob + $label_width_mob * 0.3});
@include player-image-mob;
}
img.player-image-right {
left: calc(50% + #{$board_size_mob / 2 + $board_border_mob - $head_height_mob + $label_width_mob * 0.3});
@include player-image-mob;
}
}
.turn {
width: 20vh;
height: $label_height;
margin: 0 auto;
margin-top: calc(#{$head_height / 2} - #{$label_height});
background-color: black;
clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
}
.turn h2 {
font-size: $label_height - 1;
}
.turn .border {
height: $label_height;
margin: 0 auto;
margin-top: 4vh;
background-color: black;
clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
}
.turn .inner {
height:100%;
width: 100%;
text-align: center;
background-color: $background-color;
clip-path: polygon(7% 10%, 93% 10%, 97% 50%, 93% 90%, 7% 90%, 3% 50%);
}
@mixin player-label {
width: $label_width;
height: $label_height;
font-size: 3vh;
text-align: center;
background-color: #000b;
color: white;
position: absolute;
top: calc(#{$head_height / 2 - $label_height / 2});
}
div.player-label-left {
clip-path: polygon(0 0, 0 100%, 90% 100%, 100% 0%);
left: calc(50% - #{$board_size / 2 + $board_border - $label_width * $label_margin});
@include player-label;
}
div.player-label-right {
clip-path: polygon(100% 0, 100% 100%, 10% 100%, 0% 0%);
left: calc(50% + #{$board_size / 2 + $board_border - $label_width * ($label_margin + 1)});
@include player-label;
}
@media screen and (max-width: $screen-transition-width) {
@mixin player-label-mob {
width: $label_width_mob;
height: $label_height_mob;
font-size: $label_height_mob - 1;
top: #{calc(#{$head_top_vh} - #{$head_top_vw} + #{$head_height_mob / 2} - #{$label_height_mob / 2})};
}
div.player-label-left {
left: calc(50% - #{$board_size_mob / 2 + $board_border_mob - $label_width_mob * $label_margin_mob});
@include player-label-mob;
}
div.player-label-right {
left: calc(50% + #{$board_size_mob / 2 + $board_border_mob} - #{$label_width_mob * ($label_margin_mob + 1)});
@include player-label-mob;
}
}
|
