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