style.tcss

# General

Screen {
    background: $surface-darken-1;
}

Button {
    width: auto;
    min-width: 16;
    height: auto;
    color: $text;
    border: none;
    background: #038c8c;
    border-top: tall #026868;
    border-bottom: tall #6ab8b8;
    text-align: center;
    content-align: center middle;
    text-style: bold;

    &:focus {
        text-style: bold reverse;
    }
    &:hover {
        border-top: tall #014444;
        border-bottom: tall #3d8080;
        background: #025b5b;
        color: $text;
    }
    &.-active {
        background: #025b5b;
        border-bottom: tall #3d8080;
        border-top: tall #014444;
        tint: $background 30%;
    }

    &.-success {
        background: $success;
        color: $text;
        border-top: tall $success-lighten-2;
        border-bottom: tall $success-darken-3;

        &:hover {
            background: $success-darken-2;
            color: $text;
            border-top: tall $success;
        }

        &.-active {
            background: $success;
            border-bottom: tall $success-lighten-2;
            border-top: tall $success-darken-2;
        }
    }

    &.-error {
        background: $error;
        color: $text;
        border-top: tall $error-lighten-2;
        border-bottom: tall $error-darken-3;

        &:hover {
            background: $error-darken-1;
            color: $text;
            border-top: tall $error;
        }

        &.-active {
            background: $error;
            border-bottom: tall $error-lighten-2;
            border-top: tall $error-darken-2;
        }
    }
}

# Main Screen

.main-menu-button {
    margin-bottom: 1;
    min-width: 100%;
    max-width: 0.4fr;
}

#main-menu-container {
    align: center middle;
    width: 1fr;
}

#main-menu-title {
    text-align: center;
    margin-bottom: 4;
    text-style: bold;
    color: auto;
    width: 0.4fr;
}

# Compile Screen

#compile-status-container {
    layout: horizontal;
    padding: 0 2;
    height: 4;
}

#compile-title {
    dock: left;
}

#compile-back-button {
    dock: right;
}

#compile-log {
    background: $surface;
    padding: 0 1 1 1;
    margin: 1 2;
}

# Settings Screen

#settings-scroll-container {
    padding: 1;
}

#settings-button-container {
    width: 100%;
    max-height: 20%;
    min-height: 5;
    align: center middle;
}

#settings-target-label {
    margin-left: 1;
}

#settings-target-container {
    layout: grid;
    grid-size: 4;
}

#settings-target-container Checkbox {
    width: 100%;
    margin-right: -1;
}

.settings-button {
    margin: 1;
    min-width: 100%;
    max-width: 0.2fr;
    align: center middle;
}

.settings-switch-container {
    height: 4;
}

.settings-switch-container Switch {
    margin-right: 2;
}

.settings-switch-container Label {
    margin-top: 1;
}

# Editor Screen

#tree-view {
    display: none;
    scrollbar-gutter: stable;
    overflow: auto;
    width: auto;
    height: 100%;
    dock: left;
    display: block;
    max-width: 50%;
}

#code-view {
    overflow: auto scroll;
    min-width: 100%;
}

#code {
    width: 100%;
}

.editor-button {
    width: 20%;
}

#save-editor-button {
    dock: left;
    margin: 1;
}

#cancel-editor-button {
    dock: right;
    margin: 1 3;
}

#editor-buttons-container {
    height: 5;
}