<div class="files">
<h1>Gestionnaire de fichiers</h1>
</br>
<div class="homepanel">
<div class="row w-100">
<div class="hbox col-lg">
<div class="fi_act">
<h1><i class="fa fa-folder"></i> Fichiers</h1>
<div>
<button id="fi_new_folder" class="fi_act_btn"><i class="fa fa-folder"></i> Nouveau dossier</button>
<input id='fi_upload_file' type='file' hidden multiple />
<button id="fi_upload" class="fi_act_btn"><i class="fa fa-upload"></i> Upload</button>
</div>
</div>
<div class="fi_current_directory">
<input id="fi_current_directory" class="fi_current_p" value="/" type="text">
</div>
<p id="fi_info" style="text-align: start; color: rgb(255, 48, 48);"></p>
<div id="fileExplorer" class="fi_container">
<p style="text-align: start; color: rgb(255, 48, 48);">Le répertoire n'existe pas ou est vide.</p>
</div>
</div>
</div>
</div>
</div>
<div id="fi_dialog_input">
</div>
<dialog class="fi_addfolder" id="fi_new_folder_dialog">
<h1><i class="fa fa-folder"></i> Créer un dossier</h1>
<p>Nom du dossier :</p>
<input class="inp" id="fi_add_name" type="text">
<div style="color: rgb(255, 76, 76);" id="fi_folder_info"></div>
</div>
<button id="fi_add_close" class="fi_add_close">Annuler</button>
<button id="fi_add_confirm" class="fi_add_confirm">Ajouter</button>
</dialog>
<script>
if(typeof currentDir == "undefined") {
const currentDir = document.getElementById("fi_current_directory")
const fileExplorer = document.getElementById("fileExplorer")
const fileExplorerError = '<div id="last_directory" class="fi_file"><p style="margin-left: 1vw;text-align:start;margin-bottom: 1vw !important;"><i class="fa fa-arrow-left"></i> Revenir au dossier parent</p></div>' + fileExplorer.outerHTML
const fiInfo = document.getElementById("fi_info")
getDirectory(currentDir.value)
const newFolderBtn = document.getElementById("fi_new_folder")
const newFolderDialog = document.getElementById("fi_new_folder_dialog")
const newFolderConfirm = document.getElementById("fi_add_confirm")
const newFolderName = document.getElementById("fi_add_name")
const newFolderInfo = document.getElementById("fi_folder_info")
const dialogInput = document.getElementById("fi_dialog_input")
const newFolderClose = document.getElementById("fi_add_close")
newFolderClose.addEventListener("click", () => {
newFolderDialog.close()
getDirectory(currentDir.value)
})
newFolderBtn.addEventListener("click", () => {
newFolderDialog.showModal()
newFolderName.value = ""
newFolderInfo.value = ""
})
newFolderConfirm.addEventListener("click", () => {
const folderDir = currentDir + newFolderName.value
newFolderInfo.value = ""
var wrongName = true
var justspace = false
const refusedChar = ['\\','/' ,':' ,'*','?' ,'"','<','>','|']
for(var char of refusedChar) {
if(newFolderName.value.includes(char)) {
wrongName = false
}
}
for (var i = 0; i < newFolderName.value.length; i++) {
var char = newFolderName.value.charAt(i)
if(char != " ") {
justspace = true
}
}
if(wrongName == false) {
newFolderInfo.innerHTML = "<p>Le nom du dossier est invalide car il contient des caractères interdits !</p>"
} else if(justspace == false) {
newFolderInfo.innerHTML = "<p>Le nom du dossier ne peut être vide !</p>"
} else {
fetch('/filemanager', {
method: 'POST',
redirect: 'follow',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({"request":"addfolder", "value": newFolderName.value, "currentDir" : currentDir.value})
})
.then(response => response.json())
.then(response => res(response))
function res(response) {
if(response.result == "failed") {
content.innerHTML = ' <h1 style="color:red;"><i style="color:yellow; font-size: 2vw;" class="fa fa-warning"></i> Erreur de chargement des données - Erreur : ' + response.content + '</h1>'
console.log("FAILED")
} else if(response.result == "success") {
if(response.content == "ERROR_ALREADY_EXIST") {
newFolderInfo.innerHTML = "<p>Le nom du dossier est déjà existant !</p>"
} else if(response.content == "ERROR_NOT_MAKEABLE") {
newFolderInfo.innerHTML = "<p>Vous n'avez pas la permission !</p>"
} else {
newFolderDialog.close()
getDirectory(currentDir.value)
}
}
}
}
})
const uploadBtn = document.getElementById("fi_upload")
const uploadFiles = document.getElementById("fi_upload_file")
uploadBtn.addEventListener("click", () => {
uploadFiles.click()
})
uploadFiles.addEventListener("change", () => {
var stopSend = false
fiInfo.innerHTML = ""
for(var file of uploadFiles.files) {
if(stopSend == false) {
const file_acc = new FormData();
file_acc.append("apic", file)
fetch('/upload', {
method: 'POST',
mode:"cors",
cache:"no-cache",
credentials:"same-origin",
headers: {
"uploadfiledirectory": currentDir.value
},
referrerPolicy:"no-referrer",
redirect: 'follow',
body: file_acc
}).then(response => response.json())
.then(response => resupload(response))
function resupload(response) {
if(response.result == "ERROR") {
fiInfo.innerHTML = "Les fichiers n'ont pas pu être uploadés !"
stopSend = true
} else {
getDirectory(currentDir.value)
fiInfo.innerHTML = "<span style='color: rgb(130, 255, 163);'>Le fichier <strong>" + file.name + "</strong> a été upload !</span>"
}
}
}
}
uploadFiles.value = null
})
currentDir.addEventListener("change", () => {
getDirectory(currentDir.value)
})
function getDirectory(directory) {
fiInfo.innerHTML = ""
var fileExplorerList = new Array()
var dialogExlorerList = new Array()
fetch('/filemanager', {
method: 'POST',
redirect: 'follow',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({"request":"get", "value": directory})
})
.then(response => response.json())
.then(response => showLink(response))
function showLink(response) {
const files = response.content
console.log(files)
if(response.result == "failed") {
fileExplorerList.push('<div id="last_directory" class="fi_file"><p style="margin-left: 1vw;text-align:start;margin-bottom: 1vw !important;"><i class="fa fa-arrow-left"></i> Revenir au dossier parent</p></div>')
content.innerHTML = ' <h1 style="color:red;"><i style="color:yellow; font-size: 2vw;" class="fa fa-warning"></i> Erreur de chargement des données - Erreur : ' + response.content + '</h1>'
console.log("FAILED")
} else if(response.result == "success") {
if(response.content == "ERROR_NOT_EXIST") {
fileExplorer.innerHTML = fileExplorerError
const last_dir = document.getElementById("last_directory")
last_dir.addEventListener("click", () => {
var cdSplit = currentDir.value.split("/")
if(cdSplit.slice(-1) == "") {
cdSplit.pop()
cdSplit.pop()
} else {
cdSplit.pop()
}
currentDir.value = cdSplit.join("/")
if(currentDir.value == "") {
currentDir.value = "/"
}
getDirectory(currentDir.value)
})
console.log("DENY")
} else if(response.content == "ERROR_NOT_PERMITTED") {
fileExplorer.innerHTML = '<div id="last_directory" class="fi_file"><p style="margin-left: 1vw;text-align:start;margin-bottom: 1vw !important;"><i class="fa fa-arrow-left"></i> Revenir au dossier parent</p></div>' +'<p style="text-align: start; padding: 1vw; color: rgb(255, 48, 48);">Vous n\'avez pas la permission de regarder ce dossier.</p>'
const last_dir = document.getElementById("last_directory")
last_dir.addEventListener("click", () => {
var cdSplit = currentDir.value.split("/")
if(cdSplit.slice(-1) == "") {
cdSplit.pop()
cdSplit.pop()
} else {
cdSplit.pop()
}
currentDir.value = cdSplit.join("/")
if(currentDir.value == "") {
currentDir.value = "/"
}
getDirectory(currentDir.value)
})
console.log("DENY")
} else {
fileExplorerList.push('<div id="last_directory" class="fi_file"><p style="margin-left: 1vw;text-align:start;margin-bottom: 1vw !important;"><i class="fa fa-arrow-left"></i> Revenir au dossier parent</p></div>')
for(var file of files) {
const date = new Date(file.lastedition)
var gmonth = date.getMonth()
var gday = date.getDate()
var gHour = date.getHours()
var gMinute = date.getMinutes()
var gSecondes = date.getSeconds()
if(date.getMonth() + 1 <= 9) {
gmonth = "0" + (date.getMonth() + 1)
}
if(date.getDate() + 1 <= 9) {
gday = "0" + date.getDate()
}
if(date.getHours() + 1 <= 9) {
gHour = "0" + date.getHours()
}
if(date.getMinutes() + 1 <= 9) {
gMinute = "0" + date.getMinutes()
}
if(date.getSeconds() + 1 <= 9) {
gSecondes = "0" + date.getSeconds()
}
var lastedition = gday + "-" + gmonth + "-" + date.getFullYear() + " - " + gHour + ":" + gMinute
if(file.directory == true) {
fileExplorerList.push('<div id="' + file.name + '_directory" class="fi_file row"> <p class="col-lg"><i style="color:yellow;" class="fa fa-folder"></i> ' + file.name + '</p> <p class="col-lg"><i class="fa fa-calendar"></i> Dernière édition : ' + lastedition + '</p> <p class="col-lg"><i class="fas fa-weight-hanging"></i> Taille : ' + file.size + ' octet(s)</p> <div class="col-lg fi_file_btn"> <button id="' + file.name + '_rename" class="fi_rename"><i id="' + file.name + '_trename" class="fas fa-terminal"></i></button> <button id="' + file.name + '_delete" class="fi_delete"><i id="' + file.name + '_tdelete" class="fa fa-trash"></i></button> </div> </div>')
dialogExlorerList.push(' <dialog class="fi_addfolder" id="' + file.name + '_rename_dialog"> <h1><i class="fa fa-terminal"></i> Renommer un dossier</h1> <p><span id="' + file.name + '_old_name"></span></p> <p>Nouveau lien :</p> <input class="inp" id="' + file.name + '_rename_name" type="text"> </div><p id="' + file.name +'_rename_info" style="text-align: start; color: rgb(255, 48, 48);"></p> <button id="' + file.name + '_rename_close" class="fi_add_close">Annuler</button> <button id="' + file.name + '_rename_confirm" class="fi_add_confirm">Editer</button> </dialog>')
}
}
for(var file of files) {
const date = new Date(file.lastedition)
var gmonth = date.getMonth()
var gday = date.getDate()
var gHour = date.getHours()
var gMinute = date.getMinutes()
var gSecondes = date.getSeconds()
if(date.getMonth() + 1 <= 9) {
gmonth = "0" + (date.getMonth() + 1)
}
if(date.getDate() + 1 <= 9) {
gday = "0" + date.getDate()
}
if(date.getHours() + 1 <= 9) {
gHour = "0" + date.getHours()
}
if(date.getMinutes() + 1 <= 9) {
gMinute = "0" + date.getMinutes()
}
if(date.getSeconds() + 1 <= 9) {
gSecondes = "0" + date.getSeconds()
}
var lastedition = gday + "-" + gmonth + "-" + date.getFullYear() + " - " + gHour + ":" + gMinute
if(file.directory == false) {
var icon = '<i class="fa fa-file">'
if(file.type == "application/json") {
icon = '<i style="color:rgb(179, 141, 4);" class="fa-sharp fa-solid fa-code">'
}
if(file.type == "application/msword" | file.type == "application/vnd.openxmlformats-officedocument.wordprocessingml.document") {
icon = '<i style="color:rgb(47, 94, 247);" class="fa-solid fa-file-word"></i>'
}
if(file.type == "application/vnd.ms-powerpoint") {
icon = '<i style="color:rgb(255, 112, 51);" class="fa-solid fa-file-powerpoint"></i>'
}
if(file.type == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" | file.type == "application/vnd.ms-excel") {
icon = '<i style="color:rgb(51, 255, 61);" class="fa-solid fa-file-excel"></i>'
}
if(file.type == "application/java-archive") {
icon = '<i style="color:rgb(255, 202, 150);" class="fa-brands fa-java"></i>'
}
if(file.type == "application/x-sh") {
icon = '<i style="color:rgb(171, 226, 255);" class="fa-solid fa-file-code"></i>'
}
if(file.type == "application/x-msdos-program" | file.type == "application/x-msdownload") {
icon = '<i style="color:rgb(53, 191, 255);" class="fa-brands fa-windows"></i>'
}
if(file.type == "application/javascript") {
icon = '<i style="color:rgb(179, 141, 4);" class="fa-brands fa-js">'
}
if(file.type == "image/png" | file.type == "image/jpeg") {
icon = '<i style="color:rgb(189, 104, 189);" class="fa-solid fa-file-image"></i>'
}
if(file.type == "text/html") {
icon = '<i style="color:tomato;" class="fa-brands fa-html5"></i>'
}
if(file.type == "text/css") {
icon = '<i style="color:rgb(66, 135, 245);" class="fa-brands fa-css3-alt"></i>'
}
if(file.type == "application/zip") {
icon = '<i style="color:rgb(255, 139, 38);" class="fa-solid fa-file-zipper"></i>'
}
if(file.type == "audio/mpeg") {
icon = '<i style="color:rgb(38, 222, 255);" class="fa-solid fa-file-audio"></i>'
}
if(file.type == "application/pdf") {
icon = '<i style="color:rgb(255, 71, 51);" class="fa-solid fa-file-pdf"></i>'
}
fileExplorerList.push('<div id="' + file.name + '_directory" class="fi_file row"> <p class="col-lg">' + icon+ '</i> ' + file.name + '</p> <p class="col-lg"><i class="fa fa-calendar"></i> Dernière édition : ' + lastedition + '</p> <p class="col-lg"><i class="fas fa-weight-hanging"></i> Taille : ' + file.size + ' octet(s)</p> <div class="col-lg fi_file_btn"> <button id="' + file.name + '_rename" class="fi_rename"><i id="' + file.name + '_trename" class="fas fa-terminal"></i></button> <button id="' + file.name + '_download" class="fi_rename"><i id="' + file.name + '_tdownload" class="fas fa-download"></i></button><button id="' + file.name + '_delete" class="fi_delete"><i id="' + file.name + '_tdelete" class="fa fa-trash"></i></button> </div> </div>')
dialogExlorerList.push(' <dialog class="fi_addfolder" id="' + file.name + '_rename_dialog"> <h1><i class="fa fa-terminal"></i> Renommer un fichier</h1> <p><span id="' + file.name + '_old_name"></span></p> <p>Nouveau lien :</p> <input class="inp" id="' + file.name + '_rename_name" type="text"> </div> <p id="' + file.name +'_rename_info" style="text-align: start; color: rgb(255, 48, 48);"></p><button id="' + file.name + '_rename_close" class="fi_add_close">Annuler</button> <button id="' + file.name + '_rename_confirm" class="fi_add_confirm">Editer</button> </dialog>')
}
}
fileExplorer.innerHTML = fileExplorerList.join('')
dialogInput.innerHTML = dialogExlorerList.join('')
const last_dir = document.getElementById("last_directory")
last_dir.addEventListener("click", () => {
var cdSplit = currentDir.value.split("/")
if(cdSplit.slice(-1) == "") {
cdSplit.pop()
cdSplit.pop()
} else {
cdSplit.pop()
}
currentDir.value = cdSplit.join("/")
if(currentDir.value == "") {
currentDir.value = "/"
}
getDirectory(currentDir.value)
})
for(var file of files ) {
applyFile(file)
}
function applyFile(file) {
const deleteBtn = document.getElementById(file.name + "_delete")
const renameBtn = document.getElementById(file.name + "_rename")
const renameDialog = document.getElementById(file.name + "_rename_dialog")
const renameOldName = document.getElementById(file.name + "_old_name")
const renameName = document.getElementById(file.name + "_rename_name")
const renameClose = document.getElementById(file.name + "_rename_close")
const renameConfirm = document.getElementById(file.name + "_rename_confirm")
const renameInfo = document.getElementById(file.name + "_rename_info")
if(file.directory == true) {
const dir = document.getElementById(file.name + '_directory')
dir.addEventListener("click", (event) => {
console.log(event.target)
if(event.target.id != file.name + "_delete" && event.target.id != file.name + "_rename" && event.target.id != file.name + "_trename" && event.target.id != file.name + "_tdelete") {
if(currentDir.value.slice(-1) != "\\" && currentDir.value.slice(-1) != "/") {
currentDir.value = currentDir.value + "/" + file.name
} else if(currentDir.value.slice(-1) == "/") {
currentDir.value = currentDir.value + file.name
} else {
currentDir.value = currentDir.value + file.name
}
getDirectory(currentDir.value)
}
})
} else {
const downloadBtn = document.getElementById(file.name + "_download")
downloadBtn.addEventListener("click", () => {
fiInfo.innerHTML = ""
fetch('/download', {
method: 'GET',
redirect: 'follow',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'FileRequest': file.fileDirectory
}
}).then(resp => resp.blob())
.then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.style.display = "none";
a.href = url;
a.download = file.name;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
})
.catch(() => fiInfo.innerHTML = "Une erreur est survenue lors du téléchargement");
})
}
deleteBtn.addEventListener("click", () => {
fiInfo.innerHTML = ""
fetch('/filemanager', {
method: 'POST',
redirect: 'follow',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({"request":"del", "value": file})
})
.then(response => response.json())
.then(response => res(response, file))
function res(response, file) {
console.log(file)
if(response.result == "failed") {
content.innerHTML = ' <h1 style="color:red;"><i style="color:yellow; font-size: 2vw;" class="fa fa-warning"></i> Erreur de chargement des données - Erreur : ' + response.content + '</h1>'
console.log("FAILED")
} else if(response.result == "success") {
if(response.content == "ERROR_NOT_MAKEABLE") {
fiInfo.innerHTML = "<p>Vous n'avez pas la permission !</p>"
} else if(response.content == "ERROR_NOT_EXIST") {
console.log("ERROR NOT EXIST")
getDirectory(currentDir.value)
} else {
newFolderDialog.close()
getDirectory(currentDir.value)
}
}
}
})
renameBtn.addEventListener("click", () => {
renameDialog.showModal()
renameOldName.innerHTML = file.fileDirectory
renameName.value = file.fileDirectory
})
renameClose.addEventListener("click" ,() => {
renameDialog.close()
getDirectory(currentDir.value)
})
renameConfirm.addEventListener("click" ,() => {
var rnjustspace = false
renameInfo.innerHTML = ""
for (var i = 0; i < renameName.value.length; i++) {
var char = renameName.value.charAt(i)
if(char != " ") {
rnjustspace = true
}
}
if(rnjustspace == false) {
renameInfo.innerHTML = "Le nom du dossier ne peut être vide !"
} else {
fetch('/filemanager', {
method: 'POST',
redirect: 'follow',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({"request":"rename", "value": renameName.value, "currentDir" : renameOldName.outerText})
})
.then(response => response.json())
.then(response => res(response))
function res(response) {
if(response.result == "failed") {
content.innerHTML = ' <h1 style="color:red;"><i style="color:yellow; font-size: 2vw;" class="fa fa-warning"></i> Erreur de chargement des données - Erreur : ' + response.content + '</h1>'
console.log("FAILED")
} else if(response.result == "success") {
if(response.content == "ERROR_ALREADY_EXIST") {
renameInfo.innerHTML = "<p>Le nom du dossier est déjà existant !</p>"
} else if(response.content == "ERROR_NOT_MAKEABLE") {
renameInfo.innerHTML = "<p>Vous n'avez pas la permission !</p>"
} else {
renameDialog.close()
getDirectory(currentDir.value)
}
}
}
}
})
}
}
}
}
}
}
/*<div id="' + file + '_directory" class="fi_file row">
<p class="col-lg"><i class="fa fa-folder"></i> <span id="' + file + '_name"></span></p>
<p class="col-lg"><i class="fa fa-calendar"></i> Dernière édition : <span id="' + file + '_dateofcreate"></span></p>
<p class="col-lg"><i class="fas fa-weight-hanging"></i> Taille : <span id="' + file + '_dateofcreate"></span></p>
<div class="col-lg fi_file_btn">
<button id="' + file + '_rename" class="fi_rename"><i class="fas fa-terminal"></i></button>
<button id="' + file + '_delete" class="fi_delete"><i class="fa fa-trash"></i></button>
</div>
</div>
<div class="fi_file row ">
<p class="col-lg"><i class="fa fa-file"></i> <span id="' + file + '_name"></span</p>
<p class="col-lg"><i class="fa fa-calendar"></i> Dernière édition : <span id="' + file + '_dateofcreate"></span></p>
<p class="col-lg"><i class="fas fa-weight-hanging"></i> Taille : <span id="' + file + '_dateofcreate"></span></p>
<div class="col-lg fi_file_btn">
<button id="' + file + '_rename" class="fi_rename"><i class="fas fa-terminal"></i></button>
<button id="' + file + '_download" class="fi_rename"><i class="fas fa-download"></i></button>
<button id="' + file + '_delete" class="fi_delete"><i class="fa fa-trash"></i></button>
</div>
</div>*/
</script>
<!-- Style-->
<style>
.fi_file {
padding-top: 1vw;
border-bottom: 0.2vw solid rgb(80, 80, 80);
transition: all 0.2s ease 0s;
}
.fi_file:hover {
cursor: pointer;
background-color: rgb(80, 80, 80);
}
.fi_current_directory {
margin-top: 1vw;
margin-bottom: 1vw;
padding: 0.7vw;
border-radius: 1vw;
background-color: rgb(32, 32, 32);
transition: all 0.15s ease 0s;
display: flex;
justify-content: space-between;
}
.fi_current_directory:focus-within{
box-shadow: 1px 1px 10px rgb(0, 174, 255);
}
.fi_current_p {
margin-bottom: 0% !important;
background: none;
border: none;
color: white;
width: 100%;
}
.fi_current_p:focus {
outline: none;
}
.fi_file * {
margin-bottom: 0% !important;
}
.fi_container {
margin-top: 1vw ;
background-color: rgb(32, 32, 32) ;
border-radius: 1vw;
padding: 1vw;
overflow-x: hidden;
overflow-y: auto;
}
.fi_act {
display: flex;
justify-content: space-between;
}
.hbox h1 {
font-size: large;
}
table {
color: white;
}
.hbox {
margin: 1%;
padding: 1%;
background-color: rgb(80, 80, 80);
border-radius: 1vw;
box-shadow: 5px 5px 5px rgba(80, 80, 80, 0.477) ;
}
.fi_act_btn {
border-radius: 1vw;
border-color: rgb(0, 174, 255);
border-width: 1%;
border-style: solid;
color: white;
background-color: transparent;
transition: all 0.2s ease 0s;
margin-left: 0.5vw;
margin-right: 0.5vw;
font-size: 0.7vw;
padding: 0.5vw;
}
.fi_act_btn:hover {
box-shadow: 1px 1px 10px rgb(0, 174, 255);
background-color: rgb(0, 174, 255);
color: black;
}
.fi_act_btn:active {
box-shadow: none;
}
.fi_rename {
border-radius: 100%;
border-color: rgb(0, 174, 255);
border-width: 1%;
border-style: solid;
color: white;
background-color: transparent;
transition: all 0.2s ease 0s;
width: 2vw;
height: 2vw;
margin-left: 0.5vw;
margin-right: 0.5vw;
font-size: 0.7vw;
}
.fi_rename:hover {
box-shadow: 1px 1px 10px rgb(0, 174, 255);
background-color: rgb(0, 174, 255);
color: black;
}
.fi_rename:active {
box-shadow: none;
}
.fi_delete {
border-radius: 100%;
border-color: rgb(255, 48, 48);
border-width: 1%;
border-style: solid;
color: white;
background-color: transparent;
transition: all 0.2s ease 0s;
width: 2vw;
height: 2vw;
margin-left: 0.5vw;
margin-right: 0.5vw;
font-size: 0.7vw;
}
.fi_delete:hover {
box-shadow: 1px 1px 10px rgb(255, 48, 48);
background-color: rgb(255, 48, 48);
color: black;
}
.fi_delete:active {
box-shadow: none;
}
.fi_file_btn {
margin-bottom: 0.5vw !important;
}
.fi_addfolder {
border-radius: 1vw;
border-color: transparent;
background-color: rgb(80, 80, 80);
color: white;
text-align: center;
}
.fi_add_close {
border-radius: 1vw;
border-color: rgb(255, 48, 48);
border-width: 1%;
border-style: solid;
color: white;
background-color: transparent;
transition: all 0.2s ease 0s;
margin: 0.5vw;
padding: 0.5vw;
font-size: 1vw;
}
.fi_add_close:hover {
box-shadow: 1px 1px 10px rgb(255, 48, 48);
background-color: rgb(255, 48, 48);
color: black;
}
.fi_add_close:active {
box-shadow: none;
}
.fi_add_confirm {
border-radius: 1vw;
border-color: rgb(0, 174, 255);
border-width: 1%;
border-style: solid;
color: white;
background-color: transparent;
transition: all 0.2s ease 0s;
margin: 0.5vw;
padding: 0.5vw;
font-size: 1vw;
}
.fi_add_confirm:hover {
box-shadow: 1px 1px 10px rgb(0, 174, 255);
background-color: rgb(0, 174, 255);
color: black;
}
.fi_add_confirm:active {
box-shadow: none;
}
.inp {
border-style: hidden;
border-radius: 1vw;
padding: 0.2vw;
padding-left: 1vw;
transition: all 0.2s ease 0s;
margin-bottom: 0.5vw;
width: 100%;
}
.inp:hover {
box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.477) ;
}
.inp:focus {
box-shadow: 5px 5px 5px rgba(0, 174, 255, 0.477) ;
}
</style>