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