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