feat: massive UI revamp

This commit is contained in:
2026-01-04 11:21:12 +01:00
parent 1bbd28888b
commit ff1030f4bd

View File

@@ -10,9 +10,9 @@ MIN_FILE_SIZE = 1024 * 1024
DEFAULT_CHUNK_SIZE = 8192 DEFAULT_CHUNK_SIZE = 8192
TABLE_COLUMN_DEFS = ( TABLE_COLUMN_DEFS = (
("Title", 4), ("Title", 2),
("Author", 3), ("Author", 2),
("Length", 2), ("Length", 1),
("Progress", 1), ("Progress", 1),
("Downloaded", 1), ("Downloaded", 1),
) )
@@ -24,128 +24,103 @@ SEEK_SECONDS = 30.0
TABLE_CSS = """ TABLE_CSS = """
Screen { Screen {
background: #1e1e2e; background: #141622;
} }
Header { #top_bar {
background: #181825; background: #10131f;
color: #cdd6f4; color: #d5d9f0;
text-style: bold; text-style: bold;
} height: 1;
Footer {
background: #181825;
color: #bac2de;
height: 2;
padding: 0 1;
scrollbar-size: 0 0;
overflow-x: auto;
overflow-y: hidden;
}
Footer > HorizontalGroup > KeyGroup,
Footer > HorizontalGroup > KeyGroup.-compact {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #181825;
} }
FooterKey, #top_left,
FooterKey.-grouped, #top_center,
Footer.-compact FooterKey { #top_right {
background: #181825; width: 1fr;
padding: 0; padding: 0 1;
margin: 0 1 0 0; background: #10131f;
margin: 0;
} }
FooterKey .footer-key--key { #top_left {
color: #f9e2af; text-align: left;
background: #181825;
text-style: bold;
padding: 0 1 0 0;
} }
FooterKey .footer-key--description { #top_center {
color: #cdd6f4; text-align: center;
background: #181825;
padding: 0;
} }
FooterKey:hover { #top_right {
background: #313244; text-align: right;
color: #cdd6f4;
}
FooterKey:hover .footer-key--key,
FooterKey:hover .footer-key--description {
background: #313244;
} }
DataTable { DataTable {
height: 1fr; height: 1fr;
background: #1e1e2e; background: #141622;
color: #cdd6f4; color: #d6dbf2;
border: solid #585b70; border: solid #2b2f45;
scrollbar-size-horizontal: 0;
} }
DataTable:focus { DataTable:focus {
border: solid #89b4fa; border: solid #7aa2f7;
} }
DataTable > .datatable--header { DataTable > .datatable--header {
background: #45475a; background: #1b2033;
color: #bac2de; color: #b9c3e3;
text-style: bold; text-style: bold;
} }
DataTable > .datatable--cursor { DataTable > .datatable--cursor {
background: #313244; background: #232842;
color: #cdd6f4; color: #e6ebff;
} }
DataTable > .datatable--odd-row { DataTable > .datatable--odd-row {
background: #181825; background: #121422;
} }
DataTable > .datatable--even-row { DataTable > .datatable--even-row {
background: #1e1e2e; background: #15182a;
} }
Static { Static {
height: 1; height: 1;
text-align: center; text-align: center;
background: #181825; background: #10131f;
color: #cdd6f4; color: #c7cfe8;
} }
Static#status { Static#status {
color: #bac2de; color: #b6bfdc;
} }
Static#progress_info { Static#progress_info {
color: #89b4fa; color: #7aa2f7;
text-style: bold; text-style: bold;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%;
} }
ProgressBar#progress_bar { ProgressBar#progress_bar {
height: 1; height: 1;
background: #181825; background: #10131f;
border: none; border: none;
margin: 0; margin: 0;
padding: 0 1; padding: 0 1;
width: 100%;
align: center middle; align: center middle;
} }
ProgressBar#progress_bar > .progress-bar--track { ProgressBar#progress_bar > .progress-bar--track {
background: #45475a; background: #262a3f;
} }
ProgressBar#progress_bar > .progress-bar--bar { ProgressBar#progress_bar > .progress-bar--bar {
background: #a6e3a1; background: #8bd5ca;
} }
HelpScreen { HelpScreen {
@@ -153,93 +128,69 @@ HelpScreen {
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
} }
HelpScreen Static {
background: transparent;
}
#help_container { #help_container {
width: 88%; width: 88%;
max-width: 120; max-width: 120;
min-width: 48; min-width: 48;
height: auto; height: auto;
max-height: 90%; max-height: 80%;
min-height: 16; min-height: 14;
background: #181a2a; background: #181a2a;
border: heavy #7aa2f7; border: heavy #7aa2f7;
padding: 1 2; padding: 1 2;
} }
#help_title { #help_title {
width: 100%;
height: 3;
text-align: center; text-align: center;
text-style: bold; text-style: bold;
color: #7aa2f7; color: #7aa2f7;
content-align: center middle;
margin-bottom: 1; margin-bottom: 1;
padding-bottom: 1;
border-bottom: solid #4b5165; border-bottom: solid #4b5165;
height: 3;
align: center middle;
} }
#help_content { #help_content {
width: 100%; width: 100%;
height: 1fr; height: auto;
padding: 1 0; padding: 0;
margin: 1 0;
overflow-y: auto;
scrollbar-size: 0 1;
}
#help_content > .scrollbar--vertical {
background: #313244;
}
#help_content > .scrollbar--vertical > .scrollbar--track {
background: #181825;
}
#help_content > .scrollbar--vertical > .scrollbar--handle {
background: #585b70;
}
#help_content > .scrollbar--vertical > .scrollbar--handle:hover {
background: #45475a;
}
.help_row {
height: 3;
margin: 0 0 1 0; margin: 0 0 1 0;
}
.help_list {
width: 1fr;
height: auto;
background: transparent;
padding: 0 1; padding: 0 1;
scrollbar-size: 0 0;
}
.help_list > ListItem {
background: #1b1f33; background: #1b1f33;
border: tall #2b2f45; padding: 0 1;
align: left middle;
} }
.help_row:hover { .help_list > ListItem:hover {
background: #2a2f45; background: #2a2f45;
border: tall #3b4160;
} }
.help_key { .help_list > ListItem > Label {
width: 22%; width: 100%;
min-width: 12; padding: 0;
text-align: right;
padding: 0 1 0 0;
color: #f9e2af;
text-style: bold;
align: right middle;
}
.help_action {
width: 78%;
text-align: left;
padding: 0 0 0 2;
color: #cdd6f4;
align: left middle;
} }
#help_footer { #help_footer {
width: 100%;
height: 3;
text-align: center; text-align: center;
content-align: center middle;
color: #bac2de; color: #bac2de;
margin-top: 1; margin-top: 1;
padding-top: 1;
border-top: solid #4b5165; border-top: solid #4b5165;
height: 3;
align: center middle;
} }
""" """