@charset "UTF-8";
/**
 * ファイルアップロード css
 * @version 23.05.26
 * @version 24.07.10 ドロップゾーンにアイコンを追加
 */

/*
・data-max-size="100MB" 1ファイルの最大サイズ
・data-accept="jpg,jpeg,png,gif,bmp" 有効ファイル拡張子(カンマ区切り)
・data-max-filecnt="10" ファイル数上限
・data-uploaded-filecnt="5" アップロード済みのファイル数(ファイル数上限計算に使用)

[HTML例]
#外枠
<div class="fileupload-box box-disabled" data-accept="csv" data-max-size="100MB"> box-disabledを指定すると非活性状態
  #file実態
  <input type="file" name="hogeFile" accept=".csv" /> 例:CSVの場合
  <input type="file" name="hogeImg" accept="image/*" /> 例:画像の場合

  #エクスプローラーを開く＋もともとの画像
  <div class="open-finder icn i-camera"></div> icn i-cameraを指定するとカメラアイコン付き
  <div class="open-finder dropzone" data-dropzone-msg="ファイルアップロード"></div> dropzoneを指定するとドラッグアンドドロップ可能
  <img class="before-file open-finder" src="もともとの画像" /> imgタグ版
  <a class="before-file open-finder" style="background-image: url(<c:out value="${hogeImageUrl}" />);"></a> background-image版

  ・preview-file-view 必須
  ・data-type 必須[default, img, video, pdf, txt, audio]から選択
    img=画像ファイル専用表示, video=動画ファイル専用表示..., default=その他のファイル及び画像や動画を区別しない場合もこちらを指定
  ・※要素内の#FILE_NAME#が置換される
  #ファイル選択後のプレビューのベースHTML
  <div class="preview-file-base" data-type="default">#FILE_NAME#</div>
  <div class="preview-file-base" data-type="default"><img /></div>
  <div class="preview-file-base" data-type="img"><div style="background-image: none;"></div></div><!-- 「画像ファイル」がアップされたときこちらを優先 -->
  <div class="preview-file-base" data-type="video"><video controls></video></div><!-- 「動画ファイル」がアップされたときこちらを優先 -->
  <div class="preview-file-base" data-type="audio"><audio controls></audio></div><!-- 「音楽ファイル」がアップされたときこちらを優先 -->
  <div class="preview-file-base" data-type="pdf"><iframe></iframe></div><!-- 「pdfファイル」がアップされたときこちらを優先 -->
  <div class="preview-file-base" data-type="txt"><div>#FILE_NAME#</div><textarea disabled></textarea></div><!-- 「テキストファイル」がアップされたときこちらを優先 -->
  #ファイル選択後のプレビュー配置箇所
  <div class="preview-file-view"></div>

  #ファイルを削除する＋削除フラグ実態
  <div class="delfile-btn" data-no-image="no-image画像">
    <input type="hidden" name="delHogeFileFlg" value="0" />
  </div>
</div>
 */


.fileupload-box { position: relative; }
.fileupload-box:not(.box-disabled) .dropzone { min-height: 200px; background-color: #f1f1f1; }
.fileupload-box:not(.box-disabled) .dropzone:hover { opacity: 0.8; cursor: var(--cur-dwl); }
.fileupload-box:not(.box-disabled) .dropzone.dragover { background-color: #bcdeff; }
.fileupload-box:not(.box-disabled) .dropzone[data-dropzone-msg] { position: relative; }
.fileupload-box:not(.box-disabled) .dropzone[data-dropzone-msg]::before { content: attr(data-dropzone-msg); position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: var(--placeholder-color); z-index: 1; }
.fileupload-box:not(.box-disabled) .dropzone[data-dropzone-msg]::after { content: '\f56d'; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: transparent; -webkit-text-stroke: 1px rgb(177 177 177 / 40%); position: absolute; font-size: 72px; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.fileupload-box.box-disabled { background-color: #ddd; }
.fileupload-box.box-disabled .open-finder,
.fileupload-box.box-disabled .dropzone,
.fileupload-box.box-disabled .delfile-btn { cursor: var(--cur-ban); }

.fileupload-box input[type="file"] { display: none !important; height: 0 !important; line-height: 0 !important; padding: 0 !important; border: 0 !important; margin: 0 !important; position: absolute; }
.fileupload-box .bgimg { background-repeat: no-repeat; background-position: center; background-size: cover; }
.fileupload-box img, .fileupload-box .delfile-btn { cursor: pointer; }

/* 削除ボタン */
.fileupload-box .delfile-btn { position: absolute; top: 4px; right: 4px; opacity: 0.5; }
.fileupload-box:not(.box-disabled) .delfile-btn:hover { opacity: 1.0; }
.fileupload-box .delfile-btn::before { content: '\f2ed'; font-family: "Font Awesome 5 Free"; border: 1px solid #999; padding: 4px; border-radius: 4px; background-color: #e5e5e5; }
.fileupload-box .delfile-btn.times::before { content: '\f00d'; font-weight: 900; border-radius: 50%; width: 16px; height: 16px; display: block; text-align: center; }

.fileupload-box .preview-file-base { display: none; }
.open-finder { cursor: pointer; }
.open-finder.icn { position: relative; }
.open-finder.icn::after { position: absolute; bottom: 4px; right: 4px; font-family: "Font Awesome 5 Free"; font-weight: 900; width: 20px; height: 20px; border-radius: 50%; background-color: #fff; padding: 4px 4px 3px; text-align: center; z-index: 1; }
.open-finder.icn.i-camera::after { content: '\f030'; }

.fileputting { -webkit-animation: fileputting 1.2s; animation: fileputting 1.2s; }
@-webkit-keyframes fileputting {
   0% { background-color: #bcdeff; }
  33% { background-color: unset; }
  66% { background-color: #bcdeff; }
 100% { background-color: unset; }
}
@keyframes fileputting {
   0% { background-color: #bcdeff; }
  33% { background-color: unset; }
  66% { background-color: #bcdeff; }
 100% { background-color: unset; }
}