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