/* 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; }