219795defacffebc950f63d25e042b29a41145bf
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / TYPO3 / _element_tree.less
1 //
2 // Variables
3 //
4 @navigation-text: #000;
5 @navigation-bg: rgb(245, 245, 245);
6 @navigation-border: rgb(195, 195, 195);
7
8
9 //
10 // Trees Variables
11 //
12 @tree-indentation: 16px;
13 @tree-intendation-space: 6px;
14 @tree-line-height: 21px;
15 @tree-border: #666666;
16 @tree-bg: white;
17 @tree-control-size: 20px;
18 @tree-control-icon-size: 12px;
19
20
21 //
22 // Tree
23 //
24 .list-tree,
25 .list-tree ul {
26         margin-left: ceil((@tree-indentation / 2));
27         padding: 0;
28         list-style: none;
29         position: relative;
30         &:before {
31                 content: "";
32                 display: block;
33                 width: 0;
34                 position: absolute;
35                 top: 0;
36                 bottom: ceil(@tree-line-height / 2);
37                 left: 0;
38                 margin-bottom: -2px;
39                 border-left: 1px dotted @tree-border;
40         }
41 }
42 .list-tree {
43         li {
44                 &.active {
45                         > .list-tree-group {
46                                 &:before {
47                                         content: '';
48                                         position: absolute;
49                                         right: -@tree-intendation-space;
50                                         left: -@tree-intendation-space;
51                                         top: -1px;
52                                         bottom: -1px;
53                                         display: block;
54                                         border: 1px solid rgba(0,0,0,0.25);
55                                         background-color: rgba(255,255,255,0.75);
56                                         border-radius: 2px;
57                                 }
58                         }
59                 }
60                 &:before {
61                         content: '';
62                         display: block;
63                         width: ceil(@tree-indentation - @tree-intendation-space - 1px);
64                         height: 0;
65                         border-top: 1px dotted @tree-border;
66                         margin-top: -2px;
67                         position: absolute;
68                         top: ceil(@tree-line-height / 2) + 1;
69                         left: 2px;
70                 }
71                 &:last-child:before {
72                         background: @tree-bg;
73                         height: auto;
74                         left: 0;
75                         width: ceil(@tree-indentation - @tree-intendation-space) + 1;
76                         bottom: 0;
77                 }
78                 margin: 0;
79                 padding-left: @tree-indentation;
80                 line-height: @tree-line-height;
81                 position: relative;
82
83                 .icon {
84                         margin-right: 2px;
85                 }
86         }
87 }
88 .list-tree-group {
89         position: relative;
90         display: block;
91         white-space: nowrap;
92         > span {
93                 position: relative;
94         }
95 }
96 .list-tree-value {
97         font-weight: bold;
98 }
99 .list-tree-icon {
100         top: -2px;
101 }
102 .list-tree-show {
103         float: right;
104         margin-left: @tree-intendation-space;
105 }
106 .list-tree-control {
107         .user-select(none);
108         position: relative;
109         display: block;
110         float: left;
111         margin-top: ceil(@tree-line-height / 2) - ceil(@tree-control-size / 2);
112         margin-left: -(@tree-indentation + ceil(@tree-control-size / 2));
113         text-align: center;
114         line-height: @tree-control-size;
115         width: @tree-control-size;
116         height: @tree-control-size;
117         &:before {
118                 content: '';
119                 position: absolute;
120                 top: 50%;
121                 left: 50%;
122                 margin-top: ceil(-(@tree-control-icon-size / 2));
123                 margin-left: ceil(-(@tree-control-icon-size / 2));
124                 width: @tree-control-icon-size;
125                 height: @tree-control-icon-size;
126         }
127         &:active,
128         &:focus,
129         &:hover {
130                 outline: none;
131                 text-decoration: none;
132         }
133         > .fa {
134                 display: inline-block;
135                 text-align: center;
136                 cursor: pointer;
137                 &:before {
138                         width: @tree-control-icon-size;
139                         height: @tree-control-icon-size;
140                         background-color: @tree-bg;
141                         display: block;
142                 }
143         }
144         &.list-tree-control-open > .fa:before {
145                 content: "\f0d7";
146         }
147         &.list-tree-control-closed > .fa:before {
148                 content: "\f0da";
149         }
150 }
151 .list-tree-root {
152         margin-left: 0;
153         &:before {
154                 display: none;
155         }
156         > li {
157                 padding-left: @tree-control-size;
158                 &:before {
159                         display: none;
160                 }
161                 > .list-tree-group {
162                         > .list-tree-control {
163                                 margin-left: -@tree-control-size;
164                                 &:before {
165                                         background-color: transparent;
166                                 }
167                         }
168                 }
169         }
170 }
171 .list-tree-root-clean {
172         > li {
173                 padding-left: 0;
174         }
175 }
176
177
178 //
179 // Tree Variations
180 //
181 [id=imp-exp-mod] {
182         .list-tree li:last-child:before,
183         .list-tree-control > .fa:before {
184                 background-color: #f1f1f1;
185         }
186 }
187 [id=typo3-browse-links-php] {
188         .list-tree li:last-child:before,
189         .list-tree-control > .fa:before {
190                 background-color: #ececec;
191         }
192 }
193 [id=ext-backend-Modules-FileSystemNavigationFrame-index-php] {
194         .list-tree li:last-child:before,
195         .list-tree-control > .fa:before {
196                 background-color: #f5f5f5;
197         }
198         .module-body {
199                 padding-left: 10px;
200                 padding-right: 10px;
201         }
202 }
203 [id=ext-lowlevel-Modules-Configuration-index-php] {
204         .active {
205                 > .list-tree-group {
206                         display: inline-block;
207                         color: @brand-danger;
208                 }
209         }
210 }
211
212
213 //
214 // Treeline Icons
215 //
216 .treeline-icon {
217         position: relative;
218         display: block;
219         float: left;
220         margin-top: -6px;
221         margin-bottom: -6px;
222         margin-right: 2px;
223         padding: 0;
224         height: 31px;
225         width: 16px;
226         white-space: nowrap;
227         overflow: hidden;
228         &:after,
229         &:before {
230                 position: absolute;
231                 content: '';
232                 left: 50%;
233         }
234         &:before {
235                 top: 0;
236                 height: 100%;
237                 width: 2px;
238                 margin-left: -1px;
239                 border-left: 1px dotted @tree-border;
240         }
241         &:after {
242                 border-top: 1px dotted @tree-border;
243                 height: 2px;
244                 width: 100%;
245                 top: 50%;
246                 margin-top: -1px;
247         }
248 }
249 .treeline-icon-jointop:before {
250         top: 50%;
251 }
252 .treeline-icon-joinbottom:before {
253         top: -50%;
254 }
255 .treeline-icon-line:after {
256         display: none;
257 }
258 .treeline-icon-blank {
259         display: none;
260 }
261 .treeline-icon-clear {
262         &:before,
263         &:after {
264                 display: none;
265         }
266 }
267
268 #typo3-pagetree #typo3-docheader div.buttonsright {
269         margin-right: 3px;
270 }
271
272 body#typo3-alt-db-navframe-php div.c-notice {
273         border: 1px solid black;
274         margin-top: 5px;
275         margin-bottom: 10px;
276         padding: 5px 5px 5px 5px;
277         width: 95%;
278 }
279
280
281 //
282 // AJAX Page Tree
283 //
284
285 body#typo3-pagetree {
286         margin: 0;
287         padding: 0;
288 }
289
290 #typo3-pagetree #typo3-inner-docbody {
291         padding: 10px 0;
292 }
293
294 ul.tree {
295         line-height: 12px;
296         list-style: none;
297         clear: both;
298         margin: 16px 0 0 10px;
299         padding: 0;
300
301         a {
302                 text-decoration: none;
303         }
304
305         a.pm {
306                 cursor: pointer;
307         }
308
309         div.treeLinkItem {
310                 display: block;
311                 min-height: 16px;
312                 padding-right: 2px;
313         }
314
315         ul {
316                 padding: 0 0 0 19px;
317                 margin: 0;
318                 list-style: none;
319
320                 li {
321                         padding: 0;
322                         margin: 0;
323                         white-space: nowrap;
324                         list-style: none;
325                 }
326
327                 li.active  {
328                         div.treeLinkItem {
329                                 background-color: #fff;
330                                 boder: 1px solid #d7d7d7;
331                                 border-right: 0;
332                         }
333
334                         li div.treeLinkItem {
335                                 margin: 0;
336                                 background-color: transparent;
337                                 border-width: 0;
338
339                         }
340                 }
341
342                 li.expanded {
343                         ul {
344                                 background: transparent url('../../../../icons/gfx/ol/line.gif') left top repeat-y;
345                         }
346                 }
347         }
348 }
349
350
351
352 ul.tree ul li.last > ul {
353         background: none;
354 }
355
356
357 ul.tree li.active span a,
358 ul.tree ul li.active span a {
359         font-weight: bold;
360 }
361
362 ul.tree li.active ul span a,
363 ul.tree ul li.active ul span a {
364         font-weight: normal;
365 }
366
367 ul #pages0_0 > ul {
368         padding-left: 0;
369 }
370
371 //
372 // active tree items, we have to work against the border: 1px here,
373 // otherwise tree elements would take too much space
374 //
375
376 ul.tree li.active div.treeLinkItem {
377         margin: -1px 0 -1px -1px;
378 }
379
380 span.dragIcon {
381         display: inline-block;
382         height: 16px;
383 }
384
385 ul.tree div.treeLinkItem span.dragId,
386 ul.tree div.treeLinkItem span.dragTitle,
387 ul.tree div.treeLinkItem img {
388         vertical-align: middle;
389 }
390
391 ul.tree div.treeLinkItem span.dragIcon {
392         vertical-align: top;
393 }
394
395 #dragIcon {
396         position: absolute;
397         visibility: hidden;
398         z-index: 20;
399         filter: alpha(opacity=50);
400         opacity: 0.5;
401         white-space: nowrap;
402 }
403
404
405 //
406 // Tree
407 //
408 #typo3-pagetree-deletionDropZone .x-panel-body {
409         background-position: right;
410         background-repeat: repeat-y;
411 }
412 [id=ext-backend-Modules-FileSystemNavigationFrame-index-php],
413 [id=ext-backend-Modules-FileSystemNavigationFrame-index-php] .module-body,
414 [id=typo3-pagetree-treeContainer] {
415         background-color: @navigation-bg;
416         height: 100%;
417 }
418 [id=typo3-pagetree-tree] {
419         height: 100%;
420         .x-panel-body {
421                 height: 100% !important;
422         }
423 }
424 [id=ext-backend-Modules-FileSystemNavigationFrame-index-php] .module-docheader {
425         padding-left: 10px;
426         padding-right: 10px;
427 }
428
429 .x-layout-split {
430         width: 1px;
431         background-color: @navigation-border;
432 }