e3ef9efd0d60aa400be627d5323008564da880c0
[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                 font-size: inherit;
253         }
254 }
255 .typo3-pagetree-toppanel-filter {
256         width: 100%!important;
257         height: 26px!important;
258         padding-right: 25px;
259         padding-left: 8px;
260         box-sizing: inherit;
261 }
262 .typo3-pagetree-toppanel-filter-clear {
263         position: absolute;
264         right: 5px;
265         top: 50%;
266         transform: translate(0,-50%);
267 }
268 .typo3-pagetree-toppanel-item {
269         .x-form-field-wrap {
270                 width: 100%!important;
271         }
272         .x-panel-body {
273                 margin: 0;
274         }
275 }
276 .typo3-pagetree-toppanel-drag-node {
277         cursor: move;
278     padding: 5px;
279     border: none;
280     background: none;
281         font-size: 11px;
282         line-height: 16px;
283 }
284
285
286 //
287 // Deletion Drop Zone
288 //
289
290 #typo3-pagetree-deletionDropZone {
291         color: #FFF;
292         background-color: #585858;
293         box-shadow: inset 0 2px 5px #414141;
294
295         p {
296                 padding: 5px;
297         }
298
299         #typo3-pagetree-deletionDropZone-text {
300                 cursor: default;
301                 font-size: .9em;
302                 padding: 0 0 0 5px;
303                 display: inline;
304         }
305 }
306
307 .typo3-pagetree-deletionDropZone-restore {
308         background-color: #d5d5d5;
309         background-image: url('../../../../images/backgrounds/button.png');
310         background-repeat: repeat-x;
311         background-image: linear-gradient(center top, #f6f6f6 10%, #d5d5d5 90%);
312         border: 1px solid #7c7c7c;
313         border-radius: 1px;
314         color: #434343;
315         cursor: pointer;
316         display: inline-block;
317         padding: 0 6px;
318         margin-left: 24px;
319
320         &:hover {
321                 background-color: #c8c8c8;
322                 background-image: url('../../../../images/backgrounds/button-hover.png');
323                 background-image: linear-gradient(center top, #f6f6f6 10%, #c8c8c8 90%);
324                 background-position: bottom;
325                 background-repeat: repeat-x;
326                 border: 1px solid #737f91;
327                 color: #1e1e1e;
328         }
329 }
330
331 .typo3-pagetree-deletionDropZone-restoreText {
332         display: inline-block;
333         padding: 4px 4px 4px 18px;
334         background: transparent url('../../../../images/spinner/d5d5d5.gif') no-repeat 0 3px;
335 }
336
337 #typo3-pagetree .typo3-pagetree-deletionDropZone-activateProxyOver {
338         background-color: #644d2d;
339 }
340
341 //
342 // Tree Highlighting
343 //
344 .x-tree-node-readableRootline {
345         font-style: italic;
346 }
347
348 //
349 // Indicator Bar
350 //
351 [id=typo3-pagetree-indicatorBar] {
352         .alert {
353                 margin: 10px 10px 0;
354         }
355 }
356
357 //
358 // CONTEXT MENU
359 //
360
361 // pagetree-context-menu shadow
362 .x-shadow {
363   z-index: 40 !important;                       // problem with EXTJS - needs to be removed
364 }
365
366 [id=typo3-pagetree-indicatorBar-temporaryMountPoint] {
367         .media-right {
368                 position: absolute;
369                 right: 16px;
370                 transform: translateY(-100%);
371                 background-color: @alert-info-bg;
372         }
373 }