[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 }