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