981214d7619c6c3695c8ff11a3950618ac439e40
[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 .main-container { min-height: 50vh; }
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 /* News */
231
232 .view-news article {
233 padding: 0.5em;
234 margin: 0 10%;
235 }
236
237 .view-news p {
238 line-height: 1.5em;
239 font-size: 1.1em;
240 }
241
242 .view-news .node-readmore {
243 padding: 0.5em 1em;
244 border: 1px solid #DDD;
245 border-radius: 0.5em;
246 float: right;
247 }
248
249 .view-news .node-readmore:hover {
250 background: #EEE;
251 color: #000;
252 }
253
254 .view-news footer {
255 color: #999;
256 padding: 0.5em;
257 text-align: right;
258 }
259
260
261 /* RYF List */
262
263
264 .ryf-list-row {
265 padding: 0;
266 margin: 0 auto;
267 overflow: auto;
268 }
269
270 .ryf-list {
271 float: left;
272 margin: 0;
273 padding: 0.5em;
274 position: relative;
275 list-style: none;
276 }
277
278 .ryf-list article {
279 border: 1px solid #ececec;
280 border-radius: 5px;
281 border-top: none;
282 border-left: none;
283 padding: 1em;
284 box-shadow: 2px 2px 5px #ddd;
285 transition: 0.3s;
286 }
287
288 .ryf-list article:hover {
289 box-shadow: 0px 0px 5px #aaa;
290 }
291
292 .ryf-list article:before {
293 content: '';
294 float: left;
295 padding-top: 100%;
296 }
297
298 .ryf-list .field--type-image {
299 width: 150px;
300 height: 150px;
301 background: #fff;
302 border-radius: 10px;
303 display: flex;
304 align-items: center;
305 }
306
307 .ryf-list .field--name-field-image {
308 margin: 0 auto 10px auto;
309 }
310
311 .ryf-list img {
312 max-width: 150px;
313 max-height: 150px;
314 object-fit: contain;
315 overflow: hidden;
316 }
317
318 .ryf-list img:hover {
319 border-radius: 0;
320 }
321
322 .ryf-list h2 {
323 text-align: left;
324 font-size: 1.5em;
325 font-weight: 500;
326 line-height: 1.2em;
327 margin: 0;
328 padding: 0;
329 padding-bottom: 1em;
330 height: 100px;
331 overflow: hidden;
332 }
333
334 .ryf-list a {
335 color: #337AB7;
336 text-decoration: none;
337 }
338
339 .ryf-list a:hover {
340 color: #000;
341 }
342
343 .ryf-list .node-readmore,
344 .ryf-list .tags,
345 .ryf-list .supplier {
346 width: 100%;
347 float: left;
348 font-size: 0.9em;
349 border-top: 1px solid #ccc4c4;
350 margin-top: 5px;
351 padding-top: 5px;
352 color: #afadad;
353 }
354
355 .ryf-list .node-readmore {
356 text-align: right;
357 }
358
359 @media screen and (min-width: 450px) and (max-width: 659px) {
360 .ryf-list-row {
361 max-width: 600px;
362 }
363 .ryf-list {
364 max-width: 300px;
365 float: none;
366 margin: 0 auto;
367 }
368 }
369 @media screen and (min-width: 660px) and (max-width: 767px) {
370 .ryf-list-row {
371 max-width: 600px;
372 }
373 .ryf-list-row {
374 margin: 0 auto;
375 max-width: 660px;
376 }
377 .ryf-list {
378 max-width: 300px;
379 float: left;
380 }
381 .auto-clear .col-xs-12:nth-child(odd){clear:left;}
382 }
383
384
385 /* Vendors list */
386
387
388 .vendors-list-row {
389 padding: 10px;
390 margin: 0 auto;
391 overflow: auto;
392 }
393
394 @media screen and (max-width: 767px) {
395 .vendors-list-row {
396 margin: 0px auto;
397 }
398
399 .vendors-list {
400 margin-bottom: 40px;
401 list-style: none;
402
403 overflow: auto;
404 }
405
406 .vendors-list .views-field-field-icon {
407 width: 220px;
408
409 margin: 0px auto 20px auto;
410 }
411
412 .vendors-list .views-field-field-icon img {
413 margin: 0 auto;
414 }
415
416 .vendors-list .views-field-name,
417 .vendors-list .views-field-description__value {
418 max-width: 300px;
419 margin: 0 auto 10px auto;
420 }
421
422 .vendors-list .views-field-name {
423 font-weight: bold;
424 font-size: 18px;
425 text-align: center;
426 }
427
428 }
429
430 @media screen and (min-width: 768px) {
431 .vendors-list-row {
432 width: 600px;
433 margin: 0px auto;
434 }
435
436 .vendors-list {
437 list-style: none;
438 clear: left;
439
440 overflow: auto;
441 }
442
443 .vendors-list .views-field-field-icon {
444 width: 220px;
445 height: 220px;
446
447 margin-bottom: 40px;
448
449 float: left;
450 }
451
452 .vendors-list .views-field-field-icon img {
453 margin: 0 auto;
454 }
455
456 .vendors-list .views-field-name,
457 .vendors-list .views-field-description__value {
458 margin-left: 300px;
459 }
460
461 .vendors-list .views-field-name {
462 margin-bottom: 10px;
463 font-weight: bold;
464 font-size: 18px;
465 }
466 }
467
468
469 /* Sidebars */
470
471
472 @media screen and (max-width: 767px) {
473 .path-products #block-views-block-categories-categories-block { display: none; }
474 }
475
476
477 /* Vendor and Category taxonomy term pages */
478
479
480 .view-taxonomy-term .view-header .field--name-field-icon img {
481 margin: 0 auto;
482 }
483
484 .view-filters {
485 clear: left;
486 }
487
488 .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
489 .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
490 margin-top: 15px;
491 }
492
493 @media screen and (max-width: 559px) {
494 .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
495 margin: 0 auto 40px auto;
496
497 overflow: auto;
498 }
499
500 .view-taxonomy-term .view-header .field--name-field-icon {
501 margin: 0 auto 20px auto;
502 width: 220px;
503 }
504
505 .view-taxonomy-term .view-header .field--name-description,
506 .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
507 .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
508 max-width: 360px;
509 margin: 15px auto 0 auto;
510 padding: 0 10px;
511 }
512
513 }
514
515 @media screen and (min-width: 560px) {
516 .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
517 margin: 0 0 40px 0;
518
519 overflow: auto;
520 }
521
522 .view-taxonomy-term .view-header .field--name-field-icon {
523 width: 220px;
524
525 float: left;
526 }
527
528 .view-taxonomy-term .view-header .field--name-description,
529 .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
530 .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
531 margin-left: 260px;
532 }
533
534 }
535
536 @media screen and (min-width: 768px) {
537 .view-taxonomy-term .view-header {
538 max-width: 700px;
539 }
540 }
541
542
543 /* Product */
544
545
546 @media screen and (max-width: 767px) {
547 .page-node-type-product .product {
548 max-width: 382px;
549 margin: 0 auto;
550 }
551 }
552
553 @media screen and (min-width: 768px) and (max-width: 991px) {
554 .page-node-type-product .product {
555 width: 700px;
556 margin: 0 auto;
557 }
558 }
559
560 @media screen and (min-width: 992px) {
561 .page-node-type-product .product {
562 width: 800px;
563 margin: 0 auto;
564 }
565 }
566
567 .page-node-type-product .product .field--name-field-image {
568 padding: 10px;
569
570 border: 1px solid #888;
571 border-radius: 10px;
572 }
573
574 .page-node-type-product .product .field--name-field-image img {
575 margin: 0 auto;
576 }
577
578 .page-node-type-product .product .field--name-field-extra-images {
579 padding: 5px;
580
581 display: flex;
582 align-items: center;
583
584 border: 1px solid #888;
585 border-radius: 10px;
586 }
587
588 .page-node-type-product .product .field--name-field-extra-images .field--item {
589 display: inline-block;
590 margin: auto;
591 padding: 5px;
592 }
593
594 .page-node-type-product .product .field--name-field-categories,
595 .page-node-type-product .product .field--name-field-vendor {
596 margin: 10px 10px 20px 0px;
597 padding: 10px;
598 border: 1px solid #888;
599 border-radius: 10px;
600 }
601
602 .page-node-type-product .product .field--name-field-categories .field--item {
603 display: list-item;
604 list-style: circle;
605 margin-left: 15px;
606 }
607
608 #block-views-block-categories-categories-block ul {
609 margin: 0; padding: 0 10px;
610 list-style: none;
611 }
612
613 #block-views-block-categories-categories-block li {
614 padding: 5px 10px;
615 border: 1px solid #DDD;
616 border-radius: 5px;
617 list-style: none;
618 margin: 5px 0;
619 }
620
621 #block-views-block-categories-categories-block li:hover {
622 background: #EEE;
623 color: #000;
624 }
625
626 #block-views-block-categories-categories-block a {
627 width: 100%;
628 display: block;
629 }
630
631 /* product page colors */
632 .page-node-type-product .product .field--name-field-image {
633 background-color: #fff;
634 border-color: #aaa;
635 }
636 .page-node-type-product .product .field--name-field-extra-images {
637 background-color: #f3f3f3;
638 border-color: #aaa;
639 }
640 .page-node-type-product .product .field--name-field-categories {
641 background-color: #def;
642 border-color: #8ad;
643 }
644 .page-node-type-product .product .field--name-field-vendor {
645 background-color: #dfe;
646 border-color: #8da;
647 }
648
649 @media screen and (max-width: 767px) {
650 .page-node-type-product .product .field--name-field-extra-images {
651 margin: 10px auto 0px auto;
652 }
653
654 .page-node-type-product .product .field--name-body,
655 .page-node-type-product .product .field--name-field-vendor-product-link,
656 .page-node-type-product .product .field--name-field-certification-details,
657 .page-node-type-product .product .field--name-field-certification-date,
658 .page-node-type-product .product .field--name-field-source-code-links {
659 margin-bottom: 20px;
660 }
661
662 .page-node-type-product .product .field--name-field-categories,
663 .page-node-type-product .product .field--name-field-vendor {
664 margin-bottom: 0px;
665 float: left;
666 }
667
668 .page-node-type-product .product .field--name-body {
669 padding-top: 20px;
670 clear: both;
671 }
672 }
673
674
675 @media screen and (min-width: 768px) {
676 .page-node-type-product .product .field--name-field-image {
677 width: 382px;
678 float: left;
679 }
680
681 .page-node-type-product .product .field--name-field-extra-images {
682 float: left;
683 clear: left;
684
685 width: 382px;
686 margin-top: 10px;
687 }
688
689 .page-node-type-product .product .field--name-body,
690 .page-node-type-product .product .field--name-field-vendor-product-link,
691 .page-node-type-product .product .field--name-field-certification-details,
692 .page-node-type-product .product .field--name-field-certification-date,
693 .page-node-type-product .product .field--name-field-source-code-links {
694 margin-left: 400px;
695 margin-bottom: 20px;
696 }
697
698 .page-node-type-product .product .field--name-field-categories {
699 float: left;
700 clear: left;
701 }
702
703 .page-node-type-product .product .field--name-field-vendor {
704 float: left;
705 }
706
707 }
708
709
710 /* News and Product Announcements */
711
712
713 .page-node-type-product-announcement .page-header,
714 .page-node-type-product-announcement .tabs--primary,
715 .page-node-type-product-announcement .region-content,
716 .page-node-type-general-news-item .page-header,
717 .page-node-type-general-news-item .tabs--primary,
718 .page-node-type-general-news-item .region-content,
719 .page-node-type-page .page-header,
720 .page-node-type-page .tabs--primary,
721 .page-node-type-page .region-content,
722 .path-news .page-header,
723 .path-news .tabs--primary,
724 .path-news .region-content {
725 max-width: 800px;
726 margin: 0 auto;
727 }
728
729 /* don't apply above max-width rule to main page */
730 .path-frontpage .page-header,
731 .path-frontpage .tabs--primary,
732 .path-frontpage .region-content {
733 max-width: 2000px; /* high number beyond the max */
734 }
735
736 .page-node-type-page .page-header {
737 margin-bottom: 20px;
738 }
739
740 .path-news h2,
741 .block-views-blocknews-news-block article h2 {
742 font-size: 25px;
743 }
744
745 .page-node-type-product-announcement .author,
746 .page-node-type-general-news-item .author {
747 margin: 10px 0 20px 0;
748 font-style: oblique;
749 }
750
751 .page-node-type-product-announcement .field--name-body,
752 .page-node-type-general-news-item .field--name-body {
753 margin-bottom: 20px;
754 }
755
756 .page-node-type-product-announcement .field--name-field-external-news-link,
757 .page-node-type-general-news-item .field--name-field-external-news-link {
758 margin-bottom: 20px;
759 }
760
761 .page-node-type-product-announcement .field--name-field-vendor-page,
762 .page-node-type-product-announcement .field--name-field-announced-products {
763 margin-bottom: 20px;
764 }
765
766
767 /* Search Results */
768
769
770 @media screen and (max-width: 600px) {
771 .path-search .region-content > ol {
772 width: 300px;
773 }
774 }
775 @media screen and (min-width: 601px) and (max-width 1000px) {
776 .path-search .region-content > ol {
777 width: 560px;
778 }
779 }
780 @media screen and (min-width: 1001px) {
781 .path-search .region-content > ol {
782 width: 900px;
783 }
784 }
785
786 .path-search .region-content > ol {
787 margin: 0 auto;
788 padding-left: 0;
789 overflow: auto;
790 }
791
792 .path-search .region-content > ol li {
793 width: 280px;
794 height: 280px;
795 margin: 0px auto;
796 padding: 10px;
797
798 float: left;
799
800 list-style: none;
801 overflow: hidden;
802 }
803
804 .path-search .region-content > ol li h3 {
805 text-align: center;
806 }
807
808 .path-search .region-content > ol li .search-image {
809 width: 100px;
810 height: 100px;
811
812 margin: 0 auto;
813
814 display: flex;
815 align-items: center;
816 }
817
818 .path-search .region-content > ol li img {
819 }
820
821
822 /* Footer */
823
824 .footer {
825 background: #333;
826 color: #FFF;
827 }
828
829 /* full page width for footer */
830 .footer {
831 width: 100%;
832 }
833
834 .footer a { color: #DDCC00; }
835
836 .footer a:hover { color: #FFF; }
837
838 .footer h4 { font-weight: bold; }
839
840 .footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
841
842 #fsf-logo-footer { margin-bottom: 10px; }
843
844 @media print { #fsf-logo-footer { filter: invert(100%) } }
845