Styling with tcss

/* General Settings */
Header {
    dock: top;
}

Footer {
    background: $background;
    color: $secondary;
    dock: bottom;
    height: 1;
}

#textBold {
    text-style: bold;
}

.remove {
    display: none;
}

The design and classes for the general layout.

/* Buttons */
Button {
    border: none;
    width: auto;
    height: 100%;
    margin: 0 1 0 1;
    padding: 1 0 1 0;
}

.buttonBar{
    layout: horizontal;
    align-vertical: top;
    padding: 0 1 1 1;
    min-height: 10;
    /* height: 100%; */
}

.buttonRight {
    align-horizontal: right;
}

Textual likes to compress Button until they're not readable, so the Button Widget needs some adjustment. Since Buttons are always displayed in a horizontal bar, there's a class for it.

/* Main Screen */
MainScreen {
    layout: grid;
    grid-size: 2 4;
    grid-columns: 2fr 3fr;
    grid-rows: 1fr 4 2fr 4;
    background: $background;
}

.box {
    border: round $secondary 75%;
    height: 100%;
    border-title-color: $secondary-lighten-2;
}

#treeView {
    row-span: 3;
    background: $background;
}

#viewDataset {
}

#diagramData {
}

.diagram_data_container {
    border: hkey $surface;
}

#table {
    height: 100%;
}

Design for widgets on MainScreen.

/* Status Screen */
StatusScreen {
    layout: vertical;
    background: $primary-background;
}

StatusScreen > Label {
    border: hkey $secondary 75%;
    width: 100%;
    text-align: center;
    margin: 1 1 1 1;
}

StatusScreen > .textBox {
    layout: horizontal;
    height: 3fr;
}

StatusScreen > .textBox > .text {
    width: 1fr;
}

StatusScreen > .tabbedBox {
    height: 6fr;
}

/* Load Screen */
LoadScreen {
}

LoadScreen > #loadMouse {
    dock: top;
    width: 100%;
    text-align: center;
}

LoadScreen > .load {
    align: center middle;
}

LoadScreen > .load > #loadTitle {
    text-style: bold;
}

LoadScreen > .load > .loadText {
    padding: 2 2;
    text-align: center;
}

LoadScreen > #loadWait {
    dock: bottom;
    text-align: center;
    padding: 2 2;
    border: solid white;
}

/* Dialog Screens */
SearchDialog {
    align: center middle;
    background: $background;
}

ListDialog {
    align: center middle;
    background: $background;
}

DatasetSettingsDialog {
    align: center middle;
    background: $background;
}

.dialog {
    layout: grid;
    grid-size: 1 2;
    grid-rows: 34 4;
    width: 80;
    height: auto;
    border: hkey $panel;
    background: $primary;
}

.dialog > .box {
    layout: vertical;
}

.dialog_row {
    layout: horizontal;
    padding: 1;
    height: 5;
}

.dialog_name {
    width: 1fr;
}

.dialog_input {
    width: 2fr;
    height: 100%;
}

.dialog_bool {
    width: auto;
}

.dialog .buttonBar {
    layout: horizontal;
    align-vertical: top;
    padding: 0 1 1 1;
    height: 4;
}

.dialog_description {
    min-height: 2;
    max-height: 4;
    text-align: right;
}