diff --git a/public/css/modules/download-tab.css b/public/css/modules/download-tab.css index 11a4896..d35d2ab 100644 --- a/public/css/modules/download-tab.css +++ b/public/css/modules/download-tab.css @@ -1,12 +1,11 @@ -/* Download tab section */ - #download_tab_container { - min-width: 300px; + width: 300px; height: 100%; background-color: var(--panels-background); color: var(--panels-text); display: block; flex-direction: column; + transition: all 250ms ease-in-out; } #toggle_download_tab { @@ -48,85 +47,105 @@ padding: 0px 2px; } -#download_list>.download_object { +#download_list > .download_object { padding-bottom: 8px; } -#download_list>.download_object .download_info { +#download_list > .download_object .download_info { display: flex; align-items: center; } -#download_list>.download_object .download_info img { +#download_list > .download_object .download_info img { width: 75px; height: 75px; display: inline-block; flex-shrink: 0; } -#download_list>.download_object .download_info .download_line { +#download_list > .download_object .download_info .download_line { display: block; } -#download_list>.download_object .download_info .download_slim_separator { +#download_list > .download_object .download_info .download_slim_separator { display: none; } -#download_list>.download_object .download_info_data { +#download_list > .download_object .download_info_data { width: 100%; margin-left: 8px; } -#download_list>.download_object .download_info_status { +#download_list > .download_object .download_info_status { margin-left: 8px; width: 80px; } -#download_list.slim>.download_object .download_info img { +#download_list.slim > .download_object .download_info img { display: none; } -#download_list.slim>.download_object .download_info .download_line { +#download_list.slim > .download_object .download_info .download_line { display: inline-block; } -#download_list.slim>.download_object .download_info .download_slim_separator { +#download_list.slim > .download_object .download_info .download_slim_separator { display: inline-block; } -#download_list.slim>.download_object .download_info_data { +#download_list.slim > .download_object .download_info_data { width: calc(80% - 16px); display: inline-block; padding-left: 0px; } -#download_list.slim>.download_object .download_info_status { +#download_list.slim > .download_object .download_info_status { width: 20%; display: inline-block; float: right; } -#download_list.slim>.download_object .download_info { +#download_list.slim > .download_object .download_info { display: block; } -.download_object>.download_bar>.queue_icon { +.download_object > .download_bar > .queue_icon { + cursor: default; margin-left: 8px; } -.download_object>.download_bar { +.download_object > .download_bar { display: flex; align-items: center; height: 24px; } -.download_object>.download_bar>.progress { +.download_object > .download_bar > .progress { margin: 0px; } +#download_tab_container #queue_buttons { + position: absolute; + top: 0; + right: 0; + opacity: 1; + visibility: visible; + transition: all 250ms ease-in-out; +} + +#download_tab_container #download_list { + width: 300px; +} + +#download_tab_container #download_tab_label { + opacity: 0; + visibility: hidden; + transition: all 250ms ease-in-out; +} + /* ===== Hidden tab styles ===== */ #download_tab_container.tab_hidden { - min-width: 32px; + width: 32px; } #download_tab_container.tab_hidden #toggle_download_tab::before { @@ -146,7 +165,8 @@ } #download_tab_container.tab_hidden #queue_buttons { - display: none; + opacity: 0; + visibility: hidden; } #download_tab_container.tab_hidden #download_list { @@ -154,5 +174,7 @@ } #download_tab_container.tab_hidden #download_tab_label { - display: inline; -} \ No newline at end of file + /* display: inline; */ + opacity: 1; + visibility: visible; +} diff --git a/public/index.html b/public/index.html index 24560d1..63940f1 100644 --- a/public/index.html +++ b/public/index.html @@ -17,7 +17,7 @@