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