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
Download Patch File Download Diff File Expand all files Collapse all files

54
style.css
View File

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