diff options
Diffstat (limited to 'data')
-rw-r--r-- | data/style.scss | 156 | ||||
-rw-r--r-- | data/themes/archlinux.scss | 8 | ||||
-rw-r--r-- | data/themes/monokai.scss | 8 | ||||
-rw-r--r-- | data/themes/squirrel.scss | 8 | ||||
-rw-r--r-- | data/themes/zenburn.scss | 8 |
5 files changed, 188 insertions, 0 deletions
diff --git a/data/style.scss b/data/style.scss index 32d2989..40b53a4 100644 --- a/data/style.scss +++ b/data/style.scss @@ -27,6 +27,143 @@ body { padding: 1.5rem 5rem; } +$upload_container_height: 18rem; + +.upload_area { + display: block; + position: fixed; + bottom: 1rem; + right: -105%; + color: #ffffff; + box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3); + background: linear-gradient(135deg, #73a5ff, #5477f5); + padding: 0px; + margin: 0px; + opacity: 1; // Change this + transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); + border-radius: 4px; + text-decoration: none; + min-width: 400px; + max-width: 600px; + z-index: 2147483647; + max-height: $upload_container_height; + overflow: hidden; + + &.active { + right: 1rem; + } +} + +.upload_container { + max-height: $upload_container_height; + display: flex; + flex-direction: column; +} + +.upload_header { + padding: 1rem; + background-color: var(--upload_modal_header_background); + color: var(--upload_modal_header_color); +} + +.upload_action { + background-color: var(--upload_modal_sub_header_background); + color: var(--upload_modal_header_color); + padding: 0.25rem 1rem; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.75em; + font-weight: 500; +} + +.upload_cancel { + background: none; + border: none; + font-weight: 500; + cursor: pointer; +} + +.upload_files { + padding: 0px; + margin: 0px; + flex: 1; + overflow-y: auto; + max-height:inherit; +} + +.upload_file_list { + background-color: var(--upload_modal_file_item_background); + color: var(--upload_modal_file_item_color); + padding: 0px; + margin: 0px; + list-style: none; + list-style: none; + display: flex; + flex-direction: column; + align-items: stretch; + overflow-y: scroll; +} + +.upload_file_container { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 1rem calc(1rem - 2px) 1rem; +} + +.upload_file_action { + display: flex; + justify-content: right; +} + +.file_progress_bar { + width: 0%; + border-top: 2px solid var(--progress_bar_background); + transition: width 0.25s ease; + + &.cancelled { + border-color: var(--error_color); + } + + &.failed { + border-color: var(--error_color); + } + + &.complete { + border-color: var(--success_color); + } +} + +.upload_file_text { + font-size: 0.80em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &.cancelled { + text-decoration: line-through; + } + + &.failed { + text-decoration: line-through; + } +} + +.file_cancel_upload { + padding-left: 0.25rem; + font-size: 1em; + cursor: pointer; + border: none; + background: inherit; + font-size: 1em; + color: var(--error_color); + + &.complete { + color: var(--success_color); + } +} + .title { word-break: break-all; } @@ -524,6 +661,25 @@ th span.active span { .back { right: 1.5rem; } + + $upload_container_height_mobile: 60vh; + + .upload_area { + width: 100vw; + max-height: $upload_container_height_mobile; + max-width: unset; + min-width: unset; + bottom: 0; + + &.active { + right: 0; + left: 0; + } + } + + .upload_container { + max-height: $upload_container_height_mobile; + } } @media (max-width: 600px) { diff --git a/data/themes/archlinux.scss b/data/themes/archlinux.scss index f95b8bb..16020a0 100644 --- a/data/themes/archlinux.scss +++ b/data/themes/archlinux.scss @@ -45,6 +45,14 @@ $generate_default: true !default; --size_text_color: #fefefe; --error_color: #e44b4b; --footer_color: #8eabcc; + --success_color: #52e28a; + --upload_modal_header_background: #5294e2; + --upload_modal_header_color: #eeeeee; + --upload_modal_sub_header_background: #35547a; + --upload_modal_file_item_background: #eeeeee; + --upload_modal_file_item_color: #111111; + --upload_modal_file_upload_complete_background: #cccccc; + --progress_bar_background: #5294e2; }; @if $generate_default { diff --git a/data/themes/monokai.scss b/data/themes/monokai.scss index 4a47794..60c45e7 100644 --- a/data/themes/monokai.scss +++ b/data/themes/monokai.scss @@ -45,6 +45,14 @@ $generate_default: true !default; --size_text_color: #f8f8f2; --error_color: #d02929; --footer_color: #56c9df; + --success_color: #52e28a; + --upload_modal_header_background: #75715e; + --upload_modal_header_color: #eeeeee; + --upload_modal_sub_header_background: #323129; + --upload_modal_file_item_background: #eeeeee; + --upload_modal_file_item_color: #111111; + --upload_modal_file_upload_complete_background: #cccccc; + --progress_bar_background: #5294e2; }; @if $generate_default { diff --git a/data/themes/squirrel.scss b/data/themes/squirrel.scss index 9eb572e..7ec47e6 100644 --- a/data/themes/squirrel.scss +++ b/data/themes/squirrel.scss @@ -45,6 +45,14 @@ $generate_default: true !default; --size_text_color: #ffffff; --error_color: #d02424; --footer_color: #898989; + --success_color: #52e28a; + --upload_modal_header_background: #323232; + --upload_modal_header_color: #eeeeee; + --upload_modal_sub_header_background: #171616; + --upload_modal_file_item_background: #eeeeee; + --upload_modal_file_item_color: #111111; + --upload_modal_file_upload_complete_background: #cccccc; + --progress_bar_background: #5294e2; }; @if $generate_default { diff --git a/data/themes/zenburn.scss b/data/themes/zenburn.scss index 9eb4d11..efb2e83 100644 --- a/data/themes/zenburn.scss +++ b/data/themes/zenburn.scss @@ -45,6 +45,14 @@ $generate_default: true !default; --size_text_color: #efefef; --error_color: #d06565; --footer_color: #bfaf9f; + --success_color: #52e28a; + --upload_modal_header_background: #7f9f7f; + --upload_modal_header_color: #eeeeee; + --upload_modal_sub_header_background: #404e40; + --upload_modal_file_item_background: #eeeeee; + --upload_modal_file_item_color: #111111; + --upload_modal_file_upload_complete_background: #cccccc; + --progress_bar_background: #5294e2; }; @if $generate_default { |