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