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: #DDCC00;
 160   background: #000;
 161   border-bottom: 2px solid #DDCC00;
 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 /*
 191  *  @media screen and (min-width: 520px) and (max-width: 599px) {
 192  *   .logo img { margin-left: 50px; }
 193  *   #block-ryf-main-menu .navbar-nav { margin-left: 230px; }
 194  * }
 195  *
 196  * @media screen and (min-width: 600px) and (max-width: 767px) {
 197  *   .logo img { margin-left: 100px; }
 198  *   #block-ryf-main-menu .navbar-nav { margin-left: 280px; }
 199  * }
 200  *
 201  * @media screen and (max-width: 767px) {
 202  *   .logo img { height: 150px; margin-top: 25px; }
 203  *   .navbar-default { min-height: 230px; margin-bottom: 30px; }
 204  *   #block-ryf-main-menu .navbar-nav { max-width: 130px; }
 205  * }
 206  *
 207  */
 208
 209 @media screen and (min-width: 768px) {
 210
 211   .navbar-default {
 212      margin-bottom: 100px;
 213   }
 214   .navbar-nav {
 215      margin-top: 40px;
 216   }
 217   .region-header .breadcrumb {
 218     position: absolute;
 219     top: -70px;
 220     left: 200px;
 221     background: none;
 222   }
 223   .region-navigation-collapsible .search-block-form {
 224     float: right;
 225     padding-top: 30px;
 226     width: 210px;
 227   }
 228 }
 229
 230
 231 /* Selectors */
 232
 233
 234 @media screen and (min-width: 768px) {
 235   .form-inline .form-item .select-wrapper {
 236     display: block;
 237   }
 238   .form-inline .form-actions {
 239     margin-top: 21px;
 240   }
 241 }
 242
 243 /* News */
 244
 245 .view-news article {
 246   padding: 0.5em;
 247   margin: 0 10%;
 248 }
 249
 250 .view-news p {
 251   line-height: 1.5em;
 252   font-size: 1.1em;
 253 }
 254
 255 .view-news .node-readmore {
 256   padding: 0.5em 1em;
 257   border: 1px solid #DDD;
 258   border-radius: 0.5em;
 259   float: right;
 260 }
 261
 262 .view-news .node-readmore:hover {
 263   background: #EEE;
 264   color: #000;
 265 }
 266
 267 .view-news footer {
 268   color: #999;
 269   padding: 0.5em;
 270   text-align: right;
 271 }
 272
 273
 274 /* RYF List */
 275
 276
 277 .ryf-list-row {
 278   padding: 0;
 279   margin: 0 auto;
 280   overflow: auto;
 281 }
 282
 283 .ryf-list {
 284   float: left;
 285   margin: 0;
 286   padding: 0.5em;
 287   position: relative;
 288   list-style: none;
 289 }
 290
 291 .ryf-list article {
 292   border: 1px solid #bbb;
 293   border-radius: 5px;
 294   padding: 1em;
 295   box-shadow: 2px 2px 5px #ddd;
 296   transition: 0.3s;
 297 }
 298
 299 .ryf-list article:hover {
 300   box-shadow: 0px 0px 5px #aaa;
 301 }
 302
 303 .ryf-list .field--type-image {
 304   border: 1px solid #ddd;
 305   border-left: 0px;
 306   border-right: 0px;
 307   background: #fff;
 308   height: 150px;
 309   width: 100%;
 310   overflow: hidden;
 311   border-radius: 5px;
 312   position: relative;
 313   text-align: center;
 314 }
 315
 316 .ryf-list img {
 317   width: auto;
 318   height: 100%;
 319   margin: auto 0;
 320   display: inline-block;
 321 }
 322
 323 .ryf-list h2 {
 324   text-align: left;
 325   font-size: 1.5em;
 326   line-height: 1.2em;
 327   margin: 0;
 328   padding: 0;
 329 }
 330
 331 .ryf-list .field--name-body {
 332   display: block;
 333   border-radius: 5px;
 334   width: 100%;
 335   height: 0px;
 336   margin-top: 0px;
 337   z-index: 99;
 338   position: relative;
 339   background: #00000088;
 340   color: white;
 341   padding: 0em;
 342   transition: 0.2s;
 343   cursor: default;
 344   overflow: hidden;
 345 }
 346
 347 .ryf-list:hover .field--name-body {
 348   height: 100px;
 349   margin-top: -100px;
 350   z-index: 99;
 351   position: relative;
 352   padding: 0.3em;
 353   transition: 0.3s;
 354 }
 355
 356 .ryf-list a {
 357   color: #337AB7;
 358 }
 359
 360 .ryf-list a:hover {
 361   color: #000;
 362 }
 363
 364 .ryf-list .list-inline li {
 365   font-size: 0.9em;
 366   border: 1px solid #ddd;
 367   width: auto;
 368   border-radius: 0.5em;
 369   padding: 0.3em 0.5em;
 370   margin-top: 5px;
 371   float: right;
 372 }
 373
 374 .ryf-list h2 a {
 375   display: inline-block;
 376   height: 55px;
 377   overflow: hidden;
 378   position: relative;
 379 }
 380
 381 .ryf-list h2 a:after {
 382   content: '(...)';
 383   float: right;
 384   display: block;
 385   position: absolute;
 386   bottom:5px;
 387   right: 2px;
 388   font-size: 0.8em;
 389 }
 390
 391 .ryf-list .list-inline li:hover {
 392   background: #eee;
 393 }
 394
 395 @media screen and (min-width: 450px) and (max-width: 659px) {
 396   .ryf-list-row {
 397     max-width: 600px;
 398   }
 399   .ryf-list {
 400     max-width: 300px;
 401     float: none;
 402     margin: 0 auto;
 403   }
 404 }
 405 @media screen and (min-width: 660px) and (max-width: 767px) {
 406   .ryf-list-row {
 407     max-width: 600px;
 408   }
 409   .ryf-list-row {
 410     margin: 0 auto;
 411     max-width: 660px;
 412   }
 413   .ryf-list {
 414     max-width: 300px;
 415     float: left;
 416   }
 417   .auto-clear .col-xs-12:nth-child(odd){clear:left;}
 418 }
 419
 420 @media screen and (min-width: 55em) {
 421
 422   .ryf-list article {
 423       min-height: 270px
 424   }
 425
 426 }
 427
 428
 429 /* Vendors list */
 430
 431
 432 .vendors-list-row {
 433   padding: 10px;
 434   margin: 0 auto;
 435   overflow: auto;
 436 }
 437
 438 @media screen and (max-width: 767px) {
 439   .vendors-list-row {
 440     margin: 0px auto;
 441   }
 442
 443   .vendors-list {
 444     margin-bottom: 40px;
 445     list-style: none;
 446
 447     overflow: auto;
 448   }
 449
 450   .vendors-list .views-field-field-icon {
 451     width: 220px;
 452
 453     margin: 0px auto 20px auto;
 454   }
 455
 456   .vendors-list .views-field-field-icon img {
 457     margin: 0 auto;
 458   }
 459
 460   .vendors-list .views-field-name,
 461   .vendors-list .views-field-field-description-summary,
 462   .vendors-list .views-field-description__value {
 463     max-width: 300px;
 464     margin: 0 auto 10px auto;
 465   }
 466
 467   .vendors-list .views-field-name {
 468     font-weight: bold;
 469     font-size: 18px;
 470     text-align: center;
 471   }
 472
 473 }
 474
 475 @media screen and (min-width: 768px) {
 476   .vendors-list-row {
 477     width: 600px;
 478     margin: 0px auto;
 479   }
 480
 481   .vendors-list {
 482     list-style: none;
 483     clear: left;
 484
 485     overflow: auto;
 486   }
 487
 488   .vendors-list .views-field-field-icon {
 489     width: 220px;
 490     height: 220px;
 491
 492     margin-bottom: 40px;
 493
 494     float: left;
 495   }
 496
 497   .vendors-list .views-field-field-icon img {
 498     margin: 0 auto;
 499   }
 500
 501   .vendors-list .views-field-name,
 502   .vendors-list .views-field-field-description-summary,
 503   .vendors-list .views-field-description__value {
 504     margin-left: 300px;
 505   }
 506
 507   .vendors-list .views-field-name {
 508     margin-bottom: 10px;
 509     font-weight: bold;
 510     font-size: 18px;
 511   }
 512 }
 513
 514
 515 /* Sidebars */
 516
 517
 518 @media screen and (max-width: 767px) {
 519   .path-products #block-views-block-categories-categories-block { display: none; }
 520 }
 521
 522
 523 /* Vendor and Category taxonomy term pages */
 524
 525
 526 .view-taxonomy-term .view-header .field--name-field-icon img {
 527   margin: 0 auto;
 528 }
 529
 530 .view-filters {
 531   clear: left;
 532 }
 533
 534 .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 535 .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 536   margin-top: 15px;
 537 }
 538
 539 @media screen and (max-width: 559px) {
 540   .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
 541     margin: 0 auto 40px auto;
 542     overflow: auto;
 543   }
 544
 545   .view-taxonomy-term .view-header .field--name-field-icon {
 546     margin: 0 auto 20px auto;
 547     width: 220px;
 548   }
 549
 550   .view-taxonomy-term .view-header .field--name-description,
 551   .view-taxonomy-term .view-header .field--name-field-description-summary,
 552   .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 553   .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 554     max-width: 360px;
 555     margin: 15px auto 0 auto;
 556     padding: 0 10px;
 557   }
 558
 559 }
 560
 561 @media screen and (min-width: 560px) {
 562   .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
 563     margin: 0 0 40px 0;
 564     overflow: auto;
 565   }
 566
 567   .view-taxonomy-term .view-header .field--name-field-icon {
 568     width: 220px;
 569     float: left;
 570   }
 571
 572   .view-taxonomy-term .view-header .field--name-description,
 573   .view-taxonomy-term .view-header .field--name-field-description-summary,
 574   .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 575   .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 576     margin-left: 260px;
 577   }
 578
 579 }
 580
 581 @media screen and (min-width: 768px) {
 582   .view-taxonomy-term .view-header {
 583     max-width: 700px;
 584   }
 585 }
 586
 587
 588 /* Product */
 589
 590
 591 @media screen and (max-width: 767px) {
 592   .page-node-type-product .product {
 593     max-width: 382px;
 594     margin: 0 auto;
 595   }
 596 }
 597
 598 @media screen and (min-width: 768px) and (max-width: 991px) {
 599   .page-node-type-product .product {
 600     width: 700px;
 601     margin: 0 auto;
 602   }
 603 }
 604
 605 @media screen and (min-width: 992px) {
 606   .page-node-type-product .product {
 607     width: 800px;
 608     margin: 0 auto;
 609   }
 610 }
 611
 612 .page-node-type-product .product .field--name-field-image {
 613   padding: 10px;
 614
 615   border: 1px solid #888;
 616   border-radius: 10px;
 617 }
 618
 619 .page-node-type-product .product .field--name-field-image img {
 620   margin: 0 auto;
 621 }
 622
 623 .page-node-type-product .product .field--name-field-extra-images {
 624   padding: 5px;
 625   display: flex;
 626   align-items: center;
 627   border: 1px solid #888;
 628   border-radius: 10px;
 629 }
 630
 631 .page-node-type-product .product .field--name-field-extra-images .field--item {
 632   display: inline-block;
 633   margin: auto;
 634   padding: 5px;
 635 }
 636
 637 .page-node-type-product .product .field--name-field-categories,
 638 .page-node-type-product .product .field--name-field-vendor {
 639   margin: 10px 10px 20px 0px;
 640   padding: 10px;
 641   border: 1px solid #888;
 642   border-radius: 10px;
 643 }
 644
 645 .page-node-type-product .product .field--name-field-categories .field--item {
 646   display: list-item;
 647   list-style: circle;
 648   margin-left: 15px;
 649 }
 650
 651 #block-views-block-categories-categories-block ul {
 652   margin: 0; padding: 0 10px;
 653   list-style: none;
 654 }
 655
 656 #block-views-block-categories-categories-block li {
 657   padding: 5px 10px;
 658   border: 1px solid #DDD;
 659   border-radius: 5px;
 660   list-style: none;
 661   margin: 5px 0;
 662 }
 663
 664 #block-views-block-categories-categories-block li:hover {
 665   background: #EEE;
 666   color: #000;
 667 }
 668
 669 #block-views-block-categories-categories-block a {
 670   width: 100%;
 671   display: block;
 672 }
 673
 674 /* product page colors */
 675 .page-node-type-product .product .field--name-field-image {
 676   background-color: #fff;
 677   border-color: #aaa;
 678 }
 679 .page-node-type-product .product .field--name-field-extra-images {
 680   background-color: #f3f3f3;
 681   border-color: #aaa;
 682 }
 683 .page-node-type-product .product .field--name-field-categories {
 684   background-color: #def;
 685   border-color: #8ad;
 686 }
 687 .page-node-type-product .product .field--name-field-vendor {
 688   background-color: #dfe;
 689   border-color: #8da;
 690 }
 691
 692 @media screen and (max-width: 767px) {
 693   .page-node-type-product .product .field--name-field-extra-images {
 694     margin: 10px auto 0px auto;
 695   }
 696
 697   .page-node-type-product .product .field--name-body,
 698   .page-node-type-product .product .field--name-field-vendor-product-link,
 699   .page-node-type-product .product .field--name-field-certification-details,
 700   .page-node-type-product .product .field--name-field-certification-date,
 701   .page-node-type-product .product .field--name-field-source-code-links {
 702     margin-bottom: 20px;
 703   }
 704
 705   .page-node-type-product .product .field--name-field-categories,
 706   .page-node-type-product .product .field--name-field-vendor {
 707     margin-bottom: 0px;
 708     float: left;
 709   }
 710
 711   .page-node-type-product .product .field--name-body {
 712     padding-top: 20px;
 713     clear: both;
 714   }
 715 }
 716
 717
 718 @media screen and (min-width: 768px) {
 719   .page-node-type-product .product .field--name-field-image {
 720     width: 382px;
 721     float: left;
 722   }
 723
 724   .page-node-type-product .product .field--name-field-extra-images {
 725     float: left;
 726     clear: left;
 727     width: 382px;
 728     margin-top: 10px;
 729   }
 730
 731   .page-node-type-product .product .field--name-body,
 732   .page-node-type-product .product .field--name-field-vendor-product-link,
 733   .page-node-type-product .product .field--name-field-certification-details,
 734   .page-node-type-product .product .field--name-field-certification-date,
 735   .page-node-type-product .product .field--name-field-source-code-links {
 736     margin-left: 400px;
 737     margin-bottom: 20px;
 738   }
 739
 740   .page-node-type-product .product .field--name-field-categories {
 741     float: left;
 742     clear: left;
 743   }
 744
 745   .page-node-type-product .product .field--name-field-vendor {
 746     float: left;
 747   }
 748
 749 }
 750
 751
 752 /* News and Product Announcements */
 753
 754
 755 .page-node-type-product-announcement .page-header,
 756 .page-node-type-product-announcement .tabs--primary,
 757 .page-node-type-product-announcement .region-content,
 758 .page-node-type-general-news-item .page-header,
 759 .page-node-type-general-news-item .tabs--primary,
 760 .page-node-type-general-news-item .region-content,
 761 .page-node-type-page .page-header,
 762 .page-node-type-page .tabs--primary,
 763 .page-node-type-page .region-content,
 764 .path-news .page-header,
 765 .path-news .tabs--primary,
 766 .path-news .region-content {
 767   max-width: 800px;
 768   margin: 0 auto;
 769 }
 770
 771 /* don't apply above max-width rule to main page */
 772 .path-frontpage .page-header,
 773 .path-frontpage .tabs--primary,
 774 .path-frontpage .region-content {
 775   max-width: 2000px; /* high number beyond the max */
 776 }
 777
 778 .page-node-type-page .page-header {
 779   margin-bottom: 20px;
 780 }
 781
 782 .path-news h2,
 783 .block-views-blocknews-news-block article h2 {
 784   font-size: 25px;
 785 }
 786
 787 .page-node-type-product-announcement .author,
 788 .page-node-type-general-news-item .author {
 789   margin: 10px 0 20px 0;
 790   font-style: oblique;
 791 }
 792
 793 .page-node-type-product-announcement .field--name-body,
 794 .page-node-type-general-news-item .field--name-body {
 795   margin-bottom: 20px;
 796 }
 797
 798 .page-node-type-product-announcement .field--name-field-external-news-link,
 799 .page-node-type-general-news-item .field--name-field-external-news-link {
 800   margin-bottom: 20px;
 801 }
 802
 803 .page-node-type-product-announcement .field--name-field-vendor-page,
 804 .page-node-type-product-announcement .field--name-field-announced-products {
 805   margin-bottom: 20px;
 806 }
 807
 808
 809 /* Search Results */
 810
 811
 812 @media screen and (max-width: 600px) {
 813   .path-search .region-content > ol {
 814     width: 300px;
 815   }
 816 }
 817 @media screen and (min-width: 601px) and (max-width 1000px) {
 818   .path-search .region-content > ol {
 819     width: 560px;
 820   }
 821 }
 822 @media screen and (min-width: 1001px) {
 823   .path-search .region-content > ol {
 824     width: 900px;
 825   }
 826 }
 827
 828 .path-search .region-content > ol {
 829   margin: 0 auto;
 830   padding-left: 0;
 831   overflow: auto;
 832 }
 833
 834 .path-search .region-content > ol li {
 835   width: 280px;
 836   height: 280px;
 837   margin: 0px auto;
 838   padding: 10px;
 839
 840   float: left;
 841
 842   list-style: none;
 843   overflow: hidden;
 844 }
 845
 846 .path-search .region-content > ol li h3 {
 847   text-align: center;
 848 }
 849
 850 .path-search .region-content > ol li .search-image {
 851   width: 100px;
 852   height: 100px;
 853
 854   margin: 0 auto;
 855
 856   display: flex;
 857   align-items: center;
 858 }
 859
 860 .path-search .region-content > ol li img {
 861 }
 862
 863
 864 /* Footer */
 865
 866 .footer {
 867   background: #333;
 868   color: #FFF;
 869 }
 870
 871 /* full page width for footer */
 872
 873 .footer {
 874   width: 100%;
 875 }
 876
 877 .footer a { color: #DDCC00; }
 878
 879 .footer a:hover { color: #FFF; }
 880
 881 .footer h4 { font-weight: bold; }
 882
 883 .footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
 884
 885 #fsf-logo-footer { margin-bottom: 10px; }
 886
 887 @media print { #fsf-logo-footer { filter: invert(100%) } }
 888