always place logos above vendor text, use columns
[ryf-theme.git] / css / style.css
... / ...
CommitLineData
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
32body {
33 font-family: "Lato", Helvetica, Arial, sans-serif;
34 margin: 0;
35 min-width: 320px;
36}
37
38a { transition: 0.3s; }
39
40section { 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
54h2.block-title {
55 background: #337AB7;
56 color: #FFF;
57 padding: 0.5em;
58}
59
60
61
62h2.block-title a:visited,
63h2.block-title a:focus,
64h2.block-title a:active,
65h2.block-title a {
66 color: #FFF;
67}
68
69h2.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
183nav .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.vendors-list {
431 margin-bottom: 40px;
432 list-style: none;
433
434 overflow: auto;
435}
436
437.vendors-list .views-field-field-icon {
438 width: 220px;
439 height: 220px;
440
441 display: flex;
442 align-items: center;
443
444 margin: 0px auto 20px auto;
445}
446
447.vendors-list .views-field-field-icon img {
448 margin: 0 auto;
449}
450
451.vendors-list .views-field-name,
452.vendors-list .views-field-field-description-summary,
453.vendors-list .views-field-description__value {
454 max-width: 300px;
455 margin: 0 auto 10px auto;
456}
457
458.vendors-list .views-field-name {
459 font-weight: bold;
460 font-size: 18px;
461 text-align: center;
462}
463
464
465/* Sidebars */
466
467
468@media screen and (max-width: 767px) {
469 .path-products #block-views-block-categories-categories-block { display: none; }
470}
471
472
473/* Vendor and Category taxonomy term pages */
474
475
476.view-taxonomy-term .view-header .field--name-field-icon img {
477 margin: 0 auto;
478}
479
480.view-filters {
481 clear: left;
482}
483
484.view-taxonomy-term .view-header .field--name-field-vendor-support-link,
485.view-taxonomy-term .view-header .field--name-field-vendor-support-email {
486 margin-top: 15px;
487}
488
489@media screen and (max-width: 559px) {
490 .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
491 margin: 0 auto 40px auto;
492 overflow: auto;
493 }
494
495 .view-taxonomy-term .view-header .field--name-field-icon {
496 margin: 0 auto 20px auto;
497 width: 220px;
498 }
499
500 .view-taxonomy-term .view-header .field--name-description,
501 .view-taxonomy-term .view-header .field--name-field-description-summary,
502 .view-taxonomy-term .view-header .field--name-field-vendor-website,
503 .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
504 .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
505 max-width: 360px;
506 margin: 15px auto 0 auto;
507 padding: 0 10px;
508 }
509
510}
511
512@media screen and (min-width: 560px) {
513 .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
514 margin: 0 0 40px 0;
515 overflow: auto;
516 }
517
518 .view-taxonomy-term .view-header .field--name-field-icon {
519 width: 220px;
520 float: left;
521 }
522
523 .view-taxonomy-term .view-header .field--name-description,
524 .view-taxonomy-term .view-header .field--name-field-description-summary,
525 .view-taxonomy-term .view-header .field--name-field-vendor-website,
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-left: 260px;
529 }
530
531}
532
533@media screen and (min-width: 768px) {
534 .view-taxonomy-term .view-header {
535 max-width: 700px;
536 }
537}
538
539
540/* Product */
541
542
543@media screen and (max-width: 767px) {
544 .page-node-type-product .product {
545 max-width: 382px;
546 margin: 0 auto;
547 }
548}
549
550@media screen and (min-width: 768px) and (max-width: 991px) {
551 .page-node-type-product .product {
552 width: 700px;
553 margin: 0 auto;
554 }
555}
556
557@media screen and (min-width: 992px) {
558 .page-node-type-product .product {
559 width: 800px;
560 margin: 0 auto;
561 }
562}
563
564.page-node-type-product .product .field--name-field-image {
565 padding: 10px;
566
567 border: 1px solid #888;
568 border-radius: 10px;
569}
570
571.page-node-type-product .product .field--name-field-image img {
572 margin: 0 auto;
573}
574
575.page-node-type-product .product .field--name-field-extra-images {
576 padding: 0 11px;
577 display: flex;
578 align-items: center;
579}
580
581.page-node-type-product .product .field--name-field-extra-images .field--item {
582 display: inline-block;
583 margin-right: 15px;
584 padding: 5px;
585}
586.page-node-type-product .product .field--name-field-extra-images .field--item:last-child {
587 margin-right: 0;
588}
589
590.page-node-type-product .product .field--name-field-categories,
591.page-node-type-product .product .field--name-field-vendor {
592 margin: 10px 10px 20px 0px;
593 padding: 10px;
594}
595
596.page-node-type-product .product .field--name-field-categories .field--item {
597 display: list-item;
598 list-style: circle;
599 margin-left: 15px;
600}
601
602/* Mostly from Bootstrap 3 button CSS */
603.page-node-type-product .product .field--name-field-vendor-product-link a {
604 color: #fff;
605 background-color: #337ab7;
606 border-color: #2e6da4;
607 display: inline-block;
608 margin-bottom: 0;
609 font-weight: normal;
610 text-align: center;
611 white-space: nowrap;
612 vertical-align: middle;
613 -ms-touch-action: manipulation;
614 touch-action: manipulation;
615 cursor: pointer;
616 background-image: none;
617 border: 1px solid transparent;
618 padding: 6px 12px;
619 font-size: 14px;
620 line-height: 1.42857143;
621 border-radius: 4px;
622 -webkit-user-select: none;
623 -moz-user-select: none;
624 -ms-user-select: none;
625 user-select: none;
626 text-decoration: none;
627}
628
629#block-views-block-categories-categories-block ul {
630 margin: 0; padding: 0 10px;
631 list-style: none;
632}
633
634#block-views-block-categories-categories-block li {
635 padding: 5px 10px;
636 border: 1px solid #DDD;
637 border-radius: 5px;
638 list-style: none;
639 margin: 5px 0;
640}
641
642#block-views-block-categories-categories-block li:hover {
643 background: #EEE;
644 color: #000;
645}
646
647#block-views-block-categories-categories-block a {
648 width: 100%;
649 display: block;
650}
651
652/* product page colors */
653.page-node-type-product .product .field--name-field-image {
654 background-color: #fff;
655 border-color: #aaa;
656}
657
658@media screen and (max-width: 767px) {
659 .page-node-type-product .product .field--name-field-extra-images {
660 margin: 10px auto 0px auto;
661 }
662
663 .page-node-type-product .product .field--name-body,
664 .page-node-type-product .product .field--name-field-vendor-product-link,
665 .page-node-type-product .product .field--name-field-certification-details,
666 .page-node-type-product .product .field--name-field-certification-date,
667 .page-node-type-product .product .field--name-field-source-code-links {
668 margin-bottom: 20px;
669 }
670
671 .page-node-type-product .product .field--name-field-categories,
672 .page-node-type-product .product .field--name-field-vendor {
673 margin-bottom: 0px;
674 float: left;
675 }
676
677 .page-node-type-product .product .field--name-body {
678 padding-top: 20px;
679 clear: both;
680 }
681}
682
683
684@media screen and (min-width: 768px) {
685 .page-node-type-product .product .field--name-field-image {
686 width: 382px;
687 float: left;
688 }
689
690 .page-node-type-product .product .field--name-field-extra-images {
691 float: left;
692 clear: left;
693 width: 382px;
694 margin-top: 10px;
695 }
696
697 .page-node-type-product .product .field--name-body,
698 .page-node-type-product .product .field--name-field-vendor-product-link,
699 .page-node-type-product .product .field--name-field-certification-details,
700 .page-node-type-product .product .field--name-field-certification-date,
701 .page-node-type-product .product .field--name-field-source-code-links {
702 margin-left: 400px;
703 margin-bottom: 20px;
704 }
705
706 .page-node-type-product .product .field--name-field-categories {
707 float: left;
708 clear: left;
709 }
710
711 .page-node-type-product .product .field--name-field-vendor {
712 float: left;
713 }
714
715}
716
717
718/* News and Product Announcements */
719
720
721.page-node-type-product-announcement .page-header,
722.page-node-type-product-announcement .tabs--primary,
723.page-node-type-product-announcement .region-content,
724.page-node-type-general-news-item .page-header,
725.page-node-type-general-news-item .tabs--primary,
726.page-node-type-general-news-item .region-content,
727.page-node-type-page .page-header,
728.page-node-type-page .tabs--primary,
729.page-node-type-page .region-content,
730.path-news .page-header,
731.path-news .tabs--primary,
732.path-news .region-content {
733 max-width: 800px;
734 margin: 0 auto;
735}
736
737/* don't apply above max-width rule to main page */
738.path-frontpage .page-header,
739.path-frontpage .tabs--primary,
740.path-frontpage .region-content {
741 max-width: 2000px; /* high number beyond the max */
742}
743
744.page-node-type-page .page-header {
745 margin-bottom: 20px;
746}
747
748.path-news h2,
749.block-views-blocknews-news-block article h2 {
750 font-size: 25px;
751}
752
753.page-node-type-product-announcement .author,
754.page-node-type-general-news-item .author {
755 margin: 10px 0 20px 0;
756 font-style: oblique;
757}
758
759.page-node-type-product-announcement .field--name-body,
760.page-node-type-general-news-item .field--name-body {
761 margin-bottom: 20px;
762}
763
764.page-node-type-product-announcement .field--name-field-external-news-link,
765.page-node-type-general-news-item .field--name-field-external-news-link {
766 margin-bottom: 20px;
767}
768
769.page-node-type-product-announcement .field--name-field-vendor-page,
770.page-node-type-product-announcement .field--name-field-announced-products {
771 margin-bottom: 20px;
772}
773
774
775/* Search Results */
776
777
778@media screen and (max-width: 600px) {
779 .path-search .region-content > ol {
780 width: 300px;
781 }
782}
783@media screen and (min-width: 601px) and (max-width 1000px) {
784 .path-search .region-content > ol {
785 width: 560px;
786 }
787}
788@media screen and (min-width: 1001px) {
789 .path-search .region-content > ol {
790 width: 900px;
791 }
792}
793
794.path-search .region-content > ol {
795 margin: 0 auto;
796 padding-left: 0;
797 overflow: auto;
798}
799
800.path-search .region-content > ol li {
801 width: 280px;
802 height: 320px;
803 margin: 0px auto;
804 padding: 10px;
805
806 float: left;
807
808 list-style: none;
809 overflow: hidden;
810}
811
812.path-search .region-content > ol li h3 {
813 text-align: center;
814}
815
816.path-search .region-content > ol li .search-image {
817 width: 220px;
818 height: 220px;
819
820 margin: 0 auto;
821
822 display: flex;
823 align-items: center;
824}
825
826.path-search .region-content > ol li p {
827 display: block;
828 width: 220px;
829 margin: 0 auto;
830}
831
832.path-search .region-content > ol li img {
833}
834
835
836/* Footer */
837
838.footer {
839 background: #333;
840 color: #FFF;
841}
842
843#email-signup .email-input {
844 color: #000;
845 display: block;
846 margin-bottom: 10px;
847}
848#email-signup .action-button {
849 color: #000;
850 display: block;
851}
852
853/* full page width for footer */
854
855.footer {
856 width: 100%;
857}
858
859.footer a { color: #edd400; }
860
861.footer a:hover { color: #FFF; }
862
863.footer h4 { font-weight: bold; }
864
865.footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
866
867#fsf-logo-footer { margin-bottom: 10px; }
868
869@media print { #fsf-logo-footer { filter: invert(100%) } }
870