gmakstutis/openrag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

styling fixes

Browse source
This commit is contained in:
phact 2025-10-08 15:12:28 -04:00
parent ad572a7b23
commit c8fe21f33a
3 changed files with 189 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

140
src/tui/main.py
View file

@ -32,34 +32,35 @@ class OpenRAGTUI(App):
CSS = """ CSS = """
Screen { Screen {
background: #0f172a; background: #27272a;
} }
#main-container { #main-container {
height: 100%; height: 100%;
padding: 1; padding: 1;
} }
#welcome-container { #welcome-container {
align: center middle; align: center middle;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#welcome-text { #welcome-text {
text-align: center; text-align: center;
margin-bottom: 2; margin-bottom: 2;
} }
.button-row { .button-row {
align: center middle; align: center middle;
height: auto; height: auto;
margin: 1 0; margin: 1 0;
} }
.button-row Button { .button-row Button {
margin: 0 1; margin: 0 1;
min-width: 20; min-width: 20;
border: solid #3f3f46;
} }
#config-header { #config-header {
@ -182,80 +183,131 @@ class OpenRAGTUI(App):
padding: 1; padding: 1;
} }
/* Frontend-inspired color scheme */ /* Modern dark theme with pink accents */
Static { Static {
color: #f1f5f9; color: #fafafa;
} }
Button.success { Button,
background: #4ade80; Button.-default,
color: #000; Button.-primary,
Button.-success,
Button.-warning,
Button.-error {
background: #27272a !important;
color: #fafafa !important;
border: round #52525b !important;
text-style: none !important;
tint: transparent 0% !important;
} }
Button.error { Button > *,
background: #ef4444; Button.-default > *,
color: #fff; Button.-primary > *,
Button.-success > *,
Button.-warning > *,
Button.-error > * {
background: transparent !important;
color: #fafafa !important;
text-style: none !important;
} }
Button.warning { Button:hover,
background: #eab308; Button.-default:hover,
color: #000; Button.-primary:hover,
Button.-success:hover,
Button.-warning:hover,
Button.-error:hover {
background: #27272a !important;
color: #fafafa !important;
border: round #52525b !important;
} }
Button.primary { Button:focus,
background: #2563eb; Button:focus-within,
color: #fff; Button.-active,
} Button.-default:focus,
Button.-default:focus-within,
Button.default { Button.-default.-active,
background: #475569; Button.-primary:focus,
color: #f1f5f9; Button.-primary:focus-within,
border: solid #64748b; Button.-primary.-active,
Button.-success:focus,
Button.-success:focus-within,
Button.-success.-active,
Button.-warning:focus,
Button.-warning:focus-within,
Button.-warning.-active,
Button.-error:focus,
Button.-error:focus-within,
Button.-error.-active {
background: #27272a !important;
color: #fafafa !important;
border: round #ec4899 !important;
} }
DataTable { DataTable {
background: #1e293b; background: #27272a;
color: #f1f5f9; color: #fafafa;
} }
DataTable > .datatable--header { DataTable > .datatable--header {
background: #334155; background: #3f3f46;
color: #f1f5f9; color: #fafafa;
} }
DataTable > .datatable--cursor { DataTable > .datatable--cursor {
background: #475569; background: #52525b;
} }
Input { Input {
background: #334155; background: #18181b;
color: #f1f5f9; color: #fafafa;
border: solid #64748b; border: solid #3f3f46;
}
Input:focus {
border: solid #ec4899;
} }
Label { Label {
color: #f1f5f9; color: #fafafa;
}
Header {
background: #27272a;
color: #fafafa;
} }
Footer { Footer {
background: #334155; background: #27272a;
color: #f1f5f9; color: #a1a1aa;
} }
#runtime-status { #runtime-status {
background: #1e293b; background: #27272a;
border: solid #64748b; border: solid #3f3f46;
color: #f1f5f9; color: #fafafa;
} }
#system-info { #system-info {
background: #1e293b; background: #27272a;
border: solid #64748b; border: solid #3f3f46;
color: #f1f5f9; color: #fafafa;
} }
#services-table, #images-table { #services-table, #images-table {
background: #1e293b; background: #27272a;
}
* {
scrollbar-background: #27272a;
scrollbar-background-hover: #3f3f46;
scrollbar-background-active: #3f3f46;
scrollbar-color: #52525b;
scrollbar-color-hover: #71717a;
scrollbar-color-active: #71717a;
scrollbar-corner-color: #27272a;
} }
""" """

2
src/tui/screens/welcome.py
View file

@ -118,7 +118,7 @@ class WelcomeScreen(Screen):
""" """
welcome_text.append(ascii_art, style="bold white") welcome_text.append(ascii_art, style="bold white")
welcome_text.append("Terminal User Interface for OpenRAG\n", style="dim") welcome_text.append("Terminal User Interface for OpenRAG\n", style="dim")
welcome_text.append(f"v{__version__}\n\n", style="dim cyan") welcome_text.append(f"v{__version__}\n\n", style="white")
# Check if all services are running # Check if all services are running
all_services_running = self.services_running and self.docling_running all_services_running = self.services_running and self.docling_running

98
src/tui/widgets/command_modal.py
View file

@ -24,14 +24,14 @@ class CommandOutputModal(ModalScreen):
#dialog { #dialog {
width: 90%; width: 90%;
height: 90%; height: 90%;
border: thick $primary; border: solid #3f3f46;
background: $surface; background: #27272a;
padding: 0; padding: 0;
} }
#title { #title {
background: $primary; background: #3f3f46;
color: $text; color: #fafafa;
padding: 1 2; padding: 1 2;
text-align: center; text-align: center;
width: 100%; width: 100%;
@ -40,9 +40,10 @@ class CommandOutputModal(ModalScreen):
#command-output { #command-output {
height: 1fr; height: 1fr;
border: solid $accent; border: solid #3f3f46;
margin: 1; margin: 1;
background: $surface-darken-1; background: #18181b;
color: #fafafa;
} }
#button-row { #button-row {
@ -56,11 +57,96 @@ class CommandOutputModal(ModalScreen):
#button-row Button { #button-row Button {
margin: 0 1; margin: 0 1;
min-width: 16; min-width: 16;
background: #27272a;
color: #fafafa;
border: round #52525b;
text-style: none;
tint: transparent 0%;
}
#button-row Button > Static {
background: transparent !important;
color: #fafafa !important;
text-style: none;
}
#button-row Button > * {
background: transparent !important;
color: #fafafa !important;
}
#button-row Button:hover {
background: #27272a !important;
color: #fafafa !important;
border: round #52525b;
tint: transparent 0%;
text-style: none;
}
#button-row Button:hover > Static {
background: transparent !important;
color: #fafafa !important;
text-style: none;
}
#button-row Button:hover > * {
background: transparent !important;
color: #fafafa !important;
}
#button-row Button:focus {
background: #27272a !important;
color: #fafafa !important;
border: round #ec4899;
tint: transparent 0%;
text-style: none;
}
#button-row Button:focus > Static {
background: transparent !important;
color: #fafafa !important;
text-style: none;
}
#button-row Button:focus > * {
background: transparent !important;
color: #fafafa !important;
}
#button-row Button.-active {
background: #27272a !important;
color: #fafafa !important;
border: round #ec4899;
tint: transparent 0%;
text-style: none;
}
#button-row Button.-active > Static {
background: transparent !important;
color: #fafafa !important;
text-style: none;
}
#button-row Button.-active > * {
background: transparent !important;
color: #fafafa !important;
}
#button-row Button:disabled {
background: #27272a;
color: #52525b;
border: round #3f3f46;
}
#button-row Button:disabled > Static {
background: transparent;
color: #52525b;
} }
#copy-status { #copy-status {
text-align: center; text-align: center;
margin-bottom: 1; margin-bottom: 1;
color: #a1a1aa;
} }
""" """