writer/frontend/src/Documents/Docs.scss

@import "~@blueprintjs/core/lib/scss/variables";

#overview {
    display: flex;
    flex-direction: column;

    .separator {
        transition: 0.3s;
        margin: 2rem 0;
        width: 100%;
        border-bottom: 1px $light-gray1 dashed;
        transition: 0.3s;
    }

    .section {
        width: 100%;
    }

    .list {
        display: flex;
        flex-shrink: 0;
        flex-grow: 0;
        flex-wrap: wrap;

        .card {
            transition: 0.3s;
            user-select: none;
            height: 15rem;
            width: 10.5rem;
            margin: 1rem;
            padding: 0rem;
            overflow: hidden;

            h4 {
                transition: 0.3s;
                transition: 0.3s;
                padding: 1rem;
                padding-bottom: 1.5rem;
                border-bottom: 1px $light-gray2 solid;
                margin-bottom: 0;
            }

            .textPreview {
                transition: 0.3s;
                pointer-events: none;
                font-size: 0.5rem;
                transition: 0.3s;
                padding: 0.5rem;
                padding-top: 0.5rem;
                color: $dark-gray5;

                ul {
                    padding-left: 1rem;
                }
            }
        }

        .card.newDocumentCard {
            background-color: white;
            color: $gray2;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}

.document {

    textarea,
    .documentContents {
        background: white;
    }

    height: 100%;
    margin-bottom: 1rem;

    .documentHeader {
        transition: 0.3s;

        display: flex;
        align-content: baseline;

        h1 {
            margin-left: 0;
            margin-right: auto;
            min-width: 0;
            flex-grow: 1;
        }

        input {
            transition: 0.3s;
            font-weight: 600;
            font-size: 2rem;
            height: 3rem;
            min-width: 0;
            flex-grow: 1;
        }

        .buttons {
            margin-left: auto;
            margin-right: 0;
            display: flex;
            justify-content: end;
            flex-shrink: 0;
            flex-grow: 0;

            div {
                height: 100%;
                width: 3rem;

                >* {
                    width: 100%;
                    height: 100%;

                    .bp3-popover-target {
                        width: 100%;
                        height: 100%;

                        button {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }

        margin-bottom: 1rem;
    }

    textarea,
    .documentContents {
        transition: 0.3s;
        padding: 0.5rem 1rem;
        overflow: auto;
        margin: 0;
        margin-bottom: 0;
        min-height: 90%;
        margin-bottom: 1rem;
        min-width: 100%;
        resize: none;

        code {
            transition: 0.3s;
            border-radius: 3px;
            border: 1px solid $light-gray2;
            background-color: $light-gray5;
        }

        pre {
            transition: 0.3s;
            border-radius: 3px;
            border: 1px solid $light-gray2;
            background-color: $light-gray5;
            padding: 0.75rem;

            code {
                padding: 0;
                background-color: inherit;
                border: none;
            }
        }

        table {
            transition: 0.3s;
            border-radius: 3px;
            border: 1px solid $light-gray2;
            border-collapse: collapse;

            tr,
            td,
            th {
                transition: 0.3s;
                padding: 0.5rem;
                border: 1px solid $light-gray2;
            }

            tr:nth-child(even) {
                transition: 0.3s;
                background-color: $light-gray5;
            }
        }
    }

    .documentContents {
        transition: 0.3s;
        border: 1px solid $light-gray1;
        border-radius: 3px;
    }
}

.bp3-dark {
    #overview {
        .separator {
            transition: 0.3s;
            border-bottom: 1px $dark-gray5 dashed;
        }

        .list {
            .card {
                transition: 0.3s;

                h4 {
                    transition: 0.3s;
                    border-bottom: 1px $dark-gray2 solid;
                }

                .textPreview {
                    transition: 0.3s;
                    color: $light-gray1;
                }
            }

            .card.newDocumentCard {
                background-color: $dark-gray4;
                color: $gray1;
            }
        }
    }

    .documentHeader {
        transition: 0.3s;

        input {
            transition: 0.3s;
            background: $dark-gray4;
        }
    }

    .document {

        textarea,
        .documentContents {
            transition: 0.3s;
            background: $dark-gray4;
            border-color: $dark-gray1;

            code {
                transition: 0.3s;
                border-color: $dark-gray2;
                background-color: $dark-gray3;
            }

            pre {
                transition: 0.3s;
                border-color: $dark-gray2;
                background-color: $dark-gray3;
            }

            table {
                transition: 0.3s;
                border-color: $dark-gray2;

                tr,
                td,
                th {
                    transition: 0.3s;
                    border-color: $dark-gray2;
                }

                tr:nth-child(even) {
                    transition: 0.3s;
                    background-color: $dark-gray3;
                }
            }
        }
    }
}