diff --git a/modules/backend/assets/less/controls/file-icon.less b/modules/backend/assets/less/controls/file-icon.less new file mode 100644 index 0000000000..9f90ad3238 --- /dev/null +++ b/modules/backend/assets/less/controls/file-icon.less @@ -0,0 +1,76 @@ +.file-icon { + fill-rule: evenodd; + clip-rule: evenodd; + stroke-linejoin: round; + stroke-miterlimit: 2; + display: inline-block; + + &-extension { + font-family: 'ArialMT','Arial',sans-serif; + font-size: 4em; + font-weight: 900; + fill: var(--wn-filetype-label, #fff); + } + + &-label { + fill: var(--wn-text, #576D7E); /* Default color */ + fill-rule: nonzero; + } + + &-css, + &-less, + &-scss { + fill: var(--wn-filetype-scss, #B73FD9); + } + &-html, + &-xml { + fill: var(--wn-filetype-xml, #EA9B47); + } + &-js, + &-json { + fill: var(--wn-filetype-json, #A9A9A9); + } + &-pdf { + fill: var(--wn-filetype-pdf, #E30713); + } + &-txt { + fill: var(--wn-filetype-txt, #248BD0); + } + &-ai { + fill: var(--wn-filetype-ai, #F29200); + } + &-eps { + fill: var(--wn-filetype-eps, #F9B234); + } + &-psd { + fill: var(--wn-filetype-psd, #2DAAE2); + } + &-ttf, + &-otf, + &-woff, + &-woff2 { + fill: var(--wn-filetype-woff2, #C4CA10); + } + &-doc, + &-docx, + &-rtf, + &-odt { + fill: var(--wn-filetype-odt, #0F70B7); + } + &-csv, + &-ods, + &-xls, + &-xlsx { + fill: var(--wn-filetype-xlsx, #3BAA34); + } + &-odp, + &-ppt, + &-pptx { + fill: var(--wn-filetype-pptx, #D04526); + } + &-rar, + &-tar, + &-zip { + fill: var(--wn-filetype-zip, #363A56); + } +} diff --git a/modules/backend/facades/Backend.php b/modules/backend/facades/Backend.php index 1d679a073b..ac40a7a1a1 100644 --- a/modules/backend/facades/Backend.php +++ b/modules/backend/facades/Backend.php @@ -12,6 +12,7 @@ * @method static \Illuminate\Http\RedirectResponse redirectIntended(string $path, int $status = 302, array $headers = [], ?bool $secure = null) * @method static string date($dateTime, array $options = []) * @method static string dateTime($dateTime, array $options = []) + * @method static string fileIcon(string $extension) * * @see \Backend\Helpers\Backend */ diff --git a/modules/backend/formwidgets/FileUpload.php b/modules/backend/formwidgets/FileUpload.php index 1d6cc8fe38..df2df69b7c 100644 --- a/modules/backend/formwidgets/FileUpload.php +++ b/modules/backend/formwidgets/FileUpload.php @@ -4,6 +4,7 @@ use Backend\Classes\FormField; use Backend\Classes\FormWidgetBase; +use Backend\Facades\Backend; use Backend\Widgets\Form; use Exception; use Illuminate\Support\Facades\Response; @@ -104,6 +105,11 @@ class FileUpload extends FormWidgetBase */ protected $configFormWidget; + /** + * @var array Extensions of image files that browsers can display, other files are shown with a file icon. + */ + protected $displayableImageExtensions = ['avif', 'bmp', 'gif', 'ico', 'jpeg', 'jpg', 'png', 'svg', 'webp']; + /** * @inheritDoc */ @@ -511,6 +517,7 @@ public function onUpload() $result = [ 'id' => $file->id, 'thumb' => $file->thumbUrl, + 'icon' => $this->makeFileIcon($file), 'path' => $file->pathUrl ]; @@ -543,6 +550,21 @@ protected function decorateFileAttributes($file) return $file; } + /** + * Renders a file extension icon for files that cannot be displayed as an image, + * returns null for image files. + */ + protected function makeFileIcon($file): ?string + { + $extension = strtolower($file->getExtension()); + + if (in_array($extension, $this->displayableImageExtensions)) { + return null; + } + + return Backend::fileIcon($extension); + } + /** * Return max upload filesize in Mb * @return integer diff --git a/modules/backend/formwidgets/fileupload/assets/css/fileupload.css b/modules/backend/formwidgets/fileupload/assets/css/fileupload.css index b3f1fa0b75..e9af7ee2a1 100644 --- a/modules/backend/formwidgets/fileupload/assets/css/fileupload.css +++ b/modules/backend/formwidgets/fileupload/assets/css/fileupload.css @@ -1,3 +1,36 @@ +.file-icon{fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;display:inline-block} +.file-icon-extension{font-family:'ArialMT','Arial',sans-serif;font-size:4em;font-weight:900;fill:var(--wn-filetype-label,#fff)} +.file-icon-label{fill:var(--wn-text,#576D7E);fill-rule:nonzero} +.file-icon-css, +.file-icon-less, +.file-icon-scss{fill:var(--wn-filetype-scss,#B73FD9)} +.file-icon-html, +.file-icon-xml{fill:var(--wn-filetype-xml,#EA9B47)} +.file-icon-js, +.file-icon-json{fill:var(--wn-filetype-json,#A9A9A9)} +.file-icon-pdf{fill:var(--wn-filetype-pdf,#E30713)} +.file-icon-txt{fill:var(--wn-filetype-txt,#248BD0)} +.file-icon-ai{fill:var(--wn-filetype-ai,#F29200)} +.file-icon-eps{fill:var(--wn-filetype-eps,#F9B234)} +.file-icon-psd{fill:var(--wn-filetype-psd,#2DAAE2)} +.file-icon-ttf, +.file-icon-otf, +.file-icon-woff, +.file-icon-woff2{fill:var(--wn-filetype-woff2,#C4CA10)} +.file-icon-doc, +.file-icon-docx, +.file-icon-rtf, +.file-icon-odt{fill:var(--wn-filetype-odt,#0F70B7)} +.file-icon-csv, +.file-icon-ods, +.file-icon-xls, +.file-icon-xlsx{fill:var(--wn-filetype-xlsx,#3BAA34)} +.file-icon-odp, +.file-icon-ppt, +.file-icon-pptx{fill:var(--wn-filetype-pptx,#D04526)} +.file-icon-rar, +.file-icon-tar, +.file-icon-zip{fill:var(--wn-filetype-zip,#363A56)} .field-fileupload .upload-object{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;position:relative;outline:none;overflow:hidden;display:inline-block;vertical-align:top} .field-fileupload .upload-object img{width:100%;height:100%} .field-fileupload .upload-object .icon-container{display:table;opacity:0.6} @@ -65,6 +98,7 @@ .field-fileupload.style-image-multi .upload-object .progress-bar .upload-progress{float:left;width:0%;height:100%;line-height:5px;color:var(--wn-fileupload-progress-bar-color,#fff);background-color:var(--wn-fileupload-base-bg,#5fb6f5);-webkit-box-shadow:none;box-shadow:none;-webkit-transition:width 0.6s ease;transition:width 0.6s ease} .field-fileupload.style-image-multi .upload-object .icon-container{border-right:1px solid var(--wn-fileupload-imagemulti-border,#f6f8f9);float:left;overflow:hidden;width:75px;height:75px;display:flex;align-items:center;justify-content:center} .field-fileupload.style-image-multi .upload-object .icon-container i{font-size:35px} +.field-fileupload.style-image-multi .upload-object .icon-container .file-icon{width:44px;height:44px} .field-fileupload.style-image-multi .upload-object .icon-container.image img{border-bottom-left-radius:3px;border-top-left-radius:3px;width:auto;height:auto;max-height:100%} .field-fileupload.style-image-multi .upload-object .info{margin-left:90px} .field-fileupload.style-image-multi .upload-object .info h4{padding-right:15px} @@ -97,6 +131,7 @@ .field-fileupload.style-image-single .upload-object{padding-bottom:66px} .field-fileupload.style-image-single .upload-object .icon-container{border:1px solid var(--wn-fileupload-imagesingle-border,#f6f8f9);background:rgba(255,255,255,0.5)} .field-fileupload.style-image-single .upload-object .icon-container.image img{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:block;max-width:100%;height:auto;min-height:100px;min-width:100px} +.field-fileupload.style-image-single .upload-object .icon-container .file-icon{display:block;width:100px;height:100px} .field-fileupload.style-image-single .upload-object .progress-bar{display:block;width:100%;overflow:hidden;height:5px;background-color:var(--wn-fileupload-progress-bar-bg,#f5f5f5);border-radius:3px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);position:absolute;bottom:10px;left:0} .field-fileupload.style-image-single .upload-object .progress-bar .upload-progress{float:left;width:0%;height:100%;line-height:5px;color:var(--wn-fileupload-progress-bar-color,#fff);background-color:var(--wn-fileupload-base-bg,#5fb6f5);-webkit-box-shadow:none;box-shadow:none;-webkit-transition:width 0.6s ease;transition:width 0.6s ease} .field-fileupload.style-image-single .upload-object .info{position:absolute;left:0;right:0;bottom:0;height:66px} diff --git a/modules/backend/formwidgets/fileupload/assets/js/fileupload.js b/modules/backend/formwidgets/fileupload/assets/js/fileupload.js index de9e47ab6c..c11f202c0f 100644 --- a/modules/backend/formwidgets/fileupload/assets/js/fileupload.js +++ b/modules/backend/formwidgets/fileupload/assets/js/fileupload.js @@ -215,7 +215,13 @@ $preview.data('id', response.id) $preview.data('path', response.path) $('.upload-remove-button', $preview).data('request-data', { file_id: response.id }) - $img.attr('src', response.thumb) + + if (response.icon) { + $img.replaceWith(response.icon) + } + else { + $img.attr('src', response.thumb) + } } this.triggerChange(); diff --git a/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagemulti.less b/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagemulti.less index eedc56da4d..72bf0d7ef4 100644 --- a/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagemulti.less +++ b/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagemulti.less @@ -46,6 +46,11 @@ font-size: 35px; } + .file-icon { + width: 44px; + height: 44px; + } + &.image img { .border-left-radius(3px); width: auto; diff --git a/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagesingle.less b/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagesingle.less index 2f9e1edf74..08ddb6a254 100644 --- a/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagesingle.less +++ b/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagesingle.less @@ -32,6 +32,12 @@ min-height: 100px; min-width: 100px; } + + .file-icon { + display: block; + width: 100px; + height: 100px; + } } .progress-bar { diff --git a/modules/backend/formwidgets/fileupload/assets/less/fileupload.less b/modules/backend/formwidgets/fileupload/assets/less/fileupload.less index 2591d7e327..bd07c87154 100644 --- a/modules/backend/formwidgets/fileupload/assets/less/fileupload.less +++ b/modules/backend/formwidgets/fileupload/assets/less/fileupload.less @@ -1,4 +1,5 @@ @import "../../../../assets/less/core/boot.less"; +@import "../../../../assets/less/controls/file-icon.less"; @fileupload-progress-bar-height: 5px; @fileupload-progress-bar-color: var(--wn-fileupload-progress-bar-color, #fff); diff --git a/modules/backend/formwidgets/fileupload/partials/_image_multi.php b/modules/backend/formwidgets/fileupload/partials/_image_multi.php index 59364b0cda..01ab24c2b3 100644 --- a/modules/backend/formwidgets/fileupload/partials/_image_multi.php +++ b/modules/backend/formwidgets/fileupload/partials/_image_multi.php @@ -26,7 +26,11 @@ class="field-fileupload style-image-multi is-sortable is-multi
- + makeFileIcon($file)): ?> + + + +

diff --git a/modules/backend/formwidgets/fileupload/partials/_image_single.php b/modules/backend/formwidgets/fileupload/partials/_image_single.php index cf5ce5c662..15eb912b89 100644 --- a/modules/backend/formwidgets/fileupload/partials/_image_single.php +++ b/modules/backend/formwidgets/fileupload/partials/_image_single.php @@ -30,7 +30,11 @@ class="upload-button">
- + makeFileIcon($singleFile)): ?> + + + +

diff --git a/modules/backend/helpers/Backend.php b/modules/backend/helpers/Backend.php index b38fd58c06..b12f18e68e 100644 --- a/modules/backend/helpers/Backend.php +++ b/modules/backend/helpers/Backend.php @@ -7,6 +7,7 @@ use Exception; use Illuminate\Support\Facades\Redirect; use Illuminate\Support\Facades\Request; +use Illuminate\Support\Facades\View; use System\Helpers\DateTime as DateTimeHelper; use Winter\Storm\Router\Helper as RouterHelper; use Winter\Storm\Support\Facades\Config; @@ -182,6 +183,16 @@ public function dateTime($dateTime, $options = []) return ''.e($defaultValue).''.PHP_EOL; } + /** + * Returns the SVG markup for a generic file icon labelled with the given file extension. + */ + public function fileIcon(string $extension): string + { + return View::make('backend::file_icon', [ + 'extension' => substr(strtolower(ltrim($extension, '.')), 0, 4), + ])->render(); + } + /** * Decompiles the compilation asset files * diff --git a/modules/backend/views/file_icon.php b/modules/backend/views/file_icon.php new file mode 100644 index 0000000000..4352e295ac --- /dev/null +++ b/modules/backend/views/file_icon.php @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/modules/backend/widgets/mediamanager/assets/css/mediamanager.css b/modules/backend/widgets/mediamanager/assets/css/mediamanager.css index 76a7eec169..870f70e985 100644 --- a/modules/backend/widgets/mediamanager/assets/css/mediamanager.css +++ b/modules/backend/widgets/mediamanager/assets/css/mediamanager.css @@ -1,40 +1,40 @@ +.file-icon{fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;display:inline-block} +.file-icon-extension{font-family:'ArialMT','Arial',sans-serif;font-size:4em;font-weight:900;fill:var(--wn-filetype-label,#fff)} +.file-icon-label{fill:var(--wn-text,#576D7E);fill-rule:nonzero} +.file-icon-css, +.file-icon-less, +.file-icon-scss{fill:var(--wn-filetype-scss,#B73FD9)} +.file-icon-html, +.file-icon-xml{fill:var(--wn-filetype-xml,#EA9B47)} +.file-icon-js, +.file-icon-json{fill:var(--wn-filetype-json,#A9A9A9)} +.file-icon-pdf{fill:var(--wn-filetype-pdf,#E30713)} +.file-icon-txt{fill:var(--wn-filetype-txt,#248BD0)} +.file-icon-ai{fill:var(--wn-filetype-ai,#F29200)} +.file-icon-eps{fill:var(--wn-filetype-eps,#F9B234)} +.file-icon-psd{fill:var(--wn-filetype-psd,#2DAAE2)} +.file-icon-ttf, +.file-icon-otf, +.file-icon-woff, +.file-icon-woff2{fill:var(--wn-filetype-woff2,#C4CA10)} +.file-icon-doc, +.file-icon-docx, +.file-icon-rtf, +.file-icon-odt{fill:var(--wn-filetype-odt,#0F70B7)} +.file-icon-csv, +.file-icon-ods, +.file-icon-xls, +.file-icon-xlsx{fill:var(--wn-filetype-xlsx,#3BAA34)} +.file-icon-odp, +.file-icon-ppt, +.file-icon-pptx{fill:var(--wn-filetype-pptx,#D04526)} +.file-icon-rar, +.file-icon-tar, +.file-icon-zip{fill:var(--wn-filetype-zip,#363A56)} div[data-control="media-manager"]:focus{outline:none} div[data-control="media-manager"] audio, div[data-control="media-manager"] video{width:100%} div[data-control="media-manager"] video{background:var(--wn-surface-hover,#ecf0f1);max-height:225px} -div[data-control="media-manager"] .file-icon{fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;display:inline-block} -div[data-control="media-manager"] .file-icon-extension{font-family:'ArialMT','Arial',sans-serif;font-size:4em;font-weight:900;fill:var(--wn-filetype-label,#fff)} -div[data-control="media-manager"] .file-icon-label{fill:var(--wn-text,#576D7E);fill-rule:nonzero} -div[data-control="media-manager"] .file-icon-css, -div[data-control="media-manager"] .file-icon-less, -div[data-control="media-manager"] .file-icon-scss{fill:var(--wn-filetype-scss,#B73FD9)} -div[data-control="media-manager"] .file-icon-html, -div[data-control="media-manager"] .file-icon-xml{fill:var(--wn-filetype-xml,#EA9B47)} -div[data-control="media-manager"] .file-icon-js, -div[data-control="media-manager"] .file-icon-json{fill:var(--wn-filetype-json,#A9A9A9)} -div[data-control="media-manager"] .file-icon-pdf{fill:var(--wn-filetype-pdf,#E30713)} -div[data-control="media-manager"] .file-icon-txt{fill:var(--wn-filetype-txt,#248BD0)} -div[data-control="media-manager"] .file-icon-ai{fill:var(--wn-filetype-ai,#F29200)} -div[data-control="media-manager"] .file-icon-eps{fill:var(--wn-filetype-eps,#F9B234)} -div[data-control="media-manager"] .file-icon-psd{fill:var(--wn-filetype-psd,#2DAAE2)} -div[data-control="media-manager"] .file-icon-ttf, -div[data-control="media-manager"] .file-icon-otf, -div[data-control="media-manager"] .file-icon-woff, -div[data-control="media-manager"] .file-icon-woff2{fill:var(--wn-filetype-woff2,#C4CA10)} -div[data-control="media-manager"] .file-icon-doc, -div[data-control="media-manager"] .file-icon-docx, -div[data-control="media-manager"] .file-icon-rtf, -div[data-control="media-manager"] .file-icon-odt{fill:var(--wn-filetype-odt,#0F70B7)} -div[data-control="media-manager"] .file-icon-csv, -div[data-control="media-manager"] .file-icon-ods, -div[data-control="media-manager"] .file-icon-xls, -div[data-control="media-manager"] .file-icon-xlsx{fill:var(--wn-filetype-xlsx,#3BAA34)} -div[data-control="media-manager"] .file-icon-odp, -div[data-control="media-manager"] .file-icon-ppt, -div[data-control="media-manager"] .file-icon-pptx{fill:var(--wn-filetype-pptx,#D04526)} -div[data-control="media-manager"] .file-icon-rar, -div[data-control="media-manager"] .file-icon-tar, -div[data-control="media-manager"] .file-icon-zip{fill:var(--wn-filetype-zip,#363A56)} div[data-control="media-manager"] .media-player-fallback{font-size:13px;color:var(--wn-text-secondary,#95a5a6);background:var(--wn-surface-hover,#ecf0f1);line-height:180%} div[data-control="media-manager"] .media-player-fallback.panel-embedded{padding:20px;margin:-20px -20px 0 -20px} div[data-control="media-manager"] .empty-library{padding:20px;text-align:center} diff --git a/modules/backend/widgets/mediamanager/assets/less/mediamanager.less b/modules/backend/widgets/mediamanager/assets/less/mediamanager.less index 7bb8c671ed..639d1650cc 100644 --- a/modules/backend/widgets/mediamanager/assets/less/mediamanager.less +++ b/modules/backend/widgets/mediamanager/assets/less/mediamanager.less @@ -1,4 +1,5 @@ @import "../../../../../backend/assets/less/core/boot.less"; +@import "../../../../../backend/assets/less/controls/file-icon.less"; @color-media-list-hover-bg: mix(white, @brand-secondary, 13%); @@ -63,83 +64,6 @@ div[data-control="media-manager"] { max-height: 225px; } - .file-icon { - fill-rule: evenodd; - clip-rule: evenodd; - stroke-linejoin: round; - stroke-miterlimit: 2; - display: inline-block; - - &-extension { - font-family: 'ArialMT','Arial',sans-serif; - font-size: 4em; - font-weight: 900; - fill: var(--wn-filetype-label, #fff); - } - - &-label { - fill: var(--wn-text, #576D7E); /* Default color */ - fill-rule: nonzero; - } - - &-css, - &-less, - &-scss { - fill: var(--wn-filetype-scss, #B73FD9); - } - &-html, - &-xml { - fill: var(--wn-filetype-xml, #EA9B47); - } - &-js, - &-json { - fill: var(--wn-filetype-json, #A9A9A9); - } - &-pdf { - fill: var(--wn-filetype-pdf, #E30713); - } - &-txt { - fill: var(--wn-filetype-txt, #248BD0); - } - &-ai { - fill: var(--wn-filetype-ai, #F29200); - } - &-eps { - fill: var(--wn-filetype-eps, #F9B234); - } - &-psd { - fill: var(--wn-filetype-psd, #2DAAE2); - } - &-ttf, - &-otf, - &-woff, - &-woff2 { - fill: var(--wn-filetype-woff2, #C4CA10); - } - &-doc, - &-docx, - &-rtf, - &-odt { - fill: var(--wn-filetype-odt, #0F70B7); - } - &-csv, - &-ods, - &-xls, - &-xlsx { - fill: var(--wn-filetype-xlsx, #3BAA34); - } - &-odp, - &-ppt, - &-pptx { - fill: var(--wn-filetype-pptx, #D04526); - } - &-rar, - &-tar, - &-zip { - fill: var(--wn-filetype-zip, #363A56); - } - } - .media-player-fallback { font-size: 13px; color: var(--wn-text-secondary, #95a5a6); diff --git a/modules/backend/widgets/mediamanager/partials/_item-icon.php b/modules/backend/widgets/mediamanager/partials/_item-icon.php index 9b789b8158..2177d27077 100644 --- a/modules/backend/widgets/mediamanager/partials/_item-icon.php +++ b/modules/backend/widgets/mediamanager/partials/_item-icon.php @@ -1,20 +1,8 @@
- itemTypeToIconClass($item, $itemType); - $extension = substr(strtolower(pathinfo($item->path, PATHINFO_EXTENSION)), 0, 4) ?? '???'; - - if ($itemIconClass == 'icon-file'): ?> - - - - - - - - - - + itemTypeToIconClass($item, $itemType) ?> + + path, PATHINFO_EXTENSION)) ?> diff --git a/modules/system/assets/ui/less/tokens.less b/modules/system/assets/ui/less/tokens.less index 610787b5c2..29ffc0b3ed 100644 --- a/modules/system/assets/ui/less/tokens.less +++ b/modules/system/assets/ui/less/tokens.less @@ -118,20 +118,20 @@ --wn-fancylayout-bg-hover: #bc4436; // fancylayout.less &[data-control="delete-button"]:hover --wn-fancylayout-text: #000000; // fancylayout.less .tab-collapse-icon.primary --wn-filelist-misc: #95a5a6; // filelist.less &:after - --wn-filetype-ai: #f29200; // mediamanager.less &-ai - --wn-filetype-eps: #f9b234; // mediamanager.less &-eps - --wn-filetype-json: #a9a9a9; // mediamanager.less &-json - --wn-filetype-label: #ffffff; // mediamanager.less &-extension - --wn-filetype-odt: #0f70b7; // mediamanager.less &-odt - --wn-filetype-pdf: #e30713; // mediamanager.less &-pdf - --wn-filetype-pptx: #d04526; // mediamanager.less &-pptx - --wn-filetype-psd: #2daae2; // mediamanager.less &-psd - --wn-filetype-scss: #b73fd9; // mediamanager.less &-scss - --wn-filetype-txt: #248bd0; // mediamanager.less &-txt - --wn-filetype-woff2: #c4ca10; // mediamanager.less &-woff2 - --wn-filetype-xlsx: #3baa34; // mediamanager.less &-xlsx - --wn-filetype-xml: #ea9b47; // mediamanager.less &-xml - --wn-filetype-zip: #363a56; // mediamanager.less &-zip + --wn-filetype-ai: #f29200; // file-icon.less &-ai + --wn-filetype-eps: #f9b234; // file-icon.less &-eps + --wn-filetype-json: #a9a9a9; // file-icon.less &-json + --wn-filetype-label: #ffffff; // file-icon.less &-extension + --wn-filetype-odt: #0f70b7; // file-icon.less &-odt + --wn-filetype-pdf: #e30713; // file-icon.less &-pdf + --wn-filetype-pptx: #d04526; // file-icon.less &-pptx + --wn-filetype-psd: #2daae2; // file-icon.less &-psd + --wn-filetype-scss: #b73fd9; // file-icon.less &-scss + --wn-filetype-txt: #248bd0; // file-icon.less &-txt + --wn-filetype-woff2: #c4ca10; // file-icon.less &-woff2 + --wn-filetype-xlsx: #3baa34; // file-icon.less &-xlsx + --wn-filetype-xml: #ea9b47; // file-icon.less &-xml + --wn-filetype-zip: #363a56; // file-icon.less &-zip --wn-fileupload-base-bg: #5fb6f5; // fileupload.base.less .upload-progress --wn-fileupload-base-bg-2: #f9f9f9; // fileupload.base.less .uploader-block-button() --wn-fileupload-base-border: #bdc3c7; // fileupload.base.less .uploader-block-button()