[BUGFIX] Fix backend tree height
[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 }