linkify images in search results
[ryf-theme.git] / css / style.css
CommitLineData
1e7a45c4
VSB
1/**
2 * If using a CSS pre-processor, tell it to overwrite this file. If not, place
3 * your custom CSS modifications here.
4 */
5
658e30ec 6body { margin: 0; min-width: 320px; }
1e7a45c4 7
b4ed810a
VSB
8a { transition: 0.3s; }
9
1e7a45c4
VSB
10.navbar-default {
11 background: #000;
12 color: #FFF;
13 border: none;
14 border-radius: 0px;
15 box-sizing: content-box;
1e7a45c4
VSB
16 align-items: center;
17 margin-bottom: 100px;
18 min-height: 100px;
19}
20
b766958e
AE
21.navbar-header,
22#navbar-collapse {
1e7a45c4
VSB
23 max-width: 1150px;
24 padding: 0;
25 margin: 0 auto;
bfc9c2d3
VSB
26 border: none;
27 overflow: hidden;
1e7a45c4
VSB
28}
29
67263bd5 30.navbar-default .navbar-toggle { display: none; }
bfc9c2d3 31
1e7a45c4
VSB
32.navbar-header {
33 position: absolute;
34 top: 5px;
35}
36
67263bd5 37.navbar-brand { display: none; }
ccc0e97e
VSB
38
39#block-ryf-main-menu .navbar-nav { margin-left: 180px; }
40
0af85f8e 41.navbar-default .navbar-nav > .active > a,
b4ed810a 42.navbar-default .navbar-nav > .active > a:hover,
0af85f8e 43.navbar-default .navbar-nav > li > a {
b4ed810a 44 color: #FFF;
0af85f8e 45 background: #000;
b4ed810a 46 border-bottom: 2px solid transparent;
0af85f8e
AE
47 padding-bottom: 10px;
48 margin-bottom: 5px;
b4ed810a
VSB
49}
50
b4ed810a 51.navbar-default .navbar-nav > .active > a,
0af85f8e
AE
52.navbar-default .navbar-nav > .active > a:hover,
53.navbar-default .navbar-nav > li > a:hover {
b4ed810a
VSB
54 color: #edd400;
55 border-bottom: 2px solid #edd400;
56 padding-bottom: 5px;
0af85f8e 57 margin-bottom: 10px;
b4ed810a
VSB
58}
59
cafdcde8 60.page-header {
357e6db1 61 border-bottom: 2px solid #000;
cafdcde8
VSB
62 font-size: 2em;
63}
64
2cbded31
VSB
65.region-header .search-block-form {
66 width: 300px;
67 float: right;
68}
69
7ddc2c7c
AE
70.block-views {
71 margin-top: 20px;
72}
73
2f113c95
AE
74@media screen and (min-width: 520px) and (max-width: 599px) {
75 .logo img { margin-left: 50px; }
76 #block-ryf-main-menu .navbar-nav { margin-left: 230px; }
77}
aa4eefa7 78
2f113c95
AE
79@media screen and (min-width: 600px) and (max-width: 767px) {
80 .logo img { margin-left: 100px; }
81 #block-ryf-main-menu .navbar-nav { margin-left: 280px; }
82}
83
84@media screen and (max-width: 767px) {
85 .logo img { height: 150px; margin-top: 25px; }
86 .navbar-default { min-height: 230px; margin-bottom: 30px; }
87 #block-ryf-main-menu .navbar-nav { max-width: 130px; }
88}
89
81342c63
AE
90@media screen and (min-width: 768px) {
91 .navbar-nav { margin-top: 40px; }
92}
93
5235611e 94
cd0efca0
AE
95/* Selectors */
96
5235611e 97
cd0efca0
AE
98@media screen and (min-width: 768px) {
99 .form-inline .form-item .select-wrapper {
100 display: block;
101 }
102 .form-inline .form-actions {
103 margin-top: 21px;
104 }
105}
106
5235611e 107
16670121 108/* RYF List */
b4ed810a 109
5235611e 110
bd3568e1 111.ryf-list-row {
aa68642c
AE
112 padding: 0;
113 margin: 0 auto;
114 overflow: auto;
115}
116
16670121
VSB
117.ryf-list {
118 float: left;
119 margin: 0;
120 padding: 0.5em;
121 position:relative;
122 list-style: none;
123}
b4ed810a 124
16670121
VSB
125.ryf-list article {
126 border: 1px solid #ececec;
127 border-radius: 5px;
128 padding: 1em;
129 box-shadow: 2px 2px 5px #ddd;
130 transition: 0.3s;
131}
1e7a45c4 132
16670121
VSB
133.ryf-list article:hover {
134 box-shadow: 0px 0px 5px #aaa;
b4ed810a 135}
1e7a45c4 136
16670121 137.ryf-list .field--type-image {
c51f46de 138 width: 150px;
de63e943 139 height: 150px;
16670121
VSB
140 background: #fff;
141 border-radius: 10px;
142 display: flex;
c51f46de
AE
143 align-items: center;
144}
145
146.ryf-list .field--name-field-image {
00e72ccd 147 margin: 0 auto 10px auto;
1e7a45c4 148}
b4ed810a 149
16670121
VSB
150.ryf-list img {
151 max-width: 150px;
00e72ccd
AE
152 max-height: 150px;
153 object-fit: contain;
16670121
VSB
154 overflow: hidden;
155}
156
157.ryf-list img:hover {
158 border-radius: 0;
ccc0e97e 159}
b4ed810a 160
ccc0e97e 161.ryf-list h2 {
b4ed810a
VSB
162 text-align: left;
163 font-size: 1.5em;
164 font-weight: 500;
165 line-height: 1.2em;
16670121
VSB
166 margin: 0;
167 padding: 0;
168 padding-bottom: 1em;
b4ed810a
VSB
169}
170
171.ryf-list a {
172 color: #118991;
173 text-decoration: none;
174}
175
176.ryf-list a:hover {
177 color: #000;
178}
1e7a45c4 179
ccc0e97e
VSB
180.ryf-list .node-readmore,
181.ryf-list .tags,
182.ryf-list .supplier {
b4ed810a
VSB
183 width: 100%;
184 float: left;
185 font-size: 0.9em;
186 border-top: 1px solid #ccc4c4;
187 margin-top: 5px;
188 padding-top: 5px;
189 color: #afadad;
190}
16670121
VSB
191
192.ryf-list .node-readmore {
193 text-align: right;
194}
195
1b8274f8
AE
196.feed-icons,
197.more-link {
45431b7c 198 margin-top: 15px;
835801ab
AE
199 clear: both;
200}
1b8274f8
AE
201.more-link {
202 font-weight: bold;
203}
835801ab 204
e3fe14a1 205@media screen and (min-width: 450px) and (max-width: 659px) {
bd3568e1 206 .ryf-list-row {
aa68642c
AE
207 max-width: 600px;
208 }
e3fe14a1
AE
209 .ryf-list {
210 max-width: 300px;
211 float: none;
212 margin: 0 auto;
213 }
214}
215@media screen and (min-width: 660px) and (max-width: 767px) {
bd3568e1 216 .ryf-list-row {
aa68642c
AE
217 max-width: 600px;
218 }
e3fe14a1
AE
219 .ryf-list-row {
220 margin: 0 auto;
221 max-width: 660px;
222 }
223 .ryf-list {
224 max-width: 300px;
225 float: left;
226 }
227}
228
16670121 229
dbd9476a
AE
230/* Vendors list */
231
5235611e 232
bd3568e1 233.vendors-list-row {
df611aac 234 padding: 10px;
00227dc4
AE
235 margin: 0 auto;
236 overflow: auto;
237}
238
dbd9476a
AE
239@media screen and (max-width: 767px) {
240 .vendors-list-row {
241 margin: 0px auto;
242 }
243
244 .vendors-list {
245 margin-bottom: 40px;
246 list-style: none;
9203a4fd
AE
247
248 overflow: auto;
dbd9476a
AE
249 }
250
251 .vendors-list .views-field-field-icon {
252 width: 220px;
253
254 margin: 0px auto 20px auto;
255 }
256
257 .vendors-list .views-field-field-icon img {
258 margin: 0 auto;
259 }
260
b766958e
AE
261 .vendors-list .views-field-name,
262 .vendors-list .views-field-description__value {
dbd9476a
AE
263 max-width: 300px;
264 margin: 0 auto 10px auto;
265 }
266
267 .vendors-list .views-field-name {
268 font-weight: bold;
269 font-size: 18px;
270 text-align: center;
271 }
272
273}
274
275@media screen and (min-width: 768px) {
276 .vendors-list-row {
277 width: 600px;
278 margin: 0px auto;
279 }
280
281 .vendors-list {
282 list-style: none;
283 clear: left;
9203a4fd
AE
284
285 overflow: auto;
dbd9476a
AE
286 }
287
288 .vendors-list .views-field-field-icon {
289 width: 220px;
290 height: 220px;
291
292 margin-bottom: 40px;
293
294 float: left;
295 }
296
297 .vendors-list .views-field-field-icon img {
298 margin: 0 auto;
299 }
300
b766958e
AE
301 .vendors-list .views-field-name,
302 .vendors-list .views-field-description__value {
dbd9476a
AE
303 margin-left: 300px;
304 }
305
306 .vendors-list .views-field-name {
307 margin-bottom: 10px;
308 font-weight: bold;
309 font-size: 18px;
310 }
311}
312
313
f39cdbbc
AE
314/* Sidebars */
315
316
317@media screen and (max-width: 767px) {
318 .path-products #block-views-block-categories-categories-block { display: none; }
319}
320
321
222cefba
AE
322/* Vendor and Category taxonomy term pages */
323
324
5df3859d
AE
325.view-taxonomy-term .view-header .field--name-field-icon img {
326 margin: 0 auto;
327}
328
329.view-filters {
330 clear: left;
331}
332
222cefba
AE
333@media screen and (max-width: 559px) {
334 .view-taxonomy-term .view-header {
335 margin: 0 auto 40px auto;
336
337 overflow: auto;
338 }
339
340 .view-taxonomy-term .view-header .field--name-field-icon {
341 margin: 0 auto 20px auto;
342 width: 220px;
343 }
344
222cefba
AE
345 .view-taxonomy-term .view-header .field--name-description {
346 max-width: 360px;
347 margin: 0 auto;
348 padding: 0 10px;
349 }
350
222cefba
AE
351}
352
5df3859d 353@media screen and (min-width: 560px) {
222cefba
AE
354 .view-taxonomy-term .view-header {
355 margin: 0 0 40px 0;
356
357 overflow: auto;
358 }
359
360 .view-taxonomy-term .view-header .field--name-field-icon {
361 width: 220px;
362
363 float: left;
364 }
365
222cefba
AE
366 .view-taxonomy-term .view-header .field--name-description {
367 margin-left: 260px;
368 }
369
222cefba
AE
370}
371
372@media screen and (min-width: 768px) {
373 .view-taxonomy-term .view-header {
300bf8f5 374 max-width: 700px;
222cefba
AE
375 }
376}
377
378
4d7da022
AE
379/* Product */
380
5235611e 381
d679ca4e
AE
382@media screen and (max-width: 767px) {
383 .page-node-type-product .product {
384 max-width: 382px;
385 margin: 0 auto;
386 }
387}
388
21d9e444
AE
389@media screen and (min-width: 768px) and (max-width: 991px) {
390 .page-node-type-product .product {
391 width: 700px;
392 margin: 0 auto;
393 }
4d7da022
AE
394}
395
21d9e444
AE
396@media screen and (min-width: 992px) {
397 .page-node-type-product .product {
398 width: 800px;
399 margin: 0 auto;
400 }
401}
4d7da022 402
d679ca4e
AE
403.page-node-type-product .product .field--name-field-image {
404 padding: 10px;
4d7da022 405
d679ca4e
AE
406 border: 1px solid #888;
407 border-radius: 10px;
408}
4d7da022 409
aa0f7f3d
AE
410.page-node-type-product .product .field--name-field-image img {
411 margin: 0 auto;
412}
413
d679ca4e
AE
414.page-node-type-product .product .field--name-field-extra-images {
415 padding: 5px;
4d7da022 416
d679ca4e
AE
417 display: flex;
418 align-items: center;
4d7da022 419
d679ca4e
AE
420 border: 1px solid #888;
421 border-radius: 10px;
422}
4d7da022 423
d679ca4e
AE
424.page-node-type-product .product .field--name-field-extra-images .field--item {
425 display: inline-block;
426 margin: auto;
427 padding: 5px;
428}
4d7da022 429
b766958e
AE
430.page-node-type-product .product .field--name-field-categories,
431.page-node-type-product .product .field--name-field-vendor {
d679ca4e
AE
432 margin: 10px 10px 20px 0px;
433 padding: 10px;
434 border: 1px solid #888;
435 border-radius: 10px;
436}
437
433e107d
AE
438.page-node-type-product .product .field--name-field-categories .field--item {
439 display: list-item;
440 list-style: circle;
441 margin-left: 15px;
442}
443
28ff698e
AE
444/* product page colors */
445.page-node-type-product .product .field--name-field-image {
eee49201 446 background-color: #fff;
28ff698e
AE
447 border-color: #aaa;
448}
449.page-node-type-product .product .field--name-field-extra-images {
ebebd91d 450 background-color: #f3f3f3;
28ff698e
AE
451 border-color: #aaa;
452}
453.page-node-type-product .product .field--name-field-categories {
8be2a870
AE
454 background-color: #def;
455 border-color: #8ad;
28ff698e
AE
456}
457.page-node-type-product .product .field--name-field-vendor {
8be2a870
AE
458 background-color: #dfe;
459 border-color: #8da;
28ff698e
AE
460}
461
d679ca4e
AE
462@media screen and (max-width: 767px) {
463 .page-node-type-product .product .field--name-field-extra-images {
464 margin: 10px auto 0px auto;
21d9e444 465 }
4d7da022 466
b766958e
AE
467 .page-node-type-product .product .field--name-body,
468 .page-node-type-product .product .field--name-field-vendor-product-link,
469 .page-node-type-product .product .field--name-field-certification-details,
470 .page-node-type-product .product .field--name-field-certification-date,
471 .page-node-type-product .product .field--name-field-source-code-links {
21d9e444
AE
472 margin-bottom: 20px;
473 }
4d7da022 474
b766958e
AE
475 .page-node-type-product .product .field--name-field-categories,
476 .page-node-type-product .product .field--name-field-vendor {
21d9e444 477 float: left;
21d9e444 478 }
4d7da022 479
21d9e444
AE
480 .page-node-type-product .product .field--name-body {
481 clear: both;
482 }
4d7da022
AE
483}
484
21d9e444
AE
485
486@media screen and (min-width: 768px) {
487 .page-node-type-product .product .field--name-field-image {
488 width: 382px;
21d9e444 489 float: left;
21d9e444
AE
490 }
491
492 .page-node-type-product .product .field--name-field-extra-images {
493 float: left;
494 clear: left;
495
496 width: 382px;
21d9e444 497 margin-top: 10px;
21d9e444
AE
498 }
499
b766958e
AE
500 .page-node-type-product .product .field--name-body,
501 .page-node-type-product .product .field--name-field-vendor-product-link,
502 .page-node-type-product .product .field--name-field-certification-details,
503 .page-node-type-product .product .field--name-field-certification-date,
504 .page-node-type-product .product .field--name-field-source-code-links {
21d9e444
AE
505 margin-left: 400px;
506 margin-bottom: 20px;
507 }
508
509 .page-node-type-product .product .field--name-field-categories {
510 float: left;
511 clear: left;
512 }
513
514 .page-node-type-product .product .field--name-field-vendor {
515 float: left;
516 }
517
4d7da022
AE
518}
519
520
9f8b2429
AE
521/* News and Product Announcements */
522
523
524.page-node-type-product-announcement .page-header,
fa74cee2 525.page-node-type-product-announcement .tabs--primary,
9f8b2429
AE
526.page-node-type-product-announcement .region-content,
527.page-node-type-general-news-item .page-header,
fa74cee2 528.page-node-type-general-news-item .tabs--primary,
dca6d2ea
AE
529.page-node-type-general-news-item .region-content,
530.page-node-type-page .page-header,
fa74cee2 531.page-node-type-page .tabs--primary,
dca6d2ea 532.page-node-type-page .region-content,
9f8b2429 533.path-news .page-header,
fa74cee2 534.path-news .tabs--primary,
9f8b2429
AE
535.path-news .region-content {
536 max-width: 800px;
537 margin: 0 auto;
538}
539
8499d9cd
AE
540/* don't apply above max-width rule to main page */
541.path-frontpage .page-header,
fa74cee2 542.path-frontpage .tabs--primary,
8499d9cd
AE
543.path-frontpage .region-content {
544 max-width: 2000px; /* high number beyond the max */
545}
546
dca6d2ea
AE
547.page-node-type-page .page-header {
548 margin-bottom: 20px;
549}
550
e9d294a4
AE
551.path-news h2,
552.block-views-blocknews-news-block article h2 {
9f8b2429
AE
553 font-size: 25px;
554}
555
556.page-node-type-product-announcement .author,
557.page-node-type-general-news-item .author {
558 margin: 10px 0 20px 0;
559 font-style: oblique;
560}
561
562.page-node-type-product-announcement .field--name-body,
563.page-node-type-general-news-item .field--name-body {
564 margin-bottom: 20px;
565}
566
567.page-node-type-product-announcement .field--name-field-external-news-link,
568.page-node-type-general-news-item .field--name-field-external-news-link {
569 margin-bottom: 20px;
570}
571
572.page-node-type-product-announcement .field--name-field-vendor-page,
573.page-node-type-product-announcement .field--name-field-announced-products {
574 margin-bottom: 20px;
575}
576
577
41399eb4
AE
578/* Search Results */
579
580
581@media screen and (max-width: 600px) {
582 .path-search .region-content ol {
583 width: 300px;
584 }
585}
586@media screen and (min-width: 601px) and (max-width 1000px) {
587 .path-search .region-content ol {
588 width: 560px;
589 }
590}
591@media screen and (min-width: 1001px) {
592 .path-search .region-content ol {
593 width: 900px;
594 }
595}
596
597.path-search .region-content ol {
598 margin: 0 auto;
599 padding-left: 0;
600 overflow: auto;
601}
602
603.path-search .region-content li {
604 width: 280px;
605 height: 280px;
606 margin: 0px auto;
607 padding: 10px;
608
609 float: left;
610
611 list-style: none;
612 overflow: hidden;
613}
614
615.path-search .region-content li h3 {
616 text-align: center;
617}
618
619.path-search .region-content li .search-image {
620 width: 100px;
621 height: 100px;
622
623 margin: 0 auto;
624
625 display: flex;
626 align-items: center;
627}
628
629.path-search .region-content li img {
630}
631
632
16670121
VSB
633/* Footer */
634
5235611e 635
16670121
VSB
636.footer {
637 background: #333;
638 color: #FFF;
639}
640
06d8ab9f 641/* full page width for footer */
c900f9d4 642.footer {
c900f9d4
AE
643 width: 100%;
644}
645
16670121
VSB
646.footer a { color: #edd400; }
647
648.footer a:hover { color: #FFF; }
649
650.footer h4 { font-weight: bold; }
651
652.footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
653
0bd91ac3
AE
654#fsf-logo-footer { margin-bottom: 10px; }
655
18f8d3b1
AE
656@media print { #fsf-logo-footer { filter: invert(100%) } }
657