shell/plex/tui/plex_tui.tcss

/* Plex TUI Theme - Orange/Dark inspired by Plex branding */

Screen {
    background: $surface;
}

Header {
    background: #282828;
    color: #e5a00d;
}

Footer {
    background: #282828;
}

/* Sidebar navigation */
#sidebar {
    width: 32;
    background: #1a1a2e;
    border-right: solid #e5a00d;
    padding: 1 0;
}

#sidebar-title {
    text-align: center;
    text-style: bold;
    color: #e5a00d;
    padding: 0 1;
    margin-bottom: 1;
}

#nav-list {
    background: transparent;
}

#nav-list > ListItem {
    padding: 0 1;
    height: 3;
    background: transparent;
}

#nav-list > ListItem:hover {
    background: transparent;
}

#nav-list > ListItem.-active {
    background: #e5a00d 20%;
}

.nav-label {
    padding: 1 2;
    width: 100%;
}

/* Main content */
#main-content {
    padding: 1 2;
}

/* Section headers */
.section-header {
    text-style: bold;
    color: #e5a00d;
    padding: 0 0 1 0;
    text-align: center;
}

/* Status panel */
#status-panel {
    height: auto;
    max-height: 12;
    border: solid #444;
    margin-bottom: 1;
    padding: 1;
}

/* Action buttons */
.action-btn {
    margin: 0 1 1 0;
    min-width: 24;
}

.action-btn:hover {
    opacity: 1.0;
}

.action-btn-danger {
    margin: 0 1 1 0;
    min-width: 24;
    background: $error;
}

.action-btn-danger:hover {
    background: $error;
}

.action-btn-warning {
    margin: 0 1 1 0;
    min-width: 24;
    background: $warning;
}

.action-btn-warning:hover {
    background: $warning;
}

.action-btn-success {
    margin: 0 1 1 0;
    min-width: 24;
    background: $success;
}

.action-btn-success:hover {
    background: $success;
}

/* Suppress default button hover tint */
Button:hover {
    opacity: 1.0;
}

/* Button rows */
.button-row {
    layout: horizontal;
    height: auto;
    padding: 0 0 1 0;
}

/* Output log */
#output-log {
    border: solid #444;
    height: 1fr;
    margin-top: 1;
}

/* DataTable */
DataTable {
    height: auto;
    max-height: 20;
    margin-bottom: 1;
}

/* Confirmation dialog */
ConfirmDialog {
    align: center middle;
}

ConfirmDialog > #dialog-container {
    width: 60;
    height: auto;
    border: thick $error;
    background: $surface;
    padding: 1 2;
}

ConfirmDialog #dialog-title {
    text-style: bold;
    color: $error;
    text-align: center;
    margin-bottom: 1;
}

ConfirmDialog #dialog-body {
    margin-bottom: 1;
}

ConfirmDialog .dialog-buttons {
    layout: horizontal;
    align-horizontal: center;
    height: auto;
}

ConfirmDialog .dialog-buttons Button {
    margin: 0 2;
}

/* Input dialog */
InputDialog {
    align: center middle;
}

InputDialog > #input-dialog-container {
    width: 60;
    height: auto;
    border: thick #e5a00d;
    background: $surface;
    padding: 1 2;
}

InputDialog #input-dialog-title {
    text-style: bold;
    color: #e5a00d;
    text-align: center;
    margin-bottom: 1;
}

InputDialog #input-dialog-body {
    margin-bottom: 1;
}

InputDialog .dialog-buttons {
    layout: horizontal;
    align-horizontal: center;
    height: auto;
}

InputDialog .dialog-buttons Button {
    margin: 0 2;
}

/* Password dialog */
PasswordDialog {
    align: center middle;
}

PasswordDialog > #password-dialog-container {
    width: 60;
    height: auto;
    border: thick #e5a00d;
    background: $surface;
    padding: 1 2;
}

PasswordDialog #password-dialog-title {
    text-style: bold;
    color: #e5a00d;
    text-align: center;
    margin-bottom: 1;
}

PasswordDialog #password-dialog-body {
    margin-bottom: 1;
}

PasswordDialog .dialog-buttons {
    layout: horizontal;
    align-horizontal: center;
    height: auto;
}

PasswordDialog .dialog-buttons Button {
    margin: 0 2;
}

/* Tabs */
TabbedContent {
    height: 1fr;
}

TabPane {
    padding: 1;
}

/* Info cards */
.info-card {
    background: #1a1a2e;
    border: solid #444;
    padding: 1;
    margin-bottom: 1;
    height: auto;
}

.info-card-title {
    text-style: bold;
    color: #e5a00d;
}

/* Status indicators */
.status-ok {
    color: $success;
}

.status-error {
    color: $error;
}

.status-warning {
    color: $warning;
}