diff --git a/reviews/BordedDev/sudoku.rewrite.css b/reviews/BordedDev/sudoku.rewrite.css new file mode 100644 index 0000000..4ab1051 --- /dev/null +++ b/reviews/BordedDev/sudoku.rewrite.css @@ -0,0 +1,65 @@ +:host { + display: inline-block; + --border-radius: 5px; +} + +.sudoku { + user-select: none; + border: 1px solid #ccc; + font-size: 13px; + color: #222; + display: grid; + grid-template-columns: repeat(9, 1fr); + grid-auto-rows: auto; + aspect-ratio: 1 / 1; + background-color: #e5e5e5; + border-radius: var(--border-radius); + overflow: hidden; + + .sudoku-field { + aspect-ratio: 1 / 1; + width: 1em; + line-height: 1; + text-align: center; + padding: 2px; + border: 1px solid #ccc; + border-left: none; + border-top: none; + + /* Cross bars */ + &:nth-child(3n):not(:nth-child(9n)) { + border-right-color: black; + } + &:nth-child(n + 19):nth-child(-n + 27), + &:nth-child(n + 46):nth-child(-n + 54) { + border-bottom-color: black; + } + + /* Match the corners with parent, otherwise they'll render on top */ + &:nth-child(1) { + border-top-left-radius: var(--border-radius); + } + &:nth-child(9) { + border-top-right-radius: var(--border-radius); + } + &:nth-last-child(1) { + border-bottom-right-radius: var(--border-radius); + } + &:nth-last-child(9) { + border-bottom-left-radius: var(--border-radius); + } + + &.initial { + color: #777; + } + &.selected { + background-color: lightgreen; + } + &.marked { + background-color: blue; + } + &.invalid { + color: red; + } + } +}