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