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