30 lines
1.2 KiB
PHTML
30 lines
1.2 KiB
PHTML
<template id="ui-upload">
|
|
<style>
|
|
[hidden] {display:none !important}
|
|
.image-drop {display:flex;border-radius:4px;cursor:pointer;height:30vh;background:#fff;margin:5vh auto;text-align:center;border:1px dashed #909599;font-size:3rem;justify-content:center;align-items:center;}
|
|
.image-drop:hover {border-color:#676565}
|
|
.image-drop:hover span {text-decoration: underline;}
|
|
.image-drop.ui-dragdrop-over {opacity:0.66;}
|
|
.image-drop .drop-file {display:inline-block;line-height:20vh;color:#888;font-size:1.5em;}
|
|
.image-drop i {opacity:0.7}
|
|
.image-drop:hover i {opacity:1.0}
|
|
</style>
|
|
|
|
<label class="image-drop">
|
|
<slot style="display:none" name="input"></slot>
|
|
<slot name="icon"></slot>
|
|
</label>
|
|
</template>
|
|
|
|
<template id="ui-upload-media">
|
|
<style>
|
|
* {box-sizing: border-box}
|
|
img {max-height: 15vh;max-width:100%}
|
|
.new-media-wrapper {display:flex;flex-flow:wrap;align-items:center;background: #e3e3e3;border: 1px solid #ccc;}
|
|
.new-media-item {width:33.33%;padding:2%}
|
|
</style>
|
|
|
|
<div class="new-media-item" hidden><div><img></div></div>
|
|
|
|
<div class="new-media-wrapper"></div>
|
|
</template> |