[TASK] Restyle Admin Panel 84/41684/5
authorAndreas Steiger <typo3@andreassteiger.de>
Sat, 18 Jul 2015 16:19:41 +0000 (18:19 +0200)
committerSusanne Moog <typo3@susannemoog.de>
Sat, 18 Jul 2015 17:32:41 +0000 (19:32 +0200)
Adapt Admin Panel to latest technology.

Resolves: #68349
Releases: master
Change-Id: Ifb532bfbed5db57614c6135f68e71c4a2384fdf1
Reviewed-on: http://review.typo3.org/41684
Reviewed-by: Benjamin Mack <benni@typo3.org>
Tested-by: Benjamin Mack <benni@typo3.org>
Reviewed-by: Susanne Moog <typo3@susannemoog.de>
Tested-by: Susanne Moog <typo3@susannemoog.de>
typo3/sysext/core/Classes/TimeTracker/TimeTracker.php
typo3/sysext/frontend/Classes/View/AdminPanelView.php
typo3/sysext/t3skin/stylesheets/standalone/admin_panel.css

index 4f998b6..ef42fc8 100755 (executable)
@@ -298,7 +298,7 @@ class TimeTracker {
                        $out .= '
                                <th><strong>' . $row . '</strong></th>';
                }
-               $out = '<tr>' . $out . '</tr>';
+               $out = '<tr class="typo3-adminPanel-itemRow">' . $out . '</tr>';
                $flag_tree = $this->printConf['flag_tree'];
                $flag_messages = $this->printConf['flag_messages'];
                $flag_content = $this->printConf['flag_content'];
@@ -314,6 +314,7 @@ class TimeTracker {
                        } else {
                                $logRowClass = $c % 2 ? 'line-odd' : 'line-even';
                        }
+                       $logRowClass .= ' typo3-adminPanel-section-content-title';
                        $item = '';
                        // If first...
                        if (!$c) {
@@ -382,10 +383,10 @@ class TimeTracker {
                                $msg = implode($msgArr, '<hr />');
                        }
                        $item .= '<td valign="top" class="' . $logRowClass . '" style="text-align:left;">' . $this->fw($msg) . '</td>';
-                       $out .= '<tr>' . $item . '</tr>';
+                       $out .= '<tr class="typo3-adminPanel-itemRow">' . $item . '</tr>';
                        $c++;
                }
-               $out = '<table class="admin-panel-table typo3-adminPanel-tsLog">' . $out . '</table>';
+               $out = '<table class="typo3-adminPanel-table typo3-adminPanel-tsLog">' . $out . '</table>';
                return $out;
        }
 
index 981a73d..1f69867 100755 (executable)
@@ -252,11 +252,11 @@ class AdminPanelView {
                $row = $this->extGetLL('adminPanelTitle') . ': <span class="typo3-adminPanel-beuser">' . htmlspecialchars($GLOBALS['BE_USER']->user['username']) . '</span>';
                $isVisible = $GLOBALS['BE_USER']->uc['TSFE_adminConfig']['display_top'];
                $cssClassName = 'typo3-adminPanel-panel-' . ($isVisible ? 'open' : 'closed');
-               $header = '<tr class="typo3-adminPanel-header">' . '<td colspan="2" id="typo3-adminPanel-header" class="' . $cssClassName . '">' . '<span class="typo3-adminPanel-header-title">' . $row . '</span>' . $this->linkSectionHeader('top', '<span class="typo3-adminPanel-header-button"></span>', 'typo3-adminPanel-header-buttonWrapper') . '<input type="hidden" name="TSFE_ADMIN_PANEL[display_top]" value="' . $GLOBALS['BE_USER']->uc['TSFE_adminConfig']['display_top'] . '" /></td>' . '</tr>';
+               $header = '<tr class="typo3-adminPanel-header">' . '<td colspan="2" id="typo3-adminPanel-header" class="' . $cssClassName . '">' . '<span class="typo3-adminPanel-header-title">' . $row . '</span>' . $this->linkSectionHeader('top', '<span class="typo3-adminPanel-header-button fa"></span>', 'typo3-adminPanel-header-buttonWrapper') . '<input type="hidden" name="TSFE_ADMIN_PANEL[display_top]" value="' . $GLOBALS['BE_USER']->uc['TSFE_adminConfig']['display_top'] . '" /></td>' . '</tr>';
                if ($moduleContent && $this->extNeedUpdate) {
                        $footer = '<tr class="typo3-adminPanel-footer">
                                                <td colspan="2">
-                                                       <input class="typo3-adminPanel-update" type="submit" value="' . $this->extGetLL('update') . '" />
+                                                       <input class="typo3-adminPanel-update btn btn-default" type="submit" value="' . $this->extGetLL('update') . '" />
                                                </td>
                                        </tr>';
                }
@@ -278,8 +278,8 @@ class AdminPanelView {
 <!--
        TYPO3 Admin panel start
 -->
-<a id="TSFE_ADMIN"></a>
-<form id="TSFE_ADMIN_PANEL_FORM" name="TSFE_ADMIN_PANEL_FORM" action="' . htmlspecialchars(GeneralUtility::getIndpEnv('TYPO3_REQUEST_SCRIPT')) . '#TSFE_ADMIN" method="get" onsubmit="document.forms.TSFE_ADMIN_PANEL_FORM[\'TSFE_ADMIN_PANEL[DUMMY]\'].value=Math.random().toString().substring(2,8)">' . $query . '<table class="typo3-adminPanel">' . $header . $moduleContent . $footer . '</table></form>';
+<a id="TSFE_ADMIN_PANEL"></a>
+<form id="TSFE_ADMIN_PANEL_FORM" name="TSFE_ADMIN_PANEL_FORM" action="' . htmlspecialchars(GeneralUtility::getIndpEnv('TYPO3_REQUEST_SCRIPT')) . '#TSFE_ADMIN_PANEL" method="get" onsubmit="document.forms.TSFE_ADMIN_PANEL_FORM[\'TSFE_ADMIN_PANEL[DUMMY]\'].value=Math.random().toString().substring(2,8)">' . $query . '<table class="typo3-adminPanel">' . $header . $moduleContent . $footer . '</table></form>';
                if ($GLOBALS['BE_USER']->uc['TSFE_adminConfig']['display_top']) {
                        $out .= '<script type="text/javascript" src="typo3/sysext/backend/Resources/Public/JavaScript/jsfunc.evalfield.js"></script>';
                        $out .= '<script type="text/javascript">/*<![CDATA[*/' . GeneralUtility::minifyJavaScript('
@@ -396,7 +396,7 @@ class AdminPanelView {
                        $options .= '<option value="0"' . ($levels == 0 ? ' selected="selected"' : '') . '>' . $this->extGetLL('div_Levels_0') . '</option>';
                        $options .= '<option value="1"' . ($levels == 1 ? ' selected="selected"' : '') . '>' . $this->extGetLL('div_Levels_1') . '</option>';
                        $options .= '<option value="2"' . ($levels == 2 ? ' selected="selected"' : '') . '>' . $this->extGetLL('div_Levels_2') . '</option>';
-                       $out .= $this->extGetItem('cache_clearLevels', '<select id="cache_clearLevels" name="TSFE_ADMIN_PANEL[cache_clearCacheLevels]">' . $options . '</select>' . '<input type="hidden" name="TSFE_ADMIN_PANEL[cache_clearCacheId]" value="' . $GLOBALS['TSFE']->id . '" /> <input type="submit" value="' . $this->extGetLL('update') . '" />');
+                       $out .= $this->extGetItem('cache_clearLevels', '<select id="cache_clearLevels" name="TSFE_ADMIN_PANEL[cache_clearCacheLevels]">' . $options . '</select>' . '<input type="hidden" name="TSFE_ADMIN_PANEL[cache_clearCacheId]" value="' . $GLOBALS['TSFE']->id . '" /> <input class="btn btn-default" type="submit" value="' . $this->extGetLL('update') . '" />');
                        // Generating tree:
                        $depth = (int)$this->extGetFeAdminValue('cache', 'clearCacheLevels');
                        $outTable = '';
@@ -406,9 +406,10 @@ class AdminPanelView {
                        foreach ($GLOBALS['BE_USER']->extPageInTreeInfo as $row) {
                                $outTable .= '<tr>' . '<td><span style="width: ' . ($depth + 1 - $row[2]) * 18 . 'px; height: 1px; display: inline-block;"></span>' . IconUtility::getSpriteIcon('apps-pagetree-page-default') . htmlspecialchars($row[1]) . '</td><td>' . $GLOBALS['BE_USER']->extGetNumberOfCachedPages($row[0]) . '</td></tr>';
                        }
-                       $outTable = '<br /><table>' . $outTable . '</table>';
-                       $outTable .= '<input type="submit" name="TSFE_ADMIN_PANEL[action][clearCache]" value="' . $this->extGetLL('cache_doit') . '" />';
-                       $out .= $this->extGetItem('cache_cacheEntries', $outTable);
+                       $outTable = '<br /><table class="typo3-adminPanel-table"><thead><tr><th colspan="2">' . $this->extGetLL('cache_cacheEntries') . '</th></tr></thead>' . $outTable . '</table>';
+                       $outTable .= '<span class="fa fa-bolt clear-cache-icon"><!-- --></span><input class="btn btn-default clear-cache" type="submit" name="TSFE_ADMIN_PANEL[action][clearCache]" value="' . $this->extGetLL('cache_doit') . '" />';
+
+                       $out .= $this->extGetItem('', $outTable);
                }
                return $out;
        }
@@ -430,7 +431,7 @@ class AdminPanelView {
                        $out .= $this->extGetItem('edit_displayIcons', '', '<input type="hidden" name="TSFE_ADMIN_PANEL[edit_displayIcons]" value="0" /><input type="checkbox" id="edit_displayIcons" name="TSFE_ADMIN_PANEL[edit_displayIcons]" value="1"' . ($GLOBALS['BE_USER']->uc['TSFE_adminConfig']['edit_displayIcons'] ? ' checked="checked"' : '') . ' />');
                        $out .= $this->extGetItem('', $this->ext_makeToolBar());
                        if (!GeneralUtility::_GP('ADMCMD_view')) {
-                               $out .= $this->extGetItem('', '<a href="#" onclick="' . htmlspecialchars(('
+                               $out .= $this->extGetItem('', '<a class="btn btn-default" href="#" onclick="' . htmlspecialchars(('
                                                if (parent.opener && parent.opener.top && parent.opener.top.TS) {
                                                        parent.opener.top.fsMod.recentIds["web"]=' . (int)$GLOBALS['TSFE']->page['uid'] . ';
                                                        if (parent.opener.top.content && parent.opener.top.content.nav_frame && parent.opener.top.content.nav_frame.refresh_nav) {
@@ -471,7 +472,7 @@ class AdminPanelView {
                        $GLOBALS['TT']->printConf['flag_messages'] = $this->extGetFeAdminValue('tsdebug', 'displayMessages');
                        $GLOBALS['TT']->printConf['flag_content'] = $this->extGetFeAdminValue('tsdebug', 'displayContent');
                        $GLOBALS['TT']->printConf['flag_queries'] = $this->extGetFeAdminValue('tsdebug', 'displayQueries');
-                       $out .= '<tr><td colspan="2">' . $GLOBALS['TT']->printTSlog() . '</td></tr>';
+                       $out .= '<tr><td class="typo3-adminPanel-table-wrapper" colspan="2">' . $GLOBALS['TT']->printTSlog() . '</td></tr>';
                }
                return $out;
        }
@@ -526,7 +527,7 @@ class AdminPanelView {
                                                </tr>';
                        }
                        $out .= $table;
-                       $out = '<tr><td colspan="2"><table class="admin-panel-table">' . $out . '</table></td></tr>';
+                       $out = '<tr><td class="typo3-adminPanel-table-wrapper" colspan="2"><table class="typo3-adminPanel-table">' . $out . '</table></td></tr>';
                }
 
                $out = $head . $out;
@@ -564,7 +565,7 @@ class AdminPanelView {
        public function linkSectionHeader($sectionSuffix, $sectionTitle, $className = '') {
                $onclick = 'document.TSFE_ADMIN_PANEL_FORM[' . GeneralUtility::quoteJSvalue('TSFE_ADMIN_PANEL[display_' . $sectionSuffix . ']') . '].value=' . ($GLOBALS['BE_USER']->uc['TSFE_adminConfig']['display_' . $sectionSuffix] ? '0' : '1') . ';document.TSFE_ADMIN_PANEL_FORM.submit();return false;';
                $content = '<div class="typo3-adminPanel-label">
-                                               <a href="javascript:void(0)" onclick="' . htmlspecialchars($onclick) . '"' . ($className ? ' class="' . htmlspecialchars($className) . '"' : '') . '>'
+                                               <a href="javascript:void(0)" onclick="' . htmlspecialchars($onclick) . '"' . ($className ? ' class="fa ' . htmlspecialchars($className) . '"' : '') . '>'
                        . $sectionTitle .
                        '</a>
                </div>';
@@ -577,7 +578,7 @@ class AdminPanelView {
         *
         * @param string $title Key to label
         * @param string $content The HTML content for the forth table cell.
-        * @param string $checkbox The HTML for a checkbox or hidden fields
+        * @param string $checkbox The HTML for a checkbox or hidden fields.
         * @return string HTML table row.
         * @see extGetHead()
         */
@@ -605,22 +606,22 @@ class AdminPanelView {
                $returnUrl = GeneralUtility::getIndpEnv('REQUEST_URI');
 
                $icon = IconUtility::getSpriteIcon('actions-document-history-open', array('title' => $this->extGetLL('edit_recordHistory', FALSE)));
-               $toolBar = '<a href="' . htmlspecialchars(BackendUtility::getModuleUrl('record_history', array('element' => 'pages:' . $id, 'returnUrl' => $returnUrl))) . '#latest">' . $icon . '</a>';
+               $toolBar = '<a class="t3-icon btn btn-default" href="' . htmlspecialchars(BackendUtility::getModuleUrl('record_history', array('element' => 'pages:' . $id, 'returnUrl' => $returnUrl))) . '#latest">' . $icon . '</a>';
                if ($perms & Permission::CONTENT_EDIT && $langAllowed) {
                        $params = '';
                        if ($GLOBALS['TSFE']->sys_language_uid) {
                                $params = '&sys_language_uid=' . $GLOBALS['TSFE']->sys_language_uid;
                        }
                        $icon = IconUtility::getSpriteIcon('actions-document-new', array('title' => $this->extGetLL('edit_newContentElement', FALSE)));
-                       $toolBar .= '<a href="' . htmlspecialchars($newContentWizScriptPath . 'id=' . $id . $params . '&returnUrl=' . rawurlencode($returnUrl)) . '">' . $icon . '</a>';
+                       $toolBar .= '<a class="t3-icon btn btn-default" href="' . htmlspecialchars($newContentWizScriptPath . 'id=' . $id . $params . '&returnUrl=' . rawurlencode($returnUrl)) . '">' . $icon . '</a>';
                }
                if ($perms & Permission::PAGE_EDIT) {
                        $icon = IconUtility::getSpriteIcon('actions-document-move', array('title' => $this->extGetLL('edit_move_page', FALSE)));
-                       $toolBar .= '<a href="' . htmlspecialchars(BackendUtility::getModuleUrl('move_element', ['table' => 'pages', 'uid' => $id, 'returnUrl' => $returnUrl])) . '">' . $icon . '</a>';
+                       $toolBar .= '<a class="t3-icon btn btn-default" href="' . htmlspecialchars(BackendUtility::getModuleUrl('move_element', ['table' => 'pages', 'uid' => $id, 'returnUrl' => $returnUrl])) . '">' . $icon . '</a>';
                }
                if ($perms & Permission::PAGE_NEW) {
                        $icon = IconUtility::getSpriteIcon('actions-page-new', array('title' => $this->extGetLL('edit_newPage', FALSE)));
-                       $toolBar .= '<a href="' . htmlspecialchars(BackendUtility::getModuleUrl('db_new', ['id' => $id, 'pagesOnly' => 1, 'returnUrl' => $returnUrl])) . '">' . $icon . '</a>';
+                       $toolBar .= '<a class="t3-icon btn btn-default" href="' . htmlspecialchars(BackendUtility::getModuleUrl('db_new', ['id' => $id, 'pagesOnly' => 1, 'returnUrl' => $returnUrl])) . '">' . $icon . '</a>';
                }
                if ($perms & Permission::PAGE_EDIT) {
                        $icon = IconUtility::getSpriteIcon('actions-document-open', array('title' => $this->extGetLL('edit_editPageProperties', FALSE)));
@@ -629,7 +630,7 @@ class AdminPanelView {
                                'noView' => 1,
                                'returnUrl' => $returnUrl
                        ));
-                       $toolBar .= '<a href="' . htmlspecialchars($url) . '">' . $icon . '</a>';
+                       $toolBar .= '<a class="t3-icon btn btn-default" href="' . htmlspecialchars($url) . '">' . $icon . '</a>';
                        if ($GLOBALS['TSFE']->sys_language_uid && $langAllowed) {
                                $row = $GLOBALS['TYPO3_DB']->exec_SELECTgetSingleRow(
                                        'uid,pid,t3ver_state',
@@ -656,11 +657,10 @@ class AdminPanelView {
                                'returnUrl' => GeneralUtility::getIndpEnv('REQUEST_URI')
                        );
                        $icon = IconUtility::getSpriteIcon('actions-system-list-open', array('title' => $this->extGetLL('edit_db_list', FALSE)));
-                       $toolBar .= '<a href="' . htmlspecialchars(BackendUtility::getModuleUrl('web_list', $urlParams)) . '">' . $icon . '</a>';
+                       $toolBar .= '<a class="t3-icon btn btn-default" href="' . htmlspecialchars(BackendUtility::getModuleUrl('web_list', $urlParams)) . '">' . $icon . '</a>';
                }
 
-               $toolBar = '<div class="toolbar">' . $toolBar . '</div>';
-
+               $toolBar = '<div class="toolbar btn-group" role="group">' . $toolBar . '</div>';
                return $toolBar;
        }
 
index 7f70d5e..34d2d6b 100644 (file)
   font-weight: normal;
   font-style: normal;
 }
-.fa {
+.fa, .fa:before {
   display: inline-block;
   font: normal normal normal 14px/1 FontAwesome;
-  font-size: inherit;
+  font-size: 15px;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 .fa-info-circle:before {
     content: "\f05a";
 }
-.t3-icon {
-       display: inline-block;
-       position: relative;
-       overflow: hidden;
-       color:#000;
-       margin:0 5px;
+.fa-caret-down:before {
+    content: "\f0d7";
+}
+.fa-caret-up:before {
+    content: "\f0d8";
+}
+.fa-bolt:before {
+       content: "\f0e7";
+}
+
+/**
+ * General Styles
+ **/
+
+*:before, *:after {
+       -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+       box-sizing: border-box;
 }
 
+/**
+ * Frontend Editing Styles
+ **/
+
 .typo3-editPanel {
        background: #ccc;
 }
        opacity: 0.2;
 }
 
+/**
+ * Admin Panel Styles
+ **/
+
 #TSFE_ADMIN_PANEL_FORM {
        background-color: #fff;
        box-shadow: 0 3px 15px #808080;
        margin: 0;
        padding: 0;
        z-index: 10002;
+       border-top-right-radius: 4px;
+       border-top-left-radius: 4px;
 }
 
 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel {
-       border: 1px solid black;
+       border: 1px solid #ccc;
        border-spacing: 0;
        border-collapse: separate;
+       border-top-right-radius: 4px;
+       border-top-left-radius: 4px;
        margin: 0;
        min-width: 315px;
        padding: 0;
 #TSFE_ADMIN_PANEL_FORM table,
 #TSFE_ADMIN_PANEL_FORM a {
        color: black;
-       font-family: Arial, sans-serif;
+       font-family: Verdana, Arial, sans-serif;
        font-size: 12px;
        text-decoration: none;
 }
 
-#TSFE_ADMIN_PANEL_FORM td {
-       /*padding: 10px;*/
+#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-header td {
+       border-top-right-radius: 4px;
+       border-top-left-radius: 4px;
+       cursor: move;
 }
 
 #TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-header td,
 #TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-footer td {
-       background-image: linear-gradient(center top, #555 10%, #444547 90%);
-       background-color: #555;
+       background-color: #222;
        color: white;
-       font-weight: bold;
-       padding-bottom: 5px;
-}
-
-#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-header td {
-       cursor: move;
 }
 
 #TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-footer td {
        color: #fff;
 }
 
+
+#TSFE_ADMIN_PANEL_FORM tr .btn {
+       margin-top: 6px;
+       margin-bottom: 6px;
+}
+
 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-header-title {
        float: left;
+       padding-top: 11px;
+       padding-left: 15px;
 }
 
 #TSFE_ADMIN_PANEL_FORM input.typo3-adminPanel-update {
        margin-left: 10px;
 }
 
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-panel-open .typo3-adminPanel-header-button,
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-panel-closed .typo3-adminPanel-header-button {
-       background: url(../../images/arrows/adminpanel-down.png) no-repeat;
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-panel-open .typo3-adminPanel-header-button:before,
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-panel-closed .typo3-adminPanel-header-button:before {
        display: inline-block;
        float: right;
-       height: 19px;
-       width: 19px;
+       padding: 10px 15px;
+       font-size: 16px;
+       content: "\f106";
 }
 
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-panel-closed .typo3-adminPanel-header-button {
-       background: url(../../images/arrows/adminpanel-up.png) no-repeat;
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-panel-closed .typo3-adminPanel-header-button:before {
+       content: "\f107";
 }
 
 #TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title td {
-       background-color: #e2e0e0;
-       border-bottom: 1px solid #ccc;
-       border-top: 1px solid #ccc;
+       background-color: #ddd;
+       border-bottom: 1px solid #888;
+       border-top: 1px solid #888;
        clear: left;
        margin: 0;
        padding: 0;
        line-height: 25px;
 }
 
+#TSFE_ADMIN_PANEL_FORM label {
+       display: inline;
+       line-height: 16px;
+       font-weight: 500;
+}
+
 #TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title td a .typo3-adminPanel-label {
-       font-weight: bold;
        padding-top: 4px;
        white-space: nowrap;
 }
 
+#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title td {
+       padding-top: 4px;
+       padding-bottom:4px;
+}
+
 #TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title td:hover {
-       background-color: #7e7e7e;
-       border-color: black;
        color: #fff;
+       background-color: #7e7e7e;
 }
 
 #TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title td:hover a {
 
 #TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title .typo3-adminPanel-section-open,
 #TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title .typo3-adminPanel-section-closed {
-       background: url(../../images/arrows/module-menu-down.png) no-repeat 12px 9px;
        display: inline-block;
-       padding-left: 26px;
        width: 100%;
+       padding-left: 26px;
 }
 
-#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title .typo3-adminPanel-section-closed {
-       background: url(../../images/arrows/module-menu-right.png) no-repeat 12px 7px;
-}
-
-#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title td:hover a.typo3-adminPanel-section-open {
-       background-image: url(../../images/arrows/module-menu-down-alt.png);
+#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title .typo3-adminPanel-section-open:before,
+#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title .typo3-adminPanel-section-closed:before {
+       margin-left: -13px;
+       padding-right: 13px;
+       font-size: 14px;
+       content: "\f0d8";
 }
 
-#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title td:hover a.typo3-adminPanel-section-closed {
-       background-image: url(../../images/arrows/module-menu-right-alt.png);
+#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title .typo3-adminPanel-section-closed:before {
+       content: "\f0d7";
 }
 
 #TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-itemRow td {
-       padding: 5px 15px;
+       padding: 7px 15px;
+       line-height: 16px;
 }
 
 #TSFE_ADMIN_PANEL_FORM td.typo3-adminPanel-section-content {
        padding: 1px;
 }
 
+#TSFE_ADMIN_PANEL_FORM td.typo3-adminPanel-section-content label {
+       padding-right: 5px;
+}
+
 #TSFE_ADMIN_PANEL_FORM #typo3-adminPanel-tsLog {
        border: 1px solid #7e7e7e;
        border-spacing: 0;
 }
 
-#TSFE_ADMIN_PANEL_FORM .admin-panel-table {
+#TSFE_ADMIN_PANEL_FORM .clear-cache-icon:before {
+       position: absolute;
+       left: 11px;
+       top: -11px;
+}
+
+#TSFE_ADMIN_PANEL_FORM .btn.clear-cache{
+       padding-left: 25px
+}
+
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
+       border: 1px solid #ccc;
 }
 
-#TSFE_ADMIN_PANEL_FORM .admin-panel-table tr {
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table tr {
        margin: 0;
        padding: 0;
        vertical-align: inherit;
        border-color: inherit;
 }
 
-#TSFE_ADMIN_PANEL_FORM .admin-panel-table td {
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table td {
        margin: 0;
        vertical-align: inherit;
        border-color: inherit;
-       padding: 5px;
+       padding: 5px;
        text-align: left;
        white-space: nowrap;
 }
 
-#TSFE_ADMIN_PANEL_FORM .admin-panel-table th {
-       background-color: #7e7e7e;
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table th {
+       padding: 10px 10px 10px 15px;
+       border-bottom: 1px solid #aaa;
+       text-align: left;
+       background-color: #ededed;
 }
 
-#TSFE_ADMIN_PANEL_FORM .admin-panel-table th span[style] {
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table th span[style] {
        color: #fff !important;
 }
 
        background-color: #fcd3cf;
 }
 
-#TSFE_ADMIN_PANEL_FORM .admin-panel-table .line-odd,
-#TSFE_ADMIN_PANEL_FORM .admin-panel-table .line-even {
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table-wrapper {
+       padding: 10px 0;
+}
+
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table .line-odd,
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table .line-even {
        background-color: #f0f0f0;
        text-align: left;
        vertical-align: top;
 }
 
-#TSFE_ADMIN_PANEL_FORM .admin-panel-table .line-even {
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table .line-even {
        background-color: #dedede;
 }
 
 }
 
 /**
- * General Form Styles
+ * General Form and Button Styles
  **/
-#TSFE_ADMIN_PANEL_FORM input[type="submit"] {
-       background-color: #f6f6f6;
-       background-image: url('../../images/backgrounds/button-hover.png');
-       background-image: linear-gradient(center top, #f6f6f6 10%, #c8c8c8 90%);
-       background-position: center bottom;
-       background-repeat: repeat-x;
-       border: 1px solid #737c7c;
-       color: #434343;
-       cursor: pointer;
-       padding: 3px;
-       margin-top: 2px;
+
+.t3-icon {
+       display: inline-block;
+       position: relative;
+       vertical-align: middle;
+       text-align: center;
+}
+
+.btn .t3-icon {
+       margin: 0;
 }
 
 #TSFE_ADMIN_PANEL_FORM input,
 #TSFE_ADMIN_PANEL_FORM select {
        position: static;
-       margin: 0 5px;
        padding: 0;
 }
 
 #TSFE_ADMIN_PANEL_FORM input[type="checkbox"] {
+       display: block;
+       float: left;
+       margin-top: 1px;
        margin-left: 0;
+       margin-right: 5px;
+}
+
+
+#TSFE_ADMIN_PANEL_FORM input[type="text"], #TSFE_ADMIN_PANEL_FORM select {
+       display: block;
+       width: 100%;
+       margin-top: 5px;
+       padding: 6px;
+       box-sizing: border-box;
+}
+
+#TSFE_ADMIN_PANEL_FORM input {
+       font-family: inherit;
+       font-size: inherit;
+       line-height: inherit;
+       color: inherit;
+       margin: 0;
 }
+
+#TSFE_ADMIN_PANEL_FORM .btn {
+       display: inline-block;
+       margin-bottom: 0;
+       padding: 6px 8px;
+       border: 1px solid transparent;
+       border-radius: 2px;
+       font-weight: normal;
+       font-size: 12px;
+       line-height: 1.5;
+       text-align: center;
+       vertical-align: middle;
+       touch-action: manipulation;
+       cursor: pointer;
+       background-image: none;
+       white-space: nowrap;
+       -webkit-user-select: none;
+       -moz-user-select: none;
+       -ms-user-select: none;
+       user-select: none;
+}
+
+#TSFE_ADMIN_PANEL_FORM .btn:hover {
+       background-color:#c4c4c4;
+}
+
+#TSFE_ADMIN_PANEL_FORM .btn-default {
+       color: #333333;
+       background-color: #eeeeee;
+       border-color: #bbbbbb;
+       cursor: pointer;
+}
+
+#TSFE_ADMIN_PANEL_FORM .btn-group {
+       position: relative;
+       display: inline-block;
+       vertical-align: middle;
+}
+
+#TSFE_ADMIN_PANEL_FORM .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+       border-radius:0;
+}
+
+#TSFE_ADMIN_PANEL_FORM .btn-group > .btn:first-child {
+       margin-left: 0;
+}
+
+#TSFE_ADMIN_PANEL_FORM input[type="text"]  {
+       font-size: 12px;
+       line-height: 1.5;
+       color: #333333;
+       background-color: #fefefe;
+       background-image: none;
+       border: 1px solid #bbbbbb;
+       border-radius: 2px;
+       -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+       box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+       -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+       -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+       transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+}
\ No newline at end of file