[BUGFIX] Show mountpoint path in record + link browsers if enabled in UserTS
[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-path {
162                         margin-left: -@tree-control-size;
163                 }
164                 > .list-tree-group {
165                         > .list-tree-control {
166                                 margin-left: -@tree-control-size;
167                                 &:before {
168                                         background-color: transparent;
169                                 }
170                         }
171                 }
172         }
173 }
174 .list-tree-root-clean {
175         > li {
176                 padding-left: 0;
177         }
178 }
179
180
181 //
182 // Tree Variations
183 //
184 [id=imp-exp-mod] {
185         .list-tree li:last-child:before,
186         .list-tree-control > .fa:before {
187                 background-color: #f1f1f1;
188         }
189 }
190 [id=typo3-browse-links-php] {
191         .list-tree li:last-child:before,
192         .list-tree-control > .fa:before {
193                 background-color: #ececec;
194         }
195 }
196 [id=ext-backend-Modules-FileSystemNavigationFrame-index-php] {
197         .list-tree li:last-child:before,
198         .list-tree-control > .fa:before {
199                 background-color: #f5f5f5;
200         }
201         .module-body {
202                 padding-left: 10px;
203                 padding-right: 10px;
204         }
205 }
206 [id=ext-lowlevel-Modules-Configuration-index-php] {
207         .active {
208                 > .list-tree-group {
209                         display: inline-block;
210                         color: @brand-danger;
211                 }
212         }
213 }
214
215
216 //
217 // Treeline Icons
218 //
219 .treeline-icon {
220         position: relative;
221         display: block;
222         float: left;
223         margin-top: -6px;
224         margin-bottom: -6px;
225         margin-right: 2px;
226         padding: 0;
227         height: 31px;
228         width: 16px;
229         white-space: nowrap;
230         overflow: hidden;
231         &:after,
232         &:before {
233                 position: absolute;
234                 content: '';
235                 left: 50%;
236         }
237         &:before {
238                 top: 0;
239                 height: 100%;
240                 width: 2px;
241                 margin-left: -1px;
242                 border-left: 1px dotted @tree-border;
243         }
244         &:after {
245                 border-top: 1px dotted @tree-border;
246                 height: 2px;
247                 width: 100%;
248                 top: 50%;
249                 margin-top: -1px;
250         }
251 }
252 .treeline-icon-jointop:before {
253         top: 50%;
254 }
255 .treeline-icon-joinbottom:before {
256         top: -50%;
257 }
258 .treeline-icon-line:after {
259         display: none;
260 }
261 .treeline-icon-blank {
262         display: none;
263 }
264 .treeline-icon-clear {
265         &:before,
266         &:after {
267                 display: none;
268         }
269 }
270
271 #typo3-pagetree #typo3-docheader div.buttonsright {
272         margin-right: 3px;
273 }
274
275 body#typo3-alt-db-navframe-php div.c-notice {
276         border: 1px solid black;
277         margin-top: 5px;
278         margin-bottom: 10px;
279         padding: 5px 5px 5px 5px;
280         width: 95%;
281 }
282
283
284 //
285 // AJAX Page Tree
286 //
287
288 body#typo3-pagetree {
289         margin: 0;
290         padding: 0;
291 }
292
293 #typo3-pagetree #typo3-inner-docbody {
294         padding: 10px 0;
295 }
296
297 ul.tree {
298         line-height: 12px;
299         list-style: none;
300         clear: both;
301         margin: 16px 0 0 10px;
302         padding: 0;
303
304         a {
305                 text-decoration: none;
306         }
307
308         a.pm {
309                 cursor: pointer;
310         }
311
312         div.treeLinkItem {
313                 display: block;
314                 min-height: 16px;
315                 padding-right: 2px;
316         }
317
318         ul {
319                 padding: 0 0 0 19px;
320                 margin: 0;
321                 list-style: none;
322
323                 li {
324                         padding: 0;
325                         margin: 0;
326                         white-space: nowrap;
327                         list-style: none;
328                 }
329
330                 li.active  {
331                         div.treeLinkItem {
332                                 background-color: #fff;
333                                 boder: 1px solid #d7d7d7;
334                                 border-right: 0;
335                         }
336
337                         li div.treeLinkItem {
338                                 margin: 0;
339                                 background-color: transparent;
340                                 border-width: 0;
341
342                         }
343                 }
344
345                 li.expanded {
346                         ul {
347                                 background: transparent url('../../../../icons/gfx/ol/line.gif') left top repeat-y;
348                         }
349                 }
350         }
351 }
352
353
354
355 ul.tree ul li.last > ul {
356         background: none;
357 }
358
359
360 ul.tree li.active span a,
361 ul.tree ul li.active span a {
362         font-weight: bold;
363 }
364
365 ul.tree li.active ul span a,
366 ul.tree ul li.active ul span a {
367         font-weight: normal;
368 }
369
370 ul #pages0_0 > ul {
371         padding-left: 0;
372 }
373
374 //
375 // active tree items, we have to work against the border: 1px here,
376 // otherwise tree elements would take too much space
377 //
378
379 ul.tree li.active div.treeLinkItem {
380         margin: -1px 0 -1px -1px;
381 }
382
383 span.dragIcon {
384         display: inline-block;
385         height: 16px;
386 }
387
388 ul.tree div.treeLinkItem span.dragId,
389 ul.tree div.treeLinkItem span.dragTitle,
390 ul.tree div.treeLinkItem img {
391         vertical-align: middle;
392 }
393
394 ul.tree div.treeLinkItem span.dragIcon {
395         vertical-align: top;
396 }
397
398 #dragIcon {
399         position: absolute;
400         visibility: hidden;
401         z-index: 20;
402         filter: alpha(opacity=50);
403         opacity: 0.5;
404         white-space: nowrap;
405 }
406
407
408 //
409 // Tree
410 //
411 #typo3-pagetree-deletionDropZone .x-panel-body {
412         background-position: right;
413         background-repeat: repeat-y;
414 }
415 [id=ext-backend-Modules-FileSystemNavigationFrame-index-php],
416 [id=ext-backend-Modules-FileSystemNavigationFrame-index-php] .module-body,
417 [id=typo3-pagetree-treeContainer] {
418         background-color: @navigation-bg;
419 }
420 [id=ext-backend-Modules-FileSystemNavigationFrame-index-php] .module-docheader {
421         padding-left: 10px;
422         padding-right: 10px;
423 }
424
425 .x-layout-split {
426         width: 1px;
427         background-color: @navigation-border;
428 }