c1170a0f4cb7988618e94e43e83d8e850d43a25a
[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 @media screen and (min-width: 520px) and (max-width: 599px) {
71 .logo img { margin-left: 50px; }
72 #block-ryf-main-menu .navbar-nav { margin-left: 230px; }
73 }
74
75 @media screen and (min-width: 600px) and (max-width: 767px) {
76 .logo img { margin-left: 100px; }
77 #block-ryf-main-menu .navbar-nav { margin-left: 280px; }
78 }
79
80 @media screen and (max-width: 767px) {
81 .logo img { height: 150px; margin-top: 25px; }
82 .navbar-default { min-height: 230px; margin-bottom: 30px; }
83 #block-ryf-main-menu .navbar-nav { max-width: 130px; }
84 }
85
86 @media screen and (min-width: 768px) {
87 .navbar-nav { margin-top: 40px; }
88 }
89
90
91 /* Selectors */
92
93
94 @media screen and (min-width: 768px) {
95 .form-inline .form-item .select-wrapper {
96 display: block;
97 }
98 .form-inline .form-actions {
99 margin-top: 21px;
100 }
101 }
102
103
104 /* RYF List */
105
106
107 .ryf-list-row ul {
108 padding: 0;
109 margin: 0 auto;
110 overflow: auto;
111 }
112
113 .ryf-list {
114 float: left;
115 margin: 0;
116 padding: 0.5em;
117 position:relative;
118 list-style: none;
119 }
120
121 .ryf-list article {
122 border: 1px solid #ececec;
123 border-radius: 5px;
124 padding: 1em;
125 box-shadow: 2px 2px 5px #ddd;
126 transition: 0.3s;
127 }
128
129 .ryf-list article:hover {
130 box-shadow: 0px 0px 5px #aaa;
131 }
132
133 .ryf-list .field--type-image {
134 width: 150px;
135 height: 150px;
136 background: #fff;
137 border-radius: 10px;
138 display: flex;
139 align-items: center;
140 }
141
142 .ryf-list .field--name-field-image {
143 margin: 0 auto;
144 }
145
146 .ryf-list img {
147 max-width: 150px;
148 overflow: hidden;
149 }
150
151 .ryf-list img:hover {
152 border-radius: 0;
153 }
154
155 .ryf-list h2 {
156 text-align: left;
157 font-size: 1.5em;
158 font-weight: 500;
159 line-height: 1.2em;
160 margin: 0;
161 padding: 0;
162 padding-bottom: 1em;
163 }
164
165 .ryf-list a {
166 color: #118991;
167 text-decoration: none;
168 }
169
170 .ryf-list a:hover {
171 color: #000;
172 }
173
174 .ryf-list .node-readmore,
175 .ryf-list .tags,
176 .ryf-list .supplier {
177 width: 100%;
178 float: left;
179 font-size: 0.9em;
180 border-top: 1px solid #ccc4c4;
181 margin-top: 5px;
182 padding-top: 5px;
183 color: #afadad;
184 }
185
186 .ryf-list .node-readmore {
187 text-align: right;
188 }
189
190 .feed-icons {
191 margin-top: 15px;
192 clear: both;
193 }
194
195 @media screen and (min-width: 450px) and (max-width: 659px) {
196 .ryf-list-row ul {
197 max-width: 600px;
198 }
199 .ryf-list {
200 max-width: 300px;
201 float: none;
202 margin: 0 auto;
203 }
204 }
205 @media screen and (min-width: 660px) and (max-width: 767px) {
206 .ryf-list-row ul {
207 max-width: 600px;
208 }
209 .ryf-list-row {
210 margin: 0 auto;
211 max-width: 660px;
212 }
213 .ryf-list {
214 max-width: 300px;
215 float: left;
216 }
217 }
218
219
220 /* Vendors list */
221
222
223 .vendors-list-row ul {
224 padding: 10px;
225 margin: 0 auto;
226 overflow: auto;
227 }
228
229 @media screen and (max-width: 767px) {
230 .vendors-list-row {
231 margin: 0px auto;
232 }
233
234 .vendors-list {
235 margin-bottom: 40px;
236 list-style: none;
237
238 overflow: auto;
239 }
240
241 .vendors-list .views-field-field-icon {
242 width: 220px;
243
244 margin: 0px auto 20px auto;
245 }
246
247 .vendors-list .views-field-field-icon img {
248 margin: 0 auto;
249 }
250
251 .vendors-list .views-field-name,
252 .vendors-list .views-field-description__value {
253 max-width: 300px;
254 margin: 0 auto 10px auto;
255 }
256
257 .vendors-list .views-field-name {
258 font-weight: bold;
259 font-size: 18px;
260 text-align: center;
261 }
262
263 }
264
265 @media screen and (min-width: 768px) {
266 .vendors-list-row {
267 width: 600px;
268 margin: 0px auto;
269 }
270
271 .vendors-list {
272 list-style: none;
273 clear: left;
274
275 overflow: auto;
276 }
277
278 .vendors-list .views-field-field-icon {
279 width: 220px;
280 height: 220px;
281
282 margin-bottom: 40px;
283
284 float: left;
285 }
286
287 .vendors-list .views-field-field-icon img {
288 margin: 0 auto;
289 }
290
291 .vendors-list .views-field-name,
292 .vendors-list .views-field-description__value {
293 margin-left: 300px;
294 }
295
296 .vendors-list .views-field-name {
297 margin-bottom: 10px;
298 font-weight: bold;
299 font-size: 18px;
300 }
301 }
302
303
304 /* Sidebars */
305
306
307 @media screen and (max-width: 767px) {
308 .path-products #block-views-block-categories-categories-block { display: none; }
309 }
310
311
312 /* Vendor and Category taxonomy term pages */
313
314
315 .view-taxonomy-term .view-header .field--name-field-icon img {
316 margin: 0 auto;
317 }
318
319 .view-filters {
320 clear: left;
321 }
322
323 @media screen and (max-width: 559px) {
324 .view-taxonomy-term .view-header {
325 margin: 0 auto 40px auto;
326
327 overflow: auto;
328 }
329
330 .view-taxonomy-term .view-header .field--name-field-icon {
331 margin: 0 auto 20px auto;
332 width: 220px;
333 }
334
335 .view-taxonomy-term .view-header .field--name-description {
336 max-width: 360px;
337 margin: 0 auto;
338 padding: 0 10px;
339 }
340
341 }
342
343 @media screen and (min-width: 560px) {
344 .view-taxonomy-term .view-header {
345 margin: 0 0 40px 0;
346
347 overflow: auto;
348 }
349
350 .view-taxonomy-term .view-header .field--name-field-icon {
351 width: 220px;
352
353 float: left;
354 }
355
356 .view-taxonomy-term .view-header .field--name-description {
357 margin-left: 260px;
358 }
359
360 }
361
362 @media screen and (min-width: 768px) {
363 .view-taxonomy-term .view-header {
364 max-width: 700px;
365 }
366 }
367
368
369 /* Product */
370
371
372 @media screen and (max-width: 767px) {
373 .page-node-type-product .product {
374 max-width: 382px;
375 margin: 0 auto;
376 }
377 }
378
379 @media screen and (min-width: 768px) and (max-width: 991px) {
380 .page-node-type-product .product {
381 width: 700px;
382 margin: 0 auto;
383 }
384 }
385
386 @media screen and (min-width: 992px) {
387 .page-node-type-product .product {
388 width: 800px;
389 margin: 0 auto;
390 }
391 }
392
393 .page-node-type-product .product .field--name-field-image {
394 padding: 10px;
395
396 display: flex;
397 align-items: center;
398
399 border: 1px solid #888;
400 border-radius: 10px;
401 }
402
403 .page-node-type-product .product .field--name-field-extra-images {
404 padding: 5px;
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 .field--item {
414 display: inline-block;
415 margin: auto;
416 padding: 5px;
417 }
418
419 .page-node-type-product .product .field--name-field-categories,
420 .page-node-type-product .product .field--name-field-vendor {
421 margin: 10px 10px 20px 0px;
422 padding: 10px;
423 border: 1px solid #888;
424 border-radius: 10px;
425 }
426
427 .page-node-type-product .product .field--name-field-categories .field--item {
428 display: list-item;
429 list-style: circle;
430 margin-left: 15px;
431 }
432
433 /* product page colors */
434 .page-node-type-product .product .field--name-field-image {
435 background-color: #fff;
436 border-color: #aaa;
437 }
438 .page-node-type-product .product .field--name-field-extra-images {
439 background-color: #f3f3f3;
440 border-color: #aaa;
441 }
442 .page-node-type-product .product .field--name-field-categories {
443 background-color: #def;
444 border-color: #8ad;
445 }
446 .page-node-type-product .product .field--name-field-vendor {
447 background-color: #dfe;
448 border-color: #8da;
449 }
450
451 @media screen and (max-width: 767px) {
452 .page-node-type-product .product .field--name-field-extra-images {
453 margin: 10px auto 0px auto;
454 }
455
456 .page-node-type-product .product .field--name-body,
457 .page-node-type-product .product .field--name-field-vendor-product-link,
458 .page-node-type-product .product .field--name-field-certification-details,
459 .page-node-type-product .product .field--name-field-certification-date,
460 .page-node-type-product .product .field--name-field-source-code-links {
461 margin-bottom: 20px;
462 }
463
464 .page-node-type-product .product .field--name-field-categories,
465 .page-node-type-product .product .field--name-field-vendor {
466 float: left;
467 }
468
469 .page-node-type-product .product .field--name-body {
470 clear: both;
471 }
472 }
473
474
475 @media screen and (min-width: 768px) {
476 .page-node-type-product .product .field--name-field-image {
477 width: 382px;
478 float: left;
479 }
480
481 .page-node-type-product .product .field--name-field-extra-images {
482 float: left;
483 clear: left;
484
485 width: 382px;
486 margin-top: 10px;
487 }
488
489 .page-node-type-product .product .field--name-body,
490 .page-node-type-product .product .field--name-field-vendor-product-link,
491 .page-node-type-product .product .field--name-field-certification-details,
492 .page-node-type-product .product .field--name-field-certification-date,
493 .page-node-type-product .product .field--name-field-source-code-links {
494 margin-left: 400px;
495 margin-bottom: 20px;
496 }
497
498 .page-node-type-product .product .field--name-field-categories {
499 float: left;
500 clear: left;
501 }
502
503 .page-node-type-product .product .field--name-field-vendor {
504 float: left;
505 }
506
507 }
508
509
510 /* News and Product Announcements */
511
512
513 .page-node-type-product-announcement .page-header,
514 .page-node-type-product-announcement .region-content,
515 .page-node-type-general-news-item .page-header,
516 .page-node-type-general-news-item .region-content {
517 max-width: 800px;
518 margin: 0 auto;
519 }
520
521 .path-news .page-header,
522 .path-news .region-content {
523 max-width: 800px;
524 margin: 0 auto;
525 }
526
527 .path-news h2 {
528 font-size: 25px;
529 }
530
531 .page-node-type-product-announcement .author,
532 .page-node-type-general-news-item .author {
533 margin: 10px 0 20px 0;
534 font-style: oblique;
535 }
536
537 .page-node-type-product-announcement .field--name-body,
538 .page-node-type-general-news-item .field--name-body {
539 margin-bottom: 20px;
540 }
541
542 .page-node-type-product-announcement .field--name-field-external-news-link,
543 .page-node-type-general-news-item .field--name-field-external-news-link {
544 margin-bottom: 20px;
545 }
546
547 .page-node-type-product-announcement .field--name-field-vendor-page,
548 .page-node-type-product-announcement .field--name-field-announced-products {
549 margin-bottom: 20px;
550 }
551
552
553 /* Footer */
554
555
556 .footer {
557 background: #333;
558 color: #FFF;
559 }
560
561 /* full page width for footer */
562 .footer {
563 width: 100%;
564 }
565
566 .footer a { color: #edd400; }
567
568 .footer a:hover { color: #FFF; }
569
570 .footer h4 { font-weight: bold; }
571
572 .footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
573
574 #fsf-logo-footer { margin-bottom: 10px; }
575
576 @media print { #fsf-logo-footer { filter: invert(100%) } }
577