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 /* Lato font */
   7
   8 @font-face {
   9     font-family: "Lato";
  10     src: url("../fonts/Lato-Regular.ttf") format('truetype');
  11     font-weight: 400;
  12     font-style: normal;
  13 }
  14
  15 @font-face {
  16     font-family: "Lato";
  17     src: url('../fonts/Lato-RegularItalic.ttf') format('truetype');
  18     font-weight: 400;
  19     font-style: italic;
  20 }
  21
  22 @font-face {
  23     font-family: "Lato";
  24     src: url('../fonts/Lato-Bold.ttf') format('truetype');
  25     font-weight: 700;
  26     font-style: normal;
  27 }
  28
  29
  30 /* Universal */
  31
  32 @media screen {
  33
  34   body {
  35     font-family: "Lato", Helvetica, Arial, sans-serif;
  36     margin: 0;
  37     min-width: 320px;
  38   }
  39
  40   a { transition: 0.3s; }
  41
  42   section { position: relative; }
  43
  44 }
  45
  46 /* etcetera */
  47
  48 @media screen {
  49
  50   .visually-hidden.focusable:focus {
  51       position: absolute !important;
  52       background: #000;
  53       color: #FFF;
  54       padding: 0.5em;
  55       z-index: 9999;
  56   }
  57
  58   .main-container { min-height: 50vh; }
  59
  60   h2.block-title {
  61     background: #337AB7;
  62     color: #FFF;
  63     padding: 0.5em;
  64   }
  65
  66
  67
  68   h2.block-title a:visited,
  69   h2.block-title a:focus,
  70   h2.block-title a:active,
  71   h2.block-title a {
  72     color: #FFF;
  73   }
  74
  75   h2.block-title a:hover {
  76     color: #FFF;
  77   }
  78
  79   .feed-icons a {
  80     background: url('../images/rss.svg') top left no-repeat;
  81     background-size: contain;
  82     height: 20px;
  83     overflow: hidden;
  84     display: block;
  85     text-indent: 25px;
  86     font-size: 1em;
  87     width: fit-content;
  88     margin-top: 1em;
  89     float: right;
  90   }
  91
  92   .view-display-id-news_page .feed-icons a {
  93     margin-top: -30px;
  94   }
  95
  96   .more-link {
  97     border: 1px solid #ddd;
  98     border-radius: .5em;
  99     padding: .5em;
 100     text-align: center;
 101     width: 50%;
 102     margin: 0 auto;
 103     font-weight: bold;
 104     margin-top: 2em;
 105   }
 106
 107   .more-link:hover {
 108     background: #EEE;
 109     color: #000;
 110   }
 111
 112   .block-views {
 113     margin-top: 20px;
 114   }
 115
 116 }
 117
 118 /* Navbar */
 119
 120 @media screen {
 121
 122   .navbar-default {
 123     background: #000;
 124     color: #FFF;
 125     border: none;
 126     border-radius: 0px;
 127     box-sizing: content-box;
 128     align-items: center;
 129     min-height: 100px;
 130   }
 131
 132   .navbar-header,
 133   #navbar-collapse {
 134     max-width: 1150px;
 135     padding: 0;
 136     margin: 0 auto;
 137     border: none;
 138     overflow: hidden;
 139   }
 140
 141   .navbar-default .navbar-toggle { display: none; }
 142
 143   .navbar-header {
 144     position: absolute;
 145     top: 5px;
 146   }
 147
 148   .navbar-brand { display: none; }
 149
 150   #block-ryf-main-menu .navbar-nav { margin-left: 195px; }
 151
 152   .navbar-default .navbar-nav > li > a:focus {
 153     outline: none;
 154   }
 155
 156   .navbar-default .navbar-nav > li > a,
 157   .navbar-default .navbar-nav > li > a:link,
 158   .navbar-default .navbar-nav > li > a:visited {
 159     color: #FFF;
 160     background: #000;
 161     border-bottom: 2px solid transparent;
 162     padding-bottom: 10px;
 163     margin-bottom: 5px;
 164   }
 165
 166   .navbar-default .navbar-nav > li > a:focus,
 167   .navbar-default .navbar-nav > li.active > a:hover,
 168   .navbar-default .navbar-nav > li > a:hover {
 169     color: #edd400;
 170     background: #000;
 171     border-bottom: 2px solid #edd400;
 172     padding-bottom: 5px;
 173     margin-bottom: 10px;
 174   }
 175
 176   .navbar-default .navbar-nav > li > a.is-active {
 177     border-bottom: 2px solid #FFF;
 178     background: #000;
 179     padding-bottom: 5px;
 180     margin-bottom: 10px;
 181   }
 182
 183   .page-header {
 184     border-bottom: 2px solid #000;
 185     font-size: 2em;
 186   }
 187
 188   .region-header .search-block-form {
 189     width: 300px;
 190     float: right;
 191   }
 192
 193   nav .search-block-form {
 194     position: absolute;
 195     width: 300px;
 196     right: 10%;
 197     top: 30px;
 198   }
 199
 200   .region-navigation-collapsible .search-block-form {
 201     float: right;
 202     width: 210px;
 203   }
 204
 205 }
 206
 207 @media screen and (max-width: 767px) {
 208   #block-ryf-main-menu .navbar-nav { max-width: 130px; }
 209
 210   #navbar { min-height: 260px; }
 211 }
 212
 213 @media screen and (min-width: 768px) {
 214
 215   .navbar-default {
 216      margin-bottom: 100px;
 217   }
 218   .navbar-nav {
 219      margin-top: 40px;
 220   }
 221   .region-header .breadcrumb {
 222     position: absolute;
 223     top: -70px;
 224     left: 200px;
 225     background: none;
 226   }
 227   .region-navigation-collapsible .search-block-form {
 228     padding-top: 50px;
 229   }
 230 }
 231
 232 @media screen {
 233
 234   .maintenance-page #navbar {
 235     margin-bottom: 120px;
 236   }
 237 }
 238
 239
 240 /* Selectors */
 241
 242
 243 @media screen and (min-width: 768px) {
 244   .form-inline .form-item .select-wrapper {
 245     display: block;
 246   }
 247   .form-inline .form-actions {
 248     margin-top: 21px;
 249   }
 250 }
 251
 252 /* News */
 253
 254 @media screen {
 255
 256   .view-news article {
 257     padding: 0.5em;
 258     margin: 0 10%;
 259   }
 260
 261   .view-news p {
 262     line-height: 1.5em;
 263     font-size: 1.1em;
 264   }
 265
 266   .view-news .node-readmore {
 267     padding: 0.5em 1em;
 268     border: 1px solid #DDD;
 269     border-radius: 0.5em;
 270     float: right;
 271   }
 272
 273   .view-news .node-readmore:hover {
 274     background: #EEE;
 275     color: #000;
 276   }
 277
 278   .view-news footer {
 279     color: #999;
 280     padding: 0.5em;
 281     text-align: right;
 282   }
 283
 284 }
 285
 286
 287 /* RYF List */
 288
 289
 290 @media screen {
 291
 292   .ryf-list-row {
 293     padding: 0;
 294     margin: 0 auto;
 295     overflow: auto;
 296   }
 297
 298   .ryf-list {
 299     float: left;
 300     margin: 0;
 301     padding: 0.5em;
 302     position: relative;
 303     list-style: none;
 304   }
 305
 306   .ryf-list article {
 307     border: 1px solid #bbb;
 308     border-radius: 5px;
 309     padding: 1em;
 310     box-shadow: 2px 2px 5px #ddd;
 311     transition: 0.3s;
 312   }
 313
 314   .ryf-list article:hover {
 315     box-shadow: 0px 0px 5px #aaa;
 316   }
 317
 318   .ryf-list .field--type-image {
 319     border: 1px solid #ddd;
 320     border-left: 0px;
 321     border-right: 0px;
 322     background: #fff;
 323     height: 150px;
 324     width: 100%;
 325     overflow: hidden;
 326     border-radius: 5px;
 327     position: relative;
 328     text-align: center;
 329     display: flex;
 330     align-items: center;
 331   }
 332
 333   .ryf-list .field--type-image a {
 334     display: inline-block;
 335     margin: 0 auto;
 336   }
 337
 338   .ryf-list .field--type-image img {
 339     width: auto;
 340     max-height: 150px;
 341     margin: 0 auto;
 342     display: inline-block;
 343   }
 344
 345   .ryf-list h2 {
 346     text-align: left;
 347     font-size: 1.5em;
 348     line-height: 1.2em;
 349     margin: 0;
 350     padding: 0;
 351   }
 352
 353   .ryf-list .field--name-body {
 354     display: block;
 355     border-radius: 5px;
 356     width: 100%;
 357     height: 0px;
 358     margin-top: 0px;
 359     z-index: 99;
 360     position: relative;
 361     background: #00000088;
 362     color: white;
 363     padding: 0em;
 364     transition: 0.2s;
 365     cursor: default;
 366     overflow: hidden;
 367   }
 368
 369   .ryf-list:hover .field--name-body {
 370     height: 100px;
 371     margin-top: -100px;
 372     z-index: 99;
 373     position: relative;
 374     padding: 0.3em;
 375     transition: 0.3s;
 376   }
 377
 378   .ryf-list a {
 379     color: #337AB7;
 380   }
 381
 382   .ryf-list a:hover {
 383     color: #000;
 384   }
 385
 386   .ryf-list .list-inline li {
 387     font-size: 0.9em;
 388     border: 1px solid #ddd;
 389     width: auto;
 390     border-radius: 0.5em;
 391     padding: 0.3em 0.5em;
 392     margin-top: 5px;
 393     float: right;
 394   }
 395
 396   .ryf-list h2 a {
 397     display: inline-block;
 398     height: 55px;
 399     width: 100%;
 400     overflow: hidden;
 401     position: relative;
 402   }
 403
 404 /*
 405   .ryf-list h2 a:after {
 406     content: '(...)';
 407     float: right;
 408     display: block;
 409     position: absolute;
 410     bottom:5px;
 411     right: 2px;
 412     font-size: 0.8em;
 413   }
 414 */
 415
 416   .ryf-list .list-inline li:hover {
 417     background: #eee;
 418   }
 419
 420 }
 421
 422 @media screen and (min-width: 450px) and (max-width: 659px) {
 423   .ryf-list-row {
 424     max-width: 600px;
 425   }
 426   .ryf-list {
 427     max-width: 300px;
 428     float: none;
 429     margin: 0 auto;
 430   }
 431 }
 432 @media screen and (min-width: 660px) and (max-width: 767px) {
 433   .ryf-list-row {
 434     margin: 0 auto;
 435     max-width: 660px;
 436   }
 437   .ryf-list {
 438     max-width: 300px;
 439     float: left;
 440   }
 441   .auto-clear .col-xs-12:nth-child(odd){clear:left;}
 442 }
 443
 444 @media screen and (min-width: 55em) {
 445
 446   .ryf-list article {
 447       min-height: 270px
 448   }
 449
 450 }
 451
 452
 453 /* Vendors list */
 454
 455
 456 @media screen {
 457
 458   .vendors-list-row {
 459     padding: 10px;
 460     margin: 0 auto;
 461     overflow: auto;
 462   }
 463
 464   .vendors-list {
 465     margin-bottom: 40px;
 466     list-style: none;
 467
 468     overflow: auto;
 469   }
 470
 471   .vendors-list .views-field-field-icon {
 472     width: 220px;
 473     height: 220px;
 474
 475     display: flex;
 476     align-items: center;
 477
 478     margin: 0px auto 20px auto;
 479   }
 480
 481   .vendors-list .views-field-field-icon img {
 482     margin: 0 auto;
 483   }
 484
 485   .vendors-list .views-field-name,
 486   .vendors-list .views-field-field-description-summary,
 487   .vendors-list .views-field-description__value {
 488     max-width: 300px;
 489     margin: 0 auto 10px auto;
 490   }
 491
 492   .vendors-list .views-field-name {
 493     font-weight: bold;
 494     font-size: 18px;
 495     text-align: center;
 496   }
 497
 498 }
 499
 500
 501 /* Sidebars */
 502
 503
 504 @media screen and (max-width: 767px) {
 505   .path-products #block-views-block-categories-categories-block { display: none; }
 506 }
 507
 508
 509 /* Vendor and Category taxonomy term pages */
 510
 511
 512 @media screen {
 513
 514   .view-taxonomy-term .view-header .field--name-field-icon img {
 515     margin: 0 auto;
 516   }
 517
 518   .view-filters {
 519     clear: left;
 520   }
 521
 522   .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 523   .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 524     margin-top: 15px;
 525   }
 526
 527 }
 528
 529 @media screen and (max-width: 559px) {
 530   .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
 531     margin: 0 auto 40px auto;
 532     overflow: auto;
 533   }
 534
 535   .view-taxonomy-term .view-header .field--name-field-icon {
 536     margin: 0 auto 20px auto;
 537     width: 220px;
 538   }
 539
 540   .view-taxonomy-term .view-header .field--name-description,
 541   .view-taxonomy-term .view-header .field--name-field-description-summary,
 542   .view-taxonomy-term .view-header .field--name-field-vendor-website,
 543   .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 544   .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 545     max-width: 360px;
 546     margin: 15px auto 0 auto;
 547     padding: 0 10px;
 548   }
 549
 550 }
 551
 552 @media screen and (min-width: 560px) {
 553   .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
 554     margin: 0 0 40px 0;
 555     overflow: auto;
 556   }
 557
 558   .view-taxonomy-term .view-header .field--name-field-icon {
 559     width: 220px;
 560     float: left;
 561   }
 562
 563   .view-taxonomy-term .view-header .field--name-description,
 564   .view-taxonomy-term .view-header .field--name-field-description-summary,
 565   .view-taxonomy-term .view-header .field--name-field-vendor-website,
 566   .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 567   .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 568     margin: 15px auto 0 260px;
 569   }
 570
 571 }
 572
 573 @media screen and (min-width: 768px) {
 574   .view-taxonomy-term .view-header {
 575     max-width: 700px;
 576   }
 577 }
 578
 579
 580 /* Product */
 581
 582
 583 @media screen and (max-width: 767px) {
 584   .page-node-type-product .product {
 585     max-width: 382px;
 586     margin: 0 auto;
 587   }
 588 }
 589
 590 @media screen and (min-width: 768px) and (max-width: 991px) {
 591   .page-node-type-product .product {
 592     width: 700px;
 593     margin: 0 auto;
 594   }
 595 }
 596
 597 @media screen and (min-width: 992px) {
 598   .page-node-type-product .product {
 599     width: 800px;
 600     margin: 0 auto;
 601   }
 602 }
 603
 604 @media screen {
 605
 606   .page-node-type-product .product .field--name-field-image {
 607     padding: 10px;
 608
 609     border: 1px solid #888;
 610     border-radius: 10px;
 611   }
 612
 613   .page-node-type-product .product .field--name-field-image img {
 614     margin: 0 auto;
 615   }
 616
 617   .page-node-type-product .product .field--name-field-extra-images {
 618     padding: 0 11px;
 619     display: flex;
 620     align-items: center;
 621   }
 622
 623   .page-node-type-product .product .field--name-field-extra-images .field--item {
 624     display: inline-block;
 625     margin-right: 15px;
 626     padding: 5px;
 627   }
 628   .page-node-type-product .product .field--name-field-extra-images .field--item:last-child {
 629     margin-right: 0;
 630   }
 631
 632   .page-node-type-product .product .field--name-field-categories,
 633   .page-node-type-product .product .field--name-field-vendor {
 634     margin: 10px 10px 20px 0px;
 635     padding: 10px;
 636   }
 637
 638   .page-node-type-product .product .field--name-field-categories .field--item {
 639     display: list-item;
 640     list-style: circle;
 641     margin-left: 15px;
 642   }
 643
 644   /* Mostly from Bootstrap 3 button CSS */
 645   .page-node-type-product .product .field--name-field-vendor-product-link a {
 646       color: #fff;
 647       background-color: #337ab7;
 648       border-color: #2e6da4;
 649       display: inline-block;
 650       margin-bottom: 0;
 651       font-weight: normal;
 652       text-align: center;
 653       white-space: nowrap;
 654       vertical-align: middle;
 655       -ms-touch-action: manipulation;
 656       touch-action: manipulation;
 657       cursor: pointer;
 658       background-image: none;
 659       border: 1px solid transparent;
 660       padding: 6px 12px;
 661       font-size: 14px;
 662       line-height: 1.42857143;
 663       border-radius: 4px;
 664       -webkit-user-select: none;
 665       -moz-user-select: none;
 666       -ms-user-select: none;
 667       user-select: none;
 668       text-decoration: none;
 669   }
 670
 671   #block-views-block-categories-categories-block ul {
 672     margin: 0; padding: 0 10px;
 673     list-style: none;
 674   }
 675
 676   #block-views-block-categories-categories-block li {
 677     padding: 5px 10px;
 678     border: 1px solid #DDD;
 679     border-radius: 5px;
 680     list-style: none;
 681     margin: 5px 0;
 682   }
 683
 684   #block-views-block-categories-categories-block li:hover {
 685     background: #EEE;
 686     color: #000;
 687   }
 688
 689   #block-views-block-categories-categories-block a {
 690     width: 100%;
 691     display: block;
 692   }
 693
 694   /* product page colors */
 695   .page-node-type-product .product .field--name-field-image {
 696     background-color: #fff;
 697     border-color: #aaa;
 698   }
 699
 700 }
 701
 702 @media screen and (max-width: 767px) {
 703   .page-node-type-product .product .field--name-field-extra-images {
 704     margin: 10px auto 0px auto;
 705   }
 706
 707   .page-node-type-product .product .field--name-body,
 708   .page-node-type-product .product .field--name-field-product-announcement,
 709   .page-node-type-product .product .field--name-field-vendor-product-link,
 710   .page-node-type-product .product .field--name-field-certification-details,
 711   .page-node-type-product .product .field--name-field-certification-date,
 712   .page-node-type-product .product .field--name-field-source-code-links {
 713     padding-top: 20px;
 714   }
 715
 716   .page-node-type-product .product .field--name-field-categories,
 717   .page-node-type-product .product .field--name-field-vendor {
 718     margin-bottom: 0px;
 719     float: left;
 720   }
 721
 722   .page-node-type-product .product .field--name-body,
 723   .page-node-type-product .product .field--name-field-product-announcement,
 724   .page-node-type-product .product .field--name-field-vendor-product-link,
 725   .page-node-type-product .product .field--name-field-certification-details,
 726   .page-node-type-product .product .field--name-field-certification-date,
 727   .page-node-type-product .product .field--name-field-source-code-links {
 728     clear: both;
 729   }
 730 }
 731
 732
 733 @media screen and (min-width: 768px) {
 734   .page-node-type-product .product .field--name-field-image {
 735     width: 382px;
 736     float: left;
 737   }
 738
 739   .page-node-type-product .product .field--name-field-extra-images {
 740     float: left;
 741     clear: left;
 742     width: 382px;
 743     margin-top: 10px;
 744   }
 745
 746   .page-node-type-product .product .field--name-body,
 747   .page-node-type-product .product .field--name-field-product-announcement,
 748   .page-node-type-product .product .field--name-field-vendor-product-link,
 749   .page-node-type-product .product .field--name-field-certification-details,
 750   .page-node-type-product .product .field--name-field-certification-date,
 751   .page-node-type-product .product .field--name-field-source-code-links {
 752     margin-left: 400px;
 753     margin-top: 20px;
 754   }
 755
 756   .page-node-type-product .product .field--name-field-categories {
 757     float: left;
 758     clear: left;
 759   }
 760
 761   .page-node-type-product .product .field--name-field-vendor {
 762     float: left;
 763   }
 764
 765 }
 766
 767
 768 /* News and Product Announcements */
 769
 770
 771 @media screen {
 772
 773   .page-node-type-product-announcement .page-header,
 774   .page-node-type-product-announcement .tabs--primary,
 775   .page-node-type-product-announcement .region-content,
 776   .page-node-type-general-news-item .page-header,
 777   .page-node-type-general-news-item .tabs--primary,
 778   .page-node-type-general-news-item .region-content,
 779   .page-node-type-page .page-header,
 780   .page-node-type-page .tabs--primary,
 781   .page-node-type-page .region-content,
 782   .path-news .page-header,
 783   .path-news .tabs--primary,
 784   .path-news .region-content {
 785     max-width: 800px;
 786     margin: 0 auto;
 787   }
 788
 789   /* don't apply above max-width rule to main page */
 790   .path-frontpage .page-header,
 791   .path-frontpage .tabs--primary,
 792   .path-frontpage .region-content {
 793     max-width: 2000px; /* high number beyond the max */
 794   }
 795
 796   .page-node-type-page .page-header {
 797     margin-bottom: 20px;
 798   }
 799
 800   .path-news h2,
 801   .block-views-blocknews-news-block article h2 {
 802     font-size: 25px;
 803   }
 804
 805   .page-node-type-product-announcement .author,
 806   .page-node-type-general-news-item .author {
 807     margin: 10px 0 20px 0;
 808     font-style: oblique;
 809   }
 810
 811   .page-node-type-product-announcement .field--name-body,
 812   .page-node-type-general-news-item .field--name-body {
 813     margin-bottom: 20px;
 814   }
 815
 816   .page-node-type-product-announcement .field--name-field-external-news-link,
 817   .page-node-type-general-news-item .field--name-field-external-news-link {
 818     margin-bottom: 20px;
 819   }
 820
 821   .page-node-type-product-announcement .field--name-field-vendor-page,
 822   .page-node-type-product-announcement .field--name-field-announced-products {
 823     margin-bottom: 20px;
 824   }
 825
 826 }
 827
 828
 829 /* Search Results */
 830
 831
 832 @media screen and (max-width: 600px) {
 833   .path-search .region-content > ol {
 834     width: 300px;
 835   }
 836 }
 837 @media screen and (min-width: 601px) and (max-width 1000px) {
 838   .path-search .region-content > ol {
 839     width: 560px;
 840   }
 841 }
 842 @media screen and (min-width: 1001px) {
 843   .path-search .region-content > ol {
 844     width: 900px;
 845   }
 846 }
 847
 848 @media screen {
 849
 850   .path-search .region-content > ol {
 851     margin: 0 auto;
 852     padding-left: 0;
 853     overflow: auto;
 854   }
 855
 856   .path-search .region-content > ol li {
 857     width: 280px;
 858     height: 320px;
 859     margin: 0px auto;
 860     padding: 10px;
 861
 862     float: left;
 863
 864     list-style: none;
 865     overflow: hidden;
 866   }
 867
 868   .path-search .region-content > ol li h3 {
 869     text-align: center;
 870   }
 871
 872   .path-search .region-content > ol li .search-image {
 873     width: 220px;
 874     height: 220px;
 875
 876     margin: 0 auto;
 877
 878     display: flex;
 879     align-items: center;
 880   }
 881
 882   .path-search .region-content > ol li p {
 883     display: block;
 884     width: 220px;
 885     margin: 0 auto;
 886   }
 887
 888   .path-search .region-content > ol li img {
 889   }
 890 }
 891
 892
 893 /* Footer */
 894
 895 @media screen {
 896
 897   .footer {
 898     background: #333;
 899     color: #FFF;
 900   }
 901
 902   #email-signup .email-input {
 903     color: #000;
 904     display: block;
 905     margin-bottom: 10px;
 906   }
 907   #email-signup .action-button {
 908     color: #000;
 909     display: block;
 910   }
 911
 912   /* full page width for footer */
 913
 914   .footer {
 915     width: 100%;
 916   }
 917
 918   .footer a { color: #edd400; }
 919
 920   .footer a:hover { color: #FFF; }
 921
 922   .footer h4 { font-weight: bold; }
 923
 924   .footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
 925
 926   #fsf-logo-footer { margin-bottom: 10px; }
 927 }
 928
 929 @media print { #fsf-logo-footer { filter: invert(100%) } }
 930