From 563a4f63c9fb0ae83f60556bcd6e879a6786d4a6 Mon Sep 17 00:00:00 2001
From: mutantsan <kvaqich@gmail.com>
Date: Tue, 30 Jul 2024 17:01:16 +0300
Subject: [PATCH 1/3] add bs3 support, style fixes

---
 .../file_upload_widget/assets/css/styles.css  |  2 +-
 .../assets/js/file-upload-widget.js           | 11 ++--
 .../form_snippets/files_upload_widget.html    | 16 +++---
 ckanext/file_upload_widget/theme/styles.scss  | 53 +++++++++++++++----
 4 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/ckanext/file_upload_widget/assets/css/styles.css b/ckanext/file_upload_widget/assets/css/styles.css
index d1cf1be..ba21d0d 100644
--- a/ckanext/file_upload_widget/assets/css/styles.css
+++ b/ckanext/file_upload_widget/assets/css/styles.css
@@ -1 +1 @@
-.file-upload-widget .fuw-main-window{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%}.file-upload-widget .fuw-main-window .fuw-or{margin:1rem 0}.file-upload-widget .fuw-main-window .fuw-main-window__dropzone{padding:2rem;border-radius:.5rem;border:2px dashed #ccc;width:100%}.file-upload-widget .fuw-main-window .fuw-main-window__dropzone.active{border-color:#000}.file-upload-widget .fuw-main-window .fuw-main-window__alternative label.btn-file-input:after{display:none}.file-upload-widget .fuw-url-input{width:100%}.file-upload-widget .fuw-media-input{width:100%}.file-upload-widget .fuw-media-input .search-input{margin-bottom:1rem;position:relative}.file-upload-widget .fuw-media-input .search-input input{padding-left:2rem}.file-upload-widget .fuw-media-input .search-input .input-group-btn{position:absolute;left:10px;top:8px}.file-upload-widget .fuw-media-input .search-input .input-group-btn i{color:#6c757d}.file-upload-widget .fuw-media-input .fuw-media-input--files{display:flex;flex-direction:column;padding:0;border-radius:.5rem;height:250px;overflow-y:scroll}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item{display:flex;padding:7px 15px 7px 0;gap:1rem}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label{display:flex;align-items:center;gap:.5rem;width:100%}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label:after{display:none}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label .highlight{background-color:#ff0}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label object{width:30px;height:30px;object-fit:contain}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label i{font-size:2rem}.file-upload-widget .fuw-media-input .fuw-media-input--empty{align-items:center;color:#939393;display:flex;height:250px;flex:1;flex-flow:column wrap;justify-content:center}.file-upload-widget .fuw-selected-files{position:absolute}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list{width:100%;height:310px;overflow-y:scroll;padding-right:1rem}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper{display:flex;align-items:center;gap:.5rem;border-bottom:1px solid #eaeaea;padding:.5rem 0;position:relative}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-preview{height:50px;width:50px;font-size:2rem;position:relative;background:#f0f8ff;box-shadow:0 1px 2px rgba(119,119,119,.4588235294);border-radius:3px;display:flex;flex-direction:column;justify-content:center}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-preview .file-tile--file-icon{display:flex;align-items:center;justify-content:center}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-preview object{width:100%;max-height:50px;object-fit:contain}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-info .fuw-selected-files--file-name{-webkit-font-smoothing:antialiased;word-wrap:anywhere;font-size:1rem;font-weight:bold;line-height:1.3;word-break:break-all}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-info .fuw-selected-files--file-size{font-size:.8rem;color:#757575;font-weight:400;line-height:1}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-control{display:flex;align-items:center}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-control .file-tile--file-remove,.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-control .file-tile--file-upload{cursor:pointer;position:absolute;right:0;background:#000;color:#fff;border:1px solid #000;border-radius:50%;width:25px;height:25px;display:flex;align-items:center;justify-content:center}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .file-tile--file-upload{right:30px}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list .fuw-selected-files--progress{position:absolute;bottom:0;width:100%}.file-upload-widget .fuw-cancel-btn,.file-upload-widget .fuw-close-selected-btn{cursor:pointer}.file-upload-widget .hidden{display:none !important}.file-upload-widget .modal .modal-header{gap:.5rem}.file-upload-widget .modal .modal-body{min-height:145px;display:flex;align-items:center;justify-content:center;flex-direction:column}.file-upload-widget .modal .modal-inner-footer{padding:.75rem 0 0 0}.file-upload-widget.form-group .btn{position:static}.file-upload-widget .fuw-upload-btn .fuw-uploaded-files-counter{background:#fff;color:#000;border-radius:50%;padding:4px 7px;line-height:1;font-weight:bold;width:22px;height:22px;display:inline-block}
+.file-upload-widget .fuw-main-window{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%}.file-upload-widget .fuw-main-window .fuw-or{margin:1rem 0}.file-upload-widget .fuw-main-window .fuw-main-window__dropzone{padding:2rem;border-radius:.5rem;border:2px dashed #ccc;width:100%}.file-upload-widget .fuw-main-window .fuw-main-window__dropzone.active{border-color:#000}.file-upload-widget .fuw-main-window .fuw-main-window__alternative label.btn-file-input:after{display:none}.file-upload-widget .fuw-url-input{width:100%;display:flex;flex-direction:column;align-items:end;gap:1rem}.file-upload-widget .fuw-media-input{width:100%}.file-upload-widget .fuw-media-input .search-input{margin-bottom:1rem;position:relative}.file-upload-widget .fuw-media-input .search-input input{padding-left:2rem}.file-upload-widget .fuw-media-input .search-input .input-group-btn{position:absolute;left:10px;top:8px}.file-upload-widget .fuw-media-input .search-input .input-group-btn i{color:#6c757d}.file-upload-widget .fuw-media-input .fuw-media-input--files{display:flex;flex-direction:column;padding:0;border-radius:.5rem;height:250px;overflow-y:scroll}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item{display:flex;padding:7px 15px 7px 0;gap:1rem}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label{display:flex;align-items:center;gap:.5rem;width:100%;margin-bottom:0}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label:after{display:none}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label .highlight{background-color:#ff0}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label object{width:30px;height:30px;object-fit:contain}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label i{font-size:2rem}.file-upload-widget .fuw-media-input .fuw-media-input--empty{align-items:center;color:#939393;display:flex;height:250px;flex:1;flex-flow:column wrap;justify-content:center}.file-upload-widget .fuw-selected-files{position:absolute;top:0;width:100%}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list{width:100%;height:310px;overflow-y:scroll;padding-right:1rem}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper{display:flex;align-items:center;gap:.5rem;border-bottom:1px solid #eaeaea;padding:.5rem 0;position:relative;font-size:14px}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-preview{height:50px;width:50px;font-size:2rem;position:relative;background:#f0f8ff;box-shadow:0 1px 2px rgba(119,119,119,.4588235294);border-radius:3px;display:flex;flex-direction:column;justify-content:center}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-preview .file-tile--file-icon{display:flex;align-items:center;justify-content:center}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-preview object{width:100%;max-height:50px;object-fit:contain}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-info .fuw-selected-files--file-name{-webkit-font-smoothing:antialiased;word-wrap:anywhere;font-size:1em;font-weight:bold;line-height:1.3;word-break:break-all}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-info .fuw-selected-files--file-size{font-size:.8em;color:#757575;font-weight:400;line-height:1}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-control{display:flex;align-items:center;gap:1rem;margin-left:auto}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-control .file-tile--file-remove,.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-control .file-tile--file-upload{cursor:pointer;background:#000;color:#fff;border:1px solid #000;border-radius:50%;width:25px;height:25px;display:flex;align-items:center;justify-content:center}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list .fuw-selected-files--progress{position:absolute;bottom:0;width:100%}.file-upload-widget .fuw-cancel-btn,.file-upload-widget .fuw-close-selected-btn{cursor:pointer}.file-upload-widget .hidden{display:none !important}.file-upload-widget .modal .modal-header{gap:.5rem;display:flex;align-items:center}.file-upload-widget .modal .modal-header .btn-close{padding:.5rem .5rem;margin:-0.5rem -0.5rem -0.5rem auto;box-sizing:content-box;width:1em;height:1em;padding:.25em .25em;color:#000;background:rgba(0,0,0,0) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;border:0;border-radius:.25rem;opacity:.5}.file-upload-widget .modal .modal-body{min-height:145px;display:flex;align-items:center;justify-content:center;flex-direction:column}.file-upload-widget .modal .modal-inner-footer{padding:.75rem 0 0 0}.file-upload-widget.form-group .btn{position:static}.file-upload-widget .fuw-upload-btn .fuw-uploaded-files-counter{background:#fff;color:#000;border-radius:50%;padding:4px 7px;line-height:1;font-weight:bold;width:22px;height:22px;display:flex;align-items:center;justify-content:center}@media(min-width: 576px){.file-upload-widget .modal-dialog{max-width:500px;margin:1.75rem auto}.file-upload-widget .modal-dialog-centered{min-height:calc(100% - 3.5rem)}}
\ No newline at end of file
diff --git a/ckanext/file_upload_widget/assets/js/file-upload-widget.js b/ckanext/file_upload_widget/assets/js/file-upload-widget.js
index d0ea18a..616a9b5 100644
--- a/ckanext/file_upload_widget/assets/js/file-upload-widget.js
+++ b/ckanext/file_upload_widget/assets/js/file-upload-widget.js
@@ -96,8 +96,6 @@ ckan.module("file-upload-widget", function ($, _) {
                 this.options.maxFiles = 9999;
             }
 
-            console.log(this.options);
-
             window.fuwProgressBars = window.fuwProgressBars || {};
             window.fuwProgressBars[this.options.instanceId] = {};
 
@@ -440,9 +438,7 @@ ckan.module("file-upload-widget", function ($, _) {
             if (
                 this._isFileNumLimitReached(
                     e,
-                    selectedFiles.length -
-                        (this.options.maxFiles -
-                            this._calculateSelectedFilesNum()),
+                    selectedFiles.length - (this.options.maxFiles - this._calculateSelectedFilesNum()),
                     `You can't select more files than the limit: ${this.options.maxFiles}.`
                 )
             ) {
@@ -577,7 +573,6 @@ ckan.module("file-upload-widget", function ($, _) {
         },
 
         _handleFile: function (file) {
-            console.log(file.type);
             this._addFileItem(
                 file.id,
                 file.name,
@@ -1409,6 +1404,10 @@ ckan.module("file-upload-widget", function ($, _) {
             selectedNum = null,
             message = null
         ) {
+            if (selectedNum < 0) {
+                return false;
+            }
+
             if (
                 selectedNum ||
                 this._calculateSelectedFilesNum() >= this.options.maxFiles
diff --git a/ckanext/file_upload_widget/templates/scheming/form_snippets/files_upload_widget.html b/ckanext/file_upload_widget/templates/scheming/form_snippets/files_upload_widget.html
index 95a671a..c6f1784 100644
--- a/ckanext/file_upload_widget/templates/scheming/form_snippets/files_upload_widget.html
+++ b/ckanext/file_upload_widget/templates/scheming/form_snippets/files_upload_widget.html
@@ -1,5 +1,4 @@
 {% import 'macros/form.html' as form %}
-{% from "macros/form/attributes.html" import attributes %}
 
 {% asset "file_upload_widget/css" %}
 {% asset "file_upload_widget/js" %}
@@ -7,20 +6,25 @@
 
 {% set attrs = field.get('form_attrs', {}) %}
 
-<div class="form-group control-medium file-upload-widget" data-module="file-upload-widget" data-module-instance-id="{{ field.field_name }}" "{{ attributes(attrs) }}">
+<div class="form-group control-medium file-upload-widget" data-module="file-upload-widget" data-module-instance-id="{{ field.field_name }}" "{{ form.attributes(attrs) }}">
     <label class="form-label" for="{{ field.field_name }}">
         {% if field.required %}<span title="{{ _("This field is required") }}" class="control-required">*</span> {% endif %}
         {{ h.scheming_language_text(field.label) }}
     </label>
 
     <div class="controls">
-        <button type="button" class="btn btn-primary fuw-upload-btn" data-bs-toggle="modal" data-bs-target="#uploadWidget-{{ field.field_name }}">
+        <button
+            type="button"
+            class="btn btn-primary fuw-upload-btn"
+            data-bs-toggle="modal" data-bs-target="#uploadWidget-{{ field.field_name }}"
+            data-toggle="modal" data-target="#uploadWidget-{{ field.field_name }}"
+            >
             {{ _("Upload") }}
 
             <span class="fuw-uploaded-files-counter hidden">0</span>
         </button>
 
-        <input id="{{ 'field-' + field.field_name }}-file" type="file" name="{{ field.field_name }}-file" value="" placeholder="" style="display: none">
+        <input id="{{ 'field-' + field.field_name }}-file" type="file" placeholder="" style="display: none">
         <input id="{{ 'field-' + field.field_name }}" type="hidden" name="{{ field.field_name }}" value="{{ data[field.field_name] }}" placeholder="" style="display: none">
 
         {%- if field.help_text -%}
@@ -38,7 +42,7 @@
                 <div class="modal-header">
                     <i class="fa-solid fa-angles-left fuw-cancel-btn hidden"></i>
                     <button type="button" class="btn btn-default fuw-open-selected-btn hidden">{{ _("Selected files:") }} <span>0</span></button>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
                     <!-- MAIN WINDOW -->
@@ -105,7 +109,7 @@
             <div class="modal-content fuw-selected-files hidden">
                 <div class="modal-header">
                     <i class="fa-solid fa-angles-left fuw-close-selected-btn"></i>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close"></button>
                 </div>
 
                 <div class="modal-body">
diff --git a/ckanext/file_upload_widget/theme/styles.scss b/ckanext/file_upload_widget/theme/styles.scss
index 7b68e62..acff8dd 100644
--- a/ckanext/file_upload_widget/theme/styles.scss
+++ b/ckanext/file_upload_widget/theme/styles.scss
@@ -36,6 +36,10 @@
 
     .fuw-url-input {
         width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+        gap: 1rem;
     }
 
     .fuw-media-input {
@@ -78,6 +82,7 @@
                     align-items: center;
                     gap: 0.5rem;
                     width: 100%;
+                    margin-bottom: 0;
 
                     &:after {
                         display: none;
@@ -115,6 +120,8 @@
 
     .fuw-selected-files {
         position: absolute;
+        top: 0;
+        width: 100%;
 
         ul.fuw-selected-files--list {
             width: 100%;
@@ -129,6 +136,7 @@
                 border-bottom: 1px solid #eaeaea;
                 padding: 0.5rem 0;
                 position: relative;
+                font-size: 14px;
 
                 .fuw-selected-files--file-preview {
                     height: 50px;
@@ -159,14 +167,14 @@
                     .fuw-selected-files--file-name {
                         -webkit-font-smoothing: antialiased;
                         word-wrap: anywhere;
-                        font-size: 1rem;
+                        font-size: 1em;
                         font-weight: bold;
                         line-height: 1.3;
                         word-break: break-all;
                     }
 
                     .fuw-selected-files--file-size {
-                        font-size: 0.8rem;
+                        font-size: 0.8em;
                         color: #757575;
                         font-weight: 400;
                         line-height: 1;
@@ -176,12 +184,12 @@
                 .fuw-selected-files--file-control {
                     display: flex;
                     align-items: center;
+                    gap: 1rem;
+                    margin-left: auto;
 
                     .file-tile--file-remove,
                     .file-tile--file-upload {
                         cursor: pointer;
-                        position: absolute;
-                        right: 0;
                         background: black;
                         color: white;
                         border: 1px solid black;
@@ -193,11 +201,6 @@
                         justify-content: center;
                     }
                 }
-
-
-                .file-tile--file-upload {
-                    right: 30px;
-                }
             }
 
             .fuw-selected-files--progress {
@@ -220,6 +223,23 @@
     .modal {
         .modal-header {
             gap: 0.5rem;
+            display: flex;
+            align-items: center;
+
+            .btn-close {
+                padding: 0.5rem 0.5rem;
+                margin: -0.5rem -0.5rem -0.5rem auto;
+
+                box-sizing: content-box;
+                width: 1em;
+                height: 1em;
+                padding: 0.25em 0.25em;
+                color: #000;
+                background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat;
+                border: 0;
+                border-radius: 0.25rem;
+                opacity: 0.5;
+            }
         }
 
         .modal-body {
@@ -249,7 +269,20 @@
             font-weight: bold;
             width: 22px;
             height: 22px;
-            display: inline-block;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+
+    @media (min-width: 576px) {
+        .modal-dialog {
+          max-width: 500px;
+          margin: 1.75rem auto;
+        }
+
+        .modal-dialog-centered {
+          min-height: calc(100% - 3.5rem);
         }
     }
 }

From 80ddf944950c8860cf69b8531d57b18c3a6235fa Mon Sep 17 00:00:00 2001
From: mutantsan <kvaqich@gmail.com>
Date: Tue, 30 Jul 2024 17:03:48 +0300
Subject: [PATCH 2/3] update: change image preview style

---
 ckanext/file_upload_widget/assets/css/styles.css | 2 +-
 ckanext/file_upload_widget/theme/styles.scss     | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/ckanext/file_upload_widget/assets/css/styles.css b/ckanext/file_upload_widget/assets/css/styles.css
index ba21d0d..b215e9c 100644
--- a/ckanext/file_upload_widget/assets/css/styles.css
+++ b/ckanext/file_upload_widget/assets/css/styles.css
@@ -1 +1 @@
-.file-upload-widget .fuw-main-window{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%}.file-upload-widget .fuw-main-window .fuw-or{margin:1rem 0}.file-upload-widget .fuw-main-window .fuw-main-window__dropzone{padding:2rem;border-radius:.5rem;border:2px dashed #ccc;width:100%}.file-upload-widget .fuw-main-window .fuw-main-window__dropzone.active{border-color:#000}.file-upload-widget .fuw-main-window .fuw-main-window__alternative label.btn-file-input:after{display:none}.file-upload-widget .fuw-url-input{width:100%;display:flex;flex-direction:column;align-items:end;gap:1rem}.file-upload-widget .fuw-media-input{width:100%}.file-upload-widget .fuw-media-input .search-input{margin-bottom:1rem;position:relative}.file-upload-widget .fuw-media-input .search-input input{padding-left:2rem}.file-upload-widget .fuw-media-input .search-input .input-group-btn{position:absolute;left:10px;top:8px}.file-upload-widget .fuw-media-input .search-input .input-group-btn i{color:#6c757d}.file-upload-widget .fuw-media-input .fuw-media-input--files{display:flex;flex-direction:column;padding:0;border-radius:.5rem;height:250px;overflow-y:scroll}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item{display:flex;padding:7px 15px 7px 0;gap:1rem}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label{display:flex;align-items:center;gap:.5rem;width:100%;margin-bottom:0}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label:after{display:none}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label .highlight{background-color:#ff0}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label object{width:30px;height:30px;object-fit:contain}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label i{font-size:2rem}.file-upload-widget .fuw-media-input .fuw-media-input--empty{align-items:center;color:#939393;display:flex;height:250px;flex:1;flex-flow:column wrap;justify-content:center}.file-upload-widget .fuw-selected-files{position:absolute;top:0;width:100%}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list{width:100%;height:310px;overflow-y:scroll;padding-right:1rem}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper{display:flex;align-items:center;gap:.5rem;border-bottom:1px solid #eaeaea;padding:.5rem 0;position:relative;font-size:14px}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-preview{height:50px;width:50px;font-size:2rem;position:relative;background:#f0f8ff;box-shadow:0 1px 2px rgba(119,119,119,.4588235294);border-radius:3px;display:flex;flex-direction:column;justify-content:center}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-preview .file-tile--file-icon{display:flex;align-items:center;justify-content:center}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-preview object{width:100%;max-height:50px;object-fit:contain}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-info .fuw-selected-files--file-name{-webkit-font-smoothing:antialiased;word-wrap:anywhere;font-size:1em;font-weight:bold;line-height:1.3;word-break:break-all}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-info .fuw-selected-files--file-size{font-size:.8em;color:#757575;font-weight:400;line-height:1}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-control{display:flex;align-items:center;gap:1rem;margin-left:auto}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-control .file-tile--file-remove,.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-control .file-tile--file-upload{cursor:pointer;background:#000;color:#fff;border:1px solid #000;border-radius:50%;width:25px;height:25px;display:flex;align-items:center;justify-content:center}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list .fuw-selected-files--progress{position:absolute;bottom:0;width:100%}.file-upload-widget .fuw-cancel-btn,.file-upload-widget .fuw-close-selected-btn{cursor:pointer}.file-upload-widget .hidden{display:none !important}.file-upload-widget .modal .modal-header{gap:.5rem;display:flex;align-items:center}.file-upload-widget .modal .modal-header .btn-close{padding:.5rem .5rem;margin:-0.5rem -0.5rem -0.5rem auto;box-sizing:content-box;width:1em;height:1em;padding:.25em .25em;color:#000;background:rgba(0,0,0,0) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;border:0;border-radius:.25rem;opacity:.5}.file-upload-widget .modal .modal-body{min-height:145px;display:flex;align-items:center;justify-content:center;flex-direction:column}.file-upload-widget .modal .modal-inner-footer{padding:.75rem 0 0 0}.file-upload-widget.form-group .btn{position:static}.file-upload-widget .fuw-upload-btn .fuw-uploaded-files-counter{background:#fff;color:#000;border-radius:50%;padding:4px 7px;line-height:1;font-weight:bold;width:22px;height:22px;display:flex;align-items:center;justify-content:center}@media(min-width: 576px){.file-upload-widget .modal-dialog{max-width:500px;margin:1.75rem auto}.file-upload-widget .modal-dialog-centered{min-height:calc(100% - 3.5rem)}}
\ No newline at end of file
+.file-upload-widget .fuw-main-window{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%}.file-upload-widget .fuw-main-window .fuw-or{margin:1rem 0}.file-upload-widget .fuw-main-window .fuw-main-window__dropzone{padding:2rem;border-radius:.5rem;border:2px dashed #ccc;width:100%}.file-upload-widget .fuw-main-window .fuw-main-window__dropzone.active{border-color:#000}.file-upload-widget .fuw-main-window .fuw-main-window__alternative label.btn-file-input:after{display:none}.file-upload-widget .fuw-url-input{width:100%;display:flex;flex-direction:column;align-items:end;gap:1rem}.file-upload-widget .fuw-media-input{width:100%}.file-upload-widget .fuw-media-input .search-input{margin-bottom:1rem;position:relative}.file-upload-widget .fuw-media-input .search-input input{padding-left:2rem}.file-upload-widget .fuw-media-input .search-input .input-group-btn{position:absolute;left:10px;top:8px}.file-upload-widget .fuw-media-input .search-input .input-group-btn i{color:#6c757d}.file-upload-widget .fuw-media-input .fuw-media-input--files{display:flex;flex-direction:column;padding:0;border-radius:.5rem;height:250px;overflow-y:scroll}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item{display:flex;padding:7px 15px 7px 0;gap:1rem}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label{display:flex;align-items:center;gap:.5rem;width:100%;margin-bottom:0}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label:after{display:none}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label .highlight{background-color:#ff0}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label object{width:30px;height:30px;object-fit:contain;background:#e8d8d8;opacity:.5;border-radius:5px}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label i{font-size:2rem}.file-upload-widget .fuw-media-input .fuw-media-input--empty{align-items:center;color:#939393;display:flex;height:250px;flex:1;flex-flow:column wrap;justify-content:center}.file-upload-widget .fuw-selected-files{position:absolute;top:0;width:100%}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list{width:100%;height:310px;overflow-y:scroll;padding-right:1rem}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper{display:flex;align-items:center;gap:.5rem;border-bottom:1px solid #eaeaea;padding:.5rem 0;position:relative;font-size:14px}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-preview{height:50px;width:50px;font-size:2rem;position:relative;background:#f0f8ff;box-shadow:0 1px 2px rgba(119,119,119,.4588235294);border-radius:3px;display:flex;flex-direction:column;justify-content:center}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-preview .file-tile--file-icon{display:flex;align-items:center;justify-content:center}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-preview object{width:100%;max-height:50px;object-fit:contain}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-info .fuw-selected-files--file-name{-webkit-font-smoothing:antialiased;word-wrap:anywhere;font-size:1em;font-weight:bold;line-height:1.3;word-break:break-all}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-info .fuw-selected-files--file-size{font-size:.8em;color:#757575;font-weight:400;line-height:1}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-control{display:flex;align-items:center;gap:1rem;margin-left:auto}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-control .file-tile--file-remove,.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-control .file-tile--file-upload{cursor:pointer;background:#000;color:#fff;border:1px solid #000;border-radius:50%;width:25px;height:25px;display:flex;align-items:center;justify-content:center}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list .fuw-selected-files--progress{position:absolute;bottom:0;width:100%}.file-upload-widget .fuw-cancel-btn,.file-upload-widget .fuw-close-selected-btn{cursor:pointer}.file-upload-widget .hidden{display:none !important}.file-upload-widget .modal .modal-header{gap:.5rem;display:flex;align-items:center}.file-upload-widget .modal .modal-header .btn-close{padding:.5rem .5rem;margin:-0.5rem -0.5rem -0.5rem auto;box-sizing:content-box;width:1em;height:1em;padding:.25em .25em;color:#000;background:rgba(0,0,0,0) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;border:0;border-radius:.25rem;opacity:.5}.file-upload-widget .modal .modal-body{min-height:145px;display:flex;align-items:center;justify-content:center;flex-direction:column}.file-upload-widget .modal .modal-inner-footer{padding:.75rem 0 0 0}.file-upload-widget.form-group .btn{position:static}.file-upload-widget .fuw-upload-btn .fuw-uploaded-files-counter{background:#fff;color:#000;border-radius:50%;padding:4px 7px;line-height:1;font-weight:bold;width:22px;height:22px;display:flex;align-items:center;justify-content:center}@media(min-width: 576px){.file-upload-widget .modal-dialog{max-width:500px;margin:1.75rem auto}.file-upload-widget .modal-dialog-centered{min-height:calc(100% - 3.5rem)}}
\ No newline at end of file
diff --git a/ckanext/file_upload_widget/theme/styles.scss b/ckanext/file_upload_widget/theme/styles.scss
index acff8dd..ed5fcc1 100644
--- a/ckanext/file_upload_widget/theme/styles.scss
+++ b/ckanext/file_upload_widget/theme/styles.scss
@@ -97,6 +97,9 @@
                         width: 30px;
                         height: 30px;
                         object-fit: contain;
+                        background: #e8d8d8;
+                        opacity: .5;
+                        border-radius: 5px;
                     }
 
                     // file icon

From 0718aa7f6c4e9d19cb1754e4728d69fcdd55c2ef Mon Sep 17 00:00:00 2001
From: mutantsan <kvaqich@gmail.com>
Date: Tue, 30 Jul 2024 17:07:24 +0300
Subject: [PATCH 3/3] update: change close button style

---
 ckanext/file_upload_widget/assets/css/styles.css | 2 +-
 ckanext/file_upload_widget/theme/styles.scss     | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/ckanext/file_upload_widget/assets/css/styles.css b/ckanext/file_upload_widget/assets/css/styles.css
index b215e9c..0c26fc1 100644
--- a/ckanext/file_upload_widget/assets/css/styles.css
+++ b/ckanext/file_upload_widget/assets/css/styles.css
@@ -1 +1 @@
-.file-upload-widget .fuw-main-window{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%}.file-upload-widget .fuw-main-window .fuw-or{margin:1rem 0}.file-upload-widget .fuw-main-window .fuw-main-window__dropzone{padding:2rem;border-radius:.5rem;border:2px dashed #ccc;width:100%}.file-upload-widget .fuw-main-window .fuw-main-window__dropzone.active{border-color:#000}.file-upload-widget .fuw-main-window .fuw-main-window__alternative label.btn-file-input:after{display:none}.file-upload-widget .fuw-url-input{width:100%;display:flex;flex-direction:column;align-items:end;gap:1rem}.file-upload-widget .fuw-media-input{width:100%}.file-upload-widget .fuw-media-input .search-input{margin-bottom:1rem;position:relative}.file-upload-widget .fuw-media-input .search-input input{padding-left:2rem}.file-upload-widget .fuw-media-input .search-input .input-group-btn{position:absolute;left:10px;top:8px}.file-upload-widget .fuw-media-input .search-input .input-group-btn i{color:#6c757d}.file-upload-widget .fuw-media-input .fuw-media-input--files{display:flex;flex-direction:column;padding:0;border-radius:.5rem;height:250px;overflow-y:scroll}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item{display:flex;padding:7px 15px 7px 0;gap:1rem}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label{display:flex;align-items:center;gap:.5rem;width:100%;margin-bottom:0}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label:after{display:none}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label .highlight{background-color:#ff0}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label object{width:30px;height:30px;object-fit:contain;background:#e8d8d8;opacity:.5;border-radius:5px}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label i{font-size:2rem}.file-upload-widget .fuw-media-input .fuw-media-input--empty{align-items:center;color:#939393;display:flex;height:250px;flex:1;flex-flow:column wrap;justify-content:center}.file-upload-widget .fuw-selected-files{position:absolute;top:0;width:100%}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list{width:100%;height:310px;overflow-y:scroll;padding-right:1rem}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper{display:flex;align-items:center;gap:.5rem;border-bottom:1px solid #eaeaea;padding:.5rem 0;position:relative;font-size:14px}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-preview{height:50px;width:50px;font-size:2rem;position:relative;background:#f0f8ff;box-shadow:0 1px 2px rgba(119,119,119,.4588235294);border-radius:3px;display:flex;flex-direction:column;justify-content:center}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-preview .file-tile--file-icon{display:flex;align-items:center;justify-content:center}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-preview object{width:100%;max-height:50px;object-fit:contain}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-info .fuw-selected-files--file-name{-webkit-font-smoothing:antialiased;word-wrap:anywhere;font-size:1em;font-weight:bold;line-height:1.3;word-break:break-all}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-info .fuw-selected-files--file-size{font-size:.8em;color:#757575;font-weight:400;line-height:1}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-control{display:flex;align-items:center;gap:1rem;margin-left:auto}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-control .file-tile--file-remove,.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-control .file-tile--file-upload{cursor:pointer;background:#000;color:#fff;border:1px solid #000;border-radius:50%;width:25px;height:25px;display:flex;align-items:center;justify-content:center}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list .fuw-selected-files--progress{position:absolute;bottom:0;width:100%}.file-upload-widget .fuw-cancel-btn,.file-upload-widget .fuw-close-selected-btn{cursor:pointer}.file-upload-widget .hidden{display:none !important}.file-upload-widget .modal .modal-header{gap:.5rem;display:flex;align-items:center}.file-upload-widget .modal .modal-header .btn-close{padding:.5rem .5rem;margin:-0.5rem -0.5rem -0.5rem auto;box-sizing:content-box;width:1em;height:1em;padding:.25em .25em;color:#000;background:rgba(0,0,0,0) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;border:0;border-radius:.25rem;opacity:.5}.file-upload-widget .modal .modal-body{min-height:145px;display:flex;align-items:center;justify-content:center;flex-direction:column}.file-upload-widget .modal .modal-inner-footer{padding:.75rem 0 0 0}.file-upload-widget.form-group .btn{position:static}.file-upload-widget .fuw-upload-btn .fuw-uploaded-files-counter{background:#fff;color:#000;border-radius:50%;padding:4px 7px;line-height:1;font-weight:bold;width:22px;height:22px;display:flex;align-items:center;justify-content:center}@media(min-width: 576px){.file-upload-widget .modal-dialog{max-width:500px;margin:1.75rem auto}.file-upload-widget .modal-dialog-centered{min-height:calc(100% - 3.5rem)}}
\ No newline at end of file
+.file-upload-widget .fuw-main-window{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%}.file-upload-widget .fuw-main-window .fuw-or{margin:1rem 0}.file-upload-widget .fuw-main-window .fuw-main-window__dropzone{padding:2rem;border-radius:.5rem;border:2px dashed #ccc;width:100%}.file-upload-widget .fuw-main-window .fuw-main-window__dropzone.active{border-color:#000}.file-upload-widget .fuw-main-window .fuw-main-window__alternative label.btn-file-input:after{display:none}.file-upload-widget .fuw-url-input{width:100%;display:flex;flex-direction:column;align-items:end;gap:1rem}.file-upload-widget .fuw-media-input{width:100%}.file-upload-widget .fuw-media-input .search-input{margin-bottom:1rem;position:relative}.file-upload-widget .fuw-media-input .search-input input{padding-left:2rem}.file-upload-widget .fuw-media-input .search-input .input-group-btn{position:absolute;left:10px;top:8px}.file-upload-widget .fuw-media-input .search-input .input-group-btn i{color:#6c757d}.file-upload-widget .fuw-media-input .fuw-media-input--files{display:flex;flex-direction:column;padding:0;border-radius:.5rem;height:250px;overflow-y:scroll}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item{display:flex;padding:7px 15px 7px 0;gap:1rem}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label{display:flex;align-items:center;gap:.5rem;width:100%;margin-bottom:0}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label:after{display:none}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label .highlight{background-color:#ff0}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label object{width:30px;height:30px;object-fit:contain;background:#e8d8d8;opacity:.5;border-radius:5px}.file-upload-widget .fuw-media-input .fuw-media-input--files .files--file-item label i{font-size:2rem}.file-upload-widget .fuw-media-input .fuw-media-input--empty{align-items:center;color:#939393;display:flex;height:250px;flex:1;flex-flow:column wrap;justify-content:center}.file-upload-widget .fuw-selected-files{position:absolute;top:0;width:100%}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list{width:100%;height:310px;overflow-y:scroll;padding-right:1rem}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper{display:flex;align-items:center;gap:.5rem;border-bottom:1px solid #eaeaea;padding:.5rem 0;position:relative;font-size:14px}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-preview{height:50px;width:50px;font-size:2rem;position:relative;background:#f0f8ff;box-shadow:0 1px 2px rgba(119,119,119,.4588235294);border-radius:3px;display:flex;flex-direction:column;justify-content:center}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-preview .file-tile--file-icon{display:flex;align-items:center;justify-content:center}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-preview object{width:100%;max-height:50px;object-fit:contain}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-info .fuw-selected-files--file-name{-webkit-font-smoothing:antialiased;word-wrap:anywhere;font-size:1em;font-weight:bold;line-height:1.3;word-break:break-all}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-info .fuw-selected-files--file-size{font-size:.8em;color:#757575;font-weight:400;line-height:1}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-control{display:flex;align-items:center;gap:1rem;margin-left:auto}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-control .file-tile--file-remove,.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list li.fuw-selected-files--file-item-wrapper .fuw-selected-files--file-control .file-tile--file-upload{cursor:pointer;background:#000;color:#fff;border:1px solid #000;border-radius:50%;width:25px;height:25px;display:flex;align-items:center;justify-content:center}.file-upload-widget .fuw-selected-files ul.fuw-selected-files--list .fuw-selected-files--progress{position:absolute;bottom:0;width:100%}.file-upload-widget .fuw-cancel-btn,.file-upload-widget .fuw-close-selected-btn{cursor:pointer}.file-upload-widget .hidden{display:none !important}.file-upload-widget .modal .modal-header{gap:.5rem;display:flex;align-items:center}.file-upload-widget .modal .modal-header .btn-close{padding:0;margin:0;margin-left:auto;box-sizing:content-box;width:1em;height:1em;padding:.25em .25em;color:#000;background:rgba(0,0,0,0) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;border:0;border-radius:.25rem;opacity:.5}.file-upload-widget .modal .modal-body{min-height:145px;display:flex;align-items:center;justify-content:center;flex-direction:column}.file-upload-widget .modal .modal-inner-footer{padding:.75rem 0 0 0}.file-upload-widget.form-group .btn{position:static}.file-upload-widget .fuw-upload-btn .fuw-uploaded-files-counter{background:#fff;color:#000;border-radius:50%;padding:4px 7px;line-height:1;font-weight:bold;width:22px;height:22px;display:flex;align-items:center;justify-content:center}@media(min-width: 576px){.file-upload-widget .modal-dialog{max-width:500px;margin:1.75rem auto}.file-upload-widget .modal-dialog-centered{min-height:calc(100% - 3.5rem)}}
\ No newline at end of file
diff --git a/ckanext/file_upload_widget/theme/styles.scss b/ckanext/file_upload_widget/theme/styles.scss
index ed5fcc1..9186047 100644
--- a/ckanext/file_upload_widget/theme/styles.scss
+++ b/ckanext/file_upload_widget/theme/styles.scss
@@ -230,8 +230,9 @@
             align-items: center;
 
             .btn-close {
-                padding: 0.5rem 0.5rem;
-                margin: -0.5rem -0.5rem -0.5rem auto;
+                padding: 0;
+                margin: 0;
+                margin-left: auto;
 
                 box-sizing: content-box;
                 width: 1em;