[TASK] Introduce CSS based trees
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / Resources / Private / Styles / TYPO3 / _element_tree.less
1 //
2 // Trees
3 //
4
5 @navigation-text: #000;
6 @navigation-bg: rgb(245, 245, 245);
7 @navigation-border: rgb(195, 195, 195);
8 @indentation: 0.5em;
9
10 .list-tree,
11 .list-tree ul {
12 margin: 0;
13 padding: 0;
14 list-style: none;
15 }
16
17 .list-tree {
18 > li {
19 margin-top: @indentation * 2;
20 }
21
22 ul {
23 margin-left: @indentation;
24 position: relative;
25
26 &:before {
27 content: "";
28 display: block;
29 width: 0;
30 position: absolute;
31 top: 0;
32 bottom: 1em;
33 left: 0;
34 margin-bottom: -2px;
35 border-left: 1px dotted @navigation-border;
36 }
37
38 ul {
39 margin-left: @indentation / 2;
40 }
41
42 li {
43 &:before {
44 content: "";
45 display: block;
46 width: 0.75em;
47 height: 0;
48 border-top: 1px dotted;
49 margin-top: -2px;
50 position: absolute;
51 top: 1em;
52 left: 2px;
53 }
54
55 margin: 0;
56 padding-left: @indentation * 2.5;
57 line-height: 1.75em;
58 color: @navigation-border;
59 position: relative;
60 }
61 }
62 }
63
64 table#typo3-tree {
65 margin: 10px 0 20px 10px;
66 width: 95%;
67 vertical-align: middle;
68
69 tr {
70 td {
71 padding: 0px;
72
73 img {
74 vertical-align: middle;
75 }
76
77 img.c-recIcon {
78 margin-right: 1px;
79 }
80
81 }
82 }
83
84 a {
85 text-decoration: none;
86 }
87
88 }
89
90 p.c-refresh img {
91 margin-right: 7px;
92 vertical-align: middle;
93 }
94
95 #typo3-pagetree #typo3-docheader div.buttonsright,
96 #typo3-alt-file-navframe-php #typo3-docheader div.buttonsright {
97 margin-right: 3px;
98 }
99
100 body#typo3-alt-db-navframe-php div.c-notice {
101 border: 1px solid black;
102 margin-top: 5px;
103 margin-bottom: 10px;
104 padding: 5px 5px 5px 5px;
105 width: 95%;
106 }
107
108 //
109 // Configuration trees, used in Admin Tools => Configuration
110 //
111
112 table.t3-tree-config {
113 background: #ececec;
114 background-image: linear-gradient(center top, #ffffff 0px, #ececec 100px);
115 border: 1px solid #adadad;
116 min-width: 500px;
117
118 .t3-tree-config-header {
119 text-align: left;
120 }
121 }
122
123 //
124 // AJAX Page Tree
125 //
126
127 body#typo3-pagetree,
128 body#typo3-alt-file-navframe-php {
129 margin: 0;
130 padding: 0;
131 }
132
133 body#typo3-pagetree #typo3-inner-docbody,
134 body#typo3-alt-file-navframe-php #typo3-inner-docbody {
135 padding: 0 0 10px 0;
136 }
137
138 ul.tree {
139 line-height: 12px;
140 list-style: none;
141 padding-left: 0;
142 clear: both;
143 margin: 16px 0 0 10px;
144 padding: 0;
145
146 a {
147 text-decoration: none;
148 }
149
150 a.pm {
151 cursor: pointer;
152 }
153
154 div.treeLinkItem {
155 display: block;
156 min-height: 16px;
157 padding-right: 2px;
158 }
159
160 ul {
161 padding: 0;
162 margin: 0;
163 padding-left: 19px;
164 list-style: none;
165
166 li {
167 padding: 0;
168 margin: 0;
169 white-space: nowrap;
170 list-style: none;
171 }
172
173 li.active {
174 div.treeLinkItem {
175 background-color: #fff;
176 border-color: #d7d7d7;
177 border-width: 1px 0 1px 1px;
178 border-style: solid;
179 }
180
181 li div.treeLinkItem {
182 margin: 0;
183 background-color: transparent;
184 border-width: 0;
185
186 }
187 }
188
189 li.expanded {
190 ul {
191 background: transparent url('../../../../icons/gfx/ol/line.gif') left top repeat-y;
192 }
193 }
194 }
195 }
196
197
198
199 ul.tree ul li.last > ul {
200 background: none;
201 }
202
203
204 ul.tree li.active span a,
205 ul.tree ul li.active span a {
206 font-weight: bold;
207 }
208
209 ul.tree li.active ul span a,
210 ul.tree ul li.active ul span a {
211 font-weight: normal;
212 }
213
214 ul #pages0_0 > ul {
215 padding-left: 0;
216 }
217
218 //
219 // active tree items, we have to work against the border: 1px here,
220 // otherwise tree elements would take too much space
221 //
222
223 ul.tree li.active div.treeLinkItem {
224 margin: -1px 0 -1px -1px;
225 }
226
227 span.dragIcon {
228 display: inline-block;
229 height: 16px;
230 }
231
232 ul.tree div.treeLinkItem span.dragId,
233 ul.tree div.treeLinkItem span.dragTitle,
234 ul.tree div.treeLinkItem img {
235 vertical-align: middle;
236 }
237
238 ul.tree div.treeLinkItem span.dragIcon {
239 vertical-align: top;
240 }
241 #dragIcon {
242 position: absolute;
243 visibility: hidden;
244 z-index: 20;
245 }
246
247 #treeFilterBox {
248 background-color: #dadada;
249 background-image: url('../../../../icons/gfx/filter_bg.gif');
250 background-repeat: no-repeat;
251 background-position: 0 -2px;
252 display: none;
253 height: 25px;
254 position: absolute;
255 top: 49px;
256 left: 0;
257 right: 0;
258 width: auto;
259 z-index: 3;
260 }
261
262 #searchBubble {
263 padding-left: 10px;
264 }
265
266 #treeFilter {
267 margin: 6px 0 0 17px !important;
268 height: 16px;
269 width: 160px;
270 }
271
272 #treeFilterReset {
273 border: 0;
274 cursor: pointer;
275 left: 192px;
276 position: absolute;
277 top: 5px;
278 visibility: hidden;
279 }
280
281 #typo3-pagetree #typo3-docheader img,
282 #typo3-alt-file-navframe-php #typo3-docheader img {
283 margin: 2px;
284 }
285
286 // Sprite icons for tree lines. Single lines need 6px padding. Can also be used directly inside .table
287
288 .t3-icon-treeline {
289 display: block;
290 float: left;
291 margin-top: -6px;
292 margin-bottom: -6px;
293 padding: 0;
294 height: 30px;
295 white-space: nowrap;
296 overflow: hidden;
297 }
298
299 //
300 // Tree
301 //
302
303 body#typo3-pagetree,
304 body#typo3-alt-file-navframe-php {
305 background: #ebebeb;
306 }
307
308 #typo3-alt-file-navframe-php #typo3-docbody,
309 #typo3-alt-file-navframe-php #typo3-docheader-row1,
310 #typo3-alt-file-navframe-php #typo3-docheader-row2,
311 .typo3-pagetree-indicatorBar-item,
312 #typo3-pagetree-topPanelItems,
313 #typo3-pagetree-topPanel .typo3-pagetree-topPanel-item,
314 #typo3-pagetree-treeContainer,
315 #typo3-pagetree .x-panel-tbar,
316 #typo3-pagetree-deletionDropZone .x-panel-body {
317 background-position: right;
318 background-repeat: repeat-y;
319 }
320
321 #typo3-alt-file-navframe-php #typo3-docbody,
322 #typo3-pagetree-treeContainer {
323 border-right: 1px solid @navigation-border;
324 background-color: @navigation-bg;
325 }
326
327 table#typo3-tree tr:hover {
328 background-color: #d7dbe2;
329 }
330
331 //
332 // AJAX Page Tree
333 //
334
335 #dragIcon {
336 filter: alpha(opacity=50);
337 opacity: 0.5;
338 white-space: nowrap;
339 }
340
341 #treeFilter {
342 background: transparent;
343 border: 0px;
344 }
345
346 #tree-toolbar-filter-item {
347 display: inline-block;
348 height: 22px;
349 width: 20px;
350 }
351
352 #tree-toolbar-filter-item.active {
353 background-image: url("../../../../icons/gfx/toolbar_item_active_bg.png")
354 }