From 0659b78aa31e23c8feb6d4ff57a1cd349021b28f Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Fri, 15 Dec 2023 14:00:05 +0100 Subject: x --- play.html | 54 +++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 41 insertions(+), 13 deletions(-) (limited to 'play.html') 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%); -- cgit v1.2.3