7147f04fff507b372a9cbb0e8c4f1e9f036f400c
[lhc/web/wiklou.git] / resources / src / mediawiki.special / mediawiki.special.search.interwikiwidget.styles.less
1 /* interwiki search results */
2 /*==========================*/
3
4 #mw-interwiki-results {
5 float: right;
6 width: 30%;
7 }
8
9 .iw-headline {
10 font-weight: bold;
11 font-size: 1rem;
12 font-size: 16px;
13 opacity: 0.7;
14 }
15
16 .iw-results {
17 list-style: none;
18 margin: 0;
19 }
20
21 .iw-resultset {
22 margin-bottom: 1.2em;
23 background-color: #f2f4f7;
24 vertical-align: top;
25 width: 100%;
26 float: left;
27 list-style-type: none;
28 }
29
30 /* clearfix */
31 .iw-result:after {
32 visibility: hidden;
33 display: block;
34 font-size: 0;
35 content: " ";
36 clear: both;
37 height: 0;
38 }
39
40 * html .interwiki-result { /* IE6 */
41 zoom: 1;
42 }
43 *:first-child + html .iw-resultset { /* IE7 */
44 zoom: 1;
45 }
46
47 /* padding each .iw-resultset section seperately.
48 This allows us greater flexibility in the design.
49 For example changing the background color on the
50 header and footer. */
51 .iw-result__header,
52 .iw-result__title,
53 .iw-result__content,
54 .iw-result__footer {
55 padding: 0.25em 0.85em;
56 }
57
58 /* definition titles appear inline,
59 to resemble a traditional dictionary definition */
60 .iw-resultset--definition .iw-result__title {
61 display: inline;
62 padding: 0;
63 }
64
65 .iw-resultset > div:first-child {
66 padding-top: 0.85em;
67 }
68
69 .iw-resultset > div:last-child {
70 padding-bottom: 0.85em;
71 }
72
73 .iw-result__title {
74 font-size: 16px; /* rem fallback */
75 font-size: 1rem;
76 }
77
78 .iw-result__title a.extiw {
79 color: #252525;
80 font-weight: bold;
81 }
82
83 .iw-result__content:after { /* clearfix */
84 visibility: hidden;
85 display: block;
86 font-size: 0;
87 content: " ";
88 clear: both;
89 height: 0;
90 }
91
92 .iw-result__footer {
93 float: right;
94 }
95
96 .iw-result__icon {
97 display: inline-block;
98 width: 24px;
99 height: 24px;
100 vertical-align: middle;
101 margin-right: 0.25em;
102 background: url( images/special.search/definition-icon.svg ) no-repeat 0 0;
103 background-size: 100% 100%;
104 }
105
106 @interwikiContentTypes: definition, travel, quotation, book, course, news, textbook, image;
107
108 .generate-iwIcons();
109
110 .generate-iwIcons( @i:1 ) when ( @i =< length( @interwikiContentTypes ) ) {
111 @iwIcon: extract( @interwikiContentTypes, @i );
112
113 .iw-result__icon--@{iwIcon} {
114 /* stylelint-disable-next-line function-url-quotes */
115 background-image: url( 'images/special.search/@{iwIcon}-icon.png' );
116 /* stylelint-disable-next-line function-url-quotes */
117 background-image: url( 'images/special.search/@{iwIcon}-icon.svg' );
118 }
119
120 .generate-iwIcons( @i + 1 );
121 }
122
123 /* image search result */
124 .iw-result__mini-gallery {
125 position: relative;
126 float: left;
127 width: 60%;
128 height: 200px;
129 box-sizing: border-box;
130 padding: 0.25rem;
131 }
132
133 .iw-result__mini-gallery__image {
134 display: block;
135 position: relative;
136 width: 100%;
137 height: 100%;
138 background-size: cover;
139 background-repeat: no-repeat;
140 background-position: center center;
141 }
142
143 .iw-result__mini-gallery__image:hover > .iw-result__mini-gallery__caption {
144 visibility: visible;
145 }
146
147 .iw-result__mini-gallery__image > .iw-result__mini-gallery__caption { /* image gallery text */
148 visibility: hidden;
149 position: absolute;
150 bottom: 0;
151 left: 0;
152 text-align: center;
153 color: #fff;
154 text-shadow: 0 0 10px rgba( 0, 0, 0, 0.4 ); /* improves legibility on white background*/
155 font-size: 0.8em;
156 padding: 5px;
157 background-color: rgba( 0, 0, 0, 0.5 );
158 }
159
160 .iw-result__mini-gallery:nth-child(2),
161 .iw-result__mini-gallery:nth-child(3) { /* second and third images are small */
162 width: 40%;
163 height: 100px;
164 }
165
166 /* different types of interwiki result boxes */
167 /* quotation box */
168 .iw-resultset--quotation .iw-result__content {
169 border-left: 4px solid #afb1b5;
170 margin-left: 1em;
171 padding-top: 0;
172 margin-top: 0.25em;
173 }
174 .iw-resultset--quotation .iw-result__title{
175 margin-left: 1em;
176 }
177 .iw-result--quotation .iw-result__title:before{
178 content: ' — ';
179 display: inline-block;
180 }
181 .iw-result--quotation .iw-result__footer {
182 text-align: right;
183 }
184
185 /* no results
186 span the interwiki results across the bottom of the page.
187 */
188
189 .mw-search-nonefound ~ #mw-search-interwiki {
190 width: 100%;
191 }
192
193 .mw-search-nonefound ~ #mw-search-interwiki .iw-resultset {
194 width: 30%;
195 max-width: 300px;
196 margin-left: 0.5em;
197 margin-right: 0.5em;
198 }
199
200 /* mobile */
201 @media only screen and ( max-width: 768px ) {
202 #mw-interwiki-results {
203 width: 100%;
204 }
205 .mw-search-results {
206 max-width: none !important;
207 }
208 .iw-resultset {
209 width: 45% !important;
210 margin-left: 0.5em !important;
211 margin-right: 0.5em !important;
212 }
213
214 }
215
216 @media only screen and ( max-width: 600px ) {
217 .iw-resultset {
218 width: 100% !important;
219 margin-left: 0 !important;
220 margin-right: 0 !important;
221 max-width: none !important;
222 }
223 }
224
225 /* Evil temporary hax for cawiki */
226 #sisterproject {
227 display: none;
228 }