72d3992eca26c4fc912e654cc56ad1ef910f8934
[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: @navigation-border;
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 table#typo3-tree {
94 margin: 10px 0 20px 10px;
95 width: 95%;
96 vertical-align: middle;
97
98 tr {
99 td {
100 padding: 0;
101
102 img {
103 vertical-align: middle;
104 &.c-recIcon {
105 margin-right: 1px;
106 }
107 }
108 }
109 }
110
111 a {
112 text-decoration: none;
113 }
114
115 }
116
117 p.c-refresh img {
118 margin-right: 7px;
119 vertical-align: middle;
120 }
121
122 #typo3-pagetree #typo3-docheader div.buttonsright,
123 #ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docheader div.buttonsright {
124 margin-right: 3px;
125 }
126
127 body#typo3-alt-db-navframe-php div.c-notice {
128 border: 1px solid black;
129 margin-top: 5px;
130 margin-bottom: 10px;
131 padding: 5px 5px 5px 5px;
132 width: 95%;
133 }
134
135 /** CSS-based tree for Foldertree */
136 ul#treeRoot {
137 li:last-child:before {
138 background-color: #ececec;
139 }
140
141 &:before {
142 border: 0;
143 }
144
145 > li:before {
146 border: 0;
147 }
148
149 > li {
150 border-left: 0;
151 }
152 }
153
154 // change background color for folder nav frame
155 body#ext-backend-Modules-FileSystemNavigationFrame-index-php ul#treeRoot li:last-child:before {
156 background-color: #f5f5f5;
157 }
158
159 body#imp-exp-mod ul#treeRoot {
160 > li:first-child {
161 padding-left: 0;
162 }
163 ul li:last-child:before {
164 background-color: #f1f1f1;
165 }
166 }
167
168 ul#flatTreeRoot {
169 li:last-child:before {
170 background-color: #f1f1f1;
171 }
172 }
173
174 //
175 // Configuration trees, used in Admin Tools => Configuration
176 //
177
178 table.t3-tree-config {
179 background: #ececec;
180 background-image: linear-gradient(center top, #ffffff 0px, #ececec 100px);
181 border: 1px solid #adadad;
182 min-width: 500px;
183
184 .t3-tree-config-header {
185 text-align: left;
186 }
187 }
188
189 //
190 // AJAX Page Tree
191 //
192
193 body#typo3-pagetree,
194 body#ext-backend-Modules-FileSystemNavigationFrame-index-php {
195 margin: 0;
196 padding: 0;
197 }
198
199 body#typo3-pagetree #typo3-inner-docbody {
200 padding: 0 0 10px 0;
201 }
202 body#ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-inner-docbody {
203 padding: 10px 0;
204 }
205
206 ul.tree {
207 line-height: 12px;
208 list-style: none;
209 clear: both;
210 margin: 16px 0 0 10px;
211 padding: 0;
212
213 a {
214 text-decoration: none;
215 }
216
217 a.pm {
218 cursor: pointer;
219 }
220
221 div.treeLinkItem {
222 display: block;
223 min-height: 16px;
224 padding-right: 2px;
225 }
226
227 ul {
228 padding: 0 0 0 19px;
229 margin: 0;
230 list-style: none;
231
232 li {
233 padding: 0;
234 margin: 0;
235 white-space: nowrap;
236 list-style: none;
237 }
238
239 li.active {
240 div.treeLinkItem {
241 background-color: #fff;
242 boder: 1px solid #d7d7d7;
243 border-right: 0;
244 }
245
246 li div.treeLinkItem {
247 margin: 0;
248 background-color: transparent;
249 border-width: 0;
250
251 }
252 }
253
254 li.expanded {
255 ul {
256 background: transparent url('../../../../icons/gfx/ol/line.gif') left top repeat-y;
257 }
258 }
259 }
260 }
261
262
263
264 ul.tree ul li.last > ul {
265 background: none;
266 }
267
268
269 ul.tree li.active span a,
270 ul.tree ul li.active span a {
271 font-weight: bold;
272 }
273
274 ul.tree li.active ul span a,
275 ul.tree ul li.active ul span a {
276 font-weight: normal;
277 }
278
279 ul #pages0_0 > ul {
280 padding-left: 0;
281 }
282
283 //
284 // active tree items, we have to work against the border: 1px here,
285 // otherwise tree elements would take too much space
286 //
287
288 ul.tree li.active div.treeLinkItem {
289 margin: -1px 0 -1px -1px;
290 }
291
292 span.dragIcon {
293 display: inline-block;
294 height: 16px;
295 }
296
297 ul.tree div.treeLinkItem span.dragId,
298 ul.tree div.treeLinkItem span.dragTitle,
299 ul.tree div.treeLinkItem img {
300 vertical-align: middle;
301 }
302
303 ul.tree div.treeLinkItem span.dragIcon {
304 vertical-align: top;
305 }
306 #dragIcon {
307 position: absolute;
308 visibility: hidden;
309 z-index: 20;
310 }
311
312 #treeFilterBox {
313 background: url('../../../../icons/gfx/filter_bg.gif') 0 -2px no-repeat;
314 background-color: #dadada;
315 display: none;
316 height: 25px;
317 position: absolute;
318 top: 49px;
319 left: 0;
320 right: 0;
321 width: auto;
322 z-index: 3;
323 }
324
325 #searchBubble {
326 padding-left: 10px;
327 }
328
329 #treeFilter {
330 margin: 6px 0 0 17px !important;
331 height: 16px;
332 width: 160px;
333 }
334
335 #treeFilterReset {
336 position: absolute;
337 top: 5px;
338 left: 192px;
339 border: 0;
340 cursor: pointer;
341 visibility: hidden;
342 }
343
344 #typo3-pagetree #typo3-docheader img {
345 margin: 2px;
346 }
347
348 // Sprite icons for tree lines. Single lines need 6px padding. Can also be used directly inside .table
349
350 .t3-icon-treeline {
351 display: block;
352 float: left;
353 margin-top: -6px;
354 margin-bottom: -6px;
355 padding: 0;
356 height: 30px;
357 white-space: nowrap;
358 overflow: hidden;
359 }
360
361 //
362 // Tree
363 //
364
365 body#typo3-pagetree,
366 body#ext-backend-Modules-FileSystemNavigationFrame-index-php {
367 background: #ebebeb;
368 }
369
370 #ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docbody,
371 #ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docheader-row1,
372 #ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docheader-row2,
373 .typo3-pagetree-indicatorBar-item,
374 #typo3-pagetree-topPanelItems,
375 #typo3-pagetree-topPanel .typo3-pagetree-topPanel-item,
376 #typo3-pagetree-treeContainer,
377 #typo3-pagetree .x-panel-tbar,
378 #typo3-pagetree-deletionDropZone .x-panel-body {
379 background-position: right;
380 background-repeat: repeat-y;
381 }
382
383 #ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docbody,
384 #typo3-pagetree-treeContainer {
385 border-right: 1px solid @navigation-border;
386 background-color: @navigation-bg;
387 }
388
389 table#typo3-tree tr:hover {
390 background-color: #d7dbe2;
391 }
392
393 //
394 // AJAX Page Tree
395 //
396
397 #dragIcon {
398 filter: alpha(opacity=50);
399 opacity: 0.5;
400 white-space: nowrap;
401 }
402
403 #treeFilter {
404 background: transparent;
405 border: 0;
406 }
407
408 #tree-toolbar-filter-item {
409 display: inline-block;
410 height: 22px;
411 width: 20px;
412 }
413
414 #tree-toolbar-filter-item.active {
415 background-image: url("../../../../icons/gfx/toolbar_item_active_bg.png")
416 }