terrazzo-terminal 0.2.7

A simple web-based terminal emulator built on Terrazzo.
div.text_editor {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    div.header {
        @include trz-header;
        border: 1px solid var(--color);
        box-sizing: border-box;
        flex: 0 0 auto;

        div.path-selector {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;

            img.path-selector-icon,
            img.create-entry-icon {
                @include trz-icon;
                margin-left: var(--padding);
                margin-right: var(--padding);
                padding: 3px;

                &.search-icon:hover {
                    filter: invert(0);
                    background-color: var(--link-color);
                    cursor: pointer;
                }
            }

            img.create-entry-icon:hover,
            img.create-entry-icon.active {
                filter: invert(0);
                background-color: var(--link-color);
                cursor: pointer;
            }

            div.path-selector-widget {
                position: relative;
                display: flex;
                flex-direction: row;
                width: 100%;

                input.path-selector-field {
                    background-color: var(--background-color);
                    color: var(--color);
                    border: 0;
                    width: 100%;
                    @include trz-font;
                    @include trz-no-outline;
                }

                span.path-selector-field {
                    white-space: nowrap;
                }

                ul.path-selector-autocomplete {
                    @include trz-menu;

                    max-height: calc(100vh - var(--header-height) - 5px);
                    overflow-y: scroll;

                    border-left: 1px dotted gray;
                    border-bottom: 1px dotted gray;
                }
            }
        }

        img.sync-status {
            @include trz-icon;
            margin-left: var(--padding);
            margin-right: var(--padding);
        }

        img.refresh-editor,
        img.toggle-editor-diff {
            @include trz-icon;
            margin-left: var(--padding);
            margin-right: var(--padding);
            padding: 3px;

            &:hover {
                filter: invert(0);
                background-color: var(--link-color);
                cursor: pointer;
            }
        }

        img.toggle-editor-diff.active {
            filter: invert(0);
            background-color: var(--link-color);
            cursor: pointer;
        }
    }

    div.body {
        width: 100%;
        height: 100%;
        min-height: 0;
        flex: 1 1 auto;

        display: flex;
        flex-direction: row;

        div.editor-container {
            height: 100%;
            width: 100%;
            min-height: 0;
            flex: 1 1 auto;

            div.editor {
                height: 100%;
                width: 100%;
                min-height: 0;
                overflow: hidden;

                :global(.cm-editor),
                :global(.cm-mergeView) {
                    height: 100%;
                    min-height: 0;
                }

                :global(.cm-scroller) {
                    overflow: auto;
                }
            }
        }
    }
}