[TASK] Show suited TYPO3 versions at distributions
[Packages/TYPO3.CMS.git] / typo3 / sysext / extensionmanager / Resources / Private / Scss / page / _distribution.scss
1 /**
2  * Extension List View
3  **/
4 .distribution {
5         border: 1px solid darken($gray-lighter,15%);
6         background-color: $gray-lighter;
7         margin-bottom: 20px;
8         margin-left: 20px;
9         width: 300px;
10         float: left;
11         &:hover {
12                 background-color: darken($gray-lighter,3%);
13                 .distribution-hover {
14                         top: 0px;
15                         opacity: 1;
16                 }
17                 .distribution-more {
18                         text-decoration: underline;
19                 }
20         }
21   .typo3-dependency-version {
22     position: absolute;
23     right: 2px;
24
25     .label {
26       display: inline;
27       padding: .2em .6em .3em;
28       font-size: 75%;
29       font-weight: bold;
30       line-height: 1;
31       color: #ffffff;
32       text-align: center;
33       white-space: nowrap;
34       vertical-align: baseline;
35       border-radius: .25em;
36     }
37     a.label:hover,
38     a.label:focus {
39       color: #ffffff;
40       text-decoration: none;
41       cursor: pointer;
42     }
43     .label:empty {
44       display: none;
45     }
46     .btn .label {
47       position: relative;
48       top: -1px;
49     }
50     .label-default,
51     .label-obsolete,
52     .label-experimental,
53     .label-test,
54     .label-excludeFromUpdates {
55       background-color: #d7d7d7;
56     }
57     .label-default[href]:hover,
58     .label-default[href]:focus {
59       background-color: #bebebe;
60     }
61     .label-primary {
62       background-color: #0078e6;
63     }
64     .label-primary[href]:hover,
65     .label-primary[href]:focus {
66       background-color: #005db3;
67     }
68     .label-success,
69     .label-stable {
70       background-color: #1eb941;
71     }
72     .label-success[href]:hover,
73     .label-success[href]:focus {
74       background-color: #178d32;
75     }
76     .label-info {
77       background-color: #41b4dc;
78     }
79     .label-info[href]:hover,
80     .label-info[href]:focus {
81       background-color: #249cc6;
82     }
83     .label-warning,
84     .label-beta {
85       background-color: #f07814;
86     }
87     .label-warning[href]:hover,
88     .label-warning[href]:focus {
89       background-color: #c4600d;
90     }
91     .label-danger,
92     .label-alpha {
93       background-color: #c83c3c;
94     }
95     .label-danger[href]:hover,
96     .label-danger[href]:focus {
97       background-color: #a32e2e;
98     }
99   }
100 }
101 .distribution-holder {
102         @include clearfix;
103         top: 0px;
104         bottom: 0px;
105         margin-left: -20px;
106 }
107 .distribution-image {
108         position: relative;
109         width: 300px;
110         height: 225px;
111         overflow: hidden;
112         img {
113                 display: block;
114                 height: 100%;
115                 width: 100%;
116         }
117 }
118 .distribution-hover {
119         background-color: $gray-lighter;
120         position: absolute;
121         top: 100%;
122         left: 0px;
123         width: 300px;
124         height: 225px;
125         overflow: hidden;
126         opacity: 0;
127         @include transition(all 0.2s ease-in-out);
128 }
129 .distribution-hover-inner {
130         padding: 15px;
131 }
132 .distribution-meta {
133         border-top: 1px solid darken($gray-lighter,10%);
134         padding: 15px;
135         .distribution-title {
136                 margin: 0;
137                 overflow: hidden;
138                 white-space: nowrap;
139                 text-overflow: ellipsis;
140                 font-size: 14px;
141         }
142         .distribution-install {
143                 margin-top: 0.5em;
144         }
145         .t3-button {
146                 margin: 0;
147                 padding-right: 8px;
148         }
149         .distribution-official {
150                 border: 1px solid $brand-color;
151                 background-color: $brand-color;
152                 border-radius: 2px;
153                 display: inline-block;
154                 padding: 3px 8px;
155                 vertical-align: middle;
156                 color: #FFFFFF;
157         }
158 }
159
160
161 /**
162  * Extension Detail View
163  **/
164 .distribution-detail-flashmessage {
165         margin-bottom: 2.5em;
166         p {
167                 padding-bottom: 0;
168         }
169 }
170 .distribution-detail {
171         @include clearfix();
172         min-width: 750px;
173 }
174 .distribution-detail-previewpane {
175         float: left;
176         margin-right: 30px;
177 }
178 .distribution-detail-preview {
179         display: block;
180         border: 1px solid darken($gray-lighter,15%);
181 }
182 .distribution-detail-body {
183         overflow: hidden;
184         zoom: 1;
185 }
186 .distribution-detail-header {
187         h1 {
188                 margin-bottom: 0.5em;
189         }
190         p {
191                 padding: 0px;
192                 max-width: 500px;
193                 margin-bottom: 1.25em;
194         }
195         margin-bottom: 2.5em;
196 }
197 .distribution-detail-summary {
198         margin-top: 2.5em;
199         margin-bottom: 2.5em;
200 }
201 .distribution-installed {
202         hr {
203                 margin: 2.5em 0;
204                 border: 0;
205                 border-top: 1px solid darken($gray-lighter,15%);
206         }
207 }