91 lines
2.7 KiB
HTML
91 lines
2.7 KiB
HTML
|
<style type="text/css">
|
||
|
|
.contented {
|
||
|
|
box-sizing:border-box;
|
||
|
|
text-align: center;
|
||
|
|
border: 8px dashed lightgrey;
|
||
|
|
padding: 12px;
|
||
|
|
background:white; /* not transparent */
|
||
|
|
|
||
|
|
text-overflow:hidden;
|
||
|
|
overflow:auto;
|
||
|
|
width:100%;
|
||
|
|
height:100%;
|
||
|
|
|
||
|
|
position:relative;
|
||
|
|
}
|
||
|
|
.contented .contented-upload-type-selector {
|
||
|
|
display:block;
|
||
|
|
margin-bottom: 1em;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
.contented .contented-upload-type {
|
||
|
|
display:inline-block;
|
||
|
|
opacity:0.2;
|
||
|
|
transition:opacity linear 0.1s;
|
||
|
|
cursor:pointer;
|
||
|
|
}
|
||
|
|
.contented .contented-upload-type:hover {
|
||
|
|
opacity:0.5;
|
||
|
|
transition:opacity linear 0s;
|
||
|
|
}
|
||
|
|
.contented .contented-upload-type svg {
|
||
|
|
width:36px;
|
||
|
|
height:36px;
|
||
|
|
}
|
||
|
|
.contented .contented-upload-type.contented-upload-type-active {
|
||
|
|
opacity:1;
|
||
|
|
}
|
||
|
|
.contented.is-dragging {
|
||
|
|
background: lightblue;
|
||
|
|
}
|
||
|
|
.contented-upload-if {
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
.contented-upload-if.contented-active {
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
.contented textarea {
|
||
|
|
position:absolute;
|
||
|
|
top: 60px;
|
||
|
|
bottom: 10px;
|
||
|
|
left: 10px;
|
||
|
|
width: calc(100% - 28px);
|
||
|
|
resize: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div class="contented">
|
||
|
|
|
||
|
|
<div class="contented-upload-type-selector">
|
||
|
|
|
||
|
|
<div class="contented-upload-type contented-upload-type-active" data-upload-type="drag" title="Drag and drop">
|
||
|
|
<svg viewBox="0 0 24 24">
|
||
|
|
<path fill="#000000" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="contented-upload-type" data-upload-type="file" title="Multiple files">
|
||
|
|
<svg viewBox="0 0 24 24">
|
||
|
|
<path fill="#000000" d="M15,7H20.5L15,1.5V7M8,0H16L22,6V18A2,2 0 0,1 20,20H8C6.89,20 6,19.1 6,18V2A2,2 0 0,1 8,0M4,4V22H20V24H4A2,2 0 0,1 2,22V4H4Z"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="contented-upload-type" data-upload-type="paste" title="Paste">
|
||
|
|
<svg viewBox="0 0 24 24">
|
||
|
|
<path fill="#000000" d="M19,20H5V4H7V7H17V4H19M12,2A1,1 0 0,1 13,3A1,1 0 0,1 12,4A1,1 0 0,1 11,3A1,1 0 0,1 12,2M19,2H14.82C14.4,0.84 13.3,0 12,0C10.7,0 9.6,0.84 9.18,2H5A2,2 0 0,0 3,4V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V4A2,2 0 0,0 19,2Z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="contented-upload-if contented-if-drag contented-active">
|
||
|
|
<label>Drop files to upload <span class="contented-extratext"></span></label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="contented-upload-if contented-if-file">
|
||
|
|
<label>Select files to upload <span class="contented-extratext"></span></label><br>
|
||
|
|
<input name="f" type="file" multiple>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="contented-upload-if contented-if-paste">
|
||
|
|
<textarea name="paste-content"></textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|