summaryrefslogtreecommitdiff
path: root/play.html
diff options
context:
space:
mode:
Diffstat (limited to 'play.html')
-rw-r--r--play.html54
1 files changed, 41 insertions, 13 deletions
diff --git a/play.html b/play.html
index 86f9599..b8de55f 100644
--- a/play.html
+++ b/play.html
@@ -92,14 +92,12 @@ main {
.table_reserve, .table_front, .table_pool {
display: flex;
justify-content: center;
- align-items: start;
gap: 24px;
padding: 0 23px;
}
-.flip .table_reserve, .flip .table_front {
- align-items: end;
-}
+.table_reserve, .table_front { align-items: start; }
+.flip .table_reserve, .flip .table_front { align-items: end; }
.table_front {
min-height: 509px;
@@ -130,14 +128,23 @@ main {
[data-card="237A"] .slot_sticks { height: 55px; }
.slot_sticks {
+ margin: 12px;
min-height: 87px;
+}
+
+.slot_sticks {
display: flex;
flex-direction: column;
justify-content: end;
- align-content: center;
- flex-wrap: wrap;
+ align-items: center;
+ gap: 1px;
+}
+
+GRID.slot_sticks {
+ display: grid;
+ grid-template-rows: repeat(8, 10px);
+ grid-auto-flow: column;
gap: 1px;
- margin: 12px;
}
.slot_shift {
@@ -145,8 +152,7 @@ main {
display: flex;
flex-direction: column;
justify-content: end;
- align-content: center;
- flex-wrap: wrap;
+ align-items: center;
gap: 1px;
margin: 12px;
}
@@ -160,7 +166,7 @@ main {
height: 36px;
flex-direction: row;
justify-content: center;
- align-content: end;
+ align-ntems: end;
flex-wrap: wrap;
gap: 6px;
margin: 12px 0;
@@ -170,18 +176,40 @@ main {
justify-content: start;
flex-direction: column-reverse;
}
+
.flip .slot_cubes {
- align-content: start;
+ align-items: start;
}
.stick {
- width: 200px;
+ width: 90%;
+ //margin: 0 auto;
height: 6px;
border: 2px solid black;
box-shadow: 0 0 0 1px #0008, 1px 1px 3px 1px #0004;
- Xbox-shadow: 1px 1px 3px 0px #0004;
}
+/*
+.slot_sticks { flex-wrap: wrap; }
+.stick:first-child:nth-last-child(8) { width: 45%; }
+.stick:first-child:nth-last-child(9) { width: 45%; }
+.stick:first-child:nth-last-child(10) { width: 45%; }
+.stick:first-child:nth-last-child(11) { width: 45%; }
+.stick:first-child:nth-last-child(12) { width: 45%; }
+.stick:first-child:nth-last-child(13) { width: 45%; }
+.stick:first-child:nth-last-child(14) { width: 45%; }
+.stick:first-child:nth-last-child(15) { width: 45%; }
+.stick:first-child:nth-last-child(16) { width: 45%; }
+.stick:first-child:nth-last-child(9) ~ .stick { width: 45%; }
+.stick:first-child:nth-last-child(10) ~ .stick { width: 45%; }
+.stick:first-child:nth-last-child(11) ~ .stick { width: 45%; }
+.stick:first-child:nth-last-child(12) ~ .stick { width: 45%; }
+.stick:first-child:nth-last-child(13) ~ .stick { width: 45%; }
+.stick:first-child:nth-last-child(14) ~ .stick { width: 45%; }
+.stick:first-child:nth-last-child(15) ~ .stick { width: 45%; }
+.stick:first-child:nth-last-child(16) ~ .stick { width: 45%; }
+*/
+
:root {
--red: hsl(360, 77%, 51%);
--pink: hsl(359, 81%, 78%);