From 5740f42e548e05a67bebb2f2ca62dc0548f05367 Mon Sep 17 00:00:00 2001
From: "Christoph M. Becker" <cmbecker69@gmx.de>
Date: Sat, 27 Oct 2018 19:23:02 +0200
Subject: [PATCH] Overhaul Filebrowser styling

We remove the inline styles, add FontAwesome icons to the toggle
buttons, generally clean up the HTML a bit, and add a heading for the
CMS browser.

This patch has been provided by @frase-git.
---
 plugins/filebrowser/classes/View.php       |  18 +-
 plugins/filebrowser/css/stylesheet.css     | 414 ++++++++++++---------
 plugins/filebrowser/languages/de.php       |   1 +
 plugins/filebrowser/languages/en.php       |   1 +
 plugins/filebrowser/tpl/cmsbrowser.html    | 100 +++--
 plugins/filebrowser/tpl/editorbrowser.html |  99 +++--
 6 files changed, 337 insertions(+), 296 deletions(-)

diff --git a/plugins/filebrowser/classes/View.php b/plugins/filebrowser/classes/View.php
index 53541feb..a82e6d5b 100644
--- a/plugins/filebrowser/classes/View.php
+++ b/plugins/filebrowser/classes/View.php
@@ -138,7 +138,7 @@ private function folderList(array $folders)
         global $tx;
 
         $html = '<ul><li class="openFolder"><a href="?'
-            . XH_hsc($this->linkParams) . '"><span class="fa fa-folder fa-fw fa-lg"></span> '
+            . XH_hsc($this->linkParams) . '"><span class="fa fa-folder-open fa-fw fa-lg"></span> '
             . $tx['title']['userfiles'] . ' ' . $this->lang['folder'] . '</a>';
         if (!empty($folders)) {
             $html .= '<ul>';
@@ -210,7 +210,7 @@ private function subfolderList(array $folders)
             foreach ($folders as $folder) {
                 $name = str_replace($this->currentDirectory, '', $folder);
                 $html .= '<li class="folder"><span class="fa fa-folder fa-fw fa-lg"></span>'
-                    . '<form style="display: inline;" method="post" action="'
+                    . '<form method="post" action="'
                     . $action . '" class="filebrowser_delete_folder" data-path="'
                     . XH_hsc($this->basePath) . $folder . '">'
                     . '<button class="xhButtonImg" title="'
@@ -253,8 +253,8 @@ private function fileList(array $files)
         $action = $sn . '?' . XH_hsc($_SERVER['QUERY_STRING']);
         foreach ($files as $file) {
             $class = $class == 'odd' ? 'even' : 'odd';
-            $html .= '<li style="white-space:nowrap;" class="' . $class . '">'
-                . '<form style="display: inline;" method="post" action="'
+            $html .= '<li class="' . $class . '">'
+                . '<form method="post" action="'
                 . $action . '" class="filebrowser_delete_file" data-path="'
                 . XH_hsc($this->currentDirectory . $file) . '">'
                 . '<button class="xhButtonImg" title="'
@@ -265,7 +265,7 @@ private function fileList(array $files)
                 . $file . '">'
                 . $_XH_csrfProtection->tokenInput()
                 . '</form>'
-                . '<form method="post" style="display:inline;" action="'
+                . '<form method="post" action="'
                 . $action . '" class="filebrowser_rename_file" data-path="'
                 . XH_hsc($file) . '">'
                 . '<input type="hidden" name="renameFile" value="'
@@ -276,7 +276,7 @@ private function fileList(array $files)
                 .'<span class="fa fa-tag fa-lg fa-fw"></span></button>'
                 . $_XH_csrfProtection->tokenInput()
                 . '</form>'
-                . '<a style="position:relative" class="xhfbfile" href="'
+                . '<a class="xhfbfile" href="'
                 . $this->basePath . $this->currentDirectory . $file
                 . '" target="_blank">' . $file;
 
@@ -353,8 +353,8 @@ private function renderImage($path, $file, array $image, $usage = null)
             $width = 150;
             $height = $width / $ratio;
         }
-        return '<span style="position: relative;  z-index: 4; ">'
-            . '<span style="font-weight: normal; border: none;">'
+        return '<span>'
+            . '<span>'
             . $image[0] . ' x ' . $image[1] . ' px</span>' . '<br>'
             . '<img src="' . $path . '" width="' . $width . '" height="'
             . $height . '" alt="' . $file . '">'
@@ -454,7 +454,7 @@ public function info($message, array $args = null)
      */
     public function message($message)
     {
-        $this->message .= '<p style="width: auto;">' . $message . '</p>';
+        $this->message .= '<p>' . $message . '</p>';
     }
 
     /**
diff --git a/plugins/filebrowser/css/stylesheet.css b/plugins/filebrowser/css/stylesheet.css
index 1ed8b4e2..1ec9ebb8 100644
--- a/plugins/filebrowser/css/stylesheet.css
+++ b/plugins/filebrowser/css/stylesheet.css
@@ -1,196 +1,193 @@
-#xhFilebrowser, #xhFilebrowserMenu {
-background: #fff;
-min-width: 440px;
-color: #333;
-border: 1px solid #999999;
-margin: 1px 0;
-overflow: auto;
-padding: 8px 16px;
-font-family: arial, sans-serif;
-font-size: 14px;
-}
-
-#xhFilebrowserMenu {
-font-weight: 700;
-}
-
-
-/* FILEBROWSER MENU */
-
-#xhFilebrowser {
-font-family: arial, sans-serif;
-font-size: 14px;
-font-weight: 900;
-
-}
-
-#xhFilebrowser  fieldset, #xhFilebrowserMenu  fieldset {
-margin: 5px;
-display:none;
-}
-
-#xhFilebrowser fieldset legend, #xhFilebrowserMenu fieldset legend {
-   font-weight: bold;
-}
-
-
-/* FILEBROWSER LISTS */
-
+div.xhFilebrowserDiv {
+	font: normal 15px/normal sans-serif;
+	text-transform: none !important;
+	color: #000 !important;
+	text-decoration: none !important;
+	background: #fff !important;
+	border: 0 !important;
+	margin: 0 !important;
+	padding: 0.5em !important;
+	letter-spacing: normal;
+	text-shadow: none !important;
+}
+/* Filebrowser Links */
+div.xhFilebrowserDiv a {
+	color: #000 !important;
+	text-decoration: none !important;
+	font-style: normal !important;
+	transition: none !important;
+	border: 0 !important;
+}
+div.xhFilebrowserDiv a:hover,
+div.xhFilebrowserDiv a:active,
+div.xhFilebrowserDiv a:focus {
+	color: #c60 !important;
+	text-decoration: none !important;
+	font-style: normal !important;
+	transition: none !important;
+	border: 0 !important;
+}
+/* Filebrowser Lists */
+div.xhFilebrowserDiv ul,
+div.xhFilebrowserDiv ul ul,
+div.xhFilebrowserDiv ul ul ul {
+	list-style-type: none !important;
+	list-style-image: none !important;
+	list-style-position: inside !important;
+	padding: 0 !important;
+	margin: .5em 0 !important;
+}
+div.xhFilebrowserDiv ul li,
+div.xhFilebrowserDiv ul ul li,
+div.xhFilebrowserDiv ul ul ul li {
+	list-style-type: none !important;
+	list-style-image: none !important;
+	list-style-position: inside !important;
+	padding: 4px 0 0 2px !important;
+	white-space: nowrap !important;
+	margin: 0 !important;
+}
+div.xhFilebrowserDiv ul li::before {
+	color: inherit !important;
+	content: "" !important;
+	margin-left: 0 !important;
+	padding: 0 !important;
+}
+div.xhFilebrowserDiv ul.unseen {
+	display: none;
+}
+div.xhFilebrowserDiv li.openFolder ul {
+	margin: 0 0 0 24px !important;
+}
+div.xhFilebrowserDiv li.openFolder {
+	font-weight: bold !important;
+}
+div.xhFilebrowserDiv li.folder {
+	font-weight: normal !important;
+}
+div.xhFilebrowserDiv li.folder form,
+div.xhFilebrowserDiv form.filebrowser_delete_file,
+div.xhFilebrowserDiv form.filebrowser_rename_file {
+	display: inline !important;
+}
 span.xhfb_files {
-font-weight: 700;
-color: #900;
+	font-weight: bold;
 }
-
 p.xhfb_files {
-font-weight: 700;
-padding: 0;
-}
-
-#xhFilebrowser ul, #xhFilebrowserMenu ul {
-list-style-image: none;
-list-style-position:inside;
-padding: 0;
-margin: auto;
-}
-
-#xhFilebrowser ul.unseen, #xhFilebrowserMenu ul.unseen{
-display: none;
-}
-
-#xhFilebrowser li.openFolder, #xhFilebrowserMenu li.openFolder {
-padding: 2px 0 2px 5px;
-margin: 0 0 0 0;
-line-height: 1em;
-font-size: 14px;
-font-weight: 900;
-}
-
-#xhFilebrowser li.folder, #xhFilebrowserMenu li.folder{
-padding: 2px 0 2px 5px;
-margin: 0 0 0 0;
-line-height: 1em;
-font-size: 13px;
-font-weight: 300;
-}
-
-
-#xhFilebrowser li.openFolder ul, #xhFilebrowserMenu li.openFolder ul {margin-left: 20px;}
-
-
-/* FILEBROWSER FOLDERS */
-
+	font-weight: bold;
+	padding: 0;
+}
+/* Fieldsets */
+div.xhFilebrowserDiv fieldset {
+	font: normal 15px/normal sans-serif;
+	margin: 1em 0 !important;
+	display: none;
+	padding: .5em !important;
+	background: #f9f9f9 !important;
+	border: 1px solid #ccc !important;
+	box-sizing: border-box;
+	letter-spacing: normal;
+}
+div.xhFilebrowserDiv fieldset legend {
+	font: normal 15px/normal sans-serif;
+	border: 0 !important;
+	display: inline;
+	width: auto;
+	padding: 0 .25em;
+	margin: 0;
+	color: #000;
+	letter-spacing: normal;
+}
+/* Filebrowser Folders */
 #xhFilebrowser #filebrowser_folders {
-    float: left;
-    width: 40%;
-    overflow: auto;
-
+	float: left;
+	width: 40%;
+	overflow: auto;
+}
+#filebrowser_files li.odd {
+	background: #f9f9f9;
 }
-
 #filebrowser_subfolders {
-    padding: 0 0 10px 0;
+	padding: 0 0 .5em 0;
 }
-
 #filebrowser_subfolders li {
-    font-size: 13px;
-    font-weight: 900;
+	font-weight: bold;
 }
-
-
-/* FILEBROWSER FILES */
-
 #filebrowser_files {
-    font-weight: 300;
-    padding: 0 0 0 30px;
-    margin-bottom: 20px;
-}
-
-#filebrowser_files li {
-    list-style-type: none;
-    font-size: 13px;
-    padding: 2px 0;
-    margin: 0;
-}
-
+	overflow: auto !important;
+}
+#filebrowser_files.xhfb_Bg {
+	padding-top: .75em !important;
+}
+a.xhfbfile img,
+span.xhfbfile img {
+	border: none !important;
+	margin: .25em 0 0 0 !important;
+	max-height: 10em !important;
+	max-width: 10em !important;
+	box-shadow: none !important;
+}
+a.xhfbfile span,
+span.xhfbfile span {
+	display: none;
+}
+a.xhfbfile:hover span,
+#filebrowser_files ul li:hover a.xhfbfile span,
+span.xhfbfile:hover span,
+#filebrowser_files ul li:hover span.xhfbfile span {
+	display: block;
+	float: right;
+	border: 1px solid #ccc;
+	padding: .25em;
+	background-color: #f0f0f0;
+	margin-top: -4px;
+	font-size: .9em !important;
+	position: relative;
+	z-index: 4;
+	box-sizing: border-box !important;
+}
+#filebrowser_files ul li:hover span:not(.xhfbfile) > span {
+	border: 0 !important;
+	background: transparent !important;
+}
 #filebrowser_files li:hover {
-   background-color: #ccc;
-}
-
-#filebrowser_files li.odd {}
-
-#filebrowser_files ul, #filebrowser_files ul li {
-    margin-left: 0em;
-    padding-left: 0em;
-}
-
-#xhFilebrowser a { color: #333;}
-a.xhfbfile, span.xhfbfile {padding: 0 2px 0 0; line-height: 1em;}
-a.xhfbfile img, span.xhfbfile img {border: none; margin: 6px;}
-a.xhfbfile span, span.xhfbfile span {display: none;}
-a.xhfbfile:hover span, #filebrowser_files ul li:hover a.xhfbfile span,
-span.xhfbfile:hover span, #filebrowser_files ul li:hover span.xhfbfile span {
-    display: block;
-    float: right;
-    border: #aaa 1px solid;
-    padding: 2px;
-    background-color: #ddd;
-}
-a.xhfbfile:hover, span.xhfbfile:hover {
-    background-color: #ccc;
-    cursor:pointer;
-}
-#xhFilebrowser div {
-    font-family: arial, sans-serif;
-    padding: 0px;
-    margin: 0px;
-}
-
-
-#filebrowser_subfolders  fieldset legend {}
-
-#xhFilebrowser a:link {color: #222; text-decoration: none; font-style: normal;}
-#xhFilebrowser a:visited {color: #222; text-decoration: none; font-style: normal;}
-#xhFilebrowser a:hover {color: #c60; text-decoration: none;}
-#xhFilebrowser a:active {color: #c60; text-decoration: none;}
-#xhFilebrowser a:focus {color: #c60; text-decoration: none;}
-
-#xhFilebrowser li.openFolder a:link {color: #920; text-decoration: none; font-style: normal;}
-#xhFilebrowser li.openFolder a:visited {color: #920; text-decoration: none; font-style: normal;}
-#xhFilebrowser li.openFolder a:hover {color: #c60; text-decoration: none;}
-#xhFilebrowser li.openFolder a:active {color: #c60; text-decoration: none;}
-#xhFilebrowser li.openFolder a:focus {color: #c60; text-decoration: none;}
-
-#xhFilebrowser li.folder a:link {color: #222; text-decoration: none; font-style: normal;}
-#xhFilebrowser li.folder a:visited {color: #222; text-decoration: none; font-style: normal;}
-#xhFilebrowser li.folder a:hover {color: #c60; text-decoration: none;}
-#xhFilebrowser li.folder a:active {color: #c60; text-decoration: none;}
-#xhFilebrowser li.folder a:focus {color: #c60; text-decoration: none;}
-
-#xhFilebrowserMenu a:link {color: #222; text-decoration: none; font-style: normal;}
-#xhFilebrowserMenu a:visited {color: #222; text-decoration: none; font-style: normal;}
-#xhFilebrowserMenu a:hover {color: #c60; text-decoration: none;}
-#xhFilebrowserMenu a:active {color: #c60; text-decoration: none;}
-#xhFilebrowserMenu a:focus {color: #c60; text-decoration: none;}
-
+	background-color: #e9e9e9;
+}
+a.xhfbfile:hover,
+span.xhfbfile:hover {
+	/* [disabled]background-color: #f5f5f5; */
+	/* [disabled]cursor:pointer; */
+}
 /* FA-Icons & colors */
-div[id*='xhFilebrowser'] span.fa {
+div.xhFilebrowserDiv span.fa {
 	vertical-align: baseline;
 }
-div[id*='xhFilebrowser'] span.fa-folder,
-div[id*='xhFilebrowser'] span.fa-folder-open {
-    color: rgb(255,153,0);
+div.xhFilebrowserDiv span.fa-folder,
+div.xhFilebrowserDiv span.fa-folder-open {
+	color: rgb(255,153,0);
 }
-div[id*='xhFilebrowser'] span.fa-tag {
+div.xhFilebrowserDiv span.fa-tag {
 	color: rgb(51,153,204);
 }
-div[id*='xhFilebrowser'] span.fa-remove {
+div.xhFilebrowserDiv span.fa-remove {
 	color: rgb(255,51,0);
 }
 /* Buttons */
-div[id*='xhFilebrowser'] .xhButtonImg {
-	font: inherit !important;
+div.xhFilebrowserDiv button {
+	font: normal 15px/normal sans-serif;
+	cursor: pointer !important;
+	padding: 0 !important;
+	background: transparent !important;
+	color: #000 !important;
+	border: 0 !important;
+	box-shadow: none !important;
+	letter-spacing: normal;
+}
+div.xhFilebrowserDiv .xhButtonImg {
+	font: normal 15px/normal sans-serif;
 	cursor: pointer !important;
 	padding: 0 !important;
-	margin: 0 .25em .25em 0 !important;
+	margin: 0 .25em 0 0 !important;
 	background: transparent !important;
 	border: 0 !important;
 	vertical-align: baseline;
@@ -198,11 +195,76 @@ div[id*='xhFilebrowser'] .xhButtonImg {
 	height: auto !important;
 	display: inline-block;
 	max-width: inherit !important;
+	box-shadow: none !important;
+	letter-spacing: normal;
 }
-div[id*='xhFilebrowser'] .xhButtonImg:hover,
-div[id*='xhFilebrowser'] .xhButtonImg:active,
-div[id*='xhFilebrowser'] .xhButtonImg:focus {
-	outline: thin dotted !important;
-	outline: 5px auto -webkit-focus-ring-color !important;
+div.xhFilebrowserDiv .xhButtonImg:hover,
+div.xhFilebrowserDiv .xhButtonImg:active,
+div.xhFilebrowserDiv .xhButtonImg:focus {
+	outline: 1px dotted #000 !important;
 	outline-offset: 1px !important;
 }
+div.xhFilebrowserDiv button.filebrowser_folder_toggle,
+div.xhFilebrowserDiv button.filebrowser_upload_toggle,
+div.xhFilebrowserDiv input.submit {
+	font: normal 15px/normal sans-serif;
+	font-weight: bold !important;
+	padding: .25em .5em !important;
+	background: #eee !important;
+	color: #000 !important;
+	border: 1px solid #ccc !important;
+	border-radius: 0 !important;
+	cursor: pointer !important;
+	text-decoration: none !important;
+	text-transform: none !important;
+	height: auto !important;
+	display: inline-block;
+	letter-spacing: normal;
+}
+div.xhFilebrowserDiv button.filebrowser_folder_toggle:hover,
+div.xhFilebrowserDiv button.filebrowser_folder_toggle:focus,
+div.xhFilebrowserDiv input.submit:hover,
+div.xhFilebrowserDiv input.submit:focus,
+div.xhFilebrowserDiv button.filebrowser_upload_toggle:hover,
+div.xhFilebrowserDiv button.filebrowser_upload_toggle:focus {
+	background: #999 !important;
+	color: #fff !important;
+	border: 1px solid #999 !important;
+	text-decoration: none !important;
+}
+div.xhFilebrowserDiv input[name="createFolder"],
+div.xhFilebrowserDiv input[type="file"] {
+	font: normal 15px/normal sans-serif;
+	font-weight: normal !important;
+	padding: .25em .5em !important;
+	margin: 0 0 .25em 0 !important;
+	color: #000 !important;
+	background-color: #fff !important;
+	background-image: none !important;
+	border: 1px solid #ccc !important;
+	border-radius: 0 !important;
+	box-shadow: none !important;
+	transition: none !important;
+	box-sizing: border-box !important;
+	display: inline-block !important;
+	letter-spacing: normal;
+}
+/* Others */
+div.xhFilebrowserDiv hr {
+	border: 0 !important;
+	border-bottom: 1px solid #ccc !important;
+	height: 0 !important;
+	clear: both !important;
+	margin: .25em 0 !important;
+	box-shadow: none !important;
+}
+div.xhFilebrowserDiv .xhfbBtnRgth {
+	text-align: right;
+}
+div.xhFilebrowserDiv h1 {
+	color: #000;
+	font-size: 2em;
+	margin: 0 0 .5em 0;
+	letter-spacing: normal;
+	text-shadow: none !important;
+}
diff --git a/plugins/filebrowser/languages/de.php b/plugins/filebrowser/languages/de.php
index 16ae6ce5..b90d28a9 100644
--- a/plugins/filebrowser/languages/de.php
+++ b/plugins/filebrowser/languages/de.php
@@ -1,5 +1,6 @@
 <?php
 
+$plugin_tx['filebrowser']['heading']="Datei-Browser";
 $plugin_tx['filebrowser']['error_not_deleted']="<b>%s</b> wurde nicht gelöscht.";
 $plugin_tx['filebrowser']['error_file_is_used']="Die Datei wird auf folgenden Seiten verwendet:";
 $plugin_tx['filebrowser']['error_file_too_big']="Die Datei ist zu groß (%1\$s kb). In diesem Ordner sind nur %2\$s erlaubt. Diese Einstellung kann in der CMS-Konfiguration geändert werden.";
diff --git a/plugins/filebrowser/languages/en.php b/plugins/filebrowser/languages/en.php
index eeb70341..369ae0bd 100644
--- a/plugins/filebrowser/languages/en.php
+++ b/plugins/filebrowser/languages/en.php
@@ -1,5 +1,6 @@
 <?php
 
+$plugin_tx['filebrowser']['heading']="Filebrowser";
 $plugin_tx['filebrowser']['error_not_deleted']="<b>%s</b> was not deleted.";
 $plugin_tx['filebrowser']['error_file_is_used']="The file is used on these pages:";
 $plugin_tx['filebrowser']['error_file_too_big']="File size (%1\$s kb) exceeds allowed limit (%2\$s). You can increase the limit in the CMS configuration.";
diff --git a/plugins/filebrowser/tpl/cmsbrowser.html b/plugins/filebrowser/tpl/cmsbrowser.html
index f189728e..1f09fc47 100644
--- a/plugins/filebrowser/tpl/cmsbrowser.html
+++ b/plugins/filebrowser/tpl/cmsbrowser.html
@@ -1,65 +1,49 @@
 <?php
-
 global $tx, $sn, $pth, $_XH_csrfProtection;
 ?>
+<div class="xhFilebrowserDiv">
+<h1><?php echo $this->translate('heading')?></h1>
 <div id="xhFilebrowserMenu">
-    <div id="filebrowser_folders">
-        %MESSAGE%
-        %FOLDERS%
-    </div>
-
+<div id="filebrowser_folders">
+%MESSAGE%
+<hr>
+%FOLDERS%
+</div>
 </div>
 <div id="xhFilebrowser">
-
-
-    <div style="clear: both;"></div>
-
-    <div id="filebrowser_subfolders">
-        <div style="clear: both; margin: 0px 0;"><b><?php echo $tx['filetype']['folder']; ?>:</b> <?php echo XH_hsc($this->currentDirectory); ?></div>
-        <div style="text-align: right;">
-        <button type="button" class="filebrowser_folder_toggle"><?php echo $this->translate('create_folder'); ?></button>
-
-        </div>
-
-
-
-        <fieldset id="xhfbCreateDir" class="xhfbform">
-            <legend><?php echo $this->translate('create_subfolder_in', array(XH_hsc($this->currentDirectory))); ?></legend>
-            <div style="padding: 3em;">
-
-                <form method="POST" action="<?php echo $sn, '?', XH_hsc($_SERVER['QUERY_STRING']);?>">
-                    <input type="text" name="createFolder" size="30">
-                    <input type="submit" class="submit" value="<?php echo $this->translate('create_folder')?>">
-		    <?php echo $_XH_csrfProtection->tokenInput()?>
-                </form>
-            </div>
-        </fieldset>
-
-        %SUBFOLDERS%
-
-    </div>
-	<hr>
-	<p class="xhfb_files"><?php echo $this->translate('files');?></p>
-    <div id="filebrowser_files">
-         <div style="text-align: right; font-weight: 900">
-                <button type="button" class="filebrowser_upload_toggle"><?php echo $this->translate('upload_file'); ?></button>
-        </div>
-               <fieldset id="xhfbUploadFile" class="xhfbform">
-            <legend><?php echo $this->translate('upload_file_to', array(XH_hsc($this->currentDirectory))); ?></legend>
-            <div style="padding: 3em;">
-
-                <form method="POST" class="filebrowser_upload" action="<?php echo $sn, '?', XH_hsc($_SERVER['QUERY_STRING']);?>" enctype="multipart/form-data">
-                    <input type="file" name="fbupload">
-                    <input type="hidden" name="upload" value="upload">
-                    <input type="submit" class="submit" value="<?php echo $this->translate('upload_file')?>">
-		    <?php echo $_XH_csrfProtection->tokenInput()?>
-                </form>
-            </div>
-        </fieldset>
-        %FILES%
-
-    </div>
-
-    <div style="clear:both;"></div>
+<hr>
+<div id="filebrowser_subfolders">
+<div><b><?php echo $tx['filetype']['folder']; ?>:</b> <?php echo XH_hsc($this->currentDirectory); ?></div>
+<div class="xhfbBtnRgth">
+<button type="button" class="filebrowser_folder_toggle xhButton"><span class="fa fa-plus-square"></span> <?php echo $this->translate('create_folder'); ?></button>
+</div>
+<fieldset id="xhfbCreateDir" class="xhfbform">
+<legend><?php echo $this->translate('create_subfolder_in', array(XH_hsc($this->currentDirectory))); ?></legend>
+<form method="POST" action="<?php echo $sn, '?', XH_hsc($_SERVER['QUERY_STRING']);?>">
+<input type="text" name="createFolder">
+<input type="submit" class="submit" value="<?php echo $this->translate('create_folder')?>">
+<?php echo $_XH_csrfProtection->tokenInput()?>
+</form>
+</fieldset>
+%SUBFOLDERS%
+</div>
+<hr>
+<p class="xhfb_files"><?php echo $this->translate('files');?></p>
+<div id="filebrowser_files">
+<div class="xhfbBtnRgth">
+<button type="button" class="filebrowser_upload_toggle xhButton"><span class="fa fa-upload"></span> <?php echo $this->translate('upload_file'); ?></button>
+</div>
+<fieldset id="xhfbUploadFile" class="xhfbform">
+<legend><?php echo $this->translate('upload_file_to', array(XH_hsc($this->currentDirectory))); ?></legend>
+<form method="POST" class="filebrowser_upload" action="<?php echo $sn, '?', XH_hsc($_SERVER['QUERY_STRING']);?>" enctype="multipart/form-data">
+<input type="file" name="fbupload">
+<input type="hidden" name="upload" value="upload">
+<input type="submit" class="submit" value="<?php echo $this->translate('upload_file')?>">
+<?php echo $_XH_csrfProtection->tokenInput()?>
+</form>
+</fieldset>
+%FILES%
+</div>
+</div>
 </div>
-<?php echo $this->renderJsConfig()?>
+<?php echo $this->renderJsConfig()?>
\ No newline at end of file
diff --git a/plugins/filebrowser/tpl/editorbrowser.html b/plugins/filebrowser/tpl/editorbrowser.html
index 7c16878f..16057747 100644
--- a/plugins/filebrowser/tpl/editorbrowser.html
+++ b/plugins/filebrowser/tpl/editorbrowser.html
@@ -1,57 +1,50 @@
-<?php
+<!DOCTYPE html>
+<?php 
 global $pth, $_XH_csrfProtection;
 ?>
-<!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>Filebrowser</title>
-        <link rel="stylesheet" href="<?php echo $pth['folder']['plugins']?>fa/css/font-awesome.min.css" type="text/css">
-        <link rel="stylesheet" href="<?php echo "{$pth['folder']['corestyle']}xhstyles.css"?>" type="text/css">
-        <style type="text/css">body {padding: 0; margin: 0; overflow: auto;}</style>
-
-        %SCRIPT%
-
-	<?php echo $this->renderJsConfig()?>
-        <script type="text/javascript" src="<?php echo $pth['folder']['plugin']?>js/filebrowser.min.js"></script>
-    </head>
-    <body>
-        <div id="xhFilebrowserMenu">
-        %MESSAGE%
-            <button type="button" class="filebrowser_folder_toggle"><?php echo $this->translate('create_folder'); ?></button>
-            <button type="button" class="filebrowser_upload_toggle"><?php echo $this->translate('upload_file'); ?></button>
-            <fieldset id="xhfbUploadFile" class="xhfbform">
-                <legend><?php echo $this->translate('upload_file_to', array(XH_hsc($this->currentDirectory))); ?></legend>
-                <div style="padding: 3em;">
-
-                    <form method="post" class="filebrowser_upload" enctype="multipart/form-data">
-                        <input type="file" name="fbupload">
-                        <input type="hidden" name="upload" value="upload">
-			<?php echo $_XH_csrfProtection->tokenInput()?>
-                        <input type="submit" class="submit" value="<?php echo $this->translate('upload_file')?>">
-                    </form>
-                </div>
-            </fieldset>
-            <fieldset id="xhfbCreateDir" class="xhfbform">
-                <legend><?php echo $this->translate('create_subfolder_in', array(XH_hsc($this->currentDirectory))); ?></legend>
-                <div style="padding: 3em;">
-
-                    <form method="post">
-                        <input type="text" name="createFolder" size="30">
-			<?php echo $_XH_csrfProtection->tokenInput()?>
-                        <input type="submit" class="submit" value="<?php echo $this->translate('create_folder')?>">
-                    </form>
-                </div>
-            </fieldset>
-        </div>
-        <div id="xhFilebrowser">
-            <div id="filebrowser_folders">
-                %FOLDERS%
-            </div>
-            <div id="filebrowser_files" style="overflow: auto; z-index: 3; font-weight: 300; padding: 6px 6px 100px 30px;">
-			<span class="xhfb_files"><?php echo $this->translate('files');?></span><br><br>
-                %FILES%
-            </div>
-            <div style="clear:both;"></div>
-        </div>
-    </body>
+<head>
+<title>Filebrowser</title>
+<link rel="stylesheet" href="<?php echo $pth['folder']['plugins']?>fa/css/font-awesome.min.css" type="text/css">
+<link rel="stylesheet" href="<?php echo $pth['folder']['corestyle']?>xhstyles.css" type="text/css">
+<style>body {padding: 0; margin: 0; overflow: auto;}</style>
+%SCRIPT%
+<?php echo $this->renderJsConfig()?>
+<script src="<?php echo $pth['folder']['plugin']?>js/filebrowser.min.js"></script>
+</head>
+<body>
+<div class="xhFilebrowserDiv">
+<div id="xhFilebrowserMenu">
+%MESSAGE%
+<button type="button" class="filebrowser_folder_toggle"><span class="fa fa-plus-square"></span> <?php echo $this->translate('create_folder'); ?></button>
+<button type="button" class="filebrowser_upload_toggle"><span class="fa fa-upload"></span> <?php echo $this->translate('upload_file'); ?></button>
+<fieldset id="xhfbUploadFile" class="xhfbform">
+<legend><?php echo $this->translate('upload_file_to', array(XH_hsc($this->currentDirectory))); ?></legend>
+<form method="post" class="filebrowser_upload" enctype="multipart/form-data">
+<input type="file" name="fbupload">
+<input type="hidden" name="upload" value="upload">
+<?php echo $_XH_csrfProtection->tokenInput()?>
+<input type="submit" class="submit" value="<?php echo $this->translate('upload_file')?>">
+</form>
+</fieldset>
+<fieldset id="xhfbCreateDir" class="xhfbform">
+<legend><?php echo $this->translate('create_subfolder_in', array(XH_hsc($this->currentDirectory))); ?></legend>
+<form method="post">
+<input type="text" name="createFolder">
+<?php echo $_XH_csrfProtection->tokenInput()?>
+<input type="submit" class="submit" value="<?php echo $this->translate('create_folder')?>">
+</form>
+</fieldset>
+</div>
+<div id="xhFilebrowser">
+<div id="filebrowser_folders">
+%FOLDERS%
+</div>
+<div id="filebrowser_files" class="xhfb_Bg">
+<span class="xhfb_files"><?php echo $this->translate('files');?></span>
+%FILES%
+</div>
+</div>
+</div>
+</body>
 </html>
\ No newline at end of file