AlexAegis/loreplotter

:host {
    form {
        display: grid;
        grid-template-columns: 1fr 3fr;
        align-items: center;
        mat-form-field {
            margin: 1rem;
        }

        .main {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 1fr 3fr 3fr;
            align-items: center;

            > mat-label {
                justify-self: end;
            }
        }

        > h1 {
            grid-column: 1;
        }

        > .nameLabel {
            grid-column: 1;
            justify-self: end;
        }

        > .name {
            grid-column: 2;
        }

        .date {
            width: 7rem;
        }

        .time {
            width: 4rem;
        }

        .divider,
        h2 {
            grid-column: 1 / span 2;
            //grid-row: 3;
        }

        > .entries {
            grid-column: 1 / span 2;
            //grid-row: 4;
            display: grid;

            grid-auto-columns: 1fr 3fr;
            align-items: center;

            > .entryLabel {
                grid-column: 1;
            }

            > .entry {
                grid-column: 2;
            }
        }
    }

    .add {
        float: right;
    }

    .save {
        margin-top: 1rem;
        width: 100%;
    }

    * {
        transition: background-color 0.2s;
    }
}