From 7a7f592d0f45c7225105f56441ae561d36eb2225 Mon Sep 17 00:00:00 2001 From: Nick Spiel Date: Fri, 20 Nov 2015 14:16:52 +1100 Subject: [PATCH] Adding a transparent background to upload preview Adding a background to upload preview I could not see a preview of a white image with background transparency in the preview area. Adding a backgorund to this area helps make it more visible. Applying background image to img Applying background image to img to avoid layout change Applying background image to img Applying background image to img to avoid layout change --- css/UploadField.css | 1 + scss/UploadField.scss | 3 +++ 2 files changed, 4 insertions(+) diff --git a/css/UploadField.css b/css/UploadField.css index 0f496734f..1740fe29f 100644 --- a/css/UploadField.css +++ b/css/UploadField.css @@ -16,6 +16,7 @@ Used in side panels and action tabs .ss-uploadfield .ss-uploadfield-item { margin: 0; padding: 15px; overflow: auto; } .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview { height: 60px; line-height: 60px; width: 80px; text-align: center; font-weight: bold; float: left; overflow: hidden; } .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview.ss-uploadfield-dropzone { -moz-box-shadow: #808080 0 0 4px 0 inset; -webkit-box-shadow: #808080 0 0 4px 0 inset; box-shadow: #808080 0 0 4px 0 inset; border: 2px dashed #808080; background: #d0d3d5; display: none; margin-right: 15px; } +.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview img { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2O8dOnSfwYkoKenx4jMZ6SDAmT7QGx0K1EcRBsFAJfOHd3Le79RAAAAAElFTkSuQmCC') repeat; } .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info { margin-left: 95px; } .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name { display: block; line-height: 13px; height: 26px; margin: 0; text-align: left; } .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .name { max-width: 240px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; display: inline; float: left; } diff --git a/scss/UploadField.scss b/scss/UploadField.scss index f7708c8c4..1ea58f6b8 100644 --- a/scss/UploadField.scss +++ b/scss/UploadField.scss @@ -48,6 +48,9 @@ display: none; margin-right: 15px; } + img { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2O8dOnSfwYkoKenx4jMZ6SDAmT7QGx0K1EcRBsFAJfOHd3Le79RAAAAAElFTkSuQmCC) repeat; + } } .ss-uploadfield-item-info { margin-left: 95px;