115 lines
3.8 KiB
Plaintext
115 lines
3.8 KiB
Plaintext
.upload-box {
|
|
--p-header-text-color:var(--config-color-background-fade);
|
|
--p-header-bg-color:var(--config-color-normal);
|
|
|
|
--p-content-text-color:var(--config-color-normal);
|
|
--p-content-bg-color:var(--config-color-background-fade);
|
|
|
|
--p-border-color:var(--config-modal-note-border);
|
|
|
|
|
|
--box-shadow:0 10px 10px rgba(0, 0, 0, 0.05);
|
|
--border-radius:6px;
|
|
--transition:0.2s;
|
|
|
|
position:fixed; z-index:1; overflow:hidden; min-width:285px;
|
|
box-shadow:var(--box-shadow);
|
|
border-radius:var(--border-radius);
|
|
font-size:14px; line-height:1;
|
|
*{all:unset; display:revert;}
|
|
&-header {
|
|
display:flex; padding:16px; padding-inline-end:21px;
|
|
color:var(--p-header-text-color); background-color:var(--p-header-bg-color);
|
|
.icon-button { margin-inline-start:16px; }
|
|
}
|
|
&-title {
|
|
align-self:center; margin-inline-end:auto; margin-block-end:0;
|
|
.amount {
|
|
&::before { content:"("; }
|
|
&::after { content:")"; }
|
|
}
|
|
}
|
|
&-content {
|
|
background-color:var(--p-content-bg-color); color:var(--p-content-text-color);
|
|
height:0; overflow:auto;
|
|
transition:var(--transition);
|
|
&.is-open {height:200px; /* consider to change to rem */}
|
|
}
|
|
&-list {}
|
|
&-item {
|
|
display:flex; align-items:center; padding:13px 20px;
|
|
.file-name {text-overflow:ellipsis; white-space:nowrap; overflow:hidden; align-self:center; margin-inline-end:auto; line-height:normal; }
|
|
.icon-button{ align-self:center; margin-inline-start:16px;}
|
|
.pill{margin-inline-start:8px;}
|
|
&:not(:last-child) { border-bottom:solid 1px var(--p-border-color); }
|
|
}
|
|
|
|
/* responsive */
|
|
@media @phones { inset-inline:16px; inset-block-end:20px; }
|
|
@media @tablets, @desktops { max-width:285px; inset-inline-end:24px; inset-block-end:24px; }
|
|
|
|
/* dark theme */
|
|
:root .theme-dark &{
|
|
--p-header-text-color:#fff;
|
|
--p-header-bg-color:var(--config-color-background-dark);
|
|
}
|
|
}
|
|
|
|
.upload-image {
|
|
@upload-image-size-default: 40px;
|
|
--p-upload-image-size:var(--upload-image-size, @upload-image-size-default);
|
|
--p-upload-bg-color:var(--config-color-fade-super);
|
|
--p-upload-icon-color:var(--config-color-fade);
|
|
|
|
position:relative; display:grid; place-content:center; flex-shrink:0;
|
|
width:var(--p-upload-image-size);
|
|
height:var(--p-upload-image-size);
|
|
background-color:var(--p-upload-bg-color);
|
|
color:var(--p-upload-icon-color);
|
|
border-radius:50%;
|
|
|
|
.icon{position:relative; z-index:20;}
|
|
.progress {
|
|
--progress:var(--progress-value, 0);
|
|
--zero-value: 0 0% 0% / 0%;
|
|
position:absolute; z-index:10; inset:0; border-radius:50%;
|
|
background:
|
|
~"radial-gradient(
|
|
var(--p-upload-bg-color) 0%,
|
|
var(--p-upload-bg-color) 64%,
|
|
transparent 64.01%,
|
|
transparent 100%),
|
|
|
|
conic-gradient(
|
|
hsl(194 66% 50%) 0%,
|
|
hsl(97 66% 50%) calc(var(--progress) * 1%),
|
|
hsl(var(--zero-value)) calc(var(--progress) * 1%),
|
|
hsl(var(--zero-value)) 100%)";
|
|
}
|
|
&.is-finished {
|
|
.progress{ display:none; }
|
|
}
|
|
/* dark theme */
|
|
:root .theme-dark &{
|
|
--p-upload-bg-color:var(--config-color-background-dark);
|
|
--p-upload-icon-color:var(--config-color-focus);
|
|
}
|
|
}
|
|
|
|
[data-views-current]:not([data-views-current="0"]):not([data-views-current="1"]) .upload-box {
|
|
margin-right: 4rem;
|
|
}
|
|
|
|
.icon-button {
|
|
--p-icon-button-size:var(--icon-button-size, 20px);
|
|
|
|
width:var(--p-icon-button-size);
|
|
height:var(--p-icon-button-size);
|
|
font-size:var(--p-icon-button-size);
|
|
transition:0.2s; line-height:1; text-align:center; flex-shrink:0; cursor:pointer;
|
|
>*::before{margin:0;}
|
|
&.is-open { transform:rotate(180deg); }
|
|
&.is-success { color:var(--config-color-success); }
|
|
&:focus, &:hover { background-color:unset; }
|
|
&:focus-visible { outline:dashed 1px var(--config-color-primary); }
|
|
} |