crosswords/css/main.less

@cell-size: 75px;
@border-color: darkblue;
@arrow-color: darkblue;
@disabled-color: #263340;

html,body {
    font-family: Lato, sans-serif;
    margin: 0;
    padding: 0;
}

.crossword-line {
    display: block;
    height: @cell-size;

    .cell {
        display: inline-block;
        width: @cell-size;
        height: 100%;
        border-left: 1px solid @border-color;
        border-top: 1px solid @border-color;
        overflow: hidden;
        text-align: center;

        &:last-child {
            border-right: 1px solid @border-color;
        }

        &.cell-disabled {
            background: @disabled-color;
            border-color: @disabled-color;
        }

        &.cell-definition > * {
            display: flex;
            justify-content: center;
            flex-direction: column;
            height: 100%;

            .definition {
                display: block;
                font-size: .75em;

                & > * {
                    display: inline-block;
                    width: @cell-size;
                }

                &:not(:only-child):not(:first-child) {
                    border-top: 1px solid @border-color;
                }

            }
        }

        &.definition-right-vt, &.definition-right-hz, &.definition-bottom-vt, &.definition-bottom-hz {
            position: relative;
            &:after {
                position: absolute;
                height: @cell-size /6;
                width: @cell-size /6;
                content: " ";
            }
        }

        &.definition-right-vt:after {
            top: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            width: @cell-size /8;
            border-top: 1px solid @arrow-color;
            border-right: 1px solid @arrow-color;
        }
        &.definition-right-hz:after {
            top: 0;
            bottom: 0;
            left: 0;
            width: @cell-size /8;
            margin: auto;
            border-top: 1px solid @arrow-color;
        }
        &.definition-bottom-vt:after {
            left: 0;
            right: 0;
            top: 0;
            margin: auto;
            height: @cell-size /8;
            border-left: 1px solid @arrow-color;
        }
        &.definition-bottom-hz:after {
            left: 0;
            right: 0;
            top: 0;
            margin: auto;
            height: @cell-size /8;
            border-left: 1px solid @arrow-color;
            border-bottom: 1px solid @arrow-color;
        }

        &.cell-letter {
            font-size: @cell-size /3;
            line-height: @cell-size;
            font-weight: 900;

            &.cell-letter-correct {
                color: green;
            }
            &.cell-letter-wrong {
                background-color: #ffb6b6;
            }
        }

        &.cell-selected {
            background: #e1e8ff;
        }

        &.cell-input {
            background: #b0c2ff;
        }
    }

    &:last-child .cell {
        border-bottom: 1px solid @border-color;
    }
}