diff --git a/js/file-selector.js b/js/file-selector.js index c820db48..ddae2d09 100644 --- a/js/file-selector.js +++ b/js/file-selector.js @@ -140,7 +140,8 @@ var dropHandlers = { } }; -$('.dropzone').css('user-select', 'none') // let jquery add browser specific prefix +$('#upload input[type=file]').hide(); // hide the original file selector +$('.dropzone-wrap').css('user-select', 'none').show(); // let jquery add browser specific prefix // attach handlers $(document).on(dropHandlers, '.dropzone'); diff --git a/stylesheets/style.css b/stylesheets/style.css index e0ce08c5..56140561 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -959,3 +959,84 @@ span.pln { cursor: pointer; } +#youtube-size input { + width: 50px; +} + +/* File selector */ +.dropzone { + color: #000; + cursor: default; + margin: auto; + padding: 0px 4px; + text-align: center; + min-height: 50px; + max-height: 140px; + transition: 0.2s; + background-color: rgba(200, 200, 200, 0.5); + overflow-y: auto; +} +.dropzone-wrap { + width: 100%; +} +.dropzone .file-hint { + color: rgba(0, 0, 0, 0.5); + cursor: pointer; + position: relative; + margin-bottom: 5px; + padding: 10px 0px; + top: 5px; + transition: 0.2s; + border: 2px dashed rgba(125, 125, 125, 0.4); +} +.file-hint:hover, .dropzone.dragover .file-hint { + color: rgba(0, 0, 0, 1); + border-color: rgba(125, 125, 125, 0.8); +} +.dropzone.dragover { + background-color: rgba(200, 200, 200, 1); +} +.dropzone .file-thumbs { + text-align: left; + width: 100%; +} +.dropzone .tmb-container { + padding: 3px; + overflow-x: hidden; + white-space: nowrap; +} +.dropzone .file-tmb { + height: 40px; + width: 70px; + cursor: pointer; + display: inline-block; + text-align: center; + background-color: rgba(187, 187, 187, 0.5); + background-size: cover; + background-position: center; +} +.dropzone .file-tmb span { + font-weight: 600; + position: relative; + top: 13px; +} +.dropzone .tmb-filename { + display: inline-block; + vertical-align: bottom; + bottom: 12px; + position: relative; + margin-left: 5px; +} +.dropzone .remove-btn { + cursor: pointer; + color: rgba(125, 125, 125, 0.5); + display: inline-block; + vertical-align: bottom; + bottom: 10px; + position: relative; + margin-right: 5px; + font-size: 20px +} +.dropzone .remove-btn:hover { + color: rgba(125, 125, 125, 1); +} diff --git a/templates/post_form.html b/templates/post_form.html index 1846adb5..9596ee6b 100644 --- a/templates/post_form.html +++ b/templates/post_form.html @@ -98,6 +98,14 @@ + + + {% if config.allow_upload_by_url %}
: