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