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