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