adrien/Sudoku
adrien/Sudoku
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

use css nth-child for regions' borders

Browse Source
This commit is contained in:
Adrien MALINGREY 2020-10-07 20:06:27 +02:00
parent a56d0b899d
commit 7195d84a55
2 changed files with 21 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
game.php
View File

@ -26,16 +26,6 @@
<tr> <tr>
<?php <?php
for ($column = 0; $column < 9; $column++) { for ($column = 0; $column < 9; $column++) {
switch($row%3) {
case 0: $classRegionRow = "regionTop"; break;
case 1: $classRegionRow = "regionMiddle"; break;
case 2: $classRegionRow = "regionBottom"; break;
}
switch($column%3) {
case 0: $classRegionColumn = "regionLeft"; break;
case 1: $classRegionColumn = "regionCenter"; break;
case 2: $classRegionColumn = "regionRight"; break;
}
$value = $gridStr[9*$row+$column]; $value = $gridStr[9*$row+$column];
if ($value == "?") { if ($value == "?") {
$value = ""; $value = "";
@ -43,7 +33,7 @@
} else { } else {
$disabled = " disabled"; $disabled = " disabled";
} }
echo " <td class='$classRegionRow $classRegionColumn'><input type='text' inputmode='numeric' minlength=0 maxlength=1 value='$value'$disabled/></td>\n"; echo " <td><input type='text' inputmode='numeric' minlength=0 maxlength=1 value='$value'$disabled/></td>\n";
} }
?> ?>
</tr> </tr>

54
style.css
View File

@ -16,83 +16,69 @@ div {
table { table {
border-spacing: 0; border-spacing: 0;
border: 1px solid black;
border-radius: 6px;
} }
td, tr { td, tr {
padding: 0; padding: 0;
} }
table tr:first-child td:first-child { tr:first-child td:first-child {
border-top-left-radius: 6px; border-top-left-radius: 5px;
} }
table tr:first-child td:first-child > input { tr:first-child td:first-child input {
border-top-left-radius: 4px; border-top-left-radius: 4px;
} }
table tr:first-child td { tr:first-child td:last-child {
border-top: 2px solid black; border-top-right-radius: 5px;
} }
table tr:first-child td:last-child { tr:first-child td:last-child input {
border-top-right-radius: 6px;
}
table tr:first-child td:last-child > input {
border-top-right-radius: 4px; border-top-right-radius: 4px;
} }
table tr td:first-child { tr:last-child td:first-child {
border-left: 2px solid black; border-bottom-left-radius: 5px;
} }
table tr td:last-child { tr:last-child td:first-child > input {
border-right: 2px solid black;
}
table tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
table tr:last-child td:first-child > input {
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
} }
table tr:last-child td { tr:last-child td:last-child {
border-bottom: 2px solid black; border-bottom-right-radius: 5px;
} }
table tr:last-child td:last-child { tr:last-child td:last-child input {
border-bottom-right-radius: 6px;
}
table tr:last-child td:last-child > input {
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
} }
.regionTop { tr:nth-child(3n+1) td {
border-top: 1px solid black; border-top: 1px solid black;
} }
.regionMiddle { tr:nth-child(3n+2) td {
border-top: 1px solid grey; border-top: 1px solid grey;
border-bottom: 1px solid grey; border-bottom: 1px solid grey;
} }
.regionBottom { tr:nth-child(3n) td {
border-bottom: 1px solid black; border-bottom: 1px solid black;
} }
.regionLeft { td:nth-child(3n+1) {
border-left: 1px solid black; border-left: 1px solid black;
} }
.regionCenter { td:nth-child(3n+2) {
border-left: 1px solid grey; border-left: 1px solid grey;
border-right: 1px solid grey; border-right: 1px solid grey;
} }
.regionRight { td:nth-child(3n+3) {
border-right: 1px solid black; border-right: 1px solid black;
} }