feat: massive UI revamp
This commit is contained in:
@@ -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;
|
|
||||||
}
|
}
|
||||||
"""
|
"""
|
||||||
|
|||||||
Reference in New Issue
Block a user