diff options
Diffstat (limited to 'data')
-rw-r--r-- | data/style.scss | 179 | ||||
-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, 210 insertions, 1 deletions
diff --git a/data/style.scss b/data/style.scss index ceedc5f..828146a 100644 --- a/data/style.scss +++ b/data/style.scss @@ -27,6 +27,157 @@ 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-toggle { + display: none; + transition: transform 0.3s ease; + cursor: pointer; + } +} + +.upload_container { + max-height: $upload_container_height; + display: flex; + flex-direction: column; +} + +.upload_header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem; + background-color: var(--upload_modal_header_background); + color: var(--upload_modal_header_color); +} + +.upload_header svg { + width: 24px; + height: 24px; +} + +.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; } @@ -87,7 +238,7 @@ a.file, color: var(--file_link_color); &:visited { - color: var(--file_link_color_visited) + color: var(--file_link_color_visited); } } @@ -529,6 +680,32 @@ th span.active span { .back { right: 1.5rem; } + + $upload_container_height_mobile: 100vh; + + .upload_area { + width: 100%; + height: 136px; + max-height: $upload_container_height_mobile; + max-width: unset; + min-width: unset; + bottom: 0; + transition: height 0.3s ease; + + &.active { + right: 0; + left: 0; + } + + #upload-toggle { + display: block; + transition: transform 0.3s ease; + } + } + + .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 { |