uppy
Version:
Extensible JavaScript file upload widget with support for drag&drop, resumable uploads, previews, restrictions, file processing/encoding, remote providers like Instagram, Dropbox, Google Drive, S3 and more :dog:
1,932 lines (1,773 loc) • 117 kB
CSS
@charset "UTF-8";
/**
* General Uppy styles that apply to everything inside the .uppy-Root container
*/
.uppy-Root {
position: relative;
box-sizing: border-box;
color: #333;
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;
text-align: left;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[dir=rtl] .uppy-Root,
.uppy-Root[dir=rtl] {
text-align: right;
}
.uppy-Root *,
.uppy-Root *::before,
.uppy-Root *::after {
box-sizing: inherit;
}
.uppy-Root [hidden] {
display: none;
}
.uppy-u-reset {
all: initial;
box-sizing: border-box;
appearance: none;
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;
}
[dir=rtl] .uppy-u-reset {
text-align: right;
}
.uppy-truncate-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.uppy-c-textInput {
font-family: inherit;
font-size: 14px;
line-height: 1.5;
padding: 6px 8px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.uppy-size--md .uppy-c-textInput {
padding: 8px 10px;
}
.uppy-c-textInput:focus {
border-color: rgba(18, 105, 207, 0.6);
outline: none;
box-shadow: 0 0 0 3px rgba(18, 105, 207, 0.15);
}
[data-uppy-theme=dark] .uppy-c-textInput {
color: #eaeaea;
background-color: #333;
border-color: #333;
}
[data-uppy-theme=dark] .uppy-c-textInput:focus {
border-color: #525252;
box-shadow: none;
}
.uppy-c-icon {
display: inline-block;
max-width: 100%;
max-height: 100%;
overflow: hidden;
fill: currentColor;
}
.uppy-c-btn {
display: inline-flex;
justify-content: center;
align-items: center;
font-weight: 500;
font-size: inherit;
font-family: inherit;
color: inherit;
line-height: 1;
white-space: nowrap;
text-align: center;
transition-duration: 0.3s;
transition-property: background-color, color;
user-select: none;
}
[dir=rtl] .uppy-c-btn {
text-align: center;
}
.uppy-c-btn:not(:disabled):not(.disabled) {
cursor: pointer;
}
.uppy-c-btn::-moz-focus-inner {
border: 0;
}
.uppy-c-btn-primary {
padding: 10px 18px;
color: #fff;
font-size: 14px;
background-color: #1269cf;
border-radius: 4px;
}
.uppy-c-btn-primary:not(:disabled):hover {
background-color: rgb(13.92, 81.2, 160.08);
}
.uppy-c-btn-primary:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(18, 105, 207, 0.4);
}
.uppy-size--md .uppy-c-btn-primary {
padding: 13px 22px;
}
[data-uppy-theme=dark] .uppy-c-btn-primary {
color: #eaeaea;
}
[data-uppy-theme=dark] .uppy-c-btn-primary:focus {
outline: none;
}
[data-uppy-theme=dark] .uppy-c-btn-primary::-moz-focus-inner {
border: 0;
}
[data-uppy-theme=dark] .uppy-c-btn-primary:focus {
box-shadow: 0 0 0 2px rgba(170, 225, 255, 0.85);
}
.uppy-c-btn-primary.uppy-c-btn--disabled {
background-color: rgb(142, 178, 219);
}
.uppy-c-btn-link {
padding: 10px 15px;
color: #525252;
font-size: 14px;
line-height: 1;
background-color: transparent;
border-radius: 4px;
}
.uppy-c-btn-link:hover {
color: #333;
}
.uppy-c-btn-link:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(18, 105, 207, 0.25);
}
.uppy-size--md .uppy-c-btn-link {
padding: 13px 18px;
}
[data-uppy-theme=dark] .uppy-c-btn-link {
color: #eaeaea;
}
[data-uppy-theme=dark] .uppy-c-btn-link:focus {
outline: none;
}
[data-uppy-theme=dark] .uppy-c-btn-link::-moz-focus-inner {
border: 0;
}
[data-uppy-theme=dark] .uppy-c-btn-link:focus {
box-shadow: 0 0 0 2px rgba(170, 225, 255, 0.85);
}
[data-uppy-theme=dark] .uppy-c-btn-link:hover {
color: #939393;
}
.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-size--md .uppy-ProviderBrowser-viewType--grid li.uppy-ProviderBrowserItem,
.uppy-size--md .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-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;
}
.uppy-ProviderBrowser-viewType--grid .uppy-ProviderBrowserItem-checkbox::after,
.uppy-ProviderBrowser-viewType--unsplash .uppy-ProviderBrowserItem-checkbox::after {
top: 8px;
width: 12px;
height: 7px;
inset-inline-start: 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;
}
.uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-checkbox {
width: 17px;
height: 17px;
background-color: #fff;
border: 1px solid #cfcfcf;
border-radius: 3px;
margin-inline-end: 15px;
}
.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);
}
.uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-checkbox::after {
top: 4px;
width: 9px;
height: 5px;
opacity: 0;
inset-inline-start: 3px;
}
[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;
}
.uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-inner img,
.uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-inner svg {
margin-inline-end: 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;
}
.uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-iconWrap {
width: 20px;
margin-inline-end: 7px;
}
.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-size--md .uppy-SearchProvider-input {
margin-bottom: 20px;
}
.uppy-SearchProvider-input::-webkit-search-cancel-button {
display: none;
}
.uppy-SearchProvider-searchButton {
padding: 13px 25px;
}
.uppy-size--md .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-size--md .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: rgb(17.805, 101.89, 241.195);
}
.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;
}
.uppy-Provider-breadcrumbs {
flex: 1;
margin-bottom: 10px;
color: #525252;
font-size: 12px;
text-align: start;
}
.uppy-size--md .uppy-Provider-breadcrumbs {
margin-bottom: 0;
}
[data-uppy-theme=dark] .uppy-Provider-breadcrumbs {
color: #eaeaea;
}
.uppy-Provider-breadcrumbsIcon {
display: inline-block;
color: #525252;
line-height: 1;
vertical-align: middle;
margin-inline-end: 4px;
}
.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: rgb(13.92, 81.2, 160.08);
}
.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;
}
.uppy-ProviderBrowser-user::after {
position: relative;
color: #939393;
font-weight: normal;
content: "·";
inset-inline-start: 4px;
}
.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-size--md .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;
}
.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;
padding-inline-start: 30px;
padding-inline-end: 30px;
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;
}
.uppy-ProviderBrowser-searchFilterIcon {
position: absolute;
z-index: 1002;
width: 12px;
height: 12px;
color: #757575;
inset-inline-start: 16px;
}
.uppy-ProviderBrowser-searchFilterInput::placeholder {
color: #939393;
opacity: 1;
}
.uppy-ProviderBrowser-searchFilterReset {
border-radius: 3px;
position: absolute;
z-index: 1002;
width: 22px;
height: 22px;
padding: 6px;
color: #939393;
cursor: pointer;
inset-inline-end: 16px;
}
.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: rgb(13.92, 81.2, 160.08);
}
.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;
}
.uppy-ProviderBrowser-footer button {
margin-inline-end: 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;
}
}
/* https://stackoverflow.com/a/33082658/6519037 */
.picker-dialog-bg {
z-index: 20000 !important;
}
.picker-dialog {
z-index: 20001 !important;
}
.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-size--md .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 rgb(86.64, 157.4, 240.36);
}
[data-uppy-theme=dark] .uppy-Dashboard-Item-previewLink:focus {
box-shadow: inset 0 0 0 3px rgb(1.1639344262, 108.2459016393, 140.8360655738);
}
.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-size--md .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: rgb(86.64, 157.4, 240.36);
}
.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;
}
.uppy-Dashboard-Item.is-complete .uppy-Dashboard-Item-progress {
top: -9px;
width: auto;
transform: initial;
inset-inline-end: -8px;
inset-inline-start: initial;
}
.uppy-Dashboard-Item.is-error .uppy-Dashboard-Item-progressIndicator {
width: 18px;
height: 18px;
}
.uppy-size--md .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-size--md .uppy-Dashboard-Item.is-complete .uppy-Dashboard-Item-progressIndicator {
width: 22px;
height: 22px;
}
.uppy-Dashboard-Item.is-processing .uppy-Dashboard-Item-progress {
opacity: 0;
}
.uppy-Dashboard-Item-fileInfo {
padding-inline-end: 5px;
}
.uppy-Dashboard--singleFile .uppy-Dashboard-Item-fileInfo {
padding-inline-end: 10px;
}
.uppy-size--md.uppy-Dashboard--singleFile .uppy-Dashboard-Item-fileInfo {
padding-inline-end: 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-size--md.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: rgb(165.3582995951, 21.1417004049, 35.487854251);
background-color: rgb(253.016194332, 239.483805668, 240.8299595142);
padding: 5px 6px;
}
.uppy-Dashboard-Item-errorMessageBtn {
font-size: 11px;
text-decoration: underline;
color: rgb(165.3582995951, 21.1417004049, 35.487854251);
cursor: pointer;
font-weight: 500;
}
.uppy-Dashboard-Item-preview .uppy-Dashboard-Item-errorMessage {
display: none;
}
.uppy-size--md .uppy-Dashboard-Item-preview .uppy-Dashboard-Item-errorMessage {
display: block;
border-top: 1px solid rgb(247.2348178138, 194.2651821862, 199.5344129555);
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 rgb(247.2348178138, 194.2651821862, 199.5344129555);
border-radius: 3px;
}
.uppy-size--md .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;
}
.uppy-size--md .uppy-Dashboard-Item-action--remove {
position: absolute;
top: -8px;
inset-inline-end: -8px;
z-index: 1002;
width: 18px;
height: 18px;
padding: 0;
}
.uppy-size--md .uppy-Dashboard-Item-action--remove:focus {
border-radius: 50%;
}
.uppy-Dashboard--singleFile.uppy-size--height-md .uppy-Dashboard-Item-action--remove {
position: absolute;
inset-inline-end: 8px;
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:not(.uppy-size--md):not(.uppy-Dashboard--singleFile.uppy-size--height-md) .uppy-Dashboard-Item-actionWrapper {
display: flex;
align-items: center;
}
.uppy-Dashboard:not(.uppy-size--md):not(.uppy-Dashboard--singleFile.uppy-size--height-md) .uppy-Dashboard-Item-action {
width: 22px;
height: 22px;
margin-left: 3px;
padding: 3px;
}
.uppy-Dashboard:not(.uppy-size--md):not(.uppy-Dashboard--singleFile.uppy-size--height-md) .uppy-Dashboard-Item-action:focus {
border-radius: 3px;
}
.uppy-size--md .uppy-Dashboard-Item-action--copyLink,
.uppy-size--md .uppy-Dashboard-Item-action--edit {
width: 16px;
height: 16px;
padding: 0;
}
.uppy-size--md .uppy-Dashboard-Item-action--copyLink:focus,
.uppy-size--md .uppy-Dashboard-Item-action--edit:focus {
border-radius: 3px;
}
.uppy-Dashboard-Item {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #eaeaea;
}
.uppy-Dashboard:not(.uppy-Dashboard--singleFile) .uppy-Dashboard-Item {
padding-inline-end: 0;
}
[data-uppy-theme=dark] .uppy-Dashboard-Item {
border-bottom: 1px solid #333;
}
.uppy-size--md .uppy-Dashboard-Item {
position: relative;
display: block;
float: inline-start;
/* 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-size--md .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-size--md .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-size--md .uppy-Dashboard-Item-preview {
max-height: 100%;
}
.uppy-Dashboard-Item-fileInfoAndButtons {
display: flex;
flex-grow: 1;
align-items: center;
justify-content: space-between;
padding-inline-end: 8px;
padding-inline-start: 12px;
}
.uppy-size--md .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;
}
.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;
appearance: none;
inset-inline-start: 2px;
}
.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);
}
.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;
inset-inline-end: 10px;
}
.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-size--md .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-size--md .uppy-Dashboard-FileCard-actions {
height: 65px;
}
[data-uppy-theme=dark] .uppy-Dashboard-FileCard-actions {
background-color: #1f1f1f;
border-top: 1px solid #333;
}
.uppy-Dashboard-FileCard-actionsBtn {
margin-inline-end: 10px;
}
.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-size--md .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;
}
.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%;
inset-inline-start: 3px;
margin-inline-start: -1px;
}
.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%, tra