diff --git a/README.md b/README.md index 7a799a2e..535f3dff 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ Then start the dev server: npm run dev ``` -This will serve up the site at [localhost:3002](http://localhost:3002). +This will serve up the site at [127.0.0.1:3002](http://127.0.0.1:3002). **If you use localhost instead of 127.0.0.1 you may find page load extremely slow.** It will watch for changes and do hot module reloading. Occasionally you'll need to restart Vite when it doesn't pick up a change. diff --git a/api/ConfigAPI.js b/api/ConfigAPI.js new file mode 100644 index 00000000..4d122781 --- /dev/null +++ b/api/ConfigAPI.js @@ -0,0 +1,7 @@ +import BaseAPI from '@/api/BaseAPI' + +export default class ConfigAPI extends BaseAPI { + fetchv2(key) { + return this.$getv2('/config/' + key) + } +} diff --git a/api/index.d.ts b/api/index.d.ts index 4a107a12..9081fd45 100644 --- a/api/index.d.ts +++ b/api/index.d.ts @@ -19,6 +19,7 @@ import BanditAPI from './BanditAPI.js' import ChatAPI from './ChatAPI.js' import CommentAPI from './CommentAPI.js' import CommunityEventAPI from './CommunityEventAPI.js' +import ConfigAPI from './ConfigAPI.js' import DashboardAPI from './DashboardAPI.js' import DomainAPI from './DomainAPI.js' import DonationsAPI from './DonationsAPI.js' @@ -62,6 +63,7 @@ interface API { chat: ChatAPI; comment: CommentAPI; communityevent: CommunityEventAPI; + config: ConfigAPI; dashboard: DashboardAPI; domain: DomainAPI; donations: DonationsAPI; diff --git a/api/index.js b/api/index.js index d1cfca38..01442944 100644 --- a/api/index.js +++ b/api/index.js @@ -17,6 +17,7 @@ import BanditAPI from './BanditAPI.js' import ChatAPI from './ChatAPI.js' import CommentAPI from './CommentAPI.js' import CommunityEventAPI from './CommunityEventAPI.js' +import ConfigAPI from './ConfigAPI.js' import DashboardAPI from './DashboardAPI.js' import DomainAPI from './DomainAPI.js' import DonationsAPI from './DonationsAPI.js' @@ -62,6 +63,7 @@ export default (config) => { chat: new ChatAPI(options), comment: new CommentAPI(options), communityevent: new CommunityEventAPI(options), + config: new ConfigAPI(options), dashboard: new DashboardAPI(options), domain: new DomainAPI(options), donations: new DonationsAPI(options), diff --git a/app.vue b/app.vue index 0c09860c..4b57ee9a 100644 --- a/app.vue +++ b/app.vue @@ -123,6 +123,7 @@ import { useMiscStore } from './stores/misc' import { computed, watch, reloadNuxtApp } from '#imports' // polyfills import 'core-js/actual/array/to-sorted' +import { useConfigStore } from '~/stores/config' const route = useRoute() const loadingIndicatorThrottle = ref(5000) @@ -139,7 +140,12 @@ let ready = false // Starting with around Nuxt 3.4.1, when we first access the config (here) it has public as we'd expect, but // if we store that and access it later, we are just looking at the contents of public. I don't understand why // this is, but we don't expect the config to change, so we take a copy here. -const runtimeConfig = JSON.parse(JSON.stringify(useRuntimeConfig())) +const runtimeConfig = JSON.parse( + JSON.stringify({ + public: useRuntimeConfig().public, + app: useRuntimeConfig().app, + }) +) const miscStore = useMiscStore() const groupStore = useGroupStore() @@ -148,6 +154,7 @@ const authStore = useAuthStore() const userStore = useUserStore() const isochroneStore = useIsochroneStore() const composeStore = useComposeStore() +const configStore = useConfigStore() const chatStore = useChatStore() const addressStore = useAddressStore() const trystStore = useTrystStore() @@ -189,6 +196,7 @@ searchStore.init(runtimeConfig) storyStore.init(runtimeConfig) volunteeringStore.init(runtimeConfig) communityEventStore.init(runtimeConfig) +configStore.init(runtimeConfig) jobStore.init(runtimeConfig) teamStore.init(runtimeConfig) donationStore.init(runtimeConfig) @@ -263,6 +271,21 @@ if (process.client) { window.location.reload() } } + + window.onerror = function (message, url, line, col, error) { + // We can get this, for example if the CookieYes script is blocked. + console.log('Uncaught error', message, url, line, col, error) + + if (url.includes('cookieyes')) { + // If CookieYes fails with an error, then we proceed as though it wasn't configured. + // + // This catches the error on Firefox, but not on Chrome, so it's of limited use. + console.log('CookieYes error') + if (window.postCookieYes) { + window.postCookieYes() + } + } + } } const chatCount = computed(() => { diff --git a/assets/css/buttons.scss b/assets/css/buttons.scss index 747a8560..3ba70c6d 100644 --- a/assets/css/buttons.scss +++ b/assets/css/buttons.scss @@ -83,3 +83,9 @@ button { color: $color-gray--normal !important; } } + +.badge { + &.text-bg-info { + color: white !important; + } +} \ No newline at end of file diff --git a/assets/css/global.scss b/assets/css/global.scss index 933eb8e5..91d0cf9f 100644 --- a/assets/css/global.scss +++ b/assets/css/global.scss @@ -246,7 +246,8 @@ legend { } .sidebar__wrapper { - height: calc(100vh - var(--header-navbar-height) - var(--ads-label-height) - $sticky-banner-height-desktop); + height: calc(100vh - var(--header-navbar-height) - $sticky-banner-height-desktop - $ads-cta); + overflow-y: scroll; .card-body .card { border-radius: unset; diff --git a/assets/css/message-images.scss b/assets/css/message-images.scss new file mode 100644 index 00000000..62e8f15e --- /dev/null +++ b/assets/css/message-images.scss @@ -0,0 +1,9 @@ +@import 'bootstrap/scss/functions'; +@import 'bootstrap/scss/variables'; +@import 'bootstrap/scss/mixins/_breakpoints'; + +$thumbnail-size: 150px; +$thumbnail-size-md: 200px; + +$notthumbnail-size: 320px; +$notthumbnail-size-md: 200px; \ No newline at end of file diff --git a/assets/css/navbar.scss b/assets/css/navbar.scss index 386a292b..db2400de 100644 --- a/assets/css/navbar.scss +++ b/assets/css/navbar.scss @@ -2,6 +2,12 @@ @import 'bootstrap/scss/variables'; @import 'bootstrap/scss/mixins/_breakpoints'; +$navbar-height: calc(8px + 8px + 64px); + +@include media-breakpoint-up(md) { + $navbar-height: calc(8px + 8px + 58px); +} + #navbar_large .nav-item { text-align: center; } @@ -148,6 +154,24 @@ svg.fa-icon { color: white !important; } +.communityeventsbadge { + position: absolute; + top: 2px; + right: -2px; + font-size: 11px; + background-color: $colour-secondary !important; + color: white !important; +} + +.volunteeropportunitiesbadge { + position: absolute; + top: 2px; + right: 9px; + font-size: 11px; + background-color: $colour-secondary !important; + color: white !important; +} + .browsebadge { position: absolute; top: 2px; diff --git a/assets/css/sidebar-ads.scss b/assets/css/sidebar-ads.scss index d0a9db50..412d7a1a 100644 --- a/assets/css/sidebar-ads.scss +++ b/assets/css/sidebar-ads.scss @@ -1,3 +1,2 @@ $sidebar-ads-height-small: 258px; $sidebar-ads-height-large: 608px; -$sidebar-ads-label-height: 42px; diff --git a/assets/css/sticky-banner.scss b/assets/css/sticky-banner.scss index 3622d22f..7f07644a 100644 --- a/assets/css/sticky-banner.scss +++ b/assets/css/sticky-banner.scss @@ -1,2 +1,3 @@ -$sticky-banner-height-mobile: 50px; -$sticky-banner-height-desktop: 90px; +$sticky-banner-height-mobile: 73px; +$sticky-banner-height-desktop: 113px; +$ads-cta: 23px; diff --git a/assets/css/uploader.scss b/assets/css/uploader.scss index a43858a5..8f34b239 100644 --- a/assets/css/uploader.scss +++ b/assets/css/uploader.scss @@ -2,200 +2,3743 @@ @import 'bootstrap/scss/_functions'; @import 'bootstrap/scss/_variables'; @import 'bootstrap/scss/mixins/_breakpoints'; +@import 'assets/css/sticky-banner.scss'; -.my-config { - --darkmode: 0; - --h-accent: 98; - --s-accent: 70%; - --l-accent: 46%; - --h-background: 0; - --s-background: 0%; - --l-background: 100%; - --border-radius-element: 0; - --border-radius-frame: 0; - --border-radius-thumb: 0; - --clr-confirm: #338808; - --icon-edit-file: 'm17.002 0.905 -2.269 2.269 6.094 6.094 2.269 -2.269c1.172 -1.172 1.172 -3.07 0 -4.242l-1.847 -1.852c-1.172 -1.172 -3.07 -1.172 -4.242 0zm-3.328 3.328L2.747 15.164c-0.488 0.488 -0.844 1.092 -1.041 1.753L0.047 22.556c-0.117 0.398 -0.009 0.825 0.281 1.116s0.717 0.398 1.111 0.286L7.078 22.298c0.661 -0.197 1.266 -0.553 1.753 -1.041l10.936 -10.931z'; - --icon-remove-file: 'M6.337 0.83C6.591 0.319 7.111 0 7.678 0h5.644c0.567 0 1.087 0.319 1.341 0.83L15 1.5h4.5c0.83 0 1.5 0.67 1.5 1.5s-0.67 1.5 -1.5 1.5H1.5C0.67 4.5 0 3.83 0 3s0.67 -1.5 1.5 -1.5h4.5zM1.5 6h18v15c0 1.655 -1.345 3 -3 3H4.5c-1.655 0 -3 -1.345 -3 -3zm4.5 3c-0.413 0 -0.75 0.338 -0.75 0.75v10.5c0 0.413 0.338 0.75 0.75 0.75s0.75 -0.338 0.75 -0.75V9.75c0 -0.413 -0.338 -0.75 -0.75 -0.75m4.5 0c-0.413 0 -0.75 0.338 -0.75 0.75v10.5c0 0.413 0.338 0.75 0.75 0.75s0.75 -0.338 0.75 -0.75V9.75c0 -0.413 -0.338 -0.75 -0.75 -0.75m4.5 0c-0.413 0 -0.75 0.338 -0.75 0.75v10.5c0 0.413 0.338 0.75 0.75 0.75s0.75 -0.338 0.75 -0.75V9.75c0 -0.413 -0.338 -0.75 -0.75 -0.75'; - --icon-default: 'm11 3c-.9428 0-1.4141313.0000788-1.7070312.2929688-.2714001.2714099-.2915088.6968024-.2929688 1.5078124-3.45256.0000701-5.18871.0076507-6.34375.9941407-.16547.14133-.3196175.2954675-.4609375.4609375-.99524 1.16527-.9960937 2.9216069-.9960937 6.4355466 0 3.5139.0008537 5.2722.9960937 6.4375.14132.1654.2954675.319538.4609375.460938 1.16527.9952 2.9216169.99414 6.4355469.99414h5.8164061c3.5139 0 5.270247.00106 6.435547-.99414.1654-.1414.319637-.295538.460938-.460938.9952-1.1653.996093-2.9236.996093-6.4375 0-3.5139397-.000893-5.2702766-.996093-6.4355466-.1413-.16547-.295538-.3196075-.460938-.4609375-1.1551-.98649-2.89125-.9940706-6.34375-.9941407-.0015-.8110099-.021569-1.2364025-.292969-1.5078124-.2929-.29289-.764231-.2929688-1.707031-.2929688zm1 5.1230469c2.5235 0 4.568359 2.0448591 4.568359 4.5683591s-2.044859 4.570313-4.568359 4.570313-4.5683594-2.046813-4.5683594-4.570313 2.0448594-4.5683591 4.5683594-4.5683591zm6.646484 0c.4588 0 .830078.3712581.830078.8300781 0 .45883-.371278.8320312-.830078.8320312-.4589 0-.832031-.3732012-.832031-.8320312 0-.45882.373131-.8300781.832031-.8300781z'; -} - -.my-config2 { - --darkmode: 0; - --h-accent: 98; - --s-accent: 70%; - --l-accent: 46%; - --border-radius-element: 0; - --border-radius-frame: 0; - --border-radius-thumb: 0; - --clr-confirm: #338808; - --ui-size: 50px; - --icon-edit-file: 'm17.002 0.905 -2.269 2.269 6.094 6.094 2.269 -2.269c1.172 -1.172 1.172 -3.07 0 -4.242l-1.847 -1.852c-1.172 -1.172 -3.07 -1.172 -4.242 0zm-3.328 3.328L2.747 15.164c-0.488 0.488 -0.844 1.092 -1.041 1.753L0.047 22.556c-0.117 0.398 -0.009 0.825 0.281 1.116s0.717 0.398 1.111 0.286L7.078 22.298c0.661 -0.197 1.266 -0.553 1.753 -1.041l10.936 -10.931z'; - --icon-remove-file: 'M6.337 0.83C6.591 0.319 7.111 0 7.678 0h5.644c0.567 0 1.087 0.319 1.341 0.83L15 1.5h4.5c0.83 0 1.5 0.67 1.5 1.5s-0.67 1.5 -1.5 1.5H1.5C0.67 4.5 0 3.83 0 3s0.67 -1.5 1.5 -1.5h4.5zM1.5 6h18v15c0 1.655 -1.345 3 -3 3H4.5c-1.655 0 -3 -1.345 -3 -3zm4.5 3c-0.413 0 -0.75 0.338 -0.75 0.75v10.5c0 0.413 0.338 0.75 0.75 0.75s0.75 -0.338 0.75 -0.75V9.75c0 -0.413 -0.338 -0.75 -0.75 -0.75m4.5 0c-0.413 0 -0.75 0.338 -0.75 0.75v10.5c0 0.413 0.338 0.75 0.75 0.75s0.75 -0.338 0.75 -0.75V9.75c0 -0.413 -0.338 -0.75 -0.75 -0.75m4.5 0c-0.413 0 -0.75 0.338 -0.75 0.75v10.5c0 0.413 0.338 0.75 0.75 0.75s0.75 -0.338 0.75 -0.75V9.75c0 -0.413 -0.338 -0.75 -0.75 -0.75'; - --icon-default: 'm11 3c-.9428 0-1.4141313.0000788-1.7070312.2929688-.2714001.2714099-.2915088.6968024-.2929688 1.5078124-3.45256.0000701-5.18871.0076507-6.34375.9941407-.16547.14133-.3196175.2954675-.4609375.4609375-.99524 1.16527-.9960937 2.9216069-.9960937 6.4355466 0 3.5139.0008537 5.2722.9960937 6.4375.14132.1654.2954675.319538.4609375.460938 1.16527.9952 2.9216169.99414 6.4355469.99414h5.8164061c3.5139 0 5.270247.00106 6.435547-.99414.1654-.1414.319637-.295538.460938-.460938.9952-1.1653.996093-2.9236.996093-6.4375 0-3.5139397-.000893-5.2702766-.996093-6.4355466-.1413-.16547-.295538-.3196075-.460938-.4609375-1.1551-.98649-2.89125-.9940706-6.34375-.9941407-.0015-.8110099-.021569-1.2364025-.292969-1.5078124-.2929-.29289-.764231-.2929688-1.707031-.2929688zm1 5.1230469c2.5235 0 4.568359 2.0448591 4.568359 4.5683591s-2.044859 4.570313-4.568359 4.570313-4.5683594-2.046813-4.5683594-4.570313 2.0448594-4.5683591 4.5683594-4.5683591zm6.646484 0c.4588 0 .830078.3712581.830078.8300781 0 .45883-.371278.8320312-.830078.8320312-.4589 0-.832031-.3732012-.832031-.8320312 0-.45882.373131-.8300781.832031-.8300781z'; -} - -lr-simple-btn button { - background-color: $colour-success; +.uppy-Dashboard-poweredBy { + display: none !important; +} + +@charset "UTF-8"; +.uppy-Informer { + position: absolute; + right: 0; + bottom: 60px; + left: 0; + z-index: 1005; + text-align: center; +} + +.uppy-Informer span > div { + margin-bottom: 6px; +} + +.uppy-Informer-animated { + z-index: -1000; + transform: translateY(350%); + opacity: 0; + transition: all 300ms ease-in; +} + +.uppy-Informer p { + display: inline-block; + max-width: 90%; + margin: 0; + padding: 0; + padding: 6px 15px; + color: #fff; + font-weight: 400; + font-size: 12px; + line-height: 1.4; + background-color: #757575; + border-radius: 18px; +} + +.uppy-Informer p { + max-width: 500px; + padding: 10px 20px; + font-size: 14px; + line-height: 1.3; +} + +[data-uppy-theme=dark] .uppy-Informer p { + background-color: #333; +} + +[dir="ltr"] .uppy-Informer p span { + left: 3px; +} + +[dir="rtl"] .uppy-Informer p span { + right: 3px; +} + +[dir="ltr"] .uppy-Informer p span { + margin-left: -1px; +} + +[dir="rtl"] .uppy-Informer p span { + margin-right: -1px; +} + +.uppy-Informer p span { + position: relative; + top: -1px; + display: inline-block; + width: 13px; + height: 13px; + color: #525252; + font-size: 10px; + line-height: 12px; + vertical-align: middle; + background-color: #fff; + border-radius: 50%; +} + +.uppy-Informer p span:hover { + cursor: help; +} + +.uppy-Informer p span::after { + line-height: 1.3; + word-wrap: break-word; +} + +/* ------------------------------------------------------------------- + Microtip + + Modern, lightweight css-only tooltips + Just 1kb minified and gzipped + + @author Ghosh + @package Microtip + +---------------------------------------------------------------------- + 1. Base Styles + 2. Direction Modifiers + 3. Position Modifiers +-------------------------------------------------------------------- */ +/* ------------------------------------------------ + [1] Base Styles +------------------------------------------------- */ +.uppy-Root [aria-label][role~=tooltip] { + position: relative; +} + +.uppy-Root [aria-label][role~=tooltip]::before, +.uppy-Root [aria-label][role~=tooltip]::after { + position: absolute; + z-index: 10; + box-sizing: border-box; + transform: translate3d(0, 0, 0); + transform-origin: top; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + opacity: 0; + transition: all var(--microtip-transition-duration, 0.18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s); + pointer-events: none; + will-change: transform; +} + +.uppy-Root [aria-label][role~=tooltip]::before { + background-size: 100% auto !important; + content: ""; +} + +.uppy-Root [aria-label][role~=tooltip]::after { + box-sizing: content-box; + padding: 0.5em 1em; + color: #fff; + font-weight: var(--microtip-font-weight, normal); + font-size: var(--microtip-font-size, 13px); + white-space: nowrap; + text-transform: var(--microtip-text-transform, none); + background: rgba(17, 17, 17, 0.9); + border-radius: 4px; + content: attr(aria-label); +} + +.uppy-Root [aria-label][role~=tooltip]:hover::before, +.uppy-Root [aria-label][role~=tooltip]:hover::after, +.uppy-Root [aria-label][role~=tooltip]:focus::before, +.uppy-Root [aria-label][role~=tooltip]:focus::after { + opacity: 1; + pointer-events: auto; +} + +/* ------------------------------------------------ + [2] Position Modifiers +------------------------------------------------- */ +.uppy-Root [role~=tooltip][data-microtip-position|=top]::before { + bottom: 100%; + left: 50%; + width: 18px; + height: 6px; + margin-bottom: 5px; + background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; + transform: translate3d(-50%, 0, 0); +} + +.uppy-Root [role~=tooltip][data-microtip-position|=top]::after { + bottom: 100%; + left: 50%; + margin-bottom: 11px; + transform: translate3d(-50%, 0, 0); +} + +.uppy-Root [role~=tooltip][data-microtip-position|=top]:hover::before { + transform: translate3d(-50%, -5px, 0); +} + +.uppy-Root [role~=tooltip][data-microtip-position=top]:hover::after { + transform: translate3d(-50%, -5px, 0); +} + +/* ------------------------------------------------ + [2.1] Top Left +------------------------------------------------- */ +.uppy-Root [role~=tooltip][data-microtip-position=top-left]::after { + bottom: 100%; + transform: translate3d(calc(-100% + 16px), 0, 0); +} + +.uppy-Root [role~=tooltip][data-microtip-position=top-left]:hover::after { + transform: translate3d(calc(-100% + 16px), -5px, 0); +} + +/* ------------------------------------------------ + [2.2] Top Right +------------------------------------------------- */ +.uppy-Root [role~=tooltip][data-microtip-position=top-right]::after { + bottom: 100%; + transform: translate3d(calc(0% - 16px), 0, 0); +} + +.uppy-Root [role~=tooltip][data-microtip-position=top-right]:hover::after { + transform: translate3d(calc(0% - 16px), -5px, 0); +} + +/* ------------------------------------------------ + [2.3] Bottom +------------------------------------------------- */ +.uppy-Root [role~=tooltip][data-microtip-position|=bottom]::before { + top: 100%; + bottom: auto; + left: 50%; + width: 18px; + height: 6px; + margin-top: 5px; + margin-bottom: 0; + background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; + transform: translate3d(-50%, -10px, 0); +} + +.uppy-Root [role~=tooltip][data-microtip-position|=bottom]::after { + top: 100%; + left: 50%; + margin-top: 11px; + transform: translate3d(-50%, -10px, 0); +} + +.uppy-Root [role~=tooltip][data-microtip-position|=bottom]:hover::before { + transform: translate3d(-50%, 0, 0); +} + +.uppy-Root [role~=tooltip][data-microtip-position=bottom]:hover::after { + transform: translate3d(-50%, 0, 0); +} + +/* ------------------------------------------------ + [2.4] Bottom Left +------------------------------------------------- */ +.uppy-Root [role~=tooltip][data-microtip-position=bottom-left]::after { + top: 100%; + transform: translate3d(calc(-100% + 16px), -10px, 0); +} + +.uppy-Root [role~=tooltip][data-microtip-position=bottom-left]:hover::after { + transform: translate3d(calc(-100% + 16px), 0, 0); +} + +/* ------------------------------------------------ + [2.5] Bottom Right +------------------------------------------------- */ +.uppy-Root [role~=tooltip][data-microtip-position=bottom-right]::after { + top: 100%; + transform: translate3d(calc(0% - 16px), -10px, 0); +} + +.uppy-Root [role~=tooltip][data-microtip-position=bottom-right]:hover::after { + transform: translate3d(calc(0% - 16px), 0, 0); +} + +/* ------------------------------------------------ + [2.6] Left +------------------------------------------------- */ +.uppy-Root [role~=tooltip][data-microtip-position=left]::before, +.uppy-Root [role~=tooltip][data-microtip-position=left]::after { + top: 50%; + right: 100%; + bottom: auto; + left: auto; + transform: translate3d(10px, -50%, 0); +} + +.uppy-Root [role~=tooltip][data-microtip-position=left]::before { + width: 6px; + height: 18px; + margin-right: 5px; + margin-bottom: 0; + background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; +} + +.uppy-Root [role~=tooltip][data-microtip-position=left]::after { + margin-right: 11px; +} + +.uppy-Root [role~=tooltip][data-microtip-position=left]:hover::before, +.uppy-Root [role~=tooltip][data-microtip-position=left]:hover::after { + transform: translate3d(0, -50%, 0); +} + +/* ------------------------------------------------ + [2.7] Right +------------------------------------------------- */ +.uppy-Root [role~=tooltip][data-microtip-position=right]::before, +.uppy-Root [role~=tooltip][data-microtip-position=right]::after { + top: 50%; + bottom: auto; + left: 100%; + transform: translate3d(-10px, -50%, 0); +} + +.uppy-Root [role~=tooltip][data-microtip-position=right]::before { + width: 6px; + height: 18px; + margin-bottom: 0; + margin-left: 5px; + background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; +} + +.uppy-Root [role~=tooltip][data-microtip-position=right]::after { + margin-left: 11px; +} + +.uppy-Root [role~=tooltip][data-microtip-position=right]:hover::before, +.uppy-Root [role~=tooltip][data-microtip-position=right]:hover::after { + transform: translate3d(0, -50%, 0); +} + +/* ------------------------------------------------ + [3] Size +------------------------------------------------- */ +.uppy-Root [role~=tooltip][data-microtip-size=small]::after { + width: 80px; + white-space: initial; +} + +.uppy-Root [role~=tooltip][data-microtip-size=medium]::after { + width: 150px; + white-space: initial; +} + +.uppy-Root [role~=tooltip][data-microtip-size=large]::after { + width: 260px; + white-space: initial; +} + +.uppy-StatusBar { + position: relative; + z-index: 1001; + display: flex; + height: 46px; + color: #fff; + font-weight: 400; + font-size: 12px; + line-height: 40px; + background-color: #fff; + transition: height 0.2s; +} + +[data-uppy-theme=dark] .uppy-StatusBar { + background-color: #1f1f1f; +} + +.uppy-StatusBar::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 2px; + background-color: #eaeaea; + content: ""; +} + +[data-uppy-theme=dark] .uppy-StatusBar::before { + background-color: #757575; +} + +.uppy-StatusBar[aria-hidden=true] { + height: 0; + overflow-y: hidden; +} + +.uppy-StatusBar.is-complete .uppy-StatusBar-progress { + background-color: #1bb240; +} + +.uppy-StatusBar.is-error .uppy-StatusBar-progress { + background-color: #e32437; +} + +.uppy-StatusBar.is-complete .uppy-StatusBar-statusIndicator { + color: #1bb240; +} + +.uppy-StatusBar.is-error .uppy-StatusBar-statusIndicator { + color: #e32437; +} + +.uppy-StatusBar:not([aria-hidden=true]).is-waiting { + height: 65px; + background-color: #fff; + border-top: 1px solid #eaeaea; +} + +[data-uppy-theme=dark] .uppy-StatusBar:not([aria-hidden=true]).is-waiting { + background-color: #1f1f1f; + border-top: 1px solid #333; +} + +.uppy-StatusBar-progress { + position: absolute; + z-index: 1001; + height: 2px; + background-color: #1269cf; + transition: background-color, width 0.3s ease-out; +} + +.uppy-StatusBar-progress.is-indeterminate { + background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.3) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.3) 75%, transparent 75%, transparent); + background-size: 64px 64px; + animation: uppy-StatusBar-ProgressStripes 1s linear infinite; +} + +@keyframes uppy-StatusBar-ProgressStripes { + from { + background-position: 0 0; + } + to { + background-position: 64px 0; + } +} + +.uppy-StatusBar.is-preprocessing .uppy-StatusBar-progress, +.uppy-StatusBar.is-postprocessing .uppy-StatusBar-progress { + background-color: #f6a623; +} + +.uppy-StatusBar.is-waiting .uppy-StatusBar-progress { + display: none; +} + +[dir="ltr"] .uppy-StatusBar-content { + padding-left: 10px; +} + +[dir="rtl"] .uppy-StatusBar-content { + padding-right: 10px; +} + +.uppy-StatusBar-content { + position: relative; + z-index: 1002; + display: flex; + align-items: center; + height: 100%; + color: #333; + white-space: nowrap; + text-overflow: ellipsis; +} + +[dir="ltr"] .uppy-StatusBar-content { + padding-left: 15px; +} + +[dir="rtl"] .uppy-StatusBar-content { + padding-right: 15px; +} + +[data-uppy-theme=dark] .uppy-StatusBar-content { + color: #eaeaea; +} + +[dir="ltr"] .uppy-StatusBar-status { + padding-right: 0.3em; +} + +[dir="rtl"] .uppy-StatusBar-status { + padding-left: 0.3em; +} + +.uppy-StatusBar-status { + display: flex; + flex-direction: column; + justify-content: center; + font-weight: normal; + line-height: 1.4; +} + +.uppy-StatusBar-statusPrimary { + font-weight: 500; + line-height: 1; + display: flex; +} + +.uppy-StatusBar-statusPrimary button.uppy-StatusBar-details { + margin-left: 5px; +} + +[data-uppy-theme=dark] .uppy-StatusBar-statusPrimary { + color: #eaeaea; +} + +.uppy-StatusBar-statusSecondary { + display: inline-block; + margin-top: 1px; + color: #757575; + font-size: 11px; + line-height: 1.2; + white-space: nowrap; +} + +[data-uppy-theme=dark] .uppy-StatusBar-statusSecondary { + color: #bbb; +} + +[dir="ltr"] .uppy-StatusBar-statusSecondaryHint { + margin-right: 5px; +} + +[dir="rtl"] .uppy-StatusBar-statusSecondaryHint { + margin-left: 5px; +} + +.uppy-StatusBar-statusSecondaryHint { + display: inline-block; + line-height: 1; + vertical-align: middle; +} + +[dir="ltr"] .uppy-StatusBar-statusSecondaryHint { + margin-right: 8px; +} + +[dir="rtl"] .uppy-StatusBar-statusSecondaryHint { + margin-left: 8px; +} + +[dir="ltr"] .uppy-StatusBar-statusIndicator { + margin-right: 7px; +} + +[dir="rtl"] .uppy-StatusBar-statusIndicator { + margin-left: 7px; +} + +.uppy-StatusBar-statusIndicator { + position: relative; + top: 1px; + color: #525252; +} + +.uppy-StatusBar-statusIndicator svg { + vertical-align: text-bottom; +} + +[dir="ltr"] .uppy-StatusBar-actions { + right: 10px; +} + +[dir="rtl"] .uppy-StatusBar-actions { + left: 10px; +} + +.uppy-StatusBar-actions { + position: absolute; + top: 0; + bottom: 0; + z-index: 1004; + display: flex; + align-items: center; +} + +.uppy-StatusBar.is-waiting .uppy-StatusBar-actions { + position: static; + width: 100%; + height: 100%; + padding: 0 15px; + background-color: #fafafa; +} + +[data-uppy-theme=dark] .uppy-StatusBar.is-waiting .uppy-StatusBar-actions { + background-color: #1f1f1f; +} + +.uppy-StatusBar:not([aria-hidden=true]).is-waiting.has-ghosts { + flex-direction: column; + height: 90px; +} + +.uppy-StatusBar:not([aria-hidden=true]).is-waiting.has-ghosts { + flex-direction: row; + height: 65px; +} + +.uppy-StatusBar:not([aria-hidden=true]).is-waiting.has-ghosts .uppy-StatusBar-actions { + flex-direction: column; + justify-content: center; +} + +.uppy-StatusBar:not([aria-hidden=true]).is-waiting.has-ghosts .uppy-StatusBar-actions { + flex-direction: row; + justify-content: initial; +} + +.uppy-StatusBar-actionCircleBtn { + margin: 3px; + line-height: 1; + cursor: pointer; + opacity: 0.9; +} + +.uppy-StatusBar-actionCircleBtn:focus { + outline: none; +} + +.uppy-StatusBar-actionCircleBtn::-moz-focus-inner { + border: 0; +} + +.uppy-StatusBar-actionCircleBtn:focus { + box-shadow: 0 0 0 3px rgba(18, 105, 207, 0.5); +} + +[data-uppy-theme=dark] .uppy-StatusBar-actionCircleBtn:focus { + outline: none; +} + +[data-uppy-theme=dark] .uppy-StatusBar-actionCircleBtn::-moz-focus-inner { + border: 0; +} + +[data-uppy-theme=dark] .uppy-StatusBar-actionCircleBtn:focus { + box-shadow: 0 0 0 2px rgba(170, 225, 255, 0.85); +} + +.uppy-StatusBar-actionCircleBtn:hover { + opacity: 1; +} + +.uppy-StatusBar-actionCircleBtn:focus { + border-radius: 50%; +} + +.uppy-StatusBar-actionCircleBtn svg { + vertical-align: bottom; +} + +.uppy-StatusBar-actionBtn { + display: inline-block; + color: #1269cf; + font-size: 10px; + line-height: inherit; + vertical-align: middle; +} + +.uppy-StatusBar-actionBtn { + font-size: 11px; +} + +.uppy-StatusBar-actionBtn--disabled { + opacity: 0.4; +} + +[data-uppy-theme=dark] .uppy-StatusBar-actionBtn--disabled { + opacity: 0.7; +} + +[dir="ltr"] .uppy-StatusBar-actionBtn--retry { + margin-right: 6px; +} + +[dir="rtl"] .uppy-StatusBar-actionBtn--retry { + margin-left: 6px; +} + +.uppy-StatusBar-actionBtn--retry { + position: relative; + height: 16px; + padding: 1px 6px 3px 18px; + color: #fff; + line-height: 1; + background-color: #ff4b23; + border-radius: 8px; +} + +.uppy-StatusBar-actionBtn--retry:focus { + outline: none; +} + +.uppy-StatusBar-actionBtn--retry::-moz-focus-inner { + border: 0; +} + +.uppy-StatusBar-actionBtn--retry:focus { + box-shadow: 0 0 0 3px rgba(18, 105, 207, 0.5); +} + +[data-uppy-theme=dark] .uppy-StatusBar-actionBtn--retry:focus { + outline: none; +} + +[data-uppy-theme=dark] .uppy-StatusBar-actionBtn--retry::-moz-focus-inner { + border: 0; +} + +[data-uppy-theme=dark] .uppy-StatusBar-actionBtn--retry:focus { + box-shadow: 0 0 0 2px rgba(170, 225, 255, 0.85); +} + +.uppy-StatusBar-actionBtn--retry:hover { + background-color: #f92d00; +} + +[dir="ltr"] .uppy-StatusBar-actionBtn--retry svg { + left: 6px; +} + +[dir="rtl"] .uppy-StatusBar-actionBtn--retry svg { + right: 6px; +} + +.uppy-StatusBar-actionBtn--retry svg { + position: absolute; + top: 3px; +} + +.uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload { + width: 100%; + padding: 15px 10px; + color: #fff; + font-size: 14px; + line-height: 1; + background-color: #1bb240; +} + +.uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload:hover { + background-color: #189c38; +} + +[data-uppy-theme=dark] .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload { + background-color: #1c8b37; +} + +[data-uppy-theme=dark] .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload:hover { + background-color: #18762f; +} + +.uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload { + width: auto; + padding: 13px 22px; +} + +.uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload.uppy-StatusBar-actionBtn--disabled:hover { + background-color: #1bb240; + cursor: not-allowed; +} + +[data-uppy-theme=dark] .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload.uppy-StatusBar-actionBtn--disabled:hover { + background-color: #1c8b37; +} + +.uppy-StatusBar:not(.is-waiting) .uppy-StatusBar-actionBtn--upload { + color: #1269cf; + background-color: transparent; +} + +[dir="ltr"] .uppy-StatusBar-actionBtn--uploadNewlyAdded { + padding-right: 3px; +} + +[dir="rtl"] .uppy-StatusBar-actionBtn--uploadNewlyAdded { + padding-left: 3px; +} + +[dir="ltr"] .uppy-StatusBar-actionBtn--uploadNewlyAdded { + padding-left: 3px; +} + +[dir="rtl"] .uppy-StatusBar-actionBtn--uploadNewlyAdded { + padding-right: 3px; +} + +.uppy-StatusBar-actionBtn--uploadNewlyAdded { + padding-bottom: 1px; + border-radius: 3px; +} + +.uppy-StatusBar-actionBtn--uploadNewlyAdded:focus { + outline: none; +} + +.uppy-StatusBar-actionBtn--uploadNewlyAdded::-moz-focus-inner { + border: 0; +} + +.uppy-StatusBar-actionBtn--uploadNewlyAdded:focus { + box-shadow: 0 0 0 3px rgba(18, 105, 207, 0.5); +} + +[data-uppy-theme=dark] .uppy-StatusBar-actionBtn--uploadNewlyAdded:focus { + outline: none; +} + +[data-uppy-theme=dark] .uppy-StatusBar-actionBtn--uploadNewlyAdded::-moz-focus-inner { + border: 0; +} + +[data-uppy-theme=dark] .uppy-StatusBar-actionBtn--uploadNewlyAdded:focus { + box-shadow: 0 0 0 2px rgba(170, 225, 255, 0.85); +} + +.uppy-StatusBar.is-preprocessing .uppy-StatusBar-actionBtn--uploadNewlyAdded, .uppy-StatusBar.is-postprocessing .uppy-StatusBar-actionBtn--uploadNewlyAdded { + display: none; +} + +.uppy-StatusBar-actionBtn--done { + padding: 7px 8px; + line-height: 1; + border-radius: 3px; +} + +.uppy-StatusBar-actionBtn--done:focus { + outline: none; +} + +.uppy-StatusBar-actionBtn--done::-moz-focus-inner { + border: 0; +} + +.uppy-StatusBar-actionBtn--done:hover { + color: #0e51a0; +} + +.uppy-StatusBar-actionBtn--done:focus { + background-color: #dfe6f1; +} + +[data-uppy-theme=dark] .uppy-StatusBar-actionBtn--done:focus { + background-color: #333; +} + +[data-uppy-theme=dark] .uppy-StatusBar-actionBtn--done { + color: #02baf2; +} + +.uppy-StatusBar-actionBtn--done { + font-size: 14px; +} + +.uppy-StatusBar-serviceMsg { + padding-left: 10px; + color: #000; + font-size: 11px; + line-height: 1.1; +} + +.uppy-StatusBar-serviceMsg { + padding-left: 15px; + font-size: 14px; +} + +[data-uppy-theme=dark] .uppy-StatusBar-serviceMsg { + color: #eaeaea; +} + +.uppy-StatusBar-serviceMsg-ghostsIcon { + position: relative; + top: 2px; + left: 6px; + width: 10px; + vertical-align: text-bottom; + opacity: 0.5; +} + +.uppy-StatusBar-serviceMsg-ghostsIcon { + top: 1px; + left: 10px; + width: 15px; +} + +[dir="ltr"] .uppy-StatusBar-details { + left: 2px; +} + +[dir="rtl"] .uppy-StatusBar-details { + right: 2px; +} + +.uppy-StatusBar-details { + position: relative; + top: 0; + display: inline-block; + width: 13px; + height: 13px; + color: #fff; + font-weight: 600; + font-size: 10px; + line-height: 12px; + text-align: center; + vertical-align: middle; + background-color: #939393; + border-radius: 50%; + cursor: help; + -webkit-appearance: none; + appearance: none; +} + +.uppy-StatusBar-details::after { + line-height: 1.3; + word-wrap: break-word; +} + +[dir="ltr"] .uppy-StatusBar-spinner { + margin-right: 10px; +} + +[dir="rtl"] .uppy-StatusBar-spinner { + margin-left: 10px; +} + +.uppy-StatusBar-spinner { + animation-name: uppy-StatusBar-spinnerAnimation; + animation-duration: 1s; + animation-timing-function: linear; + animation-iteration-count: infinite; + fill: #1269cf; +} + +.uppy-StatusBar.is-preprocessing .uppy-StatusBar-spinner, +.uppy-StatusBar.is-postprocessing .uppy-StatusBar-spinner { + fill: #f6a623; +} + +@keyframes uppy-StatusBar-spinnerAnimation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +.uppy-ProviderBrowser-viewType--grid ul.uppy-ProviderBrowser-list, +.uppy-ProviderBrowser-viewType--unsplash ul.uppy-ProviderBrowser-list { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-start; + justify-content: space-between; + padding: 6px; +} + +.uppy-ProviderBrowser-viewType--grid ul.uppy-ProviderBrowser-list::after, +.uppy-ProviderBrowser-viewType--unsplash ul.uppy-ProviderBrowser-list::after { + flex: auto; + content: ""; +} + +.uppy-ProviderBrowser-viewType--grid li.uppy-ProviderBrowserItem, +.uppy-ProviderBrowser-viewType--unsplash li.uppy-ProviderBrowserItem { + position: relative; + width: 50%; + margin: 0; +} + +.uppy-ProviderBrowser-viewType--grid li.uppy-ProviderBrowserItem, +.uppy-ProviderBrowser-viewType--unsplash li.uppy-ProviderBrowserItem { + width: 33.3333%; +} + +.uppy-size--lg .uppy-ProviderBrowser-viewType--grid li.uppy-ProviderBrowserItem, +.uppy-size--lg .uppy-ProviderBrowser-viewType--unsplash li.uppy-ProviderBrowserItem { + width: 25%; +} + +.uppy-ProviderBrowser-viewType--grid li.uppy-ProviderBrowserItem::before, +.uppy-ProviderBrowser-viewType--unsplash li.uppy-ProviderBrowserItem::before { + display: block; + padding-top: 100%; + content: ""; +} + +.uppy-ProviderBrowser-viewType--grid li.uppy-ProviderBrowserItem--selected img, +.uppy-ProviderBrowser-viewType--grid li.uppy-ProviderBrowserItem--selected svg, +.uppy-ProviderBrowser-viewType--unsplash li.uppy-ProviderBrowserItem--selected img, +.uppy-ProviderBrowser-viewType--unsplash li.uppy-ProviderBrowserItem--selected svg { + opacity: 0.85; +} + +.uppy-ProviderBrowser-viewType--grid li.uppy-ProviderBrowserItem--disabled, +.uppy-ProviderBrowser-viewType--unsplash li.uppy-ProviderBrowserItem--disabled { + opacity: 0.5; +} + +.uppy-ProviderBrowser-viewType--grid li.uppy-ProviderBrowserItem--noPreview .uppy-ProviderBrowserItem-inner, +.uppy-ProviderBrowser-viewType--unsplash li.uppy-ProviderBrowserItem--noPreview .uppy-ProviderBrowserItem-inner { + background-color: rgba(147, 147, 147, 0.2); +} + +[data-uppy-theme=dark] .uppy-ProviderBrowser-viewType--grid li.uppy-ProviderBrowserItem--noPreview .uppy-ProviderBrowserItem-inner, +[data-uppy-theme=dark] .uppy-ProviderBrowser-viewType--unsplash li.uppy-ProviderBrowserItem--noPreview .uppy-ProviderBrowserItem-inner { + background-color: rgba(234, 234, 234, 0.2); +} + +.uppy-ProviderBrowser-viewType--grid li.uppy-ProviderBrowserItem--noPreview svg, +.uppy-ProviderBrowser-viewType--unsplash li.uppy-ProviderBrowserItem--noPreview svg { + width: 30%; + height: 30%; + fill: rgba(0, 0, 0, 0.7); +} + +[data-uppy-theme=dark] .uppy-ProviderBrowser-viewType--grid li.uppy-ProviderBrowserItem--noPreview svg, +[data-uppy-theme=dark] .uppy-ProviderBrowser-viewType--unsplash li.uppy-ProviderBrowserItem--noPreview svg { + fill: rgba(255, 255, 255, 0.8); +} + +.uppy-ProviderBrowser-viewType--grid .uppy-ProviderBrowserItem-inner, +.uppy-ProviderBrowser-viewType--unsplash .uppy-ProviderBrowserItem-inner { + position: absolute; + top: 7px; + right: 7px; + bottom: 7px; + left: 7px; + width: calc(100% - 14px); + height: calc(100% - 14px); + overflow: hidden; + text-align: center; + border-radius: 4px; +} + +@media (hover: none) { + .uppy-ProviderBrowser-viewType--grid .uppy-ProviderBrowserItem-inner .uppy-ProviderBrowserItem-author, + .uppy-ProviderBrowser-viewType--unsplash .uppy-ProviderBrowserItem-inner .uppy-ProviderBrowserItem-author { + display: block; + } +} + +[data-uppy-theme=dark] .uppy-ProviderBrowser-viewType--grid .uppy-ProviderBrowserItem-inner, +[data-uppy-theme=dark] .uppy-ProviderBrowser-viewType--unsplash .uppy-ProviderBrowserItem-inner { + box-shadow: 0 0 0 3px rgba(170, 225, 255, 0.7); +} + +.uppy-ProviderBrowser-viewType--grid .uppy-ProviderBrowserItem-inner img, +.uppy-ProviderBrowser-viewType--unsplash .uppy-ProviderBrowserItem-inner img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 4px; +} + +.uppy-ProviderBrowser-viewType--grid .uppy-ProviderBrowserItem-author, +.uppy-ProviderBrowser-viewType--unsplash .uppy-ProviderBrowserItem-author { + position: absolute; + display: none; + bottom: 0; + left: 0; + width: 100%; + background: rgba(0, 0, 0, 0.3); color: white; - /*font-size: v-bind('fontSize');*/ + font-weight: 500; + font-size: 12px; + margin: 0; + padding: 5px; + text-decoration: none; +} + +.uppy-ProviderBrowser-viewType--grid .uppy-ProviderBrowserItem-author:hover, +.uppy-ProviderBrowser-viewType--unsplash .uppy-ProviderBrowserItem-author:hover { + background: rgba(0, 0, 0, 0.4); + text-decoration: underline; +} + +.uppy-ProviderBrowser-viewType--grid .uppy-ProviderBrowserItem-checkbox, +.uppy-ProviderBrowser-viewType--unsplash .uppy-ProviderBrowserItem-checkbox { + position: absolute; + top: 16px; + right: 16px; + z-index: 1002; + width: 26px; + height: 26px; + background-color: #1269cf; + border-radius: 50%; + opacity: 0; +} + +[dir="ltr"] .uppy-ProviderBrowser-viewType--grid .uppy-ProviderBrowserItem-checkbox::after, [dir="ltr"] +.uppy-ProviderBrowser-viewType--unsplash .uppy-ProviderBrowserItem-checkbox::after { + left: 7px; +} + +[dir="rtl"] .uppy-ProviderBrowser-viewType--grid .uppy-ProviderBrowserItem-checkbox::after, [dir="rtl"] +.uppy-ProviderBrowser-viewType--unsplash .uppy-ProviderBrowserItem-checkbox::after { + right: 7px; +} + +.uppy-ProviderBrowser-viewType--grid .uppy-ProviderBrowserItem-checkbox::after, +.uppy-ProviderBrowser-viewType--unsplash .uppy-ProviderBrowserItem-checkbox::after { + top: 8px; + width: 12px; + height: 7px; +} + +.uppy-ProviderBrowser-viewType--grid .uppy-ProviderBrowserItem--is-checked .uppy-ProviderBrowserItem-checkbox, +.uppy-ProviderBrowser-viewType--unsplash .uppy-ProviderBrowserItem--is-checked .uppy-ProviderBrowserItem-checkbox { + opacity: 1; +} + +.uppy-ProviderBrowser-viewType--grid .uppy-ProviderBrowserItem-checkbox--grid:hover + label .uppy-ProviderBrowserItem-author, +.uppy-ProviderBrowser-viewType--grid .uppy-ProviderBrowserItem-checkbox--grid:focus + label .uppy-ProviderBrowserItem-author, +.uppy-ProviderBrowser-viewType--unsplash .uppy-ProviderBrowserItem-checkbox--grid:hover + label .uppy-ProviderBrowserItem-author, +.uppy-ProviderBrowser-viewType--unsplash .uppy-ProviderBrowserItem-checkbox--grid:focus + label .uppy-ProviderBrowserItem-author { + display: block; +} + +.uppy-ProviderBrowser-viewType--grid .uppy-ProviderBrowserItem-checkbox--grid:focus + label, +.uppy-ProviderBrowser-viewType--unsplash .uppy-ProviderBrowserItem-checkbox--grid:focus + label { + box-shadow: 0 0 0 3px rgba(18, 105, 207, 0.5); +} + +.uppy-ProviderBrowser-viewType--grid .uppy-ProviderBrowserItem-checkbox--grid:focus + label:focus, +.uppy-ProviderBrowser-viewType--unsplash .uppy-ProviderBrowserItem-checkbox--grid:focus + label:focus { + outline: none; +} + +.uppy-ProviderBrowser-viewType--grid .uppy-ProviderBrowserItem-checkbox--grid:focus + label::-moz-focus-inner, +.uppy-ProviderBrowser-viewType--unsplash .uppy-ProviderBrowserItem-checkbox--grid:focus + label::-moz-focus-inner { + border: 0; +} + +.uppy-ProviderBrowser-viewType--list { + background-color: #fff; +} + +[data-uppy-theme=dark] .uppy-ProviderBrowser-viewType--list { + background-color: #1f1f1f; +} + +.uppy-ProviderBrowser-viewType--list li.uppy-ProviderBrowserItem { + display: flex; + align-items: center; + margin: 0; + padding: 7px 15px; +} + +[data-uppy-theme=dark] .uppy-ProviderBrowser-viewType--list li.uppy-ProviderBrowserItem { + color: #eaeaea; +} + +.uppy-ProviderBrowser-viewType--list li.uppy-ProviderBrowserItem--disabled { + opacity: 0.6; +} + +[dir="ltr"] .uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-checkbox { + margin-right: 15px; +} + +[dir="rtl"] .uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-checkbox { + margin-left: 15px; +} + +.uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-checkbox { + width: 17px; + height: 17px; + background-color: #fff; + border: 1px solid #cfcfcf; + border-radius: 3px; +} + +.uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-checkbox:focus { + border: 1px solid #1269cf; + outline: none; + box-shadow: 0 0 0 3px rgba(18, 105, 207, 0.25); +} + +[dir="ltr"] .uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-checkbox::after { + left: 3px; +} + +[dir="rtl"] .uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-checkbox::after { + right: 3px; +} + +.uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-checkbox::after { + top: 4px; + width: 9px; + height: 5px; + opacity: 0; +} + +[data-uppy-theme=dark] .uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-checkbox:focus { + border-color: rgba(2, 186, 242, 0.7); + box-shadow: 0 0 0 3px rgba(2, 186, 242, 0.2); +} + +.uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem--is-checked .uppy-ProviderBrowserItem-checkbox, +.uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem--is-partial .uppy-ProviderBrowserItem-checkbox { + background-color: #1269cf; + border-color: #1269cf; +} + +.uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem--is-checked .uppy-ProviderBrowserItem-checkbox::after, +.uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem--is-partial .uppy-ProviderBrowserItem-checkbox::after { + opacity: 1; +} + +.uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-inner { + display: flex; + align-items: center; + color: inherit; + font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Segoe UI Symbol", "Segoe UI Emoji", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif; + padding: 2px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-inner:focus { + text-decoration: underline; + outline: none; +} + +[dir="ltr"] .uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-inner img, [dir="ltr"] +.uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-inner svg { + margin-right: 8px; +} + +[dir="rtl"] .uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-inner img, [dir="rtl"] +.uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-inner svg { + margin-left: 8px; +} + +.uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-inner span { + overflow: hidden; + line-height: 1.2; + white-space: nowrap; + text-overflow: ellipsis; +} + +.uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem--disabled .uppy-ProviderBrowserItem-inner { + cursor: default; +} + +[dir="ltr"] .uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-iconWrap { + margin-right: 7px; +} + +[dir="rtl"] .uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-iconWrap { + margin-left: 7px; +} + +.uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-iconWrap { + width: 20px; +} + +.uppy-ProviderBrowserItem-checkbox { + position: relative; + flex-shrink: 0; + cursor: pointer; +} + +.uppy-ProviderBrowserItem-checkbox:disabled { + cursor: default; +} + +.uppy-ProviderBrowserItem-checkbox:disabled::after { + cursor: default; +} + +[data-uppy-theme=dark] .uppy-ProviderBrowserItem-checkbox { + background-color: #1f1f1f; + border-color: #939393; +} + +[data-uppy-theme=dark] .uppy-ProviderBrowserItem--is-checked .uppy-ProviderBrowserItem-checkbox { + background-color: #333; +} + +.uppy-ProviderBrowserItem--is-checked .uppy-ProviderBrowserItem-checkbox::after { + position: absolute; + border-bottom: 2px solid #eaeaea; + border-left: 2px solid #eaeaea; + transform: rotate(-45deg); + cursor: pointer; + content: ""; +} + +.uppy-ProviderBrowserItem--is-partial .uppy-ProviderBrowserItem-checkbox::after { + content: "" !important; + position: absolute !important; + top: 50% !important; + left: 20% !important; + right: 20% !important; + height: 2px !important; + background-color: #eaeaea !important; + transform: translateY(-50%) !important; +} + +.uppy-SearchProvider { + display: flex; + flex: 1; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +} + +[data-uppy-theme=dark] .uppy-SearchProvider { + background-color: #1f1f1f; +} + +.uppy-SearchProvider-input { + width: 90%; + max-width: 650px; + margin-bottom: 15px; +} + +.uppy-SearchProvider-input { + margin-bottom: 20px; +} + +.uppy-SearchProvider-input::-webkit-search-cancel-button { + display: none; +} + +.uppy-SearchProvider-searchButton { + padding: 13px 25px; +} + +.uppy-SearchProvider-searchButton { + padding: 13px 30px; +} + +.uppy-DashboardContent-panelBody { + display: flex; + flex: 1; + align-items: center; + justify-content: center; +} + +[data-uppy-theme=dark] .uppy-DashboardContent-panelBody { + background-color: #1f1f1f; +} + +.uppy-Provider-auth, +.uppy-Provider-error, +.uppy-Provider-loading, +.uppy-Provider-empty { + display: flex; + flex: 1; + flex-flow: column wrap; + align-items: center; + justify-content: center; + color: #939393; +} + +.uppy-Provider-empty { + color: #939393; +} + +.uppy-Provider-authIcon svg { + width: 100px; + height: 75px; +} + +.uppy-Provider-authTitle { + max-width: 500px; + margin-bottom: 30px; + padding: 0 15px; + color: #757575; + font-weight: 400; + font-size: 17px; + line-height: 1.4; + text-align: center; +} + +.uppy-Provider-authTitle { + font-size: 20px; +} + +[data-uppy-theme=dark] .uppy-Provider-authTitle { + color: #cfcfcf; +} + +.uppy-Provider-btn-google { + display: flex; + align-items: center; + padding: 8px 12px !important; + background: #4285f4; +} + +.uppy-Provider-btn-google:hover { + background-color: #1266f1; +} + +.uppy-Provider-btn-google:focus { + outline: none; + box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.4); +} + +.uppy-Provider-btn-google svg { + margin-right: 8px; +} + +[dir="ltr"] .uppy-Provider-breadcrumbs { + text-align: left; +} + +[dir="rtl"] .uppy-Provider-breadcrumbs { + text-align: right; +} + +.uppy-Provider-breadcrumbs { + flex: 1; + margin-bottom: 10px; + color: #525252; + font-size: 12px; +} + +.uppy-Provider-breadcrumbs { + margin-bottom: 0; +} + +[data-uppy-theme=dark] .uppy-Provider-breadcrumbs { + color: #eaeaea; +} + +[dir="ltr"] .uppy-Provider-breadcrumbsIcon { + margin-right: 4px; +} + +[dir="rtl"] .uppy-Provider-breadcrumbsIcon { + margin-left: 4px; +} + +.uppy-Provider-breadcrumbsIcon { + display: inline-block; + color: #525252; + line-height: 1; + vertical-align: middle; +} + +.uppy-Provider-breadcrumbsIcon svg { + width: 13px; + height: 13px; + fill: #525252; +} + +.uppy-Provider-breadcrumbs button { + display: inline-block; + padding: 4px; + line-height: inherit; + border-radius: 3px; +} + +.uppy-Provider-breadcrumbs button:focus { + outline: none; +} + +.uppy-Provider-breadcrumbs button::-moz-focus-inner { + border: 0; +} + +.uppy-Provider-breadcrumbs button:hover { + color: #0e51a0; +} + +.uppy-Provider-breadcrumbs button:focus { + background-color: #dfe6f1; +} + +[data-uppy-theme=dark] .uppy-Provider-breadcrumbs button:focus { + background-color: #333; +} + +.uppy-Provider-breadcrumbs button:not(:last-of-type) { + text-decoration: underline; +} + +.uppy-Provider-breadcrumbs button:last-of-type { + color: #333; + font-weight: 500; + cursor: normal; + pointer-events: none; +} + +.uppy-Provider-breadcrumbs button:hover { + cursor: pointer; +} + +[data-uppy-theme=dark] .uppy-Provider-breadcrumbs button { + color: #eaeaea; +} + +.uppy-ProviderBrowser { + display: flex; + flex: 1; + flex-direction: column; + height: 100%; + font-weight: 400; + font-size: 14px; +} + +.uppy-ProviderBrowser-user { + margin: 0 8px 0 0; + color: #333; + font-weight: 500; +} + +[data-uppy-theme=dark] .uppy-ProviderBrowser-user { + color: #eaeaea; +} + +[dir="ltr"] .uppy-ProviderBrowser-user::after { + left: 4px; +} + +[dir="rtl"] .uppy-ProviderBrowser-user::after { + right: 4px; +} + +.uppy-ProviderBrowser-user::after { + position: relative; + color: #939393; + font-weight: normal; + content: "·"; +} + +.uppy-ProviderBrowser-header { + position: relative; + z-index: 1001; + border-bottom: 1px solid #eaeaea; +} + +[data-uppy-theme=dark] .uppy-ProviderBrowser-header { + border-bottom: 1px solid #333; +} + +.uppy-ProviderBrowser-headerBar { + z-index: 1001; + padding: 7px 15px; + color: #757575; + font-size: 12px; + line-height: 1.4; + background-color: #fafafa; +} + +.uppy-ProviderBrowser-headerBar { + display: flex; + align-items: center; +} + +[data-uppy-theme=dark] .uppy-ProviderBrowser-headerBar { + background-color: #1f1f1f; +} + +.uppy-ProviderBrowser-headerBar--simple { + display: block; + justify-content: center; + text-align: center; +} + +.uppy-ProviderBrowser-headerBar--simple .uppy-Provider-breadcrumbsWrap { + display: inline-block; + flex: none; + vertical-align: middle; +} + +.uppy-ProviderBrowser-searchFilter { + position: relative; + display: flex; + align-items: center; + width: 100%; + height: 30px; + padding-left: 8px; + padding-right: 8px; + margin-top: 15px; + margin-bottom: 15px; +} + +[dir="ltr"] .uppy-ProviderBrowser-searchFilterInput { + padding-left: 30px; +} + +[dir="rtl"] .uppy-ProviderBrowser-searchFilterInput { + padding-right: 30px; +} + +[dir="ltr"] .uppy-ProviderBrowser-searchFilterInput { + padding-right: 30px; +} + +[dir="rtl"] .uppy-ProviderBrowser-searchFilterInput { + padding-left: 30px; +} + +.uppy-ProviderBrowser-searchFilterInput { + z-index: 1001; + width: 100%; + height: 30px; + font-size: 13px; + font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Segoe UI Symbol", "Segoe UI Emoji", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif; + line-height: 1.4; + background-color: #eaeaea; + border: 0; + border-radius: 4px; + outline: 0; + color: #333; +} + +.uppy-ProviderBrowser-searchFilterInput::-webkit-search-cancel-button { + display: none; +} + +[data-uppy-theme=dark] .uppy-ProviderBrowser-searchFilterInput { + color: #eaeaea; + background-color: #1f1f1f; +} + +.uppy-ProviderBrowser-searchFilterInput:focus { + background-color: #cfcfcf; + border: 0; +} + +[data-uppy-theme=dark] .uppy-ProviderBrowser-searchFilterInput:focus { + background-color: #333; +} + +[dir="ltr"] .uppy-ProviderBrowser-searchFilterIcon { + left: 16px; +} + +[dir="rtl"] .uppy-ProviderBrowser-searchFilterIcon { + right: 16px; +} + +.uppy-ProviderBrowser-searchFilterIcon { + position: absolute; + z-index: 1002; + width: 12px; + height: 12px; + color: #757575; +} + +.uppy-ProviderBrowser-searchFilterInput::placeholder { + color: #939393; + opacity: 1; +} + +[dir="ltr"] .uppy-ProviderBrowser-searchFilterReset { + right: 16px; +} + +[dir="rtl"] .uppy-ProviderBrowser-searchFilterReset { + left: 16px; +} + +.uppy-ProviderBrowser-searchFilterReset { + border-radius: 3px; + position: absolute; + z-index: 1002; + width: 22px; + height: 22px; + padding: 6px; + color: #939393; + cursor: pointer; +} + +.uppy-ProviderBrowser-searchFilterReset:focus { + outline: none; +} + +.uppy-ProviderBrowser-searchFilterReset::-moz-focus-inner { + border: 0; +} + +.uppy-ProviderBrowser-searchFilterReset:focus { + box-shadow: 0 0 0 3px rgba(18, 105, 207, 0.5); +} + +.uppy-ProviderBrowser-searchFilterReset:hover { + color: #757575; +} + +.uppy-ProviderBrowser-searchFilterReset svg { + vertical-align: text-top; +} + +.uppy-ProviderBrowser-userLogout { + padding: 4px; + color: #1269cf; + line-height: inherit; + border-radius: 3px; + cursor: pointer; +} + +.uppy-ProviderBrowser-userLogout:focus { + outline: none; +} + +.uppy-ProviderBrowser-userLogout::-moz-focus-inner { + border: 0; +} + +.uppy-ProviderBrowser-userLogout:hover { + color: #0e51a0; +} + +.uppy-ProviderBrowser-userLogout:focus { + background-color: #dfe6f1; +} + +[data-uppy-theme=dark] .uppy-ProviderBrowser-userLogout:focus { + background-color: #333; +} + +.uppy-ProviderBrowser-userLogout:hover { + text-decoration: underline; +} + +[data-uppy-theme=dark] .uppy-ProviderBrowser-userLogout { + color: #eaeaea; +} + +.uppy-ProviderBrowser-body { + position: relative; + flex: 1; +} + +.uppy-ProviderBrowser-list { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: block; + flex: 1; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + overflow-x: hidden; + overflow-y: auto; + list-style: none; + background-color: #fff; + border-spacing: 0; + -webkit-overflow-scrolling: touch; +} + +[data-uppy-theme=dark] .uppy-ProviderBrowser-list { + background-color: #1f1f1f; +} + +.uppy-ProviderBrowser-list:focus { + outline: none; +} + +.uppy-ProviderBrowserItem-inner { + font-weight: 500; + font-size: 13px; + cursor: pointer; +} + +.uppy-ProviderBrowser-footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: 15px; + background-color: #fff; + border-top: 1px solid #eaeaea; +} + +[dir="ltr"] .uppy-ProviderBrowser-footer button { + margin-right: 8px; +} + +[dir="rtl"] .uppy-ProviderBrowser-footer button { + margin-left: 8px; +} + +[data-uppy-theme=dark] .uppy-ProviderBrowser-footer { + background-color: #1f1f1f; + border-top: 1px solid #333; +} + +.uppy-ProviderBrowser-footer-buttons { + flex-shrink: 0; +} + +.uppy-ProviderBrowser-footer-error { + color: #e32437; + line-height: 18px; +} + +@media (max-width: 426px) { + .uppy-ProviderBrowser-footer { + flex-direction: column-reverse; + align-items: stretch; + } + .uppy-ProviderBrowser-footer-error { + padding-bottom: 10px; + } +} + +.uppy-Dashboard-Item-previewInnerWrap { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + overflow: hidden; + border-radius: 3px; + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.4); +} + +.uppy-Dashboard-Item-previewInnerWrap { + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); +} + +.uppy-Dashboard--singleFile .uppy-Dashboard-Item-previewInnerWrap { + box-shadow: none; +} + +.uppy-Dashboard-Item-previewInnerWrap::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1001; + display: none; + background-color: rgba(0, 0, 0, 0.65); + content: ""; +} + +.uppy-Dashboard-Item-previewLink { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1002; +} + +.uppy-Dashboard-Item-previewLink:focus { + box-shadow: inset 0 0 0 3px #579df0; +} + +[data-uppy-theme=dark] .uppy-Dashboard-Item-previewLink:focus { + box-shadow: inset 0 0 0 3px #016c8d; +} + +.uppy-Dashboard-Item-preview img.uppy-Dashboard-Item-previewImg { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 3px; + transform: translateZ(0); +} + +.uppy-Dashboard--singleFile .uppy-Dashboard-Item-preview img.uppy-Dashboard-Item-previewImg { + object-fit: contain; + width: auto; + height: auto; + max-width: 100%; + max-height: 100%; + padding: 10px; +} + +.uppy-Dashboard-Item-progress { + position: absolute; + top: 50%; + left: 50%; + z-index: 1002; + width: 120px; + color: #fff; + text-align: center; + transform: translate(-50%, -50%); + transition: all 0.35 ease; +} + +.uppy-Dashboard-Item-progressIndicator { + display: inline-block; + width: 38px; + height: 38px; + opacity: 0.9; + color: #fff; +} + +.uppy-Dashboard-Item-progressIndicator { + width: 55px; + height: 55px; +} + +button.uppy-Dashboard-Item-progressIndicator { + cursor: pointer; +} + +button.uppy-Dashboard-Item-progressIndicator:focus { + outline: none; +} + +button.uppy-Dashboard-Item-progressIndicator::-moz-focus-inner { + border: 0; +} + +button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progressIcon--bg, +button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progressIcon--retry { + fill: #579df0; +} + +.uppy-Dashboard-Item-progressIcon--circle { + width: 100%; + height: 100%; +} + +.uppy-Dashboard-Item-progressIcon--bg { + stroke: rgba(255, 255, 255, 0.4); +} + +.uppy-Dashboard-Item-progressIcon--progress { + transition: stroke-dashoffset 0.5s ease-out; + stroke: #fff; +} + +.uppy-Dashboard-Item-progressIcon--play { + transition: all 0.2s; + fill: #fff; + stroke: #fff; +} + +.uppy-Dashboard-Item-progressIcon--cancel { + transition: all 0.2s; + fill: #fff; +} + +.uppy-Dashboard-Item-progressIcon--pause { + transition: all 0.2s; + fill: #fff; + stroke: #fff; +} + +.uppy-Dashboard-Item-progressIcon--check { + transition: all 0.2s; + fill: #fff; +} + +.uppy-Dashboard-Item-progressIcon--retry { + fill: #fff; +} + +[dir="ltr"] .uppy-Dashboard-Item.is-complete .uppy-Dashboard-Item-progress { + right: -8px; +} + +[dir="rtl"] .uppy-Dashboard-Item.is-complete .uppy-Dashboard-Item-progress { + left: -8px; +} + +[dir="ltr"] .uppy-Dashboard-Item.is-complete .uppy-Dashboard-Item-progress { + left: initial; +} + +[dir="rtl"] .uppy-Dashboard-Item.is-complete .uppy-Dashboard-Item-progress { + right: initial; +} + +.uppy-Dashboard-Item.is-complete .uppy-Dashboard-Item-progress { + top: -9px; + width: auto; + transform: initial; +} + +.uppy-Dashboard-Item.is-error .uppy-Dashboard-Item-progressIndicator { + width: 18px; + height: 18px; +} + +.uppy-Dashboard-Item.is-error .uppy-Dashboard-Item-progressIndicator { + width: 28px; + height: 28px; +} + +.uppy-Dashboard-Item.is-complete .uppy-Dashboard-Item-progressIndicator { + width: 18px; + height: 18px; + opacity: 1; +} + +.uppy-Dashboard-Item.is-complete .uppy-Dashboard-Item-progressIndicator { + width: 22px; + height: 22px; +} + +.uppy-Dashboard-Item.is-processing .uppy-Dashboard-Item-progress { + opacity: 0; +} + +[dir="ltr"] .uppy-Dashboard-Item-fileInfo { + padding-right: 5px; +} + +[dir="rtl"] .uppy-Dashboard-Item-fileInfo { + padding-left: 5px; +} + +[dir="ltr"] .uppy-Dashboard--singleFile .uppy-Dashboard-Item-fileInfo { + padding-right: 10px; +} + +[dir="rtl"] .uppy-Dashboard--singleFile .uppy-Dashboard-Item-fileInfo { + padding-left: 10px; +} + +[dir="ltr"] .uppy-Dashboard--singleFile .uppy-Dashboard-Item-fileInfo { + padding-right: 15px; +} + +[dir="rtl"] .uppy-Dashboard--singleFile .uppy-Dashboard-Item-fileInfo { + padding-left: 15px; +} + +.uppy-Dashboard-Item-name { + margin-bottom: 5px; + font-weight: 500; + font-size: 12px; + line-height: 1.3; + word-wrap: anywhere; + word-break: break-all; +} + +[data-uppy-theme=dark] .uppy-Dashboard-Item-name { + color: #eaeaea; +} + +.uppy-Dashboard--singleFile .uppy-Dashboard-Item-name { + font-size: 14px; + line-height: 1.4; +} + +.uppy-Dashboard-Item-fileName { + display: flex; + align-items: baseline; +} + +.uppy-Dashboard-Item-fileName button { + margin-left: 5px; +} + +.uppy-Dashboard-Item-author { + color: #757575; + vertical-align: bottom; + font-size: 11px; + font-weight: normal; + display: inline-block; + line-height: 1; + margin-bottom: 5px; +} + +.uppy-Dashboard-Item-author a { + color: #757575; +} + +.uppy-Dashboard-Item-status { + color: #757575; + font-weight: normal; + font-size: 11px; + line-height: 1; +} + +[data-uppy-theme=dark] .uppy-Dashboard-Item-status { + color: #bbb; +} + +.uppy-Dashboard-Item-statusSize { + display: inline-block; + text-transform: uppercase; + vertical-align: bottom; + margin-bottom: 5px; +} + +.uppy-Dashboard-Item-reSelect { + color: #1269cf; + font-weight: 600; + font-size: inherit; + font-family: inherit; +} + +.uppy-Dashboard-Item-errorMessage { + font-size: 11px; + font-weight: 500; + line-height: 1.3; + color: #a51523; + background-color: #fdeff1; + padding: 5px 6px; +} + +.uppy-Dashboard-Item-errorMessageBtn { + font-size: 11px; + text-decoration: underline; + color: #a51523; + cursor: pointer; + font-weight: 500; +} + +.uppy-Dashboard-Item-preview .uppy-Dashboard-Item-errorMessage { + display: none; +} + +.uppy-Dashboard-Item-preview .uppy-Dashboard-Item-errorMessage { + display: block; + border-top: 1px solid #f7c2c8; + padding: 6px 8px; + line-height: 1.4; + position: absolute; + bottom: 0; + left: 0; + right: 0; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; +} + +.uppy-Dashboard-Item-fileInfo .uppy-Dashboard-Item-errorMessage { + display: inline-block; + position: static; + border: 1px solid #f7c2c8; + border-radius: 3px; +} + +.uppy-Dashboard-Item-fileInfo .uppy-Dashboard-Item-errorMessage { + display: none; +} + +.uppy-Dashboard-Item-action { + color: #939393; + cursor: pointer; +} + +.uppy-Dashboard-Item-action:focus { + outline: none; +} + +.uppy-Dashboard-Item-action::-moz-focus-inner { + border: 0; +} + +.uppy-Dashboard-Item-action:focus { + box-shadow: 0 0 0 3px rgba(18, 105, 207, 0.5); +} + +.uppy-Dashboard-Item-action:hover { + color: #1f1f1f; + opacity: 1; +} + +[data-uppy-theme=dark] .uppy-Dashboard-Item-action { + color: #cfcfcf; +} + +[data-uppy-theme=dark] .uppy-Dashboard-Item-action:focus { + outline: none; +} + +[data-uppy-theme=dark] .uppy-Dashboard-Item-action::-moz-focus-inner { + border: 0; +} + +[data-uppy-theme=dark] .uppy-Dashboard-Item-action:focus { + box-shadow: 0 0 0 2px rgba(170, 225, 255, 0.85); +} + +[data-uppy-theme=dark] .uppy-Dashboard-Item-action:hover { + color: #eaeaea; +} + +.uppy-Dashboard-Item-action--remove { + color: #1f1f1f; + opacity: 0.95; +} + +.uppy-Dashboard-Item-action--remove:hover { + color: #000; + opacity: 1; +} + +[dir="ltr"] .uppy-Dashboard-Item-action--remove { + right: -8px; +} + +[dir="rtl"] .uppy-Dashboard-Item-action--remove { + left: -8px; +} + +.uppy-Dashboard-Item-action--remove { + position: absolute; + top: -8px; + z-index: 1002; + width: 18px; + height: 18px; + padding: 0; +} + +.uppy-Dashboard-Item-action--remove:focus { + border-radius: 50%; +} + +[dir="ltr"] .uppy-Dashboard--singleFile.uppy-size--height-md .uppy-Dashboard-Item-action--remove { + right: 8px; +} + +[dir="rtl"] .uppy-Dashboard--singleFile.uppy-size--height-md .uppy-Dashboard-Item-action--remove { + left: 8px; +} + +.uppy-Dashboard--singleFile.uppy-size--height-md .uppy-Dashboard-Item-action--remove { + position: absolute; + top: 8px; +} + +[data-uppy-theme=dark] .uppy-Dashboard-Item-action--remove { + color: #525252; +} + +[data-uppy-theme=dark] .uppy-Dashboard-Item-action--remove:hover { + color: #333; +} + +.uppy-Dashboard-Item-action--copyLink, +.uppy-Dashboard-Item-action--edit { + width: 16px; + height: 16px; + padding: 0; +} + +.uppy-Dashboard-Item-action--copyLink:focus, +.uppy-Dashboard-Item-action--edit:focus { + border-radius: 3px; +} + +.uppy-Dashboard-Item { + display: flex; + align-items: center; + padding: 10px; + border-bottom: 1px solid #eaeaea; +} + +[dir="ltr"] .uppy-Dashboard:not(.uppy-Dashboard--singleFile) .uppy-Dashboard-Item { + padding-right: 0; +} + +[dir="rtl"] .uppy-Dashboard:not(.uppy-Dashboard--singleFile) .uppy-Dashboard-Item { + padding-left: 0; +} + +[data-uppy-theme=dark] .uppy-Dashboard-Item { + border-bottom: 1px solid #333; +} + +[dir="ltr"] .uppy-Dashboard-Item { + float: left; +} + +[dir="rtl"] .uppy-Dashboard-Item { + float: right; +} + +.uppy-Dashboard-Item { + position: relative; + display: block; + /* When changing width: also update `itemsPerRow` values in `src/components/Dashboard.js`. */ + width: calc(33.333% - 15px - 15px); + height: 215px; + margin: 5px 15px; + padding: 0; + border-bottom: 0; +} + +.uppy-size--lg .uppy-Dashboard-Item { + /* When changing width: also update `itemsPerRow` values in `src/components/Dashboard.js`. */ + width: calc(25% - 15px - 15px); + height: 190px; + margin: 5px 15px; + padding: 0; +} + +.uppy-size--xl .uppy-Dashboard-Item { + /* When changing width: also update `itemsPerRow` values in `src/components/Dashboard.js`. */ + width: calc(20% - 15px - 15px); + height: 210px; + padding: 0; +} + +.uppy-Dashboard--singleFile .uppy-Dashboard-Item { + display: flex; + flex-direction: column; + width: 100%; + max-width: 400px; + height: 100%; + border-bottom: 0; + position: relative; + padding: 15px; +} + +.uppy-Dashboard-Item.is-ghost .uppy-Dashboard-Item-previewInnerWrap { + opacity: 0.2; +} + +.uppy-Dashboard-Item.is-ghost .uppy-Dashboard-Item-name { + opacity: 0.7; +} + +.uppy-Dashboard-Item.is-ghost .uppy-Dashboard-Item-preview::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1005; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='39' viewBox='0 0 35 39'%3E%3Cpath d='M1.708 38.66c1.709 0 3.417-3.417 6.834-3.417 3.416 0 5.125 3.417 8.61 3.417 3.348 0 5.056-3.417 8.473-3.417 4.305 0 5.125 3.417 6.833 3.417.889 0 1.709-.889 1.709-1.709v-19.68C34.167-5.757 0-5.757 0 17.271v19.68c0 .82.888 1.709 1.708 1.709zm8.542-17.084a3.383 3.383 0 01-3.417-3.416 3.383 3.383 0 013.417-3.417 3.383 3.383 0 013.417 3.417 3.383 3.383 0 01-3.417 3.416zm13.667 0A3.383 3.383 0 0120.5 18.16a3.383 3.383 0 013.417-3.417 3.383 3.383 0 013.416 3.417 3.383 3.383 0 01-3.416 3.416z' fill='%2523000' fill-rule='nonzero'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: 50% 10px; + background-size: 25px; + opacity: 0.5; + content: ""; +} + +.uppy-Dashboard-Item.is-ghost .uppy-Dashboard-Item-preview::before { + background-position: 50% 50%; + background-size: 40px; +} + +.uppy-Dashboard--singleFile .uppy-Dashboard-Item.is-ghost .uppy-Dashboard-Item-preview::before { + background-position: 50% 50%; + background-size: 30%; +} + +.uppy-Dashboard-Item-preview { + position: relative; + flex-grow: 0; + flex-shrink: 0; + width: 50px; + height: 50px; +} + +.uppy-Dashboard-Item-preview { + width: 100%; + height: 140px; +} + +.uppy-size--lg .uppy-Dashboard-Item-preview { + height: 120px; +} + +.uppy-size--xl .uppy-Dashboard-Item-preview { + height: 140px; +} + +.uppy-Dashboard--singleFile .uppy-Dashboard-Item-preview { + width: 100%; + max-height: 75%; + flex-grow: 1; +} + +.uppy-Dashboard--singleFile .uppy-Dashboard-Item-preview { + max-height: 100%; +} + +[dir="ltr"] .uppy-Dashboard-Item-fileInfoAndButtons { + padding-right: 8px; +} + +[dir="rtl"] .uppy-Dashboard-Item-fileInfoAndButtons { + padding-left: 8px; +} + +[dir="ltr"] .uppy-Dashboard-Item-fileInfoAndButtons { + padding-left: 12px; +} + +[dir="rtl"] .uppy-Dashboard-Item-fileInfoAndButtons { + padding-right: 12px; +} + +.uppy-Dashboard-Item-fileInfoAndButtons { + display: flex; + flex-grow: 1; + align-items: center; + justify-content: space-between; +} + +.uppy-Dashboard-Item-fileInfoAndButtons, .uppy-Dashboard--singleFile .uppy-Dashboard-Item-fileInfoAndButtons { + align-items: flex-start; + padding: 0; + padding-top: 9px; +} + +.uppy-Dashboard--singleFile .uppy-Dashboard-Item-fileInfoAndButtons { + width: 100%; + flex-grow: 0; +} + +.uppy-Dashboard-Item-fileInfo { + flex-grow: 1; + flex-shrink: 1; +} + +.uppy-Dashboard-Item-actionWrapper { + flex-grow: 0; + flex-shrink: 0; +} + +.uppy-Dashboard-Item.is-inprogress .uppy-Dashboard-Item-previewInnerWrap::after, +.uppy-Dashboard-Item.is-error .uppy-Dashboard-Item-previewInnerWrap::after { + display: block; +} + +[dir="ltr"] .uppy-Dashboard-Item-errorDetails { + left: 2px; +} + +[dir="rtl"] .uppy-Dashboard-Item-errorDetails { + right: 2px; +} + +.uppy-Dashboard-Item-errorDetails { + position: relative; + top: 0; + flex-shrink: 0; + width: 13px; + height: 13px; + color: #fff; + font-weight: 600; + font-size: 10px; + line-height: 12px; + text-align: center; + background-color: #939393; + border-radius: 50%; + border: none; + cursor: help; + -webkit-appearance: none; + appearance: none; +} + +.uppy-Dashboard-Item-errorDetails::after { + line-height: 1.3; + word-wrap: break-word; +} + +.uppy-Dashboard-FileCard { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1005; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + background-color: #fff; + border-radius: 5px; + box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1); +} + +.uppy-Dashboard-FileCard .uppy-DashboardContent-bar { + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} + +.uppy-Dashboard-FileCard .uppy-Dashboard-FileCard-actions { + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; +} + +.uppy-Dashboard-FileCard-inner { + display: flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 1; + height: 100%; + min-height: 0; +} + +.uppy-Dashboard-FileCard-preview { + position: relative; + display: flex; + flex-grow: 0; + flex-shrink: 1; + align-items: center; + justify-content: center; + height: 60%; + min-height: 0; + border-bottom: 1px solid #eaeaea; +} + +[data-uppy-theme=dark] .uppy-Dashboard-FileCard-preview { + background-color: #333; + border-bottom: 0; +} + +.uppy-Dashboard-FileCard-preview img.uppy-Dashboard-Item-previewImg { + flex: 0 0 auto; + max-width: 90%; + max-height: 90%; + object-fit: cover; + border-radius: 3px; + box-shadow: 0 3px 20px rgba(0, 0, 0, 0.15); +} + +[dir="ltr"] .uppy-Dashboard-FileCard-edit { + right: 10px; +} + +[dir="rtl"] .uppy-Dashboard-FileCard-edit { + left: 10px; +} + +.uppy-Dashboard-FileCard-edit { + position: absolute; + top: 10px; + padding: 7px 15px; + color: #fff; + font-size: 13px; + background-color: rgba(0, 0, 0, 0.5); + border-radius: 50px; +} + +.uppy-Dashboard-FileCard-edit:focus { + outline: none; +} + +.uppy-Dashboard-FileCard-edit::-moz-focus-inner { + border: 0; +} + +.uppy-Dashboard-FileCard-edit:focus { + box-shadow: 0 0 0 3px rgba(18, 105, 207, 0.5); +} + +.uppy-Dashboard-FileCard-edit:hover { + background-color: rgba(0, 0, 0, 0.8); +} + +.uppy-Dashboard-FileCard-info { + flex-grow: 0; + flex-shrink: 0; + height: 40%; + padding: 30px 20px 20px 20px; + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} + +[data-uppy-theme=dark] .uppy-Dashboard-FileCard-info { + background-color: #1f1f1f; +} + +.uppy-Dashboard-FileCard-fieldset { + max-width: 640px; + margin: auto; + margin-bottom: 12px; + padding: 0; + font-size: 0; + border: 0; +} + +.uppy-Dashboard-FileCard-label { + display: inline-block; + width: 22%; + color: #525252; + font-size: 12px; + vertical-align: middle; +} + +.uppy-Dashboard-FileCard-label { + font-size: 14px; +} + +[data-uppy-theme=dark] .uppy-Dashboard-FileCard-label { + color: #eaeaea; +} + +.uppy-Dashboard-FileCard-input { + display: inline-block; + width: 78%; + vertical-align: middle; +} + +.uppy-Dashboard-FileCard-actions { + display: flex; + flex-grow: 0; + flex-shrink: 0; + align-items: center; + height: 55px; + padding: 0 15px; + background-color: #fafafa; + border-top: 1px solid #eaeaea; +} + +.uppy-Dashboard-FileCard-actions { + height: 65px; +} + +[data-uppy-theme=dark] .uppy-Dashboard-FileCard-actions { + background-color: #1f1f1f; + border-top: 1px solid #333; +} + +[dir="ltr"] .uppy-Dashboard-FileCard-actionsBtn { + margin-right: 10px; +} + +[dir="rtl"] .uppy-Dashboard-FileCard-actionsBtn { + margin-left: 10px; +} + +.uppy-transition-slideDownUp-enter { + transform: translate3d(0, -105%, 0); + opacity: 0.01; + transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out; +} + +.uppy-transition-slideDownUp-enter.uppy-transition-slideDownUp-enter-active { + transform: translate3d(0, 0, 0); + opacity: 1; +} + +.uppy-transition-slideDownUp-leave { + transform: translate3d(0, 0, 0); + opacity: 1; + transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out; +} + +.uppy-transition-slideDownUp-leave.uppy-transition-slideDownUp-leave-active { + transform: translate3d(0, -105%, 0); + opacity: 0.01; +} + +@keyframes uppy-Dashboard-fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes uppy-Dashboard-fadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +@keyframes uppy-Dashboard-slideDownAndFadeIn { + from { + transform: translate3d(-50%, -70%, 0); + opacity: 0; + } + to { + transform: translate3d(-50%, -50%, 0); + opacity: 1; + } +} + +@keyframes uppy-Dashboard-slideDownAndFadeIn--small { + from { + transform: translate3d(0, -20%, 0); + opacity: 0; + } + to { + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +@keyframes uppy-Dashboard-slideUpFadeOut { + from { + transform: translate3d(-50%, -50%, 0); + opacity: 1; + } + to { + transform: translate3d(-50%, -70%, 0); + opacity: 0; + } +} + +@keyframes uppy-Dashboard-slideUpFadeOut--small { + from { + transform: translate3d(0, 0, 0); + opacity: 1; + } + to { + transform: translate3d(0, -20%, 0); + opacity: 0; + } +} + +.uppy-Dashboard--modal { + z-index: 1001; +} + +.uppy-Dashboard--modal[aria-hidden=true] { + display: none; +} + +.uppy-Dashboard--modal.uppy-Dashboard--animateOpenClose > .uppy-Dashboard-inner { + animation: uppy-Dashboard-slideDownAndFadeIn--small 0.3s cubic-bezier(0, 0, 0.2, 1); +} + +@media only screen and (min-width: 820px) { + .uppy-Dashboard--modal.uppy-Dashboard--animateOpenClose > .uppy-Dashboard-inner { + animation: uppy-Dashboard-slideDownAndFadeIn 0.3s cubic-bezier(0, 0, 0.2, 1); + } +} + +.uppy-Dashboard--modal.uppy-Dashboard--animateOpenClose > .uppy-Dashboard-overlay { + animation: uppy-Dashboard-fadeIn 0.3s cubic-bezier(0, 0, 0.2, 1); +} + +.uppy-Dashboard--modal.uppy-Dashboard--animateOpenClose.uppy-Dashboard--isClosing > .uppy-Dashboard-inner { + animation: uppy-Dashboard-slideUpFadeOut--small 0.3s cubic-bezier(0, 0, 0.2, 1); +} + +@media only screen and (min-width: 820px) { + .uppy-Dashboard--modal.uppy-Dashboard--animateOpenClose.uppy-Dashboard--isClosing > .uppy-Dashboard-inner { + animation: uppy-Dashboard-slideUpFadeOut 0.3s cubic-bezier(0, 0, 0.2, 1); + } +} + +.uppy-Dashboard--modal.uppy-Dashboard--animateOpenClose.uppy-Dashboard--isClosing > .uppy-Dashboard-overlay { + animation: uppy-Dashboard-fadeOut 0.3s cubic-bezier(0, 0, 0.2, 1); +} + +.uppy-Dashboard-isFixed { + height: 100vh; + overflow: hidden; +} + +.uppy-Dashboard--modal .uppy-Dashboard-overlay { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1001; + background-color: rgba(0, 0, 0, 0.5); +} + +.uppy-Dashboard-inner { + position: relative; + max-width: 100%; + max-height: 100%; + background-color: #f4f4f4; + border: 1px solid #eaeaea; + border-radius: 5px; + outline: none; +} + +.uppy-Dashboard-inner { + min-height: auto; +} + +@media only screen and (min-width: 820px) { + .uppy-Dashboard-inner { + width: 650px; + height: 500px; + } +} + +.uppy-Dashboard--modal .uppy-Dashboard-inner { + z-index: 1002; +} + +[data-uppy-theme=dark] .uppy-Dashboard-inner { + background-color: #1f1f1f; +} + +.uppy-Dashboard--isDisabled .uppy-Dashboard-inner { + cursor: not-allowed; +} + +.uppy-Dashboard-innerWrap { + position: relative; + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; + border-radius: 5px; + opacity: 0; +} + +.uppy-Dashboard--isInnerWrapVisible .uppy-Dashboard-innerWrap { + opacity: 1; +} + +.uppy-Dashboard--isDisabled .uppy-Dashboard-innerWrap { + opacity: 0.6; + filter: grayscale(100%); + -webkit-user-select: none; + user-select: none; + cursor: not-allowed; +} + +.uppy-Dashboard--isDisabled .uppy-ProviderIconBg { + fill: #9f9f9f; +} + +.uppy-Dashboard--isDisabled [disabled], +.uppy-Dashboard--isDisabled [aria-disabled] { + pointer-events: none; + cursor: not-allowed; +} + +.uppy-Dashboard--modal .uppy-Dashboard-inner { + position: fixed; + top: 35px; + right: 15px; + bottom: 15px; + left: 15px; + border: none; +} + +@media only screen and (min-width: 820px) { + .uppy-Dashboard--modal .uppy-Dashboard-inner { + top: 50%; + right: auto; + left: 50%; + box-shadow: 0 5px 15px 4px rgba(0, 0, 0, 0.15); + transform: translate(-50%, -50%); + } +} + +[dir="ltr"] .uppy-Dashboard-close { + right: -2px; +} + +[dir="rtl"] .uppy-Dashboard-close { + left: -2px; +} + +.uppy-Dashboard-close { + position: absolute; + top: -33px; + z-index: 1005; + display: block; + color: rgba(255, 255, 255, 0.9); + font-size: 27px; + cursor: pointer; +} + +.uppy-Dashboard-close:focus { + outline: none; +} + +.uppy-Dashboard-close::-moz-focus-inner { + border: 0; +} + +.uppy-Dashboard-close:focus { + color: #6eabf2; +} + +@media only screen and (min-width: 820px) { + [dir="ltr"] .uppy-Dashboard-close { + right: -35px; + } + [dir="rtl"] .uppy-Dashboard-close { + left: -35px; + } + .uppy-Dashboard-close { + top: -10px; + font-size: 35px; + } +} + +.uppy-Dashboard-serviceMsg { + position: relative; + top: -1px; + z-index: 1004; + padding: 12px 0; + font-weight: 500; + font-size: 12px; + line-height: 1.3; + background-color: #fffbf7; + border-top: 1px solid #edd4b9; + border-bottom: 1px solid #edd4b9; +} + +.uppy-Dashboard-serviceMsg { + font-size: 14px; + line-height: 1.4; +} + +[data-uppy-theme=dark] .uppy-Dashboard-serviceMsg { + color: #eaeaea; + background-color: #1f1f1f; + border-top: 1px solid #333; + border-bottom: 1px solid #333; +} + +.uppy-Dashboard-serviceMsg-title { + display: block; + margin-bottom: 4px; + padding-left: 42px; + line-height: 1; +} + +.uppy-Dashboard-serviceMsg-text { + padding: 0 15px; +} + +.uppy-Dashboard-serviceMsg-actionBtn { + color: #1269cf; + font-weight: inherit; + font-size: inherit; + vertical-align: initial; +} + +[data-uppy-theme=dark] .uppy-Dashboard-serviceMsg-actionBtn { + color: rgba(2, 186, 242, 0.9); } -lr-progress-bar { - top: 0px !important; - height: 100% !important; - padding-top: 10px; - padding-bottom: 10px; +.uppy-Dashboard-serviceMsg-icon { + position: absolute; + top: 10px; + left: 15px; +} - .progress { - background-color: #61AE24D0; - } +.uppy-Dashboard-AddFiles { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + text-align: center; } -lr-file-uploader-inline { - min-width: 230px; +[data-uppy-drag-drop-supported=true] .uppy-Dashboard-AddFiles { + height: calc(100% - 14px); + margin: 7px; + border: 1px dashed #dfdfdf; + border-radius: 3px; } -lr-drop-area[with-icon] { - min-height: 100px !important; +.uppy-Dashboard-AddFilesPanel .uppy-Dashboard-AddFiles { + height: calc(100% - 14px - 40px); + border: none; } -lr-activity-header { - & > div { - display: none; - } +.uppy-Dashboard--modal .uppy-Dashboard-AddFiles { + border-color: #cfcfcf; +} - lr-icon[name="back"] { - svg { - width: 32px; - height: 32px; - } - } +[data-uppy-theme=dark] .uppy-Dashboard-AddFiles { + border-color: #757575; +} - .header-text { - display: none; - } +.uppy-Dashboard-AddFiles-info { + display: none; + margin-top: auto; + padding-top: 15px; + padding-bottom: 15px; } -lr-upload-list { - .done-btn, .upload-btn, .cancel-btn { - display: none; - } +.uppy-size--height-md .uppy-Dashboard-AddFiles-info { + display: block; +} - .toolbar-spacer { - display: none; - } +.uppy-Dashboard-AddFiles-info { + position: absolute; + right: 0; + bottom: 25px; + left: 0; + padding-top: 30px; + padding-bottom: 0; +} + +[data-uppy-num-acquirers="0"] .uppy-Dashboard-AddFiles-info { + margin-top: 0; +} - .toolbar { - justify-content: space-between; - padding-right: 0px; +.uppy-Dashboard-browse { + color: #1269cf; + cursor: pointer; +} - width: 105px; +.uppy-Dashboard-browse:focus { + outline: none; +} - @include media-breakpoint-up(md) { - width: 210px; - } - } +.uppy-Dashboard-browse::-moz-focus-inner { + border: 0; +} - .files { - display: flex; - flex-wrap: wrap; - min-height: unset; - } +.uppy-Dashboard-browse:hover, .uppy-Dashboard-browse:focus { + border-bottom: 1px solid #1269cf; } -lr-file-item { - .thumb { - // We hide the thumbnails in the uploader because we add our own. - width: 0px; - height: 0px; - } +[data-uppy-theme=dark] .uppy-Dashboard-browse { + color: rgba(2, 186, 242, 0.9); +} - .inner[uploading] .thumb { - // ...except when uploading. - width: 200px; - height: 200px; - } +[data-uppy-theme=dark] .uppy-Dashboard-browse:hover, [data-uppy-theme=dark] .uppy-Dashboard-browse:focus { + border-bottom: 1px solid #02baf2; +} - .inner[finished] { - padding: 0px; - } +.uppy-Dashboard-browseBtn { + display: block; + width: 100%; + margin-top: 8px; + margin-bottom: 5px; + font-weight: 500; + font-size: 14px; } -lr-drop-area[with-icon] { - width: 200px; - height: 200px; +.uppy-Dashboard-browseBtn { + width: auto; + margin: auto; + margin-top: 15px; + margin-bottom: 15px; + padding: 13px 44px; + font-size: 15px; +} - &:hover { - color: $colour-success; +.uppy-Dashboard-AddFiles-list { + display: flex; + flex: 1; + flex-direction: column; + width: 100%; + margin-top: 2px; + padding: 2px 0; + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} - lr-drop-area[with-icon]:hover .icon-container { - color: $colour-success; - } +.uppy-Dashboard-AddFiles-list { + flex: none; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + max-width: 600px; + margin-top: 15px; + padding-top: 0; + overflow-y: visible; +} - .icon-container { - background-color: $colour-success !important; - color: $color-white !important; - } - } +.uppy-DashboardTab { + width: 100%; + text-align: center; + border-bottom: 1px solid #eaeaea; +} - .icon-container { - background-color: $colour-success; +[data-uppy-theme=dark] .uppy-DashboardTab { + border-bottom: 1px solid #333; +} - lr-icon[name="default"] { - svg { - width: 32px; - height: 32px; - color: $color-white; - } - } - } +.uppy-DashboardTab { + display: inline-block; + width: initial; + margin-bottom: 10px; + border-bottom: none; } -lr-source-list { - lr-icon { - svg { - width: 16px; - height: 16px; - } - } +.uppy-DashboardTab-btn { + flex-direction: row; + align-items: center; + justify-content: left; + width: 100%; + height: 100%; + padding: 12px 15px; + color: #525252; + background-color: transparent; + cursor: pointer; + -webkit-appearance: none; + appearance: none; } -lr-file-item { - >.inner { - padding-left: 0px; - padding-right: 0px; - grid-template-columns: 1fr; - background-color: transparent; - } +.uppy-DashboardTab-btn:focus { + outline: none; +} - .file-name-wrapper, .file-actions { - display: none; - } +.uppy-DashboardTab-btn::-moz-focus-inner { + border: 0; +} - .badge, .badge lr-icon, .badge lr-icon svg { - width: 0px; - height: 0px; - } +[dir="ltr"] .uppy-DashboardTab-btn { + margin-right: 1px; +} + +[dir="rtl"] .uppy-DashboardTab-btn { + margin-left: 1px; +} + +.uppy-DashboardTab-btn { + flex-direction: column; + width: 86px; + padding: 10px 3px; + border-radius: 5px; +} + +[data-uppy-theme=dark] .uppy-DashboardTab-btn { + color: #eaeaea; +} + +.uppy-DashboardTab-btn::-moz-focus-inner { + border: 0; +} + +.uppy-DashboardTab-btn:hover { + background-color: #e9ecef; +} + +[data-uppy-theme=dark] .uppy-DashboardTab-btn:hover { + background-color: #333; +} + +.uppy-DashboardTab-btn:active, +.uppy-DashboardTab-btn:focus { + background-color: #dfe6f1; +} + +[data-uppy-theme=dark] .uppy-DashboardTab-btn:active, +[data-uppy-theme=dark] .uppy-DashboardTab-btn:focus { + background-color: #525252; +} + +.uppy-DashboardTab-btn svg { + display: inline-block; + max-width: 100%; + max-height: 100%; + overflow: hidden; + vertical-align: text-top; + transition: transform ease-in-out 0.15s; +} + +[dir="ltr"] .uppy-DashboardTab-inner { + margin-right: 10px; +} + +[dir="rtl"] .uppy-DashboardTab-inner { + margin-left: 10px; } -lr-source-list { +.uppy-DashboardTab-inner { display: flex; - flex-wrap: wrap; + justify-content: center; + align-items: center; + width: 32px; + height: 32px; + border-radius: 8px; + background-color: #fff; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 3px 0 rgba(0, 0, 0, 0.02); +} + +[dir="ltr"] .uppy-DashboardTab-inner { + margin-right: 0; +} + +[dir="rtl"] .uppy-DashboardTab-inner { + margin-left: 0; +} + +[data-uppy-theme=dark] .uppy-DashboardTab-inner { + background-color: #323232; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.08); +} + +.uppy-DashboardTab-name { + font-weight: 400; + font-size: 14px; +} + +.uppy-DashboardTab-name { + margin-top: 8px; + margin-bottom: 0; + font-size: 12px; + line-height: 15px; +} + +.uppy-DashboardTab-iconMyDevice { + color: #1269cf; +} + +[data-uppy-theme=dark] .uppy-DashboardTab-iconMyDevice { + color: #02baf2; +} + +.uppy-DashboardTab-iconBox { + color: #0061d5; +} + +[data-uppy-theme=dark] .uppy-DashboardTab-iconBox { + color: #eaeaea; +} + +.uppy-DashboardTab-iconDropbox { + color: #0061fe; +} + +[data-uppy-theme=dark] .uppy-DashboardTab-iconDropbox { + color: #eaeaea; +} + +.uppy-DashboardTab-iconUnsplash { + color: #111; +} + +[data-uppy-theme=dark] .uppy-DashboardTab-iconUnsplash { + color: #eaeaea; +} + +.uppy-DashboardTab-iconScreenRec { + color: #2c3e50; +} + +[data-uppy-theme=dark] .uppy-DashboardTab-iconScreenRec { + color: #eaeaea; +} + +.uppy-DashboardTab-iconAudio { + color: #8030a3; +} + +[data-uppy-theme=dark] .uppy-DashboardTab-iconAudio { + color: #bf6ee3; +} + +.uppy-Dashboard-input { + position: absolute; + z-index: -1; + width: 0.1px; + height: 0.1px; + overflow: hidden; + opacity: 0; +} + +.uppy-DashboardContent-bar { + position: relative; + z-index: 1004; + display: flex; + flex-shrink: 0; + align-items: center; justify-content: space-between; + width: 100%; + height: 40px; + padding: 0 10px; + background-color: #fafafa; + border-bottom: 1px solid #eaeaea; +} - lr-source-btn { - padding-left: 0px; +.uppy-DashboardContent-bar { + height: 50px; + padding: 0 15px; +} - lr-icon { - margin-right: 0px; - } - } +[data-uppy-theme=dark] .uppy-DashboardContent-bar { + background-color: #1f1f1f; + border-bottom: 1px solid #333; +} + +.uppy-DashboardContent-title { + position: absolute; + top: 0; + right: 0; + left: 0; + width: 100%; + max-width: 170px; + margin: auto; + overflow-x: hidden; + font-weight: 500; + font-size: 12px; + line-height: 40px; + white-space: nowrap; + text-align: center; + text-overflow: ellipsis; +} + +.uppy-DashboardContent-title { + max-width: 300px; + font-size: 14px; + line-height: 50px; +} + +[data-uppy-theme=dark] .uppy-DashboardContent-title { + color: #eaeaea; +} + +[dir="ltr"] .uppy-DashboardContent-back, [dir="ltr"] +.uppy-DashboardContent-save { + margin-left: -6px; +} + +[dir="rtl"] .uppy-DashboardContent-back, [dir="rtl"] +.uppy-DashboardContent-save { + margin-right: -6px; +} + +.uppy-DashboardContent-back, +.uppy-DashboardContent-save { + margin: 0; + padding: 0; + color: inherit; + font-size: inherit; + font-family: inherit; + line-height: 1; + background: none; + border: 0; + -webkit-appearance: none; + padding: 7px 6px; + color: #1269cf; + font-weight: 400; + font-size: 12px; + border-radius: 3px; + cursor: pointer; +} + +.uppy-DashboardContent-back:focus, +.uppy-DashboardContent-save:focus { + outline: none; +} + +.uppy-DashboardContent-back::-moz-focus-inner, +.uppy-DashboardContent-save::-moz-focus-inner { + border: 0; +} + +.uppy-DashboardContent-back:hover, +.uppy-DashboardContent-save:hover { + color: #0e51a0; +} + +.uppy-DashboardContent-back:focus, +.uppy-DashboardContent-save:focus { + background-color: #dfe6f1; +} + +[data-uppy-theme=dark] .uppy-DashboardContent-back:focus, +[data-uppy-theme=dark] .uppy-DashboardContent-save:focus { + background-color: #333; } -lr-start-from { - .content { - gap: unset; - padding: 8px; +.uppy-DashboardContent-back, +.uppy-DashboardContent-save { + font-size: 14px; +} + +[data-uppy-theme=dark] .uppy-DashboardContent-back, +[data-uppy-theme=dark] .uppy-DashboardContent-save { + color: #02baf2; +} + +[dir="ltr"] .uppy-DashboardContent-addMore { + margin-right: -5px; +} + +[dir="rtl"] .uppy-DashboardContent-addMore { + margin-left: -5px; +} + +.uppy-DashboardContent-addMore { + margin: 0; + padding: 0; + color: inherit; + font-size: inherit; + font-family: inherit; + line-height: 1; + background: none; + border: 0; + -webkit-appearance: none; + width: 29px; + height: 29px; + padding: 7px 8px; + color: #1269cf; + font-weight: 500; + border-radius: 3px; + cursor: pointer; +} + +.uppy-DashboardContent-addMore:focus { + outline: none; +} + +.uppy-DashboardContent-addMore::-moz-focus-inner { + border: 0; +} + +.uppy-DashboardContent-addMore:hover { + color: #0e51a0; +} + +.uppy-DashboardContent-addMore:focus { + background-color: #dfe6f1; +} + +[data-uppy-theme=dark] .uppy-DashboardContent-addMore:focus { + background-color: #333; +} + +[dir="ltr"] .uppy-DashboardContent-addMore { + margin-right: -8px; +} + +[dir="rtl"] .uppy-DashboardContent-addMore { + margin-left: -8px; +} + +.uppy-DashboardContent-addMore { + width: auto; + height: auto; + font-size: 14px; +} + +[data-uppy-theme=dark] .uppy-DashboardContent-addMore { + color: #02baf2; +} + +[dir="ltr"] .uppy-DashboardContent-addMore svg { + margin-right: 4px; +} + +[dir="rtl"] .uppy-DashboardContent-addMore svg { + margin-left: 4px; +} + +.uppy-DashboardContent-addMore svg { + vertical-align: baseline; +} + +.uppy-DashboardContent-addMore svg { + width: 11px; + height: 11px; +} + +.uppy-DashboardContent-addMoreCaption { + display: none; +} + +.uppy-DashboardContent-addMoreCaption { + display: inline; +} + +.uppy-DashboardContent-panel { + position: absolute; + top: 20px; + right: 0; + bottom: 0; + left: 0; + z-index: 1005; + display: flex; + flex: 1; + flex-direction: column; + overflow: hidden; + background-color: whitesmoke; + border-radius: 5px; +} + +.uppy-Dashboard-AddFilesPanel { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1005; + display: flex; + flex-direction: column; + overflow: hidden; + background: #fafafa; + background: linear-gradient(0deg, #fafafa 35%, rgba(250, 250, 250, 0.85) 100%); + border-radius: 5px; + box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.15); +} + +[data-uppy-theme=dark] .uppy-Dashboard-AddFilesPanel { + background-color: #333; + background-image: linear-gradient(0deg, #1f1f1f 35%, rgba(31, 31, 31, 0.85) 100%); +} + +.uppy-Dashboard--isAddFilesPanelVisible .uppy-Dashboard-files { + filter: blur(2px); +} + +.uppy-Dashboard-progress { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 12%; +} + +.uppy-Dashboard-progressBarContainer.is-active { + position: absolute; + top: 0; + left: 0; + z-index: 1004; + width: 100%; + height: 100%; +} + +.uppy-Dashboard-filesContainer { + position: relative; + flex: 1; + margin: 0; + overflow-y: hidden; +} + +.uppy-Dashboard-filesContainer::after { + display: table; + clear: both; + content: ""; +} + +.uppy-Dashboard-files { + flex: 1; + margin: 0; + padding: 0 0 10px 0; + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} + +.uppy-Dashboard-files { + padding-top: 10px; +} + +.uppy-Dashboard--singleFile .uppy-Dashboard-filesInner { + display: flex; + justify-content: center; + align-items: center; + height: 100%; +} + +.uppy-Dashboard-dropFilesHereHint { + position: absolute; + top: 7px; + right: 7px; + bottom: 7px; + left: 7px; + z-index: 2000; + display: flex; + align-items: center; + justify-content: center; + padding-top: 90px; + color: #757575; + font-size: 16px; + text-align: center; + background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 1v1C11.85 2 2 11.85 2 24s9.85 22 22 22 22-9.85 22-22S36.15 2 24 2V1zm0 0V0c13.254 0 24 10.746 24 24S37.254 48 24 48 0 37.254 0 24 10.746 0 24 0v1zm7.707 19.293a.999.999 0 1 1-1.414 1.414L25 16.414V34a1 1 0 1 1-2 0V16.414l-5.293 5.293a.999.999 0 1 1-1.414-1.414l7-7a.999.999 0 0 1 1.414 0l7 7z' fill='%231269CF' fill-rule='nonzero'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: 50% 50%; + border: 1px dashed #1269cf; + border-radius: 3px; + visibility: hidden; +} + +[data-uppy-theme=dark] .uppy-Dashboard-dropFilesHereHint { + color: #bbb; + background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 1v1C11.85 2 2 11.85 2 24s9.85 22 22 22 22-9.85 22-22S36.15 2 24 2V1zm0 0V0c13.254 0 24 10.746 24 24S37.254 48 24 48 0 37.254 0 24 10.746 0 24 0v1zm7.707 19.293a.999.999 0 1 1-1.414 1.414L25 16.414V34a1 1 0 1 1-2 0V16.414l-5.293 5.293a.999.999 0 1 1-1.414-1.414l7-7a.999.999 0 0 1 1.414 0l7 7z' fill='%2302BAF2' fill-rule='nonzero'/%3E%3C/svg%3E"); + border-color: #02baf2; +} + +.uppy-Dashboard.uppy-Dashboard--isDraggingOver .uppy-Dashboard-dropFilesHereHint { + visibility: visible; + pointer-events: none; +} + +.uppy-Dashboard.uppy-Dashboard--isDraggingOver .uppy-DashboardContent-bar, +.uppy-Dashboard.uppy-Dashboard--isDraggingOver .uppy-Dashboard-files, +.uppy-Dashboard.uppy-Dashboard--isDraggingOver .uppy-Dashboard-progressindicators, +.uppy-Dashboard.uppy-Dashboard--isDraggingOver .uppy-Dashboard-serviceMsg { + opacity: 0.15; +} + +.uppy-Dashboard.uppy-Dashboard--isDraggingOver .uppy-Dashboard-AddFiles { + opacity: 0.03; +} + +.uppy-Dashboard-AddFiles-title { + width: 100%; + margin-top: 15px; + margin-bottom: 5px; + padding: 0 15px; + color: #000; + font-weight: 500; + font-size: 17px; + line-height: 1.35; + text-align: inline-start; +} + +.uppy-Dashboard-AddFiles-title { + max-width: 480px; + padding: 0 35px; + margin-top: 5px; + font-weight: 400; + font-size: 21px; + text-align: center; +} + +[data-uppy-num-acquirers="0"] .uppy-Dashboard-AddFiles-title { + text-align: center; +} + +[data-uppy-theme=dark] .uppy-Dashboard-AddFiles-title { + color: #eaeaea; +} + +.uppy-Dashboard-AddFiles-title button { + font-weight: 500; +} + +.uppy-Dashboard-AddFiles-title button { + font-weight: 400; +} + +.uppy-Dashboard-note { + max-width: 350px; + margin: auto; + padding: 0 15px; + color: #757575; + font-size: 14px; + line-height: 1.25; + text-align: center; +} + +.uppy-Dashboard-note { + max-width: 600px; + line-height: 1.35; +} + +[data-uppy-theme=dark] .uppy-Dashboard-note { + color: #cfcfcf; +} + +a.uppy-Dashboard-poweredBy { + display: inline-block; + margin-top: 8px; + color: #939393; + font-size: 11px; + text-align: center; + text-decoration: none; +} + +.uppy-Dashboard-poweredByIcon { + position: relative; + top: 1px; + margin-right: 1px; + margin-left: 1px; + vertical-align: text-top; + opacity: 0.9; + fill: none; + stroke: #939393; +} + +.uppy-Dashboard-Item-previewIcon { + position: absolute; + top: 50%; + left: 50%; + z-index: 100; + width: 25px; + height: 25px; + transform: translate(-50%, -50%); +} + +.uppy-Dashboard-Item-previewIcon { + width: 38px; + height: 38px; +} + +.uppy-Dashboard-Item-previewIcon svg { + width: 100%; + height: 100%; +} + +.uppy-Dashboard--singleFile .uppy-Dashboard-Item-previewIcon { + width: 100%; + height: 100%; + max-width: 60%; + max-height: 60%; +} + +.uppy-Dashboard-Item-previewIconWrap { + position: relative; + height: 76px; + max-height: 75%; +} + +.uppy-Dashboard--singleFile .uppy-Dashboard-Item-previewIconWrap { + width: 100%; + height: 100%; +} + +.uppy-Dashboard-Item-previewIconBg { + width: 100%; + height: 100%; + filter: drop-shadow(rgba(0, 0, 0, 0.1) 0 1px 1px); +} + +.uppy-Dashboard-upload { + position: relative; + width: 50px; + height: 50px; +} + +.uppy-Dashboard-upload { + width: 60px; + height: 60px; +} + +.uppy-Dashboard-upload .uppy-c-icon { + position: relative; + top: 1px; + width: 50%; +} + +[dir="ltr"] .uppy-Dashboard-uploadCount { + right: -12px; +} + +[dir="rtl"] .uppy-Dashboard-uploadCount { + left: -12px; +} + +.uppy-Dashboard-uploadCount { + position: absolute; + top: -12px; + width: 16px; + height: 16px; + color: #fff; + font-size: 8px; + line-height: 16px; + background-color: #1bb240; + border-radius: 50%; +} + +.uppy-Dashboard-uploadCount { + width: 18px; + height: 18px; + font-size: 9px; + line-height: 18px; +} + +.uppy-Webcam-buttonContainer { + padding-bottom: $sticky-banner-height-mobile; + + @include media-breakpoint-up(md) { + padding-bottom: 0; } } \ No newline at end of file diff --git a/components/AutoComplete.vue b/components/AutoComplete.vue index 84755516..1ec6083c 100644 --- a/components/AutoComplete.vue +++ b/components/AutoComplete.vue @@ -578,8 +578,9 @@ export default { } }, - doAjax(val) { + async doAjax(val) { this.invalid = false + let beforeAjaxResult = [] if (this.ajaxInProgress) { // We're already doing a request. Don't send another one, partly out of politeness to the server, and @@ -594,8 +595,10 @@ export default { } else { // Callback Event if (this.onBeforeAjax) { - this.onBeforeAjax(val) + // This might return some results - if so they should be shown first. + beforeAjaxResult = await this.onBeforeAjax(val) } + // Compose Params const params = this.composeParams(val.trim()) // Init Ajax @@ -606,22 +609,26 @@ export default { ajax.open('GET', `${this.url}?${params}`, true) this.composeHeader(ajax) + // Callback Event ajax.addEventListener('progress', data => { if (data.lengthComputable && this.onAjaxProgress) this.onAjaxProgress(data) }) + // On Done ajax.addEventListener('loadend', e => { const { status, responseText } = e.target if (status === 200) { const json = JSON.parse(responseText) + // Callback Event if (this.onAjaxLoaded) { this.onAjaxLoaded(json) } - this.json = this.process ? this.process(json) : json + + this.json = beforeAjaxResult.concat(this.process ? this.process(json) : json) if (this.restrict && (!this.json || this.json.length === 0)) { // What we have doesn't match. Indicate that we have selected an invalid value. @@ -641,7 +648,7 @@ export default { // We no longer have a request in progress. this.ajaxInProgress = null }) - // Send Ajax + ajax.send() } }, diff --git a/components/AutoHeightTextarea.vue b/components/AutoHeightTextarea.vue index b449b46d..f7c2d275 100644 --- a/components/AutoHeightTextarea.vue +++ b/components/AutoHeightTextarea.vue @@ -16,7 +16,9 @@ // If we're showing a scrollbar, then increase the number of rows. // // We don't shrink. If you're reading this, why not code it? +import { mapWritableState } from 'pinia' import { ref } from '#imports' +import { useMiscStore } from '~/stores/misc' export default { props: { @@ -65,11 +67,16 @@ export default { timer: null, } }, + computed: { + ...mapWritableState(useMiscStore, ['lastTyping']), + }, watch: { modelValue(newVal) { this.currentValue = newVal }, currentValue(newVal) { + this.lastTyping = Date.now() + if (newVal && !this.timer) { // Starting the timer here avoids having the timer run for empty textareas, which happen a lot in ChitChat. this.checkRows() diff --git a/components/ChatFooter.vue b/components/ChatFooter.vue index b5da465c..6f05b5c3 100644 --- a/components/ChatFooter.vue +++ b/components/ChatFooter.vue @@ -70,18 +70,24 @@
- +
-
+
@@ -90,13 +96,14 @@ id="chatmessage" ref="chatarea" v-model="sendmessage" + :debounce="debounce" + class="h-100" placeholder="Type here..." - :style="height" enterkeyhint="send" autocapitalize="none" @keydown="typing" @keydown.enter.exact.prevent - @keyup.enter.exact="send" + @keyup.enter.exact="sendOnEnter" @keydown.enter.shift.exact.prevent="newline" @keydown.alt.shift.enter.exact.prevent="newline" @focus="markRead" @@ -128,14 +135,13 @@
-
@@ -212,30 +218,42 @@
- +
Promise
- +
Address
- +
Spammer
- +
Nudge
- +
Nudge
- +
Photo
120 + }, height() { // Bootstrap Vue Next doesn't yet have autoresizing. - return this.sendmessage ? 'height: 12em' : 'height: 6em' + const height = Math.min(6, Math.round(this.sendmessage?.length / 60)) + + return 'height: ' + (height + 6) + 'em' }, noticesToShow() { return ( @@ -556,9 +593,10 @@ export default { }, watch: { suggestedAddress: { - handler(newVal) { + async handler(newVal) { if (newVal?.address?.singleline?.length !== newVal?.matchedLength) { this.hideSuggestedAddress = false + await this.$nextTick() this.updateCaretPosition() } }, @@ -597,16 +635,18 @@ export default { }, currentAtts: { handler(newVal) { - // We have uploaded a photo. - this.uploading = false + if (newVal) { + // We have uploaded a photo. + this.uploading = false - // Show the chat busy indicator. - this.chatBusy = true + // Show the chat busy indicator. + this.chatBusy = true - // We have uploaded a photo. Post a chatmessage referencing it. - this.imageid = newVal[0].id - this.imageuid = newVal[0].externaluid - this.imagemods = newVal[0].externalmods + // We have uploaded a photo. Post a chatmessage referencing it. + this.imageid = newVal[0].id + this.imageuid = newVal[0].ouruid + this.imagemods = newVal[0].externalmods + } }, deep: true, }, @@ -626,7 +666,7 @@ export default { left: caretPosition.left + textareaPosition.left, } }, - applySuggestedAddress() { + async applySuggestedAddress() { const matchedLength = this.suggestedAddress.matchedLength const suggestedAddress = this.suggestedAddress.address.singleline // No need to apply suggestion if length of match and address are equal @@ -635,8 +675,19 @@ export default { } this.sendmessage = this.sendmessage.substring(0, this.sendmessage.length - matchedLength) + - this.suggestedAddress.address.singleline + this.suggestedAddress.address.singleline + + ' ' this.hideSuggestedAddress = true + await this.$nextTick() + const el = this.$refs.chatarea?.$el + + if (el) { + setTimeout(() => { + // Focus at end of text. + el.focus() + el.selectionStart = this.sendmessage.length + }, 100) + } }, async markRead() { await this.chatStore.markRead(this.id) @@ -719,6 +770,12 @@ export default { showInfo() { this.showProfileModal = true }, + sendOnEnter() { + // Because of debounce, we might not have the full message yet. Start a timer. + setTimeout(() => { + this.send() + }, this.debounce + 100) + }, async send(callback) { if (!this.sending) { if (this.imageid) { @@ -787,10 +844,10 @@ export default { this.imagethumb = null }, async typing() { - // Let the server know that we are typing, no more frequently than every 10 seconds. const now = new Date().getTime() if (!this.lastTyping || now - this.lastTyping > TYPING_TIME_INVERVAL) { + // Let the server know that we are typing, no more frequently than every 10 seconds. await this.chatStore.typing(this.id) this.lastTyping = now } @@ -850,6 +907,8 @@ export default { } diff --git a/components/ChatMessage.vue b/components/ChatMessage.vue index 7ce96adb..435e6ad6 100644 --- a/components/ChatMessage.vue +++ b/components/ChatMessage.vue @@ -71,6 +71,9 @@
+
+ +
Unknown chat message type {{ chatmessage?.type }}, {{ chat }} {{ chatmessage }} @@ -134,6 +137,7 @@ import ChatMessageAddress from './ChatMessageAddress' import ChatMessageNudge from './ChatMessageNudge' import ChatMessageDateRead from './ChatMessageDateRead' import ChatMessageModMail from './ChatMessageModMail' +import ChatMessageReminder from './ChatMessageReminder' import SupportLink from '~/components/SupportLink.vue' import ChatMessageWarning from '~/components/ChatMessageWarning' import 'vue-simple-context-menu/dist/vue-simple-context-menu.css' @@ -161,6 +165,7 @@ export default { ChatMessageReport, ChatMessageNudge, ChatMessageModMail, + ChatMessageReminder, SupportLink, }, props: { diff --git a/components/ChatMessageImage.vue b/components/ChatMessageImage.vue index eb52007d..e83035d2 100644 --- a/components/ChatMessageImage.vue +++ b/components/ChatMessageImage.vue @@ -14,8 +14,17 @@ size="sm" class="mr-1 mb-1 mt-1 inline" /> + + diff --git a/components/DaDisabledOnServer.vue b/components/DaDisabledOnServer.vue new file mode 100644 index 00000000..361d3c0e --- /dev/null +++ b/components/DaDisabledOnServer.vue @@ -0,0 +1,27 @@ + + + diff --git a/components/DaFallbackDonationRequest.vue b/components/DaFallbackDonationRequest.vue new file mode 100644 index 00000000..f8b92dc0 --- /dev/null +++ b/components/DaFallbackDonationRequest.vue @@ -0,0 +1,30 @@ + + + diff --git a/components/DateFormatted.vue b/components/DateFormatted.vue index 381ce2a4..8ff9f1da 100644 --- a/components/DateFormatted.vue +++ b/components/DateFormatted.vue @@ -10,6 +10,7 @@ import { datetimeshort, dateshort, weekdayshort, + dateonlyNoYear, } from '../composables/useTimeFormat' export default { @@ -32,6 +33,9 @@ export default { case 'dateonly': ret = dateonly(this.value) break + case 'dateonlyNoYear': + ret = dateonlyNoYear(this.value) + break case 'dateshort': ret = dateshort(this.value) break diff --git a/components/DeadlineAskModal.vue b/components/DeadlineAskModal.vue new file mode 100644 index 00000000..83eefea0 --- /dev/null +++ b/components/DeadlineAskModal.vue @@ -0,0 +1,136 @@ + + diff --git a/components/DeliveryAskModal.vue b/components/DeliveryAskModal.vue new file mode 100644 index 00000000..dfb49df5 --- /dev/null +++ b/components/DeliveryAskModal.vue @@ -0,0 +1,89 @@ + + diff --git a/components/DonationButton.vue b/components/DonationButton.vue index 02668480..c664242f 100644 --- a/components/DonationButton.vue +++ b/components/DonationButton.vue @@ -8,7 +8,8 @@ >
-
Donate
+
{{ text }}
+
Donate
{{ show }}
@@ -31,6 +32,11 @@ export default { required: false, default: null, }, + text: { + type: String, + required: false, + default: null, + }, }, async setup() { await loadScript('https://www.paypalobjects.com/donate/sdk/donate-sdk.js') @@ -69,7 +75,7 @@ export default { } }, show() { - return this.value ? '£' + this.value : this.$props.show + return this.value ? '£' + this.value : null }, }, mounted() { @@ -105,6 +111,13 @@ export default { e.stopPropagation() }, clicked() { + if (this.$gtm?.enabled()) { + this.$gtm.trackEvent({ + event: 'Donate', + label: 'Z1RRCIfbv7kZELy618UD', + }) + } + this.$refs.paypalbutton?.firstChild?.click() }, async donateMonthly() { diff --git a/components/ExploreGroup.vue b/components/ExploreGroup.vue index e0d15ca4..da6d2f39 100644 --- a/components/ExploreGroup.vue +++ b/components/ExploreGroup.vue @@ -1,6 +1,6 @@ diff --git a/components/GooglePay.vue b/components/GooglePay.vue new file mode 100644 index 00000000..778fb2a7 --- /dev/null +++ b/components/GooglePay.vue @@ -0,0 +1,82 @@ + + diff --git a/components/ImageCarousel.vue b/components/ImageCarousel.vue index fd3011a5..46071258 100644 --- a/components/ImageCarousel.vue +++ b/components/ImageCarousel.vue @@ -1,12 +1,40 @@ diff --git a/components/InterestedInOthersModal.vue b/components/InterestedInOthersModal.vue new file mode 100644 index 00000000..c3a49b14 --- /dev/null +++ b/components/InterestedInOthersModal.vue @@ -0,0 +1,74 @@ + + + + diff --git a/components/InviteSomeone.vue b/components/InviteSomeone.vue index d7ab0bc1..c564c1b0 100644 --- a/components/InviteSomeone.vue +++ b/components/InviteSomeone.vue @@ -1,171 +1,124 @@ diff --git a/components/MessageDescription.vue b/components/MessageDescription.vue index bff26584..d077dfae 100644 --- a/components/MessageDescription.vue +++ b/components/MessageDescription.vue @@ -1,23 +1,27 @@ diff --git a/components/MessageFreegled.vue b/components/MessageFreegled.vue index f4feb49b..ea9f52d9 100644 --- a/components/MessageFreegled.vue +++ b/components/MessageFreegled.vue @@ -1,17 +1,24 @@ diff --git a/components/MessageHistory.vue b/components/MessageHistory.vue index 00511d98..7dd0760e 100644 --- a/components/MessageHistory.vue +++ b/components/MessageHistory.vue @@ -6,12 +6,13 @@ class="text--small" > - {{ timeago(group.arrival, true) }} on + {{ timeago(group.arrival, true) }} + on - +
Approved by {{ approvedby }} - +
diff --git a/components/MessageItemLocation.vue b/components/MessageItemLocation.vue index 77eaf933..14a2e834 100644 --- a/components/MessageItemLocation.vue +++ b/components/MessageItemLocation.vue @@ -21,9 +21,12 @@ }" itemprop="name" > - {{ - item - }} + {{ item }}
@@ -38,7 +41,8 @@
-
+
+
{{ location }}
@@ -122,6 +126,11 @@ export default { } diff --git a/components/MessageList.vue b/components/MessageList.vue index 2d10aaa9..c4525d95 100644 --- a/components/MessageList.vue +++ b/components/MessageList.vue @@ -16,50 +16,71 @@ >
-
- +
- - + - - +
+
+ +
+
+ +
+
+
+
+ + +
+ +
- -
- -
-
-
-
+
+
+ diff --git a/components/MessageModal.vue b/components/MessageModal.vue index 7fd8872a..34ddb7f4 100644 --- a/components/MessageModal.vue +++ b/components/MessageModal.vue @@ -3,6 +3,7 @@ ref="modal" scrollable size="lg" + no-trap :fullscreen="showImagesProxy" class="hide-footer" body-class="p-0 p-md-3" @@ -19,64 +20,48 @@ >
- +
- +
- diff --git a/components/MessagePhotosModal.vue b/components/MessagePhotosModal.vue index 45ab986a..dd0f131e 100644 --- a/components/MessagePhotosModal.vue +++ b/components/MessagePhotosModal.vue @@ -1,7 +1,6 @@ + diff --git a/components/NewsMessage.vue b/components/NewsMessage.vue index 47472728..a8df77c4 100644 --- a/components/NewsMessage.vue +++ b/components/NewsMessage.vue @@ -10,8 +10,16 @@ class="font-weight-bold preline forcebreak nopara" />
+ import('~/components/NewsShareModal') ) @@ -97,6 +108,19 @@ export default { ReadMore, }, extends: NewsBase, + computed: { + width() { + const miscStore = useMiscStore() + + if (miscStore.breakpoint === 'xs' || miscStore.breakpoint === 'sm') { + // Full width image. + return process.server ? 400 : window.innerHeight + } else { + // 400px width image. + return 400 + } + }, + }, } diff --git a/components/OutcomeBy.vue b/components/OutcomeBy.vue index 1c24ad0d..b1742674 100644 --- a/components/OutcomeBy.vue +++ b/components/OutcomeBy.vue @@ -83,6 +83,7 @@ import { useMessageStore } from '../stores/message' import UserRatings from './UserRatings' import NumberIncrementDecrement from './NumberIncrementDecrement' import { ref } from '#imports' +import { useUserStore } from '~/stores/user' export default { components: { NumberIncrementDecrement, UserRatings }, @@ -121,6 +122,7 @@ export default { }, async setup(props) { const messageStore = useMessageStore() + const userStore = useUserStore() if (props.msgid) { await messageStore.fetch(props.msgid) @@ -152,6 +154,7 @@ export default { return { messageStore, + userStore, initiallySelectedUsers, currentlySelectedUsers, selectUser, @@ -168,7 +171,7 @@ export default { }, computed: { repliers() { - const ret = [] + let ret = [] if (this.message?.replies) { this.message.replies.forEach((u) => { @@ -181,6 +184,26 @@ export default { }) } + // Might be promised to someone who didn't reply - for example if they replied about something else and + // then this was added in. + if (this.message?.promises) { + this.message.promises.forEach((u) => { + if (u.userid > 0) { + const user = this.userStore.byId(u.userid) + + ret.push({ + userid: u.userid, + displayname: user?.displayname, + }) + } + }) + } + + // Make ret unique by userid + ret = ret.filter( + (v, i, a) => a.findIndex((t) => t.userid === v.userid) === i + ) + return ret }, availableUsers() { @@ -216,6 +239,16 @@ export default { }, }, watch: { + repliers: { + handler(newVal) { + newVal.forEach((u) => { + if (!u.displayname) { + this.userStore.fetch(u.userid) + } + }) + }, + immediate: true, + }, currentlySelectedUsers: { handler(newVal) { this.$emit('tookUsers', newVal) diff --git a/components/OutcomeModal.vue b/components/OutcomeModal.vue index 91866194..b1fbc92f 100644 --- a/components/OutcomeModal.vue +++ b/components/OutcomeModal.vue @@ -323,7 +323,6 @@ export default { }, methods: { took(users) { - console.log('Took', users) this.tookUsers = users }, async submit(callback) { diff --git a/components/PinchMe.vue b/components/PinchMe.vue new file mode 100644 index 00000000..f5f4f98f --- /dev/null +++ b/components/PinchMe.vue @@ -0,0 +1,154 @@ + + + diff --git a/components/PlaceAutocomplete.vue b/components/PlaceAutocomplete.vue index 88210d8d..b38215f2 100644 --- a/components/PlaceAutocomplete.vue +++ b/components/PlaceAutocomplete.vue @@ -32,12 +32,15 @@ :on-select="select" :size="30" variant="success" + :on-before-ajax="postcodeSearch" />
diff --git a/components/RenegeModal.vue b/components/RenegeModal.vue index 112f17cf..ba2fa89c 100644 --- a/components/RenegeModal.vue +++ b/components/RenegeModal.vue @@ -46,7 +46,6 @@ - @@ -62,64 +70,25 @@ export default { @import 'bootstrap/scss/variables'; @import 'bootstrap/scss/mixins/_breakpoints'; @import 'assets/css/sticky-banner.scss'; +@import 'assets/css/navbar.scss'; .sidebar__wrapper { + height: calc( + 100vh - $sticky-banner-height-desktop - $navbar-height - 75px - 10px + ); display: grid; - grid-template-rows: 1fr; - grid-template-columns: 100%; - height: 100vh; -} - -.sidebar__info { - grid-row: 1 / 2; - grid-column: 1 / 2; - display: grid; - grid-template-rows: 1fr auto 1fr auto 70px; - grid-template-columns: 1fr; + grid-auto-rows: minmax(0, 1fr); grid-row-gap: 10px; - height: calc(100vh - 100px); -} - -.sidebar__botleft { - grid-row: 1 / 2; - grid-column: 1 / 2; - display: grid; - grid-template-rows: 1fr auto; - height: calc(100vh - 68px); + grid-template-columns: minmax(0, 1fr); + overflow-y: hidden; - padding-bottom: $sticky-banner-height-mobile; - - @include media-breakpoint-up(md) { - padding-bottom: $sticky-banner-height-desktop; - } - - .social-media__wrapper { - grid-row: 2 / 3; - padding-bottom: 10px; + div { + border-bottom: 1px lightgrey; } } -.sidebar__community-event { - grid-row: 1 / 2; - overflow-y: auto; - scrollbar-gutter: stable; -} - -.hr1 { - grid-row: 2 / 3; -} - -.sidebar__volunteer-opportunity { - grid-row: 3 / 4; - overflow-y: auto; - scrollbar-gutter: stable; -} - -.hr2 { - grid-row: 4 / 5; -} - -.social-media__wrapper { - grid-row: 5 / 6; +.sidebar__botleft { + position: fixed; + bottom: $sticky-banner-height-desktop; } diff --git a/components/SidebarRight.vue b/components/SidebarRight.vue index a3217be0..e9918c15 100644 --- a/components/SidebarRight.vue +++ b/components/SidebarRight.vue @@ -1,55 +1,65 @@ - diff --git a/components/SomethingWentWrong.vue b/components/SomethingWentWrong.vue index f8c70ae8..8fec0a32 100644 --- a/components/SomethingWentWrong.vue +++ b/components/SomethingWentWrong.vue @@ -48,6 +48,7 @@ diff --git a/components/UserRatings.vue b/components/UserRatings.vue index ec4328e3..8e5cfb7f 100644 --- a/components/UserRatings.vue +++ b/components/UserRatings.vue @@ -8,7 +8,7 @@ v-b-tooltip.bottom="uptitle" :size="size" :variant="user.info.ratings.Up > 0 ? 'primary' : 'white'" - :disabled="disabled || user.id === myid ? 'true' : undefined" + :disabled="disabled || user.id === myid" :class="{ mine: user.info.ratings.Mine === 'Up', 'mr-1': true, @@ -21,7 +21,7 @@ v-b-tooltip.bottom="downtitle" :size="size" :variant="user.info.ratings.Down > 0 ? 'warning' : 'white'" - :disabled="disabled || user.id === myid ? 'true' : undefined" + :disabled="disabled || user.id === myid" :class="{ mine: user.info.ratings.Mine === 'Down', 'ml-1': true, @@ -31,92 +31,23 @@  {{ user.info.ratings.Down }} - -

- You've already given this freegler a - thumbs up - thumbs down - rating. You can only rate each freegler once. -

-

You can remove your rating if you wish, or cancel.

-
- -

- Please tell us why you're doing this. Your local volunteers may see what - you put, but the other freegler won't. -

-
- - No Show - Was late or early - Stopped replying - Unpleasant behaviour - Something else - -
-
- - -
- - Please select a reason and add some detail. Thanks. - -
+ + diff --git a/components/UserRatingsDownModal.vue b/components/UserRatingsDownModal.vue new file mode 100644 index 00000000..6ebb4235 --- /dev/null +++ b/components/UserRatingsDownModal.vue @@ -0,0 +1,103 @@ + + diff --git a/components/UserRatingsRemoveModal.vue b/components/UserRatingsRemoveModal.vue new file mode 100644 index 00000000..663d4739 --- /dev/null +++ b/components/UserRatingsRemoveModal.vue @@ -0,0 +1,55 @@ + + diff --git a/components/UserSearch.vue b/components/UserSearch.vue index 9ea96bf7..9bb314a1 100644 --- a/components/UserSearch.vue +++ b/components/UserSearch.vue @@ -1,6 +1,6 @@ diff --git a/pages/privacy.vue b/pages/privacy.vue index d8faf284..c0628b67 100644 --- a/pages/privacy.vue +++ b/pages/privacy.vue @@ -2,7 +2,6 @@
-

Privacy

We won’t pass on your email address to any organisation outside Freegle, and other freeglers can't see it (unless your community @@ -16,9 +15,9 @@

We try to protect you from spammers and fraudsters. Sometimes our - volunteers may read what you write to check that it's not spam, - phishing or fraud. If we happen to find something which is against - Freegle rules, we may take further action. + volunteers may read what you write in Chat to other freeglers to check + that it's not spam, phishing or fraud. If we happen to find something + which is against Freegle rules, we may take further action.

If you put phone numbers, email addresses or postal addresses into @@ -115,7 +114,8 @@

Deleting your data

- If you want to leave Freegle, please go + We'll delete your data automatically if you're inactive for six + months. If you want to leave Freegle, please go here.

@@ -127,16 +127,29 @@ theory. If this happens then we will be in touch with you to discuss what should happen to your details.

+

Legal Basis

+

We operate under the legal basis of Legitimate Interest.

Got questions?

Privacy is a complicated and important area, which we take seriously. If you have questions or concerns, please - contact us. . Our + contact us. Our registered address is Weaver's Field, Loud Bridge, Chipping PR3 2NX.

+

+ If you're unhappy, you can also contact the Information Commissioner's + Office + here. +

Change History

Here are the changes to this page.