1fc35d66f4974d2646f93c04f8f344c3da15c076
[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 /* Lato font */
7
8 @font-face {
9 font-family: "Lato";
10 url("../fonts/Lato-Regular.ttf") format('truetype');
11 font-weight: 400;
12 font-style: normal;
13 }
14
15 @font-face {
16 font-family: "Lato";
17 url('../fonts/Lato-RegularItalic.ttf') format('truetype');
18 font-weight: 400;
19 font-style: italic;
20 }
21
22 @font-face {
23 font-family: "Lato";
24 url('../fonts/Lato-Bold.ttf') format('truetype');
25 font-weight: 700;
26 font-style: normal;
27 }
28
29
30 /* Universal */
31
32 body {
33 font-family: "Lato", Helvetica, Arial, sans-serif;
34 margin: 0;
35 min-width: 320px;
36 }
37
38 a { transition: 0.3s; }
39
40 section { position: relative; }
41
42 /* etcetera */
43
44 .visually-hidden.focusable:focus {
45 position: absolute !important;
46 background: #000;
47 color: #FFF;
48 padding: 0.5em;
49 z-index: 9999;
50 }
51
52 .region-content { min-height: 300px; }
53
54 h2.block-title {
55 background: #000;
56 color: #FFF;
57 padding: 0.5em;
58 }
59
60 .feed-icons a {
61 background: url('../images/rss.svg') top left no-repeat;
62 background-size: contain;
63 height: 20px;
64 overflow: hidden;
65 display: block;
66 text-indent: 25px;
67 font-size: 1em;
68 width: fit-content;
69 margin-top: 1em;
70 float: right;
71 }
72
73 .view-display-id-news_page .feed-icons a {
74 margin-top: -30px;
75 }
76
77 .more-link {
78 border: 1px solid #ddd;
79 border-radius: .5em;
80 padding: .5em;
81 text-align: center;
82 width: 50%;
83 margin: 0 auto;
84 font-weight: bold;
85 margin-top: 2em;
86 }
87
88 .more-link:hover {
89 background: #EEE;
90 color: #000;
91 }
92
93 .block-views {
94 margin-top: 20px;
95 }
96
97 /* Navbar */
98
99 .navbar-default {
100 background: #000;
101 color: #FFF;
102 border: none;
103 border-radius: 0px;
104 box-sizing: content-box;
105 align-items: center;
106 min-height: 100px;
107 }
108
109 .navbar-header,
110 #navbar-collapse {
111 max-width: 1150px;
112 padding: 0;
113 margin: 0 auto;
114 border: none;
115 overflow: hidden;
116 }
117
118 .navbar-default .navbar-toggle { display: none; }
119
120 .navbar-header {
121 position: absolute;
122 top: 5px;
123 }
124
125 .navbar-brand { display: none; }
126
127 #block-ryf-main-menu .navbar-nav { margin-left: 195px; }
128
129 .navbar-default .navbar-nav > li > a:focus {
130 outline: none;
131 }
132
133 .navbar-default .navbar-nav > li > a,
134 .navbar-default .navbar-nav > li > a:link,
135 .navbar-default .navbar-nav > li > a:visited {
136 color: #FFF;
137 background: #000;
138 border-bottom: 2px solid transparent;
139 padding-bottom: 10px;
140 margin-bottom: 5px;
141 }
142
143 .navbar-default .navbar-nav > li > a:focus,
144 .navbar-default .navbar-nav > li.active > a:hover,
145 .navbar-default .navbar-nav > li > a:hover {
146 color: #DDCC00;
147 background: #000;
148 border-bottom: 2px solid #DDCC00;
149 padding-bottom: 5px;
150 margin-bottom: 10px;
151 }
152
153 .navbar-default .navbar-nav > li > a.is-active {
154 border-bottom: 2px solid #FFF;
155 background: #000;
156 padding-bottom: 5px;
157 margin-bottom: 10px;
158 }
159
160 .page-header {
161 border-bottom: 2px solid #000;
162 font-size: 2em;
163 }
164
165 .region-header .search-block-form {
166 width: 300px;
167 float: right;
168 }
169
170 nav .search-block-form {
171 position: absolute;
172 width: 300px;
173 right: 10%;
174 top: 30px;
175 }
176
177 /*
178 * @media screen and (min-width: 520px) and (max-width: 599px) {
179 * .logo img { margin-left: 50px; }
180 * #block-ryf-main-menu .navbar-nav { margin-left: 230px; }
181 * }
182 *
183 * @media screen and (min-width: 600px) and (max-width: 767px) {
184 * .logo img { margin-left: 100px; }
185 * #block-ryf-main-menu .navbar-nav { margin-left: 280px; }
186 * }
187 *
188 * @media screen and (max-width: 767px) {
189 * .logo img { height: 150px; margin-top: 25px; }
190 * .navbar-default { min-height: 230px; margin-bottom: 30px; }
191 * #block-ryf-main-menu .navbar-nav { max-width: 130px; }
192 * }
193 *
194 */
195
196 @media screen and (min-width: 768px) {
197
198 .navbar-default {
199 margin-bottom: 100px;
200 }
201 .navbar-nav {
202 margin-top: 40px;
203 }
204 .region-header .breadcrumb {
205 position: absolute;
206 top: -70px;
207 left: 200px;
208 background: none;
209 }
210 .region-navigation-collapsible .search-block-form {
211 float: right;
212 padding-top: 30px;
213 width: 210px;
214 }
215 }
216
217
218 /* Selectors */
219
220
221 @media screen and (min-width: 768px) {
222 .form-inline .form-item .select-wrapper {
223 display: block;
224 }
225 .form-inline .form-actions {
226 margin-top: 21px;
227 }
228 }
229
230
231 /* RYF List */
232
233
234 .ryf-list-row {
235 padding: 0;
236 margin: 0 auto;
237 overflow: auto;
238 }
239
240 .ryf-list {
241 float: left;
242 margin: 0;
243 padding: 0.5em;
244 position: relative;
245 list-style: none;
246 }
247
248 .ryf-list article {
249 border: 1px solid #ececec;
250 border-radius: 5px;
251 border-top: none;
252 border-left: none;
253 padding: 1em;
254 box-shadow: 2px 2px 5px #ddd;
255 transition: 0.3s;
256 }
257
258 .ryf-list article:hover {
259 box-shadow: 0px 0px 5px #aaa;
260 }
261
262 .ryf-list article:before {
263 content: '';
264 float: left;
265 padding-top: 100%;
266 }
267
268 .ryf-list .field--type-image {
269 width: 150px;
270 height: 150px;
271 background: #fff;
272 border-radius: 10px;
273 display: flex;
274 align-items: center;
275 }
276
277 .ryf-list .field--name-field-image {
278 margin: 0 auto 10px auto;
279 }
280
281 .ryf-list img {
282 max-width: 150px;
283 max-height: 150px;
284 object-fit: contain;
285 overflow: hidden;
286 }
287
288 .ryf-list img:hover {
289 border-radius: 0;
290 }
291
292 .ryf-list h2 {
293 text-align: left;
294 font-size: 1.5em;
295 font-weight: 500;
296 line-height: 1.2em;
297 margin: 0;
298 padding: 0;
299 padding-bottom: 1em;
300 height: 100px;
301 overflow: hidden;
302 }
303
304 .ryf-list a {
305 color: #337AB7;
306 text-decoration: none;
307 }
308
309 .ryf-list a:hover {
310 color: #000;
311 }
312
313 .ryf-list .node-readmore,
314 .ryf-list .tags,
315 .ryf-list .supplier {
316 width: 100%;
317 float: left;
318 font-size: 0.9em;
319 border-top: 1px solid #ccc4c4;
320 margin-top: 5px;
321 padding-top: 5px;
322 color: #afadad;
323 }
324
325 .ryf-list .node-readmore {
326 text-align: right;
327 }
328
329 @media screen and (min-width: 450px) and (max-width: 659px) {
330 .ryf-list-row {
331 max-width: 600px;
332 }
333 .ryf-list {
334 max-width: 300px;
335 float: none;
336 margin: 0 auto;
337 }
338 }
339 @media screen and (min-width: 660px) and (max-width: 767px) {
340 .ryf-list-row {
341 max-width: 600px;
342 }
343 .ryf-list-row {
344 margin: 0 auto;
345 max-width: 660px;
346 }
347 .ryf-list {
348 max-width: 300px;
349 float: left;
350 }
351 .auto-clear .col-xs-12:nth-child(odd){clear:left;}
352 }
353
354
355 /* Vendors list */
356
357
358 .vendors-list-row {
359 padding: 10px;
360 margin: 0 auto;
361 overflow: auto;
362 }
363
364 @media screen and (max-width: 767px) {
365 .vendors-list-row {
366 margin: 0px auto;
367 }
368
369 .vendors-list {
370 margin-bottom: 40px;
371 list-style: none;
372
373 overflow: auto;
374 }
375
376 .vendors-list .views-field-field-icon {
377 width: 220px;
378
379 margin: 0px auto 20px auto;
380 }
381
382 .vendors-list .views-field-field-icon img {
383 margin: 0 auto;
384 }
385
386 .vendors-list .views-field-name,
387 .vendors-list .views-field-description__value {
388 max-width: 300px;
389 margin: 0 auto 10px auto;
390 }
391
392 .vendors-list .views-field-name {
393 font-weight: bold;
394 font-size: 18px;
395 text-align: center;
396 }
397
398 }
399
400 @media screen and (min-width: 768px) {
401 .vendors-list-row {
402 width: 600px;
403 margin: 0px auto;
404 }
405
406 .vendors-list {
407 list-style: none;
408 clear: left;
409
410 overflow: auto;
411 }
412
413 .vendors-list .views-field-field-icon {
414 width: 220px;
415 height: 220px;
416
417 margin-bottom: 40px;
418
419 float: left;
420 }
421
422 .vendors-list .views-field-field-icon img {
423 margin: 0 auto;
424 }
425
426 .vendors-list .views-field-name,
427 .vendors-list .views-field-description__value {
428 margin-left: 300px;
429 }
430
431 .vendors-list .views-field-name {
432 margin-bottom: 10px;
433 font-weight: bold;
434 font-size: 18px;
435 }
436 }
437
438
439 /* Sidebars */
440
441
442 @media screen and (max-width: 767px) {
443 .path-products #block-views-block-categories-categories-block { display: none; }
444 }
445
446
447 /* Vendor and Category taxonomy term pages */
448
449
450 .view-taxonomy-term .view-header .field--name-field-icon img {
451 margin: 0 auto;
452 }
453
454 .view-filters {
455 clear: left;
456 }
457
458 .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
459 .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
460 margin-top: 15px;
461 }
462
463 @media screen and (max-width: 559px) {
464 .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
465 margin: 0 auto 40px auto;
466
467 overflow: auto;
468 }
469
470 .view-taxonomy-term .view-header .field--name-field-icon {
471 margin: 0 auto 20px auto;
472 width: 220px;
473 }
474
475 .view-taxonomy-term .view-header .field--name-description,
476 .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
477 .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
478 max-width: 360px;
479 margin: 15px auto 0 auto;
480 padding: 0 10px;
481 }
482
483 }
484
485 @media screen and (min-width: 560px) {
486 .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
487 margin: 0 0 40px 0;
488
489 overflow: auto;
490 }
491
492 .view-taxonomy-term .view-header .field--name-field-icon {
493 width: 220px;
494
495 float: left;
496 }
497
498 .view-taxonomy-term .view-header .field--name-description,
499 .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
500 .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
501 margin-left: 260px;
502 }
503
504 }
505
506 @media screen and (min-width: 768px) {
507 .view-taxonomy-term .view-header {
508 max-width: 700px;
509 }
510 }
511
512
513 /* Product */
514
515
516 @media screen and (max-width: 767px) {
517 .page-node-type-product .product {
518 max-width: 382px;
519 margin: 0 auto;
520 }
521 }
522
523 @media screen and (min-width: 768px) and (max-width: 991px) {
524 .page-node-type-product .product {
525 width: 700px;
526 margin: 0 auto;
527 }
528 }
529
530 @media screen and (min-width: 992px) {
531 .page-node-type-product .product {
532 width: 800px;
533 margin: 0 auto;
534 }
535 }
536
537 .page-node-type-product .product .field--name-field-image {
538 padding: 10px;
539
540 border: 1px solid #888;
541 border-radius: 10px;
542 }
543
544 .page-node-type-product .product .field--name-field-image img {
545 margin: 0 auto;
546 }
547
548 .page-node-type-product .product .field--name-field-extra-images {
549 padding: 5px;
550
551 display: flex;
552 align-items: center;
553
554 border: 1px solid #888;
555 border-radius: 10px;
556 }
557
558 .page-node-type-product .product .field--name-field-extra-images .field--item {
559 display: inline-block;
560 margin: auto;
561 padding: 5px;
562 }
563
564 .page-node-type-product .product .field--name-field-categories,
565 .page-node-type-product .product .field--name-field-vendor {
566 margin: 10px 10px 20px 0px;
567 padding: 10px;
568 border: 1px solid #888;
569 border-radius: 10px;
570 }
571
572 .page-node-type-product .product .field--name-field-categories .field--item {
573 display: list-item;
574 list-style: circle;
575 margin-left: 15px;
576 }
577
578 #block-views-block-categories-categories-block ul {
579 margin: 0; padding: 0 10px;
580 list-style: none;
581 }
582
583 #block-views-block-categories-categories-block li {
584 padding: 5px 10px;
585 border: 1px solid #DDD;
586 border-radius: 5px;
587 list-style: none;
588 margin: 5px 0;
589 }
590
591 #block-views-block-categories-categories-block li:hover {
592 background: #EEE;
593 color: #000;
594 }
595
596 #block-views-block-categories-categories-block a {
597 width: 100%;
598 display: block;
599 }
600
601 /* product page colors */
602 .page-node-type-product .product .field--name-field-image {
603 background-color: #fff;
604 border-color: #aaa;
605 }
606 .page-node-type-product .product .field--name-field-extra-images {
607 background-color: #f3f3f3;
608 border-color: #aaa;
609 }
610 .page-node-type-product .product .field--name-field-categories {
611 background-color: #def;
612 border-color: #8ad;
613 }
614 .page-node-type-product .product .field--name-field-vendor {
615 background-color: #dfe;
616 border-color: #8da;
617 }
618
619 @media screen and (max-width: 767px) {
620 .page-node-type-product .product .field--name-field-extra-images {
621 margin: 10px auto 0px auto;
622 }
623
624 .page-node-type-product .product .field--name-body,
625 .page-node-type-product .product .field--name-field-vendor-product-link,
626 .page-node-type-product .product .field--name-field-certification-details,
627 .page-node-type-product .product .field--name-field-certification-date,
628 .page-node-type-product .product .field--name-field-source-code-links {
629 margin-bottom: 20px;
630 }
631
632 .page-node-type-product .product .field--name-field-categories,
633 .page-node-type-product .product .field--name-field-vendor {
634 margin-bottom: 0px;
635 float: left;
636 }
637
638 .page-node-type-product .product .field--name-body {
639 padding-top: 20px;
640 clear: both;
641 }
642 }
643
644
645 @media screen and (min-width: 768px) {
646 .page-node-type-product .product .field--name-field-image {
647 width: 382px;
648 float: left;
649 }
650
651 .page-node-type-product .product .field--name-field-extra-images {
652 float: left;
653 clear: left;
654
655 width: 382px;
656 margin-top: 10px;
657 }
658
659 .page-node-type-product .product .field--name-body,
660 .page-node-type-product .product .field--name-field-vendor-product-link,
661 .page-node-type-product .product .field--name-field-certification-details,
662 .page-node-type-product .product .field--name-field-certification-date,
663 .page-node-type-product .product .field--name-field-source-code-links {
664 margin-left: 400px;
665 margin-bottom: 20px;
666 }
667
668 .page-node-type-product .product .field--name-field-categories {
669 float: left;
670 clear: left;
671 }
672
673 .page-node-type-product .product .field--name-field-vendor {
674 float: left;
675 }
676
677 }
678
679
680 /* News and Product Announcements */
681
682
683 .page-node-type-product-announcement .page-header,
684 .page-node-type-product-announcement .tabs--primary,
685 .page-node-type-product-announcement .region-content,
686 .page-node-type-general-news-item .page-header,
687 .page-node-type-general-news-item .tabs--primary,
688 .page-node-type-general-news-item .region-content,
689 .page-node-type-page .page-header,
690 .page-node-type-page .tabs--primary,
691 .page-node-type-page .region-content,
692 .path-news .page-header,
693 .path-news .tabs--primary,
694 .path-news .region-content {
695 max-width: 800px;
696 margin: 0 auto;
697 }
698
699 /* don't apply above max-width rule to main page */
700 .path-frontpage .page-header,
701 .path-frontpage .tabs--primary,
702 .path-frontpage .region-content {
703 max-width: 2000px; /* high number beyond the max */
704 }
705
706 .page-node-type-page .page-header {
707 margin-bottom: 20px;
708 }
709
710 .path-news h2,
711 .block-views-blocknews-news-block article h2 {
712 font-size: 25px;
713 }
714
715 .page-node-type-product-announcement .author,
716 .page-node-type-general-news-item .author {
717 margin: 10px 0 20px 0;
718 font-style: oblique;
719 }
720
721 .page-node-type-product-announcement .field--name-body,
722 .page-node-type-general-news-item .field--name-body {
723 margin-bottom: 20px;
724 }
725
726 .page-node-type-product-announcement .field--name-field-external-news-link,
727 .page-node-type-general-news-item .field--name-field-external-news-link {
728 margin-bottom: 20px;
729 }
730
731 .page-node-type-product-announcement .field--name-field-vendor-page,
732 .page-node-type-product-announcement .field--name-field-announced-products {
733 margin-bottom: 20px;
734 }
735
736
737 /* Search Results */
738
739
740 @media screen and (max-width: 600px) {
741 .path-search .region-content > ol {
742 width: 300px;
743 }
744 }
745 @media screen and (min-width: 601px) and (max-width 1000px) {
746 .path-search .region-content > ol {
747 width: 560px;
748 }
749 }
750 @media screen and (min-width: 1001px) {
751 .path-search .region-content > ol {
752 width: 900px;
753 }
754 }
755
756 .path-search .region-content > ol {
757 margin: 0 auto;
758 padding-left: 0;
759 overflow: auto;
760 }
761
762 .path-search .region-content > ol li {
763 width: 280px;
764 height: 280px;
765 margin: 0px auto;
766 padding: 10px;
767
768 float: left;
769
770 list-style: none;
771 overflow: hidden;
772 }
773
774 .path-search .region-content > ol li h3 {
775 text-align: center;
776 }
777
778 .path-search .region-content > ol li .search-image {
779 width: 100px;
780 height: 100px;
781
782 margin: 0 auto;
783
784 display: flex;
785 align-items: center;
786 }
787
788 .path-search .region-content > ol li img {
789 }
790
791
792 /* Footer */
793
794
795 .footer {
796 background: #333;
797 color: #FFF;
798 }
799
800 /* full page width for footer */
801 .footer {
802 width: 100%;
803 }
804
805 .footer a { color: #DDCC00; }
806
807 .footer a:hover { color: #FFF; }
808
809 .footer h4 { font-weight: bold; }
810
811 .footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
812
813 #fsf-logo-footer { margin-bottom: 10px; }
814
815 @media print { #fsf-logo-footer { filter: invert(100%) } }
816