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