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