oai/oai/tui/styles.tcss

/* Textual CSS for oAI TUI - Using Textual Design System */

Screen {
    background: $background;
    overflow: hidden;
}

Header {
    dock: top;
    height: auto;
    background: #2d2d2d;
    color: #cccccc;
    padding: 0 1;
    border-bottom: solid #555555;
}

ChatDisplay {
    background: $background;
    border: none;
    padding: 1;
    scrollbar-background: $background;
    scrollbar-color: $primary;
    overflow-y: auto;
}

UserMessageWidget {
    margin: 0 0 1 0;
    padding: 1;
    background: $surface;
    border-left: thick $success;
    height: auto;
}

SystemMessageWidget {
    margin: 0 0 1 0;
    padding: 1;
    background: #2a2a2a;
    border-left: thick #888888;
    height: auto;
    color: #cccccc;
}

AssistantMessageWidget {
    margin: 0 0 1 0;
    padding: 1;
    background: $panel;
    border-left: thick $accent;
    height: auto;
}

#assistant-label {
    margin-bottom: 1;
    color: #cccccc;
}

#assistant-content {
    height: auto;
    max-height: 100%;
    color: $text;
}

InputBar {
    dock: bottom;
    height: auto;
    background: #2d2d2d;
    align: center middle;
    border-top: solid #555555;
    padding: 1;
}

#input-prefix {
    width: auto;
    padding: 0 1;
    content-align: center middle;
    color: #888888;
}

#input-prefix.prefix-hidden {
    display: none;
}

#chat-input {
    width: 85%;
    height: 5;
    min-height: 5;
    background: #3a3a3a;
    border: none;
    padding: 1 2;
    color: #ffffff;
    content-align: left top;
}

#chat-input:focus {
    background: #404040;
}

#command-dropdown {
    display: none;
    dock: bottom;
    offset-y: -5;
    offset-x: 7.5%;
    height: auto;
    max-height: 12;
    width: 85%;
    background: #2d2d2d;
    border: solid #555555;
    padding: 0;
    layer: overlay;
}

#command-dropdown.visible {
    display: block;
}

#command-dropdown #command-list {
    background: #2d2d2d;
    border: none;
    scrollbar-background: #2d2d2d;
    scrollbar-color: #555555;
}

Footer {
    dock: bottom;
    height: auto;
    background: #252525;
    color: #888888;
    padding: 0 1;
}

/* Button styles */
Button {
    height: 3;
    min-width: 10;
    background: #3a3a3a;
    color: #cccccc;
    border: none;
}

Button:hover {
    background: #4a4a4a;
}

Button:focus {
    background: #505050;
}

Button.-primary {
    background: #3a3a3a;
}

Button.-success {
    background: #2d5016;
    color: #90ee90;
}

Button.-success:hover {
    background: #3a6b1e;
}

Button.-error {
    background: #5a1a1a;
    color: #ff6b6b;
}

Button.-error:hover {
    background: #6e2222;
}