rag-manager/ingest_pipeline/cli/tui/styles.py

"""Modern CSS styles for the TUI application."""

# Enhanced modern CSS with better focus indicators and navigation feedback
TUI_CSS = """
/* Base styling */
Screen {
    background: #1a1a1a;
}

* {
    color: #ffffff;
}

/* Title styling */
.title {
    text-align: center;
    margin: 1;
    color: #ffffff;
    text-style: bold;
    background: #333333;
    padding: 1;
    border: solid #0088cc;
}

.subtitle {
    text-align: center;
    margin: 1 0;
    color: #cccccc;
    text-style: italic;
    background: #333333;
    padding: 1;
}

/* Container styling */
.main_container {
    margin: 1;
    padding: 1;
    background: #333333;
}

.card {
    background: #333333;
    padding: 1;
    margin: 1;
    color: #ffffff;
    border: solid #444444;
}

.card:focus-within {
    border: solid #0088cc;
}

/* Button styling with focus states */
Button {
    background: #444444;
    color: #ffffff;
    margin: 0 1;
    border: solid transparent;
}

Button:hover {
    background: #0088cc;
    color: #ffffff;
}

Button:focus {
    border: solid #ffffff;
    background: #0088cc;
}

Button.-primary {
    background: #0088cc;
    color: #ffffff;
}

Button.-success {
    background: #28a745;
    color: #ffffff;
}

Button.-error {
    background: #dc3545;
    color: #ffffff;
}

Button.-warning {
    background: #ffc107;
    color: #000000;
}

/* Enhanced DataTable with focus indicators */
DataTable {
    background: #333333;
    color: #ffffff;
    border: solid #444444;
}

DataTable:focus {
    border: solid #0088cc;
}

DataTable > .datatable--header {
    background: #444444;
    color: #ffffff;
    text-style: bold;
}

DataTable > .datatable--cursor {
    background: #0088cc;
    color: #ffffff;
}

DataTable > .datatable--cursor-row {
    background: #0066aa;
    color: #ffffff;
}

/* Input styling */
Input {
    background: #333333;
    color: #ffffff;
    border: solid #666666;
}

Input:focus {
    border: solid #0088cc;
}

/* Header and Footer */
Header, Footer {
    background: #333333;
    color: #ffffff;
}

/* Tab styling with focus indicators */
Tab {
    background: #333333;
    color: #ffffff;
    border: solid transparent;
}

Tab:focus {
    border: solid #ffffff;
}

Tab.-active {
    background: #0088cc;
    color: #ffffff;
    text-style: bold;
}

/* Label styling */
Label {
    color: #ffffff;
}

/* Status indicators */
.status-active {
    color: #28a745;
}

.status-error {
    color: #dc3545;
}

.status-warning {
    color: #ffc107;
}

/* Animations */
.pulse {
    text-style: blink;
}

.glow {
    background: #0088cc;
    color: #ffffff;
}

.shimmer {
    text-style: italic;
}

/* Metrics styling */
.metrics-value {
    text-style: bold;
    text-align: center;
    color: #ffffff;
}

.metrics-label {
    text-align: center;
    color: #cccccc;
}

.metrics-description {
    text-align: center;
    color: #999999;
    text-style: italic;
}

/* Section titles */
.section-title {
    text-style: bold;
    color: #ffffff;
    margin: 1 0;
}

/* Status text */
.status-text {
    color: #cccccc;
}

/* Button groups */
.button_bar {
    margin: 1 0;
}

.action_buttons {
    margin: 1;
    text-align: center;
}

/* Progress styling */
.progress-label {
    color: #ffffff;
    margin: 1 0;
}

/* Responsive grid */
.responsive-grid {
    grid-size: 4;
    grid-gutter: 1;
}

.metrics-grid {
    grid-size: 4;
    grid-gutter: 1;
    margin: 1;
}

/* Modal container */
.modal-container {
    background: #333333;
    border: solid #0088cc;
    padding: 2;
    margin: 2;
}

/* Chart placeholders */
.chart-title {
    text-style: bold;
    color: #ffffff;
    margin: 1 0;
}

.chart-placeholder {
    color: #999999;
    text-style: italic;
    text-align: center;
    padding: 2;
}

/* Analytics grid */
.analytics-grid {
    grid-size: 2;
    grid-gutter: 1;
}

/* Enhanced table styling */
.enhanced-table {
    background: #333333;
    color: #ffffff;
    border: solid #666666;
}

.enhanced-table:focus {
    border: solid #0088cc;
}

/* Status bar */
.status-bar {
    background: #444444;
    color: #ffffff;
    padding: 0 1;
}

/* Input section styling */
.input-section {
    margin: 1;
    padding: 1;
}

.input-label {
    color: #ffffff;
    margin: 1 0;
}

.modern-input {
    background: #333333;
    color: #ffffff;
    border: solid #666666;
    margin: 1 0;
}

.modern-input:focus {
    border: solid #0088cc;
}

/* Type buttons */
.type_buttons {
    margin: 1 0;
}

.type-button {
    margin: 0 1;
}

/* Progress section */
.progress-section {
    margin: 1;
    padding: 1;
}

/* Center alignment */
.center {
    text-align: center;
}

/* Warning styling */
.warning {
    color: #ffc107;
    text-style: bold;
}

/* Pressed button state */
.pressed {
    background: #006699;
    color: #ffffff;
}

/* Focus ring for better accessibility */
*:focus {
    outline: solid #0088cc;
}
"""