[TASK] Show suited TYPO3 versions at distributions
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / Resources / Private / Styles / TYPO3 / _module_extensionmanager.less
1 //
2 // Extensionmanager
3 //
4
5 // Extension list
6 .typo3-extension-list {
7         .ext-icon {
8                 max-height: 16px;
9                 width: auto;
10         }
11 }
12 .typo3-extensionmanager-headerRowLeft {
13         float: left;
14 }
15 .typo3-extensionmanager-headerRowRight {
16         float: right;
17 }
18 .ui-toolbar {
19         margin-bottom: 5px;
20         .dataTables_filter {
21                 float: left;
22         }
23 }
24
25 // Paginator
26 .dataTables_info {
27         display: none;
28 }
29 .dataTables_paginate {
30         float: left;
31         margin: 10px 0 0;
32 }
33
34 // Upload form
35 .uploadForm {
36         background-color: #ededed;
37         border-top: 1px solid #cdcdcd;
38         border-bottom: 1px solid #cdcdcd;
39         padding: 12px;
40         margin-bottom: 24px;
41         form {
42                 .control-group {
43                         clear: both;
44                         margin-bottom: 5px;
45                 }
46                 label {
47                         float: left;
48                         height: 20px;
49                         padding: 4px 0;
50                         line-height: 20px;
51                         width: 90px;
52                 }
53                 .control {
54                         min-height: 20px;
55                         padding: 4px 0;
56                         margin-left: 110px;
57                 }
58         }
59 }
60
61 // Distributions list
62 .distribution {
63         border: 1px solid darken(@gray-lighter,15%);
64         background-color: @gray-lighter;
65         margin-bottom: 20px;
66         margin-left: 20px;
67         width: 300px;
68         float: left;
69         &:hover {
70                 background-color: darken(@gray-lighter,3%);
71                 .distribution-hover {
72                         top: 0px;
73                         opacity: 1;
74                 }
75                 .distribution-more {
76                         text-decoration: underline;
77                 }
78         }
79         .typo3-dependency-version {
80                 position: absolute;
81                 right: 0px;
82         }
83 }
84 .distribution-holder {
85         .clearfix();
86         top: 0px;
87         bottom: 0px;
88         margin-left: -20px;
89 }
90 .distribution-image {
91         position: relative;
92         width: 300px;
93         height: 225px;
94         overflow: hidden;
95         img {
96                 display: block;
97                 height: 100%;
98                 width: 100%;
99         }
100 }
101 .distribution-hover {
102         background-color: @gray-lighter;
103         position: absolute;
104         top: 100%;
105         left: 0px;
106         width: 300px;
107         height: 225px;
108         overflow: hidden;
109         opacity: 0;
110         .transition(all 0.2s ease-in-out);
111 }
112 .distribution-hover-inner {
113         padding: 15px;
114 }
115 .distribution-meta {
116         border-top: 1px solid darken(@gray-lighter,10%);
117         padding: 15px;
118         .distribution-title {
119                 margin: 0;
120                 overflow: hidden;
121                 white-space: nowrap;
122                 text-overflow: ellipsis;
123                 font-size: 14px;
124         }
125         .distribution-install {
126                 margin-top: 0.5em;
127         }
128 }
129
130 // Distributions detail
131 .distribution-detail-flashmessage {
132         margin-bottom: 2.5em;
133         p {
134                 padding-bottom: 0;
135         }
136 }
137 .distribution-detail {
138         .clearfix();
139         min-width: 750px;
140 }
141 .distribution-detail-previewpane {
142         float: left;
143         margin-right: 30px;
144 }
145 .distribution-detail-preview {
146         display: block;
147         border: 1px solid darken(@gray-lighter,15%);
148 }
149 .distribution-detail-body {
150         overflow: hidden;
151         zoom: 1;
152 }
153 .distribution-detail-header {
154         h1 {
155                 margin-bottom: 0.5em;
156         }
157         p {
158                 padding: 0px;
159                 max-width: 500px;
160                 margin-bottom: 1.25em;
161         }
162         margin-bottom: 2.5em;
163 }
164 .distribution-detail-summary {
165         margin-top: 2.5em;
166         margin-bottom: 2.5em;
167 }
168 .distribution-installed {
169         hr {
170                 margin: 2.5em 0;
171                 border: 0;
172                 border-top: 1px solid darken(@gray-lighter,15%);
173         }
174 }
175
176 // Misc
177 .ui-widget-header {
178         background: none;
179         border: none;
180         font-weight: normal;
181 }
182 .dataTables_info {
183         font-size: 10px;
184         color: #444;
185         float: left;
186 }
187 .paging_two_button .ui-button {
188         float: left;
189         cursor: pointer;
190 }
191 .paging_full_numbers .ui-button {
192         padding: 2px 6px;
193         margin: 0;
194         cursor: pointer;
195         color: #333 !important;
196 }
197 .dataTables_paginate .ui-button {
198         margin-right: -0.1em !important;
199 }
200 .paging_full_numbers {
201         float: right;
202 }
203 .dataTables_paginate {
204         width: auto;
205 }
206 .typo3-extension-list tr.installed td {
207         background-color: #c8ffaa;
208 }
209 .typo3-extension-list tr.available td {
210         background-color: #E1E1aa;
211 }
212 .typo3-extension-manager .insecure {
213         color: #ff2262;
214 }
215 .typo3-extension-manager .outdated {
216         color: #0c08ff;
217 }
218 .typo3-extension-manager form#extensionUploadForm {
219         margin-bottom: 0;
220         div.control-group:last-child {
221                 margin-bottom: 0;
222         }
223 }
224 .typo3-extension-list .inactive {
225         color: rgb(170, 170, 170);
226 }
227 .headerTooltip,
228 .tooltip {
229         .box-shadow(2px 2px 11px #666);
230         display: none;
231         width: 400px;
232         background-color: #ffa;
233         border: 1px solid #cc9;
234         padding: 3px;
235         font-size: 13px;
236         z-index: 1000;
237 }
238 .headerTooltip {
239         width: 150px;
240 }
241
242 // Loader
243 #terTableWrapper {
244         position: relative;
245         .splash-receivedata {
246                 display: none;
247                 position: absolute;
248                 top: 50px;
249                 left: 50%;
250                 margin: 0 0 0 -150px;
251                 a {
252                         display: inline-block;
253                         width: 200px;
254                         vertical-align: top;
255                         padding: 3px 20px;
256                 }
257                 &.is-shown {
258                         display: block;
259                 }
260         }
261         .spinner {
262                 display: inline-block;
263         }
264         .ui-icon {
265                 width: 16px;
266                 height: 16px;
267         }
268 }
269 .time-since-last-update {
270         font-weight: bold;
271         padding-right: 0.4em;
272         cursor: help;
273 }
274 .is-loading {
275         opacity: 0;
276 }
277
278 // If something is hidden
279 .is-hidden {
280         display: none;
281 }
282
283 .typo3-extension-list {
284         // Hide author for now
285         .author {
286                 display: none;
287         }
288 }
289
290 // Show all versions
291 .versions-all {
292         display: inline-block;
293         width: 20px;
294         text-indent: -200px;
295         overflow: hidden;
296 }
297 .currentVersionInfo {
298         padding: 0 0 20px 0;
299
300         td { padding: 4px 0; }
301         th { font-weight: normal; color: #8c8c8c; padding: 4px 20px 4px 0; }
302 }
303 span.ter-ext-state {
304         padding: 0 0 0 5px;
305         font-weight: bold;
306         text-transform: capitalize;
307 }
308 #typo3-docbody form.download {
309         margin-bottom: 0;
310 }
311 .typo3-extensionmanager-headerRowLeft {
312         display: inline-block;
313         .typo3-extensionmanager-searchTerFieldWrapper {
314                 display: inline-block;
315                 position: relative;
316                 input {
317                         height: 15px;
318                 }
319                 .t3-icon-input-clear {
320                         position: absolute;
321                         right: 3px;
322                         top: 4px;
323                 }
324         }
325 }
326
327
328
329
330
331
332
333
334