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