website/tools/content/tui/app.tcss

Screen {
    background: $background;
}

Header {
    background: $panel;
    color: $foreground;
}

HeaderTitle {
    color: $primary;
    text-style: bold;
}

TabbedContent {
    height: 1fr;
}

ContentTabs {
    background: $background;
}

Tab {
    color: $text-muted;
}

Tab.-active {
    color: $primary;
    text-style: bold;
}

Tab:hover {
    color: $foreground;
}

Underline > .underline--bar {
    color: $primary;
    background: $panel;
}

TabPane {
    padding: 0;
}

ContentPane {
    height: 1fr;
    margin: 1 1 0 1;
    background: $surface;
    border: solid $border-blurred;
    border-title-color: $text-muted;
    border-subtitle-color: $text-muted;
}

ContentPane:focus-within {
    border: solid $primary;
    border-title-color: $primary;
    border-subtitle-color: $accent;
}

ContentPane DataTable {
    height: 1fr;
    background: $surface;
}

DataTable > .datatable--header {
    background: $surface;
    color: $accent;
    text-style: bold;
}

DataTable > .datatable--even-row {
    background: $surface;
}

DataTable > .datatable--odd-row {
    background: $panel 40%;
}

.split-layout {
    height: 1fr;
}

.split-layout DataTable {
    width: 3fr;
}

.detail-scroll {
    width: 2fr;
    padding: 0 1;
    background: $surface;
    border-left: solid $border-blurred;
}

ContentPane:focus-within .detail-scroll {
    border-left: solid $primary;
}

Footer {
    background: $panel;
}

FormDialog,
ConfirmDialog {
    align: center middle;
    background: $background 60%;
}

.dialog {
    width: 72;
    height: auto;
    max-width: 95%;
    padding: 1 2;
    background: $surface;
    border: solid $primary;
}

.dialog-title {
    color: $primary;
    text-style: bold;
}

.field-label {
    margin-top: 1;
    color: $text-muted;
}

.dialog Input,
.dialog Select {
    width: 100%;
}

.dialog Input {
    background: $background;
    border: solid $border-blurred;
}

.dialog Input:focus {
    border: solid $primary;
}

#dialog-error {
    height: auto;
    margin-top: 1;
    color: $error;
}

.dialog-buttons {
    height: auto;
    margin-top: 1;
    align-horizontal: right;
}

.dialog-buttons Button {
    margin-left: 1;
    border: none;
    min-width: 10;
}

Toast {
    background: $panel;
    border-left: outer $primary;
}

RecordEditor {
    background: $background;
}

.editor-title {
    width: 100%;
    padding: 0 2;
    background: $panel;
    color: $primary;
    text-style: bold;
}

.editor-form {
    margin: 1 2 0 2;
    padding: 0 2 1 2;
    background: $surface;
    border: solid $primary;
}

.editor-form Input,
.editor-form Select {
    width: 100%;
    background: $background;
    border: solid $border-blurred;
}

.editor-form Input:focus,
.editor-form TextArea:focus {
    border: solid $primary;
}

.editor-area {
    height: 6;
    background: $background;
    border: solid $border-blurred;
}

.editor-area.longtext {
    height: 8;
}

#editor-error {
    height: auto;
    margin-top: 1;
    color: $error;
}

.field-row {
    height: auto;
}

.field-row Input {
    width: 1fr;
}

.browse-button {
    min-width: 10;
    margin-left: 1;
    border: none;
}

.swatch {
    width: 8;
    height: 3;
    margin-left: 1;
    content-align: center middle;
    border: solid $border-blurred;
}

.picker {
    width: 80;
    height: 80%;
}

.picker OptionList {
    height: 1fr;
    margin-top: 1;
    background: $background;
    border: solid $border-blurred;
}

.picker OptionList:focus {
    border: solid $primary;
}

#category-select {
    width: 100%;
    margin: 0 0 1 0;
}

SeriesPicker {
    background: $background;
}

#series-table {
    height: 1fr;
    margin: 1 2 0 2;
    background: $surface;
    border: solid $primary;
}

.series-summary {
    width: 100%;
    padding: 0 2;
}