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