[TASK] Improve styling of page module 35/38135/5
authorBenjamin Kott <benjamin.kott@wfp2.com>
Tue, 24 Mar 2015 22:23:16 +0000 (23:23 +0100)
committerMarkus Klein <klein.t3@reelworx.at>
Wed, 25 Mar 2015 01:51:50 +0000 (02:51 +0100)
- Improve dropzones
- Improve button sizes
- Improve color balance
- Cleanup LESS

Releases: master
Resolves: #65999
Change-Id: If092627ae355bcfec63947ee811977786c47d3ba
Reviewed-on: http://review.typo3.org/38135
Reviewed-by: Michael Oehlhof <typo3@oehlhof.de>
Tested-by: Michael Oehlhof <typo3@oehlhof.de>
Reviewed-by: Markus Klein <klein.t3@reelworx.at>
Tested-by: Markus Klein <klein.t3@reelworx.at>
typo3/sysext/backend/Classes/View/PageLayoutView.php
typo3/sysext/backend/Resources/Public/JavaScript/LayoutModule/DragDrop.js
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_module_web_page.less [new file with mode: 0644]
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_module_web_page.less [deleted file]
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/visual/_module_web_page.less [deleted file]
typo3/sysext/t3skin/Resources/Private/Styles/t3skin.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css

index ab2c088..6cf15cd 100644 (file)
@@ -451,7 +451,7 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                        $content[$key] .= '">';
                                        // Add new content at the top most position
                                        $content[$key] .= '
-                                       <div class="t3-page-ce" data-page="' . (int)$id . '" id="' . str_replace('.', '', uniqid('', TRUE)) . '">
+                                       <div class="t3-page-ce t3js-page-ce" data-page="' . (int)$id . '" id="' . str_replace('.', '', uniqid('', TRUE)) . '">
                                                <div class="t3js-page-new-ce t3-page-ce-wrapper-new-ce" id="colpos-' . $key . '-' . 'page-' . $id . '-' . uniqid('', TRUE) . '">
                                                        <a href="#" onclick="' . htmlspecialchars($this->newContentElementOnClick($id, $key, $lP))
                                                                . '" title="' . $this->getLanguageService()->getLL('newContentElement', TRUE) . '" class="btn btn-default btn-sm">'
@@ -459,7 +459,7 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                                                . ' '
                                                                . $this->getLanguageService()->getLL('content', TRUE) . '</a>
                                                </div>
-                                               <div class="t3-page-ce-dropzone-available"></div>
+                                               <div class="t3-page-ce-dropzone-available t3js-page-ce-dropzone-available"></div>
                                        </div>
                                        ';
                                        $editUidList = '';
@@ -498,10 +498,10 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                                        $singleElementHTML .= '<div class="t3-page-ce-body-inner">' . $innerContent . '</div>'
                                                                . $this->tt_content_drawFooter($row);
                                                        $statusHidden = $this->isDisabled('tt_content', $row) ? ' t3-page-ce-hidden' : '';
-                                                       $singleElementHTML = '<div class="t3-page-ce t3js-page-ce-sortable ' . $statusHidden . '" id="element-tt_content-'
+                                                       $singleElementHTML = '<div class="t3-page-ce t3js-page-ce t3js-page-ce-sortable ' . $statusHidden . '" id="element-tt_content-'
                                                                . $row['uid'] . '" data-table="tt_content" data-uid="' . $row['uid'] . '">' . $singleElementHTML . '</div>';
                                                        if ($this->tt_contentConfig['languageMode']) {
-                                                               $singleElementHTML .= '<div class="t3-page-ce">';
+                                                               $singleElementHTML .= '<div class="t3-page-ce t3js-page-ce">';
                                                        }
                                                        $singleElementHTML .= '<div class="t3js-page-new-ce t3-page-ce-wrapper-new-ce" id="colpos-' . $key . '-' . 'page-' . $id .
                                                                '-' . str_replace('.', '', uniqid('', TRUE)) . '">';
@@ -525,7 +525,7 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                                                                . $this->getLanguageService()->getLL('content', TRUE) . '</a>
                                                                ';
                                                        }
-                                                       $singleElementHTML .= '</div></div><div class="t3-page-ce-dropzone-available"></div></div>';
+                                                       $singleElementHTML .= '</div></div><div class="t3-page-ce-dropzone-available t3js-page-ce-dropzone-available"></div></div>';
                                                        if ($this->defLangBinding && $this->tt_contentConfig['languageMode']) {
                                                                $defLangBinding[$key][$lP][$row[$lP ? 'l18n_parent' : 'uid']] = $singleElementHTML;
                                                        } else {
@@ -572,7 +572,7 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                } else {
                                        $backendLayout = $this->getBackendLayoutView()->getSelectedBackendLayout($this->id);
                                        // GRID VIEW:
-                                       $grid = '<div class="t3-gridContainer"><table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%" class="t3-page-columns t3-gridTable">';
+                                       $grid = '<div class="t3-grid-container"><table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%" class="t3-page-columns t3-grid-table t3js-page-columns">';
                                        // Add colgroups
                                        $colCount = (int)$backendLayout['__config']['backend_layout.']['colCount'];
                                        $rowCount = (int)$backendLayout['__config']['backend_layout.']['rowCount'];
@@ -601,9 +601,9 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                                        $grid .= '<td valign="top"' .
                                                                ($colSpan > 0 ? ' colspan="' . $colSpan . '"' : '') .
                                                                ($rowSpan > 0 ? ' rowspan="' . $rowSpan . '"' : '') .
-                                                               ' data-colpos="' . (int)$columnConfig['colPos'] . '" data-language-uid="' . $lP . '" class="t3js-page-lang-column-' . $lP . ' t3-gridCell t3-page-column t3-page-column-' . $columnKey .
-                                                               ((!isset($columnConfig['colPos']) || $columnConfig['colPos'] === '') ? ' t3-gridCell-unassigned' : '') .
-                                                               ((isset($columnConfig['colPos']) && $columnConfig['colPos'] !== '' && !$head[$columnKey]) || !GeneralUtility::inList($this->tt_contentConfig['activeCols'], $columnConfig['colPos']) ? ' t3-gridCell-restricted' : '') .
+                                                               ' data-colpos="' . (int)$columnConfig['colPos'] . '" data-language-uid="' . $lP . '" class="t3js-page-lang-column-' . $lP . ' t3js-page-column t3-grid-cell t3-page-column t3-page-column-' . $columnKey .
+                                                               ((!isset($columnConfig['colPos']) || $columnConfig['colPos'] === '') ? ' t3-grid-cell-unassigned' : '') .
+                                                               ((isset($columnConfig['colPos']) && $columnConfig['colPos'] !== '' && !$head[$columnKey]) || !GeneralUtility::inList($this->tt_contentConfig['activeCols'], $columnConfig['colPos']) ? ' t3-grid-cell-restricted' : '') .
                                                                ($colSpan > 0 ? ' t3-gridCell-width' . $colSpan : '') .
                                                                ($rowSpan > 0 ? ' t3-gridCell-height' . $rowSpan : '') . '">';
 
@@ -656,8 +656,8 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                        // Header:
                                        $lP = (int)$lP;
                                        $cCont[$lP] = '
-                                               <td valign="top" class="t3-page-lang-column" data-language-uid="' . $lP . '">
-                                                       <h3>' . htmlspecialchars($this->tt_contentConfig['languageCols'][$lP]) . '</h3>
+                                               <td valign="top" class="t3-page-column" data-language-uid="' . $lP . '">
+                                                       <h2>' . htmlspecialchars($this->tt_contentConfig['languageCols'][$lP]) . '</h2>
                                                </td>';
 
                                        // "View page" icon is added:
@@ -682,7 +682,7 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                                $lPLabel = $viewLink;
                                        }
                                        $sCont[$lP] = '
-                                               <td nowrap="nowrap" class="t3-page-lang-column t3-page-lang-label">' . $lPLabel . '</td>';
+                                               <td nowrap="nowrap" class="t3-page-column t3-page-lang-label">' . $lPLabel . '</td>';
                                }
                                // Add headers:
                                $out .= '<tr>' . implode($cCont) . '</tr>';
@@ -693,7 +693,7 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                foreach ($languageColumn as $cKey => $cCont) {
                                        $out .= '<tr>';
                                        foreach ($cCont as $languageId => $columnContent) {
-                                               $out .= '<td valign="top" class="t3-gridCell t3-page-column t3-page-lang-column t3js-page-lang-column t3js-page-lang-column-' . $languageId . '">' . $columnContent . '</td>';
+                                               $out .= '<td valign="top" class="t3-grid-cell t3-page-column t3js-page-column t3js-page-lang-column t3js-page-lang-column-' . $languageId . '">' . $columnContent . '</td>';
                                        }
                                        $out .= '</tr>';
                                        if ($this->defLangBinding) {
@@ -708,23 +708,16 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                                        }
                                                        $out .= '
                                                        <tr>
-                                                               <td valign="top" class="t3-page-lang-column">' . implode(('</td>' . '
-                                                               <td valign="top" class="t3-page-lang-column">'), $cCont) . '</td>
+                                                               <td valign="top" class="t3-grid-cell">' . implode(('</td>' . '
+                                                               <td valign="top" class="t3-grid-cell">'), $cCont) . '</td>
                                                        </tr>';
                                                }
-                                               // Create spacer:
-                                               $cCont = array_fill(0, count($langListArr), '&nbsp;');
-                                               $out .= '
-                                               <tr>
-                                                       <td valign="top" class="t3-page-lang-column">' . implode(('</td>' . '
-                                                       <td valign="top" class="t3-page-lang-column">'), $cCont) . '</td>
-                                               </tr>';
                                        }
                                }
                                // Finally, wrap it all in a table and add the language selector on top of it:
                                $out = $languageSelector . '
-                                       <div class="t3-lang-gridContainer">
-                                               <table cellpadding="0" cellspacing="0" class="t3-page-columns t3-page-langMode">
+                                       <div class="t3-grid-container">
+                                               <table cellpadding="0" cellspacing="0" class="t3-page-columns t3-grid-table t3js-page-columns">
                                                        ' . $out . '
                                                </table>
                                        </div>';
@@ -831,7 +824,7 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                }
                                // Finally, wrap all table rows in one, big table:
                                $out = '
-                                       <table border="0" cellpadding="0" cellspacing="0" width="400" class="typo3-page-columnsMode">
+                                       <table border="0" cellpadding="0" cellspacing="0" width="400" class="t3-page-columns-mode">
                                                ' . $out . '
                                        </table>';
                                // CSH:
@@ -1265,12 +1258,12 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                }
                $icons = '';
                if (count($iconsArr)) {
-                       $icons = '<div class="t3-page-colHeader-icons">' . implode('', $iconsArr) . '</div>';
+                       $icons = '<div class="t3-page-column-header-icons">' . implode('', $iconsArr) . '</div>';
                }
                // Create header row:
-               $out = '<div class="t3-page-colHeader t3-row-header">
+               $out = '<div class="t3-page-column-header">
                                        ' . $icons . '
-                                       <div class="t3-page-colHeader-label">' . htmlspecialchars($colName) . '</div>
+                                       <div class="t3-page-column-header-label">' . htmlspecialchars($colName) . '</div>
                                </div>';
                return $out;
        }
@@ -1330,7 +1323,7 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                        if ($this->tt_contentConfig['showCommands'] && $this->doEdit) {
                                // Edit content element:
                                $params = '&edit[tt_content][' . $this->tt_contentData['nextThree'][$row['uid']] . ']=edit';
-                               $out .= '<a href="#" onclick="' . htmlspecialchars(BackendUtility::editOnClick(
+                               $out .= '<a class="btn btn-default" href="#" onclick="' . htmlspecialchars(BackendUtility::editOnClick(
                                                $params,
                                                $this->backPath,
                                                GeneralUtility::getIndpEnv('REQUEST_URI') . '#element-tt_content-' . $row['uid']
@@ -1354,7 +1347,7 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                        }
                                        $params = '&data[tt_content][' . ($row['_ORIG_uid'] ? $row['_ORIG_uid'] : $row['uid'])
                                                . '][' . $hiddenField . ']=' . $value;
-                                       $out .= '<a href="' . htmlspecialchars($this->getPageLayoutController()->doc->issueCommand($params))
+                                       $out .= '<a class="btn btn-default" href="' . htmlspecialchars($this->getPageLayoutController()->doc->issueCommand($params))
                                                . '" title="' . $this->getLanguageService()->getLL($label, TRUE) . '">'
                                                . IconUtility::getSpriteIcon('actions-edit-' . strtolower($label)) . '</a>';
                                }
@@ -1364,17 +1357,20 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                        . BackendUtility::translationCount('tt_content', $row['uid'], (' '
                                                . $this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:labels.translationsOfRecord')))
                                );
-                               $out .= '<a href="' . htmlspecialchars($this->getPageLayoutController()->doc->issueCommand($params))
+                               $out .= '<a class="btn btn-default" href="' . htmlspecialchars($this->getPageLayoutController()->doc->issueCommand($params))
                                        . '" onclick="' . htmlspecialchars(('return confirm(' . $confirm . ');')) . '" title="'
                                        . $this->getLanguageService()->getLL('deleteItem', TRUE) . '">'
                                        . IconUtility::getSpriteIcon('actions-edit-delete') . '</a>';
+                               if ($out) {
+                                       $out = '<div class="btn-group btn-group-sm" role="group">' . $out . '</div>';
+                               }
                                if (!$disableMoveAndNewButtons) {
                                        $moveButtonContent = '';
                                        $displayMoveButtons = FALSE;
                                        // Move element up:
                                        if ($this->tt_contentData['prev'][$row['uid']]) {
                                                $params = '&cmd[tt_content][' . $row['uid'] . '][move]=' . $this->tt_contentData['prev'][$row['uid']];
-                                               $moveButtonContent .= '<a href="'
+                                               $moveButtonContent .= '<a class="btn btn-default" href="'
                                                        . htmlspecialchars($this->getPageLayoutController()->doc->issueCommand($params))
                                                        . '" title="' . $this->getLanguageService()->getLL('moveUp', TRUE) . '">'
                                                        . IconUtility::getSpriteIcon('actions-move-up') . '</a>';
@@ -1382,12 +1378,12 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                                        $displayMoveButtons = TRUE;
                                                }
                                        } else {
-                                               $moveButtonContent .= IconUtility::getSpriteIcon('empty-empty');
+                                               $moveButtonContent .= '<span class="btn btn-default disabled">' . IconUtility::getSpriteIcon('empty-empty') . '</span>';
                                        }
                                        // Move element down:
                                        if ($this->tt_contentData['next'][$row['uid']]) {
                                                $params = '&cmd[tt_content][' . $row['uid'] . '][move]= ' . $this->tt_contentData['next'][$row['uid']];
-                                               $moveButtonContent .= '<a href="'
+                                               $moveButtonContent .= '<a class="btn btn-default" href="'
                                                        . htmlspecialchars($this->getPageLayoutController()->doc->issueCommand($params))
                                                        . '" title="' . $this->getLanguageService()->getLL('moveDown', TRUE) . '">'
                                                        . IconUtility::getSpriteIcon('actions-move-down') . '</a>';
@@ -1395,10 +1391,10 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                                        $displayMoveButtons = TRUE;
                                                }
                                        } else {
-                                               $moveButtonContent .= IconUtility::getSpriteIcon('empty-empty');
+                                               $moveButtonContent .= '<span class="btn btn-default disabled">' . IconUtility::getSpriteIcon('empty-empty') . '</span>';
                                        }
                                        if ($displayMoveButtons) {
-                                               $out .= '<span class="t3-page-ce-icons-move">' . $moveButtonContent . '</span>';
+                                               $out .= '<div class="btn-group btn-group-sm" role="group">' . $moveButtonContent . '</div>';
                                        }
                                }
                        }
@@ -1421,13 +1417,10 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                }
                // Wrap the whole header
                // NOTE: end-tag for <div class="t3-page-ce-body"> is in getTable_tt_content()
-               return '<h4 class="t3-page-ce-header">
-                                       <div class="t3-row-header">
-                                       <span class="ce-icons-left">' . implode('', $additionalIcons) . '</span>
-                                       <span class="ce-icons">
-                                       ' . $out . '
-                                       </span></div>
-                               </h4>
+               return '<div class="t3-page-ce-header t3js-page-ce-draghandle">
+                                       <div class="t3-page-ce-header-icons-left">' . implode('', $additionalIcons) . '</div>
+                                       <div class="t3-page-ce-header-icons-right">' . ($out ? '<div class="btn-toolbar">' .$out . '</div>' : '') . '</div>
+                               </div>
                                <div class="t3-page-ce-body">';
        }
 
index 844ad40..f15adfb 100644 (file)
 define(['jquery', 'jquery-ui/sortable'], function ($) {
 
        var DragDrop = {
-               contentIdentifier: '.t3-page-ce',
-               dragIdentifier: '.t3-row-header',
-               dropZoneAvailableIdentifier: '.t3-page-ce-dropzone-available',
+               contentIdentifier: '.t3js-page-ce',
+               dragIdentifier: '.t3js-page-ce-draghandle',
+               dropZoneAvailableIdentifier: '.t3js-page-ce-dropzone-available',
                dropPossibleClass: 't3-page-ce-dropzone-possible',
                sortableItemsIdentifier: '.t3js-page-ce-sortable',
-               columnIdentifier: '.t3-page-column',
-               columnHolderIdentifier: 'table.t3-page-columns',
+               columnIdentifier: '.t3js-page-column',
+               columnHolderIdentifier: '.t3js-page-columns',
                addContentIdentifier: '.t3js-page-new-ce',
                langClassPrefix: '.t3js-sortable-lang-'
        };
diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_module_web_page.less b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_module_web_page.less
new file mode 100644 (file)
index 0000000..743380b
--- /dev/null
@@ -0,0 +1,206 @@
+//
+// Variables
+//
+@page-grid-spacing: 10px;
+@page-grid-cell-bg: #fafafa;
+@page-grid-cell-border: #cdcdcd;
+@page-grid-cell-restricted: @state-danger-bg;
+
+@page-column-header-color: #999;
+@page-column-header-bg: #fff;
+@page-column-header-border: @page-grid-cell-border;
+
+@page-ce-border: #ccc;
+@page-ce-hover-border: #aaa;
+@page-ce-border-radius: 2px;
+@page-ce-header-color: #fff;
+@page-ce-header-bg: #eaeaea;
+@page-ce-header-hover-bg: #d0d0d0;
+@page-ce-body-bg: #fff;
+@page-ce-footer-bg: #fafafa;
+@page-ce-hidden-opacity: 0.4;
+
+@page-ce-dropzone-bg: @state-success-bg;
+@page-ce-dropzone-border: @state-success-border;
+@page-ce-dropzone-border-radius: @page-ce-border-radius;
+
+
+//
+// Grid
+//
+.t3-grid-table {
+       border-collapse: separate;
+       border-spacing: @page-grid-spacing 0;
+       width: 100%;
+}
+.t3-grid-container {
+       margin: 0px (@page-grid-spacing * -1);
+}
+.t3-grid-cell {
+       background-color: @page-grid-cell-bg;
+       border-bottom: 1px solid @page-grid-cell-border;
+}
+.t3-grid-cell-restricted {
+       background-color: @page-grid-cell-restricted;
+}
+.t3-grid-cell-unassigned {
+       background: url('../../../../images/backgrounds/layout-not-assigned.png') repeat;
+}
+
+
+//
+// Columns
+//
+.t3-page-columns {
+       width: 100%;
+}
+.t3-page-column {
+       min-width: 150px;
+       max-width: 300px;
+       > h2 {
+               margin: 0;
+       }
+}
+.t3-page-column-header-icons {
+       visibility: hidden;
+       position: absolute;
+       right: 0;
+}
+.t3-page-column-header {
+       padding: (@page-grid-spacing * 2) @page-grid-spacing (@page-grid-spacing / 2) @page-grid-spacing;
+       position: relative;
+       background: @page-column-header-bg;
+       border-bottom: 1px solid @page-column-header-border;
+       color: @page-column-header-color;
+       text-align: left;
+       a {
+               position: relative;
+       }
+       &:hover {
+               .t3-page-column-header-icons {
+                       visibility: visible;
+               }
+       }
+}
+.t3-page-columns-mode {
+       img.c-divider {
+               margin: @page-grid-spacing 0 (@page-grid-spacing / 2) 0;
+       }
+}
+
+
+//
+// Language
+//
+.t3-page-lang-copyce {
+       margin: @page-grid-spacing;
+}
+
+
+//
+// Content elements
+//
+.t3-page-ce-wrapper {
+       min-height: 2em;
+}
+.t3-page-ce {
+       .transition(opacity .15s ease-in);
+       margin: @page-grid-spacing;
+       &.active-drag {
+               z-index: 4500;
+       }
+       // reset border-spacing from page column grid
+       * {
+               border-spacing: 0;
+       }
+       > .t3-page-ce {
+               margin-left: 0;
+               margin-right: 0;
+       }
+       .t3-page-ce-body-inner {
+               padding: @page-grid-spacing;
+       }
+       .t3-page-ce-header {
+               .clearfix();
+               .transition(background .15s ease-in);
+               padding: (@page-grid-spacing / 2);
+               border: 1px solid @page-ce-border;
+               border-bottom: 0;
+               border-radius: @page-ce-border-radius @page-ce-border-radius 0 0;
+               background: @page-ce-header-bg;
+       }
+       .t3-page-ce-header-icons-left {
+               float: left;
+               > a {
+                       display: inline-block;
+                       padding: @padding-small-vertical @padding-small-horizontal;
+               }
+       }
+       .t3-page-ce-header-icons-right {
+               .transition(opacity .15s ease-in);
+               opacity: 0.3;
+               float: right;
+       }
+       .t3-page-ce-body {
+               margin-bottom: @page-grid-spacing;
+               border: 1px solid @page-ce-border;
+               border-top: 0;
+               border-radius: 0 0 @page-ce-border-radius @page-ce-border-radius;
+               background-color: @page-ce-body-bg;
+       }
+       .t3-page-ce-footer {
+               .text-monospace();
+               font-size: 11px;
+               padding: (@page-grid-spacing / 2) @page-grid-spacing;
+               background: @page-ce-footer-bg;
+       }
+       &:hover {
+               .t3-page-ce-header {
+                       background: @page-ce-header-hover-bg;
+               }
+               .t3-page-ce-header,
+               .t3-page-ce-body {
+                       border-color: @page-ce-hover-border;
+               }
+               .t3-page-ce-body {
+                       .box-shadow(0px 1px 0px rgba(0, 0, 0, 0.15));
+               }
+               .t3-page-ce-header-icons-right {
+                       opacity: 1;
+               }
+       }
+}
+.t3-page-ce-hidden {
+       opacity: @page-ce-hidden-opacity;
+       .transition(opacity .15s ease-in);
+       &:hover {
+               opacity: 1.0;
+       }
+}
+
+
+//
+// Dropzone
+//
+.t3-page-ce-dropzone-available.active,
+.t3-page-ce-dropzone-possible {
+       border: 1px dashed @page-ce-dropzone-border;
+       border-radius: @page-ce-dropzone-border-radius;
+       background-color: @page-ce-dropzone-bg;
+}
+.t3-page-ce-dropzone-available.active {
+       height: 2em;
+}
+.t3-page-ce-dropzone-possible {
+       margin: @page-grid-spacing;
+}
+
+
+//
+// Dragging
+//
+.t3-page-ce-dragitem {
+       .t3-page-ce-header:hover {
+               cursor: move;
+       }
+}
diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_module_web_page.less b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_module_web_page.less
deleted file mode 100644 (file)
index 0d83e96..0000000
+++ /dev/null
@@ -1,141 +0,0 @@
-//
-// Web > Page
-//
-
-table.t3-gridTable,
-table.t3-page-langMode {
-       margin-bottom: 1.5em;
-       border-collapse: separate;
-       border-spacing: 12px;
-}
-td.t3-gridCell {
-       border-bottom: 1px solid black;
-}
-
-td.t3-page-lang-column .t3-page-ce .t3-page-ce-header .t3-row-header,
-.t3-page-ce-wrapper .t3-row-header {
-       height: 28px;
-}
-
-.t3-lang-gridContainer {
-       margin: 0 -12px;
-}
-
-td.t3-page-column,
-td.t3-page-lang-column {
-       min-width: 150px;
-       max-width: 300px;
-}
-
-td.t3-page-lang-column h3 {
-       margin-top: 0;
-}
-
-.t3-page-colHeader {
-       margin-bottom: 0;
-       padding-left: 10px;
-       padding-right: 20px;
-       position: relative;
-}
-
-.t3-page-colHeader a {
-       position: relative;
-}
-
-.t3-page-colHeader-icons {
-       position: absolute;
-       right: 0;
-}
-
-.t3-page-ce-wrapper {
-       padding: 0 0 5px 0;
-       min-height: 2em;
-}
-
-.t3-page-ce-droptarget {
-       padding: 5px;
-}
-
-.t3-page-ce {
-       min-width: 150px;
-       margin: 12px 0 0;
-}
-
-.t3-page-ce-dropzone-available.active {
-               height: 2em;
-}
-
-.t3-page-ce-dragitem {
-       margin-bottom: 10px;
-}
-
-.t3-page-ce h4 {
-       margin: 0;
-}
-
-.t3-row-header .ce-icons-left {
-       float: left;
-}
-
-.t3-row-header .ce-icons {
-       float: right;
-}
-
-.t3-page-ce-icons-move {
-       display: block;
-       padding-left: 3px;
-       padding-top: 3px;
-       padding-bottom: 3px;
-       margin-right: -4px;
-       float: right;
-}
-
-.t3-page-ce .t3-row-header .t3-icon,
-.t3-page-colHeader .t3-icon {
-       margin-top: -1px;
-}
-
-.t3-page-ce-icons-move span {
-       float: left;
-}
-
-.t3-page-ce-body {
-       margin-bottom: 12px;
-}
-
-.t3-page-ce-body-inner {
-       padding: 7px;
-}
-
-.t3-page-ce-footer .t3-page-ce-info {
-       padding:4px;
-}
-
-table.typo3-page-columnsMode img.c-divider {
-       margin: 10px 0 5px 0;
-}
-
-td.t3-gridCell div.t3-page-ce,
-div.t3-page-lang-copyce {
-       padding: 1px 12px 0 12px;
-}
-
-div.t3-page-ce div.t3-page-ce {
-       padding: 1px 0 0;
-}
-
-div.t3-page-lang-copyce {
-       margin-top: 30px;
-}
-
-#ext-cms-layout-db-layout-php h2 {
-       margin-bottom: 0;
-}
-
-td.t3-page-column.t3-gridCell .t3-page-colHeader {
-       padding-top: 12px;
-}
-
-tr:first-child td.t3-page-column.t3-gridCell .t3-page-colHeader {
-       padding-top: 0;
-}
diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/visual/_module_web_page.less b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/visual/_module_web_page.less
deleted file mode 100644 (file)
index 9bd7fcc..0000000
+++ /dev/null
@@ -1,212 +0,0 @@
-//
-// Web > Page
-//
-
-.t3-gridContainer {
-       margin: 0px -12px;
-}
-
-.t3-page-langMode {
-       width: 100%;
-}
-
-.t3-page-columns {
-       width: 100%;
-}
-
-.t3-page-colHeader {
-       background: #fff;
-       border-bottom: 1px solid #cdcdcd;
-       color: #999999;
-       font-family: Verdana, sans-serif;
-       text-align: left;
-
-       a > span.t3-icon {
-               color: #212424;
-       }
-}
-
-.t3-page-colHeader-label {
-       text-align: left;
-}
-
-.t3-page-colHeader-icons {
-       visibility: hidden;
-}
-
-.t3-page-colHeader:hover .t3-page-colHeader-icons,
-.t3-page-column:hover .t3-page-colHeader .t3-page-colHeader-icons {
-       visibility: visible;
-}
-
-.t3-page-border {
-       background-color: #cfcfcf;
-       width: 1px;
-}
-
-.t3-page-ce-droptarget {
-       visibility: hidden;
-       background-color: orange;
-}
-
-.t3-page-ce-header {
-       background-color: #cacaca;
-}
-
-.t3-page-column:hover .t3-icon-document-new {
-       visibility: visible;
-}
-
-.t3-page-ce-empty .t3-page-ce .t3-icon-document-new {
-       visibility: visible;
-}
-
-.t3-page-ce {
-
-       .t3-page-ce-body {
-               background-color: #ffffff;
-               border: 1px solid #ffffff;
-               border-top: none;
-       }
-
-       .t3-icon-document-new,
-       .t3-row-header .ce-icons,
-       .t3-row-header .ce-icons-left{
-               visibility: hidden;
-       }
-
-       &:hover {
-
-               .t3-page-ce-body {
-                       background-color: #ffffff;
-                       border: 1px solid #5b5b5b;
-                       border-top: none;
-                       .t3-icon ,
-                       img {
-                               opacity: 1.0;
-                       }
-               }
-
-               .drag-start {
-                       visibility: hidden;
-               }
-
-               .t3-icon-document-new,
-               .t3-row-header .ce-icons,
-               .t3-row-header .ce-icons-left{
-                       visibility: visible;
-               }
-
-               .t3-row-header {
-                       background-color: #666;
-               }
-       }
-
-       &.active-drag {
-               z-index: 4500;
-       }
-       &.t3-page-ce-hidden {
-               opacity: .60;
-               &:hover {
-                       opacity: 1.0;
-               }
-       }
-}
-
-
-.t3-page-ce-hidden {
-       .t3-page-ce-body,
-       .t3-page-ce-body a {
-               color: #bbbbbb;
-               background-color: #e5e5e5;
-               border-color: #e5e5e5;
-
-               img {
-                       opacity: .60;
-               }
-       }
-       .t3-page-ce-header {
-               background-color: #e5e5e5;
-       }
-
-       &:hover {
-               .t3-page-ce-body,
-               .t3-page-ce-body a {
-                       color: #000000;
-               }
-       }
-}
-
-.t3-page-ce-footer {
-       background: #eee
-}
-
-.t3-page-ce-wrapper .t3-row-header {
-       background-image: none;
-       background-color: #cacaca;
-       min-height: 20px;
-}
-
-.t3-page-ce-body-inner {
-       word-break: break-all;
-}
-
-table.typo3-page-columnsMode {
-       tr td a {
-               text-decoration: none;
-               b {
-                       text-decoration: underline;
-               }
-       }
-}
-
-table.typo3-page-buttons td {
-       padding-right: 10px;
-}
-
-td.t3-gridCell {
-       background-color: #f1f1f1;
-       border-bottom: 1px solid #cdcdcd;
-}
-
-td.t3-gridCell-unassigned {
-       background: url('../../../../images/backgrounds/layout-not-assigned.png') repeat;
-}
-
-td.t3-gridCell-restricted {
-       background-color: #e8e0e0;
-       div.t3-row-header {
-               opacity: .40;
-               div {
-                       opacity: .60;
-               }
-       }
-}
-
-
-.t3-page-ce-dropzone-available.active {
-       background-color: #c8d9c3;
-}
-
-.t3-page-ce-dropzone-possible {
-       background-color: #73ab61;
-}
-
-.t3-page-ce-dropzone {
-       padding: 6px 0;
-
-       &.t3-page-ce-dropzone-available.t3-page-ce-drop-possible {
-               background-color: #73ab61;
-       }
-}
-
-.t3-page-ce-dragitem {
-       &.dragitem-shadow {
-               box-shadow: 0 1px 12px rgba(0, 0, 0, 0.50);
-       }
-
-       .t3-page-ce-header:hover {
-               cursor: move;
-       }
-}
-
index b418a48..2f7bf72 100644 (file)
 @import "TYPO3/_main_form.less";
 @import "TYPO3/_main_scaffolding.less";
 @import "TYPO3/_module_menu.less";
+@import "TYPO3/_module_web_page.less";
 @import "TYPO3/_topbar.less";
 
 @import "TYPO3/_module_web_list_sysnote.less";
 @import "TYPO3/structure/_module_file_list.less";
 @import "TYPO3/structure/_module_user_ws.less";
 @import "TYPO3/structure/_module_web_list.less";
-@import "TYPO3/structure/_module_web_page.less";
 
 @import "TYPO3/visual/_element_extjs_icons.less";
 @import "TYPO3/visual/_element_typoscript.less";
 @import "TYPO3/visual/_element_version.less";
 @import "TYPO3/visual/_module_file_list.less";
 @import "TYPO3/visual/_module_file_upload.less";
-@import "TYPO3/visual/_module_web_page.less";
index 452c404..d3180cf 100644 (file)
@@ -10558,6 +10558,172 @@ iframe {
 .typo3-module-menu-snapped .typo3-module-menu-item-title {
   display: none;
 }
+.t3-grid-table {
+  border-collapse: separate;
+  border-spacing: 10px 0;
+  width: 100%;
+}
+.t3-grid-container {
+  margin: 0px -10px;
+}
+.t3-grid-cell {
+  background-color: #fafafa;
+  border-bottom: 1px solid #cdcdcd;
+}
+.t3-grid-cell-restricted {
+  background-color: #efc7c7;
+}
+.t3-grid-cell-unassigned {
+  background: url('../../../../images/backgrounds/layout-not-assigned.png') repeat;
+}
+.t3-page-columns {
+  width: 100%;
+}
+.t3-page-column {
+  min-width: 150px;
+  max-width: 300px;
+}
+.t3-page-column > h2 {
+  margin: 0;
+}
+.t3-page-column-header-icons {
+  visibility: hidden;
+  position: absolute;
+  right: 0;
+}
+.t3-page-column-header {
+  padding: 20px 10px 5px 10px;
+  position: relative;
+  background: #ffffff;
+  border-bottom: 1px solid #cdcdcd;
+  color: #999999;
+  text-align: left;
+}
+.t3-page-column-header a {
+  position: relative;
+}
+.t3-page-column-header:hover .t3-page-column-header-icons {
+  visibility: visible;
+}
+.t3-page-columns-mode img.c-divider {
+  margin: 10px 0 5px 0;
+}
+.t3-page-lang-copyce {
+  margin: 10px;
+}
+.t3-page-ce-wrapper {
+  min-height: 2em;
+}
+.t3-page-ce {
+  -webkit-transition: opacity 0.15s ease-in;
+  -o-transition: opacity 0.15s ease-in;
+  transition: opacity 0.15s ease-in;
+  margin: 10px;
+}
+.t3-page-ce.active-drag {
+  z-index: 4500;
+}
+.t3-page-ce * {
+  border-spacing: 0;
+}
+.t3-page-ce > .t3-page-ce {
+  margin-left: 0;
+  margin-right: 0;
+}
+.t3-page-ce .t3-page-ce-body-inner {
+  padding: 10px;
+}
+.t3-page-ce .t3-page-ce-header {
+  -webkit-transition: background 0.15s ease-in;
+  -o-transition: background 0.15s ease-in;
+  transition: background 0.15s ease-in;
+  padding: 5px;
+  border: 1px solid #cccccc;
+  border-bottom: 0;
+  border-radius: 2px 2px 0 0;
+  background: #eaeaea;
+}
+.t3-page-ce .t3-page-ce-header:before,
+.t3-page-ce .t3-page-ce-header:after {
+  content: " ";
+  display: table;
+}
+.t3-page-ce .t3-page-ce-header:after {
+  clear: both;
+}
+.t3-page-ce .t3-page-ce-header:before,
+.t3-page-ce .t3-page-ce-header:after {
+  content: " ";
+  display: table;
+}
+.t3-page-ce .t3-page-ce-header:after {
+  clear: both;
+}
+.t3-page-ce .t3-page-ce-header-icons-left {
+  float: left;
+}
+.t3-page-ce .t3-page-ce-header-icons-left > a {
+  display: inline-block;
+  padding: 4px 4px;
+}
+.t3-page-ce .t3-page-ce-header-icons-right {
+  -webkit-transition: opacity 0.15s ease-in;
+  -o-transition: opacity 0.15s ease-in;
+  transition: opacity 0.15s ease-in;
+  opacity: 0.3;
+  float: right;
+}
+.t3-page-ce .t3-page-ce-body {
+  margin-bottom: 10px;
+  border: 1px solid #cccccc;
+  border-top: 0;
+  border-radius: 0 0 2px 2px;
+  background-color: #ffffff;
+}
+.t3-page-ce .t3-page-ce-footer {
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 11px;
+  padding: 5px 10px;
+  background: #fafafa;
+}
+.t3-page-ce:hover .t3-page-ce-header {
+  background: #d0d0d0;
+}
+.t3-page-ce:hover .t3-page-ce-header,
+.t3-page-ce:hover .t3-page-ce-body {
+  border-color: #aaaaaa;
+}
+.t3-page-ce:hover .t3-page-ce-body {
+  -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
+  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
+}
+.t3-page-ce:hover .t3-page-ce-header-icons-right {
+  opacity: 1;
+}
+.t3-page-ce-hidden {
+  opacity: 0.4;
+  -webkit-transition: opacity 0.15s ease-in;
+  -o-transition: opacity 0.15s ease-in;
+  transition: opacity 0.15s ease-in;
+}
+.t3-page-ce-hidden:hover {
+  opacity: 1.0;
+}
+.t3-page-ce-dropzone-available.active,
+.t3-page-ce-dropzone-possible {
+  border: 1px dashed #1eb941;
+  border-radius: 2px;
+  background-color: #c7f6d1;
+}
+.t3-page-ce-dropzone-available.active {
+  height: 2em;
+}
+.t3-page-ce-dropzone-possible {
+  margin: 10px;
+}
+.t3-page-ce-dragitem .t3-page-ce-header:hover {
+  cursor: move;
+}
 [id="typo3-topbar"],
 [id="typo3-topbar"] .x-panel-body {
   min-width: 1000px;
@@ -11853,115 +12019,6 @@ div#typo3-listOptions {
   vertical-align: text-bottom !important;
   margin-right: 10px !important;
 }
-table.t3-gridTable,
-table.t3-page-langMode {
-  margin-bottom: 1.5em;
-  border-collapse: separate;
-  border-spacing: 12px;
-}
-td.t3-gridCell {
-  border-bottom: 1px solid black;
-}
-td.t3-page-lang-column .t3-page-ce .t3-page-ce-header .t3-row-header,
-.t3-page-ce-wrapper .t3-row-header {
-  height: 28px;
-}
-.t3-lang-gridContainer {
-  margin: 0 -12px;
-}
-td.t3-page-column,
-td.t3-page-lang-column {
-  min-width: 150px;
-  max-width: 300px;
-}
-td.t3-page-lang-column h3 {
-  margin-top: 0;
-}
-.t3-page-colHeader {
-  margin-bottom: 0;
-  padding-left: 10px;
-  padding-right: 20px;
-  position: relative;
-}
-.t3-page-colHeader a {
-  position: relative;
-}
-.t3-page-colHeader-icons {
-  position: absolute;
-  right: 0;
-}
-.t3-page-ce-wrapper {
-  padding: 0 0 5px 0;
-  min-height: 2em;
-}
-.t3-page-ce-droptarget {
-  padding: 5px;
-}
-.t3-page-ce {
-  min-width: 150px;
-  margin: 12px 0 0;
-}
-.t3-page-ce-dropzone-available.active {
-  height: 2em;
-}
-.t3-page-ce-dragitem {
-  margin-bottom: 10px;
-}
-.t3-page-ce h4 {
-  margin: 0;
-}
-.t3-row-header .ce-icons-left {
-  float: left;
-}
-.t3-row-header .ce-icons {
-  float: right;
-}
-.t3-page-ce-icons-move {
-  display: block;
-  padding-left: 3px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  margin-right: -4px;
-  float: right;
-}
-.t3-page-ce .t3-row-header .t3-icon,
-.t3-page-colHeader .t3-icon {
-  margin-top: -1px;
-}
-.t3-page-ce-icons-move span {
-  float: left;
-}
-.t3-page-ce-body {
-  margin-bottom: 12px;
-}
-.t3-page-ce-body-inner {
-  padding: 7px;
-}
-.t3-page-ce-footer .t3-page-ce-info {
-  padding: 4px;
-}
-table.typo3-page-columnsMode img.c-divider {
-  margin: 10px 0 5px 0;
-}
-td.t3-gridCell div.t3-page-ce,
-div.t3-page-lang-copyce {
-  padding: 1px 12px 0 12px;
-}
-div.t3-page-ce div.t3-page-ce {
-  padding: 1px 0 0;
-}
-div.t3-page-lang-copyce {
-  margin-top: 30px;
-}
-#ext-cms-layout-db-layout-php h2 {
-  margin-bottom: 0;
-}
-td.t3-page-column.t3-gridCell .t3-page-colHeader {
-  padding-top: 12px;
-}
-tr:first-child td.t3-page-column.t3-gridCell .t3-page-colHeader {
-  padding-top: 0;
-}
 .t3icon-ext-upload {
   background: url('../../../../icons/gfx/upload.gif') 3px 4px no-repeat !important;
 }
@@ -12211,159 +12268,3 @@ div.t3-upload-queue-progress {
   text-align: left;
   text-indent: 6px;
 }
-.t3-gridContainer {
-  margin: 0px -12px;
-}
-.t3-page-langMode {
-  width: 100%;
-}
-.t3-page-columns {
-  width: 100%;
-}
-.t3-page-colHeader {
-  background: #fff;
-  border-bottom: 1px solid #cdcdcd;
-  color: #999999;
-  font-family: Verdana, sans-serif;
-  text-align: left;
-}
-.t3-page-colHeader a > span.t3-icon {
-  color: #212424;
-}
-.t3-page-colHeader-label {
-  text-align: left;
-}
-.t3-page-colHeader-icons {
-  visibility: hidden;
-}
-.t3-page-colHeader:hover .t3-page-colHeader-icons,
-.t3-page-column:hover .t3-page-colHeader .t3-page-colHeader-icons {
-  visibility: visible;
-}
-.t3-page-border {
-  background-color: #cfcfcf;
-  width: 1px;
-}
-.t3-page-ce-droptarget {
-  visibility: hidden;
-  background-color: orange;
-}
-.t3-page-ce-header {
-  background-color: #cacaca;
-}
-.t3-page-column:hover .t3-icon-document-new {
-  visibility: visible;
-}
-.t3-page-ce-empty .t3-page-ce .t3-icon-document-new {
-  visibility: visible;
-}
-.t3-page-ce .t3-page-ce-body {
-  background-color: #ffffff;
-  border: 1px solid #ffffff;
-  border-top: none;
-}
-.t3-page-ce .t3-icon-document-new,
-.t3-page-ce .t3-row-header .ce-icons,
-.t3-page-ce .t3-row-header .ce-icons-left {
-  visibility: hidden;
-}
-.t3-page-ce:hover .t3-page-ce-body {
-  background-color: #ffffff;
-  border: 1px solid #5b5b5b;
-  border-top: none;
-}
-.t3-page-ce:hover .t3-page-ce-body .t3-icon,
-.t3-page-ce:hover .t3-page-ce-body img {
-  opacity: 1.0;
-}
-.t3-page-ce:hover .drag-start {
-  visibility: hidden;
-}
-.t3-page-ce:hover .t3-icon-document-new,
-.t3-page-ce:hover .t3-row-header .ce-icons,
-.t3-page-ce:hover .t3-row-header .ce-icons-left {
-  visibility: visible;
-}
-.t3-page-ce:hover .t3-row-header {
-  background-color: #666;
-}
-.t3-page-ce.active-drag {
-  z-index: 4500;
-}
-.t3-page-ce.t3-page-ce-hidden {
-  opacity: .60;
-}
-.t3-page-ce.t3-page-ce-hidden:hover {
-  opacity: 1.0;
-}
-.t3-page-ce-hidden .t3-page-ce-body,
-.t3-page-ce-hidden .t3-page-ce-body a {
-  color: #bbbbbb;
-  background-color: #e5e5e5;
-  border-color: #e5e5e5;
-}
-.t3-page-ce-hidden .t3-page-ce-body img,
-.t3-page-ce-hidden .t3-page-ce-body a img {
-  opacity: .60;
-}
-.t3-page-ce-hidden .t3-page-ce-header {
-  background-color: #e5e5e5;
-}
-.t3-page-ce-hidden:hover .t3-page-ce-body,
-.t3-page-ce-hidden:hover .t3-page-ce-body a {
-  color: #000000;
-}
-.t3-page-ce-footer {
-  background: #eeeeee;
-}
-.t3-page-ce-wrapper .t3-row-header {
-  background-image: none;
-  background-color: #cacaca;
-  min-height: 20px;
-}
-.t3-page-ce-body-inner {
-  word-break: break-all;
-}
-table.typo3-page-columnsMode tr td a {
-  text-decoration: none;
-}
-table.typo3-page-columnsMode tr td a b {
-  text-decoration: underline;
-}
-table.typo3-page-buttons td {
-  padding-right: 10px;
-}
-td.t3-gridCell {
-  background-color: #f1f1f1;
-  border-bottom: 1px solid #cdcdcd;
-}
-td.t3-gridCell-unassigned {
-  background: url('../../../../images/backgrounds/layout-not-assigned.png') repeat;
-}
-td.t3-gridCell-restricted {
-  background-color: #e8e0e0;
-}
-td.t3-gridCell-restricted div.t3-row-header {
-  opacity: .40;
-}
-td.t3-gridCell-restricted div.t3-row-header div {
-  opacity: .60;
-}
-.t3-page-ce-dropzone-available.active {
-  background-color: #c8d9c3;
-}
-.t3-page-ce-dropzone-possible {
-  background-color: #73ab61;
-}
-.t3-page-ce-dropzone {
-  padding: 6px 0;
-}
-.t3-page-ce-dropzone.t3-page-ce-dropzone-available.t3-page-ce-drop-possible {
-  background-color: #73ab61;
-}
-.t3-page-ce-dragitem.dragitem-shadow {
-  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
-}
-.t3-page-ce-dragitem .t3-page-ce-header:hover {
-  cursor: move;
-}