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