[TASK] Cleanup Topbar 76/34776/19
authorBenjamin Kott <benjamin.kott@outlook.com>
Sat, 29 Nov 2014 16:44:13 +0000 (17:44 +0100)
committerWouter Wolters <typo3@wouterwolters.nl>
Mon, 1 Dec 2014 12:14:42 +0000 (13:14 +0100)
* Add sitename to topbar
* Remove TYPO3 name from topbar shape
* Align TYPO3 logo with module navigation
* Adjust livesearch styling
* Adjust help menu
* Adjust user menu
* Adjust workspace menu
* Adjust clear cache menu
* Adjust open docs menu
* Adjust bookmarks menu
* Add workspace highlight corresponding to the icon color
* Remove duplicated css for app-icon in module menu
* Refactor topbar

Resolves: #63158
Resolves: #63160
Resolves: #63161
Releases: master
Change-Id: I5e34b41c0317e2720291503d97954481abb0356d
Reviewed-on: http://review.typo3.org/34776
Reviewed-by: Felix Kopp <felix-source@phorax.com>
Tested-by: Felix Kopp <felix-source@phorax.com>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
28 files changed:
typo3/gfx/typo3-topbar@2x.png
typo3/sysext/backend/Classes/Backend/ToolbarItems/ClearCacheToolbarItem.php
typo3/sysext/backend/Classes/Backend/ToolbarItems/HelpToolbarItem.php
typo3/sysext/backend/Classes/Backend/ToolbarItems/LiveSearchToolbarItem.php
typo3/sysext/backend/Classes/Backend/ToolbarItems/ShortcutToolbarItem.php
typo3/sysext/backend/Classes/Backend/ToolbarItems/UserToolbarItem.php
typo3/sysext/backend/Classes/View/LogoView.php
typo3/sysext/backend/Resources/Private/Templates/Backend/Main.html
typo3/sysext/backend/Resources/Private/Templates/ModuleMenu/Main.html
typo3/sysext/backend/Resources/Public/Css/structure/topbar.css [deleted file]
typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ShortcutMenu.js
typo3/sysext/backend/Resources/Public/JavaScript/livesearch.js
typo3/sysext/backend/Resources/Public/JavaScript/modulemenu.js
typo3/sysext/opendocs/Classes/Backend/ToolbarItems/OpendocsToolbarItem.php
typo3/sysext/opendocs/Resources/Public/Css/opendocs.css [deleted file]
typo3/sysext/opendocs/Resources/Public/JavaScript/Toolbar/OpendocsMenu.js
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_main_content.less
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_module_menu.less
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_topbar.less
typo3/sysext/t3skin/Resources/Private/Styles/bootstrap/variables.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css
typo3/sysext/t3skin/extjs/xtheme-t3skin.css
typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-background-left.png [deleted file]
typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-background-right.png [deleted file]
typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-background.gif [deleted file]
typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-mask.png [deleted file]
typo3/sysext/workspaces/Classes/Backend/ToolbarItems/WorkspaceSelectorToolbarItem.php
typo3/sysext/workspaces/Resources/Public/JavaScript/Toolbar/WorkspacesMenu.js

index a257576..05f7a77 100644 (file)
Binary files a/typo3/gfx/typo3-topbar@2x.png and b/typo3/gfx/typo3-topbar@2x.png differ
index 3d72180..eb2792e 100644 (file)
@@ -137,11 +137,11 @@ class ClearCacheToolbarItem implements ToolbarItemInterface {
         */
        public function getDropDown() {
                $result = array();
-               $result[] = '<ul>';
+               $result[] = '<ul class="dropdown-list">';
                foreach ($this->cacheActions as $cacheAction) {
                        $title = $cacheAction['description'] ?: $cacheAction['title'];
                        $result[] = '<li>';
-                       $result[] = '<a href="' . htmlspecialchars($cacheAction['href']) . '" title="' . htmlspecialchars($title) . '">';
+                       $result[] = '<a class="dropdown-list-link" href="' . htmlspecialchars($cacheAction['href']) . '" title="' . htmlspecialchars($title) . '">';
                        $result[] = $cacheAction['icon'] . ' ' . htmlspecialchars($cacheAction['title']);
                        $result[] = '</a>';
                        $result[] = '</li>';
index 288dabd..de57df3 100644 (file)
@@ -68,7 +68,7 @@ class HelpToolbarItem implements ToolbarItemInterface {
         */
        public function getDropDown() {
                $dropdown = array();
-               $dropdown[] = '<ul>';
+               $dropdown[] = '<ul class="dropdown-list">';
                foreach ($this->helpModuleMenu->getChildren() as $module) {
                        /** @var BackendModule $module */
                        $moduleIcon = $module->getIcon();
@@ -80,9 +80,9 @@ class HelpToolbarItem implements ToolbarItemInterface {
                                . ' data-navigationframescript="' . $module->getNavigationFrameScript() . '"'
                                . ' data-navigationframescriptparameters="' . $module->getNavigationFrameScriptParameters() . '"'
                                . '>';
-                       $dropdown[] = '<a title="' .$module->getDescription() . '" href="' . $module->getLink() . '" class="modlink">';
-                       $dropdown[] = '<span class="typo3-app-icon"><span><span>' . ($moduleIcon['html'] ?: $moduleIcon['html']) . '</span></span></span>';
-                       $dropdown[] = '<span class="submodule-label">' . $module->getTitle() . '</span>';
+                       $dropdown[] = '<a title="' . htmlspecialchars($module->getDescription()) . '" href="' . $module->getLink() . '" class="dropdown-list-link modlink">';
+                       $dropdown[] = '<span class="submodule-icon typo3-app-icon"><span><span>' . ($moduleIcon['html'] ?: $moduleIcon['html']) . '</span></span></span>';
+                       $dropdown[] = '<span class="submodule-label">' . htmlspecialchars($module->getTitle()) . '</span>';
                        $dropdown[] = '</a>';
                        $dropdown[] = '</li>';
                }
index 8992a03..5f37056 100644 (file)
@@ -58,11 +58,9 @@ class LiveSearchToolbarItem implements ToolbarItemInterface {
         */
        public function getItem() {
                return '
-                       <form class="navbar-form" role="search">
-                               <div class="live-search-wrapper">
-                                       <div class="form-group">
-                                               <input type="text" class="form-control" placeholder="Search" id="live-search-box">
-                                       </div>
+                       <form class="typo3-topbar-navigation-search live-search-wrapper" role="search">
+                               <div class="form-group">
+                                       <input type="text" class="form-control" placeholder="Search" id="live-search-box">
                                </div>
                        </form>
                ';
index 6dac09a..4a04d08 100644 (file)
@@ -121,59 +121,54 @@ class ShortcutToolbarItem implements ToolbarItemInterface {
                $shortcutGroup = $languageService->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.bookmarksGroup', TRUE);
                $shortcutEdit = $languageService->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.bookmarksEdit', TRUE);
                $shortcutDelete = $languageService->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.bookmarksDelete', TRUE);
-               $groupIcon = IconUtility::getSpriteIcon('apps-pagetree-folder-default', array('title' => $shortcutGroup));
-               $editIcon = '<a href="#">' . IconUtility::getSpriteIcon('actions-document-open', array('title' => $shortcutEdit)) . '</a>';
-               $deleteIcon = '<a href="#">' . IconUtility::getSpriteIcon('actions-edit-delete', array('title' => $shortcutDelete)) . '</a>';
+               $editIcon = '<a href="#" class="dropdown-list-link-edit shortcut-edit">' . IconUtility::getSpriteIcon('actions-document-open', array('title' => $shortcutEdit)) . '</a>';
+               $deleteIcon = '<a href="#" class="dropdown-list-link-delete shortcut-delete">' . IconUtility::getSpriteIcon('actions-edit-delete', array('title' => $shortcutDelete)) . '</a>';
 
-               $shortcutMenu[] = '<table><tbody>';
+               $shortcutMenu[] = '<ul class="dropdown-list">';
 
                // Render shortcuts with no group (group id = 0) first
                $noGroupShortcuts = $this->getShortcutsByGroup(0);
                foreach ($noGroupShortcuts as $shortcut) {
+
                        $shortcutMenu[] = '
-                               <tr class="shortcut" data-shortcutid="' . $shortcut['raw']['uid'] . '">
-                                       <td class="shortcut-label">
-                                               <a href="#" onclick="' . $shortcut['action'] . '; return false;">' .
-                                                       $shortcut['icon'] . ' ' .
-                                                       htmlspecialchars($shortcut['label']) .
-                                               '</a>
-                                       </td>
-                                       <td class="shortcut-edit">' . $editIcon . '</td>
-                                       <td class="shortcut-delete">' . $deleteIcon . '</td>
-                               </tr>';
+                               <li class="shortcut" data-shortcutid="' . $shortcut['raw']['uid'] . '">
+                                       <a class="dropdown-list-link dropdown-link-list-add-editdelete" href="#" onclick="' . htmlspecialchars($shortcut['action']) . '; return false;">' .
+                                               $shortcut['icon'] . ' ' .
+                                               htmlspecialchars($shortcut['label']) .
+                                       '</a>
+                                       ' . $editIcon . $deleteIcon . '
+                               </li>';
                }
                // Now render groups and the contained shortcuts
                $groups = $this->getGroupsFromShortcuts();
                krsort($groups, SORT_NUMERIC);
                foreach ($groups as $groupId => $groupLabel) {
                        if ($groupId != 0) {
-                               $shortcutGroup = '<tr><td class="dropdown-header shortcut-group typo3-module-menu-item" id="shortcut-group-' . $groupId . '" colspan="3">' .
-                                       $groupIcon . ' ' . $groupLabel .
-                                       '</td></tr>';
+                               $shortcutGroup = '';
+                               if (count($shortcutMenu) > 1) {
+                                       $shortcutGroup .= '<li class="divider"></li>';
+                               }
+                               $shortcutGroup .= '
+                                       <li class="dropdown-header" id="shortcut-group-' . $groupId . '">
+                                               ' . $groupLabel . '
+                                       </li>';
                                $shortcuts = $this->getShortcutsByGroup($groupId);
                                $i = 0;
                                foreach ($shortcuts as $shortcut) {
                                        $i++;
-                                       $firstRow = '';
-                                       if ($i == 1) {
-                                               $firstRow = ' first-row';
-                                       }
                                        $shortcutGroup .= '
-                                       <tr class="shortcut' . $firstRow . '" data-shortcutid="' . $shortcut['raw']['uid'] . '" data-shortcutgroup="' . $groupId . '">
-                                               <td class="shortcut-label">
-                                                       <a href="#" onclick="' . $shortcut['action'] . '; return false;">' .
-                                                               $shortcut['icon'] . ' ' .
-                                                               htmlspecialchars($shortcut['label']) .
-                                                       '</a>
-                                               </td>
-                                               <td class="shortcut-edit">' . $editIcon . '</td>
-                                               <td class="shortcut-delete">' . $deleteIcon . '</td>
-                                       </tr>';
+                                       <li class="shortcut" data-shortcutid="' . $shortcut['raw']['uid'] . '" data-shortcutgroup="' . $groupId . '">
+                                               <a class="dropdown-list-link dropdown-link-list-add-editdelete" href="#" onclick="' . $shortcut['action'] . '; return false;">' .
+                                                       $shortcut['icon'] . ' ' .
+                                                       htmlspecialchars($shortcut['label']) .
+                                               '</a>
+                                               ' . $editIcon . $deleteIcon . '
+                                       </li>';
                                }
                                $shortcutMenu[] = $shortcutGroup;
                        }
                }
-               $shortcutMenu[] = '</tbody></table>';
+               $shortcutMenu[] = '</ul>';
 
                if (count($shortcutMenu) == 2) {
                        // No shortcuts added yet, show a small help message how to add shortcuts
@@ -438,14 +433,24 @@ class ShortcutToolbarItem implements ToolbarItemInterface {
                }
 
                // build the form
-               $content = '<form class="shortcut-form">' .
-                       '<input type="text" name="shortcut-title" value="' . htmlspecialchars($selectedShortcut['label']) . '">';
-
-               $content .= '<select name="shortcut-group">';
+               $content = '
+                       <form class="shortcut-form" role="form">
+                               <div class="form-group">
+                                       <input type="text" class="form-control" name="shortcut-title" value="' . htmlspecialchars($selectedShortcut['label']) . '">
+                               </div>';
+
+               $content .= '
+                               <div class="form-group">
+                                       <select class="form-control" name="shortcut-group">';
                foreach ($shortcutGroups as $shortcutGroupId => $shortcutGroupTitle) {
                        $content .= '<option value="' . (int)$shortcutGroupId . '"' . ($selectedShortcutGroupId == $shortcutGroupId ? ' selected="selected"' : '') . '>' . htmlspecialchars($shortcutGroupTitle) . '</option>';
                }
-               $content .= '</select><input type="button" class="shortcut-form-save" value="Save"><input type="button" class="shortcut-form-cancel" value="Cancel"></form>';
+               $content .= '
+                                       </select>
+                               </div>
+                               <input type="button" class="btn btn-default shortcut-form-cancel" value="Cancel">
+                               <input type="button" class="btn btn-success shortcut-form-save" value="Save">
+                       </form>';
 
                $ajaxObj->addContent('data', $content);
        }
index 3b20df1..2330efd 100644 (file)
@@ -74,7 +74,7 @@ class UserToolbarItem implements ToolbarItemInterface {
                $languageService = $this->getLanguageService();
 
                $dropdown = array();
-               $dropdown[] = '<ul>';
+               $dropdown[] = '<ul class="dropdown-list">';
 
                /** @var BackendModuleRepository $backendModuleRepository */
                $backendModuleRepository = GeneralUtility::makeInstance(BackendModuleRepository::class);
@@ -92,9 +92,9 @@ class UserToolbarItem implements ToolbarItemInterface {
                                        . ' data-navigationframescript="' . $module->getNavigationFrameScript() . '"'
                                        . ' data-navigationframescriptparameters="' . $module->getNavigationFrameScriptParameters() . '"'
                                        . '>';
-                               $dropdown[] = '<a title="' .$module->getDescription() . '" href="' . $module->getLink() . '" class="modlink">';
-                               $dropdown[] = '<span class="typo3-app-icon"><span><span>' . ($moduleIcon['html'] ?: $moduleIcon['html']) . '</span></span></span>';
-                               $dropdown[] = '<span class="submodule-label">' . $module->getTitle() . '</span>';
+                               $dropdown[] = '<a title="' . htmlspecialchars($module->getDescription()) . '" href="' . $module->getLink() . '" class="dropdown-list-link modlink">';
+                               $dropdown[] = '<span class="submodule-icon typo3-app-icon"><span><span>' . ($moduleIcon['html'] ?: $moduleIcon['html']) . '</span></span></span>';
+                               $dropdown[] = '<span class="submodule-label">' . htmlspecialchars($module->getTitle()) . '</span>';
                                $dropdown[] = '</a>';
                                $dropdown[] = '</li>';
                        }
@@ -103,8 +103,8 @@ class UserToolbarItem implements ToolbarItemInterface {
 
                // Logout button
                $buttonLabel = 'LLL:EXT:lang/locallang_core.xlf:' . ($backendUser->user['ses_backuserid'] ? 'buttons.exit' : 'buttons.logout');
-               $dropdown[] = '<li>';
-               $dropdown[] = '<a href="logout.php" target="_top">';
+               $dropdown[] = '<li class="reset-dropdown">';
+               $dropdown[] = '<a href="logout.php" class="btn btn-danger pull-right" target="_top"><i class="fa fa-power-off"></i> ';
                $dropdown[] = $languageService->sL($buttonLabel, TRUE);
                $dropdown[] = '</a>';
                $dropdown[] = '</li>';
index e860dce..691b0d6 100644 (file)
@@ -57,7 +57,7 @@ class LogoView {
                }
 
                $logoTag = '<img src="' . $imgUrl . '" width="' . $width . '" height="' . $height . '" title="TYPO3 Content Management System" alt="" />';
-               return '<a href="' . TYPO3_URL_GENERAL . '" target="_blank">' . $logoTag . '</a>';
+               return '<a class="typo3-topbar-site-logo" href="' . htmlspecialchars(TYPO3_URL_GENERAL) . '" target="_blank">' . $logoTag . '</a> <span class="typo3-topbar-site-name">' . htmlspecialchars($GLOBALS['TYPO3_CONF_VARS']['SYS']['sitename']) . ' [' . TYPO3_version . ']</span>';
        }
 
        /**
index b4680ec..7c8c03b 100644 (file)
@@ -1,11 +1,11 @@
-<div class="navbar navbar-inverse x-hide-display" role="navigation" id="typo3-top-container">
-       <div class="container-fluid">
-               <div class="navbar-header" id="typo3-logo"><f:format.raw>{logo}</f:format.raw></div>
-               <div id="typo3-top">
-                       <ul class="nav navbar-nav navbar-right typo3-top-toolbar" id="typo3-toolbar">
-                               <f:format.raw>{toolbar}</f:format.raw>
-                       </ul>
-               </div>
+<div class="typo3-topbar-container" role="navigation" id="typo3-top-container">
+       <div class="typo3-topbar-site">
+               <f:format.raw>{logo}</f:format.raw>
+       </div>
+       <div class="typo3-topbar-navigation" id="typo3-topbar-navigation">
+               <ul class="typo3-topbar-navigation-items" data-typo3-role="typo3-module-menu">
+                       <f:format.raw>{toolbar}</f:format.raw>
+               </ul>
        </div>
 </div>
-<f:format.raw>{moduleMenu}</f:format.raw>
\ No newline at end of file
+<f:format.raw>{moduleMenu}</f:format.raw>
index 3e9ff2d..efb3751 100644 (file)
@@ -2,7 +2,7 @@
        <f:for each="{modules}" as="mainModule">
                <li class="typo3-module-menu-group expanded" id="{mainModule.name}" data-modulename="{mainModule.name}" data-navigationcomponentid="{mainModule.navigationComponentId}" data-navigationframescript="{mainModule.navigationFrameScript}" data-navigationframescriptparameters="{mainModule.navigationFrameScriptParameters}">
                        <div class="typo3-module-menu-group-header">
-                               <span class="typo3-module-menu-group-icon">
+                               <span class="typo3-app-icon typo3-module-menu-group-icon">
                                        <span>
                                                <span>
                                                        <f:if condition="{mainModule.icon.html}">
@@ -30,7 +30,7 @@
                                <f:for each="{mainModule.children}" as="subModule">
                                        <li id="{subModule.name}" class="typo3-module-menu-item" data-modulename="{mainModule.name}" data-navigationcomponentid="{subModule.navigationComponentId}" data-navigationframescript="{subModule.navigationFrameScript}" data-navigationframescriptparameters="{subModule.navigationFrameScriptParameters}">
                                                <a title="{subModule.description}" href="{subModule.link}" class="typo3-module-menu-item-link">
-                                                       <span class="typo3-module-menu-item-icon">
+                                                       <span class="typo3-app-icon typo3-module-menu-item-icon">
                                                                <span>
                                                                        <span>
                                                                                <f:format.raw>{subModule.icon.html}</f:format.raw>
diff --git a/typo3/sysext/backend/Resources/Public/Css/structure/topbar.css b/typo3/sysext/backend/Resources/Public/Css/structure/topbar.css
deleted file mode 100644 (file)
index 0424652..0000000
+++ /dev/null
@@ -1,7 +0,0 @@
-/* - - - - - - - - - - - - - - - - - - - - -
-Topbar (whole upper area), contains Logo and toolbar
-- - - - - - - - - - - - - - - - - - - - - */
-
-#typo3-logo {
-       float: left;
-}
\ No newline at end of file
index 265bbf9..adf34ea 100644 (file)
@@ -25,7 +25,6 @@ define('TYPO3/CMS/Backend/Toolbar/ShortcutMenu', ['jquery'], function($) {
                        toolbarIconSelector: '.dropdown-toggle span.t3-icon',
                        toolbarMenuSelector: '.dropdown-menu',
                        shortcutItemSelector: '.dropdown-menu .shortcut',
-                       shortcutLabelSelector: '.shortcut-label',
                        shortcutDeleteSelector: '.shortcut-delete',
                        shortcutEditSelector: '.shortcut-edit',
                        shortcutFormTitleSelector: 'input[name="shortcut-title"]',
@@ -39,7 +38,6 @@ define('TYPO3/CMS/Backend/Toolbar/ShortcutMenu', ['jquery'], function($) {
         * build the in-place-editor for a shortcut
         */
        ShortcutMenu.editShortcut = function($shortcutRecord) {
-               $shortcutRecord.find(ShortcutMenu.options.shortcutEditSelector).hide();
                // load the form
                $.ajax({
                        url: TYPO3.settings.ajaxUrls['ShortcutMenu::getShortcutEditForm'],
@@ -49,7 +47,7 @@ define('TYPO3/CMS/Backend/Toolbar/ShortcutMenu', ['jquery'], function($) {
                        },
                        cache: false
                }).done(function(data) {
-                       $shortcutRecord.find(ShortcutMenu.options.shortcutLabelSelector).html(data);
+                       $shortcutRecord.html(data);
                });
        };
 
index 429d981..7d34e59 100644 (file)
@@ -27,14 +27,14 @@ TYPO3.BackendLiveSearch = Ext.extend(Ext.form.ComboBox, {
        listAlign : 'tr-br',
        listClass: 'live-search-list',
        listEmptyText: null,
-       listWidth: 315,
+       listWidth: 400,
        listHovered: false,
        loadingText: null,
        minChars: 1,
        resizable: false,
        title: null,
        triggerClass : 'x-form-clear-trigger',
-       triggerConfig: '<span tag="a" class="t3-icon t3-icon-actions t3-icon-actions-input t3-icon-input-clear t3-tceforms-input-clearer">&nbsp;</span>',
+       triggerConfig: '<span class="t3-icon fa fa-remove"></span>',
        onTriggerClick: function() {
                // Empty the form field, give it focus, and collapse the results
                this.reset(this);
@@ -45,8 +45,8 @@ TYPO3.BackendLiveSearch = Ext.extend(Ext.form.ComboBox, {
                '<table border="0" cellspacing="0">',
                        '<tpl for=".">',
                                '<tr class="search-item">',
-                                       '<td class="search-item-type" width="105" align="right">{recordTitle}</td>',
-                                       '<td class="search-item-content" width="195">',
+                                       '<td class="search-item-type">{recordTitle}</td>',
+                                       '<td class="search-item-content" width="95%">',
                                                '<div class="search-item-title">{iconHTML} {title}</div>',
                                        '</td>',
                                '</tr>',
@@ -111,27 +111,9 @@ TYPO3.BackendLiveSearch = Ext.extend(Ext.form.ComboBox, {
 
        restrictHeight : function(){
                this.innerList.dom.style.height = '';
-               var inner = this.innerList.dom;
-               var pad = this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight + 30; // @todo Remove hardcoded 30
-               var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
-               var ha = this.getPosition()[1]-Ext.getBody().getScroll().top;
-               var hb = Ext.lib.Dom.getViewHeight()-ha-this.getSize().height;
-               var space = Math.max(ha, hb, this.minHeight || 0)-pad-2;
-               /** BUG FIX **/
-               if (this.shadow === true) { space-=this.list.shadow.offset; }
-
-               h = Math.min(h, space, this.maxHeight);
-
-               /**
-                * @internal The calculated height of "h" in the line before seems not working as expected.
-                *                       If i define a min height, the box should at least use this height also if only one entry is in there
-                */
-               //h = this.maxHeight;
-
-               this.innerList.setHeight(h);
+               this.innerList.dom.style.width = '';
                this.list.beginUpdate();
-               this.list.setHeight(h+pad);
-               this.list.alignTo(this.el, this.listAlign);
+               this.list.setHeight('auto');
                this.list.endUpdate();
        },
 
@@ -147,19 +129,15 @@ TYPO3.BackendLiveSearch = Ext.extend(Ext.form.ComboBox, {
                 * Create bottom Toolbar to the result layer
                 */
                this.footer = this.list.createChild({cls:cls+'-ft'});
-
                this.pageTb = new Ext.Toolbar({
                        renderTo:this.footer,
-                       height: 30,
                        items: [{
                                xtype: 'tbfill',
                                autoWidth : true
                        },{
                                xtype: 'button',
                                text: TYPO3.LLL.liveSearch.showAllResults,
-                               arrowAlign : 'right',
                                shadow: false,
-                               icon : '../typo3/sysext/t3skin/icons/module_web_list.gif',
                                listeners : {
                                        scope : this,
                                        click : function () {
@@ -171,7 +149,6 @@ TYPO3.BackendLiveSearch = Ext.extend(Ext.form.ComboBox, {
                                }
                        }]
                });
-               this.assetHeight += this.footer.getHeight();
        },
 
        initQuery : function(){
@@ -184,7 +161,7 @@ TYPO3.BackendLiveSearch = Ext.extend(Ext.form.ComboBox, {
 
                        this.helpList = new Ext.Layer({
                                parentEl: this.getListParent(),
-                               shadow: this.shadow,
+                               shadow: false,
                                cls: [cls, this.listClass].join(' '),
                                constrain:false
                        });
@@ -193,17 +170,11 @@ TYPO3.BackendLiveSearch = Ext.extend(Ext.form.ComboBox, {
                        this.mon(this.helpList, 'mouseover', function() {this.listHovered = true;}, this);
                        this.mon(this.helpList, 'mouseout', function() {this.listHovered = false; }, this);
 
-                       var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
-                       this.helpList.setSize(lw);
                        this.helpList.swallowEvent('mousewheel');
-                       if(this.syncFont !== false){
-                               this.helpList.setStyle('font-size', this.el.getStyle('font-size'));
-                       }
 
                        this.innerHelpList = this.helpList.createChild({cls:cls+'-inner'});
                        this.mon(this.innerHelpList, 'mouseover', this.onViewOver, this);
                        this.mon(this.innerHelpList, 'mousemove', this.onViewMove, this);
-                       this.innerHelpList.setWidth(lw - this.helpList.getFrameWidth('lr'));
 
                        if(!this.helpTpl){
                                this.helpTpl = '<tpl for="."><div class="'+cls+'-item">{' + this.displayField + '}</div></tpl>';
index 0348751..390e41a 100644 (file)
@@ -207,6 +207,7 @@ TYPO3.ModuleMenu.App = {
                        if (top.currentModuleLoaded) {
                                TYPO3.ModuleMenu.App.highlightModuleMenuItem(top.currentModuleLoaded);
                        }
+                       TYPO3.Backend.doLayout();
                });
        },
 
index 16b07cd..9136e6c 100644 (file)
@@ -16,6 +16,7 @@ namespace TYPO3\CMS\Opendocs\Backend\ToolbarItems;
 
 use TYPO3\CMS\Backend\Toolbar\ToolbarItemInterface;
 use TYPO3\CMS\Backend\Utility\IconUtility;
+use TYPO3\CMS\Core\Utility\GeneralUtility;
 
 /**
  * Alist of all open documents
@@ -43,7 +44,6 @@ class OpendocsToolbarItem implements ToolbarItemInterface {
                $this->loadDocsFromUserSession();
                $pageRenderer = $this->getPageRenderer();
                $pageRenderer->loadRequireJsModule('TYPO3/CMS/Opendocs/Toolbar/OpendocsMenu');
-               $pageRenderer->addCssFile(\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::extRelPath('opendocs') . '/Resources/Public/Css/opendocs.css');
        }
 
        /**
@@ -94,16 +94,17 @@ class OpendocsToolbarItem implements ToolbarItemInterface {
                $recentDocuments = $this->recentDocs;
                $entries = array();
                if (count($openDocuments)) {
-                       $entries[] = '<tr><td class="dropdown-header">' . $languageService->getLL('open_docs', TRUE) . '</td></tr>';
+                       $entries[] = '<li class="dropdown-header">' . $languageService->getLL('open_docs', TRUE) . '</li>';
                        $i = 0;
                        foreach ($openDocuments as $md5sum => $openDocument) {
                                $i++;
                                $entries[] = $this->renderMenuEntry($openDocument, $md5sum, FALSE, $i == 1);
                        }
+                       $entries[] = '<li class="divider"></li>';
                }
                // If there are "recent documents" in the list, add them
                if (count($recentDocuments)) {
-                       $entries[] = '<tr><td class="dropdown-header">' . $languageService->getLL('recent_docs', TRUE) . '</td></tr>';
+                       $entries[] = '<li class="dropdown-header">' . $languageService->getLL('recent_docs', TRUE) . '</li>';
                        $i = 0;
                        foreach ($recentDocuments as $md5sum => $recentDocument) {
                                $i++;
@@ -111,7 +112,7 @@ class OpendocsToolbarItem implements ToolbarItemInterface {
                        }
                }
                if (count($entries)) {
-                       $content = '<table><tbody>' . implode('', $entries) . '</tbody></table>';
+                       $content = '<ul class="dropdown-list">' . implode('', $entries) . '</ul>';
                } else {
                        $content = '<p>' . $languageService->getLL('no_docs', TRUE) . '</p>';
                }
@@ -142,31 +143,22 @@ class OpendocsToolbarItem implements ToolbarItemInterface {
                if ($document[3]['table'] !== 'pages') {
                        $pageId = (int)$document[3]['pid'];
                }
-               $firstRow = '';
-               if ($isFirstDoc) {
-                       $firstRow = ' first-row';
-               }
+               $onClickCode = 'jump(' . GeneralUtility::quoteJSvalue($link) . ', \'web_list\', \'web\', ' . $pageId . '); TYPO3.OpendocsMenu.toggleMenu(); return false;';
                if (!$isRecentDoc) {
                        $title = $this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:rm.closeDoc', TRUE);
                        // Open document
                        $closeIcon = \TYPO3\CMS\Backend\Utility\IconUtility::getSpriteIcon('actions-document-close');
                        $entry = '
-                               <tr class="opendoc' . $firstRow . '">
-                                       <td>
-                                               <a href="#" class="opendocLink pull-left" onclick="jump(unescape(\'' . htmlspecialchars($link) . '\'), \'web_list\', \'web\', ' . $pageId . ');TYPO3.OpendocsMenu.toggleMenu(); return false;" target="content">' . $icon . ' ' . $label . '</a>
-                                       </td>
-                                       <td>
-                                               <a href="#" class="close pull-right" data-opendocsidentifier="' . $md5sum . '">' . $closeIcon . '</a>
-                                       </td>
-                               </tr>';
+                               <li class="opendoc">
+                                       <a href="#" class="dropdown-list-link dropdown-link-list-add-close" onclick="' . htmlspecialchars($onClickCode) . '" target="content">' . $icon . ' ' . $label . '</a>
+                                       <a href="#" class="dropdown-list-link-close" data-opendocsidentifier="' . $md5sum . '" title="' . $title . '">' . $closeIcon . '</a>
+                               </li>';
                } else {
                        // Recently used document
                        $entry = '
-                               <tr class="recentdoc' . $firstRow . '">
-                                       <td colspan="2">
-                                               <a href="#" onclick="jump(unescape(\'' . htmlspecialchars($link) . '\'), \'web_list\', \'web\', ' . $pageId . '); TYPO3.OpendocsMenu.toggleMenu(); return false;" target="content">' . $icon . ' ' . $label . '</a>
-                                       </td>
-                               </tr>';
+                               <li>
+                                       <a href="#" class="dropdown-list-link" onclick="' . htmlspecialchars($onClickCode) . '" target="content">' . $icon . ' ' . $label . '</a>
+                               </li>';
                }
                return $entry;
        }
diff --git a/typo3/sysext/opendocs/Resources/Public/Css/opendocs.css b/typo3/sysext/opendocs/Resources/Public/Css/opendocs.css
deleted file mode 100644 (file)
index a40511d..0000000
+++ /dev/null
@@ -1,56 +0,0 @@
-/* - - - - - - - - - - - - - - - - - - - - -
-
-Title  : Open Documents toolbar item menu styles
-Author : Benjamin Mack <benni@typo3.org>
-URL    : http://typo3.org
-
-Description : styles the Open Documents toolbar item
-
-
-- - - - - - - - - - - - - - - - - - - - - */
-
-#tx-opendocs-menu .opendoc {
-       width: inherit;
-}
-
-#tx-opendocs-menu .dropdown-menu {
-       max-width: 400px;
-       width: auto;
-       white-space: nowrap;
-}
-
-#tx-opendocs-menu .opendoc .icon,
-#tx-opendocs-menu .recentdoc .icon {
-       padding-left: 7px;
-       vertical-align: top;
-       width: 16px;
-}
-
-#tx-opendocs-menu .linkWrap {
-       display: table;
-       padding: 3px 20px;
-       width: 100%;
-}
-
-#tx-opendocs-menu .opendoc .opendocLink {
-       display: table-cell;
-       padding-right: 10px;
-}
-
-#tx-opendocs-menu .opendoc .close {
-       width: 20px;
-       text-align: center;
-       vertical-align: top;
-       display: table-cell;
-       position: relative;
-       top: 3px;
-}
-
-#tx-opendocs-menu .opendoc .close span {
-       cursor: pointer;
-}
-
-
-#tx-opendocs-menu .noOpenDocs {
-       padding: 3px 20px;
-}
\ No newline at end of file
index 713aefc..ebbb29d 100644 (file)
@@ -24,11 +24,11 @@ define('TYPO3/CMS/Opendocs/Toolbar/OpendocsMenu', ['jquery'], function($) {
                options: {
                        containerSelector: '#typo3-cms-opendocs-backend-toolbaritems-opendocstoolbaritem',
                        hashDataAttributeName: 'opendocsidentifier',
-                       closeSelector: '.close',
+                       closeSelector: '.dropdown-list-link-close',
                        menuContainerSelector: '.dropdown-menu',
                        menuItemSelector: '.dropdown-menu li a',
                        toolbarIconSelector: '.dropdown-toggle span.t3-icon',
-                       openDocumentsItemsSelector: 'tr.opendoc',
+                       openDocumentsItemsSelector: 'li.opendoc',
                        counterSelector: '#tx-opendocs-counter'
                }
        };
index 502210f..29c5d95 100644 (file)
  * The TYPO3 project - inspiring people to share!
  */
 
+// Menu icons
+@app-icon-border-radius: @border-radius-small;
+@app-icon-height: 32px;
+@app-icon-width: 32px;
+@app-icon-font-size: 21px;
+@app-icon-bg: #484848;
+
 /* - - - - - - - - - - - - - - - - - - - - -
 TYPO3 styles for basic elements
 - - - - - - - - - - - - - - - - - - - - - */
@@ -132,13 +139,14 @@ Various classes
 // Please use .typo3-app-icon in your extensions.
 // Wrap <img> in span>span for 16x16px horizontally and vertically centered icons (backwards compatibility)
 .typo3-app-icon {
+       position: relative;
        display: inline-block;
-       padding: 0;
-       margin: 0;
-       height: 32px;
-       width: 32px;
+       padding: 0px;
+       height: @app-icon-width;
+       width: @app-icon-height;
        overflow: hidden;
-       border-radius: @border-radius-small;
+       border-radius: @app-icon-border-radius;
+       background-color: @app-icon-bg;
        > span {
                display: table;
                height: 100%;
@@ -150,8 +158,23 @@ Various classes
                }
        }
        img {
-               max-height: 32px;
-               max-width: 32px;
+               max-height: @app-icon-width;
+               max-width: @app-icon-width;
+       }
+       .fa {
+               font-size: @app-icon-font-size;
+               vertical-align: middle;
+       }
+       &:after {
+               position: absolute;
+               content: '';
+               display: block;
+               top: 0;
+               left: 0;
+               right: 0;
+               bottom: 0;
+               border: 1px solid rgba(255,255,255,0.1);
+               border-radius: @app-icon-border-radius;
        }
 }
 
index da0d983..0041bac 100644 (file)
@@ -33,14 +33,7 @@ Module menu
 @module-menu-link-active-color: #fff;
 @module-menu-link-active-bg: lighten(@module-menu-bg,15%);
 @module-menu-item-padding-vertical: 4px;
-@module-menu-item-padding-horizontal: 8px;
-
-// Module icons
-@module-menu-icon-border-radius: @border-radius-small;
-@module-menu-icon-height: 32px;
-@module-menu-icon-width: 32px;
-@module-menu-icon-font-size: 21px;
-@module-menu-icon-bg: @module-menu-link-active-bg;
+@module-menu-item-padding-horizontal: 9px;
 
 // Module menu container
 [id="typo3-module-menu"] {
@@ -52,7 +45,7 @@ Module menu
 [id="typo3-module-menu-xsplit"] {
        z-index: 10;
        width: 1px;
-       background-color: @module-menu-border-color;
+       background-color: lighten(@module-menu-border-color,10%);
        .box-shadow(2px 0px 3px rgba(0,0,0,0.5));
        &:hover {
                .box-shadow(2px 0px 3px rgba(0,0,0,0.9));
@@ -126,46 +119,13 @@ Module menu
        // Module menu icons
        .typo3-module-menu-group-icon,
        .typo3-module-menu-item-icon {
-               position: relative;
-               display: block;
-               padding: 0px;
-               height: @module-menu-icon-width;
-               width: @module-menu-icon-height;
-               margin-right: 10px;
                float: left;
-               overflow: hidden;
-               border-radius: @module-menu-icon-border-radius;
-               > span {
-                       display: table;
-                       height: 100%;
-                       width: 100%;
-                       > span {
-                               display: table-cell;
-                               text-align: center;
-                               vertical-align: middle;
-                       }
-               }
-               img {
-                       max-height: @module-menu-icon-width;
-                       max-width: @module-menu-icon-width;
-               }
-               .fa {
-                       font-size: @module-menu-icon-font-size;
-                       vertical-align: middle;
-               }
+               margin-right: 10px;
        }
-       .typo3-module-menu-item-icon {
-               background-color: @module-menu-icon-bg;
+       .typo3-module-menu-group-icon {
+               background-color: transparent;
                &:after {
-                       position: absolute;
-                       content: '';
-                       display: block;
-                       top: 0;
-                       left: 0;
-                       right: 0;
-                       bottom: 0;
-                       border: 1px solid rgba(255,255,255,0.1);
-                       border-radius: @module-menu-icon-border-radius;
+                       display: none;
                }
        }
 
index be7d5a1..06027ad 100644 (file)
  * The TYPO3 project - inspiring people to share!
  */
 
-/* - - - - - - - - - - - - - - - - - - - - -
-Topbar
-- - - - - - - - - - - - - - - - - - - - - */
-
-#typo3-topbar {
-       background-color: @navbar-inverse-bg;
-       z-index: 200;
-
-       div {
-               overflow: visible !important;
-       }
-
-       #typo3-top-container {
-               margin-bottom: 0;
-               // Force 45px height without border
-               border: none;
-
-               #typo3-logo {
-                       margin: 8px 0 0 0;
-                       padding: 1px 0 0 0;
-                       width: 159px;
-               }
-
-               #typo3-toolbar {
-                       list-style: none;
-                       display: inline;
-
-                       div {
-                               overflow: visible !important;
-                       }
-
-                       > li {
-                               margin-right: 1px;
-
-                               .t3-icon {
-                                       margin-right: 0;
-
-                                       &.fa {
-                                               height: 14px;
-                                               width: 14px;
-                                       }
-                               }
-
-                               &.dropdown {
-                                       color: @navbar-inverse-link-color;
-                                       background-color: @navbar-inverse-link-bg;
-
-                                       > a {
-                                               text-align: center;
-                                       }
-                               }
-
-                               .badge {
-                                       position: absolute;
-                                       top: 6px;
-                                       right: 4px;
-                                       font-size: 7px;
-                               }
-                       }
-
-                       .dropdown-menu {
-                               background-color: @navbar-inverse-link-active-bg;
-                               color: @navbar-inverse-link-active-color;
-                               border: none;
-
-                               // dropdown-menu > ul
-                               > ul {
-                                       .list-unstyled;
-
-                                       > li {
-                                               > a {
-                                                       color: @navbar-inverse-link-active-color;
-                                                       display: block;
-                                                       padding: 3px 20px;
-                                                       clear: both;
-                                                       font-weight: normal;
-                                                       line-height: @line-height-base;
-                                                       white-space: nowrap;
-                                                       > .t3-icon {
-                                                               margin-right: 5px;
-                                                       }
-                                               }
-
-                                               &.active {
-                                                       > a {
-                                                               background-color: darken(@navbar-inverse-link-active-bg, 15%);
-                                                       }
-                                               }
-                                       }
-
-                                       // User and Help module-menu ToolbarItems
-                                       > li.typo3-module-menu-item {
-                                               margin: 1px 0;
-                                               > a {
-                                                       padding-top: 2px;
-                                                       padding-bottom: 2px;
-                                                       height: 36px;
-                                                       .typo3-app-icon {
-                                                               display: block;
-                                                               float: left;
-                                                               margin-right: 10px;
-                                                       }
-                                                       .submodule-label {
-                                                               display: block;
-                                                               padding-left: 42px;
-                                                               padding-top: 8px;
-                                                       }
-                                               }
-                                       }
-                               }
-
-                               // dropdown-menu > p
-                               > p {
-                                       padding: 3px 20px;
-                               }
-
-                               // dropdown-menu > table > tr > td
-                               > table {
-                                       width: 100%;
-
-                                       > thead > tr > td {
-                                               .dropdown-header;
-                                       }
-                                       > tbody > tr > td > a {
-                                               color: @navbar-inverse-link-active-color;
-                                               display: block;
-                                               padding: 3px 20px;
-                                               clear: both;
-                                               font-weight: normal;
-                                               line-height: @line-height-base;
-                                               white-space: nowrap;
-
-                                               &.active {
-                                                       > a {
-                                                               background-color: darken(@navbar-inverse-link-active-bg, 15%);
-                                                       }
-                                               }
-                                       }
-                                       > tbody > tr > td.shortcut-edit > a,
-                                       > tbody > tr > td.shortcut-delete > a {
-                                               padding: 3px 5px;
-                                       }
-                               }
+@topbar-color: #ddd;
+@topbar-height: 45px;
+@topbar-zindex: @zindex-navbar;
+@topbar-bg: @navbar-inverse-bg;
+
+@topbar-navigation-color: @topbar-color;
+@topbar-navigation-bg: #222;
+@topbar-navigation-border-color: #111;
+
+@topbar-dropdown-padding: 16px;
+@topbar-dropdown-color: @topbar-navigation-color;
+@topbar-dropdown-bg: @topbar-navigation-bg;
+
+@topbar-dropdown-link-bg: @topbar-navigation-bg;
+@topbar-dropdown-link-color: #ddd;
+@topbar-dropdown-link-hover-bg: #333;
+@topbar-dropdown-link-hover-color: #fff;
+@topbar-dropdown-link-active-bg: lighten(@topbar-dropdown-bg, 15%);
+@topbar-dropdown-link-active-color: #fff;
+
+@tobar-navigation-search-bg: @topbar-navigation-bg;
+@tobar-navigation-search-hover-bg: @topbar-dropdown-link-hover-bg;
+@tobar-navigation-search-focus-bg: @topbar-dropdown-link-active-bg;
+
+
+// HOTFIX SCAFFOLDING
+[id="typo3-topbar"],
+[id="typo3-topbar"] .x-panel-body {
+       min-width: 1000px;
+}
 
-                               li,
-                               td {
-                                       a {
-                                               color: @navbar-inverse-link-active-color;
-                                               text-decoration: none;
 
-                                               &:hover {
-                                                       background-color: darken(@navbar-inverse-link-active-bg, 10%);
-                                                       color: @navbar-inverse-link-active-color;
-                                                       text-decoration: none;
-                                               }
-                                       }
-                               }
-                       }
-               }
+// Topbar
+[id="typo3-topbar"]{
+       height: @topbar-height;
+       position: relative;
+       background-color: @topbar-bg;
+       color: @topbar-color;
+       .x-panel-bwrap,
+       .x-panel-body {
+               overflow: visible;
        }
 }
-
-/* - - - - - - - - - - - - - - - - - - - - -
-Shortcuts menu
-- - - - - - - - - - - - - - - - - - - - - */
-
-#shortcut-menu {
-       .shortcut-list {
-               width: 100%;
-
-               tr.shortcut td {
-                       padding: 2px 1px;
-               }
-
+.typo3-in-workspace [id="typo3-topbar"] {
+       background-color: #6d860d;
+       .typo3-topbar-site-name {
+               color: #fff;
        }
 }
 
-
-#shortcut-menu .shortcut-list tr.shortcut-group td.shortcut-group-icon,
-#shortcut-menu .shortcut-list tr.shortcut td.shortcut-icon,
-#shortcut-menu .shortcut-list td.shortcut-edit,
-#shortcut-menu .shortcut-list td.shortcut-delete {
-       text-align: center;
+// Container
+.typo3-topbar-container {
+       -moz-user-select: -moz-none;
+       -khtml-user-select: none;
+       -webkit-user-select: none;
+       -o-user-select: none;
+       user-select: none;
+       height: @topbar-height;
+       position: relative;
 }
 
-#shortcut-menu .shortcut-list tr.shortcut td.shortcut-edit img,
-#shortcut-menu .shortcut-list tr.shortcut td.shortcut-delete img {
-       cursor: pointer;
+// Site
+.typo3-topbar-site {
+       display: table;
+       padding: 0;
+       height: @navbar-height;
+       float: left;
 }
-
-#shortcut-menu .shortcut-list tr.shortcut-group td.shortcut-group-icon,
-#shortcut-menu .shortcut-list tr.shortcut td.shortcut-icon,
-#shortcut-menu .shortcut-list td.shortcut-edit,
-#shortcut-menu .shortcut-list td.shortcut-delete {
-       vertical-align: top;
-       width: 18px;
+.typo3-topbar-site-logo,
+.typo3-topbar-site-name {
+       display: table-cell;
+       vertical-align: middle;
+       text-align: center;
 }
-
-#shortcut-menu .shortcut-list tr.shortcut td.shortcut-label a {
-       display: block;
+.typo3-topbar-site-logo {
+       background-color: @topbar-bg;
+       width: 51px;
+       .box-shadow(2px 0px 0px rgba(0, 0, 0, 0.15));
+       &:hover {
+               background-color: @tobar-navigation-search-hover-bg;
+       }
+       > img {
+               max-width: 50px;
+               max-height: 50px;
+       }
 }
-
-#shortcut-menu .shortcut-list tr.shortcut td.shortcut-edit img,
-#shortcut-menu .shortcut-list tr.shortcut td.shortcut-delete img {
-       display: none;
+.typo3-topbar-site-name {
+       cursor: default;
+       padding: 0 (@grid-gutter-width / 2);
 }
 
-#shortcut-menu .shortcut-list tr.shortcut:hover td.shortcut-edit img,
-#shortcut-menu .shortcut-list tr.shortcut:hover td.shortcut-delete img {
-       display: inline;
-}
 
-#shortcut-menu .shortcut-list tr.shortcut-group td.shortcut-group-icon,
-#shortcut-menu .shortcut-list tr.shortcut td.shortcut-icon {
-       padding-left: 7px;
-       vertical-align: top;
+// Shared
+.typo3-topbar-navigation {
+       color: @topbar-navigation-color;
+       background-color: @topbar-navigation-bg;
+       float: right;
+       // Buttons
+       .btn {
+               .btn();
+       }
+       .btn.btn-default {
+               .btn-default();
+       }
+       .btn.btn-success {
+               .btn-success();
+       }
+       .btn.btn-danger {
+               .btn-danger();
+       }
+       // Shortcut
+       .shortcut {
+               min-width: 180px;
+       }
+       .shortcut-form {
+               padding: @topbar-dropdown-padding;
+               margin: (@topbar-dropdown-padding / 4) -@topbar-dropdown-padding;
+               border-top: 1px solid lighten(@topbar-navigation-border-color,15%);
+               background-color: lighten(@topbar-navigation-border-color,10%);
+               border-bottom: 1px solid @topbar-navigation-border-color;
+       }
 }
 
-/* - - - - - - - - - - - - - - - - - - - - -
-Username inside the toolbar
-- - - - - - - - - - - - - - - - - - - - - */
 
-#topbar-user-menu {
-       &.su-user {
-               a {
-                       color: #eb6e5a;
+// Navigation Items
+.typo3-topbar-navigation-items {
+       height: @topbar-height;
+       margin-bottom: 0;
+       padding-left: 0;
+       list-style: none;
+       float: left;
+       a {
+               color: @topbar-navigation-color;
+               text-decoration: none;
+       }
+       > li {
+               float: left;
+               height: @topbar-height;
+               > a {
+                       position: relative;
+                       display: block;
+                       padding: @navbar-padding-vertical 10px;
+                       border-left: 1px solid lighten(@topbar-navigation-border-color,10%);
+                       border-right: 1px solid @topbar-navigation-border-color;
+                       &:hover,
+                       &:focus,
+                       &:active {
+                               color: @topbar-dropdown-link-hover-color;
+                               background-color: @topbar-dropdown-link-hover-bg;
+                               border-left-color: lighten(@topbar-dropdown-link-hover-bg,3%)
+                       }
+               }
+       }
+       > li.open {
+               > a {
+                       color: @topbar-dropdown-link-active-color;
+                       background-color: @topbar-dropdown-link-active-bg;
+                       border-left-color: lighten(@topbar-dropdown-link-active-bg,3%);
                }
        }
 }
 
-/* - - - - - - - - - - - - - - - - - - - - -
-Workspace Selector
-- - - - - - - - - - - - - - - - - - - - - */
-
-#workspace-selector-menu  {
-       ul {
-               li {
-                       span.t3-icon {
-                               float: left;
-                               margin-top: 0;
-                               margin-right: 2px;
+// Dropdown
+.typo3-topbar-navigation-items {
+       .dropdown {
+               min-width: @topbar-height;
+               text-align: center;
+               > a > .fa {
+                       font-size: 16px;
+                       margin: 0;
+                       display: inline-block;
+                       position: relative;
+                       vertical-align: middle;
+                       width: auto;
+                       height: auto;
+               }
+       }
+       .dropdown-toggle {
+               position: relative;
+               .badge {
+                       display: none;
+                       font-size: 10px;
+                       min-width: 15px;
+                       height: 15px;
+                       position: absolute;
+                       padding: 0;
+                       border-radius: @border-radius-small;
+                       line-height: 15px;
+                       bottom: 5px;
+                       right: 5px;
+               }
+       }
+       .dropdown-menu {
+               margin: 0;
+               padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
+               color: @topbar-dropdown-color;
+               background-color: @topbar-dropdown-bg;
+               border-color: @topbar-navigation-border-color;
+               border-top: 1px solid lighten(@topbar-navigation-border-color, 20%);
+               border-left: 0;
+               border-right: 0;
+               border-radius: 0 0 @border-radius-small @border-radius-small;
+               .box-shadow(0px 3px 0px rgba(0, 0, 0, 0.15));
+               a {
+                       color: @topbar-dropdown-link-color;
+                       white-space: nowrap;
+               }
+               > *:last-child {
+                       margin-bottom: 0;
+               }
+       }
+       .dropdown-list {
+               .list-unstyled();
+               > li {
+                       .clearfix();
+                       position: relative;
+                       &.active .dropdown-list-link {
+                               background-color: @topbar-dropdown-link-active-bg;
+                               color: @topbar-dropdown-link-active-color;
                        }
-
-                       img {
+               }
+               > li + li {
+                       margin-top: 1px;
+               }
+               > li.divider + li {
+                       margin-top: 0;
+               }
+               .divider {
+                       border-top: 1px solid @topbar-navigation-border-color;
+                       background-color: lighten(@topbar-navigation-border-color, 10%);
+                       margin: (@topbar-dropdown-padding / 2) 0;
+                       padding: 0;
+                       padding-top: 1px;
+                       margin-left: -@topbar-dropdown-padding;
+                       margin-right: -@topbar-dropdown-padding;
+               }
+               .modlink {
+                       .clearfix();
+                       width: 210px;
+                       .submodule-icon {
                                float: left;
-                               position: relative;
-                               margin-right: 2px;
+                               margin-right: 10px;
                        }
+                       .submodule-label {
+                               white-space: nowrap;
+                               text-overflow: ellipsis;
+                               padding-top: 7px;
+                               display: block;
+                               overflow: hidden;
+                               *zoom: 1;
+                       }
+               }
+               .dropdown-header {
+                       font-size: 1em;
+                       margin-left: -@topbar-dropdown-padding;
+                       margin-right: -@topbar-dropdown-padding;
+                       padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
                }
        }
-
-       .items {
-               list-style: none;
-               overflow-y: auto;
-               max-height: 300px;
+       .dropdown-list-link {
+               max-width: 300px;
+               overflow: hidden;
+               text-overflow: ellipsis;
+               display: block;
+               text-decoration: none;
+               cursor: pointer;
+               white-space: nowrap;
+               color: @topbar-dropdown-link-color;
+               margin-left: -@topbar-dropdown-padding;
+               margin-right: -@topbar-dropdown-padding;
+               padding: (@topbar-dropdown-padding / 4) @topbar-dropdown-padding;
+               &:hover {
+                       color: @topbar-dropdown-link-hover-color;
+                       background-color: @topbar-dropdown-link-hover-bg;
+               }
        }
-}
-
-
-body.typo3-in-workspace {
-       #typo3-top-container {
-               background-image:
-                       url('../../../../images/backgrounds/topbar-in-workspace-background-left.png'),
-                       url('../../../../images/backgrounds/topbar-in-workspace-background-right.png'),
-                       url('../../../../images/backgrounds/topbar-in-workspace-background.gif');
-               background-repeat: no-repeat, no-repeat, repeat-x;
-               background-position: left top, right top, left top;
+       .dropdown-list-link-edit,
+       .dropdown-list-link-delete,
+       .dropdown-list-link-close {
+               display: table;
+               position: absolute;
+               top: 0;
+               bottom: 0;
+               right: -(@topbar-dropdown-padding / 2);
+               padding: 0;
+               text-align: center;
+               width: 26px;
+               height: 26px;
+               .t3-icon {
+                       display: table-cell;
+                       margin: 0;
+                       height: auto;
+                       width: auto;
+               }
+               &:hover {
+                       color: @topbar-dropdown-link-hover-color;
+                       background-color: @topbar-dropdown-link-hover-bg;
+               }
+       }
+       .dropdown-list-link-edit {
+               right: 18px;
+       }
+       .dropdown-list-link-delete,
+       .dropdown-list-link-close {
+               &:hover {
+                       color: @topbar-dropdown-link-hover-color;
+                       background-color: @btn-danger-bg;
+               }
+       }
+       .dropdown-link-list-add-close {
+               padding-right: 50px;
+       }
+       .dropdown-link-list-add-editdelete {
+               padding-right: 85px;
+       }
+       .topbar-workspaces-title {
+               margin-left: 3px;
        }
 }
 
-/* - - - - - - - - - - - - - - - - - - - - -
-Live Search
-- - - - - - - - - - - - - - - - - - - - - */
-
-#typo3-toolbar #live-search-menu {
-       padding-top: 13px;
-       padding-left: @navbar-padding-horizontal;
-       padding-right: @navbar-padding-horizontal;
-}
-
-.t3-icon-input-clear {
-       cursor: pointer;
-       position: absolute;
-       top: 0px;
-       right: 20px;
-}
-
-.live-search-box {
-       .x-form-field-wrap {
-               display: inline-block;
+// Navigation Search
+.typo3-topbar-navigation-search {
+       position: relative;
+       padding: 0;
+       margin: 0;
+       .form-group {
+               &:before {
+                       content: "\f002";
+                       font: normal normal normal 14px/1 FontAwesome;
+                       position: absolute;
+                       top: 50%;
+                       left: 15px;
+                       margin-top: -8px;
+                       z-index: 1;
+               }
+       }
+       .form-control {
+               box-sizing: content-box;
+               background-color: @tobar-navigation-search-bg;
+               color: @topbar-navigation-color;
+               height: @topbar-height - 27px;
+               padding-left: 35px;
+               padding-right: 30px;
+               padding-top: 14px;
+               padding-bottom: 13px;
+               border: none;
+               border-left: 1px solid lighten(@topbar-navigation-border-color, 10%);
+               border-radius: 0;
+               &:hover {
+                       border-left-color: lighten(@topbar-navigation-border-color, 15%);
+                       background-color: @tobar-navigation-search-hover-bg;
+               }
+               &:focus {
+                       outline: none;
+                       border-left-color: lighten(@topbar-navigation-border-color, 15%);
+                       background-color: @tobar-navigation-search-focus-bg;
+                       .box-shadow(none);
+               }
+               + .t3-icon {
+                       text-align: center;
+                       position: absolute;
+                       top: 50%;
+                       right: 15px;
+                       margin-right: 0;
+                       margin-top: -8px;
+               }
        }
 }
 
+// Livesearch
 .live-search-list {
-       background-color: white;
-       border: none;
-
-       .x-combo-list {
-               background-color: white;
+       .typo3-topbar-navigation-items .dropdown-menu();
+       padding: 0;
+       .x-toolbar {
+               padding: 0;
+               border: none;
+               background: transparent;
        }
-
-       .search-item-type {
-               border-right: 1px solid #ddd;
-               padding: 2px 5px 2px 0;
+       .x-combo-list-hd,
+       .x-combo-list-inner,
+       .x-combo-list-ft {
+               border: none;
+               background: transparent;
+               color: @topbar-dropdown-color;
        }
-
-       .search-item-content {
-               padding: 0 8px;
-
-               .search-item-title {
-                       padding: 2px;
-                       border: none !important;
-               }
+       .x-combo-list-hd,
+       .x-combo-list-inner,
+       .x-combo-list-ft {
+               padding: @topbar-dropdown-padding;
+       }
+       .x-combo-list-hd {
+               background-color: lighten(@topbar-dropdown-bg,3%);
+               border-top: 0;
+               border-bottom: 1px solid @topbar-navigation-border-color;
+       }
+       .x-combo-list-ft {
+               padding-top: 0;
+               border-bottom: 0;
        }
-
        .x-combo-list-inner {
-               padding-bottom: 5px;
+               padding-right: 0;
+               border-top: 1px solid lighten(@topbar-navigation-border-color, 10%);
        }
-
-       .x-combo-list-hd {
+       .x-btn {
                background: none;
                border: none;
-               margin-left: 110px;
-               color: #ddd;
+               color: inherit;
+               .x-btn-tl,
+               .x-btn-tc,
+               .x-btn-tr,
+               .x-btn-ml,
+               .x-btn-mr,
+               .x-btn-bl,
+               .x-btn-bc,
+               .x-btn-br {
+                       display: none;
+               }
+               button {
+                       .btn();
+                       .btn-sm();
+                       .btn-default();
+                       height: auto!important;
+               }
+       }
+       .search-item-type {
+               padding: 5px 20px 5px 0px;
+               white-space: nowrap;
+       }
+       .search-item-title {
+               border-radius: 2px 0px 0px 2px;
+               padding: 5px 20px 5px 10px;
+               &.x-combo-selected {
+                       border: none!important;
+                       background-color: lighten(@topbar-dropdown-bg, 10%);
+               }
        }
 }
-
 .search-list-help-content {
-       margin: @navbar-padding-vertical @navbar-padding-horizontal;
-       height: 100%;
-       color: #000000;
+       padding: @topbar-dropdown-padding;
+       strong {
+               display: block;
+               margin-bottom: 0.5em;
+       }
+       p {
+               margin-top: 0.5em;
+               margin-bottom: 0;
+       }
 }
index 7ab9ec4..36b7011 100644 (file)
 @navbar-inverse-border:                     none;
 
 // Inverted navbar links
-@navbar-inverse-link-color:                 @navbar-inverse-color;
+@navbar-inverse-link-color:                 #ddd;
 // TYPO3 specific variable:
 @navbar-inverse-link-bg:                    lighten(@navbar-inverse-bg, 7.5%);
 
 @navbar-inverse-link-hover-color:           rgb(200, 200, 200);
 @navbar-inverse-link-hover-bg:              rgb(50, 50, 50);
 
-@navbar-inverse-link-active-color:          rgb(255, 255, 255);
-@navbar-inverse-link-active-bg:             rgb(78, 78, 78);
+@navbar-inverse-link-active-color:          #fff;
+@navbar-inverse-link-active-bg:             @navbar-inverse-link-hover-bg;
 
 @navbar-inverse-link-disabled-color:        darken(@navbar-inverse-color, 30%);
 @navbar-inverse-link-disabled-bg:           darken(@navbar-inverse-bg, 20%);
index 582bc58..4e1aec5 100644 (file)
@@ -3378,7 +3378,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   border-color: none;
 }
 .navbar-inverse .navbar-brand {
-  color: #999999;
+  color: #dddddd;
 }
 .navbar-inverse .navbar-brand:hover,
 .navbar-inverse .navbar-brand:focus {
@@ -3389,7 +3389,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   color: #999999;
 }
 .navbar-inverse .navbar-nav > li > a {
-  color: #999999;
+  color: #dddddd;
 }
 .navbar-inverse .navbar-nav > li > a:hover,
 .navbar-inverse .navbar-nav > li > a:focus {
@@ -3400,7 +3400,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
 .navbar-inverse .navbar-nav > .active > a:hover,
 .navbar-inverse .navbar-nav > .active > a:focus {
   color: #ffffff;
-  background-color: #4e4e4e;
+  background-color: #323232;
 }
 .navbar-inverse .navbar-nav > .disabled > a,
 .navbar-inverse .navbar-nav > .disabled > a:hover,
@@ -3425,7 +3425,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
 .navbar-inverse .navbar-nav > .open > a,
 .navbar-inverse .navbar-nav > .open > a:hover,
 .navbar-inverse .navbar-nav > .open > a:focus {
-  background-color: #4e4e4e;
+  background-color: #323232;
   color: #ffffff;
 }
 @media (max-width: 767px) {
@@ -3436,7 +3436,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
     background-color: none;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
-    color: #999999;
+    color: #dddddd;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
@@ -3447,7 +3447,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
   .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
     color: #ffffff;
-    background-color: #4e4e4e;
+    background-color: #323232;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
   .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
@@ -3457,13 +3457,13 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   }
 }
 .navbar-inverse .navbar-link {
-  color: #999999;
+  color: #dddddd;
 }
 .navbar-inverse .navbar-link:hover {
   color: #c8c8c8;
 }
 .navbar-inverse .btn-link {
-  color: #999999;
+  color: #dddddd;
 }
 .navbar-inverse .btn-link:hover,
 .navbar-inverse .btn-link:focus {
@@ -10614,13 +10614,14 @@ em {
 Various classes
 - - - - - - - - - - - - - - - - - - - - - */
 .typo3-app-icon {
+  position: relative;
   display: inline-block;
-  padding: 0;
-  margin: 0;
+  padding: 0px;
   height: 32px;
   width: 32px;
   overflow: hidden;
   border-radius: 2px;
+  background-color: #484848;
 }
 .typo3-app-icon > span {
   display: table;
@@ -10636,6 +10637,21 @@ Various classes
   max-height: 32px;
   max-width: 32px;
 }
+.typo3-app-icon .fa {
+  font-size: 21px;
+  vertical-align: middle;
+}
+.typo3-app-icon:after {
+  position: absolute;
+  content: '';
+  display: block;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+}
 .section {
   margin-bottom: 15px;
 }
@@ -11194,7 +11210,7 @@ Module menu
 [id="typo3-module-menu-xsplit"] {
   z-index: 10;
   width: 1px;
-  background-color: #111111;
+  background-color: #2b2b2b;
   -webkit-box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.5);
   box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.5);
 }
@@ -11234,7 +11250,7 @@ Module menu
   position: relative;
   cursor: pointer;
   display: block;
-  padding: 4px 8px;
+  padding: 4px 9px;
   text-transform: uppercase;
 }
 [id="typo3-menu"] .typo3-module-menu-group-header:before,
@@ -11260,7 +11276,7 @@ Module menu
   position: relative;
   cursor: pointer;
   display: block;
-  padding: 4px 8px;
+  padding: 4px 9px;
   color: #666666;
   border-radius: 0 2px 2px 0;
   text-decoration: none;
@@ -11293,51 +11309,14 @@ Module menu
 }
 [id="typo3-menu"] .typo3-module-menu-group-icon,
 [id="typo3-menu"] .typo3-module-menu-item-icon {
-  position: relative;
-  display: block;
-  padding: 0px;
-  height: 32px;
-  width: 32px;
-  margin-right: 10px;
   float: left;
-  overflow: hidden;
-  border-radius: 2px;
-}
-[id="typo3-menu"] .typo3-module-menu-group-icon > span,
-[id="typo3-menu"] .typo3-module-menu-item-icon > span {
-  display: table;
-  height: 100%;
-  width: 100%;
-}
-[id="typo3-menu"] .typo3-module-menu-group-icon > span > span,
-[id="typo3-menu"] .typo3-module-menu-item-icon > span > span {
-  display: table-cell;
-  text-align: center;
-  vertical-align: middle;
-}
-[id="typo3-menu"] .typo3-module-menu-group-icon img,
-[id="typo3-menu"] .typo3-module-menu-item-icon img {
-  max-height: 32px;
-  max-width: 32px;
-}
-[id="typo3-menu"] .typo3-module-menu-group-icon .fa,
-[id="typo3-menu"] .typo3-module-menu-item-icon .fa {
-  font-size: 21px;
-  vertical-align: middle;
+  margin-right: 10px;
 }
-[id="typo3-menu"] .typo3-module-menu-item-icon {
-  background-color: #484848;
+[id="typo3-menu"] .typo3-module-menu-group-icon {
+  background-color: transparent;
 }
-[id="typo3-menu"] .typo3-module-menu-item-icon:after {
-  position: absolute;
-  content: '';
-  display: block;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 2px;
+[id="typo3-menu"] .typo3-module-menu-group-icon:after {
+  display: none;
 }
 [id="typo3-menu"] .typo3-module-menu-group-title,
 [id="typo3-menu"] .typo3-module-menu-item-title {
@@ -11391,257 +11370,722 @@ Module menu
  *
  * The TYPO3 project - inspiring people to share!
  */
-/* - - - - - - - - - - - - - - - - - - - - -
-Topbar
-- - - - - - - - - - - - - - - - - - - - - */
-#typo3-topbar {
+[id="typo3-topbar"],
+[id="typo3-topbar"] .x-panel-body {
+  min-width: 1000px;
+}
+[id="typo3-topbar"] {
+  height: 45px;
+  position: relative;
   background-color: #111111;
-  z-index: 200;
+  color: #dddddd;
 }
-#typo3-topbar div {
-  overflow: visible !important;
+[id="typo3-topbar"] .x-panel-bwrap,
+[id="typo3-topbar"] .x-panel-body {
+  overflow: visible;
 }
-#typo3-topbar #typo3-top-container {
-  margin-bottom: 0;
-  border: none;
+.typo3-in-workspace [id="typo3-topbar"] {
+  background-color: #6d860d;
 }
-#typo3-topbar #typo3-top-container #typo3-logo {
-  margin: 8px 0 0 0;
-  padding: 1px 0 0 0;
-  width: 159px;
+.typo3-in-workspace [id="typo3-topbar"] .typo3-topbar-site-name {
+  color: #fff;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar {
-  list-style: none;
-  display: inline;
+.typo3-topbar-container {
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+  height: 45px;
+  position: relative;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar div {
-  overflow: visible !important;
+.typo3-topbar-site {
+  display: table;
+  padding: 0;
+  height: 45px;
+  float: left;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar > li {
-  margin-right: 1px;
+.typo3-topbar-site-logo,
+.typo3-topbar-site-name {
+  display: table-cell;
+  vertical-align: middle;
+  text-align: center;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar > li .t3-icon {
-  margin-right: 0;
+.typo3-topbar-site-logo {
+  background-color: #111111;
+  width: 51px;
+  -webkit-box-shadow: 2px 0px 0px rgba(0, 0, 0, 0.15);
+  box-shadow: 2px 0px 0px rgba(0, 0, 0, 0.15);
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar > li .t3-icon.fa {
-  height: 14px;
-  width: 14px;
+.typo3-topbar-site-logo:hover {
+  background-color: #333333;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar > li.dropdown {
-  color: #999999;
-  background-color: #242424;
+.typo3-topbar-site-logo > img {
+  max-width: 50px;
+  max-height: 50px;
+}
+.typo3-topbar-site-name {
+  cursor: default;
+  padding: 0 15px;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar > li.dropdown > a {
+.typo3-topbar-navigation {
+  color: #dddddd;
+  background-color: #222222;
+  float: right;
+}
+.typo3-topbar-navigation .btn {
+  display: inline-block;
+  margin-bottom: 0;
+  font-weight: normal;
   text-align: center;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  padding: 6px 6px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 2px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar > li .badge {
-  position: absolute;
-  top: 6px;
-  right: 4px;
-  font-size: 7px;
+.typo3-topbar-navigation .btn:focus,
+.typo3-topbar-navigation .btn:active:focus,
+.typo3-topbar-navigation .btn.active:focus,
+.typo3-topbar-navigation .btn.focus,
+.typo3-topbar-navigation .btn:active.focus,
+.typo3-topbar-navigation .btn.active.focus {
+  outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu {
-  background-color: #4e4e4e;
+.typo3-topbar-navigation .btn:hover,
+.typo3-topbar-navigation .btn:focus,
+.typo3-topbar-navigation .btn.focus {
   color: #ffffff;
-  border: none;
+  text-decoration: none;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu > ul {
-  padding-left: 0;
-  list-style: none;
+.typo3-topbar-navigation .btn:active,
+.typo3-topbar-navigation .btn.active {
+  outline: 0;
+  background-image: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu > ul > li > a {
+.typo3-topbar-navigation .btn.disabled,
+.typo3-topbar-navigation .btn[disabled],
+fieldset[disabled] .typo3-topbar-navigation .btn {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.65;
+  filter: alpha(opacity=65);
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.typo3-topbar-navigation .btn.btn-default {
   color: #ffffff;
-  display: block;
-  padding: 3px 20px;
-  clear: both;
-  font-weight: normal;
-  line-height: 1.5;
-  white-space: nowrap;
+  background-color: #828282;
+  border-color: #757575;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu > ul > li > a > .t3-icon {
-  margin-right: 5px;
+.typo3-topbar-navigation .btn.btn-default:hover,
+.typo3-topbar-navigation .btn.btn-default:focus,
+.typo3-topbar-navigation .btn.btn-default.focus,
+.typo3-topbar-navigation .btn.btn-default:active,
+.typo3-topbar-navigation .btn.btn-default.active,
+.open > .dropdown-toggle.typo3-topbar-navigation .btn.btn-default {
+  color: #ffffff;
+  background-color: #696969;
+  border-color: #575757;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu > ul > li.active > a {
-  background-color: #282828;
+.typo3-topbar-navigation .btn.btn-default:active,
+.typo3-topbar-navigation .btn.btn-default.active,
+.open > .dropdown-toggle.typo3-topbar-navigation .btn.btn-default {
+  background-image: none;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu > ul > li.typo3-module-menu-item {
-  margin: 1px 0;
+.typo3-topbar-navigation .btn.btn-default.disabled,
+.typo3-topbar-navigation .btn.btn-default[disabled],
+fieldset[disabled] .typo3-topbar-navigation .btn.btn-default,
+.typo3-topbar-navigation .btn.btn-default.disabled:hover,
+.typo3-topbar-navigation .btn.btn-default[disabled]:hover,
+fieldset[disabled] .typo3-topbar-navigation .btn.btn-default:hover,
+.typo3-topbar-navigation .btn.btn-default.disabled:focus,
+.typo3-topbar-navigation .btn.btn-default[disabled]:focus,
+fieldset[disabled] .typo3-topbar-navigation .btn.btn-default:focus,
+.typo3-topbar-navigation .btn.btn-default.disabled.focus,
+.typo3-topbar-navigation .btn.btn-default[disabled].focus,
+fieldset[disabled] .typo3-topbar-navigation .btn.btn-default.focus,
+.typo3-topbar-navigation .btn.btn-default.disabled:active,
+.typo3-topbar-navigation .btn.btn-default[disabled]:active,
+fieldset[disabled] .typo3-topbar-navigation .btn.btn-default:active,
+.typo3-topbar-navigation .btn.btn-default.disabled.active,
+.typo3-topbar-navigation .btn.btn-default[disabled].active,
+fieldset[disabled] .typo3-topbar-navigation .btn.btn-default.active {
+  background-color: #828282;
+  border-color: #757575;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu > ul > li.typo3-module-menu-item > a {
-  padding-top: 2px;
-  padding-bottom: 2px;
-  height: 36px;
+.typo3-topbar-navigation .btn.btn-default .badge {
+  color: #828282;
+  background-color: #ffffff;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu > ul > li.typo3-module-menu-item > a .typo3-app-icon {
-  display: block;
+.typo3-topbar-navigation .btn.btn-success {
+  color: #ffffff;
+  background-color: #1eb941;
+  border-color: #1aa339;
+}
+.typo3-topbar-navigation .btn.btn-success:hover,
+.typo3-topbar-navigation .btn.btn-success:focus,
+.typo3-topbar-navigation .btn.btn-success.focus,
+.typo3-topbar-navigation .btn.btn-success:active,
+.typo3-topbar-navigation .btn.btn-success.active,
+.open > .dropdown-toggle.typo3-topbar-navigation .btn.btn-success {
+  color: #ffffff;
+  background-color: #178d32;
+  border-color: #126e27;
+}
+.typo3-topbar-navigation .btn.btn-success:active,
+.typo3-topbar-navigation .btn.btn-success.active,
+.open > .dropdown-toggle.typo3-topbar-navigation .btn.btn-success {
+  background-image: none;
+}
+.typo3-topbar-navigation .btn.btn-success.disabled,
+.typo3-topbar-navigation .btn.btn-success[disabled],
+fieldset[disabled] .typo3-topbar-navigation .btn.btn-success,
+.typo3-topbar-navigation .btn.btn-success.disabled:hover,
+.typo3-topbar-navigation .btn.btn-success[disabled]:hover,
+fieldset[disabled] .typo3-topbar-navigation .btn.btn-success:hover,
+.typo3-topbar-navigation .btn.btn-success.disabled:focus,
+.typo3-topbar-navigation .btn.btn-success[disabled]:focus,
+fieldset[disabled] .typo3-topbar-navigation .btn.btn-success:focus,
+.typo3-topbar-navigation .btn.btn-success.disabled.focus,
+.typo3-topbar-navigation .btn.btn-success[disabled].focus,
+fieldset[disabled] .typo3-topbar-navigation .btn.btn-success.focus,
+.typo3-topbar-navigation .btn.btn-success.disabled:active,
+.typo3-topbar-navigation .btn.btn-success[disabled]:active,
+fieldset[disabled] .typo3-topbar-navigation .btn.btn-success:active,
+.typo3-topbar-navigation .btn.btn-success.disabled.active,
+.typo3-topbar-navigation .btn.btn-success[disabled].active,
+fieldset[disabled] .typo3-topbar-navigation .btn.btn-success.active {
+  background-color: #1eb941;
+  border-color: #1aa339;
+}
+.typo3-topbar-navigation .btn.btn-success .badge {
+  color: #1eb941;
+  background-color: #ffffff;
+}
+.typo3-topbar-navigation .btn.btn-danger {
+  color: #ffffff;
+  background-color: #c83c3c;
+  border-color: #b73434;
+}
+.typo3-topbar-navigation .btn.btn-danger:hover,
+.typo3-topbar-navigation .btn.btn-danger:focus,
+.typo3-topbar-navigation .btn.btn-danger.focus,
+.typo3-topbar-navigation .btn.btn-danger:active,
+.typo3-topbar-navigation .btn.btn-danger.active,
+.open > .dropdown-toggle.typo3-topbar-navigation .btn.btn-danger {
+  color: #ffffff;
+  background-color: #a32e2e;
+  border-color: #872626;
+}
+.typo3-topbar-navigation .btn.btn-danger:active,
+.typo3-topbar-navigation .btn.btn-danger.active,
+.open > .dropdown-toggle.typo3-topbar-navigation .btn.btn-danger {
+  background-image: none;
+}
+.typo3-topbar-navigation .btn.btn-danger.disabled,
+.typo3-topbar-navigation .btn.btn-danger[disabled],
+fieldset[disabled] .typo3-topbar-navigation .btn.btn-danger,
+.typo3-topbar-navigation .btn.btn-danger.disabled:hover,
+.typo3-topbar-navigation .btn.btn-danger[disabled]:hover,
+fieldset[disabled] .typo3-topbar-navigation .btn.btn-danger:hover,
+.typo3-topbar-navigation .btn.btn-danger.disabled:focus,
+.typo3-topbar-navigation .btn.btn-danger[disabled]:focus,
+fieldset[disabled] .typo3-topbar-navigation .btn.btn-danger:focus,
+.typo3-topbar-navigation .btn.btn-danger.disabled.focus,
+.typo3-topbar-navigation .btn.btn-danger[disabled].focus,
+fieldset[disabled] .typo3-topbar-navigation .btn.btn-danger.focus,
+.typo3-topbar-navigation .btn.btn-danger.disabled:active,
+.typo3-topbar-navigation .btn.btn-danger[disabled]:active,
+fieldset[disabled] .typo3-topbar-navigation .btn.btn-danger:active,
+.typo3-topbar-navigation .btn.btn-danger.disabled.active,
+.typo3-topbar-navigation .btn.btn-danger[disabled].active,
+fieldset[disabled] .typo3-topbar-navigation .btn.btn-danger.active {
+  background-color: #c83c3c;
+  border-color: #b73434;
+}
+.typo3-topbar-navigation .btn.btn-danger .badge {
+  color: #c83c3c;
+  background-color: #ffffff;
+}
+.typo3-topbar-navigation .shortcut {
+  min-width: 180px;
+}
+.typo3-topbar-navigation .shortcut-form {
+  padding: 16px;
+  margin: 4px -16px;
+  border-top: 1px solid #373737;
+  background-color: #2b2b2b;
+  border-bottom: 1px solid #111111;
+}
+.typo3-topbar-navigation-items {
+  height: 45px;
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
   float: left;
-  margin-right: 10px;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu > ul > li.typo3-module-menu-item > a .submodule-label {
+.typo3-topbar-navigation-items a {
+  color: #dddddd;
+  text-decoration: none;
+}
+.typo3-topbar-navigation-items > li {
+  float: left;
+  height: 45px;
+}
+.typo3-topbar-navigation-items > li > a {
+  position: relative;
   display: block;
-  padding-left: 42px;
-  padding-top: 8px;
+  padding: 13.5px 10px;
+  border-left: 1px solid #2b2b2b;
+  border-right: 1px solid #111111;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu > p {
-  padding: 3px 20px;
+.typo3-topbar-navigation-items > li > a:hover,
+.typo3-topbar-navigation-items > li > a:focus,
+.typo3-topbar-navigation-items > li > a:active {
+  color: #ffffff;
+  background-color: #333333;
+  border-left-color: #3b3b3b;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu > table {
-  width: 100%;
+.typo3-topbar-navigation-items > li.open > a {
+  color: #ffffff;
+  background-color: #484848;
+  border-left-color: #505050;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu > table > thead > tr > td {
-  display: block;
-  padding: 3px 20px;
-  font-size: 11px;
-  line-height: 1.5;
-  color: #d7d7d7;
+.typo3-topbar-navigation-items .dropdown {
+  min-width: 45px;
+  text-align: center;
+}
+.typo3-topbar-navigation-items .dropdown > a > .fa {
+  font-size: 16px;
+  margin: 0;
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  width: auto;
+  height: auto;
+}
+.typo3-topbar-navigation-items .dropdown-toggle {
+  position: relative;
+}
+.typo3-topbar-navigation-items .dropdown-toggle .badge {
+  display: none;
+  font-size: 10px;
+  min-width: 15px;
+  height: 15px;
+  position: absolute;
+  padding: 0;
+  border-radius: 2px;
+  line-height: 15px;
+  bottom: 5px;
+  right: 5px;
+}
+.typo3-topbar-navigation-items .dropdown-menu {
+  margin: 0;
+  padding: 8px 16px;
+  color: #dddddd;
+  background-color: #222222;
+  border-color: #111111;
+  border-top: 1px solid #444444;
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0 0 2px 2px;
+  -webkit-box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.15);
+  box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.15);
+}
+.typo3-topbar-navigation-items .dropdown-menu a {
+  color: #dddddd;
   white-space: nowrap;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu > table > tbody > tr > td > a {
-  color: #ffffff;
-  display: block;
-  padding: 3px 20px;
+.typo3-topbar-navigation-items .dropdown-menu > *:last-child {
+  margin-bottom: 0;
+}
+.typo3-topbar-navigation-items .dropdown-list {
+  padding-left: 0;
+  list-style: none;
+}
+.typo3-topbar-navigation-items .dropdown-list > li {
+  position: relative;
+}
+.typo3-topbar-navigation-items .dropdown-list > li:before,
+.typo3-topbar-navigation-items .dropdown-list > li:after {
+  content: " ";
+  display: table;
+}
+.typo3-topbar-navigation-items .dropdown-list > li:after {
   clear: both;
-  font-weight: normal;
-  line-height: 1.5;
-  white-space: nowrap;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu > table > tbody > tr > td > a.active > a {
-  background-color: #282828;
+.typo3-topbar-navigation-items .dropdown-list > li:before,
+.typo3-topbar-navigation-items .dropdown-list > li:after {
+  content: " ";
+  display: table;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu > table > tbody > tr > td.shortcut-edit > a,
-#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu > table > tbody > tr > td.shortcut-delete > a {
-  padding: 3px 5px;
+.typo3-topbar-navigation-items .dropdown-list > li:after {
+  clear: both;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu li a,
-#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu td a {
+.typo3-topbar-navigation-items .dropdown-list > li.active .dropdown-list-link {
+  background-color: #484848;
   color: #ffffff;
-  text-decoration: none;
 }
-#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu li a:hover,
-#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu td a:hover {
-  background-color: #353535;
-  color: #ffffff;
-  text-decoration: none;
+.typo3-topbar-navigation-items .dropdown-list > li + li {
+  margin-top: 1px;
 }
-/* - - - - - - - - - - - - - - - - - - - - -
-Shortcuts menu
-- - - - - - - - - - - - - - - - - - - - - */
-#shortcut-menu .shortcut-list {
-  width: 100%;
+.typo3-topbar-navigation-items .dropdown-list > li.divider + li {
+  margin-top: 0;
 }
-#shortcut-menu .shortcut-list tr.shortcut td {
-  padding: 2px 1px;
+.typo3-topbar-navigation-items .dropdown-list .divider {
+  border-top: 1px solid #111111;
+  background-color: #2b2b2b;
+  margin: 8px 0;
+  padding: 0;
+  padding-top: 1px;
+  margin-left: -16px;
+  margin-right: -16px;
 }
-#shortcut-menu .shortcut-list tr.shortcut-group td.shortcut-group-icon,
-#shortcut-menu .shortcut-list tr.shortcut td.shortcut-icon,
-#shortcut-menu .shortcut-list td.shortcut-edit,
-#shortcut-menu .shortcut-list td.shortcut-delete {
-  text-align: center;
+.typo3-topbar-navigation-items .dropdown-list .modlink {
+  width: 210px;
 }
-#shortcut-menu .shortcut-list tr.shortcut td.shortcut-edit img,
-#shortcut-menu .shortcut-list tr.shortcut td.shortcut-delete img {
-  cursor: pointer;
+.typo3-topbar-navigation-items .dropdown-list .modlink:before,
+.typo3-topbar-navigation-items .dropdown-list .modlink:after {
+  content: " ";
+  display: table;
 }
-#shortcut-menu .shortcut-list tr.shortcut-group td.shortcut-group-icon,
-#shortcut-menu .shortcut-list tr.shortcut td.shortcut-icon,
-#shortcut-menu .shortcut-list td.shortcut-edit,
-#shortcut-menu .shortcut-list td.shortcut-delete {
-  vertical-align: top;
-  width: 18px;
+.typo3-topbar-navigation-items .dropdown-list .modlink:after {
+  clear: both;
 }
-#shortcut-menu .shortcut-list tr.shortcut td.shortcut-label a {
+.typo3-topbar-navigation-items .dropdown-list .modlink:before,
+.typo3-topbar-navigation-items .dropdown-list .modlink:after {
+  content: " ";
+  display: table;
+}
+.typo3-topbar-navigation-items .dropdown-list .modlink:after {
+  clear: both;
+}
+.typo3-topbar-navigation-items .dropdown-list .modlink .submodule-icon {
+  float: left;
+  margin-right: 10px;
+}
+.typo3-topbar-navigation-items .dropdown-list .modlink .submodule-label {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding-top: 7px;
   display: block;
+  overflow: hidden;
+  *zoom: 1;
 }
-#shortcut-menu .shortcut-list tr.shortcut td.shortcut-edit img,
-#shortcut-menu .shortcut-list tr.shortcut td.shortcut-delete img {
-  display: none;
+.typo3-topbar-navigation-items .dropdown-list .dropdown-header {
+  font-size: 1em;
+  margin-left: -16px;
+  margin-right: -16px;
+  padding: 8px 16px;
 }
-#shortcut-menu .shortcut-list tr.shortcut:hover td.shortcut-edit img,
-#shortcut-menu .shortcut-list tr.shortcut:hover td.shortcut-delete img {
-  display: inline;
+.typo3-topbar-navigation-items .dropdown-list-link {
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  text-decoration: none;
+  cursor: pointer;
+  white-space: nowrap;
+  color: #dddddd;
+  margin-left: -16px;
+  margin-right: -16px;
+  padding: 4px 16px;
 }
-#shortcut-menu .shortcut-list tr.shortcut-group td.shortcut-group-icon,
-#shortcut-menu .shortcut-list tr.shortcut td.shortcut-icon {
-  padding-left: 7px;
-  vertical-align: top;
+.typo3-topbar-navigation-items .dropdown-list-link:hover {
+  color: #ffffff;
+  background-color: #333333;
 }
-/* - - - - - - - - - - - - - - - - - - - - -
-Username inside the toolbar
-- - - - - - - - - - - - - - - - - - - - - */
-#topbar-user-menu.su-user a {
-  color: #eb6e5a;
+.typo3-topbar-navigation-items .dropdown-list-link-edit,
+.typo3-topbar-navigation-items .dropdown-list-link-delete,
+.typo3-topbar-navigation-items .dropdown-list-link-close {
+  display: table;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -8px;
+  padding: 0;
+  text-align: center;
+  width: 26px;
+  height: 26px;
 }
-/* - - - - - - - - - - - - - - - - - - - - -
-Workspace Selector
-- - - - - - - - - - - - - - - - - - - - - */
-#workspace-selector-menu ul li span.t3-icon {
-  float: left;
-  margin-top: 0;
-  margin-right: 2px;
+.typo3-topbar-navigation-items .dropdown-list-link-edit .t3-icon,
+.typo3-topbar-navigation-items .dropdown-list-link-delete .t3-icon,
+.typo3-topbar-navigation-items .dropdown-list-link-close .t3-icon {
+  display: table-cell;
+  margin: 0;
+  height: auto;
+  width: auto;
 }
-#workspace-selector-menu ul li img {
-  float: left;
-  position: relative;
-  margin-right: 2px;
+.typo3-topbar-navigation-items .dropdown-list-link-edit:hover,
+.typo3-topbar-navigation-items .dropdown-list-link-delete:hover,
+.typo3-topbar-navigation-items .dropdown-list-link-close:hover {
+  color: #ffffff;
+  background-color: #333333;
 }
-#workspace-selector-menu .items {
-  list-style: none;
-  overflow-y: auto;
-  max-height: 300px;
+.typo3-topbar-navigation-items .dropdown-list-link-edit {
+  right: 18px;
 }
-body.typo3-in-workspace #typo3-top-container {
-  background-image: url('../../../../images/backgrounds/topbar-in-workspace-background-left.png'), url('../../../../images/backgrounds/topbar-in-workspace-background-right.png'), url('../../../../images/backgrounds/topbar-in-workspace-background.gif');
-  background-repeat: no-repeat, no-repeat, repeat-x;
-  background-position: left top, right top, left top;
+.typo3-topbar-navigation-items .dropdown-list-link-delete:hover,
+.typo3-topbar-navigation-items .dropdown-list-link-close:hover {
+  color: #ffffff;
+  background-color: #c83c3c;
 }
-/* - - - - - - - - - - - - - - - - - - - - -
-Live Search
-- - - - - - - - - - - - - - - - - - - - - */
-#typo3-toolbar #live-search-menu {
-  padding-top: 13px;
-  padding-left: 15px;
-  padding-right: 15px;
+.typo3-topbar-navigation-items .dropdown-link-list-add-close {
+  padding-right: 50px;
 }
-.t3-icon-input-clear {
-  cursor: pointer;
+.typo3-topbar-navigation-items .dropdown-link-list-add-editdelete {
+  padding-right: 85px;
+}
+.typo3-topbar-navigation-items .topbar-workspaces-title {
+  margin-left: 3px;
+}
+.typo3-topbar-navigation-search {
+  position: relative;
+  padding: 0;
+  margin: 0;
+}
+.typo3-topbar-navigation-search .form-group:before {
+  content: "\f002";
+  font: normal normal normal 14px/1 FontAwesome;
   position: absolute;
-  top: 0px;
-  right: 20px;
+  top: 50%;
+  left: 15px;
+  margin-top: -8px;
+  z-index: 1;
 }
-.live-search-box .x-form-field-wrap {
-  display: inline-block;
+.typo3-topbar-navigation-search .form-control {
+  box-sizing: content-box;
+  background-color: #222222;
+  color: #dddddd;
+  height: 18px;
+  padding-left: 35px;
+  padding-right: 30px;
+  padding-top: 14px;
+  padding-bottom: 13px;
+  border: none;
+  border-left: 1px solid #2b2b2b;
+  border-radius: 0;
+}
+.typo3-topbar-navigation-search .form-control:hover {
+  border-left-color: #373737;
+  background-color: #333333;
+}
+.typo3-topbar-navigation-search .form-control:focus {
+  outline: none;
+  border-left-color: #373737;
+  background-color: #484848;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.typo3-topbar-navigation-search .form-control + .t3-icon {
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  margin-right: 0;
+  margin-top: -8px;
 }
 .live-search-list {
-  background-color: white;
+  margin: 0;
+  padding: 8px 16px;
+  color: #dddddd;
+  background-color: #222222;
+  border-color: #111111;
+  border-top: 1px solid #444444;
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0 0 2px 2px;
+  -webkit-box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.15);
+  box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.15);
+  padding: 0;
+}
+.live-search-list a {
+  color: #dddddd;
+  white-space: nowrap;
+}
+.live-search-list > *:last-child {
+  margin-bottom: 0;
+}
+.live-search-list .x-toolbar {
+  padding: 0;
   border: none;
+  background: transparent;
 }
-.live-search-list .x-combo-list {
-  background-color: white;
+.live-search-list .x-combo-list-hd,
+.live-search-list .x-combo-list-inner,
+.live-search-list .x-combo-list-ft {
+  border: none;
+  background: transparent;
+  color: #dddddd;
 }
-.live-search-list .search-item-type {
-  border-right: 1px solid #ddd;
-  padding: 2px 5px 2px 0;
+.live-search-list .x-combo-list-hd,
+.live-search-list .x-combo-list-inner,
+.live-search-list .x-combo-list-ft {
+  padding: 16px;
 }
-.live-search-list .search-item-content {
-  padding: 0 8px;
+.live-search-list .x-combo-list-hd {
+  background-color: #2a2a2a;
+  border-top: 0;
+  border-bottom: 1px solid #111111;
 }
-.live-search-list .search-item-content .search-item-title {
-  padding: 2px;
-  border: none !important;
+.live-search-list .x-combo-list-ft {
+  padding-top: 0;
+  border-bottom: 0;
 }
 .live-search-list .x-combo-list-inner {
-  padding-bottom: 5px;
+  padding-right: 0;
+  border-top: 1px solid #2b2b2b;
 }
-.live-search-list .x-combo-list-hd {
+.live-search-list .x-btn {
   background: none;
   border: none;
-  margin-left: 110px;
-  color: #ddd;
+  color: inherit;
+}
+.live-search-list .x-btn .x-btn-tl,
+.live-search-list .x-btn .x-btn-tc,
+.live-search-list .x-btn .x-btn-tr,
+.live-search-list .x-btn .x-btn-ml,
+.live-search-list .x-btn .x-btn-mr,
+.live-search-list .x-btn .x-btn-bl,
+.live-search-list .x-btn .x-btn-bc,
+.live-search-list .x-btn .x-btn-br {
+  display: none;
+}
+.live-search-list .x-btn button {
+  display: inline-block;
+  margin-bottom: 0;
+  font-weight: normal;
+  text-align: center;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  padding: 6px 6px;
+  font-size: 12px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  padding: 4px 4px;
+  font-size: 11px;
+  line-height: 1.5;
+  border-radius: 2px;
+  color: #ffffff;
+  background-color: #828282;
+  border-color: #757575;
+  height: auto!important;
+}
+.live-search-list .x-btn button:focus,
+.live-search-list .x-btn button:active:focus,
+.live-search-list .x-btn button.active:focus,
+.live-search-list .x-btn button.focus,
+.live-search-list .x-btn button:active.focus,
+.live-search-list .x-btn button.active.focus {
+  outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+.live-search-list .x-btn button:hover,
+.live-search-list .x-btn button:focus,
+.live-search-list .x-btn button.focus {
+  color: #ffffff;
+  text-decoration: none;
+}
+.live-search-list .x-btn button:active,
+.live-search-list .x-btn button.active {
+  outline: 0;
+  background-image: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+.live-search-list .x-btn button.disabled,
+.live-search-list .x-btn button[disabled],
+fieldset[disabled] .live-search-list .x-btn button {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.65;
+  filter: alpha(opacity=65);
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.live-search-list .x-btn button:hover,
+.live-search-list .x-btn button:focus,
+.live-search-list .x-btn button.focus,
+.live-search-list .x-btn button:active,
+.live-search-list .x-btn button.active,
+.open > .dropdown-toggle.live-search-list .x-btn button {
+  color: #ffffff;
+  background-color: #696969;
+  border-color: #575757;
+}
+.live-search-list .x-btn button:active,
+.live-search-list .x-btn button.active,
+.open > .dropdown-toggle.live-search-list .x-btn button {
+  background-image: none;
+}
+.live-search-list .x-btn button.disabled,
+.live-search-list .x-btn button[disabled],
+fieldset[disabled] .live-search-list .x-btn button,
+.live-search-list .x-btn button.disabled:hover,
+.live-search-list .x-btn button[disabled]:hover,
+fieldset[disabled] .live-search-list .x-btn button:hover,
+.live-search-list .x-btn button.disabled:focus,
+.live-search-list .x-btn button[disabled]:focus,
+fieldset[disabled] .live-search-list .x-btn button:focus,
+.live-search-list .x-btn button.disabled.focus,
+.live-search-list .x-btn button[disabled].focus,
+fieldset[disabled] .live-search-list .x-btn button.focus,
+.live-search-list .x-btn button.disabled:active,
+.live-search-list .x-btn button[disabled]:active,
+fieldset[disabled] .live-search-list .x-btn button:active,
+.live-search-list .x-btn button.disabled.active,
+.live-search-list .x-btn button[disabled].active,
+fieldset[disabled] .live-search-list .x-btn button.active {
+  background-color: #828282;
+  border-color: #757575;
+}
+.live-search-list .x-btn button .badge {
+  color: #828282;
+  background-color: #ffffff;
+}
+.live-search-list .search-item-type {
+  padding: 5px 20px 5px 0px;
+  white-space: nowrap;
+}
+.live-search-list .search-item-title {
+  border-radius: 2px 0px 0px 2px;
+  padding: 5px 20px 5px 10px;
+}
+.live-search-list .search-item-title.x-combo-selected {
+  border: none!important;
+  background-color: #3c3c3c;
 }
 .search-list-help-content {
-  margin: 13.5px 15px;
-  height: 100%;
-  color: #000000;
+  padding: 16px;
+}
+.search-list-help-content strong {
+  display: block;
+  margin-bottom: 0.5em;
+}
+.search-list-help-content p {
+  margin-top: 0.5em;
+  margin-bottom: 0;
 }
 /**
  * This file is part of the TYPO3 CMS project.
index 5e7adcc..a7d92c3 100644 (file)
@@ -158,26 +158,6 @@ button.x-btn-text:hover {
        color: inherit;
 }
 
-/* Toolbars */
-
-.x-toolbar{
-       border-color:#A2AAB8;
-       background:#EFEFF4 url(images/toolbar/bg.gif) repeat-x top left;
-}
-.x-toolbar button {
-       color:#333;
-}
-.x-toolbar .x-btn-menu-arrow-wrap .x-btn-center button {
-       background-image:url(images/toolbar/btn-arrow.gif);
-}
-.x-toolbar .x-btn-text-icon .x-btn-menu-arrow-wrap .x-btn-center button {
-       background-image:url(images/toolbar/btn-arrow.gif);
-}
-
-.x-btn {
-       margin-left: 1px;
-       margin-right: 1px;
-}
 
 /* Tabs */
 
@@ -868,39 +848,6 @@ ul.x-tab-strip-bottom{
 .x-btn-group-notitle .x-btn-group-tc {
        background-image: url(images/button/group-tb.gif);
 }
-.x-toolbar{
-       border-color:#A2AAB8;
-       background-color:#EFEFF4;
-       background-image:url(images/toolbar/bg.gif);
-}
-
-.x-toolbar .x-item-disabled {
-       color:gray;
-}
-
-.x-toolbar .x-btn-mc em.x-btn-split {
-       background-image:url(images/button/s-arrow-noline.gif);
-}
-
-.x-toolbar .x-btn-over .x-btn-mc em.x-btn-split, .x-toolbar .x-btn-click .x-btn-mc em.x-btn-split,
-.x-toolbar .x-btn-menu-active .x-btn-mc em.x-btn-split, .x-toolbar .x-btn-pressed .x-btn-mc em.x-btn-split
-{
-       background-image:url(images/button/s-arrow-o.gif);
-}
-
-.x-toolbar .x-btn-mc em.x-btn-split-bottom {
-       background-image:url(images/button/s-arrow-b-noline.gif);
-}
-
-.x-toolbar .x-btn-over .x-btn-mc em.x-btn-split-bottom, .x-toolbar .x-btn-click .x-btn-mc em.x-btn-split-bottom,
-.x-toolbar .x-btn-menu-active .x-btn-mc em.x-btn-split-bottom, .x-toolbar .x-btn-pressed .x-btn-mc em.x-btn-split-bottom
-{
-       background-image:url(images/button/s-arrow-bo.gif);
-}
-
-.x-toolbar .xtb-sep {
-       background-image: url(images/grid/grid-blue-split.gif);
-}
 
 .x-tbar-page-first{
        background-image: url(images/grid/page-first.gif) !important;
@@ -1790,40 +1737,11 @@ a.x-menu-item {
 #x-debug-browser .x-tree .x-tree-node .x-tree-selected a span{
        background-color:#d8d8d8;
 }
-.x-combo-list {
-       border-color:#bcbcbc;
-       background-color:#eaeaea;
-}
-
-.x-combo-list-inner {
-       background-color:#fff;
-}
-
-.x-combo-list-hd {
-       color:#55545E;
-       background-image: url(images/layout/panel-title-light-bg.gif);
-       border-bottom-color:#bcbcbc;
-}
 
 .x-resizable-pinned .x-combo-list-inner {
        border-bottom-color:#bcbcbc;
 }
 
-.x-combo-list-item {
-       border-color:#fff;
-}
-
-.x-combo-list .x-combo-selected{
-       border-color:#b9b9b9 !important;
-       background-color:#e7e7e7;
-}
-
-.x-combo-list .x-toolbar {
-       border-top-color:#bcbcbc;
-}
-
-.x-combo-list-small {
-}
 .x-panel {
        border-color: #A2AAB8;
 }
diff --git a/typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-background-left.png b/typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-background-left.png
deleted file mode 100755 (executable)
index 75f1ff1..0000000
Binary files a/typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-background-left.png and /dev/null differ
diff --git a/typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-background-right.png b/typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-background-right.png
deleted file mode 100755 (executable)
index e46c225..0000000
Binary files a/typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-background-right.png and /dev/null differ
diff --git a/typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-background.gif b/typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-background.gif
deleted file mode 100755 (executable)
index b36584d..0000000
Binary files a/typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-background.gif and /dev/null differ
diff --git a/typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-mask.png b/typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-mask.png
deleted file mode 100644 (file)
index 6cfd9b4..0000000
Binary files a/typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-mask.png and /dev/null differ
index eaa79de..95298d5 100644 (file)
@@ -91,7 +91,7 @@ class WorkspaceSelectorToolbarItem implements ToolbarItemInterface {
                        $classValue = ($workspaceId === $activeWorkspace ? ' class="selected"' : '');
                        $sectionName = ($index++ === 0 ? 'top' : 'items');
                        $workspaceSections[$sectionName][] = '<li' . $classValue . '>'
-                               . '<a href="backend.php?changeWorkspace=' . $workspaceId . '" data-workspaceid="' . $workspaceId . '" class="tx-workspaces-switchlink">'
+                               . '<a href="backend.php?changeWorkspace=' . $workspaceId . '" data-workspaceid="' . $workspaceId . '" class="dropdown-list-link tx-workspaces-switchlink">'
                                . $iconState . ' ' . htmlspecialchars($label)
                                . '</a></li>';
                }
@@ -100,7 +100,7 @@ class WorkspaceSelectorToolbarItem implements ToolbarItemInterface {
                        // Add the "Go to workspace module" link
                        // if there is at least one icon on top and if the access rights are there
                        if ($backendUser->check('modules', 'web_WorkspacesWorkspaces')) {
-                               $workspaceSections['top'][] = '<li><a target="content" data-module="web_WorkspacesWorkspaces" class="tx-workspaces-modulelink">'
+                               $workspaceSections['top'][] = '<li><a target="content" data-module="web_WorkspacesWorkspaces" class="dropdown-list-link tx-workspaces-modulelink">'
                                        . $stateUncheckedIcon . ' ' . $languageService->getLL('bookmark_workspace', TRUE)
                                        . '</a></li>';
                        }
@@ -110,7 +110,7 @@ class WorkspaceSelectorToolbarItem implements ToolbarItemInterface {
                }
 
                $workspaceMenu = array(
-                       '<ul>' ,
+                       '<ul class="dropdown-list">' ,
                                implode(LF, $workspaceSections['top']),
                                (!empty($workspaceSections['items']) ? '<li class="divider"></li>' : ''),
                                implode(LF, $workspaceSections['items']),
index 06ad04e..c195d93 100644 (file)
@@ -102,7 +102,7 @@ define('TYPO3/CMS/Workspaces/Toolbar/WorkspacesMenu', ['jquery'], function($) {
                WorkspacesMenu.updateBackendContext(title);
 
                // first remove all checks, then set the check in front of the selected workspace
-               var stateActiveClass = 't3-icon t3-icon-status t3-icon-status-status t3-icon-status-checked';
+               var stateActiveClass = 't3-icon fa fa-check';
                var stateInactiveClass = 't3-icon t3-icon-empty t3-icon-empty-empty t3-icon-empty';
 
                // remove "selected" class and checkmark