6b4166f381cee15ab6ba03d9ae09b7446e1f247e
[ryf-theme.git] / css / style.css
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
6 body { margin: 0; min-width: 320px; }
7
8 a { transition: 0.3s; }
9
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
30 .navbar-default {
31 background: #000;
32 color: #FFF;
33 border: none;
34 border-radius: 0px;
35 box-sizing: content-box;
36 align-items: center;
37 margin-bottom: 100px;
38 min-height: 100px;
39 }
40
41 .navbar-header,
42 #navbar-collapse {
43 max-width: 1150px;
44 padding: 0;
45 margin: 0 auto;
46 border: none;
47 overflow: hidden;
48 }
49
50 .navbar-default .navbar-toggle { display: none; }
51
52 .navbar-header {
53 position: absolute;
54 top: 5px;
55 }
56
57 .navbar-brand { display: none; }
58
59 #block-ryf-main-menu .navbar-nav { margin-left: 180px; }
60
61 .navbar-default .navbar-nav > .active > a,
62 .navbar-default .navbar-nav > .active > a:hover,
63 .navbar-default .navbar-nav > li > a {
64 color: #FFF;
65 background: #000;
66 border-bottom: 2px solid transparent;
67 padding-bottom: 10px;
68 margin-bottom: 5px;
69 }
70
71 .navbar-default .navbar-nav > .active > a,
72 .navbar-default .navbar-nav > .active > a:hover,
73 .navbar-default .navbar-nav > li > a:hover {
74 color: #edd400;
75 border-bottom: 2px solid #edd400;
76 padding-bottom: 5px;
77 margin-bottom: 10px;
78 }
79
80 .page-header {
81 border-bottom: 2px solid #000;
82 font-size: 2em;
83 }
84
85 .region-header .search-block-form {
86 width: 300px;
87 float: right;
88 }
89
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 }
94
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
106 @media screen and (min-width: 768px) {
107 .navbar-nav { margin-top: 40px; }
108 }
109
110
111 /* Selectors */
112
113
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
123
124 /* RYF List */
125
126
127 .ryf-list-row {
128 padding: 0;
129 margin: 0 auto;
130 overflow: auto;
131 }
132
133 .ryf-list {
134 float: left;
135 margin: 0;
136 padding: 0.5em;
137 position:relative;
138 list-style: none;
139 }
140
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 }
148
149 .ryf-list article:hover {
150 box-shadow: 0px 0px 5px #aaa;
151 }
152
153 .ryf-list .field--type-image {
154 width: 150px;
155 height: 150px;
156 background: #fff;
157 border-radius: 10px;
158 display: flex;
159 align-items: center;
160 }
161
162 .ryf-list .field--name-field-image {
163 margin: 0 auto 10px auto;
164 }
165
166 .ryf-list img {
167 max-width: 150px;
168 max-height: 150px;
169 object-fit: contain;
170 overflow: hidden;
171 }
172
173 .ryf-list img:hover {
174 border-radius: 0;
175 }
176
177 .ryf-list h2 {
178 text-align: left;
179 font-size: 1.5em;
180 font-weight: 500;
181 line-height: 1.2em;
182 margin: 0;
183 padding: 0;
184 padding-bottom: 1em;
185 }
186
187 .ryf-list a {
188 color: #118991;
189 text-decoration: none;
190 }
191
192 .ryf-list a:hover {
193 color: #000;
194 }
195
196 .ryf-list .node-readmore,
197 .ryf-list .tags,
198 .ryf-list .supplier {
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 }
207
208 .ryf-list .node-readmore {
209 text-align: right;
210 }
211
212 @media screen and (min-width: 450px) and (max-width: 659px) {
213 .ryf-list-row {
214 max-width: 600px;
215 }
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) {
223 .ryf-list-row {
224 max-width: 600px;
225 }
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
236
237 /* Vendors list */
238
239
240 .vendors-list-row {
241 padding: 10px;
242 margin: 0 auto;
243 overflow: auto;
244 }
245
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;
254
255 overflow: auto;
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
268 .vendors-list .views-field-name,
269 .vendors-list .views-field-description__value {
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;
291
292 overflow: auto;
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
308 .vendors-list .views-field-name,
309 .vendors-list .views-field-description__value {
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
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
329 /* Vendor and Category taxonomy term pages */
330
331
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
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
352 .view-taxonomy-term .view-header .field--name-description {
353 max-width: 360px;
354 margin: 0 auto;
355 padding: 0 10px;
356 }
357
358 }
359
360 @media screen and (min-width: 560px) {
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
373 .view-taxonomy-term .view-header .field--name-description {
374 margin-left: 260px;
375 }
376
377 }
378
379 @media screen and (min-width: 768px) {
380 .view-taxonomy-term .view-header {
381 max-width: 700px;
382 }
383 }
384
385
386 /* Product */
387
388
389 @media screen and (max-width: 767px) {
390 .page-node-type-product .product {
391 max-width: 382px;
392 margin: 0 auto;
393 }
394 }
395
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 }
401 }
402
403 @media screen and (min-width: 992px) {
404 .page-node-type-product .product {
405 width: 800px;
406 margin: 0 auto;
407 }
408 }
409
410 .page-node-type-product .product .field--name-field-image {
411 padding: 10px;
412
413 border: 1px solid #888;
414 border-radius: 10px;
415 }
416
417 .page-node-type-product .product .field--name-field-image img {
418 margin: 0 auto;
419 }
420
421 .page-node-type-product .product .field--name-field-extra-images {
422 padding: 5px;
423
424 display: flex;
425 align-items: center;
426
427 border: 1px solid #888;
428 border-radius: 10px;
429 }
430
431 .page-node-type-product .product .field--name-field-extra-images .field--item {
432 display: inline-block;
433 margin: auto;
434 padding: 5px;
435 }
436
437 .page-node-type-product .product .field--name-field-categories,
438 .page-node-type-product .product .field--name-field-vendor {
439 margin: 10px 10px 20px 0px;
440 padding: 10px;
441 border: 1px solid #888;
442 border-radius: 10px;
443 }
444
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
451 /* product page colors */
452 .page-node-type-product .product .field--name-field-image {
453 background-color: #fff;
454 border-color: #aaa;
455 }
456 .page-node-type-product .product .field--name-field-extra-images {
457 background-color: #f3f3f3;
458 border-color: #aaa;
459 }
460 .page-node-type-product .product .field--name-field-categories {
461 background-color: #def;
462 border-color: #8ad;
463 }
464 .page-node-type-product .product .field--name-field-vendor {
465 background-color: #dfe;
466 border-color: #8da;
467 }
468
469 @media screen and (max-width: 767px) {
470 .page-node-type-product .product .field--name-field-extra-images {
471 margin: 10px auto 0px auto;
472 }
473
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 {
479 margin-bottom: 20px;
480 }
481
482 .page-node-type-product .product .field--name-field-categories,
483 .page-node-type-product .product .field--name-field-vendor {
484 margin-bottom: 0px;
485 float: left;
486 }
487
488 .page-node-type-product .product .field--name-body {
489 padding-top: 20px;
490 clear: both;
491 }
492 }
493
494
495 @media screen and (min-width: 768px) {
496 .page-node-type-product .product .field--name-field-image {
497 width: 382px;
498 float: left;
499 }
500
501 .page-node-type-product .product .field--name-field-extra-images {
502 float: left;
503 clear: left;
504
505 width: 382px;
506 margin-top: 10px;
507 }
508
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 {
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
527 }
528
529
530 /* News and Product Announcements */
531
532
533 .page-node-type-product-announcement .page-header,
534 .page-node-type-product-announcement .tabs--primary,
535 .page-node-type-product-announcement .region-content,
536 .page-node-type-general-news-item .page-header,
537 .page-node-type-general-news-item .tabs--primary,
538 .page-node-type-general-news-item .region-content,
539 .page-node-type-page .page-header,
540 .page-node-type-page .tabs--primary,
541 .page-node-type-page .region-content,
542 .path-news .page-header,
543 .path-news .tabs--primary,
544 .path-news .region-content {
545 max-width: 800px;
546 margin: 0 auto;
547 }
548
549 /* don't apply above max-width rule to main page */
550 .path-frontpage .page-header,
551 .path-frontpage .tabs--primary,
552 .path-frontpage .region-content {
553 max-width: 2000px; /* high number beyond the max */
554 }
555
556 .page-node-type-page .page-header {
557 margin-bottom: 20px;
558 }
559
560 .path-news h2,
561 .block-views-blocknews-news-block article h2 {
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
587 /* Search Results */
588
589
590 @media screen and (max-width: 600px) {
591 .path-search .region-content > ol {
592 width: 300px;
593 }
594 }
595 @media screen and (min-width: 601px) and (max-width 1000px) {
596 .path-search .region-content > ol {
597 width: 560px;
598 }
599 }
600 @media screen and (min-width: 1001px) {
601 .path-search .region-content > ol {
602 width: 900px;
603 }
604 }
605
606 .path-search .region-content > ol {
607 margin: 0 auto;
608 padding-left: 0;
609 overflow: auto;
610 }
611
612 .path-search .region-content > ol li {
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
624 .path-search .region-content > ol li h3 {
625 text-align: center;
626 }
627
628 .path-search .region-content > ol li .search-image {
629 width: 100px;
630 height: 100px;
631
632 margin: 0 auto;
633
634 display: flex;
635 align-items: center;
636 }
637
638 .path-search .region-content > ol li img {
639 }
640
641
642 /* Footer */
643
644
645 .footer {
646 background: #333;
647 color: #FFF;
648 }
649
650 /* full page width for footer */
651 .footer {
652 width: 100%;
653 }
654
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
663 #fsf-logo-footer { margin-bottom: 10px; }
664
665 @media print { #fsf-logo-footer { filter: invert(100%) } }
666