contented/static/widget.html

148 lines
4.2 KiB
HTML
Raw Permalink Normal View History

<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;
}
2017-10-08 00:45:55 +00:00
.contented .contented-close {
position: absolute;
top: 12px;
right: 12px;
2017-10-08 01:11:05 +00:00
width: 24px;
height: 24px;
2017-10-08 00:45:55 +00:00
cursor: pointer;
}
.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;
}
2017-10-08 00:45:55 +00:00
.contented-content-area {
position:absolute;
top: 60px;
bottom: 10px;
left: 10px;
width: calc(100% - 20px);
/* Prevent blur under translateY */
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.contented-content-area > div {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.contented-upload-if {
display:none;
}
2017-10-08 00:45:55 +00:00
.contented-if-paste {
height:100%;
}
.contented-upload-if.contented-active {
display:block;
}
.contented textarea {
resize: none;
2017-10-08 00:45:55 +00:00
width:100%;
2017-10-08 03:15:15 +00:00
height:calc(100% - 1em - 15px);
2017-10-08 00:45:55 +00:00
box-sizing:border-box;
}
.contented-progress-bar {
display: block;
width:90%;
2017-10-08 01:49:00 +00:00
margin:0.5em auto 0 auto;
2017-10-08 00:45:55 +00:00
height:16px;
2017-10-08 01:49:00 +00:00
border-radius:8px;
2017-10-08 00:45:55 +00:00
background:lightgrey;
position:relative;
}
.contented-progress-element {
position:absolute;
background:darkgreen;
left:0;
width:0%;
}
</style>
<div class="contented">
2017-10-08 00:45:55 +00:00
<div class="contented-close">
2017-10-08 01:11:05 +00:00
<svg viewBox="0 0 24 24">
2017-10-08 00:45:55 +00:00
<path fill="#000000" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
</svg>
</div>
<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>
2017-10-08 00:45:55 +00:00
<div class="contented-content-area">
<div class="contented-upload-if contented-if-drag contented-active">
<label>Drop files to upload <span class="contented-extratext"></span></label>
</div>
2017-10-08 00:45:55 +00:00
<div class="contented-upload-if contented-if-file">
<label>Select files to upload <span class="contented-extratext"></span></label><br>
2017-10-08 03:11:59 +00:00
<input class="contented-file-selector" type="file" multiple>
<button class="contented-file-upload">Upload &raquo;</button>
2017-10-08 00:45:55 +00:00
</div>
2017-10-08 00:45:55 +00:00
<div class="contented-upload-if contented-if-paste">
2017-10-08 03:15:15 +00:00
<textarea placeholder="Paste content here"></textarea>
<button class="contented-paste-upload">Upload &raquo;</button>
2017-10-08 00:45:55 +00:00
</div>
<div class="contented-upload-if contented-if-progress">
<label>...</label>
<div class="contented-progress-bar"><div class="contented-progress-element"></div></div>
</div>
</div>
</div>