62ff01ee9c71200260f28fd14d57b543776f871b
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / Resources / Private / Styles / TYPO3 / _module_extensionmanager.less
1 //
2 // Extensionmanager
3 //
4
5 // Tabs
6 #typo3-extension-main-menu .tabs ul,
7 #typo3-extension-configuration-forms .tabs ul {
8 list-style: none;
9 padding: 0;
10 margin-bottom: -1px;
11 .clearfix();
12 > li {
13 cursor: pointer;
14 &.ui-tabs-active a,
15 a.current {
16 background: white;
17 color: black;
18 border-bottom: 0;
19 padding-top: 4px;
20 cursor: default;
21 }
22 a {
23 border-radius: 4px 4px 0 0;
24 float: left;
25 height: 22px;
26 background: #dadada;
27 padding: 4px 15px;
28 margin-top: -1px;
29 margin-right: 2px;
30 border: 1px solid #adadad;
31 color: #606060;
32 outline: none;
33 &:hover {
34 background-color: #eee;
35 border-color: #adadad;
36 color: #606060;
37 }
38 }
39 }
40 }
41
42 // Extension list
43 .typo3-extension-list {
44 .ext-icon {
45 max-height: 16px;
46 width: auto;
47 }
48 }
49 .typo3-extensionmanager-headerRowLeft {
50 float: left;
51 }
52 .typo3-extensionmanager-headerRowRight {
53 float: right;
54 }
55 .ui-toolbar {
56 margin-bottom: 5px;
57 .dataTables_filter {
58 float: left;
59 }
60 }
61
62 // Paginator
63 .dataTables_info {
64 display: none;
65 }
66 .dataTables_paginate {
67 float: left;
68 margin: 10px 0 0;
69 }
70
71 // Upload form
72 .uploadForm {
73 background-color: #ededed;
74 border-top: 1px solid #cdcdcd;
75 border-bottom: 1px solid #cdcdcd;
76 padding: 12px;
77 margin-bottom: 24px;
78 form {
79 .control-group {
80 clear: both;
81 margin-bottom: 5px;
82 }
83 label {
84 float: left;
85 height: 20px;
86 padding: 4px 0;
87 line-height: 20px;
88 width: 90px;
89 }
90 .control {
91 min-height: 20px;
92 padding: 4px 0;
93 margin-left: 110px;
94 }
95 }
96 }
97
98 // Distributions list
99 .distribution {
100 border: 1px solid darken(@gray-lighter,15%);
101 background-color: @gray-lighter;
102 margin-bottom: 20px;
103 margin-left: 20px;
104 width: 300px;
105 float: left;
106 &:hover {
107 background-color: darken(@gray-lighter,3%);
108 .distribution-hover {
109 top: 0px;
110 opacity: 1;
111 }
112 .distribution-more {
113 text-decoration: underline;
114 }
115 }
116 }
117 .distribution-holder {
118 .clearfix();
119 top: 0px;
120 bottom: 0px;
121 margin-left: -20px;
122 }
123 .distribution-image {
124 position: relative;
125 width: 300px;
126 height: 225px;
127 overflow: hidden;
128 img {
129 display: block;
130 height: 100%;
131 width: 100%;
132 }
133 }
134 .distribution-hover {
135 background-color: @gray-lighter;
136 position: absolute;
137 top: 100%;
138 left: 0px;
139 width: 300px;
140 height: 225px;
141 overflow: hidden;
142 opacity: 0;
143 .transition(all 0.2s ease-in-out);
144 }
145 .distribution-hover-inner {
146 padding: 15px;
147 }
148 .distribution-meta {
149 border-top: 1px solid darken(@gray-lighter,10%);
150 padding: 15px;
151 .distribution-title {
152 margin: 0;
153 overflow: hidden;
154 white-space: nowrap;
155 text-overflow: ellipsis;
156 font-size: 14px;
157 }
158 .distribution-install {
159 margin-top: 0.5em;
160 }
161 .distribution-official {
162 border: 1px solid @brand-primary;
163 background-color: @brand-primary;
164 border-radius: 2px;
165 display: inline-block;
166 padding: 3px 8px;
167 vertical-align: middle;
168 color: #FFFFFF;
169 }
170 }
171
172 // Distributions detail
173 .distribution-detail-flashmessage {
174 margin-bottom: 2.5em;
175 p {
176 padding-bottom: 0;
177 }
178 }
179 .distribution-detail {
180 .clearfix();
181 min-width: 750px;
182 }
183 .distribution-detail-previewpane {
184 float: left;
185 margin-right: 30px;
186 }
187 .distribution-detail-preview {
188 display: block;
189 border: 1px solid darken(@gray-lighter,15%);
190 }
191 .distribution-detail-body {
192 overflow: hidden;
193 zoom: 1;
194 }
195 .distribution-detail-header {
196 h1 {
197 margin-bottom: 0.5em;
198 }
199 p {
200 padding: 0px;
201 max-width: 500px;
202 margin-bottom: 1.25em;
203 }
204 margin-bottom: 2.5em;
205 }
206 .distribution-detail-summary {
207 margin-top: 2.5em;
208 margin-bottom: 2.5em;
209 }
210 .distribution-installed {
211 hr {
212 margin: 2.5em 0;
213 border: 0;
214 border-top: 1px solid darken(@gray-lighter,15%);
215 }
216 }
217
218 // Misc
219 .ui-widget-header {
220 background: none;
221 border: none;
222 font-weight: normal;
223 }
224 .dataTables_info {
225 font-size: 10px;
226 color: #444;
227 float: left;
228 }
229 .paging_two_button .ui-button {
230 float: left;
231 cursor: pointer;
232 }
233 .paging_full_numbers .ui-button {
234 padding: 2px 6px;
235 margin: 0;
236 cursor: pointer;
237 color: #333 !important;
238 }
239 .dataTables_paginate .ui-button {
240 margin-right: -0.1em !important;
241 }
242 .paging_full_numbers {
243 float: right;
244 }
245 .dataTables_paginate {
246 width: auto;
247 }
248 #typo3-extension-configuration-forms {
249 min-width: 400px;
250 max-width: 900px;
251 .category {
252 background-repeat: repeat-x;
253 background-color: #fff;
254 border: 1px solid #adadad;
255 padding: 15px;
256 }
257 .group {
258 margin-bottom: 30px;
259 label {
260 display: block;
261 padding-bottom: 10px;
262 }
263 input[type=text] {
264 width: 300px;
265 }
266 }
267 }
268 #typo3-extension-configuration-forms #typo3-docheader-row2 .back {
269 float: right;
270 }
271 #typo3-extension-configuration-forms input.submit {
272 margin-top: 10px;
273 }
274 #typo3-extension-configuration-forms .error,
275 #typo3-extension-configuration-forms .invalid {
276 border-radius: 0 4px 4px 0;
277 .box-shadow(0 0 6px #ddd);
278 height: 15px;
279 background-color: #ff2262;
280 border: 1px solid #e1e16d;
281 font-size: 11px;
282 color: #000;
283 padding: 3px 10px;
284 margin-left: -2px;
285 }
286 #typo3-extension-configuration-forms .info {
287 color: #666;
288 font-weight: normal;
289 }
290 .typo3-extension-list tr.installed td {
291 background-color: #c8ffaa;
292 }
293 .typo3-extension-list tr.available td {
294 background-color: #E1E1aa;
295 }
296 .typo3-extension-manager .insecure {
297 color: #ff2262;
298 }
299 .typo3-extension-manager .outdated {
300 color: #0c08ff;
301 }
302 .typo3-extension-manager form#extensionUploadForm {
303 margin-bottom: 0;
304 div.control-group:last-child {
305 margin-bottom: 0;
306 }
307 }
308 .typo3-extension-list .inactive {
309 color: rgb(170, 170, 170);
310 }
311 .headerTooltip,
312 .tooltip {
313 .box-shadow(2px 2px 11px #666);
314 display: none;
315 width: 400px;
316 background-color: #ffa;
317 border: 1px solid #cc9;
318 padding: 3px;
319 font-size: 13px;
320 z-index: 1000;
321 }
322 .headerTooltip {
323 width: 150px;
324 }
325
326 // Loader
327 #terTableWrapper {
328 position: relative;
329 .splash-receivedata {
330 display: none;
331 position: absolute;
332 top: 50px;
333 left: 50%;
334 margin: 0 0 0 -150px;
335 a {
336 display: inline-block;
337 width: 200px;
338 vertical-align: top;
339 padding: 3px 20px;
340 }
341 &.is-shown {
342 display: block;
343 }
344 }
345 .spinner {
346 display: inline-block;
347 }
348 .ui-icon {
349 width: 16px;
350 height: 16px;
351 background-image: url('../Images/ui-icons_222222_256x240.png');
352 background-position: -64px -16px;
353 }
354 }
355 .time-since-last-update {
356 font-weight: bold;
357 padding-right: 0.4em;
358 cursor: help;
359 }
360 .is-loading {
361 opacity: 0;
362 }
363
364 // If something is hidden
365 .is-hidden {
366 display: none;
367 }
368
369 .typo3-extension-list {
370 // Import extension
371 .t3-icon,
372 .t3-icon:hover {
373 border: none;
374 background-color: transparent;
375 }
376 // Hide author for now
377 .author {
378 display: none;
379 }
380 }
381
382 // Show all versions
383 .versions-all {
384 display: inline-block;
385 width: 20px;
386 text-indent: -200px;
387 overflow: hidden;
388 }
389 .currentVersionInfo {
390 padding: 0 0 20px 0;
391
392 td { padding: 4px 0; }
393 th { font-weight: normal; color: #8c8c8c; padding: 4px 20px 4px 0; }
394 }
395 span.ter-ext-state {
396 padding: 0 0 0 5px;
397 font-weight: bold;
398 text-transform: capitalize;
399 }
400 #typo3-docbody form.download {
401 margin-bottom: 0;
402 }
403 .typo3-extensionmanager-headerRowLeft {
404 display: inline-block;
405 .typo3-extensionmanager-searchTerFieldWrapper {
406 display: inline-block;
407 position: relative;
408 input {
409 height: 15px;
410 }
411 .t3-icon-input-clear {
412 position: absolute;
413 right: 3px;
414 top: 4px;
415 }
416 }
417 }
418
419
420
421
422
423
424
425
426