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