diff --git a/Public/schafkopf.html b/Public/schafkopf.html
index 940a6b6..3fc0613 100644
--- a/Public/schafkopf.html
+++ b/Public/schafkopf.html
@@ -58,15 +58,17 @@
-
diff --git a/Public/style.css b/Public/style.css
index 6b6c19f..1a08fc6 100644
--- a/Public/style.css
+++ b/Public/style.css
@@ -100,7 +100,7 @@ body {
height: 50px;
background-color: var(--element-background);
padding: 0px;
- z-index: 1;
+ z-index: 5;
width: 100%;
position: absolute;
}
@@ -296,10 +296,10 @@ body {
margin-top: 10px;
margin-left: auto;
margin-right: auto;
- width: 949px;
- height: 409px;
- grid-template-columns: 150px 200px 71px 36px 35px 36px 71px 200px 150px;
- grid-template-rows: 111px 76px 35px 76px 111px;
+ width: 649px;
+ height: 389px;
+ grid-template-columns: 200px 71px 36px 35px 36px 71px 200px;
+ grid-template-rows: 101px 86px 15px 86px 101px;
column-gap: 0px;
row-gap: 0px;
align-items: center;
@@ -312,31 +312,31 @@ body {
}
#table-player-card-bottom {
- grid-column: 4 / span 3;
+ grid-column: 3 / span 3;
grid-row: 4 / span 2;
z-index: 2;
}
#table-player-card-left {
- grid-column: 3 / span 2;
+ grid-column: 2 / span 2;
grid-row: 2 / span 3;
z-index: 1;
}
#table-player-card-top {
- grid-column: 4 / span 3;
+ grid-column: 3 / span 3;
grid-row: 1 / span 2;
z-index: 4;
}
#table-player-card-right {
- grid-column: 6 / span 2;
+ grid-column: 5 / span 2;
grid-row: 2 / span 3;
z-index: 3;
}
#table-player-info-bottom {
- grid-column: 2 / span 2;
+ grid-column: 1 / span 2;
grid-row: 5;
font-size: large;
text-align: right;
@@ -345,15 +345,15 @@ body {
}
#table-player-info-left {
- grid-column: 2;
- grid-row: 3;
+ grid-column: 1;
+ grid-row: 2 / span 3;
font-size: large;
text-align: right;
margin-right: 15px;
}
#table-player-info-top {
- grid-column: 2 / span 2;
+ grid-column: 1 / span 2;
grid-row: 1;
font-size: large;
text-align: right;
@@ -362,31 +362,35 @@ body {
}
#table-player-info-right {
- grid-column: 8;
- grid-row: 3;
+ grid-column: 7;
+ grid-row: 2 / span 3;
font-size: large;
margin-left: 15px;
}
.player-connection-state {
font-size: x-small;
- color: var(--alert-color);
}
#available-games-list {
- grid-column: 1;
+ grid-column: 3 / span 3;
grid-row: 1 / span 5;
width: 100%;
+ z-index: 1;
}
.available-game {
- margin-top: 5px;
- padding-left: 16px;
- padding-right: 16px;
+ margin: 5px;
+ padding: 5px;
background-color: var(--game-type-color);
text-align: center;
}
+#player-cards-center {
+ width: 100%;
+ margin-top: 10px;
+}
+
#player-cards {
display: none;
margin-left: auto;
@@ -394,7 +398,6 @@ body {
width: 923px;
grid-template-columns: 111px 111px 111px 111px 111px 111px 111px 111px;
column-gap: 5px;
- margin-top: 10px;
}
.player-card {
@@ -406,6 +409,111 @@ body {
transition-duration: 0.2s;
}
+@media screen and (max-width: 925px) {
+ #player-cards {
+ width: 748px;
+ grid-template-columns: 91px 91px 91px 91px 91px 91px 91px 91px;
+ column-gap: 0px;
+ }
+}
+
+@media screen and (max-width: 750px) {
+ #player-cards {
+ width: 601px;
+ grid-template-columns: 70px 70px 70px 70px 70px 70px 70px 70px;
+ column-gap: 0px;
+ }
+}
+
+@media screen and (max-width: 605px) {
+ #player-cards {
+ width: 461px;
+ grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px;
+ column-gap: 0px;
+ }
+}
+
+@media screen and (max-width: 465px) {
+ #player-cards {
+ width: 321px;
+ grid-template-columns: 30px 30px 30px 30px 30px 30px 30px 30px;
+ column-gap: 0px;
+ }
+}
+
+@media screen and (max-width: 650px) {
+ #table-players {
+ width: 549px;
+ grid-template-columns: 150px 71px 36px 35px 36px 71px 150px;
+ }
+}
+
+@media screen and (max-width: 550px) {
+ #table-players {
+ width: 514px;
+ grid-template-columns: 150px 54px 53px 0px 54px 53px 150px;
+ }
+}
+
+@media screen and (max-width: 515px) {
+ #table-players {
+ width: 467px;
+ grid-template-columns: 150px 30px 53px 0px 54px 30px 150px;
+ }
+ #table-player-card-right {
+ grid-column: 3 / span 4;
+ margin-left: 30px;
+ }
+}
+
+@media screen and (max-width: 470px) {
+ #table-players {
+ width: 407px;
+ grid-template-columns: 120px 30px 53px 0px 54px 30px 120px;
+ }
+}
+
+@media screen and (max-width: 410px) {
+ #table-players {
+ width: 367px;
+ grid-template-columns: 100px 30px 53px 0px 54px 30px 100px;
+ }
+}
+
+@media screen and (max-width: 370px) {
+ #table-players {
+ width: 307px;
+ grid-template-columns: 70px 30px 53px 0px 54px 30px 70px;
+ }
+}
+
+@media screen and (max-height: 715px) {
+ #table-players {
+ grid-template-rows: 94px 93px 0px 94px 93px;
+ }
+}
+
+@media screen and (max-height: 700px) {
+ #player-cards-center {
+ max-height: 150px;
+ overflow: hidden;
+ bottom: 0px;
+ position: absolute;
+ }
+}
+
+@media screen and (max-height: 650px) {
+ #player-cards-center {
+ max-height: 100px;
+ }
+}
+
+@media screen and (max-height: 600px) {
+ #player-cards-center {
+ max-height: 50px;
+ }
+}
+
.player-card:disabled,
.player-card[disabled] {
cursor: not-allowed;
@@ -417,32 +525,40 @@ body {
#player-card1 {
grid-column: 1;
+ z-index: 1;
}
#player-card2 {
grid-column: 2;
+ z-index: 2;
}
#player-card3 {
grid-column: 3;
+ z-index: 3;
}
#player-card4 {
grid-column: 4;
+ z-index: 4;
}
#player-card5 {
grid-column: 5;
+ z-index: 5;
}
#player-card6 {
grid-column: 6;
+ z-index: 6;
}
#player-card7 {
grid-column: 7;
+ z-index: 7;
}
#player-card8 {
grid-column: 8;
+ z-index: 8;
}
\ No newline at end of file