[BUGFIX] Align docheader and pagetree toppanel correctly
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / TYPO3 / _element_pagetree.less
1 //
2 // Pagetree
3 //
4
5 #typo3-pagetree {
6         height: 100%;
7
8         .x-panel-bwrap,
9         .x-panel-body {
10                 height: 100%;
11         }
12
13         ul {
14                 padding-left: 0;
15                 list-style: none;
16         }
17         .x-toolbar {
18                 padding: 0;
19                 border: none;
20         }
21
22         ul.x-tree-root-ct {
23                 padding-top: 24px;
24                 margin-bottom: 50px;
25         }
26
27
28         .x-panel-body {
29                 background: none;
30         }
31
32         .x-tree-node {
33                 .x-tree-node-el {
34                         line-height: 18px;
35                         height: 20px;
36                         margin-right: 3px;
37                         border-top: 1px solid transparent;
38                         border-bottom: 1px solid transparent;
39                         border-left: 1px solid transparent;
40                 }
41                 .x-tree-node-over,
42                 .x-tree-selected {
43                         border-bottom: 1px solid #d7d7d7;
44                         border-top: 1px solid #d7d7d7;
45                         border-right: 1px solid #d7d7d7;
46                 }
47                 .x-tree-node-over {
48                         background-color: #f2f2f2;
49                         border-top-right-radius: 3px;
50                         border-bottom-right-radius: 3px;
51                 }
52                 .x-tree-selected {
53                         background-color: #fff;
54                 }
55                 .x-tree-selected.x-tree-node-over {
56                         background-image: none;
57                         border-radius: 0;
58                 }
59         }
60
61         .x-tree-node-readableRootline {
62                 padding: 10px 0 3px 10px;
63         }
64
65         .x-unselectable,
66         .x-unselectable * {
67                 //
68                 // restore behaviour from x-tree-node-el which gets overwritten by x-unselectable in default-css
69                 //
70                 cursor: pointer;
71         }
72
73         .ver-element,
74         .ver-versions,
75         .ver-page {
76                 background-color: #f7c898;
77         }
78
79         .x-tree-node-over.ver-element,
80         .x-tree-node-over.ver-versions,
81         .x-tree-node-over.ver-page,
82         .x-tree-selected.ver-element,
83         .x-tree-selected.ver-versions,
84         .x-tree-selected.ver-page {
85                 background-color: #fee4c9;
86         }
87
88         .typo3-pagetree-filteringTree-highlight {
89                 background-color: #f48e0c;
90                 color: #FFF;
91                 padding: 0;
92         }
93
94 }
95
96 //
97 // Drag and Drop
98 //
99
100 .x-tree-lines .typo3-pagetree-node-notExpandable .x-tree-ec-icon {
101         visibility: hidden;
102 }
103
104 .x-tree-lines .typo3-pagetree-node-notExpandable ul .x-tree-ec-icon {
105         visibility: visible;
106 }
107
108 .x-tree-node a .typo3-pagetree-status,
109 .x-dd-drag-ghost a .typo3-pagetree-status {
110         padding: 0;
111         margin: 0 3px 0 0;
112 }
113
114 .typo3-pagetree-tree-copy {
115         color: #666;
116         margin-top: 5px;
117 }
118
119 .x-dd-drag-ghost-pagetree-text {
120         display: inline-block;
121         vertical-align: middle;
122 }
123
124 .x-dd-drag-ghost-pagetree,
125 .x-dd-drag-ghost {
126         padding-bottom: 5px;
127 }
128
129 .x-dd-drop-icon {
130         padding-top: 6px;
131 }
132
133 .x-dd-drag-ghost-pagetree span {
134         margin: 3px 3px 0 3px;
135 }
136
137 .x-dd-drag-ghost {
138         background-color: inherit;
139         border: none;
140         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
141
142         span {
143                 margin: 0 1px 0 3px;
144         }
145 }
146
147 .x-dd-drop-nodrop {
148         background-color: #f6d3cf;
149         border: 1px solid #d66c68;
150 }
151
152 .typo3-pagetree-deletionDropZone-proxyOver,
153 .x-tree-drop-ok-append,
154 .x-tree-drop-ok-between,
155 .x-tree-drop-ok-below,
156 .x-tree-drop-ok-above {
157         background-color: #dce8f4;
158         border: 1px solid #9eb2c5;
159 }
160
161 .x-dd-drop-nodrop .x-dd-drop-icon {
162         background-image: url(../../../../t3skin/Resources/Public/Images/pagetree-drag-place-denied.png);
163 }
164
165 .x-tree-drop-ok-append.typo3-pagetree-copy .x-dd-drop-icon {
166         background-image: url(../../../../t3skin/Resources/Public/Images/pagetree-drag-new-inside.png);
167 }
168
169 .x-tree-drop-ok-below.typo3-pagetree-copy .x-dd-drop-icon {
170         background-image: url(../../../../t3skin/Resources/Public/Images/pagetree-drag-copy-below.png);
171 }
172
173 .x-tree-drop-ok-above.typo3-pagetree-copy .x-dd-drop-icon {
174         background-image: url(../../../../t3skin/Resources/Public/Images/pagetree-drag-copy-above.png);
175 }
176
177 .x-tree-drop-ok-between.typo3-pagetree-copy .x-dd-drop-icon {
178         background-image: url(../../../../t3skin/Resources/Public/Images/pagetree-drag-new-between.png);
179 }
180
181 .x-tree-drop-ok-append .x-dd-drop-icon {
182         background-image: url(../../../../t3skin/Resources/Public/Images/pagetree-drag-move-into.png);
183 }
184
185 .x-tree-drop-ok-between .x-dd-drop-icon {
186         background-image: url(../../../../t3skin/Resources/Public/Images/pagetree-drag-move-between.png);
187 }
188
189 .x-tree-drop-ok-below .x-dd-drop-icon {
190         background-image: url(../../../../t3skin/Resources/Public/Images/pagetree-drag-move-below.png);
191 }
192
193 .x-tree-drop-ok-above .x-dd-drop-icon {
194         background-image: url(../../../../t3skin/Resources/Public/Images/pagetree-drag-move-above.png);
195 }
196
197 #typo3-pagetree .x-tree-node .x-tree-drag-insert-below,
198 .x-tree-node div.x-tree-drag-insert-below,
199 .x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-below a {
200         border-bottom: 1px solid #9eb2c5;
201 }
202
203 #typo3-pagetree .x-tree-node .x-tree-drag-insert-above,
204 .x-tree-node .x-tree-drag-insert-above,
205 .x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-above a {
206         border-top: 1px solid #9eb2c5;
207 }
208
209 .x-tree-node .x-tree-drag-append {
210         background: #d7e4f1;
211 }
212
213 .x-tree-node .x-tree-drag-append a span {
214         background-color: inherit;
215         border: none;
216 }
217
218 //
219 // Top Panel
220 //
221 .typo3-pagetree-toppanel {
222         .btn {
223                 line-height: 16px;
224         }
225         padding: 0 10px;
226         border-bottom: 1px solid #c3c3c3;
227         .x-toolbar {
228                 padding: 0;
229                 border: 0!important;
230         }
231         .x-toolbar-left-row {
232                 .btn {
233                         margin-right: 4px;
234                 }
235         }
236         .x-toolbar-right-row {
237                 .btn {
238                         margin-left: 4px;
239                 }
240         }
241         .x-panel-body,
242         .x-panel-tbar {
243                 margin: 4px 0;
244                 min-height: 26px;
245                 height: auto!important;
246         }
247         .x-panel-bwrap {
248                 height: auto!important;
249                 overflow: visible;
250         }
251         .x-btn button {
252                 padding: 0;
253                 font-size: inherit;
254         }
255 }
256 .typo3-pagetree-toppanel-filter {
257         width: 100%!important;
258         height: 26px!important;
259         padding-right: 25px;
260         padding-left: 8px;
261         box-sizing: inherit;
262 }
263 .typo3-pagetree-toppanel-filter-clear {
264         position: absolute;
265         right: 5px;
266         top: 50%;
267         transform: translate(0,-50%);
268 }
269 .typo3-pagetree-toppanel-item {
270         .x-form-field-wrap {
271                 width: 100%!important;
272         }
273         .x-panel-body {
274                 margin: 0;
275         }
276 }
277 .typo3-pagetree-toppanel-drag-node {
278         cursor: move;
279         padding: 5px;
280         border: none;
281         background: none;
282         font-size: 11px;
283         line-height: 16px;
284 }
285
286
287 //
288 // Deletion Drop Zone
289 //
290
291 #typo3-pagetree-deletionDropZone {
292         color: #FFF;
293         background-color: #585858;
294         box-shadow: inset 0 2px 5px #414141;
295
296         p {
297                 padding: 5px;
298         }
299
300         #typo3-pagetree-deletionDropZone-text {
301                 cursor: default;
302                 font-size: .9em;
303                 padding: 0 0 0 5px;
304                 display: inline;
305         }
306 }
307
308 .typo3-pagetree-deletionDropZone-restore {
309         background-color: #d5d5d5;
310         background-image: url('../../../../images/backgrounds/button.png');
311         background-repeat: repeat-x;
312         background-image: linear-gradient(center top, #f6f6f6 10%, #d5d5d5 90%);
313         border: 1px solid #7c7c7c;
314         border-radius: 1px;
315         color: #434343;
316         cursor: pointer;
317         display: inline-block;
318         padding: 0 6px;
319         margin-left: 24px;
320
321         &:hover {
322                 background-color: #c8c8c8;
323                 background-image: url('../../../../images/backgrounds/button-hover.png');
324                 background-image: linear-gradient(center top, #f6f6f6 10%, #c8c8c8 90%);
325                 background-position: bottom;
326                 background-repeat: repeat-x;
327                 border: 1px solid #737f91;
328                 color: #1e1e1e;
329         }
330 }
331
332 .typo3-pagetree-deletionDropZone-restoreText {
333         display: inline-block;
334         padding: 4px 4px 4px 18px;
335         background: transparent url('../../../../images/spinner/d5d5d5.gif') no-repeat 0 3px;
336 }
337
338 #typo3-pagetree .typo3-pagetree-deletionDropZone-activateProxyOver {
339         background-color: #644d2d;
340 }
341
342 //
343 // Tree Highlighting
344 //
345 .x-tree-node-readableRootline {
346         font-style: italic;
347 }
348
349 //
350 // Indicator Bar
351 //
352 [id=typo3-pagetree-indicatorBar] {
353         .alert {
354                 margin: 10px 10px 0;
355         }
356 }
357
358 //
359 // CONTEXT MENU
360 //
361
362 // pagetree-context-menu shadow
363 .x-shadow {
364   z-index: 40 !important;                       // problem with EXTJS - needs to be removed
365 }
366
367 [id=typo3-pagetree-indicatorBar-temporaryMountPoint] {
368         .media-right {
369                 position: absolute;
370                 right: 16px;
371                 transform: translateY(-100%);
372                 background-color: @alert-info-bg;
373         }
374 }