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