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